{"version":3,"names":["panelCss","CalcitePanelStyle0","Panel","this","resizeObserver","createObserver","resizeHandler","panelScrollEl","scrollHeight","offsetHeight","hasScrollingContent","setAttribute","removeAttribute","setContainerRef","node","containerEl","panelKeyDownHandler","event","closable","key","defaultPrevented","handleUserClose","preventDefault","closed","calcitePanelClose","emit","open","isClosed","close","async","beforeClose","Promise","resolve","_error","requestAnimationFrame","collapse","collapsed","calcitePanelToggle","panelScrollHandler","calcitePanelScroll","handleHeaderActionsStartSlotChange","hasStartActions","slotChangeHasAssignedElement","handleHeaderActionsEndSlotChange","hasEndActions","handleHeaderMenuActionsSlotChange","hasMenuItems","handleActionBarSlotChange","actionBars","slotChangeGetAssignedElements","filter","el","matches","forEach","actionBar","layout","hasActionBar","length","handleHeaderContentSlotChange","hasHeaderContent","handleFabSlotChange","hasFab","handleFooterActionsSlotChange","hasFooterActions","handleFooterEndSlotChange","hasFooterEndContent","handleFooterStartSlotChange","hasFooterStartContent","handleFooterSlotChange","hasFooterContent","contentBottomSlotChangeHandler","hasContentBottom","contentTopSlotChangeHandler","hasContentTop","setPanelScrollEl","disconnect","observe","handleAlertsSlotChange","map","nodeName","embedded","defaultEndMenuPlacement","toggleDialog","value","onMessagesChange","connectedCallback","connectLocalized","connectMessages","componentWillLoad","setUpLoadableComponent","setUpMessages","componentDidLoad","setComponentLoaded","componentDidRender","updateHostInteraction","disconnectedCallback","disconnectLocalized","disconnectMessages","effectiveLocaleChange","updateMessages","effectiveLocale","setFocus","componentFocusable","focusFirstTabbable","scrollContentTo","options","scrollTo","renderHeaderContent","heading","headingLevel","description","headingNode","h","Heading","class","CSS","level","descriptionNode","headerContent","renderActionBar","actionBarContainer","hidden","name","SLOTS","onSlotchange","renderHeaderSlottedContent","renderHeaderStartActions","headerActionsStart","headerActions","renderHeaderActionsEnd","messages","collapseDirection","collapsible","expand","icons","ICONS","reverse","collapseNode","toAriaBoolean","icon","id","IDS","onClick","scale","text","title","closeNode","slotNode","headerActionsEnd","showContainer","renderMenu","menuOpen","menuFlipPlacements","menuPlacement","flipPlacements","label","overlayPositioning","placement","menu","slot","ACTION_MENU_SLOTS","trigger","headerMenuActions","renderHeaderNode","headerContentNode","showHeaderContent","header","headerContainer","headerContainerBorderEnd","renderContentTop","renderFooterNode","showFooter","footer","footerContent","footerStart","footerEnd","footerActions","renderContent","contentWrapper","onScroll","ref","renderFab","renderContentBottom","contentBottom","contentTop","fabContainer","fab","render","disabled","loading","panelNode","container","alerts","Host","onKeyDown","InteractiveContainer"],"sources":["src/components/panel/panel.scss?tag=calcite-panel&encapsulation=shadow","src/components/panel/panel.tsx"],"sourcesContent":["/**\n * CSS Custom Properties\n *\n * These properties can be overridden using the component's tag as selector.\n *\n * @prop --calcite-panel-content-space: Specifies the padding of the component's content.\n * @prop --calcite-panel-footer-padding: Specifies the padding of the component's footer.\n * @prop --calcite-panel-header-border-block-end: Specifies the component header's block end border.\n * @prop --calcite-panel-background-color: Specifies the background color of the component.\n */\n\n:host {\n  @extend %component-host;\n  @apply relative flex w-full h-full flex-auto overflow-hidden;\n\n  --calcite-min-header-height: calc(var(--calcite-icon-size) * 3);\n}\n\n@include disabled();\n\n@import \"../../assets/styles/header\";\n\n:host([scale=\"s\"]) {\n  --calcite-internal-panel-default-padding: var(--calcite-spacing-sm);\n  --calcite-internal-panel-header-vertical-padding: 10px; // this should use a spacing token once made available\n\n  .header-content {\n    .heading {\n      @apply text-n1h;\n    }\n\n    .description {\n      @apply text-n2h;\n    }\n  }\n}\n\n:host([scale=\"m\"]) {\n  --calcite-internal-panel-default-padding: var(--calcite-spacing-md);\n  --calcite-internal-panel-header-vertical-padding: var(--calcite-spacing-lg);\n\n  .header-content {\n    .heading {\n      @apply text-0h;\n    }\n\n    .description {\n      @apply text-n1h;\n    }\n  }\n}\n\n:host([scale=\"l\"]) {\n  --calcite-internal-panel-default-padding: var(--calcite-spacing-xl);\n  --calcite-internal-panel-header-vertical-padding: var(--calcite-spacing-xxl);\n\n  .header-content {\n    .heading {\n      @apply text-1h;\n    }\n\n    .description {\n      @apply text-0h;\n    }\n  }\n}\n\n.content-top,\n.content-bottom {\n  @apply flex items-start self-stretch;\n\n  border-block-start: 1px solid var(--calcite-color-border-3);\n  background-color: var(--calcite-color-foreground-1);\n}\n\n.container {\n  @apply relative bg-background m-0 flex w-full flex-auto flex-col items-stretch p-0;\n\n  transition:\n    max-block-size var(--calcite-animation-timing),\n    inline-size var(--calcite-animation-timing);\n}\n\n.container[hidden] {\n  @apply hidden;\n}\n\n.header {\n  @apply bg-foreground-1 flex flex-col z-header;\n  border-block-end: var(--calcite-panel-header-border-block-end, 1px solid var(--calcite-color-border-3));\n}\n\n.header-container {\n  @apply flex flex-row w-full\n  items-stretch\n  justify-start;\n  flex: 0 0 auto;\n}\n\n.header-container--border-end {\n  border-block-end: 1px solid var(--calcite-color-border-3);\n}\n\n.action-bar-container {\n  @apply w-full;\n}\n\n.action-bar-container ::slotted(calcite-action-bar) {\n  @apply w-full;\n}\n\n.header-content {\n  @apply flex\n    flex-col\n    overflow-hidden\n    px-3\n    py-3.5;\n\n  margin-inline-end: auto;\n\n  .heading,\n  .description {\n    @apply block\n      break-words\n      p-0;\n  }\n\n  .heading {\n    @apply mx-0 mt-0 mb-1 font-medium text-color-1;\n\n    &:only-child {\n      @apply mb-0;\n    }\n  }\n\n  .description {\n    @apply text-color-2;\n  }\n}\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\n.header-actions {\n  @apply flex\n  flex-row\n  flex-nowrap\n  items-stretch;\n}\n\n.header-actions--end {\n  margin-inline-start: theme(\"margin.auto\");\n}\n\n.content-wrapper {\n  @apply flex\n  flex-auto\n  flex-col\n  flex-nowrap\n  items-stretch\n  overflow-auto\n  h-full\n  focus-base\n  relative;\n  padding: var(--calcite-panel-content-space, 0);\n  background: var(--calcite-panel-background-color, var(--calcite-color-background));\n}\n\n.content-wrapper:focus-visible {\n  @apply focus-inset;\n}\n\n.content-top,\n.content-bottom {\n  padding: var(--calcite-internal-panel-default-padding);\n}\n\n.header-content {\n  flex: 1 1 auto;\n  padding-block: var(--calcite-internal-panel-header-vertical-padding);\n  padding-inline: var(--calcite-internal-panel-default-padding);\n}\n\n.footer {\n  @apply flex mt-auto flex-row content-between justify-center items-center bg-foreground-1 text-n2-wrap;\n  border-block-start: 1px solid var(--calcite-color-border-3);\n  padding: var(--calcite-panel-footer-padding, var(--calcite-internal-panel-default-padding));\n}\n\n.footer-content {\n  @apply flex flex-row items-center justify-center flex-1;\n}\n\n.footer-actions {\n  @apply flex flex-row items-center justify-evenly flex-1;\n  gap: var(--calcite-internal-panel-default-padding);\n}\n\n.footer-start {\n  @apply flex flex-row items-center justify-start flex-1;\n  margin-inline-end: auto;\n  gap: var(--calcite-internal-panel-default-padding);\n}\n\n.footer-end {\n  @apply flex flex-row items-center justify-end flex-1;\n  margin-inline-start: auto;\n  gap: var(--calcite-internal-panel-default-padding);\n}\n\n.fab-container {\n  @apply sticky\n  bottom-0\n  my-0\n  mx-auto\n  block\n  p-2\n  z-sticky;\n  inset-inline: 0;\n  inline-size: fit-content;\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 {\n  focusFirstTabbable,\n  slotChangeGetAssignedElements,\n  slotChangeHasAssignedElement,\n  toAriaBoolean,\n} 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 { createObserver } from \"../../utils/observers\";\nimport { SLOTS as ACTION_MENU_SLOTS } from \"../action-menu/resources\";\nimport { Heading, HeadingLevel } from \"../functional/Heading\";\nimport { connectLocalized, disconnectLocalized, LocalizedComponent } from \"../../utils/locale\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport {\n  defaultEndMenuPlacement,\n  FlipPlacement,\n  LogicalPlacement,\n  OverlayPositioning,\n} from \"../../utils/floating-ui\";\nimport { CollapseDirection } from \"../interfaces\";\nimport { Scale } from \"../interfaces\";\nimport { PanelMessages } from \"./assets/panel/t9n\";\nimport { CSS, ICONS, IDS, 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-bottom - A slot for adding content below the unnamed (default) slot and above the footer slot (if populated)\n * @slot content-top - A slot for adding content above the unnamed (default) slot and below the action-bar slot (if populated).\n * @slot header-actions-start - A slot for adding actions or content to the start side of the header.\n * @slot header-actions-end - A slot for adding actions or content to the end side of the header.\n * @slot header-content - A slot for adding custom content to the header.\n * @slot header-menu-actions - A slot for adding an overflow menu with actions 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-start` and `footer-end` slots 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-panel\",\n  styleUrl: \"panel.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class Panel\n  implements InteractiveComponent, LoadableComponent, LocalizedComponent, T9nComponent\n{\n  // --------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  // --------------------------------------------------------------------------\n\n  /** Passes a function to run before the component closes. */\n  @Prop() beforeClose: () => Promise<void>;\n\n  /** When `true`, the component will be hidden. */\n  @Prop({ mutable: true, reflect: true }) closed = false;\n\n  @Watch(\"closed\")\n  toggleDialog(value: boolean): void {\n    value ? this.close() : this.open();\n  }\n\n  /**\n   *  When `true`, interaction is prevented and the component is displayed with lower opacity.\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** When `true`, displays a close button in the trailing side of the header. */\n  @Prop({ reflect: true }) closable = 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   * 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   * The component header text.\n   */\n  @Prop() heading: string;\n\n  /** A description for the component. */\n  @Prop() description: string;\n\n  /**\n   * Specifies the component's fallback menu `placement` when it's initial or specified `placement` has insufficient space available.\n   */\n  @Prop() menuFlipPlacements: FlipPlacement[];\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   * Determines where the action menu will be positioned.\n   */\n  @Prop({ reflect: true }) menuPlacement: LogicalPlacement = defaultEndMenuPlacement;\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<PanelMessages>;\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: PanelMessages;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\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  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectLocalized(this);\n    connectMessages(this);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    setUpLoadableComponent(this);\n    this.isClosed = this.closed;\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    disconnectLocalized(this);\n    disconnectMessages(this);\n    this.resizeObserver?.disconnect();\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalcitePanelElement;\n\n  containerEl: HTMLElement;\n\n  panelScrollEl: HTMLElement;\n\n  resizeObserver = createObserver(\"resize\", () => this.resizeHandler());\n\n  @State() isClosed = false;\n\n  @State() hasStartActions = false;\n\n  @State() hasEndActions = false;\n\n  @State() hasMenuItems = false;\n\n  @State() hasHeaderContent = false;\n\n  @State() hasActionBar = false;\n\n  @State() hasContentBottom = false;\n\n  @State() hasContentTop = false;\n\n  @State() hasFab = false;\n\n  @State() hasFooterActions = false;\n\n  @State() hasFooterContent = false;\n\n  @State() hasFooterEndContent = false;\n\n  @State() hasFooterStartContent = false;\n\n  @State() defaultMessages: PanelMessages;\n\n  @State() effectiveLocale = \"\";\n\n  @State() showHeaderContent = false;\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Fires when the close button is clicked.\n   */\n  @Event({ cancelable: false }) calcitePanelClose: EventEmitter<void>;\n\n  /**\n   * Fires when the collapse button is clicked.\n   */\n  @Event({ cancelable: false }) calcitePanelToggle: EventEmitter<void>;\n\n  /**\n   * Fires when the content is scrolled.\n   */\n  @Event({ cancelable: false }) calcitePanelScroll: EventEmitter<void>;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  resizeHandler = (): void => {\n    const { panelScrollEl } = this;\n\n    if (\n      !panelScrollEl ||\n      typeof panelScrollEl.scrollHeight !== \"number\" ||\n      typeof panelScrollEl.offsetHeight !== \"number\"\n    ) {\n      return;\n    }\n\n    const hasScrollingContent = panelScrollEl.scrollHeight > panelScrollEl.offsetHeight;\n\n    // intentionally using setAttribute to avoid reflecting -1 so default browser behavior will occur\n    if (hasScrollingContent) {\n      panelScrollEl.setAttribute(\"tabindex\", \"0\");\n    } else {\n      panelScrollEl.removeAttribute(\"tabindex\");\n    }\n  };\n\n  setContainerRef = (node: HTMLElement): void => {\n    this.containerEl = node;\n  };\n\n  panelKeyDownHandler = (event: KeyboardEvent): void => {\n    if (this.closable && event.key === \"Escape\" && !event.defaultPrevented) {\n      this.handleUserClose();\n      event.preventDefault();\n    }\n  };\n\n  private handleUserClose = (): void => {\n    this.closed = true;\n    this.calcitePanelClose.emit();\n  };\n\n  open = (): void => {\n    this.isClosed = false;\n  };\n\n  close = async (): Promise<void> => {\n    const beforeClose = this.beforeClose ?? (() => Promise.resolve());\n\n    try {\n      await beforeClose();\n    } catch (_error) {\n      // close prevented\n      requestAnimationFrame(() => {\n        this.closed = false;\n      });\n      return;\n    }\n\n    this.isClosed = true;\n  };\n\n  collapse = (): void => {\n    this.collapsed = !this.collapsed;\n    this.calcitePanelToggle.emit();\n  };\n\n  panelScrollHandler = (): void => {\n    this.calcitePanelScroll.emit();\n  };\n\n  handleHeaderActionsStartSlotChange = (event: Event): void => {\n    this.hasStartActions = slotChangeHasAssignedElement(event);\n  };\n\n  handleHeaderActionsEndSlotChange = (event: Event): void => {\n    this.hasEndActions = slotChangeHasAssignedElement(event);\n  };\n\n  handleHeaderMenuActionsSlotChange = (event: Event): void => {\n    this.hasMenuItems = slotChangeHasAssignedElement(event);\n  };\n\n  handleActionBarSlotChange = (event: Event): void => {\n    const actionBars = slotChangeGetAssignedElements(event).filter(\n      (el): el is HTMLCalciteActionBarElement => el?.matches(\"calcite-action-bar\"),\n    );\n\n    actionBars.forEach((actionBar) => (actionBar.layout = \"horizontal\"));\n\n    this.hasActionBar = !!actionBars.length;\n  };\n\n  handleHeaderContentSlotChange = (event: Event): void => {\n    this.hasHeaderContent = slotChangeHasAssignedElement(event);\n  };\n\n  handleFabSlotChange = (event: Event): void => {\n    this.hasFab = slotChangeHasAssignedElement(event);\n  };\n\n  handleFooterActionsSlotChange = (event: Event): void => {\n    this.hasFooterActions = slotChangeHasAssignedElement(event);\n  };\n\n  handleFooterEndSlotChange = (event: Event): void => {\n    this.hasFooterEndContent = slotChangeHasAssignedElement(event);\n  };\n\n  handleFooterStartSlotChange = (event: Event): void => {\n    this.hasFooterStartContent = slotChangeHasAssignedElement(event);\n  };\n\n  handleFooterSlotChange = (event: Event): void => {\n    this.hasFooterContent = slotChangeHasAssignedElement(event);\n  };\n\n  private contentBottomSlotChangeHandler = (event: Event): void => {\n    this.hasContentBottom = slotChangeHasAssignedElement(event);\n  };\n\n  private contentTopSlotChangeHandler = (event: Event): void => {\n    this.hasContentTop = slotChangeHasAssignedElement(event);\n  };\n\n  // --------------------------------------------------------------------------\n  //\n  //  Methods\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Sets focus on the component's first focusable element.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n    focusFirstTabbable(this.containerEl);\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    this.panelScrollEl?.scrollTo(options);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  renderHeaderContent(): VNode {\n    const { heading, headingLevel, description, hasHeaderContent } = this;\n    const headingNode = heading ? (\n      <Heading class={CSS.heading} level={headingLevel}>\n        {heading}\n      </Heading>\n    ) : null;\n\n    const descriptionNode = description ? <span class={CSS.description}>{description}</span> : null;\n\n    return !hasHeaderContent && (headingNode || descriptionNode) ? (\n      <div class={CSS.headerContent} key=\"header-content\">\n        {headingNode}\n        {descriptionNode}\n      </div>\n    ) : null;\n  }\n\n  renderActionBar(): VNode {\n    return (\n      <div class={CSS.actionBarContainer} hidden={!this.hasActionBar}>\n        <slot name={SLOTS.actionBar} onSlotchange={this.handleActionBarSlotChange} />\n      </div>\n    );\n  }\n\n  renderHeaderSlottedContent(): VNode {\n    return (\n      <div class={CSS.headerContent} hidden={!this.hasHeaderContent} key=\"slotted-header-content\">\n        <slot name={SLOTS.headerContent} onSlotchange={this.handleHeaderContentSlotChange} />\n      </div>\n    );\n  }\n\n  renderHeaderStartActions(): VNode {\n    const { hasStartActions } = this;\n\n    return (\n      <div\n        class={{ [CSS.headerActionsStart]: true, [CSS.headerActions]: true }}\n        hidden={!hasStartActions}\n        key=\"header-actions-start\"\n      >\n        <slot\n          name={SLOTS.headerActionsStart}\n          onSlotchange={this.handleHeaderActionsStartSlotChange}\n        />\n      </div>\n    );\n  }\n\n  renderHeaderActionsEnd(): VNode {\n    const {\n      hasEndActions,\n      messages,\n      closable,\n      collapsed,\n      collapseDirection,\n      collapsible,\n      hasMenuItems,\n    } = this;\n    const { collapse, expand, close } = messages;\n\n    const icons = [ICONS.expand, ICONS.collapse];\n\n    if (collapseDirection === \"up\") {\n      icons.reverse();\n    }\n\n    const collapseNode = collapsible ? (\n      <calcite-action\n        aria-expanded={toAriaBoolean(!collapsed)}\n        aria-label={collapse}\n        icon={collapsed ? icons[0] : icons[1]}\n        id={IDS.collapse}\n        onClick={this.collapse}\n        scale={this.scale}\n        text={collapse}\n        title={collapsed ? expand : collapse}\n      />\n    ) : null;\n\n    const closeNode = closable ? (\n      <calcite-action\n        aria-label={close}\n        icon={ICONS.close}\n        id={IDS.close}\n        onClick={this.handleUserClose}\n        scale={this.scale}\n        text={close}\n        title={close}\n      />\n    ) : null;\n\n    const slotNode = (\n      <slot name={SLOTS.headerActionsEnd} onSlotchange={this.handleHeaderActionsEndSlotChange} />\n    );\n\n    const showContainer = hasEndActions || collapseNode || closeNode || hasMenuItems;\n\n    return (\n      <div\n        class={{ [CSS.headerActionsEnd]: true, [CSS.headerActions]: true }}\n        hidden={!showContainer}\n        key=\"header-actions-end\"\n      >\n        {slotNode}\n        {this.renderMenu()}\n        {collapseNode}\n        {closeNode}\n      </div>\n    );\n  }\n\n  renderMenu(): VNode {\n    const { hasMenuItems, messages, menuOpen, menuFlipPlacements, menuPlacement } = this;\n\n    return (\n      <calcite-action-menu\n        flipPlacements={menuFlipPlacements ?? [\"top\", \"bottom\"]}\n        hidden={!hasMenuItems}\n        key=\"menu\"\n        label={messages.options}\n        open={menuOpen}\n        overlayPositioning={this.overlayPositioning}\n        placement={menuPlacement}\n      >\n        <calcite-action\n          icon={ICONS.menu}\n          scale={this.scale}\n          slot={ACTION_MENU_SLOTS.trigger}\n          text={messages.options}\n        />\n        <slot\n          name={SLOTS.headerMenuActions}\n          onSlotchange={this.handleHeaderMenuActionsSlotChange}\n        />\n      </calcite-action-menu>\n    );\n  }\n\n  renderHeaderNode(): VNode {\n    const {\n      hasHeaderContent,\n      hasStartActions,\n      hasEndActions,\n      closable,\n      collapsible,\n      hasMenuItems,\n      hasActionBar,\n    } = this;\n\n    const headerContentNode = this.renderHeaderContent();\n\n    const showHeaderContent =\n      hasHeaderContent ||\n      !!headerContentNode ||\n      hasStartActions ||\n      hasEndActions ||\n      collapsible ||\n      closable ||\n      hasMenuItems;\n\n    this.showHeaderContent = showHeaderContent;\n\n    return (\n      <header class={CSS.header} hidden={!(showHeaderContent || hasActionBar)}>\n        <div\n          class={{ [CSS.headerContainer]: true, [CSS.headerContainerBorderEnd]: hasActionBar }}\n          hidden={!showHeaderContent}\n        >\n          {this.renderHeaderStartActions()}\n          {this.renderHeaderSlottedContent()}\n          {headerContentNode}\n          {this.renderHeaderActionsEnd()}\n        </div>\n        {this.renderActionBar()}\n        {this.renderContentTop()}\n      </header>\n    );\n  }\n\n  renderFooterNode(): VNode {\n    const { hasFooterEndContent, hasFooterStartContent, hasFooterContent, hasFooterActions } = this;\n\n    const showFooter =\n      hasFooterStartContent || hasFooterEndContent || hasFooterContent || hasFooterActions;\n\n    return (\n      <footer class={CSS.footer} hidden={!showFooter}>\n        <div class={CSS.footerContent} hidden={!hasFooterContent}>\n          <slot name={SLOTS.footer} onSlotchange={this.handleFooterSlotChange} />\n        </div>\n        <div class={CSS.footerStart} hidden={hasFooterContent || !hasFooterStartContent}>\n          <slot name={SLOTS.footerStart} onSlotchange={this.handleFooterStartSlotChange} />\n        </div>\n        <div class={CSS.footerEnd} hidden={hasFooterContent || !hasFooterEndContent}>\n          <slot name={SLOTS.footerEnd} onSlotchange={this.handleFooterEndSlotChange} />\n        </div>\n        <div class={CSS.footerActions} hidden={hasFooterContent || !hasFooterActions}>\n          <slot\n            key=\"footer-actions-slot\"\n            name={SLOTS.footerActions}\n            onSlotchange={this.handleFooterActionsSlotChange}\n          />\n        </div>\n      </footer>\n    );\n  }\n\n  setPanelScrollEl = (el: HTMLElement): void => {\n    this.panelScrollEl = el;\n    this.resizeObserver?.disconnect();\n\n    if (el) {\n      this.resizeObserver?.observe(el);\n      this.resizeHandler();\n    }\n  };\n\n  renderContent(): VNode {\n    return (\n      <div\n        class={CSS.contentWrapper}\n        hidden={this.collapsible && this.collapsed}\n        onScroll={this.panelScrollHandler}\n        ref={this.setPanelScrollEl}\n      >\n        <slot />\n        {this.renderFab()}\n      </div>\n    );\n  }\n\n  renderContentBottom(): VNode {\n    return (\n      <div class={CSS.contentBottom} hidden={!this.hasContentBottom}>\n        <slot name={SLOTS.contentBottom} onSlotchange={this.contentBottomSlotChangeHandler} />\n      </div>\n    );\n  }\n\n  renderContentTop(): VNode {\n    return (\n      <div class={CSS.contentTop} hidden={!this.hasContentTop}>\n        <slot name={SLOTS.contentTop} onSlotchange={this.contentTopSlotChangeHandler} />\n      </div>\n    );\n  }\n\n  renderFab(): VNode {\n    return (\n      <div class={CSS.fabContainer} hidden={!this.hasFab}>\n        <slot name={SLOTS.fab} onSlotchange={this.handleFabSlotChange} />\n      </div>\n    );\n  }\n\n  handleAlertsSlotChange = (event: Event): void => {\n    slotChangeGetAssignedElements(event)?.map((el) => {\n      if (el.nodeName === \"CALCITE-ALERT\") {\n        (el as HTMLCalciteAlertElement).embedded = true;\n      }\n    });\n  };\n\n  render(): VNode {\n    const { disabled, loading, isClosed } = this;\n\n    const panelNode = (\n      <article\n        aria-busy={toAriaBoolean(loading)}\n        class={CSS.container}\n        hidden={isClosed}\n        ref={this.setContainerRef}\n      >\n        {this.renderHeaderNode()}\n        {this.renderContent()}\n        {this.renderContentBottom()}\n        {this.renderFooterNode()}\n        <slot key=\"alerts\" name={SLOTS.alerts} onSlotchange={this.handleAlertsSlotChange} />\n      </article>\n    );\n\n    return (\n      <Host onKeyDown={this.panelKeyDownHandler}>\n        <InteractiveContainer disabled={disabled}>\n          {loading ? <calcite-scrim loading={loading} /> : null}\n          {panelNode}\n        </InteractiveContainer>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}