xv-webcomponents 0.1.17 → 0.1.18

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

@@ -1,22 +1,376 @@
-import { h } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 export class XvCheckbox {
-    applyGlobalStyles() {
+    constructor() {
+        var _a, _b;
+        /**
+         * Default checked status
+         */
+        this.checked = false;
+        /**
+         * Using for forms
+         */
+        this.indeterminate = false;
+        /**
+         * Disabled status
+         */
+        this.disabled = false;
+        /**
+         * Input value
+         */
+        this.value = 'on';
+        /**
+         * The same like default checkbox prop
+         */
+        this.required = false;
+        /**
+         * Change checkmark icon to minus
+         */
+        this.partial = false;
+        this.hasFocus = false;
+        this.onInput = (e) => {
+            const target = e.target;
+            this.checked = target.checked;
+            this.inputEvent.emit(this.checked);
+        };
+        this.onChange = (e) => {
+            const target = e.target;
+            this.checked = target.checked;
+            this.changeEvent.emit(this.checked);
+        };
+        this.onFocus = () => {
+            this.hasFocus = true;
+            this.focusEvent.emit();
+        };
+        this.onBlur = () => {
+            this.hasFocus = false;
+            this.blurEvent.emit();
+        };
+        this.internals = ((_b = (_a = this.el).attachInternals) === null || _b === void 0 ? void 0 : _b.call(_a)) || {};
+    }
+    connectedCallback() {
         var _a;
-        const globalStyle = document.getElementById("brand-style");
-        if (globalStyle) {
-            const styleClone = document.createElement("style");
-            styleClone.innerHTML = `@import url('${globalStyle.href}');`;
-            (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.appendChild(styleClone);
+        if ((_a = this.internals) === null || _a === void 0 ? void 0 : _a.setFormValue) {
+            this.internals.setFormValue(this.checked ? this.value : null);
         }
     }
-    componentWillLoad() {
-        this.applyGlobalStyles();
+    onCheckedChange(newValue) {
+        var _a;
+        if ((_a = this.internals) === null || _a === void 0 ? void 0 : _a.setFormValue) {
+            this.internals.setFormValue(newValue ? this.value : null);
+        }
     }
     render() {
-        return (h("label", { key: '854b175975d81eaa3dd16ab5e5e7ecb8075da6a2', class: "checkbox-container" }, h("input", { key: '4a40abb6dcec0a634d1e2d40878e877771ffd94d', type: "checkbox" }), h("span", { key: '473ce5b6240284f96d2b9a4d759ee18182470c10', class: "checkmark" }), h("slot", { key: '664f0b742f6ee4e2d71e984031052b9e746189b9' })));
+        return (h(Host, { key: '6dc76eae00dd96750977c77db16f31ccfbc15129' }, h("label", { key: '6f8f256877217e0e138673083721db9ffd4e21e3', class: { 'xv-checkbox': true, disabled: this.disabled } }, h("input", { key: 'ef6abcf5e0904f64dac882fef2d58f7275172443', ref: el => (this.inputEl = el), type: "checkbox", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, required: this.required, indeterminate: this.indeterminate, onInput: this.onInput, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur }), h("span", { key: '04bba1b7f7043f2d5a8ddef812f73a9d2248c1c8', class: `checkmark ${this.partial ? 'checkmark-partial' : ''}` }), h("div", { key: '5f550233505fd663d5876bbc4718c8be44bbeabe', class: "label" }, h("slot", { key: '861d10aafa6c719a3c712325a7425047fe81bc4a' }, this.label))), h("slot", { key: '4e3229b715ec7144816d5119a7f7dc2f6411a86b', name: "info" }), !!this.error && h("span", { key: 'c802d1d194b9490283aecadf766f7c066b9bfd90', class: "error" }, this.error)));
+    }
+    componentDidLoad() {
+        if (this.indeterminate) {
+            this.inputEl.indeterminate = true;
+        }
+    }
+    componentDidUpdate() {
+        if (this.inputEl) {
+            this.inputEl.indeterminate = this.indeterminate;
+        }
+    }
+    formResetCallback() {
+        this.checked = false;
+    }
+    formStateRestoreCallback(state) {
+        this.checked = state === this.value;
     }
     static get is() { return "xv-checkbox-v2"; }
     static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xv-checkbox.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xv-checkbox.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "checked": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Default checked status"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "checked",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "indeterminate": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Using for forms"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "indeterminate",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disabled status"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Input name"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "name",
+                "reflect": true
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Input value"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "value",
+                "reflect": true,
+                "defaultValue": "'on'"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The same like default checkbox prop"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "required",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "partial": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Change checkmark icon to minus"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "partial",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Can be used like property or like slot"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "label",
+                "reflect": false
+            },
+            "size": {
+                "type": "string",
+                "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": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "size",
+                "reflect": true
+            },
+            "error": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | boolean",
+                    "resolved": "boolean | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "error",
+                "reflect": true
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasFocus": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "changeEvent",
+                "name": "eventChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "event 'onEventChange'"
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }, {
+                "method": "inputEvent",
+                "name": "eventInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "event 'onEventInput'"
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }, {
+                "method": "focusEvent",
+                "name": "eventFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "event 'onEventFocus'"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "blurEvent",
+                "name": "eventBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "event 'onEventBlur'"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "checked",
+                "methodName": "onCheckedChange"
+            }];
+    }
 }
 //# sourceMappingURL=xv-checkbox.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"xv-checkbox.js","sourceRoot":"","sources":["../../../src/components/xv-checkbox/xv-checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAMtD,MAAM,OAAO,UAAU;IAGb,iBAAiB;;QACvB,MAAM,WAAW,GAAG,QAAQ,CAAC,cAAc,CAAC,aAAa,CAAoB,CAAC;QAC9E,IAAI,WAAW,EAAE,CAAC;YAChB,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;YACnD,UAAU,CAAC,SAAS,GAAG,gBAAgB,WAAW,CAAC,IAAI,KAAK,CAAC;YAC7D,MAAA,IAAI,CAAC,EAAE,CAAC,UAAU,0CAAE,WAAW,CAAC,UAAU,CAAC,CAAC;QAC9C,CAAC;IACH,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC3B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,8DAAO,KAAK,EAAC,oBAAoB;YAC/B,8DAAO,IAAI,EAAC,UAAU,GAAG;YACzB,6DAAM,KAAK,EAAC,WAAW,GAAQ;YAC/B,8DAAa,CACP,CACT,CAAC;IACJ,CAAC;;;;CACF","sourcesContent":["import { Component, h, Element } from '@stencil/core';\n\n@Component({\n  tag: 'xv-checkbox-v2',\n  shadow: true, // ✅ Shadow DOM aktiviert\n})\nexport class XvCheckbox {\n  @Element() el!: HTMLElement;\n\n  private applyGlobalStyles() {\n    const globalStyle = document.getElementById(\"brand-style\") as HTMLLinkElement;\n    if (globalStyle) {\n      const styleClone = document.createElement(\"style\");\n      styleClone.innerHTML = `@import url('${globalStyle.href}');`;\n      this.el.shadowRoot?.appendChild(styleClone);\n    }\n  }\n\n  componentWillLoad() {\n    this.applyGlobalStyles();\n  }\n\n  render() {\n    return (\n      <label class=\"checkbox-container\">\n        <input type=\"checkbox\" />\n        <span class=\"checkmark\"></span>\n        <slot></slot>\n      </label>\n    );\n  }\n}\n"]}
