@sellmate/design-system 1.28.0 → 1.31.0

package/dist/types/components/sd-time-picker/sd-time-picker.d.ts

@@ -0,0 +1,84 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { Rule } from '../../types/form';
+import type { SdTooltipProps } from '../sd-tooltip/sd-tooltip.config';
+import { type TimePickerSize, type TimePickerType } from './sd-time-picker.config';
+import { type FieldAddonAlign } from '../sd-field/sd-field.config';
+export declare class SdTimePicker {
+    private static readonly CLOSE_ANIMATION_DURATION;
+    el: HTMLElement;
+    /** 선택된 시간 (HH:mm) */
+    value: string | null;
+    /** 입력 필드 크기 */
+    size: TimePickerSize;
+    /** 표시 타입: default(24시간) / midday(오전·오후) */
+    type: TimePickerType;
+    /** 시간 미선택 시 표시할 placeholder */
+    placeholder: string;
+    /** 비활성 상태 여부 */
+    disabled: boolean;
+    /** 값이 있을 때 지우기 버튼 표시 여부 */
+    clearable: boolean;
+    /** 오전/오후 선택 표시 여부. 지정하지 않으면 type="midday"일 때만 켜집니다. */
+    useMeridiem?: boolean;
+    /** 분 증감 단위 */
+    minuteStep: number;
+    /** 필드 너비 (숫자면 px, 문자열이면 그대로 적용) */
+    width: string | number;
+    /** 레이블 텍스트 */
+    label: string;
+    /** 레이블 너비 */
+    labelWidth: string | number;
+    /** 필드 우측 어드온 레이블 */
+    addonLabel: string;
+    /** 어드온 정렬 방향 */
+    addonAlign: FieldAddonAlign;
+    /** 필드 하단 힌트 텍스트 */
+    hint: string;
+    /** 에러 메시지 */
+    errorMessage: string;
+    /** 유효성 검사 규칙 목록 */
+    rules?: Rule[];
+    /** 에러 상태 여부 */
+    error: boolean;
+    /** 필드 상태 (없으면 error/rules 결과로 자동 결정) */
+    status?: 'default' | 'pass' | 'error';
+    /** 레이블 영역 아이콘 */
+    icon?: IconProps;
+    /** 레이블 툴팁 텍스트 */
+    labelTooltip: string;
+    /** 레이블 툴팁 상세 옵션 */
+    labelTooltipProps: SdTooltipProps | null;
+    private isOpen;
+    private isAnimatingOut;
+    private focused;
+    private hovered;
+    /** 시간 선택 시 선택된 시간(HH:mm)을 전달합니다. */
+    update: EventEmitter<string | null>;
+    /** 선택기 열림/닫힘 상태가 바뀔 때 발생합니다. */
+    dropDownShow: EventEmitter<{
+        isOpen: boolean;
+    }>;
+    private triggerRef?;
+    private formField?;
+    private closeAnimationTimer?;
+    /** 폼 연동용 name 속성 */
+    name: string;
+    watchIsOpen(newValue: boolean): void;
+    valueChanged(newValue: string | null): void;
+    /** 유효성 검사를 실행합니다. */
+    sdValidate(): Promise<boolean | undefined>;
+    /** 값과 유효성 상태를 초기화합니다. */
+    sdReset(): Promise<void | undefined>;
+    /** 유효성 상태만 초기화합니다. */
+    sdResetValidate(): Promise<void | undefined>;
+    /** 입력 필드에 포커스를 이동합니다. */
+    sdFocus(): Promise<void | undefined>;
+    componentWillLoad(): void;
+    disconnectedCallback(): void;
+    private closeDropdown;
+    private handleTriggerClick;
+    private handleClear;
+    private handleSelect;
+    private get effectiveUseMeridiem();
+    render(): any;
+}

package/dist/types/components/sd-time-range-picker/sd-time-range-picker-selector/sd-time-range-picker-selector.d.ts

@@ -0,0 +1,40 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+import { type TimeRangePickerRangeOrder, type TimeRangeValue } from '../sd-time-range-picker.config';
+export declare class SdTimeRangePickerSelector {
+    /** 선택된 시간 범위 [시작, 종료] (HH:mm) */
+    value: TimeRangeValue;
+    /** 오전/오후 선택 표시 여부 */
+    useMeridiem: boolean;
+    /** 분 증감 단위 */
+    minuteStep: number;
+    /** 범위 순서 정책. strict는 시작 시간이 종료 시간보다 늦어지지 않도록 보정합니다. */
+    rangeOrder: TimeRangePickerRangeOrder;
+    /** 시간 범위 변경 시 발생합니다. */
+    update: EventEmitter<[string, string]>;
+    private editingKey;
+    private inputDraft;
+    private autoAdjusted;
+    private getRange;
+    private getParts;
+    private getMeridiem;
+    private getDisplayHour;
+    private emitSide;
+    private getTimeMinutes;
+    private normalizeNextRange;
+    private getEditingKey;
+    private sanitizeInput;
+    private setDraft;
+    private beginEdit;
+    private commitHourDraft;
+    private commitMinuteDraft;
+    private endEdit;
+    private setMeridiem;
+    private changeHour;
+    private changeMinute;
+    private handleHourInput;
+    private handleMinuteInput;
+    private renderMeridiemButton;
+    private renderColumn;
+    private renderPanel;
+    render(): any;
+}

