npm - @sellmate/design-system - Versions diffs - 1.0.0 → 1.0.2 - Mend

@sellmate/design-system 1.0.0 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (252) hide show

package/dist/components/{p-CdGD6AqM.js.map → p-B-HVIIWo.js.map} RENAMED Viewed

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

package/dist/components/{p-D54IEoI6.js → p-B9qGa5dx.js} RENAMED Viewed

@@ -1,9 +1,9 @@
 import { p as proxyCustomElement, H, d as createEvent, h, t as transformTag } from './p-YLoygqPr.js';
-import { d as defineCustomElement$5 } from './p-CdGD6AqM.js';
-import { d as defineCustomElement$4 } from './p-CpRkV7pg.js';
-import { d as defineCustomElement$3 } from './p-CVMprLsE.js';
-import { d as defineCustomElement$2 } from './p-DnQF6htq.js';
-import { d as defineCustomElement$1 } from './p-7xekTQRB.js';
+import { d as defineCustomElement$5 } from './p-B-HVIIWo.js';
+import { d as defineCustomElement$4 } from './p-COJpIimp.js';
+import { d as defineCustomElement$3 } from './p-CmghyzXg.js';
+import { d as defineCustomElement$2 } from './p-Sw7TJWkF.js';
+import { d as defineCustomElement$1 } from './p-Dtljyq_t.js';
 var nonSecure;
 var hasRequiredNonSecure;
