@sellmate/design-system 1.0.78 → 1.2.0

package/dist/cjs/{sd-date-picker-calendar.cjs.entry.js → sd-date-picker-calendar_2.cjs.entry.js}

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index--F2wGuAi.js');
+var index = require('./index-Cw-78mnC.js');
 var useDatePicker = require('./useDatePicker-cK_XK_P6.js');
-var sdDatePicker_config = require('./sd-date-picker.config-CRgCT5dn.js');
+var sdDatePicker_config = require('./sd-date-picker.config-CjvrFpYK.js');
 
 const sdDatePickerCalendarCss = () => `sd-date-picker-calendar{display:block}sd-date-picker-calendar .sd-date-picker-calendar{display:flex;flex-direction:column;gap:var(--calendar-gap);height:328px;padding:var(--calendar-padding);background:var(--calendar-bg);border-radius:var(--calendar-radius);box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.2);user-select:none}sd-date-picker-calendar .sd-date-picker-calendar__header{display:flex;align-items:center;justify-content:center;gap:var(--calendar-header-gap);font-size:var(--calendar-header-font-size);line-height:var(--calendar-header-line-height);font-weight:var(--calendar-header-font-weight);color:var(--calendar-day-text)}sd-date-picker-calendar .sd-date-picker-calendar__nav-group{display:inline-flex;align-items:center;gap:var(--calendar-gap)}sd-date-picker-calendar .sd-date-picker-calendar__nav-group-month{width:100%}sd-date-picker-calendar .sd-date-picker-calendar__label{display:inline-flex;align-items:center;justify-content:center;min-width:40px;text-align:center}sd-date-picker-calendar .sd-date-picker-calendar__label-month{width:100%}sd-date-picker-calendar .sd-date-picker-calendar__divider{display:inline-block;width:1px;height:16px;background:var(--calendar-header-divider)}sd-date-picker-calendar .sd-date-picker-calendar__week{display:grid;grid-template-columns:repeat(7, var(--calendar-day-size))}sd-date-picker-calendar .sd-date-picker-calendar__week-cell{display:inline-flex;align-items:center;justify-content:center;height:20px;font-size:var(--calendar-week-font-size);line-height:var(--calendar-week-line-height);font-weight:var(--calendar-week-font-weight);color:var(--calendar-week-color)}sd-date-picker-calendar .sd-date-picker-calendar__grid{display:grid;grid-template-columns:repeat(7, var(--calendar-day-size));row-gap:var(--calendar-grid-row-gap)}sd-date-picker-calendar .sd-date-picker-calendar__day{display:inline-flex;align-items:center;justify-content:center;width:var(--calendar-day-size);height:32px;padding:0;border:none;background:transparent;cursor:pointer;font-size:var(--calendar-day-font-size);line-height:var(--calendar-day-line-height);font-weight:var(--calendar-day-font-weight);color:var(--calendar-day-text)}sd-date-picker-calendar .sd-date-picker-calendar__day-circle{display:inline-flex;align-items:center;justify-content:center;width:var(--calendar-day-circle-size);height:var(--calendar-day-circle-size);border-radius:calc(var(--calendar-day-circle-radius) * 1px);border:1px solid transparent;box-sizing:border-box}sd-date-picker-calendar .sd-date-picker-calendar__day:not(:disabled):hover .sd-date-picker-calendar__day-circle{border-radius:16px;border:1px solid var(--calendar-day-hover-border)}sd-date-picker-calendar .sd-date-picker-calendar__day--today .sd-date-picker-calendar__day-circle{font-weight:700}sd-date-picker-calendar .sd-date-picker-calendar__day--selected .sd-date-picker-calendar__day-circle{border-radius:16px;background:var(--calendar-day-select-bg);color:var(--calendar-day-select-text)}sd-date-picker-calendar .sd-date-picker-calendar__day--selected:not(:disabled):hover .sd-date-picker-calendar__day-circle{background:var(--calendar-day-select-bg);color:var(--calendar-day-select-text)}sd-date-picker-calendar .sd-date-picker-calendar__day--disabled{color:var(--calendar-day-disabled-text);background:none !important;cursor:not-allowed}sd-date-picker-calendar .sd-date-picker-calendar__day--empty{visibility:hidden;pointer-events:none}`;
 
@@ -101,9 +101,9 @@ const SdDatePickerCalendar = class {
         if (!this.selectable)
             return false;
         const [start, end] = this.selectable;
-        if (start && date < start)
+        if (start !== '' && date < start)
             return true;
-        if (end && date > end)
+        if (end !== '' && date > end)
             return true;
         return false;
     }
@@ -142,8 +142,8 @@ const SdDatePickerCalendar = class {
             '--calendar-day-font-weight': sdDatePicker_config.CALENDAR_LAYOUT.day.fontWeight,
             '--calendar-day-bold-font-weight': sdDatePicker_config.CALENDAR_LAYOUT.day.boldFontWeight,
         };
