devextreme-cli 1.3.2 → 1.3.3

package/src/templates/react/application/src/UnauthenticatedContent.tsx

@@ -0,0 +1,46 @@
+import { Routes, Route, Navigate } from 'react-router-dom';
+import { SingleCard } from './layouts';
+import { LoginForm, ResetPasswordForm, ChangePasswordForm, CreateAccountForm } from './components';
+
+export default function UnauthenticatedContent() {
+  return (
+    <Routes>
+      <Route
+        path='/login' 
+        element={
+          <SingleCard title="Sign In">
+            <LoginForm />
+          </SingleCard>
+        }
+      />
+      <Route
+        path='/create-account'
+        element={
+          <SingleCard title="Sign Up">
+            <CreateAccountForm />
+          </SingleCard>
+        }
+      />
+      <Route 
+        path='/reset-password'
+        element={
+          <SingleCard
+            title="Reset Password"
+            description="Please enter the email address that you used to register, and we will send you a link to reset your password via Email."
+          >
+            <ResetPasswordForm />
+          </SingleCard>
+        }
+      />
+      <Route
+        path='/change-password/:recoveryCode'
+        element={
+          <SingleCard title="Change Password">
+            <ChangePasswordForm />
+          </SingleCard>
+        }
+      />
+      <Route path='*' element={<Navigate to={'/login'} />}></Route>
+    </Routes>
+  );
+}

package/src/templates/react/application/src/api/{auth.js → auth.tsx}

@@ -1,6 +1,6 @@
 import defaultUser from '../utils/default-user';
 
