@sellmate/design-system 1.0.15 → 1.0.17

package/dist/components/p-CbEUJ3R6.js

@@ -1,150 +0,0 @@
-import { p as proxyCustomElement, H, c as createEvent, h, t as transformTag } from './p-CR2Jbl0B.js';
-
-const SdPortal = /*@__PURE__*/ proxyCustomElement(class SdPortal extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.close = createEvent(this, "sdClose");
-    }
-    get hostEl() { return this; }
-    to = 'body';
-    parentRef = null;
-    offset = [0, 4];
-    zIndex = 9999;
-    open = false;
-    close;
-    container;
-    wrapper;
-    rafId;
-    isInsideClick = false;
-    resizeObserver;
-    mutationObserver;
-    componentDidLoad() {
-        this.container = this.resolveContainer();
-        this.createWrapper();
-        this.moveSlotContent();
-        this.updatePosition();
-        this.observeParent();
-    }
-    componentDidRender() {
-        if (!this.wrapper)
-            return;
-        this.wrapper.style.display = this.open ? 'block' : 'none';
-        if (this.open)
-            this.updatePosition();
-    }
-    disconnectedCallback() {
-        this.unobserveParent();
-        this.wrapper?.remove();
-    }
-    resolveContainer() {
-        const el = typeof this.to === 'string' ? document.querySelector(this.to) : this.to;
-        return el instanceof H ? el : document.body;
-    }
-    createWrapper() {
-        this.wrapper = document.createElement('div');
-        Object.assign(this.wrapper.style, {
-            position: 'absolute',
-            zIndex: this.zIndex.toString(),
-            transition: 'opacity 0.4s',
-        });
-        this.container.appendChild(this.wrapper);
-    }
-    moveSlotContent() {
-        if (!this.wrapper)
-            return;
-        const nodes = Array.from(this.hostEl.childNodes).filter(n => n.nodeType !== Node.COMMENT_NODE);
-        nodes.forEach(n => this.wrapper.appendChild(n));
-    }
-    // 위치 갱신 (scroll / resize)
-    updatePosition() {
-        if (this.rafId)
-            cancelAnimationFrame(this.rafId);
-        this.rafId = requestAnimationFrame(() => {
-            if (!this.parentRef || !this.wrapper)
-                return;
-            const parentRect = this.parentRef.getBoundingClientRect();
-            const wrapperRect = this.wrapper.getBoundingClientRect();
-            const viewport = {
-                width: window.innerWidth,
-                height: window.innerHeight,
-            };
-            let top = parentRect.bottom + window.scrollY + this.offset[1];
-            let left = parentRect.left + window.scrollX + this.offset[0];
-            // 화면 상하단 넘어갈 시 반전
-            if (parentRect.bottom + wrapperRect.height + this.offset[1] > viewport.height) {
-                top = parentRect.top + window.scrollY - wrapperRect.height - this.offset[1];
-            }
-            if (top < window.scrollY) {
-                top = parentRect.bottom + window.scrollY + this.offset[1];
-            }
-            // 화면 좌우측 넘어갈 시 반전
-            if (parentRect.left + wrapperRect.width + this.offset[0] > viewport.width) {
-                left = parentRect.right + window.scrollX - wrapperRect.width - this.offset[0];
-            }
-            if (left < 0) {
-                left = this.offset[0];
-            }
-            this.wrapper.style.top = `${top}px`;
-            this.wrapper.style.left = `${left}px`;
-        });
-    }
-    // parentRef의 이동 / 크기변경 감지
-    observeParent() {
-        if (!this.parentRef)
-            return;
-        this.resizeObserver = new ResizeObserver(() => this.updatePosition());
-        this.resizeObserver.observe(this.parentRef);
-        this.mutationObserver = new MutationObserver(() => this.updatePosition());
-        this.mutationObserver.observe(document.body, {
-            childList: true,
-            subtree: true,
-        });
-    }
-    unobserveParent() {
-        this.resizeObserver?.disconnect();
-        this.mutationObserver?.disconnect();
-    }
-    // 외부 클릭 감지
-    handleMouseDown(e) {
-        this.isInsideClick = !!(this.wrapper && this.wrapper.contains(e.target));
-    }
-    handleWindowClick(e) {
-        if (this.isInsideClick) {
-            this.isInsideClick = false;
-            return;
-        }
-        if (this.wrapper?.contains(e.target))
-            return;
-        this.close.emit();
-    }
-    render() {
-        return h("slot", { key: '5469d915f8a11d490a1839167b3ae771624d257b' });
-    }
-}, [772, "sd-portal", {
-        "to": [1],
-        "parentRef": [16],
-        "offset": [16],
-        "zIndex": [2, "z-index"],
-        "open": [4]
-    }, [[9, "scroll", "updatePosition"], [9, "resize", "updatePosition"], [9, "mousedown", "handleMouseDown"], [8, "click", "handleWindowClick"]]]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["sd-portal"];
-    components.forEach(tagName => { switch (tagName) {
-        case "sd-portal":
-            if (!customElements.get(transformTag(tagName))) {
-                customElements.define(transformTag(tagName), SdPortal);
-            }
-            break;
-    } });
-}
-
-export { SdPortal as S, defineCustomElement as d };
-//# sourceMappingURL=p-CbEUJ3R6.js.map
-
-//# sourceMappingURL=p-CbEUJ3R6.js.map