package/dist/types/components/sd-time-range-picker/sd-time-range-picker.config.d.ts

@@ -0,0 +1,9 @@
+import { TIMEPICKER_COLORS, TIMEPICKER_SELECTOR, TIMEPICKER_SIZE_MAP, formatTimeDisplay, formatTimeValue, parseTimeValue, type TimePickerSize, type TimePickerType, type TimePickerMeridiem } from '../sd-time-picker/sd-time-picker.config';
+export type TimeRangePickerSize = TimePickerSize;
+export type TimeRangePickerType = TimePickerType;
+export type TimeRangePickerMeridiem = TimePickerMeridiem;
+export type TimeRangePickerRangeOrder = 'strict' | 'allow-cross-day';
+export type TimeRangeValue = [string, string] | null;
+export { TIMEPICKER_COLORS as TIME_RANGE_PICKER_COLORS, TIMEPICKER_SELECTOR as TIME_RANGE_PICKER_SELECTOR, TIMEPICKER_SIZE_MAP as TIME_RANGE_PICKER_SIZE_MAP, formatTimeDisplay, formatTimeValue, parseTimeValue, };
+export declare function normalizeTimeRangeValue(value: TimeRangeValue, rangeOrder?: TimeRangePickerRangeOrder): TimeRangeValue;
+export declare function formatTimeRangeDisplay(value: TimeRangeValue, type: TimeRangePickerType): string;

package/dist/types/components/sd-time-range-picker/sd-time-range-picker.d.ts

@@ -0,0 +1,88 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { Rule } from '../../types/form';
+import type { SdTooltipProps } from '../sd-tooltip/sd-tooltip.config';
+import { type TimeRangePickerSize, type TimeRangePickerRangeOrder, type TimeRangePickerType, type TimeRangeValue } from './sd-time-range-picker.config';
+import { type FieldAddonAlign } from '../sd-field/sd-field.config';
+export declare class SdTimeRangePicker {
+    private static readonly CLOSE_ANIMATION_DURATION;
+    el: HTMLElement;
+    /** 선택된 시간 범위 [시작, 종료] (HH:mm) */
+    value: TimeRangeValue;
+    /** 입력 필드 크기 */
+    size: TimeRangePickerSize;
+    /** 표시 타입: default(24시간) / midday(오전·오후) */
+    type: TimeRangePickerType;
+    /** 시간 미선택 시 표시할 placeholder */
+    placeholder: string;
+    /** 비활성 상태 여부 */
+    disabled: boolean;
+    /** 값이 있을 때 지우기 버튼 표시 여부 */
+    clearable: boolean;
+    /** 오전/오후 선택 표시 여부. 지정하지 않으면 type="midday"일 때만 켜집니다. */
+    useMeridiem?: boolean;
+    /** 분 증감 단위 */
+    minuteStep: number;
+    /** 범위 순서 정책. strict는 시작 시간이 종료 시간보다 늦어지지 않도록 보정합니다. */
+    rangeOrder: TimeRangePickerRangeOrder;
+    /** 필드 너비 (숫자면 px, 문자열이면 그대로 적용) */
+    width: string | number;
+    /** 레이블 텍스트 */
+    label: string;
+    /** 레이블 너비 */
+    labelWidth: string | number;
+    /** 필드 우측 어드온 레이블 */
+    addonLabel: string;
+    /** 어드온 정렬 방향 */
+    addonAlign: FieldAddonAlign;
+    /** 필드 하단 힌트 텍스트 */
+    hint: string;
+    /** 에러 메시지 */
+    errorMessage: string;
+    /** 유효성 검사 규칙 목록 */
+    rules?: Rule[];
+    /** 에러 상태 여부 */
+    error: boolean;
+    /** 필드 상태 (없으면 error/rules 결과로 자동 결정) */
+    status?: 'default' | 'pass' | 'error';
+    /** 레이블 영역 아이콘 */
+    icon?: IconProps;
+    /** 레이블 툴팁 텍스트 */
+    labelTooltip: string;
+    /** 레이블 툴팁 상세 옵션 */
+    labelTooltipProps: SdTooltipProps | null;
+    private isOpen;
+    private isAnimatingOut;
+    private focused;
+    private hovered;
+    /** 시간 범위 선택 시 선택된 범위([시작, 종료])를 전달합니다. */
+    update: EventEmitter<TimeRangeValue>;
+    /** 선택기 열림/닫힘 상태가 바뀔 때 발생합니다. */
+    dropDownShow: EventEmitter<{
+        isOpen: boolean;
+    }>;
+    private triggerRef?;
+    private formField?;
+    private closeAnimationTimer?;
+    /** 폼 연동용 name 속성 */
+    name: string;
+    watchIsOpen(newValue: boolean): void;
+    valueChanged(newValue: TimeRangeValue): void;
+    rangeOrderChanged(): void;
+    /** 유효성 검사를 실행합니다. */
+    sdValidate(): Promise<boolean | undefined>;
+    /** 값과 유효성 상태를 초기화합니다. */
+    sdReset(): Promise<void | undefined>;
+    /** 유효성 상태만 초기화합니다. */
+    sdResetValidate(): Promise<void | undefined>;
+    /** 입력 필드에 포커스를 이동합니다. */
+    sdFocus(): Promise<void | undefined>;
+    componentWillLoad(): void;
+    disconnectedCallback(): void;
+    private closeDropdown;
+    private handleTriggerClick;
+    private handleClear;
+    private handleSelect;
+    private get effectiveUseMeridiem();
+    private get displayText();
+    render(): any;
+}

