@soyfri/template 1.0.0

package/dist/layout/components/toolbar/toolbars/ToolbarReports.js

@@ -0,0 +1,59 @@
+"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.ToolbarReports = void 0;
+var react_1 = __importStar(require("react"));
+var helpers_1 = require("../../../../helpers");
+var ToolbarReports = function () {
+    var _a = (0, react_1.useState)('1'), progress = _a[0], setProgress = _a[1];
+    (0, react_1.useEffect)(function () {
+        document.body.setAttribute('data-kt-app-toolbar-fixed', 'true');
+    }, []);
+    return (react_1.default.createElement("div", { className: 'd-flex align-items-center overflow-auto' },
+        react_1.default.createElement("div", { className: 'd-flex align-items-center flex-shrink-0' },
+            react_1.default.createElement("span", { className: 'fs-7 fw-bold text-gray-700 flex-shrink-0 pe-4 d-none d-md-block' }, "Filter By:"),
+            react_1.default.createElement("div", { className: 'flex-shrink-0 ' },
+                react_1.default.createElement("ul", { className: 'nav' },
+                    react_1.default.createElement("li", { className: 'nav-item' },
+                        react_1.default.createElement("a", { className: 'nav-link btn btn-sm btn-color-muted btn-active-color-primary btn-active-light active fw-semibold fs-7 px-4 me-1', "data-bs-toggle": 'tab', href: '#' }, "Today")),
+                    react_1.default.createElement("li", { className: 'nav-item' },
+                        react_1.default.createElement("a", { className: 'nav-link btn btn-sm btn-color-muted btn-active-color-primary btn-active-light fw-semibold fs-7 px-4 me-1', "data-bs-toggle": 'tab', href: '' }, "Week")),
+                    react_1.default.createElement("li", { className: 'nav-item' },
+                        react_1.default.createElement("a", { className: 'nav-link btn btn-sm btn-color-muted btn-active-color-primary btn-active-light fw-semibold fs-7 px-4', "data-bs-toggle": 'tab', href: '#' }, "Day"))))),
+        react_1.default.createElement("div", { className: 'bullet bg-secondary h-35px w-1px mx-5' }),
+        react_1.default.createElement("div", { className: 'd-flex align-items-center' },
+            react_1.default.createElement("span", { className: 'fs-7 fw-bold text-gray-700 flex-shrink-0 pe-4 d-none d-md-block' }, "Sort By:"),
+            react_1.default.createElement("select", { className: 'form-select form-select-sm w-md-125px form-select-solid', "data-control": 'select2', "data-placeholder": 'Latest', "data-hide-search": 'true', value: progress, onChange: function (e) { return setProgress(e.target.value); } },
+                react_1.default.createElement("option", { value: '' }),
+                react_1.default.createElement("option", { value: '1' }, "Latest"),
+                react_1.default.createElement("option", { value: '2' }, "In Progress"),
+                react_1.default.createElement("option", { value: '3' }, "Done")),
+            react_1.default.createElement("div", { className: 'd-flex align-items-center ms-3' },
+                react_1.default.createElement("button", { type: 'button', className: 'btn btn-sm btn-icon btn-light-primary me-3', "data-bs-toggle": 'tooltip', "data-bs-placement": 'top', title: 'Enable grid view' },
+                    react_1.default.createElement(helpers_1.KTIcon, { iconName: 'element-11', className: 'fs-2 text-primary' })),
+                react_1.default.createElement("button", { type: 'button', className: 'btn btn-sm btn-icon btn-light', "data-bs-toggle": 'tooltip', "data-bs-placement": 'top', title: 'Enable row view' },
+                    react_1.default.createElement(helpers_1.KTIcon, { iconName: 'abstract-14', className: ' fs-2 text-gray-500' }))))));
+};
+exports.ToolbarReports = ToolbarReports;

package/dist/layout/components/toolbar/toolbars/ToolbarSaas.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+declare const ToolbarSaas: FC;
+export { ToolbarSaas };