package/dist/components/p-CbEUJ3R6.js.map

@@ -1 +0,0 @@
-{"file":"p-CbEUJ3R6.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-portal/sd-portal.tsx"],"sourcesContent":["import { Component, Element, Event, EventEmitter, Listen, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'sd-portal',\n shadow: false,\n})\nexport class SdPortal {\n @Element() hostEl!: HTMLElement;\n @Prop() to: HTMLElement | string = 'body';\n @Prop() parentRef: HTMLElement | null = null;\n @Prop() offset: [number, number] = [0, 4];\n @Prop() zIndex: number = 9999;\n @Prop() open: boolean = false;\n\n @Event({ eventName: 'sdClose' }) close!: EventEmitter<void>;\n\n private container?: HTMLElement;\n private wrapper?: HTMLElement;\n private rafId?: number;\n private isInsideClick = false;\n\n private resizeObserver?: ResizeObserver;\n private mutationObserver?: MutationObserver;\n\n componentDidLoad() {\n  this.container = this.resolveContainer();\n  this.createWrapper();\n  this.moveSlotContent();\n  this.updatePosition();\n  this.observeParent();\n }\n\n componentDidRender() {\n  if (!this.wrapper) return;\n  this.wrapper.style.display = this.open ? 'block' : 'none';\n  if (this.open) this.updatePosition();\n }\n\n disconnectedCallback() {\n  this.unobserveParent();\n  this.wrapper?.remove();\n }\n\n private resolveContainer(): HTMLElement {\n  const el = typeof this.to === 'string' ? document.querySelector(this.to) : this.to;\n  return el instanceof HTMLElement ? el : document.body;\n }\n\n private createWrapper() {\n  this.wrapper = document.createElement('div');\n  Object.assign(this.wrapper.style, {\n   position: 'absolute',\n   zIndex: this.zIndex.toString(),\n   transition: 'opacity 0.4s',\n  });\n  this.container!.appendChild(this.wrapper);\n }\n\n private moveSlotContent() {\n  if (!this.wrapper) return;\n  const nodes = Array.from(this.hostEl.childNodes).filter(n => n.nodeType !== Node.COMMENT_NODE);\n  nodes.forEach(n => this.wrapper!.appendChild(n));\n }\n\n // 위치 갱신 (scroll / resize)\n @Listen('scroll', { target: 'window' })\n @Listen('resize', { target: 'window' })\n updatePosition() {\n  if (this.rafId) cancelAnimationFrame(this.rafId);\n  this.rafId = requestAnimationFrame(() => {\n   if (!this.parentRef || !this.wrapper) return;\n\n   const parentRect = this.parentRef.getBoundingClientRect();\n   const wrapperRect = this.wrapper.getBoundingClientRect();\n   const viewport = {\n    width: window.innerWidth,\n    height: window.innerHeight,\n   };\n\n   let top = parentRect.bottom + window.scrollY + this.offset[1];\n   let left = parentRect.left + window.scrollX + this.offset[0];\n\n   // 화면 상하단 넘어갈 시 반전\n   if (parentRect.bottom + wrapperRect.height + this.offset[1] > viewport.height) {\n    top = parentRect.top + window.scrollY - wrapperRect.height - this.offset[1];\n   }\n   if (top < window.scrollY) {\n    top = parentRect.bottom + window.scrollY + this.offset[1];\n   }\n\n   // 화면 좌우측 넘어갈 시 반전\n   if (parentRect.left + wrapperRect.width + this.offset[0] > viewport.width) {\n    left = parentRect.right + window.scrollX - wrapperRect.width - this.offset[0];\n   }\n   if (left < 0) {\n    left = this.offset[0];\n   }\n\n   this.wrapper.style.top = `${top}px`;\n   this.wrapper.style.left = `${left}px`;\n  });\n }\n\n // parentRef의 이동 / 크기변경 감지\n private observeParent() {\n  if (!this.parentRef) return;\n\n  this.resizeObserver = new ResizeObserver(() => this.updatePosition());\n  this.resizeObserver.observe(this.parentRef);\n\n  this.mutationObserver = new MutationObserver(() => this.updatePosition());\n  this.mutationObserver.observe(document.body, {\n   childList: true,\n   subtree: true,\n  });\n }\n\n private unobserveParent() {\n  this.resizeObserver?.disconnect();\n  this.mutationObserver?.disconnect();\n }\n\n // 외부 클릭 감지\n @Listen('mousedown', { target: 'window' })\n handleMouseDown(e: MouseEvent) {\n  this.isInsideClick = !!(this.wrapper && this.wrapper.contains(e.target as Node));\n }\n\n @Listen('click', { target: 'window' })\n handleWindowClick(e: MouseEvent) {\n  if (this.isInsideClick) {\n   this.isInsideClick = false;\n   return;\n  }\n  if (this.wrapper?.contains(e.target as Node)) return;\n  this.close.emit();\n }\n\n render() {\n  return <slot></slot>;\n }\n}\n"],"version":3}

package/dist/components/p-Cd145I-2.js

