@sellmate/design-system 0.0.34 → 0.0.35
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-badge.cjs.entry.js +1 -1
- package/dist/cjs/sd-button.sd-checkbox.sd-guide.sd-icon.sd-input.sd-pagination.sd-portal.sd-select.sd-select-option.sd-table.sd-tbody.sd-th.sd-tooltip.sd-tooltip-portal.sd-tr.entry.cjs.js.map +1 -0
- package/dist/cjs/{sd-button_13.cjs.entry.js → sd-button_15.cjs.entry.js} +81 -78
- package/dist/cjs/sd-card.cjs.entry.js +1 -1
- package/dist/cjs/sd-date-picker.cjs.entry.js +2 -2
- package/dist/cjs/sd-date-range-picker.cjs.entry.js +2 -2
- package/dist/cjs/sd-loading-spinner.cjs.entry.js +18 -0
- package/dist/cjs/sd-loading-spinner.entry.cjs.js.map +1 -0
- 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-select-option-group.cjs.entry.js +3 -3
- package/dist/cjs/sd-table-backup.cjs.entry.js +265 -0
- package/dist/cjs/sd-table-backup.entry.cjs.js.map +1 -0
- package/dist/cjs/sd-tag.cjs.entry.js +1 -1
- package/dist/cjs/sd-td.cjs.entry.js +26 -0
- package/dist/cjs/sd-td.entry.cjs.js.map +1 -0
- package/dist/collection/collection-manifest.json +5 -0
- package/dist/collection/components/sd-badge/sd-badge.js +1 -1
- package/dist/collection/components/sd-card/sd-card.js +1 -1
- package/dist/collection/components/sd-date-picker/sd-date-picker.js +2 -2
- package/dist/collection/components/sd-date-range-picker/sd-date-range-picker.js +2 -2
- package/dist/collection/components/sd-guide/sd-guide.js +3 -3
- package/dist/collection/components/sd-icon/sd-icon.js +1 -1
- package/dist/collection/components/sd-input/sd-input.js +2 -2
- package/dist/collection/components/sd-loading-spinner/sd-loading-spinner.js +1 -1
- 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-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-table-backup.js +2743 -0
- package/dist/collection/components/sd-table/sd-table-backup.js.map +1 -0
- package/dist/collection/components/sd-table/sd-table.css +17 -15
- package/dist/collection/components/sd-table/sd-table.js +24 -2087
- package/dist/collection/components/sd-table/sd-table.js.map +1 -1
- package/dist/collection/components/sd-table/sd-tbody/sd-tbody.css +3 -0
- package/dist/collection/components/sd-table/sd-tbody/sd-tbody.js +18 -0
- package/dist/collection/components/sd-table/sd-tbody/sd-tbody.js.map +1 -0
- package/dist/collection/components/sd-table/sd-td/sd-td.css +9 -0
- package/dist/collection/components/sd-table/sd-td/sd-td.js +111 -0
- package/dist/collection/components/sd-table/sd-td/sd-td.js.map +1 -0
- package/dist/collection/components/sd-table/sd-th/sd-th.css +8 -0
- package/dist/collection/components/sd-table/sd-th/sd-th.js +18 -0
- package/dist/collection/components/sd-table/sd-th/sd-th.js.map +1 -0
- package/dist/collection/components/sd-table/sd-tr/sd-tr.css +3 -0
- package/dist/collection/components/sd-table/sd-tr/sd-tr.js +18 -0
- package/dist/collection/components/sd-table/sd-tr/sd-tr.js.map +1 -0
- package/dist/collection/components/sd-tag/sd-tag.js +1 -1
- package/dist/collection/components/sd-tooltip/sd-tooltip.js +4 -5
- package/dist/collection/components/sd-tooltip/sd-tooltip.js.map +1 -1
- package/dist/collection/components/sd-tooltip-portal/sd-tooltip-portal.js +1 -1
- package/dist/components/{p-Bry2vtXF.js → p-5yzkkdZ2.js} +3 -3
- package/dist/components/{p-Bry2vtXF.js.map → p-5yzkkdZ2.js.map} +1 -1
- package/dist/components/{p-B5jkeFCb.js → p-B8lMIjWB.js} +7 -7
- package/dist/components/{p-B5jkeFCb.js.map → p-B8lMIjWB.js.map} +1 -1
- package/dist/components/{p-BoIp700J.js → p-BEDQ2CIp.js} +5 -5
- package/dist/components/{p-BoIp700J.js.map → p-BEDQ2CIp.js.map} +1 -1
- package/dist/components/{p-DXyjyA0e.js → p-BEq3cGoC.js} +3 -3
- package/dist/components/{p-DXyjyA0e.js.map → p-BEq3cGoC.js.map} +1 -1
- package/dist/components/{p-BLVHOrsi.js → p-BG0UE2wL.js} +3 -3
- package/dist/components/{p-BLVHOrsi.js.map → p-BG0UE2wL.js.map} +1 -1
- package/dist/components/p-BeBw4eSm.js +34 -0
- package/dist/components/p-BeBw4eSm.js.map +1 -0
- package/dist/components/{p-DKW5kNQD.js → p-BzdIpn5T.js} +11 -11
- package/dist/components/p-BzdIpn5T.js.map +1 -0
- package/dist/components/{p-cZZiWgpx.js → p-CSnKPDQz.js} +5 -5
- package/dist/components/{p-cZZiWgpx.js.map → p-CSnKPDQz.js.map} +1 -1
- package/dist/components/{p-CHw7bav7.js → p-CqpahWAy.js} +3 -3
- package/dist/components/{p-CHw7bav7.js.map → p-CqpahWAy.js.map} +1 -1
- package/dist/components/p-CrmdI2cD.js +34 -0
- package/dist/components/p-CrmdI2cD.js.map +1 -0
- package/dist/components/p-D-s8kK6P.js +34 -0
- package/dist/components/p-D-s8kK6P.js.map +1 -0
- package/dist/components/{p-DR6QXFmO.js → p-Du8-vyL0.js} +3 -3
- package/dist/components/{p-DR6QXFmO.js.map → p-Du8-vyL0.js.map} +1 -1
- package/dist/components/{p-CsP5aJ3N.js → p-GNK9vrin.js} +3 -3
- package/dist/components/{p-CsP5aJ3N.js.map → p-GNK9vrin.js.map} +1 -1
- package/dist/components/{p-D60I2CpC.js → p-ntW8MKYi.js} +5 -5
- package/dist/components/{p-D60I2CpC.js.map → p-ntW8MKYi.js.map} +1 -1
- package/dist/components/{p-CVmIv1LY.js → p-ybbnPl4X.js} +7 -7
- package/dist/components/{p-CVmIv1LY.js.map → p-ybbnPl4X.js.map} +1 -1
- package/dist/components/sd-badge.js +1 -1
- package/dist/components/sd-button.js +1 -1
- package/dist/components/sd-card.js +1 -1
- package/dist/components/sd-checkbox.js +1 -1
- package/dist/components/sd-date-picker.js +5 -5
- package/dist/components/sd-date-range-picker.js +5 -5
- package/dist/components/sd-guide.js +6 -6
- 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-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 +5 -5
- 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.js +1 -1
- package/dist/components/sd-table-backup.d.ts +11 -0
- package/dist/components/sd-table-backup.js +379 -0
- package/dist/components/sd-table-backup.js.map +1 -0
- package/dist/components/sd-table.js +59 -70
- package/dist/components/sd-table.js.map +1 -1
- package/dist/components/sd-tag.js +1 -1
- package/dist/components/sd-tbody.d.ts +11 -0
- package/dist/components/sd-tbody.js +9 -0
- package/dist/components/sd-tbody.js.map +1 -0
- package/dist/components/sd-td.d.ts +11 -0
- package/dist/components/sd-td.js +50 -0
- package/dist/components/sd-td.js.map +1 -0
- package/dist/components/sd-th.d.ts +11 -0
- package/dist/components/sd-th.js +9 -0
- package/dist/components/sd-th.js.map +1 -0
- package/dist/components/sd-tooltip-portal.js +1 -1
- package/dist/components/sd-tooltip.js +1 -1
- package/dist/components/sd-tr.d.ts +11 -0
- package/dist/components/sd-tr.js +9 -0
- package/dist/components/sd-tr.js.map +1 -0
- package/dist/design-system/design-system.esm.js +1 -1
- package/dist/design-system/{p-ac7dbf3c.entry.js → p-01f44c51.entry.js} +2 -2
- package/dist/design-system/p-49f98f09.entry.js +2 -0
- package/dist/design-system/p-671a08a6.entry.js +2 -0
- package/dist/design-system/p-671a08a6.entry.js.map +1 -0
- package/dist/design-system/p-6a624672.entry.js +2 -0
- package/dist/design-system/{p-e9800353.entry.js → p-78f90517.entry.js} +2 -2
- package/dist/design-system/{p-048f83bb.entry.js → p-7e18d4cf.entry.js} +2 -2
- package/dist/design-system/p-7e18d4cf.entry.js.map +1 -0
- package/dist/design-system/{p-6d769a19.entry.js → p-88745dfe.entry.js} +2 -2
- package/dist/design-system/{p-eeed34eb.entry.js → p-8b60af66.entry.js} +2 -2
- package/dist/design-system/p-985be35d.entry.js +2 -0
- package/dist/design-system/{p-d492a315.entry.js.map → p-985be35d.entry.js.map} +1 -1
- package/dist/design-system/{p-cdc6b2c8.entry.js → p-a72c4b0c.entry.js} +2 -2
- package/dist/design-system/{p-56b88d9b.entry.js → p-d003ee3d.entry.js} +2 -2
- package/dist/design-system/p-d74bfbe4.entry.js +2 -0
- package/dist/design-system/p-d74bfbe4.entry.js.map +1 -0
- package/dist/design-system/p-ef5ffaa2.entry.js +2 -0
- package/dist/design-system/p-ef5ffaa2.entry.js.map +1 -0
- package/dist/design-system/sd-button.sd-checkbox.sd-guide.sd-icon.sd-input.sd-pagination.sd-portal.sd-select.sd-select-option.sd-table.sd-tbody.sd-th.sd-tooltip.sd-tooltip-portal.sd-tr.entry.esm.js.map +1 -0
- package/dist/design-system/sd-loading-spinner.entry.esm.js.map +1 -0
- package/dist/design-system/sd-table-backup.entry.esm.js.map +1 -0
- package/dist/design-system/sd-td.entry.esm.js.map +1 -0
- package/dist/esm/design-system.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/sd-badge.entry.js +1 -1
- package/dist/esm/sd-button.sd-checkbox.sd-guide.sd-icon.sd-input.sd-pagination.sd-portal.sd-select.sd-select-option.sd-table.sd-tbody.sd-th.sd-tooltip.sd-tooltip-portal.sd-tr.entry.js.map +1 -0
- package/dist/esm/{sd-button_13.entry.js → sd-button_15.entry.js} +79 -78
- package/dist/esm/sd-card.entry.js +1 -1
- package/dist/esm/sd-date-picker.entry.js +2 -2
- package/dist/esm/sd-date-range-picker.entry.js +2 -2
- package/dist/esm/sd-loading-spinner.entry.js +16 -0
- package/dist/esm/sd-loading-spinner.entry.js.map +1 -0
- 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-select-option-group.entry.js +3 -3
- package/dist/esm/sd-table-backup.entry.js +263 -0
- package/dist/esm/sd-table-backup.entry.js.map +1 -0
- package/dist/esm/sd-tag.entry.js +1 -1
- package/dist/esm/sd-td.entry.js +24 -0
- package/dist/esm/sd-td.entry.js.map +1 -0
- package/dist/types/components/sd-table/sd-table-backup.d.ts +80 -0
- package/dist/types/components/sd-table/sd-table.d.ts +0 -4
- package/dist/types/components/sd-table/sd-tbody/sd-tbody.d.ts +3 -0
- package/dist/types/components/sd-table/sd-td/sd-td.d.ts +7 -0
- package/dist/types/components/sd-table/sd-th/sd-th.d.ts +3 -0
- package/dist/types/components/sd-table/sd-tr/sd-tr.d.ts +3 -0
- package/dist/types/components.d.ts +221 -0
- package/hydrate/index.js +405 -39
- package/hydrate/index.mjs +405 -39
- package/package.json +2 -2
- package/dist/cjs/sd-button.sd-checkbox.sd-guide.sd-icon.sd-input.sd-loading-spinner.sd-pagination.sd-portal.sd-select.sd-select-option.sd-table.sd-tooltip.sd-tooltip-portal.entry.cjs.js.map +0 -1
- package/dist/components/p-DKW5kNQD.js.map +0 -1
- package/dist/design-system/p-048f83bb.entry.js.map +0 -1
- package/dist/design-system/p-c1e64ba9.entry.js +0 -2
- package/dist/design-system/p-ce01c171.entry.js +0 -2
- package/dist/design-system/p-d492a315.entry.js +0 -2
- package/dist/design-system/sd-button.sd-checkbox.sd-guide.sd-icon.sd-input.sd-loading-spinner.sd-pagination.sd-portal.sd-select.sd-select-option.sd-table.sd-tooltip.sd-tooltip-portal.entry.esm.js.map +0 -1
- package/dist/esm/sd-button.sd-checkbox.sd-guide.sd-icon.sd-input.sd-loading-spinner.sd-pagination.sd-portal.sd-select.sd-select-option.sd-table.sd-tooltip.sd-tooltip-portal.entry.js.map +0 -1
- /package/dist/design-system/{p-ac7dbf3c.entry.js.map → p-01f44c51.entry.js.map} +0 -0
- /package/dist/design-system/{p-ce01c171.entry.js.map → p-49f98f09.entry.js.map} +0 -0
- /package/dist/design-system/{p-c1e64ba9.entry.js.map → p-6a624672.entry.js.map} +0 -0
- /package/dist/design-system/{p-e9800353.entry.js.map → p-78f90517.entry.js.map} +0 -0
- /package/dist/design-system/{p-6d769a19.entry.js.map → p-88745dfe.entry.js.map} +0 -0
- /package/dist/design-system/{p-eeed34eb.entry.js.map → p-8b60af66.entry.js.map} +0 -0
- /package/dist/design-system/{p-cdc6b2c8.entry.js.map → p-a72c4b0c.entry.js.map} +0 -0
- /package/dist/design-system/{p-56b88d9b.entry.js.map → p-d003ee3d.entry.js.map} +0 -0
|
@@ -199,11 +199,11 @@ const SdGuide = class {
|
|
|
199
199
|
};
|
|
200
200
|
render() {
|
|
201
201
|
const { name: iconName, size: iconSize, color: iconColor } = GUIDE_ICON[this.type];
|
|
202
|
-
return (index.h(index.Host, { key: '
|
|
202
|
+
return (index.h(index.Host, { key: '456a4ced90ec49ddf4969c1e9a87d68fc503355c', style: {
|
|
203
203
|
'--sd-guide-color': GUIDE_ICON[this.type].color,
|
|
204
|
-
} }, index.h("sd-button", { key: '
|
|
204
|
+
} }, index.h("sd-button", { key: '64e61ca7e8d475abac27191f6f7e2ee33d7b8bc8', ref: el => (this.guideRef = el), class: this.guideClass, variant: this.popupShow ? 'primary' : 'outline', label: GUIDE_LABEL[this.type], size: "sm", color: this.popupShow ? GUIDE_ICON[this.type].color : 'grey_45', icon: iconName, iconColor: this.popupShow ? 'white' : iconColor, iconSize: iconSize, noHover: this.popupShow, onSdClick: this.handleClickGuide }), this.type === 'help' && this.popupShow && (index.h("sd-portal", { key: '6139d4b7436c3d90e1b0228e1d105a15be240b60', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, index.h("div", { key: 'b83b58048bc943f28decd421eca8eca78cfb87fd', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, index.h("sd-button", { key: 'd5a27f011f1ef48f7b02cd1a12684a322b077dbf', class: "sd-guide__popup__close", icon: "close", color: resolveColor.colors.grey_65, size: "md", variant: "ghost", noHover: true,
|
|
205
205
|
// buttonStyle={{ padding: '0px', minHeight: '0px' }}
|
|
206
|
-
onSdClick: this.closeDropdown }), index.h("div", { key: '
|
|
206
|
+
onSdClick: this.closeDropdown }), index.h("div", { key: '400884e7c9d5bc84a21a45bb6eb8bf83974d65a6', class: "sd-guide__popup__header" }, index.h("sd-icon", { key: '87c70c74d58100ab13de6daa338760856b20bebe', name: "helpOutline", size: 24, color: resolveColor.colors.green_65 }), index.h("h3", { key: '1ac10ed9ddc9fad160df651e4f6df90929c75b96', class: "sd-guide__popup__title" }, this.label || GUIDE_LABEL[this.type])), index.h("ul", { key: '17aebdd0710223e0ddfe6502ebb14c74f3e6cdb2', class: "sd-guide__popup__list" }, this.renderListItem(this.message)))))));
|
|
207
207
|
}
|
|
208
208
|
// 현재 2depth까지만 스타일 적용
|
|
209
209
|
renderListItem(message, depth = 0) {
|
|
@@ -2233,7 +2233,7 @@ const SdIcon = class {
|
|
|
2233
2233
|
}
|
|
2234
2234
|
render() {
|
|
2235
2235
|
const IconComponent = Icons[this.name]?.[this.size];
|
|
2236
|
-
return (index.h("i", { key: '
|
|
2236
|
+
return (index.h("i", { key: '4a6dcce190786e6871983bace12e3b83626cf34f', class: this.getIconClasses(), style: this.iconStyle }, index.h(IconComponent, { key: '8e8d9e8bdbde174e7fee37d2ac669bb5bdcc2d69', color: this.resolvedColor })));
|
|
2237
2237
|
}
|
|
2238
2238
|
};
|
|
2239
2239
|
SdIcon.style = sdIconCss;
|
|
@@ -2338,11 +2338,11 @@ const SdInput = class {
|
|
|
2338
2338
|
'--input-width': typeof this.width === 'number' ? `${this.width}px` : this.width,
|
|
2339
2339
|
}
|
|
2340
2340
|
: {};
|
|
2341
|
-
return (index.h(index.Host, { key: '
|
|
2341
|
+
return (index.h(index.Host, { key: 'b32d1ffee0333ce2bf7cfc4ea6157bd05e8072c8', style: inputWidth }, this.label && index.h("div", { key: '886bf269148fdf6539e47840ae769ea21a0c2b32', class: "sd-input__label" }, this.label), index.h("label", { key: '9879bcdf3f2d70e15470154210f222398fedcb24', class: {
|
|
2342
2342
|
'sd-input': true,
|
|
2343
2343
|
[this.getInputStatus()]: true,
|
|
2344
2344
|
'sd-input--barcode': !!this.barcode,
|
|
2345
|
-
}, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, index.h("slot", { key: '
|
|
2345
|
+
}, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, index.h("slot", { key: '7af6869c5e833133e596a36b6431756e72778eda', name: "prefix" }), index.h("input", { key: '7e512876904fc73c7dcf7ff67f0d3cca4c9bff6c', 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) }), index.h("slot", { key: '98cf2e1011b873fe0aaa352351a1fe669a6ab095', name: "suffix" }), this.clearable && this.internalValue && (index.h("sd-icon", { key: '3cf6dbe1ab1bad476a636a634ebed6120902216b', name: "close", color: "#888", class: "sd-input__clear-icon", onClick: () => {
|
|
2346
2346
|
this.internalValue = '';
|
|
2347
2347
|
this.sdChange?.emit(this.internalValue);
|
|
2348
2348
|
this.sdInput?.emit(this.internalValue);
|
|
@@ -2355,18 +2355,6 @@ const SdInput = class {
|
|
|
2355
2355
|
};
|
|
2356
2356
|
SdInput.style = sdInputCss;
|
|
2357
2357
|
|
|
2358
|
-
const sdLoadingSpinnerCss = "sd-loading-spinner{display:block}sd-loading-spinner .sd-loading-spinner{animation:sd-loading-spin 2s linear infinite;transform-origin:center center}sd-loading-spinner .sd-loading-spinner .path{animation:sd-loading-spin-path 1.5s ease-in-out infinite}@keyframes sd-loading-spin{0%{transform:rotate3d(0, 0, 1, 0deg)}25%{transform:rotate3d(0, 0, 1, 90deg)}50%{transform:rotate3d(0, 0, 1, 180deg)}75%{transform:rotate3d(0, 0, 1, 270deg)}100%{transform:rotate3d(0, 0, 1, 359deg)}}@keyframes sd-loading-spin-path{0%{stroke-dasharray:1, 200;stroke-dashoffset:0}50%{stroke-dasharray:89, 200;stroke-dashoffset:-35px}100%{stroke-dasharray:89, 200;stroke-dashoffset:-124px}}";
|
|
2359
|
-
|
|
2360
|
-
const SdLoadingSpinner = class {
|
|
2361
|
-
constructor(hostRef) {
|
|
2362
|
-
index.registerInstance(this, hostRef);
|
|
2363
|
-
}
|
|
2364
|
-
render() {
|
|
2365
|
-
return (index.h(index.Host, { key: '5e0bd2fb9b7398091e38c525ea940373d6fde15a' }, index.h("svg", { key: 'ebc330686702cac30c3b8ffe9c7fa8e9618bd74d', class: "sd-loading-spinner text-positive", width: "72px", height: "72px", viewBox: "25 25 50 50" }, index.h("circle", { key: '1dc766d141fbb35d2fc2dcdd7e1ea4c0eb517fe5', class: "path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "5", "stroke-miterlimit": "10" }))));
|
|
2366
|
-
}
|
|
2367
|
-
};
|
|
2368
|
-
SdLoadingSpinner.style = sdLoadingSpinnerCss;
|
|
2369
|
-
|
|
2370
2358
|
const sdPaginationCss = ".sd-pagination{display:flex;flex-flow:row nowrap;align-items:center;justify-content:center;gap:8px;color:#555555;width:100%;font-size:12px}.sd-pagination .prepend-btns{display:flex;flex-flow:row nowrap;align-items:center;gap:8px;width:60px}.sd-pagination .prepend-btns button{width:26px;height:26px;border:0;background:none}.sd-pagination .prepend-btns button:hover{border:1px solid #006ac1;border-radius:14px}.sd-pagination .append-btns{display:flex;flex-flow:row nowrap;align-items:center;gap:8px;width:60px}.sd-pagination .append-btns button{width:26px;height:26px;border:0;background:none}.sd-pagination .append-btns button:hover{border:1px solid #006ac1;border-radius:14px}.sd-pagination .pagination-btn{display:flex;align-items:center;justify-content:center;border-radius:14px;outline:none;border:none;cursor:pointer;height:26px;color:#555555;width:var(--pagination-btn-width, 26px)}.sd-pagination .pagination-btn--selected{background-color:#006ac1;color:white}.sd-pagination .pagination-btn:hover{border:1px solid #006ac1}.sd-pagination--simple .pagination-info{line-height:26px;display:flex;flex-flow:row nowrap;align-items:center;gap:8px}.sd-pagination--simple .pagination-info .current-page,.sd-pagination--simple .pagination-info .last-page{padding:0 2px}";
|
|
2371
2359
|
|
|
2372
2360
|
const BUTTON_WIDTH = {
|
|
@@ -2447,12 +2435,12 @@ const SdPagination = class {
|
|
|
2447
2435
|
}
|
|
2448
2436
|
}
|
|
2449
2437
|
render() {
|
|
2450
|
-
return (index.h("div", { key: '
|
|
2438
|
+
return (index.h("div", { key: '32ceb425c836a4051dec25cdb69aa4a3b189acd5', class: this.paginationClasses }, index.h("div", { key: '19ad8d6a74f2f658efa5a6bdcb6cae1458412a88', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (index.h("div", { class: "pagination-info" }, index.h("span", { class: "current-page" }, this.currentPage), index.h("span", null, "/"), index.h("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (index.h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
|
|
2451
2439
|
'pagination-btn': true,
|
|
2452
2440
|
'pagination-btn--selected': this.currentPage === n,
|
|
2453
2441
|
}, disabled: this.currentPage === n, style: {
|
|
2454
2442
|
'--pagination-btn-width': `${this.buttonWidth}px`,
|
|
2455
|
-
}, onClick: () => this.handlePageChange(n) }, n)))), index.h("div", { key: '
|
|
2443
|
+
}, onClick: () => this.handlePageChange(n) }, n)))), index.h("div", { key: 'c78801a4c1db43f2fefca6e2684297a5c4ab366f', class: "append-btns" }, this.renderNextButtons())));
|
|
2456
2444
|
}
|
|
2457
2445
|
static get watchers() { return {
|
|
2458
2446
|
"currentPage": ["onPropChange"],
|
|
@@ -2579,7 +2567,7 @@ const SdPortal = class {
|
|
|
2579
2567
|
this.sdClose.emit();
|
|
2580
2568
|
}
|
|
2581
2569
|
render() {
|
|
2582
|
-
return index.h("slot", { key: '
|
|
2570
|
+
return index.h("slot", { key: '00d9c45ad016f874250e3ca637abee455860d479' });
|
|
2583
2571
|
}
|
|
2584
2572
|
};
|
|
2585
2573
|
|
|
@@ -2862,7 +2850,7 @@ const SdSelectOption = class {
|
|
|
2862
2850
|
}
|
|
2863
2851
|
};
|
|
2864
2852
|
render() {
|
|
2865
|
-
return (index.h(index.Host, { key: '
|
|
2853
|
+
return (index.h(index.Host, { key: '87e4810a3c5058cc0969748d6cdf83b0fdcf9d8e' }, index.h("div", { key: '8d502e3a2ebdd8810abfdfd8ed317554e1e89f6f', class: {
|
|
2866
2854
|
'sd-select__option': true,
|
|
2867
2855
|
'sd-select__option--selected': this.isSelected,
|
|
2868
2856
|
'sd-select__option--disabled': !!this.option.disabled,
|
|
@@ -2884,7 +2872,7 @@ const SdSelectOption = class {
|
|
|
2884
2872
|
};
|
|
2885
2873
|
SdSelectOption.style = sdSelectOptionCss;
|
|
2886
2874
|
|
|
2887
|
-
const sdTableCss = ".sd-table__wrapper .sd-table__container .sd-table__middle{overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar{opacity:0;background:#e5e5e5}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar:horizontal{height:8px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar:vertical{width:8px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar-thumb{height:80px;background-color:#cccccc;border-radius:4px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar-track{background-color:transparent}.sd-table__wrapper{height:var(--table-height, auto);width:var(--table-width, 100%);color:#222222}.sd-table__wrapper .sd-table__container{width:100%;height:auto;border:1px solid #e1e1e1;border-radius:8px;font-size:12px;overflow:hidden}.sd-table__wrapper .sd-table__container .sd-table__middle{overflow:auto;will-change:scroll-position;height:var(--table-height, auto)}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;position:relative}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable td.sd-td--selected,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable th.sd-th--selected{width:52px !important;max-width:52px !important;min-width:52px !important;padding:0 10px 0 24px;text-align:left}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-header thead{position:sticky;top:0;z-index:120}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-left,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-right{position:sticky;background-color:#f5faff;z-index:110 !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-left,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-right{position:sticky;background-color:white;z-index:100 !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column .sticky-left{left:var(--sticky-left-offset, 0)}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column .sticky-right{right:var(--sticky-right-offset, 0)}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-cell{position:sticky;z-index:102;background-color:#f5faff}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-cell{position:sticky;z-index:101;background-color:white}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left th.sticky-left-edge,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left td.sticky-left-edge{overflow:visible}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left th.sticky-left-edge:after,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left td.sticky-left-edge:after{content:\"\";position:absolute;top:0;left:100%;right:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset 12px 0 20px -25px;opacity:1;pointer-events:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right th.sticky-right-edge,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right td.sticky-right-edge{overflow:visible}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right th.sticky-right-edge:after,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right td.sticky-right-edge:after{content:\"\";position:absolute;top:0;left:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset -12px 0 20px -25px;opacity:1;pointer-events:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--no-data thead{opacity:0.4}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--no-data thead tr th.sd-th{border-bottom:1px solid rgba(225, 225, 225, 0.4) !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table td,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table th,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table .sd-th__content--label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead{height:36px}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr{width:100%}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th{background:#f5faff;height:36px;padding:0 16px;font-weight:500;vertical-align:middle;border-bottom:1px solid #e1e1e1;-webkit-user-select:none;user-select:none;position:relative}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content{display:flex;flex-flow:row nowrap;align-items:center;gap:4px}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--left{justify-content:flex-start}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--center{justify-content:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--right{justify-content:flex-end}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__resizer{position:absolute;top:50%;right:0;transform:translateY(-50%);width:4px;height:16px;cursor:col-resize;z-index:3;border-left:1px solid #cccccc;border-right:1px solid #cccccc}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody .sd-table__loading{position:absolute;top:0;left:0;width:100%;height:calc(var(--table-height, auto) - 36px);min-height:calc(100% - 36px);background:rgba(255, 255, 255, 0.6);z-index:200;display:flex;align-items:center;justify-content:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr:last-of-type td{border-bottom:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td{height:44px;padding:0 16px;border-bottom:1px solid #e1e1e1;background:white;vertical-align:middle}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td.sd-td--left{text-align:left}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td.sd-td--center{text-align:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td.sd-td--right{text-align:right}.sd-table__wrapper .sd-table__container .sd-table__bottom{background:white;text-align:center}.sd-table__wrapper .sd-table__pagination{position:relative;background:#f9f9f9;height:48px;display:flex;align-items:center;justify-content:center;border:1px solid #e1e1e1;border-top:none;border-radius:8px}.sd-table__wrapper .sd-table__pagination sd-select{position:absolute;right:10px;top:50%;transform:translateY(-50%)}";
|
|
2875
|
+
const sdTableCss = ".sd-table__wrapper .sd-table__container .sd-table__middle{overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar{opacity:0;background:#e5e5e5}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar:horizontal{height:8px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar:vertical{width:8px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar-thumb{height:80px;background-color:#cccccc;border-radius:4px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar-track{background-color:transparent}.sd-table__wrapper{height:var(--table-height, auto);width:var(--table-width, 100%);color:#222222}.sd-table__wrapper .sd-table__container{width:100%;height:auto;border:1px solid #e1e1e1;border-radius:8px;font-size:12px;overflow:hidden}.sd-table__wrapper .sd-table__container .sd-table__middle{overflow:auto;will-change:scroll-position;height:var(--table-height, auto)}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table{background-color:white;display:table;width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;position:relative}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable td.sd-td--selected,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable th.sd-th--selected{width:52px !important;max-width:52px !important;min-width:52px !important;padding:0 10px 0 24px;text-align:left}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-header thead{position:sticky;top:0;z-index:120}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-left,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-right{position:sticky;background-color:#f5faff;z-index:110 !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-left,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-right{position:sticky;background-color:white;z-index:100 !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column .sticky-left{left:var(--sticky-left-offset, 0)}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column .sticky-right{right:var(--sticky-right-offset, 0)}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-cell{position:sticky;z-index:102;background-color:#f5faff}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-cell{position:sticky;z-index:101;background-color:white}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left th.sticky-left-edge,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left td.sticky-left-edge{overflow:visible}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left th.sticky-left-edge:after,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left td.sticky-left-edge:after{content:\"\";position:absolute;top:0;left:100%;right:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset 12px 0 20px -25px;opacity:1;pointer-events:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right th.sticky-right-edge,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right td.sticky-right-edge{overflow:visible}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right th.sticky-right-edge:after,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right td.sticky-right-edge:after{content:\"\";position:absolute;top:0;left:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset -12px 0 20px -25px;opacity:1;pointer-events:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--no-data thead{opacity:0.4}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--no-data thead tr th.sd-th{border-bottom:1px solid rgba(225, 225, 225, 0.4) !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-td,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-th,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table .sd-th__content--label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead{height:36px}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead sd-tr{width:100%}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead sd-tr sd-th{background:#f5faff;height:36px;padding:0 16px;font-weight:500;vertical-align:middle;border-bottom:1px solid #e1e1e1;-webkit-user-select:none;user-select:none;position:relative}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead sd-tr sd-th.sd-th .sd-th__content{display:flex;flex-flow:row nowrap;align-items:center;gap:4px}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead sd-tr sd-th.sd-th .sd-th__content--left{justify-content:flex-start}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead sd-tr sd-th.sd-th .sd-th__content--center{justify-content:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead sd-tr sd-th.sd-th .sd-th__content--right{justify-content:flex-end}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead sd-tr sd-th.sd-th .sd-th__resizer{position:absolute;top:50%;right:0;transform:translateY(-50%);width:4px;height:16px;cursor:col-resize;z-index:3;border-left:1px solid #cccccc;border-right:1px solid #cccccc}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-tbody .sd-table__loading{position:absolute;top:0;left:0;width:100%;height:calc(var(--table-height, auto) - 36px);min-height:calc(100% - 36px);background:rgba(255, 255, 255, 0.6);z-index:200;display:flex;align-items:center;justify-content:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-tbody sd-tr:last-of-type sd-td{border-bottom:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-tbody sd-tr sd-td{height:44px;padding:0 16px;border-bottom:1px solid #e1e1e1;background:white;vertical-align:middle}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-tbody sd-tr sd-td.sd-td--left{text-align:left}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-tbody sd-tr sd-td.sd-td--center{text-align:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-tbody sd-tr sd-td.sd-td--right{text-align:right}.sd-table__wrapper .sd-table__container .sd-table__bottom{background:white;text-align:center}.sd-table__wrapper .sd-table__pagination{position:relative;background:#f9f9f9;height:48px;display:flex;align-items:center;justify-content:center;border:1px solid #e1e1e1;border-top:none;border-radius:8px}.sd-table__wrapper .sd-table__pagination sd-select{position:absolute;right:10px;top:50%;transform:translateY(-50%)}";
|
|
2888
2876
|
|
|
2889
2877
|
const SdTable = class {
|
|
2890
2878
|
constructor(hostRef) {
|
|
@@ -2989,21 +2977,20 @@ const SdTable = class {
|
|
|
2989
2977
|
.join(' ');
|
|
2990
2978
|
}
|
|
2991
2979
|
// ----- Selection -----
|
|
2992
|
-
isRowSelected(row) {
|
|
2993
|
-
|
|
2994
|
-
}
|
|
2995
|
-
updateRowSelect(row) {
|
|
2996
|
-
|
|
2997
|
-
|
|
2998
|
-
|
|
2999
|
-
|
|
3000
|
-
|
|
3001
|
-
|
|
3002
|
-
|
|
3003
|
-
|
|
3004
|
-
|
|
3005
|
-
|
|
3006
|
-
}
|
|
2980
|
+
// private isRowSelected(row: Row): boolean {
|
|
2981
|
+
// return Array.from(this.innerSelected).some(r => r[this.rowKey] === row[this.rowKey]);
|
|
2982
|
+
// }
|
|
2983
|
+
// private updateRowSelect(row: Row) {
|
|
2984
|
+
// const selectedArray = Array.from(this.innerSelected);
|
|
2985
|
+
// const exists = this.isRowSelected(row);
|
|
2986
|
+
// const newSelected = exists
|
|
2987
|
+
// ? selectedArray.filter(r => r[this.rowKey] !== row[this.rowKey])
|
|
2988
|
+
// : [...selectedArray, row];
|
|
2989
|
+
// // 동일 상태면 set하지 않음 → 불필요 렌더 방지
|
|
2990
|
+
// if (newSelected.length === selectedArray.length) return;
|
|
2991
|
+
// this.innerSelected = new Set(newSelected);
|
|
2992
|
+
// this.sdSelectChange.emit(Array.from(this.innerSelected));
|
|
2993
|
+
// }
|
|
3007
2994
|
toggleSelectAll(checked) {
|
|
3008
2995
|
if (checked) {
|
|
3009
2996
|
const pageRows = new Set([...this.paginatedRows]);
|
|
@@ -3055,20 +3042,20 @@ const SdTable = class {
|
|
|
3055
3042
|
document.addEventListener('mousemove', handleMouseMove);
|
|
3056
3043
|
document.addEventListener('mouseup', handleMouseUp);
|
|
3057
3044
|
}
|
|
3058
|
-
getCellValue(column, row) {
|
|
3059
|
-
|
|
3060
|
-
|
|
3061
|
-
|
|
3062
|
-
}
|
|
3045
|
+
// private getCellValue(column: SdTableColumn, row: Row) {
|
|
3046
|
+
// const { field, format, name } = column;
|
|
3047
|
+
// const value = typeof field === 'function' ? field(row) : field ? row[field] : row[name];
|
|
3048
|
+
// return format ? format(value, row) : value;
|
|
3049
|
+
// }
|
|
3063
3050
|
// ----- Render -----
|
|
3064
3051
|
renderHeader() {
|
|
3065
|
-
return (index.h("thead", null, index.h("tr", null, this.selectable && (index.h("th", { class: {
|
|
3052
|
+
return (index.h("thead", null, index.h("sd-tr", null, this.selectable && (index.h("sd-th", { class: {
|
|
3066
3053
|
'sd-th': true,
|
|
3067
3054
|
'sd-th--selected': true,
|
|
3068
3055
|
'sticky-left': Boolean(this.stickyColumn.left && this.stickyColumn.left > 0),
|
|
3069
3056
|
}, style: {
|
|
3070
3057
|
'--sticky-left-offset': '0px',
|
|
3071
|
-
} }, index.h("sd-checkbox", { checked: this.isAllChecked, disabled: !this.paginatedRows.length, onSdChange: (e) => this.toggleSelectAll(e.detail) }))), this.visibleColumns.map((col, colIdx) => (index.h("th", { key: col.name, class: {
|
|
3058
|
+
} }, index.h("sd-checkbox", { checked: this.isAllChecked, disabled: !this.paginatedRows.length, onSdChange: (e) => this.toggleSelectAll(e.detail) }))), this.visibleColumns.map((col, colIdx) => (index.h("sd-th", { key: col.name, class: {
|
|
3072
3059
|
'sd-th': true,
|
|
3073
3060
|
[`${col.thClass}`]: Boolean(col.thClass),
|
|
3074
3061
|
'sticky-left': Boolean(this.stickyColumn.left && colIdx < this.stickyColumn.left),
|
|
@@ -3078,33 +3065,11 @@ const SdTable = class {
|
|
|
3078
3065
|
colIdx === this.visibleColumns.length - this.stickyColumn.right),
|
|
3079
3066
|
}, style: this.getStickyStyle(colIdx) }, index.h("div", { class: `sd-th__content sd-th__content--${col.align || 'left'}` }, index.h("slot", { name: `header-cell-${col.name}` }, index.h("div", { class: "sd-th__content--label" }, col.label)), col.usePageMoveIcon && index.h("sd-icon", { name: "pageMove", size: "12", color: "#006AC1" }), col.tooltip && (index.h("sd-tooltip", { ...col.tooltipOptions }, index.h("div", { slot: "content" }, col.tooltip.map(text => (index.h("p", null, text))))))), this.resizable && typeof window !== 'undefined' && (index.h("div", { class: "sd-th__resizer", onMouseDown: (evt) => this.handleResize(colIdx, evt) }))))))));
|
|
3080
3067
|
}
|
|
3081
|
-
renderBody() {
|
|
3082
|
-
return (index.h("tbody", { ...(!this.paginatedRows.length && { part: 'tbody-empty' }) }, this.isLoading && (index.h("div", { class: "sd-table__loading" }, index.h("sd-loading-spinner", null))), !this.paginatedRows.length ? (index.h("tr", null, index.h("td", { colSpan: this.visibleColumns.length + (this.selectable ? 1 : 0) }, index.h("slot", { name: "no-data" }, this.noDataLabel)))) : (this.paginatedRows.map((row, rowIdx) => (index.h("tr", { key: row[this.rowKey], class: "hover:bg-Grey_Lighten-6" }, this.selectable && (index.h("td", { class: {
|
|
3083
|
-
'sd-td': true,
|
|
3084
|
-
'sd-td--selected': true,
|
|
3085
|
-
'sticky-left': Boolean(this.stickyColumn.left && this.stickyColumn.left > 0),
|
|
3086
|
-
}, style: {
|
|
3087
|
-
'--sticky-left-offset': '0px',
|
|
3088
|
-
} }, index.h("sd-checkbox", { checked: this.isRowSelected(row), disabled: !this.paginatedRows.length, onSdChange: () => this.updateRowSelect(row) }))), this.visibleColumns.map((column, colIdx) => {
|
|
3089
|
-
const rendered = this.bodyCellRenderer?.(column, row);
|
|
3090
|
-
return (index.h("td", { key: column.name, part: `td-${column.name}`, class: {
|
|
3091
|
-
'sd-td': true,
|
|
3092
|
-
[`sd-td--${column.align || 'left'}`]: true,
|
|
3093
|
-
'sticky-left': Boolean(this.stickyColumn.left && colIdx < this.stickyColumn.left),
|
|
3094
|
-
'sticky-right': Boolean(this.stickyColumn.right &&
|
|
3095
|
-
colIdx >= this.visibleColumns.length - this.stickyColumn.right),
|
|
3096
|
-
'sticky-left-edge': Boolean(this.stickyColumn.left && colIdx === this.stickyColumn.left - 1),
|
|
3097
|
-
'sticky-right-edge': Boolean(this.stickyColumn.right &&
|
|
3098
|
-
colIdx === this.visibleColumns.length - this.stickyColumn.right),
|
|
3099
|
-
[`${column.tdClass}`]: Boolean(column.tdClass),
|
|
3100
|
-
}, style: this.getStickyStyle(colIdx) }, index.h("slot", { name: `body-cell-${column.name}-${rowIdx}` }, rendered ? (typeof rendered === 'string' ? (index.h("span", { innerHTML: rendered })) : (rendered)) : (this.getCellValue(column, row)))));
|
|
3101
|
-
})))))));
|
|
3102
|
-
}
|
|
3103
3068
|
render() {
|
|
3104
|
-
return (index.h(index.Host, { key: '
|
|
3069
|
+
return (index.h(index.Host, { key: 'e11aca4536ae59eb5f93ad2854b45480d8ff181e' }, index.h("div", { key: '41e2f02cd1135b954e9c0958aeb8698e94aacd35', class: "sd-table__wrapper", style: {
|
|
3105
3070
|
'--table-width': this.width,
|
|
3106
3071
|
'--table-height': this.height,
|
|
3107
|
-
} }, index.h("div", { key: '
|
|
3072
|
+
} }, index.h("div", { key: '0dd2d7545ca47b006943bb54f1d1e3f5fdadbf0a', class: "sd-table__container" }, index.h("div", { key: 'c9e11231857c078ccfe4271b83c6eed8939a1bc6', class: "sd-table__middle", role: "table" }, index.h("div", { key: '5ca555d143a14ffcf71277c36eb86e7c036ad6c3', part: "table", class: this.sdTableClasses }, this.renderHeader(), index.h("sd-tbody", { key: 'aafdc62718caa4f6ae0e27d6897c7330ba1714bf' }, index.h("slot", { key: 'e86270cf02953779e2e77b884765011c45024d24' })))), index.h("div", { key: '5190f448fc1f21a3bbe13470e1f0a21cd637fdb7', class: "sd-table__bottom" })), this.pagination && this.innerRows.length > 0 && (index.h("div", { key: 'd00820c55aca5b06ab14db71f3ef0345ae6b155f', class: "sd-table__pagination" }, index.h("sd-pagination", { key: '5dcac1d21e32bb912a335a2d2fd06fd23eb8e525', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onPageChange: (e) => {
|
|
3108
3073
|
if (!this.useInternalPagination) {
|
|
3109
3074
|
this.sdPageChange.emit(e.detail);
|
|
3110
3075
|
}
|
|
@@ -3112,7 +3077,7 @@ const SdTable = class {
|
|
|
3112
3077
|
this.currentPage = e.detail;
|
|
3113
3078
|
this.sdPageChange.emit(this.currentPage);
|
|
3114
3079
|
}
|
|
3115
|
-
} }), this.useRowsPerPageSelect && (index.h("sd-select", { key: '
|
|
3080
|
+
} }), this.useRowsPerPageSelect && (index.h("sd-select", { key: '241f2fe9ce56448e922760568963767d49a45fef', value: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", onSdChange: (e) => {
|
|
3116
3081
|
const changedRowsPerPage = e.detail.value ? Number(e.detail.value) : 0;
|
|
3117
3082
|
if (!this.useInternalPagination) {
|
|
3118
3083
|
this.sdRowsPerPageChange.emit(changedRowsPerPage);
|
|
@@ -3143,7 +3108,31 @@ const SdTable = class {
|
|
|
3143
3108
|
};
|
|
3144
3109
|
SdTable.style = sdTableCss;
|
|
3145
3110
|
|
|
3146
|
-
const
|
|
3111
|
+
const sdTbodyCss = "sd-tbody{display:table-row-group}";
|
|
3112
|
+
|
|
3113
|
+
const SdTbody = class {
|
|
3114
|
+
constructor(hostRef) {
|
|
3115
|
+
index.registerInstance(this, hostRef);
|
|
3116
|
+
}
|
|
3117
|
+
render() {
|
|
3118
|
+
return (index.h(index.Host, { key: '2db73c5270442ed9080a645fc6ec373764475993' }, index.h("slot", { key: '23199e678de6d2df0fd476b14da9eb9340ac040d' })));
|
|
3119
|
+
}
|
|
3120
|
+
};
|
|
3121
|
+
SdTbody.style = sdTbodyCss;
|
|
3122
|
+
|
|
3123
|
+
const sdThCss = "sd-th{display:table-cell;padding:12px;font-weight:bold;text-align:left;border-bottom:2px solid #ddd;background-color:#f1f1f1}";
|
|
3124
|
+
|
|
3125
|
+
const SdTh = class {
|
|
3126
|
+
constructor(hostRef) {
|
|
3127
|
+
index.registerInstance(this, hostRef);
|
|
3128
|
+
}
|
|
3129
|
+
render() {
|
|
3130
|
+
return (index.h(index.Host, { key: '8d7263800b22a88f28e8953827aaf69307ea28ef', role: "columnheader" }, index.h("slot", { key: '57151efcfb335814fc8d59a71496ea85cdc79ae9' })));
|
|
3131
|
+
}
|
|
3132
|
+
};
|
|
3133
|
+
SdTh.style = sdThCss;
|
|
3134
|
+
|
|
3135
|
+
const sdTooltipCss = "sd-tooltip [slot=content]{display:none}sd-tooltip .sd-tooltip{position:relative;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.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}";
|
|
3147
3136
|
|
|
3148
3137
|
const SdTooltip = class {
|
|
3149
3138
|
constructor(hostRef) {
|
|
@@ -3191,20 +3180,20 @@ const SdTooltip = class {
|
|
|
3191
3180
|
: {
|
|
3192
3181
|
onClick: () => (this.showTooltip = !this.showTooltip),
|
|
3193
3182
|
};
|
|
3194
|
-
return (index.h(index.Fragment, { key: '
|
|
3183
|
+
return (index.h(index.Fragment, { key: 'add7afd546c5c7951d8e8ceaa052c53bf1db5956' }, this.label ? (index.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 })) : (index.h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-tooltip", ...handleTrigger })), this.showTooltip && (index.h("sd-tooltip-portal", { key: '766e22f333ba081920ba4dd33ff27d3a861f9ec9', parentRef: this.buttonEl, onSdClose: () => this.handleClose(), placement: this.placement }, index.h("div", { key: '5ec3181541acdfbdb535d2bc3edc0a857de4f533', class: {
|
|
3195
3184
|
'sd-tooltip-menu': true,
|
|
3196
3185
|
[`sd-tooltip-menu--${this.type}`]: true,
|
|
3197
3186
|
[`sd-tooltip-menu--${this.placement}`]: true,
|
|
3198
3187
|
'sd-tooltip-menu--with-close': this.useClose,
|
|
3199
3188
|
[`bg-${SdTooltip.COLOR_OF_TYPE[this.type].background}`]: true,
|
|
3200
3189
|
[`text-${SdTooltip.COLOR_OF_TYPE[this.type].text}`]: true,
|
|
3201
|
-
} }, index.h("i", { key: '
|
|
3190
|
+
} }, index.h("i", { key: '5a82c1af8b3ec6dc8ae2667d26fba58914a21f14', class: `sd-tooltip-menu__arrow sd-tooltip-menu__arrow--${this.placement}` }, index.h(tooltipArrow.TooltipArrow, { key: '34821d5f0ff61f95fdc603bfc8680566943b4a60', class: {
|
|
3202
3191
|
[`text-${SdTooltip.COLOR_OF_TYPE[this.type].background}`]: true,
|
|
3203
|
-
} })), index.h("div", { key: '
|
|
3192
|
+
} })), index.h("div", { key: '578c29f6258007f35c23f263823c450840ae187a', class: "sd-tooltip-menu__content", ref: el => {
|
|
3204
3193
|
if (el && this.slotContent && !el.hasChildNodes()) {
|
|
3205
3194
|
el.appendChild(this.slotContent.cloneNode(true));
|
|
3206
3195
|
}
|
|
3207
|
-
} }, !this.slotContent && index.h("span", { key: '
|
|
3196
|
+
} }, !this.slotContent && index.h("span", { key: '9d7ad665d467d859b9b049ee2a1190865213b1a7' }, this.el.textContent)), this.useClose && (index.h("div", { key: 'ee5494463906a043c19b8e8cff8ec012ab5cbd27', class: "sd-tooltip-menu__close-button" }, index.h("button", { key: 'ba7f1aab87247004d6ffd11a3f1b0918db98e21d', type: "button", "aria-label": "Close tooltip", title: "Close tooltip", onClick: () => this.handleClose() }, index.h("sd-icon", { key: '74bf57c8c0d48d15eb5879c898d6a1e5aae0df5f', name: "close", size: "12", color: "#AAAAAA" })))))))));
|
|
3208
3197
|
}
|
|
3209
3198
|
};
|
|
3210
3199
|
SdTooltip.style = sdTooltipCss;
|
|
@@ -3357,21 +3346,35 @@ const SdTooltipPortal = class {
|
|
|
3357
3346
|
this.sdClose.emit();
|
|
3358
3347
|
}
|
|
3359
3348
|
render() {
|
|
3360
|
-
return index.h("slot", { key: '
|
|
3349
|
+
return index.h("slot", { key: 'ac0fb594aae6f39ac0dc118865beec1e6259ceeb' });
|
|
3350
|
+
}
|
|
3351
|
+
};
|
|
3352
|
+
|
|
3353
|
+
const sdTrCss = "sd-tr{display:table-row}";
|
|
3354
|
+
|
|
3355
|
+
const SdTr = class {
|
|
3356
|
+
constructor(hostRef) {
|
|
3357
|
+
index.registerInstance(this, hostRef);
|
|
3358
|
+
}
|
|
3359
|
+
render() {
|
|
3360
|
+
return (index.h(index.Host, { key: 'a3a60dc016314ae086ccba52c4f1967db982553e', role: "row" }, index.h("slot", { key: 'ced44913de272afa61850e35b2a0d070d32b41ab' })));
|
|
3361
3361
|
}
|
|
3362
3362
|
};
|
|
3363
|
+
SdTr.style = sdTrCss;
|
|
3363
3364
|
|
|
3364
3365
|
exports.sd_button = SdButton;
|
|
3365
3366
|
exports.sd_checkbox = SdCheckbox;
|
|
3366
3367
|
exports.sd_guide = SdGuide;
|
|
3367
3368
|
exports.sd_icon = SdIcon;
|
|
3368
3369
|
exports.sd_input = SdInput;
|
|
3369
|
-
exports.sd_loading_spinner = SdLoadingSpinner;
|
|
3370
3370
|
exports.sd_pagination = SdPagination;
|
|
3371
3371
|
exports.sd_portal = SdPortal;
|
|
3372
3372
|
exports.sd_select = SdSelect;
|
|
3373
3373
|
exports.sd_select_option = SdSelectOption;
|
|
3374
3374
|
exports.sd_table = SdTable;
|
|
3375
|
+
exports.sd_tbody = SdTbody;
|
|
3376
|
+
exports.sd_th = SdTh;
|
|
3375
3377
|
exports.sd_tooltip = SdTooltip;
|
|
3376
3378
|
exports.sd_tooltip_portal = SdTooltipPortal;
|
|
3377
|
-
|
|
3379
|
+
exports.sd_tr = SdTr;
|
|
3380
|
+
//# sourceMappingURL=sd-button.sd-checkbox.sd-guide.sd-icon.sd-input.sd-pagination.sd-portal.sd-select.sd-select-option.sd-table.sd-tbody.sd-th.sd-tooltip.sd-tooltip-portal.sd-tr.entry.cjs.js.map
|
|
@@ -11,7 +11,7 @@ const SdCard = class {
|
|
|
11
11
|
bordered = true;
|
|
12
12
|
class = '';
|
|
13
13
|
render() {
|
|
14
|
-
return (index.h(index.Host, { key: '
|
|
14
|
+
return (index.h(index.Host, { key: '42ba538ab9341ea02415932b7d9332571bbb13e7' }, index.h("div", { key: 'b1f7b23f18b070adb2f42eea1ccdf4bc2a5ab092', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.class}` }, index.h("slot", { key: 'bcb88ca0c2916e6dce00f7b503e32f522245dc4c' }))));
|
|
15
15
|
}
|
|
16
16
|
};
|
|
17
17
|
SdCard.style = sdCardCss;
|
|
@@ -82,9 +82,9 @@ const SdDatePicker = class {
|
|
|
82
82
|
this.isOpen = false;
|
|
83
83
|
};
|
|
84
84
|
render() {
|
|
85
|
-
return (index.h(index.Host, { key: '
|
|
85
|
+
return (index.h(index.Host, { key: '9f910fccd26ab417911edb655d63608045d5c41e', class: "sd-date-picker" }, index.h("sd-input", { key: '45a1a6ad305af7d47fe599baa4d037776db96150', ref: el => (this.inputEl = el), value: this.date, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, inputClass: "text-center", inputStyle: {
|
|
86
86
|
margin: '0 0 0 8px',
|
|
87
|
-
}, onClick: () => this.openMenu() }, index.h("sd-icon", { key: '
|
|
87
|
+
}, onClick: () => this.openMenu() }, index.h("sd-icon", { key: '16e1f67a61cd25816347f0bb8d89f402dbc1a203', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (index.h("sd-portal", { key: 'f5fa53258f895e9c5052e9812e08a1175caddf4d', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, index.h("div", { key: '072a2ae86e666678581d35f3e357fe5b756646ff', class: "sd-date-picker__menu" }, index.h("div", { key: 'c81834631a65d4f3b91939748051b3687addaeed', class: "sd-date-picker__header" }, index.h("div", { key: '817d4e0279ac94ab83f0ca654f0cc57670457f2e', class: "year-nav" }, index.h("button", { key: '50c420fa3bc7f2959f66ca0f85aefaa404b19a9e', type: "button", name: "prev-year", title: "Previous Year", onClick: () => this.setCurrentYear(this.currentYear - 1) }, index.h("sd-icon", { key: '33079e3ffd9d5d4152c88b57ce0ba37e6ab8ab41', name: "arrowLeft", size: "12", color: "#CCCCCC" })), index.h("span", { key: '93a7065db1490dc60585c94ab0bac376bce0180e', class: "year-nav__current" }, this.currentYear), index.h("button", { key: 'c16a36aa9a036789efb45dd957eec6e96b82d04c', type: "button", name: "next-year", title: "Next Year", onClick: () => this.setCurrentYear(this.currentYear + 1) }, index.h("sd-icon", { key: '421b6366168d75c9e02eba4f3c7f207bbb42cb4d', name: "arrowRight", size: "12", color: "#CCCCCC" }))), index.h("div", { key: '3c9cebfb11efcf592f02ff007462ff13d332f7d3', class: "month-nav" }, index.h("button", { key: 'aa0ec3de458a3f0b0ac5f16c8a74a0caa8c9fb12', type: "button", name: "prev-month", title: "Previous ", onClick: () => this.handleUpdateMonth('prev') }, index.h("sd-icon", { key: '7c5b1ddb7c3c0d77c6cc1037429ee1f9f3750854', name: "arrowLeft", size: "12", color: "#CCCCCC" })), index.h("span", { key: '2560f52cdc0d9200dfca89fac02e8ca8be0c57d5', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), index.h("button", { key: 'f4245f1dbf538225f30221d2a51cf44bca9457bf', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, index.h("sd-icon", { key: 'b2f721184bc7f863bd372e3fe2bdf57903324f8f', name: "arrowRight", size: "12", color: "#CCCCCC" })))), index.h("div", { key: '0e9b74e1ef69dd639a883b762fa974659f9c544e', class: "sd-date-picker__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (index.h("div", { key: day, class: "day" }, day)))), index.h("div", { key: 'dcef9e0f8ee2a31c52c6807882c85a14aa03d1c3', class: "sd-date-picker__body" }, [
|
|
88
88
|
...this.calendar.prevMonthDays,
|
|
89
89
|
...this.calendar.days,
|
|
90
90
|
...this.calendar.afterMonthDays,
|
|
@@ -157,9 +157,9 @@ const SdDateRangePicker = class {
|
|
|
157
157
|
this.isOpen = false;
|
|
158
158
|
};
|
|
159
159
|
render() {
|
|
160
|
-
return (index.h(index.Host, { key: '
|
|
160
|
+
return (index.h(index.Host, { key: '32819a4bb1098493ff7eeeb5c01f3d76e5b1bcbc', class: "sd-date-range-picker" }, index.h("sd-input", { key: '3ce75d2544e24fb09b6ed853f35295834ad48c0d', ref: el => (this.inputEl = el), value: `${this.dateRange[0]} ~ ${this.dateRange[1]}`, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, inputClass: "text-center", inputStyle: {
|
|
161
161
|
margin: '0 0 0 8px',
|
|
162
|
-
}, onClick: () => this.openMenu() }, index.h("sd-icon", { key: '
|
|
162
|
+
}, onClick: () => this.openMenu() }, index.h("sd-icon", { key: 'a38e381819ac1c469cfab99e8da3eca641d9dff5', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (index.h("sd-portal", { key: '05ea74ce59f9bfbe14404eea31a877fc007ab105', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, index.h("div", { key: 'ec87b0e8dc56d880ad21f8bd233ba04b150bb6f0', class: "sd-date-range-picker__menu" }, index.h("div", { key: 'e6115593eef709220a1d0cf100b8896741b16553', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, index.h("button", { key: 'a823d93eaf49bd691bf6e851056b5e2a95be3af9', type: "button", name: "prev", title: "Previous", onClick: () => this.setPrevYear(this.prevYear - 1) }, index.h("sd-icon", { key: 'ebfad0c30a3a6847eb7fc3420a41c421560a83b1', name: "arrowLeft", size: "12", color: "#CCCCCC" })), index.h("div", { key: '4f65c1f3b510d7c527fcd61369046944186a101b', class: "header-label" }, this.prevYear), index.h("button", { key: '61d7903a7ee28d864f8d92dc6e79642ea5100660', type: "button", name: "next", title: "Next", onClick: () => this.setPrevYear(this.prevYear + 1) }, index.h("sd-icon", { key: '3a18bb2fc66635ac7313a533b484a339be121e41', name: "arrowRight", size: "12", color: "#CCCCCC" }))), index.h("div", { key: '579d6c2ec0866798b19f0bc2f5a3d23d1beea64a', class: "sd-date-range-picker__body" }, [this.prevCalendar, this.nextCalendar].map((calendar, index$1) => (index.h(index.Fragment, null, index$1 === 1 && index.h("div", { class: "separator" }), index.h("div", { key: index$1, class: "calendar-container" }, index.h("div", { class: "calendar-header" }, index.h("button", { type: "button", name: "month", title: "Month", class: index$1 === 0 ? 'header-button-prev' : 'header-button-next', onClick: () => this.updateYearMonth(index$1 === 0 ? 'prev' : 'next') }, index.h("sd-icon", { name: index$1 === 0 ? 'arrowLeft' : 'arrowRight', size: "12", color: "#CCCCCC" })), index$1 === 0
|
|
163
163
|
? `${this.prevYear}.${String(this.prevMonth).padStart(2, '0')}`
|
|
164
164
|
: `${this.nextYear}.${String(this.nextMonth).padStart(2, '0')}`), index.h("div", { class: "calendar-days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (index.h("sd-date-box", { key: day, date: day, disabled: true, class: "day" })))), index.h("div", { class: "calendar-body mt-12pxr grid grid-cols-7 gap-y-8pxr" }, [...calendar.prevMonthDays, ...calendar.days, ...calendar.afterMonthDays].map((day, idx) => (index.h("sd-date-box", { key: `prev${day}_${idx}`, date: !day ? '' : Number(day), selected: this.dateRange.some(date => date ===
|
|
165
165
|
this.dateUtil.formatDate(index$1 === 0 ? this.prevYear : this.nextYear, index$1 === 0 ? this.prevMonth : this.nextMonth, Number(day))), type: this.getDateBoxType(this.dateUtil.formatDate(index$1 === 0 ? this.prevYear : this.nextYear, index$1 === 0 ? this.prevMonth : this.nextMonth, Number(day))), isToday: useDatePicker.today ===
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var index = require('./index-DXo1Fhkn.js');
|
|
4
|
+
|
|
5
|
+
const sdLoadingSpinnerCss = "sd-loading-spinner{display:block}sd-loading-spinner .sd-loading-spinner{animation:sd-loading-spin 2s linear infinite;transform-origin:center center}sd-loading-spinner .sd-loading-spinner .path{animation:sd-loading-spin-path 1.5s ease-in-out infinite}@keyframes sd-loading-spin{0%{transform:rotate3d(0, 0, 1, 0deg)}25%{transform:rotate3d(0, 0, 1, 90deg)}50%{transform:rotate3d(0, 0, 1, 180deg)}75%{transform:rotate3d(0, 0, 1, 270deg)}100%{transform:rotate3d(0, 0, 1, 359deg)}}@keyframes sd-loading-spin-path{0%{stroke-dasharray:1, 200;stroke-dashoffset:0}50%{stroke-dasharray:89, 200;stroke-dashoffset:-35px}100%{stroke-dasharray:89, 200;stroke-dashoffset:-124px}}";
|
|
6
|
+
|
|
7
|
+
const SdLoadingSpinner = class {
|
|
8
|
+
constructor(hostRef) {
|
|
9
|
+
index.registerInstance(this, hostRef);
|
|
10
|
+
}
|
|
11
|
+
render() {
|
|
12
|
+
return (index.h(index.Host, { key: 'ba76870b7aa2e0f15d17e58bcd61a3650a38065b' }, index.h("svg", { key: '0e36eec7e7c7a0de28c734502da028f08ab2cdb8', class: "sd-loading-spinner text-positive", width: "72px", height: "72px", viewBox: "25 25 50 50" }, index.h("circle", { key: 'c74a1e3e6aa6a00bc0cfde588d07fc13e47c1ba3', class: "path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "5", "stroke-miterlimit": "10" }))));
|
|
13
|
+
}
|
|
14
|
+
};
|
|
15
|
+
SdLoadingSpinner.style = sdLoadingSpinnerCss;
|
|
16
|
+
|
|
17
|
+
exports.sd_loading_spinner = SdLoadingSpinner;
|
|
18
|
+
//# sourceMappingURL=sd-loading-spinner.entry.cjs.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"sd-loading-spinner.entry.cjs.js","sources":["src/components/sd-loading-spinner/sd-loading-spinner.scss?tag=sd-loading-spinner","src/components/sd-loading-spinner/sd-loading-spinner.tsx"],"sourcesContent":["sd-loading-spinner {\n display: block;\n\n .sd-loading-spinner {\n animation: sd-loading-spin 2s linear infinite;\n transform-origin: center center;\n .path {\n animation: sd-loading-spin-path 1.5s ease-in-out infinite;\n }\n\n @keyframes sd-loading-spin {\n 0% {\n transform: rotate3d(0, 0, 1, 0deg);\n }\n 25% {\n transform: rotate3d(0, 0, 1, 90deg);\n }\n 50% {\n transform: rotate3d(0, 0, 1, 180deg);\n }\n 75% {\n transform: rotate3d(0, 0, 1, 270deg);\n }\n 100% {\n transform: rotate3d(0, 0, 1, 359deg);\n }\n }\n\n @keyframes sd-loading-spin-path {\n 0% {\n stroke-dasharray: 1, 200;\n stroke-dashoffset: 0;\n }\n 50% {\n stroke-dasharray: 89, 200;\n stroke-dashoffset: -35px;\n }\n\n 100% {\n stroke-dasharray: 89, 200;\n stroke-dashoffset: -124px;\n }\n }\n }\n}\n","import { Component, Host, h } from '@stencil/core';\n\n@Component({\n tag: 'sd-loading-spinner',\n styleUrl: 'sd-loading-spinner.scss',\n})\nexport class SdLoadingSpinner {\n render() {\n return (\n <Host>\n <svg class=\"sd-loading-spinner text-positive\" width=\"72px\" height=\"72px\" viewBox=\"25 25 50 50\">\n <circle\n class=\"path\"\n cx=\"50\"\n cy=\"50\"\n r=\"20\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"5\"\n stroke-miterlimit=\"10\"\n ></circle>\n </svg>\n </Host>\n );\n }\n}\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,mBAAmB,GAAG,ypBAAypB;;MCMxqB,gBAAgB,GAAA,MAAA;;;;IAC5B,MAAM,GAAA;AACL,QAAA,QACCA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACJD,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,kCAAkC,EAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,aAAa,EAAA,EAC7FA,OAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACC,KAAK,EAAC,MAAM,EACZ,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,CAAC,EAAC,IAAI,EACN,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EAAA,cAAA,EACR,GAAG,EAAA,mBAAA,EACE,IAAI,EAAA,CACb,CACL,CACA;;;;;;;"}
|
|
@@ -39,11 +39,11 @@ const SdPopover = class {
|
|
|
39
39
|
this.showPopover = false;
|
|
40
40
|
};
|
|
41
41
|
render() {
|
|
42
|
-
return (index.h(index.Fragment, { key: '
|
|
42
|
+
return (index.h(index.Fragment, { key: 'c589194a99064c6d4dcba4a3041fabc86e629190' }, this.label ? (index.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: () => (console.log('click popover'), (this.showPopover = !this.showPopover)) })) : (index.h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (console.log('click popover'), (this.showPopover = !this.showPopover)) })), this.showPopover && (index.h("sd-tooltip-portal", { key: '8ad8df3d02c2889a404366a7a1486ee001415423', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, index.h("div", { key: 'a45f59c40dfbdbe3ad70ea4733459841ddbd6ca2', class: {
|
|
43
43
|
'sd-popover-menu': true,
|
|
44
44
|
[`sd-popover-menu--${this.placement}`]: true,
|
|
45
45
|
[this.menuClass]: !!this.menuClass,
|
|
46
|
-
} }, index.h("i", { key: '
|
|
46
|
+
} }, index.h("i", { key: '37666b148d9638512cdcf9880b4d4f928c617398', class: `sd-popover-menu__arrow sd-popover-menu__arrow--${this.placement}` }, index.h(tooltipArrow.TooltipArrow, { key: '34801580a143b2a9a0e4fd2a754e3b7df84715bb' })), index.h("div", { key: 'f6ed764d4c50b2573188164f387df4ec4df04430', class: "sd-popover-menu__content" }, this.menuTitle && index.h("div", { key: 'd038bbede4912070b58772daac3f264908c7b0ef', class: "sd-popover-menu__title" }, this.menuTitle), this.messages.length > 0 && (index.h("div", { key: '0bc6407b1deb2fdc2194fe8b45af199c797ad9de', class: "sd-popover-menu__messages" }, this.messages.map(message => (index.h("div", null, message))))), this.buttons.length > 0 && (index.h("div", { key: '77f310b36aabbd66ed92cbf3caa9edf619875f0e', class: `sd-popover-menu__buttons sd-popover-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (index.h("sd-button", { ...button })))))), this.useClose && (index.h("button", { key: 'd48a8945ff2419ff4f45f62bddc4b56cccf608e2', class: "sd-popover-menu__close-button", onClick: () => this.handleClose() }, index.h("sd-icon", { key: '821ce775843d2958b2288f7deba565b1b5aa4cda', name: "close", size: "12", color: "#AAAAAA" }))))))));
|
|
47
47
|
}
|
|
48
48
|
static get watchers() { return {
|
|
49
49
|
"show": ["watchShowHandler"]
|
|
@@ -21,10 +21,10 @@ const SdProgress = class {
|
|
|
21
21
|
error: '#FB4444',
|
|
22
22
|
};
|
|
23
23
|
render() {
|
|
24
|
-
return (index.h(index.Host, { key: '
|
|
24
|
+
return (index.h(index.Host, { key: 'f086ff0b5357c038b83f8b8b457cd7aa3c99ba03', style: {
|
|
25
25
|
'--progress-color': this.statusColor[this.status],
|
|
26
26
|
'--progress-percentage': `${this.percentage}%`,
|
|
27
|
-
} }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && index.h("div", { key: '
|
|
27
|
+
} }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && index.h("div", { key: '2e8ce5a1fe1206f95f4268eaa571264f7daa7b8f', class: "sd-progress__label" }, this.label)));
|
|
28
28
|
}
|
|
29
29
|
renderBarProgress() {
|
|
30
30
|
return (index.h("div", { class: `sd-progress__bar sd-progress__bar--${this.status}` }, index.h("div", { class: ['sd-progress__bar__percent', this.percentage < 100 ? 'proceed' : ''].join(' ') }), index.h("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--left" }, this.percentage, "%"), index.h("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--right" }, this.percentage, "%")));
|
|
@@ -215,11 +215,11 @@ const SdSelectMultiple = class extends selectKeyboardNavigation.BaseDropdownEven
|
|
|
215
215
|
'--select-width': this.width || '200px',
|
|
216
216
|
'--select-dropdown-height': this.dropdownHeight || '260px',
|
|
217
217
|
};
|
|
218
|
-
return (index.h(index.Host, { key: '
|
|
218
|
+
return (index.h(index.Host, { key: '3c3cd8714a8d2a7e3f7ca5057c19b281488aa159', style: style }, index.h("div", { key: '877950e58b715002bb1976b11ead8abd41984534', class: {
|
|
219
219
|
'sd-select-multiple': true,
|
|
220
220
|
'sd-select-multiple--open': this.isOpen,
|
|
221
221
|
'sd-select-multiple--disabled': this.disabled,
|
|
222
|
-
}, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), index.h("div", { key: '
|
|
222
|
+
}, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), index.h("div", { key: '2839ca7bfa830226ace0a32e8deb62c03f1feb62', class: "sd-select-multiple__container" }, this.renderTrigger(), this.renderDropdown()))));
|
|
223
223
|
}
|
|
224
224
|
renderLabel(label) {
|
|
225
225
|
if (!label)
|
|
@@ -48,7 +48,7 @@ const SdSelectOptionGroup = class {
|
|
|
48
48
|
}
|
|
49
49
|
};
|
|
50
50
|
render() {
|
|
51
|
-
return (index.h("div", { key: '
|
|
51
|
+
return (index.h("div", { key: '4ce025571bbc415a03d2ec9a2c27d6867571bbe1', class: {
|
|
52
52
|
'sd-select__option-group': true,
|
|
53
53
|
'sd-select__option-group--selected': !!this.isSelected,
|
|
54
54
|
'sd-select__option-group--disabled': !!this.option.disabled,
|
|
@@ -57,10 +57,10 @@ const SdSelectOptionGroup = class {
|
|
|
57
57
|
'sd-select__option-group--group': this.option.type === 'group',
|
|
58
58
|
'sd-select__option-group--subgroup': this.option.type === 'subgroup',
|
|
59
59
|
'sd-select__option-group--item': this.option.type === 'item',
|
|
60
|
-
}, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, index.h("div", { key: '
|
|
60
|
+
}, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, index.h("div", { key: 'ea7682119a423a0a49fb69ef4ae775330552ffc5', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (index.h("sd-checkbox", { key: 'd8ba6537c8ebdbc3b3a1a132b1c0d2e53a23aac1', checked: this.isSelected, disabled: this.option.disabled, onClick: e => {
|
|
61
61
|
e.preventDefault();
|
|
62
62
|
this.handleClick(this.option, this.isSelected, e);
|
|
63
|
-
} })), index.h("span", { key: '
|
|
63
|
+
} })), index.h("span", { key: 'd15d031152d6e10f47068567ab3fc954766a7557', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (index.h("span", { key: '82c8efa653a4b32a2991b2416996f67ea9b33bae', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
|
|
64
64
|
}
|
|
65
65
|
};
|
|
66
66
|
SdSelectOptionGroup.style = sdSelectOptionGroupCss;
|