@riverty/web-components 6.3.0 → 6.3.1

package/dist/collection/components/design-system-devtools/design-system-devtools.js

@@ -0,0 +1,59 @@
+import { Host, h } from "@stencil/core";
+/**
+ * Can be used by developers to verify functionality of the design system.
+ *
+ * Example:
+ * ```html
+ * <r-design-system-devtools design-tokens></r-design-system-devtools>
+ * ```
+ */
+export class DesignSystemDevtools {
+    constructor() {
+        /** Whether to display a preview of some key design tokens */
+        this.designTokens = false;
+    }
+    renderDesignTokens() {
+        const tokens = [
+            'r-color-green-vanguard',
+            'r-color-grey-charcoal',
+            'r-color-white-haze',
+            'r-color-orange-ember',
+        ];
+        return (h(Host, null, tokens.map(t => {
+            return (h("div", { style: { backgroundColor: `var(--${t})` } }, "This text should have ", h("code", null, t), " background color"));
+        })));
+    }
+    render() {
+        if (this.designTokens) {
+            return this.renderDesignTokens();
+        }
+        return h(Host, null);
+    }
+    static get is() { return "r-design-system-devtools"; }
+    static get encapsulation() { return "shadow"; }
+    static get properties() {
+        return {
+            "designTokens": {
+                "type": "boolean",
+                "attribute": "design-tokens",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to display a preview of some key design tokens"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components/dialog/dialog.css

@@ -0,0 +1,125 @@
+:host([size=small]) {
+  --r-dialog--width: 23.4375rem;
+  --r-dialog--max-height: 15.625rem;
+}
+
+:host([size=medium]) {
+  --r-dialog--width: 37.5rem;
+  --r-dialog--max-height: 37.5rem;
+}
+
+:host([size=large]) {
+  --r-dialog--width: 50rem;
+  --r-dialog--max-height: 45rem;
+}
+
+@media (max-width: 50rem) {
+  :host([size=large]) {
+    --r-dialog--width: 100%;
+    --right: 0;
+    --left: 0;
+    --r-dialog--footer--flex-wrap: wrap;
+  }
+}
+@media (max-height: 48.75rem) {
+  :host([size=large]) {
+    --r-dialog--margin: 18px auto;
+    --top: 0;
+    --bottom: 0;
+  }
+}
+@media (max-width: 37.5rem) {
+  :host([size=medium]) {
+    --r-dialog--width: 100%;
+    --right: 0;
+    --left: 0;
+    --r-dialog--footer--flex-wrap: wrap;
+  }
+}
+@media (max-height: 43.75rem) {
+  :host([size=medium]) {
+    --r-dialog--margin: 18px auto;
+    --top: 0;
+    --bottom: 0;
+  }
+}
+:host {
+  top: var(--top, auto);
+  right: var(--right, auto);
+  bottom: var(--bottom, auto);
+  left: var(--left, auto);
+}
+
+.r-dialog {
+  border: var(--r-dialog--border, none);
+  padding: var(--r-dialog--padding, 24px 0);
+  box-sizing: var(--r-dialog--box-sizing, border-box);
+  overflow: var(--r-dialog--overflow, hidden);
+  width: var(--r-dialog--width, auto);
+  height: var(--r-dialog--height, auto);
+  background-color: var(--r-dialog--background-color, var(--r-background-softest));
+  margin: var(--r-dialog--margin, auto);
+  max-height: var(--r-dialog--max-height, auto);
+}
+.r-dialog--content {
+  display: var(--r-dialog--content--display, flex);
+  flex-direction: var(--r-dialog--content--flex-direction, column);
+  gap: var(--r-dialog--content--gap, var(--r-spacing-150, 1.5rem));
+  color: var(--r-dialog--content--color, var(--r-text-regular));
+  height: var(--r-dialog--content--height, 100%);
+}
+.r-dialog ::slotted([slot=header]), .r-dialog--headline {
+  font-family: var(--r-dialog--headline--font-family, var(--r-font-family-heading, sans-serif));
+  font-size: var(--r-dialog--headline--font-size, var(--r-font-size-500));
+  font-weight: var(--r-dialog--headline--font-weight, var(--r-font-weight-light));
+  margin: var(--r-dialog--headline--margin, 0);
+  flex: var(--r-dialog--headline--flex, 1);
+}
+.r-dialog--close {
+  --r-button--display: var(--r-dialog--close--dispaly, flex);
+  --r-button--padding: var(--r-dialog--close--padding, 0);
+}
+.r-dialog--header {
+  display: var(--r-dialog--header--display, flex);
+  justify-content: var(--r-dialog--header--justify-content, space-between);
+  align-items: var(--r-dialog--header--align-items, start);
+  gap: var(--r-dialog--header--gap, 32px);
+  padding: var(--r-dialog--header--padding, 0 24px);
+}
+.r-dialog--body {
+  font-family: var(--r-dialog--body--font-family, var(--r-font-family-text));
+  font-size: var(--r-dialog--body--font-size, var(--r-font-size-desktop-400));
+  line-height: var(--r-dialog--body--line-height, var(--r-line-height-m));
+  flex-grow: var(--r-dialog--body--flex-grow, 1);
+  overflow-y: var(--r-dialog--body--overflow, auto);
+  justify-self: var(--r-dialog--body--justify-self, stretch);
+  padding: var(--r-dialog--body--padding, 0 24px);
+}
+.r-dialog--body {
+  scrollbar-width: auto;
+  scrollbar-color: var(--r-border-softer) #ffffff;
+}
+.r-dialog--body::-webkit-scrollbar {
+  width: var(--r-spacing-100, 1rem);
+}
+.r-dialog--body::-webkit-scrollbar-track {
+  background: #ffffff;
+}
+.r-dialog--body::-webkit-scrollbar-thumb {
+  background-color: var(--r-border-softer);
+  border-radius: 10px;
+  border: 3px solid #ffffff;
+}
+.r-dialog ::slotted([slot=footer]) {
+  margin-top: var(--r-dialog--footer--margin-top, auto);
+  display: var(--r-dialog--footer--display, flex);
+  flex-direction: var(--r-dialog--footer--flex-direction, row);
+  flex-wrap: var(--r-dialog--footer--flex-wrap, nowrap);
+  justify-content: var(--r-dialog--footer--justify-content, flex-start);
+  gap: var(--r-dialog--footer--gap, var(--r-spacing-100, 1rem));
+  align-items: var(--r-dialog--footer--align-items, end);
+  padding: var(--r-dialog--header--padding, 0 24px);
+}
+.r-dialog::backdrop {
+  background: var(--backdrop--background-color, rgba(0, 0, 0, 0.25));
+}

package/dist/collection/components/dialog/dialog.js

@@ -0,0 +1,345 @@
+import { Host, h } from "@stencil/core";
+export class Dialog {
+    constructor() {
+        /** Define if dialog either shown or hidden. */
+        this.open = false;
+        /**
+         * Allows to set height of the dialog body container
+         * while the value is smaller then `max-height` of the
+         * dialog body pre-set according to the `size` prop.
+         */
+        this.bodyHeight = 'auto';
+        /**
+         * Defines one of pre-defined sizes of the dialog.
+         */
+        this.size = 'medium';
+        /**
+         * Defines if dialog is currently revealed.
+         * */
+        this.isOpen = this.open;
+        this.uniqueId = `r-dialog-${Date.now().toString(32)}${Math.random().toString(32)}`.replace(/\./g, '');
+        this.onTriggerClick = () => {
+            this.close();
+        };
+        this.isInside = event => {
+            var _a;
+            const rect = (_a = this.dialogElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+            return rect.top <= event.clientY && event.clientY <= rect.bottom &&
+                rect.left <= event.clientX && event.clientX <= rect.right;
+        };
+    }
+    handleOpenChange() {
+        if (this.open && !this.isOpen)
+            this.showModal();
+    }
+    get dialogLabel() {
+        var _a, _b;
+        return this.headline || ((_b = (_a = this.host.querySelector('[slot="header"]')) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.trim());
+    }
+    /** Method to display a modal dialog */
+    async showModal() {
+        var _a;
+        this.isOpen = true;
+        (_a = this.dialogElement) === null || _a === void 0 ? void 0 : _a.showModal();
+    }
+    /** Method to display a non-modal dialog */
+    async close() {
+        var _a, _b;
+        const { returnValue } = this;
+        (_a = this.dialogElement) === null || _a === void 0 ? void 0 : _a.close(returnValue);
+        (_b = this.dialogClose) === null || _b === void 0 ? void 0 : _b.emit();
+        this.isOpen = false;
+    }
+    /** Method to either show or hide dialog
+     * depending on the current state. */
+    async toggle() {
+        if (this.isOpen)
+            this.showModal();
+        else
+            this.close();
+    }
+    _renderInitialState() {
+        if (this.isOpen) {
+            this.showModal();
+        }
+    }
+    connectEventListeners() {
+        var _a;
+        (_a = this.dialogElement) === null || _a === void 0 ? void 0 : _a.addEventListener('close', this.close);
+    }
+    disconnectEventListeners() {
+        var _a;
+        (_a = this.dialogElement) === null || _a === void 0 ? void 0 : _a.removeEventListener('close', this.close);
+    }
+    componentDidLoad() {
+        this._renderInitialState();
+        this.connectEventListeners();
+    }
+    disconnectedCallback() {
+        this.disconnectEventListeners();
+    }
+    onMouseup(event) {
+        if (!this.isOpen)
+            return;
+        event.stopPropagation();
+        if (!this.isInside(event)) {
+            this.close();
+        }
+    }
+    render() {
+        return (h(Host, { key: '96033031c46b109824262a3e3f00c2a456ea5f4b', open: this.isOpen }, h("dialog", { key: '7b51f2b25bf9a7ca92e85ed6c83438e811365296', class: "r-dialog", "aria-label": this.dialogLabel, ref: el => this.dialogElement = el, style: { '--r-dialog--body--height': this.bodyHeight } }, h("div", { key: 'a0a1a2ee98bbb25230316c0caab69688b3dc568d', class: "r-dialog--content" }, h("div", { key: '4bc7bd1a95095d1d37b851cd9a21fcc7fbc9bebd', class: "r-dialog--header", id: `${this.uniqueId}-header` }, h("slot", { key: 'f62a3403ab59f43f52fa615cd943ab4b890c64a7', name: "header" }, (this.headline) &&
+            h("h2", { key: '4989da5584b245c658f9ec97a2ba9401fe8addb7', class: "r-dialog--headline" }, this.headline)), h("r-icon-button", { key: '3bcd4692d603a076965a6c3cf118cf989712a45b', class: "r-dialog--close", name: "cross", size: "s", onRClick: this.onTriggerClick, label: this.closeAriaLabel })), h("div", { key: '25b5bc324df34cd30ce2543b5cb7800ec2e188d1', class: "r-dialog--body" }, this.bodyText, h("slot", { key: '4d9693b8374b7f5cbdd641c5c17cde5b2ec12b09' }), h("slot", { key: 'a27b41566f1bce90d7a52599219017f078840451', name: "form" })), h("slot", { key: 'ca4a6bb595544fbd3cb173f63b0f385b4dcb3bd7', name: "footer" })))));
+    }
+    static get is() { return "r-dialog"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dialog.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dialog.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "open": {
+                "type": "boolean",
+                "attribute": "open",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define if dialog either shown or hidden."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "returnValue": {
+                "type": "string",
+                "attribute": "return-value",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "A value indicating the result of a user\u2019s \ninteraction with the dialog, used to determine what action \nthe user took before closing the dialog. \n\nFor example, it can differentiate between whether the user \nclicked a \u201CConfirm\u201D button or a \u201CCancel\u201D button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "headline": {
+                "type": "string",
+                "attribute": "headline",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Allows to provide headline text to the dialog header section."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "bodyText": {
+                "type": "string",
+                "attribute": "body-text",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Allows plain text to be provided to the body of the dialog\nin cases where markup is not required. For more complex cases,\nincluding those requiring HTML markup, \nuse <div slot=\"body\">...</div>."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "bodyHeight": {
+                "type": "string",
+                "attribute": "body-height",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allows to set height of the dialog body container \nwhile the value is smaller then `max-height` of the \ndialog body pre-set according to the `size` prop."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'auto'"
+            },
+            "size": {
+                "type": "string",
+                "attribute": "size",
+                "mutable": false,
+                "complexType": {
+                    "original": "DialogSize",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {
+                        "DialogSize": {
+                            "location": "import",
+                            "path": "./exports",
+                            "id": "src/components/dialog/exports.ts::DialogSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines one of pre-defined sizes of the dialog."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "'medium'"
+            },
+            "closeAriaLabel": {
+                "type": "string",
+                "attribute": "close-aria-label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allows plain text to be provided to the close button of the dialog."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isOpen": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dialogClose",
+                "name": "close",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the dialog is closed.\nFired by close(), and by the close button."
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "showModal": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Method to display a modal dialog",
+                    "tags": []
+                }
+            },
+            "close": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Method to display a non-modal dialog",
+                    "tags": []
+                }
+            },
+            "toggle": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Method to either show or hide dialog \ndepending on the current state.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "handleOpenChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "mouseup",
+                "method": "onMouseup",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }];
+    }
+}

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

@@ -0,0 +1,9 @@
+export const dialogSizeArray = ['small', 'medium', 'large'];
+export const formMethodArray = ['GET', 'POST'];
+export const formEnctypeArray = [
+    'application/x-www-form-urlencoded',
+    'multipart/form-data',
+    'text/plain'
+];
+export const formTargetArray = ['_self', '_blank', '_parent', '_top'];
+export const formAutocompleteArray = ['on', 'off'];

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

@@ -0,0 +1 @@
+export const hintVariantArray = ['information', 'success', 'warning', 'error'];

package/dist/collection/components/hint/hint.css

@@ -0,0 +1,63 @@
+:host {
+  --r-hint--text--flex: 1;
+}
+
+:host([variant=information]) {
+  --r-hint--color: var(--r-text-soft, #686868);
+}
+
+:host([variant=success]),
+:host([success]) {
+  --r-hint--color: var(--r-status-success-regular, #298535);
+}
+
+:host([variant=warning]),
+:host([warning]) {
+  --r-hint--color: var(--r-status-warning-strong, #89411a);
+}
+
+:host([variant=error]),
+:host([invalid]) {
+  --r-hint--color: var(--r-status-error-regular, #b00c15);
+}
+
+:host([icon-position=end]) {
+  --r-hint--flex-direction: row-reverse;
+}
+
+:host {
+  display: block;
+}
+
+.r-hint {
+  display: var(--r-hint--display, flex);
+  flex-direction: var(--r-hint--flex-direction, row);
+  gap: var(--r-hint--gap, var(--r-spacing-050, 0.5rem));
+  font-family: var(--r-hint--font-family, var(--r-font-family-text, system-ui));
+  font-size: var(--r-hint--font-size, var(--r-font-size-300, 0.875rem));
+  line-height: var(--r-hint--line-height, var(--r-line-height-m, 1.5));
+  color: var(--r-hint--color, var(--r-text-soft, #686868));
+  font-weight: var(--r-hint--font-weight, var(--r-font-weight-regular, 400));
+  margin-top: var(--r-hint--margin-top, 0);
+  margin-bottom: var(--r-hint--margin-bottom, 0);
+}
+.r-hint--icon {
+  display: var(--r-hint--icon--display, flex);
+  align-items: var(--r-hint--icon--align-items, start);
+  min-width: var(--r-hint--icon--min-width, 1rem);
+  margin-top: var(--r-hint--icon--margin-top, 0.15rem);
+}
+.r-hint--text {
+  flex: var(--r-hint--text--flex, 1);
+}
+
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}