@sellmate/design-system 1.0.76 → 1.0.78

package/dist/types/components/{sd-select-v2/sd-select-v2-listbox/sd-select-v2-listbox.d.ts → sd-select/sd-select-listbox/sd-select-listbox.d.ts}

@@ -1,9 +1,9 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
-import { type SelectV2Option, type SelectV2Type, type SelectV2Value, type SelectV2OptionSelectDetail } from '../sd-select-v2.config';
-export declare class SdSelectV2Listbox {
-    type: SelectV2Type;
-    options: SelectV2Option[];
-    value: SelectV2Value;
+import { type SelectOption, type SelectType, type SelectValue, type SelectOptionSelectDetail } from '../sd-select.config';
+export declare class SdSelectListbox {
+    type: SelectType;
+    options: SelectOption[];
+    value: SelectValue;
     emitValue: boolean;
     useSearch: boolean;
     useSelectAll: boolean;
@@ -13,7 +13,7 @@ export declare class SdSelectV2Listbox {
     private searchKeyword;
     private isScrolled;
     private focusedIndex;
-    optionSelect: EventEmitter<SelectV2OptionSelectDetail>;
+    optionSelect: EventEmitter<SelectOptionSelectDetail>;
     private listEl?;
     private lastScrolledIndex;
     private keydownAttached;

package/dist/types/components/{sd-select-v2/sd-select-v2-trigger/sd-select-v2-trigger.d.ts → sd-select/sd-select-trigger/sd-select-trigger.d.ts}

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
-export declare class SdSelectV2Trigger {
+export declare class SdSelectTrigger {
     displayText: string;
     placeholder: string;
     disabled: boolean;

package/dist/types/components/{sd-select-v2/sd-select-v2.config.d.ts → sd-select/sd-select.config.d.ts}

@@ -1,18 +1,18 @@
-export interface SelectV2Option {
+export interface SelectOption {
     value: string | number;
     label: string;
     disabled?: boolean;
-    children?: SelectV2Option[];
+    children?: SelectOption[];
 }
-export type SelectV2Type = 'default' | 'multi' | 'default_depth' | 'multi_depth';
-export type SelectV2Value = string | number | null | SelectV2Option | SelectV2Option[] | (string | number)[];
-export interface SelectV2UpdateDetail {
-    value: SelectV2Value;
-    option: SelectV2Option | SelectV2Option[] | null;
+export type SelectType = 'default' | 'multi' | 'default_depth' | 'multi_depth';
+export type SelectValue = string | number | null | SelectOption | SelectOption[] | (string | number)[];
+export interface SelectUpdateDetail {
+    value: SelectValue;
+    option: SelectOption | SelectOption[] | null;
 }
-export interface SelectV2OptionSelectDetail {
-    option: SelectV2Option;
-    leaves: SelectV2Option[];
+export interface SelectOptionSelectDetail {
+    option: SelectOption;
+    leaves: SelectOption[];
 }
 export declare const SELECT_LAYOUT: {
     height: string;
@@ -93,5 +93,5 @@ export declare const SEARCH_THRESHOLD = 11;
 export declare const SEARCH_DEBOUNCE_MS = 1000;
 export declare const MAX_DROPDOWN_WIDTH = "640px";
 export declare const EMPTY_MESSAGE = "\uD45C\uC2DC\uD560 \uD56D\uBAA9\uC774 \uC5C6\uC2B5\uB2C8\uB2E4.";
-export declare function countLeaves(options: SelectV2Option[]): number;
-export declare function filterTree(options: SelectV2Option[], keyword: string): SelectV2Option[];
+export declare function countLeaves(options: SelectOption[]): number;
+export declare function filterTree(options: SelectOption[], keyword: string): SelectOption[];

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

@@ -1,103 +1,75 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { BaseDropdownEvent } from '../../utils/base-dropdown-event';
-import { SdTooltipProps } from '../sd-tooltip/sd-tooltip.config';
-import { Rule } from '../../components';
+import type { SelectOption, SelectType, SelectValue } from './sd-select.config';
+import type { Rule } from '../../types/form';
+import type { SdTooltipProps } from '../sd-tooltip/sd-tooltip.config';
 import { type FieldAddonAlign } from '../sd-field/sd-field.config';
-export interface SelectOption {
-    value: string | number;
-    label: string;
-    disabled?: boolean;
-}
-export type SelectGroupOptionType = 'group' | 'subgroup' | 'item' | 'all';
-export interface SelectOptionGroup extends SelectOption {
-    type: SelectGroupOptionType;
-    parent?: string;
-}
-export interface SelectStyleProps {
-    containerStyle?: {
-        [key: string]: string;
-    };
-    triggerStyle?: {
-        [key: string]: string;
-    };
-    dropdownStyle?: {
-        [key: string]: string;
-    };
-    optionStyle?: {
-        [key: string]: string;
-    };
-    labelStyle?: {
-        [key: string]: string;
-    };
-}
-export interface SelectEvents {
-    sdUpdate: {
-        value: string | number | null;
-        option: SelectOption | null;
-    };
-    dropDownShow: {
-        isOpen: boolean;
-    };
-}
-export interface SelectMultipleEvents extends Pick<SelectEvents, 'dropDownShow' | 'dropDownShow'> {
-    sdUpdate: SelectOption[] | null;
-}
-/**
- * @deprecated sd-select-v2를 사용하세요.
- */
-export declare class SdSelect extends BaseDropdownEvent {
+export declare class SdSelect {
+    private static readonly VIEWPORT_PADDING;
+    private static readonly PORTAL_OFFSET_Y;
+    private static readonly CLOSE_ANIMATION_DURATION;
     el: HTMLElement;
-    value: string | number | null;
+    type: SelectType;
+    value: SelectValue;
     options: SelectOption[];
     placeholder: string;
-    optionPlaceholder: string;
-    width: string;
+    maxDropdownWidth: string;
     dropdownHeight: string;
-    autoFocus: boolean;
     disabled: boolean;
-    clearable: boolean;
-    searchable: boolean;
     label: string;
     labelWidth: string | number;
     addonLabel: string;
     addonAlign: FieldAddonAlign;
+    error: boolean;
+    hint: string;
+    errorMessage: string;
+    rules?: Rule[];
     icon?: IconProps;
     labelTooltip: string;
     labelTooltipProps: SdTooltipProps | null;
-    rules?: Rule[];
-    error?: boolean;
-    optionRenderer?: (option: SelectOption, index: number, isSelected: boolean) => any;
-    isOpen: boolean;
-    itemIndex: number;
-    isScrolled: boolean;
-    update?: EventEmitter<SelectEvents['sdUpdate']>;
-    dropDownShow?: EventEmitter<SelectEvents['dropDownShow']>;
-    private selectRef?;
+    emitValue: boolean;
+    width: string | number;
+    useSearch: boolean;
+    allSelectedLabel: string;
+    useSelectAll: boolean;
+    private isOpen;
+    private isAnimatingOut;
+    private triggerWidth;
+    private resolvedDropdownHeight;
+    private resolvedMaxDropdownWidth;
+    private focused;
+    private hovered;
+    update: EventEmitter<SelectValue>;
+    dropDownShow: EventEmitter<{
+        isOpen: boolean;
+    }>;
+    sdFocus(): Promise<void>;
+    sdOpen(): Promise<void>;
     private triggerRef?;
-    private formField?;
-    private filteredOptions;
-    private dropDownWidth;
+    private triggerComponentRef?;
+    private closeAnimationTimer?;
     name: string;
-    sdOpen(): Promise<void>;
-    sdValidate(): Promise<void>;
-    sdReset(): Promise<void>;
-    sdResetValidate(): Promise<void>;
-    sdFocus(): Promise<void>;
-    isOpenChanged(): Promise<void>;
-    componentWillLoad(): void;
-    componentDidLoad(): void;
-    componentDidRender(): void;
+    private triggerHasFocus;
+    watchIsOpen(newValue: boolean): void;
+    private get isMulti();
+    private get displayText();
+    private flattenOptions;
+    private getNonDisabledLeaves;
+    private getSelectedOptions;
+    private toMultiValue;
+    private parsePixelValue;
+    private updateDropdownViewportConstraints;
+    private handleViewportResize;
+    private findOriginalOption;
+    private closeDropdown;
+    private prepareDropdownGeometry;
+    private syncFocusedState;
+    private handleTriggerFocus;
+    private handleTriggerBlur;
+    private handleTriggerClick;
+    private emitUpdate;
+    private handleOptionSelect;
+    private handleMultiSelect;
+    connectedCallback(): void;
     disconnectedCallback(): void;
-    protected handleDocumentClick(event: Event): void;
-    protected handleDocumentKeydown(keyboardEvent: KeyboardEvent): void;
-    private getSelectedOption;
-    closeDropdown(): void;
-    handleTriggerClick: (event: Event) => void;
-    handleOptionClick: (detail: {
-        option: SelectOption;
-        event: Event;
-    }) => void;
     render(): any;
-    private renderTrigger;
-    private renderDropdown;
 }

package/dist/types/components/sd-table/constants.d.ts

@@ -1,4 +1,5 @@
 export declare const TABLE_ID_ATTR = "table-id";
+export type SdTableColumnSort = 'asc' | 'desc' | 'none';
 export interface SdTableColumn {
     name: string;
     label: string;
@@ -7,7 +8,9 @@ export interface SdTableColumn {
     width?: string;
     format?: (value: any, row: any) => string;
     visible?: boolean;
-    usePageMoveIcon?: boolean;
+    icon?: IconName;
+    iconColor?: string;
+    sort?: SdTableColumnSort;
     tooltip?: string[];
     tooltipOptions?: Record<string, any>;
     tdClass?: string;

package/dist/types/components/sd-table/sd-table.config.d.ts

@@ -0,0 +1,64 @@
+import type { SdTableColumnSort } from './constants';
+export declare const TABLE_HEADER_LAYOUT: {
+    height: string;
+    paddingX: string;
+    gap: string;
+};
+export declare const TABLE_HEADER_TYPOGRAPHY: {
+    fontFamily: string;
+    fontWeight: string;
+    fontSize: string;
+    lineHeight: string;
+    textDecoration: string;
+};
+export declare const TABLE_HEADER_COLORS: {
+    bg: string;
+};
+export declare const TABLE_HEADER_RESIZING_BAR: {
+    color: string;
+    height: string;
+};
+export declare const TABLE_BODY_LAYOUT: {
+    default: {
+        height: string;
+        paddingY: string;
+    };
+    dense: {
+        height: string;
+        paddingY: string;
+    };
+    paddingX: string;
+    framePadding: string;
+};
+export declare const TABLE_BODY_TYPOGRAPHY: {
+    fontFamily: string;
+    fontWeight: string;
+    fontSize: string;
+    lineHeight: string;
+    textDecoration: string;
+};
+export declare const TABLE_BORDER: {
+    color: string;
+    width: string;
+};
+export declare const TABLE_RADIUS: string;
+export declare const TABLE_CONTENT: {
+    gap: string;
+};
+export declare const TABLE_BAR_LAYOUT: {
+    height: string;
+    sectionGap: string;
+    dividerHeight: string;
+};
+export declare const TABLE_BAR_COLORS: {
+    count: {
+        total: string;
+        null: string;
+    };
+};
+export declare const TABLE_KEY_VALUE: {
+    bodyPadding: string;
+    height: string;
+};
+export declare const resolveTableIconColor: (name: IconName, override?: string) => string | undefined;
+export declare const resolveSortIconName: (sort: SdTableColumnSort) => IconName;

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

@@ -55,6 +55,10 @@ export declare class SdTable {
     private scrollContainer;
     private onScroll?;
     private spanRegistry;
+    private cellClassRegistry;
+    private rowIndexMap;
+    private rebuildRowIndexMap;
+    private resolveRowIndex;
     private toFiniteNumber;
     private isRowsPerPageValue;
     private isValidTableId;
@@ -64,6 +68,7 @@ export declare class SdTable {
     handleUseVirtualScrollChange(newVal: boolean): void;
     handleColumnsChange(newCols: SdTableColumn[]): void;
     handleRowsChange(newRows?: Row[]): void;
+    handleRowKeyChange(): void;
     handleTableIdChange(): void;
     handleNoDataLabelChange(newLabel?: string): void;
     handleConfigChange(): void;
@@ -125,6 +130,9 @@ export declare class SdTable {
         rowspan: number;
         colspan: number;
     } | undefined;
+    registerCellClassSync(rowKey: string, field: string, cls: string | undefined | null): void;
+    unregisterCellClassSync(rowKey: string, field: string): void;
+    getCellClassSync(rowKey: string, field: string): string | undefined;
     hasRowspanSync(): boolean;
     isCoveredSync(rowKey: string, colIdx: number, columns: SdTableColumn[]): boolean;
     setRowCountSync(count: number): void;

package/dist/types/components/sd-table/sd-td/sd-td.d.ts

@@ -5,9 +5,11 @@ export declare class SdTd {
     align?: 'left' | 'center' | 'right';
     rowspan?: number;
     colspan?: number;
-    handleFieldChange(): void;
-    handleRowKeyChange(): void;
+    sdClass?: string;
+    handleFieldChange(_newField: string, oldField: string): void;
+    handleRowKeyChange(_newKey: string, oldKey: string): void;
     handleSpanChange(): void;
+    handleSdClassChange(): void;
     componentWillLoad(): void;
     componentDidLoad(): void;
     connectedCallback(): void;
@@ -15,6 +17,7 @@ export declare class SdTd {
     private findTable;
     private requestParentTrUpdate;
     private syncSpanRegistration;
+    private syncCellClassRegistration;
     private syncSlotName;
     render(): any;
 }

package/dist/types/components/sd-table/sd-thead/sd-thead.d.ts

@@ -1,3 +1,4 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
 import { SdTableColumn, Row, SdTableStickyColumn } from '../constants';
 export declare class SdThead {
     el: HTMLElement;
@@ -10,6 +11,9 @@ export declare class SdThead {
     scrolledRight?: boolean;
     rows: Row[];
     columnWidths: number[];
+    sdColumnSort: EventEmitter<{
+        column: SdTableColumn;
+    }>;
     tableId: string;
     private _columns;
     private _selectable;
@@ -30,6 +34,7 @@ export declare class SdThead {
     private get visibleColumns();
     private getStickyStyle;
     private handleResize;
+    private handleColumnSort;
     private handleSelectAll;
     private getIsAllChecked;
     render(): any;

package/dist/types/components/sd-table/sd-tr/sd-tr.d.ts

@@ -34,5 +34,6 @@ export declare class SdTr {
     private handleSelect;
     private getSpanFor;
     private isCovered;
+    private getCellClassFor;
     render(): any;
 }