@arcgis/common-components 5.1.0-next.102 → 5.1.0-next.103

package/dist/components/arcgis-ticks/customElement.js

@@ -1,7 +1,7 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
 import { c as $ } from "../../chunks/runtime.js";
-import { css as M, html as c } from "lit";
-import { LitElement as _, createEvent as C, safeClassMap as h, nothing as v, safeStyleMap as u } from "@arcgis/lumina";
+import { css as M, html as o } from "lit";
+import { LitElement as _, createEvent as C, safeClassMap as h, nothing as v, safeStyleMap as f } from "@arcgis/lumina";
 import { formatNumber as z } from "@arcgis/core/intl.js";
 const n = {
   container: "container",
@@ -12,7 +12,7 @@ const n = {
   tickMax: "tick--max",
   tickLabel: "tick-label",
   baseline: "baseline"
-}, A = M`:host{display:flex;--arcgis-ticks-tick-length: .5rem;--arcgis-ticks-tick-color: var(--calcite-color-border-input);--arcgis-ticks-gap: 1em;--arcgis-ticks-font-size: var(--calcite-font-size--2)}.container{align-items:stretch;display:flex;color:var(--calcite-color-text-2);flex:1;font-weight:var(--calcite-font-weight-medium);font-size:var(--arcgis-ticks-font-size);line-height:1em;position:relative;user-select:none;word-wrap:normal;word-break:normal}.baseline{background-color:var(--arcgis-ticks-tick-color, var(--calcite-color-border-input))}.tick{position:absolute;background-color:var(--arcgis-ticks-tick-color, var(--calcite-color-border-input))}.tick-label{position:absolute;text-align:var(--arcgis-ticks-label-text-align, center);width:var(--arcgis-ticks-label-width, var(--labels-container-width, "auto"))}:dir(rtl){.tick-label{direction:rtl}}:host([layout="horizontal"]){.ticks-container{height:var(--arcgis-ticks-tick-length)}.labels-container{height:var(--labels-container-height, "auto")}.tick{width:.125rem;height:var(--arcgis-ticks-tick-length);transform:translate(-50%)}.tick-label{transform:translate(-50%)}.tick--min{transform:unset}.tick--max{transform:translate(-100%)}}:host([layout="vertical"]){.ticks-container{width:var(--arcgis-ticks-tick-length)}.labels-container{width:var(--labels-container-width)}.tick{width:var(--arcgis-ticks-tick-length);height:.125rem;transform:translateY(50%)}.tick-label{text-align:right;transform:translateY(50%)}.tick--min{transform:unset}.tick--max{transform:translateY(100%)}}:host([layout="horizontal"][mirrored]){.tick,.tick-label{transform:translate(50%)}.tick--min{transform:unset}.tick--max{transform:translate(100%)}}:host([layout="vertical"][mirrored]){.tick,.tick-label{transform:translateY(-50%)}.tick--min{transform:unset}.tick--max{transform:translateY(-100%)}}:host([layout="horizontal"][label-placement="start"]){.container{flex-direction:column;justify-content:flex-end}.labels-container{margin-bottom:var(--arcgis-ticks-gap)}}:host([layout="horizontal"][label-placement="end"]){.container{flex-direction:column-reverse;justify-content:flex-end}.labels-container{margin-top:var(--arcgis-ticks-gap)}}:host([layout="vertical"][label-placement="start"]){.container{flex-direction:row;justify-content:flex-end}:dir(ltr){.labels-container{margin-right:var(--arcgis-ticks-gap)}.tick-label{text-align:right}}:dir(rtl){.labels-container{margin-left:var(--arcgis-ticks-gap)}.tick-label{text-align:left;unicode-bidi:plaintext}}}:host([layout="vertical"][label-placement="end"]){.container{flex-direction:row-reverse;justify-content:flex-end}:dir(ltr){.labels-container{margin-left:var(--arcgis-ticks-gap)}.tick-label{text-align:left}}:dir(rtl){.labels-container{margin-right:var(--arcgis-ticks-gap)}.tick-label{text-align:right;unicode-bidi:plaintext}}}:host([interactive]){pointer-events:none;.tick,.tick-label{pointer-events:auto;cursor:pointer}.tick-label:hover{text-decoration:underline}}`;
+}, A = M`:host{display:flex;--arcgis-ticks-font-size: var(--calcite-font-size--2);--arcgis-ticks-font-weight: var(--calcite-font-weight-medium);--arcgis-ticks-gap: 1em;--arcgis-ticks-tick-color: var(--calcite-color-border-input);--arcgis-ticks-tick-length: .5rem;--arcgis-ticks-tick-transform: translateX(-50%);--arcgis-ticks-tick-width: .125rem}.container{align-items:stretch;display:flex;color:var(--calcite-color-text-2);flex:1;font-weight:var(--arcgis-ticks-font-weight);font-size:var(--arcgis-ticks-font-size);line-height:1em;position:relative;user-select:none;word-wrap:normal;word-break:normal}.baseline{background-color:var(--arcgis-ticks-tick-color, var(--calcite-color-border-input))}.tick{position:absolute;background-color:var(--arcgis-ticks-tick-color, var(--calcite-color-border-input))}.tick-label{position:absolute;text-align:var(--arcgis-ticks-label-text-align, center);width:var(--arcgis-ticks-label-width, var(--labels-container-width, "auto"))}:dir(rtl){.tick-label{direction:rtl}}:host([layout="horizontal"]){.ticks-container{height:var(--arcgis-ticks-tick-length)}.labels-container{height:var(--labels-container-height, "auto")}.tick{width:var(--arcgis-ticks-tick-width);height:var(--arcgis-ticks-tick-length);transform:var(--arcgis-ticks-tick-transform)}.tick-label{transform:translate(-50%)}.tick--min{transform:unset}.tick--max{transform:translate(-100%)}}:host([layout="vertical"]){.ticks-container{width:var(--arcgis-ticks-tick-length)}.labels-container{width:var(--labels-container-width)}.tick{width:var(--arcgis-ticks-tick-length);height:var(--arcgis-ticks-tick-width);transform:translateY(50%)}.tick-label{text-align:right;transform:translateY(50%)}.tick--min{transform:unset}.tick--max{transform:translateY(100%)}}:host([layout="horizontal"][mirrored]){.tick,.tick-label{transform:translate(50%)}.tick--min{transform:unset}.tick--max{transform:translate(100%)}}:host([layout="vertical"][mirrored]){.tick,.tick-label{transform:translateY(-50%)}.tick--min{transform:unset}.tick--max{transform:translateY(-100%)}}:host([layout="horizontal"][label-placement="start"]){.container{flex-direction:column;justify-content:flex-end}.labels-container{margin-bottom:var(--arcgis-ticks-gap)}}:host([layout="horizontal"][label-placement="end"]){.container{flex-direction:column-reverse;justify-content:flex-end}.labels-container{margin-top:var(--arcgis-ticks-gap)}}:host([layout="vertical"][label-placement="start"]){.container{flex-direction:row;justify-content:flex-end}:dir(ltr){.labels-container{margin-right:var(--arcgis-ticks-gap)}.tick-label{text-align:right}}:dir(rtl){.labels-container{margin-left:var(--arcgis-ticks-gap)}.tick-label{text-align:left;unicode-bidi:plaintext}}}:host([layout="vertical"][label-placement="end"]){.container{flex-direction:row-reverse;justify-content:flex-end}:dir(ltr){.labels-container{margin-left:var(--arcgis-ticks-gap)}.tick-label{text-align:left}}:dir(rtl){.labels-container{margin-right:var(--arcgis-ticks-gap)}.tick-label{text-align:right;unicode-bidi:plaintext}}}:host([interactive]){pointer-events:none;.tick,.tick-label{pointer-events:auto;cursor:pointer}.tick-label:hover{text-decoration:underline}}`;
 class F extends _ {
   constructor() {
     super(...arguments), this._formatValue = (e) => z(e, this._formatOptions), this._formatOptions = {
@@ -62,23 +62,23 @@ class F extends _ {
     return i ?? this._formatValue(e);
   }
   render() {
-    return c`<div class=${h(n.container)} touch-action=none @click=${this._handleClick}>${this._renderContent()}${this._renderBaseline()}</div>`;
+    return o`<div class=${h(n.container)} touch-action=none @click=${this._handleClick}>${this._renderContent()}${this._renderBaseline()}</div>`;
   }
   _renderContent() {
-    const { interpolationExponent: e, max: t, min: i, mode: r, values: a, layout: o, mirrored: l, showLabels: x } = this, g = [], b = [];
-    for (const [d, f] of L(r, i, t, e, a)) {
-      const p = { [o === "horizontal" ? l ? "right" : "left" : l ? "top" : "bottom"]: `${d}%` }, w = {
+    const { interpolationExponent: e, max: t, min: i, mode: r, values: a, layout: c, mirrored: l, showLabels: w } = this, u = [], b = [];
+    for (const [k, d] of L(r, i, t, e, a)) {
+      const p = { [c === "horizontal" ? l ? "right" : "left" : l ? "top" : "bottom"]: `${k}%` }, x = {
         [n.tick]: !0,
-        [n.tickMin]: d === 0,
-        [n.tickMax]: d === 100
+        [n.tickMin]: k === 0,
+        [n.tickMax]: k === 100
       };
-      g.push(c`<div class=${h(w)} style=${u(p)} data-value=${f ?? v}></div>`), x && b.push(c`<div class=${h(n.tickLabel)} style=${u(p)} data-value=${f ?? v}>${this._internalLabelFormatter(f)}</div>`);
+      u.push(o`<div class=${h(x)} style=${f(p)} data-value=${d ?? v}></div>`), w && b.push(o`<div class=${h(n.tickLabel)} style=${f(p)} data-value=${d ?? v}>${this._internalLabelFormatter(d)}</div>`);
     }
-    return [c`<div class=${h(n.labelsContainer)}>${b}</div>`, c`<div class=${h(n.ticksContainer)}>${g}</div>`];
+    return [o`<div class=${h(n.labelsContainer)}>${b}</div>`, o`<div class=${h(n.ticksContainer)}>${u}</div>`];
   }
   _renderBaseline() {
     const { showBaseline: e, layout: t } = this;
-    return e && c`<div class=${h(n.baseline)} style=${u({
+    return e && o`<div class=${h(n.baseline)} style=${f({
       [t === "horizontal" ? "width" : "height"]: "100%",
       [t === "horizontal" ? "height" : "width"]: "0.125rem"
     })}></div>` || "";
@@ -88,9 +88,9 @@ function* L(s, e, t, i, r) {
   switch (s) {
     case "value": {
       const a = Array.isArray(r) ? r : [r];
-      for (const o of a) {
-        const l = P(e, t, o, i) * 100;
-        l >= 0 && l <= 100 && (yield [l, o]);
+      for (const c of a) {
+        const l = P(e, t, c, i) * 100;
+        l >= 0 && l <= 100 && (yield [l, c]);
       }
       break;
     }
@@ -108,15 +108,15 @@ function* L(s, e, t, i, r) {
       if (a <= 1)
         yield [50, m(e, t, 0.5, i)];
       else
-        for (let o = 0; o < a; o++) {
-          const l = o * 100 / (a - 1);
+        for (let c = 0; c < a; c++) {
+          const l = c * 100 / (a - 1);
           yield [l, m(e, t, l / 100, i)];
         }
       break;
     }
   }
 }
-function k(s, e, t) {
+function g(s, e, t) {
   return t < s ? s : t > e ? e : t;
 }
 function y(s, e, t) {
@@ -124,13 +124,13 @@ function y(s, e, t) {
 }
 function P(s, e, t, i = 0) {
   let r = (t - s) / (e - s);
-  if (r = k(0, 1, r), Math.abs(i) < 1e-9)
+  if (r = g(0, 1, r), Math.abs(i) < 1e-9)
     return r;
   const a = 1 + Math.expm1(i) * r;
-  return r = Math.log(a) / i, k(0, 1, r);
+  return r = Math.log(a) / i, g(0, 1, r);
 }
 function m(s, e, t, i = 0) {
-  if (t = k(0, 1, t), Math.abs(i) < 1e-9)
+  if (t = g(0, 1, t), Math.abs(i) < 1e-9)
     return y(s, e, t);
   const r = Math.expm1(i * t) / Math.expm1(i);
   return y(s, e, r);