@sellmate/design-system 0.0.52 → 0.0.54

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

@@ -1 +0,0 @@
-{"file":"p-C171iavd.js","mappings":";;AAAA,MAAM,OAAO,GAAG,0BAA0B;;MCM7B,IAAI,iBAAAA,kBAAA,CAAA,MAAA,IAAA,SAAAC,CAAA,CAAA;;;;;;;IAChB,MAAM,GAAA;QACL,QACC,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,KAAK,EAAA,EACf,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACP;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-table/sd-tr/sd-tr.scss?tag=sd-tr","src/components/sd-table/sd-tr/sd-tr.tsx"],"sourcesContent":["sd-tr {\r\n display: table-row;\r\n}\r\n","import { Component, Host, h } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'sd-tr',\r\n styleUrl: 'sd-tr.scss',\r\n})\r\nexport class SdTr {\r\n render() {\r\n  return (\r\n   <Host role=\"row\">\r\n    <slot></slot>\r\n   </Host>\r\n  );\r\n }\r\n}\r\n"],"version":3}

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

@@ -1 +0,0 @@
-{"file":"p-C6tAa8Q4.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-input/sd-input.scss?tag=sd-input","src/components/sd-input/sd-input.tsx"],"sourcesContent":["@import 'variables';\r\n@import '../sd-icon/sd-icon.scss';\r\n\r\n.sd-input {\r\n display: flex;\r\n width: var(--input-width, 100%);\r\n align-items: center;\r\n height: 28px;\r\n padding: 4px 8px;\r\n border: 1px solid $grey_55;\r\n border-radius: 4px;\r\n color: $grey_90;\r\n font-size: 12px;\r\n line-height: 20px;\r\n background: white;\r\n\r\n &--hovered,\r\n &--focused {\r\n  border-color: $brilliantblue_75;\r\n  box-shadow: 0 0 4px 0 #0071ff66;\r\n }\r\n\r\n &.sd-input--error {\r\n  border-color: $red_70;\r\n }\r\n\r\n &.sd-input--pass {\r\n  border-color: $green_65;\r\n }\r\n\r\n &.sd-input--barcode:not(.sd-input--disabled) {\r\n  background-color: $olive_15;\r\n }\r\n\r\n &.sd-input--disabled {\r\n  background-color: $grey_20 !important;\r\n  border-color: $grey_45 !important;\r\n  cursor: not-allowed !important;\r\n  box-shadow: none !important;\r\n  .sd-input__native_element {\r\n   color: $grey_65 !important;\r\n  }\r\n }\r\n\r\n .sd-input__native_element {\r\n  display: block;\r\n  width: 100%;\r\n  height: 20px;\r\n  line-height: 20px;\r\n  border: none;\r\n  outline: none;\r\n  background: transparent;\r\n  font-size: inherit;\r\n  color: $grey_90;\r\n  margin-left: 4px;\r\n  margin-right: 4px;\r\n  padding-block: 0;\r\n  padding-inline: 0;\r\n\r\n  &::placeholder {\r\n   font-size: 12px;\r\n   height: 20px;\r\n   line-height: 20px;\r\n   color: $grey_55;\r\n  }\r\n }\r\n\r\n .sd-input__clear-icon {\r\n  cursor: pointer;\r\n  margin-left: 8px;\r\n }\r\n}\r\n","import {\r\n Component,\r\n Element,\r\n Host,\r\n Prop,\r\n State,\r\n Watch,\r\n Event,\r\n EventEmitter,\r\n h,\r\n Method,\r\n} from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'sd-input',\r\n styleUrl: 'sd-input.scss',\r\n})\r\nexport class SdInput {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop({ mutable: true }) value?: string | number | null = null;\r\n @Prop() label?: string;\r\n @Prop() placeholder: string = '입력해 주세요.';\r\n @Prop() disabled: boolean = false;\r\n @Prop() clearable: boolean = false;\r\n @Prop() width?: number | string;\r\n @Prop() barcode?: boolean = false;\r\n @Prop() rules?: Array<(value: string | number | null) => boolean | string>;\r\n @Prop() autoFocus: boolean = false;\r\n @Prop() status?: 'default' | 'pass' | 'error';\r\n @Prop() inputClass: string = '';\r\n @Prop() readonly: boolean = false;\r\n\r\n //  props - custom styles\r\n @Prop() inputStyle: { [key: string]: string } = {};\r\n\r\n @State() private internalValue: string | number | null = null;\r\n @State() private error: boolean = false;\r\n @State() private focused: boolean = false;\r\n @State() private hovered: boolean = false;\r\n\r\n private nativeEl: HTMLInputElement | undefined = undefined;\r\n\r\n @Event() sdClick?: EventEmitter<string | number | null>;\r\n @Event() sdInput?: EventEmitter<string | number | null>;\r\n @Event() sdChange?: EventEmitter<string | number | null>;\r\n @Event() sdFocus?: EventEmitter<Event>;\r\n @Event() sdBlur?: EventEmitter<Event>;\r\n\r\n @Watch('value')\r\n valueChanged(newValue: string | number | null) {\r\n  this.internalValue = newValue;\r\n }\r\n\r\n @Watch('internalValue')\r\n internalValueChanged(newValue: string | number | null) {\r\n  if (newValue !== this.value) {\r\n   this.value = newValue;\r\n   this.sdInput?.emit(this.value);\r\n  }\r\n\r\n  if (!this.rules || this.rules.length === 0) return;\r\n  this.error = false;\r\n  for (const rule of this.rules) {\r\n   const result = rule(newValue);\r\n   if (result !== true) {\r\n    this.error = true;\r\n    break;\r\n   }\r\n  }\r\n }\r\n\r\n @Method()\r\n async getNativeElement(): Promise<HTMLInputElement | null> {\r\n  return this.nativeEl || null;\r\n }\r\n\r\n componentWillLoad() {\r\n  if (this.value) {\r\n   this.internalValue = this.value;\r\n  }\r\n }\r\n\r\n private handleInput = (event: Event) => {\r\n  const target = event.target as HTMLInputElement;\r\n  this.internalValue = target.value;\r\n  this.sdInput?.emit(this.internalValue);\r\n };\r\n\r\n private handleChange = (event: Event) => {\r\n  const target = event.target as HTMLInputElement;\r\n  this.internalValue = target.value;\r\n  this.sdChange?.emit(this.internalValue);\r\n };\r\n\r\n private handleFocus = (type: 'focus' | 'blur', event: Event) => {\r\n  this.focused = type === 'focus';\r\n\r\n  if (type === 'blur') this.sdBlur?.emit(event);\r\n  else this.sdFocus?.emit(event);\r\n };\r\n\r\n getInputStatus() {\r\n  // input 상태 우선순위: hovered > focused > status(상태 주입) > error(rules 검사)\r\n  if (this.disabled) return 'sd-input--disabled';\r\n  if (this.hovered) return 'sd-input--hovered';\r\n  if (this.focused) return 'sd-input--focused';\r\n  if (this.status) return `sd-input--${this.status}`;\r\n  if (this.error) return 'sd-input--error';\r\n  return '';\r\n }\r\n\r\n render() {\r\n  const inputWidth = this.width\r\n   ? {\r\n      '--input-width': typeof this.width === 'number' ? `${this.width}px` : this.width,\r\n     }\r\n   : {};\r\n\r\n  return (\r\n   <Host style={inputWidth}>\r\n    {this.label && <div class=\"sd-input__label\">{this.label}</div>}\r\n    <label\r\n     class={{\r\n      'sd-input': true,\r\n      [this.getInputStatus()]: true,\r\n      'sd-input--barcode': !!this.barcode,\r\n     }}\r\n     onMouseEnter={() => (this.hovered = true)}\r\n     onMouseLeave={() => (this.hovered = false)}\r\n     style={this.inputStyle}\r\n    >\r\n     <slot name=\"prefix\"></slot>\r\n     <input\r\n      ref={el => (this.nativeEl = el)}\r\n      class={`sd-input__native_element ${this.inputClass}`}\r\n      type=\"text\"\r\n      value={this.internalValue || ''}\r\n      placeholder={this.placeholder}\r\n      disabled={this.disabled}\r\n      readonly={this.readonly}\r\n      autofocus={this.autoFocus}\r\n      onInput={this.handleInput}\r\n      onChange={this.handleChange}\r\n      onFocus={event => this.handleFocus('focus', event)}\r\n      onBlur={event => this.handleFocus('blur', event)}\r\n     />\r\n     <slot name=\"suffix\"></slot>\r\n     {this.clearable && this.internalValue && (\r\n      <sd-icon\r\n       name=\"close\"\r\n       color=\"#888\"\r\n       class=\"sd-input__clear-icon\"\r\n       onClick={() => {\r\n        this.internalValue = '';\r\n        this.sdChange?.emit(this.internalValue);\r\n        this.sdInput?.emit(this.internalValue);\r\n       }}\r\n      />\r\n     )}\r\n    </label>\r\n   </Host>\r\n  );\r\n }\r\n}\r\n"],"version":3}

