@riverty/web-components 6.3.0 → 6.3.1

package/dist/collection/components/list-item/list-item/list-item.js

@@ -0,0 +1,467 @@
+import { Host, h, Fragment } from "@stencil/core";
+export class RListItem {
+    constructor() {
+        /** 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 = (h(TagName, Object.assign({ class: "r-list-item" }, itemAttrs, { onClick: () => this.hasSubitems && this.toggleSubitems() }), this.isLeading &&
+            h("span", { class: "r-list-item--leading" }, h("slot", { name: "leading" }, this.isLeadingIcon && !this.hideLeadingIcon &&
+                h("r-icon", { class: "r-list-item--leading-icon", name: leadingIcon, src: leadingIconSrc }))), h("span", { class: "r-list-item--text" }, !this.isTextSlot ?
+            h(Fragment, null, (this.isHeadlineSlot || headline) &&
+                h("span", { class: "r-list-item--headline" }, h("slot", { name: "headline" }, headline)), (description || this.isDescriptionSlot) &&
+                h("span", { class: "r-list-item--description" }, h("slot", { name: "description" }, description)))
+            :
+                h("slot", { name: "text" })), h("span", { class: "r-list-item--sr-text visually-hidden" }, this.headlineContent), this.isTrailing &&
+            h("span", { class: "r-list-item--trailing" }, h("slot", { name: "trailing" }, this.isTrailingIcon && !trailingText &&
+                h("r-icon", { class: "r-list-item--trailing-icon", name: trailingIcon, src: trailingIconSrc }), trailingText && !this.isTrailingIcon &&
+                h("span", { class: "r-list-item--trailing-text" }, trailingText)))));
+        if (!this.hasSubitems)
+            return h(Host, null, ListItemContent);
+        return (h(Host, null, h("div", { class: "r-list-item-wrapper" }, ListItemContent, h("ul", { "aria-hidden": `${!this.expanded}`, id: this.uniqueSubmitemsId, class: "sub-items" }, h("slot", null)))));
+    }
+    static get is() { return "r-list-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["list-item.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["list-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "headline": {
+                "type": "string",
+                "attribute": "headline",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The main text or headline displayed in the text slot (2nd slot) of the list item."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "description": {
+                "type": "string",
+                "attribute": "description",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Secondary text displayed below the headline (2nd slot), used for additional details or context."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "truncateDescription": {
+                "type": "boolean",
+                "attribute": "truncate-description",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "When enabled, the description is limited to a single line and truncated with an ellipsis if it overflows."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "leadingIcon": {
+                "type": "string",
+                "attribute": "leading-icon",
+                "mutable": false,
+                "complexType": {
+                    "original": "IconName",
+                    "resolved": "string",
+                    "references": {
+                        "IconName": {
+                            "location": "import",
+                            "path": "../../icon/exports",
+                            "id": "src/components/icon/exports.ts::IconName"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies the name of the icon to display in the leading slot (1st slot) of the list item."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "leadingIconSrc": {
+                "type": "string",
+                "attribute": "leading-icon-src",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines an icon source to be presented in leading slot"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "hideLeadingIcon": {
+                "type": "boolean",
+                "attribute": "hide-leading-icon",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines if the leading icon shall become hidden."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "trailingIcon": {
+                "type": "string",
+                "attribute": "trailing-icon",
+                "mutable": false,
+                "complexType": {
+                    "original": "IconName",
+                    "resolved": "string",
+                    "references": {
+                        "IconName": {
+                            "location": "import",
+                            "path": "../../icon/exports",
+                            "id": "src/components/icon/exports.ts::IconName"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies the name of the icon to display in the trailing slot (3rd slot) of the list item."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "trailingIconSrc": {
+                "type": "string",
+                "attribute": "trailing-icon-src",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines an icon source to be presented in trailing slot"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "trailingText": {
+                "type": "string",
+                "attribute": "trailing-text",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Text displayed in the trailing slot (3rd slot), as an alternative to an icon."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "alignment": {
+                "type": "string",
+                "attribute": "alignment",
+                "mutable": false,
+                "complexType": {
+                    "original": "TrailingTextAlignment",
+                    "resolved": "\"bottom\" | \"center\" | \"top\"",
+                    "references": {
+                        "TrailingTextAlignment": {
+                            "location": "import",
+                            "path": "./exports",
+                            "id": "src/components/list-item/list-item/exports.ts::TrailingTextAlignment"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the alignment style for the trailing text."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "divider": {
+                "type": "boolean",
+                "attribute": "divider",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, adds a horizontal divider below the list item."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "href": {
+                "type": "string",
+                "attribute": "href",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If provided, renders the list item as a link using the <a> tag with the given href attribute."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "disabled": {
+                "type": "boolean",
+                "attribute": "disabled",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, prevents user interaction with the list item and applies a disabled style."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "variant": {
+                "type": "string",
+                "attribute": "variant",
+                "mutable": false,
+                "complexType": {
+                    "original": "ListItemVariant",
+                    "resolved": "\"list-item\" | \"navitem\" | \"subitem\"",
+                    "references": {
+                        "ListItemVariant": {
+                            "location": "import",
+                            "path": "./exports",
+                            "id": "src/components/list-item/list-item/exports.ts::ListItemVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls the style variation of the list item, such as regular or subitem."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "'list-item'"
+            },
+            "expanded": {
+                "type": "boolean",
+                "attribute": "expanded",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Determines whether the list item is expanded to show its subitems. It can be toggled programmatically or through user interaction."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "active": {
+                "type": "boolean",
+                "attribute": "active",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates whether the list item is currently active (e.g., represents the current page)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            }
+        };
+    }
+    static get methods() {
+        return {
+            "toggleSubitems": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Method to toggle sub-items of the list-item",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+}

package/dist/collection/components/pagination/exports.js

@@ -0,0 +1,3 @@
+export const paginationVariantArray = ['minimized', 'standard', 'maximized'];
+export const paginationItemsPerPageOptionsArray = [5, 10, 15, 20, 25, 50, 100];
+export const paginationListBoxPositionArray = ['top', 'bottom'];

package/dist/collection/components/pagination/pagination.css

@@ -0,0 +1,118 @@
+: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;
+}