@sellmate/design-system 1.0.75 → 1.0.77

package/dist/esm/sd-select-option-group.entry.js

@@ -1,66 +0,0 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-Bp7ytJz5.js';
-
-const sdSelectOptionGroupCss = () => `sd-select-option-group{display:block;height:fit-content}sd-select-option-group .sd-select__option-group{display:flex;padding:4px 12px;padding-left:12px;font-size:12px;line-height:20px;cursor:pointer}sd-select-option-group .sd-select__option-group.sd-select__option-group--group:not(.sd-select__option-group--use-checkbox),sd-select-option-group .sd-select__option-group.sd-select__option-group--subgroup:not(.sd-select__option-group--use-checkbox){cursor:default !important}sd-select-option-group .sd-select__option-group.sd-select__option-group--group{background-color:#F5FAFF !important;color:#333333 !important;font-weight:700}sd-select-option-group .sd-select__option-group.sd-select__option-group--subgroup{padding-left:20px;background-color:#F9F9F9 !important;color:#333333 !important;font-weight:500}sd-select-option-group .sd-select__option-group.sd-select__option-group--item{padding-left:28px}sd-select-option-group .sd-select__option-group sd-checkbox__bg{border-color:#888888}sd-select-option-group .sd-select__option-group__label-wrapper{display:flex;width:100%;column-gap:8px;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}sd-select-option-group .sd-select__option-group__label-wrapper sd-checkbox{flex-shrink:0}sd-select-option-group .sd-select__option-group__label-wrapper .sd-select__option-group-label{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}sd-select-option-group .sd-select__option-group__label-wrapper .sd-select__option-group__count-indicator{width:fit-content;flex-shrink:0;font-size:12px;font-weight:500;color:#888888}sd-select-option-group .sd-select__option-group--focused{background-color:#E6F1FF}sd-select-option-group .sd-select__option-group--selected.sd-select__option-group--item:not(:hover):not(.sd-select__option-group--use-checkbox),sd-select-option-group .sd-select__option-group--focused.sd-select__option-group--item:not(:hover):not(.sd-select__option-group--use-checkbox){color:#0075FF;font-weight:700}sd-select-option-group .sd-select__option-group--disabled{color:#AAAAAA;cursor:not-allowed}sd-select-option-group .sd-select__option-group:hover:not(.sd-select__option-group--disabled){background-color:#0075FF;color:white}sd-select-option-group .sd-select__option-group:hover.sd-select__option-group--selected:not(.sd-select__option-group--group):not(.sd-select__option-group--subgroup) sd-checkbox .sd-checkbox__bg{border-color:white !important}`;
-
-const SdSelectOptionGroup = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.optionClick = createEvent(this, "optionClick", 7);
-    }
-    get el() { return getElement(this); }
-    option;
-    index;
-    isSelected = false;
-    isFocused = false;
-    optionStyle;
-    disabled = false;
-    useCheckbox = false;
-    useIndicator = true;
-    countInfo = {
-        selectedCount: 0,
-        totalCount: 0,
-    };
-    isHovered = false;
-    async isDisabled() {
-        return !!this.option.disabled || this.option.type === 'group' || this.option.type === 'subgroup';
-    }
-    optionClick;
-    handleClick = (option, isSelected, event) => {
-        event.stopPropagation();
-        if (option.type === 'group' || option.type === 'subgroup') {
-            this.optionClick.emit({
-                option: this.option,
-                isSelected,
-                index: this.index,
-                event,
-            });
-            return;
-        }
-        if (!this.option.disabled && !this.disabled) {
-            this.optionClick.emit({
-                option: this.option,
-                isSelected,
-                index: this.index,
-                event,
-            });
-        }
-    };
-    render() {
-        return (h("div", { key: '647a7be115df96fe30d3b69d3b09ee45d229d86c', class: {
-                'sd-select__option-group': true,
-                'sd-select__option-group--selected': !!this.isSelected,
-                'sd-select__option-group--disabled': !!this.option.disabled,
-                'sd-select__option-group--focused': this.isFocused,
-                'sd-select__option-group--use-checkbox': this.useCheckbox,
-                'sd-select__option-group--group': this.option.type === 'group',
-                'sd-select__option-group--subgroup': this.option.type === 'subgroup',
-                'sd-select__option-group--item': this.option.type === 'item',
-            }, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, h("div", { key: 'b1b1697c34e57667203992f8e4e6e9438f204dea', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (h("sd-checkbox", { key: 'b67bec9cfd93739348f7d6c3e93945c28171e752', value: this.isSelected, disabled: this.option.disabled, onClick: e => {
-                e.preventDefault();
-                this.handleClick(this.option, this.isSelected, e);
-            } })), h("span", { key: 'a65090e487a45acec39155aa6df00a1500249e20', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (h("span", { key: '5024421742568127097655bcb39af70b61cc3403', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
-    }
-};
-SdSelectOptionGroup.style = sdSelectOptionGroupCss();
-
-export { SdSelectOptionGroup as sd_select_option_group };

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

@@ -1,179 +0,0 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-Bp7ytJz5.js';
-import { B as BaseDropdownEvent } from './base-dropdown-event-CRdYeSBK.js';
-import { S as SelectKeyboardNavigation } from './select-keyboard-navigation-Cy6HMEsK.js';
-import { n as nanoid } from './index-CCwNgVmC.js';
-
-const sdSelectCss = () => `sd-select{display:inline-flex;flex-flow:column nowrap;height:fit-content}sd-select *:focus,sd-select *:focus-visible,sd-select *:focus-within{outline:none !important}sd-select .sd-select{width:100%}sd-select .sd-select .sd-select__trigger{padding:4px 28px 4px 12px;display:flex;width:100%;height:100%;align-items:center;cursor:pointer}.sd-field--disabled sd-select .sd-select .sd-select__trigger{cursor:not-allowed}sd-select .sd-select .sd-select__trigger .sd-select__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:20px;font-size:12px;font-weight:400;text-align:left}sd-select .sd-select .sd-select__trigger .sd-select__clear{margin:0 4px;width:8px;height:8px;background-color:transparent;outline:none;border:none}sd-select .sd-select .sd-select__arrow{position:absolute;top:8px;right:8px;width:12px;height:12px;color:#888888;transition:transform 0.3s ease;margin-left:8px}sd-select .sd-select .sd-select__arrow--open{transform:rotate(180deg)}`;
-
-const SdSelect = class extends BaseDropdownEvent {
-    constructor(hostRef) {
-        super();
-        registerInstance(this, hostRef);
-        this.update = createEvent(this, "sdUpdate", 7);
-        this.dropDownShow = createEvent(this, "sdDropDownShow", 7);
-    }
-    get el() { return getElement(this); }
-    // props
-    value = null;
-    options = [];
-    placeholder = '선택';
-    optionPlaceholder = '선택지가 없습니다.';
-    width = '200px';
-    dropdownHeight = '260px';
-    autoFocus = false;
-    disabled = false;
-    clearable = false;
-    searchable = false;
-    // props - label
-    label = '';
-    labelWidth = '';
-    addonLabel = '';
-    addonAlign = 'start';
-    icon = undefined;
-    labelTooltip = '';
-    labelTooltipProps = null;
-    // props - form
-    rules = [];
-    error = false;
-    // props - custom slots
-    optionRenderer;
-    // states
-    isOpen = false;
-    itemIndex = -1;
-    isScrolled = false;
-    // events
-    update;
-    dropDownShow;
-    selectRef;
-    triggerRef;
-    formField;
-    filteredOptions = [];
-    dropDownWidth = '200px';
-    name = nanoid();
-    async sdOpen() {
-        this.isOpen = true;
-    }
-    async sdValidate() {
-        this.formField?.sdValidate();
-    }
-    async sdReset() {
-        this.formField?.sdReset();
-    }
-    async sdResetValidate() {
-        this.formField?.sdResetValidation();
-    }
-    async sdFocus() {
-        this.formField?.sdFocus();
-    }
-    async isOpenChanged() {
-        // Base class의 이벤트 관리 호출 - 다른 select와의 이벤트 충돌 방지
-        this.onDropdownToggle(this.isOpen);
-        this.dropDownShow?.emit({ isOpen: this.isOpen });
-        if (this.isOpen === false) {
-            await this.formField?.sdValidate();
-        }
-    }
-    componentWillLoad() {
-        this.filteredOptions = this.options;
-        this.dropDownWidth = this.width;
-        this.initializeEvent();
-    }
-    componentDidLoad() {
-        if (this.autoFocus) {
-            this.selectRef?.focus();
-        }
-    }
-    // render 이후 label을 제외한 trigger의 너비를 기준으로 dropdown 너비 설정
-    componentDidRender() {
-        const trigger = this.triggerRef;
-        const rect = trigger?.getBoundingClientRect();
-        this.dropDownWidth = rect?.width ? `${rect.width}px` : this.width;
-    }
-    disconnectedCallback() {
-        this.cleanupEvent(); // global dropdown Manager에서 제거 + 이벤트 정리
-    }
-    handleDocumentClick(event) {
-        if (!this.selectRef?.contains(event.target)) {
-            this.isOpen = false;
-        }
-    }
-    handleDocumentKeydown(keyboardEvent) {
-        keyboardEvent.stopPropagation();
-        const targetKey = ['ArrowDown', 'ArrowUp', 'Enter', 'Escape'];
-        if (!targetKey.includes(keyboardEvent.key))
-            return;
-        keyboardEvent.preventDefault();
-        switch (keyboardEvent.key) {
-            case 'ArrowDown':
-            case 'ArrowUp':
-                const keyboardNavigation = new SelectKeyboardNavigation(this.searchable, this.filteredOptions);
-                const nextIndex = keyboardNavigation.getNextIndex(this.itemIndex, keyboardEvent.key);
-                this.itemIndex = nextIndex;
-                break;
-            case 'Enter':
-                const selectedOption = this.filteredOptions[this.itemIndex];
-                if (selectedOption && !selectedOption.disabled) {
-                    this.value = selectedOption.value;
-                    this.isOpen = false;
-                }
-                break;
-            case 'Escape':
-                this.isOpen = false;
-                break;
-        }
-    }
-    getSelectedOption() {
-        return this.options.find(option => option.value === this.value);
-    }
-    closeDropdown() {
-        this.isOpen = false;
-    }
-    handleTriggerClick = (event) => {
-        event.stopPropagation();
-        if (!this.disabled) {
-            this.isOpen = !this.isOpen;
-            this.dropDownShow?.emit({ isOpen: this.isOpen });
-        }
-    };
-    handleOptionClick = (detail) => {
-        const { option, event } = detail;
-        event.stopPropagation();
-        if (!option.disabled) {
-            this.value = option.value;
-            this.isOpen = false;
-            const selectedOption = this.getSelectedOption();
-            this.update?.emit({ value: selectedOption?.value || null, option: selectedOption || null });
-        }
-    };
-    render() {
-        return (h("sd-field", { key: '28b4667a386236c2486af08f636ede3dc6c41f91', label: this.label, labelWidth: this.labelWidth, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, addonLabel: this.addonLabel, addonAlign: this.addonAlign, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, h("div", { key: 'ccee78ca4a773c521634e4054ce3b3d8e9713362', class: {
-                'sd-select': true,
-                'sd-select--disabled': this.disabled,
-                'sd-select--error': !!this.error,
-                'sd-select--label': !!this.label,
-            }, ref: el => (this.selectRef = el) }, this.renderTrigger(), this.renderDropdown())));
-    }
-    renderTrigger() {
-        const selectedOption = this.getSelectedOption();
-        return (h("div", { class: "sd-select__trigger", tabindex: this.disabled ? -1 : 0, onClick: this.handleTriggerClick, ref: el => (this.triggerRef = el) }, h("span", { class: "sd-select__value" }, selectedOption ? selectedOption.label : this.placeholder), this.clearable && selectedOption && !this.disabled && (h("sd-icon", { key: "clear-icon", name: "close", size: 10, color: "#888", class: "sd-select__clear", onClick: async (event) => {
-                event.stopPropagation();
-                this.value = null;
-                await this.formField?.sdValidate();
-            } })), h("sd-icon", { key: "arrow-icon", name: "arrowDown", color: "#888", class: { 'sd-select__arrow': true, 'sd-select__arrow--open': this.isOpen } })));
-    }
-    renderDropdown() {
-        if (this.isOpen === false)
-            return null;
-        const parentRef = (this.selectRef?.querySelector('.sd-select__trigger') ||
-            this.selectRef);
-        return (h("sd-portal", { open: this.isOpen, parentRef: parentRef, onSdClose: this.closeDropdown }, h("sd-select-dropdown", { value: this.value, options: this.options, itemIndex: this.itemIndex, width: this.dropDownWidth, dropdownHeight: this.dropdownHeight, searchable: this.searchable, optionPlaceholder: this.optionPlaceholder, onSdOptionClick: ({ detail }) => this.handleOptionClick(detail), onSdOptionFiltered: ({ detail }) => (this.filteredOptions = detail) })));
-    }
-    static get watchers() { return {
-        "isOpen": [{
-                "isOpenChanged": 0
-            }]
-    }; }
-};
-SdSelect.style = sdSelectCss();
-
-export { SdSelect as sd_select };

package/dist/esm/sd-tbody.entry.js

@@ -1,64 +0,0 @@
-import { r as registerInstance, a as getElement, h, H as Host } from './index-Bp7ytJz5.js';
-import { T as TABLE_ID_ATTR } from './constants-sZMi_32I.js';
-
-const sdTbodyCss = () => `:host{display:contents}:host *{box-sizing:border-box}.tbody{display:table-row-group}.tbody--empty .tbody__no-data-row{display:table-row}.tbody--empty .tbody__no-data-cell{display:table-cell;padding:0;border-bottom:none}`;
-
-const SdTbody = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    get el() { return getElement(this); }
-    rows = [];
-    tableId = '';
-    topSpacerHeight = 0;
-    bottomSpacerHeight = 0;
-    tableEl = null;
-    handleRowsChange(newRows) {
-        const safeRows = newRows ?? [];
-        if (this.tableEl?.setRowCountSync) {
-            this.tableEl.setRowCountSync(safeRows.length);
-        }
-    }
-    componentWillLoad() {
-        this.syncTableContext();
-        this.rows = this.rows ?? [];
-        if (this.tableEl?.setRowCountSync) {
-            this.tableEl.setRowCountSync(this.rows.length);
-        }
-        this.el.setSpacersSync = (top, bottom) => {
-            this.topSpacerHeight = top;
-            this.bottomSpacerHeight = bottom;
-        };
-    }
-    componentDidLoad() {
-        this.syncTableContext();
-    }
-    syncTableContext() {
-        const table = this.el.closest('sd-table');
-        this.tableEl = table;
-        const fromMethod = table?.getTableIdSync?.();
-        const fromAttr = table?.getAttribute(TABLE_ID_ATTR);
-        const resolvedTableId = (fromMethod && fromMethod !== 'undefined' ? fromMethod : null) ??
-            (fromAttr && fromAttr !== 'undefined' ? fromAttr : null) ??
-            '';
-        if (resolvedTableId && resolvedTableId !== this.tableId) {
-            this.tableId = resolvedTableId;
-        }
-    }
-    render() {
-        const hasRows = this.rows.length > 0;
-        return (h(Host, { key: 'e4c64dbf97185bbc6eaec4b883c65dc8ebd34ece', slot: `${this.tableId}-body` }, h("tbody", { key: 'b2fb886684a5a6055d3af659bba75dd9bc801b73', class: { 'tbody': true, 'tbody--empty': !hasRows } }, hasRows ? ([
-            this.topSpacerHeight > 0 && (h("tr", { key: "spacer-top", class: "tbody__spacer", style: { height: `${this.topSpacerHeight}px`, display: 'block' } })),
-            h("slot", null),
-            this.bottomSpacerHeight > 0 && (h("tr", { key: "spacer-bottom", class: "tbody__spacer", style: { height: `${this.bottomSpacerHeight}px`, display: 'block' } })),
-        ]) : (h("tr", { class: "tbody__no-data-row" }, h("td", { class: "tbody__no-data-cell", colSpan: 100 }, h("slot", { name: "no-data" })))))));
-    }
-    static get watchers() { return {
-        "rows": [{
-                "handleRowsChange": 0
-            }]
-    }; }
-};
-SdTbody.style = sdTbodyCss();
-
-export { SdTbody as sd_tbody };

package/dist/esm/sd-thead.entry.js

@@ -1,177 +0,0 @@
-import { r as registerInstance, a as getElement, h, H as Host } from './index-Bp7ytJz5.js';
-import { T as TABLE_ID_ATTR } from './constants-sZMi_32I.js';
-
-const sdTheadCss = () => `sd-thead{display:contents}sd-thead *{box-sizing:border-box}.thead{display:table-header-group;height:36px}.thead--sticky{position:sticky;top:0;z-index:120}.tr{display:table-row;width:100%}.th{display:table-cell;background:#F5FAFF;height:36px;padding:0 16px;font-weight:500;vertical-align:middle;border-bottom:1px solid #E1E1E1;-webkit-user-select:none;user-select:none;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.th--selected{position:relative;width:52px !important;max-width:52px !important;min-width:52px !important;padding:0 10px 0 24px;text-align:left}.th--selected sd-checkbox label{position:relative}.th--selected sd-checkbox label:before{content:"";position:absolute;inset:-6px}.th.sticky-left{position:sticky;background-color:#F5FAFF;z-index:110 !important;left:var(--sticky-left-offset, 0)}.th.sticky-right{position:sticky;background-color:#F5FAFF;z-index:110 !important;right:var(--sticky-right-offset, 0)}.th.sticky-left-edge:after{content:"";position:absolute;top:0;left:100%;right:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset 12px 0 20px -25px;opacity:0;pointer-events:none;transition:opacity 0.2s}.th.sticky-right-edge:after{content:"";position:absolute;top:0;left:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset -12px 0 20px -25px;opacity:0;pointer-events:none;transition:opacity 0.2s}.th.sticky-left-edge.is-scrolled-left{overflow:visible}.th.sticky-left-edge.is-scrolled-left:after{opacity:1}.th.sticky-right-edge.is-scrolled-right{overflow:visible}.th.sticky-right-edge.is-scrolled-right:after{opacity:1}.th__content{display:flex;flex-flow:row nowrap;align-items:center;gap:4px}.th__content--left{justify-content:flex-start}.th__content--center{justify-content:center}.th__content--right{justify-content:flex-end}.th__content--label{white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.th__resizer{position:absolute;top:50%;right:0;transform:translateY(-50%);width:4px;height:16px;cursor:col-resize;z-index:3;border-left:1px solid #CCCCCC;border-right:1px solid #CCCCCC}.th__resizer--left{right:auto;left:0}`;
-
-const SdThead = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    get el() { return getElement(this); }
-    columns;
-    selectable;
-    resizable;
-    stickyColumn;
-    stickyHeader;
-    scrolledLeft;
-    scrolledRight;
-    rows = [];
-    columnWidths = [];
-    tableId = '';
-    _columns = [];
-    _selectable = false;
-    _resizable = false;
-    _stickyColumn = { left: 0, right: 0 };
-    _stickyHeader = false;
-    _scrolledLeft = false;
-    _scrolledRight = false;
-    tableEl = null;
-    handleColumnsChange(newCols) {
-        if (Array.isArray(newCols) && (this.columnWidths ?? []).length === 0) {
-            this.columnWidths = newCols.map(c => parseInt(c.width || '120', 10));
-        }
-    }
-    componentWillLoad() {
-        this.syncTableContext();
-        this.columnWidths = Array.isArray(this.columnWidths) ? this.columnWidths : [];
-        this.resolveConfig();
-        if ((this.columnWidths ?? []).length === 0) {
-            this.columnWidths = this._columns.map(c => parseInt(c.width || '120', 10));
-        }
-    }
-    componentDidLoad() {
-        this.syncTableContext();
-        this.resolveConfig();
-    }
-    syncTableContext() {
-        const table = this.el.closest('sd-table');
-        this.tableEl = table;
-        const fromMethod = table?.getTableIdSync?.();
-        const fromAttr = table?.getAttribute(TABLE_ID_ATTR);
-        const resolvedTableId = (fromMethod && fromMethod !== 'undefined' ? fromMethod : null) ??
-            (fromAttr && fromAttr !== 'undefined' ? fromAttr : null) ??
-            '';
-        if (resolvedTableId && resolvedTableId !== this.tableId) {
-            this.tableId = resolvedTableId;
-        }
-    }
-    resolveConfig() {
-        const config = this.tableEl?.getConfigSync?.();
-        const resolvedColumns = Array.isArray(this.columns)
-            ? this.columns
-            : Array.isArray(config?.columns)
-                ? config.columns
-                : [];
-        this._columns = resolvedColumns;
-        this._selectable = this.selectable ?? config?.selectable ?? false;
-        this._resizable = this.resizable ?? config?.resizable ?? false;
-        this._stickyColumn = this.stickyColumn ?? config?.stickyColumn ?? { left: 0, right: 0 };
-        this._stickyHeader = this.stickyHeader ?? config?.stickyHeader ?? false;
-        this._scrolledLeft = this.scrolledLeft ?? config?.scrolledLeft ?? false;
-        this._scrolledRight = this.scrolledRight ?? config?.scrolledRight ?? false;
-        if (Array.isArray(config?.columnWidths) && (this.columnWidths ?? []).length === 0) {
-            this.columnWidths = [...config.columnWidths];
-        }
-        if (!Array.isArray(this.columnWidths)) {
-            this.columnWidths = [];
-        }
-    }
-    async refreshConfig() {
-        this.resolveConfig();
-    }
-    async setColumnWidths(widths) {
-        this.columnWidths = Array.isArray(widths) ? widths : [];
-    }
-    async refreshSelection() {
-        const checkbox = this.el.querySelector('sd-checkbox');
-        if (checkbox) {
-            checkbox.value = this.getIsAllChecked();
-        }
-    }
-    get visibleColumns() {
-        return this._columns.filter(col => col.visible !== false);
-    }
-    getStickyStyle(colIdx) {
-        if (this.tableEl?.getStickyStyleSync) {
-            return this.tableEl.getStickyStyleSync(colIdx);
-        }
-        const leftOffset = this.columnWidths.slice(0, colIdx).reduce((a, b) => a + b, 0) + (this._selectable ? 52 : 0);
-        const rightOffset = this.columnWidths
-            .filter((_, i) => i >= this.visibleColumns.length - (this._stickyColumn.right || 0) && i > colIdx)
-            .reduce((a, b) => a + b, 0);
-        return {
-            '--sticky-left-offset': `${leftOffset}px`,
-            '--sticky-right-offset': `${rightOffset}px`,
-            'width': `${this.columnWidths[colIdx]}px`,
-            'minWidth': `${this.columnWidths[colIdx]}px`,
-            'maxWidth': `${this.columnWidths[colIdx]}px`,
-        };
-    }
-    handleResize(index, event, reversed = false) {
-        if (this.tableEl?.handleResize) {
-            this.tableEl.handleResize(index, event, reversed);
-        }
-    }
-    handleSelectAll(checked) {
-        const currentState = this.getIsAllChecked();
-        const nextChecked = currentState === null ? false : !!checked;
-        const safeRows = Array.isArray(this.rows) ? this.rows : [];
-        if (this.tableEl?.toggleSelectAllSync) {
-            this.tableEl.toggleSelectAllSync(nextChecked, safeRows);
-        }
-    }
-    getIsAllChecked() {
-        const safeRows = Array.isArray(this.rows) ? this.rows : [];
-        if (this.tableEl?.getIsAllCheckedSync && safeRows.length > 0) {
-            return this.tableEl.getIsAllCheckedSync(safeRows);
-        }
-        return false;
-    }
-    render() {
-        const safeRows = Array.isArray(this.rows) ? this.rows : [];
-        const stickyLeftCount = this._stickyColumn.left || 0;
-        const stickyRightCount = this._stickyColumn.right || 0;
-        const stickyLeftCols = this.visibleColumns.slice(0, stickyLeftCount);
-        const middleCols = this.visibleColumns.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount);
-        const stickyRightCols = this.visibleColumns.slice(this.visibleColumns.length - stickyRightCount);
-        return (h(Host, { key: '2358499ef65d88005d03b1246604c0fd8eefdde1', slot: `${this.tableId}-head` }, h("thead", { key: '49bb43a19aeb83f3a60367b26dbb6535ebcec743', class: {
-                'thead': true,
-                'thead--sticky': this._stickyHeader,
-            } }, h("tr", { key: 'cd6388d79e9a4a5d9edbbda05601abbbefcb1ff4', class: "tr" }, this._selectable && (h("th", { key: 'fa09e82368d45e9fb1d32838ef44e609c698609d', class: {
-                'th': true,
-                'th--selected': true,
-                'sticky-left': true,
-                'sticky-left-edge': stickyLeftCount === 0,
-                'is-scrolled-left': stickyLeftCount === 0 && this._scrolledLeft,
-            }, style: { '--sticky-left-offset': '0px' } }, h("sd-checkbox", { key: '5ab4861aecfac9495101363d5bd809d077c7dbc3', value: this.getIsAllChecked(), disabled: !safeRows.length, onSdUpdate: (e) => this.handleSelectAll(e.detail) }))), stickyLeftCols.map((col, idx) => (h("th", { key: col.name, class: {
-                'th': true,
-                [`${col.thClass}`]: Boolean(col.thClass),
-                'sticky-left': true,
-                'sticky-left-edge': idx === stickyLeftCount - 1,
-                'is-scrolled-left': idx === stickyLeftCount - 1 && this._scrolledLeft,
-            }, style: { ...col.thStyle, ...this.getStickyStyle(idx) } }, h("div", { class: `th__content th__content--${col.align || 'left'}` }, h("div", { class: "th__content--label" }, col.label), col.usePageMoveIcon && h("sd-icon", { name: "pageMove", size: "12", color: "#006AC1" }), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text))))))), this._resizable && (h("div", { class: "th__resizer", onMouseDown: (evt) => this.handleResize(idx, evt) }))))), middleCols.map((col, relativeIdx) => {
-            const actualColIdx = stickyLeftCount + relativeIdx;
-            return (h("th", { key: col.name, class: {
-                    th: true,
-                    [`${col.thClass}`]: Boolean(col.thClass),
-                }, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) } }, h("div", { class: `th__content th__content--${col.align || 'left'}` }, h("div", { class: "th__content--label" }, col.label), col.usePageMoveIcon && h("sd-icon", { name: "pageMove", size: "12", color: "#006AC1" }), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text))))))), this._resizable && (h("div", { class: "th__resizer", onMouseDown: (evt) => this.handleResize(actualColIdx, evt) }))));
-        }), stickyRightCols.map((col, relativeIdx) => {
-            const actualColIdx = this.visibleColumns.length - stickyRightCount + relativeIdx;
-            return (h("th", { key: col.name, class: {
-                    'th': true,
-                    [`${col.thClass}`]: Boolean(col.thClass),
-                    'sticky-right': true,
-                    'sticky-right-edge': relativeIdx === 0,
-                    'is-scrolled-right': relativeIdx === 0 && this._scrolledRight,
-                }, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) } }, h("div", { class: `th__content th__content--${col.align || 'left'}` }, h("div", { class: "th__content--label" }, col.label), col.usePageMoveIcon && h("sd-icon", { name: "pageMove", size: "12", color: "#006AC1" }), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text))))))), this._resizable && (h("div", { class: "th__resizer th__resizer--left", onMouseDown: (evt) => this.handleResize(actualColIdx, evt, true) }))));
-        })))));
-    }
-    static get watchers() { return {
-        "columns": [{
-                "handleColumnsChange": 0
-            }]
-    }; }
-};
-SdThead.style = sdTheadCss();
-
-export { SdThead as sd_thead };

