import { r as registerInstance, d as createEvent, h, H as Host, c as getElement } from './core-34fac203.js';
import { d as datetimeFormatOptions, T as Tunnel } from './i18n.provider-31a85d1e.js';

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 {\n  bottom: -1px;\n  display: block;\n  margin-bottom: 0;\n  overflow: hidden;\n  position: relative;\n  -webkit-transition: height 0.4s ease, margin-bottom 0.4s ease;\n  transition: height 0.4s ease, margin-bottom 0.4s ease;\n}\n.sc-anj-column-filter-toggle-h anj-dropdown.sc-anj-column-filter-toggle {\n  width: 100%;\n}\n.sc-anj-column-filter-toggle-h .anj-column-filter-toggle.sc-anj-column-filter-toggle {\n  -ms-flex-align: center;\n  align-items: center;\n  background-color: transparent;\n  border-color: transparent;\n  border-radius: 0;\n  border-width: 0 0 1px;\n  color: var(--anj-neutral-dark);\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-pack: start;\n  justify-content: flex-start;\n  padding: 0 0 0.5rem;\n  position: relative;\n  text-align: inherit;\n  -webkit-transition: border-color 0.15s;\n  transition: border-color 0.15s;\n  -webkit-appearance: button;\n  width: 100%;\n}\n.sc-anj-column-filter-toggle-h .anj-column-filter-toggle.anj-filter-toggle-number.sc-anj-column-filter-toggle {\n  -ms-flex-pack: end;\n  justify-content: flex-end;\n}\n.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 {\n  border-color: var(--anj-highlight);\n  outline: none;\n}\n.sc-anj-column-filter-toggle-h .anj-column-filter-toggle.sc-anj-column-filter-toggle span.sc-anj-column-filter-toggle {\n  display: block;\n  max-width: 100%;\n  overflow: hidden;\n  padding-left: 0.25rem;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.sc-anj-column-filter-toggle-h .anj-column-filter-toggle.sc-anj-column-filter-toggle span.anj-has-value.sc-anj-column-filter-toggle {\n  color: var(--anj-text);\n}\n.sc-anj-column-filter-toggle-h anj-button-close.sc-anj-column-filter-toggle {\n  -webkit-transform: scale(0.75);\n  transform: scale(0.75);\n}"; }
};
Tunnel.injectProps(ColumnFilterToggle, ['dateFormatter', 'datetimeFormatter', 'numberFormatter', 'translator']);

export { ColumnFilterToggle as anj_column_filter_toggle };
