@sellmate/design-system 1.0.75 → 1.0.77

package/dist/esm/select-keyboard-navigation-Cy6HMEsK.js

@@ -1,25 +0,0 @@
-class SelectKeyboardNavigation {
-    isSearchable;
-    filteredOptions;
-    constructor(isSearchable, filteredOptions) {
-        this.isSearchable = isSearchable;
-        this.filteredOptions = filteredOptions;
-    }
-    getNavigationBounds() {
-        return {
-            minIndex: this.isSearchable ? -1 : 0,
-            maxIndex: this.filteredOptions.length - 1,
-        };
-    }
-    getNextIndex(currentIndex, direction) {
-        const { minIndex, maxIndex } = this.getNavigationBounds();
-        if (direction === 'ArrowUp') {
-            return currentIndex > minIndex ? currentIndex - 1 : maxIndex;
-        }
-        else {
-            return currentIndex < maxIndex ? currentIndex + 1 : minIndex;
-        }
-    }
-}
-
-export { SelectKeyboardNavigation as S };

package/dist/esm/table-test.entry.js

@@ -1,94 +0,0 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-Bp7ytJz5.js';
-
-const tableTestCss = () => `:host{display:block}.table-wrapper{width:100%;overflow-x:auto}.templates-slot{display:none}.data-table{width:100%;border-collapse:collapse;font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;font-size:14px}.data-table th,.data-table td{padding:12px 16px;text-align:left;vertical-align:middle}.data-table th{font-weight:600;background-color:#f8f9fa;color:#333}.data-table.bordered th,.data-table.bordered td{border:1px solid #dee2e6}.data-table.striped tbody tr:nth-child(odd){background-color:#f8f9fa}.data-table tbody tr:hover{background-color:#e9ecef}.data-table .cell-flex{display:flex;align-items:center;gap:8px}.data-table .cell-image{width:24px;height:16px;object-fit:cover;border-radius:2px}`;
-
-const DataTable = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.tableReady = createEvent(this, "tableReady", 7);
-    }
-    get el() { return getElement(this); }
-    /** Column definitions array */
-    columns = [];
-    /** Row data array */
-    rows = [];
-    /** Show cell borders */
-    bordered = true;
-    /** Alternate row colors */
-    striped = false;
-    cellRenderers = new Map();
-    headerRenderers = new Map();
-    tableReady;
-    dataChanged() {
-        this.tableReady.emit();
-    }
-    componentDidLoad() {
-        this.tableReady.emit();
-    }
-    async setCellRenderer(field, renderer) {
-        this.cellRenderers = new Map(this.cellRenderers).set(field, renderer);
-    }
-    async setHeaderRenderer(field, renderer) {
-        this.headerRenderers = new Map(this.headerRenderers).set(field, renderer);
-    }
-    async removeCellRenderer(field) {
-        const newMap = new Map(this.cellRenderers);
-        newMap.delete(field);
-        this.cellRenderers = newMap;
-    }
-    async clearAllRenderers() {
-        this.cellRenderers = new Map();
-        this.headerRenderers = new Map();
-    }
-    renderCellContent(column, row, rowIndex) {
-        const value = row[column.field];
-        const renderer = this.cellRenderers.get(column.field);
-        if (renderer) {
-            const html = renderer({ field: column.field, value, row, rowIndex });
-            return h("span", { class: "cell-content", innerHTML: html });
-        }
-        const template = this.el.querySelector(`[slot="cell-${column.field}"]`);
-        if (template) {
-            const html = this.processTemplate(template.innerHTML, { value, row, rowIndex });
-            return h("span", { class: "cell-content", innerHTML: html });
-        }
-        return h("span", { class: "cell-content" }, value);
-    }
-    renderHeaderContent(column) {
-        const renderer = this.headerRenderers.get(column.field);
-        if (renderer) {
-            const html = renderer({ field: column.field, column });
-            return h("span", { innerHTML: html });
-        }
-        const template = this.el.querySelector(`[slot="header-${column.field}"]`);
-        if (template) {
-            return h("span", { innerHTML: template.innerHTML });
-        }
-        return column.header || column.field;
-    }
-    processTemplate(html, data) {
-        return html
-            .replace(/\{\{value\}\}/g, this.escapeHtml(String(data.value ?? '')))
-            .replace(/\{\{rowIndex\}\}/g, String(data.rowIndex))
-            .replace(/\{\{row\.(\w+)\}\}/g, (_, prop) => this.escapeHtml(String(data.row[prop] ?? '')));
-    }
-    escapeHtml(str) {
-        const el = document.createElement('div');
-        el.textContent = str;
-        return el.innerHTML;
-    }
-    render() {
-        return (h("div", { key: 'a34267f6b11cdd0dff53bfa3da62b7a47934c73b', class: "table-wrapper" }, h("table", { key: 'b23ac2cd9a785d8fc89c09a04a6aa29a63e6d2b4', class: { 'data-table': true, 'bordered': this.bordered, 'striped': this.striped } }, h("thead", { key: 'e08ff945e40f3ec6db10285840d4185d110a1dc0' }, h("tr", { key: 'ffe2e7253865f5a650611e2859f979d0204fca2a' }, this.columns.map(column => (h("th", { key: column.field, style: { width: column.width } }, this.renderHeaderContent(column)))))), h("tbody", { key: '2d47105abba4eecad71b549282650b7f2b056b4c' }, this.rows.map((row, rowIndex) => (h("tr", { key: rowIndex }, this.columns.map(column => (h("td", { key: `${rowIndex}-${column.field}` }, this.renderCellContent(column, row, rowIndex))))))))), h("div", { key: '99fe2715e69abf50f69a844e76a3ad422f5b870b', class: "templates-slot", hidden: true }, h("slot", { key: '8c56201e8edb251c5f7494e00acdc5e5fbb67d00' }))));
-    }
-    static get watchers() { return {
-        "columns": [{
-                "dataChanged": 0
-            }],
-        "rows": [{
-                "dataChanged": 0
-            }]
-    }; }
-};
-DataTable.style = tableTestCss();
-
-export { DataTable as table_test };

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

