@riverty/web-components 6.3.0 → 6.3.1

package/dist/cjs/r-list-item.cjs.entry.js

@@ -0,0 +1,109 @@
+'use strict';
+
+var index = require('./index-BnETQtSf.js');
+
+const listItemCss = ":host([alignment=top]){--r-list-item--trailing-text--font-weight:bold;--r-list-item--trailing--align-self:start}:host([alignment=bottom]) .r-list-item{--r-list-item--trailing--align-self:end}:host([divider]:not([divider=false])){--r-list-item--border-color:var(--r-border-soft, #686868);--r-list-item--border-width:0 0 1px 0}:host([active]) .r-list-item{--r-list-item--background-color:var(--r-background-interactive-pressed, rgba(40, 40, 40, 0.12))}:host([variant=navitem]:not([active]):hover:not([disabled]:not([disabled=false])))>.r-list-item,:host([href]:not([active]):hover:not([disabled]:not([disabled=false])))>.r-list-item{--r-list-item--cursor:pointer;--r-list-item--background-color:var(--r-background-interactive-hovered, rgba(40, 40, 40, 0.04))}:host([variant=navitem][has-sub-items]:hover:not([disabled]:not([disabled=false])))>.r-list-item-wrapper>.r-list-item{--r-list-item--cursor:pointer;--r-list-item--background-color:var(--r-background-interactive-hovered, rgba(40, 40, 40, 0.04))}:host([variant=navitem][has-sub-items]:has([active]):hover:not([disabled]:not([disabled=false])))>.r-list-item-wrapper>.r-list-item{--r-list-item--cursor:pointer;--r-list-item--background-color:transparent}:host([variant=navitem][expanded])>.r-list-item-wrapper>.r-list-item{--r-list-item--headline--font-weight:600;--r-list-item--trailing-icon--transform:rotate(180deg);--r-list-item--trailing-icon--color:var(--r-icon-regular, #282828)}:host([variant=navitem][active-parent]:not([expanded])),:host([variant=navitem][active]:not([expanded])){--r-list-item--background-color:var(--r-background-interactive-activated, rgba(40, 40, 40, 0.08))}:host([variant=subitem]) .r-list-item{--r-list-item--margin-left:27px;--r-list-item--border-width:0 0 0 1px;--r-list-item--border-color:var(--r-border-soft, #686868)}:host([variant=subitem][active]) .r-list-item{--r-list-item--background-color:var(--r-background-interactive-pressed, rgba(40, 40, 40, 0.12))}:host(:focus-within) .r-list-item[href]{--r-list-item--box-shadow:0 0 0 6px var(--r-border-focused-outlined, #fff);--r-list-item--outline:2px solid var(--r-border-focused, #0071e3);--r-list-item--outline-offset:2px}:host([disabled]:not([disabled=false])){cursor:not-allowed;--r-list-item--background-color:transparent}:host([disabled]:not([disabled=false])[divider]:not([divider=false])){--r-list-item--border-color:rgba(104,104,104, 0.4);--r-list-item--leading-icon--color:rgba(104,104,104, 0.4)}:host([truncate-description]:not([truncate-description=false])){--r-list-item--description--white-space:nowrap}:host{display:var(--display, block);pointer-events:var(--pointer-events, auto);outline:var(--outline, none);font-family:var(--font-family, var(--r-font-family-text, system-ui));line-height:var(--line-height, var(--r-line-height-m, 1.5));color:var(--color, var(--r-text-regular, #282828))}.r-list-item{display:var(--r-list-item--display, flex);align-items:var(--r-list-item--align-items, center);justify-content:var(--r-list-item--justify-content, center);gap:var(--r-list-item--gap, var(--r-spacing-100, 1rem));width:var(--r-list-item--width, inherit);padding:var(--r-list-item--padding, var(--r-spacing-100, 1rem));margin-left:var(--r-list-item--margin-left, 0);opacity:var(--r-list-item--opacity, 1);color:var(--r-list-item--color, inherit);box-shadow:var(--r-list-item--box-shadow, none);outline:var(--r-list-item--outline, none);outline-offset:var(--r-list-item--outline-offset, 0);text-decoration:var(--r-list-item--text-decoration, none);text-align:var(--r-list-item--text-align, left);background-color:var(--r-list-item--background-color, transparent);border-style:var(--r-list-item--border-style, solid);border-width:var(--r-list-item--border-width, 0);border-color:var(--r-list-item--border-color, transparent);cursor:var(--r-list-item--cursor, inherit);font-weight:var(--r-list-item--font-weight, var(--r-font-weight-regular, 400));font-family:var(--r-list-item--font-family, var(--r-font-family-text, system-ui))}.r-list-item:focus-visible{--r-list-item--box-shadow:0 0 0 6px var(--r-border-focused-outlined, #fff);--r-list-item--outline:2px solid var(--r-border-focused, #0071e3);--r-list-item--outline-offset:2px}.r-list-item--leading{display:var(--r-list-item--leading--display, flex);align-items:var(--r-list-item--leading--align-items, center);color:var(--r-list-item--leading--color, var(--r-icon-soft, #686868))}.r-list-item--leading-icon{color:var(--r-list-item--leading-icon--color, var(--r-icon-soft, #686868))}.r-list-item--trailing{display:var(--r-list-item--trailing--display, flex);align-self:var(--r-list-item--trailing--align-self, center);gap:var(--r-list-item--trailing--gap, var(--r-spacing-050, 0.5rem));color:var(--r-list-item--trailing--color, inherit)}.r-list-item--trailing-icon{transition:var(--r-list-item--trailing-icon--transition, transform 250ms ease-in-out);transform:var(--r-list-item--trailing-icon--transform, rotate(0deg));color:var(--r-list-item--trailing-icon--color, inherit)}.r-list-item--trailing-text{font-weight:var(--r-list-item--trailing-text--font-weight, 400);white-space:var(--r-list-item--trailing-text--white-space, nowrap)}.r-list-item--trailing ::slotted(*){display:var(--r-list-item--trailing-slotted--display, flex);gap:var(--r-list-item--trailing-slotted--display, var(--r-spacing-050, 0.5rem))}.r-list-item--text{display:var(--r-list-item--text--display, flex);flex-grow:var(--r-list-item--text--flex-grow, 1);flex-direction:var(--r-list-item--text--flex-direction, column);gap:var(--r-list-item--text--gap, 0.125rem);white-space:var(--r-list-item--text--white-space, normal);overflow:var(--r-list-item--text--overflow, hidden);text-overflow:var(--r-list-item--text--text-overflow, ellipsis);font-weight:var(--r-list-item--trailing-text--font-weight, inherit)}.r-list-item--sr-text{display:var(--r-list-item--sr-text--display, none)}.r-list-item--headline{font-size:var(--r-list-item--headline--font-size, 1rem);font-weight:var(--r-list-item--headline--font-weight, 600);line-height:var(--r-list-item--headline--line-height, 1.5);color:var(--r-list-item--headline--color, inherit)}.r-list-item--description{font-size:var(--r-list-item--description--font-size, 1rem);font-weight:var(--r-list-item--description--font-weight, 400);line-height:var(--r-list-item--description--line-height, 1.5);color:var(--r-list-item--description--color, var(--r-text-regular, #282828));white-space:var(--r-list-item--description--white-space, normal);overflow:var(--r-list-item--description--overflow, hidden);text-overflow:var(--r-list-item--description--text-overflow, ellipsis)}.r-list-item--description ::slotted(a){color:var(--r-list-item--description--color, inherit)}.r-list-item-wrapper{width:var(--r-list-item-wrapper--width, 100%)}.sub-items{margin:var(--r-sub-items--margin, 0);padding:var(--r-sub-items--padding, 0);list-style-type:var(--r-sub-items--list-style-type, \"\")}.sub-items[aria-hidden=true]{display:none}.visually-hidden{position:absolute;width:0.0625rem;height:0.0625rem;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;white-space:nowrap}@media (prefers-reduced-motion){.r-list-item--trailing-icon{transition:none}}";
+
+const RListItem = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /** Controls the style variation of the list item, such as regular or subitem. */
+        this.variant = 'list-item';
+        /** Determines whether the list item is expanded to show its subitems. It can be toggled programmatically or through user interaction. */
+        this.expanded = false;
+        /** Unique id for each subItem list */
+        this.uniqueSubmitemsId = `r-list-item-subitems-${Date.now().toString(32)}${Math.random().toString(32)}`.replace(/\./g, '');
+        this.isEl = (selector) => {
+            return this.host.querySelector(selector) !== null;
+        };
+    }
+    /** Method to toggle sub-items of the list-item */
+    async toggleSubitems() {
+        if (this.disabled)
+            return;
+        if (this.variant === 'subitem')
+            return;
+        this.expanded = !this.expanded;
+    }
+    get isLeadingIcon() {
+        return !!this.leadingIcon || !!this.leadingIconSrc;
+    }
+    get isLeadingSlot() {
+        return this.isEl('[slot="leading"]');
+    }
+    get isLeading() {
+        return (this.isLeadingIcon && !this.hideLeadingIcon) || this.isLeadingSlot;
+    }
+    get isTrailingIcon() {
+        var _a, _b;
+        return ((_a = this.trailingIcon) === null || _a === void 0 ? void 0 : _a.length) > 0 || ((_b = this.trailingIconSrc) === null || _b === void 0 ? void 0 : _b.length) > 0;
+    }
+    get isTrailingSlot() {
+        return this.isEl('[slot="trailing"]');
+    }
+    get isTrailing() {
+        var _a;
+        return this.isTrailingIcon || ((_a = this.trailingText) === null || _a === void 0 ? void 0 : _a.length) > 0 || this.isTrailingSlot;
+    }
+    get isTextSlot() {
+        return this.isEl('[slot="text"]');
+    }
+    get isHeadlineSlot() {
+        return this.isEl('[slot="headline"]');
+    }
+    get isDescriptionSlot() {
+        return this.isEl('[slot="description"]');
+    }
+    get headlineContent() {
+        var _a;
+        return ((_a = this.host.querySelector('[slot="headline"]')) === null || _a === void 0 ? void 0 : _a.textContent) || this.headline;
+    }
+    get hasSubitems() {
+        return this.isEl('[variant="subitem"]');
+    }
+    get subItems() {
+        var _a;
+        return (_a = this.host) === null || _a === void 0 ? void 0 : _a.querySelectorAll('[variant="subitem"]');
+    }
+    /** Function to set tabindex for sub-items */
+    setTabIndexOnSubItems() {
+        if (this.hasSubitems) {
+            this.subItems.forEach((element) => {
+                var _a;
+                (_a = element.shadowRoot.querySelector('a.r-list-item')) === null || _a === void 0 ? void 0 : _a.setAttribute('tabindex', this.disabled ? '-1' : null);
+            });
+        }
+    }
+    componentDidLoad() {
+        this.setTabIndexOnSubItems();
+    }
+    get tagName() {
+        if (this.hasSubitems) {
+            return 'button';
+        }
+        return this.href && !this.disabled ? 'a' : 'div';
+    }
+    render() {
+        const { leadingIcon, leadingIconSrc, trailingIcon, trailingIconSrc, headline, trailingText, description } = this;
+        const TagName = this.tagName;
+        const itemAttrs = Object.assign(Object.assign(Object.assign({ href: TagName === 'a' ? this.href : null, 'aria-current': this.active && TagName === 'a' ? 'page' : null }, (this.disabled ? { role: 'link', 'aria-disabled': 'true' } : null)), (this.hasSubitems ? { 'aria-expanded': `${this.expanded}` } : null)), (this.hasSubitems ? { 'aria-controls': `${this.uniqueSubmitemsId}` } : null));
+        const ListItemContent = (index.h(TagName, Object.assign({ class: "r-list-item" }, itemAttrs, { onClick: () => this.hasSubitems && this.toggleSubitems() }), this.isLeading &&
+            index.h("span", { class: "r-list-item--leading" }, index.h("slot", { name: "leading" }, this.isLeadingIcon && !this.hideLeadingIcon &&
+                index.h("r-icon", { class: "r-list-item--leading-icon", name: leadingIcon, src: leadingIconSrc }))), index.h("span", { class: "r-list-item--text" }, !this.isTextSlot ?
+            index.h(index.Fragment, null, (this.isHeadlineSlot || headline) &&
+                index.h("span", { class: "r-list-item--headline" }, index.h("slot", { name: "headline" }, headline)), (description || this.isDescriptionSlot) &&
+                index.h("span", { class: "r-list-item--description" }, index.h("slot", { name: "description" }, description)))
+            :
+                index.h("slot", { name: "text" })), index.h("span", { class: "r-list-item--sr-text visually-hidden" }, this.headlineContent), this.isTrailing &&
+            index.h("span", { class: "r-list-item--trailing" }, index.h("slot", { name: "trailing" }, this.isTrailingIcon && !trailingText &&
+                index.h("r-icon", { class: "r-list-item--trailing-icon", name: trailingIcon, src: trailingIconSrc }), trailingText && !this.isTrailingIcon &&
+                index.h("span", { class: "r-list-item--trailing-text" }, trailingText)))));
+        if (!this.hasSubitems)
+            return index.h(index.Host, null, ListItemContent);
+        return (index.h(index.Host, null, index.h("div", { class: "r-list-item-wrapper" }, ListItemContent, index.h("ul", { "aria-hidden": `${!this.expanded}`, id: this.uniqueSubmitemsId, class: "sub-items" }, index.h("slot", null)))));
+    }
+    get host() { return index.getElement(this); }
+};
+RListItem.style = listItemCss;
+
+exports.r_list_item = RListItem;

