@arcgis/map-components 5.1.0-next.76 → 5.1.0-next.77
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -4,13 +4,13 @@ import { css as E, html as g } from "lit";
|
|
|
4
4
|
import { keyed as P } from "lit/directives/keyed.js";
|
|
5
5
|
import F from "@arcgis/core/popup/Features.js";
|
|
6
6
|
import { u as $ } from "../../chunks/useT9n.js";
|
|
7
|
-
import { useDirection as N, usePropertyChange as
|
|
8
|
-
import { m as
|
|
7
|
+
import { useDirection as N, usePropertyChange as L } from "@arcgis/lumina/controllers";
|
|
8
|
+
import { m as O } from "../../chunks/useViewModel.js";
|
|
9
9
|
import { LitElement as S, createEvent as _, safeStyleMap as T, safeClassMap as y } from "@arcgis/lumina";
|
|
10
10
|
import { stripHTML as V } from "@arcgis/core/applications/Components/stringUtils.js";
|
|
11
|
-
import { classes as
|
|
11
|
+
import { classes as x } from "@arcgis/toolkit/dom";
|
|
12
12
|
import { createRef as m, ref as f } from "lit/directives/ref.js";
|
|
13
|
-
import { watch as
|
|
13
|
+
import { watch as h } from "@arcgis/core/core/reactiveUtils.js";
|
|
14
14
|
import B from "@arcgis/core/support/actions/ActionButton.js";
|
|
15
15
|
import { t as H } from "../../chunks/screenLocation.js";
|
|
16
16
|
import "../arcgis-search-result-renderer/customElement.js";
|
|
@@ -18,7 +18,7 @@ const I = E`:host{display:contents;--arcgis-internal-popup-pointer-size: 12px;--
|
|
|
18
18
|
function b(k) {
|
|
19
19
|
return k && Number.parseInt(k.replaceAll(/[^-\d.]/gu, ""), 10) || 0;
|
|
20
20
|
}
|
|
21
|
-
const j =
|
|
21
|
+
const j = O(F), C = {
|
|
22
22
|
buttonEnabled: !0,
|
|
23
23
|
position: "auto",
|
|
24
24
|
breakpoint: {
|
|
@@ -29,7 +29,7 @@ class W extends S {
|
|
|
29
29
|
constructor() {
|
|
30
30
|
super(...arguments), this._direction = N(), this._featuresComponent = m(), this._dockAction = new B({ id: "popup-dock-action" }), this._mainContainerNode = m(), this._pointerNode = m(), this.messages = $(), this.viewModel = j(this), this._containerNode = m(), this._popupResizeObserver = new ResizeObserver(() => this._positionContainer()), this._positionContainer = () => {
|
|
31
31
|
this.positionStyle = this._calculatePositionStyle();
|
|
32
|
-
}, this.screenLocation = H(this), this.actions = this.viewModel.actions, this.active = this.viewModel.active, this.alignment = "auto", this.autoCloseEnabled = !1, this.autoDestroyDisabled = !1, this.collapsed = !1, this.content = this.viewModel.content, this.defaultPopupTemplateEnabled = this.viewModel.defaultPopupTemplateEnabled, this.dockEnabled = !1, this.featureCount = this.viewModel.featureCount, this.featureMenuOpen = !1, this.features = this.viewModel.features, this.goToOverride = this.viewModel.goToOverride, this.heading = this.viewModel.heading, this.headingLevel = 2, this.hideActionBar = !1, this.hideCloseButton = !1, this.hideCollapseButton = !1, this.hideFeatureMenuHeading = !1, this.hideFeatureNavigation = !1, this.hideFeatureListLayerTitle = !1, this.hideHeading = !1, this.hideSpinner = !1, this.highlightDisabled = this.viewModel.highlightEnabled, this.includeDefaultActionsDisabled = this.viewModel.includeDefaultActions, this.initialDisplayMode = this.viewModel.initialDisplayMode, this.location = this.viewModel.location, this.open = this.viewModel.open, this.promises = this.viewModel.promises, this.selectedFeature = this.viewModel.selectedFeature, this.selectedFeatureIndex = this.viewModel.selectedFeatureIndex, this.state = this.viewModel.state, this.topLayerDisabled = !1, this.updateLocationEnabled = this.viewModel.updateLocationEnabled, this.view = this.viewModel.view, this.arcgisPropertyChange =
|
|
32
|
+
}, this.screenLocation = H(this), this.actions = this.viewModel.actions, this.active = this.viewModel.active, this.alignment = "auto", this.autoCloseEnabled = !1, this.autoDestroyDisabled = !1, this.collapsed = !1, this.content = this.viewModel.content, this.defaultPopupTemplateEnabled = this.viewModel.defaultPopupTemplateEnabled, this.dockEnabled = !1, this.featureCount = this.viewModel.featureCount, this.featureMenuOpen = !1, this.features = this.viewModel.features, this.goToOverride = this.viewModel.goToOverride, this.heading = this.viewModel.heading, this.headingLevel = 2, this.hideActionBar = !1, this.hideCloseButton = !1, this.hideCollapseButton = !1, this.hideFeatureMenuHeading = !1, this.hideFeatureNavigation = !1, this.hideFeatureListLayerTitle = !1, this.hideHeading = !1, this.hideSpinner = !1, this.highlightDisabled = this.viewModel.highlightEnabled, this.includeDefaultActionsDisabled = this.viewModel.includeDefaultActions, this.initialDisplayMode = this.viewModel.initialDisplayMode, this.location = this.viewModel.location, this.open = this.viewModel.open, this.promises = this.viewModel.promises, this.selectedFeature = this.viewModel.selectedFeature, this.selectedFeatureIndex = this.viewModel.selectedFeatureIndex, this.state = this.viewModel.state, this.topLayerDisabled = !1, this.updateLocationEnabled = this.viewModel.updateLocationEnabled, this.view = this.viewModel.view, this.arcgisPropertyChange = L()("active", "collapsed", "currentAlignment", "dockEnabled", "featureCount", "featureMenuOpen", "features", "promises", "selectedDrillInFeature", "selectedFeature", "selectedFeatureComponent", "selectedFeatureIndex", "state", "open"), this.arcgisReady = _(), this.arcgisClose = _(), this.arcgisTriggerAction = _();
|
|
33
33
|
}
|
|
34
34
|
static {
|
|
35
35
|
this.properties = { screenLocation: 16, positionStyle: 16, _featureNavigationTop: 16, actions: 0, active: 0, alignment: 1, autoCloseEnabled: 5, autoDestroyDisabled: 5, collapsed: 5, content: 1, currentAlignment: 32, currentDockPosition: 32, defaultPopupTemplateEnabled: 5, dockEnabled: 5, dockOptions: 0, featureCount: 0, featureMenuOpen: 5, featureMenuTitle: 1, features: 0, goToOverride: 0, heading: 1, headingLevel: 9, hideActionBar: 5, hideCloseButton: 5, hideCollapseButton: 5, hideFeatureMenuHeading: 5, hideFeatureNavigation: 5, hideFeatureListLayerTitle: 5, hideHeading: 5, hideSpinner: 5, highlightDisabled: 5, includeDefaultActionsDisabled: 5, initialDisplayMode: 1, label: 1, location: 0, messageOverrides: 0, open: 5, promises: 0, referenceElement: 1, selectedDrillInFeature: 32, selectedFeature: 0, selectedFeatureComponent: 32, selectedFeatureIndex: 9, state: 32, topLayerDisabled: 5, updateLocationEnabled: 5, view: 0 };
|
|
@@ -51,13 +51,13 @@ class W extends S {
|
|
|
51
51
|
return this._getCurrentDockPosition();
|
|
52
52
|
}
|
|
53
53
|
get dockOptions() {
|
|
54
|
-
return this._dockOptions ||
|
|
54
|
+
return this._dockOptions || C;
|
|
55
55
|
}
|
|
56
56
|
set dockOptions(t) {
|
|
57
|
-
const e = { ...
|
|
58
|
-
|
|
59
|
-
const r = { ...e, ...t }, n = { ...e.breakpoint, ...
|
|
60
|
-
typeof
|
|
57
|
+
const e = { ...C }, o = this.viewModel?.view?.breakpoints, i = {};
|
|
58
|
+
o && (i.width = o.xsmall, i.height = o.xsmall);
|
|
59
|
+
const r = { ...e, ...t }, n = { ...e.breakpoint, ...i }, { breakpoint: s } = r;
|
|
60
|
+
typeof s == "object" ? r.breakpoint = { ...n, ...s } : s && (r.breakpoint = n), this._dockOptions = r;
|
|
61
61
|
}
|
|
62
62
|
get selectedDrillInFeature() {
|
|
63
63
|
return this._featuresComponent.value?.selectedDrillInFeature ?? null;
|
|
@@ -91,13 +91,13 @@ class W extends S {
|
|
|
91
91
|
}
|
|
92
92
|
loaded() {
|
|
93
93
|
this.manager.onLifecycle(() => [
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
const { _dockAction: t, dockOptions: e } = this,
|
|
98
|
-
|
|
94
|
+
h(() => [this.viewModel?.view?.widthBreakpoint, this.dockEnabled, this._direction], () => this._handleDockIcon(), { initial: !0 }),
|
|
95
|
+
h(() => [this.dockEnabled, this.messages?.undock, this.messages?.dock], () => this._handleDockEnabled(), { initial: !0 }),
|
|
96
|
+
h(() => [this.dockOptions, this._featuresComponent.value], () => {
|
|
97
|
+
const { _dockAction: t, dockOptions: e } = this, o = this._featuresComponent.value?.headerActions;
|
|
98
|
+
o?.remove(t), e.buttonEnabled && o?.add(t);
|
|
99
99
|
}, { initial: !0 }),
|
|
100
|
-
|
|
100
|
+
h(() => [
|
|
101
101
|
this._pointerNode.value,
|
|
102
102
|
this.alignment,
|
|
103
103
|
this.currentAlignment,
|
|
@@ -108,16 +108,16 @@ class W extends S {
|
|
|
108
108
|
this.viewModel?.location,
|
|
109
109
|
this.viewModel?.view?.size
|
|
110
110
|
], () => this._positionContainer(), { initial: !0 }),
|
|
111
|
-
|
|
111
|
+
h(() => this._mainContainerNode.value, (t) => {
|
|
112
112
|
this._popupResizeObserver.disconnect(), t && this._popupResizeObserver.observe(t);
|
|
113
113
|
}, { initial: !0 }),
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
114
|
+
h(() => this.viewModel?.view?.size, (t, e) => this._updateDockEnabledForViewSize(t, e)),
|
|
115
|
+
h(() => this.viewModel?.view?.ready, () => this._setDockEnabledForViewSize(this.dockOptions), { initial: !0 }),
|
|
116
|
+
h(() => this.view?.map, (t) => {
|
|
117
117
|
this.viewModel.map = t;
|
|
118
118
|
}, { initial: !0 }),
|
|
119
|
-
|
|
120
|
-
|
|
119
|
+
h(() => this.screenLocation, (t, e) => this._autoClose(t, e)),
|
|
120
|
+
h(() => [this.active, this._containerNode.value, this.dockEnabled, this.topLayerDisabled], () => this._togglePopover(), { initial: !0 })
|
|
121
121
|
]);
|
|
122
122
|
}
|
|
123
123
|
_togglePopover() {
|
|
@@ -136,45 +136,45 @@ class W extends S {
|
|
|
136
136
|
t.stopPropagation(), t.detail.action === this._dockAction && (this.dockEnabled = !this.dockEnabled), this.arcgisTriggerAction.emit({ action: t.detail.action });
|
|
137
137
|
}
|
|
138
138
|
_isOutsideView(t) {
|
|
139
|
-
const { popupHeight: e, popupWidth:
|
|
140
|
-
return Number.isNaN(
|
|
139
|
+
const { popupHeight: e, popupWidth: o, screenLocation: i, side: r, view: n } = t;
|
|
140
|
+
return Number.isNaN(o) || Number.isNaN(e) || !n || !i ? !1 : r === "right" && i.x + o / 2 > n.width || r === "left" && i.x - o / 2 < 0 || r === "top" && i.y - e < 0 || r === "bottom" && i.y + e > n.height;
|
|
141
141
|
}
|
|
142
142
|
_getPointerSize() {
|
|
143
|
-
const { _pointerNode: t } = this, e = t.value ? window.getComputedStyle(t.value) : null,
|
|
144
|
-
return Math.hypot(
|
|
143
|
+
const { _pointerNode: t } = this, e = t.value ? window.getComputedStyle(t.value) : null, o = b(e?.height), i = b(e?.width);
|
|
144
|
+
return Math.hypot(o, i);
|
|
145
145
|
}
|
|
146
146
|
_calculateAutoAlignment(t) {
|
|
147
147
|
if (t !== "auto")
|
|
148
148
|
return t;
|
|
149
|
-
const { _mainContainerNode: e, _popupRect:
|
|
150
|
-
if (n == null || !r || !
|
|
149
|
+
const { _mainContainerNode: e, _popupRect: o, viewModel: i } = this, { view: r } = i, { screenLocation: n } = this;
|
|
150
|
+
if (n == null || !r || !o || !e.value)
|
|
151
151
|
return "top-center";
|
|
152
|
-
const
|
|
152
|
+
const s = window.getComputedStyle(e.value), l = b(s.maxHeight), a = b(s.height), c = this._getPointerSize(), { height: d, width: v } = o, p = v + c, u = Math.max(d, l, a) + c, M = this._isOutsideView({
|
|
153
153
|
popupHeight: u,
|
|
154
|
-
popupWidth:
|
|
154
|
+
popupWidth: p,
|
|
155
155
|
screenLocation: n,
|
|
156
156
|
side: "right",
|
|
157
157
|
view: r
|
|
158
|
-
}),
|
|
158
|
+
}), D = this._isOutsideView({
|
|
159
159
|
popupHeight: u,
|
|
160
|
-
popupWidth:
|
|
160
|
+
popupWidth: p,
|
|
161
161
|
screenLocation: n,
|
|
162
162
|
side: "left",
|
|
163
163
|
view: r
|
|
164
164
|
}), w = this._isOutsideView({
|
|
165
165
|
popupHeight: u,
|
|
166
|
-
popupWidth:
|
|
166
|
+
popupWidth: p,
|
|
167
167
|
screenLocation: n,
|
|
168
168
|
side: "top",
|
|
169
169
|
view: r
|
|
170
|
-
}),
|
|
170
|
+
}), z = this._isOutsideView({
|
|
171
171
|
popupHeight: u,
|
|
172
|
-
popupWidth:
|
|
172
|
+
popupWidth: p,
|
|
173
173
|
screenLocation: n,
|
|
174
174
|
side: "bottom",
|
|
175
175
|
view: r
|
|
176
176
|
});
|
|
177
|
-
return
|
|
177
|
+
return D ? w ? "bottom-right" : "top-right" : M ? w ? "bottom-left" : "top-left" : w ? z ? "top-center" : "bottom-center" : "top-center";
|
|
178
178
|
}
|
|
179
179
|
_callCurrentAlignment(t) {
|
|
180
180
|
return typeof t == "function" ? t.call(this) : t;
|
|
@@ -194,11 +194,11 @@ class W extends S {
|
|
|
194
194
|
_calculateAutoDockPosition(t) {
|
|
195
195
|
if (t !== "auto")
|
|
196
196
|
return t;
|
|
197
|
-
const e = this.viewModel?.view,
|
|
197
|
+
const e = this.viewModel?.view, o = "top-end";
|
|
198
198
|
if (!e)
|
|
199
|
-
return
|
|
200
|
-
const { breakpoints:
|
|
201
|
-
return
|
|
199
|
+
return o;
|
|
200
|
+
const { breakpoints: i } = e;
|
|
201
|
+
return i?.xsmall && e.width <= i.xsmall ? "bottom-center" : o;
|
|
202
202
|
}
|
|
203
203
|
_getDockIcon() {
|
|
204
204
|
const t = this._getDockPosition(), { _direction: e } = this;
|
|
@@ -228,39 +228,39 @@ class W extends S {
|
|
|
228
228
|
_handleDockEnabled() {
|
|
229
229
|
this._dockAction.title = this.dockEnabled ? this.messages?.undock : this.messages?.dock;
|
|
230
230
|
}
|
|
231
|
-
_calculateAlignmentPosition(t, e,
|
|
232
|
-
if (t < 0 || e < 0 || !
|
|
231
|
+
_calculateAlignmentPosition(t, e, o, i) {
|
|
232
|
+
if (t < 0 || e < 0 || !o || !i || t > o.width || e > o.height)
|
|
233
233
|
return;
|
|
234
|
-
const {
|
|
235
|
-
if (
|
|
234
|
+
const { topLayerDisabled: r } = this, n = r ? t : t + o.x, s = r ? e : e + o.y, { _direction: l, currentAlignment: a } = this, c = this._getPointerSize(), d = c / 2;
|
|
235
|
+
if (a === "top-left" || a === "top-start" && l === "ltr" || a === "top-end" && l === "rtl")
|
|
236
236
|
return {
|
|
237
|
-
top:
|
|
238
|
-
left:
|
|
237
|
+
top: s - (i.height + d),
|
|
238
|
+
left: n - i.width - d
|
|
239
239
|
};
|
|
240
|
-
if (
|
|
240
|
+
if (a === "top-center")
|
|
241
241
|
return {
|
|
242
|
-
top:
|
|
243
|
-
left:
|
|
242
|
+
top: s - (i.height + c),
|
|
243
|
+
left: n - i.width / 2
|
|
244
244
|
};
|
|
245
|
-
if (
|
|
245
|
+
if (a === "top-right" || a === "top-end" && l === "ltr" || a === "top-start" && l === "rtl")
|
|
246
246
|
return {
|
|
247
|
-
top:
|
|
248
|
-
left:
|
|
247
|
+
top: s - (i.height + d),
|
|
248
|
+
left: n + d
|
|
249
249
|
};
|
|
250
|
-
if (
|
|
250
|
+
if (a === "bottom-left" || a === "bottom-start" && l === "ltr" || a === "bottom-end" && l === "rtl")
|
|
251
251
|
return {
|
|
252
|
-
top:
|
|
253
|
-
left:
|
|
252
|
+
top: s + d,
|
|
253
|
+
left: n - i.width - d
|
|
254
254
|
};
|
|
255
|
-
if (
|
|
255
|
+
if (a === "bottom-center")
|
|
256
256
|
return {
|
|
257
|
-
top:
|
|
258
|
-
left:
|
|
257
|
+
top: s + c,
|
|
258
|
+
left: n - i.width / 2
|
|
259
259
|
};
|
|
260
|
-
if (
|
|
260
|
+
if (a === "bottom-right" || a === "bottom-end" && l === "ltr" || a === "bottom-start" && l === "rtl")
|
|
261
261
|
return {
|
|
262
|
-
top:
|
|
263
|
-
left:
|
|
262
|
+
top: s + d,
|
|
263
|
+
left: n + d
|
|
264
264
|
};
|
|
265
265
|
}
|
|
266
266
|
_getPositionStyleValue(t) {
|
|
@@ -272,79 +272,79 @@ class W extends S {
|
|
|
272
272
|
const { screenLocation: t } = this;
|
|
273
273
|
if (t == null)
|
|
274
274
|
return;
|
|
275
|
-
const e = this.view?.container?.getBoundingClientRect(),
|
|
276
|
-
this._popupRect =
|
|
277
|
-
const
|
|
278
|
-
if (
|
|
279
|
-
return `inset: ${this._getPositionStyleValue(
|
|
275
|
+
const e = this.view?.container?.getBoundingClientRect(), o = this._mainContainerNode.value?.getBoundingClientRect();
|
|
276
|
+
this._popupRect = o;
|
|
277
|
+
const i = this._calculateAlignmentPosition(t.x, t.y, e, o);
|
|
278
|
+
if (i)
|
|
279
|
+
return `inset: ${this._getPositionStyleValue(i.top)} ${this._getPositionStyleValue(i.right)} ${this._getPositionStyleValue(i.bottom)} ${this._getPositionStyleValue(i.left)};`;
|
|
280
280
|
}
|
|
281
|
-
_dockingThresholdCrossed(t, e,
|
|
282
|
-
const [
|
|
283
|
-
return
|
|
281
|
+
_dockingThresholdCrossed(t, e, o) {
|
|
282
|
+
const [i, r] = t, [n, s] = e, { width: l = 0, height: a = 0 } = o ?? {};
|
|
283
|
+
return i <= l && n > l || i > l && n <= l || r <= a && s > a || r > a && s <= a;
|
|
284
284
|
}
|
|
285
285
|
_updateDockEnabledForViewSize(t, e) {
|
|
286
286
|
if (!t || !e || !this.viewModel?.view?.ready)
|
|
287
287
|
return;
|
|
288
|
-
const { dockOptions:
|
|
289
|
-
typeof
|
|
288
|
+
const { dockOptions: o } = this, i = o.breakpoint;
|
|
289
|
+
typeof i == "object" && this._dockingThresholdCrossed(t, e, i) && this._setDockEnabledForViewSize(o);
|
|
290
290
|
}
|
|
291
291
|
_shouldDockAtCurrentViewSize(t) {
|
|
292
|
-
const e = t.breakpoint,
|
|
293
|
-
if (!
|
|
292
|
+
const e = t.breakpoint, o = this.viewModel?.view?.ui;
|
|
293
|
+
if (!o)
|
|
294
294
|
return !1;
|
|
295
|
-
const { width:
|
|
296
|
-
if (Number.isNaN(
|
|
295
|
+
const { width: i, height: r } = o;
|
|
296
|
+
if (Number.isNaN(i) || Number.isNaN(r) || typeof e != "object")
|
|
297
297
|
return !1;
|
|
298
|
-
const n = typeof e.width == "number" &&
|
|
299
|
-
return n ||
|
|
298
|
+
const n = typeof e.width == "number" && i <= (e.width ?? 0), s = typeof e.height == "number" && r <= (e.height ?? 0);
|
|
299
|
+
return n || s;
|
|
300
300
|
}
|
|
301
301
|
_setDockEnabledForViewSize(t) {
|
|
302
302
|
this.viewModel?.view?.ready && typeof t.breakpoint == "object" && (this.dockEnabled = this._shouldDockAtCurrentViewSize(t));
|
|
303
303
|
}
|
|
304
304
|
render() {
|
|
305
|
-
const { _direction: t, dockEnabled: e, currentAlignment:
|
|
306
|
-
"aligned-top-center":
|
|
307
|
-
"aligned-bottom-center":
|
|
308
|
-
"aligned-top-left":
|
|
309
|
-
"aligned-bottom-left":
|
|
310
|
-
"aligned-top-right":
|
|
311
|
-
"aligned-bottom-right":
|
|
312
|
-
"is-docked":
|
|
313
|
-
shadow:
|
|
305
|
+
const { _direction: t, dockEnabled: e, currentAlignment: o, currentDockPosition: i, positionStyle: r } = this, { active: n, view: s } = this.viewModel, l = n && e, a = n && !e, c = s?.widthBreakpoint, d = s?.heightBreakpoint, v = {
|
|
306
|
+
"aligned-top-center": o === "top-center",
|
|
307
|
+
"aligned-bottom-center": o === "bottom-center",
|
|
308
|
+
"aligned-top-left": o === "top-left" || o === "top-start" && t === "ltr" || o === "top-end" && t === "rtl",
|
|
309
|
+
"aligned-bottom-left": o === "bottom-left" || o === "bottom-start" && t === "ltr" || o === "bottom-end" && t === "rtl",
|
|
310
|
+
"aligned-top-right": o === "top-right" || o === "top-end" && t === "ltr" || o === "top-start" && t === "rtl",
|
|
311
|
+
"aligned-bottom-right": o === "bottom-right" || o === "bottom-end" && t === "ltr" || o === "bottom-start" && t === "rtl",
|
|
312
|
+
"is-docked": l,
|
|
313
|
+
shadow: a,
|
|
314
314
|
"is-rtl": this._direction === "rtl",
|
|
315
|
-
"is-docked-top-start":
|
|
316
|
-
"is-docked-top-end":
|
|
317
|
-
"is-docked-top-left":
|
|
318
|
-
"is-docked-top-center":
|
|
319
|
-
"is-docked-top-right":
|
|
320
|
-
"is-docked-bottom-left":
|
|
321
|
-
"is-docked-bottom-center":
|
|
322
|
-
"is-docked-bottom-right":
|
|
323
|
-
"is-docked-bottom-start":
|
|
324
|
-
"is-docked-bottom-end":
|
|
315
|
+
"is-docked-top-start": i === "top-start",
|
|
316
|
+
"is-docked-top-end": i === "top-end",
|
|
317
|
+
"is-docked-top-left": i === "top-left",
|
|
318
|
+
"is-docked-top-center": i === "top-center",
|
|
319
|
+
"is-docked-top-right": i === "top-right",
|
|
320
|
+
"is-docked-bottom-left": i === "bottom-left",
|
|
321
|
+
"is-docked-bottom-center": i === "bottom-center",
|
|
322
|
+
"is-docked-bottom-right": i === "bottom-right",
|
|
323
|
+
"is-docked-bottom-start": i === "bottom-start",
|
|
324
|
+
"is-docked-bottom-end": i === "bottom-end",
|
|
325
325
|
"is-xl-width-breakpoint": c === "xlarge",
|
|
326
326
|
"is-lg-width-breakpoint": c === "large",
|
|
327
327
|
"is-md-width-breakpoint": c === "medium",
|
|
328
328
|
"is-sm-width-breakpoint": c === "small",
|
|
329
329
|
"is-xs-width-breakpoint": c === "xsmall",
|
|
330
|
-
"is-xl-height-breakpoint":
|
|
331
|
-
"is-lg-height-breakpoint":
|
|
332
|
-
"is-md-height-breakpoint":
|
|
333
|
-
"is-sm-height-breakpoint":
|
|
334
|
-
"is-xs-height-breakpoint":
|
|
330
|
+
"is-xl-height-breakpoint": d === "xlarge",
|
|
331
|
+
"is-lg-height-breakpoint": d === "large",
|
|
332
|
+
"is-md-height-breakpoint": d === "medium",
|
|
333
|
+
"is-sm-height-breakpoint": d === "small",
|
|
334
|
+
"is-xs-height-breakpoint": d === "xsmall"
|
|
335
335
|
};
|
|
336
|
-
return g`<div style=${T(r)} class=${y(
|
|
336
|
+
return g`<div style=${T(r)} class=${y(x("root", v, {
|
|
337
337
|
hidden: !n || !r && !e
|
|
338
338
|
}))} .ariaHidden=${!n} .ariaLabel=${V(this.heading ?? "")} role=dialog popover=manual ${f(this._containerNode)}>${this._renderMainContainer()}${this._renderPointer()}</div>`;
|
|
339
339
|
}
|
|
340
340
|
_renderPointer() {
|
|
341
|
-
return !this.dockEnabled || !this.active ? g`<div class="pointer" role=presentation><div class=${y(
|
|
341
|
+
return !this.dockEnabled || !this.active ? g`<div class="pointer" role=presentation><div class=${y(x("pointer-direction", "shadow"))} ${f(this._pointerNode)}></div></div>` : null;
|
|
342
342
|
}
|
|
343
343
|
_renderMainContainer() {
|
|
344
344
|
const t = {
|
|
345
345
|
shadow: this.dockEnabled
|
|
346
346
|
};
|
|
347
|
-
return g`<div class=${y(
|
|
347
|
+
return g`<div class=${y(x("main-container", t))} ${f(this._mainContainerNode)}>${P(this.viewModel, g`<arcgis-features .collapsed=${this.collapsed} .autoDestroyDisabled=${this.autoDestroyDisabled} .featureNavigationTop=${this._featureNavigationTop} .headingLevel=${this.headingLevel} .hidden=${!this.active} .hideActionBar=${this.hideActionBar} .hideCloseButton=${this.hideCloseButton} .hideFeatureListLayerTitle=${this.hideFeatureListLayerTitle} .hideFeatureMenuHeading=${this.hideFeatureMenuHeading} .hideFeatureNavigation=${this.hideFeatureNavigation} .hideHeading=${this.hideHeading} .hideSpinner=${this.hideSpinner} @arcgisPropertyChange=${this._handleArcgisPropertyChange} @arcgisTriggerAction=${this._handleArcgisTriggerAction} @arcgisClose=${this._handleClose} .referenceElement=${this.referenceElement} .responsiveActionsEnabled=${!0} .showCollapseButton=${!this.hideCollapseButton} .viewModel=${this.viewModel} ${f(this._featuresComponent)}></arcgis-features>`)}</div>`;
|
|
348
348
|
}
|
|
349
349
|
}
|
|
350
350
|
A("arcgis-popup", W);
|