'use strict';

var index = require('./index-C_OnxXhP.js');
var index_esm = require('./index.esm-C1i_NocP.js');
var keycodes = require('./keycodes-BCQoLEdB.js');
var negate = require('./negate-Bg3SqQh6.js');

const browserCss = () => `:host(limebb-browser){isolation:isolate;display:flex;flex-direction:column;background-color:rgba(var(--contrast-100))}limel-input-field{position:sticky;top:0;z-index:1;padding:0.5rem 0.75rem;background-color:rgba(var(--contrast-100), 0.75);backdrop-filter:blur(0.25rem);-webkit-backdrop-filter:blur(0.25rem)}`;

const Browser = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.change = index.createEvent(this, "change");
        /**
         * Defines the how the list of items is rendered.
         * - `grid` - Items are displayed in a responsive grid layout.
         * Width of items is adjusted to fit the available space.
         */
        this.layout = 'grid';
        this.handleChangeFilter = (event) => {
            event.stopPropagation();
            this.filter = event.detail;
        };
        this.isIncluded = (item, index) => {
            if (this.isSeparator(item)) {
                return !(index === 0 && !item.text);
            }
            if (!this.filter) {
                return true;
            }
            return item.text
                .toLocaleLowerCase()
                .includes(this.filter.toLocaleLowerCase());
        };
        this.isEmptyGroup = (item, index, items) => {
            if (!this.isSeparator(item)) {
                return false;
            }
            const nextItem = items[index + 1];
            return !nextItem || this.isSeparator(nextItem);
        };
        this.handleChange = (event) => {
            event.preventDefault();
            this.handleItemChange(event.detail);
        };
        this.handleKeyDown = (event) => {
            var _a;
            if (event.key !== keycodes.ENTER) {
                return;
            }
            const list = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('limel-list');
            const interactiveItems = this.getItems().filter(negate.negate(this.isSeparator));
            if (list && interactiveItems.length > 0) {
                list.focus();
                this.handleItemChange(interactiveItems[0]);
            }
        };
    }
    render() {
        return [
            index.h("limel-input-field", { key: '314fbd746ab8a22f16ac001e02056e1e5325cdb6', tabIndex: 0, value: this.filter, type: "search", "leading-icon": "search", placeholder: this.translator.get('webclient.global-search-route'), onChange: this.handleChangeFilter, onKeyDown: this.handleKeyDown }),
            index.h("limel-list", { key: '8be5b8bb377375d362ff441349d9131d0eec24f9', items: this.getItems(), type: "selectable", class: {
                    'has-interactive-items': true,
                    'has-grid-layout': this.layout === 'grid',
                }, onChange: this.handleChange }),
        ];
    }
    isSeparator(item) {
        return !!item && typeof item === 'object' && 'separator' in item;
    }
    get navigator() {
        return this.platform.get(index_esm.n.Navigator);
    }
    get translator() {
        var _a;
        return (_a = this.platform) === null || _a === void 0 ? void 0 : _a.get(index_esm.n.Translate);
    }
    handleItemChange(item) {
        this.change.emit(item);
        this.filter = undefined;
        this.navigator.navigate(item.path);
    }
    getItems() {
        return this.items
            .filter(this.isIncluded)
            .filter(negate.negate(this.isEmptyGroup));
    }
    static get delegatesFocus() { return true; }
    get host() { return index.getElement(this); }
};
Browser.style = browserCss();

exports.limebb_browser = Browser;