package/dist/layout/components/toolbar/toolbars/ToolbarSaas.js

@@ -0,0 +1,59 @@
+"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.ToolbarSaas = void 0;
+var react_1 = __importStar(require("react"));
+var helpers_1 = require("../../../../helpers");
+var ToolbarSaas = function () {
+    var _a = (0, react_1.useState)('1'), progress = _a[0], setProgress = _a[1];
+    (0, react_1.useEffect)(function () {
+        document.body.setAttribute('data-kt-app-toolbar-fixed', 'true');
+    }, []);
+    return (react_1.default.createElement("div", { className: 'd-flex align-items-center gap-2' },
+        react_1.default.createElement("div", { className: 'd-flex align-items-center' },
+            react_1.default.createElement("span", { className: 'fs-7 fw-bold text-gray-700 pe-4 text-nowrap d-none d-md-block' }, "Sort By:"),
+            react_1.default.createElement("select", { className: 'form-select form-select-sm form-select-solid w-100px w-xxl-125px', "data-control": 'select2', "data-placeholder": 'Latest', "data-hide-search": 'true', onChange: function (e) { return setProgress(e.target.value); }, value: progress },
+                react_1.default.createElement("option", { value: '' }),
+                react_1.default.createElement("option", { value: '1' }, "Latest"),
+                react_1.default.createElement("option", { value: '2' }, "In Progress"),
+                react_1.default.createElement("option", { value: '3' }, "Done"))),
+        react_1.default.createElement("div", { className: 'd-flex align-items-center' },
+            react_1.default.createElement("div", { className: 'bullet bg-secondary h-35px w-1px mx-5' }),
+            react_1.default.createElement("span", { className: 'fs-7 text-gray-700 fw-bold' }, "Impact Level:"),
+            react_1.default.createElement("div", { className: 'd-flex align-items-center ps-4' },
+                react_1.default.createElement("div", { id: 'kt_app_toolbar_slider', className: 'noUi-target noUi-target-success w-75px w-xxl-150px noUi-sm' }),
+                react_1.default.createElement("span", { id: 'kt_app_toolbar_slider_value', className: 'd-flex flex-center bg-light-success rounded-circle w-35px h-35px ms-4 fs-7 fw-bold text-success', "data-bs-toggle": 'tooltip', "data-bs-placement": 'top', title: 'Set impact level' })),
+            react_1.default.createElement("div", { className: 'bullet bg-secondary h-35px w-1px mx-5' })),
+        react_1.default.createElement("div", { className: 'd-flex align-items-center' },
+            react_1.default.createElement("span", { className: 'fs-7 text-gray-700 fw-bold pe-3 d-none d-md-block' }, "Quick Tools:"),
+            react_1.default.createElement("div", { className: 'd-flex' },
+                react_1.default.createElement("a", { href: '#', className: 'btn btn-sm btn-icon btn-icon-muted btn-active-icon-success', "data-bs-toggle": 'tooltip', "data-bs-trigger": 'hover', "data-bs-placement": 'top', title: 'Add new page' },
+                    react_1.default.createElement(helpers_1.KTIcon, { iconName: 'files', className: 'fs-2x' })),
+                react_1.default.createElement("a", { href: '#', className: 'btn btn-sm btn-icon btn-icon-muted btn-active-icon-success', "data-bs-toggle": 'tooltip', "data-bs-trigger": 'hover', "data-bs-placement": 'top', title: 'Add new category' },
+                    react_1.default.createElement(helpers_1.KTIcon, { iconName: 'add-files', className: 'fs-2x' })),
+                react_1.default.createElement("a", { href: '#', className: 'btn btn-sm btn-icon btn-icon-muted btn-active-icon-success', "data-bs-toggle": 'tooltip', "data-bs-trigger": 'hover', "data-bs-placement": 'top', title: 'Add new section' },
+                    react_1.default.createElement(helpers_1.KTIcon, { iconName: 'search-list', className: 'fs-2x' }))))));
+};
+exports.ToolbarSaas = ToolbarSaas;

