open simplified dropdown using new grid

[vegarringdal]

let pop: HTMLElement | null = null;

const gridInterfaceEvents = {
    handleEvent: (e: any) => {
        console.log(e);
        if (pop) {
            pop.parentElement?.removeChild(pop);
            pop = null;
        }
        if (e.type === 'cell-focus-button-click' && e.data?.attribute === 'date1') {
            const cell = e.data.cell as HTMLCellElement;
            const rect = cell.getBoundingClientRect();
            const element = document.createElement('simple-html-grid') as GridElement;
            const height = 300;
            const width = 500;
            let top = rect.bottom;
            let left = rect.left;
            if (window.innerHeight < rect.bottom + height) {
                top = rect.top - height - 3;
            }
            if (window.innerWidth < rect.right + width) {
                left = window.innerWidth - width - 3;
            }

            element.style.width = width + 'px';
            element.style.height = height + 'px';
            element.style.display = 'absolute';
            element.style.top = top + 'px';
            element.style.left = left + 'px';
            element.style.boxShadow = '16px 17px 8px 0px rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%)';

            const gridConfig: GridConfig = {
                panelHeight: 0,
                selectSizeHeight: 1,
                hideLabels: false,
                hideFilter: false,
                footerHeight: 10,
                columnsCenter: [{ width: width, rows: ['WOW'] }],
                attributes: [
                    {
                        attribute: 'WOW',
                        label: 'select cable'
                    }
                ]
            };
            const datasource = new Datasource();

            for (let i = 0; i < 1000; i++) {
                datasource.setData([{ WOW: 'wow' + i }], true);
            }

            const gridInterface = new GridInterface(gridConfig, datasource);
            element.classList.add('simple-html-grid');
            element.connectInterface(gridInterface);
            document.body.appendChild(element);
            pop = element;

            // set focus to first filter
            (element.getElementsByTagName('INPUT')[0] as HTMLInputElement)?.focus();

            element.onclick = (x) => {
                if ((x.target as HTMLElement)?.classList.contains('simple-html-grid-cell-input')) {
                    console.log(datasource.currentEntity);
                    pop.parentElement?.removeChild(pop);
                    pop = null;
                    e.data.target?.focus();
                }
            };

            element.onkeydown = (x) => {
                if (x.code === 'Enter' && (x.target as HTMLElement)?.classList.contains('simple-html-grid-cell-input')) {
                    console.log(datasource.currentEntity);
                    pop.parentElement?.removeChild(pop);
                    pop = null;
                    e.data.target?.focus();
                }
            };
        }

        return true; // to keep subscribing
    }
};