import { r as registerInstance, c as createEvent, h, g as getElement, H as Host } from './core-58de451e.js';
import { j as hasValue } from './utils-3aef1637.js';
import { T as Tunnel, d as datetimeFormatOptions } from './i18n.provider-f50e5e6a.js';

const BooleanFilterPanel = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.anjFilterChange = createEvent(this, "anjFilterChange", 7);
    }
    async reset() {
        this.element.querySelector('form').reset();
    }
    onSubmit(e) {
        e.preventDefault();
        const check = e.target.querySelector('input');
        this.anjFilterChange.emit({ field: this.field, type: 'equals', query: check.checked });
    }
    render() {
        return (h("form", { onSubmit: (e) => this.onSubmit(e) }, h("anj-checkbox-group", null, h("anj-checkbox", { name: "query" }, this.translator('Show only true'))), h("anj-button-group", { align: "right" }, h("anj-button", { context: "text", type: "submit" }, this.translator('Apply')))));
    }
    get element() { return getElement(this); }
    static get style() { return ".sc-anj-boolean-filter-panel-h{display:block;padding:1rem}.sc-anj-boolean-filter-panel-h anj-button-group.sc-anj-boolean-filter-panel{margin-bottom:0}"; }
};
Tunnel.injectProps(BooleanFilterPanel, ['translator']);

const FILTER_TYPE_MAP = {
    'contains': '><',
    'ends-with': '<',
    'starts-with': '>',
    'equals': '='
};
const ColumnFilterToggle = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.filterListener = (e) => this.onFilter(e);
        this.toggleListener = (e) => this.onToggle(e);
        this.formatters = {
            date: new Intl.DateTimeFormat('en-US').format,
            datetime: new Intl.DateTimeFormat('en-US', datetimeFormatOptions).format,
            number: new Intl.NumberFormat('en-US').format
        };
        this.active = false;
        this.anjFilter = createEvent(this, "anjFilter", 7);
    }
    injectedPropWatcher() {
        this.assignFormatters();
    }
    componentWillLoad() {
        this.table = this.element.closest('anj-table');
        this.table.addEventListener('anjColumnFilteringToggle', this.toggleListener);
        this.assignFormatters();
    }
    componentDidUnload() {
        this.table.removeEventListener('anjColumnFilteringToggle', this.toggleListener);
    }
    assignFormatters() {
        this.formatters.date = this.dateFormatter;
        this.formatters.datetime = this.datetimeFormatter;
        this.formatters.number = this.numberFormatter;
    }
    onToggle({ detail }) {
        this.active = detail;
    }
    async clearFilter(e) {
        e.preventDefault();
        e.stopPropagation();
        this.anjFilter.emit({ field: this.field, query: undefined, type: 'contains' });
        return this.panel.reset();
    }
    filterText() {
        const query = Array.isArray(this.filter.query) ?
            this.filter.query.map(this.formatValue.bind(this)).join(' - ') : this.formatValue(this.filter.query);
        return `${FILTER_TYPE_MAP[this.filter.type]} ${query}`;
    }
    bindPanel(el) {
        if (el) {
            el.addEventListener('anjFilterChange', this.filterListener);
        }
        else if (this.panel) {
            this.panel.removeEventListener('anjFilterChange', this.filterListener);
        }
        this.panel = el;
    }
    async onFilter({ detail }) {
        if (detail && (!this.filter || (detail.query !== this.filter.query || detail.type !== this.filter.type))) {
            this.anjFilter.emit(detail);
        }
        return this.dropdown.close();
    }
    formatValue(value) {
        return this.formatters[this.dataType] ? this.formatters[this.dataType](value) : value;
    }
    render() {
        const TagType = `anj-${this.dataType}-filter-panel`;
        const hostStyles = {
            height: this.active ? `${this.dropdown.offsetHeight}px` : '0',
            'margin-bottom': this.active ? '-0.657rem' : '0'
        };
        return (h(Host, { style: hostStyles, "aria-hidden": `${!this.active}` }, h("anj-dropdown", { ref: (r) => this.dropdown = r, arrow: false }, h("button", { class: `anj-column-filter-toggle anj-filter-toggle-${this.dataType}`, slot: "dropdown-toggle", tabIndex: this.active ? 0 : -1 }, this.filter ?
            [
                h("span", { class: "anj-has-value" }, this.filterText()),
                h("anj-button-close", { context: "clear", free: true, onClick: e => this.clearFilter(e) })
            ] :
            [
                h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 24 24" }, h("path", { fill: "currentColor", d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" })),
                h("span", null, this.translator('Filter'))
            ]), h(TagType, { types: this.types, filter: this.filter, field: this.field, ref: el => this.bindPanel(el) }))));
    }
    get element() { return getElement(this); }
    static get watchers() { return {
        "translator": ["injectedPropWatcher"],
        "dateFormatter": ["injectedPropWatcher"],
        "numberFormatter": ["injectedPropWatcher"]
    }; }
    static get style() { return ".sc-anj-column-filter-toggle-h{bottom:-1px;display:block;margin-bottom:0;overflow:hidden;position:relative;-webkit-transition:height .4s ease,margin-bottom .4s ease;transition:height .4s ease,margin-bottom .4s ease}.sc-anj-column-filter-toggle-h anj-dropdown.sc-anj-column-filter-toggle{width:100%}.sc-anj-column-filter-toggle-h .anj-column-filter-toggle.sc-anj-column-filter-toggle{-ms-flex-align:center;align-items:center;background-color:transparent;border-color:transparent;border-radius:0;border-width:0 0 1px;color:var(--anj-neutral-dark);display:-ms-flexbox;display:flex;-ms-flex-pack:start;justify-content:flex-start;padding:0 0 .5rem;position:relative;text-align:inherit;-webkit-transition:border-color .15s;transition:border-color .15s;-webkit-appearance:button;width:100%}.sc-anj-column-filter-toggle-h .anj-column-filter-toggle.anj-filter-toggle-number.sc-anj-column-filter-toggle{-ms-flex-pack:end;justify-content:flex-end}.sc-anj-column-filter-toggle-h .anj-column-filter-toggle.sc-anj-column-filter-toggle:focus, .sc-anj-column-filter-toggle-h .anj-column-filter-toggle[aria-expanded=true].sc-anj-column-filter-toggle{border-color:var(--anj-highlight);outline:none}.sc-anj-column-filter-toggle-h .anj-column-filter-toggle.sc-anj-column-filter-toggle span.sc-anj-column-filter-toggle{display:block;max-width:100%;overflow:hidden;padding-left:.25rem;text-overflow:ellipsis;white-space:nowrap}.sc-anj-column-filter-toggle-h .anj-column-filter-toggle.sc-anj-column-filter-toggle span.anj-has-value.sc-anj-column-filter-toggle{color:var(--anj-text)}.sc-anj-column-filter-toggle-h anj-button-close.sc-anj-column-filter-toggle{-webkit-transform:scale(.75);transform:scale(.75)}"; }
};
Tunnel.injectProps(ColumnFilterToggle, ['dateFormatter', 'datetimeFormatter', 'numberFormatter', 'translator']);

