xv-webcomponents 0.1.18 → 0.1.20

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

@@ -1 +0,0 @@
-{"version":3,"file":"xv-table-row.js","sourceRoot":"","sources":["../../../../src/components/xv-table/xv-table-row/xv-table-row.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAC7G,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAOpD,MAAM,OAAO,UAAU;IALvB;QAOE;;;WAGG;QACsB,eAAU,GAAY,KAAK,CAAC;QACrD;;WAEG;QACqC,aAAQ,GAAY,KAAK,CAAC;QAczD,oBAAe,GAAY,KAAK,CAAC;QAGjC,SAAI,GAAW,CAAC,CAAC;QA8ElB,mBAAc,GAAG,CAAC,CAAuB,EAAE,EAAE;YACnD,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,MAAM,CAAC;YACxB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;gBACtB,IAAI,EAAE,IAAI,CAAC,aAAa;gBACxB,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,OAAO,EAAE,CAAC,CAAC,MAAM;aAClB,CAAC,CAAC;QACL,CAAC,CAAA;KAqCF;IAtHC;;OAEG;IAEH,KAAK,CAAC,iBAAiB,CAAC,EAAW,EAAE,QAAkB;QACrD,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC;QACnB,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,QAAQ,CAAC;QAClC,OAAO,IAAI,CAAC,eAAe,CAAC;IAC9B,CAAC;IAED;;;OAGG;IAEH,KAAK,CAAC,YAAY,CAAC,EAAW,EAAE,QAAkB;QAChD,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE;YAAE,OAAO;QACjC,IAAI,CAAC,eAAe,GAAG,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC;IACnF,CAAC;IAED;;;OAGG;IAEH,2BAA2B;QACzB,MAAM,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,kBAAkB,CAAC;QAE1C,IAAI,CAAC,MAAM,IAAI,MAAM,CAAC,OAAO,KAAK,IAAI,CAAC,EAAE,CAAC,OAAO;YAAE,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;QAE3E,IAAI,CAAC,IAAI,CAAC,UAAU;YAAE,OAAO;QAE7B,IAAI,CAAC,IAAI,CAAC,EAAE;YAAE,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC,EAAE,IAAI,YAAY,EAAE,CAAC;QAErD,OAAQ,MAAc,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;IACnE,CAAC;IAED;;OAEG;IACK,kBAAkB;QACxB,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,kBAAkB,CAAC;QAE3C,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC,OAAO,KAAK,IAAI,CAAC,EAAE,CAAC,OAAO;YAAE,OAAO;QAE5D,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;QAC/B,2BAA2B;QAC1B,OAAe,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;IACxD,CAAC;IAED;;OAEG;IACK,WAAW,CAAC,MAAe;QACjC,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,sBAA4C,CAAC;QACrE,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,kBAAwC,CAAC;QAEjE,IAAI,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,OAAO,MAAK,IAAI,CAAC,EAAE,CAAC,OAAO,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YAC5D,IAAI,MAAM,EAAE,CAAC;gBACX,OAAO,CAAC,YAAY,CAAC,aAAa,EAAE,EAAE,CAAC,CAAC;YAC1C,CAAC;iBAAM,CAAC;gBACN,OAAO,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;YACzC,CAAC;QACH,CAAC;QAED,IAAI,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,OAAO,MAAK,IAAI,CAAC,EAAE,CAAC,OAAO,IAAI,OAAO,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE,CAAC;YAC/E,IAAI,MAAM,EAAE,CAAC;gBACX,OAAO,CAAC,YAAY,CAAC,aAAa,EAAE,EAAE,CAAC,CAAC;YAC1C,CAAC;iBAAM,CAAC;gBACN,OAAO,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;YACzC,CAAC;QACH,CAAC;IACH,CAAC;IAWD,KAAK,CAAC,iBAAiB;QACrB,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC;QACrB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,iBAAiB,CAAC;QACtC,MAAM,IAAI,CAAC,2BAA2B,EAAE,CAAC;IAC3C,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAC1C,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,EAC3C,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,eAAe,EAC/C,SAAS,EAAE,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,eAAe;YAEjD,4DAAK,KAAK,EAAC,gBAAgB;gBACxB,IAAI,CAAC,UAAU,IAAI,CAClB,+DACE,KAAK,EAAE,cAAc,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE,EACtD,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,kBAAkB,EAAE,GACxC,CACH;gBACA,IAAI,CAAC,aAAa,IAAI,CACrB,uEACE,IAAI,EAAE,IAAI,CAAC,aAAa,EACxB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,aAAa,EAAE,IAAI,CAAC,cAAc,GAClC,CACH,CACG;YACN,8DAAQ,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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

@@ -1,154 +0,0 @@
-: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);
-}

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

