{"version":3,"names":["CSS","backButton","ICONS","backLeft","backRight","SLOTS","actionBar","alerts","contentTop","contentBottom","headerActionsStart","headerActionsEnd","headerMenuActions","headerContent","fab","footer","footerActions","footerEnd","footerStart","flowItemCss","CalciteFlowItemStyle0","FlowItem","this","handleInternalPanelScroll","event","target","containerEl","stopPropagation","calciteFlowItemScroll","emit","handleInternalPanelClose","closed","calciteFlowItemClose","handleInternalPanelToggle","collapsed","calciteFlowItemToggle","backButtonClick","calciteFlowItemBack","setBackRef","node","backButtonEl","setContainerRef","onMessagesChange","connectedCallback","connectLocalized","connectMessages","componentWillLoad","setUpMessages","setUpLoadableComponent","componentDidRender","updateHostInteraction","disconnectedCallback","disconnectLocalized","disconnectMessages","componentDidLoad","setComponentLoaded","effectiveLocaleChange","updateMessages","effectiveLocale","setFocus","componentFocusable","scrollContentTo","options","renderBackButton","el","rtl","getElementDir","showBackButton","messages","label","back","icon","h","class","key","onClick","ref","scale","slot","text","title","render","collapseDirection","collapsible","closable","description","disabled","heading","headingLevel","loading","menuOpen","overlayPositioning","beforeClose","Host","InteractiveContainer","messageOverrides","onCalcitePanelClose","onCalcitePanelScroll","onCalcitePanelToggle","name","PANEL_SLOTS"],"sources":["src/components/flow-item/resources.ts","src/components/flow-item/flow-item.scss?tag=calcite-flow-item&encapsulation=shadow","src/components/flow-item/flow-item.tsx"],"sourcesContent":["export const CSS = {\n  backButton: \"back-button\",\n};\n\nexport const ICONS = {\n  backLeft: \"chevron-left\",\n  backRight: \"chevron-right\",\n} as const;\n\nexport const SLOTS = {\n  actionBar: \"action-bar\",\n  alerts: \"alerts\",\n  contentTop: \"content-top\",\n  contentBottom: \"content-bottom\",\n  headerActionsStart: \"header-actions-start\",\n  headerActionsEnd: \"header-actions-end\",\n  headerMenuActions: \"header-menu-actions\",\n  headerContent: \"header-content\",\n  fab: \"fab\",\n  footer: \"footer\",\n  footerActions: \"footer-actions\",\n  footerEnd: \"footer-end\",\n  footerStart: \"footer-start\",\n};\n","/**\n * CSS Custom Properties\n *\n * These properties can be overridden using the component's tag as selector.\n *\n * @prop --calcite-flow-item-footer-padding: Specifies the padding of the component's footer.\n * @prop --calcite-flow-item-header-border-block-end: Specifies the component header's block end border.\n */\n\n:host {\n  @extend %component-host;\n  @apply relative flex w-full flex-auto overflow-hidden;\n}\n\n@include disabled();\n\n.back-button {\n  @apply border-color-3\n  border-0\n  border-solid;\n  border-inline-end-width: theme(\"borderWidth.DEFAULT\");\n}\n\ncalcite-panel {\n  --calcite-panel-footer-padding: var(--calcite-flow-item-footer-padding);\n  --calcite-panel-header-border-block-end: var(--calcite-flow-item-header-border-block-end);\n}\n\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport { getElementDir } from \"../../utils/dom\";\nimport {\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { connectLocalized, disconnectLocalized, LocalizedComponent } from \"../../utils/locale\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { HeadingLevel } from \"../functional/Heading\";\nimport { SLOTS as PANEL_SLOTS } from \"../panel/resources\";\nimport { OverlayPositioning } from \"../../utils/floating-ui\";\nimport { CollapseDirection } from \"../interfaces\";\nimport { Scale } from \"../interfaces\";\nimport { FlowItemMessages } from \"./assets/flow-item/t9n\";\nimport { CSS, ICONS, SLOTS } from \"./resources\";\n\n/**\n * @slot - A slot for adding custom content.\n * @slot action-bar - A slot for adding a `calcite-action-bar` to the component.\n * @slot alerts - A slot for adding `calcite-alert`s to the component.\n * @slot content-top - A slot for adding content above the unnamed (default) slot and below the action-bar slot (if populated).\n * @slot content-bottom - A slot for adding content below the unnamed (default) slot and above the footer slot (if populated)\n * @slot header-actions-start - A slot for adding `calcite-action`s or content to the start side of the component's header.\n * @slot header-actions-end - A slot for adding `calcite-action`s or content to the end side of the component's header.\n * @slot header-content - A slot for adding custom content to the component's header.\n * @slot header-menu-actions - A slot for adding an overflow menu with `calcite-action`s inside a `calcite-dropdown`.\n * @slot fab - A slot for adding a `calcite-fab` (floating action button) to perform an action.\n * @slot footer - A slot for adding custom content to the component's footer. Should not be used with the `\"footer-start\"` or `\"footer-end\"` slots.\n * @slot footer-actions - [Deprecated] Use the `\"footer\"` slot instead. A slot for adding `calcite-button`s to the component's footer.\n * @slot footer-end - A slot for adding a trailing footer custom content. Should not be used with the `\"footer\"` slot.\n * @slot footer-start - A slot for adding a leading footer custom content. Should not be used with the `\"footer\"` slot.\n */\n@Component({\n  tag: \"calcite-flow-item\",\n  styleUrl: \"flow-item.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class FlowItem\n  implements InteractiveComponent, LoadableComponent, LocalizedComponent, T9nComponent\n{\n  // --------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  // --------------------------------------------------------------------------\n\n  /** When `true`, displays a close button in the trailing side of the component's header. */\n  @Prop({ reflect: true }) closable = false;\n\n  /** When `true`, the component will be hidden. */\n  @Prop({ reflect: true }) closed = false;\n\n  /**\n   * When `true`, hides the component's content area.\n   */\n  @Prop({ reflect: true }) collapsed = false;\n\n  /**\n   * Specifies the direction of the collapse.\n   *\n   * @internal\n   */\n  @Prop() collapseDirection: CollapseDirection = \"down\";\n\n  /**\n   * When `true`, the component is collapsible.\n   */\n  @Prop({ reflect: true }) collapsible = false;\n\n  /**\n   * When provided, the method will be called before it is removed from its parent `calcite-flow`.\n   */\n  @Prop() beforeBack: () => Promise<void>;\n\n  /** Passes a function to run before the component closes. */\n  @Prop() beforeClose: () => Promise<void>;\n\n  /** A description for the component. */\n  @Prop() description: string;\n\n  /**\n   *  When `true`, interaction is prevented and the component is displayed with lower opacity.\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * The component header text.\n   */\n  @Prop() heading: string;\n\n  /**\n   * Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling.\n   */\n  @Prop({ reflect: true }) headingLevel: HeadingLevel;\n\n  /**\n   * When `true`, a busy indicator is displayed.\n   */\n  @Prop({ reflect: true }) loading = false;\n\n  /**\n   * When `true`, the action menu items in the `header-menu-actions` slot are open.\n   */\n  @Prop({ reflect: true }) menuOpen = false;\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<FlowItemMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  /**\n   * Made into a prop for testing purposes only\n   *\n   * @internal\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messages: FlowItemMessages;\n\n  /**\n   * Determines the type of positioning to use for the overlaid content.\n   *\n   * Using `\"absolute\"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.\n   *\n   * `\"fixed\"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.\n   *\n   */\n  @Prop({ reflect: true }) overlayPositioning: OverlayPositioning = \"absolute\";\n\n  /** Specifies the size of the component. */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  /**\n   * When `true`, displays a back button in the component's header.\n   *\n   * @internal\n   */\n  @Prop() showBackButton = false;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectLocalized(this);\n    connectMessages(this);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    await setUpMessages(this);\n    setUpLoadableComponent(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectLocalized(this);\n    disconnectMessages(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Fires when the back button is clicked.\n   */\n  @Event({ cancelable: true }) calciteFlowItemBack: EventEmitter<void>;\n\n  /**\n   * Fires when the content is scrolled.\n   */\n  @Event({ cancelable: false }) calciteFlowItemScroll: EventEmitter<void>;\n\n  /**\n   * Fires when the close button is clicked.\n   */\n  @Event({ cancelable: false }) calciteFlowItemClose: EventEmitter<void>;\n\n  /**\n   * Fires when the collapse button is clicked.\n   */\n  @Event({ cancelable: false }) calciteFlowItemToggle: EventEmitter<void>;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteFlowItemElement;\n\n  containerEl: HTMLCalcitePanelElement;\n\n  backButtonEl: HTMLCalciteActionElement;\n\n  @State() defaultMessages: FlowItemMessages;\n\n  @State() effectiveLocale = \"\";\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Methods\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Sets focus on the component.\n   *\n   * @returns promise.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n\n    const { backButtonEl, containerEl } = this;\n\n    if (backButtonEl) {\n      return backButtonEl.setFocus();\n    } else if (containerEl) {\n      return containerEl.setFocus();\n    }\n  }\n\n  /**\n   * Scrolls the component's content to a specified set of coordinates.\n   *\n   * @example\n   * myCalciteFlowItem.scrollContentTo({\n   *   left: 0, // Specifies the number of pixels along the X axis to scroll the window or element.\n   *   top: 0, // Specifies the number of pixels along the Y axis to scroll the window or element\n   *   behavior: \"auto\" // Specifies whether the scrolling should animate smoothly (smooth), or happen instantly in a single jump (auto, the default value).\n   * });\n   * @param options - allows specific coordinates to be defined.\n   * @returns - promise that resolves once the content is scrolled to.\n   */\n  @Method()\n  async scrollContentTo(options?: ScrollToOptions): Promise<void> {\n    await this.containerEl?.scrollContentTo(options);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  handleInternalPanelScroll = (event: CustomEvent<void>): void => {\n    if (event.target !== this.containerEl) {\n      return;\n    }\n\n    event.stopPropagation();\n    this.calciteFlowItemScroll.emit();\n  };\n\n  handleInternalPanelClose = (event: CustomEvent<void>): void => {\n    if (event.target !== this.containerEl) {\n      return;\n    }\n\n    event.stopPropagation();\n    this.closed = true;\n    this.calciteFlowItemClose.emit();\n  };\n\n  handleInternalPanelToggle = (event: CustomEvent<void>): void => {\n    if (event.target !== this.containerEl) {\n      return;\n    }\n\n    event.stopPropagation();\n    this.collapsed = (event.target as HTMLCalcitePanelElement).collapsed;\n    this.calciteFlowItemToggle.emit();\n  };\n\n  backButtonClick = (): void => {\n    this.calciteFlowItemBack.emit();\n  };\n\n  setBackRef = (node: HTMLCalciteActionElement): void => {\n    this.backButtonEl = node;\n  };\n\n  setContainerRef = (node: HTMLCalcitePanelElement): void => {\n    this.containerEl = node;\n  };\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  renderBackButton(): VNode {\n    const { el } = this;\n\n    const rtl = getElementDir(el) === \"rtl\";\n    const { showBackButton, backButtonClick, messages } = this;\n    const label = messages.back;\n    const icon = rtl ? ICONS.backRight : ICONS.backLeft;\n\n    return showBackButton ? (\n      <calcite-action\n        aria-label={label}\n        class={CSS.backButton}\n        icon={icon}\n        key=\"flow-back-button\"\n        onClick={backButtonClick}\n        ref={this.setBackRef}\n        scale=\"s\"\n        slot=\"header-actions-start\"\n        text={label}\n        title={label}\n      />\n    ) : null;\n  }\n\n  render(): VNode {\n    const {\n      collapsed,\n      collapseDirection,\n      collapsible,\n      closable,\n      closed,\n      description,\n      disabled,\n      heading,\n      headingLevel,\n      loading,\n      menuOpen,\n      messages,\n      overlayPositioning,\n      beforeClose,\n    } = this;\n    return (\n      <Host>\n        <InteractiveContainer disabled={disabled}>\n          <calcite-panel\n            beforeClose={beforeClose}\n            closable={closable}\n            closed={closed}\n            collapseDirection={collapseDirection}\n            collapsed={collapsed}\n            collapsible={collapsible}\n            description={description}\n            disabled={disabled}\n            heading={heading}\n            headingLevel={headingLevel}\n            loading={loading}\n            menuOpen={menuOpen}\n            messageOverrides={messages}\n            onCalcitePanelClose={this.handleInternalPanelClose}\n            onCalcitePanelScroll={this.handleInternalPanelScroll}\n            onCalcitePanelToggle={this.handleInternalPanelToggle}\n            overlayPositioning={overlayPositioning}\n            ref={this.setContainerRef}\n            scale={this.scale}\n          >\n            {this.renderBackButton()}\n            <slot name={SLOTS.actionBar} slot={PANEL_SLOTS.actionBar} />\n            <slot name={SLOTS.alerts} slot={PANEL_SLOTS.alerts} />\n            <slot name={SLOTS.headerActionsStart} slot={PANEL_SLOTS.headerActionsStart} />\n            <slot name={SLOTS.headerActionsEnd} slot={PANEL_SLOTS.headerActionsEnd} />\n            <slot name={SLOTS.headerContent} slot={PANEL_SLOTS.headerContent} />\n            <slot name={SLOTS.headerMenuActions} slot={PANEL_SLOTS.headerMenuActions} />\n            <slot name={SLOTS.fab} slot={PANEL_SLOTS.fab} />\n            <slot name={SLOTS.contentTop} slot={PANEL_SLOTS.contentTop} />\n            <slot name={SLOTS.contentBottom} slot={PANEL_SLOTS.contentBottom} />\n            <slot name={SLOTS.footerStart} slot={PANEL_SLOTS.footerStart} />\n            <slot name={SLOTS.footer} slot={PANEL_SLOTS.footer} />\n            <slot name={SLOTS.footerEnd} slot={PANEL_SLOTS.footerEnd} />\n            <slot name={SLOTS.footerActions} slot={PANEL_SLOTS.footerActions} />\n            <slot />\n          </calcite-panel>\n        </InteractiveContainer>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}