@orangelogic/design-system 2.78.0 → 2.79.0-ci.2

package/library/chunks/{dialog.BdXQkCKY.js → dialog.B1nzoJak.js}

@@ -1,188 +1,40 @@
-import { n as r, C as z } from "./lib-cortex-element.CVMmyPMC.js";
-import { c as S } from "./component.styles.DMSLciL5.js";
-import { O, C as D, H, z as B, o as L } from "./overlayscrollbars.XhGWx9Zk.js";
+import { n as r, C as k } from "./lib-cortex-element.CVMmyPMC.js";
+import { c as S } from "./component.styles.CRO4Odto.js";
+import { O, C as D, H, z as B, o as $ } from "./overlayscrollbars.BMav4RQ4.js";
 import { a as c, s as p } from "./animate.El-MpOws.js";
-import { c as P } from "./custom-element.L4WJXn1j.js";
+import { c as A } from "./custom-element.L4WJXn1j.js";
 import { w as x } from "./event.mFzZi4sr.js";
-import { L as $ } from "./i18n.BUW7B9hr.js";
-import { M as A } from "./modal.U1QltQKe.js";
+import { L } from "./i18n.BUW7B9hr.js";
+import { M as P } from "./modal.U1QltQKe.js";
 import { l as w, u as _ } from "./scroll.xtO5yojm.js";
 import { H as E } from "./slot.j5oheLJC.js";
-import { w as k } from "./watch.BCJD77bD.js";
+import { w as z } from "./watch.BCJD77bD.js";
 import { i as R, x as y, E as W } from "./lit-element.jLBm65_O.js";
-import { r as g } from "./state.CSDxrqLd.js";
-import { e as m } from "./query.BBf1UFkC.js";
+import { r as m } from "./state.CSDxrqLd.js";
+import { e as g } from "./query.BBf1UFkC.js";
 import { e as v } from "./class-map.BiVq-cVR.js";
 import { o as C } from "./if-defined.BRoBj_Rp.js";
 import { o as q } from "./style-map.llVFPd__.js";
 import { n as b } from "./when.Dr1es41R.js";
 import { s as u, g as h } from "./animation-registry.HmpwNuGH.js";
 import F from "../components/divider.js";
-import { C as I } from "./icon-button.C3eqeQl9.js";
-import T from "../components/popup.js";
+import { C as I } from "./icon-button.BuhCp--_.js";
+import U from "../components/popup.js";
 var l = /* @__PURE__ */ ((e) => (e.Both = "both", e.Footer = "footer", e.Header = "header", e.None = "none", e))(l || {});
