@rhds/elements
Version:
Red Hat Design System Elements
399 lines • 25.9 kB
JavaScript
var _RhPagination_instances, _RhPagination_mo, _RhPagination_logger, _RhPagination_ol, _RhPagination_links, _RhPagination_firstLink, _RhPagination_lastLink, _RhPagination_nextLink, _RhPagination_prevLink, _RhPagination_currentLink, _RhPagination_currentIndex, _RhPagination_currentPage_get, _RhPagination_getOverflow, _RhPagination_getCurrentLink, _RhPagination_updateLightDOMRefs, _RhPagination_checkValidity, _RhPagination_go, _RhPagination_onKeyup, _RhPagination_onChange;
var RhPagination_1;
import { __classPrivateFieldGet, __classPrivateFieldSet, __decorate } from "tslib";
import { LitElement, html, isServer } from 'lit';
import { customElement } from 'lit/decorators/custom-element.js';
import { property } from 'lit/decorators/property.js';
import { state } from 'lit/decorators/state.js';
import { query } from 'lit/decorators/query.js';
import { ifDefined } from 'lit/directives/if-defined.js';
import { Logger } from '@patternfly/pfe-core/controllers/logger.js';
import { themable } from '@rhds/elements/lib/themable.js';
import { css } from "lit";
const styles = css `:host{--_stepper-size:var(--rh-length-3xl,48px);display:block;min-block-size:4em}:host([size=sm]){--_stepper-size:var(--rh-length-2xl,32px)}[hidden]{display:none!important}#container{container-name:pagination;container-type:inline-size;display:flex;gap:var(--rh-space-2xl,32px) calc(var(--rh-space-xs, 4px)/2);flex-wrap:wrap;--_numeric-a-color:var(--rh-pagination-accent-color,var(--rh-color-interactive-primary-default));--_numeric-a-color-hover:var(--rh-color-interactive-primary-hover);--_numeric-a-color-focus:var(--rh-pagination-accent-color,var(--rh-color-interactive-primary-default));--_numeric-a-color-focus-outline:var(--rh-pagination-accent-color,var(--rh-color-interactive-primary-default));--_numeric-a-color-visited:var(--rh-color-interactive-primary-visited-default);--_numeric-a-color-visited-hover:var(--rh-color-interactive-primary-visited-hover);--_list-a-bg-color:light-dark(var(--rh-color-surface-lighter,#f2f2f2),oklch(from var(--rh-color-surface-dark,#383838) calc(l * 0.82) c h));--_list-a-current-page-border-color:var(--rh-color-border-subtle);--_list-a-current-page-bg-color:light-dark(var(--rh-color-surface-lightest,#fff),var(--rh-color-surface-darkest,#151515));--_list-a-text-color:var(--rh-color-text-primary);--_stepper-bg-color:light-dark(var(--rh-color-surface-lighter,#f2f2f2),oklch(from var(--rh-color-surface-dark,#383838) calc(l * 0.82) c h));--_stepper-hover-focus-color:var(--rh-color-text-primary-on-dark,#fff);--_border-top-hover-color:light-dark(var(--rh-color-gray-60,#4d4d4d),var(--rh-color-border-subtle-on-light,#c7c7c7));--rh-pagination-stepper-color:light-dark(var(--rh-color-gray-50,#707070),var(--rh-color-text-secondary-on-dark,#c7c7c7));--rh-color-icon-status-disabled:light-dark(var(--rh-color-gray-40,#a3a3a3),var(--rh-color-gray-60,#4d4d4d));--rh-pagination-background-focused:var(--rh-color-icon-status-disabled)} pagination (min-width: 768px){#container{flex-wrap:nowrap}}.visually-hidden{border:0;clip:rect(0,0,0,0);block-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;inline-size:1px} pagination (min-width: 344px){.xxs-visually-hidden{border:0;clip:rect(0,0,0,0);block-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;inline-size:1px}} pagination (min-width: 768px){.sm-visually-visible{clip:auto;block-size:auto;margin:0;overflow:visible;padding:0;position:static;white-space:normal;inline-size:auto}}nav{display:none} pagination (min-width: 768px){nav{display:contents}}svg{fill:currentcolor}.stepper{background-color:var(--_stepper-bg-color);border:var(--rh-border-width-sm,1px) solid #0000;color:var(--rh-pagination-stepper-color,var(--rh-color-gray-50,#707070));display:grid;font-family:var(--rh-font-family-heading,RedHatDisplay,"Red Hat Display",Helvetica,Arial,sans-serif);font-size:var(--rh-font-size-heading-xs,1.25rem);block-size:var(--_stepper-size);place-content:center;position:relative;text-decoration:none;inline-size:var(--_stepper-size)}.stepper:focus{border-radius:var(--rh-border-radius-default,3px);outline-offset:-2px;outline:var(--rh-border-width-md,2px) solid #0000;outline-color:var(--rh-pagination-accent-color,var(--rh-color-interactive-primary-default))}.stepper:focus:after,.stepper:focus:before,.stepper:hover:after{border-block-start-style:solid;content:"";inset-inline-start:-1px;position:absolute;inset-block-start:-1px;inline-size:104%}.stepper:focus:before,.stepper:hover:after{border-block-color:var(--_border-top-hover-color);border-block-width:var(--rh-border-width-lg,3px)}.stepper:focus:after{border-block-color:var(--rh-pagination-accent-color,var(--rh-color-border-interactive));border-block-width:var(--rh-border-width-md,2px)}.stepper svg{block-size:14px}:is(#next,#last) svg,:not(#next,#last) svg:dir(rtl){rotate:180deg}:is(#next,#last) svg:dir(rtl){rotate:0deg}.stepper[inert]{pointer-events:none;color:var(--rh-pagination-background-focused);background-color:var(--_stepper-bg-color)} pagination (min-width: 768px){#last{margin-inline-end:var(--rh-space-2xl,32px)}}input{block-size:var(--rh-length-2xl,32px);inline-size:var(--rh-length-4xl,64px);font-size:var(--rh-font-size-body-text-md,1rem);background:light-dark(var(--rh-color-surface-lightest,#fff),var(--rh-color-surface-darkest,#151515));border:var(--rh-border-width-sm,1px) solid var(--rh-color-border-subtle);border-block-end-color:light-dark(var(--rh-color-gray-40,#a3a3a3),var(--rh-color-gray-60,#4d4d4d));box-sizing:border-box;padding-block:var(--rh-space-sm,6px);padding-inline:var(--rh-space-md,8px);color:var(--rh-color-text-primary)}input:focus{border:var(--rh-border-width-md,2px) solid var(--rh-pagination-accent-color,var(--rh-color-interactive-primary-default));padding-block:calc(var(--rh-space-sm, 6px) - 1px);padding-inline:calc(var(--rh-space-md, 8px) - 1px);outline:none}input:invalid{border-block-end-color:light-dark(var(--rh-color-red-60,#a60000),var(--rh-color-red-40,#f56e6e))}input:invalid:focus{border-block-end-width:var(--rh-border-width-md,2px)}#numeric-middle{display:none}#numeric-end{display:block;inline-size:100%}#numeric{align-items:center;display:flex;flex:0;font-size:var(--rh-font-size-body-text-md,1rem);gap:.5em;margin-block:0;margin-inline:0 var(--rh-space-lg,16px);min-block-size:var(--_stepper-size);inline-size:100%}#numeric input{align-self:stretch;block-size:auto}#numeric a{text-decoration:underline dashed var(--rh-border-width-sm,1px);text-decoration-color:light-dark(var(--rh-color-gray-50),var(--rh-color-gray-40));text-underline-offset:max(5px,.28em);transition-timing-function:ease;transition-property:text-underline-offset,color,text-decoration-color;transition-duration:.3s;color:var(--_numeric-a-color)}#numeric a:hover{color:var(--_numeric-a-color-hover);text-decoration-color:inherit;text-underline-offset:max(6px,.33em)}#numeric a:visited{color:var(--_numeric-a-color-visited)}#numeric a:focus{border-radius:var(--rh-border-radius-default,3px);color:var(--_numeric-a-color-focus);outline:var(--rh-border-width-md,2px) solid #0000;outline-color:var(--_numeric-a-color-focus-outline);text-decoration-color:inherit;text-underline-offset:max(6px,.33em)}#numeric a:visited:hover{color:var(--_numeric-a-color-visited-hover)} pagination (min-width: 344px){#numeric-middle{display:contents}#numeric-end{display:none}#numeric{margin-inline-start:var(--rh-space-lg,16px)}} pagination (min-width: 768px){#numeric-middle{display:none}#numeric-end{display:contents}#numeric{margin-inline-start:0}}:host([variant|=open]) .stepper{--_stepper-bg-color:#0000}:host([variant|=open]) .stepper:focus:after,:host([variant|=open]) .stepper:focus:before,:host([variant|=open]) .stepper:hover:after{border-block-start-style:none;border-block-end-style:solid;inset-block-end:-1px}`;
const L1 = html `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 14">
<path d="M.3 6.26 6.24.3C6.63-.1 7.3-.1 7.7.3l.99.99c.4.4.4 1.07 0 1.48L4.49 7l4.2 4.22c.41.4.41 1.07 0 1.48l-.98 1c-.41.4-1.07.4-1.48 0L.31 7.73a1.05 1.05 0 0 1 0-1.48Z"/>
</svg>`;
const L2 = html `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17.44 14">
<path d="M8.7 6.26 14.66.3a1.05 1.05 0 0 1 1.49 0l.98.99c.42.4.42 1.07 0 1.48L12.92 7l4.2 4.22c.42.4.42 1.07 0 1.48l-.98 1c-.41.4-1.08.4-1.48 0L8.7 7.73a1.05 1.05 0 0 1 0-1.48zM.3 7.74l5.96 5.95c.4.41 1.07.41 1.48 0l.99-.99c.4-.4.4-1.07 0-1.48L4.52 7l4.21-4.22c.41-.4.41-1.07 0-1.48l-.99-1a1.05 1.05 0 0 0-1.48 0L.31 6.27a1.05 1.05 0 0 0 0 1.48z"/>
</svg>`;
/**
* A paginator allows users to navigate between pages of related content.
*
* @summary Allows users to navigate content divided into pages
*
* @alias pagination
*
*/
let RhPagination = RhPagination_1 = class RhPagination extends LitElement {
constructor() {
super(...arguments);
_RhPagination_instances.add(this);
/**
* Override `overflow` values set from HTML or JS.
* `overflow` should ideally be private, but because
* we can't do `::slotted(nav ol li)`, we need to reflect
* it to a host attribute, so that lightdom CSS can target
* the list items.
*/
this.overflow = null;
/** Accessible label for the 'nav' element */
this.label = 'Page navigation';
/** Accessible label for the 'first page' button */
this.labelFirst = 'first page';
/** Accessible label for the 'previous page' button */
this.labelPrevious = 'previous page';
/** Accessible label for the 'next page' button */
this.labelNext = 'next page';
/** Accessible label for the 'last page' button */
this.labelLast = 'last page';
/** Change pagination size to small */
this.size = null;
/** "Open" variant */
this.variant = null;
_RhPagination_mo.set(this, new MutationObserver(() => this.requestUpdate()));
_RhPagination_logger.set(this, new Logger(this));
_RhPagination_ol.set(this, isServer ? null : this.querySelector('ol'));
_RhPagination_links.set(this, __classPrivateFieldGet(this, _RhPagination_ol, "f")?.querySelectorAll('li a'));
_RhPagination_firstLink.set(this, null);
_RhPagination_lastLink.set(this, null);
_RhPagination_nextLink.set(this, null);
_RhPagination_prevLink.set(this, null);
_RhPagination_currentLink.set(this, __classPrivateFieldGet(this, _RhPagination_instances, "m", _RhPagination_getCurrentLink).call(this));
_RhPagination_currentIndex.set(this, 0);
this.total = 0;
}
connectedCallback() {
super.connectedCallback();
RhPagination_1.instances.add(this);
// Validate DOM
if (!isServer) {
__classPrivateFieldGet(this, _RhPagination_mo, "f").observe(this, { childList: true, subtree: true });
if (!__classPrivateFieldGet(this, _RhPagination_ol, "f") || [...this.children].filter(x => !x.slot).length > 1) {
__classPrivateFieldGet(this, _RhPagination_logger, "f").warn('must have a single <ol> element as it\'s only child');
}
__classPrivateFieldSet(this, _RhPagination_currentLink, __classPrivateFieldGet(this, _RhPagination_instances, "m", _RhPagination_getCurrentLink).call(this), "f");
}
}
disconnectedCallback() {
super.disconnectedCallback();
RhPagination_1.instances.delete(this);
__classPrivateFieldGet(this, _RhPagination_mo, "f").disconnect();
}
update(changed) {
if (!isServer) {
__classPrivateFieldGet(this, _RhPagination_instances, "m", _RhPagination_updateLightDOMRefs).call(this);
this.overflow = __classPrivateFieldGet(this, _RhPagination_instances, "m", _RhPagination_getOverflow).call(this);
}
super.update(changed);
}
updated() {
if (!isServer && this.hasUpdated) {
this.total = __classPrivateFieldGet(this, _RhPagination_links, "f")?.length ?? 0;
this.firstHref = __classPrivateFieldGet(this, _RhPagination_firstLink, "f")?.href;
this.lastHref = __classPrivateFieldGet(this, _RhPagination_lastLink, "f")?.href;
this.prevHref = __classPrivateFieldGet(this, _RhPagination_prevLink, "f")?.href;
this.nextHref = __classPrivateFieldGet(this, _RhPagination_nextLink, "f")?.href;
this.currentHref = __classPrivateFieldGet(this, _RhPagination_currentLink, "f")?.href;
__classPrivateFieldGet(this, _RhPagination_instances, "m", _RhPagination_checkValidity).call(this);
}
}
render() {
const { label, labelFirst, labelPrevious, labelNext, labelLast, firstHref, prevHref, nextHref, lastHref, } = this;
const currentPage = __classPrivateFieldGet(this, _RhPagination_instances, "a", _RhPagination_currentPage_get).toString();
const numericContent = html `
<!-- shared container for the numeric controls at all widths -->
<div id="numeric" part="numeric">
<span id="go-to-page" class="xxs-visually-hidden sm-visually-visible">
<!-- "Go to page" text, defaults to "Page" -->
<slot name="go-to-page">
Page
</slot>
</span>
<input type="number"
inputmode="numeric"
required
min=1
max="${this.total}"
aria-labelledby="go-to-page"
="${__classPrivateFieldGet(this, _RhPagination_instances, "m", _RhPagination_onChange)}"
="${__classPrivateFieldGet(this, _RhPagination_instances, "m", _RhPagination_onKeyup)}"
.value="${currentPage}">
<!-- "of" text -->
<slot ?hidden="${!this.total}" name="out-of">of</slot>
<a ?hidden="${!this.total}" href="${ifDefined(lastHref)}">${this.total}</a>
</div>
`;
return html `
<!-- pagination container -->
<div id="container" part="container">
<a id="first"
class="stepper"
href="${ifDefined(firstHref)}"
.inert="${__classPrivateFieldGet(this, _RhPagination_currentLink, "f") === __classPrivateFieldGet(this, _RhPagination_firstLink, "f")}"
aria-label="${labelFirst}">${L2}</a>
<a id="prev"
class="stepper"
href="${ifDefined(prevHref)}"
.inert="${__classPrivateFieldGet(this, _RhPagination_currentLink, "f") === __classPrivateFieldGet(this, _RhPagination_prevLink, "f") || __classPrivateFieldGet(this, _RhPagination_currentLink, "f") === __classPrivateFieldGet(this, _RhPagination_firstLink, "f")}"
aria-label="${labelPrevious}">${L1}</a>
<nav aria-label="${label}">
<!-- An ordered list of links -->
<slot></slot>
</nav>
<!-- container for the numeric control at medium screen widths -->
<div id="numeric-middle" part="numeric-middle">
${numericContent}
</div>
<a id="next"
class="stepper"
href="${ifDefined(nextHref)}"
.inert="${__classPrivateFieldGet(this, _RhPagination_currentLink, "f") === __classPrivateFieldGet(this, _RhPagination_nextLink, "f") || __classPrivateFieldGet(this, _RhPagination_currentLink, "f") === __classPrivateFieldGet(this, _RhPagination_lastLink, "f")}"
aria-label="${labelNext}">${L1}</a>
<a id="last"
class="stepper"
href="${ifDefined(lastHref)}"
.inert="${__classPrivateFieldGet(this, _RhPagination_currentLink, "f") === __classPrivateFieldGet(this, _RhPagination_lastLink, "f")}"
aria-label="${labelLast}">${L2}</a>
<!-- container for the numeric control at small and large screen widths -->
<div id="numeric-end" part="numeric-end">
${numericContent}
</div>
</div>
`;
}
/** Navigate to the first page */
first() {
return __classPrivateFieldGet(this, _RhPagination_instances, "m", _RhPagination_go).call(this, 'first');
}
/** Navigate to the previous page */
prev() {
return __classPrivateFieldGet(this, _RhPagination_instances, "m", _RhPagination_go).call(this, 'prev');
}
/** Navigate to the next page */
next() {
return __classPrivateFieldGet(this, _RhPagination_instances, "m", _RhPagination_go).call(this, 'next');
}
/** Navigate to the last page */
last() {
return __classPrivateFieldGet(this, _RhPagination_instances, "m", _RhPagination_go).call(this, 'last');
}
/**
* Navigate to a specific page
* @param page
*/
go(page) {
return __classPrivateFieldGet(this, _RhPagination_instances, "m", _RhPagination_go).call(this, page);
}
};
_RhPagination_mo = new WeakMap();
_RhPagination_logger = new WeakMap();
_RhPagination_ol = new WeakMap();
_RhPagination_links = new WeakMap();
_RhPagination_firstLink = new WeakMap();
_RhPagination_lastLink = new WeakMap();
_RhPagination_nextLink = new WeakMap();
_RhPagination_prevLink = new WeakMap();
_RhPagination_currentLink = new WeakMap();
_RhPagination_currentIndex = new WeakMap();
_RhPagination_instances = new WeakSet();
_RhPagination_currentPage_get = function _RhPagination_currentPage_get() {
return __classPrivateFieldGet(this, _RhPagination_currentIndex, "f") + 1;
};
_RhPagination_getOverflow = function _RhPagination_getOverflow() {
const overflowAt = 9;
const length = this.total;
if (length <= overflowAt) {
return null;
}
const current = __classPrivateFieldGet(this, _RhPagination_currentIndex, "f") + 1;
if (current > (overflowAt - 4) && current < (length - 4)) {
return 'both';
}
else if (current <= (overflowAt - 4)) {
return 'end';
}
else {
return 'start';
}
};
_RhPagination_getCurrentLink = function _RhPagination_getCurrentLink() {
if (isServer) {
return null;
}
// if there is an aria-current="page" attribute, use that
const ariaCurrent = this.querySelector('li a[aria-current="page"]');
if (ariaCurrent) {
return ariaCurrent;
}
// otherwise, use the href to determine the current link
for (const link of __classPrivateFieldGet(this, _RhPagination_links, "f") ?? []) {
const url = new URL(link.href);
if (url.pathname === location.pathname
&& url.search === location.search
&& url.hash === location.hash) {
return link;
}
}
__classPrivateFieldGet(this, _RhPagination_logger, "f").warn('could not determine current link');
return null;
};
_RhPagination_updateLightDOMRefs = function _RhPagination_updateLightDOMRefs() {
// NB: order of operations! must set up state
__classPrivateFieldSet(this, _RhPagination_ol, this.querySelector('ol'), "f");
__classPrivateFieldSet(this, _RhPagination_links, this.querySelectorAll('li a'), "f");
__classPrivateFieldSet(this, _RhPagination_firstLink, this.querySelector('li:first-child a'), "f");
__classPrivateFieldSet(this, _RhPagination_lastLink, this.querySelector('li:last-child a'), "f");
__classPrivateFieldSet(this, _RhPagination_currentLink, __classPrivateFieldGet(this, _RhPagination_instances, "m", _RhPagination_getCurrentLink).call(this), "f");
if (__classPrivateFieldGet(this, _RhPagination_currentLink, "f")) {
const links = Array.from(__classPrivateFieldGet(this, _RhPagination_links, "f"));
// if any other links have aria-current="page", remove it unless it is the current link
for (const link of links) {
if (link === __classPrivateFieldGet(this, _RhPagination_currentLink, "f")) {
continue;
}
if (link.getAttribute('aria-current') === 'page') {
link.removeAttribute('aria-current');
}
}
__classPrivateFieldSet(this, _RhPagination_currentIndex, links.indexOf(__classPrivateFieldGet(this, _RhPagination_currentLink, "f")), "f");
__classPrivateFieldSet(this, _RhPagination_prevLink, __classPrivateFieldGet(this, _RhPagination_links, "f")[__classPrivateFieldGet(this, _RhPagination_currentIndex, "f") - 1], "f");
__classPrivateFieldSet(this, _RhPagination_nextLink, __classPrivateFieldGet(this, _RhPagination_links, "f")[__classPrivateFieldGet(this, _RhPagination_currentIndex, "f") + 1], "f");
for (const link of this.querySelectorAll('[data-page]')) {
link.removeAttribute('data-page');
}
__classPrivateFieldGet(this, _RhPagination_currentLink, "f").closest('li')?.setAttribute('data-page', 'current');
__classPrivateFieldGet(this, _RhPagination_prevLink, "f")?.closest('li')?.setAttribute('data-page', 'previous');
__classPrivateFieldGet(this, _RhPagination_nextLink, "f")?.closest('li')?.setAttribute('data-page', 'next');
if (__classPrivateFieldGet(this, _RhPagination_currentLink, "f")?.getAttribute('aria-current') !== 'page') {
__classPrivateFieldGet(this, _RhPagination_currentLink, "f")?.setAttribute('aria-current', 'page');
}
}
};
_RhPagination_checkValidity = function _RhPagination_checkValidity() {
let message = '';
// Validate user input
if (this.input && __classPrivateFieldGet(this, _RhPagination_links, "f")) {
if (Number.isNaN(__classPrivateFieldGet(this, _RhPagination_instances, "a", _RhPagination_currentPage_get))) {
message = `${__classPrivateFieldGet(this, _RhPagination_instances, "a", _RhPagination_currentPage_get)} is not a valid page number`;
}
else if (__classPrivateFieldGet(this, _RhPagination_instances, "a", _RhPagination_currentPage_get) > this.total || __classPrivateFieldGet(this, _RhPagination_instances, "a", _RhPagination_currentPage_get) < 1) {
message = `cannot navigate to page ${__classPrivateFieldGet(this, _RhPagination_instances, "a", _RhPagination_currentPage_get)}`;
}
this.input.setCustomValidity(message);
}
if (message) {
__classPrivateFieldGet(this, _RhPagination_logger, "f").warn(this.input?.validationMessage || 'could not navigate');
}
this.input?.reportValidity();
return !message;
};
_RhPagination_go =
/**
* 1. Normalize the element state
* 2. validate and act on the input
* 3. update the element in case a full browser navigation was prevented (e.g. SPA routing)
* @param id
*/
async function _RhPagination_go(id) {
await this.updateComplete;
if (typeof id === 'number') {
const link = __classPrivateFieldGet(this, _RhPagination_links, "f")?.[id - 1];
link?.click?.();
}
else {
this.shadowRoot?.getElementById(id)?.click();
}
this.requestUpdate();
await this.updateComplete;
return __classPrivateFieldGet(this, _RhPagination_currentIndex, "f");
};
_RhPagination_onKeyup = function _RhPagination_onKeyup(event) {
if (!(event.target instanceof HTMLInputElement) || !__classPrivateFieldGet(this, _RhPagination_links, "f")) {
return;
}
const max = this.total.toString();
const input = event.target;
if (parseInt(input.value) > parseInt(max)) {
input.value = max;
}
};
_RhPagination_onChange = function _RhPagination_onChange(event) {
if (!this.input || !__classPrivateFieldGet(this, _RhPagination_links, "f")) {
return;
}
const newValue = parseInt(event.target.value);
const inputNum = parseInt(this.input.value);
if (newValue === inputNum) {
return;
}
this.input.value = newValue.toString();
__classPrivateFieldSet(this, _RhPagination_currentIndex, parseInt(this.input.value) - 1, "f");
if (__classPrivateFieldGet(this, _RhPagination_instances, "m", _RhPagination_checkValidity).call(this)) {
__classPrivateFieldGet(this, _RhPagination_instances, "m", _RhPagination_go).call(this, __classPrivateFieldGet(this, _RhPagination_instances, "a", _RhPagination_currentPage_get));
}
};
RhPagination.styles = [styles];
RhPagination.instances = new Set();
(() => {
if (!isServer) {
globalThis.addEventListener('hashchange', () => {
for (const instance of RhPagination_1.instances) {
instance.requestUpdate();
}
});
}
})();
__decorate([
property({ reflect: true })
], RhPagination.prototype, "overflow", void 0);
__decorate([
property()
], RhPagination.prototype, "label", void 0);
__decorate([
property({ attribute: 'label-first' })
], RhPagination.prototype, "labelFirst", void 0);
__decorate([
property({ attribute: 'label-previous' })
], RhPagination.prototype, "labelPrevious", void 0);
__decorate([
property({ attribute: 'label-next' })
], RhPagination.prototype, "labelNext", void 0);
__decorate([
property({ attribute: 'label-last' })
], RhPagination.prototype, "labelLast", void 0);
__decorate([
property({ reflect: true })
], RhPagination.prototype, "size", void 0);
__decorate([
property({ reflect: true })
], RhPagination.prototype, "variant", void 0);
__decorate([
query('input')
], RhPagination.prototype, "input", void 0);
__decorate([
state()
], RhPagination.prototype, "total", void 0);
__decorate([
state()
], RhPagination.prototype, "firstHref", void 0);
__decorate([
state()
], RhPagination.prototype, "lastHref", void 0);
__decorate([
state()
], RhPagination.prototype, "nextHref", void 0);
__decorate([
state()
], RhPagination.prototype, "prevHref", void 0);
__decorate([
state()
], RhPagination.prototype, "currentHref", void 0);
RhPagination = RhPagination_1 = __decorate([
customElement('rh-pagination'),
themable
], RhPagination);
export { RhPagination };
//# sourceMappingURL=rh-pagination.js.map