xv-webcomponents 0.1.43 → 0.1.46

package/dist/collection/components/xv-breadcrumbs/xv-breadcrumbs.css

@@ -0,0 +1,98 @@
+.xv-tooltip[role=tooltip] {
+  position: absolute;
+  background-color: var(--background-inverse, #333333);
+  color: var(--text-on-color);
+  padding: var(--spacing-03) var(--spacing-04);
+  border-radius: 3px;
+  font-size: var(--fz-sm);
+  z-index: 999;
+  min-width: min(150px, 90vw);
+  max-width: min(400px, 90vw);
+}
+.xv-tooltip[role=tooltip]::after {
+  content: "";
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-style: solid;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=top]::after {
+  bottom: -5px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-width: 5px 5px 0 5px;
+  border-color: var(--background-inverse, black) transparent transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=top-start]::after {
+  bottom: -5px;
+  left: 12px;
+  border-width: 5px 5px 0 5px;
+  border-color: var(--background-inverse, black) transparent transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=top-end]::after {
+  bottom: -5px;
+  right: 12px;
+  border-width: 5px 5px 0 5px;
+  border-color: var(--background-inverse, black) transparent transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=bottom]::after {
+  top: -5px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-width: 0 5px 5px 5px;
+  border-color: transparent transparent var(--background-inverse, black) transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=bottom-start]::after {
+  top: -5px;
+  left: 12px;
+  border-width: 0 5px 5px 5px;
+  border-color: transparent transparent var(--background-inverse, black) transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=bottom-end]::after {
+  top: -5px;
+  right: 12px;
+  border-width: 0 5px 5px 5px;
+  border-color: transparent transparent var(--background-inverse, black) transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=left]::after {
+  top: 50%;
+  right: -5px;
+  transform: translateY(-50%);
+  border-width: 5px 0 5px 5px;
+  border-color: transparent transparent transparent var(--background-inverse, black);
+}
+.xv-tooltip[role=tooltip][data-popper-placement=left-start]::after {
+  top: 12px;
+  right: -5px;
+  border-width: 5px 0 5px 5px;
+  border-color: transparent transparent transparent var(--background-inverse, black);
+}
+.xv-tooltip[role=tooltip][data-popper-placement=left-end]::after {
+  bottom: 12px;
+  right: -5px;
+  border-width: 5px 0 5px 5px;
+  border-color: transparent transparent transparent var(--background-inverse, black);
+}
+.xv-tooltip[role=tooltip][data-popper-placement=right]::after {
+  top: 50%;
+  left: -5px;
+  transform: translateY(-50%);
+  border-width: 5px 5px 5px 0;
+  border-color: transparent var(--background-inverse, black) transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=right-start]::after {
+  top: 12px;
+  left: -5px;
+  border-width: 5px 5px 5px 0;
+  border-color: transparent var(--background-inverse, black) transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=right-end]::after {
+  bottom: 12px;
+  left: -5px;
+  border-width: 5px 5px 5px 0;
+  border-color: transparent var(--background-inverse, black) transparent transparent;
+}
+
+:host {
+  display: block;
+}

package/dist/collection/components/xv-breadcrumbs/xv-breadcrumbs.js

@@ -0,0 +1,19 @@
+import { Host, h } from "@stencil/core";
+export class XvBreadcrumbs {
+    render() {
+        return (h(Host, { key: '5af11f456cfed9e3a853fa3ccdcf12d2d5d5e49f' }, h("slot", { key: 'ecef5ef84a97ceefda5cbcb54e23056e2adbdf99' })));
+    }
+    static get is() { return "xv-breadcrumbs-v2"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xv-breadcrumbs.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xv-breadcrumbs.css"]
+        };
+    }
+}
+//# sourceMappingURL=xv-breadcrumbs.js.map

