@sellmate/design-system 0.0.43 → 0.0.44

package/dist/cjs/sd-table.cjs.entry.js

@@ -0,0 +1,242 @@
+'use strict';
+
+var index = require('./index-DXo1Fhkn.js');
+
+const sdTableCss = ".sd-table__wrapper .sd-table__container .sd-table__middle{overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar{opacity:0;background:#e5e5e5}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar:horizontal{height:8px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar:vertical{width:8px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar-thumb{height:80px;background-color:#cccccc;border-radius:4px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar-track{background-color:transparent}.sd-table__wrapper{height:var(--table-height, auto);width:var(--table-width, 100%);color:#222222}.sd-table__wrapper .sd-table__container{width:100%;height:auto;border:1px solid #e1e1e1;border-radius:8px;font-size:12px;overflow:hidden}.sd-table__wrapper .sd-table__container .sd-table__middle{overflow:auto;will-change:scroll-position;height:var(--table-height, auto)}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table{background-color:white;display:table;width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;position:relative}.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__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-header thead{position:sticky;top:0;z-index:120}.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:110 !important}.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__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column .sticky-left{left:var(--sticky-left-offset, 0)}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column .sticky-right{right:var(--sticky-right-offset, 0)}.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__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-cell{position:sticky;z-index:101;background-color:white}.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__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;left:100%;right:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset 12px 0 20px -25px;opacity:1;pointer-events:none}.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__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;left:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset -12px 0 20px -25px;opacity:1;pointer-events:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--no-data thead{opacity:0.4}.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__wrapper .sd-table__container .sd-table__middle .sd-table sd-td,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-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__wrapper .sd-table__container .sd-table__middle .sd-table thead{height:36px}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead sd-tr{width:100%}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead sd-tr sd-th{background:#f5faff;height:36px;padding:0 16px;font-weight:500;vertical-align:middle;border-bottom:1px solid #e1e1e1;-webkit-user-select:none;user-select:none;position:relative}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead sd-tr sd-th.sd-th .sd-th__content{display:flex;flex-flow:row nowrap;align-items:center;gap:4px}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead sd-tr sd-th.sd-th .sd-th__content--left{justify-content:flex-start}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead sd-tr sd-th.sd-th .sd-th__content--center{justify-content:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead sd-tr sd-th.sd-th .sd-th__content--right{justify-content:flex-end}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead sd-tr sd-th.sd-th .sd-th__resizer{position:absolute;top:50%;right:0;transform:translateY(-50%);width:4px;height:16px;cursor:col-resize;z-index:3;border-left:1px solid #cccccc;border-right:1px solid #cccccc}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-tbody .sd-table__loading{position:absolute;top:0;left:0;width:100%;height:calc(var(--table-height, auto) - 36px);min-height:calc(100% - 36px);background:rgba(255, 255, 255, 0.6);z-index:200;display:flex;align-items:center;justify-content:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-tbody sd-tr:last-of-type sd-td{border-bottom:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-tbody sd-tr sd-td{height:44px;padding:0 16px;border-bottom:1px solid #e1e1e1;background:white;vertical-align:middle}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-tbody sd-tr sd-td.sd-td--left{text-align:left}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-tbody sd-tr sd-td.sd-td--center{text-align:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-tbody sd-tr sd-td.sd-td--right{text-align:right}.sd-table__wrapper .sd-table__container .sd-table__bottom{background:white;text-align:center}.sd-table__wrapper .sd-table__pagination{position:relative;background:#f9f9f9;height:48px;display:flex;align-items:center;justify-content:center;border:1px solid #e1e1e1;border-top:none;border-radius:8px}.sd-table__wrapper .sd-table__pagination sd-select{position:absolute;right:10px;top:50%;transform:translateY(-50%)}";
+
+const SdTable = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.sdSelectChange = index.createEvent(this, "sdSelectChange");
+        this.sdPageChange = index.createEvent(this, "sdPageChange");
+        this.sdRowsPerPageChange = index.createEvent(this, "sdRowsPerPageChange");
+    }
+    get el() { return index.getElement(this); }
+    columns;
+    rows;
+    selected = new Set();
+    rowKey = 'id';
+    selectable = false;
+    resizable = false;
+    width;
+    height;
+    stickyHeader = false;
+    stickyColumn = { left: 0, right: 0 };
+    noDataLabel = '데이터가 없습니다.';
+    isLoading = false;
+    pagination;
+    bodyCellRenderer;
+    useInternalPagination = false;
+    useRowsPerPageSelect = false;
+    rowsPerPageOption = [
+        { label: '10개씩 보기', value: 10 },
+        { label: '25개씩 보기', value: 25 },
+        { label: '50개씩 보기', value: 50 },
+        { label: '100개씩 보기', value: 100 },
+    ];
+    sdSelectChange;
+    sdPageChange;
+    sdRowsPerPageChange;
+    currentPage = this.pagination?.page || 1;
+    innerRows = [];
+    innerSelected = new Set();
+    columnWidths = [];
+    scrolledLeft = false;
+    scrolledRight = false;
+    handleColumnsChange(newCols) {
+        this.columnWidths = newCols.map(c => parseInt(c.width || '120', 10));
+    }
+    handleRowsChange(newRows) {
+        this.innerRows = [...newRows];
+    }
+    handleSelectedChange(newSelected) {
+        this.innerSelected = new Set(newSelected);
+    }
+    handlePaginationChange(newVal) {
+        if (newVal?.page && newVal.page !== this.currentPage)
+            this.currentPage = newVal.page;
+    }
+    componentWillLoad() {
+        this.innerRows = [...(this.rows || [])];
+        this.innerSelected = new Set(this.selected);
+        this.columnWidths = (this.columns || []).map(c => parseInt(c.width || '120', 10));
+    }
+    componentDidLoad() {
+        // SSR 환경 체크
+        if (typeof window === 'undefined')
+            return;
+        const middle = this.el.querySelector('.sd-table__middle');
+        if (!middle)
+            return;
+        const onScroll = () => {
+            const { scrollLeft, scrollWidth, clientWidth } = middle;
+            this.scrolledLeft = scrollLeft > 0;
+            this.scrolledRight = scrollLeft + clientWidth < scrollWidth;
+        };
+        middle.addEventListener('scroll', onScroll, { passive: true });
+        onScroll();
+    }
+    // ----- Derived getters -----
+    get visibleColumns() {
+        return this.columns.filter(col => col.visible !== false);
+    }
+    get paginatedRows() {
+        if (!this.pagination || !this.useInternalPagination)
+            return this.innerRows;
+        const { rowsPerPage = this.rows.length } = this.pagination || {};
+        const result = this.innerRows.slice((this.currentPage - 1) * rowsPerPage, this.currentPage * rowsPerPage);
+        return result;
+    }
+    get lastPageNumber() {
+        const { lastPage, rowsPerPage = this.rows.length } = this.pagination || {};
+        return lastPage ?? Math.max(1, Math.ceil(this.rows.length / rowsPerPage));
+    }
+    get sdTableClasses() {
+        return [
+            'sd-table',
+            this.stickyHeader && 'sd-table--sticky-header',
+            this.selectable && 'sd-table--selectable',
+            this.resizable && 'sd-table--resizable',
+            !this.innerRows.length && 'sd-table--no-data',
+            ((this.stickyColumn?.left ?? 0) > 0 || (this.stickyColumn?.right ?? 0) > 0) &&
+                'sd-table--sticky-column',
+            this.scrolledLeft && 'sd-table--scrolled-left',
+            this.scrolledRight && 'sd-table--scrolled-right',
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }
+    // ----- Selection -----
+    //  private isRowSelected(row: Row): boolean {
+    //   return Array.from(this.innerSelected).some(r => r[this.rowKey] === row[this.rowKey]);
+    //  }
+    //  private updateRowSelect(row: Row) {
+    //   const selectedArray = Array.from(this.innerSelected);
+    //   const exists = this.isRowSelected(row);
+    //   const newSelected = exists
+    //    ? selectedArray.filter(r => r[this.rowKey] !== row[this.rowKey])
+    //    : [...selectedArray, row];
+    //   // 동일 상태면 set하지 않음 → 불필요 렌더 방지
+    //   if (newSelected.length === selectedArray.length) return;
+    //   this.innerSelected = new Set(newSelected);
+    //   this.sdSelectChange.emit(Array.from(this.innerSelected));
+    //  }
+    toggleSelectAll(checked) {
+        if (checked) {
+            const pageRows = new Set([...this.paginatedRows]);
+            this.innerSelected = new Set([...this.innerSelected, ...pageRows]);
+        }
+        else {
+            const currentPageKeys = this.paginatedRows.map(r => r[this.rowKey]);
+            this.innerSelected = new Set([...this.innerSelected].filter(r => !currentPageKeys.includes(r[this.rowKey])));
+        }
+        this.sdSelectChange.emit(Array.from(this.innerSelected));
+    }
+    get isAllChecked() {
+        const total = this.paginatedRows.length;
+        const selectedCount = this.paginatedRows.filter(row => Array.from(this.innerSelected).some(selectedRow => selectedRow[this.rowKey] === row[this.rowKey])).length;
+        if (selectedCount === 0)
+            return false; // 아무것도 안 선택됨
+        if (selectedCount === total)
+            return true; // 전부 선택됨
+        return null; // 일부만 선택됨
+    }
+    // ----- Helpers -----
+    getStickyStyle(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) {
+        // SSR 환경 체크
+        if (typeof document === 'undefined')
+            return;
+        const startX = event.clientX;
+        const startWidth = this.columnWidths[index];
+        const handleMouseMove = (moveEvent) => {
+            const newWidth = Math.max(startWidth + moveEvent.clientX - startX, 50);
+            this.columnWidths = this.columnWidths.map((width, idx) => (idx === index ? newWidth : width));
+        };
+        const handleMouseUp = () => {
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', handleMouseUp);
+        };
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('mouseup', handleMouseUp);
+    }
+    //  private getCellValue(column: SdTableColumn, row: Row) {
+    //   const { field, format, name } = column;
+    //   const value = typeof field === 'function' ? field(row) : field ? row[field] : row[name];
+    //   return format ? format(value, row) : value;
+    //  }
+    // ----- Render -----
+    renderHeader() {
+        return (index.h("thead", null, index.h("sd-tr", null, this.selectable && (index.h("sd-th", { class: {
+                'sd-th': true,
+                'sd-th--selected': true,
+                'sticky-left': Boolean(this.stickyColumn.left && this.stickyColumn.left > 0),
+            }, style: {
+                '--sticky-left-offset': '0px',
+            } }, index.h("sd-checkbox", { checked: this.isAllChecked, disabled: !this.paginatedRows.length, onSdChange: (e) => this.toggleSelectAll(e.detail) }))), this.visibleColumns.map((col, colIdx) => (index.h("sd-th", { key: col.name, class: {
+                'sd-th': true,
+                [`${col.thClass}`]: Boolean(col.thClass),
+                'sticky-left': Boolean(this.stickyColumn.left && colIdx < this.stickyColumn.left),
+                'sticky-right': Boolean(this.stickyColumn.right && colIdx >= this.visibleColumns.length - this.stickyColumn.right),
+                'sticky-left-edge': Boolean(this.stickyColumn.left && colIdx === this.stickyColumn.left - 1),
+                'sticky-right-edge': Boolean(this.stickyColumn.right &&
+                    colIdx === this.visibleColumns.length - this.stickyColumn.right),
+            }, style: this.getStickyStyle(colIdx) }, index.h("div", { class: `sd-th__content sd-th__content--${col.align || 'left'}` }, index.h("slot", { name: `header-cell-${col.name}` }, index.h("div", { class: "sd-th__content--label" }, col.label)), col.usePageMoveIcon && index.h("sd-icon", { name: "pageMove", size: "12", color: "#006AC1" }), col.tooltip && (index.h("sd-tooltip", { ...col.tooltipOptions }, index.h("div", { slot: "content" }, col.tooltip.map(text => (index.h("p", null, text))))))), this.resizable && typeof window !== 'undefined' && (index.h("div", { class: "sd-th__resizer", onMouseDown: (evt) => this.handleResize(colIdx, evt) }))))))));
+    }
+    render() {
+        return (index.h(index.Host, { key: '9b6b47737ddd9b97c477fb029260bbdb5088593a' }, index.h("div", { key: '4235585df56fb9c83606e58d2b3ad6efc7b50259', class: "sd-table__wrapper", style: {
+                '--table-width': this.width,
+                '--table-height': this.height,
+            } }, index.h("div", { key: 'ea92597b3cba31951da90d3d42a7783ef043248a', class: "sd-table__container" }, index.h("div", { key: '95b5ef2432643b3c1386f52344e91d17dd6ba726', class: "sd-table__middle", role: "table" }, index.h("div", { key: '1e834ed7ce963ff0e3bc0c22c7b5d8dcd02d754d', part: "table", class: this.sdTableClasses }, this.renderHeader(), index.h("sd-tbody", { key: 'f7cf5c3d5e430f4259b2dae2660c38b0b0f6d17e' }, index.h("slot", { key: 'b21b99f21baaf9431ce653e680a59531cc275c26' })))), index.h("div", { key: '3fb77951c1e27c6feb13411aa56b4ac907135e24', class: "sd-table__bottom" })), this.pagination && this.innerRows.length > 0 && (index.h("div", { key: 'e74003c49fa592869346f28dfd10ef6acd6a64e9', class: "sd-table__pagination" }, index.h("sd-pagination", { key: '0284aa186f53cac17cecc45770afce1cb1675c36', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onPageChange: (e) => {
+                if (!this.useInternalPagination) {
+                    this.sdPageChange.emit(e.detail);
+                }
+                else {
+                    this.currentPage = e.detail;
+                    this.sdPageChange.emit(this.currentPage);
+                }
+            } }), this.useRowsPerPageSelect && (index.h("sd-select", { key: '23a648a6581bee5cf755afbb9146bf2090e6be65', value: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", onSdChange: (e) => {
+                const changedRowsPerPage = e.detail.value ? Number(e.detail.value) : 0;
+                if (!this.useInternalPagination) {
+                    this.sdRowsPerPageChange.emit(changedRowsPerPage);
+                }
+                else {
+                    const newRowsPerPage = Number(e.detail.value || 0);
+                    let newLastPage = Math.max(1, Math.ceil(this.innerRows.length / newRowsPerPage));
+                    let newCurrentPage = this.currentPage;
+                    if (newCurrentPage > newLastPage) {
+                        newCurrentPage = newLastPage;
+                    }
+                    this.pagination = {
+                        page: newCurrentPage,
+                        rowsPerPage: newRowsPerPage,
+                        lastPage: newLastPage,
+                    };
+                    this.currentPage = newCurrentPage;
+                    this.sdRowsPerPageChange.emit(changedRowsPerPage);
+                }
+            } })))))));
+    }
+    static get watchers() { return {
+        "columns": ["handleColumnsChange"],
+        "rows": ["handleRowsChange"],
+        "selected": ["handleSelectedChange"],
+        "pagination": ["handlePaginationChange"]
+    }; }
+};
+SdTable.style = sdTableCss;
+
+exports.sd_table = SdTable;
+//# sourceMappingURL=sd-table.entry.cjs.js.map

