@esri/calcite-components 2.6.0-next.1 → 2.6.0-next.3

package/dist/calcite/p-313a89f7.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["isTreeItem","element","tagName","getTraversableItems","root","Array","from","querySelectorAll","filter","item","currentItem","undefined","parent","parentElement","traversable","hasChildren","expanded","treeCss","Tree","this","keyDownHandler","event","child","el","target","supportedKeys","contains","includes","key","traversableItems","forEach","tabIndex","currentItemIndex","indexOf","nextItem","focus","preventDefault","previousItem","rootToItemPath","slice","reverse","parentItem","find","depth","disabled","firstNode","shift","lastNode","pop","componentWillRender","closest","lines","scale","selectionMode","render","h","Host","toString","onKeyDown","role","getRootTabIndex","onFocus","focusTarget","querySelector","focusElement","onFocusIn","focusedFromRootOrOutsideTree","relatedTarget","removeAttribute","onFocusOut","willFocusOutsideTree","onInternalTreeItemSelect","childItems","nodeListToArray","stopPropagation","updateAncestorTree","isNoneSelectionMode","shouldSelect","shouldDeselectAllChildren","shouldModifyToCurrentSelection","detail","modifyCurrentSelection","shouldClearCurrentSelection","length","shouldUpdateExpand","targetItems","push","selectedItems","treeItem","selected","window","getSelection","removeAllRanges","i","calciteTreeSelect","emit","updateItem","indeterminate","ancestors","childItemsWithNoChildren","childItemsWithChildren","futureSelected","updateItemState","unselected","directChildItems","ancestor","descendants","activeDescendants","CSS","actionsEnd","checkboxLabel","checkbox","chevron","nodeContainer","childrenContainer","bulletPointIcon","checkmarkIcon","itemExpanded","iconStart","nodeAndActionsContainer","SLOTS","children","ICONS","bulletPoint","checkmark","chevronRight","blank","treeItemCss","TreeItem","iconClickHandler","childrenClickHandler","userChangedValue","updateParentIsExpanded","items","getSlotted","all","selector","parentExpanded","actionsEndSlotChangeHandler","hasEndActions","slotChangeHasAssignedElement","expandedHandler","newValue","handleSelectedChange","value","calciteInternalTreeItemSelect","getSelectionMode","isSelectionMultiLike","connectedCallback","parentTreeItem","connectConditionalSlotComponent","connectInteractive","disconnectedCallback","disconnectConditionalSlotComponent","disconnectInteractive","parentTree","nextParentTree","componentWillLoad","requestAnimationFrame","updateAfterInitialRender","componentDidLoad","componentDidRender","updateHostInteraction","rtl","getElementDir","showBulletPoint","showCheckmark","showBlank","class","CSS_UTILITY","icon","onClick","getIconScale","defaultSlotNode","checked","selectedIcon","itemIndicator","hidden","isExpanded","slotNode","name","onSlotchange","iconStartEl","flipRtl","iconFlipRtl","toAriaBoolean","InteractiveContainer","ref","defaultSlotWrapper","actionSlotWrapper","isActionEndEvent","link","filterDirectChildren","composedPath","toLowerCase","open","href","defaultPrevented","matches","click","siblings","selectedSiblings"],"sources":["src/components/tree/utils.ts","src/components/tree/tree.scss?tag=calcite-tree&encapsulation=shadow","src/components/tree/tree.tsx","src/components/tree-item/resources.ts","src/components/tree-item/tree-item.scss?tag=calcite-tree-item&encapsulation=shadow","src/components/tree-item/tree-item.tsx"],"sourcesContent":["export function isTreeItem(element: Element): element is HTMLCalciteTreeItemElement {\n  return element?.tagName === \"CALCITE-TREE-ITEM\";\n}\n\nexport function getTraversableItems(root: HTMLCalciteTreeElement): HTMLCalciteTreeItemElement[] {\n  return Array.from(root.querySelectorAll<HTMLCalciteTreeItemElement>(\"calcite-tree-item:not([disabled])\")).filter(\n    (item): boolean => {\n      let currentItem: HTMLElement = item;\n\n      while (currentItem !== root && currentItem !== undefined) {\n        const parent = currentItem.parentElement;\n        const traversable = !isTreeItem(parent) || !parent.hasChildren || parent.expanded;\n\n        if (!traversable) {\n          return false;\n        }\n\n        currentItem = currentItem.parentElement;\n      }\n\n      return true;\n    },\n  );\n}\n",":host {\n  @apply block;\n}\n\n:host(:focus) {\n  @apply outline-none;\n}\n\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  VNode,\n} from \"@stencil/core\";\nimport { focusElement, nodeListToArray } from \"../../utils/dom\";\nimport { Scale, SelectionMode } from \"../interfaces\";\nimport { TreeItemSelectDetail } from \"../tree-item/interfaces\";\nimport { getTraversableItems, isTreeItem } from \"./utils\";\n\n/**\n * @slot - A slot for `calcite-tree-item` elements.\n */\n@Component({\n  tag: \"calcite-tree\",\n  styleUrl: \"tree.scss\",\n  shadow: true,\n})\nexport class Tree {\n  //--------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /** When `true`, displays indentation guide lines. */\n  @Prop({ mutable: true, reflect: true }) lines = false;\n\n  /**\n   * @internal\n   */\n  @Prop({ reflect: true, mutable: true }) child: boolean;\n\n  /** Specifies the size of the component. */\n  @Prop({ mutable: true, reflect: true }) scale: Scale = \"m\";\n\n  /**\n   * Specifies the selection mode of the component, where:\n   *\n   * `\"ancestors\"` displays with a checkbox and allows any number of selections from corresponding parent and child selections,\n   *\n   * `\"children\"` allows any number of selections from one parent from corresponding parent and child selections,\n   *\n   * `\"multichildren\"` allows any number of selections from corresponding parent and child selections,\n   *\n   * `\"multiple\"` allows any number of selections,\n   *\n   * `\"none\"` allows no selections,\n   *\n   * `\"single\"` allows one selection, and\n   *\n   * `\"single-persist\"` allows and requires one selection.\n   *\n   * @default \"single\"\n   */\n  @Prop({ mutable: true, reflect: true }) selectionMode: SelectionMode = \"single\";\n\n  /**\n   * Specifies the component's selected items.\n   *\n   * @readonly\n   */\n  @Prop({ mutable: true }) selectedItems: HTMLCalciteTreeItemElement[] = [];\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  componentWillRender(): void {\n    const parent: HTMLCalciteTreeElement = this.el.parentElement?.closest(\"calcite-tree\");\n    this.lines = parent ? parent.lines : this.lines;\n    this.scale = parent ? parent.scale : this.scale;\n    this.selectionMode = parent ? parent.selectionMode : this.selectionMode;\n    this.child = !!parent;\n  }\n\n  render(): VNode {\n    return (\n      <Host\n        aria-multiselectable={\n          this.child\n            ? undefined\n            : (\n                this.selectionMode === \"multiple\" || this.selectionMode === \"multichildren\"\n              ).toString()\n        }\n        onKeyDown={this.keyDownHandler}\n        role={!this.child ? \"tree\" : undefined}\n        tabIndex={this.getRootTabIndex()}\n      >\n        <slot />\n      </Host>\n    );\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Event Listeners\n  //\n  //--------------------------------------------------------------------------\n\n  @Listen(\"focus\") onFocus(): void {\n    if (!this.child) {\n      const focusTarget =\n        this.el.querySelector<HTMLCalciteTreeItemElement>(\n          \"calcite-tree-item[selected]:not([disabled])\",\n        ) || this.el.querySelector<HTMLCalciteTreeItemElement>(\"calcite-tree-item:not([disabled])\");\n\n      focusElement(focusTarget);\n    }\n  }\n\n  @Listen(\"focusin\") onFocusIn(event: FocusEvent): void {\n    const focusedFromRootOrOutsideTree =\n      event.relatedTarget === this.el || !this.el.contains(event.relatedTarget as HTMLElement);\n\n    if (focusedFromRootOrOutsideTree) {\n      // gives user the ability to tab into external elements (modifying tabindex property will not work in firefox)\n      this.el.removeAttribute(\"tabindex\");\n    }\n  }\n\n  @Listen(\"focusout\") onFocusOut(event: FocusEvent): void {\n    const willFocusOutsideTree = !this.el.contains(event.relatedTarget as HTMLElement);\n\n    if (willFocusOutsideTree) {\n      this.el.tabIndex = this.getRootTabIndex();\n    }\n  }\n\n  @Listen(\"calciteInternalTreeItemSelect\")\n  onInternalTreeItemSelect(event: CustomEvent<TreeItemSelectDetail>): void {\n    if (this.child) {\n      return;\n    }\n\n    const target = event.target as HTMLCalciteTreeItemElement;\n    const childItems = nodeListToArray(\n      target.querySelectorAll(\"calcite-tree-item\"),\n    ) as HTMLCalciteTreeItemElement[];\n\n    event.preventDefault();\n    event.stopPropagation();\n\n    if (this.selectionMode === \"ancestors\") {\n      this.updateAncestorTree(event);\n      return;\n    }\n\n    const isNoneSelectionMode = this.selectionMode === \"none\";\n\n    const shouldSelect =\n      this.selectionMode !== null &&\n      (!target.hasChildren ||\n        (target.hasChildren &&\n          (this.selectionMode === \"children\" || this.selectionMode === \"multichildren\")));\n\n    const shouldDeselectAllChildren = this.selectionMode === \"multichildren\" && target.hasChildren;\n\n    const shouldModifyToCurrentSelection =\n      !isNoneSelectionMode &&\n      event.detail.modifyCurrentSelection &&\n      (this.selectionMode === \"multiple\" || this.selectionMode === \"multichildren\");\n\n    const shouldClearCurrentSelection =\n      !shouldModifyToCurrentSelection &&\n      (((this.selectionMode === \"single\" || this.selectionMode === \"multiple\") &&\n        childItems.length <= 0) ||\n        this.selectionMode === \"children\" ||\n        this.selectionMode === \"multichildren\");\n\n    const shouldUpdateExpand =\n      [\"multiple\", \"none\", \"single\", \"single-persist\"].includes(this.selectionMode) &&\n      target.hasChildren;\n\n    const targetItems: HTMLCalciteTreeItemElement[] = [];\n\n    if (shouldSelect) {\n      targetItems.push(target);\n    }\n\n    if (shouldClearCurrentSelection) {\n      const selectedItems = nodeListToArray(\n        this.el.querySelectorAll(\"calcite-tree-item[selected]\"),\n      ) as HTMLCalciteTreeItemElement[];\n\n      selectedItems.forEach((treeItem) => {\n        if (!targetItems.includes(treeItem)) {\n          treeItem.selected = false;\n        }\n      });\n    }\n\n    if (\n      shouldUpdateExpand &&\n      [\"multiple\", \"none\", \"single\", \"single-persist\"].includes(this.selectionMode)\n    ) {\n      target.expanded = !target.expanded;\n    }\n\n    if (shouldDeselectAllChildren) {\n      childItems.forEach((item) => {\n        item.selected = false;\n        if (item.hasChildren) {\n          item.expanded = false;\n        }\n      });\n    }\n\n    if (shouldModifyToCurrentSelection) {\n      window.getSelection().removeAllRanges();\n    }\n\n    if (shouldModifyToCurrentSelection && target.selected) {\n      targetItems.forEach((treeItem) => {\n        if (!treeItem.disabled) {\n          treeItem.selected = false;\n        }\n      });\n    } else if (!isNoneSelectionMode) {\n      targetItems.forEach((treeItem) => {\n        if (!treeItem.disabled) {\n          treeItem.selected = true;\n        }\n      });\n    }\n\n    this.selectedItems = isNoneSelectionMode\n      ? []\n      : (nodeListToArray(this.el.querySelectorAll(\"calcite-tree-item\")).filter(\n          (i) => i.selected,\n        ) as HTMLCalciteTreeItemElement[]);\n\n    this.calciteTreeSelect.emit();\n\n    event.stopPropagation();\n  }\n\n  private keyDownHandler = (event: KeyboardEvent): void => {\n    if (this.child) {\n      return;\n    }\n\n    const root = this.el;\n    const target = event.target as HTMLCalciteTreeItemElement;\n\n    const supportedKeys = [\"ArrowRight\", \"ArrowDown\", \"ArrowLeft\", \"ArrowUp\", \"Home\", \"End\", \"Tab\"];\n\n    if (!(isTreeItem(target) && this.el.contains(target)) || !supportedKeys.includes(event.key)) {\n      return;\n    }\n\n    const traversableItems = getTraversableItems(root);\n\n    if (event.key === \"Tab\") {\n      // root tabindex will be restored when blurred/focused\n      traversableItems.forEach((item) => (item.tabIndex = -1));\n      return;\n    }\n\n    if (event.key === \"ArrowDown\") {\n      const currentItemIndex = traversableItems.indexOf(target);\n      const nextItem = traversableItems[currentItemIndex + 1];\n      nextItem?.focus();\n      event.preventDefault();\n      return;\n    }\n\n    if (event.key === \"ArrowUp\") {\n      const currentItemIndex = traversableItems.indexOf(target);\n      const previousItem = traversableItems[currentItemIndex - 1];\n      previousItem?.focus();\n      event.preventDefault();\n      return;\n    }\n\n    if (event.key === \"ArrowLeft\") {\n      if (target.hasChildren && target.expanded) {\n        target.expanded = false;\n        event.preventDefault();\n        return;\n      }\n\n      const rootToItemPath = traversableItems.slice(0, traversableItems.indexOf(target)).reverse();\n      const parentItem = rootToItemPath.find((item) => item.depth === target.depth - 1);\n\n      parentItem?.focus();\n      event.preventDefault();\n\n      return;\n    }\n\n    if (event.key === \"ArrowRight\") {\n      if (!target.disabled && target.hasChildren) {\n        if (!target.expanded) {\n          target.expanded = true;\n          event.preventDefault();\n        } else {\n          const currentItemIndex = traversableItems.indexOf(target);\n          const nextItem = traversableItems[currentItemIndex + 1];\n          nextItem?.focus();\n          event.preventDefault();\n        }\n      }\n\n      return;\n    }\n\n    if (event.key === \"Home\") {\n      const firstNode = traversableItems.shift();\n      if (firstNode) {\n        firstNode.focus();\n        event.preventDefault();\n      }\n      return;\n    }\n\n    if (event.key === \"End\") {\n      const lastNode = traversableItems.pop();\n      if (lastNode) {\n        lastNode.focus();\n        event.preventDefault();\n      }\n      return;\n    }\n  };\n\n  private updateAncestorTree(event: CustomEvent<TreeItemSelectDetail>): void {\n    const item = event.target as HTMLCalciteTreeItemElement;\n    const updateItem = event.detail.updateItem;\n\n    if (item.disabled || (item.indeterminate && !updateItem)) {\n      return;\n    }\n\n    const ancestors: HTMLCalciteTreeItemElement[] = [];\n    let parent = item.parentElement.closest<HTMLCalciteTreeItemElement>(\"calcite-tree-item\");\n    while (parent) {\n      ancestors.push(parent);\n      parent = parent.parentElement.closest<HTMLCalciteTreeItemElement>(\"calcite-tree-item\");\n    }\n\n    const childItems = Array.from(\n      item.querySelectorAll<HTMLCalciteTreeItemElement>(\"calcite-tree-item:not([disabled])\"),\n    );\n    const childItemsWithNoChildren = childItems.filter((child) => !child.hasChildren);\n    const childItemsWithChildren = childItems.filter((child) => child.hasChildren);\n\n    let futureSelected;\n    if (updateItem) {\n      futureSelected = item.hasChildren ? !(item.selected || item.indeterminate) : !item.selected;\n    } else {\n      futureSelected = item.selected;\n    }\n\n    childItemsWithNoChildren.forEach((el) => {\n      el.selected = futureSelected;\n      el.indeterminate = false;\n    });\n\n    function updateItemState(\n      childItems: HTMLCalciteTreeItemElement[],\n      item: HTMLCalciteTreeItemElement,\n    ): void {\n      const selected = childItems.filter((child) => child.selected);\n      const unselected = childItems.filter((child) => !child.selected);\n\n      item.selected = selected.length === childItems.length;\n      item.indeterminate = selected.length > 0 && unselected.length > 0;\n    }\n\n    childItemsWithChildren.reverse().forEach((el) => {\n      const directChildItems = Array.from(\n        el.querySelectorAll<HTMLCalciteTreeItemElement>(\n          \":scope > calcite-tree > calcite-tree-item\",\n        ),\n      );\n\n      updateItemState(directChildItems, el);\n    });\n\n    if (updateItem) {\n      if (item.hasChildren) {\n        updateItemState(childItems, item);\n      } else {\n        item.selected = futureSelected;\n        item.indeterminate = false;\n      }\n    }\n\n    ancestors.forEach((ancestor) => {\n      const descendants = nodeListToArray(ancestor.querySelectorAll(\"calcite-tree-item\"));\n      const activeDescendants = descendants.filter((el) => el.selected);\n      if (activeDescendants.length === 0) {\n        ancestor.selected = false;\n        ancestor.indeterminate = false;\n        return;\n      }\n\n      const indeterminate = activeDescendants.length < descendants.length;\n      ancestor.indeterminate = indeterminate;\n      ancestor.selected = !indeterminate;\n    });\n\n    this.selectedItems = (\n      nodeListToArray(this.el.querySelectorAll(\"calcite-tree-item\")) as HTMLCalciteTreeItemElement[]\n    ).filter((i) => i.selected);\n\n    if (updateItem) {\n      this.calciteTreeSelect.emit();\n    }\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Fires when the user selects/deselects `calcite-tree-items`.\n   */\n  @Event({ cancelable: false }) calciteTreeSelect: EventEmitter<void>;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteTreeElement;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  getRootTabIndex(): number {\n    return !this.child ? 0 : -1;\n  }\n}\n","export const CSS = {\n  actionsEnd: \"actions-end\",\n  checkboxLabel: \"checkbox-label\",\n  checkbox: \"checkbox\",\n  chevron: \"chevron\",\n  nodeContainer: \"node-container\",\n  childrenContainer: \"children-container\",\n  bulletPointIcon: \"bullet-point\",\n  checkmarkIcon: \"checkmark\",\n  itemExpanded: \"item--expanded\",\n  iconStart: \"icon-start\",\n  nodeAndActionsContainer: \"node-actions-container\",\n};\n\nexport const SLOTS = {\n  actionsEnd: \"actions-end\",\n  children: \"children\",\n};\n\nexport const ICONS = {\n  bulletPoint: \"bullet-point\",\n  checkmark: \"check\",\n  chevronRight: \"chevron-right\",\n  blank: \"blank\",\n};\n",":host {\n  @apply text-color-3\n    block\n    max-w-full\n    cursor-pointer;\n}\n\n.node-actions-container {\n  @apply flex;\n}\n\n@include calciteHydratedHidden();\n@include disabled();\n\n:host([scale=\"s\"]) {\n  @apply text-n2h;\n\n  .node-actions-container {\n    @apply min-h-[1.5rem];\n    .node-container {\n      .checkbox,\n      .chevron,\n      .checkmark,\n      .bullet-point {\n        margin-inline: theme(\"margin.1\");\n      }\n      .icon-start {\n        margin-inline: theme(\"margin.3\");\n      }\n    }\n  }\n}\n\n:host([scale=\"m\"]) {\n  @apply text-n1h;\n\n  .node-actions-container {\n    @apply min-h-[2rem];\n    .node-container {\n      .checkbox,\n      .chevron,\n      .checkmark,\n      .bullet-point {\n        margin-inline: theme(\"margin.2\");\n      }\n      .icon-start {\n        margin-inline: theme(\"margin.3\");\n      }\n    }\n  }\n}\n\n:host([scale=\"l\"]) {\n  @apply text-0h;\n\n  .node-actions-container {\n    @apply min-h-[2.75rem];\n    .node-container {\n      .checkbox,\n      .chevron,\n      .checkmark,\n      .bullet-point {\n        margin-inline: theme(\"margin.3\");\n      }\n      .icon-start {\n        margin-inline: theme(\"margin.3\");\n      }\n    }\n  }\n}\n\n:host([lines]) {\n  .children-container:after {\n    @apply transition-default\n        absolute\n        top-0\n        w-px\n        transition-colors\n        z-default;\n    // ensure lines don't overlap focus outline\n    block-size: 96%;\n    content: \"\";\n    background-color: var(--calcite-color-border-2);\n  }\n}\n\n:host(:not([lines])) .node-container:after {\n  @apply hidden;\n}\n\n::slotted(*) {\n  @apply min-w-0 max-w-full break-words;\n  color: inherit;\n  text-decoration: none !important;\n\n  &:hover {\n    text-decoration: none !important;\n  }\n}\n\n::slotted(a) {\n  @apply w-full no-underline;\n}\n\n// focus styles\n:host {\n  @apply outline-none;\n\n  .node-container {\n    @apply focus-base;\n  }\n  &:focus,\n  &:active {\n    .node-container {\n      @apply focus-inset;\n    }\n  }\n}\n\n:host(:focus:not([disabled])) {\n  .node-container {\n    @apply focus-inset outline-none;\n  }\n}\n\n.actions-end {\n  @apply flex self-stretch flex-row items-center;\n}\n\n.checkbox {\n  line-height: 0;\n}\n\n.checkbox-label {\n  @apply pointer-events-none flex items-center;\n}\n\n.checkbox:focus {\n  @apply outline-none;\n}\n\n.children-container {\n  @apply relative h-0 overflow-hidden opacity-0 origin-top;\n  margin-inline-start: theme(\"margin.5\");\n  transform: scaleY(0);\n  transition:\n    var(--calcite-animation-timing) $easing-function,\n    opacity var(--calcite-animation-timing) $easing-function,\n    all var(--calcite-animation-timing) ease-in-out; // note that we're transitioning transform, not height!\n\n  .item--expanded > & {\n    @apply overflow-visible opacity-100;\n    transform: none;\n    block-size: auto;\n  }\n}\n\n.node-container {\n  @apply relative flex grow items-center min-w-0;\n\n  .checkmark,\n  .bullet-point {\n    @apply transition-default opacity-0;\n    color: var(--calcite-color-border-1);\n  }\n}\n\n.node-container:hover,\n:host([selected]) .node-container:hover,\n:host(:focus:not([disabled])) .node-container {\n  .checkmark,\n  .bullet-point {\n    @apply opacity-100;\n  }\n}\n\n:host([selected]) .node-container,\n:host([selected]) .node-container:hover {\n  @apply font-medium text-color-1;\n\n  .bullet-point,\n  .checkmark {\n    @apply opacity-100;\n    color: theme(\"colors.brand\");\n  }\n}\n\n:host([selection-mode=\"none\"]:not([has-children])) {\n  &:host([scale=\"s\"]) .node-container {\n    padding-inline-start: theme(\"padding.2\");\n  }\n  &:host([scale=\"m\"]) .node-container {\n    padding-inline-start: theme(\"padding.4\");\n  }\n  &:host([scale=\"l\"]) .node-container {\n    padding-inline-start: theme(\"padding.6\");\n  }\n}\n\n// ancestors selection-mode, dropdown without children\n:host(:not([has-children])) {\n  &:host([scale=\"s\"]) .node-container[data-selection-mode=\"ancestors\"] .checkbox {\n    padding-inline-start: theme(\"padding.5\");\n  }\n  &:host([scale=\"m\"]) .node-container[data-selection-mode=\"ancestors\"] .checkbox {\n    padding-inline-start: theme(\"padding.6\");\n  }\n  &:host([scale=\"l\"]) .node-container[data-selection-mode=\"ancestors\"] .checkbox {\n    padding-inline-start: 1.75rem;\n  }\n}\n// ancestors selection-mode, dropdown with children\n:host([has-children]) .node-container[data-selection-mode=\"ancestors\"] {\n  .checkbox {\n    margin-inline-start: 0;\n  }\n}\n\n// dropdown with children\n:host([has-children]) .node-container {\n  .bullet-point,\n  .checkmark {\n    @apply hidden;\n  }\n}\n\n.chevron {\n  @apply transition-default\n    text-color-3\n    relative\n    self-center;\n  flex: 0 0 auto;\n  transform: rotate(0deg);\n\n  .calcite--rtl & {\n    transform: rotate(180deg);\n  }\n\n  .item--expanded .node-container > & {\n    transform: rotate(90deg);\n  }\n}\n\n:host([selected]) {\n  .checkmark,\n  .bullet-point {\n    color: var(--calcite-color-brand);\n  }\n}\n\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport {\n  filterDirectChildren,\n  getElementDir,\n  getSlotted,\n  slotChangeHasAssignedElement,\n  toAriaBoolean,\n} from \"../../utils/dom\";\nimport {\n  ConditionalSlotComponent,\n  connectConditionalSlotComponent,\n  disconnectConditionalSlotComponent,\n} from \"../../utils/conditionalSlot\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { CSS_UTILITY } from \"../../utils/resources\";\nimport { FlipContext, Scale, SelectionMode } from \"../interfaces\";\nimport { TreeItemSelectDetail } from \"./interfaces\";\nimport { CSS, ICONS, SLOTS } from \"./resources\";\nimport { getIconScale } from \"../../utils/component\";\n\n/**\n * @slot - A slot for adding text.\n * @slot children - A slot for adding nested `calcite-tree` elements.\n * @slot actions-end - A slot for adding actions to the end of the component. It is recommended to use two or fewer actions.\n */\n@Component({\n  tag: \"calcite-tree-item\",\n  styleUrl: \"tree-item.scss\",\n  shadow: true,\n})\nexport class TreeItem implements ConditionalSlotComponent, InteractiveComponent {\n  //--------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * When `true`, interaction is prevented and the component is displayed with lower opacity.\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** When `true`, the component is expanded. */\n  @Prop({ mutable: true, reflect: true }) expanded = false;\n\n  @Watch(\"expanded\")\n  expandedHandler(newValue: boolean): void {\n    this.updateParentIsExpanded(this.el, newValue);\n  }\n\n  /** When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`). */\n  @Prop({ reflect: true }) iconFlipRtl: FlipContext;\n\n  /** Specifies an icon to display at the start of the component. */\n  @Prop({ reflect: true }) iconStart: string;\n\n  /** When `true`, the component is selected. */\n  @Prop({ mutable: true, reflect: true }) selected = false;\n\n  @Watch(\"selected\")\n  handleSelectedChange(value: boolean): void {\n    if (this.selectionMode === \"ancestors\" && !this.userChangedValue) {\n      if (value) {\n        this.indeterminate = false;\n      }\n      this.calciteInternalTreeItemSelect.emit({\n        modifyCurrentSelection: true,\n        updateItem: false,\n      });\n    }\n  }\n\n  /**\n   * @internal\n   */\n  @Prop() parentExpanded = false;\n\n  /**\n   * @internal\n   */\n  @Prop({ reflect: true, mutable: true }) depth = -1;\n\n  /**\n   * @internal\n   */\n  @Prop({ reflect: true, mutable: true }) hasChildren: boolean = null;\n\n  /**\n   * @internal\n   */\n  @Prop({ reflect: true, mutable: true }) lines: boolean;\n\n  /**\n   * @internal\n   */\n  @Prop({ reflect: true, mutable: true }) scale: Scale;\n\n  /**\n   * In ancestor selection mode, show as indeterminate when only some children are selected.\n   *\n   * @internal\n   */\n  @Prop({ reflect: true }) indeterminate = false;\n\n  /**\n   * @internal\n   */\n  @Prop({ mutable: true, reflect: true }) selectionMode: SelectionMode;\n\n  @Watch(\"selectionMode\")\n  getSelectionMode(): void {\n    this.isSelectionMultiLike =\n      this.selectionMode === \"multiple\" || this.selectionMode === \"multichildren\";\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    this.parentTreeItem = this.el.parentElement?.closest(\"calcite-tree-item\");\n    if (this.parentTreeItem) {\n      const { expanded } = this.parentTreeItem;\n      this.updateParentIsExpanded(this.parentTreeItem, expanded);\n    }\n    connectConditionalSlotComponent(this);\n    connectInteractive(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectConditionalSlotComponent(this);\n    disconnectInteractive(this);\n  }\n\n  componentWillRender(): void {\n    this.hasChildren = !!this.el.querySelector(\"calcite-tree\");\n    this.depth = 0;\n    let parentTree = this.el.closest(\"calcite-tree\");\n\n    if (!parentTree) {\n      return;\n    }\n\n    this.selectionMode = parentTree.selectionMode;\n    this.scale = parentTree.scale || \"m\";\n    this.lines = parentTree.lines;\n\n    let nextParentTree;\n    while (parentTree) {\n      nextParentTree = parentTree.parentElement?.closest(\"calcite-tree\");\n      if (nextParentTree === parentTree) {\n        break;\n      } else {\n        parentTree = nextParentTree;\n        this.depth = this.depth + 1;\n      }\n    }\n  }\n\n  componentWillLoad(): void {\n    requestAnimationFrame(() => (this.updateAfterInitialRender = true));\n  }\n\n  componentDidLoad(): void {\n    this.updateAncestorTree();\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private State/Props\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteTreeItemElement;\n\n  private isSelectionMultiLike: boolean;\n\n  render(): VNode {\n    const rtl = getElementDir(this.el) === \"rtl\";\n    const showBulletPoint = this.selectionMode === \"single\" || this.selectionMode === \"children\";\n    const showCheckmark =\n      this.selectionMode === \"multiple\" || this.selectionMode === \"multichildren\";\n    const showBlank = this.selectionMode === \"none\" && !this.hasChildren;\n\n    const chevron = this.hasChildren ? (\n      <calcite-icon\n        class={{\n          [CSS.chevron]: true,\n          [CSS_UTILITY.rtl]: rtl,\n        }}\n        data-test-id=\"icon\"\n        icon={ICONS.chevronRight}\n        onClick={this.iconClickHandler}\n        scale={getIconScale(this.scale)}\n      />\n    ) : null;\n    const defaultSlotNode: VNode = <slot key=\"default-slot\" />;\n\n    const checkbox =\n      this.selectionMode === \"ancestors\" ? (\n        <label class={CSS.checkboxLabel} key=\"checkbox-label\">\n          <calcite-checkbox\n            checked={this.selected}\n            class={CSS.checkbox}\n            data-test-id=\"checkbox\"\n            indeterminate={this.hasChildren && this.indeterminate}\n            scale={this.scale}\n            tabIndex={-1}\n          />\n          {defaultSlotNode}\n        </label>\n      ) : null;\n    const selectedIcon = showBulletPoint\n      ? ICONS.bulletPoint\n      : showCheckmark\n        ? ICONS.checkmark\n        : showBlank\n          ? ICONS.blank\n          : null;\n    const itemIndicator = selectedIcon ? (\n      <calcite-icon\n        class={{\n          [CSS.bulletPointIcon]: selectedIcon === ICONS.bulletPoint,\n          [CSS.checkmarkIcon]: selectedIcon === ICONS.checkmark,\n          [CSS_UTILITY.rtl]: rtl,\n        }}\n        icon={selectedIcon}\n        scale={getIconScale(this.scale)}\n      />\n    ) : null;\n\n    const hidden = !(this.parentExpanded || this.depth === 1);\n    const isExpanded = this.updateAfterInitialRender && this.expanded;\n    const { hasEndActions } = this;\n    const slotNode = (\n      <slot\n        key=\"actionsEndSlot\"\n        name={SLOTS.actionsEnd}\n        onSlotchange={this.actionsEndSlotChangeHandler}\n      />\n    );\n\n    const iconStartEl = (\n      <calcite-icon\n        class={CSS.iconStart}\n        flipRtl={this.iconFlipRtl === \"start\" || this.iconFlipRtl === \"both\"}\n        icon={this.iconStart}\n        scale={getIconScale(this.scale)}\n      />\n    );\n\n    return (\n      <Host\n        aria-expanded={this.hasChildren ? toAriaBoolean(isExpanded) : undefined}\n        aria-hidden={toAriaBoolean(hidden)}\n        aria-selected={this.selected ? \"true\" : showCheckmark ? \"false\" : undefined}\n        calcite-hydrated-hidden={hidden}\n        role=\"treeitem\"\n        tabIndex={this.disabled ? -1 : 0}\n      >\n        <InteractiveContainer disabled={this.disabled}>\n          <div class={{ [CSS.itemExpanded]: isExpanded }}>\n            <div class={CSS.nodeAndActionsContainer}>\n              <div\n                class={{\n                  [CSS.nodeContainer]: true,\n                  [CSS_UTILITY.rtl]: rtl,\n                }}\n                data-selection-mode={this.selectionMode}\n                // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)\n                ref={(el) => (this.defaultSlotWrapper = el as HTMLElement)}\n              >\n                {chevron}\n                {itemIndicator}\n                {this.iconStart ? iconStartEl : null}\n                {checkbox ? checkbox : defaultSlotNode}\n              </div>\n              <div\n                class={CSS.actionsEnd}\n                hidden={!hasEndActions}\n                ref={(el) => (this.actionSlotWrapper = el as HTMLElement)}\n              >\n                {slotNode}\n              </div>\n            </div>\n\n            <div\n              class={{\n                [CSS.childrenContainer]: true,\n                [CSS_UTILITY.rtl]: rtl,\n              }}\n              data-test-id=\"calcite-tree-children\"\n              onClick={this.childrenClickHandler}\n              role={this.hasChildren ? \"group\" : undefined}\n            >\n              <slot name={SLOTS.children} />\n            </div>\n          </div>\n        </InteractiveContainer>\n      </Host>\n    );\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Event Listeners\n  //\n  //--------------------------------------------------------------------------\n\n  @Listen(\"click\")\n  onClick(event: Event): void {\n    if (this.disabled || this.isActionEndEvent(event)) {\n      return;\n    }\n\n    // Solve for if the item is clicked somewhere outside the slotted anchor.\n    // Anchor is triggered anywhere you click\n    const [link] = filterDirectChildren<HTMLAnchorElement>(this.el, \"a\");\n    if (link && (event.composedPath()[0] as any).tagName.toLowerCase() !== \"a\") {\n      const target = link.target === \"\" ? \"_self\" : link.target;\n      window.open(link.href, target);\n    }\n    this.calciteInternalTreeItemSelect.emit({\n      modifyCurrentSelection: this.selectionMode === \"ancestors\" || this.isSelectionMultiLike,\n      updateItem: true,\n    });\n    this.userChangedValue = true;\n  }\n\n  private iconClickHandler = (event: MouseEvent): void => {\n    event.stopPropagation();\n    this.expanded = !this.expanded;\n  };\n\n  private childrenClickHandler = (event: MouseEvent): void => event.stopPropagation();\n\n  @Listen(\"keydown\")\n  keyDownHandler(event: KeyboardEvent): void {\n    if (this.isActionEndEvent(event) || event.defaultPrevented) {\n      return;\n    }\n\n    switch (event.key) {\n      case \" \":\n        this.userChangedValue = true;\n        this.calciteInternalTreeItemSelect.emit({\n          modifyCurrentSelection: this.isSelectionMultiLike,\n          updateItem: true,\n        });\n        event.preventDefault();\n        break;\n      case \"Enter\":\n        // activates a node, i.e., performs its default action. For parent nodes, one possible default action is to open or close the node. In single-select trees where selection does not follow focus (see note below), the default action is typically to select the focused node.\n        const link = Array.from(this.el.children).find((el) =>\n          el.matches(\"a\"),\n        ) as HTMLAnchorElement;\n\n        this.userChangedValue = true;\n\n        if (link) {\n          link.click();\n          this.selected = true;\n        } else {\n          this.calciteInternalTreeItemSelect.emit({\n            modifyCurrentSelection: this.isSelectionMultiLike,\n            updateItem: true,\n          });\n        }\n        event.preventDefault();\n    }\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * @internal\n   */\n  @Event({ cancelable: false }) calciteInternalTreeItemSelect: EventEmitter<TreeItemSelectDetail>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private State/Props\n  //\n  //--------------------------------------------------------------------------\n\n  @State() hasEndActions = false;\n\n  /**\n   * Used to make sure initially expanded tree-item can properly\n   * transition and emit events from closed state when rendered.\n   *\n   * @private\n   */\n  @State() updateAfterInitialRender = false;\n\n  actionSlotWrapper!: HTMLElement;\n\n  childrenSlotWrapper!: HTMLElement;\n\n  defaultSlotWrapper!: HTMLElement;\n\n  private parentTreeItem?: HTMLCalciteTreeItemElement;\n\n  private userChangedValue = false;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  private isActionEndEvent(event: Event): boolean {\n    const composedPath = event.composedPath();\n    return composedPath.includes(this.actionSlotWrapper);\n  }\n\n  private updateParentIsExpanded = (el: HTMLCalciteTreeItemElement, expanded: boolean): void => {\n    const items = getSlotted<HTMLCalciteTreeItemElement>(el, SLOTS.children, {\n      all: true,\n      selector: \"calcite-tree-item\",\n    });\n    items.forEach((item) => (item.parentExpanded = expanded));\n  };\n\n  /**\n   * This is meant to be called in `componentDidLoad` in order to take advantage of the hierarchical component lifecycle\n   * and help check for item selection as items are initialized\n   *\n   * @private\n   */\n  private updateAncestorTree(): void {\n    const parentItem = this.parentTreeItem;\n    if (this.selectionMode !== \"ancestors\" || !parentItem) {\n      return;\n    }\n\n    if (this.selected) {\n      const parentTree = this.el.parentElement;\n      const siblings = Array.from(parentTree?.children);\n      const selectedSiblings = siblings.filter(\n        (child: HTMLCalciteTreeItemElement) => child.selected,\n      );\n\n      if (siblings.length === selectedSiblings.length) {\n        parentItem.selected = true;\n        parentItem.indeterminate = false;\n      } else if (selectedSiblings.length > 0) {\n        parentItem.indeterminate = true;\n      }\n\n      const childItems = Array.from(\n        this.el.querySelectorAll<HTMLCalciteTreeItemElement>(\"calcite-tree-item:not([disabled])\"),\n      );\n\n      childItems.forEach((item: HTMLCalciteTreeItemElement) => {\n        item.selected = true;\n        item.indeterminate = false;\n      });\n    } else if (this.indeterminate) {\n      const parentItem = this.parentTreeItem;\n      parentItem.indeterminate = true;\n    }\n  }\n\n  private actionsEndSlotChangeHandler = (event: Event): void => {\n    this.hasEndActions = slotChangeHasAssignedElement(event);\n  };\n}\n"],"mappings":"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"}