-        return (index.h("div", { key: 'baeaf5925dd87084b4f22445cc2fa6fe879d8faf', class: "sd-date-picker-calendar", style: cssVars }, index.h("div", { key: '784e0bb6698dc097d8fa9b136ec8bc1d82cfe798', class: "sd-date-picker-calendar__header" }, index.h("div", { key: 'e42d77c2a1c5d7c23e058b111ed87d3d27c9b465', class: "sd-date-picker-calendar__nav-group" }, index.h("sd-ghost-button", { key: 'fd5573590ca5c7aaf5b07a594d65f4f168d526d7', ariaLabel: "prevYear", size: "xxs", icon: "chevronLeft", onClick: this.goPrevYear }), index.h("span", { key: 'd8d2f3fcb2dca348c99f5a461260278ddf1ab16b', class: "sd-date-picker-calendar__label" }, this.currentYear), index.h("sd-ghost-button", { key: 'f134fdd299bcead5d9ce594355f1c58be057fbbe', ariaLabel: "nextYear", size: "xxs", icon: "chevronRight", onClick: this.goNextYear })), index.h("span", { key: '14ab983354ded802bb715516872b0148acc3cd66', class: "sd-date-picker-calendar__divider", "aria-hidden": "true" }), index.h("div", { key: 'f8b0754ff487c944cf95fcb2fd05c2ca596b3107', class: "sd-date-picker-calendar__nav-group sd-date-picker-calendar__nav-group-month" }, index.h("sd-ghost-button", { key: '47d95d368b04f1ff81c416d93ba3bb9a5481f3cb', ariaLabel: "prevMonth", size: "xxs", icon: "chevronLeft", onClick: this.goPrevMonth }), index.h("span", { key: 'baf40a29a0aacd3c868c0ca63035c09080f412af', class: "sd-date-picker-calendar__label sd-date-picker-calendar__label-month" }, this.currentMonth, "\uC6D4"), index.h("sd-ghost-button", { key: '4b8f189022d7c61072f07b23c5576410183bc801', ariaLabel: "nextMonth", size: "xxs", icon: "chevronRight", onClick: this.goNextMonth }))), index.h("div", { key: 'c6b4251396b957905e0462a62ca5b8475c375dd6', class: "sd-date-picker-calendar__week" }, sdDatePicker_config.WEEK_LABELS.map(label => (index.h("span", { key: label, class: "sd-date-picker-calendar__week-cell" }, label)))), index.h("div", { key: '76a1fe94ca8943f8cf0e7be30b8a9838a9cd22ef', class: "sd-date-picker-calendar__grid" }, this.cells.map(cell => {
-            const isSelected = cell.inCurrentMonth && !!this.value && this.value === cell.date;
+        return (index.h("div", { key: '5fca5d51cbe5005cde3468c10f39397831371762', class: "sd-date-picker-calendar", style: cssVars }, index.h("div", { key: '5b6a101b463b455bfc70f9b92665fe308f45773d', class: "sd-date-picker-calendar__header" }, index.h("div", { key: '3fe7a4e416c632640371f9b3cb12baf72c7eab06', class: "sd-date-picker-calendar__nav-group" }, index.h("sd-ghost-button", { key: '1c71cf45dae23308ff901f08b606f0cfcdc7e5b4', ariaLabel: "prevYear", size: "xxs", icon: "chevronLeft", onClick: this.goPrevYear }), index.h("span", { key: 'aa9863d2cac5eb5d00a0d72570b216206b669f37', class: "sd-date-picker-calendar__label" }, this.currentYear), index.h("sd-ghost-button", { key: '941118e0c3cd37ed5decb2e91cfa738221f74958', ariaLabel: "nextYear", size: "xxs", icon: "chevronRight", onClick: this.goNextYear })), index.h("span", { key: 'e630c7269a617deeaa38cace0e2a91affb558688', class: "sd-date-picker-calendar__divider", "aria-hidden": "true" }), index.h("div", { key: '45cfc135eeb6bf834cef92c1e36f2def4d7c2058', class: "sd-date-picker-calendar__nav-group sd-date-picker-calendar__nav-group-month" }, index.h("sd-ghost-button", { key: '98483c6626ea13cdb78be806feaa1748d60b6a1a', ariaLabel: "prevMonth", size: "xxs", icon: "chevronLeft", onClick: this.goPrevMonth }), index.h("span", { key: '9e6097a040679203117436966c246f00b94f5ff2', class: "sd-date-picker-calendar__label sd-date-picker-calendar__label-month" }, this.currentMonth, "\uC6D4"), index.h("sd-ghost-button", { key: '0ab7ccdae8678bb909aca74f4189a4426e51ec0b', ariaLabel: "nextMonth", size: "xxs", icon: "chevronRight", onClick: this.goNextMonth }))), index.h("div", { key: '07763d55d00fd6c6b3523bbbb2e994a177a5b81c', class: "sd-date-picker-calendar__week" }, sdDatePicker_config.WEEK_LABELS.map(label => (index.h("span", { key: label, class: "sd-date-picker-calendar__week-cell" }, label)))), index.h("div", { key: '0304efaa140a8dba320e0e6791ef886bc77ac57b', class: "sd-date-picker-calendar__grid" }, this.cells.map(cell => {
+            const isSelected = cell.inCurrentMonth && this.value !== '' && this.value === cell.date;
             const isToday = cell.inCurrentMonth && useDatePicker.today === cell.date;
             const isDisabled = cell.inCurrentMonth && this.isDisabled(cell.date);
             return (index.h("button", { type: "button", key: cell.date, class: {
@@ -163,4 +163,57 @@ const SdDatePickerCalendar = class {
 };
 SdDatePickerCalendar.style = sdDatePickerCalendarCss();
 
+const sdDatePickerTriggerCss = () => `sd-date-picker-trigger{display:block;width:100%;height:100%}sd-date-picker-trigger .sd-date-picker-trigger{display:flex;align-items:center;gap:var(--trigger-gap);width:100%;height:100%;padding:0 var(--trigger-padding-x);cursor:pointer;user-select:none;overflow:hidden;border-radius:var(--trigger-radius)}sd-date-picker-trigger .sd-date-picker-trigger--disabled{cursor:not-allowed}sd-date-picker-trigger .sd-date-picker-trigger__icon{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}sd-date-picker-trigger .sd-date-picker-trigger__text{flex:1;min-width:var(--trigger-text-min-width, 80px);font-size:var(--trigger-font-size);line-height:var(--trigger-line-height);font-weight:var(--trigger-font-weight);color:var(--trigger-text-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}`;
+
+const SdDatePickerTrigger = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.triggerClick = index.createEvent(this, "sdTriggerClick", 7);
+    }
+    displayText = '';
+    placeholder = 'YYYY-MM-DD';
+    disabled = false;
+    size = 'sm';
+    triggerClick;
+    handleClick = () => {
+        if (this.disabled)
+            return;
+        this.triggerClick.emit();
+    };
+    render() {
+        const sizeTokens = sdDatePicker_config.DATEPICKER_SIZE_MAP[this.size] ?? sdDatePicker_config.DATEPICKER_SIZE_MAP.sm;
+        const hasValue = this.displayText !== '';
+        const textMinWidth = this.size === 'md' ? 104 : 80;
+        const cssVars = {
+            '--trigger-padding-x': `${sizeTokens.paddingX}px`,
+            '--trigger-gap': `${sizeTokens.gap}px`,
+            '--trigger-icon-size': `${sizeTokens.iconSize}px`,
+            '--trigger-font-size': `${sizeTokens.fontSize}px`,
+            '--trigger-line-height': `${sizeTokens.lineHeight}px`,
+            '--trigger-font-weight': sizeTokens.fontWeight,
+            '--trigger-radius': `${sizeTokens.radius}px`,
+            '--trigger-text-min-width': `${textMinWidth}px`,
+            '--trigger-text-color': this.disabled
+                ? sdDatePicker_config.DATEPICKER_COLORS.text.disabled
+                : hasValue
+                    ? sdDatePicker_config.DATEPICKER_COLORS.text.default
+                    : sdDatePicker_config.DATEPICKER_COLORS.text.hint,
+            '--trigger-icon-color': this.disabled
+                ? sdDatePicker_config.DATEPICKER_COLORS.icon.disabled
+                : sdDatePicker_config.DATEPICKER_COLORS.icon.default,
+        };
+        return (index.h("div", { key: 'df53dd75ead71167d7089daab5718c7ff1c990ae', role: "button", tabindex: this.disabled ? -1 : 0, class: {
+                'sd-date-picker-trigger': true,
+                'sd-date-picker-trigger--disabled': this.disabled,
+            }, style: cssVars, onClick: this.handleClick, onKeyDown: e => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    this.handleClick();
+                }
+            } }, index.h("sd-icon", { key: '76f41c99e1695eaa191cbc81ae057e65cb78e955', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), index.h("span", { key: '4e1a4b2b41737f05dc1a4e642d317f5fc93bf9b2', class: "sd-date-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder)));
+    }
+};
+SdDatePickerTrigger.style = sdDatePickerTriggerCss();
+
 exports.sd_date_picker_calendar = SdDatePickerCalendar;
+exports.sd_date_picker_trigger = SdDatePickerTrigger;

package/dist/cjs/{sd-date-picker.config-CRgCT5dn.js → sd-date-picker.config-CjvrFpYK.js}

@@ -95,8 +95,7 @@ const datepicker = {
 			bg: "#D9EAFF",
 			height: "32",
 			panelGap: "24",
-			divider: "#E1E1E1"}
-	}
+			divider: "#E1E1E1"}}
 };
 var datepickerTokens = {
 	datepicker: datepicker