@designbasekorea/ui-wc 0.5.6 → 0.6.0

package/dist/esm/components/db-table.js

@@ -1,412 +1 @@
-import { createDbIcon } from './db-icons.js';
-
-const SIZES = ['s', 'm', 'l'];
-const VARIANTS = ['default', 'striped', 'hoverable'];
-class DbTable extends HTMLElement {
-    constructor() {
-        super(...arguments);
-        this.internalSelectedRows = [];
-        this.internalSortDirection = null;
-        this.internalPage = 1;
-    }
-    static get observedAttributes() {
-        return [
-            'columns',
-            'data',
-            'title',
-            'size',
-            'variant',
-            'empty-message',
-            'sortable',
-            'sort-column',
-            'sort-direction',
-            'selectable',
-            'multi-select',
-            'selected-rows',
-            'row-key',
-            'loading',
-            'pagination',
-            'page',
-            'page-size',
-            'total-items',
-            'show-count-badge',
-            'clickable',
-        ];
-    }
-    get columns() {
-        try {
-            return JSON.parse(this.getAttribute('columns') || '[]');
-        }
-        catch {
-            return [];
-        }
-    }
-    set columns(value) {
-        this.setAttribute('columns', typeof value === 'string' ? value : JSON.stringify(value));
-    }
-    get data() {
-        try {
-            return JSON.parse(this.getAttribute('data') || '[]');
-        }
-        catch {
-            return [];
-        }
-    }
-    set data(value) {
-        this.setAttribute('data', typeof value === 'string' ? value : JSON.stringify(value));
-    }
-    connectedCallback() {
-        this.render();
-    }
-    attributeChangedCallback(name) {
-        if (name === 'selected-rows') {
-            this.syncSelectedRowsFromAttribute();
-        }
-        if (name === 'sort-column' || name === 'sort-direction') {
-            this.syncSortFromAttributes();
-        }
-        if (name === 'page') {
-            this.internalPage = Number(this.getAttribute('page') || 1);
-        }
-        this.render();
-    }
-    syncSelectedRowsFromAttribute() {
-        try {
-            this.internalSelectedRows = JSON.parse(this.getAttribute('selected-rows') || '[]');
-        }
-        catch {
-            this.internalSelectedRows = [];
-        }
-    }
-    syncSortFromAttributes() {
-        const column = this.getAttribute('sort-column');
-        const direction = this.getAttribute('sort-direction');
-        this.internalSortColumn = column || undefined;
-        this.internalSortDirection = direction === 'asc' || direction === 'desc' ? direction : null;
-    }
-    getRowKey(item, index) {
-        const rowKey = this.getAttribute('row-key') || 'id';
-        const value = item[rowKey];
-        return value !== undefined && value !== null ? String(value) : String(index);
-    }
-    getSortedData() {
-        const data = this.data;
-        const columnKey = this.getAttribute('sort-column') || this.internalSortColumn;
-        const direction = this.getAttribute('sort-direction') || this.internalSortDirection;
-        if (!columnKey || !direction)
-            return data;
-        const column = this.columns.find((col) => col.key === columnKey);
-        if (!column?.sortable)
-            return data;
-        return [...data].sort((a, b) => {
-            const aValue = a[columnKey];
-            const bValue = b[columnKey];
-            if (aValue === bValue)
-                return 0;
-            if (aValue === undefined || aValue === null)
-                return 1;
-            if (bValue === undefined || bValue === null)
-                return -1;
-            if (aValue < bValue)
-                return direction === 'asc' ? -1 : 1;
-            return direction === 'asc' ? 1 : -1;
-        });
-    }
-    handleSort(column) {
-        if (!this.hasAttribute('sortable') || !column.sortable)
-            return;
-        let nextDirection = 'asc';
-        if (this.internalSortColumn === column.key) {
-            if (this.internalSortDirection === 'asc')
-                nextDirection = 'desc';
-            else if (this.internalSortDirection === 'desc')
-                nextDirection = null;
-        }
-        this.internalSortColumn = nextDirection ? column.key : undefined;
-        this.internalSortDirection = nextDirection;
-        this.dispatchEvent(new CustomEvent('db-sort-change', {
-            bubbles: true,
-            composed: true,
-            detail: { column: column.key, direction: nextDirection },
-        }));
-        this.render();
-    }
-    handleRowSelect(rowKey, checked, event) {
-        event?.stopPropagation();
-        const multiSelect = this.hasAttribute('multi-select');
-        let next;
-        if (multiSelect) {
-            next = checked
-                ? [...this.internalSelectedRows, rowKey]
-                : this.internalSelectedRows.filter((key) => key !== rowKey);
-        }
-        else {
-            next = checked ? [rowKey] : [];
-        }
-        this.internalSelectedRows = next;
-        this.dispatchEvent(new CustomEvent('db-selection-change', {
-            bubbles: true,
-            composed: true,
-            detail: { selectedRows: next },
-        }));
-        this.render();
-    }
-    handleSelectAll(checked) {
-        const next = checked ? this.data.map((item, index) => this.getRowKey(item, index)) : [];
-        this.internalSelectedRows = next;
-        this.dispatchEvent(new CustomEvent('db-selection-change', {
-            bubbles: true,
-            composed: true,
-            detail: { selectedRows: next },
-        }));
-        this.render();
-    }
-    getPaginatedData() {
-        const sorted = this.getSortedData();
-        if (!this.hasAttribute('pagination'))
-            return sorted;
-        const pageSize = Number(this.getAttribute('page-size') || 10);
-        const totalItems = Number(this.getAttribute('total-items') || sorted.length);
-        const totalPages = Math.max(1, Math.ceil(totalItems / pageSize));
-        const page = Math.min(this.internalPage, totalPages);
-        const start = (page - 1) * pageSize;
-        return sorted.slice(start, start + pageSize);
-    }
-    createSortIcon(column) {
-        const icon = document.createElement('span');
-        icon.className = 'designbase-wc-table__sort-icon';
-        const isSorted = this.internalSortColumn === column.key && Boolean(this.internalSortDirection);
-        if (!isSorted) {
-            icon.classList.add('designbase-wc-table__sort-icon--idle');
-            const stack = document.createElement('span');
-            stack.className = 'designbase-wc-table__sort-icon-stack';
-            stack.append(createDbIcon('chevron-up', 10), createDbIcon('chevron-down', 10));
-            icon.append(stack);
-            return icon;
-        }
-        icon.classList.add(this.internalSortDirection === 'asc'
-            ? 'designbase-wc-table__sort-icon--asc'
-            : 'designbase-wc-table__sort-icon--desc');
-        icon.append(createDbIcon(this.internalSortDirection === 'asc' ? 'chevron-up' : 'chevron-down', 14));
-        return icon;
-    }
-    createCheckbox(options) {
-        const checkbox = document.createElement('db-checkbox');
-        checkbox.setAttribute('size', 's');
-        checkbox.setAttribute('has-label', 'false');
-        if (options.checked)
-            checkbox.setAttribute('checked', '');
-        if (options.indeterminate)
-            checkbox.setAttribute('indeterminate', '');
-        if (options.stopPropagation) {
-            checkbox.addEventListener('click', (event) => event.stopPropagation());
-        }
-        checkbox.addEventListener('db-change', (event) => {
-            const detail = event.detail;
-            options.onChange?.(detail.checked);
-        });
-        return checkbox;
-    }
-    render() {
-        const size = this.getAttribute('size') || 'm';
-        const variant = this.getAttribute('variant') || 'default';
-        const resolvedSize = SIZES.includes(size) ? size : 'm';
-        const resolvedVariant = VARIANTS.includes(variant) ? variant : 'default';
-        const columns = this.columns;
-        const paginatedData = this.getPaginatedData();
-        const sortedData = this.getSortedData();
-        const loading = this.hasAttribute('loading');
-        const selectable = this.hasAttribute('selectable');
-        const sortable = this.hasAttribute('sortable');
-        const emptyMessage = this.getAttribute('empty-message') || '데이터가 없습니다.';
-        this.className = [
-            'designbase-wc-table',
-            `designbase-wc-table--${resolvedSize}`,
-            `designbase-wc-table--${resolvedVariant}`,
-            selectable && 'designbase-wc-table--selectable',
-            sortable && 'designbase-wc-table--sortable',
-            loading && 'designbase-wc-table--loading',
-        ]
-            .filter(Boolean)
-            .join(' ');
-        this.replaceChildren();
-        if (loading) {
-            const loadingWrap = document.createElement('div');
-            loadingWrap.className = 'designbase-wc-table__loading';
-            const spinner = document.createElement('div');
-            spinner.className = 'designbase-wc-table__loading-spinner';
-            const text = document.createElement('span');
-            text.textContent = '로딩 중...';
-            loadingWrap.append(spinner, text);
-            this.append(loadingWrap);
-            return;
-        }
-        const title = this.getAttribute('title');
-        const showCountBadge = this.hasAttribute('show-count-badge');
-        if (title || showCountBadge) {
-            const header = document.createElement('div');
-            header.className = 'designbase-wc-table__header';
-            const left = document.createElement('div');
-            left.className = 'designbase-wc-table__header-left';
-            if (title) {
-                const heading = document.createElement('h3');
-                heading.className = 'designbase-wc-table__title';
-                heading.textContent = title;
-                left.append(heading);
-            }
-            if (showCountBadge) {
-                const badge = document.createElement('db-badge');
-                badge.setAttribute('count', String(this.data.length));
-                badge.setAttribute('badge-style', 'number');
-                badge.setAttribute('variant', 'primary');
-                badge.setAttribute('size', 's');
-                left.append(badge);
-            }
-            header.append(left);
-            this.append(header);
-        }
-        const container = document.createElement('div');
-        container.className = 'designbase-wc-table__container';
-        const table = document.createElement('table');
-        table.className = 'designbase-wc-table__table';
-        const thead = document.createElement('thead');
-        thead.className = 'designbase-wc-table__thead';
-        const headRow = document.createElement('tr');
-        headRow.className = 'designbase-wc-table__tr';
-        const visibleKeys = paginatedData.map((item, index) => this.getRowKey(item, index));
-        const selectedVisible = visibleKeys.filter((key) => this.internalSelectedRows.includes(key));
-        const rowClickable = this.hasAttribute('clickable');
-        if (selectable) {
-            const th = document.createElement('th');
-            th.className = 'designbase-wc-table__th designbase-wc-table__th--checkbox';
-            const checkbox = this.createCheckbox({
-                checked: visibleKeys.length > 0 && selectedVisible.length === visibleKeys.length,
-                indeterminate: selectedVisible.length > 0 && selectedVisible.length < visibleKeys.length,
-                onChange: (checked) => this.handleSelectAll(checked),
-            });
-            th.append(checkbox);
-            headRow.append(th);
-        }
-        columns.forEach((column) => {
-            const th = document.createElement('th');
-            th.className = [
-                'designbase-wc-table__th',
-                `designbase-wc-table__th--${column.align || 'left'}`,
-                sortable && column.sortable && 'designbase-wc-table__th--sortable',
-                this.internalSortColumn === column.key &&
-                    this.internalSortDirection &&
-                    'designbase-wc-table__th--sorted',
-            ]
-                .filter(Boolean)
-                .join(' ');
-            if (column.width)
-                th.style.width = typeof column.width === 'number' ? `${column.width}px` : column.width;
-            const content = document.createElement('div');
-            content.className = 'designbase-wc-table__th-content';
-            const text = document.createElement('span');
-            text.className = 'designbase-wc-table__th-text';
-            text.textContent = column.header;
-            content.append(text);
-            if (sortable && column.sortable)
-                content.append(this.createSortIcon(column));
-            th.append(content);
-            if (sortable && column.sortable) {
-                th.addEventListener('click', () => this.handleSort(column));
-            }
-            headRow.append(th);
-        });
-        thead.append(headRow);
-        const tbody = document.createElement('tbody');
-        tbody.className = 'designbase-wc-table__tbody';
-        if (sortedData.length === 0) {
-            const row = document.createElement('tr');
-            row.className = 'designbase-wc-table__tr';
-            const cell = document.createElement('td');
-            cell.className = 'designbase-wc-table__td designbase-wc-table__td--empty';
-            cell.colSpan = Math.max(columns.length + (selectable ? 1 : 0), 1);
-            const empty = document.createElement('db-empty-state');
-            empty.setAttribute('title', '데이터가 없습니다');
-            empty.setAttribute('description', emptyMessage);
-            empty.setAttribute('variant', 'no-data');
-            empty.setAttribute('size', 'm');
-            cell.append(empty);
-            row.append(cell);
-            tbody.append(row);
-        }
-        else {
-            paginatedData.forEach((item, index) => {
-                const rowKey = this.getRowKey(item, index);
-                const isSelected = this.internalSelectedRows.includes(rowKey);
-                const row = document.createElement('tr');
-                row.className = [
-                    'designbase-wc-table__tr',
-                    rowClickable && 'designbase-wc-table__tr--clickable',
-                    isSelected && 'designbase-wc-table__tr--selected',
-                ]
-                    .filter(Boolean)
-                    .join(' ');
-                if (rowClickable) {
-                    row.addEventListener('click', () => {
-                        this.dispatchEvent(new CustomEvent('db-row-click', {
-                            detail: { item, index },
-                            bubbles: true,
-                            composed: true,
-                        }));
-                    });
-                }
-                if (selectable) {
-                    const cell = document.createElement('td');
-                    cell.className = 'designbase-wc-table__td designbase-wc-table__td--checkbox';
-                    const checkbox = this.createCheckbox({
-                        checked: isSelected,
-                        stopPropagation: true,
-                        onChange: (checked) => this.handleRowSelect(rowKey, checked),
-                    });
-                    cell.append(checkbox);
-                    row.append(cell);
-                }
-                columns.forEach((column) => {
-                    const cell = document.createElement('td');
-                    cell.className = [
-                        'designbase-wc-table__td',
-                        `designbase-wc-table__td--${column.align || 'left'}`,
-                    ].join(' ');
-                    cell.textContent = String(item[column.key] ?? '');
-                    row.append(cell);
-                });
-                tbody.append(row);
-            });
-        }
-        table.append(thead, tbody);
-        container.append(table);
-        this.append(container);
-        if (this.hasAttribute('pagination')) {
-            const pageSize = Number(this.getAttribute('page-size') || 10);
-            const totalItems = Number(this.getAttribute('total-items') || sortedData.length);
-            const totalPages = Math.max(1, Math.ceil(totalItems / pageSize));
-            const footer = document.createElement('div');
-            footer.className = 'designbase-wc-table__footer';
-            const pagination = document.createElement('db-pagination');
-            pagination.setAttribute('current-page', String(this.internalPage));
-            pagination.setAttribute('total-pages', String(totalPages));
-            pagination.setAttribute('size', resolvedSize);
-            pagination.setAttribute('show-first-last', '');
-            pagination.addEventListener('db-change', (event) => {
-                const page = Number(event.detail?.page || 1);
-                this.internalPage = page;
-                this.dispatchEvent(new CustomEvent('db-page-change', {
-                    bubbles: true,
-                    composed: true,
-                    detail: { page },
-                }));
-                this.render();
-            });
-            footer.append(pagination);
-            this.append(footer);
-        }
-    }
-}
-if (!customElements.get('db-table'))
-    customElements.define('db-table', DbTable);
-
-export { DbTable };
+import{createDbIcon as e}from"./db-icons.js";const t=["s","m","l"],s=["default","striped","hoverable"];class DbTable extends HTMLElement{constructor(){super(...arguments),this.internalSelectedRows=[],this.internalSortDirection=null,this.internalPage=1}static get observedAttributes(){return["columns","data","title","size","variant","empty-message","sortable","sort-column","sort-direction","selectable","multi-select","selected-rows","row-key","loading","pagination","page","page-size","total-items","show-count-badge","clickable"]}get columns(){try{return JSON.parse(this.getAttribute("columns")||"[]")}catch{return[]}}set columns(e){this.setAttribute("columns","string"==typeof e?e:JSON.stringify(e))}get data(){try{return JSON.parse(this.getAttribute("data")||"[]")}catch{return[]}}set data(e){this.setAttribute("data","string"==typeof e?e:JSON.stringify(e))}connectedCallback(){this.render()}attributeChangedCallback(e){"selected-rows"===e&&this.syncSelectedRowsFromAttribute(),"sort-column"!==e&&"sort-direction"!==e||this.syncSortFromAttributes(),"page"===e&&(this.internalPage=Number(this.getAttribute("page")||1)),this.render()}syncSelectedRowsFromAttribute(){try{this.internalSelectedRows=JSON.parse(this.getAttribute("selected-rows")||"[]")}catch{this.internalSelectedRows=[]}}syncSortFromAttributes(){const e=this.getAttribute("sort-column"),t=this.getAttribute("sort-direction");this.internalSortColumn=e||void 0,this.internalSortDirection="asc"===t||"desc"===t?t:null}getRowKey(e,t){const s=e[this.getAttribute("row-key")||"id"];return String(null!=s?s:t)}getSortedData(){const e=this.data,t=this.getAttribute("sort-column")||this.internalSortColumn,s=this.getAttribute("sort-direction")||this.internalSortDirection;if(!t||!s)return e;const n=this.columns.find(e=>e.key===t);return n?.sortable?[...e].sort((e,n)=>{const a=e[t],i=n[t];return a===i?0:null==a?1:null==i?-1:a<i?"asc"===s?-1:1:"asc"===s?1:-1}):e}handleSort(e){if(!this.hasAttribute("sortable")||!e.sortable)return;let t="asc";this.internalSortColumn===e.key&&("asc"===this.internalSortDirection?t="desc":"desc"===this.internalSortDirection&&(t=null)),this.internalSortColumn=t?e.key:void 0,this.internalSortDirection=t,this.dispatchEvent(new CustomEvent("db-sort-change",{bubbles:!0,composed:!0,detail:{column:e.key,direction:t}})),this.render()}handleRowSelect(e,t,s){s?.stopPropagation();let n;n=this.hasAttribute("multi-select")?t?[...this.internalSelectedRows,e]:this.internalSelectedRows.filter(t=>t!==e):t?[e]:[],this.internalSelectedRows=n,this.dispatchEvent(new CustomEvent("db-selection-change",{bubbles:!0,composed:!0,detail:{selectedRows:n}})),this.render()}handleSelectAll(e){const t=e?this.data.map((e,t)=>this.getRowKey(e,t)):[];this.internalSelectedRows=t,this.dispatchEvent(new CustomEvent("db-selection-change",{bubbles:!0,composed:!0,detail:{selectedRows:t}})),this.render()}getPaginatedData(){const e=this.getSortedData();if(!this.hasAttribute("pagination"))return e;const t=Number(this.getAttribute("page-size")||10),s=Number(this.getAttribute("total-items")||e.length),n=Math.max(1,Math.ceil(s/t)),a=(Math.min(this.internalPage,n)-1)*t;return e.slice(a,a+t)}createSortIcon(t){const s=document.createElement("span");s.className="designbase-wc-table__sort-icon";if(!(this.internalSortColumn===t.key&&Boolean(this.internalSortDirection))){s.classList.add("designbase-wc-table__sort-icon--idle");const t=document.createElement("span");return t.className="designbase-wc-table__sort-icon-stack",t.append(e("chevron-up",10),e("chevron-down",10)),s.append(t),s}return s.classList.add("asc"===this.internalSortDirection?"designbase-wc-table__sort-icon--asc":"designbase-wc-table__sort-icon--desc"),s.append(e("asc"===this.internalSortDirection?"chevron-up":"chevron-down",14)),s}createCheckbox(e){const t=document.createElement("db-checkbox");return t.setAttribute("size","s"),t.setAttribute("has-label","false"),e.checked&&t.setAttribute("checked",""),e.indeterminate&&t.setAttribute("indeterminate",""),e.stopPropagation&&t.addEventListener("click",e=>e.stopPropagation()),t.addEventListener("db-change",t=>{const s=t.detail;e.onChange?.(s.checked)}),t}render(){const e=this.getAttribute("size")||"m",n=this.getAttribute("variant")||"default",a=t.includes(e)?e:"m",i=s.includes(n)?n:"default",c=this.columns,r=this.getPaginatedData(),l=this.getSortedData(),o=this.hasAttribute("loading"),d=this.hasAttribute("selectable"),b=this.hasAttribute("sortable"),h=this.getAttribute("empty-message")||"데이터가 없습니다.";if(this.className=["designbase-wc-table",`designbase-wc-table--${a}`,`designbase-wc-table--${i}`,d&&"designbase-wc-table--selectable",b&&"designbase-wc-table--sortable",o&&"designbase-wc-table--loading"].filter(Boolean).join(" "),this.replaceChildren(),o){const e=document.createElement("div");e.className="designbase-wc-table__loading";const t=document.createElement("div");t.className="designbase-wc-table__loading-spinner";const s=document.createElement("span");return s.textContent="로딩 중...",e.append(t,s),void this.append(e)}const u=this.getAttribute("title"),m=this.hasAttribute("show-count-badge");if(u||m){const e=document.createElement("div");e.className="designbase-wc-table__header";const t=document.createElement("div");if(t.className="designbase-wc-table__header-left",u){const e=document.createElement("h3");e.className="designbase-wc-table__title",e.textContent=u,t.append(e)}if(m){const e=document.createElement("db-badge");e.setAttribute("count",String(this.data.length)),e.setAttribute("badge-style","number"),e.setAttribute("variant","primary"),e.setAttribute("size","s"),t.append(e)}e.append(t),this.append(e)}const g=document.createElement("div");g.className="designbase-wc-table__container";const p=document.createElement("table");p.className="designbase-wc-table__table";const w=document.createElement("thead");w.className="designbase-wc-table__thead";const _=document.createElement("tr");_.className="designbase-wc-table__tr";const A=r.map((e,t)=>this.getRowKey(e,t)),S=A.filter(e=>this.internalSelectedRows.includes(e)),E=this.hasAttribute("clickable");if(d){const e=document.createElement("th");e.className="designbase-wc-table__th designbase-wc-table__th--checkbox";const t=this.createCheckbox({checked:A.length>0&&S.length===A.length,indeterminate:S.length>0&&S.length<A.length,onChange:e=>this.handleSelectAll(e)});e.append(t),_.append(e)}c.forEach(e=>{const t=document.createElement("th");t.className=["designbase-wc-table__th",`designbase-wc-table__th--${e.align||"left"}`,b&&e.sortable&&"designbase-wc-table__th--sortable",this.internalSortColumn===e.key&&this.internalSortDirection&&"designbase-wc-table__th--sorted"].filter(Boolean).join(" "),e.width&&(t.style.width="number"==typeof e.width?`${e.width}px`:e.width);const s=document.createElement("div");s.className="designbase-wc-table__th-content";const n=document.createElement("span");n.className="designbase-wc-table__th-text",n.textContent=e.header,s.append(n),b&&e.sortable&&s.append(this.createSortIcon(e)),t.append(s),b&&e.sortable&&t.addEventListener("click",()=>this.handleSort(e)),_.append(t)}),w.append(_);const f=document.createElement("tbody");if(f.className="designbase-wc-table__tbody",0===l.length){const e=document.createElement("tr");e.className="designbase-wc-table__tr";const t=document.createElement("td");t.className="designbase-wc-table__td designbase-wc-table__td--empty",t.colSpan=Math.max(c.length+(d?1:0),1);const s=document.createElement("db-empty-state");s.setAttribute("title","데이터가 없습니다"),s.setAttribute("description",h),s.setAttribute("variant","no-data"),s.setAttribute("size","m"),t.append(s),e.append(t),f.append(e)}else r.forEach((e,t)=>{const s=this.getRowKey(e,t),n=this.internalSelectedRows.includes(s),a=document.createElement("tr");if(a.className=["designbase-wc-table__tr",E&&"designbase-wc-table__tr--clickable",n&&"designbase-wc-table__tr--selected"].filter(Boolean).join(" "),E&&a.addEventListener("click",()=>{this.dispatchEvent(new CustomEvent("db-row-click",{detail:{item:e,index:t},bubbles:!0,composed:!0}))}),d){const e=document.createElement("td");e.className="designbase-wc-table__td designbase-wc-table__td--checkbox";const t=this.createCheckbox({checked:n,stopPropagation:!0,onChange:e=>this.handleRowSelect(s,e)});e.append(t),a.append(e)}c.forEach(t=>{const s=document.createElement("td");s.className=["designbase-wc-table__td",`designbase-wc-table__td--${t.align||"left"}`].join(" "),s.textContent=String(e[t.key]??""),a.append(s)}),f.append(a)});if(p.append(w,f),g.append(p),this.append(g),this.hasAttribute("pagination")){const e=Number(this.getAttribute("page-size")||10),t=Number(this.getAttribute("total-items")||l.length),s=Math.max(1,Math.ceil(t/e)),n=document.createElement("div");n.className="designbase-wc-table__footer";const i=document.createElement("db-pagination");i.setAttribute("current-page",String(this.internalPage)),i.setAttribute("total-pages",String(s)),i.setAttribute("size",a),i.setAttribute("show-first-last",""),i.addEventListener("db-change",e=>{const t=Number(e.detail?.page||1);this.internalPage=t,this.dispatchEvent(new CustomEvent("db-page-change",{bubbles:!0,composed:!0,detail:{page:t}})),this.render()}),n.append(i),this.append(n)}}}customElements.get("db-table")||customElements.define("db-table",DbTable);export{DbTable};