package/dist/layout/components/toolbar/toolbars/index.d.ts

@@ -0,0 +1,5 @@
+export * from './ToolbarAccounting';
+export * from './ToolbarClassic';
+export * from './ToolbarExtended';
+export * from './ToolbarReports';
+export * from './ToolbarSaas';

package/dist/layout/components/toolbar/toolbars/index.js

@@ -0,0 +1,21 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ToolbarAccounting"), exports);
+__exportStar(require("./ToolbarClassic"), exports);
+__exportStar(require("./ToolbarExtended"), exports);
+__exportStar(require("./ToolbarReports"), exports);
+__exportStar(require("./ToolbarSaas"), exports);

package/dist/layout/core/MetronicSplashScreen.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+import { WithChildren } from '../../helpers';
+declare const MetronicSplashScreenProvider: FC<WithChildren>;
+declare const LayoutSplashScreen: FC<{
+    visible?: boolean;
+}>;
+export { MetronicSplashScreenProvider, LayoutSplashScreen };

package/dist/layout/core/MetronicSplashScreen.js

@@ -0,0 +1,78 @@
+"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.LayoutSplashScreen = exports.MetronicSplashScreenProvider = void 0;
+var react_1 = __importStar(require("react"));
+var MetronicSplashScreenContext = (0, react_1.createContext)(undefined);
+var MetronicSplashScreenProvider = function (_a) {
+    var children = _a.children;
+    var _b = (0, react_1.useState)(0), count = _b[0], setCount = _b[1];
+    var visible = count > 0;
+    (0, react_1.useEffect)(function () {
+        // Show SplashScreen
+        if (visible) {
+            document.body.classList.remove('page-loading');
+            return function () {
+                document.body.classList.add('page-loading');
+            };
+        }
+        // Hide SplashScreen
+        var timeout;
+        if (!visible) {
+            timeout = window.setTimeout(function () {
+                document.body.classList.add('page-loading');
+            }, 3000);
+        }
+        return function () {
+            clearTimeout(timeout);
+        };
+    }, [visible]);
+    return (react_1.default.createElement(MetronicSplashScreenContext.Provider, { value: setCount }, children));
+};
+exports.MetronicSplashScreenProvider = MetronicSplashScreenProvider;
+var LayoutSplashScreen = function (_a) {
+    var _b = _a.visible, visible = _b === void 0 ? true : _b;
+    // Everything are ready - remove splashscreen
+    var setCount = (0, react_1.useContext)(MetronicSplashScreenContext);
+    (0, react_1.useEffect)(function () {
+        if (!visible) {
+            return;
+        }
+        if (setCount) {
+            setCount(function (prev) {
+                return prev + 1;
+            });
+        }
+        return function () {
+            if (setCount) {
+                setCount(function (prev) {
+                    return prev - 1;
+                });
+            }
+        };
+    }, [setCount, visible]);
+    return null;
+};
+exports.LayoutSplashScreen = LayoutSplashScreen;

package/dist/layout/core/PageData.d.ts

@@ -0,0 +1,25 @@
+import { FC } from 'react';
+import { WithChildren } from '../../helpers';
+export interface PageLink {
+    title: string;
+    path: string;
+    isActive: boolean;
+    isSeparator?: boolean;
+}
+export interface PageDataContextModel {
+    pageTitle?: string;
+    setPageTitle: (_title: string) => void;
+    pageDescription?: string;
+    setPageDescription: (_description: string) => void;
+    pageBreadcrumbs?: Array<PageLink>;
+    setPageBreadcrumbs: (_breadcrumbs: Array<PageLink>) => void;
+}
+declare const PageDataProvider: FC<WithChildren>;
+declare function usePageData(): PageDataContextModel;
+type Props = {
+    description?: string;
+    breadcrumbs?: Array<PageLink>;
+};
+declare const PageTitle: FC<Props & WithChildren>;
+declare const PageDescription: FC<WithChildren>;
+export { PageDescription, PageTitle, PageDataProvider, usePageData };

