@public-ui/components
Version:
Contains all web components that belong to KoliBri - The accessible HTML-Standard.
417 lines (412 loc) • 19.2 kB
JavaScript
/*!
* KoliBri - The accessible HTML-Standard
*/
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { S as STATE_CHANGE_EVENT } from './common.js';
import { I as watchNumber, a as watchValidator, G as watchJsonArrayString, p as parseJson } from './prop.validators.js';
import { v as validateCustomClass } from './custom-class.js';
import { v as validateLabel } from './label.js';
import { v as validateTooltipAlign } from './tooltip-align.js';
import { b as KolButtonWcTag, h as KolSelectWcTag } from './component-names.js';
import { t as translate } from './i18n.js';
import { n as nonce } from './dev.utils.js';
import { d as dispatchDomEvent, K as KolEvent } from './events.js';
import { r as removeNavLabel, a as addNavLabel } from './unique-nav-labels.js';
const validateMax = (component, value, options) => {
watchNumber(component, '_max', value, options);
};
const leftDoubleArrowIcon = {
left: 'kolicon-chevron-double-left',
};
const leftSingleArrow = {
left: 'kolicon-chevron-left',
};
const rightSingleArrowIcon = {
right: 'kolicon-chevron-right',
};
const rightDoubleArrowIcon = {
right: 'kolicon-chevron-double-right',
};
function getUserLanguage() {
const userLanguage = navigator.language || 'de-DE';
const normalizedLanguage = userLanguage.includes('-') ? userLanguage : `${userLanguage}-${userLanguage.toUpperCase()}`;
return normalizedLanguage;
}
const userLanguage = getUserLanguage();
const NUMBER_FORMATTER = new Intl.NumberFormat(userLanguage, {
style: 'decimal',
minimumFractionDigits: 0,
maximumFractionDigits: 0,
});
const KolPaginationWc$1 = proxyCustomElement(class KolPaginationWc extends HTMLElement {
constructor(registerHost) {
super();
if (registerHost !== false) {
this.__registerHost();
}
this.translatePageFirst = translate('kol-page-first');
this.translatePageBack = translate('kol-page-back');
this.translatePageNext = translate('kol-page-next');
this.translatePageLast = translate('kol-page-last');
this.translateEntriesPerSite = translate('kol-entries-per-site');
this.translatePage = translate('kol-page');
this.translatePagination = translate('kol-pagination');
this.calcCount = (total, pageSize = 1) => Math.ceil(total / pageSize);
this.getCount = () => this.calcCount(this.state._max, this.state._pageSize);
this._boundaryCount = 1;
this._hasButtons = true;
this._pageSize = 1;
this._pageSizeOptions = [];
this._siblingCount = 1;
this._tooltipAlign = 'top';
this.state = {
_boundaryCount: 1,
_label: this.translatePagination,
_hasButtons: {
first: true,
last: true,
next: true,
previous: true,
},
_on: {
onClick: () => null,
},
_page: 0,
_pageSize: 1,
_pageSizeOptions: [],
_siblingCount: 1,
_max: 0,
};
this.onClick = (event, page) => {
if (typeof this.state._on.onClick === 'function') {
this.state._on.onClick(event, page);
}
if (this.host) {
dispatchDomEvent(this.host, KolEvent.click, page);
}
this.onChangePage(event, page);
};
this.onChangePage = (event, page) => {
const timeout = setTimeout(() => {
clearTimeout(timeout);
if (typeof this.state._on.onChangePage === 'function') {
this.state._on.onChangePage(event, page);
}
if (this.host) {
dispatchDomEvent(this.host, KolEvent.changePage, page);
}
});
};
this.onChangePageSize = (event, value) => {
value = parseInt(value);
if (typeof value === 'number' && value > 0 && this._pageSize !== value) {
this._pageSize = value;
const timeout = setTimeout(() => {
clearTimeout(timeout);
if (typeof this.state._on.onChangePageSize === 'function') {
this.state._on.onChangePageSize(event, this._pageSize);
}
if (this.host) {
dispatchDomEvent(this.host, KolEvent.changePageSize, this._pageSize);
}
});
}
};
this.onGoToFirst = {
onClick: (event) => {
this.onClick(event, 1);
},
};
this.onGoToEnd = {
onClick: (event) => {
this.onClick(event, this.getCount());
},
};
this.onGoBackward = {
onClick: (event) => {
this.onClick(event, this.state._page - 1);
},
};
this.onGoForward = {
onClick: (event) => {
this.onClick(event, this.state._page + 1);
},
};
this.beforePageSize = (_nextValue, nextState) => {
let pageSize = nextState.has('_pageSize') ? nextState.get('_pageSize') : this.state._pageSize;
const pageSizeOptions = nextState.has('_pageSizeOptions') ? nextState.get('_pageSizeOptions') : this.state._pageSizeOptions;
if (Array.isArray(pageSizeOptions) && pageSizeOptions.length > 0) {
const find = pageSizeOptions.find((option) => option.value === pageSize);
if (find === undefined) {
pageSize = pageSizeOptions[0].value;
}
else {
pageSize = find.value;
}
nextState.set('_pageSize', pageSize);
}
const page = nextState.has('_page') ? nextState.get('_page') : this.state._page;
const total = nextState.has('_max') ? nextState.get('_max') : this.state._max;
this.syncPage(nextState, page, nextState.get('_pageSize'), total);
};
this.syncPage = (nextState, page, pageSize, total) => {
if (total > 0) {
const count = this.calcCount(total, pageSize);
if (count > 0) {
if (page > count) {
nextState.set('_page', count);
this.onChangePage(STATE_CHANGE_EVENT, count);
}
else if (page < 1) {
nextState.set('_page', 1);
this.onChangePage(STATE_CHANGE_EVENT, 1);
}
}
}
};
this.beforePageSizeOptions = (nextValue, nextState) => {
const options = [];
if (Array.isArray(nextValue)) {
for (const value of nextValue) {
if (typeof value === 'number') {
options.push({
label: `${value}`,
value: value,
});
}
}
}
nextState.set('_pageSizeOptions', options);
this.beforePageSize(options, nextState);
};
}
getPageStart() {
return Math.max(0, (this.state._page - 1) * this.state._pageSize + 1);
}
getPageEnd() {
const highest = this.state._page * this.state._pageSize;
if (this.state._max < highest) {
return this.state._max;
}
return highest;
}
render() {
var _a;
let ellipsis = false;
const count = this.getCount();
const pageButtons = Array.from({ length: count }, (_, i) => i + 1).map((page) => {
if (page <= this.state._boundaryCount ||
page > count - this.state._boundaryCount ||
(page >= this.state._page - this.state._siblingCount && page <= this.state._page + this.state._siblingCount)) {
ellipsis = true;
if (this.state._page === page) {
return this.getSelectedPageButton(page);
}
else {
return this.getUnselectedPageButton(page);
}
}
else if (ellipsis === true) {
ellipsis = false;
return (h("li", { key: nonce() }, h("span", { class: "kol-pagination__separator", "aria-hidden": "true" })));
}
else {
return null;
}
});
return (h(Host, { class: "kol-pagination" }, h("span", { role: "status", "aria-live": "polite", class: "kol-pagination__entries" }, translate('kol-table-visible-range', {
placeholders: {
start: NUMBER_FORMATTER.format(this.getPageStart()),
end: NUMBER_FORMATTER.format(this.getPageEnd()),
total: NUMBER_FORMATTER.format(this.state._max),
},
})), h("nav", { class: "kol-pagination__navigation", "aria-label": this.state._label }, h("ul", { class: "kol-pagination__navigation-list" }, this.state._hasButtons.first && (h("li", null, h(KolButtonWcTag, { class: "kol-pagination__button kol-pagination__button--first", _customClass: this.state._customClass, _disabled: this.state._page <= 1, _icons: leftDoubleArrowIcon, _hideLabel: true, _label: this.translatePageFirst, _on: this.onGoToFirst, _tooltipAlign: this.state._tooltipAlign }))), this.state._hasButtons.previous && (h("li", null, h(KolButtonWcTag, { class: "kol-pagination__button kol-pagination__button--previous", _customClass: this.state._customClass, _disabled: this.state._page <= 1, _icons: leftSingleArrow, _hideLabel: true, _label: this.translatePageBack, _on: this.onGoBackward, _tooltipAlign: this.state._tooltipAlign }))), pageButtons, this.state._hasButtons.next && (h("li", null, h(KolButtonWcTag, { class: "kol-pagination__button kol-pagination__button--next", _customClass: this.state._customClass, _disabled: count <= this.state._page, _icons: rightSingleArrowIcon, _hideLabel: true, _label: this.translatePageNext, _on: this.onGoForward, _tooltipAlign: this.state._tooltipAlign }))), this.state._hasButtons.last && (h("li", null, h(KolButtonWcTag, { class: "kol-pagination__button kol-pagination__button--last", _customClass: this.state._customClass, _disabled: count <= this.state._page, _icons: rightDoubleArrowIcon, _hideLabel: true, _label: this.translatePageLast, _on: this.onGoToEnd, _tooltipAlign: this.state._tooltipAlign }))))), ((_a = this.state._pageSizeOptions) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("div", { class: "page-size" }, h(KolSelectWcTag, { class: "kol-pagination__page-size-select", _label: this.translateEntriesPerSite, _options: this.state._pageSizeOptions, _on: {
onChange: this.onChangePageSize,
}, _value: this.state._pageSize })))));
}
getUnselectedPageButton(page) {
const pageText = NUMBER_FORMATTER.format(page);
const ariaDescription = `${this.translatePage} ${pageText}`;
return (h("li", { key: nonce() }, h(KolButtonWcTag, { class: "kol-pagination__button kol-pagination__button--numbers", _ariaDescription: ariaDescription, _customClass: this.state._customClass, _label: pageText, _on: {
onClick: (event) => {
this.onClick(event, page);
},
} })));
}
getSelectedPageButton(page) {
const pageText = NUMBER_FORMATTER.format(page);
const ariaDescription = `${this.translatePage} ${pageText}`;
return (h("li", { key: nonce() }, h(KolButtonWcTag, { "aria-current": "page", class: "kol-pagination__button kol-pagination__button--selected selected", _ariaDescription: ariaDescription, _customClass: this.state._customClass, _label: pageText })));
}
validateBoundaryCount(value) {
watchNumber(this, '_boundaryCount', Math.max(0, value !== null && value !== void 0 ? value : 1));
}
validateCustomClass(value) {
validateCustomClass(this, value);
}
validateLabel(label, _oldValue, initial = false) {
if (!initial) {
removeNavLabel(this.state._label);
}
validateLabel(this, label);
addNavLabel(this.state._label);
}
validateHasButtons(value) {
watchValidator(this, '_hasButtons', (value) => typeof value === 'boolean' || typeof value === 'string' || (typeof value === 'object' && value !== null), new Set(['Boolean', 'PaginationHasButton']), value, {
hooks: {
beforePatch: (nextValue, nextState) => {
if (typeof nextValue === 'boolean') {
nextState.set('_hasButtons', {
first: nextValue,
last: nextValue,
next: nextValue,
previous: nextValue,
});
}
else {
if (typeof nextValue === 'string') {
try {
nextValue = parseJson(nextValue);
}
catch (_a) {
nextState.delete('_hasButtons');
}
}
if (typeof nextValue === 'object' && nextValue !== null) {
nextState.set('_hasButtons', Object.assign(Object.assign({}, this.state._hasButtons), { first: typeof nextValue.first === 'boolean'
? nextValue.first === true
: this.state._hasButtons.first, last: typeof nextValue.last === 'boolean'
? nextValue.last === true
: this.state._hasButtons.last, next: typeof nextValue.next === 'boolean'
? nextValue.next === true
: this.state._hasButtons.next, previous: typeof nextValue.previous === 'boolean'
? nextValue.previous === true
: this.state._hasButtons.previous }));
}
}
},
},
});
}
validateOn(value) {
if (typeof value === 'object' && value !== null) {
this.state = Object.assign(Object.assign({}, this.state), { _on: value });
}
}
validatePage(value) {
watchNumber(this, '_page', value, {
hooks: {
beforePatch: (_nextValue, nextState) => {
const pageSize = nextState.has('_pageSize') ? nextState.get('_pageSize') : this.state._pageSize;
const total = nextState.has('_max') ? nextState.get('_max') : this.state._max;
this.syncPage(nextState, _nextValue, pageSize, total);
},
},
});
}
validatePageSize(value) {
watchNumber(this, '_pageSize', value, {
hooks: {
beforePatch: this.beforePageSize,
},
});
}
validatePageSizeOptions(value) {
watchJsonArrayString(this, '_pageSizeOptions', (value) => typeof value === 'number', value, undefined, {
hooks: {
beforePatch: this.beforePageSizeOptions,
},
});
}
validateSiblingCount(value) {
watchNumber(this, '_siblingCount', Math.max(0, value !== null && value !== void 0 ? value : 1));
}
validateMax(value) {
validateMax(this, value, {
hooks: {
beforePatch: (_nextValue, nextState) => {
const page = nextState.has('_page') ? nextState.get('_page') : this.state._page;
const pageSize = nextState.has('_pageSize') ? nextState.get('_pageSize') : this.state._pageSize;
this.syncPage(nextState, page, pageSize, _nextValue);
},
},
});
}
validateTooltipAlign(value) {
validateTooltipAlign(this, value);
}
componentWillLoad() {
this.validateBoundaryCount(this._boundaryCount);
this.validateCustomClass(this._customClass);
this.validateHasButtons(this._hasButtons);
this.validateLabel(this._label, undefined, true);
this.validateOn(this._on);
this.validatePage(this._page);
this.validatePageSize(this._pageSize);
this.validatePageSizeOptions(this._pageSizeOptions);
this.validateSiblingCount(this._siblingCount);
this.validateTooltipAlign(this._tooltipAlign);
this.validateMax(this._max);
this.validatePage(this._page);
}
disconnectedCallback() {
removeNavLabel(this.state._label);
}
get host() { return this; }
static get watchers() { return {
"_boundaryCount": ["validateBoundaryCount"],
"_customClass": ["validateCustomClass"],
"_label": ["validateLabel"],
"_hasButtons": ["validateHasButtons"],
"_on": ["validateOn"],
"_page": ["validatePage"],
"_pageSize": ["validatePageSize"],
"_pageSizeOptions": ["validatePageSizeOptions"],
"_siblingCount": ["validateSiblingCount"],
"_max": ["validateMax"],
"_tooltipAlign": ["validateTooltipAlign"]
}; }
}, [256, "kol-pagination-wc", {
"_boundaryCount": [2, "_boundary-count"],
"_customClass": [1, "_custom-class"],
"_label": [1],
"_hasButtons": [8, "_has-buttons"],
"_page": [2],
"_pageSize": [1026, "_page-size"],
"_pageSizeOptions": [1, "_page-size-options"],
"_on": [16],
"_siblingCount": [2, "_sibling-count"],
"_tooltipAlign": [1, "_tooltip-align"],
"_max": [2],
"state": [32]
}, undefined, {
"_boundaryCount": ["validateBoundaryCount"],
"_customClass": ["validateCustomClass"],
"_label": ["validateLabel"],
"_hasButtons": ["validateHasButtons"],
"_on": ["validateOn"],
"_page": ["validatePage"],
"_pageSize": ["validatePageSize"],
"_pageSizeOptions": ["validatePageSizeOptions"],
"_siblingCount": ["validateSiblingCount"],
"_max": ["validateMax"],
"_tooltipAlign": ["validateTooltipAlign"]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["kol-pagination-wc"];
components.forEach(tagName => { switch (tagName) {
case "kol-pagination-wc":
if (!customElements.get(tagName)) {
customElements.define(tagName, KolPaginationWc$1);
}
break;
} });
}
const KolPaginationWc = KolPaginationWc$1;
const defineCustomElement = defineCustomElement$1;
export { KolPaginationWc, defineCustomElement };
//# sourceMappingURL=kol-pagination-wc.js.map
//# sourceMappingURL=kol-pagination-wc.js.map