@esri/calcite-components 2.4.1-next.0 → 2.5.0-next.0

package/dist/calcite/p-829de772.entry.js

@@ -0,0 +1,7 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v2.5.0-next.0
+ */
+import{r as t,c as n,h as e,F as i,H as o,g as a}from"./p-aa4a7aa0.js";import{b as s}from"./p-2a0f60c9.js";import{c as r,s as c,a as l}from"./p-705f04ba.js";import"./p-2b05e96c.js";import"./p-b4352ddb.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;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-829de772.entry.js.map

package/dist/calcite/p-829de772.entry.js.map

@@ -0,0 +1 @@
+{"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  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":"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"}

package/dist/calcite/p-83ced345.entry.js

@@ -0,0 +1,7 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v2.5.0-next.0
+ */
+import{r as e,c as t,h as s,g as i}from"./p-aa4a7aa0.js";import{t as a}from"./p-2a0f60c9.js";import{s as n,a as o,c as l}from"./p-705f04ba.js";import{c as r,d as c}from"./p-9e925631.js";import{c as d,s as h,d as u,u as f}from"./p-3c675720.js";import{c as p,u as b,d as g}from"./p-45af6cec.js";import"./p-2b05e96c.js";import"./p-b4352ddb.js";import"./p-5bdc1461.js";import"./p-8d22af5c.js";import"./p-0b4fc200.js";const m={handle:"handle",handleSelected:"handle--selected"};const v={drag:"drag"};const x={itemLabel:"{itemLabel}",position:"{position}",total:"{total}"};const y=":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}.handle{display:flex;align-items:center;justify-content:center;align-self:stretch;border-style:none;background-color:transparent;outline-color:transparent;color:var(--calcite-color-border-input);padding-block:0.75rem;padding-inline:0.25rem;line-height:0}.handle calcite-icon{color:inherit}:host(:not([disabled])) .handle{cursor:move}:host(:not([disabled])) .handle:hover{background-color:var(--calcite-color-foreground-2);color:var(--calcite-color-text-1)}:host(:not([disabled])) .handle:focus{color:var(--calcite-color-text-1);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(:not([disabled])) .handle--selected{background-color:var(--calcite-color-foreground-3);color:var(--calcite-color-text-1)}: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 C=class{constructor(s){e(this,s);this.calciteHandleChange=t(this,"calciteHandleChange",6);this.calciteHandleNudge=t(this,"calciteHandleNudge",6);this.calciteInternalAssistiveTextChange=t(this,"calciteInternalAssistiveTextChange",6);this.handleKeyDown=e=>{if(this.disabled){return}switch(e.key){case" ":this.selected=!this.selected;this.calciteHandleChange.emit();e.preventDefault();break;case"ArrowUp":if(!this.selected){return}e.preventDefault();this.calciteHandleNudge.emit({direction:"up"});break;case"ArrowDown":if(!this.selected){return}e.preventDefault();this.calciteHandleNudge.emit({direction:"down"});break}};this.handleBlur=()=>{if(this.blurUnselectDisabled||this.disabled){return}if(this.selected){this.selected=false;this.calciteHandleChange.emit()}};this.selected=false;this.disabled=false;this.dragHandle=undefined;this.messages=undefined;this.setPosition=undefined;this.setSize=undefined;this.label=undefined;this.blurUnselectDisabled=false;this.messageOverrides=undefined;this.effectiveLocale=undefined;this.defaultMessages=undefined}handleAriaTextChange(){const e=this.getAriaText("live");if(e){this.calciteInternalAssistiveTextChange.emit({message:e})}}onMessagesChange(){}connectedCallback(){p(this);d(this);r(this)}async componentWillLoad(){n(this);await h(this)}componentDidLoad(){o(this)}componentDidRender(){b(this)}disconnectedCallback(){g(this);u(this);c(this)}effectiveLocaleChange(){f(this,this.effectiveLocale)}async setFocus(){await l(this);this.handleButton?.focus()}getTooltip(){const{label:e,messages:t}=this;if(!t){return""}if(!e){return t.dragHandleUntitled}return t.dragHandle.replace(x.itemLabel,e)}getAriaText(e){const{setPosition:t,setSize:s,label:i,messages:a,selected:n}=this;if(!a||!i||typeof s!=="number"||typeof t!=="number"){return null}const o=e==="label"?n?a.dragHandleChange:a.dragHandleIdle:n?a.dragHandleActive:a.dragHandleCommit;const l=o.replace(x.position,t.toString());const r=l.replace(x.itemLabel,i);return r.replace(x.total,s.toString())}render(){return s("span",{"aria-disabled":this.disabled?a(this.disabled):null,"aria-label":this.disabled?null:this.getAriaText("label"),"aria-pressed":this.disabled?null:a(this.selected),class:{[m.handle]:true,[m.handleSelected]:!this.disabled&&this.selected},onBlur:this.handleBlur,onKeyDown:this.handleKeyDown,role:"button",tabIndex:this.disabled?null:0,title:this.getTooltip(),ref:e=>{this.handleButton=e}},s("calcite-icon",{icon:v.drag,scale:"s"}))}static get assetsDirs(){return["assets"]}get el(){return i(this)}static get watchers(){return{messages:["handleAriaTextChange"],label:["handleAriaTextChange"],selected:["handleAriaTextChange"],setPosition:["handleAriaTextChange"],setSize:["handleAriaTextChange"],messageOverrides:["onMessagesChange"],effectiveLocale:["effectiveLocaleChange"]}}};C.style=y;export{C as calcite_handle};
+//# sourceMappingURL=p-83ced345.entry.js.map

package/dist/calcite/p-83ced345.entry.js.map

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

package/dist/calcite/p-842e64a5.entry.js