package/dist/layout/core/PageData.js

@@ -0,0 +1,96 @@
+"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.usePageData = exports.PageDataProvider = exports.PageTitle = exports.PageDescription = void 0;
+var react_1 = __importStar(require("react"));
+var PageDataContext = (0, react_1.createContext)({
+    setPageTitle: function (_title) { },
+    setPageBreadcrumbs: function (_breadcrumbs) { },
+    setPageDescription: function (_description) { },
+});
+var PageDataProvider = function (_a) {
+    var children = _a.children;
+    var _b = (0, react_1.useState)(''), pageTitle = _b[0], setPageTitle = _b[1];
+    var _c = (0, react_1.useState)(''), pageDescription = _c[0], setPageDescription = _c[1];
+    var _d = (0, react_1.useState)([]), pageBreadcrumbs = _d[0], setPageBreadcrumbs = _d[1];
+    var value = {
+        pageTitle: pageTitle,
+        setPageTitle: setPageTitle,
+        pageDescription: pageDescription,
+        setPageDescription: setPageDescription,
+        pageBreadcrumbs: pageBreadcrumbs,
+        setPageBreadcrumbs: setPageBreadcrumbs,
+    };
+    return react_1.default.createElement(PageDataContext.Provider, { value: value }, children);
+};
+exports.PageDataProvider = PageDataProvider;
+function usePageData() {
+    return (0, react_1.useContext)(PageDataContext);
+}
+exports.usePageData = usePageData;
+var PageTitle = function (_a) {
+    var children = _a.children, description = _a.description, breadcrumbs = _a.breadcrumbs;
+    var _b = usePageData(), setPageTitle = _b.setPageTitle, setPageDescription = _b.setPageDescription, setPageBreadcrumbs = _b.setPageBreadcrumbs;
+    (0, react_1.useEffect)(function () {
+        if (children) {
+            setPageTitle(children.toString());
+        }
+        return function () {
+            setPageTitle('');
+        };
+    }, [children]);
+    (0, react_1.useEffect)(function () {
+        if (description) {
+            setPageDescription(description);
+        }
+        return function () {
+            setPageDescription('');
+        };
+    }, [description]);
+    (0, react_1.useEffect)(function () {
+        if (breadcrumbs) {
+            setPageBreadcrumbs(breadcrumbs);
+        }
+        return function () {
+            setPageBreadcrumbs([]);
+        };
+    }, [breadcrumbs]);
+    return react_1.default.createElement(react_1.default.Fragment, null);
+};
+exports.PageTitle = PageTitle;
+var PageDescription = function (_a) {
+    var children = _a.children;
+    var setPageDescription = usePageData().setPageDescription;
+    (0, react_1.useEffect)(function () {
+        if (children) {
+            setPageDescription(children.toString());
+        }
+        return function () {
+            setPageDescription('');
+        };
+    }, [children]);
+    return react_1.default.createElement(react_1.default.Fragment, null);
+};
+exports.PageDescription = PageDescription;

package/dist/layout/core/_LayoutConfig.d.ts

@@ -0,0 +1,2 @@
+import { ILayout } from './_Models';
+export declare const DefaultConfig: ILayout;

package/dist/layout/core/_LayoutConfig.js

