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

@sellmate/design-system 0.0.56 → 1.0.0

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

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

	@@ -1 +1 @@
1	- {"file":"sd-date-picker.js","mappings":"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","names":["SdDatePicker","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-date-picker/sd-date-picker.scss?tag=sd-date-picker&encapsulation=scoped","src/components/sd-date-picker/sd-date-picker.tsx"],"sourcesContent":["@import 'variables';\n\n.sd-date-picker {\n width: 100%;\n display: inline-block;\n\n .sd-date-picker--disabled {\n .date-icon {\n cursor: not-allowed !important;\n color: $grey_65 !important;\n }\n }\n\n .sd-date-picker__input {\n text-align: center !important;\n }\n}\n\n.sd-date-picker__menu {\n width: 304px;\n box-sizing: border-box;\n border-radius: 8px;\n padding: 24px 19px;\n box-shadow: 2px 2px 12px 2px #00000033;\n background: white;\n\n .sd-date-picker__header {\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n gap: 20px;\n font-size: 14px;\n padding: 0 5px;\n height: 24px;\n line-height: 24px;\n\n .year-nav,\n .month-nav {\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n gap: 12px;\n\n button {\n background: none;\n border: none;\n cursor: pointer;\n margin: 0;\n padding: 0;\n }\n }\n\n .year-nav {\n &__current {\n width: 40px;\n text-align: center;\n }\n }\n\n .month-nav {\n &__current {\n width: 100px;\n text-align: center;\n }\n }\n }\n .sd-date-picker__days {\n margin-top: 8px;\n display: grid;\n grid-template-columns: repeat(7, minmax(0, 1fr));\n column-gap: 10px;\n padding: 0 5px;\n\n .day {\n width: 28px;\n height: 20px;\n font-size: 12px;\n line-height: 20px;\n text-align: center;\n color: $grey_65;\n }\n }\n .sd-date-picker__body {\n margin-top: 12px;\n display: grid;\n grid-template-columns: repeat(7, minmax(0, 1fr));\n }\n}\n","import { Component, Element, Prop, State, Event, h, EventEmitter, Host } from '@stencil/core';\nimport { useDatePicker } from '../../modules/useDatePicker';\nimport { today } from '../../utils/date';\n\n@Component({\n tag: 'sd-date-picker',\n styleUrl: 'sd-date-picker.scss',\n scoped: true,\n})\nexport class SdDatePicker {\n @Element() el!: HTMLElement;\n\n @Prop({ mutable: true, reflect: true }) value: string \| null = null;\n @Prop() label?: string;\n @Prop() selectable?: [string, string];\n @Prop() disabled: boolean = false;\n @Prop() placeholder: string = '';\n\n @State() isOpen: boolean = false;\n @State() currentDate: string \| null = null;\n @State() currentYear!: number;\n @State() currentMonth!: number;\n\n @Event() sdChange!: EventEmitter<string \| null>;\n\n componentWillLoad() {\n this.setCalendar();\n }\n\n private dateUtil = useDatePicker();\n private inputEl?: HTMLElement;\n\n private setCalendar() {\n const base = this.value \|\| today;\n const [year, month] = base.split('-').map(Number);\n this.currentYear = year;\n this.currentMonth = month;\n this.currentDate = this.value;\n }\n\n private openMenu() {\n if (this.disabled) return;\n\n this.setCalendar();\n this.isOpen = true;\n }\n\n private get calendar() {\n return this.dateUtil.createCalendar(this.currentYear, this.currentMonth);\n }\n\n private setCurrentYear(year: number) {\n this.currentYear = year;\n }\n\n private setCurrentMonth(month: number) {\n this.currentMonth = month;\n }\n\n private setCurrentDate(date: string \| null) {\n this.currentDate = date;\n }\n\n private handleUpdateMonth(type: 'prev' \| 'next') {\n const { newYear, newMonth } = this.dateUtil.calculateYearMonth(\n this.currentYear,\n this.currentMonth,\n type,\n );\n this.setCurrentYear(newYear);\n this.setCurrentMonth(newMonth);\n }\n\n private handleDateClick(day: number) {\n if (!day) return;\n\n const date = this.dateUtil.formatDate(this.currentYear, this.currentMonth, day);\n this.setCurrentDate(date);\n this.isOpen = false;\n\n this.value = date;\n this.sdChange.emit?.(date);\n }\n\n private isDisabledDate(date: string): boolean {\n if (!this.selectable) return false;\n\n const [startSelectable, endSelectable] = this.selectable;\n\n if (startSelectable && endSelectable) {\n return date < startSelectable \|\| date > endSelectable;\n }\n\n if (startSelectable) {\n return date < startSelectable;\n }\n\n if (endSelectable) {\n return date > endSelectable;\n }\n\n return false;\n }\n\n private handleClose = () => {\n this.isOpen = false;\n };\n\n render() {\n return (\n <Host class={{ 'sd-date-picker': true, 'sd-date-picker--disabled': this.disabled }}>\n <sd-input\n ref={el => (this.inputEl = el as unknown as HTMLElement)}\n value={this.value}\n label={this.label}\n inside-label\n readonly\n disabled={this.disabled}\n placeholder={this.placeholder}\n inputClass=\"sd-date-picker__input\"\n onClick={() => this.openMenu()}\n >\n <sd-icon\n slot=\"prefix\"\n name=\"date\"\n size=\"16\"\n color={this.disabled ? 'grey_65' : 'grey_70'}\n class=\"date-icon\"\n onClick={() => this.openMenu()}\n ></sd-icon>\n </sd-input>\n\n {this.isOpen && (\n <sd-portal open={this.isOpen} parentRef={this.inputEl} onSdClose={this.handleClose}>\n <div class=\"sd-date-picker__menu\">\n <div class=\"sd-date-picker__header\">\n {/* Year Navigation /}\n <div class=\"year-nav\">\n <button\n type=\"button\"\n name=\"prev-year\"\n title=\"Previous Year\"\n onClick={() => this.setCurrentYear(this.currentYear - 1)}\n >\n <sd-icon name=\"arrowLeft\" size=\"12\" color=\"#CCCCCC\" />\n </button>\n <span class=\"year-nav__current\">{this.currentYear}</span>\n <button\n type=\"button\"\n name=\"next-year\"\n title=\"Next Year\"\n onClick={() => this.setCurrentYear(this.currentYear + 1)}\n >\n <sd-icon name=\"arrowRight\" size=\"12\" color=\"#CCCCCC\" />\n </button>\n </div>\n\n {/ Month Navigation */}\n <div class=\"month-nav\">\n <button\n type=\"button\"\n name=\"prev-month\"\n title=\"Previous \"\n onClick={() => this.handleUpdateMonth('prev')}\n >\n <sd-icon name=\"arrowLeft\" size=\"12\" color=\"#CCCCCC\" />\n </button>\n <span class=\"month-nav__current\">{this.currentMonth}월</span>\n <button\n type=\"button\"\n name=\"next-month\"\n title=\"Next Month\"\n onClick={() => this.handleUpdateMonth('next')}\n >\n <sd-icon name=\"arrowRight\" size=\"12\" color=\"#CCCCCC\" />\n </button>\n </div>\n </div>\n\n <div class=\"sd-date-picker__days\">\n {['일', '월', '화', '수', '목', '금', '토'].map(day => (\n <div key={day} class=\"day\">\n {day}\n </div>\n ))}\n </div>\n\n <div class=\"sd-date-picker__body\">\n {[\n ...this.calendar.prevMonthDays,\n ...this.calendar.days,\n ...this.calendar.afterMonthDays,\n ].map((day, idx) => {\n const formattedDate = this.dateUtil.formatDate(\n this.currentYear,\n this.currentMonth,\n Number(day),\n );\n\n return (\n <sd-date-box\n key={`${day}_${idx}`}\n date={!day ? '' : Number(day)}\n selected={this.currentDate === formattedDate}\n isToday={today === formattedDate}\n disabled={!day ? true : this.isDisabledDate(formattedDate)}\n onClick={\n !this.isDisabledDate(formattedDate) && day\n ? () => this.handleDateClick(Number(day))\n : undefined\n }\n />\n );\n })}\n </div>\n </div>\n </sd-portal>\n )}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"sd-date-picker.js","mappings":";;;;;;;;;;;AAAA,MAAM,eAAe,GAAG,MAAM,CAAC,2mEAA2mE,CAAC;;MCS9nEA,cAAY,iBAAAC,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;;;;;;;;;IAGgB,KAAK,GAAkB,IAAI;AAC3D,IAAA,KAAK;AACL,IAAA,UAAU;IACV,QAAQ,GAAY,KAAK;IACzB,WAAW,GAAW,EAAE;IAEvB,MAAM,GAAY,KAAK;IACvB,WAAW,GAAkB,IAAI;AACjC,IAAA,WAAW;AACX,IAAA,YAAY;AAEa,IAAA,MAAM;IAExC,iBAAiB,GAAA;QAChB,IAAI,CAAC,WAAW,EAAE;;IAGX,QAAQ,GAAG,aAAa,EAAE;AAC1B,IAAA,OAAO;IAEP,WAAW,GAAA;AAClB,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,IAAI,KAAK;AAChC,QAAA,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC;AACjD,QAAA,IAAI,CAAC,WAAW,GAAG,IAAI;AACvB,QAAA,IAAI,CAAC,YAAY,GAAG,KAAK;AACzB,QAAA,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK;;IAGtB,QAAQ,GAAA;QACf,IAAI,IAAI,CAAC,QAAQ;YAAE;QAEnB,IAAI,CAAC,WAAW,EAAE;AAClB,QAAA,IAAI,CAAC,MAAM,GAAG,IAAI;;AAGnB,IAAA,IAAY,QAAQ,GAAA;AACnB,QAAA,OAAO,IAAI,CAAC,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,YAAY,CAAC;;AAGjE,IAAA,cAAc,CAAC,IAAY,EAAA;AAClC,QAAA,IAAI,CAAC,WAAW,GAAG,IAAI;;AAGhB,IAAA,eAAe,CAAC,KAAa,EAAA;AACpC,QAAA,IAAI,CAAC,YAAY,GAAG,KAAK;;AAGlB,IAAA,cAAc,CAAC,IAAmB,EAAA;AACzC,QAAA,IAAI,CAAC,WAAW,GAAG,IAAI;;AAGhB,IAAA,iBAAiB,CAAC,IAAqB,EAAA;QAC9C,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,kBAAkB,CAC7D,IAAI,CAAC,WAAW,EAChB,IAAI,CAAC,YAAY,EACjB,IAAI,CACJ;AACD,QAAA,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC;AAC5B,QAAA,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC;;AAGvB,IAAA,eAAe,CAAC,GAAW,EAAA;AAClC,QAAA,IAAI,CAAC,GAAG;YAAE;AAEV,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,YAAY,EAAE,GAAG,CAAC;AAC/E,QAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC;AACzB,QAAA,IAAI,CAAC,MAAM,GAAG,KAAK;AAEnB,QAAA,IAAI,CAAC,KAAK,GAAG,IAAI;QACjB,IAAI,CAAC,MAAM,CAAC,IAAI,GAAG,IAAI,CAAC;;AAGjB,IAAA,cAAc,CAAC,IAAY,EAAA;QAClC,IAAI,CAAC,IAAI,CAAC,UAAU;AAAE,YAAA,OAAO,KAAK;QAElC,MAAM,CAAC,eAAe,EAAE,aAAa,CAAC,GAAG,IAAI,CAAC,UAAU;AAExD,QAAA,IAAI,eAAe,IAAI,aAAa,EAAE;AACrC,YAAA,OAAO,IAAI,GAAG,eAAe,IAAI,IAAI,GAAG,aAAa;;QAGtD,IAAI,eAAe,EAAE;YACpB,OAAO,IAAI,GAAG,eAAe;;QAG9B,IAAI,aAAa,EAAE;YAClB,OAAO,IAAI,GAAG,aAAa;;AAG5B,QAAA,OAAO,KAAK;;IAGL,WAAW,GAAG,MAAK;AAC1B,QAAA,IAAI,CAAC,MAAM,GAAG,KAAK;AACpB,KAAC;IAED,MAAM,GAAA;AACL,QAAA,QACC,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,EAAE,gBAAgB,EAAE,IAAI,EAAE,0BAA0B,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAA,EACjF,CACC,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,OAAO,GAAG,EAA4B,CAAC,EACxD,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE,IAAI,CAAC,KAAK,EAAA,cAAA,EAAA,IAAA,EAEjB,QAAQ,EACR,IAAA,EAAA,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,UAAU,EAAC,uBAAuB,EAClC,OAAO,EAAE,MAAM,IAAI,CAAC,QAAQ,EAAE,EAAA,EAE9B,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACC,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,IAAI,CAAC,QAAQ,GAAG,SAAS,GAAG,SAAS,EAC5C,KAAK,EAAC,WAAW,EACjB,OAAO,EAAE,MAAM,IAAI,CAAC,QAAQ,EAAE,GACpB,CACD,EAEV,IAAI,CAAC,MAAM,KACX,kEAAW,IAAI,EAAE,IAAI,CAAC,MAAM,EAAE,SAAS,EAAE,IAAI,CAAC,OAAO,EAAE,SAAS,EAAE,IAAI,CAAC,WAAW,EAAA,EACjF,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,sBAAsB,EAAA,EAChC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,wBAAwB,EAAA,EAElC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,UAAU,EAAA,EACpB,CACC,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,WAAW,EAChB,KAAK,EAAC,eAAe,EACrB,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,EAAA,EAExD,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,WAAW,EAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,SAAS,EAAA,CAAG,CAC9C,EACT,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,mBAAmB,IAAE,IAAI,CAAC,WAAW,CAAQ,EACzD,CACC,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,WAAW,EAChB,KAAK,EAAC,WAAW,EACjB,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,EAAA,EAExD,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,YAAY,EAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,SAAS,EAAA,CAAG,CAC/C,CACJ,EAGN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,WAAW,EAAA,EACrB,CACC,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,YAAY,EACjB,KAAK,EAAC,iBAAiB,EACvB,OAAO,EAAE,MAAM,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC,EAAA,EAE7C,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,WAAW,EAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,SAAS,EAAA,CAAG,CAC9C,EACT,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,oBAAoB,EAAA,EAAE,IAAI,CAAC,YAAY,EAAS,QAAA,CAAA,EAC5D,CACC,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,YAAY,EACjB,KAAK,EAAC,YAAY,EAClB,OAAO,EAAE,MAAM,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC,EAAA,EAE7C,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,YAAY,EAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,SAAS,EAAG,CAAA,CAC/C,CACJ,CACD,EAEN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,sBAAsB,IAC/B,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,GAAG,KAC3C,CAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,GAAG,EAAE,KAAK,EAAC,KAAK,EAAA,EACxB,GAAG,CACC,CACN,CAAC,CACG,EAEN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,sBAAsB,EAC/B,EAAA;AACA,YAAA,GAAG,IAAI,CAAC,QAAQ,CAAC,aAAa;AAC9B,YAAA,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI;AACrB,YAAA,GAAG,IAAI,CAAC,QAAQ,CAAC,cAAc;AAC/B,SAAA,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,GAAG,KAAI;YAClB,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,CAAC,UAAU,CAC7C,IAAI,CAAC,WAAW,EAChB,IAAI,CAAC,YAAY,EACjB,MAAM,CAAC,GAAG,CAAC,CACX;AAED,YAAA,QACC,CAAA,CAAA,aAAA,EAAA,EACC,GAAG,EAAE,CAAA,EAAG,GAAG,CAAI,CAAA,EAAA,GAAG,CAAE,CAAA,EACpB,IAAI,EAAE,CAAC,GAAG,GAAG,EAAE,GAAG,MAAM,CAAC,GAAG,CAAC,EAC7B,QAAQ,EAAE,IAAI,CAAC,WAAW,KAAK,aAAa,EAC5C,OAAO,EAAE,KAAK,KAAK,aAAa,EAChC,QAAQ,EAAE,CAAC,GAAG,GAAG,IAAI,GAAG,IAAI,CAAC,cAAc,CAAC,aAAa,CAAC,EAC1D,OAAO,EACN,CAAC,IAAI,CAAC,cAAc,CAAC,aAAa,CAAC,IAAI;AACtC,sBAAE,MAAM,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,GAAG,CAAC;AACxC,sBAAE,SAAS,EAEZ,CAAA;AAEJ,SAAC,CAAC,CACG,CACD,CACK,CACZ,CACK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SdDatePicker","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-date-picker/sd-date-picker.scss?tag=sd-date-picker&encapsulation=scoped","src/components/sd-date-picker/sd-date-picker.tsx"],"sourcesContent":["@import 'variables';\n\n.sd-date-picker {\n width: 100%;\n display: inline-block;\n\n .sd-date-picker--disabled {\n .date-icon {\n cursor: not-allowed !important;\n color: $grey_65 !important;\n }\n }\n\n .sd-date-picker__input {\n text-align: center !important;\n }\n}\n\n.sd-date-picker__menu {\n width: 304px;\n box-sizing: border-box;\n border-radius: 8px;\n padding: 24px 19px;\n box-shadow: 2px 2px 12px 2px #00000033;\n background: white;\n\n .sd-date-picker__header {\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n gap: 20px;\n font-size: 14px;\n padding: 0 5px;\n height: 24px;\n line-height: 24px;\n\n .year-nav,\n .month-nav {\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n gap: 12px;\n\n button {\n background: none;\n border: none;\n cursor: pointer;\n margin: 0;\n padding: 0;\n }\n }\n\n .year-nav {\n &__current {\n width: 40px;\n text-align: center;\n }\n }\n\n .month-nav {\n &__current {\n width: 100px;\n text-align: center;\n }\n }\n }\n .sd-date-picker__days {\n margin-top: 8px;\n display: grid;\n grid-template-columns: repeat(7, minmax(0, 1fr));\n column-gap: 10px;\n padding: 0 5px;\n\n .day {\n width: 28px;\n height: 20px;\n font-size: 12px;\n line-height: 20px;\n text-align: center;\n color: $grey_65;\n }\n }\n .sd-date-picker__body {\n margin-top: 12px;\n display: grid;\n grid-template-columns: repeat(7, minmax(0, 1fr));\n }\n}\n","import { Component, Element, Prop, State, Event, h, EventEmitter, Host } from '@stencil/core';\nimport { useDatePicker } from '../../modules/useDatePicker';\nimport { today } from '../../utils/date';\n\n@Component({\n tag: 'sd-date-picker',\n styleUrl: 'sd-date-picker.scss',\n scoped: true,\n})\nexport class SdDatePicker {\n @Element() el!: HTMLElement;\n\n @Prop({ mutable: true, reflect: true }) value: string \| null = null;\n @Prop() label?: string;\n @Prop() selectable?: [string, string];\n @Prop() disabled: boolean = false;\n @Prop() placeholder: string = '';\n\n @State() isOpen: boolean = false;\n @State() currentDate: string \| null = null;\n @State() currentYear!: number;\n @State() currentMonth!: number;\n\n @Event({ eventName: 'sdUpdate' }) update!: EventEmitter<string \| null>;\n\n componentWillLoad() {\n this.setCalendar();\n }\n\n private dateUtil = useDatePicker();\n private inputEl?: HTMLElement;\n\n private setCalendar() {\n const base = this.value \|\| today;\n const [year, month] = base.split('-').map(Number);\n this.currentYear = year;\n this.currentMonth = month;\n this.currentDate = this.value;\n }\n\n private openMenu() {\n if (this.disabled) return;\n\n this.setCalendar();\n this.isOpen = true;\n }\n\n private get calendar() {\n return this.dateUtil.createCalendar(this.currentYear, this.currentMonth);\n }\n\n private setCurrentYear(year: number) {\n this.currentYear = year;\n }\n\n private setCurrentMonth(month: number) {\n this.currentMonth = month;\n }\n\n private setCurrentDate(date: string \| null) {\n this.currentDate = date;\n }\n\n private handleUpdateMonth(type: 'prev' \| 'next') {\n const { newYear, newMonth } = this.dateUtil.calculateYearMonth(\n this.currentYear,\n this.currentMonth,\n type,\n );\n this.setCurrentYear(newYear);\n this.setCurrentMonth(newMonth);\n }\n\n private handleDateClick(day: number) {\n if (!day) return;\n\n const date = this.dateUtil.formatDate(this.currentYear, this.currentMonth, day);\n this.setCurrentDate(date);\n this.isOpen = false;\n\n this.value = date;\n this.update.emit?.(date);\n }\n\n private isDisabledDate(date: string): boolean {\n if (!this.selectable) return false;\n\n const [startSelectable, endSelectable] = this.selectable;\n\n if (startSelectable && endSelectable) {\n return date < startSelectable \|\| date > endSelectable;\n }\n\n if (startSelectable) {\n return date < startSelectable;\n }\n\n if (endSelectable) {\n return date > endSelectable;\n }\n\n return false;\n }\n\n private handleClose = () => {\n this.isOpen = false;\n };\n\n render() {\n return (\n <Host class={{ 'sd-date-picker': true, 'sd-date-picker--disabled': this.disabled }}>\n <sd-input\n ref={el => (this.inputEl = el as unknown as HTMLElement)}\n value={this.value}\n label={this.label}\n inside-label\n readonly\n disabled={this.disabled}\n placeholder={this.placeholder}\n inputClass=\"sd-date-picker__input\"\n onClick={() => this.openMenu()}\n >\n <sd-icon\n slot=\"prefix\"\n name=\"date\"\n size=\"16\"\n color={this.disabled ? 'grey_65' : 'grey_70'}\n class=\"date-icon\"\n onClick={() => this.openMenu()}\n ></sd-icon>\n </sd-input>\n\n {this.isOpen && (\n <sd-portal open={this.isOpen} parentRef={this.inputEl} onSdClose={this.handleClose}>\n <div class=\"sd-date-picker__menu\">\n <div class=\"sd-date-picker__header\">\n {/* Year Navigation /}\n <div class=\"year-nav\">\n <button\n type=\"button\"\n name=\"prev-year\"\n title=\"Previous Year\"\n onClick={() => this.setCurrentYear(this.currentYear - 1)}\n >\n <sd-icon name=\"arrowLeft\" size=\"12\" color=\"#CCCCCC\" />\n </button>\n <span class=\"year-nav__current\">{this.currentYear}</span>\n <button\n type=\"button\"\n name=\"next-year\"\n title=\"Next Year\"\n onClick={() => this.setCurrentYear(this.currentYear + 1)}\n >\n <sd-icon name=\"arrowRight\" size=\"12\" color=\"#CCCCCC\" />\n </button>\n </div>\n\n {/ Month Navigation */}\n <div class=\"month-nav\">\n <button\n type=\"button\"\n name=\"prev-month\"\n title=\"Previous \"\n onClick={() => this.handleUpdateMonth('prev')}\n >\n <sd-icon name=\"arrowLeft\" size=\"12\" color=\"#CCCCCC\" />\n </button>\n <span class=\"month-nav__current\">{this.currentMonth}월</span>\n <button\n type=\"button\"\n name=\"next-month\"\n title=\"Next Month\"\n onClick={() => this.handleUpdateMonth('next')}\n >\n <sd-icon name=\"arrowRight\" size=\"12\" color=\"#CCCCCC\" />\n </button>\n </div>\n </div>\n\n <div class=\"sd-date-picker__days\">\n {['일', '월', '화', '수', '목', '금', '토'].map(day => (\n <div key={day} class=\"day\">\n {day}\n </div>\n ))}\n </div>\n\n <div class=\"sd-date-picker__body\">\n {[\n ...this.calendar.prevMonthDays,\n ...this.calendar.days,\n ...this.calendar.afterMonthDays,\n ].map((day, idx) => {\n const formattedDate = this.dateUtil.formatDate(\n this.currentYear,\n this.currentMonth,\n Number(day),\n );\n\n return (\n <sd-date-box\n key={`${day}_${idx}`}\n date={!day ? '' : Number(day)}\n selected={this.currentDate === formattedDate}\n isToday={today === formattedDate}\n disabled={!day ? true : this.isDisabledDate(formattedDate)}\n onClick={\n !this.isDisabledDate(formattedDate) && day\n ? () => this.handleDateClick(Number(day))\n : undefined\n }\n />\n );\n })}\n </div>\n </div>\n </sd-portal>\n )}\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -1,9 +1,13 @@
-import { p as proxyCustomElement, H, d as createEvent, h, F as Fragment, c as Host, t as transformTag } from './p-CQBrru3e.js';
+import { p as proxyCustomElement, H, d as createEvent, h, F as Fragment, c as Host, t as transformTag } from './p-YLoygqPr.js';
 import { u as useDatePicker, t as today } from './p-QZbqqKSO.js';
-import { d as defineCustomElement$5 } from './p-BxPT3VKO.js';
-import { d as defineCustomElement$4 } from './p-BHHbLFXg.js';
-import { d as defineCustomElement$3 } from './p-C4kdHNdl.js';
-import { d as defineCustomElement$2 } from './p-B8yBkdjE.js';
+import { d as defineCustomElement$9 } from './p-CdGD6AqM.js';
+import { d as defineCustomElement$8 } from './p-DlJtPR_C.js';
+import { d as defineCustomElement$7 } from './p-CpRkV7pg.js';
+import { d as defineCustomElement$6 } from './p-CVMprLsE.js';
+import { d as defineCustomElement$5 } from './p-DnQF6htq.js';
+import { d as defineCustomElement$4 } from './p-D54IEoI6.js';
+import { d as defineCustomElement$3 } from './p-DbebUQwg.js';
+import { d as defineCustomElement$2 } from './p-7xekTQRB.js';
 const addDays = (inputDate, days) => {
     const [year, month, day] = inputDate.split('-').map(Number);
@@ -17,7 +21,7 @@ const addDays = (inputDate, days) => {
     return `${resultYear}-${resultMonth}-${resultDay}`;
 };
-const sdDateRangePickerCss = () => `.sd-date-range-picker.sc-sd-date-range-picker{width:fit-content;display:inline-block}.sd-date-range-picker.sc-sd-date-range-picker .sd-date-range-picker--disabled.sc-sd-date-range-picker .date-icon.sc-sd-date-range-picker{cursor:not-allowed !important;color:#888888 !important}.sd-date-range-picker.sc-sd-date-range-picker .sd-input.sc-sd-date-range-picker .sd-input__container.sc-sd-date-range-picker{width:210px}.sd-date-range-picker.sc-sd-date-range-picker .sd-input.sc-sd-date-range-picker .sd-date-range-picker__input.sc-sd-date-range-picker{margin-left:17px !important}.sd-date-range-picker__menu.sc-sd-date-range-picker{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.sc-sd-date-range-picker .sd-date-range-picker__header.sc-sd-date-range-picker{margin-bottom:16px;display:flex;flex-flow:row nowrap;align-items:center;justify-content:center}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__header.sc-sd-date-range-picker .header-label.sc-sd-date-range-picker{margin:0 12px;width:40px;text-align:center;font-size:14px;line-height:24px}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker{display:flex;flex-flow:row nowrap;align-items:stretch;gap:19px}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker{width:266px}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker .calendar-header.sc-sd-date-range-picker{width:100%;height:24px;line-height:24px;font-size:14px;text-align:center;position:relative;padding:0 5px}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker .calendar-header.sc-sd-date-range-picker button.sc-sd-date-range-picker{position:absolute;top:50%;transform:translateY(-50%)}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker .calendar-header.sc-sd-date-range-picker button.header-button-prev.sc-sd-date-range-picker{left:5px}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker .calendar-header.sc-sd-date-range-picker button.header-button-next.sc-sd-date-range-picker{right:5px;left:auto}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker .calendar-days.sc-sd-date-range-picker{padding:0 5px;margin-top:8px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr));column-gap:10px}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker .calendar-days.sc-sd-date-range-picker .day.sc-sd-date-range-picker{width:28px;height:20px;font-size:12px;line-height:20px;text-align:center;color:#888888}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker .calendar-body.sc-sd-date-range-picker{margin-top:12px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr))}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .separator.sc-sd-date-range-picker{width:1px;background-color:#d8d8d8}`;
+const sdDateRangePickerCss = () => `sd-date-range-picker.sc-sd-date-range-picker{width:fit-content;display:inline-flex}sd-date-range-picker.sc-sd-date-range-picker .sd-date-range-picker--disabled.sc-sd-date-range-picker .date-icon.sc-sd-date-range-picker{cursor:not-allowed !important;color:#888888 !important}sd-date-range-picker.sc-sd-date-range-picker .sd-date-range-picker--disabled.sc-sd-date-range-picker .sd-input__native.sc-sd-date-range-picker{color:#888888 !important}sd-date-range-picker.sc-sd-date-range-picker .sd-field.sc-sd-date-range-picker .sd-field__control.sc-sd-date-range-picker{min-width:210px}sd-date-range-picker.sc-sd-date-range-picker .sd-field.sc-sd-date-range-picker .sd-input__native.sc-sd-date-range-picker{margin-left:17px !important}.sd-date-range-picker__menu.sc-sd-date-range-picker{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.sc-sd-date-range-picker .sd-date-range-picker__header.sc-sd-date-range-picker{margin-bottom:16px;display:flex;flex-flow:row nowrap;align-items:center;justify-content:center}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__header.sc-sd-date-range-picker .header-label.sc-sd-date-range-picker{margin:0 12px;width:40px;text-align:center;font-size:14px;line-height:24px}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker{display:flex;flex-flow:row nowrap;align-items:stretch;gap:19px}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker{width:266px}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker .calendar-header.sc-sd-date-range-picker{width:100%;height:24px;line-height:24px;font-size:14px;text-align:center;position:relative;padding:0 5px}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker .calendar-header.sc-sd-date-range-picker button.sc-sd-date-range-picker{position:absolute;top:50%;transform:translateY(-50%)}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker .calendar-header.sc-sd-date-range-picker button.header-button-prev.sc-sd-date-range-picker{left:5px}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker .calendar-header.sc-sd-date-range-picker button.header-button-next.sc-sd-date-range-picker{right:5px;left:auto}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker .calendar-days.sc-sd-date-range-picker{padding:0 5px;margin-top:8px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr));column-gap:10px}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker .calendar-days.sc-sd-date-range-picker .day.sc-sd-date-range-picker{width:28px;height:20px;font-size:12px;line-height:20px;text-align:center;color:#888888}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker .calendar-body.sc-sd-date-range-picker{margin-top:12px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr))}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .separator.sc-sd-date-range-picker{width:1px;background-color:#d8d8d8}`;
 const SdDateRangePicker$1 = /*@__PURE__*/ proxyCustomElement(class SdDateRangePicker extends H {
     constructor(registerHost) {
@@ -25,7 +29,7 @@ const SdDateRangePicker$1 = /*@__PURE__*/ proxyCustomElement(class SdDateRangePi
         if (registerHost !== false) {
             this.__registerHost();
         }
-        this.sdChange = createEvent(this, "sdChange");
+        this.update = createEvent(this, "sdUpdate");
     }
     get el() { return this; }
     value = ['', ''];
@@ -39,7 +43,7 @@ const SdDateRangePicker$1 = /*@__PURE__*/ proxyCustomElement(class SdDateRangePi
     hoverDate = '';
     prevYear = Number(this.dateRange[0].split('-')[0]);
     prevMonth = Number(this.dateRange[0].split('-')[1]);
-    sdChange;
+    update;
     inputEl;
     dateUtil = useDatePicker();
     tempDateRange = ['', ''];
@@ -47,7 +51,7 @@ const SdDateRangePicker$1 = /*@__PURE__*/ proxyCustomElement(class SdDateRangePi
         this.syncFromValue(this.value);
     }
     onValueChange(newValue) {
-        this.syncFromValue(newValue);
+        this.dateRange = [...newValue];
     }
     syncFromValue(value) {
         this.dateRange = [...value];
@@ -173,17 +177,17 @@ const SdDateRangePicker$1 = /*@__PURE__*/ proxyCustomElement(class SdDateRangePi
         const newRange = [this.dateRange[0], selectedDate];
         this.setDateRange(newRange);
         this.value = newRange;
-        this.sdChange.emit?.(newRange);
+        this.update.emit?.(newRange);
     }
     handleDateHover(index, day) {
         const hoverDate = this.formatDate(index, day);
         this.setHoverDate(hoverDate);
     }
     render() {
-        return (h(Host, { key: '5220efe80a57b9591b4238b0f0cd646d76709a4c', class: {
+        return (h(Host, { key: '1ac991910d1613bf142520081212be747bbeafd4', class: {
                 'sd-date-range-picker': true,
                 'sd-date-range-picker--disabled': this.disabled,
-            } }, h("sd-input", { key: '0f7bc52cbe8722e16b3c82dc847b0230149f4e6a', ref: el => (this.inputEl = el), value: !!this.dateRange[0] ? `${this.dateRange[0]} ~ ${this.dateRange[1]}` : '', label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-range-picker__input", onClick: () => this.openMenu() }, h("sd-icon", { key: 'b21b38e104c2dd840af1670e4bedee84a4db10fa', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: '56d74da3b2d783340d21503210eae4b89d540b9a', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.closeMenu }, h("div", { key: '89b88b2b16bb6b553ba18b686cfdb41bcdccfb33', class: "sd-date-range-picker__menu" }, h("div", { key: 'b811cdb96de5cd8400ef413fe2537a5e9b36720d', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, h("button", { key: '588814d15c2a6c8b8efcad9215ab015366709ee7', type: "button", name: "prev", title: "Previous", onClick: () => this.setPrevYear(this.prevYear - 1) }, h("sd-icon", { key: '330c17fb132b33140fb8cdf72c0bc75eca9814eb', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("div", { key: 'b2f29d546ac19968045aa3803cea58693c9ac904', class: "header-label" }, this.prevYear), h("button", { key: '183befff37c64110a8dc188b261aaa03330b7c9e', type: "button", name: "next", title: "Next", onClick: () => this.setPrevYear(this.prevYear + 1) }, h("sd-icon", { key: 'ea7ab0b1ff97a659b2adf3ab105945127fa5b066', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: '13e7484f631f5045a49c1243c93ae211b3f70bec', class: "sd-date-range-picker__body" }, [this.prevCalendar, this.nextCalendar].map((calendar, index) => (h(Fragment, null, index === 1 && h("div", { class: "separator" }), h("div", { key: index, class: "calendar-container" }, h("div", { class: "calendar-header" }, h("button", { type: "button", name: "month", title: "Month", class: index === 0 ? 'header-button-prev' : 'header-button-next', onClick: () => this.updateYearMonth(index === 0 ? 'prev' : 'next') }, h("sd-icon", { name: index === 0 ? 'arrowLeft' : 'arrowRight', size: "12", color: "#CCCCCC" })), index === 0
+            } }, h("sd-input", { key: 'a9088dd29923544f749e09678856376dc8606f7d', ref: el => (this.inputEl = el), value: !!this.dateRange[0] ? `${this.dateRange[0]} ~ ${this.dateRange[1]}` : '', label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-range-picker__input", onClick: () => this.openMenu() }, h("sd-icon", { key: '866ba94372f088fab53a01e0f13fc883356f6586', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: '95ab0375cf56201bd285c522844d7fa387ae7fc9', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.closeMenu }, h("div", { key: 'fc7bb357b66b7e70ce3351ab6861b778a00eb6d8', class: "sd-date-range-picker__menu" }, h("div", { key: '852ff12fdb66c008b92d7c2e828a6a7a952e7afe', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, h("button", { key: '980cb27f0c9e1629b5cf85060b47845db0e1f9b7', type: "button", name: "prev", title: "Previous", onClick: () => this.setPrevYear(this.prevYear - 1) }, h("sd-icon", { key: '7bc19cc051ff2af8fadf4eb7b389456fae03f060', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("div", { key: '4836b382280bf948afa7ed85eeb024052fd86aab', class: "header-label" }, this.prevYear), h("button", { key: 'fe7b4f50bb0515c8dd294274792dbbe3baca3af7', type: "button", name: "next", title: "Next", onClick: () => this.setPrevYear(this.prevYear + 1) }, h("sd-icon", { key: '2f86e0b14db96213954cf17282bcc66ed0b80ded', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: '0d63ed5aef2ede30dd88dd25b3314e4ec8ae79ce', class: "sd-date-range-picker__body" }, [this.prevCalendar, this.nextCalendar].map((calendar, index) => (h(Fragment, null, index === 1 && h("div", { class: "separator" }), h("div", { key: index, class: "calendar-container" }, h("div", { class: "calendar-header" }, h("button", { type: "button", name: "month", title: "Month", class: index === 0 ? 'header-button-prev' : 'header-button-next', onClick: () => this.updateYearMonth(index === 0 ? 'prev' : 'next') }, h("sd-icon", { name: index === 0 ? 'arrowLeft' : 'arrowRight', size: "12", color: "#CCCCCC" })), index === 0
             ? `${this.prevYear}.${String(this.prevMonth).padStart(2, '0')}`
             : `${this.nextYear}.${String(this.nextMonth).padStart(2, '0')}`), h("div", { class: "calendar-days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (h("sd-date-box", { key: day, date: day, disabled: true, class: "day" })))), h("div", { class: "calendar-body mt-12pxr grid grid-cols-7 gap-y-8pxr" }, [...calendar.prevMonthDays, ...calendar.days, ...calendar.afterMonthDays].map((day, idx) => (h("sd-date-box", { key: `prev${day}_${idx}`, date: !day ? '' : Number(day), selected: this.dateRange.some(date => date === this.formatDate(index, Number(day))), type: this.getDateBoxType(this.formatDate(index, Number(day))), isToday: today === this.formatDate(index, Number(day)), disabled: !day ? true : this.isDisabledDate(this.formatDate(index, Number(day))), inRange: this.isDateInRange(this.formatDate(index, Number(day))), isStartDate: this.dateRange[0] === this.formatDate(index, Number(day)), isEndDate: this.dateRange[1] === this.formatDate(index, Number(day)), onClick: () => this.handleDateClick(index, Number(day)), onMouseOver: () => this.handleDateHover(index, Number(day)) }))))))))))))));
     }
@@ -192,7 +196,7 @@ const SdDateRangePicker$1 = /*@__PURE__*/ proxyCustomElement(class SdDateRangePi
     }; }
     static get style() { return sdDateRangePickerCss(); }
 }, [770, "sd-date-range-picker", {
-        "value": [16],
+        "value": [1040],
         "label": [1],
         "selectable": [16],
         "maxRange": [2, "max-range"],
@@ -210,29 +214,49 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["sd-date-range-picker", "sd-date-box", "sd-icon", "sd-input", "sd-portal"];
+    const components = ["sd-date-range-picker", "sd-button", "sd-date-box", "sd-field", "sd-floating-portal", "sd-icon", "sd-input", "sd-portal", "sd-tooltip"];
     components.forEach(tagName => { switch (tagName) {
         case "sd-date-range-picker":
             if (!customElements.get(transformTag(tagName))) {
                 customElements.define(transformTag(tagName), SdDateRangePicker$1);
             }
             break;
+        case "sd-button":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$9();
+            }
+            break;
         case "sd-date-box":
             if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$5();
+                defineCustomElement$8();
+            }
+            break;
+        case "sd-field":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$7();
+            }
+            break;
+        case "sd-floating-portal":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$6();
             }
             break;
         case "sd-icon":
             if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$4();
+                defineCustomElement$5();
             }
             break;
         case "sd-input":
             if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$3();
+                defineCustomElement$4();
             }
             break;
         case "sd-portal":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$3();
+            }
+            break;
+        case "sd-tooltip":
             if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$2();
             }

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

	@@ -1 +1 @@
1	- {"file":"sd-date-range-picker.js","mappings":"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","names":["SdDateRangePicker","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/utils/date/addDays.ts","src/components/sd-date-range-picker/sd-date-range-picker.scss?tag=sd-date-range-picker&encapsulation=scoped","src/components/sd-date-range-picker/sd-date-range-picker.tsx"],"sourcesContent":["export const addDays = (inputDate: string, days: number) => {\n const [year, month, day] = inputDate.split('-').map(Number);\n const date = new Date(year, month - 1, day); // month는 0부터 시작하므로 -1\n\n // 날짜 계산\n date.setDate(date.getDate() + days);\n\n // yyyy-mm-dd 형식으로 변환\n const resultYear = date.getFullYear();\n const resultMonth = String(date.getMonth() + 1).padStart(2, '0');\n const resultDay = String(date.getDate()).padStart(2, '0');\n\n return `${resultYear}-${resultMonth}-${resultDay}`;\n};\n","@import 'variables';\n\n.sd-date-range-picker {\n width: fit-content;\n display: inline-block;\n\n .sd-date-range-picker--disabled {\n .date-icon {\n cursor: not-allowed !important;\n color: $grey_65 !important;\n }\n }\n\n .sd-input {\n .sd-input__container {\n width: 210px;\n }\n\n .sd-date-range-picker__input {\n margin-left: 17px !important;\n }\n }\n}\n\n.sd-date-range-picker__menu {\n width: 609px;\n box-sizing: border-box;\n border-radius: 8px;\n padding: 24px 19px;\n box-shadow: 2px 2px 12px 2px #00000033;\n background: white;\n\n .sd-date-range-picker__header {\n margin-bottom: 16px;\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n justify-content: center;\n\n .header-label {\n margin: 0 12px;\n width: 40px;\n text-align: center;\n font-size: 14px;\n line-height: 24px;\n }\n }\n .sd-date-range-picker__body {\n display: flex;\n flex-flow: row nowrap;\n align-items: stretch;\n gap: 19px;\n .calendar-container {\n width: 266px;\n\n .calendar-header {\n width: 100%;\n height: 24px;\n line-height: 24px;\n font-size: 14px;\n text-align: center;\n position: relative;\n padding: 0 5px;\n\n button {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n\n &.header-button-prev {\n left: 5px;\n }\n\n &.header-button-next {\n right: 5px;\n left: auto;\n }\n }\n }\n\n .calendar-days {\n padding: 0 5px;\n margin-top: 8px;\n display: grid;\n grid-template-columns: repeat(7, minmax(0, 1fr));\n column-gap: 10px;\n\n .day {\n width: 28px;\n height: 20px;\n font-size: 12px;\n line-height: 20px;\n text-align: center;\n color: $grey_65;\n }\n }\n\n .calendar-body {\n margin-top: 12px;\n display: grid;\n grid-template-columns: repeat(7, minmax(0, 1fr));\n }\n }\n .separator {\n width: 1px;\n background-color: $grey_35;\n }\n }\n}\n","import {\n Component,\n Element,\n Prop,\n State,\n Event,\n h,\n EventEmitter,\n Host,\n Fragment,\n Watch,\n} from '@stencil/core';\nimport { useDatePicker } from '../../modules/useDatePicker';\nimport { addDays, today } from '../../utils/date';\nimport { Type } from '../sd-date-box/sd-date-box';\n\n@Component({\n tag: 'sd-date-range-picker',\n styleUrl: 'sd-date-range-picker.scss',\n scoped: true,\n})\nexport class SdDateRangePicker {\n @Element() el!: HTMLElement;\n\n @Prop() value: [string, string] = ['', ''];\n @Prop() label?: string;\n @Prop() selectable?: [string, string];\n @Prop() maxRange?: number;\n @Prop() disabled: boolean = false;\n @Prop() placeholder: string = '';\n\n @State() isOpen: boolean = false;\n @State() dateRange: [string, string] = this.value;\n @State() hoverDate: string = '';\n @State() prevYear: number = Number(this.dateRange[0].split('-')[0]);\n @State() prevMonth: number = Number(this.dateRange[0].split('-')[1]);\n\n @Event() sdChange!: EventEmitter<[string, string]>;\n\n private inputEl?: HTMLElement;\n private dateUtil = useDatePicker();\n private tempDateRange: [string, string] = ['', ''];\n\n componentWillLoad() {\n this.syncFromValue(this.value);\n }\n\n @Watch('value')\n onValueChange(newValue: [string, string]) {\n this.syncFromValue(newValue);\n }\n\n private syncFromValue(value: [string, string]) {\n this.dateRange = [...value];\n this.resetCalendarByDateRange(value);\n }\n\n /* ----------------------------------\n * Calendar View Logic\n * ---------------------------------- /\n\n private resetCalendarByDateRange(range: [string, string]) {\n // this.dateRange = this.value;\n\n const start = range[0] \|\| today;\n const end = range[1] \|\| start;\n\n const [startYear, startMonth] = start.split('-').map(Number);\n const [todayYear, todayMonth] = today.split('-').map(Number);\n\n if (end <= today) {\n // A. 완전 과거 검색(당월 포함X): 좌측 = 시작월 / 우측 = 종료월\n this.prevYear = startYear;\n this.prevMonth = startMonth;\n } else if (start < today && end > today) {\n // B. 과거~미래 걸침(당월 포함O): 좌측 = 오늘의 달\n this.prevYear = todayYear;\n this.prevMonth = todayMonth;\n } else {\n // C. 완전 미래 검색(당월 포함X): 좌측 = 시작월\n this.prevYear = startYear;\n this.prevMonth = startMonth;\n }\n }\n\n private get nextYear(): number {\n return this.prevMonth === 12 ? this.prevYear + 1 : this.prevYear;\n }\n\n private get nextMonth(): number {\n return this.prevMonth === 12 ? 1 : this.prevMonth + 1;\n }\n\n private get prevCalendar() {\n return this.dateUtil.createCalendar(this.prevYear, this.prevMonth);\n }\n\n private get nextCalendar() {\n return this.dateUtil.createCalendar(this.nextYear, this.nextMonth);\n }\n\n private setPrevYear(year: number) {\n this.prevYear = year;\n }\n\n private setPrevMonth(month: number) {\n this.prevMonth = month;\n }\n\n private updateYearMonth(type: 'prev' \| 'next') {\n const { newYear, newMonth } = this.dateUtil.calculateYearMonth(\n this.prevYear,\n this.prevMonth,\n type,\n );\n\n this.setPrevYear(newYear);\n this.setPrevMonth(newMonth);\n }\n\n private setHoverDate(date: string) {\n this.hoverDate = date;\n }\n\n private setDateRange(dateRange: [string, string]) {\n this.dateRange = dateRange;\n }\n\n / ----------------------------------\n * UI Helpers\n * ---------------------------------- /\n\n private formatDate(index: number, day: number) {\n return this.dateUtil.formatDate(\n index === 0 ? this.prevYear : this.nextYear,\n index === 0 ? this.prevMonth : this.nextMonth,\n day,\n );\n }\n\n private getDateBoxType(date: string): Type {\n const [start, end] = this.dateRange;\n\n if (date === start) return end ? 'start' : this.hoverDate < this.dateRange[0] ? 'end' : 'start';\n if (date === end) return 'end';\n return '';\n }\n\n private isDateInRange(date: string): boolean {\n const [start, end] = this.dateRange;\n\n // 1. 날짜 범위가 완전히 선택된 경우\n if (start && end) {\n return date >= start && date <= end;\n }\n\n // 2. hover 상태의 날짜 범위를 확인\n if (!this.hoverDate \|\| !start \|\| end) {\n return false;\n }\n\n // 3. dateRange[0]과 hoverDate를 기준으로 범위 계산\n const [from, to] = start <= this.hoverDate ? [start, this.hoverDate] : [this.hoverDate, start];\n\n return date >= from && date <= to;\n }\n\n private isDisabledDate(date: string): boolean {\n const [start, end] = this.dateRange;\n\n if (this.maxRange && start && !end) {\n const minDate = addDays(start, -this.maxRange);\n const maxDate = addDays(start, this.maxRange);\n return !(minDate <= date && date <= maxDate);\n }\n\n if (!this.selectable \|\| !this.selectable[0] \|\| !this.selectable[1]) {\n return false;\n }\n return !(date >= this.selectable[0] && date <= this.selectable[1]);\n }\n\n / ----------------------------------\n * Interaction\n * ---------------------------------- */\n\n private openMenu() {\n if (this.disabled) return;\n\n this.tempDateRange = [...this.dateRange];\n this.resetCalendarByDateRange(this.dateRange);\n this.isOpen = true;\n }\n\n private closeMenu = () => {\n if (!this.dateRange[0] \|\| !this.dateRange[1]) {\n this.dateRange = [...this.tempDateRange];\n }\n\n this.isOpen = false;\n };\n\n private handleDateClick(index: number, day: number) {\n this.setHoverDate('');\n\n const selectedDate = this.formatDate(index, day);\n\n if (!this.dateRange[0] \|\| !!this.dateRange[1] \|\| selectedDate < this.dateRange[0]) {\n this.setDateRange([selectedDate, '']);\n return; // 아직 완료 아님\n }\n\n const newRange: [string, string] = [this.dateRange[0], selectedDate];\n this.setDateRange(newRange);\n\n this.value = newRange;\n this.sdChange.emit?.(newRange);\n }\n\n private handleDateHover(index: number, day: number) {\n const hoverDate = this.formatDate(index, day);\n this.setHoverDate(hoverDate);\n }\n\n render() {\n return (\n <Host\n class={{\n 'sd-date-range-picker': true,\n 'sd-date-range-picker--disabled': this.disabled,\n }}\n >\n <sd-input\n ref={el => (this.inputEl = el as unknown as HTMLElement)}\n value={!!this.dateRange[0] ? `${this.dateRange[0]} ~ ${this.dateRange[1]}` : ''}\n label={this.label}\n inside-label\n readonly\n disabled={this.disabled}\n placeholder={this.placeholder}\n inputClass=\"sd-date-range-picker__input\"\n onClick={() => this.openMenu()}\n >\n <sd-icon\n slot=\"prefix\"\n name=\"date\"\n size=\"16\"\n color={this.disabled ? 'grey_65' : 'grey_70'}\n class=\"date-icon\"\n onClick={() => this.openMenu()}\n ></sd-icon>\n </sd-input>\n\n {this.isOpen && (\n <sd-portal open={this.isOpen} parentRef={this.inputEl} onSdClose={this.closeMenu}>\n <div class=\"sd-date-range-picker__menu\">\n <div class=\"sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center\">\n <button\n type=\"button\"\n name=\"prev\"\n title=\"Previous\"\n onClick={() => this.setPrevYear(this.prevYear - 1)}\n >\n <sd-icon name=\"arrowLeft\" size=\"12\" color=\"#CCCCCC\" />\n </button>\n\n <div class=\"header-label\">{this.prevYear}</div>\n\n <button\n type=\"button\"\n name=\"next\"\n title=\"Next\"\n onClick={() => this.setPrevYear(this.prevYear + 1)}\n >\n <sd-icon name=\"arrowRight\" size=\"12\" color=\"#CCCCCC\" />\n </button>\n </div>\n\n <div class=\"sd-date-range-picker__body\">\n {[this.prevCalendar, this.nextCalendar].map((calendar, index) => (\n <Fragment>\n {index === 1 && <div class=\"separator\"></div>}\n\n <div key={index} class=\"calendar-container\">\n <div class=\"calendar-header\">\n <button\n type=\"button\"\n name=\"month\"\n title=\"Month\"\n class={index === 0 ? 'header-button-prev' : 'header-button-next'}\n onClick={() => this.updateYearMonth(index === 0 ? 'prev' : 'next')}\n >\n <sd-icon name={index === 0 ? 'arrowLeft' : 'arrowRight'} size=\"12\" color=\"#CCCCCC\" />\n </button>\n {index === 0\n ? `${this.prevYear}.${String(this.prevMonth).padStart(2, '0')}`\n : `${this.nextYear}.${String(this.nextMonth).padStart(2, '0')}`}\n </div>\n\n <div class=\"calendar-days\">\n {['일', '월', '화', '수', '목', '금', '토'].map(day => (\n <sd-date-box key={day} date={day} disabled class=\"day\" />\n ))}\n </div>\n\n <div class=\"calendar-body mt-12pxr grid grid-cols-7 gap-y-8pxr\">\n {[...calendar.prevMonthDays, ...calendar.days, ...calendar.afterMonthDays].map(\n (day, idx) => (\n <sd-date-box\n key={`prev${day}_${idx}`}\n date={!day ? '' : Number(day)}\n selected={this.dateRange.some(date => date === this.formatDate(index, Number(day)))}\n type={this.getDateBoxType(this.formatDate(index, Number(day)))}\n isToday={today === this.formatDate(index, Number(day))}\n disabled={!day ? true : this.isDisabledDate(this.formatDate(index, Number(day)))}\n inRange={this.isDateInRange(this.formatDate(index, Number(day)))}\n isStartDate={this.dateRange[0] === this.formatDate(index, Number(day))}\n isEndDate={this.dateRange[1] === this.formatDate(index, Number(day))}\n onClick={() => this.handleDateClick(index, Number(day))}\n onMouseOver={() => this.handleDateHover(index, Number(day))}\n />\n ),\n )}\n </div>\n </div>\n </Fragment>\n ))}\n </div>\n </div>\n </sd-portal>\n )}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"sd-date-range-picker.js","mappings":"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","names":["SdDateRangePicker","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/utils/date/addDays.ts","src/components/sd-date-range-picker/sd-date-range-picker.scss?tag=sd-date-range-picker&encapsulation=scoped","src/components/sd-date-range-picker/sd-date-range-picker.tsx"],"sourcesContent":["export const addDays = (inputDate: string, days: number) => {\n const [year, month, day] = inputDate.split('-').map(Number);\n const date = new Date(year, month - 1, day); // month는 0부터 시작하므로 -1\n\n // 날짜 계산\n date.setDate(date.getDate() + days);\n\n // yyyy-mm-dd 형식으로 변환\n const resultYear = date.getFullYear();\n const resultMonth = String(date.getMonth() + 1).padStart(2, '0');\n const resultDay = String(date.getDate()).padStart(2, '0');\n\n return `${resultYear}-${resultMonth}-${resultDay}`;\n};\n","@import 'variables';\n\nsd-date-range-picker {\n width: fit-content;\n display: inline-flex;\n\n .sd-date-range-picker--disabled {\n .date-icon {\n cursor: not-allowed !important;\n color: $grey_65 !important;\n }\n .sd-input__native {\n color: $grey_65 !important;\n }\n }\n\n .sd-field {\n .sd-field__control {\n min-width: 210px;\n }\n\n .sd-input__native {\n margin-left: 17px !important;\n }\n }\n}\n\n.sd-date-range-picker__menu {\n width: 609px;\n box-sizing: border-box;\n border-radius: 8px;\n padding: 24px 19px;\n box-shadow: 2px 2px 12px 2px #00000033;\n background: white;\n\n .sd-date-range-picker__header {\n margin-bottom: 16px;\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n justify-content: center;\n\n .header-label {\n margin: 0 12px;\n width: 40px;\n text-align: center;\n font-size: 14px;\n line-height: 24px;\n }\n }\n .sd-date-range-picker__body {\n display: flex;\n flex-flow: row nowrap;\n align-items: stretch;\n gap: 19px;\n .calendar-container {\n width: 266px;\n\n .calendar-header {\n width: 100%;\n height: 24px;\n line-height: 24px;\n font-size: 14px;\n text-align: center;\n position: relative;\n padding: 0 5px;\n\n button {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n\n &.header-button-prev {\n left: 5px;\n }\n\n &.header-button-next {\n right: 5px;\n left: auto;\n }\n }\n }\n\n .calendar-days {\n padding: 0 5px;\n margin-top: 8px;\n display: grid;\n grid-template-columns: repeat(7, minmax(0, 1fr));\n column-gap: 10px;\n\n .day {\n width: 28px;\n height: 20px;\n font-size: 12px;\n line-height: 20px;\n text-align: center;\n color: $grey_65;\n }\n }\n\n .calendar-body {\n margin-top: 12px;\n display: grid;\n grid-template-columns: repeat(7, minmax(0, 1fr));\n }\n }\n .separator {\n width: 1px;\n background-color: $grey_35;\n }\n }\n}\n","import {\n Component,\n Element,\n Prop,\n State,\n Event,\n h,\n EventEmitter,\n Host,\n Fragment,\n Watch,\n} from '@stencil/core';\nimport { useDatePicker } from '../../modules/useDatePicker';\nimport { addDays, today } from '../../utils/date';\nimport { Type } from '../sd-date-box/sd-date-box';\n\n@Component({\n tag: 'sd-date-range-picker',\n styleUrl: 'sd-date-range-picker.scss',\n scoped: true,\n})\nexport class SdDateRangePicker {\n @Element() el!: HTMLElement;\n\n @Prop({ mutable: true }) value: [string, string] = ['', ''];\n @Prop() label?: string;\n @Prop() selectable?: [string, string];\n @Prop() maxRange?: number;\n @Prop() disabled: boolean = false;\n @Prop() placeholder: string = '';\n\n @State() isOpen: boolean = false;\n @State() dateRange: [string, string] = this.value;\n @State() hoverDate: string = '';\n @State() prevYear: number = Number(this.dateRange[0].split('-')[0]);\n @State() prevMonth: number = Number(this.dateRange[0].split('-')[1]);\n\n @Event({ eventName: 'sdUpdate' }) update!: EventEmitter<[string, string]>;\n\n private inputEl?: HTMLElement;\n private dateUtil = useDatePicker();\n private tempDateRange: [string, string] = ['', ''];\n\n componentWillLoad() {\n this.syncFromValue(this.value);\n }\n\n @Watch('value')\n onValueChange(newValue: [string, string]) {\n this.dateRange = [...newValue];\n }\n\n private syncFromValue(value: [string, string]) {\n this.dateRange = [...value];\n this.resetCalendarByDateRange(value);\n }\n\n /* ----------------------------------\n * Calendar View Logic\n * ---------------------------------- /\n\n private resetCalendarByDateRange(range: [string, string]) {\n // this.dateRange = this.value;\n\n const start = range[0] \|\| today;\n const end = range[1] \|\| start;\n\n const [startYear, startMonth] = start.split('-').map(Number);\n const [todayYear, todayMonth] = today.split('-').map(Number);\n\n if (end <= today) {\n // A. 완전 과거 검색(당월 포함X): 좌측 = 시작월 / 우측 = 종료월\n this.prevYear = startYear;\n this.prevMonth = startMonth;\n } else if (start < today && end > today) {\n // B. 과거~미래 걸침(당월 포함O): 좌측 = 오늘의 달\n this.prevYear = todayYear;\n this.prevMonth = todayMonth;\n } else {\n // C. 완전 미래 검색(당월 포함X): 좌측 = 시작월\n this.prevYear = startYear;\n this.prevMonth = startMonth;\n }\n }\n\n private get nextYear(): number {\n return this.prevMonth === 12 ? this.prevYear + 1 : this.prevYear;\n }\n\n private get nextMonth(): number {\n return this.prevMonth === 12 ? 1 : this.prevMonth + 1;\n }\n\n private get prevCalendar() {\n return this.dateUtil.createCalendar(this.prevYear, this.prevMonth);\n }\n\n private get nextCalendar() {\n return this.dateUtil.createCalendar(this.nextYear, this.nextMonth);\n }\n\n private setPrevYear(year: number) {\n this.prevYear = year;\n }\n\n private setPrevMonth(month: number) {\n this.prevMonth = month;\n }\n\n private updateYearMonth(type: 'prev' \| 'next') {\n const { newYear, newMonth } = this.dateUtil.calculateYearMonth(\n this.prevYear,\n this.prevMonth,\n type,\n );\n\n this.setPrevYear(newYear);\n this.setPrevMonth(newMonth);\n }\n\n private setHoverDate(date: string) {\n this.hoverDate = date;\n }\n\n private setDateRange(dateRange: [string, string]) {\n this.dateRange = dateRange;\n }\n\n / ----------------------------------\n * UI Helpers\n * ---------------------------------- /\n\n private formatDate(index: number, day: number) {\n return this.dateUtil.formatDate(\n index === 0 ? this.prevYear : this.nextYear,\n index === 0 ? this.prevMonth : this.nextMonth,\n day,\n );\n }\n\n private getDateBoxType(date: string): Type {\n const [start, end] = this.dateRange;\n\n if (date === start) return end ? 'start' : this.hoverDate < this.dateRange[0] ? 'end' : 'start';\n if (date === end) return 'end';\n return '';\n }\n\n private isDateInRange(date: string): boolean {\n const [start, end] = this.dateRange;\n\n // 1. 날짜 범위가 완전히 선택된 경우\n if (start && end) {\n return date >= start && date <= end;\n }\n\n // 2. hover 상태의 날짜 범위를 확인\n if (!this.hoverDate \|\| !start \|\| end) {\n return false;\n }\n\n // 3. dateRange[0]과 hoverDate를 기준으로 범위 계산\n const [from, to] = start <= this.hoverDate ? [start, this.hoverDate] : [this.hoverDate, start];\n\n return date >= from && date <= to;\n }\n\n private isDisabledDate(date: string): boolean {\n const [start, end] = this.dateRange;\n\n if (this.maxRange && start && !end) {\n const minDate = addDays(start, -this.maxRange);\n const maxDate = addDays(start, this.maxRange);\n return !(minDate <= date && date <= maxDate);\n }\n\n if (!this.selectable \|\| !this.selectable[0] \|\| !this.selectable[1]) {\n return false;\n }\n return !(date >= this.selectable[0] && date <= this.selectable[1]);\n }\n\n / ----------------------------------\n * Interaction\n * ---------------------------------- */\n\n private openMenu() {\n if (this.disabled) return;\n\n this.tempDateRange = [...this.dateRange];\n this.resetCalendarByDateRange(this.dateRange);\n this.isOpen = true;\n }\n\n private closeMenu = () => {\n if (!this.dateRange[0] \|\| !this.dateRange[1]) {\n this.dateRange = [...this.tempDateRange];\n }\n\n this.isOpen = false;\n };\n\n private handleDateClick(index: number, day: number) {\n this.setHoverDate('');\n\n const selectedDate = this.formatDate(index, day);\n\n if (!this.dateRange[0] \|\| !!this.dateRange[1] \|\| selectedDate < this.dateRange[0]) {\n this.setDateRange([selectedDate, '']);\n return; // 아직 완료 아님\n }\n\n const newRange: [string, string] = [this.dateRange[0], selectedDate];\n this.setDateRange(newRange);\n\n this.value = newRange;\n this.update.emit?.(newRange);\n }\n\n private handleDateHover(index: number, day: number) {\n const hoverDate = this.formatDate(index, day);\n this.setHoverDate(hoverDate);\n }\n\n render() {\n return (\n <Host\n class={{\n 'sd-date-range-picker': true,\n 'sd-date-range-picker--disabled': this.disabled,\n }}\n >\n <sd-input\n ref={el => (this.inputEl = el as unknown as HTMLElement)}\n value={!!this.dateRange[0] ? `${this.dateRange[0]} ~ ${this.dateRange[1]}` : ''}\n label={this.label}\n inside-label\n readonly\n disabled={this.disabled}\n placeholder={this.placeholder}\n inputClass=\"sd-date-range-picker__input\"\n onClick={() => this.openMenu()}\n >\n <sd-icon\n slot=\"prefix\"\n name=\"date\"\n size=\"16\"\n color={this.disabled ? 'grey_65' : 'grey_70'}\n class=\"date-icon\"\n onClick={() => this.openMenu()}\n ></sd-icon>\n </sd-input>\n\n {this.isOpen && (\n <sd-portal open={this.isOpen} parentRef={this.inputEl} onSdClose={this.closeMenu}>\n <div class=\"sd-date-range-picker__menu\">\n <div class=\"sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center\">\n <button\n type=\"button\"\n name=\"prev\"\n title=\"Previous\"\n onClick={() => this.setPrevYear(this.prevYear - 1)}\n >\n <sd-icon name=\"arrowLeft\" size=\"12\" color=\"#CCCCCC\" />\n </button>\n\n <div class=\"header-label\">{this.prevYear}</div>\n\n <button\n type=\"button\"\n name=\"next\"\n title=\"Next\"\n onClick={() => this.setPrevYear(this.prevYear + 1)}\n >\n <sd-icon name=\"arrowRight\" size=\"12\" color=\"#CCCCCC\" />\n </button>\n </div>\n\n <div class=\"sd-date-range-picker__body\">\n {[this.prevCalendar, this.nextCalendar].map((calendar, index) => (\n <Fragment>\n {index === 1 && <div class=\"separator\"></div>}\n\n <div key={index} class=\"calendar-container\">\n <div class=\"calendar-header\">\n <button\n type=\"button\"\n name=\"month\"\n title=\"Month\"\n class={index === 0 ? 'header-button-prev' : 'header-button-next'}\n onClick={() => this.updateYearMonth(index === 0 ? 'prev' : 'next')}\n >\n <sd-icon name={index === 0 ? 'arrowLeft' : 'arrowRight'} size=\"12\" color=\"#CCCCCC\" />\n </button>\n {index === 0\n ? `${this.prevYear}.${String(this.prevMonth).padStart(2, '0')}`\n : `${this.nextYear}.${String(this.nextMonth).padStart(2, '0')}`}\n </div>\n\n <div class=\"calendar-days\">\n {['일', '월', '화', '수', '목', '금', '토'].map(day => (\n <sd-date-box key={day} date={day} disabled class=\"day\" />\n ))}\n </div>\n\n <div class=\"calendar-body mt-12pxr grid grid-cols-7 gap-y-8pxr\">\n {[...calendar.prevMonthDays, ...calendar.days, ...calendar.afterMonthDays].map(\n (day, idx) => (\n <sd-date-box\n key={`prev${day}_${idx}`}\n date={!day ? '' : Number(day)}\n selected={this.dateRange.some(date => date === this.formatDate(index, Number(day)))}\n type={this.getDateBoxType(this.formatDate(index, Number(day)))}\n isToday={today === this.formatDate(index, Number(day))}\n disabled={!day ? true : this.isDisabledDate(this.formatDate(index, Number(day)))}\n inRange={this.isDateInRange(this.formatDate(index, Number(day)))}\n isStartDate={this.dateRange[0] === this.formatDate(index, Number(day))}\n isEndDate={this.dateRange[1] === this.formatDate(index, Number(day))}\n onClick={() => this.handleDateClick(index, Number(day))}\n onMouseOver={() => this.handleDateHover(index, Number(day))}\n />\n ),\n )}\n </div>\n </div>\n </Fragment>\n ))}\n </div>\n </div>\n </sd-portal>\n )}\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/{sd-td.d.ts → sd-field.d.ts} RENAMED Viewed

@@ -1,9 +1,9 @@
 import type { Components, JSX } from "../types/components";
-interface SdTd extends Components.SdTd, HTMLElement {}
-export const SdTd: {
-    prototype: SdTd;
-    new (): SdTd;
+interface SdField extends Components.SdField, HTMLElement {}
+export const SdField: {
+    prototype: SdField;
+    new (): SdField;
 };
 /**
  * Used to define this component and all nested components recursively.

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

@@ -0,0 +1,9 @@
+import { S as SdField$1, d as defineCustomElement$1 } from './p-CpRkV7pg.js';
+const SdField = SdField$1;
+const defineCustomElement = defineCustomElement$1;
+export { SdField, defineCustomElement };
+//# sourceMappingURL=sd-field.js.map
+//# sourceMappingURL=sd-field.js.map

package/dist/components/sd-field.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"file":"sd-field.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/sd-file-picker.js CHANGED Viewed

@@ -1,7 +1,7 @@
-import { p as proxyCustomElement, H, d as createEvent, h, t as transformTag } from './p-CQBrru3e.js';
-import { d as defineCustomElement$2 } from './p-BHHbLFXg.js';
+import { p as proxyCustomElement, H, d as createEvent, h, t as transformTag } from './p-YLoygqPr.js';
+import { d as defineCustomElement$2 } from './p-DnQF6htq.js';
-const sdFilePickerCss = () => `.sd-file-picker{display:inline-flex;align-items:center;max-width:var(--picker-width, 100%);height:28px;gap:8px;padding:4px 8px;border:1px solid #aaaaaa;border-radius:4px;background-color:#ffffff;cursor:pointer;user-select:none;position:relative;vertical-align:middle}.sd-file-picker__text{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:400;font-size:12px;line-height:20px;color:#aaaaaa}.sd-file-picker__text--active{color:#222222}.sd-file-picker__text--placeholder{color:#aaaaaa}.sd-file-picker__icon{flex-shrink:0}.sd-file-picker__clear-icon{flex-shrink:0;cursor:pointer;transition:opacity 0.2s ease}.sd-file-picker__clear-icon:hover{opacity:0.7}.sd-file-picker__input{display:none}.sd-file-picker__tooltip{position:absolute;top:calc(100% - 4px);left:50%;transform:translate(-50%);z-index:1000;white-space:nowrap;padding:8px 12px;background:rgba(0, 0, 0, 0.8);color:white;font-size:12px;line-height:18px;border-radius:4px;pointer-events:none}.sd-file-picker:hover:not(.sd-file-picker--inline):not(.sd-file-picker--disabled){background-color:#f6f6f6}.sd-file-picker--active:not(.sd-file-picker--inline):not(.sd-file-picker--disabled){background-color:#ffffff}.sd-file-picker--active:not(.sd-file-picker--inline):not(.sd-file-picker--disabled) .sd-file-picker__text{color:#222222}.sd-file-picker--disabled:not(.sd-file-picker--inline){background-color:#eeeeee;border-color:#cccccc}.sd-file-picker--disabled:not(.sd-file-picker--inline) .sd-file-picker__text{color:#888888}.sd-file-picker--inline{border:none;background-color:transparent;padding:0;height:auto}.sd-file-picker--inline .sd-file-picker__text{color:#aaaaaa}.sd-file-picker--inline:hover:not(.sd-file-picker--disabled) .sd-file-picker__text{color:#737373}.sd-file-picker--inline.sd-file-picker--active:not(.sd-file-picker--disabled) .sd-file-picker__text--active{color:#222222}.sd-file-picker--inline.sd-file-picker--disabled .sd-file-picker__text{color:#cccccc}`;
+const sdFilePickerCss = () => `sd-file-picker{display:inline-flex}.sd-file-picker{display:inline-flex;align-items:center;max-width:var(--picker-width, 100%);height:28px;gap:8px;padding:4px 8px;border:1px solid #aaaaaa;border-radius:4px;background-color:#ffffff;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;vertical-align:middle}.sd-file-picker__text{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:400;font-size:12px;line-height:20px;color:#aaaaaa}.sd-file-picker__text--active{color:#222222}.sd-file-picker__text--placeholder{color:#aaaaaa}.sd-file-picker__icon{flex-shrink:0}.sd-file-picker__clear-icon{flex-shrink:0;cursor:pointer;transition:opacity 0.2s ease}.sd-file-picker__clear-icon:hover{opacity:0.7}.sd-file-picker__input{display:none}.sd-file-picker__tooltip{position:absolute;top:calc(100% - 4px);left:50%;transform:translate(-50%);z-index:1000;white-space:nowrap;padding:8px 12px;background:rgba(0, 0, 0, 0.8);color:white;font-size:12px;line-height:18px;border-radius:4px;pointer-events:none}.sd-file-picker:hover:not(.sd-file-picker--inline):not(.sd-file-picker--disabled){background-color:#f6f6f6}.sd-file-picker--active:not(.sd-file-picker--inline):not(.sd-file-picker--disabled){background-color:#ffffff}.sd-file-picker--active:not(.sd-file-picker--inline):not(.sd-file-picker--disabled) .sd-file-picker__text{color:#222222}.sd-file-picker--disabled:not(.sd-file-picker--inline){background-color:#eeeeee;border-color:#cccccc;cursor:not-allowed !important}.sd-file-picker--disabled:not(.sd-file-picker--inline) .sd-file-picker__text{color:#888888}.sd-file-picker--inline{border:none;background-color:transparent;padding:0;height:auto}.sd-file-picker--inline .sd-file-picker__text{color:#aaaaaa}.sd-file-picker--inline:hover:not(.sd-file-picker--disabled) .sd-file-picker__text{color:#737373}.sd-file-picker--inline.sd-file-picker--active:not(.sd-file-picker--disabled) .sd-file-picker__text--active{color:#222222}.sd-file-picker--inline.sd-file-picker--disabled .sd-file-picker__text{color:#cccccc}`;
 const SdFilePicker$1 = /*@__PURE__*/ proxyCustomElement(class SdFilePicker extends H {
     constructor(registerHost) {
@@ -9,7 +9,7 @@ const SdFilePicker$1 = /*@__PURE__*/ proxyCustomElement(class SdFilePicker exten
         if (registerHost !== false) {
             this.__registerHost();
         }
-        this.sdChange = createEvent(this, "sdChange");
+        this.update = createEvent(this, "sdUpdate");
     }
     get el() { return this; }
     value = null;
@@ -24,7 +24,7 @@ const SdFilePicker$1 = /*@__PURE__*/ proxyCustomElement(class SdFilePicker exten
     showTooltip = false;
     fileInputRef;
     fileNamesRef;
-    sdChange;
+    update;
     valueChanged(newValue) {
         this.internalValue = newValue;
     }
@@ -48,14 +48,14 @@ const SdFilePicker$1 = /*@__PURE__*/ proxyCustomElement(class SdFilePicker exten
             this.internalValue = fileArray[0];
         }
         this.value = this.internalValue;
-        this.sdChange?.emit(this.value);
+        this.update?.emit(this.value);
     };
     handleClear = (event) => {
         event.stopPropagation();
         const clearedValue = this.multiple ? [] : null;
         this.value = clearedValue;
         this.internalValue = clearedValue;
-        this.sdChange?.emit(clearedValue);
+        this.update?.emit(clearedValue);
         if (this.fileInputRef) {
             this.fileInputRef.value = '';
         }
@@ -103,15 +103,15 @@ const SdFilePicker$1 = /*@__PURE__*/ proxyCustomElement(class SdFilePicker exten
     render() {
         const hasFiles = this.hasFiles();
         const displayText = this.getDisplayText();
-        return (h("div", { key: '467ea6ab920e23a8cf98db73f3ba5507e0634bc8', class: {
+        return (h("div", { key: 'dac7726e25ba3bf4afa0da022cb3e472a8891cec', class: {
                 'sd-file-picker': true,
                 [this.getStatusClass()]: true,
                 'sd-file-picker--inline': this.inline,
-            }, onClick: this.handleClick, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, h("input", { key: '20ff1404f15beaeff2f4f3e0b1772aadbd986934', ref: el => (this.fileInputRef = el), type: "file", class: "sd-file-picker__input", disabled: this.disabled, multiple: this.multiple, accept: this.accept, onInput: this.handleFileChange, "aria-label": this.placeholder }), h("sd-icon", { key: '59e00f4ba49547aacf99dfab54c391c49895d8df', name: "attachFile", size: 16, color: this.getIconColor(), class: "sd-file-picker__icon" }), h("div", { key: 'be74c5aebcc947aacf6841b15915cc98af5453e6', ref: el => (this.fileNamesRef = el), class: {
+            }, onClick: this.handleClick, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, h("input", { key: '1ab733ebf6d98ad792b7b6d06f562b014504a2fe', ref: el => (this.fileInputRef = el), type: "file", class: "sd-file-picker__input", disabled: this.disabled, multiple: this.multiple, accept: this.accept, onInput: this.handleFileChange, "aria-label": this.placeholder }), h("sd-icon", { key: 'c82214c83107f01314de1eb380a421fc80af043f', name: "attachFile", size: 16, color: this.getIconColor(), class: "sd-file-picker__icon" }), h("div", { key: '11f5bfca6d50fd4e78c902ddc52995b3ed399b21', ref: el => (this.fileNamesRef = el), class: {
                 'sd-file-picker__text': true,
                 'sd-file-picker__text--placeholder': !hasFiles,
                 'sd-file-picker__text--active': hasFiles,
-            } }, displayText), !this.disabled && hasFiles && (h("sd-icon", { key: '0547537e85b8eb0f2678c3023eeec9241caf0ced', name: "close", size: 12, color: "#888888", class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (h("div", { key: '86bf77f26f2aea00c31c9770c2142353d92d239c', class: "sd-file-picker__tooltip" }, displayText))));
+            } }, displayText), !this.disabled && hasFiles && (h("sd-icon", { key: 'e429e10a285f12e16d1fa362e51903f12119bf3b', name: "close", size: 12, color: "#888888", class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (h("div", { key: '1a7c924eed094fdb070ed5711a9b09aeea8f3c56', class: "sd-file-picker__tooltip" }, displayText))));
     }
     static get watchers() { return {
         "value": ["valueChanged"]

package/dist/components/sd-file-picker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"sd-file-picker.js","mappings":"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","names":["SdFilePicker","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-file-picker/sd-file-picker.scss?tag=sd-file-picker","src/components/sd-file-picker/sd-file-picker.tsx"],"sourcesContent":["@import 'variables';\n\n.sd-file-picker {\n display: inline-flex;\n align-items: center;\n max-width: var(--picker-width, 100%);\n height: 28px;\n gap: 8px;\n padding: 4px 8px;\n border: 1px solid $grey_55;\n border-radius: 4px;\n background-color: $white;\n cursor: pointer;\n user-select: none;\n position: relative;\n vertical-align: middle;\n\n &__text {\n flex: 1;\n min-width: 0;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n font-weight: 400;\n font-size: 12px;\n line-height: 20px;\n color: $grey_55;\n\n &--active {\n color: $grey_95;\n }\n\n &--placeholder {\n color: $grey_55;\n }\n }\n\n &__icon {\n flex-shrink: 0;\n }\n\n &__clear-icon {\n flex-shrink: 0;\n cursor: pointer;\n transition: opacity 0.2s ease;\n\n &:hover {\n opacity: 0.7;\n }\n }\n\n &__input {\n display: none;\n }\n\n &__tooltip {\n position: absolute;\n top: calc(100% - 4px);\n left: 50%;\n transform: translate(-50%);\n z-index: 1000;\n white-space: nowrap;\n padding: 8px 12px;\n background: rgba(0, 0, 0, 0.8);\n color: white;\n font-size: 12px;\n line-height: 18px;\n border-radius: 4px;\n pointer-events: none;\n }\n\n &:hover:not(&--inline):not(&--disabled) {\n background-color: $grey_10;\n }\n\n &--active:not(&--inline):not(&--disabled) {\n background-color: $white;\n\n .sd-file-picker__text {\n color: $grey_95;\n }\n }\n\n &--disabled:not(&--inline) {\n background-color: $grey_20;\n border-color: $grey_45;\n\n .sd-file-picker__text {\n color: $grey_65;\n }\n }\n\n &--inline {\n border: none;\n background-color: transparent;\n padding: 0;\n height: auto;\n\n .sd-file-picker__text {\n color: $grey_55;\n }\n\n &:hover:not(.sd-file-picker--disabled) {\n .sd-file-picker__text {\n color: $grey_70;\n }\n }\n\n &.sd-file-picker--active:not(.sd-file-picker--disabled) {\n .sd-file-picker__text--active {\n color: $grey_95;\n }\n }\n\n &.sd-file-picker--disabled {\n\n .sd-file-picker__text {\n color: $grey_45;\n }\n\n }\n }\n}","import {\n ComponentInterface,\n Component,\n Element,\n Prop,\n State,\n Event,\n EventEmitter,\n Watch,\n h,\n} from '@stencil/core';\n\n@Component({\n tag: 'sd-file-picker',\n styleUrl: 'sd-file-picker.scss',\n})\nexport class SdFilePicker implements ComponentInterface {\n @Element() el!: HTMLElement;\n\n @Prop({ mutable: true }) value?: File[] \| File \| null = null;\n @Prop() placeholder: string = 'Click to upload';\n @Prop() disabled: boolean = false;\n @Prop() inline: boolean = false;\n @Prop() multiple: boolean = false;\n @Prop() accept?: string;\n @Prop() width?: number \| string;\n\n @State() private internalValue: File[] \| File \| null = null;\n @State() private hovered: boolean = false;\n @State() private showTooltip: boolean = false;\n\n private fileInputRef?: HTMLInputElement;\n private fileNamesRef?: HTMLElement;\n\n @Event() sdChange!: EventEmitter<File[] \| File \| null>;\n\n @Watch('value')\n valueChanged(newValue: File[] \| File \| null) {\n this.internalValue = newValue;\n }\n\n componentDidLoad() {\n this.checkOverflow();\n }\n\n componentDidUpdate() {\n this.checkOverflow();\n }\n\n private handleFileChange = (event: Event) => {\n const input = event.target as HTMLInputElement;\n const files = input.files;\n\n if (!files \|\| files.length === 0) {\n return;\n }\n\n const fileArray = Array.from(files);\n\n if (this.multiple) {\n this.internalValue = fileArray;\n } else {\n this.internalValue = fileArray[0];\n }\n this.value = this.internalValue;\n this.sdChange?.emit(this.value);\n };\n\n private handleClear = (event: Event) => {\n event.stopPropagation();\n const clearedValue = this.multiple ? [] : null;\n this.value = clearedValue;\n this.internalValue = clearedValue;\n this.sdChange?.emit(clearedValue);\n\n if (this.fileInputRef) {\n this.fileInputRef.value = '';\n }\n };\n\n private handleClick = () => {\n if (this.disabled) return;\n this.fileInputRef?.click();\n };\n\n private getStatusClass(): string {\n if (this.disabled) return 'sd-file-picker--disabled';\n if (this.hasFiles()) return 'sd-file-picker--active';\n return '';\n }\n\n private hasFiles(): boolean {\n if (!this.internalValue) return false;\n if (Array.isArray(this.internalValue)) {\n return this.internalValue.length > 0;\n }\n return true;\n }\n\n private getDisplayText(): string {\n if (!this.hasFiles()) return this.placeholder;\n\n if (Array.isArray(this.internalValue)) {\n return this.internalValue.map(f => f.name).join(', ');\n }\n\n return this.internalValue?.name \|\| this.placeholder;\n }\n\n private checkOverflow() {\n if (!this.fileNamesRef) return;\n const isOverflowing = this.fileNamesRef.scrollWidth > this.fileNamesRef.clientWidth;\n this.showTooltip = isOverflowing;\n }\n\n private getIconColor(): string {\n if (this.disabled) {\n return this.inline ? 'grey_45' : 'grey_55';\n }\n return 'grey_70';\n }\n\n render() {\n const hasFiles = this.hasFiles();\n const displayText = this.getDisplayText();\n\n return (\n <div\n class={{\n 'sd-file-picker': true,\n [this.getStatusClass()]: true,\n 'sd-file-picker--inline': this.inline,\n }}\n onClick={this.handleClick}\n onMouseEnter={() => (this.hovered = true)}\n onMouseLeave={() => (this.hovered = false)}\n >\n <input\n ref={el => (this.fileInputRef = el as HTMLInputElement)}\n type=\"file\"\n class=\"sd-file-picker__input\"\n disabled={this.disabled}\n multiple={this.multiple}\n accept={this.accept}\n onInput={this.handleFileChange}\n aria-label={this.placeholder}\n />\n\n <sd-icon name=\"attachFile\" size={16} color={this.getIconColor()} class=\"sd-file-picker__icon\" />\n\n <div\n ref={el => (this.fileNamesRef = el as HTMLElement)}\n class={{\n 'sd-file-picker__text': true,\n 'sd-file-picker__text--placeholder': !hasFiles,\n 'sd-file-picker__text--active': hasFiles,\n }}\n >\n {displayText}\n </div>\n\n {!this.disabled && hasFiles && (\n <sd-icon\n name=\"close\"\n size={12}\n color=\"#888888\"\n class=\"sd-file-picker__clear-icon\"\n onClick={this.handleClear}\n />\n )}\n\n {this.showTooltip && hasFiles && this.hovered && (\n <div class=\"sd-file-picker__tooltip\">{displayText}</div>\n )}\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"sd-file-picker.js","mappings":"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","names":["SdFilePicker","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-file-picker/sd-file-picker.scss?tag=sd-file-picker","src/components/sd-file-picker/sd-file-picker.tsx"],"sourcesContent":["@import 'variables';\n\nsd-file-picker {\n display: inline-flex;\n}\n.sd-file-picker {\n display: inline-flex;\n align-items: center;\n max-width: var(--picker-width, 100%);\n height: 28px;\n gap: 8px;\n padding: 4px 8px;\n border: 1px solid $grey_55;\n border-radius: 4px;\n background-color: $white;\n cursor: pointer;\n -webkit-user-select: none;\n user-select: none;\n position: relative;\n vertical-align: middle;\n\n &__text {\n flex: 1;\n min-width: 0;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n font-weight: 400;\n font-size: 12px;\n line-height: 20px;\n color: $grey_55;\n\n &--active {\n color: $grey_95;\n }\n\n &--placeholder {\n color: $grey_55;\n }\n }\n\n &__icon {\n flex-shrink: 0;\n }\n\n &__clear-icon {\n flex-shrink: 0;\n cursor: pointer;\n transition: opacity 0.2s ease;\n\n &:hover {\n opacity: 0.7;\n }\n }\n\n &__input {\n display: none;\n }\n\n &__tooltip {\n position: absolute;\n top: calc(100% - 4px);\n left: 50%;\n transform: translate(-50%);\n z-index: 1000;\n white-space: nowrap;\n padding: 8px 12px;\n background: rgba(0, 0, 0, 0.8);\n color: white;\n font-size: 12px;\n line-height: 18px;\n border-radius: 4px;\n pointer-events: none;\n }\n\n &:hover:not(&--inline):not(&--disabled) {\n background-color: $grey_10;\n }\n\n &--active:not(&--inline):not(&--disabled) {\n background-color: $white;\n\n .sd-file-picker__text {\n color: $grey_95;\n }\n }\n\n &--disabled:not(&--inline) {\n background-color: $grey_20;\n border-color: $grey_45;\n cursor: not-allowed !important;\n\n .sd-file-picker__text {\n color: $grey_65;\n }\n }\n\n &--inline {\n border: none;\n background-color: transparent;\n padding: 0;\n height: auto;\n\n .sd-file-picker__text {\n color: $grey_55;\n }\n\n &:hover:not(.sd-file-picker--disabled) {\n .sd-file-picker__text {\n color: $grey_70;\n }\n }\n\n &.sd-file-picker--active:not(.sd-file-picker--disabled) {\n .sd-file-picker__text--active {\n color: $grey_95;\n }\n }\n\n &.sd-file-picker--disabled {\n .sd-file-picker__text {\n color: $grey_45;\n }\n }\n }\n}\n","import {\n ComponentInterface,\n Component,\n Element,\n Prop,\n State,\n Event,\n EventEmitter,\n Watch,\n h,\n} from '@stencil/core';\n\n@Component({\n tag: 'sd-file-picker',\n styleUrl: 'sd-file-picker.scss',\n})\nexport class SdFilePicker implements ComponentInterface {\n @Element() el!: HTMLElement;\n\n @Prop({ mutable: true }) value?: File[] \| File \| null = null;\n @Prop() placeholder: string = 'Click to upload';\n @Prop() disabled: boolean = false;\n @Prop() inline: boolean = false;\n @Prop() multiple: boolean = false;\n @Prop() accept?: string;\n @Prop() width?: number \| string;\n\n @State() private internalValue: File[] \| File \| null = null;\n @State() private hovered: boolean = false;\n @State() private showTooltip: boolean = false;\n\n private fileInputRef?: HTMLInputElement;\n private fileNamesRef?: HTMLElement;\n\n @Event({ eventName: 'sdUpdate' }) update!: EventEmitter<File[] \| File \| null>;\n\n @Watch('value')\n valueChanged(newValue: File[] \| File \| null) {\n this.internalValue = newValue;\n }\n\n componentDidLoad() {\n this.checkOverflow();\n }\n\n componentDidUpdate() {\n this.checkOverflow();\n }\n\n private handleFileChange = (event: Event) => {\n const input = event.target as HTMLInputElement;\n const files = input.files;\n\n if (!files \|\| files.length === 0) {\n return;\n }\n\n const fileArray = Array.from(files);\n\n if (this.multiple) {\n this.internalValue = fileArray;\n } else {\n this.internalValue = fileArray[0];\n }\n this.value = this.internalValue;\n this.update?.emit(this.value);\n };\n\n private handleClear = (event: Event) => {\n event.stopPropagation();\n const clearedValue = this.multiple ? [] : null;\n this.value = clearedValue;\n this.internalValue = clearedValue;\n this.update?.emit(clearedValue);\n\n if (this.fileInputRef) {\n this.fileInputRef.value = '';\n }\n };\n\n private handleClick = () => {\n if (this.disabled) return;\n this.fileInputRef?.click();\n };\n\n private getStatusClass(): string {\n if (this.disabled) return 'sd-file-picker--disabled';\n if (this.hasFiles()) return 'sd-file-picker--active';\n return '';\n }\n\n private hasFiles(): boolean {\n if (!this.internalValue) return false;\n if (Array.isArray(this.internalValue)) {\n return this.internalValue.length > 0;\n }\n return true;\n }\n\n private getDisplayText(): string {\n if (!this.hasFiles()) return this.placeholder;\n\n if (Array.isArray(this.internalValue)) {\n return this.internalValue.map(f => f.name).join(', ');\n }\n\n return this.internalValue?.name \|\| this.placeholder;\n }\n\n private checkOverflow() {\n if (!this.fileNamesRef) return;\n const isOverflowing = this.fileNamesRef.scrollWidth > this.fileNamesRef.clientWidth;\n this.showTooltip = isOverflowing;\n }\n\n private getIconColor(): string {\n if (this.disabled) {\n return this.inline ? 'grey_45' : 'grey_55';\n }\n return 'grey_70';\n }\n\n render() {\n const hasFiles = this.hasFiles();\n const displayText = this.getDisplayText();\n\n return (\n <div\n class={{\n 'sd-file-picker': true,\n [this.getStatusClass()]: true,\n 'sd-file-picker--inline': this.inline,\n }}\n onClick={this.handleClick}\n onMouseEnter={() => (this.hovered = true)}\n onMouseLeave={() => (this.hovered = false)}\n >\n <input\n ref={el => (this.fileInputRef = el as HTMLInputElement)}\n type=\"file\"\n class=\"sd-file-picker__input\"\n disabled={this.disabled}\n multiple={this.multiple}\n accept={this.accept}\n onInput={this.handleFileChange}\n aria-label={this.placeholder}\n />\n\n <sd-icon name=\"attachFile\" size={16} color={this.getIconColor()} class=\"sd-file-picker__icon\" />\n\n <div\n ref={el => (this.fileNamesRef = el as HTMLElement)}\n class={{\n 'sd-file-picker__text': true,\n 'sd-file-picker__text--placeholder': !hasFiles,\n 'sd-file-picker__text--active': hasFiles,\n }}\n >\n {displayText}\n </div>\n\n {!this.disabled && hasFiles && (\n <sd-icon\n name=\"close\"\n size={12}\n color=\"#888888\"\n class=\"sd-file-picker__clear-icon\"\n onClick={this.handleClear}\n />\n )}\n\n {this.showTooltip && hasFiles && this.hovered && (\n <div class=\"sd-file-picker__tooltip\">{displayText}</div>\n )}\n </div>\n );\n }\n}\n"],"version":3}

package/dist/components/{sd-table-backup.d.ts → sd-floating-portal.d.ts} RENAMED Viewed

@@ -1,9 +1,9 @@
 import type { Components, JSX } from "../types/components";
-interface SdTableBackup extends Components.SdTableBackup, HTMLElement {}
-export const SdTableBackup: {
-    prototype: SdTableBackup;
-    new (): SdTableBackup;
+interface SdFloatingPortal extends Components.SdFloatingPortal, HTMLElement {}
+export const SdFloatingPortal: {
+    prototype: SdFloatingPortal;
+    new (): SdFloatingPortal;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/sd-floating-portal.js ADDED Viewed

@@ -0,0 +1,9 @@
+import { S as SdFloatingPopover, d as defineCustomElement$1 } from './p-CVMprLsE.js';
+const SdFloatingPortal = SdFloatingPopover;
+const defineCustomElement = defineCustomElement$1;
+export { SdFloatingPortal, defineCustomElement };
+//# sourceMappingURL=sd-floating-portal.js.map
+//# sourceMappingURL=sd-floating-portal.js.map

package/dist/components/sd-floating-portal.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"file":"sd-floating-portal.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/{sd-th.d.ts → sd-form.d.ts} RENAMED Viewed

@@ -1,9 +1,9 @@
 import type { Components, JSX } from "../types/components";
-interface SdTh extends Components.SdTh, HTMLElement {}
-export const SdTh: {
-    prototype: SdTh;
-    new (): SdTh;
+interface SdForm extends Components.SdForm, HTMLElement {}
+export const SdForm: {
+    prototype: SdForm;
+    new (): SdForm;
 };
 /**
  * Used to define this component and all nested components recursively.