@@ -1,15 +0,0 @@
-export declare class SdProgress {
-    type: 'bar' | 'spinner';
-    error: boolean;
-    percentage: number;
-    size: number;
-    strokeWidth: number;
-    label?: string;
-    private statusColor;
-    private get progressPercentage();
-    private get progressStatus();
-    private get progressColor();
-    render(): any;
-    renderBarProgress(): any;
-    renderSpinnerProgress(): any;
-}

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

@@ -1,41 +0,0 @@
-import { EventEmitter } from '../../../stencil-public-runtime';
-import { SelectOption } from '../sd-select';
-type SelectValue = SelectOption[] | string | number | null;
-export declare class SdSelectDropdown {
-    itemIndex: number;
-    value: SelectValue;
-    options: SelectOption[];
-    width: string;
-    dropdownHeight: string;
-    searchable: boolean;
-    optionPlaceholder: string;
-    useCheckbox: boolean;
-    useAll?: boolean;
-    filteredOptions: SelectOption[];
-    searchText: string | null;
-    isScrolled: boolean;
-    isDropdownReady: boolean;
-    optionClick: EventEmitter<{
-        option: SelectOption;
-        index: number;
-        event: MouseEvent;
-    }>;
-    optionFiltered: EventEmitter<SelectOption[]>;
-    scroll: EventEmitter<Event>;
-    filteredOptionsChanged(newValue: SelectOption[]): void;
-    searchTextChanged(): void;
-    itemIndexChanged(newIndex: number, oldIndex: number): Promise<void>;
-    componentWillLoad(): void;
-    private dropdownRef?;
-    private searchRef?;
-    private optionRef?;
-    private get dropdownSize();
-    private filterOptions;
-    private getSelectedOption;
-    private isOptionSelected;
-    private getNativeInputElement;
-    private scrollToOption;
-    private handleDropdownScroll;
-    render(): any;
-}
-export {};

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

@@ -1,23 +0,0 @@
-import { EventEmitter } from '../../../stencil-public-runtime';
-import type { SelectOption } from '../../../types/select';
-export declare class SdSelectOption {
-    el: HTMLElement;
-    option: SelectOption;
-    index: number;
-    isSelected: boolean;
-    isFocused: boolean;
-    optionStyle?: {
-        [key: string]: string;
-    };
-    disabled: boolean;
-    useCheckbox: boolean;
-    isHovered: boolean;
-    sdIsDisabled(): Promise<boolean>;
-    optionClick: EventEmitter<{
-        option: SelectOption;
-        index: number;
-        event: MouseEvent;
-    }>;
-    private handleClick;
-    render(): any;
-}

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

@@ -1,11 +0,0 @@
-import { EventEmitter } from '../../../stencil-public-runtime';
-export declare class SdSelectSearchInput {
-    isScrolled?: boolean;
-    searchText: string | null;
-    searchInput: EventEmitter<string>;
-    searchFocus: EventEmitter<void>;
-    private searchRef?;
-    sdGetNativeElement(): Promise<HTMLInputElement | null>;
-    sdSearchInputFocus(): Promise<void>;
-    render(): any;
-}

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

