@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
359 lines (358 loc) • 25.4 kB
JavaScript
/*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
v3.2.1 */
import { C as CSS_UTILITY, a as resizeShiftStep, b as resizeStep, c as customElement } from "../../chunks/runtime.js";
import { ref } from "lit-html/directives/ref.js";
import { keyed } from "lit-html/directives/keyed.js";
import { i as interact } from "../../chunks/interact.min.js";
import { html } from "lit";
import { LitElement, createEvent, setAttribute, safeClassMap } from "@arcgis/lumina";
import { h as focusFirstTabbable, g as getElementDir, k as getStylePixelValue, o as ensureId } from "../../chunks/dom.js";
import { c as componentFocusable } from "../../chunks/component.js";
import { c as createObserver } from "../../chunks/observers.js";
import { o as onToggleOpenCloseComponent } from "../../chunks/openCloseComponent.js";
import { g as getDimensionClass } from "../../chunks/dynamicClasses.js";
import { c as clamp } from "../../chunks/math.js";
import { u as useT9n } from "../../chunks/useT9n.js";
import { u as usePreventDocumentScroll } from "../../chunks/usePreventDocumentScroll.js";
import { u as useFocusTrap } from "../../chunks/useFocusTrap.js";
import { css } from "@lit/reactive-element/css-tag.js";
const CSS = {
scrim: "scrim",
container: "container",
containerOpen: "container--open",
content: "content",
contentContainer: "content-container",
containerEmbedded: "container--embedded",
resizeHandle: "resize-handle",
resizeHandleBar: "resize-handle-bar"
};
const styles = css`:host{position:absolute;inset:0;z-index:var(--calcite-z-index-overlay);display:flex;visibility:hidden;--calcite-sheet-scrim-background-internal: rgba(0, 0, 0, .85);--calcite-scrim-shadow-block-start-internal: 0 4px 8px -1px rgba(0, 0, 0, .08), 0 2px 4px -1px rgba(0, 0, 0, .04);--calcite-scrim-shadow-block-end-internal: 0 -4px 8px -1px rgba(0, 0, 0, .08), 0 -2px 4px -1px rgba(0, 0, 0, .04);--calcite-scrim-shadow-inline-start-internal: 4px 0 8px -1px rgba(0, 0, 0, .08), 2px 0 4px -1px rgba(0, 0, 0, .04);--calcite-scrim-shadow-inline-end-internal: -4px 0 8px -1px rgba(0, 0, 0, .08), -2px 0 4px -1px rgba(0, 0, 0, .04)}.calcite--rtl{--calcite-scrim-shadow-inline-start-internal: -4px 0 8px -1px rgba(0, 0, 0, .08), -2px 0 4px -1px rgba(0, 0, 0, .04);--calcite-scrim-shadow-inline-end-internal: 4px 0 8px -1px rgba(0, 0, 0, .08), 2px 0 4px -1px rgba(0, 0, 0, .04)}.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}.container{visibility:hidden;position:fixed;z-index:var(--calcite-z-index-overlay);box-sizing:border-box;display:flex;opacity:0;color:var(--calcite-sheet-text-color, var(--calcite-color-text-2));transition:visibility 0ms linear var(--calcite-internal-animation-timing-medium),opacity var(--calcite-internal-animation-timing-medium) cubic-bezier(.215,.44,.42,.88)}:host([position=inline-start]) .container{justify-content:flex-start;inset-block:0;inset-inline:0 auto;--calcite-sheet-hidden-position-internal: translate3d(-1rem, 0, 0)}:host([position=inline-end]) .container{justify-content:flex-end;inset-block:0;inset-inline:auto 0;--calcite-sheet-hidden-position-internal: translate3d(1rem, 0, 0)}:host([position=block-start]) .container{align-items:flex-start;inset-block:0 auto;inset-inline:0;--calcite-sheet-hidden-position-internal: translate3d(0, -1rem, 0)}:host([position=block-end]) .container{align-items:flex-end;inset-block:auto 0;inset-inline:0;--calcite-sheet-hidden-position-internal: translate3d(0, 1rem, 0)}:host([display-mode=float]) .content{--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(--calcite-sheet-shadow, var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-shadow))}:host([display-mode=overlay][position=inline-start]) .container{box-shadow:var(--calcite-scrim-shadow-inline-start-internal)}:host([display-mode=overlay][position=inline-end]) .container{box-shadow:var(--calcite-scrim-shadow-inline-end-internal)}:host([display-mode=overlay][position=block-start]) .container{box-shadow:var(--calcite-scrim-shadow-block-start-internal)}:host([display-mode=overlay][position=block-end]) .container{box-shadow:var(--calcite-scrim-shadow-block-end-internal)}:host([position^=inline]) .content{inline-size:var(--calcite-sheet-width-internal);max-inline-size:var(--calcite-sheet-max-width-internal);min-inline-size:var(--calcite-sheet-min-width-internal)}:host([position^=block]) .content{block-size:var(--calcite-sheet-height-internal);max-block-size:var(--calcite-sheet-max-height-internal);min-block-size:var(--calcite-sheet-min-height-internal)}:host([position^=inline]) .width-s{--calcite-sheet-width-internal: var(--calcite-sheet-width, 15vw);--calcite-sheet-max-width-internal: var(--calcite-sheet-max-width, 360px);--calcite-sheet-min-width-internal: var(--calcite-sheet-min-width, 260px)}:host([position^=inline]) .width-m{--calcite-sheet-width-internal: var(--calcite-sheet-width, 25vw);--calcite-sheet-max-width-internal: var(--calcite-sheet-max-width, 420px);--calcite-sheet-min-width-internal: var(--calcite-sheet-min-width, 300px)}:host([position^=inline]) .width-l{--calcite-sheet-width-internal: var(--calcite-sheet-width, 45vw);--calcite-sheet-max-width-internal: var(--calcite-sheet-max-width, 680px);--calcite-sheet-min-width-internal: var(--calcite-sheet-min-width, 340px)}:host([position^=block]) .height-s{--calcite-sheet-min-height-internal: var(--calcite-sheet-min-height, 160px);--calcite-sheet-height-internal: var(--calcite-sheet-height, 30vh);--calcite-sheet-max-height-internal: var(--calcite-sheet-max-height, 30vh)}:host([position^=block]) .height-m{--calcite-sheet-min-height-internal: var(--calcite-sheet-min-height, 200px);--calcite-sheet-height-internal: var(--calcite-sheet-height, 45vh);--calcite-sheet-max-height-internal: var(--calcite-sheet-max-height, 50vh)}:host([position^=block]) .height-l{--calcite-sheet-min-height-internal: var(--calcite-sheet-min-height, 240px);--calcite-sheet-height-internal: var(--calcite-sheet-height, 60vh);--calcite-sheet-max-height-internal: var(--calcite-sheet-max-height, 70vh)}.scrim{--calcite-scrim-background: var(--calcite-sheet-scrim-background, var(--calcite-sheet-scrim-background-internal));position:fixed;inset:0;display:flex;overflow:hidden}:host([opened]){visibility:visible}.content{position:relative;z-index:var(--calcite-z-index-modal);box-sizing:border-box;display:flex;max-inline-size:100%;padding:0;background-color:var(--calcite-sheet-background-color, var(--calcite-color-foreground-1));max-block-size:100%;visibility:hidden;transition:transform var(--calcite-internal-animation-timing-medium) cubic-bezier(.215,.44,.42,.88),visibility 0ms linear var(--calcite-internal-animation-timing-medium),opacity var(--calcite-internal-animation-timing-medium) cubic-bezier(.215,.44,.42,.88);transform:var(--calcite-sheet-hidden-position-internal)}.content-container{position:relative;display:flex;max-block-size:100%;max-inline-size:100%;flex:1 1 0%;overflow:hidden}.container--open .content{transform:translateZ(0)}:host([display-mode=float]) .content,:host([display-mode=float]) .container,:host([display-mode=float]) .content-container{border-radius:var(--calcite-sheet-corner-radius, var(--calcite-corner-radius-round))}:host([display-mode=float]) .container{padding:var(--calcite-spacing-md)}.container--open{visibility:visible;opacity:1;transition-delay:0ms}.container--open .content{pointer-events:auto;visibility:visible;opacity:1;transition:transform var(--calcite-internal-animation-timing-medium) cubic-bezier(.215,.44,.42,.88),visibility 0ms linear,opacity var(--calcite-internal-animation-timing-medium) cubic-bezier(.215,.44,.42,.88),max-inline-size var(--calcite-internal-animation-timing-medium) cubic-bezier(.215,.44,.42,.88),max-block-size var(--calcite-internal-animation-timing-medium) cubic-bezier(.215,.44,.42,.88);transition-delay:0ms}:host([position=inline-start]) .content,:host([position=inline-end]) .content{block-size:100%}:host([position=inline-start]) .content{flex-direction:row}:host([position=inline-end]) .content{flex-direction:row-reverse}:host([position=block-start]) .content,:host([position=block-end]) .content{inline-size:100%}:host([position=block-start]) .content{flex-direction:column}:host([position=block-end]) .content{flex-direction:column-reverse}:host([resizable][position=inline-start]) .content{padding-inline-end:var(--calcite-size-fixed-sm-plus)}:host([resizable][position=inline-end]) .content{padding-inline-start:var(--calcite-size-fixed-sm-plus)}:host([resizable][position=block-start]) .content{padding-block-end:var(--calcite-size-fixed-sm-plus)}:host([resizable][position=block-end]) .content{padding-block-start:var(--calcite-size-fixed-sm-plus)}.resize-handle{position:absolute;box-sizing:border-box;display:flex;-webkit-user-select:none;user-select:none;align-items:center;justify-content:center;outline:2px solid transparent;outline-offset:2px;--calcite-internal-sheet-resize-handle-offset: calc( (var(--calcite-size-fixed-xxl) - var(--calcite-size-fixed-sm-plus)) / 2 * -1 );z-index:var(--calcite-z-index-header)}.resize-handle:active .resize-handle-bar,.resize-handle:hover .resize-handle-bar{color:var(--calcite-sheet-resize-icon-color, var(--calcite-color-text-1));background-color:var(--calcite-sheet-resize-background-color, var(--calcite-color-foreground-3))}.resize-handle-bar{pointer-events:none;display:flex;align-items:center;justify-content:center;color:var(--calcite-sheet-resize-icon-color, var(--calcite-color-border-input));background-color:var(--calcite-sheet-resize-background-color, var(--calcite-color-background))}.resize-handle:focus .resize-handle-bar{outline-color:transparent;outline:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)))}:host([position=inline-start]) .resize-handle{inline-size:var(--calcite-size-fixed-xxl);inset-inline-end:var(--calcite-internal-sheet-resize-handle-offset);block-size:100%}:host([position=inline-start]) .resize-handle-bar{block-size:100%;inline-size:var(--calcite-size-fixed-sm-plus);border-inline-start:var(--calcite-border-width-sm) solid var(--calcite-sheet-border-color, var(--calcite-color-border-3))}:host([position=inline-start]):host([display-mode=float]) .resize-handle-bar{border-start-end-radius:var(--calcite-sheet-corner-radius, var(--calcite-corner-radius-round));border-end-end-radius:var(--calcite-sheet-corner-radius, var(--calcite-corner-radius-round))}:host([position=inline-end]) .resize-handle{inline-size:var(--calcite-size-fixed-xxl);inset-inline-start:var(--calcite-internal-sheet-resize-handle-offset);block-size:100%}:host([position=inline-end]) .resize-handle-bar{block-size:100%;inline-size:var(--calcite-size-fixed-sm-plus);border-inline-end:var(--calcite-border-width-sm) solid var(--calcite-sheet-border-color, var(--calcite-color-border-3))}:host([position=inline-end]):host([display-mode=float]) .resize-handle-bar{border-start-start-radius:.25rem;border-end-start-radius:.25rem}:host([position=block-start]) .resize-handle{block-size:var(--calcite-size-fixed-xxl);inline-size:100%;inset-block-end:var(--calcite-internal-sheet-resize-handle-offset)}:host([position=block-start]) .resize-handle-bar{inline-size:100%;block-size:var(--calcite-size-fixed-sm-plus);border-block-start:var(--calcite-border-width-sm) solid var(--calcite-sheet-border-color, var(--calcite-color-border-3))}:host([position=block-start]):host([display-mode=float]) .resize-handle-bar{border-end-end-radius:.25rem;border-end-start-radius:.25rem}:host([position=block-end]) .resize-handle{block-size:var(--calcite-size-fixed-xxl);inline-size:100%;inset-block-start:var(--calcite-internal-sheet-resize-handle-offset)}:host([position=block-end]) .resize-handle-bar{inline-size:100%;block-size:var(--calcite-size-fixed-sm-plus);border-block-end:var(--calcite-border-width-sm) solid var(--calcite-sheet-border-color, var(--calcite-color-border-3))}:host([position=block-end]):host([display-mode=float]) .resize-handle-bar{border-start-start-radius:var(--calcite-sheet-corner-radius, var(--calcite-corner-radius-round));border-start-end-radius:var(--calcite-sheet-corner-radius, var(--calcite-corner-radius-round))}:host([position]) .container--embedded{pointer-events:auto;position:absolute;inline-size:100%;max-inline-size:100%;min-inline-size:100%;block-size:100%;max-block-size:100%;min-block-size:100%}:host([position]) .container--embedded calcite-scrim{position:absolute}:host([hidden]){display:none}[hidden]{display:none}`;
class Sheet extends LitElement {
constructor() {
super();
this.focusTrap = useFocusTrap({
triggerProp: "open",
focusTrapOptions: {
// scrim closes on click, so we let it take over
clickOutsideDeactivates: () => this.embedded,
escapeDeactivates: (event) => {
if (!event.defaultPrevented && !this.escapeDisabled) {
this.open = false;
event.preventDefault();
}
return false;
}
}
})(this);
this.usePreventDocumentScroll = usePreventDocumentScroll()(this);
this.ignoreOpenChange = false;
this.messages = useT9n();
this.mutationObserver = createObserver("mutation", () => this.handleMutationObserver());
this._open = false;
this.openProp = "opened";
this.transitionProp = "opacity";
this.keyDownHandler = (event) => {
const { defaultPrevented, key } = event;
if (!defaultPrevented && !this.escapeDisabled && this.focusTrapDisabled && this.open && key === "Escape") {
event.preventDefault();
this.open = false;
}
};
this.resizeValues = {
inlineSize: null,
blockSize: null,
minInlineSize: null,
minBlockSize: null,
maxInlineSize: null,
maxBlockSize: null
};
this.displayMode = "overlay";
this.embedded = false;
this.escapeDisabled = false;
this.focusTrapDisabled = false;
this.heightScale = "m";
this.opened = false;
this.outsideCloseDisabled = false;
this.position = "inline-start";
this.resizable = false;
this.widthScale = "m";
this.calciteSheetBeforeClose = createEvent({ cancelable: false });
this.calciteSheetBeforeOpen = createEvent({ cancelable: false });
this.calciteSheetClose = createEvent({ cancelable: false });
this.calciteSheetOpen = createEvent({ cancelable: false });
this.listen("keydown", this.keyDownHandler);
}
static {
this.properties = { resizeValues: [16, {}, { state: true }], preventDocumentScroll: [16, {}, { state: true }], beforeClose: [0, {}, { attribute: false }], displayMode: [3, {}, { reflect: true }], embedded: [5, {}, { type: Boolean }], escapeDisabled: [7, {}, { reflect: true, type: Boolean }], focusTrapDisabled: [7, {}, { reflect: true, type: Boolean }], focusTrapOptions: [0, {}, { attribute: false }], heightScale: [3, {}, { reflect: true }], height: [3, {}, { reflect: true }], label: 1, messageOverrides: [0, {}, { attribute: false }], open: [7, {}, { reflect: true, type: Boolean }], opened: [7, {}, { reflect: true, type: Boolean }], outsideCloseDisabled: [7, {}, { reflect: true, type: Boolean }], position: [3, {}, { reflect: true }], resizable: [7, {}, { reflect: true, type: Boolean }], widthScale: [3, {}, { reflect: true }], width: [3, {}, { reflect: true }] };
}
static {
this.styles = styles;
}
get preventDocumentScroll() {
return !this.embedded;
}
get open() {
return this._open;
}
set open(open) {
const oldOpen = this._open;
if (open !== oldOpen) {
this._open = open;
this.toggleSheet(open);
}
}
async setFocus() {
await componentFocusable(this);
focusFirstTabbable(this.el);
}
async updateFocusTrapElements(extraContainers) {
this.focusTrap.setExtraContainers(extraContainers);
this.focusTrap.updateContainerElements();
}
connectedCallback() {
super.connectedCallback();
this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
this.setupInteractions();
}
load() {
if (this.open) {
this.openSheet();
}
}
willUpdate(changes) {
if (changes.has("opened") && (this.hasUpdated || this.opened !== false)) {
onToggleOpenCloseComponent(this);
}
if (changes.has("open") && (this.hasUpdated || this.open !== false) || changes.has("position") && (this.hasUpdated || this.position !== "inline-start") || changes.has("resizable") && (this.hasUpdated || this.resizable !== false)) {
this.setupInteractions();
}
}
disconnectedCallback() {
super.disconnectedCallback();
this.mutationObserver?.disconnect();
this.embedded = false;
this.cleanupInteractions();
}
toggleSheet(value) {
if (this.ignoreOpenChange) {
return;
}
if (value) {
this.openSheet();
} else {
this.closeSheet();
}
}
getResizeIcon() {
const { position } = this;
return position === "block-start" || position === "block-end" ? "drag-resize-vertical" : "drag-resize-horizontal";
}
getContentElDOMRect() {
return this.contentEl.getBoundingClientRect();
}
handleKeyDown(event) {
const { key, defaultPrevented, shiftKey } = event;
const { position, resizable, contentEl, el, resizeValues: { maxBlockSize, maxInlineSize, minBlockSize, minInlineSize } } = this;
const arrowKeys = position === "block-end" || position === "block-start" ? ["ArrowUp", "ArrowDown"] : ["ArrowLeft", "ArrowRight"];
const keys = [...arrowKeys, "Home", "End"];
if (!resizable || !contentEl || defaultPrevented || !keys.includes(key)) {
return;
}
const rect = this.getContentElDOMRect();
const invertRTL = getElementDir(el) === "rtl" ? -1 : 1;
const stepValue = shiftKey ? resizeShiftStep : resizeStep;
switch (key) {
case "ArrowUp":
this.updateSize({
size: rect.height + (position === "block-end" ? stepValue : -stepValue),
type: "blockSize"
});
event.preventDefault();
break;
case "ArrowDown":
this.updateSize({
size: rect.height + (position === "block-end" ? -stepValue : stepValue),
type: "blockSize"
});
event.preventDefault();
break;
case "ArrowLeft":
this.updateSize({
size: rect.width + (position === "inline-end" ? stepValue : -stepValue) * invertRTL,
type: "inlineSize"
});
event.preventDefault();
break;
case "ArrowRight":
this.updateSize({
size: rect.width + (position === "inline-end" ? -stepValue : stepValue) * invertRTL,
type: "inlineSize"
});
event.preventDefault();
break;
case "Home":
this.updateSize({
size: position === "block-start" || position === "block-end" ? minBlockSize : minInlineSize,
type: position === "block-start" || position === "block-end" ? "blockSize" : "inlineSize"
});
event.preventDefault();
break;
case "End":
this.updateSize({
size: position === "block-start" || position === "block-end" ? maxBlockSize : maxInlineSize,
type: position === "block-start" || position === "block-end" ? "blockSize" : "inlineSize"
});
event.preventDefault();
break;
}
}
updateSize({ type, size }) {
const { contentEl, resizeValues } = this;
if (!contentEl) {
return;
}
const resizeMin = type === "blockSize" ? "minBlockSize" : "minInlineSize";
const resizeMax = type === "blockSize" ? "maxBlockSize" : "maxInlineSize";
const clamped = resizeValues[resizeMin] && resizeValues[resizeMax] ? clamp(size, resizeValues[resizeMin], resizeValues[resizeMax]) : size;
const rounded = Math.round(clamped);
this.resizeValues = {
...resizeValues,
[type]: rounded
};
contentEl.style[type] = size !== null ? `${rounded}px` : null;
}
cleanupInteractions() {
this.interaction?.unset();
this.updateSize({ size: null, type: "inlineSize" });
this.updateSize({ size: null, type: "blockSize" });
}
async setupInteractions() {
this.cleanupInteractions();
const { el, contentEl, resizable, position, open, resizeHandleEl } = this;
if (!contentEl || !open || !resizable || !resizeHandleEl) {
return;
}
await this.el.componentOnReady();
const { inlineSize, minInlineSize, blockSize, minBlockSize, maxInlineSize, maxBlockSize } = window.getComputedStyle(contentEl);
const values = {
inlineSize: getStylePixelValue(inlineSize),
blockSize: getStylePixelValue(blockSize),
minInlineSize: getStylePixelValue(minInlineSize),
minBlockSize: getStylePixelValue(minBlockSize),
maxInlineSize: getStylePixelValue(maxInlineSize) || window.innerWidth,
maxBlockSize: getStylePixelValue(maxBlockSize) || window.innerHeight
};
this.resizeValues = values;
const rtl = getElementDir(el) === "rtl";
this.interaction = interact(contentEl, { context: el.ownerDocument }).resizable({
edges: {
top: position === "block-end" ? resizeHandleEl : false,
right: position === (rtl ? "inline-end" : "inline-start") ? resizeHandleEl : false,
bottom: position === "block-start" ? resizeHandleEl : false,
left: position === (rtl ? "inline-start" : "inline-end") ? resizeHandleEl : false
},
modifiers: [
interact.modifiers.restrictSize({
min: {
width: values.minInlineSize,
height: values.minBlockSize
},
max: {
width: values.maxInlineSize,
height: values.maxBlockSize
}
})
],
listeners: {
move: ({ rect }) => {
const isBlock = position === "block-start" || position === "block-end";
this.updateSize({
size: isBlock ? rect.height : rect.width,
type: isBlock ? "blockSize" : "inlineSize"
});
}
}
});
}
onBeforeOpen() {
this.calciteSheetBeforeOpen.emit();
}
onOpen() {
if (this.focusTrapDisabled) {
this.setFocus();
}
this.focusTrap.activate();
this.calciteSheetOpen.emit();
}
onBeforeClose() {
this.calciteSheetBeforeClose.emit();
}
onClose() {
this.calciteSheetClose.emit();
this.focusTrap.deactivate();
}
setResizeHandleEl(el) {
this.resizeHandleEl = el;
this.setupInteractions();
}
setContentEl(el) {
this.contentEl = el;
this.contentId = ensureId(el);
}
setTransitionEl(el) {
if (!el) {
return;
}
this.transitionEl = el;
}
async openSheet() {
await this.componentOnReady();
this.opened = true;
}
handleOutsideClose() {
if (this.outsideCloseDisabled) {
return;
}
this.open = false;
}
async closeSheet() {
if (this.beforeClose) {
try {
await this.beforeClose(this.el);
} catch {
requestAnimationFrame(() => {
this.ignoreOpenChange = true;
this.open = true;
this.ignoreOpenChange = false;
});
return;
}
}
this.opened = false;
}
handleMutationObserver() {
this.focusTrap.updateContainerElements();
}
render() {
const { resizable, position, resizeValues } = this;
const dir = getElementDir(this.el);
const isBlockPosition = position === "block-start" || position === "block-end";
setAttribute(this.el, "aria-describedby", this.contentId);
this.el.ariaLabel = this.label;
this.el.ariaModal = "true";
this.el.role = "dialog";
return html`<div class=${safeClassMap({
[CSS.container]: true,
[CSS.containerOpen]: this.opened,
[CSS.containerEmbedded]: this.embedded,
[CSS_UTILITY.rtl]: dir === "rtl",
[getDimensionClass("width", this.width, this.widthScale)]: !!(this.width || this.widthScale),
[getDimensionClass("height", this.height, this.heightScale)]: !!(this.height || this.heightScale)
})} ${ref(this.setTransitionEl)}><calcite-scrim class=${safeClassMap(CSS.scrim)} @click=${this.handleOutsideClose}></calcite-scrim><div class=${safeClassMap(CSS.content)} id=sheet-content ${ref(this.setContentEl)}><div class=${safeClassMap(CSS.contentContainer)}><slot></slot></div>${resizable ? keyed("resize-handle", html`<div .ariaLabel=${this.messages.resizeEnabled} .ariaOrientation=${isBlockPosition ? "vertical" : "horizontal"} .ariaValueMax=${isBlockPosition ? resizeValues.maxBlockSize : resizeValues.maxInlineSize} .ariaValueMin=${isBlockPosition ? resizeValues.minBlockSize : resizeValues.minInlineSize} .ariaValueNow=${isBlockPosition ? resizeValues.blockSize : resizeValues.inlineSize} class=${safeClassMap(CSS.resizeHandle)} @keydown=${this.handleKeyDown} role=separator tabindex=0 touch-action=none ${ref(this.setResizeHandleEl)}><div class=${safeClassMap(CSS.resizeHandleBar)}><calcite-icon .icon=${this.getResizeIcon()} scale=s></calcite-icon></div></div>`) : null}</div></div>`;
}
}
customElement("calcite-sheet", Sheet);
export {
Sheet
};