package/dist/cjs/r-pagination.cjs.entry.js

@@ -0,0 +1,320 @@
+'use strict';
+
+var index = require('./index-BnETQtSf.js');
+
+const paginationCss = ":host{--r-pagination--display:flex;--r-pagination--list-style:none;--r-pagination--align-items:center;--r-pagination--justify-content:center;--r-pagination--font-family:var(--r-font-family-text);--r-pagination--margin:0 auto;--r-pagination--flex-direction:column;--r-pagination--width:100%;--r-pagination--max-width:664px;--r-pagination--margin:0 auto;--r-pagination--items-list--display:flex;--r-paginaition--items-list--justify-content:center;--r-paginaition--items-list--align-items:center;--r-paginaition--items-list--list-style-type:none;--r-paginaition--items-list--padding:0;--r-paginaition--items-list--margin:0;--r-pagination--item--width:var(--r-spacing-300, 3rem);--r-pagination--item--height:var(--r-spacing-300, 3rem);--r-pagination--item--border-radius:0;--r-pagination--button--border-width:0;--r-pagination--button--padding:0;--r-pagination--header--display:flex;--r-pagination--header--align-items:center;--r-pagination--header--justify-content:space-between;--r-pagination--header--min-width:287px;--r-pagination--footer--display:flex;--r-pagination--footer--justify-content:center;--r-pagination--footer--width:100%;--r-pagination--item--disabled-text:none;--r-pagination--font-size:var(--r-font-size-200);display:block}:host([variant=minimized]){--r-pagination--max-width:440px}:host([variant=standard]){--r-pagination--max-width:560px}:host([variant=maximized]){--r-pagination--max-width:664px}.r-pagination r-select{--r-select--font-size:var(--r-pagination--font-size, 12px);--r-select-option--font-size:var(--r-pagination--font-size, 12px)}.r-pagination{align-items:var(--r-pagination--align-items);display:var(--r-pagination--display);flex-direction:var(--r-pagination--flex-direction);font-family:var(--r-pagination--font-family);font-size:var(--r-pagination--font-size);justify-content:var(--r-pagination--justify-content);list-style:var(--r-pagination--list-style);margin:var(--r-pagination--margin);max-width:var(--r-pagination--max-width);user-select:var(--r-pagination--item--disabled-text);width:var(--r-pagination--width)}.r-pagination--footer{align-items:var(--r-pagination--header--align-items);display:var(--r-pagination--footer--display);justify-content:var(--r-pagination--footer--justify-content)}.r-pagination--header{align-items:var(--r-pagination--header--align-items);display:var(--r-pagination--header--display);justify-content:var(--r-pagination--header--justify-content);font-family:var(--r-pagination--font-family);min-width:var(--r-pagination--header--min-width)}.r-pagination--header--select{min-width:auto;--width:unset !important}.r-pagination--header label{font-size:var(--r-pagination--font-size)}.r-pagination--items-list{display:var(--r-pagination--items-list--display);justify-content:var(--r-paginaition--items-list--justify-content);align-items:var(--r-paginaition--items-list--align-items);list-style-type:var(--r-paginaition--items-list--list-style-type);padding:var(--r-paginaition--items-list--padding);margin:var(--r-paginaition--items-list--margin)}.r-pagination--item.active{--r-button--color:var(--r-text-regular);--r-button--background-color:var(--r-background-interactive-activated);font-weight:var(--r-font-weight-semibold)}.r-pagination--item.number{--r-button--font-size:0.813rem}.r-pagination--item{--r-icon-button--height:var(--r-pagination--item--height);--r-icon-button--width:var(--r-pagination--item--width);--r-icon-button--border-radius:var(--r-pagination--item--border-radius);--r-button--width:var(--r-pagination--item--width);--r-button--height:var(--r-pagination--item--height);--r-button--border-width:var(--r-pagination--button--border-width);--r-button--padding:var(--r-pagination--button--padding)}.visually-hidden{position:absolute;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;white-space:nowrap}";
+
+const RPagination = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.rChange = index.createEvent(this, "rChange");
+        this.rNumberClick = index.createEvent(this, "rNumberClick");
+        this.rArrowClick = index.createEvent(this, "rArrowClick");
+        this.rItemsPerPageChange = index.createEvent(this, "rItemsPerPageChange");
+        /** UI: Arrows present/absent */
+        this.arrows = true;
+        /** Total amount of pages to select from */
+        this.totalResults = 1;
+        /** Current page number */
+        this.pageActive = 1;
+        /** Amount of items to show per page */
+        this.itemsPerPage = 5;
+        /** Items per page options for dropdown */
+        this.itemsPerPageOptions = [5, 10, 15, 20, 25, 50, 100];
+        // @Prop() variant?: PaginationVariant;
+        /** Allows selection between different pagination styles: minimized, standard, maximized */
+        this.variant = 'standard';
+        /** UI: Result Line and select field present/absent */
+        this.resultsLine = false;
+        /** Text to show in beginning of resultLine */
+        this.startText = 'Showing';
+        /** Text to display between currently shown results and total amount of results */
+        this.middleText = 'of';
+        /** Text to display after total results */
+        this.endText = 'results';
+        /** Text to show in select */
+        this.selectText = 'page';
+        /** Position of the list box */
+        this.listBoxPosition = 'top';
+        /** Label for Previous Page button. Important to ensure accessibility for screen reader users. */
+        this.previousPageButtonLabel = 'Go to the previous page';
+        /** Label for Next Page button. Important to ensure accessibility for screen reader users.*/
+        this.nextPageButtonLabel = 'Go to the next page';
+        /** Label for First Page button. Important to ensure accessibility for screen reader users.*/
+        this.firstPageButtonLabel = 'Go to the first page';
+        /** Label for Last Page button. Important to ensure accessibility for screen reader users.*/
+        this.lastPageButtonLabel = 'Go to the last page';
+        /** Label for Page number buttons. Important to ensure accessibility for screen reader users.*/
+        this.pageLabel = 'Page';
+        /** Label for Ellipsis stepper. Important to ensure accessibility for screen reader users.*/
+        this.ellipsisLabel = 'Ellipsis indicating skipped pages';
+        /** Label for Items per page select. */
+        this.itemsPerPageLabel = 'Items per page';
+        this.resizeObserver = null;
+        this.handleItemsPerPageChange = (event) => {
+            const newItemsPerPage = parseInt(event.detail.value, 10);
+            this.itemsPerPage = newItemsPerPage;
+            this.rItemsPerPageChange.emit(this.itemsPerPage);
+            this.setPaginationState();
+        };
+        this._activateStep = (index) => {
+            if (index < 1 || index > this.total || this.pageActive === index)
+                return; // Prevent invalid or redundant updates
+            this.pageActive = index;
+            requestAnimationFrame(() => {
+                this.setPaginationState(); // Ensure state updates correctly
+                requestAnimationFrame(() => {
+                    var _a;
+                    // Ensure the correct button is focused AFTER the state updates
+                    const newActiveButton = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`.r-pagination--item[data-index="${this.pageActive}"]`);
+                    if (newActiveButton) {
+                        newActiveButton.focus();
+                    }
+                });
+            });
+        };
+        this.handleItemChange = e => {
+            const buttonElement = e.target.closest('r-icon-button') || e.target.closest('r-button');
+            const index = Number(buttonElement.getAttribute('data-index'));
+            if (index === null)
+                return;
+            this._activateStep(index);
+            requestAnimationFrame(() => {
+                const focusTarget = this.getFocusTargetAfterNavigation(buttonElement);
+                focusTarget === null || focusTarget === void 0 ? void 0 : focusTarget.setFocus();
+            });
+            if (buttonElement.classList.contains('number')) {
+                this.rNumberClick.emit(this.paginationState);
+            }
+            if (buttonElement.classList.contains('arrow')) {
+                const direction = buttonElement.classList.contains('next') ? 'next' : 'previous';
+                this.rArrowClick.emit(Object.assign(Object.assign({}, this.paginationState), { direction }));
+            }
+        };
+        this.syncHeaderWidth = () => {
+            requestAnimationFrame(() => {
+                if (this.headerRef && this.footerRef) {
+                    const footerWidth = this.footerRef.offsetWidth;
+                    this.headerRef.style.width = `${footerWidth}px`;
+                }
+            });
+        };
+    }
+    get isNoPreviousPage() {
+        return this.previous === null;
+    }
+    get isNoNextPage() {
+        return this.next === null;
+    }
+    get isNotFirstPage() {
+        return this.first === null;
+    }
+    get isNotLastPage() {
+        return this.last === null;
+    }
+    get paginationState() {
+        const { total, active, previous, next, first, last, arrows } = this;
+        return { total, active, previous, next, first, last, arrows };
+    }
+    // State recalculation
+    setPaginationState() {
+        // Correctly calculate total pages based on items per page
+        this.total = Math.ceil(this.totalResults / this.itemsPerPage);
+        // Ensure the active page does not exceed the total pages
+        if (this.pageActive > this.total) {
+            this.pageActive = this.total;
+        }
+        // Set the reveal value based on variant and screen size
+        switch (this.variant) {
+            case 'minimized':
+                {
+                    this.arrows = false;
+                    this.resultsLine = false;
+                    break;
+                }
+            case 'standard': {
+                this.arrows = true;
+                break;
+            }
+            case 'maximized': {
+                this.arrows = true;
+                break;
+            }
+            default: {
+                console.warn('No variant specified. Defaulting to "standard".');
+                this.variant = 'standard';
+                break;
+            }
+        }
+        // Update pagination-related state variables
+        this.active = this.pageActive;
+        this.previous = this.active - 1 > 0 ? this.active - 1 : null;
+        this.next = this.active + 1 > this.total ? null : this.active + 1;
+        this.first = this.variant === 'maximized' && this.active !== 1 ? 1 : null;
+        this.last = this.variant === 'maximized' && this.active !== this.total ? this.total : null;
+        if (typeof ResizeObserver !== 'undefined') {
+            this.resizeObserver = new ResizeObserver(() => {
+                this.syncHeaderWidth();
+            });
+            if (this.footerRef) {
+                this.resizeObserver.observe(this.footerRef);
+            }
+        }
+        // Emit updated pagination state
+        this.rChange.emit(this.paginationState);
+    }
+    /**
+     * Determines the appropriate focus target after navigation based on button states.
+     * Handles edge cases where navigation buttons become disabled.
+     */
+    getFocusTargetAfterNavigation(buttonElement) {
+        var _a, _b, _c, _d, _e;
+        const isArrowButton = buttonElement.classList.contains('arrow');
+        const isNextButton = buttonElement.classList.contains('next');
+        const isPrevButton = buttonElement.classList.contains('previous');
+        const isFirstButton = buttonElement.classList.contains('first');
+        const isLastButton = buttonElement.classList.contains('last');
+        const willNextBeDisabled = this.next === null;
+        const willPrevBeDisabled = this.previous === null;
+        const willLastBeDisabled = this.active === this.total;
+        const willFirstBeDisabled = this.first === null;
+        if (isNextButton && willNextBeDisabled) {
+            return (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`.r-pagination--item.number[data-index="${this.total}"]`);
+        }
+        if (isPrevButton && willPrevBeDisabled) {
+            return (_b = this.el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector(`.r-pagination--item.number[data-index="1"]`);
+        }
+        if (isLastButton && willLastBeDisabled) {
+            return (_c = this.el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector(`.r-pagination--item.number[data-index="${this.total}"]`);
+        }
+        if (isFirstButton && willFirstBeDisabled) {
+            return (_d = this.el.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('.r-pagination--item.number[data-index="1"]');
+        }
+        return isArrowButton ? buttonElement : (_e = this.el.shadowRoot) === null || _e === void 0 ? void 0 : _e.querySelector(`.r-pagination--item[data-index="${this.pageActive}"]`);
+    }
+    handlePropsChange() {
+        this.setPaginationState();
+    }
+    componentWillLoad() {
+        this.setPaginationState();
+    }
+    disconnectedCallback() {
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+        }
+    }
+    componentDidRender() {
+        this.syncHeaderWidth();
+    }
+    render() {
+        const { active, previous, next, first, itemsPerPage, itemsPerPageOptions, startText, middleText, endText, selectText, listBoxPosition } = this;
+        const itemTemplate = (type, index$1) => {
+            if (type === 'number') {
+                return (index.h("li", null, index.h("r-button", { class: "r-pagination--item number", "data-index": index$1, variant: "secondary", onRClick: this.handleItemChange }, index.h("span", { class: "visually-hidden" }, this.pageLabel), " ", index$1)));
+            }
+            if (type === 'active') {
+                return (index.h("li", null, index.h("r-button", { "data-index": index$1, class: "r-pagination--item number active", rAriaCurrent: "page" }, index.h("span", { class: "visually-hidden" }, this.pageLabel), " ", index$1)));
+            }
+            if (type === 'stepper') {
+                return (index.h("li", { "aria-label": this.ellipsisLabel, class: "r-pagination--item stepper" }, "..."));
+            }
+        };
+        const renderNumbers = () => {
+            const totalPages = Math.ceil(this.totalResults / itemsPerPage);
+            const maxVisiblePages = 10;
+            const items = [];
+            const startEdge = 1;
+            const endEdge = totalPages;
+            const _createItem = (value) => {
+                const item = value + 1; // Convert to 1-indexed
+                const type = item === active ? 'active' : 'number';
+                return itemTemplate(type, item);
+            };
+            // Case: total pages are less than or equal to maxVisiblePages
+            if (totalPages <= maxVisiblePages) {
+                return index.h("ul", { class: "r-pagination--items-list" }, [...Array(totalPages).keys()].map(_createItem));
+            }
+            // Always add startEdge
+            items.push(itemTemplate(active === startEdge ? 'active' : 'number', startEdge));
+            const showStartStepper = active > 5;
+            const showEndStepper = active < totalPages - 5;
+            // Case: active page is near the beginning
+            if (!showStartStepper) {
+                for (let i = 2; i <= 8; i++) {
+                    items.push(_createItem(i - 1)); // Convert to 0-indexed for _createItem
+                }
+                items.push(itemTemplate('stepper', null));
+            }
+            // Case: active page is near the end
+            else if (!showEndStepper) {
+                items.push(itemTemplate('stepper', null));
+                for (let i = totalPages - 7; i < totalPages; i++) {
+                    items.push(_createItem(i - 1)); // Convert to 0-indexed for _createItem
+                }
+            }
+            // Case: active page is in the middle
+            else {
+                items.push(itemTemplate('stepper', null));
+                for (let i = active - 2; i <= active + 2; i++) {
+                    items.push(_createItem(i - 1)); // Convert to 0-indexed for _createItem
+                }
+                items.push(itemTemplate('stepper', null));
+            }
+            // Always add endEdge
+            items.push(itemTemplate(active === endEdge ? 'active' : 'number', endEdge));
+            // Ensure the total number of items is 10
+            if (items.length > maxVisiblePages) {
+                items.splice(1, items.length - maxVisiblePages - 1); // Remove excess items while keeping steppers
+            }
+            else if (items.length < maxVisiblePages) {
+                // Add additional pages if the total number of items is less than 10
+                const additionalPages = maxVisiblePages - items.length;
+                if (showStartStepper && showEndStepper) {
+                    for (let i = active + 3; i <= active + 2 + additionalPages; i++) {
+                        if (i < totalPages) {
+                            items.splice(items.length - 2, 0, _createItem(i - 1)); // Convert to 0-indexed for _createItem
+                        }
+                    }
+                }
+                else if (showStartStepper) {
+                    for (let i = active + 3; i <= active + 2 + additionalPages; i++) {
+                        if (i < totalPages) {
+                            items.splice(items.length - 1, 0, _createItem(i - 1)); // Convert to 0-indexed for _createItem
+                        }
+                    }
+                }
+                else if (showEndStepper) {
+                    for (let i = active - 3; i >= active - 2 - additionalPages; i--) {
+                        if (i > 1) {
+                            items.splice(1, 0, _createItem(i - 1)); // Convert to 0-indexed for _createItem
+                        }
+                    }
+                }
+            }
+            return index.h("ul", { class: "r-pagination--items-list" }, items);
+        };
+        const renderHeader = () => {
+            const startItem = Math.min((active - 1) * itemsPerPage + 1, this.totalResults);
+            const endItem = Math.min(active * itemsPerPage, this.totalResults);
+            return (index.h(index.Fragment, null, index.h("div", { ref: el => (this.headerRef = el), class: "r-pagination--header" }, index.h("div", { class: "results-info", "aria-live": "polite" }, startText ? startText : 'Showing', " ", startItem, "\u2013", endItem, " ", middleText ? middleText : 'of', " ", this.totalResults, " ", endText ? endText : 'results'), index.h("div", null, index.h("r-select", { class: "r-pagination--header--select", value: this.itemsPerPage.toString(), id: "items-per-page", onRChange: this.handleItemsPerPageChange, label: this.itemsPerPageLabel, "listbox-position": listBoxPosition }, itemsPerPageOptions.map(option => (index.h("r-select-option", { value: option.toString() }, option, "/", selectText ? selectText : 'page'))))))));
+        };
+        const isLastPage = active === this.total;
+        const renderList = () => {
+            if (this.variant === 'minimized') {
+                return (index.h(index.Fragment, null, index.h("div", { ref: el => (this.footerRef = el), class: "r-pagination--footer" }, renderNumbers())));
+            }
+            return (index.h(index.Fragment, null, index.h("div", { ref: el => (this.footerRef = el), class: "r-pagination--footer" }, this.variant === 'maximized' && (index.h("r-icon-button", { "data-index": first, name: "angle-left-with-vertical-line", size: "s", disabled: this.isNotFirstPage, label: this.firstPageButtonLabel, class: "r-pagination--item arrow first", onRClick: this.handleItemChange })), index.h("r-icon-button", { "data-index": previous, name: "angle-left", size: "s", disabled: this.isNoPreviousPage, label: this.previousPageButtonLabel, class: "r-pagination--item arrow previous", onRClick: this.handleItemChange }), renderNumbers(), index.h("r-icon-button", { "data-index": next, name: "angle-right", size: "s", disabled: this.isNoNextPage, label: this.nextPageButtonLabel, class: "r-pagination--item arrow next", onRClick: this.handleItemChange }), this.variant === 'maximized' && (index.h("r-icon-button", { "data-index": this.total, name: "angle-right-with-vertical-line", size: "s", disabled: isLastPage, label: this.lastPageButtonLabel, class: "r-pagination--item arrow last", onRClick: this.handleItemChange })))));
+        };
+        return (index.h(index.Host, { role: "navigation" }, index.h("div", { class: "r-pagination" }, this.resultsLine && renderHeader(), renderList())));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "totalResults": ["handlePropsChange"],
+        "itemsPerPage": ["handlePropsChange"],
+        "variant": ["handlePropsChange"],
+        "pageActive": ["handlePropsChange"]
+    }; }
+};
+RPagination.style = paginationCss;
+
+exports.r_pagination = RPagination;