@@ -1,245 +0,0 @@
-import { Host, h } from "@stencil/core";
-import { TABLE_COLOR_SCHEMA, TABLE_SIZE } from "./defs";
-export class XvTable {
-    constructor() {
-        /**
-         * Set current color schema type of enum TABLE_COLOR_SCHEMA
-         * Possible options 'zebra'
-         */
-        this.colorSchema = TABLE_COLOR_SCHEMA.DEF;
-        /**
-         * If table is expandable fields
-         */
-        this.expandable = false;
-        /**
-         * Table size
-         * enum TABLE_SIZE
-         */
-        this.size = TABLE_SIZE.MEDIUM;
-        /**
-         * Add checkbox selection to the table
-         */
-        this.selectable = false;
-        this.selectedRows = new Map();
-        this.handleCheckedChange = (e) => {
-            const { name, value, checked } = e.detail;
-            if (checked) {
-                this.selectedRows.set(name, { name, value });
-            }
-            else {
-                this.selectedRows.delete(name);
-            }
-            this.changeSelection.emit(Array.from(this.selectedRows.values()));
-        };
-    }
-    setRowPropsHandler() {
-        const rows = Array
-            .from(this.el.childNodes)
-            .filter((node) => node.nodeType === Node.ELEMENT_NODE &&
-            ((node === null || node === void 0 ? void 0 : node.tagName) === `${this.el.tagName}-ROW` || (node === null || node === void 0 ? void 0 : node.tagName) === `${this.el.tagName}-HEADER-ROW`));
-        let visualIndex = 0;
-        rows.forEach((node, i) => {
-            var _a;
-            const row = node;
-            const isHeaderRow = (node === null || node === void 0 ? void 0 : node.tagName) === `${this.el.tagName}-HEADER-ROW`;
-            if (this.selectable) {
-                let name = row.getAttribute('selection-name');
-                if (!name) {
-                    name = isHeaderRow ? 'header' : `xv-table-row-${i}`;
-                    row.setAttribute('selection-name', name);
-                }
-                if (row.hasAttribute('checked')) {
-                    this.selectedRows.set(name, {
-                        name,
-                        value: (_a = row.getAttribute('value')) !== null && _a !== void 0 ? _a : undefined,
-                    });
-                }
-            }
-            if (isHeaderRow)
-                return;
-            switch (this.colorSchema) {
-                case TABLE_COLOR_SCHEMA.ZEBRA:
-                    const stripe = visualIndex % 2 === 0 ? 'even' : 'odd';
-                    if (row.hasAttribute('expandable') && rows[i + 1]) {
-                        row.setAttribute(stripe, '');
-                    }
-                    else {
-                        visualIndex++;
-                        row.setAttribute(stripe, '');
-                    }
-                    break;
-                default:
-                    row.removeAttribute('odd');
-                    row.removeAttribute('even');
-            }
-        });
-    }
-    render() {
-        return (h(Host, { key: '5d187689ae04f8cf161616defc092b2690831f98', size: this.size, selectable: this.selectable }, (this.el.title || this.description) && (h("div", { key: 'ee66085f185a99c2404d8e398ec356b2e2e5c347', class: "caption" }, this.el.title && h("h5", { key: '652bd665af5fac06bbaecd4aed542246c2a5d002', class: "caption_title" }, this.el.title), this.description && h("p", { key: '650461f500003c3ce70bbaaf24d4764a5c1904f1', class: "caption_description" }, this.description))), h("slot", { key: '7331a48d73167801ccc2d5f8682b62d3656712c3' })));
-    }
-    componentWillLoad() {
-        this.setRowPropsHandler();
-        this.el.addEventListener('checkedChange', this.handleCheckedChange);
-    }
-    disconnectedCallback() {
-        this.el.removeEventListener('checkedChange', this.handleCheckedChange);
-    }
-    static get is() { return "xv-table-v2"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["xv-table.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["xv-table.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "description": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Table caption description"
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "description",
-                "reflect": false
-            },
-            "colorSchema": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "TABLE_COLOR_SCHEMA",
-                    "resolved": "TABLE_COLOR_SCHEMA.DEF | TABLE_COLOR_SCHEMA.ZEBRA",
-                    "references": {
-                        "TABLE_COLOR_SCHEMA": {
-                            "location": "import",
-                            "path": "./defs",
-                            "id": "src/components/xv-table/defs.ts::TABLE_COLOR_SCHEMA"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Set current color schema type of enum TABLE_COLOR_SCHEMA\nPossible options 'zebra'"
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "color-schema",
-                "reflect": false,
-                "defaultValue": "TABLE_COLOR_SCHEMA.DEF"
-            },
-            "expandable": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "If table is expandable fields"
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "expandable",
-                "reflect": false,
-                "defaultValue": "false"
-            },
-            "size": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "TABLE_SIZE",
-                    "resolved": "TABLE_SIZE.EXTRA_LARGE | TABLE_SIZE.EXTRA_SMALL | TABLE_SIZE.LARGE | TABLE_SIZE.MEDIUM | TABLE_SIZE.SMALL",
-                    "references": {
-                        "TABLE_SIZE": {
-                            "location": "import",
-                            "path": "./defs",
-                            "id": "src/components/xv-table/defs.ts::TABLE_SIZE"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Table size\nenum TABLE_SIZE"
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "size",
-                "reflect": false,
-                "defaultValue": "TABLE_SIZE.MEDIUM"
-            },
-            "selectable": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Add checkbox selection to the table"
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "selectable",
-                "reflect": false,
-                "defaultValue": "false"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "selectedRows": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "changeSelection",
-                "name": "changeSelection",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "{ name: string, value?: any }[]",
-                    "resolved": "{ name: string; value?: any; }[]",
-                    "references": {}
-                }
-            }];
-    }
-    static get elementRef() { return "el"; }
-    static get watchers() {
-        return [{
-                "propName": "colorSchema",
-                "methodName": "setRowPropsHandler"
-            }];
-    }
-}
-//# sourceMappingURL=xv-table.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"xv-table.js","sourceRoot":"","sources":["../../../src/components/xv-table/xv-table.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Element, Prop, Watch, Event, EventEmitter, State } from '@stencil/core';\nimport { TABLE_COLOR_SCHEMA, TABLE_SIZE, TableSelectionEvent } from './defs';\n\n@Component({\n  tag: 'xv-table-v2',\n  styleUrl: 'xv-table.scss',\n  shadow: true,\n})\nexport class XvTable {\n  @Element() el: HTMLElement;\n  /**\n   * Table caption description\n   */\n  @Prop() description: string;\n  /**\n   * Set current color schema type of enum TABLE_COLOR_SCHEMA\n   * Possible options 'zebra'\n   */\n  @Prop({ attribute: 'color-schema' }) colorSchema: TABLE_COLOR_SCHEMA = TABLE_COLOR_SCHEMA.DEF;\n  /**\n   * If table is expandable fields\n   */\n  @Prop() expandable: boolean = false;\n  /**\n   * Table size\n   * enum TABLE_SIZE\n   */\n  @Prop() size: TABLE_SIZE = TABLE_SIZE.MEDIUM;\n  /**\n   * Add checkbox selection to the table\n   */\n  @Prop() selectable: boolean = false;\n\n  @State() selectedRows = new Map<string, { name: string, value?: string }>();\n\n  @Event() changeSelection: EventEmitter<{ name: string, value?: any }[]>;\n\n  @Watch('colorSchema')\n  setRowPropsHandler() {\n    const rows = Array\n      .from(this.el.childNodes)\n      .filter((node) =>\n        node.nodeType === Node.ELEMENT_NODE &&\n        ((node as any)?.tagName === `${this.el.tagName}-ROW` || (node as any)?.tagName === `${this.el.tagName}-HEADER-ROW`)\n      );\n    let visualIndex = 0;\n\n    rows.forEach((node, i) => {\n      const row = (node as HTMLElement);\n      const isHeaderRow = (node as any)?.tagName === `${this.el.tagName}-HEADER-ROW`;\n\n      if (this.selectable) {\n        let name = row.getAttribute('selection-name');\n\n        if (!name) {\n          name = isHeaderRow ? 'header' : `xv-table-row-${i}`;\n          row.setAttribute('selection-name', name);\n        }\n\n        if (row.hasAttribute('checked')) {\n          this.selectedRows.set(name, {\n            name,\n            value: row.getAttribute('value') ?? undefined,\n          })\n        }\n      }\n\n      if (isHeaderRow) return;\n\n      switch (this.colorSchema) {\n        case TABLE_COLOR_SCHEMA.ZEBRA:\n          const stripe = visualIndex % 2 === 0 ? 'even' : 'odd';\n          if (row.hasAttribute('expandable') && rows[i + 1]) {\n            row.setAttribute(stripe, '');\n          } else {\n            visualIndex++;\n            row.setAttribute(stripe, '');\n          }\n          break;\n        default:\n          row.removeAttribute('odd');\n          row.removeAttribute('even');\n      }\n    });\n  }\n\n  private handleCheckedChange = (e: TableSelectionEvent) => {\n    const { name, value, checked } = e.detail;\n\n    if (checked) {\n      this.selectedRows.set(name, { name, value });\n    } else {\n      this.selectedRows.delete(name);\n    }\n\n    this.changeSelection.emit(Array.from(this.selectedRows.values()));\n  }\n\n    render() {\n    return (\n      <Host size={this.size} selectable={this.selectable}>\n        {(this.el.title || this.description) && (\n          <div class=\"caption\">\n            {this.el.title && <h5 class=\"caption_title\">{this.el.title}</h5>}\n            {this.description && <p class=\"caption_description\">{this.description}</p>}\n          </div>\n        )}\n        <slot></slot>\n      </Host>\n    );\n  }\n\n  componentWillLoad() {\n    this.setRowPropsHandler();\n    this.el.addEventListener('checkedChange', this.handleCheckedChange as any);\n  }\n\n  disconnectedCallback() {\n    this.el.removeEventListener('checkedChange', this.handleCheckedChange as any);\n  }\n}\n"]}

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