package/dist/esm/sd-tr.entry.js

@@ -1,169 +0,0 @@
-import { r as registerInstance, a as getElement, h, H as Host } from './index-Bp7ytJz5.js';
-import { T as TABLE_ID_ATTR } from './constants-sZMi_32I.js';
-
-const sdTrCss = () => `sd-tr{display:contents}sd-tr *{box-sizing:border-box}.tr{display:table-row}.tr:hover .td{background-color:#F9F9F9}.td{display:table-cell;height:44px;padding:0 16px;border-bottom:1px solid #E1E1E1;background:white;vertical-align:middle;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.td--left{text-align:left}.td--center{text-align:center}.td--right{text-align:right}.td--selected{position:relative;width:52px !important;max-width:52px !important;min-width:52px !important;padding:0 10px 0 24px;text-align:left}.td--selected sd-checkbox label{position:relative}.td--selected sd-checkbox label:before{content:"";position:absolute;inset:-6px}.td.sticky-left{position:sticky;background-color:white;z-index:100 !important;left:var(--sticky-left-offset, 0)}.td.sticky-right{position:sticky;background-color:white;z-index:100 !important;right:var(--sticky-right-offset, 0)}.td.sticky-left-edge:after{content:"";position:absolute;top:0;left:100%;right:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset 12px 0 20px -25px;opacity:0;pointer-events:none;transition:opacity 0.2s}.td.sticky-right-edge:after{content:"";position:absolute;top:0;left:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset -12px 0 20px -25px;opacity:0;pointer-events:none;transition:opacity 0.2s}.td.sticky-left-edge.is-scrolled-left{overflow:visible}.td.sticky-left-edge.is-scrolled-left:after{opacity:1}.td.sticky-right-edge.is-scrolled-right{overflow:visible}.td.sticky-right-edge.is-scrolled-right:after{opacity:1}.tr:hover .td.sticky-left,.tr:hover .td.sticky-right{background-color:#F9F9F9}`;
-
-const SdTr = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    get el() { return getElement(this); }
-    columns;
-    selectable;
-    stickyColumn;
-    rowKey = '';
-    row = {};
-    tableId = '';
-    columnWidths = [];
-    isVisible = true;
-    _columns = [];
-    _selectable = false;
-    _stickyColumn = { left: 0, right: 0 };
-    _scrolledLeft = false;
-    _scrolledRight = false;
-    tableEl = null;
-    componentWillLoad() {
-        this.syncTableContext();
-        this.columnWidths = this.columnWidths ?? [];
-        this.resolveConfig();
-        this.columnWidths = this._columns.map(c => parseInt(c.width || '120', 10));
-        this.updateVisibilitySync();
-    }
-    componentDidLoad() {
-        this.syncTableContext();
-    }
-    syncTableContext() {
-        const table = this.el.closest('sd-table');
-        this.tableEl = table;
-        const fromMethod = table?.getTableIdSync?.();
-        const fromAttr = table?.getAttribute(TABLE_ID_ATTR);
-        const resolvedTableId = (fromMethod && fromMethod !== 'undefined' ? fromMethod : null) ??
-            (fromAttr && fromAttr !== 'undefined' ? fromAttr : null) ??
-            '';
-        if (resolvedTableId && resolvedTableId !== this.tableId) {
-            this.tableId = resolvedTableId;
-        }
-    }
-    resolveConfig() {
-        const config = this.tableEl?.getConfigSync?.();
-        this._columns = this.columns ?? config?.columns ?? [];
-        this._selectable = this.selectable ?? config?.selectable ?? false;
-        this._stickyColumn = this.stickyColumn ?? config?.stickyColumn ?? { left: 0, right: 0 };
-        this._scrolledLeft = config?.scrolledLeft ?? false;
-        this._scrolledRight = config?.scrolledRight ?? false;
-        if (config?.columnWidths && (this.columnWidths ?? []).length === 0) {
-            this.columnWidths = [...config.columnWidths];
-        }
-    }
-    async refreshConfig() {
-        this.resolveConfig();
-    }
-    async updateVisibility() {
-        this.updateVisibilitySync();
-    }
-    updateVisibilitySync() {
-        const rowIndex = parseInt(this.rowKey, 10);
-        const pageInfo = this.tableEl?.getPaginationInfoSync?.();
-        if (!pageInfo) {
-            this.isVisible = true;
-            return;
-        }
-        this.isVisible = rowIndex >= pageInfo.startIndex && rowIndex < pageInfo.endIndex;
-    }
-    async setColumnWidths(widths) {
-        this.columnWidths = widths;
-    }
-    async refreshSelection() {
-        const checkbox = this.el.querySelector('sd-checkbox');
-        if (checkbox) {
-            checkbox.value = this.isSelected();
-        }
-    }
-    get visibleColumns() {
-        return this._columns.filter(col => col.visible !== false);
-    }
-    formatValue(value) {
-        if (value === null || value === undefined) {
-            return '';
-        }
-        if (typeof value === 'number') {
-            return value.toLocaleString();
-        }
-        return String(value);
-    }
-    getCellValue(column) {
-        const { field, format, name } = column;
-        const value = typeof field === 'function' ? field(this.row) : field ? this.row[field] : this.row[name];
-        return format ? format(value, this.row) : this.formatValue(value);
-    }
-    getStickyStyle(colIdx) {
-        if (this.tableEl?.getStickyStyleSync) {
-            return this.tableEl.getStickyStyleSync(colIdx);
-        }
-        const leftOffset = this.columnWidths.slice(0, colIdx).reduce((a, b) => a + b, 0) + (this._selectable ? 52 : 0);
-        const rightOffset = this.columnWidths
-            .filter((_, i) => i >= this.visibleColumns.length - (this._stickyColumn.right || 0) && i > colIdx)
-            .reduce((a, b) => a + b, 0);
-        return {
-            '--sticky-left-offset': `${leftOffset}px`,
-            '--sticky-right-offset': `${rightOffset}px`,
-            'width': `${this.columnWidths[colIdx]}px`,
-            'minWidth': `${this.columnWidths[colIdx]}px`,
-            'maxWidth': `${this.columnWidths[colIdx]}px`,
-        };
-    }
-    isSelected() {
-        if (this.tableEl?.isRowSelectedSync) {
-            return this.tableEl.isRowSelectedSync(this.row);
-        }
-        return false;
-    }
-    handleSelect() {
-        if (this.tableEl?.updateRowSelectSync) {
-            this.tableEl.updateRowSelectSync(this.row);
-        }
-    }
-    render() {
-        const stickyLeftCount = this._stickyColumn.left || 0;
-        const stickyRightCount = this._stickyColumn.right || 0;
-        const stickyLeftCols = this.visibleColumns.slice(0, stickyLeftCount);
-        const middleCols = this.visibleColumns.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount);
-        const stickyRightCols = this.visibleColumns.slice(this.visibleColumns.length - stickyRightCount);
-        return (h(Host, { key: 'd6259e5c87cce0fa70f1d849e11416ad69b0cac1', style: { display: this.isVisible ? '' : 'none' } }, h("tr", { key: '90e36c39bede0e07fc1c4d90183a73ebc99b6ed8', class: "tr" }, this._selectable && (h("td", { key: '601f1747063d8e73803304abc2cd767f420f359c', class: {
-                'td': true,
-                'td--selected': true,
-                'sticky-left': true,
-                'sticky-left-edge': stickyLeftCount === 0,
-                'is-scrolled-left': stickyLeftCount === 0 && this._scrolledLeft,
-            }, style: { '--sticky-left-offset': '0px' } }, h("sd-checkbox", { key: '97068a623d3b7876c7e6392e3f5ed81cfc60d592', value: this.isSelected(), onSdUpdate: () => this.handleSelect() }))), stickyLeftCols.map((col, idx) => (h("td", { key: col.name, class: {
-                'td': true,
-                [`td--${col.align || 'left'}`]: true,
-                'sticky-left': true,
-                'sticky-left-edge': idx === stickyLeftCount - 1,
-                'is-scrolled-left': idx === stickyLeftCount - 1 && this._scrolledLeft,
-                [`${col.tdClass}`]: Boolean(col.tdClass),
-            }, style: this.getStickyStyle(idx) }, h("slot", { name: `${this.tableId}-${typeof col.field === 'string' ? col.field : col.name}-${this.rowKey}` }, h("span", null, this.getCellValue(col)))))), middleCols.map((col, relativeIdx) => {
-            const actualColIdx = stickyLeftCount + relativeIdx;
-            const fieldName = typeof col.field === 'string' ? col.field : col.name;
-            return (h("td", { key: col.name, class: {
-                    td: true,
-                    [`td--${col.align || 'left'}`]: true,
-                    [`${col.tdClass}`]: Boolean(col.tdClass),
-                }, style: this.getStickyStyle(actualColIdx) }, h("slot", { name: `${this.tableId}-${fieldName}-${this.rowKey}` }, h("span", null, this.getCellValue(col)))));
-        }), stickyRightCols.map((col, relativeIdx) => {
-            const actualColIdx = this.visibleColumns.length - stickyRightCount + relativeIdx;
-            const fieldName = typeof col.field === 'string' ? col.field : col.name;
-            return (h("td", { key: col.name, class: {
-                    'td': true,
-                    [`td--${col.align || 'left'}`]: true,
-                    'sticky-right': true,
-                    'sticky-right-edge': relativeIdx === 0,
-                    'is-scrolled-right': relativeIdx === 0 && this._scrolledRight,
-                    [`${col.tdClass}`]: Boolean(col.tdClass),
-                }, style: this.getStickyStyle(actualColIdx) }, h("slot", { name: `${this.tableId}-${fieldName}-${this.rowKey}` }, h("span", null, this.getCellValue(col)))));
-        }))));
-    }
-};
-SdTr.style = sdTrCss();
-
-export { SdTr as sd_tr };