@@ -1,119 +0,0 @@
-import { p as proxyCustomElement, H, c as createEvent, h, t as transformTag } from './p-CR2Jbl0B.js';
-import { d as defineCustomElement$1 } from './p-zvhzq4Sw.js';
-
-const sdCheckboxCss = () => `sd-checkbox{display:block;height:20px;line-height:0}sd-checkbox .sd-checkbox{cursor:pointer;display:inline-flex;align-items:center;gap:8px;height:20px;max-height:20px}sd-checkbox .sd-checkbox>input{display:none}sd-checkbox .sd-checkbox:hover.sd-checkbox--checked .sd-checkbox__bg,sd-checkbox .sd-checkbox:hover.sd-checkbox--indeterminate .sd-checkbox__bg{border-color:#005cc9;background:#005cc9}sd-checkbox .sd-checkbox:hover.sd-checkbox--unchecked .sd-checkbox__bg{border:1px solid #0075ff;background:#d9eaff}sd-checkbox .sd-checkbox:hover.sd-checkbox--disabled .sd-checkbox__bg{border:1px solid transparent;background:#eeeeee}sd-checkbox .sd-checkbox__bg{width:16px;height:16px;border-radius:2px;border:1px solid #888888;box-sizing:border-box;display:inline-flex;justify-content:center;align-items:center;overflow:hidden;line-height:0}sd-checkbox .sd-checkbox__label{font-size:12px;color:#333333;line-height:20px}sd-checkbox .sd-checkbox--checked.sd-checkbox--disabled .sd-checkbox__bg,sd-checkbox .sd-checkbox--indeterminate.sd-checkbox--disabled .sd-checkbox__bg{background:#eeeeee;border:1px solid #cccccc !important}sd-checkbox .sd-checkbox--checked .sd-checkbox__bg,sd-checkbox .sd-checkbox--indeterminate .sd-checkbox__bg{border:1px solid #0075ff;background:#0075ff}sd-checkbox .sd-checkbox--unchecked .sd-checkbox__bg{background:white}sd-checkbox .sd-checkbox--disabled{cursor:not-allowed}sd-checkbox .sd-checkbox--disabled .sd-checkbox__bg{background:#eeeeee;border:1px solid #cccccc !important}`;
-
-const SdCheckbox = /*@__PURE__*/ proxyCustomElement(class SdCheckbox extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.update = createEvent(this, "sdUpdate");
-    }
-    get el() { return this; }
-    /** 현재 선택 상태 또는 배열 형태의 값 */
-    value;
-    /** 배열 모드에서의 개별 값 */
-    val;
-    /** 비활성화 여부 */
-    disabled = false;
-    /** 표시할 라벨 텍스트 */
-    label = '';
-    /** 내부 체크 상태 */
-    isChecked = false;
-    /** 값 변경 이벤트 */
-    update;
-    componentWillLoad() {
-        this.updateCheckedState(this.value);
-    }
-    componentWillRender() {
-        this.updateCheckedState(this.value);
-    }
-    watchValueHandler(newValue) {
-        this.updateCheckedState(newValue);
-    }
-    get checkboxClasses() {
-        const classes = [
-            'sd-checkbox',
-            `sd-checkbox--${this.isChecked ? 'checked' : this.isChecked === null ? 'indeterminate' : 'unchecked'}`,
-        ];
-        if (this.disabled) {
-            classes.push('sd-checkbox--disabled');
-        }
-        return classes.join(' ');
-    }
-    updateCheckedState(value) {
-        if (value === null) {
-            this.isChecked = null;
-        }
-        else if (typeof value === 'boolean') {
-            this.isChecked = value;
-        }
-        else if (Array.isArray(value)) {
-            this.isChecked = this.val !== undefined && value.includes(this.val);
-        }
-        else {
-            this.isChecked = false;
-        }
-    }
-    handleChange = () => {
-        if (this.disabled)
-            return;
-        let newValue;
-        if (typeof this.value === 'boolean') {
-            newValue = !this.value;
-        }
-        else if (Array.isArray(this.value)) {
-            if (this.val === undefined) {
-                console.warn('A "val" property is required when using an array for the "value" property.');
-            }
-            const valueSet = new Set(this.value);
-            valueSet.has(this.val) ? valueSet.delete(this.val) : valueSet.add(this.val);
-            newValue = Array.from(valueSet);
-        }
-        else {
-            newValue = !this.isChecked;
-        }
-        this.value = newValue;
-        this.update.emit(newValue);
-    };
-    render() {
-        return (h("label", { key: 'b4f1e82e461cfc649a1bc5414fb55bcd8ea9c87d', "aria-label": this.label || 'checkbox', class: this.checkboxClasses }, h("input", { key: 'bb6f1d911ccc9a62c0149bb9e65bbf73ac86fc9b', type: "checkbox", value: this.val, checked: !!this.isChecked, disabled: this.disabled, onChange: this.handleChange, name: this.label || 'checkbox' }), h("div", { key: '2598f80d9028b306f04898544f94af2a06604093', class: "sd-checkbox__bg" }, this.isChecked !== false ? (h("sd-icon", { name: this.isChecked === true ? 'check' : 'minus', size: 12, color: this.disabled ? '#888888' : 'white' })) : null), this.label && h("span", { key: 'd07198f3d0796189988d030db5b882911d80c6bf', class: "sd-checkbox__label" }, this.label)));
-    }
-    static get watchers() { return {
-        "value": ["watchValueHandler"]
-    }; }
-    static get style() { return sdCheckboxCss(); }
-}, [768, "sd-checkbox", {
-        "value": [1028],
-        "val": [8],
-        "disabled": [4],
-        "label": [1],
-        "isChecked": [32]
-    }, undefined, {
-        "value": ["watchValueHandler"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["sd-checkbox", "sd-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "sd-checkbox":
-            if (!customElements.get(transformTag(tagName))) {
-                customElements.define(transformTag(tagName), SdCheckbox);
-            }
-            break;
-        case "sd-icon":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { SdCheckbox as S, defineCustomElement as d };
-//# sourceMappingURL=p-Cd145I-2.js.map
-
-//# sourceMappingURL=p-Cd145I-2.js.map

package/dist/components/p-Cd145I-2.js.map

@@ -1 +0,0 @@
-{"file":"p-Cd145I-2.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-checkbox/sd-checkbox.scss?tag=sd-checkbox","src/components/sd-checkbox/sd-checkbox.tsx"],"sourcesContent":["@import 'variables';\n\nsd-checkbox {\n display: block;\n height: 20px;\n line-height: 0;\n\n .sd-checkbox {\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  height: 20px;\n  max-height: 20px;\n\n  > input {\n   display: none;\n  }\n\n  &:hover {\n   &.sd-checkbox--checked,\n   &.sd-checkbox--indeterminate {\n    .sd-checkbox__bg {\n     border-color: $brilliantblue_80;\n     background: $brilliantblue_80;\n    }\n   }\n\n   &.sd-checkbox--unchecked {\n    .sd-checkbox__bg {\n     border: 1px solid $brilliantblue_75;\n     background: $brilliantblue_25;\n    }\n   }\n\n   &.sd-checkbox--disabled {\n    .sd-checkbox__bg {\n     border: 1px solid transparent;\n     background: $grey_20;\n    }\n   }\n  }\n\n  &__bg {\n   width: 16px;\n   height: 16px;\n   border-radius: 2px;\n   border: 1px solid $grey_65;\n   box-sizing: border-box;\n   display: inline-flex;\n   justify-content: center;\n   align-items: center;\n   overflow: hidden;\n   line-height: 0;\n  }\n\n  &__label {\n   font-size: 12px;\n   color: $grey_90;\n   line-height: 20px;\n  }\n\n  &--checked,\n  &--indeterminate {\n   &.sd-checkbox--disabled {\n    .sd-checkbox__bg {\n     background: $grey_20;\n     border: 1px solid $grey_45 !important;\n    }\n   }\n\n   .sd-checkbox__bg {\n    border: 1px solid $brilliantblue_75;\n    background: $brilliantblue_75;\n   }\n  }\n\n  &--unchecked {\n   .sd-checkbox__bg {\n    background: white;\n   }\n  }\n\n  &--disabled {\n   cursor: not-allowed;\n   .sd-checkbox__bg {\n    background: $grey_20;\n    border: 1px solid $grey_45 !important;\n   }\n  }\n }\n}\n","import { Component, Prop, h, Element, Event, EventEmitter, State, Watch } from '@stencil/core';\n\nexport type CheckedType = boolean | any[] | null;\n\n@Component({\n tag: 'sd-checkbox',\n styleUrl: 'sd-checkbox.scss',\n})\nexport class SdCheckbox {\n @Element() el!: HTMLElement;\n\n /** 현재 선택 상태 또는 배열 형태의 값 */\n @Prop({ mutable: true }) value!: CheckedType;\n\n /** 배열 모드에서의 개별 값 */\n @Prop() val?: any;\n\n /** 비활성화 여부 */\n @Prop() disabled: boolean = false;\n\n /** 표시할 라벨 텍스트 */\n @Prop() label: string = '';\n\n /** 내부 체크 상태 */\n @State() private isChecked: boolean | null = false;\n\n /** 값 변경 이벤트 */\n @Event({ eventName: 'sdUpdate' }) update!: EventEmitter<CheckedType>;\n\n componentWillLoad() {\n  this.updateCheckedState(this.value);\n }\n\n componentWillRender() {\n  this.updateCheckedState(this.value);\n }\n\n @Watch('value')\n watchValueHandler(newValue: CheckedType) {\n  this.updateCheckedState(newValue);\n }\n\n private get checkboxClasses(): string {\n  const classes = [\n   'sd-checkbox',\n   `sd-checkbox--${\n    this.isChecked ? 'checked' : this.isChecked === null ? 'indeterminate' : 'unchecked'\n   }`,\n  ];\n\n  if (this.disabled) {\n   classes.push('sd-checkbox--disabled');\n  }\n\n  return classes.join(' ');\n }\n\n private updateCheckedState(value: CheckedType) {\n  if (value === null) {\n   this.isChecked = null;\n  } else if (typeof value === 'boolean') {\n   this.isChecked = value;\n  } else if (Array.isArray(value)) {\n   this.isChecked = this.val !== undefined && value.includes(this.val);\n  } else {\n   this.isChecked = false;\n  }\n }\n\n private handleChange = () => {\n  if (this.disabled) return;\n\n  let newValue: CheckedType;\n\n  if (typeof this.value === 'boolean') {\n   newValue = !this.value;\n  } else if (Array.isArray(this.value)) {\n   if (this.val === undefined) {\n    console.warn('A \"val\" property is required when using an array for the \"value\" property.');\n   }\n\n   const valueSet = new Set(this.value);\n   valueSet.has(this.val) ? valueSet.delete(this.val) : valueSet.add(this.val);\n   newValue = Array.from(valueSet);\n  } else {\n   newValue = !this.isChecked;\n  }\n\n  this.value = newValue;\n  this.update.emit(newValue);\n };\n\n render() {\n  return (\n   <label aria-label={this.label || 'checkbox'} class={this.checkboxClasses}>\n    <input\n     type=\"checkbox\"\n     value={this.val}\n     checked={!!this.isChecked}\n     disabled={this.disabled}\n     onChange={this.handleChange}\n     name={this.label || 'checkbox'}\n    />\n    <div class=\"sd-checkbox__bg\">\n     {this.isChecked !== false ? (\n      <sd-icon\n       name={this.isChecked === true ? 'check' : 'minus'}\n       size={12}\n       color={this.disabled ? '#888888' : 'white'}\n      />\n     ) : null}\n    </div>\n    {this.label && <span class=\"sd-checkbox__label\">{this.label}</span>}\n   </label>\n  );\n }\n}\n"],"version":3}

package/dist/components/p-CiNjpVRK.js

@@ -1,104 +0,0 @@
-import { p as proxyCustomElement, H, h, F as Fragment, t as transformTag } from './p-CR2Jbl0B.js';
-import { T as TooltipArrow } from './p-hwPQdJr0.js';
-import { d as defineCustomElement$3 } from './p-lbT0o9hE.js';
-import { d as defineCustomElement$2 } from './p-BdgLMKjb.js';
-import { d as defineCustomElement$1 } from './p-zvhzq4Sw.js';
-
-const sdTooltipCss = () => `sd-tooltip{visibility:hidden !important;display:inline-flex}sd-tooltip.visible{visibility:visible !important}sd-tooltip .sd-tooltip{position:relative;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}`;
-
-const SdTooltip = /*@__PURE__*/ proxyCustomElement(class SdTooltip extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-    }
-    get el() { return this; }
-    trigger = 'hover';
-    placement = 'top';
-    color = '#01BB4B';
-    type = 'default';
-    icon = 'helpOutline';
-    iconSize = 12;
-    label = '';
-    buttonSize = 'sm';
-    buttonVariant = 'primary';
-    noHover = true;
-    useClose = false;
-    showTooltip = false;
-    slotContentHTML = '';
-    buttonEl;
-    handleClose = () => {
-        this.showTooltip = false;
-    };
-    componentWillLoad() {
-        this.slotContentHTML = this.el.innerHTML;
-        this.el.replaceChildren();
-        // 깜빡이는 현상을 막기 위해 기본으로 <sd-tooltip></sd-tooltip> hidden이 된 elment를 visible로 만들어줌
-        this.el.classList.toggle('visible', true);
-    }
-    render() {
-        const handleTrigger = this.trigger === 'hover'
-            ? {
-                onMouseEnter: () => (this.showTooltip = true),
-                onMouseLeave: () => (this.showTooltip = false),
-            }
-            : {
-                onClick: () => (this.showTooltip = !this.showTooltip),
-            };
-        return (h(Fragment, { key: 'd0db4bd2d57b38eae1522abd96c2776d6ffdd7c7' }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-tooltip", ...handleTrigger })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-tooltip", ...handleTrigger })), this.showTooltip && (h("sd-floating-portal", { key: 'ef5951d34aa4a0b5b831eadf464ab2c6711b9320', parentRef: this.buttonEl, onSdClose: this.handleClose.bind(this), placement: this.placement }, h("div", { key: '07f7090e1de9461d1a67b092631e1c8daae1abaa', class: {
-                'sd-floating-menu': true,
-                [`sd-floating-menu--${this.type}`]: true,
-                [`sd-floating-menu--${this.placement}`]: true,
-                'sd-floating-menu--with-close': this.useClose,
-            } }, h("i", { key: '2e8a1f6d7c2159ed48819229ee41ab75237ad2c2', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: '8bc18f6aeb197026ead06ef02837a70f924752f5' })), h("div", { key: 'cb91d969f481e7e1cf22e4a84aed3237b7b22376', class: "sd-floating-menu__content", innerHTML: this.slotContentHTML }), this.useClose && (h("div", { key: '856bf6d63862406177c32400e3d919f5fcd1c8df', class: "sd-floating-menu__close-button" }, h("button", { key: '83e107c58f9bc7927c449a186b19e6fa4730e53f', type: "button", "aria-label": "Close tooltip", title: "Close tooltip", onClick: this.handleClose.bind(this) }, h("sd-icon", { key: 'dc9dc331be0c6eb3ae96150ea50515f021746260', name: "close", size: "12", color: "#AAAAAA" })))))))));
-    }
-    static get style() { return sdTooltipCss(); }
-}, [768, "sd-tooltip", {
-        "trigger": [1],
-        "placement": [1],
-        "color": [1],
-        "type": [1],
-        "icon": [1],
-        "iconSize": [2, "icon-size"],
-        "label": [1],
-        "buttonSize": [1, "button-size"],
-        "buttonVariant": [1, "button-variant"],
-        "noHover": [4, "no-hover"],
-        "useClose": [4, "use-close"],
-        "showTooltip": [32],
-        "slotContentHTML": [32]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["sd-tooltip", "sd-button", "sd-floating-portal", "sd-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "sd-tooltip":
-            if (!customElements.get(transformTag(tagName))) {
-                customElements.define(transformTag(tagName), SdTooltip);
-            }
-            break;
-        case "sd-button":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$3();
-            }
-            break;
-        case "sd-floating-portal":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$2();
-            }
-            break;
-        case "sd-icon":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { SdTooltip as S, defineCustomElement as d };
-//# sourceMappingURL=p-CiNjpVRK.js.map
-
-//# sourceMappingURL=p-CiNjpVRK.js.map

package/dist/components/p-CiNjpVRK.js.map

@@ -1 +0,0 @@
-{"file":"p-CiNjpVRK.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-tooltip/sd-tooltip.scss?tag=sd-tooltip","src/components/sd-tooltip/sd-tooltip.tsx"],"sourcesContent":["sd-tooltip {\n visibility: hidden !important;\n display: inline-flex;\n\n &.visible {\n  visibility: visible !important;\n }\n\n .sd-tooltip {\n  position: relative;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n }\n}\n","import { Component, Element, Fragment, Prop, State, h } from '@stencil/core';\nimport { HTMLStencilElement } from '@stencil/core/internal';\nimport { ButtonSize, ButtonVariant } from '../sd-button/sd-button';\nimport { TooltipArrow } from '../assets/tooltipArrow';\n\nexport interface SdTooltipProps {\n trigger?: 'hover' | 'click';\n placement?: 'top' | 'bottom' | 'left' | 'right';\n color?: string;\n type?: 'default' | 'caution' | 'notice' | 'accent';\n icon?: IconName;\n iconSize?: number;\n label?: string;\n buttonSize?: ButtonSize;\n buttonVariant?: ButtonVariant;\n noHover?: boolean;\n useClose?: boolean;\n}\n\n@Component({\n tag: 'sd-tooltip',\n styleUrl: 'sd-tooltip.scss',\n})\nexport class SdTooltip {\n @Element() el!: HTMLElement;\n\n @Prop() trigger: 'hover' | 'click' = 'hover';\n @Prop() placement: 'top' | 'bottom' | 'left' | 'right' = 'top';\n @Prop() color: string = '#01BB4B';\n @Prop() type: 'default' | 'caution' | 'notice' | 'accent' = 'default';\n\n @Prop() icon: IconName = 'helpOutline';\n @Prop() iconSize: number = 12;\n\n @Prop() label: string = '';\n @Prop() buttonSize: ButtonSize = 'sm';\n @Prop() buttonVariant: ButtonVariant = 'primary';\n\n @Prop() noHover: boolean = true;\n\n @Prop() useClose: boolean = false;\n\n @State() showTooltip: boolean = false;\n @State() slotContentHTML: string = '';\n\n private buttonEl?: HTMLStencilElement;\n\n private handleClose = () => {\n  this.showTooltip = false;\n };\n\n componentWillLoad() {\n  this.slotContentHTML = this.el.innerHTML;\n  this.el.replaceChildren();\n  // 깜빡이는 현상을 막기 위해 기본으로 <sd-tooltip></sd-tooltip> hidden이 된 elment를 visible로 만들어줌\n  this.el.classList.toggle('visible', true);\n }\n\n render() {\n  const handleTrigger =\n   this.trigger === 'hover'\n    ? {\n       onMouseEnter: () => (this.showTooltip = true),\n       onMouseLeave: () => (this.showTooltip = false),\n      }\n    : {\n       onClick: () => (this.showTooltip = !this.showTooltip),\n      };\n\n  return (\n   <Fragment>\n    {this.label ? (\n     <sd-button\n      ref={el => (this.buttonEl = el)}\n      label={this.label}\n      icon={this.icon}\n      size={this.buttonSize}\n      color={this.color}\n      variant={this.buttonVariant}\n      class=\"sd-tooltip\"\n      {...handleTrigger}\n     ></sd-button>\n    ) : (\n     <sd-icon\n      ref={el => (this.buttonEl = el)}\n      name={this.icon}\n      size={this.iconSize}\n      color={this.color}\n      class=\"sd-tooltip\"\n      {...handleTrigger}\n     ></sd-icon>\n    )}\n\n    {this.showTooltip && (\n     <sd-floating-portal\n      parentRef={this.buttonEl}\n      onSdClose={this.handleClose.bind(this)}\n      placement={this.placement}\n     >\n      <div\n       class={{\n        'sd-floating-menu': true,\n        [`sd-floating-menu--${this.type}`]: true,\n        [`sd-floating-menu--${this.placement}`]: true,\n        'sd-floating-menu--with-close': this.useClose,\n       }}\n      >\n       <i class={`sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}`}>\n        <TooltipArrow></TooltipArrow>\n       </i>\n\n       <div class=\"sd-floating-menu__content\" innerHTML={this.slotContentHTML}></div>\n\n       {this.useClose && (\n        <div class=\"sd-floating-menu__close-button\">\n         <button\n          type=\"button\"\n          aria-label=\"Close tooltip\"\n          title=\"Close tooltip\"\n          onClick={this.handleClose.bind(this)}\n         >\n          <sd-icon name=\"close\" size=\"12\" color=\"#AAAAAA\"></sd-icon>\n         </button>\n        </div>\n       )}\n      </div>\n     </sd-floating-portal>\n    )}\n   </Fragment>\n  );\n }\n}\n"],"version":3}