package/dist/cjs/sd-table.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sd-table.entry.cjs.js","sources":["src/components/sd-table/sd-table.scss?tag=sd-table","src/components/sd-table/sd-table.tsx"],"sourcesContent":["@import 'variables.scss';\r\n@import 'extend.scss';\r\n\r\n.sd-table__wrapper {\r\n height: var(--table-height, auto);\r\n width: var(--table-width, 100%);\r\n color: $grey_95;\r\n\r\n .sd-table__container {\r\n  width: 100%;\r\n  height: auto;\r\n  border: 1px solid $grey_30;\r\n  border-radius: 8px;\r\n  font-size: 12px;\r\n  overflow: hidden;\r\n\r\n  .sd-table__middle {\r\n   overflow: auto;\r\n   will-change: scroll-position;\r\n   height: var(--table-height, auto);\r\n   @extend %scrollBar;\r\n\r\n   .sd-table {\r\n    background-color: white;\r\n    display: table;\r\n    width: 100%;\r\n    border-collapse: separate;\r\n    border-spacing: 0;\r\n    table-layout: fixed;\r\n    position: relative;\r\n\r\n    &--selectable {\r\n     td.sd-td--selected,\r\n     th.sd-th--selected {\r\n      width: 52px !important;\r\n      max-width: 52px !important;\r\n      min-width: 52px !important;\r\n      padding: 0 10px 0 24px;\r\n      text-align: left;\r\n     }\r\n    }\r\n\r\n    &--sticky-header {\r\n     thead {\r\n      position: sticky;\r\n      top: 0;\r\n      z-index: 120;\r\n     }\r\n    }\r\n\r\n    &--sticky-column {\r\n     th.sticky-left,\r\n     th.sticky-right {\r\n      position: sticky;\r\n      background-color: $th-bg;\r\n      z-index: 110 !important;\r\n     }\r\n     td.sticky-left,\r\n     td.sticky-right {\r\n      position: sticky;\r\n      background-color: white;\r\n      z-index: 100 !important;\r\n     }\r\n\r\n     .sticky-left {\r\n      left: var(--sticky-left-offset, 0);\r\n     }\r\n     .sticky-right {\r\n      right: var(--sticky-right-offset, 0);\r\n     }\r\n\r\n     th.sticky-cell {\r\n      position: sticky;\r\n      z-index: 102;\r\n      background-color: $th-bg;\r\n     }\r\n     td.sticky-cell {\r\n      position: sticky;\r\n      z-index: 101;\r\n      background-color: white;\r\n     }\r\n    }\r\n\r\n    &--scrolled-left {\r\n     th.sticky-left-edge,\r\n     td.sticky-left-edge {\r\n      overflow: visible;\r\n      &:after {\r\n       content: '';\r\n       position: absolute;\r\n       top: 0;\r\n       left: 100%;\r\n       right: -20px;\r\n       width: 20px;\r\n       height: 100%;\r\n       z-index: 101 !important;\r\n       box-shadow: inset 12px 0 20px -25px;\r\n       opacity: 1;\r\n       pointer-events: none;\r\n      }\r\n     }\r\n    }\r\n\r\n    &--scrolled-right {\r\n     th.sticky-right-edge,\r\n     td.sticky-right-edge {\r\n      overflow: visible;\r\n\r\n      &:after {\r\n       content: '';\r\n       position: absolute;\r\n       top: 0;\r\n       left: -20px;\r\n       width: 20px;\r\n       height: 100%;\r\n       z-index: 101 !important;\r\n       box-shadow: inset -12px 0 20px -25px;\r\n       opacity: 1;\r\n       pointer-events: none;\r\n      }\r\n     }\r\n    }\r\n\r\n    &--no-data {\r\n     thead {\r\n      opacity: 0.4;\r\n      tr {\r\n       th {\r\n        &.sd-th {\r\n         border-bottom: 1px solid rgba(225, 225, 225, 0.4) !important;\r\n        }\r\n       }\r\n      }\r\n     }\r\n    }\r\n\r\n    sd-td,\r\n    sd-th,\r\n    .sd-th__content--label {\r\n     overflow: hidden;\r\n     white-space: nowrap;\r\n     text-overflow: ellipsis;\r\n     word-break: keep-all;\r\n    }\r\n\r\n    thead {\r\n     height: 36px;\r\n\r\n     sd-tr {\r\n      width: 100%;\r\n\r\n      sd-th {\r\n       background: $th-bg;\r\n       height: 36px;\r\n       padding: 0 16px;\r\n       font-weight: 500;\r\n       vertical-align: middle;\r\n       border-bottom: 1px solid $grey_30;\r\n       -webkit-user-select: none;\r\n       user-select: none;\r\n       position: relative;\r\n\r\n       &.sd-th {\r\n        .sd-th__content {\r\n         display: flex;\r\n         flex-flow: row nowrap;\r\n         align-items: center;\r\n         gap: 4px;\r\n\r\n         &--left {\r\n          justify-content: flex-start;\r\n         }\r\n         &--center {\r\n          justify-content: center;\r\n         }\r\n         &--right {\r\n          justify-content: flex-end;\r\n         }\r\n        }\r\n\r\n        .sd-th__resizer {\r\n         position: absolute;\r\n         top: 50%;\r\n         right: 0;\r\n         transform: translateY(-50%);\r\n         width: 4px;\r\n         height: 16px;\r\n         cursor: col-resize;\r\n         z-index: 3;\r\n         border-left: 1px solid $grey_45;\r\n         border-right: 1px solid $grey_45;\r\n        }\r\n       }\r\n      }\r\n     }\r\n    }\r\n\r\n    sd-tbody {\r\n     .sd-table__loading {\r\n      position: absolute;\r\n      top: 0;\r\n      left: 0;\r\n      width: 100%;\r\n      height: calc(var(--table-height, auto) - 36px);\r\n      min-height: calc(100% - 36px);\r\n      background: rgba(255, 255, 255, 0.6);\r\n      z-index: 200;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n     }\r\n\r\n     sd-tr {\r\n      &:last-of-type {\r\n       sd-td {\r\n        border-bottom: none;\r\n       }\r\n      }\r\n      sd-td {\r\n       height: 44px;\r\n       padding: 0 16px;\r\n       border-bottom: 1px solid $grey_30;\r\n       background: white;\r\n       vertical-align: middle;\r\n\r\n       &.sd-td {\r\n        &--left {\r\n         text-align: left;\r\n        }\r\n        &--center {\r\n         text-align: center;\r\n        }\r\n        &--right {\r\n         text-align: right;\r\n        }\r\n       }\r\n      }\r\n     }\r\n    }\r\n   }\r\n  }\r\n\r\n  .sd-table__bottom {\r\n   background: white;\r\n   text-align: center;\r\n  }\r\n }\r\n\r\n .sd-table__pagination {\r\n  position: relative;\r\n  background: $grey_05;\r\n  height: 48px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  border: 1px solid $grey_30;\r\n  border-top: none;\r\n  border-radius: 8px;\r\n\r\n  sd-select {\r\n   position: absolute;\r\n   right: 10px;\r\n   top: 50%;\r\n   transform: translateY(-50%);\r\n\r\n   .sd-select {\r\n   }\r\n  }\r\n }\r\n}\r\n","import {\r\n Component,\r\n Element,\r\n Prop,\r\n State,\r\n Event,\r\n Watch,\r\n h,\r\n EventEmitter,\r\n Host,\r\n} from '@stencil/core';\r\nimport { CheckedType } from '../sd-checkbox/sd-checkbox';\r\nimport { SelectOption } from '../sd-select/sd-select';\r\nimport { SdSelectCustomEvent } from '../../components';\r\n\r\nexport type SdTableSortDir = 'asc' | 'desc' | 'none';\r\n\r\nexport interface SdTableColumn {\r\n name: string;\r\n label: string;\r\n field: string | ((row: any) => any);\r\n align?: 'left' | 'center' | 'right';\r\n width?: string;\r\n format?: (value: any, row: any) => string;\r\n visible?: boolean;\r\n usePageMoveIcon?: boolean;\r\n tooltip?: string[];\r\n tooltipOptions?: Record<string, any>;\r\n tdClass?: string;\r\n thClass?: string;\r\n}\r\n\r\nexport interface Row {\r\n [key: string]: any;\r\n}\r\n\r\n@Component({\r\n tag: 'sd-table',\r\n styleUrl: 'sd-table.scss',\r\n})\r\nexport class SdTable {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop() columns!: SdTableColumn[];\r\n @Prop({ mutable: true }) rows!: Row[];\r\n @Prop({ mutable: true }) selected: Set<Row> = new Set();\r\n @Prop() rowKey: string = 'id';\r\n @Prop() selectable: boolean = false;\r\n @Prop() resizable: boolean = false;\r\n @Prop() width?: string;\r\n @Prop() height?: string;\r\n @Prop() stickyHeader: boolean = false;\r\n @Prop() stickyColumn: { left?: number; right?: number } = { left: 0, right: 0 };\r\n @Prop() noDataLabel: string = '데이터가 없습니다.';\r\n @Prop() isLoading: boolean = false;\r\n @Prop() pagination?: {\r\n  page: number;\r\n  rowsPerPage: number;\r\n  lastPage?: number;\r\n };\r\n @Prop() bodyCellRenderer?: (\r\n  column: SdTableColumn,\r\n  row: Row,\r\n ) => HTMLElement | string | null | undefined;\r\n @Prop() useInternalPagination: boolean = false;\r\n @Prop() useRowsPerPageSelect: boolean = false;\r\n @Prop() rowsPerPageOption: SelectOption[] = [\r\n  { label: '10개씩 보기', value: 10 },\r\n  { label: '25개씩 보기', value: 25 },\r\n  { label: '50개씩 보기', value: 50 },\r\n  { label: '100개씩 보기', value: 100 },\r\n ];\r\n\r\n @Event() sdSelectChange!: EventEmitter<Row[]>;\r\n @Event() sdPageChange!: EventEmitter<number>;\r\n @Event() sdRowsPerPageChange!: EventEmitter<number>;\r\n\r\n @State() currentPage: number = this.pagination?.page || 1;\r\n @State() innerRows: Row[] = [];\r\n @State() innerSelected: Set<Row> = new Set();\r\n @State() columnWidths: number[] = [];\r\n @State() scrolledLeft: boolean = false;\r\n @State() scrolledRight: boolean = false;\r\n\r\n @Watch('columns')\r\n handleColumnsChange(newCols: SdTableColumn[]) {\r\n  this.columnWidths = newCols.map(c => parseInt(c.width || '120', 10));\r\n }\r\n\r\n @Watch('rows')\r\n handleRowsChange(newRows: Row[]) {\r\n  this.innerRows = [...newRows];\r\n }\r\n\r\n @Watch('selected')\r\n handleSelectedChange(newSelected: Set<Row>) {\r\n  this.innerSelected = new Set(newSelected);\r\n }\r\n\r\n @Watch('pagination')\r\n handlePaginationChange(\r\n  newVal?: { page: number; rowsPerPage: number; lastPage?: number } | undefined,\r\n ) {\r\n  if (newVal?.page && newVal.page !== this.currentPage) this.currentPage = newVal.page;\r\n }\r\n\r\n componentWillLoad() {\r\n  this.innerRows = [...(this.rows || [])];\r\n  this.innerSelected = new Set(this.selected);\r\n  this.columnWidths = (this.columns || []).map(c => parseInt(c.width || '120', 10));\r\n }\r\n\r\n componentDidLoad() {\r\n  // SSR 환경 체크\r\n  if (typeof window === 'undefined') return;\r\n\r\n  const middle = this.el.querySelector('.sd-table__middle');\r\n  if (!middle) return;\r\n\r\n  const onScroll = () => {\r\n   const { scrollLeft, scrollWidth, clientWidth } = middle as HTMLElement;\r\n   this.scrolledLeft = scrollLeft > 0;\r\n   this.scrolledRight = scrollLeft + clientWidth < scrollWidth;\r\n  };\r\n  middle.addEventListener('scroll', onScroll, { passive: true });\r\n  onScroll();\r\n }\r\n\r\n // ----- Derived getters -----\r\n private get visibleColumns(): SdTableColumn[] {\r\n  return this.columns.filter(col => col.visible !== false);\r\n }\r\n\r\n private get paginatedRows(): Row[] {\r\n  if (!this.pagination || !this.useInternalPagination) return this.innerRows;\r\n\r\n  const { rowsPerPage = this.rows.length } = this.pagination || {};\r\n\r\n  const result = this.innerRows.slice(\r\n   (this.currentPage - 1) * rowsPerPage,\r\n   this.currentPage * rowsPerPage,\r\n  );\r\n\r\n  return result;\r\n }\r\n\r\n private get lastPageNumber(): number {\r\n  const { lastPage, rowsPerPage = this.rows.length } = this.pagination || {};\r\n\r\n  return lastPage ?? Math.max(1, Math.ceil(this.rows.length / rowsPerPage));\r\n }\r\n\r\n private get sdTableClasses() {\r\n  return [\r\n   'sd-table',\r\n   this.stickyHeader && 'sd-table--sticky-header',\r\n   this.selectable && 'sd-table--selectable',\r\n   this.resizable && 'sd-table--resizable',\r\n   !this.innerRows.length && 'sd-table--no-data',\r\n   ((this.stickyColumn?.left ?? 0) > 0 || (this.stickyColumn?.right ?? 0) > 0) &&\r\n    'sd-table--sticky-column',\r\n   this.scrolledLeft && 'sd-table--scrolled-left',\r\n   this.scrolledRight && 'sd-table--scrolled-right',\r\n  ]\r\n   .filter(Boolean)\r\n   .join(' ');\r\n }\r\n\r\n // ----- Selection -----\r\n //  private isRowSelected(row: Row): boolean {\r\n //   return Array.from(this.innerSelected).some(r => r[this.rowKey] === row[this.rowKey]);\r\n //  }\r\n\r\n //  private updateRowSelect(row: Row) {\r\n //   const selectedArray = Array.from(this.innerSelected);\r\n //   const exists = this.isRowSelected(row);\r\n //   const newSelected = exists\r\n //    ? selectedArray.filter(r => r[this.rowKey] !== row[this.rowKey])\r\n //    : [...selectedArray, row];\r\n\r\n //   // 동일 상태면 set하지 않음 → 불필요 렌더 방지\r\n //   if (newSelected.length === selectedArray.length) return;\r\n\r\n //   this.innerSelected = new Set(newSelected);\r\n //   this.sdSelectChange.emit(Array.from(this.innerSelected));\r\n //  }\r\n\r\n private toggleSelectAll(checked: CheckedType) {\r\n  if (checked) {\r\n   const pageRows = new Set([...this.paginatedRows]);\r\n   this.innerSelected = new Set([...this.innerSelected, ...pageRows]);\r\n  } else {\r\n   const currentPageKeys = this.paginatedRows.map(r => r[this.rowKey]);\r\n   this.innerSelected = new Set(\r\n    [...this.innerSelected].filter(r => !currentPageKeys.includes(r[this.rowKey])),\r\n   );\r\n  }\r\n\r\n  this.sdSelectChange.emit(Array.from(this.innerSelected));\r\n }\r\n\r\n private get isAllChecked(): boolean | null {\r\n  const total = this.paginatedRows.length;\r\n  const selectedCount = this.paginatedRows.filter(row =>\r\n   Array.from(this.innerSelected).some(\r\n    selectedRow => selectedRow[this.rowKey] === row[this.rowKey],\r\n   ),\r\n  ).length;\r\n\r\n  if (selectedCount === 0) return false; // 아무것도 안 선택됨\r\n  if (selectedCount === total) return true; // 전부 선택됨\r\n  return null; // 일부만 선택됨\r\n }\r\n\r\n // ----- Helpers -----\r\n private getStickyStyle(colIdx: number) {\r\n  const leftOffset =\r\n   this.columnWidths.slice(0, colIdx).reduce((a, b) => a + b, 0) + (this.selectable ? 52 : 0);\r\n  const rightOffset = this.columnWidths\r\n   .filter((_, i) => i >= this.visibleColumns.length - (this.stickyColumn.right || 0) && i > colIdx)\r\n   .reduce((a, b) => a + b, 0);\r\n  return {\r\n   '--sticky-left-offset': `${leftOffset}px`,\r\n   '--sticky-right-offset': `${rightOffset}px`,\r\n   'width': `${this.columnWidths[colIdx]}px`,\r\n   'minWidth': `${this.columnWidths[colIdx]}px`,\r\n   'maxWidth': `${this.columnWidths[colIdx]}px`,\r\n  };\r\n }\r\n\r\n private handleResize(index: number, event: MouseEvent) {\r\n  // SSR 환경 체크\r\n  if (typeof document === 'undefined') return;\r\n\r\n  const startX = event.clientX;\r\n  const startWidth = this.columnWidths[index];\r\n\r\n  const handleMouseMove = (moveEvent: MouseEvent) => {\r\n   const newWidth = Math.max(startWidth + moveEvent.clientX - startX, 50);\r\n\r\n   this.columnWidths = this.columnWidths.map((width, idx) => (idx === index ? newWidth : width));\r\n  };\r\n\r\n  const handleMouseUp = () => {\r\n   document.removeEventListener('mousemove', handleMouseMove);\r\n   document.removeEventListener('mouseup', handleMouseUp);\r\n  };\r\n\r\n  document.addEventListener('mousemove', handleMouseMove);\r\n  document.addEventListener('mouseup', handleMouseUp);\r\n }\r\n\r\n //  private getCellValue(column: SdTableColumn, row: Row) {\r\n //   const { field, format, name } = column;\r\n //   const value = typeof field === 'function' ? field(row) : field ? row[field] : row[name];\r\n //   return format ? format(value, row) : value;\r\n //  }\r\n\r\n // ----- Render -----\r\n private renderHeader() {\r\n  return (\r\n   <thead>\r\n    <sd-tr>\r\n     {this.selectable && (\r\n      <sd-th\r\n       class={{\r\n        'sd-th': true,\r\n        'sd-th--selected': true,\r\n        'sticky-left': Boolean(this.stickyColumn.left && this.stickyColumn.left > 0),\r\n       }}\r\n       style={{\r\n        '--sticky-left-offset': '0px',\r\n       }}\r\n      >\r\n       <sd-checkbox\r\n        checked={this.isAllChecked}\r\n        disabled={!this.paginatedRows.length}\r\n        onSdChange={(e: CustomEvent<CheckedType>) => this.toggleSelectAll(e.detail)}\r\n       ></sd-checkbox>\r\n      </sd-th>\r\n     )}\r\n     {this.visibleColumns.map((col, colIdx) => (\r\n      <sd-th\r\n       key={col.name}\r\n       class={{\r\n        'sd-th': true,\r\n        [`${col.thClass}`]: Boolean(col.thClass),\r\n        'sticky-left': Boolean(this.stickyColumn.left && colIdx < this.stickyColumn.left),\r\n        'sticky-right': Boolean(\r\n         this.stickyColumn.right && colIdx >= this.visibleColumns.length - this.stickyColumn.right!,\r\n        ),\r\n        'sticky-left-edge': Boolean(\r\n         this.stickyColumn.left && colIdx === this.stickyColumn.left - 1,\r\n        ),\r\n        'sticky-right-edge': Boolean(\r\n         this.stickyColumn.right &&\r\n          colIdx === this.visibleColumns.length - this.stickyColumn.right!,\r\n        ),\r\n       }}\r\n       style={this.getStickyStyle(colIdx)}\r\n      >\r\n       <div class={`sd-th__content sd-th__content--${col.align || 'left'}`}>\r\n        <slot name={`header-cell-${col.name}`}>\r\n         <div class=\"sd-th__content--label\">{col.label}</div>\r\n        </slot>\r\n\r\n        {col.usePageMoveIcon && <sd-icon name=\"pageMove\" size=\"12\" color=\"#006AC1\" />}\r\n\r\n        {col.tooltip && (\r\n         <sd-tooltip {...col.tooltipOptions}>\r\n          <div slot=\"content\">\r\n           {col.tooltip.map(text => (\r\n            <p>{text}</p>\r\n           ))}\r\n          </div>\r\n         </sd-tooltip>\r\n        )}\r\n       </div>\r\n\r\n       {this.resizable && typeof window !== 'undefined' && (\r\n        <div\r\n         class=\"sd-th__resizer\"\r\n         onMouseDown={(evt: MouseEvent) => this.handleResize(colIdx, evt)}\r\n        ></div>\r\n       )}\r\n      </sd-th>\r\n     ))}\r\n    </sd-tr>\r\n   </thead>\r\n  );\r\n }\r\n\r\n render() {\r\n  return (\r\n   <Host>\r\n    <div\r\n     class=\"sd-table__wrapper\"\r\n     style={{\r\n      '--table-width': this.width,\r\n      '--table-height': this.height,\r\n     }}\r\n    >\r\n     <div class=\"sd-table__container\">\r\n      <div class=\"sd-table__middle\" role=\"table\">\r\n       <div part=\"table\" class={this.sdTableClasses}>\r\n        {this.renderHeader()}\r\n        <sd-tbody>\r\n         <slot></slot>\r\n        </sd-tbody>\r\n       </div>\r\n      </div>\r\n\r\n      <div class=\"sd-table__bottom\"></div>\r\n     </div>\r\n     {this.pagination && this.innerRows.length > 0 && (\r\n      <div class=\"sd-table__pagination\">\r\n       <sd-pagination\r\n        currentPage={!this.useInternalPagination ? this.pagination.page : this.currentPage}\r\n        lastPage={!this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber}\r\n        onPageChange={(e: CustomEvent<number>) => {\r\n         if (!this.useInternalPagination) {\r\n          this.sdPageChange.emit(e.detail);\r\n         } else {\r\n          this.currentPage = e.detail;\r\n          this.sdPageChange.emit(this.currentPage);\r\n         }\r\n        }}\r\n       ></sd-pagination>\r\n\r\n       {this.useRowsPerPageSelect && (\r\n        <sd-select\r\n         value={this.pagination.rowsPerPage}\r\n         options={this.rowsPerPageOption}\r\n         width=\"128px\"\r\n         onSdChange={(e: SdSelectCustomEvent<{ value: string | number | null }>) => {\r\n          const changedRowsPerPage = e.detail.value ? Number(e.detail.value) : 0;\r\n          if (!this.useInternalPagination) {\r\n           this.sdRowsPerPageChange.emit(changedRowsPerPage);\r\n          } else {\r\n           const newRowsPerPage = Number(e.detail.value || 0);\r\n           let newLastPage = Math.max(1, Math.ceil(this.innerRows.length / newRowsPerPage));\r\n           let newCurrentPage = this.currentPage;\r\n\r\n           if (newCurrentPage > newLastPage) {\r\n            newCurrentPage = newLastPage;\r\n           }\r\n\r\n           this.pagination = {\r\n            page: newCurrentPage,\r\n            rowsPerPage: newRowsPerPage,\r\n            lastPage: newLastPage,\r\n           };\r\n           this.currentPage = newCurrentPage;\r\n           this.sdRowsPerPageChange.emit(changedRowsPerPage);\r\n          }\r\n         }}\r\n        ></sd-select>\r\n       )}\r\n      </div>\r\n     )}\r\n    </div>\r\n   </Host>\r\n  );\r\n }\r\n}\r\n"],"names":["h","Host"],"mappings":"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"}

package/dist/cjs/sd-tag.cjs.entry.js

@@ -45,7 +45,7 @@ const SdTag = class {
     }
     render() {
         const tagClasses = this.getTagClasses();
-        return (index.h("span", { key: '88925b8c30e7b909b6518edc9deaa58c82de17a0', class: tagClasses, style: {
+        return (index.h("span", { key: '674d187602c90a83016377bd8c25bd288aa819ec', class: tagClasses, style: {
                 '--tag-bg-color': this.bgColor,
                 '--tag-text-color': this.textColor,
             }, "aria-label": this.label || 'tag' }, this.renderContent()));

package/dist/cjs/sd-tbody.sd-th.sd-tr.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sd-tbody.sd-th.sd-tr.entry.cjs.js","sources":["src/components/sd-table/sd-tbody/sd-tbody.scss?tag=sd-tbody","src/components/sd-table/sd-tbody/sd-tbody.tsx","src/components/sd-table/sd-th/sd-th.scss?tag=sd-th","src/components/sd-table/sd-th/sd-th.tsx","src/components/sd-table/sd-tr/sd-tr.scss?tag=sd-tr","src/components/sd-table/sd-tr/sd-tr.tsx"],"sourcesContent":["sd-tbody {\r\n display: table-row-group;\r\n}\r\n","import { Component, Host, h } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'sd-tbody',\r\n styleUrl: 'sd-tbody.scss',\r\n})\r\nexport class SdTbody {\r\n render() {\r\n  return (\r\n   <Host>\r\n    <slot></slot>\r\n   </Host>\r\n  );\r\n }\r\n}\r\n","sd-th {\r\n display: table-cell;\r\n padding: 12px;\r\n font-weight: bold;\r\n text-align: left;\r\n border-bottom: 2px solid #ddd;\r\n background-color: #f1f1f1;\r\n}\r\n","import { Component, Host, h } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'sd-th',\r\n styleUrl: 'sd-th.scss',\r\n})\r\nexport class SdTh {\r\n render() {\r\n  return (\r\n   <Host role=\"columnheader\">\r\n    <slot></slot>\r\n   </Host>\r\n  );\r\n }\r\n}\r\n","sd-tr {\r\n display: table-row;\r\n}\r\n","import { Component, Host, h } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'sd-tr',\r\n styleUrl: 'sd-tr.scss',\r\n})\r\nexport class SdTr {\r\n render() {\r\n  return (\r\n   <Host role=\"row\">\r\n    <slot></slot>\r\n   </Host>\r\n  );\r\n }\r\n}\r\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,UAAU,GAAG,mCAAmC;;MCMzC,OAAO,GAAA,MAAA;;;;IACnB,MAAM,GAAA;QACL,QACCA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACJD,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACP;;;;;ACXV,MAAM,OAAO,GAAG,+HAA+H;;MCMlI,IAAI,GAAA,MAAA;;;;IAChB,MAAM,GAAA;QACL,QACCA,OAAC,CAAAC,UAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,cAAc,EAAA,EACxBD,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACP;;;;;ACXV,MAAM,OAAO,GAAG,0BAA0B;;MCM7B,IAAI,GAAA,MAAA;;;;IAChB,MAAM,GAAA;QACL,QACCA,OAAC,CAAAC,UAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,KAAK,EAAA,EACfD,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACP;;;;;;;;;"}

package/dist/cjs/sd-tbody_3.cjs.entry.js

@@ -0,0 +1,44 @@
+'use strict';
+
+var index = require('./index-DXo1Fhkn.js');
+
+const sdTbodyCss = "sd-tbody{display:table-row-group}";
+
+const SdTbody = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        return (index.h(index.Host, { key: 'b94310b0ad1566cf9ccbac3ccdc5fbcdd2e53f8c' }, index.h("slot", { key: '382fb835aa4516adad374443556084703b8560c3' })));
+    }
+};
+SdTbody.style = sdTbodyCss;
+
+const sdThCss = "sd-th{display:table-cell;padding:12px;font-weight:bold;text-align:left;border-bottom:2px solid #ddd;background-color:#f1f1f1}";
+
+const SdTh = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        return (index.h(index.Host, { key: 'cf30b704166adc6d7de5ade8d455d34ecf575199', role: "columnheader" }, index.h("slot", { key: '7863306b924a749aba5ba55f70b8b3d5c205d133' })));
+    }
+};
+SdTh.style = sdThCss;
+
+const sdTrCss = "sd-tr{display:table-row}";
+
+const SdTr = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        return (index.h(index.Host, { key: '2cfec32649fa440cb44f83392c439e58dcb24644', role: "row" }, index.h("slot", { key: '0146af3690a7a6445b65893f86e0b9e5cd1d8a02' })));
+    }
+};
+SdTr.style = sdTrCss;
+
+exports.sd_tbody = SdTbody;
+exports.sd_th = SdTh;
+exports.sd_tr = SdTr;
+//# sourceMappingURL=sd-tbody.sd-th.sd-tr.entry.cjs.js.map

