import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { i as getId, j as isEmpty, c as cls, t as tinyMDtoHTML } from './helpers.js';
import { L as Lang } from './lang.js';
import { a as axios } from './axios.js';
import { d as defineCustomElement$b } from './component2.js';
import { d as defineCustomElement$a } from './component3.js';
import { d as defineCustomElement$9 } from './component4.js';
import { d as defineCustomElement$8 } from './component5.js';
import { d as defineCustomElement$7 } from './component6.js';
import { d as defineCustomElement$6 } from './component-cell.js';
import { d as defineCustomElement$5 } from './component.js';
import { d as defineCustomElement$4 } from './component14.js';
import { d as defineCustomElement$3 } from './component12.js';
import { d as defineCustomElement$2 } from './component13.js';

const styleCss = "x-datatable x-datatable-col{display:none}x-datatable.fluid>.toolbar{padding-left:0.5rem;padding-right:0.5em}x-datatable.fluid>.wrap{border-radius:0;-webkit-box-shadow:none;box-shadow:none;border-right:none !important;border-left:none !important}x-datatable>.toolbar{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;width:100%}x-datatable>.toolbar x-input{max-width:18rem;margin-right:0.5rem;margin-bottom:0.5rem}x-datatable>.toolbar x-input .input-container{border-color:rgba(var(--color-border-rgb, 200, 199, 204), 0.35)}.is-dark-mode x-datatable>.toolbar x-input .input-container{border-color:var(--color-dark-tint, #414141)}x-datatable>.toolbar x-input .filters{z-index:9999;position:absolute;margin:2px 0 0;top:54px;list-style:none;padding:0 0.5rem 0.5rem;background-color:var(--color-border-lucid, #f7f7f7);border:1px solid var(--color-border-tinted, #d9d8db);min-width:14rem;max-width:100%;font-family:\"Poppins\", \"Arial\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";display:none;width:100%;-webkit-box-shadow:0px 12px 10px -8px rgba(0, 0, 0, 0.1);box-shadow:0px 12px 10px -8px rgba(0, 0, 0, 0.1);border-radius:0.5rem}x-datatable>.toolbar x-input .filters.active{display:block;-webkit-animation:fadeIn 0.3s;animation:fadeIn 0.3s}x-datatable>.toolbar x-input .filters .arrow{position:absolute;top:calc(-0.6rem - 1px);right:1rem;width:1.2rem;height:1.2rem;display:block;background-color:var(--color-border-lucid, #f7f7f7);border:1px solid var(--color-border-tinted, #d9d8db);border-right:none;border-bottom:none;-webkit-transform:rotate(45deg);transform:rotate(45deg);border-top-left-radius:0.25rem}.is-dark-mode x-datatable>.toolbar x-input .filters .arrow{background-color:var(--color-dark-shade, #1a1a1a);border:1px solid var(--color-dark-tint, #414141);border-right:none;border-bottom:none}.is-dark-mode x-datatable>.toolbar x-input .filters{background-color:var(--color-dark-shade, #1a1a1a);border:1px solid var(--color-dark-tint, #414141)}x-datatable>.toolbar x-input .filters:empty{display:none !important}x-datatable>.toolbar x-input .filters x-datatable-filter{display:block}x-datatable>.toolbar>div{display:block}x-datatable>.toolbar>div:empty{display:none}x-datatable>.toolbar>div x-button{margin-right:0.5rem;margin-bottom:0.5rem}x-datatable>.toolbar>div x-button:last-of-type{margin-right:0}x-datatable>.wrap{position:relative;max-width:100%;width:100%;margin:1rem auto;margin-top:0;overflow-x:auto;background-color:var(--color-white, #FFFFFF);border:1px solid rgba(var(--color-border-rgb, 200, 199, 204), 0.35);-webkit-box-shadow:0px 3px 1rem rgba(var(--color-border-rgb, 200, 199, 204), 0.2);box-shadow:0px 3px 1rem rgba(var(--color-border-rgb, 200, 199, 204), 0.2);border-radius:0.5rem}.is-dark-mode x-datatable>.wrap{color:var(--color-text-light, #FEFEFE);background-color:var(--color-black, #000000);-webkit-box-shadow:0px 3px 1rem rgba(var(--color-black-rgb, 0, 0, 0), 0.35);box-shadow:0px 3px 1rem rgba(var(--color-black-rgb, 0, 0, 0), 0.35);border:1px solid var(--color-dark-tint, #414141)}x-datatable table{position:relative;width:100%;border:none;border-collapse:collapse;overflow:hidden}x-datatable table [data-align=left]{text-align:left}x-datatable table [data-align=center]{text-align:center}x-datatable table [data-align=right]{text-align:right}x-datatable table thead th{white-space:nowrap;border:0 solid transparent;padding:1.25rem 1.25rem;font-weight:600;text-transform:uppercase;font-size:0.75rem;line-height:1em;color:inherit;vertical-align:middle;position:relative}x-datatable table thead th:hover .sortable{opacity:1}x-datatable table thead th:not(:last-child)::after{content:\"\";width:1px;border-right:1px solid rgba(var(--color-border-rgb, 200, 199, 204), 0.35);position:absolute;right:0;top:1rem;bottom:1rem}.is-dark-mode x-datatable table thead th:not(:last-child)::after{border-color:var(--color-dark-tint, #414141)}x-datatable table thead th .sortable{cursor:pointer;-webkit-transition:0.4s;transition:0.4s;opacity:0.3;position:absolute;right:0;left:0;top:0;bottom:0;display:-ms-flexbox;display:flex;-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:center;justify-content:center;-ms-flex-direction:column;flex-direction:column}x-datatable table thead th .sortable i{pointer-events:none;margin-right:0.5rem;margin-top:-0.1rem;margin-bottom:-0.1rem;-webkit-transform-origin:center;transform-origin:center;-webkit-transition:0.4s;transition:0.4s;font-size:0.5rem}x-datatable table thead th .sortable i.asc{-webkit-transform:rotate(180deg);transform:rotate(180deg)}x-datatable table thead th .sortable[data-sort]{opacity:0.8}x-datatable table thead th .sortable[data-sort=asc] i.desc{display:none}x-datatable table thead th .sortable[data-sort=desc] i.asc{display:none}x-datatable table thead th>span i[class^=icon-]{font-size:1.25rem !important}x-datatable table tbody tr{-webkit-transition:background-color 0.4s, border 0.4s, -webkit-box-shadow 0.3s;transition:background-color 0.4s, border 0.4s, -webkit-box-shadow 0.3s;transition:background-color 0.4s, border 0.4s, box-shadow 0.3s;transition:background-color 0.4s, border 0.4s, box-shadow 0.3s, -webkit-box-shadow 0.3s}x-datatable table tbody tr.group td{padding:0.5rem 0.6rem}x-datatable table tbody tr.group td>div{background-color:rgba(var(--color-border-rgb, 200, 199, 204), 0.2);border-radius:0.25rem;padding:0.125rem 0.65rem;font-weight:bolder;font-size:0.85rem}x-datatable table tbody tr:hover:not(.group){background-color:hsla(0, 0%, 74.5%, 0.1);cursor:pointer;-webkit-box-shadow:inset 0 1px 0 rgba(var(--color-border-rgb, 200, 199, 204), 0.1), inset 0 -1px 0 rgba(var(--color-border-rgb, 200, 199, 204), 0.1);box-shadow:inset 0 1px 0 rgba(var(--color-border-rgb, 200, 199, 204), 0.1), inset 0 -1px 0 rgba(var(--color-border-rgb, 200, 199, 204), 0.1)}x-datatable table tbody tr td{padding:0.875rem 1.25rem;color:var(--color-text-tint, #656565);-webkit-box-sizing:content-box;box-sizing:content-box;vertical-align:middle;white-space:nowrap}.is-dark-mode x-datatable table tbody tr td{color:var(--color-text-light-shade, #d8d8d8)}x-datatable table tbody tr td .cell-template x-icon{font-size:1.75rem !important;margin:0 1px !important}x-datatable table tbody tr td .cell-template x-button button,x-datatable table tbody tr td .cell-template x-button a{padding:0.9rem 0.25rem;max-height:1.75rem;height:1.2rem;font-size:0.875rem}x-datatable table tbody tr td .cell-template x-button button x-icon,x-datatable table tbody tr td .cell-template x-button a x-icon{font-size:1rem !important}x-datatable table tbody tr td tt{font-family:inherit}x-datatable table tbody tr td x-tooltip{display:block}x-datatable table tbody tr td[data-type=date],x-datatable table tbody tr td[data-type=time]{text-align:center;padding-top:0.5rem;padding-bottom:0.5rem}x-datatable table tbody tr td[data-type=date] p,x-datatable table tbody tr td[data-type=time] p{font-size:0.6rem;display:block;text-align:inherit;line-height:1em;font-weight:bolder;padding:2px 0px;margin:0px;text-transform:uppercase;opacity:0.85}x-datatable table tbody tr td[data-type=date] h5,x-datatable table tbody tr td[data-type=time] h5{font-size:1.25rem;display:block;text-align:inherit;line-height:1em;font-weight:bolder;padding:0px;margin:0px}x-datatable table tbody tr td[data-type=date] div{text-align:center}x-datatable table tbody tr td[data-type=time] div{text-align:left;display:inline-block}x-datatable table tbody tr td[data-type=time] p{padding-left:0.2rem}x-datatable table .message td{padding:0.6rem}x-datatable table .message td x-alert{margin-bottom:0px;padding:1.2rem 1.5rem;padding-left:3.5rem;-webkit-animation:0.3s fadeInUp;animation:0.3s fadeInUp}x-datatable table .message td x-alert x-icon{width:2.5rem;height:2.5rem;font-size:2.5rem !important;top:0.6rem;left:0.6rem;-webkit-animation:none;animation:none}x-datatable table .loading td{padding:0.6rem}x-datatable table .show-more td{border-top:1px solid rgba(var(--color-border-rgb, 200, 199, 204), 0.2);text-align:center;cursor:pointer;background-color:rgba(var(--color-border-rgb, 200, 199, 204), 0.05);font-size:0.85rem;-webkit-transition:0.3s;transition:0.3s}x-datatable table .show-more td:hover{background-color:rgba(var(--color-border-rgb, 200, 199, 204), 0.1)}.is-dark-mode x-datatable table .show-more td:hover{background-color:rgba(50, 50, 50, 0.25)}x-datatable table .empty td{padding-top:4rem;padding-bottom:4rem;-webkit-transition:0.4s;transition:0.4s;text-align:center;opacity:0.8;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-select:none}x-datatable table .empty td i[class^=icon-]{font-size:6rem;display:block;margin:0 auto 1rem}x-datatable table .empty td p{font-size:1.25rem}x-datatable .pagination{font-size:0.8rem;margin-top:-0.35rem;margin-bottom:1rem;padding:0 1rem;opacity:0.5;color:var(--color-text, #4A4A4A)}.is-dark-mode x-datatable .pagination{color:var(--color-text-light, #FEFEFE)}x-datatable-filter{display:none;border-bottom:1px dashed rgba(var(--color-default-rgb, 155, 155, 155), 0.2);padding:0px}x-datatable-filter x-datatable-filter-item{border-bottom:1px dashed rgba(var(--color-default-rgb, 155, 155, 155), 0.2);display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;color:var(--color-text, #4A4A4A);text-decoration:none;padding:0.5rem 0.25rem;border-radius:0.2rem;line-height:1em}.is-dark-mode x-datatable-filter x-datatable-filter-item{color:var(--color-text-light, #FEFEFE)}x-datatable-filter x-datatable-filter-item x-icon{width:1em;height:1em;line-height:1em;margin-right:0.5rem;-webkit-animation:0.3s fadeInLeft;animation:0.3s fadeInLeft}x-datatable-filter x-datatable-filter-item:hover{cursor:pointer;background-color:rgba(var(--color-default-rgb, 155, 155, 155), 0.2);border-color:transparent}x-datatable-filter:last-child{border:none}x-datatable-filter .form-between{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}x-datatable-filter .form-between b{white-space:nowrap}x-datatable-filter .form-between .field-container{-ms-flex:1;flex:1}x-datatable-filter .filter-header{display:block;background-color:rgba(var(--color-border-rgb, 200, 199, 204), 0.3);padding:0.45rem 0.5rem;padding-right:1.5rem;border-radius:0.35rem;position:relative;cursor:pointer;-webkit-animation:0.3s fadeIn;animation:0.3s fadeIn}x-datatable-filter .filter-header.is-ready{background-color:var(--color-primary-lucid, #e3eafd);color:var(--color-primary-shaded, #2e52a9)}.is-dark-mode x-datatable-filter .filter-header.is-ready{background-color:var(--color-primary-shaded, #2e52a9);color:var(--color-primary-lucid, #e3eafd)}.is-dark-mode x-datatable-filter .filter-header{background-color:rgba(var(--color-border-rgb, 200, 199, 204), 0.3)}x-datatable-filter .filter-header h5{font-size:0.75rem;line-height:1.35em;margin:0px}x-datatable-filter .filter-header p{font-size:0.75rem;line-height:1.3em;margin:0px;overflow:hidden;white-space:nowrap}x-datatable-filter .filter-header i{font-size:0.8em}x-datatable-map{display:none}@media (max-width: 576px){x-datatable>.toolbar{display:-ms-flexbox;display:flex;-ms-flex-direction:column-reverse;flex-direction:column-reverse;-ms-flex-pack:justify;justify-content:space-between;width:100%}x-datatable>.toolbar x-input{max-width:100%;margin-right:0}x-datatable>.toolbar>div [slot=actions]{width:100%;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}x-datatable>.toolbar>div x-button{width:100%}}";
const XDatatableStyle0 = styleCss;

const XDatatable$1 = /*@__PURE__*/ proxyCustomElement(class XDatatable extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        /**
         * Datatable ID
         */
        this.tableId = getId('datatable');
        this.loading = undefined;
        this.sorting = undefined;
        this.message = undefined;
        this.dataset = { items: [] };
        this.activeFilters = [];
        this.showFilters = undefined;
        this.filters = [];
        this.columns = [];
        this.fetch = undefined;
        this.pagination = undefined;
        this.search = undefined;
        this.fluid = undefined;
        this.paginationLimit = 50;
        this.groupBy = undefined;
        this.groupSort = 'asc';
    }
    /**
     * Element event on slot make changes
     */
    handleSlotChange() {
        this.computeChildColumns();
        this.computeChildFilters();
        this.moveChildFilters();
    }
    /**
     * Update the child columns and render the result
     */
    computeChildColumns() {
        this.columns = Array.from(this.el.children)
            .filter(tab => tab.nodeName.toLowerCase().startsWith('x-datatable-col'))
            .map(el => el);
    }
    /**
     * Update the child filters and render the result
     */
    computeChildFilters() {
        this.filters = Array.from(this.el.children)
            .filter(tab => tab.nodeName.toLowerCase() === 'x-datatable-filter')
            .map(filter => filter);
    }
    /**
     * Move each filter to slot
     */
    moveChildFilters() {
        const container = this.el.querySelector('.filter-items');
        this.filters.filter(filter => !filter.classList.contains('ready'))
            .forEach(filter => {
            container.appendChild(filter);
            filter.classList.add('ready');
        });
    }
    /**
     * Build the request form data
     */
    buildRequestBody() {
        var _a, _b;
        const data = {};
        if (this.keyword) {
            data.search = this.keyword;
        }
        if (this.activeFilters.length > 0) {
            data.filters = Object.keys(this.activeFilters).reduce((_, field) => {
                var _a, _b, _c, _d, _e, _f, _g;
                _[(_a = this.activeFilters[field]) === null || _a === void 0 ? void 0 : _a.field] = {
                    type: (_c = (_b = this.activeFilters[field]) === null || _b === void 0 ? void 0 : _b.type) !== null && _c !== void 0 ? _c : null,
                    condition: (_e = (_d = this.activeFilters[field]) === null || _d === void 0 ? void 0 : _d.condition) !== null && _e !== void 0 ? _e : null,
                    value: (_g = (_f = this.activeFilters[field]) === null || _f === void 0 ? void 0 : _f.value) !== null && _g !== void 0 ? _g : null,
                };
                return _;
            }, {});
            this.activeFilters.forEach(filter => {
                data.filters[filter.field] = {
                    type: filter.type,
                    condition: filter.condition,
                    value: filter.value,
                };
            });
        }
        if (this.pagination) {
            data.limit = this.paginationLimit;
            if ((_b = (_a = this.dataset) === null || _a === void 0 ? void 0 : _a.pagination) === null || _b === void 0 ? void 0 : _b.cursor) {
                data.cursor = this.dataset.pagination.cursor.toString();
            }
        }
        if (this.sorting) {
            data.sort = this.sorting;
        }
        if (this.groupBy) {
            data.group = {
                field: this.groupBy,
                dir: this.groupSort,
            };
        }
        return data;
    }
    /**
     * On element will mounted
     */
    componentWillLoad() {
        this.computeChildColumns();
        this.computeChildFilters();
        if (!this.columns.length) {
            return;
        }
    }
    /**
     * On element is mounted
     */
    componentDidLoad() {
        this.moveChildFilters();
        setTimeout(() => this.fetchData(), 0);
    }
    /**
     * On finish typing the search input
     */
    onSearchFinishTyping(e) {
        var _a, _b;
        const value = (_b = (_a = e.target) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : null;
        this.keyword = isEmpty(value) ? null : value;
        this.fetchData();
    }
    /**
     * Force to rednder the datatable and config
     */
    onLoadMoreElements() {
        this.fetchData(true);
    }
    /**
     * Get the list of active filters
     */
    getActiveFilters() {
        return this.filters.filter(filter => filter.active);
    }
    /**
     * Show the filters dropdown
     */
    showFiltersDrowdown() {
        this.filters.filter(filter => !filter.active)
            .forEach(filter => {
            if (!this.showFilters)
                filter.dispatchEvent(new Event('clear'));
        });
        this.showFilters = !this.showFilters;
    }
    /**
     * Clean all the filters of the datatable
     */
    clearFilters() {
        this.filters.forEach(filter => {
            filter.active = false;
            filter.dispatchEvent(new Event('clear'));
        });
        this.activeFilters = [];
        this.showFilters = false;
        this.fetchData();
    }
    /**
     * Proccess all the filters and mark the active
     */
    applyValidFilters() {
        this.activeFilters = [];
        this.filters.filter(filter => filter.valid)
            .forEach(filter => {
            this.activeFilters.push({
                type: filter.type,
                field: filter.field,
                condition: filter.condition,
                value: filter.value,
            });
            filter.active = true;
        });
        this.activeFilters.length > 0 && (this.showFilters = false);
        this.fetchData();
    }
    /**
     * Fetch the request data on every change
     */
    fetchData(next = false) {
        var _a, _b, _c, _d;
        this.loading = true;
        this.message = null;
        if (!next && ((_b = (_a = this.dataset) === null || _a === void 0 ? void 0 : _a.pagination) === null || _b === void 0 ? void 0 : _b.cursor)) {
            this.dataset.pagination.cursor = null;
        }
        axios({
            method: 'POST',
            url: (_c = this.fetch) !== null && _c !== void 0 ? _c : window.location.href,
            data: this.buildRequestBody(),
            headers: {
                'X-CSRF-TOKEN': (_d = document.querySelector('meta[name="csrf-token"]')) === null || _d === void 0 ? void 0 : _d.getAttribute('content'),
            }
        }).then(({ data, status }) => {
            var _a, _b, _c, _d;
            if (data === null || data === void 0 ? void 0 : data.data) {
                const items = (_a = data === null || data === void 0 ? void 0 : data.data) !== null && _a !== void 0 ? _a : [];
                this.dataset = {
                    items: next ? this.dataset.items.concat(items) : items,
                    pagination: {
                        more: false,
                        total: 0,
                    }
                };
            }
            else {
                this.dataset = {
                    items: [],
                    pagination: {
                        more: false,
                        total: 0,
                    }
                };
            }
            if (this.pagination) {
                this.dataset.pagination.more = (_b = data === null || data === void 0 ? void 0 : data.more) !== null && _b !== void 0 ? _b : !isEmpty(data === null || data === void 0 ? void 0 : data.cursor);
                this.dataset.pagination.cursor = (_c = data === null || data === void 0 ? void 0 : data.cursor) !== null && _c !== void 0 ? _c : null;
            }
            this.dataset.pagination.total = (_d = data === null || data === void 0 ? void 0 : data.count) !== null && _d !== void 0 ? _d : 0;
            if (status != 200 && (data === null || data === void 0 ? void 0 : data.message)) {
                this.message = {
                    color: 'info',
                    icon: 'idea',
                    content: data === null || data === void 0 ? void 0 : data.message,
                };
                this.scrollToTop();
            }
            this.loading = false;
        }).catch(err => {
            var _a, _b, _c;
            this.loading = false;
            if (err === null || err === void 0 ? void 0 : err.response) {
                this.message = {
                    color: 'warning',
                    icon: 'hand',
                    content: (_c = (_b = (_a = err.response) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.message) !== null && _c !== void 0 ? _c : err.message,
                };
                this.scrollToTop();
            }
            else {
                this.message = {
                    color: 'danger',
                    icon: 'danger',
                    content: err === null || err === void 0 ? void 0 : err.message,
                };
                this.scrollToTop();
            }
        });
    }
    /**
     * Scroll the windown to focus the top table
     */
    scrollToTop() {
        if (this.el.querySelector('.message')) {
            window.scrollTo({ top: 0, behavior: 'smooth' });
        }
    }
    /**
     * On click the TH element of header column
     */
    onClickColumn(e, col) {
        if (col.sortable) {
            const th = e.target;
            if (th.hasAttribute('data-sort')) {
                col.sortdir = col.sortdir == 'asc' ? 'desc' : 'asc';
                th.setAttribute('data-sort', col.sortdir);
            }
            else {
                this.el.querySelectorAll('[data-sort]').forEach(el => el.removeAttribute('data-sort'));
                th.setAttribute('data-sort', col.sortdir);
            }
            this.sorting = {
                field: col.field,
                dir: col.sortdir,
            };
            this.fetchData();
        }
    }
    /**
     * Render Toolbar element
     */
    renderToolbar() {
        return h("div", { class: "toolbar" }, (this.search || this.filters.length > 0) && h("x-input", { label: Lang.get('datatable.search'), typingtimeout: 2000, cleanable: true, typingindicate: true, loading: this.loading, onDoneTyping: (e) => this.onSearchFinishTyping(e), onClearInput: (e) => this.onSearchFinishTyping(e) }, this.getActiveFilters().length > 0 && h("x-tooltip", { content: Lang.get('datatable.clear-filters'), slot: "buttons" }, h("x-button", { type: "button", icon: "clean", onClick: () => this.clearFilters() })), this.filters.length > 0 && h("x-tooltip", { content: (this.activeFilters.length > 0 ? Lang.get('datatable.active-filters', {
                n: this.activeFilters.length
            }) : Lang.get('datatable.available-filters', {
                n: this.filters.length
            })), slot: "buttons" }, h("x-button", { type: "button", icon: "filter-alt", class: cls({
                'button-active': this.getActiveFilters().length > 0,
                'button-selected': this.showFilters,
            }), onClick: () => this.showFiltersDrowdown() }, this.getActiveFilters().length > 0 && h("span", { slot: "right" }, this.getActiveFilters().length))), this.filters.length > 0 && h("div", { class: cls('filters', { active: this.showFilters }) }, h("div", { class: "arrow" }), h("div", { class: "filter-items" }, h("slot", { name: "filters" })), h("x-button", { type: "button", icon: "filter-alt", color: "primary", onClick: () => this.applyValidFilters(), block: true, small: true }, Lang.get('datatable.apply')))), h("div", null, h("slot", { name: "actions" })));
    }
    /**
     * Render the datatable
     */
    renderTable() {
        var _a, _b, _c, _d, _e, _f, _g, _h;
        return h("div", { class: "wrap" }, h("table", { key: this.tableId }, h("thead", null, h("tr", null, this.columns.map(col => h("th", { key: col.field, style: { width: `${col.width}px` }, "data-align": col.align, onClick: (e) => this.onClickColumn(e, col) }, h("span", { innerHTML: tinyMDtoHTML(col.label) }), col.sortable && h("div", { class: "sortable" }, h("i", { class: "icon-dropdown asc" }), h("i", { class: "icon-dropdown desc" })))))), h("tbody", null, this.loading && h("tr", { class: "loading" }, h("td", { colSpan: this.columns.length }, h("x-progress", { loading: true }))), this.message && h("tr", { class: "message" }, h("td", { colSpan: this.columns.length }, h("x-alert", { color: this.message.color, icon: this.message.icon }, this.message.content))), !((_b = (_a = this.dataset) === null || _a === void 0 ? void 0 : _a.items) === null || _b === void 0 ? void 0 : _b.length) && h("tr", { class: "empty" }, h("td", { colSpan: this.columns.length }, ((_c = this.keyword) === null || _c === void 0 ? void 0 : _c.length) > 0 || this.activeFilters.length > 0 ? h("i", { class: "icon-search" }) : h("i", { class: "icon-suspend" }), h("p", null, Lang.get(((_d = this.keyword) === null || _d === void 0 ? void 0 : _d.length) > 0 || this.activeFilters.length > 0 ? 'datatable.no-results' : 'datatable.empty')))), (_f = (_e = this.dataset) === null || _e === void 0 ? void 0 : _e.items) === null || _f === void 0 ? void 0 :
            _f.map(item => {
                var _a, _b;
                if (item && typeof item === 'object' && 'items' in item && 'value' in item) {
                    return [
                        h("tr", { class: "group" }, h("td", { colSpan: this.columns.length }, h("div", null, (_a = item.label) !== null && _a !== void 0 ? _a : item.value))),
                        ((_b = item.items) === null || _b === void 0 ? void 0 : _b.map(item => h("tr", null, this.columns.map(col => h("td", { style: { width: `${col.width}px` }, "data-align": col.align, "data-type": col.type }, h("x-datatable-cell", { col: col, row: item }))))))
                    ];
                }
                return h("tr", null, this.columns.map(col => h("td", { style: { width: `${col.width}px` }, "data-align": col.align, "data-type": col.type }, h("x-datatable-cell", { col: col, row: item }))));
            }), h("slot", null), ((_h = (_g = this.dataset) === null || _g === void 0 ? void 0 : _g.pagination) === null || _h === void 0 ? void 0 : _h.more) && h("tr", { class: "show-more", onClick: () => this.onLoadMoreElements() }, h("td", { colSpan: this.columns.length }, this.loading && h("x-progress", { loading: true }), !this.loading && h("a", { href: "javascript:;" }, Lang.get('datatable.show-more')))))));
    }
    /**
     * Render element
     */
    render() {
        var _a, _b, _c;
        return h(Host, { key: 'ad676b4470e69345ae145808883942a1f2722da2', class: cls({ fluid: this.fluid }) }, this.renderToolbar(), this.renderTable(), this.pagination && h("div", { key: '2f1f51b4bf4f38c1d0e963e07b8d412719f28315', class: "pagination", innerHTML: tinyMDtoHTML(Lang.get('datatable.pagination', {
                count: this.dataset.items.length,
                total: (_c = (_b = (_a = this.dataset) === null || _a === void 0 ? void 0 : _a.pagination) === null || _b === void 0 ? void 0 : _b.total) !== null && _c !== void 0 ? _c : 0
            })) }));
    }
    get el() { return this; }
    static get style() { return XDatatableStyle0; }
}, [4, "x-datatable", {
        "fetch": [1],
        "pagination": [4],
        "search": [4],
        "fluid": [4],
        "paginationLimit": [2, "pagination-limit"],
        "groupBy": [1, "group-by"],
        "groupSort": [1, "group-sort"],
        "loading": [32],
        "sorting": [32],
        "message": [32],
        "dataset": [32],
        "activeFilters": [32],
        "showFilters": [32],
        "filters": [32],
        "columns": [32]
    }, [[0, "slotchange", "handleSlotChange"]]]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["x-datatable", "x-alert", "x-animate", "x-avatar", "x-badge", "x-button", "x-datatable-cell", "x-icon", "x-input", "x-progress", "x-tooltip"];
    components.forEach(tagName => { switch (tagName) {
        case "x-datatable":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, XDatatable$1);
            }
            break;
        case "x-alert":
            if (!customElements.get(tagName)) {
                defineCustomElement$b();
            }
            break;
        case "x-animate":
            if (!customElements.get(tagName)) {
                defineCustomElement$a();
            }
            break;
        case "x-avatar":
            if (!customElements.get(tagName)) {
                defineCustomElement$9();
            }
            break;
        case "x-badge":
            if (!customElements.get(tagName)) {
                defineCustomElement$8();
            }
            break;
        case "x-button":
            if (!customElements.get(tagName)) {
                defineCustomElement$7();
            }
            break;
        case "x-datatable-cell":
            if (!customElements.get(tagName)) {
                defineCustomElement$6();
            }
            break;
        case "x-icon":
            if (!customElements.get(tagName)) {
                defineCustomElement$5();
            }
            break;
        case "x-input":
            if (!customElements.get(tagName)) {
                defineCustomElement$4();
            }
            break;
        case "x-progress":
            if (!customElements.get(tagName)) {
                defineCustomElement$3();
            }
            break;
        case "x-tooltip":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
    } });
}

const XDatatable = XDatatable$1;
const defineCustomElement = defineCustomElement$1;

export { XDatatable, defineCustomElement };
