npm - @sellmate/design-system - Versions diffs - 0.0.24 → 0.0.26 - Mend

@sellmate/design-system 0.0.24 → 0.0.26

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (231) hide show

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

@@ -15,6 +15,13 @@ export class SdTable {
     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;
     currentPage = this.pagination?.page || 1;
@@ -37,9 +44,9 @@ export class SdTable {
             this.currentPage = newVal.page;
     }
     componentWillLoad() {
-        this.innerRows = [...this.rows];
+        this.innerRows = [...(this.rows || [])];
         this.innerSelected = new Set(this.selected);
-        this.columnWidths = this.columns.map(c => parseInt(c.width || '120', 10));
+        this.columnWidths = (this.columns || []).map(c => parseInt(c.width || '120', 10));
     }
     componentDidLoad() {
         // SSR 환경 체크
@@ -201,10 +208,10 @@ export class SdTable {
         }))))));
     }
     render() {
-        return (h(Host, { key: 'b0e18a1fdb5a3291cc547c7c2afda88663d1eefc' }, h("div", { key: '177a2b0e58fb90e4c6cf9ae317865122ef23baa9', class: "sd-table__wrapper", style: {
+        return (h(Host, { key: 'b73fefde2c99c864002a2e778b02a306d4c8c32d' }, h("div", { key: '4fbf588871e3b8cb92e087cbde59aa9280ba75cd', class: "sd-table__wrapper", style: {
                 '--table-width': this.width,
                 '--table-height': this.height,
-            } }, h("div", { key: '328f160e9658060aca056408254527ab7fd396a7', class: "sd-table__container" }, h("div", { key: 'ac6f8f9d79c12a0eefad5163eeb281e991f4f131', class: "sd-table__middle" }, h("table", { key: 'dc5d902a48c50d3b4a8ffd7a07c2959afc14103c', part: "table", class: this.sdTableClasses }, this.renderHeader(), this.renderBody())), h("div", { key: '75326864a5d5df37d70ff4df073e48cfdb838d3c', class: "sd-table__bottom" })), this.pagination && this.innerRows.length > 0 && (h("div", { key: '25f6b105e40fb254b1ad8dcd642715c857c367ac', class: "sd-table__pagination" }, h("sd-pagination", { key: 'd1ade718dc3dc674e8acc3ab10236ab06f32c16c', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onPageChange: (e) => {
+            } }, h("div", { key: '92d69eaf8e499fd5b3a0ebb3d77353c8285949e5', class: "sd-table__container" }, h("div", { key: '590fd93058983bab3bc829e7c6ce4e058365287f', class: "sd-table__middle" }, h("table", { key: 'c1fd46586bd9429377dfff9df94550cb5437b05a', part: "table", class: this.sdTableClasses }, this.renderHeader(), this.renderBody())), h("div", { key: '89a48072c9f6b84d062e4e127b5858657003fc87', class: "sd-table__bottom" })), this.pagination && this.innerRows.length > 0 && (h("div", { key: '526c024bc5493b8a3abb4f7887ec221e38dd2937', class: "sd-table__pagination" }, h("sd-pagination", { key: 'f607579ff98e70f2c6975139a17c7fc48b940a19', 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);
                 }
@@ -212,7 +219,21 @@ export class SdTable {
                     this.currentPage = e.detail;
                     this.sdPageChange.emit(this.currentPage);
                 }
-            } }))))));
+            } }), this.useRowsPerPageSelect && (h("sd-select", { key: '683424acaf3961dcf681e8a04275cdba6bdf9928', value: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", onSdChange: (e) => {
+                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.sdPageChange.emit(this.currentPage);
+            } })))))));
     }
     static get is() { return "sd-table"; }
     static get originalStyleUrls() {
@@ -525,6 +546,50 @@ export class SdTable {
                 "reflect": false,
                 "attribute": "use-internal-pagination",
                 "defaultValue": "false"
+            },
+            "useRowsPerPageSelect": {
+                "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-rows-per-page-select",
+                "defaultValue": "false"
+            },
+            "rowsPerPageOption": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "SelectOption[]",
+                    "resolved": "SelectOption[]",
+                    "references": {
+                        "SelectOption": {
+                            "location": "import",
+                            "path": "../sd-select/sd-select",
+                            "id": "src/components/sd-select/sd-select.tsx::SelectOption"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[\r\n  { label: '10\uAC1C\uC529 \uBCF4\uAE30', value: 10 },\r\n  { label: '25\uAC1C\uC529 \uBCF4\uAE30', value: 25 },\r\n  { label: '50\uAC1C\uC529 \uBCF4\uAE30', value: 50 },\r\n  { label: '100\uAC1C\uC529 \uBCF4\uAE30', value: 100 },\r\n ]"
             }
         };
     }