var Translations;
(function (Translations) {
    Translations["COLUMN_FILTERS"] = "Column Filters";
})(Translations || (Translations = {}));
const ColumnFiltering = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.active = false;
        this.anjColumnFilteringDidLoad = createEvent(this, "anjColumnFilteringDidLoad", 7);
        this.anjColumnFilteringToggle = createEvent(this, "anjColumnFilteringToggle", 7);
    }
    componentDidLoad() {
        this.anjColumnFilteringDidLoad.emit();
    }
    toggle() {
        this.active = !this.active;
        this.anjColumnFilteringToggle.emit(this.active);
    }
    render() {
        return (h("anj-button", { context: "icon", "aria-label": this.translator(Translations.COLUMN_FILTERS), active: this.active, onClick: () => this.toggle() }, h("svg", { slot: "icon-only", xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24" }, h("path", { "fill-rule": "evenodd", d: "M15.0013226,19.88 C15.0413226,20.18 14.9413226,20.5 14.7113226,20.71 C14.3213226,21.1 13.6913226,21.1 13.3013226,20.71 L9.29132255,16.7 C9.06132255,16.47 8.96132255,16.16 9.00132255,15.87 L9.00132255,10.75 L4.21132255,4.62 C3.87132255,4.19 3.95132255,3.56 4.38132255,3.22 C4.57132255,3.08 4.78132255,3 5.00132255,3 L5.00132255,3 L19.0013226,3 L19.0013226,3 C19.2213226,3 19.4313226,3.08 19.6213226,3.22 C20.0513226,3.56 20.1313226,4.19 19.7913226,4.62 L15.0013226,10.75 L15.0013226,19.88 L15.0013226,19.88 Z M7.04132255,5 L11.0013226,10.06 L11.0013226,15.58 L13.0013226,17.58 L13.0013226,10.05 L16.9613226,5 L7.04132255,5 Z" }))));
    }
};
Tunnel.injectProps(ColumnFiltering, ['translator']);

const DateFilterPanel = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.anjFilterChange = createEvent(this, "anjFilterChange", 7);
    }
    onChange({ detail, target }) {
        const input = target;
        this[input.name] = detail.innerValue;
    }
    async reset() {
        this.element.querySelector('form').reset();
        this.max = undefined;
        this.min = undefined;
    }
    onSubmit(e) {
        e.preventDefault();
        const valid = e.target.checkValidity();
        if (!valid)
            return;
        const filter = { field: this.field };
        let query;
        let type;
        if (this.min && this.max) {
            type = 'contains';
            query = [new Date(this.min), new Date(this.max)];
        }
        else if (this.min) {
            type = 'starts-with';
            query = new Date(this.min);
        }
        else {
            type = 'ends-with';
            query = new Date(this.max);
        }
        if (query) {
            filter.type = type;
            filter.query = query;
            this.anjFilterChange.emit(filter);
        }
    }
    render() {
        return (h("form", { onSubmit: (e) => this.onSubmit(e), novalidate: true }, this.types.includes('starts-with') || this.types.includes('contains') ?
            h("anj-form-group", null, h("anj-label", null, this.translator('Start Date')), h("anj-input", { name: "min", max: this.max }, h("anj-date-picker-toggle", null), h("anj-date-picker", null))) : undefined, this.types.includes('ends-with') || this.types.includes('contains') ?
            h("anj-form-group", null, h("anj-label", null, this.translator('End Date')), h("anj-input", { name: "max", min: this.min }, h("anj-date-picker-toggle", null), h("anj-date-picker", null))) : undefined, h("anj-button-group", { align: "right" }, h("anj-button", { context: "text", type: "submit" }, this.translator('Apply')))));
    }
    get element() { return getElement(this); }
    static get style() { return ".sc-anj-date-filter-panel-h{display:block;padding:1rem}.sc-anj-date-filter-panel-h anj-button-group.sc-anj-date-filter-panel{margin-bottom:0}"; }
};
Tunnel.injectProps(DateFilterPanel, ['translator']);

const DatetimeFilterPanel = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.anjFilterChange = createEvent(this, "anjFilterChange", 7);
    }
    async reset() {
        this.element.querySelector('form').reset();
        this.max = undefined;
        this.min = undefined;
    }
    handleChanges({ detail, target }) {
        const input = target;
        this[input.name] = detail.value;
    }
    onSubmit(e) {
        e.preventDefault();
        const valid = e.target.checkValidity();
        if (!valid)
            return;
        const filter = { field: this.field };
        let query;
        let type;
        if (this.min && this.max) {
            type = 'contains';
            query = [new Date(this.min), new Date(this.max)];
        }
        else if (this.min) {
            type = 'starts-with';
            query = new Date(this.min);
        }
        else if (this.max) {
            type = 'ends-with';
            query = new Date(this.max);
        }
        else {
            this.anjFilterChange.emit(undefined);
        }
        if (query) {
            filter.type = type;
            filter.query = query;
            this.anjFilterChange.emit(filter);
        }
    }
    render() {
        return (h("form", { onSubmit: (e) => this.onSubmit(e), novalidate: true }, this.types.includes('starts-with') || this.types.includes('contains') ?
            h("anj-form-group", null, h("anj-label", null, this.translator('Start Date')), h("anj-input", { name: "min", max: this.max, onAnjChange: e => this.handleChanges(e) }, h("anj-datetime-picker-toggle", null), h("anj-datetime-picker", { nested: true }))) : undefined, this.types.includes('ends-with') || this.types.includes('contains') ?
            h("anj-form-group", null, h("anj-label", null, this.translator('End Date')), h("anj-input", { name: "max", min: this.min, onAnjChange: e => this.handleChanges(e) }, h("anj-datetime-picker-toggle", null), h("anj-datetime-picker", { nested: true }))) : undefined, h("anj-button-group", { align: "right" }, h("anj-button", { context: "text", type: "submit" }, this.translator('Apply')))));
    }
    get element() { return getElement(this); }
    static get style() { return ".sc-anj-datetime-filter-panel-h{display:block;padding:1rem}.sc-anj-datetime-filter-panel-h anj-button-group.sc-anj-datetime-filter-panel{margin-bottom:0}"; }
};
Tunnel.injectProps(DatetimeFilterPanel, ['translator']);

