npm - @sellmate/design-system - Versions diffs - 1.0.14 → 1.0.16 - Mend

@sellmate/design-system 1.0.14 → 1.0.16

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 (120) hide show

package/dist/components/{p-CXyVUgP3.js.map → p-CkzAorp3.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-CXyVUgP3.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, 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 <div\n class={{\n 'sd-select-dropdown': true,\n 'sd-select-dropdown--ready': this.isDropdownReady,\n }}\n style={this.dropdownSize}\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 );\n }\n}\n"],"version":3}
1	+ {"file":"p-CkzAorp3.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, 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 <div\n class={{\n 'sd-select-dropdown': true,\n 'sd-select-dropdown--ready': this.isDropdownReady,\n }}\n style={this.dropdownSize}\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 );\n }\n}\n"],"version":3}

package/dist/components/{p-CbEUJ3R6.js → p-D16-dM6f.js} RENAMED Viewed

@@ -121,7 +121,7 @@ const SdPortal = /*@__PURE__*/ proxyCustomElement(class SdPortal extends H {
         this.close.emit();
     }
     render() {
-        return h("slot", { key: '5469d915f8a11d490a1839167b3ae771624d257b' });
+        return h("slot", { key: 'ba2bf5df16f9bef0acef1ac8a08b090a23d02bc7' });
     }
 }, [772, "sd-portal", {
         "to": [1],
@@ -145,6 +145,6 @@ function defineCustomElement() {
 }
 export { SdPortal as S, defineCustomElement as d };
-//# sourceMappingURL=p-CbEUJ3R6.js.map
+//# sourceMappingURL=p-D16-dM6f.js.map
-//# sourceMappingURL=p-CbEUJ3R6.js.map
+//# sourceMappingURL=p-D16-dM6f.js.map

package/dist/components/{p-CbEUJ3R6.js.map → p-D16-dM6f.js.map} RENAMED Viewed

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

package/dist/components/{p-wRu9w6Gl.js → p-DUh9r-hn.js} RENAMED Viewed

@@ -79,12 +79,12 @@ const SdPagination = /*@__PURE__*/ proxyCustomElement(class SdPagination extends
         }
     }
     render() {
-        return (h("div", { key: '3113faf5d75fa4a13e267653cae820035270e652', class: this.paginationClasses }, h("div", { key: 'a770afe37da389511bbfda99324e7794ffa299f5', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (h("div", { class: "pagination-info" }, h("span", { class: "current-page" }, this.currentPage), h("span", null, "/"), h("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
+        return (h("div", { key: 'feed08139c382f91539bc316a967ed1738529688', class: this.paginationClasses }, h("div", { key: '42c908d7a685f2acab29a94d040e4f4c513fff38', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (h("div", { class: "pagination-info" }, h("span", { class: "current-page" }, this.currentPage), h("span", null, "/"), h("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
                 'pagination-btn': true,
                 'pagination-btn--selected': this.currentPage === n,
             }, disabled: this.currentPage === n, style: {
                 '--pagination-btn-width': `${this.buttonWidth}px`,
-            }, onClick: () => this.handlePageChange(n) }, n)))), h("div", { key: '7e3842b531373d6485ae8912addea1aa531ca891', class: "append-btns" }, this.renderNextButtons())));
+            }, onClick: () => this.handlePageChange(n) }, n)))), h("div", { key: '2be11ae773c0bce71ecaf53f99daff3f5b2d567d', class: "append-btns" }, this.renderNextButtons())));
     }
     static get style() { return sdPaginationCss(); }
 }, [768, "sd-pagination", {
@@ -112,6 +112,6 @@ function defineCustomElement() {
 }
 export { SdPagination as S, defineCustomElement as d };
-//# sourceMappingURL=p-wRu9w6Gl.js.map
+//# sourceMappingURL=p-DUh9r-hn.js.map
-//# sourceMappingURL=p-wRu9w6Gl.js.map
+//# sourceMappingURL=p-DUh9r-hn.js.map

package/dist/components/{p-wRu9w6Gl.js.map → p-DUh9r-hn.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-wRu9w6Gl.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-pagination/sd-pagination.scss?tag=sd-pagination","src/components/sd-pagination/sd-pagination.tsx"],"sourcesContent":["@import 'variables';\n\n.sd-pagination {\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n justify-content: center;\n gap: 8px;\n color: $grey_80;\n width: 100%;\n font-size: 12px;\n\n .prepend-btns {\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n gap: 8px;\n width: 60px;\n\n button {\n width: 26px;\n height: 26px;\n border: 0;\n background: none;\n\n &:hover {\n border: 1px solid $oceanblue_70;\n border-radius: 14px;\n }\n }\n }\n\n .append-btns {\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n gap: 8px;\n width: 60px;\n\n button {\n width: 26px;\n height: 26px;\n border: 0;\n background: none;\n\n &:hover {\n border: 1px solid $oceanblue_70;\n border-radius: 14px;\n }\n }\n }\n\n .pagination-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 14px;\n outline: none;\n border: none;\n cursor: pointer;\n height: 26px;\n color: $grey_80;\n width: var(--pagination-btn-width, 26px);\n\n &--selected {\n background-color: $oceanblue_70;\n color: white;\n }\n\n &:hover {\n border: 1px solid $oceanblue_70;\n }\n }\n\n &--simple {\n .pagination-info {\n line-height: 26px;\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n gap: 8px;\n .current-page,\n .last-page {\n padding: 0 2px;\n }\n }\n }\n}\n","import { Component, Prop, Event, EventEmitter, h, Fragment } from '@stencil/core';\n\nconst BUTTON_WIDTH: Record<number, number> = {\n 1: 26,\n 2: 36,\n 3: 42,\n 4: 50,\n 5: 58,\n};\n\nconst PER_PAGE = 10;\n\n@Component({\n tag: 'sd-pagination',\n styleUrl: 'sd-pagination.scss',\n})\nexport class SdPagination {\n @Prop() currentPage: number = 1;\n @Prop() lastPage: number = 1;\n @Prop() simple: boolean = false;\n\n @Event({ eventName: 'sdPageChange' }) pageChange!: EventEmitter<number>;\n\n private get paginationClasses() {\n const classes = ['sd-pagination'];\n\n if (this.simple) {\n classes.push('sd-pagination--simple');\n }\n return classes.join(' ');\n }\n\n private get pageNumbers() {\n const start = Math.floor((this.currentPage - 1) / PER_PAGE) * PER_PAGE + 1;\n const end = Math.min(start + PER_PAGE - 1, this.lastPage);\n return Array.from({ length: end - start + 1 }, (_, i) => start + i);\n }\n\n private get buttonWidth() {\n const lastPageNum = this.pageNumbers.at(-1) ?? 1;\n const maxPageLength: number = lastPageNum.toString().length;\n return BUTTON_WIDTH[maxPageLength] \|\| BUTTON_WIDTH[1];\n }\n\n private handlePageChange(page: number) {\n if (page < 1 \|\| page > this.lastPage) return;\n this.currentPage = page;\n this.pageChange.emit(page);\n }\n\n private handleGroupChange(direction: 'forward' \| 'backward') {\n const delta = direction === 'forward' ? PER_PAGE : -PER_PAGE;\n const newPage = Math.min(Math.max(this.currentPage + delta, 1), this.lastPage);\n this.handlePageChange(newPage);\n }\n\n private get isFirstGroup() {\n return this.currentPage <= PER_PAGE;\n }\n\n private get isLastGroup() {\n const startPageGroup = Math.floor((this.currentPage - 1) / PER_PAGE) * PER_PAGE + 1;\n return startPageGroup + PER_PAGE - 1 >= this.lastPage;\n }\n\n private renderPrevButtons() {\n if (this.simple) {\n if (this.currentPage <= 1) return null;\n\n return (\n <Fragment>\n <button aria-label=\"Go to first page\" onClick={() => this.handlePageChange(1)}>\n <sd-icon name=\"arrowLeftEnd\" size=\"12\" color=\"#222222\" />\n </button>\n <button\n aria-label=\"Go to previous page\"\n onClick={() => this.handlePageChange(this.currentPage - 1)}\n >\n <sd-icon name=\"arrowLeft\" size=\"12\" color=\"#222222\" />\n </button>\n </Fragment>\n );\n }\n\n if (!this.isFirstGroup) {\n return (\n <Fragment>\n <button aria-label=\"Go to first page\" onClick={() => this.handlePageChange(1)}>\n <sd-icon name=\"arrowLeftEnd\" size=\"12\" color=\"#222222\" />\n </button>\n <button\n aria-label=\"Go to previous page group\"\n onClick={() => this.handleGroupChange('backward')}\n >\n <sd-icon name=\"arrowLeft\" size=\"12\" color=\"#222222\" />\n </button>\n </Fragment>\n );\n }\n }\n\n private renderNextButtons() {\n if (this.simple) {\n if (this.currentPage >= this.lastPage) return null;\n\n return (\n <Fragment>\n <button\n aria-label=\"Go to next page\"\n onClick={() => this.handlePageChange(this.currentPage + 1)}\n >\n <sd-icon name=\"arrowRight\" size=\"12\" color=\"#222222\" />\n </button>\n <button aria-label=\"Go to last page\" onClick={() => this.handlePageChange(this.lastPage)}>\n <sd-icon name=\"arrowRightEnd\" size=\"12\" color=\"#222222\" />\n </button>\n </Fragment>\n );\n }\n\n if (!this.isLastGroup) {\n return (\n <Fragment>\n <button aria-label=\"Go to next page group\" onClick={() => this.handleGroupChange('forward')}>\n <sd-icon name=\"arrowRight\" size=\"12\" color=\"#222222\" />\n </button>\n <button aria-label=\"Go to last page\" onClick={() => this.handlePageChange(this.lastPage)}>\n <sd-icon name=\"arrowRightEnd\" size=\"12\" color=\"#222222\" />\n </button>\n </Fragment>\n );\n }\n }\n\n render() {\n return (\n <div class={this.paginationClasses}>\n <div class=\"prepend-btns\">{this.renderPrevButtons()}</div>\n\n {this.simple ? (\n <div class=\"pagination-info\">\n <span class=\"current-page\">{this.currentPage}</span>\n <span>/</span>\n <span class=\"last-page\">{this.lastPage}</span>\n </div>\n ) : (\n this.pageNumbers.map(n => (\n <button\n type=\"button\"\n aria-current={this.currentPage === n ? 'page' : undefined}\n class={{\n 'pagination-btn': true,\n 'pagination-btn--selected': this.currentPage === n,\n }}\n disabled={this.currentPage === n}\n style={{\n '--pagination-btn-width': `${this.buttonWidth}px`,\n }}\n onClick={() => this.handlePageChange(n)}\n >\n {n}\n </button>\n ))\n )}\n\n <div class=\"append-btns\">{this.renderNextButtons()}</div>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-DUh9r-hn.js","mappings":";;;AAAA,MAAM,eAAe,GAAG,MAAM,CAAC,kvCAAkvC,CAAC;;ACElxC,MAAM,YAAY,GAA2B;AAC5C,IAAA,CAAC,EAAE,EAAE;AACL,IAAA,CAAC,EAAE,EAAE;AACL,IAAA,CAAC,EAAE,EAAE;AACL,IAAA,CAAC,EAAE,EAAE;AACL,IAAA,CAAC,EAAE,EAAE;CACL;AAED,MAAM,QAAQ,GAAG,EAAE;MAMN,YAAY,iBAAAA,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;;;;;;;;IAChB,WAAW,GAAW,CAAC;IACvB,QAAQ,GAAW,CAAC;IACpB,MAAM,GAAY,KAAK;AAEO,IAAA,UAAU;AAEhD,IAAA,IAAY,iBAAiB,GAAA;AAC5B,QAAA,MAAM,OAAO,GAAG,CAAC,eAAe,CAAC;AAEjC,QAAA,IAAI,IAAI,CAAC,MAAM,EAAE;AAChB,YAAA,OAAO,CAAC,IAAI,CAAC,uBAAuB,CAAC;;AAEtC,QAAA,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;;AAGzB,IAAA,IAAY,WAAW,GAAA;QACtB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,CAAC,IAAI,QAAQ,CAAC,GAAG,QAAQ,GAAG,CAAC;AAC1E,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,QAAQ,GAAG,CAAC,EAAE,IAAI,CAAC,QAAQ,CAAC;QACzD,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,GAAG,GAAG,KAAK,GAAG,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,KAAK,GAAG,CAAC,CAAC;;AAGpE,IAAA,IAAY,WAAW,GAAA;AACtB,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;QAChD,MAAM,aAAa,GAAW,WAAW,CAAC,QAAQ,EAAE,CAAC,MAAM;QAC3D,OAAO,YAAY,CAAC,aAAa,CAAC,IAAI,YAAY,CAAC,CAAC,CAAC;;AAG9C,IAAA,gBAAgB,CAAC,IAAY,EAAA;QACpC,IAAI,IAAI,GAAG,CAAC,IAAI,IAAI,GAAG,IAAI,CAAC,QAAQ;YAAE;AACtC,QAAA,IAAI,CAAC,WAAW,GAAG,IAAI;AACvB,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC;;AAGnB,IAAA,iBAAiB,CAAC,SAAiC,EAAA;AAC1D,QAAA,MAAM,KAAK,GAAG,SAAS,KAAK,SAAS,GAAG,QAAQ,GAAG,GAAS;QAC5D,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,WAAW,GAAG,KAAK,EAAE,CAAC,CAAC,EAAE,IAAI,CAAC,QAAQ,CAAC;AAC9E,QAAA,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC;;AAG/B,IAAA,IAAY,YAAY,GAAA;AACvB,QAAA,OAAO,IAAI,CAAC,WAAW,IAAI,QAAQ;;AAGpC,IAAA,IAAY,WAAW,GAAA;QACtB,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,CAAC,IAAI,QAAQ,CAAC,GAAG,QAAQ,GAAG,CAAC;QACnF,OAAO,cAAc,GAAG,QAAQ,GAAG,CAAC,IAAI,IAAI,CAAC,QAAQ;;IAG9C,iBAAiB,GAAA;AACxB,QAAA,IAAI,IAAI,CAAC,MAAM,EAAE;AAChB,YAAA,IAAI,IAAI,CAAC,WAAW,IAAI,CAAC;AAAE,gBAAA,OAAO,IAAI;YAEtC,QACC,EAAC,QAAQ,EAAA,IAAA,EACR,CAAA,CAAA,QAAA,EAAA,EAAA,YAAA,EAAmB,kBAAkB,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAA,EAC5E,CAAA,CAAA,SAAA,EAAA,EAAS,IAAI,EAAC,cAAc,EAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,SAAS,EAAA,CAAG,CACjD,EACT,CAAA,CAAA,QAAA,EAAA,EAAA,YAAA,EACY,qBAAqB,EAChC,OAAO,EAAE,MAAM,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,EAAA,EAE1D,CAAA,CAAA,SAAA,EAAA,EAAS,IAAI,EAAC,WAAW,EAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,SAAS,EAAA,CAAG,CAC9C,CACC;;AAIb,QAAA,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;YACvB,QACC,EAAC,QAAQ,EAAA,IAAA,EACR,CAAA,CAAA,QAAA,EAAA,EAAA,YAAA,EAAmB,kBAAkB,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAA,EAC5E,CAAA,CAAA,SAAA,EAAA,EAAS,IAAI,EAAC,cAAc,EAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,SAAS,EAAA,CAAG,CACjD,EACT,CAAA,CAAA,QAAA,EAAA,EAAA,YAAA,EACY,2BAA2B,EACtC,OAAO,EAAE,MAAM,IAAI,CAAC,iBAAiB,CAAC,UAAU,CAAC,EAAA,EAEjD,CAAA,CAAA,SAAA,EAAA,EAAS,IAAI,EAAC,WAAW,EAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,SAAS,EAAA,CAAG,CAC9C,CACC;;;IAKN,iBAAiB,GAAA;AACxB,QAAA,IAAI,IAAI,CAAC,MAAM,EAAE;AAChB,YAAA,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,QAAQ;AAAE,gBAAA,OAAO,IAAI;YAElD,QACC,EAAC,QAAQ,EAAA,IAAA,EACR,CAAA,CAAA,QAAA,EAAA,EAAA,YAAA,EACY,iBAAiB,EAC5B,OAAO,EAAE,MAAM,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,EAAA,EAE1D,CAAA,CAAA,SAAA,EAAA,EAAS,IAAI,EAAC,YAAY,EAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,SAAS,EAAA,CAAG,CAC/C,EACT,CAAA,CAAA,QAAA,EAAA,EAAA,YAAA,EAAmB,iBAAiB,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAA,EACvF,CAAA,CAAA,SAAA,EAAA,EAAS,IAAI,EAAC,eAAe,EAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,SAAS,EAAA,CAAG,CAClD,CACC;;AAIb,QAAA,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;YACtB,QACC,EAAC,QAAQ,EAAA,IAAA,EACR,CAAA,CAAA,QAAA,EAAA,EAAA,YAAA,EAAmB,uBAAuB,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,iBAAiB,CAAC,SAAS,CAAC,EAAA,EAC1F,CAAA,CAAA,SAAA,EAAA,EAAS,IAAI,EAAC,YAAY,EAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,SAAS,EAAA,CAAG,CAC/C,EACT,CAAA,CAAA,QAAA,EAAA,EAAA,YAAA,EAAmB,iBAAiB,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAA,EACvF,CAAA,CAAA,SAAA,EAAA,EAAS,IAAI,EAAC,eAAe,EAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,SAAS,EAAA,CAAG,CAClD,CACC;;;IAKd,MAAM,GAAA;AACL,QAAA,QACC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,IAAI,CAAC,iBAAiB,EAAA,EACjC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAA,EAAE,IAAI,CAAC,iBAAiB,EAAE,CAAO,EAEzD,IAAI,CAAC,MAAM,IACX,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,iBAAiB,EAAA,EAC3B,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,WAAW,CAAQ,EACpD,CAAc,CAAA,MAAA,EAAA,IAAA,EAAA,GAAA,CAAA,EACd,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,WAAW,EAAA,EAAE,IAAI,CAAC,QAAQ,CAAQ,CACzC,KAEN,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,KACrB,cACC,IAAI,EAAC,QAAQ,EACC,cAAA,EAAA,IAAI,CAAC,WAAW,KAAK,CAAC,GAAG,MAAM,GAAG,SAAS,EACzD,KAAK,EAAE;AACN,gBAAA,gBAAgB,EAAE,IAAI;AACtB,gBAAA,0BAA0B,EAAE,IAAI,CAAC,WAAW,KAAK,CAAC;aAClD,EACD,QAAQ,EAAE,IAAI,CAAC,WAAW,KAAK,CAAC,EAChC,KAAK,EAAE;AACN,gBAAA,wBAAwB,EAAE,CAAA,EAAG,IAAI,CAAC,WAAW,CAAI,EAAA,CAAA;AACjD,aAAA,EACD,OAAO,EAAE,MAAM,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAEtC,EAAA,CAAC,CACM,CACT,CAAC,CACF,EAED,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAAE,EAAA,IAAI,CAAC,iBAAiB,EAAE,CAAO,CACpD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-pagination/sd-pagination.scss?tag=sd-pagination","src/components/sd-pagination/sd-pagination.tsx"],"sourcesContent":["@import 'variables';\n\n.sd-pagination {\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n justify-content: center;\n gap: 8px;\n color: $grey_80;\n width: 100%;\n font-size: 12px;\n\n .prepend-btns {\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n gap: 8px;\n width: 60px;\n\n button {\n width: 26px;\n height: 26px;\n border: 0;\n background: none;\n\n &:hover {\n border: 1px solid $oceanblue_70;\n border-radius: 14px;\n }\n }\n }\n\n .append-btns {\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n gap: 8px;\n width: 60px;\n\n button {\n width: 26px;\n height: 26px;\n border: 0;\n background: none;\n\n &:hover {\n border: 1px solid $oceanblue_70;\n border-radius: 14px;\n }\n }\n }\n\n .pagination-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 14px;\n outline: none;\n border: none;\n cursor: pointer;\n height: 26px;\n color: $grey_80;\n width: var(--pagination-btn-width, 26px);\n\n &--selected {\n background-color: $oceanblue_70;\n color: white;\n }\n\n &:hover {\n border: 1px solid $oceanblue_70;\n }\n }\n\n &--simple {\n .pagination-info {\n line-height: 26px;\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n gap: 8px;\n .current-page,\n .last-page {\n padding: 0 2px;\n }\n }\n }\n}\n","import { Component, Prop, Event, EventEmitter, h, Fragment } from '@stencil/core';\n\nconst BUTTON_WIDTH: Record<number, number> = {\n 1: 26,\n 2: 36,\n 3: 42,\n 4: 50,\n 5: 58,\n};\n\nconst PER_PAGE = 10;\n\n@Component({\n tag: 'sd-pagination',\n styleUrl: 'sd-pagination.scss',\n})\nexport class SdPagination {\n @Prop() currentPage: number = 1;\n @Prop() lastPage: number = 1;\n @Prop() simple: boolean = false;\n\n @Event({ eventName: 'sdPageChange' }) pageChange!: EventEmitter<number>;\n\n private get paginationClasses() {\n const classes = ['sd-pagination'];\n\n if (this.simple) {\n classes.push('sd-pagination--simple');\n }\n return classes.join(' ');\n }\n\n private get pageNumbers() {\n const start = Math.floor((this.currentPage - 1) / PER_PAGE) * PER_PAGE + 1;\n const end = Math.min(start + PER_PAGE - 1, this.lastPage);\n return Array.from({ length: end - start + 1 }, (_, i) => start + i);\n }\n\n private get buttonWidth() {\n const lastPageNum = this.pageNumbers.at(-1) ?? 1;\n const maxPageLength: number = lastPageNum.toString().length;\n return BUTTON_WIDTH[maxPageLength] \|\| BUTTON_WIDTH[1];\n }\n\n private handlePageChange(page: number) {\n if (page < 1 \|\| page > this.lastPage) return;\n this.currentPage = page;\n this.pageChange.emit(page);\n }\n\n private handleGroupChange(direction: 'forward' \| 'backward') {\n const delta = direction === 'forward' ? PER_PAGE : -PER_PAGE;\n const newPage = Math.min(Math.max(this.currentPage + delta, 1), this.lastPage);\n this.handlePageChange(newPage);\n }\n\n private get isFirstGroup() {\n return this.currentPage <= PER_PAGE;\n }\n\n private get isLastGroup() {\n const startPageGroup = Math.floor((this.currentPage - 1) / PER_PAGE) * PER_PAGE + 1;\n return startPageGroup + PER_PAGE - 1 >= this.lastPage;\n }\n\n private renderPrevButtons() {\n if (this.simple) {\n if (this.currentPage <= 1) return null;\n\n return (\n <Fragment>\n <button aria-label=\"Go to first page\" onClick={() => this.handlePageChange(1)}>\n <sd-icon name=\"arrowLeftEnd\" size=\"12\" color=\"#222222\" />\n </button>\n <button\n aria-label=\"Go to previous page\"\n onClick={() => this.handlePageChange(this.currentPage - 1)}\n >\n <sd-icon name=\"arrowLeft\" size=\"12\" color=\"#222222\" />\n </button>\n </Fragment>\n );\n }\n\n if (!this.isFirstGroup) {\n return (\n <Fragment>\n <button aria-label=\"Go to first page\" onClick={() => this.handlePageChange(1)}>\n <sd-icon name=\"arrowLeftEnd\" size=\"12\" color=\"#222222\" />\n </button>\n <button\n aria-label=\"Go to previous page group\"\n onClick={() => this.handleGroupChange('backward')}\n >\n <sd-icon name=\"arrowLeft\" size=\"12\" color=\"#222222\" />\n </button>\n </Fragment>\n );\n }\n }\n\n private renderNextButtons() {\n if (this.simple) {\n if (this.currentPage >= this.lastPage) return null;\n\n return (\n <Fragment>\n <button\n aria-label=\"Go to next page\"\n onClick={() => this.handlePageChange(this.currentPage + 1)}\n >\n <sd-icon name=\"arrowRight\" size=\"12\" color=\"#222222\" />\n </button>\n <button aria-label=\"Go to last page\" onClick={() => this.handlePageChange(this.lastPage)}>\n <sd-icon name=\"arrowRightEnd\" size=\"12\" color=\"#222222\" />\n </button>\n </Fragment>\n );\n }\n\n if (!this.isLastGroup) {\n return (\n <Fragment>\n <button aria-label=\"Go to next page group\" onClick={() => this.handleGroupChange('forward')}>\n <sd-icon name=\"arrowRight\" size=\"12\" color=\"#222222\" />\n </button>\n <button aria-label=\"Go to last page\" onClick={() => this.handlePageChange(this.lastPage)}>\n <sd-icon name=\"arrowRightEnd\" size=\"12\" color=\"#222222\" />\n </button>\n </Fragment>\n );\n }\n }\n\n render() {\n return (\n <div class={this.paginationClasses}>\n <div class=\"prepend-btns\">{this.renderPrevButtons()}</div>\n\n {this.simple ? (\n <div class=\"pagination-info\">\n <span class=\"current-page\">{this.currentPage}</span>\n <span>/</span>\n <span class=\"last-page\">{this.lastPage}</span>\n </div>\n ) : (\n this.pageNumbers.map(n => (\n <button\n type=\"button\"\n aria-current={this.currentPage === n ? 'page' : undefined}\n class={{\n 'pagination-btn': true,\n 'pagination-btn--selected': this.currentPage === n,\n }}\n disabled={this.currentPage === n}\n style={{\n '--pagination-btn-width': `${this.buttonWidth}px`,\n }}\n onClick={() => this.handlePageChange(n)}\n >\n {n}\n </button>\n ))\n )}\n\n <div class=\"append-btns\">{this.renderNextButtons()}</div>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/components/{p-B0HvHSm3.js → p-DjZ8vXCq.js} RENAMED Viewed

@@ -1,15 +1,16 @@
 import { p as proxyCustomElement, c as createEvent, h, t as transformTag } from './p-CR2Jbl0B.js';
 import { B as BaseDropdownEvent, S as SelectKeyboardNavigation } from './p-CXuU38Gz.js';
-import { n as nanoid, d as defineCustomElement$6 } from './p-DQE5-tOR.js';
+import { n as nanoid } from './p-CCwNgVmC.js';
 import { d as defineCustomElement$b } from './p-lbT0o9hE.js';
 import { d as defineCustomElement$a } from './p-Cd145I-2.js';
-import { d as defineCustomElement$9 } from './p-SUihbngJ.js';
+import { d as defineCustomElement$9 } from './p-C2pN-_wD.js';
 import { d as defineCustomElement$8 } from './p-BdgLMKjb.js';
 import { d as defineCustomElement$7 } from './p-zvhzq4Sw.js';
-import { d as defineCustomElement$5 } from './p-CbEUJ3R6.js';
-import { d as defineCustomElement$4 } from './p-CXyVUgP3.js';
-import { d as defineCustomElement$3 } from './p-CYYaSMIB.js';
-import { d as defineCustomElement$2 } from './p-CYr3YYfa.js';
+import { d as defineCustomElement$6 } from './p-xfqZA_70.js';
+import { d as defineCustomElement$5 } from './p-D16-dM6f.js';
+import { d as defineCustomElement$4 } from './p-CkzAorp3.js';
+import { d as defineCustomElement$3 } from './p-Dv4dN3Y5.js';
+import { d as defineCustomElement$2 } from './p-CFHNnfIq.js';
 import { d as defineCustomElement$1 } from './p-CiNjpVRK.js';
 const sdSelectCss = () => `sd-select{display:inline-flex;flex-flow:column nowrap;height:fit-content}sd-select *:focus,sd-select *:focus-visible,sd-select *:focus-within{outline:none !important}sd-select .sd-select{width:100%}sd-select .sd-select .sd-select__trigger{padding:4px 28px 4px 12px;display:flex;width:100%;height:100%;align-items:center}sd-select .sd-select .sd-select__trigger .sd-select__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:20px;font-size:12px;font-weight:400;text-align:left}sd-select .sd-select .sd-select__trigger .sd-select__clear{margin:0 4px;width:8px;height:8px;background-color:transparent;outline:none;border:none}sd-select .sd-select .sd-select__arrow{position:absolute;top:8px;right:8px;width:12px;height:12px;color:#888888;transition:transform 0.3s ease;margin-left:8px}sd-select .sd-select .sd-select__arrow--open{transform:rotate(180deg)}`;
@@ -279,6 +280,6 @@ function defineCustomElement() {
 }
 export { SdSelect as S, defineCustomElement as d };
-//# sourceMappingURL=p-B0HvHSm3.js.map
+//# sourceMappingURL=p-DjZ8vXCq.js.map
-//# sourceMappingURL=p-B0HvHSm3.js.map
+//# sourceMappingURL=p-DjZ8vXCq.js.map

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

@@ -0,0 +1 @@

+ {"file":"p-DjZ8vXCq.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/sd-select/sd-select.scss?tag=sd-select","src/components/sd-select/sd-select.tsx"],"sourcesContent":["@import 'variables';\n@import 'extend';\n\nsd-select {\n display: inline-flex;\n flex-flow: column nowrap;\n\n height: fit-content;\n\n *:focus,\n *:focus-visible,\n *:focus-within {\n outline: none !important;\n }\n\n .sd-select {\n width: 100%;\n\n .sd-select__trigger {\n padding: 4px 28px 4px 12px;\n display: flex;\n width: 100%;\n height: 100%;\n align-items: center;\n\n .sd-select__value {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n line-height: 20px;\n font-size: 12px;\n font-weight: 400;\n text-align: left;\n }\n\n .sd-select__clear {\n margin: 0 4px;\n width: 8px;\n height: 8px;\n background-color: transparent;\n outline: none;\n border: none;\n }\n }\n\n .sd-select__arrow {\n position: absolute;\n top: 8px;\n right: 8px;\n width: 12px;\n height: 12px;\n color: $grey_65;\n transition: transform 0.3s ease;\n margin-left: 8px;\n\n &--open {\n transform: rotate(180deg);\n }\n }\n }\n}\n","import {\n Component,\n Event,\n EventEmitter,\n Prop,\n State,\n h,\n Element,\n Watch,\n Method,\n} from '@stencil/core';\nimport { BaseDropdownEvent } from '../../utils/base-dropdown-event';\nimport { SelectKeyboardNavigation } from '../../utils/select-keyboard-navigation';\nimport { SdTooltipProps } from '../sd-tooltip/sd-tooltip';\nimport { Rule } from '../../components';\nimport { nanoid } from 'nanoid/non-secure';\n\nexport interface SelectOption {\n value: string | number;\n label: string;\n disabled?: boolean;\n}\n\nexport type SelectGroupOptionType = 'group' | 'subgroup' | 'item' | 'all';\n\nexport interface SelectOptionGroup extends SelectOption {\n type: SelectGroupOptionType;\n parent?: string;\n}\n\nexport interface SelectStyleProps {\n containerStyle?: { [key: string]: string };\n triggerStyle?: { [key: string]: string };\n dropdownStyle?: { [key: string]: string };\n optionStyle?: { [key: string]: string };\n labelStyle?: { [key: string]: string };\n}\n\nexport interface SelectEvents {\n sdUpdate: {\n value: string | number | null;\n option: SelectOption | null;\n };\n dropDownShow: { isOpen: boolean };\n}\n\nexport interface SelectMultipleEvents extends Pick<SelectEvents, 'dropDownShow' | 'dropDownShow'> {\n sdUpdate: SelectOption[] | null;\n}\n\n@Component({\n tag: 'sd-select',\n styleUrl: 'sd-select.scss',\n})\nexport class SdSelect extends BaseDropdownEvent {\n @Element() el!: HTMLElement;\n\n // props\n @Prop({ mutable: true }) value: string | number | null = null;\n @Prop({ mutable: true }) options: SelectOption[] = [];\n @Prop() placeholder: string = '선택';\n @Prop() optionPlaceholder: string = '옵션이 없습니다.';\n @Prop() width: string = '200px';\n @Prop() dropdownHeight: string = '260px';\n @Prop() autoFocus: boolean = false;\n @Prop() disabled: boolean = false;\n @Prop() clearable: boolean = false;\n @Prop() searchable: boolean = false;\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 // props - form\n @Prop() rules?: Rule[] = [];\n @Prop() error?: boolean = false;\n\n // props - custom slots\n @Prop() optionRenderer?: (option: SelectOption, index: number, isSelected: boolean) => any;\n\n // states\n @State() isOpen: boolean = false;\n @State() itemIndex: number = -1;\n @State() isScrolled: boolean = false;\n\n // events\n @Event({ eventName: 'sdUpdate' }) update?: EventEmitter<SelectEvents['sdUpdate']>;\n @Event({ eventName: 'sdDropDownShow' }) dropDownShow?: EventEmitter<SelectEvents['dropDownShow']>;\n\n private selectRef?: HTMLElement;\n private triggerRef?: HTMLElement;\n private formField?: HTMLSdFieldElement;\n private filteredOptions = this.options;\n private dropDownWidth: string = this.width;\n name = nanoid();\n\n @Method()\n async sdOpen() {\n this.isOpen = true;\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 @Watch('isOpen')\n async isOpenChanged() {\n // Base class의 이벤트 관리 호출 - 다른 select와의 이벤트 충돌 방지\n this.onDropdownToggle(this.isOpen);\n this.dropDownShow?.emit({ isOpen: this.isOpen });\n\n if (this.isOpen === false) {\n await this.formField?.sdValidate();\n }\n }\n\n componentWillLoad() {\n this.initializeEvent(); // global dropdown Manager에 등록 + 이벤트 핸들러 초기화\n }\n\n componentDidLoad() {\n if (this.autoFocus) {\n this.selectRef?.focus();\n }\n }\n\n // render 이후 label을 제외한 trigger의 너비를 기준으로 dropdown 너비 설정\n componentDidRender() {\n const trigger = this.triggerRef;\n const rect = trigger?.getBoundingClientRect();\n this.dropDownWidth = rect?.width ? `${rect.width}px` : this.width;\n }\n\n disconnectedCallback() {\n this.cleanupEvent(); // global dropdown Manager에서 제거 + 이벤트 정리\n }\n\n protected handleDocumentClick(event: Event): void {\n if (!this.selectRef?.contains(event.target as Node)) {\n this.isOpen = false;\n }\n }\n\n protected handleDocumentKeydown(keyboardEvent: KeyboardEvent): void {\n keyboardEvent.stopPropagation();\n const targetKey = ['ArrowDown', 'ArrowUp', 'Enter', 'Escape'];\n if (!targetKey.includes(keyboardEvent.key)) return;\n\n keyboardEvent.preventDefault();\n switch (keyboardEvent.key) {\n case 'ArrowDown':\n case 'ArrowUp':\n const keyboardNavigation = new SelectKeyboardNavigation(this.searchable, this.filteredOptions);\n const nextIndex = keyboardNavigation.getNextIndex(this.itemIndex, keyboardEvent.key);\n this.itemIndex = nextIndex;\n break;\n case 'Enter':\n const selectedOption = this.filteredOptions[this.itemIndex];\n if (selectedOption && !selectedOption.disabled) {\n this.value = selectedOption.value;\n this.isOpen = false;\n }\n break;\n case 'Escape':\n this.isOpen = false;\n break;\n }\n }\n\n private getSelectedOption(): SelectOption | undefined {\n return this.options.find(option => option.value === this.value);\n }\n\n closeDropdown() {\n this.isOpen = false;\n }\n\n handleTriggerClick = (event: Event) => {\n event.stopPropagation();\n\n if (!this.disabled) {\n this.isOpen = !this.isOpen;\n this.dropDownShow?.emit({ isOpen: this.isOpen });\n }\n };\n\n handleOptionClick = (detail: { option: SelectOption; event: Event }) => {\n const { option, event } = detail;\n event.stopPropagation();\n\n if (!option.disabled) {\n this.value = option.value;\n this.isOpen = false;\n\n const selectedOption = this.getSelectedOption();\n this.update?.emit({ value: selectedOption?.value || null, option: selectedOption || null });\n }\n };\n\n render() {\n return (\n <sd-field\n label={this.label}\n name={this.name}\n rules={this.rules}\n error={this.error}\n disabled={this.disabled}\n useLabelRequired={this.useLabelRequired}\n insideLabel={this.insideLabel}\n labelTooltip={this.labelTooltip}\n labelTooltipProps={this.labelTooltipProps}\n ref={el => (this.formField = el)}\n >\n <div\n class={{\n 'sd-select': true,\n 'sd-select--disabled': this.disabled,\n 'sd-select--error': !!this.error,\n 'sd-select--label': !!this.label,\n }}\n ref={el => (this.selectRef = el)}\n >\n {this.renderTrigger()}\n {this.renderDropdown()}\n </div>\n </sd-field>\n );\n }\n\n private renderTrigger() {\n const selectedOption = this.getSelectedOption();\n return (\n <div\n class=\"sd-select__trigger\"\n tabindex={this.disabled ? -1 : 0}\n onClick={this.handleTriggerClick}\n ref={el => (this.triggerRef = el)}\n >\n <span class=\"sd-select__value\">{selectedOption ? selectedOption.label : this.placeholder}</span>\n {this.clearable && selectedOption && !this.disabled && (\n <sd-icon\n key=\"clear-icon\"\n name=\"close\"\n size={10}\n color=\"#888\"\n class=\"sd-select__clear\"\n onClick={async event => {\n event.stopPropagation();\n this.value = null;\n await this.formField?.sdValidate();\n }}\n ></sd-icon>\n )}\n\n <sd-icon\n key=\"arrow-icon\"\n name=\"arrowDown\"\n color=\"#888\"\n class={{ 'sd-select__arrow': true, 'sd-select__arrow--open': this.isOpen }}\n ></sd-icon>\n </div>\n );\n }\n\n private renderDropdown() {\n if (this.isOpen === false) return null;\n\n const parentRef = (this.selectRef?.querySelector('.sd-select__trigger') ||\n this.selectRef) as HTMLElement;\n\n return (\n <sd-portal open={this.isOpen} parentRef={parentRef} onSdClose={this.closeDropdown}>\n <sd-select-dropdown\n value={this.value}\n options={this.options}\n itemIndex={this.itemIndex}\n width={this.dropDownWidth}\n dropdownHeight={this.dropdownHeight}\n searchable={this.searchable}\n optionPlaceholder={this.optionPlaceholder}\n onSdOptionClick={({ detail }) => this.handleOptionClick(detail)}\n onSdOptionFiltered={({ detail }) => (this.filteredOptions = detail)}\n ></sd-select-dropdown>\n </sd-portal>\n );\n }\n}\n"],"version":3}

package/dist/components/{p-CYYaSMIB.js → p-Dv4dN3Y5.js} RENAMED Viewed

@@ -36,7 +36,7 @@ const SdSelectOption = /*@__PURE__*/ proxyCustomElement(class SdSelectOption ext
         }
     };
     render() {
-        return (h("div", { key: '59df3cd1bfc1195025ae829999ff882f369f40f4', class: {
+        return (h("div", { key: 'a4fcca24b0bdde4f4665585c6cede84bd3b64d59', 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-CYYaSMIB.js.map
+//# sourceMappingURL=p-Dv4dN3Y5.js.map
-//# sourceMappingURL=p-CYYaSMIB.js.map
+//# sourceMappingURL=p-Dv4dN3Y5.js.map

package/dist/components/{p-CYYaSMIB.js.map → p-Dv4dN3Y5.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-~~CYYaSMIB~~.js","mappings":";;;;AAAA,MAAM,iBAAiB,GAAG,MAAM,CAAC,8zBAA8zB,CAAC;;MCOn1B,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,CACC,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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 { Component, Element, Event, EventEmitter, h, Method, Prop, State } 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 <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 );\n }\n}\n"],"version":3}
1	+ {"file":"p-Dv4dN3Y5.js","mappings":";;;;AAAA,MAAM,iBAAiB,GAAG,MAAM,CAAC,8zBAA8zB,CAAC;;MCOn1B,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,CACC,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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 { Component, Element, Event, EventEmitter, h, Method, Prop, State } 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 <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 );\n }\n}\n"],"version":3}

package/dist/components/{p-DQE5-tOR.js → p-xfqZA_70.js} RENAMED Viewed

@@ -1,22 +1,11 @@
 import { p as proxyCustomElement, H, c as createEvent, h, t as transformTag } from './p-CR2Jbl0B.js';
+import { n as nanoid } from './p-CCwNgVmC.js';
 import { d as defineCustomElement$5 } from './p-lbT0o9hE.js';
-import { d as defineCustomElement$4 } from './p-SUihbngJ.js';
+import { d as defineCustomElement$4 } from './p-C2pN-_wD.js';
 import { d as defineCustomElement$3 } from './p-BdgLMKjb.js';
 import { d as defineCustomElement$2 } from './p-zvhzq4Sw.js';
 import { d as defineCustomElement$1 } from './p-CiNjpVRK.js';
-/* @ts-self-types="./index.d.ts" */
-let urlAlphabet =
-  'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict';
-let nanoid = (size = 21) => {
-  let id = '';
-  let i = size | 0;
-  while (i--) {
-    id += urlAlphabet[(Math.random() * 64) | 0];
-  }
-  return id
-};
 const sdInputCss = () => `sd-icon{display:inline-block;line-height:0}sd-icon .sd-icon--rotate-90{transform:rotate(90deg)}sd-icon .sd-icon--rotate-180{transform:rotate(180deg)}sd-icon .sd-icon--rotate-270{transform:rotate(270deg)}.sd-date-picker{width:100%;display:inline-block}.sd-date-picker .sd-date-picker--disabled .date-icon{cursor:not-allowed !important;color:#888888 !important}.sd-date-picker .sd-date-picker__input{text-align:center !important}.sd-date-picker__menu{width:304px;box-sizing:border-box;border-radius:8px;padding:24px 19px;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.2);background:white}.sd-date-picker__menu .sd-date-picker__header{display:flex;flex-flow:row nowrap;align-items:center;gap:20px;font-size:14px;padding:0 5px;height:24px;line-height:24px}.sd-date-picker__menu .sd-date-picker__header .year-nav,.sd-date-picker__menu .sd-date-picker__header .month-nav{display:flex;flex-flow:row nowrap;align-items:center;gap:12px}.sd-date-picker__menu .sd-date-picker__header .year-nav button,.sd-date-picker__menu .sd-date-picker__header .month-nav button{background:none;border:none;cursor:pointer;margin:0;padding:0}.sd-date-picker__menu .sd-date-picker__header .year-nav__current{width:40px;text-align:center}.sd-date-picker__menu .sd-date-picker__header .month-nav__current{width:100px;text-align:center}.sd-date-picker__menu .sd-date-picker__days{margin-top:8px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr));column-gap:10px;padding:0 5px}.sd-date-picker__menu .sd-date-picker__days .day{width:28px;height:20px;font-size:12px;line-height:20px;text-align:center;color:#888888}.sd-date-picker__menu .sd-date-picker__body{margin-top:12px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr))}sd-date-range-picker{width:fit-content;display:inline-flex}sd-date-range-picker .sd-date-range-picker--disabled .date-icon{cursor:not-allowed !important;color:#888888 !important}sd-date-range-picker .sd-date-range-picker--disabled .sd-input__native{color:#888888 !important}sd-date-range-picker .sd-field .sd-field__control{min-width:210px}sd-date-range-picker .sd-field .sd-input__native{margin-left:17px !important}.sd-date-range-picker__menu{width:609px;box-sizing:border-box;border-radius:8px;padding:24px 19px;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.2);background:white}.sd-date-range-picker__menu .sd-date-range-picker__header{margin-bottom:16px;display:flex;flex-flow:row nowrap;align-items:center;justify-content:center}.sd-date-range-picker__menu .sd-date-range-picker__header .header-label{margin:0 12px;width:40px;text-align:center;font-size:14px;line-height:24px}.sd-date-range-picker__menu .sd-date-range-picker__body{display:flex;flex-flow:row nowrap;align-items:stretch;gap:19px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container{width:266px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-header{width:100%;height:24px;line-height:24px;font-size:14px;text-align:center;position:relative;padding:0 5px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-header button{position:absolute;top:50%;transform:translateY(-50%)}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-header button.header-button-prev{left:5px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-header button.header-button-next{right:5px;left:auto}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-days{padding:0 5px;margin-top:8px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr));column-gap:10px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-days .day{width:28px;height:20px;font-size:12px;line-height:20px;text-align:center;color:#888888}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-body{margin-top:12px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr))}.sd-date-range-picker__menu .sd-date-range-picker__body .separator{width:1px;background-color:#d8d8d8}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-text-fill-color:#000;-webkit-box-shadow:0 0 0px 1000px #fff inset;box-shadow:0 0 0px 1000px #fff inset;transition:background-color 5000s ease-in-out 0s}input:autofill,input:autofill:hover,input:autofill:focus,input:autofill:active{-webkit-text-fill-color:#000;-webkit-box-shadow:0 0 0px 1000px #fff inset;box-shadow:0 0 0px 1000px #fff inset;transition:background-color 5000s ease-in-out 0s}sd-input{display:inline-flex}sd-input .sd-input__content{width:100%;height:100%;display:flex;flex-flow:row nowrap;align-items:center;color:#333333;font-size:12px;line-height:20px;padding:0 8px}sd-input .sd-input__content .sd-input__native{width:100%;height:100%;border:none;outline:none;background:transparent}sd-input .sd-input__content .sd-input__native[disabled]{cursor:not-allowed;color:#888888}sd-input .sd-input__content .sd-input__native::placeholder{color:#aaaaaa}`;
 const SdInput = /*@__PURE__*/ proxyCustomElement(class SdInput extends H {
@@ -194,7 +183,7 @@ function defineCustomElement() {
     } });
 }
-export { SdInput as S, defineCustomElement as d, nanoid as n };
-//# sourceMappingURL=p-DQE5-tOR.js.map
+export { SdInput as S, defineCustomElement as d };
+//# sourceMappingURL=p-xfqZA_70.js.map
-//# sourceMappingURL=p-DQE5-tOR.js.map
+//# sourceMappingURL=p-xfqZA_70.js.map

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

@@ -0,0 +1 @@

+ {"file":"p-xfqZA_70.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-input/sd-input.scss?tag=sd-input","src/components/sd-input/sd-input.tsx"],"sourcesContent":["@import 'variables';\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 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 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/sd-date-picker.js CHANGED Viewed

@@ -2,11 +2,11 @@ import { p as proxyCustomElement, H, c as createEvent, h, t as transformTag } fr
 import { u as useDatePicker, t as today } from './p-DTrMR0rx.js';
 import { d as defineCustomElement$9 } from './p-lbT0o9hE.js';
 import { d as defineCustomElement$8 } from './p-DhrXHiHi.js';
-import { d as defineCustomElement$7 } from './p-SUihbngJ.js';
+import { d as defineCustomElement$7 } from './p-C2pN-_wD.js';
 import { d as defineCustomElement$6 } from './p-BdgLMKjb.js';
 import { d as defineCustomElement$5 } from './p-zvhzq4Sw.js';
-import { d as defineCustomElement$4 } from './p-DQE5-tOR.js';
-import { d as defineCustomElement$3 } from './p-CbEUJ3R6.js';
+import { d as defineCustomElement$4 } from './p-xfqZA_70.js';
+import { d as defineCustomElement$3 } from './p-D16-dM6f.js';
 import { d as defineCustomElement$2 } from './p-CiNjpVRK.js';
 const sdDatePickerCss = () => `.sd-date-picker.sc-sd-date-picker{width:100%;display:inline-block}.sd-date-picker.sc-sd-date-picker .sd-date-picker--disabled.sc-sd-date-picker .date-icon.sc-sd-date-picker{cursor:not-allowed !important;color:#888888 !important}.sd-date-picker.sc-sd-date-picker .sd-date-picker__input.sc-sd-date-picker{text-align:center !important}.sd-date-picker__menu.sc-sd-date-picker{width:304px;box-sizing:border-box;border-radius:8px;padding:24px 19px;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.2);background:white}.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__header.sc-sd-date-picker{display:flex;flex-flow:row nowrap;align-items:center;gap:20px;font-size:14px;padding:0 5px;height:24px;line-height:24px}.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__header.sc-sd-date-picker .year-nav.sc-sd-date-picker,.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__header.sc-sd-date-picker .month-nav.sc-sd-date-picker{display:flex;flex-flow:row nowrap;align-items:center;gap:12px}.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__header.sc-sd-date-picker .year-nav.sc-sd-date-picker button.sc-sd-date-picker,.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__header.sc-sd-date-picker .month-nav.sc-sd-date-picker button.sc-sd-date-picker{background:none;border:none;cursor:pointer;margin:0;padding:0}.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__header.sc-sd-date-picker .year-nav__current.sc-sd-date-picker{width:40px;text-align:center}.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__header.sc-sd-date-picker .month-nav__current.sc-sd-date-picker{width:100px;text-align:center}.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__days.sc-sd-date-picker{margin-top:8px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr));column-gap:10px;padding:0 5px}.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__days.sc-sd-date-picker .day.sc-sd-date-picker{width:28px;height:20px;font-size:12px;line-height:20px;text-align:center;color:#888888}.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__body.sc-sd-date-picker{margin-top:12px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr))}`;

package/dist/components/sd-date-range-picker.js CHANGED Viewed

@@ -2,11 +2,11 @@ import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment, t as tr
 import { u as useDatePicker, t as today } from './p-DTrMR0rx.js';
 import { d as defineCustomElement$9 } from './p-lbT0o9hE.js';
 import { d as defineCustomElement$8 } from './p-DhrXHiHi.js';
-import { d as defineCustomElement$7 } from './p-SUihbngJ.js';
+import { d as defineCustomElement$7 } from './p-C2pN-_wD.js';
 import { d as defineCustomElement$6 } from './p-BdgLMKjb.js';
 import { d as defineCustomElement$5 } from './p-zvhzq4Sw.js';
-import { d as defineCustomElement$4 } from './p-DQE5-tOR.js';
-import { d as defineCustomElement$3 } from './p-CbEUJ3R6.js';
+import { d as defineCustomElement$4 } from './p-xfqZA_70.js';
+import { d as defineCustomElement$3 } from './p-D16-dM6f.js';
 import { d as defineCustomElement$2 } from './p-CiNjpVRK.js';
 const addDays = (inputDate, days) => {

package/dist/components/sd-field.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { S as SdField$1, d as defineCustomElement$1 } from './p-SUihbngJ.js';
+import { S as SdField$1, d as defineCustomElement$1 } from './p-C2pN-_wD.js';
 const SdField = SdField$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/sd-guide.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, h, t as transformTag } from './p-CR2Jbl0B.js';
 import { d as defineCustomElement$4 } from './p-lbT0o9hE.js';
 import { d as defineCustomElement$3 } from './p-zvhzq4Sw.js';
-import { d as defineCustomElement$2 } from './p-CbEUJ3R6.js';
+import { d as defineCustomElement$2 } from './p-D16-dM6f.js';
 const sdGuideCss = () => `@charset "UTF-8";sd-button{display:inline-flex;width:fit-content;height:fit-content}.sd-button{text-decoration:none;cursor:pointer;border-radius:4px;transition:all 0.2s ease-in-out;position:relative;overflow:hidden;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;border:none}.sd-button--xs{padding:0 8px;font-size:12px;font-weight:500;line-height:20px;min-height:24px}.sd-button--sm{padding:0 12px;font-size:12px;font-weight:500;line-height:20px;min-height:28px}.sd-button--md{padding:0 20px;font-size:16px;font-weight:500;line-height:26px;min-height:34px}.sd-button--lg{padding:0 28px;font-size:18px;font-weight:500;line-height:30px;min-height:62px}.sd-button--primary{background-color:var(--button-color);color:white;transition:filter 0.2s ease}.sd-button--primary::before{content:"";position:absolute;inset:0;background:#000000;opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--primary:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.25}.sd-button--outline{background:white;border:1px solid var(--button-color);color:var(--button-color)}.sd-button--outline::before{content:"";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--outline:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--outline .sd-button__content{position:relative;z-index:1}.sd-button--ghost{background-color:transparent;color:var(--button-color);border-color:transparent}.sd-button--ghost::before{content:"";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--ghost:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--ghost .sd-button__content{position:relative;z-index:1}.sd-button--disabled{border:1px solid #cccccc;background:#e1e1e1;color:#888888;cursor:not-allowed !important}.sd-button--icon-only{padding:0;width:fit-content;height:fit-content;aspect-ratio:1/1}.sd-button--no-hover:hover::before{opacity:0 !important}.sd-button .sd-button__content{display:inline-flex;align-items:center;justify-content:center;gap:4px;z-index:1;font-weight:500}sd-guide{display:inline-flex;align-items:center;height:fit-content;width:fit-content}sd-guide .sd-guide{display:inline-flex;align-items:center;height:fit-content;width:fit-content}sd-guide .sd-guide .sd-button{padding:0 16px 0 12px;border-radius:16px;color:#333333 !important;display:flex;align-items:center;transition:none}sd-guide .sd-guide .sd-button .sd-button__content{color:#333333 !important}sd-guide .sd-guide .sd-button .sd-button__content .sd-button__label{color:#333333 !important;margin-left:4px}sd-guide .sd-guide--active .sd-button{border:1px solid #00973c}sd-guide .sd-guide--active .sd-button .sd-button__content .sd-button__label{color:white !important}.sd-guide__popup{position:relative;padding:20px 32px;border-radius:8px;box-shadow:4px 4px 24px 4px rgba(0, 0, 0, 0.1);background:white}.sd-guide__popup>.sd-guide__popup__close{position:absolute;top:12px;right:12px}.sd-guide__popup__header{display:flex;align-items:center;gap:8px;margin-bottom:12px}.sd-guide__popup__header .sd-guide__popup__title{margin-top:0;font-size:16px;font-weight:700;line-height:26px;color:#333333}.sd-guide__popup__list{width:100%;padding:0;margin:0}.sd-guide__popup__list__item{display:flex;width:100%;align-items:start;list-style:none;color:#333333;font-size:12px;font-weight:400}.sd-guide__popup__list__item p{width:100%;padding:0;margin:0;word-wrap:break-word;word-break:break-word;white-space:normal;overflow-wrap:break-word;min-width:0}.sd-guide__popup__list__item::before{display:block;content:"-";width:6px;color:#333333;font-size:12px;font-weight:400;margin-left:10px;margin-right:12px;flex-shrink:0}.sd-guide__popup__list__item--depth-2::before{content:"•"}.sd-guide__popup__list__item--depth-2{padding-left:26px}`;

package/dist/components/sd-input.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { S as SdInput$1, d as defineCustomElement$1 } from './p-DQE5-tOR.js';
+import { S as SdInput$1, d as defineCustomElement$1 } from './p-xfqZA_70.js';
 const SdInput = SdInput$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/sd-modal-card.js CHANGED Viewed

@@ -19,13 +19,7 @@ const SdModalCard$1 = /*@__PURE__*/ proxyCustomElement(class SdModalCard extends
     useCloseButton = true;
     modalTitle = 'normal';
     buttonFlexDirection = 'row';
-    buttonProps = [
-        {
-            label: '확인',
-            color: 'grey_80',
-            size: 'md',
-        },
-    ];
+    buttonProps;
     message = [];
     modalClass = '';
     close;
@@ -49,7 +43,7 @@ const SdModalCard$1 = /*@__PURE__*/ proxyCustomElement(class SdModalCard extends
         return modalClass;
     }
     render() {
-        return (h("div", { key: '763beaa5cb19d7717ddf0a713ab5db30dee806f8', class: this.getModalClass, style: { '--point-color': this.pointColor } }, this.useCloseButton && (h("sd-icon", { key: '6b8f9326515d246f4552eceb73186022bc6ed7d7', class: "sd-modal-card__close-button", name: "close", size: "20", color: "grey_65", onClick: () => this.close.emit() })), this.type !== 'normal' && (h("sd-icon", { key: '170e999a39f8552d35714689adb75ae1aa3c1c39', class: "sd-modal-card__icon", name: this.type === 'info' ? 'notificationOutline' : 'warningOutline', size: "32", color: this.type === 'info' ? 'brilliantblue_75' : 'red_75' })), h("h2", { key: '3be3ed2fe087983cf0fa10f1b1e757110ac4983d', class: "sd-modal-card__title" }, this.modalTitle), h("slot", { key: 'f6d282734446c3a61362b1a50631595b5522f6df' }, h("div", { key: '3dd7a418947511dcd19e4c0d2dcb5cd65db6aad2', class: `sd-modal-card__message-container` }, this.message.map(msg => (h("p", { class: "sd-modal-card__message" }, msg))))), h("div", { key: '400478d5e06528b5c08fac83519a993d37a6204e', class: `sd-modal-card__button-container flex-${this.buttonFlexDirection}` }, this.buttonProps.map(button => (h("sd-button", { class: 'sd-modal-card__button', variant: button.variant ? button.variant : 'outline', label: button.label, color: button.color, size: button.size, onClick: () => !button.type || button.type === 'confirm' ? this.confirm.emit() : this.close.emit(), ...(button.class && { class: button.class }) }))))));
+        return (h("div", { key: '7374943ac733d43b7d6c027f074c2dfdfd859e51', class: this.getModalClass, style: { '--point-color': this.pointColor } }, this.useCloseButton && (h("sd-icon", { key: '75fd15b1241d8b4829372377a8212556828ef2f9', class: "sd-modal-card__close-button", name: "close", size: "20", color: "grey_65", onClick: () => this.close.emit() })), this.type !== 'normal' && (h("sd-icon", { key: '54619f342718bb9dd0589d5963ad390f1b792843', class: "sd-modal-card__icon", name: this.type === 'info' ? 'notificationOutline' : 'warningOutline', size: "32", color: this.type === 'info' ? 'brilliantblue_75' : 'red_75' })), h("h2", { key: '4197761d82baa632c67ff238388aa3162592d9ed', class: "sd-modal-card__title" }, this.modalTitle), h("slot", { key: '586ee3e295b2091d657d54f17945d4ac12541932' }, h("div", { key: 'dad5890bd4d0dfcfca45811ae58fe3e67d29e226', class: `sd-modal-card__message-container` }, this.message.map(msg => (h("p", { class: "sd-modal-card__message" }, msg))))), h("div", { key: '3af309aaa37574e5a3e74cbb3c9047216c1b74a8', class: `sd-modal-card__button-container flex-${this.buttonFlexDirection}` }, this.buttonProps?.map(button => (h("sd-button", { class: 'sd-modal-card__button', variant: button.variant ? button.variant : 'outline', label: button.label, color: button.color, size: button.size, onClick: () => !button.type || button.type === 'confirm' ? this.confirm.emit() : this.close.emit(), ...(button.class && { class: button.class }) }))))));
     }
     static get style() { return sdModalCardCss(); }
 }, [772, "sd-modal-card", {

package/dist/components/sd-modal-card.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"sd-modal-card.js","mappings":";;;;;AAAA,MAAM,cAAc,GAAG,MAAM,CAAC,m8BAAm8B,CAAC;;MCiBr9BA,aAAW,iBAAAC,kBAAA,CAAA,MAAA,WAAA,SAAAC,CAAA,CAAA;;;;;;;;;IACf,IAAI,GAAkC,MAAM;IAC5C,MAAM,GAAuC,QAAQ;IACrD,cAAc,GAAY,IAAI;IAC9B,UAAU,GAAW,QAAQ;IAC7B,mBAAmB,GAAqB,KAAK;AAC7C,IAAA,WAAW~~,GAA6B~~;~~AAC/C~~,~~QAAA;AACC,YAAA,KAAK,EAAE,IAAI;AACX,YAAA,KAAK,EAAE,SAAS;AAChB,YAAA,IAAI,EAAE,IAAI;AACV,SAAA;KACD;IACO,~~OAAO,GAAa,EAAE;IAE9B,UAAU,GAAW,EAAE;AAEU,IAAA,KAAK;AACH,IAAA,OAAO;AAE1C,IAAA,IAAY,UAAU,GAAA;AACrB,QAAA,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE;AAC3B,YAAA,OAAO,SAAS;;AAGjB,QAAA,QAAQ,IAAI,CAAC,MAAM;AAClB,YAAA,KAAK,UAAU;AACd,gBAAA,OAAO,YAAY,CAAC,kBAAkB,CAAC;AACxC,YAAA,KAAK,UAAU;AACd,gBAAA,OAAO,YAAY,CAAC,QAAQ,CAAC;AAC9B,YAAA;AACC,gBAAA,OAAO,YAAY,CAAC,SAAS,CAAC;;;AAIjC,IAAA,IAAY,aAAa,GAAA;AACxB,QAAA,IAAI,UAAU,GAAG,CAAA,cAAA,EAAiB,IAAI,CAAC,UAAU,EAAE;QACnD,UAAU,IAAI,GAAG,GAAG,CAAA,cAAA,EAAiB,IAAI,CAAC,MAAM,EAAE;AAClD,QAAA,OAAO,UAAU;;IAGlB,MAAM,GAAA;AACL,QAAA,QACC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,KAAK,EAAE,EAAE,eAAe,EAAE,IAAI,CAAC,UAAU,EAAE,EAAA,EACzE,IAAI,CAAC,cAAc,KACnB,gEACC,KAAK,EAAC,6BAA6B,EACnC,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,IAAI,EACT,KAAK,EAAC,SAAS,EACf,OAAO,EAAE,MAAM,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,GAC/B,CACF,EACA,IAAI,CAAC,IAAI,KAAK,QAAQ,KACtB,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACC,KAAK,EAAC,qBAAqB,EAC3B,IAAI,EAAE,IAAI,CAAC,IAAI,KAAK,MAAM,GAAG,qBAAqB,GAAG,gBAAgB,EACrE,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,IAAI,CAAC,IAAI,KAAK,MAAM,GAAG,kBAAkB,GAAG,QAAQ,EAAA,CAC1D,CACF,EACD,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAI,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,UAAU,CAAM,EACvD,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,kCAAkC,EAC5C,EAAA,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,KACpB,CAAG,CAAA,GAAA,EAAA,EAAA,KAAK,EAAC,wBAAwB,EAAE,EAAA,GAAG,CAAK,CAC3C,CAAC,CACG,CACA,EACP,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAwC,qCAAA,EAAA,IAAI,CAAC,mBAAmB,EAAE,EAAA,EAC5E,IAAI,CAAC,WAAW,~~CAAC~~,GAAG,CAAC,MAAM,~~KAC3B~~,iBACC,KAAK,EAAE,uBAAuB,EAC9B,OAAO,EAAE,MAAM,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,GAAG,SAAS,EACpD,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,IAAI,EAAE,MAAM,CAAC,IAAI,EACjB,OAAO,EAAE,MACR,CAAC,MAAM,CAAC,IAAI,IAAI,MAAM,CAAC,IAAI,KAAK,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,MAE/E,MAAM,CAAC,KAAK,IAAI,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,CAAC,EACjC,CAAA,CACb,CAAC,CACG,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SdModalCard","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-modal-card/sd-modal-card.scss?tag=sd-modal-card","src/components/sd-modal-card/sd-modal-card.tsx"],"sourcesContent":["@import 'variables';\n\nsd-modal-card {\n display: block;\n .sd-modal-card {\n position: relative;\n padding: 40px 32px;\n border-radius: 8px;\n box-shadow: 4px 4px 24px 4px rgba(0, 0, 0, 0.2);\n background: white;\n\n &__close-button {\n position: absolute;\n top: 16px;\n right: 16px;\n cursor: pointer;\n }\n\n sd-icon.sd-modal-card__icon {\n display: block;\n width: 32px;\n height: 32px;\n margin: 0 auto 12px auto;\n }\n\n &__title {\n color: var(--point-color);\n font-size: 18px;\n font-weight: 700;\n line-height: 30px;\n text-align: center;\n margin: 0 0 20px 0;\n }\n\n &__message {\n color: $grey_95;\n font-weight: 400;\n font-size: 12px;\n line-height: 22px;\n text-align: center;\n margin: 0;\n }\n\n &__button-container {\n display: flex;\n margin: 32px auto 0 auto;\n justify-content: center;\n align-items: center;\n gap: 8px;\n &.flex-column {\n flex-direction: column;\n }\n button.sd-modal-card__button {\n width: 89px;\n }\n }\n }\n}\n","import { Component, Event, EventEmitter, Prop, h } from '@stencil/core';\nimport { resolveColor } from '../../utils/color';\nimport { ButtonSize, ButtonVariant } from '../sd-button/sd-button';\n\nexport interface SdModalCardButtonProps {\n label: string;\n color: string;\n size: ButtonSize;\n variant?: ButtonVariant;\n class?: string;\n type?: 'confirm' \| 'cancel';\n}\n\n@Component({\n tag: 'sd-modal-card',\n styleUrl: 'sd-modal-card.scss',\n})\nexport class SdModalCard {\n @Prop() type: 'info' \| 'warning' \| 'normal' = 'info';\n @Prop() system: 'normal' \| 'positive' \| 'negative' = 'normal';\n @Prop() useCloseButton: boolean = true;\n @Prop() modalTitle: string = 'normal';\n @Prop() buttonFlexDirection: 'row' \| 'column' = 'row';\n @Prop() buttonProps: SdModalCardButtonProps[] ~~= [\n {\n label: '확인',\n color: 'grey_80',\n size: 'md',\n },\n ]~~;\n @Prop() message: string[] = [];\n @Prop()\n modalClass: string = '';\n\n @Event({ eventName: 'sdClose' }) close!: EventEmitter<MouseEvent>;\n @Event({ eventName: 'sdConfirm' }) confirm!: EventEmitter<MouseEvent>;\n\n private get pointColor(): string {\n if (this.type !== 'normal') {\n return 'grey_95';\n }\n\n switch (this.system) {\n case 'positive':\n return resolveColor('brilliantblue_75');\n case 'negative':\n return resolveColor('red_75');\n default:\n return resolveColor('grey_95');\n }\n }\n\n private get getModalClass(): string {\n let modalClass = `sd-modal-card ${this.modalClass}`;\n modalClass += ' ' + `sd-modal-card-${this.system}`;\n return modalClass;\n }\n\n render() {\n return (\n <div class={this.getModalClass} style={{ '--point-color': this.pointColor }}>\n {this.useCloseButton && (\n <sd-icon\n class=\"sd-modal-card__close-button\"\n name=\"close\"\n size=\"20\"\n color=\"grey_65\"\n onClick={() => this.close.emit()}\n />\n )}\n {this.type !== 'normal' && (\n <sd-icon\n class=\"sd-modal-card__icon\"\n name={this.type === 'info' ? 'notificationOutline' : 'warningOutline'}\n size=\"32\"\n color={this.type === 'info' ? 'brilliantblue_75' : 'red_75'}\n />\n )}\n <h2 class=\"sd-modal-card__title\">{this.modalTitle}</h2>\n <slot>\n <div class={`sd-modal-card__message-container`}>\n {this.message.map(msg => (\n <p class=\"sd-modal-card__message\">{msg}</p>\n ))}\n </div>\n </slot>\n <div class={`sd-modal-card__button-container flex-${this.buttonFlexDirection}`}>\n {this.buttonProps.map(button => (\n <sd-button\n class={'sd-modal-card__button'}\n variant={button.variant ? button.variant : 'outline'}\n label={button.label}\n color={button.color}\n size={button.size}\n onClick={() =>\n !button.type \|\| button.type === 'confirm' ? this.confirm.emit() : this.close.emit()\n }\n {...(button.class && { class: button.class })}\n ></sd-button>\n ))}\n </div>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"sd-modal-card.js","mappings":"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","names":["SdModalCard","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-modal-card/sd-modal-card.scss?tag=sd-modal-card","src/components/sd-modal-card/sd-modal-card.tsx"],"sourcesContent":["@import 'variables';\n\nsd-modal-card {\n display: block;\n .sd-modal-card {\n position: relative;\n padding: 40px 32px;\n border-radius: 8px;\n box-shadow: 4px 4px 24px 4px rgba(0, 0, 0, 0.2);\n background: white;\n\n &__close-button {\n position: absolute;\n top: 16px;\n right: 16px;\n cursor: pointer;\n }\n\n sd-icon.sd-modal-card__icon {\n display: block;\n width: 32px;\n height: 32px;\n margin: 0 auto 12px auto;\n }\n\n &__title {\n color: var(--point-color);\n font-size: 18px;\n font-weight: 700;\n line-height: 30px;\n text-align: center;\n margin: 0 0 20px 0;\n }\n\n &__message {\n color: $grey_95;\n font-weight: 400;\n font-size: 12px;\n line-height: 22px;\n text-align: center;\n margin: 0;\n }\n\n &__button-container {\n display: flex;\n margin: 32px auto 0 auto;\n justify-content: center;\n align-items: center;\n gap: 8px;\n &.flex-column {\n flex-direction: column;\n }\n button.sd-modal-card__button {\n width: 89px;\n }\n }\n }\n}\n","import { Component, Event, EventEmitter, Prop, h } from '@stencil/core';\nimport { resolveColor } from '../../utils/color';\nimport { ButtonSize, ButtonVariant } from '../sd-button/sd-button';\n\nexport interface SdModalCardButtonProps {\n label: string;\n color: string;\n size: ButtonSize;\n variant?: ButtonVariant;\n class?: string;\n type?: 'confirm' \| 'cancel';\n}\n\n@Component({\n tag: 'sd-modal-card',\n styleUrl: 'sd-modal-card.scss',\n})\nexport class SdModalCard {\n @Prop() type: 'info' \| 'warning' \| 'normal' = 'info';\n @Prop() system: 'normal' \| 'positive' \| 'negative' = 'normal';\n @Prop() useCloseButton: boolean = true;\n @Prop() modalTitle: string = 'normal';\n @Prop() buttonFlexDirection: 'row' \| 'column' = 'row';\n @Prop() buttonProps?: SdModalCardButtonProps[];\n @Prop() message: string[] = [];\n @Prop()\n modalClass: string = '';\n\n @Event({ eventName: 'sdClose' }) close!: EventEmitter<MouseEvent>;\n @Event({ eventName: 'sdConfirm' }) confirm!: EventEmitter<MouseEvent>;\n\n private get pointColor(): string {\n if (this.type !== 'normal') {\n return 'grey_95';\n }\n\n switch (this.system) {\n case 'positive':\n return resolveColor('brilliantblue_75');\n case 'negative':\n return resolveColor('red_75');\n default:\n return resolveColor('grey_95');\n }\n }\n\n private get getModalClass(): string {\n let modalClass = `sd-modal-card ${this.modalClass}`;\n modalClass += ' ' + `sd-modal-card-${this.system}`;\n return modalClass;\n }\n\n render() {\n return (\n <div class={this.getModalClass} style={{ '--point-color': this.pointColor }}>\n {this.useCloseButton && (\n <sd-icon\n class=\"sd-modal-card__close-button\"\n name=\"close\"\n size=\"20\"\n color=\"grey_65\"\n onClick={() => this.close.emit()}\n />\n )}\n {this.type !== 'normal' && (\n <sd-icon\n class=\"sd-modal-card__icon\"\n name={this.type === 'info' ? 'notificationOutline' : 'warningOutline'}\n size=\"32\"\n color={this.type === 'info' ? 'brilliantblue_75' : 'red_75'}\n />\n )}\n <h2 class=\"sd-modal-card__title\">{this.modalTitle}</h2>\n <slot>\n <div class={`sd-modal-card__message-container`}>\n {this.message.map(msg => (\n <p class=\"sd-modal-card__message\">{msg}</p>\n ))}\n </div>\n </slot>\n <div class={`sd-modal-card__button-container flex-${this.buttonFlexDirection}`}>\n {this.buttonProps?.map(button => (\n <sd-button\n class={'sd-modal-card__button'}\n variant={button.variant ? button.variant : 'outline'}\n label={button.label}\n color={button.color}\n size={button.size}\n onClick={() =>\n !button.type \|\| button.type === 'confirm' ? this.confirm.emit() : this.close.emit()\n }\n {...(button.class && { class: button.class })}\n ></sd-button>\n ))}\n </div>\n </div>\n );\n }\n}\n"],"version":3}