{"version":3,"file":"SelectOptionComponent-DH4dHfe8.js","sources":["../../../Features/Shared/Scripts/Components/SelectOptionComponent.tsx"],"sourcesContent":["import React, { useState } from 'react';\r\nimport { DisplayValue } from '../Models/Valg';\r\nimport Valg from '../Models/Valg';\r\n\r\ninterface SelectOptionsDisplayProps {\r\n    htmlId: any,\r\n    options: DisplayValue[],\r\n    ledetekst: any,\r\n    onSelectChange: any,\r\n    showSearch?: boolean,\r\n    value?: Valg<string>,\r\n    buttonProps?: React.HTMLAttributes<HTMLButtonElement>;\r\n}\r\n\r\nexport default function SelectOptionDisplay (props: SelectOptionsDisplayProps): JSX.Element {\r\n    let items = [];\r\n    let filteredOptions: DisplayValue[] = [];\r\n    let searchEl: JSX.Element | null = null;\r\n    const [filteredText, setFilteredText] = useState('');\r\n    const [aktivNedtrekk, setAktivNedtrekk] = useState('');\r\n    const [aktivKnapp, setAktivKnapp] = useState('');\r\n\r\n    function fokusSokHandler() : void {\r\n        setAktivKnapp(\"ekspandert-nedtrekk\");\r\n        setAktivNedtrekk(\"open-list\");\r\n    }\r\n\r\n    function searchHandler(e: React.SyntheticEvent<HTMLInputElement>) : void {\r\n        setFilteredText(e.currentTarget.value);\r\n    }\r\n\r\n    function openListHandler (e: React.SyntheticEvent<HTMLButtonElement>) : void{\r\n        if(aktivNedtrekk === '') {\r\n            setAktivKnapp(\"ekspandert-nedtrekk\");\r\n            setAktivNedtrekk(\"open-list\");\r\n        } else {\r\n            setAktivKnapp('');\r\n            setAktivNedtrekk('');\r\n        }\r\n    }\r\n\r\n    function selectItemHandler (e: React.SyntheticEvent<HTMLDivElement>) : void {\r\n        setAktivKnapp('');\r\n        setAktivNedtrekk('');\r\n        resetFilter();\r\n\r\n        if(e.currentTarget.textContent === null)\r\n            e.currentTarget.textContent = \"\";\r\n\r\n        let id: string | null = e.currentTarget.getAttribute(\"data-value\");\r\n        if(id === null)\r\n            id = \"\";\r\n\r\n        let valg: Valg<string> = { id: id, displayValue: e.currentTarget.textContent, value: \"\"}\r\n        props.onSelectChange(valg);\r\n    }\r\n\r\n    function resetFilter(): void {\r\n        if(props.showSearch)\r\n        {\r\n            setFilteredText('');\r\n        }\r\n    }\r\n\r\n    function buttonKeyDownHandler(e: React.KeyboardEvent<HTMLButtonElement>) : void {\r\n        //escape\r\n        if(e.key === 'Escape') {\r\n            setAktivKnapp('');\r\n            setAktivNedtrekk('');\r\n        }\r\n\r\n        //arrow down\r\n        if(e.key === 'ArrowDown') {\r\n            setAktivKnapp(\"ekspandert-nedtrekk\");\r\n            setAktivNedtrekk(\"open-list\");\r\n            \r\n            if(props.showSearch) {\r\n                document.getElementById(props.htmlId + '-sokfilter')?.querySelector(\"input\")?.focus();\r\n            } else {\r\n                document.getElementById(props.htmlId)?.querySelector(\"div\")?.focus();\r\n            }\r\n        }\r\n    }\r\n\r\n    function itemKeyDownHandler(e: React.KeyboardEvent<HTMLDivElement>) : void {\r\n        if(e.key === 'ArrowDown') {\r\n            (e.currentTarget?.nextSibling as HTMLElement)?.focus();\r\n        }\r\n        \r\n        if(e.key === 'ArrowUp') {\r\n            (e.currentTarget?.previousSibling as HTMLElement)?.focus();\r\n        }\r\n\r\n        if(e.key === 'Enter') {\r\n            selectItemHandler(e);\r\n        }\r\n    }\r\n\r\n    function filterKeyDownHandler(e: React.KeyboardEvent<HTMLInputElement>) : void {\r\n        if(e.key === 'ArrowDown') {\r\n            document.getElementById(props.htmlId)?.querySelector(\"div\")?.focus();\r\n        }\r\n    }\r\n    \r\n    if(filteredText === null || filteredText === undefined || filteredText === '') {\r\n        filteredOptions = props.options;\r\n    } else {\r\n        filteredOptions = props.options.filter(x => x.displayValue.toLowerCase().indexOf(filteredText.toLowerCase()) > -1);\r\n    }\r\n\r\n    for(let i = 0;i<filteredOptions.length;i++) \r\n    {\r\n        items.push(<div tabIndex={0} onKeyDown={itemKeyDownHandler} onClick={selectItemHandler} role=\"option\" className=\"c-select-options-option\" key={i} data-value={filteredOptions[i].id}>{filteredOptions[i].displayValue}</div>)\r\n    }\r\n\r\n    if(props.showSearch) {\r\n        searchEl = <div id={props.htmlId + '-sokfilter'} className={'c-select-options-search ' + aktivNedtrekk}>\r\n            <input value={filteredText} id={props.htmlId + '-sokfilterInput'} onKeyDown={filterKeyDownHandler} placeholder=\"Filtrer liste\" type=\"text\" onFocus={fokusSokHandler} onChange={searchHandler} className=\"c-select-options-search__input\" />\r\n        </div>;\r\n    }\r\n\r\n    return (\r\n        <div>\r\n            <div id={props.htmlId + '-c-select-options__ledetekst'} className=\"c-select-options__ledetekst\">{props.ledetekst}</div>\r\n            <div className=\"c-select-option-alt\">\r\n                <button\r\n                    {...(props.buttonProps ?? {})}\r\n                    aria-labelledby={props.htmlId + '-c-select-options__ledetekst'}\r\n                    onKeyDown={buttonKeyDownHandler}\r\n                    className={aktivKnapp}\r\n                    aria-haspopup=\"listbox\"\r\n                    onClick={openListHandler}\r\n                >\r\n                    <span className=\"c-select-options__button--text\">{props.value?.displayValue}</span>\r\n                    <span id={props.htmlId + '-c-select-options__button'} className=\"c-select-options__button--arrow\"></span>\r\n                </button>\r\n                {searchEl}\r\n                <div id={props.htmlId} role=\"listbox\" aria-labelledby={`${props.htmlId}-c-select-options__ledetekst`} className={'c-select-options-container js-select-options-container ' + aktivNedtrekk}>\r\n                    {items}\r\n                </div>\r\n            </div>\r\n        </div>\r\n    );\r\n}"],"names":["useState","jsx","jsxs"],"mappings":"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"}