'use strict';

var index = require('./index-DLmnUl1_.js');
var jsSdk = require('@verdocs/js-sdk');
var utils = require('./utils-BtmSHO0F.js');
var popper = require('./popper-Dmp8OTYh.js');
require('./index-FVA5WPhX.js');
require('./Types-DB6U9iuZ.js');

const verdocsPaginationCss = () => `verdocs-pagination{gap:8px;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;font-family:"Inter", "Barlow", sans-serif}verdocs-pagination .page-button{height:38px;display:-ms-flexbox;display:flex;-ms-flex:0 0 38px;flex:0 0 38px;cursor:pointer;font-size:16px;font-weight:600;border-radius:4px;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;color:#33364b;border:1px solid #654dcb}verdocs-pagination .page-button svg{width:18px;height:18px}verdocs-pagination .page-button.selected{cursor:default;color:#ffffff;background:#654dcb}verdocs-pagination .ellipsis{width:38px;height:38px;display:-ms-flexbox;display:flex;-ms-flex:0 0 38px;flex:0 0 38px;line-height:32px;-ms-flex-pack:center;justify-content:center;color:#33364b}`;

const ChevronDoubleLeft = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M18.75 19.5l-7.5-7.5 7.5-7.5m-6 15L5.25 12l7.5-7.5" /></svg>`;
const ChevronDoubleRight = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M11.25 4.5l7.5 7.5-7.5 7.5m-6-15l7.5 7.5-7.5 7.5" /></svg>`;
const VISIBLE_PAGES = 5;
const PageButton = ({ page, selected, onClick }) => {
    let label;
    if (page === 'first') {
        label = ChevronDoubleLeft;
    }
    else if (page === 'last') {
        label = ChevronDoubleRight;
    }
    else {
        label = String(page + 1);
    }
    return index.h("div", { class: `page-button ${page === selected ? 'selected' : ''}`, onClick: () => onClick(page), innerHTML: label });
};
const VerdocsQuickFilter$1 = class VerdocsQuickFilter {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.selectPage = index.createEvent(this, "selectPage");
        /**
         * The currently selected page.
         */
        this.selectedPage = 0;
        /**
         * The total number of items.
         */
        this.itemCount = 1;
        /**
         * The number of displayed per page.
         */
        this.perPage = 10;
    }
    handleSelectPage(page) {
        var _a;
        this.selectedPage = page;
        (_a = this.selectPage) === null || _a === void 0 ? void 0 : _a.emit({ selectedPage: page });
    }
    render() {
        const firstPage = Math.max(0, this.selectedPage - 2);
        const numPages = this.itemCount > 0 ? Math.ceil(this.itemCount / this.perPage) : 0;
        const pagesToDisplay = jsSdk.integerSequence(0, Math.ceil(this.itemCount / this.perPage)).slice(firstPage, firstPage + VISIBLE_PAGES);
        return (index.h(index.Host, { key: '2ce45159b092a0283f247e7098931fcd34eebb99' }, this.selectedPage > 0 && index.h(PageButton, { key: '0bec38eb497b2feef1c98fd73b682f997d68ac5b', page: 'first', selected: this.selectedPage, onClick: () => this.handleSelectPage(0) }), firstPage > 0 && index.h("div", { key: '706e4de3571b6b3883df226d300cfb9ae358c8b3', class: "ellipsis" }, "..."), pagesToDisplay.map(pageNumber => (index.h(PageButton, { page: pageNumber, selected: this.selectedPage, onClick: page => this.handleSelectPage(+page) }))), this.selectedPage < numPages - 1 && index.h("div", { key: '9249824a3700ec561f6707e2a8fc4ebbf2362633', class: "ellipsis" }, "..."), this.selectedPage < numPages - 1 && index.h(PageButton, { key: 'd1051af6279d1e864ea39cfd087c7295739e2619', page: 'last', selected: this.selectedPage, onClick: () => this.handleSelectPage(numPages - 1) })));
    }
    get el() { return index.getElement(this); }
};
VerdocsQuickFilter$1.style = verdocsPaginationCss();

