xv-webcomponents 0.1.26 → 0.1.28

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

@@ -0,0 +1,80 @@
+@charset "UTF-8";
+:host {
+  display: grid;
+  align-items: center;
+  background-color: var(--layer-accent-01, #F7F7F7);
+  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;
+  color: var(--text-primary, #333);
+  font-family: var(--ff-body, Tahoma);
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 128.571%;
+  letter-spacing: 0.16px;
+  grid-template-columns: var(--xv-table-first-col-size, 0) repeat(var(--xv-table-cols, 1), 1fr);
+}
+:host .left-container {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 16px;
+  padding: 0 16px;
+}
+:host ::slotted(xv-table-v2-col) {
+  padding: var(--xv-table-padding, 16px);
+  box-sizing: content-box !important;
+}
+
+:host([sortable]) ::slotted(xv-table-v2-col[sort]) {
+  cursor: pointer;
+  position: relative;
+}
+:host([sortable]) ::slotted(xv-table-v2-col[sort]):before, :host([sortable]) ::slotted(xv-table-v2-col[sort]):after {
+  font-size: 12px;
+  line-height: 10px;
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  right: 8px;
+  pointer-events: none;
+  transition: 350ms ease-in-out opacity;
+  opacity: 0;
+}
+:host([sortable]) ::slotted(xv-table-v2-col[sort]):before {
+  content: "▲";
+  top: 50%;
+  transform: translateY(calc(-50% - 5px));
+}
+:host([sortable]) ::slotted(xv-table-v2-col[sort])::after {
+  content: "▼";
+  top: 50%;
+  transform: translateY(calc(-50% + 5px));
+}
+:host([sortable]) ::slotted(xv-table-v2-col[sort]:hover),
+:host([sortable]) ::slotted(xv-table-v2-col[sort]:focus-within),
+:host([sortable]) ::slotted(xv-table-v2-col[sort=asc]),
+:host([sortable]) ::slotted(xv-table-v2-col[sort=desc]) {
+  background-color: var(--layer-accent-hover-01, #E3E3E3);
+}
+:host([sortable]) ::slotted(xv-table-v2-col[sort]:hover)::before,
+:host([sortable]) ::slotted(xv-table-v2-col[sort]:focus-within)::before {
+  opacity: 1;
+}
+:host([sortable]) ::slotted(xv-table-v2-col[sort]:hover)::after,
+:host([sortable]) ::slotted(xv-table-v2-col[sort]:focus-within)::after {
+  opacity: 1;
+}
+:host([sortable]) ::slotted(xv-table-v2-col[sort=asc])::before {
+  opacity: 1;
+}
+:host([sortable]) ::slotted(xv-table-v2-col[sort=asc])::after {
+  display: none;
+}
+:host([sortable]) ::slotted(xv-table-v2-col[sort=desc])::before {
+  display: none;
+}
+:host([sortable]) ::slotted(xv-table-v2-col[sort=desc])::after {
+  opacity: 1;
+}

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

@@ -0,0 +1,172 @@
+import { Host, h } from "@stencil/core";
+import { TABLE_TAG } from "../defs";
+import { forEach, setAttr } from "../../../utils/utils";
+export class XvTableHeaderRow {
+    constructor() {
+        /**
+         * Checkbox row selected partially
+         */
+        this.partial = false;
+        /**
+         * Checkbox row checked
+         */
+        this.checked = false;
+        this.cols = 1;
+        this.sortChangeHandle = ({ detail, target }) => {
+            // Reset prev selected sort
+            forEach(this.el.children, (col) => {
+                if (col !== target && col.hasAttribute('sort')) {
+                    col.setAttribute('sort', 'none');
+                }
+            });
+            this.sortChange.emit(detail);
+        };
+        this.slotChangeHandle = () => {
+            this.cols = this.el.childElementCount;
+            if (this.sortable) {
+                this.el.removeEventListener('sortColChange', this.sortChangeHandle.bind(this));
+                this.el.addEventListener('sortColChange', this.sortChangeHandle.bind(this));
+            }
+        };
+        this.checkboxChange = (e) => {
+            this.checked = e.detail;
+            this.partial = false;
+            forEach(this.el.parentElement.querySelectorAll(TABLE_TAG.ROW), (row) => {
+                if (!row.hasAttribute('disabled')) {
+                    setAttr(row, 'checked', this.checked);
+                }
+            });
+        };
+    }
+    render() {
+        return (h(Host, { key: 'caee6dd4e34bd546e779da904c2ade00aca65541', role: "row", cols: this.cols }, h("div", { key: '780da58526356bb241e1af14aee3be693076f8c9', class: "left-container" }, this.selectionName !== undefined && (h("xv-checkbox-v2", { key: 'a91c0b981008fb4808af1dda2d6adf6a6aa9fb53', partial: this.partial, name: this.selectionName, checked: this.checked, onEventChange: this.checkboxChange }))), h("slot", { key: '8e49ed42174d8a393624b8393485a951910713df', onSlotchange: this.slotChangeHandle })));
+    }
+    disconnectedCallback() {
+        this.el.removeEventListener('sortColChange', this.sortChangeHandle.bind(this));
+    }
+    static get is() { return "xv-table-v2-header-row"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xv-table-header-row.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xv-table-header-row.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "sortable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Is sort enabled"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "sortable",
+                "reflect": true
+            },
+            "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
+            },
+            "partial": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Checkbox row selected partially"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "partial",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "checked": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Checkbox row checked"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "checked",
+                "reflect": true,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "cols": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "sortChange",
+                "name": "sortChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "TableSortData",
+                    "resolved": "TableSortData",
+                    "references": {
+                        "TableSortData": {
+                            "location": "import",
+                            "path": "../defs",
+                            "id": "src/components/xv-table/defs.ts::TableSortData"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=xv-table-header-row.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"xv-table-header-row.js","sourceRoot":"","sources":["../../../../src/components/xv-table/xv-table-header-row/xv-table-header-row.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Element, Prop, State, Event, EventEmitter } from '@stencil/core';\nimport { TABLE_TAG, TableSortData } from '../defs';\nimport { forEach, setAttr } from '../../../utils/utils';\n\n@Component({\n  tag: 'xv-table-v2-header-row',\n  styleUrl: 'xv-table-header-row.scss',\n  shadow: true,\n})\nexport class XvTableHeaderRow {\n  @Element() el: HTMLElement;\n  /**\n   * Is sort enabled\n   */\n  @Prop({ reflect: true }) sortable?: boolean;\n  /**\n   * Checkbox row name\n   */\n  @Prop({ reflect: true, attribute: 'selection-name' }) selectionName?: string;\n  /**\n   * Checkbox row selected partially\n   */\n  @Prop({ reflect: true, mutable: true }) partial: boolean = false;\n  /**\n   * Checkbox row checked\n   */\n  @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n\n  @State() cols: number = 1;\n\n  @Event() sortChange: EventEmitter<TableSortData>;\n\n  private sortChangeHandle = ({ detail, target }: CustomEvent<TableSortData>) => {\n    // Reset prev selected sort\n    forEach(this.el.children, (col) => {\n      if (col !== target && col.hasAttribute('sort')) {\n        col.setAttribute('sort', 'none');\n      }\n    });\n    this.sortChange.emit(detail);\n  };\n\n  private slotChangeHandle = () => {\n    this.cols = this.el.childElementCount;\n    if (this.sortable) {\n      this.el.removeEventListener('sortColChange', this.sortChangeHandle.bind(this));\n      this.el.addEventListener('sortColChange', this.sortChangeHandle.bind(this));\n    }\n  }\n\n  private checkboxChange = (e: CustomEvent<boolean>) => {\n    this.checked = e.detail;\n    this.partial = false;\n\n    forEach(\n      this.el.parentElement.querySelectorAll(TABLE_TAG.ROW),\n      (row) => {\n        if (!row.hasAttribute('disabled')) {\n          setAttr(row, 'checked', this.checked);\n        }\n      },\n    );\n  }\n\n  render() {\n    return (\n      <Host role=\"row\" cols={this.cols}>\n        <div class=\"left-container\">\n          {this.selectionName !== undefined && (\n            <xv-checkbox-v2\n              partial={this.partial}\n              name={this.selectionName}\n              checked={this.checked}\n              onEventChange={this.checkboxChange}\n            />\n          )}\n        </div>\n        <slot onSlotchange={this.slotChangeHandle}></slot>\n      </Host>\n    );\n  }\n\n  disconnectedCallback() {\n    this.el.removeEventListener('sortColChange', this.sortChangeHandle.bind(this));\n  }\n}\n"]}

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

@@ -0,0 +1,46 @@
+:host(xv-table-v2-row) {
+  display: grid;
+  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-color: var(--xv-table-row-bg-color);
+  box-shadow: 0 0 0 1px #E3E3E3 inset;
+  padding-top: var(--xv-table-padding, 16px);
+  padding-bottom: var(--xv-table-padding, 16px);
+  grid-template-columns: var(--xv-table-first-col-size, 0) repeat(var(--xv-table-cols, 1), 1fr);
+}
+: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 var(--icon-primary, #131313);
+  border-width: 0 1px 1px 0;
+  padding: 3px;
+  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 {
+  margin-top: 4px;
+  transform: rotate(225deg);
+}
+
+:host([disabled]) {
+  opacity: 0.4;
+  pointer-events: none;
+  cursor: not-allowed;
+}
+:host([disabled]) ::slotted(xv-table-v2-col) {
+  cursor: not-allowed;
+}

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

@@ -0,0 +1,275 @@
+import { Host, h } from "@stencil/core";
+import { TABLE_TAG } from "../defs";
+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;
+        /**
+         * Disabled status
+         */
+        this.disabled = false;
+        this.cols = 1;
+        this.hovered = false;
+        this.checkboxChange = (e) => {
+            this.checked = e.detail;
+        };
+        this.onExpandHandle = async () => {
+            this.expanded = !this.expanded;
+            const parent = this.el.parentElement;
+            if (parent.tagName === TABLE_TAG.EXPAND) {
+                await (parent === null || parent === void 0 ? void 0 : parent.toggleExpand(this.expanded));
+            }
+        };
+    }
+    checkedChangeHandle() {
+        const changeData = {
+            name: this.selectionName,
+            value: this.value,
+            checked: this.checked,
+        };
+        if (this.expandable || this.groupId) {
+            changeData.group = { id: this.groupId, isMainRow: !!this.expandable };
+        }
+        if (changeData.group) {
+            this.checkedGroupChange.emit(changeData);
+        }
+        else {
+            this.checkedChange.emit(changeData);
+        }
+    }
+    async componentWillLoad() {
+        this.id = this.el.id;
+        this.cols = this.el.childElementCount;
+        // TODO: with initial checked values
+        this.checked && this.checkedChangeHandle();
+    }
+    render() {
+        return (h(Host, { key: '0ecaf319abeb4d74f304ce9c87c150d0aafb61f8', role: "row", cols: this.cols }, h("div", { key: '4e5737a8bbb29863419a2eb91cb197fbe5e55d82', class: "left-container" }, this.expandable && (h("button", { key: '66298e7b69b89720a08160d0c922d04edef792c1', onClick: this.onExpandHandle, class: `expand-btn ${this.expanded ? 'expanded' : ''}` })), this.selectionName && (h("xv-checkbox-v2", { key: '4c01f35c763a00cb5f60330307a0be2ab6321db6', disabled: this.disabled, name: this.selectionName, value: this.value, checked: !!(this.checked || this.partial), partial: this.partial, onEventChange: this.checkboxChange }))), h("slot", { key: 'd559c89935cc9de78b712e238a1a08c537b67a5d' })));
+    }
+    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": false,
+                "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": true,
+                "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"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disabled status"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "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
+            },
+            "partial": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Checkbox row with minus icon"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "partial",
+                "reflect": true
+            },
+            "groupId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "group-id",
+                "reflect": true
+            }
+        };
+    }
+    static get states() {
+        return {
+            "id": {},
+            "cols": {},
+            "hovered": {}
+        };
+    }
+    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": {}
+                }
+            }, {
+                "method": "checkedGroupChange",
+                "name": "checkedGroupChange",
+                "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 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, State, Event, EventEmitter, Watch } from '@stencil/core';\nimport { XvTableExpand } from '../xv-table-expand/xv-table-expand';\nimport { TABLE_TAG, TableSelectionEventData } from '../defs';\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({ reflect: true }) expandable: boolean = false;\n  /**\n   * Default state of expandable\n   */\n  @Prop({ reflect: true, mutable: true }) expanded: boolean = false;\n  /**\n   * Disabled status\n   */\n  @Prop({ reflect: true }) disabled: 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   * Checkbox row with minus icon\n   */\n  @Prop({ reflect: true  }) partial?: boolean;\n  @Prop({ reflect: true, attribute: 'group-id'  }) groupId?: string;\n\n  @State() id?: string;\n  @State() cols: number = 1;\n  @State() hovered: boolean = false;\n\n  @Event() checkedChange: EventEmitter<{ name: string, value?: string; checked: boolean }>;\n  @Event() checkedGroupChange: EventEmitter<{ name: string, value?: string; checked: boolean }>;\n\n  @Watch('checked')\n  checkedChangeHandle() {\n    const changeData: TableSelectionEventData = {\n      name: this.selectionName,\n      value: this.value,\n      checked: this.checked,\n    };\n\n    if (this.expandable || this.groupId) {\n      changeData.group = { id: this.groupId, isMainRow: !!this.expandable };\n    }\n\n    if (changeData.group) {\n      this.checkedGroupChange.emit(changeData);\n    } else {\n      this.checkedChange.emit(changeData);\n    }\n  }\n\n  private checkboxChange = (e: CustomEvent<boolean>) => {\n    this.checked = e.detail;\n  }\n\n  private onExpandHandle = async () => {\n    this.expanded = !this.expanded;\n    const parent = this.el.parentElement;\n\n    if (parent.tagName === TABLE_TAG.EXPAND) {\n      await (parent as unknown as XvTableExpand)?.toggleExpand(this.expanded);\n    }\n  };\n\n  async componentWillLoad(){\n    this.id = this.el.id;\n    this.cols = this.el.childElementCount;\n    // TODO: with initial checked values\n    this.checked && this.checkedChangeHandle();\n  }\n\n  render() {\n    return (\n      <Host\n        role=\"row\"\n        cols={this.cols}\n      >\n        <div class=\"left-container\">\n          {this.expandable && (\n            <button\n              onClick={this.onExpandHandle}\n              class={`expand-btn ${this.expanded ? 'expanded' : ''}`}\n            />\n          )}\n          {this.selectionName && (\n            <xv-checkbox-v2\n              disabled={this.disabled}\n              name={this.selectionName}\n              value={this.value}\n              checked={!!(this.checked || this.partial)}\n              partial={this.partial}\n              onEventChange={this.checkboxChange}\n            />\n          )}\n        </div>\n        <slot />\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,47 @@
+:host {
+  display: block;
+  font-family: var(--ff-body, Tahoma);
+  font-size: var(--fz-md, 14px);
+  font-style: normal;
+  font-weight: 700;
+  line-height: 128.571%;
+  letter-spacing: 0.16px;
+}
+:host .toolbar {
+  transition: max-height 0.2s ease;
+  overflow: hidden;
+  max-height: 96px;
+  margin-bottom: 8px;
+}
+:host .butch-editing {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  border-radius: 3px;
+  column-gap: var(--gap-md, 16px);
+  background-color: var(--interactive-01, #273435);
+  color: var(--text-on-color, var(--Text-text-on-color, #FFF));
+  transition: max-height 0.2s ease;
+  overflow: hidden;
+  max-height: 0;
+}
+:host .butch-editing_content {
+  flex: 1;
+  padding: var(--gap-md, 16px) 0 var(--gap-md, 16px) var(--gap-md, 16px);
+}
+:host .butch-editing_selected {
+  padding: var(--gap-md, 16px) var(--gap-md, 16px) var(--gap-md, 16px) 0;
+  align-self: center;
+  text-align: right;
+  min-width: 117px;
+}
+
+:host(.active) .toolbar {
+  max-height: 0;
+  margin-bottom: 0;
+}
+:host(.active) .butch-editing {
+  max-height: 96px;
+}