import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { j as isEmpty, c as cls } from './helpers.js';
import { L as Lang } from './lang.js';
import { d as defineCustomElement$9 } from './component3.js';
import { d as defineCustomElement$8 } from './component6.js';
import { d as defineCustomElement$7 } from './component9.js';
import { d as defineCustomElement$6 } from './component15.js';
import { d as defineCustomElement$5 } from './component.js';
import { d as defineCustomElement$4 } from './component14.js';
import { d as defineCustomElement$3 } from './component16.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 XDatatableFilterStyle0 = styleCss;

const XDatatableFilter$1 = /*@__PURE__*/ proxyCustomElement(class XDatatableFilter extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.active = undefined;
        this.valid = undefined;
        this.label = undefined;
        this.type = 'number';
        this.condition = undefined;
        this.value = undefined;
        this.field = undefined;
        this.options = [];
    }
    /**
     * Element event on slot make changes
     */
    handleSlotChange() {
        this.computeChildFiltersItems();
    }
    /**
     * Element event on child items changed
     */
    handleChildsChange() {
        this.condition = '[]';
        this.value = this.options.filter(option => option.selected)
            .map(i => i.value)
            .join(',');
        this.checkIsValid();
    }
    /**
     * Element event on slot make changes
     */
    handleClearEvent() {
        var _a;
        (_a = this.el.querySelector('form')) === null || _a === void 0 ? void 0 : _a.reset();
        if (this.hasOptions()) {
            this.options.forEach(i => {
                i.selected = false;
            });
        }
        this.active = false;
        this.value = null;
        this.condition = null;
        this.checkIsValid();
    }
    /**
     * Update the child filters and render the result
     */
    computeChildFiltersItems() {
        this.options = Array.from(this.el.children)
            .filter(tab => tab.nodeName.toLowerCase() === 'x-datatable-filter-item')
            .map(item => item);
        if (this.options.length > 0) {
            this.type = 'array';
        }
    }
    /**
     * On element will mounted
     */
    componentWillLoad() {
        this.computeChildFiltersItems();
    }
    /**
     * Filter has options
     */
    hasOptions() {
        return this.options.length > 0;
    }
    /**
     * The condition is ranged
     */
    isRanged() {
        return ['~', '><'].includes(this.condition);
    }
    /**
     * Get the first value of ranged data
     */
    getFirstRangedValue() {
        var _a, _b;
        const value = (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.split(',')) !== null && _b !== void 0 ? _b : [];
        return value.length > 0 ? value[0] : null;
    }
    /**
     * Get the last value of ranged data
     */
    getLastRangedValue() {
        var _a, _b;
        const value = (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.split(',')) !== null && _b !== void 0 ? _b : [];
        return value.length > 1 ? value[1] : null;
    }
    /**
     * Verify is condition and value is valid
     */
    checkIsValid() {
        this.valid = !isEmpty(this.value) && !isEmpty(this.condition);
    }
    /**
     * On operator selection change
     */
    onOperatorChange(e) {
        const value = e.target.value;
        this.condition = isEmpty(value) ? null : value;
        this.checkIsValid();
    }
    /**
     * On input value change
     */
    onValueInput(e) {
        var _a, _b, _c;
        if (this.isRanged() && this.type != 'date') {
            const fromInput = this.el.querySelector('[data-from]');
            const toInput = this.el.querySelector('[data-to]');
            const from = (_a = fromInput.value) !== null && _a !== void 0 ? _a : null;
            const to = (_b = toInput.value) !== null && _b !== void 0 ? _b : null;
            this.value = !isEmpty(String(from)) && !isEmpty(String(to)) ? [from, to].join(',') : null;
        }
        else {
            const value = (_c = e.target.value) !== null && _c !== void 0 ? _c : null;
            this.value = !isEmpty(String(this.value)) ? value : null;
        }
        this.checkIsValid();
    }
    /**
     * Render element
     */
    render() {
        var _a, _b, _c;
        return h(Host, { key: '48326109625df7c5184f4a2870246e56ff2d63d7' }, h("x-collapse", { key: 'dd999e32432944e2c254d0a7e5107432a75dfdff' }, h("div", { key: 'e1151b23f8b2fd34a58265e518940bf941944bd9', slot: "header", class: cls('filter-header', { 'is-ready': this.valid }) }, h("h5", { key: '1a291439465b43a376ceffc64084e6f343e4963f' }, this.label), this.hasOptions() && h("p", { key: 'ee89e8201ed28bee56754e805920214ca5e24a90', class: "text-truncate" }, this.options
            .filter(option => option.selected)
            .map(i => i.innerText.trim())
            .join(', ')), !this.hasOptions() && this.condition && (this.isRanged() ?
            (h("p", null, (_a = this.getFirstRangedValue()) !== null && _a !== void 0 ? _a : '???', " ", this.condition, " ", (_b = this.getLastRangedValue()) !== null && _b !== void 0 ? _b : '???')) :
            (h("p", null, this.condition, " ", (_c = this.value) !== null && _c !== void 0 ? _c : '???')))), !this.hasOptions() && h("form", { key: '492992f539ca9b9f4f526b90a3da0bbf588de8a6' }, h("div", { key: 'a224ad41ae6451cd9bae988b27ca36ab64185288', class: "mb-2" }, h("x-select", { key: '22336f75d70b5d94cf532e1dac444df609a823a8', onChange: (e) => this.onOperatorChange(e), label: Lang.get('datatable.condition'), placeholder: Lang.get('datatable.select-condition') }, h("optgroup", { key: 'a6646386139daf79c43c77c7dc9466205ad36394', label: Lang.get('datatable.operator') }, this.type != 'text' && h("option", { key: '9d498d6858a733a9087181095a566eb9e81fa2aa', value: ">" }, Lang.get('datatable.gt')), this.type != 'text' && h("option", { key: 'de9cd1defd7863c2f94f9c1534a64fc6223a9ae9', value: ">=" }, Lang.get('datatable.egt')), this.type != 'text' && h("option", { key: '51549a6aee486e561dcd81f48226c23b17233548', value: "<" }, Lang.get('datatable.lt')), this.type != 'text' && h("option", { key: '738012bd47cc18fdcfdabcfc830d4fabed91ad15', value: "<=" }, Lang.get('datatable.elt')), h("option", { key: '0ed175d19d90c026149c4ce64c305d4c17e12384', value: "=" }, Lang.get('datatable.e')), h("option", { key: '12ac5626c5c573f8af4e296cdf7581010addfad5', value: "!=" }, Lang.get('datatable.ne')), this.type == 'text' && h("option", { key: 'f818b7c844d85000e4b946f752df438fe0deb215', value: "*" }, Lang.get('datatable.contains'))), this.type != 'text' && h("optgroup", { key: '78c6b7ad28ce709c3161ceee7c979a2da43f7a89', label: Lang.get('datatable.range') }, h("option", { key: 'a5d68c86334b79bbf5a92be7af6eae4a9fd06230', value: "~" }, Lang.get('datatable.btw')), h("option", { key: '5ab1d4db4f48d4366cb760fa74223d39e6f71c33', value: "><" }, Lang.get('datatable.nbtw'))))), h("div", { key: '37e7263ceec8ded986473ced2f3609e71c61ef3b', class: "mb-2 form-between" }, this.type == 'date' ?
            (h("x-datepicker", { label: Lang.get('datatable.date'), ranged: this.isRanged(), onInput: (e) => this.onValueInput(e) })) :
            h("x-input", { label: Lang.get(this.isRanged() ? 'datatable.from' : 'datatable.value'), "data-from": true, onInput: (e) => this.onValueInput(e) }), this.type != 'date' && this.isRanged() && h("b", { key: '87345b12a073eed29d8ce01b475d91a799f239f7', class: "mx-2" }, this.condition), this.type != 'date' && this.isRanged() && h("x-input", { key: 'b223d9d3a96017a8589491e600e65e664c4aea61', placeholder: Lang.get('datatable.to'), "data-to": true, onInput: (e) => this.onValueInput(e) }))), h("div", { key: 'dd85644bcba933dc1629c366521ceedffb560f18', class: cls({ 'mb-2': this.hasOptions() }) }, h("slot", { key: '069d6dce64dd8e8c0d7414937e9665b95c4bb123' }))));
    }
    get el() { return this; }
    static get style() { return XDatatableFilterStyle0; }
}, [4, "x-datatable-filter", {
        "active": [1540],
        "valid": [1540],
        "label": [1],
        "type": [1025],
        "condition": [1537],
        "value": [1537],
        "field": [1],
        "options": [32]
    }, [[0, "slotchange", "handleSlotChange"], [0, "changed", "handleChildsChange"], [0, "clear", "handleClearEvent"]]]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["x-datatable-filter", "x-animate", "x-button", "x-collapse", "x-datepicker", "x-icon", "x-input", "x-select", "x-tooltip"];
    components.forEach(tagName => { switch (tagName) {
        case "x-datatable-filter":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, XDatatableFilter$1);
            }
            break;
        case "x-animate":
            if (!customElements.get(tagName)) {
                defineCustomElement$9();
            }
            break;
        case "x-button":
            if (!customElements.get(tagName)) {
                defineCustomElement$8();
            }
            break;
        case "x-collapse":
            if (!customElements.get(tagName)) {
                defineCustomElement$7();
            }
            break;
        case "x-datepicker":
            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-select":
            if (!customElements.get(tagName)) {
                defineCustomElement$3();
            }
            break;
        case "x-tooltip":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
    } });
}

const XDatatableFilter = XDatatableFilter$1;
const defineCustomElement = defineCustomElement$1;

export { XDatatableFilter, defineCustomElement };