package/dist/calcite/p-32f9f099.entry.js

@@ -1,7 +0,0 @@
-/*!
- * 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.6.0-next.1
- */
-import{r as t,c as e,h as i,g as s}from"./p-e538ca60.js";import{f as a}from"./p-c42f5bab.js";import{c as n,u as o,d as r,I as c}from"./p-e90bd66d.js";import{s as l,a as d,c as h}from"./p-2d2e0315.js";import{c as p,d as f}from"./p-9bb36dfb.js";import{u as m,s as u,c as b,d as g}from"./p-f6cdf87d.js";import{d as v}from"./p-9e29450d.js";import"./p-96dbe795.js";import"./p-49af9f12.js";import"./p-57cde6a5.js";import"./p-0a3f1f3c.js";import"./p-2eb03310.js";import"./p-1f3a1793.js";const y={container:"container",searchIcon:"search-icon"};const x={search:"search",close:"x"};const j=250;const w=":host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:flex;inline-size:100%}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.container{display:flex;inline-size:100%;padding:0.5rem}label{position:relative;margin-inline:0.25rem;margin-block:0px;display:flex;inline-size:100%;align-items:center;overflow:hidden}input[type=text]{margin-block-end:0.25rem;inline-size:100%;border-style:none;background-color:transparent;padding-block:0.25rem;font-family:inherit;font-size:var(--calcite-font-size--2);line-height:1rem;color:var(--calcite-color-text-1);padding-inline-end:0.25rem;padding-inline-start:1.5rem;transition:padding var(--calcite-animation-timing), box-shadow var(--calcite-animation-timing)}input[type=text]::-ms-clear{display:none}calcite-input{inline-size:100%}.search-icon{position:absolute;display:flex;color:var(--calcite-color-text-2);inset-inline-start:0;transition:inset-inline-start var(--calcite-animation-timing), inset-inline-end var(--calcite-animation-timing), opacity var(--calcite-animation-timing)}input[type=text]:focus{border-color:var(--calcite-color-brand);outline:2px solid transparent;outline-offset:2px;padding-inline:0.25rem}input[type=text]:focus~.search-icon{inset-inline-start:calc(1rem * -1);opacity:0}.clear-button{display:flex;cursor:pointer;align-items:center;border-width:0px;background-color:transparent;color:var(--calcite-color-text-2)}.clear-button:hover,.clear-button:focus{color:var(--calcite-color-text-1)}:host([hidden]){display:none}[hidden]{display:none}";const z=class{constructor(i){t(this,i);this.calciteFilterChange=e(this,"calciteFilterChange",6);this.filterDebounced=v(((t,e=false,i)=>this.items.length&&this.updateFiltered(a(this.items,t),e,i)),j);this.inputHandler=t=>{const e=t.target;this.value=e.value;this.filterDebounced(e.value,true)};this.keyDownHandler=t=>{if(t.key==="Escape"){this.clear();t.preventDefault()}if(t.key==="Enter"){t.preventDefault()}};this.clear=()=>{this.value="";this.filterDebounced("",true);this.setFocus()};this.items=[];this.disabled=false;this.filteredItems=[];this.placeholder=undefined;this.scale="m";this.value="";this.messages=undefined;this.messageOverrides=undefined;this.effectiveLocale=undefined;this.defaultMessages=undefined}watchItemsHandler(){this.filterDebounced(this.value)}onMessagesChange(){}valueHandler(t){this.filterDebounced(t)}effectiveLocaleChange(){m(this,this.effectiveLocale)}async componentWillLoad(){l(this);if(this.items.length){this.updateFiltered(a(this.items,this.value))}await u(this)}connectedCallback(){n(this);p(this);b(this)}componentDidRender(){o(this)}disconnectedCallback(){r(this);f(this);g(this);this.filterDebounced.cancel()}componentDidLoad(){d(this)}async filter(t=this.value){return new Promise((e=>{this.value=t;this.filterDebounced(t,false,e)}))}async setFocus(){await h(this);this.el?.focus()}updateFiltered(t,e=false,i){this.filteredItems=t;if(e){this.calciteFilterChange.emit()}i?.()}render(){const{disabled:t,scale:e}=this;return i(c,{disabled:t},i("div",{class:y.container},i("label",null,i("calcite-input",{clearable:true,disabled:t,icon:x.search,label:this.messages.label,messageOverrides:{clear:this.messages.clear},onCalciteInputInput:this.inputHandler,onKeyDown:this.keyDownHandler,placeholder:this.placeholder,scale:e,type:"text",value:this.value,ref:t=>{this.textInput=t}}))))}static get delegatesFocus(){return true}static get assetsDirs(){return["assets"]}get el(){return s(this)}static get watchers(){return{items:["watchItemsHandler"],messageOverrides:["onMessagesChange"],value:["valueHandler"],effectiveLocale:["effectiveLocaleChange"]}}};z.style=w;export{z as calcite_filter};
-//# sourceMappingURL=p-32f9f099.entry.js.map