package/dist/cjs/sd-td.cjs.entry.js

@@ -13,11 +13,11 @@ const SdTd = class {
     tdStyle;
     tdClass;
     render() {
-        return (index.h(index.Host, { key: 'd97cb05ec639ea64724b4107985248e9c9e89381', role: "cell", class: {
+        return (index.h(index.Host, { key: '87c947cf0092ac524cdfed0be5f1703685a64db6', role: "cell", class: {
                 'sd-td': true,
                 [`sd-td--${this.align}`]: true,
                 [this.tdClass || '']: Boolean(this.tdClass),
-            }, style: this.tdStyle }, index.h("slot", { key: '685d2a07497781f3ff563cf10694a5c51eb963eb' })));
+            }, style: this.tdStyle }, index.h("slot", { key: '4369629e345d8cc5bb17166d6877dba421522e4d' })));
     }
 };
 SdTd.style = sdTdCss;

package/dist/collection/collection-manifest.json

@@ -3,6 +3,7 @@
     "components/sd-button/sd-button.js",
     "components/sd-checkbox/sd-checkbox.js",
     "components/sd-date-box/sd-date-box.js",
+    "components/sd-modal-card/sd-modal-card.js",
     "components/sd-select/sd-select.js",
     "components/sd-select-multiple-group/sd-select-multiple-group.js",
     "components/sd-table/sd-table.js",

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

