@arcgis/charts-components 4.33.0-next.99 → 4.33.0

package/dist/components/arcgis-charts-config-guide/customElement.js

@@ -1,34 +1,44 @@
 import { c as X } from "../../chunks/runtime.js";
 import { keyed as B } from "lit-html/directives/keyed.js";
-import { findExpectedGuideSymbol as p, isSLS as m, convertTimeZone as R, getDateStringInCalciteDatePickerFormat as E, getTimeStringInCalciteTimePickerFormat as L, createPopover as O, PopoverType as N, getDefaultLineSymbol as Z, isSFS as V } from "@arcgis/charts-shared-utils";
-import { RESTSymbolType as g, WebChartTypes as q, RESTSimpleLineSymbolStyle as z } from "@arcgis/charts-spec";
-import { G } from "../../chunks/scatter-plot-model.js";
-import { cloneDeep as F } from "lodash-es";
-import { b as H, i as W, a as Y } from "../../chunks/type-guards.js";
-import { m as S, c as U, d as j, h as J, k as M, b as $ } from "../../chunks/chart-ui-utils.js";
+import { RESTSymbolType as m, WebChartTypes as R, RESTSimpleLineSymbolStyle as O } from "@arcgis/charts-spec";
+import { cloneDeep as E } from "lodash-es";
+import "d3-array";
+import { d as p, bT as N, bU as L, bV as F, a3 as V } from "../../chunks/interfaces.js";
+import "@arcgis/core/geometry/support/jsonUtils.js";
+import "@arcgis/core/rest/support/AttributeBinsQuery.js";
+import "@arcgis/core/rest/support/Query.js";
+import "@arcgis/core/rest/support/StatisticDefinition.js";
+import "@arcgis/core/time/TimeExtent.js";
+import "@arcgis/core/core/promiseUtils.js";
+import "@arcgis/core/request.js";
+import { c as g, b as Z } from "../../chunks/index4.js";
+import { c as q, P as z } from "../../chunks/popover-ui-utils.js";
+import { m as G, d as H, e as U, g as W, k as M, c as S } from "../../chunks/chart-ui-utils2.js";
 import { d as A } from "../../chunks/default.js";
-import { g as K } from "../../chunks/resource.js";
-import { u as Q } from "../../chunks/useT9n.js";
+import { g as Y } from "../../chunks/resource.js";
+import { u as j } from "../../chunks/useT9n.js";
 import { html as d } from "lit";
 import { createRef as h, ref as u } from "lit-html/directives/ref.js";