+{"version":3,"file":"xv-checkbox.js","sourceRoot":"","sources":["../../../src/components/xv-checkbox/xv-checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAgB,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AASrG,MAAM,OAAO,UAAU;IA4DrB;;QAtDA;;WAEG;QACqC,YAAO,GAAY,KAAK,CAAC;QACjE;;WAEG;QACsB,kBAAa,GAAY,KAAK,CAAC;QACxD;;WAEG;QACsB,aAAQ,GAAY,KAAK,CAAC;QAKnD;;WAEG;QACsB,UAAK,GAAW,IAAI,CAAC;QAC9C;;WAEG;QACsB,aAAQ,GAAY,KAAK,CAAC;QACnD;;WAEG;QACsB,YAAO,GAAY,KAAK,CAAC;QASzC,aAAQ,GAAY,KAAK,CAAC;QAmC3B,YAAO,GAAG,CAAC,CAAQ,EAAE,EAAE;YAC7B,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAC;YAC5C,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC;YAC9B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACrC,CAAC,CAAC;QAEM,aAAQ,GAAG,CAAC,CAAQ,EAAE,EAAE;YAC9B,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAC;YAC5C,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC;YAC9B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACtC,CAAC,CAAC;QAEM,YAAO,GAAG,GAAG,EAAE;YACrB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;YACrB,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;QACzB,CAAC,CAAC;QAEM,WAAM,GAAG,GAAG,EAAE;YACpB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;YACtB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;QACxB,CAAC,CAAC;QApCA,IAAI,CAAC,SAAS,GAAG,CAAA,MAAA,MAAC,IAAI,CAAC,EAAU,EAAC,eAAe,kDAAI,KAAI,EAAE,CAAC;KAC7D;IAED,iBAAiB;;QACf,IAAI,MAAA,IAAI,CAAC,SAAS,0CAAE,YAAY,EAAE,CAAC;YACjC,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;QAChE,CAAC;IACH,CAAC;IAGD,eAAe,CAAC,QAAiB;;QAC/B,IAAI,MAAA,IAAI,CAAC,SAAS,0CAAE,YAAY,EAAE,CAAC;YACjC,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;QAC5D,CAAC;IACH,CAAC;IAwBD,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,8DAAO,KAAK,EAAE,EAAE,aAAa,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE;gBAC5D,8DACE,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC,EAC9B,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,GACnB;gBACF,6DAAM,KAAK,EAAE,aAAa,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,EAAE,GAAI;gBACvE,4DAAK,KAAK,EAAC,OAAO;oBAChB,+DAAO,IAAI,CAAC,KAAK,CAAQ,CACrB,CACA;YACR,6DAAM,IAAI,EAAC,MAAM,GAAG;YACnB,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,6DAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,CACnD,CACR,CAAC;IACJ,CAAC;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;YACvB,IAAI,CAAC,OAAO,CAAC,aAAa,GAAG,IAAI,CAAC;QACpC,CAAC;IACH,CAAC;IAED,kBAAkB;QAChB,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,IAAI,CAAC,OAAO,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC;QAClD,CAAC;IACH,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;IACvB,CAAC;IAED,wBAAwB,CAAC,KAAa;QACpC,IAAI,CAAC,OAAO,GAAG,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC;IACtC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Element, Prop, State, Event, EventEmitter, Watch, Host } from '@stencil/core';\nimport { SIZE_VAR } from '../../types/enum';\n\n@Component({\n  tag: 'xv-checkbox-v2',\n  styleUrl: 'xv-checkbox.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class XvCheckbox {\n  private inputEl: HTMLInputElement;\n  private internals: ElementInternals;\n\n  @Element() el!: HTMLElement;\n\n  /**\n   * Default checked status\n   */\n  @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n  /**\n   * Using for forms\n   */\n  @Prop({ reflect: true }) indeterminate: boolean = false;\n  /**\n   * Disabled status\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n  /**\n   * Input name\n   */\n  @Prop({ reflect: true }) name: string;\n  /**\n   * Input value\n   */\n  @Prop({ reflect: true }) value: string = 'on';\n  /**\n   * The same like default checkbox prop\n   */\n  @Prop({ reflect: true }) required: boolean = false;\n  /**\n   * Change checkmark icon to minus\n   */\n  @Prop({ reflect: true }) partial: boolean = false;\n  /**\n   * Can be used like property or like slot\n   */\n  @Prop() label: string;\n\n  @Prop({ reflect: true }) size?: SIZE_VAR;\n  @Prop({ reflect: true }) error?: string | boolean;\n\n  @State() hasFocus: boolean = false;\n  /**\n   * event 'onEventChange'\n   */\n  @Event({ eventName: 'eventChange' }) changeEvent: EventEmitter<boolean>;\n  /**\n   * event 'onEventInput'\n   */\n  @Event({ eventName: 'eventInput' }) inputEvent: EventEmitter<boolean>;\n  /**\n   * event 'onEventFocus'\n   */\n  @Event({ eventName: 'eventFocus' }) focusEvent: EventEmitter<void>;\n  /**\n   * event 'onEventBlur'\n   */\n  @Event({ eventName: 'eventBlur' }) blurEvent: EventEmitter<void>;\n\n  constructor() {\n    this.internals = (this.el as any).attachInternals?.() || {};\n  }\n\n  connectedCallback() {\n    if (this.internals?.setFormValue) {\n      this.internals.setFormValue(this.checked ? this.value : null);\n    }\n  }\n\n  @Watch('checked')\n  onCheckedChange(newValue: boolean) {\n    if (this.internals?.setFormValue) {\n      this.internals.setFormValue(newValue ? this.value : null);\n    }\n  }\n\n  private onInput = (e: Event) => {\n    const target = e.target as HTMLInputElement;\n    this.checked = target.checked;\n    this.inputEvent.emit(this.checked);\n  };\n\n  private onChange = (e: Event) => {\n    const target = e.target as HTMLInputElement;\n    this.checked = target.checked;\n    this.changeEvent.emit(this.checked);\n  };\n\n  private onFocus = () => {\n    this.hasFocus = true;\n    this.focusEvent.emit();\n  };\n\n  private onBlur = () => {\n    this.hasFocus = false;\n    this.blurEvent.emit();\n  };\n\n  render() {\n    return (\n      <Host>\n        <label class={{ 'xv-checkbox': true, disabled: this.disabled }}>\n          <input\n            ref={el => (this.inputEl = el)}\n            type=\"checkbox\"\n            name={this.name}\n            value={this.value}\n            checked={this.checked}\n            disabled={this.disabled}\n            required={this.required}\n            indeterminate={this.indeterminate}\n            onInput={this.onInput}\n            onChange={this.onChange}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n          />\n          <span class={`checkmark ${this.partial ? 'checkmark-partial' : ''}`} />\n          <div class=\"label\">\n            <slot>{this.label}</slot>\n          </div>\n        </label>\n        <slot name=\"info\" />\n        {!!this.error && <span class=\"error\">{this.error}</span>}\n      </Host>\n    );\n  }\n\n  componentDidLoad() {\n    if (this.indeterminate) {\n      this.inputEl.indeterminate = true;\n    }\n  }\n\n  componentDidUpdate() {\n    if (this.inputEl) {\n      this.inputEl.indeterminate = this.indeterminate;\n    }\n  }\n\n  formResetCallback() {\n    this.checked = false;\n  }\n\n  formStateRestoreCallback(state: string) {\n    this.checked = state === this.value;\n  }\n}\n"]}

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

