@sellmate/design-system 0.0.55 → 0.0.56
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.
- package/dist/cjs/design-system.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/sd-button_24.cjs.entry.js +32 -32
- package/dist/cjs/sd-card.cjs.entry.js +3 -3
- package/dist/cjs/sd-date-picker.cjs.entry.js +1 -1
- package/dist/cjs/sd-date-range-picker.cjs.entry.js +2 -2
- package/dist/cjs/sd-popover.cjs.entry.js +2 -2
- package/dist/cjs/sd-progress.cjs.entry.js +2 -2
- package/dist/cjs/sd-select-multiple.cjs.entry.js +2 -2
- package/dist/cjs/sd-tbody_3.cjs.entry.js +3 -3
- package/dist/cjs/sd-td.cjs.entry.js +2 -2
- package/dist/collection/components/sd-card/sd-card.css +1 -4
- package/dist/collection/components/sd-card/sd-card.js +6 -6
- package/dist/collection/components/sd-card/sd-card.js.map +1 -1
- package/dist/collection/components/sd-date-picker/sd-date-picker.js +1 -1
- package/dist/collection/components/sd-date-range-picker/sd-date-range-picker.js +2 -2
- package/dist/collection/components/sd-file-picker/sd-file-picker.js +3 -3
- package/dist/collection/components/sd-guide/sd-guide.js +2 -2
- package/dist/collection/components/sd-icon/sd-icon.js +1 -1
- package/dist/collection/components/sd-input/sd-input.js +4 -4
- package/dist/collection/components/sd-loading-spinner/sd-loading-spinner.js +1 -1
- package/dist/collection/components/sd-number-input/sd-number-input.js +4 -4
- package/dist/collection/components/sd-pagination/sd-pagination.js +2 -2
- package/dist/collection/components/sd-popover/sd-popover.js +2 -2
- package/dist/collection/components/sd-portal/sd-portal.js +1 -1
- package/dist/collection/components/sd-progress/sd-progress.js +2 -2
- package/dist/collection/components/sd-select/sd-select-option/sd-select-option.js +1 -1
- package/dist/collection/components/sd-select/sd-select-search-input/sd-select-search-input.js +3 -3
- package/dist/collection/components/sd-select-multiple/sd-select-multiple.js +2 -2
- package/dist/collection/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.js +3 -3
- package/dist/collection/components/sd-table/sd-tbody/sd-tbody.js +1 -1
- package/dist/collection/components/sd-table/sd-td/sd-td.js +2 -2
- package/dist/collection/components/sd-table/sd-th/sd-th.js +1 -1
- package/dist/collection/components/sd-table/sd-tr/sd-tr.js +1 -1
- package/dist/collection/components/sd-toggle/sd-toggle.js +1 -1
- package/dist/collection/components/sd-toggle-button/sd-toggle-button.js +1 -1
- package/dist/collection/components/sd-tooltip/sd-tooltip.js +4 -4
- package/dist/collection/components/sd-tooltip-portal/sd-tooltip-portal.js +1 -1
- package/dist/components/{p-BLidMbc_.js → p-6qJVnQg4.js} +3 -3
- package/dist/components/{p-BLidMbc_.js.map → p-6qJVnQg4.js.map} +1 -1
- package/dist/components/{p-D5BkkT2U.js → p-B8yBkdjE.js} +3 -3
- package/dist/components/{p-D5BkkT2U.js.map → p-B8yBkdjE.js.map} +1 -1
- package/dist/components/{p-vhe6g4Qt.js → p-BHHbLFXg.js} +3 -3
- package/dist/components/{p-vhe6g4Qt.js.map → p-BHHbLFXg.js.map} +1 -1
- package/dist/components/{p-DRGcUx0C.js → p-BREduhZA.js} +5 -5
- package/dist/components/{p-DRGcUx0C.js.map → p-BREduhZA.js.map} +1 -1
- package/dist/components/{p-CKhzpdPk.js → p-Bj4u0G5b.js} +3 -3
- package/dist/components/{p-CKhzpdPk.js.map → p-Bj4u0G5b.js.map} +1 -1
- package/dist/components/{p-CfKJNKMH.js → p-C4kdHNdl.js} +7 -7
- package/dist/components/{p-CfKJNKMH.js.map → p-C4kdHNdl.js.map} +1 -1
- package/dist/components/{p-njRAT-yp.js → p-C5U6Otnl.js} +3 -3
- package/dist/components/{p-njRAT-yp.js.map → p-C5U6Otnl.js.map} +1 -1
- package/dist/components/{p-DD9g6GYA.js → p-CNrsaSqW.js} +3 -3
- package/dist/components/{p-DD9g6GYA.js.map → p-CNrsaSqW.js.map} +1 -1
- package/dist/components/{p-nqDJZ_gy.js → p-CfivfPAO.js} +3 -3
- package/dist/components/{p-nqDJZ_gy.js.map → p-CfivfPAO.js.map} +1 -1
- package/dist/components/{p-DMqinLuj.js → p-D8KGixEs.js} +8 -8
- package/dist/components/{p-DMqinLuj.js.map → p-D8KGixEs.js.map} +1 -1
- package/dist/components/{p-BESbtjDi.js → p-DLrb7Zq3.js} +3 -3
- package/dist/components/{p-BESbtjDi.js.map → p-DLrb7Zq3.js.map} +1 -1
- package/dist/components/{p-DroKiQ6J.js → p-K42WRBPA.js} +9 -9
- package/dist/components/{p-DroKiQ6J.js.map → p-K42WRBPA.js.map} +1 -1
- package/dist/components/{p-CWwMpVqI.js → p-O3tgQfvT.js} +5 -5
- package/dist/components/{p-CWwMpVqI.js.map → p-O3tgQfvT.js.map} +1 -1
- package/dist/components/{p-QNYqIsvU.js → p-QpwY2yqY.js} +7 -7
- package/dist/components/{p-QNYqIsvU.js.map → p-QpwY2yqY.js.map} +1 -1
- package/dist/components/{p-MRYVk6Qh.js → p-w5tohH2H.js} +7 -7
- package/dist/components/{p-MRYVk6Qh.js.map → p-w5tohH2H.js.map} +1 -1
- package/dist/components/{p-DKoWHxRI.js → p-xme-KFvK.js} +3 -3
- package/dist/components/{p-DKoWHxRI.js.map → p-xme-KFvK.js.map} +1 -1
- package/dist/components/sd-button.js +1 -1
- package/dist/components/sd-card.js +4 -4
- package/dist/components/sd-card.js.map +1 -1
- package/dist/components/sd-checkbox.js +1 -1
- package/dist/components/sd-date-picker.js +4 -4
- package/dist/components/sd-date-range-picker.js +5 -5
- package/dist/components/sd-file-picker.js +4 -4
- package/dist/components/sd-guide.js +5 -5
- package/dist/components/sd-icon.js +1 -1
- package/dist/components/sd-input.js +1 -1
- package/dist/components/sd-loading-spinner.js +1 -1
- package/dist/components/sd-modal-card.js +2 -2
- package/dist/components/sd-number-input.js +5 -5
- package/dist/components/sd-pagination.js +1 -1
- package/dist/components/sd-popover.js +5 -5
- package/dist/components/sd-portal.js +1 -1
- package/dist/components/sd-progress.js +2 -2
- package/dist/components/sd-select-multiple-group.js +6 -6
- package/dist/components/sd-select-multiple.js +7 -7
- package/dist/components/sd-select-option-group.js +1 -1
- package/dist/components/sd-select-option.js +1 -1
- package/dist/components/sd-select-search-input.js +1 -1
- package/dist/components/sd-select.js +1 -1
- package/dist/components/sd-table-backup.js +12 -12
- package/dist/components/sd-table.js +14 -14
- package/dist/components/sd-tbody.js +1 -1
- package/dist/components/sd-td.js +2 -2
- package/dist/components/sd-th.js +1 -1
- package/dist/components/sd-toast-message.js +2 -2
- package/dist/components/sd-toggle-button.js +1 -1
- package/dist/components/sd-toggle.js +1 -1
- package/dist/components/sd-tooltip-portal.js +1 -1
- package/dist/components/sd-tooltip.js +1 -1
- package/dist/components/sd-tr.js +1 -1
- package/dist/design-system/design-system.esm.js +1 -1
- package/dist/design-system/p-0893dbd0.entry.js +2 -0
- package/dist/design-system/{p-5acdd14a.entry.js → p-2633690f.entry.js} +2 -2
- package/dist/design-system/p-5576f0f0.entry.js +2 -0
- package/dist/design-system/{p-0d2814dc.entry.js → p-7ca988ab.entry.js} +2 -2
- package/dist/design-system/p-a7bdb6ba.entry.js +2 -0
- package/dist/design-system/{p-7b94b34e.entry.js → p-b5720c60.entry.js} +2 -2
- package/dist/design-system/{p-e5065700.entry.js → p-bdd9afaf.entry.js} +2 -2
- package/dist/design-system/p-ddfe63b8.entry.js +2 -0
- package/dist/design-system/p-ddfe63b8.entry.js.map +1 -0
- package/dist/design-system/{p-665c5c48.entry.js → p-e180c69c.entry.js} +2 -2
- package/dist/esm/design-system.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/sd-button_24.entry.js +32 -32
- package/dist/esm/sd-card.entry.js +3 -3
- package/dist/esm/sd-card.entry.js.map +1 -1
- package/dist/esm/sd-date-picker.entry.js +1 -1
- package/dist/esm/sd-date-range-picker.entry.js +2 -2
- package/dist/esm/sd-popover.entry.js +2 -2
- package/dist/esm/sd-progress.entry.js +2 -2
- package/dist/esm/sd-select-multiple.entry.js +2 -2
- package/dist/esm/sd-tbody_3.entry.js +3 -3
- package/dist/esm/sd-td.entry.js +2 -2
- package/dist/types/components/sd-card/sd-card.d.ts +1 -1
- package/dist/types/components.d.ts +2 -2
- package/hydrate/index.js +50 -50
- package/hydrate/index.mjs +50 -50
- package/package.json +2 -2
- package/dist/design-system/p-2c57bdea.entry.js +0 -2
- package/dist/design-system/p-3bc4effa.entry.js +0 -2
- package/dist/design-system/p-3bc4effa.entry.js.map +0 -1
- package/dist/design-system/p-97b271a7.entry.js +0 -2
- package/dist/design-system/p-fc3580fd.entry.js +0 -2
- /package/dist/design-system/{p-fc3580fd.entry.js.map → p-0893dbd0.entry.js.map} +0 -0
- /package/dist/design-system/{p-5acdd14a.entry.js.map → p-2633690f.entry.js.map} +0 -0
- /package/dist/design-system/{p-2c57bdea.entry.js.map → p-5576f0f0.entry.js.map} +0 -0
- /package/dist/design-system/{p-0d2814dc.entry.js.map → p-7ca988ab.entry.js.map} +0 -0
- /package/dist/design-system/{p-97b271a7.entry.js.map → p-a7bdb6ba.entry.js.map} +0 -0
- /package/dist/design-system/{p-7b94b34e.entry.js.map → p-b5720c60.entry.js.map} +0 -0
- /package/dist/design-system/{p-e5065700.entry.js.map → p-bdd9afaf.entry.js.map} +0 -0
- /package/dist/design-system/{p-665c5c48.entry.js.map → p-e180c69c.entry.js.map} +0 -0
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { Host, h } from "@stencil/core";
|
|
2
2
|
export class SdCard {
|
|
3
3
|
bordered = true;
|
|
4
|
-
|
|
4
|
+
cardClassName = '';
|
|
5
5
|
render() {
|
|
6
|
-
return (h(Host, { key: '
|
|
6
|
+
return (h(Host, { key: '3182001dcfc5347e3995a31d8e333e01f285df5a', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.cardClassName}` }, h("slot", { key: 'e2824b9cd65b9c4ba668f7f3ba933a361405b822' })));
|
|
7
7
|
}
|
|
8
8
|
static get is() { return "sd-card"; }
|
|
9
9
|
static get originalStyleUrls() {
|
|
@@ -38,16 +38,16 @@ export class SdCard {
|
|
|
38
38
|
"attribute": "bordered",
|
|
39
39
|
"defaultValue": "true"
|
|
40
40
|
},
|
|
41
|
-
"
|
|
41
|
+
"cardClassName": {
|
|
42
42
|
"type": "string",
|
|
43
43
|
"mutable": false,
|
|
44
44
|
"complexType": {
|
|
45
45
|
"original": "string",
|
|
46
|
-
"resolved": "string",
|
|
46
|
+
"resolved": "string | undefined",
|
|
47
47
|
"references": {}
|
|
48
48
|
},
|
|
49
49
|
"required": false,
|
|
50
|
-
"optional":
|
|
50
|
+
"optional": true,
|
|
51
51
|
"docs": {
|
|
52
52
|
"tags": [],
|
|
53
53
|
"text": ""
|
|
@@ -55,7 +55,7 @@ export class SdCard {
|
|
|
55
55
|
"getter": false,
|
|
56
56
|
"setter": false,
|
|
57
57
|
"reflect": false,
|
|
58
|
-
"attribute": "class",
|
|
58
|
+
"attribute": "card-class-name",
|
|
59
59
|
"defaultValue": "''"
|
|
60
60
|
}
|
|
61
61
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sd-card.js","sourceRoot":"","sources":["../../../src/components/sd-card/sd-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAMzD,MAAM,OAAO,MAAM;IACV,QAAQ,GAAY,IAAI,CAAC;IACzB,
|
|
1
|
+
{"version":3,"file":"sd-card.js","sourceRoot":"","sources":["../../../src/components/sd-card/sd-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAMzD,MAAM,OAAO,MAAM;IACV,QAAQ,GAAY,IAAI,CAAC;IACzB,aAAa,GAAY,EAAE,CAAC;IAEpC,MAAM;QACL,OAAO,CACN,EAAC,IAAI,qDAAC,KAAK,EAAE,WAAW,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,IAAI,IAAI,CAAC,aAAa,EAAE;YACvF,8DAAa,CACP,CACP,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'sd-card',\n styleUrl: 'sd-card.scss',\n})\nexport class SdCard {\n @Prop() bordered: boolean = true;\n @Prop() cardClassName?: string = '';\n\n render() {\n return (\n <Host class={`sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.cardClassName}`}>\n <slot></slot>\n </Host>\n );\n }\n}\n"]}
|
|
@@ -76,7 +76,7 @@ export class SdDatePicker {
|
|
|
76
76
|
this.isOpen = false;
|
|
77
77
|
};
|
|
78
78
|
render() {
|
|
79
|
-
return (h(Host, { key: '
|
|
79
|
+
return (h(Host, { key: '339b8a2e02592a3a7c28e91b11dc3693b4fcb9db', class: { 'sd-date-picker': true, 'sd-date-picker--disabled': this.disabled } }, h("sd-input", { key: '5cb7ee0544864681985ba4e2b4cfb4ca7eb88ba7', ref: el => (this.inputEl = el), value: this.value, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-picker__input", onClick: () => this.openMenu() }, h("sd-icon", { key: 'e465944f71022a7b7d7b6d719affa31bfc337ff8', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: 'e4af5d3a2c5619d12f0b473b80eed941df1eea06', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: 'a36e286d284f3f2545eb83e60f76bb74db1ee045', class: "sd-date-picker__menu" }, h("div", { key: '95aa3b00666772cdaac5c458226b03ca8d814205', class: "sd-date-picker__header" }, h("div", { key: '92d3553d46fc3b9681050d5cb8b834bf4c661792', class: "year-nav" }, h("button", { key: 'ee0500f7c95bfd54e01a3dacba1f5510d1a6bbe6', type: "button", name: "prev-year", title: "Previous Year", onClick: () => this.setCurrentYear(this.currentYear - 1) }, h("sd-icon", { key: '16cf42b6e4d43858fc22745339c66ffb03862f00', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: '9cd310082f173d1fadc046a0a7f6b1e4b63627e0', class: "year-nav__current" }, this.currentYear), h("button", { key: '51d30f06c43c76226e995af3f3e3812ea48c2aad', type: "button", name: "next-year", title: "Next Year", onClick: () => this.setCurrentYear(this.currentYear + 1) }, h("sd-icon", { key: '08b599372988f2563ccb6a25b64bbacef21e8c0b', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: '3561b99251a0cc9ca5d81ed20369eb2d1702f253', class: "month-nav" }, h("button", { key: '952c94808facf642dc219eaced8d58b3c2ceb389', type: "button", name: "prev-month", title: "Previous ", onClick: () => this.handleUpdateMonth('prev') }, h("sd-icon", { key: 'd270c4e5934ebfff500d9a4252b9a4b0b6c24e41', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: '3baf83873b332c1a3b340773a952b5f9a1b48bd4', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), h("button", { key: 'fe744ca6c9896f8cf7bd2a00cdd4db94915be0e3', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, h("sd-icon", { key: 'a00637d3bc309b429fd302b72ec940f3cdce8f84', name: "arrowRight", size: "12", color: "#CCCCCC" })))), h("div", { key: '8a4c4fc3bfc55205912368f6d5f1e3acd7eadbdc', class: "sd-date-picker__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (h("div", { key: day, class: "day" }, day)))), h("div", { key: 'f4eaa43b531640ba7bb7b724cf52144f9870d520', class: "sd-date-picker__body" }, [
|
|
80
80
|
...this.calendar.prevMonthDays,
|
|
81
81
|
...this.calendar.days,
|
|
82
82
|
...this.calendar.afterMonthDays,
|
|
@@ -155,10 +155,10 @@ export class SdDateRangePicker {
|
|
|
155
155
|
this.setHoverDate(hoverDate);
|
|
156
156
|
}
|
|
157
157
|
render() {
|
|
158
|
-
return (h(Host, { key: '
|
|
158
|
+
return (h(Host, { key: '5220efe80a57b9591b4238b0f0cd646d76709a4c', class: {
|
|
159
159
|
'sd-date-range-picker': true,
|
|
160
160
|
'sd-date-range-picker--disabled': this.disabled,
|
|
161
|
-
} }, h("sd-input", { key: '
|
|
161
|
+
} }, h("sd-input", { key: '0f7bc52cbe8722e16b3c82dc847b0230149f4e6a', ref: el => (this.inputEl = el), value: !!this.dateRange[0] ? `${this.dateRange[0]} ~ ${this.dateRange[1]}` : '', label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-range-picker__input", onClick: () => this.openMenu() }, h("sd-icon", { key: 'b21b38e104c2dd840af1670e4bedee84a4db10fa', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: '56d74da3b2d783340d21503210eae4b89d540b9a', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.closeMenu }, h("div", { key: '89b88b2b16bb6b553ba18b686cfdb41bcdccfb33', class: "sd-date-range-picker__menu" }, h("div", { key: 'b811cdb96de5cd8400ef413fe2537a5e9b36720d', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, h("button", { key: '588814d15c2a6c8b8efcad9215ab015366709ee7', type: "button", name: "prev", title: "Previous", onClick: () => this.setPrevYear(this.prevYear - 1) }, h("sd-icon", { key: '330c17fb132b33140fb8cdf72c0bc75eca9814eb', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("div", { key: 'b2f29d546ac19968045aa3803cea58693c9ac904', class: "header-label" }, this.prevYear), h("button", { key: '183befff37c64110a8dc188b261aaa03330b7c9e', type: "button", name: "next", title: "Next", onClick: () => this.setPrevYear(this.prevYear + 1) }, h("sd-icon", { key: 'ea7ab0b1ff97a659b2adf3ab105945127fa5b066', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: '13e7484f631f5045a49c1243c93ae211b3f70bec', class: "sd-date-range-picker__body" }, [this.prevCalendar, this.nextCalendar].map((calendar, index) => (h(Fragment, null, index === 1 && h("div", { class: "separator" }), h("div", { key: index, class: "calendar-container" }, h("div", { class: "calendar-header" }, h("button", { type: "button", name: "month", title: "Month", class: index === 0 ? 'header-button-prev' : 'header-button-next', onClick: () => this.updateYearMonth(index === 0 ? 'prev' : 'next') }, h("sd-icon", { name: index === 0 ? 'arrowLeft' : 'arrowRight', size: "12", color: "#CCCCCC" })), index === 0
|
|
162
162
|
? `${this.prevYear}.${String(this.prevMonth).padStart(2, '0')}`
|
|
163
163
|
: `${this.nextYear}.${String(this.nextMonth).padStart(2, '0')}`), h("div", { class: "calendar-days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (h("sd-date-box", { key: day, date: day, disabled: true, class: "day" })))), h("div", { class: "calendar-body mt-12pxr grid grid-cols-7 gap-y-8pxr" }, [...calendar.prevMonthDays, ...calendar.days, ...calendar.afterMonthDays].map((day, idx) => (h("sd-date-box", { key: `prev${day}_${idx}`, date: !day ? '' : Number(day), selected: this.dateRange.some(date => date === this.formatDate(index, Number(day))), type: this.getDateBoxType(this.formatDate(index, Number(day))), isToday: today === this.formatDate(index, Number(day)), disabled: !day ? true : this.isDisabledDate(this.formatDate(index, Number(day))), inRange: this.isDateInRange(this.formatDate(index, Number(day))), isStartDate: this.dateRange[0] === this.formatDate(index, Number(day)), isEndDate: this.dateRange[1] === this.formatDate(index, Number(day)), onClick: () => this.handleDateClick(index, Number(day)), onMouseOver: () => this.handleDateHover(index, Number(day)) }))))))))))))));
|
|
164
164
|
}
|
|
@@ -92,15 +92,15 @@ export class SdFilePicker {
|
|
|
92
92
|
render() {
|
|
93
93
|
const hasFiles = this.hasFiles();
|
|
94
94
|
const displayText = this.getDisplayText();
|
|
95
|
-
return (h("div", { key: '
|
|
95
|
+
return (h("div", { key: '467ea6ab920e23a8cf98db73f3ba5507e0634bc8', class: {
|
|
96
96
|
'sd-file-picker': true,
|
|
97
97
|
[this.getStatusClass()]: true,
|
|
98
98
|
'sd-file-picker--inline': this.inline,
|
|
99
|
-
}, onClick: this.handleClick, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, h("input", { key: '
|
|
99
|
+
}, onClick: this.handleClick, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, h("input", { key: '20ff1404f15beaeff2f4f3e0b1772aadbd986934', ref: el => (this.fileInputRef = el), type: "file", class: "sd-file-picker__input", disabled: this.disabled, multiple: this.multiple, accept: this.accept, onInput: this.handleFileChange, "aria-label": this.placeholder }), h("sd-icon", { key: '59e00f4ba49547aacf99dfab54c391c49895d8df', name: "attachFile", size: 16, color: this.getIconColor(), class: "sd-file-picker__icon" }), h("div", { key: 'be74c5aebcc947aacf6841b15915cc98af5453e6', ref: el => (this.fileNamesRef = el), class: {
|
|
100
100
|
'sd-file-picker__text': true,
|
|
101
101
|
'sd-file-picker__text--placeholder': !hasFiles,
|
|
102
102
|
'sd-file-picker__text--active': hasFiles,
|
|
103
|
-
} }, displayText), !this.disabled && hasFiles && (h("sd-icon", { key: '
|
|
103
|
+
} }, displayText), !this.disabled && hasFiles && (h("sd-icon", { key: '0547537e85b8eb0f2678c3023eeec9241caf0ced', name: "close", size: 12, color: "#888888", class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (h("div", { key: '86bf77f26f2aea00c31c9770c2142353d92d239c', class: "sd-file-picker__tooltip" }, displayText))));
|
|
104
104
|
}
|
|
105
105
|
static get is() { return "sd-file-picker"; }
|
|
106
106
|
static get originalStyleUrls() {
|
|
@@ -48,9 +48,9 @@ export class SdGuide {
|
|
|
48
48
|
};
|
|
49
49
|
render() {
|
|
50
50
|
const { name: iconName, size: iconSize, color: iconColor } = GUIDE_ICON[this.type];
|
|
51
|
-
return (h(Host, { key: '
|
|
51
|
+
return (h(Host, { key: '73cc9c84ec4e921e83e9d0cde2971c5088cbb48f', style: {
|
|
52
52
|
'--sd-guide-color': GUIDE_ICON[this.type].color,
|
|
53
|
-
} }, h("sd-button", { key: '
|
|
53
|
+
} }, h("sd-button", { key: '310afd874d062a91fab4b179a9a4e2f340a95175', ref: el => (this.guideRef = el), class: this.guideClass, variant: this.popupShow ? 'primary' : 'outline', label: this.label || GUIDE_LABEL[this.type], size: "sm", color: this.popupShow ? GUIDE_ICON[this.type].color : 'grey_45', icon: iconName, iconColor: this.popupShow ? 'white' : iconColor, iconSize: iconSize, noHover: this.popupShow, onSdClick: this.handleClickGuide }), this.type === 'help' && this.popupShow && (h("sd-portal", { key: '133bb71a98efd9a15407aad915937caec728aa38', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, h("div", { key: '4a39145ce20e1e37ebc3f639712f635231f34f2d', style: { position: 'absolute', width: '0px', height: '0px' } }, h("div", { key: 'e71a8217b3969db9fadf9083835402cf69e62c3c', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, h("sd-button", { key: 'f035ca961013d99305b0409f406fdd3063e11155', class: "sd-guide__popup__close", icon: "close", color: colors.grey_65, size: "md", variant: "ghost", noHover: true, onSdClick: this.closeDropdown }), h("div", { key: 'a3d505a21abd77e85fac45a792ca7bb2b2448a6a', class: "sd-guide__popup__header" }, h("sd-icon", { key: '785bfbe594936b56f407edd2349e19076cf6ece9', name: "helpOutline", size: 24, color: colors.green_65 }), h("h3", { key: 'da5dfaed05a11ccef574580a4c18341646d59e4f', class: "sd-guide__popup__title" }, this.popupTitle || GUIDE_LABEL[this.type])), h("ul", { key: '0faa4a71c1d77d21490436323c2d80c792397991', class: "sd-guide__popup__list" }, this.renderListItem(this.message))))))));
|
|
54
54
|
}
|
|
55
55
|
// 현재 2depth까지만 스타일 적용
|
|
56
56
|
renderListItem(message, depth = 0) {
|
|
@@ -25,7 +25,7 @@ export class SdIcon {
|
|
|
25
25
|
}
|
|
26
26
|
render() {
|
|
27
27
|
const IconComponent = Icons[this.name]?.[this.size];
|
|
28
|
-
return (h("i", { key: '
|
|
28
|
+
return (h("i", { key: '49cc8a7c8a0af18d920065232ef3e2127f6abb6c', class: this.getIconClasses(), style: this.iconStyle }, h(IconComponent, { key: 'cb8464e125ecfddc96621b57183fb26f37043f51', color: this.resolvedColor })));
|
|
29
29
|
}
|
|
30
30
|
static get is() { return "sd-icon"; }
|
|
31
31
|
static get originalStyleUrls() {
|
|
@@ -90,17 +90,17 @@ export class SdInput {
|
|
|
90
90
|
'--input-width': typeof this.width === 'number' ? `${this.width}px` : this.width,
|
|
91
91
|
}
|
|
92
92
|
: {};
|
|
93
|
-
return (h(Host, { key: '
|
|
93
|
+
return (h(Host, { key: '3babaa8e892b3e5e484d1bdbc28b0d209945ad69', style: inputWidth }, h("div", { key: '31ea7cd711a33881144da3f0d4a6e98e6ec55244', class: {
|
|
94
94
|
'sd-input': true,
|
|
95
95
|
'sd-input--with-label': !!this.label,
|
|
96
96
|
'sd-input--inside-label': !!this.label && this.insideLabel,
|
|
97
97
|
'sd-input--barcode': !!this.barcode,
|
|
98
98
|
[this.getInputStatus()]: true,
|
|
99
|
-
} }, this.label && (h("div", { key: '
|
|
99
|
+
} }, this.label && (h("div", { key: '85596e41249b0f136c9c07bebe40e2bc2166ceba', class: {
|
|
100
100
|
'sd-input__label': true,
|
|
101
|
-
} }, this.label)), h("label", { key: '
|
|
101
|
+
} }, this.label)), h("label", { key: 'd942a7cc950506a5cf2bcfd8984d3981af18cc7f', class: {
|
|
102
102
|
'sd-input__container': true,
|
|
103
|
-
}, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, h("slot", { key: '
|
|
103
|
+
}, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, h("slot", { key: '3add3a8c845be67ccd31ae98b30f5989d7e7dbf1', name: "prefix" }), h("input", { key: 'b7297ae85e0f07c8a5696cc7072833dc6ade82bc', 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: 'c6ae6cb3f58da00c0ae80261e41841889347b73d', name: "suffix" }), this.clearable && this.internalValue && (h("sd-icon", { key: '662f365d57707b631f7a58b18330666521846e84', name: "close", color: "#888", class: "sd-input__clear-icon", onClick: () => {
|
|
104
104
|
this.internalValue = '';
|
|
105
105
|
this.sdChange?.emit(this.internalValue);
|
|
106
106
|
this.sdInput?.emit(this.internalValue);
|
|
@@ -6,7 +6,7 @@ export class SdLoadingSpinner {
|
|
|
6
6
|
return resolveColor(this.color);
|
|
7
7
|
}
|
|
8
8
|
render() {
|
|
9
|
-
return (h(Host, { key: '
|
|
9
|
+
return (h(Host, { key: 'a04395d2aaacdb74c06aebff6674ba82cc089a88' }, h("svg", { key: 'e4a28205405702bb37b40aac4a73ae369605791d', class: "sd-loading-spinner", width: "72px", height: "72px", viewBox: "25 25 50 50", style: { color: this.resolvedColor } }, h("circle", { key: '31e0b13b0ab8dbf824fc6b40b020e7eb290f05f5', class: "path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "5", "stroke-miterlimit": "10" }))));
|
|
10
10
|
}
|
|
11
11
|
static get is() { return "sd-loading-spinner"; }
|
|
12
12
|
static get originalStyleUrls() {
|
|
@@ -248,17 +248,17 @@ export class SdNumberInput {
|
|
|
248
248
|
const inputStyles = {
|
|
249
249
|
textAlign: this.useButton ? 'center' : 'right',
|
|
250
250
|
};
|
|
251
|
-
return (h(Host, { key: '
|
|
251
|
+
return (h(Host, { key: '00862eac1b5ac354058dfc63ac7cbae7ea675c2e', style: inputWidth, onFocus: this.handleFocus, onBlur: this.handleBlur }, this.useButton ? 'use buttons' : 'dont use buttons', this.label && h("div", { key: '368ea9ee71d69fccd1f4793e990b1345e7d87cfe', class: "sd-number-input__label" }, this.label), h("label", { key: '0f8d107bc23e308d6e9523f04199eccc39bd1268', class: {
|
|
252
252
|
'sd-number-input': true,
|
|
253
253
|
[this.getInputStatus()]: true,
|
|
254
254
|
'sd-number-input--with-buttons': this.useButton,
|
|
255
|
-
}, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, h("input", { key: '
|
|
255
|
+
}, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, h("input", { key: '7f6f4a677ba9460ea022ae2060a73872123d19be', ref: el => (this.nativeEl = el), class: `sd-number-input__input ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onChange: this.handleChange, onKeyDown: this.handleKeyDown, style: inputStyles }), this.useButton && (h("div", { key: 'fd85f670c841fd7aee190fa040b4e228af3075a6', class: "sd-number-input__buttons" }, h("button", { key: 'c49d7ca15872cf5dc9fa6e46a3a7bca02a10d4d1', type: "button", class: {
|
|
256
256
|
'sd-number-input__button': true,
|
|
257
257
|
'sd-number-input__button--decrement': true,
|
|
258
|
-
}, disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, h("sd-icon", { key: '
|
|
258
|
+
}, disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, h("sd-icon", { key: '9fe03669015bbac1704f06bcacf8625c6937253d', name: "minus", size: 12, color: this.isDecrementDisabled() ? '#CCCCCC' : '#2D8DFF' })), h("button", { key: '98ea1cc55299f03e1689bb9becc6e87ab5720d7a', type: "button", class: {
|
|
259
259
|
'sd-number-input__button': true,
|
|
260
260
|
'sd-number-input__button--increment': true,
|
|
261
|
-
}, disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, h("sd-icon", { key: '
|
|
261
|
+
}, disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, h("sd-icon", { key: 'b6d446dfdd0435b8c991901a2cb100af4ae4d8b5', name: "add", size: 12, color: this.isIncrementDisabled() ? '#CCCCCC' : '#2D8DFF' })))))));
|
|
262
262
|
}
|
|
263
263
|
static get is() { return "sd-number-input"; }
|
|
264
264
|
static get originalStyleUrls() {
|
|
@@ -67,12 +67,12 @@ export class SdPagination {
|
|
|
67
67
|
}
|
|
68
68
|
}
|
|
69
69
|
render() {
|
|
70
|
-
return (h("div", { key: '
|
|
70
|
+
return (h("div", { key: '0a55eddc4c434d3a7dc6afaa2386e68a6767300e', class: this.paginationClasses }, h("div", { key: '8bb73906c74f1a8646286d0858ab6276531e4bd9', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (h("div", { class: "pagination-info" }, h("span", { class: "current-page" }, this.currentPage), h("span", null, "/"), h("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
|
|
71
71
|
'pagination-btn': true,
|
|
72
72
|
'pagination-btn--selected': this.currentPage === n,
|
|
73
73
|
}, disabled: this.currentPage === n, style: {
|
|
74
74
|
'--pagination-btn-width': `${this.buttonWidth}px`,
|
|
75
|
-
}, onClick: () => this.handlePageChange(n) }, n)))), h("div", { key: '
|
|
75
|
+
}, onClick: () => this.handlePageChange(n) }, n)))), h("div", { key: '2f6945f41f351153a9c182262ecef8c96d0ec1eb', class: "append-btns" }, this.renderNextButtons())));
|
|
76
76
|
}
|
|
77
77
|
static get is() { return "sd-pagination"; }
|
|
78
78
|
static get originalStyleUrls() {
|
|
@@ -30,11 +30,11 @@ export class SdPopover {
|
|
|
30
30
|
this.showPopover = false;
|
|
31
31
|
};
|
|
32
32
|
render() {
|
|
33
|
-
return (h(Fragment, { key: '
|
|
33
|
+
return (h(Fragment, { key: '9d9b2e9ab7dd6d7b3a79fdf8468c1921b64c8e6f' }, 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-popover", onClick: () => (this.showPopover = !this.showPopover) })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (this.showPopover = !this.showPopover) })), this.showPopover && (h("sd-tooltip-portal", { key: '44e2139f21c20017b93d59888ca358fe78bb21db', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, h("div", { key: 'eac4edb768cc3e738d9fa0a9680d85aab5d9c795', class: {
|
|
34
34
|
'sd-popover-menu': true,
|
|
35
35
|
[`sd-popover-menu--${this.placement}`]: true,
|
|
36
36
|
[this.menuClass]: !!this.menuClass,
|
|
37
|
-
} }, h("i", { key: '
|
|
37
|
+
} }, h("i", { key: '8b4228cabeebf775419ce25c89a609c5a24bbc86', class: `sd-popover-menu__arrow sd-popover-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: '794ea65c5d1bd4362b5245611f49bab0bdbdf451' })), h("div", { key: 'f3a756194b51dbfea1c2c1a9f09d390a7a01add2', class: "sd-popover-menu__content" }, this.menuTitle && h("div", { key: 'e3425e647b09ad929741811f5962855d4b489a34', class: "sd-popover-menu__title" }, this.menuTitle), this.messages.length > 0 && (h("div", { key: '157ce5e1ceeee570cd12581471281124e91ccfe9', class: "sd-popover-menu__messages" }, this.messages.map(message => (h("div", null, message))))), this.buttons.length > 0 && (h("div", { key: '82ce6ee0c7ab22981785df2751aab973321db044', class: `sd-popover-menu__buttons sd-popover-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (h("sd-button", { ...button })))))), this.useClose && (h("button", { key: 'd5ce191f037db5c466f6de9ebdaabbbf3691f2b1', class: "sd-popover-menu__close-button", onClick: () => this.handleClose() }, h("sd-icon", { key: '1ee550de3c8d8eaa72a3faa4d7abece5b4725452', name: "close", size: "12", color: "#AAAAAA" }))))))));
|
|
38
38
|
}
|
|
39
39
|
static get is() { return "sd-popover"; }
|
|
40
40
|
static get encapsulation() { return "shadow"; }
|
|
@@ -113,7 +113,7 @@ export class SdPortal {
|
|
|
113
113
|
this.sdClose.emit();
|
|
114
114
|
}
|
|
115
115
|
render() {
|
|
116
|
-
return h("slot", { key: '
|
|
116
|
+
return h("slot", { key: '05a54c512300d0616811e11a795170490feff876' });
|
|
117
117
|
}
|
|
118
118
|
static get is() { return "sd-portal"; }
|
|
119
119
|
static get properties() {
|
|
@@ -33,10 +33,10 @@ export class SdProgress {
|
|
|
33
33
|
return this.statusColor[this.progressStatus];
|
|
34
34
|
}
|
|
35
35
|
render() {
|
|
36
|
-
return (h(Host, { key: '
|
|
36
|
+
return (h(Host, { key: 'b254676f6936364f895fd8dd85edd33b95b9d52e', style: {
|
|
37
37
|
'--progress-color': this.progressColor,
|
|
38
38
|
'--progress-percentage': `${this.progressPercentage}%`,
|
|
39
|
-
} }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && h("div", { key: '
|
|
39
|
+
} }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && h("div", { key: 'aeb82be4b54ec40dfec7dc8717faeea41c4fd0e8', class: "sd-progress__label" }, this.label)));
|
|
40
40
|
}
|
|
41
41
|
renderBarProgress() {
|
|
42
42
|
return (h("div", { class: `sd-progress__bar sd-progress__bar--${this.progressStatus}` }, h("div", { class: ['sd-progress__bar__percent', this.progressPercentage < 100 ? 'proceed' : ''].join(' ') }), h("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--left" }, this.progressPercentage, "%"), h("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--right" }, this.progressPercentage, "%")));
|
|
@@ -24,7 +24,7 @@ export class SdSelectOption {
|
|
|
24
24
|
}
|
|
25
25
|
};
|
|
26
26
|
render() {
|
|
27
|
-
return (h(Host, { key: '
|
|
27
|
+
return (h(Host, { key: 'cfb999f7001240e6bd5dc302b24aade477671f74' }, h("div", { key: '053e073fee23e99bd23a9b9fa95cb9ddabf9d6bf', class: {
|
|
28
28
|
'sd-select__option': true,
|
|
29
29
|
'sd-select__option--selected': this.isSelected,
|
|
30
30
|
'sd-select__option--disabled': !!this.option.disabled,
|
package/dist/collection/components/sd-select/sd-select-search-input/sd-select-search-input.js
CHANGED
|
@@ -16,17 +16,17 @@ export class SdSelectSearchInput {
|
|
|
16
16
|
input?.focus({ preventScroll: true });
|
|
17
17
|
}
|
|
18
18
|
render() {
|
|
19
|
-
return (h("div", { key: '
|
|
19
|
+
return (h("div", { key: '6d05eba9ab9a951d126f703ec9366d8b425581b7', class: {
|
|
20
20
|
'sd-select-search-input': true,
|
|
21
21
|
'sd-select-search-input--scrolled': !!this.isScrolled,
|
|
22
|
-
}, onClick: event => event.stopPropagation() }, h("sd-input", { key: '
|
|
22
|
+
}, onClick: event => event.stopPropagation() }, h("sd-input", { key: 'e00b8cab50be8a096893c4cb4aceff0446cbfde4', ref: el => (this.searchRef = el), value: this.searchText, placeholder: "\uAC80\uC0C9", clearable: true, inputStyle: { 'padding-left': '8px' }, autofocus: true, onSdInput: event => {
|
|
23
23
|
this.sdSearchInput.emit(String(event?.detail));
|
|
24
24
|
}, onSdFocus: () => {
|
|
25
25
|
this.sdSearchFocus.emit();
|
|
26
26
|
}, onKeyDown: event => {
|
|
27
27
|
if (event.code === 'Enter')
|
|
28
28
|
event.stopPropagation();
|
|
29
|
-
} }, h("sd-icon", { key: '
|
|
29
|
+
} }, h("sd-icon", { key: '951178d9cbe80fc944e708207b57949ecd6ed8fc', name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" }))));
|
|
30
30
|
}
|
|
31
31
|
static get is() { return "sd-select-search-input"; }
|
|
32
32
|
static get originalStyleUrls() {
|
|
@@ -211,11 +211,11 @@ export class SdSelectMultiple extends BaseDropdownEvent {
|
|
|
211
211
|
'--select-width': this.width || '200px',
|
|
212
212
|
'--select-dropdown-height': this.dropdownHeight || '260px',
|
|
213
213
|
};
|
|
214
|
-
return (h(Host, { key: '
|
|
214
|
+
return (h(Host, { key: 'ff0653e24d97db442399017df0380a17f96dffe4', style: style }, h("div", { key: 'd5f6c3425abfcfdd81e47529659aa591fc604b0b', class: {
|
|
215
215
|
'sd-select-multiple': true,
|
|
216
216
|
'sd-select-multiple--open': this.isOpen,
|
|
217
217
|
'sd-select-multiple--disabled': this.disabled,
|
|
218
|
-
}, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), h("div", { key: '
|
|
218
|
+
}, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), h("div", { key: 'ee82c8383eb3e98729b2d55065b66e9a84cf5215', class: "sd-select-multiple__container" }, this.renderTrigger(), this.renderDropdown()))));
|
|
219
219
|
}
|
|
220
220
|
renderLabel(label) {
|
|
221
221
|
if (!label)
|
|
@@ -39,7 +39,7 @@ export class SdSelectOptionGroup {
|
|
|
39
39
|
}
|
|
40
40
|
};
|
|
41
41
|
render() {
|
|
42
|
-
return (h("div", { key: '
|
|
42
|
+
return (h("div", { key: 'ed43a2fa2ae5b182f1c99b272126fb3629617681', class: {
|
|
43
43
|
'sd-select__option-group': true,
|
|
44
44
|
'sd-select__option-group--selected': !!this.isSelected,
|
|
45
45
|
'sd-select__option-group--disabled': !!this.option.disabled,
|
|
@@ -48,10 +48,10 @@ export class SdSelectOptionGroup {
|
|
|
48
48
|
'sd-select__option-group--group': this.option.type === 'group',
|
|
49
49
|
'sd-select__option-group--subgroup': this.option.type === 'subgroup',
|
|
50
50
|
'sd-select__option-group--item': this.option.type === 'item',
|
|
51
|
-
}, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, h("div", { key: '
|
|
51
|
+
}, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, h("div", { key: '97de3f6a855bf737cbaa5f23f7986b2c5ee10c52', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (h("sd-checkbox", { key: '7d8814dc060dd769f100be09d87edcc440cbf93d', checked: this.isSelected, disabled: this.option.disabled, onClick: e => {
|
|
52
52
|
e.preventDefault();
|
|
53
53
|
this.handleClick(this.option, this.isSelected, e);
|
|
54
|
-
} })), h("span", { key: '
|
|
54
|
+
} })), h("span", { key: '8fd8bf56260bf49f42a0cb205868a45912e5a4de', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (h("span", { key: 'eaa10fa1f13f4f6bc48b22967b1b31a2e894865c', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
|
|
55
55
|
}
|
|
56
56
|
static get is() { return "sd-select-option-group"; }
|
|
57
57
|
static get originalStyleUrls() {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { Host, h } from "@stencil/core";
|
|
2
2
|
export class SdTbody {
|
|
3
3
|
render() {
|
|
4
|
-
return (h(Host, { key: '
|
|
4
|
+
return (h(Host, { key: '5c25fa054aaea539d47625d367adeb18d771f070' }, h("slot", { key: '17e9fd219974d986e154d72c82a3ac145af7e7a8' })));
|
|
5
5
|
}
|
|
6
6
|
static get is() { return "sd-tbody"; }
|
|
7
7
|
static get originalStyleUrls() {
|
|
@@ -5,11 +5,11 @@ export class SdTd {
|
|
|
5
5
|
tdStyle;
|
|
6
6
|
tdClass;
|
|
7
7
|
render() {
|
|
8
|
-
return (h(Host, { key: '
|
|
8
|
+
return (h(Host, { key: 'caaefa12c86561d1bbe8d10e4f25b079def2124e', role: "cell", class: {
|
|
9
9
|
'sd-td': true,
|
|
10
10
|
[`sd-td--${this.align}`]: true,
|
|
11
11
|
[this.tdClass || '']: Boolean(this.tdClass),
|
|
12
|
-
}, style: this.tdStyle }, h("slot", { key: '
|
|
12
|
+
}, style: this.tdStyle }, h("slot", { key: '9ea243e4a6fcb4b6e1edc94b92eb4cc9d0e50a97' })));
|
|
13
13
|
}
|
|
14
14
|
static get is() { return "sd-td"; }
|
|
15
15
|
static get originalStyleUrls() {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { Host, h } from "@stencil/core";
|
|
2
2
|
export class SdTh {
|
|
3
3
|
render() {
|
|
4
|
-
return (h(Host, { key: '
|
|
4
|
+
return (h(Host, { key: '04e75c300b9147dc122570af4b1f4729d6ee1902', role: "columnheader" }, h("slot", { key: '29cbcdc0f8b8087c4c8bf593a7dfe8cf56bcaf39' })));
|
|
5
5
|
}
|
|
6
6
|
static get is() { return "sd-th"; }
|
|
7
7
|
static get originalStyleUrls() {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { Host, h } from "@stencil/core";
|
|
2
2
|
export class SdTr {
|
|
3
3
|
render() {
|
|
4
|
-
return (h(Host, { key: '
|
|
4
|
+
return (h(Host, { key: '87cb4c63e4368106176b194602195b5a1e48c706', role: "row" }, h("slot", { key: 'daeaecd458767c572d86cf05650230388f1a2cae' })));
|
|
5
5
|
}
|
|
6
6
|
static get is() { return "sd-tr"; }
|
|
7
7
|
static get originalStyleUrls() {
|
|
@@ -29,7 +29,7 @@ export class SdToggle {
|
|
|
29
29
|
this.sdChange.emit(newValue);
|
|
30
30
|
};
|
|
31
31
|
render() {
|
|
32
|
-
return (h("label", { key: '
|
|
32
|
+
return (h("label", { key: 'ba2398d6eb054c00c526ab1ada37b09e4d6602a3', "aria-checked": this.isChecked.toString(), "aria-disabled": this.disabled.toString(), role: "switch", "aria-label": this.label || 'toggle', class: this.toggleClasses }, h("input", { key: 'b7da299e1dacd7d41bc1cd72d5bc135d5ecd52fd', type: "checkbox", checked: this.isChecked, disabled: this.disabled, onInput: this.handleChange }), this.label && h("span", { key: 'b6ddc87485036dee698eb099d7343edd4163d7b0', class: "sd-toggle__label" }, this.label), h("div", { key: '2439852af329488d50907ee132a6fd819129a6a0', class: "sd-toggle__track" }, h("div", { key: '72114f2bec9e0372b05d90df8099dc9aad812e3d', class: "sd-toggle__thumb" }))));
|
|
33
33
|
}
|
|
34
34
|
static get is() { return "sd-toggle"; }
|
|
35
35
|
static get originalStyleUrls() {
|
|
@@ -32,7 +32,7 @@ export class SdToggleButton {
|
|
|
32
32
|
this.sdChange.emit(newValue);
|
|
33
33
|
};
|
|
34
34
|
render() {
|
|
35
|
-
return (h("label", { key: '
|
|
35
|
+
return (h("label", { key: '54d45d11b3944c61147d5bd0fa68078aa28737f1', class: this.buttonClasses, role: "button", "aria-pressed": this.isActive.toString(), "aria-disabled": this.disabled.toString(), "aria-label": this.label || 'toggle button' }, this.label, h("input", { key: 'cafb7edbcaead5e487b756a006cfee9b9d890558', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
|
|
36
36
|
}
|
|
37
37
|
static get is() { return "sd-toggle-button"; }
|
|
38
38
|
static get originalStyleUrls() {
|
|
@@ -43,20 +43,20 @@ export class SdTooltip {
|
|
|
43
43
|
: {
|
|
44
44
|
onClick: () => (this.showTooltip = !this.showTooltip),
|
|
45
45
|
};
|
|
46
|
-
return (h(Fragment, { key: '
|
|
46
|
+
return (h(Fragment, { key: '1016ad941100e902068b5a7d7773a2dbf7ab0667' }, 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: '8370b55d3bafa7a5ca429ee17c7555cfdb9e51a2', parentRef: this.buttonEl, onSdClose: () => this.handleClose(), placement: this.placement }, h("div", { key: '94a8d13f88050792b3e307901c2545995d92fdaf', class: {
|
|
47
47
|
'sd-tooltip-menu': true,
|
|
48
48
|
[`sd-tooltip-menu--${this.type}`]: true,
|
|
49
49
|
[`sd-tooltip-menu--${this.placement}`]: true,
|
|
50
50
|
'sd-tooltip-menu--with-close': this.useClose,
|
|
51
51
|
[`bg-${SdTooltip.COLOR_OF_TYPE[this.type].background}`]: true,
|
|
52
52
|
[`text-${SdTooltip.COLOR_OF_TYPE[this.type].text}`]: true,
|
|
53
|
-
} }, h("i", { key: '
|
|
53
|
+
} }, h("i", { key: 'b13f215dc7f51af86e7748a0ac565f62cbd936ef', class: `sd-tooltip-menu__arrow sd-tooltip-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: 'a043ccc525e18baed8c9b4d5cdd7651c4600b4e4', class: {
|
|
54
54
|
[`text-${SdTooltip.COLOR_OF_TYPE[this.type].background}`]: true,
|
|
55
|
-
} })), h("div", { key: '
|
|
55
|
+
} })), h("div", { key: '60e67cc4620b07153a8cef098446e0a292f08230', class: "sd-tooltip-menu__content", ref: el => {
|
|
56
56
|
if (el && this.slotContent && !el.hasChildNodes()) {
|
|
57
57
|
el.appendChild(this.slotContent.cloneNode(true));
|
|
58
58
|
}
|
|
59
|
-
} }, !this.slotContent && h("span", { key: '
|
|
59
|
+
} }, !this.slotContent && h("span", { key: 'e2e2afd2e2607be01d474c9329cd15b280214cd0' }, this.el.textContent)), this.useClose && (h("div", { key: '25962f34a91f8838e32c25529cacf048b2bbcf6b', class: "sd-tooltip-menu__close-button" }, h("button", { key: '5e37a4c9bace03a0c2a26edb0125ac0f25c65784', type: "button", "aria-label": "Close tooltip", title: "Close tooltip", onClick: () => this.handleClose() }, h("sd-icon", { key: 'ed7c97b16a507b8fad10d58f4e5a38061517b88a', name: "close", size: "12", color: "#AAAAAA" })))))))));
|
|
60
60
|
}
|
|
61
61
|
static get is() { return "sd-tooltip"; }
|
|
62
62
|
static get originalStyleUrls() {
|
|
@@ -144,7 +144,7 @@ export class SdTooltipPortal {
|
|
|
144
144
|
this.sdClose.emit();
|
|
145
145
|
}
|
|
146
146
|
render() {
|
|
147
|
-
return h("slot", { key: '
|
|
147
|
+
return h("slot", { key: 'f26d3228d5c0965c2303e599259a6e93307009dc' });
|
|
148
148
|
}
|
|
149
149
|
static get is() { return "sd-tooltip-portal"; }
|
|
150
150
|
static get encapsulation() { return "shadow"; }
|
|
@@ -10,7 +10,7 @@ const SdTh = /*@__PURE__*/ proxyCustomElement(class SdTh extends H {
|
|
|
10
10
|
}
|
|
11
11
|
}
|
|
12
12
|
render() {
|
|
13
|
-
return (h(Host, { key: '
|
|
13
|
+
return (h(Host, { key: '04e75c300b9147dc122570af4b1f4729d6ee1902', role: "columnheader" }, h("slot", { key: '29cbcdc0f8b8087c4c8bf593a7dfe8cf56bcaf39' })));
|
|
14
14
|
}
|
|
15
15
|
static get style() { return sdThCss(); }
|
|
16
16
|
}, [260, "sd-th"]);
|
|
@@ -29,6 +29,6 @@ function defineCustomElement() {
|
|
|
29
29
|
}
|
|
30
30
|
|
|
31
31
|
export { SdTh as S, defineCustomElement as d };
|
|
32
|
-
//# sourceMappingURL=p-
|
|
32
|
+
//# sourceMappingURL=p-6qJVnQg4.js.map
|
|
33
33
|
|
|
34
|
-
//# sourceMappingURL=p-
|
|
34
|
+
//# sourceMappingURL=p-6qJVnQg4.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-
|
|
1
|
+
{"file":"p-6qJVnQg4.js","mappings":";;AAAA,MAAM,OAAO,GAAG,MAAM,CAAC,6HAA6H,CAAC;;MCMxI,IAAI,iBAAAA,kBAAA,CAAA,MAAA,IAAA,SAAAC,CAAA,CAAA;;;;;;;IAChB,MAAM,GAAA;QACL,QACC,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,cAAc,EAAA,EACxB,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACP;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-table/sd-th/sd-th.scss?tag=sd-th","src/components/sd-table/sd-th/sd-th.tsx"],"sourcesContent":["sd-th {\n display: table-cell;\n padding: 12px;\n font-weight: bold;\n text-align: left;\n border-bottom: 2px solid #ddd;\n background-color: #f1f1f1;\n}\n","import { Component, Host, h } from '@stencil/core';\n\n@Component({\n tag: 'sd-th',\n styleUrl: 'sd-th.scss',\n})\nexport class SdTh {\n render() {\n return (\n <Host role=\"columnheader\">\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -121,7 +121,7 @@ const SdPortal = /*@__PURE__*/ proxyCustomElement(class SdPortal extends H {
|
|
|
121
121
|
this.sdClose.emit();
|
|
122
122
|
}
|
|
123
123
|
render() {
|
|
124
|
-
return h("slot", { key: '
|
|
124
|
+
return h("slot", { key: '05a54c512300d0616811e11a795170490feff876' });
|
|
125
125
|
}
|
|
126
126
|
}, [772, "sd-portal", {
|
|
127
127
|
"to": [1],
|
|
@@ -145,6 +145,6 @@ function defineCustomElement() {
|
|
|
145
145
|
}
|
|
146
146
|
|
|
147
147
|
export { SdPortal as S, defineCustomElement as d };
|
|
148
|
-
//# sourceMappingURL=p-
|
|
148
|
+
//# sourceMappingURL=p-B8yBkdjE.js.map
|
|
149
149
|
|
|
150
|
-
//# sourceMappingURL=p-
|
|
150
|
+
//# sourceMappingURL=p-B8yBkdjE.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-
|
|
1
|
+
{"file":"p-B8yBkdjE.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-portal/sd-portal.tsx"],"sourcesContent":["import { Component, Element, Event, EventEmitter, Listen, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'sd-portal',\n shadow: false,\n})\nexport class SdPortal {\n @Element() hostEl!: HTMLElement;\n @Prop() to: HTMLElement | string = 'body';\n @Prop() parentRef: HTMLElement | null = null;\n @Prop() offset: [number, number] = [0, 4];\n @Prop() zIndex: number = 9999;\n @Prop() open: boolean = false;\n\n @Event() sdClose!: EventEmitter<void>;\n\n private container?: HTMLElement;\n private wrapper?: HTMLElement;\n private rafId?: number;\n private isInsideClick = false;\n\n private resizeObserver?: ResizeObserver;\n private mutationObserver?: MutationObserver;\n\n componentDidLoad() {\n this.container = this.resolveContainer();\n this.createWrapper();\n this.moveSlotContent();\n this.updatePosition();\n this.observeParent();\n }\n\n componentDidRender() {\n if (!this.wrapper) return;\n this.wrapper.style.display = this.open ? 'block' : 'none';\n if (this.open) this.updatePosition();\n }\n\n disconnectedCallback() {\n this.unobserveParent();\n this.wrapper?.remove();\n }\n\n private resolveContainer(): HTMLElement {\n const el = typeof this.to === 'string' ? document.querySelector(this.to) : this.to;\n return el instanceof HTMLElement ? el : document.body;\n }\n\n private createWrapper() {\n this.wrapper = document.createElement('div');\n Object.assign(this.wrapper.style, {\n position: 'absolute',\n zIndex: this.zIndex.toString(),\n transition: 'opacity 0.4s',\n });\n this.container!.appendChild(this.wrapper);\n }\n\n private moveSlotContent() {\n if (!this.wrapper) return;\n const nodes = Array.from(this.hostEl.childNodes).filter(n => n.nodeType !== Node.COMMENT_NODE);\n nodes.forEach(n => this.wrapper!.appendChild(n));\n }\n\n // 위치 갱신 (scroll / resize)\n @Listen('scroll', { target: 'window' })\n @Listen('resize', { target: 'window' })\n updatePosition() {\n if (this.rafId) cancelAnimationFrame(this.rafId);\n this.rafId = requestAnimationFrame(() => {\n if (!this.parentRef || !this.wrapper) return;\n\n const parentRect = this.parentRef.getBoundingClientRect();\n const wrapperRect = this.wrapper.getBoundingClientRect();\n const viewport = {\n width: window.innerWidth,\n height: window.innerHeight,\n };\n\n let top = parentRect.bottom + window.scrollY + this.offset[1];\n let left = parentRect.left + window.scrollX + this.offset[0];\n\n // 화면 상하단 넘어갈 시 반전\n if (parentRect.bottom + wrapperRect.height + this.offset[1] > viewport.height) {\n top = parentRect.top + window.scrollY - wrapperRect.height - this.offset[1];\n }\n if (top < window.scrollY) {\n top = parentRect.bottom + window.scrollY + this.offset[1];\n }\n\n // 화면 좌우측 넘어갈 시 반전\n if (parentRect.left + wrapperRect.width + this.offset[0] > viewport.width) {\n left = parentRect.right + window.scrollX - wrapperRect.width - this.offset[0];\n }\n if (left < 0) {\n left = this.offset[0];\n }\n\n this.wrapper.style.top = `${top}px`;\n this.wrapper.style.left = `${left}px`;\n });\n }\n\n // parentRef의 이동 / 크기변경 감지\n private observeParent() {\n if (!this.parentRef) return;\n\n this.resizeObserver = new ResizeObserver(() => this.updatePosition());\n this.resizeObserver.observe(this.parentRef);\n\n this.mutationObserver = new MutationObserver(() => this.updatePosition());\n this.mutationObserver.observe(document.body, {\n childList: true,\n subtree: true,\n });\n }\n\n private unobserveParent() {\n this.resizeObserver?.disconnect();\n this.mutationObserver?.disconnect();\n }\n\n // 외부 클릭 감지\n @Listen('mousedown', { target: 'window' })\n handleMouseDown(e: MouseEvent) {\n this.isInsideClick = !!(this.wrapper && this.wrapper.contains(e.target as Node));\n }\n\n @Listen('click', { target: 'window' })\n handleWindowClick(e: MouseEvent) {\n if (this.isInsideClick) {\n this.isInsideClick = false;\n return;\n }\n if (this.wrapper?.contains(e.target as Node)) return;\n this.sdClose.emit();\n }\n\n render() {\n return <slot></slot>;\n }\n}\n"],"version":3}
|