@@ -0,0 +1,7 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v2.5.0-next.0
+ */
+import{h as t,r as i,c as e,H as s,g as n}from"./p-aa4a7aa0.js";import{f as o}from"./p-cc3e3eb3.js";import{z as c,B as a,C as l,i as r,t as h,e as d}from"./p-2a0f60c9.js";import{d as p,f as u,c as b,r as m,a as f,F as g}from"./p-fb46e1b7.js";import{s as x,c as v,a as y,d as w,H as C}from"./p-237e7376.js";import{g as k}from"./p-2b05e96c.js";import{c as I,u as z,d as $,I as E}from"./p-45af6cec.js";import{c as H,d as S,g as A}from"./p-f501737a.js";import{b as D,c as j,s as O,a as M}from"./p-705f04ba.js";import{c as P,d as F}from"./p-9e925631.js";import{c as L}from"./p-8d22af5c.js";import{o as B}from"./p-2a7b59b3.js";import{c as T,s as R,d as W,u as V}from"./p-3c675720.js";import{g as G}from"./p-f4650a58.js";import{V as X}from"./p-8a08539c.js";import{d as _}from"./p-c00b8868.js";import{c as U,d as Y}from"./p-b77f3a77.js";import"./p-b4352ddb.js";import"./p-0b4fc200.js";import"./p-5bdc1461.js";const K="CALCITE-COMBOBOX-ITEM";const N="CALCITE-COMBOBOX-ITEM-GROUP";const q=`${K}, ${N}`;const J={chipInvisible:"chip--invisible",selectionDisplayFit:"selection-display-fit",selectionDisplaySingle:"selection-display-single",listContainer:"list-container"};function Q(t){const i=t.parentElement?.closest(q);const e=i?.parentElement?.closest(q);return[i,e].filter((t=>t))}function Z(t){return t.ancestors?.filter((t=>t.nodeName==="CALCITE-COMBOBOX-ITEM"))||[]}function tt(t){return c(t.querySelectorAll("calcite-combobox-item"))}function it(t){const i=c(t.querySelectorAll("calcite-combobox-item"));return i.filter((t=>t.selected)).length>0}function et(t){const i=document.evaluate("ancestor::calcite-combobox-item | ancestor::calcite-combobox-item-group",t,null,XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,null);return i.snapshotLength}function st(t){return t.includes("single")}const nt={button:"x-button"};function ot({disabled:i,key:e,label:s,onClick:n,ref:o,scale:c}){return t("button",{"aria-label":s,class:nt.button,disabled:i,key:e,onClick:n,tabIndex:-1,type:"button",ref:o},t("calcite-icon",{icon:"x",scale:G(c)}))}const ct="48px";const at=":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:block}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([scale=s]) .x-button{inline-size:1rem;block-size:1rem}:host([scale=m]) .x-button{inline-size:1.5rem;block-size:1.5rem}:host([scale=l]) .x-button{inline-size:2rem;block-size:2rem}.x-button{margin:0px;display:flex;cursor:pointer;appearance:none;align-content:center;align-items:center;justify-content:center;align-self:center;border-width:2px;background-color:transparent;color:var(--calcite-color-text-3);outline-color:transparent;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;border-radius:50%;border-color:transparent;background-color:var(--calcite-color-foreground-2)}.x-button:active,.x-button:hover{color:var(--calcite-color-text-1);background-color:var(--calcite-color-foreground-3)}.x-button:active{border-style:solid;border-color:var(--calcite-color-brand)}.x-button calcite-icon{color:inherit}:host([scale=s]){font-size:var(--calcite-font-size--2);--calcite-combobox-item-spacing-unit-l:0.5rem;--calcite-combobox-item-spacing-unit-s:0.25rem;--calcite-combobox-input-height:1rem;--calcite-internal-combobox-input-margin-block:calc(0.25rem - 1px)}:host([scale=s]) .x-button{margin-inline:0.5rem}:host([scale=m]){font-size:var(--calcite-font-size--1);--calcite-combobox-item-spacing-unit-l:0.75rem;--calcite-combobox-item-spacing-unit-s:0.5rem;--calcite-combobox-input-height:1rem;--calcite-internal-combobox-input-margin-block:calc(0.5rem - 1px)}:host([scale=m]) .x-button{margin-inline-end:0.75rem}:host([scale=l]){font-size:var(--calcite-font-size-0);--calcite-combobox-item-spacing-unit-l:1rem;--calcite-combobox-item-spacing-unit-s:0.75rem;--calcite-combobox-input-height:1.5rem;--calcite-internal-combobox-input-margin-block:calc(0.625rem - 1px)}:host([scale=l]) .x-button{margin-inline-end:1rem}.wrapper{display:flex;border-width:1px;border-style:solid;border-color:var(--calcite-color-border-input);background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-1);outline-color:transparent;padding-block:calc(var(--calcite-combobox-item-spacing-unit-s) / 4);padding-inline:var(--calcite-combobox-item-spacing-unit-l)}:host(:focus-within) .wrapper,.wrapper--active{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([status=invalid]) .wrapper{border-color:var(--calcite-color-status-danger)}:host([status=invalid]:focus-within) .wrapper{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          )}.wrapper--single{padding-block:0;padding-inline:var(--calcite-combobox-item-spacing-unit-l);cursor:pointer;flex-wrap:nowrap}.grid-input{position:relative;display:flex;flex-grow:1;flex-wrap:wrap;align-items:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0px;gap:var(--calcite-combobox-item-spacing-unit-s)}.grid-input.selection-display-fit,.grid-input.selection-display-single{flex-wrap:nowrap;overflow:hidden}.input{flex-grow:1;appearance:none;text-overflow:ellipsis;border-style:none;background-color:transparent;padding:0px;font-family:inherit;color:var(--calcite-color-text-1);font-size:inherit;block-size:var(--calcite-combobox-input-height);line-height:var(--calcite-combobox-input-height);inline-size:100%;margin-block-end:var(--calcite-combobox-item-spacing-unit-s);min-inline-size:4.8125rem}.input:focus{outline:2px solid transparent;outline-offset:2px}.input:placeholder-shown{text-overflow:ellipsis}.input--transparent{opacity:0}.input--single{padding:0px;margin-block:var(--calcite-internal-combobox-input-margin-block)}.wrapper--active .input-single{cursor:text}.input--hidden{pointer-events:none;inline-size:0px;min-inline-size:0px;opacity:0}.input--icon{padding-block:0;padding-inline:var(--calcite-combobox-item-spacing-unit-l)}.input-wrap{display:flex;flex-grow:1;align-items:center}.input-wrap--single{flex:1 1 0%;overflow:hidden}.label{pointer-events:none;display:flex;max-inline-size:100%;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0px;font-weight:var(--calcite-font-weight-normal);block-size:var(--calcite-combobox-input-height);line-height:var(--calcite-combobox-input-height)}.label--icon{padding-inline:var(--calcite-combobox-item-spacing-unit-l)}.icon-end,.icon-start{display:flex;cursor:pointer;align-items:center}.icon-end{flex:none}.floating-ui-container{--calcite-floating-ui-z-index:var(--calcite-z-index-dropdown);display:block;position:absolute;z-index:var(--calcite-floating-ui-z-index);visibility:hidden}.floating-ui-container .calcite-floating-ui-anim{position:relative;transition:var(--calcite-floating-ui-transition);transition-property:transform, visibility, opacity;opacity:0;box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);z-index:var(--calcite-z-index);border-radius:0.25rem}.floating-ui-container[data-placement^=bottom] .calcite-floating-ui-anim{transform:translateY(-5px)}.floating-ui-container[data-placement^=top] .calcite-floating-ui-anim{transform:translateY(5px)}.floating-ui-container[data-placement^=left] .calcite-floating-ui-anim{transform:translateX(5px)}.floating-ui-container[data-placement^=right] .calcite-floating-ui-anim{transform:translateX(-5px)}.floating-ui-container[data-placement] .calcite-floating-ui-anim--active{opacity:1;transform:translate(0)}.floating-ui-container--active{visibility:visible}@media (forced-colors: active){.wrapper,.floating-ui-container--active{border:1px solid canvasText}}.screen-readers-only{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}.list-container{max-block-size:45vh;overflow-y:auto;background-color:var(--calcite-color-foreground-1);inline-size:var(--calcite-dropdown-width)}.list{margin:0px;display:block;padding:0px}.list--hide{block-size:0px;overflow:hidden}calcite-chip{--calcite-animation-timing:0}.chip{margin-block:calc(var(--calcite-combobox-item-spacing-unit-s) / 4);max-inline-size:100%}.chip--active{background-color:var(--calcite-color-foreground-3)}.chip--invisible{visibility:hidden;position:absolute}.item{display:block}.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([hidden]){display:none}[hidden]{display:none}::slotted(calcite-combobox-item-group:not(:first-child)){padding-block-start:var(--calcite-combobox-item-spacing-unit-l)}";const lt=t=>t.tagName===N;const rt="combobox-item-";const ht="combobox-chip-";const dt="combobox-label-";const pt="combobox-listbox-";const ut="combobox-input-";const bt=class{constructor(t){i(this,t);this.calciteComboboxChange=e(this,"calciteComboboxChange",6);this.calciteComboboxFilterChange=e(this,"calciteComboboxFilterChange",6);this.calciteComboboxChipClose=e(this,"calciteComboboxChipClose",6);this.calciteComboboxBeforeClose=e(this,"calciteComboboxBeforeClose",6);this.calciteComboboxClose=e(this,"calciteComboboxClose",6);this.calciteComboboxBeforeOpen=e(this,"calciteComboboxBeforeOpen",6);this.calciteComboboxOpen=e(this,"calciteComboboxOpen",6);this.placement=p;this.internalValueChangeFlag=false;this.textInput=null;this.mutationObserver=L("mutation",(()=>this.updateItems()));this.resizeObserver=L("resize",(()=>{this.setMaxScrollerHeight();this.refreshSelectionDisplay()}));this.guid=k();this.inputHeight=0;this.ignoreSelectedEventsFlag=false;this.openTransitionProp="opacity";this.setFilteredPlacements=()=>{const{el:t,flipPlacements:i}=this;this.filteredFlipPlacements=i?u(i,t):null};this.getValue=()=>{const t=this.selectedItems.map((t=>t?.value?.toString()));return t?.length?t.length>1?t:t[0]:""};this.onLabelClick=()=>{this.setFocus()};this.keyDownHandler=t=>{const{key:i}=t;switch(i){case"Tab":this.activeChipIndex=-1;this.activeItemIndex=-1;if(this.allowCustomValues&&this.text){this.addCustomChip(this.text,true);t.preventDefault()}else if(this.open){this.open=false;t.preventDefault()}else if(!this.allowCustomValues&&this.text){this.clearInputValue();this.filterItems("");this.updateActiveItemIndex(-1)}break;case"ArrowLeft":this.previousChip();t.preventDefault();break;case"ArrowRight":this.nextChip();t.preventDefault();break;case"ArrowUp":t.preventDefault();if(this.open){this.shiftActiveItemIndex(-1)}if(!this.comboboxInViewport()){this.el.scrollIntoView()}break;case"ArrowDown":t.preventDefault();if(this.open){this.shiftActiveItemIndex(1)}else{this.open=true;this.ensureRecentSelectedItemIsActive()}if(!this.comboboxInViewport()){this.el.scrollIntoView()}break;case" ":if(!this.textInput.value){if(!this.open){this.open=true;this.shiftActiveItemIndex(1)}t.preventDefault()}break;case"Home":if(!this.open){return}t.preventDefault();this.updateActiveItemIndex(0);this.scrollToActiveItem();if(!this.comboboxInViewport()){this.el.scrollIntoView()}break;case"End":if(!this.open){return}t.preventDefault();this.updateActiveItemIndex(this.filteredItems.length-1);this.scrollToActiveItem();if(!this.comboboxInViewport()){this.el.scrollIntoView()}break;case"Escape":if(!this.clearDisabled&&!this.open){this.clearValue()}this.open=false;t.preventDefault();break;case"Enter":if(this.activeItemIndex>-1){this.toggleSelection(this.filteredItems[this.activeItemIndex]);t.preventDefault()}else if(this.activeChipIndex>-1){this.removeActiveChip();t.preventDefault()}else if(this.allowCustomValues&&this.text){this.addCustomChip(this.text,true);t.preventDefault()}else if(!t.defaultPrevented){if(x(this)){t.preventDefault()}}break;case"Delete":case"Backspace":const i=this.selectionDisplay==="single"||this.selectionDisplay==="fit"&&this.selectedHiddenChipsCount>0;if(i){return}if(this.activeChipIndex>-1){t.preventDefault();this.removeActiveChip()}else if(!this.text&&this.isMulti()){t.preventDefault();this.removeLastChip()}break}};this.toggleCloseEnd=()=>{this.open=false;this.el.removeEventListener("calciteComboboxClose",this.toggleCloseEnd)};this.toggleOpenEnd=()=>{this.open=false;this.el.removeEventListener("calciteComboboxOpen",this.toggleOpenEnd)};this.setMaxScrollerHeight=async()=>{const{listContainerEl:t,open:i,referenceEl:e}=this;if(!t||!i){return}await this.reposition(true);const s=this.getMaxScrollerHeight();t.style.maxHeight=s>0?`${s}px`:"";t.style.minWidth=`${e.clientWidth}px`;await this.reposition(true)};this.calciteChipCloseHandler=t=>{this.open=false;const i=this.items.find((i=>i===t));if(i){this.toggleSelection(i,false)}this.calciteComboboxChipClose.emit()};this.clickHandler=t=>{const i=t.composedPath();if(i.some((t=>t.tagName==="CALCITE-CHIP"))){this.open=false;t.preventDefault();return}if(i.some((t=>t.classList?.contains(nt.button)))){this.clearValue();t.preventDefault();return}this.open=!this.open;this.ensureRecentSelectedItemIsActive()};this.refreshSelectionDisplay=async()=>{await D(this);if(st(this.selectionMode)){return}if(!this.textInput){return}const{allSelectedIndicatorChipEl:t,chipContainerEl:i,selectionDisplay:e,placeholder:s,selectedIndicatorChipEl:n,textInput:o}=this;const c=parseInt(getComputedStyle(i).gap.replace("px",""));const r=a(i);const{fontSize:h,fontFamily:d}=getComputedStyle(o);const p=l(s,`${h} ${d}`);const u=(p||parseInt(ct))+c;const b=a(t);const m=a(n);const f=Math.max(b,m);this.setCompactSelectionDisplay({chipContainerElGap:c,chipContainerElWidth:r,inputWidth:u,largestSelectedIndicatorChipWidth:f});if(e==="fit"){const t=Array.from(this.el.shadowRoot.querySelectorAll("calcite-chip")).filter((t=>t.closable));const i=Math.round(r-((this.selectedHiddenChipsCount>0?m:0)+c+u+c));this.refreshChipDisplay({availableHorizontalChipElSpace:i,chipContainerElGap:c,chipEls:t});this.setVisibleAndHiddenChips(t)}};this.setFloatingEl=t=>{this.floatingEl=t;b(this,this.referenceEl,this.floatingEl)};this.setContainerEl=t=>{this.resizeObserver.observe(t);this.listContainerEl=t;this.transitionEl=t};this.setChipContainerEl=t=>{this.resizeObserver.observe(t);this.chipContainerEl=t};this.setReferenceEl=t=>{this.referenceEl=t;b(this,this.referenceEl,this.floatingEl)};this.setAllSelectedIndicatorChipEl=t=>{this.allSelectedIndicatorChipEl=t};this.setSelectedIndicatorChipEl=t=>{this.selectedIndicatorChipEl=t};this.inputHandler=t=>{const i=t.target.value;this.text=i;this.filterItems(i);if(i){this.activeChipIndex=-1}};this.filterItems=(()=>{const t=(t,i)=>t&&i.some((({label:i,value:e})=>lt(t)?i===t.label:e===t.value&&i===t.textLabel));return _((i=>{const e=o(this.data,i);const s=this.getItemsAndGroups();s.forEach((i=>{const s=!t(i,e);i.hidden=s;const[n,o]=i.ancestors;if(t(n,e)||t(o,e)){i.hidden=false}if(!s){i.ancestors.forEach((t=>t.hidden=false))}}));this.filteredItems=this.getFilteredItems();this.calciteComboboxFilterChange.emit()}),100)})();this.internalComboboxChangeEvent=()=>{this.calciteComboboxChange.emit()};this.emitComboboxChange=_(this.internalComboboxChangeEvent,0);this.getSelectedItems=()=>{if(!this.isMulti()){const t=this.items.find((({selected:t})=>t));return t?[t]:[]}return this.items.filter((t=>t.selected&&(this.selectionMode!=="ancestors"||!it(t)))).sort(((t,i)=>{const e=this.selectedItems.indexOf(t);const s=this.selectedItems.indexOf(i);if(e>-1&&s>-1){return e-s}return s-e}))};this.updateItems=()=>{this.items=this.getItems();this.groupItems=this.getGroupItems();this.data=this.getData();this.selectedItems=this.getSelectedItems();this.filteredItems=this.getFilteredItems();this.needsIcon=this.getNeedsIcon();this.items.forEach((t=>{t.selectionMode=this.selectionMode;t.scale=this.scale}));if(!this.allowCustomValues){this.setMaxScrollerHeight()}this.groupItems.forEach(((t,i,e)=>{if(i===0){t.afterEmptyGroup=false}const s=e[i+1];if(s){s.afterEmptyGroup=t.children.length===0}}))};this.scrollToActiveItem=()=>{const t=this.filteredItems[this.activeItemIndex];if(!t){return}const i=this.calculateSingleItemHeight(t);const{offsetHeight:e,scrollTop:s}=this.listContainerEl;if(e+s<t.offsetTop+i){this.listContainerEl.scrollTop=t.offsetTop-e+i}else if(t.offsetTop<s){this.listContainerEl.scrollTop=t.offsetTop}};this.comboboxFocusHandler=()=>{if(this.disabled){return}this.textInput?.focus()};this.clearDisabled=false;this.selectionDisplay="all";this.open=false;this.disabled=false;this.form=undefined;this.label=undefined;this.placeholder=undefined;this.placeholderIcon=undefined;this.placeholderIconFlipRtl=false;this.maxItems=0;this.validationMessage=undefined;this.validationIcon=undefined;this.name=undefined;this.allowCustomValues=undefined;this.overlayPositioning="absolute";this.required=false;this.selectionMode="multiple";this.scale="m";this.status="idle";this.value=null;this.flipPlacements=undefined;this.messages=undefined;this.messageOverrides=undefined;this.selectedItems=[];this.filteredItems=[];this.items=[];this.groupItems=[];this.needsIcon=undefined;this.activeItemIndex=-1;this.activeChipIndex=-1;this.activeDescendant="";this.compactSelectionDisplay=false;this.selectedHiddenChipsCount=0;this.selectedVisibleChipsCount=0;this.text="";this.effectiveLocale=undefined;this.defaultMessages=undefined}openHandler(){B(this);if(this.disabled){this.open=false;return}this.setMaxScrollerHeight()}handleDisabledChange(t){if(!t){this.open=false}}maxItemsHandler(){this.setMaxScrollerHeight()}overlayPositioningHandler(){this.reposition(true)}handlePropsChange(){this.updateItems()}valueHandler(t){if(!this.internalValueChangeFlag){const i=this.getItems();if(Array.isArray(t)){i.forEach((i=>i.selected=t.includes(i.value)))}else if(t){i.forEach((i=>i.selected=t===i.value))}else{i.forEach((t=>t.selected=false))}this.updateItems()}}onMessagesChange(){}flipPlacementsHandler(){this.setFilteredPlacements();this.reposition(true)}selectedItemsHandler(){this.internalValueChangeFlag=true;this.value=this.getValue();this.internalValueChangeFlag=false}documentClickHandler(t){if(this.disabled||!r(t)){return}const i=t.composedPath();if(i.includes(this.el)||i.includes(this.referenceEl)){return}if(!this.allowCustomValues&&this.textInput.value){this.clearInputValue();this.filterItems("");this.updateActiveItemIndex(-1)}if(this.allowCustomValues&&this.text.trim().length){this.addCustomChip(this.text)}this.open=false}calciteComboboxItemChangeHandler(t){if(this.ignoreSelectedEventsFlag){return}const i=t.target;const e=this.filteredItems.indexOf(i);this.updateActiveItemIndex(e);this.toggleSelection(i,i.selected)}async reposition(t=false){const{floatingEl:i,referenceEl:e,placement:s,overlayPositioning:n,filteredFlipPlacements:o}=this;return m(this,{floatingEl:i,referenceEl:e,overlayPositioning:n,placement:s,flipPlacements:o,type:"menu"},t)}async setFocus(){await j(this);this.textInput?.focus();this.activeChipIndex=-1;this.activeItemIndex=-1}connectedCallback(){I(this);P(this);T(this);H(this);v(this);this.internalValueChangeFlag=true;this.value=this.getValue();this.internalValueChangeFlag=false;this.mutationObserver?.observe(this.el,{childList:true,subtree:true});this.updateItems();this.setFilteredPlacements();this.reposition(true);if(this.open){this.openHandler();B(this)}b(this,this.referenceEl,this.floatingEl)}async componentWillLoad(){O(this);this.updateItems();await R(this)}componentDidLoad(){y(this,this.getValue());this.reposition(true);M(this)}componentDidRender(){if(this.el.offsetHeight!==this.inputHeight){this.reposition(true);this.inputHeight=this.el.offsetHeight}z(this)}componentDidUpdate(){this.refreshSelectionDisplay()}disconnectedCallback(){this.mutationObserver?.disconnect();this.resizeObserver?.disconnect();$(this);S(this);w(this);f(this,this.referenceEl,this.floatingEl);F(this);W(this)}textHandler(){this.updateActiveItemIndex(-1)}effectiveLocaleChange(){V(this,this.effectiveLocale)}clearValue(){this.ignoreSelectedEventsFlag=true;this.items.forEach((t=>t.selected=false));this.ignoreSelectedEventsFlag=false;this.selectedItems=[];this.emitComboboxChange();this.open=false;this.updateActiveItemIndex(-1);this.resetText();this.filterItems("");this.setFocus()}clearInputValue(){this.textInput.value="";this.text=""}comboboxInViewport(){const t=this.el.getBoundingClientRect();return t.top>=0&&t.left>=0&&t.right<=(window.innerWidth||document.documentElement.clientWidth)&&t.bottom<=(window.innerHeight||document.documentElement.clientHeight)}onBeforeOpen(){this.scrollToActiveItem();this.calciteComboboxBeforeOpen.emit()}onOpen(){this.calciteComboboxOpen.emit()}onBeforeClose(){this.calciteComboboxBeforeClose.emit()}onClose(){this.calciteComboboxClose.emit()}ensureRecentSelectedItemIsActive(){const{selectedItems:t}=this;const i=t.length===0?0:this.items.indexOf(t[t.length-1]);this.updateActiveItemIndex(i)}hideChip(t){t.classList.add(J.chipInvisible)}showChip(t){t.classList.remove(J.chipInvisible)}refreshChipDisplay({chipEls:t,availableHorizontalChipElSpace:i,chipContainerElGap:e}){t.forEach((t=>{if(!t.selected){this.hideChip(t)}else{const s=a(t);if(s&&s<i){i-=s+e;this.showChip(t);return}}this.hideChip(t)}))}setCompactSelectionDisplay({chipContainerElGap:t,chipContainerElWidth:i,inputWidth:e,largestSelectedIndicatorChipWidth:s}){const n=Math.round(s+t+e);if(!this.maxCompactBreakpoint||this.maxCompactBreakpoint<n){this.maxCompactBreakpoint=n}this.compactSelectionDisplay=i<this.maxCompactBreakpoint}setVisibleAndHiddenChips(t){let i=0;t.forEach((t=>{if(t.selected&&!t.classList.contains(J.chipInvisible)){i++}}));if(i!==this.selectedVisibleChipsCount){this.selectedVisibleChipsCount=i}const e=this.getSelectedItems().length-i;if(e!==this.selectedHiddenChipsCount){this.selectedHiddenChipsCount=e}}getMaxScrollerHeight(){const t=this.getItemsAndGroups().filter((t=>!t.hidden));const{maxItems:i}=this;let e=0;let s=0;if(t.length>i){t.forEach((t=>{if(e<i&&i>0){const i=this.calculateSingleItemHeight(t);if(i>0){s+=i;e++}}}))}return s}calculateSingleItemHeight(t){if(!t){return}let i=t.offsetHeight;const e=Array.from(t.querySelectorAll(q));e.map((t=>t?.offsetHeight)).forEach((t=>{i-=t}));return i}getItemsAndGroups(){return[...this.groupItems,...this.items]}toggleSelection(t,i=!t.selected){if(!t||this.selectionMode==="single-persist"&&t.selected&&t.value===this.value){return}if(this.isMulti()){t.selected=i;this.updateAncestors(t);this.selectedItems=this.getSelectedItems();this.emitComboboxChange();this.resetText();this.filterItems("")}else{this.ignoreSelectedEventsFlag=true;this.items.forEach((e=>e.selected=e===t?i:false));this.ignoreSelectedEventsFlag=false;this.selectedItems=this.getSelectedItems();this.emitComboboxChange();if(this.textInput){this.textInput.value=t.textLabel}this.open=false;this.updateActiveItemIndex(-1);this.resetText();this.filterItems("")}}updateAncestors(t){if(this.selectionMode!=="ancestors"){return}const i=Z(t);const e=tt(t);if(t.selected){i.forEach((t=>{t.selected=true}))}else{e.forEach((t=>t.selected=false));[...i].forEach((t=>{if(!it(t)){t.selected=false}}))}}getFilteredItems(){return this.items.filter((t=>!t.hidden))}getData(){return this.items.map((t=>({filterDisabled:t.filterDisabled,value:t.value,label:t.textLabel})))}getNeedsIcon(){return st(this.selectionMode)&&this.items.some((t=>t.icon))}resetText(){if(this.textInput){this.textInput.value=""}this.text=""}getItems(){const t=Array.from(this.el.querySelectorAll(K));return t.filter((t=>!t.disabled))}getGroupItems(){return Array.from(this.el.querySelectorAll(N))}addCustomChip(t,i){const e=this.items.find((i=>i.textLabel===t));if(e){this.toggleSelection(e,true)}else{if(!this.isMulti()){this.toggleSelection(this.selectedItems[this.selectedItems.length-1],false)}const e=document.createElement("calcite-combobox-item");e.value=t;e.textLabel=t;e.selected=true;this.el.appendChild(e);this.resetText();if(i){this.setFocus()}this.updateItems();this.filterItems("");this.emitComboboxChange()}}removeActiveChip(){this.toggleSelection(this.selectedItems[this.activeChipIndex],false);this.setFocus()}removeLastChip(){this.toggleSelection(this.selectedItems[this.selectedItems.length-1],false);this.setFocus()}previousChip(){if(this.text){return}const t=this.selectedItems.length-1;const i=this.activeChipIndex;this.activeChipIndex=i===-1?t:Math.max(i-1,0);this.updateActiveItemIndex(-1);this.focusChip()}nextChip(){if(this.text||this.activeChipIndex===-1){return}const t=this.selectedItems.length-1;const i=this.activeChipIndex+1;if(i>t){this.activeChipIndex=-1;this.setFocus()}else{this.activeChipIndex=i;this.focusChip()}this.updateActiveItemIndex(-1)}focusChip(){const t=this.selectedItems[this.activeChipIndex]?.guid;const i=t?this.referenceEl.querySelector(`#${ht}${t}`):null;i?.setFocus()}shiftActiveItemIndex(t){const{length:i}=this.filteredItems;const e=(this.activeItemIndex+i+t)%i;this.updateActiveItemIndex(e);this.scrollToActiveItem()}updateActiveItemIndex(t){this.activeItemIndex=t;let i=null;this.filteredItems.forEach(((e,s)=>{if(s===t){e.active=true;i=`${rt}${e.guid}`}else{e.active=false}}));this.activeDescendant=i;if(this.activeItemIndex>-1){this.activeChipIndex=-1}}isAllSelected(){return this.getItems().length===this.getSelectedItems().length}isMulti(){return!st(this.selectionMode)}renderChips(){const{activeChipIndex:i,scale:e,selectionMode:s,messages:n}=this;return this.selectedItems.map(((o,c)=>{const a={chip:true,"chip--active":i===c};const l=[...Z(o)].reverse();const r=[...l,o].map((t=>t.textLabel));const h=s!=="ancestors"?o.textLabel:r.join(" / ");return t("calcite-chip",{class:a,closable:true,icon:o.icon,iconFlipRtl:o.iconFlipRtl,id:o.guid?`${ht}${o.guid}`:null,key:o.textLabel,messageOverrides:{dismissLabel:n.removeTag},onCalciteChipClose:()=>this.calciteChipCloseHandler(o),scale:e,selected:o.selected,title:h,value:o.value},h)}))}renderAllSelectedIndicatorChip(){const{compactSelectionDisplay:i,scale:e,selectedVisibleChipsCount:s,setAllSelectedIndicatorChipEl:n}=this;const o=this.messages.allSelected;return t("calcite-chip",{class:{chip:true,[J.chipInvisible]:!(this.isAllSelected()&&!s&&!i)},scale:e,title:o,value:"",ref:n},o)}renderAllSelectedIndicatorChipCompact(){const{compactSelectionDisplay:i,scale:e,selectedVisibleChipsCount:s}=this;const n=this.messages.all||"All";return t("calcite-chip",{class:{chip:true,[J.chipInvisible]:!(this.isAllSelected()&&!s&&i)},scale:e,title:n,value:""},n)}renderSelectedIndicatorChip(){const{compactSelectionDisplay:i,selectionDisplay:e,getSelectedItems:s,scale:n,selectedHiddenChipsCount:o,selectedVisibleChipsCount:c,setSelectedIndicatorChipEl:a}=this;let l;let r;if(i){l=true}else{if(e==="single"){const t=s().length;if(this.isAllSelected()){l=true}else if(t>0){l=false}else{l=true}r=`${t} ${this.messages.selected}`}else if(e==="fit"){l=!!(this.isAllSelected()&&c===0||o===0);r=c>0?`+${o}`:`${o} ${this.messages.selected}`}}return t("calcite-chip",{class:{chip:true,[J.chipInvisible]:l},scale:n,title:r,value:"",ref:a},r)}renderSelectedIndicatorChipCompact(){const{compactSelectionDisplay:i,selectionDisplay:e,getSelectedItems:s,scale:n,selectedHiddenChipsCount:o}=this;let c;let a;if(i){const t=s().length;if(this.isAllSelected()){c=true}else if(e==="fit"){c=!(o>0);a=`${o||0}`}else if(e==="single"){c=!(t>0);a=`${t}`}}else{c=true}return t("calcite-chip",{class:{chip:true,[J.chipInvisible]:c},scale:n,title:a,value:""},a)}get showingInlineIcon(){const{placeholderIcon:t,selectionMode:i,selectedItems:e,open:s}=this;const n=e[0];const o=n?.icon;const c=st(i);return!s&&n?!!o&&c:!!t&&(!n||c)}renderInput(){const{guid:i,disabled:e,placeholder:s,selectionMode:n,selectedItems:o,open:c}=this;const a=st(n);const l=o[0];const r=!c&&a&&!!l;return t("span",{class:{"input-wrap":true,"input-wrap--single":a}},r&&t("span",{class:{label:true,"label--icon":!!l?.icon},key:"label"},l.textLabel),t("input",{"aria-activedescendant":this.activeDescendant,"aria-autocomplete":"list","aria-controls":`${pt}${i}`,"aria-label":A(this),class:{input:true,"input--single":true,"input--transparent":this.activeChipIndex>-1,"input--hidden":r,"input--icon":this.showingInlineIcon&&!!this.placeholderIcon},disabled:e,id:`${ut}${i}`,key:"input",onFocus:this.comboboxFocusHandler,onInput:this.inputHandler,placeholder:s,type:"text",ref:t=>this.textInput=t}))}renderListBoxOptions(){return this.filteredItems.map((i=>t("li",{"aria-selected":h(i.selected),id:i.guid?`${rt}${i.guid}`:null,role:"option",tabindex:"-1"},i.textLabel)))}renderFloatingUIContainer(){const{setFloatingEl:i,setContainerEl:e,open:s}=this;const n={[J.listContainer]:true,[g.animation]:true,[g.animationActive]:s};return t("div",{"aria-hidden":"true",class:{"floating-ui-container":true,"floating-ui-container--active":s},ref:i},t("div",{class:n,ref:e},t("ul",{class:{list:true,"list--hide":!s}},t("slot",null))))}renderSelectedOrPlaceholderIcon(){const{selectedItems:i,placeholderIcon:e,placeholderIconFlipRtl:s}=this;const n=i[0];const o=n?.icon;return this.showingInlineIcon&&t("span",{class:"icon-start",key:"selected-placeholder-icon"},t("calcite-icon",{class:"selected-icon",flipRtl:this.open&&n?n.iconFlipRtl:s,icon:!this.open&&n?o:e,scale:G(this.scale)}))}renderChevronIcon(){const{open:i}=this;return t("span",{class:"icon-end",key:"chevron"},t("calcite-icon",{icon:i?"chevron-up":"chevron-down",scale:G(this.scale)}))}render(){const{selectionDisplay:i,guid:e,label:n,open:o}=this;const c=st(this.selectionMode);const a=i==="all";const l=i==="single";const r=!c&&i==="fit";const d=!this.clearDisabled&&this.value?.length>0;return t(s,{onClick:this.comboboxFocusHandler},t(E,{disabled:this.disabled},t("div",{"aria-autocomplete":"list","aria-controls":`${pt}${e}`,"aria-expanded":h(o),"aria-haspopup":"listbox","aria-label":A(this),"aria-live":"polite","aria-owns":`${pt}${e}`,class:{wrapper:true,"wrapper--single":c||!this.selectedItems.length,"wrapper--active":o},onClick:this.clickHandler,onKeyDown:this.keyDownHandler,role:"combobox",ref:this.setReferenceEl},this.renderSelectedOrPlaceholderIcon(),t("div",{class:{"grid-input":true,[J.selectionDisplayFit]:r,[J.selectionDisplaySingle]:l},key:"grid",ref:this.setChipContainerEl},!c&&!l&&this.renderChips(),!c&&!a&&[this.renderSelectedIndicatorChip(),this.renderSelectedIndicatorChipCompact(),this.renderAllSelectedIndicatorChip(),this.renderAllSelectedIndicatorChipCompact()],t("label",{class:"screen-readers-only",htmlFor:`${ut}${e}`,id:`${dt}${e}`},n),this.renderInput()),d?t(ot,{disabled:this.disabled,key:"close-button",label:this.messages.clear,scale:this.scale}):null,this.renderChevronIcon()),t("ul",{"aria-labelledby":`${dt}${e}`,"aria-multiselectable":"true",class:"screen-readers-only",id:`${pt}${e}`,role:"listbox",tabIndex:-1},this.renderListBoxOptions()),this.renderFloatingUIContainer(),t(C,{component:this}),this.validationMessage?t(X,{icon:this.validationIcon,message:this.validationMessage,scale:this.scale,status:this.status}):null))}static get assetsDirs(){return["assets"]}get el(){return n(this)}static get watchers(){return{open:["openHandler"],disabled:["handleDisabledChange"],maxItems:["maxItemsHandler"],overlayPositioning:["overlayPositioningHandler"],selectionMode:["handlePropsChange"],scale:["handlePropsChange"],value:["valueHandler"],messageOverrides:["onMessagesChange"],flipPlacements:["flipPlacementsHandler"],selectedItems:["selectedItemsHandler"],text:["textHandler"],effectiveLocale:["effectiveLocaleChange"]}}};bt.style=at;const mt={icon:"icon",iconActive:"icon--active",iconIndent:"icon--indent",custom:"icon--custom",dot:"icon--dot",single:"label--single",label:"label",active:"label--active",selected:"label--selected",title:"title",textContainer:"text-container"};const ft='@charset "UTF-8";: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([hidden]){display:none}[hidden]{display:none}.scale--s{font-size:var(--calcite-font-size--2);line-height:1rem;--calcite-combobox-item-spacing-unit-l:0.5rem;--calcite-combobox-item-spacing-unit-s:0.25rem;--calcite-combobox-item-spacing-indent:0.5rem;--calcite-combobox-item-selector-icon-size:1rem}.scale--m{font-size:var(--calcite-font-size--1);line-height:1rem;--calcite-combobox-item-spacing-unit-l:0.75rem;--calcite-combobox-item-spacing-unit-s:0.5rem;--calcite-combobox-item-spacing-indent:0.75rem;--calcite-combobox-item-selector-icon-size:1rem}.scale--l{font-size:var(--calcite-font-size-0);line-height:1.25rem;--calcite-combobox-item-spacing-unit-l:1rem;--calcite-combobox-item-spacing-unit-s:0.625rem;--calcite-combobox-item-spacing-indent:1rem;--calcite-combobox-item-selector-icon-size:1.5rem}.container{--calcite-combobox-item-indent-value:calc(\n    var(--calcite-combobox-item-spacing-indent) * var(--calcite-combobox-item-spacing-indent-multiplier)\n  )}:host(:focus){--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host,ul{margin:0px;display:flex;flex-direction:column;padding:0px}:host(:focus),ul:focus{outline:2px solid transparent;outline-offset:2px}.label{position:relative;box-sizing:border-box;display:flex;inline-size:100%;min-inline-size:100%;cursor:pointer;align-items:center;color:var(--calcite-color-text-3);text-decoration-line:none;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);outline-color:transparent;word-wrap:break-word;word-break:break-word;padding-block:var(--calcite-combobox-item-spacing-unit-s);padding-inline:var(--calcite-combobox-item-spacing-unit-l)}:host([disabled]) .label{cursor:default}.label--selected{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-1)}.label--active{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          )}.label:hover,.label:active{background-color:var(--calcite-color-foreground-2);color:var(--calcite-color-text-1);text-decoration-line:none;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.title{padding-block:0;padding-inline:var(--calcite-combobox-item-spacing-unit-l)}.icon{display:inline-flex;opacity:0;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);color:var(--calcite-color-border-1)}.icon--indent{padding-inline-start:var(--calcite-combobox-item-indent-value)}.icon--custom{margin-block-start:-1px;padding-inline-start:var(--calcite-combobox-item-spacing-unit-l);color:var(--calcite-color-text-3)}.icon--active{color:var(--calcite-color-text-1)}.icon--dot{display:flex;justify-content:center;min-inline-size:var(--calcite-combobox-item-selector-icon-size)}.icon--dot:before{text-align:start;content:"•"}.label--active .icon{opacity:1}.label--selected .icon{opacity:1;color:var(--calcite-color-brand)}:host(:hover[disabled]) .icon{opacity:1}';const gt=class{constructor(t){i(this,t);this.calciteComboboxItemChange=e(this,"calciteComboboxItemChange",6);this.itemClickHandler=()=>{this.toggleSelected()};this.disabled=false;this.selected=false;this.active=false;this.ancestors=undefined;this.guid=k();this.icon=undefined;this.iconFlipRtl=false;this.textLabel=undefined;this.value=undefined;this.filterDisabled=undefined;this.selectionMode="multiple";this.scale="m"}selectedWatchHandler(){this.calciteComboboxItemChange.emit()}connectedCallback(){this.ancestors=Q(this.el);U(this);I(this)}disconnectedCallback(){Y(this);$(this)}componentDidRender(){z(this)}toggleSelected(){const t=this.selectionMode==="single-persist";if(this.disabled||t&&this.selected){return}this.selected=!this.selected}renderIcon(i){return this.icon?t("calcite-icon",{class:{[mt.custom]:!!this.icon,[mt.iconActive]:this.icon&&this.selected,[mt.iconIndent]:true},flipRtl:this.iconFlipRtl,icon:this.icon||i,key:"icon",scale:G(this.scale)}):null}renderSelectIndicator(i,e){return i?t("span",{class:{[mt.icon]:true,[mt.dot]:true,[mt.iconIndent]:true}}):t("calcite-icon",{class:{[mt.icon]:true,[mt.iconActive]:this.selected,[mt.iconIndent]:true},flipRtl:this.iconFlipRtl,icon:e,key:"indicator",scale:G(this.scale)})}renderChildren(){if(d(this.el)){return t("ul",{key:"default-slot-container"},t("slot",null))}return null}render(){const{disabled:i}=this;const e=st(this.selectionMode);const n=e&&!i;const o=e?"dot":"check";const c=i?"":o;const a={[mt.label]:true,[mt.selected]:this.selected,[mt.active]:this.active,[mt.single]:e};const l=et(this.el);return t(s,{"aria-hidden":"true"},t(E,{disabled:i},t("div",{class:`container scale--${this.scale}`,style:{"--calcite-combobox-item-spacing-indent-multiplier":`${l}`}},t("li",{class:a,id:this.guid,onClick:this.itemClickHandler},this.renderSelectIndicator(n,c),this.renderIcon(c),t("span",{class:"title"},this.textLabel)),this.renderChildren())))}get el(){return n(this)}static get watchers(){return{selected:["selectedWatchHandler"]}}};gt.style=ft;const xt={list:"list",label:"label",title:"title"};const vt=".scale--s{font-size:var(--calcite-font-size--2);line-height:1rem;--calcite-combobox-item-spacing-unit-l:0.5rem;--calcite-combobox-item-spacing-unit-s:0.25rem;--calcite-combobox-item-spacing-indent:0.5rem}.scale--m{font-size:var(--calcite-font-size--1);line-height:1rem;--calcite-combobox-item-spacing-unit-l:0.75rem;--calcite-combobox-item-spacing-unit-s:0.5rem;--calcite-combobox-item-spacing-indent:0.75rem}.scale--l{font-size:var(--calcite-font-size-0);line-height:1.25rem;--calcite-combobox-item-spacing-unit-l:1rem;--calcite-combobox-item-spacing-unit-s:0.75rem;--calcite-combobox-item-spacing-indent:1rem}:host,.list{margin:0px;display:flex;flex-direction:column;padding:0px}:host(:focus),.list:focus{outline:2px solid transparent;outline-offset:2px}.label{box-sizing:border-box;display:flex;inline-size:100%;min-inline-size:0px;max-inline-size:100%;color:var(--calcite-color-text-3)}.title{--calcite-combobox-item-indent-value:calc(\n    var(--calcite-combobox-item-spacing-indent) * var(--calcite-combobox-item-spacing-indent-multiplier)\n  );border:0 solid;display:block;flex:1 1 0%;border-block-end-width:1px;font-weight:var(--calcite-font-weight-bold);color:var(--calcite-color-text-2);word-wrap:break-word;word-break:break-word;border-block-end-color:var(--calcite-color-border-3);padding-block:var(--calcite-combobox-item-spacing-unit-l);padding-inline:var(--calcite-combobox-item-spacing-unit-s);margin-inline-start:var(--calcite-combobox-item-indent-value)}::slotted(calcite-combobox-item-group:not([after-empty-group])){padding-block-start:var(--calcite-combobox-item-spacing-unit-l)}:host([hidden]){display:none}[hidden]{display:none}";const yt=class{constructor(t){i(this,t);this.guid=k();this.afterEmptyGroup=false;this.ancestors=undefined;this.label=undefined;this.scale="m"}connectedCallback(){this.ancestors=Q(this.el)}render(){const{el:i,scale:e}=this;const s=et(i);return t("ul",{"aria-labelledby":this.guid,class:{[xt.list]:true,[`scale--${e}`]:true},role:"group"},t("li",{class:{[xt.label]:true},id:this.guid,role:"presentation",style:{"--calcite-combobox-item-spacing-indent-multiplier":`${s}`}},t("span",{class:xt.title},this.label)),t("slot",null))}get el(){return n(this)}};yt.style=vt;export{bt as calcite_combobox,gt as calcite_combobox_item,yt as calcite_combobox_item_group};
+//# sourceMappingURL=p-842e64a5.entry.js.map