@@ -1,86 +0,0 @@
-import { EventEmitter } from '../../stencil-public-runtime';
-import { BaseDropdownEvent } from '../../utils/base-dropdown-event';
-import { SelectEvents, SelectOptionGroup, SelectStyleProps } from '../sd-select/sd-select';
-import { SdTooltipProps } from '../sd-tooltip/sd-tooltip.config';
-import { Rule } from '../../components';
-import { type FieldAddonAlign } from '../sd-field/sd-field.config';
-/**
- * @deprecated sd-select-v2 (name="default_depth")를 사용하세요.
- */
-export declare class SdSelectGroup extends BaseDropdownEvent {
-    el: HTMLElement;
-    value: string | number | null;
-    options: SelectOptionGroup[];
-    placeholder: string;
-    optionPlaceholder: string;
-    width: string;
-    dropdownHeight: string;
-    autoFocus: boolean;
-    disabled: boolean;
-    clearable: boolean;
-    searchable: boolean;
-    label: string;
-    labelWidth: string | number;
-    addonLabel: string;
-    addonAlign: FieldAddonAlign;
-    icon?: IconProps;
-    labelTooltip: string;
-    labelTooltipProps: SdTooltipProps | null;
-    rules?: Rule[];
-    error?: boolean;
-    containerStyle: SelectStyleProps['containerStyle'];
-    triggerStyle: SelectStyleProps['triggerStyle'];
-    dropdownStyle: SelectStyleProps['dropdownStyle'];
-    optionStyle: SelectStyleProps['optionStyle'];
-    labelStyle: SelectStyleProps['labelStyle'];
-    optionRenderer?: (option: SelectOptionGroup, index: number, isSelected: boolean) => any;
-    filteredOptions: SelectOptionGroup[];
-    isOpen: boolean;
-    searchText: string | null;
-    itemIndex: number;
-    isScrolled: boolean;
-    isDropdownReady: boolean;
-    update?: EventEmitter<SelectEvents['sdUpdate']>;
-    dropDownShow?: EventEmitter<SelectEvents['dropDownShow']>;
-    private selectRef?;
-    private searchRef?;
-    private triggerRef?;
-    private optionRef?;
-    private dropdownRef?;
-    private formField?;
-    private dropDownWidth;
-    name: string;
-    sdOpen(): Promise<void>;
-    sdValidate(): Promise<void>;
-    sdReset(): Promise<void>;
-    sdResetValidate(): Promise<void>;
-    sdFocus(): Promise<void>;
-    optionsChanged(): void;
-    searchTextChanged(): void;
-    itemIndexChanged(newIndex: number, oldIndex: number): Promise<void>;
-    isOpenChanged(): Promise<void>;
-    componentWillLoad(): void;
-    componentDidLoad(): void;
-    componentDidRender(): void;
-    disconnectedCallback(): void;
-    protected handleDocumentClick(event: Event): void;
-    protected handleDocumentKeydown(keyboardEvent: KeyboardEvent): void;
-    handleTriggerClick: (event: Event) => void;
-    handleOptionClick: (detail: {
-        option: SelectOptionGroup;
-        isSelected: boolean | null;
-        index: number;
-        event: MouseEvent;
-    }) => void;
-    private filterOptions;
-    private addParentGroups;
-    private getSelectedOption;
-    private handleDropdownScroll;
-    private getNativeInputElement;
-    private handleOptionSelection;
-    closeDropdown(): void;
-    private scrollToOption;
-    render(): any;
-    private renderTrigger;
-    private renderDropdown;
-}

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