-import { LitElement as ee, createEvent as T, safeClassMap as o, safeStyleMap as te } from "@arcgis/lumina";
-import { css as ie } from "@lit/reactive-element/css-tag.js";
+import { LitElement as J, createEvent as $, safeClassMap as o, safeStyleMap as K } from "@arcgis/lumina";
+import { css as Q } from "@lit/reactive-element/css-tag.js";
+import { G as T } from "../../chunks/common.js";
+import { j as ee, n as te, o as ie } from "../../chunks/type-guards.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/4.33/esri/copyright.txt for details.
-v4.33.0-next.99 */
+v4.33.0 */
 const s = {
   row: "row",
   column: "column",
   colorPicker: "color-picker"
-}, oe = ie`.hide{display:none}.am5-modal{width:100%;height:100%;position:absolute;z-index:100000;top:0;left:0}.am5-modal-curtain{top:0;left:0;width:100%;height:100%;position:absolute;background:#fff!important;z-index:100}.am5-modal-wrapper{top:0;left:0;width:100%;height:100%;position:absolute;display:flex;align-items:center;justify-content:center;white-space:nowrap;background:#ffffff80;z-index:101}.am5-modal-content{display:inline-block;padding:1.2em;vertical-align:middle;text-align:start;white-space:normal;background:#fff;border-radius:4px;box-shadow:#00000073 0 0 36px;color:#000}.am5-layer-1000{z-index:1000!important}.arcgis-charts-modal{box-shadow:none!important}.arcgis-charts-modal-header{background-color:#0000000d;font-weight:700;padding:4px;align-content:center}.show{display:block}.notifyPanel{flex:0 1 auto}.disable-interactions{pointer-events:none}.dim-text{color:var(--arcgis-charts-dim-text)}:host{display:flex;flex-direction:column}.row{display:flex;flex-direction:row;column-gap:var(--arcgis-charts-inter-section-margin)}.column{display:flex;flex-direction:column;flex-wrap:wrap;flex-grow:1}.column>calcite-input{margin-bottom:.5rem;flex-grow:2}.column>calcite-input[type=number]{margin-bottom:.5rem}input{padding:.5rem}.label{display:flex;flex-direction:row;justify-content:space-between;margin-bottom:var(--arcgis-charts-intra-section-margin);flex-grow:1}.color-picker{border:1px solid var(--calcite-color-border-2);box-shadow:none;margin-bottom:var(--arcgis-charts-inter-section-margin)}.delete-guide{display:flex;flex-direction:row-reverse;height:2rem;margin:0 1rem;font-weight:550}:host([dir=rtl]) .delete-guide{flex-direction:row}`;
-class se extends ee {
+}, oe = Q`.hide{display:none}.am5-modal{width:100%;height:100%;position:absolute;z-index:100000;top:0;left:0}.am5-modal-curtain{top:0;left:0;width:100%;height:100%;position:absolute;background:#fff!important;z-index:100}.am5-modal-wrapper{top:0;left:0;width:100%;height:100%;position:absolute;display:flex;align-items:center;justify-content:center;white-space:nowrap;background:#ffffff80;z-index:101}.am5-modal-content{display:inline-block;padding:1.2em;vertical-align:middle;text-align:start;white-space:normal;background:#fff;border-radius:4px;box-shadow:#00000073 0 0 36px;color:#000}.am5-layer-1000{z-index:1000!important}.arcgis-charts-modal{box-shadow:none!important}.arcgis-charts-modal-header{background-color:#0000000d;font-weight:700;padding:4px;align-content:center}.show{display:block}.notifyPanel{flex:0 1 auto}.disable-interactions{pointer-events:none}.dim-text{color:var(--arcgis-charts-dim-text)}:host{display:flex;flex-direction:column}.row{display:flex;flex-direction:row;column-gap:var(--arcgis-charts-inter-section-margin)}.column{display:flex;flex-direction:column;flex-wrap:wrap;flex-grow:1}.column>calcite-input{margin-bottom:.5rem;flex-grow:2}.column>calcite-input[type=number]{margin-bottom:.5rem}input{padding:.5rem}.label{display:flex;flex-direction:row;justify-content:space-between;margin-bottom:var(--arcgis-charts-intra-section-margin);flex-grow:1}.color-picker{border:1px solid var(--calcite-color-border-2);box-shadow:none;margin-bottom:var(--arcgis-charts-inter-section-margin)}.delete-guide{display:flex;flex-direction:row-reverse;height:2rem;margin:0 1rem;font-weight:550}:host([dir=rtl]) .delete-guide{flex-direction:row}`;
+class se extends J {
   constructor() {
-    super(...arguments), this._messages = Q(), this.startCalciteInput = h(), this.endCalciteInput = h(), this.startDateCalciteInput = h(), this.endDateCalciteInput = h(), this.startTimeCalciteInput = h(), this.endTimeCalciteInput = h(), this.colorElement = h(), this.colorChange = (e) => {
+    super(...arguments), this._messages = j(), this.startCalciteInput = h(), this.endCalciteInput = h(), this.startDateCalciteInput = h(), this.endDateCalciteInput = h(), this.startTimeCalciteInput = h(), this.endTimeCalciteInput = h(), this.colorElement = h(), this.colorChange = (e) => {
       const t = e.detail, i = this.model.getGuideStart(this.index, this.orientation), n = this.model.getGuideEnd(this.index, this.orientation);
-      if (p(i, n) === g.SLS) {
-        const l = F(A.style), a = this.model.getGuideStyle(this.index, this.orientation), r = {
+      if (p(i, n) === m.SLS) {
+        const l = E(A.style), a = this.model.getGuideStyle(this.index, this.orientation), r = {
           ...l,
-          ...m(a) ? a : {},
+          ...g(a) ? a : {},
           color: t
         };
         this.lineStyleChange({ detail: r });
@@ -36,17 +46,17 @@ class se extends ee {
         this.setColor(t);
     }, this.symbolChange = (e) => {
       const t = e?.detail, i = this.model.getGuideStart(this.index, this.orientation), n = this.model.getGuideEnd(this.index, this.orientation);
-      if (p(i, n) === g.SLS) {
-        const l = F(A.style), a = this.model.getGuideStyle(this.index, this.orientation), r = {
+      if (p(i, n) === m.SLS) {
+        const l = E(A.style), a = this.model.getGuideStyle(this.index, this.orientation), r = {
           ...l,
-          ...m(a) ? a : {},
-          ...m(t) ? t : {}
+          ...g(a) ? a : {},
+          ...g(t) ? t : {}
         };
         this.lineStyleChange({ detail: r });
       } else t?.color !== void 0 && this.setColor(t.color);
     }, this.onModelConfigChange = () => {
       this.requestUpdate();
-    }, this.latestGuidePosition = 0, this.arcgisChartsConfigGuideChange = T(), this.arcgisChartsConfigGuidePopoverChange = T(), this.arcgisChartsConfigPopoverOpenChange = T();
+    }, this.latestGuidePosition = 0, this.arcgisChartsConfigGuideChange = $(), this.arcgisChartsConfigGuidePopoverChange = $(), this.arcgisChartsConfigPopoverOpenChange = $();
   }
   static {
     this.properties = { guidePopover: 16, messageOverrides: 0, model: 0, timeZone: 3, calculatedMinMaxBounds: 2, index: 11, orientation: 3, latestGuidePosition: 9 };
@@ -55,66 +65,53 @@ class se extends ee {
     this.styles = oe;
   }
   get isXAxisDateField() {
-    return this.orientation === G.X && H(this.model) && this.model.getXAxisValueFormat()?.type === q.DateAxisFormat;
+    return this.orientation === T.X && ee(this.model) && this.model.getXAxisValueFormat()?.type === R.DateAxisFormat;
   }
-  //#endregion
-  //#region Lifecycle
-  /** @category Lifecycle */
   load() {
     this.modelChange(this.model);
   }
-  /** @category Lifecycle */
   willUpdate(e) {
     e.has("model") && this.modelChange(this.model, e.get("model"));
   }
-  /** @category Lifecycle */
   loaded() {
     this.isXAxisDateField && this.setGuideDateTimeRange();
   }
-  /** @category Lifecycle */
   disconnectedCallback() {
     super.disconnectedCallback(), this.model.removeEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange);
   }
-  //#endregion
-  //#region Private Methods
-  /** @category Watch handler */
   modelChange(e, t) {
     t?.removeEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange), e?.addEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange);
   }
-  /** @category Event handler */
   onColorElementSelect() {
     this.guidePopover?.open === !0 ? this.removeGuidePopover() : this.setupGuidePopover();
   }
-  /** @category Event handler */
   setGuideStart(e) {
     const { value: t } = e.target;
-    this.startCalciteInput.value !== void 0 && (t === "" ? S({
+    this.startCalciteInput.value !== void 0 && (t === "" ? G({
       inputElement: this.startCalciteInput.value,
-      status: $.INVALID
+      status: S.INVALID
     }) : (this.model.setGuideStart(t, this.index, this.orientation), this.symbolChange(), this.arcgisChartsConfigGuideChange.emit({
       index: this.index,
       orientation: this.orientation,
       isDelete: !1
-    }), S({
+    }), G({
       inputElement: this.startCalciteInput.value,
-      status: $.IDLE
+      status: S.IDLE
     }))), this.guidePopover?.open === !0 && this.removeGuidePopover();
   }
-  /** @category Event handler */
   setGuideEnd(e) {
     const { value: t } = e.target;
     this.endCalciteInput.value !== void 0 && (this.model.setGuideEnd(t === "" ? null : t, this.index, this.orientation), this.symbolChange(), this.arcgisChartsConfigGuideChange.emit({
       index: this.index,
       orientation: this.orientation,
       isDelete: !1
-    }), S({
+    }), G({
       inputElement: this.endCalciteInput.value,
-      status: $.IDLE
+      status: S.IDLE
     })), this.guidePopover?.open === !0 && this.removeGuidePopover();
   }
-  /** @category Event handler */
   setGuideDateTimeRange() {
-    const e = this.calculatedMinMaxBounds?.find((c) => c.isXAxis)?.minimum, t = this.calculatedMinMaxBounds?.find((c) => c.isXAxis)?.maximum, i = typeof e == "number" ? new Date(e) : /* @__PURE__ */ new Date(), n = typeof t == "number" ? new Date(t) : /* @__PURE__ */ new Date(), l = new window.Intl.DateTimeFormat().resolvedOptions().timeZone, a = R(this.timeZone) ?? l, r = E(i, a), v = L(i, a), f = E(n, a), _ = L(n, a), P = this.startDateCalciteInput.value?.value ?? "", C = P === "" ? r : P, D = this.startTimeCalciteInput.value?.value ?? "", w = D === "" ? v : D, x = this.endDateCalciteInput.value?.value ?? "", y = x === "" ? f : x, I = this.endTimeCalciteInput.value?.value ?? "", k = I === "" ? _ : I;
+    const e = this.calculatedMinMaxBounds?.find((c) => c.isXAxis)?.minimum, t = this.calculatedMinMaxBounds?.find((c) => c.isXAxis)?.maximum, i = typeof e == "number" ? new Date(e) : /* @__PURE__ */ new Date(), n = typeof t == "number" ? new Date(t) : /* @__PURE__ */ new Date(), l = new window.Intl.DateTimeFormat().resolvedOptions().timeZone, a = N(this.timeZone) ?? l, r = L(i, a), v = F(i, a), f = L(n, a), _ = F(n, a), P = this.startDateCalciteInput.value?.value ?? "", C = P === "" ? r : P, D = this.startTimeCalciteInput.value?.value ?? "", w = D === "" ? v : D, x = this.endDateCalciteInput.value?.value ?? "", y = x === "" ? f : x, I = this.endTimeCalciteInput.value?.value ?? "", k = I === "" ? _ : I;
     let b = !1;
     if (!Array.isArray(C) && C !== void 0 && w !== void 0) {
       const c = `${C}T${w}`;
@@ -130,7 +127,6 @@ class se extends ee {
       isDelete: !1
     }), this.guidePopover?.open === !0 && this.removeGuidePopover());
   }
-  /** @category Event handler */
   setGuideName(e) {
     const t = e.target.value;
     this.model.setGuideName(t, this.index, this.orientation), this.arcgisChartsConfigGuideChange.emit({
@@ -139,7 +135,6 @@ class se extends ee {
       isDelete: !1
     });
   }
-  /** @category Event handler */
   setGuideLabel(e) {
     const t = e.target.value;
     this.model.setGuideLabelText(t, this.index, this.orientation), this.arcgisChartsConfigGuideChange.emit({
@@ -148,7 +143,6 @@ class se extends ee {
       isDelete: !1
     });
   }
-  /** @category Event handler */
   setGuideRendered(e) {
     const t = e.target?.selectedItem?.value;
     if (t !== void 0) {
@@ -160,7 +154,6 @@ class se extends ee {
       });
     }
   }
-  /** @category Event handler */
   lineStyleChange(e) {
     const t = e.detail;
     this.model.setGuideStyle(t, this.index, this.orientation), this.arcgisChartsConfigGuideChange.emit({
@@ -169,7 +162,6 @@ class se extends ee {
       isDelete: !1
     });
   }
-  /** @category Private */
   guidePopoverChange(e) {
     this.arcgisChartsConfigGuidePopoverChange.emit({
       open: e,
@@ -178,7 +170,6 @@ class se extends ee {
       open: e
     });
   }
-  /** @category Private */
   setupGuidePopover() {
     if (this.guidePopover === void 0) {
       const n = {
@@ -191,27 +182,21 @@ class se extends ee {
           this.guidePopoverChange(!1), this.removeGuidePopover();
         }
       };
-      this.guidePopover = O(N.GuidePopover, n);
+      this.guidePopover = q(z.GuidePopover, n);
     }
     const e = this.model.getGuideStyle(this.index, this.orientation), t = this.model.getGuideStart(this.index, this.orientation), i = this.model.getGuideEnd(this.index, this.orientation);
-    p(t, i) === g.SLS ? this.guidePopover.selectedElement = m(e) ? e : void 0 : this.guidePopover.selectedElement = e?.color, this.guidePopover.referenceElement = this.colorElement.value, Array.isArray(e?.color) ? (this.guidePopover.open = !0, this.addGuidePopover()) : (this.guidePopover.open = !1, this.removeGuidePopover());
+    p(t, i) === m.SLS ? this.guidePopover.selectedElement = g(e) ? e : void 0 : this.guidePopover.selectedElement = e?.color, this.guidePopover.referenceElement = this.colorElement.value, Array.isArray(e?.color) ? (this.guidePopover.open = !0, this.addGuidePopover()) : (this.guidePopover.open = !1, this.removeGuidePopover());
   }
-  /** @category Private */
   removeGuidePopover() {
     this.guidePopover?.remove(), this.guidePopoverChange(!1), this.guidePopover = void 0;
   }
-  /** @category Private */
   addGuidePopover() {
     this.guidePopover !== void 0 && !document.body.contains(this.guidePopover) && document.body.appendChild(this.guidePopover), this.guidePopoverChange(!0);
   }
-  /**
-   * @param fillColor
-   * @category Private
-   */
   setColor(e) {
-    const t = Z({ opacity: 0 }), i = this.model.getGuideStyle(this.index, this.orientation), n = {
-      ...V(i) ? i : {},
-      type: g.SFS,
+    const t = V({ opacity: 0 }), i = this.model.getGuideStyle(this.index, this.orientation), n = {
+      ...Z(i) ? i : {},
+      type: m.SFS,
       color: e,
       outline: t
     };
@@ -221,30 +206,15 @@ class se extends ee {
       isDelete: !1
     });
   }
-  /**
-   * Gets the date string from the bound value in ISO format.
-   *
-   * @category Private
-   */
   getDateStringFromBound(e) {
     return typeof e == "string" ? e.split("T")[0] : "";
   }
-  /**
-   * Gets the time string from the bound value in ISO format.
-   *
-   * @category Private
-   */
   getTimeStringFromBound(e) {
     return typeof e == "string" ? e.split("T")[1] : "";
   }
-  /**
-   * Creates a tooltip for the hovered action.
-   *
-   * @category Event handler
-   */
   createTooltip(e) {
     const t = e.target;
-    switch (this.tooltip = U(t), t.icon) {
+    switch (this.tooltip = H(t), t.icon) {
       case "view-visible":
         this.tooltip.innerHTML = this._messages.hideGuide ?? "";
         break;
@@ -258,46 +228,27 @@ class se extends ee {
     }
     document.body.appendChild(this.tooltip);
   }
-  /**
-   * Toggles guide visibility from action click.
-   *
-   * @category Event handler
-   */
   toggleGuide() {
     const e = this.model.getGuideVisibility(this.index, this.orientation);
     this.model.setGuideVisibility(!e, this.index, this.orientation);
   }
-  /**
-   * Destroys tooltip for the action that was being hovered.
-   *
-   * @category Event handler
-   */
   destroyTooltip() {
-    j(this.tooltip);
+    U(this.tooltip);
   }
-  /**
-   * Deletes guide from action click.
-   *
-   * @category Event handler
-   */
   deleteGuide() {
-    this.destroyTooltip(), this.orientation === G.X && W(this.model) ? this.model.deleteXAxisGuide(this.index) : this.orientation === G.Y && Y(this.model) && this.model.deleteYAxisGuide(this.index), this.arcgisChartsConfigGuideChange.emit({
+    this.destroyTooltip(), this.orientation === T.X && te(this.model) ? this.model.deleteXAxisGuide(this.index) : this.orientation === T.Y && ie(this.model) && this.model.deleteYAxisGuide(this.index), this.arcgisChartsConfigGuideChange.emit({
       index: this.index,
       orientation: this.orientation,
       isDelete: !0
     });
   }
-  //#endregion
-  //#region Rendering
-  /** @category Render UX */
   renderColorElement() {
-    const e = this.model.getGuideStyle(this.index, this.orientation), [t, i, n, l] = [...e?.color ?? [1, 1, 1, 255]], a = this.model.getGuideStart(this.index, this.orientation), r = this.model.getGuideEnd(this.index, this.orientation), v = m(e) ? J(e.style) : z.Solid, f = p(a, r) === g.SLS ? `line-${v}` : "square-f";
-    return d`<calcite-list label selection-mode=single selection-appearance=border><calcite-list-item .value=${this._messages.style} class=${o(s.colorPicker)} .label=${this._messages.style} .selected=${this.guidePopover?.open} @click=${this.onColorElementSelect} ${u(this.colorElement)}><calcite-icon slot=content-end .icon=${f} style=${te({ color: `rgba(${t},${i},${n},${l / 255})` })}></calcite-icon></calcite-list-item></calcite-list>`;
+    const e = this.model.getGuideStyle(this.index, this.orientation), [t, i, n, l] = [...e?.color ?? [1, 1, 1, 255]], a = this.model.getGuideStart(this.index, this.orientation), r = this.model.getGuideEnd(this.index, this.orientation), v = g(e) ? W(e.style) : O.Solid, f = p(a, r) === m.SLS ? `line-${v}` : "square-f";
+    return d`<calcite-list label selection-mode=single selection-appearance=border><calcite-list-item .value=${this._messages.style} class=${o(s.colorPicker)} .label=${this._messages.style} .selected=${this.guidePopover?.open} @click=${this.onColorElementSelect} ${u(this.colorElement)}><calcite-icon slot=content-end .icon=${f} style=${K({ color: `rgba(${t},${i},${n},${l / 255})` })}></calcite-icon></calcite-list-item></calcite-list>`;
   }
-  /** @category Lifecycle */
   render() {
     const e = this.model.getGuideStart(this.index, this.orientation), t = this.model.getGuideEnd(this.index, this.orientation), i = this.model.getGuideName(this.index, this.orientation), n = this.model.getGuideLabelText(this.index, this.orientation), l = this.model.getGuideAbove(this.index, this.orientation), a = this.model.getGuideVisibility(this.index, this.orientation), r = this.isXAxisDateField;
-    return d`<calcite-block .heading=${i ?? ""} .open=${this.latestGuidePosition === K(this.index, this.orientation, this.model)} collapsible .messageOverrides=${{
+    return d`<calcite-block .heading=${i ?? ""} .open=${this.latestGuidePosition === Y(this.index, this.orientation, this.model)} collapsible .messageOverrides=${{
       expand: this._messages.expand,
       collapse: this._messages.collapse
     }}><calcite-action slot=control text .icon=${a ? "view-visible" : "view-hide"} @click=${this.toggleGuide} @mouseover=${this.createTooltip} @mouseout=${this.destroyTooltip}></calcite-action><calcite-action slot=control text icon=trash @click=${this.deleteGuide} @mouseover=${this.createTooltip} @mouseout=${this.destroyTooltip}></calcite-action><div class=${o(s.row)}><calcite-label class=${o(s.column)}>${this._messages.start}${r ? d`<calcite-input-date-picker .value=${this.getDateStringFromBound(e)} required scale=s placement=bottom-end @calciteInputDatePickerChange=${this.setGuideDateTimeRange} ${u(this.startDateCalciteInput)}></calcite-input-date-picker>` : d`<calcite-input type=number required @calciteInputInput=${this.setGuideStart} @keydown=${M} number-button-type=none .value=${e?.toString()} ${u(this.startCalciteInput)}></calcite-input>`}</calcite-label><calcite-label class=${o(s.column)}>${this._messages.end}${r ? d`<calcite-input-date-picker .value=${this.getDateStringFromBound(t)} scale=s placement=bottom-end @calciteInputDatePickerChange=${this.setGuideDateTimeRange} ${u(this.endDateCalciteInput)}></calcite-input-date-picker>` : d`<calcite-input type=number @calciteInputInput=${this.setGuideEnd} @keydown=${M} number-button-type=none .value=${t?.toString()} ${u(this.endCalciteInput)}></calcite-input>`}</calcite-label></div>${r ? B("time-picker-row", d`<div class=${o(s.row)}>${e != null ? d`<calcite-label class=${o(s.column)}><calcite-input-time-picker .value=${this.getTimeStringFromBound(e)} scale=s @calciteInputTimePickerChange=${this.setGuideDateTimeRange} ${u(this.startTimeCalciteInput)}></calcite-input-time-picker></calcite-label>` : null}${t != null ? d`<calcite-label class=${o(s.column)}><calcite-input-time-picker .value=${this.getTimeStringFromBound(t)} scale=s @calciteInputTimePickerChange=${this.setGuideDateTimeRange} ${u(this.endTimeCalciteInput)}></calcite-input-time-picker></calcite-label>` : null}</div>`) : null}<div class=${o(s.row)}><div class=${o(s.column)}>${this.renderColorElement()}</div></div><div class=${o(s.row)}><calcite-label class=${o(s.column)}>${this._messages.guideName}<calcite-input type=text .value=${i} @calciteInputInput=${this.setGuideName}></calcite-input></calcite-label></div><div class=${o(s.row)}><calcite-label class=${o(s.column)}>${this._messages.guideLabel}<calcite-input type=text .value=${n} @calciteInputInput=${this.setGuideLabel}></calcite-input></calcite-label></div><div class=${o(s.row)}><calcite-label class=${o(s.column)}>${this._messages.display}<calcite-segmented-control @calciteSegmentedControlChange=${this.setGuideRendered} scale=s><calcite-segmented-control-item .checked=${l} .value=${this._messages.inFront}>${this._messages.inFront}</calcite-segmented-control-item><calcite-segmented-control-item .checked=${!l} .value=${this._messages.inBack}>${this._messages.inBack}</calcite-segmented-control-item></calcite-segmented-control></calcite-label></div></calcite-block>`;

package/dist/components/arcgis-charts-config-guide-popover/customElement.d.ts

@@ -22,12 +22,14 @@ export declare class ArcgisChartsConfigGuidePopover extends LitElement {
      * Place the popover in the give placement.
      *
      * @category Public
+     * @default "leading"
      */
     placement: HTMLCalcitePopoverElement["placement"];
     /**
      * boolean to open or close the popover.
      *
      * @category Public
+     * @default false
      */
     open?: boolean;
     /**
@@ -47,13 +49,12 @@ export declare class ArcgisChartsConfigGuidePopover extends LitElement {
      *
      * @category Public
      */
-    readonly arcgisChartsConfigGuidePopoverSymbolChange: TargetedEvent<this, undefined>;
+    readonly arcgisChartsConfigGuidePopoverSymbolChange: TargetedEvent<this, void>;
     /**
      * Event emitted when the popover is closed.
      *
      * @category Public
      */
-    readonly arcgisChartsConfigPopoverClose: TargetedEvent<this, undefined>;
-    /** @category Private */
+    readonly arcgisChartsConfigPopoverClose: TargetedEvent<this, void>;
     private _messages;
 }

package/dist/components/arcgis-charts-config-guide-popover/customElement.js

@@ -1,21 +1,31 @@
 import { c as r } from "../../chunks/runtime.js";
 import { html as o } from "lit-html";
 import { RESTSymbolType as l } from "@arcgis/charts-spec";
-import { editPopover as a } from "@arcgis/charts-shared-utils";
+import "lodash-es";
+import "d3-array";
+import "../../chunks/interfaces.js";
+import "@arcgis/core/geometry/support/jsonUtils.js";
+import "@arcgis/core/rest/support/AttributeBinsQuery.js";
+import "@arcgis/core/rest/support/Query.js";
+import "@arcgis/core/rest/support/StatisticDefinition.js";
+import "@arcgis/core/time/TimeExtent.js";
+import "@arcgis/core/core/promiseUtils.js";
+import "@arcgis/core/request.js";
+import { e as a } from "../../chunks/popover-ui-utils.js";
 import { g as i } from "../../chunks/default.js";
 import { u as n } from "../../chunks/useT9n.js";
-import { createRef as c, ref as p } from "lit-html/directives/ref.js";
-import { LitElement as h, createEvent as s, safeClassMap as m } from "@arcgis/lumina";
+import { createRef as p, ref as c } from "lit-html/directives/ref.js";
+import { LitElement as m, createEvent as s, safeClassMap as h } from "@arcgis/lumina";
 import { css as g } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/4.33/esri/copyright.txt for details.
-v4.33.0-next.99 */
+v4.33.0 */
 const C = {
   jsAppFlyout: "js-app-flyout"
 }, d = g``;
-class f extends h {
+class f extends m {
   constructor() {
-    super(...arguments), this._messages = n(), this.popoverElement = c(), this.placement = "leading", this.arcgisChartsConfigGuidePopoverColorChange = s(), this.arcgisChartsConfigGuidePopoverSymbolChange = s(), this.arcgisChartsConfigPopoverClose = s();
+    super(...arguments), this._messages = n(), this.popoverElement = p(), this.placement = "leading", this.arcgisChartsConfigGuidePopoverColorChange = s(), this.arcgisChartsConfigGuidePopoverSymbolChange = s(), this.arcgisChartsConfigPopoverClose = s();
   }
   static {
     this.properties = { messageOverrides: 0, selectedElement: 2, referenceElement: 2, placement: 3, open: 7 };
@@ -23,44 +33,26 @@ class f extends h {
   static {
     this.styles = d;
   }
-  //#endregion
-  //#region Public Methods
-  /**
-   * Calls `reposition()` method on popover element.
-   *
-   * @category Public
-   */
   async reposition() {
     await this.popoverElement.value?.reposition();
   }
-  //#endregion
-  //#region Lifecycle
-  /** @category Lifecycle */
   updated() {
     a(this.popoverElement.value, this.open);
   }
-  //#endregion
-  //#region Private Methods
-  /** @category Private */
   guidePopoverClose() {
     this.open = !1, this.arcgisChartsConfigPopoverClose.emit();
   }
-  /** @category Event handler */
   updateColorProperties(t) {
     const e = t.detail;
     e !== void 0 && (e[3] = i), this.selectedElement = e, this.arcgisChartsConfigGuidePopoverColorChange.emit(this.selectedElement);
   }
-  /** @category Event handler */
   updateSymbolProperties(t) {
     const { lineStyle: e } = t.target;
     e?.color !== void 0 && (e.color[3] = i), this.selectedElement = e, this.arcgisChartsConfigGuidePopoverSymbolChange.emit(t.detail);
   }
-  //#endregion
-  //#region Rendering
-  /** @category Lifecycle */
   render() {
     const t = this.selectedElement, e = this.selectedElement;
-    return o`<div class=${m(C.jsAppFlyout)}><calcite-popover .referenceElement=${this.referenceElement ?? document.body} .placement=${this.placement} .open=${this.open} offset-distance=20 offset-skidding=60 label pointer-disabled @calcitePopoverClose=${this.guidePopoverClose} ${p(this.popoverElement)}>${Array.isArray(t) && o`<arcgis-charts-config-color-style .header=${this._messages.fillStyle} enable-close .open=${this.open} .selectedColor=${t} @arcgisChartsConfigColorStyleClose=${this.guidePopoverClose} @arcgisChartsConfigColorStyleChange=${this.updateColorProperties}></arcgis-charts-config-color-style>` || ""}${e?.type === l.SLS && o`<arcgis-charts-config-line-style .header=${this._messages.lineStyle} .open=${this.open} enable-close .lineStyle=${e} @arcgisChartsConfigLineStyleClose=${this.guidePopoverClose} @arcgisChartsConfigLineStyleChange=${this.updateSymbolProperties}></arcgis-charts-config-line-style>` || ""}</calcite-popover></div>`;
+    return o`<div class=${h(C.jsAppFlyout)}><calcite-popover .referenceElement=${this.referenceElement ?? document.body} .placement=${this.placement} .open=${this.open} offset-distance=20 offset-skidding=60 label pointer-disabled @calcitePopoverClose=${this.guidePopoverClose} ${c(this.popoverElement)}>${Array.isArray(t) && o`<arcgis-charts-config-color-style .header=${this._messages.fillStyle} enable-close .open=${this.open} .selectedColor=${t} @arcgisChartsConfigColorStyleClose=${this.guidePopoverClose} @arcgisChartsConfigColorStyleChange=${this.updateColorProperties}></arcgis-charts-config-color-style>` || ""}${e?.type === l.SLS && o`<arcgis-charts-config-line-style .header=${this._messages.lineStyle} .open=${this.open} enable-close .lineStyle=${e} @arcgisChartsConfigLineStyleClose=${this.guidePopoverClose} @arcgisChartsConfigLineStyleChange=${this.updateSymbolProperties}></arcgis-charts-config-line-style>` || ""}</calcite-popover></div>`;
   }
 }
 r("arcgis-charts-config-guide-popover", f);

package/dist/components/arcgis-charts-config-guides/customElement.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="../../index.d.ts" />
-import { ModelWithGuides } from '../../model';
+import { ModelWithGuides } from '../../model/mixins';
 import { CalculatedMinMaxBoundsPayload } from '@arcgis/charts-spec';
 import { default as MapView } from '@arcgis/core/views/MapView';
 import { PropertyValues } from 'lit';
@@ -33,22 +33,27 @@ export declare class ArcgisChartsConfigGuides extends LitElement {
      * Enable X-Axis guide
      *
      * @category Public
+     * @default false
      */
     enableXAxisGuide?: boolean;
     /**
      * Enable Y-Axis Guide
      *
      * @category Public
+     * @default false
      */
     enableYAxisGuide?: boolean;
-    /** When true, the content of the component will be displayed. */
+    /**
+     * When true, the content of the component will be displayed.
+     *
+     * @default false
+     */
     open: boolean;
     /**
      * Event when there is change in guide popover.
      *
      * @category Public
      */
-    readonly arcgisChartsConfigGuidePopoverChange: TargetedEvent<this, undefined>;
-    /** @category Private */
+    readonly arcgisChartsConfigGuidePopoverChange: TargetedEvent<this, void>;
     private _messages;
 }

package/dist/components/arcgis-charts-config-guides/customElement.js

@@ -1,19 +1,28 @@
 import { c as x } from "../../chunks/runtime.js";
-import { editPopover as A } from "@arcgis/charts-shared-utils";
 import "@arcgis/charts-spec";
-import { G as o } from "../../chunks/scatter-plot-model.js";
 import { cloneDeep as r } from "lodash-es";
-import { i as l, a as h } from "../../chunks/type-guards.js";
+import "d3-array";
+import "../../chunks/interfaces.js";
+import "@arcgis/core/geometry/support/jsonUtils.js";
+import "@arcgis/core/rest/support/AttributeBinsQuery.js";
+import "@arcgis/core/rest/support/Query.js";
+import "@arcgis/core/rest/support/StatisticDefinition.js";
+import "@arcgis/core/time/TimeExtent.js";
+import "@arcgis/core/core/promiseUtils.js";
+import "@arcgis/core/request.js";
+import { e as A } from "../../chunks/popover-ui-utils.js";
 import { d as c } from "../../chunks/default.js";
 import { g as u, H as g } from "../../chunks/resource.js";
 import { u as b } from "../../chunks/useT9n.js";
 import { html as a } from "lit";
 import { createRef as m, ref as G } from "lit-html/directives/ref.js";
-import { LitElement as C, createEvent as $, safeClassMap as f } from "@arcgis/lumina";
+import { LitElement as C, createEvent as $, safeClassMap as p } from "@arcgis/lumina";
 import { css as v } from "@lit/reactive-element/css-tag.js";
+import { G as o } from "../../chunks/common.js";
+import { n as l, o as h } from "../../chunks/type-guards.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/4.33/esri/copyright.txt for details.
-v4.33.0-next.99 */
+v4.33.0 */
 const X = v`:host{display:flex;flex-direction:column;width:var(--arcgis-charts-config-calcite-block-default-width);margin:var(--arcgis-charts-config-calcite-block-default-margin)}.add-guide{display:flex;justify-content:center;padding:.5rem}.add-guide-btn{width:100%}.no-guides{border-radius:2rem}.no-messages{text-align:center}.guide-icon{padding-left:.5rem;padding-top:.5rem;width:1.5rem;height:1.5rem}`;
 class Y extends C {
   constructor() {
@@ -43,44 +52,25 @@ class Y extends C {
   static {
     this.styles = X;
   }
-  //#endregion
-  //#region Lifecycle
-  /** @category Lifecycle */
   load() {
     this.modelChange(this.model);
   }
-  /** @category Lifecycle */
   willUpdate(e) {
     e.has("model") && this.modelChange(this.model, e.get("model"));
   }
-  /** @category Lifecycle */
   updated() {
     A(this.popoverElement.value, !this.showAddButton);
   }
-  /** @category Lifecycle */
   disconnectedCallback() {
     super.disconnectedCallback(), this.model.removeEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange);
   }
-  //#endregion
-  //#region Private Methods
-  /** @category Watch handler */
   modelChange(e, i) {
     i?.removeEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange), e?.addEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange);
   }
-  /**
-   * Gets the total number of guides.
-   *
-   * @category Private
-   */
   getAllGuidesLength() {
     const e = l(this.model) ? this.model.getXGuidesLength() ?? 0 : 0, i = h(this.model) ? this.model.getYGuidesLength() ?? 0 : 0;
     return e + i;
   }
-  /**
-   * @param guideNameTemplate
-   * @param count
-   * @category Private
-   */
   getUniqueName(e, i = 1) {
     const t = `${e} ${i}`;
     let s = !1;
@@ -96,26 +86,17 @@ class Y extends C {
     }
     return s ? this.getUniqueName(e, i + 1) : t;
   }
-  /** @category Private */
   closeAddPopOver() {
     this.showAddButton = !0;
   }
-  /** @category Event handler */
   setChangedGuide(e) {
     const { index: i, orientation: t, isDelete: s } = e.detail, d = u(i, t, this.model);
     s && d !== void 0 && d <= this.latestGuidePosition && this.latestGuidePosition > 0 && (this.latestGuidePosition -= 1);
   }
-  //#endregion
-  //#region Rendering
-  /**
-   * @param guide
-   * @category Render UX
-   */
   renderGuide(e, i) {
     let t;
     return (this.enableXAxisGuide && i === o.X || this.enableYAxisGuide && i === o.Y) && (t = a`<arcgis-charts-config-guide .model=${this.model} .timeZone=${this.timeZone} .calculatedMinMaxBounds=${this.calculatedMinMaxBounds} .index=${e} .orientation=${i} .latestGuidePosition=${this.latestGuidePosition} @arcgisChartsConfigGuideChange=${this.setChangedGuide}></arcgis-charts-config-guide>`), t;
   }
-  /** @category Render UX */
   renderGuides() {
     const e = [];
     if (l(this.model)) {
@@ -130,17 +111,12 @@ class Y extends C {
     }
     return e;
   }
-  /**
-   * @param callBack
-   * @category Render UX
-   */
   renderAddGuideButton(e) {
     return a`<calcite-fab slot=fab appearance=outline-fill kind=neutral text-enabled .text=${this._messages.addGuide} .label=${this._messages.addGuide} @click=${e} scale=s></calcite-fab>`;
   }
-  /** @category Lifecycle */
   render() {
     const e = this.getAllGuidesLength(), i = e > 0, t = this.showAddButton && this.enableXAxisGuide && this.enableYAxisGuide, s = this.enableXAxisGuide && !this.enableYAxisGuide, d = !this.enableXAxisGuide && this.enableYAxisGuide;
-    return a`<calcite-popover .open=${!this.showAddButton} .referenceElement=${this.addGuideButton.value ?? document.body} flip-disabled pointer-disabled offset-distance=-18 @calcitePopoverClose=${this.closeAddPopOver} .placement=${e === 0 ? "bottom" : "top"} label ${G(this.popoverElement)}><calcite-panel .heading=${this._messages.guideType}><calcite-action text slot=header-actions-end icon=x @click=${this.closeAddPopOver}></calcite-action>${this.enableXAxisGuide ? a`<calcite-action .label=${this._messages.addXAxisGuide} .text=${this._messages.addXAxisGuide ?? ""} @click=${this.addXGuide} icon=x-axis-guide text-enabled></calcite-action>` : null}${this.enableYAxisGuide ? a`<calcite-action .label=${this._messages.addYAxisGuide} .text=${this._messages.addYAxisGuide ?? ""} @click=${this.addYGuide} icon=y-axis-guide text-enabled></calcite-action>` : null}</calcite-panel></calcite-popover>${i ? this.renderGuides() : a`<div class=${f(g.noMessages)}>${this._messages.noGuidesMsg}</div>`}<div class=${f(g.addGuide)} ${G(this.addGuideButton)}>${t && this.renderAddGuideButton(this.togglePopOver) || ""}${s && this.renderAddGuideButton(this.addXGuide) || ""}${d && this.renderAddGuideButton(this.addYGuide) || ""}</div>`;
+    return a`<calcite-popover .open=${!this.showAddButton} .referenceElement=${this.addGuideButton.value ?? document.body} flip-disabled pointer-disabled offset-distance=-18 @calcitePopoverClose=${this.closeAddPopOver} .placement=${e === 0 ? "bottom" : "top"} label ${G(this.popoverElement)}><calcite-panel .heading=${this._messages.guideType}><calcite-action text slot=header-actions-end icon=x @click=${this.closeAddPopOver}></calcite-action>${this.enableXAxisGuide ? a`<calcite-action .label=${this._messages.addXAxisGuide} .text=${this._messages.addXAxisGuide ?? ""} @click=${this.addXGuide} icon=x-axis-guide text-enabled></calcite-action>` : null}${this.enableYAxisGuide ? a`<calcite-action .label=${this._messages.addYAxisGuide} .text=${this._messages.addYAxisGuide ?? ""} @click=${this.addYGuide} icon=y-axis-guide text-enabled></calcite-action>` : null}</calcite-panel></calcite-popover>${i ? this.renderGuides() : a`<div class=${p(g.noMessages)}>${this._messages.noGuidesMsg}</div>`}<div class=${p(g.addGuide)} ${G(this.addGuideButton)}>${t && this.renderAddGuideButton(this.togglePopOver) || ""}${s && this.renderAddGuideButton(this.addXGuide) || ""}${d && this.renderAddGuideButton(this.addYGuide) || ""}</div>`;
   }
 }
 x("arcgis-charts-config-guides", Y);

package/dist/components/arcgis-charts-config-guides/resource.d.ts

@@ -1,4 +1,5 @@
-import { ModelWithGuides, GuideOrientation } from '../../model';
+import { ModelWithGuides } from '../../model/mixins';
+import { GuideOrientation } from '../../model';
 export declare const HTMLClasses: {
     readonly addGuide: "add-guide";
     readonly noMessages: "no-messages";