@@ -12,7 +12,7 @@ export class XvLink {
         e.stopPropagation();
     }
     render() {
-        return (h(Host, { key: 'da2418a05379b0510c46ede0992a67bdc4847238', class: `xv-link_${this.variant}` }, h("a", { key: '5632ecb0da02799b43fbdcfa522243502a6c2a7a', href: this.href, onClick: this.preventLinkHandler.bind(this), class: `xv-link ${this.disabled ? 'xv-link_disabled' : ''} ${this.size}`, target: this.target }, h("slot", { key: '15efb0b41fbc63459d83ec104a972b645541cc80', name: "icon-left" }), h("slot", { key: '47aab9fa38e9d637a2b6fd838e14805602343aea' }), h("slot", { key: 'a103c85ea4c15c83045b9e52d5dcf19fdff45076', name: "icon-right" }))));
+        return (h(Host, { key: 'd67fa14d10c47ab7c0e3b006f51b1d376f290715', class: `xv-link_${this.variant}` }, h("a", { key: 'abb46cc5fd9f43fa52b0e24b7126fd0cb0d521ca', href: this.href, onClick: this.preventLinkHandler.bind(this), class: `xv-link ${this.disabled ? 'xv-link_disabled' : ''} ${this.size}`, target: this.target }, h("slot", { key: '55ef3b6ede0521719257218092b58b43dedb3e6e', name: "icon-left" }), h("slot", { key: 'bb62dd7d472415956493c97db3df8a61dbd0dbf6' }), h("slot", { key: '61f350ff076285dc83c630c4bb7dc5b19526b7c3', name: "icon-right" }))));
     }
     static get is() { return "xv-link-v2"; }
     static get encapsulation() { return "shadow"; }

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

