@riverty/web-components 6.3.0 → 6.3.1

package/dist/esm/r-design-system-devtools.entry.js

@@ -0,0 +1,29 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-CTxpqopm.js';
+
+const DesignSystemDevtools = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /** 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);
+    }
+    get el() { return getElement(this); }
+};
+
+export { DesignSystemDevtools as r_design_system_devtools };

package/dist/esm/r-dialog.entry.js

@@ -0,0 +1,105 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-CTxpqopm.js';
+
+const dialogCss = ":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))}";
+
+const Dialog = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dialogClose = createEvent(this, "close");
+        /** 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" })))));
+    }
+    get host() { return getElement(this); }
+    static get watchers() { return {
+        "open": ["handleOpenChange"]
+    }; }
+};
+Dialog.style = dialogCss;
+
+export { Dialog as r_dialog };

package/dist/esm/r-hint_2.entry.js

@@ -0,0 +1,47 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-CTxpqopm.js';
+
+const hintCss = ":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}";
+
+const Hint = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get iconName() {
+        if (this.icon)
+            return this.icon;
+        const variantIcons = {
+            'error': 'circled-exclamation-mark',
+            'warning': 'circled-cross',
+            'success': 'circled-check'
+        };
+        return (this.variant in variantIcons) ? variantIcons[this.variant] : null;
+    }
+    get hasIconSlot() {
+        return !!this.host.querySelector('[slot="icon"]');
+    }
+    get hasIcon() {
+        return this.hasIconSlot || this.iconName !== null;
+    }
+    render() {
+        return (h(Host, { key: 'b413c5c8e37c0918ad6d3c8b029d3f9d4df9381c' }, h("div", { key: '4de7efeccab67a041140550b01fd971c61c9aabf', class: "r-hint" }, this.hasIcon &&
+            h("div", { key: '3e4157da31557769f1aa0ef4576a40b080349f26', class: "r-hint--icon" }, h("slot", { key: '160ed96c348de4372afa0937f7c15582f7068437', name: "icon" }, this.iconName && h("r-icon", { key: '232afba86ec9215fedd795768c918e58878defb6', name: this.iconName, size: "s" }))), h("div", { key: 'f828794b26cbd73587394fd6d8b271952470a5e6', class: "r-hint--text" }, h("slot", { key: '948cdaca6c2b93b45e26333126193cb34874b303' })))));
+    }
+    get host() { return getElement(this); }
+};
+Hint.style = hintCss;
+
+const labelCss = "@charset \"UTF-8\";:host([field-indicator]){--r-label--marker--display:inline}.r-label{display:var(--r-label--display, flex);flex-direction:var(--r-label--flex-direction, row);gap:var(--r-label--gap, var(--r-spacing-100, 1rem));cursor:var(--r-label--cursor, default);color:var(--r-label--color, var(--r-text-regular, #282828));margin-bottom:var(--r-label--margin-bottom, 0)}.r-label--slot{flex:var(--r-label--slot--flex, 1);line-height:var(--r-label--line-height, var(--r-line-height-m, 1.5));font-family:var(--r-label--font-family, var(--r-font-family-text, system-ui));font-size:var(--r-label--font-size, var(--r-font-size-regular, 1rem));font-weight:var(--r-label--font-weight, var(--r-font-weight-regular, 400))}.r-label--marker{display:var(--r-label--marker--display, none);color:var(--r-label--marker--color, var(--r-text-soft, #686868));font-size:var(--r-label--marker--font-size, var(--r-font-size-300, 0.875rem));font-style:var(--r-label--marker--font-style, normal);font-weight:var(--r-label--marker--font-weight, var(--r-font-weight-regular, 400));margin-left:var(--r-label--marker--margin-left, var(--r-spacing-075, 0.75rem))}.r-label--marker::before{content:var(--r-label--marker--before--content, \"– \")}.r-label--tooltip-icon{color:var(--r-label--tooltip-icon--color, var(--r-text-regular, inherit));display:var(--r-label--tooltip-icon--display, inline-flex);line-height:var(--r-label--tooltip-icon--line-height, 1);align-items:var(--r-label--tooltip-icon--align-items, center);justify-content:var(--r-label--tooltip-icon--justify-content, center)}";
+
+const RLabel = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    render() {
+        const { fieldIndicator } = this;
+        return (h(Host, { key: '41d52212a7098aa6ade47a1c102aff67548d2e63' }, h("div", { key: 'af64253a7cbdc37ea5e96fbc8d360a32944c001c', class: "r-label" }, h("span", { key: 'fa82843b9c0546f2cfd48ef53cd335a48fef4082', class: "r-label--slot" }, h("slot", { key: 'f430fb90c898f4d8695b9e9acba637de74faf49f' }), fieldIndicator &&
+            h("span", { key: '1e68a5cb6bb792553370048b96371a1af8a0a3ad', class: "r-label--marker" }, fieldIndicator)))));
+    }
+};
+RLabel.style = labelCss;
+
+export { Hint as r_hint, RLabel as r_label };