package/dist/calcite/p-33552bb9.entry.js

@@ -1,7 +0,0 @@
-/*!
- * 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.6.0-next.1
- */
-import{r as t,c as e,h as i,H as s,g as a}from"./p-e538ca60.js";import{c as o,d as r,H as n}from"./p-9835ce5c.js";import{c as l,d as c,g as d}from"./p-090ea3a3.js";import{t as h,b as f}from"./p-49af9f12.js";import{c as p,d as m,n as b}from"./p-9bb36dfb.js";import{c as u}from"./p-1f3a1793.js";import{s as g,a as x,c as v,b as z}from"./p-2d2e0315.js";import{c as y,s as k,d as w,u as j}from"./p-f6cdf87d.js";import{c as L,u as H,d as C,I as A}from"./p-e90bd66d.js";import{g as S}from"./p-57cde6a5.js";import{V as W}from"./p-8aa5ebbc.js";import{s as D}from"./p-75c46bed.js";import{t as I}from"./p-c51d1630.js";import"./p-500a3e5a.js";import"./p-0a3f1f3c.js";import"./p-2eb03310.js";import"./p-96dbe795.js";import"./p-9e29450d.js";const O={assistiveText:"assistive-text",characterLimit:"character-limit",content:"content",container:"container",footer:"footer",resizeDisabled:"resize--disabled",resizeDisabledX:"resize--disabled-x",resizeDisabledY:"resize--disabled-y",characterOverLimit:"character--over-limit",readOnly:"readonly",textAreaInvalid:"text-area--invalid",footerSlotted:"footer--slotted",borderColor:"border--color",hide:"hide",blockSizeFull:"block-size--full",footerEndSlotOnly:"footer--end-only"};const T={footerStart:"footer-start",footerEnd:"footer-end"};const E=100;const F=":host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{position:relative;display:inline-block;block-size:100%;inline-size:100%}textarea{position:relative;margin:0px;box-sizing:border-box;display:block;inline-size:100%;border-width:1px;border-color:var(--calcite-color-border-input);background-color:var(--calcite-color-foreground-1);font-family:var(--calcite-sans-family);color:var(--calcite-color-text-1);min-inline-size:12rem;border-block-end:1px solid var(--calcite-color-border-3)}@media screen and (max-width: 480px){textarea{resize:none}}textarea:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand-hover, var(--calcite--color-brand)));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}textarea.text-area--invalid{border-width:1px;border-block-end-width:1px;border-style:solid;border-color:var(--calcite-color-status-danger)}textarea.text-area--invalid:focus{outline:2px solid var(--calcite-color-status-danger);outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}textarea.footer--slotted{min-inline-size:18rem}.footer{box-sizing:border-box;display:flex;align-items:center;border-width:1px;border-block-start-width:0px;border-style:solid;border-color:var(--calcite-color-border-input);background-color:var(--calcite-color-foreground-1)}.character-limit{display:flex;align-items:center;justify-content:flex-end;white-space:nowrap;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-2)}.character--over-limit{font-weight:var(--calcite-font-weight-bold);color:var(--calcite-color-status-danger)}:host([resize=none]) textarea{resize:none}:host([resize=horizontal]) textarea{resize:horizontal}:host([resize=vertical]) textarea{resize:vertical}:host([scale=s]){font-size:var(--calcite-font-size--2)}:host([scale=s]) .footer{padding-block:0.25rem;padding-inline:0.5rem;min-block-size:1.75rem}:host([scale=s]) textarea{padding-block:0.25rem;padding-inline:0.5rem}:host([scale=s]) textarea,:host([scale=s]) .footer,:host([scale=s]) .character-limit{padding-inline-start:0.5rem;font-size:var(--calcite-font-size--2)}:host([scale=m]) textarea{padding-block:0.5rem;padding-inline:0.75rem}:host([scale=m]) .footer{padding-block:0.5rem;padding-inline:0.75rem;min-block-size:2.25rem}:host([scale=m]) textarea,:host([scale=m]) .footer,:host([scale=m]) .character-limit{padding-inline-start:0.75rem;font-size:var(--calcite-font-size--1)}:host([scale=l]){font-size:var(--calcite-font-size-0)}:host([scale=l]) textarea{padding-block:0.75rem;padding-inline:1rem}:host([scale=l]) .footer{padding-block:0.75rem;padding-inline:1rem;min-block-size:2.75rem}:host([scale=l]) textarea,:host([scale=l]) .footer,:host([scale=l]) .character-limit{padding-inline-start:1rem;font-size:var(--calcite-font-size-0)}:host([status=invalid]) textarea{border-color:var(--calcite-color-status-danger)}:host([status=invalid]) textarea:focus{outline:2px solid var(--calcite-color-status-danger);outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.readonly{background-color:var(--calcite-color-background);font-weight:var(--calcite-font-weight-medium)}:host([disabled]) textarea,:host([disabled]) footer{opacity:0.5}.border--color{border-block-end-width:1px;border-color:var(--calcite-color-border-input)}.border--color:focus{border-block-end-width:2px}textarea.block-size--full{block-size:100%}.content,.hide{display:none}.container{display:flex;inline-size:100%;justify-content:space-between}.footer--end-only{justify-content:flex-end}.assistive-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}.validation-container{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}:host([scale=m]) .validation-container,:host([scale=l]) .validation-container{padding-block-start:0.5rem}:host([scale=s]) .validation-container{padding-block-start:0.25rem}::slotted(input[slot=hidden-form-input]){margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}";const M=class{constructor(s){t(this,s);this.calciteTextAreaInput=e(this,"calciteTextAreaInput",7);this.calciteTextAreaChange=e(this,"calciteTextAreaChange",7);this.guid=S();this.handleInput=t=>{this.value=t.target["value"];this.calciteTextAreaInput.emit()};this.handleChange=()=>{this.calciteTextAreaChange.emit()};this.contentSlotChangeHandler=()=>{if(!this.value){const t=this.el.childNodes;t.forEach((t=>{if(t.nodeName==="#text"){this.value=t.nodeValue.trim()}}))}};this.renderCharacterLimit=()=>{if(this.maxLength){this.localizedCharacterLengthObj=this.getLocalizedCharacterLength();return i("span",{class:O.characterLimit},i("span",{class:{[O.characterOverLimit]:this.isCharacterLimitExceeded()}},this.localizedCharacterLengthObj.currentLength),"/",this.localizedCharacterLengthObj.maxLength)}return null};this.resizeObserver=u("resize",(async()=>{await z(this);const{textAreaHeight:t,textAreaWidth:e,elHeight:i,elWidth:s,footerHeight:a,footerWidth:o}=this.getHeightAndWidthOfElements();if(o>0&&o!==e){this.footerEl.style.width=`${e}px`}if(s!==e||i!==t+(a||0)){this.setHeightAndWidthToAuto()}}));this.setTextAreaEl=t=>{this.textAreaEl=t;this.resizeObserver.observe(t)};this.setHeightAndWidthToAuto=I((()=>{if(this.resize==="vertical"||this.resize==="both"){this.el.style.height="auto"}if(this.resize==="horizontal"||this.resize==="both"){this.el.style.width="auto"}}),E,{leading:false});this.autofocus=false;this.columns=undefined;this.disabled=false;this.form=undefined;this.groupSeparator=false;this.label=undefined;this.minLength=undefined;this.maxLength=undefined;this.messages=undefined;this.validationMessage=undefined;this.validationIcon=undefined;this.name=undefined;this.numberingSystem=undefined;this.placeholder=undefined;this.readOnly=false;this.required=false;this.resize="both";this.rows=undefined;this.scale="m";this.status="idle";this.value="";this.wrap="soft";this.messageOverrides=undefined;this.defaultMessages=undefined;this.endSlotHasElements=undefined;this.startSlotHasElements=undefined;this.effectiveLocale=""}onMessagesChange(){}connectedCallback(){L(this);l(this);o(this);p(this);y(this)}async componentWillLoad(){g(this);await k(this)}componentDidLoad(){x(this)}componentDidRender(){H(this);this.setTextAreaHeight()}disconnectedCallback(){C(this);c(this);r(this);m(this);w(this);this.resizeObserver?.disconnect()}render(){const t=this.startSlotHasElements||this.endSlotHasElements||!!this.maxLength;return i(s,null,i(A,{disabled:this.disabled},i("textarea",{"aria-describedby":this.guid,"aria-invalid":h(this.isCharacterLimitExceeded()),"aria-label":d(this),autofocus:this.autofocus,class:{[O.readOnly]:this.readOnly,[O.textAreaInvalid]:this.isCharacterLimitExceeded(),[O.footerSlotted]:this.endSlotHasElements&&this.startSlotHasElements,[O.blockSizeFull]:!t,[O.borderColor]:!t},cols:this.columns,disabled:this.disabled,name:this.name,onChange:this.handleChange,onInput:this.handleInput,placeholder:this.placeholder,readonly:this.readOnly,required:this.required,rows:this.rows,value:this.value,wrap:this.wrap,ref:this.setTextAreaEl}),i("span",{class:{[O.content]:true}},i("slot",{onSlotchange:this.contentSlotChangeHandler})),i("footer",{class:{[O.footer]:true,[O.readOnly]:this.readOnly,[O.hide]:!t},ref:t=>this.footerEl=t},i("div",{class:{[O.container]:true,[O.footerEndSlotOnly]:!this.startSlotHasElements&&this.endSlotHasElements}},i("slot",{name:T.footerStart,onSlotchange:t=>this.startSlotHasElements=f(t)}),i("slot",{name:T.footerEnd,onSlotchange:t=>this.endSlotHasElements=f(t)})),this.renderCharacterLimit()),i(n,{component:this}),this.isCharacterLimitExceeded()&&i("span",{"aria-hidden":true,"aria-live":"polite",class:O.assistiveText,id:this.guid},this.replacePlaceHoldersInMessages()),this.validationMessage&&this.status==="invalid"?i(W,{icon:this.validationIcon,message:this.validationMessage,scale:this.scale,status:this.status}):null))}async setFocus(){await v(this);this.textAreaEl.focus()}async selectText(){await z(this);this.textAreaEl.select()}effectiveLocaleChange(){j(this,this.effectiveLocale)}onLabelClick(){this.setFocus()}getLocalizedCharacterLength(){const t=this.value?this.value.length.toString():"0";const e=this.maxLength.toString();if(this.numberingSystem==="latn"){return{currentLength:t,maxLength:e}}b.numberFormatOptions={locale:this.effectiveLocale,numberingSystem:this.numberingSystem,signDisplay:"never",useGrouping:this.groupSeparator};return{currentLength:b.localize(t),maxLength:b.localize(e)}}syncHiddenFormInput(t){t.setCustomValidity("");if(this.isCharacterLimitExceeded()){t.setCustomValidity(this.replacePlaceHoldersInMessages())}D("textarea",this,t)}setTextAreaHeight(){const{textAreaHeight:t,elHeight:e,footerHeight:i}=this.getHeightAndWidthOfElements();if(i>0&&t+i!=e){this.textAreaEl.style.height=`${e-i}px`}}getHeightAndWidthOfElements(){const{height:t,width:e}=this.textAreaEl.getBoundingClientRect();const{height:i,width:s}=this.el.getBoundingClientRect();const{height:a,width:o}=this.footerEl?.getBoundingClientRect();return{textAreaHeight:t,textAreaWidth:e,elHeight:i,elWidth:s,footerHeight:a,footerWidth:o}}replacePlaceHoldersInMessages(){return this.messages.tooLong.replace("{maxLength}",this.localizedCharacterLengthObj.maxLength).replace("{currentLength}",this.localizedCharacterLengthObj.currentLength)}isCharacterLimitExceeded(){return this.value?.length>this.maxLength}static get assetsDirs(){return["assets"]}get el(){return a(this)}static get watchers(){return{messageOverrides:["onMessagesChange"],effectiveLocale:["effectiveLocaleChange"]}}};M.style=F;export{M as calcite_text_area};
-//# sourceMappingURL=p-33552bb9.entry.js.map

