@esri/calcite-components/dist/components/calcite-flow-item/customElement.js

Web Components for Esri's Calcite Design System.

/* COPYRIGHT Esri - https://js.arcgis.com/5.0/LICENSE.txt */
import { c as customElement } from "../../chunks/runtime.js";
import { keyed } from "lit/directives/keyed.js";
import { css, nothing, html } from "lit";
import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
import { createRef, ref } from "lit/directives/ref.js";
import { g as getElementDir } from "../../chunks/dom.js";
import { S as SLOTS$1 } from "../../chunks/resources6.js";
import { u as useT9n } from "../../chunks/useT9n.js";
import { u as useSetFocus } from "../../chunks/useSetFocus.js";
import { u as useInteractive } from "../../chunks/useInteractive.js";
const CSS = {
  backButton: "back-button"
};
const ICONS = {
  backLeft: "chevron-left",
  backRight: "chevron-right"
};
const SLOTS = {
  actionBar: "action-bar",
  alerts: "alerts",
  contentTop: "content-top",
  contentBottom: "content-bottom",
  headerActionsStart: "header-actions-start",
  headerActionsEnd: "header-actions-end",
  headerMenuActions: "header-menu-actions",
  headerContent: "header-content",
  fab: "fab",
  footer: "footer",
  footerEnd: "footer-end",
  footerStart: "footer-start"
};
const styles = css`:host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{position:relative;display:none;inline-size:100%;flex:1 1 auto;overflow:hidden}:host([selected]){display:flex}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}calcite-panel{--calcite-panel-background-color: var(--calcite-flow-background-color);--calcite-panel-border-color: var(--calcite-flow-border-color, var(--calcite-flow-item-header-border-block-end));--calcite-panel-corner-radius: var(--calcite-flow-corner-radius);--calcite-panel-description-text-color: var(--calcite-flow-description-text-color);--calcite-panel-footer-background-color: var(--calcite-flow-footer-background-color);--calcite-panel-footer-space: var(--calcite-flow-footer-space, var(--calcite-flow-item-footer-padding));--calcite-panel-header-action-background-color-hover: var(--calcite-flow-header-action-background-color-hover);--calcite-panel-header-action-background-color-press: var(--calcite-flow-header-action-background-color-press);--calcite-panel-header-action-background-color: var(--calcite-flow-header-action-background-color);--calcite-panel-header-action-indicator-color: var(--calcite-flow-header-action-indicator-color);--calcite-panel-header-action-text-color-press: var(--calcite-flow-header-action-text-color-press);--calcite-panel-header-action-text-color: var(--calcite-flow-header-action-text-color);--calcite-panel-header-background-color: var(--calcite-flow-header-background-color);--calcite-panel-header-content-space: var(--calcite-flow-header-content-space);--calcite-panel-heading-text-color: var(--calcite-flow-heading-text-color);--calcite-panel-icon-color: var(--calcite-flow-icon-color);--calcite-panel-space: var(--calcite-flow-space)}:host([hidden]){display:none}[hidden]{display:none}`;
class FlowItem extends LitElement {
  constructor() {
    super(...arguments);
    this.backButtonRef = createRef();
    this.containerRef = createRef();
    this.messages = useT9n();
    this.focusSetter = useSetFocus()(this);
    this.interactiveContainer = useInteractive(this);
    this.closable = false;
    this.closed = false;
    this.collapseDirection = "down";
    this.collapsed = false;
    this.collapsible = false;
    this.disabled = false;
    this.iconFlipRtl = false;
    this.loading = false;
    this.menuOpen = false;
    this.overlayPositioning = "absolute";
    this.scale = "m";
    this.selected = false;
    this.showBackButton = false;
    this.topLayerDisabled = false;
    this.calciteFlowItemBack = createEvent();
    this.calciteFlowItemClose = createEvent({ cancelable: false });
    this.calciteFlowItemCollapse = createEvent({ cancelable: false });
    this.calciteFlowItemExpand = createEvent({ cancelable: false });
    this.calciteFlowItemScroll = createEvent({ cancelable: false });
    this.calciteFlowItemToggle = createEvent({ cancelable: false });
    this.calciteInternalFlowItemChange = createEvent({ cancelable: false });
  }
  static {
    this.properties = { beforeBack: [0, {}, { attribute: false }], beforeClose: [0, {}, { attribute: false }], closable: [7, {}, { reflect: true, type: Boolean }], closed: [7, {}, { reflect: true, type: Boolean }], collapseDirection: 1, collapsed: [7, {}, { reflect: true, type: Boolean }], collapsible: [7, {}, { reflect: true, type: Boolean }], description: 1, disabled: [7, {}, { reflect: true, type: Boolean }], heading: 1, headingLevel: [11, {}, { type: Number, reflect: true }], icon: [3, { type: String }, { reflect: true }], iconFlipRtl: [7, {}, { reflect: true, type: Boolean }], loading: [7, {}, { reflect: true, type: Boolean }], menuOpen: [7, {}, { reflect: true, type: Boolean }], messageOverrides: [0, {}, { attribute: false }], overlayPositioning: [3, {}, { reflect: true }], scale: [3, {}, { reflect: true }], selected: [7, {}, { reflect: true, type: Boolean }], showBackButton: [5, {}, { type: Boolean }], topLayerDisabled: [7, {}, { reflect: true, type: Boolean }] };
  }
  static {
    this.styles = styles;
  }
  async scrollContentTo(options) {
    await this.containerRef.value?.scrollContentTo(options);
  }
  async setFocus(options) {
    return this.focusSetter(() => this.backButtonRef.value || this.containerRef.value, options);
  }
  willUpdate(changes) {
    if (changes.has("selected") && (this.hasUpdated || this.selected !== false)) {
      this.calciteInternalFlowItemChange.emit();
    }
    if (changes.has("collapsed") && this.hasUpdated) {
      if (this.collapsed) {
        this.calciteFlowItemCollapse.emit();
      } else {
        this.calciteFlowItemExpand.emit();
      }
    }
  }
  handleInternalPanelScroll(event) {
    if (event.target !== this.containerRef.value) {
      return;
    }
    event.stopPropagation();
    this.calciteFlowItemScroll.emit();
  }
  handleInternalPanelClose(event) {
    if (event.target !== this.containerRef.value) {
      return;
    }
    event.stopPropagation();
    this.closed = true;
    this.calciteFlowItemClose.emit();
  }
  handleInternalPanelToggle(event) {
    if (event.target !== this.containerRef.value) {
      return;
    }
    event.stopPropagation();
    this.collapsed = event.target.collapsed;
    this.calciteFlowItemToggle.emit();
  }
  backButtonClick() {
    this.calciteFlowItemBack.emit();
  }
  renderBackButton() {
    const { el } = this;
    const rtl = getElementDir(el) === "rtl";
    const { showBackButton, backButtonClick, messages } = this;
    const label = messages.back;
    const icon = rtl ? ICONS.backRight : ICONS.backLeft;
    return showBackButton ? keyed("flow-back-button", html`<calcite-action .ariaLabel=${label} class=${safeClassMap(CSS.backButton)} .icon=${icon} @click=${backButtonClick} .scale=${this.scale} slot=${SLOTS.headerActionsStart} .text=${label} title=${label ?? nothing} ${ref(this.backButtonRef)}></calcite-action>`) : null;
  }
  render() {
    const { collapsed, collapseDirection, collapsible, closable, closed, description, disabled, heading, headingLevel, loading, menuOpen, messages, overlayPositioning, beforeClose, icon, iconFlipRtl } = this;
    return this.interactiveContainer({ disabled, children: html`<calcite-panel .beforeClose=${beforeClose} .closable=${closable} .closed=${closed} .collapseDirection=${collapseDirection} .collapsed=${collapsed} .collapsible=${collapsible} .description=${description} .disabled=${disabled} .heading=${heading} .headingLevel=${headingLevel} .icon=${icon} .iconFlipRtl=${iconFlipRtl} .loading=${loading} .menuOpen=${menuOpen} .messageOverrides=${messages} @calcitePanelClose=${this.handleInternalPanelClose} @calcitePanelScroll=${this.handleInternalPanelScroll} @calcitePanelToggle=${this.handleInternalPanelToggle} .overlayPositioning=${overlayPositioning} .scale=${this.scale} .topLayerDisabled=${this.topLayerDisabled} ${ref(this.containerRef)}>${this.renderBackButton()}<slot name=${SLOTS.actionBar} slot=${SLOTS$1.actionBar}></slot><slot name=${SLOTS.alerts} slot=${SLOTS$1.alerts}></slot><slot name=${SLOTS.headerActionsStart} slot=${SLOTS$1.headerActionsStart}></slot><slot name=${SLOTS.headerActionsEnd} slot=${SLOTS$1.headerActionsEnd}></slot><slot name=${SLOTS.headerContent} slot=${SLOTS$1.headerContent}></slot><slot name=${SLOTS.headerMenuActions} slot=${SLOTS$1.headerMenuActions}></slot><slot name=${SLOTS.fab} slot=${SLOTS$1.fab}></slot><slot name=${SLOTS.contentTop} slot=${SLOTS$1.contentTop}></slot><slot name=${SLOTS.contentBottom} slot=${SLOTS$1.contentBottom}></slot><slot name=${SLOTS.footerStart} slot=${SLOTS$1.footerStart}></slot><slot name=${SLOTS.footer} slot=${SLOTS$1.footer}></slot><slot name=${SLOTS.footerEnd} slot=${SLOTS$1.footerEnd}></slot><slot></slot></calcite-panel>` });
  }
}
customElement("calcite-flow-item", FlowItem);
export {
  FlowItem
};