const verdocsQuickFilterCss = () => `verdocs-quick-filter{position:relative;font-family:"Inter", "Barlow", sans-serif}verdocs-quick-filter .control{outline:0;height:34px;display:-ms-flexbox;display:flex;cursor:pointer;border-radius:4px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-webkit-box-sizing:border-box;box-sizing:border-box;background:#ffffff;-webkit-transition:all 100ms ease 0s;transition:all 100ms ease 0s;border:1px solid #cccccc}verdocs-quick-filter .title{padding:0 8px;font-size:14px;max-width:100%;overflow:hidden;color:#33364b;white-space:nowrap;-webkit-box-sizing:border-box;box-sizing:border-box;text-overflow:ellipsis}verdocs-quick-filter .title .prefix{display:inline;font-weight:700;margin:0 7px 0 0;color:#4c56cb}verdocs-quick-filter .arrow{width:32px;height:32px;border:none;outline:none;cursor:pointer;-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;background:#ffffff;-webkit-transition:color 150ms ease 0s;transition:color 150ms ease 0s}verdocs-quick-filter .arrow svg{-webkit-transition:0.3s;transition:0.3s;fill:#cccccc}verdocs-quick-filter .separator{width:1px;display:block;margin-top:8px;margin-bottom:8px;-ms-flex-item-align:stretch;align-self:stretch;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:#cccccc}verdocs-quick-filter .items{display:none;z-index:10000;position:absolute;border-radius:4px;background:#ffffff;-webkit-box-shadow:rgba(0, 0, 0, 0.1) 0 0 0 1px, rgba(0, 0, 0, 0.1) 0 4px 11px;box-shadow:rgba(0, 0, 0, 0.1) 0 0 0 1px, rgba(0, 0, 0, 0.1) 0 4px 11px}verdocs-quick-filter .items[data-show]{display:block}verdocs-quick-filter .option{width:100%;border:none;display:block;font-size:14px;text-align:left;background:none;padding:10px 20px;color:#1e2031}verdocs-quick-filter .option:hover{cursor:pointer;background:rgba(76, 86, 203, 0.2470588235)}verdocs-quick-filter .option[disabled]{color:#aaaaaa}verdocs-quick-filter .option[disabled]:hover{cursor:inherit;background:transparent;color:#aaaaaa}verdocs-quick-filter.open .items{display:block}verdocs-quick-filter.open .arrow svg{-webkit-transform:scaleY(-1);transform:scaleY(-1)}`;