@@ -0,0 +1,140 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DefaultConfig = void 0;
+exports.DefaultConfig = {
+    layoutType: 'light-sidebar',
+    main: {
+        componentName: 'main',
+        type: 'default',
+        pageBgWhite: false,
+        iconType: 'duotone',
+    },
+    app: {
+        general: {
+            componentName: 'general',
+            evolution: true,
+            layoutType: 'default',
+            mode: 'light',
+            rtl: false,
+            primaryColor: '#50CD89',
+            pageBgWhite: false,
+            pageWidth: 'default',
+        },
+        header: {
+            componentName: 'header',
+            display: true,
+            default: {
+                container: 'fluid',
+                containerClass: 'd-flex align-items-stretch justify-content-between',
+                fixed: {
+                    desktop: true,
+                    mobile: false,
+                },
+                content: 'menu',
+                menu: {
+                    display: true,
+                    iconType: 'svg',
+                },
+            },
+        },
+        sidebar: {
+            componentName: 'sidebar',
+            display: true,
+            default: {
+                class: 'flex-column',
+                push: {
+                    header: true,
+                    toolbar: true,
+                    footer: true,
+                },
+                drawer: {
+                    enabled: true,
+                    attributes: {
+                        'data-kt-drawer': 'true',
+                        'data-kt-drawer-name': 'app-sidebar',
+                        'data-kt-drawer-activate': '{default: true, lg: false}',
+                        'data-kt-drawer-overlay': 'true',
+                        'data-kt-drawer-width': '225px',
+                        'data-kt-drawer-direction': 'start',
+                        'data-kt-drawer-toggle': '#kt_app_sidebar_mobile_toggle',
+                    },
+                },
+                fixed: {
+                    desktop: true,
+                },
+                minimize: {
+                    desktop: {
+                        enabled: true,
+                        default: false,
+                        hoverable: true,
+                    },
+                },
+                menu: {
+                    iconType: 'svg',
+                },
+            },
+        },
+        toolbar: {
+            componentName: 'toolbar',
+            display: true,
+            layout: 'classic',
+            class: 'py-3 py-lg-6',
+            container: 'fluid',
+            containerClass: 'd-flex flex-stack',
+            fixed: {
+                desktop: false,
+                mobile: false,
+            },
+            // custom settings,
+            filterButton: true,
+            daterangepickerButton: false,
+            primaryButton: true,
+            primaryButtonLabel: 'Create',
+            primaryButtonModal: 'create-app',
+        },
+        pageTitle: {
+            componentName: 'page-title',
+            display: true,
+            breadCrumb: true,
+            description: false,
+            direction: 'column',
+        },
+        content: {
+            componentName: 'content',
+            container: 'fluid',
+        },
+        footer: {
+            componentName: 'footer',
+            display: true,
+            container: 'fluid',
+            containerClass: 'd-flex flex-column flex-md-row flex-center flex-md-stack py-3',
+            fixed: {
+                desktop: false,
+                mobile: false,
+            },
+        },
+        pageLoader: {
+            componentName: 'page-loader',
+            type: 'none',
+            logoImage: 'default.svg',
+            logoClass: 'mh-75px',
+        },
+    },
+    illustrations: {
+        componentName: 'illustrations',
+        set: 'sketchy-1',
+    },
+    scrolltop: {
+        componentName: 'scrolltop',
+        display: true,
+    },
+    engage: {
+        componentName: 'engage',
+        demos: {
+            enabled: true,
+        },
+        purchase: {
+            enabled: false,
+        },
+    },
+};

package/dist/layout/core/_LayoutProvider.d.ts

@@ -0,0 +1,17 @@
+import React, { FC } from 'react';
+import { LayoutSetup } from './_LayoutSetup';
+import { ILayout, ILayoutCSSVariables, ILayoutCSSClasses, ILayoutHTMLAttributes, LayoutType, ToolbarType } from './_Models';
+import { WithChildren } from '../../helpers';
+export interface LayoutContextModel {
+    config: ILayout;
+    classes: ILayoutCSSClasses;
+    attributes: ILayoutHTMLAttributes;
+    cssVariables: ILayoutCSSVariables;
+    setLayout: (config: LayoutSetup) => void;
+    setLayoutType: (layoutType: LayoutType) => void;
+    setToolbarType: (toolbarType: ToolbarType) => void;
+}
+declare const LayoutContext: React.Context<LayoutContextModel>;
+declare const LayoutProvider: FC<WithChildren>;
+export { LayoutContext, LayoutProvider };
+export declare function useLayout(): LayoutContextModel;

package/dist/layout/core/_LayoutProvider.js

