xv-webcomponents 0.1.17 → 0.1.18

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

@@ -0,0 +1,53 @@
+:host(xv-table-v2-row) {
+  display: grid;
+  padding: 16px;
+  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-02, #FFF);
+  box-shadow: 0 0 0 1px #E3E3E3 inset;
+}
+:host(xv-table-v2-row) .left-container {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 16px;
+  padding: 0 16px;
+}
+:host(xv-table-v2-row) .expand-btn {
+  outline: none;
+  background-color: transparent;
+  display: block;
+  margin: 0 auto;
+  border: solid black;
+  border-width: 0 2px 2px 0;
+  padding: 5px;
+  transform: rotate(45deg);
+  cursor: pointer;
+  transition: opacity 300ms ease-in-out, transform 200ms ease-in-out;
+}
+:host(xv-table-v2-row) .expand-btn:active {
+  opacity: 0.5;
+}
+:host(xv-table-v2-row) .expand-btn.expanded {
+  transform: rotate(225deg);
+}
+
+:host([expanded]) {
+  block-size: auto;
+}
+
+:host([collapsed]) {
+  block-size: 0;
+  overflow: hidden;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+:host([odd]) {
+  background-color: var(--layer-selected-01, #E3E3E3);
+}
+
+:host([even]) {
+  background-color: #fff;
+}

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

@@ -0,0 +1,299 @@
+import { Host, h } from "@stencil/core";
+import { uidGenerator } from "../../../utils/utils";
+export class XvTableRow {
+    constructor() {
+        /**
+         * Is row will be expandable
+         * If it's true then the next row will be collapsed
+         */
+        this.expandable = false;
+        /**
+         * Default state of expandable
+         */
+        this.expanded = false;
+        this.prevRowExpanded = false;
+        this.cols = 1;
+        this.checkboxChange = (e) => {
+            this.checked = e.detail;
+            this.checkedChange.emit({
+                name: this.selectionName,
+                value: this.value,
+                checked: e.detail
+            });
+        };
+    }
+    /**
+     * Called from outside (From expandable row)
+     */
+    async setExpandRelation(id, expanded) {
+        this.expandId = id;
+        this.prevRowExpanded = !!expanded;
+        return this.prevRowExpanded;
+    }
+    /**
+     * Called from outside (From expandable row)
+     * to change then expand or collapse
+     */
+    async toggleExpand(id, expanded) {
+        if (this.expandId !== id)
+            return;
+        this.prevRowExpanded = expanded !== undefined ? expanded : !this.prevRowExpanded;
+    }
+    /**
+     * Watch for expandable
+     * When it's false needs to remove unnecessary properties
+     */
+    setExpandableRelationHandle() {
+        const nextEl = this.el.nextElementSibling;
+        if (!nextEl || nextEl.tagName !== this.el.tagName)
+            this.expandable = false;
+        if (!this.expandable)
+            return;
+        if (!this.id)
+            this.id = this.el.id || uidGenerator();
+        return nextEl.setExpandRelation(this.id, this.expanded);
+    }
+    /**
+     * When user press on the expand button
+     */
+    changeExpandHandle() {
+        const nextRow = this.el.nextElementSibling;
+        if (!nextRow || nextRow.tagName !== this.el.tagName)
+            return;
+        this.expanded = !this.expanded;
+        // Call method from new row
+        nextRow.toggleExpand(this.id, this.expanded);
+    }
+    /**
+     * Highlight the expanded row on hover
+     */
+    hoverHandle(active) {
+        const prevRow = this.el.previousElementSibling;
+        const nextRow = this.el.nextElementSibling;
+        if ((nextRow === null || nextRow === void 0 ? void 0 : nextRow.tagName) === this.el.tagName && this.expandable) {
+            if (active) {
+                nextRow.setAttribute('highlighted', '');
+            }
+            else {
+                nextRow.removeAttribute('highlighted');
+            }
+        }
+        if ((prevRow === null || prevRow === void 0 ? void 0 : prevRow.tagName) === this.el.tagName && prevRow.hasAttribute('expandable')) {
+            if (active) {
+                prevRow.setAttribute('highlighted', '');
+            }
+            else {
+                prevRow.removeAttribute('highlighted');
+            }
+        }
+    }
+    async componentWillLoad() {
+        this.id = this.el.id;
+        this.cols = this.el.childElementCount;
+        await this.setExpandableRelationHandle();
+    }
+    render() {
+        return (h(Host, { key: '88df976d496799070ad0011da60871d4984f775e', onMouseEnter: () => this.hoverHandle(true), onMouseLeave: () => this.hoverHandle(false), cols: this.cols, expanded: this.expandId && this.prevRowExpanded, collapsed: this.expandId && !this.prevRowExpanded }, h("div", { key: '2a28bfce934d640db4167ce418bec37bddd18494', class: "left-container" }, this.expandable && (h("button", { key: '0cf1d6a4472c05677e7d2edb8b2402bf7687fae8', class: `expand-btn ${this.expanded ? 'expanded' : ''}`, onClick: () => this.changeExpandHandle() })), this.selectionName && (h("xv-checkbox-v2", { key: 'ea01b82db0a990c0352c3310ceaca1cc55a7d2ca', name: this.selectionName, value: this.value, checked: this.checked, onEventChange: this.checkboxChange }))), h("slot", { key: '33be6520fe3e2f7cd352f8ce58ad7286b644d45b' })));
+    }
+    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 {
+            "expandable": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Is row will be expandable\nIf it's true then the next row will be collapsed"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "expandable",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "expanded": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Default state of expandable"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "expanded",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "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
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Checkbox row value"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "value",
+                "reflect": true
+            },
+            "checked": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Checkbox row status"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "checked",
+                "reflect": true
+            }
+        };
+    }
+    static get states() {
+        return {
+            "prevRowExpanded": {},
+            "expandId": {},
+            "id": {},
+            "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 methods() {
+        return {
+            "setExpandRelation": {
+                "complexType": {
+                    "signature": "(id?: string, expanded?: boolean) => Promise<boolean>",
+                    "parameters": [{
+                            "name": "id",
+                            "type": "string",
+                            "docs": ""
+                        }, {
+                            "name": "expanded",
+                            "type": "boolean",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Called from outside (From expandable row)",
+                    "tags": []
+                }
+            },
+            "toggleExpand": {
+                "complexType": {
+                    "signature": "(id?: string, expanded?: boolean) => Promise<void>",
+                    "parameters": [{
+                            "name": "id",
+                            "type": "string",
+                            "docs": ""
+                        }, {
+                            "name": "expanded",
+                            "type": "boolean",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Called from outside (From expandable row)\nto change then expand or collapse",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "expandable",
+                "methodName": "setExpandableRelationHandle"
+            }];
+    }
+}
+//# 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, State, Watch, Method, Event, EventEmitter } from '@stencil/core';\nimport { 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  /**\n   * Is row will be expandable\n   * If it's true then the next row will be collapsed\n   */\n  @Prop({ mutable: true }) expandable: boolean = false;\n  /**\n   * Default state of expandable\n   */\n  @Prop({ reflect: true, mutable: true }) expanded: boolean = false;\n  /**\n   * Checkbox row name\n   */\n  @Prop({ reflect: true, attribute: 'selection-name' }) selectionName?: string;\n  /**\n   * Checkbox row value\n   */\n  @Prop({ reflect: true }) value?: string;\n  /**\n   * Checkbox row status\n   */\n  @Prop({ reflect: true, mutable: true  }) checked?: boolean;\n\n  @State() prevRowExpanded: boolean = false;\n  @State() expandId?: string;\n  @State() id?: string;\n  @State() cols: number = 1;\n\n  @Event() checkedChange: EventEmitter<{ name: string, value?: string; checked: boolean }>;\n\n  /**\n   * Called from outside (From expandable row)\n   */\n  @Method()\n  async setExpandRelation(id?: string, expanded?: boolean) {\n    this.expandId = id;\n    this.prevRowExpanded = !!expanded;\n    return this.prevRowExpanded;\n  }\n\n  /**\n   * Called from outside (From expandable row)\n   * to change then expand or collapse\n   */\n  @Method()\n  async toggleExpand(id?: string, expanded?: boolean) {\n    if (this.expandId !== id) return;\n    this.prevRowExpanded = expanded !== undefined ? expanded : !this.prevRowExpanded;\n  }\n\n  /**\n   * Watch for expandable\n   * When it's false needs to remove unnecessary properties\n   */\n  @Watch('expandable')\n  setExpandableRelationHandle(): Promise<any> {\n    const nextEl = this.el.nextElementSibling;\n\n    if (!nextEl || nextEl.tagName !== this.el.tagName) this.expandable = false;\n\n    if (!this.expandable) return;\n\n    if (!this.id) this.id = this.el.id || uidGenerator();\n\n    return (nextEl as any).setExpandRelation(this.id, this.expanded);\n  }\n\n  /**\n   * When user press on the expand button\n   */\n  private changeExpandHandle() {\n    const nextRow = this.el.nextElementSibling;\n\n    if (!nextRow || nextRow.tagName !== this.el.tagName) return;\n\n    this.expanded = !this.expanded;\n    // Call method from new row\n    (nextRow as any).toggleExpand(this.id, this.expanded);\n  }\n\n  /**\n   * Highlight the expanded row on hover\n   */\n  private hoverHandle(active: boolean) {\n    const prevRow = this.el.previousElementSibling as HTMLElement | null;\n    const nextRow = this.el.nextElementSibling as HTMLElement | null;\n\n    if (nextRow?.tagName === this.el.tagName && this.expandable) {\n      if (active) {\n        nextRow.setAttribute('highlighted', '');\n      } else {\n        nextRow.removeAttribute('highlighted');\n      }\n    }\n\n    if (prevRow?.tagName === this.el.tagName && prevRow.hasAttribute('expandable')) {\n      if (active) {\n        prevRow.setAttribute('highlighted', '');\n      } else {\n        prevRow.removeAttribute('highlighted');\n      }\n    }\n  }\n\n  private checkboxChange = (e: CustomEvent<boolean>) => {\n    this.checked = e.detail;\n    this.checkedChange.emit({\n      name: this.selectionName,\n      value: this.value,\n      checked: e.detail\n    });\n  }\n\n  async componentWillLoad(){\n    this.id = this.el.id;\n    this.cols = this.el.childElementCount;\n    await this.setExpandableRelationHandle();\n  }\n\n  render() {\n    return (\n      <Host\n        onMouseEnter={() => this.hoverHandle(true)}\n        onMouseLeave={() => this.hoverHandle(false)}\n        cols={this.cols}\n        expanded={this.expandId && this.prevRowExpanded}\n        collapsed={this.expandId && !this.prevRowExpanded}\n      >\n        <div class=\"left-container\">\n          {this.expandable && (\n            <button\n              class={`expand-btn ${this.expanded ? 'expanded' : ''}`}\n              onClick={() => this.changeExpandHandle()}\n            />\n          )}\n          {this.selectionName && (\n            <xv-checkbox-v2\n              name={this.selectionName}\n              value={this.value}\n              checked={this.checked}\n              onEventChange={this.checkboxChange}\n            />\n          )}\n        </div>\n        <slot />\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,154 @@
+:host ::slotted(xv-table-v2-header-row[cols="1"]),
+:host ::slotted(xv-table-v2-row[cols="1"]) {
+  --xv-table-cols: 1;
+}
+:host ::slotted(xv-table-v2-header-row[cols="2"]),
+:host ::slotted(xv-table-v2-row[cols="2"]) {
+  --xv-table-cols: 2;
+}
+:host ::slotted(xv-table-v2-header-row[cols="3"]),
+:host ::slotted(xv-table-v2-row[cols="3"]) {
+  --xv-table-cols: 3;
+}
+:host ::slotted(xv-table-v2-header-row[cols="4"]),
+:host ::slotted(xv-table-v2-row[cols="4"]) {
+  --xv-table-cols: 4;
+}
+:host ::slotted(xv-table-v2-header-row[cols="5"]),
+:host ::slotted(xv-table-v2-row[cols="5"]) {
+  --xv-table-cols: 5;
+}
+:host ::slotted(xv-table-v2-header-row[cols="6"]),
+:host ::slotted(xv-table-v2-row[cols="6"]) {
+  --xv-table-cols: 6;
+}
+:host ::slotted(xv-table-v2-header-row[cols="7"]),
+:host ::slotted(xv-table-v2-row[cols="7"]) {
+  --xv-table-cols: 7;
+}
+:host ::slotted(xv-table-v2-header-row[cols="8"]),
+:host ::slotted(xv-table-v2-row[cols="8"]) {
+  --xv-table-cols: 8;
+}
+:host ::slotted(xv-table-v2-header-row[cols="9"]),
+:host ::slotted(xv-table-v2-row[cols="9"]) {
+  --xv-table-cols: 9;
+}
+:host ::slotted(xv-table-v2-header-row[cols="10"]),
+:host ::slotted(xv-table-v2-row[cols="10"]) {
+  --xv-table-cols: 10;
+}
+:host ::slotted(xv-table-v2-header-row[cols="11"]),
+:host ::slotted(xv-table-v2-row[cols="11"]) {
+  --xv-table-cols: 11;
+}
+:host ::slotted(xv-table-v2-header-row[cols="12"]),
+:host ::slotted(xv-table-v2-row[cols="12"]) {
+  --xv-table-cols: 12;
+}
+:host ::slotted(xv-table-v2-header-row[cols="13"]),
+:host ::slotted(xv-table-v2-row[cols="13"]) {
+  --xv-table-cols: 13;
+}
+:host ::slotted(xv-table-v2-header-row[cols="14"]),
+:host ::slotted(xv-table-v2-row[cols="14"]) {
+  --xv-table-cols: 14;
+}
+:host ::slotted(xv-table-v2-header-row[cols="15"]),
+:host ::slotted(xv-table-v2-row[cols="15"]) {
+  --xv-table-cols: 15;
+}
+:host ::slotted(xv-table-v2-header-row[cols="16"]),
+:host ::slotted(xv-table-v2-row[cols="16"]) {
+  --xv-table-cols: 16;
+}
+:host ::slotted(xv-table-v2-header-row[cols="17"]),
+:host ::slotted(xv-table-v2-row[cols="17"]) {
+  --xv-table-cols: 17;
+}
+:host ::slotted(xv-table-v2-header-row[cols="18"]),
+:host ::slotted(xv-table-v2-row[cols="18"]) {
+  --xv-table-cols: 18;
+}
+:host ::slotted(xv-table-v2-header-row[cols="19"]),
+:host ::slotted(xv-table-v2-row[cols="19"]) {
+  --xv-table-cols: 19;
+}
+:host ::slotted(xv-table-v2-header-row[cols="20"]),
+:host ::slotted(xv-table-v2-row[cols="20"]) {
+  --xv-table-cols: 20;
+}
+
+:host([size=xs]) ::slotted(xv-table-v2-row),
+:host([size=xs]) ::slotted(xv-table-v2-header-row) {
+  padding: 2px;
+}
+
+:host([size=sm]) ::slotted(xv-table-v2-row),
+:host([size=sm]) ::slotted(xv-table-v2-header-row) {
+  padding: 8px;
+}
+
+:host([size=md]) ::slotted(xv-table-v2-row),
+:host([size=md]) ::slotted(xv-table-v2-header-row) {
+  padding: 16px;
+}
+
+:host([size=lg]) ::slotted(xv-table-v2-row),
+:host([size=lg]) ::slotted(xv-table-v2-header-row) {
+  padding: 18px;
+}
+
+:host([size=xl]) ::slotted(xv-table-v2-row),
+:host([size=xl]) ::slotted(xv-table-v2-header-row) {
+  padding: 20px;
+}
+
+:host([hoverable]) ::slotted(xv-table-v2-row:hover),
+:host([hoverable]) ::slotted([highlighted]) {
+  background-color: var(--layer-hover-01, #E3E3E3);
+}
+
+:host(xv-table-v2) ::slotted(xv-table-v2-row),
+:host(xv-table-v2) ::slotted(xv-table-v2-header-row) {
+  grid-template-columns: 0 repeat(var(--xv-table-cols, 1), 1fr);
+}
+:host(xv-table-v2) ::slotted(xv-table-v2-row[collapsed]) {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+:host(xv-table-v2) .caption {
+  padding: 16px 16px 18px;
+}
+:host(xv-table-v2) .caption_title, :host(xv-table-v2) .caption_description {
+  color: var(--text-primary, #333);
+  margin: 0;
+}
+:host(xv-table-v2) .caption_title {
+  font-family: var(--ff-heading, "Gill Sans");
+  font-size: 21px;
+}
+:host(xv-table-v2) .caption_description {
+  font-family: var(--ff-body, Tahoma);
+  font-size: 14px;
+  line-height: 128.571%;
+  letter-spacing: 0.16px;
+}
+
+:host([expandable]) ::slotted(xv-table-v2-row),
+:host([expandable]) ::slotted(xv-table-v2-header-row) {
+  position: relative;
+  grid-template-columns: 48px repeat(var(--xv-table-cols, 1), 1fr);
+}
+
+:host([selectable]) ::slotted(xv-table-v2-row),
+:host([selectable]) ::slotted(xv-table-v2-header-row) {
+  position: relative;
+  grid-template-columns: 50px repeat(var(--xv-table-cols, 1), 1fr);
+}
+
+:host([expandable][selectable]) ::slotted(xv-table-v2-row),
+:host([expandable][selectable]) ::slotted(xv-table-v2-header-row) {
+  position: relative;
+  grid-template-columns: 98px repeat(var(--xv-table-cols, 1), 1fr);
+}