@sellmate/design-system 1.24.0 → 1.25.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.
Files changed (67) hide show
  1. package/dist/cjs/sd-chip-input.cjs.entry.js +6 -7
  2. package/dist/cjs/sd-ghost-button_3.cjs.entry.js +6 -1
  3. package/dist/cjs/sd-pagination_4.cjs.entry.js +38 -8
  4. package/dist/collection/components/sd-chip-input/sd-chip-input.css +3 -0
  5. package/dist/collection/components/sd-chip-input/sd-chip-input.js +5 -6
  6. package/dist/collection/components/sd-portal/sd-portal.js +6 -1
  7. package/dist/collection/components/sd-table/sd-thead/sd-thead.css +4 -0
  8. package/dist/collection/components/sd-table/sd-thead/sd-thead.js +37 -7
  9. package/dist/components/{p-Bqfoe_ek.js → p--qAfho9a.js} +1 -1
  10. package/dist/components/{p-BtVuPyhl.js → p-0eogwabp.js} +1 -1
  11. package/dist/components/{p-qbClgrdG.js → p-BAsjJuJJ.js} +1 -1
  12. package/dist/components/{p-C-Cje7aS.js → p-BGpxtouI.js} +1 -1
  13. package/dist/components/{p-fzFFhJlr.js → p-BQHbIUbt.js} +1 -1
  14. package/dist/components/{p-D_SxeDkS.js → p-BckY1cBy.js} +1 -1
  15. package/dist/components/{p-C4_oeGm-.js → p-BlN03Cqm.js} +1 -1
  16. package/dist/components/{p-BoPkOevJ.js → p-Bls7CCxZ.js} +1 -1
  17. package/dist/components/{p-Fwb7LRwv.js → p-BuuIkYiY.js} +1 -1
  18. package/dist/components/{p-DcJ7u2_W.js → p-BvJuT-H0.js} +1 -1
  19. package/dist/components/{p-Ck2aozmE.js → p-CnEZJlEp.js} +1 -1
  20. package/dist/components/{p-DPmMT-y0.js → p-CqivNcjh.js} +1 -1
  21. package/dist/components/{p-Ycs3I9cT.js → p-DBw58vNP.js} +1 -1
  22. package/dist/components/{p-PXhjh7pH.js → p-DFp9nJnT.js} +1 -1
  23. package/dist/components/{p-D-a6H314.js → p-DpHtcEDP.js} +1 -1
  24. package/dist/components/p-DpYG9T3S.js +1 -0
  25. package/dist/components/{p-1cW-9wVB.js → p-d3KpOGRC.js} +1 -1
  26. package/dist/components/{p-C5uz_eFs.js → p-lGr865w2.js} +1 -1
  27. package/dist/components/sd-action-modal.js +1 -1
  28. package/dist/components/sd-barcode-input.js +1 -1
  29. package/dist/components/sd-calendar.js +1 -1
  30. package/dist/components/sd-chip-input.js +1 -1
  31. package/dist/components/sd-chip.js +1 -1
  32. package/dist/components/sd-confirm-modal.js +1 -1
  33. package/dist/components/sd-date-picker.js +1 -1
  34. package/dist/components/sd-date-range-picker-calendar.js +1 -1
  35. package/dist/components/sd-date-range-picker.js +1 -1
  36. package/dist/components/sd-dropdown-button.js +1 -1
  37. package/dist/components/sd-field.js +1 -1
  38. package/dist/components/sd-file-picker.js +1 -1
  39. package/dist/components/sd-ghost-button.js +1 -1
  40. package/dist/components/sd-guide.js +1 -1
  41. package/dist/components/sd-input.js +1 -1
  42. package/dist/components/sd-key-value-table.js +1 -1
  43. package/dist/components/sd-modal-container.js +1 -1
  44. package/dist/components/sd-number-input.js +1 -1
  45. package/dist/components/sd-popover.js +1 -1
  46. package/dist/components/sd-portal.js +1 -1
  47. package/dist/components/sd-select.js +1 -1
  48. package/dist/components/sd-table.js +1 -1
  49. package/dist/components/sd-text-link.js +1 -1
  50. package/dist/components/sd-textarea.js +1 -1
  51. package/dist/components/sd-thead.js +1 -1
  52. package/dist/components/sd-toast-container.js +1 -1
  53. package/dist/components/sd-toast.js +1 -1
  54. package/dist/components/sd-tooltip.js +1 -1
  55. package/dist/design-system/design-system.esm.js +1 -1
  56. package/dist/design-system/p-662ce409.entry.js +1 -0
  57. package/dist/design-system/{p-2fb9a5e6.entry.js → p-ad822c82.entry.js} +1 -1
  58. package/dist/design-system/p-c0198e3a.entry.js +1 -0
  59. package/dist/esm/sd-chip-input.entry.js +6 -7
  60. package/dist/esm/sd-ghost-button_3.entry.js +6 -1
  61. package/dist/esm/sd-pagination_4.entry.js +38 -8
  62. package/hydrate/index.js +50 -16
  63. package/hydrate/index.mjs +50 -16
  64. package/package.json +1 -1
  65. package/dist/components/p-DyfR6eGl.js +0 -1
  66. package/dist/design-system/p-210123b1.entry.js +0 -1
  67. package/dist/design-system/p-a49cf337.entry.js +0 -1
@@ -105,7 +105,7 @@ const CHIP_INPUT_SUGGESTIONS = {
105
105
  emptyLineHeight: '20px',
106
106
  };
107
107
 
108
- const sdChipInputCss = () => `sd-chip-input{display:inline-flex}sd-chip-input .sd-chip-input{position:relative;width:100%;isolation:isolate;min-height:var(--sd-chip-input-min-height);display:flex;flex-flow:row wrap;align-items:center;gap:var(--sd-chip-input-chip-gap);padding:var(--sd-chip-input-padding-y) var(--sd-chip-input-padding-x);cursor:text}sd-chip-input .sd-chip-input__reset{display:inline-flex;align-items:center;gap:var(--sd-chip-input-reset-gap);flex-shrink:0}sd-chip-input .sd-chip-input__divider{display:inline-block;width:1px;height:12px;background-color:var(--sd-chip-input-divider-color);flex-shrink:0}sd-chip-input .sd-chip-input__max-count{font-size:var(--sd-chip-input-max-count-font-size);font-weight:var(--sd-chip-input-max-count-font-weight);color:var(--sd-chip-input-max-count-color);white-space:nowrap;flex-shrink:0}sd-chip-input .sd-chip-input__field{flex:0 0 auto;display:inline-grid;grid-template-columns:minmax(0, max-content);align-items:center;min-width:1ch;max-width:100%;height:var(--sd-chip-input-field-height);box-sizing:border-box;padding:0;border:none;border-radius:0;background:transparent;overflow:hidden}sd-chip-input .sd-chip-input__field::after{content:attr(data-value);grid-area:1/1;visibility:hidden;white-space:pre;font-size:var(--sd-chip-input-field-font-size);line-height:var(--sd-chip-input-field-line-height);font-weight:var(--sd-chip-input-field-font-weight);font-family:var(--sd-chip-input-field-font-family)}sd-chip-input .sd-chip-input__field--filled{padding:0 var(--sd-chip-input-field-padding-x);border:var(--sd-chip-input-field-border-width) solid var(--sd-chip-input-field-border-color);border-radius:var(--sd-chip-input-field-radius);background:var(--sd-chip-input-field-bg)}sd-chip-input .sd-chip-input__field--empty{position:absolute;top:0;left:0;width:0;height:0;min-width:0;overflow:hidden}sd-chip-input .sd-chip-input__input{grid-area:1/1;width:100%;min-width:1ch;height:var(--sd-chip-input-field-height);margin:0;padding:0;border:none;outline:none;overflow:hidden;text-overflow:ellipsis;background:transparent;font-size:var(--sd-chip-input-field-font-size);line-height:var(--sd-chip-input-field-line-height);font-weight:var(--sd-chip-input-field-font-weight);font-family:var(--sd-chip-input-field-font-family);color:var(--sd-chip-input-field-content)}sd-chip-input .sd-chip-input__input[disabled]{cursor:not-allowed;pointer-events:none}sd-chip-input .sd-chip-input__input::placeholder{color:var(--sd-chip-input-placeholder-color)}sd-chip-input .sd-chip-input__suggestions{display:flex;flex-direction:column;box-sizing:border-box;background:white;border-radius:var(--sd-chip-input-suggestions-radius);box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);max-height:var(--sd-chip-input-suggestions-max-height);min-height:0;overflow-y:auto;overflow-x:hidden;outline:none}sd-chip-input .sd-chip-input__suggestion-item{display:flex;flex-shrink:0;align-items:center;gap:var(--sd-chip-input-suggestion-gap);padding:var(--sd-chip-input-suggestion-padding-y) var(--sd-chip-input-suggestion-padding-right) var(--sd-chip-input-suggestion-padding-y) var(--sd-chip-input-suggestion-padding-x);font-size:var(--sd-chip-input-suggestion-font-size);line-height:var(--sd-chip-input-suggestion-line-height);font-weight:var(--sd-chip-input-suggestion-font-weight);font-family:var(--sd-chip-input-suggestion-font-family);color:var(--sd-chip-input-suggestion-color);cursor:pointer;user-select:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}sd-chip-input .sd-chip-input__suggestion-item--active{background:var(--sd-chip-input-suggestion-bg-hover);color:var(--sd-chip-input-suggestion-color-hover);font-weight:var(--sd-chip-input-suggestion-font-weight-selected)}sd-chip-input .sd-chip-input__suggestion-item--selected{cursor:default;overflow:visible;text-overflow:unset}sd-chip-input .sd-chip-input__suggestions-empty{padding:12px;text-align:center;font-size:var(--sd-chip-input-suggestions-empty-font-size);line-height:var(--sd-chip-input-suggestions-empty-line-height);font-family:var(--sd-chip-input-suggestion-font-family);color:var(--sd-chip-input-suggestions-empty-color)}`;
108
+ const sdChipInputCss = () => `sd-chip-input{display:inline-flex}sd-chip-input sd-portal{display:none}sd-chip-input .sd-chip-input{position:relative;width:100%;isolation:isolate;min-height:var(--sd-chip-input-min-height);display:flex;flex-flow:row wrap;align-items:center;gap:var(--sd-chip-input-chip-gap);padding:var(--sd-chip-input-padding-y) var(--sd-chip-input-padding-x);cursor:text}sd-chip-input .sd-chip-input__reset{display:inline-flex;align-items:center;gap:var(--sd-chip-input-reset-gap);flex-shrink:0}sd-chip-input .sd-chip-input__divider{display:inline-block;width:1px;height:12px;background-color:var(--sd-chip-input-divider-color);flex-shrink:0}sd-chip-input .sd-chip-input__max-count{font-size:var(--sd-chip-input-max-count-font-size);font-weight:var(--sd-chip-input-max-count-font-weight);color:var(--sd-chip-input-max-count-color);white-space:nowrap;flex-shrink:0}sd-chip-input .sd-chip-input__field{flex:0 0 auto;display:inline-grid;grid-template-columns:minmax(0, max-content);align-items:center;min-width:1ch;max-width:100%;height:var(--sd-chip-input-field-height);box-sizing:border-box;padding:0;border:none;border-radius:0;background:transparent;overflow:hidden}sd-chip-input .sd-chip-input__field::after{content:attr(data-value);grid-area:1/1;visibility:hidden;white-space:pre;font-size:var(--sd-chip-input-field-font-size);line-height:var(--sd-chip-input-field-line-height);font-weight:var(--sd-chip-input-field-font-weight);font-family:var(--sd-chip-input-field-font-family)}sd-chip-input .sd-chip-input__field--filled{padding:0 var(--sd-chip-input-field-padding-x);border:var(--sd-chip-input-field-border-width) solid var(--sd-chip-input-field-border-color);border-radius:var(--sd-chip-input-field-radius);background:var(--sd-chip-input-field-bg)}sd-chip-input .sd-chip-input__field--empty{position:absolute;top:0;left:0;width:0;height:0;min-width:0;overflow:hidden}sd-chip-input .sd-chip-input__input{grid-area:1/1;width:100%;min-width:1ch;height:var(--sd-chip-input-field-height);margin:0;padding:0;border:none;outline:none;overflow:hidden;text-overflow:ellipsis;background:transparent;font-size:var(--sd-chip-input-field-font-size);line-height:var(--sd-chip-input-field-line-height);font-weight:var(--sd-chip-input-field-font-weight);font-family:var(--sd-chip-input-field-font-family);color:var(--sd-chip-input-field-content)}sd-chip-input .sd-chip-input__input[disabled]{cursor:not-allowed;pointer-events:none}sd-chip-input .sd-chip-input__input::placeholder{color:var(--sd-chip-input-placeholder-color)}sd-chip-input .sd-chip-input__suggestions{display:flex;flex-direction:column;box-sizing:border-box;background:white;border-radius:var(--sd-chip-input-suggestions-radius);box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);max-height:var(--sd-chip-input-suggestions-max-height);min-height:0;overflow-y:auto;overflow-x:hidden;outline:none}sd-chip-input .sd-chip-input__suggestion-item{display:flex;flex-shrink:0;align-items:center;gap:var(--sd-chip-input-suggestion-gap);padding:var(--sd-chip-input-suggestion-padding-y) var(--sd-chip-input-suggestion-padding-right) var(--sd-chip-input-suggestion-padding-y) var(--sd-chip-input-suggestion-padding-x);font-size:var(--sd-chip-input-suggestion-font-size);line-height:var(--sd-chip-input-suggestion-line-height);font-weight:var(--sd-chip-input-suggestion-font-weight);font-family:var(--sd-chip-input-suggestion-font-family);color:var(--sd-chip-input-suggestion-color);cursor:pointer;user-select:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}sd-chip-input .sd-chip-input__suggestion-item--active{background:var(--sd-chip-input-suggestion-bg-hover);color:var(--sd-chip-input-suggestion-color-hover);font-weight:var(--sd-chip-input-suggestion-font-weight-selected)}sd-chip-input .sd-chip-input__suggestion-item--selected{cursor:default;overflow:visible;text-overflow:unset}sd-chip-input .sd-chip-input__suggestions-empty{padding:12px;text-align:center;font-size:var(--sd-chip-input-suggestions-empty-font-size);line-height:var(--sd-chip-input-suggestions-empty-line-height);font-family:var(--sd-chip-input-suggestion-font-family);color:var(--sd-chip-input-suggestions-empty-color)}`;
109
109
 