package/dist/types/components/sd-tooltip/sd-tooltip.d.ts

@@ -1,4 +1,3 @@
-import { type ButtonName, type ButtonType } from '../sd-button/sd-button.config';
 import { type TooltipType } from './sd-tooltip.config';
 export declare class SdTooltip {
     el: HTMLElement;
@@ -6,42 +5,29 @@ export declare class SdTooltip {
     trigger: 'hover' | 'click';
     /** 툴팁 표시 방향 */
     placement: 'top' | 'bottom' | 'left' | 'right';
-    /** 아이콘 트리거 색상 */
+    /** 기본(아이콘) 트리거 색상 */
     color: string;
     /** 툴팁 배경/텍스트 색상 타입 */
     tooltipType: TooltipType;
-    /** 아이콘 트리거 아이콘명 */
+    /** 기본(아이콘) 트리거 아이콘명. slot="anchor" 가 있으면 무시 */
     icon: IconName;
-    /** 아이콘 트리거 크기 */
+    /** 기본(아이콘) 트리거 크기 */
     iconSize: number;
-    /** 버튼 트리거 레이블 (있으면 아이콘 대신 버튼 렌더링) */
-    label: string;
-    /** 버튼 트리거 프리셋 */
-    name: ButtonName;
-    /** 버튼 트리거 우측 아이콘 */
-    rightIcon?: IconName;
     /** 스크린리더용 접근성 레이블 */
     ariaLabel: string;
-    /** 비활성 상태 여부 */
+    /** 비활성 — 트리거만 렌더하고 툴팁을 열지 않음 */
     disabled: boolean;
-    /** 버튼 type 속성 */
-    type: ButtonType;
     /** 툴팁 우측 상단 닫기 버튼 표시 여부 */
     useClose: boolean;
-    /** 트리거 래퍼(.sd-tooltip-trigger)에 추가할 클래스 */
-    sdClass?: string;
     /**
      * 툴팁 본문에 표시할 메시지. 각 항목이 한 줄로 innerHTML 렌더링됩니다.
-     * (HTML 문자열 허용) 지정하지 않으면 slot 으로 전달한 내용을 본문으로 사용합니다.
+     * (HTML 문자열 허용) 지정하지 않으면 default slot 으로 전달한 내용을 본문으로 사용합니다.
      */
     message: string[];
-    /** anchor 트리거 래퍼(.sd-tooltip-trigger)에 추가할 클래스. (예: Tailwind `block w-full`) */
-    triggerClass: string;
-    /** anchor 트리거 래퍼에 적용할 인라인 스타일(CSS 문자열). (예: `width:100%`) */
-    triggerStyle: string;
+    /** 트리거 래퍼(.sd-tooltip-trigger)에 추가할 클래스. (예: Tailwind `block w-full`) */
+    triggerClassName: string;
     showTooltip: boolean;
     slotContentHTML: string;
-    private buttonEl?;
     private triggerEl?;
     private isAnchorMode;
     private menuEl?;
@@ -59,6 +45,5 @@ export declare class SdTooltip {
     /** 툴팁을 숨깁니다. */
     hide(): Promise<void>;
     componentWillLoad(): void;
-    componentDidRender(): void;
     render(): any;
 }