const DropdownArrow = `<svg height="20" width="20" viewBox="0 0 20 20" aria-hidden="true" focusable="false" class="css-8mmkcg"><path d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"></path></svg>`;
const VerdocsQuickFilter = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.optionSelected = index.createEvent(this, "optionSelected");
        /**
         * The menu options to display.
         */
        this.options = [];
        this.label = 'Filter';
        this.value = '';
        this.placeholder = 'Select...';
        // We need to do this to reliably disconnect the click-away listener
        this.clickListenerSymbol = new AbortController();
    }
    componentDidLoad() {
        this.popper = popper.createPopper(this.dropdownButton, this.dropdownMenu, { placement: 'bottom-start', modifiers: [{ name: 'offset', options: { offset: [-1, 14] } }] });
        window.addEventListener('click', this.clickListener.bind(this), { signal: this.clickListenerSymbol.signal });
    }
    disconnectedCallback() {
        this.clickListenerSymbol.abort();
    }
    clickListener(e) {
        const outside = !(e.target == this.el || this.el.contains(e.target));
        if (outside) {
            this.hide();
        }
    }
    handleSelectOption(e, option) {
        e.stopPropagation();
        this.optionSelected.emit(option);
        this.value = option.value;
        this.hide();
    }
    // See https://popper.js.org/docs/v2/tutorial/
    // What we're doing here is clearing event listeners when they aren't needed, to increase performance in lists
    showDropdown() {
        var _a, _b;
        this.open = true;
        this.dropdownMenu.setAttribute('data-show', '');
        this.dropdownMenu.removeAttribute('aria-hidden');
        (_a = this.popper) === null || _a === void 0 ? void 0 : _a.setOptions(options => ({
            ...options,
            modifiers: [...options.modifiers, { name: 'eventListeners', enabled: true }],
        })).catch(() => { });
        (_b = this.popper) === null || _b === void 0 ? void 0 : _b.update().catch(() => { });
    }
    handleHideDropdown(e) {
        var _a, _b;
        if (((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.localName) === 'button' && ((_b = e === null || e === void 0 ? void 0 : e.target) === null || _b === void 0 ? void 0 : _b.className) === 'arrow') {
            // This event is fired when a menu element is clicked because the button "loses focus" then too
            return;
        }
        this.hide();
    }
    toggleDropdown(e) {
        e.stopPropagation();
        if (this.open) {
            this.hide();
        }
        else {
            this.showDropdown();
        }
    }
    hide() {
        var _a;
        this.open = false;
        this.dropdownMenu.removeAttribute('data-show');
        this.dropdownMenu.setAttribute('aria-hidden', 'true');
        (_a = this.popper) === null || _a === void 0 ? void 0 : _a.setOptions(options => ({
            ...options,
            modifiers: [...options.modifiers, { name: 'eventListeners', enabled: false }],
        })).catch(() => { });
    }
    render() {
        var _a, _b, _c;
        const selectedOption = (_a = this.options) === null || _a === void 0 ? void 0 : _a.find(option => option.value === this.value);
        const longestOption = (_b = this.options) === null || _b === void 0 ? void 0 : _b.reduce((prev, curr) => (prev.label.length > curr.label.length ? prev : curr));
        const longestLabelWidth = utils.renderedTextWidth((longestOption === null || longestOption === void 0 ? void 0 : longestOption.label) || 'FILLER', '14px Inter, Barlow, sans-serif');
        const prefixWidth = utils.renderedTextWidth(this.label, '14px Inter, Barlow, sans-serif');
        const minWidth = `${longestLabelWidth + prefixWidth + 40}px`;
        return (index.h(index.Host, { key: '1c36fa8fc641b1ea151674355b821055a3b4cc30', class: { open: !!this.open }, style: { minWidth, display: 'inline-block' } }, index.h("div", { key: 'ed2bf8915fdd7edb695d52e53db76797a12bc33f', class: "control", onClick: e => this.toggleDropdown(e), onBlur: e => this.handleHideDropdown(e) }, index.h("div", { key: '0dd12d9a579fe290bd4e4becd3c0ed64c4484283', class: "title", ref: el => (this.dropdownButton = el) }, index.h("span", { key: 'cf826e7133f800846d17e50200777f3d5fb1e61e', class: "prefix" }, this.label, ":"), selectedOption ? selectedOption.label : this.placeholder), index.h("div", { key: '333f6a9b3d788f280e03b53a87256b37c5428642', style: { flex: '1' } }), index.h("div", { key: '901cf0e9924f257d8e2499e9233f209a3665206c', class: "separator" }), index.h("div", { key: '0bab9931c19151fd63452e18c0f4ddb9ec76863a', class: "arrow", innerHTML: DropdownArrow, "aria-label": "Open Menu" })), index.h("div", { key: 'ee83f08945fa61bf413ab231f55c0e34a0ae75c8', class: "items", "aria-hidden": !this.open, ref: el => (this.dropdownMenu = el), style: { minWidth } }, (_c = this.options) === null || _c === void 0 ? void 0 : _c.map(option => option.label ? (index.h("button", { onClick: e => this.handleSelectOption(e, option), class: `option ${option.value === this.value ? 'selected' : ''}`, disabled: option.disabled }, option.label)) : (index.h("div", { class: "separator" }))))));
    }
    get el() { return index.getElement(this); }
};
VerdocsQuickFilter.style = verdocsQuickFilterCss();

exports.verdocs_pagination = VerdocsQuickFilter$1;
exports.verdocs_quick_filter = VerdocsQuickFilter;
//# sourceMappingURL=verdocs-pagination.verdocs-quick-filter.entry.cjs.js.map

//# sourceMappingURL=verdocs-pagination_2.cjs.entry.js.map