-const U = R`
-  :host {
-    --width: 31rem;
-    --header-spacing: var(--cx-spacing-small) var(--cx-spacing-large);
-    --body-spacing: var(--cx-spacing-medium) var(--cx-spacing-large);
-    --divider-spacing: 0;
-    --footer-spacing: var(--cx-spacing-medium);
-    --max-width: 100%;
-    --max-height: 100%;
-    --overlay-background-color: var(--cx-overlay-background-color);
-
-    display: contents;
-  }
-
-  .dialog {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .dialog--absolute {
-    position: absolute;
-  }
-
-  .dialog__panel {
-    display: flex;
-    flex-direction: column;
-    width: var(--width);
-    height: var(--dialog-height, auto);
-    background-color: var(--cx-panel-background-color);
-    border-radius: var(--cx-border-radius-medium);
-    box-shadow: var(--cx-shadow-x-large);
-    overflow: hidden;
-    max-width: calc(var(--max-width) - var(--cx-spacing-2x-large));
-    max-height: calc(var(--max-height) - var(--cx-spacing-2x-large));
-  }
-
-  .dialog__panel:focus {
-    outline: none;
-  }
-
-  /* Ensure there's enough vertical padding for phones that don't update vh when chrome appears (e.g. iPhone) */
-  @media screen and (max-width: 420px) {
-    .dialog__panel {
-      max-height: 80vh;
-    }
-  }
-
-  .dialog--open .dialog__panel {
-    display: flex;
-    opacity: 1;
-  }
-
-  .dialog__header {
-    flex: 0 0 auto;
-    display: flex;
-    padding: var(--header-spacing);
-  }
-
-  .dialog__header-divider,
-  .dialog__footer-divider {
-    --spacing: 0;
-    padding: var(--divider-spacing);
-  }
-
-  .dialog__title {
-    display: flex;
-    align-items: center;
-    flex: 1 1 auto;
-    font: inherit;
-    font-family: var(--cx-font-sans);
-    font-size: var(--cx-font-size-large);
-    font-weight: var(--cx-font-weight-regular);
-    line-height: var(--cx-line-height-large);
-    margin: 0;
-  }
-
-  .dialog__header-actions {
-    flex-shrink: 0;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: end;
-    gap: var(--cx-spacing-2x-small);
-  }
-
-  .dialog__header-actions cx-icon-button,
-  .dialog__header-actions ::slotted(cx-icon-button) {
-    flex: 0 0 auto;
-    display: flex;
-    align-items: center;
-    font-size: var(--cx-font-size-3x-large);
-  }
-
-  .dialog__body {
-    flex: 1 1 auto;
-    display: block;
-    padding: var(--body-spacing);
-    overflow: auto;
-    -webkit-overflow-scrolling: touch;
-    font-size: var(--cx-font-size-medium);
-    font-weight: var(--cx-font-weight-regular);
-    line-height: var(--cx-line-height-small);
-    position: relative;
-    /* https://link.orangelogic.com/Tasks/41SL03 */
-    z-index: 2;
-  }
-
-  .dialog--overlay-scrollbar .dialog__body {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .dialog__footer {
-    flex: 0 0 auto;
-    text-align: right;
-    padding: var(--footer-spacing);
-    position: relative;
-    z-index: 1;
-  }
-
-  .dialog__footer ::slotted(cx-button:not(:first-of-type)) {
-    margin-inline-start: var(--cx-spacing-x-small);
-  }
-
-  .dialog:not(.dialog--has-footer) .dialog__footer {
-    display: none;
-  }
-
-  @media (forced-colors: active) {
-    .dialog__panel {
-      border: solid 1px var(--cx-color-neutral-0);
-    }
-  }
-
-  .dialog__overlay {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: var(--overlay-background-color);
-    opacity: 0;
-    pointer-events: none;
-    z-index: 1;
-  }
-
-  .dialog--open .dialog__overlay {
-    opacity: 1;
-    pointer-events: auto;
-  }
-`;
-var j = Object.defineProperty, M = Object.getOwnPropertyDescriptor, i = (e, o, a, n) => {
-  for (var s = n > 1 ? void 0 : n ? M(o, a) : o, d = e.length - 1, f; d >= 0; d--)
+const j = R`:host{--width:31rem;--header-spacing:var(--cx-spacing-small) var(--cx-spacing-large);--body-spacing:var(--cx-spacing-medium) var(--cx-spacing-large);--divider-spacing:0;--footer-spacing:var(--cx-spacing-medium);--max-width:100%;--max-height:100%;--overlay-background-color:var(--cx-overlay-background-color);display:contents}.dialog{justify-content:center;align-items:center;display:flex}.dialog--absolute{position:absolute}.dialog__panel{width:var(--width);height:var(--dialog-height,auto);background-color:var(--cx-panel-background-color);border-radius:var(--cx-border-radius-medium);box-shadow:var(--cx-shadow-x-large);max-width:calc(var(--max-width) - var(--cx-spacing-2x-large));max-height:calc(var(--max-height) - var(--cx-spacing-2x-large));flex-direction:column;display:flex;overflow:hidden}.dialog__panel:focus{outline:none}@media screen and (width<=420px){.dialog__panel{max-height:80vh}}.dialog--open .dialog__panel{opacity:1;display:flex}.dialog__header{padding:var(--header-spacing);flex:none;display:flex}.dialog__header-divider,.dialog__footer-divider{--spacing:0;padding:var(--divider-spacing)}.dialog__title{font:inherit;font-family:var(--cx-font-sans);font-size:var(--cx-font-size-large);font-weight:var(--cx-font-weight-regular);line-height:var(--cx-line-height-large);flex:auto;align-items:center;margin:0;display:flex}.dialog__header-actions{justify-content:end;gap:var(--cx-spacing-2x-small);flex-wrap:wrap;flex-shrink:0;display:flex}.dialog__header-actions cx-icon-button,.dialog__header-actions ::slotted(cx-icon-button){font-size:var(--cx-font-size-3x-large);flex:none;align-items:center;display:flex}.dialog__body{padding:var(--body-spacing);-webkit-overflow-scrolling:touch;font-size:var(--cx-font-size-medium);font-weight:var(--cx-font-weight-regular);line-height:var(--cx-line-height-small);z-index:2;flex:auto;display:block;position:relative;overflow:auto}.dialog--overlay-scrollbar .dialog__body{flex-direction:column;display:flex}.dialog__footer{text-align:right;padding:var(--footer-spacing);z-index:1;flex:none;position:relative}.dialog__footer ::slotted(cx-button:not(:first-of-type)){margin-inline-start:var(--cx-spacing-x-small)}.dialog:not(.dialog--has-footer) .dialog__footer{display:none}@media (forced-colors:active){.dialog__panel{border:solid 1px var(--cx-color-neutral-0)}}.dialog__overlay{background-color:var(--overlay-background-color);opacity:0;pointer-events:none;z-index:1;justify-content:center;align-items:center;display:flex}.dialog--open .dialog__overlay{opacity:1;pointer-events:auto}`;
+var M = Object.defineProperty, T = Object.getOwnPropertyDescriptor, i = (e, o, a, n) => {
+  for (var s = n > 1 ? void 0 : n ? T(o, a) : o, d = e.length - 1, f; d >= 0; d--)
     (f = e[d]) && (s = (n ? f(o, a, s) : f(s)) || s);
-  return n && s && j(o, a, s), s;
+  return n && s && M(o, a, s), s;
 };
 O.plugin({
   ClickScroll: B,
   ScrollbarsHiding: H,
   SizeObserver: D
 });
-let t = class extends z {
+let t = class extends k {
   constructor() {
-    super(), this.hasSlotController = new E(this, "footer"), this.localize = new $(this), this.modal = new A(this), this.open = !1, this.label = "", this.noHeader = !1, this.boundary = document.body, this.dividerPosition = l.Header, this.useOverlayScrollbar = !1, this.overlayScrollbarAutoHide = "scroll", this.overlayScrollbarAutoHideDelay = 1e3, this.disableOverlayClick = !1, this.stayOpenOutsideClick = !1, this.strategy = "fixed", this.osInstance = null, this.boundaryObserver = null, this.boundarySize = {
+    super(), this.hasSlotController = new E(this, "footer"), this.localize = new L(this), this.modal = new P(this), this.open = !1, this.label = "", this.noHeader = !1, this.boundary = document.body, this.dividerPosition = l.Header, this.useOverlayScrollbar = !1, this.overlayScrollbarAutoHide = "scroll", this.overlayScrollbarAutoHideDelay = 1e3, this.disableOverlayClick = !1, this.stayOpenOutsideClick = !1, this.strategy = "fixed", this.osInstance = null, this.boundaryObserver = null, this.boundarySize = {
       height: 0,
       width: 0
     }, this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this), this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this), this.preventBoundaryDialogClose = this.preventBoundaryDialogClose.bind(this), this.handleWindowResize = this.handleWindowResize.bind(this);
@@ -364,122 +216,59 @@ let t = class extends z {
       return this.open = !1, x(this, "cx-after-hide");
   }
   render() {
-    return y`
-      <cx-popup
-        part="base"
-        ?active=${this.open}
-        strategy=${this.strategy === "overlay" ? "overlay" : "fixed"}
-        class=${v({
+    return y`<cx-popup part="base" ?active=${this.open} strategy=${this.strategy === "overlay" ? "overlay" : "fixed"} class=${v({
       popup: !0
-    })}
-        placement="center"
-      >
-        <div
-          class=${v({
+    })} placement="center"><div class=${v({
       dialog: !0,
       "dialog--has-footer": this.hasSlotController.test("footer"),
       "dialog--open": this.open,
       "dialog--overlay-scrollbar": this.useOverlayScrollbar
-    })}
-        >
-          <div
-            part="overlay"
-            class=${v({
+    })}><div part="overlay" class=${v({
       dialog__overlay: !0
-    })}
-            tabindex="-1"
-            style=${q({
+    })} tabindex="-1" style=${q({
       height: `${this.boundarySize.height}px`,
       width: `${this.boundarySize.width}px`
-    })}
-          >
-            <div
-              part="panel"
-              class="dialog__panel"
-              role="dialog"
-              aria-modal="true"
-              aria-hidden=${this.open ? "false" : "true"}
-              aria-label=${C(this.noHeader ? this.label : void 0)}
-              aria-labelledby=${C(this.noHeader ? void 0 : "title")}
-              tabindex="-1"
-            >
-              ${b(
+    })}><div part="panel" class="dialog__panel" role="dialog" aria-modal="true" aria-hidden=${this.open ? "false" : "true"} aria-label=${C(this.noHeader ? this.label : void 0)} aria-labelledby=${C(this.noHeader ? void 0 : "title")} tabindex="-1">${b(
       this.noHeader,
       () => W,
-      () => y`
-                  <header part="header" class="dialog__header">
-                    <h2 part="title" class="dialog__title" id="title">
-                      <slot name="label">
-                        ${this.label.length > 0 ? this.label : "\uFEFF"}
-                      </slot>
-                    </h2>
-                    <div part="header-actions" class="dialog__header-actions">
-                      <slot name="header-actions"></slot>
-                      <cx-icon-button
-                        part="close-button"
-                        exportparts="base:close-button__base"
-                        class="dialog__close"
-                        name="close"
-                        label=${this.localize.term("close")}
-                        @click=${this.handleCloseButtonClick}
-                      ></cx-icon-button>
-                    </div>
-                  </header>
-                  ${b(
+      () => y`<header part="header" class="dialog__header"><h2 part="title" class="dialog__title" id="title"><slot name="label">${this.label.length > 0 ? this.label : "\uFEFF"}</slot></h2><div part="header-actions" class="dialog__header-actions"><slot name="header-actions"></slot><cx-icon-button part="close-button" exportparts="base:close-button__base" class="dialog__close" name="close" label=${this.localize.term("close")} @click=${this.handleCloseButtonClick}></cx-icon-button></div></header>${b(
         [
           l.Header,
           l.Both
         ].includes(this.dividerPosition),
-        () => y`
-                      <cx-divider class="dialog__header-divider"></cx-divider>
-                    `
+        () => y`<cx-divider class="dialog__header-divider"></cx-divider>`
       )}
                 `
-    )}
-              <!-- The tabindex="-1" is here because the body is technically scrollable if overflowing.
+    )}<!-- The tabindex="-1" is here because the body is technically scrollable if overflowing.
                 However, if there's no focusable elements inside, you won't actually be able to scroll it via keyboard.
                 Previously this was just a <slot>, but tabindex="-1" on the slot causes children to not be focusable.
-                https://github.com/shoelace-style/shoelace/issues/1753#issuecomment-1836803277 -->
-              <div part="body" class="dialog__body" tabindex="-1">
-                <slot></slot>
-              </div>
-              ${b(
+                https://github.com/shoelace-style/shoelace/issues/1753#issuecomment-1836803277 --><div part="body" class="dialog__body" tabindex="-1"><slot></slot></div>${b(
       [
         l.Footer,
         l.Both
       ].includes(this.dividerPosition),
-      () => y`
-                  <cx-divider class="dialog__footer-divider"></cx-divider>
-                `
-    )}
-              <footer part="footer" class="dialog__footer">
-                <slot name="footer"></slot>
-              </footer>
-            </div>
-          </div>
-        </div>
-      </cx-popup>
-    `;
+      () => y`<cx-divider class="dialog__footer-divider"></cx-divider>`
+    )}<footer part="footer" class="dialog__footer"><slot name="footer"></slot></footer></div></div></div></cx-popup>`;
   }
 };
 t.styles = [
   S,
-  L,
-  U
+  $,
+  j
 ];
 t.dependencies = {
   "cx-divider": F,
   "cx-icon-button": I,
-  "cx-popup": T
+  "cx-popup": U
 };
 i([
-  m(".popup")
+  g(".popup")
 ], t.prototype, "popup", 2);
 i([
-  m(".dialog__panel")
+  g(".dialog__panel")
 ], t.prototype, "panel", 2);
 i([
-  m(".dialog__body")
+  g(".dialog__body")
 ], t.prototype, "body", 2);
 i([
   r({ reflect: !0, type: Boolean })
@@ -535,22 +324,22 @@ i([
   r({ reflect: !0 })
 ], t.prototype, "strategy", 2);
 i([
-  g()
+  m()
 ], t.prototype, "overlay", 2);
 i([
-  g()
+  m()
 ], t.prototype, "boundaryObserver", 2);
 i([
-  g()
+  m()
 ], t.prototype, "boundarySize", 2);
 i([
-  k(["boundary"], { waitUntilFirstUpdate: !0 })
+  z(["boundary"], { waitUntilFirstUpdate: !0 })
 ], t.prototype, "updatePopupAnchor", 1);
 i([
-  k("open", { waitUntilFirstUpdate: !0 })
+  z("open", { waitUntilFirstUpdate: !0 })
 ], t.prototype, "handleOpenChange", 1);
 t = i([
-  P("cx-dialog")
+  A("cx-dialog")
 ], t);
 u("dialog.show", {
   keyframes: [

package/library/chunks/dot-pagination.C26bQ3vy.js

@@ -0,0 +1,204 @@
+import { n as s, C as P } from "./lib-cortex-element.CVMmyPMC.js";
+import { c as z } from "./component.styles.CRO4Odto.js";
+import { O as C } from "./index.Cpamj0jB.js";
+import { c as F } from "./custom-element.L4WJXn1j.js";
+import { L as S } from "./i18n.BUW7B9hr.js";
+import { w as f } from "./watch.BCJD77bD.js";
+import { i as O, x as y } from "./lit-element.jLBm65_O.js";
+import { r as j } from "./state.CSDxrqLd.js";
+import { e as K } from "./query.BBf1UFkC.js";
+import { r as H } from "./query-all.i3PyvTUQ.js";
+import { e as L } from "./class-map.BiVq-cVR.js";
+import { o as E } from "./if-defined.BRoBj_Rp.js";
+import { o as D } from "./map.D8heArFD.js";
+import { n as w } from "./when.Dr1es41R.js";
+import T from "../components/tooltip.js";
+const B = O`:host{display:inline-block}:host([orientation=vertical]){height:100%}:host([orientation=vertical]) .dot-pagination{flex-direction:column;height:100%}.dot-pagination{justify-content:center;gap:var(--cx-spacing-small);flex-wrap:wrap;display:flex}.dot-pagination__dot{cursor:pointer;border-radius:var(--cx-border-radius-circle);width:var(--cx-spacing-small);height:var(--cx-spacing-small);background:0 0;background-color:var(--cx-color-neutral-300);border:0;margin:0;padding:0;display:block}.dot-pagination__dot--active{background-color:var(--cx-color-neutral-500)}.dot-pagination__dot--transitioning{cursor:default;opacity:.5}.dot-pagination__ellipsis{color:var(--cx-color-neutral-400);font-size:var(--cx-font-size-small);font-weight:var(--cx-font-weight-medium);user-select:none;min-width:var(--cx-spacing-small);height:var(--cx-spacing-small);justify-content:center;align-items:center;display:flex}.dot-pagination__dot:focus-visible{outline:var(--cx-focus-ring);outline-offset:var(--cx-focus-ring-offset)}@media (width<=640px){.dot-pagination{gap:var(--cx-spacing-x-small);padding:var(--cx-spacing-medium)}}@media (prefers-contrast:high){.dot-pagination__dot{border:1px solid var(--cx-color-neutral-600)}.dot-pagination__dot--active{border-color:var(--cx-color-neutral-700)}}@media (prefers-reduced-motion:reduce){.dot-pagination__dot{transition:none}}`;
+var R = Object.defineProperty, V = Object.getOwnPropertyDescriptor, i = (t, n, e, c) => {
+  for (var l = c > 1 ? void 0 : c ? V(n, e) : n, r = t.length - 1, a; r >= 0; r--)
+    (a = t[r]) && (l = (c ? a(n, e, l) : a(l)) || l);
+  return c && l && R(n, e, l), l;
+};
+let o = class extends P {
+  constructor() {
+    super(...arguments), this.localize = new S(this), this.activeIndex = 0, this.totalItemsCount = 0, this.visibleItemsCount = 1, this.step = 1, this.centerDots = 5, this.frontDots = 3, this.backDots = 3, this.loop = !1, this.orientation = C.Horizontal, this.transitioning = !1, this.tooltipPlacement = void 0, this.tooltipDescription = void 0, this.description = void 0, this.controlIds = [], this.dots = {
+      back: [],
+      backEllipsis: !1,
+      center: [],
+      front: [],
+      frontEllipsis: !1
+    };
+  }
+  calculateDots() {
+    const {
+      activeIndex: t,
+      backDots: n,
+      centerDots: e,
+      frontDots: c,
+      loop: l,
+      step: r,
+      totalItemsCount: a,
+      visibleItemsCount: p
+    } = this, U = a % p !== 0 ? Math.ceil(a / p) * p : a, m = l ? U : a, I = m - a, $ = l ? m : m - (p - r), M = I >= r ? $ - I : $, g = a > 0 ? Math.max(1, Math.ceil(M / r)) : 0, v = Math.floor(e / 2), _ = Math.floor(t / r), d = {
+      back: [],
+      backEllipsis: !1,
+      center: [],
+      front: [],
+      frontEllipsis: !1
+    }, N = c + e + n, x = l ? m : Math.max(0, m - p);
+    if (g <= N)
+      d.front = Array.from(
+        { length: g },
+        (u, h) => Math.min(h * r, x)
+      );
+    else {
+      d.frontEllipsis = _ > c + v, d.backEllipsis = _ < g - n - v - 1, d.front = Array.from(
+        { length: c },
+        (k, b) => Math.min(b * r, x)
+      ), d.back = Array.from(
+        { length: n },
+        (k, b) => Math.min((g - n + b) * r, x)
+      );
+      let u, h;
+      d.frontEllipsis ? d.backEllipsis ? (u = _ - v, h = u + e) : (h = g - n, u = h - e) : (u = c, h = u + e), d.center = Array.from({ length: h - u }, (k, b) => {
+        const A = (u + b) * r;
+        return Math.min(A, x);
+      });
+    }
+    this.dots = d;
+  }
+  /**
+   * Carousel focus active item when key is pressed from pagination
+   */
+  focus() {
+    this.activeDot?.focus();
+  }
+  handleDotClick(t) {
+    const n = t.currentTarget, e = Number(n.dataset.index);
+    e === this.activeIndex || isNaN(e) || (this.activeIndex = e, this.emit("cx-dot-pagination-change", {
+      detail: {
+        active: e
+      }
+    }));
+  }
+  handleKeyDown(t) {
+    const n = t.target;
+    if (t.key === "Enter" || t.key === " ") {
+      t.preventDefault(), n.click();
+      return;
+    }
+    const e = this.orientation === C.Horizontal, c = e ? ["ArrowRight"] : ["ArrowDown"], l = e ? ["ArrowLeft"] : ["ArrowUp"];
+    if (![...c, ...l].includes(t.key))
+      return;
+    t.preventDefault(), t.stopPropagation();
+    const r = Array.from(this.allDots), a = r.indexOf(n);
+    if (a === -1)
+      return;
+    let p = c.includes(t.key) ? a + 1 : a - 1;
+    this.loop ? p = (p + r.length) % r.length : p = Math.max(0, Math.min(p, r.length - 1)), r[p]?.focus();
+  }
+  handleFocus() {
+    this.emit("cx-dot-pagination-focus");
+  }
+  renderEllipsis() {
+    return y`<span part="ellipsis" class="dot-pagination__ellipsis" aria-hidden="true">
+        •••
+      </span>`;
+  }
+  renderDot(t) {
+    const n = t + 1, e = y`<button part="dot${this.activeIndex === t ? " dot--active" : ""}" class=${L({
+      "dot-pagination__dot": !0,
+      "dot-pagination__dot--active": t === this.activeIndex,
+      "dot-pagination__dot--transitioning": this.transitioning
+    })} role="tab" type="button" aria-selected=${t === this.activeIndex ? "true" : "false"} aria-label=${this.localize.term("slideNum", n)} aria-controls=${E(this.controlIds[t])} tabindex="0" data-index=${t} ?disabled=${this.transitioning} @click=${this.handleDotClick} @keydown=${this.handleKeyDown} @focus=${this.handleFocus}></button>`;
+    return w(
+      this.tooltipPlacement,
+      () => y`<cx-tooltip content=${this.tooltipDescription || t + 1} placement=${this.tooltipPlacement}>${e}</cx-tooltip>`,
+      () => e
+    );
+  }
+  render() {
+    return y`<div part="base" class="dot-pagination" role="tablist" aria-roledescription=${E(this.description || void 0)} aria-label=${this.localize.term("pagination")}>${D(this.dots.front, (t) => this.renderDot(t))}
+        ${w(this.dots.frontEllipsis, () => this.renderEllipsis())}
+        ${D(this.dots.center, (t) => this.renderDot(t))}
+        ${w(this.dots.backEllipsis, () => this.renderEllipsis())}
+        ${D(this.dots.back, (t) => this.renderDot(t))}</div>`;
+  }
+};
+o.styles = [z, B];
+o.dependencies = { "cx-tooltip": T };
+i([
+  K(".dot-pagination__dot--active")
+], o.prototype, "activeDot", 2);
+i([
+  H(".dot-pagination__dot")
+], o.prototype, "allDots", 2);
+i([
+  s({ attribute: "active-index", reflect: !0, type: Number })
+], o.prototype, "activeIndex", 2);
+i([
+  s({ attribute: "total-items-count", reflect: !0, type: Number })
+], o.prototype, "totalItemsCount", 2);
+i([
+  s({ attribute: "visible-items-count", reflect: !0, type: Number })
+], o.prototype, "visibleItemsCount", 2);
+i([
+  s({ reflect: !0, type: Number })
+], o.prototype, "step", 2);
+i([
+  s({ attribute: "center-dots", reflect: !0, type: Number })
+], o.prototype, "centerDots", 2);
+i([
+  s({ attribute: "front-dots", reflect: !0, type: Number })
+], o.prototype, "frontDots", 2);
+i([
+  s({ attribute: "back-dots", reflect: !0, type: Number })
+], o.prototype, "backDots", 2);
+i([
+  s({ reflect: !0, type: Boolean })
+], o.prototype, "loop", 2);
+i([
+  s({ reflect: !0, type: String })
+], o.prototype, "orientation", 2);
+i([
+  s({ reflect: !0, type: Boolean })
+], o.prototype, "transitioning", 2);
+i([
+  s({ attribute: "tooltip-placement", reflect: !0, type: String })
+], o.prototype, "tooltipPlacement", 2);
+i([
+  s({ attribute: "tooltip-description", reflect: !0, type: String })
+], o.prototype, "tooltipDescription", 2);
+i([
+  s({ reflect: !0, type: String })
+], o.prototype, "description", 2);
+i([
+  s({
+    attribute: "control-ids",
+    converter: {
+      fromAttribute: (t) => t?.split(" ") ?? [],
+      toAttribute: (t) => t.join(" ")
+    },
+    reflect: !0
+  })
+], o.prototype, "controlIds", 2);
+i([
+  j()
+], o.prototype, "dots", 2);
+i([
+  f("centerDots", { waitUntilFirstUpdate: !0 }),
+  f("frontDots", { waitUntilFirstUpdate: !0 }),
+  f("backDots", { waitUntilFirstUpdate: !0 }),
+  f("activeIndex", { waitUntilFirstUpdate: !0 }),
+  f("step", { waitUntilFirstUpdate: !0 }),
+  f("visibleItemsCount", { waitUntilFirstUpdate: !0 }),
+  f("loop", { waitUntilFirstUpdate: !0 }),
+  f("totalItemsCount")
+], o.prototype, "calculateDots", 1);
+o = i([
+  F("cx-dot-pagination")
+], o);
+export {
+  o as C,
+  B as d
+};

package/library/chunks/{exporting.BdjsEGF8.js → exporting.Chnl3UWi.js}

@@ -1,5 +1,5 @@
-import { E as F, a7 as V, z as O, _ as f, e as S, a8 as H, a9 as z, aa as D, a as W, ab as N, f as U, ac as x, ad as I, ae as J, M as q, s as G, c as w, g as K, af as j, ag as Q, ah as $, ai as Y, C as Z, x as T } from "./am-chart.oZVBmpnn.js";
-import { P as tt } from "./Picture.BNASYM-P.js";
+import { E as F, a7 as V, z as O, _ as f, e as S, a8 as H, a9 as z, aa as D, a as W, ab as N, f as U, ac as x, ad as I, ae as J, M as q, s as G, c as w, g as K, af as j, ag as Q, ah as $, ai as Y, C as Z, x as T } from "./am-chart.H2jnOzFc.js";
+import { P as tt } from "./Picture.YSPC0l0Q.js";
 let L;
 function et() {
   return f(this, void 0, void 0, function* () {