@geoscene/map-components 4.34.9 → 5.0.20

package/dist/components/geoscene-swipe/customElement.js

@@ -1,41 +1,47 @@
-import { c as $ } from "../../chunks/runtime.js";
-import { css as P, html as g } from "lit";
-import { classes as u } from "@arcgis/toolkit/dom";
+/* COPYRIGHT GeoScene - https://js.geoscene.cn/5.0/LICENSE.txt */
+import { c as x } from "../../chunks/runtime.js";
+import { css as _, html as d } from "lit";
+import { classes as g } from "@geoscene/toolkit/dom";
 import C from "@geoscene/core/widgets/Swipe/SwipeViewModel.js";
-import { LitElement as D, createEvent as f, safeClassMap as h, safeStyleMap as m, nothing as M } from "@geoscene/lumina";
-import { usePropertyChange as K } from "@geoscene/lumina/controllers";
-import { createRef as z, ref as L } from "lit/directives/ref.js";
-import { u as A } from "../../chunks/useT9n.js";
-import { m as S } from "../../chunks/useViewModel.js";
-import { g as b } from "../../chunks/globalCss.js";
-import { l as y } from "../../chunks/legacyIcon.js";
-/*! All material copyright GeoScene, All Rights Reserved, unless otherwise specified.
-See https://js.geoscene.cn/4.34/geoscene/copyright.txt for details.
-v4.34.9 */
-const k = P`:host{position:absolute;margin:0;background:transparent!important;padding:0;width:100%;height:100%;overflow:hidden;user-select:none;--geoscene-internal-swipe-handle-color-background: var(--calcite-color-background);--geoscene-internal-swipe-divider-color-background: var(--calcite-color-background)}.geoscene-swipe{width:100%;height:100%;overflow:hidden;user-select:none}.geoscene-swipe,.geoscene-ui .geoscene-swipe{pointer-events:none!important}.geoscene-swipe__container{position:absolute;z-index:1;margin:0;outline:0;border:0;padding:0;overflow:hidden;pointer-events:auto;touch-action:none;outline-color:transparent}.geoscene-swipe--horizontal .geoscene-swipe__container{margin-left:calc(var(--calcite-spacing-xxxl) / 2 * -1);cursor:col-resize;height:100%}.geoscene-swipe--vertical .geoscene-swipe__container{margin-top:calc(var(--calcite-spacing-xxxl) / 2 * -1);cursor:row-resize;width:100%}.geoscene-swipe--disabled .geoscene-swipe__container{cursor:default;pointer-events:none}.geoscene-swipe__divider{position:absolute;background-color:var(--geoscene-internal-swipe-divider-color-background)}.geoscene-swipe--horizontal .geoscene-swipe__divider{top:0;left:calc(var(--calcite-spacing-xxxl) / 2);margin-left:calc(var(--calcite-border-width-lg) * .5 * -1);border-right:var(--calcite-border-width-sm) solid var(--calcite-color-border-1);border-left:var(--calcite-border-width-sm) solid var(--calcite-color-border-1);width:var(--calcite-border-width-lg);height:100%}.geoscene-swipe--vertical .geoscene-swipe__divider{top:calc(var(--calcite-spacing-xxxl) / 2);left:0;margin-top:calc(var(--calcite-border-width-lg) * .5 * -1);border-top:var(--calcite-border-width-sm) solid var(--calcite-color-border-1);border-bottom:var(--calcite-border-width-sm) solid var(--calcite-color-border-1);width:100%;height:var(--calcite-border-width-lg)}.geoscene-swipe__handle{display:flex;position:relative;align-items:center;justify-content:center;border:var(--calcite-border-width-sm) solid var(--calcite-color-border-1);border-radius:var(--calcite-corner-radius-round);background-color:var(--geoscene-internal-swipe-handle-color-background);width:var(--calcite-spacing-xxxl);height:var(--calcite-spacing-xxxl);color:var(--calcite-color-text-3)}.geoscene-swipe__handle--hidden{visibility:hidden}.geoscene-swipe--vertical .geoscene-swipe__handle{rotate:90deg}.geoscene-swipe__handle-icon{position:relative;z-index:2}.geoscene-swipe__handle-icon:before{content:"|||";color:inherit}.geoscene-swipe--horizontal .geoscene-swipe__handle{top:calc(50% - calc(var(--calcite-spacing-xxxl) / 2))}.geoscene-swipe--vertical .geoscene-swipe__handle{left:calc(50% - calc(var(--calcite-spacing-xxxl) / 2))}.geoscene-swipe__container:focus .geoscene-swipe__handle,.geoscene-swipe__container:focus .geoscene-swipe__divider{outline:inset 2px var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)))}.geoscene-swipe__container:focus .geoscene-swipe__handle{outline-offset:calc(-2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}`, l = "geoscene-swipe", n = {
-  base: l,
-  baseDisabled: `${l}--disabled`,
-  vertical: `${l}--vertical`,
-  horizontal: `${l}--horizontal`,
-  container: `${l}__container`,
-  divider: `${l}__divider`,
-  handle: `${l}__handle`,
-  handleHidden: `${l}__handle--hidden`,
-  handleIcon: `${l}__handle-icon`
-}, H = S(C);
-class V extends D {
+import { LitElement as D, createEvent as v, safeClassMap as u, safeStyleMap as w, nothing as L } from "@geoscene/lumina";
+import { usePropertyChange as P } from "@geoscene/lumina/controllers";
+import { createRef as $, ref as M } from "lit/directives/ref.js";
+import { u as K } from "../../chunks/useT9n.js";
+import { m as A } from "../../chunks/useViewModel.js";
+import { g as m } from "../../chunks/globalCss.js";
+import { l as b } from "../../chunks/legacyIcon.js";
+const S = _`:host{position:absolute;margin:0;background:transparent!important;padding:0;width:100%;height:100%;overflow:hidden;user-select:none;--geoscene-internal-swipe-handle-color-background: var(--calcite-color-background);--geoscene-internal-swipe-divider-color-background: var(--calcite-color-background)}.root{width:100%;height:100%;overflow:hidden;user-select:none}.root,.geoscene-ui .root{pointer-events:none!important}.container{position:absolute;z-index:1;margin:0;outline:0;border:0;padding:0;overflow:hidden;pointer-events:auto;touch-action:none;outline-color:transparent}.horizontal .container{margin-left:calc(var(--calcite-spacing-xxxl) / 2 * -1);cursor:col-resize;height:100%}.vertical .container{margin-top:calc(var(--calcite-spacing-xxxl) / 2 * -1);cursor:row-resize;width:100%}.disabled .container{cursor:default;pointer-events:none}.divider{position:absolute;background-color:var(--geoscene-internal-swipe-divider-color-background)}.horizontal .divider{top:0;left:calc(var(--calcite-spacing-xxxl) / 2);margin-left:calc(var(--calcite-border-width-lg) * .5 * -1);border-right:var(--calcite-border-width-sm) solid var(--calcite-color-border-1);border-left:var(--calcite-border-width-sm) solid var(--calcite-color-border-1);width:var(--calcite-border-width-lg);height:100%}.vertical .divider{top:calc(var(--calcite-spacing-xxxl) / 2);left:0;margin-top:calc(var(--calcite-border-width-lg) * .5 * -1);border-top:var(--calcite-border-width-sm) solid var(--calcite-color-border-1);border-bottom:var(--calcite-border-width-sm) solid var(--calcite-color-border-1);width:100%;height:var(--calcite-border-width-lg)}.handle{display:flex;position:relative;align-items:center;justify-content:center;border:var(--calcite-border-width-sm) solid var(--calcite-color-border-1);border-radius:var(--calcite-corner-radius-round);background-color:var(--geoscene-internal-swipe-handle-color-background);width:var(--calcite-spacing-xxxl);height:var(--calcite-spacing-xxxl);color:var(--calcite-color-text-3)}.handle-hidden{visibility:hidden}.vertical .handle{rotate:90deg}.handle-icon{position:relative;z-index:2}.handle-icon:before{content:"|||";color:inherit}.horizontal .handle{top:calc(50% - calc(var(--calcite-spacing-xxxl) / 2))}.vertical .handle{left:calc(50% - calc(var(--calcite-spacing-xxxl) / 2))}.container:focus .handle,.container:focus .divider{outline:inset 2px var(--calcite-color-focus, var(--calcite-color-focus, var(--calcite-color-brand)))}.container:focus .handle{outline-offset:calc(-2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}`, k = A(C);
+class z extends D {
   constructor() {
-    super(...arguments), this._container = null, this._containerRef = z(), this._swiping = !1, this._swipePositionChanged = !1, this.messages = A({}), this._pointerOffset = 0, this.viewModel = H(this), this._onContainerPointerDown = (i) => {
+    super(...arguments), this._container = null, this._containerRef = $(), this._swiping = !1, this._positionChanged = !1, this.messages = K({}), this._pointerOffset = 0, this.viewModel = k(this), this._onContainerPointerDown = (i) => {
       i.preventDefault();
       const { _container: e } = this;
       e && document.activeElement !== this.el && e.focus(), this._swiping = !0, this._calculatePointerOffset(i);
-    }, this.view = this.viewModel.view, this.autoDestroyDisabled = !1, this.direction = this.viewModel.direction, this.disabled = !1, this.hideDivider = !1, this.hideHandle = !1, this.icon = "compare", this.label = this.messages.componentLabel, this.leadingLayers = this.viewModel.leadingLayers, this.swipePosition = this.viewModel.position, this.state = this.viewModel.state, this.trailingLayers = this.viewModel.trailingLayers, this.geoscenePropertyChange = K()("state"), this.geosceneReady = f(), this.geosceneSwipeChange = f(), this.geosceneSwipeInput = f();
+    }, this.view = this.viewModel.view, this.autoDestroyDisabled = !1, this.direction = this.viewModel.direction, this.disabled = !1, this.endLayers = this.viewModel.trailingLayers, this.hideDivider = !1, this.hideHandle = !1, this.icon = "compare", this.label = this.messages.componentLabel, this.position = this.viewModel.position, this.startLayers = this.viewModel.leadingLayers, this.state = this.viewModel.state, this.geoscenePropertyChange = P()("state"), this.geosceneReady = v(), this.geosceneSwipeChange = v(), this.geosceneSwipeInput = v();
   }
   static {
-    this.properties = { view: 0, autoDestroyDisabled: 5, direction: 3, disabled: 7, hideDivider: 7, hideHandle: 7, icon: 1, label: 1, leadingLayers: 0, messageOverrides: 0, position: 3, swipePosition: 9, referenceElement: 1, state: 3, trailingLayers: 0 };
+    this.properties = { view: 0, autoDestroyDisabled: 5, direction: 3, disabled: 7, endLayers: 0, hideDivider: 7, hideHandle: 7, icon: 1, label: 1, leadingLayers: 0, messageOverrides: 0, position: 9, startLayers: 0, swipePosition: 9, referenceElement: 1, state: 32, trailingLayers: 0 };
   }
   static {
-    this.styles = k;
+    this.styles = S;
+  }
+  get leadingLayers() {
+    return this.startLayers;
+  }
+  set leadingLayers(i) {
+    this.startLayers = i;
+  }
+  get swipePosition() {
+    return this.position;
+  }
+  set swipePosition(i) {
+    this.position = i;
+  }
+  get trailingLayers() {
+    return this.endLayers;
+  }
+  set trailingLayers(i) {
+    this.endLayers = i;
   }
   async destroy() {
     await this.manager.destroy();
@@ -44,66 +50,66 @@ class V extends D {
     this.listenOn(document, "pointermove", this._onContainerPointerMove), this.listenOn(document, "pointerup", this._onContainerPointerUp);
   }
   _calculatePointerOffset(i) {
-    const { direction: e } = this, t = this._containerRef.value, r = (e === "vertical" ? t.clientHeight : t.clientWidth) / 2, s = t.getBoundingClientRect(), o = i.clientX - s.left, d = i.clientY - s.top;
-    this._pointerOffset = e === "vertical" ? d - r : o - r;
+    const { direction: e } = this, t = this._containerRef.value, r = (e === "vertical" ? t.clientHeight : t.clientWidth) / 2, o = t.getBoundingClientRect(), n = i.clientX - o.left, c = i.clientY - o.top;
+    this._pointerOffset = e === "vertical" ? c - r : n - r;
   }
   _onContainerPointerUp(i) {
-    this._swiping && (i.preventDefault(), this._swipePositionChanged && (this.geosceneSwipeChange.emit(), this._swipePositionChanged = !1), this._swiping = !1);
+    this._swiping && (i.preventDefault(), this._positionChanged && (this.geosceneSwipeChange.emit(), this._positionChanged = !1), this._swiping = !1);
   }
   _onContainerPointerMove(i) {
     if (!this._swiping)
       return;
     i.preventDefault();
-    const { _pointerOffset: e, el: t, direction: r } = this, { clientX: s, clientY: o } = i, { top: d, left: a, width: c, height: p } = t.getBoundingClientRect(), _ = r === "vertical" ? p : c, w = (r === "vertical" ? o - d - e : s - a - e) / _ * 100;
-    this.swipePosition !== w && (this.swipePosition = w, this._swipePositionChanged = !0, this.geosceneSwipeInput.emit());
+    const { _pointerOffset: e, el: t, direction: r } = this, { clientX: o, clientY: n } = i, { top: c, left: s, width: a, height: l } = t.getBoundingClientRect(), f = r === "vertical" ? l : a, h = (r === "vertical" ? n - c - e : o - s - e) / f * 100;
+    this.position !== h && (this.position = h, this._positionChanged = !0, this.geosceneSwipeInput.emit());
   }
   _getKeyPosition(i) {
-    const { key: e } = i, { swipePosition: t } = this, { max: r, min: s, step: o, stepMultiplier: d, direction: a } = this.viewModel, c = o * d;
-    if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Home", "End", "PageUp", "PageDown"].includes(e) && (i.preventDefault(), i.stopPropagation()), a === "vertical" ? e === "ArrowDown" || e === "ArrowRight" : e === "ArrowUp" || e === "ArrowRight") {
-      const v = i.shiftKey ? c : o;
-      return t + v;
+    const { key: e } = i, { position: t } = this, { max: r, min: o, step: n, stepMultiplier: c, direction: s } = this.viewModel, a = n * c;
+    if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Home", "End", "PageUp", "PageDown"].includes(e) && (i.preventDefault(), i.stopPropagation()), s === "vertical" ? e === "ArrowDown" || e === "ArrowRight" : e === "ArrowUp" || e === "ArrowRight") {
+      const p = i.shiftKey ? a : n;
+      return t + p;
     }
-    if (a === "vertical" ? e === "ArrowUp" || e === "ArrowLeft" : e === "ArrowDown" || e === "ArrowLeft") {
-      const v = i.shiftKey ? c : o;
-      return t - v;
+    if (s === "vertical" ? e === "ArrowUp" || e === "ArrowLeft" : e === "ArrowDown" || e === "ArrowLeft") {
+      const p = i.shiftKey ? a : n;
+      return t - p;
     }
-    return e === "Home" ? s : e === "End" ? r : (a === "vertical" ? e === "PageDown" : e === "PageUp") ? t + c : (a === "vertical" ? e === "PageUp" : e === "PageDown") ? t - c : null;
+    return e === "Home" ? o : e === "End" ? r : (s === "vertical" ? e === "PageDown" : e === "PageUp") ? t + a : (s === "vertical" ? e === "PageUp" : e === "PageDown") ? t - a : null;
   }
   _onContainerKeyDown(i) {
     const e = this._getKeyPosition(i);
-    typeof e == "number" && this.swipePosition !== e && (this.swipePosition = e, this.geosceneSwipeInput.emit(), this.geosceneSwipeChange.emit());
+    typeof e == "number" && this.position !== e && (this.position = e, this.geosceneSwipeInput.emit(), this.geosceneSwipeChange.emit());
   }
   render() {
     const { state: i, direction: e } = this.viewModel, t = i === "disabled" || this.disabled, r = {
-      [b.disabled]: t,
-      [n.baseDisabled]: t,
-      [n.vertical]: e === "vertical",
-      [n.horizontal]: e === "horizontal"
+      [m.disabled]: t,
+      disabled: t,
+      vertical: e === "vertical",
+      horizontal: e === "horizontal"
     };
-    return g`<div class=${h(u(n.base, b.widget, r))}>${i === "disabled" ? null : this._renderContainer()}</div>`;
+    return d`<div class=${u(g("root", m.widget, r))}>${i === "disabled" ? null : this._renderContainer()}</div>`;
   }
   _renderHandle() {
     const { direction: i } = this.viewModel, { hideHandle: e } = this, t = {
-      [y.dragHorizontal]: i === "vertical",
-      [y.dragVertical]: i === "horizontal"
-    }, r = u(n.handle, !!e && n.handleHidden);
-    return g`<div class=${h(r)} role=presentation><span aria-hidden=true class=${h(u(n.handleIcon, t))}></span></div>`;
+      [b.dragHorizontal]: i === "vertical",
+      [b.dragVertical]: i === "horizontal"
+    }, r = g("handle", !!e && "handle-hidden");
+    return d`<div class=${u(r)} role=presentation><span aria-hidden=true class=${u(g("handle-icon", t))}></span></div>`;
   }
   _renderDivider() {
-    return this.hideDivider ? null : g`<div class=${h(n.divider)} role=presentation></div>`;
+    return this.hideDivider ? null : d`<div class="divider" role=presentation></div>`;
   }
   _renderContent() {
     return [this._renderDivider(), this._renderHandle()];
   }
   _renderContainer() {
-    const { disabled: i, viewModel: e } = this, { max: t, min: r, direction: s, position: o } = e, d = this.label ?? this.messages.dragLabel ?? "", a = `${o}%`, c = {
-      top: s === "vertical" ? a : void 0,
-      left: s === "vertical" ? void 0 : a
-    }, p = this._renderContent();
-    return i ? g`<div class=${h(n.container)} role=presentation style=${m(c)}>${p}</div>` : g`<div @pointerdown=${this._onContainerPointerDown} .ariaLabel=${d} .ariaOrientation=${s} .ariaValueMax=${`${t}`} .ariaValueMin=${`${r}`} .ariaValueNow=${`${o}`} .ariaValueText=${a} class=${h(n.container)} @keydown=${this._onContainerKeyDown} role=slider style=${m(c)} tabindex=0 title=${d ?? M} touch-action=none ${L(this._containerRef)}>${p}</div>`;
+    const { disabled: i, viewModel: e } = this, { max: t, min: r, direction: o, position: n } = e, c = this.label ?? this.messages.dragLabel ?? "", s = `${n}%`, a = {
+      top: o === "vertical" ? s : void 0,
+      left: o === "vertical" ? void 0 : s
+    }, l = this._renderContent();
+    return i ? d`<div class="container" role=presentation style=${w(a)}>${l}</div>` : d`<div @pointerdown=${this._onContainerPointerDown} .ariaLabel=${c} .ariaOrientation=${o} .ariaValueMax=${`${t}`} .ariaValueMin=${`${r}`} .ariaValueNow=${`${n}`} .ariaValueText=${s} class="container" @keydown=${this._onContainerKeyDown} role=slider style=${w(a)} tabindex=0 title=${c ?? L} touch-action=none ${M(this._containerRef)}>${l}</div>`;
   }
 }
-$("geoscene-swipe", V);
+x("geoscene-swipe", z);
 export {
-  V as GeosceneSwipe
+  z as GeosceneSwipe
 };