@@ -6,7 +6,7 @@ export class SdBadge {
     label = '';
     render() {
         const resolvedColor = resolveColor(this.color);
-        return (h(Host, { key: 'f5aec7173946083ad1ef376564a796ed8cb3cf0b' }, h("div", { key: '79f668240ed83b0e74fa7d0de8429f2b8434bdf3', class: `sd-badge sd-badge--${this.size}`, style: { '--sd-badge-color': resolvedColor } }, h("div", { key: 'e562c933d17047ff841624a252fb4a05cc09a5e3', class: "sd-badge__dot" }), h("div", { key: 'd7e53aa3cbc429138c38d81888ee50269d1cbb6c', class: "sd-badge__label" }, this.label))));
+        return (h(Host, { key: 'b88fba271994742a1a1d3379db44e8a307c5a308' }, h("div", { key: '961c25f3f87dc51cd670aa18706d5a5f3517f8bf', class: `sd-badge sd-badge--${this.size}`, style: { '--sd-badge-color': resolvedColor } }, h("div", { key: '2de1b86cc1e714a436cb2d2810b2646a2ac4fd7c', class: "sd-badge__dot" }), h("div", { key: '89943a046b33c105155236a7e0b411dfbcd72487', class: "sd-badge__label" }, this.label))));
     }
     static get is() { return "sd-badge"; }
     static get encapsulation() { return "scoped"; }

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

@@ -1,3 +1,9 @@
+sd-button {
+  display: inline-block;
+  width: fit-content;
+  height: fit-content;
+}
+
 .sd-button {
   text-decoration: none;
   cursor: pointer;

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

@@ -3,7 +3,7 @@ export class SdCard {
     bordered = true;
     class = '';
     render() {
-        return (h(Host, { key: '8bc5c53ae7a166de72a89e407f55c19bc49d8429' }, h("div", { key: '891fc0291a35c110d63aeda09bdaf64e6fa45d42', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.class}` }, h("slot", { key: '0bac0a6b5d7b1284008ba24d69a6d06dc0659bdf' }))));
+        return (h(Host, { key: 'b39b016a66f0df13d09ff3a1ce453bb5eda23b52' }, h("div", { key: '2a22dcc5ede4067ecbb2bbbe985d95ffaee3a3a6', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.class}` }, h("slot", { key: 'f73cae0097be43bcd666ade2db27c585090eca75' }))));
     }
     static get is() { return "sd-card"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-date-picker/sd-date-picker.js

@@ -74,7 +74,7 @@ export class SdDatePicker {
         this.isOpen = false;
     };
     render() {
-        return (h(Host, { key: 'ceaa6b5321f565e0560feb4218205925210d0967', class: "sd-date-picker" }, h("sd-input", { key: '1b5e1afcbad3daf40766977edd17077d9bc18200', ref: el => (this.inputEl = el), value: this.date, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, inputClass: "text-center", onClick: () => this.openMenu() }, h("sd-icon", { key: 'd61cc0a28f65c77a80ebf216a259b66b17615054', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: '2e41787708d795d727edf1d21398bc70e31f41e0', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: '579adc1459a9fd6ee9313eec5a4d03b2a2e61222', class: "sd-date-picker__menu" }, h("div", { key: '5bae8978c6a4bb25f430f94d2c66927031a8e646', class: "sd-date-picker__header" }, h("div", { key: 'e4482baaa76c96740c2ff9eea4182b7bda59b974', class: "year-nav" }, h("button", { key: 'eb439c8147be7fe8d351c30e6b516db19ccbbc0d', type: "button", name: "prev-year", title: "Previous Year", onClick: () => this.setCurrentYear(this.currentYear - 1) }, h("sd-icon", { key: '7a685bd6c07cdd8eff0ac0c8e19c07f6c2d826dc', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: 'e19520fa7dd4a6f19ff30482a9291caa83471b41', class: "year-nav__current" }, this.currentYear), h("button", { key: '5ff3333f877ca6b7faddc4494d0c88747c29c714', type: "button", name: "next-year", title: "Next Year", onClick: () => this.setCurrentYear(this.currentYear + 1) }, h("sd-icon", { key: '2d02cf464f98aafc9a929414b88e77d0167983a5', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: '6195fc68cb522b0368344057da580ff73dfe6efd', class: "month-nav" }, h("button", { key: 'c68a01bb06f8ac2276f678c916f41d52cc17fb69', type: "button", name: "prev-month", title: "Previous       ", onClick: () => this.handleUpdateMonth('prev') }, h("sd-icon", { key: '12873470bf8ca8c1e834f7953429a3e77ca24c6d', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: 'fb0db178bc0dc078f532ca955d6007fbccabb97d', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), h("button", { key: 'd4871fe7e7328b060bdf9f2b56153e81d9c6a5b5', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, h("sd-icon", { key: 'cf8467b63261012751ca0abafde6846eb397f13f', name: "arrowRight", size: "12", color: "#CCCCCC" })))), h("div", { key: 'a5d9cacac573f545b1fe1c321d5971d50db6e957', class: "sd-date-picker__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (h("div", { key: day, class: "day" }, day)))), h("div", { key: 'dc2769b821cda06b29c6f45ac2363a2df7a32d04', class: "sd-date-picker__body" }, [
+        return (h(Host, { key: '67bc480db5e0f16fa5af8bd75b6dde76d457b4dd', class: "sd-date-picker" }, h("sd-input", { key: 'd31e41161179efb1b961ea00f7333b048e43467a', ref: el => (this.inputEl = el), value: this.date, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, inputClass: "text-center", onClick: () => this.openMenu() }, h("sd-icon", { key: '1a3c2d291628a00d217a0b20ddeb38d8590706f7', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: '85b52726ad96ed74cb42e1eda4e014eb8095face', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: 'e398ac0094ef23907b7d3a7f88b37587207ade33', class: "sd-date-picker__menu" }, h("div", { key: '328de8581f0cb895bb3e6e3758a7adedbad302de', class: "sd-date-picker__header" }, h("div", { key: '633feae88e423ffa6fa6eb6841a937be3558ccc5', class: "year-nav" }, h("button", { key: '89c3d4593c0a2c2917003a93ac1ff0176c611d72', type: "button", name: "prev-year", title: "Previous Year", onClick: () => this.setCurrentYear(this.currentYear - 1) }, h("sd-icon", { key: '140655e36c73784f4704a51a89c79ae72d237218', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: '3917a8caec91a855b9bf6f42b3c8e856d490817a', class: "year-nav__current" }, this.currentYear), h("button", { key: 'b5a7e7903594482bff30c72afaca8609b04f8aea', type: "button", name: "next-year", title: "Next Year", onClick: () => this.setCurrentYear(this.currentYear + 1) }, h("sd-icon", { key: '49364c66f35a9a5e724644963f3ab276245241af', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: '153ee788090ed23b32cec5f660eeda741076b2a6', class: "month-nav" }, h("button", { key: '33f7a059d08bd761cc6ca083f5fd1980017e3f2d', type: "button", name: "prev-month", title: "Previous       ", onClick: () => this.handleUpdateMonth('prev') }, h("sd-icon", { key: 'c641505d42a0683bea0e6b7a3db9cf6352a78d4d', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: '5fb032ee2040e4abd333dc640c3998e3288662f2', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), h("button", { key: 'da13b27ba6f74fae110383e294be1d01e0d74eb1', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, h("sd-icon", { key: '223b006490c3f3a3d6d7036115da2b88e801dca7', name: "arrowRight", size: "12", color: "#CCCCCC" })))), h("div", { key: '1251dd00b4cb02ebddaf1aa93e1fc8a351bee10f', class: "sd-date-picker__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (h("div", { key: day, class: "day" }, day)))), h("div", { key: '474772b41df806093a4e578b67420adb6a973018', class: "sd-date-picker__body" }, [
             ...this.calendar.prevMonthDays,
             ...this.calendar.days,
             ...this.calendar.afterMonthDays,

package/dist/collection/components/sd-date-range-picker/sd-date-range-picker.js

@@ -137,9 +137,9 @@ export class SdDateRangePicker {
         this.isOpen = false;
     };
     render() {
-        return (h(Host, { key: '43de817f75cdcc0bfe2b3de2091007dc161a7c11', class: "sd-date-range-picker" }, h("sd-input", { key: '54ea327695939b32d678c5888dcb85aadd47735c', ref: el => (this.inputEl = el), value: `${this.dateRange[0]} ~ ${this.dateRange[1]}`, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, inputClass: "text-center", inputStyle: {
+        return (h(Host, { key: '01d8def2e141ae3767fb57880482845a5bfcc6ca', class: "sd-date-range-picker" }, h("sd-input", { key: 'f3738314482ac84517958672d2f75cdc7cd6d354', ref: el => (this.inputEl = el), value: `${this.dateRange[0]} ~ ${this.dateRange[1]}`, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, inputClass: "text-center", inputStyle: {
                 margin: '0 0 0 8px',
-            }, onClick: () => this.openMenu() }, h("sd-icon", { key: '08300ae0452a157ee26488f63a9352bc49ada8ba', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: 'ef0c93df45c0a9aa8aaf9b2bd2e031a1a5158806', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: '769361e46fe458b3f4674a14175677157e36240b', class: "sd-date-range-picker__menu" }, h("div", { key: 'f9af2fa4add883227fad96826cad0e5ef88a427c', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, h("button", { key: 'd7e7db3bd1941ed68b8b07237bd8a96c2d00a34e', type: "button", name: "prev", title: "Previous", onClick: () => this.setPrevYear(this.prevYear - 1) }, h("sd-icon", { key: 'a2c069938f4e840e4fcca4beb69e28f56f2b8d70', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("div", { key: 'ee48baa353e0a9016090194aacf9af61245ad557', class: "header-label" }, this.prevYear), h("button", { key: 'e8cc4adf150736c44292f82c4cfbfc7c74f1c75e', type: "button", name: "next", title: "Next", onClick: () => this.setPrevYear(this.prevYear + 1) }, h("sd-icon", { key: 'c06b18b0e09ff740afc7857d7c41329829068f86', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: '22d12259763c47ff3cb27d41a40132ebacb6f5af', class: "sd-date-range-picker__body" }, [this.prevCalendar, this.nextCalendar].map((calendar, index) => (h(Fragment, null, index === 1 && h("div", { class: "separator" }), h("div", { key: index, class: "calendar-container" }, h("div", { class: "calendar-header" }, h("button", { type: "button", name: "month", title: "Month", class: index === 0 ? 'header-button-prev' : 'header-button-next', onClick: () => this.updateYearMonth(index === 0 ? 'prev' : 'next') }, h("sd-icon", { name: index === 0 ? 'arrowLeft' : 'arrowRight', size: "12", color: "#CCCCCC" })), index === 0
+            }, onClick: () => this.openMenu() }, h("sd-icon", { key: '2ca7e4428256374866a74bf550fd7fc825fca4c1', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: '381b44e43ed021a1200854e445f113e02112b21b', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: '47f31a5136e236899ac861cdd66a0424ed9507ee', class: "sd-date-range-picker__menu" }, h("div", { key: '3c5c4050f4ea36e93b7cc02e0935f3898bca7523', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, h("button", { key: 'b5ddf46fbc15290df316697c99502a07499452fb', type: "button", name: "prev", title: "Previous", onClick: () => this.setPrevYear(this.prevYear - 1) }, h("sd-icon", { key: 'fded6383fd7a90e80cba1b222a334764bcd1f4c2', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("div", { key: 'b8408d970c42fc373b5300ce91887010e78c29f9', class: "header-label" }, this.prevYear), h("button", { key: 'bc4c97952e8ae30ad685de8f966e5b0445e5f6a0', type: "button", name: "next", title: "Next", onClick: () => this.setPrevYear(this.prevYear + 1) }, h("sd-icon", { key: '7dff57a2d3c44a810ab078c9418155dbadb7988d', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: '9c43dd586c0f702490093204c06102186cf27ebe', class: "sd-date-range-picker__body" }, [this.prevCalendar, this.nextCalendar].map((calendar, index) => (h(Fragment, null, index === 1 && h("div", { class: "separator" }), h("div", { key: index, class: "calendar-container" }, h("div", { class: "calendar-header" }, h("button", { type: "button", name: "month", title: "Month", class: index === 0 ? 'header-button-prev' : 'header-button-next', onClick: () => this.updateYearMonth(index === 0 ? 'prev' : 'next') }, h("sd-icon", { name: index === 0 ? 'arrowLeft' : 'arrowRight', size: "12", color: "#CCCCCC" })), index === 0
             ? `${this.prevYear}.${String(this.prevMonth).padStart(2, '0')}`
             : `${this.nextYear}.${String(this.nextMonth).padStart(2, '0')}`), h("div", { class: "calendar-days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (h("sd-date-box", { key: day, date: day, disabled: true, class: "day" })))), h("div", { class: "calendar-body mt-12pxr grid grid-cols-7 gap-y-8pxr" }, [...calendar.prevMonthDays, ...calendar.days, ...calendar.afterMonthDays].map((day, idx) => (h("sd-date-box", { key: `prev${day}_${idx}`, date: !day ? '' : Number(day), selected: this.dateRange.some(date => date ===
                 this.dateUtil.formatDate(index === 0 ? this.prevYear : this.nextYear, index === 0 ? this.prevMonth : this.nextMonth, Number(day))), type: this.getDateBoxType(this.dateUtil.formatDate(index === 0 ? this.prevYear : this.nextYear, index === 0 ? this.prevMonth : this.nextMonth, Number(day))), isToday: today ===

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

@@ -1,4 +1,10 @@
 @charset "UTF-8";
+sd-button {
+  display: inline-block;
+  width: fit-content;
+  height: fit-content;
+}
+
 .sd-button {
   text-decoration: none;
   cursor: pointer;

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

@@ -4,7 +4,7 @@ const GUIDE_LABEL = {
     help: '활용 TIP',
     pdf: 'PDF Guide',
     youtube: 'Video Guide',
-    notion: '사용 가이드',
+    notion: '사용법 안내',
     event: 'Event Button',
 };
 const GUIDE_ICON = {
@@ -24,6 +24,7 @@ export class SdGuide {
     label = '';
     message = '';
     guideUrl = '';
+    popupTitle = '';
     popupWidth;
     popupShow = false;
     guideRef;
@@ -47,11 +48,11 @@ export class SdGuide {
     };
     render() {
         const { name: iconName, size: iconSize, color: iconColor } = GUIDE_ICON[this.type];
-        return (h(Host, { key: '151e2b8148ed0dc26f97fd81902be88edc10933a', style: {
+        return (h(Host, { key: '8de1cc4591dd1294a374421965322d6a958c9797', style: {
                 '--sd-guide-color': GUIDE_ICON[this.type].color,
-            } }, h("sd-button", { key: '05d6fdf5721d1ef5be5646227b6db112560f944e', ref: el => (this.guideRef = el), class: this.guideClass, variant: this.popupShow ? 'primary' : 'outline', label: GUIDE_LABEL[this.type], size: "sm", color: this.popupShow ? GUIDE_ICON[this.type].color : 'grey_45', icon: iconName, iconColor: this.popupShow ? 'white' : iconColor, iconSize: iconSize, noHover: this.popupShow, onSdClick: this.handleClickGuide }), this.type === 'help' && this.popupShow && (h("sd-portal", { key: '63b86edca7f72a5a74477140d01be873bc2a6fbc', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, h("div", { key: '8a5cae088afd50f005a10eebcf66ae57f3661710', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, h("sd-button", { key: '2734f07d8b9fcbbeaa2942c9219461f5888e38b0', class: "sd-guide__popup__close", icon: "close", color: colors.grey_65, size: "md", variant: "ghost", noHover: true,
+            } }, h("sd-button", { key: '8dc820b941d8e3003f2440a4fa1ccd36be0a854e', ref: el => (this.guideRef = el), class: this.guideClass, variant: this.popupShow ? 'primary' : 'outline', label: this.label || GUIDE_LABEL[this.type], size: "sm", color: this.popupShow ? GUIDE_ICON[this.type].color : 'grey_45', icon: iconName, iconColor: this.popupShow ? 'white' : iconColor, iconSize: iconSize, noHover: this.popupShow, onSdClick: this.handleClickGuide }), this.type === 'help' && this.popupShow && (h("sd-portal", { key: 'd8cbafa686da33b2ced3a00fe13f673ebab247e5', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, h("div", { key: 'f5048c842dcec0414ee747f69c2033b688ba1672', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, h("sd-button", { key: 'a7cb87e50b7b9ff3a40742cd4881ac8c413f18a5', class: "sd-guide__popup__close", icon: "close", color: colors.grey_65, size: "md", variant: "ghost", noHover: true,
             // buttonStyle={{ padding: '0px', minHeight: '0px' }}
-            onSdClick: this.closeDropdown }), h("div", { key: '5b602905d247032b7bb09c1635de094505295178', class: "sd-guide__popup__header" }, h("sd-icon", { key: '9156d751748598fbe657626899d5e6730a0c0ba2', name: "helpOutline", size: 24, color: colors.green_65 }), h("h3", { key: '881b74e449725b1953b6a81c4c042748ae609319', class: "sd-guide__popup__title" }, this.label || GUIDE_LABEL[this.type])), h("ul", { key: '51a13a02e2c1beefcfc11a1cdc602f433572e157', class: "sd-guide__popup__list" }, this.renderListItem(this.message)))))));
+            onSdClick: this.closeDropdown }), h("div", { key: 'dd2a7ceeb8fa28c2d430a2d10778b87db5bc576d', class: "sd-guide__popup__header" }, h("sd-icon", { key: '40ccb8d9fc31c7f0c68ce4fd8aacbfdf7e4cf4dc', name: "helpOutline", size: 24, color: colors.green_65 }), h("h3", { key: '55726b9de8d9cd996154700ffb0c5178face6916', class: "sd-guide__popup__title" }, this.popupTitle || GUIDE_LABEL[this.type])), h("ul", { key: '3221ed8367735883cb65c8ab66b63d977eae24dd', class: "sd-guide__popup__list" }, this.renderListItem(this.message)))))));
     }
     // 현재 2depth까지만 스타일 적용
     renderListItem(message, depth = 0) {
@@ -167,6 +168,26 @@ export class SdGuide {
                 "attribute": "guide-url",
                 "defaultValue": "''"
             },
+            "popupTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "popup-title",
+                "defaultValue": "''"
+            },
             "popupWidth": {
                 "type": "number",
                 "mutable": false,