package/dist/collection/components/xv-breadcrumbs/xv-breadcrumbs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xv-breadcrumbs.js","sourceRoot":"","sources":["../../../src/components/xv-breadcrumbs/xv-breadcrumbs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,aAAa;IACxB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h } from '@stencil/core';\n\n@Component({\n  tag: 'xv-breadcrumbs-v2',\n  styleUrl: 'xv-breadcrumbs.scss',\n  shadow: true,\n})\nexport class XvBreadcrumbs {\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/xv-button/xv-button-v2.css

@@ -0,0 +1,268 @@
+.xv-tooltip[role=tooltip] {
+  position: absolute;
+  background-color: var(--background-inverse, #333333);
+  color: var(--text-on-color);
+  padding: var(--spacing-03) var(--spacing-04);
+  border-radius: 3px;
+  font-size: var(--fz-sm);
+  z-index: 999;
+  min-width: min(150px, 90vw);
+  max-width: min(400px, 90vw);
+}
+.xv-tooltip[role=tooltip]::after {
+  content: "";
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-style: solid;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=top]::after {
+  bottom: -5px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-width: 5px 5px 0 5px;
+  border-color: var(--background-inverse, black) transparent transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=top-start]::after {
+  bottom: -5px;
+  left: 12px;
+  border-width: 5px 5px 0 5px;
+  border-color: var(--background-inverse, black) transparent transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=top-end]::after {
+  bottom: -5px;
+  right: 12px;
+  border-width: 5px 5px 0 5px;
+  border-color: var(--background-inverse, black) transparent transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=bottom]::after {
+  top: -5px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-width: 0 5px 5px 5px;
+  border-color: transparent transparent var(--background-inverse, black) transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=bottom-start]::after {
+  top: -5px;
+  left: 12px;
+  border-width: 0 5px 5px 5px;
+  border-color: transparent transparent var(--background-inverse, black) transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=bottom-end]::after {
+  top: -5px;
+  right: 12px;
+  border-width: 0 5px 5px 5px;
+  border-color: transparent transparent var(--background-inverse, black) transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=left]::after {
+  top: 50%;
+  right: -5px;
+  transform: translateY(-50%);
+  border-width: 5px 0 5px 5px;
+  border-color: transparent transparent transparent var(--background-inverse, black);
+}
+.xv-tooltip[role=tooltip][data-popper-placement=left-start]::after {
+  top: 12px;
+  right: -5px;
+  border-width: 5px 0 5px 5px;
+  border-color: transparent transparent transparent var(--background-inverse, black);
+}
+.xv-tooltip[role=tooltip][data-popper-placement=left-end]::after {
+  bottom: 12px;
+  right: -5px;
+  border-width: 5px 0 5px 5px;
+  border-color: transparent transparent transparent var(--background-inverse, black);
+}
+.xv-tooltip[role=tooltip][data-popper-placement=right]::after {
+  top: 50%;
+  left: -5px;
+  transform: translateY(-50%);
+  border-width: 5px 5px 5px 0;
+  border-color: transparent var(--background-inverse, black) transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=right-start]::after {
+  top: 12px;
+  left: -5px;
+  border-width: 5px 5px 5px 0;
+  border-color: transparent var(--background-inverse, black) transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=right-end]::after {
+  bottom: 12px;
+  left: -5px;
+  border-width: 5px 5px 5px 0;
+  border-color: transparent var(--background-inverse, black) transparent transparent;
+}
+
+:host {
+  display: inline-block;
+}
+
+:host([block]) {
+  display: block;
+  width: 100%;
+}
+
+.xv-button {
+  all: unset;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  border-radius: 3px;
+  font-size: var(--fz-md);
+  font-family: var(--ff-body, Tahoma);
+  font-style: normal;
+  font-weight: 700;
+  line-height: 128.571%;
+  letter-spacing: 0.16px;
+  cursor: pointer;
+  position: relative;
+  transition: background 0.2s, color 0.2s, border-color 0.2s;
+  user-select: none;
+  width: 100%;
+}
+.xv-button:focus-visible {
+  outline: 2px solid var(--focus);
+  outline-offset: 2px;
+}
+.xv-button--xs {
+  --xv-button-icon-size: 16px;
+  padding: var(--spacing-02);
+  height: var(--xv-button-icon-size);
+}
+.xv-button--sm {
+  --xv-button-icon-size: 32px;
+  padding: var(--spacing-03);
+  height: var(--xv-button-icon-size);
+}
+.xv-button--md {
+  --xv-button-icon-size: 40px;
+  padding: var(--spacing-04);
+  height: var(--xv-button-icon-size);
+}
+.xv-button--lg {
+  --xv-button-icon-size: 48px;
+  padding: var(--spacing-05);
+  height: var(--xv-button-icon-size);
+}
+.xv-button--xl {
+  --xv-button-icon-size: 60px;
+  font-size: 1.1em;
+  padding: var(--spacing-06);
+  height: auto;
+}
+.xv-button--primary {
+  background-color: var(--button-primary);
+  color: var(--text-on-color);
+}
+.xv-button--primary:hover {
+  background-color: var(--button-primary-hover);
+}
+.xv-button--primary:active {
+  background-color: var(--button-primary-active);
+}
+.xv-button--accent {
+  background-color: var(--button-accent);
+  color: var(--text-on-color);
+}
+.xv-button--accent:hover {
+  background-color: var(--button-accent-hover);
+}
+.xv-button--accent:active {
+  background-color: var(--button-accent-active);
+}
+.xv-button--secondary {
+  background-color: var(--button-secondary);
+  border: 1px solid var(--border-subtle-01);
+}
+.xv-button--secondary:hover {
+  background-color: var(--button-secondary-hover);
+}
+.xv-button--secondary:active {
+  background-color: var(--button-secondary-active);
+}
+.xv-button--danger {
+  background: var(--support-error);
+  color: white;
+}
+.xv-button--danger:hover {
+  background-color: #ba1b23;
+}
+.xv-button--danger:active {
+  background-color: #750e13;
+}
+.xv-button--danger:disabled {
+  background-color: var(--button-disabled);
+  border-color: transparent;
+  color: var(--text-on-color-disabled, #8B8B8B);
+}
+.xv-button--tertiary {
+  background-color: transparent;
+  border: 1px solid var(--button-tertiary);
+}
+.xv-button--tertiary:hover {
+  background-color: var(--button-tertiary-hover);
+}
+.xv-button--tertiary:active {
+  background-color: var(--button-tertiary-active);
+}
+.xv-button--tertiary:disabled {
+  color: var(--text-disabled);
+  border-color: var(--button-disabled, #D1D1D1);
+  background-color: transparent;
+}
+.xv-button--ghost {
+  background-color: transparent;
+  color: var(--text-primary);
+}
+.xv-button--ghost:hover {
+  background-color: transparent;
+}
+.xv-button--ghost:active {
+  background-color: rgba(139, 139, 139, 0.5);
+}
+.xv-button--ghost:disabled {
+  color: var(--text-disabled);
+  border-color: transparent;
+  background-color: transparent;
+}
+.xv-button--primary:disabled, .xv-button--accent:disabled, .xv-button--secondary:disabled, .xv-button--danger:disabled {
+  border-color: var(--border-subtle-01, #D1D1D1);
+  background-color: var(--button-disabled, #D1D1D1);
+  color: var(--text-on-color-disabled, #8B8B8B);
+}
+.xv-button--disabled {
+  cursor: not-allowed;
+}
+.xv-button--loading {
+  pointer-events: none;
+  opacity: 0.8;
+}
+.xv-button__label {
+  display: inline-flex;
+  align-items: center;
+}
+.xv-button__loader {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.xv-button__icon {
+  display: inline-flex;
+  align-items: center;
+}
+.xv-button--icon-left .xv-button__icon--left {
+  margin-inline-end: var(--spacing-05);
+}
+.xv-button--icon-right .xv-button__icon--right {
+  margin-inline-start: var(--spacing-05);
+}
+.xv-button--icon-only {
+  padding: 0;
+  width: var(--xv-button-icon-size, 40px);
+  height: var(--xv-button-icon-size, 40px);
+  justify-content: center;
+}
+.xv-button--icon-only .xv-button__icon {
+  margin: 0;
+}

package/dist/collection/components/xv-button/xv-button.js

@@ -0,0 +1,229 @@
+import { h, Host } from "@stencil/core";
+import { SIZE_VAR } from "../../types/enum";
+export class XvButton {
+    constructor() {
+        /** Button variants */
+        this.variant = 'primary';
+        /** Button size */
+        this.size = SIZE_VAR.MD;
+        /** Button disabled state */
+        this.disabled = false;
+        /** Button loading state */
+        this.loading = false;
+        /** Button for full width */
+        this.block = false;
+        /** Button type */
+        this.type = 'button';
+        this.hasLeftIcon = false;
+        this.hasRightIcon = false;
+        this.hasContent = false;
+        this.handleSlotChangeLeft = (event) => {
+            this.hasLeftIcon = event.target.assignedElements().length > 0;
+        };
+        this.handleSlotChangeContent = (event) => {
+            this.hasContent = event.target.assignedNodes().some(node => {
+                var _a;
+                return node.nodeType === Node.ELEMENT_NODE ||
+                    (node.nodeType === Node.TEXT_NODE && ((_a = node.textContent) === null || _a === void 0 ? void 0 : _a.trim()) !== '');
+            });
+        };
+        this.handleSlotChangeRight = (event) => {
+            this.hasRightIcon = event.target.assignedElements().length > 0;
+        };
+        this.handleClick = () => {
+            var _a, _b;
+            if (this.type === 'submit') {
+                (_a = this.internals.form) === null || _a === void 0 ? void 0 : _a.requestSubmit();
+            }
+            else if (this.type === 'reset') {
+                (_b = this.internals.form) === null || _b === void 0 ? void 0 : _b.reset();
+            }
+        };
+    }
+    render() {
+        var _a;
+        return (h(Host, { key: 'ad8e2051c6023d13626e65861099114e2ff06db2' }, h("button", { key: '1f2b8e13a29a63b3f50ced928a83e92d0eb5c0ea', class: {
+                'xv-button': true,
+                [`xv-button--${this.variant}`]: !!this.variant,
+                [`xv-button--${this.size}`]: !!this.size,
+                'xv-button--disabled': this.disabled || this.loading,
+                'xv-button--block': this.block,
+                'xv-button--loading': this.loading,
+                'xv-button--icon-left': this.hasLeftIcon,
+                'xv-button--icon-right': this.hasRightIcon,
+                'xv-button--icon-only': !this.hasContent,
+            }, part: "button", onClick: this.handleClick, type: this.type, disabled: this.disabled || this.loading, "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": ((_a = this.el) === null || _a === void 0 ? void 0 : _a.ariaLabel) || 'XV button' }, this.loading && (h("xv-loader-v2", { key: 'a7c55e4823b233f845f1a9e5e654f2c98a88001d', class: "xv-button__loader", size: this.size !== SIZE_VAR.XL ? this.size : SIZE_VAR.LG })), h("span", { key: '57f0ced69f7022ba8b602083b69fa2804061ccef', class: "xv-button__icon xv-button__icon--left" }, h("slot", { key: '8c6c0c1a12bfafe6a3674352b5e8ba77e0562eb3', name: "icon-left", onSlotchange: this.handleSlotChangeLeft })), h("span", { key: '8e19d4691b333a0d70a76ed476f59bacfeefa963', class: "xv-button__label" }, h("slot", { key: 'c9d9896b34e3137442b11db5d4f44d097d952d37', onSlotchange: this.handleSlotChangeContent }, this.label)), h("span", { key: '25a3256dff8ec326c081601dd46cff45149a7683', class: "xv-button__icon xv-button__icon--right" }, h("slot", { key: '90505c36d3620fa19c3d01fc1e66cc57e705a8db', name: "icon-right", onSlotchange: this.handleSlotChangeRight })))));
+    }
+    static get is() { return "xv-button-v2"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xv-button-v2.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xv-button-v2.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "attribute": "label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Button label is optional you can use just inside content"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "variant": {
+                "type": "string",
+                "attribute": "variant",
+                "mutable": false,
+                "complexType": {
+                    "original": "'primary' | 'secondary' | 'ghost' | 'danger' | 'tertiary'",
+                    "resolved": "\"danger\" | \"ghost\" | \"primary\" | \"secondary\" | \"tertiary\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Button variants"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "'primary'"
+            },
+            "size": {
+                "type": "string",
+                "attribute": "size",
+                "mutable": false,
+                "complexType": {
+                    "original": "SIZE_VAR",
+                    "resolved": "SIZE_VAR.LG | SIZE_VAR.MD | SIZE_VAR.SM | SIZE_VAR.XL | SIZE_VAR.XS",
+                    "references": {
+                        "SIZE_VAR": {
+                            "location": "import",
+                            "path": "../../types/enum",
+                            "id": "src/types/enum.ts::SIZE_VAR"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Button size"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "SIZE_VAR.MD"
+            },
+            "disabled": {
+                "type": "boolean",
+                "attribute": "disabled",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Button disabled state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "loading": {
+                "type": "boolean",
+                "attribute": "loading",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Button loading state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "block": {
+                "type": "boolean",
+                "attribute": "block",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Button for full width"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "type": {
+                "type": "string",
+                "attribute": "type",
+                "mutable": false,
+                "complexType": {
+                    "original": "'button' | 'submit' | 'reset'",
+                    "resolved": "\"button\" | \"reset\" | \"submit\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Button type"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "'button'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasLeftIcon": {},
+            "hasRightIcon": {},
+            "hasContent": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get attachInternalsMemberName() { return "internals"; }
+}
+//# sourceMappingURL=xv-button.js.map

package/dist/collection/components/xv-button/xv-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xv-button.js","sourceRoot":"","sources":["../../../src/components/xv-button/xv-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Element, State, Host, AttachInternals } from '@stencil/core';\r\nimport { SIZE_VAR } from '../../types/enum';\r\n\r\n\r\n@Component({\r\n  tag: 'xv-button-v2',\r\n  styleUrl: 'xv-button-v2.scss',\r\n  shadow: true,\r\n  formAssociated: true,\r\n})\r\nexport class XvButton {\r\n  @Element() el: HTMLElement;\r\n\r\n  /** Button label is optional you can use just inside content */\r\n  @Prop({ reflect: true }) label?: string;\r\n  /** Button variants */\r\n  @Prop({ reflect: true }) variant: 'primary' | 'secondary' | 'ghost' | 'danger' | 'tertiary' = 'primary';\r\n  /** Button size */\r\n  @Prop({ reflect: true }) size: SIZE_VAR = SIZE_VAR.MD;\r\n  /** Button disabled state */\r\n  @Prop({ reflect: true }) disabled: boolean = false;\r\n  /** Button loading state */\r\n  @Prop({ reflect: true }) loading: boolean = false;\r\n  /** Button for full width */\r\n  @Prop({ reflect: true }) block: boolean = false;\r\n  /** Button type */\r\n  @Prop({ reflect: true }) type: 'button' | 'submit' | 'reset' = 'button';\r\n\r\n  @State() hasLeftIcon: boolean = false;\r\n  @State() hasRightIcon: boolean = false;\r\n  @State() hasContent: boolean = false;\r\n\r\n  @AttachInternals() internals: ElementInternals;\r\n\r\n  private handleSlotChangeLeft = (event: Event) => {\r\n    this.hasLeftIcon = (event.target as HTMLSlotElement).assignedElements().length > 0;\r\n  };\r\n\r\n  private handleSlotChangeContent = (event: Event) => {\r\n    this.hasContent = (event.target as HTMLSlotElement).assignedNodes().some(\r\n      node =>\r\n        node.nodeType === Node.ELEMENT_NODE ||\r\n        (node.nodeType === Node.TEXT_NODE && node.textContent?.trim() !== ''),\r\n    );\r\n  };\r\n\r\n  private handleSlotChangeRight = (event: Event) => {\r\n    this.hasRightIcon = (event.target as HTMLSlotElement).assignedElements().length > 0;\r\n  };\r\n\r\n  private handleClick = () => {\r\n    if (this.type === 'submit') {\r\n      this.internals.form?.requestSubmit();\r\n    } else if (this.type === 'reset') {\r\n      this.internals.form?.reset();\r\n    }\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <button\r\n          class={{\r\n            'xv-button': true,\r\n            [`xv-button--${this.variant}`]: !!this.variant,\r\n            [`xv-button--${this.size}`]: !!this.size,\r\n            'xv-button--disabled': this.disabled || this.loading,\r\n            'xv-button--block': this.block,\r\n            'xv-button--loading': this.loading,\r\n            'xv-button--icon-left': this.hasLeftIcon,\r\n            'xv-button--icon-right': this.hasRightIcon,\r\n            'xv-button--icon-only': !this.hasContent,\r\n          }}\r\n          part=\"button\"\r\n          onClick={this.handleClick}\r\n          type={this.type}\r\n          disabled={this.disabled || this.loading}\r\n          aria-disabled={this.disabled ? 'true' : undefined}\r\n          aria-label={this.el?.ariaLabel || 'XV button'}\r\n        >\r\n          {this.loading && (\r\n            <xv-loader-v2 class=\"xv-button__loader\"\r\n                          size={this.size !== SIZE_VAR.XL ? this.size : SIZE_VAR.LG} />\r\n          )}\r\n\r\n          <span class=\"xv-button__icon xv-button__icon--left\">\r\n              <slot name=\"icon-left\" onSlotchange={this.handleSlotChangeLeft}></slot>\r\n            </span>\r\n\r\n          <span class=\"xv-button__label\">\r\n              <slot onSlotchange={this.handleSlotChangeContent}>\r\n                {this.label}\r\n              </slot>\r\n            </span>\r\n\r\n          <span class=\"xv-button__icon xv-button__icon--right\">\r\n              <slot name=\"icon-right\" onSlotchange={this.handleSlotChangeRight}></slot>\r\n            </span>\r\n        </button>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}