xv-webcomponents 0.1.43 → 0.1.46

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

@@ -0,0 +1,133 @@
+import { h, Host } from "@stencil/core";
+import { SIZE_VAR } from "../../types/enum";
+export class XvDataTable {
+    constructor() {
+        this.size = SIZE_VAR.MD;
+        this.columnWidths = [];
+        this.hover = false;
+    }
+    render() {
+        return (h(Host, { key: '1a8dba81544ccb3a0881cd2d1573ee4000269d12', class: "xv-data-table" }, h("caption", { key: 'bc5c9defcb9541c7b95cbf4f1a3dbed563ff34aa' }, h("slot", { key: '5deafd8370e965164f4cc242e12e9a14120ec07b', name: "title" })), h("div", { key: '8665b876dcad814e4f758968fc5cc69726c12d74', class: "bar" }, h("div", { key: 'dce555dbfaac502afd04b253e431001beeb9e78e', class: "bar_batch" }, h("slot", { key: '48c79bee9b1e02eaff0e5ec12a5e49a1eea40f84', name: "batch" })), h("div", { key: 'a6b242b9c095221be3e8a93bdd1d911a3683c08d', class: "bar_toolbar" }, h("slot", { key: 'e651e2dc0886251743d2d2de68ad6233420405e5', name: "toolbar" }))), h("table", { key: '411a552a506abf324be71e1ab1e59c7fdcfb5373', role: "table" }, this.columnWidths.length > 0 && (h("colgroup", { key: 'dccdffbda2c37ad60ad066c9fc04a3cf5321ced1' }, this.columnWidths.map((width = 'auto') => h("col", { style: { width } })))), h("thead", { key: '365e8597c85c9c2482041093caa097cef826f0e6' }, h("slot", { key: '5c5efeba7f80a428c24608d6420d0a7705453db4', name: "header" })), h("tbody", { key: '3125e64b5488d9210d671d76223bfc715eae376c' }, h("slot", { key: '926c9406e2fd63e64a5872eb33cbcb9c59af9613' })), h("tfoot", { key: 'a62e2c69d7bf4cfbea88ee3bdae99050eb77c42a' }, h("slot", { key: '9d0a2dedadc5082f5f3aae6a658e755cc34e69b0', name: "footer" }))), !!this.loading && (h("div", { key: '59780110176efb21d4cff6f820826a62ea59404c', class: "loading" }, h("xv-loader-v2", { key: 'e4fe3baec8de82403e3b109f6fe02899388e296a', size: SIZE_VAR.LG })))));
+    }
+    static get is() { return "xv-data-table"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xv-data-table.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xv-data-table.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "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": false,
+                "defaultValue": "SIZE_VAR.MD"
+            },
+            "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
+            },
+            "loading": {
+                "type": "boolean",
+                "attribute": "loading",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "columnWidths": {
+                "type": "unknown",
+                "attribute": "column-widths",
+                "mutable": false,
+                "complexType": {
+                    "original": "(string | null)[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "hover": {
+                "type": "boolean",
+                "attribute": "hover",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=xv-data-table.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"xv-data-table.js","sourceRoot":"","sources":["../../../src/components/xv-data-table/xv-data-table.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAClE,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAO5C,MAAM,OAAO,WAAW;IALxB;QAOU,SAAI,GAAa,QAAQ,CAAC,EAAE,CAAC;QAG7B,iBAAY,GAAsB,EAAE,CAAC;QACrC,UAAK,GAAY,KAAK,CAAC;KAmChC;IAjCC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAC,eAAe;YACzB;gBACE,6DAAM,IAAI,EAAC,OAAO,GAAG,CACb;YACV,4DAAK,KAAK,EAAC,KAAK;gBACd,4DAAK,KAAK,EAAC,WAAW;oBACpB,6DAAM,IAAI,EAAC,OAAO,GAAG,CACjB;gBACN,4DAAK,KAAK,EAAC,aAAa;oBACtB,6DAAM,IAAI,EAAC,SAAS,GAAG,CACnB,CACF;YACN,8DAAO,IAAI,EAAC,OAAO;gBAChB,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,IAAI,CAC/B,mEACG,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,KAAK,GAAG,MAAM,EAAE,EAAE,CAAC,WAAK,KAAK,EAAE,EAAE,KAAK,EAAE,GAAI,CAAC,CAC5D,CACZ;gBACD;oBAAO,6DAAM,IAAI,EAAC,QAAQ,GAAG,CAAQ;gBACrC;oBAAO,8DAAQ,CAAQ;gBACvB;oBAAO,6DAAM,IAAI,EAAC,QAAQ,GAAG,CAAQ,CAC/B;YAEP,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,CACjB,4DAAK,KAAK,EAAC,SAAS;gBAClB,qEAAc,IAAI,EAAE,QAAQ,CAAC,EAAE,GAAI,CAC/B,CACP,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop, Element } from '@stencil/core';\nimport { SIZE_VAR } from '../../types/enum';\n\n@Component({\n  tag: 'xv-data-table',\n  styleUrl: 'xv-data-table.scss',\n  shadow: true,\n})\nexport class XvDataTable {\n  @Element() el: HTMLElement;\n  @Prop() size: SIZE_VAR = SIZE_VAR.MD;\n  @Prop() block?: boolean;\n  @Prop() loading?: boolean;\n  @Prop() columnWidths: (string | null)[] = [];\n  @Prop() hover: boolean = false;\n\n  render() {\n    return (\n      <Host class=\"xv-data-table\">\n        <caption>\n          <slot name=\"title\" />\n        </caption>\n        <div class=\"bar\">\n          <div class=\"bar_batch\">\n            <slot name=\"batch\" />\n          </div>\n          <div class=\"bar_toolbar\">\n            <slot name=\"toolbar\" />\n          </div>\n        </div>\n        <table role=\"table\">\n          {this.columnWidths.length > 0 && (\n            <colgroup>\n              {this.columnWidths.map((width = 'auto') => <col style={{ width }} />)}\n            </colgroup>\n          )}\n          <thead><slot name=\"header\" /></thead>\n          <tbody><slot /></tbody>\n          <tfoot><slot name=\"footer\" /></tfoot>\n        </table>\n\n        {!!this.loading && (\n          <div class=\"loading\">\n            <xv-loader-v2 size={SIZE_VAR.LG} />\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/xv-dropdown/_vars.js

@@ -0,0 +1,2 @@
+export const DropdownItemSelector = '.xv-dropdown-item';
+//# sourceMappingURL=_vars.js.map

package/dist/collection/components/xv-dropdown/_vars.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"_vars.js","sourceRoot":"","sources":["../../../src/components/xv-dropdown/_vars.ts"],"names":[],"mappings":"AAMA,MAAM,CAAC,MAAM,oBAAoB,GAAG,mBAAmB,CAAC","sourcesContent":["export interface DropdownItemData {\n  value: string | number;\n  text: string;\n  selected: boolean;\n}\n\nexport const DropdownItemSelector = '.xv-dropdown-item';\n"]}

package/dist/collection/components/xv-dropdown/xv-dropdown-item/xv-dropdown-item.css

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

package/dist/collection/components/xv-dropdown/xv-dropdown-item/xv-dropdown-item.js

@@ -0,0 +1,153 @@
+import { Host, h } from "@stencil/core";
+/**
+ * xv-dropdown-item — custom dropdown list item
+ * if you want to create new dropdown list item you need to extend current class properties and
+ * events
+ * should be created and emitted 'itemSelected' event
+ */
+export class XvDropdownItem {
+    constructor() {
+        this.disabled = false;
+        this.value = '';
+        this.selected = false;
+    }
+    handleClick() {
+        if (this.disabled)
+            return;
+        this.itemSelected.emit({
+            selected: !this.selected,
+            value: this.value,
+            text: this.el.innerText
+        });
+    }
+    render() {
+        return (h(Host, { key: 'a0748e38180cfbd7697e5a4b2069168f77e6917e', class: "xv-dropdown-item", value: this.value, role: "option", tabindex: this.disabled ? -1 : false }, h("slot", { key: '3add18db3c3a0e3eabbc31f4e405620e4086b37a' }), this.selected && h("span", { key: '64d4731e8b3a9896ca92787421d66ac3a495c605', class: "checkmark" })));
+    }
+    componentWillLoad() {
+        if (!this.value)
+            this.value = this.el.innerText;
+    }
+    static get is() { return "xv-dropdown-v2-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xv-dropdown-item.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xv-dropdown-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "disabled": {
+                "type": "boolean",
+                "attribute": "disabled",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "value": {
+                "type": "any",
+                "attribute": "value",
+                "mutable": true,
+                "complexType": {
+                    "original": "DropdownItemData['value']",
+                    "resolved": "number | string",
+                    "references": {
+                        "DropdownItemData": {
+                            "location": "import",
+                            "path": "../_vars",
+                            "id": "src/components/xv-dropdown/_vars.ts::DropdownItemData"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "selected": {
+                "type": "boolean",
+                "attribute": "selected",
+                "mutable": true,
+                "complexType": {
+                    "original": "DropdownItemData['selected']",
+                    "resolved": "boolean",
+                    "references": {
+                        "DropdownItemData": {
+                            "location": "import",
+                            "path": "../_vars",
+                            "id": "src/components/xv-dropdown/_vars.ts::DropdownItemData"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "itemSelected",
+                "name": "itemSelected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "DropdownItemData",
+                    "resolved": "DropdownItemData",
+                    "references": {
+                        "DropdownItemData": {
+                            "location": "import",
+                            "path": "../_vars",
+                            "id": "src/components/xv-dropdown/_vars.ts::DropdownItemData"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleClick",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=xv-dropdown-item.js.map

package/dist/collection/components/xv-dropdown/xv-dropdown-item/xv-dropdown-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xv-dropdown-item.js","sourceRoot":"","sources":["../../../../src/components/xv-dropdown/xv-dropdown-item/xv-dropdown-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAgB,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAG/F;;;;;GAKG;AAMH,MAAM,OAAO,cAAc;IAL3B;QAOU,aAAQ,GAAY,KAAK,CAAC;QACM,UAAK,GAA8B,EAAE,CAAC;QACtC,aAAQ,GAAiC,KAAK,CAAC;KA4BxF;IAxBC,WAAW;QACT,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAE1B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;YACrB,QAAQ,EAAE,CAAC,IAAI,CAAC,QAAQ;YACxB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,IAAI,EAAE,IAAI,CAAC,EAAE,CAAC,SAAS;SACxB,CAAC,CAAC;IACL,CAAC;IAGD,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAC,kBAAkB,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK;YAClG,8DAAa;YAEZ,IAAI,CAAC,QAAQ,IAAI,6DAAM,KAAK,EAAC,WAAW,GAAG,CACvC,CACR,CAAC;IACJ,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,IAAI,CAAC,KAAK;YAAE,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC;IAClD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Event, EventEmitter, Listen, Prop, Element } from '@stencil/core';\nimport { DropdownItemData } from '../_vars';\n\n/**\n * xv-dropdown-item — custom dropdown list item\n * if you want to create new dropdown list item you need to extend current class properties and\n * events\n * should be created and emitted 'itemSelected' event\n */\n@Component({\n  tag: 'xv-dropdown-v2-item',\n  styleUrl: 'xv-dropdown-item.scss',\n  shadow: true,\n})\nexport class XvDropdownItem {\n  @Element() el: HTMLElement;\n  @Prop() disabled: boolean = false;\n  @Prop({ reflect: true, mutable: true }) value: DropdownItemData['value'] = '';\n  @Prop({ reflect: true, mutable: true }) selected: DropdownItemData['selected'] = false;\n  @Event() itemSelected: EventEmitter<DropdownItemData>;\n\n  @Listen('click')\n  handleClick() {\n    if (this.disabled) return;\n\n    this.itemSelected.emit({\n      selected: !this.selected,\n      value: this.value,\n      text: this.el.innerText\n    });\n  }\n\n\n  render() {\n    return (\n      <Host class=\"xv-dropdown-item\" value={this.value} role=\"option\" tabindex={this.disabled ? -1 : false}>\n        <slot></slot>\n\n        {this.selected && <span class=\"checkmark\" />}\n      </Host>\n    );\n  }\n\n  componentWillLoad() {\n    if (!this.value) this.value = this.el.innerText;\n  }\n}\n"]}