@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
508 lines (507 loc) • 30.1 kB
JavaScript
/* COPYRIGHT Esri - https://js.arcgis.com/5.0/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 { a 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/resources6.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",
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) cubic-bezier(.215,.44,.42,.88)}: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-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;--tw-shadow: 0 2px 12px -4px rgba(0, 0, 0, .2), 0 2px 4px -2px rgba(0, 0, 0, .16);--tw-shadow-colored: 0 2px 12px -4px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);-webkit-overflow-scrolling:touch;visibility:hidden;transition:inset-block-start var(--calcite-internal-animation-timing-slow) cubic-bezier(.215,.44,.42,.88) allow-discrete,opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(.215,.44,.42,.88);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) cubic-bezier(.215,.44,.42,.88)}.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) cubic-bezier(.215,.44,.42,.88)}.container--open .panel{visibility:visible;opacity:1;transition:visibility 0ms linear,opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(.215,.44,.42,.88)}.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) cubic-bezier(.215,.44,.42,.88) allow-discrete,opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(.215,.44,.42,.88);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)}}: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
});
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;
}
const appliedSize = this.sizeOverride.resize(size);
this.resizeValues = {
...this.resizeValues,
...appliedSize.inline !== void 0 && {
inlineSize: appliedSize.inline
},
...appliedSize.block !== void 0 && {
blockSize: appliedSize.block
}
};
}
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} @keydown=${this.handlePanelKeyDown} @calcitePanelClose=${this.handleInternalPanelCloseClick} @calcitePanelScroll=${this.handleInternalPanelScroll} .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.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
};