xv-webcomponents 0.1.29 → 0.1.31

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

@@ -1,80 +0,0 @@
-@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

@@ -1,172 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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-toolbar/xv-table-toolbar.css

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

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

@@ -1,78 +0,0 @@
-import { Host, h } from "@stencil/core";
-export class XvTableToolbar {
-    constructor() {
-        this.selected = 0;
-    }
-    async setSelectedItems(selected) {
-        let count = 0;
-        selected.forEach(row => {
-            var _a, _b, _c;
-            // not count header
-            if (row.name === 'header')
-                return;
-            // count row if it's not group
-            if (!((_a = row.group) === null || _a === void 0 ? void 0 : _a.isMainRow)) {
-                count++;
-                return;
-            }
-            // count selected group rows
-            count += (((_c = (_b = row.group) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.length) || 0);
-        });
-        this.selected = count;
-    }
-    render() {
-        return (h(Host, { key: 'ff7f4169161d758dc2d9ecac906fe8f80e1aa0cc', class: { active: !!this.selected } }, h("div", { key: '687aacbb14767fc360a5ebd77333e5cc7d4991e2', class: "toolbar" }, h("slot", { key: '4eb52c981bd1193fb0c4f5c9b2f541329fafe010' })), h("div", { key: 'eb51c8c6d54629623fbf52d930b230067d2199de', class: "butch-editing" }, h("div", { key: '68fea62d37eb5b82ff3536a7bc2117c1d3b40ac7', class: "butch-editing_content" }, h("slot", { key: '513837fd458c511472704e11313345882845e33e', name: "actions" })), h("div", { key: '4e81903ecd38b1c84cede6c0ab64725b47d19dd6', class: "butch-editing_selected" }, this.selected, " ", this.selected === 1 ? 'Position ausgewählt' : 'Positionen ausgewählt'))));
-    }
-    static get is() { return "xv-table-v2-toolbar"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["xv-table-toolbar.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["xv-table-toolbar.css"]
-        };
-    }
-    static get states() {
-        return {
-            "selected": {}
-        };
-    }
-    static get methods() {
-        return {
-            "setSelectedItems": {
-                "complexType": {
-                    "signature": "(selected: Map<string, TableSelectionEventData>) => Promise<void>",
-                    "parameters": [{
-                            "name": "selected",
-                            "type": "Map<string, TableSelectionEventData>",
-                            "docs": ""
-                        }],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        },
-                        "Map": {
-                            "location": "global",
-                            "id": "global::Map"
-                        },
-                        "TableSelectionEventData": {
-                            "location": "import",
-                            "path": "../defs",
-                            "id": "src/components/xv-table/defs.ts::TableSelectionEventData"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "",
-                    "tags": []
-                }
-            }
-        };
-    }
-}
-//# sourceMappingURL=xv-table-toolbar.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"xv-table-toolbar.js","sourceRoot":"","sources":["../../../../src/components/xv-table/xv-table-toolbar/xv-table-toolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAQlE,MAAM,OAAO,cAAc;IAL3B;QAMW,aAAQ,GAAW,CAAC,CAAC;KAqC/B;IAlCC,KAAK,CAAC,gBAAgB,CAAC,QAA8C;QACnE,IAAI,KAAK,GAAG,CAAC,CAAC;QAEd,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;;YACrB,mBAAmB;YACnB,IAAI,GAAG,CAAC,IAAI,KAAK,QAAQ;gBAAE,OAAO;YAElC,8BAA8B;YAC9B,IAAI,CAAC,CAAA,MAAA,GAAG,CAAC,KAAK,0CAAE,SAAS,CAAA,EAAE,CAAC;gBAC1B,KAAK,EAAE,CAAC;gBACR,OAAO;YACT,CAAC;YAED,4BAA4B;YAC5B,KAAK,IAAI,CAAC,CAAA,MAAA,MAAA,GAAG,CAAC,KAAK,0CAAE,IAAI,0CAAE,MAAM,KAAI,CAAC,CAAC,CAAC;QAC1C,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;IACxB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE;YACtC,4DAAK,KAAK,EAAC,SAAS;gBAAC,8DAAQ,CAAM;YAEnC,4DAAK,KAAK,EAAC,eAAe;gBACxB,4DAAK,KAAK,EAAC,uBAAuB;oBAAC,6DAAM,IAAI,EAAC,SAAS,GAAG,CAAM;gBAChE,4DAAK,KAAK,EAAC,wBAAwB;oBAChC,IAAI,CAAC,QAAQ;;oBAAG,IAAI,CAAC,QAAQ,KAAK,CAAC,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,uBAAuB,CAClF,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, State, Method } from '@stencil/core';\nimport { TableSelectionEventData } from '../defs';\n\n@Component({\n  tag: 'xv-table-v2-toolbar',\n  styleUrl: 'xv-table-toolbar.scss',\n  shadow: true,\n})\nexport class XvTableToolbar {\n  @State() selected: number = 0;\n\n  @Method()\n  async setSelectedItems(selected: Map<string, TableSelectionEventData>) {\n    let count = 0;\n\n    selected.forEach(row => {\n      // not count header\n      if (row.name === 'header') return;\n\n      // count row if it's not group\n      if (!row.group?.isMainRow) {\n        count++;\n        return;\n      }\n\n      // count selected group rows\n      count += (row.group?.data?.length || 0);\n    });\n\n    this.selected = count;\n  }\n\n  render() {\n    return (\n      <Host class={{ active: !!this.selected }}>\n        <div class=\"toolbar\"><slot /></div>\n\n        <div class=\"butch-editing\">\n          <div class=\"butch-editing_content\"><slot name=\"actions\" /></div>\n          <div class=\"butch-editing_selected\">\n            {this.selected} {this.selected === 1 ? 'Position ausgewählt' : 'Positionen ausgewählt'}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}