@sbb-esta/lyne-elements 2.6.0 → 2.7.1

package/paginator/common/paginator-common.js

@@ -0,0 +1,149 @@
+var $ = (a) => {
+  throw TypeError(a);
+};
+var k = (a, i, s) => i.has(a) || $("Cannot " + s);
+var _ = (a, i, s) => (k(a, i, "read from private field"), s ? s.call(a) : i.get(a)), x = (a, i, s) => i.has(a) ? $("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(a) : i.set(a, s), d = (a, i, s, m) => (k(a, i, "write to private field"), m ? m.call(a, s) : i.set(a, s), s);
+import { __runInitializers as h, __esDecorate as p } from "tslib";
+import { html as O } from "lit";
+import { property as c } from "lit/decorators.js";
+import { SbbLanguageController as w } from "../../core/controllers.js";
+import { hostAttributes as D } from "../../core/decorators.js";
+import { isLean as L } from "../../core/dom.js";
+import { EventEmitter as R } from "../../core/eventing.js";
+import { i18nSelectedPage as j, i18nPreviousPage as q, i18nNextPage as A } from "../../core/i18n.js";
+import { SbbNegativeMixin as B, SbbDisabledMixin as T } from "../../core/mixins.js";
+import "../../button/mini-button.js";
+import "../../button/mini-button-group.js";
+import "../../divider.js";
+const ae = (a) => (() => {
+  var l, g, n;
+  let s = [D({
+    role: "group"
+  })], m, z = [], o, I = B(T(a)), u = [], f, P, S, v, y = [], E = [], N, C = [], M = [];
+  var b = (n = class extends I {
+    constructor() {
+      super(...arguments);
+      x(this, l);
+      x(this, g);
+      this._length = (h(this, u), 0), this._pageSize = 10, this._pageIndex = 0, d(this, l, h(this, y, "start")), d(this, g, (h(this, E), h(this, C, L() ? "s" : "m"))), this._page = (h(this, M), new R(this, b.events.page, { composed: !0, bubbles: !0 })), this.language = new w(this);
+    }
+    /** Total number of items. */
+    set length(e) {
+      this._length = isNaN(e) || e < 0 ? 0 : e, this.pageIndex = this.pageIndex;
+    }
+    get length() {
+      return this._length;
+    }
+    /** Number of items per page. */
+    set pageSize(e) {
+      const t = this.pageSize;
+      this._pageSize = Math.max(e, 0), this.pageIndex = Math.floor(this.pageIndex * t / this.pageSize) || 0;
+    }
+    get pageSize() {
+      return this._pageSize;
+    }
+    /** Current page index. */
+    set pageIndex(e) {
+      this._pageIndex = this._coercePageIndexInRange(e);
+    }
+    get pageIndex() {
+      return this._pageIndex;
+    }
+    /** Position of the prev/next buttons. */
+    get pagerPosition() {
+      return _(this, l);
+    }
+    set pagerPosition(e) {
+      d(this, l, e);
+    }
+    /**
+     * Size variant, either m or s.
+     * @default 'm' / 's' (lean)
+     */
+    get size() {
+      return _(this, g);
+    }
+    set size(e) {
+      d(this, g, e);
+    }
+    updated(e) {
+      super.updated(e), this.shadowRoot.querySelector("sbb-screen-reader-only").textContent = this._currentPageLabel();
+    }
+    /** Evaluate `pageIndex` by excluding edge cases. */
+    _coercePageIndexInRange(e) {
+      return Math.max(Math.min(Math.max(isNaN(e) ? 0 : e, 0), this.numberOfPages() - 1), 0);
+    }
+    _currentPageLabel() {
+      return j(this.pageIndex + 1)[this.language.current];
+    }
+    /**
+     * Calculates the current number of pages based on the `length` and the `pageSize`;
+     * value must be rounded up (e.g. `length = 21` and `pageSize = 10` means 3 pages).
+     */
+    numberOfPages() {
+      return this.pageSize ? Math.ceil(this.length / this.pageSize) : 0;
+    }
+    /**
+     * If the `pageIndex` changes due to user interaction,
+     * emit the `page` event and then update the `pageIndex` value.
+     */
+    pageIndexChanged(e) {
+      const t = this.pageIndex;
+      this.pageIndex = e, t !== this.pageIndex && this.emitPageEvent(t);
+    }
+    emitPageEvent(e) {
+      this._page.emit({
+        previousPageIndex: e,
+        pageIndex: this.pageIndex,
+        length: this.length,
+        pageSize: this.pageSize
+      });
+    }
+    renderPrevNextButtons() {
+      return O`
+        <sbb-mini-button-group ?negative=${this.negative} size=${this.size === "s" ? "s" : "l"}>
+          <sbb-mini-button
+            id="sbb-paginator-prev-page"
+            aria-label=${q[this.language.current]}
+            icon-name="chevron-small-left-small"
+            ?disabled=${this.disabled || this.pageIndex === 0}
+            @click=${() => this.pageIndexChanged(this._pageIndex - 1)}
+          ></sbb-mini-button>
+          <sbb-divider orientation="vertical"></sbb-divider>
+          <sbb-mini-button
+            id="sbb-paginator-next-page"
+            aria-label=${A[this.language.current]}
+            icon-name="chevron-small-right-small"
+            ?disabled=${this.disabled || this.pageIndex === this.numberOfPages() - 1}
+            @click=${() => this.pageIndexChanged(this._pageIndex + 1)}
+          ></sbb-mini-button>
+        </sbb-mini-button-group>
+      `;
+    }
+    render() {
+      return O`
+        ${this.renderPaginator()}
+        <sbb-screen-reader-only role="status"></sbb-screen-reader-only>
+      `;
+    }
+  }, l = new WeakMap(), g = new WeakMap(), o = n, (() => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(I[Symbol.metadata] ?? null) : void 0;
+    f = [c({ type: Number })], P = [c({ attribute: "page-size", type: Number })], S = [c({ attribute: "page-index", type: Number })], v = [c({ attribute: "pager-position", reflect: !0 })], N = [c({ reflect: !0 })], p(n, null, f, { kind: "setter", name: "length", static: !1, private: !1, access: { has: (t) => "length" in t, set: (t, r) => {
+      t.length = r;
+    } }, metadata: e }, null, u), p(n, null, P, { kind: "setter", name: "pageSize", static: !1, private: !1, access: { has: (t) => "pageSize" in t, set: (t, r) => {
+      t.pageSize = r;
+    } }, metadata: e }, null, u), p(n, null, S, { kind: "setter", name: "pageIndex", static: !1, private: !1, access: { has: (t) => "pageIndex" in t, set: (t, r) => {
+      t.pageIndex = r;
+    } }, metadata: e }, null, u), p(n, null, v, { kind: "accessor", name: "pagerPosition", static: !1, private: !1, access: { has: (t) => "pagerPosition" in t, get: (t) => t.pagerPosition, set: (t, r) => {
+      t.pagerPosition = r;
+    } }, metadata: e }, y, E), p(n, null, N, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (t) => "size" in t, get: (t) => t.size, set: (t, r) => {
+      t.size = r;
+    } }, metadata: e }, C, M), p(null, m = { value: o }, s, { kind: "class", name: o.name, metadata: e }, null, z), b = o = m.value, e && Object.defineProperty(o, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), n.events = {
+    page: "page"
+  }, h(o, z), n);
+  return b = o;
+})();
+export {
+  ae as SbbPaginatorCommonElementMixin
+};

