@sellmate/design-system 1.6.0 → 1.7.0
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-chip.cjs.entry.js +3 -3
- package/dist/cjs/sd-confirm-modal_2.cjs.entry.js +2 -1
- package/dist/cjs/sd-date-picker_7.cjs.entry.js +52 -24
- package/dist/cjs/sd-divider.cjs.entry.js +1 -1
- package/dist/cjs/sd-field_3.cjs.entry.js +5 -4
- package/dist/cjs/sd-linear-progress.cjs.entry.js +1 -1
- package/dist/cjs/sd-loading-container.cjs.entry.js +2 -2
- package/dist/cjs/sd-modal-container.cjs.entry.js +3 -0
- package/dist/cjs/sd-pagination_4.cjs.entry.js +8 -8
- package/dist/cjs/sd-popover.cjs.entry.js +8 -5
- package/dist/cjs/sd-popup.cjs.entry.js +1 -1
- package/dist/cjs/sd-select-list-item_2.cjs.entry.js +6 -6
- package/dist/cjs/sd-select_3.cjs.entry.js +8 -8
- package/dist/cjs/sd-switch.cjs.entry.js +1 -1
- package/dist/cjs/sd-table.cjs.entry.js +6 -6
- package/dist/cjs/sd-tabs.cjs.entry.js +1 -1
- package/dist/cjs/sd-td.cjs.entry.js +1 -1
- package/dist/cjs/sd-toast-container.cjs.entry.js +1 -1
- package/dist/cjs/sd-toast.cjs.entry.js +2 -2
- package/dist/cjs/sd-toggle.cjs.entry.js +1 -1
- package/dist/collection/components/sd-chip/sd-chip.js +3 -3
- package/dist/collection/components/sd-divider/sd-divider.js +1 -1
- package/dist/collection/components/sd-field/sd-field.js +2 -1
- package/dist/collection/components/sd-file-picker/sd-file-picker.css +15 -1
- package/dist/collection/components/sd-file-picker/sd-file-picker.js +44 -16
- package/dist/collection/components/sd-floating-portal/sd-floating-portal.js +1 -1
- package/dist/collection/components/sd-input/sd-input.js +2 -2
- package/dist/collection/components/sd-linear-progress/sd-linear-progress.js +1 -1
- package/dist/collection/components/sd-loading-container/sd-loading-container.js +2 -2
- package/dist/collection/components/sd-loading-modal/sd-loading-modal.js +21 -1
- package/dist/collection/components/sd-modal-container/sd-modal-container.js +3 -0
- package/dist/collection/components/sd-number-input/sd-number-input.js +4 -4
- package/dist/collection/components/sd-pagination/sd-pagination.js +3 -3
- package/dist/collection/components/sd-popover/sd-popover.js +13 -23
- package/dist/collection/components/sd-popup/sd-popup.js +1 -1
- package/dist/collection/components/sd-select/sd-select-list-item/sd-select-list-item.js +2 -2
- package/dist/collection/components/sd-select/sd-select-list-item-search/sd-select-list-item-search.js +4 -4
- package/dist/collection/components/sd-select/sd-select-listbox/sd-select-listbox.js +2 -2
- package/dist/collection/components/sd-select/sd-select-trigger/sd-select-trigger.js +2 -2
- package/dist/collection/components/sd-select/sd-select.js +4 -4
- package/dist/collection/components/sd-switch/sd-switch.js +1 -1
- package/dist/collection/components/sd-table/sd-table.js +6 -6
- package/dist/collection/components/sd-table/sd-tbody/sd-tbody.js +2 -2
- package/dist/collection/components/sd-table/sd-td/sd-td.js +1 -1
- package/dist/collection/components/sd-table/sd-thead/sd-thead.js +3 -3
- package/dist/collection/components/sd-tabs/sd-tabs.js +1 -1
- package/dist/collection/components/sd-textarea/sd-textarea.js +1 -1
- package/dist/collection/components/sd-toast/sd-toast.js +2 -2
- package/dist/collection/components/sd-toast-container/sd-toast-container.js +1 -1
- package/dist/collection/components/sd-toggle/sd-toggle.js +1 -1
- package/dist/collection/components/sd-tooltip/sd-tooltip.js +2 -2
- package/dist/components/{p-CwQTEZWO.js → p-5_BC8C6x.js} +1 -1
- package/dist/components/p-BFAQ4nY2.js +1 -0
- package/dist/components/{p-EcuI_UmK.js → p-BNXKU1BW.js} +1 -1
- package/dist/components/{p-DZ_3ZYMC.js → p-BVvVDIo0.js} +1 -1
- package/dist/components/{p-z564gmGG.js → p-C1Fk1556.js} +1 -1
- package/dist/components/{p-BCeq6-MU.js → p-CWGbMz0J.js} +1 -1
- package/dist/components/{p-BZRMoE3E.js → p-CnbeQ2DI.js} +1 -1
- package/dist/components/{p-BYU3wOaN.js → p-CtXad9by.js} +1 -1
- package/dist/components/{p-lOVBaLB7.js → p-D155awu4.js} +1 -1
- package/dist/components/{p-BqYASycS.js → p-DAAHX92J.js} +1 -1
- package/dist/components/p-DK4Jvax0.js +1 -0
- package/dist/components/p-DR1f1cS9.js +1 -0
- package/dist/components/p-DY1iQfib.js +1 -0
- package/dist/components/{p-BNUsawW7.js → p-DeHt0RYQ.js} +1 -1
- package/dist/components/{p-CARYLqH9.js → p-Dq38kgOY.js} +1 -1
- package/dist/components/{p-DP0Dp12H.js → p-DwKYjjIC.js} +1 -1
- package/dist/components/{p-uVZjhyvS.js → p-EbF6qsnG.js} +1 -1
- package/dist/components/{p-sRzhIrJR.js → p-F7yyGdIc.js} +1 -1
- package/dist/components/p-LZKaKr8O.js +1 -0
- package/dist/components/p-vZLoby4N.js +1 -0
- package/dist/components/sd-barcode-input.js +1 -1
- package/dist/components/sd-chip.js +1 -1
- package/dist/components/sd-date-picker.js +1 -1
- package/dist/components/sd-date-range-picker.js +1 -1
- package/dist/components/sd-divider.js +1 -1
- package/dist/components/sd-field.js +1 -1
- package/dist/components/sd-file-picker.js +1 -1
- package/dist/components/sd-floating-portal.js +1 -1
- package/dist/components/sd-input.js +1 -1
- package/dist/components/sd-key-value-table.js +1 -1
- package/dist/components/sd-linear-progress.js +1 -1
- package/dist/components/sd-loading-container.js +1 -1
- package/dist/components/sd-loading-modal.js +1 -1
- package/dist/components/sd-modal-container.js +1 -1
- package/dist/components/sd-number-input.js +1 -1
- package/dist/components/sd-pagination.js +1 -1
- package/dist/components/sd-popover.js +1 -1
- package/dist/components/sd-popup.js +1 -1
- package/dist/components/sd-select-list-item-search.js +1 -1
- package/dist/components/sd-select-list-item.js +1 -1
- package/dist/components/sd-select-listbox.js +1 -1
- package/dist/components/sd-select-trigger.js +1 -1
- package/dist/components/sd-select.js +1 -1
- package/dist/components/sd-switch.js +1 -1
- package/dist/components/sd-table.js +1 -1
- package/dist/components/sd-tabs.js +1 -1
- package/dist/components/sd-tbody.js +1 -1
- package/dist/components/sd-td.js +1 -1
- package/dist/components/sd-textarea.js +1 -1
- package/dist/components/sd-thead.js +1 -1
- package/dist/components/sd-toast-container.js +1 -1
- package/dist/components/sd-toast.js +1 -1
- package/dist/components/sd-toggle.js +1 -1
- package/dist/components/sd-tooltip.js +1 -1
- package/dist/design-system/design-system.esm.js +1 -1
- package/dist/design-system/{p-2c0a8333.entry.js → p-0060136e.entry.js} +1 -1
- package/dist/design-system/{p-18d3ae55.entry.js → p-08798232.entry.js} +1 -1
- package/dist/design-system/{p-20a2e0d2.entry.js → p-102c2153.entry.js} +1 -1
- package/dist/design-system/{p-95bbba4f.entry.js → p-10f579ba.entry.js} +1 -1
- package/dist/design-system/p-17ec576c.entry.js +1 -0
- package/dist/design-system/{p-ff33d019.entry.js → p-282b1260.entry.js} +1 -1
- package/dist/design-system/{p-e6bd8ab1.entry.js → p-2e4d1fe1.entry.js} +1 -1
- package/dist/design-system/{p-07b0d118.entry.js → p-32d96a70.entry.js} +1 -1
- package/dist/design-system/{p-17883b40.entry.js → p-4ef942a8.entry.js} +1 -1
- package/dist/design-system/{p-1aafbc7b.entry.js → p-643c004a.entry.js} +1 -1
- package/dist/design-system/p-69a208c0.entry.js +1 -0
- package/dist/design-system/{p-deec1ef0.entry.js → p-914d74c4.entry.js} +1 -1
- package/dist/design-system/p-9c74571a.entry.js +1 -0
- package/dist/design-system/{p-696764b0.entry.js → p-9e75a5dc.entry.js} +1 -1
- package/dist/design-system/{p-97b405aa.entry.js → p-adce8704.entry.js} +1 -1
- package/dist/design-system/{p-969665c0.entry.js → p-b5e9320f.entry.js} +1 -1
- package/dist/design-system/{p-a5930cbd.entry.js → p-d1da969d.entry.js} +1 -1
- package/dist/design-system/{p-1219699a.entry.js → p-e1350f4d.entry.js} +1 -1
- package/dist/design-system/p-e159f70d.entry.js +1 -0
- package/dist/design-system/{p-c73cadc7.entry.js → p-f172920e.entry.js} +1 -1
- package/dist/esm/design-system.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/sd-chip.entry.js +3 -3
- package/dist/esm/sd-confirm-modal_2.entry.js +2 -1
- package/dist/esm/sd-date-picker_7.entry.js +52 -24
- package/dist/esm/sd-divider.entry.js +1 -1
- package/dist/esm/sd-field_3.entry.js +5 -4
- package/dist/esm/sd-linear-progress.entry.js +1 -1
- package/dist/esm/sd-loading-container.entry.js +2 -2
- package/dist/esm/sd-modal-container.entry.js +3 -0
- package/dist/esm/sd-pagination_4.entry.js +8 -8
- package/dist/esm/sd-popover.entry.js +8 -5
- package/dist/esm/sd-popup.entry.js +1 -1
- package/dist/esm/sd-select-list-item_2.entry.js +6 -6
- package/dist/esm/sd-select_3.entry.js +8 -8
- package/dist/esm/sd-switch.entry.js +1 -1
- package/dist/esm/sd-table.entry.js +6 -6
- package/dist/esm/sd-tabs.entry.js +1 -1
- package/dist/esm/sd-td.entry.js +1 -1
- package/dist/esm/sd-toast-container.entry.js +1 -1
- package/dist/esm/sd-toast.entry.js +2 -2
- package/dist/esm/sd-toggle.entry.js +1 -1
- package/dist/types/components/sd-chip/sd-chip.d.ts +1 -1
- package/dist/types/components/sd-file-picker/sd-file-picker.d.ts +3 -0
- package/dist/types/components/sd-loading-modal/sd-loading-modal.d.ts +1 -0
- package/dist/types/components/sd-modal-container/sd-modal-container.config.d.ts +1 -0
- package/dist/types/components/sd-popover/sd-popover.d.ts +2 -1
- package/dist/types/components.d.ts +3 -8
- package/hydrate/index.js +117 -80
- package/hydrate/index.mjs +117 -80
- package/package.json +1 -1
- package/dist/components/p-BE-21GLH.js +0 -1
- package/dist/components/p-BUW6I_d5.js +0 -1
- package/dist/components/p-DSIM5Mkt.js +0 -1
- package/dist/components/p-DoREs-rv.js +0 -1
- package/dist/components/p-Dwko_Bx3.js +0 -1
- package/dist/design-system/p-18057222.entry.js +0 -1
- package/dist/design-system/p-3a848c36.entry.js +0 -1
- package/dist/design-system/p-4bd9f005.entry.js +0 -1
- package/dist/design-system/p-c5c4a66b.entry.js +0 -1
|
@@ -274,7 +274,7 @@ const FILE_PICKER_COLORS = {
|
|
|
274
274
|
},
|
|
275
275
|
};
|
|
276
276
|
|
|
277
|
-
const sdFilePickerCss = () => `sd-file-picker{display:
|
|
277
|
+
const sdFilePickerCss = () => `sd-file-picker{display:flex;flex-direction:column;width:100%}.sd-file-picker__wrapper{display:flex;flex-direction:column;width:100%}.sd-file-picker__chip-list{display:flex;flex-direction:column;gap:8px;margin-top:8px}.sd-file-picker__content{width:100%;height:100%;display:flex;align-items:center;padding:0 var(--sd-file-picker-padding-x);gap:var(--sd-file-picker-gap);cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;vertical-align:middle}.sd-file-picker__text{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:var(--sd-file-picker-font-weight);font-size:var(--sd-file-picker-font-size);line-height:var(--sd-file-picker-line-height);color:var(--sd-file-picker-placeholder-color)}.sd-file-picker__text--active{color:var(--sd-file-picker-text-color)}.sd-file-picker__text--placeholder{color:var(--sd-file-picker-placeholder-color)}.sd-file-picker__icon{flex-shrink:0}.sd-file-picker__clear-icon{flex-shrink:0;cursor:pointer;transition:opacity 0.2s ease}.sd-file-picker__clear-icon:hover{opacity:0.7}.sd-file-picker__input{display:none}.sd-file-picker__tooltip{position:absolute;top:calc(100% - 4px);left:50%;transform:translate(-50%);z-index:998;white-space:nowrap;padding:8px 12px;background:rgba(0, 0, 0, 0.8);color:white;font-size:12px;line-height:18px;border-radius:4px;pointer-events:none}.sd-field--disabled .sd-file-picker__content{cursor:not-allowed}.sd-field--disabled .sd-file-picker__text{color:var(--sd-file-picker-disabled-color)}.sd-file-picker--inline .sd-file-picker__content{border:none;background-color:transparent;padding:0;height:auto}.sd-file-picker--inline .sd-file-picker__text{color:var(--sd-file-picker-placeholder-color)}.sd-file-picker--inline:hover:not(.sd-file-picker--inline-disabled) .sd-file-picker__text{color:var(--sd-file-picker-text-color)}.sd-file-picker--inline .sd-file-picker__text--active{color:var(--sd-file-picker-text-color)}.sd-file-picker--inline.sd-file-picker--inline-disabled .sd-file-picker__content{cursor:not-allowed}.sd-file-picker--inline.sd-file-picker--inline-disabled .sd-file-picker__text{color:var(--sd-file-picker-disabled-color)}`;
|
|
278
278
|
|
|
279
279
|
const SdFilePicker = class {
|
|
280
280
|
constructor(hostRef) {
|
|
@@ -345,11 +345,11 @@ const SdFilePicker = class {
|
|
|
345
345
|
return undefined;
|
|
346
346
|
return typeof value === 'string' ? Number(value) : value;
|
|
347
347
|
}
|
|
348
|
-
validateFiles(files) {
|
|
348
|
+
validateFiles(files, existingCount = 0) {
|
|
349
349
|
const maxFileSize = this.toBytes(this.maxFileSize);
|
|
350
350
|
const maxTotalSize = this.toBytes(this.maxTotalSize);
|
|
351
351
|
const maxFiles = this.maxFiles != null ? Number(this.maxFiles) : undefined;
|
|
352
|
-
if (maxFiles != null && files.length > maxFiles) {
|
|
352
|
+
if (maxFiles != null && existingCount + files.length > maxFiles) {
|
|
353
353
|
return { accepted: [], rejected: files, reason: 'max-files' };
|
|
354
354
|
}
|
|
355
355
|
if (maxFileSize != null) {
|
|
@@ -373,22 +373,34 @@ const SdFilePicker = class {
|
|
|
373
373
|
return;
|
|
374
374
|
}
|
|
375
375
|
const fileArray = Array.from(files);
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
376
|
+
if (this.multiple) {
|
|
377
|
+
const existing = Array.isArray(this.internalValue) ? this.internalValue : [];
|
|
378
|
+
const { accepted, rejected, reason } = this.validateFiles(fileArray, existing.length);
|
|
379
379
|
if (this.fileInputRef) {
|
|
380
380
|
this.fileInputRef.value = '';
|
|
381
381
|
}
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
382
|
+
if (reason != null) {
|
|
383
|
+
this.reject?.emit({ files: rejected, reason });
|
|
384
|
+
return;
|
|
385
|
+
}
|
|
386
|
+
const merged = [...existing, ...accepted];
|
|
387
|
+
this.internalValue = merged;
|
|
388
|
+
this.value = merged;
|
|
389
|
+
this.update?.emit(this.value);
|
|
386
390
|
}
|
|
387
391
|
else {
|
|
392
|
+
const { accepted, rejected, reason } = this.validateFiles(fileArray);
|
|
393
|
+
if (reason != null) {
|
|
394
|
+
this.reject?.emit({ files: rejected, reason });
|
|
395
|
+
if (this.fileInputRef) {
|
|
396
|
+
this.fileInputRef.value = '';
|
|
397
|
+
}
|
|
398
|
+
return;
|
|
399
|
+
}
|
|
388
400
|
this.internalValue = accepted[0];
|
|
401
|
+
this.value = this.internalValue;
|
|
402
|
+
this.update?.emit(this.value);
|
|
389
403
|
}
|
|
390
|
-
this.value = this.internalValue;
|
|
391
|
-
this.update?.emit(this.value);
|
|
392
404
|
};
|
|
393
405
|
handleClear = (event) => {
|
|
394
406
|
if (this.disabled)
|
|
@@ -408,6 +420,8 @@ const SdFilePicker = class {
|
|
|
408
420
|
this.fileInputRef?.click();
|
|
409
421
|
};
|
|
410
422
|
hasFiles() {
|
|
423
|
+
if (this.multiple)
|
|
424
|
+
return false;
|
|
411
425
|
if (!this.internalValue)
|
|
412
426
|
return false;
|
|
413
427
|
if (Array.isArray(this.internalValue)) {
|
|
@@ -415,14 +429,28 @@ const SdFilePicker = class {
|
|
|
415
429
|
}
|
|
416
430
|
return true;
|
|
417
431
|
}
|
|
432
|
+
hasChips() {
|
|
433
|
+
return Array.isArray(this.internalValue) && this.internalValue.length > 0;
|
|
434
|
+
}
|
|
418
435
|
getDisplayText() {
|
|
419
436
|
if (!this.hasFiles())
|
|
420
437
|
return this.placeholder ?? 'Click to upload';
|
|
421
|
-
if (Array.isArray(this.internalValue)) {
|
|
422
|
-
return this.internalValue.map(f => f.name).join(', ');
|
|
423
|
-
}
|
|
424
438
|
return this.internalValue?.name || (this.placeholder ?? 'Click to upload');
|
|
425
439
|
}
|
|
440
|
+
handleChipRemove = (index) => {
|
|
441
|
+
if (!Array.isArray(this.internalValue))
|
|
442
|
+
return;
|
|
443
|
+
const newFiles = [...this.internalValue];
|
|
444
|
+
newFiles.splice(index, 1);
|
|
445
|
+
this.internalValue = newFiles;
|
|
446
|
+
this.value = newFiles;
|
|
447
|
+
this.update?.emit(this.value);
|
|
448
|
+
};
|
|
449
|
+
renderChipList() {
|
|
450
|
+
if (!this.hasChips())
|
|
451
|
+
return null;
|
|
452
|
+
return (h("div", { class: "sd-file-picker__chip-list" }, this.internalValue.map((file, index) => (h("sd-chip", { value: file.name, onSdRemove: () => this.handleChipRemove(index) })))));
|
|
453
|
+
}
|
|
426
454
|
checkOverflow() {
|
|
427
455
|
if (!this.fileNamesRef)
|
|
428
456
|
return;
|
|
@@ -462,9 +490,9 @@ const SdFilePicker = class {
|
|
|
462
490
|
return (h("div", { class: {
|
|
463
491
|
'sd-file-picker--inline': true,
|
|
464
492
|
'sd-file-picker--inline-disabled': this.disabled,
|
|
465
|
-
}, style: cssVars, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, content));
|
|
493
|
+
}, style: cssVars, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, content, this.renderChipList()));
|
|
466
494
|
}
|
|
467
|
-
return (h("sd-field", { name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false)
|
|
495
|
+
return (h("div", { class: "sd-file-picker__wrapper", style: cssVars }, h("sd-field", { name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, content), this.renderChipList()));
|
|
468
496
|
}
|
|
469
497
|
static get watchers() { return {
|
|
470
498
|
"value": [{
|
|
@@ -620,12 +648,12 @@ const SdInput = class {
|
|
|
620
648
|
'--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
|
|
621
649
|
'--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
|
|
622
650
|
};
|
|
623
|
-
return (h("sd-field", { key: '
|
|
651
|
+
return (h("sd-field", { key: '44bf19bfbe047e00eb02530a4f9c9eac37d9f0fb', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("label", { key: '2f610f980107fc552554b9415d878a7b8464e460', class: "sd-input__content" }, h("slot", { key: 'da4fa13a9f4c8e5cabb238743b74dbc216cf3d27', name: "prefix" }), h("input", { key: 'dd4fc95ef5136348e764552fb8847a7fedf6fd42', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : (this.type ?? 'text'), value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, autocomplete: this.autocomplete || undefined, maxlength: this.maxlength, minlength: this.minlength, inputmode: this.inputmode, enterkeyhint: this.enterkeyhint, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), h("slot", { key: 'ab2403fafd7eecf37bc03b0147025b06154230a7', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && !this.readonly && (h("sd-ghost-button", { key: '7b6ca184d3c08fc160556abf135939d1e8064b98', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
|
|
624
652
|
if (this.disabled || this.readonly)
|
|
625
653
|
return;
|
|
626
654
|
this.internalValue = '';
|
|
627
655
|
await this.formField?.sdValidate();
|
|
628
|
-
} })), this.type === 'password' && (h("sd-ghost-button", { key: '
|
|
656
|
+
} })), this.type === 'password' && (h("sd-ghost-button", { key: '52b5a72f6140b441ea971330594749208e302597', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled || this.readonly, class: "sd-input__password-icon", onClick: () => {
|
|
629
657
|
if (this.disabled || this.readonly)
|
|
630
658
|
return;
|
|
631
659
|
this.passwordVisible = !this.passwordVisible;
|
|
@@ -1026,15 +1054,15 @@ const SdNumberInput = class {
|
|
|
1026
1054
|
'--sd-textinput-input-hint-typography-line-height': `${NUMBER_INPUT_HINT.typography.lineHeight}px`,
|
|
1027
1055
|
'--sd-textinput-input-contents-gap': `${NUMBER_INPUT_CONTENTS_GAP}px`,
|
|
1028
1056
|
};
|
|
1029
|
-
return (h("sd-field", { key: '
|
|
1057
|
+
return (h("sd-field", { key: '508f0952028672d4951b5339d581b2180dd5a425', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: '8762e78034b655fc325de8a5be1dcc6dfad280f3', class: {
|
|
1030
1058
|
'sd-number-input__content': true,
|
|
1031
1059
|
'sd-number-input__content--no-stepper': !this.useButton,
|
|
1032
|
-
} }, this.useButton && (h("button", { key: '
|
|
1060
|
+
} }, this.useButton && (h("button", { key: '5a341252ff361744d47bf2297d164fbf39d7a2fe', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, h("sd-icon", { key: 'f8de73e01fa5762e6fadd10c9fda610efd3710e4', name: "minus", size: iconSize, color: this.isDecrementDisabled()
|
|
1033
1061
|
? NUMBER_INPUT_STEPPER.icon.disabled
|
|
1034
|
-
: NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && h("span", { key: '
|
|
1062
|
+
: NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && h("span", { key: '5e010880ff176350f333dc0e9de9b5f1d89b7efd', class: "sd-number-input__prefix" }, this.inputPrefix), h("input", { key: '0fc29e67f960bc2e93da90ffcd3d83ef24f151c2', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__native ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
|
|
1035
1063
|
textAlign: this.useButton ? 'center' : 'right',
|
|
1036
1064
|
...this.inputStyle,
|
|
1037
|
-
} }), this.inputSuffix && h("span", { key: '
|
|
1065
|
+
} }), this.inputSuffix && h("span", { key: 'db977e7d355fa86ddb35f4e1417e2408d8485ec2', class: "sd-number-input__suffix" }, this.inputSuffix), this.useButton && (h("button", { key: '55bdd004f7bb3aa160f90edf7696944af23e3619', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, h("sd-icon", { key: 'b5ce9631347c3f78b6f0fe04060def8e3a04bac3', name: "add", size: iconSize, color: this.isIncrementDisabled()
|
|
1038
1066
|
? NUMBER_INPUT_STEPPER.icon.disabled
|
|
1039
1067
|
: NUMBER_INPUT_STEPPER.icon.default }))))));
|
|
1040
1068
|
}
|
|
@@ -1216,7 +1244,7 @@ const SdTextarea = class {
|
|
|
1216
1244
|
'--sd-system-size-field-sm-height': 'auto',
|
|
1217
1245
|
'--sd-system-radius-field-sm': `${TEXTAREA_TOKENS.radius}px`,
|
|
1218
1246
|
};
|
|
1219
|
-
return (h("sd-field", { key: '
|
|
1247
|
+
return (h("sd-field", { key: '404175c94949c2510082df905c53e97ab835369c', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: 'ca92dfe613b2c006ecc4021bb2f07a2e4b04239a', class: "sd-textarea__content" }, h("textarea", { key: 'a6d2bbdb9c88766182728cf3eb30ce7691fb048f', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readOnly: this.readonly, autofocus: this.autoFocus, maxLength: this.maxLength, rows: this.rows, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.textareaStyle }))));
|
|
1220
1248
|
}
|
|
1221
1249
|
static get watchers() { return {
|
|
1222
1250
|
"value": [{
|
|
@@ -17,7 +17,7 @@ const SdDivider = class {
|
|
|
17
17
|
const hostStyle = {
|
|
18
18
|
'--sd-divider-color': DIVIDER_COLORS.default,
|
|
19
19
|
};
|
|
20
|
-
return (h(Host, { key: '
|
|
20
|
+
return (h(Host, { key: '3b3c22b1c5bf2d1bfa52c136113719e26b2e6767', style: hostStyle }, h("hr", { key: '4eca9f280e452330a2f57b03466e00f04688ad06', "aria-orientation": this.vertical ? 'vertical' : 'horizontal' })));
|
|
21
21
|
}
|
|
22
22
|
};
|
|
23
23
|
SdDivider.style = sdDividerCss();
|
|
@@ -259,7 +259,8 @@ const SdField = class {
|
|
|
259
259
|
: {} }, h("div", { key: '1f3c5f2009a0d96b8a3544c58b96f7ecc4ddee6b', class: {
|
|
260
260
|
'sd-field__control': true,
|
|
261
261
|
'sd-field__control--has-addon': addon !== '',
|
|
262
|
-
} }, addon && h("div", { key: '
|
|
262
|
+
} }, addon && (h("div", { key: 'e4f180f0183267ea99e2b8b65b6e4cd769a47946', class: "sd-field__addon" }, this.icon && (h("sd-icon", { key: 'c5503a823d8c5534abd27dc59bbd399702a07283', name: this.icon.name, size: this.icon.size ??
|
|
263
|
+
Number(FIELD_LABEL_SIZE_MAP[(this.size in FIELD_LABEL_SIZE_MAP ? this.size : 'sm')].icon), color: this.icon.color, rotate: this.icon.rotate })), addon)), h("slot", { key: '8b8bd230703e0b1e45eab3a5334dbdbb55fae8c9' })), this.errorMsg !== '' || this.errorMessage !== '' ? (h("div", { class: "sd-field__error-message" }, this.errorMsg !== '' ? this.errorMsg : this.errorMessage)) : (this.hint !== '' && h("div", { class: "sd-field__hint" }, this.hint))))));
|
|
263
264
|
}
|
|
264
265
|
renderLabel(label) {
|
|
265
266
|
if (label == null || label === '')
|
|
@@ -430,7 +431,7 @@ const SdFloatingPopover = class {
|
|
|
430
431
|
}
|
|
431
432
|
}
|
|
432
433
|
render() {
|
|
433
|
-
return h("slot", { key: '
|
|
434
|
+
return h("slot", { key: 'b1514fc54df3e304cfb53b824df96431fa815a6e' });
|
|
434
435
|
}
|
|
435
436
|
};
|
|
436
437
|
SdFloatingPopover.style = sdFloatingPortalCss();
|
|
@@ -548,14 +549,14 @@ const SdTooltip = class {
|
|
|
548
549
|
const hasLabel = this.label !== undefined && this.label !== '';
|
|
549
550
|
const divTrigger = trigger === 'hover' ? hoverTrigger : hasLabel ? {} : { onClick: toggleTooltip };
|
|
550
551
|
const buttonClickTrigger = trigger === 'click' && hasLabel ? { onSdClick: toggleTooltip } : {};
|
|
551
|
-
return (h(Fragment, { key: '
|
|
552
|
+
return (h(Fragment, { key: 'ef33f9f183820d684f2805e40134a81f7149fc16' }, h("div", { key: 'dd931825c55b0ee748c7ef45f15be0d6de37ad23', class: `sd-tooltip-trigger ${this.sdClass !== undefined && this.sdClass !== '' ? this.sdClass : ''}`, ...divTrigger }, hasLabel ? (h("sd-button", { ref: el => (this.buttonEl = el), name: this.name ?? 'primary_sm', label: this.label, icon: icon, rightIcon: this.rightIcon, ariaLabel: this.ariaLabel, disabled: this.disabled, type: this.type ?? 'button', class: "sd-tooltip", ...buttonClickTrigger })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: this.iconSize ?? 12, color: color, class: "sd-tooltip" }))), this.showTooltip && (h("sd-floating-portal", { key: '443dbbe8f0b9a66aaae9b8482a3f615d2d41e8ec', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.tooltipOffset }, h("div", { key: '040bde0321b1fd35014db976aeaddc515d87c807', ref: el => (this.menuEl = el), class: {
|
|
552
553
|
'sd-floating-menu': true,
|
|
553
554
|
[`sd-floating-menu--${tooltipType}`]: true,
|
|
554
555
|
[`sd-floating-menu--${placement}`]: true,
|
|
555
556
|
}, style: {
|
|
556
557
|
'--sd-floating-bg': typeConfig.bg,
|
|
557
558
|
'--sd-floating-content': typeConfig.content,
|
|
558
|
-
}, onMouseEnter: () => this.show(), onMouseLeave: () => this.startHideTimer() }, h("i", { key: '
|
|
559
|
+
}, onMouseEnter: () => this.show(), onMouseLeave: () => this.startHideTimer() }, h("i", { key: 'e802c09cc13ec3db29704197fa402588bf97d670', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, h(TooltipArrow, { key: 'b698fbdba2cee74955f65ed7b04abeea8ccabee5' })), h("div", { key: '97e856c543a8cdb880daae9ed0e461f5fd0f2b44', class: "sd-floating-menu__content", innerHTML: this.slotContentHTML }))))));
|
|
559
560
|
}
|
|
560
561
|
};
|
|
561
562
|
SdTooltip.style = sdTooltipCss();
|
|
@@ -47,7 +47,7 @@ const SdLinearProgress = class {
|
|
|
47
47
|
clipPath: `inset(0 ${100 - this.clampedValue}% 0 0)`,
|
|
48
48
|
};
|
|
49
49
|
const valueText = `${Math.round(this.clampedValue)}%`;
|
|
50
|
-
return (h(Host, { key: '
|
|
50
|
+
return (h(Host, { key: '0ae06e8a25685038b5e0834eba2ea090f8334fed', style: hostStyle }, h("div", { key: 'bc4d4b10d0ec63dbeda35eff00de62ab7335ce81', class: 'sd-linear-progress__track' }, h("div", { key: '5c228c7dade94c9cf22edbf48ef7d2edbc81d7b9', class: 'sd-linear-progress__fill', style: fillStyle }), !this.indeterminate && (h("span", { key: 'e8abe8b206fc0b07fd348038ad81c3fdd8141797', class: 'sd-linear-progress__value sd-linear-progress__value--on-track' }, valueText)), !this.indeterminate && (h("span", { key: 'b6f43931cbd98e799e3481c23d1ae98f1a65da34', class: 'sd-linear-progress__value sd-linear-progress__value--on-fill', style: valueOnFillStyle }, valueText))), this.label && h("span", { key: '616eba6d54d25cad5eceebc8de6f1122668307cf', class: 'sd-linear-progress__label' }, this.label)));
|
|
51
51
|
}
|
|
52
52
|
};
|
|
53
53
|
SdLinearProgress.style = sdLinearProgressCss();
|
|
@@ -16,10 +16,10 @@ const SdLoadingContainer = class {
|
|
|
16
16
|
this.visible = false;
|
|
17
17
|
}
|
|
18
18
|
render() {
|
|
19
|
-
return (h("div", { key: '
|
|
19
|
+
return (h("div", { key: 'bae5e9473237c0389d6fb404294abe6897c9847c', class: {
|
|
20
20
|
'sd-loading-container': true,
|
|
21
21
|
'sd-loading-container--visible': this.visible,
|
|
22
|
-
}, "aria-hidden": this.visible ? 'false' : 'true' }, h("div", { key: '
|
|
22
|
+
}, "aria-hidden": this.visible ? 'false' : 'true' }, h("div", { key: 'd78b4d84c7cd34739452b0ab84df640c94939b2b', class: "sd-loading-container__backdrop" }), h("div", { key: '890c86605412bf67ab878155fd299c2f0b84e375', class: "sd-loading-container__content" }, h("sd-circle-progress", { key: '0912c4b7c23700b6ccf8ffdc6b4ce0d67b568320', indeterminate: true, type: "inverse" }), this.message && (h("p", { key: '373d1765d0a7c24b54bb22e65a8a6a525771ed78', class: "sd-loading-container__message" }, this.message)))));
|
|
23
23
|
}
|
|
24
24
|
};
|
|
25
25
|
SdLoadingContainer.style = sdLoadingContainerCss();
|
|
@@ -201,6 +201,9 @@ const SdModalContainer = class {
|
|
|
201
201
|
if (this.hasOwnProp(options, 'height')) {
|
|
202
202
|
this.setAttr(el, 'height', options.height != null ? String(options.height) : undefined);
|
|
203
203
|
}
|
|
204
|
+
if (this.hasOwnProp(options, 'progress')) {
|
|
205
|
+
el.progress = options.progress;
|
|
206
|
+
}
|
|
204
207
|
}
|
|
205
208
|
applyProps(el, options) {
|
|
206
209
|
if (this.hasOwnProp(options, 'type'))
|
|
@@ -152,13 +152,13 @@ const SdPagination = class {
|
|
|
152
152
|
'--sd-pagination-bg-selected': PAGINATION_COLORS.bgSelected,
|
|
153
153
|
'--sd-pagination-item-width': `${this.buttonWidth}px`,
|
|
154
154
|
};
|
|
155
|
-
return (h("div", { key: '
|
|
155
|
+
return (h("div", { key: 'a5d1cb7e22c1d582800f329e6b02ffd9f5e6605c', class: {
|
|
156
156
|
'sd-pagination': true,
|
|
157
157
|
'sd-pagination--simple': this.simple,
|
|
158
|
-
}, style: cssVars }, h("div", { key: '
|
|
158
|
+
}, style: cssVars }, h("div", { key: '196f7f2b3cc0fc896ddbcd4449b23d31729c7ec3', class: "sd-pagination__group sd-pagination__group--prev" }, this.renderPrevButtons()), this.simple ? (h("div", { class: "sd-pagination__info" }, h("span", { class: "sd-pagination__current" }, this.currentPage), h("span", { class: "sd-pagination__divider" }, "/"), h("span", { class: "sd-pagination__last" }, this.lastPage))) : (h("div", { class: "sd-pagination__numbers" }, this.pageNumbers.map(n => (h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
|
|
159
159
|
'sd-pagination__item': true,
|
|
160
160
|
'sd-pagination__item--selected': this.currentPage === n,
|
|
161
|
-
}, onClick: () => this.handlePageChange(n) }, n))))), h("div", { key: '
|
|
161
|
+
}, onClick: () => this.handlePageChange(n) }, n))))), h("div", { key: '5fe50f0cef43f8b5ef72556ed4d19653cb30a7e9', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
|
|
162
162
|
}
|
|
163
163
|
};
|
|
164
164
|
SdPagination.style = sdPaginationCss();
|
|
@@ -213,9 +213,9 @@ const SdTbody = class {
|
|
|
213
213
|
}
|
|
214
214
|
}
|
|
215
215
|
render() {
|
|
216
|
-
return (h(Host, { key: '
|
|
216
|
+
return (h(Host, { key: 'b35f308e703fd3240f8c8dc30bc04432a213fb14', slot: `${this.tableId}-body` }, h("tbody", { key: 'b43c4347f84f13b9babad33ba841ffc18630ac55', class: { tbody: true } }, [
|
|
217
217
|
this.topSpacerHeight > 0 && (h("tr", { key: "spacer-top", class: "tbody__spacer", style: { height: `${this.topSpacerHeight}px`, display: 'block' } })),
|
|
218
|
-
h("slot", { key: '
|
|
218
|
+
h("slot", { key: 'ac0cbfc76b8c38743f73e38c584459176c2a5b94' }),
|
|
219
219
|
this.bottomSpacerHeight > 0 && (h("tr", { key: "spacer-bottom", class: "tbody__spacer", style: { height: `${this.bottomSpacerHeight}px`, display: 'block' } })),
|
|
220
220
|
])));
|
|
221
221
|
}
|
|
@@ -390,16 +390,16 @@ const SdThead = class {
|
|
|
390
390
|
'--table-border-color': TABLE_BORDER.color,
|
|
391
391
|
'--table-border-width': `${TABLE_BORDER.width}px`,
|
|
392
392
|
};
|
|
393
|
-
return (h(Host, { key: '
|
|
393
|
+
return (h(Host, { key: 'aa5409734259c4c9dce1be6808a622e1dad8e577', slot: `${this.tableId}-head`, style: headStyle }, h("thead", { key: '4c8aac4d2b9a0f9288abb67a03bd2c47510af676', class: {
|
|
394
394
|
'thead': true,
|
|
395
395
|
'thead--sticky': this._stickyHeader,
|
|
396
|
-
} }, h("tr", { key: '
|
|
396
|
+
} }, h("tr", { key: 'be0af465f9406a898649bb0cea1b1972fc131a9b', class: "tr" }, this._selectable && (h("th", { key: '72a763c4116dc03c372131629d64a92d9f338b65', class: {
|
|
397
397
|
'th': true,
|
|
398
398
|
'th--selected': true,
|
|
399
399
|
'sticky-left': true,
|
|
400
400
|
'sticky-left-edge': stickyLeftCount === 0,
|
|
401
401
|
'is-scrolled-left': stickyLeftCount === 0 && this._scrolledLeft,
|
|
402
|
-
}, style: { '--sticky-left-offset': '0px' } }, h("sd-checkbox", { key: '
|
|
402
|
+
}, style: { '--sticky-left-offset': '0px' } }, h("sd-checkbox", { key: '2076f3b5a6baef3b6c1cfa6bab96953144f8a669', value: this.getIsAllChecked(), disabled: safeRows.length === 0, onSdUpdate: (e) => this.handleSelectAll(e.detail) }), h("div", { key: '39dd8464081671945828859cec50862b1979de36', class: "th__bar" }))), stickyLeftCols.map((col, idx) => (h("th", { key: col.name, class: {
|
|
403
403
|
'th': true,
|
|
404
404
|
[`${col.thClass}`]: Boolean(col.thClass),
|
|
405
405
|
'sticky-left': true,
|
|
@@ -27,10 +27,10 @@ const SdPopover = class {
|
|
|
27
27
|
disabled = false;
|
|
28
28
|
type = 'button';
|
|
29
29
|
menuTitle;
|
|
30
|
-
messages = [];
|
|
31
30
|
leftLink;
|
|
32
31
|
button;
|
|
33
32
|
menuClass = '';
|
|
33
|
+
slotContentHTML = '';
|
|
34
34
|
showChange;
|
|
35
35
|
buttonEl;
|
|
36
36
|
setShow = (next) => {
|
|
@@ -52,27 +52,30 @@ const SdPopover = class {
|
|
|
52
52
|
}
|
|
53
53
|
}
|
|
54
54
|
handleClose = () => this.setShow(false);
|
|
55
|
+
componentWillLoad() {
|
|
56
|
+
this.slotContentHTML = this.el.innerHTML;
|
|
57
|
+
this.el.innerHTML = '';
|
|
58
|
+
}
|
|
55
59
|
render() {
|
|
56
60
|
const placement = this.placement ?? 'bottom';
|
|
57
61
|
const color = this.color ?? '#01BB4B';
|
|
58
62
|
const icon = this.icon ?? 'helpOutline';
|
|
59
63
|
const iconSize = this.iconSize ?? 12;
|
|
60
64
|
const menuClass = this.menuClass ?? '';
|
|
61
|
-
const messages = Array.isArray(this.messages) ? this.messages : [];
|
|
62
65
|
const leftLink = this.leftLink;
|
|
63
66
|
const button = this.button;
|
|
64
67
|
const hasFooter = !!leftLink || !!button;
|
|
65
|
-
return (h(Fragment, { key: '
|
|
68
|
+
return (h(Fragment, { key: '3eb48b91ccf49d78cf332bf2c83268ca903be3ef' }, this.label !== '' ? (h("sd-button", { ref: el => (this.buttonEl = el), name: this.name ?? 'primary_sm', label: this.label, icon: icon, rightIcon: this.rightIcon, ariaLabel: this.ariaLabel || this.label || icon || 'Open popover', disabled: this.disabled, type: this.type ?? 'button', class: "sd-popover", onSdClick: () => this.setShow(!this.show) })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: iconSize, color: color, class: "sd-popover", onClick: () => this.setShow(!this.show) })), this.show && (h("sd-floating-portal", { key: '94c0b1d56307b29944d078d03bdd686c3eacaee0', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.popoverOffset }, h("div", { key: '3f969dcad5785973e80cab6090e8b687461bbbe2', class: {
|
|
66
69
|
'sd-floating-menu': true,
|
|
67
70
|
'sd-floating-menu--popover': true,
|
|
68
71
|
[`sd-floating-menu--${placement}`]: true,
|
|
69
72
|
[menuClass]: menuClass !== '',
|
|
70
73
|
}, style: {
|
|
71
74
|
'--sd-floating-bg': popoverTokens.popover.bg,
|
|
72
|
-
} }, h("i", { key: '
|
|
75
|
+
} }, h("i", { key: '3992cc7f589dc932c59a9bd88376b93e66e37cd0', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, h(TooltipArrow, { key: 'b2d27b5131e022d3d22a82cccf9cd80afc414194' })), h("div", { key: '48b33b11d8179e51fe4b3f0fbc24084d197b5447', class: "sd-floating-menu__content" }, this.menuTitle && h("div", { key: 'b955fb4707b66d003414197254a165388ceafb11', class: "sd-floating-menu__title" }, this.menuTitle), this.slotContentHTML && (h("div", { key: 'c5416ab9a7f4f0bcda01af31304e4358f25ff6e2', class: "sd-floating-menu__messages", innerHTML: this.slotContentHTML })), hasFooter && (h("div", { key: '51db3b7a70e4f1befc49b7ee26422a634a38d9e1', class: {
|
|
73
76
|
'sd-floating-menu__buttons': true,
|
|
74
77
|
'sd-floating-menu__buttons--with-link': !!leftLink,
|
|
75
|
-
} }, leftLink && (h("sd-text-link", { key: '
|
|
78
|
+
} }, leftLink && (h("sd-text-link", { key: 'a2a164fa9ab3294c0b0e726c7c69405a612de264', class: "sd-floating-menu__left-link", label: leftLink.label, icon: leftLink.icon ?? '', iconColor: leftLink.iconColor ?? '', useArrow: !!leftLink.useArrow, underline: !!leftLink.underline, disabled: !!leftLink.disabled, onSdClick: leftLink.onClick })), button && (h("sd-button", { key: '41c917026e1255ac2bd355042500c6efa0e76cb0', name: button.name ?? 'secondary_xs', label: button.label, icon: button.icon, rightIcon: button.rightIcon, ariaLabel: button.ariaLabel || button.label || button.icon || 'Open popover', disabled: button.disabled, type: button.type, onSdClick: button.onClick }))))), h("sd-ghost-button", { key: 'dde5bbb7bc8b9b5ce6b122eb566ce961dd640ad0', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xs", onClick: this.handleClose }))))));
|
|
76
79
|
}
|
|
77
80
|
};
|
|
78
81
|
SdPopover.style = sdPopoverCss();
|
|
@@ -103,7 +103,7 @@ const SdPopup = class {
|
|
|
103
103
|
...DEFAULT_SUBMIT_BUTTON_PROPS,
|
|
104
104
|
...this.submitButtonProps,
|
|
105
105
|
};
|
|
106
|
-
return (h("div", { key: '
|
|
106
|
+
return (h("div", { key: '53c0cca8c1188f36569ffaf79767fe81f9a5bf87', class: `sd-popup sd-popup--${this.type}`, style: cssVars }, h("header", { key: 'f8459d43d2568e1f8fbcb19f789ba2a9998db8e7', class: "sd-popup__header" }, h("h2", { key: '56b960c73d215e4ce878007acd0b04e1371ee87b', class: "sd-popup__title" }, this.popupTitle)), h("div", { key: '513de018b9826c54672bdc8019447b3026fb2d9f', class: "sd-popup__body" }, h("slot", { key: '60109bc7ee30ac100a08285e50d24027e6bc22d0' })), this.useFooter && (h("footer", { key: '4daa5fa938f2d79b2ab4d13de1d6aeb0b02d78e1', class: "sd-popup__footer" }, h("div", { key: '6f885be6acb363054c659f7f844558b9bda1ca74', class: "sd-popup__footer-slot sd-popup__footer-slot--left" }, h("slot", { key: '57231c78bb0512407323c8ef16a90011027abbc4', name: "footer-left" })), h("sd-button", { key: 'ce4c1e577d4b3346d368e22ce713ccc57f54f231', ...submitButtonProps, class: "sd-popup__submit", onSdClick: () => this.submit.emit() })))));
|
|
107
107
|
}
|
|
108
108
|
};
|
|
109
109
|
SdPopup.style = sdPopupCss();
|
|
@@ -77,7 +77,7 @@ const SdSelectListItem = class {
|
|
|
77
77
|
return (
|
|
78
78
|
// 키보드 네비게이션은 부모 listbox 의 ArrowUp/Down + Enter 가 담당. 항목 자체는 role=option, tabindex=-1 으로 표시.
|
|
79
79
|
// eslint-disable-next-line jsx-a11y/click-events-have-key-events
|
|
80
|
-
h("div", { key: '
|
|
80
|
+
h("div", { key: 'd1030a5fb5797ea6be89f6a3a32201145e5fa387', role: "option", tabindex: -1, "aria-selected": this.isSelected === true ? 'true' : 'false', class: {
|
|
81
81
|
'sd-select-list-item': true,
|
|
82
82
|
'sd-select-list-item--group': isGroup,
|
|
83
83
|
'sd-select-list-item--depth1-group': isDepth1Group,
|
|
@@ -87,7 +87,7 @@ const SdSelectListItem = class {
|
|
|
87
87
|
'sd-select-list-item--focused': this.isFocused,
|
|
88
88
|
'sd-select-list-item--selectable': this.isSelectable && !this.option.disabled,
|
|
89
89
|
'sd-select-list-item--disabled': !!this.option.disabled,
|
|
90
|
-
}, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (h("sd-checkbox", { key: '
|
|
90
|
+
}, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (h("sd-checkbox", { key: '1f8a7812f567ece12b7e064a9e9738366b0a0e11', value: this.isSelected === null ? null : !!this.isSelected, disabled: this.option.disabled, inverse: this.isFocused && this.isSelected !== false, class: "sd-select-list-item__checkbox", onClick: this.handleCheckboxClick, onSdUpdate: this.handleCheckboxUpdate })), h("span", { key: '55e2e4c9497aea99fc0502b40ac16809c257206e', class: "sd-select-list-item__label" }, this.option.label), this.countInfo && (h("span", { key: '722599bf0022770c91c02d4e67a6e234da4e0f80', class: "sd-select-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
|
|
91
91
|
}
|
|
92
92
|
};
|
|
93
93
|
SdSelectListItem.style = sdSelectListItemCss();
|
|
@@ -140,15 +140,15 @@ const SdSelectListItemSearch = class {
|
|
|
140
140
|
clearTimeout(this.debounceTimer);
|
|
141
141
|
}
|
|
142
142
|
render() {
|
|
143
|
-
return (h("div", { key: '
|
|
143
|
+
return (h("div", { key: '69416e32b3915ca27d8e2f25a7f36d1868835696', class: {
|
|
144
144
|
'sd-select-list-item-search': true,
|
|
145
145
|
'sd-select-list-item-search--scrolled': this.isScrolled,
|
|
146
|
-
} }, h("div", { key: '
|
|
146
|
+
} }, h("div", { key: '3917460421d197d70abc7b6b9c75fa85ce9e6631', class: "sd-select-list-item-search__inner" }, h("sd-icon", { key: '42a0d8221d2479457af32db35111bb35d7a28e53', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), h("input", { key: '48ab6ef174ddf194aa2616d0cbfbc09fa2032222', ref: el => {
|
|
147
147
|
this.inputEl = el;
|
|
148
|
-
}, type: "text", class: "sd-select-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput, onFocus: () => this.searchFocus.emit() }), h("button", { key: '
|
|
148
|
+
}, type: "text", class: "sd-select-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput, onFocus: () => this.searchFocus.emit() }), h("button", { key: 'ead5c189a8ef2b8cb3696cc6536c58dd4864c71e', type: "button", class: {
|
|
149
149
|
'sd-select-list-item-search__clear': true,
|
|
150
150
|
'sd-select-list-item-search__clear--hidden': this.searchText === '',
|
|
151
|
-
}, onClick: this.handleClear, tabindex: this.searchText !== '' ? 0 : -1, "aria-hidden": this.searchText !== '' ? 'false' : 'true' }, h("sd-icon", { key: '
|
|
151
|
+
}, onClick: this.handleClear, tabindex: this.searchText !== '' ? 0 : -1, "aria-hidden": this.searchText !== '' ? 'false' : 'true' }, h("sd-icon", { key: '6590c0acd5114722126459f4886c587b320a17e1', name: "close", size: 12, color: "#888888" })))));
|
|
152
152
|
}
|
|
153
153
|
};
|
|
154
154
|
SdSelectListItemSearch.style = sdSelectListItemSearchCss();
|
|
@@ -263,15 +263,15 @@ const SdSelect = class {
|
|
|
263
263
|
this.closeDropdown();
|
|
264
264
|
},
|
|
265
265
|
};
|
|
266
|
-
return (h("sd-field", { key: '
|
|
266
|
+
return (h("sd-field", { key: '08992d05403b6e7ba6aec7968dd6fa99d8857666', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
|
|
267
267
|
this.hovered = true;
|
|
268
268
|
}, onMouseLeave: () => {
|
|
269
269
|
this.hovered = false;
|
|
270
|
-
} }, h("div", { key: '
|
|
270
|
+
} }, h("div", { key: '3372029d54087654b8172d4d374126c0be703f5c', class: "sd-select", ref: el => {
|
|
271
271
|
this.triggerRef = el;
|
|
272
|
-
} }, h("sd-select-trigger", { key: '
|
|
272
|
+
} }, h("sd-select-trigger", { key: 'af832319b490501468b05da69eeed964a07f00ea', ref: el => {
|
|
273
273
|
this.triggerComponentRef = el;
|
|
274
|
-
}, displayText: this.displayText, placeholder: this.placeholder ?? '선택', disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick, onSdTriggerFocus: this.handleTriggerFocus, onSdTriggerBlur: this.handleTriggerBlur })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: '
|
|
274
|
+
}, displayText: this.displayText, placeholder: this.placeholder ?? '선택', disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick, onSdTriggerFocus: this.handleTriggerFocus, onSdTriggerBlur: this.handleTriggerBlur })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: 'b6b9211aadd5ef643716948dfa67d6d923420679', ...portalProps }, h("sd-select-listbox", { key: '9d532180439c8d1867e349d89914626b644ac224', type: this.type, options: this.options, value: this.value, emitValue: this.emitValue, useSearch: this.useSearch, useSelectAll: this.useSelectAll, triggerWidth: this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
|
|
275
275
|
}
|
|
276
276
|
static get watchers() { return {
|
|
277
277
|
"isOpen": [{
|
|
@@ -635,9 +635,9 @@ const SdSelectListbox = class {
|
|
|
635
635
|
'--listbox-max-height': this.maxHeight ?? '260px',
|
|
636
636
|
'--listbox-radius': `${LIST_BOX_LAYOUT.radius}px`,
|
|
637
637
|
};
|
|
638
|
-
return (h("div", { key: '
|
|
638
|
+
return (h("div", { key: 'f2b243788074de1aa3e78a78566a622ab3116351', class: "sd-select-listbox", style: cssVars }, this.showSearch && (h("sd-select-list-item-search", { key: 'a9f9f30a43e1965756095e29a24f75b4f1c14100', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), h("div", { key: 'b500f705a69e2c98e3ad79bf04c2bb2a4b8a6162', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
|
|
639
639
|
this.listEl = el;
|
|
640
|
-
} }, this.showSelectAll && (h("sd-select-list-item", { key: '
|
|
640
|
+
} }, this.showSelectAll && (h("sd-select-list-item", { key: 'c47e41ebce483ee311cae261b2f4fe21c134e437', option: SdSelectListbox.SELECT_ALL_OPTION, depth: 1, isSelected: this.selectAllState, isFocused: this.isOptionFocused(SdSelectListbox.SELECT_ALL_OPTION), useCheckbox: true, onSdListItemClick: this.handleSelectAllClick, onMouseEnter: () => this.handleOptionHover(SdSelectListbox.SELECT_ALL_OPTION) })), this.isEmpty ? (h("div", { class: "sd-select-listbox__empty" }, EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (h("sd-select-list-item", { option: option, depth: 1, isSelected: this.isOptionSelected(option), isFocused: this.isOptionFocused(option), useCheckbox: this.isMulti, onSdListItemClick: this.handleOptionClick, onMouseEnter: () => this.handleOptionHover(option) })))))));
|
|
641
641
|
}
|
|
642
642
|
static get watchers() { return {
|
|
643
643
|
"searchKeyword": [{
|
|
@@ -697,7 +697,7 @@ const SdSelectTrigger = class {
|
|
|
697
697
|
? SELECT_COLORS.icon.disabled
|
|
698
698
|
: SELECT_COLORS.icon.default,
|
|
699
699
|
};
|
|
700
|
-
return (h("div", { key: '
|
|
700
|
+
return (h("div", { key: '471e6df2948987989fa192474b0305ad0c8bcd32', ref: el => {
|
|
701
701
|
this.triggerEl = el;
|
|
702
702
|
}, role: "button", "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', tabindex: this.disabled ? -1 : 0, class: {
|
|
703
703
|
'sd-select-trigger': true,
|
|
@@ -708,7 +708,7 @@ const SdSelectTrigger = class {
|
|
|
708
708
|
e.preventDefault();
|
|
709
709
|
this.handleClick();
|
|
710
710
|
}
|
|
711
|
-
}, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("div", { key: '
|
|
711
|
+
}, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("div", { key: '8133b44065cd4a27d6aa71980c8684c363c7e7ba', class: "sd-select-trigger__content" }, h("span", { key: 'd8ee3d118cf760b687b491387592efe0c7532cf2', class: "sd-select-trigger__text" }, hasValue ? this.displayText : (this.placeholder ?? '선택')), h("sd-icon", { key: '0271061d32f1236346812a21a2e483402a94415c', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
|
|
712
712
|
'sd-select-trigger__icon': true,
|
|
713
713
|
'sd-select-trigger__icon--open': this.isOpen,
|
|
714
714
|
} }))));
|
|
@@ -100,7 +100,7 @@ const SdSwitch = class {
|
|
|
100
100
|
'--sd-switch-line-height': `${SWITCH_TYPOGRAPHY.lineHeight}px`,
|
|
101
101
|
'--sd-switch-text-decoration': SWITCH_TYPOGRAPHY.textDecoration,
|
|
102
102
|
};
|
|
103
|
-
return (h("label", { key: '
|
|
103
|
+
return (h("label", { key: 'b5dc0e7a9a59d679402226aa18f3155e42f6b7c2', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, h("input", { key: 'aa77eb38e07dfc911eb3a72c3ab3b3287423deaa', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), h("div", { key: 'b973671f6229fea3aab8d4040cc2916e32001eaf', class: "sd-switch__track" }, h("div", { key: 'db6073df05c1d77681559490fd773fdce24c6ca4', class: "sd-switch__knob" })), this.label && h("span", { key: '8ee1f5ba9fc1561a351d6982929721cc33ce0650', class: "sd-switch__label" }, this.label)));
|
|
104
104
|
}
|
|
105
105
|
};
|
|
106
106
|
SdSwitch.style = sdSwitchCss();
|
|
@@ -840,25 +840,25 @@ const SdTable = class {
|
|
|
840
840
|
'--table-body-text-decoration': TABLE_BODY_TYPOGRAPHY.textDecoration,
|
|
841
841
|
'--table-selectable-width': `${TABLE_SELECTABLE_COLUMN_WIDTH}px`,
|
|
842
842
|
};
|
|
843
|
-
return (h(Host, { key: '
|
|
843
|
+
return (h(Host, { key: '73046beb47b356f351ae89b162c8e8af2942b0b2', style: hostStyle }, h("div", { key: 'f56b8a425d15a3598e6c1f3373d21ef263cbd800', class: "sd-table__container", style: {
|
|
844
844
|
'--table-width': this.width,
|
|
845
845
|
'--table-height': effectiveTableHeight,
|
|
846
846
|
'--table-container-height': `calc(${effectiveTableHeight} - ${paginationHeight}px)`,
|
|
847
|
-
} }, h("div", { key: '
|
|
847
|
+
} }, h("div", { key: '519a193ab21616ce0a423c9043e0114c489539f3', class: {
|
|
848
848
|
'sd-table__wrapper': true,
|
|
849
849
|
'sd-table__wrapper--use-top': this.useTop,
|
|
850
|
-
} }, h("div", { key: '
|
|
850
|
+
} }, h("div", { key: 'ef96c9e2ef6b70023c35e5709048f3d994a5bebc', class: {
|
|
851
851
|
'sd-table__scroll-container': true,
|
|
852
852
|
'sd-table__scroll-container--loading': this.isLoading,
|
|
853
853
|
'sd-table__scroll-container--no-data': isNoData,
|
|
854
|
-
} }, this.isLoading && (h("div", { key: '
|
|
854
|
+
} }, this.isLoading && (h("div", { key: '94f9bbc56855af3548a73ccbbf228b2247764f54', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, h("sd-circle-progress", { key: '2f8a0bfbc0c5829779b7474a9520ddec70a977ea', indeterminate: true }))), isNoData && (h(h.Fragment, null, h("div", { key: 'fab3d44147ecbc99ff3745908ec69da003b4e7cf', class: "sd-table__no-data-header-overlay" }), h("div", { key: '10f8b13e6bba12c80001e5d4432715b0abe2f2f2', class: "sd-table__no-data" }, h("div", { key: '8c411450fc0780df83e69c86ad06c2d09cf80350', class: "sd-table__no-data-content", ref: el => {
|
|
855
855
|
this.noDataContentEl = el;
|
|
856
856
|
if (el)
|
|
857
857
|
this.syncNoDataContentObserver();
|
|
858
|
-
} }, h("slot", { key: '
|
|
858
|
+
} }, h("slot", { key: '661b982cde4f4a6dfa9f6c712efed6745e20f3bf', name: "no-data" }, h("span", { key: '76330839b2614611266315bb8b482b6a8571f1f4' }, this.resolvedNoDataLabel)))))), h("table", { key: '89d9f80c6a0c9963b311d2c121ae0cb0a3289da0', class: this.tableClasses }, this.autoThead ? (h("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange }, h("sd-thead", { rows: this.rows ?? [] }))) : (h("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange })), this.autoTbody ? (h("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }, h("sd-tbody", { rows: this.rows ?? [] }, this.renderAutoRows()))) : (h("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }))))), this.pagination &&
|
|
859
859
|
this.pagination.rowsPerPage > 0 &&
|
|
860
860
|
this.rowCount > 0 &&
|
|
861
|
-
!this.useVirtualScroll && (h("div", { key: '
|
|
861
|
+
!this.useVirtualScroll && (h("div", { key: '02e675535bbdc30ab7177378f1b2b13799a9e5c8', class: "sd-table__pagination" }, h("sd-pagination", { key: '83537d5e2f6d5b92e2a4b7dd9e4624372adf0433', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (h("sd-select", { key: 'f843f063b736e534b017fd7f881f049c4258c792', value: this.useInternalPagination
|
|
862
862
|
? this.innerRowsPerPage
|
|
863
863
|
: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", emitValue: true, onSdUpdate: e => {
|
|
864
864
|
if (!this.isRowsPerPageValue(e.detail))
|
|
@@ -186,7 +186,7 @@ const SdTabs = class {
|
|
|
186
186
|
};
|
|
187
187
|
}
|
|
188
188
|
render() {
|
|
189
|
-
return (h("div", { key: '
|
|
189
|
+
return (h("div", { key: '880f1aa80c29f2d578ffe2d5e5e5e0c008c898d3', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index) => {
|
|
190
190
|
const badgeName = this.getBadgeName(tab);
|
|
191
191
|
return (h("div", { key: `tab-${index}`, role: "tab", tabindex: 0, "aria-selected": tab.value === this.value ? 'true' : 'false', class: this.getTabClasses(tab), "aria-label": tab.label || 'tab', onClick: () => this.handleTabClick(tab), onKeyDown: e => {
|
|
192
192
|
if (e.key === 'Enter' || e.key === ' ') {
|
package/dist/esm/sd-td.entry.js
CHANGED
|
@@ -156,7 +156,7 @@ const SdTd = class {
|
|
|
156
156
|
}
|
|
157
157
|
}
|
|
158
158
|
render() {
|
|
159
|
-
return (h(Host, { key: '
|
|
159
|
+
return (h(Host, { key: '5c40fa3dd98dbd88850bd14836ee5578ceb04349', class: { [`align-${this.align}`]: Boolean(this.align) } }, h("slot", { key: '864b000e178c0b6de25b930aa5a84b4f7d7c189b' })));
|
|
160
160
|
}
|
|
161
161
|
static get watchers() { return {
|
|
162
162
|
"field": [{
|