@sellmate/design-system 1.0.75 → 1.0.77

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

@@ -1,7 +1,7 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
-import { type SelectV2Option } from '../sd-select-v2.config';
-export declare class SdSelectV2ListItem {
-    option: SelectV2Option;
+import { type SelectOption } from '../sd-select.config';
+export declare class SdSelectListItem {
+    option: SelectOption;
     depth: number;
     isSelected: boolean | null;
     isFocused: boolean;
@@ -10,7 +10,7 @@ export declare class SdSelectV2ListItem {
         selected: number;
         total: number;
     };
-    listItemClick: EventEmitter<SelectV2Option>;
+    listItemClick: EventEmitter<SelectOption>;
     private get isGroup();
     private get isSelectable();
     private get depthKey();

package/dist/types/components/{sd-select-v2/sd-select-v2-list-item-search/sd-select-v2-list-item-search.d.ts → sd-select/sd-select-list-item-search/sd-select-list-item-search.d.ts}

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
-export declare class SdSelectV2ListItemSearch {
+export declare class SdSelectListItemSearch {
     isScrolled: boolean;
     private searchText;
     searchFilter: EventEmitter<string>;

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,23 +1,29 @@
 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;
     triggerWidth: string;
     maxWidth: string;
     maxHeight: string;
     private searchKeyword;
     private isScrolled;
     private focusedIndex;
-    optionSelect: EventEmitter<SelectV2OptionSelectDetail>;
+    optionSelect: EventEmitter<SelectOptionSelectDetail>;
     private listEl?;
     private lastScrolledIndex;
     private keydownAttached;
     private suppressHover;
     private get isDepth();
     private get isMulti();
+    private static readonly SELECT_ALL_OPTION;
+    private get showSelectAll();
+    private getAllNonDisabledLeaves;
+    private get selectAllState();
     private get showSearch();
     private get filteredOptions();
     private get isEmpty();
@@ -40,6 +46,9 @@ export declare class SdSelectV2Listbox {
      */
     private collectVisibleLeaves;
     private get navigableOptions();
+    private isSelectAllOption;
+    private emitSelectAll;
+    private handleSelectAllClick;
     private isOptionFocused;
     resetFocusOnFilter(): void;
     private handleSearchFilter;

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

@@ -47,11 +47,14 @@ export declare class SdTable {
     scrolledRight: boolean;
     rowCount: number;
     loadingScrollTop: number;
+    autoThead: boolean;
+    autoTbody: boolean;
     private vsStart;
     private vsEnd;
     private lastReachEndNotifiedRowCount;
     private scrollContainer;
     private onScroll?;
+    private spanRegistry;
     private toFiniteNumber;
     private isRowsPerPageValue;
     private isValidTableId;
@@ -66,9 +69,12 @@ export declare class SdTable {
     handleConfigChange(): void;
     handleSelectedChange(newSelected: Row[]): void;
     handlePaginationChange(newVal?: SdTablePagination): void;
+    private detectChildren;
     componentWillLoad(): void;
     componentDidLoad(): void;
     disconnectedCallback(): void;
+    private queryChildEl;
+    private queryAllTr;
     private pushRowsToChildren;
     private handleStructureSlotChange;
     private refreshChildrenSelection;
@@ -111,6 +117,16 @@ export declare class SdTable {
         minWidth: string;
         maxWidth: string;
     }>;
+    private spanKey;
+    private requestAllTrUpdate;
+    registerSpanSync(rowKey: string, field: string, rowspan: number, colspan: number): void;
+    unregisterSpanSync(rowKey: string, field: string): void;
+    getSpanSync(rowKey: string, field: string): {
+        rowspan: number;
+        colspan: number;
+    } | undefined;
+    hasRowspanSync(): boolean;
+    isCoveredSync(rowKey: string, colIdx: number, columns: SdTableColumn[]): boolean;
     setRowCountSync(count: number): void;
     setRowCount(count: number): Promise<void>;
     calculateVisibleRange(scrollTop: number, containerHeight: number): {
@@ -133,6 +149,7 @@ export declare class SdTable {
         from: number;
         to: number;
     } | null;
+    private renderAutoRows;
     private get tableClasses();
     render(): any;
 }

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

@@ -3,10 +3,18 @@ export declare class SdTd {
     field: string;
     rowKey: string;
     align?: 'left' | 'center' | 'right';
+    rowspan?: number;
+    colspan?: number;
     handleFieldChange(): void;
     handleRowKeyChange(): void;
+    handleSpanChange(): void;
     componentWillLoad(): void;
     componentDidLoad(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private findTable;
+    private requestParentTrUpdate;
+    private syncSpanRegistration;
     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

@@ -9,6 +9,7 @@ export declare class SdTr {
     tableId: string;
     columnWidths: number[];
     isVisible: boolean;
+    spansVersion: number;
     private _columns;
     private _selectable;
     private _stickyColumn;
@@ -20,6 +21,7 @@ export declare class SdTr {
     private syncTableContext;
     private resolveConfig;
     refreshConfig(): Promise<void>;
+    bumpSpansVersion(): Promise<void>;
     updateVisibility(): Promise<void>;
     private updateVisibilitySync;
     setColumnWidths(widths: number[]): Promise<void>;
@@ -30,5 +32,7 @@ export declare class SdTr {
     private getStickyStyle;
     private isSelected;
     private handleSelect;
+    private getSpanFor;
+    private isCovered;
     render(): any;
 }