dap-design-system
Version:
Official design system for the DÁP (dap.gov.hu)
249 lines (248 loc) • 8.48 kB
JavaScript
import "../../node_modules/@lit/reactive-element/reactive-element.js";
import { nothing as p, html as u } from "../../node_modules/lit-html/lit-html.js";
import "../../node_modules/lit-element/lit-element.js";
import { property as i } from "../../node_modules/@lit/reactive-element/decorators/property.js";
import { state as m } from "../../node_modules/@lit/reactive-element/decorators/state.js";
import { DdsElement as b } from "../../internal/dds-hu-element.js";
import "../../localization/localization.js";
import c from "../button/button.component.js";
import S from "../icons/arrows/arrows-arrow-down-s-fill/arrows-arrow-down-s-fill.component.js";
import x from "../option-item/option-item.component.js";
import f from "../select/select.component.js";
import y from "./pager.scss.js";
import { unsafeCSS as w } from "../../node_modules/@lit/reactive-element/css-tag.js";
import { translate as h } from "../../node_modules/lit-i18n/src/lit-i18n.js";
var $ = Object.defineProperty, a = (l, t, s, o) => {
for (var n = void 0, r = l.length - 1, g; r >= 0; r--)
(g = l[r]) && (n = g(t, s, n) || n);
return n && $(t, s, n), n;
};
const d = class d extends b {
constructor() {
super(...arguments), this.disabled = !1, this.manualPagination = !1, this.pageIndex = 0, this._pageIndex = 0, this.pageSize = 10, this._pageSize = 10, this.totalRows = 0, this.pageSizeOptions = [10, 25, 50, 100], this.showPageSizeOptions = "true", this.showPageIndex = "true", this.showPageCount = "true", this.showFirstButton = "true", this.showPreviousButton = "true", this.showNextButton = "true", this.showLastButton = "true", this.showPageNumbers = "false", this.siblingCount = 1, this.pageButtonTestId = "pager-button";
}
updated(t) {
super.updated(t), this.manualPagination && (t.has("pageIndex") && (this._pageIndex = this.pageIndex), t.has("pageSize") && (this._pageSize = this.pageSize));
}
updatePageIndex(t, s, o) {
this.manualPagination ? this._pageIndex = s : this.pageIndex = s, this.emit("dds-pagination-change", {
action: t,
pagination: {
pageIndex: s,
pageSize: o
}
});
}
updatePageSize(t) {
this.manualPagination ? (this._pageSize = t, this._pageIndex = 0) : (this.pageSize = t, this.pageIndex = 0), this.emit("dds-pagination-change", {
action: "pageSize",
pagination: {
pageIndex: 0,
pageSize: t
}
});
}
renderPageSizeSelect() {
return this.showPageSizeOptions !== "true" ? p : u`<dap-ds-select
class="pager__select"
part="page-size"
exportparts="base:page-size-select-base, trigger:page-size-select-trigger"
floatingStrategy="fixed"
noAnimation
?disabled=${this.disabled}
size="xs"
.value=${this.manualPagination ? this._pageSize.toString() : this.pageSize.toString()}
-change=${(t) => {
t.target.value && this.updatePageSize(Number(t.target.value));
}}>
<dap-ds-icon-arrow-down-s-fill
slot="indicator-icon"
size="16"></dap-ds-icon-arrow-down-s-fill>
${this.pageSizeOptions && this.pageSizeOptions.length > 0 ? this.pageSizeOptions.map(
(t) => u`<dap-ds-option-item
value=${t}
label=${h("pager.pageSize", { count: t })}
>${t}</dap-ds-option-item
>`
) : p}
</dap-ds-select>`;
}
renderNavigationButton(t, s, o, n, r, g) {
return u`<dap-ds-button
part=${t}
data-testid="${this.pageButtonTestId}-${t}"
size="xs"
aria-label=${h(`pager.${s}`)}
exportparts="base:pager-button-${t}-base, content:pager-button-${t}-content"
variant="subtle-neutral"
=${() => this.updatePageIndex(s, o, this.pageSize)}
?disabled=${n || this.disabled}>
<slot name=${g}> ${r} </slot>
</dap-ds-button>`;
}
/** Windowed list of page indexes to show around the current page. */
pageNumberWindow(t, s) {
const o = Math.max(0, t - this.siblingCount), n = Math.min(s - 1, t + this.siblingCount), r = [];
for (let g = o; g <= n; g++) r.push(g);
return r;
}
renderPageNumbers() {
if (this.showPageNumbers !== "true") return p;
const t = this.manualPagination ? this._pageIndex : this.pageIndex, s = Math.max(1, Math.ceil(this.totalRows / this.pageSize));
return u`<div part="page-numbers" class="pager__page-numbers">
${this.pageNumberWindow(t, s).map((o) => {
const n = o === t;
return u`<dap-ds-button
part=${n ? "page-number page-number-active" : "page-number"}
exportparts="base:page-number-base, content:page-number-content"
class="pager__page-number${n ? " pager__page-number--active" : ""}"
data-testid="${this.pageButtonTestId}-page-${o}"
size="xs"
variant=${n ? "primary" : "subtle-neutral"}
aria-current=${n ? "page" : p}
=${() => this.updatePageIndex("page", o, this.pageSize)}
?disabled=${this.disabled}
>${o + 1}</dap-ds-button
>`;
})}
</div>`;
}
renderPageInfo() {
if (this.showPageIndex !== "true") return p;
const t = this.manualPagination ? this._pageIndex : this.pageIndex, s = this.manualPagination ? this._pageSize : this.pageSize;
if (this.pageStateText) {
const o = this.pageStateText(t, s, this.totalRows);
return u`<span part="page-info" class="pager__info"
>${o}</span
>`;
}
return u`<span part="page-info" class="pager__info"
>${h("pager.pageInfo", {
rangeStart: t * s + 1,
rangeEnd: (t + 1) * s,
totalRows: this.totalRows
})}</span
>`;
}
render() {
const t = this.pageIndex === Math.ceil(this.totalRows / this.pageSize) - 1;
return u`
<div part="base" class="pager">
${this.renderPageSizeSelect()}
${this.showFirstButton === "true" ? this.renderNavigationButton(
"first",
"first",
0,
this.pageIndex === 0,
this.firstButtonLabel || h("pager.first"),
"first-button-label"
) : p}
${this.showPreviousButton === "true" ? this.renderNavigationButton(
"previous",
"previous",
this.pageIndex - 1,
this.pageIndex === 0,
this.previousButtonLabel || h("pager.previous"),
"previous-button-label"
) : p}
${this.renderPageNumbers()} ${this.renderPageInfo()}
${this.showNextButton === "true" ? this.renderNavigationButton(
"next",
"next",
this.pageIndex + 1,
t,
this.nextButtonLabel || h("pager.next"),
"next-button-label"
) : p}
${this.showLastButton === "true" ? this.renderNavigationButton(
"last",
"last",
Math.ceil(this.totalRows / this.pageSize) - 1,
t,
this.lastButtonLabel || h("pager.last"),
"last-button-label"
) : p}
</div>
`;
}
};
d.tagName = "dap-ds-pager", d.dependencies = {
"dap-ds-select": f,
"dap-ds-icon-arrow-down-s-fill": S,
"dap-ds-option-item": x,
"dap-ds-button": c
}, d.styles = w(y);
let e = d;
a([
i({ type: Boolean })
], e.prototype, "disabled");
a([
i({ type: Boolean })
], e.prototype, "manualPagination");
a([
i({ type: Number })
], e.prototype, "pageIndex");
a([
m()
], e.prototype, "_pageIndex");
a([
i({ type: Number })
], e.prototype, "pageSize");
a([
m()
], e.prototype, "_pageSize");
a([
i({ type: Number })
], e.prototype, "totalRows");
a([
i({ type: Array })
], e.prototype, "pageSizeOptions");
a([
i({ type: String })
], e.prototype, "showPageSizeOptions");
a([
i({ type: String })
], e.prototype, "showPageIndex");
a([
i({ type: String })
], e.prototype, "showPageCount");
a([
i({ type: String })
], e.prototype, "showFirstButton");
a([
i({ type: String })
], e.prototype, "showPreviousButton");
a([
i({ type: String })
], e.prototype, "showNextButton");
a([
i({ type: String })
], e.prototype, "showLastButton");
a([
i({ type: String })
], e.prototype, "showPageNumbers");
a([
i({ type: Number })
], e.prototype, "siblingCount");
a([
i({ type: String })
], e.prototype, "firstButtonLabel");
a([
i({ type: String })
], e.prototype, "previousButtonLabel");
a([
i({ type: String })
], e.prototype, "nextButtonLabel");
a([
i({ type: String })
], e.prototype, "lastButtonLabel");
a([
i()
], e.prototype, "pageButtonTestId");
a([
i({ attribute: !1 })
], e.prototype, "pageStateText");
export {
e as default
};
//# sourceMappingURL=pager.component.js.map