@foxford/ui 2.119.0-beta-3939fb6-20260713 → 2.119.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/Alert/Alert.js +1 -1
- package/components/Alert/Alert.js.map +1 -1
- package/components/Alert/Alert.mjs +1 -1
- package/components/Alert/Alert.mjs.map +1 -1
- package/components/Alert/CountdownCircle.js +2 -0
- package/components/Alert/CountdownCircle.js.map +1 -0
- package/components/Alert/CountdownCircle.mjs +2 -0
- package/components/Alert/CountdownCircle.mjs.map +1 -0
- package/components/Alert/style.js +1 -1
- package/components/Alert/style.js.map +1 -1
- package/components/Alert/style.mjs +1 -1
- package/components/Alert/style.mjs.map +1 -1
- package/components/Alert/utils.js +2 -0
- package/components/Alert/utils.js.map +1 -0
- package/components/Alert/utils.mjs +2 -0
- package/components/Alert/utils.mjs.map +1 -0
- package/components/Button/Button.js +1 -1
- package/components/Button/Button.js.map +1 -1
- package/components/Button/Button.mjs +1 -1
- package/components/Button/Button.mjs.map +1 -1
- package/components/DialogComponent/DialogComponent.js +1 -1
- package/components/DialogComponent/DialogComponent.js.map +1 -1
- package/components/DialogComponent/DialogComponent.mjs +1 -1
- package/components/DialogComponent/DialogComponent.mjs.map +1 -1
- package/components/IconButton/IconButton.js +1 -1
- package/components/IconButton/IconButton.js.map +1 -1
- package/components/IconButton/IconButton.mjs +1 -1
- package/components/IconButton/IconButton.mjs.map +1 -1
- package/components/IconButton/style.js +1 -1
- package/components/IconButton/style.js.map +1 -1
- package/components/IconButton/style.mjs +1 -1
- package/components/IconButton/style.mjs.map +1 -1
- package/components/Media/Media.js +1 -1
- package/components/Media/Media.js.map +1 -1
- package/components/Media/Media.mjs +1 -1
- package/components/Media/Media.mjs.map +1 -1
- package/components/Media/MediaMatcher.js +2 -0
- package/components/Media/MediaMatcher.js.map +1 -0
- package/components/Media/MediaMatcher.mjs +2 -0
- package/components/Media/MediaMatcher.mjs.map +1 -0
- package/components/Media/MediaMatchers.js +1 -1
- package/components/Media/MediaMatchers.js.map +1 -1
- package/components/Media/MediaMatchers.mjs +1 -1
- package/components/Media/MediaMatchers.mjs.map +1 -1
- package/components/Media/MediaMediator.js +2 -0
- package/components/Media/MediaMediator.js.map +1 -0
- package/components/Media/MediaMediator.mjs +2 -0
- package/components/Media/MediaMediator.mjs.map +1 -0
- package/{shared/context/media.js → components/Media/context.js} +1 -1
- package/components/Media/context.js.map +1 -0
- package/{shared/context/media.mjs → components/Media/context.mjs} +1 -1
- package/components/Media/context.mjs.map +1 -0
- package/{hooks → components/Media}/useMediaConnector.js +1 -1
- package/components/Media/useMediaConnector.js.map +1 -0
- package/components/Media/useMediaConnector.mjs +2 -0
- package/components/Media/useMediaConnector.mjs.map +1 -0
- package/components/Media/useMediaMatchers.js.map +1 -0
- package/components/Media/useMediaMatchers.mjs.map +1 -0
- package/components/Media/useMediaPropsMatches.js.map +1 -1
- package/components/Media/useMediaPropsMatches.mjs.map +1 -1
- package/components/TooltipComponent/TooltipComponent.js +1 -1
- package/components/TooltipComponent/TooltipComponent.js.map +1 -1
- package/components/TooltipComponent/TooltipComponent.mjs +1 -1
- package/components/TooltipComponent/TooltipComponent.mjs.map +1 -1
- package/dts/index.d.ts +659 -911
- package/icon-pack/src/collection.json.js +1 -1
- package/icon-pack/src/collection.json.mjs +1 -1
- package/index.js +1 -1
- package/index.mjs +1 -1
- package/mixins/responsive-margin.js.map +1 -1
- package/mixins/responsive-margin.mjs.map +1 -1
- package/package.json +2 -2
- package/theme/colors-dark.js +1 -1
- package/theme/colors-dark.js.map +1 -1
- package/theme/colors-dark.mjs +1 -1
- package/theme/colors-dark.mjs.map +1 -1
- package/components/Alert/sizes.js +0 -2
- package/components/Alert/sizes.js.map +0 -1
- package/components/Alert/sizes.mjs +0 -2
- package/components/Alert/sizes.mjs.map +0 -1
- package/components/Alert/useAlertProps.js +0 -2
- package/components/Alert/useAlertProps.js.map +0 -1
- package/components/Alert/useAlertProps.mjs +0 -2
- package/components/Alert/useAlertProps.mjs.map +0 -1
- package/components/Timer/Timer.js +0 -2
- package/components/Timer/Timer.js.map +0 -1
- package/components/Timer/Timer.mjs +0 -2
- package/components/Timer/Timer.mjs.map +0 -1
- package/components/Timer/context.js +0 -2
- package/components/Timer/context.js.map +0 -1
- package/components/Timer/context.mjs +0 -2
- package/components/Timer/context.mjs.map +0 -1
- package/components/Timer/images/Circle.svg.js +0 -2
- package/components/Timer/images/Circle.svg.js.map +0 -1
- package/components/Timer/images/Circle.svg.mjs +0 -2
- package/components/Timer/images/Circle.svg.mjs.map +0 -1
- package/components/Timer/sizes.js +0 -2
- package/components/Timer/sizes.js.map +0 -1
- package/components/Timer/sizes.mjs +0 -2
- package/components/Timer/sizes.mjs.map +0 -1
- package/components/Timer/styled.js +0 -2
- package/components/Timer/styled.js.map +0 -1
- package/components/Timer/styled.mjs +0 -2
- package/components/Timer/styled.mjs.map +0 -1
- package/components/Timer/useTimer.js +0 -2
- package/components/Timer/useTimer.js.map +0 -1
- package/components/Timer/useTimer.mjs +0 -2
- package/components/Timer/useTimer.mjs.map +0 -1
- package/components/Timer/useTimerProps.js +0 -2
- package/components/Timer/useTimerProps.js.map +0 -1
- package/components/Timer/useTimerProps.mjs +0 -2
- package/components/Timer/useTimerProps.mjs.map +0 -1
- package/hooks/useMediaConnector.js.map +0 -1
- package/hooks/useMediaConnector.mjs +0 -2
- package/hooks/useMediaConnector.mjs.map +0 -1
- package/hooks/useMediaMatchers.js.map +0 -1
- package/hooks/useMediaMatchers.mjs.map +0 -1
- package/hooks/useResponsiveLayoutProps.js +0 -2
- package/hooks/useResponsiveLayoutProps.js.map +0 -1
- package/hooks/useResponsiveLayoutProps.mjs +0 -2
- package/hooks/useResponsiveLayoutProps.mjs.map +0 -1
- package/hooks/useResponsiveMarginProps.js +0 -2
- package/hooks/useResponsiveMarginProps.js.map +0 -1
- package/hooks/useResponsiveMarginProps.mjs +0 -2
- package/hooks/useResponsiveMarginProps.mjs.map +0 -1
- package/hooks/useResponsiveProps.js +0 -2
- package/hooks/useResponsiveProps.js.map +0 -1
- package/hooks/useResponsiveProps.mjs +0 -2
- package/hooks/useResponsiveProps.mjs.map +0 -1
- package/hooks/useResponsiveSizeProps.js +0 -2
- package/hooks/useResponsiveSizeProps.js.map +0 -1
- package/hooks/useResponsiveSizeProps.mjs +0 -2
- package/hooks/useResponsiveSizeProps.mjs.map +0 -1
- package/shared/context/media.js.map +0 -1
- package/shared/context/media.mjs.map +0 -1
- package/shared/media/MediaMatcher.js +0 -2
- package/shared/media/MediaMatcher.js.map +0 -1
- package/shared/media/MediaMatcher.mjs +0 -2
- package/shared/media/MediaMatcher.mjs.map +0 -1
- package/shared/media/MediaMediator.js +0 -2
- package/shared/media/MediaMediator.js.map +0 -1
- package/shared/media/MediaMediator.mjs +0 -2
- package/shared/media/MediaMediator.mjs.map +0 -1
- package/shared/utils/isPointerSupported.js +0 -2
- package/shared/utils/isPointerSupported.js.map +0 -1
- package/shared/utils/isPointerSupported.mjs +0 -2
- package/shared/utils/isPointerSupported.mjs.map +0 -1
- /package/{hooks → components/Media}/useMediaMatchers.js +0 -0
- /package/{hooks → components/Media}/useMediaMatchers.mjs +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.mjs","sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["/* eslint-disable prefer-const */\nimport { forwardRef } from 'react'\nimport { useTheme } from 'styled-components'\nimport { CheckFill, LoaderFill } from '@foxford/icon-pack'\nimport { useClassname } from 'hooks/useClassname'\nimport {
|
|
1
|
+
{"version":3,"file":"Button.mjs","sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["/* eslint-disable prefer-const */\nimport { forwardRef } from 'react'\nimport { useTheme } from 'styled-components'\nimport { CheckFill, LoaderFill } from '@foxford/icon-pack'\nimport { useClassname } from 'hooks/useClassname'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport type { MergedProps } from 'hocs/withMergedProps'\nimport { Icon } from 'components/Icon'\nimport { Text } from 'components/Text'\nimport type { IconProps } from 'components/Icon'\nimport type { TextProps } from 'components/Text'\nimport { useComputedRel, useComputedLinkProps } from './hooks'\nimport { SIZES, SIZES_ROUND, SIZES_ICON, SIZES_TEXT } from './sizes'\nimport { SIZES_DEFAULT, SIZES_ROUND_DEFAULT, PROPS_BY_SIZE, SIZES_TEXT_DEFAULT } from './sizes-default'\nimport type { ButtonProps, Size } from './types'\nimport * as Styled from './style'\n\nconst COMPONENT_NAME = 'Button'\n\n/**\n *\n * Контрол многоцелевого назначения.\n *\n * Поддерживается \"ref\" и все нативные атрибуты \\<button\\> элемента.\n */\nconst Button: React.ForwardRefExoticComponent<ButtonProps> = withMergedProps<ButtonProps, HTMLButtonElement>(\n forwardRef<HTMLButtonElement, MergedProps<ButtonProps>>((props, ref) => {\n let {\n size = 'm',\n inline = true,\n rounded = true,\n color = 'accent',\n fontColor = 'white',\n showContentOnStatus,\n textProps: textPropsProp = {},\n iconProps: iconPropsProp = {},\n leftIconProps = {},\n rightIconProps = {},\n as: _as,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n className,\n children,\n content,\n fontWeight,\n icon,\n innerRef,\n ...restProps\n } = props\n\n const theme = useTheme()\n\n if (restProps.preset === 'default' && typeof size === 'string' && !restProps.round) {\n const propsBySize = PROPS_BY_SIZE[size as Size] ?? {}\n restProps = { ...propsBySize, ...restProps }\n }\n\n if (restProps.href) _as = 'a'\n if (restProps.to) _as = theme.link\n if (restProps.disabled) _as = 'button'\n\n if (restProps.primary) color = 'primary'\n if (restProps.secondary) color = 'atlantis'\n\n const rootClassName = useClassname(COMPONENT_NAME, className)\n const textClassName = useClassname(COMPONENT_NAME)\n const rel = useComputedRel(theme, restProps)\n const linkProps = useComputedLinkProps(_as, restProps)\n\n let [before, after] = Array.isArray(icon) ? icon : [icon]\n\n const sizeProps = {\n size,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n }\n\n const textProps: TextProps = {\n ...sizeProps,\n as: 'span',\n color: 'inherit',\n weight: fontWeight ?? (restProps.preset === 'brand' ? 800 : 600),\n lineHeight: restProps.preset === 'brand' ? 1.2 : 1,\n sizes: restProps.preset === 'brand' ? SIZES_TEXT : SIZES_TEXT_DEFAULT,\n }\n\n const iconProps: IconProps = {\n ...sizeProps,\n color: 'inherit',\n preset: restProps.preset,\n sizes: SIZES_ICON,\n }\n\n const success = restProps.preset === 'brand' && restProps.success\n const loading = restProps.preset === 'brand' && restProps.loading\n\n const mainContent =\n typeof children !== 'function' && (children || content) ? (\n <Text className={`${textClassName}__content`} {...textProps} {...textPropsProp}>\n {children || content}\n </Text>\n ) : null\n\n return (\n <Styled.Root\n {...restProps}\n {...linkProps}\n {...sizeProps}\n inline={inline}\n color={color}\n fontColor={fontColor}\n rounded={rounded}\n rel={rel}\n as={_as}\n className={rootClassName}\n ref={ref ?? innerRef}\n >\n {typeof children === 'function' ? (\n children({ textProps, iconProps })\n ) : (\n <>\n {success || loading ? (\n <Styled.ContentWithStatus>\n {success ? (\n <Icon {...iconProps} {...iconPropsProp} icon={<CheckFill />} />\n ) : (\n <Styled.IconAnimation>\n <Icon {...iconProps} {...iconPropsProp} icon={<LoaderFill />} />\n </Styled.IconAnimation>\n )}\n {showContentOnStatus ? mainContent : null}\n </Styled.ContentWithStatus>\n ) : null}\n <Styled.Content aria-hidden={success || loading}>\n {before ? (\n <Icon\n className='icon'\n name={typeof before === 'string' ? before : undefined}\n icon={typeof before !== 'string' ? before : undefined}\n {...iconProps}\n {...iconPropsProp}\n {...leftIconProps}\n />\n ) : null}\n {mainContent}\n {after ? (\n <Icon\n className='icon'\n name={typeof after === 'string' ? after : undefined}\n icon={typeof after !== 'string' ? after : undefined}\n {...iconProps}\n {...iconPropsProp}\n {...rightIconProps}\n />\n ) : null}\n </Styled.Content>\n </>\n )}\n </Styled.Root>\n )\n }),\n {\n displayName: COMPONENT_NAME,\n sizes: (props) => {\n let sizes = props.preset === 'brand' ? SIZES : SIZES_DEFAULT\n if (props.round) sizes = props.preset === 'brand' ? SIZES_ROUND : SIZES_ROUND_DEFAULT\n\n return sizes\n },\n }\n)\n\nexport { Button, COMPONENT_NAME, SIZES, SIZES_ROUND }\n\nexport type { ButtonProps }\n"],"names":["COMPONENT_NAME","Button","withMergedProps","forwardRef","props","ref","size","inline","rounded","color","fontColor","showContentOnStatus","textProps","textPropsProp","iconProps","iconPropsProp","leftIconProps","rightIconProps","as","_as","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","className","children","content","fontWeight","icon","innerRef","restProps","theme","useTheme","preset","round","PROPS_BY_SIZE","href","to","link","disabled","primary","secondary","rootClassName","useClassname","textClassName","rel","useComputedRel","linkProps","useComputedLinkProps","before","after","Array","isArray","sizeProps","weight","lineHeight","sizes","SIZES_TEXT","SIZES_TEXT_DEFAULT","SIZES_ICON","success","loading","mainContent","_jsx","Text","Styled","_jsxs","_Fragment","Icon","CheckFill","LoaderFill","name","undefined","displayName","SIZES","SIZES_DEFAULT","SIZES_ROUND","SIZES_ROUND_DEFAULT"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
'use strict';var React=require('react');var withMergedProps=require('../../hocs/withMergedProps.js');var useScrollThresholds=require('../../hooks/useScrollThresholds.js');var constants=require('../../shared/constants.js');var dom=require('../../shared/utils/dom.js');var useScrollLock=require('../../hooks/useScrollLock.js');var dragging=require('./images/dragging.svg.js');var style=require('./style.js');var sizes=require('./sizes.js');var layouts=require('./layouts.js');var Header=require('./Header.js');var jsxRuntime=require('react/jsx-runtime');var Icon=require('../Icon/Icon.js');var AspectRatio=require('../AspectRatio/AspectRatio.js');var Skeleton=require('../Skeleton/Skeleton.js');var Text=require('../Text/Text.js');var index=require('../../icon-pack/src/icons/Close/index.js');const DialogComponent=withMergedProps.withMergedProps(React.forwardRef((e,s)=>{const{size:t="s",layout:o="vertical",scrollable:
|
|
1
|
+
'use strict';var React=require('react');var withMergedProps=require('../../hocs/withMergedProps.js');var useScrollThresholds=require('../../hooks/useScrollThresholds.js');var constants=require('../../shared/constants.js');var dom=require('../../shared/utils/dom.js');var useScrollLock=require('../../hooks/useScrollLock.js');var dragging=require('./images/dragging.svg.js');var style=require('./style.js');var sizes=require('./sizes.js');var layouts=require('./layouts.js');var Header=require('./Header.js');var jsxRuntime=require('react/jsx-runtime');var Icon=require('../Icon/Icon.js');var AspectRatio=require('../AspectRatio/AspectRatio.js');var Skeleton=require('../Skeleton/Skeleton.js');var Text=require('../Text/Text.js');var index=require('../../icon-pack/src/icons/Close/index.js');const DialogComponent=withMergedProps.withMergedProps(React.forwardRef((e,s)=>{const{size:t="s",layout:o="vertical",scrollable:n=!1,scrollFading:i=!1,sizeXXS:r,sizeXS:l,sizeS:a,sizeM:c,sizeL:u,sizeXL:d,layoutXXS:x,layoutXS:j,layoutS:m,layoutM:y,layoutL:R,layoutXL:S,root:g,floats:p,media:h,body:I,header:T,caption:z,title:A,subtitle:k,children:E,footer:L,closeButton:b,progressLine:C,fancy:v,imgSrcVertical:P,imgSrcHorizontal:_,draggable:w,loading:N,stickyHeader:f,className:O,backgroundClassName:B,onGrab:D,onNudge:q,...X}=e;const H={size:t,sizeXXS:r,sizeXS:l,sizeS:a,sizeM:c,sizeL:u,sizeXL:d};const Y={layout:o,layoutXXS:x,layoutXS:j,layoutS:m,layoutM:y,layoutL:R,layoutXL:S};const Z={...H,appearance:'body',color:'content-onmain-tertiary',wordBreak:'break-word',marginBottom:'0.8em',sizes:sizes.SIZES_CAPTION};const M={...H,as:'h2',appearance:'heading',color:'content-onmain-primary',wordBreak:'break-word',marginBottom:'0.5em',sizes:sizes.SIZES_TITLE};const V={...H,as:'p',appearance:'body',color:'content-onmain-primary',wordBreak:'break-word',marginBottom:'0.8em',sizes:sizes.SIZES_SUBTITLE};const F=v?{icon:jsxRuntime.jsx(index.Close,{}),size:'xxl',secondary:!0}:{icon:jsxRuntime.jsx(index.Close,{}),size:'l',marginTop:8,marginRight:8};const U={size:'xs'};const K=v?O:dom.concatClassNames(O,B);const G=n&&i;const[J,Q]=React.useState(null);const{scrollThresholds:W,setScrollThresholds:$}=useScrollThresholds.useScrollThresholds({enabled:G,target:J});return useScrollLock.useScrollLock({locked:!n,target:J}),jsxRuntime.jsxs(style.Root,{...X,...H,...Y,layouts:v?layouts.LAYOUTS_FANCY:layouts.LAYOUTS,className:K,fancy:v,ref:s,children:[v?jsxRuntime.jsx(style.FancyBackground,{className:B}):null,React.isValidElement(g)?g:typeof g=='function'?g({captionProps:Z,titleProps:M,subtitleProps:V,closeButtonProps:F,progressLineProps:U,onGrab:D,onNudge:q}):jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[p,w?jsxRuntime.jsx(style.DraggingHandle,{...Y,layouts:layouts.VISIBILITY_VERTICAL,onPointerDown:D,children:jsxRuntime.jsx(style.DraggingIconContainer,{tabIndex:0,onKeyDown:q,children:jsxRuntime.jsx(Icon.Icon,{icon:jsxRuntime.jsx(dragging.default,{}),size:34,color:"content-onmain-tertiary"})})}):null,b?jsxRuntime.jsx(style.ButtonPosition,{children:React.isValidElement(b)?b:typeof b=='function'?b(F):null}):null,N||h||P?jsxRuntime.jsx(style.Media,{...Y,layouts:v?layouts.LAYOUTS_FANCY_MEDIA_VERTICAL:layouts.LAYOUTS_MEDIA_VERTICAL,children:N?jsxRuntime.jsx(AspectRatio.AspectRatio,{ratio:"3:1",width:"100%",children:jsxRuntime.jsx(Skeleton.Skeleton,{borderRadius:0})}):React.isValidElement(h)?h:jsxRuntime.jsx(AspectRatio.AspectRatio,{ratio:"3:1",width:"100%",children:jsxRuntime.jsx(style.Img,{src:P})})}):null,N||h||_?jsxRuntime.jsx(style.Media,{...Y,layouts:layouts.LAYOUTS_MEDIA_HORIZONTAL,children:N?jsxRuntime.jsx(AspectRatio.AspectRatio,{ratio:"5:7",height:"100%",children:jsxRuntime.jsx(Skeleton.Skeleton,{borderRadius:0})}):React.isValidElement(h)?h:jsxRuntime.jsx(AspectRatio.AspectRatio,{ratio:"5:7",height:"100%",children:jsxRuntime.jsx(style.Img,{src:_})})}):null,jsxRuntime.jsxs(style.Body,{children:[C&&!N?jsxRuntime.jsx(style.ProgressPosition,{...Y,layouts:v?layouts.LAYOUTS_FANCY_PROGRESS:layouts.LAYOUTS_PROGRESS,children:React.isValidElement(C)?C:typeof C=='function'?C(U):null}):null,w?jsxRuntime.jsx(style.DraggingHandle,{...Y,layouts:layouts.VISIBILITY_HORIZONTAL,onPointerDown:D,children:jsxRuntime.jsx(style.DraggingIconContainer,{tabIndex:0,onKeyDown:q,children:jsxRuntime.jsx(Icon.Icon,{icon:jsxRuntime.jsx(dragging.default,{}),size:34,color:"content-onmain-tertiary"})})}):null,v?jsxRuntime.jsx(style.LayoutSpacer,{...Y,layouts:layouts.VISIBILITY_HORIZONTAL,paddingTop:76}):null,N?jsxRuntime.jsx(style.Container,{...H,sizes:sizes.SIZES_CONTAINER,children:jsxRuntime.jsxs(style.Content,{...H,sizes:sizes.SIZES_CONTENT,children:[jsxRuntime.jsx(Skeleton.Skeleton,{children:jsxRuntime.jsx(Text.Text,{...M,marginBottom:"1.5em"})}),jsxRuntime.jsx(Skeleton.Skeleton,{width:"90%",children:jsxRuntime.jsx(Text.Text,{...V,marginBottom:"0.4em"})}),jsxRuntime.jsx(Skeleton.Skeleton,{width:"70%",children:jsxRuntime.jsx(Text.Text,{...V,marginBottom:"0.4em"})}),jsxRuntime.jsx(Skeleton.Skeleton,{width:"50%",children:jsxRuntime.jsx(Text.Text,{...V,marginBottom:"0.8em"})})]})}):React.isValidElement(I)?I:typeof I=='function'?I({captionProps:Z,titleProps:M,subtitleProps:V}):jsxRuntime.jsxs(style.Container,{...H,sizes:sizes.SIZES_CONTAINER,children:[f?jsxRuntime.jsx(style.StickyHeader,{...H,sizes:sizes.SIZES_STICKY_HEADER,children:jsxRuntime.jsx(Header.Header,{header:T,caption:z,title:A,subtitle:k,captionProps:Z,titleProps:M,subtitleProps:V})}):null,G?jsxRuntime.jsx(style.Fading,{visible:W.top===!1}):null,jsxRuntime.jsx(style.ContentScrollArea,{ref:Q,scrollable:n,tabIndex:n?0:void 0,onScroll:e=>{G&&$(e.currentTarget)},onKeyDown:e=>{constants.keyboardKeys.ArrowUp.validate(e.key)?(e.preventDefault(),e.currentTarget.scrollBy(0,-13)):constants.keyboardKeys.ArrowDown.validate(e.key)&&(e.preventDefault(),e.currentTarget.scrollBy(0,13))},children:jsxRuntime.jsxs(style.Content,{...H,sizes:sizes.SIZES_CONTENT,children:[f?null:jsxRuntime.jsx(Header.Header,{header:T,caption:z,title:A,subtitle:k,captionProps:Z,titleProps:M,subtitleProps:V}),E]})}),G?jsxRuntime.jsx(style.Fading,{visible:W.bottom===!1,after:!0}):null,L?jsxRuntime.jsx(style.Footer,{...H,sizes:sizes.SIZES_FOOTER,children:L}):null]})]})]})]})}),{sizes:e=>e.fancy?sizes.SIZES_FANCY:sizes.SIZES,displayName:'DialogComponent'});exports.DialogComponent=DialogComponent;
|
|
2
2
|
//# sourceMappingURL=DialogComponent.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DialogComponent.js","sources":["../../../../src/components/DialogComponent/DialogComponent.tsx"],"sourcesContent":["import { forwardRef, useState, isValidElement } from 'react'\nimport { Close } from '@foxford/icon-pack'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport type { MergedProps } from 'hocs/withMergedProps'\nimport { useScrollThresholds } from 'hooks/useScrollThresholds'\nimport { keyboardKeys } from 'shared/constants'\nimport { Text } from 'components/Text'\nimport { Icon } from 'components/Icon'\nimport { Skeleton } from 'components/Skeleton'\nimport { AspectRatio } from 'components/AspectRatio'\nimport type { TextProps } from 'components/Text'\nimport type { IconButtonProps } from 'components/IconButton'\nimport type { ProgressLineProps } from 'components/ProgressLine'\nimport { concatClassNames } from 'shared/utils/dom'\nimport { useScrollLock } from 'hooks/useScrollLock'\nimport Dragging from './images/dragging.svg?module'\nimport * as Styled from './style'\nimport {\n SIZES,\n SIZES_FANCY,\n SIZES_CONTAINER,\n SIZES_CONTENT,\n SIZES_FOOTER,\n SIZES_CAPTION,\n SIZES_TITLE,\n SIZES_SUBTITLE,\n SIZES_STICKY_HEADER,\n} from './sizes'\nimport {\n LAYOUTS,\n LAYOUTS_FANCY,\n LAYOUTS_MEDIA_VERTICAL,\n LAYOUTS_FANCY_MEDIA_VERTICAL,\n LAYOUTS_MEDIA_HORIZONTAL,\n LAYOUTS_PROGRESS,\n LAYOUTS_FANCY_PROGRESS,\n VISIBILITY_VERTICAL,\n VISIBILITY_HORIZONTAL,\n} from './layouts'\nimport type { DialogComponentProps } from './types'\nimport { Header } from './Header'\n\nconst COMPONENT_NAME = 'DialogComponent'\n\nconst DialogComponent: React.ForwardRefExoticComponent<DialogComponentProps> = withMergedProps<\n DialogComponentProps,\n HTMLDivElement\n>(\n forwardRef<HTMLDivElement, MergedProps<DialogComponentProps>>((props, ref) => {\n const {\n size = 's',\n layout = 'vertical',\n scrollable = false,\n scrollFading = false,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n layoutXXS,\n layoutXS,\n layoutS,\n layoutM,\n layoutL,\n layoutXL,\n root,\n floats,\n media,\n body,\n header,\n caption,\n title,\n subtitle,\n children,\n footer,\n closeButton,\n progressLine,\n fancy,\n imgSrcVertical,\n imgSrcHorizontal,\n draggable,\n loading,\n stickyHeader,\n className,\n backgroundClassName,\n onGrab,\n onNudge,\n ...restProps\n } = props\n\n const sizeProps = {\n size,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n }\n\n const layoutProps = {\n layout,\n layoutXXS,\n layoutXS,\n layoutS,\n layoutM,\n layoutL,\n layoutXL,\n }\n\n const captionProps: TextProps = {\n ...sizeProps,\n appearance: 'body',\n color: 'content-onmain-tertiary',\n wordBreak: 'break-word',\n marginBottom: '0.8em',\n sizes: SIZES_CAPTION,\n }\n\n const titleProps: TextProps = {\n ...sizeProps,\n as: 'h2',\n appearance: 'heading',\n color: 'content-onmain-primary',\n wordBreak: 'break-word',\n marginBottom: '0.5em',\n sizes: SIZES_TITLE,\n }\n\n const subtitleProps: TextProps = {\n ...sizeProps,\n as: 'p',\n appearance: 'body',\n color: 'content-onmain-primary',\n wordBreak: 'break-word',\n marginBottom: '0.8em',\n sizes: SIZES_SUBTITLE,\n }\n\n const closeButtonProps: IconButtonProps = fancy\n ? { icon: <Close />, size: 'xxl', filled: true }\n : { icon: <Close />, size: 'l', marginTop: 8, marginRight: 8 }\n\n const progressLineProps: ProgressLineProps = {\n size: 'xs',\n }\n\n const rootClassName = !fancy ? concatClassNames(className, backgroundClassName) : className\n\n const scrollFadingEnabled = scrollable && scrollFading\n\n const [contentRef, setContentRef] = useState<HTMLDivElement | null>(null)\n\n const { scrollThresholds, setScrollThresholds } = useScrollThresholds({\n enabled: scrollFadingEnabled,\n target: contentRef,\n })\n\n useScrollLock({ locked: !scrollable, target: contentRef })\n\n return (\n <Styled.Root\n {...restProps}\n {...sizeProps}\n {...layoutProps}\n layouts={fancy ? LAYOUTS_FANCY : LAYOUTS}\n className={rootClassName}\n fancy={fancy}\n ref={ref}\n >\n {fancy ? <Styled.FancyBackground className={backgroundClassName} /> : null}\n {isValidElement(root) ? (\n root\n ) : typeof root === 'function' ? (\n root({\n captionProps,\n titleProps,\n subtitleProps,\n closeButtonProps,\n progressLineProps,\n onGrab,\n onNudge,\n })\n ) : (\n <>\n {floats}\n {draggable ? (\n <Styled.DraggingHandle {...layoutProps} layouts={VISIBILITY_VERTICAL} onPointerDown={onGrab}>\n <Styled.DraggingIconContainer tabIndex={0} onKeyDown={onNudge}>\n <Icon icon={<Dragging />} size={34} color='content-onmain-tertiary' />\n </Styled.DraggingIconContainer>\n </Styled.DraggingHandle>\n ) : null}\n {closeButton ? (\n <Styled.ButtonPosition>\n {isValidElement(closeButton)\n ? closeButton\n : typeof closeButton === 'function'\n ? closeButton(closeButtonProps)\n : null}\n </Styled.ButtonPosition>\n ) : null}\n {loading || media || imgSrcVertical ? (\n <Styled.Media {...layoutProps} layouts={fancy ? LAYOUTS_FANCY_MEDIA_VERTICAL : LAYOUTS_MEDIA_VERTICAL}>\n {loading ? (\n <AspectRatio ratio='3:1' width='100%'>\n <Skeleton borderRadius={0} />\n </AspectRatio>\n ) : isValidElement(media) ? (\n media\n ) : (\n <AspectRatio ratio='3:1' width='100%'>\n <Styled.Img src={imgSrcVertical} />\n </AspectRatio>\n )}\n </Styled.Media>\n ) : null}\n {loading || media || imgSrcHorizontal ? (\n <Styled.Media {...layoutProps} layouts={LAYOUTS_MEDIA_HORIZONTAL}>\n {loading ? (\n <AspectRatio ratio='5:7' height='100%'>\n <Skeleton borderRadius={0} />\n </AspectRatio>\n ) : isValidElement(media) ? (\n media\n ) : (\n <AspectRatio ratio='5:7' height='100%'>\n <Styled.Img src={imgSrcHorizontal} />\n </AspectRatio>\n )}\n </Styled.Media>\n ) : null}\n <Styled.Body>\n {progressLine && !loading ? (\n <Styled.ProgressPosition {...layoutProps} layouts={fancy ? LAYOUTS_FANCY_PROGRESS : LAYOUTS_PROGRESS}>\n {isValidElement(progressLine)\n ? progressLine\n : typeof progressLine === 'function'\n ? progressLine(progressLineProps)\n : null}\n </Styled.ProgressPosition>\n ) : null}\n {draggable ? (\n <Styled.DraggingHandle {...layoutProps} layouts={VISIBILITY_HORIZONTAL} onPointerDown={onGrab}>\n <Styled.DraggingIconContainer tabIndex={0} onKeyDown={onNudge}>\n <Icon icon={<Dragging />} size={34} color='content-onmain-tertiary' />\n </Styled.DraggingIconContainer>\n </Styled.DraggingHandle>\n ) : null}\n {fancy ? <Styled.LayoutSpacer {...layoutProps} layouts={VISIBILITY_HORIZONTAL} paddingTop={76} /> : null}\n {loading ? (\n <Styled.Container {...sizeProps} sizes={SIZES_CONTAINER}>\n <Styled.Content {...sizeProps} sizes={SIZES_CONTENT}>\n <Skeleton>\n <Text {...titleProps} marginBottom='1.5em' />\n </Skeleton>\n <Skeleton width='90%'>\n <Text {...subtitleProps} marginBottom='0.4em' />\n </Skeleton>\n <Skeleton width='70%'>\n <Text {...subtitleProps} marginBottom='0.4em' />\n </Skeleton>\n <Skeleton width='50%'>\n <Text {...subtitleProps} marginBottom='0.8em' />\n </Skeleton>\n </Styled.Content>\n </Styled.Container>\n ) : isValidElement(body) ? (\n body\n ) : typeof body === 'function' ? (\n body({\n captionProps,\n titleProps,\n subtitleProps,\n })\n ) : (\n <Styled.Container {...sizeProps} sizes={SIZES_CONTAINER}>\n {stickyHeader ? (\n <Styled.StickyHeader {...sizeProps} sizes={SIZES_STICKY_HEADER}>\n <Header\n header={header}\n caption={caption}\n title={title}\n subtitle={subtitle}\n captionProps={captionProps}\n titleProps={titleProps}\n subtitleProps={subtitleProps}\n />\n </Styled.StickyHeader>\n ) : null}\n {scrollFadingEnabled ? <Styled.Fading visible={scrollThresholds.top === false} /> : null}\n <Styled.ContentScrollArea\n ref={setContentRef}\n scrollable={scrollable}\n tabIndex={scrollable ? 0 : undefined}\n onScroll={(evt) => {\n if (scrollFadingEnabled) {\n setScrollThresholds(evt.currentTarget)\n }\n }}\n onKeyDown={(evt) => {\n if (keyboardKeys.ArrowUp.validate(evt.key)) {\n evt.preventDefault()\n evt.currentTarget.scrollBy(0, -13)\n } else if (keyboardKeys.ArrowDown.validate(evt.key)) {\n evt.preventDefault()\n evt.currentTarget.scrollBy(0, 13)\n }\n }}\n >\n <Styled.Content {...sizeProps} sizes={SIZES_CONTENT}>\n {!stickyHeader ? (\n <Header\n header={header}\n caption={caption}\n title={title}\n subtitle={subtitle}\n captionProps={captionProps}\n titleProps={titleProps}\n subtitleProps={subtitleProps}\n />\n ) : null}\n {children}\n </Styled.Content>\n </Styled.ContentScrollArea>\n {scrollFadingEnabled ? <Styled.Fading visible={scrollThresholds.bottom === false} after /> : null}\n {footer ? (\n <Styled.Footer {...sizeProps} sizes={SIZES_FOOTER}>\n {footer}\n </Styled.Footer>\n ) : null}\n </Styled.Container>\n )}\n </Styled.Body>\n </>\n )}\n </Styled.Root>\n )\n }),\n {\n sizes: (props) => (props.fancy ? SIZES_FANCY : SIZES),\n displayName: COMPONENT_NAME,\n }\n)\n\nexport { DialogComponent }\n"],"names":["DialogComponent","withMergedProps","forwardRef","props","ref","size","layout","scrollable","scrollFading","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","layoutXXS","layoutXS","layoutS","layoutM","layoutL","layoutXL","root","floats","media","body","header","caption","title","subtitle","children","footer","closeButton","progressLine","fancy","imgSrcVertical","imgSrcHorizontal","draggable","loading","stickyHeader","className","backgroundClassName","onGrab","onNudge","restProps","sizeProps","layoutProps","captionProps","appearance","color","wordBreak","marginBottom","sizes","SIZES_CAPTION","titleProps","as","SIZES_TITLE","subtitleProps","SIZES_SUBTITLE","closeButtonProps","icon","_jsx","Close","filled","marginTop","marginRight","progressLineProps","rootClassName","concatClassNames","scrollFadingEnabled","contentRef","setContentRef","useState","scrollThresholds","setScrollThresholds","useScrollThresholds","enabled","target","useScrollLock","locked","_jsxs","Styled","layouts","LAYOUTS_FANCY","LAYOUTS","isValidElement","_Fragment","VISIBILITY_VERTICAL","onPointerDown","tabIndex","onKeyDown","Icon","Dragging","LAYOUTS_FANCY_MEDIA_VERTICAL","LAYOUTS_MEDIA_VERTICAL","AspectRatio","ratio","width","Skeleton","borderRadius","src","LAYOUTS_MEDIA_HORIZONTAL","height","LAYOUTS_FANCY_PROGRESS","LAYOUTS_PROGRESS","VISIBILITY_HORIZONTAL","paddingTop","SIZES_CONTAINER","SIZES_CONTENT","Text","SIZES_STICKY_HEADER","Header","visible","top","undefined","onScroll","evt","currentTarget","keyboardKeys","ArrowUp","validate","key","preventDefault","scrollBy","ArrowDown","bottom","after","SIZES_FOOTER","SIZES_FANCY","SIZES","displayName"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"DialogComponent.js","sources":["../../../../src/components/DialogComponent/DialogComponent.tsx"],"sourcesContent":["import { forwardRef, useState, isValidElement } from 'react'\nimport { Close } from '@foxford/icon-pack'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport type { MergedProps } from 'hocs/withMergedProps'\nimport { useScrollThresholds } from 'hooks/useScrollThresholds'\nimport { keyboardKeys } from 'shared/constants'\nimport { Text } from 'components/Text'\nimport { Icon } from 'components/Icon'\nimport { Skeleton } from 'components/Skeleton'\nimport { AspectRatio } from 'components/AspectRatio'\nimport type { TextProps } from 'components/Text'\nimport type { IconButtonProps } from 'components/IconButton'\nimport type { ProgressLineProps } from 'components/ProgressLine'\nimport { concatClassNames } from 'shared/utils/dom'\nimport { useScrollLock } from 'hooks/useScrollLock'\nimport Dragging from './images/dragging.svg?module'\nimport * as Styled from './style'\nimport {\n SIZES,\n SIZES_FANCY,\n SIZES_CONTAINER,\n SIZES_CONTENT,\n SIZES_FOOTER,\n SIZES_CAPTION,\n SIZES_TITLE,\n SIZES_SUBTITLE,\n SIZES_STICKY_HEADER,\n} from './sizes'\nimport {\n LAYOUTS,\n LAYOUTS_FANCY,\n LAYOUTS_MEDIA_VERTICAL,\n LAYOUTS_FANCY_MEDIA_VERTICAL,\n LAYOUTS_MEDIA_HORIZONTAL,\n LAYOUTS_PROGRESS,\n LAYOUTS_FANCY_PROGRESS,\n VISIBILITY_VERTICAL,\n VISIBILITY_HORIZONTAL,\n} from './layouts'\nimport type { DialogComponentProps } from './types'\nimport { Header } from './Header'\n\nconst COMPONENT_NAME = 'DialogComponent'\n\nconst DialogComponent: React.ForwardRefExoticComponent<DialogComponentProps> = withMergedProps<\n DialogComponentProps,\n HTMLDivElement\n>(\n forwardRef<HTMLDivElement, MergedProps<DialogComponentProps>>((props, ref) => {\n const {\n size = 's',\n layout = 'vertical',\n scrollable = false,\n scrollFading = false,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n layoutXXS,\n layoutXS,\n layoutS,\n layoutM,\n layoutL,\n layoutXL,\n root,\n floats,\n media,\n body,\n header,\n caption,\n title,\n subtitle,\n children,\n footer,\n closeButton,\n progressLine,\n fancy,\n imgSrcVertical,\n imgSrcHorizontal,\n draggable,\n loading,\n stickyHeader,\n className,\n backgroundClassName,\n onGrab,\n onNudge,\n ...restProps\n } = props\n\n const sizeProps = {\n size,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n }\n\n const layoutProps = {\n layout,\n layoutXXS,\n layoutXS,\n layoutS,\n layoutM,\n layoutL,\n layoutXL,\n }\n\n const captionProps: TextProps = {\n ...sizeProps,\n appearance: 'body',\n color: 'content-onmain-tertiary',\n wordBreak: 'break-word',\n marginBottom: '0.8em',\n sizes: SIZES_CAPTION,\n }\n\n const titleProps: TextProps = {\n ...sizeProps,\n as: 'h2',\n appearance: 'heading',\n color: 'content-onmain-primary',\n wordBreak: 'break-word',\n marginBottom: '0.5em',\n sizes: SIZES_TITLE,\n }\n\n const subtitleProps: TextProps = {\n ...sizeProps,\n as: 'p',\n appearance: 'body',\n color: 'content-onmain-primary',\n wordBreak: 'break-word',\n marginBottom: '0.8em',\n sizes: SIZES_SUBTITLE,\n }\n\n const closeButtonProps: IconButtonProps = fancy\n ? { icon: <Close />, size: 'xxl', secondary: true }\n : { icon: <Close />, size: 'l', marginTop: 8, marginRight: 8 }\n\n const progressLineProps: ProgressLineProps = {\n size: 'xs',\n }\n\n const rootClassName = !fancy ? concatClassNames(className, backgroundClassName) : className\n\n const scrollFadingEnabled = scrollable && scrollFading\n\n const [contentRef, setContentRef] = useState<HTMLDivElement | null>(null)\n\n const { scrollThresholds, setScrollThresholds } = useScrollThresholds({\n enabled: scrollFadingEnabled,\n target: contentRef,\n })\n\n useScrollLock({ locked: !scrollable, target: contentRef })\n\n return (\n <Styled.Root\n {...restProps}\n {...sizeProps}\n {...layoutProps}\n layouts={fancy ? LAYOUTS_FANCY : LAYOUTS}\n className={rootClassName}\n fancy={fancy}\n ref={ref}\n >\n {fancy ? <Styled.FancyBackground className={backgroundClassName} /> : null}\n {isValidElement(root) ? (\n root\n ) : typeof root === 'function' ? (\n root({\n captionProps,\n titleProps,\n subtitleProps,\n closeButtonProps,\n progressLineProps,\n onGrab,\n onNudge,\n })\n ) : (\n <>\n {floats}\n {draggable ? (\n <Styled.DraggingHandle {...layoutProps} layouts={VISIBILITY_VERTICAL} onPointerDown={onGrab}>\n <Styled.DraggingIconContainer tabIndex={0} onKeyDown={onNudge}>\n <Icon icon={<Dragging />} size={34} color='content-onmain-tertiary' />\n </Styled.DraggingIconContainer>\n </Styled.DraggingHandle>\n ) : null}\n {closeButton ? (\n <Styled.ButtonPosition>\n {isValidElement(closeButton)\n ? closeButton\n : typeof closeButton === 'function'\n ? closeButton(closeButtonProps)\n : null}\n </Styled.ButtonPosition>\n ) : null}\n {loading || media || imgSrcVertical ? (\n <Styled.Media {...layoutProps} layouts={fancy ? LAYOUTS_FANCY_MEDIA_VERTICAL : LAYOUTS_MEDIA_VERTICAL}>\n {loading ? (\n <AspectRatio ratio='3:1' width='100%'>\n <Skeleton borderRadius={0} />\n </AspectRatio>\n ) : isValidElement(media) ? (\n media\n ) : (\n <AspectRatio ratio='3:1' width='100%'>\n <Styled.Img src={imgSrcVertical} />\n </AspectRatio>\n )}\n </Styled.Media>\n ) : null}\n {loading || media || imgSrcHorizontal ? (\n <Styled.Media {...layoutProps} layouts={LAYOUTS_MEDIA_HORIZONTAL}>\n {loading ? (\n <AspectRatio ratio='5:7' height='100%'>\n <Skeleton borderRadius={0} />\n </AspectRatio>\n ) : isValidElement(media) ? (\n media\n ) : (\n <AspectRatio ratio='5:7' height='100%'>\n <Styled.Img src={imgSrcHorizontal} />\n </AspectRatio>\n )}\n </Styled.Media>\n ) : null}\n <Styled.Body>\n {progressLine && !loading ? (\n <Styled.ProgressPosition {...layoutProps} layouts={fancy ? LAYOUTS_FANCY_PROGRESS : LAYOUTS_PROGRESS}>\n {isValidElement(progressLine)\n ? progressLine\n : typeof progressLine === 'function'\n ? progressLine(progressLineProps)\n : null}\n </Styled.ProgressPosition>\n ) : null}\n {draggable ? (\n <Styled.DraggingHandle {...layoutProps} layouts={VISIBILITY_HORIZONTAL} onPointerDown={onGrab}>\n <Styled.DraggingIconContainer tabIndex={0} onKeyDown={onNudge}>\n <Icon icon={<Dragging />} size={34} color='content-onmain-tertiary' />\n </Styled.DraggingIconContainer>\n </Styled.DraggingHandle>\n ) : null}\n {fancy ? <Styled.LayoutSpacer {...layoutProps} layouts={VISIBILITY_HORIZONTAL} paddingTop={76} /> : null}\n {loading ? (\n <Styled.Container {...sizeProps} sizes={SIZES_CONTAINER}>\n <Styled.Content {...sizeProps} sizes={SIZES_CONTENT}>\n <Skeleton>\n <Text {...titleProps} marginBottom='1.5em' />\n </Skeleton>\n <Skeleton width='90%'>\n <Text {...subtitleProps} marginBottom='0.4em' />\n </Skeleton>\n <Skeleton width='70%'>\n <Text {...subtitleProps} marginBottom='0.4em' />\n </Skeleton>\n <Skeleton width='50%'>\n <Text {...subtitleProps} marginBottom='0.8em' />\n </Skeleton>\n </Styled.Content>\n </Styled.Container>\n ) : isValidElement(body) ? (\n body\n ) : typeof body === 'function' ? (\n body({\n captionProps,\n titleProps,\n subtitleProps,\n })\n ) : (\n <Styled.Container {...sizeProps} sizes={SIZES_CONTAINER}>\n {stickyHeader ? (\n <Styled.StickyHeader {...sizeProps} sizes={SIZES_STICKY_HEADER}>\n <Header\n header={header}\n caption={caption}\n title={title}\n subtitle={subtitle}\n captionProps={captionProps}\n titleProps={titleProps}\n subtitleProps={subtitleProps}\n />\n </Styled.StickyHeader>\n ) : null}\n {scrollFadingEnabled ? <Styled.Fading visible={scrollThresholds.top === false} /> : null}\n <Styled.ContentScrollArea\n ref={setContentRef}\n scrollable={scrollable}\n tabIndex={scrollable ? 0 : undefined}\n onScroll={(evt) => {\n if (scrollFadingEnabled) {\n setScrollThresholds(evt.currentTarget)\n }\n }}\n onKeyDown={(evt) => {\n if (keyboardKeys.ArrowUp.validate(evt.key)) {\n evt.preventDefault()\n evt.currentTarget.scrollBy(0, -13)\n } else if (keyboardKeys.ArrowDown.validate(evt.key)) {\n evt.preventDefault()\n evt.currentTarget.scrollBy(0, 13)\n }\n }}\n >\n <Styled.Content {...sizeProps} sizes={SIZES_CONTENT}>\n {!stickyHeader ? (\n <Header\n header={header}\n caption={caption}\n title={title}\n subtitle={subtitle}\n captionProps={captionProps}\n titleProps={titleProps}\n subtitleProps={subtitleProps}\n />\n ) : null}\n {children}\n </Styled.Content>\n </Styled.ContentScrollArea>\n {scrollFadingEnabled ? <Styled.Fading visible={scrollThresholds.bottom === false} after /> : null}\n {footer ? (\n <Styled.Footer {...sizeProps} sizes={SIZES_FOOTER}>\n {footer}\n </Styled.Footer>\n ) : null}\n </Styled.Container>\n )}\n </Styled.Body>\n </>\n )}\n </Styled.Root>\n )\n }),\n {\n sizes: (props) => (props.fancy ? SIZES_FANCY : SIZES),\n displayName: COMPONENT_NAME,\n }\n)\n\nexport { DialogComponent }\n"],"names":["DialogComponent","withMergedProps","forwardRef","props","ref","size","layout","scrollable","scrollFading","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","layoutXXS","layoutXS","layoutS","layoutM","layoutL","layoutXL","root","floats","media","body","header","caption","title","subtitle","children","footer","closeButton","progressLine","fancy","imgSrcVertical","imgSrcHorizontal","draggable","loading","stickyHeader","className","backgroundClassName","onGrab","onNudge","restProps","sizeProps","layoutProps","captionProps","appearance","color","wordBreak","marginBottom","sizes","SIZES_CAPTION","titleProps","as","SIZES_TITLE","subtitleProps","SIZES_SUBTITLE","closeButtonProps","icon","_jsx","Close","secondary","marginTop","marginRight","progressLineProps","rootClassName","concatClassNames","scrollFadingEnabled","contentRef","setContentRef","useState","scrollThresholds","setScrollThresholds","useScrollThresholds","enabled","target","useScrollLock","locked","_jsxs","Styled","layouts","LAYOUTS_FANCY","LAYOUTS","isValidElement","_Fragment","VISIBILITY_VERTICAL","onPointerDown","tabIndex","onKeyDown","Icon","Dragging","LAYOUTS_FANCY_MEDIA_VERTICAL","LAYOUTS_MEDIA_VERTICAL","AspectRatio","ratio","width","Skeleton","borderRadius","src","LAYOUTS_MEDIA_HORIZONTAL","height","LAYOUTS_FANCY_PROGRESS","LAYOUTS_PROGRESS","VISIBILITY_HORIZONTAL","paddingTop","SIZES_CONTAINER","SIZES_CONTENT","Text","SIZES_STICKY_HEADER","Header","visible","top","undefined","onScroll","evt","currentTarget","keyboardKeys","ArrowUp","validate","key","preventDefault","scrollBy","ArrowDown","bottom","after","SIZES_FOOTER","SIZES_FANCY","SIZES","displayName"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{forwardRef,useState,isValidElement}from'react';import{withMergedProps}from'../../hocs/withMergedProps.mjs';import{useScrollThresholds}from'../../hooks/useScrollThresholds.mjs';import{keyboardKeys}from'../../shared/constants.mjs';import{concatClassNames}from'../../shared/utils/dom.mjs';import{useScrollLock}from'../../hooks/useScrollLock.mjs';import SvgDragging from'./images/dragging.svg.mjs';import{Root,FancyBackground,DraggingHandle,DraggingIconContainer,ButtonPosition,Media,Img,Body,ProgressPosition,LayoutSpacer,Container,Content,StickyHeader,Fading,ContentScrollArea,Footer}from'./style.mjs';import{SIZES_SUBTITLE,SIZES_TITLE,SIZES_CAPTION,SIZES_CONTAINER,SIZES_CONTENT,SIZES_STICKY_HEADER,SIZES_FOOTER,SIZES_FANCY,SIZES}from'./sizes.mjs';import{LAYOUTS_FANCY,LAYOUTS,VISIBILITY_VERTICAL,LAYOUTS_FANCY_MEDIA_VERTICAL,LAYOUTS_MEDIA_VERTICAL,LAYOUTS_MEDIA_HORIZONTAL,LAYOUTS_FANCY_PROGRESS,LAYOUTS_PROGRESS,VISIBILITY_HORIZONTAL}from'./layouts.mjs';import{Header}from'./Header.mjs';import{jsxs,jsx,Fragment}from'react/jsx-runtime';import{Icon}from'../Icon/Icon.mjs';import{AspectRatio}from'../AspectRatio/AspectRatio.mjs';import{Skeleton}from'../Skeleton/Skeleton.mjs';import{Text}from'../Text/Text.mjs';import{Close}from'../../icon-pack/src/icons/Close/index.mjs';const DialogComponent=withMergedProps(forwardRef((o,e)=>{const{size:t="s",layout:s="vertical",scrollable:r=!1,scrollFading:n=!1,sizeXXS:i,sizeXS:
|
|
1
|
+
import{forwardRef,useState,isValidElement}from'react';import{withMergedProps}from'../../hocs/withMergedProps.mjs';import{useScrollThresholds}from'../../hooks/useScrollThresholds.mjs';import{keyboardKeys}from'../../shared/constants.mjs';import{concatClassNames}from'../../shared/utils/dom.mjs';import{useScrollLock}from'../../hooks/useScrollLock.mjs';import SvgDragging from'./images/dragging.svg.mjs';import{Root,FancyBackground,DraggingHandle,DraggingIconContainer,ButtonPosition,Media,Img,Body,ProgressPosition,LayoutSpacer,Container,Content,StickyHeader,Fading,ContentScrollArea,Footer}from'./style.mjs';import{SIZES_SUBTITLE,SIZES_TITLE,SIZES_CAPTION,SIZES_CONTAINER,SIZES_CONTENT,SIZES_STICKY_HEADER,SIZES_FOOTER,SIZES_FANCY,SIZES}from'./sizes.mjs';import{LAYOUTS_FANCY,LAYOUTS,VISIBILITY_VERTICAL,LAYOUTS_FANCY_MEDIA_VERTICAL,LAYOUTS_MEDIA_VERTICAL,LAYOUTS_MEDIA_HORIZONTAL,LAYOUTS_FANCY_PROGRESS,LAYOUTS_PROGRESS,VISIBILITY_HORIZONTAL}from'./layouts.mjs';import{Header}from'./Header.mjs';import{jsxs,jsx,Fragment}from'react/jsx-runtime';import{Icon}from'../Icon/Icon.mjs';import{AspectRatio}from'../AspectRatio/AspectRatio.mjs';import{Skeleton}from'../Skeleton/Skeleton.mjs';import{Text}from'../Text/Text.mjs';import{Close}from'../../icon-pack/src/icons/Close/index.mjs';const DialogComponent=withMergedProps(forwardRef((o,e)=>{const{size:t="s",layout:s="vertical",scrollable:r=!1,scrollFading:n=!1,sizeXXS:i,sizeXS:a,sizeS:l,sizeM:c,sizeL:d,sizeXL:S,layoutXXS:m,layoutXS:g,layoutS:I,layoutM:p,layoutL:u,layoutXL:T,root:j,floats:x,media:y,body:h,header:E,caption:A,title:L,subtitle:_,children:C,footer:O,closeButton:R,progressLine:f,fancy:N,imgSrcVertical:k,imgSrcHorizontal:b,draggable:z,loading:P,stickyHeader:Y,className:D,backgroundClassName:B,onGrab:Z,onNudge:w,...F}=o;const V={size:t,sizeXXS:i,sizeXS:a,sizeS:l,sizeM:c,sizeL:d,sizeXL:S};const H={layout:s,layoutXXS:m,layoutXS:g,layoutS:I,layoutM:p,layoutL:u,layoutXL:T};const U={...V,appearance:'body',color:'content-onmain-tertiary',wordBreak:'break-word',marginBottom:'0.8em',sizes:SIZES_CAPTION};const M={...V,as:'h2',appearance:'heading',color:'content-onmain-primary',wordBreak:'break-word',marginBottom:'0.5em',sizes:SIZES_TITLE};const X={...V,as:'p',appearance:'body',color:'content-onmain-primary',wordBreak:'break-word',marginBottom:'0.8em',sizes:SIZES_SUBTITLE};const v=N?{icon:jsx(Close,{}),size:'xxl',secondary:!0}:{icon:jsx(Close,{}),size:'l',marginTop:8,marginRight:8};const K={size:'xs'};const G=N?D:concatClassNames(D,B);const q=r&&n;const[J,Q]=useState(null);const{scrollThresholds:W,setScrollThresholds:$}=useScrollThresholds({enabled:q,target:J});return useScrollLock({locked:!r,target:J}),jsxs(Root,{...F,...V,...H,layouts:N?LAYOUTS_FANCY:LAYOUTS,className:G,fancy:N,ref:e,children:[N?jsx(FancyBackground,{className:B}):null,isValidElement(j)?j:typeof j=='function'?j({captionProps:U,titleProps:M,subtitleProps:X,closeButtonProps:v,progressLineProps:K,onGrab:Z,onNudge:w}):jsxs(Fragment,{children:[x,z?jsx(DraggingHandle,{...H,layouts:VISIBILITY_VERTICAL,onPointerDown:Z,children:jsx(DraggingIconContainer,{tabIndex:0,onKeyDown:w,children:jsx(Icon,{icon:jsx(SvgDragging,{}),size:34,color:"content-onmain-tertiary"})})}):null,R?jsx(ButtonPosition,{children:isValidElement(R)?R:typeof R=='function'?R(v):null}):null,P||y||k?jsx(Media,{...H,layouts:N?LAYOUTS_FANCY_MEDIA_VERTICAL:LAYOUTS_MEDIA_VERTICAL,children:P?jsx(AspectRatio,{ratio:"3:1",width:"100%",children:jsx(Skeleton,{borderRadius:0})}):isValidElement(y)?y:jsx(AspectRatio,{ratio:"3:1",width:"100%",children:jsx(Img,{src:k})})}):null,P||y||b?jsx(Media,{...H,layouts:LAYOUTS_MEDIA_HORIZONTAL,children:P?jsx(AspectRatio,{ratio:"5:7",height:"100%",children:jsx(Skeleton,{borderRadius:0})}):isValidElement(y)?y:jsx(AspectRatio,{ratio:"5:7",height:"100%",children:jsx(Img,{src:b})})}):null,jsxs(Body,{children:[f&&!P?jsx(ProgressPosition,{...H,layouts:N?LAYOUTS_FANCY_PROGRESS:LAYOUTS_PROGRESS,children:isValidElement(f)?f:typeof f=='function'?f(K):null}):null,z?jsx(DraggingHandle,{...H,layouts:VISIBILITY_HORIZONTAL,onPointerDown:Z,children:jsx(DraggingIconContainer,{tabIndex:0,onKeyDown:w,children:jsx(Icon,{icon:jsx(SvgDragging,{}),size:34,color:"content-onmain-tertiary"})})}):null,N?jsx(LayoutSpacer,{...H,layouts:VISIBILITY_HORIZONTAL,paddingTop:76}):null,P?jsx(Container,{...V,sizes:SIZES_CONTAINER,children:jsxs(Content,{...V,sizes:SIZES_CONTENT,children:[jsx(Skeleton,{children:jsx(Text,{...M,marginBottom:"1.5em"})}),jsx(Skeleton,{width:"90%",children:jsx(Text,{...X,marginBottom:"0.4em"})}),jsx(Skeleton,{width:"70%",children:jsx(Text,{...X,marginBottom:"0.4em"})}),jsx(Skeleton,{width:"50%",children:jsx(Text,{...X,marginBottom:"0.8em"})})]})}):isValidElement(h)?h:typeof h=='function'?h({captionProps:U,titleProps:M,subtitleProps:X}):jsxs(Container,{...V,sizes:SIZES_CONTAINER,children:[Y?jsx(StickyHeader,{...V,sizes:SIZES_STICKY_HEADER,children:jsx(Header,{header:E,caption:A,title:L,subtitle:_,captionProps:U,titleProps:M,subtitleProps:X})}):null,q?jsx(Fading,{visible:W.top===!1}):null,jsx(ContentScrollArea,{ref:Q,scrollable:r,tabIndex:r?0:void 0,onScroll:o=>{q&&$(o.currentTarget)},onKeyDown:o=>{keyboardKeys.ArrowUp.validate(o.key)?(o.preventDefault(),o.currentTarget.scrollBy(0,-13)):keyboardKeys.ArrowDown.validate(o.key)&&(o.preventDefault(),o.currentTarget.scrollBy(0,13))},children:jsxs(Content,{...V,sizes:SIZES_CONTENT,children:[Y?null:jsx(Header,{header:E,caption:A,title:L,subtitle:_,captionProps:U,titleProps:M,subtitleProps:X}),C]})}),q?jsx(Fading,{visible:W.bottom===!1,after:!0}):null,O?jsx(Footer,{...V,sizes:SIZES_FOOTER,children:O}):null]})]})]})]})}),{sizes:o=>o.fancy?SIZES_FANCY:SIZES,displayName:'DialogComponent'});export{DialogComponent};
|
|
2
2
|
//# sourceMappingURL=DialogComponent.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DialogComponent.mjs","sources":["../../../../src/components/DialogComponent/DialogComponent.tsx"],"sourcesContent":["import { forwardRef, useState, isValidElement } from 'react'\nimport { Close } from '@foxford/icon-pack'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport type { MergedProps } from 'hocs/withMergedProps'\nimport { useScrollThresholds } from 'hooks/useScrollThresholds'\nimport { keyboardKeys } from 'shared/constants'\nimport { Text } from 'components/Text'\nimport { Icon } from 'components/Icon'\nimport { Skeleton } from 'components/Skeleton'\nimport { AspectRatio } from 'components/AspectRatio'\nimport type { TextProps } from 'components/Text'\nimport type { IconButtonProps } from 'components/IconButton'\nimport type { ProgressLineProps } from 'components/ProgressLine'\nimport { concatClassNames } from 'shared/utils/dom'\nimport { useScrollLock } from 'hooks/useScrollLock'\nimport Dragging from './images/dragging.svg?module'\nimport * as Styled from './style'\nimport {\n SIZES,\n SIZES_FANCY,\n SIZES_CONTAINER,\n SIZES_CONTENT,\n SIZES_FOOTER,\n SIZES_CAPTION,\n SIZES_TITLE,\n SIZES_SUBTITLE,\n SIZES_STICKY_HEADER,\n} from './sizes'\nimport {\n LAYOUTS,\n LAYOUTS_FANCY,\n LAYOUTS_MEDIA_VERTICAL,\n LAYOUTS_FANCY_MEDIA_VERTICAL,\n LAYOUTS_MEDIA_HORIZONTAL,\n LAYOUTS_PROGRESS,\n LAYOUTS_FANCY_PROGRESS,\n VISIBILITY_VERTICAL,\n VISIBILITY_HORIZONTAL,\n} from './layouts'\nimport type { DialogComponentProps } from './types'\nimport { Header } from './Header'\n\nconst COMPONENT_NAME = 'DialogComponent'\n\nconst DialogComponent: React.ForwardRefExoticComponent<DialogComponentProps> = withMergedProps<\n DialogComponentProps,\n HTMLDivElement\n>(\n forwardRef<HTMLDivElement, MergedProps<DialogComponentProps>>((props, ref) => {\n const {\n size = 's',\n layout = 'vertical',\n scrollable = false,\n scrollFading = false,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n layoutXXS,\n layoutXS,\n layoutS,\n layoutM,\n layoutL,\n layoutXL,\n root,\n floats,\n media,\n body,\n header,\n caption,\n title,\n subtitle,\n children,\n footer,\n closeButton,\n progressLine,\n fancy,\n imgSrcVertical,\n imgSrcHorizontal,\n draggable,\n loading,\n stickyHeader,\n className,\n backgroundClassName,\n onGrab,\n onNudge,\n ...restProps\n } = props\n\n const sizeProps = {\n size,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n }\n\n const layoutProps = {\n layout,\n layoutXXS,\n layoutXS,\n layoutS,\n layoutM,\n layoutL,\n layoutXL,\n }\n\n const captionProps: TextProps = {\n ...sizeProps,\n appearance: 'body',\n color: 'content-onmain-tertiary',\n wordBreak: 'break-word',\n marginBottom: '0.8em',\n sizes: SIZES_CAPTION,\n }\n\n const titleProps: TextProps = {\n ...sizeProps,\n as: 'h2',\n appearance: 'heading',\n color: 'content-onmain-primary',\n wordBreak: 'break-word',\n marginBottom: '0.5em',\n sizes: SIZES_TITLE,\n }\n\n const subtitleProps: TextProps = {\n ...sizeProps,\n as: 'p',\n appearance: 'body',\n color: 'content-onmain-primary',\n wordBreak: 'break-word',\n marginBottom: '0.8em',\n sizes: SIZES_SUBTITLE,\n }\n\n const closeButtonProps: IconButtonProps = fancy\n ? { icon: <Close />, size: 'xxl', filled: true }\n : { icon: <Close />, size: 'l', marginTop: 8, marginRight: 8 }\n\n const progressLineProps: ProgressLineProps = {\n size: 'xs',\n }\n\n const rootClassName = !fancy ? concatClassNames(className, backgroundClassName) : className\n\n const scrollFadingEnabled = scrollable && scrollFading\n\n const [contentRef, setContentRef] = useState<HTMLDivElement | null>(null)\n\n const { scrollThresholds, setScrollThresholds } = useScrollThresholds({\n enabled: scrollFadingEnabled,\n target: contentRef,\n })\n\n useScrollLock({ locked: !scrollable, target: contentRef })\n\n return (\n <Styled.Root\n {...restProps}\n {...sizeProps}\n {...layoutProps}\n layouts={fancy ? LAYOUTS_FANCY : LAYOUTS}\n className={rootClassName}\n fancy={fancy}\n ref={ref}\n >\n {fancy ? <Styled.FancyBackground className={backgroundClassName} /> : null}\n {isValidElement(root) ? (\n root\n ) : typeof root === 'function' ? (\n root({\n captionProps,\n titleProps,\n subtitleProps,\n closeButtonProps,\n progressLineProps,\n onGrab,\n onNudge,\n })\n ) : (\n <>\n {floats}\n {draggable ? (\n <Styled.DraggingHandle {...layoutProps} layouts={VISIBILITY_VERTICAL} onPointerDown={onGrab}>\n <Styled.DraggingIconContainer tabIndex={0} onKeyDown={onNudge}>\n <Icon icon={<Dragging />} size={34} color='content-onmain-tertiary' />\n </Styled.DraggingIconContainer>\n </Styled.DraggingHandle>\n ) : null}\n {closeButton ? (\n <Styled.ButtonPosition>\n {isValidElement(closeButton)\n ? closeButton\n : typeof closeButton === 'function'\n ? closeButton(closeButtonProps)\n : null}\n </Styled.ButtonPosition>\n ) : null}\n {loading || media || imgSrcVertical ? (\n <Styled.Media {...layoutProps} layouts={fancy ? LAYOUTS_FANCY_MEDIA_VERTICAL : LAYOUTS_MEDIA_VERTICAL}>\n {loading ? (\n <AspectRatio ratio='3:1' width='100%'>\n <Skeleton borderRadius={0} />\n </AspectRatio>\n ) : isValidElement(media) ? (\n media\n ) : (\n <AspectRatio ratio='3:1' width='100%'>\n <Styled.Img src={imgSrcVertical} />\n </AspectRatio>\n )}\n </Styled.Media>\n ) : null}\n {loading || media || imgSrcHorizontal ? (\n <Styled.Media {...layoutProps} layouts={LAYOUTS_MEDIA_HORIZONTAL}>\n {loading ? (\n <AspectRatio ratio='5:7' height='100%'>\n <Skeleton borderRadius={0} />\n </AspectRatio>\n ) : isValidElement(media) ? (\n media\n ) : (\n <AspectRatio ratio='5:7' height='100%'>\n <Styled.Img src={imgSrcHorizontal} />\n </AspectRatio>\n )}\n </Styled.Media>\n ) : null}\n <Styled.Body>\n {progressLine && !loading ? (\n <Styled.ProgressPosition {...layoutProps} layouts={fancy ? LAYOUTS_FANCY_PROGRESS : LAYOUTS_PROGRESS}>\n {isValidElement(progressLine)\n ? progressLine\n : typeof progressLine === 'function'\n ? progressLine(progressLineProps)\n : null}\n </Styled.ProgressPosition>\n ) : null}\n {draggable ? (\n <Styled.DraggingHandle {...layoutProps} layouts={VISIBILITY_HORIZONTAL} onPointerDown={onGrab}>\n <Styled.DraggingIconContainer tabIndex={0} onKeyDown={onNudge}>\n <Icon icon={<Dragging />} size={34} color='content-onmain-tertiary' />\n </Styled.DraggingIconContainer>\n </Styled.DraggingHandle>\n ) : null}\n {fancy ? <Styled.LayoutSpacer {...layoutProps} layouts={VISIBILITY_HORIZONTAL} paddingTop={76} /> : null}\n {loading ? (\n <Styled.Container {...sizeProps} sizes={SIZES_CONTAINER}>\n <Styled.Content {...sizeProps} sizes={SIZES_CONTENT}>\n <Skeleton>\n <Text {...titleProps} marginBottom='1.5em' />\n </Skeleton>\n <Skeleton width='90%'>\n <Text {...subtitleProps} marginBottom='0.4em' />\n </Skeleton>\n <Skeleton width='70%'>\n <Text {...subtitleProps} marginBottom='0.4em' />\n </Skeleton>\n <Skeleton width='50%'>\n <Text {...subtitleProps} marginBottom='0.8em' />\n </Skeleton>\n </Styled.Content>\n </Styled.Container>\n ) : isValidElement(body) ? (\n body\n ) : typeof body === 'function' ? (\n body({\n captionProps,\n titleProps,\n subtitleProps,\n })\n ) : (\n <Styled.Container {...sizeProps} sizes={SIZES_CONTAINER}>\n {stickyHeader ? (\n <Styled.StickyHeader {...sizeProps} sizes={SIZES_STICKY_HEADER}>\n <Header\n header={header}\n caption={caption}\n title={title}\n subtitle={subtitle}\n captionProps={captionProps}\n titleProps={titleProps}\n subtitleProps={subtitleProps}\n />\n </Styled.StickyHeader>\n ) : null}\n {scrollFadingEnabled ? <Styled.Fading visible={scrollThresholds.top === false} /> : null}\n <Styled.ContentScrollArea\n ref={setContentRef}\n scrollable={scrollable}\n tabIndex={scrollable ? 0 : undefined}\n onScroll={(evt) => {\n if (scrollFadingEnabled) {\n setScrollThresholds(evt.currentTarget)\n }\n }}\n onKeyDown={(evt) => {\n if (keyboardKeys.ArrowUp.validate(evt.key)) {\n evt.preventDefault()\n evt.currentTarget.scrollBy(0, -13)\n } else if (keyboardKeys.ArrowDown.validate(evt.key)) {\n evt.preventDefault()\n evt.currentTarget.scrollBy(0, 13)\n }\n }}\n >\n <Styled.Content {...sizeProps} sizes={SIZES_CONTENT}>\n {!stickyHeader ? (\n <Header\n header={header}\n caption={caption}\n title={title}\n subtitle={subtitle}\n captionProps={captionProps}\n titleProps={titleProps}\n subtitleProps={subtitleProps}\n />\n ) : null}\n {children}\n </Styled.Content>\n </Styled.ContentScrollArea>\n {scrollFadingEnabled ? <Styled.Fading visible={scrollThresholds.bottom === false} after /> : null}\n {footer ? (\n <Styled.Footer {...sizeProps} sizes={SIZES_FOOTER}>\n {footer}\n </Styled.Footer>\n ) : null}\n </Styled.Container>\n )}\n </Styled.Body>\n </>\n )}\n </Styled.Root>\n )\n }),\n {\n sizes: (props) => (props.fancy ? SIZES_FANCY : SIZES),\n displayName: COMPONENT_NAME,\n }\n)\n\nexport { DialogComponent }\n"],"names":["DialogComponent","withMergedProps","forwardRef","props","ref","size","layout","scrollable","scrollFading","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","layoutXXS","layoutXS","layoutS","layoutM","layoutL","layoutXL","root","floats","media","body","header","caption","title","subtitle","children","footer","closeButton","progressLine","fancy","imgSrcVertical","imgSrcHorizontal","draggable","loading","stickyHeader","className","backgroundClassName","onGrab","onNudge","restProps","sizeProps","layoutProps","captionProps","appearance","color","wordBreak","marginBottom","sizes","SIZES_CAPTION","titleProps","as","SIZES_TITLE","subtitleProps","SIZES_SUBTITLE","closeButtonProps","icon","_jsx","Close","filled","marginTop","marginRight","progressLineProps","rootClassName","concatClassNames","scrollFadingEnabled","contentRef","setContentRef","useState","scrollThresholds","setScrollThresholds","useScrollThresholds","enabled","target","useScrollLock","locked","_jsxs","Styled","layouts","LAYOUTS_FANCY","LAYOUTS","isValidElement","_Fragment","VISIBILITY_VERTICAL","onPointerDown","tabIndex","onKeyDown","Icon","Dragging","LAYOUTS_FANCY_MEDIA_VERTICAL","LAYOUTS_MEDIA_VERTICAL","AspectRatio","ratio","width","Skeleton","borderRadius","src","LAYOUTS_MEDIA_HORIZONTAL","height","LAYOUTS_FANCY_PROGRESS","LAYOUTS_PROGRESS","VISIBILITY_HORIZONTAL","paddingTop","SIZES_CONTAINER","SIZES_CONTENT","Text","SIZES_STICKY_HEADER","Header","visible","top","undefined","onScroll","evt","currentTarget","keyboardKeys","ArrowUp","validate","key","preventDefault","scrollBy","ArrowDown","bottom","after","SIZES_FOOTER","SIZES_FANCY","SIZES","displayName"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"DialogComponent.mjs","sources":["../../../../src/components/DialogComponent/DialogComponent.tsx"],"sourcesContent":["import { forwardRef, useState, isValidElement } from 'react'\nimport { Close } from '@foxford/icon-pack'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport type { MergedProps } from 'hocs/withMergedProps'\nimport { useScrollThresholds } from 'hooks/useScrollThresholds'\nimport { keyboardKeys } from 'shared/constants'\nimport { Text } from 'components/Text'\nimport { Icon } from 'components/Icon'\nimport { Skeleton } from 'components/Skeleton'\nimport { AspectRatio } from 'components/AspectRatio'\nimport type { TextProps } from 'components/Text'\nimport type { IconButtonProps } from 'components/IconButton'\nimport type { ProgressLineProps } from 'components/ProgressLine'\nimport { concatClassNames } from 'shared/utils/dom'\nimport { useScrollLock } from 'hooks/useScrollLock'\nimport Dragging from './images/dragging.svg?module'\nimport * as Styled from './style'\nimport {\n SIZES,\n SIZES_FANCY,\n SIZES_CONTAINER,\n SIZES_CONTENT,\n SIZES_FOOTER,\n SIZES_CAPTION,\n SIZES_TITLE,\n SIZES_SUBTITLE,\n SIZES_STICKY_HEADER,\n} from './sizes'\nimport {\n LAYOUTS,\n LAYOUTS_FANCY,\n LAYOUTS_MEDIA_VERTICAL,\n LAYOUTS_FANCY_MEDIA_VERTICAL,\n LAYOUTS_MEDIA_HORIZONTAL,\n LAYOUTS_PROGRESS,\n LAYOUTS_FANCY_PROGRESS,\n VISIBILITY_VERTICAL,\n VISIBILITY_HORIZONTAL,\n} from './layouts'\nimport type { DialogComponentProps } from './types'\nimport { Header } from './Header'\n\nconst COMPONENT_NAME = 'DialogComponent'\n\nconst DialogComponent: React.ForwardRefExoticComponent<DialogComponentProps> = withMergedProps<\n DialogComponentProps,\n HTMLDivElement\n>(\n forwardRef<HTMLDivElement, MergedProps<DialogComponentProps>>((props, ref) => {\n const {\n size = 's',\n layout = 'vertical',\n scrollable = false,\n scrollFading = false,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n layoutXXS,\n layoutXS,\n layoutS,\n layoutM,\n layoutL,\n layoutXL,\n root,\n floats,\n media,\n body,\n header,\n caption,\n title,\n subtitle,\n children,\n footer,\n closeButton,\n progressLine,\n fancy,\n imgSrcVertical,\n imgSrcHorizontal,\n draggable,\n loading,\n stickyHeader,\n className,\n backgroundClassName,\n onGrab,\n onNudge,\n ...restProps\n } = props\n\n const sizeProps = {\n size,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n }\n\n const layoutProps = {\n layout,\n layoutXXS,\n layoutXS,\n layoutS,\n layoutM,\n layoutL,\n layoutXL,\n }\n\n const captionProps: TextProps = {\n ...sizeProps,\n appearance: 'body',\n color: 'content-onmain-tertiary',\n wordBreak: 'break-word',\n marginBottom: '0.8em',\n sizes: SIZES_CAPTION,\n }\n\n const titleProps: TextProps = {\n ...sizeProps,\n as: 'h2',\n appearance: 'heading',\n color: 'content-onmain-primary',\n wordBreak: 'break-word',\n marginBottom: '0.5em',\n sizes: SIZES_TITLE,\n }\n\n const subtitleProps: TextProps = {\n ...sizeProps,\n as: 'p',\n appearance: 'body',\n color: 'content-onmain-primary',\n wordBreak: 'break-word',\n marginBottom: '0.8em',\n sizes: SIZES_SUBTITLE,\n }\n\n const closeButtonProps: IconButtonProps = fancy\n ? { icon: <Close />, size: 'xxl', secondary: true }\n : { icon: <Close />, size: 'l', marginTop: 8, marginRight: 8 }\n\n const progressLineProps: ProgressLineProps = {\n size: 'xs',\n }\n\n const rootClassName = !fancy ? concatClassNames(className, backgroundClassName) : className\n\n const scrollFadingEnabled = scrollable && scrollFading\n\n const [contentRef, setContentRef] = useState<HTMLDivElement | null>(null)\n\n const { scrollThresholds, setScrollThresholds } = useScrollThresholds({\n enabled: scrollFadingEnabled,\n target: contentRef,\n })\n\n useScrollLock({ locked: !scrollable, target: contentRef })\n\n return (\n <Styled.Root\n {...restProps}\n {...sizeProps}\n {...layoutProps}\n layouts={fancy ? LAYOUTS_FANCY : LAYOUTS}\n className={rootClassName}\n fancy={fancy}\n ref={ref}\n >\n {fancy ? <Styled.FancyBackground className={backgroundClassName} /> : null}\n {isValidElement(root) ? (\n root\n ) : typeof root === 'function' ? (\n root({\n captionProps,\n titleProps,\n subtitleProps,\n closeButtonProps,\n progressLineProps,\n onGrab,\n onNudge,\n })\n ) : (\n <>\n {floats}\n {draggable ? (\n <Styled.DraggingHandle {...layoutProps} layouts={VISIBILITY_VERTICAL} onPointerDown={onGrab}>\n <Styled.DraggingIconContainer tabIndex={0} onKeyDown={onNudge}>\n <Icon icon={<Dragging />} size={34} color='content-onmain-tertiary' />\n </Styled.DraggingIconContainer>\n </Styled.DraggingHandle>\n ) : null}\n {closeButton ? (\n <Styled.ButtonPosition>\n {isValidElement(closeButton)\n ? closeButton\n : typeof closeButton === 'function'\n ? closeButton(closeButtonProps)\n : null}\n </Styled.ButtonPosition>\n ) : null}\n {loading || media || imgSrcVertical ? (\n <Styled.Media {...layoutProps} layouts={fancy ? LAYOUTS_FANCY_MEDIA_VERTICAL : LAYOUTS_MEDIA_VERTICAL}>\n {loading ? (\n <AspectRatio ratio='3:1' width='100%'>\n <Skeleton borderRadius={0} />\n </AspectRatio>\n ) : isValidElement(media) ? (\n media\n ) : (\n <AspectRatio ratio='3:1' width='100%'>\n <Styled.Img src={imgSrcVertical} />\n </AspectRatio>\n )}\n </Styled.Media>\n ) : null}\n {loading || media || imgSrcHorizontal ? (\n <Styled.Media {...layoutProps} layouts={LAYOUTS_MEDIA_HORIZONTAL}>\n {loading ? (\n <AspectRatio ratio='5:7' height='100%'>\n <Skeleton borderRadius={0} />\n </AspectRatio>\n ) : isValidElement(media) ? (\n media\n ) : (\n <AspectRatio ratio='5:7' height='100%'>\n <Styled.Img src={imgSrcHorizontal} />\n </AspectRatio>\n )}\n </Styled.Media>\n ) : null}\n <Styled.Body>\n {progressLine && !loading ? (\n <Styled.ProgressPosition {...layoutProps} layouts={fancy ? LAYOUTS_FANCY_PROGRESS : LAYOUTS_PROGRESS}>\n {isValidElement(progressLine)\n ? progressLine\n : typeof progressLine === 'function'\n ? progressLine(progressLineProps)\n : null}\n </Styled.ProgressPosition>\n ) : null}\n {draggable ? (\n <Styled.DraggingHandle {...layoutProps} layouts={VISIBILITY_HORIZONTAL} onPointerDown={onGrab}>\n <Styled.DraggingIconContainer tabIndex={0} onKeyDown={onNudge}>\n <Icon icon={<Dragging />} size={34} color='content-onmain-tertiary' />\n </Styled.DraggingIconContainer>\n </Styled.DraggingHandle>\n ) : null}\n {fancy ? <Styled.LayoutSpacer {...layoutProps} layouts={VISIBILITY_HORIZONTAL} paddingTop={76} /> : null}\n {loading ? (\n <Styled.Container {...sizeProps} sizes={SIZES_CONTAINER}>\n <Styled.Content {...sizeProps} sizes={SIZES_CONTENT}>\n <Skeleton>\n <Text {...titleProps} marginBottom='1.5em' />\n </Skeleton>\n <Skeleton width='90%'>\n <Text {...subtitleProps} marginBottom='0.4em' />\n </Skeleton>\n <Skeleton width='70%'>\n <Text {...subtitleProps} marginBottom='0.4em' />\n </Skeleton>\n <Skeleton width='50%'>\n <Text {...subtitleProps} marginBottom='0.8em' />\n </Skeleton>\n </Styled.Content>\n </Styled.Container>\n ) : isValidElement(body) ? (\n body\n ) : typeof body === 'function' ? (\n body({\n captionProps,\n titleProps,\n subtitleProps,\n })\n ) : (\n <Styled.Container {...sizeProps} sizes={SIZES_CONTAINER}>\n {stickyHeader ? (\n <Styled.StickyHeader {...sizeProps} sizes={SIZES_STICKY_HEADER}>\n <Header\n header={header}\n caption={caption}\n title={title}\n subtitle={subtitle}\n captionProps={captionProps}\n titleProps={titleProps}\n subtitleProps={subtitleProps}\n />\n </Styled.StickyHeader>\n ) : null}\n {scrollFadingEnabled ? <Styled.Fading visible={scrollThresholds.top === false} /> : null}\n <Styled.ContentScrollArea\n ref={setContentRef}\n scrollable={scrollable}\n tabIndex={scrollable ? 0 : undefined}\n onScroll={(evt) => {\n if (scrollFadingEnabled) {\n setScrollThresholds(evt.currentTarget)\n }\n }}\n onKeyDown={(evt) => {\n if (keyboardKeys.ArrowUp.validate(evt.key)) {\n evt.preventDefault()\n evt.currentTarget.scrollBy(0, -13)\n } else if (keyboardKeys.ArrowDown.validate(evt.key)) {\n evt.preventDefault()\n evt.currentTarget.scrollBy(0, 13)\n }\n }}\n >\n <Styled.Content {...sizeProps} sizes={SIZES_CONTENT}>\n {!stickyHeader ? (\n <Header\n header={header}\n caption={caption}\n title={title}\n subtitle={subtitle}\n captionProps={captionProps}\n titleProps={titleProps}\n subtitleProps={subtitleProps}\n />\n ) : null}\n {children}\n </Styled.Content>\n </Styled.ContentScrollArea>\n {scrollFadingEnabled ? <Styled.Fading visible={scrollThresholds.bottom === false} after /> : null}\n {footer ? (\n <Styled.Footer {...sizeProps} sizes={SIZES_FOOTER}>\n {footer}\n </Styled.Footer>\n ) : null}\n </Styled.Container>\n )}\n </Styled.Body>\n </>\n )}\n </Styled.Root>\n )\n }),\n {\n sizes: (props) => (props.fancy ? SIZES_FANCY : SIZES),\n displayName: COMPONENT_NAME,\n }\n)\n\nexport { DialogComponent }\n"],"names":["DialogComponent","withMergedProps","forwardRef","props","ref","size","layout","scrollable","scrollFading","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","layoutXXS","layoutXS","layoutS","layoutM","layoutL","layoutXL","root","floats","media","body","header","caption","title","subtitle","children","footer","closeButton","progressLine","fancy","imgSrcVertical","imgSrcHorizontal","draggable","loading","stickyHeader","className","backgroundClassName","onGrab","onNudge","restProps","sizeProps","layoutProps","captionProps","appearance","color","wordBreak","marginBottom","sizes","SIZES_CAPTION","titleProps","as","SIZES_TITLE","subtitleProps","SIZES_SUBTITLE","closeButtonProps","icon","_jsx","Close","secondary","marginTop","marginRight","progressLineProps","rootClassName","concatClassNames","scrollFadingEnabled","contentRef","setContentRef","useState","scrollThresholds","setScrollThresholds","useScrollThresholds","enabled","target","useScrollLock","locked","_jsxs","Styled","layouts","LAYOUTS_FANCY","LAYOUTS","isValidElement","_Fragment","VISIBILITY_VERTICAL","onPointerDown","tabIndex","onKeyDown","Icon","Dragging","LAYOUTS_FANCY_MEDIA_VERTICAL","LAYOUTS_MEDIA_VERTICAL","AspectRatio","ratio","width","Skeleton","borderRadius","src","LAYOUTS_MEDIA_HORIZONTAL","height","LAYOUTS_FANCY_PROGRESS","LAYOUTS_PROGRESS","VISIBILITY_HORIZONTAL","paddingTop","SIZES_CONTAINER","SIZES_CONTENT","Text","SIZES_STICKY_HEADER","Header","visible","top","undefined","onScroll","evt","currentTarget","keyboardKeys","ArrowUp","validate","key","preventDefault","scrollBy","ArrowDown","bottom","after","SIZES_FOOTER","SIZES_FANCY","SIZES","displayName"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
'use strict';var React=require('react');var withMergedProps=require('../../hocs/withMergedProps.js');var sizes=require('./sizes.js');var style=require('./style.js');var jsxRuntime=require('react/jsx-runtime');var
|
|
1
|
+
'use strict';var React=require('react');var withMergedProps=require('../../hocs/withMergedProps.js');var sizes=require('./sizes.js');var style=require('./style.js');var jsxRuntime=require('react/jsx-runtime');var Icon=require('../Icon/Icon.js');const IconButton=withMergedProps.withMergedProps(React.forwardRef((e,r)=>{const{size:s="m",type:t="button",iconProps:i={},icon:o,...n}=e;return jsxRuntime.jsx(style.Root,{...n,size:s,type:t,ref:r,children:jsxRuntime.jsx(Icon.Icon,{preset:"brand",size:"inherit",name:typeof o=='string'?o:void 0,icon:typeof o!='string'?o:void 0,...i})})}),{displayName:'IconButton',sizes:e=>e.square?sizes.SIZES_SQUARE:sizes.SIZES});exports.IconButton=IconButton;
|
|
2
2
|
//# sourceMappingURL=IconButton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconButton.js","sources":["../../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport type { MergedProps } from 'hocs/withMergedProps'\nimport { Icon } from 'components/Icon'\nimport {
|
|
1
|
+
{"version":3,"file":"IconButton.js","sources":["../../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport type { MergedProps } from 'hocs/withMergedProps'\nimport { Icon } from 'components/Icon'\nimport { SIZES, SIZES_SQUARE } from './sizes'\nimport * as Styled from './style'\nimport type { IconButtonProps } from './types'\n\nconst COMPONENT_NAME = 'IconButton'\n\n/**\n *\n * Контрол многоцелевого назначения.\n *\n * Поддерживается \"ref\" и все нативные атрибуты \\<button\\> элемента.\n */\nconst IconButton: React.ForwardRefExoticComponent<IconButtonProps> = withMergedProps<\n IconButtonProps,\n HTMLButtonElement\n>(\n forwardRef<HTMLButtonElement, MergedProps<IconButtonProps>>((props, ref) => {\n const { size = 'm', type = 'button', iconProps = {}, icon, ...restProps } = props\n\n return (\n <Styled.Root {...restProps} size={size} type={type} ref={ref}>\n <Icon\n preset='brand'\n size='inherit'\n name={typeof icon === 'string' ? icon : undefined}\n icon={typeof icon !== 'string' ? icon : undefined}\n {...iconProps}\n />\n </Styled.Root>\n )\n }),\n {\n displayName: COMPONENT_NAME,\n sizes: (props) => (props.square ? SIZES_SQUARE : SIZES),\n }\n)\n\nexport { IconButton }\n"],"names":["IconButton","withMergedProps","forwardRef","props","ref","size","type","iconProps","icon","restProps","_jsx","Styled","children","Icon","preset","name","undefined","displayName","sizes","square","SIZES_SQUARE","SIZES"],"mappings":"qPAgBA,MAAMA,WAA+DC,gBAAAA,gBAInEC,MAAAA,WAA4D,CAACC,EAAOC,KAClE,MAAMC,KAAEA,EAAO,IAAGC,KAAEA,EAAO,SAAQC,UAAEA,EAAY,CAAA,EAAEC,KAAEA,KAASC,GAAcN,EAE5E,OACEO,WAAAA,IAACC,MAAAA,KAAW,IAAKF,EAAWJ,KAAMA,EAAMC,KAAMA,EAAMF,IAAKA,EAAIQ,SAC3DF,WAAAA,IAACG,UAAI,CACHC,OAAO,QACPT,KAAK,UACLU,YAAaP,GAAS,SAAWA,OAAOQ,EACxCR,YAAaA,GAAS,SAAWA,OAAOQ,KACpCT,QAKZ,CACEU,YA5BmB,aA6BnBC,MAAQf,GAAWA,EAAMgB,OAASC,MAAAA,aAAeC,MAAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{forwardRef}from'react';import{withMergedProps}from'../../hocs/withMergedProps.mjs';import{SIZES_SQUARE,SIZES}from'./sizes.mjs';import{Root}from'./style.mjs';import{jsx}from'react/jsx-runtime';import{
|
|
1
|
+
import{forwardRef}from'react';import{withMergedProps}from'../../hocs/withMergedProps.mjs';import{SIZES_SQUARE,SIZES}from'./sizes.mjs';import{Root}from'./style.mjs';import{jsx}from'react/jsx-runtime';import{Icon}from'../Icon/Icon.mjs';const IconButton=withMergedProps(forwardRef((o,r)=>{const{size:t="m",type:e="button",iconProps:s={},icon:i,...n}=o;return jsx(Root,{...n,size:t,type:e,ref:r,children:jsx(Icon,{preset:"brand",size:"inherit",name:typeof i=='string'?i:void 0,icon:typeof i!='string'?i:void 0,...s})})}),{displayName:'IconButton',sizes:o=>o.square?SIZES_SQUARE:SIZES});export{IconButton};
|
|
2
2
|
//# sourceMappingURL=IconButton.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconButton.mjs","sources":["../../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport type { MergedProps } from 'hocs/withMergedProps'\nimport { Icon } from 'components/Icon'\nimport {
|
|
1
|
+
{"version":3,"file":"IconButton.mjs","sources":["../../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport type { MergedProps } from 'hocs/withMergedProps'\nimport { Icon } from 'components/Icon'\nimport { SIZES, SIZES_SQUARE } from './sizes'\nimport * as Styled from './style'\nimport type { IconButtonProps } from './types'\n\nconst COMPONENT_NAME = 'IconButton'\n\n/**\n *\n * Контрол многоцелевого назначения.\n *\n * Поддерживается \"ref\" и все нативные атрибуты \\<button\\> элемента.\n */\nconst IconButton: React.ForwardRefExoticComponent<IconButtonProps> = withMergedProps<\n IconButtonProps,\n HTMLButtonElement\n>(\n forwardRef<HTMLButtonElement, MergedProps<IconButtonProps>>((props, ref) => {\n const { size = 'm', type = 'button', iconProps = {}, icon, ...restProps } = props\n\n return (\n <Styled.Root {...restProps} size={size} type={type} ref={ref}>\n <Icon\n preset='brand'\n size='inherit'\n name={typeof icon === 'string' ? icon : undefined}\n icon={typeof icon !== 'string' ? icon : undefined}\n {...iconProps}\n />\n </Styled.Root>\n )\n }),\n {\n displayName: COMPONENT_NAME,\n sizes: (props) => (props.square ? SIZES_SQUARE : SIZES),\n }\n)\n\nexport { IconButton }\n"],"names":["IconButton","withMergedProps","forwardRef","props","ref","size","type","iconProps","icon","restProps","_jsx","Styled","children","Icon","preset","name","undefined","displayName","sizes","square","SIZES_SQUARE","SIZES"],"mappings":"0OAgBA,MAAMA,WAA+DC,gBAInEC,WAA4D,CAACC,EAAOC,KAClE,MAAMC,KAAEA,EAAO,IAAGC,KAAEA,EAAO,SAAQC,UAAEA,EAAY,CAAA,EAAEC,KAAEA,KAASC,GAAcN,EAE5E,OACEO,IAACC,KAAW,IAAKF,EAAWJ,KAAMA,EAAMC,KAAMA,EAAMF,IAAKA,EAAIQ,SAC3DF,IAACG,KAAI,CACHC,OAAO,QACPT,KAAK,UACLU,YAAaP,GAAS,SAAWA,OAAOQ,EACxCR,YAAaA,GAAS,SAAWA,OAAOQ,KACpCT,QAKZ,CACEU,YA5BmB,aA6BnBC,MAAQf,GAAWA,EAAMgB,OAASC,aAAeC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
'use strict';var styled=require('styled-components');var responsiveSize=require('../../mixins/responsive-size.js');var responsiveMargin=require('../../mixins/responsive-margin.js');var focus=require('../../mixins/focus.js');var style=require('../../shared/utils/style.js');var
|
|
1
|
+
'use strict';var styled=require('styled-components');var tinycolor=require('tinycolor2');var responsiveSize=require('../../mixins/responsive-size.js');var responsiveMargin=require('../../mixins/responsive-margin.js');var focus=require('../../mixins/focus.js');var style=require('../../shared/utils/style.js');var hover=require('../../mixins/hover.js');function _interopDefault(o){return o&&o.__esModule?o:{default:o}}var styled__default=_interopDefault(styled);var tinycolor__default=_interopDefault(tinycolor);const shouldForwardIconButtonProp=style.createShouldForwardProp(o=>!['square'].includes(o));const template=o=>`\n color: ${o.color};\n background-color: ${o.backgroundColor};\n ${hover.hover(`\n color: ${o.colorHover};\n background-color: ${o.backgroundColorHover};\n `)}\n &:active {\n color: ${o.colorActive};\n background-color: ${o.backgroundColorActive};\n }\n &:disabled {\n color: ${o.colorDisabled};\n background-color: ${o.backgroundColorDisabled};\n }\n`;const COLOR_SCHEMA={default:{primary:styled.css(["",""],o=>template({color:o.theme.colors['content-onmain-tertiary'],backgroundColor:o.theme.colors.transparent,colorHover:o.theme.colors['content-onmain-primary'],backgroundColorHover:o.theme.colors['bg-oncolor-hover'],colorActive:o.theme.colors['content-onmain-primary'],backgroundColorActive:tinycolor__default.default(o.theme.colors['bg-oncolor-hover']).setAlpha(.12).toString(),colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors.transparent,...o.palette})),secondary:styled.css(["",""],o=>template({color:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors['bg-brand-primary-100'],colorHover:o.theme.colors['content-onmain-primary'],backgroundColorHover:tinycolor__default.default(o.theme.colors['bg-brand-primary-100']).darken(5).toString(),colorActive:o.theme.colors['content-onmain-primary'],backgroundColorActive:tinycolor__default.default(o.theme.colors['bg-brand-primary-100']).darken(7).toString(),colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors['bg-disabled-large'],...o.palette}))},contrast:{primary:styled.css(["",""],o=>template({color:o.theme.colors['content-oncolor-tertiary'],backgroundColor:o.theme.colors.transparent,colorHover:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.theme.colors['bg-oncontrast-hover'],colorActive:o.theme.colors['content-oncolor-primary'],backgroundColorActive:tinycolor__default.default(o.theme.colors['bg-oncontrast-hover']).setAlpha(.12).toString(),colorDisabled:o.theme.colors['content-oncolor-disabled'],backgroundColorDisabled:o.theme.colors.transparent,...o.palette})),secondary:styled.css(["",""],o=>template({color:o.theme.colors['content-onmain-inverse'],backgroundColor:o.theme.colors['bg-contrast-active'],colorHover:o.theme.colors['content-onmain-inverse'],backgroundColorHover:tinycolor__default.default(o.theme.colors['bg-contrast-active']).lighten(7).toString(),colorActive:o.theme.colors['content-onmain-inverse'],backgroundColorActive:tinycolor__default.default(o.theme.colors['bg-contrast-active']).lighten(11).toString(),colorDisabled:o.theme.colors['content-oncolor-disabled'],backgroundColorDisabled:o.theme.colors['bg-oncolor-disabled'],...o.palette}))}};const Root=styled__default.default.button.withConfig({shouldForwardProp:shouldForwardIconButtonProp}).attrs(o=>({dynamicSizeDeclaration:(r,e)=>({width:'1em',height:'1em',fontSize:typeof r=='string'?r:`${r}${e}`,borderRadius:o.square?'0.2em':'50%'})})).withConfig({displayName:"IconButton__Root",componentId:"ui__sc-y4pwgp-0"})([""," "," "," "," ",""],o=>`\n box-sizing: border-box;\n appearance: none;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n padding: 0;\n margin: 0;\n border: none;\n cursor: ${o.disabled?'not-allowed':'pointer'};\n transition-property: background-color; \n transition-duration: 250ms;\n `,o=>{const r=o.contrast?COLOR_SCHEMA.contrast:COLOR_SCHEMA.default;return o.secondary?r.secondary:r.primary},focus.focus,responsiveSize.responsiveSize,responsiveMargin.responsiveMargin);exports.Root=Root;
|
|
2
2
|
//# sourceMappingURL=style.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../../../src/components/IconButton/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport { focus } from 'mixins/focus'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport {
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../../src/components/IconButton/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport { focus } from 'mixins/focus'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport type { CSSColor } from 'shared/types'\nimport { hover } from 'mixins/hover'\nimport type { IconButtonPalette, StyledIconButtonProps } from './types'\n\nconst shouldForwardIconButtonProp = createShouldForwardProp((propKey) => !['square'].includes(propKey))\n\nconst template = (palette: IconButtonPalette) => `\n color: ${palette.color};\n background-color: ${palette.backgroundColor};\n ${hover(`\n color: ${palette.colorHover};\n background-color: ${palette.backgroundColorHover};\n `)}\n &:active {\n color: ${palette.colorActive};\n background-color: ${palette.backgroundColorActive};\n }\n &:disabled {\n color: ${palette.colorDisabled};\n background-color: ${palette.backgroundColorDisabled};\n }\n`\n\nconst COLOR_SCHEMA = {\n default: {\n primary: css<StyledIconButtonProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-tertiary'],\n backgroundColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.theme.colors['bg-oncolor-hover'],\n colorActive: props.theme.colors['content-onmain-primary'],\n backgroundColorActive: tinycolor(props.theme.colors['bg-oncolor-hover'])\n .setAlpha(0.12)\n .toString() as CSSColor,\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.theme.colors.transparent,\n ...props.palette,\n })}\n `,\n secondary: css<StyledIconButtonProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors['bg-brand-primary-100'],\n colorHover: props.theme.colors['content-onmain-primary'],\n backgroundColorHover: tinycolor(props.theme.colors['bg-brand-primary-100']).darken(5).toString() as CSSColor,\n colorActive: props.theme.colors['content-onmain-primary'],\n backgroundColorActive: tinycolor(props.theme.colors['bg-brand-primary-100']).darken(7).toString() as CSSColor,\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-large'],\n ...props.palette,\n })}\n `,\n },\n contrast: {\n primary: css<StyledIconButtonProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-tertiary'],\n backgroundColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.theme.colors['bg-oncontrast-hover'],\n colorActive: props.theme.colors['content-oncolor-primary'],\n backgroundColorActive: tinycolor(props.theme.colors['bg-oncontrast-hover'])\n .setAlpha(0.12)\n .toString() as CSSColor,\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n backgroundColorDisabled: props.theme.colors.transparent,\n ...props.palette,\n })}\n `,\n secondary: css<StyledIconButtonProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-inverse'],\n backgroundColor: props.theme.colors['bg-contrast-active'],\n colorHover: props.theme.colors['content-onmain-inverse'],\n backgroundColorHover: tinycolor(props.theme.colors['bg-contrast-active']).lighten(7).toString() as CSSColor,\n colorActive: props.theme.colors['content-onmain-inverse'],\n backgroundColorActive: tinycolor(props.theme.colors['bg-contrast-active']).lighten(11).toString() as CSSColor,\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n backgroundColorDisabled: props.theme.colors['bg-oncolor-disabled'],\n ...props.palette,\n })}\n `,\n },\n}\n\nexport const Root = styled.button\n .withConfig<StyledIconButtonProps>({\n shouldForwardProp: shouldForwardIconButtonProp,\n })\n .attrs<StyledIconButtonProps>(\n (props): Required<Pick<StyledIconButtonProps, 'dynamicSizeDeclaration'>> => ({\n dynamicSizeDeclaration: (size, sizeUnits) => ({\n width: '1em',\n height: '1em',\n fontSize: typeof size === 'string' ? size : `${size}${sizeUnits}`,\n borderRadius: props.square ? '0.2em' : '50%',\n }),\n })\n )`\n ${(props) => `\n box-sizing: border-box;\n appearance: none;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n padding: 0;\n margin: 0;\n border: none;\n cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n transition-property: background-color; \n transition-duration: 250ms;\n `}\n\n ${(props) => {\n const schema = props.contrast ? COLOR_SCHEMA.contrast : COLOR_SCHEMA.default\n\n if (props.secondary) return schema.secondary\n\n return schema.primary\n }}\n\n ${focus}\n ${responsiveSize}\n ${responsiveMargin}\n`\n"],"names":["shouldForwardIconButtonProp","createShouldForwardProp","propKey","includes","template","palette","color","backgroundColor","hover","colorHover","backgroundColorHover","colorActive","backgroundColorActive","colorDisabled","backgroundColorDisabled","COLOR_SCHEMA","default","primary","css","props","theme","colors","transparent","tinycolor","setAlpha","toString","secondary","darken","contrast","lighten","Root","styled","button","withConfig","shouldForwardProp","attrs","dynamicSizeDeclaration","size","sizeUnits","width","height","fontSize","borderRadius","square","displayName","componentId","disabled","schema","focus","responsiveSize","responsiveMargin"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import styled,{css}from'styled-components';import{responsiveSize}from'../../mixins/responsive-size.mjs';import{responsiveMargin}from'../../mixins/responsive-margin.mjs';import{focus}from'../../mixins/focus.mjs';import{createShouldForwardProp}from'../../shared/utils/style.mjs';import{
|
|
1
|
+
import styled,{css}from'styled-components';import tinycolor from'tinycolor2';import{responsiveSize}from'../../mixins/responsive-size.mjs';import{responsiveMargin}from'../../mixins/responsive-margin.mjs';import{focus}from'../../mixins/focus.mjs';import{createShouldForwardProp}from'../../shared/utils/style.mjs';import{hover}from'../../mixins/hover.mjs';const shouldForwardIconButtonProp=createShouldForwardProp(o=>!['square'].includes(o));const template=o=>`\n color: ${o.color};\n background-color: ${o.backgroundColor};\n ${hover(`\n color: ${o.colorHover};\n background-color: ${o.backgroundColorHover};\n `)}\n &:active {\n color: ${o.colorActive};\n background-color: ${o.backgroundColorActive};\n }\n &:disabled {\n color: ${o.colorDisabled};\n background-color: ${o.backgroundColorDisabled};\n }\n`;const COLOR_SCHEMA={default:{primary:css(["",""],o=>template({color:o.theme.colors['content-onmain-tertiary'],backgroundColor:o.theme.colors.transparent,colorHover:o.theme.colors['content-onmain-primary'],backgroundColorHover:o.theme.colors['bg-oncolor-hover'],colorActive:o.theme.colors['content-onmain-primary'],backgroundColorActive:tinycolor(o.theme.colors['bg-oncolor-hover']).setAlpha(.12).toString(),colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors.transparent,...o.palette})),secondary:css(["",""],o=>template({color:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors['bg-brand-primary-100'],colorHover:o.theme.colors['content-onmain-primary'],backgroundColorHover:tinycolor(o.theme.colors['bg-brand-primary-100']).darken(5).toString(),colorActive:o.theme.colors['content-onmain-primary'],backgroundColorActive:tinycolor(o.theme.colors['bg-brand-primary-100']).darken(7).toString(),colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors['bg-disabled-large'],...o.palette}))},contrast:{primary:css(["",""],o=>template({color:o.theme.colors['content-oncolor-tertiary'],backgroundColor:o.theme.colors.transparent,colorHover:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.theme.colors['bg-oncontrast-hover'],colorActive:o.theme.colors['content-oncolor-primary'],backgroundColorActive:tinycolor(o.theme.colors['bg-oncontrast-hover']).setAlpha(.12).toString(),colorDisabled:o.theme.colors['content-oncolor-disabled'],backgroundColorDisabled:o.theme.colors.transparent,...o.palette})),secondary:css(["",""],o=>template({color:o.theme.colors['content-onmain-inverse'],backgroundColor:o.theme.colors['bg-contrast-active'],colorHover:o.theme.colors['content-onmain-inverse'],backgroundColorHover:tinycolor(o.theme.colors['bg-contrast-active']).lighten(7).toString(),colorActive:o.theme.colors['content-onmain-inverse'],backgroundColorActive:tinycolor(o.theme.colors['bg-contrast-active']).lighten(11).toString(),colorDisabled:o.theme.colors['content-oncolor-disabled'],backgroundColorDisabled:o.theme.colors['bg-oncolor-disabled'],...o.palette}))}};const Root=styled.button.withConfig({shouldForwardProp:shouldForwardIconButtonProp}).attrs(o=>({dynamicSizeDeclaration:(r,e)=>({width:'1em',height:'1em',fontSize:typeof r=='string'?r:`${r}${e}`,borderRadius:o.square?'0.2em':'50%'})})).withConfig({displayName:"IconButton__Root",componentId:"ui__sc-y4pwgp-0"})([""," "," "," "," ",""],o=>`\n box-sizing: border-box;\n appearance: none;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n padding: 0;\n margin: 0;\n border: none;\n cursor: ${o.disabled?'not-allowed':'pointer'};\n transition-property: background-color; \n transition-duration: 250ms;\n `,o=>{const r=o.contrast?COLOR_SCHEMA.contrast:COLOR_SCHEMA.default;return o.secondary?r.secondary:r.primary},focus,responsiveSize,responsiveMargin);export{Root};
|
|
2
2
|
//# sourceMappingURL=style.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.mjs","sources":["../../../../src/components/IconButton/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport { focus } from 'mixins/focus'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport {
|
|
1
|
+
{"version":3,"file":"style.mjs","sources":["../../../../src/components/IconButton/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport { focus } from 'mixins/focus'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport type { CSSColor } from 'shared/types'\nimport { hover } from 'mixins/hover'\nimport type { IconButtonPalette, StyledIconButtonProps } from './types'\n\nconst shouldForwardIconButtonProp = createShouldForwardProp((propKey) => !['square'].includes(propKey))\n\nconst template = (palette: IconButtonPalette) => `\n color: ${palette.color};\n background-color: ${palette.backgroundColor};\n ${hover(`\n color: ${palette.colorHover};\n background-color: ${palette.backgroundColorHover};\n `)}\n &:active {\n color: ${palette.colorActive};\n background-color: ${palette.backgroundColorActive};\n }\n &:disabled {\n color: ${palette.colorDisabled};\n background-color: ${palette.backgroundColorDisabled};\n }\n`\n\nconst COLOR_SCHEMA = {\n default: {\n primary: css<StyledIconButtonProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-tertiary'],\n backgroundColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.theme.colors['bg-oncolor-hover'],\n colorActive: props.theme.colors['content-onmain-primary'],\n backgroundColorActive: tinycolor(props.theme.colors['bg-oncolor-hover'])\n .setAlpha(0.12)\n .toString() as CSSColor,\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.theme.colors.transparent,\n ...props.palette,\n })}\n `,\n secondary: css<StyledIconButtonProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors['bg-brand-primary-100'],\n colorHover: props.theme.colors['content-onmain-primary'],\n backgroundColorHover: tinycolor(props.theme.colors['bg-brand-primary-100']).darken(5).toString() as CSSColor,\n colorActive: props.theme.colors['content-onmain-primary'],\n backgroundColorActive: tinycolor(props.theme.colors['bg-brand-primary-100']).darken(7).toString() as CSSColor,\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-large'],\n ...props.palette,\n })}\n `,\n },\n contrast: {\n primary: css<StyledIconButtonProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-tertiary'],\n backgroundColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.theme.colors['bg-oncontrast-hover'],\n colorActive: props.theme.colors['content-oncolor-primary'],\n backgroundColorActive: tinycolor(props.theme.colors['bg-oncontrast-hover'])\n .setAlpha(0.12)\n .toString() as CSSColor,\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n backgroundColorDisabled: props.theme.colors.transparent,\n ...props.palette,\n })}\n `,\n secondary: css<StyledIconButtonProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-inverse'],\n backgroundColor: props.theme.colors['bg-contrast-active'],\n colorHover: props.theme.colors['content-onmain-inverse'],\n backgroundColorHover: tinycolor(props.theme.colors['bg-contrast-active']).lighten(7).toString() as CSSColor,\n colorActive: props.theme.colors['content-onmain-inverse'],\n backgroundColorActive: tinycolor(props.theme.colors['bg-contrast-active']).lighten(11).toString() as CSSColor,\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n backgroundColorDisabled: props.theme.colors['bg-oncolor-disabled'],\n ...props.palette,\n })}\n `,\n },\n}\n\nexport const Root = styled.button\n .withConfig<StyledIconButtonProps>({\n shouldForwardProp: shouldForwardIconButtonProp,\n })\n .attrs<StyledIconButtonProps>(\n (props): Required<Pick<StyledIconButtonProps, 'dynamicSizeDeclaration'>> => ({\n dynamicSizeDeclaration: (size, sizeUnits) => ({\n width: '1em',\n height: '1em',\n fontSize: typeof size === 'string' ? size : `${size}${sizeUnits}`,\n borderRadius: props.square ? '0.2em' : '50%',\n }),\n })\n )`\n ${(props) => `\n box-sizing: border-box;\n appearance: none;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n padding: 0;\n margin: 0;\n border: none;\n cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n transition-property: background-color; \n transition-duration: 250ms;\n `}\n\n ${(props) => {\n const schema = props.contrast ? COLOR_SCHEMA.contrast : COLOR_SCHEMA.default\n\n if (props.secondary) return schema.secondary\n\n return schema.primary\n }}\n\n ${focus}\n ${responsiveSize}\n ${responsiveMargin}\n`\n"],"names":["shouldForwardIconButtonProp","createShouldForwardProp","propKey","includes","template","palette","color","backgroundColor","hover","colorHover","backgroundColorHover","colorActive","backgroundColorActive","colorDisabled","backgroundColorDisabled","COLOR_SCHEMA","default","primary","css","props","theme","colors","transparent","tinycolor","setAlpha","toString","secondary","darken","contrast","lighten","Root","styled","button","withConfig","shouldForwardProp","attrs","dynamicSizeDeclaration","size","sizeUnits","width","height","fontSize","borderRadius","square","displayName","componentId","disabled","schema","focus","responsiveSize","responsiveMargin"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
'use strict';var
|
|
1
|
+
'use strict';var MediaMatchers=require('./MediaMatchers.js');var useMediaConnector=require('./useMediaConnector.js');var useMediaPropsMatches=require('./useMediaPropsMatches.js');const Media=Object.assign(e=>{const{children:s,...a}=e;const r=useMediaConnector.useMediaConnector(useMediaConnector.useMediaConnector.getConfig(a));const t=useMediaPropsMatches.useMediaPropsMatches(a,r);return typeof s=='function'?s(t):t?s:null},{Matchers:MediaMatchers.MediaMatchers});exports.Media=Media;
|
|
2
2
|
//# sourceMappingURL=Media.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Media.js","sources":["../../../../src/components/Media/Media.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"Media.js","sources":["../../../../src/components/Media/Media.tsx"],"sourcesContent":["import { MediaMatchers } from './MediaMatchers'\nimport { useMediaConnector } from './useMediaConnector'\nimport { useMediaPropsMatches } from './useMediaPropsMatches'\nimport type { MediaProps, MediaMatchersProps } from './types'\n\n/**\n *\n * Компонент для вывода контента, который зависит от медиа кверей.\n */\nconst Media: React.FC<MediaProps> & {\n Matchers: React.FC<MediaMatchersProps>\n} = Object.assign(\n (props: MediaProps) => {\n const { children, ...mediaProps } = props\n\n const breakpointsMatchers = useMediaConnector(useMediaConnector.getConfig(mediaProps))\n\n const matches = useMediaPropsMatches(mediaProps, breakpointsMatchers)\n\n if (typeof children === 'function') {\n return children(matches)\n }\n\n return matches ? children : null\n },\n {\n Matchers: MediaMatchers,\n }\n)\n\nexport { Media }\n"],"names":["Media","Object","assign","props","children","mediaProps","breakpointsMatchers","useMediaConnector","getConfig","matches","useMediaPropsMatches","Matchers","MediaMatchers"],"mappings":"mLASA,MAAMA,MAEFC,OAAOC,OACRC,IACC,MAAMC,SAAEA,KAAaC,GAAeF,EAEpC,MAAMG,EAAsBC,kBAAAA,kBAAkBA,kBAAAA,kBAAkBC,UAAUH,IAE1E,MAAMI,EAAUC,qBAAAA,qBAAqBL,EAAYC,GAEjD,cAAWF,GAAa,WACfA,EAASK,GAGXA,EAAUL,EAAW,MAE9B,CACEO,SAAUC,cAAAA"}
|