110
110
  const SdChipInput = class {
111
111
  constructor(hostRef) {
@@ -280,7 +280,6 @@ const SdChipInput = class {
280
280
  this.update.emit(next);
281
281
  this.inputEvent.emit('');
282
282
  this.inputEl?.focus();
283
- this.suppressRecommendations = true;
284
283
  };
285
284
  handleChipRemove = (index) => {
286
285
  const next = this.internalValues.filter((_, i) => i !== index);
@@ -544,7 +543,7 @@ const SdChipInput = class {
544
543
  fontFamily: CHIP_INPUT_SUGGESTIONS.itemFontFamily,
545
544
  color: CHIP_INPUT_SUGGESTIONS.emptyColor,
546
545
  };
547
- return (index.h("sd-field", { key: 'bab9babd5b7eca9dd7885bf58a6f024315a37083', name: this.name, label: this.label, labelWidth: this.labelWidth, hint: this.hint, errorMessage: this.errorMessage, rules: [this.duplicateRule, ...(this.rules ?? [])], error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, width: this.width, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: cssVars, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, index.h("div", { key: 'c16e35b63fdf9f5c1927a5b9057d21f8b0e46139', class: "sd-chip-input", ref: el => (this.chipInputRef = el), onClick: this.handleContainerClick }, (this.internalValues ?? []).map((value, i) => (index.h("sd-chip", { key: i, value: value, error: this.getChipError(i), disabled: this.getChipDisabled(i), editable: false, onSdRemove: () => this.handleChipRemove(i) }))), !isMaxReached && (index.h("div", { key: '1332b6fad4f0b739c069f7bccd3dcbfc5c875f50', class: {
546
+ return (index.h("sd-field", { key: '5f654a66d1ba404b156c0fabcebd5006d033f67a', name: this.name, label: this.label, labelWidth: this.labelWidth, hint: this.hint, errorMessage: this.errorMessage, rules: [this.duplicateRule, ...(this.rules ?? [])], error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, width: this.width, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: cssVars, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, index.h("div", { key: 'c1b4648298f16f4d7ee5b4ef8b75da7ae380c70d', class: "sd-chip-input", ref: el => (this.chipInputRef = el), onClick: this.handleContainerClick }, (this.internalValues ?? []).map((value, i) => (index.h("sd-chip", { key: i, value: value, error: this.getChipError(i), disabled: this.getChipDisabled(i), editable: false, onSdRemove: () => this.handleChipRemove(i) }))), !isMaxReached && (index.h("div", { key: 'b838efe46b7b62be09c3ac5acc8c3d522d2859bf', class: {
548
547
  'sd-chip-input__field': true,
549
548
  'sd-chip-input__field--filled': this.inputValue !== '',
550
549
  'sd-chip-input__field--empty': this.inputValue === '' && this.internalValues.length > 0 && !this.focused,
@@ -552,12 +551,12 @@ const SdChipInput = class {
552
551
  ? this.inputValue
553
552
  : this.internalValues.length === 0
554
553
  ? this.placeholder
555
- : '' }, index.h("input", { key: '35f295a0a24099e20bd26bb1d2e3a185bd8c25d8', ref: el => (this.inputEl = el), class: "sd-chip-input__input", placeholder: this.internalValues.length === 0 ? this.placeholder : '', disabled: this.disabled, size: 1, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur }))), showResetArea && (
554
+ : '' }, index.h("input", { key: '6d29024fd020e9a7e2ff2c68eb64aa6b1790f7c5', ref: el => (this.inputEl = el), class: "sd-chip-input__input", placeholder: this.internalValues.length === 0 ? this.placeholder : '', disabled: this.disabled, size: 1, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur }))), showResetArea && (
556
555
  // eslint-disable-next-line jsx-a11y/no-static-element-interactions
557
- index.h("div", { key: 'b39992f79810a813ede76ce872ebe9c31519dbb4', class: "sd-chip-input__reset",
556
+ index.h("div", { key: 'e816bb2bab75cb2f2862913d3e18b4c8ea6e3d1b', class: "sd-chip-input__reset",
558
557
  // 리셋 버튼 클릭 시 input blur → portal unmount → refocus → 새 portal mount로
559
558
  // 두 wrapper가 body에 잠깐 겹치는 타이밍 이슈를 방지한다.
560
- onMouseDown: e => e.preventDefault() }, this.inputValue === '' && index.h("span", { key: '937540ca5cc07803909bfc09292d585551be303d', class: "sd-chip-input__divider" }), this.maxCount != null && (index.h("span", { key: 'a3f869713a596bbddaaccfcd5a4e9b4cdf1c46ea', class: "sd-chip-input__max-count" }, "\uCD5C\uB300 ", this.maxCount, "\uAC1C")), this.useReset && this.internalValues.length > 0 && (index.h("sd-text-link", { key: '802b77a069e80168a71fa59a32e18fd2987a295c', icon: "reset", iconColor: CHIP_INPUT_RESET.iconColor, label: "\uC785\uB825 \uCD08\uAE30\uD654", underline: true, disabled: this.disabled, style: { '--sd-text-link-color': CHIP_INPUT_RESET.labelColor }, onSdClick: this.handleResetInput })))), showDropdown && (index.h("sd-portal", { key: '78a2efd9e4f499b8f6596895c713ca98db92f90c', open: showDropdown, parentRef: this.chipInputRef ?? null, viewportPadding: SdChipInput.SUGGESTIONS_VIEWPORT_PADDING, onSdClose: this.closeSuggestions }, index.h("div", { key: 'c001a796c5a256507a558ca9f01839c70f19ad2b', class: "sd-chip-input__suggestions", role: "listbox", style: suggestionBoxStyle }, isDropdownLoading && (index.h("div", { key: 'b69431229b2deb89281b4520cacd585c04335c7d', class: "sd-chip-input__suggestions-empty", style: suggestionEmptyStyle }, "\uBD88\uB7EC\uC624\uB294 \uC911...")), showRecommendations ? (index.h("div", { style: {
559
+ onMouseDown: e => e.preventDefault() }, this.inputValue === '' && index.h("span", { key: '1c53892f50b7f7c3ce2bdb681dc745b5922bef48', class: "sd-chip-input__divider" }), this.maxCount != null && (index.h("span", { key: '07efa515dce065f89642966da96cb4c4b90d6da9', class: "sd-chip-input__max-count" }, "\uCD5C\uB300 ", this.maxCount, "\uAC1C")), this.useReset && this.internalValues.length > 0 && (index.h("sd-text-link", { key: 'a021bbe5ec6e0a74b58b758ec33088be7c2bbb00', icon: "reset", iconColor: CHIP_INPUT_RESET.iconColor, label: "\uC785\uB825 \uCD08\uAE30\uD654", underline: true, disabled: this.disabled, style: { '--sd-text-link-color': CHIP_INPUT_RESET.labelColor }, onSdClick: this.handleResetInput })))), index.h("sd-portal", { key: '3b6b9044053fca449a225d68125a25796e4b3e20', open: showDropdown, parentRef: this.chipInputRef ?? null, viewportPadding: SdChipInput.SUGGESTIONS_VIEWPORT_PADDING, onSdClose: this.closeSuggestions }, index.h("div", { key: '9095dc0dfb4755b430910f6b5c43196f0aa24501', class: "sd-chip-input__suggestions", role: "listbox", style: suggestionBoxStyle }, isDropdownLoading && (index.h("div", { key: '82aa5105a054a76ca3d8da78ef519bd8fc78f122', class: "sd-chip-input__suggestions-empty", style: suggestionEmptyStyle }, "\uBD88\uB7EC\uC624\uB294 \uC911...")), showRecommendations ? (index.h("div", { style: {
561
560
  display: 'flex',
562
561
  flexWrap: 'wrap',
563
562
  gap: '8px',
@@ -601,7 +600,7 @@ const SdChipInput = class {
601
600
  if (!isSelected)
602
601
  this.addChip(item);
603
602
  } }, index.h("span", { style: { flex: '1' } }, item), isSelected && (index.h("sd-icon", { name: "check", size: "12", style: { color: '#0075FF', flexShrink: '0' } }))));
604
- }))))))));
603
+ })))))));
605
604
  }
606
605
  static get watchers() { return {
607
606
  "values": [{
@@ -457,9 +457,13 @@ const SdPortal = class {
457
457
  }
458
458
  // 외부 클릭 감지
459
459
  handleMouseDown(e) {
460
+ if (!this.open)
461
+ return;
460
462
  this.isInsideClick = this.isInsideTarget(e.target);
461
463
  }
462
464
  handleWindowClick(e) {
465
+ if (!this.open)
466
+ return;
463
467
  if (this.isInsideClick) {
464
468
  this.isInsideClick = false;
465
469
  return;
@@ -469,7 +473,7 @@ const SdPortal = class {
469
473
  this.close.emit();
470
474
  }
471
475
  render() {
472
- return index.h("slot", { key: '628b6a8231a1a7bf16206510374c066fdf8a8796' });
476
+ return index.h("slot", { key: '0b01050e7c1ab2b648bf1118aec27140ff1aed4c' });
473
477
  }
474
478
  static get watchers() { return {
475
479
  "open": [{
@@ -477,6 +481,7 @@ const SdPortal = class {
477
481
  }]
478
482
  }; }
479
483
  };
484
+ SdPortal.style = `:host { display: none !important; }`;
480
485
 
481
486
  const tag = {
482
487
  xs: {
@@ -234,7 +234,7 @@ const SdTbody = class {
234
234
  };
235
235
  SdTbody.style = sdTbodyCss();
236
236
 
237
- const sdTheadCss = () => `sd-thead{display:contents}sd-thead *{box-sizing:border-box}.thead{display:table-header-group;height:var(--table-header-height, 36px)}.thead--sticky{position:sticky;top:0;z-index:120}.tr{display:table-row;width:100%}.th{display:table-cell;background:var(--table-header-bg, #F5FAFF);height:var(--table-header-height, 36px);padding:0 var(--table-header-padding-x, 16px);font-family:var(--table-header-font-family, inherit);font-weight:var(--table-header-font-weight, 500);font-size:var(--table-header-font-size, 12px);line-height:var(--table-header-line-height, 20px);text-decoration:var(--table-header-text-decoration, none);vertical-align:middle;border-bottom:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);-webkit-user-select:none;user-select:none;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.th--selected{position:relative;width:var(--table-selectable-width, 48px) !important;max-width:var(--table-selectable-width, 48px) !important;min-width:var(--table-selectable-width, 48px) !important;text-align:center}.th--selected sd-checkbox label{position:relative}.th--selected sd-checkbox label:before{content:"";position:absolute;inset:-6px}.th.sticky-left{position:sticky;background-color:var(--table-header-bg, #F5FAFF);z-index:110 !important;left:var(--sticky-left-offset, 0)}.th.sticky-right{position:sticky;background-color:var(--table-header-bg, #F5FAFF);z-index:110 !important;right:var(--sticky-right-offset, 0)}.th.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:0;pointer-events:none;transition:opacity 0.2s}.th.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:0;pointer-events:none;transition:opacity 0.2s}.th.sticky-left-edge.is-scrolled-left{overflow:visible}.th.sticky-left-edge.is-scrolled-left:after{opacity:1}.th.sticky-right-edge.is-scrolled-right{overflow:visible}.th.sticky-right-edge.is-scrolled-right:after{opacity:1}.th__content{display:flex;flex-flow:row nowrap;align-items:center;gap:var(--table-header-gap, 4px)}.th__content--left{justify-content:flex-start}.th__content--center{justify-content:center}.th__content--right{justify-content:flex-end}.th__content--label{white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.th__bar{position:absolute;top:50%;right:0;transform:translateY(-50%);width:var(--table-border-width, 1px);height:var(--table-header-resizer-height, 16px);z-index:3;background-color:var(--table-header-resizer-color, #CCCCCC)}.th__dropdown-trigger{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px;padding:0;border:none;background:transparent;cursor:pointer;color:inherit;border-radius:2px}.th__dropdown-trigger sd-icon{transition:transform 0.15s ease}.th__dropdown-trigger--open sd-icon{transform:rotate(180deg)}.th__resizer{position:absolute;top:50%;right:0;transform:translateY(-50%);width:4px;height:var(--table-header-resizer-height, 16px);cursor:col-resize;z-index:3;border-left:var(--table-border-width, 1px) solid var(--table-header-resizer-color, #CCCCCC);border-right:var(--table-border-width, 1px) solid var(--table-header-resizer-color, #CCCCCC)}.th__resizer--left{right:auto;left:0}`;
237
+ const sdTheadCss = () => `sd-thead{display:contents}sd-thead *{box-sizing:border-box}.thead{display:table-header-group;height:var(--table-header-height, 36px)}.thead--sticky{position:sticky;top:0;z-index:120}.tr{display:table-row;width:100%}.th{display:table-cell;background:var(--table-header-bg, #F5FAFF);height:var(--table-header-height, 36px);padding:0 var(--table-header-padding-x, 16px);font-family:var(--table-header-font-family, inherit);font-weight:var(--table-header-font-weight, 500);font-size:var(--table-header-font-size, 12px);line-height:var(--table-header-line-height, 20px);text-decoration:var(--table-header-text-decoration, none);vertical-align:middle;border-bottom:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);-webkit-user-select:none;user-select:none;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.th--selected{position:relative;width:var(--table-selectable-width, 48px) !important;max-width:var(--table-selectable-width, 48px) !important;min-width:var(--table-selectable-width, 48px) !important;text-align:center}.th--selected sd-checkbox label{position:relative}.th--selected sd-checkbox label:before{content:"";position:absolute;inset:-6px}.th.sticky-left{position:sticky;background-color:var(--table-header-bg, #F5FAFF);z-index:110 !important;left:var(--sticky-left-offset, 0)}.th.sticky-right{position:sticky;background-color:var(--table-header-bg, #F5FAFF);z-index:110 !important;right:var(--sticky-right-offset, 0)}.th.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:0;pointer-events:none;transition:opacity 0.2s}.th.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:0;pointer-events:none;transition:opacity 0.2s}.th.sticky-left-edge.is-scrolled-left{overflow:visible}.th.sticky-left-edge.is-scrolled-left:after{opacity:1}.th.sticky-right-edge.is-scrolled-right{overflow:visible}.th.sticky-right-edge.is-scrolled-right:after{opacity:1}.th__content{display:flex;flex-flow:row nowrap;align-items:center;gap:var(--table-header-gap, 4px)}.th__content--left{justify-content:flex-start}.th__content--center{justify-content:center}.th__content--right{justify-content:flex-end}.th__content--label{white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.th__bar{position:absolute;top:50%;right:0;transform:translateY(-50%);width:var(--table-border-width, 1px);height:var(--table-header-resizer-height, 16px);z-index:3;background-color:var(--table-header-resizer-color, #CCCCCC)}.th--has-dropdown{cursor:pointer}.th__dropdown-trigger{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px;padding:0;border:none;background:transparent;cursor:pointer;color:inherit;border-radius:2px}.th__dropdown-trigger sd-icon{transition:transform 0.15s ease}.th__dropdown-trigger--open sd-icon{transform:rotate(180deg)}.th__resizer{position:absolute;top:50%;right:0;transform:translateY(-50%);width:4px;height:var(--table-header-resizer-height, 16px);cursor:col-resize;z-index:3;border-left:var(--table-border-width, 1px) solid var(--table-header-resizer-color, #CCCCCC);border-right:var(--table-border-width, 1px) solid var(--table-header-resizer-color, #CCCCCC)}.th__resizer--left{right:auto;left:0}`;
238
238
 
239
239
  const SdThead = class {
240
240
  constructor(hostRef) {
@@ -495,21 +495,41 @@ const SdThead = class {
495
495
  'sticky-left': true,
496
496
  'sticky-left-edge': idx === stickyLeftCount - 1,
497
497
  'is-scrolled-left': idx === stickyLeftCount - 1 && this._scrolledLeft,
498
- }, style: { ...col.thStyle, ...this.getStickyStyle(idx) }, ref: col.hasDropdown === true ? (el => { this.dropdownThRefs[col.name] = el; }) : undefined }, index.h("div", { class: `th__content th__content--${col.align || 'left'}` }, index.h("div", { class: "th__content--label" }, col.label), col.icon && (index.h("sd-icon", { name: col.icon, size: "12", color: sdTable_config.resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (index.h("sd-icon", { name: sdTable_config.resolveSortIconName(col.sort), size: "12", color: sdTable_config.resolveTableIconColor(sdTable_config.resolveSortIconName(col.sort), col.iconColor), onClick: () => this.handleColumnSort(col), style: { cursor: 'pointer' } })), col.tooltip && (index.h("sd-tooltip", { ...col.tooltipOptions }, index.h("div", { slot: "content" }, col.tooltip.map(text => (index.h("p", null, text)))))), col.hasDropdown === true && (index.h("button", { class: {
498
+ 'th--has-dropdown': col.hasDropdown === true,
499
+ }, style: { ...col.thStyle, ...this.getStickyStyle(idx) }, ref: col.hasDropdown === true
500
+ ? el => {
501
+ this.dropdownThRefs[col.name] = el;
502
+ }
503
+ : undefined, onClick: col.hasDropdown === true ? () => this.toggleDropdown(col.name) : undefined }, index.h("div", { class: `th__content th__content--${col.align || 'left'}` }, index.h("div", { class: "th__content--label" }, col.label), col.icon && (index.h("sd-icon", { name: col.icon, size: "12", color: sdTable_config.resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (index.h("sd-icon", { name: sdTable_config.resolveSortIconName(col.sort), size: "12", color: sdTable_config.resolveTableIconColor(sdTable_config.resolveSortIconName(col.sort), col.iconColor), onClick: (e) => {
504
+ e.stopPropagation();
505
+ this.handleColumnSort(col);
506
+ }, style: { cursor: 'pointer' } })), col.tooltip && (index.h("sd-tooltip", { ...col.tooltipOptions }, index.h("div", { slot: "content" }, col.tooltip.map(text => (index.h("p", null, text)))))), col.hasDropdown === true && (index.h("button", { class: {
499
507
  'th__dropdown-trigger': true,
500
508
  'th__dropdown-trigger--open': dropdownOpenMap[col.name] === true,
501
- }, ref: el => { dropdownRefs[col.name] = el; }, onClick: () => this.toggleDropdown(col.name), "aria-haspopup": "listbox", "aria-expanded": dropdownOpenMap[col.name] === true ? 'true' : 'false' }, index.h("sd-icon", { name: "chevronDown", size: "12" })))), this._resizable && idx !== lastColIdx && (
509
+ }, ref: el => {
510
+ dropdownRefs[col.name] = el;
511
+ }, "aria-haspopup": "listbox", "aria-expanded": dropdownOpenMap[col.name] === true ? 'true' : 'false' }, index.h("sd-icon", { name: "caretDown", size: "12" })))), this._resizable && idx !== lastColIdx && (
502
512
  // column resize 는 마우스 드래그 전용 인터랙션이라 키보드 핸들러를 두지 않는다.
503
513
  // eslint-disable-next-line jsx-a11y/no-static-element-interactions
504
514
  index.h("div", { class: "th__resizer", onMouseDown: (evt) => this.handleResize(idx, evt) }))))), middleCols.map((col, relativeIdx) => {
505
515
  const actualColIdx = stickyLeftCount + relativeIdx;
506
516
  return (index.h("th", { key: col.name, class: {
507
- th: true,
517
+ 'th': true,
508
518
  [`${col.thClass}`]: Boolean(col.thClass),
509
- }, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) }, ref: col.hasDropdown === true ? (el => { this.dropdownThRefs[col.name] = el; }) : undefined }, index.h("div", { class: `th__content th__content--${col.align || 'left'}` }, index.h("div", { class: "th__content--label" }, col.label), col.icon && (index.h("sd-icon", { name: col.icon, size: "12", color: sdTable_config.resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (index.h("sd-icon", { name: sdTable_config.resolveSortIconName(col.sort), size: "12", color: sdTable_config.resolveTableIconColor(sdTable_config.resolveSortIconName(col.sort), col.iconColor), onClick: () => this.handleColumnSort(col), style: { cursor: 'pointer' } })), col.tooltip && (index.h("sd-tooltip", { ...col.tooltipOptions }, index.h("div", { slot: "content" }, col.tooltip.map(text => (index.h("p", null, text)))))), col.hasDropdown === true && (index.h("button", { class: {
519
+ 'th--has-dropdown': col.hasDropdown === true,
520
+ }, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) }, ref: col.hasDropdown === true
521
+ ? el => {
522
+ this.dropdownThRefs[col.name] = el;
523
+ }
524
+ : undefined, onClick: col.hasDropdown === true ? () => this.toggleDropdown(col.name) : undefined }, index.h("div", { class: `th__content th__content--${col.align || 'left'}` }, index.h("div", { class: "th__content--label" }, col.label), col.icon && (index.h("sd-icon", { name: col.icon, size: "12", color: sdTable_config.resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (index.h("sd-icon", { name: sdTable_config.resolveSortIconName(col.sort), size: "12", color: sdTable_config.resolveTableIconColor(sdTable_config.resolveSortIconName(col.sort), col.iconColor), onClick: (e) => {
525
+ e.stopPropagation();
526
+ this.handleColumnSort(col);
527
+ }, style: { cursor: 'pointer' } })), col.tooltip && (index.h("sd-tooltip", { ...col.tooltipOptions }, index.h("div", { slot: "content" }, col.tooltip.map(text => (index.h("p", null, text)))))), col.hasDropdown === true && (index.h("button", { class: {
510
528
  'th__dropdown-trigger': true,
511
529
  'th__dropdown-trigger--open': this.dropdownOpenMap[col.name] === true,
512
- }, ref: el => { this.dropdownRefs[col.name] = el; }, onClick: () => this.toggleDropdown(col.name), "aria-haspopup": "listbox", "aria-expanded": this.dropdownOpenMap[col.name] === true ? 'true' : 'false' }, index.h("sd-icon", { name: "chevronDown", size: "12" })))), this._resizable && actualColIdx !== lastColIdx && (
530
+ }, ref: el => {
531
+ this.dropdownRefs[col.name] = el;
532
+ }, "aria-haspopup": "listbox", "aria-expanded": this.dropdownOpenMap[col.name] === true ? 'true' : 'false' }, index.h("sd-icon", { name: "caretDown", size: "12" })))), this._resizable && actualColIdx !== lastColIdx && (
513
533
  // column resize 는 마우스 드래그 전용 인터랙션이라 키보드 핸들러를 두지 않는다.
514
534
  // eslint-disable-next-line jsx-a11y/no-static-element-interactions
515
535
  index.h("div", { class: "th__resizer", onMouseDown: (evt) => this.handleResize(actualColIdx, evt) }))));
@@ -521,10 +541,20 @@ const SdThead = class {
521
541
  'sticky-right': true,
522
542
  'sticky-right-edge': relativeIdx === 0,
523
543
  'is-scrolled-right': relativeIdx === 0 && this._scrolledRight,
524
- }, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) }, ref: col.hasDropdown === true ? (el => { this.dropdownThRefs[col.name] = el; }) : undefined }, index.h("div", { class: `th__content th__content--${col.align || 'left'}` }, index.h("div", { class: "th__content--label" }, col.label), col.icon && (index.h("sd-icon", { name: col.icon, size: "12", color: sdTable_config.resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (index.h("sd-icon", { name: sdTable_config.resolveSortIconName(col.sort), size: "12", color: sdTable_config.resolveTableIconColor(sdTable_config.resolveSortIconName(col.sort), col.iconColor), onClick: () => this.handleColumnSort(col), style: { cursor: 'pointer' } })), col.tooltip && (index.h("sd-tooltip", { ...col.tooltipOptions }, index.h("div", { slot: "content" }, col.tooltip.map(text => (index.h("p", null, text)))))), col.hasDropdown === true && (index.h("button", { class: {
544
+ 'th--has-dropdown': col.hasDropdown === true,
545
+ }, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) }, ref: col.hasDropdown === true
546
+ ? el => {
547
+ this.dropdownThRefs[col.name] = el;
548
+ }
549
+ : undefined, onClick: col.hasDropdown === true ? () => this.toggleDropdown(col.name) : undefined }, index.h("div", { class: `th__content th__content--${col.align || 'left'}` }, index.h("div", { class: "th__content--label" }, col.label), col.icon && (index.h("sd-icon", { name: col.icon, size: "12", color: sdTable_config.resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (index.h("sd-icon", { name: sdTable_config.resolveSortIconName(col.sort), size: "12", color: sdTable_config.resolveTableIconColor(sdTable_config.resolveSortIconName(col.sort), col.iconColor), onClick: (e) => {
550
+ e.stopPropagation();
551
+ this.handleColumnSort(col);
552
+ }, style: { cursor: 'pointer' } })), col.tooltip && (index.h("sd-tooltip", { ...col.tooltipOptions }, index.h("div", { slot: "content" }, col.tooltip.map(text => (index.h("p", null, text)))))), col.hasDropdown === true && (index.h("button", { class: {
525
553
  'th__dropdown-trigger': true,
526
554
  'th__dropdown-trigger--open': this.dropdownOpenMap[col.name] === true,
527
- }, ref: el => { this.dropdownRefs[col.name] = el; }, onClick: () => this.toggleDropdown(col.name), "aria-haspopup": "listbox", "aria-expanded": this.dropdownOpenMap[col.name] === true ? 'true' : 'false' }, index.h("sd-icon", { name: "chevronDown", size: "12" })))), this._resizable && (
555
+ }, ref: el => {
556
+ this.dropdownRefs[col.name] = el;
557
+ }, "aria-haspopup": "listbox", "aria-expanded": this.dropdownOpenMap[col.name] === true ? 'true' : 'false' }, index.h("sd-icon", { name: "caretDown", size: "12" })))), this._resizable && (
528
558
  // column resize 는 마우스 드래그 전용 인터랙션이라 키보드 핸들러를 두지 않는다.
529
559
  // eslint-disable-next-line jsx-a11y/no-static-element-interactions
530
560
  index.h("div", { class: "th__resizer th__resizer--left", onMouseDown: (evt) => this.handleResize(actualColIdx, evt, true) }))));
@@ -1,6 +1,9 @@
1
1
  sd-chip-input {
2
2
  display: inline-flex;
3
3
  }
4
+ sd-chip-input sd-portal {
5
+ display: none;
6
+ }
4
7
  sd-chip-input .sd-chip-input {
5
8
  position: relative;
6
9
  width: 100%;
@@ -168,7 +168,6 @@ export class SdChipInput {
168
168
  this.update.emit(next);
169
169
  this.inputEvent.emit('');
170
170
  this.inputEl?.focus();
171
- this.suppressRecommendations = true;
172
171
  };
173
172
  handleChipRemove = (index) => {
174
173
  const next = this.internalValues.filter((_, i) => i !== index);
@@ -432,7 +431,7 @@ export class SdChipInput {
432
431
  fontFamily: CHIP_INPUT_SUGGESTIONS.itemFontFamily,
433
432
  color: CHIP_INPUT_SUGGESTIONS.emptyColor,
434
433
  };
435
- return (h("sd-field", { key: 'bab9babd5b7eca9dd7885bf58a6f024315a37083', name: this.name, label: this.label, labelWidth: this.labelWidth, hint: this.hint, errorMessage: this.errorMessage, rules: [this.duplicateRule, ...(this.rules ?? [])], error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, width: this.width, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: cssVars, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, h("div", { key: 'c16e35b63fdf9f5c1927a5b9057d21f8b0e46139', class: "sd-chip-input", ref: el => (this.chipInputRef = el), onClick: this.handleContainerClick }, (this.internalValues ?? []).map((value, i) => (h("sd-chip", { key: i, value: value, error: this.getChipError(i), disabled: this.getChipDisabled(i), editable: false, onSdRemove: () => this.handleChipRemove(i) }))), !isMaxReached && (h("div", { key: '1332b6fad4f0b739c069f7bccd3dcbfc5c875f50', class: {
434
+ return (h("sd-field", { key: '5f654a66d1ba404b156c0fabcebd5006d033f67a', name: this.name, label: this.label, labelWidth: this.labelWidth, hint: this.hint, errorMessage: this.errorMessage, rules: [this.duplicateRule, ...(this.rules ?? [])], error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, width: this.width, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: cssVars, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, h("div", { key: 'c1b4648298f16f4d7ee5b4ef8b75da7ae380c70d', class: "sd-chip-input", ref: el => (this.chipInputRef = el), onClick: this.handleContainerClick }, (this.internalValues ?? []).map((value, i) => (h("sd-chip", { key: i, value: value, error: this.getChipError(i), disabled: this.getChipDisabled(i), editable: false, onSdRemove: () => this.handleChipRemove(i) }))), !isMaxReached && (h("div", { key: 'b838efe46b7b62be09c3ac5acc8c3d522d2859bf', class: {
436
435
  'sd-chip-input__field': true,
437
436
  'sd-chip-input__field--filled': this.inputValue !== '',
438
437
  'sd-chip-input__field--empty': this.inputValue === '' && this.internalValues.length > 0 && !this.focused,
@@ -440,12 +439,12 @@ export class SdChipInput {
440
439
  ? this.inputValue
441
440
  : this.internalValues.length === 0
442
441
  ? this.placeholder
443
- : '' }, h("input", { key: '35f295a0a24099e20bd26bb1d2e3a185bd8c25d8', ref: el => (this.inputEl = el), class: "sd-chip-input__input", placeholder: this.internalValues.length === 0 ? this.placeholder : '', disabled: this.disabled, size: 1, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur }))), showResetArea && (
442
+ : '' }, h("input", { key: '6d29024fd020e9a7e2ff2c68eb64aa6b1790f7c5', ref: el => (this.inputEl = el), class: "sd-chip-input__input", placeholder: this.internalValues.length === 0 ? this.placeholder : '', disabled: this.disabled, size: 1, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur }))), showResetArea && (
444
443
  // eslint-disable-next-line jsx-a11y/no-static-element-interactions
445
- h("div", { key: 'b39992f79810a813ede76ce872ebe9c31519dbb4', class: "sd-chip-input__reset",
444
+ h("div", { key: 'e816bb2bab75cb2f2862913d3e18b4c8ea6e3d1b', class: "sd-chip-input__reset",
446
445
  // 리셋 버튼 클릭 시 input blur → portal unmount → refocus → 새 portal mount로
447
446
  // 두 wrapper가 body에 잠깐 겹치는 타이밍 이슈를 방지한다.
448
- onMouseDown: e => e.preventDefault() }, this.inputValue === '' && h("span", { key: '937540ca5cc07803909bfc09292d585551be303d', class: "sd-chip-input__divider" }), this.maxCount != null && (h("span", { key: 'a3f869713a596bbddaaccfcd5a4e9b4cdf1c46ea', class: "sd-chip-input__max-count" }, "\uCD5C\uB300 ", this.maxCount, "\uAC1C")), this.useReset && this.internalValues.length > 0 && (h("sd-text-link", { key: '802b77a069e80168a71fa59a32e18fd2987a295c', icon: "reset", iconColor: CHIP_INPUT_RESET.iconColor, label: "\uC785\uB825 \uCD08\uAE30\uD654", underline: true, disabled: this.disabled, style: { '--sd-text-link-color': CHIP_INPUT_RESET.labelColor }, onSdClick: this.handleResetInput })))), showDropdown && (h("sd-portal", { key: '78a2efd9e4f499b8f6596895c713ca98db92f90c', open: showDropdown, parentRef: this.chipInputRef ?? null, viewportPadding: SdChipInput.SUGGESTIONS_VIEWPORT_PADDING, onSdClose: this.closeSuggestions }, h("div", { key: 'c001a796c5a256507a558ca9f01839c70f19ad2b', class: "sd-chip-input__suggestions", role: "listbox", style: suggestionBoxStyle }, isDropdownLoading && (h("div", { key: 'b69431229b2deb89281b4520cacd585c04335c7d', class: "sd-chip-input__suggestions-empty", style: suggestionEmptyStyle }, "\uBD88\uB7EC\uC624\uB294 \uC911...")), showRecommendations ? (h("div", { style: {
447
+ onMouseDown: e => e.preventDefault() }, this.inputValue === '' && h("span", { key: '1c53892f50b7f7c3ce2bdb681dc745b5922bef48', class: "sd-chip-input__divider" }), this.maxCount != null && (h("span", { key: '07efa515dce065f89642966da96cb4c4b90d6da9', class: "sd-chip-input__max-count" }, "\uCD5C\uB300 ", this.maxCount, "\uAC1C")), this.useReset && this.internalValues.length > 0 && (h("sd-text-link", { key: 'a021bbe5ec6e0a74b58b758ec33088be7c2bbb00', icon: "reset", iconColor: CHIP_INPUT_RESET.iconColor, label: "\uC785\uB825 \uCD08\uAE30\uD654", underline: true, disabled: this.disabled, style: { '--sd-text-link-color': CHIP_INPUT_RESET.labelColor }, onSdClick: this.handleResetInput })))), h("sd-portal", { key: '3b6b9044053fca449a225d68125a25796e4b3e20', open: showDropdown, parentRef: this.chipInputRef ?? null, viewportPadding: SdChipInput.SUGGESTIONS_VIEWPORT_PADDING, onSdClose: this.closeSuggestions }, h("div", { key: '9095dc0dfb4755b430910f6b5c43196f0aa24501', class: "sd-chip-input__suggestions", role: "listbox", style: suggestionBoxStyle }, isDropdownLoading && (h("div", { key: '82aa5105a054a76ca3d8da78ef519bd8fc78f122', class: "sd-chip-input__suggestions-empty", style: suggestionEmptyStyle }, "\uBD88\uB7EC\uC624\uB294 \uC911...")), showRecommendations ? (h("div", { style: {
449
448
  display: 'flex',
450
449
  flexWrap: 'wrap',
451
450
  gap: '8px',
@@ -489,7 +488,7 @@ export class SdChipInput {
489
488
  if (!isSelected)
490
489
  this.addChip(item);
491
490
  } }, h("span", { style: { flex: '1' } }, item), isSelected && (h("sd-icon", { name: "check", size: "12", style: { color: '#0075FF', flexShrink: '0' } }))));
492
- }))))))));
491
+ })))))));
493
492
  }
494
493
  static get is() { return "sd-chip-input"; }
495
494
  static get originalStyleUrls() {
@@ -252,9 +252,13 @@ export class SdPortal {
252
252
  }
253
253
  // 외부 클릭 감지
254
254
  handleMouseDown(e) {
255
+ if (!this.open)
256
+ return;
255
257
  this.isInsideClick = this.isInsideTarget(e.target);
256
258
  }
257
259
  handleWindowClick(e) {
260
+ if (!this.open)
261
+ return;
258
262
  if (this.isInsideClick) {
259
263
  this.isInsideClick = false;
260
264
  return;
@@ -264,9 +268,10 @@ export class SdPortal {
264
268
  this.close.emit();
265
269
  }
266
270
  render() {
267
- return h("slot", { key: '628b6a8231a1a7bf16206510374c066fdf8a8796' });
271
+ return h("slot", { key: '0b01050e7c1ab2b648bf1118aec27140ff1aed4c' });
268
272
  }
269
273
  static get is() { return "sd-portal"; }
274
+ static get styles() { return ":host { display: none !important; }"; }
270
275
  static get properties() {
271
276
  return {
272
277
  "to": {
@@ -143,6 +143,10 @@ sd-thead * {
143
143
  background-color: var(--table-header-resizer-color, #CCCCCC);
144
144
  }
145
145
 
146
+ .th--has-dropdown {
147
+ cursor: pointer;
148
+ }
149
+
146
150
  .th__dropdown-trigger {
147
151
  display: flex;
148
152
  align-items: center;
@@ -256,21 +256,41 @@ export class SdThead {
256
256
  'sticky-left': true,
257
257
  'sticky-left-edge': idx === stickyLeftCount - 1,
258
258
  'is-scrolled-left': idx === stickyLeftCount - 1 && this._scrolledLeft,
259
- }, style: { ...col.thStyle, ...this.getStickyStyle(idx) }, ref: col.hasDropdown === true ? (el => { this.dropdownThRefs[col.name] = el; }) : undefined }, h("div", { class: `th__content th__content--${col.align || 'left'}` }, h("div", { class: "th__content--label" }, col.label), col.icon && (h("sd-icon", { name: col.icon, size: "12", color: resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (h("sd-icon", { name: resolveSortIconName(col.sort), size: "12", color: resolveTableIconColor(resolveSortIconName(col.sort), col.iconColor), onClick: () => this.handleColumnSort(col), style: { cursor: 'pointer' } })), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text)))))), col.hasDropdown === true && (h("button", { class: {
259
+ 'th--has-dropdown': col.hasDropdown === true,
260
+ }, style: { ...col.thStyle, ...this.getStickyStyle(idx) }, ref: col.hasDropdown === true
261
+ ? el => {
262
+ this.dropdownThRefs[col.name] = el;
263
+ }
264
+ : undefined, onClick: col.hasDropdown === true ? () => this.toggleDropdown(col.name) : undefined }, h("div", { class: `th__content th__content--${col.align || 'left'}` }, h("div", { class: "th__content--label" }, col.label), col.icon && (h("sd-icon", { name: col.icon, size: "12", color: resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (h("sd-icon", { name: resolveSortIconName(col.sort), size: "12", color: resolveTableIconColor(resolveSortIconName(col.sort), col.iconColor), onClick: (e) => {
265
+ e.stopPropagation();
266
+ this.handleColumnSort(col);
267
+ }, style: { cursor: 'pointer' } })), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text)))))), col.hasDropdown === true && (h("button", { class: {
260
268
  'th__dropdown-trigger': true,
261
269
  'th__dropdown-trigger--open': dropdownOpenMap[col.name] === true,
262
- }, ref: el => { dropdownRefs[col.name] = el; }, onClick: () => this.toggleDropdown(col.name), "aria-haspopup": "listbox", "aria-expanded": dropdownOpenMap[col.name] === true ? 'true' : 'false' }, h("sd-icon", { name: "chevronDown", size: "12" })))), this._resizable && idx !== lastColIdx && (
270
+ }, ref: el => {
271
+ dropdownRefs[col.name] = el;
272
+ }, "aria-haspopup": "listbox", "aria-expanded": dropdownOpenMap[col.name] === true ? 'true' : 'false' }, h("sd-icon", { name: "caretDown", size: "12" })))), this._resizable && idx !== lastColIdx && (
263
273
  // column resize 는 마우스 드래그 전용 인터랙션이라 키보드 핸들러를 두지 않는다.
264
274
  // eslint-disable-next-line jsx-a11y/no-static-element-interactions
265
275
  h("div", { class: "th__resizer", onMouseDown: (evt) => this.handleResize(idx, evt) }))))), middleCols.map((col, relativeIdx) => {
266
276
  const actualColIdx = stickyLeftCount + relativeIdx;
267
277
  return (h("th", { key: col.name, class: {
268
- th: true,
278
+ 'th': true,
269
279
  [`${col.thClass}`]: Boolean(col.thClass),
270
- }, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) }, ref: col.hasDropdown === true ? (el => { this.dropdownThRefs[col.name] = el; }) : undefined }, h("div", { class: `th__content th__content--${col.align || 'left'}` }, h("div", { class: "th__content--label" }, col.label), col.icon && (h("sd-icon", { name: col.icon, size: "12", color: resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (h("sd-icon", { name: resolveSortIconName(col.sort), size: "12", color: resolveTableIconColor(resolveSortIconName(col.sort), col.iconColor), onClick: () => this.handleColumnSort(col), style: { cursor: 'pointer' } })), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text)))))), col.hasDropdown === true && (h("button", { class: {
280
+ 'th--has-dropdown': col.hasDropdown === true,
281
+ }, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) }, ref: col.hasDropdown === true
282
+ ? el => {
283
+ this.dropdownThRefs[col.name] = el;
284
+ }
285
+ : undefined, onClick: col.hasDropdown === true ? () => this.toggleDropdown(col.name) : undefined }, h("div", { class: `th__content th__content--${col.align || 'left'}` }, h("div", { class: "th__content--label" }, col.label), col.icon && (h("sd-icon", { name: col.icon, size: "12", color: resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (h("sd-icon", { name: resolveSortIconName(col.sort), size: "12", color: resolveTableIconColor(resolveSortIconName(col.sort), col.iconColor), onClick: (e) => {
286
+ e.stopPropagation();
287
+ this.handleColumnSort(col);
288
+ }, style: { cursor: 'pointer' } })), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text)))))), col.hasDropdown === true && (h("button", { class: {
271
289
  'th__dropdown-trigger': true,
272
290
  'th__dropdown-trigger--open': this.dropdownOpenMap[col.name] === true,
273
- }, ref: el => { this.dropdownRefs[col.name] = el; }, onClick: () => this.toggleDropdown(col.name), "aria-haspopup": "listbox", "aria-expanded": this.dropdownOpenMap[col.name] === true ? 'true' : 'false' }, h("sd-icon", { name: "chevronDown", size: "12" })))), this._resizable && actualColIdx !== lastColIdx && (
291
+ }, ref: el => {
292
+ this.dropdownRefs[col.name] = el;
293
+ }, "aria-haspopup": "listbox", "aria-expanded": this.dropdownOpenMap[col.name] === true ? 'true' : 'false' }, h("sd-icon", { name: "caretDown", size: "12" })))), this._resizable && actualColIdx !== lastColIdx && (
274
294
  // column resize 는 마우스 드래그 전용 인터랙션이라 키보드 핸들러를 두지 않는다.
275
295
  // eslint-disable-next-line jsx-a11y/no-static-element-interactions
276
296
  h("div", { class: "th__resizer", onMouseDown: (evt) => this.handleResize(actualColIdx, evt) }))));
@@ -282,10 +302,20 @@ export class SdThead {
282
302
  'sticky-right': true,
283
303
  'sticky-right-edge': relativeIdx === 0,
284
304
  'is-scrolled-right': relativeIdx === 0 && this._scrolledRight,
285
- }, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) }, ref: col.hasDropdown === true ? (el => { this.dropdownThRefs[col.name] = el; }) : undefined }, h("div", { class: `th__content th__content--${col.align || 'left'}` }, h("div", { class: "th__content--label" }, col.label), col.icon && (h("sd-icon", { name: col.icon, size: "12", color: resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (h("sd-icon", { name: resolveSortIconName(col.sort), size: "12", color: resolveTableIconColor(resolveSortIconName(col.sort), col.iconColor), onClick: () => this.handleColumnSort(col), style: { cursor: 'pointer' } })), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text)))))), col.hasDropdown === true && (h("button", { class: {
305
+ 'th--has-dropdown': col.hasDropdown === true,
306
+ }, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) }, ref: col.hasDropdown === true
307
+ ? el => {
308
+ this.dropdownThRefs[col.name] = el;
309
+ }
310
+ : undefined, onClick: col.hasDropdown === true ? () => this.toggleDropdown(col.name) : undefined }, h("div", { class: `th__content th__content--${col.align || 'left'}` }, h("div", { class: "th__content--label" }, col.label), col.icon && (h("sd-icon", { name: col.icon, size: "12", color: resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (h("sd-icon", { name: resolveSortIconName(col.sort), size: "12", color: resolveTableIconColor(resolveSortIconName(col.sort), col.iconColor), onClick: (e) => {
311
+ e.stopPropagation();
312
+ this.handleColumnSort(col);
313
+ }, style: { cursor: 'pointer' } })), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text)))))), col.hasDropdown === true && (h("button", { class: {
286
314
  'th__dropdown-trigger': true,
287
315
  'th__dropdown-trigger--open': this.dropdownOpenMap[col.name] === true,
288
- }, ref: el => { this.dropdownRefs[col.name] = el; }, onClick: () => this.toggleDropdown(col.name), "aria-haspopup": "listbox", "aria-expanded": this.dropdownOpenMap[col.name] === true ? 'true' : 'false' }, h("sd-icon", { name: "chevronDown", size: "12" })))), this._resizable && (
316
+ }, ref: el => {
317
+ this.dropdownRefs[col.name] = el;
318
+ }, "aria-haspopup": "listbox", "aria-expanded": this.dropdownOpenMap[col.name] === true ? 'true' : 'false' }, h("sd-icon", { name: "caretDown", size: "12" })))), this._resizable && (
289
319
  // column resize 는 마우스 드래그 전용 인터랙션이라 키보드 핸들러를 두지 않는다.
290
320
  // eslint-disable-next-line jsx-a11y/no-static-element-interactions
291
321
  h("div", { class: "th__resizer th__resizer--left", onMouseDown: (evt) => this.handleResize(actualColIdx, evt, true) }))));
