@riverty/web-components 6.3.0 → 6.3.1

package/dist/collection/components/badge/badge.js

@@ -0,0 +1,124 @@
+import { Host, h } from "@stencil/core";
+/**
+ * Informational element used to indicate the status of an object or action.
+ * @part base        - The root container
+ * @part content     - Text container
+ * @part icon        - Icon container
+ */
+export class RBadge {
+    constructor() {
+        /**
+         * Defines if badge icon should be visible
+         * @default false
+         * */
+        this.iconVisible = false;
+    }
+    get iconName() {
+        switch (this.variant) {
+            case 'information':
+                return 'circled-information-i';
+            case 'success':
+                return 'circled-check';
+            case 'warning':
+                return 'triangle-with-exclamation-mark';
+            case 'error':
+                return 'circled-exclamation-mark';
+            default:
+                return 'circled-information-i';
+        }
+    }
+    render() {
+        const { variant, iconVisible, iconAriaLabel } = this;
+        const hostAttrs = {
+            variant
+        };
+        return (h(Host, Object.assign({ key: 'eb69bab38f6edbd2b7bf39167636d856df4f2f4f' }, hostAttrs), h("div", { key: 'fb717045162261e2bc4b43c8a146017318506208', class: "r-badge", part: "base" }, iconVisible &&
+            h("div", { key: '2788afca3d65d02882322ef792c6f3621c59fdab', class: "r-badge--icon", part: "icon" }, h("slot", { key: '2b0f42fb2b94f4fb6a5dbf0af84ce4dfc9c3c683', name: "icon" }, h("r-icon", { key: '75c78bae30a4da3678b9d22279e120a391032a0e', size: "s", name: this.iconName, iconAriaLabel: iconAriaLabel }))), h("div", { key: '42d2f9703df945d460b42cce8d1be78bbc7a196a', class: "r-badge--content", part: "content" }, h("slot", { key: '62841850b79a7fb617a29b6280d00ddeb2158399' })))));
+    }
+    static get is() { return "r-badge"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["badge.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["badge.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "attribute": "variant",
+                "mutable": false,
+                "complexType": {
+                    "original": "BadgeVariant",
+                    "resolved": "\"error\" | \"information\" | \"success\" | \"warning\"",
+                    "references": {
+                        "BadgeVariant": {
+                            "location": "import",
+                            "path": "./exports",
+                            "id": "src/components/badge/exports.ts::BadgeVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "\"information\""
+                        }],
+                    "text": "Variant defines how the component will be presented in UI,\noptional."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "iconAriaLabel": {
+                "type": "string",
+                "attribute": "icon-aria-label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines an accessible name for the icon"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "iconVisible": {
+                "type": "boolean",
+                "attribute": "icon-visible",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Defines if badge icon should be visible"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+}

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

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

package/dist/collection/components/button/button.css

@@ -0,0 +1,180 @@
+:host {
+  display: inline-flex;
+  vertical-align: top;
+  opacity: 1;
+  outline: none;
+}
+
+:host(:focus-within:not(:active)) {
+  --r-button--box-shadow:
+    0 0 0 1px var(--r-border-focused-outlined, #fff),
+    0 0 0 3px var(--r-border-focused),
+    0 0 0 4px var(--r-border-focused-outlined, #fff);
+  --r-button--outline: 2px solid var(--r-border-focused);
+  --r-button--outline-offset: 2px;
+}
+
+:host(:hover:not(:active):not([disabled]:not([disabled=false]))) {
+  --r-button--border-color: var(--r-border-soft, #686868);
+  --r-button--color: var(--r-text-regular, #282828);
+  --r-button--background-color: var(--r-background-interactive-hovered, rgba(40, 40, 40, 0.04));
+}
+
+:host([disabled]:not([disabled=false])) {
+  --r-button--opacity: 0.4;
+  --r-button--cursor: not-allowed;
+  --r-button--box-shadow: none;
+}
+
+:host([size=small]) {
+  --r-button--font-size: var(--r-font-size-300, 0.875rem);
+  --r-button--padding: 0.642em 0.857em;
+  --r-button--height: 2.75rem;
+}
+
+:host([icon-position=end]) {
+  --r-button--slot--flex-direction: row-reverse;
+}
+
+:host([data-icon-only=start]) {
+  --r-button--padding: 0.875em;
+}
+
+:host([variant=secondary]) {
+  --r-button--color: var(--r-text-regular, #282828);
+  --r-button--border-color: var(--r-border-regular, #282828);
+  --r-button--background-color: rgba(0,0,0,0);
+}
+
+:host([variant=secondary]:not([disabled]:not([disabled=false])):hover) {
+  --r-button--background-color: var(--r-background-interactive-hovered, rgba(40, 40, 40, 0.04));
+  --r-button--border-color: var(--r-border-soft, #686868);
+}
+
+:host([variant=secondary] .r-button:not([aria-disabled=true]):active) {
+  --r-button--color: var(--r-text-regular, #282828);
+  --r-button--border-color: var(--r-border-soft, #686868);
+  --r-button--background-color: var(--r-background-interactive-pressed, rgba(40, 40, 40, 0.12));
+}
+
+:host([variant=text]) {
+  --r-button--color: var(--r-text-regular, #282828);
+  --r-button--border-color: rgba(0,0,0,0);
+  --r-button--background-color: rgba(0,0,0,0);
+  --r-button--slot--position: relative;
+  --r-button--slot--text-decoration: underline;
+}
+
+:host([variant=text]:hover:not([disabled]:not([disabled=false]))) {
+  --r-button--border-color: var(--r-border-soft, #686868);
+  --r-button--background-color: var(--r-background-interactive-hovered, rgba(40, 40, 40, 0.04));
+}
+
+:host([variant=text] .r-button:not([aria-disabled=true]):active) {
+  --r-button--background-color: var(--r-background-interactive-pressed, rgba(40, 40, 40, 0.12));
+  --r-button--border-color: var(--r-border-soft, #686868);
+}
+
+:host([variant=text][text-position=left]) {
+  --r-button--padding: 0.875em var(--spacing-175, 1.75rem) 0.875em 0;
+}
+
+:host([variant=text][text-position=right]) {
+  --r-button--padding: 0.875em 0 0.875em var(--spacing-175, 1.75rem);
+}
+
+:host([variant=text-inline]) {
+  --r-button--color: var(--r-text-regular, #282828);
+  --r-button--border-color: transparent;
+  --r-button--background-color: transparent;
+  --r-button--padding: 0 0 0.5rem 0;
+  --r-button--height: auto;
+  --r-button--slot--text-decoration: underline;
+}
+
+:host([variant=text-inline]:hover:not([disabled]:not([disabled=false]))) {
+  --r-button--slot--text-decoration: none;
+  --r-button--border-color: transparent;
+  --r-button--background-color: transparent;
+}
+
+:host([variant=text-inline]:active:not([disabled]:not([disabled=false]))) {
+  --r-button--border-color: transparent;
+  --r-button--background-color: transparent;
+}
+
+:host([variant=blank]) {
+  --r-button--color: var(--r-text-regular, #282828);
+  --r-button--border-color: rgba(0,0,0,0);
+  --r-button--background-color: rgba(0,0,0,0);
+  --r-button--border-width: 0;
+  --r-button--padding: 0;
+}
+
+:host([variant=blank]) .r-button:active {
+  --r-button--border-width: 0;
+  --r-button--background-color: rgba(0,0,0,0);
+}
+
+:host([variant=blank]:hover:not([disabled]:not([disabled=false]))) {
+  --r-button--color: var(--r-text-regular, #282828);
+}
+
+:host([expanded]),
+:host([full-width]:not([full-width=false])) {
+  display: block;
+  --r-button--display: flex;
+  --r-button--width: 100%;
+}
+
+.r-button {
+  display: var(--r-button--display, inline-flex);
+  align-items: var(--r-button--align-items, center);
+  justify-content: var(--r-button--justify-content, center);
+  width: var(--r-button--width, auto);
+  height: var(--r-button--height, 3rem);
+  position: var(--r-button--position, static);
+  top: var(--r-button--top, auto);
+  left: var(--r-button--left, auto);
+  box-sizing: var(--r-button--box-sizing, border-box);
+  outline: var(--r-button--outline, none);
+  outline-offset: var(--r-button--outline-offset, 0);
+  cursor: var(--r-button--cursor, pointer);
+  font-family: var(--r-button--font-family, var(--r-font-family-text, system-ui));
+  font-weight: var(--r-button--font-weight, 400);
+  text-align: var(--r-button--text-align, center);
+  text-transform: var(--r-button--text-transform, uppercase);
+  text-decoration: var(--r-button--text-decoration, none);
+  background-color: var(--r-button--background-color, var(--r-background-interactive-regular, #282828));
+  border-width: var(--r-button--border-width, 1px);
+  border-style: var(--r-button--border-style, solid);
+  border-color: var(--r-button--border-color, var(--r-border-strong, #000));
+  color: var(--r-button--color, var(--r-text-inverse, #fff));
+  font-size: var(--r-button--font-size, var(--r-font-size-400, 1rem));
+  line-height: var(--r-button--line-height, 1);
+  letter-spacing: var(--r-button--letter-spacing, 0.04em);
+  padding: var(--r-button--padding, 0.875em var(--r-spacing-175, 1.75rem));
+  box-shadow: var(--r-button--box-shadow, none);
+  pointer-events: var(--r-button--pointer-events, auto);
+  z-index: var(--r-button--z-index, initial);
+  vertical-align: var(--r-button--vertical-align, top);
+  opacity: var(--r-button--opacity, 1);
+}
+.r-button:not([aria-disabled=true]):active {
+  --r-button--color: var(--r-button--color--active, var(--r-text-regular, #282828));
+  --r-button--background-color: var(--r-button--background-color--active, var(--r-background-interactive-pressed, rgba(40, 40, 40, 0.12)));
+  --r-button--border-color: var(--r-button--border-color--active, var(--r-border-soft, #686868));
+}
+.r-button--slot {
+  position: var(--r-button--slot--position, relative);
+  display: var(--r-button--slot--display, flex);
+  flex: var(--r-button--slot--flex, 1);
+  flex-direction: var(--r-button--slot--flex-direction, row);
+  align-items: var(--r-button--slot--align-items, center);
+  justify-content: var(--r-button--slot--justify-content, center);
+  gap: var(--r-button--gap, 0.5em);
+  font-weight: var(--r-button--slot--font-weight, var(--r-font-weight-regular, 400));
+  text-decoration: var(--r-button--slot--text-decoration, none);
+  text-decoration-color: var(--r-button--slot--text-decoration-color, var(--r-button-color, inherit));
+  text-underline-offset: var(--r-button--slot--text-underline-offset, 0.5rem);
+}