@sellmate/design-system 1.28.0 → 1.29.0

package/dist/esm/sd-select-list-item_2.entry.js

@@ -1,170 +0,0 @@
-import { r as registerInstance, c as createEvent, h } from './index-DDNBPrZh.js';
-import { g as LIST_ITEM_LAYOUT, i as isHtmlLabel, h as LIST_ITEM_TYPOGRAPHY, j as LIST_ITEM_COLORS, k as SEARCH_DEBOUNCE_MS } from './sd-select.config-CeHGlqOT.js';
-import { s as sanitizeInlineHtml } from './sanitize-inline-html-BE4tnQ2Z.js';
-import './component.listItem-4S0_Ykmo.js';
-import './component.listBox-DlJaYVWf.js';
-
-const sdSelectListItemCss = () => `sd-select-list-item{display:block}sd-select-list-item .sd-select-list-item{display:flex;align-items:center;gap:var(--list-item-gap);padding:var(--list-item-padding-y) var(--list-item-padding-right) var(--list-item-padding-y) var(--list-item-padding-left);font-size:var(--list-item-font-size);line-height:var(--list-item-line-height);font-weight:var(--list-item-font-weight);background:var(--list-item-bg);color:var(--list-item-color);cursor:default;user-select:none}sd-select-list-item .sd-select-list-item--selectable{cursor:pointer}sd-select-list-item .sd-select-list-item--depth1-group{border-top:var(--list-item-border-top);font-weight:700}sd-select-list-item .sd-select-list-item--depth2-group{font-weight:500}sd-select-list-item .sd-select-list-item--focused.sd-select-list-item--selectable:not(.sd-select-list-item--disabled){background:var(--list-item-bg-hover);color:var(--list-item-color-hover)}sd-select-list-item .sd-select-list-item--selected:not(.sd-select-list-item--group){font-weight:var(--list-item-font-weight-selected);color:var(--list-item-color-selected)}sd-select-list-item .sd-select-list-item--selected.sd-select-list-item--focused{color:var(--list-item-color-hover)}sd-select-list-item .sd-select-list-item--disabled{color:var(--list-item-color-disabled);cursor:not-allowed}sd-select-list-item .sd-select-list-item__label{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}sd-select-list-item .sd-select-list-item__count{flex-shrink:0;font-weight:500;color:var(--list-item-color-disabled)}sd-select-list-item .sd-select-list-item--group.sd-select-list-item--focused .sd-select-list-item__count{color:#ffffff}sd-select-list-item .sd-select-list-item__checkbox{flex-shrink:0}`;
-
-const SdSelectListItem = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.listItemClick = createEvent(this, "sdListItemClick", 7);
-    }
-    /** 렌더링할 옵션 데이터 */
-    option;
-    /** 계층 깊이 (1~3) */
-    depth = 1;
-    /** 선택 상태 (null=중간) */
-    isSelected = false;
-    /** 키보드 포커스 상태 여부 */
-    isFocused = false;
-    /** 체크박스 표시 여부 */
-    useCheckbox = false;
-    /** 다중 선택 시 (선택/전체) 카운트 */
-    countInfo;
-    /** 항목 클릭 시 발생합니다. */
-    listItemClick;
-    get isGroup() {
-        return !!this.option.children;
-    }
-    get isSelectable() {
-        return !this.isGroup || this.useCheckbox;
-    }
-    get depthKey() {
-        if (this.depth <= 1)
-            return 'depth1';
-        if (this.depth === 2)
-            return 'depth2';
-        return 'depth3';
-    }
-    get paddingLeft() {
-        return `${LIST_ITEM_LAYOUT.paddingLeft[this.depthKey]}px`;
-    }
-    handleClick = (e) => {
-        e.stopPropagation();
-        if (this.option.disabled || !this.isSelectable)
-            return;
-        this.listItemClick.emit(this.option);
-    };
-    handleCheckboxClick = (e) => {
-        e.stopPropagation();
-    };
-    handleCheckboxUpdate = (e) => {
-        e.stopPropagation();
-        if (this.option.disabled || !this.isSelectable)
-            return;
-        this.listItemClick.emit(this.option);
-    };
-    render() {
-        const isGroup = this.isGroup;
-        const isDepth1Group = isGroup && this.depth === 1;
-        const isDepth2Group = isGroup && this.depth === 2;
-        const cssVars = {
-            '--list-item-padding-y': `${LIST_ITEM_LAYOUT.paddingY}px`,
-            '--list-item-padding-left': this.paddingLeft,
-            '--list-item-padding-right': `${LIST_ITEM_LAYOUT.paddingRight}px`,
-            '--list-item-gap': `${LIST_ITEM_LAYOUT.gap}px`,
-            '--list-item-font-size': `${LIST_ITEM_TYPOGRAPHY.fontSize}px`,
-            '--list-item-line-height': `${LIST_ITEM_TYPOGRAPHY.lineHeight}px`,
-            '--list-item-font-weight': LIST_ITEM_TYPOGRAPHY.fontWeight,
-            '--list-item-bg': isDepth1Group
-                ? LIST_ITEM_COLORS.depth1.bg
-                : isDepth2Group
-                    ? LIST_ITEM_COLORS.depth2.bg
-                    : LIST_ITEM_COLORS.bg.default,
-            '--list-item-bg-hover': LIST_ITEM_COLORS.bg.hover,
-            '--list-item-color': LIST_ITEM_COLORS.content.default,
-            '--list-item-color-hover': LIST_ITEM_COLORS.content.hover,
-            '--list-item-color-disabled': LIST_ITEM_COLORS.content.disabled,
-            '--list-item-color-selected': LIST_ITEM_COLORS.content.selected,
-            '--list-item-font-weight-selected': LIST_ITEM_TYPOGRAPHY.selectedFontWeight,
-        };
-        if (isDepth1Group) {
-            cssVars['--list-item-border-top'] =
-                `${LIST_ITEM_COLORS.depth1.borderWidth}px solid ${LIST_ITEM_COLORS.depth1.border}`;
-        }
-        return (
-        // 키보드 네비게이션은 부모 listbox 의 ArrowUp/Down + Enter 가 담당. 항목 자체는 role=option, tabindex=-1 으로 표시.
-        // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-        h("div", { key: '0e0a07c33c9e6718771ba8cc27d62e4909434562', role: "option", tabindex: -1, "aria-selected": this.isSelected === true ? 'true' : 'false', class: {
-                'sd-select-list-item': true,
-                'sd-select-list-item--group': isGroup,
-                'sd-select-list-item--depth1-group': isDepth1Group,
-                'sd-select-list-item--depth2-group': isDepth2Group,
-                'sd-select-list-item--selected': this.isSelected === true,
-                'sd-select-list-item--indeterminate': this.isSelected === null,
-                'sd-select-list-item--focused': this.isFocused,
-                'sd-select-list-item--selectable': this.isSelectable && !this.option.disabled,
-                'sd-select-list-item--disabled': !!this.option.disabled,
-            }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (h("sd-checkbox", { key: 'd3078da8737c28b279f2057c06266710af6191cd', value: this.isSelected === null ? null : !!this.isSelected, disabled: this.option.disabled, inverse: this.isFocused && this.isSelected !== false, class: "sd-select-list-item__checkbox", onClick: this.handleCheckboxClick, onSdUpdate: this.handleCheckboxUpdate })), isHtmlLabel(this.option.label) ? (h("span", { class: "sd-select-list-item__label", ref: el => el && (el.innerHTML = sanitizeInlineHtml(this.option.label)) })) : (h("span", { class: "sd-select-list-item__label" }, this.option.label)), this.countInfo && (h("span", { key: '36b88dbda0d2bbd27b5df60eaaa855ebe77e0905', class: "sd-select-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
-    }
-};
-SdSelectListItem.style = sdSelectListItemCss();
-
-const sdSelectListItemSearchCss = () => `sd-select-list-item-search{display:block}sd-select-list-item-search .sd-select-list-item-search{padding:4px 8px;position:sticky;top:0;z-index:1;background:white}sd-select-list-item-search .sd-select-list-item-search--scrolled{box-shadow:0 2px 4px rgba(0, 0, 0, 0.08)}sd-select-list-item-search .sd-select-list-item-search__inner{display:flex;align-items:center;gap:6px;padding:4px 8px;border:1px solid #cccccc;border-radius:4px;background:white}sd-select-list-item-search .sd-select-list-item-search__inner:focus-within{border-color:#0075ff}sd-select-list-item-search .sd-select-list-item-search__icon{flex-shrink:0}sd-select-list-item-search .sd-select-list-item-search__input{flex:1;border:none;outline:none;font-size:12px;line-height:20px;color:#222222;background:transparent;min-width:0}sd-select-list-item-search .sd-select-list-item-search__input::placeholder{color:#aaaaaa}sd-select-list-item-search .sd-select-list-item-search__clear{flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:2px;border:none;background:transparent;cursor:pointer;border-radius:2px}sd-select-list-item-search .sd-select-list-item-search__clear:hover{background:#f0f0f0}sd-select-list-item-search .sd-select-list-item-search__clear--hidden{visibility:hidden;pointer-events:none}`;
-
-const SdSelectListItemSearch = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.searchFilter = createEvent(this, "sdSearchFilter", 7);
-        this.searchFocus = createEvent(this, "sdSearchFocus", 7);
-    }
-    /** 리스트가 스크롤된 상태 여부 (그림자 효과용) */
-    isScrolled = false;
-    searchText = '';
-    /** 검색어가 변경될 때 발생합니다. */
-    searchFilter;
-    /** 검색 입력에 포커스될 때 발생합니다. */
-    searchFocus;
-    inputEl;
-    debounceTimer;
-    focusRafId;
-    componentDidLoad() {
-        requestAnimationFrame(() => {
-            this.focusRafId = requestAnimationFrame(() => {
-                this.inputEl?.focus();
-            });
-        });
-    }
-    /** 검색 입력에 포커스를 이동합니다. */
-    async sdFocus() {
-        this.inputEl?.focus();
-    }
-    handleInput = (e) => {
-        this.searchText = e.target.value;
-        if (this.debounceTimer)
-            clearTimeout(this.debounceTimer);
-        this.debounceTimer = setTimeout(() => {
-            this.searchFilter.emit(this.searchText);
-        }, SEARCH_DEBOUNCE_MS);
-    };
-    handleClear = (e) => {
-        e.stopPropagation();
-        this.searchText = '';
-        if (this.debounceTimer)
-            clearTimeout(this.debounceTimer);
-        this.searchFilter.emit('');
-        this.inputEl?.focus();
-    };
-    disconnectedCallback() {
-        if (this.focusRafId !== undefined)
-            cancelAnimationFrame(this.focusRafId);
-        if (this.debounceTimer !== undefined)
-            clearTimeout(this.debounceTimer);
-    }
-    render() {
-        return (h("div", { key: '6caac256fb6b1fc3e7b3fc7f7ee66b163737f944', class: {
-                'sd-select-list-item-search': true,
-                'sd-select-list-item-search--scrolled': this.isScrolled,
-            } }, h("div", { key: '3193b47072cb73c4400e606aa8dbd4553e178738', class: "sd-select-list-item-search__inner" }, h("sd-icon", { key: '6165dae71933cbdf5c66d533d4cae43ae95f7bd4', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), h("input", { key: 'd0526a3a20e220068a4b4cb489af060c80952325', ref: el => {
-                this.inputEl = el;
-            }, type: "text", class: "sd-select-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput, onFocus: () => this.searchFocus.emit() }), h("button", { key: 'e139b3ddab9ac793bfcf44480161a1d0c501a861', type: "button", class: {
-                'sd-select-list-item-search__clear': true,
-                'sd-select-list-item-search__clear--hidden': this.searchText === '',
-            }, onClick: this.handleClear, tabindex: this.searchText !== '' ? 0 : -1, "aria-hidden": this.searchText !== '' ? 'false' : 'true' }, h("sd-icon", { key: '4d29274a17767dec92bb6052196832272ab215df', name: "close", size: 12, color: "#888888" })))));
-    }
-};
-SdSelectListItemSearch.style = sdSelectListItemSearchCss();
-
-export { SdSelectListItem as sd_select_list_item, SdSelectListItemSearch as sd_select_list_item_search };