const NumberFilterPanel = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.anjFilterChange = createEvent(this, "anjFilterChange", 7);
    }
    onChange({ detail, target }) {
        const el = target;
        this[el.name] = detail.checked ? detail.checked : detail.value;
    }
    async reset() {
        this.element.querySelector('form').reset();
        this.max = undefined;
        this.min = undefined;
    }
    onSubmit(e) {
        e.preventDefault();
        const filter = { field: this.field };
        const valid = e.target.checkValidity();
        if (!valid)
            return;
        let query;
        let type;
        if (hasValue(this.min) && hasValue(this.max)) {
            type = 'contains';
            query = [parseInt(this.min, 10), parseInt(this.max, 10)];
        }
        else if (hasValue(this.min)) {
            type = 'starts-with';
            query = parseInt(this.min, 10);
        }
        else {
            type = 'ends-with';
            query = parseInt(this.max, 10);
        }
        if (hasValue(query)) {
            filter.type = type;
            filter.query = query;
            this.anjFilterChange.emit(filter);
        }
    }
    render() {
        return (h("form", { onSubmit: (e) => this.onSubmit(e), novalidate: true }, this.types.includes('starts-with') || this.types.includes('contains') ?
            h("anj-form-group", null, h("anj-label", null, this.translator('Min')), h("anj-input", { name: "min", type: "number", max: this.max, value: this.min })) : undefined, this.types.includes('ends-with') || this.types.includes('contains') ?
            h("anj-form-group", null, h("anj-label", null, this.translator('Max')), h("anj-input", { name: "max", type: "number", min: this.min, value: this.max })) : undefined, h("anj-button-group", { align: "right" }, h("anj-button", { context: "text", type: "submit" }, this.translator('Apply')))));
    }
    get element() { return getElement(this); }
    static get style() { return ".sc-anj-number-filter-panel-h{display:block;padding:1rem}.sc-anj-number-filter-panel-h anj-button-group.sc-anj-number-filter-panel{margin-bottom:0}"; }
};
Tunnel.injectProps(NumberFilterPanel, ['translator']);

