@sellmate/design-system 0.0.11 → 0.0.13

package/dist/collection/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.js

@@ -0,0 +1,265 @@
+import { h, Host, } from "@stencil/core";
+export class SdSelectOptionGroup {
+    el;
+    option;
+    index;
+    isSelected = false;
+    isFocused = false;
+    optionStyle;
+    disabled = false;
+    useCheckbox = false;
+    isHovered = false;
+    async isDisabled() {
+        return !!this.option.disabled || this.option.type === 'group' || this.option.type === 'subgroup';
+    }
+    optionClick;
+    handleClick = (option, isSelected, event) => {
+        event.stopPropagation();
+        if (option.type === 'group' || option.type === 'subgroup') {
+            this.optionClick.emit({
+                option: this.option,
+                isSelected,
+                index: this.index,
+                event,
+            });
+            return;
+        }
+        if (!this.option.disabled && !this.disabled) {
+            this.optionClick.emit({
+                option: this.option,
+                isSelected,
+                index: this.index,
+                event,
+            });
+        }
+    };
+    render() {
+        return (h(Host, { key: '2c25ad33d49eefbfedae7e1b9ee4453131b53321' }, h("div", { key: '4f6ef860ca32e13bb8253d768f8bf70b4fd1fe91', class: {
+                'sd-select__option-group': true,
+                'sd-select__option-group--selected': !!this.isSelected,
+                'sd-select__option-group--disabled': !!this.option.disabled,
+                'sd-select__option-group--focused': this.isFocused,
+                'sd-select__option-group--use-checkbox': this.useCheckbox,
+                'sd-select__option-group--group': this.option.type === 'group',
+                'sd-select__option-group--subgroup': this.option.type === 'subgroup',
+                'sd-select__option-group--item': this.option.type === 'item',
+            }, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, this.useCheckbox ? (h("div", { class: "sd-select__option-group__checkbox-wrapper" }, h("sd-checkbox", { checked: this.isSelected, disabled: this.option.disabled, checkboxStyle: !this.isSelected
+                ? { borderColor: '#888' }
+                : this.isHovered
+                    ? { borderColor: 'white' }
+                    : { borderColor: '#0075ff' }, onClick: e => {
+                e.preventDefault();
+                this.handleClick(this.option, this.isSelected, e);
+            } }), h("span", { class: "sd-select__option-group-label" }, this.option.label))) : (this.option.label))));
+    }
+    static get is() { return "sd-select-option-group"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sd-select-option-group.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sd-select-option-group.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "option": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "SelectOptionGroup",
+                    "resolved": "SelectOptionGroup",
+                    "references": {
+                        "SelectOptionGroup": {
+                            "location": "import",
+                            "path": "../../sd-select/sd-select",
+                            "id": "src/components/sd-select/sd-select.tsx::SelectOptionGroup"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "index": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "index"
+            },
+            "isSelected": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean | null",
+                    "resolved": "boolean | null",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-selected",
+                "defaultValue": "false"
+            },
+            "isFocused": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-focused",
+                "defaultValue": "false"
+            },
+            "optionStyle": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "{ [key: string]: string }",
+                    "resolved": "undefined | { [key: string]: string; }",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "useCheckbox": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "use-checkbox",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isHovered": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "optionClick",
+                "name": "optionClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{\r\n  option: SelectOptionGroup;\r\n  isSelected: boolean | null;\r\n  index: number;\r\n  event: MouseEvent;\r\n }",
+                    "resolved": "{ option: SelectOptionGroup; isSelected: boolean | null; index: number; event: MouseEvent; }",
+                    "references": {
+                        "SelectOptionGroup": {
+                            "location": "import",
+                            "path": "../../sd-select/sd-select",
+                            "id": "src/components/sd-select/sd-select.tsx::SelectOptionGroup"
+                        },
+                        "MouseEvent": {
+                            "location": "global",
+                            "id": "global::MouseEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "isDisabled": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=sd-select-option-group.js.map

package/dist/collection/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sd-select-option-group.js","sourceRoot":"","sources":["../../../../src/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\r\n Component,\r\n Element,\r\n Event,\r\n EventEmitter,\r\n h,\r\n Host,\r\n Method,\r\n Prop,\r\n State,\r\n} from '@stencil/core';\r\nimport { SelectOptionGroup } from '../../sd-select/sd-select';\r\n\r\n@Component({\r\n tag: 'sd-select-option-group',\r\n styleUrl: 'sd-select-option-group.scss',\r\n})\r\nexport class SdSelectOptionGroup {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop() option!: SelectOptionGroup;\r\n @Prop() index!: number;\r\n @Prop() isSelected: boolean | null = false;\r\n @Prop() isFocused: boolean = false;\r\n @Prop() optionStyle?: { [key: string]: string };\r\n @Prop() disabled: boolean = false;\r\n @Prop() useCheckbox: boolean = false;\r\n\r\n @State() isHovered: boolean = false;\r\n\r\n @Method()\r\n async isDisabled(): Promise<boolean> {\r\n  return !!this.option.disabled || this.option.type === 'group' || this.option.type === 'subgroup';\r\n }\r\n\r\n @Event() optionClick!: EventEmitter<{\r\n  option: SelectOptionGroup;\r\n  isSelected: boolean | null;\r\n  index: number;\r\n  event: MouseEvent;\r\n }>;\r\n\r\n private handleClick = (\r\n  option: SelectOptionGroup,\r\n  isSelected: boolean | null,\r\n  event: MouseEvent,\r\n ) => {\r\n  event.stopPropagation();\r\n\r\n  if (option.type === 'group' || option.type === 'subgroup') {\r\n   this.optionClick.emit({\r\n    option: this.option,\r\n    isSelected,\r\n    index: this.index,\r\n    event,\r\n   });\r\n   return;\r\n  }\r\n\r\n  if (!this.option.disabled && !this.disabled) {\r\n   this.optionClick.emit({\r\n    option: this.option,\r\n    isSelected,\r\n    index: this.index,\r\n    event,\r\n   });\r\n  }\r\n };\r\n\r\n render() {\r\n  return (\r\n   <Host>\r\n    <div\r\n     class={{\r\n      'sd-select__option-group': true,\r\n      'sd-select__option-group--selected': !!this.isSelected,\r\n      'sd-select__option-group--disabled': !!this.option.disabled,\r\n      'sd-select__option-group--focused': this.isFocused,\r\n      'sd-select__option-group--use-checkbox': this.useCheckbox,\r\n      'sd-select__option-group--group': this.option.type === 'group',\r\n      'sd-select__option-group--subgroup': this.option.type === 'subgroup',\r\n      'sd-select__option-group--item': this.option.type === 'item',\r\n     }}\r\n     onMouseEnter={() => (this.isHovered = true)}\r\n     onMouseLeave={() => (this.isHovered = false)}\r\n     style={this.optionStyle}\r\n     data-index={this.index}\r\n     onClick={event => this.handleClick(this.option, this.isSelected, event)}\r\n    >\r\n     {this.useCheckbox ? (\r\n      <div class=\"sd-select__option-group__checkbox-wrapper\">\r\n       <sd-checkbox\r\n        checked={this.isSelected}\r\n        disabled={this.option.disabled}\r\n        checkboxStyle={\r\n         !this.isSelected\r\n          ? { borderColor: '#888' }\r\n          : this.isHovered\r\n            ? { borderColor: 'white' }\r\n            : { borderColor: '#0075ff' }\r\n        }\r\n        onClick={e => {\r\n         e.preventDefault();\r\n         this.handleClick(this.option, this.isSelected, e);\r\n        }}\r\n       ></sd-checkbox>\r\n       <span class=\"sd-select__option-group-label\">{this.option.label}</span>\r\n      </div>\r\n     ) : (\r\n      this.option.label\r\n     )}\r\n    </div>\r\n   </Host>\r\n  );\r\n }\r\n}\r\n"]}

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

@@ -1157,33 +1157,33 @@ button:focus {
   outline: 0 !important;
 }
 
-.sd-table__container .sd-table__middle {
+.sd-table__wrapper .sd-table__container .sd-table__middle {
   overflow-y: auto;
   overflow-x: hidden;
   scroll-behavior: smooth;
 }
-.sd-table__container .sd-table__middle::-webkit-scrollbar {
+.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar {
   opacity: 0;
   background: #e5e5e5;
 }
-.sd-table__container .sd-table__middle::-webkit-scrollbar:horizontal {
+.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar:horizontal {
   height: 8px;
 }
-.sd-table__container .sd-table__middle::-webkit-scrollbar:vertical {
+.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar:vertical {
   width: 8px;
 }
-.sd-table__container .sd-table__middle::-webkit-scrollbar-thumb {
+.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar-thumb {
   height: 80px;
   background-color: #cccccc;
   border-radius: 4px;
 }
-.sd-table__container .sd-table__middle::-webkit-scrollbar-thumb:hover {
+.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar-thumb:hover {
   background: #e5e5e5;
 }
-.sd-table__container .sd-table__middle::-webkit-scrollbar-thumb:active {
+.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar-thumb:active {
   background: #e5e5e5;
 }
-.sd-table__container .sd-table__middle::-webkit-scrollbar-track {
+.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar-track {
   background-color: transparent;
 }
 
@@ -1389,71 +1389,76 @@ textarea {
   cursor: pointer;
 }
 
-.sd-table__container {
+.sd-table__wrapper {
+  height: var(--table-height, auto);
+  width: var(--table-width, 100%);
+}
+.sd-table__wrapper .sd-table__container {
   width: 100%;
+  height: auto;
   border: 1px solid #e1e1e1;
   border-radius: 8px;
   font-size: 12px;
   overflow: hidden;
 }
-.sd-table__container .sd-table__middle {
+.sd-table__wrapper .sd-table__container .sd-table__middle {
   overflow: auto;
   will-change: scroll-position;
   height: var(--table-height, auto);
 }
-.sd-table__container .sd-table__middle .sd-table {
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table {
   width: 100%;
   border-collapse: separate;
   border-spacing: 0;
   table-layout: fixed;
 }
-.sd-table__container .sd-table__middle .sd-table--selectable td.sd-td--selected,
-.sd-table__container .sd-table__middle .sd-table--selectable th.sd-th--selected {
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable td.sd-td--selected,
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable th.sd-th--selected {
   width: 52px !important;
   max-width: 52px !important;
   min-width: 52px !important;
   padding: 0 10px 0 24px;
   text-align: left;
 }
-.sd-table__container .sd-table__middle .sd-table--sticky-header thead {
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-header thead {
   position: sticky;
   top: 0;
-  z-index: 2;
+  z-index: 120;
 }
-.sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-left,
-.sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-right {
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-left,
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-right {
   position: sticky;
   background-color: #f5faff;
-  z-index: 200 !important;
+  z-index: 110 !important;
 }
-.sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-left,
-.sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-right {
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-left,
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-right {
   position: sticky;
   background-color: white;
   z-index: 100 !important;
 }
-.sd-table__container .sd-table__middle .sd-table--sticky-column .sticky-left {
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column .sticky-left {
   left: var(--sticky-left-offset, 0);
 }
-.sd-table__container .sd-table__middle .sd-table--sticky-column .sticky-right {
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column .sticky-right {
   right: var(--sticky-right-offset, 0);
 }
-.sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-cell {
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-cell {
   position: sticky;
   z-index: 102;
   background-color: #f5faff;
 }
-.sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-cell {
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-cell {
   position: sticky;
   z-index: 101;
   background-color: white;
 }
-.sd-table__container .sd-table__middle .sd-table--scrolled-left th.sticky-left-edge,
-.sd-table__container .sd-table__middle .sd-table--scrolled-left td.sticky-left-edge {
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left th.sticky-left-edge,
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left td.sticky-left-edge {
   overflow: visible;
 }
-.sd-table__container .sd-table__middle .sd-table--scrolled-left th.sticky-left-edge:after,
-.sd-table__container .sd-table__middle .sd-table--scrolled-left td.sticky-left-edge:after {
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left th.sticky-left-edge:after,
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left td.sticky-left-edge:after {
   content: "";
   position: absolute;
   top: 0;
@@ -1466,12 +1471,12 @@ textarea {
   opacity: 1;
   pointer-events: none;
 }
-.sd-table__container .sd-table__middle .sd-table--scrolled-right th.sticky-right-edge,
-.sd-table__container .sd-table__middle .sd-table--scrolled-right td.sticky-right-edge {
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right th.sticky-right-edge,
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right td.sticky-right-edge {
   overflow: visible;
 }
-.sd-table__container .sd-table__middle .sd-table--scrolled-right th.sticky-right-edge:after,
-.sd-table__container .sd-table__middle .sd-table--scrolled-right td.sticky-right-edge:after {
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right th.sticky-right-edge:after,
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right td.sticky-right-edge:after {
   content: "";
   position: absolute;
   top: 0;
@@ -1483,27 +1488,27 @@ textarea {
   opacity: 1;
   pointer-events: none;
 }
-.sd-table__container .sd-table__middle .sd-table--no-data thead {
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--no-data thead {
   opacity: 0.4;
 }
-.sd-table__container .sd-table__middle .sd-table--no-data thead tr th.sd-th {
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--no-data thead tr th.sd-th {
   border-bottom: 1px solid rgba(225, 225, 225, 0.4) !important;
 }
-.sd-table__container .sd-table__middle .sd-table td,
-.sd-table__container .sd-table__middle .sd-table th,
-.sd-table__container .sd-table__middle .sd-table .sd-th__content--label {
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table td,
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table th,
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table .sd-th__content--label {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   word-break: keep-all;
 }
-.sd-table__container .sd-table__middle .sd-table thead {
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead {
   height: 36px;
 }
-.sd-table__container .sd-table__middle .sd-table thead tr {
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr {
   width: 100%;
 }
-.sd-table__container .sd-table__middle .sd-table thead tr th {
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th {
   background: #f5faff;
   height: 36px;
   padding: 0 16px;
@@ -1514,22 +1519,22 @@ textarea {
   user-select: none;
   position: relative;
 }
-.sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content {
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content {
   display: flex;
   flex-flow: row nowrap;
   align-items: center;
   gap: 4px;
 }
-.sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--left {
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--left {
   justify-content: flex-start;
 }
-.sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--center {
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--center {
   justify-content: center;
 }
-.sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--right {
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--right {
   justify-content: flex-end;
 }
-.sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__resizer {
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__resizer {
   position: absolute;
   top: 50%;
   right: 0;
@@ -1541,31 +1546,30 @@ textarea {
   border-left: 1px solid #cccccc;
   border-right: 1px solid #cccccc;
 }
-.sd-table__container .sd-table__middle .sd-table tbody tr:last-of-type td {
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr:last-of-type td {
   border-bottom: none;
 }
-.sd-table__container .sd-table__middle .sd-table tbody tr td {
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td {
   height: 44px;
   padding: 0 16px;
   border-bottom: 1px solid #e1e1e1;
   background: white;
   vertical-align: middle;
 }
-.sd-table__container .sd-table__middle .sd-table tbody tr td.sd-td--left {
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td.sd-td--left {
   text-align: left;
 }
-.sd-table__container .sd-table__middle .sd-table tbody tr td.sd-td--center {
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td.sd-td--center {
   text-align: center;
 }
-.sd-table__container .sd-table__middle .sd-table tbody tr td.sd-td--right {
+.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td.sd-td--right {
   text-align: right;
 }
-.sd-table__container .sd-table__bottom {
+.sd-table__wrapper .sd-table__container .sd-table__bottom {
   background: white;
   text-align: center;
 }
-
-.sd-table__pagination {
+.sd-table__wrapper .sd-table__pagination {
   background: #f9f9f9;
   height: 48px;
   display: flex;

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

@@ -7,6 +7,7 @@ export class SdTable {
     rowKey = 'id';
     selectable = false;
     resizable = false;
+    width;
     height;
     stickyHeader = false;
     stickyColumn = { left: 0, right: 0 };
@@ -152,10 +153,12 @@ export class SdTable {
     }
     // ----- Render -----
     renderHeader() {
-        return (h("thead", null, h("tr", null, this.selectable && (h("th", { class: "sd-th sd-th--selected", style: {
-                width: '52px',
-                minWidth: '52px',
-                maxWidth: '52px',
+        return (h("thead", null, h("tr", null, this.selectable && (h("th", { class: {
+                'sd-th': true,
+                'sd-th--selected': true,
+                'sticky-left': Boolean(this.stickyColumn.left && this.stickyColumn.left > 0),
+            }, style: {
+                '--sticky-left-offset': '0px',
             } }, h("sd-checkbox", { checked: this.isAllChecked, disabled: !this.paginatedRows.length, onSdChange: (e) => this.toggleSelectAll(e.detail) }))), this.visibleColumns.map((col, colIdx) => (h("th", { key: col.name, class: {
                 'sd-th': true,
                 'sticky-left': Boolean(this.stickyColumn.left && colIdx < this.stickyColumn.left),
@@ -168,7 +171,13 @@ export class SdTable {
     renderBody() {
         if (!this.paginatedRows.length)
             return (h("tbody", { part: "tbody-empty" }, h("tr", null, h("td", { colSpan: this.visibleColumns.length + (this.selectable ? 1 : 0) }, this.noDataLabel))));
-        return (h("tbody", null, this.paginatedRows.map(row => (h("tr", { key: row[this.rowKey], class: "hover:bg-Grey_Lighten-6" }, this.selectable && (h("td", { class: "sd-td sd-td--selected" }, h("sd-checkbox", { checked: this.isRowSelected(row), disabled: !this.paginatedRows.length, onSdChange: () => this.updateRowSelect(row) }))), this.visibleColumns.map((column, colIdx) => {
+        return (h("tbody", null, this.paginatedRows.map(row => (h("tr", { key: row[this.rowKey], class: "hover:bg-Grey_Lighten-6" }, this.selectable && (h("td", { class: {
+                'sd-td': true,
+                'sd-td--selected': true,
+                'sticky-left': Boolean(this.stickyColumn.left && this.stickyColumn.left > 0),
+            }, style: {
+                '--sticky-left-offset': '0px',
+            } }, h("sd-checkbox", { checked: this.isRowSelected(row), disabled: !this.paginatedRows.length, onSdChange: () => this.updateRowSelect(row) }))), this.visibleColumns.map((column, colIdx) => {
             const rendered = this.bodyCellRenderer?.(column, row);
             return (h("td", { key: column.name, part: `td-${column.name}`, class: {
                     'sd-td': true,
@@ -183,15 +192,15 @@ export class SdTable {
         }))))));
     }
     render() {
-        return (h(Host, { key: 'd58d9ab7f1e975f2b9e47724aaacd7078e22e85c' }, h("div", { key: '9382c8e3fc992749caba5c8929c15041a2005b9a', class: "sd-table__container" }, h("div", { key: 'b8f68a68ccd3ec02933e0d9cb9ed3f8bc4895676', class: "sd-table__middle", style: {
-                '--table-height': this.height ? `${this.height}px` : 'auto',
-            } }, h("table", { key: 'fa4c9e54233da99c0f9468961244dd888df0c6cc', part: "table", class: this.sdTableClasses }, this.renderHeader(), this.renderBody())), h("div", { key: '3d2a5ff3d4f6862ed5a35436cf5f3de48e99efd8', class: "sd-table__bottom" })), this.pagination && this.innerRows.length > 0 && (h("div", { key: '6f666ee098cc6ac61a9aec4a192293fa3419383c', class: "sd-table__pagination" }, h("sd-pagination", { key: '4a7d04e547882219d199e6808e380b3413c5c75c', currentPage: this.currentPage, lastPage: this.lastPageNumber, onPageChange: (e) => {
+        return (h(Host, { key: '362b2d53c4a66aeac6abf8c024c32172f181a90d' }, h("div", { key: 'ed9a2d658030925f20af988d917e35a357bfa564', class: "sd-table__wrapper", style: {
+                '--table-width': this.width,
+                '--table-height': this.height,
+            } }, h("div", { key: 'd94b1b2b09e23ab27bce4f8328ccb3b3678d7ffb', class: "sd-table__container" }, h("div", { key: 'a68354221c4953b7b60ce66a072659e0b137451f', class: "sd-table__middle" }, h("table", { key: 'e2bbc397989777920bdb55bd02f6f4a60f7bfd17', part: "table", class: this.sdTableClasses }, this.renderHeader(), this.renderBody())), h("div", { key: '6d9176e65c7dfc8810ba08ae563aeb47ab366298', class: "sd-table__bottom" })), this.pagination && this.innerRows.length > 0 && (h("div", { key: '0bbf8ea1b355cb894b99fbc42b196493c97dd5f2', class: "sd-table__pagination" }, h("sd-pagination", { key: '2e5d02690a2276a4ba61652ae238b0ace453445b', currentPage: this.currentPage, lastPage: this.lastPageNumber, onPageChange: (e) => {
                 this.currentPage = e.detail;
                 this.sdPageChange.emit(this.currentPage);
-            } })))));
+            } }))))));
     }
     static get is() { return "sd-table"; }
-    static get encapsulation() { return "scoped"; }
     static get originalStyleUrls() {
         return {
             "$": ["sd-table.scss"]
@@ -340,12 +349,31 @@ export class SdTable {
                 "attribute": "resizable",
                 "defaultValue": "false"
             },
+            "width": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "width"
+            },
             "height": {
-                "type": "number",
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "number",
-                    "resolved": "number | undefined",
+                    "original": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,