'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const core = require('./core-7e2b0104.js');
const drop_controller = require('./drop.controller-ebab46a4.js');
const utils = require('./utils-2a7c8f6e.js');
const table_utils = require('./table.utils-12a2d306.js');
const column_renderer = require('./column.renderer-2366bd3b.js');
const row = require('./row-59d80729.js');
const i18n_provider = require('./i18n.provider-b7733c9d.js');

const Action = class {
    constructor(hostRef) {
        core.registerInstance(this, hostRef);
        this.anjActionChange = core.createEvent(this, "anjActionChange", 7);
    }
    onChange() {
        this.anjActionChange.emit();
    }
    componentDidLoad() {
        this.anjActionChange = utils.debounceEvent(this.anjActionChange, 0);
    }
    static get watchers() { return {
        "disabled": ["onChange"],
        "hidden": ["onChange"],
        "icon": ["onChange"],
        "payload": ["onChange"]
    }; }
};

var Translations;
(function (Translations) {
    Translations["MORE_ROW_ACTIONS"] = "More row actions";
    Translations["MORE_TABLE_ACTIONS"] = "More table actions";
})(Translations || (Translations = {}));
const Actions = class {
    constructor(hostRef) {
        core.registerInstance(this, hostRef);
        /**
         * The number of actions between 0 - 3 to be displayed as "primary" actions at the row level. That is not in the dropdown.
         */
        this.maxPrimaryRow = 0;
        /**
         * The number of actions between 0 - 3 to be displayed as "primary" actions at the table level. That is not in the dropdown.
         */
        this.maxPrimaryTable = 0;
        this.anjActionSelect = core.createEvent(this, "anjActionSelect", 7);
    }
    onContentChange() {
        this.actions = Array.from(this.element.querySelectorAll('anj-action'));
    }
    componentDidLoad() {
        this.onContentChange = utils.debounce(this.onContentChange.bind(this));
    }
    onSelected(action, row) {
        this.anjActionSelect.emit({ action, row });
    }
    getActions() {
        const actions = this.actions || Array.from(this.element.querySelectorAll('anj-action'));
        return [normalizeActions(actions.filter(a => !!a.scope)), normalizeActions(actions.filter(a => !a.scope))];
    }
    calculateOffset(primary, secondary) {
        // if there are no primary actions, just account for the dropdown
        if (!primary || primary.length === 0) {
            return 1;
        }
        // if there's overflow account for primary actions and the dropdown
        if (secondary && secondary.length > 0) {
            const max = primary.length < this.maxPrimaryRow ? primary.length : this.maxPrimaryRow;
            return max + 1;
        }
        // otherwise account for just the primary actions
        return primary.length;
    }
    tableActions(actions) {
        const [primary, secondary] = groupActions(actions, this.maxPrimaryTable);
        return [
            primary ? this.primaryActions(primary) : undefined,
            secondary ? this.secondaryActions(secondary) : undefined
        ];
    }
    rowActions(actions) {
        const [primary, secondary] = groupActions(actions, this.maxPrimaryRow);
        const offset = this.calculateOffset(primary, secondary);
        return core.h("anj-column", { filterable: false, internal: true, editable: false, pinned: "right", sizable: false, name: "row-actions", overflow: "cell", selectable: false, width: `${offset * 40 + (offset * 2 - 1)}px`, cellRenderer: (data, col) => this.cell(primary, secondary, data, col), headerRenderer: () => undefined });
    }
    cell(primary, secondary, data, col) {
        if (!col) {
            return;
        }
        return [
            primary ? this.primaryActions(primary, data) : undefined,
            secondary ? this.secondaryActions(secondary, data) : undefined
        ];
    }
    primaryActions(actions, data) {
        return actions.filter(a => isHidden(a, data)).map(a => core.h("anj-button", { key: `${a.icon}-${a.scope}`, context: "icon", ariaLabel: a.caption, onClick: () => this.onSelected(a, data), disabled: actionDisabled(a, data), title: a.caption }, core.h("anj-icon", { slot: "icon-only" }, a.iconFn ? a.iconFn(a, data) : a.icon)));
    }
    secondaryActions(actions, data) {
        const caption = this.translator(data ? Translations.MORE_ROW_ACTIONS : Translations.MORE_TABLE_ACTIONS);
        return (core.h("anj-dropdown", { placement: data ? 'left-start' : 'bottom-end', arrow: !data, onAnjDropdownSelect: ({ detail }) => this.onSelected(detail, data) }, core.h("anj-button", { context: "icon", slot: "dropdown-toggle", ariaLabel: caption, title: caption }, core.h("svg", { slot: "icon-only", xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24" }, core.h("path", { d: "M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" }))), actions.filter(a => isHidden(a, data))
            .map(a => core.h("anj-dropdown-item", { payload: a, disabled: actionDisabled(a, data) }, a.caption))));
    }
    render() {
        const [tableActions, rowActions] = this.getActions();
        return [
            tableActions ? this.tableActions(tableActions) : undefined,
            rowActions ? this.rowActions(rowActions) : undefined
        ];
    }
    get element() { return core.getElement(this); }
    static get style() { return ".anj-table .anj-col-row-actions{padding-left:0;padding-right:0;text-align:right}.anj-table .anj-col-row-actions.anj-cell{z-index:1}anj-scroller:not(.anj-overflow-x) tbody tr .anj-col-row-actions anj-button{opacity:0;-webkit-transition:opacity .2s ease;transition:opacity .2s ease}anj-scroller:not(.anj-overflow-x) tbody tr .anj-col-row-actions anj-button:focus,anj-scroller:not(.anj-overflow-x) tbody tr .anj-col-row-actions anj-button[active]{opacity:1}anj-scroller:not(.anj-overflow-x) tbody tr:focus-within .anj-col-row-actions anj-button,anj-scroller:not(.anj-overflow-x) tbody tr:hover .anj-col-row-actions anj-button{opacity:1}"; }
};
i18n_provider.Tunnel.injectProps(Actions, ['translator']);
const actionDisabled = (action, row) => {
    return action.disabled ? action.disabled : action.disabledFn ? action.disabledFn(action, row) : false;
};
const normalizeActions = (actions) => {
    return actions.length === 0 ? undefined : actions;
};
const groupActions = (actions, max) => {
    const primary = actions.filter(a => !a.hidden && (a.icon || a.iconFn)).slice(0, max);
    const secondary = actions.filter(a => (!a.hidden && !primary.includes(a)));
    return [normalizeActions(primary), normalizeActions(secondary)];
};
const isHidden = (action, data) => {
    return (!data || !action.hiddenFn || action.hidden) ? true : !action.hiddenFn(action, data);
};

const Column = class {
    constructor(hostRef) {
        core.registerInstance(this, hostRef);
        /**
         * The type of data
         */
        this.dataType = 'string';
        /**
         * The default value to use for editing.
         * Can be a static value or a function fitting: (c: Column) => any;
         */
        this.defaultValue = '';
        /**
         * Is the column editable
         */
        this.editable = true;
        /**
         * Is the column filterable
         */
        this.filterable = true;
        /**
         * The types of filtering supported by the column, all other things being equal (ie. boolean data types will only ever filter "equal").
         * Default is: ['contains', 'ends-with', 'equals', 'starts-with'].
         * This can be constrained by passing an array with your chosen subset.
         */
        this.filterTypes = column_renderer.FILTER_TYPES;
        /**
         * The property that holds child items for grouping
         */
        this.groupKey = 'items';
        /**
         * Renderer of the column header
         */
        this.headerRenderer = column_renderer.ColumnRenderer.renderHeader;
        /**
         * Is the column defined by an internal component
         */
        this.internal = false;
        /**
         * Is the column pinnable
         */
        this.pinnable = true;
        /**
         * Is the column pinned
         * Possible values are: `"left"`, `"right"`, `null`.
         */
        this.pinned = null;
        /**
         * Is the column re-orderable by users
         */
        this.orderable = true;
        /**
         * Validation rules for editing.
         * See the anj-validation-rule docs.
         */
        this.rules = [];
        /**
         * Is the column selectable by users
         */
        this.selectable = true;
        /**
         * Is the column re-sizable by users
         */
        this.sizable = true;
        /**
         * Is the column sortable by users
         */
        this.sortable = true;
        /**
         * Width of the column default is auto
         */
        this.width = 'auto';
        /**
         * Is the column visible
         */
        this.visible = true;
    }
    injectedPropWatcher() {
        this.configEditRenderer();
    }
    componentWillLoad() {
        this.renderer = new column_renderer.ColumnRenderer(this.element);
        if (!this.name) {
            this.name = column_renderer.ColumnRenderer.generateColumnName(this.field, this.caption);
        }
        if (!this.cellRenderer) {
            this.cellRenderer = column_renderer.ColumnRenderer.renderCell;
        }
        this.configEditRenderer();
    }
    componentDidLoad() {
        this.table = this.element.closest('anj-table');
    }
    onOptionsLoaded({ target }) {
        this.options = target;
    }
    onValidationRuleLoaded({ target }) {
        this.rules.push(target);
    }
    async contextMenu() {
        return this.renderer.contextMenu();
    }
    async setOffset(offset) {
        return this.renderer.setOffset(offset);
    }
    async setWidth(width) {
        return this.renderer.setWidth(width);
    }
    async initCell(cell, offset) {
        return this.renderer.initCell(cell, offset);
    }
    configEditRenderer() {
        const isDefaultRenderer = this.editRenderer && this.editRenderer['isDefault'];
        if (isDefaultRenderer || !this.editRenderer) {
            this.editRenderer = column_renderer.ColumnRenderer.renderEdit.bind({ translator: this.translator });
            this.editRenderer['isDefault'] = true;
        }
    }
    get element() { return core.getElement(this); }
    static get watchers() { return {
        "translator": ["injectedPropWatcher"]
    }; }
};
i18n_provider.Tunnel.injectProps(Column, ['translator']);

const ColumnControl = class {
    constructor(hostRef) {
        core.registerInstance(this, hostRef);
        this.clickListener = (event) => this.onSort(event);
        this.keyListener = utils.enterAsClick(this.onSort.bind(this));
        this.dropListener = (e) => this.onDrop(e);
        this.resizing = false;
        this.anjReorder = core.createEvent(this, "anjReorder", 7);
        this.anjPin = core.createEvent(this, "anjPin", 7);
        this.anjSort = core.createEvent(this, "anjSort", 7);
    }
    async componentWillLoad() {
        this.table = this.column.table;
        this.parentEl = this.element.parentElement;
        this.parentEl.addEventListener('click', this.clickListener);
        this.parentEl.addEventListener('keyup', this.keyListener);
        this.parentEl.addEventListener('anjDrop', this.dropListener);
        if (this.table.orderable && this.column.orderable) {
            this.dragController = new drop_controller.DragController(this.parentEl, { currentIndex: this.columnIndex() });
            this.dropController = new drop_controller.DropController(this.parentEl);
            this.dragController.connect();
            this.dropController.connect();
        }
    }
    componentDidUnload() {
        if (this.dragController) {
            this.dragController.disconnect();
        }
        if (this.dragController) {
            this.dropController.disconnect();
        }
        this.parentEl.removeEventListener('click', this.clickListener);
        this.parentEl.removeEventListener('keyup', this.keyListener);
        this.parentEl.removeEventListener('anjDrop', this.dropListener);
    }
    onSort(event) {
        if (!this.field || this.resizing || !this.column.sortable || fromFilter(event)) {
            return;
        }
        this.anjSort.emit({ field: this.field, order: this.sortIndex > -1 && this.sortOrder === 'asc' ? 'desc' : 'asc' });
    }
    async onContextSelection({ detail }) {
        this.anjPin.emit({ index: this.columnIndex(), pin: detail });
    }
    onResizeStart() {
        this.resizing = true;
    }
    onResizeEnd() {
        this.resizing = false;
    }
    onDrop({ detail }) {
        detail['targetIndex'] = this.columnIndex();
        this.anjReorder.emit(detail);
    }
    columnIndex() {
        return parseInt(this.parentEl.dataset.columnIndex, 10);
    }
    render() {
        return [
            this.column.field && this.column.sortable ?
                core.h("svg", { class: "anj-sort-icon", xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 24 24" }, this.sortOrder === 'asc' ? [
                    core.h("path", { fill: "none", d: "M0 0h24v24H0V0z" }),
                    core.h("path", { fill: "currentColor", d: "M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z" })
                ] : [
                    core.h("path", { fill: "none", d: "M0 0h24v24H0V0z" }),
                    core.h("path", { fill: "currentColor", d: "M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z" })
                ]) : undefined,
            this.table.sizable && this.column.sizable ? core.h("anj-column-sizer", null) : undefined,
            core.h("anj-context-menu", { attach: this.parentEl, loader: () => this.column.contextMenu() })
        ];
    }
    get element() { return core.getElement(this); }
    static get style() { return "anj-table .anj-header-cell.anj-dragging,anj-table .anj-header-cell.anj-dragover{border-bottom-color:var(--anj-highlight)!important}anj-table .anj-header-cell.anj-dragging anj-column-sizer,anj-table .anj-header-cell.anj-dragover anj-column-sizer{display:none}anj-table .anj-header-cell.anj-dragging{opacity:.5}anj-table .anj-header-cell.anj-sorted .anj-sort-icon{opacity:1;-webkit-transition:opacity .3s ease;transition:opacity .3s ease}anj-column-control .anj-sort-icon{color:var(--anj-text-medium);display:inline-block;font-size:.625rem;font-weight:700;line-height:.8;opacity:0;position:relative;top:-4px;-webkit-transition:opacity 0s;transition:opacity 0s}"; }
};
const fromFilter = (event) => {
    if (!event)
        return false;
    return !!event.composedPath().find((e) => e.matches && e.matches('anj-column-filter-toggle'));
};

const MIN_CELL_WIDTH = 40;
const ColumnSizer = class {
    constructor(hostRef) {
        core.registerInstance(this, hostRef);
        this.resizeListener = ({ movementX }) => this.onResize(movementX);
        this.resizeEndListener = () => this.onResizeEnd();
        this.anjResizeStart = core.createEvent(this, "anjResizeStart", 7);
        this.anjResizeEnd = core.createEvent(this, "anjResizeEnd", 7);
    }
    componentDidLoad() {
        this.parentHeader = this.element.parentElement.parentElement;
        this.table = this.element.closest('table');
    }
    onMousedown(e) {
        e.preventDefault();
    }
    onMouseDown(e) {
        e.preventDefault();
        e.stopPropagation();
        this.column = this.findColumn(this.parentHeader);
        this.siblingHeader = this.findSiblingHeader(this.column);
        this.siblingColumn = this.findColumn(this.siblingHeader);
        this.width = this.parentHeader.offsetWidth;
        this.siblingWidth = this.siblingHeader.offsetWidth;
        this.setDisplayHeight(this.table.parentElement);
        this.anjResizeStart.emit();
        this.table.addEventListener('mousemove', this.resizeListener);
        this.table.addEventListener('mouseup', this.resizeEndListener);
    }
    onResizeEnd() {
        this.table.removeEventListener('mousemove', this.resizeListener);
        this.table.removeEventListener('mouseup', this.resizeEndListener);
        return new Promise(resolve => {
            window.setTimeout(() => {
                this.setDisplayHeight();
                this.anjResizeEnd.emit();
                resolve();
            });
        });
    }
    onResize(delta) {
        if (delta === 0) {
            return;
        }
        this.width = this.column.pinned === 'right' ? this.width - delta : this.width + delta;
        this.siblingWidth = this.column.pinned === 'right' ? this.siblingWidth + delta : this.siblingWidth - delta;
        if (this.width < MIN_CELL_WIDTH || this.siblingWidth < MIN_CELL_WIDTH) {
            return;
        }
        this.column.setWidth(`${this.width}px`);
        this.siblingColumn.setWidth(`${this.siblingWidth}px`);
        if (this.siblingColumn.pinned === this.column.pinned) {
            this.siblingColumn.setOffset(`${this.width}px`);
        }
    }
    findColumn(header) {
        return header.querySelector('anj-column-control').column;
    }
    findSiblingHeader(column) {
        return (column.pinned === 'right' ? this.parentHeader.previousSibling : this.parentHeader.nextSibling);
    }
    setDisplayHeight(ref) {
        this.element.style.height = ref ? `${ref.offsetHeight}px` : '100%';
    }
    get element() { return core.getElement(this); }
    static get style() { return "anj-column-sizer{background-color:var(--anj-border);cursor:col-resize;display:block;height:100%;position:absolute;right:0;opacity:0;top:0;-webkit-transition:opacity .3s ease;transition:opacity .3s ease;width:.25rem;z-index:3}anj-column-sizer:active{background-color:var(--anj-highlight);opacity:.5}anj-table .anj-header-cell:last-child:not(.anj-pinned-right) anj-column-sizer{display:none}anj-table .anj-header-cell:hover anj-column-sizer{opacity:.5}anj-table .anj-header-cell.anj-pinned-right anj-column-sizer{left:0;right:auto}anj-table .anj-header-cell.anj-pinned-right~.anj-pinned-right{right:0}"; }
};

const Lookup = class {
    constructor(hostRef) {
        core.registerInstance(this, hostRef);
        this.anjLookupDidLoad = core.createEvent(this, "anjLookupDidLoad", 7);
    }
    componentDidLoad() {
        this.anjLookupDidLoad.emit();
    }
};

const MAX_SHOWN_PAGES = 5;
const Pager = class {
    constructor(hostRef) {
        core.registerInstance(this, hostRef);
        this.pageCount = 1;
        /**
         * If true, the pager will allows users to jump to the first page and last page
         */
        this.firstLast = false;
        /**
         * If true, the pager will display the displayed record range and record total
         */
        this.info = false;
        /**
         * The current page
         */
        this.page = 1;
        /**
         * The number of results to show per page. Default is 20.
         */
        this.size = utils.PagerSizeOption.Medium;
        this.anjPagerDidLoad = core.createEvent(this, "anjPagerDidLoad", 7);
        this.anjPage = core.createEvent(this, "anjPage", 7);
    }
    onPageChange() {
        this.calculateRange();
    }
    onSizeChange() {
        this.calculatePageCount();
    }
    onTotalChange(newVal, oldVal) {
        this.calculatePageCount();
        if (isNaN(oldVal) || isNaN(newVal))
            return;
        if (newVal < oldVal && this.page > this.pageCount) {
            this.page = this.pageCount;
        }
    }
    componentDidLoad() {
        this.calculatePageCount();
        this.anjPagerDidLoad.emit();
    }
    onSizeSelect({ detail }) {
        const previous = this.page;
        this.page = 1;
        this.size = detail.value;
        this.emitChange(previous);
    }
    calculatePageCount() {
        this.pageCount = this.total ? Math.ceil(this.total / this.size) : 1;
        this.calculateRange();
    }
    calculateRange() {
        const base = this.size * this.page;
        const last = this.total && base > this.total ? base - this.size + (this.total % this.size) : base;
        const first = base - this.size;
        this.range = [first, last];
    }
    onPage(page) {
        const previous = this.page;
        if (page !== this.page && page > 0 && page <= this.pageCount) {
            this.page = page;
            this.emitChange(previous);
        }
    }
    emitChange(prev) {
        this.anjPage.emit({ page: this.page, rangeMin: this.range[0], rangeMax: this.range[1], size: this.size, total: this.total, previousPage: prev });
    }
    generateInfo() {
        const from = this.numberFormatter((this.total) ? this.range[0] + 1 : 0);
        const to = this.numberFormatter((this.total) ? this.range[1] : 0);
        const total = this.numberFormatter(this.total);
        return `${from} - ${to} | ${total}`;
    }
    generatePages() {
        const pages = [];
        let min = this.page - 2 > 0 ? this.page - 2 : 1;
        if (min + MAX_SHOWN_PAGES > this.pageCount + 1) {
            min = this.pageCount + 1 - MAX_SHOWN_PAGES;
        }
        for (let i = min > 0 ? min : 1; i < this.pageCount + 1; i++) {
            pages.push(i);
            if (pages.length === 5) {
                break;
            }
        }
        return pages;
    }
    showSizes() {
        return this.sizes && this.sizes.length > 0;
    }
    pageButtons(pages) {
        const prevDisabled = this.page === 1;
        const nextDisabled = this.page === this.pageCount;
        const buttons = [
            core.h("anj-button", { context: "text", disabled: prevDisabled, onClick: () => this.onPage(this.page - 1), "aria-label": "Previous" }, core.h("svg", { slot: "icon-only", xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24" }, core.h("path", { d: "M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" }))),
            pages.map(p => core.h("anj-button", { context: "text", class: "anj-page-number", disabled: p === this.page, active: p === this.page, onClick: () => this.onPage(p) }, this.numberFormatter(p))),
            core.h("anj-button", { context: "text", disabled: nextDisabled, onClick: () => this.onPage(this.page + 1), "aria-label": "Next" }, core.h("svg", { slot: "icon-only", xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24" }, core.h("path", { d: "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" })))
        ];
        if (this.firstLast) {
            buttons.unshift(core.h("anj-button", { context: "text", disabled: prevDisabled, onClick: () => this.onPage(1), "aria-label": "First" }, core.h("svg", { slot: "icon-only", xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24" }, core.h("path", { d: "M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6 6 6zM6 6h2v12H6z" }))));
            buttons.push(core.h("anj-button", { context: "text", disabled: nextDisabled, onClick: () => this.onPage(this.pageCount), "aria-label": "Last" }, core.h("svg", { slot: "icon-only", xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24" }, core.h("path", { d: "M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6-6-6zM16 6h2v12h-2z" }))));
        }
        return buttons;
    }
    render() {
        return (core.h(core.Host, { class: { 'anj-page-sizable': this.showSizes() } }, this.showSizes() ?
            core.h("div", { class: "anj-pager-group anj-page-sizer" }, core.h("anj-select", { value: this.size }, this.sizes.map(s => core.h("anj-option", { value: s }, s))), core.h("span", { class: "anj-page-text" }, "per page")) : undefined, core.h("div", { class: "anj-pager-group anj-page-buttons" }, this.info && this.range && this.total
            ? core.h("span", { class: "anj-pager-info" }, this.generateInfo())
            : undefined, this.pageButtons(this.generatePages()))));
    }
    get element() { return core.getElement(this); }
    static get watchers() { return {
        "page": ["onPageChange"],
        "size": ["onSizeChange"],
        "total": ["onTotalChange"]
    }; }
    static get style() { return ".sc-anj-pager-h{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-flow:column-reverse;flex-flow:column-reverse;-ms-flex-pack:end;justify-content:flex-end;margin-top:1rem;text-align:right}.sc-anj-pager-h .anj-pager-info.sc-anj-pager{border-right:1px solid transparent;color:var(--anj-neutral-dark);display:block;margin-bottom:.5rem;padding-right:.5rem}\@media (min-width:768px){.sc-anj-pager-h{-ms-flex-flow:row wrap;flex-flow:row wrap}.anj-page-sizable.sc-anj-pager-h{-ms-flex-pack:justify;justify-content:space-between}.anj-page-sizable.sc-anj-pager-h .anj-pager-group.sc-anj-pager:first-child{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%;text-align:left}.anj-page-sizable.sc-anj-pager-h .anj-pager-group.sc-anj-pager:last-child{-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.sc-anj-pager-h .anj-pager-info.sc-anj-pager{border-right:0;display:inline;margin:0 .5rem 0 0;padding-right:0}}.sc-anj-pager-h .anj-pager-group.sc-anj-pager{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.sc-anj-pager-h .anj-pager-group.sc-anj-pager anj-button.sc-anj-pager{margin:0}.sc-anj-pager-h .anj-pager-group.anj-page-sizer.sc-anj-pager{border-left:1px solid transparent;border-right:1px solid transparent;padding:0 .5rem}.sc-anj-pager-h .anj-pager-group.anj-page-buttons.sc-anj-pager{-webkit-transform:scale(.8335);transform:scale(.8335);-webkit-transform-origin:100% 0;transform-origin:100% 0}.sc-anj-pager-h .anj-page-text.sc-anj-pager{color:var(--anj-neutral);font-size:.75rem}.sc-anj-pager-h anj-select.sc-anj-pager{margin-right:.25rem;width:2.75rem}.sc-anj-pager-h anj-button.sc-anj-pager{margin:0}"; }
};
i18n_provider.Tunnel.injectProps(Pager, ['numberFormatter']);

const RenderCell = class {
    constructor(hostRef) {
        core.registerInstance(this, hostRef);
        /**
         * Renderer to use for cell content when the selected cell conditions are met
         * (row: RowData, field: ColumnDefinition, rowIndex?: number) => any;
         */
        this.cell = this.renderCell.bind(this);
        /**
         * Test function for when to use this renderer
         * (column: ColumnDefinition, rowIndex: number, columnIndex: number) => boolean;
         */
        this.when = () => true;
        this.anjCellControlDidLoad = core.createEvent(this, "anjCellControlDidLoad", 7);
    }
    componentDidLoad() {
        this.anjCellControlDidLoad.emit();
    }
    renderCell({ column, columnIndex, classList, offset, renderer, row, rowIndex }) {
        const attrs = column_renderer.ColumnRenderer.columnAttributes(column, columnIndex, row);
        const refFn = r => column.initCell(r, offset);
        if (this.template) {
            return core.h("td", Object.assign({}, attrs, { class: classList, ref: r => renderer.cellTemplate(r, offset, column, row, rowIndex, this.template) }));
        }
        else if (this.formatter) {
            return core.h("td", Object.assign({}, attrs, { class: classList, innerHTML: this.formatter(row, column, rowIndex), ref: refFn }));
        }
        else {
            return core.h("td", Object.assign({}, attrs, { class: classList, ref: refFn }), this.renderer(row, column, rowIndex));
        }
    }
};

const RenderRow = class {
    constructor(hostRef) {
        core.registerInstance(this, hostRef);
        /**
         * Renderer to use for cell content when the selected cell conditions are met
         */
        this.row = this.renderRow.bind(this);
        /**
         * Test function for when to use this renderer
         */
        this.when = () => true;
        this.anjRowControlDidLoad = core.createEvent(this, "anjRowControlDidLoad", 7);
    }
    componentDidLoad() {
        this.anjRowControlDidLoad.emit();
    }
    renderRow(props) {
        if (this.template) {
            return core.h("tr", { class: table_utils.TableClasses.row, ref: r => props.renderer.rowTemplate(this.template, r, props.row, props.rowIndex) });
        }
        else if (this.formatter) {
            return core.h("tr", { class: table_utils.TableClasses.row, innerHTML: this.formatter(props.row) });
        }
        else {
            return core.h("tr", { class: table_utils.TableClasses.row }, this.renderer(props.row));
        }
    }
};

const transitionKeys = ['top', 'right', 'bottom', 'left', 'width', 'height'];
class ResizeController {
    constructor(element, cb, wait) {
        this.element = element;
        this.cb = cb;
        this.supported = typeof ResizeObserver !== 'undefined';
        this.onTransitionEnd = this.onTransitionEnd.bind(this);
        if (utils.debounce) {
            this.cb = utils.debounce(this.cb, wait);
        }
    }
    connect() {
        if (this.supported) {
            this.resizeObserver = new ResizeObserver(() => {
                this.cb();
            });
            this.resizeObserver.observe(this.element);
        }
        else {
            window.addEventListener('resize', this.cb);
            document.addEventListener('transitionend', this.onTransitionEnd);
        }
    }
    disconnect() {
        if (!this.supported) {
            window.removeEventListener('resize', this.cb);
            document.removeEventListener('transitionend', this.onTransitionEnd);
        }
        if (this.resizeObserver) {
            this.resizeObserver.disconnect();
            this.resizeObserver = undefined;
        }
    }
    onDidRender() {
        if (!this.supported) {
            this.cb();
        }
    }
    onTransitionEnd({ propertyName }) {
        if (transitionKeys.includes(propertyName)) {
            this.cb();
        }
    }
}

const Scroller = class {
    constructor(hostRef) {
        core.registerInstance(this, hostRef);
        this.scrollListener = (e) => this.onScroll(e);
        this.overflowX = false;
        /**
         * Time to debounce programmatic scrolling
         */
        this.delay = 200;
        /**
         * Enables virtual scroll
         * Possible values are: `"vertical"`, and `"none"`. Default is "none"
         */
        this.mode = 'none';
        /**
         * The total (known) number of records
         */
        this.total = 1;
    }
    onTotalChange() {
        this.calculateHeight();
    }
    connectedCallback() {
        this.calculateHeight();
        this.resizer = new ResizeController(this.element, this.onResize.bind(this), 50);
        this.resizer.connect();
        if (this.mode !== 'none') {
            this.element.addEventListener('scroll', this.scrollListener);
        }
    }
    componentDidRender() {
        // Call resize on render
        this.resizer.onDidRender();
    }
    disconnectedCallback() {
        window.clearTimeout(this.scrollTimer);
        window.clearTimeout(this.resizeTimer);
        if (this.mode !== 'none') {
            this.element.removeEventListener('scroll', this.scrollListener);
        }
        this.resizer.disconnect();
        this.resizer = undefined;
    }
    onResize() {
        // TODO: make generic
        const table = this.element.querySelector('.anj-table');
        if (this.element.parentElement.offsetWidth) {
            this.width = this.element.parentElement.offsetWidth;
            this.overflowX = (table && table.offsetWidth > this.width);
        }
    }
    doResize() {
        window.clearTimeout(this.resizeTimer);
        return new Promise(resolve => {
            this.scrollTimer = window.setTimeout(() => {
                this.onResize();
                resolve();
            }, this.delay);
        });
    }
    debouncedScrollTo(x, y) {
        window.clearTimeout(this.scrollTimer);
        return new Promise(resolve => {
            this.scrollTimer = window.setTimeout(() => {
                if (x !== undefined) {
                    this.element.scrollLeft = x;
                }
                if (y !== undefined) {
                    this.element.scrollTop = y;
                }
                resolve();
            }, this.delay);
        });
    }
    calculateHeight() {
        if (this.mode === 'none') {
            return;
        }
        console.log(this.total);
        this.height = this.total * 49;
        this.calculateRange();
    }
    calculateRange() {
        this.range = [0, 10];
    }
    onScroll(e) {
        // try setting padding on scroll pane?
        console.log(e, this.scrollPane);
    }
    render() {
        const styles = {};
        if (this.height) {
            styles['height'] = `${this.height}px`;
        }
        return (core.h(core.Host, { class: { 'anj-overflow-x': this.overflowX } }, core.h("div", { class: "anj-scroll-container", style: styles, ref: r => this.scrollPane = r }, core.h("slot", null))));
    }
    get element() { return core.getElement(this); }
    static get watchers() { return {
        "total": ["onTotalChange"]
    }; }
    static get style() { return ".sc-anj-scroller-h{display:block;max-height:100%;overflow:auto;scroll-behavior:smooth}.sc-anj-scroller-h, .sc-anj-scroller-h .anj-scroll-container.sc-anj-scroller{background-color:inherit}"; }
};

const dataSourceWorker = () => {
    /* Start Worker */
    // only add the listener if we're in the worker context
    if (typeof window === 'undefined') {
        addEventListener('message', (event) => {
            if (!event)
                return;
            const [options, data] = event.data;
            // Funky Safari issue https://stackoverflow.com/questions/46913856/value-is-not-a-sequence-safari-exception
            self.postMessage(processData(data, options));
        }, false);
    }
    // Doubles as an exposed entry point to be used outside a web worker
    const processData = (data, options) => {
        let dataKey = 'data';
        if (options.filter) {
            dataKey = 'filtered';
            data.filtered = data.data.filter(d => filter(d, options.filter));
            data.total = data.filtered.length;
        }
        if (options.sort || options.group) {
            data[dataKey] = sortBy(data[dataKey], options.group ? options.group.concat(options.sort ? options.sort : []) : options.sort);
            if (dataKey === 'data') {
                data.total = data.data.length;
            }
        }
        if (options.group) {
            // TODO: someday we might need multi-level grouping
            data.filtered = group(data[dataKey], options.group[0], options.size);
            data.total = data.filtered.length;
        }
        return data;
    };
    const filter = (data, filters) => {
        let included = true;
        for (let i = 0; i < filters.length; i++) {
            // Global filter first which is just a basic string contains across the object
            if (!filters[i].key) {
                included = filterGlobal(data, filters[i].query.trim().toLowerCase());
            }
            else if (typeof filters[i].query === 'string') {
                included = filterByString(data[filters[i].key], filters[i].query.trim().toLowerCase(), filters[i].type);
            }
            else if (isNumberQuery(filters[i].query)) {
                included = filterByNumber(data[filters[i].key], filters[i].query, filters[i].type);
            }
            else {
                included = filterByDate(data[filters[i].key], filters[i].query, filters[i].type);
            }
            if (!included) {
                break;
            }
        }
        return included;
    };
    const filterGlobal = (data, query) => {
        let included = false;
        for (const prop in data) {
            if (data.hasOwnProperty(prop)) {
                included = filterByString(`${data[prop]}`, query);
                if (included) {
                    break;
                }
            }
        }
        return included;
    };
    const filterByString = (data, query, filterType) => {
        if (!data)
            return false;
        const value = data.toLowerCase();
        switch (filterType) {
            case 'equals':
                return value === query;
            case 'ends-with':
                return value.indexOf(query) === value.length - query.length;
            case 'starts-with':
                return value.indexOf(query) === 0;
            default:
                return value.includes(query);
        }
    };
    const filterByDate = (data, query, filterType) => {
        const value = coerceToDateValue(data);
        if (!value)
            return false;
        switch (filterType) {
            case 'contains':
                return value >= query[0].valueOf() && value <= query[1].valueOf();
            case 'ends-with':
                return value <= query.valueOf();
            case 'starts-with':
                return value >= query.valueOf();
            default:
                return value === query.valueOf();
        }
    };
    const filterByNumber = (value, query, filterType) => {
        if (!value)
            return false;
        switch (filterType) {
            case 'contains':
                return value >= query[0] && value <= query[1];
            case 'ends-with':
                return value <= query;
            case 'starts-with':
                return value >= query;
            default:
                return value === query;
        }
    };
    const coerceToDateValue = (value) => {
        // If there's no value or it is already a date, just kick it back
        if (!value)
            return undefined;
        if (typeof value.getMonth === 'function')
            return value.valueOf();
        const maybeDate = new Date(value);
        return maybeDate.valueOf();
    };
    const isNumberQuery = (query) => {
        const value = Array.isArray(query) ? query[0] : query;
        return typeof value === 'number';
    };
    const group = (data, groupOpts, size) => {
        const groups = [];
        const groupsByKey = {};
        let itemGroup;
        let isExpanded;
        data.forEach((d) => {
            if (!groupsByKey[d[groupOpts.key]]) {
                groupsByKey[d[groupOpts.key]] = [0];
                itemGroup = {};
                itemGroup[groupOpts.groupKey] = groupsByKey[d[groupOpts.key]];
                itemGroup[groupOpts.key] = d[groupOpts.key];
                isExpanded = groupExpanded(groupOpts, d);
                groups.push(itemGroup);
            }
            if (isExpanded && groups.length > 0 && groups.length % size === 0) {
                groups.push(itemGroup);
            }
            if (isExpanded) {
                groups.push(d);
                groupsByKey[d[groupOpts.key]][0] = groupsByKey[d[groupOpts.key]][0] + 1;
            }
        });
        return groups;
    };
    const groupExpanded = (groupOpts, data) => {
        if (!groupOpts.groupKeys)
            return groupOpts.autoExpand;
        return groupOpts.autoExpand ? !groupOpts.groupKeys.includes(data[groupOpts.key]) : groupOpts.groupKeys.includes(data[groupOpts.key]);
    };
    const sortBy = (data, sorts) => {
        return data.sort((a, b) => compare(a, b, sorts));
    };
    const compare = (a, b, sorts) => {
        let value = 0;
        for (let i = 0; i < sorts.length; i++) {
            const aVal = a[sorts[i].key];
            const bVal = b[sorts[i].key];
            value = typeof aVal === 'string' ? aVal.localeCompare(bVal) : aVal - bVal;
            if (value !== 0) {
                if (sorts[i].order === 'desc') {
                    value = value * -1;
                }
                break;
            }
        }
        return value;
    };
    /* End Worker */
    // Return the entry function to be used outside the worker
    return { 'publicApi': processData };
};

const loadInlineWorker = (workerFn) => {
    const blob = new Blob([parseWorker(workerFn.toString())]);
    const blobURL = window.URL.createObjectURL(blob);
    return new Worker(blobURL);
};
const parseWorker = (workerString) => {
    const worker = workerString.split('{').slice(1).join('{');
    const split = worker.split('return');
    return worker.split('return').slice(0, split.length - 1).join('return');
};

class BaseDataSource {
    constructor(data) {
        this.data = data;
    }
    /**
     * Editing
     */
    async patch(options) {
        for (const action in options.patch) {
            if (options.patch.hasOwnProperty(action)) {
                options.patch[action].forEach(data => this[action](data, options));
            }
        }
        return (options.patch.create || options.patch.update) ? this.sort(options) : this.paginate(options);
    }
    create(data) {
        this.data.unshift(data);
    }
    delete(data) {
        this.data = this.data.filter(d => d !== data);
    }
    update(data, options) {
        const index = this.data.findIndex(d => d[options.key] === data[options.key]);
        this.data[index] = data;
    }
}

class LocalDataSource extends BaseDataSource {
    constructor(source) {
        super(Array.isArray(source) ? source : undefined);
        this.remoteOperations = {};
        if (!Array.isArray(source)) {
            Object.assign(this, source);
            this.load = source.load;
        }
    }
    /**
     * Entry point to getting data
     */
    async fetchData(options) {
        return this.paginate(options, this.sort(options, this.load(options)));
    }
    /**
     * Loads data locally by default. Can be overridden by user configuration to load data from a remote source
     */
    async load(options) {
        if (!options) {
            return;
        }
        return this.localLoad(options);
    }
    /**
     * Paginate the complete data set
     */
    async paginate(options, data) {
        if (!data && (this.remoteOperations.paging)) {
            return this.fetchData(options);
        }
        let loaded = await data || await this.localLoad();
        if (loaded.data) {
            this.data = loaded.data;
        }
        if (loaded.filtered) {
            this.filtered = loaded.filtered;
            loaded = { data: loaded.filtered, total: loaded.total };
        }
        if (!options.range || this.remoteOperations.paging) {
            return loaded;
        }
        return {
            data: loaded.data.slice(options.range[0], options.range[0] + options.size),
            total: loaded.total
        };
    }
    /**
     * Sorting and filtering of a master set
     */
    async sort(options, data) {
        if (!data && this.remoteOperations.sorting) {
            return this.fetchData(options);
        }
        if (data) {
            return (!this.remoteOperations.sorting && (options.sort || options.filter || options.group)) ? this.asyncSort(options, data) : data;
        }
        return this.paginate(options, this.asyncSort(options, this.localLoad(options)));
    }
    async asyncSort(options, data) {
        const loaded = await data;
        return new Promise(resolve => {
            this.worker = this.connect(resolve);
            // TODO diff old vs new options so we don't do things we don't have to
            return this.delayStart([options, loaded]);
        });
    }
    // Load may get overwritten by custom data sources, so keep this here
    async localLoad(options) {
        return {
            data: options ? this.data : undefined,
            filtered: !options && this.filtered ? this.filtered : this.data,
            total: !options && this.filtered ? this.filtered.length : this.data.length
        };
    }
    async delayStart(message) {
        return new Promise(resolve => {
            window.setTimeout(() => {
                this.worker.postMessage(message);
                resolve();
            });
        });
    }
    connect(resolve) {
        const worker = loadInlineWorker(dataSourceWorker);
        worker.onmessage = (event) => {
            resolve(event.data);
            this.disconnect();
        };
        return worker;
    }
    disconnect() {
        if (this.worker) {
            this.worker.terminate();
            this.worker = undefined;
        }
    }
}

class SimpleDataSource extends BaseDataSource {
    constructor(data) {
        super(data);
        this.processor = dataSourceWorker().publicApi;
    }
    /**
     * Entry point to getting data
     */
    async fetchData(options) {
        return this.paginate(options, this.sort(options, this.load(options)));
    }
    /**
     * Fits the data source API
     */
    async load(options) {
        return {
            data: this.data,
            filtered: !options && this.filtered ? this.filtered : this.data,
            total: !options && this.filtered ? this.filtered.length : this.data.length
        };
    }
    /**
     * Paginate the complete data set
     */
    async paginate(options, data) {
        let loaded = await data || await this.load(options);
        if (loaded.data) {
            this.data = loaded.data;
        }
        if (loaded.filtered) {
            this.filtered = loaded.filtered;
            loaded = { data: loaded.filtered, total: loaded.total };
        }
        if (!options.range) {
            return loaded;
        }
        return {
            data: loaded.data.slice(options.range[0], options.range[0] + options.size),
            total: loaded.total
        };
    }
    async sort(options, data) {
        if (data) {
            return (options.sort || options.filter || options.group) ? this.processData(options, data) : data;
        }
        return this.paginate(options, this.processData(options, this.load(options)));
    }
    async processData(options, waiting) {
        const data = await waiting;
        return this.processor(data, options);
    }
}

class NativeRenderer {
    cellTemplate(cell, offset, col, row, rowIndex, template) {
        if (!cell || rowIndex === undefined) {
            return;
        }
        this.fromTemplate(template, cell, row, rowIndex);
        col.initCell(cell, offset);
    }
    // No different in vanilla/native, but there is in Angular
    rowTemplate(template, targetEl, row, rowIndex) {
        return this.fromTemplate(template, targetEl, row, rowIndex);
    }
    fromTemplate(template, targetEl, row, rowIndex) {
        if (!template || !targetEl || rowIndex === undefined) {
            return;
        }
        targetEl.innerHTML = fromTemplate(template, row);
    }
}
const fromTemplate = (template, row) => {
    const parts = template.split(/\${(.*?)}/g);
    return parts.reduce((total = '', part) => {
        part = template.includes('\${' + part + '}') ? getValue(row, part.replace('row.', '')) : part;
        return total + part;
    });
};
const getValue = (obj, keys) => {
    const parts = Array.isArray(keys) ? keys : keys.split('.');
    return keys.length === 0 ? obj : getValue(obj[parts[0]], parts.slice(1));
};

class MetaColumn {
    constructor(table, config = {}, translator) {
        this.table = table;
        this.translator = translator;
        this.cellRenderer = column_renderer.ColumnRenderer.renderCell;
        this.dataType = 'string';
        this.defaultValue = '';
        this.editable = true;
        this.filterable = true;
        this.filterTypes = column_renderer.FILTER_TYPES;
        this.groupKey = 'items';
        this.headerRenderer = column_renderer.ColumnRenderer.renderHeader;
        this.internal = false;
        this.pinnable = true;
        this.pinned = null;
        this.orderable = true;
        this.rules = [];
        this.selectable = true;
        this.sizable = true;
        this.sortable = true;
        this.width = 'auto';
        this.visible = true;
        this.renderer = new column_renderer.ColumnRenderer(this);
        if (typeof config === 'string') {
            this.field = config;
        }
        else {
            Object.assign(this, config);
        }
        if (!this.name) {
            this.name = column_renderer.ColumnRenderer.generateColumnName(this.field, this.caption);
        }
        if (!this.editRenderer) {
            this.editRenderer = column_renderer.ColumnRenderer.renderEdit.bind({ translator: this.translator });
        }
    }
    async contextMenu() {
        return this.renderer.contextMenu();
    }
    async setOffset(offset) {
        return this.renderer.setOffset(offset);
    }
    async setWidth(width) {
        return this.renderer.setWidth(width);
    }
    async initCell(cell, offset) {
        if (this.pinned && !offset && !cell.parentElement) {
            await this.onAttached(cell);
        }
        return this.renderer.initCell(cell, offset);
    }
    /**
     * This little bit of hell fixes https://git.zias.io/ui-foundation/anjuna/issues/738.
     * For some reason, meta columns (and only meta columns, no idea why) consistently get passed to the initCell method before they've attached to the DOM.
     * This breaks the logic for calculating the offset of pinned columns on first render.
     * So what this does is waits for it to attach, and then next time around resolves.
     * If it resolves as soon as it attaches, it doesn't break, but the alignment can be off.
     * I am not proud of this. A more stable fix would probably be to move this into the table after render,
     * but because I don't understand why this isn't a problem for declarative columns, it seems better to bastardize it here for now. -r
     */
    async onAttached(cell) {
        return new Promise(resolve => {
            let attached = false;
            const waiter = window.setInterval(() => {
                if (attached) {
                    window.clearInterval(waiter);
                    resolve();
                }
                else if (cell.parentElement) {
                    attached = true;
                }
            }, 20);
        });
    }
}

const Colgroup = ({ columns }) => (core.h("colgroup", null, columns.map((col) => core.h("col", { class: column_renderer.ColumnRenderer.classFromColumnName(col.name), span: col.span }))));

const Tbody = (props, children) => (core.h("tbody", { class: props.classList }, children));

var Translations$1;
(function (Translations) {
    Translations["SORT_ASC"] = "Press enter to sort column ascending";
    Translations["SORT_DESC"] = "Press enter to sort column descending";
})(Translations$1 || (Translations$1 = {}));
const Th = ({ classList, column, columnIndex, filtering, offset, translator }) => {
    const attrs = column.span ? { colspan: column.span } : {};
    const label = (column.sortOrder === undefined || column.sortOrder === 'asc')
        ? translator(Translations$1.SORT_DESC)
        : translator(Translations$1.SORT_ASC);
    const ariaLabel = column.sortable
        ? label
        : undefined;
    return (core.h("th", Object.assign({}, attrs, { class: classList, tabIndex: column.sortable ? 0 : -1, "aria-label": `${column.caption || column.field}: ${ariaLabel}`, "data-column-index": columnIndex, ref: r => column.initCell(r, offset) }),
        column.dataType === 'number'
            ? core.h("anj-column-control", { column: column, field: column.field, sortIndex: column.sortIndex, sortOrder: column.sortOrder, pinned: column.pinned })
            : undefined,
        column.headerFormatter
            ? core.h("span", { class: table_utils.TableClasses.caption, innerHTML: column.headerFormatter(column.field, column.caption) })
            : core.h("span", { class: table_utils.TableClasses.caption }, column.headerRenderer(column.field, column.caption)),
        column.dataType !== 'number'
            ? core.h("anj-column-control", { column: column, field: column.field, sortIndex: column.sortIndex, sortOrder: column.sortOrder, pinned: column.pinned })
            : undefined,
        filtering && column.filterable ?
            core.h("anj-column-filter-toggle", { types: column.filterTypes, filter: column.filter, field: column.field, dataType: column.dataType }) : undefined));
};

const Thead = ({ columns, filtering, offsets, pinBoundaries, translator }) => (core.h("thead", { class: table_utils.TableClasses.header },
    core.h("tr", { class: table_utils.TableClasses.row }, columns.map((col, index) => {
        const classList = utils.concatClasses(column_renderer.ColumnRenderer.columnHeaderClasses(col), column_renderer.ColumnRenderer.pinnedBorderClass(index, pinBoundaries));
        return core.h(Th, { classList: classList, column: col, columnIndex: index, filtering: filtering, offset: offsets[index], translator: translator });
    }))));

const DefaultCellRenderer = {
    when: () => true,
    cell: (props) => core.h(row.Td, Object.assign({}, props))
};

const DefaultRowRenderer = {
    when: () => true,
    row: (props) => core.h(row.Row, Object.assign({}, props))
};

let tableId = 0;
const Table = class {
    constructor(hostRef) {
        core.registerInstance(this, hostRef);
        this.cellMouseOverListener = (e) => this.highlightColumn(e);
        this.cellMouseOutListener = (e) => this.clearColumnHighlight(e);
        this.cellRenderers = [DefaultCellRenderer];
        this.id = `anj-table-${tableId++}`;
        this.inited = false;
        this.rowRenderers = [DefaultRowRenderer];
        /**
         * Sets the width of all columns.
         * Options are `"auto"`, `"auto-fix"`, or a number representing the number of pixels. Default is auto.
         */
        this.columnWidth = 'auto';
        /**
         * Height of the table
         */
        this.height = 'auto';
        /**
         * Highlight on hover
         * Possible values are: `"rows"`, `"columns"`, and `"none"`. Default is "rows"
         */
        this.highlight = 'rows';
        /**
         * Implicitly set the columns based on the records
         */
        this.implicitColumns = false;
        /**
         * A unique identifier for the table
         */
        this.name = this.id;
        /**
         * Is the table re-orderable by users
         */
        this.orderable = false;
        /** @internal */
        this.renderer = new NativeRenderer();
        /**
         * Columns that have been selected by field name
         */
        this.selectedColumnFields = [];
        /**
         * Row keys that have been selected
         */
        this.selectedRowKeys = [];
        /**
         * Is the table re-sizable by users
         */
        this.sizable = false;
        this.anjColumnsDidLoad = core.createEvent(this, "anjColumnsDidLoad", 7);
        this.anjColumnsDidUpdate = core.createEvent(this, "anjColumnsDidUpdate", 7);
        this.anjRowsWillLoad = core.createEvent(this, "anjRowsWillLoad", 7);
        this.anjRowsDidLoad = core.createEvent(this, "anjRowsDidLoad", 7);
        this.anjTableWillUpdate = core.createEvent(this, "anjTableWillUpdate", 7);
        this.anjTableDidUpdate = core.createEvent(this, "anjTableDidUpdate", 7);
    }
    get pagerOptions() {
        return this.pager ? {
            page: this.pager.page,
            range: this.pager.range,
            size: this.pager.size
        } : {};
    }
    set pagerOptions(options) {
        if (this.pager) {
            this.pager.page = options.page;
            this.pager.size = options.size;
            this.pager.range = options.range;
        }
    }
    async onColumnsChange() {
        if (!this.inited)
            return;
        return this.loadColumns();
    }
    async onDataSourceChange() {
        if (this.colDefs && Array.isArray(this.dataSource)) {
            if (this.source) {
                return this.updateData(this.dataSource);
            }
            else {
                return this.connectDataSource();
            }
        }
    }
    async componentDidLoad() {
        await this.loadColumns();
        await this.connectDataSource();
        this.inited = true;
    }
    componentWillUpdate() {
        if (this.highlight === 'columns') {
            Array.from(this.element.querySelectorAll('td, th')).forEach((el) => {
                el.removeEventListener('mouseenter', this.cellMouseOverListener);
                el.removeEventListener('mouseleave', this.cellMouseOutListener);
            });
        }
        this.anjTableWillUpdate.emit();
    }
    componentDidUpdate() {
        if (this.highlight === 'columns') {
            Array.from(this.element.querySelectorAll('td, th')).forEach((el) => {
                el.addEventListener('mouseenter', this.cellMouseOverListener);
                el.addEventListener('mouseleave', this.cellMouseOutListener);
            });
        }
        if (this.colDefs && this.columnWidth === 'auto-fix') {
            this.colDefs.filter(c => c.visible && c.width === 'auto').forEach(c => {
                const colClass = column_renderer.ColumnRenderer.classFromColumnName(c.name);
                const firstCell = this.element.querySelector(`td.${colClass}`);
                c.width = firstCell ? `${firstCell.offsetWidth}px` : 'auto';
            });
        }
        this.anjTableDidUpdate.emit();
    }
    componentDidUnload() {
        this.componentWillUpdate();
    }
    /* Loading of various controls */
    onControlLoaded(event) {
        event.stopPropagation();
        const target = event.target;
        switch (target.tagName) {
            case 'ANJ-FILTER':
                this.filter = event.detail;
                break;
            case 'ANJ-COLUMN-FILTERING':
                this.filtering = event.target;
                break;
            case 'ANJ-STATE-STORE':
                this.store = event.target;
                break;
            default:
                this.pager = target;
                break;
        }
    }
    /* Row Render Controls */
    onRowControlLoaded(event) {
        event.stopPropagation();
        const target = event.target;
        this.rowRenderers.unshift(target);
        if (target.tagName === 'ANJ-ROW-GROUPING') {
            this.rowGroupControl = target;
        }
    }
    /* Cell Render Controls */
    onCellControlLoaded(event) {
        event.stopPropagation();
        const target = event.target;
        this.cellRenderers.unshift(target);
    }
    /* Column Events */
    async onColumnToggle({ detail }) {
        const column = this.colDefs.find(c => c.name === detail);
        column.visible = !column.visible;
        this.colDefs = this.groupColumns(this.colDefs);
        return this.scroller.doResize();
    }
    onOrderChange({ detail }) {
        const columns = this.colDefs.slice(0);
        const column = columns.splice(detail.currentIndex, 1)[0];
        column.pinned = columns[detail.targetIndex].pinned;
        columns.splice(detail.targetIndex, 0, column);
        this.colDefs = this.groupColumns(columns);
    }
    onPinChange({ detail }) {
        this.colDefs[detail.index].pinned = detail.pin;
        this.colDefs = this.groupColumns(this.colDefs);
    }
    async persistState() {
        if (!this.store)
            return;
        const options = await this.dataOptions(false);
        if (options && this.colDefs) {
            options.columns = this.colDefs.map(table_utils.persistColumn);
            return this.store.set(options);
        }
    }
    /* End Column Events */
    /* Data Events */
    /**
     * Eat any load events from child tables
     */
    async onRowChange(event) {
        if (event.target !== this.element) {
            event.stopPropagation();
        }
        if (event.type === 'anjColumnsDidUpdate' || event.type === 'anjRowsDidLoad') {
            return this.persistState();
        }
    }
    async onPage() {
        return this.setRows(this.spinner.spinWhile(this.source.paginate(await this.dataOptions())));
    }
    async onColumnGroupChange() {
        this.anjRowsWillLoad.emit();
        return this.setRows(this.spinner.spinWhile(this.source.sort(await this.dataOptions())));
    }
    async onSort(event) {
        // ignore events from child tables
        if (!this.isChild(event.target)) {
            return;
        }
        this.anjRowsWillLoad.emit();
        // TODO: handle multisort
        if (event.detail.field) {
            this.colDefs = this.colDefs.map((col) => {
                if (event.detail.type) {
                    if (col.field === event.detail.field) {
                        col.filter = utils.hasValue(event.detail.query) ? event.detail : undefined;
                    }
                }
                else {
                    col.sortIndex = col.field === event.detail.field ? 0 : undefined;
                    col.sortOrder = col.field === event.detail.field ? event.detail.order : 'asc';
                }
                return col;
            });
        }
        if (this.pager) {
            this.pager.page = 1;
        }
        return this.setRows(this.spinner.spinWhile(this.source.sort(await this.dataOptions())));
    }
    addRow({ detail, target }) {
        if (target.mode === 'noop') {
            return;
        }
        if (detail.index) {
            const rows = this.rows.slice(0);
            rows.splice(detail.index, 0, detail.data);
            this.rows = rows;
        }
        else {
            this.rows = [detail.data].concat(this.rows);
        }
    }
    onDelete({ detail, target }) {
        if (target.mode === 'noop') {
            return;
        }
        const rows = this.rows.slice(0);
        rows.splice(detail.index, 1);
        this.rows = rows;
    }
    async updateRow({ detail }) {
        const rows = this.rows.slice(0);
        rows[detail.index] = detail.data;
        this.rows = rows;
    }
    /**
     * Send changes made to the rows to the data source to become persistent.
     */
    async patchData({ detail }) {
        const opts = await this.dataOptions();
        return this.setRows(this.spinner.spinWhile(this.source.patch(Object.assign(opts, { patch: detail }))));
    }
    /* End Data Events */
    /**
     * Finds all anj-context-menu items within the table and returns their nodes
     */
    async columnMenu() {
        return Array.from(this.element.querySelectorAll('anj-context-menu-item'))
            .map(i => i.cloneNode(true));
    }
    /**
     * Returns the current instantiated column definitions
     */
    async getColumns() {
        return this.colDefs;
    }
    /**
     * Returns the current rows displayed (not the whole data set)
     */
    async getRows() {
        return this.rows;
    }
    /**
     * Refresh the underlying data source with a new array of data
     */
    async updateData(data) {
        this.source.data = data;
        return this.loadRowData();
    }
    /**
     * Scroll the table to a given set of coordinates by column field and/or row key.
     */
    async scrollByKey(columnField, rowKey) {
        const rowIndex = rowKey ? this.rows.findIndex(r => r[this.rowKey] === rowKey) : 0;
        const columnIndex = columnField ? this.colDefs.findIndex(c => c.field === columnField) : 0;
        return this.scrollByIndex(columnIndex, rowIndex);
    }
    /**
     * Scroll the table to a given set of coordinates by column and/or row index.
     */
    async scrollByIndex(columnIndex, rowIndex) {
        // In the event we need scroll by index, everything below can be moved there, then call that here -r
        const rowEl = this.element.querySelectorAll('tr')[rowIndex];
        const colEl = this.element.querySelectorAll('th')[columnIndex];
        const rowOffset = rowEl.offsetTop + rowEl.clientHeight;
        const colOffex = colEl.offsetWidth + colEl.offsetLeft;
        let rowCoords;
        let colCoords;
        if (rowOffset > this.scroller.clientHeight + this.scroller.scrollTop) {
            rowCoords = rowOffset - this.scroller.clientHeight;
        }
        else if (rowOffset < this.element.scrollTop + this.element.clientHeight) {
            rowCoords = this.scroller.scrollTop - rowEl.clientHeight > -1 ? this.scroller.scrollTop - rowEl.clientHeight : 0;
        }
        if (colOffex > this.scroller.scrollLeft + this.scroller.offsetWidth) {
            colCoords = colOffex - this.scroller.offsetWidth;
        }
        else if (colOffex < this.scroller.scrollLeft + this.scroller.offsetWidth) {
            colCoords = this.scroller.scrollLeft - colEl.offsetWidth > -1 ? this.scroller.scrollLeft - colEl.offsetWidth : 0;
        }
        return this.scroller.debouncedScrollTo(colCoords, rowCoords);
    }
    connectDataSource() {
        if (!this.dataSource)
            return;
        this.source = Array.isArray(this.dataSource) && this.dataSource.length < 1000
            ? new SimpleDataSource(this.dataSource) : new LocalDataSource(this.dataSource);
        return this.loadRowData();
    }
    async loadRowData() {
        return this.setRows(this.spinner.spinWhile(this.source.fetchData(await this.dataOptions(true))));
    }
    async loadColumns() {
        const columns = await Promise.all(Array.from(this.element.querySelectorAll('anj-column'))
            .filter(col => this.isChild(col))
            .map((col) => col.componentOnReady()));
        const storedCols = this.store && !this.colDefs ? await this.loadColumnsFromStore() : undefined;
        this.colDefs = this.groupColumns(columns.concat(this.loadMetaColumns()), storedCols);
    }
    loadMetaColumns() {
        if (!this.columns)
            return [];
        return this.columns.map(col => new MetaColumn(this.element, col, this.translator));
    }
    groupColumns(loaded, stored) {
        const columns = stored ? this.initColumnsFromStore(loaded, stored) : loaded;
        // this is kinda dumb, but it gets around Safari not having a stable sort -r
        const visible = columns.filter(visibleColumnFilter);
        const left = visible.filter(col => col.pinned === 'left');
        const right = visible.filter(col => col.pinned === 'right');
        const scrolling = visible.filter(col => !col.pinned);
        const allVisible = left.concat(scrolling, right);
        const allColumns = allVisible.concat(columns.filter(col => !col.visible || col.groupIndex !== undefined)).map((c, i) => {
            c.index = i;
            return c;
        });
        this.pinBoundaries = table_utils.calculatePinBoundaries(left.length, right.length, scrolling.length);
        this.offsets = table_utils.calculateOffsets(allVisible);
        if (this.colDefs) {
            this.anjColumnsDidUpdate.emit(allColumns);
        }
        else {
            this.anjColumnsDidLoad.emit(allColumns);
        }
        return allColumns;
    }
    async loadColumnsFromStore() {
        const store = await this.store.get();
        return store && store.columns ? store.columns : undefined;
    }
    initColumnsFromStore(columns, stored) {
        return columns.map(col => {
            const s = stored.find(c => c.name === col.name);
            return s ? Object.assign(col, s) : col;
        }).sort((a, b) => a.index - b.index);
    }
    isChild(el) {
        const table = el.closest(this.element.tagName);
        return table.name === this.name;
    }
    async setRows(pending) {
        try {
            const data = await pending;
            if (this.implicitColumns && this.colDefs.filter(c => !c.internal).length === 0 && data.data && data.data.length > 0) {
                this.columns = table_utils.implicitColumnFactory(Object.keys(data.data[0]), data.data);
                await this.loadColumns();
            }
            this.rows = data.data || [];
            if (this.pager) {
                this.pager.total = data.total || 0;
            }
            this.anjRowsDidLoad.emit();
        }
        catch (e) {
            throw e;
        }
    }
    // TODO these should probably move to the data source itself
    async dataOptions(fromStore = false) {
        if (fromStore && this.store) {
            return this.initOptionsFromStore();
        }
        const baseOpts = { key: this.rowKey };
        const sorts = this.colDefs.filter(c => c.sortIndex > -1).sort((a, b) => a.sortIndex - b.sortIndex).map(c => {
            return {
                key: c.field,
                order: c.sortOrder,
                index: c.sortIndex
            };
        });
        const groups = this.colDefs.filter(c => c.groupIndex > -1).sort((a, b) => a.groupIndex - b.groupIndex).map(c => {
            return {
                groupKeys: c.groupKeys,
                key: c.field,
                groupKey: c.groupKey,
                index: c.groupIndex,
                autoExpand: this.rowGroupControl.autoExpand
            };
        });
        const filters = this.colDefs.filter(c => c.filter).map(c => {
            return {
                key: c.field,
                query: c.filter.query,
                type: c.filter.type
            };
        });
        if (this.filter && this.filter.value) {
            filters.unshift({ type: 'contains', query: this.filter.value || '', key: undefined });
        }
        return Object.assign({
            filter: filters.length > 0 ? filters : undefined,
            group: groups.length > 0 ? groups : undefined,
            sort: sorts.length > 0 ? sorts : undefined
        }, this.pagerOptions, baseOpts);
    }
    async initOptionsFromStore() {
        const options = await this.store.get();
        if (!options) {
            return this.dataOptions();
        }
        if (this.filter && options.filter && !options.filter[0].key) {
            this.filter.value = options.filter[0].query;
        }
        if (this.pager) {
            this.pagerOptions = options;
        }
        if (options.sort) {
            options.sort.forEach((sort) => {
                const col = this.colDefs.find((c) => c.field === sort.key);
                col.sortIndex = sort.index;
                col.sortOrder = sort.order;
            });
        }
        return options;
    }
    highlightColumn({ target }) {
        table_utils.colCellsFromCell(target).forEach(el => el.classList.add('anj-highlight'));
    }
    clearColumnHighlight({ target }) {
        table_utils.colCellsFromCell(target).forEach(el => el.classList.remove('anj-highlight'));
    }
    getRowRenderer(row, rowIndex, columns) {
        const props = {
            cellRenderers: this.cellRenderers,
            columns,
            offsets: this.offsets,
            pinBoundaries: this.pinBoundaries,
            renderer: this.renderer,
            row,
            rowIndex
        };
        return this.rowRenderers.find(r => r.when(row)).row(props);
    }
    render() {
        const columns = this.colDefs ? this.colDefs.filter(visibleColumnFilter) : undefined;
        return [
            core.h("div", { class: "anj-table-header" }, core.h("div", { class: "anj-table-filter" }, core.h("slot", { name: "filter" })), core.h("div", { class: "anj-table-controls" }, core.h("slot", null))),
            columns && this.rows ?
                core.h("anj-scroller", { style: { maxHeight: this.height }, ref: (r) => this.scroller = r }, core.h("table", { class: table_utils.TableClasses.table }, core.h(Colgroup, { columns: columns }), core.h(Thead, { columns: columns, filtering: !!this.filtering, offsets: this.offsets, pinBoundaries: this.pinBoundaries, translator: this.translator }), core.h(Tbody, { classList: table_utils.TableClasses.body }, this.rows.map((row, index) => this.getRowRenderer(row, index, columns)))))
                : undefined,
            core.h("div", { style: { display: this.rows && this.rows.length === 0 ? 'block' : 'none' } }, core.h("slot", { name: "footer-message" })),
            core.h("div", { style: { display: this.rows && this.rows.length > 0 ? 'block' : 'none' } }, core.h("slot", { name: "footer" })),
            core.h("anj-spinner-controller", { ref: (r) => this.spinner = r })
        ];
    }
    get element() { return core.getElement(this); }
    static get watchers() { return {
        "columns": ["onColumnsChange"],
        "dataSource": ["onDataSourceChange"]
    }; }
    static get style() { return ".anj-base-table,anj-table .anj-table{border-collapse:separate;border-spacing:0;min-width:100%;max-width:none;position:relative;table-layout:fixed}.anj-base-table,.anj-base-table tbody,.anj-base-table td,.anj-base-table th,.anj-base-table thead,.anj-base-table tr,anj-table .anj-table,anj-table .anj-table tbody,anj-table .anj-table td,anj-table .anj-table th,anj-table .anj-table thead,anj-table .anj-table tr{background-color:inherit}.anj-base-table>thead th,anj-table .anj-table>thead th{color:var(--anj-neutral-dark);cursor:default;font-size:.75rem;-webkit-transition:border-color .3s ease,color .3s ease,-webkit-transform .3s ease;transition:border-color .3s ease,color .3s ease,-webkit-transform .3s ease;transition:border-color .3s ease,color .3s ease,transform .3s ease;transition:border-color .3s ease,color .3s ease,transform .3s ease,-webkit-transform .3s ease}.anj-base-table>thead th.anj-overflow-header .anj-column-caption,anj-table .anj-table>thead th.anj-overflow-header .anj-column-caption{overflow:visible;white-space:normal}.anj-base-table>thead th>span,anj-table .anj-table>thead th>span{display:inline-block;line-height:1;max-width:100%;padding-right:.25rem;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase}.anj-base-table>tbody td,.anj-base-table>tbody th,anj-table .anj-table>tbody td,anj-table .anj-table>tbody th{cursor:default;overflow:hidden;text-overflow:ellipsis;-webkit-transition:border-color .3s ease;transition:border-color .3s ease}.anj-base-table>tbody td.anj-pinned-left,.anj-base-table>tbody th.anj-pinned-left,anj-table .anj-table>tbody td.anj-pinned-left,anj-table .anj-table>tbody th.anj-pinned-left{z-index:1}.anj-base-table>tbody td.anj-overflow-cell,.anj-base-table>tbody th.anj-overflow-cell,anj-table .anj-table>tbody td.anj-overflow-cell,anj-table .anj-table>tbody th.anj-overflow-cell{overflow:visible;white-space:normal}.anj-base-table>tbody td,.anj-base-table>tbody th,.anj-base-table>thead th,anj-table .anj-table>tbody td,anj-table .anj-table>tbody th,anj-table .anj-table>thead th{border-bottom:1px solid var(--anj-border);border-left:0;border-right:0;border-top:0;padding:.657rem .75rem;vertical-align:top;white-space:nowrap}.anj-base-table>tbody td:focus,.anj-base-table>tbody th:focus,.anj-base-table>thead th:focus,anj-table .anj-table>tbody td:focus,anj-table .anj-table>tbody th:focus,anj-table .anj-table>thead th:focus{border-bottom-color:#b8c1ca;outline:none}.anj-base-table>tbody td.anj-pinned-left,.anj-base-table>tbody td.anj-pinned-right,.anj-base-table>tbody th.anj-pinned-left,.anj-base-table>tbody th.anj-pinned-right,.anj-base-table>thead th.anj-pinned-left,.anj-base-table>thead th.anj-pinned-right,anj-table .anj-table>tbody td.anj-pinned-left,anj-table .anj-table>tbody td.anj-pinned-right,anj-table .anj-table>tbody th.anj-pinned-left,anj-table .anj-table>tbody th.anj-pinned-right,anj-table .anj-table>thead th.anj-pinned-left,anj-table .anj-table>thead th.anj-pinned-right{position:-webkit-sticky;position:sticky}.anj-base-table>tbody td.anj-pin-border.anj-pinned-left,.anj-base-table>tbody th.anj-pin-border.anj-pinned-left,.anj-base-table>thead th.anj-pin-border.anj-pinned-left,anj-table .anj-table>tbody td.anj-pin-border.anj-pinned-left,anj-table .anj-table>tbody th.anj-pin-border.anj-pinned-left,anj-table .anj-table>thead th.anj-pin-border.anj-pinned-left{border-right:1px solid transparent}.anj-base-table>tbody td.anj-pin-border.anj-pinned-right,.anj-base-table>tbody th.anj-pin-border.anj-pinned-right,.anj-base-table>thead th.anj-pin-border.anj-pinned-right,anj-table .anj-table>tbody td.anj-pin-border.anj-pinned-right,anj-table .anj-table>tbody th.anj-pin-border.anj-pinned-right,anj-table .anj-table>thead th.anj-pin-border.anj-pinned-right{border-left:1px solid transparent}.anj-base-table>tbody td anj-button,.anj-base-table>tbody th anj-button,.anj-base-table>thead th anj-button,anj-table .anj-table>tbody td anj-button,anj-table .anj-table>tbody th anj-button,anj-table .anj-table>thead th anj-button{margin:-.75rem 0!important}.anj-base-table>thead th,anj-table .anj-table>thead th{position:-webkit-sticky;position:sticky;top:0;z-index:1}.anj-base-table>thead th:focus .anj-column-caption,anj-table .anj-table>thead th:focus .anj-column-caption{color:var(--anj-text)}.anj-base-table>thead th.anj-pinned-left,.anj-base-table>thead th.anj-pinned-right,anj-table .anj-table>thead th.anj-pinned-left,anj-table .anj-table>thead th.anj-pinned-right{z-index:2}\@supports not ((position:-webkit-sticky) or (position:sticky)){.anj-base-table .anj-header-cell,.anj-base-table .anj-pinned-left,.anj-base-table .anj-pinned-right,anj-table .anj-table .anj-header-cell,anj-table .anj-table .anj-pinned-left,anj-table .anj-table .anj-pinned-right{position:relative;bottom:auto!important;left:auto!important;right:auto!important;top:auto!important}}anj-table{display:block;font-size:.875rem;font-family:var(--anj-font-family);font-weight:400;line-height:1.5;outline:none;background-color:var(--anj-light);position:relative}anj-table,anj-table:after,anj-table:before{-webkit-box-sizing:border-box;box-sizing:border-box;outline:none}anj-table:active,anj-table :active,anj-table:focus,anj-table :focus{outline:none}anj-table[highlight=cells] tbody td{-webkit-transition:border-color .3s ease,background-color .3s ease,color .3s ease;transition:border-color .3s ease,background-color .3s ease,color .3s ease}anj-table[highlight=cells] tbody td:hover{background-color:#f7f8f9}anj-table[highlight=columns] .anj-table .anj-header-cell.anj-selectable{-webkit-transition:border-color .3s ease,background-color .3s ease,color .3s ease,-webkit-transform .3s ease;transition:border-color .3s ease,background-color .3s ease,color .3s ease,-webkit-transform .3s ease;transition:border-color .3s ease,background-color .3s ease,color .3s ease,transform .3s ease;transition:border-color .3s ease,background-color .3s ease,color .3s ease,transform .3s ease,-webkit-transform .3s ease}anj-table[highlight=columns] .anj-table .anj-header-cell.anj-selectable.anj-highlight{background-color:#f7f8f9}anj-table[highlight=columns] .anj-table .anj-cell.anj-selectable{-webkit-transition:border-color .3s ease,background-color .3s ease,color .3s ease;transition:border-color .3s ease,background-color .3s ease,color .3s ease}anj-table[highlight=columns] .anj-table .anj-cell.anj-selectable.anj-highlight{background-color:#f7f8f9}anj-table[highlight=rows] tbody>tr{-webkit-transition:background-color .3s ease;transition:background-color .3s ease}anj-table[highlight=rows] tbody>tr:focus,anj-table[highlight=rows] tbody>tr:hover{background-color:#f7f8f9}anj-table[orderable] .anj-header-cell{cursor:pointer}anj-table anj-button-group{display:block}anj-table .anj-table-header{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-flow:column-reverse;flex-flow:column-reverse;position:relative;z-index:3}anj-table .anj-table-header .anj-table-controls{display:-ms-flexbox;display:flex;-ms-flex:0 0 100%;flex:0 0 100%;-ms-flex-pack:end;justify-content:flex-end;max-width:100%}anj-table .anj-table-header .anj-table-controls anj-button{margin-bottom:1rem}\@media (min-width:768px){anj-table .anj-table-header{-ms-flex-flow:row wrap;flex-flow:row wrap}anj-table .anj-table-header .anj-table-controls,anj-table .anj-table-header .anj-table-filter{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}}anj-table anj-scroller.anj-overflow-x{padding-bottom:.5rem}anj-table anj-scroller.anj-overflow-x .anj-cell.anj-pin-border.anj-pinned-left,anj-table anj-scroller.anj-overflow-x .anj-header-cell.anj-pin-border.anj-pinned-left{border-right-color:var(--anj-border)}anj-table anj-scroller.anj-overflow-x .anj-cell.anj-pin-border.anj-pinned-right,anj-table anj-scroller.anj-overflow-x .anj-header-cell.anj-pin-border.anj-pinned-right{border-left-color:var(--anj-border)}anj-table anj-scroller.anj-overflow-x~anj-pager{margin-top:.5rem!important}anj-table .anj-table .anj-datatype-boolean{text-align:center}anj-table .anj-table .anj-datatype-number{text-align:right}anj-table .anj-table .anj-datatype-number .anj-column-caption{padding-left:.25rem;padding-right:0}"; }
};
i18n_provider.Tunnel.injectProps(Table, ['dateFormatter', 'datetimeFormatter', 'numberFormatter', 'translator']);
const visibleColumnFilter = (c) => {
    return (c.visible && c.groupIndex === undefined);
};

const TableMessage = class {
    constructor(hostRef) {
        core.registerInstance(this, hostRef);
    }
    static get style() { return "anj-table-message{color:var(--anj-neutral);display:block;padding:.657rem .75rem;text-align:center}"; }
};

exports.anj_action = Action;
exports.anj_actions = Actions;
exports.anj_column = Column;
exports.anj_column_control = ColumnControl;
exports.anj_column_sizer = ColumnSizer;
exports.anj_lookup = Lookup;
exports.anj_pager = Pager;
exports.anj_render_cell = RenderCell;
exports.anj_render_row = RenderRow;
exports.anj_scroller = Scroller;
exports.anj_table = Table;
exports.anj_table_message = TableMessage;