package/dist/cjs/r-panel.cjs.entry.js

@@ -0,0 +1,184 @@
+'use strict';
+
+var index = require('./index-BnETQtSf.js');
+
+const panelCss = ":host{--r-panel--min-width:18.75rem;--r-panel--background-color:var(--r-background-soft, #F3F1F0);--r-panel--display:flex;--r-panel--flex-direction:column;--r-panel--position:fixed;--r-panel--align-items:flex-start;--r-panel--top:0;--r-panel--padding:8px 0;--r-panel--width:18.75rem;--r-panel--height:100%;--r-panel--color:var(--r-text-regular, #282828);--r-panel--transition:all 250ms ease-in-out;--r-panel--transform:none;--r-panel--font-family:var(--r-font-family-text);--r-panel--left:0;--r-panel--header--display:flex;--r-panel--header--padding:12px 16px;--r-panel--header--justify-content:space-between;--r-panel--header--align-items:center;--r-panel--header--align-self:stretch;--r-panel--header--icon-rotate:none;--r-panel--header--flex-direction:row;--r-panel--header--gap:3.125rem;--r-panel--header--logo--img--width:100%;--r-panel--header--logo--img--height:auto;--r-panel--header--logo--img--expanded--width:12rem;--r-panel--header--logo--img--collapsed--width:1.875rem;--r-panel--header--height:unset;--r-panel--body--display:block;--r-panel--body--flex-grow:1;--r-panel--body--align-self:stretch;--r-panel--body--overflow:auto;--r-panel--body--padding:4px 8px 0;--r-panel--body-header--color:var(--r-text-soft, #686868);--r-panel--body-header--font-size:var(--r-font-size-400, 1rem);--r-panel--body-header--font-weight:var(--r-font-weight-regular, 400);--r-panel--body-header--padding:16px 0;--r-panel--body-header--width:16.75rem;--r-panel--body-header--margin:0px;--r-panel--footer--dispay:flex;--r-panel--footer--width:100%;--r-panel--footer--padding:16px 16px 24px;--r-panel--footer--flex-direction:column;--r-panel--footer--justify-content:center;--r-panel--footer-gap:var(--spacing-100, 1rem);--r-panel--footer--align-self:stretch;--r-panel--footer--text-align:center}:host([variant=drawer]) r-button{--r-button--padding:0.625rem;--r-button--background:var(--r-background-interactive-softer, #E7E4E2);--r-button--border-radius:10%;--r-button--slot--position:relative;--r-button--left:5%}:host([variant=drawer][collapsed]){--r-panel--width:var(--r-spacing-450, 4.5rem);--r-panel--header--display:none;--r-panel--header--icon-rotate:rotate(180deg);--r-panel--header--logo--expaned--display:none;--r-panel--header--logo--collapsed--display:block;--r-panel--header--flex-direction:column;--r-panel--header--gap:0.625rem;--r-list-item--epxanded--background-color:rgba(40, 40, 40, 0.08)}:host([variant=drawer][collapsed]) r-button{--r-button--slot--position:inherit;transition:transform 250ms ease-in-out}:host([variant=modal][collapsed]){--r-panel--transform:translate(-100%)}:host([collapsed]:not([variant=modal])){--r-panel--min-width:0;--r-list-item--sr-text--display:block;--r-list-item--text--display:none;--r-list-item--trailing--display:none}:host([variant=drawer]:not([has-header]):not([collapsed])),:host([variant=drawer][has-header=false]:not([collapsed])){--r-panel--header--height:var(--spacing-150, 1.5rem);--r-panel--header--padding:12px 8px 0 16px}:host([variant=drawer]:not([has-header]):not([collapsed])) r-button,:host([variant=drawer][has-header=false]:not([collapsed])) r-button{--r-button--top:20%;--r-button--left:97%}:host([collapsed]){--r-list-item--active-parent--background-color:rgba(40, 40, 40, 0.08)}.r-panel{z-index:2;min-width:var(--r-panel--min-width);background-color:var(--r-panel--background-color);display:var(--r-panel--display);flex-direction:var(--r-panel--flex-direction);align-items:var(--r-panel--align-items);width:var(--r-panel--width);height:var(--r-panel--height);position:var(--r-panel--position);top:var(--r-panel--top);padding:var(--r-panel--padding);color:var(--r-panel--color);transition:var(--r-panel--transition);transform:var(--r-panel--transform);left:var(--r-panel--left);font-family:var(--r-panel--font-family);box-sizing:border-box}.r-panel .logo-wrapper .logo-expanded{width:var(--r-panel--header--logo--img--expanded--width)}.r-panel .logo-wrapper .logo-collapsed{width:var(--r-panel--header--logo--img--collapsed--width)}.r-panel .logo-wrapper img{width:var(--r-panel--header--logo--img--width);height:var(--r-panel--header--logo--img--height)}.r-panel .logo-wrapper:focus,.r-panel .logo-wrapper:focus-visible{box-shadow:0 0 0 6px var(--r-border-focused-outlined, #fff);outline:2px solid var(--r-border-focused, #0071e3);outline-offset:2px}.r-panel--header{display:flex;padding:var(--r-panel--header--padding);justify-content:var(--r-panel--header--justify-content);align-items:var(--r-panel--header--align-items);align-self:var(--r-panel--header--align-self);flex-direction:var(--r-panel--header--flex-direction);gap:var(--r-panel--header--gap);height:var(--r-panel--header--height)}.r-panel--header r-button{--r-button--padding:0;transform:var(--r-panel--header--icon-rotate);background:var(--r-button--background);position:var(--r-button--slot--position);left:var(--r-button--left);top:var(--r-button--top);border-radius:var(--r-button--border-radius)}.r-panel--body{flex-grow:var(--r-panel--body--flex-grow);align-self:var(--r-panel--body--align-self);display:var(--r-panel--body--display);overflow:var(--r-panel--body--overflow);padding:var(--r-panel--body--padding)}.r-panel--body ::slotted(.header){color:var(--r-panel--body-header--color);font-size:var(--r-panel--body-header--font-size);font-weight:var(--r-panel--body-header--font-weight);padding:var(--r-panel--body-header--padding);display:var(--r-panel--header--display);width:var(--r-panel--body-header--width);margin:var(--r-panel--body-header--margin)}.r-panel--footer{width:var(--r-panel--footer--width)}.r-panel ::slotted([slot=footer]){display:var(--r-panel--footer--dispay);padding:var(--r-panel--footer--padding);flex-direction:var(--r-panel--footer--flex-direction);justify-content:var(--r-panel--footer--justify-content);gap:var(--r-panel--footer-gap);align-self:var(--r-panel--footer--align-self);text-align:var(--r-panel--footer--text-align)}.r-panel ::slotted(ul){margin:var(--r-panel--item-list--margin, 0);padding:var(--r-panel--item-list--padding, 0);list-style-type:var(--r-panel--item-list--list-style-type, \"\")}@media (prefers-reduced-motion){.r-panel,:host([variant=drawer][collapsed]) r-button{transition:none}}";
+
+const Panel = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.panelStateChanged = index.createEvent(this, "panelStateChanged");
+        /** A boolean property that indicates whether the component includes a header  */
+        this.hasHeader = false;
+        /** A boolean property that indicates whether the navitems are active of not */
+        this.active = false;
+        /** A boolean property that indicates whether the component includes a footer  */
+        this.hasFooter = false;
+        /** Presentational style */
+        this.variant = 'visible';
+        /** A boolean property that determines the collapsed state of the component. The default state is `false`. */
+        this.collapsed = false;
+        /** Aria-label text for collapse */
+        this.labelCollapse = 'Collapse panel';
+        /** Aria-label text for expand */
+        this.labelExpand = 'Expand panel';
+        this.isCollapsed = this.collapsed;
+        // Pre-bound method for event listeners
+        this.updateCurrentLocationBound = this.updateCurrentLocation.bind(this);
+        this.handleSemiCollapsedButtonClick = () => {
+            this.togglePanel();
+            const parentPanels = document.querySelectorAll('r-list-item[expanded]');
+            if (this.isCollapsed) {
+                parentPanels.forEach(parentPanel => {
+                    parentPanel.removeAttribute('expanded');
+                });
+            }
+            else {
+                parentPanels.forEach(parentPanel => {
+                    parentPanel.setAttribute('expanded', '');
+                });
+            }
+        };
+        this.handleFullyCollapsedButtonClick = () => {
+            this.collapsePanel();
+        };
+    }
+    toggleSubItems(event) {
+        const target = event.target;
+        if (target.tagName === 'R-LIST-ITEM' && this.isCollapsed && this.variant) {
+            const hasSubItems = target.hasAttribute('has-sub-items');
+            if (hasSubItems) {
+                this.expandPanel();
+            }
+        }
+    }
+    /** Expand/Collapse Panel  */
+    async togglePanel() {
+        this.isCollapsed = !this.isCollapsed;
+    }
+    /** Expand Panel  */
+    async expandPanel() {
+        this.isCollapsed = false;
+    }
+    /** Collapse Panel */
+    async collapsePanel() {
+        this.isCollapsed = true;
+    }
+    handleCollapseChange(collapsed) {
+        this.isCollapsed = collapsed;
+        // Save the state to localStorage whenever it changes
+        if (this.variant === 'drawer' || this.variant === 'modal') {
+            localStorage.setItem('panelState', JSON.stringify(collapsed));
+            this.panelStateChanged.emit({ collapsed });
+        }
+    }
+    watchVariant(newVariant) {
+        this.isCollapsed = newVariant === 'modal';
+    }
+    handleDocumentClick(event) {
+        this.handleClickOutside(event);
+    }
+    getNavLinks() {
+        return document.querySelectorAll('r-list-item[href]');
+    }
+    get isVariantCollapsible() {
+        return this.variant === 'modal';
+    }
+    /*
+      * Collapse the panel when a click occurs outside of it (in mobile/when variant is 'modal'):
+      * Check if the clicked target is not an R-BUTTON element (that is the button[hamburger] that toggles the panel in mobile)
+      * Check if the click happened outside of the host element
+      * Ensure the variant is 'modal' and the panel is currently expanded
+    */
+    handleClickOutside(event) {
+        if (event.target.tagName !== 'R-BUTTON' &&
+            !this.host.contains(event.target) &&
+            this.isVariantCollapsible &&
+            !this.isCollapsed) {
+            this.collapsePanel();
+        }
+    }
+    componentWillLoad() {
+        this.isCollapsed = this.isVariantCollapsible;
+        if (this.variant === 'drawer') {
+            const savedState = localStorage.getItem('panelState');
+            this.isCollapsed = savedState ? JSON.parse(savedState) : this.isCollapsed;
+        }
+    }
+    componentWillRender() {
+        window.addEventListener('popstate', this.updateCurrentLocationBound);
+        window.addEventListener('hashchange', this.updateCurrentLocationBound);
+        this.highlightCurrentLink();
+    }
+    componentDidRender() {
+        this.highlightCurrentLink();
+    }
+    disconnectedCallback() {
+        window.removeEventListener('popstate', this.updateCurrentLocationBound);
+        window.removeEventListener('hashchange', this.updateCurrentLocationBound);
+    }
+    updateCurrentLocation() {
+        this.currentLocation = window.location.hash ? window.location.hash.slice(1) : window.location.href;
+        this.highlightCurrentLink();
+    }
+    // Highlight the current link based on the current URL
+    // Scroll the active link into view
+    highlightCurrentLink() {
+        const navLinks = this.getNavLinks();
+        navLinks.forEach((link) => {
+            if (link instanceof HTMLElement) {
+                const linkHref = link.getAttribute('href');
+                const isActive = linkHref === this.currentLocation || linkHref === window.location.pathname + window.location.hash;
+                this.updateLinkState(link, isActive);
+            }
+        });
+        const activeLink = document.querySelector('.active');
+        if (activeLink) {
+            activeLink.scrollIntoView({
+                behavior: 'smooth',
+                block: 'end'
+            });
+        }
+    }
+    // Update link attributes based on active state
+    updateLinkState(link, isActive) {
+        if (isActive) {
+            link.setAttribute('active', '');
+            link.classList.add('active');
+            this.expandParentMenus(link);
+            this.highlightParent(link);
+        }
+        else {
+            link.removeAttribute('active');
+            link.classList.remove('active');
+        }
+    }
+    highlightParent(link) {
+        const parentActive = link.parentElement;
+        if (parentActive && parentActive.tagName === 'R-LIST-ITEM') {
+            parentActive.setAttribute('active-parent', '');
+        }
+    }
+    expandParentMenus(link) {
+        var _a;
+        let parentPanel = link.closest('r-list-item[has-sub-items]');
+        while (parentPanel && !this.isCollapsed) {
+            parentPanel.setAttribute('expanded', '');
+            parentPanel = (_a = parentPanel.parentElement) === null || _a === void 0 ? void 0 : _a.closest('r-panel');
+        }
+    }
+    render() {
+        return (index.h(index.Host, { key: '44996078c23da8ce9b5b48044d24d45778e688b4', role: "navigation", collapsed: this.isCollapsed }, index.h("div", { key: 'a217b08d3fda5e4f8761d971074e3de797363f32', class: "r-panel" }, index.h("div", { key: '8ff71b762feffd1cc9478014e011fc60875a5e3d', class: "r-panel--header" }, this.hasHeader && (index.h("a", { key: '9ad8475299e9f04341cc1c4b5b9e65551f2f6ca2', class: "logo-wrapper", href: this.logoLink }, this.isCollapsed ?
+            index.h("slot", { name: "logo-collapsed" })
+            :
+                index.h("slot", { name: "logo-expanded" }))), this.variant === 'modal' ? (index.h("r-button", { class: "r-panel--trigger", variant: "blank", icon: "cross", rAriaLabel: `${this.labelCollapse}`, onClick: this.handleFullyCollapsedButtonClick })) : this.variant === 'drawer' ? (index.h("r-button", { class: "r-panel--trigger", variant: "blank", icon: "angle-left", rAriaLabel: this.isCollapsed ? `${this.labelExpand}` : `${this.labelCollapse}`, onClick: this.handleSemiCollapsedButtonClick })) : this.variant === 'visible' ? (null) : null), index.h("div", { key: '14b5a3ee0e11eda6585a84e0f05aa682950fbce2', class: "r-panel--body" }, index.h("slot", { key: 'e008d4f4796415779cd8e3dbda696b966b4ac184' })), this.hasFooter && !this.isCollapsed && (index.h("div", { key: '702c5859f2a7aa60903ec1df29f8977cf46dd0b8', class: "r-panel--footer" }, index.h("slot", { key: '347796d3e0bbffed77ae9368270f6e27eb93e156', name: "footer" }))))));
+    }
+    get host() { return index.getElement(this); }
+    static get watchers() { return {
+        "isCollapsed": ["handleCollapseChange"],
+        "variant": ["watchVariant"]
+    }; }
+};
+Panel.style = panelCss;
+
+exports.r_panel = Panel;