@@ -1,64 +0,0 @@
-import { EventEmitter } from '../../stencil-public-runtime';
-import type { SelectOption, SelectMultipleEvents } from '../../types/select';
-import { BaseDropdownEvent } from '../../utils/base-dropdown-event';
-import { Rule, SdTooltipProps } from '../../components';
-/**
- * @deprecated sd-select-v2 (name="multi")를 사용하세요.
- */
-export declare class SdSelectMultiple extends BaseDropdownEvent {
-    el: HTMLElement;
-    value: SelectOption[] | null;
-    options: SelectOption[];
-    placeholder: string;
-    optionPlaceholder: string;
-    width: string;
-    dropdownHeight: string;
-    autoFocus: boolean;
-    disabled: boolean;
-    clearable: boolean;
-    searchable: boolean;
-    useAll: boolean;
-    useCheckbox: boolean;
-    label: string;
-    labelWidth: string | number;
-    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<SelectMultipleEvents['sdUpdate']>;
-    dropDownShow?: EventEmitter<SelectMultipleEvents['dropDownShow']>;
-    private selectRef?;
-    private triggerRef?;
-    private formField?;
-    private filteredOptions;
-    private dropDownWidth;
-    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;
-    disconnectedCallback(): void;
-    protected handleDocumentClick(event: Event): void;
-    protected handleDocumentKeydown(keyboardEvent: KeyboardEvent): void;
-    private handleOptionSelection;
-    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-select-multiple-group/sd-select-multiple-group.d.ts

@@ -1,110 +0,0 @@
-import { EventEmitter } from '../../stencil-public-runtime';
-import { BaseDropdownEvent } from '../../utils/base-dropdown-event';
-import { SelectMultipleEvents, SelectOption, SelectStyleProps } from '../sd-select/sd-select';
-import { SdTooltipProps } from '../sd-tooltip/sd-tooltip.config';
-import { Rule } from '../../components';
-export interface SelectOptionGroup extends SelectOption {
-    type: 'group' | 'subgroup' | 'item' | 'all';
-    parent?: string;
-}
-/**
- * @deprecated sd-select-v2 (name="multi_depth")를 사용하세요.
- */
-export declare class SdSelectMultipleGroup extends BaseDropdownEvent {
-    el: HTMLElement;
-    value: SelectOptionGroup[] | null;
-    options: SelectOptionGroup[];
-    placeholder: string;
-    optionPlaceholder: string;
-    width: string;
-    dropdownHeight: string;
-    disabled: boolean;
-    clearable: boolean;
-    searchable: boolean;
-    useCheckbox: boolean;
-    useAll: boolean;
-    allCheckedLabel: string;
-    allCheckOptionLabel: string;
-    label: string;
-    labelWidth: string | number;
-    icon?: IconProps;
-    labelTooltip: string;
-    labelTooltipProps: SdTooltipProps | null;
-    rules?: Rule[];
-    error?: boolean;
-    containerStyle: SelectStyleProps['containerStyle'];
-    triggerStyle: SelectStyleProps['triggerStyle'];
-    dropdownStyle: SelectStyleProps['dropdownStyle'];
-    optionStyle: SelectStyleProps['optionStyle'];
-    labelStyle: SelectStyleProps['labelStyle'];
-    optionRenderer?: (option: SelectOption, index: number, isSelected: boolean) => any;
-    filteredOptions: SelectOptionGroup[];
-    isOpen: boolean;
-    searchText: string | null;
-    itemIndex: number;
-    isScrolled: boolean;
-    isDropdownReady: boolean;
-    update?: EventEmitter<SelectMultipleEvents['sdUpdate']>;
-    dropDownShow?: EventEmitter<SelectMultipleEvents['dropDownShow']>;
-    private selectRef?;
-    private searchRef?;
-    private triggerRef?;
-    private optionRef?;
-    private dropdownRef?;
-    private formField?;
-    private dropDownWidth;
-    name: string;
-    sdOpen(): Promise<void>;
-    sdValidate(): Promise<void>;
-    sdReset(): Promise<void>;
-    sdResetValidate(): Promise<void>;
-    sdFocus(): Promise<void>;
-    valueChanged(): void;
-    optionsChanged(): void;
-    searchTextChanged(): void;
-    itemIndexChanged(newIndex: number, oldIndex: number): Promise<void>;
-    isOpenChanged(): Promise<void>;
-    componentWillLoad(): void;
-    componentDidRender(): void;
-    disconnectedCallback(): void;
-    protected handleDocumentClick(event: Event): void;
-    protected handleDocumentKeydown(keyboardEvent: KeyboardEvent): void;
-    handleTriggerClick: (event: Event) => void;
-    handleAllOptionClick: (detail: {
-        option: SelectOptionGroup;
-        isSelected: boolean | null;
-        index: number;
-        event: MouseEvent;
-    }) => void;
-    handleOptionClick: (detail: {
-        option: SelectOptionGroup;
-        isSelected: boolean | null;
-        index: number;
-        event: MouseEvent;
-    }) => void;
-    handleGroupOptionClick: (detail: {
-        option: SelectOptionGroup;
-        isSelected: boolean | null;
-        index: number;
-    }) => void;
-    handleSubGroupOptionClick: (detail: {
-        option: SelectOptionGroup;
-        isSelected: boolean | null;
-    }) => void;
-    private filterOptions;
-    private addParentGroups;
-    private getSelectedOption;
-    private handleDropdownScroll;
-    private getNativeInputElement;
-    private handleOptionSelection;
-    private getAllItemsUnderOption;
-    private isAllChildrenSelected;
-    private getChildrenOptions;
-    private isAllOptionsSelected;
-    private getTriggerLabel;
-    closeDropdown(): void;
-    private scrollToOption;
-    render(): any;
-    private renderTrigger;
-    private renderDropdown;
-}

package/dist/types/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.d.ts

@@ -1,29 +0,0 @@
-import { EventEmitter } from '../../../stencil-public-runtime';
-import { SelectOptionGroup } from '../../sd-select/sd-select';
-export declare class SdSelectOptionGroup {
-    el: HTMLElement;
-    option: SelectOptionGroup;
-    index: number;
-    isSelected: boolean | null;
-    isFocused: boolean;
-    optionStyle?: {
-        [key: string]: string;
-    };
-    disabled: boolean;
-    useCheckbox: boolean;
-    useIndicator?: boolean;
-    countInfo?: {
-        selectedCount: number;
-        totalCount: number;
-    };
-    isHovered: boolean;
-    isDisabled(): Promise<boolean>;
-    optionClick: EventEmitter<{
-        option: SelectOptionGroup;
-        isSelected: boolean | null;
-        index: number;
-        event: MouseEvent;
-    }>;
-    private handleClick;
-    render(): any;
-}

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

@@ -1,71 +0,0 @@
-import { EventEmitter } from '../../stencil-public-runtime';
-import type { SelectV2Option, SelectV2Type, SelectV2Value } from './sd-select-v2.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 declare class SdSelectV2 {
-    private static readonly VIEWPORT_PADDING;
-    private static readonly PORTAL_OFFSET_Y;
-    private static readonly CLOSE_ANIMATION_DURATION;
-    el: HTMLElement;
-    type: SelectV2Type;
-    value: SelectV2Value;
-    options: SelectV2Option[];
-    placeholder: string;
-    maxDropdownWidth: string;
-    dropdownHeight: string;
-    disabled: 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;
-    emitValue: boolean;
-    width: string | number;
-    private isOpen;
-    private isAnimatingOut;
-    private triggerWidth;
-    private resolvedDropdownHeight;
-    private resolvedMaxDropdownWidth;
-    private focused;
-    private hovered;
-    update: EventEmitter<SelectV2Value>;
-    dropDownShow: EventEmitter<{
-        isOpen: boolean;
-    }>;
-    sdFocus(): Promise<void>;
-    sdOpen(): Promise<void>;
-    private triggerRef?;
-    private triggerComponentRef?;
-    private closeAnimationTimer?;
-    name: string;
-    private triggerHasFocus;
-    watchIsOpen(newValue: boolean): void;
-    private get isMulti();
-    private get displayText();
-    private flattenOptions;
-    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;
-    render(): any;
-}

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

