@esri/calcite-components 2.8.0-next.1 → 2.8.0-next.2

package/dist/calcite/p-7fea6a18.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.8.0-next.2
+ */
+import{j as n,q as t,a as e}from"./p-28164ad0.js";import{c}from"./p-69f33aa2.js";const o="calciteInternalLabelClick";const s="calciteInternalLabelConnected";const r="calciteInternalLabelDisconnected";const i="calcite-label";const a=new WeakMap;const u=new WeakMap;const f=new WeakMap;const l=new WeakMap;const m=new Set;const d=n=>{const{id:c}=n;const o=c&&t(n,{selector:`${i}[for="${c}"]`});if(o){return o}const s=e(n,i);if(!s||p(s,n)){return null}return s};function p(n,t){let e;const c="custom-element-ancestor-check";const o=c=>{c.stopImmediatePropagation();const o=c.composedPath();e=o.slice(o.indexOf(t),o.indexOf(n))};n.addEventListener(c,o,{once:true});t.dispatchEvent(new CustomEvent(c,{composed:true,bubbles:true}));n.removeEventListener(c,o);const s=e.filter((e=>e!==t&&e!==n)).filter((n=>n.tagName?.includes("-")));return s.length>0}function b(n){if(!n){return}const t=d(n.el);if(u.has(t)&&t===n.labelEl||!t&&m.has(n)){return}const e=j.bind(n);if(t){n.labelEl=t;const c=a.get(t)||[];c.push(n);a.set(t,c.sort(k));if(!u.has(n.labelEl)){u.set(n.labelEl,M);n.labelEl.addEventListener(o,M)}m.delete(n);document.removeEventListener(s,f.get(n));l.set(n,e);document.addEventListener(r,e)}else if(!m.has(n)){e();document.removeEventListener(r,l.get(n))}}function h(n){if(!n){return}m.delete(n);document.removeEventListener(s,f.get(n));document.removeEventListener(r,l.get(n));f.delete(n);l.delete(n);if(!n.labelEl){return}const t=a.get(n.labelEl);if(t.length===1){n.labelEl.removeEventListener(o,u.get(n.labelEl));u.delete(n.labelEl)}a.set(n.labelEl,t.filter((t=>t!==n)).sort(k));n.labelEl=null}function k(t,e){return n(t.el,e.el)?-1:1}function w(n){return n.label||n.labelEl?.textContent?.trim()||""}function M(n){const t=n.detail.sourceEvent.target;const e=a.get(this);const c=e.find((n=>n.el===t));const o=e.includes(c);if(o){return}const s=e[0];if(s.disabled){return}s.onLabelClick(n)}function W(){if(m.has(this)){b(this)}}function j(){m.add(this);const n=f.get(this)||W.bind(this);f.set(this,n);document.addEventListener(s,n)}async function C(n){await c(n);const t=a.has(n);if(t){return}const e=n.ownerDocument?.getElementById(n.for);if(!e){return}requestAnimationFrame((()=>{for(const n of m){if(n.el===e){b(n);break}}}))}export{C as a,r as b,b as c,h as d,w as g,s as l};
+//# sourceMappingURL=p-7fea6a18.js.map

package/dist/calcite/p-7fea6a18.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["labelClickEvent","labelConnectedEvent","labelDisconnectedEvent","labelTagName","labelToLabelables","WeakMap","onLabelClickMap","onLabelConnectedMap","onLabelDisconnectedMap","unlabeledComponents","Set","findLabelForComponent","componentEl","id","forLabel","queryElementRoots","selector","parentLabel","closestElementCrossShadowBoundary","hasAncestorCustomElements","label","traversedElements","customElementAncestorCheckEventType","listener","event","stopImmediatePropagation","composedPath","slice","indexOf","addEventListener","once","dispatchEvent","CustomEvent","composed","bubbles","removeEventListener","ancestorCustomElements","filter","el","tagName","includes","length","connectLabel","component","labelEl","has","boundOnLabelDisconnected","onLabelDisconnected","bind","labelables","get","push","set","sort","sortByDOMOrder","onLabelClick","delete","document","disconnectLabel","labelable","a","b","isBefore","getLabelText","textContent","trim","labelClickTarget","detail","sourceEvent","target","this","clickedLabelable","find","labelableChildClicked","firstLabelable","disabled","onLabelConnected","add","boundOnLabelConnected","async","associateExplicitLabelToUnlabeledComponent","componentOnReady","alreadyLabeled","forComponentEl","ownerDocument","getElementById","for","requestAnimationFrame"],"sources":["src/utils/label.ts"],"sourcesContent":["import { closestElementCrossShadowBoundary, isBefore, queryElementRoots } from \"./dom\";\nimport { componentOnReady } from \"./component\";\n\nexport interface LabelableComponent {\n  /**\n   * When true, disabled prevents interaction.\n   */\n  disabled: boolean;\n\n  /**\n   * The host element.\n   */\n  readonly el: HTMLElement;\n\n  /**\n   * Text label.\n   */\n  label?: string;\n\n  /**\n   * The label this component is associated with.\n   */\n  labelEl: HTMLCalciteLabelElement;\n\n  /**\n   * Hook for components to provide custom label click behavior.\n   */\n  onLabelClick: (event: CustomEvent<any>) => void;\n}\n\n/**\n * Exported for testing purposes only\n *\n * @internal\n */\nexport const labelClickEvent = \"calciteInternalLabelClick\";\nexport const labelConnectedEvent = \"calciteInternalLabelConnected\";\nexport const labelDisconnectedEvent = \"calciteInternalLabelDisconnected\";\n\nconst labelTagName = \"calcite-label\";\nconst labelToLabelables = new WeakMap<HTMLCalciteLabelElement, LabelableComponent[]>();\nconst onLabelClickMap = new WeakMap<HTMLCalciteLabelElement, typeof onLabelClick>();\nconst onLabelConnectedMap = new WeakMap<LabelableComponent, typeof onLabelConnected>();\nconst onLabelDisconnectedMap = new WeakMap<LabelableComponent, typeof onLabelDisconnected>();\nconst unlabeledComponents = new Set<LabelableComponent>();\n\nconst findLabelForComponent = (componentEl: HTMLElement): HTMLCalciteLabelElement | null => {\n  const { id } = componentEl;\n\n  const forLabel =\n    id && (queryElementRoots(componentEl, { selector: `${labelTagName}[for=\"${id}\"]` }) as HTMLCalciteLabelElement);\n\n  if (forLabel) {\n    return forLabel;\n  }\n\n  const parentLabel = closestElementCrossShadowBoundary<HTMLCalciteLabelElement>(componentEl, labelTagName);\n\n  if (\n    !parentLabel ||\n    // labelable components within other custom elements are not considered labelable\n    hasAncestorCustomElements(parentLabel, componentEl)\n  ) {\n    return null;\n  }\n\n  return parentLabel;\n};\n\nfunction hasAncestorCustomElements(label: HTMLCalciteLabelElement, componentEl: HTMLElement): boolean {\n  let traversedElements: HTMLElement[];\n  const customElementAncestorCheckEventType = \"custom-element-ancestor-check\";\n\n  const listener = (event: CustomEvent) => {\n    event.stopImmediatePropagation();\n    const composedPath = event.composedPath() as HTMLElement[];\n    traversedElements = composedPath.slice(composedPath.indexOf(componentEl), composedPath.indexOf(label));\n  };\n\n  label.addEventListener(customElementAncestorCheckEventType, listener, { once: true });\n\n  componentEl.dispatchEvent(new CustomEvent(customElementAncestorCheckEventType, { composed: true, bubbles: true }));\n  label.removeEventListener(customElementAncestorCheckEventType, listener);\n\n  const ancestorCustomElements = traversedElements\n    .filter((el) => el !== componentEl && el !== label)\n    .filter((el) => el.tagName?.includes(\"-\"));\n\n  return ancestorCustomElements.length > 0;\n}\n\n/**\n * Helper to set up label interactions on connectedCallback.\n *\n * @param component\n */\nexport function connectLabel(component: LabelableComponent): void {\n  if (!component) {\n    return;\n  }\n\n  const labelEl = findLabelForComponent(component.el);\n\n  if (\n    (onLabelClickMap.has(labelEl) && labelEl === component.labelEl) ||\n    (!labelEl && unlabeledComponents.has(component))\n  ) {\n    return;\n  }\n\n  const boundOnLabelDisconnected = onLabelDisconnected.bind(component);\n\n  if (labelEl) {\n    component.labelEl = labelEl;\n\n    const labelables = labelToLabelables.get(labelEl) || [];\n    labelables.push(component);\n    labelToLabelables.set(labelEl, labelables.sort(sortByDOMOrder));\n\n    if (!onLabelClickMap.has(component.labelEl)) {\n      onLabelClickMap.set(component.labelEl, onLabelClick);\n      component.labelEl.addEventListener(labelClickEvent, onLabelClick);\n    }\n\n    unlabeledComponents.delete(component);\n    document.removeEventListener(labelConnectedEvent, onLabelConnectedMap.get(component));\n    onLabelDisconnectedMap.set(component, boundOnLabelDisconnected);\n    document.addEventListener(labelDisconnectedEvent, boundOnLabelDisconnected);\n  } else if (!unlabeledComponents.has(component)) {\n    boundOnLabelDisconnected();\n    document.removeEventListener(labelDisconnectedEvent, onLabelDisconnectedMap.get(component));\n  }\n}\n/**\n * Helper to tear down label interactions on disconnectedCallback on labelable components.\n *\n * @param component\n */\nexport function disconnectLabel(component: LabelableComponent): void {\n  if (!component) {\n    return;\n  }\n\n  unlabeledComponents.delete(component);\n  document.removeEventListener(labelConnectedEvent, onLabelConnectedMap.get(component));\n  document.removeEventListener(labelDisconnectedEvent, onLabelDisconnectedMap.get(component));\n  onLabelConnectedMap.delete(component);\n  onLabelDisconnectedMap.delete(component);\n\n  if (!component.labelEl) {\n    return;\n  }\n\n  const labelables = labelToLabelables.get(component.labelEl);\n\n  if (labelables.length === 1) {\n    component.labelEl.removeEventListener(labelClickEvent, onLabelClickMap.get(component.labelEl));\n    onLabelClickMap.delete(component.labelEl);\n  }\n\n  labelToLabelables.set(\n    component.labelEl,\n    labelables.filter((labelable) => labelable !== component).sort(sortByDOMOrder),\n  );\n\n  component.labelEl = null;\n}\n\nfunction sortByDOMOrder(a: LabelableComponent, b: LabelableComponent): number {\n  return isBefore(a.el, b.el) ? -1 : 1;\n}\n\n/**\n * Helper to get the label text from a component.\n *\n * @param component\n */\nexport function getLabelText(component: LabelableComponent): string {\n  return component.label || component.labelEl?.textContent?.trim() || \"\";\n}\n\nfunction onLabelClick(this: HTMLCalciteLabelElement, event: CustomEvent<{ sourceEvent: MouseEvent }>): void {\n  const labelClickTarget = event.detail.sourceEvent.target as HTMLElement;\n  const labelables = labelToLabelables.get(this);\n  const clickedLabelable = labelables.find((labelable) => labelable.el === labelClickTarget);\n  const labelableChildClicked = labelables.includes(clickedLabelable);\n\n  if (labelableChildClicked) {\n    // no need to forward click as labelable will receive focus\n    return;\n  }\n\n  const firstLabelable = labelables[0];\n\n  if (firstLabelable.disabled) {\n    return;\n  }\n\n  firstLabelable.onLabelClick(event);\n}\n\nfunction onLabelConnected(this: LabelableComponent): void {\n  if (unlabeledComponents.has(this)) {\n    connectLabel(this);\n  }\n}\n\nfunction onLabelDisconnected(this: LabelableComponent): void {\n  unlabeledComponents.add(this);\n  const boundOnLabelConnected = onLabelConnectedMap.get(this) || onLabelConnected.bind(this);\n  onLabelConnectedMap.set(this, boundOnLabelConnected);\n  document.addEventListener(labelConnectedEvent, boundOnLabelConnected);\n}\n\n/**\n * Helper to associate an explicit label (i.e., using `for`) with a labelable component that does not have an associated label.\n *\n * @param label - the label element\n */\nexport async function associateExplicitLabelToUnlabeledComponent(label: HTMLCalciteLabelElement): Promise<void> {\n  await componentOnReady(label);\n\n  const alreadyLabeled = labelToLabelables.has(label);\n\n  if (alreadyLabeled) {\n    return;\n  }\n\n  const forComponentEl = label.ownerDocument?.getElementById(label.for);\n\n  if (!forComponentEl) {\n    return;\n  }\n\n  requestAnimationFrame(() => {\n    for (const labelable of unlabeledComponents) {\n      if (labelable.el === forComponentEl) {\n        connectLabel(labelable);\n        break;\n      }\n    }\n  });\n}\n"],"mappings":"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"}

package/dist/calcite/p-80580021.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.8.0-next.2
+ */
+import{r as e,h as t,g as a}from"./p-2a6032f9.js";import{c as i,u as s,d as c,I as o}from"./p-0fa6ece4.js";import"./p-0278cfca.js";const n={container:"container"};const l=":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{box-sizing:border-box;display:inline-block}:host ::slotted(calcite-tile){margin-block-end:var(--calcite-spacing-px);margin-inline-end:var(--calcite-spacing-px)}.container{display:grid;grid-auto-rows:minmax(auto, 1fr)}:host([scale=s]) .container{grid-template-columns:repeat(auto-fit, minmax(100px, 1fr))}:host([scale=m]) .container{grid-template-columns:repeat(auto-fit, minmax(140px, 1fr))}:host([scale=l]) .container{grid-template-columns:repeat(auto-fit, minmax(160px, 1fr))}:host([layout=vertical]) .container{display:flex;flex-direction:column}: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 r=l;const d=class{constructor(t){e(this,t);this.updateTiles=()=>{this.el.querySelectorAll("calcite-tile").forEach((e=>e.scale=this.scale))};this.disabled=false;this.layout="horizontal";this.scale="m"}scaleWatcher(){this.updateTiles()}connectedCallback(){i(this);this.updateTiles()}componentDidRender(){s(this)}disconnectedCallback(){c(this)}render(){return t(o,{key:"59afa30e3cc14cff7316156fd0fd52ee2ac97fe7",disabled:this.disabled},t("div",{key:"72cae9045be1b2d6310cfba2de6fd1f20e8a961e",class:n.container},t("slot",{key:"3d32bb9a5acee618ab1620fcdf830298bc6b2c87",onSlotchange:this.updateTiles})))}get el(){return a(this)}static get watchers(){return{scale:["scaleWatcher"]}}};d.style=r;export{d as calcite_tile_group};
+//# sourceMappingURL=p-80580021.entry.js.map

