@sellmate/design-system 1.22.0 → 1.23.0

package/package.json

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

package/dist/components/p-Cjf8PHEl.js

@@ -1 +0,0 @@
-import{p as t,H as e,c as s,h as o,t as i}from"./p-CCCwPJ5p.js";import{d as n}from"./p-CCO1WtEj.js";import{d as a}from"./p-S2-XqY2R.js";import{d as r}from"./p-JMuxVcTW.js";var d={size:"16",icon:"12"},b={size:"24",icon:"16"},c={size:"28",icon:"20"},h={size:"36",icon:"24"},u={size:"62",icon:"32"},l={sm:"4",md:"6"},g={opacity:"5%"},p={disabled:"#BBBBBB"},m={content:"#888888",hover:{bg:"#222222"}},f={content:"#E30000",hover:{bg:"#E30000"}},v={content:"#025497",hover:{bg:"#0075FF"}},x={content:"#FFFFFF",disabled:"#E1E1E1",hover:{bg:"#FFFFFF"}};const y={xxs:{size:Number(d.size),icon:Number(d.icon)},xs:{size:Number(b.size),icon:Number(b.icon)},sm:{size:Number(c.size),icon:Number(c.icon)},md:{size:Number(h.size),icon:Number(h.icon)},lg:{size:Number(u.size),icon:Number(u.icon)}},F={xxs:Number(l.sm),xs:Number(l.sm),sm:Number(l.sm),md:Number(l.md),lg:Number(l.md)},z=g.opacity,k={default:m.content,danger:f.content,action:v.content,inverse:x.content},E={default:m.hover.bg,danger:f.hover.bg,action:v.hover.bg,inverse:x.hover.bg},N=p.disabled,w={default:N,danger:N,action:N,inverse:x.disabled},B=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.click=s(this,"sdClick",7)}icon;size="sm";intent="default";ariaLabel="";tooltipText;disabled=!1;get hostEl(){return this}isTooltipOpen=!1;click;hasWarnedMissingAriaLabel=!1;componentWillLoad(){this.size??="sm",this.intent??="default",this.ariaLabel??=""}handleClick=t=>{this.disabled?t.preventDefault():this.click.emit(t)};handleMouseEnter=()=>{this.isTooltipOpen=!0};handleMouseLeave=()=>{this.isTooltipOpen=!1};handleFocus=()=>{this.isTooltipOpen=!0};handleBlur=()=>{this.isTooltipOpen=!1};componentWillRender(){this.warnIfMissingAriaLabel()}warnIfMissingAriaLabel(){""===(this.ariaLabel??"").trim()?this.hasWarnedMissingAriaLabel||(console.warn(`[sd-ghost-button] icon-only buttons require \`ariaLabel\`. Received icon="${this.icon}".`),this.hasWarnedMissingAriaLabel=!0):this.hasWarnedMissingAriaLabel=!1}render(){const t=this.size??"sm",e=this.intent??"default",s=y[t]??y.sm,i=this.disabled?w[e]:k[e],n=(this.ariaLabel??"").trim()||void 0,a=(this.tooltipText??"").trim();return o("button",{key:"a49c5b93f4dfcd434c20225acae4c7454e8f8e4f",class:{"sd-ghost-button":!0,"sd-ghost-button--disabled":this.disabled},type:"button",disabled:this.disabled,"aria-label":n,style:{"--sd-ghost-button-size":`${s.size}px`,"--sd-ghost-button-radius":`${F[t]}px`,"--sd-ghost-button-hover-bg":E[e],"--sd-ghost-button-hover-opacity":z,"--sd-ghost-button-accent":"#0075FF"},onClick:this.handleClick,onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave,onFocus:this.handleFocus,onBlur:this.handleBlur},a.length>0&&this.isTooltipOpen&&!this.disabled&&o("sd-portal",{key:"36ef78d79a99da1fd26c282ef68293b9fb9f87b1",parentRef:this.hostEl,open:!0,offset:[s.size/2,4],placement:"top"},o("div",{key:"a0cf8b4e84a79841ab09e6a81ee6bcbfe57e6805",class:"sd-ghost-button__tooltip-inner","aria-hidden":"true"},o("sd-tag",{key:"a263167142b891add0a32900504f541dcb3a4959",name:"square_xs_grey",label:a}))),o("sd-icon",{key:"ba90e9b489b4f43577313052635db598e3d30037",name:this.icon,size:s.icon,color:i}))}static get style(){return'sd-ghost-button{display:inline-flex;width:fit-content;height:fit-content}.sd-ghost-button{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--sd-ghost-button-size);height:var(--sd-ghost-button-size);padding:0;border:none;border-radius:var(--sd-ghost-button-radius);background:transparent;cursor:pointer;box-sizing:border-box;transition:box-shadow 0.2s ease;-webkit-user-select:none;user-select:none}.sd-ghost-button::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--sd-ghost-button-hover-bg);opacity:0;transition:opacity 0.2s ease;pointer-events:none}.sd-ghost-button:hover:not(.sd-ghost-button--disabled)::before{opacity:var(--sd-ghost-button-hover-opacity)}.sd-ghost-button:focus-visible{outline:0;box-shadow:0 0 0 2px var(--sd-ghost-button-accent)}.sd-ghost-button--disabled{cursor:not-allowed}.sd-ghost-button__tooltip-inner{display:inline-flex;white-space:nowrap;transform:translateX(-50%)}'}},[512,"sd-ghost-button",{icon:[1],size:[1],intent:[1],ariaLabel:[1,"aria-label"],tooltipText:[1,"tooltip-text"],disabled:[4],isTooltipOpen:[32]}]);function C(){"undefined"!=typeof customElements&&["sd-ghost-button","sd-icon","sd-portal","sd-tag"].forEach((t=>{switch(t){case"sd-ghost-button":customElements.get(i(t))||customElements.define(i(t),B);break;case"sd-icon":customElements.get(i(t))||n();break;case"sd-portal":customElements.get(i(t))||a();break;case"sd-tag":customElements.get(i(t))||r()}}))}export{B as S,C as d}

package/dist/components/p-DzAvlr8W.js

