@sbb-esta/lyne-elements 1.13.0 → 1.14.0

package/paginator/common.js

@@ -0,0 +1,145 @@
+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), m = (a, i, s, d) => (k(a, i, "write to private field"), d ? d.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 { EventEmitter as L } from "../core/eventing.js";
+import { i18nSelectedPage as R, i18nPreviousPage as j, i18nNextPage as q } from "../core/i18n.js";
+import { SbbNegativeMixin as A, SbbDisabledMixin as B } from "../core/mixins.js";
+import "../button/mini-button.js";
+import "../button/mini-button-group.js";
+import "../divider.js";
+const ee = (a) => (() => {
+  var l, g, n;
+  let s = [D({
+    role: "group"
+  })], d, z = [], o, I = A(B(a)), u = [], P, f, 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, m(this, l, h(this, y, "start")), m(this, g, (h(this, E), h(this, C, "m"))), this._page = (h(this, M), new L(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) {
+      m(this, l, e);
+    }
+    /** Size variant, either m or s. */
+    get size() {
+      return _(this, g);
+    }
+    set size(e) {
+      m(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 R(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=${j[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=${q[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;
+    P = [c({ type: Number })], f = [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, P, { 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, f, { 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, d = { value: o }, s, { kind: "class", name: o.name, metadata: e }, null, z), b = o = d.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 {
+  ee as SbbPaginatorCommonElementMixin
+};

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

@@ -0,0 +1,20 @@
+import { CSSResultGroup, TemplateResult, LitElement } from 'lit';
+declare const SbbCompactPaginatorElement_base: import('../../core/mixins.js').AbstractConstructor<import('../common.js').SbbPaginatorCommonElementMixinType> & typeof LitElement;
+/**
+ * It displays a paginator component in compact mode.
+ *
+ * @event {CustomEvent<SbbPaginatorPageEventDetails>} page - Emits when the pageIndex changes.
+ */
+export declare class SbbCompactPaginatorElement extends SbbCompactPaginatorElement_base {
+    static styles: CSSResultGroup;
+    static readonly events: Record<string, string>;
+    private _renderPageNumbers;
+    protected renderPaginator(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-compact-paginator': SbbCompactPaginatorElement;
+    }
+}
+export {};
+//# sourceMappingURL=compact-paginator.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"compact-paginator.d.ts","sourceRoot":"","sources":["../../../../src/elements/paginator/compact-paginator/compact-paginator.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAIvC,OAAO,kBAAkB,CAAC;;AAI1B;;;;GAIG;AACH,qBAEM,0BAA2B,SAAQ,+BAA0C;IACjF,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAE1C;IAEX,OAAO,CAAC,kBAAkB;cAcP,eAAe,IAAI,cAAc;CASrD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,uBAAuB,EAAE,0BAA0B,CAAC;KACrD;CACF"}

package/paginator/compact-paginator.d.ts

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

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

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

package/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/paginator/paginator.d.ts

@@ -0,0 +1,51 @@
+import { CSSResultGroup, LitElement, PropertyValues, TemplateResult } from 'lit';
+declare const SbbPaginatorElement_base: import('../../core/mixins.js').AbstractConstructor<import('../common.js').SbbPaginatorCommonElementMixinType> & typeof LitElement;
+/**
+ * It displays a paginator component.
+ *
+ * @event {CustomEvent<SbbPaginatorPageEventDetails>} page - Emits when the pageIndex changes.
+ */
+export declare class SbbPaginatorElement extends SbbPaginatorElement_base {
+    static styles: CSSResultGroup;
+    static readonly events: Record<string, string>;
+    /** The available `pageSize` choices. */
+    set pageSizeOptions(value: number[]);
+    get pageSizeOptions(): number[] | undefined;
+    private _pageSizeOptions?;
+    /**
+     * 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.
+     */
+    accessor pagerPosition: 'start' | 'end';
+    private _paginatorOptionsLabel;
+    private _markForFocus;
+    private _updateSelectAriaLabelledBy;
+    protected updated(changedProperties: PropertyValues<this>): void;
+    /**
+     * If the `pageSize` changes due to user interaction with the `pageSizeOptions` select,
+     * emit the `page` event and then update the `pageSize` value.
+     */
+    private _pageSizeChanged;
+    /** Returns the displayed page elements. */
+    private _getVisiblePages;
+    /**
+     * 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.
+     */
+    private _getVisiblePagesIndex;
+    /** Creates an array of consecutive numbers given the length and the starting value. */
+    private _range;
+    private _handleKeyUp;
+    private _renderItemPerPageTemplate;
+    private _renderPageNumbers;
+    protected renderPaginator(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-paginator': SbbPaginatorElement;
+    }
+}
+export {};
+//# sourceMappingURL=paginator.d.ts.map

package/paginator/paginator/paginator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"paginator.d.ts","sourceRoot":"","sources":["../../../../src/elements/paginator/paginator/paginator.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EAEV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAWb,OAAO,qBAAqB,CAAC;AAC7B,OAAO,iBAAiB,CAAC;AACzB,OAAO,iBAAiB,CAAC;AACzB,OAAO,6BAA6B,CAAC;;AAMrC;;;;GAIG;AACH,qBAEM,mBAAoB,SAAQ,wBAA0C;IAC1E,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAE1C;IAEX,wCAAwC;IACxC,IACW,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,EAGzC;IACD,IAAW,eAAe,IAAI,MAAM,EAAE,GAAG,SAAS,CAEjD;IACD,OAAO,CAAC,gBAAgB,CAAC,CAAW;IAEpC;;;OAGG;IACH,SAAmF,aAAa,EAC5F,OAAO,GACP,KAAK,CAAW;IAEpB,OAAO,CAAC,sBAAsB,CAA6C;IAC3E,OAAO,CAAC,aAAa,CAAuB;IAC5C,OAAO,CAAC,2BAA2B,CAAkB;cAElC,OAAO,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IA0BzE;;;OAGG;IACH,OAAO,CAAC,gBAAgB;IAUxB,2CAA2C;IAC3C,OAAO,CAAC,gBAAgB;IAIxB;;;;;OAKG;IACH,OAAO,CAAC,qBAAqB;IA2B7B,uFAAuF;IACvF,OAAO,CAAC,MAAM;IAId,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,0BAA0B;IA+BlC,OAAO,CAAC,kBAAkB;cAiCP,eAAe,IAAI,cAAc;CAiBrD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,eAAe,EAAE,mBAAmB,CAAC;KACtC;CACF"}

package/paginator/paginator.d.ts

@@ -1,91 +1,2 @@
-import { CSSResultGroup, LitElement, PropertyValues, TemplateResult } from 'lit';
-export type SbbPaginatorPageEventDetails = {
-    length: number;
-    pageSize: number;
-    pageIndex: number;
-    previousPageIndex: number;
-};
-declare const SbbPaginatorElement_base: import('../core/mixins.js').AbstractConstructor<import('../core/mixins.js').SbbNegativeMixinType> & import('../core/mixins.js').AbstractConstructor<import('../core/mixins.js').SbbDisabledMixinType> & typeof LitElement;
-/**
- * It displays a paginator component.
- *
- * @event {CustomEvent<SbbPaginatorPageEventDetails>} page - Emits when the pageIndex changes.
- */
-export declare class SbbPaginatorElement extends SbbPaginatorElement_base {
-    static styles: CSSResultGroup;
-    static readonly events: Record<string, string>;
-    /** Total number of items. */
-    set length(value: number);
-    get length(): number;
-    private _length;
-    /** Number of items per page. */
-    set pageSize(value: number);
-    get pageSize(): number;
-    private _pageSize;
-    /** Current page index. */
-    set pageIndex(value: number);
-    get pageIndex(): number;
-    private _pageIndex;
-    /** The available `pageSize` choices. */
-    set pageSizeOptions(value: number[]);
-    get pageSizeOptions(): number[] | undefined;
-    private _pageSizeOptions?;
-    /**
-     * 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.
-     */
-    pagerPosition: 'start' | 'end';
-    /** Size variant, either m or s. */
-    size: 'm' | 's';
-    private _page;
-    private _paginatorOptionsLabel;
-    private _language;
-    private _markForFocus;
-    private _updateSelectAriaLabelledBy;
-    protected updated(changedProperties: PropertyValues<this>): void;
-    /**
-     * 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).
-     */
-    private _numberOfPages;
-    /**
-     * If the `pageSize` changes due to user interaction with the `pageSizeOptions` select,
-     * emit the `page` event and then update the `pageSize` value.
-     */
-    private _pageSizeChanged;
-    /**
-     * If the `pageIndex` changes due to user interaction,
-     * emit the `page` event and then update the `pageIndex` value.
-     */
-    private _pageIndexChanged;
-    private _emitPageEvent;
-    /** Returns the displayed page elements. */
-    private _getVisiblePages;
-    /** Evaluate `pageIndex` by excluding edge cases. */
-    private _coercePageIndexInRange;
-    /**
-     * 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.
-     */
-    private _getVisiblePagesIndex;
-    /** Creates an array of consecutive numbers given the length and the starting value. */
-    private _range;
-    private _handleKeyUp;
-    private _currentPageLabel;
-    private _renderPrevNextButtons;
-    private _renderItemPerPageTemplate;
-    private _renderPageNumbers;
-    protected render(): TemplateResult;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'sbb-paginator': SbbPaginatorElement;
-    }
-    interface HTMLElementEventMap {
-        page: CustomEvent<SbbPaginatorPageEventDetails>;
-    }
-}
-export {};
+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,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EAEV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAoBb,OAAO,0BAA0B,CAAC;AAClC,OAAO,gCAAgC,CAAC;AACxC,OAAO,eAAe,CAAC;AACvB,OAAO,kBAAkB,CAAC;AAC1B,OAAO,cAAc,CAAC;AACtB,OAAO,cAAc,CAAC;AACtB,OAAO,0BAA0B,CAAC;AAElC,MAAM,MAAM,4BAA4B,GAAG;IACzC,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,iBAAiB,EAAE,MAAM,CAAC;CAC3B,CAAC;;AAMF;;;;GAIG;AACH,qBAIa,mBAAoB,SAAQ,wBAA8C;IACrF,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAE1C;IAEX,6BAA6B;IAC7B,IACW,MAAM,CAAC,KAAK,EAAE,MAAM,EAK9B;IACD,IAAW,MAAM,IAAI,MAAM,CAE1B;IACD,OAAO,CAAC,OAAO,CAAa;IAE5B,gCAAgC;IAChC,IACW,QAAQ,CAAC,KAAK,EAAE,MAAM,EAMhC;IACD,IAAW,QAAQ,IAAI,MAAM,CAE5B;IACD,OAAO,CAAC,SAAS,CAAc;IAE/B,0BAA0B;IAC1B,IACW,SAAS,CAAC,KAAK,EAAE,MAAM,EAEjC;IACD,IAAW,SAAS,IAAI,MAAM,CAE7B;IACD,OAAO,CAAC,UAAU,CAAa;IAE/B,wCAAwC;IACxC,IACW,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,EAGzC;IACD,IAAW,eAAe,IAAI,MAAM,EAAE,GAAG,SAAS,CAEjD;IACD,OAAO,CAAC,gBAAgB,CAAC,CAAW;IAEpC;;;OAGG;IAC8D,aAAa,EAAE,OAAO,GAAG,KAAK,CACrF;IAEV,mCAAmC;IACC,IAAI,EAAE,GAAG,GAAG,GAAG,CAAO;IAE1D,OAAO,CAAC,KAAK,CAIX;IAEF,OAAO,CAAC,sBAAsB,CAA6C;IAC3E,OAAO,CAAC,SAAS,CAAmC;IACpD,OAAO,CAAC,aAAa,CAAuB;IAC5C,OAAO,CAAC,2BAA2B,CAAkB;cAElC,OAAO,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IA8BzE;;;OAGG;IACH,OAAO,CAAC,cAAc;IAItB;;;OAGG;IACH,OAAO,CAAC,gBAAgB;IAUxB;;;OAGG;IACH,OAAO,CAAC,iBAAiB;IASzB,OAAO,CAAC,cAAc;IAStB,2CAA2C;IAC3C,OAAO,CAAC,gBAAgB;IAIxB,oDAAoD;IACpD,OAAO,CAAC,uBAAuB;IAO/B;;;;;OAKG;IACH,OAAO,CAAC,qBAAqB;IA2B7B,uFAAuF;IACvF,OAAO,CAAC,MAAM;IAId,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,sBAAsB;IAsB9B,OAAO,CAAC,0BAA0B;IA+BlC,OAAO,CAAC,kBAAkB;cAiCP,MAAM,IAAI,cAAc;CAkB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,eAAe,EAAE,mBAAmB,CAAC;KACtC;IACD,UAAU,mBAAmB;QAC3B,IAAI,EAAE,WAAW,CAAC,4BAA4B,CAAC,CAAC;KACjD;CACF"}
+{"version":3,"file":"paginator.d.ts","sourceRoot":"","sources":["../../../src/elements/paginator/paginator.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC"}

package/paginator/paginator.js

@@ -0,0 +1,171 @@
+var x = (t) => {
+  throw TypeError(t);
+};
+var z = (t, r, i) => r.has(t) || x("Cannot " + i);
+var w = (t, r, i) => (z(t, r, "read from private field"), i ? i.call(t) : r.get(t)), P = (t, r, i) => r.has(t) ? x("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(t) : r.set(t, i), d = (t, r, i, s) => (z(t, r, "write to private field"), s ? s.call(t, i) : r.set(t, i), i);
+import { __runInitializers as l, __esDecorate as u } from "tslib";
+import { css as I, LitElement as O, html as b, nothing as k } from "lit";
+import { customElement as A, property as S } from "lit/decorators.js";
+import { repeat as $ } from "lit/directives/repeat.js";
+import { sbbInputModalityDetector as E } from "../core/a11y.js";
+import { i18nItemsPerPage as L, i18nPage as j } from "../core/i18n.js";
+import { SbbPaginatorCommonElementMixin as F } from "./common.js";
+import "../form-field.js";
+import "../select.js";
+import "../option.js";
+import "../screen-reader-only.js";
+const B = I`*,: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-zero-time, 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__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:not([data-focus-origin=mouse],[data-focus-origin=touch]):before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) 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}`, g = 3;
+let D = 0, J = (() => {
+  var p, n;
+  let t = [A("sbb-paginator")], r, i = [], s, h = F(O), m = [], _, v, f = [], y = [];
+  return n = class extends h {
+    constructor() {
+      super(...arguments);
+      P(this, p);
+      this._pageSizeOptions = l(this, m), d(this, p, l(this, f, "start")), this._paginatorOptionsLabel = (l(this, y), `sbb-paginator-options-label-${++D}`), this._markForFocus = null, this._updateSelectAriaLabelledBy = !1;
+    }
+    /** The available `pageSize` choices. */
+    set pageSizeOptions(a) {
+      this._pageSizeOptions = a, this._updateSelectAriaLabelledBy = !0;
+    }
+    get pageSizeOptions() {
+      return this._pageSizeOptions;
+    }
+    /**
+     * 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 w(this, p);
+    }
+    set pagerPosition(a) {
+      d(this, p, a);
+    }
+    updated(a) {
+      if (super.updated(a), this._markForFocus && E.mostRecentModality === "keyboard") {
+        const o = this._getVisiblePages().find((c) => this.pageIndex === +c.getAttribute("data-index"));
+        o && o.focus(), this._markForFocus = null;
+      }
+      const e = this.shadowRoot.querySelector("sbb-select");
+      e && this._updateSelectAriaLabelledBy && (e.setAttribute("aria-labelledby", this._paginatorOptionsLabel), this._updateSelectAriaLabelledBy = !1);
+    }
+    /**
+     * If the `pageSize` changes due to user interaction with the `pageSizeOptions` select,
+     * emit the `page` event and then update the `pageSize` value.
+     */
+    _pageSizeChanged(a) {
+      const e = this.pageSize, o = this.pageIndex;
+      this.pageSize = a, e !== this.pageSize && this.emitPageEvent(o);
+    }
+    /** 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 a = this.numberOfPages(), e = this.pageIndex;
+      return a <= g + 2 ? this._range(a) : e < g ? [...this._range(g + 1), "ellipsis", a - 1] : e >= a - g ? [
+        0,
+        "ellipsis",
+        ...this._range(g + 1, a - 1 - g)
+      ] : [
+        0,
+        "ellipsis",
+        e - 1,
+        e,
+        e + 1,
+        "ellipsis",
+        a - 1
+      ];
+    }
+    /** Creates an array of consecutive numbers given the length and the starting value. */
+    _range(a, e = 0) {
+      return Array.from({ length: a }, (o, c) => c + e);
+    }
+    _handleKeyUp(a) {
+      if (a.key !== " " && a.key !== "Enter")
+        return;
+      this._getVisiblePages().find((o) => o === a.target) && (this._markForFocus = this.pageIndex);
+    }
+    _renderItemPerPageTemplate() {
+      var a;
+      return this.pageSizeOptions && this.pageSizeOptions.length > 0 ? b`
+          <div class="sbb-paginator__page-size-options">
+            <label id=${this._paginatorOptionsLabel}>
+              ${L[this.language.current]}
+            </label>
+            <sbb-form-field
+              borderless
+              width="collapse"
+              ?negative=${this.negative}
+              size=${this.size}
+            >
+              <sbb-select
+                ?disabled=${this.disabled}
+                value=${((a = this.pageSizeOptions) == null ? void 0 : a.find((e) => e === this.pageSize)) ?? this.pageSizeOptions[0]}
+                @change=${(e) => this._pageSizeChanged(+e.target.value)}
+              >
+                ${$(this.pageSizeOptions, (e) => b`<sbb-option value=${e}>${e}</sbb-option>`)}
+              </sbb-select>
+            </sbb-form-field>
+          </div>
+        ` : k;
+    }
+    _renderPageNumbers() {
+      return b`
+      <ul class="sbb-paginator__pages">
+        ${$(this._getVisiblePagesIndex(), (a) => a === "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 === a}
+                      ?disabled=${this.disabled}
+                      class="sbb-paginator__page--number-item"
+                      data-index=${a}
+                      aria-label="${j[this.language.current]} ${a + 1}"
+                      aria-current=${this.pageIndex === a ? "true" : k}
+                      @click=${() => this.pageIndexChanged(a)}
+                      @keyup=${this._handleKeyUp}
+                    >
+                      <span class="sbb-paginator__page--number-item-label">${a + 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(), s = n, (() => {
+    const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(h[Symbol.metadata] ?? null) : void 0;
+    _ = [S({ attribute: "page-size-options", type: Array })], v = [S({ attribute: "pager-position", reflect: !0 })], u(n, null, _, { kind: "setter", name: "pageSizeOptions", static: !1, private: !1, access: { has: (e) => "pageSizeOptions" in e, set: (e, o) => {
+      e.pageSizeOptions = o;
+    } }, metadata: a }, null, m), u(n, null, v, { kind: "accessor", name: "pagerPosition", static: !1, private: !1, access: { has: (e) => "pagerPosition" in e, get: (e) => e.pagerPosition, set: (e, o) => {
+      e.pagerPosition = o;
+    } }, metadata: a }, f, y), u(null, r = { value: s }, t, { kind: "class", name: s.name, metadata: a }, null, i), s = r.value, a && Object.defineProperty(s, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a });
+  })(), n.styles = B, n.events = {
+    page: "page"
+  }, l(s, i), s;
+})();
+export {
+  J as SbbPaginatorElement
+};

package/paginator.d.ts

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

package/paginator.d.ts.map

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