{"version":3,"names":["CSS","frame","frameAdvancing","frameRetreating","flowCss","CalciteFlowStyle0","Flow","this","itemMutationObserver","createObserver","updateFlowProps","getFlowDirection","oldFlowItemCount","newFlowItemCount","allowRetreatingDirection","allowAdvancingDirection","customItemSelectors","el","items","newItems","Array","from","querySelectorAll","filter","flowItem","closest","oldItemCount","length","newItemCount","activeItem","previousItem","forEach","itemNode","showBackButton","hidden","menuOpen","flowDirection","itemCount","back","lastItem","beforeBack","Promise","resolve","call","_error","remove","setFocus","componentFocusable","connectedCallback","observe","childList","subtree","componentWillLoad","setUpLoadableComponent","componentDidLoad","setComponentLoaded","disconnectedCallback","disconnect","handleItemBackClick","event","defaultPrevented","render","frameDirectionClasses","h","key","class"],"sources":["src/components/flow/resources.ts","src/components/flow/flow.scss?tag=calcite-flow&encapsulation=shadow","src/components/flow/flow.tsx"],"sourcesContent":["export const CSS = {\n  frame: \"frame\",\n  frameAdvancing: \"frame--advancing\",\n  frameRetreating: \"frame--retreating\",\n};\n",":host {\n  @extend %component-host;\n  @apply relative\n    flex\n    w-full\n    flex-auto\n    items-stretch\n    overflow-hidden\n    bg-transparent;\n\n  .frame {\n    @apply relative\n      m-0\n      flex\n      w-full\n      flex-auto\n      flex-col\n      items-stretch\n      p-0;\n  }\n\n  ::slotted(calcite-flow-item),\n  ::slotted(calcite-panel) {\n    @apply h-full;\n  }\n\n  ::slotted(.calcite-match-height:last-child) {\n    @apply flex\n    flex-auto\n    overflow-hidden;\n  }\n\n  .frame--advancing {\n    animation: calcite-frame-advance var(--calcite-animation-timing);\n  }\n\n  .frame--retreating {\n    animation: calcite-frame-retreat var(--calcite-animation-timing);\n  }\n\n  @keyframes calcite-frame-advance {\n    0% {\n      @apply bg-opacity-50;\n      transform: translate3d(50px, 0, 0);\n    }\n    100% {\n      @apply bg-opacity-100;\n      transform: translate3d(0, 0, 0);\n    }\n  }\n\n  @keyframes calcite-frame-retreat {\n    0% {\n      @apply bg-opacity-50;\n      transform: translate3d(-50px, 0, 0);\n    }\n    100% {\n      @apply bg-opacity-100;\n      transform: translate3d(0, 0, 0);\n    }\n  }\n}\n\n@include base-component();\n","import { Component, Element, h, Listen, Method, Prop, State, VNode } from \"@stencil/core\";\nimport { createObserver } from \"../../utils/observers\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { FlowDirection, FlowItemLikeElement } from \"./interfaces\";\nimport { CSS } from \"./resources\";\n\n/**\n * @slot - A slot for adding `calcite-flow-item` elements to the component.\n */\n@Component({\n  tag: \"calcite-flow\",\n  styleUrl: \"flow.scss\",\n  shadow: true,\n})\nexport class Flow implements LoadableComponent {\n  // --------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Removes the currently active `calcite-flow-item`.\n   */\n  @Method()\n  async back(): Promise<HTMLCalciteFlowItemElement | FlowItemLikeElement> {\n    const { items } = this;\n\n    const lastItem = items[items.length - 1];\n\n    if (!lastItem) {\n      return;\n    }\n\n    const beforeBack = lastItem.beforeBack\n      ? lastItem.beforeBack\n      : (): Promise<void> => Promise.resolve();\n\n    try {\n      await beforeBack.call(lastItem);\n    } catch (_error) {\n      // back prevented\n      return;\n    }\n\n    lastItem.remove();\n\n    return lastItem;\n  }\n\n  /**\n   * Sets focus on the component.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n\n    const { items } = this;\n    const activeItem = items[items.length - 1];\n\n    return activeItem?.setFocus();\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Public Properties\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * This property enables the component to consider other custom elements implementing flow-item's interface.\n   *\n   * @internal\n   */\n  @Prop() customItemSelectors: string;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteFlowElement;\n\n  @State() flowDirection: FlowDirection = null;\n\n  @State() itemCount = 0;\n\n  @State() items: FlowItemLikeElement[] = [];\n\n  itemMutationObserver = createObserver(\"mutation\", () => this.updateFlowProps());\n\n  // --------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  // --------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    this.itemMutationObserver?.observe(this.el, { childList: true, subtree: true });\n    this.updateFlowProps();\n  }\n\n  async componentWillLoad(): Promise<void> {\n    setUpLoadableComponent(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  disconnectedCallback(): void {\n    this.itemMutationObserver?.disconnect();\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  @Listen(\"calciteFlowItemBack\")\n  async handleItemBackClick(event: CustomEvent): Promise<void> {\n    if (event.defaultPrevented) {\n      return;\n    }\n\n    await this.back();\n    return this.setFocus();\n  }\n\n  getFlowDirection = (oldFlowItemCount: number, newFlowItemCount: number): FlowDirection | null => {\n    const allowRetreatingDirection = oldFlowItemCount > 1;\n    const allowAdvancingDirection = oldFlowItemCount && newFlowItemCount > 1;\n\n    if (!allowAdvancingDirection && !allowRetreatingDirection) {\n      return null;\n    }\n\n    return newFlowItemCount < oldFlowItemCount ? \"retreating\" : \"advancing\";\n  };\n\n  updateFlowProps = (): void => {\n    const { customItemSelectors, el, items } = this;\n\n    const newItems = Array.from<FlowItemLikeElement>(\n      el.querySelectorAll(\n        `calcite-flow-item${customItemSelectors ? `,${customItemSelectors}` : \"\"}`,\n      ),\n    ).filter((flowItem) => flowItem.closest(\"calcite-flow\") === el);\n\n    const oldItemCount = items.length;\n    const newItemCount = newItems.length;\n    const activeItem = newItems[newItemCount - 1];\n    const previousItem = newItems[newItemCount - 2];\n\n    if (newItemCount && activeItem) {\n      newItems.forEach((itemNode) => {\n        itemNode.showBackButton = itemNode === activeItem && newItemCount > 1;\n        itemNode.hidden = itemNode !== activeItem;\n      });\n    }\n\n    if (previousItem) {\n      previousItem.menuOpen = false;\n    }\n\n    this.items = newItems;\n\n    if (oldItemCount !== newItemCount) {\n      const flowDirection = this.getFlowDirection(oldItemCount, newItemCount);\n      this.itemCount = newItemCount;\n      this.flowDirection = flowDirection;\n    }\n  };\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  render(): VNode {\n    const { flowDirection } = this;\n\n    const frameDirectionClasses = {\n      [CSS.frame]: true,\n      [CSS.frameAdvancing]: flowDirection === \"advancing\",\n      [CSS.frameRetreating]: flowDirection === \"retreating\",\n    };\n\n    return (\n      <div class={frameDirectionClasses}>\n        <slot />\n      </div>\n    );\n  }\n}\n"],"mappings":";;;;;gKAAO,MAAMA,EAAM,CACjBC,MAAO,QACPC,eAAgB,mBAChBC,gBAAiB,qBCHnB,MAAMC,EAAU,+nCAChB,MAAAC,EAAeD,E,MCkBFE,EAAI,M,yBA4EfC,KAAAC,qBAAuBC,EAAe,YAAY,IAAMF,KAAKG,oBAyC7DH,KAAAI,iBAAmB,CAACC,EAA0BC,KAC5C,MAAMC,EAA2BF,EAAmB,EACpD,MAAMG,EAA0BH,GAAoBC,EAAmB,EAEvE,IAAKE,IAA4BD,EAA0B,CACzD,OAAO,I,CAGT,OAAOD,EAAmBD,EAAmB,aAAe,WAAW,EAGzEL,KAAAG,gBAAkB,KAChB,MAAMM,oBAAEA,EAAmBC,GAAEA,EAAEC,MAAEA,GAAUX,KAE3C,MAAMY,EAAWC,MAAMC,KACrBJ,EAAGK,iBACD,oBAAoBN,EAAsB,IAAIA,IAAwB,OAExEO,QAAQC,GAAaA,EAASC,QAAQ,kBAAoBR,IAE5D,MAAMS,EAAeR,EAAMS,OAC3B,MAAMC,EAAeT,EAASQ,OAC9B,MAAME,EAAaV,EAASS,EAAe,GAC3C,MAAME,EAAeX,EAASS,EAAe,GAE7C,GAAIA,GAAgBC,EAAY,CAC9BV,EAASY,SAASC,IAChBA,EAASC,eAAiBD,IAAaH,GAAcD,EAAe,EACpEI,EAASE,OAASF,IAAaH,CAAU,G,CAI7C,GAAIC,EAAc,CAChBA,EAAaK,SAAW,K,CAG1B5B,KAAKW,MAAQC,EAEb,GAAIO,IAAiBE,EAAc,CACjC,MAAMQ,EAAgB7B,KAAKI,iBAAiBe,EAAcE,GAC1DrB,KAAK8B,UAAYT,EACjBrB,KAAK6B,cAAgBA,C,yDAxFe,K,eAEnB,E,WAEmB,E,CA/DxC,UAAME,GACJ,MAAMpB,MAAEA,GAAUX,KAElB,MAAMgC,EAAWrB,EAAMA,EAAMS,OAAS,GAEtC,IAAKY,EAAU,CACb,M,CAGF,MAAMC,EAAaD,EAASC,WACxBD,EAASC,WACT,IAAqBC,QAAQC,UAEjC,UACQF,EAAWG,KAAKJ,E,CACtB,MAAOK,GAEP,M,CAGFL,EAASM,SAET,OAAON,C,CAOT,cAAMO,SACEC,EAAmBxC,MAEzB,MAAMW,MAAEA,GAAUX,KAClB,MAAMsB,EAAaX,EAAMA,EAAMS,OAAS,GAExC,OAAOE,GAAYiB,U,CAsCrB,iBAAAE,GACEzC,KAAKC,sBAAsByC,QAAQ1C,KAAKU,GAAI,CAAEiC,UAAW,KAAMC,QAAS,OACxE5C,KAAKG,iB,CAGP,uBAAM0C,GACJC,EAAuB9C,K,CAGzB,gBAAA+C,GACEC,EAAmBhD,K,CAGrB,oBAAAiD,GACEjD,KAAKC,sBAAsBiD,Y,CAU7B,yBAAMC,CAAoBC,GACxB,GAAIA,EAAMC,iBAAkB,CAC1B,M,OAGIrD,KAAK+B,OACX,OAAO/B,KAAKuC,U,CAsDd,MAAAe,GACE,MAAMzB,cAAEA,GAAkB7B,KAE1B,MAAMuD,EAAwB,CAC5B,CAAC9D,EAAIC,OAAQ,KACb,CAACD,EAAIE,gBAAiBkC,IAAkB,YACxC,CAACpC,EAAIG,iBAAkBiC,IAAkB,cAG3C,OACE2B,EAAA,OAAAC,IAAA,2CAAKC,MAAOH,GACVC,EAAA,QAAAC,IAAA,6C","ignoreList":[]}