package/dist/collection/components/sd-table/sd-table.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sd-table.js","sourceRoot":"","sources":["../../../src/components/sd-table/sd-table.tsx"],"names":[],"mappings":"AAAA,OAAO,EACN,SAAS,EACT,OAAO,EACP,IAAI,EACJ,KAAK,EACL,KAAK,EACL,KAAK,EACL,CAAC,EAED,IAAI,GACJ,MAAM,eAAe,CAAC;AA4BvB,MAAM,OAAO,OAAO;IACR,EAAE,CAAe;IAEpB,OAAO,CAAmB;IACT,IAAI,CAAS;IACb,QAAQ,GAAa,IAAI,GAAG,EAAE,CAAC;IAChD,MAAM,GAAW,IAAI,CAAC;IACtB,UAAU,GAAY,KAAK,CAAC;IAC5B,SAAS,GAAY,KAAK,CAAC;IAC3B,KAAK,CAAU;IACf,MAAM,CAAU;IAChB,YAAY,GAAY,KAAK,CAAC;IAC9B,YAAY,GAAsC,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC;IACxE,WAAW,GAAW,YAAY,CAAC;IACnC,UAAU,CAIhB;IACM,gBAAgB,CAGqB;IACrC,qBAAqB,GAAY,KAAK,CAAC;IAEtC,cAAc,CAAuB;IACrC,YAAY,CAAwB;IAEpC,WAAW,GAAW,IAAI,CAAC,UAAU,EAAE,IAAI,IAAI,CAAC,CAAC;IACjD,SAAS,GAAU,EAAE,CAAC;IACtB,aAAa,GAAa,IAAI,GAAG,EAAE,CAAC;IACpC,YAAY,GAAa,EAAE,CAAC;IAC5B,YAAY,GAAY,KAAK,CAAC;IAC9B,aAAa,GAAY,KAAK,CAAC;IAGxC,mBAAmB,CAAC,OAAwB;QAC3C,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,IAAI,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC;IACtE,CAAC;IAGD,gBAAgB,CAAC,OAAc;QAC9B,IAAI,CAAC,SAAS,GAAG,CAAC,GAAG,OAAO,CAAC,CAAC;IAC/B,CAAC;IAGD,oBAAoB,CAAC,WAAqB;QACzC,IAAI,CAAC,aAAa,GAAG,IAAI,GAAG,CAAC,WAAW,CAAC,CAAC;IAC3C,CAAC;IAGD,sBAAsB,CACrB,MAA6E;QAE7E,IAAI,MAAM,EAAE,IAAI,IAAI,MAAM,CAAC,IAAI,KAAK,IAAI,CAAC,WAAW;YAAE,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC;IACtF,CAAC;IAED,iBAAiB;QAChB,IAAI,CAAC,SAAS,GAAG,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC;QAChC,IAAI,CAAC,aAAa,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAC5C,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,IAAI,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC;IAC3E,CAAC;IAED,gBAAgB;QACf,YAAY;QACZ,IAAI,OAAO,MAAM,KAAK,WAAW;YAAE,OAAO;QAE1C,MAAM,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;QAC1D,IAAI,CAAC,MAAM;YAAE,OAAO;QAEpB,MAAM,QAAQ,GAAG,GAAG,EAAE;YACrB,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,WAAW,EAAE,GAAG,MAAqB,CAAC;YACvE,IAAI,CAAC,YAAY,GAAG,UAAU,GAAG,CAAC,CAAC;YACnC,IAAI,CAAC,aAAa,GAAG,UAAU,GAAG,WAAW,GAAG,WAAW,CAAC;QAC7D,CAAC,CAAC;QACF,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QAC/D,QAAQ,EAAE,CAAC;IACZ,CAAC;IAED,8BAA8B;IAC9B,IAAY,cAAc;QACzB,OAAO,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,OAAO,KAAK,KAAK,CAAC,CAAC;IAC1D,CAAC;IAED,IAAY,aAAa;QACxB,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,qBAAqB;YAAE,OAAO,IAAI,CAAC,SAAS,CAAC;QAE3E,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,UAAU,IAAI,EAAE,CAAC;QAEjE,MAAM,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAClC,CAAC,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,GAAG,WAAW,EACpC,IAAI,CAAC,WAAW,GAAG,WAAW,CAC9B,CAAC;QAEF,OAAO,MAAM,CAAC;IACf,CAAC;IAED,IAAY,cAAc;QACzB,MAAM,EAAE,QAAQ,EAAE,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,UAAU,IAAI,EAAE,CAAC;QAE3E,OAAO,QAAQ,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,WAAW,CAAC,CAAC,CAAC;IAC3E,CAAC;IAED,IAAY,cAAc;QACzB,OAAO;YACN,UAAU;YACV,IAAI,CAAC,YAAY,IAAI,yBAAyB;YAC9C,IAAI,CAAC,UAAU,IAAI,sBAAsB;YACzC,IAAI,CAAC,SAAS,IAAI,qBAAqB;YACvC,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,IAAI,mBAAmB;YAC7C,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,IAAI,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,KAAK,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;gBAC1E,yBAAyB;YAC1B,IAAI,CAAC,YAAY,IAAI,yBAAyB;YAC9C,IAAI,CAAC,aAAa,IAAI,0BAA0B;SAChD;aACC,MAAM,CAAC,OAAO,CAAC;aACf,IAAI,CAAC,GAAG,CAAC,CAAC;IACb,CAAC;IAED,wBAAwB;IAChB,aAAa,CAAC,GAAQ;QAC7B,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;IACtF,CAAC;IAEO,eAAe,CAAC,GAAQ;QAC/B,MAAM,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QACrD,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;QACvC,MAAM,WAAW,GAAG,MAAM;YACzB,CAAC,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;YAChE,CAAC,CAAC,CAAC,GAAG,aAAa,EAAE,GAAG,CAAC,CAAC;QAE3B,8BAA8B;QAC9B,IAAI,WAAW,CAAC,MAAM,KAAK,aAAa,CAAC,MAAM;YAAE,OAAO;QAExD,IAAI,CAAC,aAAa,GAAG,IAAI,GAAG,CAAC,WAAW,CAAC,CAAC;QAC1C,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC;IAC1D,CAAC;IAEO,eAAe,CAAC,OAAoB;QAC3C,IAAI,OAAO,EAAE,CAAC;YACb,MAAM,QAAQ,GAAG,IAAI,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC;YAClD,IAAI,CAAC,aAAa,GAAG,IAAI,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,aAAa,EAAE,GAAG,QAAQ,CAAC,CAAC,CAAC;QACpE,CAAC;aAAM,CAAC;YACP,MAAM,eAAe,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;YACpE,IAAI,CAAC,aAAa,GAAG,IAAI,GAAG,CAC3B,CAAC,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAC9E,CAAC;QACH,CAAC;QAED,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC;IAC1D,CAAC;IAED,IAAY,YAAY;QACvB,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC;QACxC,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,CACrD,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,IAAI,CAClC,WAAW,CAAC,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,CAC5D,CACD,CAAC,MAAM,CAAC;QAET,IAAI,aAAa,KAAK,CAAC;YAAE,OAAO,KAAK,CAAC,CAAC,aAAa;QACpD,IAAI,aAAa,KAAK,KAAK;YAAE,OAAO,IAAI,CAAC,CAAC,SAAS;QACnD,OAAO,IAAI,CAAC,CAAC,UAAU;IACxB,CAAC;IAED,sBAAsB;IACd,cAAc,CAAC,MAAc;QACpC,MAAM,UAAU,GACf,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAC5F,MAAM,WAAW,GAAG,IAAI,CAAC,YAAY;aACnC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,IAAI,IAAI,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,IAAI,CAAC,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC;aAChG,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;QAC7B,OAAO;YACN,sBAAsB,EAAE,GAAG,UAAU,IAAI;YACzC,uBAAuB,EAAE,GAAG,WAAW,IAAI;YAC3C,OAAO,EAAE,GAAG,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI;YACzC,UAAU,EAAE,GAAG,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI;YAC5C,UAAU,EAAE,GAAG,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI;SAC5C,CAAC;IACH,CAAC;IAEO,YAAY,CAAC,KAAa,EAAE,KAAiB;QACpD,YAAY;QACZ,IAAI,OAAO,QAAQ,KAAK,WAAW;YAAE,OAAO;QAE5C,MAAM,MAAM,GAAG,KAAK,CAAC,OAAO,CAAC;QAC7B,MAAM,UAAU,GAAG,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;QAE5C,MAAM,eAAe,GAAG,CAAC,SAAqB,EAAE,EAAE;YACjD,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,UAAU,GAAG,SAAS,CAAC,OAAO,GAAG,MAAM,EAAE,EAAE,CAAC,CAAC;YAEvE,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE,CAAC,CAAC,GAAG,KAAK,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;QAC/F,CAAC,CAAC;QAEF,MAAM,aAAa,GAAG,GAAG,EAAE;YAC1B,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC;YAC3D,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;QACxD,CAAC,CAAC;QAEF,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC;QACxD,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;IACrD,CAAC;IAEO,YAAY,CAAC,MAAqB,EAAE,GAAQ;QACnD,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,MAAM,CAAC;QACvC,MAAM,KAAK,GAAG,OAAO,KAAK,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QACxF,OAAO,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IAC5C,CAAC;IAED,qBAAqB;IACb,YAAY;QACnB,OAAO,CACN;YACC;gBACE,IAAI,CAAC,UAAU,IAAI,CACnB,UACC,KAAK,EAAE;wBACN,OAAO,EAAE,IAAI;wBACb,iBAAiB,EAAE,IAAI;wBACvB,aAAa,EAAE,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,GAAG,CAAC,CAAC;qBAC5E,EACD,KAAK,EAAE;wBACN,sBAAsB,EAAE,KAAK;qBAC7B;oBAED,mBACC,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,QAAQ,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM,EACpC,UAAU,EAAE,CAAC,CAA2B,EAAE,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,GAC7D,CACX,CACL;gBACA,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,MAAM,EAAE,EAAE,CAAC,CACzC,UACC,GAAG,EAAE,GAAG,CAAC,IAAI,EACb,KAAK,EAAE;wBACN,OAAO,EAAE,IAAI;wBACb,CAAC,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC,EAAE,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC;wBACxC,aAAa,EAAE,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,IAAI,MAAM,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;wBACjF,cAAc,EAAE,OAAO,CACtB,IAAI,CAAC,YAAY,CAAC,KAAK,IAAI,MAAM,IAAI,IAAI,CAAC,cAAc,CAAC,MAAM,GAAG,IAAI,CAAC,YAAY,CAAC,KAAM,CAC1F;wBACD,kBAAkB,EAAE,OAAO,CAC1B,IAAI,CAAC,YAAY,CAAC,IAAI,IAAI,MAAM,KAAK,IAAI,CAAC,YAAY,CAAC,IAAI,GAAG,CAAC,CAC/D;wBACD,mBAAmB,EAAE,OAAO,CAC3B,IAAI,CAAC,YAAY,CAAC,KAAK;4BACtB,MAAM,KAAK,IAAI,CAAC,cAAc,CAAC,MAAM,GAAG,IAAI,CAAC,YAAY,CAAC,KAAM,CACjE;qBACD,EACD,KAAK,EAAE,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC;oBAElC,WAAK,KAAK,EAAE,kCAAkC,GAAG,CAAC,KAAK,IAAI,MAAM,EAAE;wBAClE,YAAM,IAAI,EAAE,eAAe,GAAG,CAAC,IAAI,EAAE;4BACpC,WAAK,KAAK,EAAC,uBAAuB,IAAE,GAAG,CAAC,KAAK,CAAO,CAC9C;wBAEN,GAAG,CAAC,eAAe,IAAI,eAAS,IAAI,EAAC,UAAU,EAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,SAAS,GAAG;wBAE5E,GAAG,CAAC,OAAO,IAAI,CACf,qBAAgB,GAAG,CAAC,cAAc;4BACjC,WAAK,IAAI,EAAC,SAAS,IACjB,GAAG,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CACxB,aAAI,IAAI,CAAK,CACb,CAAC,CACG,CACM,CACb,CACI;oBAEL,IAAI,CAAC,SAAS,IAAI,OAAO,MAAM,KAAK,WAAW,IAAI,CACnD,WACC,KAAK,EAAC,gBAAgB,EACtB,WAAW,EAAE,CAAC,GAAe,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,GAAG,CAAC,GAC1D,CACP,CACG,CACL,CAAC,CACE,CACE,CACR,CAAC;IACH,CAAC;IAEO,UAAU;QACjB,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM;YAC7B,OAAO,CACN,aAAO,IAAI,EAAC,aAAa;gBACxB;oBACC,UAAI,OAAO,EAAE,IAAI,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAG,IAAI,CAAC,WAAW,CAAM,CACxF,CACE,CACR,CAAC;QAEH,OAAO,CACN,iBACE,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,MAAM,EAAE,EAAE,CAAC,CACxC,UAAI,GAAG,EAAE,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,KAAK,EAAC,yBAAyB;YACxD,IAAI,CAAC,UAAU,IAAI,CACnB,UACC,KAAK,EAAE;oBACN,OAAO,EAAE,IAAI;oBACb,iBAAiB,EAAE,IAAI;oBACvB,aAAa,EAAE,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,GAAG,CAAC,CAAC;iBAC5E,EACD,KAAK,EAAE;oBACN,sBAAsB,EAAE,KAAK;iBAC7B;gBAED,mBACC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,EAChC,QAAQ,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM,EACpC,UAAU,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,GAC7B,CACX,CACL;YACA,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE;gBAC3C,MAAM,QAAQ,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;gBAEtD,OAAO,CACN,UACC,GAAG,EAAE,MAAM,CAAC,IAAI,EAChB,IAAI,EAAE,MAAM,MAAM,CAAC,IAAI,EAAE,EACzB,KAAK,EAAE;wBACN,OAAO,EAAE,IAAI;wBACb,CAAC,UAAU,MAAM,CAAC,KAAK,IAAI,MAAM,EAAE,CAAC,EAAE,IAAI;wBAC1C,aAAa,EAAE,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,IAAI,MAAM,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;wBACjF,cAAc,EAAE,OAAO,CACtB,IAAI,CAAC,YAAY,CAAC,KAAK;4BACtB,MAAM,IAAI,IAAI,CAAC,cAAc,CAAC,MAAM,GAAG,IAAI,CAAC,YAAY,CAAC,KAAM,CAChE;wBACD,kBAAkB,EAAE,OAAO,CAC1B,IAAI,CAAC,YAAY,CAAC,IAAI,IAAI,MAAM,KAAK,IAAI,CAAC,YAAY,CAAC,IAAI,GAAG,CAAC,CAC/D;wBACD,mBAAmB,EAAE,OAAO,CAC3B,IAAI,CAAC,YAAY,CAAC,KAAK;4BACtB,MAAM,KAAK,IAAI,CAAC,cAAc,CAAC,MAAM,GAAG,IAAI,CAAC,YAAY,CAAC,KAAM,CACjE;wBACD,CAAC,GAAG,MAAM,CAAC,OAAO,EAAE,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC;qBAC9C,EACD,KAAK,EAAE,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC;oBAGlC,YAAM,IAAI,EAAE,aAAa,MAAM,CAAC,IAAI,IAAI,MAAM,EAAE,IAC9C,QAAQ,CAAC,CAAC,CAAC,CACX,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,CAC9B,YAAM,SAAS,EAAE,QAAQ,GAAS,CAClC,CAAC,CAAC,CAAC,CACH,QAAQ,CACR,CACD,CAAC,CAAC,CAAC,CACH,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,GAAG,CAAC,CAC9B,CACK,CACH,CACL,CAAC;YACH,CAAC,CAAC,CACE,CACL,CAAC,CACK,CACR,CAAC;IACH,CAAC;IAED,MAAM;QACL,OAAO,CACN,EAAC,IAAI;YACJ,4DACC,KAAK,EAAC,mBAAmB,EACzB,KAAK,EAAE;oBACN,eAAe,EAAE,IAAI,CAAC,KAAK;oBAC3B,gBAAgB,EAAE,IAAI,CAAC,MAAM;iBAC7B;gBAED,4DAAK,KAAK,EAAC,qBAAqB;oBAC/B,4DAAK,KAAK,EAAC,kBAAkB;wBAC5B,8DAAO,IAAI,EAAC,OAAO,EAAC,KAAK,EAAE,IAAI,CAAC,cAAc;4BAC5C,IAAI,CAAC,YAAY,EAAE;4BAEnB,IAAI,CAAC,UAAU,EAAE,CACX,CACH;oBAEN,4DAAK,KAAK,EAAC,kBAAkB,GAAO,CAC/B;gBACL,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,IAAI,CAChD,4DAAK,KAAK,EAAC,sBAAsB;oBAChC,sEACC,WAAW,EAAE,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,EAClF,QAAQ,EAAE,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,EACtF,YAAY,EAAE,CAAC,CAAsB,EAAE,EAAE;4BACxC,IAAI,CAAC,IAAI,CAAC,qBAAqB,EAAE,CAAC;gCACjC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;4BAClC,CAAC;iCAAM,CAAC;gCACP,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,MAAM,CAAC;gCAC5B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;4BAC1C,CAAC;wBACF,CAAC,GACe,CACZ,CACN,CACI,CACA,CACP,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["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\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() 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\r\n @Event() sdSelectChange!: EventEmitter<Row[]>;\r\n @Event() sdPageChange!: 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 <tr>\r\n {this.selectable && (\r\n <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 </th>\r\n )}\r\n {this.visibleColumns.map((col, colIdx) => (\r\n <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 </th>\r\n ))}\r\n </tr>\r\n </thead>\r\n );\r\n }\r\n\r\n private renderBody() {\r\n if (!this.paginatedRows.length)\r\n return (\r\n <tbody part=\"tbody-empty\">\r\n <tr>\r\n <td colSpan={this.visibleColumns.length + (this.selectable ? 1 : 0)}>{this.noDataLabel}</td>\r\n </tr>\r\n </tbody>\r\n );\r\n\r\n return (\r\n <tbody>\r\n {this.paginatedRows.map((row, rowIdx) => (\r\n <tr key={row[this.rowKey]} class=\"hover:bg-Grey_Lighten-6\">\r\n {this.selectable && (\r\n <td\r\n class={{\r\n 'sd-td': true,\r\n 'sd-td--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.isRowSelected(row)}\r\n disabled={!this.paginatedRows.length}\r\n onSdChange={() => this.updateRowSelect(row)}\r\n ></sd-checkbox>\r\n </td>\r\n )}\r\n {this.visibleColumns.map((column, colIdx) => {\r\n const rendered = this.bodyCellRenderer?.(column, row);\r\n\r\n return (\r\n <td\r\n key={column.name}\r\n part={`td-${column.name}`}\r\n class={{\r\n 'sd-td': true,\r\n [`sd-td--${column.align \|\| 'left'}`]: true,\r\n 'sticky-left': Boolean(this.stickyColumn.left && colIdx < this.stickyColumn.left),\r\n 'sticky-right': Boolean(\r\n this.stickyColumn.right &&\r\n 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 [`${column.tdClass}`]: Boolean(column.tdClass),\r\n }}\r\n style={this.getStickyStyle(colIdx)}\r\n >\r\n {/* slot을 사용하려는 항목 name과 행 인덱스를 키값으로 사용 */}\r\n <slot name={`body-cell-${column.name}-${rowIdx}`}>\r\n {rendered ? (\r\n typeof rendered === 'string' ? (\r\n <span innerHTML={rendered}></span>\r\n ) : (\r\n rendered\r\n )\r\n ) : (\r\n this.getCellValue(column, row)\r\n )}\r\n </slot>\r\n </td>\r\n );\r\n })}\r\n </tr>\r\n ))}\r\n </tbody>\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\">\r\n <table part=\"table\" class={this.sdTableClasses}>\r\n {this.renderHeader()}\r\n\r\n {this.renderBody()}\r\n </table>\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 </div>\r\n )}\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"sd-table.js","sourceRoot":"","sources":["../../../src/components/sd-table/sd-table.tsx"],"names":[],"mappings":"AAAA,OAAO,EACN,SAAS,EACT,OAAO,EACP,IAAI,EACJ,KAAK,EACL,KAAK,EACL,KAAK,EACL,CAAC,EAED,IAAI,GACJ,MAAM,eAAe,CAAC;AA8BvB,MAAM,OAAO,OAAO;IACR,EAAE,CAAe;IAEpB,OAAO,CAAmB;IACT,IAAI,CAAS;IACb,QAAQ,GAAa,IAAI,GAAG,EAAE,CAAC;IAChD,MAAM,GAAW,IAAI,CAAC;IACtB,UAAU,GAAY,KAAK,CAAC;IAC5B,SAAS,GAAY,KAAK,CAAC;IAC3B,KAAK,CAAU;IACf,MAAM,CAAU;IAChB,YAAY,GAAY,KAAK,CAAC;IAC9B,YAAY,GAAsC,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC;IACxE,WAAW,GAAW,YAAY,CAAC;IACnC,UAAU,CAIhB;IACM,gBAAgB,CAGqB;IACrC,qBAAqB,GAAY,KAAK,CAAC;IACvC,oBAAoB,GAAY,KAAK,CAAC;IACtC,iBAAiB,GAAmB;QAC3C,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,EAAE;QAC/B,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,EAAE;QAC/B,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,EAAE;QAC/B,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,EAAE;KACjC,CAAC;IAEO,cAAc,CAAuB;IACrC,YAAY,CAAwB;IAEpC,WAAW,GAAW,IAAI,CAAC,UAAU,EAAE,IAAI,IAAI,CAAC,CAAC;IACjD,SAAS,GAAU,EAAE,CAAC;IACtB,aAAa,GAAa,IAAI,GAAG,EAAE,CAAC;IACpC,YAAY,GAAa,EAAE,CAAC;IAC5B,YAAY,GAAY,KAAK,CAAC;IAC9B,aAAa,GAAY,KAAK,CAAC;IAGxC,mBAAmB,CAAC,OAAwB;QAC3C,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,IAAI,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC;IACtE,CAAC;IAGD,gBAAgB,CAAC,OAAc;QAC9B,IAAI,CAAC,SAAS,GAAG,CAAC,GAAG,OAAO,CAAC,CAAC;IAC/B,CAAC;IAGD,oBAAoB,CAAC,WAAqB;QACzC,IAAI,CAAC,aAAa,GAAG,IAAI,GAAG,CAAC,WAAW,CAAC,CAAC;IAC3C,CAAC;IAGD,sBAAsB,CACrB,MAA6E;QAE7E,IAAI,MAAM,EAAE,IAAI,IAAI,MAAM,CAAC,IAAI,KAAK,IAAI,CAAC,WAAW;YAAE,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC;IACtF,CAAC;IAED,iBAAiB;QAChB,IAAI,CAAC,SAAS,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC;QACxC,IAAI,CAAC,aAAa,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAC5C,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,OAAO,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,IAAI,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC;IACnF,CAAC;IAED,gBAAgB;QACf,YAAY;QACZ,IAAI,OAAO,MAAM,KAAK,WAAW;YAAE,OAAO;QAE1C,MAAM,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;QAC1D,IAAI,CAAC,MAAM;YAAE,OAAO;QAEpB,MAAM,QAAQ,GAAG,GAAG,EAAE;YACrB,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,WAAW,EAAE,GAAG,MAAqB,CAAC;YACvE,IAAI,CAAC,YAAY,GAAG,UAAU,GAAG,CAAC,CAAC;YACnC,IAAI,CAAC,aAAa,GAAG,UAAU,GAAG,WAAW,GAAG,WAAW,CAAC;QAC7D,CAAC,CAAC;QACF,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QAC/D,QAAQ,EAAE,CAAC;IACZ,CAAC;IAED,8BAA8B;IAC9B,IAAY,cAAc;QACzB,OAAO,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,OAAO,KAAK,KAAK,CAAC,CAAC;IAC1D,CAAC;IAED,IAAY,aAAa;QACxB,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,qBAAqB;YAAE,OAAO,IAAI,CAAC,SAAS,CAAC;QAE3E,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,UAAU,IAAI,EAAE,CAAC;QAEjE,MAAM,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAClC,CAAC,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,GAAG,WAAW,EACpC,IAAI,CAAC,WAAW,GAAG,WAAW,CAC9B,CAAC;QAEF,OAAO,MAAM,CAAC;IACf,CAAC;IAED,IAAY,cAAc;QACzB,MAAM,EAAE,QAAQ,EAAE,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,UAAU,IAAI,EAAE,CAAC;QAE3E,OAAO,QAAQ,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,WAAW,CAAC,CAAC,CAAC;IAC3E,CAAC;IAED,IAAY,cAAc;QACzB,OAAO;YACN,UAAU;YACV,IAAI,CAAC,YAAY,IAAI,yBAAyB;YAC9C,IAAI,CAAC,UAAU,IAAI,sBAAsB;YACzC,IAAI,CAAC,SAAS,IAAI,qBAAqB;YACvC,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,IAAI,mBAAmB;YAC7C,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,IAAI,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,KAAK,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;gBAC1E,yBAAyB;YAC1B,IAAI,CAAC,YAAY,IAAI,yBAAyB;YAC9C,IAAI,CAAC,aAAa,IAAI,0BAA0B;SAChD;aACC,MAAM,CAAC,OAAO,CAAC;aACf,IAAI,CAAC,GAAG,CAAC,CAAC;IACb,CAAC;IAED,wBAAwB;IAChB,aAAa,CAAC,GAAQ;QAC7B,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;IACtF,CAAC;IAEO,eAAe,CAAC,GAAQ;QAC/B,MAAM,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QACrD,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;QACvC,MAAM,WAAW,GAAG,MAAM;YACzB,CAAC,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;YAChE,CAAC,CAAC,CAAC,GAAG,aAAa,EAAE,GAAG,CAAC,CAAC;QAE3B,8BAA8B;QAC9B,IAAI,WAAW,CAAC,MAAM,KAAK,aAAa,CAAC,MAAM;YAAE,OAAO;QAExD,IAAI,CAAC,aAAa,GAAG,IAAI,GAAG,CAAC,WAAW,CAAC,CAAC;QAC1C,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC;IAC1D,CAAC;IAEO,eAAe,CAAC,OAAoB;QAC3C,IAAI,OAAO,EAAE,CAAC;YACb,MAAM,QAAQ,GAAG,IAAI,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC;YAClD,IAAI,CAAC,aAAa,GAAG,IAAI,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,aAAa,EAAE,GAAG,QAAQ,CAAC,CAAC,CAAC;QACpE,CAAC;aAAM,CAAC;YACP,MAAM,eAAe,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;YACpE,IAAI,CAAC,aAAa,GAAG,IAAI,GAAG,CAC3B,CAAC,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAC9E,CAAC;QACH,CAAC;QAED,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC;IAC1D,CAAC;IAED,IAAY,YAAY;QACvB,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC;QACxC,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,CACrD,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,IAAI,CAClC,WAAW,CAAC,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,CAC5D,CACD,CAAC,MAAM,CAAC;QAET,IAAI,aAAa,KAAK,CAAC;YAAE,OAAO,KAAK,CAAC,CAAC,aAAa;QACpD,IAAI,aAAa,KAAK,KAAK;YAAE,OAAO,IAAI,CAAC,CAAC,SAAS;QACnD,OAAO,IAAI,CAAC,CAAC,UAAU;IACxB,CAAC;IAED,sBAAsB;IACd,cAAc,CAAC,MAAc;QACpC,MAAM,UAAU,GACf,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAC5F,MAAM,WAAW,GAAG,IAAI,CAAC,YAAY;aACnC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,IAAI,IAAI,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,IAAI,CAAC,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC;aAChG,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;QAC7B,OAAO;YACN,sBAAsB,EAAE,GAAG,UAAU,IAAI;YACzC,uBAAuB,EAAE,GAAG,WAAW,IAAI;YAC3C,OAAO,EAAE,GAAG,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI;YACzC,UAAU,EAAE,GAAG,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI;YAC5C,UAAU,EAAE,GAAG,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI;SAC5C,CAAC;IACH,CAAC;IAEO,YAAY,CAAC,KAAa,EAAE,KAAiB;QACpD,YAAY;QACZ,IAAI,OAAO,QAAQ,KAAK,WAAW;YAAE,OAAO;QAE5C,MAAM,MAAM,GAAG,KAAK,CAAC,OAAO,CAAC;QAC7B,MAAM,UAAU,GAAG,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;QAE5C,MAAM,eAAe,GAAG,CAAC,SAAqB,EAAE,EAAE;YACjD,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,UAAU,GAAG,SAAS,CAAC,OAAO,GAAG,MAAM,EAAE,EAAE,CAAC,CAAC;YAEvE,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE,CAAC,CAAC,GAAG,KAAK,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;QAC/F,CAAC,CAAC;QAEF,MAAM,aAAa,GAAG,GAAG,EAAE;YAC1B,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC;YAC3D,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;QACxD,CAAC,CAAC;QAEF,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC;QACxD,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;IACrD,CAAC;IAEO,YAAY,CAAC,MAAqB,EAAE,GAAQ;QACnD,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,MAAM,CAAC;QACvC,MAAM,KAAK,GAAG,OAAO,KAAK,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QACxF,OAAO,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IAC5C,CAAC;IAED,qBAAqB;IACb,YAAY;QACnB,OAAO,CACN;YACC;gBACE,IAAI,CAAC,UAAU,IAAI,CACnB,UACC,KAAK,EAAE;wBACN,OAAO,EAAE,IAAI;wBACb,iBAAiB,EAAE,IAAI;wBACvB,aAAa,EAAE,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,GAAG,CAAC,CAAC;qBAC5E,EACD,KAAK,EAAE;wBACN,sBAAsB,EAAE,KAAK;qBAC7B;oBAED,mBACC,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,QAAQ,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM,EACpC,UAAU,EAAE,CAAC,CAA2B,EAAE,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,GAC7D,CACX,CACL;gBACA,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,MAAM,EAAE,EAAE,CAAC,CACzC,UACC,GAAG,EAAE,GAAG,CAAC,IAAI,EACb,KAAK,EAAE;wBACN,OAAO,EAAE,IAAI;wBACb,CAAC,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC,EAAE,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC;wBACxC,aAAa,EAAE,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,IAAI,MAAM,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;wBACjF,cAAc,EAAE,OAAO,CACtB,IAAI,CAAC,YAAY,CAAC,KAAK,IAAI,MAAM,IAAI,IAAI,CAAC,cAAc,CAAC,MAAM,GAAG,IAAI,CAAC,YAAY,CAAC,KAAM,CAC1F;wBACD,kBAAkB,EAAE,OAAO,CAC1B,IAAI,CAAC,YAAY,CAAC,IAAI,IAAI,MAAM,KAAK,IAAI,CAAC,YAAY,CAAC,IAAI,GAAG,CAAC,CAC/D;wBACD,mBAAmB,EAAE,OAAO,CAC3B,IAAI,CAAC,YAAY,CAAC,KAAK;4BACtB,MAAM,KAAK,IAAI,CAAC,cAAc,CAAC,MAAM,GAAG,IAAI,CAAC,YAAY,CAAC,KAAM,CACjE;qBACD,EACD,KAAK,EAAE,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC;oBAElC,WAAK,KAAK,EAAE,kCAAkC,GAAG,CAAC,KAAK,IAAI,MAAM,EAAE;wBAClE,YAAM,IAAI,EAAE,eAAe,GAAG,CAAC,IAAI,EAAE;4BACpC,WAAK,KAAK,EAAC,uBAAuB,IAAE,GAAG,CAAC,KAAK,CAAO,CAC9C;wBAEN,GAAG,CAAC,eAAe,IAAI,eAAS,IAAI,EAAC,UAAU,EAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,SAAS,GAAG;wBAE5E,GAAG,CAAC,OAAO,IAAI,CACf,qBAAgB,GAAG,CAAC,cAAc;4BACjC,WAAK,IAAI,EAAC,SAAS,IACjB,GAAG,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CACxB,aAAI,IAAI,CAAK,CACb,CAAC,CACG,CACM,CACb,CACI;oBAEL,IAAI,CAAC,SAAS,IAAI,OAAO,MAAM,KAAK,WAAW,IAAI,CACnD,WACC,KAAK,EAAC,gBAAgB,EACtB,WAAW,EAAE,CAAC,GAAe,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,GAAG,CAAC,GAC1D,CACP,CACG,CACL,CAAC,CACE,CACE,CACR,CAAC;IACH,CAAC;IAEO,UAAU;QACjB,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM;YAC7B,OAAO,CACN,aAAO,IAAI,EAAC,aAAa;gBACxB;oBACC,UAAI,OAAO,EAAE,IAAI,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAG,IAAI,CAAC,WAAW,CAAM,CACxF,CACE,CACR,CAAC;QAEH,OAAO,CACN,iBACE,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,MAAM,EAAE,EAAE,CAAC,CACxC,UAAI,GAAG,EAAE,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,KAAK,EAAC,yBAAyB;YACxD,IAAI,CAAC,UAAU,IAAI,CACnB,UACC,KAAK,EAAE;oBACN,OAAO,EAAE,IAAI;oBACb,iBAAiB,EAAE,IAAI;oBACvB,aAAa,EAAE,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,GAAG,CAAC,CAAC;iBAC5E,EACD,KAAK,EAAE;oBACN,sBAAsB,EAAE,KAAK;iBAC7B;gBAED,mBACC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,EAChC,QAAQ,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM,EACpC,UAAU,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,GAC7B,CACX,CACL;YACA,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE;gBAC3C,MAAM,QAAQ,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;gBAEtD,OAAO,CACN,UACC,GAAG,EAAE,MAAM,CAAC,IAAI,EAChB,IAAI,EAAE,MAAM,MAAM,CAAC,IAAI,EAAE,EACzB,KAAK,EAAE;wBACN,OAAO,EAAE,IAAI;wBACb,CAAC,UAAU,MAAM,CAAC,KAAK,IAAI,MAAM,EAAE,CAAC,EAAE,IAAI;wBAC1C,aAAa,EAAE,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,IAAI,MAAM,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;wBACjF,cAAc,EAAE,OAAO,CACtB,IAAI,CAAC,YAAY,CAAC,KAAK;4BACtB,MAAM,IAAI,IAAI,CAAC,cAAc,CAAC,MAAM,GAAG,IAAI,CAAC,YAAY,CAAC,KAAM,CAChE;wBACD,kBAAkB,EAAE,OAAO,CAC1B,IAAI,CAAC,YAAY,CAAC,IAAI,IAAI,MAAM,KAAK,IAAI,CAAC,YAAY,CAAC,IAAI,GAAG,CAAC,CAC/D;wBACD,mBAAmB,EAAE,OAAO,CAC3B,IAAI,CAAC,YAAY,CAAC,KAAK;4BACtB,MAAM,KAAK,IAAI,CAAC,cAAc,CAAC,MAAM,GAAG,IAAI,CAAC,YAAY,CAAC,KAAM,CACjE;wBACD,CAAC,GAAG,MAAM,CAAC,OAAO,EAAE,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC;qBAC9C,EACD,KAAK,EAAE,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC;oBAGlC,YAAM,IAAI,EAAE,aAAa,MAAM,CAAC,IAAI,IAAI,MAAM,EAAE,IAC9C,QAAQ,CAAC,CAAC,CAAC,CACX,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,CAC9B,YAAM,SAAS,EAAE,QAAQ,GAAS,CAClC,CAAC,CAAC,CAAC,CACH,QAAQ,CACR,CACD,CAAC,CAAC,CAAC,CACH,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,GAAG,CAAC,CAC9B,CACK,CACH,CACL,CAAC;YACH,CAAC,CAAC,CACE,CACL,CAAC,CACK,CACR,CAAC;IACH,CAAC;IAED,MAAM;QACL,OAAO,CACN,EAAC,IAAI;YACJ,4DACC,KAAK,EAAC,mBAAmB,EACzB,KAAK,EAAE;oBACN,eAAe,EAAE,IAAI,CAAC,KAAK;oBAC3B,gBAAgB,EAAE,IAAI,CAAC,MAAM;iBAC7B;gBAED,4DAAK,KAAK,EAAC,qBAAqB;oBAC/B,4DAAK,KAAK,EAAC,kBAAkB;wBAC5B,8DAAO,IAAI,EAAC,OAAO,EAAC,KAAK,EAAE,IAAI,CAAC,cAAc;4BAC5C,IAAI,CAAC,YAAY,EAAE;4BAEnB,IAAI,CAAC,UAAU,EAAE,CACX,CACH;oBAEN,4DAAK,KAAK,EAAC,kBAAkB,GAAO,CAC/B;gBACL,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,IAAI,CAChD,4DAAK,KAAK,EAAC,sBAAsB;oBAChC,sEACC,WAAW,EAAE,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,EAClF,QAAQ,EAAE,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,EACtF,YAAY,EAAE,CAAC,CAAsB,EAAE,EAAE;4BACxC,IAAI,CAAC,IAAI,CAAC,qBAAqB,EAAE,CAAC;gCACjC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;4BAClC,CAAC;iCAAM,CAAC;gCACP,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,MAAM,CAAC;gCAC5B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;4BAC1C,CAAC;wBACF,CAAC,GACe;oBAEhB,IAAI,CAAC,oBAAoB,IAAI,CAC7B,kEACC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,WAAW,EAClC,OAAO,EAAE,IAAI,CAAC,iBAAiB,EAC/B,KAAK,EAAC,OAAO,EACb,UAAU,EAAE,CAAC,CAAyD,EAAE,EAAE;4BACzE,MAAM,cAAc,GAAG,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC;4BACnD,IAAI,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,cAAc,CAAC,CAAC,CAAC;4BACjF,IAAI,cAAc,GAAG,IAAI,CAAC,WAAW,CAAC;4BAEtC,IAAI,cAAc,GAAG,WAAW,EAAE,CAAC;gCAClC,cAAc,GAAG,WAAW,CAAC;4BAC9B,CAAC;4BAED,IAAI,CAAC,UAAU,GAAG;gCACjB,IAAI,EAAE,cAAc;gCACpB,WAAW,EAAE,cAAc;gCAC3B,QAAQ,EAAE,WAAW;6BACrB,CAAC;4BACF,IAAI,CAAC,WAAW,GAAG,cAAc,CAAC;4BAClC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;wBAC1C,CAAC,GACW,CACb,CACI,CACN,CACI,CACA,CACP,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["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() 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\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 <tr>\r\n {this.selectable && (\r\n <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 </th>\r\n )}\r\n {this.visibleColumns.map((col, colIdx) => (\r\n <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 </th>\r\n ))}\r\n </tr>\r\n </thead>\r\n );\r\n }\r\n\r\n private renderBody() {\r\n if (!this.paginatedRows.length)\r\n return (\r\n <tbody part=\"tbody-empty\">\r\n <tr>\r\n <td colSpan={this.visibleColumns.length + (this.selectable ? 1 : 0)}>{this.noDataLabel}</td>\r\n </tr>\r\n </tbody>\r\n );\r\n\r\n return (\r\n <tbody>\r\n {this.paginatedRows.map((row, rowIdx) => (\r\n <tr key={row[this.rowKey]} class=\"hover:bg-Grey_Lighten-6\">\r\n {this.selectable && (\r\n <td\r\n class={{\r\n 'sd-td': true,\r\n 'sd-td--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.isRowSelected(row)}\r\n disabled={!this.paginatedRows.length}\r\n onSdChange={() => this.updateRowSelect(row)}\r\n ></sd-checkbox>\r\n </td>\r\n )}\r\n {this.visibleColumns.map((column, colIdx) => {\r\n const rendered = this.bodyCellRenderer?.(column, row);\r\n\r\n return (\r\n <td\r\n key={column.name}\r\n part={`td-${column.name}`}\r\n class={{\r\n 'sd-td': true,\r\n [`sd-td--${column.align \|\| 'left'}`]: true,\r\n 'sticky-left': Boolean(this.stickyColumn.left && colIdx < this.stickyColumn.left),\r\n 'sticky-right': Boolean(\r\n this.stickyColumn.right &&\r\n 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 [`${column.tdClass}`]: Boolean(column.tdClass),\r\n }}\r\n style={this.getStickyStyle(colIdx)}\r\n >\r\n {/* slot을 사용하려는 항목 name과 행 인덱스를 키값으로 사용 */}\r\n <slot name={`body-cell-${column.name}-${rowIdx}`}>\r\n {rendered ? (\r\n typeof rendered === 'string' ? (\r\n <span innerHTML={rendered}></span>\r\n ) : (\r\n rendered\r\n )\r\n ) : (\r\n this.getCellValue(column, row)\r\n )}\r\n </slot>\r\n </td>\r\n );\r\n })}\r\n </tr>\r\n ))}\r\n </tbody>\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\">\r\n <table part=\"table\" class={this.sdTableClasses}>\r\n {this.renderHeader()}\r\n\r\n {this.renderBody()}\r\n </table>\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 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.sdPageChange.emit(this.currentPage);\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"]}