@@ -0,0 +1,114 @@
+"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.useLayout = exports.LayoutProvider = exports.LayoutContext = void 0;
+var react_1 = __importStar(require("react"));
+var _LayoutConfig_1 = require("./_LayoutConfig");
+var _LayoutSetup_1 = require("./_LayoutSetup");
+var LayoutContext = (0, react_1.createContext)({
+    config: _LayoutConfig_1.DefaultConfig,
+    classes: (0, _LayoutSetup_1.getEmptyCssClasses)(),
+    attributes: (0, _LayoutSetup_1.getEmptyHTMLAttributes)(),
+    cssVariables: (0, _LayoutSetup_1.getEmptyCSSVariables)(),
+    setLayout: function (_config) { },
+    setLayoutType: function (_layoutType) { },
+    setToolbarType: function (_toolbarType) { },
+});
+exports.LayoutContext = LayoutContext;
+var enableSplashScreen = function () {
+    var splashScreen = document.getElementById('splash-screen');
+    if (splashScreen) {
+        splashScreen.style.setProperty('display', 'flex');
+    }
+};
+var disableSplashScreen = function () {
+    var splashScreen = document.getElementById('splash-screen');
+    if (splashScreen) {
+        splashScreen.style.setProperty('display', 'none');
+    }
+};
+var LayoutProvider = function (_a) {
+    var children = _a.children;
+    var _b = (0, react_1.useState)(_LayoutSetup_1.LayoutSetup.config), config = _b[0], setConfig = _b[1];
+    var _c = (0, react_1.useState)(_LayoutSetup_1.LayoutSetup.classes), classes = _c[0], setClasses = _c[1];
+    var _d = (0, react_1.useState)(_LayoutSetup_1.LayoutSetup.attributes), attributes = _d[0], setAttributes = _d[1];
+    var _e = (0, react_1.useState)(_LayoutSetup_1.LayoutSetup.cssVariables), cssVariables = _e[0], setCSSVariables = _e[1];
+    var setLayout = function (_themeConfig) {
+        enableSplashScreen();
+        var bodyClasses = Array.from(document.body.classList);
+        bodyClasses.forEach(function (cl) { return document.body.classList.remove(cl); });
+        var updatedConfig = _LayoutSetup_1.LayoutSetup.updatePartialConfig(_themeConfig);
+        setConfig(Object.assign({}, updatedConfig));
+        setClasses(_LayoutSetup_1.LayoutSetup.classes);
+        setAttributes(_LayoutSetup_1.LayoutSetup.attributes);
+        setCSSVariables(_LayoutSetup_1.LayoutSetup.cssVariables);
+        setTimeout(function () {
+            disableSplashScreen();
+        }, 500);
+    };
+    var setToolbarType = function (toolbarType) {
+        var _a;
+        var updatedConfig = __assign({}, config);
+        if ((_a = updatedConfig.app) === null || _a === void 0 ? void 0 : _a.toolbar) {
+            updatedConfig.app.toolbar.layout = toolbarType;
+        }
+        (0, _LayoutSetup_1.setLayoutIntoLocalStorage)(updatedConfig);
+        window.location.reload();
+    };
+    var setLayoutType = function (layoutType) {
+        var updatedLayout = __assign(__assign({}, config), { layoutType: layoutType });
+        (0, _LayoutSetup_1.setLayoutIntoLocalStorage)(updatedLayout);
+        window.location.reload();
+    };
+    var value = {
+        config: config,
+        classes: classes,
+        attributes: attributes,
+        cssVariables: cssVariables,
+        setLayout: setLayout,
+        setLayoutType: setLayoutType,
+        setToolbarType: setToolbarType,
+    };
+    (0, react_1.useEffect)(function () {
+        disableSplashScreen();
+    }, []);
+    return react_1.default.createElement(LayoutContext.Provider, { value: value }, children);
+};
+exports.LayoutProvider = LayoutProvider;
+function useLayout() {
+    return (0, react_1.useContext)(LayoutContext);
+}
+exports.useLayout = useLayout;