@@ -21,7 +21,7 @@ export class XvProgressIndicator {
         this.updateChildItems();
     }
     render() {
-        return (h(Host, { key: '009b89bf21bd093b84040e6ede3be78d5c402f53', class: "xv-progress-indicator" }, h("slot", { key: '8ca75f700170c5aeb2da17133080fcde7e667947' })));
+        return (h(Host, { key: '11ddf0d4e355c52e007b1b0705cb5129edf0acad', class: "xv-progress-indicator" }, h("slot", { key: 'c90e8f5d63fd15d8d70c8f0e4ff221dc723d5654' })));
     }
     static get is() { return "xv-progress-indicator-v2"; }
     static get encapsulation() { return "shadow"; }

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

@@ -4,7 +4,7 @@ export class XvProgressIndicatorItem {
         this.done = false;
     }
     render() {
-        return (h(Host, { key: 'e18a645a83758b1e6d1c1fe32e3aab8e75ff3e7b', class: `xv-progress-indicator-item ${this.done ? 'done' : ''}` }, h("span", { key: '000bfef67379218d2af3c3393432dbfc46c20707', class: "line" }), h("span", { key: 'c1056a34648ab5b55ddb56faa30f5be8ecae83cf', class: "icon" }, h("svg", { key: 'ce1d729b7464f044808577460714d279374a7e9f', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", width: 14, height: 14 }, h("path", { key: 'c67e17743357ccd75295b3d1f354e6f8096dbde8', 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: '593c6a4c187148315cade226fc7f272462445a0e', class: "label" }, h("slot", { key: 'c3ed988d5cc8722e5bd5200646bd5c824921dd27' }))));
+        return (h(Host, { key: '601c2068aec197e02e89ca0ba1500abf1c293c7f', class: `xv-progress-indicator-item ${this.done ? 'done' : ''}` }, h("span", { key: 'e32b4d65713a001d4dffbc10335e1ea7e3f36e94', class: "line" }), h("span", { key: 'a0a87861fc4608287dff58a92ad2fd4b5447dc72', class: "icon" }, h("svg", { key: 'b14951a70651ae94e4b4e54f191b7733f45290e0', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", width: 14, height: 14 }, h("path", { key: 'c251fc0b0a4bf4f341ed8bbd36f7e03454d1d80d', 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: 'cd0e21308a5884517fecc6d40a88b20463241228', class: "label" }, h("slot", { key: '3d5ca8fd5742a83f5aa2fc480b0efeb3ceb46bc0' }))));
     }
     static get is() { return "xv-progress-indicator-v2-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,14 @@
+export var TABLE_COLOR_SCHEMA;
+(function (TABLE_COLOR_SCHEMA) {
+    TABLE_COLOR_SCHEMA["DEF"] = "";
+    TABLE_COLOR_SCHEMA["ZEBRA"] = "zebra";
+})(TABLE_COLOR_SCHEMA || (TABLE_COLOR_SCHEMA = {}));
+export var TABLE_SIZE;
+(function (TABLE_SIZE) {
+    TABLE_SIZE["EXTRA_SMALL"] = "xs";
+    TABLE_SIZE["SMALL"] = "sm";
+    TABLE_SIZE["MEDIUM"] = "md";
+    TABLE_SIZE["LARGE"] = "lg";
+    TABLE_SIZE["EXTRA_LARGE"] = "xl";
+})(TABLE_SIZE || (TABLE_SIZE = {}));
+//# sourceMappingURL=defs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"defs.js","sourceRoot":"","sources":["../../../src/components/xv-table/defs.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,kBAGX;AAHD,WAAY,kBAAkB;IAC5B,8BAAQ,CAAA;IACR,qCAAe,CAAA;AACjB,CAAC,EAHW,kBAAkB,KAAlB,kBAAkB,QAG7B;AAED,MAAM,CAAN,IAAY,UAMX;AAND,WAAY,UAAU;IACpB,gCAAkB,CAAA;IAClB,0BAAY,CAAA;IACZ,2BAAa,CAAA;IACb,0BAAY,CAAA;IACZ,gCAAkB,CAAA;AACpB,CAAC,EANW,UAAU,KAAV,UAAU,QAMrB","sourcesContent":["export enum TABLE_COLOR_SCHEMA {\n  DEF = '',\n  ZEBRA = 'zebra',\n}\n\nexport enum TABLE_SIZE {\n  EXTRA_SMALL = 'xs',\n  SMALL = 'sm',\n  MEDIUM = 'md',\n  LARGE = 'lg',\n  EXTRA_LARGE = 'xl',\n}\n\nexport type TableSelectionEvent = CustomEvent<{\n  name: string;\n  checked: boolean;\n  value?: string;\n}>;\n"]}

package/dist/collection/components/xv-table/xv-table-col/xv-table-col.css

@@ -0,0 +1,8 @@
+:host {
+  display: block;
+  color: var(--text-primary, #333);
+  font-family: var(--ff-body, Tahoma);
+  font-size: 14px;
+  line-height: 128.571%;
+  letter-spacing: 0.16px;
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"xv-table-col.js","sourceRoot":"","sources":["../../../../src/components/xv-table/xv-table-col/xv-table-col.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,UAAU;IACrB,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-table-v2-col',\n  styleUrl: 'xv-table-col.scss',\n  shadow: true,\n})\nexport class XvTableCol {\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/xv-table/xv-table-header-row/xv-table-header-row.css

@@ -0,0 +1,21 @@
+:host {
+  display: grid;
+  padding: 16px 16px 32px;
+  align-items: center;
+  transition: height 0.15s cubic-bezier(0.2, 0, 0.38, 0.9), padding 0.15s ease-in-out, background-color 0.2ms ease-in-out;
+  background: var(--layer-accent-01, #F7F7F7);
+  color: var(--text-primary, #333);
+  font-family: var(--ff-body, Tahoma);
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 128.571%;
+  letter-spacing: 0.16px;
+}
+:host .left-container {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 16px;
+  padding: 0 16px;
+}

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

@@ -0,0 +1,122 @@
+import { Host, h } from "@stencil/core";
+export class XvTableHeaderRow {
+    constructor() {
+        /**
+         * Checkbox row checked
+         */
+        this.checked = false;
+        this.cols = 1;
+        this.slotChangeHandle = () => {
+            this.cols = this.el.childElementCount;
+        };
+        this.checkboxChange = (e) => {
+            this.checked = e.detail;
+            this.checkedChange.emit({
+                name: this.selectionName,
+                checked: e.detail
+            });
+        };
+    }
+    render() {
+        return (h(Host, { key: '461bc3ab19dc1e01edf70f94b29cf20092a85607', cols: this.cols }, h("div", { key: '960f48a7fb5e9c23922f7dfff28877d420f3385a', class: "left-container" }, this.selectionName !== undefined && (h("xv-checkbox-v2", { key: '68308b0c6c9f45e848bca985b0382479032fbcb5', partial: true, name: this.selectionName, checked: this.checked, onEventChange: this.checkboxChange }))), h("slot", { key: '3a25f9011769f4fce43b6091de08995c5635381c', onSlotchange: this.slotChangeHandle })));
+    }
+    static get is() { return "xv-table-v2-header-row"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xv-table-header-row.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xv-table-header-row.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "selectionName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Checkbox row name"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "selection-name",
+                "reflect": true
+            },
+            "partial": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Checkbox row selected partially"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "partial",
+                "reflect": true
+            },
+            "checked": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Checkbox row checked"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "checked",
+                "reflect": true,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "cols": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "checkedChange",
+                "name": "checkedChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ name: string, value?: string; checked: boolean }",
+                    "resolved": "{ name: string; value?: string; checked: boolean; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=xv-table-header-row.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"xv-table-header-row.js","sourceRoot":"","sources":["../../../../src/components/xv-table/xv-table-header-row/xv-table-header-row.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAO9F,MAAM,OAAO,gBAAgB;IAL7B;QAeE;;WAEG;QACqC,YAAO,GAAa,KAAK,CAAC;QAEzD,SAAI,GAAW,CAAC,CAAC;QAIlB,qBAAgB,GAAG,GAAG,EAAE;YAC9B,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,iBAAiB,CAAC;QACxC,CAAC,CAAA;QAEO,mBAAc,GAAG,CAAC,CAAuB,EAAE,EAAE;YACnD,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,MAAM,CAAC;YACxB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;gBACtB,IAAI,EAAE,IAAI,CAAC,aAAa;gBACxB,OAAO,EAAE,CAAC,CAAC,MAAM;aAClB,CAAC,CAAC;QACL,CAAC,CAAA;KAmBF;IAjBC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAE,IAAI,CAAC,IAAI;YACnB,4DAAK,KAAK,EAAC,gBAAgB,IACxB,IAAI,CAAC,aAAa,KAAK,SAAS,IAAI,CACnC,uEACE,OAAO,EAAE,IAAI,EACb,IAAI,EAAE,IAAI,CAAC,aAAa,EACxB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,aAAa,EAAE,IAAI,CAAC,cAAc,GAClC,CACH,CACG;YACN,6DAAM,YAAY,EAAE,IAAI,CAAC,gBAAgB,GAAS,CAC7C,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Element, Prop, State, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'xv-table-v2-header-row',\n  styleUrl: 'xv-table-header-row.scss',\n  shadow: true,\n})\nexport class XvTableHeaderRow {\n  @Element() el: HTMLElement;\n  /**\n   * Checkbox row name\n   */\n  @Prop({ reflect: true, attribute: 'selection-name' }) selectionName?: string;\n  /**\n   * Checkbox row selected partially\n   */\n  @Prop({ reflect: true }) partial?: boolean;\n  /**\n   * Checkbox row checked\n   */\n  @Prop({ reflect: true, mutable: true }) checked?: boolean = false;\n\n  @State() cols: number = 1;\n\n  @Event() checkedChange: EventEmitter<{ name: string, value?: string; checked: boolean }>;\n\n  private slotChangeHandle = () => {\n    this.cols = this.el.childElementCount;\n  }\n\n  private checkboxChange = (e: CustomEvent<boolean>) => {\n    this.checked = e.detail;\n    this.checkedChange.emit({\n      name: this.selectionName,\n      checked: e.detail\n    });\n  }\n\n  render() {\n    return (\n      <Host cols={this.cols}>\n        <div class=\"left-container\">\n          {this.selectionName !== undefined && (\n            <xv-checkbox-v2\n              partial={true}\n              name={this.selectionName}\n              checked={this.checked}\n              onEventChange={this.checkboxChange}\n            />\n          )}\n        </div>\n        <slot onSlotchange={this.slotChangeHandle}></slot>\n      </Host>\n    );\n  }\n}\n"]}