package/dist/collection/components/sd-tag/sd-tag.js CHANGED Viewed

@@ -37,7 +37,7 @@ export class SdTag {
     }
     render() {
         const tagClasses = this.getTagClasses();
-        return (h("span", { key: '42250b22292bd0f6d6ffd4dc46ceda624a7001ba', class: tagClasses, style: {
+        return (h("span", { key: 'eff57a253b788f0435525cae9a15881cce8a08a0', class: tagClasses, style: {
                 '--tag-bg-color': this.bgColor,
                 '--tag-text-color': this.textColor,
             }, "aria-label": this.label || 'tag' }, this.renderContent()));

package/dist/collection/components/sd-tooltip/sd-tooltip.css CHANGED Viewed

@@ -1,5 +1,71 @@
-.sd-tooltip {
+sd-tooltip [slot=content] {
+  display: none;
+}
+sd-tooltip .sd-tooltip {
   position: relative;
   cursor: pointer;
   display: inline-block;
+}
+.sd-tooltip-menu {
+  width: fit-content;
+  padding: 8px 16px;
+  border-radius: 4px;
+  font-size: 12px;
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  align-items: start;
+  justify-content: center;
+  gap: 12px;
+}
+.sd-tooltip-menu--with-close {
+  padding-right: 12px !important;
+}
+.sd-tooltip-menu__arrow {
+  position: absolute;
+  display: flex;
+  width: 9.6px;
+  height: 7.2px;
+}
+.sd-tooltip-menu__arrow svg {
+  width: 100%;
+  height: 100%;
+}
+.sd-tooltip-menu__arrow--top {
+  bottom: -7.2px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.sd-tooltip-menu__arrow--bottom {
+  top: -7.2px;
+  left: 50%;
+  transform: translateX(-50%) rotate(180deg);
+}
+.sd-tooltip-menu__arrow--left {
+  right: -7.2px;
+  top: 50%;
+  transform: translateY(-50%) rotate(-90deg);
+}
+.sd-tooltip-menu__arrow--right {
+  left: -7.2px;
+  top: 50%;
+  transform: translateY(-50%) rotate(90deg);
+}
+.sd-tooltip-menu__content {
+  line-height: 20px;
+  font-weight: 500;
+}
+.sd-tooltip-menu__content p {
+  margin: 0;
+}
+.sd-tooltip-menu__close-button {
+  padding-top: 4px;
+  display: flex;
+}
+.sd-tooltip-menu__close-button button {
+  padding: 0;
+  background: none;
+  border: none;
+  cursor: pointer;
 }

package/dist/collection/components/sd-tooltip/sd-tooltip.js CHANGED Viewed

@@ -43,23 +43,22 @@ export class SdTooltip {
             : {
                 onClick: () => (this.showTooltip = !this.showTooltip),
             };
-        return (h(Fragment, { key: '820aa8d0581cb29f16f314e788b522caebdbdcf1' }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-tooltip", ...handleTrigger })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-tooltip", ...handleTrigger })), this.showTooltip && (h("sd-tooltip-portal", { key: '9559af4cd1fff88704c56eba7bdd58d5faf98e86', parentRef: this.buttonEl, onSdClose: () => this.handleClose(), placement: this.placement }, h("div", { key: '115eea727a7932ce9e83a13a9191b414dd907f86', class: {
+        return (h(Fragment, { key: 'da480a55495b1311368ae55ef8827a54ea5de766' }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-tooltip", ...handleTrigger })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-tooltip", ...handleTrigger })), this.showTooltip && (h("sd-tooltip-portal", { key: '74be36575fbf97c9b51577fa5b24a4fbcfcf4c6b', parentRef: this.buttonEl, onSdClose: () => this.handleClose(), placement: this.placement }, h("div", { key: '63707a51fcc66a3a0c91fc7d409d30f61c0b1f17', class: {
                 'sd-tooltip-menu': true,
                 [`sd-tooltip-menu--${this.type}`]: true,
                 [`sd-tooltip-menu--${this.placement}`]: true,
                 'sd-tooltip-menu--with-close': this.useClose,
                 [`bg-${SdTooltip.COLOR_OF_TYPE[this.type].background}`]: true,
                 [`text-${SdTooltip.COLOR_OF_TYPE[this.type].text}`]: true,
-            } }, h("i", { key: 'fbc22ba22a33f73a1bb8d90cebd0a1564f92dc6f', class: `sd-tooltip-menu__arrow sd-tooltip-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: '31dd8e255ef1cfadca9ac585d3d1e2eaf0406264', class: {
+            } }, h("i", { key: 'a2c557e1457c293ef4a6fb3e23a70c9ff5b0b027', class: `sd-tooltip-menu__arrow sd-tooltip-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: '7e7e471bb288680875fbbaa1d7b7df34b636c76f', class: {
                 [`text-${SdTooltip.COLOR_OF_TYPE[this.type].background}`]: true,
-            } })), h("div", { key: '0d6390cb656a6ee25c11d91f0334911346d3f1a8', class: "sd-tooltip-menu__content", ref: el => {
+            } })), h("div", { key: 'c7f7a093907053c100fdb5f247d09d984f8cddd8', class: "sd-tooltip-menu__content", ref: el => {
                 if (el && this.slotContent && !el.hasChildNodes()) {
                     el.appendChild(this.slotContent.cloneNode(true));
                 }
-            } }, !this.slotContent && h("span", { key: '6a8ec7550e4c27c4a537bff66786782b34c5d05b' }, this.el.textContent)), this.useClose && (h("div", { key: '7e23537bf912b27cea2e995e170b9bb16de0b4e6', class: "sd-tooltip-menu__close-button" }, h("button", { key: 'abdc42f2dd4648b34db65650a4e6586f7170ab69', type: "button", "aria-label": "Close tooltip", title: "Close tooltip", onClick: () => this.handleClose() }, h("sd-icon", { key: '58d9c812b8abe440af11f1e259c4354c190dcdbe', name: "close", size: "12", color: "#AAAAAA" })))))))));
+            } }, !this.slotContent && h("span", { key: '14925b4653ca984bd6adf99f6297713dc8b2bafa' }, this.el.textContent)), this.useClose && (h("div", { key: '1a02cee06eaaf9068396fb0b489c93e23ba5c8b7', class: "sd-tooltip-menu__close-button" }, h("button", { key: '40973df40b2ec2ab887a47c7f3e466f6cae4e69f', type: "button", "aria-label": "Close tooltip", title: "Close tooltip", onClick: () => this.handleClose() }, h("sd-icon", { key: 'a02e35f80ae7d3c1414577ce253a67d6dfd64bc0', name: "close", size: "12", color: "#AAAAAA" })))))))));
     }
     static get is() { return "sd-tooltip"; }
