dinocollab-shared 1.1.3 → 1.1.5
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/dist/auth/profile.js +1 -1
- package/dist/auth/profile.js.map +1 -1
- package/dist/auth/widget.js +1 -1
- package/dist/auth/widget.js.map +1 -1
- package/dist/cart/cart-store.js +1 -1
- package/dist/cart/cart-store.js.map +1 -1
- package/dist/cart/styled.js +1 -1
- package/dist/cart/styled.js.map +1 -1
- package/dist/cart/widget.js +1 -1
- package/dist/cart/widget.js.map +1 -1
- package/dist/layout-global/animated-tabs.units.js +1 -1
- package/dist/layout-global/animated-tabs.units.js.map +1 -1
- package/dist/layout-global/app-footer.js +1 -1
- package/dist/layout-global/app-footer.js.map +1 -1
- package/dist/layout-global/app-footer.styled.js +1 -1
- package/dist/layout-global/app-footer.styled.js.map +1 -1
- package/dist/layout-global/app-header.js +1 -1
- package/dist/layout-global/app-header.js.map +1 -1
- package/dist/layout-global/app-header.nav.js +1 -1
- package/dist/layout-global/app-header.nav.js.map +1 -1
- package/dist/layout-global/app-header.styled.js +1 -1
- package/dist/layout-global/app-header.styled.js.map +1 -1
- package/dist/layout-global/app-theme-provider.js +1 -1
- package/dist/layout-global/app-theme-provider.js.map +1 -1
- package/dist/layout-global/configs.js +1 -1
- package/dist/layout-global/configs.js.map +1 -1
- package/dist/layout-global/index.js +1 -1
- package/dist/layout-global/mobile-menu.styled.js +1 -1
- package/dist/layout-global/mobile-menu.styled.js.map +1 -1
- package/dist/layout-global/sub-menu.js +1 -1
- package/dist/layout-global/sub-menu.js.map +1 -1
- package/dist/layout-global/sub-menu.styled.js +1 -1
- package/dist/layout-global/sub-menu.styled.js.map +1 -1
- package/dist/layout-global/types.js.map +1 -1
- package/dist/layout-global/ui.units.js.map +1 -1
- package/dist/types/auth/profile.d.ts.map +1 -1
- package/dist/types/auth/types.d.ts +4 -0
- package/dist/types/auth/types.d.ts.map +1 -1
- package/dist/types/auth/widget.d.ts +6 -5
- package/dist/types/auth/widget.d.ts.map +1 -1
- package/dist/types/cart/cart-store.d.ts.map +1 -1
- package/dist/types/cart/styled.d.ts.map +1 -1
- package/dist/types/cart/widget.d.ts +4 -0
- package/dist/types/cart/widget.d.ts.map +1 -1
- package/dist/types/layout-global/app-footer.d.ts +5 -0
- package/dist/types/layout-global/app-footer.d.ts.map +1 -1
- package/dist/types/layout-global/app-footer.styled.d.ts +4 -0
- package/dist/types/layout-global/app-footer.styled.d.ts.map +1 -1
- package/dist/types/layout-global/app-header.d.ts +8 -1
- package/dist/types/layout-global/app-header.d.ts.map +1 -1
- package/dist/types/layout-global/app-header.nav.d.ts +8 -1
- package/dist/types/layout-global/app-header.nav.d.ts.map +1 -1
- package/dist/types/layout-global/app-header.styled.d.ts +4 -0
- package/dist/types/layout-global/app-header.styled.d.ts.map +1 -1
- package/dist/types/layout-global/app-theme-provider.d.ts +7 -5
- package/dist/types/layout-global/app-theme-provider.d.ts.map +1 -1
- package/dist/types/layout-global/configs.d.ts.map +1 -1
- package/dist/types/layout-global/index.d.ts +6 -0
- package/dist/types/layout-global/index.d.ts.map +1 -1
- package/dist/types/layout-global/mobile-menu.styled.d.ts.map +1 -1
- package/dist/types/layout-global/sub-menu.styled.d.ts +1 -0
- package/dist/types/layout-global/sub-menu.styled.d.ts.map +1 -1
- package/dist/types/layout-global/types.d.ts +6 -0
- package/dist/types/layout-global/types.d.ts.map +1 -1
- package/dist/types/layout-global/ui.units.d.ts +9 -3
- package/dist/types/layout-global/ui.units.d.ts.map +1 -1
- package/package.json +1 -1
package/dist/auth/profile.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{inherits as t,createClass as o,objectSpread2 as r,defineProperty as e,classCallCheck as l,callSuper as i}from"../_virtual/_rollupPluginBabelHelpers.js";import{jsxs as n,jsx as a}from"react/jsx-runtime";import{Fragment as c,Component as s}from"react";import{Fade as d,Tooltip as p,IconButton as u,Avatar as h,Menu as m,Typography as v,Divider as f,MenuItem as g,Box as x,ListItemIcon as b,colors as C}from"@mui/material";import{getAvatarProps as k}from"../layout-global/helpers.js";var y={root:"Profile-root",title:"Profile-title",item:"Profile-item"},
|
|
1
|
+
import{inherits as t,createClass as o,objectSpread2 as r,defineProperty as e,classCallCheck as l,callSuper as i}from"../_virtual/_rollupPluginBabelHelpers.js";import{jsxs as n,jsx as a}from"react/jsx-runtime";import{Fragment as c,Component as s}from"react";import{Fade as d,Tooltip as p,IconButton as u,Avatar as h,Menu as m,Typography as v,Divider as f,MenuItem as g,Box as x,ListItemIcon as b,colors as C}from"@mui/material";import{getAvatarProps as k}from"../layout-global/helpers.js";var y={root:"Profile-root",title:"Profile-title",item:"Profile-item"},P=function(t,o){return"".concat("",".").concat(y[t]).concat("")},M=function(){function C(t){var o;return l(this,C),o=i(this,C,[t]),e(o,"toggle",function(){return o.setState({isOpen:!o.state.isOpen})}),e(o,"handleClick",function(t){o.setState({element:t.currentTarget})}),e(o,"handleClose",function(){o.setState({element:null})}),o.state={isOpen:!1,element:null},o}return t(C,s),o(C,[{key:"render",value:function(){var t,o=this.props.profile,e=(null==o?void 0:o.UserName)||"Guest";return n(c,{children:[a(d,{in:!0,children:a(p,{title:"Account settings",children:a(u,{onClick:this.handleClick,size:"small","aria-controls":this.state.element?"account-menu":void 0,"aria-haspopup":"true","aria-expanded":this.state.element?"true":void 0,sx:{flex:0},children:a(h,r({src:null!==(t=null==o?void 0:o.AvatarUrl)&&void 0!==t?t:""},k(e)))})})}),n(m,{anchorEl:this.state.element,id:"account-menu",disableScrollLock:!0,open:!!this.state.element,onClose:this.handleClose,onClick:this.handleClose,MenuListProps:{component:"div"},slotProps:{paper:S(this.props.theme)},transformOrigin:{horizontal:"right",vertical:"top"},anchorOrigin:{horizontal:"right",vertical:"bottom"},children:[n(v,{variant:"subtitle1",noWrap:!0,className:y.title,onClick:function(t){return t.stopPropagation()},children:["Hello, ",e]}),a(f,{variant:"middle",sx:{mb:1}}),this.props.menuConfigs.map(function(t,o){return a(g,{children:n(x,r(r(r({className:y.item,onClick:t.onClick},t.href?{component:"a",href:t.href}:{}),t.buttonProps),{},{children:[a(b,{children:t.icon}),t.title]}))},o)})]})]})}}])}(),S=function(){var t="light"===(arguments.length>0&&void 0!==arguments[0]?arguments[0]:"dark"),o=t?"#fff":"#323234",r=t?"#000":"#fff",l=t?C.blue[600]:"#e78a3f",i=t?C.grey[200]:C.grey[700];return{elevation:0,sx:e(e(e(e(e(e(e({"--color-background":o,"--color-text":r,"--color-text-secondary":l,"--color-divider":i,minWidth:"200px",overflow:"visible",filter:"drop-shadow(0px 2px 8px rgba(0,0,0,0.32))",mt:1.5,bgcolor:"var(--color-background)",color:"var(--color-text)"},P("title"),{marginTop:"-8px",padding:"10px 16px",fontWeight:"600",color:"var(--color-text)"}),P("item"),{padding:"6px 16px",textDecoration:"none",color:"currentColor",display:"flex",alignItems:"center",gap:"8px"}),"& .MuiAvatar-root",{width:32,height:32,ml:-.5,mr:1,bgcolor:"var(--color-avatar-bg)",color:"var(--color-avatar-text)"}),"& .MuiMenuItem-root",{padding:0,transition:"all 0.3s",color:"var(--color-text)",".MuiSvgIcon-root":{transition:"all 0.2s",transform:"translateX(0px) scale(1)"},"&:hover":{color:"var(--color-text-secondary)",backgroundColor:"var(--color-divider)",".MuiSvgIcon-root":{color:"var(--color-text-secondary)",transform:"translateX(4px) scale(1.2)"}}}),"& .MuiListItemIcon-root",{color:"var(--color-text)"}),"& .MuiDivider-root",{borderColor:"var(--color-divider)"}),"&:before",{content:'""',display:"block",position:"absolute",top:0,right:20,width:10,height:10,bgcolor:"var(--color-background)",transform:"translateY(-50%) rotate(45deg)",zIndex:0})}};export{M as Profile,M as default,y as profileClasses};
|
|
2
2
|
//# sourceMappingURL=profile.js.map
|
package/dist/auth/profile.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"profile.js","sources":["../../src/auth/profile.tsx"],"sourcesContent":["import { Component, Fragment } from 'react'\r\nimport type { PropsWithChildren } from 'react'\r\nimport { Box, MenuItem, Divider, IconButton, Tooltip, colors } from '@mui/material'\r\nimport { Avatar, Fade, ListItemIcon, Menu, PaperProps, Typography } from '@mui/material'\r\nimport { getAvatarProps } from '../layout-global/helpers'\r\nimport type { IIMenuConfigs, IProfile } from './types'\r\n\r\nexport const profileClasses = {\r\n root: 'Profile-root',\r\n title: 'Profile-title',\r\n item: 'Profile-item'\r\n}\r\n\r\nconst getClasses = (key: keyof typeof profileClasses, options?: { prefix?: string; suffix?: string }) => {\r\n return `${options?.prefix || ''}.${profileClasses[key]}${options?.suffix || ''}`\r\n}\r\n\r\nexport interface IAvatarButtonProps extends PropsWithChildren {\r\n profile: IProfile | null\r\n menuConfigs: IIMenuConfigs\r\n theme?: 'dark' | 'light'\r\n}\r\n\r\nexport interface IAvatarButtonState {\r\n isOpen: boolean\r\n element: HTMLElement | null\r\n}\r\n\r\nexport class Profile extends Component<IAvatarButtonProps, IAvatarButtonState> {\r\n constructor(props: IAvatarButtonProps) {\r\n super(props)\r\n this.state = {\r\n isOpen: false,\r\n element: null\r\n }\r\n }\r\n\r\n toggle = () => this.setState({ isOpen: !this.state.isOpen })\r\n\r\n handleClick = (event: React.MouseEvent<HTMLElement>) => {\r\n this.setState({ element: event.currentTarget })\r\n }\r\n\r\n handleClose = () => {\r\n this.setState({ element: null })\r\n }\r\n\r\n render() {\r\n const { profile } = this.props\r\n const userName = profile?.UserName || 'Guest'\r\n return (\r\n <Fragment>\r\n <Fade in>\r\n <Tooltip title='Account settings'>\r\n <IconButton\r\n onClick={this.handleClick}\r\n size='small'\r\n aria-controls={this.state.element ? 'account-menu' : undefined}\r\n aria-haspopup='true'\r\n aria-expanded={this.state.element ? 'true' : undefined}\r\n >\r\n <Avatar src={profile?.AvatarUrl ?? ''} {...getAvatarProps(userName)} />\r\n </IconButton>\r\n </Tooltip>\r\n </Fade>\r\n <Menu\r\n anchorEl={this.state.element}\r\n id='account-menu'\r\n disableScrollLock\r\n open={!!this.state.element}\r\n onClose={this.handleClose}\r\n onClick={this.handleClose}\r\n MenuListProps={{ component: 'div' }}\r\n slotProps={{ paper: getStylePaper(this.props.theme) }}\r\n transformOrigin={{ horizontal: 'right', vertical: 'top' }}\r\n anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}\r\n >\r\n <Typography\r\n variant='subtitle1'\r\n noWrap\r\n className={profileClasses.title}\r\n onClick={(e: React.MouseEvent<HTMLDivElement, MouseEvent>) => e.stopPropagation()}\r\n >\r\n Hello, {userName}\r\n </Typography>\r\n <Divider variant='middle' sx={{ mb: 1 }} />\r\n {this.props.menuConfigs.map((menuConfig, index) => (\r\n <MenuItem key={index}>\r\n <Box\r\n className={profileClasses.item}\r\n {...(menuConfig.href ? { component: 'a', href: menuConfig.href } : {})}\r\n onClick={menuConfig.onClick}\r\n >\r\n <ListItemIcon>{menuConfig.icon}</ListItemIcon>\r\n {menuConfig.title}\r\n </Box>\r\n </MenuItem>\r\n ))}\r\n </Menu>\r\n </Fragment>\r\n )\r\n }\r\n}\r\nexport default Profile\r\n\r\nconst getStylePaper = (theme: 'dark' | 'light' = 'dark'): Partial<PaperProps<'div', {}>> => {\r\n const isLightTheme = theme === 'light'\r\n const backgroundColor = isLightTheme ? '#fff' : '#323234'\r\n const textColor = isLightTheme ? '#000' : '#fff'\r\n const textSecondaryColor = isLightTheme ? colors.blue[600] : '#e78a3f'\r\n const dividerColor = isLightTheme ? colors.grey[200] : colors.grey[700]\r\n return {\r\n elevation: 0,\r\n sx: {\r\n '--color-background': backgroundColor,\r\n '--color-text': textColor,\r\n '--color-text-secondary': textSecondaryColor,\r\n '--color-divider': dividerColor,\r\n\r\n minWidth: '200px',\r\n overflow: 'visible',\r\n filter: 'drop-shadow(0px 2px 8px rgba(0,0,0,0.32))',\r\n mt: 1.5,\r\n bgcolor: 'var(--color-background)', // dark background\r\n color: 'var(--color-text)', // white text,\r\n\r\n [getClasses('title')]: {\r\n marginTop: '-8px',\r\n padding: '10px 16px',\r\n fontWeight: '600',\r\n color: 'var(--color-text)'\r\n },\r\n [getClasses('item')]: {\r\n padding: '6px 16px',\r\n textDecoration: 'none',\r\n color: 'currentColor',\r\n display: 'flex',\r\n alignItems: 'center',\r\n gap: '8px'\r\n },\r\n '& .MuiAvatar-root': {\r\n width: 32,\r\n height: 32,\r\n ml: -0.5,\r\n mr: 1,\r\n bgcolor: 'var(--color-avatar-bg)',\r\n color: 'var(--color-avatar-text)'\r\n },\r\n '& .MuiMenuItem-root': {\r\n padding: 0,\r\n transition: 'all 0.3s',\r\n color: 'var(--color-text)',\r\n '.MuiSvgIcon-root': {\r\n transition: 'all 0.2s',\r\n transform: 'translateX(0px) scale(1)'\r\n },\r\n '&:hover': {\r\n color: 'var(--color-text-secondary)',\r\n backgroundColor: 'var(--color-divider)',\r\n '.MuiSvgIcon-root': {\r\n color: 'var(--color-text-secondary)',\r\n transform: 'translateX(4px) scale(1.2)'\r\n }\r\n }\r\n },\r\n '& .MuiListItemIcon-root': {\r\n color: 'var(--color-text)'\r\n },\r\n '& .MuiDivider-root': {\r\n borderColor: 'var(--color-divider)'\r\n },\r\n '&:before': {\r\n content: '\"\"',\r\n display: 'block',\r\n position: 'absolute',\r\n top: 0,\r\n right: 20,\r\n width: 10,\r\n height: 10,\r\n bgcolor: 'var(--color-background)',\r\n transform: 'translateY(-50%) rotate(45deg)',\r\n zIndex: 0\r\n }\r\n }\r\n }\r\n}\r\n"],"names":["profileClasses","root","title","item","getClasses","key","options","concat","Profile","props","_this","_classCallCheck","_callSuper","_defineProperty","setState","isOpen","state","event","element","currentTarget","_inherits","Component","_createClass","value","_profile$AvatarUrl","profile","this","userName","UserName","_jsxs","Fragment","children","_jsx","Fade","in","Tooltip","IconButton","onClick","handleClick","size","undefined","Avatar","_objectSpread","src","AvatarUrl","getAvatarProps","Menu","anchorEl","id","disableScrollLock","open","onClose","handleClose","MenuListProps","component","slotProps","paper","getStylePaper","theme","transformOrigin","horizontal","vertical","anchorOrigin","Typography","variant","noWrap","className","e","stopPropagation","Divider","sx","mb","menuConfigs","map","menuConfig","index","MenuItem","Box","href","ListItemIcon","icon","isLightTheme","arguments","length","backgroundColor","textColor","textSecondaryColor","colors","blue","dividerColor","grey","elevation","minWidth","overflow","filter","mt","bgcolor","color","marginTop","padding","fontWeight","textDecoration","display","alignItems","gap","width","height","ml","mr","transition","transform","borderColor","content","position","top","right","zIndex"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"profile.js","sources":["../../src/auth/profile.tsx"],"sourcesContent":["import { Component, Fragment } from 'react'\r\nimport type { PropsWithChildren } from 'react'\r\nimport { Box, MenuItem, Divider, IconButton, Tooltip, colors } from '@mui/material'\r\nimport { Avatar, Fade, ListItemIcon, Menu, PaperProps, Typography } from '@mui/material'\r\nimport { getAvatarProps } from '../layout-global/helpers'\r\nimport type { IIMenuConfigs, IProfile } from './types'\r\n\r\nexport const profileClasses = {\r\n root: 'Profile-root',\r\n title: 'Profile-title',\r\n item: 'Profile-item'\r\n}\r\n\r\nconst getClasses = (key: keyof typeof profileClasses, options?: { prefix?: string; suffix?: string }) => {\r\n return `${options?.prefix || ''}.${profileClasses[key]}${options?.suffix || ''}`\r\n}\r\n\r\nexport interface IAvatarButtonProps extends PropsWithChildren {\r\n profile: IProfile | null\r\n menuConfigs: IIMenuConfigs\r\n theme?: 'dark' | 'light'\r\n}\r\n\r\nexport interface IAvatarButtonState {\r\n isOpen: boolean\r\n element: HTMLElement | null\r\n}\r\n\r\nexport class Profile extends Component<IAvatarButtonProps, IAvatarButtonState> {\r\n constructor(props: IAvatarButtonProps) {\r\n super(props)\r\n this.state = {\r\n isOpen: false,\r\n element: null\r\n }\r\n }\r\n\r\n toggle = () => this.setState({ isOpen: !this.state.isOpen })\r\n\r\n handleClick = (event: React.MouseEvent<HTMLElement>) => {\r\n this.setState({ element: event.currentTarget })\r\n }\r\n\r\n handleClose = () => {\r\n this.setState({ element: null })\r\n }\r\n\r\n render() {\r\n const { profile } = this.props\r\n const userName = profile?.UserName || 'Guest'\r\n return (\r\n <Fragment>\r\n <Fade in>\r\n <Tooltip title='Account settings'>\r\n <IconButton\r\n onClick={this.handleClick}\r\n size='small'\r\n aria-controls={this.state.element ? 'account-menu' : undefined}\r\n aria-haspopup='true'\r\n aria-expanded={this.state.element ? 'true' : undefined}\r\n sx={{ flex: 0 }}\r\n >\r\n <Avatar src={profile?.AvatarUrl ?? ''} {...getAvatarProps(userName)} />\r\n </IconButton>\r\n </Tooltip>\r\n </Fade>\r\n <Menu\r\n anchorEl={this.state.element}\r\n id='account-menu'\r\n disableScrollLock\r\n open={!!this.state.element}\r\n onClose={this.handleClose}\r\n onClick={this.handleClose}\r\n MenuListProps={{ component: 'div' }}\r\n slotProps={{ paper: getStylePaper(this.props.theme) }}\r\n transformOrigin={{ horizontal: 'right', vertical: 'top' }}\r\n anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}\r\n >\r\n <Typography\r\n variant='subtitle1'\r\n noWrap\r\n className={profileClasses.title}\r\n onClick={(e: React.MouseEvent<HTMLDivElement, MouseEvent>) => e.stopPropagation()}\r\n >\r\n Hello, {userName}\r\n </Typography>\r\n <Divider variant='middle' sx={{ mb: 1 }} />\r\n {this.props.menuConfigs.map((menuConfig, index) => (\r\n <MenuItem key={index}>\r\n <Box\r\n className={profileClasses.item}\r\n onClick={menuConfig.onClick}\r\n {...(menuConfig.href ? { component: 'a', href: menuConfig.href } : {})}\r\n {...menuConfig.buttonProps}\r\n >\r\n <ListItemIcon>{menuConfig.icon}</ListItemIcon>\r\n {menuConfig.title}\r\n </Box>\r\n </MenuItem>\r\n ))}\r\n </Menu>\r\n </Fragment>\r\n )\r\n }\r\n}\r\nexport default Profile\r\n\r\nconst getStylePaper = (theme: 'dark' | 'light' = 'dark'): Partial<PaperProps<'div', {}>> => {\r\n const isLightTheme = theme === 'light'\r\n const backgroundColor = isLightTheme ? '#fff' : '#323234'\r\n const textColor = isLightTheme ? '#000' : '#fff'\r\n const textSecondaryColor = isLightTheme ? colors.blue[600] : '#e78a3f'\r\n const dividerColor = isLightTheme ? colors.grey[200] : colors.grey[700]\r\n return {\r\n elevation: 0,\r\n sx: {\r\n '--color-background': backgroundColor,\r\n '--color-text': textColor,\r\n '--color-text-secondary': textSecondaryColor,\r\n '--color-divider': dividerColor,\r\n\r\n minWidth: '200px',\r\n overflow: 'visible',\r\n filter: 'drop-shadow(0px 2px 8px rgba(0,0,0,0.32))',\r\n mt: 1.5,\r\n bgcolor: 'var(--color-background)', // dark background\r\n color: 'var(--color-text)', // white text,\r\n\r\n [getClasses('title')]: {\r\n marginTop: '-8px',\r\n padding: '10px 16px',\r\n fontWeight: '600',\r\n color: 'var(--color-text)'\r\n },\r\n [getClasses('item')]: {\r\n padding: '6px 16px',\r\n textDecoration: 'none',\r\n color: 'currentColor',\r\n display: 'flex',\r\n alignItems: 'center',\r\n gap: '8px'\r\n },\r\n '& .MuiAvatar-root': {\r\n width: 32,\r\n height: 32,\r\n ml: -0.5,\r\n mr: 1,\r\n bgcolor: 'var(--color-avatar-bg)',\r\n color: 'var(--color-avatar-text)'\r\n },\r\n '& .MuiMenuItem-root': {\r\n padding: 0,\r\n transition: 'all 0.3s',\r\n color: 'var(--color-text)',\r\n '.MuiSvgIcon-root': {\r\n transition: 'all 0.2s',\r\n transform: 'translateX(0px) scale(1)'\r\n },\r\n '&:hover': {\r\n color: 'var(--color-text-secondary)',\r\n backgroundColor: 'var(--color-divider)',\r\n '.MuiSvgIcon-root': {\r\n color: 'var(--color-text-secondary)',\r\n transform: 'translateX(4px) scale(1.2)'\r\n }\r\n }\r\n },\r\n '& .MuiListItemIcon-root': {\r\n color: 'var(--color-text)'\r\n },\r\n '& .MuiDivider-root': {\r\n borderColor: 'var(--color-divider)'\r\n },\r\n '&:before': {\r\n content: '\"\"',\r\n display: 'block',\r\n position: 'absolute',\r\n top: 0,\r\n right: 20,\r\n width: 10,\r\n height: 10,\r\n bgcolor: 'var(--color-background)',\r\n transform: 'translateY(-50%) rotate(45deg)',\r\n zIndex: 0\r\n }\r\n }\r\n }\r\n}\r\n"],"names":["profileClasses","root","title","item","getClasses","key","options","concat","Profile","props","_this","_classCallCheck","_callSuper","_defineProperty","setState","isOpen","state","event","element","currentTarget","_inherits","Component","_createClass","value","_profile$AvatarUrl","profile","this","userName","UserName","_jsxs","Fragment","children","_jsx","Fade","in","Tooltip","IconButton","onClick","handleClick","size","undefined","sx","flex","Avatar","_objectSpread","src","AvatarUrl","getAvatarProps","Menu","anchorEl","id","disableScrollLock","open","onClose","handleClose","MenuListProps","component","slotProps","paper","getStylePaper","theme","transformOrigin","horizontal","vertical","anchorOrigin","Typography","variant","noWrap","className","e","stopPropagation","Divider","mb","menuConfigs","map","menuConfig","index","MenuItem","Box","href","buttonProps","ListItemIcon","icon","isLightTheme","arguments","length","backgroundColor","textColor","textSecondaryColor","colors","blue","dividerColor","grey","elevation","minWidth","overflow","filter","mt","bgcolor","color","marginTop","padding","fontWeight","textDecoration","display","alignItems","gap","width","height","ml","mr","transition","transform","borderColor","content","position","top","right","zIndex"],"mappings":"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"}
|
package/dist/auth/widget.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{objectSpread2 as o}from"../_virtual/_rollupPluginBabelHelpers.js";import{jsx as i}from"react/jsx-runtime";import{
|
|
1
|
+
import{objectSpread2 as o}from"../_virtual/_rollupPluginBabelHelpers.js";import{jsx as i}from"react/jsx-runtime";import{useMemo as n}from"react";import{Typography as r}from"@mui/material";import t from"@mui/icons-material/Logout";import e from"@mui/icons-material/Login";import l from"@mui/icons-material/ManageAccounts";import{AppButtonOrange as a,AppIconButtonOrange as m}from"../layout-global/ui.units.js";import{Profile as u}from"./profile.js";import f from"../components/responsive-display.js";var s=function(s){var c,p,g=s.isAuthenticated,d=s.profile;if(s.isLoading)return null;if(!g)return i(f,{xs:i(m,o(o(o({onClick:s.onLoginClick},s.hrefLogin?{component:"a",href:null!==(c=s.hrefLogin)&&void 0!==c?c:"/"}:{}),s.buttonLoginProps),{},{children:i(e,{fontSize:"small"})})),md:i(a,o(o(o({className:"animate-bounce",startIcon:i(e,{fontSize:"small"}),onClick:s.onLoginClick},s.hrefLogin?{component:"a",href:null!==(p=s.hrefLogin)&&void 0!==p?p:"/"}:{}),s.buttonLoginProps),{},{children:i(r,{variant:"h6",children:"Login"})}))});var h=n(function(){var o;return s.menu&&0!==s.menu.length?null!==(o=s.menu)&&void 0!==o?o:[]:[{title:"Manage Profile",icon:i(l,{fontSize:"small"})},{title:"Logout",icon:i(t,{fontSize:"small"})}]},[s.menu]);return i(u,{profile:d,menuConfigs:h})},c=function(n){var r=function(r){return i(s,o(o({},n),r))};return r.displayName="AuthWidget",r};export{s as AuthWidget,c as createAuthWidget,s as default};
|
|
2
2
|
//# sourceMappingURL=widget.js.map
|
package/dist/auth/widget.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"widget.js","sources":["../../src/auth/widget.tsx"],"sourcesContent":["import { FC } from 'react'\r\nimport { Typography } from '@mui/material'\r\nimport Logout from '@mui/icons-material/Logout'\r\nimport LoginIcon from '@mui/icons-material/Login'\r\nimport ManageAccountsIcon from '@mui/icons-material/ManageAccounts'\r\nimport { AppButtonOrange, AppIconButtonOrange } from '../layout-global/ui.units'\r\nimport type {
|
|
1
|
+
{"version":3,"file":"widget.js","sources":["../../src/auth/widget.tsx"],"sourcesContent":["import { FC, useMemo } from 'react'\r\nimport { ButtonProps, Typography } from '@mui/material'\r\nimport Logout from '@mui/icons-material/Logout'\r\nimport LoginIcon from '@mui/icons-material/Login'\r\nimport ManageAccountsIcon from '@mui/icons-material/ManageAccounts'\r\nimport { AppButtonOrange, AppIconButtonOrange } from '../layout-global/ui.units'\r\nimport type { IAppSiteBaseUrl } from '../types'\r\nimport type { IAuthState, IIMenuConfigs } from './types'\r\nimport Profile from './profile'\r\nimport ResponsiveDisplay from '../components/responsive-display'\r\n\r\nexport interface ICreateAuthBase {\r\n baseUrl: IAppSiteBaseUrl\r\n // login\r\n hrefLogin?: string\r\n onLoginClick?: (e: React.MouseEvent<HTMLAnchorElement | HTMLDivElement, MouseEvent>) => void\r\n buttonLoginProps?: ButtonProps & { [key: string]: any }\r\n // menu\r\n menu?: IIMenuConfigs\r\n}\r\n\r\nexport interface IAuthWidgetProps extends IAuthState, ICreateAuthBase {}\r\n\r\nexport const AuthWidget: FC<IAuthWidgetProps> = (props) => {\r\n const { isAuthenticated, profile, isLoading } = props\r\n if (isLoading) return null\r\n\r\n if (!isAuthenticated) {\r\n return (\r\n <ResponsiveDisplay\r\n xs={\r\n <AppIconButtonOrange\r\n onClick={props.onLoginClick as any}\r\n {...(props.hrefLogin ? { component: 'a', href: props.hrefLogin ?? '/' } : {})}\r\n {...props.buttonLoginProps}\r\n >\r\n <LoginIcon fontSize='small' />\r\n </AppIconButtonOrange>\r\n }\r\n md={\r\n <AppButtonOrange\r\n className='animate-bounce'\r\n startIcon={<LoginIcon fontSize='small' />}\r\n onClick={props.onLoginClick as any}\r\n {...(props.hrefLogin ? { component: 'a', href: props.hrefLogin ?? '/' } : {})}\r\n {...props.buttonLoginProps}\r\n >\r\n <Typography variant='h6'>Login</Typography>\r\n </AppButtonOrange>\r\n }\r\n />\r\n )\r\n }\r\n\r\n const menuConfigs = useMemo(() => {\r\n if (!props.menu || props.menu.length === 0) {\r\n return [\r\n { title: 'Manage Profile', icon: <ManageAccountsIcon fontSize='small' /> },\r\n { title: 'Logout', icon: <Logout fontSize='small' /> }\r\n ]\r\n }\r\n return props.menu ?? []\r\n }, [props.menu])\r\n\r\n // If the user is authenticated, display the AuthWidget with user details\r\n return <Profile profile={profile} menuConfigs={menuConfigs} />\r\n}\r\nexport default AuthWidget\r\n\r\nexport const createAuthWidget = (params: ICreateAuthBase) => {\r\n const _AuthWidget: FC<Omit<IAuthWidgetProps, 'baseUrl'>> = (props) => <AuthWidget {...params} {...props} />\r\n _AuthWidget.displayName = 'AuthWidget'\r\n return _AuthWidget\r\n}\r\n"],"names":["AuthWidget","props","_props$hrefLogin","_props$hrefLogin2","isAuthenticated","profile","isLoading","_jsx","ResponsiveDisplay","xs","AppIconButtonOrange","_objectSpread","onClick","onLoginClick","hrefLogin","component","href","buttonLoginProps","children","LoginIcon","fontSize","md","AppButtonOrange","className","startIcon","Typography","variant","menuConfigs","useMemo","_props$menu","menu","length","title","icon","ManageAccountsIcon","Logout","Profile","createAuthWidget","params","_AuthWidget","displayName"],"mappings":"ufAuBaA,EAAmC,SAACC,GAC/C,IAGsBC,EAAAC,EAHdC,EAAwCH,EAAxCG,gBAAiBC,EAAuBJ,EAAvBI,QACzB,GADgDJ,EAAdK,UACnB,OAAO,KAEtB,IAAKF,EACH,OACEG,EAACC,EACC,CAAAC,GACEF,EAACG,EAAmBC,EAAAA,EAAAA,EAAA,CAClBC,QAASX,EAAMY,cACVZ,EAAMa,UAAY,CAAEC,UAAW,IAAKC,KAAqBd,QAAjBA,EAAED,EAAMa,iBAASZ,IAAAA,EAAAA,EAAI,KAAQ,CAAE,GACxED,EAAMgB,kBAAgB,CAAA,EAAA,CAAAC,SAE1BX,EAACY,EAAU,CAAAC,SAAS,aAGxBC,GACEd,EAACe,EAAeX,EAAAA,EAAAA,EAAA,CACdY,UAAU,iBACVC,UAAWjB,EAACY,EAAS,CAACC,SAAS,UAC/BR,QAASX,EAAMY,cACVZ,EAAMa,UAAY,CAAEC,UAAW,IAAKC,KAAqBb,QAAjBA,EAAEF,EAAMa,iBAASX,IAAAA,EAAAA,EAAI,KAAQ,CAAE,GACxEF,EAAMgB,kBAAgB,CAAA,EAAA,CAAAC,SAE1BX,EAACkB,EAAW,CAAAC,QAAQ,KAAuBR,SAAA,eAOrD,IAAMS,EAAcC,EAAQ,WAAK,IAAAC,EAC/B,OAAK5B,EAAM6B,MAA8B,IAAtB7B,EAAM6B,KAAKC,eAM9BF,EAAO5B,EAAM6B,YAAI,IAAAD,EAAAA,EAAI,GALZ,CACL,CAAEG,MAAO,iBAAkBC,KAAM1B,EAAC2B,EAAmB,CAAAd,SAAS,WAC9D,CAAEY,MAAO,SAAUC,KAAM1B,EAAC4B,EAAO,CAAAf,SAAS,WAIhD,EAAG,CAACnB,EAAM6B,OAGV,OAAOvB,EAAC6B,EAAO,CAAC/B,QAASA,EAASsB,YAAaA,GACjD,EAGaU,EAAmB,SAACC,GAC/B,IAAMC,EAAqD,SAACtC,GAAK,OAAKM,EAACP,EAAUW,EAAAA,EAAA,CAAA,EAAK2B,GAAYrC,GAAS,EAE3G,OADAsC,EAAYC,YAAc,aACnBD,CACT"}
|
package/dist/cart/cart-store.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{createClass as e,objectSpread2 as t,typeof as i,classCallCheck as a,defineProperty as r,inherits as n,superPropGet as o,callSuper as s}from"../_virtual/_rollupPluginBabelHelpers.js";import l from"events";var u=function(){function t(){var e;return a(this,t),e=s(this,t),r(e,"_createWrapListener",function(e){return function(){try{e.apply(void 0,arguments)}catch(e){console.error("Error in MfeBridge listener:",e)}}}),e}return n(t,l),e(t,[{key:"subscribe",value:function(e,i){var a=this,r=!(arguments.length>2&&void 0!==arguments[2])||arguments[2]?this._createWrapListener(i):i;return o(t,"addListener",this)([e,r]),function(){o(t,"removeListener",a)([e,r])}}}])}();function c(){
|
|
1
|
+
import{createClass as e,objectSpread2 as t,typeof as i,classCallCheck as a,defineProperty as r,inherits as n,superPropGet as o,callSuper as s}from"../_virtual/_rollupPluginBabelHelpers.js";import l from"events";var u=function(){function t(){var e;return a(this,t),e=s(this,t),r(e,"_createWrapListener",function(e){return function(){try{e.apply(void 0,arguments)}catch(e){console.error("Error in MfeBridge listener:",e)}}}),e}return n(t,l),e(t,[{key:"subscribe",value:function(e,i){var a=this,r=!(arguments.length>2&&void 0!==arguments[2])||arguments[2]?this._createWrapListener(i):i;return o(t,"addListener",this)([e,r]),function(){o(t,"removeListener",a)([e,r])}}}])}();function c(){if(void 0===("undefined"==typeof globalThis?"undefined":i(globalThis)))return null;void 0===globalThis.CartEventStore&&(globalThis.CartEventStore=new u);var e=globalThis.CartEventStore;return e.setMaxListeners(50),e}var h=function(){return e(function e(t){var i=this;a(this,e),r(this,"initialize",function(){var e=c();null==e||e.subscribe("requestState",function(){null==e||e.emit("stateChange",{items:i.getState()})})}),r(this,"destroy",function(){var e=c();null==e||e.removeAllListeners("requestState")}),this.configs=t,this.configs.localStorageKey||(this.configs.localStorageKey="cartItems"),this.initialize()},[{key:"emitStateChange",value:function(e){var t=c();this.saveToLocalStorage(e),null==t||t.emit("stateChange",{items:e,options:{message:"Cart items updated"}})}},{key:"add",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],i=this.getState();return!t&&this.configs.idGetter(e)in i||(i[this.configs.idGetter(e)]=e),this.emitStateChange(i),this}},{key:"addMany",value:function(e){var t=this,i=arguments.length>1&&void 0!==arguments[1]&&arguments[1],a=this.getState();return e.forEach(function(e){!i&&t.configs.idGetter(e)in a||(a[t.configs.idGetter(e)]=e)}),this.emitStateChange(a),this}},{key:"updateOrAdd",value:function(e,i){var a=this.getState(),r=a[e];return a[e]=r?t(t({},r),i):i,this.emitStateChange(a),this}},{key:"remove",value:function(e){var t=this.getState();return e in t&&(delete t[e],this.emitStateChange(t)),this}},{key:"clear",value:function(){return this.emitStateChange({}),this}},{key:"getState",value:function(){return this.loadFromLocalStorage()||{}}},{key:"getItems",value:function(){var e=this.getState();return Array.isArray(e)?e:Object.values(e)}},{key:"loadFromLocalStorage",value:function(){if("undefined"!=typeof globalThis&&globalThis.localStorage){var e=localStorage.getItem(this.configs.localStorageKey||"cartItems");if(e)return JSON.parse(e)}}},{key:"saveToLocalStorage",value:function(e){"undefined"!=typeof globalThis&&globalThis.localStorage&&(this.configs.localStorageKey?localStorage.setItem(this.configs.localStorageKey,JSON.stringify(e)):console.warn("No localStorageKey provided, skipping storage"))}}])}();export{u as CartEventStore,h as MfeCartStore,c as getCartEventStore};
|
|
2
2
|
//# sourceMappingURL=cart-store.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cart-store.js","sources":["../../src/cart/cart-store.ts"],"sourcesContent":["import EventEmitter from 'events'\r\n\r\nexport type IIdGetter<T = any> = (item: T) => string\r\n\r\ntype IItem = Record<string, any>\r\n\r\ninterface IEventOptions {\r\n message?: string\r\n}\r\n\r\nexport interface ICartEventConfigs {\r\n stateChange: [{ items: IItem; options?: IEventOptions }]\r\n requestState: [{ options?: IEventOptions }]\r\n}\r\n\r\nexport class CartEventStore extends EventEmitter<ICartEventConfigs> {\r\n constructor() {\r\n super()\r\n }\r\n /**\r\n * Subscribe to a specific channel\r\n * @param channel The channel to subscribe to\r\n * @param callback Function to call when an event occurs on this channel\r\n * @returns Unsubscribe function to remove the event listener\r\n */\r\n _createWrapListener = (callback: (...payload: any[]) => void) => {\r\n return (...payload: any[]) => {\r\n try {\r\n callback(...payload)\r\n } catch (error) {\r\n console.error('Error in MfeBridge listener:', error)\r\n }\r\n }\r\n }\r\n subscribe<K extends keyof ICartEventConfigs>(\r\n eventName: K,\r\n listener: K extends keyof ICartEventConfigs ? (ICartEventConfigs[K] extends unknown[] ? (...args: ICartEventConfigs[K]) => void : never) : never,\r\n isTry: boolean = true\r\n ) {\r\n const action = isTry ? this._createWrapListener(listener) : listener\r\n super.addListener(eventName, action as any)\r\n return () => {\r\n super.removeListener(eventName, action as any)\r\n }\r\n }\r\n}\r\n\r\nexport function getCartEventStore() {\r\n if (typeof globalThis === undefined) return null\r\n\r\n if (typeof (globalThis as any).CartEventStore === 'undefined') {\r\n // If CartEventStore is not defined globally, define it\r\n // This allows it to be used in other parts of the application\r\n // without needing to import it explicitly\r\n ;(globalThis as any).CartEventStore = new CartEventStore()\r\n }\r\n
|
|
1
|
+
{"version":3,"file":"cart-store.js","sources":["../../src/cart/cart-store.ts"],"sourcesContent":["import EventEmitter from 'events'\r\n\r\nexport type IIdGetter<T = any> = (item: T) => string\r\n\r\ntype IItem = Record<string, any>\r\n\r\ninterface IEventOptions {\r\n message?: string\r\n}\r\n\r\nexport interface ICartEventConfigs {\r\n stateChange: [{ items: IItem; options?: IEventOptions }]\r\n requestState: [{ options?: IEventOptions }]\r\n}\r\n\r\nexport class CartEventStore extends EventEmitter<ICartEventConfigs> {\r\n constructor() {\r\n super()\r\n }\r\n /**\r\n * Subscribe to a specific channel\r\n * @param channel The channel to subscribe to\r\n * @param callback Function to call when an event occurs on this channel\r\n * @returns Unsubscribe function to remove the event listener\r\n */\r\n _createWrapListener = (callback: (...payload: any[]) => void) => {\r\n return (...payload: any[]) => {\r\n try {\r\n callback(...payload)\r\n } catch (error) {\r\n console.error('Error in MfeBridge listener:', error)\r\n }\r\n }\r\n }\r\n subscribe<K extends keyof ICartEventConfigs>(\r\n eventName: K,\r\n listener: K extends keyof ICartEventConfigs ? (ICartEventConfigs[K] extends unknown[] ? (...args: ICartEventConfigs[K]) => void : never) : never,\r\n isTry: boolean = true\r\n ) {\r\n const action = isTry ? this._createWrapListener(listener) : listener\r\n super.addListener(eventName, action as any)\r\n return () => {\r\n super.removeListener(eventName, action as any)\r\n }\r\n }\r\n}\r\n\r\nexport function getCartEventStore() {\r\n if (typeof globalThis === undefined) return null\r\n\r\n if (typeof (globalThis as any).CartEventStore === 'undefined') {\r\n // If CartEventStore is not defined globally, define it\r\n // This allows it to be used in other parts of the application\r\n // without needing to import it explicitly\r\n ;(globalThis as any).CartEventStore = new CartEventStore()\r\n }\r\n const eventEmitter = (globalThis as any).CartEventStore as CartEventStore\r\n eventEmitter.setMaxListeners(50)\r\n return eventEmitter\r\n}\r\n\r\nexport interface ICartStoreConfigs {\r\n idGetter: IIdGetter\r\n localStorageKey?: string\r\n}\r\n\r\nexport class MfeCartStore {\r\n private configs: ICartStoreConfigs\r\n constructor(config: ICartStoreConfigs) {\r\n this.configs = config\r\n if (!this.configs.localStorageKey) {\r\n this.configs.localStorageKey = 'cartItems'\r\n }\r\n this.initialize()\r\n }\r\n\r\n initialize = () => {\r\n const eventStore = getCartEventStore()\r\n eventStore?.subscribe('requestState', () => {\r\n eventStore?.emit('stateChange', { items: this.getState() })\r\n })\r\n }\r\n\r\n destroy = () => {\r\n const eventStore = getCartEventStore()\r\n eventStore?.removeAllListeners('requestState')\r\n }\r\n\r\n emitStateChange(items: IItem) {\r\n const eventStore = getCartEventStore()\r\n this.saveToLocalStorage(items)\r\n eventStore?.emit('stateChange', { items, options: { message: 'Cart items updated' } })\r\n }\r\n\r\n add(item: any, overwrite: boolean = false) {\r\n const items = this.getState()\r\n if (overwrite || !(this.configs.idGetter(item) in items)) {\r\n items[this.configs.idGetter(item)] = item\r\n }\r\n this.emitStateChange(items)\r\n return this\r\n }\r\n\r\n addMany(items: any[], overwrite: boolean = false) {\r\n const currentItems = this.getState()\r\n items.forEach((item) => {\r\n if (overwrite || !(this.configs.idGetter(item) in currentItems)) {\r\n currentItems[this.configs.idGetter(item)] = item\r\n }\r\n })\r\n this.emitStateChange(currentItems)\r\n return this\r\n }\r\n\r\n updateOrAdd(id: string, updates: Partial<any>) {\r\n const items = this.getState()\r\n const item = items[id]\r\n if (item) {\r\n items[id] = { ...item, ...updates }\r\n } else {\r\n items[id] = updates\r\n }\r\n this.emitStateChange(items)\r\n return this\r\n }\r\n\r\n remove(id: string) {\r\n const items = this.getState()\r\n if (id in items) {\r\n delete items[id]\r\n this.emitStateChange(items)\r\n }\r\n return this\r\n }\r\n\r\n clear() {\r\n this.emitStateChange({})\r\n return this\r\n }\r\n\r\n getState(): IItem {\r\n return this.loadFromLocalStorage() || {}\r\n }\r\n\r\n getItems(): any[] {\r\n const items = this.getState()\r\n const item = Array.isArray(items) ? items : Object.values(items)\r\n return item\r\n }\r\n\r\n private loadFromLocalStorage() {\r\n // Check if running in client environment with localStorage available\r\n if (typeof globalThis !== 'undefined' && globalThis.localStorage) {\r\n const storedItems = localStorage.getItem(this.configs.localStorageKey || 'cartItems')\r\n if (storedItems) {\r\n return JSON.parse(storedItems)\r\n }\r\n }\r\n }\r\n\r\n private saveToLocalStorage(items: IItem) {\r\n // Check if running in client environment with localStorage available\r\n if (typeof globalThis !== 'undefined' && globalThis.localStorage) {\r\n if (this.configs.localStorageKey) {\r\n localStorage.setItem(this.configs.localStorageKey, JSON.stringify(items))\r\n } else {\r\n console.warn('No localStorageKey provided, skipping storage')\r\n }\r\n }\r\n }\r\n}\r\n"],"names":["CartEventStore","_this","_classCallCheck","_callSuper","this","_defineProperty","callback","apply","arguments","error","console","_inherits","EventEmitter","_createClass","key","value","eventName","listener","_this2","action","_createWrapListener","_superPropGet","getCartEventStore","undefined","globalThis","_typeof","eventEmitter","setMaxListeners","MfeCartStore","config","_this3","eventStore","subscribe","emit","items","getState","removeAllListeners","configs","localStorageKey","initialize","saveToLocalStorage","options","message","item","overwrite","length","idGetter","emitStateChange","_this4","currentItems","forEach","id","updates","_objectSpread","loadFromLocalStorage","Array","isArray","Object","values","localStorage","storedItems","getItem","JSON","parse","setItem","stringify","warn"],"mappings":"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"}
|
package/dist/cart/styled.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{defineProperty as t}from"../_virtual/_rollupPluginBabelHelpers.js";import{styled as e,Menu as o,Box as i,alpha as r}from"@mui/material";var a=e(o)(function(t){var e=t.theme;return{"--color-bg":"#ffffff","--color-text":e.palette.common.black,marginTop:"45px",".MuiPaper-root":{overflow:"visible",backgroundColor:"var(--color-bg, #000000)",borderRadius:e.shape.borderRadius,minWidth:"280px",maxWidth:"550px",boxShadow:"0 1px 1px rgba(0, 0, 0, 0.05), 0 2px 2px rgba(0, 0, 0, 0.2), 0 4px 4px rgba(0, 0, 0, 0.15), 0 8px 8px rgba(0, 0, 0, 0.05)",animation:"fadeInDown 0.3s ease-out",marginTop:"8px",color:"var(--color-text, #000000)",display:"flex","@keyframes fadeInDown":{"0%":{opacity:0,transform:"translateY(-10px)"},"100%":{opacity:1,transform:"translateY(0)"}},"&::before":{content:'""',position:"absolute",backgroundColor:"var(--color-bg, #ffffff)",width:"10px",height:"10px",top:"-4px",right:e.spacing(1),transform:"translateX(-50%) rotate(45deg)",zIndex:0}},".MuiBackdrop-root":{backgroundColor:"transparent"},".MuiList-root":{padding:0}}}),n={root:"CartContent-root",header:"CartContent-header",footer:"CartContent-footer",items:"CartContent-items",item:"CartContent-item",itemContent:"CartContent-itemContent",itemImg:"CartContent-itemImg",itemTitle:"CartContent-itemTitle",itemPrice:"CartContent-itemPrice",itemTag:"CartContent-itemTag"},p=function(t,e){return"".concat((null==e?void 0:e.prefix)||"",".").concat(n[t]).concat((null==e?void 0:e.suffix)||"")},l=e(i)(function(e){var o=e.theme;return t(t(t(t(t(t(t(t(t({"--height-item":"80px"},p("root",{prefix:"&"}),{height:"100%"}),p("header"),{padding:"12px 16px",display:"flex",justifyContent:"space-between",alignItems:"center"}),p("footer"),{padding:"6px 12px",display:"flex",justifyContent:"flex-end",position:"relative"}),p("items"),{padding:"8px",overflowY:"auto",height:"100%"}),p("item"),{display:"flex",alignItems:"center",padding:"0 9px",transition:"0.3s",height:"var(--height-item)","& a":{textDecoration:"none"},"&:hover":{background:"#fafafa"},"&:hover a":{textDecoration:"underline"}}),p("itemImg"),{width:"60px",height:"60px",borderRadius:"6px",objectFit:"cover",marginRight:"12px",flex:"0 0 auto",backgroundColor:r(o.palette.grey[400],.2)}),p("itemContent"),{flex:1,display:"flex",alignItems:"center",minWidth:0,position:"relative"}),p("itemTitle"),{color:"var(--color-body)",fontWeight:600,flex:1,width:"100%",margin:"0 12px",padding:"15px 0",minWidth:0,maxWidth:"300px"}),p("itemTag"),{position:"absolute",top:0,left:"12px",fontWeight:600})});export{l as CartContentStyled,a as MenuStyled,n as cartContentClasses};
|
|
1
|
+
import{defineProperty as t}from"../_virtual/_rollupPluginBabelHelpers.js";import{styled as e,Menu as o,Box as i,alpha as r}from"@mui/material";var a=e(o)(function(t){var e=t.theme;return{"--color-bg":"#ffffff","--color-text":e.palette.common.black,marginTop:"45px",".MuiPaper-root":{overflow:"visible",backgroundColor:"var(--color-bg, #000000)",borderRadius:e.shape.borderRadius,minWidth:"280px",maxWidth:"550px",boxShadow:"0 1px 1px rgba(0, 0, 0, 0.05), 0 2px 2px rgba(0, 0, 0, 0.2), 0 4px 4px rgba(0, 0, 0, 0.15), 0 8px 8px rgba(0, 0, 0, 0.05)",animation:"fadeInDown 0.3s ease-out",marginTop:"8px",color:"var(--color-text, #000000)",display:"flex","@keyframes fadeInDown":{"0%":{opacity:0,transform:"translateY(-10px)"},"100%":{opacity:1,transform:"translateY(0)"}},"&::before":{content:'""',position:"absolute",backgroundColor:"var(--color-bg, #ffffff)",width:"10px",height:"10px",top:"-4px",right:e.spacing(1),transform:"translateX(-50%) rotate(45deg)",zIndex:0}},".MuiBackdrop-root":{backgroundColor:"transparent"},".MuiList-root":{padding:0}}}),n={root:"CartContent-root",header:"CartContent-header",footer:"CartContent-footer",items:"CartContent-items",item:"CartContent-item",itemContent:"CartContent-itemContent",itemImg:"CartContent-itemImg",itemTitle:"CartContent-itemTitle",itemPrice:"CartContent-itemPrice",itemTag:"CartContent-itemTag"},p=function(t,e){return"".concat((null==e?void 0:e.prefix)||"",".").concat(n[t]).concat((null==e?void 0:e.suffix)||"")},l=e(i)(function(e){var o=e.theme;return t(t(t(t(t(t(t(t(t({"--height-item":"80px"},p("root",{prefix:"&"}),{height:"100%"}),p("header"),{padding:"12px 16px",display:"flex",justifyContent:"space-between",alignItems:"center",gap:o.spacing(5)}),p("footer"),{padding:"6px 12px",display:"flex",justifyContent:"flex-end",position:"relative"}),p("items"),{padding:"8px",overflowY:"auto",height:"100%"}),p("item"),{display:"flex",alignItems:"center",padding:"0 9px",transition:"0.3s",height:"var(--height-item)","& a":{textDecoration:"none"},"&:hover":{background:"#fafafa"},"&:hover a":{textDecoration:"underline"}}),p("itemImg"),{width:"60px",height:"60px",borderRadius:"6px",objectFit:"cover",marginRight:"12px",flex:"0 0 auto",backgroundColor:r(o.palette.grey[400],.2)}),p("itemContent"),{flex:1,display:"flex",alignItems:"center",minWidth:0,position:"relative"}),p("itemTitle"),{color:"var(--color-body)",fontWeight:600,flex:1,width:"100%",margin:"0 12px",padding:"15px 0",minWidth:0,maxWidth:"300px"}),p("itemTag"),{position:"absolute",top:0,left:"12px",fontWeight:600})});export{l as CartContentStyled,a as MenuStyled,n as cartContentClasses};
|
|
2
2
|
//# sourceMappingURL=styled.js.map
|
package/dist/cart/styled.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styled.js","sources":["../../src/cart/styled.tsx"],"sourcesContent":["import { alpha, Box, Menu, styled } from '@mui/material'\r\nimport type { ComponentType } from 'react'\r\nimport type { BoxProps, MenuProps } from '@mui/material'\r\n\r\nexport const MenuStyled: ComponentType<MenuProps> = styled(Menu)(({ theme }) => ({\r\n // dark mode\r\n // '--color-bg': '#323234',\r\n // \"--color-text\": theme.palette.common.white,\r\n\r\n // light mode\r\n '--color-bg': '#ffffff',\r\n '--color-text': theme.palette.common.black,\r\n\r\n marginTop: '45px',\r\n '.MuiPaper-root': {\r\n overflow: 'visible',\r\n backgroundColor: 'var(--color-bg, #000000)',\r\n borderRadius: theme.shape.borderRadius,\r\n minWidth: '280px',\r\n maxWidth: '550px',\r\n boxShadow: `0 1px 1px rgba(0, 0, 0, 0.05), 0 2px 2px rgba(0, 0, 0, 0.2), 0 4px 4px rgba(0, 0, 0, 0.15), 0 8px 8px rgba(0, 0, 0, 0.05)`,\r\n animation: 'fadeInDown 0.3s ease-out',\r\n marginTop: '8px',\r\n color: 'var(--color-text, #000000)',\r\n display: 'flex',\r\n\r\n '@keyframes fadeInDown': {\r\n '0%': { opacity: 0, transform: 'translateY(-10px)' },\r\n '100%': { opacity: 1, transform: 'translateY(0)' }\r\n },\r\n\r\n '&::before': {\r\n content: '\"\"',\r\n position: 'absolute',\r\n backgroundColor: 'var(--color-bg, #ffffff)',\r\n width: '10px',\r\n height: '10px',\r\n top: '-4px',\r\n right: theme.spacing(1),\r\n transform: 'translateX(-50%) rotate(45deg)',\r\n zIndex: 0\r\n }\r\n },\r\n '.MuiBackdrop-root': { backgroundColor: 'transparent' },\r\n '.MuiList-root': { padding: 0 }\r\n}))\r\n\r\nexport const cartContentClasses = {\r\n root: 'CartContent-root',\r\n header: 'CartContent-header',\r\n footer: 'CartContent-footer',\r\n items: 'CartContent-items',\r\n item: 'CartContent-item',\r\n itemContent: 'CartContent-itemContent',\r\n itemImg: 'CartContent-itemImg',\r\n itemTitle: 'CartContent-itemTitle',\r\n itemPrice: 'CartContent-itemPrice',\r\n itemTag: 'CartContent-itemTag'\r\n}\r\n\r\nconst getCartContentClasses = (key: keyof typeof cartContentClasses, options?: { prefix?: string; suffix?: string }) => {\r\n return `${options?.prefix || ''}.${cartContentClasses[key]}${options?.suffix || ''}`\r\n}\r\n\r\nexport const CartContentStyled: ComponentType<BoxProps> = styled(Box)(({ theme }) => ({\r\n '--height-item': '80px',\r\n [getCartContentClasses('root', { prefix: '&' })]: {\r\n height: '100%'\r\n },\r\n [getCartContentClasses('header')]: {\r\n padding: '12px 16px',\r\n display: 'flex',\r\n justifyContent: 'space-between',\r\n alignItems: 'center'\r\n },\r\n [getCartContentClasses('footer')]: {\r\n padding: '6px 12px',\r\n display: 'flex',\r\n justifyContent: 'flex-end',\r\n position: 'relative'\r\n },\r\n [getCartContentClasses('items')]: {\r\n padding: '8px',\r\n overflowY: 'auto',\r\n height: '100%'\r\n },\r\n [getCartContentClasses('item')]: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n padding: '0 9px',\r\n transition: '0.3s',\r\n height: 'var(--height-item)',\r\n '& a': {\r\n textDecoration: 'none'\r\n },\r\n '&:hover': {\r\n background: '#fafafa'\r\n },\r\n '&:hover a': {\r\n textDecoration: 'underline'\r\n }\r\n },\r\n [getCartContentClasses('itemImg')]: {\r\n width: '60px',\r\n height: '60px',\r\n borderRadius: '6px',\r\n objectFit: 'cover',\r\n marginRight: '12px',\r\n flex: '0 0 auto',\r\n backgroundColor: alpha(theme.palette.grey[400], 0.2)\r\n },\r\n [getCartContentClasses('itemContent')]: {\r\n flex: 1,\r\n display: 'flex',\r\n alignItems: 'center',\r\n minWidth: 0,\r\n position: 'relative'\r\n },\r\n [getCartContentClasses('itemTitle')]: {\r\n color: 'var(--color-body)',\r\n fontWeight: 600,\r\n flex: 1,\r\n width: '100%',\r\n margin: '0 12px',\r\n padding: '15px 0',\r\n minWidth: 0,\r\n maxWidth: '300px'\r\n },\r\n [getCartContentClasses('itemTag')]: {\r\n position: 'absolute',\r\n top: 0,\r\n left: '12px',\r\n fontWeight: 600\r\n }\r\n}))\r\n"],"names":["MenuStyled","styled","Menu","_ref","theme","palette","common","black","marginTop","overflow","backgroundColor","borderRadius","shape","minWidth","maxWidth","boxShadow","animation","color","display","opacity","transform","content","position","width","height","top","right","spacing","zIndex","padding","cartContentClasses","root","header","footer","items","item","itemContent","itemImg","itemTitle","itemPrice","itemTag","getCartContentClasses","key","options","concat","prefix","suffix","CartContentStyled","Box","_ref2","_defineProperty","justifyContent","alignItems","overflowY","transition","textDecoration","background","objectFit","marginRight","flex","alpha","grey","fontWeight","margin","left"],"mappings":"+IAIO,IAAMA,EAAuCC,EAAOC,EAAPD,CAAa,SAAAE,GAAA,IAAGC,EAAKD,EAALC,MAAK,MAAQ,CAM/E,aAAc,UACd,eAAgBA,EAAMC,QAAQC,OAAOC,MAErCC,UAAW,OACX,iBAAkB,CAChBC,SAAU,UACVC,gBAAiB,2BACjBC,aAAcP,EAAMQ,MAAMD,aAC1BE,SAAU,QACVC,SAAU,QACVC,UAAsI,4HACtIC,UAAW,2BACXR,UAAW,MACXS,MAAO,6BACPC,QAAS,OAET,wBAAyB,CACvB,KAAM,CAAEC,QAAS,EAAGC,UAAW,qBAC/B,OAAQ,CAAED,QAAS,EAAGC,UAAW,kBAGnC,YAAa,CACXC,QAAS,KACTC,SAAU,WACVZ,gBAAiB,2BACjBa,MAAO,OACPC,OAAQ,OACRC,IAAK,OACLC,MAAOtB,EAAMuB,QAAQ,GACrBP,UAAW,iCACXQ,OAAQ,IAGZ,oBAAqB,CAAElB,gBAAiB,eACxC,gBAAiB,CAAEmB,QAAS,GAC7B,GAEYC,EAAqB,CAChCC,KAAM,mBACNC,OAAQ,qBACRC,OAAQ,qBACRC,MAAO,oBACPC,KAAM,mBACNC,YAAa,0BACbC,QAAS,sBACTC,UAAW,wBACXC,UAAW,wBACXC,QAAS,uBAGLC,EAAwB,SAACC,EAAsCC,GACnE,MAAA,GAAAC,QAAUD,aAAAA,EAAAA,EAASE,SAAU,QAAED,OAAId,EAAmBY,IAAIE,QAAGD,aAAAA,EAAAA,EAASG,SAAU,GAClF,EAEaC,EAA6C9C,EAAO+C,EAAP/C,CAAY,SAAAgD,GAAA,IAAG7C,EAAK6C,EAAL7C,MAAK,OAAA8C,EAAAA,EAAAA,EAAAA,EAAAA,EAAAA,EAAAA,EAAAA,EAAAA,EAAA,CAC5E,gBAAiB,QAChBT,EAAsB,OAAQ,CAAEI,OAAQ,MAAS,CAChDrB,OAAQ,SAETiB,EAAsB,UAAY,CACjCZ,QAAS,YACTX,QAAS,OACTiC,eAAgB,gBAChBC,WAAY,
|
|
1
|
+
{"version":3,"file":"styled.js","sources":["../../src/cart/styled.tsx"],"sourcesContent":["import { alpha, Box, Menu, styled } from '@mui/material'\r\nimport type { ComponentType } from 'react'\r\nimport type { BoxProps, MenuProps } from '@mui/material'\r\n\r\nexport const MenuStyled: ComponentType<MenuProps> = styled(Menu)(({ theme }) => ({\r\n // dark mode\r\n // '--color-bg': '#323234',\r\n // \"--color-text\": theme.palette.common.white,\r\n\r\n // light mode\r\n '--color-bg': '#ffffff',\r\n '--color-text': theme.palette.common.black,\r\n\r\n marginTop: '45px',\r\n '.MuiPaper-root': {\r\n overflow: 'visible',\r\n backgroundColor: 'var(--color-bg, #000000)',\r\n borderRadius: theme.shape.borderRadius,\r\n minWidth: '280px',\r\n maxWidth: '550px',\r\n boxShadow: `0 1px 1px rgba(0, 0, 0, 0.05), 0 2px 2px rgba(0, 0, 0, 0.2), 0 4px 4px rgba(0, 0, 0, 0.15), 0 8px 8px rgba(0, 0, 0, 0.05)`,\r\n animation: 'fadeInDown 0.3s ease-out',\r\n marginTop: '8px',\r\n color: 'var(--color-text, #000000)',\r\n display: 'flex',\r\n\r\n '@keyframes fadeInDown': {\r\n '0%': { opacity: 0, transform: 'translateY(-10px)' },\r\n '100%': { opacity: 1, transform: 'translateY(0)' }\r\n },\r\n\r\n '&::before': {\r\n content: '\"\"',\r\n position: 'absolute',\r\n backgroundColor: 'var(--color-bg, #ffffff)',\r\n width: '10px',\r\n height: '10px',\r\n top: '-4px',\r\n right: theme.spacing(1),\r\n transform: 'translateX(-50%) rotate(45deg)',\r\n zIndex: 0\r\n }\r\n },\r\n '.MuiBackdrop-root': { backgroundColor: 'transparent' },\r\n '.MuiList-root': { padding: 0 }\r\n}))\r\n\r\nexport const cartContentClasses = {\r\n root: 'CartContent-root',\r\n header: 'CartContent-header',\r\n footer: 'CartContent-footer',\r\n items: 'CartContent-items',\r\n item: 'CartContent-item',\r\n itemContent: 'CartContent-itemContent',\r\n itemImg: 'CartContent-itemImg',\r\n itemTitle: 'CartContent-itemTitle',\r\n itemPrice: 'CartContent-itemPrice',\r\n itemTag: 'CartContent-itemTag'\r\n}\r\n\r\nconst getCartContentClasses = (key: keyof typeof cartContentClasses, options?: { prefix?: string; suffix?: string }) => {\r\n return `${options?.prefix || ''}.${cartContentClasses[key]}${options?.suffix || ''}`\r\n}\r\n\r\nexport const CartContentStyled: ComponentType<BoxProps> = styled(Box)(({ theme }) => ({\r\n '--height-item': '80px',\r\n [getCartContentClasses('root', { prefix: '&' })]: {\r\n height: '100%'\r\n },\r\n [getCartContentClasses('header')]: {\r\n padding: '12px 16px',\r\n display: 'flex',\r\n justifyContent: 'space-between',\r\n alignItems: 'center',\r\n gap: theme.spacing(5)\r\n },\r\n [getCartContentClasses('footer')]: {\r\n padding: '6px 12px',\r\n display: 'flex',\r\n justifyContent: 'flex-end',\r\n position: 'relative'\r\n },\r\n [getCartContentClasses('items')]: {\r\n padding: '8px',\r\n overflowY: 'auto',\r\n height: '100%'\r\n },\r\n [getCartContentClasses('item')]: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n padding: '0 9px',\r\n transition: '0.3s',\r\n height: 'var(--height-item)',\r\n '& a': {\r\n textDecoration: 'none'\r\n },\r\n '&:hover': {\r\n background: '#fafafa'\r\n },\r\n '&:hover a': {\r\n textDecoration: 'underline'\r\n }\r\n },\r\n [getCartContentClasses('itemImg')]: {\r\n width: '60px',\r\n height: '60px',\r\n borderRadius: '6px',\r\n objectFit: 'cover',\r\n marginRight: '12px',\r\n flex: '0 0 auto',\r\n backgroundColor: alpha(theme.palette.grey[400], 0.2)\r\n },\r\n [getCartContentClasses('itemContent')]: {\r\n flex: 1,\r\n display: 'flex',\r\n alignItems: 'center',\r\n minWidth: 0,\r\n position: 'relative'\r\n },\r\n [getCartContentClasses('itemTitle')]: {\r\n color: 'var(--color-body)',\r\n fontWeight: 600,\r\n flex: 1,\r\n width: '100%',\r\n margin: '0 12px',\r\n padding: '15px 0',\r\n minWidth: 0,\r\n maxWidth: '300px'\r\n },\r\n [getCartContentClasses('itemTag')]: {\r\n position: 'absolute',\r\n top: 0,\r\n left: '12px',\r\n fontWeight: 600\r\n }\r\n}))\r\n"],"names":["MenuStyled","styled","Menu","_ref","theme","palette","common","black","marginTop","overflow","backgroundColor","borderRadius","shape","minWidth","maxWidth","boxShadow","animation","color","display","opacity","transform","content","position","width","height","top","right","spacing","zIndex","padding","cartContentClasses","root","header","footer","items","item","itemContent","itemImg","itemTitle","itemPrice","itemTag","getCartContentClasses","key","options","concat","prefix","suffix","CartContentStyled","Box","_ref2","_defineProperty","justifyContent","alignItems","gap","overflowY","transition","textDecoration","background","objectFit","marginRight","flex","alpha","grey","fontWeight","margin","left"],"mappings":"+IAIO,IAAMA,EAAuCC,EAAOC,EAAPD,CAAa,SAAAE,GAAA,IAAGC,EAAKD,EAALC,MAAK,MAAQ,CAM/E,aAAc,UACd,eAAgBA,EAAMC,QAAQC,OAAOC,MAErCC,UAAW,OACX,iBAAkB,CAChBC,SAAU,UACVC,gBAAiB,2BACjBC,aAAcP,EAAMQ,MAAMD,aAC1BE,SAAU,QACVC,SAAU,QACVC,UAAsI,4HACtIC,UAAW,2BACXR,UAAW,MACXS,MAAO,6BACPC,QAAS,OAET,wBAAyB,CACvB,KAAM,CAAEC,QAAS,EAAGC,UAAW,qBAC/B,OAAQ,CAAED,QAAS,EAAGC,UAAW,kBAGnC,YAAa,CACXC,QAAS,KACTC,SAAU,WACVZ,gBAAiB,2BACjBa,MAAO,OACPC,OAAQ,OACRC,IAAK,OACLC,MAAOtB,EAAMuB,QAAQ,GACrBP,UAAW,iCACXQ,OAAQ,IAGZ,oBAAqB,CAAElB,gBAAiB,eACxC,gBAAiB,CAAEmB,QAAS,GAC7B,GAEYC,EAAqB,CAChCC,KAAM,mBACNC,OAAQ,qBACRC,OAAQ,qBACRC,MAAO,oBACPC,KAAM,mBACNC,YAAa,0BACbC,QAAS,sBACTC,UAAW,wBACXC,UAAW,wBACXC,QAAS,uBAGLC,EAAwB,SAACC,EAAsCC,GACnE,MAAA,GAAAC,QAAUD,aAAAA,EAAAA,EAASE,SAAU,QAAED,OAAId,EAAmBY,IAAIE,QAAGD,aAAAA,EAAAA,EAASG,SAAU,GAClF,EAEaC,EAA6C9C,EAAO+C,EAAP/C,CAAY,SAAAgD,GAAA,IAAG7C,EAAK6C,EAAL7C,MAAK,OAAA8C,EAAAA,EAAAA,EAAAA,EAAAA,EAAAA,EAAAA,EAAAA,EAAAA,EAAA,CAC5E,gBAAiB,QAChBT,EAAsB,OAAQ,CAAEI,OAAQ,MAAS,CAChDrB,OAAQ,SAETiB,EAAsB,UAAY,CACjCZ,QAAS,YACTX,QAAS,OACTiC,eAAgB,gBAChBC,WAAY,SACZC,IAAKjD,EAAMuB,QAAQ,KAEpBc,EAAsB,UAAY,CACjCZ,QAAS,WACTX,QAAS,OACTiC,eAAgB,WAChB7B,SAAU,aAEXmB,EAAsB,SAAW,CAChCZ,QAAS,MACTyB,UAAW,OACX9B,OAAQ,SAETiB,EAAsB,QAAU,CAC/BvB,QAAS,OACTkC,WAAY,SACZvB,QAAS,QACT0B,WAAY,OACZ/B,OAAQ,qBACR,MAAO,CACLgC,eAAgB,QAElB,UAAW,CACTC,WAAY,WAEd,YAAa,CACXD,eAAgB,eAGnBf,EAAsB,WAAa,CAClClB,MAAO,OACPC,OAAQ,OACRb,aAAc,MACd+C,UAAW,QACXC,YAAa,OACbC,KAAM,WACNlD,gBAAiBmD,EAAMzD,EAAMC,QAAQyD,KAAK,KAAM,MAEjDrB,EAAsB,eAAiB,CACtCmB,KAAM,EACN1C,QAAS,OACTkC,WAAY,SACZvC,SAAU,EACVS,SAAU,aAEXmB,EAAsB,aAAe,CACpCxB,MAAO,oBACP8C,WAAY,IACZH,KAAM,EACNrC,MAAO,OACPyC,OAAQ,SACRnC,QAAS,SACThB,SAAU,EACVC,SAAU,UAEX2B,EAAsB,WAAa,CAClCnB,SAAU,WACVG,IAAK,EACLwC,KAAM,OACNF,WAAY,KACb"}
|
package/dist/cart/widget.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{inherits as r,createClass as e,classCallCheck as t,callSuper as n,defineProperty as o,objectSpread2 as i}from"../_virtual/_rollupPluginBabelHelpers.js";import{jsxs as a,jsx as l}from"react/jsx-runtime";import{Fragment as c,Component as s}from"react";import{ImageWithFallback as d}from"dinocollab-core/components";import{Badge as m,Typography as u,Divider as p,Button as h,Box as f,IconButton as v}from"@mui/material";import C from"@mui/icons-material/Remove";import g from"@mui/icons-material/ShoppingCartOutlined";import x from"@mui/icons-material/ShoppingCartCheckout";import{MenuStyled as
|
|
1
|
+
import{inherits as r,createClass as e,classCallCheck as t,callSuper as n,defineProperty as o,objectSpread2 as i}from"../_virtual/_rollupPluginBabelHelpers.js";import{jsxs as a,jsx as l}from"react/jsx-runtime";import{Fragment as c,Component as s}from"react";import{ImageWithFallback as d}from"dinocollab-core/components";import{Badge as m,Typography as u,Divider as p,Button as h,Box as f,IconButton as v}from"@mui/material";import C from"@mui/icons-material/Remove";import g from"@mui/icons-material/ShoppingCartOutlined";import x from"@mui/icons-material/ShoppingCartCheckout";import{MenuStyled as b,CartContentStyled as y,cartContentClasses as k}from"./styled.js";import{getTotalData as P}from"./helpers.js";import{DarkIconButton as N}from"../components/buttons.js";import{NoDataPanel as S}from"../components/no-data-panel.js";var j=function(){function j(r){var e;return t(this,j),e=n(this,j,[r]),o(e,"render",function(){var r;return a(c,{children:[l(N,{onClick:function(r){return e.onOpen(r.currentTarget)},children:l(m,{badgeContent:e.state.hydrated&&null!==(r=e.carts.length)&&void 0!==r?r:0,color:"error",children:l(g,{})})}),l(b,{disableScrollLock:!0,anchorEl:e.state.anchorEl,open:Boolean(e.state.anchorEl),onClose:e.onClose,anchorOrigin:{vertical:"top",horizontal:"right"},transformOrigin:{vertical:"top",horizontal:"right"},MenuListProps:{component:"div"},children:e.renderContent()})]})}),o(e,"renderContent",function(){var r,t=P(e.carts);return a(y,{children:[a("div",{className:k.header,children:[a(u,{variant:"h6",component:"span",sx:{flex:1},children:["Your Cart (",null!==(r=t.quantity)&&void 0!==r?r:0," items)"]}),a(u,{variant:"h6",component:"span",children:["Total: $ ",t.price.toFixed(2)]})]}),l(p,{}),a("div",{className:k.items,children:[e.carts.map(function(r,t){return l(c,{children:e.renderItem(r)},"key"+t)}),e.carts.length<1&&l(S,{title:"Your cart is empty",subTitle:"Try adding some products",sx:{height:"100%"}})]}),l(p,{}),l("div",{className:k.footer,children:l(h,i(i(i({},e.props.hrefCart?{component:"a",href:e.props.hrefCart}:{}),{},{color:"inherit",endIcon:l(x,{}),onClick:function(r){e.onClose(),e.props.onCartClick&&e.props.onCartClick(r)},disabled:e.carts.length<1},e.props.buttonMoveToCartProps),{},{children:"Show in cart"}))})]})}),o(e,"renderItem",function(r){var t,n,o,i,c;return a("div",{className:k.item,children:[l(d,{className:k.itemImg,src:null==r?void 0:r.PictureUrl,title:null==r?void 0:r.PictureUrl,fallbackSrc:"images/default-video.webp",alt:"product-picture"}),a("div",{className:k.itemContent,children:[l(u,{className:k.itemTag,variant:"caption",sx:{color:null!==(t=r.PriceColor)&&void 0!==t?t:"#000"},children:null!==(n=r.PriceName)&&void 0!==n?n:"Unknown Price"}),l(u,{className:k.itemTitle,noWrap:!0,variant:"subtitle1",children:null!==(o=r.ProductName)&&void 0!==o?o:"Unknown Product"}),a(f,{sx:{display:"flex",alignItems:"flex-end",gap:"2px",justifyContent:"flex-end"},children:[a(u,{variant:"subtitle1",children:["$ ",null!==(i=r.Price)&&void 0!==i?i:0]}),a(u,{variant:"body1",sx:{fontSize:"14px",mb:"3px",color:"#818181"},children:["x",null!==(c=r.Amount)&&void 0!==c?c:0," urls"]})]})]}),l(v,{size:"small",onClick:function(){var t,n;return null===(t=(n=e.props).onRemoveCart)||void 0===t?void 0:t.call(n,r)},sx:{color:"#818181"},children:l(C,{})})]})}),o(e,"onOpen",function(r){e.setState({anchorEl:r})}),o(e,"onClose",function(){e.setState({anchorEl:null})}),e.state={anchorEl:null,hydrated:!1},e}return r(j,s),e(j,[{key:"carts",get:function(){var r;return null!==(r=this.props.carts)&&void 0!==r?r:[]}},{key:"componentDidMount",value:function(){this.setState({hydrated:!0})}}])}(),T=function(r){var e=function(e){return l(j,i(i({},r),e))};return e.displayName="CartWidget",e};export{j as CartWidget,T as createCartWidget};
|
|
2
2
|
//# sourceMappingURL=widget.js.map
|
package/dist/cart/widget.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"widget.js","sources":["../../src/cart/widget.tsx"],"sourcesContent":["import { Component, Fragment } from 'react'\r\nimport { ImageWithFallback } from 'dinocollab-core/components'\r\nimport { Badge, Box, Button, Divider, IconButton, Typography } from '@mui/material'\r\nimport type { FC } from 'react'\r\nimport RemoveIcon from '@mui/icons-material/Remove'\r\nimport ShoppingCartOutlinedIcon from '@mui/icons-material/ShoppingCartOutlined'\r\nimport ShoppingCartCheckoutIcon from '@mui/icons-material/ShoppingCartCheckout'\r\nimport { ICartItem } from './types'\r\nimport { cartContentClasses, CartContentStyled, MenuStyled } from './styled'\r\nimport { getTotalData } from './helpers'\r\nimport { IAppSiteBaseUrl } from '../types'\r\nimport { DarkIconButton, NoDataPanel } from '../components'\r\n\r\ninterface ICartWidgetProps {\r\n baseUrl: IAppSiteBaseUrl\r\n carts?: ICartItem[]\r\n hrefCart?: string\r\n storageKey?: string\r\n onRemoveCart?: (item: ICartItem) => void\r\n onCartClick?: (e: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement, MouseEvent>) => void\r\n}\r\n\r\ninterface ICartWidgetState {\r\n anchorEl: HTMLElement | null\r\n hydrated: boolean\r\n}\r\n\r\nexport class CartWidget extends Component<ICartWidgetProps, ICartWidgetState> {\r\n constructor(props: ICartWidgetProps) {\r\n super(props)\r\n this.state = { anchorEl: null, hydrated: false }\r\n }\r\n\r\n get carts() {\r\n return this.props.carts ?? []\r\n }\r\n\r\n componentDidMount() {\r\n // When mounted on the client, set hydrated = true\r\n this.setState({ hydrated: true })\r\n }\r\n\r\n render = () => (\r\n <Fragment>\r\n <DarkIconButton onClick={(e) => this.onOpen(e.currentTarget)}>\r\n <Badge badgeContent={this.state.hydrated ? this.carts.length ?? 0 : 0} color='error'>\r\n <ShoppingCartOutlinedIcon />\r\n </Badge>\r\n </DarkIconButton>\r\n <MenuStyled\r\n disableScrollLock\r\n anchorEl={this.state.anchorEl}\r\n open={Boolean(this.state.anchorEl)}\r\n onClose={this.onClose}\r\n anchorOrigin={{ vertical: 'top', horizontal: 'right' }}\r\n transformOrigin={{ vertical: 'top', horizontal: 'right' }}\r\n MenuListProps={{ component: 'div' }}\r\n >\r\n {this.renderContent()}\r\n </MenuStyled>\r\n </Fragment>\r\n )\r\n\r\n renderContent = () => {\r\n const totalData = getTotalData(this.carts)\r\n return (\r\n <CartContentStyled>\r\n <div className={cartContentClasses.header}>\r\n <Typography variant='h6' component='span' sx={{ flex: 1 }}>\r\n Your Cart ({totalData.quantity ?? 0} items)\r\n </Typography>\r\n <Typography variant='h6' component='span'>\r\n Total: $ {totalData.price.toFixed(2)}\r\n </Typography>\r\n </div>\r\n <Divider />\r\n <div className={cartContentClasses.items}>\r\n {this.carts.map((x, i) => (\r\n <Fragment key={'key' + i}>{this.renderItem(x)}</Fragment>\r\n ))}\r\n {this.carts.length < 1 && <NoDataPanel title='Your cart is empty' subTitle='Try adding some products' sx={{ height: '100%' }} />}\r\n </div>\r\n <Divider />\r\n <div className={cartContentClasses.footer}>\r\n <Button\r\n {...(this.props.hrefCart ? { component: 'a', href: this.props.hrefCart } : {})}\r\n color='inherit'\r\n endIcon={<ShoppingCartCheckoutIcon />}\r\n onClick={(event) => {\r\n this.onClose()\r\n if (this.props.onCartClick) {\r\n this.props.onCartClick(event as React.MouseEvent<HTMLAnchorElement | HTMLButtonElement, MouseEvent>)\r\n }\r\n }}\r\n disabled={this.carts.length < 1}\r\n >\r\n Show in cart\r\n </Button>\r\n </div>\r\n </CartContentStyled>\r\n )\r\n }\r\n\r\n renderItem = (item: ICartItem) => (\r\n <div className={cartContentClasses.item}>\r\n <ImageWithFallback\r\n className={cartContentClasses.itemImg}\r\n src={item?.PictureUrl}\r\n title={item?.PictureUrl}\r\n fallbackSrc='images/default-video.webp'\r\n alt='product-picture'\r\n />\r\n <div className={cartContentClasses.itemContent}>\r\n <Typography className={cartContentClasses.itemTag} variant='caption' sx={{ color: item.PriceColor ?? '#000' }}>\r\n {item.PriceName ?? 'Unknown Price'}\r\n </Typography>\r\n <Typography className={cartContentClasses.itemTitle} noWrap variant='subtitle1'>\r\n {item.ProductName ?? 'Unknown Product'}\r\n </Typography>\r\n <Box sx={{ display: 'flex', alignItems: 'flex-end', gap: '2px', justifyContent: 'flex-end' }}>\r\n <Typography variant='subtitle1'>$ {item.Price ?? 0}</Typography>\r\n <Typography variant='body1' sx={{ fontSize: '14px', mb: '3px', color: '#818181' }}>\r\n x{item.Amount ?? 0} urls\r\n </Typography>\r\n </Box>\r\n </div>\r\n <IconButton size='small' onClick={() => this.props.onRemoveCart?.(item)} sx={{ color: '#818181' }}>\r\n <RemoveIcon />\r\n </IconButton>\r\n </div>\r\n )\r\n\r\n onOpen = (target: HTMLElement) => {\r\n this.setState({ anchorEl: target })\r\n }\r\n\r\n onClose = () => {\r\n this.setState({ anchorEl: null })\r\n }\r\n}\r\n\r\nexport const createCartWidget = (params: ICartWidgetProps) => {\r\n const _CartWidget: FC<Partial<ICartWidgetProps>> = (props) => <CartWidget {...params} {...props} />\r\n _CartWidget.displayName = 'CartWidget'\r\n return _CartWidget\r\n}\r\n"],"names":["CartWidget","props","_this","_classCallCheck","_callSuper","_defineProperty","_this$carts$length","_jsxs","Fragment","children","_jsx","DarkIconButton","onClick","e","onOpen","currentTarget","Badge","badgeContent","state","hydrated","carts","length","color","ShoppingCartOutlinedIcon","MenuStyled","disableScrollLock","anchorEl","open","Boolean","onClose","anchorOrigin","vertical","horizontal","transformOrigin","MenuListProps","component","renderContent","_totalData$quantity","totalData","getTotalData","CartContentStyled","className","cartContentClasses","header","Typography","variant","sx","flex","quantity","price","toFixed","Divider","items","map","x","i","renderItem","NoDataPanel","title","subTitle","height","footer","Button","_objectSpread","hrefCart","href","endIcon","ShoppingCartCheckoutIcon","event","onCartClick","disabled","item","_item$PriceColor","_item$PriceName","_item$ProductName","_item$Price","_item$Amount","ImageWithFallback","itemImg","src","PictureUrl","fallbackSrc","alt","itemContent","itemTag","PriceColor","PriceName","itemTitle","noWrap","ProductName","Box","display","alignItems","gap","justifyContent","Price","fontSize","mb","Amount","IconButton","size","_this$props$onRemoveC","_this$props","onRemoveCart","call","RemoveIcon","target","setState","_inherits","Component","_createClass","key","get","_this$props$carts","this","value","createCartWidget","params","_CartWidget","displayName"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"widget.js","sources":["../../src/cart/widget.tsx"],"sourcesContent":["import { Component, Fragment } from 'react'\r\nimport { ImageWithFallback } from 'dinocollab-core/components'\r\nimport { Badge, Box, Button, ButtonProps, Divider, IconButton, Typography } from '@mui/material'\r\nimport type { FC } from 'react'\r\nimport RemoveIcon from '@mui/icons-material/Remove'\r\nimport ShoppingCartOutlinedIcon from '@mui/icons-material/ShoppingCartOutlined'\r\nimport ShoppingCartCheckoutIcon from '@mui/icons-material/ShoppingCartCheckout'\r\nimport { ICartItem } from './types'\r\nimport { cartContentClasses, CartContentStyled, MenuStyled } from './styled'\r\nimport { getTotalData } from './helpers'\r\nimport { IAppSiteBaseUrl } from '../types'\r\nimport { DarkIconButton, NoDataPanel } from '../components'\r\n\r\ninterface ICartWidgetProps {\r\n baseUrl: IAppSiteBaseUrl\r\n carts?: ICartItem[]\r\n hrefCart?: string\r\n buttonMoveToCartProps?: ButtonProps & { [key: string]: any }\r\n storageKey?: string\r\n onRemoveCart?: (item: ICartItem) => void\r\n onCartClick?: (e: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement, MouseEvent>) => void\r\n}\r\n\r\ninterface ICartWidgetState {\r\n anchorEl: HTMLElement | null\r\n hydrated: boolean\r\n}\r\n\r\nexport class CartWidget extends Component<ICartWidgetProps, ICartWidgetState> {\r\n constructor(props: ICartWidgetProps) {\r\n super(props)\r\n this.state = { anchorEl: null, hydrated: false }\r\n }\r\n\r\n get carts() {\r\n return this.props.carts ?? []\r\n }\r\n\r\n componentDidMount() {\r\n // When mounted on the client, set hydrated = true\r\n this.setState({ hydrated: true })\r\n }\r\n\r\n render = () => (\r\n <Fragment>\r\n <DarkIconButton onClick={(e) => this.onOpen(e.currentTarget)}>\r\n <Badge badgeContent={this.state.hydrated ? this.carts.length ?? 0 : 0} color='error'>\r\n <ShoppingCartOutlinedIcon />\r\n </Badge>\r\n </DarkIconButton>\r\n <MenuStyled\r\n disableScrollLock\r\n anchorEl={this.state.anchorEl}\r\n open={Boolean(this.state.anchorEl)}\r\n onClose={this.onClose}\r\n anchorOrigin={{ vertical: 'top', horizontal: 'right' }}\r\n transformOrigin={{ vertical: 'top', horizontal: 'right' }}\r\n MenuListProps={{ component: 'div' }}\r\n >\r\n {this.renderContent()}\r\n </MenuStyled>\r\n </Fragment>\r\n )\r\n\r\n renderContent = () => {\r\n const totalData = getTotalData(this.carts)\r\n return (\r\n <CartContentStyled>\r\n <div className={cartContentClasses.header}>\r\n <Typography variant='h6' component='span' sx={{ flex: 1 }}>\r\n Your Cart ({totalData.quantity ?? 0} items)\r\n </Typography>\r\n <Typography variant='h6' component='span'>\r\n Total: $ {totalData.price.toFixed(2)}\r\n </Typography>\r\n </div>\r\n <Divider />\r\n <div className={cartContentClasses.items}>\r\n {this.carts.map((x, i) => (\r\n <Fragment key={'key' + i}>{this.renderItem(x)}</Fragment>\r\n ))}\r\n {this.carts.length < 1 && <NoDataPanel title='Your cart is empty' subTitle='Try adding some products' sx={{ height: '100%' }} />}\r\n </div>\r\n <Divider />\r\n <div className={cartContentClasses.footer}>\r\n <Button\r\n {...(this.props.hrefCart ? { component: 'a', href: this.props.hrefCart } : {})}\r\n color='inherit'\r\n endIcon={<ShoppingCartCheckoutIcon />}\r\n onClick={(event) => {\r\n this.onClose()\r\n if (this.props.onCartClick) {\r\n this.props.onCartClick(event as React.MouseEvent<HTMLAnchorElement | HTMLButtonElement, MouseEvent>)\r\n }\r\n }}\r\n disabled={this.carts.length < 1}\r\n {...this.props.buttonMoveToCartProps}\r\n >\r\n Show in cart\r\n </Button>\r\n </div>\r\n </CartContentStyled>\r\n )\r\n }\r\n\r\n renderItem = (item: ICartItem) => (\r\n <div className={cartContentClasses.item}>\r\n <ImageWithFallback\r\n className={cartContentClasses.itemImg}\r\n src={item?.PictureUrl}\r\n title={item?.PictureUrl}\r\n fallbackSrc='images/default-video.webp'\r\n alt='product-picture'\r\n />\r\n <div className={cartContentClasses.itemContent}>\r\n <Typography className={cartContentClasses.itemTag} variant='caption' sx={{ color: item.PriceColor ?? '#000' }}>\r\n {item.PriceName ?? 'Unknown Price'}\r\n </Typography>\r\n <Typography className={cartContentClasses.itemTitle} noWrap variant='subtitle1'>\r\n {item.ProductName ?? 'Unknown Product'}\r\n </Typography>\r\n <Box sx={{ display: 'flex', alignItems: 'flex-end', gap: '2px', justifyContent: 'flex-end' }}>\r\n <Typography variant='subtitle1'>$ {item.Price ?? 0}</Typography>\r\n <Typography variant='body1' sx={{ fontSize: '14px', mb: '3px', color: '#818181' }}>\r\n x{item.Amount ?? 0} urls\r\n </Typography>\r\n </Box>\r\n </div>\r\n <IconButton size='small' onClick={() => this.props.onRemoveCart?.(item)} sx={{ color: '#818181' }}>\r\n <RemoveIcon />\r\n </IconButton>\r\n </div>\r\n )\r\n\r\n onOpen = (target: HTMLElement) => {\r\n this.setState({ anchorEl: target })\r\n }\r\n\r\n onClose = () => {\r\n this.setState({ anchorEl: null })\r\n }\r\n}\r\n\r\nexport const createCartWidget = (params: ICartWidgetProps) => {\r\n const _CartWidget: FC<Partial<ICartWidgetProps>> = (props) => <CartWidget {...params} {...props} />\r\n _CartWidget.displayName = 'CartWidget'\r\n return _CartWidget\r\n}\r\n"],"names":["CartWidget","props","_this","_classCallCheck","_callSuper","_defineProperty","_this$carts$length","_jsxs","Fragment","children","_jsx","DarkIconButton","onClick","e","onOpen","currentTarget","Badge","badgeContent","state","hydrated","carts","length","color","ShoppingCartOutlinedIcon","MenuStyled","disableScrollLock","anchorEl","open","Boolean","onClose","anchorOrigin","vertical","horizontal","transformOrigin","MenuListProps","component","renderContent","_totalData$quantity","totalData","getTotalData","CartContentStyled","className","cartContentClasses","header","Typography","variant","sx","flex","quantity","price","toFixed","Divider","items","map","x","i","renderItem","NoDataPanel","title","subTitle","height","footer","Button","_objectSpread","hrefCart","href","endIcon","ShoppingCartCheckoutIcon","event","onCartClick","disabled","buttonMoveToCartProps","item","_item$PriceColor","_item$PriceName","_item$ProductName","_item$Price","_item$Amount","ImageWithFallback","itemImg","src","PictureUrl","fallbackSrc","alt","itemContent","itemTag","PriceColor","PriceName","itemTitle","noWrap","ProductName","Box","display","alignItems","gap","justifyContent","Price","fontSize","mb","Amount","IconButton","size","_this$props$onRemoveC","_this$props","onRemoveCart","call","RemoveIcon","target","setState","_inherits","Component","_createClass","key","get","_this$props$carts","this","value","createCartWidget","params","_CartWidget","displayName"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{objectWithoutProperties as e,objectSpread2 as t}from"../_virtual/_rollupPluginBabelHelpers.js";import{jsx as i,jsxs as
|
|
1
|
+
import{objectWithoutProperties as e,objectSpread2 as t}from"../_virtual/_rollupPluginBabelHelpers.js";import{jsx as i,jsxs as r}from"react/jsx-runtime";import{useCallback as a,useMemo as n}from"react";import{styled as o,Button as s,Box as c,Typography as l}from"@mui/material";var A=["children","startIcon","className","forceTheme"],g="data:image/webp;base64,UklGRkwEAABXRUJQVlA4WAoAAAAQAAAAdwAAdwAAQUxQSM4DAAABoEXb2iFJ+jKzjLZt27Zt27Zt27Zt27Zt24jM+5BfZPzxR/yrn2ZWREwA/Xdy+ctuYHMU9QRp8D4eQTnZwJ8JUU1aHZwMV0waPZwKUhUORFYVjioLJ8JVhT1hqsJhp2o0HewPU8zkAzo44FLLqJA9OtgeppQJFHZMB3sUQ3REB3uDFBNpvw42+AkqtXBFc1ui4BM6aCmmPQBssiUKOaZzSkis914oY0sUeoI7IaT8H6aPPVHocaa2kBoaM9imKMoaQBvtElL1LzPArogylE9NYu1P/D9f9Lp1Yyip7BvgXUWHgj4CwNsg9WQGm1k9NbmqNpavfGwxFbhythX3GPCjiUNEebvbBu/M6gkAO1Y9ibhVEjiiR7KXeNwS8xId+vFxRbjlAoo2TOfg4soS5Q0A7Lda0DkA0ySrq3n9yWGxA/BuI1dXeLvrWivea2a3S6rOXD0uxoQz++tYIPk75liwVJ24OkzgVQBaU/mScYcDrdMM3mfkS2q9xcwnBS1hvitoIfPVUEDqah0GDu3bonQCh0qCKy554gGvXR6V1WlPi5lvvoR0uA+DniMlnXa0nPniQ7kHELkncTJDybmjQdbpyVzXcczTIPbrMEOJ3jIHA6xQl4ny3qs3F+UkzPbB9ZCZRlJ14xoylHrXh2dDgpgYFyAP5XIDuBMgV3O3l1aGIwoNIP489D1XprSsVKpK1yXPxFHGqesHRCa50v/0ekGGXaug+3d5NifxQZVOCPNZGmr2B3ifw1hpt86VXA7y1dX0h3kJuZXmUZIGtSKR8Z/g1wWR0RSPTYvCzZFA7EDw2wLJePJ7ZtFbppI1wl5wN0hoetOKfgM86wOt0RSsllUMdTCLMoyd19ifrLGBm06CI9/kRgrz2UBVrooZr7nsomg0t1C6ElwRM8B+J+EJuHsO2fy4MBNKcWPF0W8G0tF4AJ4pThOGcllMOM8lls5RY/Wa2mTmEi7AhC1cHunM32jeaq6Q7cw1bzmX03b6c8VN2MHFsZ2c3FITfnAO2yEO4rKBvWhDd7iiwhZzo8l+5nFrXIJivmT+VpShhsYMkabSXwblBC0A+zamDGV+Mz2lcdziPocLqQl+BckY8TVTSBqqz+F6dAHFP+s4paDKXlNI4pscricxVPUn+EEkaZpBI0uQzBm/cfjQ0ulTzLka+PORZJF/kA5wuXlsnUzD30E/A9n2cj3gx5HZg3oPXXYFPrork30HrvLoCfS0cdoYuWaJ02qSzbf4KOhmJrL9pFvdAr6OdZECnfk3/jbwdmoCUmXC9pufcH+uL60Vkf6XMVZQOCBYAAAAEAcAnQEqeAB4AD6RSJ9LpaQioaSIALASCWlu4XEgAqWZ93Pu1keUUni2PHdLNfliQEgJASAkBICQEgJASAkBGAAA/v6knwxv//8VGk/xH3//+MPIwAAAAA==",m="data:image/webp;base64,UklGRngCAABXRUJQVlA4WAoAAAAQAAAAdwAAdwAAQUxQSAgCAAABkAXZtmk769nvxbbt5M+2bdvOp23btm3btm0nBzM8r9a5a8WpiogJoP8XB5eZceCMsMfXdkzuxVf4HkS2p4Vz9Tch9e3UPK0APJ/cuVFDURs0H3AEwOUwjtQGcCUTSTzUAKZyDAbexyOZRwMmx1mgLUkNWBwAkok1D+B5GFesLv8AyFyuZHIvheLMBYDpqfTZgW8+ba5NUXx/bXpdtjiA2TlMkztOgItVFbnuDJgeXY1rkcH1elrB2pRKKeBd/yClgGu5tMKH6b5KATfr+SgF7ErlpRTMDr5KASczagVkU+uUWq9zaPWhuFavMmm1h5R6nUSpDclJpRdViFWwWTFJpRuFiVuolz2CSKXD8cmFEj1u5kMaGcvCyZ3i3CxKbvW465GwegaTFrcc2ftykIs9bpOT+x3I1R6X28H0RKQKLfzWtdLkds8L7wngXZ+YpA5R2qoVEpEHSuCpf7nZQGqxVsPmOAH0lCoIsDj6Akgjk9d04CNHHAN4UkyisEU20J+DygOwlg/pLWzfyQ8A7PdnoVbvIfWxuMScb69MrwYGErtv9u5zVsu6ZunI8rHoD8LYBeLpFH4YJ4JUSvwEVoRW0CnRIxjhetRZuvz7Gz8Aa5aLunI8B4TneCabzZGhSdPvd38Nu11TUZvV4HCc6BE+hpPGSZ4CESolfICP4Sr5jn01yVel/+8CVlA4IEoAAACQBgCdASp4AHgAPpFIoUylpCMiIIgAsBIJaW7hdJAAT22IvEgubeI386q8sEbEFRz2xF4gqOe2IvEFRzvAAP7/Uk9vLwAAAAAAAA==",d=function(o){var s=o.children,g=o.startIcon,m=o.className,d=o.forceTheme,b=e(o,A),v=a(function(){if(!g)return null;var e=g;return"string"==typeof g&&(e=i(c,{component:"span",className:"icon-img",sx:{"--mask-url":"url(".concat(g,")")}})),i("span",{className:"icon-static",children:e})},[g]),u=n(function(){var e=["tab-button"];return e.push(m||""),e.join(" ")},[m]);return r(p,t(t({},b),{},{className:u,forceTheme:d,children:[v(),r("div",{className:"text-container",children:[i(l,{variant:"h6",className:"text text-visible",children:s}),i(l,{variant:"h6",className:"text text-hidden",children:s})]})]}))},p=o(s,{shouldForwardProp:function(e){return"forceTheme"!==e}})(function(e){var t=e.theme,i=e.forceTheme,r={dark:{primary:t.palette.common.white,secondary:"rgb(249, 169, 37)",iconActive:"rgb(249, 169, 37)",bgGradient:"linear-gradient(45deg, rgb(211, 47, 47) 0%, rgb(249, 169, 37) 70%, rgb(211, 47, 47) 100%) 0% 0% / 200%",iconImageFilter:"invert(1) brightness(2)"},light:{primary:t.palette.common.black,secondary:"rgb(156, 39, 176)",iconActive:"rgb(156, 39, 176)",bgGradient:"linear-gradient(45deg, rgb(25, 118, 210) 0%, rgb(156, 39, 176) 70%, rgb(25, 118, 210) 100%) 0% 0% / 200%",iconImageFilter:"invert(0) brightness(0.2)"}}[i||t.palette.mode];return{"--color-primary":r.primary,"--color-secondary":r.secondary,"--bg-underline":r.bgGradient,"--bg-icon":r.bgGradient,"--icon-color-active":r.iconActive,"--size-icon":"24px","--spacing-x-size":"12px","--timing-fast":"0.25s","--timing-medium":"0.3s","--easing-smooth":"cubic-bezier(0.25, 0.46, 0.45, 0.94)","--easing-bounce":"cubic-bezier(0.34, 1.56, 0.64, 1)",height:"var(--height-button, 40px)",position:"relative",overflow:"hidden",transition:"transform 0.2s, box-shadow 0.2s",display:"flex",alignItems:"center",gap:"8px",padding:"6px var(--spacing-x-size)",color:"var(--color-primary)",backgroundColor:"transparent !important",a:{display:"flex",alignItems:"center"},"&::after":{content:'""',position:"absolute",bottom:"2px",left:"var(--spacing-x-size)",width:"0",height:"2px",background:"var(--bg-underline)",transition:"width var(--timing-fast) var(--easing-smooth)"},"& .icon-static":{display:"flex",alignItems:"center",flexShrink:0,transition:"transform var(--timing-medium) var(--easing-bounce)",transformOrigin:"left bottom",position:"relative","img, svg, .icon-img":{width:"var(--size-icon)",height:"var(--size-icon)"},".icon-img":{backgroundImage:"var(--mask-url)",backgroundSize:"cover",backgroundPosition:"center",display:"block",borderRadius:4,transition:"filter 0.3s",position:"relative",zIndex:1,filter:r.iconImageFilter}},"& .text-container":{position:"relative",overflow:"hidden",flex:1},".text":{textTransform:"none",fontWeight:600,lineHeight:1.6,transformOrigin:"left bottom"},"& .text-visible, & .text-hidden":{transition:"transform var(--timing-medium) var(--easing-smooth)",display:"block",width:"100%",textAlign:"left",margin:0},"& .text-visible":{transform:"translateY(0) skewY(0)",opacity:1},"& .text-hidden":{position:"absolute",top:"50%",left:"0",transform:"translateY(50%) skewY(15deg)",opacity:1},"&.active":{"& .icon-static":{color:"var(--icon-color-active)",".icon-img":{background:"var(--bg-icon)",WebkitMaskImage:"var(--mask-url)",maskImage:"var(--mask-url)",WebkitMaskRepeat:"no-repeat",maskRepeat:"no-repeat",WebkitMaskSize:"cover",maskSize:"cover",filter:"none"}},"&::after":{width:"var(--size-icon)"}},"&.inactive":{"&::after":{width:"0"}},"&:hover":{"&::after":{width:"calc(100% - (var(--spacing-x-size) * 2))"},"& .icon-static":{transform:"rotate(-10deg)"},"& .text-visible":{transform:"translateY(-100%) skewY(-15deg)",opacity:1},"& .text-hidden":{transform:"translateY(-50%) skewY(0)",opacity:1}}}});export{d as ButtonAnimation,g as IconAudioBase64,m as IconVideoBase64};
|
|
2
2
|
//# sourceMappingURL=animated-tabs.units.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"animated-tabs.units.js","sources":["../../src/layout-global/animated-tabs.units.tsx"],"sourcesContent":["import { useCallback, useMemo } from 'react'\r\nimport { Box, Button, styled, Typography } from '@mui/material'\r\nimport type { FC, ReactNode } from 'react'\r\nimport type { ButtonProps, Theme } from '@mui/material'\r\n\r\nexport const IconAudioBase64 = `data:image/webp;base64,UklGRkwEAABXRUJQVlA4WAoAAAAQAAAAdwAAdwAAQUxQSM4DAAABoEXb2iFJ+jKzjLZt27Zt27Zt27Zt27Zt24jM+5BfZPzxR/yrn2ZWREwA/Xdy+ctuYHMU9QRp8D4eQTnZwJ8JUU1aHZwMV0waPZwKUhUORFYVjioLJ8JVhT1hqsJhp2o0HewPU8zkAzo44FLLqJA9OtgeppQJFHZMB3sUQ3REB3uDFBNpvw42+AkqtXBFc1ui4BM6aCmmPQBssiUKOaZzSkis914oY0sUeoI7IaT8H6aPPVHocaa2kBoaM9imKMoaQBvtElL1LzPArogylE9NYu1P/D9f9Lp1Yyip7BvgXUWHgj4CwNsg9WQGm1k9NbmqNpavfGwxFbhythX3GPCjiUNEebvbBu/M6gkAO1Y9ibhVEjiiR7KXeNwS8xId+vFxRbjlAoo2TOfg4soS5Q0A7Lda0DkA0ySrq3n9yWGxA/BuI1dXeLvrWivea2a3S6rOXD0uxoQz++tYIPk75liwVJ24OkzgVQBaU/mScYcDrdMM3mfkS2q9xcwnBS1hvitoIfPVUEDqah0GDu3bonQCh0qCKy554gGvXR6V1WlPi5lvvoR0uA+DniMlnXa0nPniQ7kHELkncTJDybmjQdbpyVzXcczTIPbrMEOJ3jIHA6xQl4ny3qs3F+UkzPbB9ZCZRlJ14xoylHrXh2dDgpgYFyAP5XIDuBMgV3O3l1aGIwoNIP489D1XprSsVKpK1yXPxFHGqesHRCa50v/0ekGGXaug+3d5NifxQZVOCPNZGmr2B3ifw1hpt86VXA7y1dX0h3kJuZXmUZIGtSKR8Z/g1wWR0RSPTYvCzZFA7EDw2wLJePJ7ZtFbppI1wl5wN0hoetOKfgM86wOt0RSsllUMdTCLMoyd19ifrLGBm06CI9/kRgrz2UBVrooZr7nsomg0t1C6ElwRM8B+J+EJuHsO2fy4MBNKcWPF0W8G0tF4AJ4pThOGcllMOM8lls5RY/Wa2mTmEi7AhC1cHunM32jeaq6Q7cw1bzmX03b6c8VN2MHFsZ2c3FITfnAO2yEO4rKBvWhDd7iiwhZzo8l+5nFrXIJivmT+VpShhsYMkabSXwblBC0A+zamDGV+Mz2lcdziPocLqQl+BckY8TVTSBqqz+F6dAHFP+s4paDKXlNI4pscricxVPUn+EEkaZpBI0uQzBm/cfjQ0ulTzLka+PORZJF/kA5wuXlsnUzD30E/A9n2cj3gx5HZg3oPXXYFPrork30HrvLoCfS0cdoYuWaJ02qSzbf4KOhmJrL9pFvdAr6OdZECnfk3/jbwdmoCUmXC9pufcH+uL60Vkf6XMVZQOCBYAAAAEAcAnQEqeAB4AD6RSJ9LpaQioaSIALASCWlu4XEgAqWZ93Pu1keUUni2PHdLNfliQEgJASAkBICQEgJASAkBGAAA/v6knwxv//8VGk/xH3//+MPIwAAAAA==`\r\n\r\nexport const IconVideoBase64 = `data:image/webp;base64,UklGRngCAABXRUJQVlA4WAoAAAAQAAAAdwAAdwAAQUxQSAgCAAABkAXZtmk769nvxbbt5M+2bdvOp23btm3btm0nBzM8r9a5a8WpiogJoP8XB5eZceCMsMfXdkzuxVf4HkS2p4Vz9Tch9e3UPK0APJ/cuVFDURs0H3AEwOUwjtQGcCUTSTzUAKZyDAbexyOZRwMmx1mgLUkNWBwAkok1D+B5GFesLv8AyFyuZHIvheLMBYDpqfTZgW8+ba5NUXx/bXpdtjiA2TlMkztOgItVFbnuDJgeXY1rkcH1elrB2pRKKeBd/yClgGu5tMKH6b5KATfr+SgF7ErlpRTMDr5KASczagVkU+uUWq9zaPWhuFavMmm1h5R6nUSpDclJpRdViFWwWTFJpRuFiVuolz2CSKXD8cmFEj1u5kMaGcvCyZ3i3CxKbvW465GwegaTFrcc2ftykIs9bpOT+x3I1R6X28H0RKQKLfzWtdLkds8L7wngXZ+YpA5R2qoVEpEHSuCpf7nZQGqxVsPmOAH0lCoIsDj6Akgjk9d04CNHHAN4UkyisEU20J+DygOwlg/pLWzfyQ8A7PdnoVbvIfWxuMScb69MrwYGErtv9u5zVsu6ZunI8rHoD8LYBeLpFH4YJ4JUSvwEVoRW0CnRIxjhetRZuvz7Gz8Aa5aLunI8B4TneCabzZGhSdPvd38Nu11TUZvV4HCc6BE+hpPGSZ4CESolfICP4Sr5jn01yVel/+8CVlA4IEoAAACQBgCdASp4AHgAPpFIoUylpCMiIIgAsBIJaW7hdJAAT22IvEgubeI386q8sEbEFRz2xF4gqOe2IvEFRzvAAP7/Uk9vLwAAAAAAAA==`\r\n\r\nexport interface IButtonThemeProps {\r\n forceTheme?: 'dark' | 'light'\r\n}\r\n\r\nexport interface IButtonAnimationProps extends ButtonProps, IButtonThemeProps {\r\n children: ReactNode\r\n startIcon?: ReactNode\r\n [key: string]: any // Allow additional props\r\n}\r\n\r\nexport const ButtonAnimation: FC<IButtonAnimationProps> = (props) => {\r\n const { children, startIcon, className, forceTheme, ...otherProps } = props\r\n\r\n const renderIcon = useCallback(() => {\r\n if (!startIcon) return null\r\n let finalIcon = startIcon\r\n if (typeof startIcon === 'string') {\r\n finalIcon = <Box component='span' className='icon-img' sx={{ '--mask-url': `url(${startIcon})` }} />\r\n }\r\n return <span className='icon-static'>{finalIcon}</span>\r\n }, [startIcon])\r\n\r\n const rootClasses = useMemo(() => {\r\n const classes = ['tab-button']\r\n classes.push(className || '')\r\n return classes.join(' ')\r\n }, [className])\r\n\r\n return (\r\n <ButtonAnimationStyled {...otherProps} className={rootClasses} forceTheme={forceTheme}>\r\n {renderIcon()}\r\n <div className='text-container'>\r\n <Typography variant='h6' className='text text-visible'>\r\n {children}\r\n </Typography>\r\n <Typography variant='h6' className='text text-hidden'>\r\n {children}\r\n </Typography>\r\n </div>\r\n </ButtonAnimationStyled>\r\n )\r\n}\r\n\r\nconst ButtonAnimationStyled = styled(Button, {\r\n shouldForwardProp: (prop: PropertyKey) => prop !== 'forceTheme'\r\n})<IButtonThemeProps>(({ theme, forceTheme }: { theme: Theme; forceTheme?: 'dark' | 'light' }) => {\r\n const sxMap = {\r\n dark: {\r\n primary: theme.palette.common.white,\r\n secondary: 'rgb(249, 169, 37)',\r\n iconActive: 'rgb(249, 169, 37)',\r\n bgGradient: 'linear-gradient(45deg, rgb(211, 47, 47) 0%, rgb(249, 169, 37) 70%, rgb(211, 47, 47) 100%) 0% 0% / 200%',\r\n iconImageFilter: 'invert(1) brightness(2)'\r\n },\r\n light: {\r\n primary: theme.palette.common.black,\r\n secondary: 'rgb(156, 39, 176)',\r\n iconActive: 'rgb(156, 39, 176)',\r\n bgGradient: 'linear-gradient(45deg, rgb(25, 118, 210) 0%, rgb(156, 39, 176) 70%, rgb(25, 118, 210) 100%) 0% 0% / 200%',\r\n iconImageFilter: 'invert(0) brightness(0.2)'\r\n }\r\n }\r\n\r\n const mode = forceTheme || theme.palette.mode\r\n const currentSx = sxMap[mode as keyof typeof sxMap]\r\n\r\n return {\r\n '--color-primary': currentSx.primary,\r\n '--color-secondary': currentSx.secondary,\r\n '--bg-underline': currentSx.bgGradient,\r\n '--bg-icon': currentSx.bgGradient,\r\n '--icon-color-active': currentSx.iconActive,\r\n '--size-icon': '24px',\r\n '--spacing-x-size': '12px',\r\n '--timing-fast': '0.25s',\r\n '--timing-medium': '0.3s',\r\n '--easing-smooth': 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',\r\n '--easing-bounce': 'cubic-bezier(0.34, 1.56, 0.64, 1)',\r\n height: 'var(--height-button, 40px)',\r\n position: 'relative',\r\n overflow: 'hidden',\r\n transition: 'transform 0.2s, box-shadow 0.2s',\r\n display: 'flex',\r\n alignItems: 'center',\r\n gap: '8px',\r\n padding: '6px var(--spacing-x-size)',\r\n color: 'var(--color-primary)',\r\n backgroundColor: 'transparent !important',\r\n\r\n a: {\r\n display: 'flex',\r\n alignItems: 'center'\r\n },\r\n\r\n '&::after': {\r\n content: '\"\"',\r\n position: 'absolute',\r\n bottom: '2px',\r\n left: 'var(--spacing-x-size)',\r\n width: '0',\r\n height: '2px',\r\n background: 'var(--bg-underline)',\r\n transition: 'width var(--timing-fast) var(--easing-smooth)'\r\n },\r\n\r\n '& .icon-static': {\r\n display: 'flex',\r\n alignItems: 'center',\r\n flexShrink: 0,\r\n transition: 'transform var(--timing-medium) var(--easing-bounce)',\r\n transformOrigin: 'left bottom',\r\n position: 'relative',\r\n 'img, svg, .icon-img': { width: 'var(--size-icon)', height: 'var(--size-icon)' },\r\n '.icon-img': {\r\n backgroundImage: `var(--mask-url)`,\r\n backgroundSize: 'cover',\r\n backgroundPosition: 'center',\r\n display: 'block',\r\n borderRadius: 4,\r\n transition: 'filter 0.3s',\r\n position: 'relative',\r\n zIndex: 1,\r\n filter: currentSx.iconImageFilter\r\n }\r\n },\r\n\r\n '& .text-container': { position: 'relative', overflow: 'hidden', flex: 1 },\r\n\r\n '.text': {\r\n textTransform: 'none',\r\n fontWeight: 600,\r\n fontSize: '1.125rem',\r\n lineHeight: 1.6,\r\n transformOrigin: 'left bottom'\r\n },\r\n\r\n '& .text-visible, & .text-hidden': {\r\n transition: 'transform var(--timing-medium) var(--easing-smooth)',\r\n display: 'block',\r\n width: '100%',\r\n textAlign: 'left',\r\n margin: 0\r\n },\r\n\r\n '& .text-visible': { transform: 'translateY(0) skewY(0)', opacity: 1 },\r\n\r\n '& .text-hidden': {\r\n position: 'absolute',\r\n top: '50%',\r\n left: '0',\r\n transform: 'translateY(50%) skewY(15deg)',\r\n opacity: 1\r\n },\r\n\r\n '&.active-tab': {\r\n '& .icon-static': {\r\n color: 'var(--icon-color-active)',\r\n '.icon-img': {\r\n background: 'var(--bg-icon)',\r\n WebkitMaskImage: 'var(--mask-url)',\r\n maskImage: 'var(--mask-url)',\r\n WebkitMaskRepeat: 'no-repeat',\r\n maskRepeat: 'no-repeat',\r\n WebkitMaskSize: 'cover',\r\n maskSize: 'cover',\r\n filter: 'none'\r\n }\r\n },\r\n '&::after': { width: 'var(--size-icon)' }\r\n },\r\n '&.inactive-tab': { '&::after': { width: '0' } },\r\n\r\n '&:hover': {\r\n // transform: 'scale(1.02)',\r\n '&::after': { width: 'calc(100% - (var(--spacing-x-size) * 2))' },\r\n '& .icon-static': { transform: 'rotate(-10deg)' },\r\n '& .text-visible': { transform: 'translateY(-100%) skewY(-15deg)', opacity: 1 },\r\n '& .text-hidden': { transform: 'translateY(-50%) skewY(0)', opacity: 1 }\r\n }\r\n }\r\n})\r\n"],"names":["IconAudioBase64","IconVideoBase64","ButtonAnimation","props","children","startIcon","className","forceTheme","otherProps","_objectWithoutProperties","_excluded","renderIcon","useCallback","finalIcon","_jsx","Box","component","sx","concat","rootClasses","useMemo","classes","push","join","_jsxs","ButtonAnimationStyled","_objectSpread","Typography","variant","styled","Button","shouldForwardProp","prop","_ref","theme","currentSx","dark","primary","palette","common","white","secondary","iconActive","bgGradient","iconImageFilter","light","black","mode","height","position","overflow","transition","display","alignItems","gap","padding","color","backgroundColor","a","content","bottom","left","width","background","flexShrink","transformOrigin","backgroundImage","backgroundSize","backgroundPosition","borderRadius","zIndex","filter","flex","textTransform","fontWeight","fontSize","lineHeight","textAlign","margin","transform","opacity","top","WebkitMaskImage","maskImage","WebkitMaskRepeat","maskRepeat","WebkitMaskSize","maskSize"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"animated-tabs.units.js","sources":["../../src/layout-global/animated-tabs.units.tsx"],"sourcesContent":["import { useCallback, useMemo } from 'react'\r\nimport { Box, Button, styled, Typography } from '@mui/material'\r\nimport type { FC, ReactNode } from 'react'\r\nimport type { ButtonProps, Theme } from '@mui/material'\r\n\r\nexport const IconAudioBase64 = `data:image/webp;base64,UklGRkwEAABXRUJQVlA4WAoAAAAQAAAAdwAAdwAAQUxQSM4DAAABoEXb2iFJ+jKzjLZt27Zt27Zt27Zt27Zt24jM+5BfZPzxR/yrn2ZWREwA/Xdy+ctuYHMU9QRp8D4eQTnZwJ8JUU1aHZwMV0waPZwKUhUORFYVjioLJ8JVhT1hqsJhp2o0HewPU8zkAzo44FLLqJA9OtgeppQJFHZMB3sUQ3REB3uDFBNpvw42+AkqtXBFc1ui4BM6aCmmPQBssiUKOaZzSkis914oY0sUeoI7IaT8H6aPPVHocaa2kBoaM9imKMoaQBvtElL1LzPArogylE9NYu1P/D9f9Lp1Yyip7BvgXUWHgj4CwNsg9WQGm1k9NbmqNpavfGwxFbhythX3GPCjiUNEebvbBu/M6gkAO1Y9ibhVEjiiR7KXeNwS8xId+vFxRbjlAoo2TOfg4soS5Q0A7Lda0DkA0ySrq3n9yWGxA/BuI1dXeLvrWivea2a3S6rOXD0uxoQz++tYIPk75liwVJ24OkzgVQBaU/mScYcDrdMM3mfkS2q9xcwnBS1hvitoIfPVUEDqah0GDu3bonQCh0qCKy554gGvXR6V1WlPi5lvvoR0uA+DniMlnXa0nPniQ7kHELkncTJDybmjQdbpyVzXcczTIPbrMEOJ3jIHA6xQl4ny3qs3F+UkzPbB9ZCZRlJ14xoylHrXh2dDgpgYFyAP5XIDuBMgV3O3l1aGIwoNIP489D1XprSsVKpK1yXPxFHGqesHRCa50v/0ekGGXaug+3d5NifxQZVOCPNZGmr2B3ifw1hpt86VXA7y1dX0h3kJuZXmUZIGtSKR8Z/g1wWR0RSPTYvCzZFA7EDw2wLJePJ7ZtFbppI1wl5wN0hoetOKfgM86wOt0RSsllUMdTCLMoyd19ifrLGBm06CI9/kRgrz2UBVrooZr7nsomg0t1C6ElwRM8B+J+EJuHsO2fy4MBNKcWPF0W8G0tF4AJ4pThOGcllMOM8lls5RY/Wa2mTmEi7AhC1cHunM32jeaq6Q7cw1bzmX03b6c8VN2MHFsZ2c3FITfnAO2yEO4rKBvWhDd7iiwhZzo8l+5nFrXIJivmT+VpShhsYMkabSXwblBC0A+zamDGV+Mz2lcdziPocLqQl+BckY8TVTSBqqz+F6dAHFP+s4paDKXlNI4pscricxVPUn+EEkaZpBI0uQzBm/cfjQ0ulTzLka+PORZJF/kA5wuXlsnUzD30E/A9n2cj3gx5HZg3oPXXYFPrork30HrvLoCfS0cdoYuWaJ02qSzbf4KOhmJrL9pFvdAr6OdZECnfk3/jbwdmoCUmXC9pufcH+uL60Vkf6XMVZQOCBYAAAAEAcAnQEqeAB4AD6RSJ9LpaQioaSIALASCWlu4XEgAqWZ93Pu1keUUni2PHdLNfliQEgJASAkBICQEgJASAkBGAAA/v6knwxv//8VGk/xH3//+MPIwAAAAA==`\r\n\r\nexport const IconVideoBase64 = `data:image/webp;base64,UklGRngCAABXRUJQVlA4WAoAAAAQAAAAdwAAdwAAQUxQSAgCAAABkAXZtmk769nvxbbt5M+2bdvOp23btm3btm0nBzM8r9a5a8WpiogJoP8XB5eZceCMsMfXdkzuxVf4HkS2p4Vz9Tch9e3UPK0APJ/cuVFDURs0H3AEwOUwjtQGcCUTSTzUAKZyDAbexyOZRwMmx1mgLUkNWBwAkok1D+B5GFesLv8AyFyuZHIvheLMBYDpqfTZgW8+ba5NUXx/bXpdtjiA2TlMkztOgItVFbnuDJgeXY1rkcH1elrB2pRKKeBd/yClgGu5tMKH6b5KATfr+SgF7ErlpRTMDr5KASczagVkU+uUWq9zaPWhuFavMmm1h5R6nUSpDclJpRdViFWwWTFJpRuFiVuolz2CSKXD8cmFEj1u5kMaGcvCyZ3i3CxKbvW465GwegaTFrcc2ftykIs9bpOT+x3I1R6X28H0RKQKLfzWtdLkds8L7wngXZ+YpA5R2qoVEpEHSuCpf7nZQGqxVsPmOAH0lCoIsDj6Akgjk9d04CNHHAN4UkyisEU20J+DygOwlg/pLWzfyQ8A7PdnoVbvIfWxuMScb69MrwYGErtv9u5zVsu6ZunI8rHoD8LYBeLpFH4YJ4JUSvwEVoRW0CnRIxjhetRZuvz7Gz8Aa5aLunI8B4TneCabzZGhSdPvd38Nu11TUZvV4HCc6BE+hpPGSZ4CESolfICP4Sr5jn01yVel/+8CVlA4IEoAAACQBgCdASp4AHgAPpFIoUylpCMiIIgAsBIJaW7hdJAAT22IvEgubeI386q8sEbEFRz2xF4gqOe2IvEFRzvAAP7/Uk9vLwAAAAAAAA==`\r\n\r\nexport interface IButtonThemeProps {\r\n forceTheme?: 'dark' | 'light'\r\n}\r\n\r\nexport interface IButtonAnimationProps extends ButtonProps, IButtonThemeProps {\r\n children: ReactNode\r\n startIcon?: ReactNode\r\n [key: string]: any // Allow additional props\r\n}\r\n\r\nexport const ButtonAnimation: FC<IButtonAnimationProps> = (props) => {\r\n const { children, startIcon, className, forceTheme, ...otherProps } = props\r\n\r\n const renderIcon = useCallback(() => {\r\n if (!startIcon) return null\r\n let finalIcon = startIcon\r\n if (typeof startIcon === 'string') {\r\n finalIcon = <Box component='span' className='icon-img' sx={{ '--mask-url': `url(${startIcon})` }} />\r\n }\r\n return <span className='icon-static'>{finalIcon}</span>\r\n }, [startIcon])\r\n\r\n const rootClasses = useMemo(() => {\r\n const classes = ['tab-button']\r\n classes.push(className || '')\r\n return classes.join(' ')\r\n }, [className])\r\n\r\n return (\r\n <ButtonAnimationStyled {...otherProps} className={rootClasses} forceTheme={forceTheme}>\r\n {renderIcon()}\r\n <div className='text-container'>\r\n <Typography variant='h6' className='text text-visible'>\r\n {children}\r\n </Typography>\r\n <Typography variant='h6' className='text text-hidden'>\r\n {children}\r\n </Typography>\r\n </div>\r\n </ButtonAnimationStyled>\r\n )\r\n}\r\n\r\nconst ButtonAnimationStyled = styled(Button, {\r\n shouldForwardProp: (prop: PropertyKey) => prop !== 'forceTheme'\r\n})<IButtonThemeProps>(({ theme, forceTheme }: { theme: Theme; forceTheme?: 'dark' | 'light' }) => {\r\n const sxMap = {\r\n dark: {\r\n primary: theme.palette.common.white,\r\n secondary: 'rgb(249, 169, 37)',\r\n iconActive: 'rgb(249, 169, 37)',\r\n bgGradient: 'linear-gradient(45deg, rgb(211, 47, 47) 0%, rgb(249, 169, 37) 70%, rgb(211, 47, 47) 100%) 0% 0% / 200%',\r\n iconImageFilter: 'invert(1) brightness(2)'\r\n },\r\n light: {\r\n primary: theme.palette.common.black,\r\n secondary: 'rgb(156, 39, 176)',\r\n iconActive: 'rgb(156, 39, 176)',\r\n bgGradient: 'linear-gradient(45deg, rgb(25, 118, 210) 0%, rgb(156, 39, 176) 70%, rgb(25, 118, 210) 100%) 0% 0% / 200%',\r\n iconImageFilter: 'invert(0) brightness(0.2)'\r\n }\r\n }\r\n\r\n const mode = forceTheme || theme.palette.mode\r\n const currentSx = sxMap[mode as keyof typeof sxMap]\r\n\r\n return {\r\n '--color-primary': currentSx.primary,\r\n '--color-secondary': currentSx.secondary,\r\n '--bg-underline': currentSx.bgGradient,\r\n '--bg-icon': currentSx.bgGradient,\r\n '--icon-color-active': currentSx.iconActive,\r\n '--size-icon': '24px',\r\n '--spacing-x-size': '12px',\r\n '--timing-fast': '0.25s',\r\n '--timing-medium': '0.3s',\r\n '--easing-smooth': 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',\r\n '--easing-bounce': 'cubic-bezier(0.34, 1.56, 0.64, 1)',\r\n height: 'var(--height-button, 40px)',\r\n position: 'relative',\r\n overflow: 'hidden',\r\n transition: 'transform 0.2s, box-shadow 0.2s',\r\n display: 'flex',\r\n alignItems: 'center',\r\n gap: '8px',\r\n padding: '6px var(--spacing-x-size)',\r\n color: 'var(--color-primary)',\r\n backgroundColor: 'transparent !important',\r\n\r\n a: {\r\n display: 'flex',\r\n alignItems: 'center'\r\n },\r\n\r\n '&::after': {\r\n content: '\"\"',\r\n position: 'absolute',\r\n bottom: '2px',\r\n left: 'var(--spacing-x-size)',\r\n width: '0',\r\n height: '2px',\r\n background: 'var(--bg-underline)',\r\n transition: 'width var(--timing-fast) var(--easing-smooth)'\r\n },\r\n\r\n '& .icon-static': {\r\n display: 'flex',\r\n alignItems: 'center',\r\n flexShrink: 0,\r\n transition: 'transform var(--timing-medium) var(--easing-bounce)',\r\n transformOrigin: 'left bottom',\r\n position: 'relative',\r\n 'img, svg, .icon-img': { width: 'var(--size-icon)', height: 'var(--size-icon)' },\r\n '.icon-img': {\r\n backgroundImage: `var(--mask-url)`,\r\n backgroundSize: 'cover',\r\n backgroundPosition: 'center',\r\n display: 'block',\r\n borderRadius: 4,\r\n transition: 'filter 0.3s',\r\n position: 'relative',\r\n zIndex: 1,\r\n filter: currentSx.iconImageFilter\r\n }\r\n },\r\n\r\n '& .text-container': { position: 'relative', overflow: 'hidden', flex: 1 },\r\n\r\n '.text': {\r\n textTransform: 'none',\r\n fontWeight: 600,\r\n lineHeight: 1.6,\r\n transformOrigin: 'left bottom'\r\n },\r\n\r\n '& .text-visible, & .text-hidden': {\r\n transition: 'transform var(--timing-medium) var(--easing-smooth)',\r\n display: 'block',\r\n width: '100%',\r\n textAlign: 'left',\r\n margin: 0\r\n },\r\n\r\n '& .text-visible': { transform: 'translateY(0) skewY(0)', opacity: 1 },\r\n\r\n '& .text-hidden': {\r\n position: 'absolute',\r\n top: '50%',\r\n left: '0',\r\n transform: 'translateY(50%) skewY(15deg)',\r\n opacity: 1\r\n },\r\n\r\n '&.active': {\r\n '& .icon-static': {\r\n color: 'var(--icon-color-active)',\r\n '.icon-img': {\r\n background: 'var(--bg-icon)',\r\n WebkitMaskImage: 'var(--mask-url)',\r\n maskImage: 'var(--mask-url)',\r\n WebkitMaskRepeat: 'no-repeat',\r\n maskRepeat: 'no-repeat',\r\n WebkitMaskSize: 'cover',\r\n maskSize: 'cover',\r\n filter: 'none'\r\n }\r\n },\r\n '&::after': { width: 'var(--size-icon)' }\r\n },\r\n '&.inactive': { '&::after': { width: '0' } },\r\n\r\n '&:hover': {\r\n '&::after': { width: 'calc(100% - (var(--spacing-x-size) * 2))' },\r\n '& .icon-static': { transform: 'rotate(-10deg)' },\r\n '& .text-visible': { transform: 'translateY(-100%) skewY(-15deg)', opacity: 1 },\r\n '& .text-hidden': { transform: 'translateY(-50%) skewY(0)', opacity: 1 }\r\n }\r\n }\r\n})\r\n"],"names":["IconAudioBase64","IconVideoBase64","ButtonAnimation","props","children","startIcon","className","forceTheme","otherProps","_objectWithoutProperties","_excluded","renderIcon","useCallback","finalIcon","_jsx","Box","component","sx","concat","rootClasses","useMemo","classes","push","join","_jsxs","ButtonAnimationStyled","_objectSpread","Typography","variant","styled","Button","shouldForwardProp","prop","_ref","theme","currentSx","dark","primary","palette","common","white","secondary","iconActive","bgGradient","iconImageFilter","light","black","mode","height","position","overflow","transition","display","alignItems","gap","padding","color","backgroundColor","a","content","bottom","left","width","background","flexShrink","transformOrigin","backgroundImage","backgroundSize","backgroundPosition","borderRadius","zIndex","filter","flex","textTransform","fontWeight","lineHeight","textAlign","margin","transform","opacity","top","WebkitMaskImage","maskImage","WebkitMaskRepeat","maskRepeat","WebkitMaskSize","maskSize"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{inherits as r,createClass as e,objectSpread2 as n,classCallCheck as i,callSuper as a,defineProperty as o}from"../_virtual/_rollupPluginBabelHelpers.js";import{jsxs as t,jsx as l}from"react/jsx-runtime";import{Component as
|
|
1
|
+
import{inherits as r,createClass as e,objectSpread2 as n,classCallCheck as i,callSuper as a,defineProperty as o}from"../_virtual/_rollupPluginBabelHelpers.js";import{jsxs as t,jsx as l}from"react/jsx-runtime";import{Component as s}from"react";import{CssBaseline as c,Container as m,Grid as p,Typography as d,Divider as h,Box as u,IconButton as v}from"@mui/material";import{AppLogo as f}from"./app-logo.js";import{TextLineBreak as g}from"./ui.units.js";import{AppThemeProvider as N}from"./app-theme-provider.js";import{FooterStyled as k,appFooterClasses as x,AppFooterNav as b}from"./app-footer.styled.js";import{getFooterNavConfigs as C,bgFooterUrl as j,appLogoUrl as y,footerDescription as F,appSocialConfigs as I,copyrightText as L}from"./configs.js";var E=function(){function E(){var r;i(this,E);for(var e=arguments.length,n=new Array(e),t=0;t<e;t++)n[t]=arguments[t];return r=a(this,E,[].concat(n)),o(r,"handleNavItemClick",function(e,n){r.props.onNavItemClick&&n&&r.props.onNavItemClick(e,n)}),r}return r(E,s),e(E,[{key:"render",value:function(){var r,e=this,i=C(this.props.baseUrl);return t(N,n(n({},null===(r=this.props.slots)||void 0===r?void 0:r.themeProps),{},{children:[l(c,{}),t(k,{className:x.root,children:[l("img",{src:j,alt:"Footer Background",className:x.background,loading:"lazy"}),t(m,{maxWidth:!1,className:x.content,children:[t(p,{container:!0,children:[t(p,{item:!0,xs:12,lg:7,children:[l(f,{src:y,href:this.props.baseUrl.home,className:x.appLogo}),l(d,{variant:"subtitle1",className:x.description,children:l(g,{children:F})})]}),l(p,{item:!0,xs:12,lg:5,children:l(b,{children:l(p,{container:!0,children:i.map(function(r,n){return l(p,{item:!0,xs:12,md:6,children:l("ul",{children:r.map(function(r,n){var i,a,o;return l("li",{className:x.navItem,children:l(d,{variant:"h5",className:x.navItemText,component:"a",href:null!==(i=null===(a=r.navLink)||void 0===a?void 0:a.href)&&void 0!==i?i:"/",target:null===(o=r.navLink)||void 0===o?void 0:o.target,onClick:function(n){return e.handleNavItemClick(n,r.navLink)},children:l("span",{children:r.title})})},n)})})},n)})})})})]}),t("div",{className:x.copyright,children:[l(h,{sx:{borderColor:"#1E1E1E",mt:{xs:"20px",md:"80px"}}}),l("ul",{className:x.socialList,children:I.map(function(r,e){var i=n({"--social-color-hover":r.color||"#FFFFFF"},r.sx);return l(u,{component:"li",sx:i,children:l(v,{component:"a",href:r.link,target:"_blank",rel:"noopener noreferrer",children:r.icon})},e)})}),l("div",{className:x.copyrightText,children:l(d,{variant:"subtitle1",noWrap:!0,children:L})})]})]})]})]}))}}])}(),P=function(r){var e=function(e){return l(E,n(n({},r),e))};return e.displayName="AppFooter",e};export{E as AppFooter,P as createAppFooter,E as default};
|
|
2
2
|
//# sourceMappingURL=app-footer.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"app-footer.js","sources":["../../src/layout-global/app-footer.tsx"],"sourcesContent":["import { Component, FC } from 'react'\r\nimport { Box, Container, CssBaseline, Divider, Grid, IconButton, Typography } from '@mui/material'\r\nimport type { SxProps, Theme } from '@mui/material'\r\nimport { AppLogo } from './app-logo'\r\nimport { TextLineBreak } from './ui.units'\r\nimport { AppThemeProvider } from './app-theme-provider'\r\nimport { appFooterClasses, AppFooterNav, FooterStyled } from './app-footer.styled'\r\nimport { getFooterNavConfigs, appSocialConfigs, copyrightText, footerDescription, bgFooterUrl, appLogoUrl } from './configs'\r\nimport type { INavLink, NavItemClickFunction } from './types'\r\nimport type { IAppSiteBaseUrl } from '../types'\r\n\r\nexport interface IAppFooterProps {\r\n baseUrl: IAppSiteBaseUrl\r\n onNavItemClick?: NavItemClickFunction\r\n}\r\n\r\nexport class AppFooter extends Component<IAppFooterProps> {\r\n render() {\r\n // const bgFooterUrl = useMemo(() => getBgFooterUrl(props.baseUrl), [props.baseUrl])\r\n const footerNavConfigs = getFooterNavConfigs(this.props.baseUrl)\r\n\r\n return (\r\n <AppThemeProvider>\r\n {/* The AppThemeProvider provides a consistent theme across the application */}\r\n {/* It uses the light theme with Roboto and Oswald fonts */}\r\n {/* The primary font is Roboto and the secondary font is Oswald */}\r\n {/* The theme is applied globally using MUI's ThemeProvider and CssBaseline */}\r\n <CssBaseline />\r\n <FooterStyled className={appFooterClasses.root}>\r\n <img src={bgFooterUrl} alt='Footer Background' className={appFooterClasses.background} loading='lazy' />\r\n <Container maxWidth={false} className={appFooterClasses.content}>\r\n <Grid container>\r\n <Grid item xs={12} lg={7}>\r\n <AppLogo src={appLogoUrl} href={this.props.baseUrl.home} className={appFooterClasses.appLogo} />\r\n <Typography variant='
|
|
1
|
+
{"version":3,"file":"app-footer.js","sources":["../../src/layout-global/app-footer.tsx"],"sourcesContent":["import { Component, FC } from 'react'\r\nimport { Box, Container, CssBaseline, Divider, Grid, IconButton, Typography } from '@mui/material'\r\nimport type { SxProps, Theme } from '@mui/material'\r\nimport { AppLogo } from './app-logo'\r\nimport { TextLineBreak } from './ui.units'\r\nimport { AppThemeProvider, IAppThemeProviderProps } from './app-theme-provider'\r\nimport { appFooterClasses, AppFooterNav, FooterStyled } from './app-footer.styled'\r\nimport { getFooterNavConfigs, appSocialConfigs, copyrightText, footerDescription, bgFooterUrl, appLogoUrl } from './configs'\r\nimport type { INavLink, NavItemClickFunction } from './types'\r\nimport type { IAppSiteBaseUrl } from '../types'\r\n\r\nexport interface IAppFooterSlots {\r\n themeProps?: Partial<IAppThemeProviderProps>\r\n}\r\n\r\nexport interface IAppFooterProps {\r\n baseUrl: IAppSiteBaseUrl\r\n onNavItemClick?: NavItemClickFunction\r\n slots?: IAppFooterSlots\r\n}\r\n\r\nexport class AppFooter extends Component<IAppFooterProps> {\r\n render() {\r\n // const bgFooterUrl = useMemo(() => getBgFooterUrl(props.baseUrl), [props.baseUrl])\r\n const footerNavConfigs = getFooterNavConfigs(this.props.baseUrl)\r\n\r\n return (\r\n <AppThemeProvider {...this.props.slots?.themeProps}>\r\n {/* The AppThemeProvider provides a consistent theme across the application */}\r\n {/* It uses the light theme with Roboto and Oswald fonts */}\r\n {/* The primary font is Roboto and the secondary font is Oswald */}\r\n {/* The theme is applied globally using MUI's ThemeProvider and CssBaseline */}\r\n <CssBaseline />\r\n <FooterStyled className={appFooterClasses.root}>\r\n <img src={bgFooterUrl} alt='Footer Background' className={appFooterClasses.background} loading='lazy' />\r\n <Container maxWidth={false} className={appFooterClasses.content}>\r\n <Grid container>\r\n <Grid item xs={12} lg={7}>\r\n <AppLogo src={appLogoUrl} href={this.props.baseUrl.home} className={appFooterClasses.appLogo} />\r\n <Typography variant='subtitle1' className={appFooterClasses.description}>\r\n <TextLineBreak>{footerDescription}</TextLineBreak>\r\n </Typography>\r\n </Grid>\r\n <Grid item xs={12} lg={5}>\r\n <AppFooterNav>\r\n <Grid container>\r\n {footerNavConfigs.map((navs, index) => (\r\n <Grid key={index} item xs={12} md={6}>\r\n <ul>\r\n {navs.map((nav, navIndex) => (\r\n <li key={navIndex} className={appFooterClasses.navItem}>\r\n <Typography\r\n variant='h5'\r\n className={appFooterClasses.navItemText}\r\n component='a'\r\n href={nav.navLink?.href ?? '/'}\r\n target={nav.navLink?.target}\r\n onClick={(event) => this.handleNavItemClick(event, nav.navLink)}\r\n >\r\n <span>{nav.title}</span>\r\n </Typography>\r\n </li>\r\n ))}\r\n </ul>\r\n </Grid>\r\n ))}\r\n </Grid>\r\n </AppFooterNav>\r\n </Grid>\r\n </Grid>\r\n <div className={appFooterClasses.copyright}>\r\n <Divider sx={{ borderColor: '#1E1E1E', mt: { xs: '20px', md: '80px' } }} />\r\n <ul className={appFooterClasses.socialList}>\r\n {appSocialConfigs.map((social, index) => {\r\n const sxProps: SxProps<Theme> = { '--social-color-hover': social.color || '#FFFFFF', ...social.sx }\r\n return (\r\n <Box component='li' key={index} sx={sxProps}>\r\n <IconButton component='a' href={social.link} target='_blank' rel='noopener noreferrer'>\r\n {social.icon}\r\n </IconButton>\r\n </Box>\r\n )\r\n })}\r\n </ul>\r\n <div className={appFooterClasses.copyrightText}>\r\n <Typography variant='subtitle1' noWrap>\r\n {copyrightText}\r\n </Typography>\r\n </div>\r\n </div>\r\n </Container>\r\n </FooterStyled>\r\n </AppThemeProvider>\r\n )\r\n }\r\n\r\n handleNavItemClick = (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>, item?: INavLink) => {\r\n if (!this.props.onNavItemClick || !item) return\r\n this.props.onNavItemClick(event, item)\r\n }\r\n}\r\nexport default AppFooter\r\n\r\nexport const createAppFooter = (params: IAppFooterProps): FC<Partial<IAppFooterProps>> => {\r\n const _AppFooter: FC<Partial<IAppFooterProps>> = (props) => <AppFooter {...params} {...props} />\r\n _AppFooter.displayName = 'AppFooter'\r\n return _AppFooter\r\n}\r\n"],"names":["AppFooter","_this","_classCallCheck","_len","arguments","length","args","Array","_key","_callSuper","this","concat","_defineProperty","event","item","props","onNavItemClick","_inherits","Component","_createClass","key","value","_this$props$slots","_this2","footerNavConfigs","getFooterNavConfigs","baseUrl","_jsxs","AppThemeProvider","_objectSpread","slots","themeProps","children","_jsx","CssBaseline","FooterStyled","className","appFooterClasses","root","src","bgFooterUrl","alt","background","loading","Container","maxWidth","content","Grid","container","xs","lg","AppLogo","appLogoUrl","href","home","appLogo","Typography","variant","description","TextLineBreak","footerDescription","AppFooterNav","map","navs","index","md","nav","navIndex","_nav$navLink$href","_nav$navLink","_nav$navLink2","navItem","navItemText","component","navLink","target","onClick","handleNavItemClick","title","copyright","Divider","sx","borderColor","mt","socialList","appSocialConfigs","social","sxProps","color","Box","IconButton","link","rel","icon","copyrightText","noWrap","createAppFooter","params","_AppFooter","displayName"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{objectSpread2 as o,defineProperty as t}from"../_virtual/_rollupPluginBabelHelpers.js";import{jsx as r}from"react/jsx-runtime";import{styled as e,Box as i,colors as
|
|
1
|
+
import{objectSpread2 as o,defineProperty as t}from"../_virtual/_rollupPluginBabelHelpers.js";import{jsx as r}from"react/jsx-runtime";import{styled as e,Box as i,colors as n}from"@mui/material";var a={root:"AppFooter-root",content:"AppFooter-content",background:"AppFooter-background",description:"AppFooter-description",copyright:"AppFooter-copyright",copyrightText:"AppFooter-copyrightText",socialList:"AppFooter-socialList",appLogo:"AppFooter-appLogo",navs:"AppFooter-navs",navItem:"AppFooter-navItem",navItemText:"AppFooter-navItemText"},p=function(o,t){return"".concat((null==t?void 0:t.prefix)||"",".").concat(a[o]).concat((null==t?void 0:t.suffix)||"")},c=e(function(t){return r(i,o({component:"footer"},t))})(function(o){var r=o.theme;return t(t(t(t(t(t({backgroundColor:"var(--color-bg-footer, #141414)",color:"var(--color-text-footer, #ffffff)",position:"relative",paddingTop:"130px",width:"100%","*":{margin:0,padding:0,boxSizing:"border-box"}},p("content"),{maxWidth:"var(--max-width, 1688px)",position:"relative",zIndex:1}),p("background"),{objectFit:"cover",width:"100%",height:"100%",position:"absolute",top:0,left:0,zIndex:0}),p("description"),{marginTop:r.spacing(2),color:"var(--color-text-footer, ".concat(n.grey[400],")"),lineHeight:1.5,textAlign:"left",maxWidth:"500px",marginBottom:r.spacing(4)}),p("copyright"),t({position:"relative"},p("socialList"),t({position:"absolute",top:"50%",left:0,transform:"translateY(-50%)"},r.breakpoints.down("md"),{position:"unset",transform:"none",paddingTop:r.spacing(2.5)}))),p("copyrightText"),{paddingTop:r.spacing(4),paddingBottom:r.spacing(4),width:"100%",".MuiTypography-root":{lineHeight:1,textAlign:"center",color:"var(--color-text-footer, ".concat(n.grey[300],")")}}),p("socialList"),{display:"flex",justifyContent:"center",listStyle:"none","&:hover":{"--social-color":n.grey[600]},li:{margin:r.spacing(0,1),a:{backgroundColor:"rgb(27, 27, 27)",textDecoration:"none",width:"var(--social-icon-size, 40px)",height:"var(--social-icon-size, 40px)",borderRadius:"50%",transition:"all 0.3s ease",color:"var(--social-color, #f0f0f0)","&:hover":{color:"var(--social-color-hover, #ffffff)",transform:"translateY(-3px) scale(1.05)"}}}})}),l=e(function(t){return r(i,o({component:"nav"},t))})(function(o){var r=o.theme;return t({"--bg-divider":"linear-gradient(45deg, rgb(211, 47, 47) 0%, rgb(249, 169, 37) 70%, rgb(211, 47, 47) 100%) 0% 0% / 200%","&:hover":{"--color-text-footer":n.grey[600]}},p("navItem"),t(t(t({position:"relative",backgroundColor:"var(--bg-nav-item, transparent)",transition:"all 0.35s",borderRadius:r.shape.borderRadius},p("navItemText"),{padding:"var(--padding-nav-item-text, ".concat(r.spacing(1,4,1,1.5),")"),color:"var(--color-text-footer, ".concat(n.grey[300],")"),textDecoration:"none",display:"block",width:"100%",transition:"all 0.3s ease",span:{display:"inline-block"}}),"&::before",{content:'""',position:"absolute",left:"14px",top:"50%",transform:"translateY(-50%)",width:0,transition:"all 0.4s",background:"var(--bg-divider)",height:"2px"}),"&:hover",{"--color-text-footer":n.common.white,"--padding-nav-item-text":r.spacing(1,1.5,1,4),backgroundColor:"var(--bg-nav-item-hover, rgba(249, 169, 37, 0.1))","&::before":{width:r.spacing(1.5),marginRight:r.spacing(1)}}))});export{l as AppFooterNav,c as FooterStyled,a as appFooterClasses,p as getAppFooterClasses};
|
|
2
2
|
//# sourceMappingURL=app-footer.styled.js.map
|