@@ -1,46 +0,0 @@
-import { EventEmitter } from '../../stencil-public-runtime';
-export interface TableColumn {
-    field: string;
-    header?: string;
-    width?: string;
-}
-export interface TableRow {
-    [key: string]: any;
-}
-export interface CellRenderContext {
-    field: string;
-    value: any;
-    row: TableRow;
-    rowIndex: number;
-}
-export interface HeaderRenderContext {
-    field: string;
-    column: TableColumn;
-}
-export type CellRenderer = (context: CellRenderContext) => string;
-export type HeaderRenderer = (context: HeaderRenderContext) => string;
-export declare class DataTable {
-    el: HTMLElement;
-    /** Column definitions array */
-    columns: TableColumn[];
-    /** Row data array */
-    rows: TableRow[];
-    /** Show cell borders */
-    bordered: boolean;
-    /** Alternate row colors */
-    striped: boolean;
-    private cellRenderers;
-    private headerRenderers;
-    tableReady: EventEmitter<void>;
-    dataChanged(): void;
-    componentDidLoad(): void;
-    setCellRenderer(field: string, renderer: CellRenderer): Promise<void>;
-    setHeaderRenderer(field: string, renderer: HeaderRenderer): Promise<void>;
-    removeCellRenderer(field: string): Promise<void>;
-    clearAllRenderers(): Promise<void>;
-    private renderCellContent;
-    private renderHeaderContent;
-    private processTemplate;
-    private escapeHtml;
-    render(): any;
-}