package/dist/calcite/p-33552bb9.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["CSS","assistiveText","characterLimit","content","container","footer","resizeDisabled","resizeDisabledX","resizeDisabledY","characterOverLimit","readOnly","textAreaInvalid","footerSlotted","borderColor","hide","blockSizeFull","footerEndSlotOnly","SLOTS","footerStart","footerEnd","RESIZE_TIMEOUT","textAreaCss","TextArea","this","guid","handleInput","event","value","target","calciteTextAreaInput","emit","handleChange","calciteTextAreaChange","contentSlotChangeHandler","nodes","el","childNodes","forEach","nodeName","nodeValue","trim","renderCharacterLimit","maxLength","localizedCharacterLengthObj","getLocalizedCharacterLength","h","class","isCharacterLimitExceeded","currentLength","resizeObserver","createObserver","async","componentLoaded","textAreaHeight","textAreaWidth","elHeight","elWidth","footerHeight","footerWidth","getHeightAndWidthOfElements","footerEl","style","width","setHeightAndWidthToAuto","setTextAreaEl","textAreaEl","observe","throttle","resize","height","leading","onMessagesChange","connectedCallback","connectInteractive","connectLabel","connectForm","connectLocalized","connectMessages","componentWillLoad","setUpLoadableComponent","setUpMessages","componentDidLoad","setComponentLoaded","componentDidRender","updateHostInteraction","setTextAreaHeight","disconnectedCallback","disconnectInteractive","disconnectLabel","disconnectForm","disconnectLocalized","disconnectMessages","disconnect","render","hasFooter","startSlotHasElements","endSlotHasElements","Host","InteractiveContainer","disabled","toAriaBoolean","getLabelText","autofocus","cols","columns","name","onChange","onInput","placeholder","readonly","required","rows","wrap","ref","onSlotchange","slotChangeHasAssignedElement","HiddenFormInputSlot","component","id","replacePlaceHoldersInMessages","validationMessage","status","Validation","icon","validationIcon","message","scale","setFocus","componentFocusable","focus","selectText","select","effectiveLocaleChange","updateMessages","effectiveLocale","onLabelClick","length","toString","numberingSystem","numberStringFormatter","numberFormatOptions","locale","signDisplay","useGrouping","groupSeparator","localize","syncHiddenFormInput","input","setCustomValidity","getBoundingClientRect","messages","tooLong","replace"],"sources":["src/components/text-area/resources.ts","src/components/text-area/text-area.scss?tag=calcite-text-area&encapsulation=shadow","src/components/text-area/text-area.tsx"],"sourcesContent":["export const CSS = {\n  assistiveText: \"assistive-text\",\n  characterLimit: \"character-limit\",\n  content: \"content\",\n  container: \"container\",\n  footer: \"footer\",\n  resizeDisabled: \"resize--disabled\",\n  resizeDisabledX: \"resize--disabled-x\",\n  resizeDisabledY: \"resize--disabled-y\",\n  characterOverLimit: \"character--over-limit\",\n  readOnly: \"readonly\",\n  textAreaInvalid: \"text-area--invalid\",\n  footerSlotted: \"footer--slotted\",\n  borderColor: \"border--color\",\n  hide: \"hide\",\n  blockSizeFull: \"block-size--full\",\n  footerEndSlotOnly: \"footer--end-only\",\n};\n\nexport const SLOTS = {\n  footerStart: \"footer-start\",\n  footerEnd: \"footer-end\",\n};\n\nexport const RESIZE_TIMEOUT = 100;\n",":host {\n  @apply inline-block\n  relative\n  w-full\n  h-full;\n}\n\ntextarea {\n  @apply text-color-1\n  relative\n  block\n  bg-foreground-1\n  box-border\n  border-color-input\n  border\n  font-sans\n  w-full\n  m-0;\n  min-inline-size: theme(\"spacing.48\");\n  border-block-end: 1px solid var(--calcite-color-border-3);\n  @media screen and (max-width: 480px) {\n    @apply resize-none;\n  }\n  &:focus {\n    @apply focus-inset;\n  }\n  &.text-area--invalid {\n    @apply border-color-danger\n    border\n    border-solid\n    border-b;\n    &:focus {\n      @apply focus-inset-danger;\n    }\n  }\n  &.footer--slotted {\n    min-inline-size: theme(\"spacing.72\");\n  }\n}\n\n.footer {\n  @apply flex\n  bg-foreground-1\n  box-border\n  border-color-input\n  border\n  border-solid\n  border-t-0\n  items-center;\n}\n\n.character-limit {\n  @apply flex\n  justify-end\n  text-color-2\n  items-center\n  font-normal\n  whitespace-nowrap;\n}\n\n.character--over-limit {\n  @apply font-bold\n  text-danger;\n}\n\n:host([resize=\"none\"]) textarea {\n  @apply resize-none;\n}\n\n:host([resize=\"horizontal\"]) textarea {\n  @apply resize-x;\n}\n\n:host([resize=\"vertical\"]) textarea {\n  @apply resize-y;\n}\n\n:host([scale=\"s\"]) {\n  @apply text-n2;\n  .footer {\n    @apply py-1\n    px-2;\n    min-block-size: 1.75rem;\n  }\n  textarea {\n    @apply py-1\n    px-2;\n  }\n}\n\n:host([scale=\"s\"]) {\n  textarea,\n  .footer,\n  .character-limit {\n    @apply text-n2\n    pl-2;\n  }\n}\n\n:host([scale=\"m\"]) {\n  textarea {\n    @apply py-2\n    px-3;\n  }\n  .footer {\n    @apply py-2\n    px-3;\n    min-block-size: 2.25rem;\n  }\n}\n\n:host([scale=\"m\"]) {\n  textarea,\n  .footer,\n  .character-limit {\n    @apply text-n1\n    pl-3;\n  }\n}\n\n:host([scale=\"l\"]) {\n  @apply text-0;\n  textarea {\n    @apply py-3\n    px-4;\n  }\n  .footer {\n    @apply py-3\n    px-4;\n    min-block-size: 2.75rem;\n  }\n}\n\n:host([scale=\"l\"]) {\n  textarea,\n  .footer,\n  .character-limit {\n    @apply text-0\n    pl-4;\n  }\n}\n\n:host([status=\"invalid\"]) {\n  textarea {\n    @apply border-color-danger;\n  }\n  textarea:focus {\n    @apply focus-inset-danger;\n  }\n}\n\n.readonly {\n  @apply bg-background font-medium;\n}\n\n:host([disabled]) {\n  textarea,\n  footer {\n    @apply opacity-50;\n  }\n}\n\n.border--color {\n  @apply border-b border-color-input;\n  &:focus {\n    @apply border-b-2;\n  }\n}\n\ntextarea.block-size--full {\n  @apply h-full;\n}\n\n.content,\n.hide {\n  @apply hidden;\n}\n\n.container {\n  @apply flex\n  justify-between\n  w-full;\n}\n\n.footer--end-only {\n  @apply justify-end;\n}\n\n.assistive-text {\n  @apply sr-only;\n}\n\n@include form-validation-message();\n@include hidden-form-input();\n@include disabled();\n@include base-component();\n","import {\n  Component,\n  h,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  VNode,\n  Watch,\n  Method,\n  Host,\n  State,\n} from \"@stencil/core\";\nimport { connectForm, disconnectForm, FormComponent, HiddenFormInputSlot } from \"../../utils/form\";\nimport { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from \"../../utils/label\";\nimport { slotChangeHasAssignedElement, toAriaBoolean } from \"../../utils/dom\";\nimport { CSS, SLOTS, RESIZE_TIMEOUT } from \"./resources\";\nimport {\n  connectLocalized,\n  disconnectLocalized,\n  LocalizedComponent,\n  NumberingSystem,\n  numberStringFormatter,\n} from \"../../utils/locale\";\nimport { createObserver } from \"../../utils/observers\";\nimport {\n  componentFocusable,\n  componentLoaded,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { TextAreaMessages } from \"./assets/text-area/t9n\";\nimport { throttle } from \"lodash-es\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { CharacterLengthObj } from \"./interfaces\";\nimport { guid } from \"../../utils/guid\";\nimport { Status } from \"../interfaces\";\nimport { Validation } from \"../functional/Validation\";\nimport { syncHiddenFormInput, TextualInputComponent } from \"../input/common/input\";\n\n/**\n * @slot - A slot for adding text.\n * @slot footer-start - A slot for adding content to the start of the component's footer.\n * @slot footer-end - A slot for adding content to the end of the component's footer.\n */\n\n@Component({\n  tag: \"calcite-text-area\",\n  styleUrl: \"text-area.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class TextArea\n  implements\n    FormComponent,\n    LabelableComponent,\n    LocalizedComponent,\n    LoadableComponent,\n    T9nComponent,\n    InteractiveComponent,\n    Omit<TextualInputComponent, \"pattern\">\n{\n  //--------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * When `true`, the component is focused on page load. Only one element can contain `autofocus`. If multiple elements have `autofocus`, the first element will receive focus.\n   *\n   * @mdn [autofocus](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)\n   */\n  @Prop({ reflect: true }) autofocus = false;\n\n  /**\n   * Specifies the component's number of columns.\n   *\n   * @mdn [cols](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-cols)\n   */\n  @Prop({ reflect: true }) columns: number;\n\n  /**\n   * When `true`, interaction is prevented and the component is displayed with lower opacity.\n   *\n   * @mdn [disabled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled)\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * The `id` of the form that will be associated with the component.\n   *\n   * When not set, the component will be associated with its ancestor form element, if any.\n   */\n  @Prop({ reflect: true })\n  form: string;\n\n  /**\n   * When `true`, number values are displayed with a group separator corresponding to the language and country format.\n   */\n  @Prop({ reflect: true }) groupSeparator = false;\n\n  /**\n   * Accessible name for the component.\n   */\n  @Prop() label: string;\n\n  /**\n   * Specifies the minimum number of characters allowed.\n   *\n   * @mdn [minlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-minlength)\n   */\n  @Prop({ reflect: true }) minLength: number;\n\n  /**\n   * Specifies the maximum number of characters allowed.\n   *\n   * @mdn [maxlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-maxlength)\n   */\n  @Prop({ reflect: true }) maxLength: number;\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: TextAreaMessages;\n\n  /** Specifies the validation message to display under the component. */\n  @Prop() validationMessage: string;\n\n  /** Specifies the validation icon to display under the component. */\n  @Prop({ reflect: true }) validationIcon: string | boolean;\n\n  /**\n   * Specifies the name of the component.\n   *\n   * @mdn [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-name)\n   */\n  @Prop({ reflect: true }) name: string;\n\n  /**\n   * Specifies the Unicode numeral system used by the component for localization.\n   */\n  @Prop() numberingSystem: NumberingSystem;\n\n  /**\n   * Specifies the placeholder text for the component.\n   *\n   * @mdn [placeholder](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-placeholder)\n   */\n  @Prop() placeholder: string;\n\n  /**\n   * When `true`, the component's `value` can be read, but cannot be modified.\n   *\n   * @readonly\n   * @mdn [readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)\n   */\n  @Prop({ reflect: true }) readOnly = false;\n\n  /**\n   * When `true`, the component must have a value in order for the form to submit.\n   *\n   * @mdn [required]https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/required\n   */\n  @Prop({ reflect: true }) required = false;\n\n  /** Specifies if the component is resizable. */\n  @Prop({ reflect: true }) resize: \"both\" | \"horizontal\" | \"vertical\" | \"none\" = \"both\";\n\n  /**\n   * Specifies the component's number of rows.\n   *\n   * @mdn [rows](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-rows)\n   */\n  @Prop({ reflect: true }) rows: number;\n\n  /** Specifies the size of the component. */\n  @Prop({ reflect: true }) scale: \"l\" | \"m\" | \"s\" = \"m\";\n\n  /** Specifies the status of the input field, which determines message and icons. */\n  @Prop({ reflect: true }) status: Status = \"idle\";\n\n  /** The component's value. */\n  @Prop({ mutable: true }) value = \"\";\n\n  /**\n   * Specifies the wrapping mechanism for the text.\n   *\n   * @mdn [wrap](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-wrap)\n   */\n  @Prop({ reflect: true }) wrap: \"soft\" | \"hard\" = \"soft\";\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<TextAreaMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Event Emitters\n  //\n  //--------------------------------------------------------------------------\n  /**\n   * Fires each time a new `value` is typed.\n   */\n  @Event() calciteTextAreaInput: EventEmitter<void>;\n\n  /**\n   * Fires each time a new `value` is typed and committed.\n   */\n  @Event() calciteTextAreaChange: EventEmitter<void>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectInteractive(this);\n    connectLabel(this);\n    connectForm(this);\n    connectLocalized(this);\n    connectMessages(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    this.setTextAreaHeight();\n  }\n\n  disconnectedCallback(): void {\n    disconnectInteractive(this);\n    disconnectLabel(this);\n    disconnectForm(this);\n    disconnectLocalized(this);\n    disconnectMessages(this);\n    this.resizeObserver?.disconnect();\n  }\n\n  render(): VNode {\n    const hasFooter = this.startSlotHasElements || this.endSlotHasElements || !!this.maxLength;\n    return (\n      <Host>\n        <InteractiveContainer disabled={this.disabled}>\n          <textarea\n            aria-describedby={this.guid}\n            aria-invalid={toAriaBoolean(this.isCharacterLimitExceeded())}\n            aria-label={getLabelText(this)}\n            autofocus={this.autofocus}\n            class={{\n              [CSS.readOnly]: this.readOnly,\n              [CSS.textAreaInvalid]: this.isCharacterLimitExceeded(),\n              [CSS.footerSlotted]: this.endSlotHasElements && this.startSlotHasElements,\n              [CSS.blockSizeFull]: !hasFooter,\n              [CSS.borderColor]: !hasFooter,\n            }}\n            cols={this.columns}\n            disabled={this.disabled}\n            name={this.name}\n            onChange={this.handleChange}\n            onInput={this.handleInput}\n            placeholder={this.placeholder}\n            readonly={this.readOnly}\n            required={this.required}\n            rows={this.rows}\n            value={this.value}\n            wrap={this.wrap}\n            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)\n            ref={this.setTextAreaEl}\n          />\n          <span class={{ [CSS.content]: true }}>\n            <slot onSlotchange={this.contentSlotChangeHandler} />\n          </span>\n          <footer\n            class={{\n              [CSS.footer]: true,\n              [CSS.readOnly]: this.readOnly,\n              [CSS.hide]: !hasFooter,\n            }}\n            ref={(el) => (this.footerEl = el as HTMLElement)}\n          >\n            <div\n              class={{\n                [CSS.container]: true,\n                [CSS.footerEndSlotOnly]: !this.startSlotHasElements && this.endSlotHasElements,\n              }}\n            >\n              <slot\n                name={SLOTS.footerStart}\n                onSlotchange={(event) =>\n                  (this.startSlotHasElements = slotChangeHasAssignedElement(event))\n                }\n              />\n              <slot\n                name={SLOTS.footerEnd}\n                onSlotchange={(event) =>\n                  (this.endSlotHasElements = slotChangeHasAssignedElement(event))\n                }\n              />\n            </div>\n            {this.renderCharacterLimit()}\n          </footer>\n          <HiddenFormInputSlot component={this} />\n          {this.isCharacterLimitExceeded() && (\n            <span aria-hidden={true} aria-live=\"polite\" class={CSS.assistiveText} id={this.guid}>\n              {this.replacePlaceHoldersInMessages()}\n            </span>\n          )}\n          {this.validationMessage && this.status === \"invalid\" ? (\n            <Validation\n              icon={this.validationIcon}\n              message={this.validationMessage}\n              scale={this.scale}\n              status={this.status}\n            />\n          ) : null}\n        </InteractiveContainer>\n      </Host>\n    );\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /** Sets focus on the component. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n    this.textAreaEl.focus();\n  }\n\n  /** Selects the text of the component's `value`. */\n  @Method()\n  async selectText(): Promise<void> {\n    await componentLoaded(this);\n    this.textAreaEl.select();\n  }\n  //--------------------------------------------------------------------------\n  //\n  //  Private Properties/ State\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteTextAreaElement;\n\n  defaultValue: TextArea[\"value\"];\n\n  footerEl: HTMLElement;\n\n  formEl: HTMLFormElement;\n\n  labelEl: HTMLCalciteLabelElement;\n\n  textAreaEl: HTMLTextAreaElement;\n\n  @State() defaultMessages: TextAreaMessages;\n\n  @State() endSlotHasElements: boolean;\n\n  @State() startSlotHasElements: boolean;\n\n  @State() effectiveLocale = \"\";\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  private guid = guid();\n\n  private localizedCharacterLengthObj: CharacterLengthObj;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  onLabelClick(): void {\n    this.setFocus();\n  }\n\n  handleInput = (event: InputEvent): void => {\n    this.value = event.target[\"value\"];\n    this.calciteTextAreaInput.emit();\n  };\n\n  handleChange = (): void => {\n    this.calciteTextAreaChange.emit();\n  };\n\n  contentSlotChangeHandler = (): void => {\n    if (!this.value) {\n      const nodes = this.el.childNodes;\n      nodes.forEach((el) => {\n        if (el.nodeName === \"#text\") {\n          this.value = el.nodeValue.trim();\n        }\n      });\n    }\n  };\n\n  renderCharacterLimit = (): VNode | null => {\n    if (this.maxLength) {\n      this.localizedCharacterLengthObj = this.getLocalizedCharacterLength();\n      return (\n        <span class={CSS.characterLimit}>\n          <span class={{ [CSS.characterOverLimit]: this.isCharacterLimitExceeded() }}>\n            {this.localizedCharacterLengthObj.currentLength}\n          </span>\n          {\"/\"}\n          {this.localizedCharacterLengthObj.maxLength}\n        </span>\n      );\n    }\n    return null;\n  };\n\n  getLocalizedCharacterLength(): CharacterLengthObj {\n    const currentLength = this.value ? this.value.length.toString() : \"0\";\n    const maxLength = this.maxLength.toString();\n    if (this.numberingSystem === \"latn\") {\n      return { currentLength, maxLength };\n    }\n\n    numberStringFormatter.numberFormatOptions = {\n      locale: this.effectiveLocale,\n      numberingSystem: this.numberingSystem,\n      signDisplay: \"never\",\n      useGrouping: this.groupSeparator,\n    };\n    return {\n      currentLength: numberStringFormatter.localize(currentLength),\n      maxLength: numberStringFormatter.localize(maxLength),\n    };\n  }\n\n  resizeObserver = createObserver(\"resize\", async () => {\n    await componentLoaded(this);\n    const { textAreaHeight, textAreaWidth, elHeight, elWidth, footerHeight, footerWidth } =\n      this.getHeightAndWidthOfElements();\n    if (footerWidth > 0 && footerWidth !== textAreaWidth) {\n      this.footerEl.style.width = `${textAreaWidth}px`;\n    }\n    if (elWidth !== textAreaWidth || elHeight !== textAreaHeight + (footerHeight || 0)) {\n      this.setHeightAndWidthToAuto();\n    }\n  });\n\n  syncHiddenFormInput(input: HTMLInputElement): void {\n    input.setCustomValidity(\"\");\n    if (this.isCharacterLimitExceeded()) {\n      input.setCustomValidity(this.replacePlaceHoldersInMessages());\n    }\n\n    syncHiddenFormInput(\"textarea\", this, input);\n  }\n\n  setTextAreaEl = (el: HTMLTextAreaElement): void => {\n    this.textAreaEl = el;\n    this.resizeObserver.observe(el);\n  };\n\n  setTextAreaHeight(): void {\n    const { textAreaHeight, elHeight, footerHeight } = this.getHeightAndWidthOfElements();\n    if (footerHeight > 0 && textAreaHeight + footerHeight != elHeight) {\n      this.textAreaEl.style.height = `${elHeight - footerHeight}px`;\n    }\n  }\n\n  getHeightAndWidthOfElements(): {\n    textAreaHeight: number;\n    textAreaWidth: number;\n    elHeight: number;\n    elWidth: number;\n    footerHeight: number;\n    footerWidth: number;\n  } {\n    const { height: textAreaHeight, width: textAreaWidth } =\n      this.textAreaEl.getBoundingClientRect();\n    const { height: elHeight, width: elWidth } = this.el.getBoundingClientRect();\n    const { height: footerHeight, width: footerWidth } = this.footerEl?.getBoundingClientRect();\n\n    return {\n      textAreaHeight,\n      textAreaWidth,\n      elHeight,\n      elWidth,\n      footerHeight,\n      footerWidth,\n    };\n  }\n\n  private replacePlaceHoldersInMessages(): string {\n    return this.messages.tooLong\n      .replace(\"{maxLength}\", this.localizedCharacterLengthObj.maxLength)\n      .replace(\"{currentLength}\", this.localizedCharacterLengthObj.currentLength);\n  }\n\n  // height and width are set to auto here to avoid overlapping on to neighboring elements in the layout when user starts resizing.\n  // throttle is used to avoid flashing of textarea when user resizes.\n  private setHeightAndWidthToAuto = throttle(\n    (): void => {\n      if (this.resize === \"vertical\" || this.resize === \"both\") {\n        this.el.style.height = \"auto\";\n      }\n      if (this.resize === \"horizontal\" || this.resize === \"both\") {\n        this.el.style.width = \"auto\";\n      }\n    },\n    RESIZE_TIMEOUT,\n    { leading: false },\n  );\n\n  private isCharacterLimitExceeded(): boolean {\n    return this.value?.length > this.maxLength;\n  }\n}\n"],"mappings":"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"}

package/dist/calcite/p-33c74a44.entry.js

