xv-webcomponents 0.1.39 → 0.1.42

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

@@ -1,28 +1,62 @@
-import { h } from "@stencil/core";
+import { h, Host } from "@stencil/core";
+import { SIZE_VAR } from "../../types/enum";
 export class XvButton {
     constructor() {
-        /** Button label */
-        this.label = '';
-        /** Container width Button */
+        /** 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';
-        /** Variant */
-        this.variant = 'primary';
-        /** Disabled state */
-        this.disabled = false;
-        /** Handle click only if not disabled */
-        this.handleClick = (e) => {
-            if (this.disabled)
-                return;
-            this.buttonClick.emit(e);
+        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() {
-        return (h("button", { key: '4a9a7d9eb8f0b9fb264c03e804fa157d14a15805', type: this.type, part: "button", class: `xv-button ${this.variant} ${this.block ? 'xv-button-block' : ''}`, disabled: this.disabled, onClick: this.handleClick }, h("slot", { key: 'd9102ce481222999d9f1a35b4782b550e1a3179c', name: "icon-left" }), h("slot", { key: '5960e30d35b9d403da9da635414cd4db95f165d6' }, this.label), h("slot", { key: 'aae667909ef6932eaa31a8a6b89165960d0cf8a3', name: "icon-right" })));
+        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"]
@@ -45,79 +79,84 @@ export class XvButton {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Button label"
+                    "text": "Button label is optional you can use just inside content"
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
-                "defaultValue": "''"
+                "reflect": true
             },
-            "block": {
-                "type": "boolean",
-                "attribute": "block",
+            "variant": {
+                "type": "string",
+                "attribute": "variant",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "'primary' | 'secondary' | 'ghost' | 'danger' | 'tertiary'",
+                    "resolved": "\"danger\" | \"ghost\" | \"primary\" | \"secondary\" | \"tertiary\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Container width Button"
+                    "text": "Button variants"
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
-                "defaultValue": "false"
+                "reflect": true,
+                "defaultValue": "'primary'"
             },
-            "type": {
+            "size": {
                 "type": "string",
-                "attribute": "type",
+                "attribute": "size",
                 "mutable": false,
                 "complexType": {
-                    "original": "'button' | 'reset' | 'submit'",
-                    "resolved": "\"button\" | \"reset\" | \"submit\"",
-                    "references": {}
+                    "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 type"
+                    "text": "Button size"
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
-                "defaultValue": "'button'"
+                "reflect": true,
+                "defaultValue": "SIZE_VAR.MD"
             },
-            "variant": {
-                "type": "string",
-                "attribute": "variant",
+            "disabled": {
+                "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
-                    "original": "'accent' | 'primary' | 'secondary' | 'tertiary' | 'ghost'",
-                    "resolved": "\"accent\" | \"ghost\" | \"primary\" | \"secondary\" | \"tertiary\"",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Variant"
+                    "text": "Button disabled state"
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
-                "defaultValue": "'primary'"
+                "reflect": true,
+                "defaultValue": "false"
             },
-            "disabled": {
+            "loading": {
                 "type": "boolean",
-                "attribute": "disabled",
+                "attribute": "loading",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -128,37 +167,63 @@ export class XvButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Disabled state"
+                    "text": "Button loading state"
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "false"
-            }
-        };
-    }
-    static get events() {
-        return [{
-                "method": "buttonClick",
-                "name": "buttonClick",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
+            },
+            "block": {
+                "type": "boolean",
+                "attribute": "block",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Emits when the button is clicked"
+                    "text": "Button for full width"
                 },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "type": {
+                "type": "string",
+                "attribute": "type",
+                "mutable": false,
                 "complexType": {
-                    "original": "MouseEvent",
-                    "resolved": "MouseEvent",
-                    "references": {
-                        "MouseEvent": {
-                            "location": "global",
-                            "id": "global::MouseEvent"
-                        }
-                    }
-                }
-            }];
+                    "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

@@ -1 +1 @@
-{"version":3,"file":"xv-button.js","sourceRoot":"","sources":["../../../src/components/xv-button/xv-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAgB,CAAC,EAAE,MAAM,eAAe,CAAC;AAQxE,MAAM,OAAO,QAAQ;IALrB;QAME,mBAAmB;QACX,UAAK,GAAW,EAAE,CAAC;QAE3B,6BAA6B;QACrB,UAAK,GAAY,KAAK,CAAC;QAE/B,kBAAkB;QACV,SAAI,GAAkC,QAAQ,CAAC;QAEvD,cAAc;QACN,YAAO,GAA8D,SAAS,CAAC;QAEvF,qBAAqB;QACb,aAAQ,GAAY,KAAK,CAAC;QAKlC,wCAAwC;QAChC,gBAAW,GAAG,CAAC,CAAa,EAAE,EAAE;YACtC,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAC1B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;QAC3B,CAAC,CAAC;KAqBH;IAnBC,MAAM;QACJ,OAAO,CACL,+DACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,aAAa,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,EAAE,EACzE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,WAAW;YAEzB,6DAAM,IAAI,EAAC,WAAW,GAAQ;YAE9B,+DACG,IAAI,CAAC,KAAK,CACN;YAEP,6DAAM,IAAI,EAAC,YAAY,GAAQ,CACxB,CACV,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\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})\r\nexport class XvButton {\r\n  /** Button label */\r\n  @Prop() label: string = '';\r\n\r\n  /** Container width Button */\r\n  @Prop() block: boolean = false;\r\n\r\n  /** Button type */\r\n  @Prop() type: 'button' | 'reset' | 'submit' = 'button';\r\n\r\n  /** Variant */\r\n  @Prop() variant: 'accent' | 'primary' | 'secondary' | 'tertiary' | 'ghost' = 'primary';\r\n\r\n  /** Disabled state */\r\n  @Prop() disabled: boolean = false;\r\n\r\n  /** Emits when the button is clicked */\r\n  @Event() buttonClick!: EventEmitter<MouseEvent>;\r\n\r\n  /** Handle click only if not disabled */\r\n  private handleClick = (e: MouseEvent) => {\r\n    if (this.disabled) return;\r\n    this.buttonClick.emit(e);\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <button\r\n        type={this.type}\r\n        part=\"button\"\r\n        class={`xv-button ${this.variant} ${this.block ? 'xv-button-block' : ''}`}\r\n        disabled={this.disabled}\r\n        onClick={this.handleClick}\r\n      >\r\n        <slot name=\"icon-left\"></slot>\r\n\r\n        <slot>\r\n          {this.label}\r\n        </slot>\r\n\r\n        <slot name=\"icon-right\"></slot>\r\n      </button>\r\n    );\r\n  }\r\n}\r\n"]}
+{"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"]}

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

@@ -4,7 +4,7 @@ export class XvCard {
         this.variant = 'vertical';
     }
     render() {
-        return (h(Host, { key: '347b7aed9ce24e2e048bb4e6d0b07b23f0f60d5b', class: `xv-card xv-card_${this.variant}`, part: this.variant }, h("div", { key: '9cd9f38cfe7d93fc271907fc8435033df860c246', class: "xv-card_media" }, h("slot", { key: '35e2bae3084a0e7d26e13c0e3116daa9895ea6c1', name: "media" }, this.media && h("img", { key: '60d4305b136766e447653cb399f92ae70e3d9430', class: "xv-card_media__content", src: this.media, alt: this.header }))), h("div", { key: '3751defc0abf18997dca82ae5b5d6601c6e9f60b', class: "xv-card_content" }, h("div", { key: 'cca74475b9e5dba03c82f77851fb503a5323ce3c', class: "xv-card_header" }, h("slot", { key: '02c4e3ddfb73bd56ef8f5b44a22bfe710654171a', name: "header" }, this.header && h("p", { key: '56998aa4742cc7576a023fcbe3e0892f312805ee', class: "xv-card_header__content" }, this.header))), h("div", { key: '86da97df293ff58dbcfe0a2b7bc25c98053ac6a2', class: "xv-card_body" }, h("slot", { key: 'ff8d6dc3ef8e437d28f237c415bf43382df85f19', name: "body" }, this.body && h("p", { key: '7e8e351ac0fa2100fc7929e81cc380a4a32e7019', class: "xv-card_body__content" }, this.header))), h("div", { key: 'dc9824b523f2dbdb4f88dc05ac0e490f9b04f529', class: "xv-card_footer" }, h("slot", { key: 'ea4fbffc436ee2ef43f481be7656aad07dfc55ce', name: "footer" }, this.footer)))));
+        return (h(Host, { key: '7c19e1d91f9040c116dc18d6f58be859e66b0629', class: `xv-card xv-card_${this.variant}`, part: this.variant }, h("div", { key: '8ef942983bc31d278810372bfed3fe4cb8f1922a', class: "xv-card_media" }, h("slot", { key: '86bc68bcb80c563a91448c15ab1ebd89c1e5b245', name: "media" }, this.media && h("img", { key: 'c4351a7426b5b73ed37f038f1f355dcf46dae597', class: "xv-card_media__content", src: this.media, alt: this.header }))), h("div", { key: '906393c52bb7c27bfbc9527dfba34f712ec8a420', class: "xv-card_content" }, h("div", { key: 'd703353d99066a4f395f126f0ec8aa462c7a5c7b', class: "xv-card_header" }, h("slot", { key: '4fb9c65d701629dce6f99c8ad871adbd7659ecdd', name: "header" }, this.header && h("p", { key: 'e4a3f971b5dca8cdf3e44c9ba2a37baeff67fd59', class: "xv-card_header__content" }, this.header))), h("div", { key: '7029219d670fe9a94e5c50f657f5f2f2d45a2edb', class: "xv-card_body" }, h("slot", { key: '0f570bb3938b6c44e8cc3fb004ed1d7c487fb5a7', name: "body" }, this.body && h("p", { key: '02fc0abdc52c3a0bf833c0bfe24ec573f1457f21', class: "xv-card_body__content" }, this.header))), h("div", { key: '9734dca4512ace0e29e332acce27bf01c8a05e24', class: "xv-card_footer" }, h("slot", { key: '3cf0141845baf68e0149b823b921705978953ade', name: "footer" }, this.footer)))));
     }
     static get is() { return "xv-card-v2"; }
     static get encapsulation() { return "shadow"; }

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

@@ -3,6 +3,7 @@
   box-sizing: border-box;
   display: inline-flex;
   flex-direction: column;
+  overflow: visible !important;
 }
 
 :host([error]) .xv-checkbox .checkmark {
@@ -77,6 +78,7 @@
 }
 .xv-checkbox input:checked + .checkmark:not(.checkmark-partial)::after {
   content: "";
+  position: absolute;
   width: calc(var(--checkbox-size) / 4);
   height: calc(var(--checkbox-size) / 2.5);
   border: solid var(--background, #FFF);
@@ -87,6 +89,7 @@
 }
 .xv-checkbox input:checked + .checkmark.checkmark-partial::after {
   content: "";
+  position: absolute;
   width: calc(var(--checkbox-size) / 3);
   height: calc(var(--checkbox-size) / 10);
   background-color: var(--background, #FFF);

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

@@ -66,7 +66,7 @@ export class XvCheckbox {
         }
     }
     render() {
-        return (h(Host, { key: 'bcaedf1b88ff4b64cec1ca477a214dc8987c6ed0' }, h("label", { key: '85770d8c9326340f63e024893c5fd28bc79f85a7', class: { 'xv-checkbox': true, disabled: this.disabled, readonly: this.readonly } }, h("input", { key: '156869a713eed4506123e267dc8e4b0ed74e73bb', ref: el => (this.inputEl = el), type: "checkbox", readonly: this.readonly, name: this.name, value: this.value, checked: this.checked, disabled: this.disabled || this.readonly, required: this.required, indeterminate: this.indeterminate, onInput: this.onInput, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur }), h("span", { key: '1b2a979ae6d31e48e03ab41a054236cd5dbaab26', class: `checkmark ${this.partial ? 'checkmark-partial' : ''}` }), h("div", { key: '5bb240548e68a3e44fd665a917ccc75d2bd423b1', class: "label" }, h("slot", { key: '7ac3876f675592624c2fd252d8dc9941ad823de9' }, this.label && h("span", { key: '263f592cf8f71cfbb6d4a53180b67e71260f36da', class: "label_str" }, this.label)))), h("slot", { key: 'aaf1a57125f9561f0902e943991ba8c91b763534', name: "info" }), !!this.error && h("span", { key: 'a7e94090ad70cf9929b6112965ff6da3965de627', class: "error" }, this.error)));
+        return (h(Host, { key: '9eb988ec6a7a02392b4ed77685eed2bc5814c137' }, h("label", { key: '3e4c7112c959897c5b61cbcff890eaf437e476fc', class: { 'xv-checkbox': true, disabled: this.disabled, readonly: this.readonly } }, h("input", { key: '3a2e68b5780ae3951f86d30f9b2e8d9af1805e97', ref: el => (this.inputEl = el), type: "checkbox", readonly: this.readonly, name: this.name, value: this.value, checked: this.checked, disabled: this.disabled || this.readonly, required: this.required, indeterminate: this.indeterminate, onInput: this.onInput, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur }), h("span", { key: 'b57f073a258a1ea15d04969a68eab7c36023e596', class: `checkmark ${this.partial ? 'checkmark-partial' : ''}` }), h("div", { key: '1abe0c133bf203b228b86bd68053856b79cdf170', class: "label" }, h("slot", { key: '155a80701f1a050a73a0079308de0b932407549e' }, this.label && h("span", { key: 'f9d493bfb663fcf91712b754b4c1b841d10beb05', class: "label_str" }, this.label)))), h("slot", { key: 'fae7055dc73235126a633a705b6e8f045a20954c', name: "info" }), !!this.error && h("span", { key: '5c3bb7d31289862bf421614ee9906671e65c1b7c', class: "error" }, this.error)));
     }
     componentDidLoad() {
         if (this.indeterminate) {

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

@@ -0,0 +1,3 @@
+export const XV_DATA_TABLE_TAG = 'xv-data-table';
+export const XV_DATA_TABLE_ROW_TAG = 'xv-data-table-row';
+//# sourceMappingURL=_vars.js.map

package/dist/collection/components/xv-data-table/_vars.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"_vars.js","sourceRoot":"","sources":["../../../src/components/xv-data-table/_vars.ts"],"names":[],"mappings":"AAWA,MAAM,CAAC,MAAM,iBAAiB,GAAG,eAAe,CAAC;AACjD,MAAM,CAAC,MAAM,qBAAqB,GAAG,mBAAmB,CAAC","sourcesContent":["\nexport interface XvDataTableCheck {\n  name: string;\n  checked: boolean;\n  value?: string | number | object;\n  partial?: boolean;\n  header?: boolean;\n  footer?: boolean;\n  expandable?: boolean;\n}\n\nexport const XV_DATA_TABLE_TAG = 'xv-data-table';\nexport const XV_DATA_TABLE_ROW_TAG = 'xv-data-table-row';\n"]}

package/dist/collection/components/xv-data-table/xv-data-table-cell/xv-data-table-cell.css

@@ -0,0 +1,90 @@
+@charset "UTF-8";
+:host {
+  display: table-cell;
+  border-style: solid;
+  border-left-width: 0;
+  border-right-width: 0;
+  border-top-width: var(--xv-data-table-border-width, 0);
+  border-bottom-width: var(--xv-data-table-border-width, 0);
+  border-color: var(--xv-data-table-border-color, transparent);
+  padding-inline: var(--xv-data-table-padding-x, 0);
+  padding-block: var(--xv-data-table-padding-y, 0);
+  vertical-align: middle;
+  word-break: break-all;
+  font-style: normal;
+  font-weight: 400;
+}
+:host .line-clamp {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+:host(:not(.multiline)) {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+:host(:not(.multiline)) ::slotted(*) {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+:host([sort]) {
+  position: relative;
+  cursor: pointer;
+  user-select: none;
+}
+:host([sort]):before, :host([sort]):after {
+  font-size: 12px;
+  line-height: 10px;
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  right: 8px;
+  pointer-events: none;
+  transition: 350ms ease-in-out opacity;
+  opacity: 0;
+}
+:host([sort]):before {
+  content: "▲";
+  top: 50%;
+  transform: translateY(calc(-50% - 5px));
+}
+:host([sort])::after {
+  content: "▼";
+  top: 50%;
+  transform: translateY(calc(-50% + 5px));
+}
+
+:host([sort]:hover) {
+  background-color: var(--layer-accent-hover-01, #E3E3E3);
+}
+:host([sort]:hover)::before, :host([sort]:hover)::after {
+  opacity: 1;
+}
+
+:host([sort=asc]) {
+  background-color: var(--layer-accent-active-01, #D1D1D1);
+}
+:host([sort=asc])::before {
+  opacity: 1;
+}
+:host([sort=asc])::after {
+  display: none;
+}
+
+:host([sort=desc]) {
+  background-color: var(--layer-accent-active-01, #D1D1D1);
+}
+:host([sort=desc])::before {
+  display: none;
+}
+:host([sort=desc])::after {
+  opacity: 1;
+}

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

@@ -0,0 +1,182 @@
+import { h, Host } from "@stencil/core";
+import { forEach, uidGenerator } from "../../../utils/utils";
+import { XV_SORT_DIR } from "../../../types/enum";
+export class XvDataTableCell {
+    handleSort() {
+        if (this.sort === undefined)
+            return;
+        let sort = this.sort;
+        if (this.sort === '')
+            sort = XV_SORT_DIR.NONE;
+        this.sort = sort === XV_SORT_DIR.NONE ?
+            XV_SORT_DIR.ASC : sort === XV_SORT_DIR.ASC ?
+            XV_SORT_DIR.DESC : XV_SORT_DIR.NONE;
+        forEach(this.el.parentElement.children, (cell) => {
+            if (cell !== this.el && cell.hasAttribute('sort')) {
+                cell.setAttribute('sort', 'none');
+            }
+        });
+        if (!this.name)
+            this.name = uidGenerator();
+        this.sortChange.emit(this.sort);
+    }
+    ;
+    render() {
+        return (h(Host, { key: 'bfc254739fa56d47210d43d134ba6c3534c5e567', role: "cell", style: { width: this.width }, class: {
+                multiline: this.multiline !== undefined,
+                [`align--${this.align}`]: !!this.align
+            } }, !this.multiline || isNaN(this.multiline) ? h("slot", null) : (h("div", { class: "line-clamp", style: { ['-webkit-line-clamp']: `${this.multiline}` } }, h("slot", null)))));
+    }
+    static get is() { return "xv-data-table-cell"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xv-data-table-cell.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xv-data-table-cell.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "attribute": "name",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "sort": {
+                "type": "string",
+                "attribute": "sort",
+                "mutable": true,
+                "complexType": {
+                    "original": "XV_SORT_DIR | ''",
+                    "resolved": "\"\" | XV_SORT_DIR.ASC | XV_SORT_DIR.DESC | XV_SORT_DIR.NONE",
+                    "references": {
+                        "XV_SORT_DIR": {
+                            "location": "import",
+                            "path": "../../../types/enum",
+                            "id": "src/types/enum.ts::XV_SORT_DIR"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "multiline": {
+                "type": "number",
+                "attribute": "multiline",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "width": {
+                "type": "string",
+                "attribute": "width",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "align": {
+                "type": "string",
+                "attribute": "align",
+                "mutable": false,
+                "complexType": {
+                    "original": "'left' | 'right' | 'center'",
+                    "resolved": "\"center\" | \"left\" | \"right\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "sortChange",
+                "name": "sortChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "XV_SORT_DIR",
+                    "resolved": "XV_SORT_DIR.ASC | XV_SORT_DIR.DESC | XV_SORT_DIR.NONE",
+                    "references": {
+                        "XV_SORT_DIR": {
+                            "location": "import",
+                            "path": "../../../types/enum",
+                            "id": "src/types/enum.ts::XV_SORT_DIR"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleSort",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=xv-data-table-cell.js.map