package/dist/components/p-C9fSCxHc.js

@@ -1,109 +0,0 @@
-import { p as proxyCustomElement, H, d as createEvent, h } from './p-TFWJruz2.js';
-import { d as defineCustomElement$2 } from './p-CkKxyn_K.js';
-import { d as defineCustomElement$1 } from './p-BsyfatBe.js';
-
-const sdSelectOptionGroupCss = "sd-select-option-group{display:block;height:fit-content}sd-select-option-group .sd-select__option-group{display:flex;padding:4px 12px;padding-left:12px;font-size:12px;line-height:20px;cursor:pointer}sd-select-option-group .sd-select__option-group.sd-select__option-group--group:not(.sd-select__option-group--use-checkbox),sd-select-option-group .sd-select__option-group.sd-select__option-group--subgroup:not(.sd-select__option-group--use-checkbox){cursor:default !important}sd-select-option-group .sd-select__option-group.sd-select__option-group--group{background-color:#f5faff !important;color:#333333 !important;font-weight:700}sd-select-option-group .sd-select__option-group.sd-select__option-group--subgroup{padding-left:20px;background-color:#f9f9f9 !important;color:#333333 !important;font-weight:500}sd-select-option-group .sd-select__option-group.sd-select__option-group--item{padding-left:28px}sd-select-option-group .sd-select__option-group sd-checkbox__bg{border-color:#888888}sd-select-option-group .sd-select__option-group__label-wrapper{display:flex;width:100%;column-gap:8px;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}sd-select-option-group .sd-select__option-group__label-wrapper sd-checkbox{flex-shrink:0}sd-select-option-group .sd-select__option-group__label-wrapper .sd-select__option-group-label{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}sd-select-option-group .sd-select__option-group__label-wrapper .sd-select__option-group__count-indicator{width:fit-content;flex-shrink:0;font-size:12px;font-weight:500;color:#888888}sd-select-option-group .sd-select__option-group--focused{background-color:#e6f1ff}sd-select-option-group .sd-select__option-group--selected.sd-select__option-group--item:not(:hover):not(.sd-select__option-group--use-checkbox),sd-select-option-group .sd-select__option-group--focused.sd-select__option-group--item:not(:hover):not(.sd-select__option-group--use-checkbox){color:#0075ff;font-weight:700}sd-select-option-group .sd-select__option-group--disabled{color:#aaaaaa;cursor:not-allowed}sd-select-option-group .sd-select__option-group:hover:not(.sd-select__option-group--disabled){background-color:#0075ff;color:white}sd-select-option-group .sd-select__option-group:hover.sd-select__option-group--selected:not(.sd-select__option-group--group):not(.sd-select__option-group--subgroup) sd-checkbox .sd-checkbox__bg{border-color:white !important}";
-
-const SdSelectOptionGroup = /*@__PURE__*/ proxyCustomElement(class SdSelectOptionGroup extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.optionClick = createEvent(this, "optionClick");
-    }
-    get el() { return this; }
-    option;
-    index;
-    isSelected = false;
-    isFocused = false;
-    optionStyle;
-    disabled = false;
-    useCheckbox = false;
-    useIndicator = true;
-    countInfo = {
-        selectedCount: 0,
-        totalCount: 0,
-    };
-    isHovered = false;
-    async isDisabled() {
-        return !!this.option.disabled || this.option.type === 'group' || this.option.type === 'subgroup';
-    }
-    optionClick;
-    handleClick = (option, isSelected, event) => {
-        event.stopPropagation();
-        if (option.type === 'group' || option.type === 'subgroup') {
-            this.optionClick.emit({
-                option: this.option,
-                isSelected,
-                index: this.index,
-                event,
-            });
-            return;
-        }
-        if (!this.option.disabled && !this.disabled) {
-            this.optionClick.emit({
-                option: this.option,
-                isSelected,
-                index: this.index,
-                event,
-            });
-        }
-    };
-    render() {
-        return (h("div", { key: '2d1e55e35c77246a2df6856b2e7053cc21aabfc5', class: {
-                'sd-select__option-group': true,
-                'sd-select__option-group--selected': !!this.isSelected,
-                'sd-select__option-group--disabled': !!this.option.disabled,
-                'sd-select__option-group--focused': this.isFocused,
-                'sd-select__option-group--use-checkbox': this.useCheckbox,
-                'sd-select__option-group--group': this.option.type === 'group',
-                'sd-select__option-group--subgroup': this.option.type === 'subgroup',
-                'sd-select__option-group--item': this.option.type === 'item',
-            }, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, h("div", { key: '33ce9985f9c94502d103d81b3678abdb732dfadb', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (h("sd-checkbox", { key: '262ec7ac68b981b5a69c21a5785c2c4ff5db7966', checked: this.isSelected, disabled: this.option.disabled, onClick: e => {
-                e.preventDefault();
-                this.handleClick(this.option, this.isSelected, e);
-            } })), h("span", { key: 'f9c89b082413da5914e166d53e1fd9bc269395ce', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (h("span", { key: 'eaec735454f0b3c102397352d7863662fa933b24', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
-    }
-    static get style() { return sdSelectOptionGroupCss; }
-}, [768, "sd-select-option-group", {
-        "option": [16],
-        "index": [2],
-        "isSelected": [4, "is-selected"],
-        "isFocused": [4, "is-focused"],
-        "optionStyle": [16],
-        "disabled": [4],
-        "useCheckbox": [4, "use-checkbox"],
-        "useIndicator": [4, "use-indicator"],
-        "countInfo": [16],
-        "isHovered": [32],
-        "isDisabled": [64]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["sd-select-option-group", "sd-checkbox", "sd-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "sd-select-option-group":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SdSelectOptionGroup);
-            }
-            break;
-        case "sd-checkbox":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-        case "sd-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { SdSelectOptionGroup as S, defineCustomElement as d };
-//# sourceMappingURL=p-C9fSCxHc.js.map
-
-//# sourceMappingURL=p-C9fSCxHc.js.map

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

@@ -1 +0,0 @@
-{"file":"p-C9fSCxHc.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.scss?tag=sd-select-option-group","src/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.tsx"],"sourcesContent":["@import 'variables';\r\n\r\nsd-select-option-group {\r\n display: block;\r\n height: fit-content;\r\n .sd-select__option-group {\r\n  display: flex;\r\n  padding: 4px 12px;\r\n  padding-left: 12px;\r\n  font-size: 12px;\r\n  line-height: 20px;\r\n  cursor: pointer;\r\n\r\n  &.sd-select__option-group--group,\r\n  &.sd-select__option-group--subgroup {\r\n   &:not(.sd-select__option-group--use-checkbox) {\r\n    cursor: default !important;\r\n   }\r\n  }\r\n\r\n  &.sd-select__option-group--group {\r\n   background-color: $brilliantblue_05 !important;\r\n   color: $grey_90 !important;\r\n   font-weight: 700;\r\n  }\r\n\r\n  &.sd-select__option-group--subgroup {\r\n   padding-left: 20px;\r\n   background-color: $grey_05 !important;\r\n   color: $grey_90 !important;\r\n   font-weight: 500;\r\n  }\r\n\r\n  &.sd-select__option-group--item {\r\n   padding-left: 28px;\r\n  }\r\n\r\n  sd-checkbox {\r\n   &__bg {\r\n    border-color: $grey_65;\r\n   }\r\n  }\r\n\r\n  &__label-wrapper {\r\n   display: flex;\r\n   width: 100%;\r\n   column-gap: 8px;\r\n   align-items: center;\r\n   overflow: hidden;\r\n   white-space: nowrap;\r\n   text-overflow: ellipsis;\r\n\r\n   sd-checkbox {\r\n    flex-shrink: 0;\r\n   }\r\n\r\n   .sd-select__option-group-label {\r\n    flex: 0 1 auto;\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n    white-space: nowrap;\r\n   }\r\n\r\n   .sd-select__option-group__count-indicator {\r\n    width: fit-content;\r\n    flex-shrink: 0;\r\n    font-size: 12px;\r\n    font-weight: 500;\r\n    color: $grey_65;\r\n   }\r\n  }\r\n\r\n  &--focused {\r\n   background-color: $brilliantblue_20;\r\n  }\r\n\r\n  &--selected,\r\n  &--focused {\r\n   &.sd-select__option-group--item:not(:hover):not(.sd-select__option-group--use-checkbox) {\r\n    color: $brilliantblue_75;\r\n    font-weight: 700;\r\n   }\r\n  }\r\n\r\n  &--disabled {\r\n   color: $grey_55;\r\n   cursor: not-allowed;\r\n  }\r\n\r\n  &:hover {\r\n   &:not(.sd-select__option-group--disabled) {\r\n    background-color: $brilliantblue_75;\r\n    color: white;\r\n   }\r\n\r\n   &.sd-select__option-group--selected {\r\n    &:not(.sd-select__option-group--group):not(.sd-select__option-group--subgroup) {\r\n     sd-checkbox {\r\n      .sd-checkbox__bg {\r\n       border-color: white !important;\r\n      }\r\n     }\r\n    }\r\n   }\r\n  }\r\n }\r\n}\r\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State } from '@stencil/core';\r\nimport { SelectOptionGroup } from '../../sd-select/sd-select';\r\n\r\n@Component({\r\n tag: 'sd-select-option-group',\r\n styleUrl: 'sd-select-option-group.scss',\r\n})\r\nexport class SdSelectOptionGroup {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop() option!: SelectOptionGroup;\r\n @Prop() index!: number;\r\n @Prop() isSelected: boolean | null = false;\r\n @Prop() isFocused: boolean = false;\r\n @Prop() optionStyle?: { [key: string]: string };\r\n @Prop() disabled: boolean = false;\r\n @Prop() useCheckbox: boolean = false;\r\n @Prop() useIndicator?: boolean = true;\r\n @Prop() countInfo?: { selectedCount: number; totalCount: number } = {\r\n  selectedCount: 0,\r\n  totalCount: 0,\r\n };\r\n\r\n @State() isHovered: boolean = false;\r\n\r\n @Method()\r\n async isDisabled(): Promise<boolean> {\r\n  return !!this.option.disabled || this.option.type === 'group' || this.option.type === 'subgroup';\r\n }\r\n\r\n @Event() optionClick!: EventEmitter<{\r\n  option: SelectOptionGroup;\r\n  isSelected: boolean | null;\r\n  index: number;\r\n  event: MouseEvent;\r\n }>;\r\n\r\n private handleClick = (\r\n  option: SelectOptionGroup,\r\n  isSelected: boolean | null,\r\n  event: MouseEvent,\r\n ) => {\r\n  event.stopPropagation();\r\n\r\n  if (option.type === 'group' || option.type === 'subgroup') {\r\n   this.optionClick.emit({\r\n    option: this.option,\r\n    isSelected,\r\n    index: this.index,\r\n    event,\r\n   });\r\n   return;\r\n  }\r\n\r\n  if (!this.option.disabled && !this.disabled) {\r\n   this.optionClick.emit({\r\n    option: this.option,\r\n    isSelected,\r\n    index: this.index,\r\n    event,\r\n   });\r\n  }\r\n };\r\n\r\n render() {\r\n  return (\r\n   <div\r\n    class={{\r\n     'sd-select__option-group': true,\r\n     'sd-select__option-group--selected': !!this.isSelected,\r\n     'sd-select__option-group--disabled': !!this.option.disabled,\r\n     'sd-select__option-group--focused': this.isFocused,\r\n     'sd-select__option-group--use-checkbox': this.useCheckbox,\r\n     'sd-select__option-group--group': this.option.type === 'group',\r\n     'sd-select__option-group--subgroup': this.option.type === 'subgroup',\r\n     'sd-select__option-group--item': this.option.type === 'item',\r\n    }}\r\n    onMouseEnter={() => (this.isHovered = true)}\r\n    onMouseLeave={() => (this.isHovered = false)}\r\n    style={this.optionStyle}\r\n    data-index={this.index}\r\n    onClick={event => this.handleClick(this.option, this.isSelected, event)}\r\n   >\r\n    <div class=\"sd-select__option-group__label-wrapper\">\r\n     {this.useCheckbox && (\r\n      <sd-checkbox\r\n       checked={this.isSelected}\r\n       disabled={this.option.disabled}\r\n       onClick={e => {\r\n        e.preventDefault();\r\n        this.handleClick(this.option, this.isSelected, e);\r\n       }}\r\n      ></sd-checkbox>\r\n     )}\r\n     <span class=\"sd-select__option-group-label\">{this.option.label}</span>\r\n     {this.useIndicator && this.option.type !== 'item' && (\r\n      <span class=\"sd-select__option-group__count-indicator\">{`(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`}</span>\r\n     )}\r\n    </div>\r\n   </div>\r\n  );\r\n }\r\n}\r\n"],"version":3}

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

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

package/dist/components/p-D8f0ASS6.js

@@ -1,34 +0,0 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-TFWJruz2.js';
-
-const sdThCss = "sd-th{display:table-cell;padding:12px;font-weight:bold;text-align:left;border-bottom:2px solid #ddd;background-color:#f1f1f1}";
-
-const SdTh = /*@__PURE__*/ proxyCustomElement(class SdTh extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-    }
-    render() {
-        return (h(Host, { key: 'a9adef2bdfd7dd0a52a55fffb40db6511db5747e', role: "columnheader" }, h("slot", { key: 'd4af30df5d6a4a9140a9d10e0f3948de088f8c18' })));
-    }
-    static get style() { return sdThCss; }
-}, [260, "sd-th"]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["sd-th"];
-    components.forEach(tagName => { switch (tagName) {
-        case "sd-th":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SdTh);
-            }
-            break;
-    } });
-}
-
-export { SdTh as S, defineCustomElement as d };
-//# sourceMappingURL=p-D8f0ASS6.js.map
-
-//# sourceMappingURL=p-D8f0ASS6.js.map

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

@@ -1 +0,0 @@
-{"file":"p-D8f0ASS6.js","mappings":";;AAAA,MAAM,OAAO,GAAG,+HAA+H;;MCMlI,IAAI,iBAAAA,kBAAA,CAAA,MAAA,IAAA,SAAAC,CAAA,CAAA;;;;;;;IAChB,MAAM,GAAA;QACL,QACC,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,cAAc,EAAA,EACxB,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACP;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-table/sd-th/sd-th.scss?tag=sd-th","src/components/sd-table/sd-th/sd-th.tsx"],"sourcesContent":["sd-th {\r\n display: table-cell;\r\n padding: 12px;\r\n font-weight: bold;\r\n text-align: left;\r\n border-bottom: 2px solid #ddd;\r\n background-color: #f1f1f1;\r\n}\r\n","import { Component, Host, h } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'sd-th',\r\n styleUrl: 'sd-th.scss',\r\n})\r\nexport class SdTh {\r\n render() {\r\n  return (\r\n   <Host role=\"columnheader\">\r\n    <slot></slot>\r\n   </Host>\r\n  );\r\n }\r\n}\r\n"],"version":3}

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

@@ -1 +0,0 @@
-{"file":"p-DY6t0qQj.js","mappings":";;AAAA,MAAM,YAAY,GAAG,w4EAAw4E;;MCSh5E,SAAS,iBAAAA,kBAAA,CAAA,MAAA,SAAA,SAAAC,CAAA,CAAA;;;;;;;;;IACb,IAAI,GAA2B,IAAI;IACnC,QAAQ,GAAY,KAAK;IACzB,QAAQ,GAAY,KAAK;IACzB,WAAW,GAAY,KAAK;IAC5B,SAAS,GAAY,KAAK;IAC1B,OAAO,GAAY,KAAK;IACxB,OAAO,GAAY,KAAK;IACxB,IAAI,GAAS,EAAE;AAEd,IAAA,OAAO;AACP,IAAA,WAAW;IAEZ,eAAe,GAAA;QACtB,IAAI,IAAI,CAAC,QAAQ;YAAE;AACnB,QAAA,IAAI,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ;YAAE;QAEnC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;;IAGtB,eAAe,GAAA;AACtB,QAAA,IAAI,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ;YAAE;QAEnC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;;IAGlC,MAAM,GAAA;QACL,QACC,CAAC,CAAA,IAAI,EACJ,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAA,eAAA,EACE,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,EAC/C,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,EAAE,GAAG,CAAC,EAChC,KAAK,EAAE;AACN,gBAAA,aAAa,EAAE,IAAI;AACnB,gBAAA,cAAc,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,KAAK,EAAE;gBACpE,uBAAuB,EAAE,IAAI,CAAC,QAAQ;gBACtC,uBAAuB,EAAE,IAAI,CAAC,QAAQ;gBACtC,oBAAoB,EAAE,IAAI,CAAC,OAAO;gBAClC,yBAAyB,EAAE,IAAI,CAAC,WAAW;gBAC3C,uBAAuB,EAAE,IAAI,CAAC,SAAS;gBACvC,uBAAuB,EAAE,IAAI,CAAC,OAAO;AACrC,gBAAA,yBAAyB,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;AAChD,gBAAA,uBAAuB,EAAE,IAAI,CAAC,IAAI,KAAK,KAAK;aAC5C,EACD,OAAO,EAAE,MAAM,IAAI,CAAC,eAAe,EAAE,EACrC,WAAW,EAAE,MAAM,IAAI,CAAC,eAAe,EAAE,EAAA,EAEzC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,sBAAsB,EAAA,EAChC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,oBAAoB,EAAE,EAAA,IAAI,CAAC,IAAI,CAAO,CAC5C,CACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-date-box/sd-date-box.scss?tag=sd-date-box&encapsulation=scoped","src/components/sd-date-box/sd-date-box.tsx"],"sourcesContent":["@import 'variables';\r\n\r\n:host(.sd-date-box) {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 38px;\r\n height: 36px;\r\n font-size: 14px;\r\n position: relative;\r\n box-sizing: border-box;\r\n text-align: center;\r\n transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);\r\n border-radius: 14px;\r\n\r\n .sd-date-box__content {\r\n  width: 28px;\r\n  height: 28px;\r\n  border-radius: 14px;\r\n  position: relative;\r\n  .sd-date-box__label {\r\n   position: relative;\r\n   z-index: 2;\r\n   user-select: none;\r\n   line-height: 28px;\r\n  }\r\n }\r\n\r\n &.sd-date-box--disabled {\r\n  color: $grey_45;\r\n  cursor: default !important;\r\n  pointer-events: none;\r\n }\r\n\r\n &:not(.sd-date-box--disabled) {\r\n  cursor: pointer;\r\n }\r\n\r\n &.sd-hoverable {\r\n  &:hover {\r\n   .sd-date-box__content {\r\n    background: $brilliantblue_25;\r\n   }\r\n  }\r\n }\r\n\r\n &.sd-date-box--in-range {\r\n  &:not(.sd-date-box--disabled) {\r\n   .sd-date-box__content {\r\n    &::before {\r\n     content: '';\r\n     position: absolute;\r\n     top: 0;\r\n     left: -5px;\r\n     width: calc(100% + 10px);\r\n     height: 100%;\r\n     background: $brilliantblue_25;\r\n    }\r\n   }\r\n  }\r\n\r\n  &.sd-date-box--type-start {\r\n   .sd-date-box__content {\r\n    &::before {\r\n     left: auto !important;\r\n     width: 19px !important;\r\n     right: -5px;\r\n    }\r\n   }\r\n  }\r\n\r\n  &.sd-date-box--type-end {\r\n   .sd-date-box__content {\r\n    &::before {\r\n     width: 19px !important;\r\n    }\r\n   }\r\n  }\r\n }\r\n\r\n &.sd-date-box--selected,\r\n &.sd-date-box--type-start,\r\n &.sd-date-box--type-end {\r\n  .sd-date-box__content {\r\n   &::after {\r\n    content: '';\r\n    position: absolute;\r\n    inset: 0;\r\n    background: $brilliantblue_75;\r\n    border-radius: 14px;\r\n    z-index: 1;\r\n   }\r\n\r\n   .sd-date-box__label {\r\n    color: white;\r\n    font-weight: 700;\r\n   }\r\n  }\r\n }\r\n\r\n &.sd-date-box--today:not(.sd-date-box--selected) {\r\n  .sd-date-box__content {\r\n   &::after {\r\n    content: '';\r\n    position: absolute;\r\n    top: 0;\r\n    left: 50%;\r\n    transform: translateX(-50%);\r\n    width: 28px;\r\n    height: 28px;\r\n    border: 1px solid $grey_30 !important;\r\n    border-radius: 14px;\r\n   }\r\n  }\r\n }\r\n}\r\n","import { Component, Event, EventEmitter, Host, Prop, h } from '@stencil/core';\r\n\r\nexport type Type = 'start' | 'end' | '';\r\n\r\n@Component({\r\n tag: 'sd-date-box',\r\n styleUrl: 'sd-date-box.scss',\r\n scoped: true,\r\n})\r\nexport class SdDateBox {\r\n @Prop() date: number | string | null = null;\r\n @Prop() disabled: boolean = false;\r\n @Prop() selected: boolean = false;\r\n @Prop() isStartDate: boolean = false;\r\n @Prop() isEndDate: boolean = false;\r\n @Prop() isToday: boolean = false;\r\n @Prop() inRange: boolean = false;\r\n @Prop() type: Type = '';\r\n\r\n @Event() sdClick?: EventEmitter<number | string | null>;\r\n @Event() sdMouseOver?: EventEmitter<number | string | null>;\r\n\r\n private handleClickDate() {\r\n  if (this.disabled) return;\r\n  if (typeof this.date === 'string') return;\r\n\r\n  this.sdClick?.emit(this.date);\r\n }\r\n\r\n private handleHoverDate() {\r\n  if (typeof this.date === 'string') return;\r\n\r\n  this.sdMouseOver?.emit(this.date);\r\n }\r\n\r\n render() {\r\n  return (\r\n   <Host\r\n    role=\"button\"\r\n    aria-disabled={this.disabled ? 'true' : 'false'}\r\n    tabindex={this.disabled ? -1 : 0}\r\n    class={{\r\n     'sd-date-box': true,\r\n     'sd-hoverable': !this.disabled || !this.selected || this.type === '',\r\n     'sd-date-box--disabled': this.disabled,\r\n     'sd-date-box--selected': this.selected,\r\n     'sd-date-box--today': this.isToday,\r\n     'sd-date-box--start-date': this.isStartDate,\r\n     'sd-date-box--end-date': this.isEndDate,\r\n     'sd-date-box--in-range': this.inRange,\r\n     'sd-date-box--type-start': this.type === 'start',\r\n     'sd-date-box--type-end': this.type === 'end',\r\n    }}\r\n    onClick={() => this.handleClickDate()}\r\n    onMouseOver={() => this.handleHoverDate()}\r\n   >\r\n    <div class=\"sd-date-box__content\">\r\n     <div class=\"sd-date-box__label\">{this.date}</div>\r\n    </div>\r\n   </Host>\r\n  );\r\n }\r\n}\r\n"],"version":3}

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

@@ -1 +0,0 @@
-{"file":"p-DiehM5Y0.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-button/sd-button.scss?tag=sd-button","src/components/sd-button/sd-button.tsx"],"sourcesContent":["@import 'variables';\r\n\r\nsd-button {\r\n display: inline-block;\r\n width: fit-content;\r\n height: fit-content;\r\n}\r\n\r\n.sd-button {\r\n text-decoration: none;\r\n cursor: pointer;\r\n border-radius: 4px;\r\n transition: all 0.2s ease-in-out;\r\n position: relative;\r\n overflow: hidden;\r\n white-space: nowrap;\r\n -webkit-user-select: none;\r\n user-select: none;\r\n box-sizing: border-box;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n &--xs {\r\n  padding: 0 8px;\r\n  font-size: 12px;\r\n  font-weight: 500;\r\n  line-height: 20px;\r\n  min-height: 24px;\r\n }\r\n &--sm {\r\n  padding: 0 12px;\r\n  font-size: 12px;\r\n  font-weight: 500;\r\n  line-height: 20px;\r\n  min-height: 28px;\r\n }\r\n &--md {\r\n  padding: 0 20px;\r\n  font-size: 16px;\r\n  font-weight: 500;\r\n  line-height: 26px;\r\n  min-height: 34px;\r\n }\r\n &--lg {\r\n  padding: 0 28px;\r\n  font-size: 18px;\r\n  font-weight: 500;\r\n  line-height: 30px;\r\n  min-height: 62px;\r\n }\r\n &--primary {\r\n  background-color: var(--button-color);\r\n  color: white;\r\n  transition: filter 0.2s ease;\r\n\r\n  &::before {\r\n   content: '';\r\n   position: absolute;\r\n   inset: 0;\r\n   background: #000000;\r\n   opacity: 0;\r\n   transition: opacity 0.2s ease;\r\n   z-index: 0;\r\n  }\r\n\r\n  &:hover:not(.sd-button--disabled):not(.sd-button--loading)::before {\r\n   opacity: 0.25;\r\n  }\r\n }\r\n\r\n &--outline {\r\n  background: white;\r\n  border: 1px solid var(--button-color);\r\n  color: var(--button-color);\r\n\r\n  &::before {\r\n   content: '';\r\n   position: absolute;\r\n   inset: 0;\r\n   background: var(--button-color);\r\n   opacity: 0;\r\n   transition: opacity 0.2s ease;\r\n   z-index: 0;\r\n  }\r\n\r\n  &:hover:not(.sd-button--disabled):not(.sd-button--loading)::before {\r\n   opacity: 0.15;\r\n  }\r\n\r\n  .sd-button__content {\r\n   position: relative;\r\n   z-index: 1;\r\n  }\r\n }\r\n &--ghost {\r\n  background-color: transparent;\r\n  color: var(--button-color);\r\n  border-color: transparent;\r\n\r\n  &::before {\r\n   content: '';\r\n   position: absolute;\r\n   inset: 0;\r\n   background: var(--button-color);\r\n   opacity: 0;\r\n   transition: opacity 0.2s ease;\r\n   z-index: 0;\r\n  }\r\n\r\n  &:hover:not(.sd-button--disabled):not(.sd-button--loading)::before {\r\n   opacity: 0.15;\r\n  }\r\n\r\n  .sd-button__content {\r\n   position: relative;\r\n   z-index: 1;\r\n  }\r\n }\r\n &--disabled {\r\n  border: 1px solid $grey_45;\r\n  background: $grey_30;\r\n  color: $grey_65;\r\n  cursor: not-allowed !important;\r\n }\r\n &--icon-only {\r\n  padding: 0;\r\n  width: fit-content;\r\n  height: fit-content;\r\n  aspect-ratio: 1 / 1;\r\n }\r\n &--no-hover {\r\n  &:hover::before {\r\n   opacity: 0 !important;\r\n  }\r\n }\r\n\r\n .sd-button__content {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 4px;\r\n\r\n  z-index: 1;\r\n  font-weight: 500;\r\n }\r\n}\r\n\r\n// /* Focus styles */\r\n// .sd-button:focus-visible {\r\n//  outline: 2px solid $primary;\r\n//  outline-offset: 2px;\r\n// }\r\n\r\n// /* High contrast mode support */\r\n// @media (prefers-contrast: high) {\r\n//  .sd-button {\r\n//   border-width: 2px;\r\n//  }\r\n// }\r\n","import { Component, Prop, h, Element, Event, EventEmitter, Host } from '@stencil/core';\r\nimport { resolveColor } from '../../utils/color';\r\n\r\nexport type ButtonVariant = 'primary' | 'outline' | 'ghost';\r\nexport type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';\r\n\r\nconst ICON_SIZES: { [key in ButtonSize]: number } = {\r\n xs: 12,\r\n sm: 16,\r\n md: 20,\r\n lg: 24,\r\n};\r\n\r\n@Component({\r\n tag: 'sd-button',\r\n styleUrl: 'sd-button.scss',\r\n})\r\nexport class SdButton {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop() variant?: ButtonVariant = 'primary';\r\n @Prop() size: ButtonSize = 'sm';\r\n @Prop() color: string = '#025497';\r\n @Prop() label: string = '';\r\n @Prop() disabled: boolean = false;\r\n @Prop() type: 'button' | 'submit' | 'reset' = 'button';\r\n @Prop() icon?: IconName;\r\n @Prop() iconColor?: string;\r\n @Prop() iconSize?: number;\r\n @Prop() iconRight?: IconName;\r\n @Prop() noHover: boolean = false;\r\n @Prop() class: string = '';\r\n @Event() sdClick!: EventEmitter<MouseEvent>;\r\n\r\n private handleClick = (event: MouseEvent) => {\r\n  if (this.disabled) {\r\n   event.preventDefault();\r\n   event.stopPropagation();\r\n   return;\r\n  }\r\n  this.sdClick.emit(event);\r\n };\r\n\r\n private getButtonClasses(): string {\r\n  const classes = ['sd-button'];\r\n\r\n  classes.push(`sd-button--${this.variant}`);\r\n  classes.push(`sd-button--${this.size}`);\r\n  classes.push(`sd-button--color-${this.color}`);\r\n\r\n  if (this.disabled) {\r\n   classes.push('sd-button--disabled');\r\n  }\r\n\r\n  if (!this.label && (this.icon || this.iconRight)) {\r\n   classes.push('sd-button--icon-only');\r\n  }\r\n\r\n  if (this.noHover) {\r\n   classes.push('sd-button--no-hover');\r\n  }\r\n\r\n  return classes.join(' ');\r\n }\r\n\r\n render() {\r\n  const buttonClasses = this.getButtonClasses();\r\n  // 유틸로 색상 키 -> HEX 매핑 (없으면 원본 그대로)\r\n  const resolvedColor = resolveColor(this.color);\r\n\r\n  return (\r\n   <Host style={{ '--button-color': resolvedColor }}>\r\n    <button\r\n     class={`${buttonClasses} ${this.class}`}\r\n     type={this.type}\r\n     disabled={this.disabled}\r\n     onClick={this.handleClick}\r\n    >\r\n     <div class=\"sd-button__content\">\r\n      {this.icon && (\r\n       <sd-icon\r\n        class=\"sd-button__icon sd-button__icon--left\"\r\n        name={this.icon}\r\n        size={this.iconSize ? this.iconSize : ICON_SIZES[this.size!]}\r\n        color={\r\n         this.iconColor ? this.iconColor : this.variant === 'primary' ? '#fff' : resolvedColor\r\n        }\r\n       ></sd-icon>\r\n      )}\r\n\r\n      {this.label && <div class=\"sd-button__label\">{this.label}</div>}\r\n\r\n      {this.iconRight && (\r\n       <sd-icon\r\n        class=\"sd-button__icon sd-button__icon--right\"\r\n        name={this.iconRight}\r\n        size={ICON_SIZES[this.size!]}\r\n        color={this.variant === 'primary' ? '#fff' : resolvedColor}\r\n       ></sd-icon>\r\n      )}\r\n     </div>\r\n    </button>\r\n   </Host>\r\n  );\r\n }\r\n}\r\n"],"version":3}

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

@@ -1 +0,0 @@
-{"file":"p-DyGUXuvD.js","mappings":";;;;AAAA,MAAM,iBAAiB,GAAG,g0BAAg0B;;MCiB70B,cAAc,iBAAAA,kBAAA,CAAA,MAAA,cAAA,SAAAC,CAAA,CAAA;;;;;;;;;AAGlB,IAAA,MAAM;AACN,IAAA,KAAK;IACL,UAAU,GAAY,KAAK;IAC3B,SAAS,GAAY,KAAK;AAC1B,IAAA,WAAW;IACX,QAAQ,GAAY,KAAK;IACzB,WAAW,GAAY,KAAK;IAE3B,SAAS,GAAY,KAAK;AAGnC,IAAA,MAAM,UAAU,GAAA;AACf,QAAA,OAAO,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ;;AAGrB,IAAA,WAAW;AAMZ,IAAA,WAAW,GAAG,CAAC,KAAiB,KAAI;QAC3C,KAAK,CAAC,eAAe,EAAE;AAEvB,QAAA,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AAC5C,YAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;gBACrB,MAAM,EAAE,IAAI,CAAC,MAAM;gBACnB,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,KAAK;AACL,aAAA,CAAC;;AAEJ,KAAC;IAED,MAAM,GAAA;QACL,QACC,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACJ,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACC,KAAK,EAAE;AACN,gBAAA,mBAAmB,EAAE,IAAI;gBACzB,6BAA6B,EAAE,IAAI,CAAC,UAAU;AAC9C,gBAAA,6BAA6B,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ;gBACrD,4BAA4B,EAAE,IAAI,CAAC,SAAS;gBAC5C,iCAAiC,EAAE,IAAI,CAAC,WAAW;AACnD,aAAA,EACD,YAAY,EAAE,OAAO,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,EAC3C,YAAY,EAAE,OAAO,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,EAC5C,KAAK,EAAE,IAAI,CAAC,WAAW,EACX,YAAA,EAAA,IAAI,CAAC,KAAK,EACtB,OAAO,EAAE,IAAI,CAAC,WAAW,EAExB,EAAA,IAAI,CAAC,WAAW,IAChB,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,qCAAqC,EAAA,EAC/C,CAAA,CAAA,aAAA,EAAA,EACC,OAAO,EAAE,IAAI,CAAC,UAAU,EACxB,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC,QAAQ;;;;;;;;YAQ9B,OAAO,EAAE,CAAC,IAAG;gBACZ,CAAC,CAAC,cAAc,EAAE;AAClB,gBAAA,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC;AACpB,aAAC,EACa,CAAA,EACf,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,yBAAyB,EAAE,EAAA,IAAI,CAAC,MAAM,CAAC,KAAK,CAAQ,CAC3D,KAEN,IAAI,CAAC,MAAM,CAAC,KAAK,CACjB,CACI,CACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-select/sd-select-option/sd-select-option.scss?tag=sd-select-option","src/components/sd-select/sd-select-option/sd-select-option.tsx"],"sourcesContent":["@import 'variables';\r\n\r\nsd-select-option {\r\n display: block;\r\n height: fit-content;\r\n line-height: 0;\r\n .sd-select__option {\r\n  display: flex;\r\n  padding: 4px 12px;\r\n  font-size: 12px;\r\n  line-height: 20px;\r\n  cursor: pointer;\r\n\r\n  &__checkbox-wrapper {\r\n   display: flex;\r\n   width: 100%;\r\n   column-gap: 8px;\r\n   align-items: center;\r\n   overflow: hidden;\r\n   white-space: nowrap;\r\n   text-overflow: ellipsis;\r\n  }\r\n\r\n  &--focused {\r\n   background-color: $brilliantblue_20;\r\n  }\r\n\r\n  &--selected,\r\n  &--focused {\r\n   &:not(:hover):not(.sd-select__option--use-checkbox) {\r\n    color: $brilliantblue_75;\r\n    font-weight: 700;\r\n   }\r\n  }\r\n\r\n  &--disabled {\r\n   color: $grey_55;\r\n   cursor: not-allowed;\r\n  }\r\n\r\n  &:hover {\r\n   &:not(.sd-select__option--disabled) {\r\n    background-color: $brilliantblue_75;\r\n    color: white;\r\n   }\r\n  }\r\n }\r\n}\r\n","import {\r\n Component,\r\n Element,\r\n Event,\r\n EventEmitter,\r\n h,\r\n Host,\r\n Method,\r\n Prop,\r\n State,\r\n} from '@stencil/core';\r\nimport type { SelectOption } from '../../../types/select';\r\n\r\n@Component({\r\n tag: 'sd-select-option',\r\n styleUrl: 'sd-select-option.scss',\r\n})\r\nexport class SdSelectOption {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop() option!: SelectOption;\r\n @Prop() index!: number;\r\n @Prop() isSelected: boolean = false;\r\n @Prop() isFocused: boolean = false;\r\n @Prop() optionStyle?: { [key: string]: string };\r\n @Prop() disabled: boolean = false;\r\n @Prop() useCheckbox: boolean = false;\r\n\r\n @State() isHovered: boolean = false;\r\n\r\n @Method()\r\n async isDisabled(): Promise<boolean> {\r\n  return !!this.option.disabled;\r\n }\r\n\r\n @Event() optionClick!: EventEmitter<{\r\n  option: SelectOption;\r\n  index: number;\r\n  event: MouseEvent;\r\n }>;\r\n\r\n private handleClick = (event: MouseEvent) => {\r\n  event.stopPropagation();\r\n\r\n  if (!this.option.disabled && !this.disabled) {\r\n   this.optionClick.emit({\r\n    option: this.option,\r\n    index: this.index,\r\n    event,\r\n   });\r\n  }\r\n };\r\n\r\n render() {\r\n  return (\r\n   <Host>\r\n    <div\r\n     class={{\r\n      'sd-select__option': true,\r\n      'sd-select__option--selected': this.isSelected,\r\n      'sd-select__option--disabled': !!this.option.disabled,\r\n      'sd-select__option--focused': this.isFocused,\r\n      'sd-select__option--use-checkbox': this.useCheckbox,\r\n     }}\r\n     onMouseEnter={() => (this.isHovered = true)}\r\n     onMouseLeave={() => (this.isHovered = false)}\r\n     style={this.optionStyle}\r\n     data-index={this.index}\r\n     onClick={this.handleClick}\r\n    >\r\n     {this.useCheckbox ? (\r\n      <div class=\"sd-select__option__checkbox-wrapper\">\r\n       <sd-checkbox\r\n        checked={this.isSelected}\r\n        disabled={this.option.disabled}\r\n        //   checkboxStyle={\r\n        //    !this.isSelected\r\n        //     ? { borderColor: '#888' }\r\n        //     : this.isHovered\r\n        //       ? { borderColor: 'white' }\r\n        //       : { borderColor: '#0075ff' }\r\n        //   }\r\n        onClick={e => {\r\n         e.preventDefault();\r\n         this.handleClick(e);\r\n        }}\r\n       ></sd-checkbox>\r\n       <span class=\"sd-select__option-label\">{this.option.label}</span>\r\n      </div>\r\n     ) : (\r\n      this.option.label\r\n     )}\r\n    </div>\r\n   </Host>\r\n  );\r\n }\r\n}\r\n"],"version":3}

package/dist/components/p-S7M--xNH.js.map

@@ -1 +0,0 @@
-{"file":"p-S7M--xNH.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 {\r\n [slot='content'] {\r\n  display: none;\r\n }\r\n\r\n .sd-tooltip {\r\n  position: relative;\r\n  cursor: pointer;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n }\r\n}\r\n\r\n.sd-tooltip-menu {\r\n width: fit-content;\r\n padding: 8px 16px;\r\n border-radius: 4px;\r\n font-size: 12px;\r\n position: relative;\r\n box-sizing: border-box;\r\n display: flex;\r\n align-items: start;\r\n justify-content: center;\r\n gap: 12px;\r\n\r\n &--with-close {\r\n  padding-right: 12px !important;\r\n }\r\n\r\n &__arrow {\r\n  position: absolute;\r\n  display: flex;\r\n  width: 9.6px;\r\n  height: 7.2px;\r\n  svg {\r\n   width: 100%;\r\n   height: 100%;\r\n  }\r\n  &--top {\r\n   bottom: -7.2px;\r\n   left: 50%;\r\n   transform: translateX(-50%);\r\n  }\r\n  &--bottom {\r\n   top: -7.2px;\r\n   left: 50%;\r\n   transform: translateX(-50%) rotate(180deg);\r\n  }\r\n  &--left {\r\n   right: -7.2px;\r\n   top: 50%;\r\n   transform: translateY(-50%) rotate(-90deg);\r\n  }\r\n  &--right {\r\n   left: -7.2px;\r\n   top: 50%;\r\n   transform: translateY(-50%) rotate(90deg);\r\n  }\r\n }\r\n\r\n &__content {\r\n  line-height: 20px;\r\n  font-weight: 500;\r\n\r\n  p {\r\n   margin: 0;\r\n  }\r\n }\r\n\r\n &__close-button {\r\n  padding-top: 4px;\r\n  display: flex;\r\n  button {\r\n   padding: 0;\r\n   background: none;\r\n   border: none;\r\n   cursor: pointer;\r\n  }\r\n }\r\n}\r\n","import { Component, Element, Fragment, Prop, State, h } from '@stencil/core';\r\nimport { HTMLStencilElement } from '@stencil/core/internal';\r\nimport { ButtonSize, ButtonVariant } from '../sd-button/sd-button';\r\nimport { TooltipArrow } from '../assets/tooltipArrow';\r\n\r\n@Component({\r\n tag: 'sd-tooltip',\r\n styleUrl: 'sd-tooltip.scss',\r\n})\r\nexport class SdTooltip {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop() trigger: 'hover' | 'click' = 'hover';\r\n @Prop() placement: 'top' | 'bottom' | 'left' | 'right' = 'top';\r\n @Prop() color: string = '#01BB4B';\r\n @Prop() type: 'default' | 'caution' | 'notice' | 'accent' = 'default';\r\n\r\n @Prop() icon: IconName = 'helpOutline';\r\n @Prop() iconSize: number = 12;\r\n\r\n @Prop() label: string = '';\r\n @Prop() buttonSize: ButtonSize = 'sm';\r\n @Prop() buttonVariant: ButtonVariant = 'primary';\r\n\r\n @Prop() noHover: boolean = true;\r\n\r\n @Prop() useClose: boolean = false;\r\n\r\n @State() showTooltip: boolean = false;\r\n @State() slotContent: HTMLElement | null = null;\r\n\r\n private static readonly COLOR_OF_TYPE = {\r\n  default: { background: 'oceanblue_85', text: 'white' },\r\n  caution: { background: 'red_20', text: 'red_70' },\r\n  notice: { background: 'orange_10', text: 'orange_65' },\r\n  accent: { background: 'brilliantblue_20', text: 'brilliantblue_75' },\r\n };\r\n\r\n private buttonEl?: HTMLStencilElement;\r\n\r\n private handleClose = () => {\r\n  this.showTooltip = false;\r\n };\r\n\r\n // 현재 tooltip popover가 조건부 렌더링이여서 초기 slot이 렌더링 되지 않은 시점에\r\n // 데이터 매핑에 실패 (light dom에 저장된 slot내용을 shadow dom을 찾지못해 매핑 실패)\r\n // 따라서 slot내용을 받은 후에 복제하여 state에 저장\r\n componentWillLoad() {\r\n  const contentEl = this.el.querySelector('[slot=\"content\"]');\r\n  if (contentEl) {\r\n   this.slotContent = contentEl.cloneNode(true) as HTMLElement;\r\n  }\r\n }\r\n\r\n render() {\r\n  const handleTrigger =\r\n   this.trigger === 'hover'\r\n    ? {\r\n       onMouseEnter: () => (this.showTooltip = true),\r\n       onMouseLeave: () => (this.showTooltip = false),\r\n      }\r\n    : {\r\n       onClick: () => (this.showTooltip = !this.showTooltip),\r\n      };\r\n\r\n  return (\r\n   <Fragment>\r\n    {this.label ? (\r\n     <sd-button\r\n      ref={el => (this.buttonEl = el)}\r\n      label={this.label}\r\n      icon={this.icon}\r\n      size={this.buttonSize}\r\n      color={this.color}\r\n      variant={this.buttonVariant}\r\n      class=\"sd-tooltip\"\r\n      {...handleTrigger}\r\n     ></sd-button>\r\n    ) : (\r\n     <sd-icon\r\n      ref={el => (this.buttonEl = el)}\r\n      name={this.icon}\r\n      size={this.iconSize}\r\n      color={this.color}\r\n      class=\"sd-tooltip\"\r\n      {...handleTrigger}\r\n     ></sd-icon>\r\n    )}\r\n\r\n    {this.showTooltip && (\r\n     <sd-tooltip-portal\r\n      parentRef={this.buttonEl}\r\n      onSdClose={() => this.handleClose()}\r\n      placement={this.placement}\r\n     >\r\n      <div\r\n       class={{\r\n        'sd-tooltip-menu': true,\r\n        [`sd-tooltip-menu--${this.type}`]: true,\r\n        [`sd-tooltip-menu--${this.placement}`]: true,\r\n        'sd-tooltip-menu--with-close': this.useClose,\r\n        [`bg-${SdTooltip.COLOR_OF_TYPE[this.type].background}`]: true,\r\n        [`text-${SdTooltip.COLOR_OF_TYPE[this.type].text}`]: true,\r\n       }}\r\n      >\r\n       <i class={`sd-tooltip-menu__arrow sd-tooltip-menu__arrow--${this.placement}`}>\r\n        <TooltipArrow\r\n         class={{\r\n          [`text-${SdTooltip.COLOR_OF_TYPE[this.type].background}`]: true,\r\n         }}\r\n        ></TooltipArrow>\r\n       </i>\r\n\r\n       <div\r\n        class=\"sd-tooltip-menu__content\"\r\n        ref={el => {\r\n         if (el && this.slotContent && !el.hasChildNodes()) {\r\n          el.appendChild(this.slotContent.cloneNode(true));\r\n         }\r\n        }}\r\n       >\r\n        {!this.slotContent && <span>{this.el.textContent}</span>}\r\n       </div>\r\n\r\n       {this.useClose && (\r\n        <div class=\"sd-tooltip-menu__close-button\">\r\n         <button\r\n          type=\"button\"\r\n          aria-label=\"Close tooltip\"\r\n          title=\"Close tooltip\"\r\n          onClick={() => this.handleClose()}\r\n         >\r\n          <sd-icon name=\"close\" size=\"12\" color=\"#AAAAAA\"></sd-icon>\r\n         </button>\r\n        </div>\r\n       )}\r\n      </div>\r\n     </sd-tooltip-portal>\r\n    )}\r\n   </Fragment>\r\n  );\r\n }\r\n}\r\n"],"version":3}