@riverty/web-components 6.2.0 → 6.3.0

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

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

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

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

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