@sellmate/design-system 1.27.1 → 1.29.0

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

@@ -1,172 +0,0 @@
-'use strict';
-
-var index = require('./index-DsYLSqCp.js');
-var sdSelect_config = require('./sd-select.config-C9Ohe1QA.js');
-var sanitizeInlineHtml = require('./sanitize-inline-html-CRCAeQ46.js');
-require('./component.listItem-Bnh0r_CA.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) {
-        index.registerInstance(this, hostRef);
-        this.listItemClick = index.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 `${sdSelect_config.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': `${sdSelect_config.LIST_ITEM_LAYOUT.paddingY}px`,
-            '--list-item-padding-left': this.paddingLeft,
-            '--list-item-padding-right': `${sdSelect_config.LIST_ITEM_LAYOUT.paddingRight}px`,
-            '--list-item-gap': `${sdSelect_config.LIST_ITEM_LAYOUT.gap}px`,
-            '--list-item-font-size': `${sdSelect_config.LIST_ITEM_TYPOGRAPHY.fontSize}px`,
-            '--list-item-line-height': `${sdSelect_config.LIST_ITEM_TYPOGRAPHY.lineHeight}px`,
-            '--list-item-font-weight': sdSelect_config.LIST_ITEM_TYPOGRAPHY.fontWeight,
-            '--list-item-bg': isDepth1Group
-                ? sdSelect_config.LIST_ITEM_COLORS.depth1.bg
-                : isDepth2Group
-                    ? sdSelect_config.LIST_ITEM_COLORS.depth2.bg
-                    : sdSelect_config.LIST_ITEM_COLORS.bg.default,
-            '--list-item-bg-hover': sdSelect_config.LIST_ITEM_COLORS.bg.hover,
-            '--list-item-color': sdSelect_config.LIST_ITEM_COLORS.content.default,
-            '--list-item-color-hover': sdSelect_config.LIST_ITEM_COLORS.content.hover,
-            '--list-item-color-disabled': sdSelect_config.LIST_ITEM_COLORS.content.disabled,
-            '--list-item-color-selected': sdSelect_config.LIST_ITEM_COLORS.content.selected,
-            '--list-item-font-weight-selected': sdSelect_config.LIST_ITEM_TYPOGRAPHY.selectedFontWeight,
-        };
-        if (isDepth1Group) {
-            cssVars['--list-item-border-top'] =
-                `${sdSelect_config.LIST_ITEM_COLORS.depth1.borderWidth}px solid ${sdSelect_config.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
-        index.h("div", { key: 'dd2c4cbd210ed70c00a954a9c6da6923ea76c91e', 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 && (index.h("sd-checkbox", { key: '18fb5ec3ccd00aa34c974975324bb214aa4d38f8', 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 })), sdSelect_config.isHtmlLabel(this.option.label) ? (index.h("span", { class: "sd-select-list-item__label", ref: el => el && (el.innerHTML = sanitizeInlineHtml.sanitizeInlineHtml(this.option.label)) })) : (index.h("span", { class: "sd-select-list-item__label" }, this.option.label)), this.countInfo && (index.h("span", { key: '70ee48fdece9e38db3bf9450a5d82ad6db4ec985', 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) {
-        index.registerInstance(this, hostRef);
-        this.searchFilter = index.createEvent(this, "sdSearchFilter", 7);
-        this.searchFocus = index.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);
-        }, sdSelect_config.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 (index.h("div", { key: '951bb1f2507918c057bb88bd8254a8b4bc4b6018', class: {
-                'sd-select-list-item-search': true,
-                'sd-select-list-item-search--scrolled': this.isScrolled,
-            } }, index.h("div", { key: '32164db917f4ccadb301c00e77d8296d0ef59e7d', class: "sd-select-list-item-search__inner" }, index.h("sd-icon", { key: '9493497b5b8b7274c31bac9e865a1949c0cd4493', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), index.h("input", { key: '3917e46b5e6ad55ab7481655fe31d7a3b29632f6', 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() }), index.h("button", { key: '93c11a138545e9480aae3dd0ed961fe613fc1b14', 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' }, index.h("sd-icon", { key: 'dead91d16ab3af88a4a94ee061b9ca1c1336f2f7', name: "close", size: 12, color: "#888888" })))));
-    }
-};
-SdSelectListItemSearch.style = sdSelectListItemSearchCss();
-
-exports.sd_select_list_item = SdSelectListItem;
-exports.sd_select_list_item_search = SdSelectListItemSearch;

package/dist/cjs/sd-select.config-C9Ohe1QA.js

@@ -1,143 +0,0 @@
-'use strict';
-
-var component_listItem = require('./component.listItem-Bnh0r_CA.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: component_listItem.listItemTokens.listItem.paddingY,
-    paddingRight: component_listItem.listItemTokens.listItem.paddingRight,
-    paddingLeft: {
-        depth1: component_listItem.listItemTokens.listItem.paddingLeft.depth1,
-        depth2: component_listItem.listItemTokens.listItem.paddingLeft.depth2,
-        depth3: component_listItem.listItemTokens.listItem.paddingLeft.depth3,
-    },
-    gap: component_listItem.listItemTokens.listItem.gap,
-};
-const LIST_ITEM_TYPOGRAPHY = {
-    fontSize: component_listItem.listItemTokens.listItem.typography.default.fontSize,
-    lineHeight: component_listItem.listItemTokens.listItem.typography.default.lineHeight,
-    fontWeight: component_listItem.listItemTokens.listItem.typography.default.fontWeight,
-    selectedFontWeight: component_listItem.listItemTokens.listItem.typography.selected.fontWeight,
-};
-const LIST_ITEM_COLORS = {
-    bg: {
-        default: component_listItem.listItemTokens.listItem.bg.default,
-        hover: component_listItem.listItemTokens.listItem.bg.hover,
-    },
-    content: {
-        default: component_listItem.listItemTokens.listItem.content.default,
-        hover: component_listItem.listItemTokens.listItem.content.hover,
-        disabled: component_listItem.listItemTokens.listItem.content.disabled,
-        selected: component_listItem.listItemTokens.listItem.content.selected,
-    },
-    depth1: {
-        bg: component_listItem.listItemTokens.listItem.depth1.bg.default,
-        border: component_listItem.listItemTokens.listItem.depth1.border.color,
-        borderWidth: component_listItem.listItemTokens.listItem.depth1.border.width,
-    },
-    depth2: {
-        bg: component_listItem.listItemTokens.listItem.depth2.middle.bg,
-    }};
-// ── ListBox Tokens ──
-const LIST_BOX_LAYOUT = {
-    radius: component_listItem.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;
-    }, []);
-}
-
-exports.EMPTY_MESSAGE = EMPTY_MESSAGE;
-exports.LIST_BOX_LAYOUT = LIST_BOX_LAYOUT;
-exports.LIST_ITEM_COLORS = LIST_ITEM_COLORS;
-exports.LIST_ITEM_LAYOUT = LIST_ITEM_LAYOUT;
-exports.LIST_ITEM_TYPOGRAPHY = LIST_ITEM_TYPOGRAPHY;
-exports.SEARCH_DEBOUNCE_MS = SEARCH_DEBOUNCE_MS;
-exports.SEARCH_THRESHOLD = SEARCH_THRESHOLD;
-exports.SELECT_COLORS = SELECT_COLORS;
-exports.SELECT_LAYOUT = SELECT_LAYOUT;
-exports.SELECT_TYPOGRAPHY = SELECT_TYPOGRAPHY;
-exports.countLeaves = countLeaves;
-exports.extractText = extractText;
-exports.filterTree = filterTree;
-exports.isHtmlLabel = isHtmlLabel;