-    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "$": ["sd-tooltip.scss"]

package/dist/collection/components/sd-tooltip/sd-tooltip.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sd-tooltip.js","sourceRoot":"","sources":["../../../src/components/sd-tooltip/sd-tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAG7E,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;~~AAOtD~~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","sourcesContent":["import { Component, Element, Fragment, Prop, State, h } from '@stencil/core';\r\nimport { HTMLStencilElement } from '@stencil/core/internal';\r\nimport { ButtonSize, ButtonVariant } from '../sd-button/sd-button';\r\nimport { TooltipArrow } from '../assets/tooltipArrow';\r\n\r\n@Component({\r\n tag: 'sd-tooltip',\r\n styleUrl: 'sd-tooltip.scss',\r\n ~~shadow: true,\r\n~~})\r\nexport class SdTooltip {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop() trigger: 'hover' \| 'click' = 'hover';\r\n @Prop() placement: 'top' \| 'bottom' \| 'left' \| 'right' = 'top';\r\n @Prop() color: string = '#01BB4B';\r\n @Prop() type: 'default' \| 'caution' \| 'notice' \| 'accent' = 'default';\r\n\r\n @Prop() icon: IconName = 'helpOutline';\r\n @Prop() iconSize: number = 12;\r\n\r\n @Prop() label: string = '';\r\n @Prop() buttonSize: ButtonSize = 'sm';\r\n @Prop() buttonVariant: ButtonVariant = 'primary';\r\n\r\n @Prop() noHover: boolean = true;\r\n\r\n @Prop() useClose: boolean = false;\r\n\r\n @State() showTooltip: boolean = false;\r\n @State() slotContent: HTMLElement \| null = null;\r\n\r\n private static readonly COLOR_OF_TYPE = {\r\n default: { background: 'oceanblue_85', text: 'white' },\r\n caution: { background: 'red_20', text: 'red_70' },\r\n notice: { background: 'orange_10', text: 'orange_65' },\r\n accent: { background: 'brilliantblue_20', text: 'brilliantblue_75' },\r\n };\r\n\r\n private buttonEl?: HTMLStencilElement;\r\n\r\n private handleClose = () => {\r\n this.showTooltip = false;\r\n };\r\n\r\n // 현재 tooltip popover가 조건부 렌더링이여서 초기 slot이 렌더링 되지 않은 시점에\r\n // 데이터 매핑에 실패 (light dom에 저장된 slot내용을 shadow dom을 찾지못해 매핑 실패)\r\n // 따라서 slot내용을 받은 후에 복제하여 state에 저장\r\n componentWillLoad() {\r\n const contentEl = this.el.querySelector('[slot=\"content\"]');\r\n if (contentEl) {\r\n this.slotContent = contentEl.cloneNode(true) as HTMLElement;\r\n }\r\n }\r\n\r\n render() {\r\n const handleTrigger =\r\n this.trigger === 'hover'\r\n ? {\r\n onMouseEnter: () => (this.showTooltip = true),\r\n onMouseLeave: () => (this.showTooltip = false),\r\n }\r\n : {\r\n onClick: () => (this.showTooltip = !this.showTooltip),\r\n };\r\n\r\n return (\r\n <Fragment>\r\n {this.label ? (\r\n <sd-button\r\n ref={el => (this.buttonEl = el)}\r\n label={this.label}\r\n icon={this.icon}\r\n size={this.buttonSize}\r\n color={this.color}\r\n variant={this.buttonVariant}\r\n class=\"sd-tooltip\"\r\n {...handleTrigger}\r\n ></sd-button>\r\n ) : (\r\n <sd-icon\r\n ref={el => (this.buttonEl = el)}\r\n name={this.icon}\r\n size={this.iconSize}\r\n color={this.color}\r\n class=\"sd-tooltip\"\r\n {...handleTrigger}\r\n ></sd-icon>\r\n )}\r\n\r\n {this.showTooltip && (\r\n <sd-tooltip-portal\r\n parentRef={this.buttonEl}\r\n onSdClose={() => this.handleClose()}\r\n placement={this.placement}\r\n >\r\n <div\r\n class={{\r\n 'sd-tooltip-menu': true,\r\n [`sd-tooltip-menu--${this.type}`]: true,\r\n [`sd-tooltip-menu--${this.placement}`]: true,\r\n 'sd-tooltip-menu--with-close': this.useClose,\r\n [`bg-${SdTooltip.COLOR_OF_TYPE[this.type].background}`]: true,\r\n [`text-${SdTooltip.COLOR_OF_TYPE[this.type].text}`]: true,\r\n }}\r\n >\r\n <i class={`sd-tooltip-menu__arrow sd-tooltip-menu__arrow--${this.placement}`}>\r\n <TooltipArrow\r\n class={{\r\n [`text-${SdTooltip.COLOR_OF_TYPE[this.type].background}`]: true,\r\n }}\r\n ></TooltipArrow>\r\n </i>\r\n\r\n <div\r\n class=\"sd-tooltip-menu__content\"\r\n ref={el => {\r\n if (el && this.slotContent && !el.hasChildNodes()) {\r\n el.appendChild(this.slotContent.cloneNode(true));\r\n }\r\n }}\r\n >\r\n {!this.slotContent && <span>{this.el.textContent}</span>}\r\n </div>\r\n\r\n {this.useClose && (\r\n <div class=\"sd-tooltip-menu__close-button\">\r\n <button\r\n type=\"button\"\r\n aria-label=\"Close tooltip\"\r\n title=\"Close tooltip\"\r\n onClick={() => this.handleClose()}\r\n >\r\n <sd-icon name=\"close\" size=\"12\" color=\"#AAAAAA\"></sd-icon>\r\n </button>\r\n </div>\r\n )}\r\n </div>\r\n </sd-tooltip-portal>\r\n )}\r\n </Fragment>\r\n );\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"sd-tooltip.js","sourceRoot":"","sources":["../../../src/components/sd-tooltip/sd-tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Fragment, Prop, State, h } from '@stencil/core';\r\nimport { HTMLStencilElement } from '@stencil/core/internal';\r\nimport { ButtonSize, ButtonVariant } from '../sd-button/sd-button';\r\nimport { TooltipArrow } from '../assets/tooltipArrow';\r\n\r\n@Component({\r\n tag: 'sd-tooltip',\r\n styleUrl: 'sd-tooltip.scss',\r\n})\r\nexport class SdTooltip {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop() trigger: 'hover' \| 'click' = 'hover';\r\n @Prop() placement: 'top' \| 'bottom' \| 'left' \| 'right' = 'top';\r\n @Prop() color: string = '#01BB4B';\r\n @Prop() type: 'default' \| 'caution' \| 'notice' \| 'accent' = 'default';\r\n\r\n @Prop() icon: IconName = 'helpOutline';\r\n @Prop() iconSize: number = 12;\r\n\r\n @Prop() label: string = '';\r\n @Prop() buttonSize: ButtonSize = 'sm';\r\n @Prop() buttonVariant: ButtonVariant = 'primary';\r\n\r\n @Prop() noHover: boolean = true;\r\n\r\n @Prop() useClose: boolean = false;\r\n\r\n @State() showTooltip: boolean = false;\r\n @State() slotContent: HTMLElement \| null = null;\r\n\r\n private static readonly COLOR_OF_TYPE = {\r\n default: { background: 'oceanblue_85', text: 'white' },\r\n caution: { background: 'red_20', text: 'red_70' },\r\n notice: { background: 'orange_10', text: 'orange_65' },\r\n accent: { background: 'brilliantblue_20', text: 'brilliantblue_75' },\r\n };\r\n\r\n private buttonEl?: HTMLStencilElement;\r\n\r\n private handleClose = () => {\r\n this.showTooltip = false;\r\n };\r\n\r\n // 현재 tooltip popover가 조건부 렌더링이여서 초기 slot이 렌더링 되지 않은 시점에\r\n // 데이터 매핑에 실패 (light dom에 저장된 slot내용을 shadow dom을 찾지못해 매핑 실패)\r\n // 따라서 slot내용을 받은 후에 복제하여 state에 저장\r\n componentWillLoad() {\r\n const contentEl = this.el.querySelector('[slot=\"content\"]');\r\n if (contentEl) {\r\n this.slotContent = contentEl.cloneNode(true) as HTMLElement;\r\n }\r\n }\r\n\r\n render() {\r\n const handleTrigger =\r\n this.trigger === 'hover'\r\n ? {\r\n onMouseEnter: () => (this.showTooltip = true),\r\n onMouseLeave: () => (this.showTooltip = false),\r\n }\r\n : {\r\n onClick: () => (this.showTooltip = !this.showTooltip),\r\n };\r\n\r\n return (\r\n <Fragment>\r\n {this.label ? (\r\n <sd-button\r\n ref={el => (this.buttonEl = el)}\r\n label={this.label}\r\n icon={this.icon}\r\n size={this.buttonSize}\r\n color={this.color}\r\n variant={this.buttonVariant}\r\n class=\"sd-tooltip\"\r\n {...handleTrigger}\r\n ></sd-button>\r\n ) : (\r\n <sd-icon\r\n ref={el => (this.buttonEl = el)}\r\n name={this.icon}\r\n size={this.iconSize}\r\n color={this.color}\r\n class=\"sd-tooltip\"\r\n {...handleTrigger}\r\n ></sd-icon>\r\n )}\r\n\r\n {this.showTooltip && (\r\n <sd-tooltip-portal\r\n parentRef={this.buttonEl}\r\n onSdClose={() => this.handleClose()}\r\n placement={this.placement}\r\n >\r\n <div\r\n class={{\r\n 'sd-tooltip-menu': true,\r\n [`sd-tooltip-menu--${this.type}`]: true,\r\n [`sd-tooltip-menu--${this.placement}`]: true,\r\n 'sd-tooltip-menu--with-close': this.useClose,\r\n [`bg-${SdTooltip.COLOR_OF_TYPE[this.type].background}`]: true,\r\n [`text-${SdTooltip.COLOR_OF_TYPE[this.type].text}`]: true,\r\n }}\r\n >\r\n <i class={`sd-tooltip-menu__arrow sd-tooltip-menu__arrow--${this.placement}`}>\r\n <TooltipArrow\r\n class={{\r\n [`text-${SdTooltip.COLOR_OF_TYPE[this.type].background}`]: true,\r\n }}\r\n ></TooltipArrow>\r\n </i>\r\n\r\n <div\r\n class=\"sd-tooltip-menu__content\"\r\n ref={el => {\r\n if (el && this.slotContent && !el.hasChildNodes()) {\r\n el.appendChild(this.slotContent.cloneNode(true));\r\n }\r\n }}\r\n >\r\n {!this.slotContent && <span>{this.el.textContent}</span>}\r\n </div>\r\n\r\n {this.useClose && (\r\n <div class=\"sd-tooltip-menu__close-button\">\r\n <button\r\n type=\"button\"\r\n aria-label=\"Close tooltip\"\r\n title=\"Close tooltip\"\r\n onClick={() => this.handleClose()}\r\n >\r\n <sd-icon name=\"close\" size=\"12\" color=\"#AAAAAA\"></sd-icon>\r\n </button>\r\n </div>\r\n )}\r\n </div>\r\n </sd-tooltip-portal>\r\n )}\r\n </Fragment>\r\n );\r\n }\r\n}\r\n"]}

package/dist/collection/components/sd-tooltip-portal/sd-tooltip-portal.js CHANGED Viewed

@@ -143,7 +143,7 @@ export class SdTooltipPortal {
         this.sdClose.emit();
     }
     render() {
-        return h("slot", { key: '45ebd398328f0a3d31299b0c4bc1456cda435e4c' });
+        return h("slot", { key: '641dacdeceb023695ced987731591783daa6b88e' });
     }
     static get is() { return "sd-tooltip-portal"; }
     static get encapsulation() { return "shadow"; }

package/dist/components/index.js CHANGED Viewed

@@ -1,4 +1,4 @@
-export { g as getAssetPath, r as render, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-DzRr3BEe.js';
+export { g as getAssetPath, r as render, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-CbnL1UUF.js';
 function format(first, middle, last) {
     return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');

package/dist/components/{p-Bl-wgv-z.js → p-B9QE7fbR.js} RENAMED Viewed

@@ -1,5 +1,5 @@
-import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-DzRr3BEe.js';
-import { d as defineCustomElement$1 } from './p-nehvpX7w.js';
+import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-CbnL1UUF.js';
+import { d as defineCustomElement$1 } from './p-BtS3tSh2.js';
 const sdInputCss = "sd-icon{line-height:0}sd-icon .sd-icon{line-height:0;vertical-align:middle}sd-icon .sd-icon--rotate-90{transform:rotate(90deg)}sd-icon .sd-icon--rotate-180{transform:rotate(180deg)}sd-icon .sd-icon--rotate-270{transform:rotate(270deg)}.sd-input{display:flex;width:var(--input-width, 100%);align-items:center;height:28px;padding:4px 8px;border:1px solid #aaaaaa;border-radius:4px;color:#333333;font-size:12px;line-height:20px;background:white}.sd-input--hovered,.sd-input--focused{border-color:#0075ff;box-shadow:0 0 4px 0 rgba(0, 113, 255, 0.4)}.sd-input.sd-input--error{border-color:#fb4444}.sd-input.sd-input--pass{border-color:#2bce6c}.sd-input.sd-input--barcode:not(.sd-input--disabled){background-color:#fafaa1}.sd-input.sd-input--disabled{background-color:#eeeeee !important;border-color:#cccccc !important;cursor:not-allowed !important;box-shadow:none !important}.sd-input.sd-input--disabled .sd-input__native_element{color:#888888 !important}.sd-input .sd-input__native_element{display:block;width:100%;height:20px;line-height:20px;border:none;outline:none;background:transparent;font-size:inherit;color:#333333;margin-left:4px;margin-right:4px;padding-block:0;padding-inline:0}.sd-input .sd-input__native_element::placeholder{font-size:12px;height:20px;line-height:20px;color:#aaaaaa}.sd-input .sd-input__clear-icon{cursor:pointer;margin-left:8px}";
@@ -104,11 +104,11 @@ const SdInput = /*@__PURE__*/ proxyCustomElement(class SdInput extends H {
                 '--input-width': typeof this.width === 'number' ? `${this.width}px` : this.width,
             }
             : {};
-        return (h(Host, { key: '099f819c08b8eb4627f7857d10877d2a9bbeac51', style: inputWidth }, this.label && h("div", { key: 'ef1dffa2707e2f2844efee6646e14b750ea7c319', class: "sd-input__label" }, this.label), h("label", { key: '89e8a0ea5a02ecd114b9e1a7cb9fdcdce0130849', class: {
+        return (h(Host, { key: '9a0b975f20b4b8bbc8bff2aef4ee9036450921d4', style: inputWidth }, this.label && h("div", { key: 'ec6c840dcdaa7b9788c32ecbd03dc5daee74c748', class: "sd-input__label" }, this.label), h("label", { key: '4c11c34fd26897b50e0cfbb569de476c9e06884c', class: {
                 'sd-input': true,
                 [this.getInputStatus()]: true,
                 'sd-input--barcode': !!this.barcode,
-            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, h("slot", { key: 'b1c64655ea940ae454bac4aed58df8944ed579a3', name: "prefix" }), h("input", { key: '1bb32efb0c46d3e1b91ac90c64e60943ac59ee41', ref: el => (this.nativeEl = el), class: `sd-input__native_element ${this.inputClass}`, type: "text", value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onChange: this.handleChange, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event) }), h("slot", { key: 'bcdc6e6780b6eba56e788665669abcfe04406e64', name: "suffix" }), this.clearable && this.internalValue && (h("sd-icon", { key: '3f8d9fe950d5313f0df807b06ffd5872dc4b1835', name: "close", color: "#888", class: "sd-input__clear-icon", onClick: () => {
+            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, h("slot", { key: '0d7df02ed548b12f415bd72f84ea411fde5ef549', name: "prefix" }), h("input", { key: '6203dcb95fd486d263e0fe33495243e95c332e1a', ref: el => (this.nativeEl = el), class: `sd-input__native_element ${this.inputClass}`, type: "text", value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onChange: this.handleChange, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event) }), h("slot", { key: '21544173b390be5607c50faf84f1d47fa703e8bf', name: "suffix" }), this.clearable && this.internalValue && (h("sd-icon", { key: 'af486def3d146c4638d1f6fecf95a6de61e8d528', name: "close", color: "#888", class: "sd-input__clear-icon", onClick: () => {
                 this.internalValue = '';
                 this.sdChange?.emit(this.internalValue);
                 this.sdInput?.emit(this.internalValue);
@@ -162,6 +162,6 @@ function defineCustomElement() {
 }
 export { SdInput as S, defineCustomElement as d };
-//# sourceMappingURL=p-Bl-wgv-z.js.map
+//# sourceMappingURL=p-B9QE7fbR.js.map
-//# sourceMappingURL=p-Bl-wgv-z.js.map
+//# sourceMappingURL=p-B9QE7fbR.js.map

package/dist/components/{p-Bl-wgv-z.js.map → p-B9QE7fbR.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-Bl-wgv-z.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-input/sd-input.scss?tag=sd-input","src/components/sd-input/sd-input.tsx"],"sourcesContent":["@import 'variables';\r\n@import '../sd-icon/sd-icon.scss';\r\n\r\n.sd-input {\r\n display: flex;\r\n width: var(--input-width, 100%);\r\n align-items: center;\r\n height: 28px;\r\n padding: 4px 8px;\r\n border: 1px solid $grey_55;\r\n border-radius: 4px;\r\n color: $grey_90;\r\n font-size: 12px;\r\n line-height: 20px;\r\n background: white;\r\n\r\n &--hovered,\r\n &--focused {\r\n border-color: $brilliantblue_75;\r\n box-shadow: 0 0 4px 0 #0071ff66;\r\n }\r\n\r\n &.sd-input--error {\r\n border-color: $red_70;\r\n }\r\n\r\n &.sd-input--pass {\r\n border-color: $green_65;\r\n }\r\n\r\n &.sd-input--barcode:not(.sd-input--disabled) {\r\n background-color: $olive_15;\r\n }\r\n\r\n &.sd-input--disabled {\r\n background-color: $grey_20 !important;\r\n border-color: $grey_45 !important;\r\n cursor: not-allowed !important;\r\n box-shadow: none !important;\r\n .sd-input__native_element {\r\n color: $grey_65 !important;\r\n }\r\n }\r\n\r\n .sd-input__native_element {\r\n display: block;\r\n width: 100%;\r\n height: 20px;\r\n line-height: 20px;\r\n border: none;\r\n outline: none;\r\n background: transparent;\r\n font-size: inherit;\r\n color: $grey_90;\r\n margin-left: 4px;\r\n margin-right: 4px;\r\n padding-block: 0;\r\n padding-inline: 0;\r\n\r\n &::placeholder {\r\n font-size: 12px;\r\n height: 20px;\r\n line-height: 20px;\r\n color: $grey_55;\r\n }\r\n }\r\n\r\n .sd-input__clear-icon {\r\n cursor: pointer;\r\n margin-left: 8px;\r\n }\r\n}\r\n","import {\r\n Component,\r\n Element,\r\n Host,\r\n Prop,\r\n State,\r\n Watch,\r\n Event,\r\n EventEmitter,\r\n h,\r\n Method,\r\n} from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'sd-input',\r\n styleUrl: 'sd-input.scss',\r\n})\r\nexport class SdInput {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop({ mutable: true }) value?: string \| number \| null = null;\r\n @Prop() label?: string;\r\n @Prop() placeholder: string = '입력해 주세요.';\r\n @Prop() disabled: boolean = false;\r\n @Prop() clearable: boolean = false;\r\n @Prop() width?: number \| string;\r\n @Prop() barcode?: boolean = false;\r\n @Prop() rules?: Array<(value: string \| number \| null) => boolean \| string>;\r\n @Prop() autoFocus: boolean = false;\r\n @Prop() status?: 'default' \| 'pass' \| 'error';\r\n @Prop() inputClass: string = '';\r\n @Prop() readonly: boolean = false;\r\n\r\n // props - custom styles\r\n @Prop() inputStyle: { [key: string]: string } = {};\r\n\r\n @State() private internalValue: string \| number \| null = null;\r\n @State() private error: boolean = false;\r\n @State() private focused: boolean = false;\r\n @State() private hovered: boolean = false;\r\n\r\n private nativeEl: HTMLInputElement \| undefined = undefined;\r\n\r\n @Event() sdClick?: EventEmitter<string \| number \| null>;\r\n @Event() sdInput?: EventEmitter<string \| number \| null>;\r\n @Event() sdChange?: EventEmitter<string \| number \| null>;\r\n @Event() sdFocus?: EventEmitter<Event>;\r\n @Event() sdBlur?: EventEmitter<Event>;\r\n\r\n @Watch('value')\r\n valueChanged(newValue: string \| number \| null) {\r\n this.internalValue = newValue;\r\n }\r\n\r\n @Watch('internalValue')\r\n internalValueChanged(newValue: string \| number \| null) {\r\n if (newValue !== this.value) {\r\n this.value = newValue;\r\n this.sdInput?.emit(this.value);\r\n }\r\n\r\n if (!this.rules \|\| this.rules.length === 0) return;\r\n this.error = false;\r\n for (const rule of this.rules) {\r\n const result = rule(newValue);\r\n if (result !== true) {\r\n this.error = true;\r\n break;\r\n }\r\n }\r\n }\r\n\r\n @Method()\r\n async getNativeElement(): Promise<HTMLInputElement \| null> {\r\n return this.nativeEl \|\| null;\r\n }\r\n\r\n componentWillLoad() {\r\n if (this.value) {\r\n this.internalValue = this.value;\r\n }\r\n }\r\n\r\n private handleInput = (event: Event) => {\r\n const target = event.target as HTMLInputElement;\r\n this.internalValue = target.value;\r\n this.sdInput?.emit(this.internalValue);\r\n };\r\n\r\n private handleChange = (event: Event) => {\r\n const target = event.target as HTMLInputElement;\r\n this.internalValue = target.value;\r\n this.sdChange?.emit(this.internalValue);\r\n };\r\n\r\n private handleFocus = (type: 'focus' \| 'blur', event: Event) => {\r\n this.focused = type === 'focus';\r\n\r\n if (type === 'blur') this.sdBlur?.emit(event);\r\n else this.sdFocus?.emit(event);\r\n };\r\n\r\n getInputStatus() {\r\n // input 상태 우선순위: hovered > focused > status(상태 주입) > error(rules 검사)\r\n if (this.disabled) return 'sd-input--disabled';\r\n if (this.hovered) return 'sd-input--hovered';\r\n if (this.focused) return 'sd-input--focused';\r\n if (this.status) return `sd-input--${this.status}`;\r\n if (this.error) return 'sd-input--error';\r\n return '';\r\n }\r\n\r\n render() {\r\n const inputWidth = this.width\r\n ? {\r\n '--input-width': typeof this.width === 'number' ? `${this.width}px` : this.width,\r\n }\r\n : {};\r\n\r\n return (\r\n <Host style={inputWidth}>\r\n {this.label && <div class=\"sd-input__label\">{this.label}</div>}\r\n <label\r\n class={{\r\n 'sd-input': true,\r\n [this.getInputStatus()]: true,\r\n 'sd-input--barcode': !!this.barcode,\r\n }}\r\n onMouseEnter={() => (this.hovered = true)}\r\n onMouseLeave={() => (this.hovered = false)}\r\n style={this.inputStyle}\r\n >\r\n <slot name=\"prefix\"></slot>\r\n <input\r\n ref={el => (this.nativeEl = el)}\r\n class={`sd-input__native_element ${this.inputClass}`}\r\n type=\"text\"\r\n value={this.internalValue \|\| ''}\r\n placeholder={this.placeholder}\r\n disabled={this.disabled}\r\n readonly={this.readonly}\r\n autofocus={this.autoFocus}\r\n onInput={this.handleInput}\r\n onChange={this.handleChange}\r\n onFocus={event => this.handleFocus('focus', event)}\r\n onBlur={event => this.handleFocus('blur', event)}\r\n />\r\n <slot name=\"suffix\"></slot>\r\n {this.clearable && this.internalValue && (\r\n <sd-icon\r\n name=\"close\"\r\n color=\"#888\"\r\n class=\"sd-input__clear-icon\"\r\n onClick={() => {\r\n this.internalValue = '';\r\n this.sdChange?.emit(this.internalValue);\r\n this.sdInput?.emit(this.internalValue);\r\n }}\r\n />\r\n )}\r\n </label>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"p-B9QE7fbR.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-input/sd-input.scss?tag=sd-input","src/components/sd-input/sd-input.tsx"],"sourcesContent":["@import 'variables';\r\n@import '../sd-icon/sd-icon.scss';\r\n\r\n.sd-input {\r\n display: flex;\r\n width: var(--input-width, 100%);\r\n align-items: center;\r\n height: 28px;\r\n padding: 4px 8px;\r\n border: 1px solid $grey_55;\r\n border-radius: 4px;\r\n color: $grey_90;\r\n font-size: 12px;\r\n line-height: 20px;\r\n background: white;\r\n\r\n &--hovered,\r\n &--focused {\r\n border-color: $brilliantblue_75;\r\n box-shadow: 0 0 4px 0 #0071ff66;\r\n }\r\n\r\n &.sd-input--error {\r\n border-color: $red_70;\r\n }\r\n\r\n &.sd-input--pass {\r\n border-color: $green_65;\r\n }\r\n\r\n &.sd-input--barcode:not(.sd-input--disabled) {\r\n background-color: $olive_15;\r\n }\r\n\r\n &.sd-input--disabled {\r\n background-color: $grey_20 !important;\r\n border-color: $grey_45 !important;\r\n cursor: not-allowed !important;\r\n box-shadow: none !important;\r\n .sd-input__native_element {\r\n color: $grey_65 !important;\r\n }\r\n }\r\n\r\n .sd-input__native_element {\r\n display: block;\r\n width: 100%;\r\n height: 20px;\r\n line-height: 20px;\r\n border: none;\r\n outline: none;\r\n background: transparent;\r\n font-size: inherit;\r\n color: $grey_90;\r\n margin-left: 4px;\r\n margin-right: 4px;\r\n padding-block: 0;\r\n padding-inline: 0;\r\n\r\n &::placeholder {\r\n font-size: 12px;\r\n height: 20px;\r\n line-height: 20px;\r\n color: $grey_55;\r\n }\r\n }\r\n\r\n .sd-input__clear-icon {\r\n cursor: pointer;\r\n margin-left: 8px;\r\n }\r\n}\r\n","import {\r\n Component,\r\n Element,\r\n Host,\r\n Prop,\r\n State,\r\n Watch,\r\n Event,\r\n EventEmitter,\r\n h,\r\n Method,\r\n} from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'sd-input',\r\n styleUrl: 'sd-input.scss',\r\n})\r\nexport class SdInput {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop({ mutable: true }) value?: string \| number \| null = null;\r\n @Prop() label?: string;\r\n @Prop() placeholder: string = '입력해 주세요.';\r\n @Prop() disabled: boolean = false;\r\n @Prop() clearable: boolean = false;\r\n @Prop() width?: number \| string;\r\n @Prop() barcode?: boolean = false;\r\n @Prop() rules?: Array<(value: string \| number \| null) => boolean \| string>;\r\n @Prop() autoFocus: boolean = false;\r\n @Prop() status?: 'default' \| 'pass' \| 'error';\r\n @Prop() inputClass: string = '';\r\n @Prop() readonly: boolean = false;\r\n\r\n // props - custom styles\r\n @Prop() inputStyle: { [key: string]: string } = {};\r\n\r\n @State() private internalValue: string \| number \| null = null;\r\n @State() private error: boolean = false;\r\n @State() private focused: boolean = false;\r\n @State() private hovered: boolean = false;\r\n\r\n private nativeEl: HTMLInputElement \| undefined = undefined;\r\n\r\n @Event() sdClick?: EventEmitter<string \| number \| null>;\r\n @Event() sdInput?: EventEmitter<string \| number \| null>;\r\n @Event() sdChange?: EventEmitter<string \| number \| null>;\r\n @Event() sdFocus?: EventEmitter<Event>;\r\n @Event() sdBlur?: EventEmitter<Event>;\r\n\r\n @Watch('value')\r\n valueChanged(newValue: string \| number \| null) {\r\n this.internalValue = newValue;\r\n }\r\n\r\n @Watch('internalValue')\r\n internalValueChanged(newValue: string \| number \| null) {\r\n if (newValue !== this.value) {\r\n this.value = newValue;\r\n this.sdInput?.emit(this.value);\r\n }\r\n\r\n if (!this.rules \|\| this.rules.length === 0) return;\r\n this.error = false;\r\n for (const rule of this.rules) {\r\n const result = rule(newValue);\r\n if (result !== true) {\r\n this.error = true;\r\n break;\r\n }\r\n }\r\n }\r\n\r\n @Method()\r\n async getNativeElement(): Promise<HTMLInputElement \| null> {\r\n return this.nativeEl \|\| null;\r\n }\r\n\r\n componentWillLoad() {\r\n if (this.value) {\r\n this.internalValue = this.value;\r\n }\r\n }\r\n\r\n private handleInput = (event: Event) => {\r\n const target = event.target as HTMLInputElement;\r\n this.internalValue = target.value;\r\n this.sdInput?.emit(this.internalValue);\r\n };\r\n\r\n private handleChange = (event: Event) => {\r\n const target = event.target as HTMLInputElement;\r\n this.internalValue = target.value;\r\n this.sdChange?.emit(this.internalValue);\r\n };\r\n\r\n private handleFocus = (type: 'focus' \| 'blur', event: Event) => {\r\n this.focused = type === 'focus';\r\n\r\n if (type === 'blur') this.sdBlur?.emit(event);\r\n else this.sdFocus?.emit(event);\r\n };\r\n\r\n getInputStatus() {\r\n // input 상태 우선순위: hovered > focused > status(상태 주입) > error(rules 검사)\r\n if (this.disabled) return 'sd-input--disabled';\r\n if (this.hovered) return 'sd-input--hovered';\r\n if (this.focused) return 'sd-input--focused';\r\n if (this.status) return `sd-input--${this.status}`;\r\n if (this.error) return 'sd-input--error';\r\n return '';\r\n }\r\n\r\n render() {\r\n const inputWidth = this.width\r\n ? {\r\n '--input-width': typeof this.width === 'number' ? `${this.width}px` : this.width,\r\n }\r\n : {};\r\n\r\n return (\r\n <Host style={inputWidth}>\r\n {this.label && <div class=\"sd-input__label\">{this.label}</div>}\r\n <label\r\n class={{\r\n 'sd-input': true,\r\n [this.getInputStatus()]: true,\r\n 'sd-input--barcode': !!this.barcode,\r\n }}\r\n onMouseEnter={() => (this.hovered = true)}\r\n onMouseLeave={() => (this.hovered = false)}\r\n style={this.inputStyle}\r\n >\r\n <slot name=\"prefix\"></slot>\r\n <input\r\n ref={el => (this.nativeEl = el)}\r\n class={`sd-input__native_element ${this.inputClass}`}\r\n type=\"text\"\r\n value={this.internalValue \|\| ''}\r\n placeholder={this.placeholder}\r\n disabled={this.disabled}\r\n readonly={this.readonly}\r\n autofocus={this.autoFocus}\r\n onInput={this.handleInput}\r\n onChange={this.handleChange}\r\n onFocus={event => this.handleFocus('focus', event)}\r\n onBlur={event => this.handleFocus('blur', event)}\r\n />\r\n <slot name=\"suffix\"></slot>\r\n {this.clearable && this.internalValue && (\r\n <sd-icon\r\n name=\"close\"\r\n color=\"#888\"\r\n class=\"sd-input__clear-icon\"\r\n onClick={() => {\r\n this.internalValue = '';\r\n this.sdChange?.emit(this.internalValue);\r\n this.sdInput?.emit(this.internalValue);\r\n }}\r\n />\r\n )}\r\n </label>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/components/{p-CZG8wDBH.js → p-BWF8FOjZ.js} RENAMED Viewed

@@ -1,5 +1,5 @@
-import { p as proxyCustomElement, H, d as createEvent, h } from './p-DzRr3BEe.js';
-import { d as defineCustomElement$1 } from './p-nehvpX7w.js';
+import { p as proxyCustomElement, H, d as createEvent, h } from './p-CbnL1UUF.js';
+import { d as defineCustomElement$1 } from './p-BtS3tSh2.js';
 const sdCheckboxCss = "sd-checkbox{display:inline-block;height:20px;line-height:0}sd-checkbox .sd-checkbox{cursor:pointer;display:inline-flex;align-items:center;gap:8px;height:20px;max-height:20px}sd-checkbox .sd-checkbox>input{display:none}sd-checkbox .sd-checkbox:hover.sd-checkbox--checked .sd-checkbox__bg,sd-checkbox .sd-checkbox:hover.sd-checkbox--indeterminate .sd-checkbox__bg{border-color:#005cc9;background:#005cc9}sd-checkbox .sd-checkbox:hover.sd-checkbox--unchecked .sd-checkbox__bg{border:1px solid #0075ff;background:#d9eaff}sd-checkbox .sd-checkbox:hover.sd-checkbox--disabled .sd-checkbox__bg{border:1px solid transparent;background:#eeeeee}sd-checkbox .sd-checkbox__bg{width:16px;height:16px;border-radius:2px;border:1px solid #888888;box-sizing:border-box;display:inline-flex;justify-content:center;align-items:center;overflow:hidden;line-height:0}sd-checkbox .sd-checkbox__label{font-size:12px;color:#333333;line-height:20px}sd-checkbox .sd-checkbox--checked.sd-checkbox--disabled .sd-checkbox__bg,sd-checkbox .sd-checkbox--indeterminate.sd-checkbox--disabled .sd-checkbox__bg{background:#eeeeee;border:1px solid #cccccc !important}sd-checkbox .sd-checkbox--checked .sd-checkbox__bg,sd-checkbox .sd-checkbox--indeterminate .sd-checkbox__bg{border:1px solid #0075ff;background:#0075ff}sd-checkbox .sd-checkbox--unchecked .sd-checkbox__bg{background:white}sd-checkbox .sd-checkbox--disabled{cursor:not-allowed}sd-checkbox .sd-checkbox--disabled .sd-checkbox__bg{background:#eeeeee;border:1px solid #cccccc !important}";
@@ -113,6 +113,6 @@ function defineCustomElement() {
 }
 export { SdCheckbox as S, defineCustomElement as d };
-//# sourceMappingURL=p-CZG8wDBH.js.map
+//# sourceMappingURL=p-BWF8FOjZ.js.map
-//# sourceMappingURL=p-CZG8wDBH.js.map
+//# sourceMappingURL=p-BWF8FOjZ.js.map

package/dist/components/{p-CZG8wDBH.js.map → p-BWF8FOjZ.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-~~CZG8wDBH~~.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-checkbox/sd-checkbox.scss?tag=sd-checkbox","src/components/sd-checkbox/sd-checkbox.tsx"],"sourcesContent":["@import 'variables';\r\n\r\nsd-checkbox {\r\n display: inline-block;\r\n height: 20px;\r\n line-height: 0;\r\n\r\n .sd-checkbox {\r\n cursor: pointer;\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 8px;\r\n height: 20px;\r\n max-height: 20px;\r\n\r\n > input {\r\n display: none;\r\n }\r\n\r\n &:hover {\r\n &.sd-checkbox--checked,\r\n &.sd-checkbox--indeterminate {\r\n .sd-checkbox__bg {\r\n border-color: $brilliantblue_80;\r\n background: $brilliantblue_80;\r\n }\r\n }\r\n\r\n &.sd-checkbox--unchecked {\r\n .sd-checkbox__bg {\r\n border: 1px solid $brilliantblue_75;\r\n background: $brilliantblue_25;\r\n }\r\n }\r\n\r\n &.sd-checkbox--disabled {\r\n .sd-checkbox__bg {\r\n border: 1px solid transparent;\r\n background: $grey_20;\r\n }\r\n }\r\n }\r\n\r\n &__bg {\r\n width: 16px;\r\n height: 16px;\r\n border-radius: 2px;\r\n border: 1px solid $grey_65;\r\n box-sizing: border-box;\r\n display: inline-flex;\r\n justify-content: center;\r\n align-items: center;\r\n overflow: hidden;\r\n line-height: 0;\r\n }\r\n\r\n &__label {\r\n font-size: 12px;\r\n color: $grey_90;\r\n line-height: 20px;\r\n }\r\n\r\n &--checked,\r\n &--indeterminate {\r\n &.sd-checkbox--disabled {\r\n .sd-checkbox__bg {\r\n background: $grey_20;\r\n border: 1px solid $grey_45 !important;\r\n }\r\n }\r\n\r\n .sd-checkbox__bg {\r\n border: 1px solid $brilliantblue_75;\r\n background: $brilliantblue_75;\r\n }\r\n }\r\n\r\n &--unchecked {\r\n .sd-checkbox__bg {\r\n background: white;\r\n }\r\n }\r\n\r\n &--disabled {\r\n cursor: not-allowed;\r\n .sd-checkbox__bg {\r\n background: $grey_20;\r\n border: 1px solid $grey_45 !important;\r\n }\r\n }\r\n }\r\n}\r\n","import { Component, Prop, h, Element, Event, EventEmitter, State, Watch } from '@stencil/core';\r\n\r\nexport type CheckedType = boolean \| any[] \| null;\r\n\r\n@Component({\r\n tag: 'sd-checkbox',\r\n styleUrl: 'sd-checkbox.scss',\r\n})\r\nexport class SdCheckbox {\r\n @Element() el!: HTMLElement;\r\n\r\n /** 현재 선택 상태 또는 배열 형태의 값 /\r\n @Prop() checked!: CheckedType;\r\n\r\n /* 배열 모드에서의 개별 값 /\r\n @Prop() val?: any;\r\n\r\n /* 비활성화 여부 /\r\n @Prop() disabled: boolean = false;\r\n\r\n /* 표시할 라벨 텍스트 /\r\n @Prop() label: string = '';\r\n\r\n /* 내부 체크 상태 /\r\n @State() private isChecked: boolean \| null = false;\r\n\r\n /* 값 변경 이벤트 */\r\n @Event() sdChange!: EventEmitter<CheckedType>;\r\n\r\n componentWillLoad() {\r\n this.updateCheckedState(this.checked);\r\n }\r\n\r\n componentWillRender() {\r\n this.updateCheckedState(this.checked);\r\n }\r\n\r\n @Watch('checked')\r\n watchValueHandler(newValue: CheckedType) {\r\n this.updateCheckedState(newValue);\r\n }\r\n\r\n private get checkboxClasses(): string {\r\n const classes = [\r\n 'sd-checkbox',\r\n `sd-checkbox--${this.isChecked ? 'checked' : this.isChecked === null ? 'indeterminate' : 'unchecked'}`,\r\n ];\r\n\r\n if (this.disabled) {\r\n classes.push('sd-checkbox--disabled');\r\n }\r\n\r\n return classes.join(' ');\r\n }\r\n\r\n private updateCheckedState(value: CheckedType) {\r\n if (value === null) {\r\n this.isChecked = null;\r\n } else if (typeof value === 'boolean') {\r\n this.isChecked = value;\r\n } else if (Array.isArray(value)) {\r\n this.isChecked = this.val !== undefined && value.includes(this.val);\r\n } else {\r\n this.isChecked = false;\r\n }\r\n }\r\n\r\n private handleChange = () => {\r\n if (this.disabled) return;\r\n\r\n let newValue: CheckedType;\r\n\r\n if (typeof this.checked === 'boolean') {\r\n newValue = !this.checked;\r\n } else if (Array.isArray(this.checked)) {\r\n if (this.val === undefined) {\r\n console.warn('A \"val\" property is required when using an array for the \"value\" property.');\r\n }\r\n\r\n const valueSet = new Set(this.checked);\r\n valueSet.has(this.val) ? valueSet.delete(this.val) : valueSet.add(this.val);\r\n newValue = Array.from(valueSet);\r\n } else {\r\n newValue = !this.isChecked;\r\n }\r\n\r\n this.sdChange.emit(newValue);\r\n };\r\n\r\n render() {\r\n return (\r\n <label\r\n aria-checked={this.isChecked === null ? 'mixed' : this.isChecked.toString()}\r\n aria-disabled={this.disabled.toString()}\r\n role=\"checkbox\"\r\n aria-label={this.label \|\| 'checkbox'}\r\n class={this.checkboxClasses}\r\n >\r\n <input\r\n type=\"checkbox\"\r\n value={this.val}\r\n checked={!!this.isChecked}\r\n disabled={this.disabled}\r\n onChange={this.handleChange}\r\n name={this.label \|\| 'checkbox'}\r\n />\r\n <div class=\"sd-checkbox__bg\">\r\n {this.isChecked !== false ? (\r\n <sd-icon\r\n name={this.isChecked === true ? 'check' : 'minus'}\r\n size={12}\r\n color={this.disabled ? '#888888' : 'white'}\r\n />\r\n ) : null}\r\n </div>\r\n {this.label && <span class=\"sd-checkbox__label\">{this.label}</span>}\r\n </label>\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"p-BWF8FOjZ.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-checkbox/sd-checkbox.scss?tag=sd-checkbox","src/components/sd-checkbox/sd-checkbox.tsx"],"sourcesContent":["@import 'variables';\r\n\r\nsd-checkbox {\r\n display: inline-block;\r\n height: 20px;\r\n line-height: 0;\r\n\r\n .sd-checkbox {\r\n cursor: pointer;\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 8px;\r\n height: 20px;\r\n max-height: 20px;\r\n\r\n > input {\r\n display: none;\r\n }\r\n\r\n &:hover {\r\n &.sd-checkbox--checked,\r\n &.sd-checkbox--indeterminate {\r\n .sd-checkbox__bg {\r\n border-color: $brilliantblue_80;\r\n background: $brilliantblue_80;\r\n }\r\n }\r\n\r\n &.sd-checkbox--unchecked {\r\n .sd-checkbox__bg {\r\n border: 1px solid $brilliantblue_75;\r\n background: $brilliantblue_25;\r\n }\r\n }\r\n\r\n &.sd-checkbox--disabled {\r\n .sd-checkbox__bg {\r\n border: 1px solid transparent;\r\n background: $grey_20;\r\n }\r\n }\r\n }\r\n\r\n &__bg {\r\n width: 16px;\r\n height: 16px;\r\n border-radius: 2px;\r\n border: 1px solid $grey_65;\r\n box-sizing: border-box;\r\n display: inline-flex;\r\n justify-content: center;\r\n align-items: center;\r\n overflow: hidden;\r\n line-height: 0;\r\n }\r\n\r\n &__label {\r\n font-size: 12px;\r\n color: $grey_90;\r\n line-height: 20px;\r\n }\r\n\r\n &--checked,\r\n &--indeterminate {\r\n &.sd-checkbox--disabled {\r\n .sd-checkbox__bg {\r\n background: $grey_20;\r\n border: 1px solid $grey_45 !important;\r\n }\r\n }\r\n\r\n .sd-checkbox__bg {\r\n border: 1px solid $brilliantblue_75;\r\n background: $brilliantblue_75;\r\n }\r\n }\r\n\r\n &--unchecked {\r\n .sd-checkbox__bg {\r\n background: white;\r\n }\r\n }\r\n\r\n &--disabled {\r\n cursor: not-allowed;\r\n .sd-checkbox__bg {\r\n background: $grey_20;\r\n border: 1px solid $grey_45 !important;\r\n }\r\n }\r\n }\r\n}\r\n","import { Component, Prop, h, Element, Event, EventEmitter, State, Watch } from '@stencil/core';\r\n\r\nexport type CheckedType = boolean \| any[] \| null;\r\n\r\n@Component({\r\n tag: 'sd-checkbox',\r\n styleUrl: 'sd-checkbox.scss',\r\n})\r\nexport class SdCheckbox {\r\n @Element() el!: HTMLElement;\r\n\r\n /** 현재 선택 상태 또는 배열 형태의 값 /\r\n @Prop() checked!: CheckedType;\r\n\r\n /* 배열 모드에서의 개별 값 /\r\n @Prop() val?: any;\r\n\r\n /* 비활성화 여부 /\r\n @Prop() disabled: boolean = false;\r\n\r\n /* 표시할 라벨 텍스트 /\r\n @Prop() label: string = '';\r\n\r\n /* 내부 체크 상태 /\r\n @State() private isChecked: boolean \| null = false;\r\n\r\n /* 값 변경 이벤트 */\r\n @Event() sdChange!: EventEmitter<CheckedType>;\r\n\r\n componentWillLoad() {\r\n this.updateCheckedState(this.checked);\r\n }\r\n\r\n componentWillRender() {\r\n this.updateCheckedState(this.checked);\r\n }\r\n\r\n @Watch('checked')\r\n watchValueHandler(newValue: CheckedType) {\r\n this.updateCheckedState(newValue);\r\n }\r\n\r\n private get checkboxClasses(): string {\r\n const classes = [\r\n 'sd-checkbox',\r\n `sd-checkbox--${this.isChecked ? 'checked' : this.isChecked === null ? 'indeterminate' : 'unchecked'}`,\r\n ];\r\n\r\n if (this.disabled) {\r\n classes.push('sd-checkbox--disabled');\r\n }\r\n\r\n return classes.join(' ');\r\n }\r\n\r\n private updateCheckedState(value: CheckedType) {\r\n if (value === null) {\r\n this.isChecked = null;\r\n } else if (typeof value === 'boolean') {\r\n this.isChecked = value;\r\n } else if (Array.isArray(value)) {\r\n this.isChecked = this.val !== undefined && value.includes(this.val);\r\n } else {\r\n this.isChecked = false;\r\n }\r\n }\r\n\r\n private handleChange = () => {\r\n if (this.disabled) return;\r\n\r\n let newValue: CheckedType;\r\n\r\n if (typeof this.checked === 'boolean') {\r\n newValue = !this.checked;\r\n } else if (Array.isArray(this.checked)) {\r\n if (this.val === undefined) {\r\n console.warn('A \"val\" property is required when using an array for the \"value\" property.');\r\n }\r\n\r\n const valueSet = new Set(this.checked);\r\n valueSet.has(this.val) ? valueSet.delete(this.val) : valueSet.add(this.val);\r\n newValue = Array.from(valueSet);\r\n } else {\r\n newValue = !this.isChecked;\r\n }\r\n\r\n this.sdChange.emit(newValue);\r\n };\r\n\r\n render() {\r\n return (\r\n <label\r\n aria-checked={this.isChecked === null ? 'mixed' : this.isChecked.toString()}\r\n aria-disabled={this.disabled.toString()}\r\n role=\"checkbox\"\r\n aria-label={this.label \|\| 'checkbox'}\r\n class={this.checkboxClasses}\r\n >\r\n <input\r\n type=\"checkbox\"\r\n value={this.val}\r\n checked={!!this.isChecked}\r\n disabled={this.disabled}\r\n onChange={this.handleChange}\r\n name={this.label \|\| 'checkbox'}\r\n />\r\n <div class=\"sd-checkbox__bg\">\r\n {this.isChecked !== false ? (\r\n <sd-icon\r\n name={this.isChecked === true ? 'check' : 'minus'}\r\n size={12}\r\n color={this.disabled ? '#888888' : 'white'}\r\n />\r\n ) : null}\r\n </div>\r\n {this.label && <span class=\"sd-checkbox__label\">{this.label}</span>}\r\n </label>\r\n );\r\n }\r\n}\r\n"],"version":3}