package/paginator/common.d.ts

@@ -1,2 +1,5 @@
+/**
+ * @entrypoint
+ */
 export * from './common/paginator-common.js';
 //# sourceMappingURL=common.d.ts.map

package/paginator/common.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../../src/elements/paginator/common.ts"],"names":[],"mappings":"AAAA,cAAc,8BAA8B,CAAC"}
+{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../../src/elements/paginator/common.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,8BAA8B,CAAC"}

package/paginator/common.js

@@ -1,149 +1,4 @@
-var $ = (a) => {
-  throw TypeError(a);
-};
-var k = (a, i, s) => i.has(a) || $("Cannot " + s);
-var _ = (a, i, s) => (k(a, i, "read from private field"), s ? s.call(a) : i.get(a)), x = (a, i, s) => i.has(a) ? $("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(a) : i.set(a, s), d = (a, i, s, m) => (k(a, i, "write to private field"), m ? m.call(a, s) : i.set(a, s), s);
-import { __runInitializers as h, __esDecorate as p } from "tslib";
-import { html as O } from "lit";
-import { property as c } from "lit/decorators.js";
-import { SbbLanguageController as w } from "../core/controllers.js";
-import { hostAttributes as D } from "../core/decorators.js";
-import { isLean as L } from "../core/dom.js";
-import { EventEmitter as R } from "../core/eventing.js";
-import { i18nSelectedPage as j, i18nPreviousPage as q, i18nNextPage as A } from "../core/i18n.js";
-import { SbbNegativeMixin as B, SbbDisabledMixin as T } from "../core/mixins.js";
-import "../button/mini-button.js";
-import "../button/mini-button-group.js";
-import "../divider.js";
-const ae = (a) => (() => {
-  var l, g, n;
-  let s = [D({
-    role: "group"
-  })], m, z = [], o, I = B(T(a)), u = [], f, P, S, v, y = [], E = [], N, C = [], M = [];
-  var b = (n = class extends I {
-    constructor() {
-      super(...arguments);
-      x(this, l);
-      x(this, g);
-      this._length = (h(this, u), 0), this._pageSize = 10, this._pageIndex = 0, d(this, l, h(this, y, "start")), d(this, g, (h(this, E), h(this, C, L() ? "s" : "m"))), this._page = (h(this, M), new R(this, b.events.page, { composed: !0, bubbles: !0 })), this.language = new w(this);
-    }
-    /** Total number of items. */
-    set length(e) {
-      this._length = isNaN(e) || e < 0 ? 0 : e, this.pageIndex = this.pageIndex;
-    }
-    get length() {
-      return this._length;
-    }
-    /** Number of items per page. */
-    set pageSize(e) {
-      const t = this.pageSize;
-      this._pageSize = Math.max(e, 0), this.pageIndex = Math.floor(this.pageIndex * t / this.pageSize) || 0;
-    }
-    get pageSize() {
-      return this._pageSize;
-    }
-    /** Current page index. */
-    set pageIndex(e) {
-      this._pageIndex = this._coercePageIndexInRange(e);
-    }
-    get pageIndex() {
-      return this._pageIndex;
-    }
-    /** Position of the prev/next buttons. */
-    get pagerPosition() {
-      return _(this, l);
-    }
-    set pagerPosition(e) {
-      d(this, l, e);
-    }
-    /**
-     * Size variant, either m or s.
-     * @default 'm' / 's' (lean)
-     */
-    get size() {
-      return _(this, g);
-    }
-    set size(e) {
-      d(this, g, e);
-    }
-    updated(e) {
-      super.updated(e), this.shadowRoot.querySelector("sbb-screen-reader-only").textContent = this._currentPageLabel();
-    }
-    /** Evaluate `pageIndex` by excluding edge cases. */
-    _coercePageIndexInRange(e) {
-      return Math.max(Math.min(Math.max(isNaN(e) ? 0 : e, 0), this.numberOfPages() - 1), 0);
-    }
-    _currentPageLabel() {
-      return j(this.pageIndex + 1)[this.language.current];
-    }
-    /**
-     * Calculates the current number of pages based on the `length` and the `pageSize`;
-     * value must be rounded up (e.g. `length = 21` and `pageSize = 10` means 3 pages).
-     */
-    numberOfPages() {
-      return this.pageSize ? Math.ceil(this.length / this.pageSize) : 0;
-    }
-    /**
-     * If the `pageIndex` changes due to user interaction,
-     * emit the `page` event and then update the `pageIndex` value.
-     */
-    pageIndexChanged(e) {
-      const t = this.pageIndex;
-      this.pageIndex = e, t !== this.pageIndex && this.emitPageEvent(t);
-    }
-    emitPageEvent(e) {
-      this._page.emit({
-        previousPageIndex: e,
-        pageIndex: this.pageIndex,
-        length: this.length,
-        pageSize: this.pageSize
-      });
-    }
-    renderPrevNextButtons() {
-      return O`
-        <sbb-mini-button-group ?negative=${this.negative} size=${this.size === "s" ? "s" : "l"}>
-          <sbb-mini-button
-            id="sbb-paginator-prev-page"
-            aria-label=${q[this.language.current]}
-            icon-name="chevron-small-left-small"
-            ?disabled=${this.disabled || this.pageIndex === 0}
-            @click=${() => this.pageIndexChanged(this._pageIndex - 1)}
-          ></sbb-mini-button>
-          <sbb-divider orientation="vertical"></sbb-divider>
-          <sbb-mini-button
-            id="sbb-paginator-next-page"
-            aria-label=${A[this.language.current]}
-            icon-name="chevron-small-right-small"
-            ?disabled=${this.disabled || this.pageIndex === this.numberOfPages() - 1}
-            @click=${() => this.pageIndexChanged(this._pageIndex + 1)}
-          ></sbb-mini-button>
-        </sbb-mini-button-group>
-      `;
-    }
-    render() {
-      return O`
-        ${this.renderPaginator()}
-        <sbb-screen-reader-only role="status"></sbb-screen-reader-only>
-      `;
-    }
-  }, l = new WeakMap(), g = new WeakMap(), o = n, (() => {
-    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(I[Symbol.metadata] ?? null) : void 0;
-    f = [c({ type: Number })], P = [c({ attribute: "page-size", type: Number })], S = [c({ attribute: "page-index", type: Number })], v = [c({ attribute: "pager-position", reflect: !0 })], N = [c({ reflect: !0 })], p(n, null, f, { kind: "setter", name: "length", static: !1, private: !1, access: { has: (t) => "length" in t, set: (t, r) => {
-      t.length = r;
-    } }, metadata: e }, null, u), p(n, null, P, { kind: "setter", name: "pageSize", static: !1, private: !1, access: { has: (t) => "pageSize" in t, set: (t, r) => {
-      t.pageSize = r;
-    } }, metadata: e }, null, u), p(n, null, S, { kind: "setter", name: "pageIndex", static: !1, private: !1, access: { has: (t) => "pageIndex" in t, set: (t, r) => {
-      t.pageIndex = r;
-    } }, metadata: e }, null, u), p(n, null, v, { kind: "accessor", name: "pagerPosition", static: !1, private: !1, access: { has: (t) => "pagerPosition" in t, get: (t) => t.pagerPosition, set: (t, r) => {
-      t.pagerPosition = r;
-    } }, metadata: e }, y, E), p(n, null, N, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (t) => "size" in t, get: (t) => t.size, set: (t, r) => {
-      t.size = r;
-    } }, metadata: e }, C, M), p(null, m = { value: o }, s, { kind: "class", name: o.name, metadata: e }, null, z), b = o = m.value, e && Object.defineProperty(o, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
-  })(), n.events = {
-    page: "page"
-  }, h(o, z), n);
-  return b = o;
-})();
+import { SbbPaginatorCommonElementMixin as n } from "./common/paginator-common.js";
 export {
-  ae as SbbPaginatorCommonElementMixin
+  n as SbbPaginatorCommonElementMixin
 };

package/paginator/compact-paginator/compact-paginator.js

@@ -0,0 +1,40 @@
+import { __esDecorate as b, __runInitializers as c } from "tslib";
+import { css as l, LitElement as p, html as a } from "lit";
+import { customElement as m } from "lit/decorators.js";
+import { SbbPaginatorCommonElementMixin as g } from "../common.js";
+import "../../divider.js";
+const d = l`*,:before,:after{box-sizing:border-box}:host{display:block;--sbb-compact-paginator-height: var(--sbb-size-element-m);--sbb-compact-paginator-color: var(--sbb-color-metal);--sbb-paginator-compact-justify-content: start}:host([size=s]){--sbb-compact-paginator-height: var(--sbb-size-element-xs)}:host([negative]){--sbb-compact-paginator-color: var(--sbb-color-storm)}:host([pager-position=end]){--sbb-paginator-compact-justify-content: end}.sbb-compact-paginator{display:flex;gap:var(--sbb-spacing-fixed-5x);justify-content:var(--sbb-paginator-compact-justify-content);min-height:var(--sbb-compact-paginator-height)}.sbb-paginator__pages{--sbb-text-font-size: var(--sbb-font-size-text-m);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);display:flex;align-items:center;justify-content:center;gap:var(--sbb-spacing-fixed-2x);color:var(--sbb-compact-paginator-color)}.sbb-compact-paginator__divider{height:1rem}`;
+let x = (() => {
+  var t;
+  let n = [m("sbb-compact-paginator")], i, r = [], e, o = g(p);
+  return t = class extends o {
+    _renderPageNumbers() {
+      return a`
+      <span class="sbb-paginator__pages"
+        >${this.pageIndex + 1}<sbb-divider
+          aria-hidden="true"
+          orientation="vertical"
+          class="sbb-compact-paginator__divider"
+          ?negative=${this.negative}
+        ></sbb-divider
+        >${this.numberOfPages()}</span
+      >
+    `;
+    }
+    renderPaginator() {
+      return a`
+      <div class="sbb-compact-paginator">
+        ${this.pagerPosition === "start" ? a`${this.renderPrevNextButtons()} ${this._renderPageNumbers()}` : a`${this._renderPageNumbers()} ${this.renderPrevNextButtons()}`}
+      </div>
+    `;
+    }
+  }, e = t, (() => {
+    const s = typeof Symbol == "function" && Symbol.metadata ? Object.create(o[Symbol.metadata] ?? null) : void 0;
+    b(null, i = { value: e }, n, { kind: "class", name: e.name, metadata: s }, null, r), e = i.value, s && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: s });
+  })(), t.styles = d, t.events = {
+    page: "page"
+  }, c(e, r), e;
+})();
+export {
+  x as SbbCompactPaginatorElement
+};