@@ -1,97 +0,0 @@
-@charset "UTF-8";
-:host {
-  display: inline-flex;
-  align-items: center;
-  justify-content: space-between;
-  border-radius: 1000px;
-  background-color: var(--background);
-  color: var(--text-primary);
-  font-family: var(--ff-body, inherit);
-}
-:host .xv-tag_content {
-  padding-left: 8px;
-  padding-right: 8px;
-  color: inherit;
-  font-family: var(--ff-body);
-  font-style: normal;
-  font-weight: 400;
-  line-height: 16px;
-  letter-spacing: 0.32px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-:host .xv-tag_close {
-  box-sizing: border-box;
-  text-decoration: none;
-  border: none;
-  background-color: inherit;
-  outline: none;
-  border-spacing: 0;
-  list-style: none outside none;
-  margin: 0;
-  padding: 0;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 62px;
-  width: 15px;
-  height: 15px;
-  text-align: left;
-  color: inherit;
-  text-indent: 0;
-  transition: opacity 300ms ease-in-out, filter 300ms ease-in-out;
-}
-:host .xv-tag_close:hover {
-  cursor: pointer;
-  filter: brightness(80%);
-}
-:host .xv-tag_close:active {
-  opacity: 0.7;
-}
-:host .xv-tag_close:focus {
-  outline: 1px solid currentColor;
-}
-:host .xv-tag_close:after {
-  overflow: hidden;
-  width: inherit;
-  height: inherit;
-  color: inherit;
-  font-size: 16px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  content: "×";
-}
-
-:host(.sm) {
-  font-size: var(--fz-sm);
-}
-
-:host(.md) {
-  font-size: var(--fz-md);
-}
-:host(.md) .xv-tag_content {
-  line-height: 24px;
-}
-:host(.md) .xv-tag_close {
-  height: 24px;
-  width: 24px;
-}
-
-:host(.lg) {
-  font-size: var(--fz-lg);
-}
-:host(.lg) .xv-tag_content {
-  line-height: 26px;
-}
-:host(.lg) .xv-tag_close {
-  height: 26px;
-  width: 26px;
-}
-
-:host(.disabled) {
-  pointer-events: none;
-  background-color: var(--layer-01);
-  color: var(--text-disabled);
-}