@luzmo/analytics-components-kit 1.0.1-alpha.51 → 1.0.1-alpha.53

package/components/{index-Ct7UvUif.js → index-DV63kOPg.js}

@@ -17,7 +17,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-import { r as oe, x as f, n as b } from "./property-DCzt3DR1.js";
+import { r as re, E as oe, x as b, n as z } from "./property-DCzt3DR1.js";
 import { h as ne } from "./task-Bh_X-xIU.js";
 import "./index-CskV_bXp.js";
 import "./index-CsDgk_sj.js";
@@ -26,15 +26,16 @@ import "./index-CbuHBIDB.js";
 import "./index-C3N6qTxJ.js";
 import "./index-DE3d0E0P.js";
 import "./index-BmshD32H.js";
-import { r as G } from "./state-nDsQPund.js";
-import { e as ae } from "./query-Ddbd72Um.js";
-import { a8 as V, af as le, a7 as ue } from "./luzmo-icons-CVeTZ59u.js";
-import { L as ce } from "./focusable-BbymtxWI.js";
-import { S as de, E as pe } from "./sized-mixin-BGzkX2g1.js";
-var he = Object.defineProperty, me = (e, t, s) => t in e ? he(e, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : e[t] = s, L = (e, t, s) => (me(e, typeof t != "symbol" ? t + "" : t, s), s), ge = (e, t, s) => {
+import { r as ae } from "./state-nDsQPund.js";
+import { e as le } from "./query-Ddbd72Um.js";
+import { a8 as V, af as ue, a7 as ce } from "./luzmo-icons-CVeTZ59u.js";
+import { f as de } from "./formatter-CqU9_98M.js";
+import { L as pe } from "./focusable-BbymtxWI.js";
+import { S as he, E as me } from "./sized-mixin-BGzkX2g1.js";
+var ge = Object.defineProperty, ve = (e, t, s) => t in e ? ge(e, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : e[t] = s, L = (e, t, s) => (ve(e, typeof t != "symbol" ? t + "" : t, s), s), fe = (e, t, s) => {
   if (!t.has(e))
     throw TypeError("Cannot " + s);
-}, P = (e, t) => {
+}, D = (e, t) => {
   if (Object(t) !== t)
     throw TypeError('Cannot use the "in" operator on this value');
   return e.has(t);
@@ -42,7 +43,7 @@ var he = Object.defineProperty, me = (e, t, s) => t in e ? he(e, t, { enumerable
   if (t.has(e))
     throw TypeError("Cannot add the same private member more than once");
   t instanceof WeakSet ? t.add(e) : t.set(e, s);
-}, B = (e, t, s) => (ge(e, t, "access private method"), s);
+}, B = (e, t, s) => (fe(e, t, "access private method"), s);
 /**
  * @license
  * Copyright Google LLC All Rights Reserved.
@@ -50,7 +51,7 @@ var he = Object.defineProperty, me = (e, t, s) => t in e ? he(e, t, { enumerable
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-function H(e, t) {
+function G(e, t) {
   return Object.is(e, t);
 }
 /**
@@ -60,17 +61,17 @@ function H(e, t) {
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-let u = null, x = !1, E = 1;
+let c = null, $ = !1, E = 1;
 const I = /* @__PURE__ */ Symbol("SIGNAL");
 function S(e) {
-  const t = u;
-  return u = e, t;
+  const t = c;
+  return c = e, t;
 }
-function ve() {
-  return u;
+function ye() {
+  return c;
 }
-function fe() {
-  return x;
+function be() {
+  return $;
 }
 const A = {
   version: 0,
@@ -93,55 +94,55 @@ const A = {
   }
 };
 function O(e) {
-  if (x)
+  if ($)
     throw new Error(
       typeof ngDevMode < "u" && ngDevMode ? "Assertion error: signal read during notification phase" : ""
     );
-  if (u === null)
+  if (c === null)
     return;
-  u.consumerOnSignalRead(e);
-  const t = u.nextProducerIndex++;
-  if ($(u), t < u.producerNode.length && u.producerNode[t] !== e && R(u)) {
-    const s = u.producerNode[t];
-    k(s, u.producerIndexOfThis[t]);
+  c.consumerOnSignalRead(e);
+  const t = c.nextProducerIndex++;
+  if (x(c), t < c.producerNode.length && c.producerNode[t] !== e && R(c)) {
+    const s = c.producerNode[t];
+    k(s, c.producerIndexOfThis[t]);
   }
-  u.producerNode[t] !== e && (u.producerNode[t] = e, u.producerIndexOfThis[t] = R(u) ? Q(e, u, t) : 0), u.producerLastReadVersion[t] = e.version;
+  c.producerNode[t] !== e && (c.producerNode[t] = e, c.producerIndexOfThis[t] = R(c) ? K(e, c, t) : 0), c.producerLastReadVersion[t] = e.version;
 }
-function ye() {
+function ze() {
   E++;
 }
-function J(e) {
+function H(e) {
   if (!(!e.dirty && e.lastCleanEpoch === E)) {
-    if (!e.producerMustRecompute(e) && !_e(e)) {
+    if (!e.producerMustRecompute(e) && !xe(e)) {
       e.dirty = !1, e.lastCleanEpoch = E;
       return;
     }
     e.producerRecomputeValue(e), e.dirty = !1, e.lastCleanEpoch = E;
   }
 }
-function K(e) {
+function J(e) {
   if (e.liveConsumerNode === void 0)
     return;
-  const t = x;
-  x = !0;
+  const t = $;
+  $ = !0;
   try {
     for (const s of e.liveConsumerNode)
-      s.dirty || ze(s);
+      s.dirty || we(s);
   } finally {
-    x = t;
+    $ = t;
   }
 }
-function be() {
-  return (u == null ? void 0 : u.consumerAllowSignalWrites) !== !1;
+function Ce() {
+  return (c == null ? void 0 : c.consumerAllowSignalWrites) !== !1;
 }
-function ze(e) {
+function we(e) {
   var t;
-  e.dirty = !0, K(e), (t = e.consumerMarkedDirty) == null || t.call(e.wrapper ?? e);
+  e.dirty = !0, J(e), (t = e.consumerMarkedDirty) == null || t.call(e.wrapper ?? e);
 }
-function we(e) {
+function _e(e) {
   return e && (e.nextProducerIndex = 0), S(e);
 }
-function Ce(e, t) {
+function Se(e, t) {
   if (S(t), !(!e || e.producerNode === void 0 || e.producerIndexOfThis === void 0 || e.producerLastReadVersion === void 0)) {
     if (R(e))
       for (let s = e.nextProducerIndex; s < e.producerNode.length; s++)
@@ -150,49 +151,49 @@ function Ce(e, t) {
       e.producerNode.pop(), e.producerLastReadVersion.pop(), e.producerIndexOfThis.pop();
   }
 }
-function _e(e) {
-  $(e);
+function xe(e) {
+  x(e);
   for (let t = 0; t < e.producerNode.length; t++) {
-    const s = e.producerNode[t], o = e.producerLastReadVersion[t];
-    if (o !== s.version || (J(s), o !== s.version))
+    const s = e.producerNode[t], r = e.producerLastReadVersion[t];
+    if (r !== s.version || (H(s), r !== s.version))
       return !0;
   }
   return !1;
 }
-function Q(e, t, s) {
-  var o;
-  if (U(e), $(e), e.liveConsumerNode.length === 0) {
-    (o = e.watched) == null || o.call(e.wrapper);
-    for (let r = 0; r < e.producerNode.length; r++)
-      e.producerIndexOfThis[r] = Q(e.producerNode[r], e, r);
+function K(e, t, s) {
+  var r;
+  if (M(e), x(e), e.liveConsumerNode.length === 0) {
+    (r = e.watched) == null || r.call(e.wrapper);
+    for (let i = 0; i < e.producerNode.length; i++)
+      e.producerIndexOfThis[i] = K(e.producerNode[i], e, i);
   }
   return e.liveConsumerIndexOfThis.push(s), e.liveConsumerNode.push(t) - 1;
 }
 function k(e, t) {
   var s;
-  if (U(e), $(e), typeof ngDevMode < "u" && ngDevMode && t >= e.liveConsumerNode.length)
+  if (M(e), x(e), typeof ngDevMode < "u" && ngDevMode && t >= e.liveConsumerNode.length)
     throw new Error(
       `Assertion error: active consumer index ${t} is out of bounds of ${e.liveConsumerNode.length} consumers)`
     );
   if (e.liveConsumerNode.length === 1) {
     (s = e.unwatched) == null || s.call(e.wrapper);
-    for (let r = 0; r < e.producerNode.length; r++)
-      k(e.producerNode[r], e.producerIndexOfThis[r]);
+    for (let i = 0; i < e.producerNode.length; i++)
+      k(e.producerNode[i], e.producerIndexOfThis[i]);
   }
-  const o = e.liveConsumerNode.length - 1;
-  if (e.liveConsumerNode[t] = e.liveConsumerNode[o], e.liveConsumerIndexOfThis[t] = e.liveConsumerIndexOfThis[o], e.liveConsumerNode.length--, e.liveConsumerIndexOfThis.length--, t < e.liveConsumerNode.length) {
-    const r = e.liveConsumerIndexOfThis[t], l = e.liveConsumerNode[t];
-    $(l), l.producerIndexOfThis[r] = t;
+  const r = e.liveConsumerNode.length - 1;
+  if (e.liveConsumerNode[t] = e.liveConsumerNode[r], e.liveConsumerIndexOfThis[t] = e.liveConsumerIndexOfThis[r], e.liveConsumerNode.length--, e.liveConsumerIndexOfThis.length--, t < e.liveConsumerNode.length) {
+    const i = e.liveConsumerIndexOfThis[t], n = e.liveConsumerNode[t];
+    x(n), n.producerIndexOfThis[i] = t;
   }
 }
 function R(e) {
   var t;
   return e.consumerIsAlwaysLive || (((t = e == null ? void 0 : e.liveConsumerNode) == null ? void 0 : t.length) ?? 0) > 0;
 }
-function $(e) {
+function x(e) {
   e.producerNode ?? (e.producerNode = []), e.producerIndexOfThis ?? (e.producerIndexOfThis = []), e.producerLastReadVersion ?? (e.producerLastReadVersion = []);
 }
-function U(e) {
+function M(e) {
   e.liveConsumerNode ?? (e.liveConsumerNode = []), e.liveConsumerIndexOfThis ?? (e.liveConsumerIndexOfThis = []);
 }
 /**
@@ -202,45 +203,45 @@ function U(e) {
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-function X(e) {
-  if (J(e), O(e), e.value === q)
+function Q(e) {
+  if (H(e), O(e), e.value === q)
     throw e.error;
   return e.value;
 }
-function Se(e) {
-  const t = Object.create($e);
+function $e(e) {
+  const t = Object.create(Te);
   t.computation = e;
-  const s = () => X(t);
+  const s = () => Q(t);
   return s[I] = t, s;
 }
-const W = /* @__PURE__ */ Symbol("UNSET"), D = /* @__PURE__ */ Symbol("COMPUTING"), q = /* @__PURE__ */ Symbol("ERRORED"), $e = {
+const P = /* @__PURE__ */ Symbol("UNSET"), W = /* @__PURE__ */ Symbol("COMPUTING"), q = /* @__PURE__ */ Symbol("ERRORED"), Te = {
   ...A,
-  value: W,
+  value: P,
   dirty: !0,
   error: null,
-  equal: H,
+  equal: G,
   producerMustRecompute(e) {
-    return e.value === W || e.value === D;
+    return e.value === P || e.value === W;
   },
   producerRecomputeValue(e) {
-    if (e.value === D)
+    if (e.value === W)
       throw new Error("Detected cycle in computations.");
     const t = e.value;
-    e.value = D;
-    const s = we(e);
-    let o, r = !1;
+    e.value = W;
+    const s = _e(e);
+    let r, i = !1;
     try {
-      o = e.computation.call(e.wrapper), r = t !== W && t !== q && e.equal.call(e.wrapper, t, o);
-    } catch (l) {
-      o = q, e.error = l;
+      r = e.computation.call(e.wrapper), i = t !== P && t !== q && e.equal.call(e.wrapper, t, r);
+    } catch (n) {
+      r = q, e.error = n;
     } finally {
-      Ce(e, s);
+      Se(e, s);
     }
-    if (r) {
+    if (i) {
       e.value = t;
       return;
     }
-    e.value = o, e.version++;
+    e.value = r, e.version++;
   }
 };
 /**
@@ -250,12 +251,12 @@ const W = /* @__PURE__ */ Symbol("UNSET"), D = /* @__PURE__ */ Symbol("COMPUTING
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-function xe() {
+function Ne() {
   throw new Error();
 }
-let Te = xe;
-function Ne() {
-  Te();
+let Ee = Ne;
+function Ie() {
+  Ee();
 }
 /**
  * @license
@@ -264,25 +265,25 @@ function Ne() {
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-function Ee(e) {
-  const t = Object.create(ke);
+function Oe(e) {
+  const t = Object.create(De);
   t.value = e;
   const s = () => (O(t), t.value);
   return s[I] = t, s;
 }
-function Ie() {
+function ke() {
   return O(this), this.value;
 }
-function Oe(e, t) {
-  be() || Ne(), e.equal.call(e.wrapper, e.value, t) || (e.value = t, Le(e));
+function Le(e, t) {
+  Ce() || Ie(), e.equal.call(e.wrapper, e.value, t) || (e.value = t, Pe(e));
 }
-const ke = {
+const De = {
   ...A,
-  equal: H,
+  equal: G,
   value: void 0
 };
-function Le(e) {
-  e.version++, ye(), K(e);
+function Pe(e) {
+  e.version++, ze(), J(e);
 }
 /**
  * @license
@@ -301,128 +302,128 @@ function Le(e) {
  * limitations under the License.
  */
 const d = Symbol("node");
-var y;
+var C;
 ((e) => {
-  var t, s, o, r;
-  class l {
-    constructor(w, h = {}) {
+  var t, s, r, i;
+  class n {
+    constructor(y, h = {}) {
       N(this, s), L(this, t);
-      const p = Ee(w)[I];
+      const p = Oe(y)[I];
       if (this[d] = p, p.wrapper = this, h) {
-        const C = h.equals;
-        C && (p.equal = C), p.watched = h[e.subtle.watched], p.unwatched = h[e.subtle.unwatched];
+        const w = h.equals;
+        w && (p.equal = w), p.watched = h[e.subtle.watched], p.unwatched = h[e.subtle.unwatched];
       }
     }
     get() {
       if (!(0, e.isState)(this))
         throw new TypeError("Wrong receiver type for Signal.State.prototype.get");
-      return Ie.call(this[d]);
+      return ke.call(this[d]);
     }
-    set(w) {
+    set(y) {
       if (!(0, e.isState)(this))
         throw new TypeError("Wrong receiver type for Signal.State.prototype.set");
-      if (fe())
+      if (be())
         throw new Error("Writes to signals not permitted during Watcher callback");
       const h = this[d];
-      Oe(h, w);
+      Le(h, y);
     }
   }
-  t = d, s = /* @__PURE__ */ new WeakSet(), e.isState = (c) => typeof c == "object" && P(s, c), e.State = l;
-  class z {
+  t = d, s = /* @__PURE__ */ new WeakSet(), e.isState = (u) => typeof u == "object" && D(s, u), e.State = n;
+  class m {
     // Create a Signal which evaluates to the value returned by the callback.
     // Callback is called with this signal as the parameter.
-    constructor(w, h) {
-      N(this, r), L(this, o);
-      const p = Se(w)[I];
+    constructor(y, h) {
+      N(this, i), L(this, r);
+      const p = $e(y)[I];
       if (p.consumerAllowSignalWrites = !0, this[d] = p, p.wrapper = this, h) {
-        const C = h.equals;
-        C && (p.equal = C), p.watched = h[e.subtle.watched], p.unwatched = h[e.subtle.unwatched];
+        const w = h.equals;
+        w && (p.equal = w), p.watched = h[e.subtle.watched], p.unwatched = h[e.subtle.unwatched];
       }
     }
     get() {
       if (!(0, e.isComputed)(this))
         throw new TypeError("Wrong receiver type for Signal.Computed.prototype.get");
-      return X(this[d]);
+      return Q(this[d]);
     }
   }
-  o = d, r = /* @__PURE__ */ new WeakSet(), e.isComputed = (c) => typeof c == "object" && P(r, c), e.Computed = z, ((c) => {
-    var w, h, _, p;
-    function C(a) {
-      let n, i = null;
+  r = d, i = /* @__PURE__ */ new WeakSet(), e.isComputed = (u) => typeof u == "object" && D(i, u), e.Computed = m, ((u) => {
+    var y, h, _, p;
+    function w(l) {
+      let a, o = null;
       try {
-        i = S(null), n = a();
+        o = S(null), a = l();
       } finally {
-        S(i);
+        S(o);
       }
-      return n;
+      return a;
     }
-    c.untrack = C;
-    function Y(a) {
-      var n;
-      if (!(0, e.isComputed)(a) && !(0, e.isWatcher)(a))
+    u.untrack = w;
+    function X(l) {
+      var a;
+      if (!(0, e.isComputed)(l) && !(0, e.isWatcher)(l))
         throw new TypeError("Called introspectSources without a Computed or Watcher argument");
-      return ((n = a[d].producerNode) == null ? void 0 : n.map((i) => i.wrapper)) ?? [];
+      return ((a = l[d].producerNode) == null ? void 0 : a.map((o) => o.wrapper)) ?? [];
     }
-    c.introspectSources = Y;
-    function Z(a) {
-      var n;
-      if (!(0, e.isComputed)(a) && !(0, e.isState)(a))
+    u.introspectSources = X;
+    function Y(l) {
+      var a;
+      if (!(0, e.isComputed)(l) && !(0, e.isState)(l))
         throw new TypeError("Called introspectSinks without a Signal argument");
-      return ((n = a[d].liveConsumerNode) == null ? void 0 : n.map((i) => i.wrapper)) ?? [];
+      return ((a = l[d].liveConsumerNode) == null ? void 0 : a.map((o) => o.wrapper)) ?? [];
     }
-    c.introspectSinks = Z;
-    function ee(a) {
-      if (!(0, e.isComputed)(a) && !(0, e.isState)(a))
+    u.introspectSinks = Y;
+    function Z(l) {
+      if (!(0, e.isComputed)(l) && !(0, e.isState)(l))
         throw new TypeError("Called hasSinks without a Signal argument");
-      const n = a[d].liveConsumerNode;
-      return n ? n.length > 0 : !1;
+      const a = l[d].liveConsumerNode;
+      return a ? a.length > 0 : !1;
     }
-    c.hasSinks = ee;
-    function te(a) {
-      if (!(0, e.isComputed)(a) && !(0, e.isWatcher)(a))
+    u.hasSinks = Z;
+    function ee(l) {
+      if (!(0, e.isComputed)(l) && !(0, e.isWatcher)(l))
         throw new TypeError("Called hasSources without a Computed or Watcher argument");
-      const n = a[d].producerNode;
-      return n ? n.length > 0 : !1;
+      const a = l[d].producerNode;
+      return a ? a.length > 0 : !1;
     }
-    c.hasSources = te;
-    class se {
+    u.hasSources = ee;
+    class te {
       // When a (recursive) source of Watcher is written to, call this callback,
       // if it hasn't already been called since the last `watch` call.
       // No signals may be read or written during the notify.
-      constructor(n) {
-        N(this, h), N(this, _), L(this, w);
-        let i = Object.create(A);
-        i.wrapper = this, i.consumerMarkedDirty = n, i.consumerIsAlwaysLive = !0, i.consumerAllowSignalWrites = !1, i.producerNode = [], this[d] = i;
+      constructor(a) {
+        N(this, h), N(this, _), L(this, y);
+        let o = Object.create(A);
+        o.wrapper = this, o.consumerMarkedDirty = a, o.consumerIsAlwaysLive = !0, o.consumerAllowSignalWrites = !1, o.producerNode = [], this[d] = o;
       }
       // Add these signals to the Watcher's set, and set the watcher to run its
       // notify callback next time any signal in the set (or one of its dependencies) changes.
       // Can be called with no arguments just to reset the "notified" state, so that
       // the notify callback will be invoked again.
-      watch(...n) {
+      watch(...a) {
         if (!(0, e.isWatcher)(this))
           throw new TypeError("Called unwatch without Watcher receiver");
-        B(this, _, p).call(this, n);
-        const i = this[d];
-        i.dirty = !1;
-        const g = S(i);
-        for (const T of n)
+        B(this, _, p).call(this, a);
+        const o = this[d];
+        o.dirty = !1;
+        const v = S(o);
+        for (const T of a)
           O(T[d]);
-        S(g);
+        S(v);
       }
       // Remove these signals from the watched set (e.g., for an effect which is disposed)
-      unwatch(...n) {
+      unwatch(...a) {
         if (!(0, e.isWatcher)(this))
           throw new TypeError("Called unwatch without Watcher receiver");
-        B(this, _, p).call(this, n);
-        const i = this[d];
-        $(i);
-        for (let g = i.producerNode.length - 1; g >= 0; g--)
-          if (n.includes(i.producerNode[g].wrapper)) {
-            k(i.producerNode[g], i.producerIndexOfThis[g]);
-            const T = i.producerNode.length - 1;
-            if (i.producerNode[g] = i.producerNode[T], i.producerIndexOfThis[g] = i.producerIndexOfThis[T], i.producerNode.length--, i.producerIndexOfThis.length--, i.nextProducerIndex--, g < i.producerNode.length) {
-              const ie = i.producerIndexOfThis[g], M = i.producerNode[g];
-              U(M), M.liveConsumerIndexOfThis[ie] = g;
+        B(this, _, p).call(this, a);
+        const o = this[d];
+        x(o);
+        for (let v = o.producerNode.length - 1; v >= 0; v--)
+          if (a.includes(o.producerNode[v].wrapper)) {
+            k(o.producerNode[v], o.producerIndexOfThis[v]);
+            const T = o.producerNode.length - 1;
+            if (o.producerNode[v] = o.producerNode[T], o.producerIndexOfThis[v] = o.producerIndexOfThis[T], o.producerNode.length--, o.producerIndexOfThis.length--, o.nextProducerIndex--, v < o.producerNode.length) {
+              const ie = o.producerIndexOfThis[v], U = o.producerNode[v];
+              M(U), U.liveConsumerIndexOfThis[ie] = v;
             }
           }
       }
@@ -431,44 +432,44 @@ var y;
       getPending() {
         if (!(0, e.isWatcher)(this))
           throw new TypeError("Called getPending without Watcher receiver");
-        return this[d].producerNode.filter((i) => i.dirty).map((i) => i.wrapper);
+        return this[d].producerNode.filter((o) => o.dirty).map((o) => o.wrapper);
       }
     }
-    w = d, h = /* @__PURE__ */ new WeakSet(), _ = /* @__PURE__ */ new WeakSet(), p = function(a) {
-      for (const n of a)
-        if (!(0, e.isComputed)(n) && !(0, e.isState)(n))
+    y = d, h = /* @__PURE__ */ new WeakSet(), _ = /* @__PURE__ */ new WeakSet(), p = function(l) {
+      for (const a of l)
+        if (!(0, e.isComputed)(a) && !(0, e.isState)(a))
           throw new TypeError("Called watch/unwatch without a Computed or State argument");
-    }, e.isWatcher = (a) => P(h, a), c.Watcher = se;
-    function re() {
-      var a;
-      return (a = ve()) == null ? void 0 : a.wrapper;
+    }, e.isWatcher = (l) => D(h, l), u.Watcher = te;
+    function se() {
+      var l;
+      return (l = ye()) == null ? void 0 : l.wrapper;
     }
-    c.currentComputed = re, c.watched = Symbol("watched"), c.unwatched = Symbol("unwatched");
+    u.currentComputed = se, u.watched = Symbol("watched"), u.unwatched = Symbol("unwatched");
   })(e.subtle || (e.subtle = {}));
-})(y || (y = {}));
+})(C || (C = {}));
 /**
  * @license
  * Copyright 2023 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const Pe = Symbol("SignalWatcherBrand"), We = new FinalizationRegistry(({ watcher: e, signal: t }) => {
+const We = Symbol("SignalWatcherBrand"), Re = new FinalizationRegistry(({ watcher: e, signal: t }) => {
   e.unwatch(t);
 }), F = /* @__PURE__ */ new WeakMap();
-function De(e) {
-  return e[Pe] === !0 ? (console.warn("SignalWatcher should not be applied to the same class more than once."), e) : class extends e {
+function qe(e) {
+  return e[We] === !0 ? (console.warn("SignalWatcher should not be applied to the same class more than once."), e) : class extends e {
     constructor() {
-      super(...arguments), this._$St = new y.State(0), this._$Si = !1, this._$So = !0, this._$Sh = /* @__PURE__ */ new Set();
+      super(...arguments), this._$St = new C.State(0), this._$Si = !1, this._$So = !0, this._$Sh = /* @__PURE__ */ new Set();
     }
     _$Sl() {
       if (this._$Su !== void 0) return;
-      this._$Sv = new y.Computed(() => {
+      this._$Sv = new C.Computed(() => {
         this._$St.get(), super.performUpdate();
       });
-      const t = this._$Su = new y.subtle.Watcher(function() {
+      const t = this._$Su = new C.subtle.Watcher(function() {
         const s = F.get(this);
         s !== void 0 && (s._$Si === !1 && s.requestUpdate(), this.watch());
       });
-      F.set(t, this), We.register(this, { watcher: t, signal: this._$Sv }), t.watch(this._$Sv);
+      F.set(t, this), Re.register(this, { watcher: t, signal: this._$Sv }), t.watch(this._$Sv);
     }
     _$Sp() {
       this._$Su !== void 0 && (this._$Su.unwatch(this._$Sv), this._$Sv = void 0, this._$Su = void 0);
@@ -483,8 +484,8 @@ function De(e) {
         this.isUpdatePending = !1, this._$Sh.clear();
       }
     }
-    requestUpdate(t, s, o) {
-      this._$So = !0, super.requestUpdate(t, s, o);
+    requestUpdate(t, s, r) {
+      this._$So = !0, super.requestUpdate(t, s, r);
     }
     connectedCallback() {
       super.connectedCallback(), this.requestUpdate();
@@ -509,17 +510,17 @@ function De(e) {
  * Copyright 2023 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-y.State;
-y.Computed;
-const st = (e, t) => new y.State(e, t), rt = (e, t) => new y.Computed(e, t);
+C.State;
+C.Computed;
+const ot = (e, t) => new C.State(e, t), nt = (e, t) => new C.Computed(e, t);
 /**
  * @license
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-let Re = class extends Event {
-  constructor(t, s, o, r) {
-    super("context-request", { bubbles: !0, composed: !0 }), this.context = t, this.contextTarget = s, this.callback = o, this.subscribe = r ?? !1;
+let Ae = class extends Event {
+  constructor(t, s, r, i) {
+    super("context-request", { bubbles: !0, composed: !0 }), this.context = t, this.contextTarget = s, this.callback = r, this.subscribe = i ?? !1;
   }
 };
 /**
@@ -533,13 +534,13 @@ let Re = class extends Event {
  * SPDX-License-Identifier: BSD-3-Clause
  */
 class j {
-  constructor(t, s, o, r) {
-    if (this.subscribe = !1, this.provided = !1, this.value = void 0, this.t = (l, z) => {
-      this.unsubscribe && (this.unsubscribe !== z && (this.provided = !1, this.unsubscribe()), this.subscribe || this.unsubscribe()), this.value = l, this.host.requestUpdate(), this.provided && !this.subscribe || (this.provided = !0, this.callback && this.callback(l, z)), this.unsubscribe = z;
+  constructor(t, s, r, i) {
+    if (this.subscribe = !1, this.provided = !1, this.value = void 0, this.t = (n, m) => {
+      this.unsubscribe && (this.unsubscribe !== m && (this.provided = !1, this.unsubscribe()), this.subscribe || this.unsubscribe()), this.value = n, this.host.requestUpdate(), this.provided && !this.subscribe || (this.provided = !0, this.callback && this.callback(n, m)), this.unsubscribe = m;
     }, this.host = t, s.context !== void 0) {
-      const l = s;
-      this.context = l.context, this.callback = l.callback, this.subscribe = l.subscribe ?? !1;
-    } else this.context = s, this.callback = o, this.subscribe = r ?? !1;
+      const n = s;
+      this.context = n.context, this.callback = n.callback, this.subscribe = n.subscribe ?? !1;
+    } else this.context = s, this.callback = r, this.subscribe = i ?? !1;
     this.host.addController(this);
   }
   hostConnected() {
@@ -549,7 +550,7 @@ class j {
     this.unsubscribe && (this.unsubscribe(), this.unsubscribe = void 0);
   }
   dispatchRequest() {
-    this.host.dispatchEvent(new Re(this.context, this.host, this.t, this.subscribe));
+    this.host.dispatchEvent(new Ae(this.context, this.host, this.t, this.subscribe));
   }
 }
 /**
@@ -557,37 +558,52 @@ class j {
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-function qe({ context: e, subscribe: t }) {
-  return (s, o) => {
-    typeof o == "object" ? o.addInitializer(function() {
-      new j(this, { context: e, callback: (r) => {
-        s.set.call(this, r);
+function Me({ context: e, subscribe: t }) {
+  return (s, r) => {
+    typeof r == "object" ? r.addInitializer(function() {
+      new j(this, { context: e, callback: (i) => {
+        s.set.call(this, i);
       }, subscribe: t });
-    }) : s.constructor.addInitializer((r) => {
-      new j(r, { context: e, callback: (l) => {
-        r[o] = l;
+    }) : s.constructor.addInitializer((i) => {
+      new j(i, { context: e, callback: (n) => {
+        i[r] = n;
       }, subscribe: t });
     });
   };
 }
-const Ae = Symbol("slot-store-context"), Ue = ":host{font-family:var(--luzmo-display-settings-font-family, var(--luzmo-font-family));font-size:var(--luzmo-display-settings-font-size, var(--display-settings-font-size));color:var(--luzmo-display-settings-font-color, var(--luzmo-font-color))}.settings-container{display:flex;flex-direction:column;gap:var(--luzmo-spacing-2)}.settings-row{display:flex;justify-content:flex-start;align-items:center;gap:var(--luzmo-display-settings-gap, var(--display-settings-gap))}luzmo-divider{margin:var(--luzmo-display-settings-ids-container-vertical-margin, var(--display-settings-ids-container-vertical-margin)) 0}.setting{display:flex;align-items:center}.label-action-container{display:flex;align-items:center;justify-content:space-between;gap:var(--luzmo-display-settings-info-to-remove-icon-gap, var(--display-settings-info-to-remove-icon-gap))}.id-button,.remove-button{outline:none;cursor:pointer;border:none;background:none;font-size:var(--luzmo-display-settings-font-size, var(--display-settings-font-size));color:var(--luzmo-display-settings-font-color, var(--luzmo-font-color))}.remove-button{display:block;width:var(--luzmo-display-settings-remove-button-size, var(--display-settings-remove-button-size));height:var(--luzmo-display-settings-remove-button-size, var(--display-settings-remove-button-size));border-radius:var(--luzmo-display-settings-remove-button-border-radius, 50%)}.remove-button:hover{background-color:var(--luzmo-display-settings-remove-button-background-color-hover, var(--luzmo-background-color-hover))}.remove-button:active,.remove-button:focus{background-color:var(--luzmo-display-settings-remove-button-background-color-down, var(--luzmo-background-color-down))}.remove-button:focus-visible{box-shadow:0 0 0 var(--luzmo-display-settings-remove-button-indicator-thickness, var(--display-settings-remove-button-indicator-thickness)) var(--highcontrast-remove-button-indicator-color, var(--luzmo-display-settings-remove-button-indicator-color, var(--display-settings-remove-button-indicator-color)))}.ids-container{display:flex;flex-direction:column;gap:var(--luzmo-display-settings-gap, var(--display-settings-gap));border-radius:50%}.id-label{text-transform:var(--luzmo-display-settings-id-label-text-transform, var(--display-settings-id-label-text-transform));font-size:var(--luzmo-display-settings-id-label-font-size, var(--display-settings-id-label-font-size));color:var(--luzmo-display-settings-id-label-color, var(--display-settings-id-label-color))}:host{--display-settings-font-family: var(--luzmo-font-family);--display-settings-id-label-text-transform: uppercase;--display-settings-id-label-color: var(--luzmo-secondary);--display-settings-remove-button-indicator-color: var(--luzmo-primary);--display-settings-remove-button-indicator-thickness: var( --luzmo-border-width )}:host{--display-settings-font-size: var(--luzmo-font-size);--display-settings-id-label-font-size: var(--luzmo-font-size-s);--display-settings-gap: var(--luzmo-spacing-3);--display-settings-ids-container-vertical-margin: var(--luzmo-spacing-4);--display-settings-info-to-remove-icon-gap: var(--luzmo-spacing-5);--display-settings-remove-button-size: var(--luzmo-component-height)}:host([size=s]){--display-settings-id-label-font-size: var(--luzmo-font-size-s);--display-settings-font-size: var(--luzmo-font-size-s);--display-settings-gap: var(--luzmo-spacing-3);--display-settings-ids-container-vertical-margin: var(--luzmo-spacing-3);--display-settings-info-to-remove-icon-gap: var(--luzmo-spacing-4);--display-settings-remove-button-size: var(--luzmo-component-height-s)}:host([size=l]){--display-settings-id-label-font-size: var(--luzmo-font-size);--display-settings-font-size: var(--luzmo-font-size-l);--display-settings-gap: var(--luzmo-spacing-4);--display-settings-ids-container-vertical-margin: var(--luzmo-spacing-5);--display-settings-info-to-remove-icon-gap: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-1) );--display-settings-remove-button-size: var(--luzmo-component-height-l)}:host([size=xl]){--display-settings-id-label-font-size: var(--luzmo-font-size-l);--display-settings-font-size: var(--luzmo-font-size-xl);--display-settings-gap: var(--luzmo-spacing-5);--display-settings-ids-container-vertical-margin: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-1) );--display-settings-info-to-remove-icon-gap: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-2) );--display-settings-remove-button-size: var(--luzmo-component-height-xl)}";
-var Me = Object.defineProperty, v = (e, t, s, o) => {
-  for (var r = void 0, l = e.length - 1, z; l >= 0; l--)
-    (z = e[l]) && (r = z(t, s, r) || r);
-  return r && Me(t, s, r), r;
+const Ue = Symbol("slot-store-context"), Ve = ":host{font-family:var(--luzmo-display-settings-font-family, var(--luzmo-font-family));font-size:var(--luzmo-display-settings-font-size, var(--display-settings-font-size));color:var(--luzmo-display-settings-font-color, var(--luzmo-font-color))}.settings-container{display:flex;flex-direction:column;gap:var(--luzmo-spacing-2)}.settings-row{display:flex;justify-content:flex-start;align-items:center;gap:var(--luzmo-display-settings-gap, var(--display-settings-gap))}luzmo-divider{margin:var(--luzmo-display-settings-ids-container-vertical-margin, var(--display-settings-ids-container-vertical-margin)) 0}.setting{display:flex;align-items:center}.label-action-container{display:flex;align-items:center;justify-content:space-between;gap:var(--luzmo-display-settings-info-to-remove-icon-gap, var(--display-settings-info-to-remove-icon-gap))}.id-button,.remove-button{outline:none;cursor:pointer;border:none;background:none;font-size:var(--luzmo-display-settings-font-size, var(--display-settings-font-size));color:var(--luzmo-display-settings-font-color, var(--luzmo-font-color))}.remove-button{display:block;width:var(--luzmo-display-settings-remove-button-size, var(--display-settings-remove-button-size));height:var(--luzmo-display-settings-remove-button-size, var(--display-settings-remove-button-size));border-radius:var(--luzmo-display-settings-remove-button-border-radius, 50%)}.remove-button:hover{background-color:var(--luzmo-display-settings-remove-button-background-color-hover, var(--luzmo-background-color-hover))}.remove-button:active,.remove-button:focus{background-color:var(--luzmo-display-settings-remove-button-background-color-down, var(--luzmo-background-color-down))}.remove-button:focus-visible{box-shadow:0 0 0 var(--luzmo-display-settings-remove-button-indicator-thickness, var(--display-settings-remove-button-indicator-thickness)) var(--highcontrast-remove-button-indicator-color, var(--luzmo-display-settings-remove-button-indicator-color, var(--display-settings-remove-button-indicator-color)))}.ids-container{display:flex;flex-direction:column;gap:var(--luzmo-display-settings-gap, var(--display-settings-gap));border-radius:50%}.id-label{text-transform:var(--luzmo-display-settings-id-label-text-transform, var(--display-settings-id-label-text-transform));font-size:var(--luzmo-display-settings-id-label-font-size, var(--display-settings-id-label-font-size));color:var(--luzmo-display-settings-id-label-color, var(--display-settings-id-label-color))}.example-container{line-height:var(--luzmo-display-settings-example-height, var(--display-settings-example-height));font-size:var(--luzmo-display-settings-example-font-size, var(--display-settings-example-font-size));color:var(--luzmo-display-settings-example-color, var(--display-settings-example-color))}.example-container .example-label{font-weight:var(--luzmo-display-settings-example-label-font-weight, var(--display-settings-example-label-font-weight));color:var(--luzmo-display-settings-example-label-color, var(--display-settings-example-label-color))}.example-container .example-language{text-transform:uppercase;color:var(--luzmo-display-settings-example-language-color, var(--display-settings-example-language-color))}.example{font-style:italic;white-space:nowrap}:host{--display-settings-font-family: var(--luzmo-font-family);--display-settings-id-label-text-transform: uppercase;--display-settings-id-label-color: var(--luzmo-secondary);--display-settings-remove-button-indicator-color: var(--luzmo-primary);--display-settings-remove-button-indicator-thickness: var( --luzmo-border-width )}:host{--display-settings-font-size: var(--luzmo-font-size);--display-settings-id-label-font-size: var(--luzmo-font-size-s);--display-settings-gap: var(--luzmo-spacing-3);--display-settings-ids-container-vertical-margin: var(--luzmo-spacing-4);--display-settings-info-to-remove-icon-gap: var(--luzmo-spacing-5);--display-settings-remove-button-size: var(--luzmo-component-height)}:host([size=s]){--display-settings-id-label-font-size: var(--luzmo-font-size-s);--display-settings-font-size: var(--luzmo-font-size-s);--display-settings-gap: var(--luzmo-spacing-3);--display-settings-ids-container-vertical-margin: var(--luzmo-spacing-3);--display-settings-info-to-remove-icon-gap: var(--luzmo-spacing-4);--display-settings-remove-button-size: var(--luzmo-component-height-s)}:host([size=l]){--display-settings-id-label-font-size: var(--luzmo-font-size);--display-settings-font-size: var(--luzmo-font-size-l);--display-settings-gap: var(--luzmo-spacing-4);--display-settings-ids-container-vertical-margin: var(--luzmo-spacing-5);--display-settings-info-to-remove-icon-gap: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-1) );--display-settings-remove-button-size: var(--luzmo-component-height-l)}:host([size=xl]){--display-settings-id-label-font-size: var(--luzmo-font-size-l);--display-settings-font-size: var(--luzmo-font-size-xl);--display-settings-gap: var(--luzmo-spacing-5);--display-settings-ids-container-vertical-margin: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-1) );--display-settings-info-to-remove-icon-gap: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-2) );--display-settings-remove-button-size: var(--luzmo-component-height-xl)}:host{--display-settings-example-font-size: var(--luzmo-font-size);--display-settings-example-color: var(--luzmo-font-color);--display-settings-example-label-font-weight: bold;--display-settings-example-label-color: var(--luzmo-primary);--display-settings-example-language-color: var(--luzmo-primary)}:host{--display-settings-example-height: var(--luzmo-component-height)}:host([size=s]){--display-settings-example-height: var(--luzmo-component-height-s);--display-settings-example-font-size: var(--luzmo-font-size-s)}:host([size=l]){--display-settings-example-height: var(--luzmo-component-height-l);--display-settings-example-font-size: var(--luzmo-font-size)}:host([size=xl]){--display-settings-example-height: var(--luzmo-component-height-xl);--display-settings-example-font-size: var(--luzmo-font-size-l)}";
+var Be = Object.defineProperty, f = (e, t, s, r) => {
+  for (var i = void 0, n = e.length - 1, m; n >= 0; n--)
+    (m = e[n]) && (i = m(t, s, i) || i);
+  return i && Be(t, s, i), i;
 };
-class m extends De(
-  de(ce, {
-    validSizes: Object.values(pe)
+class g extends qe(
+  he(pe, {
+    validSizes: Object.values(me)
   })
 ) {
   constructor() {
     super(...arguments), this._loadDisplaySettings = new ne(this, {
-      task: async ([t, s, o]) => {
-        const r = [];
-        this.grandTotals && r.push("grandTotals"), this.periodOverPeriod && r.push("periodOverPeriod"), (s === "numeric" || s === "mixed" && (t == null ? void 0 : t.type) === "numeric") && r.push("numeric"), s !== "numeric" && (t == null ? void 0 : t.type) === "datetime" && r.push("datetime"), !["numeric", "mixed"].includes(s ?? "") && (t == null ? void 0 : t.type) === "numeric" && !this.binningDisabled && r.push("binning"), r.length > 0 && !o && (r.includes("numeric") && !this._settingsTypeLoaded.numeric ? (await import("./display-settings-numeric/index.js"), this._settingsTypeLoaded.numeric = !0, r.includes("periodOverPeriod") && !this._settingsTypeLoaded.periodOverPeriod && (await import("./display-settings-period-over-period/index.js"), this._settingsTypeLoaded.periodOverPeriod = !0)) : r.includes("datetime") && !this._settingsTypeLoaded.datetime ? (await import("./display-settings-datetime/index.js"), this._settingsTypeLoaded.datetime = !0) : r.includes("binning") && !this._settingsTypeLoaded.binning ? (await import("./display-settings-binning/index.js"), this._settingsTypeLoaded.binning = !0) : r.includes("grandTotals") && !this._settingsTypeLoaded.grandTotals && (await import("./display-settings-grand-totals/index.js"), this._settingsTypeLoaded.grandTotals = !0));
+      task: async ([
+        t,
+        s,
+        r,
+        i
+      ]) => {
+        var m, u, y;
+        const n = [];
+        this.grandTotals && n.push("grandTotals"), r && n.push("periodOverPeriod"), (t === "numeric" || t === "mixed" && ((m = this._currentSlotContent) == null ? void 0 : m.type) === "numeric") && n.push("numeric"), t !== "numeric" && ((u = this._currentSlotContent) == null ? void 0 : u.type) === "datetime" && n.push("datetime"), !["numeric", "mixed"].includes(t ?? "") && ((y = this._currentSlotContent) == null ? void 0 : y.type) === "numeric" && !i && n.push("binning"), r && !this._settingsTypeLoaded.periodOverPeriod && (await import("./display-settings-period-over-period/index.js"), this._settingsTypeLoaded.periodOverPeriod = !0), n.length > 0 && !s && (n.includes("numeric") && !this._settingsTypeLoaded.numeric ? (await import("./display-settings-numeric/index.js"), this._settingsTypeLoaded.numeric = !0) : n.includes("datetime") && !this._settingsTypeLoaded.datetime ? (await import("./display-settings-datetime/index.js"), this._settingsTypeLoaded.datetime = !0) : n.includes("binning") && !this._settingsTypeLoaded.binning ? (await import("./display-settings-binning/index.js"), this._settingsTypeLoaded.binning = !0) : n.includes("grandTotals") && !this._settingsTypeLoaded.grandTotals && (await import("./display-settings-grand-totals/index.js"), this._settingsTypeLoaded.grandTotals = !0));
       },
-      args: () => [this.slotContent, this.slotType, this.hideDisplaySettings]
+      args: () => {
+        var t;
+        return [
+          this.slotType,
+          this.hideDisplaySettings,
+          (t = this._store) == null ? void 0 : t.periodOverPeriodEnabled.get(),
+          this.binningDisabled,
+          this.slotContent
+        ];
+      }
     }), this.language = "en", this.contentLanguage = "en", this.slotType = "numeric", this.slotContent = {}, this._showIds = !1, this.measureColumns = [], this._settingsTypeLoaded = {
       binning: !1,
       datetime: !1,
@@ -598,12 +614,12 @@ class m extends De(
     }, this._currentSlotContent = {};
   }
   static get styles() {
-    return [oe(Ue)];
+    return [re(Ve)];
   }
   willUpdate() {
-    var s, o;
-    const t = (s = this._store) == null ? void 0 : s.activeSlotContents.get();
-    this.periodOverPeriod = (o = this._store) == null ? void 0 : o.periodOverPeriodEnabled.get(), t && t !== this._currentSlotContent && (this._currentSlotContent = structuredClone(t));
+    var r;
+    const t = (r = this._store) == null ? void 0 : r.activeSlotContents.get(), s = this._store.periodOverPeriodEnabled.get();
+    s !== this.periodOverPeriod && (this.periodOverPeriod = s), t && t !== this._currentSlotContent && (this._currentSlotContent = structuredClone(t));
   }
   _onSlotContentChange(t) {
     t.stopPropagation(), t.preventDefault(), this._currentSlotContent = structuredClone(t.detail.slotContent), this._sendEvent(), this.requestUpdate();
@@ -638,8 +654,28 @@ class m extends De(
   _toggleIds() {
     this._showIds = !this._showIds;
   }
+  _renderExampleRow() {
+    var m;
+    const t = this.slotType === "numeric" || this.slotType === "mixed" && this._currentSlotContent.type === "numeric", s = this.slotType !== "datetime" && this._currentSlotContent.type === "datetime";
+    if (!(t || s))
+      return oe;
+    const r = !this._currentSlotContent.datetimeDisplayMode || this._currentSlotContent.datetimeDisplayMode === "default", i = t ? 1234.56 : r ? /* @__PURE__ */ new Date() : 1, n = de(
+      {
+        ...this._currentSlotContent,
+        type: t ? "numeric" : "datetime"
+      },
+      {
+        locale: this.contentLanguage,
+        level: (m = this._currentSlotContent) == null ? void 0 : m.level
+      }
+    )(i);
+    return b`<div class="settings-row example-container">
+      <span class="example-label">Example:</span>
+      <span class="example">${n}</span>
+    </div>`;
+  }
   _renderDisplaySettings() {
-    return f`<div class="settings-container">
+    return b`<div class="settings-container">
         <div class="settings-row">
           <div class="setting">
             <div class="label-container">
@@ -656,16 +692,16 @@ class m extends De(
             </div>
             <div class="label-action-container">
               <button class="id-button" @click=${this._toggleIds}>
-                ${V(le)}
+                ${V(ue)}
                 <luzmo-tooltip self-managed placement="top" size=${this.size}>
                   Show dataset and column id's
                 </luzmo-tooltip>
               </button>
-              ${this.showRemoveButton ? f`<button
+              ${this.showRemoveButton ? b`<button
                     class="remove-button"
                     @click=${this._removeEvent}
                   >
-                    ${V(ue)}
+                    ${V(ce)}
                     <luzmo-tooltip
                       self-managed
                       placement="top"
@@ -677,40 +713,41 @@ class m extends De(
             </div>
           </div>
         </div>
-        ${this.grandTotals ? f`<luzmo-display-settings-grand-totals
+        ${this.grandTotals ? b`<luzmo-display-settings-grand-totals
               .language=${this.language}
               .slotContent=${this._currentSlotContent}
               .size=${this.size}
               @slot-content-changed=${this._onSlotContentChange}
             ></luzmo-display-settings-grand-totals>` : ""}
-        ${this.slotType === "numeric" || this.slotType === "mixed" && this.slotContent.type === "numeric" ? f`<luzmo-display-settings-numeric
+        ${this.slotType === "numeric" || this.slotType === "mixed" && this._currentSlotContent.type === "numeric" ? b`<luzmo-display-settings-numeric
               .language=${this.language}
               .slotContent=${this._currentSlotContent}
               .size=${this.size}
               .measureColumns=${this.measureColumns}
               @slot-content-changed=${this._onSlotContentChange}
             ></luzmo-display-settings-numeric>` : ""}
-        ${this.slotType !== "numeric" && this.slotContent.type === "datetime" ? f`<luzmo-display-settings-datetime
+        ${this.slotType !== "numeric" && this._currentSlotContent.type === "datetime" ? b`<luzmo-display-settings-datetime
               .language=${this.language}
               .contentLanguage=${this.contentLanguage}
               .slotContent=${this._currentSlotContent}
               .size=${this.size}
               @slot-content-changed=${this._onSlotContentChange}
             ></luzmo-display-settings-datetime>` : ""}
-        ${!["numeric", "mixed"].includes(this.slotType ?? "") && this.slotContent.type === "numeric" && !this.binningDisabled ? f`<luzmo-display-settings-binning
+        ${!["numeric", "mixed"].includes(this.slotType ?? "") && this._currentSlotContent.type === "numeric" && !this.binningDisabled ? b`<luzmo-display-settings-binning
               .language=${this.language}
               .slotContent=${this._currentSlotContent}
               .size=${this.size}
               @slot-content-changed=${this._onSlotContentChange}
             ></luzmo-display-settings-binning>` : ""}
-        ${this.periodOverPeriod ? f`<luzmo-display-settings-period-over-period
+        ${this.periodOverPeriod ? b`<luzmo-display-settings-period-over-period
               .language=${this.language}
               .slotContent=${this._currentSlotContent}
               .size=${this.size}
               @slot-content-changed=${this._onSlotContentChange}
             ></luzmo-display-settings-period-over-period>` : ""}
+        ${this._renderExampleRow()}
       </div>
-      ${this._showIds ? f` <luzmo-divider></luzmo-divider>
+      ${this._showIds ? b` <luzmo-divider></luzmo-divider>
             <div class="ids-container">
               <div>
                 <span class="id-label">Column: </span>
@@ -727,7 +764,7 @@ class m extends De(
   }
   render() {
     return this._loadDisplaySettings.render({
-      pending: () => f`<luzmo-progress-circle
+      pending: () => b`<luzmo-progress-circle
           indeterminate
           .size=${this.size}
         ></luzmo-progress-circle>`,
@@ -735,53 +772,57 @@ class m extends De(
       error: () => this._renderDisplaySettings()
     });
   }
+  disconnectedCallback() {
+    var t, s, r;
+    (t = super.disconnectedCallback) == null || t.call(this), (r = (s = this._loadDisplaySettings).abort) == null || r.call(s);
+  }
 }
-v([
-  b({ type: String })
-], m.prototype, "language");
-v([
-  b({ type: String, attribute: "content-language" })
-], m.prototype, "contentLanguage");
-v([
-  b({ type: Boolean, attribute: "hide-display-settings" })
-], m.prototype, "hideDisplaySettings");
-v([
-  b({ type: Boolean, attribute: "binning-disabled" })
-], m.prototype, "binningDisabled");
-v([
-  b({ type: Boolean, attribute: "grand-totals" })
-], m.prototype, "grandTotals");
-v([
-  G()
-], m.prototype, "periodOverPeriod");
-v([
-  b({ type: Boolean, attribute: "show-remove-button" })
-], m.prototype, "showRemoveButton");
-v([
-  b({ type: String, attribute: "slot-type" })
-], m.prototype, "slotType");
-v([
-  b()
-], m.prototype, "slotContent");
-v([
-  G()
-], m.prototype, "_showIds");
-v([
-  b({ type: Array, reflect: !1 })
-], m.prototype, "measureColumns");
-v([
-  ae("luzmo-multi-language-field")
-], m.prototype, "_multiLanguageFieldElement");
-v([
-  qe({ context: Ae, subscribe: !0 })
-], m.prototype, "_store");
-customElements.get("luzmo-display-settings") || customElements.define("luzmo-display-settings", m);
+f([
+  z({ type: String })
+], g.prototype, "language");
+f([
+  z({ type: String, attribute: "content-language" })
+], g.prototype, "contentLanguage");
+f([
+  z({ type: Boolean, attribute: "hide-display-settings" })
+], g.prototype, "hideDisplaySettings");
+f([
+  z({ type: Boolean, attribute: "binning-disabled" })
+], g.prototype, "binningDisabled");
+f([
+  z({ type: Boolean, attribute: "grand-totals" })
+], g.prototype, "grandTotals");
+f([
+  z({ type: Boolean })
+], g.prototype, "periodOverPeriod");
+f([
+  z({ type: Boolean, attribute: "show-remove-button" })
+], g.prototype, "showRemoveButton");
+f([
+  z({ type: String, attribute: "slot-type" })
+], g.prototype, "slotType");
+f([
+  z()
+], g.prototype, "slotContent");
+f([
+  ae()
+], g.prototype, "_showIds");
+f([
+  z({ type: Array, reflect: !1 })
+], g.prototype, "measureColumns");
+f([
+  le("luzmo-multi-language-field")
+], g.prototype, "_multiLanguageFieldElement");
+f([
+  Me({ context: Ue, subscribe: !0 })
+], g.prototype, "_store");
+customElements.get("luzmo-display-settings") || customElements.define("luzmo-display-settings", g);
 export {
-  m as L,
-  Re as a,
-  qe as c,
-  De as e,
-  rt as i,
-  st as r,
-  Ae as s
+  g as L,
+  Ae as a,
+  Me as c,
+  qe as e,
+  nt as i,
+  ot as r,
+  Ue as s
 };