@@ -1,7 +0,0 @@
-/*!
- * 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.6.0-next.1
- */
-import{r as e,f as t,h as i,H as n,g as o,c as s,F as r}from"./p-e538ca60.js";import{s as a,l as c,d as l,g as h}from"./p-49af9f12.js";import{s as d,a as u,c as f}from"./p-2d2e0315.js";import{c as m,d as p}from"./p-9bb36dfb.js";import{u as v,c as b,s as g,d as y}from"./p-f6cdf87d.js";import{C as x}from"./p-0a3f1f3c.js";import"./p-57cde6a5.js";import"./p-2eb03310.js";import"./p-1f3a1793.js";const w=":host{display:flex}ul{margin:0px;display:inline-flex;block-size:100%;align-items:center;padding:0px}:host([layout=vertical]) ul{display:flex;inline-size:100%;flex-direction:column}:host([hidden]){display:none}[hidden]{display:none}";const k=class{constructor(t){e(this,t);this.menuItems=[];this.handleMenuSlotChange=e=>{this.menuItems=a(e);this.setMenuItemLayout(this.menuItems,this.layout)};this.label=undefined;this.layout="horizontal";this.messageOverrides=undefined;this.messages=undefined;this.defaultMessages=undefined;this.effectiveLocale=""}handleGlobalAttributesChanged(){t(this);this.setMenuItemLayout(this.menuItems,this.layout)}handleLayoutChange(e){this.setMenuItemLayout(this.menuItems,e)}onMessagesChange(){}effectiveLocaleChange(){v(this,this.effectiveLocale)}connectedCallback(){m(this);b(this)}async componentWillLoad(){d(this);await g(this)}componentDidLoad(){u(this)}disconnectedCallback(){p(this);y(this)}async setFocus(){await f(this);this.el.focus()}calciteInternalNavMenuItemKeyEvent(e){const t=e.target;const i=e.detail.children;const n=e.detail.event.key;e.stopPropagation();if(n==="ArrowDown"){if(t.layout==="vertical"){c(this.menuItems,t,"next",false)}else{if(e.detail.isSubmenuOpen){i[0].setFocus()}}}else if(n==="ArrowUp"){if(this.layout==="vertical"){c(this.menuItems,t,"previous",false)}else{if(e.detail.isSubmenuOpen){i[i.length-1].setFocus()}}}else if(n==="ArrowRight"){if(this.layout==="horizontal"){c(this.menuItems,t,"next",false)}else{if(e.detail.isSubmenuOpen){i[0].setFocus()}}}else if(n==="ArrowLeft"){if(this.layout==="horizontal"){c(this.menuItems,t,"previous",false)}else{if(e.detail.isSubmenuOpen){this.focusParentElement(e.target)}}}else if(n==="Escape"){this.focusParentElement(e.target)}e.preventDefault()}focusParentElement(e){const t=e.parentElement;if(t){l(t);t.open=false}}setMenuItemLayout(e,t){e.forEach((e=>{e.layout=t;if(this.getEffectiveRole()==="menubar"){e.isTopLevelItem=true;e.topLevelMenuLayout=this.layout}}))}getEffectiveRole(){return this.el.getAttribute("role")||"menubar"}render(){return i(n,null,i("ul",{"aria-label":this.label,role:this.getEffectiveRole()},i("slot",{onSlotchange:this.handleMenuSlotChange})))}static get delegatesFocus(){return true}static get assetsDirs(){return["assets"]}get el(){return o(this)}static get watchers(){return{role:["handleGlobalAttributesChanged"],layout:["handleLayoutChange"],messageOverrides:["onMessagesChange"],effectiveLocale:["effectiveLocaleChange"]}}};k.style=w;const z={container:"container",content:"content",dropdownVertical:"dropdown--vertical",dropdownMenuItems:"dropdown-menu-items",dropdownAction:"dropdown-action",layoutVertical:"layout--vertical",hoverHrefIcon:"hover-href-icon",icon:"icon",iconBreadcrumb:"icon--breadcrumb",iconDropdown:"icon--dropdown",iconEnd:"icon--end",iconStart:"icon--start",isParentVertical:"parent--vertical",itemContent:"item-content",open:"open",nested:"nested",textContainer:"text-container"};const C=':host{position:relative;box-sizing:border-box;display:flex;align-items:center;flex-shrink:0}:host .container,:host .item-content,:host .content{min-block-size:3rem}:host([layout=vertical]){inline-size:100%}:host(:not([layout=vertical])){block-size:100%}.container,.item-content{display:flex;block-size:100%;inline-size:100%;flex-direction:row;align-items:stretch}.content{position:relative;box-sizing:border-box;display:flex;block-size:100%;inline-size:100%;cursor:pointer;align-items:center;justify-content:center;background-color:var(--calcite-color-foreground-1);padding-inline:1rem;font-size:var(--calcite-font-size-0);color:var(--calcite-color-text-2);outline:2px solid transparent;outline-offset:2px;text-decoration:none;border-block-end:0.125rem solid transparent;padding-block-start:0.125rem}.content:hover{background-color:var(--calcite-color-foreground-2);color:var(--calcite-color-text-2)}.content:focus{background-color:var(--calcite-color-foreground-2);color:var(--calcite-color-text-2);outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand-hover, var(--calcite--color-brand)));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.content:active{background-color:var(--calcite-color-foreground-3);color:var(--calcite-color-text-1)}.content span{display:inline-flex}.content.layout--vertical{display:flex;inline-size:100%;justify-content:flex-start;padding-block:1rem;border-block-end:0;border-inline-end:0.25rem solid transparent}:host([active]) .content{color:var(--calcite-color-text-1);border-color:var(--calcite-color-brand)}:host([active]) .content .icon{--calcite-ui-icon-color:var(--calcite-color-brand)}:host([layout=vertical]) .content{padding-inline:0.75rem}.icon--start{margin-inline-end:0.75rem}.icon--end{margin-inline-start:0.75rem}:host([layout=vertical]) .icon--end{margin-inline-start:auto;padding-inline-start:0.75rem}.icon--dropdown{position:relative;margin-inline-start:auto;margin-inline-end:0px;padding-inline-start:0.5rem;--calcite-ui-icon-color:var(--calcite-color-text-3)}:host([layout=vertical]) .icon--end~.icon--dropdown{margin-inline-start:0.75rem}:host([layout=vertical]) .hover-href-icon{padding-inline-start:0.5rem}:host([layout=vertical]) .hover-href-icon~.icon--end{margin-inline-start:0.5rem}:host([layout=vertical]) .hover-href-icon~.icon--breadcrumb{margin-inline-start:0.75rem}.icon--breadcrumb{margin-inline-end:0px;padding-inline-start:0.5rem;--calcite-ui-icon-color:var(--calcite-color-text-3)}:host([layout=vertical]) .icon--breadcrumb{margin-inline-start:auto}:host([layout=vertical]) .icon--breadcrumb~.icon--dropdown{margin-inline-start:0.5rem}:host([layout=vertical]) .icon--end~.icon--breadcrumb{margin-inline-start:0.5rem}:host([breadcrumb]) .content{padding-inline-end:0.75rem}calcite-action{position:relative;block-size:auto;border-inline-start:1px solid var(--calcite-color-foreground-1)}calcite-action:after{position:absolute;inset-inline-start:-1px;display:block;inline-size:1px;content:"";inset-block:0.75rem;background-color:var(--calcite-color-border-3)}calcite-action:hover:after{block-size:100%;inset-block:0}.content:focus~calcite-action,.content:hover~calcite-action{color:var(--calcite-color-text-1);border-inline-start:1px solid var(--calcite-color-border-3)}.container:hover .dropdown-action{background-color:var(--calcite-color-foreground-2)}.dropdown-menu-items{position:absolute;display:none;block-size:auto;min-inline-size:100%;flex-direction:column;overflow:visible;border:1px solid var(--calcite-color-border-3);background:var(--calcite-color-foreground-1);inset-block-start:100%;z-index:var(--calcite-z-index-dropdown)}.dropdown-menu-items.open{display:block}.dropdown-menu-items.nested{position:absolute;inset-block-start:-1px;transform:translateX(calc(100% - 2px))}.parent--vertical{flex-direction:column}.dropdown--vertical.dropdown-menu-items{position:relative;border-radius:0px;box-shadow:none;inset-block-start:0;transform:none}.dropdown--vertical.dropdown-menu-items:last-of-type{border-inline:0}:host([layout=vertical]:last-of-type) .dropdown-menu-items{border-block-end:0}:host([slot=submenu-item]) .parent--vertical{padding-inline-start:1.5rem}.dropdown-menu-items.nested.calcite--rtl{transform:translateX(calc(-100% + 2px))}.dropdown--vertical.dropdown-menu-items.nested.calcite--rtl{transform:none}.hover-href-icon{position:relative;inset-inline-end:0.25rem;margin-inline-start:auto;opacity:0;transition:all var(--calcite-internal-animation-timing-medium) ease-in-out}.content:focus .hover-href-icon,.content:hover .hover-href-icon{inset-inline-end:-0.25rem;opacity:1}:host([hidden]){display:none}[hidden]{display:none}';const I=class{constructor(t){e(this,t);this.calciteInternalMenuItemKeyEvent=s(this,"calciteInternalMenuItemKeyEvent",7);this.calciteMenuItemSelect=s(this,"calciteMenuItemSelect",7);this.clickHandler=e=>{if(this.href&&e.target===this.dropdownActionEl||!this.href&&this.hasSubmenu){this.open=!this.open}this.selectMenuItem(e)};this.handleMenuItemSlotChange=e=>{this.submenuItems=a(e);this.submenuItems.forEach((e=>{if(!e.topLevelMenuLayout){e.topLevelMenuLayout=this.topLevelMenuLayout}}));this.hasSubmenu=this.submenuItems.length>0};this.keyDownHandler=async e=>{const{hasSubmenu:t,href:i,layout:n,open:o,submenuItems:s}=this;const r=e.key;const a=e.target===this.dropdownActionEl;if(r===" "||r==="Enter"){if(t&&(!i||i&&a)){this.open=!o}if(!(i&&a)&&r!=="Enter"){this.selectMenuItem(e)}if(r===" "||i&&a){e.preventDefault()}}else if(r==="Escape"){if(o){this.open=false;return}this.calciteInternalMenuItemKeyEvent.emit({event:e});e.preventDefault()}else if(r==="ArrowDown"||r==="ArrowUp"){e.preventDefault();if((a||!i)&&t&&!o&&n==="horizontal"){this.open=true;return}this.calciteInternalMenuItemKeyEvent.emit({event:e,children:s,isSubmenuOpen:o&&t})}else if(r==="ArrowLeft"){e.preventDefault();this.calciteInternalMenuItemKeyEvent.emit({event:e,children:s,isSubmenuOpen:true})}else if(r==="ArrowRight"){e.preventDefault();if((a||!i)&&t&&!o&&n==="vertical"){this.open=true;return}this.calciteInternalMenuItemKeyEvent.emit({event:e,children:s,isSubmenuOpen:o&&t})}};this.active=undefined;this.breadcrumb=undefined;this.href=undefined;this.iconEnd=undefined;this.iconFlipRtl=undefined;this.iconStart=undefined;this.isTopLevelItem=false;this.label=undefined;this.layout=undefined;this.messageOverrides=undefined;this.messages=undefined;this.open=false;this.rel=undefined;this.target=undefined;this.text=undefined;this.topLevelMenuLayout=undefined;this.defaultMessages=undefined;this.effectiveLocale="";this.hasSubmenu=false;this.submenuItems=undefined}onMessagesChange(){}effectiveLocaleChange(){v(this,this.effectiveLocale)}async setFocus(){await f(this);this.anchorEl.focus()}handleClickOut(e){if(this.topLevelMenuLayout!=="vertical"&&this.hasSubmenu&&this.open&&!e.composedPath().includes(this.el)){this.open=false}}handleFocusOut(e){if(this.topLevelMenuLayout!=="vertical"&&!this.el.contains(e.relatedTarget)){this.open=false}}connectedCallback(){m(this);b(this)}async componentWillLoad(){d(this);await g(this)}componentDidLoad(){u(this)}disconnectedCallback(){p(this);y(this)}blurHandler(){this.isFocused=false}focusHandler(e){const t=e.target;this.isFocused=true;if(t.open&&!this.open){t.open=false}}selectMenuItem(e){if(e.target!==this.dropdownActionEl){this.calciteMenuItemSelect.emit()}}renderIconStart(){return i("calcite-icon",{class:`${z.icon} ${z.iconStart}`,flipRtl:this.iconFlipRtl==="start"||this.iconFlipRtl==="both",icon:this.iconStart,key:z.iconStart,scale:"s"})}renderIconEnd(){return i("calcite-icon",{class:`${z.icon} ${z.iconEnd}`,flipRtl:this.iconFlipRtl==="end"||this.iconFlipRtl==="both",icon:this.iconEnd,key:z.iconEnd,scale:"s"})}renderBreadcrumbIcon(e){return i("calcite-icon",{class:`${z.icon} ${z.iconBreadcrumb}`,icon:e==="rtl"?"chevron-left":"chevron-right",key:z.iconBreadcrumb,scale:"s"})}renderDropdownIcon(e){const t=e==="rtl"?"chevron-left":"chevron-right";return i("calcite-icon",{class:`${z.icon} ${z.iconDropdown}`,icon:this.topLevelMenuLayout==="vertical"||this.isTopLevelItem?this.open?"chevron-up":"chevron-down":t,key:z.iconDropdown,scale:"s"})}renderDropdownAction(e){const t=e==="rtl"?"chevron-left":"chevron-right";return i("calcite-action",{class:z.dropdownAction,icon:this.topLevelMenuLayout==="vertical"||this.isTopLevelItem?this.open?"chevron-up":"chevron-down":t,key:z.dropdownAction,onClick:this.clickHandler,onKeyDown:this.keyDownHandler,text:this.messages.open,ref:e=>this.dropdownActionEl=e})}renderSubmenuItems(e){return i("calcite-menu",{class:{[z.dropdownMenuItems]:true,[z.open]:this.open,[z.nested]:!this.isTopLevelItem,[x.rtl]:e==="rtl",[z.dropdownVertical]:this.topLevelMenuLayout==="vertical"},label:this.messages.submenu,layout:"vertical",role:"menu"},i("slot",{name:"submenu-item",onSlotchange:this.handleMenuItemSlotChange}))}renderHrefIcon(e){return i("calcite-icon",{class:z.hoverHrefIcon,icon:e==="rtl"?"arrow-left":"arrow-right",key:z.hoverHrefIcon,scale:"s"})}renderItemContent(e){const t=this.href&&(this.topLevelMenuLayout==="vertical"||!this.isTopLevelItem);return i(r,null,this.iconStart&&this.renderIconStart(),i("div",{class:z.textContainer},i("span",null,this.text)),t&&this.renderHrefIcon(e),this.iconEnd&&this.renderIconEnd(),this.breadcrumb?this.renderBreadcrumbIcon(e):null,!this.href&&this.hasSubmenu?this.renderDropdownIcon(e):null)}render(){const e=h(this.el);return i(n,{onBlur:this.blurHandler,onFocus:this.focusHandler},i("li",{class:{[z.container]:true,[z.isParentVertical]:this.topLevelMenuLayout==="vertical"},role:"none"},i("div",{class:z.itemContent},i("a",{"aria-current":this.isFocused?"page":false,"aria-expanded":this.open,"aria-haspopup":this.hasSubmenu,"aria-label":this.label,class:{[z.layoutVertical]:this.layout==="vertical",[z.content]:true},href:this.href,onClick:this.clickHandler,onKeyDown:this.keyDownHandler,rel:this.rel,role:"menuitem",tabIndex:this.isTopLevelItem?0:-1,target:this.target,ref:e=>this.anchorEl=e},this.renderItemContent(e)),this.href&&this.hasSubmenu?this.renderDropdownAction(e):null),this.renderSubmenuItems(e)))}static get assetsDirs(){return["assets"]}get el(){return o(this)}static get watchers(){return{messageOverrides:["onMessagesChange"],effectiveLocale:["effectiveLocaleChange"]}}};I.style=C;export{k as calcite_menu,I as calcite_menu_item};
-//# sourceMappingURL=p-33c74a44.entry.js.map

