@arcgis/map-components
Version:
ArcGIS Map Components
129 lines (128 loc) • 7.13 kB
JavaScript
/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
import { c as u } from "../../chunks/runtime.js";
import { LitElement as _, safeStyleMap as w } from "@arcgis/lumina";
import { css as M, html as b } from "lit";
import { usePropertyChange as E } from "@arcgis/lumina/controllers";
const R = M`:host{display:block;pointer-events:initial}calcite-popover{pointer-events:initial}.content{min-inline-size:min(calc(100cqw - var(--arcgis-view-popover-width-reserve, 32px)),var(--arcgis-view-popover-min-inline-size, 300px));max-inline-size:min(calc(100cqw - var(--arcgis-view-popover-width-reserve, 32px)),var(--arcgis-view-popover-max-inline-size, 400px));max-height:var( --arcgis-view-popover-content-max-height, calc(100cqh - var(--arcgis-view-popover-height-reserve, 77px)) );-webkit-user-select:none;user-select:none;overflow-y:auto}`, l = 6, z = 2, S = 32, x = 77, y = 0;
function O(t) {
const e = B(t), i = t.actionBarLayout === "vertical" ? 0 : e;
return {
effectiveTailOffset: e,
horizontalMargin: A(t),
verticalMargin: k(t) + i + t.headerRect.height,
offsetSkidding: P(t),
placement: C(t)
};
}
function B({ actionBarLayout: t, actionRect: e, barRect: i, tailAttachmentAppearance: a }) {
const r = a === "bar" ? t === "vertical" ? Math.max(0, e.left - i.left) : Math.max(0, e.top - i.top) : 0;
return l + r;
}
function A({ actionBarLayout: t, barRect: { left: e, right: i }, actionRect: { left: a }, tailAttachmentAppearance: r, viewEdgeMargin: n }) {
const o = n * 2;
if (t === "vertical") {
const h = i - e, v = r === "action" ? -(a - e - l) : l;
return o + h + v;
}
return o;
}
function P(t) {
return t.actionBarLayout === "vertical" || f(t) === "left" ? t.viewEdgeMargin : -t.viewEdgeMargin;
}
function C(t) {
const { actionBarLayout: e, actionRect: i, viewRect: a } = t, r = f(t);
if (e === "vertical")
return r === "left" ? "right-end" : "left-end";
const n = i.bottom - a.top < a.height / 2 ? "bottom" : "top";
return r === "left" ? `${n}-end` : `${n}-start`;
}
function f({ barRect: { left: t, right: e }, viewRect: { left: i, right: a } }) {
return t - i < a - e ? "left" : "right";
}
function $({ actionRect: t, viewRect: e }) {
return t.top - e.top > e.height / 2 ? "bottom" : "top";
}
function k(t) {
const { actionBarLayout: e, actionRect: i, attributionHeight: a, viewEdgeMargin: r, viewRect: n } = t, o = $(t), h = i.bottom - n.top, v = i.top - n.top, g = o === "top" ? h : r, d = r, p = a + r, m = o === "top" ? p : n.height - v;
return (e === "vertical" ? d + p : g + m) + z;
}
function s() {
return new DOMRect(0, 0, 0, 0);
}
function c(t) {
return t?.getBoundingClientRect() ?? s();
}
class T extends _ {
constructor() {
super(...arguments), this._handlePopoverBeforeOpen = (e) => {
if (e.target !== e.currentTarget)
return;
const i = e.currentTarget;
this._headerElement = i.shadowRoot?.querySelector(".header") ?? void 0, this._observeMeasurementElements(), this._remeasureAndSolve();
}, this._handlePopoverClose = (e) => {
e.target === e.currentTarget && (e.preventDefault(), this.open = !1, this._stopMeasuring());
}, this._viewRect = s(), this._barRect = s(), this._actionRect = s(), this._headerRect = s(), this._resizeObserver = new ResizeObserver(() => this._remeasureAndSolve()), this._placement = "bottom-end", this._effectiveTailOffset = l, this._offsetSkidding = y, this._horizontalMargin = S, this._verticalMargin = x, this.closable = !0, this.open = !1, this.maxContentWidth = 400, this.minContentWidth = 300, this.viewEdgeMargin = 16, this.visualScale = "m", this.tailAttachmentAppearance = "bar", this.arcgisPropertyChange = E()("open");
}
static {
this.properties = { _placement: 16, _effectiveTailOffset: 16, _offsetSkidding: 16, _horizontalMargin: 16, _verticalMargin: 16, view: 0, actionBarLayout: 32, actionBarElement: 0, anchorElement: 0, closable: 5, heading: 1, label: 1, open: 5, maxContentWidth: 9, minContentWidth: 9, viewEdgeMargin: 9, visualScale: 1, tailAttachmentAppearance: 1 };
}
static {
this.styles = R;
}
get _viewElement() {
return this.view?.container ?? void 0;
}
get actionBarLayout() {
return this.actionBarElement?.layout === "vertical" ? "vertical" : "horizontal";
}
willUpdate(e) {
e.has("open") && !this.open ? this._stopMeasuring() : this.open && this._hasParameterInputChange(e) ? this._remeasureAndSolve() : this.open && this._hasObservedElementChange(e) && this._observeMeasurementElements();
}
disconnectedCallback() {
super.disconnectedCallback(), this._stopMeasuring();
}
_hasObservedElementChange(e) {
return e.has("actionBarElement") || e.has("anchorElement") || e.has("view");
}
_hasParameterInputChange(e) {
return e.has("open") && this.open || e.has("tailAttachmentAppearance") || e.has("viewEdgeMargin") || e.has("visualScale");
}
_observeMeasurementElements() {
this._resizeObserver.disconnect();
for (const e of [this.anchorElement, this.actionBarElement, this._viewElement, this._headerElement])
e && this._resizeObserver.observe(e);
this._remeasureAndSolve();
}
_stopMeasuring() {
this._resizeObserver.disconnect(), this._headerElement = void 0;
}
_remeasureAndSolve() {
this._actionRect = c(this.anchorElement), this._barRect = c(this.actionBarElement), this._headerRect = c(this._headerElement), this._viewRect = c(this._viewElement), this._solveLayoutAndUpdate();
}
_solveLayoutAndUpdate() {
const { effectiveTailOffset: e, horizontalMargin: i, verticalMargin: a, offsetSkidding: r, placement: n } = O({
actionBarLayout: this.actionBarLayout,
actionRect: this._actionRect,
attributionHeight: this.view?.attributionHeight ?? 0,
barRect: this._barRect,
headerRect: this._headerRect,
visualScale: this.visualScale,
tailAttachmentAppearance: this.tailAttachmentAppearance,
viewEdgeMargin: this.viewEdgeMargin,
viewRect: this._viewRect
});
this._effectiveTailOffset = e, this._horizontalMargin = i, this._verticalMargin = a, this._offsetSkidding = r, this._placement = n;
}
render() {
return this.anchorElement ? b`<calcite-popover .closable=${this.closable} .heading=${this.heading} .label=${this.label ?? ""} .open=${this.open} .offsetDistance=${this._effectiveTailOffset} .offsetSkidding=${this._offsetSkidding} overlay-positioning=fixed flip-disabled .placement=${this._placement} .referenceElement=${this.anchorElement} =${this._handlePopoverBeforeOpen} .scale=${this.visualScale} style=${w({
"--arcgis-view-popover-max-inline-size": `${this.maxContentWidth}px`,
"--arcgis-view-popover-min-inline-size": `${this.minContentWidth}px`,
"--arcgis-view-popover-height-reserve": `${this._verticalMargin}px`,
"--arcgis-view-popover-width-reserve": `${this._horizontalMargin}px`
})} trigger-disabled =${this._handlePopoverClose}><div class="content"><slot></slot></div></calcite-popover>` : null;
}
}
u("arcgis-view-popover", T);
export {
T as ArcgisViewPopover
};