package/dist/calcite/p-80b27fe4.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.8.0-next.2
+ */
+import{r as e,h as t,g as s}from"./p-2a6032f9.js";import{i}from"./p-28164ad0.js";import{h as n,i as r}from"./p-f6a613d5.js";import"./p-deb0d3fd.js";import"./p-fe3db953.js";function o(e){let t=0;for(let s=0;s<e.length;s++){t=e.charCodeAt(s)+((t<<5)-t)}let s="#";for(let e=0;e<3;e++){const i=t>>e*8&255;s+=("00"+i.toString(16)).substr(-2)}return s}function a(e){let{r:t,g:s,b:i}=e;t/=255;s/=255;i/=255;const n=Math.max(t,s,i);const r=Math.min(t,s,i);const o=n-r;if(n===r){return 0}let a=(n+r)/2;switch(n){case t:a=(s-i)/o+(s<i?6:0);break;case s:a=(i-t)/o+2;break;case i:a=(t-s)/o+4;break}return Math.round(a*60)}function l(e){return a(n(e))}const c=":host{display:inline-block;overflow:hidden;border-radius:50%}:host([scale=s]){block-size:1.5rem;inline-size:1.5rem;font-size:var(--calcite-font-size--3)}:host([scale=m]){block-size:2rem;inline-size:2rem;font-size:var(--calcite-font-size--2)}:host([scale=l]){block-size:2.75rem;inline-size:2.75rem;font-size:var(--calcite-font-size-0)}.icon{display:flex}.background{display:flex;block-size:100%;inline-size:100%;align-items:center;justify-content:center;border-radius:50%}.initials{font-weight:var(--calcite-font-weight-bold);text-transform:uppercase;color:var(--calcite-color-text-2)}.thumbnail{block-size:100%;inline-size:100%;border-radius:50%}:host([hidden]){display:none}[hidden]{display:none}";const d=c;const u=class{constructor(t){e(this,t);this.scale="m";this.thumbnail=undefined;this.fullName=undefined;this.username=undefined;this.userId=undefined;this.label=undefined;this.thumbnailFailedToLoad=false}render(){return this.determineContent()}determineContent(){if(this.thumbnail&&!this.thumbnailFailedToLoad){return t("img",{alt:this.label||"",class:"thumbnail",onError:()=>this.thumbnailFailedToLoad=true,src:this.thumbnail})}const e=this.generateInitials();const s=this.generateFillColor();return t("span",{"aria-label":this.label||this.fullName,class:"background",role:"figure",style:{backgroundColor:s}},e?t("span",{"aria-hidden":"true",class:"initials"},e):t("calcite-icon",{class:"icon",icon:"user",scale:this.scale}))}generateFillColor(){const{userId:e,username:t,fullName:s,el:n}=this;const a=i(n);const c=e&&`#${e.substr(e.length-6)}`;const d=t||s||"";const u=c&&r(c)?c:o(d);if(!e&&!d||!r(u)){return`var(--calcite-color-foreground-2)`}const f=l(u);const h=a==="dark"?20:90;return`hsl(${f}, 60%, ${h}%)`}generateInitials(){const{fullName:e,username:t}=this;if(e){return e.trim().split(" ").map((e=>e.substring(0,1))).join("")}else if(t){return t.substring(0,2)}return false}get el(){return s(this)}};u.style=d;export{u as calcite_avatar};
+//# sourceMappingURL=p-80b27fe4.entry.js.map

package/dist/calcite/p-80d9a9cf.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.8.0-next.2
+ */
+import{h as e,r as t,c as i,H as s,e as o,g as r}from"./p-2a6032f9.js";import{s as n,k as a}from"./p-28164ad0.js";import{c}from"./p-46680754.js";import{g as l}from"./p-deb0d3fd.js";import{c as h,d as p,n as d}from"./p-a91b3b05.js";import{c as m,s as u,d as b,u as f}from"./p-183f5d27.js";import{c as g,u as y,d as v,I as z}from"./p-0fa6ece4.js";import{s as x,a as k,c as w}from"./p-f45be9ad.js";import"./p-fe3db953.js";import"./p-aba08c28.js";import"./p-0278cfca.js";const I={actionIcon:"action-icon",actionIconStart:"action-icon--start",actionIconEnd:"action-icon--end",actionContainer:"action-container",stepBarContainer:"step-bar-container",singleView:"single-view"};const C={stepBar:"step-bar",stepBarActive:"step-bar--active",stepBarComplete:"step-bar--complete",stepBarDisabled:"step-bar--disabled",stepBarError:"step-bar--error",stepBarInActive:"step-bar--inactive"};const S=({disabled:t,active:i,complete:s,error:o,key:r})=>e("svg",{class:{[C.stepBar]:true},key:r},e("rect",{class:{[C.stepBarActive]:i,[C.stepBarComplete]:s,[C.stepBarDisabled]:t,[C.stepBarError]:o,[C.stepBarInActive]:true},width:"100%",x:"0",y:"0"}));const A=':host([scale=s]){--calcite-internal-stepper-item-spacing-unit-s:0.25rem;--calcite-internal-stepper-action-block-size:2.75rem;--calcite-internal-stepper-action-inline-size:2rem;--calcite-internal-step-bar-gap:0.25rem}:host([scale=m]){--calcite-internal-stepper-item-spacing-unit-s:0.5rem;--calcite-internal-stepper-action-block-size:3.25rem;--calcite-internal-stepper-action-inline-size:2.5rem}:host([scale=l]){--calcite-internal-stepper-item-spacing-unit-s:0.75rem;--calcite-internal-stepper-action-block-size:4rem;--calcite-internal-stepper-action-inline-size:3rem;--calcite-internal-step-bar-gap:0.75rem}:host{display:flex}.container{position:relative;display:flex;inline-size:100%;min-inline-size:-moz-fit-content;min-inline-size:fit-content;flex-direction:row;flex-wrap:wrap;align-items:stretch;justify-content:space-between}:host([layout=vertical]) .container{flex:1 1 auto;flex-direction:column}:host([layout=horizontal]) .container,:host([layout=horizontal-single]) .container{display:grid;grid-template-areas:"items" "content";gap:0.5rem var(--calcite-internal-stepper-item-spacing-unit-s)}:host([layout=horizontal][scale=s]) .container,:host([layout=horizontal-single][scale=s]) .container{gap:0.25rem var(--calcite-internal-stepper-item-spacing-unit-s)}:host([layout=horizontal][scale=l]) .container,:host([layout=horizontal-single][scale=l]) .container{gap:0.75rem var(--calcite-internal-stepper-item-spacing-unit-s)}:host([layout=horizontal]) .container.single-view{display:flex;grid-template-columns:none}.action-icon{position:relative;display:flex;flex-grow:0;block-size:var(--calcite-internal-stepper-action-block-size);inline-size:var(--calcite-internal-stepper-action-inline-size)}.action-container{position:absolute;display:flex;justify-content:space-between;padding-block:0.25rem;inline-size:100%}.step-bar{display:flex;block-size:100%;inline-size:100%}.step-bar-container{position:absolute;display:flex;align-items:flex-start;justify-content:space-between;block-size:0.125rem;inline-size:100%;gap:var(--calcite-internal-step-bar-gap, 0.5rem)}.step-bar--inactive{fill:var(--calcite-color-border-3, #dfdfdf);fill-opacity:1;block-size:100%}.step-bar--active{fill:var(--calcite-color-brand)}.step-bar--complete{fill:var(--calcite-color-brand);fill-opacity:0.5}.step-bar--error{fill:var(--calcite-color-status-danger)}.step-bar--disabled{opacity:0.5}:host([hidden]){display:none}[hidden]{display:none}';const P=A;const j=class{constructor(e){t(this,e);this.calciteStepperItemChange=i(this,"calciteStepperItemChange",6);this.calciteInternalStepperItemChange=i(this,"calciteInternalStepperItemChange",6);this.enabledItems=[];this.itemMap=new Map;this.items=[];this.mutationObserver=c("mutation",(()=>this.updateItems()));this.multipleViewMode=false;this.guid=`calcite-stepper-action-${l()}`;this.handleActionClick=e=>{const t=this.currentActivePosition;const i=e.target;if(i.getAttribute("data-position")==="start"){this.prevStep()}else{this.nextStep()}if(typeof this.currentActivePosition==="number"&&t!==this.currentActivePosition&&!this.items[this.currentActivePosition].disabled){this.calciteStepperItemChange.emit()}};this.setContainerEl=e=>{this.containerEl=e};this.handleDefaultSlotChange=e=>{const t=n(e).filter((e=>e?.tagName==="CALCITE-STEPPER-ITEM"));this.items=t;const i=Array(t.length).fill("1fr").join(" ");this.containerEl.style.gridTemplateAreas=i;this.containerEl.style.gridTemplateColumns=i;this.setStepperItemNumberingSystem()};this.icon=false;this.layout="horizontal";this.numbered=false;this.scale="m";this.messages=undefined;this.numberingSystem=undefined;this.selectedItem=null;this.messageOverrides=undefined;this.defaultMessages=undefined;this.effectiveLocale="";this.currentActivePosition=undefined}handleItemPropChange(){this.updateItems();this.determineActiveStepper()}numberingSystemChange(){this.setStepperItemNumberingSystem()}onMessagesChange(){}connectedCallback(){this.mutationObserver?.observe(this.el,{childList:true});this.updateItems();m(this);h(this)}async componentWillLoad(){await u(this)}componentDidLoad(){if(typeof this.currentActivePosition!=="number"){const e=this.getFirstEnabledStepperPosition();if(e===0){this.currentActivePosition=e}this.calciteInternalStepperItemChange.emit({position:e})}}disconnectedCallback(){b(this);p(this);this.mutationObserver?.disconnect()}render(){return e(s,{key:"cffc7783ef3e566c925acca5bc6f5c15f355479e","aria-label":this.messages.label,role:"region"},e("div",{key:"2baa858291ec3784ff338fec3e66c12d9d942e29",class:{container:true,[I.singleView]:this.layout==="horizontal-single"},ref:this.setContainerEl},this.layout==="horizontal-single"&&e("div",{class:{[I.stepBarContainer]:true}},this.items.map(((t,i)=>e(S,{active:i===this.currentActivePosition,complete:t.complete&&i!==this.currentActivePosition&&!t.error,disabled:t.disabled&&i!==this.currentActivePosition,error:t.error&&i!==this.currentActivePosition,key:i})))),this.layout==="horizontal-single"&&e("div",{class:{[I.actionContainer]:true}},this.renderAction("start"),this.renderAction("end")),e("slot",{key:"abc1f57bf46fed07c55c6ac945d7979958821754",onSlotchange:this.handleDefaultSlotChange})))}calciteInternalStepperItemKeyEvent(e){const t=e.detail.item;const i=e.target;switch(t.key){case"ArrowDown":case"ArrowRight":a(this.enabledItems,i,"next");break;case"ArrowUp":case"ArrowLeft":a(this.enabledItems,i,"previous");break;case"Home":a(this.enabledItems,i,"first");break;case"End":a(this.enabledItems,i,"last");break}e.stopPropagation()}registerItem(e){const t=e.target;const{content:i,position:s}=e.detail;this.itemMap.set(t,{position:s,content:i});this.enabledItems=this.filterItems();e.stopPropagation()}updateItem(e){const{position:t}=e.detail;if(typeof t==="number"){this.currentActivePosition=t;this.selectedItem=e.target}this.calciteInternalStepperItemChange.emit({position:t})}handleUserRequestedStepperItemSelect(){this.calciteStepperItemChange.emit()}async nextStep(){const e=this.getEnabledStepIndex(this.currentActivePosition+1,"next");if(typeof e!=="number"){return}this.updateStep(e)}async prevStep(){const e=this.getEnabledStepIndex(this.currentActivePosition-1,"previous");if(typeof e!=="number"){return}this.updateStep(e)}async goToStep(e){const t=e-1;if(this.currentActivePosition!==t){this.updateStep(t)}}async startStep(){const e=this.getEnabledStepIndex(0,"next");if(typeof e!=="number"){return}this.updateStep(e)}async endStep(){const e=this.getEnabledStepIndex(this.items.length-1,"previous");if(typeof e!=="number"){return}this.updateStep(e)}effectiveLocaleChange(){f(this,this.effectiveLocale)}handlePositionChange(){o((()=>{this.determineActiveStepper()}))}updateItems(){this.el.querySelectorAll("calcite-stepper-item").forEach((e=>{e.icon=this.icon;e.numbered=this.numbered;e.layout=this.layout;e.scale=this.scale}))}determineActiveStepper(){const{items:e}=this;if(e.length<2){return}const{currentActivePosition:t,layout:i}=this;this.multipleViewMode=i!=="horizontal-single";e.forEach(((e,s)=>{e.hidden=i==="horizontal-single"&&s!==(t||0)}))}getEnabledStepIndex(e,t="next"){const{items:i,currentActivePosition:s}=this;let o=e;while(i[o]?.disabled&&this.layout!=="horizontal-single"){o=o+(t==="previous"?-1:1)}return o!==s&&o<i.length&&o>=0?o:null}updateStep(e){this.currentActivePosition=e;this.calciteInternalStepperItemChange.emit({position:e})}filterItems(){return this.items.filter((e=>!e.disabled))}setStepperItemNumberingSystem(){this.items.forEach((e=>{e.numberingSystem=this.numberingSystem}))}renderAction(t){const i=t==="start";const s=i?"chevron-left":"chevron-right";const{currentActivePosition:o,multipleViewMode:r,layout:n}=this;const a=this.items.length;const c=`${this.guid}-${i?"start":"end"}`;return n==="horizontal-single"&&!r?e("calcite-action",{alignment:"center",appearance:"transparent",class:{[I.actionIcon]:true},compact:true,"data-position":t,disabled:o===0&&i||o===a-1&&!i,icon:s,iconFlipRtl:true,id:c,onClick:this.handleActionClick,scale:this.scale,text:i?this.messages.previousStep:this.messages.nextStep}):null}getFirstEnabledStepperPosition(){const e=this.items.findIndex((e=>!e.disabled));if(e>-1){return e}return 0}static get assetsDirs(){return["assets"]}get el(){return r(this)}static get watchers(){return{icon:["handleItemPropChange"],layout:["handleItemPropChange"],numbered:["handleItemPropChange"],scale:["handleItemPropChange"],numberingSystem:["numberingSystemChange"],messageOverrides:["onMessagesChange"],effectiveLocale:["effectiveLocaleChange"],currentActivePosition:["handlePositionChange"]}}};j.style=P;const L={container:"container",stepperItemContent:"stepper-item-content",stepperItemDescription:"stepper-item-description",stepperItemHeader:"stepper-item-header",stepperItemHeading:"stepper-item-heading",stepperItemHeaderText:"stepper-item-header-text",stepperItemNumber:"stepper-item-number",visuallyHidden:"visually-hidden"};const E=":host([layout=horizontal][disabled]) .stepper-item-header,:host([layout=horizontal-single][disabled]) .stepper-item-header,:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([layout=horizontal][disabled]) .stepper-item-header *,:host([layout=horizontal-single][disabled]) .stepper-item-header *,:host([disabled]) *,:host([layout=horizontal][disabled]) .stepper-item-header ::slotted(*),:host([layout=horizontal-single][disabled]) .stepper-item-header ::slotted(*),:host([disabled]) ::slotted(*){pointer-events:none}:host([scale=s]){--calcite-stepper-item-spacing-unit-s:0.25rem;--calcite-stepper-item-spacing-unit-m:0.75rem;--calcite-stepper-item-spacing-unit-l:1rem;--calcite-internal-stepper-action-inline-size:2rem;font-size:var(--calcite-font-size--1);line-height:1rem;margin-inline-end:0.25rem}:host([scale=s]) .stepper-item-description{font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=m]){--calcite-stepper-item-spacing-unit-s:0.5rem;--calcite-stepper-item-spacing-unit-m:1rem;--calcite-stepper-item-spacing-unit-l:1.25rem;--calcite-internal-stepper-action-inline-size:2.5rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;margin-inline-end:0.5rem}:host([scale=m]) .stepper-item-description{font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=l]){--calcite-stepper-item-spacing-unit-s:0.75rem;--calcite-stepper-item-spacing-unit-m:1.25rem;--calcite-stepper-item-spacing-unit-l:1.5rem;--calcite-internal-stepper-action-inline-size:3rem;font-size:var(--calcite-font-size-1);line-height:1.5rem;margin-inline-end:0.75rem}:host([scale=l]) .stepper-item-description{font-size:var(--calcite-font-size-0);line-height:1.25rem}:host{position:relative;display:flex;flex-grow:1;flex-direction:column;align-self:flex-start;margin-block-end:var(--calcite-stepper-item-spacing-unit-s)}:host .container{position:relative;display:flex;flex-grow:1;cursor:pointer;flex-direction:column;border-width:0px;border-block-start-width:2px;border-style:solid;border-color:var(--calcite-color-border-3);color:var(--calcite-color-text-3);text-decoration-line:none;outline:2px solid transparent;outline-offset:2px;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}:host{outline-color:transparent}:host(:focus){outline:2px solid var(--calcite-ui-focus-color, 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 .stepper-item-header{display:flex;cursor:pointer;align-items:flex-start}:host .stepper-item-content,:host .stepper-item-header{transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);padding-block:var(--calcite-stepper-item-spacing-unit-l);padding-inline-end:var(--calcite-stepper-item-spacing-unit-m);text-align:start}:host .stepper-item-header *{display:inline-flex;align-items:center;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}:host .stepper-item-content{display:none;inline-size:100%;flex-direction:column;font-size:var(--calcite-font-size--2);line-height:1.375}:host .stepper-item-icon{margin-inline-end:var(--calcite-stepper-item-spacing-unit-m);margin-block-start:1px;display:inline-flex;block-size:0.75rem;flex-shrink:0;align-self:flex-start;color:var(--calcite-color-text-3);opacity:var(--calcite-opacity-disabled);transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}:host .stepper-item-header-text{flex-direction:column;text-align:initial;margin-inline-end:auto}:host .stepper-item-heading,:host .stepper-item-description{display:flex;inline-size:100%}:host .stepper-item-heading{margin-block-end:0.25rem;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-2)}:host .stepper-item-description{color:var(--calcite-color-text-3)}:host .stepper-item-number{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-3);transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);margin-inline-end:var(--calcite-stepper-item-spacing-unit-m)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([complete]) .container{border-color:rgba(0, 122, 194, 0.5)}:host([complete]) .container .stepper-item-icon{color:var(--calcite-color-brand)}:host([error]) .container{border-block-start-color:var(--calcite-color-status-danger)}:host([error]) .container .stepper-item-number{color:var(--calcite-color-status-danger)}:host([error]) .container .stepper-item-icon{opacity:1;color:var(--calcite-color-status-danger)}:host(:hover:not([disabled]):not([selected])) .container,:host(:focus:not([disabled]):not([selected])) .container{border-block-start-color:var(--calcite-color-brand)}:host(:hover:not([disabled]):not([selected])) .container .stepper-item-heading,:host(:focus:not([disabled]):not([selected])) .container .stepper-item-heading{color:var(--calcite-color-text-1)}:host(:hover:not([disabled]):not([selected])) .container .stepper-item-description,:host(:focus:not([disabled]):not([selected])) .container .stepper-item-description{color:var(--calcite-color-text-2)}:host([error]:hover:not([disabled]):not([selected])) .container,:host([error]:focus:not([disabled]):not([selected])) .container{border-block-start-color:var(--calcite-color-status-danger-hover)}:host([selected]) .container{border-block-start-color:var(--calcite-color-brand)}:host([selected]) .container .stepper-item-heading{color:var(--calcite-color-text-1)}:host([selected]) .container .stepper-item-description{color:var(--calcite-color-text-2)}:host([selected]) .container .stepper-item-number{color:var(--calcite-color-brand)}:host([selected]) .container .stepper-item-icon{color:var(--calcite-color-brand);opacity:1}:host([selected]) .container .stepper-item-content{display:flex}:host([layout=vertical]) .container{margin-inline:0px;margin-block-start:0px;flex:1 1 auto;border-block-start-width:0px;border-style:solid;border-color:var(--calcite-color-border-3);padding-block:0px;border-inline-start-width:2px;padding-inline-start:var(--calcite-stepper-item-spacing-unit-l)}:host([layout=vertical]) .container .stepper-item-icon{order:3;margin-block:1px 0px;padding-inline-start:var(--calcite-stepper-item-spacing-unit-s);margin-inline-start:auto}:host([layout=vertical]) .container .stepper-item-header{padding-inline-end:0px}:host([layout=vertical]) .container .stepper-item-content{padding:0px}:host([layout=vertical][complete]) .container{border-color:rgba(0, 122, 194, 0.5)}:host([layout=vertical][complete]:hover:not([disabled]):not([selected])) .container,:host([layout=vertical][complete]:focus:not([disabled]):not([selected])) .container{border-color:var(--calcite-color-brand)}:host([layout=vertical][error]) .container{border-color:var(--calcite-color-status-danger)}:host([layout=vertical][selected]) .container{border-color:var(--calcite-color-brand)}:host([layout=vertical][selected]) .container .stepper-item-content:not(:empty){margin-block-end:var(--calcite-stepper-item-spacing-unit-l)}:host([layout=vertical]:hover:not([disabled]):not([selected])) .container,:host([layout=vertical]:focus:not([disabled]):not([selected])) .container{border-color:rgba(0, 122, 194, 0.5)}:host([layout=vertical][error]:hover:not([disabled]):not([selected])) .container,:host([layout=vertical][error]:focus:not([disabled]):not([selected])) .container{border-color:var(--calcite-color-status-danger-hover)}:host([layout=horizontal]),:host([layout=horizontal-single]){display:contents}:host([layout=horizontal]) .container,:host([layout=horizontal-single]) .container{display:contents}:host([layout=horizontal]) .stepper-item-header,:host([layout=horizontal-single]) .stepper-item-header{border-width:0px;border-block-start-width:2px;border-style:solid;border-color:var(--calcite-color-border-3);outline-color:transparent;grid-row:items}:host([layout=horizontal]) .stepper-item-header:focus,:host([layout=horizontal-single]) .stepper-item-header:focus{transition-duration:0s;outline:2px solid var(--calcite-ui-focus-color, 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([layout=horizontal]) .stepper-item-content,:host([layout=horizontal-single]) .stepper-item-content{cursor:auto;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);padding-block:0;padding-inline-end:var(--calcite-stepper-item-spacing-unit-m);text-align:start}:host([layout=vertical]) .stepper-item-header:focus{transition-duration:0s}:host([layout=horizontal-single]) .stepper-item-header{grid-area:1/1/1/-1}:host([layout=horizontal]) .stepper-item-content,:host([layout=horizontal-single]) .stepper-item-content{grid-area:2/1/2/-1}:host([layout=horizontal][complete]) .stepper-item-header,:host([layout=horizontal-single][complete]) .stepper-item-header{border-color:rgba(0, 122, 194, 0.5)}:host([layout=horizontal][complete]:hover:not([disabled]):not([selected])) .stepper-item-header,:host([layout=horizontal][complete]:focus:not([disabled]):not([selected])) .stepper-item-header,:host([layout=horizontal-single][complete]:hover:not([disabled]):not([selected])) .stepper-item-header,:host([layout=horizontal-single][complete]:focus:not([disabled]):not([selected])) .stepper-item-header{border-color:var(--calcite-color-brand)}:host([layout=horizontal][error]) .stepper-item-header,:host([layout=horizontal-single][error]) .stepper-item-header{border-color:var(--calcite-color-status-danger)}:host([layout=horizontal][selected]) .stepper-item-header,:host([layout=horizontal-single][selected]) .stepper-item-header{border-color:var(--calcite-color-brand)}:host([layout=horizontal]:hover:not([disabled]):not([selected])) .stepper-item-header,:host([layout=horizontal]:focus:not([disabled]):not([selected])) .stepper-item-header,:host([layout=horizontal-single]:hover:not([disabled]):not([selected])) .stepper-item-header,:host([layout=horizontal-single]:focus:not([disabled]):not([selected])) .stepper-item-header{border-color:rgba(0, 122, 194, 0.5)}:host([layout=horizontal][error]:hover:not([disabled]):not([selected])) .stepper-item-header,:host([layout=horizontal][error]:focus:not([disabled]):not([selected])) .stepper-item-header,:host([layout=horizontal-single][error]:hover:not([disabled]):not([selected])) .stepper-item-header,:host([layout=horizontal-single][error]:focus:not([disabled]):not([selected])) .stepper-item-header{border-color:var(--calcite-color-status-danger-hover)}@media (forced-colors: active){:host .container{outline-width:0;outline-offset:0}:host(:focus),:host(:focus-visible){outline-color:canvasText}:host([selected]) .container{border-block-start-color:highlight}:host([selected]) .container .stepper-item-number{color:highlight}:host([selected]) .container .stepper-item-icon{color:highlight}:host([layout=vertical][selected]) .container{border-color:highlight}}:host([layout=horizontal-single]) .stepper-item-header{margin-inline-end:0px;box-sizing:border-box;border-style:none;inline-size:100%;padding-inline:calc(var(--calcite-internal-stepper-action-inline-size) + 0.5rem)}:host([layout=horizontal-single][error]) .container .stepper-item-number{color:var(--calcite-color-status-danger)}:host([layout=horizontal-single][error]) .container .stepper-item-icon{opacity:1;color:var(--calcite-color-status-danger)}:host([layout=horizontal-single][error][selected]),:host([layout=horizontal-single][complete][selected]) .container{color:var(--calcite-color-text-3)}:host([layout=horizontal-single][error][selected]) .stepper-item-heading,:host([layout=horizontal-single][complete][selected]) .container .stepper-item-heading{color:var(--calcite-color-text-2)}:host([layout=horizontal-single][complete][selected]) .container .stepper-item-icon{opacity:var(--calcite-opacity-disabled)}:host([layout=horizontal-single][complete][selected]) .container .stepper-item-number{color:var(--calcite-color-text-3)}.visually-hidden{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}:host([hidden]){display:none}[hidden]{display:none}";const D=E;const H=class{constructor(e){t(this,e);this.calciteInternalStepperItemKeyEvent=i(this,"calciteInternalStepperItemKeyEvent",6);this.calciteInternalStepperItemSelect=i(this,"calciteInternalStepperItemSelect",6);this.calciteInternalUserRequestedStepperItemSelect=i(this,"calciteInternalUserRequestedStepperItemSelect",6);this.calciteInternalStepperItemRegister=i(this,"calciteInternalStepperItemRegister",6);this.keyDownHandler=e=>{if(!this.disabled&&e.target===this.el){switch(e.key){case" ":case"Enter":this.emitUserRequestedItem();e.preventDefault();break;case"ArrowUp":case"ArrowDown":case"ArrowLeft":case"ArrowRight":case"Home":case"End":this.calciteInternalStepperItemKeyEvent.emit({item:e});e.preventDefault();break}}};this.handleItemClick=e=>{if(this.disabled||this.layout==="horizontal"&&e.composedPath().some((e=>e.classList?.contains("stepper-item-content")))){return}this.emitUserRequestedItem()};this.emitUserRequestedItem=()=>{this.emitRequestedItem();if(!this.disabled){const e=this.itemPosition;this.calciteInternalUserRequestedStepperItemSelect.emit({position:e})}};this.emitRequestedItem=()=>{if(!this.disabled){const e=this.itemPosition;this.calciteInternalStepperItemSelect.emit({position:e})}};this.selected=false;this.complete=false;this.error=false;this.disabled=false;this.heading=undefined;this.description=undefined;this.iconFlipRtl=false;this.numberingSystem=undefined;this.icon=false;this.layout=undefined;this.messages=undefined;this.numbered=false;this.scale="m";this.messageOverrides=undefined;this.defaultMessages=undefined;this.effectiveLocale=""}selectedHandler(){if(this.selected){this.emitRequestedItem()}}disabledWatcher(){this.registerStepperItem()}onMessagesChange(){}effectiveLocaleWatcher(e){d.numberFormatOptions={locale:e,numberingSystem:this.numberingSystem,useGrouping:false};f(this,this.effectiveLocale)}connectedCallback(){g(this);h(this);m(this)}async componentWillLoad(){x(this);this.parentStepperEl=this.el.parentElement;this.itemPosition=this.getItemPosition();this.registerStepperItem();if(this.selected){this.emitRequestedItem()}await u(this)}componentDidLoad(){k(this)}componentDidRender(){y(this)}disconnectedCallback(){v(this);p(this);b(this)}render(){return e(s,{key:"096f9389ee1639c7bb888668a9b76d4cbbd011f2","aria-current":this.selected?"step":"false",onClick:this.handleItemClick,onKeyDown:this.keyDownHandler,tabIndex:this.disabled?-1:0},e(z,{key:"683e706e5b1dd6164a5b662d79cfae160ef00233",disabled:this.disabled},e("div",{key:"ebdf63213e4117ab1b3e187a3f32aa2ced665205",class:L.container},this.complete&&e("span",{"aria-live":"polite",class:L.visuallyHidden},this.messages.complete),e("div",{key:"d8c26e7385c8159afbace97a34bf139acec835d9",class:L.stepperItemHeader,tabIndex:this.layout==="horizontal"&&!this.disabled?0:null,ref:e=>this.headerEl=e},this.icon?this.renderIcon():null,this.numbered?e("div",{class:L.stepperItemNumber},this.renderNumbers(),"."):null,e("div",{key:"2271dc9e98875f797a82fc010684aceb1660cc79",class:L.stepperItemHeaderText},e("span",{key:"fbe9f433360f1336826b611938a350605a767629",class:L.stepperItemHeading},this.heading),e("span",{key:"4796e41a1671e7d2e5f92a002f8d43e27eb391bc",class:L.stepperItemDescription},this.description))),e("div",{key:"2db709a64c40944cc587fb8406b7608bd00eb763",class:L.stepperItemContent},e("slot",{key:"c68c7ede026238a8861a2c898ac557f7d4651593"})))))}updateActiveItemOnChange(e){if(e.target===this.parentStepperEl||e.composedPath().includes(this.parentStepperEl)){this.selectedPosition=e.detail.position;this.determineSelectedItem()}}async setFocus(){await w(this);(this.layout==="vertical"?this.el:this.headerEl)?.focus()}renderIcon(){let t="circle";if(this.selected&&(this.layout!=="horizontal-single"||!this.error&&!this.complete)){t="circleF"}else if(this.error){t="exclamationMarkCircleF"}else if(this.complete){t="checkCircleF"}return e("calcite-icon",{class:"stepper-item-icon",flipRtl:this.iconFlipRtl,icon:t,scale:"s"})}determineSelectedItem(){this.selected=!this.disabled&&this.itemPosition===this.selectedPosition}registerStepperItem(){this.calciteInternalStepperItemRegister.emit({position:this.itemPosition})}getItemPosition(){return Array.from(this.parentStepperEl?.querySelectorAll("calcite-stepper-item")).indexOf(this.el)}renderNumbers(){d.numberFormatOptions={locale:this.effectiveLocale,numberingSystem:this.numberingSystem,useGrouping:false};return d.numberFormatter.format(this.itemPosition+1)}static get assetsDirs(){return["assets"]}get el(){return r(this)}static get watchers(){return{selected:["selectedHandler"],disabled:["disabledWatcher"],messageOverrides:["onMessagesChange"],effectiveLocale:["effectiveLocaleWatcher"]}}};H.style=D;export{j as calcite_stepper,H as calcite_stepper_item};
+//# sourceMappingURL=p-80d9a9cf.entry.js.map

