xv-webcomponents 0.1.39 → 0.1.41

package/dist/collection/components/xv-number-input/xv-number-input.css

@@ -0,0 +1,128 @@
+:host {
+  display: inline-block;
+  text-align: left;
+}
+:host .control_label {
+  display: block;
+  margin-bottom: var(--spacing-03);
+  color: var(--text-secondary, #515151);
+  font-family: var(--ff-body, Tahoma);
+  font-size: var(--fz-sm, 12px);
+  font-style: normal;
+  font-weight: 700;
+  line-height: var(--fz-md);
+  letter-spacing: 0.32px;
+}
+:host .control_input {
+  display: flex;
+  border: 1px solid var(--border-subtle-01);
+  outline: 2px solid transparent;
+  background-color: transparent;
+  border-radius: 3px;
+  transition: 250ms ease-in-out border-color, 250ms ease-in-out outline-color;
+}
+:host .control_input:hover {
+  border-color: var(--border-subtle-selected-01);
+}
+:host .control_input:focus-within {
+  outline-color: var(--focus);
+}
+:host .control_input.error {
+  outline-color: var(--support-error);
+}
+:host .control_input.readonly {
+  border-radius: 0;
+  border-top-width: 0;
+  border-left-width: 0;
+  border-right-width: 0;
+  outline-color: transparent;
+}
+:host .control_input input[type=number] {
+  flex: 1;
+  border: none;
+  outline: none;
+  -moz-appearance: textfield;
+  background-color: transparent;
+  margin: 0;
+  padding-block: 0;
+  padding-inline: var(--spacing-05);
+  box-sizing: border-box;
+  color: var(--text-primary);
+  min-width: 20px;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: 0.16px;
+}
+:host .control_input input[type=number]::-webkit-inner-spin-button, :host .control_input input[type=number]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+:host .control_input__icons {
+  display: inline-flex;
+  align-items: stretch;
+  column-gap: 2px;
+}
+:host .control_input__icons .status-icon {
+  display: inline-flex;
+  align-items: center;
+  align-self: center;
+  font-size: 1.35em;
+}
+:host .control_input__icons .status-icon.error {
+  background-color: var(--support-error);
+  color: white;
+  width: 16px;
+  height: 16px;
+  border-radius: 8px;
+  font-size: 12px;
+  font-weight: bold;
+  align-items: center;
+  justify-content: center;
+}
+:host .control_input__icons .status-icon.warning {
+  color: var(--support-warning);
+}
+:host .control_input__icons hr {
+  border: none;
+  outline: none;
+  width: 2px;
+  height: 60%;
+  align-self: center;
+  background-color: var(--border-subtle-01);
+  display: inline-flex;
+}
+:host .message {
+  margin: var(--spacing-02) 0 0;
+  color: var(--text-helper, #646464);
+  font-size: var(--fz-sm, 12px);
+  font-style: normal;
+  font-weight: 400;
+  line-height: var(--fz-md, 16px);
+  letter-spacing: 0.32px;
+}
+:host .message.error {
+  color: var(--text-error);
+}
+:host .message.warning {
+  color: var(--text-secondary, #515151);
+}
+
+:host(.disabled) {
+  cursor: not-allowed;
+}
+:host(.disabled) .control_label,
+:host(.disabled) .control_input input[type=number],
+:host(.disabled) .control_input input[type=number]::placeholder,
+:host(.disabled) .message:not(.error) {
+  color: var(--text-disabled);
+  cursor: not-allowed;
+}
+:host(.disabled) .control_input__icons,
+:host(.disabled) .message.error {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+:host([block]) {
+  display: block;
+}

package/dist/collection/components/xv-number-input/xv-number-input.js

@@ -0,0 +1,373 @@
+import { Host, h } from "@stencil/core";
+import { SIZE_VAR } from "../../types/enum";
+export class XvNumberInput {
+    constructor() {
+        this.step = 10;
+        this.loading = false;
+        this.size = SIZE_VAR.MD;
+        this.increment = () => {
+            const newValue = (this.value || 0) + this.step;
+            if (this.max !== undefined && newValue > this.max)
+                return;
+            this.setValue(newValue);
+        };
+        this.decrement = () => {
+            const newValue = (this.value || 0) - this.step;
+            if (this.min !== undefined && newValue < this.min)
+                return;
+            this.setValue(newValue);
+        };
+        this.handleInput = (event) => {
+            const input = event.target;
+            const num = parseFloat(input.value) || 0;
+            if (isNaN(num))
+                return;
+            this.setValue(num);
+        };
+    }
+    setValue(value) {
+        var _a;
+        this.value = value;
+        this.internals.setFormValue((_a = this.value) === null || _a === void 0 ? void 0 : _a.toString());
+        this.valueChange.emit(this.value);
+    }
+    render() {
+        return (h(Host, { key: '110699b94aabcbb96f29a63a893f6fd0c4c2724b', class: { disabled: !!this.disabled } }, h("label", { key: '05c864b467c85fd2c35605b2c4d35e158345df19', class: "control" }, this.label && h("span", { key: 'ee1f92578bd90677b54d49154286ff83a1e0106c', class: "control_label" }, this.label), h("div", { key: 'a4745ad74f55576f06587f162baf581373e630a6', class: {
+                'control_input': true,
+                readonly: !!this.readonly,
+                error: !!this.error,
+                warning: !!this.warning
+            } }, h("input", { key: 'b797225274e669683326b747e7c4a3f7dadd618d', type: "number", placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, onInput: this.handleInput, name: this.name, min: this.min, max: this.max, step: this.step, value: this.value }), h("div", { key: '8f6632ad50ff3e2eb143f6e5d8f5897e86e65f9e', class: "control_input__icons" }, this.loading ? (h("xv-loader-v2", { size: SIZE_VAR.XS })) : !!this.error ? (h("span", { class: "status-icon error", "aria-hidden": "true" }, "!")) : !!this.warning ? (h("span", { class: "status-icon warning", "aria-hidden": "true" }, "\u26A0")) : null, h("xv-button-v2", { key: 'feb522703f489f47ef80cf50f513c4c13a8c4c9e', size: this.size, variant: "ghost", disabled: this.disabled || this.readonly, onClick: this.decrement, "aria-label": "Decrease" }, h("span", { key: '12be1db37508f37eb4f02e3e160a502918099fe4', slot: "icon-left", class: "status-icon" }, "\u2212")), h("hr", { key: '7b92c8e9f6123064f909a8263e26bb08f5557f47' }), h("xv-button-v2", { key: '0c6bc01f56b2e95e7f493b9183b2dda86311e030', size: this.size, variant: "ghost", disabled: this.disabled || this.readonly, onClick: this.increment, "aria-label": "Increase" }, h("span", { key: '8e72d1a977743731c5cd5a186e014510fc046839', slot: "icon-left", class: "status-icon" }, "+"))))), this.helper && h("p", { key: '09a014e9b38ce4f3a8e98722401234642d57b51f', class: "message" }, this.helper), typeof this.error === 'string' ? (h("p", { class: "message error" }, this.error)) : typeof this.warning === 'string' ? (h("p", { class: "message warning" }, this.warning)) : null));
+    }
+    static get is() { return "xv-number-input-v2"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xv-number-input.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xv-number-input.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "attribute": "label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "placeholder": {
+                "type": "string",
+                "attribute": "placeholder",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "name": {
+                "type": "string",
+                "attribute": "name",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "value": {
+                "type": "number",
+                "attribute": "value",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "helper": {
+                "type": "string",
+                "attribute": "helper",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "error": {
+                "type": "any",
+                "attribute": "error",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | boolean",
+                    "resolved": "boolean | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "warning": {
+                "type": "any",
+                "attribute": "warning",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | boolean",
+                    "resolved": "boolean | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "step": {
+                "type": "number",
+                "attribute": "step",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "10"
+            },
+            "max": {
+                "type": "number",
+                "attribute": "max",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "min": {
+                "type": "number",
+                "attribute": "min",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "readonly": {
+                "type": "boolean",
+                "attribute": "readonly",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "attribute": "disabled",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "loading": {
+                "type": "boolean",
+                "attribute": "loading",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "block": {
+                "type": "boolean",
+                "attribute": "block",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "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": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "SIZE_VAR.MD"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "valueChange",
+                "name": "valueChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}
+//# sourceMappingURL=xv-number-input.js.map

package/dist/collection/components/xv-number-input/xv-number-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xv-number-input.js","sourceRoot":"","sources":["../../../src/components/xv-number-input/xv-number-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter, AttachInternals } from '@stencil/core';\nimport { SIZE_VAR } from '../../types/enum';\n\n@Component({\n  tag: 'xv-number-input-v2',\n  styleUrl: 'xv-number-input.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class XvNumberInput {\n  @Prop() label: string;\n  @Prop({ reflect: true }) placeholder?: string;\n  @Prop({ reflect: true }) name: string;\n  @Prop({ reflect: true, mutable: true }) value: number;\n  @Event({ eventName: 'valueChange' }) valueChange: EventEmitter<number>;\n  @Prop() helper?: string;\n  @Prop() error?: string | boolean;\n  @Prop() warning?: string | boolean;\n  @Prop() step: number = 10;\n  @Prop() max?: number;\n  @Prop() min?: number;\n  @Prop() readonly?: boolean;\n  @Prop() disabled?: boolean;\n  @Prop() loading: boolean = false;\n  @Prop() block?: boolean;\n  @Prop({ reflect: true }) size: SIZE_VAR = SIZE_VAR.MD;\n\n  @AttachInternals() internals: ElementInternals;\n\n  private increment = () => {\n    const newValue = (this.value || 0) + this.step;\n    if (this.max !== undefined && newValue > this.max) return;\n    this.setValue(newValue)\n  };\n\n  private decrement = () => {\n    const newValue = (this.value || 0) - this.step;\n    if (this.min !== undefined && newValue < this.min) return;\n    this.setValue(newValue)\n  };\n\n  private handleInput = (event: Event) => {\n    const input = event.target as HTMLInputElement;\n    const num = parseFloat(input.value) || 0;\n\n    if (isNaN(num)) return;\n\n    this.setValue(num);\n  };\n\n  private setValue(value: number) {\n    this.value = value;\n    this.internals.setFormValue(this.value?.toString());\n    this.valueChange.emit(this.value);\n  }\n\n  render() {\n    return (\n      <Host class={{ disabled: !!this.disabled }}>\n        <label class=\"control\">\n          {this.label && <span class=\"control_label\">{this.label}</span>}\n\n          <div class={{\n            'control_input': true,\n            readonly: !!this.readonly,\n            error: !!this.error,\n            warning: !!this.warning\n          }}>\n            <input\n              type=\"number\"\n              placeholder={this.placeholder}\n              disabled={this.disabled}\n              readonly={this.readonly}\n              onInput={this.handleInput}\n              name={this.name}\n              min={this.min}\n              max={this.max}\n              step={this.step}\n              value={this.value}\n            />\n\n            <div class=\"control_input__icons\">\n              {this.loading ? (\n                <xv-loader-v2 size={SIZE_VAR.XS} />\n              ) : !!this.error ? (\n                <span class=\"status-icon error\" aria-hidden=\"true\">!</span>\n              ) : !!this.warning ? (\n                <span class=\"status-icon warning\" aria-hidden=\"true\">⚠</span>\n              ) : null}\n              <xv-button-v2\n                size={this.size}\n                variant=\"ghost\"\n                disabled={this.disabled || this.readonly}\n                onClick={this.decrement}\n                aria-label=\"Decrease\"\n              ><span slot=\"icon-left\" class=\"status-icon\">−</span></xv-button-v2>\n              <hr />\n              <xv-button-v2\n                size={this.size}\n                variant=\"ghost\"\n                disabled={this.disabled || this.readonly}\n                onClick={this.increment}\n                aria-label=\"Increase\"\n              ><span slot=\"icon-left\" class=\"status-icon\">+</span></xv-button-v2>\n            </div>\n          </div>\n        </label>\n\n\n        {this.helper && <p class=\"message\">{this.helper}</p>}\n        {typeof this.error === 'string' ? (\n          <p class=\"message error\">{this.error}</p>\n        ) : typeof this.warning === 'string' ? (\n          <p class=\"message warning\">{this.warning}</p>\n        ) : null}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/xv-overflow-menu/xv-overflow-menu-item/xv-overflow-menu-item.js

@@ -11,7 +11,7 @@ export class XvOverflowMenuItem {
         this.itemClick.emit({ event, value: this.value });
     }
     render() {
-        return (h(Host, { key: 'e2cb692dfe47684c9ef1cb8cd9519126b98d3be3', class: "xv-overflow-menu-item", role: "menuitem", disabled: this.disabled }, h("slot", { key: '7202537314f9992ef86f5db66a76234d749c9e96' })));
+        return (h(Host, { key: 'b77fdd436fb29e1619c91dd9199496b712209978', class: "xv-overflow-menu-item", role: "menuitem", disabled: this.disabled }, h("slot", { key: '79ad627095559eaafc17c24658969bbe74ce200b' })));
     }
     static get is() { return "xv-overflow-menu-v2-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/xv-overflow-menu/xv-overflow-menu.js

@@ -48,7 +48,7 @@ export class XvOverflowMenu {
         }
     }
     render() {
-        return (h(Host, { key: 'b375598d3169590a82225cc37f52c573bee30c9f', class: "xv-overflow-menu", size: this.size, role: "menu", tabindex: -1 }, h("button", { key: '693ff71c2c32b5eafe680701a519560d36aadf31', class: { btn: true, open: this.open }, onClick: this.onOpenToggle, disabled: this.disabled }, h("svg", { key: '23067a22dfbab57f4840bb31a46e18b311b58316', xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 128 512" }, h("path", { key: 'f3eeded9441704b3ec6fc378bb4518595684d1be', d: "M64 368a48 48 0 1 0 0 96 48 48 0 1 0 0-96zm0-160a48 48 0 1 0 0 96 48 48 0 1 0 0-96zM112 96A48 48 0 1 0 16 96a48 48 0 1 0 96 0z" }))), h("div", { key: '9b7abc36a3b00b02d654b9bf369630164fb25d19', class: { list: true, open: this.open, [`position-${this.position}`]: true } }, h("slot", { key: '4309141f86fb81e49438d033132bc460b7386c7a' }))));
+        return (h(Host, { key: '1dc9416f0d046119e11b2c99bb3eb6d333304ee0', class: "xv-overflow-menu", size: this.size, role: "menu", tabindex: -1 }, h("button", { key: 'df078f87e1b9b2e9fdb057f6186599f86873aa6f', class: { btn: true, open: this.open }, onClick: this.onOpenToggle, disabled: this.disabled }, h("svg", { key: 'd89ae23334072ed22358920a9a8e909c5572936b', xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 128 512" }, h("path", { key: '3a4aaf227ca86efbdf2655c34c8cc7dc05e55b21', d: "M64 368a48 48 0 1 0 0 96 48 48 0 1 0 0-96zm0-160a48 48 0 1 0 0 96 48 48 0 1 0 0-96zM112 96A48 48 0 1 0 16 96a48 48 0 1 0 96 0z" }))), h("div", { key: '8370f57fe6a9dc79ae90980f68b9ac91364bcdd1', class: { list: true, open: this.open, [`position-${this.position}`]: true } }, h("slot", { key: '8a40ab08790a23db858c8e5d393dbb555f7f8d52' }))));
     }
     componentDidLoad() {
         this.openChangeHandle();

package/dist/collection/components/xv-progress-indicator/xv-progress-indicator-item/xv-progress-indicator-item.js

@@ -5,7 +5,7 @@ export class XvProgressIndicatorItem {
         this.status = PROGRESS_ITEM_STATUS.NO_STARTED;
     }
     render() {
-        return (h(Host, { key: '7ab9049e23319e40102861c273bcdbe50a007d47', status: this.status, class: { 'xv-progress-indicator-item': true } }, h("span", { key: 'b354a67c14cce7dfbd4dcc1ea5fbefc322e8387f', class: "line" }), h("span", { key: 'ac9328b00220e878f41601ed622b4bd72f1f4525', class: "icon" }, h("svg", { key: '72315a3e5bdbc53b9c9bad11d0fc664ccbc71dfa', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512" }, h("path", { key: 'a2fd19444c84e59ff52a28e60b77bf8a1a304b0d', fill: "currentColor", d: "M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z" }))), h("p", { key: '8a61ee0d9f5b7cb2d5ec3a3a95de9c6520da3438', class: "label" }, h("slot", { key: '597cc0cd7efb06d78070fdf087537db220784183' }))));
+        return (h(Host, { key: 'aa7a93c986dad88003765936698bd0a9b9ab69c9', status: this.status, class: { 'xv-progress-indicator-item': true } }, h("span", { key: '0858a4714f47c017768c565e97686edba8d01fac', class: "line" }), h("span", { key: 'a4984429a6fa6d24b102ff1f547e6b02060a2ace', class: "icon" }, h("svg", { key: 'aaafe9512fcbd04c6eb08df1cac3abe3a9672187', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512" }, h("path", { key: 'e2016e50eea686b070bee9060ae08b428ac9166c', fill: "currentColor", d: "M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z" }))), h("p", { key: '31231bac86472ec197f1f777fafa409c3be4f3fe', class: "label" }, h("slot", { key: '2aa765f1e87050f1398d31fbae3cfd1c79729bc4' }))));
     }
     static get is() { return "xv-progress-indicator-v2-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/xv-progress-indicator/xv-progress-indicator.js

@@ -56,7 +56,7 @@ export class XvProgressIndicator {
         this.updateChildItems();
     }
     render() {
-        return (h(Host, { key: '5d3f317d147dd29f3e0a00064a2ca4a0a79f101d', variant: this.variant, size: this.size, class: { 'xv-progress-indicator': true } }, h("slot", { key: '1e6a9d655861024aee5d8a4e4e159d5fd06250a8' })));
+        return (h(Host, { key: '3e05f1ba497e8c471d93122e6bce9da9520fb41e', variant: this.variant, size: this.size, class: { 'xv-progress-indicator': true } }, h("slot", { key: 'dbefc5482792a6cbab611aef15e32709125b85b3' })));
     }
     static get is() { return "xv-progress-indicator-v2"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/xv-table/xv-table-cell/xv-table-cell.js

@@ -22,7 +22,7 @@ export class XvTableCell {
     }
     ;
     render() {
-        return (h(Host, { key: 'a43012499f2ab81a47702b6861fd39180729ce8d' }, h("slot", { key: 'bcb83a24979755ec0959e09e849dd8b9fa04a95b' })));
+        return (h(Host, { key: '49c2faf25ce05c90ba4813108cfe4fc73fa165ce' }, h("slot", { key: '885295db92236d22b675d3fdf40a68f828d3ca1a' })));
     }
     static get is() { return "xv-table-v2-cell"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/xv-table/xv-table-expand/xv-table-expand.js

@@ -10,7 +10,7 @@ export class XvTableExpand {
         };
     }
     render() {
-        return (h(Host, { key: 'e1929797c81be1a2ea84916899d39da5d408e6bb' }, h("button", { key: 'd17ee91f88dcde48ccb2b1e0de40eb733d505a78', class: { 'expand-btn': true, open: this.open }, disabled: this.disabled, onClick: this.handleExpand }), h("slot", { key: '33c52bc864e741c66d448e80ec5d675c433aa649', name: XV_EXPANDABLE_KEY }), h("div", { key: '02795ad1ee52bdcf34519b9fcc4325698ef61919', class: { expandableContent: true, open: this.open } }, h("slot", { key: '185185f6fed3ae43a09c85903628eced54847cb7' }))));
+        return (h(Host, { key: '1cdc6260aa3933b453fb16211c28d6fbea2a0350' }, h("button", { key: '53dbd31f7c4a47190af4963bf8437c061ca59827', class: { 'expand-btn': true, open: this.open }, disabled: this.disabled, onClick: this.handleExpand }), h("slot", { key: 'ba53a344f92e28fa173bba7fa49e0b9c8a3036db', name: XV_EXPANDABLE_KEY }), h("div", { key: '24b785baa2b308a46414b14f5fbe87a88bb91deb', class: { expandableContent: true, open: this.open } }, h("slot", { key: '8dbc793cd4e27694dac3cf240b9dd919bac0f36b' }))));
     }
     componentDidLoad() {
         setAttr(this.el.parentElement, XV_EXPANDABLE_KEY, true);

package/dist/collection/components/xv-table/xv-table-row/xv-table-row.js

@@ -42,7 +42,7 @@ export class XvTableRow {
         }
     }
     render() {
-        return (h(Host, { key: '0fa754f2982bb475a1354cf8c7653cdbc9b710bc' }, this.variant !== undefined && (h("xv-table-v2-cell", { key: '344b3acf23c6e96e7c2422bc87ba47ddc468fe32', class: "cell-control" }, this.variant === 'checkbox' && (h("xv-checkbox-v2", { key: '718a01dddcd1d5f3c354a26f8c4d7d0920048be1', name: this.name, partial: this.partial, checked: this.checked || this.partial, disabled: this.disabled, required: this.required, readonly: this.readonly, onEventChange: this.checkHandle })), this.variant === 'radio' && (h("input", { key: '8c49a2babdf5388004b1ab3cb1639206687f7535', type: "radio", name: this.name, checked: this.checked || this.partial, disabled: this.disabled, required: this.required, readonly: this.readonly })))), h("slot", { key: '565e6e933a38fd71ccd49f28772014ca3cb06398' })));
+        return (h(Host, { key: 'bbf22a27e0dad429a6b78add5cc7582af2c9fb05' }, this.variant !== undefined && (h("xv-table-v2-cell", { key: '55c69e4d4b996db975015a5c4583e7b47e08a84a', class: "cell-control" }, this.variant === 'checkbox' && (h("xv-checkbox-v2", { key: 'ab88c9827b708e849088214eb26a83157f4775aa', name: this.name, partial: this.partial, checked: this.checked || this.partial, disabled: this.disabled, required: this.required, readonly: this.readonly, onEventChange: this.checkHandle })), this.variant === 'radio' && (h("input", { key: 'dbb9e381633828073940e32bf5b40231e3e34857', type: "radio", name: this.name, checked: this.checked || this.partial, disabled: this.disabled, required: this.required, readonly: this.readonly })))), h("slot", { key: 'a2043f89fb359453c4839c000fdcead5ab8769ae' })));
     }
     componentWillLoad() {
         this.setInitialAttrs();

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

@@ -31,7 +31,7 @@ export class XvTable {
             .join(' ') + ' repeat(auto-fit, minmax(0, 1fr))');
     }
     render() {
-        return (h(Host, { key: '4894a985912a52eb0173566d6c2daff7dfc39035', class: { batchVisible: !!this.selectedCount } }, h("slot", { key: 'c370d3fd370a78528ff5e540fb59239c6b416bd9', name: "title" }, !!this.el.title && h("h2", { key: 'aefcffd432a2c24c6f84924d03fad5f0498d4b10', class: "xv-table-title" }, this.el.title)), h("slot", { key: '227b2ace04ed35ce3cff88c34d99054d8c552bc3', name: "toolbar" }), h("div", { key: '810934177b689d49dc1402aac97502081982744b', class: "xv-table" }, h("div", { key: 'db7c19f33120457dbd53a491579379741187652f', class: "batch-actions" }, h(Fragment, { key: 'b9c688ccda045afc1fd46ebed503d96f3096f788' }, h("div", { key: '628767d1a33fa98195056441e871a4beccb5b1ec', class: "batch-actions_content" }, h("slot", { key: 'b73f2d55c5c65daaabce1a89eb61ed328445c804', name: "batch" })), h("p", { key: '162fa01f1027c4c0df8a784995b50a085f44e98b', class: "batch-actions_count" }, !!this.selectedCount && `${this.selectedCount} ${this.selectedCount === 1 ? 'Position ausgewählt' : 'Positionen ausgewählt'}`))), h("div", { key: '68b9c4807c9e6dd297bc74867f3230154493d5e6', class: "xv-table_wrapper" }, h("slot", { key: 'fd28df98e8497825d4f4ecfb3e292c724952ae83' }), h("slot", { key: 'f1604b484a87f35fffa11fc55eb05ff52d3d55ac', name: "footer" })), !!this.loading && (h("div", { key: '6e7cae29ba018e5af760cdcb9a9387e5e33369ae', class: "xv-table_loading" }, h("xv-loader-v2", { key: '72f23f7b4de8edeae93565bccceeca9e78a071d4', size: SIZE_VAR.LG }))))));
+        return (h(Host, { key: '173110599b9a11fec560bfa5f648f5fed235175f', class: { batchVisible: !!this.selectedCount } }, h("slot", { key: '3966a6ba192313ab9cbe5b26cadd765c12b08262', name: "title" }, !!this.el.title && h("h2", { key: '51bf9b76da8f3605f1254ff3df0e9bf68751ec2c', class: "xv-table-title" }, this.el.title)), h("slot", { key: '9276e8836c4086bc2b8d1dc4aacdc2b447b31f57', name: "toolbar" }), h("div", { key: '8fa9c349b7d377cd2860054de08fdea4061462cd', class: "xv-table" }, h("div", { key: '0dd60cd039409d66e6c024a46e9c7353b825fc39', class: "batch-actions" }, h(Fragment, { key: '5b2b17c1ba82cb36c57fb7c99c54f1a66f4146e0' }, h("div", { key: '6fbdb8faad086fe53fe9dc277065db514327a498', class: "batch-actions_content" }, h("slot", { key: 'e8769e3dfe0e539dbfc14033079636f364556e31', name: "batch" })), h("p", { key: '857f33d3595cf5e5f0a0ffc4474e801ea9e4aeaa', class: "batch-actions_count" }, !!this.selectedCount && `${this.selectedCount} ${this.selectedCount === 1 ? 'Position ausgewählt' : 'Positionen ausgewählt'}`))), h("div", { key: '4f0d41aabd8f78f04c0ded187c2dc117794802a8', class: "xv-table_wrapper" }, h("slot", { key: '7de743d320da2d68f9835b0dacd3db192b5e12b9' }), h("slot", { key: 'b0fb15c2fb82e94a249d2f0be12a04066ff244ea', name: "footer" })), !!this.loading && (h("div", { key: 'bd3947a1ad4d34bb0ea57a4648336d40d2b4499b', class: "xv-table_loading" }, h("xv-loader-v2", { key: '0991ecbde1fae86b8a7da8b348594a76e176fc09', size: SIZE_VAR.LG }))))));
     }
     componentWillLoad() {
         this.setColsSizeTemplate();

package/dist/collection/components/xv-tabs/xv-tab/xv-tab.js

@@ -6,7 +6,7 @@ export class XvTab {
         this.loading = false;
     }
     render() {
-        return (h(Host, { key: 'acf8d6047f8d0b12a4353c439bb8be5e96a6de2d', disabled: this.disabled, name: this.name }, this.loading ? h("xv-loader-v2", { size: SIZE_VAR.LG }) : h("slot", null)));
+        return (h(Host, { key: '560790ac18797ba2238cff26a7ef87eb8b53d483', disabled: this.disabled, name: this.name }, this.loading ? h("xv-loader-v2", { size: SIZE_VAR.LG }) : h("slot", null)));
     }
     static get is() { return "xv-tab-v2"; }
     static get encapsulation() { return "shadow"; }

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

@@ -68,8 +68,7 @@ export class XvTabs {
         const nextTab = this.tabElements[nextIdx];
         if (!nextTab || nextTab.hasAttribute('disabled'))
             return;
-        this.active = nextTab.getAttribute('name') || `${nextIdx}`;
-        this.scrollToActiveTab();
+        this.handleTabClick(nextTab.getAttribute('name') || nextIdx);
     }
     render() {
         var _a, _b, _c;