@@ -151,7 +151,7 @@ const SdInput = /*@__PURE__*/ proxyCustomElement(class SdInput extends H {
                 '--input-width': typeof this.width === 'number' ? `${this.width}px` : this.width,
             }
             : {};
-        return (h("sd-field", { key: '78d338ae57d61752e8cb691197c3882f32ccfc16', 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), style: inputWidth, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, h("label", { key: '180c948116cb0a644d2696a46a8040cd5f19010d', class: "sd-input__content", style: { width: '100%' } }, h("slot", { key: '4ead5aaaa62ac8c93d6207e04d5555e56f096a58', name: "prefix" }), h("input", { key: 'd5bce7f062c7550f6204f5df416122fe8e4a40f0', 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: '9ab6a7556416dd5dbfea6b83f90b337366935b49', name: "suffix" }), this.clearable && this.internalValue && (h("sd-icon", { key: '7a803590e461dc740feb8bb55fd69c6dc11f3b62', name: "close", color: "grey_65", size: "16", class: "sd-input__clear-icon", onClick: async () => {
+        return (h("sd-field", { key: '1ea8809ec8f05e9713b26022014400811f3c4da2', 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), style: inputWidth, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, h("label", { key: 'f0f266bf75953342785b8296e40f7ca86018a75d', class: "sd-input__content", style: { width: '100%' } }, h("slot", { key: '2fa7295a91e35292d794879432195e9cb76bce1a', name: "prefix" }), h("input", { key: '5529de166855c571c385fb479f6dbfec148a6771', 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: '5ae1f154e1ac870c8629ebf4b2007274d591018d', name: "suffix" }), this.clearable && this.internalValue && (h("sd-icon", { key: '57f515d933010326bd7f64ef74beb37df3fa7ba7', name: "close", color: "grey_65", size: "16", class: "sd-input__clear-icon", onClick: async () => {
                 this.internalValue = '';
                 await this.formField?.sdValidate();
             } })))));
@@ -233,6 +233,6 @@ function defineCustomElement() {
 }
 export { SdInput as S, defineCustomElement as d };
-//# sourceMappingURL=p-D54IEoI6.js.map
+//# sourceMappingURL=p-B9qGa5dx.js.map
-//# sourceMappingURL=p-D54IEoI6.js.map
+//# sourceMappingURL=p-B9qGa5dx.js.map

package/dist/components/{p-D54IEoI6.js.map → p-B9qGa5dx.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-D54IEoI6.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement","nanoid"],"sources":["../../node_modules/nanoid/non-secure/index.cjs","src/components/sd-input/sd-input.scss?tag=sd-input","src/components/sd-input/sd-input.tsx"],"sourcesContent":["// This alphabet uses `A-Za-z0-9_-` symbols.\n// The order of characters is optimized for better gzip and brotli compression.\n// References to the same file (works both for gzip and brotli):\n// `'use`, `andom`, and `rict'`\n// References to the brotli default dictionary:\n// `-26T`, `1983`, `40px`, `75px`, `bush`, `jack`, `mind`, `very`, and `wolf`\nlet urlAlphabet =\n 'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict'\n\nlet customAlphabet = (alphabet, defaultSize = 21) => {\n return (size = defaultSize) => {\n let id = ''\n // A compact alternative for `for (var i = 0; i < step; i++)`.\n let i = size \| 0\n while (i--) {\n // `\| 0` is more compact and faster than `Math.floor()`.\n id += alphabet[(Math.random() * alphabet.length) \| 0]\n }\n return id\n }\n}\n\nlet nanoid = (size = 21) => {\n let id = ''\n // A compact alternative for `for (var i = 0; i < step; i++)`.\n let i = size \| 0\n while (i--) {\n // `\| 0` is more compact and faster than `Math.floor()`.\n id += urlAlphabet[(Math.random() * 64) \| 0]\n }\n return id\n}\n\nmodule.exports = { nanoid, customAlphabet }\n","@import 'variables';\n@import '../sd-icon/sd-icon.scss';\n@import '../sd-date-picker/sd-date-picker.scss';\n@import '../sd-date-range-picker/sd-date-range-picker.scss';\n\ninput:-webkit-autofill,\ninput:-webkit-autofill:hover,\ninput:-webkit-autofill:focus,\ninput:-webkit-autofill:active {\n -webkit-text-fill-color: #000;\n -webkit-box-shadow: 0 0 0px 1000px #fff inset;\n box-shadow: 0 0 0px 1000px #fff inset;\n transition: background-color 5000s ease-in-out 0s;\n}\n\ninput:autofill,\ninput:autofill:hover,\ninput:autofill:focus,\ninput:autofill:active {\n -webkit-text-fill-color: #000;\n -webkit-box-shadow: 0 0 0px 1000px #fff inset;\n box-shadow: 0 0 0px 1000px #fff inset;\n transition: background-color 5000s ease-in-out 0s;\n}\n\nsd-input {\n display: inline-flex;\n\n .sd-input__content {\n width: 100%;\n height: 100%;\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n color: $grey_90;\n font-size: 12px;\n line-height: 20px;\n padding: 0 8px;\n .sd-input__native {\n width: 100%;\n height: 100%;\n border: none;\n outline: none;\n background: transparent;\n\n &[disabled] {\n cursor: not-allowed;\n color: $grey_65;\n }\n\n &::placeholder {\n color: $grey_55;\n }\n }\n }\n}\n","import {\n Component,\n Element,\n Prop,\n State,\n Watch,\n Event,\n EventEmitter,\n h,\n Method,\n} from '@stencil/core';\nimport { Rule } from '../../types/form';\nimport { SdTooltipProps } from '../sd-tooltip/sd-tooltip';\nimport { nanoid } from 'nanoid/non-secure';\n\n@Component({\n tag: 'sd-input',\n styleUrl: 'sd-input.scss',\n})\nexport class SdInput {\n @Element() host!: HTMLElement;\n\n @Prop({ mutable: true }) value?: string \| number \| null = null;\n // @Prop() name?: string;\n @Prop() type: 'text' \| 'password' \| 'email' = 'text';\n @Prop() insideLabel: boolean = false;\n @Prop() placeholder: string = '입력해 주세요.';\n @Prop() disabled: boolean = false;\n @Prop() clearable: boolean = false;\n @Prop() width?: number \| string;\n @Prop() barcode?: boolean = false;\n @Prop() rules?: Rule[] = [];\n @Prop() autoFocus: boolean = false;\n @Prop() status?: 'default' \| 'pass' \| 'error';\n @Prop() inputClass: string = '';\n @Prop() readonly: boolean = false;\n @Prop({ mutable: true }) error: boolean = false;\n @Prop({ mutable: true }) focused: boolean = false;\n @Prop({ mutable: true }) hovered: boolean = false;\n\n // props - label\n @Prop() label?: string = '';\n @Prop() useLabelRequired: boolean = false;\n @Prop() labelTooltip: string = '';\n @Prop() labelTooltipProps: SdTooltipProps \| null = null;\n\n // props - custom styles\n @Prop() inputStyle: { [key: string]: string } = {};\n\n @State() private internalValue: string \| number \| null = null;\n\n private nativeEl: HTMLInputElement \| undefined = undefined;\n private formField?: HTMLSdFieldElement;\n name = nanoid();\n\n @Event({ eventName: 'sdUpdate' }) input?: EventEmitter<string \| number \| null>;\n @Event({ eventName: 'sdFocus' }) focus?: EventEmitter<Event>;\n @Event({ eventName: 'sdBlur' }) blur?: EventEmitter<Event>;\n\n @Watch('value')\n valueChanged(newValue: string \| number \| null) {\n this.internalValue = newValue;\n }\n\n @Watch('internalValue')\n internalValueChanged(newValue: string \| number \| null) {\n if (newValue !== this.value) {\n this.value = newValue;\n this.input?.emit(this.value);\n }\n }\n\n @Method()\n async sdGetNativeElement(): Promise<HTMLInputElement \| null> {\n return this.nativeEl \|\| null;\n }\n\n @Method()\n async sdValidate() {\n this.formField?.sdValidate();\n }\n\n @Method()\n async sdReset() {\n this.formField?.sdReset();\n }\n\n @Method()\n async sdResetValidate() {\n this.formField?.sdResetValidation();\n }\n\n @Method()\n async sdFocus() {\n this.formField?.sdFocus();\n }\n\n componentWillLoad() {\n if (this.value) {\n this.internalValue = this.value;\n }\n }\n\n componentDidLoad() {\n if (this.autoFocus) {\n this.nativeEl?.focus();\n }\n }\n\n private handleInput = (event: Event) => {\n const target = event.target as HTMLInputElement;\n this.internalValue = target.value;\n };\n\n private handleFocus = async (type: 'focus' \| 'blur', event: Event) => {\n this.focused = type === 'focus';\n\n if (type === 'blur') {\n // Auto-validate on blur if rules exist\n if (this.rules && this.rules.length > 0) {\n await this.formField?.sdValidate();\n }\n this.blur?.emit(event);\n } else {\n this.focus?.emit(event);\n }\n };\n\n render() {\n const inputWidth = this.width\n ? {\n '--input-width': typeof this.width === 'number' ? `${this.width}px` : this.width,\n }\n : {};\n\n return (\n <sd-field\n name={this.name}\n label={this.label}\n insideLabel={this.insideLabel}\n rules={this.rules}\n error={this.error}\n disabled={this.disabled}\n focused={this.focused}\n hovered={this.hovered}\n status={this.status}\n useLabelRequired={this.useLabelRequired}\n labelTooltip={this.labelTooltip}\n labelTooltipProps={this.labelTooltipProps}\n ref={el => (this.formField = el)}\n style={inputWidth}\n onMouseEnter={() => (this.hovered = true)}\n onMouseLeave={() => (this.hovered = false)}\n >\n <label class=\"sd-input__content\" style={{ width: '100%' }}>\n <slot name=\"prefix\"></slot>\n <input\n name={this.name}\n ref={el => (this.nativeEl = el)}\n class={`sd-input__native ${this.inputClass}`}\n type={this.type}\n value={this.internalValue \|\| ''}\n placeholder={this.placeholder}\n disabled={this.disabled}\n readonly={this.readonly}\n autofocus={this.autoFocus}\n onInput={this.handleInput}\n onFocus={event => this.handleFocus('focus', event)}\n onBlur={event => this.handleFocus('blur', event)}\n style={this.inputStyle}\n />\n <slot name=\"suffix\"></slot>\n {this.clearable && this.internalValue && (\n <sd-icon\n name=\"close\"\n color=\"grey_65\"\n size=\"16\"\n class=\"sd-input__clear-icon\"\n onClick={async () => {\n this.internalValue = '';\n await this.formField?.sdValidate();\n }}\n />\n )}\n </label>\n </sd-field>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-B9qGa5dx.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement","nanoid"],"sources":["../../node_modules/nanoid/non-secure/index.cjs","src/components/sd-input/sd-input.scss?tag=sd-input","src/components/sd-input/sd-input.tsx"],"sourcesContent":["// This alphabet uses `A-Za-z0-9_-` symbols.\n// The order of characters is optimized for better gzip and brotli compression.\n// References to the same file (works both for gzip and brotli):\n// `'use`, `andom`, and `rict'`\n// References to the brotli default dictionary:\n// `-26T`, `1983`, `40px`, `75px`, `bush`, `jack`, `mind`, `very`, and `wolf`\nlet urlAlphabet =\n 'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict'\n\nlet customAlphabet = (alphabet, defaultSize = 21) => {\n return (size = defaultSize) => {\n let id = ''\n // A compact alternative for `for (var i = 0; i < step; i++)`.\n let i = size \| 0\n while (i--) {\n // `\| 0` is more compact and faster than `Math.floor()`.\n id += alphabet[(Math.random() * alphabet.length) \| 0]\n }\n return id\n }\n}\n\nlet nanoid = (size = 21) => {\n let id = ''\n // A compact alternative for `for (var i = 0; i < step; i++)`.\n let i = size \| 0\n while (i--) {\n // `\| 0` is more compact and faster than `Math.floor()`.\n id += urlAlphabet[(Math.random() * 64) \| 0]\n }\n return id\n}\n\nmodule.exports = { nanoid, customAlphabet }\n","@import 'variables';\n@import '../sd-icon/sd-icon.scss';\n@import '../sd-date-picker/sd-date-picker.scss';\n@import '../sd-date-range-picker/sd-date-range-picker.scss';\n\ninput:-webkit-autofill,\ninput:-webkit-autofill:hover,\ninput:-webkit-autofill:focus,\ninput:-webkit-autofill:active {\n -webkit-text-fill-color: #000;\n -webkit-box-shadow: 0 0 0px 1000px #fff inset;\n box-shadow: 0 0 0px 1000px #fff inset;\n transition: background-color 5000s ease-in-out 0s;\n}\n\ninput:autofill,\ninput:autofill:hover,\ninput:autofill:focus,\ninput:autofill:active {\n -webkit-text-fill-color: #000;\n -webkit-box-shadow: 0 0 0px 1000px #fff inset;\n box-shadow: 0 0 0px 1000px #fff inset;\n transition: background-color 5000s ease-in-out 0s;\n}\n\nsd-input {\n display: inline-flex;\n\n .sd-input__content {\n width: 100%;\n height: 100%;\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n color: $grey_90;\n font-size: 12px;\n line-height: 20px;\n padding: 0 8px;\n .sd-input__native {\n width: 100%;\n height: 100%;\n border: none;\n outline: none;\n background: transparent;\n\n &[disabled] {\n cursor: not-allowed;\n color: $grey_65;\n }\n\n &::placeholder {\n color: $grey_55;\n }\n }\n }\n}\n","import {\n Component,\n Element,\n Prop,\n State,\n Watch,\n Event,\n EventEmitter,\n h,\n Method,\n} from '@stencil/core';\nimport { Rule } from '../../types/form';\nimport { SdTooltipProps } from '../sd-tooltip/sd-tooltip';\nimport { nanoid } from 'nanoid/non-secure';\n\n@Component({\n tag: 'sd-input',\n styleUrl: 'sd-input.scss',\n})\nexport class SdInput {\n @Element() host!: HTMLElement;\n\n @Prop({ mutable: true }) value?: string \| number \| null = null;\n // @Prop() name?: string;\n @Prop() type: 'text' \| 'password' \| 'email' = 'text';\n @Prop() insideLabel: boolean = false;\n @Prop() placeholder: string = '입력해 주세요.';\n @Prop() disabled: boolean = false;\n @Prop() clearable: boolean = false;\n @Prop() width?: number \| string;\n @Prop() barcode?: boolean = false;\n @Prop() rules?: Rule[] = [];\n @Prop() autoFocus: boolean = false;\n @Prop() status?: 'default' \| 'pass' \| 'error';\n @Prop() inputClass: string = '';\n @Prop() readonly: boolean = false;\n @Prop({ mutable: true }) error: boolean = false;\n @Prop({ mutable: true }) focused: boolean = false;\n @Prop({ mutable: true }) hovered: boolean = false;\n\n // props - label\n @Prop() label?: string = '';\n @Prop() useLabelRequired: boolean = false;\n @Prop() labelTooltip: string = '';\n @Prop() labelTooltipProps: SdTooltipProps \| null = null;\n\n // props - custom styles\n @Prop() inputStyle: { [key: string]: string } = {};\n\n @State() private internalValue: string \| number \| null = null;\n\n private nativeEl: HTMLInputElement \| undefined = undefined;\n private formField?: HTMLSdFieldElement;\n name = nanoid();\n\n @Event({ eventName: 'sdUpdate' }) input?: EventEmitter<string \| number \| null>;\n @Event({ eventName: 'sdFocus' }) focus?: EventEmitter<Event>;\n @Event({ eventName: 'sdBlur' }) blur?: EventEmitter<Event>;\n\n @Watch('value')\n valueChanged(newValue: string \| number \| null) {\n this.internalValue = newValue;\n }\n\n @Watch('internalValue')\n internalValueChanged(newValue: string \| number \| null) {\n if (newValue !== this.value) {\n this.value = newValue;\n this.input?.emit(this.value);\n }\n }\n\n @Method()\n async sdGetNativeElement(): Promise<HTMLInputElement \| null> {\n return this.nativeEl \|\| null;\n }\n\n @Method()\n async sdValidate() {\n this.formField?.sdValidate();\n }\n\n @Method()\n async sdReset() {\n this.formField?.sdReset();\n }\n\n @Method()\n async sdResetValidate() {\n this.formField?.sdResetValidation();\n }\n\n @Method()\n async sdFocus() {\n this.formField?.sdFocus();\n }\n\n componentWillLoad() {\n if (this.value) {\n this.internalValue = this.value;\n }\n }\n\n componentDidLoad() {\n if (this.autoFocus) {\n this.nativeEl?.focus();\n }\n }\n\n private handleInput = (event: Event) => {\n const target = event.target as HTMLInputElement;\n this.internalValue = target.value;\n };\n\n private handleFocus = async (type: 'focus' \| 'blur', event: Event) => {\n this.focused = type === 'focus';\n\n if (type === 'blur') {\n // Auto-validate on blur if rules exist\n if (this.rules && this.rules.length > 0) {\n await this.formField?.sdValidate();\n }\n this.blur?.emit(event);\n } else {\n this.focus?.emit(event);\n }\n };\n\n render() {\n const inputWidth = this.width\n ? {\n '--input-width': typeof this.width === 'number' ? `${this.width}px` : this.width,\n }\n : {};\n\n return (\n <sd-field\n name={this.name}\n label={this.label}\n insideLabel={this.insideLabel}\n rules={this.rules}\n error={this.error}\n disabled={this.disabled}\n focused={this.focused}\n hovered={this.hovered}\n status={this.status}\n useLabelRequired={this.useLabelRequired}\n labelTooltip={this.labelTooltip}\n labelTooltipProps={this.labelTooltipProps}\n ref={el => (this.formField = el)}\n style={inputWidth}\n onMouseEnter={() => (this.hovered = true)}\n onMouseLeave={() => (this.hovered = false)}\n >\n <label class=\"sd-input__content\" style={{ width: '100%' }}>\n <slot name=\"prefix\"></slot>\n <input\n name={this.name}\n ref={el => (this.nativeEl = el)}\n class={`sd-input__native ${this.inputClass}`}\n type={this.type}\n value={this.internalValue \|\| ''}\n placeholder={this.placeholder}\n disabled={this.disabled}\n readonly={this.readonly}\n autofocus={this.autoFocus}\n onInput={this.handleInput}\n onFocus={event => this.handleFocus('focus', event)}\n onBlur={event => this.handleFocus('blur', event)}\n style={this.inputStyle}\n />\n <slot name=\"suffix\"></slot>\n {this.clearable && this.internalValue && (\n <sd-icon\n name=\"close\"\n color=\"grey_65\"\n size=\"16\"\n class=\"sd-input__clear-icon\"\n onClick={async () => {\n this.internalValue = '';\n await this.formField?.sdValidate();\n }}\n />\n )}\n </label>\n </sd-field>\n );\n }\n}\n"],"version":3}

package/dist/components/p-BBVGfsbU.js ADDED Viewed

@@ -0,0 +1,62 @@
+import { p as proxyCustomElement, H, d as createEvent, h, c as Host, t as transformTag } from './p-YLoygqPr.js';
+const sdRadioCss = () => `sd-radio{display:inline-flex}sd-radio.sd-radio{cursor:pointer}sd-radio.sd-radio label{display:flex;align-items:center;gap:8px;cursor:pointer}sd-radio.sd-radio label input{position:relative;appearance:none;margin:0;width:16px;height:16px;border:1px solid #888888;border-radius:50%;accent-color:#0075ff;background-color:white;cursor:pointer}sd-radio.sd-radio label input:checked{border-color:#0075ff;background-color:white}sd-radio.sd-radio label input:checked::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:10px;height:10px;border-radius:50%;background-color:#0075ff}sd-radio.sd-radio label input:disabled{border-color:#cccccc;background-color:#eeeeee}sd-radio.sd-radio label input:disabled:checked::before{background-color:#cccccc}sd-radio.sd-radio label input:not(:disabled):hover{border-color:#0075ff;background-color:#d9eaff}sd-radio.sd-radio--disabled{cursor:not-allowed !important}sd-radio.sd-radio--disabled label{cursor:not-allowed !important}sd-radio.sd-radio--disabled label input{cursor:not-allowed !important}`;
+const SdRadio = /*@__PURE__*/ proxyCustomElement(class SdRadio extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.update = createEvent(this, "sdUpdate");
+    }
+    value;
+    disabled = false;
+    val;
+    label;
+    update;
+    getRadioClasses() {
+        const classes = [
+            'sd-radio',
+            String(this.val) === String(this.value) ? 'sd-radio--selected' : 'sd-radio--unselected',
+        ];
+        if (this.disabled) {
+            classes.push('sd-radio--disabled');
+        }
+        return classes.join(' ');
+    }
+    handleRadioChange(detail) {
+        if (this.disabled)
+            return;
+        console.log('detail', detail);
+        this.value = this.val;
+        this.update.emit(this.value);
+    }
+    render() {
+        return (h(Host, { key: 'f288b8077193d0c1614b3c25fb9f3ebbedf0f9be', "aria-label": this.val || 'radio option', "aria-checked": String(this.val) === String(this.value) ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', class: this.getRadioClasses() }, h("label", { key: `radio-${this.val}` }, h("input", { key: '0f5e1cad59ec2a2c20247bec1341e58b11477699', type: "radio", name: this.val, value: String(this.val), checked: String(this.val) === String(this.value), disabled: this.disabled, onInput: ({ detail }) => this.handleRadioChange(detail) }), this.val && h("span", { key: '47fd723d1ec6c6124d01341f7edbe945061dc348', class: "sd-radio-group__label" }, this.label || this.val))));
+    }
+    static get style() { return sdRadioCss(); }
+}, [768, "sd-radio", {
+        "value": [1544],
+        "disabled": [4],
+        "val": [1],
+        "label": [1]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["sd-radio"];
+    components.forEach(tagName => { switch (tagName) {
+        case "sd-radio":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), SdRadio);
+            }
+            break;
+    } });
+}
+export { SdRadio as S, defineCustomElement as d };
+//# sourceMappingURL=p-BBVGfsbU.js.map
+//# sourceMappingURL=p-BBVGfsbU.js.map

package/dist/components/p-BBVGfsbU.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"p-BBVGfsbU.js","mappings":";;AAAA,MAAM,UAAU,GAAG,MAAM,CAAC,yiCAAyiC,CAAC;;MCQvjC,OAAO,iBAAAA,kBAAA,CAAA,MAAA,OAAA,SAAAC,CAAA,CAAA;;;;;;;;AACqB,IAAA,KAAK;IAErC,QAAQ,GAAY,KAAK;AAEzB,IAAA,GAAG;AAEH,IAAA,KAAK;AAEqB,IAAA,MAAM;IAEhC,eAAe,GAAA;AACtB,QAAA,MAAM,OAAO,GAAG;YACf,UAAU;AACV,YAAA,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,oBAAoB,GAAG,sBAAsB;SACvF;AAED,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AAClB,YAAA,OAAO,CAAC,IAAI,CAAC,oBAAoB,CAAC;;AAGnC,QAAA,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;;AAGjB,IAAA,iBAAiB,CAAC,MAAW,EAAA;QACpC,IAAI,IAAI,CAAC,QAAQ;YAAE;AAEnB,QAAA,OAAO,CAAC,GAAG,CAAC,QAAQ,EAAE,MAAM,CAAC;AAE7B,QAAA,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAI;QACtB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;;IAG7B,MAAM,GAAA;AACL,QAAA,QACC,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,YAAA,EACQ,IAAI,CAAC,GAAG,IAAI,cAAc,EACxB,cAAA,EAAA,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,MAAM,GAAG,OAAO,EACzD,eAAA,EAAA,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,EAC/C,KAAK,EAAE,IAAI,CAAC,eAAe,EAAE,EAAA,EAE7B,CAAA,CAAA,OAAA,EAAA,EAAO,GAAG,EAAE,CAAA,MAAA,EAAS,IAAI,CAAC,GAAG,EAAE,EAAA,EAC9B,CACC,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,CAAC,GAAG,EACd,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,EACvB,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAChD,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC,EACtD,CAAA,EACD,IAAI,CAAC,GAAG,IAAI,6DAAM,KAAK,EAAC,uBAAuB,EAAE,EAAA,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,GAAG,CAAQ,CACzE,CACF;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-radio/sd-radio.scss?tag=sd-radio","src/components/sd-radio/sd-radio.tsx"],"sourcesContent":["@import 'variables';\n\nsd-radio {\n display: inline-flex;\n\n &.sd-radio {\n cursor: pointer;\n\n label {\n display: flex;\n align-items: center;\n gap: 8px;\n cursor: pointer;\n\n input {\n position: relative;\n appearance: none;\n margin: 0;\n width: 16px;\n height: 16px;\n border: 1px solid $grey_65;\n border-radius: 50%;\n accent-color: $brilliantblue_75;\n background-color: white;\n cursor: pointer;\n\n &:checked {\n border-color: $brilliantblue_75;\n background-color: white;\n }\n\n &:checked::before {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 10px;\n height: 10px;\n border-radius: 50%;\n background-color: $brilliantblue_75;\n }\n\n &:disabled {\n border-color: $grey_45;\n background-color: $grey_20;\n }\n\n &:disabled:checked::before {\n background-color: $grey_45;\n }\n\n &:not(:disabled):hover {\n border-color: $brilliantblue_75;\n background-color: $brilliantblue_25;\n }\n }\n }\n }\n\n &.sd-radio--disabled {\n cursor: not-allowed !important;\n\n label {\n cursor: not-allowed !important;\n input {\n cursor: not-allowed !important;\n }\n }\n }\n}\n","import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\nexport type RadioValue = string | number | boolean;\n\n@Component({\n tag: 'sd-radio',\n styleUrl: 'sd-radio.scss',\n})\nexport class SdRadio {\n @Prop({ mutable: true, reflect: true }) value!: RadioValue;\n\n @Prop() disabled: boolean = false;\n\n @Prop() val!: string;\n\n @Prop() label?: string;\n\n @Event({ eventName: 'sdUpdate' }) update!: EventEmitter<RadioValue>;\n\n private getRadioClasses(): string {\n const classes = [\n 'sd-radio',\n String(this.val) === String(this.value) ? 'sd-radio--selected' : 'sd-radio--unselected',\n ];\n\n if (this.disabled) {\n classes.push('sd-radio--disabled');\n }\n\n return classes.join(' ');\n }\n\n private handleRadioChange(detail: any) {\n if (this.disabled) return;\n\n console.log('detail', detail);\n\n this.value = this.val!;\n this.update.emit(this.value);\n }\n\n render() {\n return (\n <Host\n aria-label={this.val || 'radio option'}\n aria-checked={String(this.val) === String(this.value) ? 'true' : 'false'}\n aria-disabled={this.disabled ? 'true' : 'false'}\n class={this.getRadioClasses()}\n >\n <label key={`radio-${this.val}`}>\n <input\n type=\"radio\"\n name={this.val}\n value={String(this.val)}\n checked={String(this.val) === String(this.value)}\n disabled={this.disabled}\n onInput={({ detail }) => this.handleRadioChange(detail)}\n />\n {this.val && <span class=\"sd-radio-group__label\">{this.label || this.val}</span>}\n </label>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/{p-JF61vPAh.js → p-BsBjOh8u.js} RENAMED Viewed

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, d as createEvent, h, c as Host, t as transformTag } from './p-YLoygqPr.js';
-import { d as defineCustomElement$2 } from './p-UZEmuyIR.js';
-import { d as defineCustomElement$1 } from './p-DnQF6htq.js';
+import { d as defineCustomElement$2 } from './p-ldcuoYNT.js';
+import { d as defineCustomElement$1 } from './p-Sw7TJWkF.js';
 const sdSelectOptionCss = () => `sd-select-option{display:block;height:fit-content;line-height:0}sd-select-option .sd-select__option{display:flex;padding:4px 12px;font-size:12px;line-height:20px;cursor:pointer}sd-select-option .sd-select__option__checkbox-wrapper{display:flex;width:100%;column-gap:8px;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}sd-select-option .sd-select__option--focused{background-color:#e6f1ff}sd-select-option .sd-select__option--selected:not(:hover):not(.sd-select__option--use-checkbox),sd-select-option .sd-select__option--focused:not(:hover):not(.sd-select__option--use-checkbox){color:#0075ff;font-weight:700}sd-select-option .sd-select__option--disabled{color:#aaaaaa;cursor:not-allowed}sd-select-option .sd-select__option:hover:not(.sd-select__option--disabled){background-color:#0075ff;color:white}`;
@@ -36,7 +36,7 @@ const SdSelectOption = /*@__PURE__*/ proxyCustomElement(class SdSelectOption ext
         }
     };
     render() {
-        return (h(Host, { key: '33542be792e3345ee693a6064f9398ecd1fceda1' }, h("div", { key: '408d402f5e4a845ebb896f78a557ac93ca414eaa', class: {
+        return (h(Host, { key: '8324a5b292d922c4ba1104fe245863321fd222d4' }, h("div", { key: 'ead9b6abf8193019d3f97dd5a1ea67ea9a735c01', class: {
                 'sd-select__option': true,
                 'sd-select__option--selected': this.isSelected,
                 'sd-select__option--disabled': !!this.option.disabled,
@@ -92,6 +92,6 @@ function defineCustomElement() {
 }
 export { SdSelectOption as S, defineCustomElement as d };
-//# sourceMappingURL=p-JF61vPAh.js.map
+//# sourceMappingURL=p-BsBjOh8u.js.map
-//# sourceMappingURL=p-JF61vPAh.js.map
+//# sourceMappingURL=p-BsBjOh8u.js.map

package/dist/components/{p-JF61vPAh.js.map → p-BsBjOh8u.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-~~JF61vPAh~~.js","mappings":";;;;AAAA,MAAM,iBAAiB,GAAG,MAAM,CAAC,8zBAA8zB,CAAC;;MCiBn1B,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,YAAY,GAAA;AACjB,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,KAAK,EAAE,IAAI,CAAC,UAAU,EACtB,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';\n\nsd-select-option {\n display: block;\n height: fit-content;\n line-height: 0;\n .sd-select__option {\n display: flex;\n padding: 4px 12px;\n font-size: 12px;\n line-height: 20px;\n cursor: pointer;\n\n &__checkbox-wrapper {\n display: flex;\n width: 100%;\n column-gap: 8px;\n align-items: center;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n &--focused {\n background-color: $brilliantblue_20;\n }\n\n &--selected,\n &--focused {\n &:not(:hover):not(.sd-select__option--use-checkbox) {\n color: $brilliantblue_75;\n font-weight: 700;\n }\n }\n\n &--disabled {\n color: $grey_55;\n cursor: not-allowed;\n }\n\n &:hover {\n &:not(.sd-select__option--disabled) {\n background-color: $brilliantblue_75;\n color: white;\n }\n }\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n State,\n} from '@stencil/core';\nimport type { SelectOption } from '../../../types/select';\n\n@Component({\n tag: 'sd-select-option',\n styleUrl: 'sd-select-option.scss',\n})\nexport class SdSelectOption {\n @Element() el!: HTMLElement;\n\n @Prop() option!: SelectOption;\n @Prop() index!: number;\n @Prop() isSelected: boolean = false;\n @Prop() isFocused: boolean = false;\n @Prop() optionStyle?: { [key: string]: string };\n @Prop() disabled: boolean = false;\n @Prop() useCheckbox: boolean = false;\n\n @State() isHovered: boolean = false;\n\n @Method()\n async sdIsDisabled(): Promise<boolean> {\n return !!this.option.disabled;\n }\n\n @Event() optionClick!: EventEmitter<{\n option: SelectOption;\n index: number;\n event: MouseEvent;\n }>;\n\n private handleClick = (event: MouseEvent) => {\n event.stopPropagation();\n\n if (!this.option.disabled && !this.disabled) {\n this.optionClick.emit({\n option: this.option,\n index: this.index,\n event,\n });\n }\n };\n\n render() {\n return (\n <Host>\n <div\n class={{\n 'sd-select__option': true,\n 'sd-select__option--selected': this.isSelected,\n 'sd-select__option--disabled': !!this.option.disabled,\n 'sd-select__option--focused': this.isFocused,\n 'sd-select__option--use-checkbox': this.useCheckbox,\n }}\n onMouseEnter={() => (this.isHovered = true)}\n onMouseLeave={() => (this.isHovered = false)}\n style={this.optionStyle}\n data-index={this.index}\n onClick={this.handleClick}\n >\n {this.useCheckbox ? (\n <div class=\"sd-select__option__checkbox-wrapper\">\n <sd-checkbox\n value={this.isSelected}\n disabled={this.option.disabled}\n // checkboxStyle={\n // !this.isSelected\n // ? { borderColor: '#888' }\n // : this.isHovered\n // ? { borderColor: 'white' }\n // : { borderColor: '#0075ff' }\n // }\n onClick={e => {\n e.preventDefault();\n this.handleClick(e);\n }}\n ></sd-checkbox>\n <span class=\"sd-select__option-label\">{this.option.label}</span>\n </div>\n ) : (\n this.option.label\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-BsBjOh8u.js","mappings":";;;;AAAA,MAAM,iBAAiB,GAAG,MAAM,CAAC,8zBAA8zB,CAAC;;MCiBn1B,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,YAAY,GAAA;AACjB,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,KAAK,EAAE,IAAI,CAAC,UAAU,EACtB,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';\n\nsd-select-option {\n display: block;\n height: fit-content;\n line-height: 0;\n .sd-select__option {\n display: flex;\n padding: 4px 12px;\n font-size: 12px;\n line-height: 20px;\n cursor: pointer;\n\n &__checkbox-wrapper {\n display: flex;\n width: 100%;\n column-gap: 8px;\n align-items: center;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n &--focused {\n background-color: $brilliantblue_20;\n }\n\n &--selected,\n &--focused {\n &:not(:hover):not(.sd-select__option--use-checkbox) {\n color: $brilliantblue_75;\n font-weight: 700;\n }\n }\n\n &--disabled {\n color: $grey_55;\n cursor: not-allowed;\n }\n\n &:hover {\n &:not(.sd-select__option--disabled) {\n background-color: $brilliantblue_75;\n color: white;\n }\n }\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n State,\n} from '@stencil/core';\nimport type { SelectOption } from '../../../types/select';\n\n@Component({\n tag: 'sd-select-option',\n styleUrl: 'sd-select-option.scss',\n})\nexport class SdSelectOption {\n @Element() el!: HTMLElement;\n\n @Prop() option!: SelectOption;\n @Prop() index!: number;\n @Prop() isSelected: boolean = false;\n @Prop() isFocused: boolean = false;\n @Prop() optionStyle?: { [key: string]: string };\n @Prop() disabled: boolean = false;\n @Prop() useCheckbox: boolean = false;\n\n @State() isHovered: boolean = false;\n\n @Method()\n async sdIsDisabled(): Promise<boolean> {\n return !!this.option.disabled;\n }\n\n @Event() optionClick!: EventEmitter<{\n option: SelectOption;\n index: number;\n event: MouseEvent;\n }>;\n\n private handleClick = (event: MouseEvent) => {\n event.stopPropagation();\n\n if (!this.option.disabled && !this.disabled) {\n this.optionClick.emit({\n option: this.option,\n index: this.index,\n event,\n });\n }\n };\n\n render() {\n return (\n <Host>\n <div\n class={{\n 'sd-select__option': true,\n 'sd-select__option--selected': this.isSelected,\n 'sd-select__option--disabled': !!this.option.disabled,\n 'sd-select__option--focused': this.isFocused,\n 'sd-select__option--use-checkbox': this.useCheckbox,\n }}\n onMouseEnter={() => (this.isHovered = true)}\n onMouseLeave={() => (this.isHovered = false)}\n style={this.optionStyle}\n data-index={this.index}\n onClick={this.handleClick}\n >\n {this.useCheckbox ? (\n <div class=\"sd-select__option__checkbox-wrapper\">\n <sd-checkbox\n value={this.isSelected}\n disabled={this.option.disabled}\n // checkboxStyle={\n // !this.isSelected\n // ? { borderColor: '#888' }\n // : this.isHovered\n // ? { borderColor: 'white' }\n // : { borderColor: '#0075ff' }\n // }\n onClick={e => {\n e.preventDefault();\n this.handleClick(e);\n }}\n ></sd-checkbox>\n <span class=\"sd-select__option-label\">{this.option.label}</span>\n </div>\n ) : (\n this.option.label\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/{p-CpRkV7pg.js → p-COJpIimp.js} RENAMED Viewed

@@ -1,10 +1,10 @@
 import { p as proxyCustomElement, H, h, c as Host, t as transformTag } from './p-YLoygqPr.js';
-import { d as defineCustomElement$4 } from './p-CdGD6AqM.js';
-import { d as defineCustomElement$3 } from './p-CVMprLsE.js';
-import { d as defineCustomElement$2 } from './p-DnQF6htq.js';
-import { d as defineCustomElement$1 } from './p-7xekTQRB.js';
+import { d as defineCustomElement$4 } from './p-B-HVIIWo.js';
+import { d as defineCustomElement$3 } from './p-CmghyzXg.js';
+import { d as defineCustomElement$2 } from './p-Sw7TJWkF.js';
+import { d as defineCustomElement$1 } from './p-Dtljyq_t.js';
-const sdFieldCss = () => `.sd-field{display:inline-flex;flex-flow:column nowrap;height:fit-content;width:fit-content}.sd-field *:focus,.sd-field *:focus-visible,.sd-field *:focus-within{outline:none !important}.sd-field:not(.sd-field--disabled):hover .sd-field__control{border:1px solid #0075ff !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}.sd-field.sd-field--disabled{cursor:not-allowed}.sd-field.sd-field--disabled .sd-field__wrapper{cursor:not-allowed !important}.sd-field.sd-field--disabled .sd-field__wrapper .sd-field__label-inside{border-color:#cccccc;color:#888888;cursor:not-allowed !important}.sd-field.sd-field--disabled .sd-field__wrapper .sd-field__control{background-color:#eeeeee;border-color:#cccccc;color:#888888;cursor:not-allowed !important}.sd-field--has-label .sd-field__wrapper .sd-field__label{display:flex;align-items:center;margin-right:12px}.sd-field--has-label .sd-field__wrapper .sd-field__label__required-icon{margin-right:4px}.sd-field--has-label .sd-field__wrapper .sd-field__label__text{font-size:12px;line-height:20px;color:#333333;white-space:nowrap}.sd-field--has-label .sd-field__wrapper .sd-field__label__tooltip{margin-left:2px}.sd-field--has-label-inside .sd-field__wrapper .sd-field__label{margin-right:0;display:flex;align-items:center;justify-content:center;padding:3px 12px;border:1px solid #cccccc;border-right:none;border-radius:4px 0 0 4px;border-color:#aaaaaa;background-color:#f6f6f6}.sd-field__wrapper{width:var(--field-width, 200px);height:28px;display:flex;align-items:center;flex-flow:row nowrap;position:relative;color:#333333;cursor:pointer;-webkit-user-select:none;user-select:none}.sd-field__wrapper .sd-field__control{position:relative;width:100%;height:100%;display:flex;flex:1;border:1px solid #aaaaaa;border-radius:4px;background:white}.sd-field__wrapper .sd-field__control--label-inside{border-top-left-radius:0px;border-bottom-left-radius:0px}.sd-field--error:not(:hover) .sd-field__wrapper .sd-field__control{border:1px solid #fb4444 !important}.sd-field.sd-field--focus .sd-field__wrapper .sd-field__control,.sd-field.sd-field--hover .sd-field__wrapper .sd-field__control{border:1px solid #0075ff !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}.sd-field .sd-field__error-message{color:#fb4444;font-size:12px;line-height:20px;margin-top:4px}`;
+const sdFieldCss = () => `.sd-field{display:inline-flex;flex-flow:column nowrap;height:fit-content;width:100%}.sd-field *:focus,.sd-field *:focus-visible,.sd-field *:focus-within{outline:none !important}.sd-field:not(.sd-field--disabled):hover .sd-field__control{border:1px solid #0075ff !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}.sd-field.sd-field--disabled{cursor:not-allowed}.sd-field.sd-field--disabled .sd-field__wrapper{cursor:not-allowed !important}.sd-field.sd-field--disabled .sd-field__wrapper .sd-field__label-inside{border-color:#cccccc;color:#888888;cursor:not-allowed !important}.sd-field.sd-field--disabled .sd-field__wrapper .sd-field__control{background-color:#eeeeee;border-color:#cccccc;color:#888888;cursor:not-allowed !important}.sd-field--has-label .sd-field__wrapper .sd-field__label{display:flex;align-items:center;margin-right:12px}.sd-field--has-label .sd-field__wrapper .sd-field__label__required-icon{margin-right:4px}.sd-field--has-label .sd-field__wrapper .sd-field__label__text{font-size:12px;line-height:20px;color:#333333;white-space:nowrap}.sd-field--has-label .sd-field__wrapper .sd-field__label__tooltip{margin-left:2px}.sd-field--has-label-inside .sd-field__wrapper .sd-field__label{margin-right:0;display:flex;align-items:center;justify-content:center;padding:3px 12px;border:1px solid #cccccc;border-right:none;border-radius:4px 0 0 4px;border-color:#aaaaaa;background-color:#f6f6f6}.sd-field__wrapper{width:var(--field-width, 200px);height:28px;display:flex;align-items:center;flex-flow:row nowrap;position:relative;color:#333333;cursor:pointer;-webkit-user-select:none;user-select:none}.sd-field__wrapper .sd-field__control{position:relative;width:100%;height:100%;display:flex;flex:1;border:1px solid #aaaaaa;border-radius:4px;background:white}.sd-field__wrapper .sd-field__control--label-inside{border-top-left-radius:0px;border-bottom-left-radius:0px}.sd-field--error:not(:hover) .sd-field__wrapper .sd-field__control{border:1px solid #fb4444 !important}.sd-field.sd-field--focus .sd-field__wrapper .sd-field__control,.sd-field.sd-field--hover .sd-field__wrapper .sd-field__control{border:1px solid #0075ff !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}.sd-field .sd-field__error-message{color:#fb4444;font-size:12px;line-height:20px;margin-top:4px}`;
 const FORM_PARENT_TAGS = [
     'sd-select',
@@ -74,10 +74,10 @@ const SdField = /*@__PURE__*/ proxyCustomElement(class SdField extends H {
         return null;
     }
     registerToForm() {
-        if (!this.rules || this.rules.length === 0) {
-            console.warn('[sd-form-field] rules prop is required for sd-form integration');
-            return;
-        }
+        // if (!this.rules || this.rules.length === 0) {
+        //  console.warn('[sd-form-field] rules prop is required for sd-form integration');
+        //  return;
+        // }
         const formEl = this.el.closest('sd-form');
         if (!formEl)
             return;
@@ -126,15 +126,15 @@ const SdField = /*@__PURE__*/ proxyCustomElement(class SdField extends H {
         }
     }
     render() {
-        return (h(Host, { key: '16609b3313318dfc4db917a32bd44e6e2cb2f4e7', class: {
+        return (h(Host, { key: '8d4368c9802a01a58872ae1467d6183bb6a1d1d3', class: {
                 'sd-field': true,
                 'sd-field--has-label': !!this.label,
                 'sd-field--has-label-inside': !!this.label && this.insideLabel,
                 [this.fieldStatus]: !!this.fieldStatus,
-            } }, h("div", { key: '5c3056123cb54f8d6c26406ae76b13219d289f9c', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: '786bcd6ec3651bb226013474fae112c592ec6890', class: {
+            } }, h("div", { key: '86a8ae1ee6f2b56bbff2a0dda2f4c87e8cec74bd', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: 'c32b068f6459d326af29e2666a3ff17882c02c11', class: {
                 'sd-field__control': true,
                 'sd-field__control--label-inside ': !!this.label && this.insideLabel,
-            } }, h("slot", { key: '60ae2f97cc7225930df9d17958fe78d3dd8e01e3' }))), this.errorMsg && h("div", { key: '4984f7e64c6c6611063c46b5c7ea21a0ae0b5343', class: "sd-field__error-message" }, this.errorMsg)));
+            } }, h("slot", { key: 'a636756df1b20b4fa0b785cba57e96a7695ff103' }))), this.errorMsg && h("div", { key: 'da410dd97d83a910d6819410878349144ed1af0e', class: "sd-field__error-message" }, this.errorMsg)));
     }
     renderLabel(label) {
         if (!label)
@@ -196,6 +196,6 @@ function defineCustomElement() {
 }
 export { SdField as S, defineCustomElement as d };
-//# sourceMappingURL=p-CpRkV7pg.js.map
+//# sourceMappingURL=p-COJpIimp.js.map
-//# sourceMappingURL=p-CpRkV7pg.js.map
+//# sourceMappingURL=p-COJpIimp.js.map

package/dist/components/p-COJpIimp.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"p-COJpIimp.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-field/sd-field.scss?tag=sd-field","src/components/sd-field/sd-field.tsx"],"sourcesContent":["@import 'variables';\n\n.sd-field {\n display: inline-flex;\n flex-flow: column nowrap;\n height: fit-content;\n width: 100%;\n\n *:focus,\n *:focus-visible,\n *:focus-within {\n outline: none !important;\n }\n\n &:not(.sd-field--disabled) {\n &:hover {\n .sd-field__control {\n border: 1px solid $brilliantblue_75 !important;\n box-shadow: 0px 0px 4px 0px #0071ff66;\n }\n }\n }\n\n &.sd-field--disabled {\n cursor: not-allowed;\n\n .sd-field__wrapper {\n cursor: not-allowed !important;\n .sd-field__label-inside {\n border-color: $grey_45;\n color: $grey_65;\n cursor: not-allowed !important;\n }\n\n .sd-field__control {\n background-color: $grey_20;\n border-color: $grey_45;\n color: $grey_65;\n cursor: not-allowed !important;\n }\n }\n }\n\n &--has-label {\n .sd-field__wrapper {\n .sd-field__label {\n display: flex;\n align-items: center;\n margin-right: 12px;\n\n &__required-icon {\n margin-right: 4px;\n }\n\n &__text {\n font-size: 12px;\n line-height: 20px;\n // font-weight: 500;\n color: $grey_90;\n white-space: nowrap;\n }\n\n &__tooltip {\n margin-left: 2px;\n }\n }\n }\n }\n\n &--has-label-inside {\n .sd-field__wrapper {\n .sd-field__label {\n margin-right: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 3px 12px;\n border: 1px solid $grey_45;\n border-right: none;\n border-radius: 4px 0 0 4px;\n border-color: $grey_55;\n background-color: $grey_10;\n }\n }\n }\n\n &__wrapper {\n width: var(--field-width, 200px);\n height: 28px;\n display: flex;\n align-items: center;\n flex-flow: row nowrap;\n position: relative;\n color: $grey_90;\n cursor: pointer;\n -webkit-user-select: none;\n user-select: none;\n\n .sd-field__control {\n position: relative;\n width: 100%;\n height: 100%;\n display: flex;\n flex: 1;\n border: 1px solid $grey_55;\n border-radius: 4px;\n background: white;\n\n &--label-inside {\n border-top-left-radius: 0px;\n border-bottom-left-radius: 0px;\n }\n }\n }\n\n &--error:not(:hover) {\n .sd-field__wrapper .sd-field__control {\n border: 1px solid $red_70 !important;\n }\n }\n\n &.sd-field--focus,\n &.sd-field--hover {\n .sd-field__wrapper .sd-field__control {\n border: 1px solid $brilliantblue_75 !important;\n box-shadow: 0px 0px 4px 0px #0071ff66;\n }\n }\n\n .sd-field__error-message {\n color: $red_70;\n font-size: 12px;\n line-height: 20px;\n margin-top: 4px;\n }\n}\n","import { h, Component, Host, Element, Prop, State, Method } from '@stencil/core';\nimport { ValidatableField } from '../sd-form/sd-form';\nimport { Rule } from '../../types/form';\nimport { SdTooltipProps } from '../sd-tooltip/sd-tooltip';\n\nconst FORM_PARENT_TAGS = [\n 'sd-select',\n 'sd-select-multiple',\n 'sd-select-multiple-group',\n 'sd-input',\n 'sd-textarea',\n];\n\ninterface FormHostElement extends HTMLElement {\n value: any;\n error?: boolean;\n errorMsg?: string;\n}\n\n@Component({ tag: 'sd-field', styleUrl: 'sd-field.scss' })\nexport class SdField implements ValidatableField {\n @Element() el!: HTMLElement;\n\n @Prop() name: string = '';\n @Prop() rules?: Rule[] = [];\n\n @Prop({ mutable: true }) error?: boolean = false;\n @Prop({ mutable: true }) disabled?: boolean = false;\n @Prop({ mutable: true }) hovered?: boolean = false;\n @Prop({ mutable: true }) focused?: boolean = false;\n @Prop() status?: 'default' | 'pass' | 'error';\n\n // props - label\n @Prop() label: string = '';\n @Prop() insideLabel: boolean = false;\n @Prop() useLabelRequired: boolean = false;\n @Prop() labelTooltip: string = '';\n @Prop() labelTooltipProps: SdTooltipProps | null = null;\n\n @State() errorMsg: string = '';\n\n private hostElement: FormHostElement | null = null;\n\n get value() {\n return this.hostElement?.value ?? null;\n }\n\n get fieldStatus() {\n let status = '';\n\n if (!!this.disabled) {\n status = 'disabled';\n return `sd-field--${status}`;\n }\n\n if (!!this.focused) {\n status = 'focus';\n return `sd-field--${status}`;\n }\n\n if (!!this.hovered) status = 'hover';\n if (!!this.status) status = this.status;\n if (!!this.error) status = 'error';\n return status ? `sd-field--${status}` : '';\n }\n\n componentDidLoad() {\n this.hostElement = this.findHostElement();\n this.registerToForm();\n }\n\n disconnectedCallback() {\n this.unregisterFromForm();\n }\n\n private findHostElement(): FormHostElement | null {\n for (const tag of FORM_PARENT_TAGS) {\n const parent = this.el.closest<FormHostElement>(tag);\n if (parent && 'value' in parent) {\n return parent;\n }\n }\n return null;\n }\n\n private registerToForm() {\n // if (!this.rules || this.rules.length === 0) {\n // console.warn('[sd-form-field] rules prop is required for sd-form integration');\n // return;\n // }\n\n const formEl = this.el.closest<HTMLSdFormElement>('sd-form');\n if (!formEl) return;\n\n formEl.componentOnReady().then(form => {\n form.sdRegisterField(this);\n });\n }\n\n private unregisterFromForm() {\n if (!this.name) return;\n\n const formEl = this.el.closest<HTMLSdFormElement>('sd-form');\n formEl?.componentOnReady().then(form => {\n form.sdUnregisterField(this.name);\n });\n }\n\n @Method()\n async sdValidate(): Promise<boolean> {\n if (!this.rules || this.rules.length === 0) return true;\n\n for (const rule of this.rules) {\n const result = rule(this.value ?? '');\n if (result !== true) {\n this.setError(true, result);\n return false;\n }\n }\n this.setError(false, '');\n return true;\n }\n\n @Method()\n async sdReset() {\n if (this.hostElement) {\n this.hostElement.value = null;\n }\n this.setError(false, '');\n }\n\n @Method()\n async sdResetValidation() {\n this.setError(false, '');\n }\n\n @Method()\n async sdFocus() {\n this.hostElement?.focus?.();\n this.hostElement?.scrollIntoView({ behavior: 'smooth', block: 'center' });\n }\n\n private setError(error: boolean, errorMsg: string) {\n this.errorMsg = errorMsg;\n\n if (this.hostElement) {\n this.hostElement.error = error;\n }\n }\n\n render() {\n return (\n <Host\n class={{\n 'sd-field': true,\n 'sd-field--has-label': !!this.label,\n 'sd-field--has-label-inside': !!this.label && this.insideLabel,\n [this.fieldStatus]: !!this.fieldStatus,\n }}\n >\n <div class=\"sd-field__wrapper\">\n {this.renderLabel(this.label)}\n <div\n class={{\n 'sd-field__control': true,\n 'sd-field__control--label-inside ': !!this.label && this.insideLabel,\n }}\n >\n <slot></slot>\n </div>\n </div>\n {this.errorMsg && <div class=\"sd-field__error-message\">{this.errorMsg}</div>}\n </Host>\n );\n }\n\n private renderLabel(label?: string) {\n if (!label) return null;\n\n return (\n <label class={{ 'sd-field__label': true, 'sd-field__label-inside': this.insideLabel }}>\n {this.useLabelRequired && (\n <sd-icon\n name=\"star\"\n size=\"10\"\n color=\"brilliantblue_75\"\n class=\"sd-field__label__required-icon\"\n ></sd-icon>\n )}\n <div class=\"sd-field__label__text\">{label}</div>\n {this.labelTooltip && (\n <sd-tooltip class=\"sd-field__label__tooltip\" {...this.labelTooltipProps}>\n <div slot=\"content\">{this.labelTooltip}</div>\n </sd-tooltip>\n )}\n </label>\n );\n }\n}\n"],"version":3}

package/dist/components/{p-s4Mg_xSz.js → p-CZ0RizvY.js} RENAMED Viewed

@@ -1,13 +1,13 @@
 import { p as proxyCustomElement, H, d as createEvent, h, c as Host, t as transformTag } from './p-YLoygqPr.js';
-import { d as defineCustomElement$9 } from './p-CdGD6AqM.js';
-import { d as defineCustomElement$8 } from './p-UZEmuyIR.js';
-import { d as defineCustomElement$7 } from './p-CpRkV7pg.js';
-import { d as defineCustomElement$6 } from './p-CVMprLsE.js';
-import { d as defineCustomElement$5 } from './p-DnQF6htq.js';
-import { d as defineCustomElement$4 } from './p-D54IEoI6.js';
-import { d as defineCustomElement$3 } from './p-JF61vPAh.js';
-import { d as defineCustomElement$2 } from './p-RhBqdixM.js';
-import { d as defineCustomElement$1 } from './p-7xekTQRB.js';
+import { d as defineCustomElement$9 } from './p-B-HVIIWo.js';
+import { d as defineCustomElement$8 } from './p-ldcuoYNT.js';
+import { d as defineCustomElement$7 } from './p-COJpIimp.js';
+import { d as defineCustomElement$6 } from './p-CmghyzXg.js';
+import { d as defineCustomElement$5 } from './p-Sw7TJWkF.js';
+import { d as defineCustomElement$4 } from './p-B9qGa5dx.js';
+import { d as defineCustomElement$3 } from './p-BsBjOh8u.js';
+import { d as defineCustomElement$2 } from './p-9E-u4GN-.js';
+import { d as defineCustomElement$1 } from './p-Dtljyq_t.js';
 const sdSelectDropdownCss = () => `.sd-select-dropdown{overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}.sd-select-dropdown::-webkit-scrollbar{opacity:0;background:#e5e5e5}.sd-select-dropdown::-webkit-scrollbar:horizontal{height:8px}.sd-select-dropdown::-webkit-scrollbar:vertical{width:8px}.sd-select-dropdown::-webkit-scrollbar-thumb{height:80px;background-color:#cccccc;border-radius:4px}.sd-select-dropdown::-webkit-scrollbar-track{background-color:transparent}.sd-select-dropdown .sd-select-option-placeholder{height:48px;display:flex;align-items:center;padding:8px 16px;font-size:12px;line-height:0;text-align:left;color:#888888}.sd-select-dropdown{width:var(--select-dropdown-width, 200px);max-height:var(--select-dropdown-height, 260px);padding-bottom:2px;background-color:white;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);border-radius:4px;overflow-y:auto;color:#333333;display:flex;flex-direction:column;opacity:0.5;transition:opacity 0.15s ease-in}.sd-select-dropdown--ready{opacity:1}`;
@@ -165,10 +165,10 @@ const SdSelectDropdown = /*@__PURE__*/ proxyCustomElement(class SdSelectDropdown
         this.isScrolled = scrollTop > 0;
     };
     render() {
-        return (h(Host, { key: 'de06f67bf93dce6db12fee6bce3c6b11b7ee375f', style: this.dropdownSize }, h("div", { key: '42510dd6a21f1aa224f5141555c02729d09a6baf', class: {
+        return (h(Host, { key: 'bfb74ca8fece27f39c48185cd087ee1efaf52cd9', style: this.dropdownSize }, h("div", { key: 'c1c9f7cf52432c48e080969d2324676310d7e7f9', class: {
                 'sd-select-dropdown': true,
                 'sd-select-dropdown--ready': this.isDropdownReady,
-            }, onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (h("sd-select-search-input", { key: '2177a7ad0dc3ea5ded63103a55e03b9b0d4d3913', ref: el => (this.searchRef = el), isScrolled: this.isScrolled, searchText: this.searchText, onSdSearchInput: (event) => (this.searchText = event.detail || ''), onSdSearchFocus: () => (this.itemIndex = -1) })), this.filteredOptions.length > 0 ? (this.filteredOptions.map((option, index) => (h("slot", { name: `option-${option.value}` }, h("sd-select-option", { option: option, index: index, isSelected: this.isOptionSelected(option.value), isFocused: index === this.itemIndex, onOptionClick: ({ detail }) => this.optionClick.emit(detail), useCheckbox: this.useCheckbox }))))) : (h("slot", { name: "option-placeholder" }, h("div", { class: 'sd-select-option-placeholder' }, this.optionPlaceholder))))));
+            }, onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (h("sd-select-search-input", { key: 'c5d42ef925fba369b5b0361b7327fa3a1954d602', ref: el => (this.searchRef = el), isScrolled: this.isScrolled, searchText: this.searchText, onSdSearchInput: (event) => (this.searchText = event.detail || ''), onSdSearchFocus: () => (this.itemIndex = -1) })), this.filteredOptions.length > 0 ? (this.filteredOptions.map((option, index) => (h("slot", { name: `option-${option.value}` }, h("sd-select-option", { option: option, index: index, isSelected: this.isOptionSelected(option.value), isFocused: index === this.itemIndex, onOptionClick: ({ detail }) => this.optionClick.emit(detail), useCheckbox: this.useCheckbox }))))) : (h("slot", { name: "option-placeholder" }, h("div", { class: 'sd-select-option-placeholder' }, this.optionPlaceholder))))));
     }
     static get watchers() { return {
         "filteredOptions": ["filteredOptionsChanged"],
@@ -255,6 +255,6 @@ function defineCustomElement() {
 }
 export { SdSelectDropdown as S, defineCustomElement as d };
-//# sourceMappingURL=p-s4Mg_xSz.js.map
+//# sourceMappingURL=p-CZ0RizvY.js.map
-//# sourceMappingURL=p-s4Mg_xSz.js.map
+//# sourceMappingURL=p-CZ0RizvY.js.map

package/dist/components/{p-s4Mg_xSz.js.map → p-CZ0RizvY.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-s4Mg_xSz.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-select/sd-select-dropdown/sd-select-dropdown.scss?tag=sd-select-dropdown","src/components/sd-select/sd-select-dropdown/sd-select-dropdown.tsx"],"sourcesContent":["@import 'variables';\n@import 'extend';\n\n.sd-select-dropdown {\n @extend %scrollBar;\n width: var(--select-dropdown-width, 200px);\n max-height: var(--select-dropdown-height, 260px);\n padding-bottom: 2px;\n background-color: white;\n box-shadow: 2px 2px 12px 2px rgba(0, 0, 0, 0.1);\n border-radius: 4px;\n overflow-y: auto;\n color: $grey_90;\n display: flex;\n flex-direction: column;\n opacity: 0.5;\n transition: opacity 0.15s ease-in;\n\n &--ready {\n opacity: 1;\n }\n\n .sd-select-option-placeholder {\n @extend %selectOptionPlaceholder;\n }\n}\n","import { Component, Event, EventEmitter, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { SelectOption } from '../sd-select';\n\ntype SelectValue = SelectOption[] \| string \| number \| null;\n\n@Component({\n tag: 'sd-select-dropdown',\n styleUrl: 'sd-select-dropdown.scss',\n})\nexport class SdSelectDropdown {\n @Prop({ mutable: true }) itemIndex!: number;\n @Prop() value: SelectValue = null;\n @Prop() options!: SelectOption[];\n @Prop() width!: string;\n @Prop() dropdownHeight!: string;\n @Prop() searchable!: boolean;\n @Prop() optionPlaceholder!: string;\n @Prop() useCheckbox: boolean = false;\n @Prop() useAll?: boolean = false;\n\n @State() filteredOptions = this.options;\n @State() searchText: string \| null = null;\n @State() isScrolled: boolean = false;\n @State() isDropdownReady: boolean = false;\n\n @Event({ eventName: 'sdOptionClick' }) optionClick!: EventEmitter<{\n option: SelectOption;\n index: number;\n event: MouseEvent;\n }>;\n @Event({ eventName: 'sdOptionFiltered' }) optionFiltered!: EventEmitter<SelectOption[]>;\n @Event({ eventName: 'sdScroll' }) scroll!: EventEmitter<Event>;\n\n @Watch('filteredOptions')\n filteredOptionsChanged(newValue: SelectOption[]) {\n this.optionFiltered.emit(newValue);\n }\n\n @Watch('searchText')\n searchTextChanged() {\n this.filterOptions();\n }\n\n @Watch('itemIndex')\n async itemIndexChanged(newIndex: number, oldIndex: number) {\n if (this.searchable) {\n const searchInput = await this.getNativeInputElement();\n if (this.itemIndex === -1) {\n searchInput?.focus({ preventScroll: true });\n return;\n } else if (searchInput?.matches(':focus')) {\n searchInput?.blur();\n }\n }\n\n const optionElements =\n this.dropdownRef?.querySelectorAll('.sd-select-dropdown sd-select-option') \|\| [];\n const currentItem = optionElements?.[this.itemIndex];\n\n if (!currentItem) return;\n\n this.optionRef = currentItem as HTMLSdSelectOptionElement;\n const isOptionDisabled = await this.optionRef.sdIsDisabled();\n\n if (isOptionDisabled) {\n newIndex > oldIndex ? this.itemIndex++ : this.itemIndex--;\n return;\n }\n\n this.scrollToOption(currentItem as HTMLElement);\n }\n\n componentWillLoad() {\n this.filteredOptions = this.options;\n\n // DOM 렌더링을 기다리기 위해 이중 requestAnimationFrame 사용 - (레이아웃/스타일 계산 - 페인트 이후)\n requestAnimationFrame(() => {\n requestAnimationFrame(async () => {\n const selectedOptions = this.getSelectedOption();\n\n // 선택된 옵션이 있으면 첫 번째 선택된 항목으로 스크롤\n if (selectedOptions) {\n const selectedIndex = Array.isArray(selectedOptions)\n ? this.options.indexOf(selectedOptions[0])\n : this.options.indexOf(selectedOptions);\n const optionElements = Array.from(\n this.dropdownRef?.querySelectorAll('sd-select-option') \|\| [],\n );\n\n // useAll 사용시 \"전체\" 옵션 포함한 인덱스 사용\n const actualIndex = this.useAll ? selectedIndex + 1 : selectedIndex;\n\n // 선택된 옵션이 화면 가운데에 오도록 index 조정\n const targetIndex = Math.min(actualIndex + 4, optionElements.length - 1);\n const currentItem = optionElements?.[targetIndex];\n\n if (currentItem) {\n this.scrollToOption(currentItem as HTMLElement, 'instant');\n }\n }\n\n this.isDropdownReady = true;\n\n if (this.searchable) {\n const searchInput = await this.getNativeInputElement();\n\n if (searchInput) {\n requestAnimationFrame(() => {\n searchInput.focus({ preventScroll: true });\n });\n }\n }\n });\n });\n }\n\n private dropdownRef?: HTMLElement;\n private searchRef?: HTMLSdSelectSearchInputElement;\n private optionRef?: HTMLSdSelectOptionElement;\n\n private get dropdownSize() {\n return {\n '--select-dropdown-width': this.width \|\| '200px',\n '--select-dropdown-height': this.dropdownHeight \|\| '260px',\n };\n }\n\n private filterOptions() {\n if (!this.searchText \|\| this.searchText.trim() === '') {\n // 검색어가 없으면 전체 옵션 표시\n this.filteredOptions = this.options;\n } else {\n // 검색어가 있으면 필터링\n this.filteredOptions = this.options.filter(option =>\n option.label.toLowerCase().includes(this.searchText!.toLowerCase()),\n );\n }\n }\n\n private getSelectedOption(): SelectOption \| SelectOption[] \| undefined {\n if (typeof this.value !== 'object') {\n return this.options.find(option => option.value === this.value);\n }\n\n return this.options.filter(option => (this.value as SelectOption[])?.includes(option));\n }\n\n private isOptionSelected(value: SelectValue) {\n if (Array.isArray(this.value)) {\n return this.value.some(selected => selected.value === value);\n }\n return value === this.value;\n }\n\n private async getNativeInputElement(): Promise<HTMLInputElement \| null> {\n if (this.searchRef) {\n return this.searchRef.sdGetNativeElement();\n }\n return null;\n }\n\n private scrollToOption(optionElement: HTMLElement, scrollBehavior: ScrollBehavior = 'smooth') {\n if (!this.dropdownRef \|\| !optionElement) return;\n\n const dropdown = this.dropdownRef;\n const optionTop = optionElement.offsetTop;\n const optionHeight = optionElement.offsetHeight;\n const dropdownScrollTop = dropdown.scrollTop;\n const dropdownHeight = dropdown.clientHeight;\n\n const searchContainer = dropdown.querySelector('.sd-select-search-input');\n const searchOffset = searchContainer ? (searchContainer as HTMLElement).offsetHeight : 0;\n\n const visibleTop = dropdownScrollTop + searchOffset;\n const visibleBottom = dropdownScrollTop + dropdownHeight;\n\n if (optionTop < visibleTop) {\n dropdown.scrollTo({ top: optionTop - searchOffset, behavior: scrollBehavior });\n } else if (optionTop + optionHeight > visibleBottom) {\n dropdown.scrollTo({\n top: optionTop + optionHeight - dropdownHeight + searchOffset,\n behavior: scrollBehavior,\n });\n }\n }\n\n private handleDropdownScroll = (event: Event) => {\n const target = event.target as HTMLElement;\n const scrollTop = target.scrollTop;\n\n // 스크롤이 조금이라도 되면 그림자 표시\n this.isScrolled = scrollTop > 0;\n };\n\n render() {\n return (\n <Host style={this.dropdownSize}>\n <div\n class={{\n 'sd-select-dropdown': true,\n 'sd-select-dropdown--ready': this.isDropdownReady,\n }}\n onScroll={this.handleDropdownScroll}\n ref={el => (this.dropdownRef = el)}\n >\n {this.searchable && (\n <sd-select-search-input\n ref={el => (this.searchRef = el)}\n isScrolled={this.isScrolled}\n searchText={this.searchText}\n onSdSearchInput={(event: CustomEvent<string>) => (this.searchText = event.detail \|\| '')}\n onSdSearchFocus={() => (this.itemIndex = -1)}\n ></sd-select-search-input>\n )}\n {this.filteredOptions.length > 0 ? (\n this.filteredOptions.map((option, index) => (\n <slot name={`option-${option.value}`}>\n <sd-select-option\n option={option}\n index={index}\n isSelected={this.isOptionSelected(option.value)}\n isFocused={index === this.itemIndex}\n onOptionClick={({ detail }) => this.optionClick.emit(detail)}\n useCheckbox={this.useCheckbox}\n ></sd-select-option>\n </slot>\n ))\n ) : (\n <slot name=\"option-placeholder\">\n <div class={'sd-select-option-placeholder'}>{this.optionPlaceholder}</div>\n </slot>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-CZ0RizvY.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-select/sd-select-dropdown/sd-select-dropdown.scss?tag=sd-select-dropdown","src/components/sd-select/sd-select-dropdown/sd-select-dropdown.tsx"],"sourcesContent":["@import 'variables';\n@import 'extend';\n\n.sd-select-dropdown {\n @extend %scrollBar;\n width: var(--select-dropdown-width, 200px);\n max-height: var(--select-dropdown-height, 260px);\n padding-bottom: 2px;\n background-color: white;\n box-shadow: 2px 2px 12px 2px rgba(0, 0, 0, 0.1);\n border-radius: 4px;\n overflow-y: auto;\n color: $grey_90;\n display: flex;\n flex-direction: column;\n opacity: 0.5;\n transition: opacity 0.15s ease-in;\n\n &--ready {\n opacity: 1;\n }\n\n .sd-select-option-placeholder {\n @extend %selectOptionPlaceholder;\n }\n}\n","import { Component, Event, EventEmitter, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { SelectOption } from '../sd-select';\n\ntype SelectValue = SelectOption[] \| string \| number \| null;\n\n@Component({\n tag: 'sd-select-dropdown',\n styleUrl: 'sd-select-dropdown.scss',\n})\nexport class SdSelectDropdown {\n @Prop({ mutable: true }) itemIndex!: number;\n @Prop() value: SelectValue = null;\n @Prop() options!: SelectOption[];\n @Prop() width!: string;\n @Prop() dropdownHeight!: string;\n @Prop() searchable!: boolean;\n @Prop() optionPlaceholder!: string;\n @Prop() useCheckbox: boolean = false;\n @Prop() useAll?: boolean = false;\n\n @State() filteredOptions = this.options;\n @State() searchText: string \| null = null;\n @State() isScrolled: boolean = false;\n @State() isDropdownReady: boolean = false;\n\n @Event({ eventName: 'sdOptionClick' }) optionClick!: EventEmitter<{\n option: SelectOption;\n index: number;\n event: MouseEvent;\n }>;\n @Event({ eventName: 'sdOptionFiltered' }) optionFiltered!: EventEmitter<SelectOption[]>;\n @Event({ eventName: 'sdScroll' }) scroll!: EventEmitter<Event>;\n\n @Watch('filteredOptions')\n filteredOptionsChanged(newValue: SelectOption[]) {\n this.optionFiltered.emit(newValue);\n }\n\n @Watch('searchText')\n searchTextChanged() {\n this.filterOptions();\n }\n\n @Watch('itemIndex')\n async itemIndexChanged(newIndex: number, oldIndex: number) {\n if (this.searchable) {\n const searchInput = await this.getNativeInputElement();\n if (this.itemIndex === -1) {\n searchInput?.focus({ preventScroll: true });\n return;\n } else if (searchInput?.matches(':focus')) {\n searchInput?.blur();\n }\n }\n\n const optionElements =\n this.dropdownRef?.querySelectorAll('.sd-select-dropdown sd-select-option') \|\| [];\n const currentItem = optionElements?.[this.itemIndex];\n\n if (!currentItem) return;\n\n this.optionRef = currentItem as HTMLSdSelectOptionElement;\n const isOptionDisabled = await this.optionRef.sdIsDisabled();\n\n if (isOptionDisabled) {\n newIndex > oldIndex ? this.itemIndex++ : this.itemIndex--;\n return;\n }\n\n this.scrollToOption(currentItem as HTMLElement);\n }\n\n componentWillLoad() {\n this.filteredOptions = this.options;\n\n // DOM 렌더링을 기다리기 위해 이중 requestAnimationFrame 사용 - (레이아웃/스타일 계산 - 페인트 이후)\n requestAnimationFrame(() => {\n requestAnimationFrame(async () => {\n const selectedOptions = this.getSelectedOption();\n\n // 선택된 옵션이 있으면 첫 번째 선택된 항목으로 스크롤\n if (selectedOptions) {\n const selectedIndex = Array.isArray(selectedOptions)\n ? this.options.indexOf(selectedOptions[0])\n : this.options.indexOf(selectedOptions);\n const optionElements = Array.from(\n this.dropdownRef?.querySelectorAll('sd-select-option') \|\| [],\n );\n\n // useAll 사용시 \"전체\" 옵션 포함한 인덱스 사용\n const actualIndex = this.useAll ? selectedIndex + 1 : selectedIndex;\n\n // 선택된 옵션이 화면 가운데에 오도록 index 조정\n const targetIndex = Math.min(actualIndex + 4, optionElements.length - 1);\n const currentItem = optionElements?.[targetIndex];\n\n if (currentItem) {\n this.scrollToOption(currentItem as HTMLElement, 'instant');\n }\n }\n\n this.isDropdownReady = true;\n\n if (this.searchable) {\n const searchInput = await this.getNativeInputElement();\n\n if (searchInput) {\n requestAnimationFrame(() => {\n searchInput.focus({ preventScroll: true });\n });\n }\n }\n });\n });\n }\n\n private dropdownRef?: HTMLElement;\n private searchRef?: HTMLSdSelectSearchInputElement;\n private optionRef?: HTMLSdSelectOptionElement;\n\n private get dropdownSize() {\n return {\n '--select-dropdown-width': this.width \|\| '200px',\n '--select-dropdown-height': this.dropdownHeight \|\| '260px',\n };\n }\n\n private filterOptions() {\n if (!this.searchText \|\| this.searchText.trim() === '') {\n // 검색어가 없으면 전체 옵션 표시\n this.filteredOptions = this.options;\n } else {\n // 검색어가 있으면 필터링\n this.filteredOptions = this.options.filter(option =>\n option.label.toLowerCase().includes(this.searchText!.toLowerCase()),\n );\n }\n }\n\n private getSelectedOption(): SelectOption \| SelectOption[] \| undefined {\n if (typeof this.value !== 'object') {\n return this.options.find(option => option.value === this.value);\n }\n\n return this.options.filter(option => (this.value as SelectOption[])?.includes(option));\n }\n\n private isOptionSelected(value: SelectValue) {\n if (Array.isArray(this.value)) {\n return this.value.some(selected => selected.value === value);\n }\n return value === this.value;\n }\n\n private async getNativeInputElement(): Promise<HTMLInputElement \| null> {\n if (this.searchRef) {\n return this.searchRef.sdGetNativeElement();\n }\n return null;\n }\n\n private scrollToOption(optionElement: HTMLElement, scrollBehavior: ScrollBehavior = 'smooth') {\n if (!this.dropdownRef \|\| !optionElement) return;\n\n const dropdown = this.dropdownRef;\n const optionTop = optionElement.offsetTop;\n const optionHeight = optionElement.offsetHeight;\n const dropdownScrollTop = dropdown.scrollTop;\n const dropdownHeight = dropdown.clientHeight;\n\n const searchContainer = dropdown.querySelector('.sd-select-search-input');\n const searchOffset = searchContainer ? (searchContainer as HTMLElement).offsetHeight : 0;\n\n const visibleTop = dropdownScrollTop + searchOffset;\n const visibleBottom = dropdownScrollTop + dropdownHeight;\n\n if (optionTop < visibleTop) {\n dropdown.scrollTo({ top: optionTop - searchOffset, behavior: scrollBehavior });\n } else if (optionTop + optionHeight > visibleBottom) {\n dropdown.scrollTo({\n top: optionTop + optionHeight - dropdownHeight + searchOffset,\n behavior: scrollBehavior,\n });\n }\n }\n\n private handleDropdownScroll = (event: Event) => {\n const target = event.target as HTMLElement;\n const scrollTop = target.scrollTop;\n\n // 스크롤이 조금이라도 되면 그림자 표시\n this.isScrolled = scrollTop > 0;\n };\n\n render() {\n return (\n <Host style={this.dropdownSize}>\n <div\n class={{\n 'sd-select-dropdown': true,\n 'sd-select-dropdown--ready': this.isDropdownReady,\n }}\n onScroll={this.handleDropdownScroll}\n ref={el => (this.dropdownRef = el)}\n >\n {this.searchable && (\n <sd-select-search-input\n ref={el => (this.searchRef = el)}\n isScrolled={this.isScrolled}\n searchText={this.searchText}\n onSdSearchInput={(event: CustomEvent<string>) => (this.searchText = event.detail \|\| '')}\n onSdSearchFocus={() => (this.itemIndex = -1)}\n ></sd-select-search-input>\n )}\n {this.filteredOptions.length > 0 ? (\n this.filteredOptions.map((option, index) => (\n <slot name={`option-${option.value}`}>\n <sd-select-option\n option={option}\n index={index}\n isSelected={this.isOptionSelected(option.value)}\n isFocused={index === this.itemIndex}\n onOptionClick={({ detail }) => this.optionClick.emit(detail)}\n useCheckbox={this.useCheckbox}\n ></sd-select-option>\n </slot>\n ))\n ) : (\n <slot name=\"option-placeholder\">\n <div class={'sd-select-option-placeholder'}>{this.optionPlaceholder}</div>\n </slot>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/{p-CVMprLsE.js → p-CmghyzXg.js} RENAMED Viewed

@@ -154,7 +154,7 @@ const SdFloatingPopover = /*@__PURE__*/ proxyCustomElement(class SdFloatingPopov
         this.close.emit();
     }
     render() {
-        return h("slot", { key: 'f2000891d7d3bd71982f591bf953d1421f67fb5e' });
+        return h("slot", { key: '770ec3be9d1e2b830eaebfde37a664feafc3da3b' });
     }
     static get style() { return sdFloatingPortalCss(); }
 }, [772, "sd-floating-portal", {
@@ -180,6 +180,6 @@ function defineCustomElement() {
 }
 export { SdFloatingPopover as S, defineCustomElement as d };
-//# sourceMappingURL=p-CVMprLsE.js.map
+//# sourceMappingURL=p-CmghyzXg.js.map
-//# sourceMappingURL=p-CVMprLsE.js.map
+//# sourceMappingURL=p-CmghyzXg.js.map

package/dist/components/{p-CVMprLsE.js.map → p-CmghyzXg.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-CVMprLsE.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-floating-portal/sd-floating-portal.scss?tag=sd-floating-portal","src/components/sd-floating-portal/sd-floating-portal.tsx"],"sourcesContent":["@import 'variables';\n\n.sd-floating-menu {\n width: fit-content;\n padding: 12px 20px;\n border-radius: 4px;\n font-size: 12px;\n position: relative;\n box-sizing: border-box;\n background: $oceanblue_85;\n color: $white;\n\n .sd-floating-menu__arrow {\n color: $oceanblue_85;\n }\n\n &--default {\n background: $oceanblue_85;\n color: $white;\n .sd-floating-menu__arrow {\n color: $oceanblue_85;\n }\n }\n\n &--caution {\n background: $red_20;\n color: $red_70;\n .sd-floating-menu__arrow {\n color: $red_20;\n }\n }\n\n &--notice {\n background: $orange_10;\n color: $orange_65;\n .sd-floating-menu__arrow {\n color: $orange_10;\n }\n }\n\n &--accent {\n background: $brilliantblue_20;\n color: $brilliantblue_75;\n .sd-floating-menu__arrow {\n color: $brilliantblue_20;\n }\n }\n\n &__arrow {\n position: absolute;\n display: flex;\n width: 9.6px;\n height: 7.2px;\n\n svg {\n width: 100%;\n height: 100%;\n }\n\n &--top {\n bottom: -7.2px;\n left: 50%;\n transform: translateX(-50%);\n }\n\n &--bottom {\n top: -7.2px;\n left: 50%;\n transform: translateX(-50%) rotate(180deg);\n }\n\n &--left {\n right: -7.2px;\n top: 50%;\n transform: translateY(-50%) rotate(-90deg);\n }\n\n &--right {\n left: -7.2px;\n top: 50%;\n transform: translateY(-50%) rotate(90deg);\n }\n }\n\n &__content {\n font-size: 12px;\n line-height: 20px;\n\n .sd-floating-menu__title {\n font-weight: 700;\n margin-bottom: 4px;\n }\n\n .sd-floating-menu__messages {\n font-weight: 500;\n }\n\n .sd-floating-menu__buttons {\n margin-top: 12px;\n display: flex;\n gap: 8px;\n align-items: center;\n\n &--1 {\n justify-content: flex-end;\n }\n\n &--2 {\n justify-content: space-between;\n }\n }\n }\n\n &__close-button {\n position: absolute;\n top: 16px;\n right: 12px;\n padding: 0;\n background: none;\n border: none;\n cursor: pointer;\n }\n}\n","import { Component, Element, Event, EventEmitter, Listen, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'sd-floating-portal',\n styleUrl: 'sd-floating-portal.scss',\n})\nexport class SdFloatingPopover {\n @Element() el!: HTMLElement;\n @Prop() to: HTMLElement \| string = 'body';\n @Prop() parentRef: HTMLElement \| null = null;\n @Prop() offset: [number, number] = [0, 0];\n @Prop() zIndex: number = 9999;\n @Prop() placement: 'top' \| 'bottom' \| 'left' \| 'right' = 'bottom';\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 private static readonly ARROW_SIZE = 11.2;\n\n componentDidLoad() {\n this.container = this.resolveContainer();\n this.createWrapper();\n this.moveSlotContent();\n\n // DOM이 완전히 렌더링된 후 위치 계산\n requestAnimationFrame(() => {\n this.updatePosition();\n if (this.wrapper) {\n this.wrapper.style.visibility = 'visible'; // 위치 계산 후 표시\n }\n });\n\n this.observeParent();\n }\n\n componentDidRender() {\n if (!this.wrapper) return;\n\n // this.wrapper.style.display = this.open ? 'block' : 'none';\n // if (this.open) this.updatePosition();\n\n if (this.open) {\n this.wrapper.style.display = 'block';\n // RAF를 사용해서 다음 프레임에 위치 업데이트\n requestAnimationFrame(() => {\n this.updatePosition();\n if (this.wrapper) {\n this.wrapper.style.visibility = 'visible';\n }\n });\n } else {\n this.wrapper.style.display = 'none';\n this.wrapper.style.visibility = 'hidden';\n }\n }\n\n disconnectedCallback() {\n if (this.rafId) cancelAnimationFrame(this.rafId);\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 top: '-9999px',\n left: '-9999px',\n });\n this.container!.appendChild(this.wrapper);\n }\n\n private moveSlotContent() {\n if (!this.wrapper) return;\n const nodes = Array.from(this.el.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\n this.rafId = requestAnimationFrame(() => {\n if (!this.parentRef \|\| !this.wrapper) return;\n\n const rect = this.parentRef.getBoundingClientRect();\n if (!rect.width && !rect.height) return; // 요소가 보이지 않는 경우\n\n const [offsetX, offsetY] = this.offset;\n const ARROW_SIZE = SdFloatingPopover.ARROW_SIZE;\n\n let top = 0;\n let left = 0;\n\n switch (this.placement) {\n case 'top':\n top = rect.top + window.scrollY - this.wrapper.offsetHeight + offsetY - ARROW_SIZE;\n left = rect.left + window.scrollX + rect.width / 2 - this.wrapper.offsetWidth / 2 + offsetX;\n break;\n\n case 'bottom':\n top = rect.bottom + window.scrollY + offsetY + ARROW_SIZE;\n left = rect.left + window.scrollX + rect.width / 2 - this.wrapper.offsetWidth / 2 + offsetX;\n break;\n\n case 'left':\n top = rect.top + window.scrollY + rect.height / 2 - this.wrapper.offsetHeight / 2 + offsetY;\n left = rect.left + window.scrollX - this.wrapper.offsetWidth - offsetX - ARROW_SIZE;\n break;\n\n case 'right':\n top = rect.top + window.scrollY + rect.height / 2 - this.wrapper.offsetHeight / 2 + offsetY;\n left = rect.right + window.scrollX + offsetX + ARROW_SIZE;\n break;\n }\n\n Object.assign(this.wrapper!.style, {\n top: `${top}px`,\n left: `${left}px`,\n });\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 = !!(\n (this.wrapper && this.wrapper.contains(e.target as Node)) \|\|\n (this.parentRef && this.parentRef.contains(e.target as Node))\n );\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}
1	+ {"file":"p-CmghyzXg.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-floating-portal/sd-floating-portal.scss?tag=sd-floating-portal","src/components/sd-floating-portal/sd-floating-portal.tsx"],"sourcesContent":["@import 'variables';\n\n.sd-floating-menu {\n width: fit-content;\n padding: 12px 20px;\n border-radius: 4px;\n font-size: 12px;\n position: relative;\n box-sizing: border-box;\n background: $oceanblue_85;\n color: $white;\n\n .sd-floating-menu__arrow {\n color: $oceanblue_85;\n }\n\n &--default {\n background: $oceanblue_85;\n color: $white;\n .sd-floating-menu__arrow {\n color: $oceanblue_85;\n }\n }\n\n &--caution {\n background: $red_20;\n color: $red_70;\n .sd-floating-menu__arrow {\n color: $red_20;\n }\n }\n\n &--notice {\n background: $orange_10;\n color: $orange_65;\n .sd-floating-menu__arrow {\n color: $orange_10;\n }\n }\n\n &--accent {\n background: $brilliantblue_20;\n color: $brilliantblue_75;\n .sd-floating-menu__arrow {\n color: $brilliantblue_20;\n }\n }\n\n &__arrow {\n position: absolute;\n display: flex;\n width: 9.6px;\n height: 7.2px;\n\n svg {\n width: 100%;\n height: 100%;\n }\n\n &--top {\n bottom: -7.2px;\n left: 50%;\n transform: translateX(-50%);\n }\n\n &--bottom {\n top: -7.2px;\n left: 50%;\n transform: translateX(-50%) rotate(180deg);\n }\n\n &--left {\n right: -7.2px;\n top: 50%;\n transform: translateY(-50%) rotate(-90deg);\n }\n\n &--right {\n left: -7.2px;\n top: 50%;\n transform: translateY(-50%) rotate(90deg);\n }\n }\n\n &__content {\n font-size: 12px;\n line-height: 20px;\n\n .sd-floating-menu__title {\n font-weight: 700;\n margin-bottom: 4px;\n }\n\n .sd-floating-menu__messages {\n font-weight: 500;\n }\n\n .sd-floating-menu__buttons {\n margin-top: 12px;\n display: flex;\n gap: 8px;\n align-items: center;\n\n &--1 {\n justify-content: flex-end;\n }\n\n &--2 {\n justify-content: space-between;\n }\n }\n }\n\n &__close-button {\n position: absolute;\n top: 16px;\n right: 12px;\n padding: 0;\n background: none;\n border: none;\n cursor: pointer;\n }\n}\n","import { Component, Element, Event, EventEmitter, Listen, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'sd-floating-portal',\n styleUrl: 'sd-floating-portal.scss',\n})\nexport class SdFloatingPopover {\n @Element() el!: HTMLElement;\n @Prop() to: HTMLElement \| string = 'body';\n @Prop() parentRef: HTMLElement \| null = null;\n @Prop() offset: [number, number] = [0, 0];\n @Prop() zIndex: number = 9999;\n @Prop() placement: 'top' \| 'bottom' \| 'left' \| 'right' = 'bottom';\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 private static readonly ARROW_SIZE = 11.2;\n\n componentDidLoad() {\n this.container = this.resolveContainer();\n this.createWrapper();\n this.moveSlotContent();\n\n // DOM이 완전히 렌더링된 후 위치 계산\n requestAnimationFrame(() => {\n this.updatePosition();\n if (this.wrapper) {\n this.wrapper.style.visibility = 'visible'; // 위치 계산 후 표시\n }\n });\n\n this.observeParent();\n }\n\n componentDidRender() {\n if (!this.wrapper) return;\n\n // this.wrapper.style.display = this.open ? 'block' : 'none';\n // if (this.open) this.updatePosition();\n\n if (this.open) {\n this.wrapper.style.display = 'block';\n // RAF를 사용해서 다음 프레임에 위치 업데이트\n requestAnimationFrame(() => {\n this.updatePosition();\n if (this.wrapper) {\n this.wrapper.style.visibility = 'visible';\n }\n });\n } else {\n this.wrapper.style.display = 'none';\n this.wrapper.style.visibility = 'hidden';\n }\n }\n\n disconnectedCallback() {\n if (this.rafId) cancelAnimationFrame(this.rafId);\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 top: '-9999px',\n left: '-9999px',\n });\n this.container!.appendChild(this.wrapper);\n }\n\n private moveSlotContent() {\n if (!this.wrapper) return;\n const nodes = Array.from(this.el.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\n this.rafId = requestAnimationFrame(() => {\n if (!this.parentRef \|\| !this.wrapper) return;\n\n const rect = this.parentRef.getBoundingClientRect();\n if (!rect.width && !rect.height) return; // 요소가 보이지 않는 경우\n\n const [offsetX, offsetY] = this.offset;\n const ARROW_SIZE = SdFloatingPopover.ARROW_SIZE;\n\n let top = 0;\n let left = 0;\n\n switch (this.placement) {\n case 'top':\n top = rect.top + window.scrollY - this.wrapper.offsetHeight + offsetY - ARROW_SIZE;\n left = rect.left + window.scrollX + rect.width / 2 - this.wrapper.offsetWidth / 2 + offsetX;\n break;\n\n case 'bottom':\n top = rect.bottom + window.scrollY + offsetY + ARROW_SIZE;\n left = rect.left + window.scrollX + rect.width / 2 - this.wrapper.offsetWidth / 2 + offsetX;\n break;\n\n case 'left':\n top = rect.top + window.scrollY + rect.height / 2 - this.wrapper.offsetHeight / 2 + offsetY;\n left = rect.left + window.scrollX - this.wrapper.offsetWidth - offsetX - ARROW_SIZE;\n break;\n\n case 'right':\n top = rect.top + window.scrollY + rect.height / 2 - this.wrapper.offsetHeight / 2 + offsetY;\n left = rect.right + window.scrollX + offsetX + ARROW_SIZE;\n break;\n }\n\n Object.assign(this.wrapper!.style, {\n top: `${top}px`,\n left: `${left}px`,\n });\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 = !!(\n (this.wrapper && this.wrapper.contains(e.target as Node)) \|\|\n (this.parentRef && this.parentRef.contains(e.target as Node))\n );\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}