package/dist/calcite/p-80d9a9cf.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["CSS","actionIcon","actionIconStart","actionIconEnd","actionContainer","stepBarContainer","singleView","stepBar","stepBarActive","stepBarComplete","stepBarDisabled","stepBarError","stepBarInActive","StepBar","disabled","active","complete","error","key","h","class","width","x","y","stepperCss","CalciteStepperStyle0","Stepper","this","enabledItems","itemMap","Map","items","mutationObserver","createObserver","updateItems","multipleViewMode","guid","handleActionClick","event","currentActivePosition","target","getAttribute","prevStep","nextStep","calciteStepperItemChange","emit","setContainerEl","el","containerEl","handleDefaultSlotChange","slotChangeGetAssignedElements","filter","tagName","spacing","Array","length","fill","join","style","gridTemplateAreas","gridTemplateColumns","setStepperItemNumberingSystem","handleItemPropChange","determineActiveStepper","numberingSystemChange","onMessagesChange","connectedCallback","observe","childList","connectMessages","connectLocalized","componentWillLoad","setUpMessages","componentDidLoad","enabledStepIndex","getFirstEnabledStepperPosition","calciteInternalStepperItemChange","position","disconnectedCallback","disconnectMessages","disconnectLocalized","disconnect","render","Host","messages","label","role","container","layout","ref","map","item","index","renderAction","onSlotchange","calciteInternalStepperItemKeyEvent","detail","itemToFocus","focusElementInGroup","stopPropagation","registerItem","content","set","filterItems","updateItem","selectedItem","handleUserRequestedStepperItemSelect","getEnabledStepIndex","updateStep","goToStep","step","startStep","endStep","effectiveLocaleChange","updateMessages","effectiveLocale","handlePositionChange","readTask","querySelectorAll","forEach","icon","numbered","scale","hidden","startIndex","direction","newIndex","numberingSystem","isPositionStart","path","totalItems","id","alignment","appearance","compact","iconFlipRtl","onClick","text","previousStep","findIndex","stepperItemContent","stepperItemDescription","stepperItemHeader","stepperItemHeading","stepperItemHeaderText","stepperItemNumber","visuallyHidden","stepperItemCss","CalciteStepperItemStyle0","StepperItem","keyDownHandler","emitUserRequestedItem","preventDefault","handleItemClick","composedPath","some","classList","contains","emitRequestedItem","itemPosition","calciteInternalUserRequestedStepperItemSelect","calciteInternalStepperItemSelect","selectedHandler","selected","disabledWatcher","registerStepperItem","effectiveLocaleWatcher","locale","numberStringFormatter","numberFormatOptions","useGrouping","connectInteractive","setUpLoadableComponent","parentStepperEl","parentElement","getItemPosition","setComponentLoaded","componentDidRender","updateHostInteraction","disconnectInteractive","onKeyDown","tabIndex","InteractiveContainer","headerEl","renderIcon","renderNumbers","heading","description","updateActiveItemOnChange","includes","selectedPosition","determineSelectedItem","setFocus","componentFocusable","focus","flipRtl","calciteInternalStepperItemRegister","from","indexOf","numberFormatter","format"],"sources":["src/components/stepper/resources.ts","src/components/stepper/functional/step-bar.tsx","src/components/stepper/stepper.scss?tag=calcite-stepper&encapsulation=shadow","src/components/stepper/stepper.tsx","src/components/stepper-item/resources.ts","src/components/stepper-item/stepper-item.scss?tag=calcite-stepper-item&encapsulation=shadow","src/components/stepper-item/stepper-item.tsx"],"sourcesContent":["export const CSS = {\n  actionIcon: \"action-icon\",\n  actionIconStart: \"action-icon--start\",\n  actionIconEnd: \"action-icon--end\",\n  actionContainer: \"action-container\",\n  stepBarContainer: \"step-bar-container\",\n  singleView: \"single-view\",\n};\n","import { FunctionalComponent, h } from \"@stencil/core\";\n\ninterface StepBarProps {\n  active: boolean;\n  complete: boolean;\n  error: boolean;\n  disabled: boolean;\n  key: number;\n}\n\nexport const CSS = {\n  stepBar: \"step-bar\",\n  stepBarActive: \"step-bar--active\",\n  stepBarComplete: \"step-bar--complete\",\n  stepBarDisabled: \"step-bar--disabled\",\n  stepBarError: \"step-bar--error\",\n  stepBarInActive: \"step-bar--inactive\",\n};\n\nexport const StepBar: FunctionalComponent<StepBarProps> = ({\n  disabled,\n  active,\n  complete,\n  error,\n  key,\n}) => (\n  <svg\n    class={{\n      [CSS.stepBar]: true,\n    }}\n    key={key}\n  >\n    <rect\n      class={{\n        [CSS.stepBarActive]: active,\n        [CSS.stepBarComplete]: complete,\n        [CSS.stepBarDisabled]: disabled,\n        [CSS.stepBarError]: error,\n        [CSS.stepBarInActive]: true,\n      }}\n      width=\"100%\"\n      x=\"0\"\n      y=\"0\"\n    />\n  </svg>\n);\n",":host([scale=\"s\"]) {\n  --calcite-internal-stepper-item-spacing-unit-s: theme(\"spacing.1\");\n  --calcite-internal-stepper-action-block-size: theme(\"spacing.11\");\n  --calcite-internal-stepper-action-inline-size: theme(\"spacing.8\");\n  --calcite-internal-step-bar-gap: theme(\"spacing.1\");\n}\n\n:host([scale=\"m\"]) {\n  --calcite-internal-stepper-item-spacing-unit-s: theme(\"spacing.2\");\n  --calcite-internal-stepper-action-block-size: theme(\"spacing.13\");\n  --calcite-internal-stepper-action-inline-size: theme(\"spacing.10\");\n}\n\n:host([scale=\"l\"]) {\n  --calcite-internal-stepper-item-spacing-unit-s: theme(\"spacing.3\");\n  --calcite-internal-stepper-action-block-size: theme(\"spacing.16\");\n  --calcite-internal-stepper-action-inline-size: theme(\"spacing.12\");\n  --calcite-internal-step-bar-gap: theme(\"spacing.3\");\n}\n\n:host {\n  @apply flex;\n}\n\n.container {\n  @apply relative\n    flex\n    w-full\n    min-w-fit\n    flex-row\n    flex-wrap\n    items-stretch\n    justify-between;\n}\n\n:host([layout=\"vertical\"]) .container {\n  @apply flex-auto flex-col;\n}\n\n:host([layout=\"horizontal\"]),\n:host([layout=\"horizontal-single\"]) {\n  .container {\n    display: grid;\n    // grid-templates-columns are dynamically generated\n    // grid-templates-rows are dynamically generated\n    grid-template-areas:\n      \"items\"\n      \"content\";\n    gap: theme(\"spacing.2\") var(--calcite-internal-stepper-item-spacing-unit-s);\n  }\n}\n\n:host([layout=\"horizontal\"][scale=\"s\"]),\n:host([layout=\"horizontal-single\"][scale=\"s\"]) {\n  .container {\n    gap: theme(\"spacing.1\") var(--calcite-internal-stepper-item-spacing-unit-s);\n  }\n}\n\n:host([layout=\"horizontal\"][scale=\"l\"]),\n:host([layout=\"horizontal-single\"][scale=\"l\"]) {\n  .container {\n    gap: theme(\"spacing.3\") var(--calcite-internal-stepper-item-spacing-unit-s);\n  }\n}\n\n:host([layout=\"horizontal\"]) .container.single-view {\n  @apply flex  grid-cols-none;\n}\n\n.action-icon {\n  @apply flex relative grow-0;\n  block-size: var(--calcite-internal-stepper-action-block-size);\n  inline-size: var(--calcite-internal-stepper-action-inline-size);\n}\n\n.action-container {\n  @apply absolute flex justify-between;\n  padding-block: 0.25rem;\n  inline-size: 100%;\n}\n\n@mixin stepBar {\n  .step-bar {\n    @apply flex;\n    block-size: 100%;\n    inline-size: 100%;\n  }\n\n  .step-bar-container {\n    @apply flex absolute justify-between items-start;\n    block-size: 0.125rem;\n    inline-size: 100%;\n    gap: var(--calcite-internal-step-bar-gap, 0.5rem);\n  }\n\n  .step-bar--inactive {\n    fill: var(--calcite-color-border-3, #dfdfdf);\n    fill-opacity: 1;\n    block-size: 100%;\n  }\n\n  .step-bar--active {\n    fill: var(--calcite-color-brand);\n  }\n\n  .step-bar--complete {\n    fill: var(--calcite-color-brand);\n    fill-opacity: 0.5;\n  }\n\n  .step-bar--error {\n    fill: var(--calcite-color-status-danger);\n  }\n\n  .step-bar--disabled {\n    opacity: 0.5;\n  }\n}\n\n@include stepBar();\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n  readTask,\n} from \"@stencil/core\";\nimport { focusElementInGroup, slotChangeGetAssignedElements } from \"../../utils/dom\";\nimport { Position, Scale } from \"../interfaces\";\nimport { createObserver } from \"../../utils/observers\";\nimport { guid } from \"../../utils/guid\";\nimport {\n  connectLocalized,\n  disconnectLocalized,\n  LocalizedComponent,\n  NumberingSystem,\n} from \"../../utils/locale\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { CSS } from \"./resources\";\nimport { StepBar } from \"./functional/step-bar\";\nimport {\n  StepperItemChangeEventDetail,\n  StepperItemKeyEventDetail,\n  StepperLayout,\n} from \"./interfaces\";\nimport { StepperMessages } from \"./assets/stepper/t9n\";\n\n/**\n * @slot - A slot for adding `calcite-stepper-item` elements.\n */\n@Component({\n  tag: \"calcite-stepper\",\n  styleUrl: \"stepper.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class Stepper implements LocalizedComponent, T9nComponent {\n  //--------------------------------------------------------------------------\n  //\n  //  Public Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /** When `true`, displays a status icon in the `calcite-stepper-item` heading. */\n  @Prop({ reflect: true }) icon = false;\n\n  /** Defines the layout of the component. */\n  @Prop({ reflect: true }) layout: StepperLayout = \"horizontal\";\n\n  /** When `true`, displays the step number in the `calcite-stepper-item` heading. */\n  @Prop({ reflect: true }) numbered = false;\n\n  /** Specifies the size of the component. */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  @Watch(\"icon\")\n  @Watch(\"layout\")\n  @Watch(\"numbered\")\n  @Watch(\"scale\")\n  handleItemPropChange(): void {\n    this.updateItems();\n    this.determineActiveStepper();\n  }\n\n  /**\n   * Made into a prop for testing purposes only\n   *\n   * @internal\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messages: StepperMessages;\n\n  /**\n   * Specifies the Unicode numeral system used by the component for localization.\n   */\n  @Prop({ reflect: true }) numberingSystem?: NumberingSystem;\n\n  @Watch(\"numberingSystem\")\n  numberingSystemChange(): void {\n    this.setStepperItemNumberingSystem();\n  }\n\n  /**\n   * Specifies the component's selected item.\n   *\n   * @readonly\n   */\n  @Prop({ mutable: true }) selectedItem: HTMLCalciteStepperItemElement = null;\n\n  /**\n   * Use this property to override individual strings used by the component.\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messageOverrides: Partial<StepperMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Fires when the active `calcite-stepper-item` changes.\n   *\n   */\n  @Event({ cancelable: false }) calciteStepperItemChange: EventEmitter<void>;\n\n  /**\n   * Fires when the active `calcite-stepper-item` changes.\n   *\n   * @internal\n   */\n  @Event({ cancelable: false })\n  calciteInternalStepperItemChange: EventEmitter<StepperItemChangeEventDetail>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    this.mutationObserver?.observe(this.el, { childList: true });\n    this.updateItems();\n    connectMessages(this);\n    connectLocalized(this);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    await setUpMessages(this);\n  }\n\n  componentDidLoad(): void {\n    // if no stepper items are set as active, default to the first one\n    if (typeof this.currentActivePosition !== \"number\") {\n      const enabledStepIndex = this.getFirstEnabledStepperPosition();\n\n      if (enabledStepIndex === 0) {\n        this.currentActivePosition = enabledStepIndex;\n      }\n\n      this.calciteInternalStepperItemChange.emit({\n        position: enabledStepIndex,\n      });\n    }\n  }\n\n  disconnectedCallback(): void {\n    disconnectMessages(this);\n    disconnectLocalized(this);\n    this.mutationObserver?.disconnect();\n  }\n\n  render(): VNode {\n    return (\n      <Host aria-label={this.messages.label} role=\"region\">\n        <div\n          class={{ container: true, [CSS.singleView]: this.layout === \"horizontal-single\" }}\n          // eslint-disable-next-line react/jsx-sort-props -- auto-generated by @esri/calcite-components/enforce-ref-last-prop\n          ref={this.setContainerEl}\n        >\n          {this.layout === \"horizontal-single\" && (\n            <div class={{ [CSS.stepBarContainer]: true }}>\n              {this.items.map((item, index) => (\n                <StepBar\n                  active={index === this.currentActivePosition}\n                  complete={item.complete && index !== this.currentActivePosition && !item.error}\n                  disabled={item.disabled && index !== this.currentActivePosition}\n                  error={item.error && index !== this.currentActivePosition}\n                  key={index}\n                />\n              ))}\n            </div>\n          )}\n          {this.layout === \"horizontal-single\" && (\n            <div class={{ [CSS.actionContainer]: true }}>\n              {this.renderAction(\"start\")}\n              {this.renderAction(\"end\")}\n            </div>\n          )}\n          <slot onSlotchange={this.handleDefaultSlotChange} />\n        </div>\n      </Host>\n    );\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Event Listeners\n  //\n  //--------------------------------------------------------------------------\n\n  @Listen(\"calciteInternalStepperItemKeyEvent\")\n  calciteInternalStepperItemKeyEvent(event: CustomEvent<StepperItemKeyEventDetail>): void {\n    const item = event.detail.item;\n    const itemToFocus = event.target as HTMLCalciteStepperItemElement;\n\n    switch (item.key) {\n      case \"ArrowDown\":\n      case \"ArrowRight\":\n        focusElementInGroup(this.enabledItems, itemToFocus, \"next\");\n        break;\n      case \"ArrowUp\":\n      case \"ArrowLeft\":\n        focusElementInGroup(this.enabledItems, itemToFocus, \"previous\");\n        break;\n      case \"Home\":\n        focusElementInGroup(this.enabledItems, itemToFocus, \"first\");\n        break;\n      case \"End\":\n        focusElementInGroup(this.enabledItems, itemToFocus, \"last\");\n        break;\n    }\n    event.stopPropagation();\n  }\n\n  @Listen(\"calciteInternalStepperItemRegister\")\n  registerItem(event: CustomEvent): void {\n    const item = event.target as HTMLCalciteStepperItemElement;\n    const { content, position } = event.detail;\n\n    this.itemMap.set(item, { position, content });\n    this.enabledItems = this.filterItems();\n    event.stopPropagation();\n  }\n\n  @Listen(\"calciteInternalStepperItemSelect\")\n  updateItem(event: CustomEvent): void {\n    const { position } = event.detail;\n    if (typeof position === \"number\") {\n      this.currentActivePosition = position;\n      this.selectedItem = event.target as HTMLCalciteStepperItemElement;\n    }\n\n    this.calciteInternalStepperItemChange.emit({\n      position,\n    });\n  }\n\n  @Listen(\"calciteInternalUserRequestedStepperItemSelect\")\n  handleUserRequestedStepperItemSelect(): void {\n    this.calciteStepperItemChange.emit();\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /** Set the next `calcite-stepper-item` as active. */\n  @Method()\n  async nextStep(): Promise<void> {\n    const enabledStepIndex = this.getEnabledStepIndex(this.currentActivePosition + 1, \"next\");\n\n    if (typeof enabledStepIndex !== \"number\") {\n      return;\n    }\n\n    this.updateStep(enabledStepIndex);\n  }\n\n  /** Set the previous `calcite-stepper-item` as active. */\n  @Method()\n  async prevStep(): Promise<void> {\n    const enabledStepIndex = this.getEnabledStepIndex(this.currentActivePosition - 1, \"previous\");\n\n    if (typeof enabledStepIndex !== \"number\") {\n      return;\n    }\n\n    this.updateStep(enabledStepIndex);\n  }\n\n  /**\n   * Set a specified `calcite-stepper-item` as active.\n   *\n   * @param step\n   */\n  @Method()\n  async goToStep(step: number): Promise<void> {\n    const position = step - 1;\n\n    if (this.currentActivePosition !== position) {\n      this.updateStep(position);\n    }\n  }\n\n  /** Set the first `calcite-stepper-item` as active. */\n  @Method()\n  async startStep(): Promise<void> {\n    const enabledStepIndex = this.getEnabledStepIndex(0, \"next\");\n\n    if (typeof enabledStepIndex !== \"number\") {\n      return;\n    }\n\n    this.updateStep(enabledStepIndex);\n  }\n\n  /** Set the last `calcite-stepper-item` as active. */\n  @Method()\n  async endStep(): Promise<void> {\n    const enabledStepIndex = this.getEnabledStepIndex(this.items.length - 1, \"previous\");\n\n    if (typeof enabledStepIndex !== \"number\") {\n      return;\n    }\n\n    this.updateStep(enabledStepIndex);\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private State/Props\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteStepperElement;\n\n  @State() defaultMessages: StepperMessages;\n\n  @State() effectiveLocale = \"\";\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  @State() currentActivePosition: number;\n\n  @Watch(\"currentActivePosition\")\n  handlePositionChange(): void {\n    readTask((): void => {\n      this.determineActiveStepper();\n    });\n  }\n\n  private enabledItems: HTMLCalciteStepperItemElement[] = [];\n\n  private itemMap = new Map<HTMLCalciteStepperItemElement, { position: number; content: Node[] }>();\n\n  private items: HTMLCalciteStepperItemElement[] = [];\n\n  private mutationObserver = createObserver(\"mutation\", () => this.updateItems());\n\n  /** Specifies if the user is viewing one `stepper-item` at a time when the page width is less than sum of min-width of each item. */\n  private multipleViewMode = false;\n\n  private guid = `calcite-stepper-action-${guid()}`;\n\n  private containerEl: HTMLDivElement;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  private updateItems(): void {\n    this.el.querySelectorAll(\"calcite-stepper-item\").forEach((item) => {\n      item.icon = this.icon;\n      item.numbered = this.numbered;\n      item.layout = this.layout;\n      item.scale = this.scale;\n    });\n  }\n\n  private determineActiveStepper(): void {\n    const { items } = this;\n\n    if (items.length < 2) {\n      return;\n    }\n\n    const { currentActivePosition, layout } = this;\n\n    this.multipleViewMode = layout !== \"horizontal-single\";\n    items.forEach((item, index) => {\n      item.hidden = layout === \"horizontal-single\" && index !== (currentActivePosition || 0);\n    });\n  }\n\n  private getEnabledStepIndex(\n    startIndex: number,\n    direction: \"next\" | \"previous\" = \"next\",\n  ): number | null {\n    const { items, currentActivePosition } = this;\n\n    let newIndex = startIndex;\n\n    while (items[newIndex]?.disabled && this.layout !== \"horizontal-single\") {\n      newIndex = newIndex + (direction === \"previous\" ? -1 : 1);\n    }\n\n    return newIndex !== currentActivePosition && newIndex < items.length && newIndex >= 0\n      ? newIndex\n      : null;\n  }\n\n  private updateStep(position: number): void {\n    this.currentActivePosition = position;\n    this.calciteInternalStepperItemChange.emit({\n      position,\n    });\n  }\n\n  private filterItems(): HTMLCalciteStepperItemElement[] {\n    return this.items.filter((item) => !item.disabled);\n  }\n\n  private setStepperItemNumberingSystem(): void {\n    this.items.forEach((item: HTMLCalciteStepperItemElement) => {\n      item.numberingSystem = this.numberingSystem;\n    });\n  }\n\n  private renderAction(position: Position): VNode {\n    const isPositionStart = position === \"start\";\n    const path = isPositionStart ? \"chevron-left\" : \"chevron-right\";\n    const { currentActivePosition, multipleViewMode, layout } = this;\n    const totalItems = this.items.length;\n    const id = `${this.guid}-${isPositionStart ? \"start\" : \"end\"}`;\n\n    return layout === \"horizontal-single\" && !multipleViewMode ? (\n      <calcite-action\n        alignment=\"center\"\n        appearance=\"transparent\"\n        class={{\n          [CSS.actionIcon]: true,\n        }}\n        compact={true}\n        data-position={position}\n        disabled={\n          (currentActivePosition === 0 && isPositionStart) ||\n          (currentActivePosition === totalItems - 1 && !isPositionStart)\n        }\n        icon={path}\n        iconFlipRtl={true}\n        id={id}\n        onClick={this.handleActionClick}\n        scale={this.scale}\n        text={isPositionStart ? this.messages.previousStep : this.messages.nextStep}\n      />\n    ) : null;\n  }\n\n  private handleActionClick = (event: MouseEvent): void => {\n    const currentActivePosition = this.currentActivePosition;\n    const target = event.target as HTMLCalciteActionElement;\n    if (target.getAttribute(\"data-position\") === \"start\") {\n      this.prevStep();\n    } else {\n      this.nextStep();\n    }\n\n    if (\n      typeof this.currentActivePosition === \"number\" &&\n      currentActivePosition !== this.currentActivePosition &&\n      !this.items[this.currentActivePosition].disabled\n    ) {\n      this.calciteStepperItemChange.emit();\n    }\n  };\n\n  private getFirstEnabledStepperPosition(): number {\n    const enabledStepIndex = this.items.findIndex((item) => !item.disabled);\n\n    if (enabledStepIndex > -1) {\n      return enabledStepIndex;\n    }\n    return 0;\n  }\n\n  private setContainerEl = (el: HTMLDivElement): void => {\n    this.containerEl = el;\n  };\n\n  handleDefaultSlotChange = (event: Event): void => {\n    const items = slotChangeGetAssignedElements(event).filter(\n      (el) => el?.tagName === \"CALCITE-STEPPER-ITEM\",\n    );\n    this.items = items as HTMLCalciteStepperItemElement[];\n    const spacing = Array(items.length).fill(\"1fr\").join(\" \");\n    this.containerEl.style.gridTemplateAreas = spacing;\n    this.containerEl.style.gridTemplateColumns = spacing;\n    this.setStepperItemNumberingSystem();\n  };\n}\n","export const CSS = {\n  container: \"container\",\n  stepperItemContent: \"stepper-item-content\",\n  stepperItemDescription: \"stepper-item-description\",\n  stepperItemHeader: \"stepper-item-header\",\n  stepperItemHeading: \"stepper-item-heading\",\n  stepperItemHeaderText: \"stepper-item-header-text\",\n  stepperItemNumber: \"stepper-item-number\",\n  visuallyHidden: \"visually-hidden\",\n};\n",":host([scale=\"s\"]) {\n  --calcite-stepper-item-spacing-unit-s: theme(\"spacing.1\");\n  --calcite-stepper-item-spacing-unit-m: theme(\"spacing.3\");\n  --calcite-stepper-item-spacing-unit-l: theme(\"spacing.4\");\n  --calcite-internal-stepper-action-inline-size: theme(\"spacing.8\");\n  @apply text-n1h;\n  margin-inline-end: theme(\"margin.1\");\n  .stepper-item-description {\n    @apply text-n2h;\n  }\n}\n\n:host([scale=\"m\"]) {\n  --calcite-stepper-item-spacing-unit-s: theme(\"spacing.2\");\n  --calcite-stepper-item-spacing-unit-m: theme(\"spacing.4\");\n  --calcite-stepper-item-spacing-unit-l: theme(\"spacing.5\");\n  --calcite-internal-stepper-action-inline-size: theme(\"spacing.10\");\n  @apply text-0h;\n  margin-inline-end: theme(\"margin.2\");\n  .stepper-item-description {\n    @apply text-n1h;\n  }\n}\n\n:host([scale=\"l\"]) {\n  --calcite-stepper-item-spacing-unit-s: theme(\"spacing.3\");\n  --calcite-stepper-item-spacing-unit-m: theme(\"spacing.5\");\n  --calcite-stepper-item-spacing-unit-l: theme(\"spacing.6\");\n  --calcite-internal-stepper-action-inline-size: theme(\"spacing.12\");\n  @apply text-1h;\n  margin-inline-end: theme(\"margin.3\");\n  .stepper-item-description {\n    @apply text-0h;\n  }\n}\n\n:host {\n  @apply relative\n  flex\n  flex-grow\n  flex-col\n  self-start;\n  margin-block-end: var(--calcite-stepper-item-spacing-unit-s);\n}\n\n:host .container {\n  @apply text-color-3\n    border-color-3\n    relative\n    flex\n    flex-grow\n    cursor-pointer\n    flex-col\n    border-0\n    border-t-2\n    border-solid\n    no-underline\n    outline-none\n    duration-150\n    ease-in-out;\n}\n\n// focus styles\n:host {\n  @apply focus-base;\n}\n:host(:focus) {\n  @apply focus-outset;\n}\n\n// .stepper-item-header / content\n:host .stepper-item-header {\n  @apply flex cursor-pointer items-start;\n}\n\n:host .stepper-item-content,\n:host .stepper-item-header {\n  @apply duration-150 ease-in-out;\n  padding-block: var(--calcite-stepper-item-spacing-unit-l);\n  padding-inline-end: var(--calcite-stepper-item-spacing-unit-m);\n  text-align: start;\n}\n\n:host .stepper-item-header * {\n  @apply inline-flex\n    items-center\n    duration-150\n    ease-in-out;\n}\n\n:host .stepper-item-content {\n  @apply text-n2-wrap\n    hidden\n    w-full\n    flex-col;\n}\n\n// stepper item icon\n:host .stepper-item-icon {\n  margin-inline-end: var(--calcite-stepper-item-spacing-unit-m);\n  @apply text-color-3\n    opacity-disabled\n    mt-px\n    inline-flex\n    h-3\n    flex-shrink-0\n    self-start\n    duration-150\n    ease-in-out;\n}\n\n// stepper item title\n:host .stepper-item-header-text {\n  @apply flex-col;\n  text-align: initial;\n  margin-inline-end: auto;\n}\n\n:host .stepper-item-heading,\n:host .stepper-item-description {\n  @apply flex w-full;\n}\n:host .stepper-item-heading {\n  @apply text-color-2 mb-1 font-medium;\n}\n:host .stepper-item-description {\n  @apply text-color-3;\n}\n\n:host .stepper-item-number {\n  @apply text-color-3\n    font-medium\n    duration-150\n    ease-in-out;\n  margin-inline-end: var(--calcite-stepper-item-spacing-unit-m);\n}\n\n@include disabled();\n\n:host([complete]) .container {\n  // todo dark mode\n  border-color: rgba($h-bb-060, 0.5);\n  & .stepper-item-icon {\n    color: theme(\"backgroundColor.brand\");\n  }\n}\n\n:host([error]) .container {\n  @apply border-t-color-danger;\n  & .stepper-item-number {\n    color: theme(\"backgroundColor.danger\");\n  }\n  & .stepper-item-icon {\n    @apply opacity-100;\n    color: theme(\"backgroundColor.danger\");\n  }\n}\n\n:host(:hover:not([disabled]):not([selected])) .container,\n:host(:focus:not([disabled]):not([selected])) .container {\n  @apply border-t-color-brand;\n\n  & .stepper-item-heading {\n    @apply text-color-1;\n  }\n  & .stepper-item-description {\n    @apply text-color-2;\n  }\n}\n\n:host([error]:hover:not([disabled]):not([selected])) .container,\n:host([error]:focus:not([disabled]):not([selected])) .container {\n  @apply border-t-color-danger-hover;\n}\n\n:host([selected]) .container {\n  border-block-start-color: theme(\"backgroundColor.brand\");\n  & .stepper-item-heading {\n    @apply text-color-1;\n  }\n  & .stepper-item-description {\n    @apply text-color-2;\n  }\n  & .stepper-item-number {\n    color: theme(\"backgroundColor.brand\");\n  }\n\n  & .stepper-item-icon {\n    color: theme(\"backgroundColor.brand\");\n    @apply opacity-100;\n  }\n}\n\n:host([selected]) .container {\n  & .stepper-item-content {\n    @apply flex;\n  }\n}\n\n:host([layout=\"vertical\"]) .container {\n  @apply border-color-3\n  mx-0\n  mt-0\n  flex-auto\n  border-t-0\n  border-solid\n  py-0;\n  border-inline-start-width: theme(\"borderWidth.2\");\n  padding-inline-start: var(--calcite-stepper-item-spacing-unit-l);\n\n  & .stepper-item-icon {\n    @apply order-3 mt-px mb-0;\n    padding-inline-start: var(--calcite-stepper-item-spacing-unit-s);\n    margin-inline-start: theme(\"margin.auto\");\n  }\n  & .stepper-item-header {\n    padding-inline-end: theme(\"padding.0\");\n  }\n  & .stepper-item-content {\n    @apply p-0;\n  }\n}\n\n:host([layout=\"vertical\"][complete]) .container {\n  border-color: rgba($h-bb-060, 0.5);\n}\n:host([layout=\"vertical\"][complete]:hover:not([disabled]):not([selected])) .container,\n:host([layout=\"vertical\"][complete]:focus:not([disabled]):not([selected])) .container {\n  @apply border-color-brand;\n}\n:host([layout=\"vertical\"][error]) .container {\n  @apply border-color-danger;\n}\n:host([layout=\"vertical\"][selected]) .container {\n  @apply border-color-brand;\n\n  & .stepper-item-content:not(:empty) {\n    margin-block-end: var(--calcite-stepper-item-spacing-unit-l);\n  }\n}\n:host([layout=\"vertical\"]:hover:not([disabled]):not([selected])) .container,\n:host([layout=\"vertical\"]:focus:not([disabled]):not([selected])) .container {\n  border-color: rgba($h-bb-060, 0.5);\n}\n:host([layout=\"vertical\"][error]:hover:not([disabled]):not([selected])) .container,\n:host([layout=\"vertical\"][error]:focus:not([disabled]):not([selected])) .container {\n  @apply border-color-danger-hover;\n}\n\n:host([layout=\"horizontal\"]),\n:host([layout=\"horizontal-single\"]) {\n  display: contents;\n\n  .container {\n    display: contents;\n  }\n\n  .stepper-item-header {\n    @apply border-color-3\n    border-0\n    border-solid\n    border-t-2\n    focus-base;\n    grid-row: items;\n\n    &:focus {\n      @apply focus-outset duration-0;\n    }\n  }\n\n  .stepper-item-content {\n    @apply cursor-auto duration-150 ease-in-out;\n    padding-block: 0;\n    padding-inline-end: var(--calcite-stepper-item-spacing-unit-m);\n    text-align: start;\n  }\n}\n\n:host([layout=\"vertical\"]) {\n  .stepper-item-header:focus {\n    @apply duration-0;\n  }\n}\n\n:host([layout=\"horizontal\"][disabled]),\n:host([layout=\"horizontal-single\"][disabled]) {\n  .stepper-item-header {\n    @extend %disabled-host-only;\n  }\n}\n\n:host([layout=\"horizontal-single\"]) {\n  .stepper-item-header {\n    grid-area: 1 / 1 / 1 / -1;\n  }\n}\n\n:host([layout=\"horizontal\"]),\n:host([layout=\"horizontal-single\"]) {\n  .stepper-item-content {\n    grid-area: 2 / 1 / 2 / -1;\n  }\n}\n\n:host([layout=\"horizontal\"][complete]),\n:host([layout=\"horizontal-single\"][complete]) {\n  .stepper-item-header {\n    border-color: rgba($h-bb-060, 0.5);\n  }\n}\n:host([layout=\"horizontal\"][complete]:hover:not([disabled]):not([selected])),\n:host([layout=\"horizontal\"][complete]:focus:not([disabled]):not([selected])),\n:host([layout=\"horizontal-single\"][complete]:hover:not([disabled]):not([selected])),\n:host([layout=\"horizontal-single\"][complete]:focus:not([disabled]):not([selected])) {\n  .stepper-item-header {\n    @apply border-color-brand;\n  }\n}\n:host([layout=\"horizontal\"][error]),\n:host([layout=\"horizontal-single\"][error]) {\n  .stepper-item-header {\n    @apply border-color-danger;\n  }\n}\n:host([layout=\"horizontal\"][selected]),\n:host([layout=\"horizontal-single\"][selected]) {\n  .stepper-item-header {\n    @apply border-color-brand;\n  }\n}\n:host([layout=\"horizontal\"]:hover:not([disabled]):not([selected])),\n:host([layout=\"horizontal\"]:focus:not([disabled]):not([selected])),\n:host([layout=\"horizontal-single\"]:hover:not([disabled]):not([selected])),\n:host([layout=\"horizontal-single\"]:focus:not([disabled]):not([selected])) {\n  .stepper-item-header {\n    border-color: rgba($h-bb-060, 0.5);\n  }\n}\n:host([layout=\"horizontal\"][error]:hover:not([disabled]):not([selected])),\n:host([layout=\"horizontal\"][error]:focus:not([disabled]):not([selected])),\n:host([layout=\"horizontal-single\"][error]:hover:not([disabled]):not([selected])),\n:host([layout=\"horizontal-single\"][error]:focus:not([disabled]):not([selected])) {\n  .stepper-item-header {\n    @apply border-color-danger-hover;\n  }\n}\n\n@media (forced-colors: active) {\n  :host .container {\n    outline-width: 0;\n    outline-offset: 0;\n  }\n\n  :host(:focus),\n  :host(:focus-visible) {\n    outline-color: canvasText;\n  }\n\n  :host([selected]) .container {\n    border-block-start-color: highlight;\n    & .stepper-item-number {\n      color: highlight;\n    }\n    & .stepper-item-icon {\n      color: highlight;\n    }\n  }\n\n  :host([layout=\"vertical\"][selected]) .container {\n    border-color: highlight;\n  }\n}\n\n:host([layout=\"horizontal-single\"]) .stepper-item-header {\n  @apply border-none box-border\n  me-0;\n  inline-size: 100%;\n  padding-inline: calc(var(--calcite-internal-stepper-action-inline-size) + 0.5rem);\n}\n\n:host([layout=\"horizontal-single\"][error]) .container {\n  & .stepper-item-number {\n    color: theme(\"backgroundColor.danger\");\n  }\n  & .stepper-item-icon {\n    @apply opacity-100;\n    color: theme(\"backgroundColor.danger\");\n  }\n}\n\n:host([layout=\"horizontal-single\"][error][selected]),\n:host([layout=\"horizontal-single\"][complete][selected]) .container {\n  @apply text-color-3;\n  & .stepper-item-heading {\n    @apply text-color-2;\n  }\n}\n\n:host([layout=\"horizontal-single\"][complete][selected]) .container {\n  & .stepper-item-icon {\n    @apply opacity-disabled;\n  }\n  & .stepper-item-number {\n    @apply text-color-3;\n  }\n}\n\n.visually-hidden {\n  @apply sr-only;\n}\n\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport { Scale } from \"../interfaces\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport {\n  StepperItemChangeEventDetail,\n  StepperItemEventDetail,\n  StepperItemKeyEventDetail,\n  StepperLayout,\n} from \"../stepper/interfaces\";\nimport {\n  numberStringFormatter,\n  LocalizedComponent,\n  disconnectLocalized,\n  connectLocalized,\n  NumberingSystem,\n} from \"../../utils/locale\";\nimport {\n  setUpLoadableComponent,\n  setComponentLoaded,\n  LoadableComponent,\n  componentFocusable,\n} from \"../../utils/loadable\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { CSS } from \"./resources\";\nimport { StepperItemMessages } from \"./assets/stepper-item/t9n\";\n\n/**\n * @slot - A slot for adding custom content.\n */\n@Component({\n  tag: \"calcite-stepper-item\",\n  styleUrl: \"stepper-item.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class StepperItem\n  implements InteractiveComponent, LocalizedComponent, LoadableComponent, T9nComponent\n{\n  //--------------------------------------------------------------------------\n  //\n  //  Public Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * When `true`, the component is selected.\n   */\n  @Prop({ reflect: true, mutable: true }) selected = false;\n\n  @Watch(\"selected\")\n  selectedHandler(): void {\n    if (this.selected) {\n      this.emitRequestedItem();\n    }\n  }\n\n  /** When `true`, the step has been completed. */\n  @Prop({ reflect: true }) complete = false;\n\n  /** When `true`, the component contains an error that requires resolution from the user. */\n  @Prop({ reflect: true }) error = false;\n\n  /** When `true`, interaction is prevented and the component is displayed with lower opacity. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** The component header text. */\n  @Prop() heading: string;\n\n  /** A description for the component. Displays below the header text. */\n  @Prop() description: 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  /**\n   * @internal\n   */\n  @Prop() numberingSystem: NumberingSystem;\n\n  // watch for removal of disabled to register step\n  @Watch(\"disabled\")\n  disabledWatcher(): void {\n    this.registerStepperItem();\n  }\n\n  /**\n   * When `true`, displays a status icon in the `calcite-stepper-item` heading inherited from parent `calcite-stepper`.\n   *\n   * @internal\n   */\n  @Prop() icon = false;\n\n  /**\n   * Specifies the layout of the `calcite-stepper-item` inherited from parent `calcite-stepper`, defaults to `horizontal`.\n   *\n   * @internal\n   */\n  @Prop({ reflect: true }) layout: StepperLayout;\n\n  /**\n   * Made into a prop for testing purposes only\n   *\n   * @internal\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messages: StepperItemMessages;\n\n  /**\n   * When `true`, displays the step number in the `calcite-stepper-item` heading inherited from parent `calcite-stepper`.\n   *\n   * @internal\n   */\n  @Prop() numbered = false;\n\n  /**\n   * Specifies the size of the component inherited from the `calcite-stepper`, defaults to `m`.\n   *\n   * @internal\n   */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  /**\n   * Use this property to override individual strings used by the component.\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messageOverrides: Partial<StepperItemMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Internal State/Props\n  //\n  //--------------------------------------------------------------------------\n\n  @State() defaultMessages: StepperItemMessages;\n\n  @State() effectiveLocale = \"\";\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleWatcher(locale: string): void {\n    numberStringFormatter.numberFormatOptions = {\n      locale,\n      numberingSystem: this.numberingSystem,\n      useGrouping: false,\n    };\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  headerEl: HTMLDivElement;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * @internal\n   */\n  @Event({ cancelable: false })\n  calciteInternalStepperItemKeyEvent: EventEmitter<StepperItemKeyEventDetail>;\n\n  /**\n   * @internal\n   */\n  @Event({ cancelable: false })\n  calciteInternalStepperItemSelect: EventEmitter<StepperItemEventDetail>;\n\n  /**\n   * @internal\n   */\n  @Event({ cancelable: false })\n  calciteInternalUserRequestedStepperItemSelect: EventEmitter<StepperItemChangeEventDetail>;\n\n  /**\n   * @internal\n   */\n  @Event({ cancelable: false })\n  calciteInternalStepperItemRegister: EventEmitter<StepperItemEventDetail>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectInteractive(this);\n    connectLocalized(this);\n    connectMessages(this);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    setUpLoadableComponent(this);\n    this.parentStepperEl = this.el.parentElement as HTMLCalciteStepperElement;\n    this.itemPosition = this.getItemPosition();\n    this.registerStepperItem();\n\n    if (this.selected) {\n      this.emitRequestedItem();\n    }\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    disconnectLocalized(this);\n    disconnectMessages(this);\n  }\n\n  render(): VNode {\n    return (\n      <Host\n        aria-current={this.selected ? \"step\" : \"false\"}\n        onClick={this.handleItemClick}\n        onKeyDown={this.keyDownHandler}\n        tabIndex={this.disabled ? -1 : 0}\n      >\n        <InteractiveContainer disabled={this.disabled}>\n          <div class={CSS.container}>\n            {this.complete && (\n              <span aria-live=\"polite\" class={CSS.visuallyHidden}>\n                {this.messages.complete}\n              </span>\n            )}\n            <div\n              class={CSS.stepperItemHeader}\n              tabIndex={\n                /* additional tab index logic needed because of display: contents */\n                this.layout === \"horizontal\" && !this.disabled ? 0 : null\n              }\n              // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)\n              ref={(el) => (this.headerEl = el)}\n            >\n              {this.icon ? this.renderIcon() : null}\n              {this.numbered ? (\n                <div class={CSS.stepperItemNumber}>{this.renderNumbers()}.</div>\n              ) : null}\n              <div class={CSS.stepperItemHeaderText}>\n                <span class={CSS.stepperItemHeading}>{this.heading}</span>\n                <span class={CSS.stepperItemDescription}>{this.description}</span>\n              </div>\n            </div>\n            <div class={CSS.stepperItemContent}>\n              <slot />\n            </div>\n          </div>\n        </InteractiveContainer>\n      </Host>\n    );\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Event Listeners\n  //\n  //--------------------------------------------------------------------------\n\n  @Listen(\"calciteInternalStepperItemChange\", { target: \"body\" })\n  updateActiveItemOnChange(event: CustomEvent<StepperItemChangeEventDetail>): void {\n    if (\n      event.target === this.parentStepperEl ||\n      event.composedPath().includes(this.parentStepperEl)\n    ) {\n      this.selectedPosition = event.detail.position;\n      this.determineSelectedItem();\n    }\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /** Sets focus on the component. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n\n    (this.layout === \"vertical\" ? this.el : this.headerEl)?.focus();\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private State/Props\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteStepperItemElement;\n\n  /** position within parent */\n  private itemPosition: number;\n\n  /** the latest requested item position*/\n  private selectedPosition: number;\n\n  /** the parent stepper component */\n  private parentStepperEl: HTMLCalciteStepperElement;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  private keyDownHandler = (event: KeyboardEvent): void => {\n    if (!this.disabled && event.target === this.el) {\n      switch (event.key) {\n        case \" \":\n        case \"Enter\":\n          this.emitUserRequestedItem();\n          event.preventDefault();\n          break;\n        case \"ArrowUp\":\n        case \"ArrowDown\":\n        case \"ArrowLeft\":\n        case \"ArrowRight\":\n        case \"Home\":\n        case \"End\":\n          this.calciteInternalStepperItemKeyEvent.emit({ item: event });\n          event.preventDefault();\n          break;\n      }\n    }\n  };\n\n  private renderIcon(): VNode {\n    let path = \"circle\";\n\n    if (this.selected && (this.layout !== \"horizontal-single\" || (!this.error && !this.complete))) {\n      path = \"circleF\";\n    } else if (this.error) {\n      path = \"exclamationMarkCircleF\";\n    } else if (this.complete) {\n      path = \"checkCircleF\";\n    }\n\n    return (\n      <calcite-icon class=\"stepper-item-icon\" flipRtl={this.iconFlipRtl} icon={path} scale=\"s\" />\n    );\n  }\n\n  private determineSelectedItem(): void {\n    this.selected = !this.disabled && this.itemPosition === this.selectedPosition;\n  }\n\n  private registerStepperItem(): void {\n    this.calciteInternalStepperItemRegister.emit({\n      position: this.itemPosition,\n    });\n  }\n\n  private handleItemClick = (event: MouseEvent): void => {\n    if (\n      this.disabled ||\n      (this.layout === \"horizontal\" &&\n        event\n          .composedPath()\n          .some((el) => (el as HTMLElement).classList?.contains(\"stepper-item-content\")))\n    ) {\n      return;\n    }\n\n    this.emitUserRequestedItem();\n  };\n\n  private emitUserRequestedItem = (): void => {\n    this.emitRequestedItem();\n    if (!this.disabled) {\n      const position = this.itemPosition;\n\n      this.calciteInternalUserRequestedStepperItemSelect.emit({\n        position,\n      });\n    }\n  };\n\n  private emitRequestedItem = (): void => {\n    if (!this.disabled) {\n      const position = this.itemPosition;\n\n      this.calciteInternalStepperItemSelect.emit({\n        position,\n      });\n    }\n  };\n\n  private getItemPosition(): number {\n    return Array.from(this.parentStepperEl?.querySelectorAll(\"calcite-stepper-item\")).indexOf(\n      this.el,\n    );\n  }\n\n  renderNumbers(): string {\n    numberStringFormatter.numberFormatOptions = {\n      locale: this.effectiveLocale,\n      numberingSystem: this.numberingSystem,\n      useGrouping: false,\n    };\n    return numberStringFormatter.numberFormatter.format(this.itemPosition + 1);\n  }\n}\n"],"mappings":"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"}