var FilterTypeLabels;
(function (FilterTypeLabels) {
    FilterTypeLabels["contains"] = "Contains";
    FilterTypeLabels["ends-with"] = "Ends With";
    FilterTypeLabels["equals"] = "Equals";
    FilterTypeLabels["starts-with"] = "Starts With";
})(FilterTypeLabels || (FilterTypeLabels = {}));
const StringFilterPanel = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.anjFilterChange = createEvent(this, "anjFilterChange", 7);
    }
    async reset() {
        this.element.querySelector('form').reset();
    }
    componentWillLoad() {
        this.type = this.filter ? this.filter.type : this.types[0] || 'contains';
    }
    onSubmit(e) {
        e.preventDefault();
        const filter = {};
        Array.from(e.target.querySelectorAll('input')).forEach((i) => {
            filter[i.name] = i.value.trim() !== '' ? i.value.trim() : undefined;
        });
        filter.type = this.type;
        this.anjFilterChange.emit(filter);
    }
    render() {
        return (h("form", { onSubmit: (e) => this.onSubmit(e) }, h("input", { type: "hidden", name: "field", value: this.field }), this.types.length > 1 ?
            h("anj-form-group", null, h("anj-label", null, this.translator('Type')), h("anj-select", { name: "type", value: this.type, onAnjChange: e => this.type = e.detail.value }, this.types.map(t => h("anj-option", { value: t }, this.translator(FilterTypeLabels[t])))))
            : undefined, h("anj-form-group", null, h("anj-label", null, this.translator('Filter')), h("anj-input", { name: "query" })), h("anj-button-group", { align: "right" }, h("anj-button", { context: "text", type: "submit" }, this.translator('Apply')))));
    }
    get element() { return getElement(this); }
    static get style() { return ".sc-anj-string-filter-panel-h{display:block;padding:1rem}.sc-anj-string-filter-panel-h anj-button-group.sc-anj-string-filter-panel{margin-bottom:0}"; }
};
Tunnel.injectProps(StringFilterPanel, ['translator']);

export { BooleanFilterPanel as anj_boolean_filter_panel, ColumnFilterToggle as anj_column_filter_toggle, ColumnFiltering as anj_column_filtering, DateFilterPanel as anj_date_filter_panel, DatetimeFilterPanel as anj_datetime_filter_panel, NumberFilterPanel as anj_number_filter_panel, StringFilterPanel as anj_string_filter_panel };
