@sellmate/design-system 1.11.0 → 1.13.0

package/dist/types/components.d.ts

@@ -1983,6 +1983,10 @@ export namespace Components {
           * @default false
          */
         "disabled": boolean;
+        /**
+          * 툴팁을 숨깁니다.
+         */
+        "hide": () => Promise<void>;
         /**
           * @default 'helpOutline'
          */
@@ -1995,6 +1999,11 @@ export namespace Components {
           * @default ''
          */
         "label": string;
+        /**
+          * 툴팁 본문에 표시할 메시지. 각 항목이 한 줄로 innerHTML 렌더링됩니다. (HTML 문자열 허용) 지정하지 않으면 slot 으로 전달한 내용을 본문으로 사용합니다.
+          * @default []
+         */
+        "message": string[];
         /**
           * @default 'primary_sm'
          */
@@ -2008,6 +2017,10 @@ export namespace Components {
           * @default ''
          */
         "sdClass"?: string;
+        /**
+          * 툴팁을 표시합니다.
+         */
+        "show": () => Promise<void>;
         /**
           * @default 'default'
          */
@@ -2016,10 +2029,24 @@ export namespace Components {
           * @default 'hover'
          */
         "trigger": 'hover' | 'click';
+        /**
+          * anchor 트리거 래퍼(.sd-tooltip-trigger)에 추가할 클래스. (예: Tailwind `block w-full`)
+          * @default ''
+         */
+        "triggerClass": string;
+        /**
+          * anchor 트리거 래퍼에 적용할 인라인 스타일(CSS 문자열). (예: `width:100%`)
+          * @default ''
+         */
+        "triggerStyle": string;
         /**
           * @default 'button'
          */
         "type": ButtonType;
+        /**
+          * @default false
+         */
+        "useClose": boolean;
     }
     interface SdTr {
         "bumpSpansVersion": () => Promise<void>;
@@ -5084,6 +5111,11 @@ declare namespace LocalJSX {
           * @default ''
          */
         "label"?: string;
+        /**
+          * 툴팁 본문에 표시할 메시지. 각 항목이 한 줄로 innerHTML 렌더링됩니다. (HTML 문자열 허용) 지정하지 않으면 slot 으로 전달한 내용을 본문으로 사용합니다.
+          * @default []
+         */
+        "message"?: string[];
         /**
           * @default 'primary_sm'
          */
@@ -5105,10 +5137,24 @@ declare namespace LocalJSX {
           * @default 'hover'
          */
         "trigger"?: 'hover' | 'click';
+        /**
+          * anchor 트리거 래퍼(.sd-tooltip-trigger)에 추가할 클래스. (예: Tailwind `block w-full`)
+          * @default ''
+         */
+        "triggerClass"?: string;
+        /**
+          * anchor 트리거 래퍼에 적용할 인라인 스타일(CSS 문자열). (예: `width:100%`)
+          * @default ''
+         */
+        "triggerStyle"?: string;
         /**
           * @default 'button'
          */
         "type"?: ButtonType;
+        /**
+          * @default false
+         */
+        "useClose"?: boolean;
     }
     interface SdTr {
         "columns"?: SdTableColumn[];
@@ -5655,7 +5701,10 @@ declare namespace LocalJSX {
         "ariaLabel": string;
         "disabled": boolean;
         "type": ButtonType;
+        "useClose": boolean;
         "sdClass": string;
+        "triggerClass": string;
+        "triggerStyle": string;
     }
     interface SdTrAttributes {
         "selectable": boolean;

package/hydrate/index.js

@@ -10152,7 +10152,7 @@ class SdFilePicker {
     }; }
 }
 
-const sdFloatingPortalCss = () => `.sd-floating-menu{width:fit-content;padding:12px 16px;border-radius:6px;font-size:12px;font-weight:500;line-height:20px;position:relative;box-sizing:border-box;background:var(--sd-floating-bg, #07284A);color:var(--sd-floating-content, #FFFFFF);animation:sd-floating-fade-in 0.35s ease-out}.sd-floating-menu--top{animation-name:sd-floating-slide-top}.sd-floating-menu--bottom{animation-name:sd-floating-slide-bottom}.sd-floating-menu--left{animation-name:sd-floating-slide-left}.sd-floating-menu--right{animation-name:sd-floating-slide-right}.sd-floating-menu .sd-floating-menu__arrow{color:var(--sd-floating-bg, #07284A)}.sd-floating-menu--default{background:var(--sd-floating-bg, #07284A);color:var(--sd-floating-content, #FFFFFF);font-weight:500}.sd-floating-menu--default .sd-floating-menu__arrow{color:var(--sd-floating-bg, #07284A)}.sd-floating-menu--danger{background:var(--sd-floating-bg, #FCE6E6);color:var(--sd-floating-content, #FB4444);font-weight:700}.sd-floating-menu--danger .sd-floating-menu__arrow{color:var(--sd-floating-bg, #FCE6E6)}.sd-floating-menu--warning{background:var(--sd-floating-bg, #FEF1EA);color:var(--sd-floating-content, #FF6B00);font-weight:700}.sd-floating-menu--warning .sd-floating-menu__arrow{color:var(--sd-floating-bg, #FEF1EA)}.sd-floating-menu--accent{background:var(--sd-floating-bg, #E6F1FF);color:var(--sd-floating-content, #0075FF);font-weight:700}.sd-floating-menu--accent .sd-floating-menu__arrow{color:var(--sd-floating-bg, #E6F1FF)}.sd-floating-menu__arrow{position:absolute;display:flex;width:16px;height:12px}.sd-floating-menu__arrow svg{width:100%;height:100%}.sd-floating-menu__arrow--top{bottom:-12px;left:50%;transform:translateX(-50%)}.sd-floating-menu__arrow--bottom{top:-12px;left:50%;transform:translateX(-50%) rotate(180deg)}.sd-floating-menu__arrow--left{right:-12px;top:50%;transform:translateY(-50%) rotate(-90deg)}.sd-floating-menu__arrow--right{left:-12px;top:50%;transform:translateY(-50%) rotate(90deg)}.sd-floating-menu__content{font-size:12px;line-height:20px}.sd-floating-menu__content .sd-floating-menu__title{font-size:14px;font-weight:700;line-height:24px;margin-bottom:4px}.sd-floating-menu__content .sd-floating-menu__messages{font-weight:500}.sd-floating-menu__content .sd-floating-menu__buttons{margin-top:12px;display:flex;gap:8px;align-items:center;justify-content:flex-end}.sd-floating-menu__content .sd-floating-menu__buttons--with-link{justify-content:space-between}.sd-floating-menu--popover{padding:16px 20px}.sd-floating-menu--popover .sd-floating-menu__content{gap:4px}.sd-floating-menu--popover .sd-floating-menu__title{font-size:14px;font-weight:700;line-height:24px}.sd-floating-menu--popover .sd-floating-menu__messages{font-size:12px;font-weight:500;line-height:20px}.sd-floating-menu--closing{animation:sd-floating-fade-out 0.15s ease-in forwards}.sd-floating-menu--closing.sd-floating-menu--top{animation-name:sd-floating-slide-out-top}.sd-floating-menu--closing.sd-floating-menu--bottom{animation-name:sd-floating-slide-out-bottom}.sd-floating-menu--closing.sd-floating-menu--left{animation-name:sd-floating-slide-out-left}.sd-floating-menu--closing.sd-floating-menu--right{animation-name:sd-floating-slide-out-right}.sd-floating-menu__close-button{position:absolute;top:12px;right:12px}@keyframes sd-floating-fade-out{from{opacity:1}to{opacity:0}}@keyframes sd-floating-slide-out-top{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(4px)}}@keyframes sd-floating-slide-out-bottom{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-4px)}}@keyframes sd-floating-slide-out-left{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(4px)}}@keyframes sd-floating-slide-out-right{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-4px)}}@keyframes sd-floating-fade-in{from{opacity:0}to{opacity:1}}@keyframes sd-floating-slide-top{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes sd-floating-slide-bottom{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@keyframes sd-floating-slide-left{from{opacity:0;transform:translateX(4px)}to{opacity:1;transform:translateX(0)}}@keyframes sd-floating-slide-right{from{opacity:0;transform:translateX(-4px)}to{opacity:1;transform:translateX(0)}}`;
+const sdFloatingPortalCss = () => `.sd-floating-menu{width:fit-content;padding:12px 16px;border-radius:6px;font-size:12px;font-weight:500;line-height:20px;position:relative;box-sizing:border-box;background:var(--sd-floating-bg, #07284A);color:var(--sd-floating-content, #FFFFFF);animation:sd-floating-fade-in 0.35s ease-out}.sd-floating-menu--top{animation-name:sd-floating-slide-top}.sd-floating-menu--bottom{animation-name:sd-floating-slide-bottom}.sd-floating-menu--left{animation-name:sd-floating-slide-left}.sd-floating-menu--right{animation-name:sd-floating-slide-right}.sd-floating-menu .sd-floating-menu__arrow{color:var(--sd-floating-bg, #07284A)}.sd-floating-menu--default{background:var(--sd-floating-bg, #07284A);color:var(--sd-floating-content, #FFFFFF);font-weight:500}.sd-floating-menu--default .sd-floating-menu__arrow{color:var(--sd-floating-bg, #07284A)}.sd-floating-menu--danger{background:var(--sd-floating-bg, #FCE6E6);color:var(--sd-floating-content, #FB4444);font-weight:700}.sd-floating-menu--danger .sd-floating-menu__arrow{color:var(--sd-floating-bg, #FCE6E6)}.sd-floating-menu--warning{background:var(--sd-floating-bg, #FEF1EA);color:var(--sd-floating-content, #FF6B00);font-weight:700}.sd-floating-menu--warning .sd-floating-menu__arrow{color:var(--sd-floating-bg, #FEF1EA)}.sd-floating-menu--accent{background:var(--sd-floating-bg, #E6F1FF);color:var(--sd-floating-content, #0075FF);font-weight:700}.sd-floating-menu--accent .sd-floating-menu__arrow{color:var(--sd-floating-bg, #E6F1FF)}.sd-floating-menu__arrow{position:absolute;display:flex;width:16px;height:12px}.sd-floating-menu__arrow svg{width:100%;height:100%}.sd-floating-menu__arrow--top{bottom:-12px;left:50%;transform:translateX(-50%)}.sd-floating-menu__arrow--bottom{top:-12px;left:50%;transform:translateX(-50%) rotate(180deg)}.sd-floating-menu__arrow--left{right:-12px;top:50%;transform:translateY(-50%) rotate(-90deg)}.sd-floating-menu__arrow--right{left:-12px;top:50%;transform:translateY(-50%) rotate(90deg)}.sd-floating-menu__content{font-size:12px;line-height:20px}.sd-floating-menu__content .sd-floating-menu__title{font-size:14px;font-weight:700;line-height:24px;margin-bottom:4px}.sd-floating-menu__content .sd-floating-menu__messages{font-weight:500}.sd-floating-menu__content .sd-floating-menu__buttons{margin-top:12px;display:flex;gap:8px;align-items:center;justify-content:flex-end}.sd-floating-menu__content .sd-floating-menu__buttons--with-link{justify-content:space-between}.sd-floating-menu--popover{padding:16px 20px}.sd-floating-menu--popover .sd-floating-menu__content{gap:4px}.sd-floating-menu--popover .sd-floating-menu__title{font-size:14px;font-weight:700;line-height:24px}.sd-floating-menu--popover .sd-floating-menu__messages{font-size:12px;font-weight:500;line-height:20px}.sd-floating-menu--closing{animation:sd-floating-fade-out 0.15s ease-in forwards}.sd-floating-menu--closing.sd-floating-menu--top{animation-name:sd-floating-slide-out-top}.sd-floating-menu--closing.sd-floating-menu--bottom{animation-name:sd-floating-slide-out-bottom}.sd-floating-menu--closing.sd-floating-menu--left{animation-name:sd-floating-slide-out-left}.sd-floating-menu--closing.sd-floating-menu--right{animation-name:sd-floating-slide-out-right}.sd-floating-menu--has-close .sd-floating-menu__content{padding-right:28px}.sd-floating-menu__close-button{position:absolute;top:12px;right:12px}@keyframes sd-floating-fade-out{from{opacity:1}to{opacity:0}}@keyframes sd-floating-slide-out-top{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(4px)}}@keyframes sd-floating-slide-out-bottom{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-4px)}}@keyframes sd-floating-slide-out-left{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(4px)}}@keyframes sd-floating-slide-out-right{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-4px)}}@keyframes sd-floating-fade-in{from{opacity:0}to{opacity:1}}@keyframes sd-floating-slide-top{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes sd-floating-slide-bottom{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@keyframes sd-floating-slide-left{from{opacity:0;transform:translateX(4px)}to{opacity:1;transform:translateX(0)}}@keyframes sd-floating-slide-right{from{opacity:0;transform:translateX(-4px)}to{opacity:1;transform:translateX(0)}}`;
 
 class SdFloatingPopover {
     constructor(hostRef) {
@@ -17887,22 +17887,34 @@ class SdTooltip {
     ariaLabel = '';
     disabled = false;
     type = 'button';
+    useClose = false;
     sdClass = '';
+    /**
+     * 툴팁 본문에 표시할 메시지. 각 항목이 한 줄로 innerHTML 렌더링됩니다.
+     * (HTML 문자열 허용) 지정하지 않으면 slot 으로 전달한 내용을 본문으로 사용합니다.
+     */
+    message = [];
+    /** anchor 트리거 래퍼(.sd-tooltip-trigger)에 추가할 클래스. (예: Tailwind `block w-full`) */
+    triggerClass = '';
+    /** anchor 트리거 래퍼에 적용할 인라인 스타일(CSS 문자열). (예: `width:100%`) */
+    triggerStyle = '';
     showTooltip = false;
     slotContentHTML = '';
     buttonEl;
+    triggerEl;
+    isAnchorMode = false;
     menuEl;
     hideTimeout;
     closeTimeout;
     static CLOSE_ANIM_MS = 150;
-    show = () => {
+    openTooltip = () => {
         this.cancelHideTimer();
         this.showTooltip = true;
         if (this.menuEl) {
             this.menuEl.classList.remove('sd-floating-menu--closing');
         }
     };
-    hide = () => {
+    closeTooltip = () => {
         if (this.menuEl) {
             this.menuEl.classList.add('sd-floating-menu--closing');
         }
@@ -17911,7 +17923,7 @@ class SdTooltip {
         }, SdTooltip.CLOSE_ANIM_MS);
     };
     startHideTimer = () => {
-        this.hideTimeout = setTimeout(() => this.hide(), 100);
+        this.hideTimeout = setTimeout(() => this.closeTooltip(), 100);
     };
     cancelHideTimer = () => {
         if (this.hideTimeout) {
@@ -17935,12 +17947,32 @@ class SdTooltip {
                 return [4, 0];
         }
     }
-    handleClose = () => this.hide();
+    handleClose = () => this.closeTooltip();
+    /** 툴팁을 표시합니다. */
+    async show() {
+        this.openTooltip();
+    }
+    /** 툴팁을 숨깁니다. */
+    async hide() {
+        this.closeTooltip();
+    }
     componentWillLoad() {
-        this.slotContentHTML = this.el.innerHTML;
-        this.el.replaceChildren();
+        // slot="anchor" 자식이 있으면 anchor 모드(다른 컴포넌트를 트리거로 사용)
+        this.isAnchorMode = Array.from(this.el.children).some(child => child.getAttribute('slot') === 'anchor');
+        if (!this.isAnchorMode) {
+            // 레거시 모드: 슬롯 내용을 본문으로 캡처하고 자식을 비웁니다.
+            this.slotContentHTML = this.el.innerHTML;
+            this.el.replaceChildren();
+        }
+        // anchor 모드: 자식(slot="anchor")은 그대로 두어 Stencil 슬롯으로 투영합니다.
         this.el.classList.toggle('visible', true);
     }
+    componentDidRender() {
+        // CSS 문자열 스타일은 ref로 직접 적용 (속성/프로퍼티 전달 모두 호환)
+        if (this.triggerEl && this.triggerStyle !== '') {
+            this.triggerEl.setAttribute('style', this.triggerStyle);
+        }
+    }
     render() {
         const trigger = this.trigger ?? 'hover';
         const placement = this.placement ?? 'top';
@@ -17949,25 +17981,38 @@ class SdTooltip {
         const color = this.color ?? '#01BB4B';
         const typeConfig = TOOLTIP_TYPE_CONFIG[tooltipType] ?? TOOLTIP_TYPE_CONFIG.default;
         const hoverTrigger = {
-            onMouseEnter: () => this.show(),
+            onMouseEnter: () => this.openTooltip(),
             onMouseLeave: () => this.startHideTimer(),
         };
         const toggleTooltip = () => (this.showTooltip = !this.showTooltip);
         const hasLabel = this.label !== undefined && this.label !== '';
-        const divTrigger = trigger === 'hover' ? hoverTrigger : hasLabel ? {} : { onClick: toggleTooltip };
-        const buttonClickTrigger = trigger === 'click' && hasLabel ? { onSdClick: toggleTooltip } : {};
-        return (hAsync(Fragment, { key: 'dab010e285f9cf77097b2d18115d1c8dbb462933' }, hAsync("div", { key: 'c49d1f8d55898cedc462fd321ab47d8a82360ae8', class: `sd-tooltip-trigger ${this.sdClass !== undefined && this.sdClass !== '' ? this.sdClass : ''}`, ...divTrigger }, hasLabel ? (hAsync("sd-button", { ref: el => (this.buttonEl = el), name: this.name ?? 'primary_sm', label: this.label, icon: icon, rightIcon: this.rightIcon, ariaLabel: this.ariaLabel, disabled: this.disabled, type: this.type ?? 'button', class: "sd-tooltip", ...buttonClickTrigger })) : (hAsync("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: this.iconSize ?? 12, color: color, class: "sd-tooltip" }))), this.showTooltip && (hAsync("sd-floating-portal", { key: '53dbdd7df43e2eacf23c2e1b97bf901b225eab1e', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.tooltipOffset }, hAsync("div", { key: '3130ace8e25b783d49fde3b682249a8cf1783cde', ref: el => (this.menuEl = el), class: {
+        const anchorMode = this.isAnchorMode;
+        const divTrigger = trigger === 'hover'
+            ? hoverTrigger
+            : anchorMode || !hasLabel
+                ? { onClick: toggleTooltip }
+                : {};
+        const buttonClickTrigger = trigger === 'click' && !anchorMode && hasLabel ? { onSdClick: toggleTooltip } : {};
+        const triggerClasses = ['sd-tooltip-trigger', this.sdClass, this.triggerClass]
+            .filter(c => c !== undefined && c !== '')
+            .join(' ');
+        // anchor 모드에서는 slot 을 트리거로 쓰므로 본문은 message 로 받습니다.
+        const bodyHTML = this.message && this.message.length > 0
+            ? this.message.map(line => `<div>${line}</div>`).join('')
+            : this.slotContentHTML;
+        return (hAsync(Fragment, { key: 'be1e7f58505f3689f236559792357ce882f9a5d1' }, hAsync("div", { key: 'c289652eba29ed9526db76794180b192057973d2', ref: el => (this.triggerEl = el), class: triggerClasses, ...divTrigger }, anchorMode ? (hAsync("slot", { name: "anchor" })) : hasLabel ? (hAsync("sd-button", { ref: el => (this.buttonEl = el), name: this.name ?? 'primary_sm', label: this.label, icon: icon, rightIcon: this.rightIcon, ariaLabel: this.ariaLabel, disabled: this.disabled, type: this.type ?? 'button', class: "sd-tooltip", ...buttonClickTrigger })) : (hAsync("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: this.iconSize ?? 12, color: color, class: "sd-tooltip" }))), this.showTooltip && (hAsync("sd-floating-portal", { key: '138bfd2f0c75e7602b3176d1fd1dd2f9da0b624f', parentRef: anchorMode ? this.triggerEl : this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.tooltipOffset }, hAsync("div", { key: '65c82fcb90080898783119232016e6c079d4b183', ref: el => (this.menuEl = el), class: {
                 'sd-floating-menu': true,
                 [`sd-floating-menu--${tooltipType}`]: true,
                 [`sd-floating-menu--${placement}`]: true,
+                'sd-floating-menu--has-close': this.useClose,
             }, style: {
                 '--sd-floating-bg': typeConfig.bg,
                 '--sd-floating-content': typeConfig.content,
-            }, onMouseEnter: () => this.show(), onMouseLeave: () => this.startHideTimer() }, hAsync("i", { key: '2120f9056ef18218b2ba55d5c921fef9c9a04d67', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, hAsync(TooltipArrow, { key: '557f9ae13f101416d962a84438690078fa7bd16f' })), hAsync("div", { key: '54fb0f3cf0f228184f2eca54a5f3364084b6f834', class: "sd-floating-menu__content", innerHTML: this.slotContentHTML }))))));
+            }, onMouseEnter: () => this.openTooltip(), onMouseLeave: () => this.startHideTimer() }, hAsync("i", { key: '81e2e2cd64f6c656ea307176c58b93a3b886e79d', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, hAsync(TooltipArrow, { key: '7ced7bc259479dda4bddf22120cb6c22d61aaf3b' })), hAsync("div", { key: '62b4ed5852825ba3de9095cd1b81423f44a768fb', class: "sd-floating-menu__content", innerHTML: bodyHTML }), this.useClose && (hAsync("sd-ghost-button", { key: 'e0834930b12d7a1e3ff2151d733a84765ecd0535', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xxs", onClick: this.handleClose })))))));
     }
     static get style() { return sdTooltipCss(); }
     static get cmpMeta() { return {
-        "$flags$": 512,
+        "$flags$": 772,
         "$tagName$": "sd-tooltip",
         "$members$": {
             "trigger": [1],
@@ -17982,9 +18027,15 @@ class SdTooltip {
             "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]
+            "slotContentHTML": [32],
+            "show": [64],
+            "hide": [64]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",

package/hydrate/index.mjs

@@ -10150,7 +10150,7 @@ class SdFilePicker {
     }; }
 }
 
-const sdFloatingPortalCss = () => `.sd-floating-menu{width:fit-content;padding:12px 16px;border-radius:6px;font-size:12px;font-weight:500;line-height:20px;position:relative;box-sizing:border-box;background:var(--sd-floating-bg, #07284A);color:var(--sd-floating-content, #FFFFFF);animation:sd-floating-fade-in 0.35s ease-out}.sd-floating-menu--top{animation-name:sd-floating-slide-top}.sd-floating-menu--bottom{animation-name:sd-floating-slide-bottom}.sd-floating-menu--left{animation-name:sd-floating-slide-left}.sd-floating-menu--right{animation-name:sd-floating-slide-right}.sd-floating-menu .sd-floating-menu__arrow{color:var(--sd-floating-bg, #07284A)}.sd-floating-menu--default{background:var(--sd-floating-bg, #07284A);color:var(--sd-floating-content, #FFFFFF);font-weight:500}.sd-floating-menu--default .sd-floating-menu__arrow{color:var(--sd-floating-bg, #07284A)}.sd-floating-menu--danger{background:var(--sd-floating-bg, #FCE6E6);color:var(--sd-floating-content, #FB4444);font-weight:700}.sd-floating-menu--danger .sd-floating-menu__arrow{color:var(--sd-floating-bg, #FCE6E6)}.sd-floating-menu--warning{background:var(--sd-floating-bg, #FEF1EA);color:var(--sd-floating-content, #FF6B00);font-weight:700}.sd-floating-menu--warning .sd-floating-menu__arrow{color:var(--sd-floating-bg, #FEF1EA)}.sd-floating-menu--accent{background:var(--sd-floating-bg, #E6F1FF);color:var(--sd-floating-content, #0075FF);font-weight:700}.sd-floating-menu--accent .sd-floating-menu__arrow{color:var(--sd-floating-bg, #E6F1FF)}.sd-floating-menu__arrow{position:absolute;display:flex;width:16px;height:12px}.sd-floating-menu__arrow svg{width:100%;height:100%}.sd-floating-menu__arrow--top{bottom:-12px;left:50%;transform:translateX(-50%)}.sd-floating-menu__arrow--bottom{top:-12px;left:50%;transform:translateX(-50%) rotate(180deg)}.sd-floating-menu__arrow--left{right:-12px;top:50%;transform:translateY(-50%) rotate(-90deg)}.sd-floating-menu__arrow--right{left:-12px;top:50%;transform:translateY(-50%) rotate(90deg)}.sd-floating-menu__content{font-size:12px;line-height:20px}.sd-floating-menu__content .sd-floating-menu__title{font-size:14px;font-weight:700;line-height:24px;margin-bottom:4px}.sd-floating-menu__content .sd-floating-menu__messages{font-weight:500}.sd-floating-menu__content .sd-floating-menu__buttons{margin-top:12px;display:flex;gap:8px;align-items:center;justify-content:flex-end}.sd-floating-menu__content .sd-floating-menu__buttons--with-link{justify-content:space-between}.sd-floating-menu--popover{padding:16px 20px}.sd-floating-menu--popover .sd-floating-menu__content{gap:4px}.sd-floating-menu--popover .sd-floating-menu__title{font-size:14px;font-weight:700;line-height:24px}.sd-floating-menu--popover .sd-floating-menu__messages{font-size:12px;font-weight:500;line-height:20px}.sd-floating-menu--closing{animation:sd-floating-fade-out 0.15s ease-in forwards}.sd-floating-menu--closing.sd-floating-menu--top{animation-name:sd-floating-slide-out-top}.sd-floating-menu--closing.sd-floating-menu--bottom{animation-name:sd-floating-slide-out-bottom}.sd-floating-menu--closing.sd-floating-menu--left{animation-name:sd-floating-slide-out-left}.sd-floating-menu--closing.sd-floating-menu--right{animation-name:sd-floating-slide-out-right}.sd-floating-menu__close-button{position:absolute;top:12px;right:12px}@keyframes sd-floating-fade-out{from{opacity:1}to{opacity:0}}@keyframes sd-floating-slide-out-top{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(4px)}}@keyframes sd-floating-slide-out-bottom{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-4px)}}@keyframes sd-floating-slide-out-left{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(4px)}}@keyframes sd-floating-slide-out-right{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-4px)}}@keyframes sd-floating-fade-in{from{opacity:0}to{opacity:1}}@keyframes sd-floating-slide-top{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes sd-floating-slide-bottom{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@keyframes sd-floating-slide-left{from{opacity:0;transform:translateX(4px)}to{opacity:1;transform:translateX(0)}}@keyframes sd-floating-slide-right{from{opacity:0;transform:translateX(-4px)}to{opacity:1;transform:translateX(0)}}`;
+const sdFloatingPortalCss = () => `.sd-floating-menu{width:fit-content;padding:12px 16px;border-radius:6px;font-size:12px;font-weight:500;line-height:20px;position:relative;box-sizing:border-box;background:var(--sd-floating-bg, #07284A);color:var(--sd-floating-content, #FFFFFF);animation:sd-floating-fade-in 0.35s ease-out}.sd-floating-menu--top{animation-name:sd-floating-slide-top}.sd-floating-menu--bottom{animation-name:sd-floating-slide-bottom}.sd-floating-menu--left{animation-name:sd-floating-slide-left}.sd-floating-menu--right{animation-name:sd-floating-slide-right}.sd-floating-menu .sd-floating-menu__arrow{color:var(--sd-floating-bg, #07284A)}.sd-floating-menu--default{background:var(--sd-floating-bg, #07284A);color:var(--sd-floating-content, #FFFFFF);font-weight:500}.sd-floating-menu--default .sd-floating-menu__arrow{color:var(--sd-floating-bg, #07284A)}.sd-floating-menu--danger{background:var(--sd-floating-bg, #FCE6E6);color:var(--sd-floating-content, #FB4444);font-weight:700}.sd-floating-menu--danger .sd-floating-menu__arrow{color:var(--sd-floating-bg, #FCE6E6)}.sd-floating-menu--warning{background:var(--sd-floating-bg, #FEF1EA);color:var(--sd-floating-content, #FF6B00);font-weight:700}.sd-floating-menu--warning .sd-floating-menu__arrow{color:var(--sd-floating-bg, #FEF1EA)}.sd-floating-menu--accent{background:var(--sd-floating-bg, #E6F1FF);color:var(--sd-floating-content, #0075FF);font-weight:700}.sd-floating-menu--accent .sd-floating-menu__arrow{color:var(--sd-floating-bg, #E6F1FF)}.sd-floating-menu__arrow{position:absolute;display:flex;width:16px;height:12px}.sd-floating-menu__arrow svg{width:100%;height:100%}.sd-floating-menu__arrow--top{bottom:-12px;left:50%;transform:translateX(-50%)}.sd-floating-menu__arrow--bottom{top:-12px;left:50%;transform:translateX(-50%) rotate(180deg)}.sd-floating-menu__arrow--left{right:-12px;top:50%;transform:translateY(-50%) rotate(-90deg)}.sd-floating-menu__arrow--right{left:-12px;top:50%;transform:translateY(-50%) rotate(90deg)}.sd-floating-menu__content{font-size:12px;line-height:20px}.sd-floating-menu__content .sd-floating-menu__title{font-size:14px;font-weight:700;line-height:24px;margin-bottom:4px}.sd-floating-menu__content .sd-floating-menu__messages{font-weight:500}.sd-floating-menu__content .sd-floating-menu__buttons{margin-top:12px;display:flex;gap:8px;align-items:center;justify-content:flex-end}.sd-floating-menu__content .sd-floating-menu__buttons--with-link{justify-content:space-between}.sd-floating-menu--popover{padding:16px 20px}.sd-floating-menu--popover .sd-floating-menu__content{gap:4px}.sd-floating-menu--popover .sd-floating-menu__title{font-size:14px;font-weight:700;line-height:24px}.sd-floating-menu--popover .sd-floating-menu__messages{font-size:12px;font-weight:500;line-height:20px}.sd-floating-menu--closing{animation:sd-floating-fade-out 0.15s ease-in forwards}.sd-floating-menu--closing.sd-floating-menu--top{animation-name:sd-floating-slide-out-top}.sd-floating-menu--closing.sd-floating-menu--bottom{animation-name:sd-floating-slide-out-bottom}.sd-floating-menu--closing.sd-floating-menu--left{animation-name:sd-floating-slide-out-left}.sd-floating-menu--closing.sd-floating-menu--right{animation-name:sd-floating-slide-out-right}.sd-floating-menu--has-close .sd-floating-menu__content{padding-right:28px}.sd-floating-menu__close-button{position:absolute;top:12px;right:12px}@keyframes sd-floating-fade-out{from{opacity:1}to{opacity:0}}@keyframes sd-floating-slide-out-top{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(4px)}}@keyframes sd-floating-slide-out-bottom{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-4px)}}@keyframes sd-floating-slide-out-left{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(4px)}}@keyframes sd-floating-slide-out-right{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-4px)}}@keyframes sd-floating-fade-in{from{opacity:0}to{opacity:1}}@keyframes sd-floating-slide-top{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes sd-floating-slide-bottom{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@keyframes sd-floating-slide-left{from{opacity:0;transform:translateX(4px)}to{opacity:1;transform:translateX(0)}}@keyframes sd-floating-slide-right{from{opacity:0;transform:translateX(-4px)}to{opacity:1;transform:translateX(0)}}`;
 
 class SdFloatingPopover {
     constructor(hostRef) {
@@ -17885,22 +17885,34 @@ class SdTooltip {
     ariaLabel = '';
     disabled = false;
     type = 'button';
+    useClose = false;
     sdClass = '';
+    /**
+     * 툴팁 본문에 표시할 메시지. 각 항목이 한 줄로 innerHTML 렌더링됩니다.
+     * (HTML 문자열 허용) 지정하지 않으면 slot 으로 전달한 내용을 본문으로 사용합니다.
+     */
+    message = [];
+    /** anchor 트리거 래퍼(.sd-tooltip-trigger)에 추가할 클래스. (예: Tailwind `block w-full`) */
+    triggerClass = '';
+    /** anchor 트리거 래퍼에 적용할 인라인 스타일(CSS 문자열). (예: `width:100%`) */
+    triggerStyle = '';
     showTooltip = false;
     slotContentHTML = '';
     buttonEl;
+    triggerEl;
+    isAnchorMode = false;
     menuEl;
     hideTimeout;
     closeTimeout;
     static CLOSE_ANIM_MS = 150;
-    show = () => {
+    openTooltip = () => {
         this.cancelHideTimer();
         this.showTooltip = true;
         if (this.menuEl) {
             this.menuEl.classList.remove('sd-floating-menu--closing');
         }
     };
-    hide = () => {
+    closeTooltip = () => {
         if (this.menuEl) {
             this.menuEl.classList.add('sd-floating-menu--closing');
         }
@@ -17909,7 +17921,7 @@ class SdTooltip {
         }, SdTooltip.CLOSE_ANIM_MS);
     };
     startHideTimer = () => {
-        this.hideTimeout = setTimeout(() => this.hide(), 100);
+        this.hideTimeout = setTimeout(() => this.closeTooltip(), 100);
     };
     cancelHideTimer = () => {
         if (this.hideTimeout) {
@@ -17933,12 +17945,32 @@ class SdTooltip {
                 return [4, 0];
         }
     }
-    handleClose = () => this.hide();
+    handleClose = () => this.closeTooltip();
+    /** 툴팁을 표시합니다. */
+    async show() {
+        this.openTooltip();
+    }
+    /** 툴팁을 숨깁니다. */
+    async hide() {
+        this.closeTooltip();
+    }
     componentWillLoad() {
-        this.slotContentHTML = this.el.innerHTML;
-        this.el.replaceChildren();
+        // slot="anchor" 자식이 있으면 anchor 모드(다른 컴포넌트를 트리거로 사용)
+        this.isAnchorMode = Array.from(this.el.children).some(child => child.getAttribute('slot') === 'anchor');
+        if (!this.isAnchorMode) {
+            // 레거시 모드: 슬롯 내용을 본문으로 캡처하고 자식을 비웁니다.
+            this.slotContentHTML = this.el.innerHTML;
+            this.el.replaceChildren();
+        }
+        // anchor 모드: 자식(slot="anchor")은 그대로 두어 Stencil 슬롯으로 투영합니다.
         this.el.classList.toggle('visible', true);
     }
+    componentDidRender() {
+        // CSS 문자열 스타일은 ref로 직접 적용 (속성/프로퍼티 전달 모두 호환)
+        if (this.triggerEl && this.triggerStyle !== '') {
+            this.triggerEl.setAttribute('style', this.triggerStyle);
+        }
+    }
     render() {
         const trigger = this.trigger ?? 'hover';
         const placement = this.placement ?? 'top';
@@ -17947,25 +17979,38 @@ class SdTooltip {
         const color = this.color ?? '#01BB4B';
         const typeConfig = TOOLTIP_TYPE_CONFIG[tooltipType] ?? TOOLTIP_TYPE_CONFIG.default;
         const hoverTrigger = {
-            onMouseEnter: () => this.show(),
+            onMouseEnter: () => this.openTooltip(),
             onMouseLeave: () => this.startHideTimer(),
         };
         const toggleTooltip = () => (this.showTooltip = !this.showTooltip);
         const hasLabel = this.label !== undefined && this.label !== '';
-        const divTrigger = trigger === 'hover' ? hoverTrigger : hasLabel ? {} : { onClick: toggleTooltip };
-        const buttonClickTrigger = trigger === 'click' && hasLabel ? { onSdClick: toggleTooltip } : {};
-        return (hAsync(Fragment, { key: 'dab010e285f9cf77097b2d18115d1c8dbb462933' }, hAsync("div", { key: 'c49d1f8d55898cedc462fd321ab47d8a82360ae8', class: `sd-tooltip-trigger ${this.sdClass !== undefined && this.sdClass !== '' ? this.sdClass : ''}`, ...divTrigger }, hasLabel ? (hAsync("sd-button", { ref: el => (this.buttonEl = el), name: this.name ?? 'primary_sm', label: this.label, icon: icon, rightIcon: this.rightIcon, ariaLabel: this.ariaLabel, disabled: this.disabled, type: this.type ?? 'button', class: "sd-tooltip", ...buttonClickTrigger })) : (hAsync("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: this.iconSize ?? 12, color: color, class: "sd-tooltip" }))), this.showTooltip && (hAsync("sd-floating-portal", { key: '53dbdd7df43e2eacf23c2e1b97bf901b225eab1e', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.tooltipOffset }, hAsync("div", { key: '3130ace8e25b783d49fde3b682249a8cf1783cde', ref: el => (this.menuEl = el), class: {
+        const anchorMode = this.isAnchorMode;
+        const divTrigger = trigger === 'hover'
+            ? hoverTrigger
+            : anchorMode || !hasLabel
+                ? { onClick: toggleTooltip }
+                : {};
+        const buttonClickTrigger = trigger === 'click' && !anchorMode && hasLabel ? { onSdClick: toggleTooltip } : {};
+        const triggerClasses = ['sd-tooltip-trigger', this.sdClass, this.triggerClass]
+            .filter(c => c !== undefined && c !== '')
+            .join(' ');
+        // anchor 모드에서는 slot 을 트리거로 쓰므로 본문은 message 로 받습니다.
+        const bodyHTML = this.message && this.message.length > 0
+            ? this.message.map(line => `<div>${line}</div>`).join('')
+            : this.slotContentHTML;
+        return (hAsync(Fragment, { key: 'be1e7f58505f3689f236559792357ce882f9a5d1' }, hAsync("div", { key: 'c289652eba29ed9526db76794180b192057973d2', ref: el => (this.triggerEl = el), class: triggerClasses, ...divTrigger }, anchorMode ? (hAsync("slot", { name: "anchor" })) : hasLabel ? (hAsync("sd-button", { ref: el => (this.buttonEl = el), name: this.name ?? 'primary_sm', label: this.label, icon: icon, rightIcon: this.rightIcon, ariaLabel: this.ariaLabel, disabled: this.disabled, type: this.type ?? 'button', class: "sd-tooltip", ...buttonClickTrigger })) : (hAsync("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: this.iconSize ?? 12, color: color, class: "sd-tooltip" }))), this.showTooltip && (hAsync("sd-floating-portal", { key: '138bfd2f0c75e7602b3176d1fd1dd2f9da0b624f', parentRef: anchorMode ? this.triggerEl : this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.tooltipOffset }, hAsync("div", { key: '65c82fcb90080898783119232016e6c079d4b183', ref: el => (this.menuEl = el), class: {
                 'sd-floating-menu': true,
                 [`sd-floating-menu--${tooltipType}`]: true,
                 [`sd-floating-menu--${placement}`]: true,
+                'sd-floating-menu--has-close': this.useClose,
             }, style: {
                 '--sd-floating-bg': typeConfig.bg,
                 '--sd-floating-content': typeConfig.content,
-            }, onMouseEnter: () => this.show(), onMouseLeave: () => this.startHideTimer() }, hAsync("i", { key: '2120f9056ef18218b2ba55d5c921fef9c9a04d67', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, hAsync(TooltipArrow, { key: '557f9ae13f101416d962a84438690078fa7bd16f' })), hAsync("div", { key: '54fb0f3cf0f228184f2eca54a5f3364084b6f834', class: "sd-floating-menu__content", innerHTML: this.slotContentHTML }))))));
+            }, onMouseEnter: () => this.openTooltip(), onMouseLeave: () => this.startHideTimer() }, hAsync("i", { key: '81e2e2cd64f6c656ea307176c58b93a3b886e79d', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, hAsync(TooltipArrow, { key: '7ced7bc259479dda4bddf22120cb6c22d61aaf3b' })), hAsync("div", { key: '62b4ed5852825ba3de9095cd1b81423f44a768fb', class: "sd-floating-menu__content", innerHTML: bodyHTML }), this.useClose && (hAsync("sd-ghost-button", { key: 'e0834930b12d7a1e3ff2151d733a84765ecd0535', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xxs", onClick: this.handleClose })))))));
     }
     static get style() { return sdTooltipCss(); }
     static get cmpMeta() { return {
-        "$flags$": 512,
+        "$flags$": 772,
         "$tagName$": "sd-tooltip",
         "$members$": {
             "trigger": [1],
@@ -17980,9 +18025,15 @@ class SdTooltip {
             "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]
+            "slotContentHTML": [32],
+            "show": [64],
+            "hide": [64]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sellmate/design-system",
-  "version": "1.11.0",
+  "version": "1.13.0",
   "description": "Sellmate Design System - Web Components Library built with Stencil",
   "keywords": [
     "web-components",

package/dist/components/p-9S3tUKro.js

@@ -1 +0,0 @@
-import{p as t,H as e,h as s,F as i,t as o}from"./p-BFjxNqDj.js";import{T as n}from"./p-D9fTZjTl.js";import{d as a}from"./p-BklUnzX5.js";import{d as l}from"./p-D8F2mTyh.js";import{d as c}from"./p-BoXTUvyq.js";var d={bg:"#07284A",content:"#FFFFFF"},r={bg:"#FCEFEF",content:"#FB4444"},h={bg:"#FEF1EA",content:"#FF6B00"},f={bg:"#E6F1FF",content:"#0075FF"};const p={default:{bg:d.bg,content:d.content},danger:{bg:r.bg,content:r.content},warning:{bg:h.bg,content:h.content},accent:{bg:f.bg,content:f.content}},m=t(class t extends e{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";sdClass="";showTooltip=!1;slotContentHTML="";buttonEl;menuEl;hideTimeout;closeTimeout;static CLOSE_ANIM_MS=150;show=()=>{this.cancelHideTimer(),this.showTooltip=!0,this.menuEl&&this.menuEl.classList.remove("sd-floating-menu--closing")};hide=()=>{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.hide()),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.hide();componentWillLoad(){this.slotContentHTML=this.el.innerHTML,this.el.replaceChildren(),this.el.classList.toggle("visible",!0)}render(){const t=this.trigger??"hover",e=this.placement??"top",o=this.tooltipType??"default",a=this.icon??"helpOutline",l=this.color??"#01BB4B",c=p[o]??p.default,d=()=>this.showTooltip=!this.showTooltip,r=void 0!==this.label&&""!==this.label;return s(i,{key:"dab010e285f9cf77097b2d18115d1c8dbb462933"},s("div",{key:"c49d1f8d55898cedc462fd321ab47d8a82360ae8",class:`sd-tooltip-trigger ${void 0!==this.sdClass&&""!==this.sdClass?this.sdClass:""}`,..."hover"===t?{onMouseEnter:()=>this.show(),onMouseLeave:()=>this.startHideTimer()}:r?{}:{onClick:d}},r?s("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",..."click"===t&&r?{onSdClick:d}:{}}):s("sd-icon",{ref:t=>this.buttonEl=t,name:a,size:this.iconSize??12,color:l,class:"sd-tooltip"})),this.showTooltip&&s("sd-floating-portal",{key:"53dbdd7df43e2eacf23c2e1b97bf901b225eab1e",parentRef:this.buttonEl,onSdClose:this.handleClose,placement:e,offset:this.tooltipOffset},s("div",{key:"3130ace8e25b783d49fde3b682249a8cf1783cde",ref:t=>this.menuEl=t,class:{"sd-floating-menu":!0,[`sd-floating-menu--${o}`]:!0,[`sd-floating-menu--${e}`]:!0},style:{"--sd-floating-bg":c.bg,"--sd-floating-content":c.content},onMouseEnter:()=>this.show(),onMouseLeave:()=>this.startHideTimer()},s("i",{key:"2120f9056ef18218b2ba55d5c921fef9c9a04d67",class:`sd-floating-menu__arrow sd-floating-menu__arrow--${e}`},s(n,{key:"557f9ae13f101416d962a84438690078fa7bd16f"})),s("div",{key:"54fb0f3cf0f228184f2eca54a5f3364084b6f834",class:"sd-floating-menu__content",innerHTML:this.slotContentHTML}))))}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}"}},[512,"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],sdClass:[1,"sd-class"],showTooltip:[32],slotContentHTML:[32]}]);function b(){"undefined"!=typeof customElements&&["sd-tooltip","sd-button","sd-floating-portal","sd-icon"].forEach((t=>{switch(t){case"sd-tooltip":customElements.get(o(t))||customElements.define(o(t),m);break;case"sd-button":customElements.get(o(t))||a();break;case"sd-floating-portal":customElements.get(o(t))||l();break;case"sd-icon":customElements.get(o(t))||c()}}))}export{m as S,b as d}

package/dist/components/p-B-pYYTgJ.js

@@ -1 +0,0 @@
-import{p as t,H as e,c as s,h as i,d as o,t as l}from"./p-BFjxNqDj.js";import{T as r}from"./p-sZMi_32I.js";import{a,r as h,e as n,c,f as d,g as b,h as p,i as f}from"./p-DGyTYauz.js";import{d as y}from"./p-BklUnzX5.js";import{d as g}from"./p-DG5mmAZR.js";import{d as m}from"./p-D8F2mTyh.js";import{d as u}from"./p-BoXTUvyq.js";import{d as x}from"./p-9S3tUKro.js";const k=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.sdColumnSort=s(this,"sdColumnSort",7)}get el(){return this}columns;selectable;resizable;stickyColumn;stickyHeader;scrolledLeft;scrolledRight;rows=[];columnWidths=[];sdColumnSort;tableId="";_columns=[];_selectable=!1;_resizable=!1;_stickyColumn={left:0,right:0};_stickyHeader=!1;_scrolledLeft=!1;_scrolledRight=!1;tableEl=null;handleColumnsChange(t){Array.isArray(t)&&0===(this.columnWidths??[]).length&&(this.columnWidths=t.map((t=>t.autoWidth?0:parseInt(t.width||"120",10))))}componentWillLoad(){this.syncTableContext(),this.columnWidths=Array.isArray(this.columnWidths)?this.columnWidths:[],this.resolveConfig(),0===(this.columnWidths??[]).length&&(this.columnWidths=this._columns.map((t=>t.autoWidth?0:parseInt(t.width||"120",10))))}componentDidLoad(){this.syncTableContext(),this.resolveConfig()}syncTableContext(){const t=this.el.closest("sd-table"),e=this.el.getRootNode(),s=e instanceof ShadowRoot?e.host:null,i=t??s;this.tableEl=i;const o=i?.getTableIdSync?.(),l=i?.getAttribute(r),a=(null!=o&&""!==o&&"undefined"!==o?o:null)??(null!=l&&""!==l&&"undefined"!==l?l:null)??"";""!==a&&a!==this.tableId&&(this.tableId=a)}resolveConfig(){const t=this.tableEl?.getConfigSync?.(),e=Array.isArray(this.columns)?this.columns:Array.isArray(t?.columns)?t.columns:[];this._columns=e,this._selectable=this.selectable??t?.selectable??!1,this._resizable=this.resizable??t?.resizable??!1,this._stickyColumn=this.stickyColumn??t?.stickyColumn??{left:0,right:0},this._stickyHeader=this.stickyHeader??t?.stickyHeader??!1,this._scrolledLeft=this.scrolledLeft??t?.scrolledLeft??!1,this._scrolledRight=this.scrolledRight??t?.scrolledRight??!1,Array.isArray(t?.columnWidths)&&0===(this.columnWidths??[]).length&&(this.columnWidths=[...t.columnWidths]),Array.isArray(this.columnWidths)||(this.columnWidths=[])}async refreshConfig(){this.resolveConfig()}async setColumnWidths(t){this.columnWidths=Array.isArray(t)?t:[]}async refreshSelection(){const t=this.el.querySelector("sd-checkbox");t&&(t.value=this.getIsAllChecked())}get visibleColumns(){return this._columns.filter((t=>!1!==t.visible))}getStickyStyle(t){if(this.tableEl?.getStickyStyleSync)return this.tableEl.getStickyStyleSync(t);const e=this.columnWidths.slice(0,t).reduce(((t,e)=>t+e),0)+(this._selectable?a:0),s=this.columnWidths.filter(((e,s)=>s>=this.visibleColumns.length-(this._stickyColumn.right||0)&&s>t)).reduce(((t,e)=>t+e),0),i=this.visibleColumns[t],o={"--sticky-left-offset":`${e}px`,"--sticky-right-offset":`${s}px`};return i?.autoWidth||(o.width=`${this.columnWidths[t]}px`,o.minWidth=`${this.columnWidths[t]}px`,o.maxWidth=`${this.columnWidths[t]}px`),o}handleResize(t,e,s=!1){this.tableEl?.handleResize&&this.tableEl.handleResize(t,e,s)}handleColumnSort=t=>{this.sdColumnSort.emit({column:t})};handleSelectAll(t){const e=!!t,s=Array.isArray(this.rows)?this.rows:[];this.tableEl?.toggleSelectAllSync&&this.tableEl.toggleSelectAllSync(e,s)}getIsAllChecked(){const t=Array.isArray(this.rows)?this.rows:[];return!!(this.tableEl?.getIsAllCheckedSync&&t.length>0)&&this.tableEl.getIsAllCheckedSync(t)}render(){const t=Array.isArray(this.rows)?this.rows:[],e=this._stickyColumn.left||0,s=this._stickyColumn.right||0,l=this.visibleColumns.slice(0,e),r=this.visibleColumns.slice(e,this.visibleColumns.length-s),a=this.visibleColumns.slice(this.visibleColumns.length-s),y=this.visibleColumns.length-1;return i(o,{key:"822abd0e5ff71d9e55b6478d56c9277009983deb",slot:`${this.tableId}-head`,style:{"--table-header-height":`${f.height}px`,"--table-header-padding-x":`${f.paddingX}px`,"--table-header-gap":`${f.gap}px`,"--table-header-bg":p.bg,"--table-header-font-family":b.fontFamily,"--table-header-font-weight":b.fontWeight,"--table-header-font-size":`${b.fontSize}px`,"--table-header-line-height":`${b.lineHeight}px`,"--table-header-text-decoration":b.textDecoration,"--table-header-resizer-color":d.color,"--table-header-resizer-height":`${d.height}px`,"--table-border-color":c.color,"--table-border-width":`${c.width}px`}},i("thead",{key:"7c690c49eb0d9be48637b8a6e92287fac22bf377",class:{thead:!0,"thead--sticky":this._stickyHeader}},i("tr",{key:"81c64bb5b06d7e8525ebceaf6a229034e90f7a48",class:"tr"},this._selectable&&i("th",{key:"fe00535fb5cd54d053c17b3d3a6fa8869d483b8b",class:{th:!0,"th--selected":!0,"sticky-left":!0,"sticky-left-edge":0===e,"is-scrolled-left":0===e&&this._scrolledLeft},style:{"--sticky-left-offset":"0px"}},i("sd-checkbox",{key:"de1a3ddf9b3df06d8cc9b85431c31ff84b7b8218",value:this.getIsAllChecked(),disabled:0===t.length,onSdUpdate:t=>this.handleSelectAll(t.detail)}),i("div",{key:"afe516ce212b24abcb075b6e6eb661ffcb6ce297",class:"th__bar"})),l.map(((t,s)=>i("th",{key:t.name,class:{th:!0,[`${t.thClass}`]:Boolean(t.thClass),"sticky-left":!0,"sticky-left-edge":s===e-1,"is-scrolled-left":s===e-1&&this._scrolledLeft},style:{...t.thStyle,...this.getStickyStyle(s)}},i("div",{class:`th__content th__content--${t.align||"left"}`},i("div",{class:"th__content--label"},t.label),t.icon&&i("sd-icon",{name:t.icon,size:"12",color:h(t.icon,t.iconColor)}),t.sort&&i("sd-icon",{name:n(t.sort),size:"12",color:h(n(t.sort),t.iconColor),onClick:()=>this.handleColumnSort(t),style:{cursor:"pointer"}}),t.tooltip&&i("sd-tooltip",{...t.tooltipOptions},i("div",{slot:"content"},t.tooltip.map((t=>i("p",null,t)))))),this._resizable&&s!==y&&i("div",{class:"th__resizer",onMouseDown:t=>this.handleResize(s,t)})))),r.map(((t,s)=>{const o=e+s;return i("th",{key:t.name,class:{th:!0,[`${t.thClass}`]:Boolean(t.thClass)},style:{...t.thStyle,...this.getStickyStyle(o)}},i("div",{class:`th__content th__content--${t.align||"left"}`},i("div",{class:"th__content--label"},t.label),t.icon&&i("sd-icon",{name:t.icon,size:"12",color:h(t.icon,t.iconColor)}),t.sort&&i("sd-icon",{name:n(t.sort),size:"12",color:h(n(t.sort),t.iconColor),onClick:()=>this.handleColumnSort(t),style:{cursor:"pointer"}}),t.tooltip&&i("sd-tooltip",{...t.tooltipOptions},i("div",{slot:"content"},t.tooltip.map((t=>i("p",null,t)))))),this._resizable&&o!==y&&i("div",{class:"th__resizer",onMouseDown:t=>this.handleResize(o,t)}))})),a.map(((t,e)=>{const o=this.visibleColumns.length-s+e;return i("th",{key:t.name,class:{th:!0,[`${t.thClass}`]:Boolean(t.thClass),"sticky-right":!0,"sticky-right-edge":0===e,"is-scrolled-right":0===e&&this._scrolledRight},style:{...t.thStyle,...this.getStickyStyle(o)}},i("div",{class:`th__content th__content--${t.align||"left"}`},i("div",{class:"th__content--label"},t.label),t.icon&&i("sd-icon",{name:t.icon,size:"12",color:h(t.icon,t.iconColor)}),t.sort&&i("sd-icon",{name:n(t.sort),size:"12",color:h(n(t.sort),t.iconColor),onClick:()=>this.handleColumnSort(t),style:{cursor:"pointer"}}),t.tooltip&&i("sd-tooltip",{...t.tooltipOptions},i("div",{slot:"content"},t.tooltip.map((t=>i("p",null,t)))))),this._resizable&&i("div",{class:"th__resizer th__resizer--left",onMouseDown:t=>this.handleResize(o,t,!0)}))})))))}static get watchers(){return{columns:[{handleColumnsChange:0}]}}static get style(){return'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__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}'}},[512,"sd-thead",{columns:[16],selectable:[4],resizable:[4],stickyColumn:[16],stickyHeader:[4,"sticky-header"],scrolledLeft:[4,"scrolled-left"],scrolledRight:[4,"scrolled-right"],rows:[16],columnWidths:[1040],tableId:[32],_columns:[32],_selectable:[32],_resizable:[32],_stickyColumn:[32],_stickyHeader:[32],_scrolledLeft:[32],_scrolledRight:[32],refreshConfig:[64],setColumnWidths:[64],refreshSelection:[64]},void 0,{columns:[{handleColumnsChange:0}]}]);function _(){"undefined"!=typeof customElements&&["sd-thead","sd-button","sd-checkbox","sd-floating-portal","sd-icon","sd-tooltip"].forEach((t=>{switch(t){case"sd-thead":customElements.get(l(t))||customElements.define(l(t),k);break;case"sd-button":customElements.get(l(t))||y();break;case"sd-checkbox":customElements.get(l(t))||g();break;case"sd-floating-portal":customElements.get(l(t))||m();break;case"sd-icon":customElements.get(l(t))||u();break;case"sd-tooltip":customElements.get(l(t))||x()}}))}export{k as S,_ as d}

package/dist/components/p-BkL6ut5U.js

@@ -1 +0,0 @@
-import{p as t,H as e,c as s,h as i,t as o}from"./p-BFjxNqDj.js";import{n as r}from"./p-CCwNgVmC.js";import{d as l}from"./p-BklUnzX5.js";import{d as h}from"./p-DG5mmAZR.js";import{d as a}from"./p-F7m_gfg2.js";import{d}from"./p-D8F2mTyh.js";import{d as n}from"./p-BoXTUvyq.js";import{d as c}from"./p-BdmCYhiG.js";import{d as p}from"./p-C9pDOVrU.js";import{d as m}from"./p-KENiwV56.js";import{d as u}from"./p-CZP1wFmE.js";import{d as f}from"./p-CcyPWdvG.js";import{d as g}from"./p-9S3tUKro.js";const b=t(class t extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.update=s(this,"sdUpdate",7),this.dropDownShow=s(this,"sdDropDownShow",7)}static VIEWPORT_PADDING=20;static PORTAL_OFFSET_Y=4;static CLOSE_ANIMATION_DURATION=150;get el(){return this}type="default";value=null;options=[];placeholder="선택";maxDropdownWidth="640px";dropdownHeight="260px";disabled=!1;label="";labelWidth="";addonLabel="";addonAlign="start";error=!1;hint="";errorMessage="";rules=[];icon=void 0;labelTooltip="";labelTooltipProps=null;emitValue=!1;width="";useSearch=!1;allSelectedLabel="전체";useSelectAll=!1;isOpen=!1;isAnimatingOut=!1;triggerWidth="200px";resolvedDropdownHeight="260px";resolvedMaxDropdownWidth="640px";focused=!1;hovered=!1;update;dropDownShow;async sdFocus(){this.disabled||await(this.triggerComponentRef?.sdFocus())}async sdOpen(){await new Promise((t=>setTimeout(t,0))),this.disabled||this.isOpen||(this.prepareDropdownGeometry(),this.closeAnimationTimer&&clearTimeout(this.closeAnimationTimer),this.isAnimatingOut=!1,this.isOpen=!0)}triggerRef;triggerComponentRef;closeAnimationTimer;name=r();triggerHasFocus=!1;watchIsOpen(t){this.syncFocusedState(t),this.dropDownShow.emit({isOpen:t})}get isMulti(){return"multi"===this.type||"multi_depth"===this.type}get displayText(){if(this.isMulti){if(!Array.isArray(this.value)||0===this.value.length)return"";const t=this.getNonDisabledLeaves(this.options),e=this.getSelectedOptions();if(t.length>0&&t.every((t=>e.some((e=>e.value===t.value)))))return this.allSelectedLabel??"전체";const s=this.flattenOptions(this.options);return this.value.map((t=>{if(null!=t&&"object"==typeof t){const e=t;return e.label??s.find((t=>t.value===e.value))?.label??""}return s.find((e=>e.value===t))?.label??""})).filter(Boolean).join(", ")}if(null==this.value)return"";if(!this.emitValue&&"object"==typeof this.value&&!Array.isArray(this.value))return this.value.label??"";const t=this.flattenOptions(this.options);return t.find((t=>t.value===this.value))?.label??""}flattenOptions(t){return t.flatMap((t=>t.children?this.flattenOptions(t.children):[t]))}getNonDisabledLeaves(t){return t.flatMap((t=>t.disabled?[]:t.children?this.getNonDisabledLeaves(t.children):[t]))}getSelectedOptions(){const t=this.value;return null!=t&&Array.isArray(t)?this.emitValue?t.map((t=>this.findOriginalOption(t,this.options))).filter((t=>!!t)):t:[]}toMultiValue(t){return this.emitValue?t.map((t=>t.value)):t}parsePixelValue(t,e){const s=Number.parseFloat(t);return Number.isFinite(s)?s:e}updateDropdownViewportConstraints(){if(!this.triggerRef)return;const e=this.triggerRef.getBoundingClientRect(),s=t.VIEWPORT_PADDING,i=t.PORTAL_OFFSET_Y,o=this.parsePixelValue(this.dropdownHeight,260),r=this.parsePixelValue(this.maxDropdownWidth,640),l=Math.max(window.innerHeight-e.bottom-s-i,0),h=Math.max(e.top-s-i,0),a=Math.max(l,h),d=Math.max(window.innerWidth-2*s,0);this.resolvedDropdownHeight=`${Math.min(o,a)}px`,this.resolvedMaxDropdownWidth=`${Math.min(r,d)}px`}handleViewportResize=()=>{this.isOpen&&this.updateDropdownViewportConstraints()};findOriginalOption(t,e){for(const s of e){if(s.value===t)return s;if(s.children){const e=this.findOriginalOption(t,s.children);if(e)return e}}}closeDropdown(){this.isOpen&&(this.isOpen=!1,this.isAnimatingOut=!0,this.closeAnimationTimer&&clearTimeout(this.closeAnimationTimer),this.closeAnimationTimer=setTimeout((()=>{this.isAnimatingOut=!1}),t.CLOSE_ANIMATION_DURATION))}prepareDropdownGeometry(){this.triggerRef&&(this.triggerWidth=`${this.triggerRef.offsetWidth}px`),this.updateDropdownViewportConstraints()}syncFocusedState(t=this.isOpen){this.focused=t||this.triggerHasFocus}handleTriggerFocus=()=>{this.triggerHasFocus=!0,this.syncFocusedState()};handleTriggerBlur=()=>{this.triggerHasFocus=!1,this.syncFocusedState()};handleTriggerClick=()=>{this.isOpen?this.closeDropdown():(this.prepareDropdownGeometry(),this.closeAnimationTimer&&clearTimeout(this.closeAnimationTimer),this.isAnimatingOut=!1,this.isOpen=!0)};emitUpdate(t){this.update.emit(t)}handleOptionSelect=t=>{const{option:e,leaves:s}=t;if(this.isMulti)this.handleMultiSelect(e,s);else{this.closeDropdown(),this.value=this.emitValue?e.value:e;const t=this.value;requestAnimationFrame((()=>{this.emitUpdate(t)}))}};handleMultiSelect(t,e){const s=this.getSelectedOptions();let i;if(t.children)if(e.every((t=>s.some((e=>e.value===t.value))))){const t=new Set(e.map((t=>t.value)));i=s.filter((e=>!t.has(e.value)))}else{const t=new Set(s.map((t=>t.value))),o=e.filter((e=>!t.has(e.value)));i=[...s,...o]}else i=s.some((e=>e.value===t.value))?s.filter((e=>e.value!==t.value)):[...s,t];this.value=this.toMultiValue(i),this.emitUpdate(this.value)}connectedCallback(){window.addEventListener("resize",this.handleViewportResize)}disconnectedCallback(){window.removeEventListener("resize",this.handleViewportResize),this.closeAnimationTimer&&clearTimeout(this.closeAnimationTimer)}render(){const e={open:this.isOpen,parentRef:this.triggerRef,viewportPadding:t.VIEWPORT_PADDING,onSdClose:()=>{this.closeDropdown()}};return i("sd-field",{key:"d3c3175067494715963592806a150bebadd8970c",name:this.name,label:this.label,labelWidth:this.labelWidth,addonLabel:this.addonLabel,addonAlign:this.addonAlign,hint:this.hint,errorMessage:this.errorMessage,width:this.width,rules:this.rules,error:this.error,disabled:this.disabled,focused:this.focused,hovered:this.hovered,icon:this.icon,labelTooltip:this.labelTooltip,labelTooltipProps:this.labelTooltipProps,onMouseEnter:()=>{this.hovered=!0},onMouseLeave:()=>{this.hovered=!1}},i("div",{key:"c291b661a968375c341d26ac48f7ff7fd4947e3e",class:"sd-select",ref:t=>{this.triggerRef=t}},i("sd-select-trigger",{key:"45da184f72f989d9c6be05479fec7a616f168ddf",ref:t=>{this.triggerComponentRef=t},displayText:this.displayText,placeholder:this.placeholder??"선택",disabled:this.disabled,isOpen:this.isOpen,onSdTriggerClick:this.handleTriggerClick,onSdTriggerFocus:this.handleTriggerFocus,onSdTriggerBlur:this.handleTriggerBlur})),(this.isOpen||this.isAnimatingOut)&&i("sd-portal",{key:"bd7a612cf9ef74e157336a8de0170cebb61074dc",...e},i("sd-select-listbox",{key:"8117fab3ef6b2f5f77e74a234c6b21dfc2549df1",type:this.type,options:this.options,value:this.value,emitValue:this.emitValue,useSearch:this.useSearch,useSelectAll:this.useSelectAll,triggerWidth:this.triggerWidth,maxWidth:this.resolvedMaxDropdownWidth,maxHeight:this.resolvedDropdownHeight,onSdOptionSelect:t=>this.handleOptionSelect(t.detail)})))}static get watchers(){return{isOpen:[{watchIsOpen:0}]}}static get style(){return"sd-select{display:inline-flex}sd-select sd-portal{display:none}sd-select .sd-select{position:relative;width:100%;height:100%}"}},[512,"sd-select",{type:[1],value:[1032],options:[16],placeholder:[1],maxDropdownWidth:[1,"max-dropdown-width"],dropdownHeight:[1,"dropdown-height"],disabled:[4],label:[1],labelWidth:[8,"label-width"],addonLabel:[1,"addon-label"],addonAlign:[1,"addon-align"],error:[1028],hint:[1],errorMessage:[1,"error-message"],rules:[16],icon:[16],labelTooltip:[1,"label-tooltip"],labelTooltipProps:[16],emitValue:[4,"emit-value"],width:[8],useSearch:[4,"use-search"],allSelectedLabel:[1,"all-selected-label"],useSelectAll:[4,"use-select-all"],name:[1],isOpen:[32],isAnimatingOut:[32],triggerWidth:[32],resolvedDropdownHeight:[32],resolvedMaxDropdownWidth:[32],focused:[32],hovered:[32],sdFocus:[64],sdOpen:[64]},void 0,{isOpen:[{watchIsOpen:0}]}]);function w(){"undefined"!=typeof customElements&&["sd-select","sd-button","sd-checkbox","sd-field","sd-floating-portal","sd-icon","sd-portal","sd-select-list-item","sd-select-list-item-search","sd-select-listbox","sd-select-trigger","sd-tooltip"].forEach((t=>{switch(t){case"sd-select":customElements.get(o(t))||customElements.define(o(t),b);break;case"sd-button":customElements.get(o(t))||l();break;case"sd-checkbox":customElements.get(o(t))||h();break;case"sd-field":customElements.get(o(t))||a();break;case"sd-floating-portal":customElements.get(o(t))||d();break;case"sd-icon":customElements.get(o(t))||n();break;case"sd-portal":customElements.get(o(t))||c();break;case"sd-select-list-item":customElements.get(o(t))||p();break;case"sd-select-list-item-search":customElements.get(o(t))||m();break;case"sd-select-listbox":customElements.get(o(t))||u();break;case"sd-select-trigger":customElements.get(o(t))||f();break;case"sd-tooltip":customElements.get(o(t))||g()}}))}export{b as S,w as d}

package/dist/components/p-C8vzShov.js

@@ -1 +0,0 @@
-import{p as e,H as t,c as a,h as s,t as d}from"./p-BFjxNqDj.js";import{n as i}from"./p-CCwNgVmC.js";import{i as r}from"./p-e0ABNkP6.js";import{d as l}from"./p-BklUnzX5.js";import{d as o}from"./p-F7m_gfg2.js";import{d as n}from"./p-D8F2mTyh.js";import{d as h}from"./p-BoXTUvyq.js";import{d as c}from"./p-9S3tUKro.js";const u={paddingX:r.textinput.sm.paddingX,paddingY:r.textinput.sm.paddingY,radius:r.textinput.sm.radius,fontSize:r.textinput.sm.typography.fontSize,lineHeight:r.textinput.sm.typography.lineHeight,fontWeight:r.textinput.sm.typography.fontWeight},x={text:r.textinput.text,bg:r.textinput.bg,border:r.textinput.border,resizer:r.textinput.resizer},p=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.input=a(this,"sdUpdate",7),this.focus=a(this,"sdFocus",7),this.blur=a(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=i();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 s("sd-field",{key:"2a1cd03e4f0fa5457b3164f1b6b71d808633414c",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":`${u.fontSize}px`,"--sd-textarea-line-height":`${u.lineHeight}px`,"--sd-textarea-font-weight":u.fontWeight,"--sd-textarea-padding-x":`${u.paddingX}px`,"--sd-textarea-padding-y":`${u.paddingY}px`,"--sd-textarea-radius":`${u.radius}px`,"--sd-textarea-text-color":x.text.default,"--sd-textarea-placeholder-color":x.text.placeholder,"--sd-textarea-disabled-color":x.text.disabled,"--sd-textarea-bg-color":x.bg.default,"--sd-textarea-disabled-bg-color":x.bg.disabled,"--sd-textarea-border-color":x.border.default,"--sd-textarea-resizer-color":x.resizer.color,"--sd-system-size-field-sm-height":"auto","--sd-system-radius-field-sm":`${u.radius}px`}},s("div",{key:"b4e25ced8e583ed3d6e8a6026db0d3a2f198acb4",class:"sd-textarea__content"},s("textarea",{key:"4faeceee380a7ab9a4ff337d16f46c4d7f42fa50",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 m(){"undefined"!=typeof customElements&&["sd-textarea","sd-button","sd-field","sd-floating-portal","sd-icon","sd-tooltip"].forEach((e=>{switch(e){case"sd-textarea":customElements.get(d(e))||customElements.define(d(e),p);break;case"sd-button":customElements.get(d(e))||l();break;case"sd-field":customElements.get(d(e))||o();break;case"sd-floating-portal":customElements.get(d(e))||n();break;case"sd-icon":customElements.get(d(e))||h();break;case"sd-tooltip":customElements.get(d(e))||c()}}))}export{p as S,m as d}

package/dist/components/p-F7m_gfg2.js

@@ -1 +0,0 @@
-import{p as e,H as d,h as s,t as i}from"./p-BFjxNqDj.js";import{f as t}from"./p-BOJJ_sQS.js";import{d as l}from"./p-BklUnzX5.js";import{d as r}from"./p-D8F2mTyh.js";import{d as o}from"./p-BoXTUvyq.js";import{d as a}from"./p-9S3tUKro.js";const n={start:"flex-start",center:"center",end:"flex-end"},f=t.field.label.sm,h=t.field.label.md,p={sm:{height:f.height,gap:f.gap,icon:f.icon,fontSize:f.typography.fontSize,lineHeight:f.typography.lineHeight,fontWeight:f.typography.fontWeight},md:{height:h.height,gap:h.gap,icon:h.icon,fontSize:h.typography.fontSize,lineHeight:h.typography.lineHeight,fontWeight:h.typography.fontWeight}},c=["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"],b=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 c){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=t.field.addonLabel,i=this.size in p?this.size:"sm",l=p[i],r={"--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)`},o=""!==this.label?{"--sd-field-label-height":`${l.height}px`,"--sd-field-label-gap":`${l.gap}px`,"--sd-field-label-font-size":`${l.fontSize}px`,"--sd-field-label-line-height":`${l.lineHeight}px`,"--sd-field-label-font-weight":l.fontWeight,...""!==this.labelWidth&&0!==this.labelWidth?{"--sd-field-label-width":"number"==typeof this.labelWidth?`${this.labelWidth}px`:this.labelWidth}:{}}:{},a=""!==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":n[this.addonAlign]??n.start,...""!==this.labelWidth&&0!==this.labelWidth?{"--sd-field-addon-width":"number"==typeof this.labelWidth?`${this.labelWidth}px`:this.labelWidth}:{}}:{};return s("div",{key:"b2a4122378dd725d8b392b89ae44669f097ff767",class:{"sd-field":!0,"sd-field--has-label":""!==this.label,"sd-field--has-addon":""!==e,[this.fieldStatus]:""!==this.fieldStatus},style:{...r,...o,...a}},s("div",{key:"ae6ead740a745248f89a3b9049480954091f5991",class:"sd-field__wrapper"},this.renderLabel(this.label),s("div",{key:"42699ddc5eb366d035986274dcf3ae7c17396e9c",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:"f8c058d44411d27997e90bf3627a4b905f1a6112",class:{"sd-field__control":!0,"sd-field__control--has-addon":""!==e}},e&&s("div",{key:"86592d8a5046853eef3392e598c23d6348313e56",class:"sd-field__addon"},this.icon&&s("sd-icon",{key:"147082f30f173615e9a4253e99eabae868960f6f",name:this.icon.name,size:this.icon.size??Number(p[this.size in p?this.size:"sm"].icon),color:this.icon.color,rotate:this.icon.rotate}),e),s("slot",{key:"a91c7c8ab0075f0cc1d2169b201bf37900872b99"})),""!==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(p[this.size in p?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-textinput-textinput-text-error-message);font-size:var(--sd-textinput-textinput-error-message-typography-font-size);line-height:var(--sd-textinput-textinput-error-message-typography-line-height);margin-top:var(--sd-textinput-textinput-contents-gap)}sd-field .sd-field .sd-field__hint{color:var(--sd-textinput-textinput-text-hint);font-size:var(--sd-textinput-textinput-hint-typography-font-size);line-height:var(--sd-textinput-textinput-hint-typography-line-height);margin-top:var(--sd-textinput-textinput-contents-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-icon","sd-tooltip"].forEach((e=>{switch(e){case"sd-field":customElements.get(i(e))||customElements.define(i(e),b);break;case"sd-button":customElements.get(i(e))||l();break;case"sd-floating-portal":customElements.get(i(e))||r();break;case"sd-icon":customElements.get(i(e))||o();break;case"sd-tooltip":customElements.get(i(e))||a()}}))}export{b as S,u as d}

package/dist/components/p-pt9ANL-l.js

@@ -1 +0,0 @@
-import{p as t,H as e,c as s,h as i,t as n}from"./p-BFjxNqDj.js";import{n as r}from"./p-CCwNgVmC.js";import{f as d}from"./p-BOJJ_sQS.js";import{d as u}from"./p-BklUnzX5.js";import{d as a}from"./p-F7m_gfg2.js";import{d as o}from"./p-D8F2mTyh.js";import{d as l}from"./p-BoXTUvyq.js";import{d as p}from"./p-9S3tUKro.js";var h={numberInput:{sm:{height:"28",paddingX:"6",radius:"4",typography:{fontWeight:"400",fontSize:"12",lineHeight:"20"}},md:{height:"36",paddingX:"8",radius:"6",typography:{fontWeight:"400",fontSize:"14",lineHeight:"24"}},border:{default:"#AAAAAA",focus:"#0075FF",danger:"#FB4444"},bg:{default:"#FFFFFF"},text:{default:"#222222",placeholder:"#AAAAAA",disabled:"#888888"},stepper:{sm:{size:"20"},md:{size:"24"},radius:"4",bg:{default:"#EFF6FF",disabled:"#EEEEEE"},icon:{default:"#0075FF",disabled:"#BBBBBB"}}}};const b=h.numberInput.sm,c=h.numberInput.md,m={sm:{height:b.height,paddingX:b.paddingX,radius:b.radius,fontSize:b.typography.fontSize,lineHeight:b.typography.lineHeight,fontWeight:b.typography.fontWeight},md:{height:c.height,paddingX:c.paddingX,radius:c.radius,fontSize:c.typography.fontSize,lineHeight:c.typography.lineHeight,fontWeight:c.typography.fontWeight}},f={border:h.numberInput.border,bg:h.numberInput.bg,text:h.numberInput.text},g={sm:{size:h.numberInput.stepper.sm.size},md:{size:h.numberInput.stepper.md.size},radius:h.numberInput.stepper.radius,bg:h.numberInput.stepper.bg,icon:h.numberInput.stepper.icon},y=d.field.hint,_=d.field.errorMessage,x=d.field.contents.gap,v=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.update=s(this,"sdUpdate",7),this.focus=s(this,"sdFocus",7),this.blur=s(this,"sdBlur",7)}get el(){return this}size="sm";min=Number.NEGATIVE_INFINITY;max=Number.POSITIVE_INFINITY;step=1;useButton=!1;useDecimal=!1;value=null;label;labelWidth="";icon=void 0;labelTooltip="";labelTooltipProps=null;addonLabel="";addonAlign="start";placeholder="입력해 주세요.";disabled=!1;width;rules=[];autoFocus=!1;status;hint="";errorMessage="";inputPrefix="";inputSuffix="";inputClass="";readonly=!1;inputStyle={};error=!1;focused=!1;hovered=!1;internalValue=null;displayValue="";nativeEl=void 0;formField;name=r();update;focus;blur;toNumber(t){if(null==t||""===t)return null;if("number"==typeof t)return isNaN(t)?null:t;if("string"==typeof t)return this.parseInput(t);const e=Number(t);return isNaN(e)?null:e}formatWithCommas(t){if(null==t||isNaN(t))return"";const e=t<0,s=Math.abs(t),[i,n]=s.toString().split("."),r=(+i).toLocaleString(),d=e?"-"+r:r;return void 0!==n&&""!==n?d+"."+n:String(d)}parseInput(t){if(""===t.trim())return null;const e=t.replace(/,/g,"").trim();if(!/^-?(\d+\.?\d*|\d*\.\d+)$/.test(e))return null;const s=parseFloat(e);return isNaN(s)||!this.useDecimal&&e.includes(".")?null:s}clampMinMax(t){return isNaN(t)?0:Math.min(Math.max(t,this.min),this.max)}updateDisplay(){this.displayValue=this.formatWithCommas(this.internalValue)}isIncrementDisabled(){return!(!this.disabled&&!this.readonly)||null!==this.internalValue&&this.internalValue>=this.max}isDecrementDisabled(){return!(!this.disabled&&!this.readonly)||null!==this.internalValue&&this.internalValue<=this.min}valueChanged(t){const e=this.toNumber(t);this.internalValue=null!==e?this.clampMinMax(e):null,this.updateDisplay()}internalValueChanged(t){this.updateDisplay(),t!==this.value&&(this.value=t,this.update?.emit(t))}async sdValidate(){this.formField?.sdValidate()}async sdReset(){this.formField?.sdReset()}async sdResetValidate(){this.formField?.sdResetValidation()}async sdFocus(){this.formField?.sdFocus()}async sdGetNativeElement(){return this.nativeEl||null}componentWillLoad(){const t=this.toNumber(this.value);null!==t&&(this.internalValue=this.clampMinMax(t)),this.updateDisplay()}componentDidLoad(){this.autoFocus&&this.nativeEl?.focus()}handleInput=t=>{const e=t.target,s=e.value;if(""===s)return this.internalValue=null,void(this.displayValue="");const i=s.replace(/,/g,""),n=(i.match(/\./g)||[]).length;if(n>1)return void(e.value=this.displayValue);if("-"===i||"."===i||"-."===i)return void(e.value=i);if(i.endsWith(".")&&1===n){const t=i.slice(0,-1),s=this.parseInput(t);if(null!==s){const t=this.formatWithCommas(s);return void(e.value=t+".")}}const r=this.parseInput(i);if(null!==r){if(r<this.min)return void(e.value=this.displayValue);if(r>this.max)return void(e.value=this.displayValue);this.internalValue=r,this.displayValue=this.formatWithCommas(r),e.value=this.displayValue}else e.value=this.displayValue};handleFocus=t=>{this.focused=!0,this.focus?.emit(t)};handleBlur=async t=>{this.updateDisplay(),this.nativeEl&&(this.nativeEl.value=this.displayValue),this.rules&&this.rules.length>0&&await(this.formField?.sdValidate()),this.focused=!1,this.blur?.emit(t)};handleKeyDown=t=>{"ArrowUp"===t.key?(t.preventDefault(),this.handleIncrement()):"ArrowDown"===t.key&&(t.preventDefault(),this.handleDecrement())};handleIncrement=()=>{if(this.isIncrementDisabled())return;const t=this.internalValue??this.min??0;let e=t+this.step;e>this.max&&(e=this.max),e!==t&&(this.internalValue=e)};handleDecrement=()=>{if(this.isDecrementDisabled())return;const t=this.internalValue??this.min??0;let e=t-this.step;e<this.min&&(e=this.min),e!==t&&(this.internalValue=e)};render(){const t=m[this.size]??m.sm,e="md"===this.size?14:12;return i("sd-field",{key:"53c6935bbf98ed1eb0f28d6bed675ea369b0b2bc",name:this.name,label:this.label,labelWidth:this.labelWidth,addonLabel:this.addonLabel,addonAlign:this.addonAlign,hint:this.hint,errorMessage:this.errorMessage,width:this.width,rules:this.rules,error:this.error,disabled:this.disabled,readonly:this.readonly,focused:this.focused,hovered:this.hovered,status:this.status,size:this.size,icon:this.icon,labelTooltip:this.labelTooltip,labelTooltipProps:this.labelTooltipProps,ref:t=>this.formField=t,onMouseEnter:()=>this.hovered=!0,onMouseLeave:()=>this.hovered=!1,style:{"--sd-number-input-font-size":`${t.fontSize}px`,"--sd-number-input-line-height":`${t.lineHeight}px`,"--sd-number-input-font-weight":t.fontWeight,"--sd-number-input-padding-x":`${t.paddingX}px`,"--sd-number-input-text-color":f.text.default,"--sd-number-input-placeholder-color":f.text.placeholder,"--sd-number-input-disabled-color":f.text.disabled,"--sd-number-input-stepper-size":`${g[this.size]?.size??g.sm.size}px`,"--sd-number-input-stepper-radius":`${g.radius}px`,"--sd-number-input-stepper-bg":g.bg.default,"--sd-number-input-stepper-bg-disabled":g.bg.disabled,"--sd-number-input-stepper-icon-color":g.icon.default,"--sd-number-input-stepper-icon-disabled":g.icon.disabled,"--sd-system-size-field-sm-height":`${t.height}px`,"--sd-system-radius-field-sm":`${t.radius}px`,"--sd-system-color-field-border-default":f.border.default,"--sd-system-color-field-border-focus":f.border.focus,"--sd-system-color-field-border-danger":f.border.danger,"--sd-system-color-field-bg-default":f.bg.default,"--sd-textinput-input-text-error-message":_.color,"--sd-textinput-input-error-message-typography-font-size":`${_.typography.fontSize}px`,"--sd-textinput-input-error-message-typography-line-height":`${_.typography.lineHeight}px`,"--sd-textinput-input-text-hint":y.color,"--sd-textinput-input-hint-typography-font-size":`${y.typography.fontSize}px`,"--sd-textinput-input-hint-typography-line-height":`${y.typography.lineHeight}px`,"--sd-textinput-input-contents-gap":`${x}px`}},i("div",{key:"8f0da8b179cd3946d625ab6b525a2ffd614a5333",class:{"sd-number-input__content":!0,"sd-number-input__content--no-stepper":!this.useButton}},this.useButton&&i("button",{key:"1be42c16d5e671c567d4768f505c2c17c50f1b60",type:"button",class:"sd-number-input__stepper sd-number-input__stepper--decrement",disabled:this.isDecrementDisabled(),onClick:this.handleDecrement,tabindex:-1},i("sd-icon",{key:"dc074328208c8da2ee43ea2cb03dbc838b7d46c9",name:"minus",size:e,color:this.isDecrementDisabled()?g.icon.disabled:g.icon.default})),this.inputPrefix&&i("span",{key:"84896d40d79e936480052ab45d618cd73550ee87",class:"sd-number-input__prefix"},this.inputPrefix),i("input",{key:"f2c8995b6c059c2a4130018b2ff0c7eabcd7abfb",name:this.name,ref:t=>this.nativeEl=t,class:`sd-number-input__native ${this.inputClass}`,type:"text",inputMode:"numeric",value:this.displayValue,placeholder:this.placeholder??"입력해 주세요.",disabled:this.disabled,readonly:this.readonly,autofocus:this.autoFocus,onInput:this.handleInput,onKeyDown:this.handleKeyDown,onFocus:this.handleFocus,onBlur:this.handleBlur,style:{textAlign:this.useButton?"center":"right",...this.inputStyle}}),this.inputSuffix&&i("span",{key:"d6b1ca9f5991f1b2382dd4a35ae4f20832192e3c",class:"sd-number-input__suffix"},this.inputSuffix),this.useButton&&i("button",{key:"56a59f94ca27e8ef4255cabdd5fe003c602bb8d6",type:"button",class:"sd-number-input__stepper sd-number-input__stepper--increment",disabled:this.isIncrementDisabled(),onClick:this.handleIncrement,tabindex:-1},i("sd-icon",{key:"1b8fca91e893b5ade47ed63db4d4d54933c94e53",name:"add",size:e,color:this.isIncrementDisabled()?g.icon.disabled:g.icon.default}))))}static get watchers(){return{value:[{valueChanged:0}],internalValue:[{internalValueChanged:0}]}}static get style(){return"sd-number-input{display:inline-flex}sd-number-input .sd-number-input__content{width:100%;height:100%;display:flex;flex-flow:row nowrap;align-items:center;gap:var(--sd-number-input-padding-x);color:var(--sd-number-input-text-color);font-size:var(--sd-number-input-font-size);line-height:var(--sd-number-input-line-height);font-weight:var(--sd-number-input-font-weight);padding:0 var(--sd-number-input-padding-x)}sd-number-input .sd-number-input__content--no-stepper{padding:0 calc(var(--sd-number-input-padding-x) * 2)}sd-number-input .sd-number-input__content .sd-number-input__native{width:100%;height:100%;min-width:0;border:none;outline:none;background:transparent;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit;padding-block:0;padding-inline:0}sd-number-input .sd-number-input__content .sd-number-input__native[disabled]{cursor:not-allowed;color:var(--sd-number-input-disabled-color)}sd-number-input .sd-number-input__content .sd-number-input__native[readonly]{color:var(--sd-system-color-field-text-read-only)}sd-number-input .sd-number-input__content .sd-number-input__native::placeholder{color:var(--sd-number-input-placeholder-color)}sd-number-input .sd-number-input__content .sd-number-input__prefix,sd-number-input .sd-number-input__content .sd-number-input__suffix{flex-shrink:0;white-space:nowrap;color:var(--sd-number-input-placeholder-color);font-size:inherit;line-height:inherit}sd-number-input .sd-number-input__content .sd-number-input__stepper{flex-shrink:0;width:var(--sd-number-input-stepper-size);height:var(--sd-number-input-stepper-size);border:none;border-radius:var(--sd-number-input-stepper-radius);background-color:var(--sd-number-input-stepper-bg);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;margin:0;transition:background-color 0.15s ease}sd-number-input .sd-number-input__content .sd-number-input__stepper:hover:not(:disabled){filter:brightness(0.95)}sd-number-input .sd-number-input__content .sd-number-input__stepper:disabled{background-color:var(--sd-number-input-stepper-bg-disabled);cursor:not-allowed}"}},[512,"sd-number-input",{size:[1],min:[2],max:[2],step:[2],useButton:[4,"use-button"],useDecimal:[4,"use-decimal"],value:[1032],label:[1],labelWidth:[8,"label-width"],icon:[16],labelTooltip:[1,"label-tooltip"],labelTooltipProps:[16],addonLabel:[1,"addon-label"],addonAlign:[1,"addon-align"],placeholder:[1],disabled:[4],width:[8],rules:[16],autoFocus:[4,"auto-focus"],status:[1],hint:[1],errorMessage:[1,"error-message"],inputPrefix:[1,"input-prefix"],inputSuffix:[1,"input-suffix"],inputClass:[1,"input-class"],readonly:[4],inputStyle:[16],error:[1028],focused:[1028],hovered:[1028],name:[1],internalValue:[32],displayValue:[32],sdValidate:[64],sdReset:[64],sdResetValidate:[64],sdFocus:[64],sdGetNativeElement:[64]},void 0,{value:[{valueChanged:0}],internalValue:[{internalValueChanged:0}]}]);function w(){"undefined"!=typeof customElements&&["sd-number-input","sd-button","sd-field","sd-floating-portal","sd-icon","sd-tooltip"].forEach((t=>{switch(t){case"sd-number-input":customElements.get(n(t))||customElements.define(n(t),v);break;case"sd-button":customElements.get(n(t))||u();break;case"sd-field":customElements.get(n(t))||a();break;case"sd-floating-portal":customElements.get(n(t))||o();break;case"sd-icon":customElements.get(n(t))||l();break;case"sd-tooltip":customElements.get(n(t))||p()}}))}export{v as S,w as d}