package/dist/esm/sd-select.config-CeHGlqOT.js

@@ -1,129 +0,0 @@
-import { l as listItemTokens } from './component.listItem-4S0_Ykmo.js';
-import { l as listBoxTokens } from './component.listBox-DlJaYVWf.js';
-
-const select = {
-	sm: {
-		paddingX: "12",
-		gap: "8",
-		typography: {
-			fontWeight: "400",
-			fontSize: "12",
-			lineHeight: "20"}},
-	icon: {
-		"default": "#888888",
-		disabled: "#BBBBBB"
-	},
-	text: {
-		"default": "#222222",
-		disabled: "#888888"
-	}
-};
-var selectTokens = {
-	select: select
-};
-
-// ── Select Trigger Tokens ──
-const SELECT_LAYOUT = {
-    paddingX: selectTokens.select.sm.paddingX,
-    gap: selectTokens.select.sm.gap};
-const SELECT_TYPOGRAPHY = {
-    fontSize: selectTokens.select.sm.typography.fontSize,
-    lineHeight: selectTokens.select.sm.typography.lineHeight,
-    fontWeight: selectTokens.select.sm.typography.fontWeight,
-};
-const SELECT_COLORS = {
-    icon: {
-        default: selectTokens.select.icon.default,
-        disabled: selectTokens.select.icon.disabled,
-    },
-    text: {
-        default: selectTokens.select.text.default,
-        disabled: selectTokens.select.text.disabled,
-    },
-};
-// ── ListItem Tokens ──
-const LIST_ITEM_LAYOUT = {
-    paddingY: listItemTokens.listItem.paddingY,
-    paddingRight: listItemTokens.listItem.paddingRight,
-    paddingLeft: {
-        depth1: listItemTokens.listItem.paddingLeft.depth1,
-        depth2: listItemTokens.listItem.paddingLeft.depth2,
-        depth3: listItemTokens.listItem.paddingLeft.depth3,
-    },
-    gap: listItemTokens.listItem.gap,
-};
-const LIST_ITEM_TYPOGRAPHY = {
-    fontSize: listItemTokens.listItem.typography.default.fontSize,
-    lineHeight: listItemTokens.listItem.typography.default.lineHeight,
-    fontWeight: listItemTokens.listItem.typography.default.fontWeight,
-    selectedFontWeight: listItemTokens.listItem.typography.selected.fontWeight,
-};
-const LIST_ITEM_COLORS = {
-    bg: {
-        default: listItemTokens.listItem.bg.default,
-        hover: listItemTokens.listItem.bg.hover,
-    },
-    content: {
-        default: listItemTokens.listItem.content.default,
-        hover: listItemTokens.listItem.content.hover,
-        disabled: listItemTokens.listItem.content.disabled,
-        selected: listItemTokens.listItem.content.selected,
-    },
-    depth1: {
-        bg: listItemTokens.listItem.depth1.bg.default,
-        border: listItemTokens.listItem.depth1.border.color,
-        borderWidth: listItemTokens.listItem.depth1.border.width,
-    },
-    depth2: {
-        bg: listItemTokens.listItem.depth2.middle.bg,
-    }};
-// ── ListBox Tokens ──
-const LIST_BOX_LAYOUT = {
-    radius: listBoxTokens.listBox.radius,
-};
-// ── Constants ──
-const SEARCH_THRESHOLD = 11;
-const SEARCH_DEBOUNCE_MS = 1000;
-const EMPTY_MESSAGE = '표시할 항목이 없습니다.';
-// ── Utilities ──
-function isHtmlLabel(label) {
-    return /<[a-z][\s\S]*>/i.test(label);
-}
-function extractText(html) {
-    return html.replace(/<[^>]*>/g, '');
-}
-function countLeaves(options) {
-    return options.reduce((sum, option) => {
-        if (option.children) {
-            return sum + countLeaves(option.children);
-        }
-        return sum + 1;
-    }, 0);
-}
-function filterTree(options, keyword) {
-    const lowerKeyword = (keyword ?? '').toLowerCase();
-    return options.reduce((acc, option) => {
-        const labelText = isHtmlLabel(option.label) ? extractText(option.label) : option.label;
-        const selfMatch = labelText != null && labelText.toLowerCase().includes(lowerKeyword);
-        if (option.children) {
-            // 그룹: 자식은 항상 추가로 필터링한다.
-            // - 자식 중 일치하는 게 있으면 그 자식들만 노출
-            // - 자식 매칭이 없더라도 그룹명이 매칭되면 그룹 헤더는 그대로 노출
-            //   (이때 children 은 빈 배열로 두고, 선택 동작은 collectVisibleLeaves
-            //    의 fallback 이 원본 트리를 사용해 처리한다)
-            const filteredChildren = filterTree(option.children, keyword);
-            if (filteredChildren.length > 0) {
-                acc.push({ ...option, children: filteredChildren });
-            }
-            else if (selfMatch) {
-                acc.push({ ...option, children: [] });
-            }
-        }
-        else if (selfMatch) {
-            acc.push({ ...option });
-        }
-        return acc;
-    }, []);
-}
-
-export { EMPTY_MESSAGE as E, LIST_BOX_LAYOUT as L, SEARCH_THRESHOLD as S, SELECT_COLORS as a, SELECT_TYPOGRAPHY as b, countLeaves as c, SELECT_LAYOUT as d, extractText as e, filterTree as f, LIST_ITEM_LAYOUT as g, LIST_ITEM_TYPOGRAPHY as h, isHtmlLabel as i, LIST_ITEM_COLORS as j, SEARCH_DEBOUNCE_MS as k };

