xv-webcomponents 0.1.43 → 0.1.46

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

@@ -0,0 +1,333 @@
+import { Host, h } from "@stencil/core";
+import { XV_EXPANDABLE_KEY, XV_TABLE_TAG } from "../_vars";
+import { setAttr, uidGenerator } from "../../../utils/utils";
+export class XvTableRow {
+    constructor() {
+        this.checkHandle = ({ detail: checked }) => {
+            if (!checked && this.partial)
+                this.partial = checked;
+            if (!this.name)
+                this.name = uidGenerator();
+            this.selectRow.emit({
+                name: this.name,
+                value: this.value,
+                checked: checked,
+                partial: this.partial,
+                header: this.header,
+                expandable: this.el.getAttribute('slot') === XV_EXPANDABLE_KEY,
+            });
+        };
+    }
+    checkedChangeHandle() {
+        if (!this.name)
+            this.name = uidGenerator();
+        this.checkedChange.emit({
+            name: this.name,
+            value: this.value,
+            checked: this.checked,
+            partial: this.partial,
+            header: this.header,
+            expandable: this.el.getAttribute('slot') === XV_EXPANDABLE_KEY,
+        });
+    }
+    setInitialAttrs() {
+        if (this.variant || !this.hover) {
+            const tableEl = this.el.closest(XV_TABLE_TAG);
+            if (!this.hover) {
+                this.hover = tableEl.hasAttribute('hover');
+            }
+            if (this.variant) {
+                setAttr(this.el.closest(XV_TABLE_TAG), `variant-${this.variant}`, !!this.variant);
+            }
+        }
+    }
+    render() {
+        return (h(Host, { key: 'd88d04bc5b45adfab3bb2e447cb9da737f9cff76' }, this.variant !== undefined && (h("xv-table-v2-cell", { key: '59dd3933d2766c9b4a40d716ccfdc086d82846fe', class: "cell-control" }, this.variant === 'checkbox' && (h("xv-checkbox-v2", { key: 'c13b42d1f39c2154e3ead5985e59b0af0c907e4f', name: this.name, partial: this.partial, checked: this.checked || this.partial, disabled: this.disabled, required: this.required, readonly: this.readonly, onEventChange: this.checkHandle })), this.variant === 'radio' && (h("input", { key: '885d79daf03ac15d90cd823ba81c036d3c51db81', type: "radio", name: this.name, checked: this.checked || this.partial, disabled: this.disabled, required: this.required, readonly: this.readonly })))), h("slot", { key: '0899c1666521ea2a69e68ee71bcf64657938e36a' })));
+    }
+    componentWillLoad() {
+        this.setInitialAttrs();
+    }
+    static get is() { return "xv-table-v2-row"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xv-table-row.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xv-table-row.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "checked": {
+                "type": "boolean",
+                "attribute": "checked",
+                "mutable": true,
+                "complexType": {
+                    "original": "SelectRowDto['checked']",
+                    "resolved": "boolean",
+                    "references": {
+                        "SelectRowDto": {
+                            "location": "import",
+                            "path": "../_vars",
+                            "id": "src/components/xv-table/_vars.ts::SelectRowDto"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "partial": {
+                "type": "boolean",
+                "attribute": "partial",
+                "mutable": true,
+                "complexType": {
+                    "original": "SelectRowDto['partial']",
+                    "resolved": "boolean",
+                    "references": {
+                        "SelectRowDto": {
+                            "location": "import",
+                            "path": "../_vars",
+                            "id": "src/components/xv-table/_vars.ts::SelectRowDto"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "name": {
+                "type": "string",
+                "attribute": "name",
+                "mutable": true,
+                "complexType": {
+                    "original": "SelectRowDto['name']",
+                    "resolved": "string",
+                    "references": {
+                        "SelectRowDto": {
+                            "location": "import",
+                            "path": "../_vars",
+                            "id": "src/components/xv-table/_vars.ts::SelectRowDto"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "value": {
+                "type": "any",
+                "attribute": "value",
+                "mutable": false,
+                "complexType": {
+                    "original": "SelectRowDto['value']",
+                    "resolved": "number | object | string",
+                    "references": {
+                        "SelectRowDto": {
+                            "location": "import",
+                            "path": "../_vars",
+                            "id": "src/components/xv-table/_vars.ts::SelectRowDto"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "hover": {
+                "type": "boolean",
+                "attribute": "hover",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "readonly": {
+                "type": "boolean",
+                "attribute": "readonly",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "required": {
+                "type": "boolean",
+                "attribute": "required",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "disabled": {
+                "type": "boolean",
+                "attribute": "disabled",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "header": {
+                "type": "boolean",
+                "attribute": "header",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "variant": {
+                "type": "string",
+                "attribute": "variant",
+                "mutable": true,
+                "complexType": {
+                    "original": "'checkbox' | 'radio' | ''",
+                    "resolved": "\"\" | \"checkbox\" | \"radio\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "checkedChange",
+                "name": "checkedChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "SelectRowDto",
+                    "resolved": "SelectRowDto",
+                    "references": {
+                        "SelectRowDto": {
+                            "location": "import",
+                            "path": "../_vars",
+                            "id": "src/components/xv-table/_vars.ts::SelectRowDto"
+                        }
+                    }
+                }
+            }, {
+                "method": "selectRow",
+                "name": "selectRow",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "SelectRowDto",
+                    "resolved": "SelectRowDto",
+                    "references": {
+                        "SelectRowDto": {
+                            "location": "import",
+                            "path": "../_vars",
+                            "id": "src/components/xv-table/_vars.ts::SelectRowDto"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "checked",
+                "methodName": "checkedChangeHandle"
+            }];
+    }
+}
+//# sourceMappingURL=xv-table-row.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"xv-table-row.js","sourceRoot":"","sources":["../../../../src/components/xv-table/xv-table-row/xv-table-row.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Element, Prop, Event, EventEmitter, Watch } from '@stencil/core';\nimport { SelectRowDto, XV_EXPANDABLE_KEY, XV_TABLE_TAG } from '../_vars';\nimport { setAttr, uidGenerator } from '../../../utils/utils';\n\n@Component({\n  tag: 'xv-table-v2-row',\n  styleUrl: 'xv-table-row.scss',\n  shadow: true,\n})\nexport class XvTableRow {\n  @Element() el: HTMLElement;\n  @Prop({ reflect: true, mutable: true }) checked?: SelectRowDto['checked'];\n  @Event({ eventName: 'checkedChange' }) checkedChange: EventEmitter<SelectRowDto>;\n  @Prop({ reflect: true, mutable: true }) partial?: SelectRowDto['partial'];\n  @Prop({ reflect: true, mutable: true }) name?: SelectRowDto['name'];\n  @Prop({ reflect: true }) value?: SelectRowDto['value'];\n  @Prop({ reflect: true, mutable: true }) hover?: boolean;\n  @Prop({ reflect: true }) readonly?: boolean;\n  @Prop({ reflect: true }) required?: boolean;\n  @Prop({ reflect: true }) disabled?: boolean;\n  @Prop({ reflect: true }) header?: boolean;\n  @Prop({ reflect: true, mutable: true }) variant?: 'checkbox' | 'radio' | '';\n\n  @Event({ eventName: 'selectRow' }) selectRow: EventEmitter<SelectRowDto>;\n\n  @Watch('checked')\n  checkedChangeHandle() {\n    if (!this.name) this.name = uidGenerator();\n    this.checkedChange.emit({\n      name: this.name,\n      value: this.value,\n      checked: this.checked,\n      partial: this.partial,\n      header: this.header,\n      expandable: this.el.getAttribute('slot') === XV_EXPANDABLE_KEY,\n    });\n  }\n\n  private checkHandle = ({ detail: checked }: CustomEvent<boolean>) => {\n    if (!checked && this.partial) this.partial = checked;\n\n    if (!this.name) this.name = uidGenerator();\n    this.selectRow.emit({\n      name: this.name,\n      value: this.value,\n      checked: checked,\n      partial: this.partial,\n      header: this.header,\n      expandable: this.el.getAttribute('slot') === XV_EXPANDABLE_KEY,\n    });\n  };\n\n  private setInitialAttrs() {\n    if (this.variant || !this.hover) {\n      const tableEl = this.el.closest(XV_TABLE_TAG);\n      if (!this.hover) {\n        this.hover = tableEl.hasAttribute('hover');\n      }\n      if (this.variant) {\n        setAttr(this.el.closest(XV_TABLE_TAG), `variant-${this.variant}`, !!this.variant);\n      }\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.variant !== undefined && (\n          <xv-table-v2-cell class=\"cell-control\">\n            {this.variant === 'checkbox' && (\n              <xv-checkbox-v2\n                name={this.name}\n                partial={this.partial}\n                checked={this.checked || this.partial}\n                disabled={this.disabled}\n                required={this.required}\n                readonly={this.readonly}\n                onEventChange={this.checkHandle}\n              />\n            )}\n            {this.variant === 'radio' && (\n              <input\n                type=\"radio\"\n                name={this.name}\n                checked={this.checked || this.partial}\n                disabled={this.disabled}\n                required={this.required}\n                readonly={this.readonly}\n              />\n            )}\n          </xv-table-v2-cell>\n        )}\n\n        <slot />\n      </Host>\n    );\n  }\n\n  componentWillLoad() {\n    this.setInitialAttrs();\n  }\n}\n"]}

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

@@ -0,0 +1,232 @@
+.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 {
+  --xv-table-min-height: 51.11px;
+  --xv-table-padding-x: 16px;
+  --xv-table-padding-y: 15px;
+  --xv-table-cols-template: repeat(auto-fit, minmax(0, 1fr));
+  display: block;
+}
+:host .batch-actions {
+  user-select: none;
+  pointer-events: none;
+  position: absolute;
+  left: 0;
+  bottom: 100%;
+  width: 0;
+  min-height: 48px;
+  overflow: hidden;
+  border-radius: 3px 3px 0 0;
+  background-color: var(--interactive-01, #273435);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  column-gap: var(--spacing-04);
+  flex-wrap: nowrap;
+  box-sizing: border-box;
+  transition: 250ms ease-in-out height, 250ms ease-in-out width, 250ms ease-in-out padding-inline;
+  color: var(--text-on-color, #fff);
+}
+:host .batch-actions_content {
+  display: block;
+  overflow: hidden;
+  white-space: nowrap;
+}
+:host .batch-actions_count {
+  margin: 0;
+  white-space: nowrap;
+  font-family: var(--ff-body, Tahoma);
+  font-size: var(--fz-md, 14px);
+  font-style: normal;
+  font-weight: 400;
+  line-height: var(--fz-lg, 18px);
+  letter-spacing: 0.16px;
+}
+:host .xv-table {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+:host .xv-table_wrapper {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  overflow-x: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--layer-accent-03) transparent;
+}
+:host .xv-table_wrapper ::slotted(*) {
+  min-width: 1000px;
+}
+:host .xv-table ::slotted([checked]) {
+  background-color: var(--layer-selected-01, #E3E3E3);
+}
+:host .xv-table ::slotted([checked]:not([header]):hover) {
+  background-color: var(--layer-selected-hover-01, #DADADA);
+}
+:host .xv-table ::slotted(xv-table-v2-row[disabled]) {
+  pointer-events: none;
+  opacity: 0.4;
+  cursor: not-allowed;
+  user-select: none;
+}
+:host .xv-table ::slotted([slot=footer]:hover),
+:host .xv-table ::slotted([slot=footer]) {
+  background-color: var(--layer-accent-02, #E3E3E3);
+}
+:host .xv-table_loading {
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: var(--xv-table-min-height, 51.11px);
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0.8);
+}
+:host .xv-table-title,
+:host ::slotted([slot=title]) {
+  color: var(--text-primary, #333) !important;
+  font-size: var(--fz-xl, 21px) !important;
+  margin-top: var(--spacing-05, 16px) !important;
+  margin-bottom: var(--spacing-06, 24px) !important;
+  font-family: var(--ff-heading, "Gill Sans");
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+
+:host([hover]) .xv-table ::slotted(:hover:not([header])) {
+  background-color: var(--layer-hover-01, #E9E9E9);
+}
+
+:host(.batchVisible) .batch-actions {
+  pointer-events: initial;
+  user-select: initial;
+  width: 100%;
+  padding-inline: var(--xv-table-padding-x);
+}
+
+:host([expandable]) ::slotted(xv-table-v2-row) {
+  padding-inline-start: calc(max(10px, var(--xv-table-padding-x)) * 2 + 10px);
+}
+
+:host([variant-checkbox]) ::slotted([slot=footer]:not([variant])) {
+  padding-inline-start: calc(max(10px, var(--xv-table-padding-x)) * 2 + 57.97px);
+}
+
+:host([size=xs]) {
+  --xv-table-padding-y: 7px;
+  --xv-table-min-height: 35.1px;
+}
+
+:host([size=sm]) {
+  --xv-table-padding-y: 10px;
+  --xv-table-min-height: 41.11px;
+}
+
+:host([size=lg]) {
+  --xv-table-padding-y: 21px;
+  --xv-table-min-height: 63.09px;
+}
+
+:host([size=xl]) {
+  --xv-table-padding-y: 31px;
+  --xv-table-min-height: 78.77px;
+}