package/dist/calcite/p-81d8c3e6.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.8.0-next.2
+ */
+import{r as t,c as e,h as i,H as n,g as s,e as o,F as a}from"./p-2a6032f9.js";import{A as c,k as r,g as l,B as d,t as h}from"./p-28164ad0.js";import{g as b}from"./p-deb0d3fd.js";import{a as f,b as u,d as p}from"./p-4b431c6f.js";import{c as v}from"./p-46680754.js";import{c as g,d as m}from"./p-a91b3b05.js";import{c as k,s as y,d as x,u as w}from"./p-183f5d27.js";import{C as T}from"./p-fe3db953.js";import{c as z,d as C,I,u as A}from"./p-0fa6ece4.js";import{g as L}from"./p-69f33aa2.js";import"./p-aba08c28.js";import"./p-0278cfca.js";const H={container:"container",content:"content"};const S=":host([selected]) section,:host([selected]) .container{display:block}:host{display:none;block-size:100%;inline-size:100%}:host([selected]){display:block;block-size:100%;inline-size:100%;overflow:auto}.content{box-sizing:border-box;padding-block:var(--calcite-internal-tab-content-block-padding)}.scale-s{--calcite-internal-tab-content-block-padding:var(--calcite-tab-content-block-padding, 0.25rem);font-size:var(--calcite-font-size--2);line-height:1rem}.scale-m{--calcite-internal-tab-content-block-padding:var(--calcite-tab-content-block-padding, 0.5rem);font-size:var(--calcite-font-size--1);line-height:1rem}.scale-l{--calcite-internal-tab-content-block-padding:var(--calcite-tab-content-block-padding, 0.625rem);font-size:var(--calcite-font-size-0);line-height:1.25rem}section,.container{display:none;block-size:100%;inline-size:100%}.container{outline-color:transparent}.container:focus{outline:2px solid var(--calcite-ui-focus-color, 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([hidden]){display:none}[hidden]{display:none}";const j=S;const B=class{constructor(i){t(this,i);this.calciteInternalTabRegister=e(this,"calciteInternalTabRegister",6);this.guid=`calcite-tab-title-${b()}`;this.tab=undefined;this.selected=false;this.scale="m";this.labeledBy=undefined}render(){const t=this.el.id||this.guid;return i(n,{key:"c923f28e4deb1605d1bf309bec62ac71c7f078d1","aria-labelledby":this.labeledBy,id:t},i("div",{key:"9dee3aa375cea8d81303095120488b8d7c80aa06",class:{[H.container]:true,[`scale-${this.scale}`]:true},role:"tabpanel",tabIndex:this.selected?0:-1},i("section",{key:"3f27c348116009039f4c1473c920b09cd44412d6",class:H.content},i("slot",{key:"16831180400baf93ce74d825f906b9c2394fb925"}))))}connectedCallback(){this.parentTabsEl=this.el.closest("calcite-tabs")}componentDidLoad(){this.calciteInternalTabRegister.emit()}disconnectedCallback(){document.body?.dispatchEvent(new CustomEvent("calciteTabUnregister",{detail:this.el}))}internalTabChangeHandler(t){const e=t.composedPath().find((t=>t.tagName==="CALCITE-TABS"));if(e!==this.parentTabsEl){return}if(this.tab){this.selected=this.tab===t.detail.tab}else{this.getTabIndex().then((e=>{this.selected=e===t.detail.tab}))}t.stopPropagation()}async getTabIndex(){return Array.prototype.indexOf.call(c(this.el.parentElement.children).filter((t=>t.matches("calcite-tab"))),this.el)}async updateAriaInfo(t=[],e=[]){this.labeledBy=e[t.indexOf(this.el.id)]||null}get el(){return s(this)}};B.style=j;const E={chevronRight:"chevron-right",chevronLeft:"chevron-left"};const R={activeIndicatorContainer:"tab-nav-active-indicator-container",container:"tab-nav",containerHasEndTabTitleOverflow:"tab-nav--end-overflow",containerHasStartTabTitleOverflow:"tab-nav--start-overflow",scrollButton:"scroll-button",scrollButtonContainer:"scroll-button-container",scrollBackwardContainerButton:"scroll-button-container--backward",scrollForwardContainerButton:"scroll-button-container--forward",tabTitleSlotWrapper:"tab-titles-slot-wrapper"};const F=':host{--calcite-internal-tab-nav-gradient-start-side:left;--calcite-internal-tab-nav-gradient-end-side:right;position:relative;display:flex}.scale-s{--calcite-internal-tab-nav-scroller-button-width:24px;min-block-size:1.5rem}.scale-m{--calcite-internal-tab-nav-scroller-button-width:32px;min-block-size:2rem}.scale-l{--calcite-internal-tab-nav-scroller-button-width:44px;min-block-size:2.75rem}.calcite--rtl{--calcite-internal-tab-nav-gradient-start-side:right;--calcite-internal-tab-nav-gradient-end-side:left}.tab-nav--start-overflow .tab-nav-active-indicator-container,.tab-nav--start-overflow .tab-titles-slot-wrapper{mask-image:linear-gradient(to var(--calcite-internal-tab-nav-gradient-end-side), transparent, transparent var(--calcite-internal-tab-nav-scroller-button-width), white var(--calcite-internal-tab-nav-scroller-button-width), white 51%)}.tab-nav--end-overflow .tab-nav-active-indicator-container,.tab-nav--end-overflow .tab-titles-slot-wrapper{mask-image:linear-gradient(to var(--calcite-internal-tab-nav-gradient-start-side), transparent, transparent var(--calcite-internal-tab-nav-scroller-button-width), white var(--calcite-internal-tab-nav-scroller-button-width), white 51%)}.tab-nav--start-overflow.tab-nav--end-overflow .tab-nav-active-indicator-container,.tab-nav--start-overflow.tab-nav--end-overflow .tab-titles-slot-wrapper{mask-image:linear-gradient(to var(--calcite-internal-tab-nav-gradient-end-side), transparent, transparent var(--calcite-internal-tab-nav-scroller-button-width), white var(--calcite-internal-tab-nav-scroller-button-width), white 51%, transparent 51%), linear-gradient(to var(--calcite-internal-tab-nav-gradient-start-side), transparent, transparent var(--calcite-internal-tab-nav-scroller-button-width), white var(--calcite-internal-tab-nav-scroller-button-width), white 51%, transparent 51%)}.tab-nav::-webkit-scrollbar{display:none;-ms-overflow-style:none;scrollbar-width:none}:host([layout=center]) ::slotted(calcite-tab-title){display:flex;flex-grow:1;flex-shrink:0;min-inline-size:auto;white-space:nowrap}:host([layout=center]) ::slotted(calcite-tab-title[selected]){overflow:unset}:host(:not([bordered])) .scale-l{--calcite-internal-tab-nav-gap:var(--calcite-size-xxl)}:host(:not([bordered])) .scale-m{--calcite-internal-tab-nav-gap:var(--calcite-size-xl)}:host(:not([bordered])) .scale-s{--calcite-internal-tab-nav-gap:var(--calcite-size-lg)}:host(:not([bordered])) .tab-titles-slot-wrapper{gap:var(--calcite-internal-tab-nav-gap)}:host([layout=center]:not([bordered])) .tab-titles-slot-wrapper{padding-inline:var(--calcite-spacing-xxl)}.tab-nav,.tab-titles-slot-wrapper{display:flex;inline-size:100%;justify-content:flex-start;overflow:hidden;white-space:nowrap}.tab-nav-active-indicator-container{position:absolute;inset-inline:0px;inset-block-end:0px;block-size:0.125rem;inline-size:100%;overflow:hidden}.tab-nav-active-indicator{position:absolute;inset-block-end:0px;display:block;block-size:0.125rem;background-color:var(--calcite-color-brand);transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.scroll-button-container{position:absolute;inset-block:0px}.scroll-button-container calcite-button{--calcite-offset-invert-focus:1;--calcite-color-text-1:var(--calcite-color-text-3);block-size:100%}.scroll-button-container calcite-button:hover{--calcite-color-text-1:unset;--calcite-color-foreground-1:var(--calcite-color-transparent-hover);--calcite-color-foreground-3:var(--calcite-color-transparent)}.scroll-button-container--forward{inset-inline-end:0;z-index:var(--calcite-z-index)}.scroll-button-container--backward{inset-inline-start:0;z-index:var(--calcite-z-index)}:host(:not([bordered])) .scroll-button-container--backward::before,:host(:not([bordered])) .scroll-button-container--forward::before{background-color:var(--calcite-color-border-3);content:"";inline-size:var(--calcite-border-width-sm);inset-block-start:var(--calcite-border-width-md);inset-block-end:var(--calcite-border-width-md);position:absolute}:host(:not([bordered])) .scroll-button-container--backward::before{inset-inline-end:0}:host(:not([bordered])) .scroll-button-container--forward::before{inset-inline-start:0}:host .position-bottom .tab-nav-active-indicator{inset-block-end:unset;inset-block-start:0px}:host .position-bottom .tab-nav-active-indicator-container{inset-block-end:unset;inset-block-start:0px}:host([bordered]) .tab-nav-active-indicator-container{inset-block-end:unset}:host([bordered]) .position-bottom .tab-nav-active-indicator-container{inset-block-end:0;inset-block-start:unset}@media (forced-colors: active){.tab-nav-active-indicator{background-color:highlight}}:host([hidden]){display:none}[hidden]{display:none}';const O=F;const $=class{constructor(n){t(this,n);this.calciteTabChange=e(this,"calciteTabChange",6);this.calciteInternalTabChange=e(this,"calciteInternalTabChange",6);this.effectiveDir="ltr";this.lastScrollWheelAxis="x";this.resizeObserver=v("resize",(()=>{this.updateScrollingState();if(!this.activeIndicatorEl){return}this.updateActiveIndicator()}));this.onTabTitleWheel=t=>{t.preventDefault();const{deltaX:e,deltaY:i}=t;const n=Math.abs(e);const s=Math.abs(i);let o;if(n===s){o=this.lastScrollWheelAxis==="x"?e:i}else if(n>s){o=e;this.lastScrollWheelAxis="x"}else{o=i;this.lastScrollWheelAxis="y"}const a=(this.effectiveDir==="rtl"?-1:1)*o;t.currentTarget.scrollBy(a,0);requestAnimationFrame((()=>this.updateActiveIndicator()))};this.onSlotChange=t=>{this.intersectionObserver?.disconnect();const e=t.target.assignedElements();e.forEach((t=>{this.intersectionObserver?.observe(t)}))};this.storeContainerRef=t=>this.containerEl=t;this.storeTabTitleWrapperRef=t=>{this.tabTitleContainerEl=t;this.intersectionObserver=v("intersection",(()=>this.updateScrollingState()),{root:t,threshold:[0,.5,1]})};this.scrollToTabTitles=t=>{o((()=>{const e=this.tabTitleContainerEl;const i=e.getBoundingClientRect();const n=Array.from(this.el.querySelectorAll("calcite-tab-title"));const{effectiveDir:s}=this;if(t==="forward"){n.reverse()}let o=null;n.forEach((e=>{const n=e.getBoundingClientRect();const a=i.x+i.width;const c=n.x+n.width;if(t==="forward"&&s==="ltr"||t==="backward"&&s==="rtl"){const t=n.x>a;if(t){o=e}else{const t=c>a&&n.x>i.x;if(t){o=e}}}else{const t=c<i.x;if(t){o=e}else{const t=c<a&&n.x<i.x;if(t){o=e}}}}));if(o){const{scrollerButtonWidth:i}=this;const n=t==="forward"&&s==="ltr"||t==="backward"&&s==="rtl"?-i:o.offsetWidth-e.clientWidth+i;const a=o.offsetLeft+n;e.scrollTo({left:a,behavior:"smooth"})}}))};this.scrollToNextTabTitles=()=>this.scrollToTabTitles("forward");this.scrollToPreviousTabTitles=()=>this.scrollToTabTitles("backward");this.handleTabFocus=(t,e,i)=>{const n=r(this.enabledTabTitles,e,i);this.scrollTabTitleIntoView(n,"instant");t.stopPropagation()};this.onTabTitleScroll=()=>{this.updateActiveIndicator();this.updateScrollingState()};this.renderScrollButton=t=>{const{bordered:e,messages:n,hasOverflowingStartTabTitle:s,hasOverflowingEndTabTitle:o,scale:a}=this;const c=t==="end";return i("div",{class:{[R.scrollButtonContainer]:true,[R.scrollBackwardContainerButton]:!c,[R.scrollForwardContainerButton]:c},hidden:c&&!o||!c&&!s,key:t},i("calcite-button",{appearance:e?"outline-fill":"transparent","aria-label":c?n.nextTabTitles:n.previousTabTitles,class:{[R.scrollButton]:true},iconFlipRtl:"both",iconStart:c?E.chevronRight:E.chevronLeft,kind:"neutral",onClick:c?this.scrollToNextTabTitles:this.scrollToPreviousTabTitles,scale:a,tabIndex:-1}))};this.storageId=undefined;this.syncId=undefined;this.selectedTitle=null;this.scale="m";this.layout="inline";this.position="bottom";this.bordered=false;this.indicatorOffset=undefined;this.indicatorWidth=undefined;this.messages=undefined;this.messageOverrides=undefined;this.defaultMessages=undefined;this.effectiveLocale="";this.hasOverflowingStartTabTitle=false;this.hasOverflowingEndTabTitle=false;this.selectedTabId=undefined}onMessagesChange(){}async selectedTabIdChanged(){if(localStorage&&this.storageId&&this.selectedTabId!==undefined&&this.selectedTabId!==null){localStorage.setItem(`calcite-tab-nav-${this.storageId}`,JSON.stringify(this.selectedTabId))}this.calciteInternalTabChange.emit({tab:this.selectedTabId});this.selectedTitle=await this.getTabTitleById(this.selectedTabId)}selectedTitleChanged(){this.updateActiveIndicator()}connectedCallback(){this.parentTabsEl=this.el.closest("calcite-tabs");this.resizeObserver?.observe(this.el);g(this);k(this)}async componentWillLoad(){const t=`calcite-tab-nav-${this.storageId}`;if(localStorage&&this.storageId&&localStorage.getItem(t)){const e=JSON.parse(localStorage.getItem(t));this.selectedTabId=e}await y(this)}componentDidLoad(){this.scrollTabTitleIntoView(this.selectedTitle,"instant")}componentWillRender(){const{parentTabsEl:t}=this;this.layout=t?.layout;this.bordered=t?.bordered;this.effectiveDir=l(this.el);if(this.selectedTitle){this.updateActiveIndicator()}}componentDidRender(){if(this.tabTitles.length&&this.tabTitles.every((t=>!t.selected))&&!this.selectedTabId){this.tabTitles[0].getTabIdentifier().then((t=>{this.calciteInternalTabChange.emit({tab:t})}))}}disconnectedCallback(){this.resizeObserver?.disconnect();m(this);x(this)}render(){const t=`${this.indicatorWidth}px`;const e=`${this.indicatorOffset}px`;const s=this.effectiveDir!=="rtl"?{width:t,left:e}:{width:t,right:e};return i(n,{key:"a287178bbe6715e9a1a5daaa91a58d11ad2ebf2c",role:"tablist"},i("div",{key:"3d0cfca9f772e9f6d607b078108ea406e3fbdfa0",class:{[R.container]:true,[R.containerHasStartTabTitleOverflow]:!!this.hasOverflowingStartTabTitle,[R.containerHasEndTabTitleOverflow]:!!this.hasOverflowingEndTabTitle,[`scale-${this.scale}`]:true,[`position-${this.position}`]:true,[T.rtl]:this.effectiveDir==="rtl"},ref:this.storeContainerRef},this.renderScrollButton("start"),i("div",{key:"8ebaff43e78dc1214320a6609856203a2836b504",class:{[R.tabTitleSlotWrapper]:true},onScroll:this.onTabTitleScroll,onWheel:this.onTabTitleWheel,ref:this.storeTabTitleWrapperRef},i("slot",{key:"1bf4428d1a205dbbda01532403bc398687d0fbc0",onSlotchange:this.onSlotChange})),i("div",{key:"fa0c101b34ee3384152f5895b3d0fbe4403820cd",class:{[R.activeIndicatorContainer]:true},ref:t=>this.activeIndicatorContainerEl=t},i("div",{key:"d316067e0b3f68fe0516c1520d467bdc8712c7dc",class:"tab-nav-active-indicator",style:s,ref:t=>this.activeIndicatorEl=t})),this.renderScrollButton("end")))}focusPreviousTabHandler(t){this.handleTabFocus(t,t.target,"previous")}focusNextTabHandler(t){this.handleTabFocus(t,t.target,"next")}focusFirstTabHandler(t){this.handleTabFocus(t,t.target,"first")}focusLastTabHandler(t){this.handleTabFocus(t,t.target,"last")}internalActivateTabHandler(t){const e=t.target;this.selectedTabId=t.detail.tab?t.detail.tab:this.getIndexOfTabTitle(e);t.stopPropagation();this.scrollTabTitleIntoView(e)}scrollTabTitleIntoView(t,e="smooth"){if(!t){return}o((()=>{const i=this.effectiveDir==="ltr";const n=this.tabTitleContainerEl;const s=n.getBoundingClientRect();const o=t.getBoundingClientRect();const a=n.scrollLeft;const c=i?this.hasOverflowingStartTabTitle:this.hasOverflowingEndTabTitle;const r=i?this.hasOverflowingEndTabTitle:this.hasOverflowingStartTabTitle;if(o.left<s.left+(c?this.scrollerButtonWidth:0)){const t=a+(o.left-s.left)-this.scrollerButtonWidth;n.scrollTo({left:t,behavior:e})}else if(o.right>s.right-(r?this.scrollerButtonWidth:0)){const t=a+(o.right-s.right)+this.scrollerButtonWidth;n.scrollTo({left:t,behavior:e})}}))}activateTabHandler(t){this.calciteTabChange.emit();t.stopPropagation()}internalCloseTabHandler(t){const e=t.target;this.handleTabTitleClose(e);t.stopPropagation()}updateTabTitles(t){if(t.target.selected){this.selectedTabId=t.detail}}globalInternalTabChangeHandler(t){if(this.syncId&&t.target!==this.el&&t.target.syncId===this.syncId&&this.selectedTabId!==t.detail.tab){this.selectedTabId=t.detail.tab}t.stopPropagation()}iconStartChangeHandler(){this.updateActiveIndicator()}effectiveLocaleChange(){w(this,this.effectiveLocale)}get scrollerButtonWidth(){const{scale:t}=this;return parseInt(t==="s"?f:t==="m"?u:p)}updateActiveIndicator(){const t=this.tabTitleContainerEl?.scrollLeft;const e=this.containerEl?.scrollLeft;const i=this.activeIndicatorContainerEl?.offsetWidth;const n=this.selectedTitle?.offsetLeft;const s=this.selectedTitle?.offsetWidth;const o=i-n-s;const a=this.effectiveDir==="ltr"?n:o;const c=this.effectiveDir==="ltr"?-1:1;this.indicatorOffset=a+c*(e+t);this.indicatorWidth=this.selectedTitle?.offsetWidth}updateScrollingState(){const t=this.tabTitleContainerEl;if(!t){return}let e;let i;const n=t.scrollLeft;const s=t.clientWidth;const o=t.scrollWidth;if(this.effectiveDir==="ltr"){e=n>0;i=n+s<o}else{e=n<0;i=n!==-(o-s)}this.hasOverflowingStartTabTitle=e;this.hasOverflowingEndTabTitle=i}getIndexOfTabTitle(t,e=this.tabTitles){return e.indexOf(t)}async getTabTitleById(t){return Promise.all(this.tabTitles.map((t=>t.getTabIdentifier()))).then((e=>this.tabTitles[e.indexOf(t)]))}get tabTitles(){return d(this.el,"calcite-tab-title")}get enabledTabTitles(){return d(this.el,"calcite-tab-title:not([disabled])").filter((t=>!t.closed))}handleTabTitleClose(t){const{tabTitles:e}=this;const i=t.selected;const n=e.reduce(((t,e,i)=>!e.closed?[...t,i]:t),[]);const s=n.length;if(s===1&&e[n[0]].closable){e[n[0]].closable=false;this.selectedTabId=n[0];if(i){e[n[0]].activateTab()}}else if(s>1){const i=e.findIndex((e=>e===t));const o=n.find((t=>t>i));if(this.selectedTabId===i){this.selectedTabId=o?o:s-1;e[this.selectedTabId].activateTab()}}requestAnimationFrame((()=>{this.updateActiveIndicator();e[this.selectedTabId].focus()}))}static get assetsDirs(){return["assets"]}get el(){return s(this)}static get watchers(){return{messageOverrides:["onMessagesChange"],selectedTabId:["selectedTabIdChanged"],selectedTitle:["selectedTitleChanged"],effectiveLocale:["effectiveLocaleChange"]}}};$.style=O;const D={closeButton:"close-button",container:"container",content:"content",contentHasText:"content--has-text",iconEnd:"icon-end",iconPresent:"icon-present",iconStart:"icon-start",titleIcon:"calcite-tab-title--icon"};const P={close:"x"};const W=":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:block;outline:2px solid transparent;outline-offset:2px;margin-inline-start:0px}:host([layout=inline]){flex:0 1 auto}:host([layout=center]){flex:1 1 auto}.content{display:flex;align-items:center;justify-content:center}.scale-s .content{padding-block:0.25rem;font-size:var(--calcite-font-size--2);line-height:1rem}.scale-m .content{padding-block:0.5rem;font-size:var(--calcite-font-size--1);line-height:1rem}.scale-l .content{padding-block:0.625rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}:host([closable]) .content{box-sizing:border-box;block-size:100%;border-block-end-color:transparent}:host([layout=inline]) .content,:host([layout=center]) .content{padding-inline:0.25rem}:host([layout=center]) .scale-s,:host([layout=center]) .scale-m,:host([layout=center]) .scale-l{margin-block:0px;justify-content:center;text-align:center}:host([layout=center]) .scale-s .content,:host([layout=center]) .scale-m .content,:host([layout=center]) .scale-l .content{flex:1 1 auto;flex-grow:1}.container{box-sizing:border-box;display:flex;block-size:100%;inline-size:100%;cursor:pointer;align-content:center;justify-content:space-between;border-block-end-width:2px;padding-inline:0px;font-size:var(--calcite-font-size--1);line-height:1rem;color:var(--calcite-color-text-3);outline-color:transparent;transition:background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start inset-size, opacity, outline-color, transform var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;border-block-end-color:transparent;border-block-end-style:solid}:host([position=bottom]) .container{border-block-end-width:0px;border-block-start-width:2px;border-block-start-color:transparent;border-block-start-style:solid}:host([closed]){display:none}:host([selected]) .container{border-color:transparent;color:var(--calcite-color-text-1)}:host(:focus) .container{outline:2px solid var(--calcite-ui-focus-color, 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(:focus) .container:focus-within{outline-color:transparent}:host(:active) a,:host(:focus) a,:host(:hover) a{border-color:var(--calcite-color-border-2);color:var(--calcite-color-text-1);text-decoration-line:none}:host([disabled]) .container{pointer-events:none;opacity:0.5}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.calcite-tab-title--icon{position:relative;margin:0px;display:inline-flex;align-self:center}.calcite-tab-title--icon svg{transition:background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start inset-size, opacity, outline-color, transform var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s}.content--has-text{padding:0.25rem}.content--has-text .calcite-tab-title--icon.icon-start{margin-inline-end:0.5rem}.content--has-text .calcite-tab-title--icon.icon-end{margin-inline-start:0.5rem}.close-button{display:flex;cursor:pointer;appearance:none;align-content:center;align-items:center;justify-content:center;align-self:center;border-style:none;background-color:var(--calcite-color-foreground-1);padding:0.25rem;color:var(--calcite-color-text-3);outline-color:transparent;transition:background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start inset-size, opacity, outline-color, transform var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;background-color:var(--calcite-button-transparent-1);margin-inline-start:auto}.close-button:focus{outline:2px solid var(--calcite-ui-focus-color, 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          );outline-offset:-1px}.close-button:focus,.close-button:hover{color:var(--calcite-color-text-1);background-color:var(--calcite-color-foreground-2)}.close-button:active{color:var(--calcite-color-text-1);background-color:var(--calcite-color-foreground-3)}.close-button calcite-icon{color:inherit}:host([icon-start][icon-end]) .calcite-tab-title--icon:first-child{margin-inline-end:0.5rem}:host([bordered]){margin-inline-end:0}:host([bordered][selected]){box-shadow:inset 0px -2px var(--calcite-color-foreground-1)}:host([bordered][selected][position=bottom]){box-shadow:inset 0 2px 0 var(--calcite-color-foreground-1)}:host([bordered]:hover) .container{background-color:var(--calcite-color-transparent-hover)}:host([closable]) .container,:host([bordered]) .container{border-inline-start:1px solid transparent;border-inline-end:1px solid transparent}:host([closable]) .container .close-button,:host([bordered]) .container .close-button{margin-inline:0}:host([closable][position=bottom]) .container,:host([bordered][position=bottom]) .container{border-block-start-style:unset}:host([selected][bordered]) .container{border-inline-start-color:var(--calcite-color-border-1);border-inline-end-color:var(--calcite-color-border-1)}:host([layout=inline][bordered]) .scale-m .content,:host([layout=center][bordered]) .scale-m .content{padding-inline:0.75rem}:host([layout=inline][bordered]) .scale-s .content,:host([layout=center][bordered]) .scale-s .content{padding-inline:0.5rem}:host([layout=inline][bordered]) .scale-l .content,:host([layout=center][bordered]) .scale-l .content{padding-inline:1rem}:host([layout=inline][closable]) .scale-s .content,:host([layout=inline][closable]) .scale-m .content,:host([layout=inline][closable]) .scale-l .content{padding-inline-end:0}@media (forced-colors: active){:host{outline-width:0;outline-offset:0}:host(:focus) .container{outline-color:highlight}:host([bordered]) .container{border-block-end-style:solid}:host([bordered][position=bottom]) .container{border-block-start-style:solid}:host([bordered][selected]) .container{border-block-end-style:none}:host([bordered][position=bottom][selected]) .container{border-block-start-style:none}.close-button{z-index:var(--calcite-z-index)}}:host([hidden]){display:none}[hidden]{display:none}";const M=W;const N=class{constructor(i){t(this,i);this.calciteTabsActivate=e(this,"calciteTabsActivate",6);this.calciteInternalTabsActivate=e(this,"calciteInternalTabsActivate",6);this.calciteTabsClose=e(this,"calciteTabsClose",6);this.calciteInternalTabsClose=e(this,"calciteInternalTabsClose",6);this.calciteInternalTabsFocusNext=e(this,"calciteInternalTabsFocusNext",6);this.calciteInternalTabsFocusPrevious=e(this,"calciteInternalTabsFocusPrevious",6);this.calciteInternalTabsFocusFirst=e(this,"calciteInternalTabsFocusFirst",6);this.calciteInternalTabsFocusLast=e(this,"calciteInternalTabsFocusLast",6);this.calciteInternalTabTitleRegister=e(this,"calciteInternalTabTitleRegister",6);this.calciteInternalTabIconChanged=e(this,"calciteInternalTabIconChanged",6);this.closeClickHandler=()=>{this.closeTabTitleAndNotify()};this.mutationObserver=v("mutation",(()=>this.updateHasText()));this.resizeObserver=v("resize",(()=>{this.calciteInternalTabIconChanged.emit()}));this.guid=`calcite-tab-title-${b()}`;this.selected=false;this.closable=false;this.closed=false;this.disabled=false;this.iconEnd=undefined;this.iconFlipRtl=undefined;this.iconStart=undefined;this.layout=undefined;this.position="top";this.scale="m";this.bordered=false;this.tab=undefined;this.messages=undefined;this.messageOverrides=undefined;this.controls=undefined;this.defaultMessages=undefined;this.effectiveLocale=undefined;this.hasText=false}selectedHandler(){if(this.selected){this.activateTab(false)}}onMessagesChange(){}connectedCallback(){z(this);g(this);k(this);this.setupTextContentObserver();this.parentTabNavEl=this.el.closest("calcite-tab-nav");this.parentTabsEl=this.el.closest("calcite-tabs")}disconnectedCallback(){this.mutationObserver?.disconnect();document.body?.dispatchEvent(new CustomEvent("calciteTabTitleUnregister",{detail:this.el}));this.resizeObserver?.disconnect();C(this);m(this);x(this)}async componentWillLoad(){await y(this);{this.updateHasText()}if(this.tab&&this.selected){this.activateTab(false)}}componentWillRender(){if(this.parentTabsEl){this.layout=this.parentTabsEl.layout;this.bordered=this.parentTabsEl.bordered}}render(){const{el:t,closed:e}=this;const s=t.id||this.guid;const o=i("calcite-icon",{key:"d0676838c9b74b250bac33d00254a4058c45ea3a",class:{[D.titleIcon]:true,[D.iconStart]:true},flipRtl:this.iconFlipRtl==="start"||this.iconFlipRtl==="both",icon:this.iconStart,scale:L(this.scale)});const a=i("calcite-icon",{key:"4d16cc55e17fb13052fd3122eaade06b9bf0a5c9",class:{[D.titleIcon]:true,[D.iconEnd]:true},flipRtl:this.iconFlipRtl==="end"||this.iconFlipRtl==="both",icon:this.iconEnd,scale:L(this.scale)});return i(n,{key:"ec25cc971cb383ed1fbf16dc6b0d164bbd730d84","aria-controls":this.controls,"aria-selected":h(this.selected),id:s,role:"tab",tabIndex:this.selected&&!this.disabled?0:-1},i(I,{key:"7755e38ba5cefa289e29f5c13ed35d2fb4a4f5c7",disabled:this.disabled},i("div",{key:"23e265b3d8f38d53de75ed497d3c41dadcde2acf",class:{container:true,[D.iconPresent]:!!this.iconStart||!!this.iconEnd,[`scale-${this.scale}`]:true},hidden:e,ref:t=>this.resizeObserver?.observe(t)},i("div",{key:"848f348f409ff01f4349dcaec9342a33bf531ee1",class:{[D.content]:true,[D.contentHasText]:this.hasText}},this.iconStart?o:null,i("slot",{key:"02c60f314ed3e05bb68055496852dd65ea5246cc"}),this.iconEnd?a:null),this.renderCloseButton())))}renderCloseButton(){const{closable:t,messages:e}=this;return t?i("button",{"aria-label":e.close,class:D.closeButton,disabled:false,key:D.closeButton,onClick:this.closeClickHandler,title:e.close,type:"button",ref:t=>this.closeButtonEl=t},i("calcite-icon",{icon:P.close,scale:L(this.scale)})):null}async componentDidLoad(){this.calciteInternalTabTitleRegister.emit(await this.getTabIdentifier())}componentDidRender(){A(this)}internalTabChangeHandler(t){const e=t.composedPath().find((t=>t.tagName==="CALCITE-TABS"));if(e!==this.parentTabsEl){return}if(this.tab){this.selected=this.tab===t.detail.tab}else{this.getTabIndex().then((e=>{this.selected=e===t.detail.tab}))}t.stopPropagation()}onClick(){this.activateTab()}keyDownHandler(t){switch(t.key){case" ":case"Enter":if(!t.composedPath().includes(this.closeButtonEl)){this.activateTab();t.preventDefault()}break;case"ArrowRight":t.preventDefault();if(l(this.el)==="ltr"){this.calciteInternalTabsFocusNext.emit()}else{this.calciteInternalTabsFocusPrevious.emit()}break;case"ArrowLeft":t.preventDefault();if(l(this.el)==="ltr"){this.calciteInternalTabsFocusPrevious.emit()}else{this.calciteInternalTabsFocusNext.emit()}break;case"Home":t.preventDefault();this.calciteInternalTabsFocusFirst.emit();break;case"End":t.preventDefault();this.calciteInternalTabsFocusLast.emit();break}}async getTabIndex(){return Array.prototype.indexOf.call(c(this.el.parentElement.children).filter((t=>t.matches("calcite-tab-title"))),this.el)}async getTabIdentifier(){return this.tab?this.tab:this.getTabIndex()}async updateAriaInfo(t=[],e=[]){this.controls=t[e.indexOf(this.el.id)]||null}async activateTab(t=true){if(this.disabled||this.closed){return}const e={tab:this.tab};this.calciteInternalTabsActivate.emit(e);if(t){requestAnimationFrame((()=>this.calciteTabsActivate.emit()))}}effectiveLocaleChange(){w(this,this.effectiveLocale)}updateHasText(){this.hasText=this.el.textContent.trim().length>0}setupTextContentObserver(){this.mutationObserver?.observe(this.el,{childList:true,subtree:true})}closeTabTitleAndNotify(){this.closed=true;this.calciteInternalTabsClose.emit({tab:this.tab});this.calciteTabsClose.emit()}static get assetsDirs(){return["assets"]}get el(){return s(this)}static get watchers(){return{selected:["selectedHandler"],messageOverrides:["onMessagesChange"],effectiveLocale:["effectiveLocaleChange"]}}};N.style=M;const _={titleGroup:"title-group"};const U=":host{display:flex;flex-direction:column}:host([bordered]){box-shadow:inset 0 1px 0 var(--calcite-color-border-1);background-color:var(--calcite-color-foreground-1)}:host([bordered]) section{border-width:1px;border-style:solid;border-color:var(--calcite-color-border-1)}:host([bordered][position=bottom]){box-shadow:inset 0 1px 0 var(--calcite-color-border-1), inset 0 -1px 0 var(--calcite-color-border-1)}:host([bordered]:not([position=bottom])) ::slotted(calcite-tab-nav){margin-block-end:-1px}:host([bordered][scale=s]) section{padding:0.75rem}:host([bordered][scale=m]) section{padding:0.5rem}:host([bordered][scale=l]) section{padding:1rem}:host([position=bottom]){flex-direction:column-reverse}section{display:flex;flex-grow:1;overflow:hidden;border-block-start-width:1px;border-block-start-color:var(--calcite-color-border-1);border-block-start-style:solid}:host([position=bottom]) section{flex-direction:column-reverse;border-block-start-width:0px;border-block-end-width:1px;border-block-end-color:var(--calcite-color-border-1)}:host([position=bottom]:not([bordered])) section{border-block-end-style:solid}@media (forced-colors: active){:host([bordered]) section{border-block-start-width:0px;border-block-end-width:1px}:host([position=bottom][bordered]) section{border-block-start-width:1px;border-block-end-width:0px}}:host([hidden]){display:none}[hidden]{display:none}";const q=U;const J=class{constructor(e){t(this,e);this.mutationObserver=v("mutation",(t=>{for(const e of t){const t=e.target;if(t.nodeName==="CALCITE-TAB-NAV"||t.nodeName==="CALCITE-TAB-TITLE"||t.nodeName==="CALCITE-TAB"){this.updateItems()}}}));this.layout="inline";this.position="top";this.scale="m";this.bordered=false;this.titles=[];this.tabs=[]}handleInheritableProps(){this.updateItems()}connectedCallback(){this.mutationObserver.observe(this.el,{childList:true});this.updateItems()}async componentWillLoad(){this.updateItems()}disconnectedCallback(){this.mutationObserver?.disconnect()}render(){return i(a,{key:"c675bc7fb08cc2e5a6d9b743c9d41f7e03df0e1b"},i("slot",{key:"0c7e1f2454f89b7a3d2bbf9c031977a0c5fb0f98",name:_.titleGroup}),i("section",{key:"f6381f3444e19a210c7c41e6e815b17dd3a95f4b"},i("slot",{key:"d7b29c74a0eb3e0a94d5a79523adf0e1e38dc8d3"})))}calciteInternalTabTitleRegister(t){this.titles=[...this.titles,t.target];this.registryHandler();t.stopPropagation()}calciteTabTitleUnregister(t){this.titles=this.titles.filter((e=>e!==t.detail));this.registryHandler();t.stopPropagation()}calciteInternalTabRegister(t){this.tabs=[...this.tabs,t.target];this.registryHandler();t.stopPropagation()}calciteTabUnregister(t){this.tabs=this.tabs.filter((e=>e!==t.detail));this.registryHandler();t.stopPropagation()}updateItems(){const{position:t,scale:e}=this;const i=this.el.querySelector("calcite-tab-nav");if(i){i.position=t;i.scale=e}Array.from(this.el.querySelectorAll("calcite-tab")).forEach((t=>{if(t.parentElement===this.el){t.scale=e}}));Array.from(this.el.querySelectorAll("calcite-tab-nav > calcite-tab-title")).forEach((i=>{i.position=t;i.scale=e}))}async registryHandler(){let t;let e;if(this.tabs.some((t=>t.tab))||this.titles.some((t=>t.tab))){t=this.tabs.sort(((t,e)=>t.tab.localeCompare(e.tab))).map((t=>t.id));e=this.titles.sort(((t,e)=>t.tab.localeCompare(e.tab))).map((t=>t.id))}else{const i=await Promise.all(this.tabs.map((t=>t.getTabIndex())));const n=await Promise.all(this.titles.map((t=>t.getTabIndex())));t=i.reduce(((t,e,i)=>{t[e]=this.tabs[i].id;return t}),[]);e=n.reduce(((t,e,i)=>{t[e]=this.titles[i].id;return t}),[])}this.tabs.forEach((i=>i.updateAriaInfo(t,e)));this.titles.forEach((i=>i.updateAriaInfo(t,e)))}get el(){return s(this)}static get watchers(){return{position:["handleInheritableProps"],scale:["handleInheritableProps"]}}};J.style=q;export{B as calcite_tab,$ as calcite_tab_nav,N as calcite_tab_title,J as calcite_tabs};
+//# sourceMappingURL=p-81d8c3e6.entry.js.map