@@ -1 +1 @@
1
- import{p as e,H as t,c as s,h as a,t as r}from"./p-CEVDmQdt.js";import{n as d}from"./p-CCwNgVmC.js";import{i as o}from"./p-e0ABNkP6.js";import{d as i}from"./p-C3rOud8J.js";import{d as l}from"./p-BtVuPyhl.js";import{d as n}from"./p-DMvWCQfX.js";import{d as h}from"./p-C4_oeGm-.js";import{d as c}from"./p-BnhzUsGP.js";import{d as u}from"./p-D_SxeDkS.js";import{d as p}from"./p-D8T1XeGP.js";import{d as x}from"./p-C-Cje7aS.js";const m={paddingX:o.textinput.sm.paddingX,paddingY:o.textinput.sm.paddingY,radius:o.textinput.sm.radius,fontSize:o.textinput.sm.typography.fontSize,lineHeight:o.textinput.sm.typography.lineHeight,fontWeight:o.textinput.sm.typography.fontWeight},b={text:o.textinput.text,bg:o.textinput.bg,border:o.textinput.border,resizer:o.textinput.resizer},f=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.input=s(this,"sdUpdate",7),this.focus=s(this,"sdFocus",7),this.blur=s(this,"sdBlur",7)}get host(){return this}value=null;placeholder="입력해 주세요.";disabled=!1;readonly=!1;autoFocus=!1;textareaClass="";textareaStyle={};maxLength;rows;spellcheck=!1;width="";label="";labelWidth="";addonLabel="";addonAlign="start";hint="";errorMessage="";icon=void 0;labelTooltip="";labelTooltipProps=null;rules=[];error=!1;status;focused=!1;hovered=!1;internalValue=null;nativeEl=void 0;formField;name=d();input;focus;blur;valueChanged(e){this.internalValue=e}internalValueChanged(e){e!==this.value&&(this.value=e,this.input?.emit(this.value))}async sdGetNativeElement(){return this.nativeEl||null}async sdValidate(){this.formField?.sdValidate()}async sdReset(){this.formField?.sdReset()}async sdResetValidate(){this.formField?.sdResetValidation()}async sdFocus(){this.formField?.sdFocus()}componentWillLoad(){null!=this.value&&(this.internalValue=this.value)}componentDidLoad(){this.autoFocus&&this.nativeEl?.focus()}handleInput=e=>{this.internalValue=e.target.value};handleFocus=async(e,t)=>{this.focused="focus"===e,"blur"===e?(this.rules&&this.rules.length>0&&await(this.formField?.sdValidate()),this.blur?.emit(t)):this.focus?.emit(t)};render(){return a("sd-field",{key:"08375e678b02c61a201b70214772e8a354280601",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:e=>this.formField=e,onMouseEnter:()=>this.hovered=!0,onMouseLeave:()=>this.hovered=!1,style:{"--sd-textarea-font-size":`${m.fontSize}px`,"--sd-textarea-line-height":`${m.lineHeight}px`,"--sd-textarea-font-weight":m.fontWeight,"--sd-textarea-padding-x":`${m.paddingX}px`,"--sd-textarea-padding-y":`${m.paddingY}px`,"--sd-textarea-radius":`${m.radius}px`,"--sd-textarea-text-color":b.text.default,"--sd-textarea-placeholder-color":b.text.placeholder,"--sd-textarea-disabled-color":b.text.disabled,"--sd-textarea-bg-color":b.bg.default,"--sd-textarea-disabled-bg-color":b.bg.disabled,"--sd-textarea-border-color":b.border.default,"--sd-textarea-resizer-color":b.resizer.color,"--sd-system-size-field-sm-height":"auto","--sd-system-radius-field-sm":`${m.radius}px`}},a("div",{key:"5c9462b2b0c8f0078c34b044b8cd626dfd9f18be",class:"sd-textarea__content"},a("textarea",{key:"a5f0d448791be4b75388c02e8a356486c0487d78",name:this.name,ref:e=>this.nativeEl=e,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:e=>this.handleFocus("focus",e),onBlur:e=>this.handleFocus("blur",e),style:this.textareaStyle})))}static get watchers(){return{value:[{valueChanged:0}],internalValue:[{internalValueChanged:0}]}}static get style(){return"sd-textarea{display:inline-flex}sd-textarea .sd-textarea__content{width:100%;display:flex}sd-textarea .sd-textarea__content .sd-textarea__native{width:100%;min-height:100px;border:none;outline:none;background:transparent;padding:var(--sd-textarea-padding-y) var(--sd-textarea-padding-x);font-family:inherit;font-size:var(--sd-textarea-font-size);line-height:var(--sd-textarea-line-height);font-weight:var(--sd-textarea-font-weight);color:var(--sd-textarea-text-color);resize:vertical}sd-textarea .sd-textarea__content .sd-textarea__native::placeholder{color:var(--sd-textarea-placeholder-color)}sd-textarea .sd-textarea__content .sd-textarea__native:disabled{cursor:not-allowed;color:var(--sd-textarea-disabled-color)}sd-textarea .sd-textarea__content .sd-textarea__native[readonly]{color:var(--sd-system-color-field-text-read-only)}"}},[512,"sd-textarea",{value:[1025],placeholder:[1],disabled:[4],readonly:[4],autoFocus:[4,"auto-focus"],textareaClass:[1,"textarea-class"],textareaStyle:[16],maxLength:[2,"max-length"],rows:[2],spellcheck:[4],width:[8],label:[1],labelWidth:[8,"label-width"],addonLabel:[1,"addon-label"],addonAlign:[1,"addon-align"],hint:[1],errorMessage:[1,"error-message"],icon:[16],labelTooltip:[1,"label-tooltip"],labelTooltipProps:[16],rules:[16],error:[1028],status:[1],focused:[1028],hovered:[1028],name:[1],internalValue:[32],sdGetNativeElement:[64],sdValidate:[64],sdReset:[64],sdResetValidate:[64],sdFocus:[64]},void 0,{value:[{valueChanged:0}],internalValue:[{internalValueChanged:0}]}]);function g(){"undefined"!=typeof customElements&&["sd-textarea","sd-button","sd-field","sd-floating-portal","sd-ghost-button","sd-icon","sd-portal","sd-tag","sd-tooltip"].forEach((e=>{switch(e){case"sd-textarea":customElements.get(r(e))||customElements.define(r(e),f);break;case"sd-button":customElements.get(r(e))||i();break;case"sd-field":customElements.get(r(e))||l();break;case"sd-floating-portal":customElements.get(r(e))||n();break;case"sd-ghost-button":customElements.get(r(e))||h();break;case"sd-icon":customElements.get(r(e))||c();break;case"sd-portal":customElements.get(r(e))||u();break;case"sd-tag":customElements.get(r(e))||p();break;case"sd-tooltip":customElements.get(r(e))||x()}}))}export{f as S,g as d}
1
+ import{p as e,H as t,c as s,h as a,t as r}from"./p-CEVDmQdt.js";import{n as d}from"./p-CCwNgVmC.js";import{i as o}from"./p-e0ABNkP6.js";import{d as i}from"./p-C3rOud8J.js";import{d as l}from"./p-0eogwabp.js";import{d as n}from"./p-DMvWCQfX.js";import{d as h}from"./p-BlN03Cqm.js";import{d as c}from"./p-BnhzUsGP.js";import{d as u}from"./p-BckY1cBy.js";import{d as p}from"./p-D8T1XeGP.js";import{d as x}from"./p-BGpxtouI.js";const m={paddingX:o.textinput.sm.paddingX,paddingY:o.textinput.sm.paddingY,radius:o.textinput.sm.radius,fontSize:o.textinput.sm.typography.fontSize,lineHeight:o.textinput.sm.typography.lineHeight,fontWeight:o.textinput.sm.typography.fontWeight},b={text:o.textinput.text,bg:o.textinput.bg,border:o.textinput.border,resizer:o.textinput.resizer},f=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.input=s(this,"sdUpdate",7),this.focus=s(this,"sdFocus",7),this.blur=s(this,"sdBlur",7)}get host(){return this}value=null;placeholder="입력해 주세요.";disabled=!1;readonly=!1;autoFocus=!1;textareaClass="";textareaStyle={};maxLength;rows;spellcheck=!1;width="";label="";labelWidth="";addonLabel="";addonAlign="start";hint="";errorMessage="";icon=void 0;labelTooltip="";labelTooltipProps=null;rules=[];error=!1;status;focused=!1;hovered=!1;internalValue=null;nativeEl=void 0;formField;name=d();input;focus;blur;valueChanged(e){this.internalValue=e}internalValueChanged(e){e!==this.value&&(this.value=e,this.input?.emit(this.value))}async sdGetNativeElement(){return this.nativeEl||null}async sdValidate(){this.formField?.sdValidate()}async sdReset(){this.formField?.sdReset()}async sdResetValidate(){this.formField?.sdResetValidation()}async sdFocus(){this.formField?.sdFocus()}componentWillLoad(){null!=this.value&&(this.internalValue=this.value)}componentDidLoad(){this.autoFocus&&this.nativeEl?.focus()}handleInput=e=>{this.internalValue=e.target.value};handleFocus=async(e,t)=>{this.focused="focus"===e,"blur"===e?(this.rules&&this.rules.length>0&&await(this.formField?.sdValidate()),this.blur?.emit(t)):this.focus?.emit(t)};render(){return a("sd-field",{key:"08375e678b02c61a201b70214772e8a354280601",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:e=>this.formField=e,onMouseEnter:()=>this.hovered=!0,onMouseLeave:()=>this.hovered=!1,style:{"--sd-textarea-font-size":`${m.fontSize}px`,"--sd-textarea-line-height":`${m.lineHeight}px`,"--sd-textarea-font-weight":m.fontWeight,"--sd-textarea-padding-x":`${m.paddingX}px`,"--sd-textarea-padding-y":`${m.paddingY}px`,"--sd-textarea-radius":`${m.radius}px`,"--sd-textarea-text-color":b.text.default,"--sd-textarea-placeholder-color":b.text.placeholder,"--sd-textarea-disabled-color":b.text.disabled,"--sd-textarea-bg-color":b.bg.default,"--sd-textarea-disabled-bg-color":b.bg.disabled,"--sd-textarea-border-color":b.border.default,"--sd-textarea-resizer-color":b.resizer.color,"--sd-system-size-field-sm-height":"auto","--sd-system-radius-field-sm":`${m.radius}px`}},a("div",{key:"5c9462b2b0c8f0078c34b044b8cd626dfd9f18be",class:"sd-textarea__content"},a("textarea",{key:"a5f0d448791be4b75388c02e8a356486c0487d78",name:this.name,ref:e=>this.nativeEl=e,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:e=>this.handleFocus("focus",e),onBlur:e=>this.handleFocus("blur",e),style:this.textareaStyle})))}static get watchers(){return{value:[{valueChanged:0}],internalValue:[{internalValueChanged:0}]}}static get style(){return"sd-textarea{display:inline-flex}sd-textarea .sd-textarea__content{width:100%;display:flex}sd-textarea .sd-textarea__content .sd-textarea__native{width:100%;min-height:100px;border:none;outline:none;background:transparent;padding:var(--sd-textarea-padding-y) var(--sd-textarea-padding-x);font-family:inherit;font-size:var(--sd-textarea-font-size);line-height:var(--sd-textarea-line-height);font-weight:var(--sd-textarea-font-weight);color:var(--sd-textarea-text-color);resize:vertical}sd-textarea .sd-textarea__content .sd-textarea__native::placeholder{color:var(--sd-textarea-placeholder-color)}sd-textarea .sd-textarea__content .sd-textarea__native:disabled{cursor:not-allowed;color:var(--sd-textarea-disabled-color)}sd-textarea .sd-textarea__content .sd-textarea__native[readonly]{color:var(--sd-system-color-field-text-read-only)}"}},[512,"sd-textarea",{value:[1025],placeholder:[1],disabled:[4],readonly:[4],autoFocus:[4,"auto-focus"],textareaClass:[1,"textarea-class"],textareaStyle:[16],maxLength:[2,"max-length"],rows:[2],spellcheck:[4],width:[8],label:[1],labelWidth:[8,"label-width"],addonLabel:[1,"addon-label"],addonAlign:[1,"addon-align"],hint:[1],errorMessage:[1,"error-message"],icon:[16],labelTooltip:[1,"label-tooltip"],labelTooltipProps:[16],rules:[16],error:[1028],status:[1],focused:[1028],hovered:[1028],name:[1],internalValue:[32],sdGetNativeElement:[64],sdValidate:[64],sdReset:[64],sdResetValidate:[64],sdFocus:[64]},void 0,{value:[{valueChanged:0}],internalValue:[{internalValueChanged:0}]}]);function g(){"undefined"!=typeof customElements&&["sd-textarea","sd-button","sd-field","sd-floating-portal","sd-ghost-button","sd-icon","sd-portal","sd-tag","sd-tooltip"].forEach((e=>{switch(e){case"sd-textarea":customElements.get(r(e))||customElements.define(r(e),f);break;case"sd-button":customElements.get(r(e))||i();break;case"sd-field":customElements.get(r(e))||l();break;case"sd-floating-portal":customElements.get(r(e))||n();break;case"sd-ghost-button":customElements.get(r(e))||h();break;case"sd-icon":customElements.get(r(e))||c();break;case"sd-portal":customElements.get(r(e))||u();break;case"sd-tag":customElements.get(r(e))||p();break;case"sd-tooltip":customElements.get(r(e))||x()}}))}export{f as S,g as d}
@@ -1 +1 @@
1
- import{p as e,H as d,h as s,t as i}from"./p-CEVDmQdt.js";import{f as l}from"./p-BOJJ_sQS.js";import{d as t}from"./p-C3rOud8J.js";import{d as o}from"./p-DMvWCQfX.js";import{d as r}from"./p-C4_oeGm-.js";import{d as a}from"./p-BnhzUsGP.js";import{d as f}from"./p-D_SxeDkS.js";import{d as n}from"./p-D8T1XeGP.js";import{d as h}from"./p-C-Cje7aS.js";const c={start:"flex-start",center:"center",end:"flex-end"},p=l.field.label.sm,b=l.field.label.md,m={sm:{height:p.height,gap:p.gap,icon:p.icon,fontSize:p.typography.fontSize,lineHeight:p.typography.lineHeight,fontWeight:p.typography.fontWeight},md:{height:b.height,gap:b.gap,icon:b.icon,fontSize:b.typography.fontSize,lineHeight:b.typography.lineHeight,fontWeight:b.typography.fontWeight}},g=["sd-input","sd-barcode-input","sd-textarea","sd-number-input","sd-select","sd-file-picker","sd-date-picker","sd-date-range-picker","sd-chip-input"],_=e(class extends d{constructor(e){super(),!1!==e&&this.__registerHost()}get el(){return this}name="";rules=[];error=!1;disabled=!1;readonly=!1;hovered=!1;focused=!1;status;hint="";errorMessage="";width="";size="sm";label="";labelWidth="";addonLabel="";addonAlign="start";icon=void 0;labelTooltip="";labelTooltipProps=null;errorMsg="";hostElement=null;get value(){return this.hostElement?.value??null}get fieldStatus(){let e="";return this.disabled?(e="disabled",`sd-field--${e}`):this.readonly?(e="readonly",`sd-field--${e}`):this.focused?(e="focus",`sd-field--${e}`):(this.hovered&&(e="hover"),void 0!==this.status&&(e=this.status),this.error&&(e="error"),""!==e?`sd-field--${e}`:"")}componentDidLoad(){this.hostElement=this.findHostElement(),this.registerToForm()}disconnectedCallback(){this.unregisterFromForm()}findHostElement(){for(const e of g){const d=this.el.closest(e);if(d&&"value"in d)return d}return null}registerToForm(){const e=this.el.closest("sd-form");e&&"function"==typeof e.componentOnReady&&e.componentOnReady().then((e=>{e.sdRegisterField(this)}))}unregisterFromForm(){if(""===this.name)return;const e=this.el.closest("sd-form");e?.componentOnReady().then((e=>{e.sdUnregisterField(this)}))}async sdValidate(){if(!this.rules||0===this.rules.length)return!0;for(const e of this.rules){const d=e(this.value??"");if(!0!==d)return this.setError(!0,d),!1}return this.setError(!1,""),!0}async sdReset(){this.hostElement&&(this.hostElement.value=null),this.setError(!1,"")}async sdResetValidation(){this.setError(!1,"")}async sdFocus(){this.hostElement?.focus?.(),this.hostElement?.scrollIntoView({behavior:"smooth",block:"center"})}setError(e,d){this.errorMsg=d,this.hostElement&&(this.hostElement.error=e)}render(){const e=this.addonLabel,d=l.field.addonLabel,i=this.size in m?this.size:"sm",t=m[i],o={"--sd-field-wrapper-height":`var(--sd-system-size-field-${i}-height)`,"--sd-field-control-radius":`var(--sd-system-radius-field-${i})`,"--sd-field-label-margin-right":`var(--sd-system-space-field-${i}-gap)`},r={"--sd-field-error-message-color":l.field.errorMessage.color,"--sd-field-error-message-font-size":`${l.field.errorMessage.typography.fontSize}px`,"--sd-field-error-message-line-height":`${l.field.errorMessage.typography.lineHeight}px`,"--sd-field-hint-color":l.field.hint.color,"--sd-field-hint-font-size":`${l.field.hint.typography.fontSize}px`,"--sd-field-hint-line-height":`${l.field.hint.typography.lineHeight}px`,"--sd-field-message-gap":`${l.field.contents.gap}px`},a=""!==this.label?{"--sd-field-label-height":`${t.height}px`,"--sd-field-label-gap":`${t.gap}px`,"--sd-field-label-font-size":`${t.fontSize}px`,"--sd-field-label-line-height":`${t.lineHeight}px`,"--sd-field-label-font-weight":t.fontWeight,...""!==this.labelWidth&&0!==this.labelWidth?{"--sd-field-label-width":"number"==typeof this.labelWidth?`${this.labelWidth}px`:this.labelWidth}:{}}:{},f=""!==e?{"--sd-field-addon-padding-x":`${d.paddingX}px`,"--sd-field-addon-font-size":`${d.typography.fontSize}px`,"--sd-field-addon-line-height":`${d.typography.lineHeight}px`,"--sd-field-addon-font-weight":d.typography.fontWeight,"--sd-field-addon-bg":d.bg,"--sd-field-addon-border-color":this.disabled?d.border.disabled:d.border.default,"--sd-field-addon-gap":`${d.gap}px`,"--sd-field-addon-border-width":`${d.border.width}px`,"--sd-field-addon-justify":c[this.addonAlign]??c.start,...""!==this.labelWidth&&0!==this.labelWidth?{"--sd-field-addon-width":"number"==typeof this.labelWidth?`${this.labelWidth}px`:this.labelWidth}:{}}:{};return s("div",{key:"45a5353fb451aa829092ca34f3212d6e62f1843a",class:{"sd-field":!0,"sd-field--has-label":""!==this.label,"sd-field--has-addon":""!==e,[this.fieldStatus]:""!==this.fieldStatus},style:{...o,...a,...f,...r}},s("div",{key:"75f3be0dae03f292b66980b7c92d574bd0bda988",class:"sd-field__wrapper"},this.renderLabel(this.label),s("div",{key:"69b9827a2599a2e01fad26224b4b9800fde6e347",class:"sd-field__main",style:""!==this.width&&0!==this.width?{width:"number"==typeof this.width?`${this.width}px`:this.width,flex:"none"}:{}},s("div",{key:"ba0e98fd309c32ee73b2ba92f956358d51790f58",class:{"sd-field__control":!0,"sd-field__control--has-addon":""!==e}},e&&s("div",{key:"8f941150147145368d340c4be0e3636ef67060c3",class:"sd-field__addon"},this.icon&&s("sd-icon",{key:"78d5d092094c0f3e8562127d77821dadb2a21b6a",name:this.icon.name,size:this.icon.size??Number(m[this.size in m?this.size:"sm"].icon),color:this.icon.color,rotate:this.icon.rotate}),e),s("slot",{key:"b494ab4550ae739096957cad46cb95a8c71f5a0b"})),""!==this.errorMsg||""!==this.errorMessage?s("div",{class:"sd-field__error-message"},""!==this.errorMsg?this.errorMsg:this.errorMessage):""!==this.hint&&s("div",{class:"sd-field__hint"},this.hint))))}renderLabel(e){return null==e||""===e?null:s("label",{class:"sd-field__label"},this.icon&&s("sd-icon",{name:this.icon.name,size:this.icon.size??Number(m[this.size in m?this.size:"sm"].icon),color:this.icon.color,rotate:this.icon.rotate,class:"sd-field__label__icon"}),s("div",{class:"sd-field__label__text"},e),this.labelTooltip&&s("sd-tooltip",{class:"sd-field__label__tooltip",...this.labelTooltipProps},this.labelTooltip))}static get style(){return"sd-field{display:inline-flex;flex-flow:column nowrap;height:fit-content;width:100%}sd-field .sd-field *:focus,sd-field .sd-field *:focus-visible,sd-field .sd-field *:focus-within{outline:none !important}sd-field .sd-field.sd-field--disabled{cursor:not-allowed}sd-field .sd-field.sd-field--disabled .sd-field__wrapper{cursor:not-allowed !important}sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__label-inside{border-color:#CCCCCC;color:#888888;cursor:not-allowed !important}sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__control{background-color:#E1E1E1;border-color:#CCCCCC;color:#888888;cursor:not-allowed !important}sd-field .sd-field.sd-field--readonly .sd-field__wrapper .sd-field__control{background-color:var(--sd-system-color-field-bg-read-only);color:var(--sd-system-color-field-text-read-only)}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label{display:flex;align-items:center;flex-shrink:0;width:var(--sd-field-label-width, auto);height:var(--sd-field-label-height);margin-right:var(--sd-field-label-margin-right)}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__icon{margin-right:var(--sd-field-label-gap);flex-shrink:0}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__text{font-size:var(--sd-field-label-font-size);line-height:var(--sd-field-label-line-height);font-weight:var(--sd-field-label-font-weight);color:var(--sd-system-color-field-text-default);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__tooltip{margin-left:var(--sd-field-label-gap);flex-shrink:0}sd-field .sd-field--has-addon .sd-field__control .sd-field__addon{display:flex;gap:var(--sd-field-addon-gap);align-items:center;justify-content:var(--sd-field-addon-justify, flex-start);white-space:nowrap;box-sizing:border-box;flex-shrink:0;width:var(--sd-field-addon-width, auto);padding:0 var(--sd-field-addon-padding-x);font-size:var(--sd-field-addon-font-size);line-height:var(--sd-field-addon-line-height);font-weight:var(--sd-field-addon-font-weight);background:var(--sd-field-addon-bg);border-right:var(--sd-field-addon-border-width) solid var(--sd-field-addon-border-color);border-radius:calc(var(--sd-field-control-radius) - 1px) 0 0 calc(var(--sd-field-control-radius) - 1px)}sd-field .sd-field__wrapper{width:100%;display:flex;align-items:flex-start;flex-flow:row nowrap;position:relative;color:var(--sd-system-color-field-text-default);-webkit-user-select:none;user-select:none}sd-field .sd-field__wrapper .sd-field__main{flex:1;min-width:0;display:flex;flex-direction:column}sd-field .sd-field__wrapper .sd-field__control{position:relative;height:var(--sd-field-wrapper-height);display:flex;min-width:0;border:1px solid var(--sd-system-color-field-border-default);border-radius:var(--sd-field-control-radius);background:var(--sd-system-color-field-bg-default)}sd-field .sd-field--error .sd-field__wrapper .sd-field__control:not(:hover){border:1px solid var(--sd-system-color-field-border-danger) !important}sd-field .sd-field.sd-field--pass .sd-field__wrapper .sd-field__control{border:1px solid var(--sd-system-color-field-border-success) !important}sd-field .sd-field:not(.sd-field--disabled):not(.sd-field--readonly) .sd-field__wrapper .sd-field__control:hover{border:1px solid var(--sd-system-color-field-border-focus) !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}sd-field .sd-field.sd-field--focus:not(.sd-field--readonly) .sd-field__wrapper .sd-field__control{border:1px solid var(--sd-system-color-field-border-focus) !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}sd-field .sd-field .sd-field__error-message{color:var(--sd-field-error-message-color);font-size:var(--sd-field-error-message-font-size);line-height:var(--sd-field-error-message-line-height);margin-top:var(--sd-field-message-gap)}sd-field .sd-field .sd-field__hint{color:var(--sd-field-hint-color);font-size:var(--sd-field-hint-font-size);line-height:var(--sd-field-hint-line-height);margin-top:var(--sd-field-message-gap)}"}},[772,"sd-field",{name:[1],rules:[16],error:[1028],disabled:[1028],readonly:[1028],hovered:[1028],focused:[1028],status:[1],hint:[1],errorMessage:[1,"error-message"],width:[8],size:[513],label:[1],labelWidth:[8,"label-width"],addonLabel:[1,"addon-label"],addonAlign:[1,"addon-align"],icon:[16],labelTooltip:[1,"label-tooltip"],labelTooltipProps:[16],errorMsg:[32],sdValidate:[64],sdReset:[64],sdResetValidation:[64],sdFocus:[64]}]);function u(){"undefined"!=typeof customElements&&["sd-field","sd-button","sd-floating-portal","sd-ghost-button","sd-icon","sd-portal","sd-tag","sd-tooltip"].forEach((e=>{switch(e){case"sd-field":customElements.get(i(e))||customElements.define(i(e),_);break;case"sd-button":customElements.get(i(e))||t();break;case"sd-floating-portal":customElements.get(i(e))||o();break;case"sd-ghost-button":customElements.get(i(e))||r();break;case"sd-icon":customElements.get(i(e))||a();break;case"sd-portal":customElements.get(i(e))||f();break;case"sd-tag":customElements.get(i(e))||n();break;case"sd-tooltip":customElements.get(i(e))||h()}}))}export{_ as S,u as d}
1
+ import{p as e,H as d,h as s,t as i}from"./p-CEVDmQdt.js";import{f as l}from"./p-BOJJ_sQS.js";import{d as t}from"./p-C3rOud8J.js";import{d as o}from"./p-DMvWCQfX.js";import{d as r}from"./p-BlN03Cqm.js";import{d as a}from"./p-BnhzUsGP.js";import{d as f}from"./p-BckY1cBy.js";import{d as n}from"./p-D8T1XeGP.js";import{d as h}from"./p-BGpxtouI.js";const c={start:"flex-start",center:"center",end:"flex-end"},p=l.field.label.sm,b=l.field.label.md,m={sm:{height:p.height,gap:p.gap,icon:p.icon,fontSize:p.typography.fontSize,lineHeight:p.typography.lineHeight,fontWeight:p.typography.fontWeight},md:{height:b.height,gap:b.gap,icon:b.icon,fontSize:b.typography.fontSize,lineHeight:b.typography.lineHeight,fontWeight:b.typography.fontWeight}},g=["sd-input","sd-barcode-input","sd-textarea","sd-number-input","sd-select","sd-file-picker","sd-date-picker","sd-date-range-picker","sd-chip-input"],u=e(class extends d{constructor(e){super(),!1!==e&&this.__registerHost()}get el(){return this}name="";rules=[];error=!1;disabled=!1;readonly=!1;hovered=!1;focused=!1;status;hint="";errorMessage="";width="";size="sm";label="";labelWidth="";addonLabel="";addonAlign="start";icon=void 0;labelTooltip="";labelTooltipProps=null;errorMsg="";hostElement=null;get value(){return this.hostElement?.value??null}get fieldStatus(){let e="";return this.disabled?(e="disabled",`sd-field--${e}`):this.readonly?(e="readonly",`sd-field--${e}`):this.focused?(e="focus",`sd-field--${e}`):(this.hovered&&(e="hover"),void 0!==this.status&&(e=this.status),this.error&&(e="error"),""!==e?`sd-field--${e}`:"")}componentDidLoad(){this.hostElement=this.findHostElement(),this.registerToForm()}disconnectedCallback(){this.unregisterFromForm()}findHostElement(){for(const e of g){const d=this.el.closest(e);if(d&&"value"in d)return d}return null}registerToForm(){const e=this.el.closest("sd-form");e&&"function"==typeof e.componentOnReady&&e.componentOnReady().then((e=>{e.sdRegisterField(this)}))}unregisterFromForm(){if(""===this.name)return;const e=this.el.closest("sd-form");e?.componentOnReady().then((e=>{e.sdUnregisterField(this)}))}async sdValidate(){if(!this.rules||0===this.rules.length)return!0;for(const e of this.rules){const d=e(this.value??"");if(!0!==d)return this.setError(!0,d),!1}return this.setError(!1,""),!0}async sdReset(){this.hostElement&&(this.hostElement.value=null),this.setError(!1,"")}async sdResetValidation(){this.setError(!1,"")}async sdFocus(){this.hostElement?.focus?.(),this.hostElement?.scrollIntoView({behavior:"smooth",block:"center"})}setError(e,d){this.errorMsg=d,this.hostElement&&(this.hostElement.error=e)}render(){const e=this.addonLabel,d=l.field.addonLabel,i=this.size in m?this.size:"sm",t=m[i],o={"--sd-field-wrapper-height":`var(--sd-system-size-field-${i}-height)`,"--sd-field-control-radius":`var(--sd-system-radius-field-${i})`,"--sd-field-label-margin-right":`var(--sd-system-space-field-${i}-gap)`},r={"--sd-field-error-message-color":l.field.errorMessage.color,"--sd-field-error-message-font-size":`${l.field.errorMessage.typography.fontSize}px`,"--sd-field-error-message-line-height":`${l.field.errorMessage.typography.lineHeight}px`,"--sd-field-hint-color":l.field.hint.color,"--sd-field-hint-font-size":`${l.field.hint.typography.fontSize}px`,"--sd-field-hint-line-height":`${l.field.hint.typography.lineHeight}px`,"--sd-field-message-gap":`${l.field.contents.gap}px`},a=""!==this.label?{"--sd-field-label-height":`${t.height}px`,"--sd-field-label-gap":`${t.gap}px`,"--sd-field-label-font-size":`${t.fontSize}px`,"--sd-field-label-line-height":`${t.lineHeight}px`,"--sd-field-label-font-weight":t.fontWeight,...""!==this.labelWidth&&0!==this.labelWidth?{"--sd-field-label-width":"number"==typeof this.labelWidth?`${this.labelWidth}px`:this.labelWidth}:{}}:{},f=""!==e?{"--sd-field-addon-padding-x":`${d.paddingX}px`,"--sd-field-addon-font-size":`${d.typography.fontSize}px`,"--sd-field-addon-line-height":`${d.typography.lineHeight}px`,"--sd-field-addon-font-weight":d.typography.fontWeight,"--sd-field-addon-bg":d.bg,"--sd-field-addon-border-color":this.disabled?d.border.disabled:d.border.default,"--sd-field-addon-gap":`${d.gap}px`,"--sd-field-addon-border-width":`${d.border.width}px`,"--sd-field-addon-justify":c[this.addonAlign]??c.start,...""!==this.labelWidth&&0!==this.labelWidth?{"--sd-field-addon-width":"number"==typeof this.labelWidth?`${this.labelWidth}px`:this.labelWidth}:{}}:{};return s("div",{key:"45a5353fb451aa829092ca34f3212d6e62f1843a",class:{"sd-field":!0,"sd-field--has-label":""!==this.label,"sd-field--has-addon":""!==e,[this.fieldStatus]:""!==this.fieldStatus},style:{...o,...a,...f,...r}},s("div",{key:"75f3be0dae03f292b66980b7c92d574bd0bda988",class:"sd-field__wrapper"},this.renderLabel(this.label),s("div",{key:"69b9827a2599a2e01fad26224b4b9800fde6e347",class:"sd-field__main",style:""!==this.width&&0!==this.width?{width:"number"==typeof this.width?`${this.width}px`:this.width,flex:"none"}:{}},s("div",{key:"ba0e98fd309c32ee73b2ba92f956358d51790f58",class:{"sd-field__control":!0,"sd-field__control--has-addon":""!==e}},e&&s("div",{key:"8f941150147145368d340c4be0e3636ef67060c3",class:"sd-field__addon"},this.icon&&s("sd-icon",{key:"78d5d092094c0f3e8562127d77821dadb2a21b6a",name:this.icon.name,size:this.icon.size??Number(m[this.size in m?this.size:"sm"].icon),color:this.icon.color,rotate:this.icon.rotate}),e),s("slot",{key:"b494ab4550ae739096957cad46cb95a8c71f5a0b"})),""!==this.errorMsg||""!==this.errorMessage?s("div",{class:"sd-field__error-message"},""!==this.errorMsg?this.errorMsg:this.errorMessage):""!==this.hint&&s("div",{class:"sd-field__hint"},this.hint))))}renderLabel(e){return null==e||""===e?null:s("label",{class:"sd-field__label"},this.icon&&s("sd-icon",{name:this.icon.name,size:this.icon.size??Number(m[this.size in m?this.size:"sm"].icon),color:this.icon.color,rotate:this.icon.rotate,class:"sd-field__label__icon"}),s("div",{class:"sd-field__label__text"},e),this.labelTooltip&&s("sd-tooltip",{class:"sd-field__label__tooltip",...this.labelTooltipProps},this.labelTooltip))}static get style(){return"sd-field{display:inline-flex;flex-flow:column nowrap;height:fit-content;width:100%}sd-field .sd-field *:focus,sd-field .sd-field *:focus-visible,sd-field .sd-field *:focus-within{outline:none !important}sd-field .sd-field.sd-field--disabled{cursor:not-allowed}sd-field .sd-field.sd-field--disabled .sd-field__wrapper{cursor:not-allowed !important}sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__label-inside{border-color:#CCCCCC;color:#888888;cursor:not-allowed !important}sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__control{background-color:#E1E1E1;border-color:#CCCCCC;color:#888888;cursor:not-allowed !important}sd-field .sd-field.sd-field--readonly .sd-field__wrapper .sd-field__control{background-color:var(--sd-system-color-field-bg-read-only);color:var(--sd-system-color-field-text-read-only)}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label{display:flex;align-items:center;flex-shrink:0;width:var(--sd-field-label-width, auto);height:var(--sd-field-label-height);margin-right:var(--sd-field-label-margin-right)}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__icon{margin-right:var(--sd-field-label-gap);flex-shrink:0}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__text{font-size:var(--sd-field-label-font-size);line-height:var(--sd-field-label-line-height);font-weight:var(--sd-field-label-font-weight);color:var(--sd-system-color-field-text-default);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__tooltip{margin-left:var(--sd-field-label-gap);flex-shrink:0}sd-field .sd-field--has-addon .sd-field__control .sd-field__addon{display:flex;gap:var(--sd-field-addon-gap);align-items:center;justify-content:var(--sd-field-addon-justify, flex-start);white-space:nowrap;box-sizing:border-box;flex-shrink:0;width:var(--sd-field-addon-width, auto);padding:0 var(--sd-field-addon-padding-x);font-size:var(--sd-field-addon-font-size);line-height:var(--sd-field-addon-line-height);font-weight:var(--sd-field-addon-font-weight);background:var(--sd-field-addon-bg);border-right:var(--sd-field-addon-border-width) solid var(--sd-field-addon-border-color);border-radius:calc(var(--sd-field-control-radius) - 1px) 0 0 calc(var(--sd-field-control-radius) - 1px)}sd-field .sd-field__wrapper{width:100%;display:flex;align-items:flex-start;flex-flow:row nowrap;position:relative;color:var(--sd-system-color-field-text-default);-webkit-user-select:none;user-select:none}sd-field .sd-field__wrapper .sd-field__main{flex:1;min-width:0;display:flex;flex-direction:column}sd-field .sd-field__wrapper .sd-field__control{position:relative;height:var(--sd-field-wrapper-height);display:flex;min-width:0;border:1px solid var(--sd-system-color-field-border-default);border-radius:var(--sd-field-control-radius);background:var(--sd-system-color-field-bg-default)}sd-field .sd-field--error .sd-field__wrapper .sd-field__control:not(:hover){border:1px solid var(--sd-system-color-field-border-danger) !important}sd-field .sd-field.sd-field--pass .sd-field__wrapper .sd-field__control{border:1px solid var(--sd-system-color-field-border-success) !important}sd-field .sd-field:not(.sd-field--disabled):not(.sd-field--readonly) .sd-field__wrapper .sd-field__control:hover{border:1px solid var(--sd-system-color-field-border-focus) !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}sd-field .sd-field.sd-field--focus:not(.sd-field--readonly) .sd-field__wrapper .sd-field__control{border:1px solid var(--sd-system-color-field-border-focus) !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}sd-field .sd-field .sd-field__error-message{color:var(--sd-field-error-message-color);font-size:var(--sd-field-error-message-font-size);line-height:var(--sd-field-error-message-line-height);margin-top:var(--sd-field-message-gap)}sd-field .sd-field .sd-field__hint{color:var(--sd-field-hint-color);font-size:var(--sd-field-hint-font-size);line-height:var(--sd-field-hint-line-height);margin-top:var(--sd-field-message-gap)}"}},[772,"sd-field",{name:[1],rules:[16],error:[1028],disabled:[1028],readonly:[1028],hovered:[1028],focused:[1028],status:[1],hint:[1],errorMessage:[1,"error-message"],width:[8],size:[513],label:[1],labelWidth:[8,"label-width"],addonLabel:[1,"addon-label"],addonAlign:[1,"addon-align"],icon:[16],labelTooltip:[1,"label-tooltip"],labelTooltipProps:[16],errorMsg:[32],sdValidate:[64],sdReset:[64],sdResetValidation:[64],sdFocus:[64]}]);function _(){"undefined"!=typeof customElements&&["sd-field","sd-button","sd-floating-portal","sd-ghost-button","sd-icon","sd-portal","sd-tag","sd-tooltip"].forEach((e=>{switch(e){case"sd-field":customElements.get(i(e))||customElements.define(i(e),u);break;case"sd-button":customElements.get(i(e))||t();break;case"sd-floating-portal":customElements.get(i(e))||o();break;case"sd-ghost-button":customElements.get(i(e))||r();break;case"sd-icon":customElements.get(i(e))||a();break;case"sd-portal":customElements.get(i(e))||f();break;case"sd-tag":customElements.get(i(e))||n();break;case"sd-tooltip":customElements.get(i(e))||h()}}))}export{u as S,_ as d}
@@ -1 +1 @@
1
- import{p as t,H as s,c as e,h as o,t as a}from"./p-CEVDmQdt.js";import{d as n}from"./p-C3rOud8J.js";import{d}from"./p-C4_oeGm-.js";import{d as i}from"./p-BnhzUsGP.js";import{d as c}from"./p-D_SxeDkS.js";import{d as l}from"./p-D8T1XeGP.js";var r={bg:"#07284A",content:"#FFFFFF"},b={bg:"#FB4444",content:"#FFFFFF"},f={bg:"#FFC700",content:"#222222"},p={bg:"#00973C",content:"#FFFFFF"},u={bg:"#005CC9",content:"#FFFFFF"},m={bg:"#E6F1FF",icon:"#0075FF",text:"#222222",textLink:"#555555"};const g={default:"secondary_sm",danger:"danger_outline_sm",caution:"neutral_outline_sm",complete:"neutral_outline_sm",accent:"neutral_outline_sm",info:"secondary_sm"},h={default:{bg:r.bg,content:r.content},danger:{bg:b.bg,content:b.content},caution:{bg:f.bg,content:f.content},complete:{bg:p.bg,content:p.content},accent:{bg:u.bg,content:u.content},info:{bg:m.bg,content:m.text,icon:m.icon,linkColor:m.textLink}},_={iconSize:"16"},k=t(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.close=e(this,"sdClose",7),this.buttonClick=e(this,"sdButtonClick",7)}icon;message;link;linkLabel;buttonLabel;useClose=!1;type="default";close;buttonClick;render(){const t=h[this.type]??h.default,s=Number(_.iconSize),e=t.icon??t.content,a=t.linkColor??t.content,n=["default","caution","info"].includes(this.type),d=g[this.type]??g.default;return o("div",{key:"240ed7553fa03d18bb4384b1192d16a821be5832",style:{"--sd-toast-bg":t.bg,"--sd-toast-text":t.content,"--sd-toast-icon":e,"--sd-toast-link":a}},o("div",{key:"bdb9a45473dcab86e2dd8bb6321e7b717f93b784",class:"sd-toast",role:"status","aria-live":"polite","aria-atomic":"true"},this.icon&&o("div",{key:"2a02e47336cd6a46c7cc3560f3f82d4f10a3d211",class:"sd-toast__icon"},o("sd-icon",{key:"872cfb213c3a080fc1e5458ce53efa04c1fa8840",name:this.icon,size:s,color:e})),o("div",{key:"3a22f7518f63676e22c4faeb76873c31d6cf6b11",class:"sd-toast__content"},o("span",{key:"dd6a533b60c07bdcbdc80090d61bdf29b8879609",class:"sd-toast__message"},this.message)),this.link&&o("a",{key:"45efddf62b906e8f0b2136ad3d1131204d0b9125",href:this.link,class:"sd-toast__link",target:"_blank",rel:"noopener noreferrer"},this.linkLabel||this.link),this.buttonLabel&&o("sd-button",{key:"3729f4f21ba7e59c2702137053de946e284b226a",class:"sd-toast__button",name:d,label:this.buttonLabel,onSdClick:t=>this.buttonClick.emit(t.detail)}),this.useClose&&o("sd-ghost-button",{key:"d7f0f670aef527be6253cd70bd2b19a900ccaddd",class:"sd-toast__close",icon:"close",intent:n?"default":"inverse",ariaLabel:"close",size:"xs",onClick:()=>this.close.emit()})))}static get style(){return"sd-toast{display:block;width:fit-content;height:fit-content}sd-toast .sd-toast{display:flex;width:fit-content;align-items:center;gap:var(--sd-toast-gap, 16px);padding:var(--sd-toast-padding-y, 12px) var(--sd-toast-padding-x, 24px);border-radius:var(--sd-toast-radius, 8px);background-color:var(--sd-toast-bg);color:var(--sd-toast-text);box-shadow:2px 2px 8px 2px rgba(0, 0, 0, 0.2)}sd-toast .sd-toast__icon{display:flex;align-items:center;flex-shrink:0}sd-toast .sd-toast__content{display:flex;flex:1}sd-toast .sd-toast__message{font-size:14px;line-height:24px;font-weight:500;white-space:nowrap}sd-toast .sd-toast__link{font-size:14px;line-height:24px;font-weight:700;color:var(--sd-toast-link, var(--sd-toast-text));text-decoration:underline;cursor:pointer;transition:opacity 0.2s ease;margin-left:4px;white-space:nowrap}sd-toast .sd-toast__link:hover{opacity:0.8}sd-toast .sd-toast__button{flex-shrink:0}sd-toast .sd-toast__close{flex-shrink:0}"}},[512,"sd-toast",{icon:[1],message:[1],link:[1],linkLabel:[1,"link-label"],buttonLabel:[1,"button-label"],useClose:[4,"use-close"],type:[1]}]);function x(){"undefined"!=typeof customElements&&["sd-toast","sd-button","sd-ghost-button","sd-icon","sd-portal","sd-tag"].forEach((t=>{switch(t){case"sd-toast":customElements.get(a(t))||customElements.define(a(t),k);break;case"sd-button":customElements.get(a(t))||n();break;case"sd-ghost-button":customElements.get(a(t))||d();break;case"sd-icon":customElements.get(a(t))||i();break;case"sd-portal":customElements.get(a(t))||c();break;case"sd-tag":customElements.get(a(t))||l()}}))}export{k as S,x as d}
1
+ import{p as t,H as s,c as e,h as o,t as a}from"./p-CEVDmQdt.js";import{d as n}from"./p-C3rOud8J.js";import{d}from"./p-BlN03Cqm.js";import{d as i}from"./p-BnhzUsGP.js";import{d as c}from"./p-BckY1cBy.js";import{d as l}from"./p-D8T1XeGP.js";var r={bg:"#07284A",content:"#FFFFFF"},b={bg:"#FB4444",content:"#FFFFFF"},f={bg:"#FFC700",content:"#222222"},p={bg:"#00973C",content:"#FFFFFF"},u={bg:"#005CC9",content:"#FFFFFF"},m={bg:"#E6F1FF",icon:"#0075FF",text:"#222222",textLink:"#555555"};const g={default:"secondary_sm",danger:"danger_outline_sm",caution:"neutral_outline_sm",complete:"neutral_outline_sm",accent:"neutral_outline_sm",info:"secondary_sm"},h={default:{bg:r.bg,content:r.content},danger:{bg:b.bg,content:b.content},caution:{bg:f.bg,content:f.content},complete:{bg:p.bg,content:p.content},accent:{bg:u.bg,content:u.content},info:{bg:m.bg,content:m.text,icon:m.icon,linkColor:m.textLink}},k={iconSize:"16"},_=t(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.close=e(this,"sdClose",7),this.buttonClick=e(this,"sdButtonClick",7)}icon;message;link;linkLabel;buttonLabel;useClose=!1;type="default";close;buttonClick;render(){const t=h[this.type]??h.default,s=Number(k.iconSize),e=t.icon??t.content,a=t.linkColor??t.content,n=["default","caution","info"].includes(this.type),d=g[this.type]??g.default;return o("div",{key:"240ed7553fa03d18bb4384b1192d16a821be5832",style:{"--sd-toast-bg":t.bg,"--sd-toast-text":t.content,"--sd-toast-icon":e,"--sd-toast-link":a}},o("div",{key:"bdb9a45473dcab86e2dd8bb6321e7b717f93b784",class:"sd-toast",role:"status","aria-live":"polite","aria-atomic":"true"},this.icon&&o("div",{key:"2a02e47336cd6a46c7cc3560f3f82d4f10a3d211",class:"sd-toast__icon"},o("sd-icon",{key:"872cfb213c3a080fc1e5458ce53efa04c1fa8840",name:this.icon,size:s,color:e})),o("div",{key:"3a22f7518f63676e22c4faeb76873c31d6cf6b11",class:"sd-toast__content"},o("span",{key:"dd6a533b60c07bdcbdc80090d61bdf29b8879609",class:"sd-toast__message"},this.message)),this.link&&o("a",{key:"45efddf62b906e8f0b2136ad3d1131204d0b9125",href:this.link,class:"sd-toast__link",target:"_blank",rel:"noopener noreferrer"},this.linkLabel||this.link),this.buttonLabel&&o("sd-button",{key:"3729f4f21ba7e59c2702137053de946e284b226a",class:"sd-toast__button",name:d,label:this.buttonLabel,onSdClick:t=>this.buttonClick.emit(t.detail)}),this.useClose&&o("sd-ghost-button",{key:"d7f0f670aef527be6253cd70bd2b19a900ccaddd",class:"sd-toast__close",icon:"close",intent:n?"default":"inverse",ariaLabel:"close",size:"xs",onClick:()=>this.close.emit()})))}static get style(){return"sd-toast{display:block;width:fit-content;height:fit-content}sd-toast .sd-toast{display:flex;width:fit-content;align-items:center;gap:var(--sd-toast-gap, 16px);padding:var(--sd-toast-padding-y, 12px) var(--sd-toast-padding-x, 24px);border-radius:var(--sd-toast-radius, 8px);background-color:var(--sd-toast-bg);color:var(--sd-toast-text);box-shadow:2px 2px 8px 2px rgba(0, 0, 0, 0.2)}sd-toast .sd-toast__icon{display:flex;align-items:center;flex-shrink:0}sd-toast .sd-toast__content{display:flex;flex:1}sd-toast .sd-toast__message{font-size:14px;line-height:24px;font-weight:500;white-space:nowrap}sd-toast .sd-toast__link{font-size:14px;line-height:24px;font-weight:700;color:var(--sd-toast-link, var(--sd-toast-text));text-decoration:underline;cursor:pointer;transition:opacity 0.2s ease;margin-left:4px;white-space:nowrap}sd-toast .sd-toast__link:hover{opacity:0.8}sd-toast .sd-toast__button{flex-shrink:0}sd-toast .sd-toast__close{flex-shrink:0}"}},[512,"sd-toast",{icon:[1],message:[1],link:[1],linkLabel:[1,"link-label"],buttonLabel:[1,"button-label"],useClose:[4,"use-close"],type:[1]}]);function F(){"undefined"!=typeof customElements&&["sd-toast","sd-button","sd-ghost-button","sd-icon","sd-portal","sd-tag"].forEach((t=>{switch(t){case"sd-toast":customElements.get(a(t))||customElements.define(a(t),_);break;case"sd-button":customElements.get(a(t))||n();break;case"sd-ghost-button":customElements.get(a(t))||d();break;case"sd-icon":customElements.get(a(t))||i();break;case"sd-portal":customElements.get(a(t))||c();break;case"sd-tag":customElements.get(a(t))||l()}}))}export{_ as S,F as d}
@@ -1 +1 @@
1
- import{p as t,H as s,h as e,F as i,t as o}from"./p-CEVDmQdt.js";import{T as n}from"./p-B3bERWUt.js";import{d as a}from"./p-C3rOud8J.js";import{d as l}from"./p-DMvWCQfX.js";import{d as r}from"./p-C4_oeGm-.js";import{d as c}from"./p-BnhzUsGP.js";import{d}from"./p-D_SxeDkS.js";import{d as h}from"./p-D8T1XeGP.js";var m={bg:"#07284A",content:"#FFFFFF"},p={bg:"#FCEFEF",content:"#FB4444"},g={bg:"#FEF1EA",content:"#FF6B00"},b={bg:"#E6F1FF",content:"#0075FF"};const u={default:{bg:m.bg,content:m.content},danger:{bg:p.bg,content:p.content},warning:{bg:g.bg,content:g.content},accent:{bg:b.bg,content:b.content}},f=t(class t extends s{constructor(t){super(),!1!==t&&this.__registerHost()}get el(){return this}trigger="hover";placement="top";color="#01BB4B";tooltipType="default";icon="helpOutline";iconSize=12;label="";name="primary_sm";rightIcon;ariaLabel="";disabled=!1;type="button";useClose=!1;sdClass="";message=[];triggerClass="";triggerStyle="";showTooltip=!1;slotContentHTML="";buttonEl;triggerEl;isAnchorMode=!1;menuEl;hideTimeout;closeTimeout;static CLOSE_ANIM_MS=150;openTooltip=()=>{this.cancelHideTimer(),this.showTooltip=!0,this.menuEl&&this.menuEl.classList.remove("sd-floating-menu--closing")};closeTooltip=()=>{this.menuEl&&this.menuEl.classList.add("sd-floating-menu--closing"),this.closeTimeout=setTimeout((()=>{this.showTooltip=!1}),t.CLOSE_ANIM_MS)};startHideTimer=()=>{this.hideTimeout=setTimeout((()=>this.closeTooltip()),100)};cancelHideTimer=()=>{this.hideTimeout&&(clearTimeout(this.hideTimeout),this.hideTimeout=void 0),this.closeTimeout&&(clearTimeout(this.closeTimeout),this.closeTimeout=void 0)};get tooltipOffset(){switch(this.placement??"top"){case"top":return[0,-4];case"bottom":return[0,4];case"left":case"right":return[4,0]}}handleClose=()=>!this.useClose&&this.closeTooltip();async show(){this.openTooltip()}async hide(){this.closeTooltip()}componentWillLoad(){this.isAnchorMode=Array.from(this.el.children).some((t=>"anchor"===t.getAttribute("slot"))),this.isAnchorMode||(this.slotContentHTML=this.el.innerHTML,this.el.replaceChildren()),this.el.classList.toggle("visible",!0)}componentDidRender(){this.triggerEl&&""!==this.triggerStyle&&this.triggerEl.setAttribute("style",this.triggerStyle)}render(){const t=this.trigger??"hover",s=this.placement??"top",o=this.tooltipType??"default",a=this.icon??"helpOutline",l=this.color??"#01BB4B",r=u[o]??u.default,c=()=>this.showTooltip=!this.showTooltip,d=void 0!==this.label&&""!==this.label,h=this.isAnchorMode,m="hover"===t?{onMouseEnter:()=>this.openTooltip(),onMouseLeave:()=>!this.useClose&&this.startHideTimer()}:h||!d?{onClick:c}:{},p="click"===t&&!h&&d?{onSdClick:c}:{},g=["sd-tooltip-trigger",this.sdClass,this.triggerClass].filter((t=>void 0!==t&&""!==t)).join(" "),b=this.message&&this.message.length>0?this.message.map((t=>`<div>${t}</div>`)).join(""):this.slotContentHTML;return e(i,{key:"81d582c4c8847a0f57abf632d975461cdf07b535"},e("div",{key:"c7515fb866fa85749405bb10512e27575850eb27",ref:t=>this.triggerEl=t,class:g,...m},h?e("slot",{name:"anchor"}):d?e("sd-button",{ref:t=>this.buttonEl=t,name:this.name??"primary_sm",label:this.label,icon:a,rightIcon:this.rightIcon,ariaLabel:this.ariaLabel,disabled:this.disabled,type:this.type??"button",class:"sd-tooltip",...p}):e("sd-icon",{ref:t=>this.buttonEl=t,name:a,size:this.iconSize??12,color:l,class:"sd-tooltip"})),this.showTooltip&&e("sd-floating-portal",{key:"903aaa3723a119687e5af8120d54fb1b9e43c584",parentRef:h?this.triggerEl:this.buttonEl,onSdClose:this.handleClose,placement:s,offset:this.tooltipOffset},e("div",{key:"813e1dbf7f2d8e0378f4fcac1225341aafbd9948",ref:t=>this.menuEl=t,class:{"sd-floating-menu":!0,[`sd-floating-menu--${o}`]:!0,[`sd-floating-menu--${s}`]:!0,"sd-floating-menu--has-close":this.useClose},style:{"--sd-floating-bg":r.bg,"--sd-floating-content":r.content},onMouseEnter:()=>this.openTooltip(),onMouseLeave:()=>!this.useClose&&this.startHideTimer()},e("i",{key:"d74071d3d236382bc952ad03a05ebd77219b4ddb",class:`sd-floating-menu__arrow sd-floating-menu__arrow--${s}`},e(n,{key:"91c35bd2bc22294b7e7998965930219a43799310"})),e("div",{key:"16edd2fc6e9ad02b646c05c6404d3eb79e2a7a71",class:"sd-floating-menu__content",innerHTML:b}),this.useClose&&e("sd-ghost-button",{key:"d234906f7a4a603a8e18cef6da49f9d893adb731",class:"sd-floating-menu__close-button",icon:"close",ariaLabel:"close",size:"xxs",onClick:()=>this.closeTooltip()}))))}static get style(){return"sd-tooltip{visibility:hidden !important;display:inline-flex}sd-tooltip.visible{visibility:visible !important}sd-tooltip .sd-tooltip-trigger{display:inline-flex;position:relative;cursor:pointer;align-items:center;justify-content:center}"}},[772,"sd-tooltip",{trigger:[1],placement:[1],color:[1],tooltipType:[1,"tooltip-type"],icon:[1],iconSize:[2,"icon-size"],label:[1],name:[1],rightIcon:[1,"right-icon"],ariaLabel:[1,"aria-label"],disabled:[4],type:[1],useClose:[4,"use-close"],sdClass:[1,"sd-class"],message:[16],triggerClass:[1,"trigger-class"],triggerStyle:[1,"trigger-style"],showTooltip:[32],slotContentHTML:[32],show:[64],hide:[64]}]);function y(){"undefined"!=typeof customElements&&["sd-tooltip","sd-button","sd-floating-portal","sd-ghost-button","sd-icon","sd-portal","sd-tag"].forEach((t=>{switch(t){case"sd-tooltip":customElements.get(o(t))||customElements.define(o(t),f);break;case"sd-button":customElements.get(o(t))||a();break;case"sd-floating-portal":customElements.get(o(t))||l();break;case"sd-ghost-button":customElements.get(o(t))||r();break;case"sd-icon":customElements.get(o(t))||c();break;case"sd-portal":customElements.get(o(t))||d();break;case"sd-tag":customElements.get(o(t))||h()}}))}export{f as S,y as d}
1
+ import{p as t,H as s,h as e,F as i,t as o}from"./p-CEVDmQdt.js";import{T as n}from"./p-B3bERWUt.js";import{d as a}from"./p-C3rOud8J.js";import{d as l}from"./p-DMvWCQfX.js";import{d as r}from"./p-BlN03Cqm.js";import{d as c}from"./p-BnhzUsGP.js";import{d}from"./p-BckY1cBy.js";import{d as h}from"./p-D8T1XeGP.js";var m={bg:"#07284A",content:"#FFFFFF"},p={bg:"#FCEFEF",content:"#FB4444"},g={bg:"#FEF1EA",content:"#FF6B00"},b={bg:"#E6F1FF",content:"#0075FF"};const u={default:{bg:m.bg,content:m.content},danger:{bg:p.bg,content:p.content},warning:{bg:g.bg,content:g.content},accent:{bg:b.bg,content:b.content}},f=t(class t extends s{constructor(t){super(),!1!==t&&this.__registerHost()}get el(){return this}trigger="hover";placement="top";color="#01BB4B";tooltipType="default";icon="helpOutline";iconSize=12;label="";name="primary_sm";rightIcon;ariaLabel="";disabled=!1;type="button";useClose=!1;sdClass="";message=[];triggerClass="";triggerStyle="";showTooltip=!1;slotContentHTML="";buttonEl;triggerEl;isAnchorMode=!1;menuEl;hideTimeout;closeTimeout;static CLOSE_ANIM_MS=150;openTooltip=()=>{this.cancelHideTimer(),this.showTooltip=!0,this.menuEl&&this.menuEl.classList.remove("sd-floating-menu--closing")};closeTooltip=()=>{this.menuEl&&this.menuEl.classList.add("sd-floating-menu--closing"),this.closeTimeout=setTimeout((()=>{this.showTooltip=!1}),t.CLOSE_ANIM_MS)};startHideTimer=()=>{this.hideTimeout=setTimeout((()=>this.closeTooltip()),100)};cancelHideTimer=()=>{this.hideTimeout&&(clearTimeout(this.hideTimeout),this.hideTimeout=void 0),this.closeTimeout&&(clearTimeout(this.closeTimeout),this.closeTimeout=void 0)};get tooltipOffset(){switch(this.placement??"top"){case"top":return[0,-4];case"bottom":return[0,4];case"left":case"right":return[4,0]}}handleClose=()=>!this.useClose&&this.closeTooltip();async show(){this.openTooltip()}async hide(){this.closeTooltip()}componentWillLoad(){this.isAnchorMode=Array.from(this.el.children).some((t=>"anchor"===t.getAttribute("slot"))),this.isAnchorMode||(this.slotContentHTML=this.el.innerHTML,this.el.replaceChildren()),this.el.classList.toggle("visible",!0)}componentDidRender(){this.triggerEl&&""!==this.triggerStyle&&this.triggerEl.setAttribute("style",this.triggerStyle)}render(){const t=this.trigger??"hover",s=this.placement??"top",o=this.tooltipType??"default",a=this.icon??"helpOutline",l=this.color??"#01BB4B",r=u[o]??u.default,c=()=>this.showTooltip=!this.showTooltip,d=void 0!==this.label&&""!==this.label,h=this.isAnchorMode,m="hover"===t?{onMouseEnter:()=>this.openTooltip(),onMouseLeave:()=>!this.useClose&&this.startHideTimer()}:h||!d?{onClick:c}:{},p="click"===t&&!h&&d?{onSdClick:c}:{},g=["sd-tooltip-trigger",this.sdClass,this.triggerClass].filter((t=>void 0!==t&&""!==t)).join(" "),b=this.message&&this.message.length>0?this.message.map((t=>`<div>${t}</div>`)).join(""):this.slotContentHTML;return e(i,{key:"81d582c4c8847a0f57abf632d975461cdf07b535"},e("div",{key:"c7515fb866fa85749405bb10512e27575850eb27",ref:t=>this.triggerEl=t,class:g,...m},h?e("slot",{name:"anchor"}):d?e("sd-button",{ref:t=>this.buttonEl=t,name:this.name??"primary_sm",label:this.label,icon:a,rightIcon:this.rightIcon,ariaLabel:this.ariaLabel,disabled:this.disabled,type:this.type??"button",class:"sd-tooltip",...p}):e("sd-icon",{ref:t=>this.buttonEl=t,name:a,size:this.iconSize??12,color:l,class:"sd-tooltip"})),this.showTooltip&&e("sd-floating-portal",{key:"903aaa3723a119687e5af8120d54fb1b9e43c584",parentRef:h?this.triggerEl:this.buttonEl,onSdClose:this.handleClose,placement:s,offset:this.tooltipOffset},e("div",{key:"813e1dbf7f2d8e0378f4fcac1225341aafbd9948",ref:t=>this.menuEl=t,class:{"sd-floating-menu":!0,[`sd-floating-menu--${o}`]:!0,[`sd-floating-menu--${s}`]:!0,"sd-floating-menu--has-close":this.useClose},style:{"--sd-floating-bg":r.bg,"--sd-floating-content":r.content},onMouseEnter:()=>this.openTooltip(),onMouseLeave:()=>!this.useClose&&this.startHideTimer()},e("i",{key:"d74071d3d236382bc952ad03a05ebd77219b4ddb",class:`sd-floating-menu__arrow sd-floating-menu__arrow--${s}`},e(n,{key:"91c35bd2bc22294b7e7998965930219a43799310"})),e("div",{key:"16edd2fc6e9ad02b646c05c6404d3eb79e2a7a71",class:"sd-floating-menu__content",innerHTML:b}),this.useClose&&e("sd-ghost-button",{key:"d234906f7a4a603a8e18cef6da49f9d893adb731",class:"sd-floating-menu__close-button",icon:"close",ariaLabel:"close",size:"xxs",onClick:()=>this.closeTooltip()}))))}static get style(){return"sd-tooltip{visibility:hidden !important;display:inline-flex}sd-tooltip.visible{visibility:visible !important}sd-tooltip .sd-tooltip-trigger{display:inline-flex;position:relative;cursor:pointer;align-items:center;justify-content:center}"}},[772,"sd-tooltip",{trigger:[1],placement:[1],color:[1],tooltipType:[1,"tooltip-type"],icon:[1],iconSize:[2,"icon-size"],label:[1],name:[1],rightIcon:[1,"right-icon"],ariaLabel:[1,"aria-label"],disabled:[4],type:[1],useClose:[4,"use-close"],sdClass:[1,"sd-class"],message:[16],triggerClass:[1,"trigger-class"],triggerStyle:[1,"trigger-style"],showTooltip:[32],slotContentHTML:[32],show:[64],hide:[64]}]);function y(){"undefined"!=typeof customElements&&["sd-tooltip","sd-button","sd-floating-portal","sd-ghost-button","sd-icon","sd-portal","sd-tag"].forEach((t=>{switch(t){case"sd-tooltip":customElements.get(o(t))||customElements.define(o(t),f);break;case"sd-button":customElements.get(o(t))||a();break;case"sd-floating-portal":customElements.get(o(t))||l();break;case"sd-ghost-button":customElements.get(o(t))||r();break;case"sd-icon":customElements.get(o(t))||c();break;case"sd-portal":customElements.get(o(t))||d();break;case"sd-tag":customElements.get(o(t))||h()}}))}export{f as S,y as d}