package/paginator/compact-paginator.d.ts

@@ -1,2 +1,5 @@
+/**
+ * @entrypoint
+ */
 export * from './compact-paginator/compact-paginator.js';
 //# sourceMappingURL=compact-paginator.d.ts.map

package/paginator/compact-paginator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"compact-paginator.d.ts","sourceRoot":"","sources":["../../../src/elements/paginator/compact-paginator.ts"],"names":[],"mappings":"AAAA,cAAc,0CAA0C,CAAC"}
+{"version":3,"file":"compact-paginator.d.ts","sourceRoot":"","sources":["../../../src/elements/paginator/compact-paginator.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,0CAA0C,CAAC"}

package/paginator/compact-paginator.js

@@ -1,40 +1,4 @@
-import { __esDecorate as b, __runInitializers as c } from "tslib";
-import { css as l, LitElement as p, html as a } from "lit";
-import { customElement as m } from "lit/decorators.js";
-import { SbbPaginatorCommonElementMixin as g } from "./common.js";
-import "../divider.js";
-const d = l`*,:before,:after{box-sizing:border-box}:host{display:block;--sbb-compact-paginator-height: var(--sbb-size-element-m);--sbb-compact-paginator-color: var(--sbb-color-metal);--sbb-paginator-compact-justify-content: start}:host([size=s]){--sbb-compact-paginator-height: var(--sbb-size-element-xs)}:host([negative]){--sbb-compact-paginator-color: var(--sbb-color-storm)}:host([pager-position=end]){--sbb-paginator-compact-justify-content: end}.sbb-compact-paginator{display:flex;gap:var(--sbb-spacing-fixed-5x);justify-content:var(--sbb-paginator-compact-justify-content);min-height:var(--sbb-compact-paginator-height)}.sbb-paginator__pages{--sbb-text-font-size: var(--sbb-font-size-text-m);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);display:flex;align-items:center;justify-content:center;gap:var(--sbb-spacing-fixed-2x);color:var(--sbb-compact-paginator-color)}.sbb-compact-paginator__divider{height:1rem}`;
-let x = (() => {
-  var t;
-  let n = [m("sbb-compact-paginator")], i, r = [], e, o = g(p);
-  return t = class extends o {
-    _renderPageNumbers() {
-      return a`
-      <span class="sbb-paginator__pages"
-        >${this.pageIndex + 1}<sbb-divider
-          aria-hidden="true"
-          orientation="vertical"
-          class="sbb-compact-paginator__divider"
-          ?negative=${this.negative}
-        ></sbb-divider
-        >${this.numberOfPages()}</span
-      >
-    `;
-    }
-    renderPaginator() {
-      return a`
-      <div class="sbb-compact-paginator">
-        ${this.pagerPosition === "start" ? a`${this.renderPrevNextButtons()} ${this._renderPageNumbers()}` : a`${this._renderPageNumbers()} ${this.renderPrevNextButtons()}`}
-      </div>
-    `;
-    }
-  }, e = t, (() => {
-    const s = typeof Symbol == "function" && Symbol.metadata ? Object.create(o[Symbol.metadata] ?? null) : void 0;
-    b(null, i = { value: e }, n, { kind: "class", name: e.name, metadata: s }, null, r), e = i.value, s && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: s });
-  })(), t.styles = d, t.events = {
-    page: "page"
-  }, c(e, r), e;
-})();
+import { SbbCompactPaginatorElement as a } from "./compact-paginator/compact-paginator.js";
 export {
-  x as SbbCompactPaginatorElement
+  a as SbbCompactPaginatorElement
 };

