{"version":3,"file":"TablePagination.cjs","sources":["../../../../src/components/table/TablePagination.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n    forwardRef,\n    useCallback,\n    useState,\n    type ChangeEventHandler,\n    type FC,\n    type MouseEventHandler,\n} from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\nimport { ChevronLeftIcon } from \"../icon/icons/ChevronLeftIcon.js\";\nimport { ChevronRightIcon } from \"../icon/icons/ChevronRightIcon.js\";\nimport { NativeSelect } from \"../select/NativeSelect.js\";\nimport { TextInput } from \"../text-input/TextInput.js\";\nimport type { TablePaginationProps } from \"./types.js\";\n\nfunction clamp(min: number, num: number, max: number): number {\n    if (num < min) {\n        return min;\n    }\n\n    if (num > max) {\n        return max;\n    }\n\n    return num;\n}\n\nexport const TablePagination = forwardRef<HTMLDivElement, TablePaginationProps>(\n    (props, ref) => {\n        const {\n            activePage = 0,\n            totalNumberOfRows,\n            rowsPerPage,\n            rowsPerPageItems,\n            className,\n            id: idProp,\n            withGoToPage = false,\n            onChange,\n            onChangeRowsPerPage,\n            labels = {\n                rowsPerPage: \"Rader per side\",\n                previous: \"Forrige\",\n                next: \"Neste\",\n            },\n            ...rest\n        } = props;\n\n        const id = useId(idProp || \"jkl-table-pagination\", {\n            generateSuffix: !idProp,\n        });\n\n        const showAll = rowsPerPage <= 0;\n        const numberOfPages = showAll\n            ? 1\n            : Math.ceil(totalNumberOfRows / rowsPerPage);\n\n        const [currentPage, setCurrentPage] = useState(\n            clamp(0, activePage, numberOfPages - 1),\n        );\n\n        const onPageClick: MouseEventHandler<HTMLButtonElement> = useCallback(\n            (e) => {\n                const toPage = Number.parseInt(\n                    e.currentTarget.dataset.number as string,\n                );\n                onChange(e, toPage, currentPage);\n                setCurrentPage(toPage);\n                setPagePickerValue(String(toPage + 1));\n            },\n            [onChange, currentPage],\n        );\n\n        const [pagePickerValue, setPagePickerValue] = useState(\n            String(currentPage + 1),\n        );\n        const onPageChange: ChangeEventHandler<HTMLInputElement> = useCallback(\n            (e) => {\n                setPagePickerValue(e.target.value);\n                try {\n                    const toPage = Number.parseInt(e.target.value) - 1;\n                    if (Number.isNaN(toPage)) {\n                        return;\n                    }\n\n                    if (toPage >= 0 && toPage < numberOfPages) {\n                        onChange(e, toPage, currentPage);\n                        setCurrentPage(toPage);\n                    }\n                } catch {\n                    return;\n                }\n            },\n            [onChange, currentPage, numberOfPages],\n        );\n\n        const onPrevious: MouseEventHandler<HTMLButtonElement> = useCallback(\n            (e) => {\n                if (currentPage === 0) {\n                    // TODO: skal dette være en no-op i stedet?\n                    onChange(e, currentPage, currentPage);\n                    return;\n                }\n                const toPage = currentPage - 1;\n                onChange(e, toPage, currentPage);\n                setCurrentPage(toPage);\n                setPagePickerValue(String(toPage + 1));\n            },\n            [onChange, currentPage],\n        );\n\n        const onNext: MouseEventHandler<HTMLButtonElement> = useCallback(\n            (e) => {\n                if (currentPage === numberOfPages - 1) {\n                    // TODO: skal dette være en no-op i stedet?\n                    onChange(e, currentPage, currentPage);\n                    return;\n                }\n                const toPage = currentPage + 1;\n                onChange(e, toPage, currentPage);\n                setCurrentPage(toPage);\n                setPagePickerValue(String(toPage + 1));\n            },\n            [onChange, numberOfPages, currentPage],\n        );\n\n        return (\n            <div\n                className={clsx(\"jkl-table-pagination\", className)}\n                {...rest}\n                id={id}\n                ref={ref}\n            >\n                <div className=\"jkl-table-pagination__left\">\n                    <div className=\"jkl-table-pagination__picker jkl-table-pagination__picker--rows\">\n                        <span\n                            className=\"jkl-table-pagination__picker-label\"\n                            aria-hidden=\"true\"\n                        >\n                            {labels.rowsPerPage}:\n                        </span>\n                        <NativeSelect\n                            className=\"jkl-table-pagination__picker-input\"\n                            label={labels.rowsPerPage}\n                            labelProps={{ srOnly: true }}\n                            name={`${id}-rows-per-page`}\n                            items={rowsPerPageItems.map((i) =>\n                                typeof i === \"number\"\n                                    ? String(i)\n                                    : {\n                                          label: i.label,\n                                          value: String(i.value),\n                                      },\n                            )}\n                            value={String(rowsPerPage)}\n                            onChange={onChangeRowsPerPage}\n                            width=\"min(8rem, 100%)\"\n                            inline\n                        />\n                    </div>\n                </div>\n                <span className=\"jkl-table-pagination__total-rows\">\n                    Treff: {totalNumberOfRows}\n                </span>\n                <div className=\"jkl-table-pagination__right\">\n                    {numberOfPages !== 1 && (\n                        <nav className=\"jkl-table-pagination__nav\">\n                            {withGoToPage && (\n                                <div className=\"jkl-table-pagination__picker jkl-table-pagination__picker--page\">\n                                    <span\n                                        className=\"jkl-table-pagination__picker-label\"\n                                        aria-hidden=\"true\"\n                                    >\n                                        {typeof withGoToPage === \"object\"\n                                            ? withGoToPage.gotoLabel\n                                            : \"Gå til side\"}\n                                        :\n                                    </span>\n                                    {/* onChange først ved enter/submit */}\n                                    <TextInput\n                                        className=\"jkl-table-pagination__picker-input\"\n                                        label={\n                                            typeof withGoToPage === \"object\"\n                                                ? withGoToPage.gotoLabel\n                                                : \"Gå til side\"\n                                        }\n                                        labelProps={{ srOnly: true }}\n                                        name={`${id}-go-to-page`}\n                                        value={pagePickerValue}\n                                        width=\"min(4rem, 100%)\"\n                                        onChange={onPageChange}\n                                        aria-invalid={\n                                            pagePickerValue &&\n                                            pagePickerValue !==\n                                                String(currentPage + 1)\n                                                ? \"true\"\n                                                : undefined\n                                        }\n                                    />\n                                </div>\n                            )}\n                            <ul>\n                                <li>\n                                    <IconButton\n                                        className=\"jkl-table-pagination__previous\"\n                                        title={labels.previous}\n                                        onClick={onPrevious}\n                                    >\n                                        <ChevronLeftIcon />\n                                    </IconButton>\n                                </li>\n                                <PaginationPages\n                                    id={id}\n                                    activePage={activePage}\n                                    numberOfPages={numberOfPages}\n                                    onPageClick={onPageClick}\n                                />\n                                <li>\n                                    <IconButton\n                                        className=\"jkl-table-pagination__next\"\n                                        title={labels.next}\n                                        onClick={onNext}\n                                    >\n                                        <ChevronRightIcon />\n                                    </IconButton>\n                                </li>\n                            </ul>\n                        </nav>\n                    )}\n                </div>\n            </div>\n        );\n    },\n);\n\nconst PaginationPages: FC<{\n    id: string;\n    activePage: number;\n    numberOfPages: number;\n    onPageClick: MouseEventHandler;\n}> = ({ id, activePage, numberOfPages, onPageClick }) => {\n    if (numberOfPages <= 7) {\n        return (\n            <>\n                {Array.from({ length: numberOfPages }).map((_, i) => (\n                    <li key={`${id}-page-${i}`}>\n                        <button\n                            className={clsx(\"jkl-table-pagination__page\", {\n                                \"jkl-table-pagination__page--active\":\n                                    activePage === i,\n                            })}\n                            type=\"button\"\n                            data-number={i}\n                            onClick={onPageClick}\n                        >\n                            {i + 1}\n                        </button>\n                    </li>\n                ))}\n            </>\n        );\n    }\n\n    const showStartEllipsis = activePage > 3 && numberOfPages > 7;\n    const showEndEllipsis = activePage < numberOfPages - 4 && numberOfPages > 7;\n\n    const startEllipsis = Math.min(\n        Math.max(activePage - 2, 1),\n        numberOfPages - 6,\n    );\n    const centerPageNumberStart = Math.min(\n        startEllipsis + 1,\n        numberOfPages - 5,\n    );\n    const centerPageNumber = Math.min(\n        centerPageNumberStart + 1,\n        numberOfPages - 4,\n    );\n    const centerPageNumberEnd = Math.min(\n        centerPageNumberStart + 2,\n        numberOfPages - 3,\n    );\n    const endEllipsis = Math.min(centerPageNumberStart + 3, numberOfPages - 2);\n\n    return (\n        <>\n            <li>\n                <PaginationPageButton\n                    isActive={activePage === 0}\n                    number={0}\n                    onClick={onPageClick}\n                />\n            </li>\n            <li>\n                {showStartEllipsis ? (\n                    <span\n                        className=\"jkl-table-pagination__ellipsis\"\n                        aria-hidden\n                    >\n                        {\"...\"}\n                    </span>\n                ) : (\n                    <PaginationPageButton\n                        isActive={activePage === startEllipsis}\n                        number={startEllipsis}\n                        onClick={onPageClick}\n                    />\n                )}\n            </li>\n            <li>\n                <PaginationPageButton\n                    isActive={activePage === centerPageNumberStart}\n                    number={centerPageNumberStart}\n                    onClick={onPageClick}\n                />\n            </li>\n            <li>\n                <PaginationPageButton\n                    isActive={activePage === centerPageNumber}\n                    number={centerPageNumber}\n                    onClick={onPageClick}\n                />\n            </li>\n            <li>\n                <PaginationPageButton\n                    isActive={activePage === centerPageNumberEnd}\n                    number={centerPageNumberEnd}\n                    onClick={onPageClick}\n                />\n            </li>\n            <li>\n                {showEndEllipsis ? (\n                    <span\n                        className=\"jkl-table-pagination__ellipsis\"\n                        aria-hidden\n                    >\n                        {\"...\"}\n                    </span>\n                ) : (\n                    <PaginationPageButton\n                        isActive={activePage === endEllipsis}\n                        number={endEllipsis}\n                        onClick={onPageClick}\n                    />\n                )}\n            </li>\n            <li>\n                <PaginationPageButton\n                    isActive={activePage === numberOfPages - 1}\n                    number={numberOfPages - 1}\n                    onClick={onPageClick}\n                />\n            </li>\n        </>\n    );\n};\n\nconst PaginationPageButton: FC<{\n    isActive: boolean;\n    number: number;\n    onClick: MouseEventHandler;\n}> = ({ isActive, number, onClick, ...rest }) => (\n    <button\n        className={clsx(\"jkl-table-pagination__page\", {\n            \"jkl-table-pagination__page--active\": isActive,\n        })}\n        type=\"button\"\n        data-number={number}\n        onClick={onClick}\n        {...rest}\n    >\n        {number + 1}\n    </button>\n);\n\nTablePagination.displayName = \"TablePagination\";\n"],"names":["TablePagination","forwardRef","props","ref","activePage","totalNumberOfRows","rowsPerPage","rowsPerPageItems","className","id","idProp","withGoToPage","onChange","onChangeRowsPerPage","labels","previous","next","rest","useId","generateSuffix","numberOfPages","Math","ceil","currentPage","setCurrentPage","useState","min","num","max","clamp","onPageClick","useCallback","e","toPage","Number","parseInt","currentTarget","dataset","number","setPagePickerValue","String","pagePickerValue","onPageChange","target","value","isNaN","onPrevious","onNext","jsxs","clsx","children","jsx","NativeSelect","label","labelProps","srOnly","name","items","map","i","width","inline","gotoLabel","TextInput","IconButton","title","onClick","ChevronLeftIcon","PaginationPages","ChevronRightIcon","Fragment","Array","from","length","_","type","showStartEllipsis","showEndEllipsis","startEllipsis","centerPageNumberStart","centerPageNumber","centerPageNumberEnd","endEllipsis","PaginationPageButton","isActive","displayName"],"mappings":"obA6BO,MAAMA,EAAkBC,EAAAA,WAC3B,CAACC,EAAOC,KACJ,MACIC,WAAAA,EAAa,EACbC,kBAAAA,EACAC,YAAAA,EACAC,iBAAAA,EACAC,UAAAA,EACAC,GAAIC,EACJC,aAAAA,GAAe,EACfC,SAAAA,EACAC,oBAAAA,EACAC,OAAAA,EAAS,CACLR,YAAa,iBACbS,SAAU,UACVC,KAAM,YAEPC,GACHf,EAEEO,EAAKS,EAAAA,MAAMR,GAAU,uBAAwB,CAC/CS,gBAAiBT,IAIfU,EADUd,GAAe,EAEzB,EACAe,KAAKC,KAAKjB,EAAoBC,IAE7BiB,EAAaC,GAAkBC,EAAAA,SAzC9C,SAAeC,EAAaC,EAAaC,GACrC,OAAID,EAAMD,EACCA,EAGPC,EAAMC,EACCA,EAGJD,CACX,CAgCYE,CAAM,EAAGzB,EAAYgB,EAAgB,IAGnCU,EAAoDC,EAAAA,YACrDC,IACG,MAAMC,EAASC,OAAOC,SAClBH,EAAEI,cAAcC,QAAQC,QAE5B1B,EAASoB,EAAGC,EAAQV,GACpBC,EAAeS,GACfM,EAAmBC,OAAOP,EAAS,KAEvC,CAACrB,EAAUW,KAGRkB,EAAiBF,GAAsBd,EAAAA,SAC1Ce,OAAOjB,EAAc,IAEnBmB,EAAqDX,EAAAA,YACtDC,IACGO,EAAmBP,EAAEW,OAAOC,OAC5B,IACI,MAAMX,EAASC,OAAOC,SAASH,EAAEW,OAAOC,OAAS,EACjD,GAAIV,OAAOW,MAAMZ,GACb,OAGAA,GAAU,GAAKA,EAASb,IACxBR,EAASoB,EAAGC,EAAQV,GACpBC,EAAeS,GAEvB,CAAA,MACI,MACJ,GAEJ,CAACrB,EAAUW,EAAaH,IAGtB0B,EAAmDf,EAAAA,YACpDC,IACG,GAAoB,IAAhBT,EAGA,YADAX,EAASoB,EAAGT,EAAaA,GAG7B,MAAMU,EAASV,EAAc,EAC7BX,EAASoB,EAAGC,EAAQV,GACpBC,EAAeS,GACfM,EAAmBC,OAAOP,EAAS,KAEvC,CAACrB,EAAUW,IAGTwB,EAA+ChB,EAAAA,YAChDC,IACG,GAAIT,IAAgBH,EAAgB,EAGhC,YADAR,EAASoB,EAAGT,EAAaA,GAG7B,MAAMU,EAASV,EAAc,EAC7BX,EAASoB,EAAGC,EAAQV,GACpBC,EAAeS,GACfM,EAAmBC,OAAOP,EAAS,KAEvC,CAACrB,EAAUQ,EAAeG,IAG9B,OACIyB,EAAAA,KAAC,MAAA,CACGxC,UAAWyC,EAAAA,KAAK,uBAAwBzC,MACpCS,EACJR,GAAAA,EACAN,IAAAA,EAEA+C,SAAA,CAAAC,EAAAA,IAAC,OAAI3C,UAAU,6BACX0C,SAAAF,EAAAA,KAAC,MAAA,CAAIxC,UAAU,kEACX0C,SAAA,CAAAF,EAAAA,KAAC,OAAA,CACGxC,UAAU,qCACV,cAAY,OAEX0C,SAAA,CAAApC,EAAOR,YAAY,OAExB6C,EAAAA,IAACC,EAAAA,aAAA,CACG5C,UAAU,qCACV6C,MAAOvC,EAAOR,YACdgD,WAAY,CAAEC,QAAQ,GACtBC,KAAM,GAAG/C,kBACTgD,MAAOlD,EAAiBmD,IAAKC,GACZ,iBAANA,EACDnB,OAAOmB,GACP,CACIN,MAAOM,EAAEN,MACTT,MAAOJ,OAAOmB,EAAEf,SAG9BA,MAAOJ,OAAOlC,GACdM,SAAUC,EACV+C,MAAM,kBACNC,QAAM,SAIlBb,EAAAA,KAAC,OAAA,CAAKxC,UAAU,mCAAmC0C,SAAA,CAAA,UACvC7C,KAEZ8C,EAAAA,IAAC,OAAI3C,UAAU,8BACV0C,SAAkB,OACfF,EAAAA,KAAC,MAAA,CAAIxC,UAAU,4BACV0C,SAAA,CAAAvC,GACGqC,EAAAA,KAAC,MAAA,CAAIxC,UAAU,kEACX0C,SAAA,CAAAF,EAAAA,KAAC,OAAA,CACGxC,UAAU,qCACV,cAAY,OAEX0C,SAAA,CAAwB,iBAAjBvC,EACFA,EAAamD,UACb,cAAc,OAIxBX,EAAAA,IAACY,EAAAA,UAAA,CACGvD,UAAU,qCACV6C,MAC4B,iBAAjB1C,EACDA,EAAamD,UACb,cAEVR,WAAY,CAAEC,QAAQ,GACtBC,KAAM,GAAG/C,eACTmC,MAAOH,EACPmB,MAAM,kBACNhD,SAAU8B,EACV,eACID,GACAA,IACID,OAAOjB,EAAc,GACnB,YACA,cAKrB,KAAA,CACG2B,SAAA,CAAAC,MAAC,KAAA,CACGD,SAAAC,EAAAA,IAACa,EAAAA,WAAA,CACGxD,UAAU,iCACVyD,MAAOnD,EAAOC,SACdmD,QAASpB,EAETI,eAACiB,EAAAA,gBAAA,CAAA,OAGThB,EAAAA,IAACiB,EAAA,CACG3D,GAAAA,EACAL,WAAAA,EACAgB,cAAAA,EACAU,YAAAA,UAEH,KAAA,CACGoB,SAAAC,EAAAA,IAACa,EAAAA,WAAA,CACGxD,UAAU,6BACVyD,MAAOnD,EAAOE,KACdkD,QAASnB,EAETG,eAACmB,EAAAA,iBAAA,CAAA,oBAYnCD,EAKD,EAAG3D,GAAAA,EAAIL,WAAAA,EAAYgB,cAAAA,EAAeU,YAAAA,MACnC,GAAIV,GAAiB,EACjB,OACI+B,EAAAA,IAAAmB,EAAAA,SAAA,CACKpB,SAAAqB,MAAMC,KAAK,CAAEC,OAAQrD,IAAiBsC,IAAI,CAACgB,EAAGf,UAC1C,KAAA,CACGT,SAAAC,EAAAA,IAAC,SAAA,CACG3C,UAAWyC,EAAAA,KAAK,6BAA8B,CAC1C,qCACI7C,IAAeuD,IAEvBgB,KAAK,SACL,cAAahB,EACbO,QAASpC,EAERoB,SAAAS,EAAI,KAVJ,GAAGlD,UAAWkD,QAkBvC,MAAMiB,EAAoBxE,EAAa,GAAKgB,EAAgB,EACtDyD,EAAkBzE,EAAagB,EAAgB,GAAKA,EAAgB,EAEpE0D,EAAgBzD,KAAKK,IACvBL,KAAKO,IAAIxB,EAAa,EAAG,GACzBgB,EAAgB,GAEd2D,EAAwB1D,KAAKK,IAC/BoD,EAAgB,EAChB1D,EAAgB,GAEd4D,EAAmB3D,KAAKK,IAC1BqD,EAAwB,EACxB3D,EAAgB,GAEd6D,EAAsB5D,KAAKK,IAC7BqD,EAAwB,EACxB3D,EAAgB,GAEd8D,EAAc7D,KAAKK,IAAIqD,EAAwB,EAAG3D,EAAgB,GAExE,OACI4B,EAAAA,KAAAsB,WAAA,CACIpB,SAAA,CAAAC,MAAC,KAAA,CACGD,SAAAC,EAAAA,IAACgC,EAAA,CACGC,SAAyB,IAAfhF,EACVkC,OAAQ,EACR4B,QAASpC,MAGjBqB,EAAAA,IAAC,MACID,SAAA0B,EACGzB,EAAAA,IAAC,OAAA,CACG3C,UAAU,iCACV,eAAW,EAEV0C,SAAA,QAGLC,EAAAA,IAACgC,EAAA,CACGC,SAAUhF,IAAe0E,EACzBxC,OAAQwC,EACRZ,QAASpC,YAIpB,KAAA,CACGoB,SAAAC,EAAAA,IAACgC,EAAA,CACGC,SAAUhF,IAAe2E,EACzBzC,OAAQyC,EACRb,QAASpC,YAGhB,KAAA,CACGoB,SAAAC,EAAAA,IAACgC,EAAA,CACGC,SAAUhF,IAAe4E,EACzB1C,OAAQ0C,EACRd,QAASpC,YAGhB,KAAA,CACGoB,SAAAC,EAAAA,IAACgC,EAAA,CACGC,SAAUhF,IAAe6E,EACzB3C,OAAQ2C,EACRf,QAASpC,MAGjBqB,EAAAA,IAAC,MACID,SAAA2B,EACG1B,EAAAA,IAAC,OAAA,CACG3C,UAAU,iCACV,eAAW,EAEV0C,SAAA,QAGLC,EAAAA,IAACgC,EAAA,CACGC,SAAUhF,IAAe8E,EACzB5C,OAAQ4C,EACRhB,QAASpC,YAIpB,KAAA,CACGoB,SAAAC,EAAAA,IAACgC,EAAA,CACGC,SAAUhF,IAAegB,EAAgB,EACzCkB,OAAQlB,EAAgB,EACxB8C,QAASpC,UAOvBqD,EAID,EAAGC,SAAAA,EAAU9C,OAAAA,EAAQ4B,QAAAA,KAAYjD,KAClCkC,EAAAA,IAAC,SAAA,CACG3C,UAAWyC,EAAAA,KAAK,6BAA8B,CAC1C,qCAAsCmC,IAE1CT,KAAK,SACL,cAAarC,EACb4B,QAAAA,KACIjD,EAEHiC,SAAAZ,EAAS,IAIlBtC,EAAgBqF,YAAc"}