@@ -1 +0,0 @@
-import{p as t,H as i,c as s,h as e,t as h}from"./p-CCCwPJ5p.js";import{d as n}from"./p-Cjf8PHEl.js";import{d as o}from"./p-CCO1WtEj.js";import{d as a}from"./p-S2-XqY2R.js";import{d}from"./p-JMuxVcTW.js";var r={default:{fontFamily:"Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif",fontSize:"12",fontWeight:"500",lineHeight:"20"},focus:{fontFamily:"Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif",fontSize:"12",fontWeight:"400",lineHeight:"20"}},c={default:"#F6F6F6",error:"#FCEFEF"},l={default:"#555555",error:"#E30000",focus:"#222222"};const p={height:`${"24"}px`,paddingX:`${"8"}px`,gap:`${"4"}px`,radius:`${"9999"}px`,borderWidth:`${{width:"1"}.width}px`},u={bg:{default:c.default,error:c.error},content:{default:l.default,error:l.error,focus:l.focus}},f={default:{fontFamily:r.default.fontFamily,fontSize:`${r.default.fontSize}px`,fontWeight:r.default.fontWeight,lineHeight:`${r.default.lineHeight}px`},focus:{fontFamily:r.focus.fontFamily,fontSize:`${r.focus.fontSize}px`,fontWeight:r.focus.fontWeight,lineHeight:`${r.focus.lineHeight}px`}},m=t(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.update=s(this,"sdUpdate",7),this.delete=s(this,"sdRemove",7),this.focus=s(this,"sdFocus",7),this.blur=s(this,"sdBlur",7)}get el(){return this}name="";value="";error=!1;disabled=!1;editable=!0;placeholder="";rules=[];internalValue="";isEditing=!1;update;delete;focus;blur;inputEl;draftValue="";shouldInitInput=!1;valueChanged(t){const i=t??"",s=this.isEditing;this.internalValue=i,this.draftValue=i,s&&(this.isEditing=!1,this.shouldInitInput=!1,this.inputEl?.blur(),this.blur.emit())}componentWillLoad(){this.internalValue=this.value??""}componentDidLoad(){this.registerToForm()}disconnectedCallback(){this.unregisterFromForm()}async sdValidate(){if(!this.rules||0===this.rules.length)return this.error=!1,!0;for(const t of this.rules)if(!0!==t(this.internalValue??""))return this.error=!0,!1;return this.error=!1,!0}async sdReset(){this.internalValue="",this.value="",this.error=!1,this.draftValue="",this.isEditing=!1,this.shouldInitInput=!1}async sdResetValidate(){this.error=!1}async sdResetValidation(){this.error=!1}async sdFocus(){this.disabled||this.enterEditMode()}async sdGetNativeElement(){return this.inputEl??null}get isEditable(){return!1!==this.editable}enterEditMode=()=>{this.disabled||this.isEditing||!this.isEditable||(this.draftValue=this.internalValue,this.shouldInitInput=!0,this.isEditing=!0,this.focus.emit())};commitEdit=async()=>{if(!this.isEditing)return;const t=(this.inputEl?.textContent??this.draftValue).trim(),i=t!==this.draftValue;this.internalValue=t,this.isEditing=!1,this.shouldInitInput=!1,this.value=t,i&&this.update.emit(t),await this.sdValidate(),this.blur.emit()};cancelEdit=()=>{this.isEditing&&(this.internalValue=this.draftValue,this.isEditing=!1,this.shouldInitInput=!1,this.blur.emit())};handleChipClick=()=>{this.disabled||this.isEditing||!this.isEditable||this.enterEditMode()};handleChipKeyDown=t=>{this.disabled||this.isEditing||!this.isEditable||"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),this.enterEditMode())};handleInputChange=t=>{this.internalValue=t.target.textContent??""};handleInputKeyDown=t=>{"Enter"===t.key?(t.preventDefault(),t.stopPropagation(),this.commitEdit()):"Escape"===t.key&&(t.preventDefault(),t.stopPropagation(),this.cancelEdit())};handleInputBlur=()=>{this.commitEdit()};handlePaste=t=>{t.preventDefault();const i=t.clipboardData?.getData("text/plain")??"";document.execCommand("insertText",!1,i)};handleRemoveClick=t=>{t.stopPropagation(),this.disabled||this.delete.emit()};syncInputValue(t){if(!this.inputEl)return;this.inputEl.textContent=t;const i=document.createRange();i.selectNodeContents(this.inputEl),i.collapse(!1);const s=window.getSelection();s?.removeAllRanges(),s?.addRange(i)}registerToForm(){const t=this.el.closest("sd-form");t&&"function"==typeof t.componentOnReady&&t.componentOnReady().then((t=>{t.sdRegisterField(this)}))}unregisterFromForm(){if(""===this.name)return;const t=this.el.closest("sd-form");t?.componentOnReady().then((t=>{t.sdUnregisterField(this)}))}componentDidUpdate(){this.isEditing&&this.inputEl&&this.shouldInitInput&&(this.inputEl.focus(),this.syncInputValue(this.internalValue),this.shouldInitInput=!1)}resolveState(){return this.isEditing?"focus":this.error?"error":"default"}render(){const t=this.resolveState(),i=f.default,s={"--sd-chip-height":p.height,"--sd-chip-padding-x":p.paddingX,"--sd-chip-gap":p.gap,"--sd-chip-radius":p.radius,"--sd-chip-border-width":p.borderWidth,"--sd-chip-bg":"error"===t?u.bg.error:u.bg.default,"--sd-chip-content":"error"===t?u.content.error:u.content.default,"--sd-chip-border-color":"transparent","--sd-chip-font-family":i.fontFamily,"--sd-chip-font-size":i.fontSize,"--sd-chip-font-weight":i.fontWeight,"--sd-chip-line-height":i.lineHeight};return e("span",{key:"03dca835a12de78ae3c72cf50a8f1ed16b19cf00",class:{"sd-chip":!0,[`sd-chip--${t}`]:!0,"sd-chip--disabled":this.disabled,"sd-chip--editable":!this.disabled&&this.isEditable},role:this.disabled||!this.isEditable?void 0:"button",tabIndex:this.disabled||this.isEditing||!this.isEditable?-1:0,"aria-disabled":this.disabled?"true":void 0,style:s,onClick:this.handleChipClick,onKeyDown:this.handleChipKeyDown},this.isEditing?e("span",{key:"chip-input",ref:t=>this.inputEl=t,class:"sd-chip__input",role:"textbox",tabindex:this.disabled?-1:0,contentEditable:!this.disabled,"data-placeholder":this.placeholder,spellcheck:!1,onInput:this.handleInputChange,onKeyDown:this.handleInputKeyDown,onBlur:this.handleInputBlur,onPaste:this.handlePaste,onClick:t=>t.stopPropagation()}):[e("span",{key:"chip-label",class:"sd-chip__label"},this.internalValue),!this.disabled&&e("sd-ghost-button",{key:"chip-remove",class:"sd-chip__remove",icon:"close",size:"xxs",ariaLabel:"remove",onClick:this.handleRemoveClick})])}static get watchers(){return{value:[{valueChanged:0}]}}static get style(){return"sd-chip{display:inline-flex;width:fit-content;max-width:100%;height:fit-content}sd-chip .sd-chip{display:inline-flex;align-items:center;justify-content:center;gap:var(--sd-chip-gap);max-width:100%;height:var(--sd-chip-height);padding:0 var(--sd-chip-padding-x);border-radius:var(--sd-chip-radius);background:var(--sd-chip-bg);color:var(--sd-chip-content);border:var(--sd-chip-border-width) solid var(--sd-chip-border-color);font-family:var(--sd-chip-font-family);font-size:var(--sd-chip-font-size);font-weight:var(--sd-chip-font-weight);line-height:var(--sd-chip-line-height);box-sizing:border-box;white-space:nowrap;overflow:hidden;-webkit-user-select:none;user-select:none}sd-chip .sd-chip--editable:not(.sd-chip--focus){cursor:text}sd-chip .sd-chip--disabled{cursor:not-allowed;opacity:0.6}sd-chip .sd-chip__label{display:inline-flex;align-items:center;min-width:0;overflow:hidden;text-overflow:ellipsis}sd-chip .sd-chip__input{display:inline-block;min-width:1ch;outline:none;background:transparent;color:inherit;font:inherit;white-space:nowrap;cursor:text}sd-chip .sd-chip__input:empty::before{content:attr(data-placeholder);color:inherit;opacity:0.6;pointer-events:none}sd-chip .sd-chip__remove{flex-shrink:0}"}},[512,"sd-chip",{name:[1],value:[1025],error:[1028],disabled:[4],editable:[4],placeholder:[1],rules:[16],internalValue:[32],isEditing:[32],sdValidate:[64],sdReset:[64],sdResetValidate:[64],sdResetValidation:[64],sdFocus:[64],sdGetNativeElement:[64]},void 0,{value:[{valueChanged:0}]}]);function g(){"undefined"!=typeof customElements&&["sd-chip","sd-ghost-button","sd-icon","sd-portal","sd-tag"].forEach((t=>{switch(t){case"sd-chip":customElements.get(h(t))||customElements.define(h(t),m);break;case"sd-ghost-button":customElements.get(h(t))||n();break;case"sd-icon":customElements.get(h(t))||o();break;case"sd-portal":customElements.get(h(t))||a();break;case"sd-tag":customElements.get(h(t))||d()}}))}export{f as C,m as S,u as a,p as b,g as d}

package/dist/design-system/p-35da166a.entry.js

@@ -1 +0,0 @@
-import{r as i,c as t,a as s,h as e}from"./p-C7HJ-NfO.js";import{C as h,a as n,b as d}from"./p-DDj5KTBF.js";const o=class{constructor(s){i(this,s),this.update=t(this,"sdUpdate",7),this.delete=t(this,"sdRemove",7),this.focus=t(this,"sdFocus",7),this.blur=t(this,"sdBlur",7)}get el(){return s(this)}name="";value="";error=!1;disabled=!1;editable=!0;placeholder="";rules=[];internalValue="";isEditing=!1;update;delete;focus;blur;inputEl;draftValue="";shouldInitInput=!1;valueChanged(i){const t=i??"",s=this.isEditing;this.internalValue=t,this.draftValue=t,s&&(this.isEditing=!1,this.shouldInitInput=!1,this.inputEl?.blur(),this.blur.emit())}componentWillLoad(){this.internalValue=this.value??""}componentDidLoad(){this.registerToForm()}disconnectedCallback(){this.unregisterFromForm()}async sdValidate(){if(!this.rules||0===this.rules.length)return this.error=!1,!0;for(const i of this.rules)if(!0!==i(this.internalValue??""))return this.error=!0,!1;return this.error=!1,!0}async sdReset(){this.internalValue="",this.value="",this.error=!1,this.draftValue="",this.isEditing=!1,this.shouldInitInput=!1}async sdResetValidate(){this.error=!1}async sdResetValidation(){this.error=!1}async sdFocus(){this.disabled||this.enterEditMode()}async sdGetNativeElement(){return this.inputEl??null}get isEditable(){return!1!==this.editable}enterEditMode=()=>{this.disabled||this.isEditing||!this.isEditable||(this.draftValue=this.internalValue,this.shouldInitInput=!0,this.isEditing=!0,this.focus.emit())};commitEdit=async()=>{if(!this.isEditing)return;const i=(this.inputEl?.textContent??this.draftValue).trim(),t=i!==this.draftValue;this.internalValue=i,this.isEditing=!1,this.shouldInitInput=!1,this.value=i,t&&this.update.emit(i),await this.sdValidate(),this.blur.emit()};cancelEdit=()=>{this.isEditing&&(this.internalValue=this.draftValue,this.isEditing=!1,this.shouldInitInput=!1,this.blur.emit())};handleChipClick=()=>{this.disabled||this.isEditing||!this.isEditable||this.enterEditMode()};handleChipKeyDown=i=>{this.disabled||this.isEditing||!this.isEditable||"Enter"!==i.key&&" "!==i.key||(i.preventDefault(),this.enterEditMode())};handleInputChange=i=>{this.internalValue=i.target.textContent??""};handleInputKeyDown=i=>{"Enter"===i.key?(i.preventDefault(),i.stopPropagation(),this.commitEdit()):"Escape"===i.key&&(i.preventDefault(),i.stopPropagation(),this.cancelEdit())};handleInputBlur=()=>{this.commitEdit()};handlePaste=i=>{i.preventDefault();const t=i.clipboardData?.getData("text/plain")??"";document.execCommand("insertText",!1,t)};handleRemoveClick=i=>{i.stopPropagation(),this.disabled||this.delete.emit()};syncInputValue(i){if(!this.inputEl)return;this.inputEl.textContent=i;const t=document.createRange();t.selectNodeContents(this.inputEl),t.collapse(!1);const s=window.getSelection();s?.removeAllRanges(),s?.addRange(t)}registerToForm(){const i=this.el.closest("sd-form");i&&"function"==typeof i.componentOnReady&&i.componentOnReady().then((i=>{i.sdRegisterField(this)}))}unregisterFromForm(){if(""===this.name)return;const i=this.el.closest("sd-form");i?.componentOnReady().then((i=>{i.sdUnregisterField(this)}))}componentDidUpdate(){this.isEditing&&this.inputEl&&this.shouldInitInput&&(this.inputEl.focus(),this.syncInputValue(this.internalValue),this.shouldInitInput=!1)}resolveState(){return this.isEditing?"focus":this.error?"error":"default"}render(){const i=this.resolveState(),t=h.default,s={"--sd-chip-height":d.height,"--sd-chip-padding-x":d.paddingX,"--sd-chip-gap":d.gap,"--sd-chip-radius":d.radius,"--sd-chip-border-width":d.borderWidth,"--sd-chip-bg":"error"===i?n.bg.error:n.bg.default,"--sd-chip-content":"error"===i?n.content.error:n.content.default,"--sd-chip-border-color":"transparent","--sd-chip-font-family":t.fontFamily,"--sd-chip-font-size":t.fontSize,"--sd-chip-font-weight":t.fontWeight,"--sd-chip-line-height":t.lineHeight};return e("span",{key:"03dca835a12de78ae3c72cf50a8f1ed16b19cf00",class:{"sd-chip":!0,[`sd-chip--${i}`]:!0,"sd-chip--disabled":this.disabled,"sd-chip--editable":!this.disabled&&this.isEditable},role:this.disabled||!this.isEditable?void 0:"button",tabIndex:this.disabled||this.isEditing||!this.isEditable?-1:0,"aria-disabled":this.disabled?"true":void 0,style:s,onClick:this.handleChipClick,onKeyDown:this.handleChipKeyDown},this.isEditing?e("span",{key:"chip-input",ref:i=>this.inputEl=i,class:"sd-chip__input",role:"textbox",tabindex:this.disabled?-1:0,contentEditable:!this.disabled,"data-placeholder":this.placeholder,spellcheck:!1,onInput:this.handleInputChange,onKeyDown:this.handleInputKeyDown,onBlur:this.handleInputBlur,onPaste:this.handlePaste,onClick:i=>i.stopPropagation()}):[e("span",{key:"chip-label",class:"sd-chip__label"},this.internalValue),!this.disabled&&e("sd-ghost-button",{key:"chip-remove",class:"sd-chip__remove",icon:"close",size:"xxs",ariaLabel:"remove",onClick:this.handleRemoveClick})])}static get watchers(){return{value:[{valueChanged:0}]}}};o.style="sd-chip{display:inline-flex;width:fit-content;max-width:100%;height:fit-content}sd-chip .sd-chip{display:inline-flex;align-items:center;justify-content:center;gap:var(--sd-chip-gap);max-width:100%;height:var(--sd-chip-height);padding:0 var(--sd-chip-padding-x);border-radius:var(--sd-chip-radius);background:var(--sd-chip-bg);color:var(--sd-chip-content);border:var(--sd-chip-border-width) solid var(--sd-chip-border-color);font-family:var(--sd-chip-font-family);font-size:var(--sd-chip-font-size);font-weight:var(--sd-chip-font-weight);line-height:var(--sd-chip-line-height);box-sizing:border-box;white-space:nowrap;overflow:hidden;-webkit-user-select:none;user-select:none}sd-chip .sd-chip--editable:not(.sd-chip--focus){cursor:text}sd-chip .sd-chip--disabled{cursor:not-allowed;opacity:0.6}sd-chip .sd-chip__label{display:inline-flex;align-items:center;min-width:0;overflow:hidden;text-overflow:ellipsis}sd-chip .sd-chip__input{display:inline-block;min-width:1ch;outline:none;background:transparent;color:inherit;font:inherit;white-space:nowrap;cursor:text}sd-chip .sd-chip__input:empty::before{content:attr(data-placeholder);color:inherit;opacity:0.6;pointer-events:none}sd-chip .sd-chip__remove{flex-shrink:0}";export{o as sd_chip}

package/dist/design-system/p-4c1559c8.entry.js

@@ -1 +0,0 @@
-import{r as t,c as e,a as s,h as i}from"./p-C7HJ-NfO.js";var n={size:"16",icon:"12"},o={size:"24",icon:"16"},a={size:"28",icon:"20"},r={size:"36",icon:"24"},h={size:"62",icon:"32"},d={sm:"4",md:"6"},c={opacity:"5%"},l={disabled:"#BBBBBB"},g={content:"#888888",hover:{bg:"#222222"}},b={content:"#E30000",hover:{bg:"#E30000"}},u={content:"#025497",hover:{bg:"#0075FF"}},p={content:"#FFFFFF",disabled:"#E1E1E1",hover:{bg:"#FFFFFF"}};const f={xxs:{size:Number(n.size),icon:Number(n.icon)},xs:{size:Number(o.size),icon:Number(o.icon)},sm:{size:Number(a.size),icon:Number(a.icon)},md:{size:Number(r.size),icon:Number(r.icon)},lg:{size:Number(h.size),icon:Number(h.icon)}},m={xxs:Number(d.sm),xs:Number(d.sm),sm:Number(d.sm),md:Number(d.md),lg:Number(d.md)},v=c.opacity,x={default:g.content,danger:b.content,action:u.content,inverse:p.content},y={default:g.hover.bg,danger:b.hover.bg,action:u.hover.bg,inverse:p.hover.bg},F=l.disabled,z={default:F,danger:F,action:F,inverse:p.disabled},w=class{constructor(s){t(this,s),this.click=e(this,"sdClick",7)}icon;size="sm";intent="default";ariaLabel="";tooltipText;disabled=!1;get hostEl(){return s(this)}isTooltipOpen=!1;click;hasWarnedMissingAriaLabel=!1;componentWillLoad(){this.size??="sm",this.intent??="default",this.ariaLabel??=""}handleClick=t=>{this.disabled?t.preventDefault():this.click.emit(t)};handleMouseEnter=()=>{this.isTooltipOpen=!0};handleMouseLeave=()=>{this.isTooltipOpen=!1};handleFocus=()=>{this.isTooltipOpen=!0};handleBlur=()=>{this.isTooltipOpen=!1};componentWillRender(){this.warnIfMissingAriaLabel()}warnIfMissingAriaLabel(){""===(this.ariaLabel??"").trim()?this.hasWarnedMissingAriaLabel||(console.warn(`[sd-ghost-button] icon-only buttons require \`ariaLabel\`. Received icon="${this.icon}".`),this.hasWarnedMissingAriaLabel=!0):this.hasWarnedMissingAriaLabel=!1}render(){const t=this.size??"sm",e=this.intent??"default",s=f[t]??f.sm,n=this.disabled?z[e]:x[e],o=(this.ariaLabel??"").trim()||void 0,a=(this.tooltipText??"").trim();return i("button",{key:"a49c5b93f4dfcd434c20225acae4c7454e8f8e4f",class:{"sd-ghost-button":!0,"sd-ghost-button--disabled":this.disabled},type:"button",disabled:this.disabled,"aria-label":o,style:{"--sd-ghost-button-size":`${s.size}px`,"--sd-ghost-button-radius":`${m[t]}px`,"--sd-ghost-button-hover-bg":y[e],"--sd-ghost-button-hover-opacity":v,"--sd-ghost-button-accent":"#0075FF"},onClick:this.handleClick,onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave,onFocus:this.handleFocus,onBlur:this.handleBlur},a.length>0&&this.isTooltipOpen&&!this.disabled&&i("sd-portal",{key:"36ef78d79a99da1fd26c282ef68293b9fb9f87b1",parentRef:this.hostEl,open:!0,offset:[s.size/2,4],placement:"top"},i("div",{key:"a0cf8b4e84a79841ab09e6a81ee6bcbfe57e6805",class:"sd-ghost-button__tooltip-inner","aria-hidden":"true"},i("sd-tag",{key:"a263167142b891add0a32900504f541dcb3a4959",name:"square_xs_grey",label:a}))),i("sd-icon",{key:"ba90e9b489b4f43577313052635db598e3d30037",name:this.icon,size:s.icon,color:n}))}};w.style='sd-ghost-button{display:inline-flex;width:fit-content;height:fit-content}.sd-ghost-button{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--sd-ghost-button-size);height:var(--sd-ghost-button-size);padding:0;border:none;border-radius:var(--sd-ghost-button-radius);background:transparent;cursor:pointer;box-sizing:border-box;transition:box-shadow 0.2s ease;-webkit-user-select:none;user-select:none}.sd-ghost-button::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--sd-ghost-button-hover-bg);opacity:0;transition:opacity 0.2s ease;pointer-events:none}.sd-ghost-button:hover:not(.sd-ghost-button--disabled)::before{opacity:var(--sd-ghost-button-hover-opacity)}.sd-ghost-button:focus-visible{outline:0;box-shadow:0 0 0 2px var(--sd-ghost-button-accent)}.sd-ghost-button--disabled{cursor:not-allowed}.sd-ghost-button__tooltip-inner{display:inline-flex;white-space:nowrap;transform:translateX(-50%)}';const k=class{constructor(s){t(this,s),this.close=e(this,"sdClose",3)}get hostEl(){return s(this)}to="body";parentRef=null;offset=[0,4];viewportPadding=0;zIndex=996;open=!1;placement="bottom";close;container;wrapper;rafId;isInsideClick=!1;closeTransitionTimer;handleObservedScroll=()=>this.updatePosition();resizeObserver;mutationObserver;scrollParents=[];isObserved=!1;handleOpenChange(){this.syncPortalState()}componentDidLoad(){this.container=this.resolveContainer(),this.syncPortalState()}componentDidRender(){this.syncPortalState()}disconnectedCallback(){if(this.closeTransitionTimer&&clearTimeout(this.closeTransitionTimer),this.unobserveParent(),this.wrapper?.parentNode)try{this.wrapper.parentNode.removeChild(this.wrapper)}catch{}}resolveContainer(){const t="string"==typeof this.to?document.querySelector(this.to):this.to;return t instanceof HTMLElement?t:document.body}resolveZIndex(){const t=this.zIndex??996,e=this.parentRef?.closest(".sd-modal-container__layer");if(!e)return t;const s=e.closest(".sd-modal-container"),i=s instanceof HTMLElement?parseInt(getComputedStyle(s).zIndex,10):NaN,n=Number.isFinite(i)?i:997;return Math.max(t,n+1)}createWrapper(){this.wrapper=document.createElement("div"),Object.assign(this.wrapper.style,{position:"fixed",top:"0",left:"0",zIndex:this.resolveZIndex().toString(),opacity:"0",transition:"opacity 0.15s ease-out",boxSizing:"border-box",visibility:"hidden"}),this.container.appendChild(this.wrapper)}ensureWrapper(){this.wrapper||(this.container||=this.resolveContainer(),this.createWrapper(),this.moveSlotContent())}syncPortalState(){if(!this.open)return this.wrapper&&(this.wrapper.style.transition="opacity 0.15s ease-out",this.wrapper.style.opacity="0",this.wrapper.style.pointerEvents="none",this.closeTransitionTimer&&clearTimeout(this.closeTransitionTimer),this.closeTransitionTimer=setTimeout((()=>{this.wrapper&&!this.open&&(this.wrapper.style.display="none")}),150)),void this.unobserveParent();this.closeTransitionTimer&&clearTimeout(this.closeTransitionTimer),this.ensureWrapper(),this.wrapper&&(this.wrapper.style.display="block",this.wrapper.style.transition="opacity 0.25s ease-out",this.wrapper.style.opacity="0",this.wrapper.style.pointerEvents="",this.observeParent(),this.updatePosition())}moveSlotContent(){this.wrapper&&Array.from(this.hostEl.childNodes).filter((t=>t.nodeType!==Node.COMMENT_NODE)).forEach((t=>this.wrapper.appendChild(t)))}updatePosition(){void 0!==this.rafId&&cancelAnimationFrame(this.rafId),this.rafId=requestAnimationFrame((()=>{if(!this.parentRef||!this.wrapper)return;const t=this.parentRef.getBoundingClientRect(),e=window.innerWidth,s=window.innerHeight,i=this.offset??[0,4],n=Math.max(0,this.viewportPadding??0),o=Math.max(e-2*n,0),a=Math.max(s-2*n,0);this.wrapper.style.maxWidth=`${o}px`,this.wrapper.style.maxHeight=`${a}px`;const r=this.wrapper.getBoundingClientRect(),h=s-t.bottom-i[1]-n,d=t.top-i[1]-n;let c,l=t.left+i[0];"top"===(this.placement??"bottom")?(c=t.top-r.height-i[1],d<r.height&&h>d&&(c=t.bottom+i[1])):(c=t.bottom+i[1],h<r.height&&d>h&&(c=t.top-r.height-i[1]));const g=s-n-r.height;c=g<n?n:Math.min(Math.max(c,n),g),t.left+r.width+i[0]>e-n&&(l=t.right-r.width-i[0]);const b=e-n-r.width;l=b<n?n:Math.min(Math.max(l,n),b),this.wrapper.style.top=`${c}px`,this.wrapper.style.left=`${l}px`,this.wrapper.style.visibility="visible",this.wrapper.style.opacity="1"}))}observeParent(){this.parentRef&&!this.isObserved&&(this.observeScrollParents(this.parentRef),"undefined"!=typeof ResizeObserver&&(this.resizeObserver=new ResizeObserver((()=>this.updatePosition())),this.resizeObserver.observe(this.parentRef)),"undefined"!=typeof MutationObserver&&(this.mutationObserver=new MutationObserver((()=>this.updatePosition())),this.mutationObserver.observe(document.body,{childList:!0,subtree:!0})),this.isObserved=!0)}unobserveParent(){this.isObserved&&(this.unobserveScrollParents(),this.resizeObserver?.disconnect(),this.resizeObserver=void 0,this.mutationObserver?.disconnect(),this.mutationObserver=void 0,this.isObserved=!1)}observeScrollParents(t){const e=this.getScrollParents(t);e.forEach((t=>{t.addEventListener("scroll",this.handleObservedScroll,{passive:!0})})),this.scrollParents=e}unobserveScrollParents(){this.scrollParents.forEach((t=>{t.removeEventListener("scroll",this.handleObservedScroll)})),this.scrollParents=[]}getScrollParents(t){const e=[];let s=t.parentElement;for(;s;){const{overflow:t,overflowX:i,overflowY:n}=getComputedStyle(s);[t,i,n].some((t=>/(auto|scroll|overlay)/.test(t)))&&e.push(s),s=s.parentElement}return e}isInsideTarget(t){return!(!this.wrapper?.contains(t)&&!this.parentRef?.contains(t))}handleMouseDown(t){this.isInsideClick=this.isInsideTarget(t.target)}handleWindowClick(t){this.isInsideClick?this.isInsideClick=!1:this.isInsideTarget(t.target)||this.close.emit()}render(){return i("slot",{key:"e4523bbb6fd56072c4f5a4dc241ab8a3ac0ea1bf"})}static get watchers(){return{open:[{handleOpenChange:0}]}}};var $={height:"20",paddingX:"8",gap:"4",typography:{fontSize:"11",fontWeight:"500",lineHeight:"18"},radius:"6"},E={height:"24",paddingX:"8",gap:"4",typography:{fontSize:"12",fontWeight:"700",lineHeight:"20"},radius:"6"},_={height:"28",paddingX:"12",gap:"6",typography:{fontSize:"14",fontWeight:"700",lineHeight:"24"},radius:"8"},N={content:"#FB4444",bg:"#FCEFEF"},C={content:"#FF6B00",bg:"#FEF1EA"},M={content:"#916C0D",bg:"#FFF7DD"},S={content:"#00973C",bg:"#E8F9EF"},O={content:"#0075FF",bg:"#E6F1FF"},L={content:"#006AC1",bg:"#EAF5FE"},W={content:"#004290",bg:"#EFF6FF"},T={content:"#737373",bg:"#EEEEEE"};const B=["xs","sm","md"],I=["grey","red","orange","yellow","green","blue","darkblue","indigo"],H={grey:{background:T.bg,content:T.content,icon:T.content},red:{background:N.bg,content:N.content,icon:N.content},orange:{background:C.bg,content:C.content,icon:C.content},yellow:{background:M.bg,content:M.content,icon:M.content},green:{background:S.bg,content:S.content,icon:S.content},blue:{background:O.bg,content:O.content,icon:O.content},darkblue:{background:L.bg,content:L.content,icon:L.content},indigo:{background:W.bg,content:W.content,icon:W.content}},P={xs:{height:`${$.height}px`,paddingX:`${$.paddingX}px`,gap:`${$.gap}px`,fontSize:`${$.typography.fontSize}px`,fontWeight:$.typography.fontWeight,lineHeight:`${$.typography.lineHeight}px`,iconSize:12,radius:`${$.radius}px`},sm:{height:`${E.height}px`,paddingX:`${E.paddingX}px`,gap:`${E.gap}px`,fontSize:`${E.typography.fontSize}px`,fontWeight:E.typography.fontWeight,lineHeight:`${E.typography.lineHeight}px`,iconSize:16,radius:`${E.radius}px`},md:{height:`${_.height}px`,paddingX:`${_.paddingX}px`,gap:`${_.gap}px`,fontSize:`${_.typography.fontSize}px`,fontWeight:_.typography.fontWeight,lineHeight:`${_.typography.lineHeight}px`,iconSize:16,radius:`${_.radius}px`}},j={xs:{...P.xs,radius:"999px"},sm:{...P.sm,radius:"999px"},md:{...P.md,radius:"999px"}},A=Object.fromEntries(["square","pill"].flatMap((t=>B.flatMap((e=>I.map((s=>[`${t}_${e}_${s}`,{shape:t,size:e,color:s,..."square"===t?P[e]:j[e],...H[s]}]))))))),X=class{constructor(e){t(this,e)}name="square_sm_grey";label="";icon;isLeft=!0;componentWillLoad(){this.name=this.name??"square_sm_grey"}get resolvedName(){if(!Object.prototype.hasOwnProperty.call(A,this.name))throw new Error(`Invalid sd-tag name: "${this.name}"`);return this.name}get resolvedConfig(){return A[this.resolvedName]}renderIcon(t,e){return null==this.icon?null:i("sd-icon",{class:"sd-tag__icon",name:this.icon,size:e,color:t})}render(){const t=this.resolvedConfig,e=this.renderIcon(t.icon,t.iconSize);return i("span",{key:"09cc181654983b64dec9860fdf656677ebcfcd15",class:"sd-tag",style:{"--sd-tag-background":t.background,"--sd-tag-content":t.content,"--sd-tag-height":t.height,"--sd-tag-padding-x":t.paddingX,"--sd-tag-gap":t.gap,"--sd-tag-font-size":t.fontSize,"--sd-tag-font-weight":t.fontWeight,"--sd-tag-line-height":t.lineHeight,"--sd-tag-radius":t.radius},"aria-label":this.label||"tag"},this.icon&&this.isLeft&&e,i("span",{key:"044ab51afc474799b400c608fd5531bed9a7ad18",class:"sd-tag__label"},this.label),this.icon&&!this.isLeft&&e)}};X.style="sd-tag{display:inline-flex;width:fit-content;height:fit-content}.sd-tag{display:inline-flex;align-items:center;justify-content:center;gap:var(--sd-tag-gap, 5px);min-height:var(--sd-tag-height, 24px);padding:0 var(--sd-tag-padding-x, 8px);border-radius:var(--sd-tag-radius, 4px);background:var(--sd-tag-background, #f3f3f3);color:var(--sd-tag-content, #7a7a7a);box-sizing:border-box;white-space:nowrap;-webkit-user-select:none;user-select:none}.sd-tag__icon{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center}.sd-tag__label{display:inline-flex;align-items:center;justify-content:center;min-width:0;font-size:var(--sd-tag-font-size, 12px);font-weight:var(--sd-tag-font-weight, 700);line-height:var(--sd-tag-line-height, 20px)}";export{w as sd_ghost_button,k as sd_portal,X as sd_tag}

package/dist/design-system/p-DUyBmuH_.js

@@ -1 +0,0 @@
-import{h as o}from"./p-C7HJ-NfO.js";const t=t=>o("svg",{width:"16",height:"12",viewBox:"0 0 16 12",fill:"none",xmlns:"http://www.w3.org/2000/svg",...t},o("path",{d:"M8.83205 10.7519C8.43623 11.3457 7.56377 11.3457 7.16795 10.7519L1.04907e-06 -1.39876e-06L16 0L8.83205 10.7519Z",fill:"currentColor"}));export{t as T}

package/dist/design-system/p-e7d4b78e.entry.js

@@ -1 +0,0 @@
-import{r as i,c as t,a as s,h as e}from"./p-C7HJ-NfO.js";import{n}from"./p-CCwNgVmC.js";import{s as h}from"./p-BJfiMC9H.js";import{l as d,a as p}from"./p-U8VaRj9c.js";import{C as o,a,b as r}from"./p-DDj5KTBF.js";var l={minHeight:"36",paddingX:"12",paddingY:"6",radius:"4",typography:{fontFamily:"Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif",fontWeight:"400",fontSize:"12",lineHeight:"20"}},u={minHeight:"40",paddingX:"16",paddingY:"8",radius:"6",typography:{fontFamily:"Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif",fontWeight:"400",fontSize:"14",lineHeight:"24"}},c={placeholder:"#AAAAAA"};const g={sm:{minHeight:l.minHeight,paddingX:l.paddingX,paddingY:l.paddingY,radius:l.radius,fontSize:l.typography.fontSize,lineHeight:l.typography.lineHeight,fontWeight:l.typography.fontWeight,fontFamily:l.typography.fontFamily},md:{minHeight:u.minHeight,paddingX:u.paddingX,paddingY:u.paddingY,radius:u.radius,fontSize:u.typography.fontSize,lineHeight:u.typography.lineHeight,fontWeight:u.typography.fontWeight,fontFamily:u.typography.fontFamily}},f={text:{placeholder:c.placeholder}},m={chipGap:`${{gap:"8"}.gap}px`},v=h.typography.feedback.sm.regular,y={fontSize:`${v.fontSize}px`,fontWeight:`${v.fontWeight}`,color:c.placeholder},b=p.listItem,x={radius:`${d.listBox.radius}px`,maxHeight:"260px",itemPaddingY:`${b.paddingY}px`,itemPaddingX:`${b.paddingLeft.depth1}px`,itemPaddingRight:`${b.paddingRight}px`,itemGap:`${b.gap}px`,itemFontSize:`${b.typography.default.fontSize}px`,itemFontWeight:b.typography.default.fontWeight,itemFontWeightSelected:b.typography.selected.fontWeight,itemLineHeight:`${b.typography.default.lineHeight}px`,itemFontFamily:b.typography.default.fontFamily,itemColor:b.content.default,itemColorHover:b.content.hover,itemBgHover:b.bg.hover,emptyColor:"#888888",emptyFontSize:"12px",emptyLineHeight:"20px"},w=class{constructor(s){i(this,s),this.update=t(this,"sdUpdate",7),this.focusEvent=t(this,"sdFocus",7),this.blurEvent=t(this,"sdBlur",7),this.inputEvent=t(this,"sdInput",7)}static SUGGESTIONS_VIEWPORT_PADDING=8;get host(){return s(this)}values=[];errors=[];disabledChips=[];size="sm";disabled=!1;placeholder="입력해 주세요.";name=n();rules=[];error=!1;useReset=!1;maxCount;duplicateLabel;suggestions=[];loadingSuggestions=!1;recommendedItems=[];loadingRecommendedItems=!1;label="";labelWidth="";hint="";errorMessage="";width="";status;icon=void 0;labelTooltip="";labelTooltipProps=null;internalValues=[];internalErrors=[];focused=!1;hovered=!1;inputValue="";activeSuggestionIndex=-1;suppressSuggestions=!1;suppressRecommendations=!1;inputEl;formField;chipInputRef;get value(){return this.internalValues}valuesChanged(i){this.internalValues=Array.isArray(i)?[...i]:[]}errorsChanged(i){Array.isArray(i)&&(this.internalErrors=[...i])}internalValuesChanged_validate(){"function"==typeof this.formField?.sdValidate&&this.formField.sdValidate()}suggestionsChanged(i){Array.isArray(i)||(this.suggestions=[]),this.activeSuggestionIndex=-1,this.suppressSuggestions=!1}recommendedItemsChanged(i){Array.isArray(i)||(this.recommendedItems=[]),this.activeSuggestionIndex=-1}componentWillLoad(){this.internalValues=Array.isArray(this.values)?[...this.values]:[],Array.isArray(this.errors)&&(this.internalErrors=[...this.errors]),this.inputValue=this.inputValue??""}isDuplicateChip(i){return this.internalValues.indexOf(this.internalValues[i])!==i}getChipError(i){return!!this.isDuplicateChip(i)||("function"==typeof this.errors?this.errors(this.internalValues?.[i]??""):this.internalErrors?.[i]??!1)}getChipDisabled(i){return!!this.disabled||("function"==typeof this.disabledChips?this.disabledChips(this.internalValues?.[i]??""):this.disabledChips?.[i]??!1)}update;focusEvent;blurEvent;inputEvent;async sdValidate(){return this.formField?.sdValidate()}async sdReset(){return this.formField?.sdReset()}async sdResetValidate(){return this.formField?.sdResetValidation()}async sdFocus(){return this.formField?.sdFocus()}addChip=i=>{if(null!=this.maxCount&&this.internalValues.length>=this.maxCount)return;const t=[...this.internalValues,i];if(this.internalValues=t,this.values=t,Array.isArray(this.errors)){const i=[...this.internalErrors,!1];this.internalErrors=i,this.errors=i}Array.isArray(this.disabledChips)&&(this.disabledChips=[...this.disabledChips,!1]),null!=this.inputEl&&(this.inputEl.value=""),this.inputValue="",this.activeSuggestionIndex=-1,this.suppressSuggestions=!0,this.update.emit(t),this.inputEvent.emit(""),this.inputEl?.focus(),this.suppressRecommendations=!0};handleChipRemove=i=>{const t=this.internalValues.filter(((t,s)=>s!==i));if(this.internalValues=t,this.values=t,Array.isArray(this.errors)){const t=this.internalErrors.filter(((t,s)=>s!==i));this.internalErrors=t,this.errors=t}Array.isArray(this.disabledChips)&&(this.disabledChips=this.disabledChips.filter(((t,s)=>s!==i))),this.update.emit(t),this.inputEl?.focus(),this.suppressRecommendations=!0};handleKeyDown=i=>{const t=i.target,s=this.suggestions??[],e=this.recommendedItems??[],n=this.focused&&""!==this.inputValue&&!this.suppressSuggestions&&(s.length>0||this.loadingSuggestions),h=this.focused&&""===this.inputValue&&!this.suppressRecommendations&&(e.length>0||this.loadingRecommendedItems),d=n?s:e;if(n||h){if("ArrowDown"===i.key)return i.preventDefault(),void(this.activeSuggestionIndex=Math.min(this.activeSuggestionIndex+1,d.length-1));if("ArrowUp"===i.key)return i.preventDefault(),void(this.activeSuggestionIndex=Math.max(this.activeSuggestionIndex-1,-1));if("Escape"===i.key)return n&&(this.suppressSuggestions=!0),h&&(this.suppressRecommendations=!0),void(this.activeSuggestionIndex=-1);if("Enter"===i.key&&this.activeSuggestionIndex>=0){i.preventDefault();const t=d[this.activeSuggestionIndex];return void((this.internalValues??[]).includes(t)||this.addChip(t))}}if("Enter"!==i.key||i.isComposing||""===t.value.trim()){if("Backspace"===i.key&&""===t.value&&this.internalValues.length>0){if(this.getChipDisabled(this.internalValues.length-1))return;i.preventDefault();const t=this.internalValues.slice(0,-1);if(this.internalValues=t,this.values=t,Array.isArray(this.errors)){const i=this.internalErrors.slice(0,-1);this.internalErrors=i,this.errors=i}Array.isArray(this.disabledChips)&&(this.disabledChips=this.disabledChips.slice(0,-1)),this.update.emit(t)}}else{if(null!=this.maxCount&&this.internalValues.length>=this.maxCount)return;i.preventDefault(),this.addChip(t.value.trim())}};handleInput=i=>{const t=i.target.value,s=""===t;""===this.inputValue!==s&&(this.activeSuggestionIndex=-1,s&&(this.suppressRecommendations=!1)),this.inputValue=t,this.suppressSuggestions=!1,this.inputEvent.emit(t)};handleFocus=()=>{this.focused=!0,this.suppressRecommendations=!1,this.focusEvent.emit()};handleBlur=()=>{this.focused=!1,this.activeSuggestionIndex=-1,this.blurEvent.emit()};closeSuggestions=()=>{this.focused=!1,this.activeSuggestionIndex=-1,this.suppressSuggestions=!0,this.suppressRecommendations=!0};handleContainerClick=()=>{this.disabled||(this.suppressRecommendations=!1,this.suppressSuggestions=!1,this.inputEl?.focus())};handleResetInput=()=>{const i=this.internalValues.reduce(((i,t,s)=>(this.getChipDisabled(s)&&i.push(s),i)),[]),t=i.map((i=>this.internalValues[i]));if(this.internalValues=t,this.values=t,Array.isArray(this.errors)){const t=i.map((i=>this.internalErrors[i]??!1));this.internalErrors=t,this.errors=t}else this.internalErrors=[];if(Array.isArray(this.disabledChips)){const t=this.disabledChips;this.disabledChips=i.map((i=>t[i]))}this.update.emit(t),this.inputEl?.focus()};duplicateRule=()=>{const i=new Set;for(const t of this.internalValues){if(i.has(t))return null!=this.duplicateLabel&&""!==this.duplicateLabel?`이미 입력된 ${this.duplicateLabel}입니다.`:"중복된 값이 존재합니다.";i.add(t)}return!0};render(){const i=g[this.size]??g.sm,t={[`--sd-system-size-field-${this.size}-height`]:"auto",[`--sd-system-radius-field-${this.size}`]:`${i.radius}px`,"--sd-chip-input-min-height":`${i.minHeight}px`,"--sd-chip-input-padding-x":`${i.paddingX}px`,"--sd-chip-input-padding-y":`${i.paddingY}px`,"--sd-chip-input-font-size":`${i.fontSize}px`,"--sd-chip-input-line-height":`${i.lineHeight}px`,"--sd-chip-input-font-weight":i.fontWeight,"--sd-chip-input-font-family":i.fontFamily,"--sd-chip-input-chip-gap":m.chipGap,"--sd-chip-input-placeholder-color":f.text.placeholder,"--sd-chip-input-reset-gap":m.chipGap,"--sd-chip-input-divider-color":"#E1E1E1","--sd-chip-input-field-height":r.height,"--sd-chip-input-field-padding-x":r.paddingX,"--sd-chip-input-field-radius":r.radius,"--sd-chip-input-field-border-width":r.borderWidth,"--sd-chip-input-field-bg":a.bg.default,"--sd-chip-input-field-border-color":"transparent","--sd-chip-input-field-content":a.content.focus,"--sd-chip-input-field-font-size":o.focus.fontSize,"--sd-chip-input-field-font-weight":o.focus.fontWeight,"--sd-chip-input-field-line-height":o.focus.lineHeight,"--sd-chip-input-field-font-family":o.focus.fontFamily,"--sd-chip-input-max-count-font-size":y.fontSize,"--sd-chip-input-max-count-font-weight":y.fontWeight,"--sd-chip-input-max-count-color":y.color,"--sd-chip-input-suggestions-radius":x.radius,"--sd-chip-input-suggestions-max-height":x.maxHeight,"--sd-chip-input-suggestion-padding-y":x.itemPaddingY,"--sd-chip-input-suggestion-padding-x":x.itemPaddingX,"--sd-chip-input-suggestion-padding-right":x.itemPaddingRight,"--sd-chip-input-suggestion-gap":x.itemGap,"--sd-chip-input-suggestion-font-size":x.itemFontSize,"--sd-chip-input-suggestion-font-weight":x.itemFontWeight,"--sd-chip-input-suggestion-font-weight-selected":x.itemFontWeightSelected,"--sd-chip-input-suggestion-line-height":x.itemLineHeight,"--sd-chip-input-suggestion-font-family":x.itemFontFamily,"--sd-chip-input-suggestion-color":x.itemColor,"--sd-chip-input-suggestion-color-hover":x.itemColorHover,"--sd-chip-input-suggestion-bg-hover":x.itemBgHover,"--sd-chip-input-suggestions-empty-color":x.emptyColor,"--sd-chip-input-suggestions-empty-font-size":x.emptyFontSize,"--sd-chip-input-suggestions-empty-line-height":x.emptyLineHeight},s=null!=this.maxCount&&this.internalValues.length>=this.maxCount,n=this.useReset&&this.internalValues.length>0||null!=this.maxCount,h=this.suggestions??[],d=this.recommendedItems??[],p=this.focused&&""!==this.inputValue&&!this.suppressSuggestions&&(h.length>0||this.loadingSuggestions),l=p||this.focused&&""===this.inputValue&&!this.suppressRecommendations&&(d.length>0||this.loadingRecommendedItems),u=p?h:d,c=p?this.loadingSuggestions&&0===h.length:this.loadingRecommendedItems&&0===d.length,v={width:`${this.chipInputRef?.offsetWidth??0}px`,display:"flex",flexDirection:"column",boxSizing:"border-box",background:"#FFFFFF",borderRadius:x.radius,boxShadow:"2px 2px 12px 2px rgba(0, 0, 0, 0.1)",maxHeight:x.maxHeight,minHeight:"0",overflowY:"auto",overflowX:"hidden",outline:"none"},b={display:"flex",flexShrink:"0",alignItems:"center",gap:x.itemGap,padding:`${x.itemPaddingY} ${x.itemPaddingRight} ${x.itemPaddingY} ${x.itemPaddingX}`,fontSize:x.itemFontSize,lineHeight:x.itemLineHeight,fontWeight:x.itemFontWeight,fontFamily:x.itemFontFamily,color:x.itemColor,cursor:"pointer",userSelect:"none",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"},_={padding:"12px",textAlign:"center",fontSize:x.emptyFontSize,lineHeight:x.emptyLineHeight,fontFamily:x.itemFontFamily,color:x.emptyColor};return e("sd-field",{key:"b72e33b6f204ebdf6791cc2f20d01bbb74a4203a",name:this.name,label:this.label,labelWidth:this.labelWidth,hint:this.hint,errorMessage:this.errorMessage,rules:[this.duplicateRule,...this.rules??[]],error:this.error,disabled:this.disabled,focused:this.focused,hovered:this.hovered,status:this.status,size:this.size,width:this.width,icon:this.icon,labelTooltip:this.labelTooltip,labelTooltipProps:this.labelTooltipProps,ref:i=>this.formField=i,style:t,onMouseEnter:()=>this.hovered=!0,onMouseLeave:()=>this.hovered=!1},e("div",{key:"499114d06f4d375fed5575edd394c501f4d72691",class:"sd-chip-input",ref:i=>this.chipInputRef=i,onClick:this.handleContainerClick},(this.internalValues??[]).map(((i,t)=>e("sd-chip",{key:t,value:i,error:this.getChipError(t),disabled:this.getChipDisabled(t),editable:!1,onSdRemove:()=>this.handleChipRemove(t)}))),!s&&e("div",{key:"5910a2d0e0e9cbc472baa1d9c9c3fa07e89fbdcb",class:{"sd-chip-input__field":!0,"sd-chip-input__field--filled":""!==this.inputValue,"sd-chip-input__field--empty":""===this.inputValue&&this.internalValues.length>0&&!this.focused},"data-value":""!==this.inputValue?this.inputValue:0===this.internalValues.length?this.placeholder:""},e("input",{key:"3c1e75d691332b67a500a2d17030d5db191bdeb9",ref:i=>this.inputEl=i,class:"sd-chip-input__input",placeholder:0===this.internalValues.length?this.placeholder:"",disabled:this.disabled,size:1,onInput:this.handleInput,onKeyDown:this.handleKeyDown,onFocus:this.handleFocus,onBlur:this.handleBlur})),n&&e("div",{key:"4aa212280a928b88b85dffa3d453ea8f563e1fe0",class:"sd-chip-input__reset",onMouseDown:i=>i.preventDefault()},""===this.inputValue&&e("span",{key:"f7faa45b57d8e38dda8cc98119357f92d914fee4",class:"sd-chip-input__divider"}),null!=this.maxCount&&e("span",{key:"dfde4ea82558414614fb2d817f7bfa1fb5d4bf5f",class:"sd-chip-input__max-count"},"최대 ",this.maxCount,"개"),this.useReset&&this.internalValues.length>0&&e("sd-text-link",{key:"9b43c82c1a5d425e5b187e92b4259e7d919491e3",icon:"reset",iconColor:"#888888",label:"입력 초기화",underline:!0,disabled:this.disabled,style:{"--sd-text-link-color":"#555555"},onSdClick:this.handleResetInput})),l&&e("sd-portal",{key:"aa205aacbbafcd8c3d9855268637e6da956d4a74",open:l,parentRef:this.chipInputRef??null,viewportPadding:w.SUGGESTIONS_VIEWPORT_PADDING,onSdClose:this.closeSuggestions},e("div",{key:"26814734f202da3a13e695ae1d0c913ea430b888",class:"sd-chip-input__suggestions",role:"listbox",style:v},c&&e("div",{key:"df80d11b79f67dc6cfe6503b258528efa3752265",class:"sd-chip-input__suggestions-empty",style:_},"불러오는 중..."),u.map(((i,t)=>{const s=(this.internalValues??[]).includes(i),n=t===this.activeSuggestionIndex&&!s;return e("div",{key:i,class:{"sd-chip-input__suggestion-item":!0,"sd-chip-input__suggestion-item--active":n,"sd-chip-input__suggestion-item--selected":s},role:"option",tabIndex:-1,"aria-selected":s||n,"aria-disabled":s?"true":void 0,style:s?{...b,color:"#0075FF",fontWeight:x.itemFontWeightSelected,cursor:"default"}:n?{...b,background:x.itemBgHover,color:x.itemColorHover,fontWeight:x.itemFontWeightSelected}:b,onMouseDown:t=>{t.preventDefault(),s||this.addChip(i)}},e("span",{style:{flex:"1"}},i),s&&e("sd-icon",{name:"check",size:"12",style:{color:"#0075FF",flexShrink:"0"}}))}))))))}static get watchers(){return{values:[{valuesChanged:0}],errors:[{errorsChanged:0}],internalValues:[{internalValuesChanged_validate:0}],suggestions:[{suggestionsChanged:0}],recommendedItems:[{recommendedItemsChanged:0}]}}};w.style="sd-chip-input{display:inline-flex}sd-chip-input .sd-chip-input{position:relative;width:100%;isolation:isolate;min-height:var(--sd-chip-input-min-height);display:flex;flex-flow:row wrap;align-items:center;gap:var(--sd-chip-input-chip-gap);padding:var(--sd-chip-input-padding-y) var(--sd-chip-input-padding-x);cursor:text}sd-chip-input .sd-chip-input__reset{display:inline-flex;align-items:center;gap:var(--sd-chip-input-reset-gap);flex-shrink:0}sd-chip-input .sd-chip-input__divider{display:inline-block;width:1px;height:12px;background-color:var(--sd-chip-input-divider-color);flex-shrink:0}sd-chip-input .sd-chip-input__max-count{font-size:var(--sd-chip-input-max-count-font-size);font-weight:var(--sd-chip-input-max-count-font-weight);color:var(--sd-chip-input-max-count-color);white-space:nowrap;flex-shrink:0}sd-chip-input .sd-chip-input__field{flex:0 0 auto;display:inline-grid;grid-template-columns:minmax(0, max-content);align-items:center;min-width:1ch;max-width:100%;height:var(--sd-chip-input-field-height);box-sizing:border-box;padding:0;border:none;border-radius:0;background:transparent;overflow:hidden}sd-chip-input .sd-chip-input__field::after{content:attr(data-value);grid-area:1/1;visibility:hidden;white-space:pre;font-size:var(--sd-chip-input-field-font-size);line-height:var(--sd-chip-input-field-line-height);font-weight:var(--sd-chip-input-field-font-weight);font-family:var(--sd-chip-input-field-font-family)}sd-chip-input .sd-chip-input__field--filled{padding:0 var(--sd-chip-input-field-padding-x);border:var(--sd-chip-input-field-border-width) solid var(--sd-chip-input-field-border-color);border-radius:var(--sd-chip-input-field-radius);background:var(--sd-chip-input-field-bg)}sd-chip-input .sd-chip-input__field--empty{position:absolute;top:0;left:0;width:0;height:0;min-width:0;overflow:hidden}sd-chip-input .sd-chip-input__input{grid-area:1/1;width:100%;min-width:1ch;height:var(--sd-chip-input-field-height);margin:0;padding:0;border:none;outline:none;overflow:hidden;text-overflow:ellipsis;background:transparent;font-size:var(--sd-chip-input-field-font-size);line-height:var(--sd-chip-input-field-line-height);font-weight:var(--sd-chip-input-field-font-weight);font-family:var(--sd-chip-input-field-font-family);color:var(--sd-chip-input-field-content)}sd-chip-input .sd-chip-input__input[disabled]{cursor:not-allowed;pointer-events:none}sd-chip-input .sd-chip-input__input::placeholder{color:var(--sd-chip-input-placeholder-color)}sd-chip-input .sd-chip-input__suggestions{display:flex;flex-direction:column;box-sizing:border-box;background:white;border-radius:var(--sd-chip-input-suggestions-radius);box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);max-height:var(--sd-chip-input-suggestions-max-height);min-height:0;overflow-y:auto;overflow-x:hidden;outline:none}sd-chip-input .sd-chip-input__suggestion-item{display:flex;flex-shrink:0;align-items:center;gap:var(--sd-chip-input-suggestion-gap);padding:var(--sd-chip-input-suggestion-padding-y) var(--sd-chip-input-suggestion-padding-right) var(--sd-chip-input-suggestion-padding-y) var(--sd-chip-input-suggestion-padding-x);font-size:var(--sd-chip-input-suggestion-font-size);line-height:var(--sd-chip-input-suggestion-line-height);font-weight:var(--sd-chip-input-suggestion-font-weight);font-family:var(--sd-chip-input-suggestion-font-family);color:var(--sd-chip-input-suggestion-color);cursor:pointer;user-select:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}sd-chip-input .sd-chip-input__suggestion-item--active{background:var(--sd-chip-input-suggestion-bg-hover);color:var(--sd-chip-input-suggestion-color-hover);font-weight:var(--sd-chip-input-suggestion-font-weight-selected)}sd-chip-input .sd-chip-input__suggestion-item--selected{cursor:default;overflow:visible;text-overflow:unset}sd-chip-input .sd-chip-input__suggestions-empty{padding:12px;text-align:center;font-size:var(--sd-chip-input-suggestions-empty-font-size);line-height:var(--sd-chip-input-suggestions-empty-line-height);font-family:var(--sd-chip-input-suggestion-font-family);color:var(--sd-chip-input-suggestions-empty-color)}";export{w as sd_chip_input}