@soyfri/template 1.0.0 → 1.0.3

package/dist/partials/layout/search/SearchInner.js

@@ -1,37 +1,11 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
+import React, { useState } from 'react';
+import { KTIcon } from '../../../helpers';
+const SearchInner = () => {
+    const [search, setSearch] = useState('');
+    return (React.createElement("div", { "data-kt-search-element": 'content', "data-kt-menu": 'true', className: 'menu menu-sub menu-sub-dropdown p-7 w-325px w-md-375px' },
+        React.createElement("div", { "data-kt-search-element": 'wrapper' },
+            React.createElement("form", { "data-kt-search-element": 'form', className: 'w-100 position-relative mb-3', autoComplete: 'off' },
+                React.createElement(KTIcon, { iconName: 'magnifier', className: 'fs-2 text-lg-1 text-gray-500 position-absolute top-50 translate-middle-y ms-0' }),
+                React.createElement("input", { type: 'text', className: 'form-control form-control-flush ps-10', name: 'search', value: search, placeholder: 'Search...', "data-kt-search-element": 'input', onChange: (e) => setSearch(e.target.value) })))));
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SearchInner = void 0;
-var react_1 = __importStar(require("react"));
-var helpers_1 = require("../../../helpers");
-var SearchInner = function () {
-    var _a = (0, react_1.useState)(''), search = _a[0], setSearch = _a[1];
-    return (react_1.default.createElement("div", { "data-kt-search-element": 'content', "data-kt-menu": 'true', className: 'menu menu-sub menu-sub-dropdown p-7 w-325px w-md-375px' },
-        react_1.default.createElement("div", { "data-kt-search-element": 'wrapper' },
-            react_1.default.createElement("form", { "data-kt-search-element": 'form', className: 'w-100 position-relative mb-3', autoComplete: 'off' },
-                react_1.default.createElement(helpers_1.KTIcon, { iconName: 'magnifier', className: 'fs-2 text-lg-1 text-gray-500 position-absolute top-50 translate-middle-y ms-0' }),
-                react_1.default.createElement("input", { type: 'text', className: 'form-control form-control-flush ps-10', name: 'search', value: search, placeholder: 'Search...', "data-kt-search-element": 'input', onChange: function (e) { return setSearch(e.target.value); } })))));
-};
-exports.SearchInner = SearchInner;
+export { SearchInner };

package/dist/partials/layout/theme-mode/ThemeModeProvider.js

@@ -1,102 +1,70 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.themeModeSwitchHelper = exports.systemMode = exports.useThemeMode = exports.ThemeModeProvider = exports.themeMenuModeLSKey = exports.themeModelSKey = void 0;
-var react_1 = __importStar(require("react"));
-var layout_1 = require("../../../assets/ts/layout");
-var helpers_1 = require("../../../helpers");
-exports.themeModelSKey = 'kt_theme_mode_value';
-exports.themeMenuModeLSKey = 'kt_theme_mode_menu';
-var systemMode = layout_1.ThemeModeComponent.getSystemMode();
-exports.systemMode = systemMode;
-var themeModeSwitchHelper = function (_mode) {
+import React, { createContext, useContext, useEffect, useState } from 'react';
+import { ThemeModeComponent } from '../../../assets/ts/layout';
+import { toAbsoluteUrl } from '../../../helpers';
+export const themeModelSKey = 'kt_theme_mode_value';
+export const themeMenuModeLSKey = 'kt_theme_mode_menu';
+const systemMode = ThemeModeComponent.getSystemMode();
+const themeModeSwitchHelper = (_mode) => {
     // change background image url
-    var mode = _mode !== 'system' ? _mode : systemMode;
-    var imageUrl = 'media/patterns/header-bg' + (mode === 'light' ? '.jpg' : '-dark.jpg');
-    document.body.style.backgroundImage = "url(\"".concat((0, helpers_1.toAbsoluteUrl)(imageUrl), "\")");
+    const mode = _mode !== 'system' ? _mode : systemMode;
+    const imageUrl = 'media/patterns/header-bg' + (mode === 'light' ? '.jpg' : '-dark.jpg');
+    document.body.style.backgroundImage = `url("${toAbsoluteUrl(imageUrl)}")`;
 };
-exports.themeModeSwitchHelper = themeModeSwitchHelper;
-var getThemeModeFromLocalStorage = function (lsKey) {
+const getThemeModeFromLocalStorage = (lsKey) => {
     if (!localStorage) {
         return 'light';
     }
-    var data = localStorage.getItem(lsKey);
+    const data = localStorage.getItem(lsKey);
     if (data === 'dark' || data === 'light' || data === 'system') {
         return data;
     }
     if (document.documentElement.hasAttribute('data-bs-theme')) {
-        var dataTheme = document.documentElement.getAttribute('data-bs-theme');
+        const dataTheme = document.documentElement.getAttribute('data-bs-theme');
         if (dataTheme && (dataTheme === 'dark' || dataTheme === 'light' || dataTheme === 'system')) {
             return dataTheme;
         }
     }
     return 'system';
 };
-var defaultThemeMode = {
-    mode: getThemeModeFromLocalStorage(exports.themeModelSKey),
-    menuMode: getThemeModeFromLocalStorage(exports.themeMenuModeLSKey),
-    updateMode: function (_mode) { },
-    updateMenuMode: function (_menuMode) { },
+const defaultThemeMode = {
+    mode: getThemeModeFromLocalStorage(themeModelSKey),
+    menuMode: getThemeModeFromLocalStorage(themeMenuModeLSKey),
+    updateMode: (_mode) => { },
+    updateMenuMode: (_menuMode) => { },
 };
-var ThemeModeContext = (0, react_1.createContext)({
+const ThemeModeContext = createContext({
     mode: defaultThemeMode.mode,
     menuMode: defaultThemeMode.menuMode,
-    updateMode: function (_mode) { },
-    updateMenuMode: function (_menuMode) { },
+    updateMode: (_mode) => { },
+    updateMenuMode: (_menuMode) => { },
 });
-var useThemeMode = function () { return (0, react_1.useContext)(ThemeModeContext); };
-exports.useThemeMode = useThemeMode;
-var ThemeModeProvider = function (_a) {
-    var children = _a.children;
-    var _b = (0, react_1.useState)(defaultThemeMode.mode), mode = _b[0], setMode = _b[1];
-    var _c = (0, react_1.useState)(defaultThemeMode.menuMode), menuMode = _c[0], setMenuMode = _c[1];
-    var updateMode = function (_mode, saveInLocalStorage) {
-        if (saveInLocalStorage === void 0) { saveInLocalStorage = true; }
+const useThemeMode = () => useContext(ThemeModeContext);
+const ThemeModeProvider = ({ children }) => {
+    const [mode, setMode] = useState(defaultThemeMode.mode);
+    const [menuMode, setMenuMode] = useState(defaultThemeMode.menuMode);
+    const updateMode = (_mode, saveInLocalStorage = true) => {
         setMode(_mode);
         // themeModeSwitchHelper(updatedMode)
         if (saveInLocalStorage && localStorage) {
-            localStorage.setItem(exports.themeModelSKey, _mode);
+            localStorage.setItem(themeModelSKey, _mode);
         }
         if (saveInLocalStorage) {
-            var updatedMode = _mode === 'system' ? systemMode : _mode;
+            const updatedMode = _mode === 'system' ? systemMode : _mode;
             document.documentElement.setAttribute('data-bs-theme', updatedMode);
         }
-        layout_1.ThemeModeComponent.init();
+        ThemeModeComponent.init();
     };
-    var updateMenuMode = function (_menuMode, saveInLocalStorage) {
-        if (saveInLocalStorage === void 0) { saveInLocalStorage = true; }
+    const updateMenuMode = (_menuMode, saveInLocalStorage = true) => {
         setMenuMode(_menuMode);
         if (saveInLocalStorage && localStorage) {
-            localStorage.setItem(exports.themeMenuModeLSKey, _menuMode);
+            localStorage.setItem(themeMenuModeLSKey, _menuMode);
         }
     };
-    (0, react_1.useEffect)(function () {
+    useEffect(() => {
         updateMode(mode, false);
         updateMenuMode(menuMode, false);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    return (react_1.default.createElement(ThemeModeContext.Provider, { value: { mode: mode, menuMode: menuMode, updateMode: updateMode, updateMenuMode: updateMenuMode } }, children));
+    return (React.createElement(ThemeModeContext.Provider, { value: { mode, menuMode, updateMode, updateMenuMode } }, children));
 };
-exports.ThemeModeProvider = ThemeModeProvider;
+export { ThemeModeProvider, useThemeMode, systemMode, themeModeSwitchHelper };

package/dist/partials/layout/theme-mode/ThemeModeSwitcher.js

@@ -1,42 +1,35 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ThemeModeSwitcher = void 0;
-var clsx_1 = __importDefault(require("clsx"));
-var helpers_1 = require("../../../helpers");
-var layout_1 = require("../../../assets/ts/layout");
-var ThemeModeProvider_1 = require("./ThemeModeProvider");
-var react_1 = __importDefault(require("react"));
-var systemMode = layout_1.ThemeModeComponent.getSystemMode();
-var ThemeModeSwitcher = function (_a) {
-    var _b = _a.toggleBtnClass, toggleBtnClass = _b === void 0 ? '' : _b, _c = _a.toggleBtnIconClass, toggleBtnIconClass = _c === void 0 ? 'fs-1' : _c, _d = _a.menuPlacement, menuPlacement = _d === void 0 ? 'bottom-end' : _d, _e = _a.menuTrigger, menuTrigger = _e === void 0 ? "{default: 'click', lg: 'hover'}" : _e;
-    var _f = (0, ThemeModeProvider_1.useThemeMode)(), mode = _f.mode, menuMode = _f.menuMode, updateMode = _f.updateMode, updateMenuMode = _f.updateMenuMode;
-    var calculatedMode = mode === 'system' ? systemMode : mode;
-    var switchMode = function (_mode) {
+import clsx from 'clsx';
+import { KTIcon } from '../../../helpers';
+import { ThemeModeComponent } from '../../../assets/ts/layout';
+import { useThemeMode } from './ThemeModeProvider';
+import React from 'react';
+const systemMode = ThemeModeComponent.getSystemMode();
+const ThemeModeSwitcher = ({ toggleBtnClass = '', toggleBtnIconClass = 'fs-1', menuPlacement = 'bottom-end', menuTrigger = "{default: 'click', lg: 'hover'}", }) => {
+    const { mode, menuMode, updateMode, updateMenuMode } = useThemeMode();
+    const calculatedMode = mode === 'system' ? systemMode : mode;
+    const switchMode = (_mode) => {
         updateMenuMode(_mode);
         updateMode(_mode);
     };
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("a", { href: '#', className: (0, clsx_1.default)('btn btn-icon ', toggleBtnClass), "data-kt-menu-trigger": menuTrigger, "data-kt-menu-attach": 'parent', "data-kt-menu-placement": menuPlacement },
-            calculatedMode === 'dark' && (react_1.default.createElement(helpers_1.KTIcon, { iconName: 'moon', className: (0, clsx_1.default)('theme-light-hide', toggleBtnIconClass) })),
-            calculatedMode === 'light' && (react_1.default.createElement(helpers_1.KTIcon, { iconName: 'night-day', className: (0, clsx_1.default)('theme-dark-hide', toggleBtnIconClass) }))),
-        react_1.default.createElement("div", { className: 'menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-title-gray-700 menu-icon-muted menu-active-bg menu-state-primary fw-semibold py-4 fs-base w-175px', "data-kt-menu": 'true' },
-            react_1.default.createElement("div", { className: 'menu-item px-3 my-0' },
-                react_1.default.createElement("a", { href: '#', className: (0, clsx_1.default)('menu-link px-3 py-2', { active: menuMode === 'light' }), onClick: function () { return switchMode('light'); } },
-                    react_1.default.createElement("span", { className: 'menu-icon', "data-kt-element": 'icon' },
-                        react_1.default.createElement(helpers_1.KTIcon, { iconName: 'night-day', className: 'fs-1' })),
-                    react_1.default.createElement("span", { className: 'menu-title' }, "Light"))),
-            react_1.default.createElement("div", { className: 'menu-item px-3 my-0' },
-                react_1.default.createElement("a", { href: '#', className: (0, clsx_1.default)('menu-link px-3 py-2', { active: menuMode === 'dark' }), onClick: function () { return switchMode('dark'); } },
-                    react_1.default.createElement("span", { className: 'menu-icon', "data-kt-element": 'icon' },
-                        react_1.default.createElement(helpers_1.KTIcon, { iconName: 'moon', className: 'fs-1' })),
-                    react_1.default.createElement("span", { className: 'menu-title' }, "Dark"))),
-            react_1.default.createElement("div", { className: 'menu-item px-3 my-0' },
-                react_1.default.createElement("a", { href: '#', className: (0, clsx_1.default)('menu-link px-3 py-2', { active: menuMode === 'system' }), onClick: function () { return switchMode('system'); } },
-                    react_1.default.createElement("span", { className: 'menu-icon', "data-kt-element": 'icon' },
-                        react_1.default.createElement(helpers_1.KTIcon, { iconName: 'screen', className: 'fs-1' })),
-                    react_1.default.createElement("span", { className: 'menu-title' }, "System"))))));
+    return (React.createElement(React.Fragment, null,
+        React.createElement("a", { href: '#', className: clsx('btn btn-icon ', toggleBtnClass), "data-kt-menu-trigger": menuTrigger, "data-kt-menu-attach": 'parent', "data-kt-menu-placement": menuPlacement },
+            calculatedMode === 'dark' && (React.createElement(KTIcon, { iconName: 'moon', className: clsx('theme-light-hide', toggleBtnIconClass) })),
+            calculatedMode === 'light' && (React.createElement(KTIcon, { iconName: 'night-day', className: clsx('theme-dark-hide', toggleBtnIconClass) }))),
+        React.createElement("div", { className: 'menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-title-gray-700 menu-icon-muted menu-active-bg menu-state-primary fw-semibold py-4 fs-base w-175px', "data-kt-menu": 'true' },
+            React.createElement("div", { className: 'menu-item px-3 my-0' },
+                React.createElement("a", { href: '#', className: clsx('menu-link px-3 py-2', { active: menuMode === 'light' }), onClick: () => switchMode('light') },
+                    React.createElement("span", { className: 'menu-icon', "data-kt-element": 'icon' },
+                        React.createElement(KTIcon, { iconName: 'night-day', className: 'fs-1' })),
+                    React.createElement("span", { className: 'menu-title' }, "Light"))),
+            React.createElement("div", { className: 'menu-item px-3 my-0' },
+                React.createElement("a", { href: '#', className: clsx('menu-link px-3 py-2', { active: menuMode === 'dark' }), onClick: () => switchMode('dark') },
+                    React.createElement("span", { className: 'menu-icon', "data-kt-element": 'icon' },
+                        React.createElement(KTIcon, { iconName: 'moon', className: 'fs-1' })),
+                    React.createElement("span", { className: 'menu-title' }, "Dark"))),
+            React.createElement("div", { className: 'menu-item px-3 my-0' },
+                React.createElement("a", { href: '#', className: clsx('menu-link px-3 py-2', { active: menuMode === 'system' }), onClick: () => switchMode('system') },
+                    React.createElement("span", { className: 'menu-icon', "data-kt-element": 'icon' },
+                        React.createElement(KTIcon, { iconName: 'screen', className: 'fs-1' })),
+                    React.createElement("span", { className: 'menu-title' }, "System"))))));
 };
-exports.ThemeModeSwitcher = ThemeModeSwitcher;
+export { ThemeModeSwitcher };

package/dist/partials/modals/create-app-stepper/CreateAppModal.js

@@ -1,84 +1,46 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CreateAppModal = void 0;
-var react_1 = __importStar(require("react"));
-var react_dom_1 = require("react-dom");
-var react_bootstrap_1 = require("react-bootstrap");
-var IAppModels_1 = require("./IAppModels");
-var components_1 = require("../../../assets/ts/components");
-var helpers_1 = require("../../../helpers");
-var Step1_1 = require("./steps/Step1");
-var Step2_1 = require("./steps/Step2");
-var Step3_1 = require("./steps/Step3");
-var Step4_1 = require("./steps/Step4");
-var Step5_1 = require("./steps/Step5");
-var modalsRoot = document.getElementById('root-modals') || document.body;
-var CreateAppModal = function (_a) {
-    var show = _a.show, handleClose = _a.handleClose;
-    var stepperRef = (0, react_1.useRef)(null);
-    var _b = (0, react_1.useState)(null), stepper = _b[0], setStepper = _b[1];
-    var _c = (0, react_1.useState)(IAppModels_1.defaultCreateAppData), data = _c[0], setData = _c[1];
-    var _d = (0, react_1.useState)(false), hasError = _d[0], setHasError = _d[1];
-    var loadStepper = function () {
-        setStepper(components_1.StepperComponent.createInsance(stepperRef.current));
+import React, { useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { Modal } from 'react-bootstrap';
+import { defaultCreateAppData } from './IAppModels';
+import { StepperComponent } from '../../../assets/ts/components';
+import { KTIcon } from '../../../helpers';
+import { Step1 } from './steps/Step1';
+import { Step2 } from './steps/Step2';
+import { Step3 } from './steps/Step3';
+import { Step4 } from './steps/Step4';
+import { Step5 } from './steps/Step5';
+const modalsRoot = document.getElementById('root-modals') || document.body;
+const CreateAppModal = ({ show, handleClose }) => {
+    const stepperRef = useRef(null);
+    const [stepper, setStepper] = useState(null);
+    const [data, setData] = useState(defaultCreateAppData);
+    const [hasError, setHasError] = useState(false);
+    const loadStepper = () => {
+        setStepper(StepperComponent.createInsance(stepperRef.current));
     };
-    var updateData = function (fieldsToUpdate) {
-        var updatedData = __assign(__assign({}, data), fieldsToUpdate);
+    const updateData = (fieldsToUpdate) => {
+        const updatedData = { ...data, ...fieldsToUpdate };
         setData(updatedData);
     };
-    var checkAppBasic = function () {
+    const checkAppBasic = () => {
         if (!data.appBasic.appName || !data.appBasic.appType) {
             return false;
         }
         return true;
     };
-    var checkAppDataBase = function () {
+    const checkAppDataBase = () => {
         if (!data.appDatabase.databaseName || !data.appDatabase.databaseSolution) {
             return false;
         }
         return true;
     };
-    var prevStep = function () {
+    const prevStep = () => {
         if (!stepper) {
             return;
         }
         stepper.goPrev();
     };
-    var nextStep = function () {
+    const nextStep = () => {
         setHasError(false);
         if (!stepper) {
             return;
@@ -97,80 +59,80 @@ var CreateAppModal = function (_a) {
         }
         stepper.goNext();
     };
-    var submit = function () {
+    const submit = () => {
         window.location.reload();
     };
-    return (0, react_dom_1.createPortal)(react_1.default.createElement(react_bootstrap_1.Modal, { id: 'kt_modal_create_app', tabIndex: -1, "aria-hidden": 'true', dialogClassName: 'modal-dialog modal-dialog-centered mw-900px', show: show, onHide: handleClose, onEntered: loadStepper, backdrop: true },
-        react_1.default.createElement("div", { className: 'modal-header' },
-            react_1.default.createElement("h2", null, "Create App"),
-            react_1.default.createElement("div", { className: 'btn btn-sm btn-icon btn-active-color-primary', onClick: handleClose },
-                react_1.default.createElement(helpers_1.KTIcon, { className: 'fs-1', iconName: 'cross' }))),
-        react_1.default.createElement("div", { className: 'modal-body py-lg-10 px-lg-10' },
-            react_1.default.createElement("div", { ref: stepperRef, className: 'stepper stepper-pills stepper-column d-flex flex-column flex-xl-row flex-row-fluid', id: 'kt_modal_create_app_stepper' },
-                react_1.default.createElement("div", { className: 'd-flex justify-content-center justify-content-xl-start flex-row-auto w-100 w-xl-300px' },
-                    react_1.default.createElement("div", { className: 'stepper-nav ps-lg-10' },
-                        react_1.default.createElement("div", { className: 'stepper-item current', "data-kt-stepper-element": 'nav' },
-                            react_1.default.createElement("div", { className: 'stepper-wrapper' },
-                                react_1.default.createElement("div", { className: 'stepper-icon w-40px h-40px' },
-                                    react_1.default.createElement("i", { className: 'stepper-check fas fa-check' }),
-                                    react_1.default.createElement("span", { className: 'stepper-number' }, "1")),
-                                react_1.default.createElement("div", { className: 'stepper-label' },
-                                    react_1.default.createElement("h3", { className: 'stepper-title' }, "Details"),
-                                    react_1.default.createElement("div", { className: 'stepper-desc' }, "Name your App"))),
-                            react_1.default.createElement("div", { className: 'stepper-line h-40px' })),
-                        react_1.default.createElement("div", { className: 'stepper-item', "data-kt-stepper-element": 'nav' },
-                            react_1.default.createElement("div", { className: 'stepper-wrapper' },
-                                react_1.default.createElement("div", { className: 'stepper-icon w-40px h-40px' },
-                                    react_1.default.createElement("i", { className: 'stepper-check fas fa-check' }),
-                                    react_1.default.createElement("span", { className: 'stepper-number' }, "2")),
-                                react_1.default.createElement("div", { className: 'stepper-label' },
-                                    react_1.default.createElement("h3", { className: 'stepper-title' }, "Frameworks"),
-                                    react_1.default.createElement("div", { className: 'stepper-desc' }, "Define your app framework"))),
-                            react_1.default.createElement("div", { className: 'stepper-line h-40px' })),
-                        react_1.default.createElement("div", { className: 'stepper-item', "data-kt-stepper-element": 'nav' },
-                            react_1.default.createElement("div", { className: 'stepper-wrapper' },
-                                react_1.default.createElement("div", { className: 'stepper-icon w-40px h-40px' },
-                                    react_1.default.createElement("i", { className: 'stepper-check fas fa-check' }),
-                                    react_1.default.createElement("span", { className: 'stepper-number' }, "3")),
-                                react_1.default.createElement("div", { className: 'stepper-label' },
-                                    react_1.default.createElement("h3", { className: 'stepper-title' }, "Database"),
-                                    react_1.default.createElement("div", { className: 'stepper-desc' }, "Select the app database type"))),
-                            react_1.default.createElement("div", { className: 'stepper-line h-40px' })),
-                        react_1.default.createElement("div", { className: 'stepper-item', "data-kt-stepper-element": 'nav' },
-                            react_1.default.createElement("div", { className: 'stepper-wrapper' },
-                                react_1.default.createElement("div", { className: 'stepper-icon w-40px h-40px' },
-                                    react_1.default.createElement("i", { className: 'stepper-check fas fa-check' }),
-                                    react_1.default.createElement("span", { className: 'stepper-number' }, "4")),
-                                react_1.default.createElement("div", { className: 'stepper-label' },
-                                    react_1.default.createElement("h3", { className: 'stepper-title' }, "Storage"),
-                                    react_1.default.createElement("div", { className: 'stepper-desc' }, "Provide storage details"))),
-                            react_1.default.createElement("div", { className: 'stepper-line h-40px' })),
-                        react_1.default.createElement("div", { className: 'stepper-item', "data-kt-stepper-element": 'nav' },
-                            react_1.default.createElement("div", { className: 'stepper-wrapper' },
-                                react_1.default.createElement("div", { className: 'stepper-icon w-40px h-40px' },
-                                    react_1.default.createElement("i", { className: 'stepper-check fas fa-check' }),
-                                    react_1.default.createElement("span", { className: 'stepper-number' }, "5")),
-                                react_1.default.createElement("div", { className: 'stepper-label' },
-                                    react_1.default.createElement("h3", { className: 'stepper-title' }, "Completed"),
-                                    react_1.default.createElement("div", { className: 'stepper-desc' }, "Review and Submit")))))),
-                react_1.default.createElement("div", { className: 'flex-row-fluid py-lg-5 px-lg-15' },
-                    react_1.default.createElement("form", { noValidate: true, id: 'kt_modal_create_app_form' },
-                        react_1.default.createElement(Step1_1.Step1, { data: data, updateData: updateData, hasError: hasError }),
-                        react_1.default.createElement(Step2_1.Step2, { data: data, updateData: updateData, hasError: hasError }),
-                        react_1.default.createElement(Step3_1.Step3, { data: data, updateData: updateData, hasError: hasError }),
-                        react_1.default.createElement(Step4_1.Step4, { data: data, updateData: updateData, hasError: hasError }),
-                        react_1.default.createElement(Step5_1.Step5, null),
-                        react_1.default.createElement("div", { className: 'd-flex flex-stack pt-10' },
-                            react_1.default.createElement("div", { className: 'me-2' },
-                                react_1.default.createElement("button", { type: 'button', className: 'btn btn-lg btn-light-primary me-3', "data-kt-stepper-action": 'previous', onClick: prevStep },
-                                    react_1.default.createElement(helpers_1.KTIcon, { iconName: 'arrow-left', className: 'fs-3 me-1' }),
+    return createPortal(React.createElement(Modal, { id: 'kt_modal_create_app', tabIndex: -1, "aria-hidden": 'true', dialogClassName: 'modal-dialog modal-dialog-centered mw-900px', show: show, onHide: handleClose, onEntered: loadStepper, backdrop: true },
+        React.createElement("div", { className: 'modal-header' },
+            React.createElement("h2", null, "Create App"),
+            React.createElement("div", { className: 'btn btn-sm btn-icon btn-active-color-primary', onClick: handleClose },
+                React.createElement(KTIcon, { className: 'fs-1', iconName: 'cross' }))),
+        React.createElement("div", { className: 'modal-body py-lg-10 px-lg-10' },
+            React.createElement("div", { ref: stepperRef, className: 'stepper stepper-pills stepper-column d-flex flex-column flex-xl-row flex-row-fluid', id: 'kt_modal_create_app_stepper' },
+                React.createElement("div", { className: 'd-flex justify-content-center justify-content-xl-start flex-row-auto w-100 w-xl-300px' },
+                    React.createElement("div", { className: 'stepper-nav ps-lg-10' },
+                        React.createElement("div", { className: 'stepper-item current', "data-kt-stepper-element": 'nav' },
+                            React.createElement("div", { className: 'stepper-wrapper' },
+                                React.createElement("div", { className: 'stepper-icon w-40px h-40px' },
+                                    React.createElement("i", { className: 'stepper-check fas fa-check' }),
+                                    React.createElement("span", { className: 'stepper-number' }, "1")),
+                                React.createElement("div", { className: 'stepper-label' },
+                                    React.createElement("h3", { className: 'stepper-title' }, "Details"),
+                                    React.createElement("div", { className: 'stepper-desc' }, "Name your App"))),
+                            React.createElement("div", { className: 'stepper-line h-40px' })),
+                        React.createElement("div", { className: 'stepper-item', "data-kt-stepper-element": 'nav' },
+                            React.createElement("div", { className: 'stepper-wrapper' },
+                                React.createElement("div", { className: 'stepper-icon w-40px h-40px' },
+                                    React.createElement("i", { className: 'stepper-check fas fa-check' }),
+                                    React.createElement("span", { className: 'stepper-number' }, "2")),
+                                React.createElement("div", { className: 'stepper-label' },
+                                    React.createElement("h3", { className: 'stepper-title' }, "Frameworks"),
+                                    React.createElement("div", { className: 'stepper-desc' }, "Define your app framework"))),
+                            React.createElement("div", { className: 'stepper-line h-40px' })),
+                        React.createElement("div", { className: 'stepper-item', "data-kt-stepper-element": 'nav' },
+                            React.createElement("div", { className: 'stepper-wrapper' },
+                                React.createElement("div", { className: 'stepper-icon w-40px h-40px' },
+                                    React.createElement("i", { className: 'stepper-check fas fa-check' }),
+                                    React.createElement("span", { className: 'stepper-number' }, "3")),
+                                React.createElement("div", { className: 'stepper-label' },
+                                    React.createElement("h3", { className: 'stepper-title' }, "Database"),
+                                    React.createElement("div", { className: 'stepper-desc' }, "Select the app database type"))),
+                            React.createElement("div", { className: 'stepper-line h-40px' })),
+                        React.createElement("div", { className: 'stepper-item', "data-kt-stepper-element": 'nav' },
+                            React.createElement("div", { className: 'stepper-wrapper' },
+                                React.createElement("div", { className: 'stepper-icon w-40px h-40px' },
+                                    React.createElement("i", { className: 'stepper-check fas fa-check' }),
+                                    React.createElement("span", { className: 'stepper-number' }, "4")),
+                                React.createElement("div", { className: 'stepper-label' },
+                                    React.createElement("h3", { className: 'stepper-title' }, "Storage"),
+                                    React.createElement("div", { className: 'stepper-desc' }, "Provide storage details"))),
+                            React.createElement("div", { className: 'stepper-line h-40px' })),
+                        React.createElement("div", { className: 'stepper-item', "data-kt-stepper-element": 'nav' },
+                            React.createElement("div", { className: 'stepper-wrapper' },
+                                React.createElement("div", { className: 'stepper-icon w-40px h-40px' },
+                                    React.createElement("i", { className: 'stepper-check fas fa-check' }),
+                                    React.createElement("span", { className: 'stepper-number' }, "5")),
+                                React.createElement("div", { className: 'stepper-label' },
+                                    React.createElement("h3", { className: 'stepper-title' }, "Completed"),
+                                    React.createElement("div", { className: 'stepper-desc' }, "Review and Submit")))))),
+                React.createElement("div", { className: 'flex-row-fluid py-lg-5 px-lg-15' },
+                    React.createElement("form", { noValidate: true, id: 'kt_modal_create_app_form' },
+                        React.createElement(Step1, { data: data, updateData: updateData, hasError: hasError }),
+                        React.createElement(Step2, { data: data, updateData: updateData, hasError: hasError }),
+                        React.createElement(Step3, { data: data, updateData: updateData, hasError: hasError }),
+                        React.createElement(Step4, { data: data, updateData: updateData, hasError: hasError }),
+                        React.createElement(Step5, null),
+                        React.createElement("div", { className: 'd-flex flex-stack pt-10' },
+                            React.createElement("div", { className: 'me-2' },
+                                React.createElement("button", { type: 'button', className: 'btn btn-lg btn-light-primary me-3', "data-kt-stepper-action": 'previous', onClick: prevStep },
+                                    React.createElement(KTIcon, { iconName: 'arrow-left', className: 'fs-3 me-1' }),
                                     " Previous")),
-                            react_1.default.createElement("div", null,
-                                react_1.default.createElement("button", { type: 'button', className: 'btn btn-lg btn-primary', "data-kt-stepper-action": 'submit', onClick: submit },
+                            React.createElement("div", null,
+                                React.createElement("button", { type: 'button', className: 'btn btn-lg btn-primary', "data-kt-stepper-action": 'submit', onClick: submit },
                                     "Submit ",
-                                    react_1.default.createElement(helpers_1.KTIcon, { iconName: 'arrow-right', className: 'fs-3 ms-2 me-0' })),
-                                react_1.default.createElement("button", { type: 'button', className: 'btn btn-lg btn-primary', "data-kt-stepper-action": 'next', onClick: nextStep },
+                                    React.createElement(KTIcon, { iconName: 'arrow-right', className: 'fs-3 ms-2 me-0' })),
+                                React.createElement("button", { type: 'button', className: 'btn btn-lg btn-primary', "data-kt-stepper-action": 'next', onClick: nextStep },
                                     "Next Step ",
-                                    react_1.default.createElement(helpers_1.KTIcon, { iconName: 'arrow-right', className: 'fs-3 ms-1 me-0' }))))))))), modalsRoot);
+                                    React.createElement(KTIcon, { iconName: 'arrow-right', className: 'fs-3 ms-1 me-0' }))))))))), modalsRoot);
 };
-exports.CreateAppModal = CreateAppModal;
+export { CreateAppModal };

package/dist/partials/modals/create-app-stepper/IAppModels.js

@@ -1,7 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.defaultCreateAppData = void 0;
-exports.defaultCreateAppData = {
+export const defaultCreateAppData = {
     appBasic: { appName: '', appType: 'Quick Online Courses' },
     appFramework: 'HTML5',
     appDatabase: { databaseName: 'db_name', databaseSolution: 'MySQL' },