@sellmate/design-system 1.0.62 → 1.0.63

package/dist/collection/components/sd-table/sd-thead/sd-thead.js

@@ -0,0 +1,442 @@
+import { h, Host } from "@stencil/core";
+import { TABLE_ID_ATTR, } from "../constants";
+export class SdThead {
+    el;
+    columns;
+    selectable;
+    resizable;
+    stickyColumn;
+    stickyHeader;
+    scrolledLeft;
+    scrolledRight;
+    rows = [];
+    columnWidths = [];
+    tableId = '';
+    _columns = [];
+    _selectable = false;
+    _resizable = false;
+    _stickyColumn = { left: 0, right: 0 };
+    _stickyHeader = false;
+    _scrolledLeft = false;
+    _scrolledRight = false;
+    tableEl = null;
+    handleColumnsChange(newCols) {
+        if (Array.isArray(newCols) && (this.columnWidths ?? []).length === 0) {
+            this.columnWidths = newCols.map(c => parseInt(c.width || '120', 10));
+        }
+    }
+    componentWillLoad() {
+        this.syncTableContext();
+        this.columnWidths = Array.isArray(this.columnWidths) ? this.columnWidths : [];
+        this.resolveConfig();
+        if ((this.columnWidths ?? []).length === 0) {
+            this.columnWidths = this._columns.map(c => parseInt(c.width || '120', 10));
+        }
+    }
+    componentDidLoad() {
+        this.syncTableContext();
+        this.resolveConfig();
+    }
+    syncTableContext() {
+        const table = this.el.closest('sd-table');
+        this.tableEl = table;
+        const fromMethod = table?.getTableIdSync?.();
+        const fromAttr = table?.getAttribute(TABLE_ID_ATTR);
+        const resolvedTableId = (fromMethod && fromMethod !== 'undefined' ? fromMethod : null) ??
+            (fromAttr && fromAttr !== 'undefined' ? fromAttr : null) ??
+            '';
+        if (resolvedTableId && resolvedTableId !== this.tableId) {
+            this.tableId = resolvedTableId;
+        }
+    }
+    resolveConfig() {
+        const config = this.tableEl?.getConfigSync?.();
+        const resolvedColumns = Array.isArray(this.columns)
+            ? this.columns
+            : Array.isArray(config?.columns)
+                ? config.columns
+                : [];
+        this._columns = resolvedColumns;
+        this._selectable = this.selectable ?? config?.selectable ?? false;
+        this._resizable = this.resizable ?? config?.resizable ?? false;
+        this._stickyColumn = this.stickyColumn ?? config?.stickyColumn ?? { left: 0, right: 0 };
+        this._stickyHeader = this.stickyHeader ?? config?.stickyHeader ?? false;
+        this._scrolledLeft = this.scrolledLeft ?? config?.scrolledLeft ?? false;
+        this._scrolledRight = this.scrolledRight ?? config?.scrolledRight ?? false;
+        if (Array.isArray(config?.columnWidths) && (this.columnWidths ?? []).length === 0) {
+            this.columnWidths = [...config.columnWidths];
+        }
+        if (!Array.isArray(this.columnWidths)) {
+            this.columnWidths = [];
+        }
+    }
+    async refreshConfig() {
+        this.resolveConfig();
+    }
+    async setColumnWidths(widths) {
+        this.columnWidths = Array.isArray(widths) ? widths : [];
+    }
+    async refreshSelection() {
+        const checkbox = this.el.querySelector('sd-checkbox');
+        if (checkbox) {
+            checkbox.value = this.getIsAllChecked();
+        }
+    }
+    get visibleColumns() {
+        return this._columns.filter(col => col.visible !== false);
+    }
+    getStickyStyle(colIdx) {
+        if (this.tableEl?.getStickyStyleSync) {
+            return this.tableEl.getStickyStyleSync(colIdx);
+        }
+        const leftOffset = this.columnWidths.slice(0, colIdx).reduce((a, b) => a + b, 0) + (this._selectable ? 52 : 0);
+        const rightOffset = this.columnWidths
+            .filter((_, i) => i >= this.visibleColumns.length - (this._stickyColumn.right || 0) && i > colIdx)
+            .reduce((a, b) => a + b, 0);
+        return {
+            '--sticky-left-offset': `${leftOffset}px`,
+            '--sticky-right-offset': `${rightOffset}px`,
+            'width': `${this.columnWidths[colIdx]}px`,
+            'minWidth': `${this.columnWidths[colIdx]}px`,
+            'maxWidth': `${this.columnWidths[colIdx]}px`,
+        };
+    }
+    handleResize(index, event, reversed = false) {
+        if (this.tableEl?.handleResize) {
+            this.tableEl.handleResize(index, event, reversed);
+        }
+    }
+    handleSelectAll(checked) {
+        const currentState = this.getIsAllChecked();
+        const nextChecked = currentState === null ? false : !!checked;
+        const safeRows = Array.isArray(this.rows) ? this.rows : [];
+        if (this.tableEl?.toggleSelectAllSync) {
+            this.tableEl.toggleSelectAllSync(nextChecked, safeRows);
+        }
+    }
+    getIsAllChecked() {
+        const safeRows = Array.isArray(this.rows) ? this.rows : [];
+        if (this.tableEl?.getIsAllCheckedSync && safeRows.length > 0) {
+            return this.tableEl.getIsAllCheckedSync(safeRows);
+        }
+        return false;
+    }
+    render() {
+        const safeRows = Array.isArray(this.rows) ? this.rows : [];
+        const stickyLeftCount = this._stickyColumn.left || 0;
+        const stickyRightCount = this._stickyColumn.right || 0;
+        const stickyLeftCols = this.visibleColumns.slice(0, stickyLeftCount);
+        const middleCols = this.visibleColumns.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount);
+        const stickyRightCols = this.visibleColumns.slice(this.visibleColumns.length - stickyRightCount);
+        return (h(Host, { key: '5ccdb84a8876df2af0d73424be3f5a7fdb1979a5', slot: `${this.tableId}-head` }, h("thead", { key: '6517b6f3baf56173f27b8194de7bd1de625ea304', class: {
+                'thead': true,
+                'thead--sticky': this._stickyHeader,
+            } }, h("tr", { key: '8a9c268a3195376a8c9986411b29724896ff36d8', class: "tr" }, this._selectable && (h("th", { key: 'f0fae86684bbef173019ddb1dd23a5f57956fb04', class: {
+                'th': true,
+                'th--selected': true,
+                'sticky-left': true,
+                'sticky-left-edge': stickyLeftCount === 0,
+                'is-scrolled-left': stickyLeftCount === 0 && this._scrolledLeft,
+            }, style: { '--sticky-left-offset': '0px' } }, h("sd-checkbox", { key: 'cde120ec02f8bf03fa869eadbc0d91b4fde8e1ba', value: this.getIsAllChecked(), disabled: !safeRows.length, onSdUpdate: (e) => this.handleSelectAll(e.detail) }))), stickyLeftCols.map((col, idx) => (h("th", { key: col.name, class: {
+                'th': true,
+                [`${col.thClass}`]: Boolean(col.thClass),
+                'sticky-left': true,
+                'sticky-left-edge': idx === stickyLeftCount - 1,
+                'is-scrolled-left': idx === stickyLeftCount - 1 && this._scrolledLeft,
+            }, style: { ...col.thStyle, ...this.getStickyStyle(idx) } }, h("div", { class: `th__content th__content--${col.align || 'left'}` }, h("div", { class: "th__content--label" }, col.label), col.usePageMoveIcon && h("sd-icon", { name: "pageMove", size: "12", color: "#006AC1" }), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text))))))), this._resizable && (h("div", { class: "th__resizer", onMouseDown: (evt) => this.handleResize(idx, evt) }))))), middleCols.map((col, relativeIdx) => {
+            const actualColIdx = stickyLeftCount + relativeIdx;
+            return (h("th", { key: col.name, class: {
+                    th: true,
+                    [`${col.thClass}`]: Boolean(col.thClass),
+                }, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) } }, h("div", { class: `th__content th__content--${col.align || 'left'}` }, h("div", { class: "th__content--label" }, col.label), col.usePageMoveIcon && h("sd-icon", { name: "pageMove", size: "12", color: "#006AC1" }), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text))))))), this._resizable && (h("div", { class: "th__resizer", onMouseDown: (evt) => this.handleResize(actualColIdx, evt) }))));
+        }), stickyRightCols.map((col, relativeIdx) => {
+            const actualColIdx = this.visibleColumns.length - stickyRightCount + relativeIdx;
+            return (h("th", { key: col.name, class: {
+                    'th': true,
+                    [`${col.thClass}`]: Boolean(col.thClass),
+                    'sticky-right': true,
+                    'sticky-right-edge': relativeIdx === 0,
+                    'is-scrolled-right': relativeIdx === 0 && this._scrolledRight,
+                }, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) } }, h("div", { class: `th__content th__content--${col.align || 'left'}` }, h("div", { class: "th__content--label" }, col.label), col.usePageMoveIcon && h("sd-icon", { name: "pageMove", size: "12", color: "#006AC1" }), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text))))))), this._resizable && (h("div", { class: "th__resizer th__resizer--left", onMouseDown: (evt) => this.handleResize(actualColIdx, evt, true) }))));
+        })))));
+    }
+    static get is() { return "sd-thead"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sd-thead.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sd-thead.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "columns": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "SdTableColumn[]",
+                    "resolved": "SdTableColumn[] | undefined",
+                    "references": {
+                        "SdTableColumn": {
+                            "location": "import",
+                            "path": "../constants",
+                            "id": "src/components/sd-table/constants.ts::SdTableColumn",
+                            "referenceLocation": "SdTableColumn"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "selectable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selectable"
+            },
+            "resizable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "resizable"
+            },
+            "stickyColumn": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "SdTableStickyColumn",
+                    "resolved": "SdTableStickyColumn | undefined",
+                    "references": {
+                        "SdTableStickyColumn": {
+                            "location": "import",
+                            "path": "../constants",
+                            "id": "src/components/sd-table/constants.ts::SdTableStickyColumn",
+                            "referenceLocation": "SdTableStickyColumn"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "stickyHeader": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "sticky-header"
+            },
+            "scrolledLeft": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "scrolled-left"
+            },
+            "scrolledRight": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "scrolled-right"
+            },
+            "rows": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Row[]",
+                    "resolved": "Row[]",
+                    "references": {
+                        "Row": {
+                            "location": "import",
+                            "path": "../constants",
+                            "id": "src/components/sd-table/constants.ts::Row",
+                            "referenceLocation": "Row"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "columnWidths": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "number[]",
+                    "resolved": "number[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "tableId": {},
+            "_columns": {},
+            "_selectable": {},
+            "_resizable": {},
+            "_stickyColumn": {},
+            "_stickyHeader": {},
+            "_scrolledLeft": {},
+            "_scrolledRight": {}
+        };
+    }
+    static get methods() {
+        return {
+            "refreshConfig": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "setColumnWidths": {
+                "complexType": {
+                    "signature": "(widths: number[]) => Promise<void>",
+                    "parameters": [{
+                            "name": "widths",
+                            "type": "number[]",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "refreshSelection": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "columns",
+                "methodName": "handleColumnsChange"
+            }];
+    }
+}

package/dist/collection/components/sd-table/sd-tr/sd-tr.css

@@ -0,0 +1,111 @@
+sd-tr {
+  display: contents;
+}
+sd-tr * {
+  box-sizing: border-box;
+}
+
+.tr {
+  display: table-row;
+}
+.tr:hover .td {
+  background-color: #F9F9F9;
+}
+
+.td {
+  display: table-cell;
+  height: 44px;
+  padding: 0 16px;
+  border-bottom: 1px solid #E1E1E1;
+  background: white;
+  vertical-align: middle;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  word-break: keep-all;
+}
+.td--left {
+  text-align: left;
+}
+.td--center {
+  text-align: center;
+}
+.td--right {
+  text-align: right;
+}
+.td--selected {
+  position: relative;
+  width: 52px !important;
+  max-width: 52px !important;
+  min-width: 52px !important;
+  padding: 0 10px 0 24px;
+  text-align: left;
+}
+.td--selected sd-checkbox label {
+  position: relative;
+}
+.td--selected sd-checkbox label:before {
+  content: "";
+  position: absolute;
+  inset: -6px;
+}
+.td.sticky-left {
+  position: sticky;
+  background-color: white;
+  z-index: 100 !important;
+  left: var(--sticky-left-offset, 0);
+}
+.td.sticky-right {
+  position: sticky;
+  background-color: white;
+  z-index: 100 !important;
+  right: var(--sticky-right-offset, 0);
+}
+.td.sticky-left-edge:after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 100%;
+  right: -20px;
+  width: 20px;
+  height: 100%;
+  z-index: 101 !important;
+  box-shadow: inset 12px 0 20px -25px;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s;
+}
+.td.sticky-right-edge:after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -20px;
+  width: 20px;
+  height: 100%;
+  z-index: 101 !important;
+  box-shadow: inset -12px 0 20px -25px;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s;
+}
+
+.td.sticky-left-edge.is-scrolled-left {
+  overflow: visible;
+}
+
+.td.sticky-left-edge.is-scrolled-left:after {
+  opacity: 1;
+}
+
+.td.sticky-right-edge.is-scrolled-right {
+  overflow: visible;
+}
+
+.td.sticky-right-edge.is-scrolled-right:after {
+  opacity: 1;
+}
+
+.tr:hover .td.sticky-left,
+.tr:hover .td.sticky-right {
+  background-color: #F9F9F9;
+}