@arcgis/common-components 5.2.0-next.113 → 5.2.0-next.114

package/dist/components/arcgis-ticks/customElement.d.ts

@@ -1,6 +1,7 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { Layout, TickMode, TickValues } from "./types.js";
+import type { T9nMeta } from "@arcgis/lumina/controllers";
 
 declare module "@arcgis/lumina" {
 export interface DeclareCssProperties {
@@ -41,6 +42,8 @@ export interface DeclareCssProperties {
  * ```
  */
 export abstract class ArcgisTicks extends LitElement {
+  /** @internal */
+  protected _messages: Partial<Record<never, never>> & T9nMeta<Record<never, never>>;
   /**
    * When `true`, ticks are clickable and the component emits [@arcgisTickClick](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-ticks/#event-arcgisTickClick) when the user selects a tick.
    *

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

@@ -2,8 +2,9 @@
 import { c as M } from "../../chunks/runtime.js";
 import { css as C, html as h } from "lit";
 import { LitElement as F, createEvent as L, safeClassMap as o, nothing as y, safeStyleMap as m } from "@arcgis/lumina";
-import { formatNumber as T } from "@arcgis/core/intl.js";
-const c = {
+import { u as T } from "../../chunks/useT9n.js";
+import { a as z } from "../../chunks/locale.js";
+const l = {
   container: "container",
   ticksContainer: "ticks-container",
   labelsContainer: "labels-container",
@@ -14,10 +15,10 @@ const c = {
   tickLabelFocused: "tick-label--focused",
   tickLabelText: "tick-label-text",
   baseline: "baseline"
-}, z = C`: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"))}.tick-label-text:hover{text-decoration:underline}.tick-label-text{display:inline-block;line-height:1}.tick-label--focused .tick-label-text{outline:2px solid var(--calcite-color-focus, var(--calcite-color-brand));outline-offset:calc(2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}: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:focus{background-color:var(--calcite-color-brand);outline:2px solid var(--calcite-color-focus, var(--calcite-color-brand));outline-offset:calc(2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}}`;
-class A extends F {
+}, A = C`: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"))}.tick-label-text{display:inline-block;line-height:1}.tick-label--focused .tick-label-text{outline:2px solid var(--calcite-color-focus, var(--calcite-color-brand));outline-offset:calc(2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}: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-text:hover{text-decoration:underline}.tick:focus{background-color:var(--calcite-color-brand);outline:2px solid var(--calcite-color-focus, var(--calcite-color-brand));outline-offset:calc(2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}}`;
+class P extends F {
   constructor() {
-    super(...arguments), this._formatValue = (t) => T(t, this._formatOptions), this._activeTick = null, this._formatOptions = {
+    super(...arguments), this._messages = T({ name: null }), this.#t = (t) => z(this._messages._lang, this._formatOptions).format(t), this._activeTick = null, this._formatOptions = {
       style: "decimal",
       useGrouping: !0,
       minimumFractionDigits: 0,
@@ -37,14 +38,15 @@ class A extends F {
     } }] };
   }
   static {
-    this.styles = z;
+    this.styles = A;
   }
+  #t;
   updated() {
-    const t = this.renderRoot.querySelector(`.${c.labelsContainer}`);
+    const t = this.renderRoot.querySelector(`.${l.labelsContainer}`);
     if (t) {
       t.style.removeProperty("--labels-container-width"), t.style.removeProperty("--labels-container-height");
       let e = 0, i = 0;
-      for (const a of this.renderRoot.querySelectorAll(`.${c.tickLabel}`)) {
+      for (const a of this.renderRoot.querySelectorAll(`.${l.tickLabel}`)) {
         const r = a.getBoundingClientRect();
         e = Math.max(e, r.width), i = Math.max(i, r.height);
       }
@@ -72,46 +74,46 @@ class A extends F {
   _internalLabelFormatter(t) {
     const e = this.labelFormatter;
     if (!e)
-      return this._formatValue(t);
-    const i = e(t, this._formatValue);
-    return i ?? this._formatValue(t);
+      return this.#t(t);
+    const i = e(t, this.#t);
+    return i ?? this.#t(t);
   }
   render() {
-    return h`<div class=${o(c.container)} touch-action=none>${this._renderContent()}${this._renderBaseline()}</div>`;
+    return h`<div class=${o(l.container)} touch-action=none>${this._renderContent()}${this._renderBaseline()}</div>`;
   }
   _renderContent() {
-    const { interpolationExponent: t, max: e, min: i, mode: a, values: r, layout: n, mirrored: s, showLabels: w, interactive: k } = this, g = [], v = [];
-    for (const [f, d] of P(a, i, e, t, r)) {
-      const p = { [n === "horizontal" ? s ? "right" : "left" : s ? "top" : "bottom"]: `${f}%` }, $ = {
-        [c.tick]: !0,
-        [c.tickMin]: f === 0,
-        [c.tickMax]: f === 100
+    const { interpolationExponent: t, max: e, min: i, mode: a, values: r, layout: n, mirrored: c, showLabels: w, interactive: k } = this, b = [], v = [];
+    for (const [f, d] of B(a, i, e, t, r)) {
+      const p = { [n === "horizontal" ? c ? "right" : "left" : c ? "top" : "bottom"]: `${f}%` }, $ = {
+        [l.tick]: !0,
+        [l.tickMin]: f === 0,
+        [l.tickMax]: f === 100
       };
-      if (g.push(h`<div class=${o($)} .role=${k ? "button" : void 0} .ariaLabel=${k ? this._internalLabelFormatter(d) : void 0} style=${m(p)} data-value=${d ?? y} .tabIndex=${k ? 0 : -1} @blur=${this._handleBlur} @click=${this._handleClick} @focus=${this._handleFocus} @keydown=${this._handleKeyDown} @mousedown=${this._handleMouseDown}></div>`), w) {
+      if (b.push(h`<div class=${o($)} .role=${k ? "button" : void 0} .ariaLabel=${k ? this._internalLabelFormatter(d) : void 0} style=${m(p)} data-value=${d ?? y} .tabIndex=${k ? 0 : -1} @blur=${this._handleBlur} @click=${this._handleClick} @focus=${this._handleFocus} @keydown=${this._handleKeyDown} @mousedown=${this._handleMouseDown}></div>`), w) {
         const _ = {
-          [c.tickLabel]: !0,
-          [c.tickLabelFocused]: this._activeTick === String(d)
+          [l.tickLabel]: !0,
+          [l.tickLabelFocused]: this._activeTick === String(d)
         };
-        v.push(h`<div class=${o(_)} style=${m(p)} data-value=${d ?? y} @click=${this._handleClick}><span class=${o(c.tickLabelText)}>${this._internalLabelFormatter(d)}</span></div>`);
+        v.push(h`<div class=${o(_)} style=${m(p)} data-value=${d ?? y} @click=${this._handleClick}><span class=${o(l.tickLabelText)}>${this._internalLabelFormatter(d)}</span></div>`);
       }
     }
-    return [h`<div class=${o(c.labelsContainer)}>${v}</div>`, h`<div class=${o(c.ticksContainer)}>${g}</div>`];
+    return [h`<div class=${o(l.labelsContainer)}>${v}</div>`, h`<div class=${o(l.ticksContainer)}>${b}</div>`];
   }
   _renderBaseline() {
     const { showBaseline: t, layout: e } = this;
-    return t && h`<div class=${o(c.baseline)} style=${m({
+    return t && h`<div class=${o(l.baseline)} style=${m({
       [e === "horizontal" ? "width" : "height"]: "100%",
       [e === "horizontal" ? "height" : "width"]: "0.125rem"
     })}></div>` || "";
   }
 }
-function* P(l, t, e, i, a) {
-  switch (l) {
+function* B(s, t, e, i, a) {
+  switch (s) {
     case "value": {
       const r = Array.isArray(a) ? a : [a];
       for (const n of r) {
-        const s = B(t, e, n, i) * 100;
-        s >= 0 && s <= 100 && (yield [s, n]);
+        const c = D(t, e, n, i) * 100;
+        c >= 0 && c <= 100 && (yield [c, n]);
       }
       break;
     }
@@ -130,33 +132,33 @@ function* P(l, t, e, i, a) {
         yield [50, u(t, e, 0.5, i)];
       else
         for (let n = 0; n < r; n++) {
-          const s = n * 100 / (r - 1);
-          yield [s, u(t, e, s / 100, i)];
+          const c = n * 100 / (r - 1);
+          yield [c, u(t, e, c / 100, i)];
         }
       break;
     }
   }
 }
-function b(l, t, e) {
-  return e < l ? l : e > t ? t : e;
+function g(s, t, e) {
+  return e < s ? s : e > t ? t : e;
 }
-function x(l, t, e) {
-  return l + (t - l) * e;
+function x(s, t, e) {
+  return s + (t - s) * e;
 }
-function B(l, t, e, i = 0) {
-  let a = (e - l) / (t - l);
-  if (a = b(0, 1, a), Math.abs(i) < 1e-9)
+function D(s, t, e, i = 0) {
+  let a = (e - s) / (t - s);
+  if (a = g(0, 1, a), Math.abs(i) < 1e-9)
     return a;
   const r = 1 + Math.expm1(i) * a;
-  return a = Math.log(r) / i, b(0, 1, a);
+  return a = Math.log(r) / i, g(0, 1, a);
 }
-function u(l, t, e, i = 0) {
-  if (e = b(0, 1, e), Math.abs(i) < 1e-9)
-    return x(l, t, e);
+function u(s, t, e, i = 0) {
+  if (e = g(0, 1, e), Math.abs(i) < 1e-9)
+    return x(s, t, e);
   const a = Math.expm1(i * e) / Math.expm1(i);
-  return x(l, t, a);
+  return x(s, t, a);
 }
-M("arcgis-ticks", A);
+M("arcgis-ticks", P);
 export {
-  A as ArcgisTicks
+  P as ArcgisTicks
 };