package/paginator/paginator/paginator.js

@@ -0,0 +1,169 @@
+var P = (t) => {
+  throw TypeError(t);
+};
+var k = (t, r, i) => r.has(t) || P("Cannot " + i);
+var u = (t, r, i) => (k(t, r, "read from private field"), i ? i.call(t) : r.get(t)), m = (t, r, i) => r.has(t) ? P("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(t) : r.set(t, i), c = (t, r, i, o) => (k(t, r, "write to private field"), o ? o.call(t, i) : r.set(t, i), i);
+import { __runInitializers as d, __esDecorate as h } from "tslib";
+import { css as E, LitElement as j, nothing as S, html as b } from "lit";
+import { customElement as A, property as $ } from "lit/decorators.js";
+import { repeat as I } from "lit/directives/repeat.js";
+import { sbbInputModalityDetector as F } from "../../core/a11y.js";
+import { i18nItemsPerPage as D, i18nPage as N } from "../../core/i18n.js";
+import { SbbPaginatorCommonElementMixin as T } from "../common.js";
+import "../../form-field.js";
+import "../../select.js";
+import "../../option.js";
+import "../../screen-reader-only.js";
+const C = E`*,:before,:after{box-sizing:border-box}:host{display:block;--sbb-paginator-height: var(--sbb-size-element-m);--sbb-paginator-page-color: var(--sbb-color-metal);--sbb-paginator-page-background-color: transparent;--sbb-paginator-page-border-width: 0;--sbb-paginator-page-border-style: none;--sbb-paginator-page-border-color: none;--sbb-paginator-page-cursor: pointer;--sbb-paginator-page-inset: 0;--sbb-paginator-animation-easing: var(--sbb-animation-easing);--sbb-paginator-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-paginator-justify-content: start;--sbb-paginator-wrapping-group-wrap: wrap-reverse;--sbb-paginator-wrap: wrap}:host([size=s]){--sbb-paginator-height: var(--sbb-size-element-xs)}:host([negative]){--sbb-paginator-page-color: var(--sbb-color-smoke);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}:host([pager-position=end]){--sbb-paginator-justify-content: end;--sbb-paginator-wrapping-group-wrap: wrap;--sbb-paginator-wrap: wrap-reverse}.sbb-paginator,.sbb-paginator__wrapping-group{display:flex;gap:var(--sbb-spacing-fixed-3x) var(--sbb-spacing-fixed-6x);justify-content:var(--sbb-paginator-justify-content)}.sbb-paginator{flex-wrap:var(--sbb-paginator-wrap);min-height:var(--sbb-paginator-height)}.sbb-paginator__wrapping-group{flex-wrap:var(--sbb-paginator-wrapping-group-wrap)}.sbb-paginator__page-size-options{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);display:flex;align-items:center;gap:var(--sbb-spacing-fixed-2x);white-space:nowrap;color:var(--sbb-paginator-page-color)}.sbb-paginator__page-size-options sbb-select{--sbb-text-font-size: var(--sbb-font-size-text-m);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);color:var(--sbb-form-field-text-color);font-size:var(--sbb-form-field-input-text-size);padding-inline-end:var(--sbb-form-field-select-inline-padding-end)}.sbb-paginator__pages{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;align-items:center;justify-content:center;gap:var(--sbb-spacing-fixed-1x);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.sbb-paginator__page--ellipsis,.sbb-paginator__page--number{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);position:relative;color:var(--sbb-paginator-page-color)}.sbb-paginator__page--ellipsis-item,.sbb-paginator__page--number-item{display:flex;justify-content:center;align-items:center;width:var(--sbb-size-element-xxs);height:var(--sbb-size-element-xxs)}.sbb-paginator__page--number-item{-webkit-appearance:none;-moz-appearance:none;box-sizing:border-box;margin:0;outline:none;border:none;border-radius:0;padding:0;background:none;-webkit-tap-highlight-color:transparent;color:inherit;--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);position:relative;cursor:var(--sbb-paginator-page-cursor);outline:none!important;color:var(--sbb-paginator-page-color);transition:color var(--sbb-paginator-animation-duration) var(--sbb-paginator-animation-easing)}.sbb-paginator__page--number-item:before{content:"";position:absolute;background-color:var(--sbb-paginator-page-background-color);border:var(--sbb-paginator-page-border-width) var(--sbb-paginator-page-border-style) var(--sbb-paginator-page-border-color);border-radius:var(--sbb-border-radius-infinity);inset:var(--sbb-paginator-page-inset);transition-property:background-color,border,inset;transition-duration:var(--sbb-paginator-animation-duration);transition-timing-function:var(--sbb-paginator-animation-easing)}.sbb-paginator__page--number-item:focus-visible:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);outline-offset:var(--sbb-border-width-2x)}.sbb-paginator__page--number-item[data-selected]{font-weight:700;--sbb-paginator-page-color: var(--sbb-color-charcoal);--sbb-paginator-page-border-width: var(--sbb-border-width-2x);--sbb-paginator-page-border-style: solid;--sbb-paginator-page-border-color: var(--sbb-color-charcoal)}:host([negative]) .sbb-paginator__page--number-item[data-selected]{--sbb-paginator-page-color: var(--sbb-color-milk);--sbb-paginator-page-border-color: var(--sbb-color-white)}@media (forced-colors: active){.sbb-paginator__page--number-item[data-selected]{--sbb-paginator-page-border-color: Highlight !important}}.sbb-paginator__page--number-item:disabled{--sbb-paginator-page-color: var(--sbb-color-smoke);--sbb-paginator-page-border-style: dashed;--sbb-paginator-page-border-color: var(--sbb-color-smoke);--sbb-paginator-page-background-color: var(--sbb-color-milk);--sbb-paginator-page-cursor: default}.sbb-paginator__page--number-item:disabled:not([data-selected]){--sbb-paginator-page-border-width: var(--sbb-border-width-1x)}:host([negative]) .sbb-paginator__page--number-item:disabled{--sbb-paginator-page-color: var(--sbb-color-aluminium);--sbb-paginator-page-background-color: var(--sbb-color-charcoal)}@media (forced-colors: active){.sbb-paginator__page--number-item:disabled{--sbb-paginator-page-border-color: GrayText;--sbb-paginator-page-color: GrayText;--sbb-paginator-page-background-color: Canvas}}@media (any-hover: hover){.sbb-paginator__page--number-item:not(:disabled):hover{--sbb-paginator-page-background-color: var(--sbb-color-milk);--sbb-paginator-page-inset: calc(var(--sbb-border-width-2x) * -1);--sbb-paginator-translate-y-content-hover: -.0625rem}:host([negative]) .sbb-paginator__page--number-item:not(:disabled):hover{--sbb-paginator-page-background-color: var(--sbb-color-charcoal)}}@media (any-hover: hover) and (forced-colors: active){.sbb-paginator__page--number-item:not(:disabled):hover{--sbb-paginator-page-background-color: Highlight !important}}.sbb-paginator__page--number-item:not(:disabled):active{--sbb-paginator-page-color: var(--sbb-color-charcoal);--sbb-paginator-page-background-color: var(--sbb-color-cloud);--sbb-paginator-page-inset: 0;--sbb-paginator-translate-y-content-hover: 0}:host([negative]) .sbb-paginator__page--number-item:not(:disabled):active{--sbb-paginator-page-color: var(--sbb-color-milk);--sbb-paginator-page-background-color: var(--sbb-color-iron)}@media (forced-colors: active){.sbb-paginator__page--number-item:not(:disabled):active{--sbb-paginator-page-background-color: Highlight !important}}.sbb-paginator__page--number-item-label{transition:transform var(--sbb-paginator-animation-duration) var(--sbb-paginator-animation-easing);transform:translateY(var(--sbb-paginator-translate-y-content-hover, 0rem))}.sbb-screen-reader-only{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`, l = 3;
+let Q = (() => {
+  var p, g, s;
+  let t = [A("sbb-paginator")], r, i = [], o, v = T(j), f, _ = [], y = [], x, z = [], w = [];
+  return s = class extends v {
+    constructor() {
+      super(...arguments);
+      m(this, p);
+      m(this, g);
+      c(this, p, d(this, _, [])), c(this, g, (d(this, y), d(this, z, "start"))), this._markForFocus = (d(this, w), null);
+    }
+    /** The available `pageSize` choices. */
+    get pageSizeOptions() {
+      return u(this, p);
+    }
+    set pageSizeOptions(e) {
+      c(this, p, e);
+    }
+    /**
+     * Position of the prev/next buttons: if `pageSizeOptions` is set,
+     * the sbb-select for the pageSize change will be positioned oppositely, with the page numbers always in the center.
+     */
+    get pagerPosition() {
+      return u(this, g);
+    }
+    set pagerPosition(e) {
+      c(this, g, e);
+    }
+    updated(e) {
+      if (super.updated(e), this._markForFocus && F.mostRecentModality === "keyboard") {
+        const a = this._getVisiblePages().find((n) => this.pageIndex === +n.getAttribute("data-index"));
+        a && a.focus(), this._markForFocus = null;
+      }
+    }
+    /**
+     * If the `pageSize` changes due to user interaction with the `pageSizeOptions` select,
+     * emit the `page` event and then update the `pageSize` value.
+     */
+    _pageSizeChanged(e) {
+      const a = this.pageSize, n = this.pageIndex;
+      this.pageSize = e, a !== this.pageSize && this.emitPageEvent(n);
+    }
+    /** Returns the displayed page elements. */
+    _getVisiblePages() {
+      return Array.from(this.shadowRoot.querySelectorAll(".sbb-paginator__page--number-item"));
+    }
+    /**
+     * Calculate the pages set based on the following rules:
+     *  - the first page must always be visible;
+     *  - the last page must always be visible;
+     *  - if there are more than `MAX_PAGE_NUMBERS_DISPLAYED` other pages, ellipsis button must be used.
+     */
+    _getVisiblePagesIndex() {
+      const e = this.numberOfPages(), a = this.pageIndex;
+      return e <= l + 2 ? this._range(e) : a < l ? [...this._range(l + 1), "ellipsis", e - 1] : a >= e - l ? [
+        0,
+        "ellipsis",
+        ...this._range(l + 1, e - 1 - l)
+      ] : [
+        0,
+        "ellipsis",
+        a - 1,
+        a,
+        a + 1,
+        "ellipsis",
+        e - 1
+      ];
+    }
+    /** Creates an array of consecutive numbers given the length and the starting value. */
+    _range(e, a = 0) {
+      return Array.from({ length: e }, (n, O) => O + a);
+    }
+    _handleKeyUp(e) {
+      if (e.key !== " " && e.key !== "Enter")
+        return;
+      this._getVisiblePages().find((n) => n === e.target) && (this._markForFocus = this.pageIndex);
+    }
+    _renderItemPerPageTemplate() {
+      var e;
+      return this.pageSizeOptions && this.pageSizeOptions.length > 0 ? b`
+          <div class="sbb-paginator__page-size-options">
+            <label for="select">${D[this.language.current]}</label>
+            <sbb-form-field
+              borderless
+              width="collapse"
+              ?negative=${this.negative}
+              size=${this.size}
+            >
+              <sbb-select
+                id="select"
+                ?disabled=${this.disabled}
+                value=${((e = this.pageSizeOptions) == null ? void 0 : e.find((a) => a === this.pageSize)) ?? this.pageSizeOptions[0]}
+                @change=${(a) => this._pageSizeChanged(+a.target.value)}
+              >
+                ${I(this.pageSizeOptions, (a) => b`<sbb-option value=${a}>${a}</sbb-option>`)}
+              </sbb-select>
+            </sbb-form-field>
+          </div>
+        ` : S;
+    }
+    _renderPageNumbers() {
+      return b`
+      <ul class="sbb-paginator__pages">
+        ${I(this._getVisiblePagesIndex(), (e) => e === "ellipsis" ? b`
+                  <li class="sbb-paginator__page--ellipsis">
+                    <span class="sbb-paginator__page--ellipsis-item">…</span>
+                  </li>
+                ` : b`
+                  <li class="sbb-paginator__page--number">
+                    <button
+                      ?data-selected=${this.pageIndex === e}
+                      ?disabled=${this.disabled}
+                      class="sbb-paginator__page--number-item"
+                      data-index=${e}
+                      aria-label="${N[this.language.current]} ${e + 1}"
+                      aria-current=${this.pageIndex === e ? "true" : S}
+                      @click=${() => this.pageIndexChanged(e)}
+                      @keyup=${this._handleKeyUp}
+                    >
+                      <span class="sbb-paginator__page--number-item-label">${e + 1}</span>
+                    </button>
+                  </li>
+                `)}
+      </ul>
+    `;
+    }
+    renderPaginator() {
+      return b`
+      <div class="sbb-paginator">
+        ${this.pagerPosition === "start" ? b`<span class="sbb-paginator__wrapping-group">
+                  ${this.renderPrevNextButtons()} ${this._renderPageNumbers()}
+                </span>
+                ${this._renderItemPerPageTemplate()}` : b`${this._renderItemPerPageTemplate()}
+                <span class="sbb-paginator__wrapping-group">
+                  ${this._renderPageNumbers()} ${this.renderPrevNextButtons()}
+                </span>`}</span>
+      </div>
+    `;
+    }
+  }, p = new WeakMap(), g = new WeakMap(), o = s, (() => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(v[Symbol.metadata] ?? null) : void 0;
+    f = [$({ attribute: "page-size-options", type: Array })], x = [$({ attribute: "pager-position", reflect: !0 })], h(s, null, f, { kind: "accessor", name: "pageSizeOptions", static: !1, private: !1, access: { has: (a) => "pageSizeOptions" in a, get: (a) => a.pageSizeOptions, set: (a, n) => {
+      a.pageSizeOptions = n;
+    } }, metadata: e }, _, y), h(s, null, x, { kind: "accessor", name: "pagerPosition", static: !1, private: !1, access: { has: (a) => "pagerPosition" in a, get: (a) => a.pagerPosition, set: (a, n) => {
+      a.pagerPosition = n;
+    } }, metadata: e }, z, w), h(null, r = { value: o }, t, { kind: "class", name: o.name, metadata: e }, null, i), o = r.value, e && Object.defineProperty(o, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), s.styles = C, s.events = {
+    page: "page"
+  }, d(o, i), o;
+})();
+export {
+  Q as SbbPaginatorElement
+};

package/paginator/paginator.d.ts

@@ -1,2 +1,5 @@
+/**
+ * @entrypoint
+ */
 export * from './paginator/paginator.js';
 //# sourceMappingURL=paginator.d.ts.map

package/paginator/paginator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"paginator.d.ts","sourceRoot":"","sources":["../../../src/elements/paginator/paginator.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC"}
+{"version":3,"file":"paginator.d.ts","sourceRoot":"","sources":["../../../src/elements/paginator/paginator.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,0BAA0B,CAAC"}