@riverty/web-components 6.2.0 → 6.3.0

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

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

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

@@ -1,345 +0,0 @@
-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: '6f042592347577f063f6a80d2152b1149eadcb21', open: this.isOpen }, h("dialog", { key: 'fd3f19cf69a9077585bceccebaf0d0c9bccbaa86', class: "r-dialog", "aria-label": this.dialogLabel, ref: el => this.dialogElement = el, style: { '--r-dialog--body--height': this.bodyHeight } }, h("div", { key: '974e33afe5e96d3a67501d10a4ecd0486900ed64', class: "r-dialog--content" }, h("div", { key: '57bccc4346d7234564dc22c179a7e10051bd3af7', class: "r-dialog--header", id: `${this.uniqueId}-header` }, h("slot", { key: '0a59d6a775f11378f17be41665b2c71aecb17ff9', name: "header" }, (this.headline) &&
-            h("h2", { key: '6dd6970be5bde3f92d87bef1cbbd7152ba72f88f', class: "r-dialog--headline" }, this.headline)), h("r-icon-button", { key: '37ad4f5b3366ae057240e5bcf2c7443aac3faa9b', class: "r-dialog--close", name: "cross", size: "s", onRClick: this.onTriggerClick, label: this.closeAriaLabel })), h("div", { key: '951dec5b1da5b13196916ed6b64fee89cad83a0e', class: "r-dialog--body" }, this.bodyText, h("slot", { key: '1797cb38116d9818aec51e2dc6982dad1a01cf02' }), h("slot", { key: '0f091bf0e6f6fdd16b79c69aca9814a0d76d7ee6', name: "form" })), h("slot", { key: '2b5a1cadfa9e7a13d8fc4ddca4cf69a1e4a1cb5e', 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

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

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

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

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