@utrecht/web-component-library-stencil
Version:
Stencil component library bundle for the Municipality of Utrecht based on the NL Design System architecture
122 lines (121 loc) • 5.6 kB
JavaScript
/**
* @license EUPL-1.2
* Copyright (c) 2020-2024 Frameless B.V.
* Copyright (c) 2021-2024 Gemeente Utrecht
*/
import { h } from "@stencil/core";
import clsx from "clsx";
export class Pagination {
constructor() {
this.links = undefined;
this.next = undefined;
this.prev = undefined;
this.currentIndex = undefined;
}
render() {
const { currentIndex } = this;
const links = typeof this.links === 'string' ? JSON.parse(this.links) : null;
const next = typeof this.next === 'string' ? JSON.parse(this.next) : null;
const prev = typeof this.prev === 'string' ? JSON.parse(this.next) : null;
const RelativeLink = ({ disabled = false, href = '', rel = null, textContent = '', title = '' }) => disabled ? (h("span", { class: clsx('utrecht-pagination__relative-link', disabled && 'utrecht-pagination__relative-link--disabled', rel === 'next' && 'utrecht-pagination__relative-link--next', rel === 'prev' && 'utrecht-pagination__relative-link--prev'), "aria-label": title || null }, textContent)) : (h("a", { href: href, class: clsx('utrecht-pagination__relative-link', disabled && 'utrecht-pagination__relative-link--disabled', rel === 'next' && 'utrecht-pagination__relative-link--next', rel === 'prev' && 'utrecht-pagination__relative-link--prev'), rel: rel, "aria-label": title || null }, textContent));
const PageLink = ({ current = false, href = '', rel = null, textContent = '' }) => (h("a", { key: '9e8b60917631d35e39d7fe06a54f2c9d0dbd6375', class: clsx('utrecht-pagination__page-link', current && 'utrecht-pagination__page-link--current'), href: href, "aria-current": current ? 'true' : null, rel: rel }, textContent));
return (h("nav", { key: 'b4a4a32686432561343cff76a167870b1c1cedae', class: "utrecht-pagination" }, h("span", { key: '2beeec32c3cb90d03239221b86b0e049f9ca3795', class: "utrecht-pagination__before" }, prev ? RelativeLink(Object.assign(Object.assign({}, prev), { rel: 'prev', textContent: 'Vorige' })) : ''), h("span", { key: 'd4cec0ad6d9b328c4088a0b96a77153020a59bcf', role: "group", class: "utrecht-pagination__pages" }, links
.sort((a, b) => (a.index === b.index ? 0 : a.index > b.index ? 1 : -1))
.map((link, arrayIndex) => {
const index = typeof link.index === 'number' ? link.index : arrayIndex;
return Object.assign({ index, current: typeof currentIndex === 'number' && index === currentIndex, rel: typeof currentIndex === 'number'
? index === currentIndex + 1
? 'next'
: index === currentIndex - 1
? 'prev'
: null
: null, textContent: link.index || index }, link);
})
.map((link) => PageLink(link))), h("span", { key: '7d488456bd2946294a6fae8edda35969896ac69b', class: "utrecht-pagination__before" }, next ? RelativeLink(Object.assign(Object.assign({}, next), { rel: 'next', textContent: 'Volgende' })) : '')));
}
static get is() { return "utrecht-pagination"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["pagination.scss"]
};
}
static get styleUrls() {
return {
"$": ["pagination.css"]
};
}
static get properties() {
return {
"links": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "links",
"reflect": false
},
"next": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "next",
"reflect": false
},
"prev": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "prev",
"reflect": false
},
"currentIndex": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "current-index",
"reflect": false
}
};
}
}
//# sourceMappingURL=pagination.js.map