package/dist/esm/sd-table.config-DmOBlnsM.js

@@ -1,70 +0,0 @@
-import { t as tableTokens } from './component.table-5pkzwl5N.js';
-import { s as systemTokens } from './system-BJfiMC9H.js';
-
-// ── Header Tokens ──
-const TABLE_HEADER_LAYOUT = {
-    height: tableTokens.table.header.height,
-    paddingX: tableTokens.table.header.paddingX,
-    gap: tableTokens.table.header.gap,
-};
-const TABLE_HEADER_TYPOGRAPHY = {
-    fontFamily: tableTokens.table.header.typography.fontFamily,
-    fontWeight: tableTokens.table.header.typography.fontWeight,
-    fontSize: tableTokens.table.header.typography.fontSize,
-    lineHeight: tableTokens.table.header.typography.lineHeight,
-    textDecoration: tableTokens.table.header.typography.textDecoration,
-};
-const TABLE_HEADER_COLORS = {
-    bg: tableTokens.table.header.bg,
-};
-const TABLE_HEADER_RESIZING_BAR = {
-    color: tableTokens.table.header.resizingBar.color,
-    height: tableTokens.table.header.resizingBar.height,
-};
-// ── Body Tokens ──
-const TABLE_BODY_LAYOUT = {
-    default: {
-        height: tableTokens.table.body.default.height,
-        paddingY: tableTokens.table.body.default.paddingY,
-    },
-    dense: {
-        height: tableTokens.table.body.dense.height,
-        paddingY: tableTokens.table.body.paddingY.dense,
-    },
-    paddingX: tableTokens.table.body.paddingX.wide,
-    densePaddingX: tableTokens.table.body.paddingX.default,
-    framePadding: tableTokens.table.body.paddingX.default,
-};
-const TABLE_BODY_TYPOGRAPHY = {
-    fontFamily: tableTokens.table.body.typography.fontFamily,
-    fontWeight: tableTokens.table.body.typography.fontWeight,
-    fontSize: tableTokens.table.body.typography.fontSize,
-    lineHeight: tableTokens.table.body.typography.lineHeight,
-    textDecoration: tableTokens.table.body.typography.textDecoration,
-};
-// ── Frame / Border Tokens ──
-const TABLE_BORDER = {
-    color: tableTokens.table.border.color,
-    width: tableTokens.table.border.width,
-};
-const TABLE_SEPARATOR = {
-    color: tableTokens.table.separator.color,
-    width: tableTokens.table.separator.width.default,
-    denseWidth: tableTokens.table.separator.width.dense,
-};
-const TABLE_RADIUS = tableTokens.table.radius;
-// ── Selectable Column ──
-const TABLE_SELECTABLE_COLUMN_WIDTH = 48;
-// ── Header Icon Color Defaults ──
-const ICON_DEFAULT_COLOR = {
-    pageEdit: systemTokens.color.darkblue.strong,
-    arrowDown: systemTokens.color.darkblue.strong,
-    arrowUp: systemTokens.color.darkblue.strong,
-    updown: systemTokens.color.grey.strong,
-    pageMove: systemTokens.color.darkblue.strong,
-    star: systemTokens.color.blue.strong,
-};
-const resolveTableIconColor = (name, override) => override ?? ICON_DEFAULT_COLOR[name];
-const resolveSortIconName = (sort) => sort === 'asc' ? 'arrowDown' : sort === 'desc' ? 'arrowUp' : 'updown';
-
-export { TABLE_BODY_LAYOUT as T, TABLE_SELECTABLE_COLUMN_WIDTH as a, TABLE_BODY_TYPOGRAPHY as b, TABLE_BORDER as c, TABLE_RADIUS as d, resolveSortIconName as e, TABLE_HEADER_RESIZING_BAR as f, TABLE_HEADER_TYPOGRAPHY as g, TABLE_HEADER_COLORS as h, TABLE_HEADER_LAYOUT as i, TABLE_SEPARATOR as j, resolveTableIconColor as r };