/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
import { b as resizeShiftStep, c as customElement } from "../../chunks/runtime.js";
import { keyed } from "lit/directives/keyed.js";
import { u as useSizeOverride, i as interact } from "../../chunks/useSizeOverride.js";
import { css, html } from "lit";
import { createRef, ref } from "lit/directives/ref.js";
import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
import { g as getStylePixelValue } from "../../chunks/dom.js";
import { c as createObserver } from "../../chunks/observers.js";
import { g as getDimensionClass } from "../../chunks/dynamicClasses.js";
import { t as toggleOpenClose } from "../../chunks/openCloseComponent.js";
import { S as SLOTS$1 } from "../../chunks/resources8.js";
import { u as useT9n } from "../../chunks/useT9n.js";
import { u as useFocusTrap } from "../../chunks/useFocusTrap.js";
import { u as usePreventDocumentScroll } from "../../chunks/usePreventDocumentScroll.js";
import { u as useSetFocus } from "../../chunks/useSetFocus.js";
import { u as useTopLayer } from "../../chunks/useTopLayer.js";
const CSS = {
  dialog: "dialog",
  panel: "panel",
  scrim: "scrim",
  container: "container",
  containerOpen: "container--open",
  containerEmbedded: "container--embedded",
  assistiveText: "assistive-text"
};
const SLOTS = {
  actionBar: "action-bar",
  alerts: "alerts",
  customContent: "custom-content",
  contentTop: "content-top",
  contentBottom: "content-bottom",
  headerActionsStart: "header-actions-start",
  headerActionsEnd: "header-actions-end",
  description: "description",
  heading: "heading",
  headerMenuActions: "header-menu-actions",
  headerContent: "header-content",
  fab: "fab",
  footer: "footer",
  footerStart: "footer-start",
  footerEnd: "footer-end"
};
const initialDragPosition = { x: null, y: null };
const initialResizePosition = { top: null, right: null, bottom: null, left: null };
const styles = css`:host{--calcite-dialog-scrim-background-color: rgba(0, 0, 0, .85);pointer-events:none;inset:0;display:flex;--calcite-internal-dialog-animation-offset: 20px}:host([top-layer-disabled]),:host([top-layer-disabled]) .container,:host([embedded]),.container--embedded{z-index:var(--calcite-z-index-overlay)}:host([embedded][modal]){position:absolute}.container{pointer-events:auto;position:fixed;inset:0;display:flex;block-size:100%;inline-size:100%;align-items:center;justify-content:center;overflow:hidden;color:var(--calcite-color-text-2);opacity:0;visibility:hidden;transition:visibility 0ms linear var(--calcite-internal-animation-timing-slow),opacity var(--calcite-internal-animation-timing-slow) ease-in-out}:host([placement=top]) .container{align-items:flex-start;justify-content:center}:host([placement=top-start]) .container{align-items:flex-start;justify-content:flex-start}:host([placement=top-end]) .container{align-items:flex-start;justify-content:flex-end}:host([placement=bottom]) .container{align-items:flex-end;justify-content:center}:host([placement=bottom-start]) .container{align-items:flex-end;justify-content:flex-start}:host([placement=bottom-end]) .container{align-items:flex-end;justify-content:flex-end}:host(:not([modal])) .container{pointer-events:none}:host([scale=s]){--calcite-internal-dialog-content-padding: var(--calcite-dialog-content-space, var(--calcite-spacing-sm));--calcite-internal-dialog-min-size-x: 198px;--calcite-internal-dialog-min-size-y: 140px}:host([scale=m]){--calcite-internal-dialog-content-padding: var(--calcite-dialog-content-space, var(--calcite-spacing-md));--calcite-internal-dialog-min-size-x: 288px;--calcite-internal-dialog-min-size-y: 180px}:host([scale=l]){--calcite-internal-dialog-content-padding: var(--calcite-dialog-content-space, var(--calcite-spacing-md-plus));--calcite-internal-dialog-min-size-x: 388px;--calcite-internal-dialog-min-size-y: 220px}.scrim{--calcite-scrim-background: var(--calcite-dialog-scrim-background-color, var(--calcite-color-transparent-scrim));--calcite-scrim-background-color: var( --calcite-dialog-scrim-background-color, var(--calcite-color-transparent-scrim) );position:fixed;inset:0;display:flex;overflow-y:hidden;z-index:calc(var(--calcite-z-index) * -1)}:host([top-layer-disabled]) .scrim{z-index:unset}calcite-panel{--calcite-panel-content-space: var(--calcite-dialog-content-space, var(--calcite-internal-dialog-content-padding));--calcite-panel-content-top-space: var( --calcite-dialog-content-top-space, var(--calcite-internal-dialog-content-padding) );--calcite-panel-content-bottom-space: var( --calcite-dialog-content-bottom-space, var(--calcite-internal-dialog-content-padding) );--calcite-panel-footer-space: var(--calcite-dialog-footer-space);--calcite-panel-border-color: var(--calcite-dialog-border-color);--calcite-panel-background-color: var(--calcite-dialog-background-color, var(--calcite-color-foreground-1));--calcite-panel-icon-color: var(--calcite-dialog-icon-color);--calcite-panel-heading-text-color: var(--calcite-dialog-heading-text-color);--calcite-panel-description-text-color: var(--calcite-dialog-description-text-color);--calcite-panel-header-background-color: var(--calcite-dialog-header-background-color);--calcite-panel-header-action-background-color: var(--calcite-dialog-header-action-background-color);--calcite-panel-header-action-background-color-hover: var(--calcite-dialog-header-action-background-color-hover);--calcite-panel-header-action-background-color-press: var(--calcite-dialog-header-action-background-color-press);--calcite-panel-header-action-text-color: var(--calcite-dialog-header-action-text-color);--calcite-panel-header-action-text-color-press: var(--calcite-dialog-header-action-text-color-press);--calcite-panel-footer-background-color: var(--calcite-dialog-footer-background-color);--calcite-panel-space: var(--calcite-dialog-space, var(--calcite-internal-dialog-content-padding));--calcite-panel-header-content-space: var(--calcite-dialog-header-content-space, var(--calcite-dialog-content-space));--calcite-popover-border-color: var(--calcite-dialog-action-menu-border-color, var(--calcite-color-border-1));--calcite-panel-corner-radius: var(--calcite-dialog-corner-radius)}:host([kind=brand]) calcite-panel{--calcite-panel-icon-color: var(--calcite-dialog-icon-color, var(--calcite-color-brand))}:host([kind=danger]) calcite-panel{--calcite-panel-icon-color: var(--calcite-dialog-icon-color, var(--calcite-color-status-danger))}:host([kind=info]) calcite-panel{--calcite-panel-icon-color: var(--calcite-dialog-icon-color, var(--calcite-color-status-info))}:host([kind=success]) calcite-panel{--calcite-panel-icon-color: var(--calcite-dialog-icon-color, var(--calcite-color-status-success))}:host([kind=warning]) calcite-panel{--calcite-panel-icon-color: var(--calcite-dialog-icon-color, var(--calcite-color-status-warning))}::slotted(*){--calcite-panel-background-color: initial}[popover]{padding:0;border:none;background-color:transparent;position:fixed;display:flex}[popover]:popover-open{display:flex}.dialog{pointer-events:none;position:relative;margin:1.5rem;box-sizing:border-box;display:flex;inline-size:100%;flex-direction:column;opacity:0;box-shadow:var(--calcite-shadow-md);-webkit-overflow-scrolling:touch;visibility:hidden;transition:inset-block-start var(--calcite-internal-animation-timing-slow) ease-in-out allow-discrete,opacity var(--calcite-internal-animation-timing-slow) ease-in-out;border-radius:var(--calcite-dialog-corner-radius, var(--calcite-corner-radius-sm));min-inline-size:var(--calcite-dialog-min-size-x, var(--calcite-internal-dialog-min-size-x));max-inline-size:var(--calcite-dialog-max-size-x, 100%);min-block-size:var(--calcite-dialog-min-size-y, var(--calcite-internal-dialog-min-size-y));max-block-size:var(--calcite-dialog-max-size-y, 100%);--calcite-internal-dialog-hidden-position: calc( var(--calcite-dialog-offset-y, 0px) + var(--calcite-internal-dialog-animation-offset) );--calcite-internal-dialog-shown-position: var(--calcite-dialog-offset-y, 0);inset-inline-start:var(--calcite-dialog-offset-x, 0);inset-block-start:var(--calcite-internal-dialog-hidden-position)}:host([top-layer-disabled]) .dialog,:host([embedded]) .dialog{z-index:var(--calcite-z-index-modal)}:host([menu-open]) .dialog{transition:visibility 0ms linear var(--calcite-internal-animation-timing-slow),opacity var(--calcite-internal-animation-timing-slow) ease-in-out}.panel{visibility:hidden;opacity:0;border-radius:var(--calcite-dialog-corner-radius, var(--calcite-corner-radius-sm));transition:visibility 0ms linear var(--calcite-internal-animation-timing-slow),opacity var(--calcite-internal-animation-timing-slow) ease-in-out}.container--open .panel{visibility:visible;opacity:1;transition:visibility 0ms linear,opacity var(--calcite-internal-animation-timing-slow) ease-in-out}.container--open{opacity:1;visibility:visible;transition-delay:0ms}.container--open .dialog{pointer-events:auto;visibility:visible;opacity:1;transition:inset-block-start var(--calcite-internal-animation-timing-slow) ease-in-out allow-discrete,opacity var(--calcite-internal-animation-timing-slow) ease-in-out;transition-delay:0ms}.width-s{inline-size:auto;inline-size:var(--calcite-dialog-size-x, 32rem);block-size:var(--calcite-dialog-size-y, auto)}@media screen and (max-width:35rem){:host(:not([fullscreen-disabled])) .width-s{margin:0;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;inset-inline-start:0;inset-block-start:var(--calcite-internal-dialog-animation-offset)}}.width-m{inline-size:var(--calcite-dialog-size-x, 48rem);block-size:var(--calcite-dialog-size-y, auto)}@media screen and (max-width:51rem){:host(:not([fullscreen-disabled])) .width-m{margin:0;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;inset-inline-start:0;inset-block-start:var(--calcite-internal-dialog-animation-offset)}}.width-l{inline-size:var(--calcite-dialog-size-x, 94rem);block-size:var(--calcite-dialog-size-y, auto)}@media screen and (max-width:97rem){:host(:not([fullscreen-disabled])) .width-l{margin:0;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;inset-inline-start:0;inset-block-start:var(--calcite-internal-dialog-animation-offset)}}:host([placement=cover]) .dialog{margin:0;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;border-radius:0}:host([placement=cover]) .panel{border-radius:0}:host([kind]) .panel{border-start-start-radius:0px;border-start-end-radius:0px}:host([kind]) .dialog{overflow:hidden}:host([kind=brand]) .dialog{border-color:var(--calcite-color-brand)}:host([kind=danger]) .dialog{border-color:var(--calcite-dialog-accent-color, var(--calcite-color-status-danger))}:host([kind=info]) .dialog{border-color:var(--calcite-dialog-accent-color, var(--calcite-color-status-info))}:host([kind=success]) .dialog{border-color:var(--calcite-dialog-accent-color, var(--calcite-color-status-success))}:host([kind=warning]) .dialog{border-color:var(--calcite-dialog-accent-color, var(--calcite-color-status-warning))}:host([open]) .dialog{inset-block-start:var(--calcite-internal-dialog-shown-position)}@starting-style{:host([open]) .dialog{inset-block-start:var(--calcite-internal-dialog-hidden-position);opacity:0}}:host([kind=brand][open]) .dialog,:host([kind=danger][open]) .dialog,:host([kind=info][open]) .dialog,:host([kind=success][open]) .dialog,:host([kind=warning][open]) .dialog{border-width:0px;border-block-start-width:4px;border-style:solid}.container--embedded{position:absolute;pointer-events:auto}.container--embedded calcite-scrim{position:absolute}.assistive-text{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}`;
class Dialog extends LitElement {
  constructor() {
    super(...arguments);
    this.dragPosition = { ...initialDragPosition };
    this.focusTrap = useFocusTrap({
      triggerProp: "open",
      focusTrapOptions: {
        // scrim closes on click, so we let it take over
        clickOutsideDeactivates: () => !this.modal || this.embedded,
        escapeDeactivates: (event) => {
          if (!event.defaultPrevented && !this.escapeDisabled) {
            this.open = false;
            event.preventDefault();
          }
          return false;
        }
      }
    })(this);
    this.usePreventDocumentScroll = usePreventDocumentScroll()(this);
    this.mutationObserver = createObserver("mutation", () => this.handleMutationObserver());
    this._open = false;
    this.openProp = "opened";
    this.transitionProp = "opacity";
    this.panelRef = createRef();
    this.popoverRef = createRef();
    this.resizePosition = { ...initialResizePosition };
    this.transitionEl = null;
    this.messages = useT9n();
    this.focusSetter = useSetFocus()(this);
    this.sizeOverride = useSizeOverride({
      targetElement: () => ({ value: this.transitionEl }),
      getBounds: () => ({
        inline: { min: this.resizeValues.minInlineSize, max: this.resizeValues.maxInlineSize },
        block: { min: this.resizeValues.minBlockSize, max: this.resizeValues.maxBlockSize }
      }),
      fullscreenDisabled: () => this.fullscreenDisabled,
      onResize: (resizeValues) => {
        this.resizeValues = resizeValues;
      }
    });
    this.topLayer = useTopLayer({
      disabledOverride: () => this.embedded,
      target: this.popoverRef
    })(this);
    this.assistiveText = null;
    this.hasContentBottom = false;
    this.hasContentTop = false;
    this.hasFooter = true;
    this.opened = false;
    this.resizeValues = {
      inlineSize: null,
      blockSize: null,
      minInlineSize: null,
      minBlockSize: null,
      maxInlineSize: null,
      maxBlockSize: null
    };
    this.closeDisabled = false;
    this.dragEnabled = false;
    this.embedded = false;
    this.escapeDisabled = false;
    this.fullscreenDisabled = false;
    this.iconFlipRtl = false;
    this.loading = false;
    this.menuOpen = false;
    this.modal = false;
    this.focusTrapDisabled = false;
    this.outsideCloseDisabled = false;
    this.overlayPositioning = "absolute";
    this.placement = "center";
    this.resizable = false;
    this.scale = "m";
    this.topLayerDisabled = false;
    this.widthScale = "m";
    this.calciteDialogBeforeClose = createEvent({ cancelable: false });
    this.calciteDialogBeforeOpen = createEvent({ cancelable: false });
    this.calciteDialogClose = createEvent({ cancelable: false });
    this.calciteDialogOpen = createEvent({ cancelable: false });
    this.calciteDialogScroll = createEvent({ cancelable: false });
  }
  static {
    this.properties = { assistiveText: [16, {}, { state: true }], hasContentBottom: [16, {}, { state: true }], hasContentTop: [16, {}, { state: true }], hasFooter: [16, {}, { state: true }], opened: [16, {}, { state: true }], resizeValues: [16, {}, { state: true }], beforeClose: [0, {}, { attribute: false }], closeDisabled: [7, {}, { reflect: true, type: Boolean }], description: 1, dragEnabled: [7, {}, { reflect: true, type: Boolean }], embedded: [7, {}, { reflect: true, type: Boolean }], escapeDisabled: [7, {}, { reflect: true, type: Boolean }], focusTrapOptions: [0, {}, { attribute: false }], fullscreenDisabled: [7, {}, { reflect: true, type: Boolean }], heading: 1, headingLevel: [11, {}, { type: Number, reflect: true }], kind: [3, {}, { 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 }], modal: [7, {}, { reflect: true, type: Boolean }], focusTrapDisabled: [7, {}, { reflect: true, type: Boolean }], open: [7, {}, { reflect: true, type: Boolean }], outsideCloseDisabled: [7, {}, { reflect: true, type: Boolean }], overlayPositioning: [3, {}, { reflect: true }], placement: [3, {}, { reflect: true }], resizable: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], topLayerDisabled: [7, {}, { reflect: true, type: Boolean }], widthScale: [3, {}, { reflect: true }], width: [3, {}, { reflect: true }] };
  }
  static {
    this.styles = styles;
  }
  get preventDocumentScroll() {
    return !this.embedded && this.modal;
  }
  get open() {
    return this._open;
  }
  set open(value) {
    const oldValue = this._open;
    if (value !== oldValue) {
      this.setOpenState(value);
    }
  }
  async scrollContentTo(options) {
    await this.panelRef.value?.scrollContentTo(options);
  }
  async setFocus(options) {
    return this.focusSetter(() => this.panelRef.value ?? this.el, options);
  }
  async updateFocusTrapElements(extraContainers) {
    this.focusTrap.setExtraContainers(extraContainers);
    this.focusTrap.updateContainerElements();
  }
  async updateSize(size) {
    this.updateSizeInternal(size);
  }
  connectedCallback() {
    super.connectedCallback();
    this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
    this.setUpInteractions();
  }
  willUpdate(changes) {
    if (changes.has("open") && (this.hasUpdated || this.open !== false) || changes.has("placement") && (this.hasUpdated || this.placement !== "center") || changes.has("resizable") && (this.hasUpdated || this.resizable !== false) || changes.has("dragEnabled") && (this.hasUpdated || this.dragEnabled !== false)) {
      this.setUpInteractions();
    }
    if (changes.has("messages") || changes.has("dragEnabled") && (this.hasUpdated || this.dragEnabled !== false) || changes.has("resizable") && (this.hasUpdated || this.resizable !== false)) {
      this.updateAssistiveText();
    }
    if (changes.has("opened") && (this.hasUpdated || this.opened !== false)) {
      this.handleOpenedChange();
    }
  }
  disconnectedCallback() {
    super.disconnectedCallback();
    this.mutationObserver?.disconnect();
    this.embedded = false;
    this.cleanUpInteractions();
  }
  focusTrapDisabledOverride() {
    return !this.modal && this.focusTrapDisabled;
  }
  updateAssistiveText() {
    const { messages } = this;
    this.assistiveText = messages && (this.dragEnabled || this.resizable) ? `${this.dragEnabled ? messages.dragEnabled : ""} ${this.resizable ? messages.resizeEnabled : ""}` : null;
  }
  onBeforeOpen() {
    this.calciteDialogBeforeOpen.emit();
    this.topLayer.show();
  }
  onOpen() {
    if (this.focusTrapDisabled) {
      this.setFocus();
    }
    this.focusTrap.activate();
    this.calciteDialogOpen.emit();
  }
  onBeforeClose() {
    this.calciteDialogBeforeClose.emit();
  }
  onClose() {
    this.focusTrap.deactivate();
    this.calciteDialogClose.emit();
    this.topLayer.hide();
  }
  async setOpenState(value) {
    if (this.beforeClose && !value) {
      try {
        await this.beforeClose?.();
      } catch {
        return;
      }
    }
    this._open = value;
    if (value) {
      await this.componentOnReady();
    }
    this.opened = value;
  }
  handleOpenedChange() {
    toggleOpenClose(this);
  }
  async triggerInteractModifiers() {
    const { interaction } = this;
    if (!interaction) {
      return;
    }
    await interaction.reflow({
      name: "drag"
    });
    await interaction.reflow({
      name: "resize"
    });
  }
  getTransitionRefDOMRect() {
    return this.transitionEl.getBoundingClientRect();
  }
  handleKeyDown(event) {
    const { key, shiftKey, defaultPrevented } = event;
    const { dragEnabled, resizable, resizePosition, dragPosition, transitionEl } = this;
    const keys = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"];
    if (defaultPrevented || !keys.includes(key)) {
      return;
    }
    switch (key) {
      case "ArrowUp":
        if (shiftKey && resizable && transitionEl) {
          const { minBlockSize } = window.getComputedStyle(transitionEl);
          const minHeight = getStylePixelValue(minBlockSize);
          const height = this.getTransitionRefDOMRect().height;
          if (height <= minHeight) {
            return;
          }
          this.updateSizeInternal({
            block: height - resizeShiftStep
          });
          resizePosition.bottom -= resizeShiftStep;
          this.updateTransform();
          this.triggerInteractModifiers();
          event.preventDefault();
        } else if (dragEnabled) {
          dragPosition.y -= resizeShiftStep;
          this.updateTransform();
          this.triggerInteractModifiers();
          event.preventDefault();
        }
        break;
      case "ArrowDown":
        if (shiftKey && resizable && transitionEl) {
          this.updateSizeInternal({
            block: this.getTransitionRefDOMRect().height + resizeShiftStep
          });
          resizePosition.bottom += resizeShiftStep;
          this.updateTransform();
          this.triggerInteractModifiers();
          event.preventDefault();
        } else if (dragEnabled) {
          dragPosition.y += resizeShiftStep;
          this.updateTransform();
          this.triggerInteractModifiers();
          event.preventDefault();
        }
        break;
      case "ArrowLeft":
        if (shiftKey && resizable && transitionEl) {
          const { minInlineSize } = window.getComputedStyle(transitionEl);
          const minWidth = getStylePixelValue(minInlineSize);
          const width = this.getTransitionRefDOMRect().width;
          if (width <= minWidth) {
            return;
          }
          this.updateSizeInternal({
            inline: width - resizeShiftStep
          });
          resizePosition.right -= resizeShiftStep;
          this.updateTransform();
          this.triggerInteractModifiers();
          event.preventDefault();
        } else if (dragEnabled) {
          dragPosition.x -= resizeShiftStep;
          this.updateTransform();
          this.triggerInteractModifiers();
          event.preventDefault();
        }
        break;
      case "ArrowRight":
        if (shiftKey && resizable && transitionEl) {
          this.updateSizeInternal({
            inline: this.getTransitionRefDOMRect().width + resizeShiftStep
          });
          resizePosition.right += resizeShiftStep;
          this.updateTransform();
          this.triggerInteractModifiers();
          event.preventDefault();
        } else if (dragEnabled) {
          dragPosition.x += resizeShiftStep;
          this.updateTransform();
          this.triggerInteractModifiers();
          event.preventDefault();
        }
        break;
    }
  }
  updateTransform() {
    const { dragPosition: { x, y }, resizePosition, transitionEl, dragEnabled, resizable } = this;
    if (!transitionEl) {
      return;
    }
    if (!dragEnabled && !resizable) {
      transitionEl.style.transform = null;
      return;
    }
    const { top, right, bottom, left } = this.getAdjustedResizePosition(resizePosition);
    const translateX = Math.round(x + left + right);
    const translateY = Math.round(y + top + bottom);
    this.transitionEl.style.transform = translateX || translateY ? `translate(${translateX}px, ${translateY}px)` : null;
  }
  cleanUpInteractions() {
    this.interaction?.unset();
    this.updateSizeInternal({
      inline: null,
      block: null
    });
    this.dragPosition = { ...initialDragPosition };
    this.resizePosition = { ...initialResizePosition };
    this.updateTransform();
  }
  async setUpInteractions() {
    this.cleanUpInteractions();
    const { el, transitionEl, resizable, dragEnabled, resizePosition, dragPosition } = this;
    if (!transitionEl || !this.open) {
      return;
    }
    if (resizable || dragEnabled) {
      this.interaction = interact(transitionEl, { context: el.ownerDocument });
    }
    if (resizable) {
      await this.el.componentOnReady();
      const { minInlineSize, minBlockSize, maxInlineSize, maxBlockSize } = window.getComputedStyle(this.transitionEl);
      this.interaction.resizable({
        edges: {
          top: true,
          right: true,
          bottom: true,
          left: true
        },
        modifiers: [
          interact.modifiers.restrictSize({
            min: {
              width: getStylePixelValue(minInlineSize),
              height: getStylePixelValue(minBlockSize)
            },
            max: {
              width: getStylePixelValue(maxInlineSize) || window.innerWidth,
              height: getStylePixelValue(maxBlockSize) || window.innerHeight
            }
          }),
          interact.modifiers.restrict({
            restriction: "parent"
          })
        ],
        listeners: {
          move: ({ rect, deltaRect }) => {
            if (deltaRect) {
              resizePosition.top += deltaRect.top;
              resizePosition.right += deltaRect.right;
              resizePosition.bottom += deltaRect.bottom;
              resizePosition.left += deltaRect.left;
            }
            this.updateSizeInternal({
              inline: rect.width,
              block: rect.height
            });
            this.updateTransform();
          }
        }
      });
    }
    if (dragEnabled) {
      this.interaction.draggable({
        modifiers: [
          interact.modifiers.restrictRect({
            restriction: "parent"
          })
        ],
        listeners: {
          move: ({ dx, dy }) => {
            dragPosition.x += dx;
            dragPosition.y += dy;
            this.updateTransform();
          }
        }
      });
    }
  }
  getAdjustedResizePosition({ top, right, bottom, left }) {
    const halfTop = top / 2;
    const halfRight = right / 2;
    const halfBottom = bottom / 2;
    const halfLeft = left / 2;
    switch (this.placement) {
      case "top":
        return { top, right: halfRight, bottom: 0, left: halfLeft };
      case "top-start":
        return { top, right: 0, bottom: 0, left };
      case "top-end":
        return { top, right, bottom: 0, left: 0 };
      case "bottom":
        return { top: 0, right: halfRight, bottom, left: halfLeft };
      case "bottom-start":
        return { top: 0, right: 0, bottom, left };
      case "bottom-end":
        return { top: 0, right, bottom, left: 0 };
      case "cover":
      case "center":
      default:
        return {
          top: halfTop,
          right: halfRight,
          bottom: halfBottom,
          left: halfLeft
        };
    }
  }
  setTransitionEl(el) {
    if (!el) {
      return;
    }
    this.transitionEl = el;
    this.setUpInteractions();
  }
  handleInternalPanelScroll(event) {
    if (event.target !== this.panelRef.value) {
      return;
    }
    event.stopPropagation();
    this.calciteDialogScroll.emit();
  }
  handleInternalPanelCloseClick(event) {
    if (event.target !== this.panelRef.value) {
      return;
    }
    event.preventDefault();
    event.stopPropagation();
    this.open = false;
  }
  handlePanelKeyDown(event) {
    if (this.escapeDisabled && event.key === "Escape" && !event.defaultPrevented) {
      event.preventDefault();
    }
  }
  handleOutsideClose() {
    if (this.outsideCloseDisabled) {
      return;
    }
    this.open = false;
  }
  handleMutationObserver() {
    this.focusTrap.updateContainerElements();
  }
  updateSizeInternal(size) {
    const dialogElement = this.transitionEl;
    if (!dialogElement) {
      return;
    }
    this.sizeOverride.resize(size);
  }
  render() {
    const { assistiveText, description, heading, opened, icon, iconFlipRtl } = this;
    return html`<div .ariaDescription=${description} .ariaLabel=${heading} .ariaModal=${this.modal} class=${safeClassMap({
      [CSS.container]: true,
      [CSS.containerOpen]: opened,
      [CSS.containerEmbedded]: this.embedded
    })} .popover=${!this.embedded ? "manual" : null} role=dialog ${ref(this.popoverRef)}>${this.modal ? html`<calcite-scrim class=${safeClassMap(CSS.scrim)} @click=${this.handleOutsideClose}></calcite-scrim>` : null}<div class=${safeClassMap({
      [CSS.dialog]: true,
      [getDimensionClass("width", this.width, this.widthScale)]: !!(this.width || this.widthScale)
    })} @keydown=${this.handleKeyDown} ${ref(this.setTransitionEl)}>${assistiveText ? keyed("assistive-text", html`<div aria-live=polite class=${safeClassMap(CSS.assistiveText)}>${assistiveText}</div>`) : null}<slot name=${SLOTS.customContent}><calcite-panel class=${safeClassMap(CSS.panel)} .closable=${!this.closeDisabled} .description=${description} .heading=${heading} .headingLevel=${this.headingLevel} .hidden=${!this.opened} .icon=${icon} .iconFlipRtl=${iconFlipRtl} .loading=${this.loading} .menuOpen=${this.menuOpen} .messageOverrides=${this.messageOverrides} @calcitePanelClose=${this.handleInternalPanelCloseClick} @calcitePanelScroll=${this.handleInternalPanelScroll} @keydown=${this.handlePanelKeyDown} .overlayPositioning=${this.overlayPositioning} .scale=${this.scale} .topLayerDisabled=${this.topLayerDisabled} ${ref(this.panelRef)}><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.description} slot=${SLOTS$1.description}></slot><slot name=${SLOTS.heading} slot=${SLOTS$1.heading}></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></slot></div></div>`;
  }
}
customElement("calcite-dialog", Dialog);
export {
  Dialog
};
