@riverty/web-components 6.2.0 → 6.3.0

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

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

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

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

@@ -1,473 +0,0 @@
-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: '0404a2c3acbba8414d7baffc8c0f861e512fe7cb', role: "navigation", collapsed: this.isCollapsed }, h("div", { key: 'b93d1555f060793b7137fd6aac0de2a1a1f35436', class: "r-panel" }, h("div", { key: 'b7dd2dee4c145a21a5a963750e8b26ab2d8b9bbe', class: "r-panel--header" }, this.hasHeader && (h("a", { key: 'dbb02cd6271fba2a5d4a783a20d5e6d9e34ee734', 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: 'bb3d86b7a4b0890709d4a4637eca033ddaec24a6', class: "r-panel--body" }, h("slot", { key: '201aa3f616d3d239fc7b0edc23565a6618304ce5' })), this.hasFooter && !this.isCollapsed && (h("div", { key: 'a15f34fbb86ad8b16c6d036b885c7c8b13655fc6', class: "r-panel--footer" }, h("slot", { key: '41de73edf832d3a5ca93e4f9a79a62780fdcd68b', 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

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