package/dist/calcite/p-33c74a44.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["menuCss","CalciteMenu","this","menuItems","handleMenuSlotChange","event","slotChangeGetAssignedElements","setMenuItemLayout","layout","handleGlobalAttributesChanged","forceUpdate","handleLayoutChange","value","onMessagesChange","effectiveLocaleChange","updateMessages","effectiveLocale","connectedCallback","connectLocalized","connectMessages","componentWillLoad","setUpLoadableComponent","setUpMessages","componentDidLoad","setComponentLoaded","disconnectedCallback","disconnectLocalized","disconnectMessages","setFocus","componentFocusable","el","focus","calciteInternalNavMenuItemKeyEvent","target","submenuItems","detail","children","key","stopPropagation","focusElementInGroup","isSubmenuOpen","length","focusParentElement","preventDefault","parentEl","parentElement","focusElement","open","items","forEach","item","getEffectiveRole","isTopLevelItem","topLevelMenuLayout","getAttribute","render","h","Host","label","role","onSlotchange","CSS","container","content","dropdownVertical","dropdownMenuItems","dropdownAction","layoutVertical","hoverHrefIcon","icon","iconBreadcrumb","iconDropdown","iconEnd","iconStart","isParentVertical","itemContent","nested","textContainer","menuItemCss","CalciteMenuItem","clickHandler","href","dropdownActionEl","hasSubmenu","selectMenuItem","handleMenuItemSlotChange","keyDownHandler","async","targetIsDropdown","calciteInternalMenuItemKeyEvent","emit","anchorEl","handleClickOut","composedPath","includes","handleFocusOut","contains","relatedTarget","blurHandler","isFocused","focusHandler","calciteMenuItemSelect","renderIconStart","class","flipRtl","iconFlipRtl","scale","renderIconEnd","renderBreadcrumbIcon","dir","renderDropdownIcon","dirChevron","renderDropdownAction","onClick","onKeyDown","text","messages","ref","renderSubmenuItems","CSS_UTILITY","rtl","submenu","name","renderHrefIcon","renderItemContent","hasHref","Fragment","breadcrumb","getElementDir","onBlur","onFocus","rel","tabIndex"],"sources":["src/components/menu/menu.scss?tag=calcite-menu&encapsulation=shadow","src/components/menu/menu.tsx","src/components/menu-item/resources.ts","src/components/menu-item/menu-item.scss?tag=calcite-menu-item&encapsulation=shadow","src/components/menu-item/menu-item.tsx"],"sourcesContent":[":host {\n  @apply flex;\n}\n\nul {\n  @apply inline-flex items-center h-full m-0 p-0;\n}\n\n:host([layout=\"vertical\"]) ul {\n  @apply flex flex-col w-full;\n}\n\n@include base-component();\n","import {\n  Component,\n  Element,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n  Watch,\n  Method,\n  VNode,\n  forceUpdate,\n} from \"@stencil/core\";\nimport { focusElement, focusElementInGroup, slotChangeGetAssignedElements } from \"../../utils/dom\";\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 { MenuMessages } from \"./assets/menu/t9n\";\n\ntype Layout = \"horizontal\" | \"vertical\";\n\n@Component({\n  tag: \"calcite-menu\",\n  styleUrl: \"menu.scss\",\n  shadow: {\n    delegatesFocus: true,\n  },\n  assetsDirs: [\"assets\"],\n})\nexport class CalciteMenu implements LocalizedComponent, T9nComponent, LoadableComponent {\n  //--------------------------------------------------------------------------\n  //\n  //  Global attributes\n  //\n  //--------------------------------------------------------------------------\n\n  @Watch(\"role\")\n  handleGlobalAttributesChanged(): void {\n    forceUpdate(this);\n    this.setMenuItemLayout(this.menuItems, this.layout);\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Accessible name for the component.\n   */\n  @Prop() label!: string;\n\n  /**\n   * Specifies the layout of the component.\n   */\n  @Prop({ reflect: true }) layout: Layout = \"horizontal\";\n\n  @Watch(\"layout\")\n  handleLayoutChange(value: Layout): void {\n    this.setMenuItemLayout(this.menuItems, value);\n  }\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<MenuMessages>;\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: MenuMessages;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private State/Props\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteMenuElement;\n\n  @State() defaultMessages: MenuMessages;\n\n  @State() effectiveLocale = \"\";\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  menuItems: HTMLCalciteMenuItemElement[] = [];\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectLocalized(this);\n    connectMessages(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  disconnectedCallback(): void {\n    disconnectLocalized(this);\n    disconnectMessages(this);\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /** Sets focus on the component's first focusable element. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n    this.el.focus();\n  }\n  //--------------------------------------------------------------------------\n  //\n  //  Event Listeners\n  //\n  //--------------------------------------------------------------------------\n\n  @Listen(\"calciteInternalMenuItemKeyEvent\")\n  calciteInternalNavMenuItemKeyEvent(event: CustomEvent): void {\n    const target = event.target as HTMLCalciteMenuItemElement;\n    const submenuItems = event.detail.children;\n    const key = event.detail.event.key;\n    event.stopPropagation();\n\n    if (key === \"ArrowDown\") {\n      if (target.layout === \"vertical\") {\n        focusElementInGroup(this.menuItems, target, \"next\", false);\n      } else {\n        if (event.detail.isSubmenuOpen) {\n          submenuItems[0].setFocus();\n        }\n      }\n    } else if (key === \"ArrowUp\") {\n      if (this.layout === \"vertical\") {\n        focusElementInGroup(this.menuItems, target, \"previous\", false);\n      } else {\n        if (event.detail.isSubmenuOpen) {\n          submenuItems[submenuItems.length - 1].setFocus();\n        }\n      }\n    } else if (key === \"ArrowRight\") {\n      if (this.layout === \"horizontal\") {\n        focusElementInGroup(this.menuItems, target, \"next\", false);\n      } else {\n        if (event.detail.isSubmenuOpen) {\n          submenuItems[0].setFocus();\n        }\n      }\n    } else if (key === \"ArrowLeft\") {\n      if (this.layout === \"horizontal\") {\n        focusElementInGroup(this.menuItems, target, \"previous\", false);\n      } else {\n        if (event.detail.isSubmenuOpen) {\n          this.focusParentElement(event.target as HTMLCalciteMenuItemElement);\n        }\n      }\n    } else if (key === \"Escape\") {\n      this.focusParentElement(event.target as HTMLCalciteMenuItemElement);\n    }\n    event.preventDefault();\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  handleMenuSlotChange = (event: Event): void => {\n    this.menuItems = slotChangeGetAssignedElements(event) as HTMLCalciteMenuItemElement[];\n    this.setMenuItemLayout(this.menuItems, this.layout);\n  };\n\n  focusParentElement(el: HTMLCalciteMenuItemElement): void {\n    const parentEl = el.parentElement as HTMLCalciteMenuItemElement;\n    if (parentEl) {\n      focusElement(parentEl);\n      parentEl.open = false;\n    }\n  }\n\n  setMenuItemLayout(items: HTMLCalciteMenuItemElement[], layout: Layout): void {\n    items.forEach((item) => {\n      item.layout = layout;\n      if (this.getEffectiveRole() === \"menubar\") {\n        item.isTopLevelItem = true;\n        item.topLevelMenuLayout = this.layout;\n      }\n    });\n  }\n\n  private getEffectiveRole(): string {\n    return this.el.getAttribute(\"role\") || \"menubar\";\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  render(): VNode {\n    return (\n      <Host>\n        <ul aria-label={this.label} role={this.getEffectiveRole()}>\n          <slot onSlotchange={this.handleMenuSlotChange} />\n        </ul>\n      </Host>\n    );\n  }\n}\n","export const CSS = {\n  container: \"container\",\n  content: \"content\",\n  dropdownVertical: \"dropdown--vertical\",\n  dropdownMenuItems: \"dropdown-menu-items\",\n  dropdownAction: \"dropdown-action\",\n  layoutVertical: \"layout--vertical\",\n  hoverHrefIcon: \"hover-href-icon\",\n  icon: \"icon\",\n  iconBreadcrumb: \"icon--breadcrumb\",\n  iconDropdown: \"icon--dropdown\",\n  iconEnd: \"icon--end\",\n  iconStart: \"icon--start\",\n  isParentVertical: \"parent--vertical\",\n  itemContent: \"item-content\",\n  open: \"open\",\n  nested: \"nested\",\n  textContainer: \"text-container\",\n};\n",":host {\n  @apply flex\n  items-center\n  relative\n  box-border;\n  flex-shrink: 0;\n  & .container,\n  & .item-content,\n  & .content {\n    min-block-size: theme(\"spacing.12\");\n  }\n}\n\n:host([layout=\"vertical\"]) {\n  @apply w-full;\n}\n\n:host(:not([layout=\"vertical\"])) {\n  @apply h-full;\n}\n\n.container,\n.item-content {\n  @apply flex flex-row w-full h-full items-stretch;\n}\n\n.content {\n  @apply flex\n  items-center\n  relative\n  justify-center\n  cursor-pointer\n  outline-none\n  text-0\n  text-color-2\n  box-border\n  bg-foreground-1\n  px-4\n  h-full\n  w-full;\n  text-decoration: none;\n  border-block-end: theme(\"spacing[0.5]\") solid transparent;\n  padding-block-start: theme(\"spacing[0.5]\");\n  &:hover {\n    @apply bg-foreground-2 text-color-2;\n  }\n  &:focus {\n    @apply bg-foreground-2 text-color-2 focus-inset;\n  }\n  &:active {\n    @apply bg-foreground-3 text-color-1;\n  }\n  & span {\n    display: inline-flex;\n  }\n  &.layout--vertical {\n    @apply flex w-full justify-start;\n    padding-block: 1rem;\n    border-block-end: 0;\n    border-inline-end: theme(\"spacing.1\") solid transparent;\n  }\n}\n\n:host([active]) .content {\n  @apply text-color-1;\n  border-color: var(--calcite-color-brand);\n  .icon {\n    --calcite-ui-icon-color: var(--calcite-color-brand);\n  }\n}\n:host([layout=\"vertical\"]) .content {\n  @apply px-3;\n}\n\n.icon--start {\n  @apply me-3;\n}\n\n.icon--end {\n  @apply ms-3;\n}\n\n:host([layout=\"vertical\"]) .icon--end {\n  @apply ms-auto ps-3;\n}\n\n.icon--dropdown {\n  @apply ms-auto me-0 ps-2 relative;\n  --calcite-ui-icon-color: var(--calcite-color-text-3);\n}\n\n:host([layout=\"vertical\"]) .icon--end ~ .icon--dropdown {\n  @apply ms-3;\n}\n\n:host([layout=\"vertical\"]) .hover-href-icon {\n  @apply ps-2;\n}\n:host([layout=\"vertical\"]) .hover-href-icon ~ .icon--end {\n  @apply ms-2;\n}\n\n:host([layout=\"vertical\"]) .hover-href-icon ~ .icon--breadcrumb {\n  @apply ms-3;\n}\n\n.icon--breadcrumb {\n  @apply ps-2 me-0;\n  --calcite-ui-icon-color: var(--calcite-color-text-3);\n}\n\n:host([layout=\"vertical\"]) .icon--breadcrumb {\n  @apply ms-auto;\n}\n\n:host([layout=\"vertical\"]) .icon--breadcrumb ~ .icon--dropdown {\n  @apply ms-2;\n}\n\n:host([layout=\"vertical\"]) .icon--end ~ .icon--breadcrumb {\n  @apply ms-2;\n}\n\n:host([breadcrumb]) .content {\n  @apply pe-3;\n}\n\ncalcite-action {\n  @apply relative h-auto;\n  border-inline-start: 1px solid var(--calcite-color-foreground-1);\n  &:after {\n    @apply block w-px  absolute -start-px;\n    content: \"\";\n    inset-block: theme(\"spacing.3\");\n    background-color: var(--calcite-color-border-3);\n  }\n  &:hover:after {\n    @apply h-full;\n    inset-block: 0;\n  }\n}\n\n.content:focus ~ calcite-action,\n.content:hover ~ calcite-action {\n  @apply text-color-1;\n  border-inline-start: 1px solid var(--calcite-color-border-3);\n}\n\n.container:hover .dropdown-action {\n  @apply bg-foreground-2;\n}\n\n.dropdown-menu-items {\n  @apply absolute h-auto flex-col hidden overflow-visible min-w-full;\n  border: 1px solid var(--calcite-color-border-3);\n  background: var(--calcite-color-foreground-1);\n  inset-block-start: 100%;\n  z-index: theme(\"zIndex.dropdown\");\n  &.open {\n    @apply block;\n  }\n  &.nested {\n    @apply absolute;\n    inset-block-start: -1px;\n    transform: translateX(calc(100% - 2px));\n  }\n}\n\n.parent--vertical {\n  @apply flex-col;\n}\n\n.dropdown--vertical.dropdown-menu-items {\n  @apply relative rounded-none;\n  box-shadow: none;\n  inset-block-start: 0;\n  transform: none;\n  &:last-of-type {\n    border-inline: 0;\n  }\n}\n\n:host([layout=\"vertical\"]:last-of-type) .dropdown-menu-items {\n  border-block-end: 0;\n}\n\n:host([slot=\"submenu-item\"]) .parent--vertical {\n  @apply ps-6;\n}\n\n.dropdown-menu-items.nested.calcite--rtl {\n  transform: translateX(calc(-100% + 2px));\n}\n\n.dropdown--vertical.dropdown-menu-items.nested.calcite--rtl {\n  transform: none;\n}\n\n.hover-href-icon {\n  @apply ms-auto relative end-1 opacity-0;\n  transition: all var(--calcite-internal-animation-timing-medium) ease-in-out;\n}\n\n.content:focus .hover-href-icon,\n.content:hover .hover-href-icon {\n  @apply opacity-100 -end-1;\n}\n\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Fragment,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport { FlipContext } from \"../interfaces\";\nimport { Direction, getElementDir, slotChangeGetAssignedElements } from \"../../utils/dom\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { CSS } from \"./resources\";\nimport { MenuItemCustomEvent } from \"./interfaces\";\nimport { CSS_UTILITY } from \"../../utils/resources\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { MenuItemMessages } from \"./assets/menu-item/t9n\";\nimport { LocalizedComponent, connectLocalized, disconnectLocalized } from \"../../utils/locale\";\n\ntype Layout = \"horizontal\" | \"vertical\";\n\n/**\n * @slot submenu-item - A slot for adding `calcite-menu-item`s in a submenu.\n */\n@Component({\n  tag: \"calcite-menu-item\",\n  styleUrl: \"menu-item.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class CalciteMenuItem implements LoadableComponent, T9nComponent, LocalizedComponent {\n  //--------------------------------------------------------------------------\n  //\n  //  Public Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /** When `true`, the component is highlighted. */\n  @Prop({ reflect: true }) active: boolean;\n\n  /** When `true`, the component displays a breadcrumb trail for use as a navigational aid. */\n  @Prop({ reflect: true }) breadcrumb: boolean;\n\n  /** Specifies the URL destination of the component, which can be set as an absolute or relative path.*/\n  @Prop() href: string;\n\n  /** Specifies an icon to display at the end of the component. */\n  @Prop({ reflect: true }) iconEnd: string;\n\n  /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`). */\n  @Prop({ reflect: true }) iconFlipRtl: FlipContext;\n\n  /** Specifies an icon to display at the start of the component. */\n  @Prop({ reflect: true }) iconStart: string;\n\n  /**\n   * @internal\n   */\n  @Prop() isTopLevelItem = false;\n\n  /** Accessible name for the component.*/\n  @Prop() label!: string;\n\n  /**\n   * @internal\n   */\n  @Prop({ reflect: true }) layout: Layout;\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<MenuItemMessages>;\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: MenuItemMessages;\n\n  /** When `true`, the component will display any slotted `calcite-menu-item` in an open overflow menu.*/\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /**\n   * Defines the relationship between the `href` value and the current document.\n   *\n   * @mdn [rel](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel)\n   */\n  @Prop({ reflect: true }) rel: string;\n\n  /**\n   * Specifies where to open the linked document defined in the `href` property.\n   *\n   * @mdn [target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target)\n   */\n  @Prop({ reflect: true }) target: string;\n\n  /** Specifies the text to display.*/\n  @Prop() text: string;\n\n  /**\n   * @internal\n   */\n  @Prop() topLevelMenuLayout: Layout;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private State/Props\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteMenuItemElement;\n\n  @State() defaultMessages: MenuItemMessages;\n\n  @State() effectiveLocale = \"\";\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  @State() hasSubmenu = false;\n\n  @State() submenuItems: HTMLCalciteMenuItemElement[];\n\n  anchorEl: HTMLAnchorElement;\n\n  dropdownActionEl: HTMLCalciteActionElement;\n\n  isFocused: boolean;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /** Sets focus on the component. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n    this.anchorEl.focus();\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n  /** @internal */\n  @Event({ cancelable: true }) calciteInternalMenuItemKeyEvent: EventEmitter<MenuItemCustomEvent>;\n\n  /** Emits when the component is selected.*/\n  @Event() calciteMenuItemSelect: EventEmitter<void>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Event Listeners\n  //\n  //--------------------------------------------------------------------------\n  @Listen(\"click\", { target: \"window\" })\n  handleClickOut(event: Event): void {\n    if (\n      this.topLevelMenuLayout !== \"vertical\" &&\n      this.hasSubmenu &&\n      this.open &&\n      !event.composedPath().includes(this.el)\n    ) {\n      this.open = false;\n    }\n  }\n\n  @Listen(\"focusout\")\n  handleFocusOut(event: FocusEvent): void {\n    if (\n      this.topLevelMenuLayout !== \"vertical\" &&\n      !this.el.contains(event.relatedTarget as Element)\n    ) {\n      this.open = false;\n    }\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectLocalized(this);\n    connectMessages(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  disconnectedCallback(): void {\n    disconnectLocalized(this);\n    disconnectMessages(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  private blurHandler(): void {\n    this.isFocused = false;\n  }\n\n  private clickHandler = (event: MouseEvent): void => {\n    if ((this.href && event.target === this.dropdownActionEl) || (!this.href && this.hasSubmenu)) {\n      this.open = !this.open;\n    }\n    this.selectMenuItem(event);\n  };\n\n  private focusHandler(event: FocusEvent): void {\n    const target = event.target as HTMLCalciteMenuItemElement;\n    this.isFocused = true;\n    if (target.open && !this.open) {\n      target.open = false;\n    }\n  }\n\n  private handleMenuItemSlotChange = (event: Event): void => {\n    this.submenuItems = slotChangeGetAssignedElements(event) as HTMLCalciteMenuItemElement[];\n    this.submenuItems.forEach((item) => {\n      if (!item.topLevelMenuLayout) {\n        item.topLevelMenuLayout = this.topLevelMenuLayout;\n      }\n    });\n    this.hasSubmenu = this.submenuItems.length > 0;\n  };\n\n  private keyDownHandler = async (event: KeyboardEvent): Promise<void> => {\n    const { hasSubmenu, href, layout, open, submenuItems } = this;\n    const key = event.key;\n    const targetIsDropdown = event.target === this.dropdownActionEl;\n    if (key === \" \" || key === \"Enter\") {\n      if (hasSubmenu && (!href || (href && targetIsDropdown))) {\n        this.open = !open;\n      }\n      if (!(href && targetIsDropdown) && key !== \"Enter\") {\n        this.selectMenuItem(event);\n      }\n      if (key === \" \" || (href && targetIsDropdown)) {\n        event.preventDefault();\n      }\n    } else if (key === \"Escape\") {\n      if (open) {\n        this.open = false;\n        return;\n      }\n      this.calciteInternalMenuItemKeyEvent.emit({ event });\n      event.preventDefault();\n    } else if (key === \"ArrowDown\" || key === \"ArrowUp\") {\n      event.preventDefault();\n      if ((targetIsDropdown || !href) && hasSubmenu && !open && layout === \"horizontal\") {\n        this.open = true;\n        return;\n      }\n      this.calciteInternalMenuItemKeyEvent.emit({\n        event,\n        children: submenuItems,\n        isSubmenuOpen: open && hasSubmenu,\n      });\n    } else if (key === \"ArrowLeft\") {\n      event.preventDefault();\n      this.calciteInternalMenuItemKeyEvent.emit({\n        event,\n        children: submenuItems,\n        isSubmenuOpen: true,\n      });\n    } else if (key === \"ArrowRight\") {\n      event.preventDefault();\n      if ((targetIsDropdown || !href) && hasSubmenu && !open && layout === \"vertical\") {\n        this.open = true;\n        return;\n      }\n      this.calciteInternalMenuItemKeyEvent.emit({\n        event,\n        children: submenuItems,\n        isSubmenuOpen: open && hasSubmenu,\n      });\n    }\n  };\n\n  private selectMenuItem(event: MouseEvent | KeyboardEvent): void {\n    if (event.target !== this.dropdownActionEl) {\n      this.calciteMenuItemSelect.emit();\n    }\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  //--------------------------------------------------------------------------\n\n  renderIconStart(): VNode {\n    return (\n      <calcite-icon\n        class={`${CSS.icon} ${CSS.iconStart}`}\n        flipRtl={this.iconFlipRtl === \"start\" || this.iconFlipRtl === \"both\"}\n        icon={this.iconStart}\n        key={CSS.iconStart}\n        scale=\"s\"\n      />\n    );\n  }\n\n  renderIconEnd(): VNode {\n    return (\n      <calcite-icon\n        class={`${CSS.icon} ${CSS.iconEnd}`}\n        flipRtl={this.iconFlipRtl === \"end\" || this.iconFlipRtl === \"both\"}\n        icon={this.iconEnd}\n        key={CSS.iconEnd}\n        scale=\"s\"\n      />\n    );\n  }\n\n  renderBreadcrumbIcon(dir: Direction): VNode {\n    return (\n      <calcite-icon\n        class={`${CSS.icon} ${CSS.iconBreadcrumb}`}\n        icon={dir === \"rtl\" ? \"chevron-left\" : \"chevron-right\"}\n        key={CSS.iconBreadcrumb}\n        scale=\"s\"\n      />\n    );\n  }\n\n  renderDropdownIcon(dir: Direction): VNode {\n    const dirChevron = dir === \"rtl\" ? \"chevron-left\" : \"chevron-right\";\n    return (\n      <calcite-icon\n        class={`${CSS.icon} ${CSS.iconDropdown}`}\n        icon={\n          this.topLevelMenuLayout === \"vertical\" || this.isTopLevelItem\n            ? this.open\n              ? \"chevron-up\"\n              : \"chevron-down\"\n            : dirChevron\n        }\n        key={CSS.iconDropdown}\n        scale=\"s\"\n      />\n    );\n  }\n\n  renderDropdownAction(dir: Direction): VNode {\n    const dirChevron = dir === \"rtl\" ? \"chevron-left\" : \"chevron-right\";\n    return (\n      <calcite-action\n        class={CSS.dropdownAction}\n        icon={\n          this.topLevelMenuLayout === \"vertical\" || this.isTopLevelItem\n            ? this.open\n              ? \"chevron-up\"\n              : \"chevron-down\"\n            : dirChevron\n        }\n        key={CSS.dropdownAction}\n        onClick={this.clickHandler}\n        onKeyDown={this.keyDownHandler}\n        text={this.messages.open}\n        // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)\n        ref={(el) => (this.dropdownActionEl = el)}\n      />\n    );\n  }\n\n  renderSubmenuItems(dir: Direction): VNode {\n    return (\n      <calcite-menu\n        class={{\n          [CSS.dropdownMenuItems]: true,\n          [CSS.open]: this.open,\n          [CSS.nested]: !this.isTopLevelItem,\n          [CSS_UTILITY.rtl]: dir === \"rtl\",\n          [CSS.dropdownVertical]: this.topLevelMenuLayout === \"vertical\",\n        }}\n        label={this.messages.submenu}\n        layout=\"vertical\"\n        role=\"menu\"\n      >\n        <slot name=\"submenu-item\" onSlotchange={this.handleMenuItemSlotChange} />\n      </calcite-menu>\n    );\n  }\n\n  renderHrefIcon(dir: Direction): VNode {\n    return (\n      <calcite-icon\n        class={CSS.hoverHrefIcon}\n        icon={dir === \"rtl\" ? \"arrow-left\" : \"arrow-right\"}\n        key={CSS.hoverHrefIcon}\n        scale=\"s\"\n      />\n    );\n  }\n\n  renderItemContent(dir: Direction): VNode {\n    const hasHref = this.href && (this.topLevelMenuLayout === \"vertical\" || !this.isTopLevelItem);\n    return (\n      <Fragment>\n        {this.iconStart && this.renderIconStart()}\n        <div class={CSS.textContainer}>\n          <span>{this.text}</span>\n        </div>\n        {hasHref && this.renderHrefIcon(dir)}\n        {this.iconEnd && this.renderIconEnd()}\n        {this.breadcrumb ? this.renderBreadcrumbIcon(dir) : null}\n        {!this.href && this.hasSubmenu ? this.renderDropdownIcon(dir) : null}\n      </Fragment>\n    );\n  }\n\n  render() {\n    const dir = getElementDir(this.el);\n    return (\n      <Host onBlur={this.blurHandler} onFocus={this.focusHandler}>\n        <li\n          class={{\n            [CSS.container]: true,\n            [CSS.isParentVertical]: this.topLevelMenuLayout === \"vertical\",\n          }}\n          role=\"none\"\n        >\n          <div class={CSS.itemContent}>\n            <a\n              aria-current={this.isFocused ? \"page\" : false}\n              aria-expanded={this.open}\n              aria-haspopup={this.hasSubmenu}\n              aria-label={this.label}\n              class={{ [CSS.layoutVertical]: this.layout === \"vertical\", [CSS.content]: true }}\n              href={this.href}\n              onClick={this.clickHandler}\n              onKeyDown={this.keyDownHandler}\n              rel={this.rel}\n              role=\"menuitem\"\n              tabIndex={this.isTopLevelItem ? 0 : -1}\n              target={this.target}\n              // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)\n              ref={(el) => (this.anchorEl = el)}\n            >\n              {this.renderItemContent(dir)}\n            </a>\n            {this.href && this.hasSubmenu ? this.renderDropdownAction(dir) : null}\n          </div>\n          {this.renderSubmenuItems(dir)}\n        </li>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/calcite/p-33d8c8f0.entry.js

@@ -1,7 +0,0 @@
-/*!
- * 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.6.0-next.1
- */
-import{r as t,c as n,h as e,F as i,H as o,g as a}from"./p-e538ca60.js";import{b as s}from"./p-49af9f12.js";import{c as r,s as c,a as l}from"./p-2d2e0315.js";import"./p-57cde6a5.js";import"./p-0a3f1f3c.js";const d={container:"container",containerContent:"container-content",hasProgress:"progress-bar",hide:"hide",primary:"primary",secondary:"secondary",tertiary:"tertiary"};const h={logo:"logo",user:"user",progress:"progress",navigationAction:"navigation-action",contentStart:"content-start",contentEnd:"content-end",contentCenter:"content-center",navSecondary:"navigation-secondary",navTertiary:"navigation-tertiary"};const u={hamburger:"hamburger"};const f=":host([hidden]){display:none}[hidden]{display:none}.container{margin-inline:auto;display:flex;inline-size:100%;flex-direction:column;margin-block:0;margin-inline:auto;background-color:var(--calcite-navigation-background, var(--calcite-color-foreground-1))}.container.primary,.container.secondary,.container.tertiary{border-block-end:1px solid;border-block-end-color:var(--calcite-navigation-border-color, var(--calcite-color-border-3))}.user,.logo{display:flex}.hide{display:none}.primary{block-size:4rem}.secondary{block-size:3rem}.tertiary{block-size:3rem}.container-content{margin-inline:auto;display:flex;block-size:100%;inline-size:100%;margin-block:0;inline-size:var(--calcite-navigation-width, 100%);max-inline-size:100%}.container-content.progress-bar{margin-block-start:0.125rem}slot[name]{display:flex;flex-direction:row}slot[name=navigation-secondary]::slotted(calcite-navigation),slot[name=navigation-tertiary]::slotted(calcite-navigation){inline-size:100%}slot[name=content-start]::slotted(*),slot[name=content-center]::slotted(*),slot[name=content-end]::slotted(*){display:flex;flex-direction:row;align-items:center}slot[name=progress],slot[name=progress] calcite-progress{inset-block-start:0;inset-inline:0}slot[name=content-end]{margin-inline-start:auto}slot[name=content-start]{margin-inline-end:auto}slot[name=content-end],slot[name=logo]~slot[name=user],slot[name=user]:only-child{margin-inline-start:auto}slot[name=content-center]{margin-inline-start:auto;margin-inline-end:auto}slot[name=content-start]~slot[name=content-center]{margin-inline-start:0px}slot[name=content-start]~slot[name=content-end],slot[name=content-center]~slot[name=content-end],slot[name=content-center]~slot[name=user],slot[name=content-end]~slot[name=user]{margin:0px}";const m=class{constructor(e){t(this,e);this.calciteNavigationActionSelect=n(this,"calciteNavigationActionSelect",6);this.actionClickHandler=()=>{this.calciteNavigationActionSelect.emit()};this.handleUserSlotChange=t=>{if(this.isPrimaryLevel()){this.userSlotHasElements=s(t)}};this.handleLogoSlotChange=t=>{if(this.isPrimaryLevel()){this.logoSlotHasElements=s(t)}};this.handleContentStartSlotChange=t=>{if(this.isPrimaryLevel()){this.primaryContentStartSlotHasElements=s(t)}};this.handleContentEndSlotChange=t=>{if(this.isPrimaryLevel()){this.primaryContentEndSlotHasElements=s(t)}};this.handleContentCenterSlotChange=t=>{if(this.isPrimaryLevel()){this.primaryContentCenterSlotHasElements=s(t)}};this.handleSecondarySlotChange=t=>{this.secondarySlotHasElements=s(t)};this.handleTertiarySlotChange=t=>{this.tertiarySlotHasElements=s(t)};this.handleMenuActionSlotChange=t=>{if(this.isPrimaryLevel()){this.navigationActionSlotHasElements=s(t);if(this.navigationActionSlotHasElements){this.navigationAction=false}}};this.handleProgressSlotChange=t=>{if(this.isPrimaryLevel()){this.progressSlotHasElement=s(t)}};this.label=undefined;this.navigationAction=false;this.logoSlotHasElements=undefined;this.navigationActionSlotHasElements=undefined;this.primaryContentCenterSlotHasElements=undefined;this.primaryContentEndSlotHasElements=undefined;this.primaryContentStartSlotHasElements=undefined;this.progressSlotHasElement=undefined;this.secondarySlotHasElements=undefined;this.tertiarySlotHasElements=undefined;this.userSlotHasElements=undefined}async setFocus(){await r(this);return this.navigationActionEl?.setFocus()}componentWillLoad(){c(this)}componentDidLoad(){l(this)}isPrimaryLevel(){return this.el.slot!==h.navSecondary&&this.el.slot!==h.navTertiary}renderMenuAction(){return e("slot",{name:h.navigationAction,onSlotchange:this.handleMenuActionSlotChange},this.navigationAction&&e("calcite-action",{icon:u.hamburger,onClick:this.actionClickHandler,text:this.label,ref:t=>this.navigationActionEl=t}))}render(){const t=this.logoSlotHasElements||this.userSlotHasElements||this.navigationActionSlotHasElements||this.primaryContentCenterSlotHasElements||this.primaryContentEndSlotHasElements||this.primaryContentStartSlotHasElements||this.navigationAction;const n=this.el.slot;return e(o,null,e("div",{class:{[d.container]:true,[d.secondary]:n===h.navSecondary,[d.tertiary]:n===h.navTertiary,[d.primary]:t}},e("div",{class:{[d.hide]:!this.progressSlotHasElement,[h.progress]:true}},e("slot",{name:h.progress,onSlotchange:this.handleProgressSlotChange})),e("div",{class:{[d.containerContent]:true,[d.hasProgress]:this.progressSlotHasElement}},this.renderMenuAction(),e("div",{class:{[d.hide]:!this.logoSlotHasElements,[h.logo]:true}},e("slot",{name:h.logo,onSlotchange:this.handleLogoSlotChange})),e("slot",{name:h.contentStart,onSlotchange:this.handleContentStartSlotChange}),e("slot",{name:h.contentCenter,onSlotchange:this.handleContentCenterSlotChange}),e("slot",{name:h.contentEnd,onSlotchange:this.handleContentEndSlotChange}),e("div",{class:{[d.hide]:!this.userSlotHasElements,[h.user]:true}},e("slot",{name:h.user,onSlotchange:this.handleUserSlotChange})))),e(i,null,e("slot",{name:h.navSecondary,onSlotchange:this.handleSecondarySlotChange}),e("slot",{name:h.navTertiary,onSlotchange:this.handleTertiarySlotChange})))}get el(){return a(this)}};m.style=f;const g={container:"container",heading:"heading",description:"description",anchor:"anchor",image:"image",standalone:"standalone",icon:"icon"};const p=":host{display:inline-flex;outline:2px solid transparent;outline-offset:2px}.anchor{margin:0px;display:flex;cursor:pointer;align-items:center;justify-content:center;font-size:var(--calcite-font-size-0);line-height:1.25rem;text-decoration-line:none;outline-color:transparent;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;color:inherit;border-block-end:2px solid transparent}.anchor:hover,.anchor:focus{background-color:var(--calcite-color-foreground-2)}.anchor:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand-hover, var(--calcite--color-brand)));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.anchor:active{background-color:var(--calcite-color-foreground-3)}.image,.icon{margin:0px;display:flex;block-size:1.75rem;padding-inline:1rem}.image~.icon{padding-inline-start:0px}.image~.container,.icon~.container{padding-inline-start:0px}:host(:active) .anchor{color:var(--calcite-color-text-1)}:host([active]) .anchor{color:var(--calcite-color-text-1);border-color:var(--calcite-color-brand);--calcite-ui-icon-color:var(--calcite-color-brand)}.container{margin-block-start:0.125rem;display:flex;flex-direction:column;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-inline:1rem;text-align:start}.heading{margin-inline-start:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--calcite-font-size-0);font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-1)}.standalone{font-size:var(--calcite-font-size-1)}.description{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host([hidden]){display:none}[hidden]{display:none}";const v=class{constructor(n){t(this,n);this.active=undefined;this.href=undefined;this.icon=undefined;this.iconFlipRtl=false;this.label=undefined;this.rel=undefined;this.description=undefined;this.target=undefined;this.heading=undefined;this.thumbnail=undefined}async setFocus(){await r(this);if(this.href){this.el.focus()}}componentWillLoad(){c(this)}componentDidLoad(){l(this)}renderIcon(){return e("calcite-icon",{class:g.icon,flipRtl:this.iconFlipRtl,icon:this.icon,scale:"l"})}render(){const{heading:t,description:n,thumbnail:i}=this;return e(o,null,e("a",{class:g.anchor,href:this.href,rel:this.rel,target:this.target},i&&e("img",{alt:this.label||"",class:g.image,src:i}),this.icon&&this.renderIcon(),(t||n)&&e("div",{class:g.container},t&&e("span",{"aria-label":this.heading,class:{[g.heading]:true,[g.standalone]:!this.description},key:g.heading},t),n&&e("span",{"aria-label":this.description,class:g.description,key:g.description},n))))}static get delegatesFocus(){return true}get el(){return a(this)}};v.style=p;const b={textContainer:"text-container",fullName:"full-name",username:"username",button:"button"};const x=":host{display:inline-flex;outline:2px solid transparent;outline-offset:2px}:host .button{background-color:transparent;border:none;margin:0px;display:flex;cursor:pointer;align-items:center;justify-content:center;font-family:var(--calcite-sans-family);font-size:var(--calcite-font-size-0);line-height:1.25rem;outline-color:transparent;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;border-block-end:2px solid transparent}:host(:hover) .button,:host(:focus) .button{background-color:var(--calcite-color-foreground-2)}:host(:focus) .button{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand-hover, var(--calcite--color-brand)));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}:host(:active) .button{background-color:var(--calcite-color-foreground-3);color:var(--calcite-color-text-1)}calcite-avatar{padding-inline:1rem}calcite-avatar~.text-container{padding-inline-start:0px}:host([active]) .button{border-color:var(--calcite-color-brand);color:var(--calcite-color-text-1);--calcite-ui-icon-color:var(--calcite-color-brand)}.text-container{margin-block-start:0.125rem;display:flex;flex-direction:column;padding-inline:1rem;text-align:start}.full-name{margin-inline-start:0px;font-size:var(--calcite-font-size-0);font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-1)}.username{color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host([hidden]){display:none}[hidden]{display:none}";const y=class{constructor(n){t(this,n);this.active=undefined;this.fullName=undefined;this.label=undefined;this.textDisabled=false;this.thumbnail=undefined;this.userId=undefined;this.username=undefined}async setFocus(){await r(this);this.el.focus()}componentWillLoad(){c(this)}componentDidLoad(){l(this)}render(){return e(o,null,e("button",{"aria-label":this.label,class:b.button},e("calcite-avatar",{"full-name":this.fullName,label:this.label,thumbnail:this.thumbnail,"user-id":this.userId,username:this.username}),(this.fullName||this.username)&&!this.textDisabled&&e("div",{class:b.textContainer},this.fullName&&e("span",{class:b.fullName,key:b.fullName},this.fullName),this.username&&e("span",{class:b.username,key:b.username},this.username))))}static get delegatesFocus(){return true}get el(){return a(this)}};y.style=x;export{m as calcite_navigation,v as calcite_navigation_logo,y as calcite_navigation_user};
-//# sourceMappingURL=p-33d8c8f0.entry.js.map

package/dist/calcite/p-33d8c8f0.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["CSS","container","containerContent","hasProgress","hide","primary","secondary","tertiary","SLOTS","logo","user","progress","navigationAction","contentStart","contentEnd","contentCenter","navSecondary","navTertiary","ICONS","hamburger","navigationCss","CalciteNavigation","this","actionClickHandler","calciteNavigationActionSelect","emit","handleUserSlotChange","event","isPrimaryLevel","userSlotHasElements","slotChangeHasAssignedElement","handleLogoSlotChange","logoSlotHasElements","handleContentStartSlotChange","primaryContentStartSlotHasElements","handleContentEndSlotChange","primaryContentEndSlotHasElements","handleContentCenterSlotChange","primaryContentCenterSlotHasElements","handleSecondarySlotChange","secondarySlotHasElements","handleTertiarySlotChange","tertiarySlotHasElements","handleMenuActionSlotChange","navigationActionSlotHasElements","handleProgressSlotChange","progressSlotHasElement","setFocus","componentFocusable","navigationActionEl","componentWillLoad","setUpLoadableComponent","componentDidLoad","setComponentLoaded","el","slot","renderMenuAction","h","name","onSlotchange","icon","onClick","text","label","ref","render","primaryLevelHasElements","slotName","Host","class","Fragment","heading","description","anchor","image","standalone","navigationLogoCss","CalciteNavigationLogo","href","focus","renderIcon","flipRtl","iconFlipRtl","scale","thumbnail","rel","target","alt","src","key","textContainer","fullName","username","button","navigationUserCss","CalciteNavigationUser","userId","textDisabled"],"sources":["src/components/navigation/resources.ts","src/components/navigation/navigation.scss?tag=calcite-navigation&encapsulation=shadow","src/components/navigation/navigation.tsx","src/components/navigation-logo/resources.ts","src/components/navigation-logo/navigation-logo.scss?tag=calcite-navigation-logo&encapsulation=shadow","src/components/navigation-logo/navigation-logo.tsx","src/components/navigation-user/resources.ts","src/components/navigation-user/navigation-user.scss?tag=calcite-navigation-user&encapsulation=shadow","src/components/navigation-user/navigation-user.tsx"],"sourcesContent":["export const CSS = {\n  container: \"container\",\n  containerContent: \"container-content\",\n  hasProgress: \"progress-bar\",\n  hide: \"hide\",\n  primary: \"primary\",\n  secondary: \"secondary\",\n  tertiary: \"tertiary\",\n};\n\nexport const SLOTS = {\n  logo: \"logo\",\n  user: \"user\",\n  progress: \"progress\",\n  navigationAction: \"navigation-action\",\n  contentStart: \"content-start\",\n  contentEnd: \"content-end\",\n  contentCenter: \"content-center\",\n  navSecondary: \"navigation-secondary\",\n  navTertiary: \"navigation-tertiary\",\n};\n\nexport const ICONS = {\n  hamburger: \"hamburger\",\n};\n","/**\n * CSS Custom Properties\n *\n * These properties can be overridden using the component's tag as selector.\n *\n * @prop --calcite-navigation-width: Specifies the width of the component's content area.\n * @prop --calcite-navigation-background: Specifies the background color of the component.\n * @prop --calcite-navigation-border-color: Specifies the border color of the component.\n */\n\n@include base-component();\n\n.container {\n  @apply flex\n  flex-col\n  mx-auto\n  w-full;\n  margin-block: 0;\n  margin-inline: auto;\n  background-color: var(--calcite-navigation-background, var(--calcite-color-foreground-1));\n  &.primary,\n  &.secondary,\n  &.tertiary {\n    border-block-end: 1px solid;\n    border-block-end-color: var(--calcite-navigation-border-color, var(--calcite-color-border-3));\n  }\n}\n\n.user,\n.logo {\n  @apply flex;\n}\n\n.hide {\n  @apply hidden;\n}\n\n.primary {\n  @apply h-16;\n}\n\n.secondary {\n  @apply h-12;\n}\n\n.tertiary {\n  @apply h-12;\n}\n\n.container-content {\n  @apply flex\n  w-full\n  h-full\n  mx-auto;\n  margin-block: 0;\n  inline-size: var(--calcite-navigation-width, 100%);\n  max-inline-size: 100%;\n  &.progress-bar {\n    margin-block-start: 0.125rem;\n  }\n}\n\nslot[name] {\n  @apply flex flex-row;\n}\n\nslot[name=\"navigation-secondary\"]::slotted(calcite-navigation),\nslot[name=\"navigation-tertiary\"]::slotted(calcite-navigation) {\n  @apply w-full;\n}\n\nslot[name=\"content-start\"]::slotted(*),\nslot[name=\"content-center\"]::slotted(*),\nslot[name=\"content-end\"]::slotted(*) {\n  @apply flex flex-row items-center;\n}\n\nslot[name=\"progress\"],\nslot[name=\"progress\"] calcite-progress {\n  inset-block-start: 0;\n  inset-inline: 0;\n}\nslot[name=\"content-end\"] {\n  @apply ms-auto;\n}\n\nslot[name=\"content-start\"] {\n  @apply me-auto;\n}\n\nslot[name=\"content-end\"],\nslot[name=\"logo\"] ~ slot[name=\"user\"],\nslot[name=\"user\"]:only-child {\n  @apply ms-auto;\n}\n\nslot[name=\"content-center\"] {\n  @apply ms-auto me-auto;\n}\n\nslot[name=\"content-start\"] ~ slot[name=\"content-center\"] {\n  @apply ms-0;\n}\n\nslot[name=\"content-start\"] ~ slot[name=\"content-end\"],\nslot[name=\"content-center\"] ~ slot[name=\"content-end\"],\nslot[name=\"content-center\"] ~ slot[name=\"user\"],\nslot[name=\"content-end\"] ~ slot[name=\"user\"] {\n  @apply m-0;\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Fragment,\n  h,\n  Host,\n  Prop,\n  State,\n  VNode,\n  Method,\n} from \"@stencil/core\";\nimport { slotChangeHasAssignedElement } from \"../../utils/dom\";\nimport { CSS, ICONS, SLOTS } from \"./resources\";\nimport {\n  LoadableComponent,\n  componentFocusable,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\n\n/**\n * @slot logo - A slot for adding a `calcite-logo` component to the primary navigation level.\n * @slot user - A slot for adding a `calcite-user` component to the primary navigation level.\n * @slot progress - A slot for adding a `calcite-progress` component to the primary navigation level.\n * @slot navigation-action - A slot for adding a `calcite-action` component to the primary navigation level.\n * @slot content-start - A slot for adding a `calcite-menu`, `calcite-action`, or other interactive elements in the start position of any navigation level.\n * @slot content-center - A slot for adding a `calcite-menu`, `calcite-action`, or other interactive elements in the center position of the primary navigation level.\n * @slot content-end - A slot for adding a `calcite-menu`, `calcite-action`, or other interactive elements in the end position of any navigation level.\n * @slot navigation-secondary - A slot for adding a `calcite-navigation` component in the secondary navigation level. Components rendered here will not display `calcite-navigation-logo` or `calcite-navigation-user` components.\n * @slot navigation-tertiary - A slot for adding a `calcite-navigation` component in the tertiary navigation level.  Components rendered here will not display `calcite-navigation-logo` or `calcite-navigation-user` components.\n */\n@Component({\n  tag: \"calcite-navigation\",\n  styleUrl: \"navigation.scss\",\n  shadow: true,\n})\nexport class CalciteNavigation implements LoadableComponent {\n  //--------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * When `navigationAction` is `true`, specifies the label of the `calcite-action`.\n   */\n  @Prop() label: string;\n\n  /**\n   * When `true`, displays a `calcite-action` and emits a `calciteNavActionSelect` event on selection change.\n   */\n  @Prop({ reflect: true }) navigationAction = false;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Properties/ State\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteNavigationElement;\n\n  @State() logoSlotHasElements: boolean;\n\n  @State() navigationActionSlotHasElements: boolean;\n\n  @State() primaryContentCenterSlotHasElements: boolean;\n\n  @State() primaryContentEndSlotHasElements: boolean;\n\n  @State() primaryContentStartSlotHasElements: boolean;\n\n  @State() progressSlotHasElement: boolean;\n\n  @State() secondarySlotHasElements: boolean;\n\n  @State() tertiarySlotHasElements: boolean;\n\n  @State() userSlotHasElements: boolean;\n\n  navigationActionEl: HTMLCalciteActionElement;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  // --------------------------------------------------------------------------\n\n  /** When `navigationAction` is `true`, emits when the displayed action selection changes. */\n  @Event({ cancelable: false }) calciteNavigationActionSelect: EventEmitter<void>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /** When `navigationAction` is `true`, sets focus on the component's action element. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n    return this.navigationActionEl?.setFocus();\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  componentWillLoad(): void {\n    setUpLoadableComponent(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  private actionClickHandler = () => {\n    this.calciteNavigationActionSelect.emit();\n  };\n\n  private handleUserSlotChange = (event: Event): void => {\n    if (this.isPrimaryLevel()) {\n      this.userSlotHasElements = slotChangeHasAssignedElement(event);\n    }\n  };\n\n  private handleLogoSlotChange = (event: Event): void => {\n    if (this.isPrimaryLevel()) {\n      this.logoSlotHasElements = slotChangeHasAssignedElement(event);\n    }\n  };\n\n  private handleContentStartSlotChange = (event: Event): void => {\n    if (this.isPrimaryLevel()) {\n      this.primaryContentStartSlotHasElements = slotChangeHasAssignedElement(event);\n    }\n  };\n\n  private handleContentEndSlotChange = (event: Event): void => {\n    if (this.isPrimaryLevel()) {\n      this.primaryContentEndSlotHasElements = slotChangeHasAssignedElement(event);\n    }\n  };\n\n  private handleContentCenterSlotChange = (event: Event): void => {\n    if (this.isPrimaryLevel()) {\n      this.primaryContentCenterSlotHasElements = slotChangeHasAssignedElement(event);\n    }\n  };\n\n  private handleSecondarySlotChange = (event: Event): void => {\n    this.secondarySlotHasElements = slotChangeHasAssignedElement(event);\n  };\n\n  private handleTertiarySlotChange = (event: Event): void => {\n    this.tertiarySlotHasElements = slotChangeHasAssignedElement(event);\n  };\n\n  private handleMenuActionSlotChange = (event: Event): void => {\n    if (this.isPrimaryLevel()) {\n      this.navigationActionSlotHasElements = slotChangeHasAssignedElement(event);\n      if (this.navigationActionSlotHasElements) {\n        this.navigationAction = false;\n      }\n    }\n  };\n\n  private handleProgressSlotChange = (event: Event): void => {\n    if (this.isPrimaryLevel()) {\n      this.progressSlotHasElement = slotChangeHasAssignedElement(event);\n    }\n  };\n\n  private isPrimaryLevel(): boolean {\n    return this.el.slot !== SLOTS.navSecondary && this.el.slot !== SLOTS.navTertiary;\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  //--------------------------------------------------------------------------\n\n  renderMenuAction(): VNode {\n    return (\n      <slot name={SLOTS.navigationAction} onSlotchange={this.handleMenuActionSlotChange}>\n        {this.navigationAction && (\n          <calcite-action\n            icon={ICONS.hamburger}\n            onClick={this.actionClickHandler}\n            text={this.label}\n            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)\n            ref={(el: HTMLCalciteActionElement) => (this.navigationActionEl = el)}\n          />\n        )}\n      </slot>\n    );\n  }\n\n  render(): VNode {\n    const primaryLevelHasElements =\n      this.logoSlotHasElements ||\n      this.userSlotHasElements ||\n      this.navigationActionSlotHasElements ||\n      this.primaryContentCenterSlotHasElements ||\n      this.primaryContentEndSlotHasElements ||\n      this.primaryContentStartSlotHasElements ||\n      this.navigationAction;\n    const slotName = this.el.slot;\n    return (\n      <Host>\n        <div\n          class={{\n            [CSS.container]: true,\n            [CSS.secondary]: slotName === SLOTS.navSecondary,\n            [CSS.tertiary]: slotName === SLOTS.navTertiary,\n            [CSS.primary]: primaryLevelHasElements,\n          }}\n        >\n          <div class={{ [CSS.hide]: !this.progressSlotHasElement, [SLOTS.progress]: true }}>\n            <slot name={SLOTS.progress} onSlotchange={this.handleProgressSlotChange} />\n          </div>\n          <div\n            class={{ [CSS.containerContent]: true, [CSS.hasProgress]: this.progressSlotHasElement }}\n          >\n            {this.renderMenuAction()}\n            <div class={{ [CSS.hide]: !this.logoSlotHasElements, [SLOTS.logo]: true }}>\n              <slot name={SLOTS.logo} onSlotchange={this.handleLogoSlotChange} />\n            </div>\n            <slot name={SLOTS.contentStart} onSlotchange={this.handleContentStartSlotChange} />\n            <slot name={SLOTS.contentCenter} onSlotchange={this.handleContentCenterSlotChange} />\n            <slot name={SLOTS.contentEnd} onSlotchange={this.handleContentEndSlotChange} />\n            <div class={{ [CSS.hide]: !this.userSlotHasElements, [SLOTS.user]: true }}>\n              <slot name={SLOTS.user} onSlotchange={this.handleUserSlotChange} />\n            </div>\n          </div>\n        </div>\n\n        <Fragment>\n          <slot name={SLOTS.navSecondary} onSlotchange={this.handleSecondarySlotChange} />\n          <slot name={SLOTS.navTertiary} onSlotchange={this.handleTertiarySlotChange} />\n        </Fragment>\n      </Host>\n    );\n  }\n}\n","export const CSS = {\n  container: \"container\",\n  heading: \"heading\",\n  description: \"description\",\n  anchor: \"anchor\",\n  image: \"image\",\n  standalone: \"standalone\",\n  icon: \"icon\",\n};\n",":host {\n  @apply inline-flex outline-none;\n}\n\n.anchor {\n  @apply flex\n    m-0\n    items-center\n    justify-center\n    cursor-pointer\n    transition-default\n    focus-base\n    no-underline\n    text-0h;\n  color: inherit;\n  border-block-end: 2px solid transparent;\n}\n\n.anchor:hover,\n.anchor:focus {\n  @apply bg-foreground-2;\n}\n.anchor:focus {\n  @apply focus-inset;\n}\n\n.anchor:active {\n  @apply bg-foreground-3;\n}\n\n.image,\n.icon {\n  @apply flex h-7 m-0 px-4;\n}\n\n.image ~ .icon {\n  @apply ps-0;\n}\n\n.image ~ .container,\n.icon ~ .container {\n  @apply ps-0;\n}\n\n:host(:active) .anchor {\n  @apply text-color-1;\n}\n\n:host([active]) .anchor {\n  @apply text-color-1;\n  border-color: var(--calcite-color-brand);\n  --calcite-ui-icon-color: var(--calcite-color-brand);\n}\n\n.container {\n  @apply flex\n  flex-col\n  truncate\n  text-start\n  px-4\n  mt-0.5;\n}\n\n.heading {\n  @apply text-0\n  ms-0\n  truncate\n  text-color-1\n  font-medium;\n}\n\n.standalone {\n  @apply text-1;\n}\n\n.description {\n  @apply text-color-2 truncate;\n  font-size: var(--calcite-font-size--1);\n}\n\n@include base-component();\n","import { Component, Element, h, Host, Prop, VNode, Method } from \"@stencil/core\";\nimport { CSS } from \"./resources\";\nimport {\n  LoadableComponent,\n  componentFocusable,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\n\n@Component({\n  tag: \"calcite-navigation-logo\",\n  styleUrl: \"navigation-logo.scss\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class CalciteNavigationLogo implements LoadableComponent {\n  //--------------------------------------------------------------------------\n  //\n  //  Public Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /** When `true`, the component is highlighted. */\n  @Prop({ reflect: true }) active: boolean;\n\n  /** Specifies the URL destination of the component, which can be set as an absolute or relative path.*/\n  @Prop({ reflect: true }) href: string;\n\n  /** Specifies an icon to display. */\n  @Prop({ reflect: true }) icon: string;\n\n  /** When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`). */\n  @Prop({ reflect: true }) iconFlipRtl = false;\n\n  /** Describes the appearance or function of the `thumbnail`. If no label is provided, context will not be provided to assistive technologies. */\n  @Prop() label: string;\n\n  /**\n   * Defines the relationship between the `href` value and the current document.\n   *\n   * @mdn [rel](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel)\n   */\n  @Prop({ reflect: true }) rel: string;\n\n  /** A description for the component, which displays below the `heading`.*/\n  @Prop() description: string;\n\n  /**\n   * Specifies where to open the linked document defined in the `href` property.\n   *\n   * @mdn [target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target)\n   */\n  @Prop({ reflect: true }) target: string;\n\n  /** Specifies heading text for the component, such as a product or organization name.*/\n  @Prop() heading: string;\n\n  /** Specifies the `src` to an image. */\n  @Prop() thumbnail: string;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /** Sets focus on the component. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n    if (this.href) {\n      this.el.focus();\n    }\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteNavigationLogoElement;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  componentWillLoad(): void {\n    setUpLoadableComponent(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  private renderIcon(): VNode {\n    /** Icon scale is not variable as the component does not have a scale property */\n    return <calcite-icon class={CSS.icon} flipRtl={this.iconFlipRtl} icon={this.icon} scale=\"l\" />;\n  }\n\n  render(): VNode {\n    const { heading, description, thumbnail } = this;\n    return (\n      <Host>\n        <a class={CSS.anchor} href={this.href} rel={this.rel} target={this.target}>\n          {thumbnail && <img alt={this.label || \"\"} class={CSS.image} src={thumbnail} />}\n          {this.icon && this.renderIcon()}\n          {(heading || description) && (\n            <div class={CSS.container}>\n              {heading && (\n                <span\n                  aria-label={this.heading}\n                  class={{\n                    [CSS.heading]: true,\n                    [CSS.standalone]: !this.description,\n                  }}\n                  key={CSS.heading}\n                >\n                  {heading}\n                </span>\n              )}\n              {description && (\n                <span aria-label={this.description} class={CSS.description} key={CSS.description}>\n                  {description}\n                </span>\n              )}\n            </div>\n          )}\n        </a>\n      </Host>\n    );\n  }\n}\n","export const CSS = {\n  textContainer: \"text-container\",\n  fullName: \"full-name\",\n  username: \"username\",\n  button: \"button\",\n};\n",":host {\n  @apply inline-flex outline-none;\n  & .button {\n    background-color: transparent;\n    border: none;\n    @apply flex\n      m-0\n      items-center\n      justify-center\n      cursor-pointer\n      transition-default\n      focus-base\n      font-sans\n      text-0h;\n    border-block-end: 2px solid transparent;\n  }\n}\n\n:host(:hover) .button,\n:host(:focus) .button {\n  @apply bg-foreground-2;\n}\n\n:host(:focus) .button {\n  @apply focus-inset;\n}\n\n:host(:active) .button {\n  @apply bg-foreground-3 text-color-1;\n}\n\ncalcite-avatar {\n  @apply px-4;\n}\n\ncalcite-avatar ~ .text-container {\n  @apply ps-0;\n}\n\n:host([active]) .button {\n  @apply text-color-1 border-color-brand;\n  --calcite-ui-icon-color: var(--calcite-color-brand);\n}\n\n.text-container {\n  @apply flex\n  flex-col\n  text-start\n  px-4\n  mt-0.5;\n}\n\n.full-name {\n  @apply text-0\n  ms-0\n  text-color-1\n  font-medium;\n}\n\n.username {\n  @apply text-color-2;\n  font-size: var(--calcite-font-size--1);\n}\n\n@include base-component();\n","import { Component, Element, h, Host, Prop, VNode, Method } from \"@stencil/core\";\nimport { CSS } from \"./resources\";\nimport {\n  LoadableComponent,\n  componentFocusable,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\n\n@Component({\n  tag: \"calcite-navigation-user\",\n  styleUrl: \"navigation-user.scss\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class CalciteNavigationUser implements LoadableComponent {\n  //--------------------------------------------------------------------------\n  //\n  //  Public Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /** When `true`, the component is highlighted.*/\n  @Prop({ reflect: true }) active: boolean;\n\n  /** Specifies the full name of the user.*/\n  @Prop() fullName: string;\n\n  /** Describes the appearance of the avatar. If no label is provided, context will not be provided to assistive technologies.*/\n  @Prop() label: string;\n\n  /** When `true`, hides the `fullName` and `username` contents.*/\n  @Prop({ reflect: true }) textDisabled = false;\n\n  /** Specifies the `src` to an image (remember to add a token if the user is private).*/\n  @Prop() thumbnail: string;\n\n  /** Specifies the unique id of the user.*/\n  @Prop() userId: string;\n\n  /** Specifies the username of the user.*/\n  @Prop() username: string;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /** Sets focus on the component. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n    this.el.focus();\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteNavigationUserElement;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  componentWillLoad(): void {\n    setUpLoadableComponent(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  render(): VNode {\n    return (\n      <Host>\n        <button aria-label={this.label} class={CSS.button}>\n          <calcite-avatar\n            full-name={this.fullName}\n            label={this.label}\n            thumbnail={this.thumbnail}\n            user-id={this.userId}\n            username={this.username}\n          />\n          {(this.fullName || this.username) && !this.textDisabled && (\n            <div class={CSS.textContainer}>\n              {this.fullName && (\n                <span class={CSS.fullName} key={CSS.fullName}>\n                  {this.fullName}\n                </span>\n              )}\n              {this.username && (\n                <span class={CSS.username} key={CSS.username}>\n                  {this.username}\n                </span>\n              )}\n            </div>\n          )}\n        </button>\n      </Host>\n    );\n  }\n}\n"],"mappings":";;;;;6MAAO,MAAMA,EAAM,CACjBC,UAAW,YACXC,iBAAkB,oBAClBC,YAAa,eACbC,KAAM,OACNC,QAAS,UACTC,UAAW,YACXC,SAAU,YAGL,MAAMC,EAAQ,CACnBC,KAAM,OACNC,KAAM,OACNC,SAAU,WACVC,iBAAkB,oBAClBC,aAAc,gBACdC,WAAY,cACZC,cAAe,iBACfC,aAAc,uBACdC,YAAa,uBAGR,MAAMC,EAAQ,CACnBC,UAAW,aCvBb,MAAMC,EAAgB,suD,MCsCTC,EAAiB,M,sGAuFpBC,KAAAC,mBAAqB,KAC3BD,KAAKE,8BAA8BC,MAAM,EAGnCH,KAAAI,qBAAwBC,IAC9B,GAAIL,KAAKM,iBAAkB,CACzBN,KAAKO,oBAAsBC,EAA6BH,E,GAIpDL,KAAAS,qBAAwBJ,IAC9B,GAAIL,KAAKM,iBAAkB,CACzBN,KAAKU,oBAAsBF,EAA6BH,E,GAIpDL,KAAAW,6BAAgCN,IACtC,GAAIL,KAAKM,iBAAkB,CACzBN,KAAKY,mCAAqCJ,EAA6BH,E,GAInEL,KAAAa,2BAA8BR,IACpC,GAAIL,KAAKM,iBAAkB,CACzBN,KAAKc,iCAAmCN,EAA6BH,E,GAIjEL,KAAAe,8BAAiCV,IACvC,GAAIL,KAAKM,iBAAkB,CACzBN,KAAKgB,oCAAsCR,EAA6BH,E,GAIpEL,KAAAiB,0BAA6BZ,IACnCL,KAAKkB,yBAA2BV,EAA6BH,EAAM,EAG7DL,KAAAmB,yBAA4Bd,IAClCL,KAAKoB,wBAA0BZ,EAA6BH,EAAM,EAG5DL,KAAAqB,2BAA8BhB,IACpC,GAAIL,KAAKM,iBAAkB,CACzBN,KAAKsB,gCAAkCd,EAA6BH,GACpE,GAAIL,KAAKsB,gCAAiC,CACxCtB,KAAKV,iBAAmB,K,IAKtBU,KAAAuB,yBAA4BlB,IAClC,GAAIL,KAAKM,iBAAkB,CACzBN,KAAKwB,uBAAyBhB,EAA6BH,E,8CA7HnB,M,+XA+C5C,cAAMoB,SACEC,EAAmB1B,MACzB,OAAOA,KAAK2B,oBAAoBF,U,CASlC,iBAAAG,GACEC,EAAuB7B,K,CAGzB,gBAAA8B,GACEC,EAAmB/B,K,CAkEb,cAAAM,GACN,OAAON,KAAKgC,GAAGC,OAAS/C,EAAMQ,cAAgBM,KAAKgC,GAAGC,OAAS/C,EAAMS,W,CASvE,gBAAAuC,GACE,OACEC,EAAA,QAAMC,KAAMlD,EAAMI,iBAAkB+C,aAAcrC,KAAKqB,4BACpDrB,KAAKV,kBACJ6C,EAAA,kBACEG,KAAM1C,EAAMC,UACZ0C,QAASvC,KAAKC,mBACduC,KAAMxC,KAAKyC,MAEXC,IAAMV,GAAkChC,KAAK2B,mBAAqBK,I,CAO5E,MAAAW,GACE,MAAMC,EACJ5C,KAAKU,qBACLV,KAAKO,qBACLP,KAAKsB,iCACLtB,KAAKgB,qCACLhB,KAAKc,kCACLd,KAAKY,oCACLZ,KAAKV,iBACP,MAAMuD,EAAW7C,KAAKgC,GAAGC,KACzB,OACEE,EAACW,EAAI,KACHX,EAAA,OACEY,MAAO,CACL,CAACrE,EAAIC,WAAY,KACjB,CAACD,EAAIM,WAAY6D,IAAa3D,EAAMQ,aACpC,CAAChB,EAAIO,UAAW4D,IAAa3D,EAAMS,YACnC,CAACjB,EAAIK,SAAU6D,IAGjBT,EAAA,OAAKY,MAAO,CAAE,CAACrE,EAAII,OAAQkB,KAAKwB,uBAAwB,CAACtC,EAAMG,UAAW,OACxE8C,EAAA,QAAMC,KAAMlD,EAAMG,SAAUgD,aAAcrC,KAAKuB,4BAEjDY,EAAA,OACEY,MAAO,CAAE,CAACrE,EAAIE,kBAAmB,KAAM,CAACF,EAAIG,aAAcmB,KAAKwB,yBAE9DxB,KAAKkC,mBACNC,EAAA,OAAKY,MAAO,CAAE,CAACrE,EAAII,OAAQkB,KAAKU,oBAAqB,CAACxB,EAAMC,MAAO,OACjEgD,EAAA,QAAMC,KAAMlD,EAAMC,KAAMkD,aAAcrC,KAAKS,wBAE7C0B,EAAA,QAAMC,KAAMlD,EAAMK,aAAc8C,aAAcrC,KAAKW,+BACnDwB,EAAA,QAAMC,KAAMlD,EAAMO,cAAe4C,aAAcrC,KAAKe,gCACpDoB,EAAA,QAAMC,KAAMlD,EAAMM,WAAY6C,aAAcrC,KAAKa,6BACjDsB,EAAA,OAAKY,MAAO,CAAE,CAACrE,EAAII,OAAQkB,KAAKO,oBAAqB,CAACrB,EAAME,MAAO,OACjE+C,EAAA,QAAMC,KAAMlD,EAAME,KAAMiD,aAAcrC,KAAKI,0BAKjD+B,EAACa,EAAQ,KACPb,EAAA,QAAMC,KAAMlD,EAAMQ,aAAc2C,aAAcrC,KAAKiB,4BACnDkB,EAAA,QAAMC,KAAMlD,EAAMS,YAAa0C,aAAcrC,KAAKmB,4B,qCCzPrD,MAAMzC,EAAM,CACjBC,UAAW,YACXsE,QAAS,UACTC,YAAa,cACbC,OAAQ,SACRC,MAAO,QACPC,WAAY,aACZf,KAAM,QCPR,MAAMgB,EAAoB,84D,MCgBbC,EAAqB,M,wGAiBO,M,yIAoCvC,cAAM9B,SACEC,EAAmB1B,MACzB,GAAIA,KAAKwD,KAAM,CACbxD,KAAKgC,GAAGyB,O,EAkBZ,iBAAA7B,GACEC,EAAuB7B,K,CAGzB,gBAAA8B,GACEC,EAAmB/B,K,CASb,UAAA0D,GAEN,OAAOvB,EAAA,gBAAcY,MAAOrE,EAAI4D,KAAMqB,QAAS3D,KAAK4D,YAAatB,KAAMtC,KAAKsC,KAAMuB,MAAM,K,CAG1F,MAAAlB,GACE,MAAMM,QAAEA,EAAOC,YAAEA,EAAWY,UAAEA,GAAc9D,KAC5C,OACEmC,EAACW,EAAI,KACHX,EAAA,KAAGY,MAAOrE,EAAIyE,OAAQK,KAAMxD,KAAKwD,KAAMO,IAAK/D,KAAK+D,IAAKC,OAAQhE,KAAKgE,QAChEF,GAAa3B,EAAA,OAAK8B,IAAKjE,KAAKyC,OAAS,GAAIM,MAAOrE,EAAI0E,MAAOc,IAAKJ,IAChE9D,KAAKsC,MAAQtC,KAAK0D,cACjBT,GAAWC,IACXf,EAAA,OAAKY,MAAOrE,EAAIC,WACbsE,GACCd,EAAA,qBACcnC,KAAKiD,QACjBF,MAAO,CACL,CAACrE,EAAIuE,SAAU,KACf,CAACvE,EAAI2E,aAAcrD,KAAKkD,aAE1BiB,IAAKzF,EAAIuE,SAERA,GAGJC,GACCf,EAAA,qBAAkBnC,KAAKkD,YAAaH,MAAOrE,EAAIwE,YAAaiB,IAAKzF,EAAIwE,aAClEA,K,6ECpIZ,MAAMxE,EAAM,CACjB0F,cAAe,iBACfC,SAAU,YACVC,SAAU,WACVC,OAAQ,UCJV,MAAMC,EAAoB,upD,MCgBbC,EAAqB,M,8GAiBQ,M,uEAmBxC,cAAMhD,SACEC,EAAmB1B,MACzBA,KAAKgC,GAAGyB,O,CAiBV,iBAAA7B,GACEC,EAAuB7B,K,CAGzB,gBAAA8B,GACEC,EAAmB/B,K,CASrB,MAAA2C,GACE,OACER,EAACW,EAAI,KACHX,EAAA,uBAAoBnC,KAAKyC,MAAOM,MAAOrE,EAAI6F,QACzCpC,EAAA,8BACanC,KAAKqE,SAChB5B,MAAOzC,KAAKyC,MACZqB,UAAW9D,KAAK8D,UAAS,UAChB9D,KAAK0E,OACdJ,SAAUtE,KAAKsE,YAEftE,KAAKqE,UAAYrE,KAAKsE,YAActE,KAAK2E,cACzCxC,EAAA,OAAKY,MAAOrE,EAAI0F,eACbpE,KAAKqE,UACJlC,EAAA,QAAMY,MAAOrE,EAAI2F,SAAUF,IAAKzF,EAAI2F,UACjCrE,KAAKqE,UAGTrE,KAAKsE,UACJnC,EAAA,QAAMY,MAAOrE,EAAI4F,SAAUH,IAAKzF,EAAI4F,UACjCtE,KAAKsE,Y"}