-export async function signIn(email, password) {
+export async function signIn(email<%=#isTypeScript%>: string<%=/isTypeScript%>, password<%=#isTypeScript%>: string<%=/isTypeScript%>) {
   try {
     // Send request
     console.log(email, password);
@@ -34,7 +34,7 @@ export async function getUser() {
   }
 }
 
-export async function createAccount(email, password) {
+export async function createAccount(email<%=#isTypeScript%>: string<%=/isTypeScript%>, password<%=#isTypeScript%>: string<%=/isTypeScript%>) {
   try {
     // Send request
     console.log(email, password);
@@ -51,7 +51,7 @@ export async function createAccount(email, password) {
   }
 }
 
-export async function changePassword(email, recoveryCode) {
+export async function changePassword(email<%=#isTypeScript%>: string<%=/isTypeScript%>, recoveryCode<%=#isTypeScript%>?: string<%=/isTypeScript%>) {
   try {
     // Send request
     console.log(email, recoveryCode);
@@ -68,7 +68,7 @@ export async function changePassword(email, recoveryCode) {
   }
 }
 
-export async function resetPassword(email) {
+export async function resetPassword(email<%=#isTypeScript%>: string<%=/isTypeScript%>) {
   try {
     // Send request
     console.log(email);

package/src/templates/react/application/src/app-routes.tsx

@@ -0,0 +1,24 @@
+import { HomePage, TasksPage, ProfilePage } from './pages';
+import { withNavigationWatcher } from './contexts/navigation';
+
+const routes = [<%=^empty%>
+    {
+        path: '/tasks',
+        element: TasksPage
+    },
+    {
+        path: '/profile',
+        element: ProfilePage
+    },
+    {
+        path: '/home',
+        element: HomePage
+    }
+<%=/empty%>];
+
+export default routes.map(route => {
+    return {
+        ...route,
+        element: withNavigationWatcher(route.element, route.path)
+    };
+});

package/src/templates/react/application/src/components/change-password-form/{change-password-form.js → ChangePasswordForm.tsx}

@@ -1,5 +1,5 @@
 import React, { useState, useRef, useCallback } from 'react';
-import { useHistory, useParams } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 import Form, {
   Item,
   Label,
@@ -12,10 +12,10 @@ import LoadIndicator from 'devextreme-react/load-indicator';
 import notify from 'devextreme/ui/notify';
 import { changePassword } from '../../api/auth';
 
-export default function ChangePasswordForm(props) {
-  const history = useHistory();
+export default function ChangePasswordForm() {
+  const navigate = useNavigate();
   const [loading, setLoading] = useState(false);
-  const formData = useRef({});
+  const formData = useRef({ password: '' });
   const { recoveryCode } = useParams();
 
   const onSubmit = useCallback(async (e) => {
@@ -27,11 +27,11 @@ export default function ChangePasswordForm(props) {
     setLoading(false);
 
     if (result.isOk) {
-      history.push('/login');
+      navigate('/login');
     } else {
       notify(result.message, 'error', 2000);
     }
-  }, [history, recoveryCode]);
+  }, [navigate, recoveryCode]);
 
   const confirmPassword = useCallback(
     ({ value }) => value === formData.current.password,

package/src/templates/react/application/src/components/create-account-form/{create-account-form.js → CreateAccountForm.tsx}

@@ -1,5 +1,5 @@
 import React, { useState, useRef, useCallback } from 'react';
-import { Link, useHistory } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import Form, {
   Item,
   Label,
@@ -12,12 +12,12 @@ import Form, {
 import notify from 'devextreme/ui/notify';
 import LoadIndicator from 'devextreme-react/load-indicator';
 import { createAccount } from '../../api/auth';
-import './create-account-form.scss';
+import './CreateAccountForm.scss';
 
-export default function CreateAccountForm(props) {
-  const history = useHistory();
+export default function CreateAccountForm() {
+  const navigate = useNavigate();
   const [loading, setLoading] = useState(false);
-  const formData = useRef({});
+  const formData = useRef({ email: '', password: '' });
 
   const onSubmit = useCallback(async (e) => {
     e.preventDefault();
@@ -28,11 +28,11 @@ export default function CreateAccountForm(props) {
     setLoading(false);
 
     if (result.isOk) {
-      history.push('/login');
+      navigate('/login');
     } else {
       notify(result.message, 'error', 2000);
     }
-  }, [history]);
+  }, [navigate]);
 
   const confirmPassword = useCallback(
     ({ value }) => value === formData.current.password,

package/src/templates/react/application/src/components/footer/{footer.js → Footer.tsx}

@@ -1,5 +1,5 @@
 import React from 'react';
-import './footer.scss';
+import './Footer.scss';
 
 export default function Footer({ ...rest }) {
   return <footer className={'footer'} {...rest} />;

package/src/templates/react/application/src/components/header/{header.js → Header.tsx}

@@ -1,11 +1,12 @@
 import React from 'react';
 import Toolbar, { Item } from 'devextreme-react/toolbar';
 import Button from 'devextreme-react/button';
-import UserPanel from '../user-panel/user-panel';
-import './header.scss';
+import UserPanel from '../user-panel/UserPanel';
+import './Header.scss';
 import { Template } from 'devextreme-react/core/template';
+<%=#isTypeScript%>import type { HeaderProps } from '../../types';<%=/isTypeScript%>
 
-export default function Header({ menuToggleEnabled, title, toggleMenu }) {
+export default function Header({ menuToggleEnabled, title, toggleMenu }<%=#isTypeScript%>: HeaderProps<%=/isTypeScript%>) {
   return (
     <header className={'header-component'}>
       <Toolbar className={'header-toolbar'}>

package/src/templates/react/application/src/components/index.tsx

@@ -0,0 +1,7 @@
+export { default as Header } from './header/Header';
+export { default as Footer } from './footer/Footer';
+export { default as LoginForm } from './login-form/LoginForm';
+export { default as ResetPasswordForm } from './reset-password-form/ResetPasswordForm';
+export { default as CreateAccountForm } from './create-account-form/CreateAccountForm';
+export { default as ChangePasswordForm } from './change-password-form/ChangePasswordForm';
+export { default as SideNavigationMenu } from './side-navigation-menu/SideNavigationMenu';

package/src/templates/react/application/src/components/login-form/{login-form.js → LoginForm.tsx}

@@ -1,5 +1,5 @@
 import React, { useState, useRef, useCallback } from 'react';
-import { Link, useHistory } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import Form, {
   Item,
   Label,
@@ -12,13 +12,13 @@ import LoadIndicator from 'devextreme-react/load-indicator';
 import notify from 'devextreme/ui/notify';
 import { useAuth } from '../../contexts/auth';
 
-import './login-form.scss';
+import './LoginForm.scss';
 
 export default function LoginForm() {
-  const history = useHistory();
+  const navigate = useNavigate();
   const { signIn } = useAuth();
   const [loading, setLoading] = useState(false);
-  const formData = useRef({});
+  const formData = useRef({ email: '', password: '' });
 
   const onSubmit = useCallback(async (e) => {
     e.preventDefault();
@@ -33,8 +33,8 @@ export default function LoginForm() {
   }, [signIn]);
 
   const onCreateAccountClick = useCallback(() => {
-    history.push('/create-account');
-  }, [history]);
+    navigate('/create-account');
+  }, [navigate]);
 
   return (
     <form className={'login-form'} onSubmit={onSubmit}>

package/src/templates/react/application/src/components/reset-password-form/{reset-password-form.js → ResetPasswordForm.tsx}

@@ -1,5 +1,5 @@
 import React, { useState, useRef, useCallback } from 'react';
-import { Link, useHistory } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import Form, {
   Item,
   Label,
@@ -11,14 +11,14 @@ import Form, {
 import LoadIndicator from 'devextreme-react/load-indicator';
 import notify from 'devextreme/ui/notify';
 import { resetPassword } from '../../api/auth';
-import './reset-password-form.scss';
+import './ResetPasswordForm.scss';
 
 const notificationText = 'We\'ve sent a link to reset your password. Check your inbox.';
 
-export default function ResetPasswordForm(props) {
-  const history = useHistory();
+export default function ResetPasswordForm() {
+  const navigate = useNavigate();
   const [loading, setLoading] = useState(false);
-  const formData = useRef({});
+  const formData = useRef({ email: '', password: '' });
 
   const onSubmit = useCallback(async (e) => {
     e.preventDefault();
@@ -29,12 +29,12 @@ export default function ResetPasswordForm(props) {
     setLoading(false);
 
     if (result.isOk) {
-      history.push('/login');
+      navigate('/login');
       notify(notificationText, 'success', 2500);
     } else {
       notify(result.message, 'error', 2000);
     }
-  }, [history]);
+  }, [navigate]);
 
   return (
     <form className={'reset-password-form'} onSubmit={onSubmit}>

package/src/templates/react/application/src/components/side-navigation-menu/{side-navigation-menu.js → SideNavigationMenu.tsx}

@@ -3,11 +3,12 @@ import TreeView from 'devextreme-react/tree-view';
 import { navigation } from '../../app-navigation';
 import { useNavigation } from '../../contexts/navigation';
 import { useScreenSize } from '../../utils/media-query';
-import './side-navigation-menu.scss';
+import './SideNavigationMenu.scss';
+<%=#isTypeScript%>import type { SideNavigationMenuProps } from '../../types';<%=/isTypeScript%>
 
 import * as events from 'devextreme/events';
 
-export default function SideNavigationMenu(props) {
+export default function SideNavigationMenu(props<%=#isTypeScript%>: React.PropsWithChildren<SideNavigationMenuProps><%=/isTypeScript%>) {
   const {
     children,
     selectedItemChanged,
@@ -18,12 +19,9 @@ export default function SideNavigationMenu(props) {
 
   const { isLarge } = useScreenSize();
   function normalizePath () {
-    return navigation.map((item) => {
-      if(item.path && !(/^\//.test(item.path))){
-        item.path = `/${item.path}`;
-      }
-      return {...item, expanded: isLarge};
-    });
+    return navigation.map((item) => (
+      { ...item, expanded: isLarge, path: item.path && !(/^\//.test(item.path)) ? `/${item.path}` : item.path }
+    ))
   }
 
   const items = useMemo(
@@ -34,7 +32,7 @@ export default function SideNavigationMenu(props) {
 
   const { navigationData: { currentPath } } = useNavigation();
 
-  const treeViewRef = useRef();
+  const treeViewRef = useRef<%=#isTypeScript%><TreeView><%=/isTypeScript%>(null);
   const wrapperRef = useRef();
   const getWrapperRef = useCallback((element) => {
     const prevElement = wrapperRef.current;
@@ -43,7 +41,7 @@ export default function SideNavigationMenu(props) {
     }
 
     wrapperRef.current = element;
-    events.on(element, 'dxclick', e => {
+    events.on(element, 'dxclick', (e<%=#isTypeScript%>: React.PointerEvent<%=/isTypeScript%>) => {
       openMenu(e);
     });
   }, [openMenu]);

package/src/templates/react/application/src/components/user-panel/{user-panel.js → UserPanel.tsx}

@@ -1,16 +1,17 @@
 import React, { useMemo } from 'react';
-import { useHistory } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import ContextMenu, { Position } from 'devextreme-react/context-menu';
 import List from 'devextreme-react/list';
 import { useAuth } from '../../contexts/auth';
-import './user-panel.scss';
+import './UserPanel.scss';
+<%=#isTypeScript%>import type { UserPanelProps } from '../../types';<%=/isTypeScript%>
 
-export default function UserPanel({ menuMode }) {
+export default function UserPanel({ menuMode }<%=#isTypeScript%>: UserPanelProps<%=/isTypeScript%>) {
   const { user, signOut } = useAuth();
-  const history = useHistory();
+  const navigate = useNavigate();
 
   function navigateToProfile() {
-    history.push("/profile");
+    navigate("/profile");
   }
   const menuItems = useMemo(() => ([
     {
@@ -24,19 +25,18 @@ export default function UserPanel({ menuMode }) {
       onClick: signOut
     }
   ]), [signOut]);
-
   return (
     <div className={'user-panel'}>
       <div className={'user-info'}>
         <div className={'image-container'}>
           <div
             style={{
-              background: `url(${user.avatarUrl}) no-repeat #fff`,
+              background: `url(${user<%=#isTypeScript%>!<%=/isTypeScript%>.avatarUrl}) no-repeat #fff`,
               backgroundSize: 'cover'
             }}
             className={'user-image'} />
         </div>
-        <div className={'user-name'}>{user.email}</div>
+        <div className={'user-name'}>{user<%=#isTypeScript%>!<%=/isTypeScript%>.email}</div>
       </div>
 
       {menuMode === 'context' && (

package/src/templates/react/application/src/contexts/{auth.js → auth.tsx}

@@ -1,8 +1,9 @@
 import React, { useState, useEffect, createContext, useContext, useCallback } from 'react';
 import { getUser, signIn as sendSignInRequest } from '../api/auth';
+<%=#isTypeScript%>import type { User, AuthContextType } from '../types';<%=/isTypeScript%>
 
-function AuthProvider(props) {
-  const [user, setUser] = useState();
+function AuthProvider(props<%=#isTypeScript%>: React.PropsWithChildren<unknown><%=/isTypeScript%>) {
+  const [user, setUser] = useState<%=#isTypeScript%><User><%=/isTypeScript%>();
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
@@ -16,7 +17,7 @@ function AuthProvider(props) {
     })();
   }, []);
 
-  const signIn = useCallback(async (email, password) => {
+  const signIn = useCallback(async (email<%=#isTypeScript%>: string<%=/isTypeScript%>, password<%=#isTypeScript%>: string<%=/isTypeScript%>) => {
     const result = await sendSignInRequest(email, password);
     if (result.isOk) {
       setUser(result.data);
@@ -26,7 +27,7 @@ function AuthProvider(props) {
   }, []);
 
   const signOut = useCallback(() => {
-    setUser();
+    setUser(undefined);
   }, []);
 
 
@@ -35,7 +36,7 @@ function AuthProvider(props) {
   );
 }
 
-const AuthContext = createContext({});
+const AuthContext = createContext<%=#isTypeScript%><AuthContextType><%=/isTypeScript%>({ loading: false }<%=#isTypeScript%> as AuthContextType<%=/isTypeScript%>);
 const useAuth = () => useContext(AuthContext);
 
 export { AuthProvider, useAuth }

package/src/templates/react/application/src/contexts/navigation.tsx

@@ -0,0 +1,35 @@
+import React, { useState, createContext, useContext, useEffect } from 'react';
+<%=#isTypeScript%>import type { NavigationContextType } from '../types';<%=/isTypeScript%>
+
+const NavigationContext = createContext<%=#isTypeScript%><NavigationContextType><%=/isTypeScript%>({}<%=#isTypeScript%> as NavigationContextType<%=/isTypeScript%>);
+const useNavigation = () => useContext(NavigationContext);
+
+function NavigationProvider(props<%=#isTypeScript%>: React.PropsWithChildren<unknown><%=/isTypeScript%>) {
+  const [navigationData, setNavigationData] = useState({ currentPath: '' });
+
+  return (
+    <NavigationContext.Provider
+      value={{ navigationData, setNavigationData }}
+      {...props}
+    />
+  );
+}
+
+function withNavigationWatcher(Component<%=#isTypeScript%>: React.ElementType<%=/isTypeScript%>, path<%=#isTypeScript%>: string<%=/isTypeScript%>) {
+  const WrappedComponent = function (props<%=#isTypeScript%>: unknown<%=/isTypeScript%>) {
+    const { setNavigationData } = useNavigation();
+
+    useEffect(() => {
+      setNavigationData<%=#isTypeScript%>!<%=/isTypeScript%>({ currentPath: path });
+    }, [path, setNavigationData]);
+
+    return <Component {...props} />;
+  }
+  return <WrappedComponent />;
+}
+
+export {
+  NavigationProvider,
+  useNavigation,
+  withNavigationWatcher
+}

package/src/templates/react/application/src/layouts/side-nav-inner-toolbar/{side-nav-inner-toolbar.js → side-nav-inner-toolbar.tsx}

@@ -3,16 +3,17 @@ import Drawer from 'devextreme-react/drawer';
 import ScrollView from 'devextreme-react/scroll-view';
 import Toolbar, { Item } from 'devextreme-react/toolbar';
 import React, { useState, useCallback, useRef } from 'react';
-import { useHistory } from 'react-router';
+import { useNavigate } from 'react-router';
 import { Header, SideNavigationMenu, Footer } from '../../components';
 import './side-nav-inner-toolbar.scss';
 import { useScreenSize } from '../../utils/media-query';
 import { Template } from 'devextreme-react/core/template';
 import { useMenuPatch } from '../../utils/patches';
+<%=#isTypeScript%>import type { SideNavToolbarProps } from '../../types';<%=/isTypeScript%>
 
-export default function SideNavInnerToolbar({ title, children }) {
-  const scrollViewRef = useRef();
-  const history = useHistory();
+export default function SideNavInnerToolbar({ title, children }<%=#isTypeScript%>: React.PropsWithChildren<SideNavToolbarProps><%=/isTypeScript%>) {
+  const scrollViewRef = useRef<%=#isTypeScript%><ScrollView><%=/isTypeScript%>(null);
+  const navigate = useNavigate();
   const { isXSmall, isLarge } = useScreenSize();
   const [patchCssClass, onMenuReady] = useMenuPatch();
   const [menuStatus, setMenuStatus] = useState(
@@ -42,6 +43,7 @@ export default function SideNavInnerToolbar({ title, children }) {
         ? MenuStatus.Closed
         : prevMenuStatus
     );
+    return true;
   }, [isLarge]);
 
   const onNavigationChanged = useCallback(({ itemData: { path }, event, node }) => {
@@ -50,14 +52,14 @@ export default function SideNavInnerToolbar({ title, children }) {
       return;
     }
 
-    history.push(path);
-    scrollViewRef.current.instance.scrollTo(0);
+    navigate(path);
+    scrollViewRef.current<%=#isTypeScript%>?<%=/isTypeScript%>.instance.scrollTo(0);
 
     if (!isLarge || menuStatus === MenuStatus.TemporaryOpened) {
       setMenuStatus(MenuStatus.Closed);
       event.stopPropagation();
     }
-  }, [history, menuStatus, isLarge]);
+  }, [navigate, menuStatus, isLarge]);
 
   return (
     <div className={'side-nav-inner-toolbar'}>
@@ -80,12 +82,12 @@ export default function SideNavInnerToolbar({ title, children }) {
           />
           <ScrollView ref={scrollViewRef} className={'layout-body with-footer'}>
             <div className={'content'}>
-              {React.Children.map(children, item => {
+              {React.Children.map(children, (item<%=#isTypeScript%>: any<%=/isTypeScript%>) => {
                 return item.type !== Footer && item;
               })}
             </div>
             <div className={'content-block'}>
-              {React.Children.map(children, item => {
+              {React.Children.map(children, (item<%=#isTypeScript%>: any<%=/isTypeScript%>) => {
                 return item.type === Footer && item;
               })}
             </div>
@@ -122,3 +124,4 @@ const MenuStatus = {
   Opened: 2,
   TemporaryOpened: 3
 };
+

package/src/templates/react/application/src/layouts/side-nav-outer-toolbar/{side-nav-outer-toolbar.js → side-nav-outer-toolbar.tsx}

@@ -1,16 +1,17 @@
 import Drawer from 'devextreme-react/drawer';
 import ScrollView from 'devextreme-react/scroll-view';
 import React, { useState, useCallback, useRef } from 'react';
-import { useHistory } from 'react-router';
+import { useNavigate } from 'react-router';
 import { Header, SideNavigationMenu, Footer } from '../../components';
 import './side-nav-outer-toolbar.scss';
 import { useScreenSize } from '../../utils/media-query';
 import { Template } from 'devextreme-react/core/template';
 import { useMenuPatch } from '../../utils/patches';
+<%=#isTypeScript%>import type { SideNavToolbarProps } from '../../types';<%=/isTypeScript%>
 
-export default function SideNavOuterToolbar({ title, children }) {
-  const scrollViewRef = useRef();
-  const history = useHistory();
+export default function SideNavOuterToolbar({ title, children }<%=#isTypeScript%>: React.PropsWithChildren<SideNavToolbarProps><%=/isTypeScript%>) {
+  const scrollViewRef = useRef<%=#isTypeScript%><ScrollView><%=/isTypeScript%>(null);
+  const navigate = useNavigate();
   const { isXSmall, isLarge } = useScreenSize();
   const [patchCssClass, onMenuReady] = useMenuPatch();
   const [menuStatus, setMenuStatus] = useState(
@@ -40,6 +41,7 @@ export default function SideNavOuterToolbar({ title, children }) {
         ? MenuStatus.Closed
         : prevMenuStatus
     );
+    return true;
   }, [isLarge]);
 
   const onNavigationChanged = useCallback(({ itemData: { path }, event, node }) => {
@@ -48,19 +50,18 @@ export default function SideNavOuterToolbar({ title, children }) {
       return;
     }
 
-    history.push(path);
-    scrollViewRef.current.instance.scrollTo(0);
+    navigate(path);
+    scrollViewRef.current<%=#isTypeScript%>?<%=/isTypeScript%>.instance.scrollTo(0);
 
     if (!isLarge || menuStatus === MenuStatus.TemporaryOpened) {
       setMenuStatus(MenuStatus.Closed);
       event.stopPropagation();
     }
-  }, [history, menuStatus, isLarge]);
+  }, [navigate, menuStatus, isLarge]);
 
   return (
     <div className={'side-nav-outer-toolbar'}>
       <Header
-        className={'layout-header'}
         menuToggleEnabled
         toggleMenu={toggleMenu}
         title={title}
@@ -80,12 +81,12 @@ export default function SideNavOuterToolbar({ title, children }) {
         <div className={'container'}>
           <ScrollView ref={scrollViewRef} className={'layout-body with-footer'}>
             <div className={'content'}>
-              {React.Children.map(children, item => {
+              {React.Children.map(children, (item<%=#isTypeScript%>: any<%=/isTypeScript%>) => {
                 return item.type !== Footer && item;
               })}
             </div>
             <div className={'content-block'}>
-              {React.Children.map(children, item => {
+              {React.Children.map(children, (item<%=#isTypeScript%>: any<%=/isTypeScript%>) => {
                 return item.type === Footer && item;
               })}
             </div>

package/src/templates/react/application/src/layouts/single-card/{single-card.js → single-card.tsx}

@@ -1,8 +1,9 @@
 import React from 'react';
 import ScrollView from 'devextreme-react/scroll-view';
 import './single-card.scss';
+<%=#isTypeScript%>import type { SingleCardProps } from '../../types';<%=/isTypeScript%>
 
-export default function SingleCard({ title, description, children }) {
+export default function SingleCard({ title, description, children }<%=#isTypeScript%>: React.PropsWithChildren<SingleCardProps><%=/isTypeScript%>) {
   return (
     <ScrollView height={'100%'} width={'100%'} className={'with-footer single-card'}>
       <div className={'dx-card content'}>