@riverty/web-components 6.3.0 → 6.3.1

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

@@ -0,0 +1 @@
+export const panelVariantArray = ['visible', 'drawer', 'modal'];

package/dist/collection/components/panel/panel.css

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

package/dist/collection/components/panel/panel.js

@@ -0,0 +1,473 @@
+import { Host, h } from "@stencil/core";
+export class Panel {
+    constructor() {
+        /** 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 (h(Host, { key: '44996078c23da8ce9b5b48044d24d45778e688b4', role: "navigation", collapsed: this.isCollapsed }, h("div", { key: 'a217b08d3fda5e4f8761d971074e3de797363f32', class: "r-panel" }, h("div", { key: '8ff71b762feffd1cc9478014e011fc60875a5e3d', class: "r-panel--header" }, this.hasHeader && (h("a", { key: '9ad8475299e9f04341cc1c4b5b9e65551f2f6ca2', class: "logo-wrapper", href: this.logoLink }, this.isCollapsed ?
+            h("slot", { name: "logo-collapsed" })
+            :
+                h("slot", { name: "logo-expanded" }))), this.variant === 'modal' ? (h("r-button", { class: "r-panel--trigger", variant: "blank", icon: "cross", rAriaLabel: `${this.labelCollapse}`, onClick: this.handleFullyCollapsedButtonClick })) : this.variant === 'drawer' ? (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), h("div", { key: '14b5a3ee0e11eda6585a84e0f05aa682950fbce2', class: "r-panel--body" }, h("slot", { key: 'e008d4f4796415779cd8e3dbda696b966b4ac184' })), this.hasFooter && !this.isCollapsed && (h("div", { key: '702c5859f2a7aa60903ec1df29f8977cf46dd0b8', class: "r-panel--footer" }, h("slot", { key: '347796d3e0bbffed77ae9368270f6e27eb93e156', name: "footer" }))))));
+    }
+    static get is() { return "r-panel"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["panel.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["panel.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "header": {
+                "type": "string",
+                "attribute": "header",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The `header` property is a string that specifies the header text."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "hasHeader": {
+                "type": "boolean",
+                "attribute": "has-header",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A boolean property that indicates whether the component includes a header"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "active": {
+                "type": "boolean",
+                "attribute": "active",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A boolean property that indicates whether the navitems are active of not"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "hasFooter": {
+                "type": "boolean",
+                "attribute": "has-footer",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A boolean property that indicates whether the component includes a footer"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "variant": {
+                "type": "string",
+                "attribute": "variant",
+                "mutable": false,
+                "complexType": {
+                    "original": "PanelVariant",
+                    "resolved": "\"drawer\" | \"modal\" | \"visible\"",
+                    "references": {
+                        "PanelVariant": {
+                            "location": "import",
+                            "path": "./exports",
+                            "id": "src/components/panel/exports.ts::PanelVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Presentational style"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "'visible'"
+            },
+            "collapsed": {
+                "type": "boolean",
+                "attribute": "collapsed",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A boolean property that determines the collapsed state of the component. The default state is `false`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "logoLink": {
+                "type": "string",
+                "attribute": "logo-link",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Logo link"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "labelCollapse": {
+                "type": "string",
+                "attribute": "label-collapse",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Aria-label text for collapse"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'Collapse panel'"
+            },
+            "labelExpand": {
+                "type": "string",
+                "attribute": "label-expand",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Aria-label text for expand"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'Expand panel'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "currentLocation": {},
+            "isCollapsed": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "panelStateChanged",
+                "name": "panelStateChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the panel state changes"
+                },
+                "complexType": {
+                    "original": "{ collapsed: boolean }",
+                    "resolved": "{ collapsed: boolean; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "togglePanel": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Expand/Collapse Panel",
+                    "tags": []
+                }
+            },
+            "expandPanel": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Expand Panel",
+                    "tags": []
+                }
+            },
+            "collapsePanel": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Collapse Panel",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "isCollapsed",
+                "methodName": "handleCollapseChange"
+            }, {
+                "propName": "variant",
+                "methodName": "watchVariant"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "toggleSubItems",
+                "target": undefined,
+                "capture": true,
+                "passive": false
+            }, {
+                "name": "click",
+                "method": "handleDocumentClick",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

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

@@ -0,0 +1,3 @@
+export const popoverDismissModeArray = ['auto', 'manual'];
+export const popoverHorizontalArray = ['left', 'center', 'right', 'cover'];
+export const popoverVerticalArray = ['top', 'middle', 'bottom', 'cover'];