{"version":3,"file":"TabsPanelV2Desktop.6f45b592.es5.js","mappings":"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","sources":["webpack://assr-alfaleasing/./node_modules/@alfa-bank/site-layout/src/desktop/index.ts","webpack://assr-alfaleasing/./node_modules/@alfa-bank/site-layout/src/desktop/desktop.css?ae96","webpack://assr-alfaleasing/./node_modules/@alfa-bank/site-layout/src/desktop/desktop.tsx","webpack://assr-alfaleasing/./node_modules/@alfa-bank/site-layout/src/helpers/map-width.ts","webpack://assr-alfaleasing/./node_modules/@alfa-bank/site-tabs/src/components/headers/panel-header-v2/desktop/styles/styles.css?7b96","webpack://assr-alfaleasing/./node_modules/@alfa-bank/site-tabs/src/components/headers/panel-header-v2/desktop/styles/with-icon.css?d7df","webpack://assr-alfaleasing/./node_modules/@alfa-bank/site-tabs/src/tabs-panel-v2-desktop.ts","webpack://assr-alfaleasing/./node_modules/@alfa-bank/site-tabs/src/components/headers/panel-header-v2/desktop/panel-header-v2.tsx","webpack://assr-alfaleasing/./node_modules/@alfa-bank/site-tabs/src/components/headers/panel-header-v2/desktop/hooks/use-tabs-panel-v2.ts"],"sourcesContent":["import { createWidget } from '@alfa-bank/site-util-create-widget/create-widget';\n\nimport type { TLayoutDesktop, IDepsDesktop } from '../models';\n\nimport { Layout as Component } from './desktop';\nimport styles from './desktop.css';\n\nexport const LayoutDesktop = createWidget<IDepsDesktop, TLayoutDesktop>({ styles })(Component);\n","// extracted by mini-css-extract-plugin\nexport default {\"layout\":\"a3buV\",\"layoutContent\":\"b3buV\"};","import React from 'react';\nimport type { FC } from 'react';\nimport cn from 'classnames';\n\nimport { mapWidth } from '../helpers/map-width';\nimport type { TLayoutDesktop } from '../models';\n\nexport const Layout: FC<TLayoutDesktop> = ({\n    children,\n    className,\n    classNames: { layout, layoutContent } = {},\n    contentWidth,\n    dataTestId = 'layout',\n    hasPadding = true,\n    scroll,\n    styles,\n    ...props\n}) => {\n    return (\n        <div\n            className={cn(\n                {\n                    [styles.layout]: !scroll && hasPadding,\n                },\n                layout,\n                className\n            )}\n            data-test-id={dataTestId}\n            {...props}\n        >\n            <div\n                className={cn(\n                    {\n                        [styles.layoutContent]: !scroll,\n                    },\n                    layoutContent\n                )}\n                style={contentWidth ? { maxWidth: mapWidth(contentWidth) } : undefined}\n            >\n                {children}\n            </div>\n        </div>\n    );\n};\n","const isNumber = (value: string | number): value is number => typeof value === 'number';\n\nexport const mapWidth = (value: string | number) => {\n    if (isNumber(value) && value > 0 && value <= 1) {\n        return `${value * 100}%`;\n    }\n\n    if (isNumber(value) && value > 1) {\n        return `${value}px`;\n    }\n\n    return value;\n};\n","// extracted by mini-css-extract-plugin\nexport default {\"background-$(backgroundColorBg)\":\"a12ie\",\"background-$(backgroundColor)\":\"b12ie\",\"indicator\":\"c12ie\",\"header\":\"d12ie\",\"selected\":\"e12ie\",\"mobile\":\"f12ie\",\"lightTheme\":\"g12ie\",\"clicked\":\"h12ie\",\"external\":\"i12ie\",\"invertedTheme\":\"j12ie\",\"backCover\":\"k12ie\",\"light\":\"l12ie\",\"inverted\":\"m12ie\",\"withIcon\":\"n12ie\",\"fullBlock\":\"o12ie\",\"uniqueTab\":\"p12ie\",\"headerContainer\":\"q12ie\",\"headerList\":\"r12ie\"};","// extracted by mini-css-extract-plugin\nexport default {\"background-$(backgroundColorBg)\":\"aNI-u\",\"background-$(backgroundColor)\":\"bNI-u\",\"indicator\":\"cNI-u\",\"header\":\"dNI-u\",\"selected\":\"eNI-u\",\"mobile\":\"fNI-u\",\"lightTheme\":\"gNI-u\",\"clicked\":\"hNI-u\",\"external\":\"iNI-u\",\"invertedTheme\":\"jNI-u\"};","import { createWidget } from '@alfa-bank/site-util-create-widget/create-widget';\n\nimport { PanelHeaderV2Desktop as TabsList } from './components/headers/panel-header-v2/desktop';\nimport { Tabs as Component } from './components/tabs';\nimport type { ITabsDeps, TTabs } from './components/tabs/models';\n\nexport const TabsPanelV2Desktop = createWidget<ITabsDeps, TTabs>({\n    TabsList,\n})(Component);\n","import cn from 'classnames';\nimport React, { useEffect } from 'react';\nimport { LayoutDesktop } from '@alfa-bank/site-layout/desktop';\n\nimport { RenderedHeader } from '../../tabs-header/components/rendered-header';\nimport type { TPanelHeaderDesktopV2Props } from '../models';\n\nimport defaultStyles from './styles/styles.css';\nimport withIconStyles from './styles/with-icon.css';\nimport { useTabsPanelV2 } from './hooks/use-tabs-panel-v2';\n\nexport const PanelHeaderV2Desktop = (props: TPanelHeaderDesktopV2Props) => {\n    const {\n        className,\n        dataTestId = 'TabsHeader',\n        iconBackgroudColor = 'transparent',\n        panelBackgroundColor,\n        selectedID,\n        theme = 'light',\n        titles,\n        widthTab = 'equal',\n        widthTabPanel = 'fullBlock',\n        withLayout = false,\n    } = props;\n\n    const {\n        headerContainer,\n        headerList,\n        onTabMouseDownHandler,\n        onTabMouseUpHandler,\n        selectedTab,\n        tabWidthList,\n        tabsProps,\n        withIcon,\n    } = useTabsPanelV2(props);\n\n    useEffect(() => {\n        const selectedTabOffset = selectedTab.current?.offsetLeft ?? 0;\n        const selectedTabWidth = selectedTab.current?.offsetWidth ?? 0;\n        const headerListWidth = headerContainer.current?.offsetWidth ?? 0;\n\n        headerContainer.current?.scroll({\n            behavior: 'smooth',\n            left:\n                selectedTabOffset -\n                Math.round(headerListWidth / 2) +\n                Math.round(selectedTabWidth / 2),\n        });\n    }, [headerContainer, headerList, selectedID, selectedTab]);\n\n    const renderComponent = (\n        <div\n            className={cn(\n                defaultStyles.backCover,\n                defaultStyles[theme as keyof typeof defaultStyles],\n                defaultStyles[widthTabPanel],\n                {\n                    [defaultStyles.withIcon]: withIcon,\n                }\n            )}\n            style={\n                panelBackgroundColor && {\n                    backgroundColor: panelBackgroundColor,\n                }\n            }\n        >\n            <RenderedHeader\n                className={className}\n                dataTestId={dataTestId}\n                headerContainer={headerContainer}\n                headerList={headerList}\n                iconBackgroundColor={iconBackgroudColor}\n                selectedID={selectedID}\n                selectedTab={selectedTab}\n                styles={withIcon ? { ...defaultStyles, ...withIconStyles } : defaultStyles}\n                tabInlineStyle={\n                    widthTab === 'equal'\n                        ? { minWidth: `${tabWidthList.sort((a, b) => b - a)[0]}px` }\n                        : undefined\n                }\n                titles={titles}\n                {...tabsProps}\n                onTabMouseDown={onTabMouseDownHandler}\n                onTabMouseUp={onTabMouseUpHandler}\n                translateX={0}\n            />\n        </div>\n    );\n\n    return <>{withLayout ? <LayoutDesktop>{renderComponent}</LayoutDesktop> : renderComponent}</>;\n};\n","import { useState, useCallback, useEffect, useMemo } from 'react';\n\nimport { useTabsHeader } from '../../../tabs-header/hooks/use-tabs-header';\nimport type { TPanelHeaderDesktopV2Props } from '../../models';\nimport type { IOnChangeCallback } from '../../../../../models';\nimport withIconStyles from '../styles/with-icon.css';\nimport defaultStyles from '../styles/styles.css';\n\ntype TUseTabsPanelV2 = TPanelHeaderDesktopV2Props;\n\nexport const useTabsPanelV2 = ({\n    onChange,\n    selectedID,\n    theme = 'light',\n    titles,\n    widthTab,\n}: TUseTabsPanelV2) => {\n    const [biggerTabWidth, setBiggerTabWidth] = useState<number>(0);\n\n    const handleOnChange = useCallback(\n        (params: IOnChangeCallback) => {\n            onChange(params);\n        },\n        [onChange]\n    );\n    const { headerContainer, headerList, selectedTab, withIcon, ...tabsProps } = useTabsHeader({\n        onChange: handleOnChange,\n        titles,\n        theme,\n        selectedID,\n    });\n\n    useEffect(() => {\n        const selectedTabOffset = selectedTab.current?.offsetLeft ?? 0;\n        const selectedTabWidth = selectedTab.current?.offsetWidth ?? 0;\n        const headerListWidth = headerContainer.current?.offsetWidth ?? 0;\n\n        headerContainer.current?.scroll({\n            behavior: 'smooth',\n            left:\n                selectedTabOffset -\n                Math.round(headerListWidth / 2) +\n                Math.round(selectedTabWidth / 2),\n        });\n    }, [headerContainer, headerList, selectedTab]);\n\n    const tabWidthList: number[] = useMemo(() => [], []);\n\n    useEffect(() => {\n        if (headerList.current?.children.length && widthTab === 'equal') {\n            for (let i = 1; headerList.current?.children.length > i; i++) {\n                if (headerList.current.children[i].role === 'tab') {\n                    tabWidthList.push(headerList.current.children[i].getBoundingClientRect().width);\n                }\n            }\n        }\n    }, [headerList, tabWidthList, widthTab]);\n\n    useEffect(() => {\n        setBiggerTabWidth(tabWidthList.sort((a, b) => b - a)[0]);\n    }, [biggerTabWidth, tabWidthList]);\n\n    const onTabMouseDownHandler = useCallback(\n        ({ target }: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n            (target as HTMLElement).classList.add(\n                withIcon ? withIconStyles.clicked : defaultStyles.clicked\n            );\n            (target as HTMLElement).classList.add(\n                withIcon ? withIconStyles.external : defaultStyles.external\n            );\n        },\n        [withIcon]\n    );\n\n    const onTabMouseUpHandler = useCallback(\n        ({ target }: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n            (target as HTMLElement).classList.remove(\n                withIcon ? withIconStyles.clicked : defaultStyles.clicked\n            );\n            (target as HTMLElement).classList.remove(\n                withIcon ? withIconStyles.external : defaultStyles.external\n            );\n        },\n        [withIcon]\n    );\n\n    return {\n        headerContainer,\n        headerList,\n        onTabMouseDownHandler,\n        onTabMouseUpHandler,\n        selectedTab,\n        tabWidthList,\n        tabsProps,\n        withIcon,\n    };\n};\n"],"names":["LayoutDesktop","createWidget","styles","children","className","classNames","layout","layoutContent","contentWidth","dataTestId","hasPadding","scroll","props","cn","style","maxWidth","mapWidth","undefined","isNumber","value","TabsPanelV2Desktop","TabsList","iconBackgroudColor","panelBackgroundColor","selectedID","theme","titles","widthTab","widthTabPanel","withLayout","onChange","useState","biggerTabWidth","setBiggerTabWidth","handleOnChange","useCallback","params","useTabsHeader","headerContainer","headerList","selectedTab","withIcon","tabsProps","useEffect","selectedTabOffset","current","offsetLeft","selectedTabWidth","offsetWidth","headerListWidth","behavior","left","Math","round","tabWidthList","useMemo","length","i","role","push","getBoundingClientRect","width","sort","a","b","onTabMouseDownHandler","target","classList","add","withIconStyles","defaultStyles","onTabMouseUpHandler","remove","useTabsPanelV2","renderComponent","backgroundColor","iconBackgroundColor","tabInlineStyle","minWidth","onTabMouseDown","onTabMouseUp","translateX","Component"],"sourceRoot":""}