package/dist/components/p-DQE5-tOR.js

@@ -1,200 +0,0 @@
-import { p as proxyCustomElement, H, c as createEvent, h, t as transformTag } from './p-CR2Jbl0B.js';
-import { d as defineCustomElement$5 } from './p-lbT0o9hE.js';
-import { d as defineCustomElement$4 } from './p-SUihbngJ.js';
-import { d as defineCustomElement$3 } from './p-BdgLMKjb.js';
-import { d as defineCustomElement$2 } from './p-zvhzq4Sw.js';
-import { d as defineCustomElement$1 } from './p-CiNjpVRK.js';
-
-/* @ts-self-types="./index.d.ts" */
-let urlAlphabet =
-  'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict';
-let nanoid = (size = 21) => {
-  let id = '';
-  let i = size | 0;
-  while (i--) {
-    id += urlAlphabet[(Math.random() * 64) | 0];
-  }
-  return id
-};
-
-const sdInputCss = () => `sd-icon{display:inline-block;line-height:0}sd-icon .sd-icon--rotate-90{transform:rotate(90deg)}sd-icon .sd-icon--rotate-180{transform:rotate(180deg)}sd-icon .sd-icon--rotate-270{transform:rotate(270deg)}.sd-date-picker{width:100%;display:inline-block}.sd-date-picker .sd-date-picker--disabled .date-icon{cursor:not-allowed !important;color:#888888 !important}.sd-date-picker .sd-date-picker__input{text-align:center !important}.sd-date-picker__menu{width:304px;box-sizing:border-box;border-radius:8px;padding:24px 19px;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.2);background:white}.sd-date-picker__menu .sd-date-picker__header{display:flex;flex-flow:row nowrap;align-items:center;gap:20px;font-size:14px;padding:0 5px;height:24px;line-height:24px}.sd-date-picker__menu .sd-date-picker__header .year-nav,.sd-date-picker__menu .sd-date-picker__header .month-nav{display:flex;flex-flow:row nowrap;align-items:center;gap:12px}.sd-date-picker__menu .sd-date-picker__header .year-nav button,.sd-date-picker__menu .sd-date-picker__header .month-nav button{background:none;border:none;cursor:pointer;margin:0;padding:0}.sd-date-picker__menu .sd-date-picker__header .year-nav__current{width:40px;text-align:center}.sd-date-picker__menu .sd-date-picker__header .month-nav__current{width:100px;text-align:center}.sd-date-picker__menu .sd-date-picker__days{margin-top:8px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr));column-gap:10px;padding:0 5px}.sd-date-picker__menu .sd-date-picker__days .day{width:28px;height:20px;font-size:12px;line-height:20px;text-align:center;color:#888888}.sd-date-picker__menu .sd-date-picker__body{margin-top:12px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr))}sd-date-range-picker{width:fit-content;display:inline-flex}sd-date-range-picker .sd-date-range-picker--disabled .date-icon{cursor:not-allowed !important;color:#888888 !important}sd-date-range-picker .sd-date-range-picker--disabled .sd-input__native{color:#888888 !important}sd-date-range-picker .sd-field .sd-field__control{min-width:210px}sd-date-range-picker .sd-field .sd-input__native{margin-left:17px !important}.sd-date-range-picker__menu{width:609px;box-sizing:border-box;border-radius:8px;padding:24px 19px;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.2);background:white}.sd-date-range-picker__menu .sd-date-range-picker__header{margin-bottom:16px;display:flex;flex-flow:row nowrap;align-items:center;justify-content:center}.sd-date-range-picker__menu .sd-date-range-picker__header .header-label{margin:0 12px;width:40px;text-align:center;font-size:14px;line-height:24px}.sd-date-range-picker__menu .sd-date-range-picker__body{display:flex;flex-flow:row nowrap;align-items:stretch;gap:19px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container{width:266px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-header{width:100%;height:24px;line-height:24px;font-size:14px;text-align:center;position:relative;padding:0 5px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-header button{position:absolute;top:50%;transform:translateY(-50%)}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-header button.header-button-prev{left:5px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-header button.header-button-next{right:5px;left:auto}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-days{padding:0 5px;margin-top:8px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr));column-gap:10px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-days .day{width:28px;height:20px;font-size:12px;line-height:20px;text-align:center;color:#888888}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-body{margin-top:12px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr))}.sd-date-range-picker__menu .sd-date-range-picker__body .separator{width:1px;background-color:#d8d8d8}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-text-fill-color:#000;-webkit-box-shadow:0 0 0px 1000px #fff inset;box-shadow:0 0 0px 1000px #fff inset;transition:background-color 5000s ease-in-out 0s}input:autofill,input:autofill:hover,input:autofill:focus,input:autofill:active{-webkit-text-fill-color:#000;-webkit-box-shadow:0 0 0px 1000px #fff inset;box-shadow:0 0 0px 1000px #fff inset;transition:background-color 5000s ease-in-out 0s}sd-input{display:inline-flex}sd-input .sd-input__content{width:100%;height:100%;display:flex;flex-flow:row nowrap;align-items:center;color:#333333;font-size:12px;line-height:20px;padding:0 8px}sd-input .sd-input__content .sd-input__native{width:100%;height:100%;border:none;outline:none;background:transparent}sd-input .sd-input__content .sd-input__native[disabled]{cursor:not-allowed;color:#888888}sd-input .sd-input__content .sd-input__native::placeholder{color:#aaaaaa}`;
-
-const SdInput = /*@__PURE__*/ proxyCustomElement(class SdInput extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.input = createEvent(this, "sdUpdate");
-        this.focus = createEvent(this, "sdFocus");
-        this.blur = createEvent(this, "sdBlur");
-    }
-    get host() { return this; }
-    value = null;
-    //  @Prop() name?: string;
-    type = 'text';
-    insideLabel = false;
-    placeholder = '입력해 주세요.';
-    disabled = false;
-    clearable = false;
-    width;
-    barcode = false;
-    rules = [];
-    autoFocus = false;
-    status;
-    inputClass = '';
-    readonly = false;
-    error = false;
-    focused = false;
-    hovered = false;
-    // props - label
-    label = '';
-    useLabelRequired = false;
-    labelTooltip = '';
-    labelTooltipProps = null;
-    //  props - custom styles
-    inputStyle = {};
-    internalValue = null;
-    nativeEl = undefined;
-    formField;
-    name = nanoid();
-    input;
-    focus;
-    blur;
-    valueChanged(newValue) {
-        this.internalValue = newValue;
-    }
-    internalValueChanged(newValue) {
-        if (newValue !== this.value) {
-            this.value = newValue;
-            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() {
-        if (this.value) {
-            this.internalValue = this.value;
-        }
-    }
-    componentDidLoad() {
-        if (this.autoFocus) {
-            this.nativeEl?.focus();
-        }
-    }
-    handleInput = (event) => {
-        const target = event.target;
-        this.internalValue = target.value;
-    };
-    handleFocus = async (type, event) => {
-        this.focused = type === 'focus';
-        if (type === 'blur') {
-            // Auto-validate on blur if rules exist
-            if (this.rules && this.rules.length > 0) {
-                await this.formField?.sdValidate();
-            }
-            this.blur?.emit(event);
-        }
-        else {
-            this.focus?.emit(event);
-        }
-    };
-    render() {
-        return (h("sd-field", { key: '87f02ba890fd952f89eb86d200318038137ba1a4', name: this.name, label: this.label, insideLabel: this.insideLabel, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, useLabelRequired: this.useLabelRequired, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, h("label", { key: '0bb5824067b33c178b1f60ececdccfe0a3d5f294', class: "sd-input__content", style: { width: '100%' } }, h("slot", { key: '6f67712b4ca708ba511c57379a6b5118732f146a', name: "prefix" }), h("input", { key: 'b337a1161dedb41ed29a690fa963c0ac60dd0c79', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), h("slot", { key: 'bf45d9fd71551dc6a3bb96cdc44512796beee923', name: "suffix" }), this.clearable && this.internalValue && (h("sd-icon", { key: 'aed0a5d9115ba8b7601dc62423349bee1a9978c7', name: "close", color: "grey_65", size: "16", class: "sd-input__clear-icon", onClick: async () => {
-                this.internalValue = '';
-                await this.formField?.sdValidate();
-            } })))));
-    }
-    static get watchers() { return {
-        "value": ["valueChanged"],
-        "internalValue": ["internalValueChanged"]
-    }; }
-    static get style() { return sdInputCss(); }
-}, [772, "sd-input", {
-        "value": [1032],
-        "type": [1],
-        "insideLabel": [4, "inside-label"],
-        "placeholder": [1],
-        "disabled": [4],
-        "clearable": [4],
-        "width": [8],
-        "barcode": [4],
-        "rules": [16],
-        "autoFocus": [4, "auto-focus"],
-        "status": [1],
-        "inputClass": [1, "input-class"],
-        "readonly": [4],
-        "error": [1028],
-        "focused": [1028],
-        "hovered": [1028],
-        "label": [1],
-        "useLabelRequired": [4, "use-label-required"],
-        "labelTooltip": [1, "label-tooltip"],
-        "labelTooltipProps": [16],
-        "inputStyle": [16],
-        "internalValue": [32],
-        "sdGetNativeElement": [64],
-        "sdValidate": [64],
-        "sdReset": [64],
-        "sdResetValidate": [64],
-        "sdFocus": [64]
-    }, undefined, {
-        "value": ["valueChanged"],
-        "internalValue": ["internalValueChanged"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["sd-input", "sd-button", "sd-field", "sd-floating-portal", "sd-icon", "sd-tooltip"];
-    components.forEach(tagName => { switch (tagName) {
-        case "sd-input":
-            if (!customElements.get(transformTag(tagName))) {
-                customElements.define(transformTag(tagName), SdInput);
-            }
-            break;
-        case "sd-button":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$5();
-            }
-            break;
-        case "sd-field":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$4();
-            }
-            break;
-        case "sd-floating-portal":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$3();
-            }
-            break;
-        case "sd-icon":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$2();
-            }
-            break;
-        case "sd-tooltip":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { SdInput as S, defineCustomElement as d, nanoid as n };
-//# sourceMappingURL=p-DQE5-tOR.js.map
-
-//# sourceMappingURL=p-DQE5-tOR.js.map