@riverty/web-components 6.3.0 → 6.3.1

package/dist/collection/components/alert/alert.js

@@ -0,0 +1,526 @@
+import { Host, h } from "@stencil/core";
+export class Alert {
+    constructor() {
+        /** Alert status controls apperance according to the status */
+        this.status = 'info';
+        /** Sets role="alert" and will be announced to screen reader users */
+        this.announced = true;
+        /** Defines an icon size to be presented in leading slot*/
+        this.leadingIconSize = 'm';
+        /**
+         * Defines whether the leading icon is visible.
+         * @default true
+         * */
+        this.leadingIconVisible = true;
+        /** Defines an icon to be presented in trailing slot */
+        this.trailingIcon = 'cross';
+        /** Defines an icon size to be presented in trailing slot*/
+        this.trailingIconSize = 'm';
+        /**
+         * Defines the target for the linked URL when `href` is provided.
+         * Options: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
+         */
+        this.target = '_self';
+        /** Text content for an alert dismiss button */
+        this.dismissButtonAriaLabel = 'Dismiss alert';
+        this.isElContent = (selector) => {
+            const el = this.host.querySelector(selector);
+            return el !== null && (el === null || el === void 0 ? void 0 : el.textContent.trim().length) > 0;
+        };
+        this.collapseAlert = () => {
+            this.host.setAttribute('aria-hidden', 'true');
+        };
+        this.startCollapseTimer = () => {
+            const time = this.delay * 1000;
+            this.delayTimer = setTimeout(() => {
+                this.collapseAlert();
+                clearTimeout(this.delayTimer);
+            }, time);
+        };
+        this.handleTrailingButtonClick = () => {
+            this.rClickAlertTrailingIcon.emit();
+            this.collapseAlert();
+        };
+    }
+    get isLeadingSlot() {
+        return this.isElContent('[slot="leading"]');
+    }
+    get isLeading() {
+        return this.leadingIconVisible || this.isLeadingSlot;
+    }
+    get isTrailingIcon() {
+        var _a, _b;
+        return ((_a = this.trailingIcon) === null || _a === void 0 ? void 0 : _a.length) > 0 || ((_b = this.trailingIconSrc) === null || _b === void 0 ? void 0 : _b.length) > 0;
+    }
+    get isTrailingSlot() {
+        return this.isElContent('[slot="trailing"]');
+    }
+    get isTrailing() {
+        return this.isTrailingIcon || this.isTrailingSlot;
+    }
+    get isHeadline() {
+        var _a;
+        return ((_a = this.headline) === null || _a === void 0 ? void 0 : _a.length) > 0;
+    }
+    get isContent() {
+        var _a;
+        return ((_a = this.content) === null || _a === void 0 ? void 0 : _a.length) > 0;
+    }
+    get isLink() {
+        var _a, _b;
+        return ((_a = this.href) === null || _a === void 0 ? void 0 : _a.length) > 0 && ((_b = this.linkText) === null || _b === void 0 ? void 0 : _b.length) > 0;
+    }
+    get isSlot() {
+        return this.host.textContent.trim().length > 0;
+    }
+    get isMain() {
+        return this.isHeadline || this.isContent || this.isLink || this.isSlot;
+    }
+    get isDelay() {
+        return this.delay && this.delay >= 0;
+    }
+    get headlineSlotContent() {
+        var _a;
+        const el = this.host.querySelector('[slot="headline"]');
+        return (_a = el === null || el === void 0 ? void 0 : el.textContent) === null || _a === void 0 ? void 0 : _a.trim();
+    }
+    get hasHeadlineContent() {
+        return !!this.headlineSlotContent || !!this.headline;
+    }
+    get statusBasedLeadingIconName() {
+        if (this.leadingIcon)
+            return this.leadingIcon;
+        switch (this.status) {
+            case 'info':
+                return 'circled-information-i';
+            case 'warning':
+                return 'circled-exclamation-mark';
+            case 'error':
+                return 'triangle-with-exclamation-mark';
+            default:
+                return 'circled-information-i';
+        }
+    }
+    componentDidLoad() {
+        if (this.isDelay)
+            this.startCollapseTimer();
+    }
+    render() {
+        const hostAttrs = this.announced ? {
+            role: 'alert',
+            'aria-live': this.status === 'info' ? 'polite' : 'assertive'
+        } : {
+            role: 'region',
+            'aria-label': this.headlineSlotContent || this.headline || null
+        };
+        const leadingIconAttrs = {
+            name: this.statusBasedLeadingIconName,
+            src: this.leadingIconSrc,
+            size: this.leadingIconSize
+        };
+        const trailingIconAttrs = {
+            name: this.trailingIcon,
+            src: this.trailingIconSrc,
+            size: this.trailingIconSize
+        };
+        return (h(Host, Object.assign({ key: 'c15688c07ce4e954025a36400b922735b347e95f' }, hostAttrs), h("div", { key: '26babb75b7e859b21e59345c601d385662908d1d', class: "r-alert", "data-has-headline": `${this.hasHeadlineContent}` }, this.isLeading &&
+            h("div", { key: '694567d018738c0e8a3eca4a084b38bfd7e81c91', class: "r-alert--leading" }, h("slot", { key: 'cfc91101ce17b01b76a4d860012e91a06e536d75', name: "leading" }, this.leadingIconVisible && h("r-icon", Object.assign({ key: 'bbbeaa680cd6e44e22d955896b7b20b37fdbbd7b' }, leadingIconAttrs)))), this.isMain ?
+            h("div", { class: "r-alert--main" }, h("slot", { name: "headline" }, this.isHeadline && h("h3", { class: "r-alert--headline" }, this.headline)), h("slot", { name: "content" }, this.isContent && h("div", { class: "r-alert--content" }, this.content)), h("slot", { name: "link" }, this.isLink &&
+                h("r-button", { class: "r-alert--link", variant: "text-inline", size: "small", href: this.href, target: this.target }, this.linkText)), h("slot", null))
+            :
+                h("slot", null), this.isTrailing &&
+            h("div", { key: 'd75e4568127a9c493b998cb8b0b475c3009d007a', class: "r-alert--trailing" }, h("slot", { key: 'a8d14fb3e1b275e750505ca25124b61503addf1e', name: "trailing" }, this.isTrailingIcon &&
+                h("r-icon-button", { key: '2d259fdda1b57874d6e1430893798bdfe047d60a', name: !this.trailingIconSrc ? this.trailingIcon : null, onClick: this.handleTrailingButtonClick, label: this.dismissButtonAriaLabel }, this.trailingIconSrc && h("r-icon", Object.assign({ key: '4e3ba02d4a2926c2f76000a685476cafad783d23' }, trailingIconAttrs))))))));
+    }
+    static get is() { return "r-alert"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["alert.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["alert.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "status": {
+                "type": "string",
+                "attribute": "status",
+                "mutable": false,
+                "complexType": {
+                    "original": "AlertStatus",
+                    "resolved": "\"error\" | \"info\" | \"warning\"",
+                    "references": {
+                        "AlertStatus": {
+                            "location": "import",
+                            "path": "./exports",
+                            "id": "src/components/alert/exports.ts::AlertStatus"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Alert status controls apperance according to the status"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "'info'"
+            },
+            "announced": {
+                "type": "boolean",
+                "attribute": "announced",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets role=\"alert\" and will be announced to screen reader users"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "true"
+            },
+            "leadingIcon": {
+                "type": "string",
+                "attribute": "leading-icon",
+                "mutable": false,
+                "complexType": {
+                    "original": "IconName",
+                    "resolved": "string",
+                    "references": {
+                        "IconName": {
+                            "location": "import",
+                            "path": "../icon/exports",
+                            "id": "src/components/icon/exports.ts::IconName"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines an icon to be presented in trailing slot"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "leadingIconSrc": {
+                "type": "string",
+                "attribute": "leading-icon-src",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines an icon source to be presented in leading slot"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "leadingIconSize": {
+                "type": "string",
+                "attribute": "leading-icon-size",
+                "mutable": false,
+                "complexType": {
+                    "original": "IconSize",
+                    "resolved": "\"l\" | \"m\" | \"s\"",
+                    "references": {
+                        "IconSize": {
+                            "location": "import",
+                            "path": "../icon/exports",
+                            "id": "src/components/icon/exports.ts::IconSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines an icon size to be presented in leading slot"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'m'"
+            },
+            "leadingIconVisible": {
+                "type": "boolean",
+                "attribute": "leading-icon-visible",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "true"
+                        }],
+                    "text": "Defines whether the leading icon is visible."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "trailingIcon": {
+                "type": "string",
+                "attribute": "trailing-icon",
+                "mutable": false,
+                "complexType": {
+                    "original": "IconName",
+                    "resolved": "string",
+                    "references": {
+                        "IconName": {
+                            "location": "import",
+                            "path": "../icon/exports",
+                            "id": "src/components/icon/exports.ts::IconName"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines an icon to be presented in trailing slot"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'cross'"
+            },
+            "trailingIconSrc": {
+                "type": "string",
+                "attribute": "trailing-icon-src",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines an icon source to be presented in trailing slot"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "trailingIconSize": {
+                "type": "string",
+                "attribute": "trailing-icon-size",
+                "mutable": false,
+                "complexType": {
+                    "original": "IconSize",
+                    "resolved": "\"l\" | \"m\" | \"s\"",
+                    "references": {
+                        "IconSize": {
+                            "location": "import",
+                            "path": "../icon/exports",
+                            "id": "src/components/icon/exports.ts::IconSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines an icon size to be presented in trailing slot"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'m'"
+            },
+            "headline": {
+                "type": "string",
+                "attribute": "headline",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines headline text of the alert"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "content": {
+                "type": "string",
+                "attribute": "content",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines content text of the alert"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "href": {
+                "type": "string",
+                "attribute": "href",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines href of the alert link"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "linkText": {
+                "type": "string",
+                "attribute": "link-text",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines link label text of the alert"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "target": {
+                "type": "string",
+                "attribute": "target",
+                "mutable": false,
+                "complexType": {
+                    "original": "AlertTarget",
+                    "resolved": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\"",
+                    "references": {
+                        "AlertTarget": {
+                            "location": "import",
+                            "path": "./exports",
+                            "id": "src/components/alert/exports.ts::AlertTarget"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the target for the linked URL when `href` is provided.\nOptions: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'_self'"
+            },
+            "delay": {
+                "type": "number",
+                "attribute": "delay",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Provide an amount of seconds before alert collapses"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "dismissButtonAriaLabel": {
+                "type": "string",
+                "attribute": "dismiss-button-aria-label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text content for an alert dismiss button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'Dismiss alert'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "delayTimer": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "rClickAlertTrailingIcon",
+                "name": "rClickAlertTrailingIcon",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emit click on trigger"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+}

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

@@ -0,0 +1,2 @@
+export const alertStatusArray = ['info', 'warning', 'error'];
+export const alertTargetArray = ['_blank', '_self', '_parent', '_top'];

package/dist/collection/components/badge/badge.css

@@ -0,0 +1,62 @@
+:host([variant=information]) {
+  --r-badge--icon--color: var(--r-status-info-regular, #3e5c73);
+  --r-badge--border-color: var(--r-status-info-regular, #3e5c73);
+  --r-badge--background-color: var(--r-status-info-soft, #f8fafb);
+}
+
+:host([variant=success]) {
+  --r-badge--icon--color: var(--r-status-success-regular, #298535);
+  --r-badge--border-color: var(--r-status-success-regular, #298535);
+  --r-badge--background-color: var(--r-status-success-soft, #f7fdf8);
+}
+
+:host([variant=warning]) {
+  --r-badge--icon--color: var(--r-status-warning-regular, #ff7429);
+  --r-badge--border-color: var(--r-status-warning-regular, #ff7429);
+  --r-badge--background-color: var(--r-status-warning-soft, #fef9f5);
+}
+
+:host([variant=error]) {
+  --r-badge--icon--color: var(--r-status-error-regular, #b00c15);
+  --r-badge--border-color: var(--r-status-error-regular, #b00c15);
+  --r-badge--background-color: var(--r-status-error-soft, #fef6f6);
+}
+
+:host {
+  display: var(--display, inline-flex);
+  line-height: var(--line-height, var(--r-line-height-s, 1.2));
+}
+
+.r-badge {
+  display: var(--r-badge--display, inline-flex);
+  justify-content: var(--r-badge--justify-content, center);
+  align-items: var(--r-badge--align-items, center);
+  gap: var(--r-badge--gap, var(--r-spacing-025, 0.25rem));
+  padding: var(--r-badge--padding, 0.05rem 0.5rem);
+  margin: var(--r-badge--margin, 0);
+  color: var(--r-badge--text--color, var(--r-text-regular, #282828));
+  border-width: var(--r-badge--border-width, 1.2px);
+  border-style: var(--r-badge--border-style, solid);
+  border-color: var(--r-badge--border-color, var(--r-status-info-regular, #3e5c73));
+  border-radius: var(--r-badge--border-radius, var(--r-spacing-150, 1.5rem));
+  background-color: var(--r-badge--background-color, var(--r-status-info-soft, #f8fafb));
+  box-sizing: var(--r-badge--box-sizing, border-box);
+  font-family: var(--r-badge--font-family, var(--r-font-family-text, system-ui));
+  font-weight: var(--r-badge--font-weight, var(--r-font-weight-regular, 400));
+  font-size: var(--r-badge--font-size, var(--r-font-size-300, 0.875rem));
+  line-height: var(--r-badge--line-height, var(--r-line-height-m, 1.5));
+  text-transform: var(--r-badge--text-transform, none);
+}
+.r-badge slot[name=icon] {
+  color: var(--r-badge--icon--color, var(--r-status-info-regular, #3e5c73));
+}
+.r-badge--icon {
+  display: var(--r-badge--icon--display, inline-flex);
+}
+.r-badge--content {
+  min-width: var(--r-badge--content--min-width, none);
+  max-width: var(--r-badge--content--max-width, none);
+  overflow: var(--r-badge--content--overflow, hidden);
+  white-space: var(--r-badge--content--white-space, nowrap);
+  text-overflow: var(--r-badge--content--text-overflow, ellipsis);
+}