package/dist/calcite/p-346ca4fd.js

@@ -1,7 +0,0 @@
-/*!
- * 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.6.0-next.1
- */
-import{d as _}from"./p-f728da23.js";import"./p-e538ca60.js";import"./p-9835ce5c.js";import"./p-49af9f12.js";import"./p-57cde6a5.js";import"./p-0a3f1f3c.js";import"./p-e90bd66d.js";import"./p-96dbe795.js";import"./p-2eb03310.js";import"./p-090ea3a3.js";import"./p-500a3e5a.js";import"./p-2d2e0315.js";import"./p-9bb36dfb.js";import"./p-1f3a1793.js";import"./p-3ef30c84.js";import"./p-70570a66.js";import"./p-f6cdf87d.js";import"./p-e702d7ff.js";import"./p-8aa5ebbc.js";var r="января_февраля_марта_апреля_мая_июня_июля_августа_сентября_октября_ноября_декабря".split("_");var t="январь_февраль_март_апрель_май_июнь_июль_август_сентябрь_октябрь_ноябрь_декабрь".split("_");var e="янв._февр._мар._апр._мая_июня_июля_авг._сент._окт._нояб._дек.".split("_");var m="янв._февр._март_апр._май_июнь_июль_авг._сент._окт._нояб._дек.".split("_");var p=/D[oD]?(\[[^[\]]*\]|\s)+MMMM?/;function i(_,r){var t=_.split("_");return r%10===1&&r%100!==11?t[0]:r%10>=2&&r%10<=4&&(r%100<10||r%100>=20)?t[1]:t[2]}function a(_,r,t){var e={mm:r?"минута_минуты_минут":"минуту_минуты_минут",hh:"час_часа_часов",dd:"день_дня_дней",MM:"месяц_месяца_месяцев",yy:"год_года_лет"};if(t==="m"){return r?"минута":"минуту"}return _+" "+i(e[t],+_)}var s=function _(e,m){if(p.test(m)){return r[e.month()]}return t[e.month()]};s.s=t;s.f=r;var o=function _(r,t){if(p.test(t)){return e[r.month()]}return m[r.month()]};o.s=m;o.f=e;var n={name:"ru",weekdays:"воскресенье_понедельник_вторник_среда_четверг_пятница_суббота".split("_"),weekdaysShort:"вск_пнд_втр_срд_чтв_птн_сбт".split("_"),weekdaysMin:"вс_пн_вт_ср_чт_пт_сб".split("_"),months:s,monthsShort:o,weekStart:1,yearStart:4,formats:{LT:"H:mm",LTS:"H:mm:ss",L:"DD.MM.YYYY",LL:"D MMMM YYYY г.",LLL:"D MMMM YYYY г., H:mm",LLLL:"dddd, D MMMM YYYY г., H:mm"},relativeTime:{future:"через %s",past:"%s назад",s:"несколько секунд",m:a,mm:a,h:"час",hh:a,d:"день",dd:a,M:"месяц",MM:a,y:"год",yy:a},ordinal:function _(r){return r},meridiem:function _(r){if(r<4){return"ночи"}else if(r<12){return"утра"}else if(r<17){return"дня"}return"вечера"}};_.locale(n,null,true);export default n;
-//# sourceMappingURL=p-346ca4fd.js.map