style : UI템플릿 라이브러리 추가(sneat, SB Admin, SB Admin2)

src/main/webapp/resources/framework/template/sneat-1.0.0/assets/js/config.js

@@ -0,0 +1,27 @@
+/**
+ * Config
+ * -------------------------------------------------------------------------------------
+ * ! IMPORTANT: Make sure you clear the browser local storage In order to see the config changes in the template.
+ * ! To clear local storage: (https://www.leadshook.com/help/how-to-clear-local-storage-in-google-chrome-browser/).
+ */
+
+'use strict';
+
+// JS global variables
+let config = {
+  colors: {
+    primary: '#696cff',
+    secondary: '#8592a3',
+    success: '#71dd37',
+    info: '#03c3ec',
+    warning: '#ffab00',
+    danger: '#ff3e1d',
+    dark: '#233446',
+    black: '#000',
+    white: '#fff',
+    body: '#f4f5fb',
+    headingColor: '#566a7f',
+    axisColor: '#a1acb8',
+    borderColor: '#eceef1'
+  }
+};

src/main/webapp/resources/framework/template/sneat-1.0.0/assets/js/dashboards-analytics.js

@@ -0,0 +1,662 @@
+/**
+ * Dashboard Analytics
+ */
+
+'use strict';
+
+(function () {
+  let cardColor, headingColor, axisColor, shadeColor, borderColor;
+
+  cardColor = config.colors.white;
+  headingColor = config.colors.headingColor;
+  axisColor = config.colors.axisColor;
+  borderColor = config.colors.borderColor;
+
+  // Total Revenue Report Chart - Bar Chart
+  // --------------------------------------------------------------------
+  const totalRevenueChartEl = document.querySelector('#totalRevenueChart'),
+    totalRevenueChartOptions = {
+      series: [
+        {
+          name: '2021',
+          data: [18, 7, 15, 29, 18, 12, 9]
+        },
+        {
+          name: '2020',
+          data: [-13, -18, -9, -14, -5, -17, -15]
+        }
+      ],
+      chart: {
+        height: 300,
+        stacked: true,
+        type: 'bar',
+        toolbar: { show: false }
+      },
+      plotOptions: {
+        bar: {
+          horizontal: false,
+          columnWidth: '33%',
+          borderRadius: 12,
+          startingShape: 'rounded',
+          endingShape: 'rounded'
+        }
+      },
+      colors: [config.colors.primary, config.colors.info],
+      dataLabels: {
+        enabled: false
+      },
+      stroke: {
+        curve: 'smooth',
+        width: 6,
+        lineCap: 'round',
+        colors: [cardColor]
+      },
+      legend: {
+        show: true,
+        horizontalAlign: 'left',
+        position: 'top',
+        markers: {
+          height: 8,
+          width: 8,
+          radius: 12,
+          offsetX: -3
+        },
+        labels: {
+          colors: axisColor
+        },
+        itemMargin: {
+          horizontal: 10
+        }
+      },
+      grid: {
+        borderColor: borderColor,
+        padding: {
+          top: 0,
+          bottom: -8,
+          left: 20,
+          right: 20
+        }
+      },
+      xaxis: {
+        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
+        labels: {
+          style: {
+            fontSize: '13px',
+            colors: axisColor
+          }
+        },
+        axisTicks: {
+          show: false
+        },
+        axisBorder: {
+          show: false
+        }
+      },
+      yaxis: {
+        labels: {
+          style: {
+            fontSize: '13px',
+            colors: axisColor
+          }
+        }
+      },
+      responsive: [
+        {
+          breakpoint: 1700,
+          options: {
+            plotOptions: {
+              bar: {
+                borderRadius: 10,
+                columnWidth: '32%'
+              }
+            }
+          }
+        },
+        {
+          breakpoint: 1580,
+          options: {
+            plotOptions: {
+              bar: {
+                borderRadius: 10,
+                columnWidth: '35%'
+              }
+            }
+          }
+        },
+        {
+          breakpoint: 1440,
+          options: {
+            plotOptions: {
+              bar: {
+                borderRadius: 10,
+                columnWidth: '42%'
+              }
+            }
+          }
+        },
+        {
+          breakpoint: 1300,
+          options: {
+            plotOptions: {
+              bar: {
+                borderRadius: 10,
+                columnWidth: '48%'
+              }
+            }
+          }
+        },
+        {
+          breakpoint: 1200,
+          options: {
+            plotOptions: {
+              bar: {
+                borderRadius: 10,
+                columnWidth: '40%'
+              }
+            }
+          }
+        },
+        {
+          breakpoint: 1040,
+          options: {
+            plotOptions: {
+              bar: {
+                borderRadius: 11,
+                columnWidth: '48%'
+              }
+            }
+          }
+        },
+        {
+          breakpoint: 991,
+          options: {
+            plotOptions: {
+              bar: {
+                borderRadius: 10,
+                columnWidth: '30%'
+              }
+            }
+          }
+        },
+        {
+          breakpoint: 840,
+          options: {
+            plotOptions: {
+              bar: {
+                borderRadius: 10,
+                columnWidth: '35%'
+              }
+            }
+          }
+        },
+        {
+          breakpoint: 768,
+          options: {
+            plotOptions: {
+              bar: {
+                borderRadius: 10,
+                columnWidth: '28%'
+              }
+            }
+          }
+        },
+        {
+          breakpoint: 640,
+          options: {
+            plotOptions: {
+              bar: {
+                borderRadius: 10,
+                columnWidth: '32%'
+              }
+            }
+          }
+        },
+        {
+          breakpoint: 576,
+          options: {
+            plotOptions: {
+              bar: {
+                borderRadius: 10,
+                columnWidth: '37%'
+              }
+            }
+          }
+        },
+        {
+          breakpoint: 480,
+          options: {
+            plotOptions: {
+              bar: {
+                borderRadius: 10,
+                columnWidth: '45%'
+              }
+            }
+          }
+        },
+        {
+          breakpoint: 420,
+          options: {
+            plotOptions: {
+              bar: {
+                borderRadius: 10,
+                columnWidth: '52%'
+              }
+            }
+          }
+        },
+        {
+          breakpoint: 380,
+          options: {
+            plotOptions: {
+              bar: {
+                borderRadius: 10,
+                columnWidth: '60%'
+              }
+            }
+          }
+        }
+      ],
+      states: {
+        hover: {
+          filter: {
+            type: 'none'
+          }
+        },
+        active: {
+          filter: {
+            type: 'none'
+          }
+        }
+      }
+    };
+  if (typeof totalRevenueChartEl !== undefined && totalRevenueChartEl !== null) {
+    const totalRevenueChart = new ApexCharts(totalRevenueChartEl, totalRevenueChartOptions);
+    totalRevenueChart.render();
+  }
+
+  // Growth Chart - Radial Bar Chart
+  // --------------------------------------------------------------------
+  const growthChartEl = document.querySelector('#growthChart'),
+    growthChartOptions = {
+      series: [78],
+      labels: ['Growth'],
+      chart: {
+        height: 240,
+        type: 'radialBar'
+      },
+      plotOptions: {
+        radialBar: {
+          size: 150,
+          offsetY: 10,
+          startAngle: -150,
+          endAngle: 150,
+          hollow: {
+            size: '55%'
+          },
+          track: {
+            background: cardColor,
+            strokeWidth: '100%'
+          },
+          dataLabels: {
+            name: {
+              offsetY: 15,
+              color: headingColor,
+              fontSize: '15px',
+              fontWeight: '600',
+              fontFamily: 'Public Sans'
+            },
+            value: {
+              offsetY: -25,
+              color: headingColor,
+              fontSize: '22px',
+              fontWeight: '500',
+              fontFamily: 'Public Sans'
+            }
+          }
+        }
+      },
+      colors: [config.colors.primary],
+      fill: {
+        type: 'gradient',
+        gradient: {
+          shade: 'dark',
+          shadeIntensity: 0.5,
+          gradientToColors: [config.colors.primary],
+          inverseColors: true,
+          opacityFrom: 1,
+          opacityTo: 0.6,
+          stops: [30, 70, 100]
+        }
+      },
+      stroke: {
+        dashArray: 5
+      },
+      grid: {
+        padding: {
+          top: -35,
+          bottom: -10
+        }
+      },
+      states: {
+        hover: {
+          filter: {
+            type: 'none'
+          }
+        },
+        active: {
+          filter: {
+            type: 'none'
+          }
+        }
+      }
+    };
+  if (typeof growthChartEl !== undefined && growthChartEl !== null) {
+    const growthChart = new ApexCharts(growthChartEl, growthChartOptions);
+    growthChart.render();
+  }
+
+  // Profit Report Line Chart
+  // --------------------------------------------------------------------
+  const profileReportChartEl = document.querySelector('#profileReportChart'),
+    profileReportChartConfig = {
+      chart: {
+        height: 80,
+        // width: 175,
+        type: 'line',
+        toolbar: {
+          show: false
+        },
+        dropShadow: {
+          enabled: true,
+          top: 10,
+          left: 5,
+          blur: 3,
+          color: config.colors.warning,
+          opacity: 0.15
+        },
+        sparkline: {
+          enabled: true
+        }
+      },
+      grid: {
+        show: false,
+        padding: {
+          right: 8
+        }
+      },
+      colors: [config.colors.warning],
+      dataLabels: {
+        enabled: false
+      },
+      stroke: {
+        width: 5,
+        curve: 'smooth'
+      },
+      series: [
+        {
+          data: [110, 270, 145, 245, 205, 285]
+        }
+      ],
+      xaxis: {
+        show: false,
+        lines: {
+          show: false
+        },
+        labels: {
+          show: false
+        },
+        axisBorder: {
+          show: false
+        }
+      },
+      yaxis: {
+        show: false
+      }
+    };
+  if (typeof profileReportChartEl !== undefined && profileReportChartEl !== null) {
+    const profileReportChart = new ApexCharts(profileReportChartEl, profileReportChartConfig);
+    profileReportChart.render();
+  }
+
+  // Order Statistics Chart
+  // --------------------------------------------------------------------
+  const chartOrderStatistics = document.querySelector('#orderStatisticsChart'),
+    orderChartConfig = {
+      chart: {
+        height: 165,
+        width: 130,
+        type: 'donut'
+      },
+      labels: ['Electronic', 'Sports', 'Decor', 'Fashion'],
+      series: [85, 15, 50, 50],
+      colors: [config.colors.primary, config.colors.secondary, config.colors.info, config.colors.success],
+      stroke: {
+        width: 5,
+        colors: cardColor
+      },
+      dataLabels: {
+        enabled: false,
+        formatter: function (val, opt) {
+          return parseInt(val) + '%';
+        }
+      },
+      legend: {
+        show: false
+      },
+      grid: {
+        padding: {
+          top: 0,
+          bottom: 0,
+          right: 15
+        }
+      },
+      plotOptions: {
+        pie: {
+          donut: {
+            size: '75%',
+            labels: {
+              show: true,
+              value: {
+                fontSize: '1.5rem',
+                fontFamily: 'Public Sans',
+                color: headingColor,
+                offsetY: -15,
+                formatter: function (val) {
+                  return parseInt(val) + '%';
+                }
+              },
+              name: {
+                offsetY: 20,
+                fontFamily: 'Public Sans'
+              },
+              total: {
+                show: true,
+                fontSize: '0.8125rem',
+                color: axisColor,
+                label: 'Weekly',
+                formatter: function (w) {
+                  return '38%';
+                }
+              }
+            }
+          }
+        }
+      }
+    };
+  if (typeof chartOrderStatistics !== undefined && chartOrderStatistics !== null) {
+    const statisticsChart = new ApexCharts(chartOrderStatistics, orderChartConfig);
+    statisticsChart.render();
+  }
+
+  // Income Chart - Area chart
+  // --------------------------------------------------------------------
+  const incomeChartEl = document.querySelector('#incomeChart'),
+    incomeChartConfig = {
+      series: [
+        {
+          data: [24, 21, 30, 22, 42, 26, 35, 29]
+        }
+      ],
+      chart: {
+        height: 215,
+        parentHeightOffset: 0,
+        parentWidthOffset: 0,
+        toolbar: {
+          show: false
+        },
+        type: 'area'
+      },
+      dataLabels: {
+        enabled: false
+      },
+      stroke: {
+        width: 2,
+        curve: 'smooth'
+      },
+      legend: {
+        show: false
+      },
+      markers: {
+        size: 6,
+        colors: 'transparent',
+        strokeColors: 'transparent',
+        strokeWidth: 4,
+        discrete: [
+          {
+            fillColor: config.colors.white,
+            seriesIndex: 0,
+            dataPointIndex: 7,
+            strokeColor: config.colors.primary,
+            strokeWidth: 2,
+            size: 6,
+            radius: 8
+          }
+        ],
+        hover: {
+          size: 7
+        }
+      },
+      colors: [config.colors.primary],
+      fill: {
+        type: 'gradient',
+        gradient: {
+          shade: shadeColor,
+          shadeIntensity: 0.6,
+          opacityFrom: 0.5,
+          opacityTo: 0.25,
+          stops: [0, 95, 100]
+        }
+      },
+      grid: {
+        borderColor: borderColor,
+        strokeDashArray: 3,
+        padding: {
+          top: -20,
+          bottom: -8,
+          left: -10,
+          right: 8
+        }
+      },
+      xaxis: {
+        categories: ['', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
+        axisBorder: {
+          show: false
+        },
+        axisTicks: {
+          show: false
+        },
+        labels: {
+          show: true,
+          style: {
+            fontSize: '13px',
+            colors: axisColor
+          }
+        }
+      },
+      yaxis: {
+        labels: {
+          show: false
+        },
+        min: 10,
+        max: 50,
+        tickAmount: 4
+      }
+    };
+  if (typeof incomeChartEl !== undefined && incomeChartEl !== null) {
+    const incomeChart = new ApexCharts(incomeChartEl, incomeChartConfig);
+    incomeChart.render();
+  }
+
+  // Expenses Mini Chart - Radial Chart
+  // --------------------------------------------------------------------
+  const weeklyExpensesEl = document.querySelector('#expensesOfWeek'),
+    weeklyExpensesConfig = {
+      series: [65],
+      chart: {
+        width: 60,
+        height: 60,
+        type: 'radialBar'
+      },
+      plotOptions: {
+        radialBar: {
+          startAngle: 0,
+          endAngle: 360,
+          strokeWidth: '8',
+          hollow: {
+            margin: 2,
+            size: '45%'
+          },
+          track: {
+            strokeWidth: '50%',
+            background: borderColor
+          },
+          dataLabels: {
+            show: true,
+            name: {
+              show: false
+            },
+            value: {
+              formatter: function (val) {
+                return '$' + parseInt(val);
+              },
+              offsetY: 5,
+              color: '#697a8d',
+              fontSize: '13px',
+              show: true
+            }
+          }
+        }
+      },
+      fill: {
+        type: 'solid',
+        colors: config.colors.primary
+      },
+      stroke: {
+        lineCap: 'round'
+      },
+      grid: {
+        padding: {
+          top: -10,
+          bottom: -15,
+          left: -10,
+          right: -10
+        }
+      },
+      states: {
+        hover: {
+          filter: {
+            type: 'none'
+          }
+        },
+        active: {
+          filter: {
+            type: 'none'
+          }
+        }
+      }
+    };
+  if (typeof weeklyExpensesEl !== undefined && weeklyExpensesEl !== null) {
+    const weeklyExpenses = new ApexCharts(weeklyExpensesEl, weeklyExpensesConfig);
+    weeklyExpenses.render();
+  }
+})();

src/main/webapp/resources/framework/template/sneat-1.0.0/assets/js/extended-ui-perfect-scrollbar.js

@@ -0,0 +1,37 @@
+/**
+ * Perfect Scrollbar
+ */
+'use strict';
+
+document.addEventListener('DOMContentLoaded', function () {
+  (function () {
+    const verticalExample = document.getElementById('vertical-example'),
+      horizontalExample = document.getElementById('horizontal-example'),
+      horizVertExample = document.getElementById('both-scrollbars-example');
+
+    // Vertical Example
+    // --------------------------------------------------------------------
+    if (verticalExample) {
+      new PerfectScrollbar(verticalExample, {
+        wheelPropagation: false
+      });
+    }
+
+    // Horizontal Example
+    // --------------------------------------------------------------------
+    if (horizontalExample) {
+      new PerfectScrollbar(horizontalExample, {
+        wheelPropagation: false,
+        suppressScrollY: true
+      });
+    }
+
+    // Both vertical and Horizontal Example
+    // --------------------------------------------------------------------
+    if (horizVertExample) {
+      new PerfectScrollbar(horizVertExample, {
+        wheelPropagation: false
+      });
+    }
+  })();
+});

src/main/webapp/resources/framework/template/sneat-1.0.0/assets/js/form-basic-inputs.js

@@ -0,0 +1,11 @@
+/**
+ * Form Basic Inputs
+ */
+
+'use strict';
+
+(function () {
+  // Indeterminate checkbox
+  const checkbox = document.getElementById('defaultCheck2');
+  checkbox.indeterminate = true;
+})();

src/main/webapp/resources/framework/template/sneat-1.0.0/assets/js/main.js

@@ -0,0 +1,118 @@
+/**
+ * Main
+ */
+
+'use strict';
+
+let menu, animate;
+
+(function () {
+  // Initialize menu
+  //-----------------
+
+  let layoutMenuEl = document.querySelectorAll('#layout-menu');
+  layoutMenuEl.forEach(function (element) {
+    menu = new Menu(element, {
+      orientation: 'vertical',
+      closeChildren: false
+    });
+    // Change parameter to true if you want scroll animation
+    window.Helpers.scrollToActive((animate = false));
+    window.Helpers.mainMenu = menu;
+  });
+
+  // Initialize menu togglers and bind click on each
+  let menuToggler = document.querySelectorAll('.layout-menu-toggle');
+  menuToggler.forEach(item => {
+    item.addEventListener('click', event => {
+      event.preventDefault();
+      window.Helpers.toggleCollapsed();
+    });
+  });
+
+  // Display menu toggle (layout-menu-toggle) on hover with delay
+  let delay = function (elem, callback) {
+    let timeout = null;
+    elem.onmouseenter = function () {
+      // Set timeout to be a timer which will invoke callback after 300ms (not for small screen)
+      if (!Helpers.isSmallScreen()) {
+        timeout = setTimeout(callback, 300);
+      } else {
+        timeout = setTimeout(callback, 0);
+      }
+    };
+
+    elem.onmouseleave = function () {
+      // Clear any timers set to timeout
+      document.querySelector('.layout-menu-toggle').classList.remove('d-block');
+      clearTimeout(timeout);
+    };
+  };
+  if (document.getElementById('layout-menu')) {
+    delay(document.getElementById('layout-menu'), function () {
+      // not for small screen
+      if (!Helpers.isSmallScreen()) {
+        document.querySelector('.layout-menu-toggle').classList.add('d-block');
+      }
+    });
+  }
+
+  // Display in main menu when menu scrolls
+  let menuInnerContainer = document.getElementsByClassName('menu-inner'),
+    menuInnerShadow = document.getElementsByClassName('menu-inner-shadow')[0];
+  if (menuInnerContainer.length > 0 && menuInnerShadow) {
+    menuInnerContainer[0].addEventListener('ps-scroll-y', function () {
+      if (this.querySelector('.ps__thumb-y').offsetTop) {
+        menuInnerShadow.style.display = 'block';
+      } else {
+        menuInnerShadow.style.display = 'none';
+      }
+    });
+  }
+
+  // Init helpers & misc
+  // --------------------
+
+  // Init BS Tooltip
+  const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
+  tooltipTriggerList.map(function (tooltipTriggerEl) {
+    return new bootstrap.Tooltip(tooltipTriggerEl);
+  });
+
+  // Accordion active class
+  const accordionActiveFunction = function (e) {
+    if (e.type == 'show.bs.collapse' || e.type == 'show.bs.collapse') {
+      e.target.closest('.accordion-item').classList.add('active');
+    } else {
+      e.target.closest('.accordion-item').classList.remove('active');
+    }
+  };
+
+  const accordionTriggerList = [].slice.call(document.querySelectorAll('.accordion'));
+  const accordionList = accordionTriggerList.map(function (accordionTriggerEl) {
+    accordionTriggerEl.addEventListener('show.bs.collapse', accordionActiveFunction);
+    accordionTriggerEl.addEventListener('hide.bs.collapse', accordionActiveFunction);
+  });
+
+  // Auto update layout based on screen size
+  window.Helpers.setAutoUpdate(true);
+
+  // Toggle Password Visibility
+  window.Helpers.initPasswordToggle();
+
+  // Speech To Text
+  window.Helpers.initSpeechToText();
+
+  // Manage menu expanded/collapsed with templateCustomizer & local storage
+  //------------------------------------------------------------------
+
+  // If current layout is horizontal OR current window screen is small (overlay menu) than return from here
+  if (window.Helpers.isSmallScreen()) {
+    return;
+  }
+
+  // If current layout is vertical and current window screen is > small
+
+  // Auto update menu collapsed/expanded based on the themeConfig
+  window.Helpers.setCollapsed(true, false);
+})();

src/main/webapp/resources/framework/template/sneat-1.0.0/assets/js/pages-account-settings-account.js

@@ -0,0 +1,29 @@
+/**
+ * Account Settings - Account
+ */
+
+'use strict';
+
+document.addEventListener('DOMContentLoaded', function (e) {
+  (function () {
+    const deactivateAcc = document.querySelector('#formAccountDeactivation');
+
+    // Update/reset user image of account page
+    let accountUserImage = document.getElementById('uploadedAvatar');
+    const fileInput = document.querySelector('.account-file-input'),
+      resetFileInput = document.querySelector('.account-image-reset');
+
+    if (accountUserImage) {
+      const resetImage = accountUserImage.src;
+      fileInput.onchange = () => {
+        if (fileInput.files[0]) {
+          accountUserImage.src = window.URL.createObjectURL(fileInput.files[0]);
+        }
+      };
+      resetFileInput.onclick = () => {
+        fileInput.value = '';
+        accountUserImage.src = resetImage;
+      };
+    }
+  })();
+});

src/main/webapp/resources/framework/template/sneat-1.0.0/assets/js/ui-modals.js

@@ -0,0 +1,33 @@
+/**
+ * UI Modals
+ */
+
+'use strict';
+
+(function () {
+  // On hiding modal, remove iframe video/audio to stop playing
+  const youTubeModal = document.querySelector('#youTubeModal'),
+    youTubeModalVideo = youTubeModal.querySelector('iframe');
+  youTubeModal.addEventListener('hidden.bs.modal', function () {
+    youTubeModalVideo.setAttribute('src', '');
+  });
+
+  // Function to get and auto play youTube video
+  const autoPlayYouTubeModal = function () {
+    const modalTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="modal"]'));
+    modalTriggerList.map(function (modalTriggerEl) {
+      modalTriggerEl.onclick = function () {
+        const theModal = this.getAttribute('data-bs-target'),
+          videoSRC = this.getAttribute('data-theVideo'),
+          videoSRCauto = `${videoSRC}?autoplay=1`,
+          modalVideo = document.querySelector(`${theModal} iframe`);
+        if (modalVideo) {
+          modalVideo.setAttribute('src', videoSRCauto);
+        }
+      };
+    });
+  };
+
+  // Calling function on load
+  autoPlayYouTubeModal();
+})();

src/main/webapp/resources/framework/template/sneat-1.0.0/assets/js/ui-popover.js

@@ -0,0 +1,13 @@
+// /**
+//  * UI Tooltips & Popovers
+//  */
+
+'use strict';
+
+(function () {
+  const popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
+  const popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
+    // added { html: true, sanitize: false } option to render button in content area of popover
+    return new bootstrap.Popover(popoverTriggerEl, { html: true, sanitize: false });
+  });
+})();

src/main/webapp/resources/framework/template/sneat-1.0.0/assets/js/ui-toasts.js

@@ -0,0 +1,39 @@
+/**
+ * UI Toasts
+ */
+
+'use strict';
+
+(function () {
+  // Bootstrap toasts example
+  // --------------------------------------------------------------------
+  const toastPlacementExample = document.querySelector('.toast-placement-ex'),
+    toastPlacementBtn = document.querySelector('#showToastPlacement');
+  let selectedType, selectedPlacement, toastPlacement;
+
+  // Dispose toast when open another
+  function toastDispose(toast) {
+    if (toast && toast._element !== null) {
+      if (toastPlacementExample) {
+        toastPlacementExample.classList.remove(selectedType);
+        DOMTokenList.prototype.remove.apply(toastPlacementExample.classList, selectedPlacement);
+      }
+      toast.dispose();
+    }
+  }
+  // Placement Button click
+  if (toastPlacementBtn) {
+    toastPlacementBtn.onclick = function () {
+      if (toastPlacement) {
+        toastDispose(toastPlacement);
+      }
+      selectedType = document.querySelector('#selectTypeOpt').value;
+      selectedPlacement = document.querySelector('#selectPlacement').value.split(' ');
+
+      toastPlacementExample.classList.add(selectedType);
+      DOMTokenList.prototype.add.apply(toastPlacementExample.classList, selectedPlacement);
+      toastPlacement = new bootstrap.Toast(toastPlacementExample);
+      toastPlacement.show();
+    };
+  }
+})();

src/main/webapp/resources/framework/template/sneat-1.0.0/assets/vendor/css/pages/page-account-settings.css

@@ -0,0 +1,7 @@
+.api-key-actions {
+  position: absolute !important;
+  top: 0.75rem;
+  right: 0.5rem;
+}
+
+/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInBhZ2VzL3BhZ2UtYWNjb3VudC1zZXR0aW5ncy5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFDRSw2QkFBNkI7RUFDN0IsWUFBWTtFQUNaLGFBQWE7QUFDZiIsImZpbGUiOiJwYWdlcy9wYWdlLWFjY291bnQtc2V0dGluZ3MuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLmFwaS1rZXktYWN0aW9ucyB7XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZSAhaW1wb3J0YW50O1xuICB0b3A6IDAuNzVyZW07XG4gIHJpZ2h0OiAwLjVyZW07XG59XG4iXX0= */

src/main/webapp/resources/framework/template/sneat-1.0.0/assets/vendor/css/pages/page-icons.css

@@ -0,0 +1,29 @@
+#icons-container .icon-card {
+  width: 128px;
+}
+#icons-container .icon-card i {
+  font-size: 2rem;
+}
+
+@media (max-width: 1024px) {
+  #icons-container .icon-card {
+    width: 126px;
+  }
+}
+@media (max-width: 767.98px) {
+  #icons-container .icon-card {
+    width: 131px;
+  }
+}
+@media (max-width: 414px) {
+  #icons-container .icon-card {
+    width: 110px;
+  }
+}
+@media (max-width: 375px) {
+  #icons-container .icon-card {
+    width: 150px;
+  }
+}
+
+/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInBhZ2VzL3BhZ2UtaWNvbnMuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0VBQ0UsWUFBWTtBQUNkO0FBQ0E7RUFDRSxlQUFlO0FBQ2pCOztBQUVBO0VBQ0U7SUFDRSxZQUFZO0VBQ2Q7QUFDRjtBQUNBO0VBQ0U7SUFDRSxZQUFZO0VBQ2Q7QUFDRjtBQUNBO0VBQ0U7SUFDRSxZQUFZO0VBQ2Q7QUFDRjtBQUNBO0VBQ0U7SUFDRSxZQUFZO0VBQ2Q7QUFDRiIsImZpbGUiOiJwYWdlcy9wYWdlLWljb25zLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIiNpY29ucy1jb250YWluZXIgLmljb24tY2FyZCB7XG4gIHdpZHRoOiAxMjhweDtcbn1cbiNpY29ucy1jb250YWluZXIgLmljb24tY2FyZCBpIHtcbiAgZm9udC1zaXplOiAycmVtO1xufVxuXG5AbWVkaWEgKG1heC13aWR0aDogMTAyNHB4KSB7XG4gICNpY29ucy1jb250YWluZXIgLmljb24tY2FyZCB7XG4gICAgd2lkdGg6IDEyNnB4O1xuICB9XG59XG5AbWVkaWEgKG1heC13aWR0aDogNzY3Ljk4cHgpIHtcbiAgI2ljb25zLWNvbnRhaW5lciAuaWNvbi1jYXJkIHtcbiAgICB3aWR0aDogMTMxcHg7XG4gIH1cbn1cbkBtZWRpYSAobWF4LXdpZHRoOiA0MTRweCkge1xuICAjaWNvbnMtY29udGFpbmVyIC5pY29uLWNhcmQge1xuICAgIHdpZHRoOiAxMTBweDtcbiAgfVxufVxuQG1lZGlhIChtYXgtd2lkdGg6IDM3NXB4KSB7XG4gICNpY29ucy1jb250YWluZXIgLmljb24tY2FyZCB7XG4gICAgd2lkdGg6IDE1MHB4O1xuICB9XG59XG4iXX0= */

src/main/webapp/resources/framework/template/sneat-1.0.0/assets/vendor/css/pages/page-misc.css

@@ -0,0 +1,10 @@
+.misc-wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  min-height: calc(100vh - (1.625rem * 2));
+  text-align: center;
+}
+
+/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInBhZ2VzL3BhZ2UtbWlzYy5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFDRSxhQUFhO0VBQ2Isc0JBQXNCO0VBQ3RCLHVCQUF1QjtFQUN2QixtQkFBbUI7RUFDbkIsd0NBQXdDO0VBQ3hDLGtCQUFrQjtBQUNwQiIsImZpbGUiOiJwYWdlcy9wYWdlLW1pc2MuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLm1pc2Mtd3JhcHBlciB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBtaW4taGVpZ2h0OiBjYWxjKDEwMHZoIC0gKDEuNjI1cmVtICogMikpO1xuICB0ZXh0LWFsaWduOiBjZW50ZXI7XG59XG4iXX0= */

src/main/webapp/resources/framework/template/sneat-1.0.0/assets/vendor/libs/apex-charts/apex-charts.css

@@ -0,0 +1,746 @@
+/**
+* Apex Charts
+*/
+.apexcharts-canvas {
+  position: relative;
+  user-select: none;
+  /* cannot give overflow: hidden as it will crop tooltips which overflow outside chart area */
+}
+
+/* scrollbar is not visible by default for legend, hence forcing the visibility */
+.apexcharts-canvas ::-webkit-scrollbar {
+  -webkit-appearance: none;
+  width: 6px;
+}
+
+.apexcharts-canvas ::-webkit-scrollbar-thumb {
+  border-radius: 4px;
+  background-color: rgba(0, 0, 0, 0.5);
+  box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
+  -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
+}
+
+.apexcharts-inner {
+  position: relative;
+}
+
+.apexcharts-text tspan {
+  font-family: inherit;
+}
+
+.legend-mouseover-inactive {
+  transition: 0.15s ease all;
+  opacity: 0.2;
+}
+
+.apexcharts-series-collapsed {
+  opacity: 0;
+}
+
+.apexcharts-tooltip {
+  border-radius: 5px;
+  box-shadow: 2px 2px 6px -4px #999;
+  cursor: default;
+  font-size: 14px;
+  left: 62px;
+  opacity: 0;
+  pointer-events: none;
+  position: absolute;
+  top: 20px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  white-space: nowrap;
+  z-index: 12;
+  transition: 0.15s ease all;
+}
+
+.apexcharts-tooltip.apexcharts-active {
+  opacity: 1;
+  transition: 0.15s ease all;
+}
+
+.apexcharts-tooltip.apexcharts-theme-light {
+  border: 1px solid #e3e3e3;
+  background: rgba(255, 255, 255, 0.96);
+}
+
+.apexcharts-tooltip.apexcharts-theme-dark {
+  color: #fff;
+  background: rgba(30, 30, 30, 0.8);
+}
+
+.apexcharts-tooltip * {
+  font-family: inherit;
+}
+
+.apexcharts-tooltip-title {
+  padding: 6px;
+  font-size: 15px;
+  margin-bottom: 4px;
+}
+
+.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
+  background: #ECEFF1;
+  border-bottom: 1px solid #ddd;
+}
+
+.apexcharts-tooltip.apexcharts-theme-dark .apexcharts-tooltip-title {
+  background: rgba(0, 0, 0, 0.7);
+  border-bottom: 1px solid #333;
+}
+
+.apexcharts-tooltip-text-y-value,
+.apexcharts-tooltip-text-goals-value,
+.apexcharts-tooltip-text-z-value {
+  display: inline-block;
+  font-weight: 600;
+  margin-left: 5px;
+}
+
+.apexcharts-tooltip-text-y-label:empty,
+.apexcharts-tooltip-text-y-value:empty,
+.apexcharts-tooltip-text-goals-label:empty,
+.apexcharts-tooltip-text-goals-value:empty,
+.apexcharts-tooltip-text-z-value:empty {
+  display: none;
+}
+
+.apexcharts-tooltip-text-y-value,
+.apexcharts-tooltip-text-goals-value,
+.apexcharts-tooltip-text-z-value {
+  font-weight: 600;
+}
+
+.apexcharts-tooltip-text-goals-label,
+.apexcharts-tooltip-text-goals-value {
+  padding: 6px 0 5px;
+}
+
+.apexcharts-tooltip-goals-group,
+.apexcharts-tooltip-text-goals-label,
+.apexcharts-tooltip-text-goals-value {
+  display: flex;
+}
+
+.apexcharts-tooltip-text-goals-label:not(:empty),
+.apexcharts-tooltip-text-goals-value:not(:empty) {
+  margin-top: -6px;
+}
+
+.apexcharts-tooltip-marker {
+  width: 12px;
+  height: 12px;
+  position: relative;
+  top: 0px;
+  margin-right: 10px;
+  border-radius: 50%;
+}
+
+.apexcharts-tooltip-series-group {
+  padding: 0 10px;
+  display: none;
+  text-align: left;
+  justify-content: left;
+  align-items: center;
+}
+
+.apexcharts-tooltip-series-group.apexcharts-active .apexcharts-tooltip-marker {
+  opacity: 1;
+}
+
+.apexcharts-tooltip-series-group.apexcharts-active,
+.apexcharts-tooltip-series-group:last-child {
+  padding-bottom: 4px;
+}
+
+.apexcharts-tooltip-series-group-hidden {
+  opacity: 0;
+  height: 0;
+  line-height: 0;
+  padding: 0 !important;
+}
+
+.apexcharts-tooltip-y-group {
+  padding: 6px 0 5px;
+}
+
+.apexcharts-tooltip-box, .apexcharts-custom-tooltip {
+  padding: 4px 8px;
+}
+
+.apexcharts-tooltip-boxPlot {
+  display: flex;
+  flex-direction: column-reverse;
+}
+
+.apexcharts-tooltip-box > div {
+  margin: 4px 0;
+}
+
+.apexcharts-tooltip-box span.value {
+  font-weight: bold;
+}
+
+.apexcharts-tooltip-rangebar {
+  padding: 5px 8px;
+}
+
+.apexcharts-tooltip-rangebar .category {
+  font-weight: 600;
+  color: #777;
+}
+
+.apexcharts-tooltip-rangebar .series-name {
+  font-weight: bold;
+  display: block;
+  margin-bottom: 5px;
+}
+
+.apexcharts-xaxistooltip {
+  opacity: 0;
+  padding: 9px 10px;
+  pointer-events: none;
+  color: #373d3f;
+  font-size: 13px;
+  text-align: center;
+  border-radius: 2px;
+  position: absolute;
+  z-index: 10;
+  background: #ECEFF1;
+  border: 1px solid #90A4AE;
+  transition: 0.15s ease all;
+}
+
+.apexcharts-xaxistooltip.apexcharts-theme-dark {
+  background: rgba(0, 0, 0, 0.7);
+  border: 1px solid rgba(0, 0, 0, 0.5);
+  color: #fff;
+}
+
+.apexcharts-xaxistooltip:after,
+.apexcharts-xaxistooltip:before {
+  left: 50%;
+  border: solid transparent;
+  content: " ";
+  height: 0;
+  width: 0;
+  position: absolute;
+  pointer-events: none;
+}
+
+.apexcharts-xaxistooltip:after {
+  border-color: rgba(236, 239, 241, 0);
+  border-width: 6px;
+  margin-left: -6px;
+}
+
+.apexcharts-xaxistooltip:before {
+  border-color: rgba(144, 164, 174, 0);
+  border-width: 7px;
+  margin-left: -7px;
+}
+
+.apexcharts-xaxistooltip-bottom:after,
+.apexcharts-xaxistooltip-bottom:before {
+  bottom: 100%;
+}
+
+.apexcharts-xaxistooltip-top:after,
+.apexcharts-xaxistooltip-top:before {
+  top: 100%;
+}
+
+.apexcharts-xaxistooltip-bottom:after {
+  border-bottom-color: #ECEFF1;
+}
+
+.apexcharts-xaxistooltip-bottom:before {
+  border-bottom-color: #90A4AE;
+}
+
+.apexcharts-xaxistooltip-bottom.apexcharts-theme-dark:after {
+  border-bottom-color: rgba(0, 0, 0, 0.5);
+}
+
+.apexcharts-xaxistooltip-bottom.apexcharts-theme-dark:before {
+  border-bottom-color: rgba(0, 0, 0, 0.5);
+}
+
+.apexcharts-xaxistooltip-top:after {
+  border-top-color: #ECEFF1;
+}
+
+.apexcharts-xaxistooltip-top:before {
+  border-top-color: #90A4AE;
+}
+
+.apexcharts-xaxistooltip-top.apexcharts-theme-dark:after {
+  border-top-color: rgba(0, 0, 0, 0.5);
+}
+
+.apexcharts-xaxistooltip-top.apexcharts-theme-dark:before {
+  border-top-color: rgba(0, 0, 0, 0.5);
+}
+
+.apexcharts-xaxistooltip.apexcharts-active {
+  opacity: 1;
+  transition: 0.15s ease all;
+}
+
+.apexcharts-yaxistooltip {
+  opacity: 0;
+  padding: 4px 10px;
+  pointer-events: none;
+  color: #373d3f;
+  font-size: 13px;
+  text-align: center;
+  border-radius: 2px;
+  position: absolute;
+  z-index: 10;
+  background: #ECEFF1;
+  border: 1px solid #90A4AE;
+}
+
+.apexcharts-yaxistooltip.apexcharts-theme-dark {
+  background: rgba(0, 0, 0, 0.7);
+  border: 1px solid rgba(0, 0, 0, 0.5);
+  color: #fff;
+}
+
+.apexcharts-yaxistooltip:after,
+.apexcharts-yaxistooltip:before {
+  top: 50%;
+  border: solid transparent;
+  content: " ";
+  height: 0;
+  width: 0;
+  position: absolute;
+  pointer-events: none;
+}
+
+.apexcharts-yaxistooltip:after {
+  border-color: rgba(236, 239, 241, 0);
+  border-width: 6px;
+  margin-top: -6px;
+}
+
+.apexcharts-yaxistooltip:before {
+  border-color: rgba(144, 164, 174, 0);
+  border-width: 7px;
+  margin-top: -7px;
+}
+
+.apexcharts-yaxistooltip-left:after,
+.apexcharts-yaxistooltip-left:before {
+  left: 100%;
+}
+
+.apexcharts-yaxistooltip-right:after,
+.apexcharts-yaxistooltip-right:before {
+  right: 100%;
+}
+
+.apexcharts-yaxistooltip-left:after {
+  border-left-color: #ECEFF1;
+}
+
+.apexcharts-yaxistooltip-left:before {
+  border-left-color: #90A4AE;
+}
+
+.apexcharts-yaxistooltip-left.apexcharts-theme-dark:after {
+  border-left-color: rgba(0, 0, 0, 0.5);
+}
+
+.apexcharts-yaxistooltip-left.apexcharts-theme-dark:before {
+  border-left-color: rgba(0, 0, 0, 0.5);
+}
+
+.apexcharts-yaxistooltip-right:after {
+  border-right-color: #ECEFF1;
+}
+
+.apexcharts-yaxistooltip-right:before {
+  border-right-color: #90A4AE;
+}
+
+.apexcharts-yaxistooltip-right.apexcharts-theme-dark:after {
+  border-right-color: rgba(0, 0, 0, 0.5);
+}
+
+.apexcharts-yaxistooltip-right.apexcharts-theme-dark:before {
+  border-right-color: rgba(0, 0, 0, 0.5);
+}
+
+.apexcharts-yaxistooltip.apexcharts-active {
+  opacity: 1;
+}
+
+.apexcharts-yaxistooltip-hidden {
+  display: none;
+}
+
+.apexcharts-xcrosshairs,
+.apexcharts-ycrosshairs {
+  pointer-events: none;
+  opacity: 0;
+  transition: 0.15s ease all;
+}
+
+.apexcharts-xcrosshairs.apexcharts-active,
+.apexcharts-ycrosshairs.apexcharts-active {
+  opacity: 1;
+  transition: 0.15s ease all;
+}
+
+.apexcharts-ycrosshairs-hidden {
+  opacity: 0;
+}
+
+.apexcharts-selection-rect {
+  cursor: move;
+}
+
+.svg_select_boundingRect, .svg_select_points_rot {
+  pointer-events: none;
+  opacity: 0;
+  visibility: hidden;
+}
+
+.apexcharts-selection-rect + g .svg_select_boundingRect,
+.apexcharts-selection-rect + g .svg_select_points_rot {
+  opacity: 0;
+  visibility: hidden;
+}
+
+.apexcharts-selection-rect + g .svg_select_points_l,
+.apexcharts-selection-rect + g .svg_select_points_r {
+  cursor: ew-resize;
+  opacity: 1;
+  visibility: visible;
+}
+
+.svg_select_points {
+  fill: #efefef;
+  stroke: #333;
+  rx: 2;
+}
+
+.apexcharts-svg.apexcharts-zoomable.hovering-zoom {
+  cursor: crosshair;
+}
+
+.apexcharts-svg.apexcharts-zoomable.hovering-pan {
+  cursor: move;
+}
+
+.apexcharts-zoom-icon,
+.apexcharts-zoomin-icon,
+.apexcharts-zoomout-icon,
+.apexcharts-reset-icon,
+.apexcharts-pan-icon,
+.apexcharts-selection-icon,
+.apexcharts-menu-icon,
+.apexcharts-toolbar-custom-icon {
+  cursor: pointer;
+  width: 20px;
+  height: 20px;
+  line-height: 24px;
+  color: #6E8192;
+  text-align: center;
+}
+
+.apexcharts-zoom-icon svg,
+.apexcharts-zoomin-icon svg,
+.apexcharts-zoomout-icon svg,
+.apexcharts-reset-icon svg,
+.apexcharts-menu-icon svg {
+  fill: #6E8192;
+}
+
+.apexcharts-selection-icon svg {
+  fill: #444;
+  transform: scale(0.76);
+}
+
+.apexcharts-theme-dark .apexcharts-zoom-icon svg,
+.apexcharts-theme-dark .apexcharts-zoomin-icon svg,
+.apexcharts-theme-dark .apexcharts-zoomout-icon svg,
+.apexcharts-theme-dark .apexcharts-reset-icon svg,
+.apexcharts-theme-dark .apexcharts-pan-icon svg,
+.apexcharts-theme-dark .apexcharts-selection-icon svg,
+.apexcharts-theme-dark .apexcharts-menu-icon svg,
+.apexcharts-theme-dark .apexcharts-toolbar-custom-icon svg {
+  fill: #f3f4f5;
+}
+
+.apexcharts-canvas .apexcharts-zoom-icon.apexcharts-selected svg,
+.apexcharts-canvas .apexcharts-selection-icon.apexcharts-selected svg,
+.apexcharts-canvas .apexcharts-reset-zoom-icon.apexcharts-selected svg {
+  fill: #008FFB;
+}
+
+.apexcharts-theme-light .apexcharts-selection-icon:not(.apexcharts-selected):hover svg,
+.apexcharts-theme-light .apexcharts-zoom-icon:not(.apexcharts-selected):hover svg,
+.apexcharts-theme-light .apexcharts-zoomin-icon:hover svg,
+.apexcharts-theme-light .apexcharts-zoomout-icon:hover svg,
+.apexcharts-theme-light .apexcharts-reset-icon:hover svg,
+.apexcharts-theme-light .apexcharts-menu-icon:hover svg {
+  fill: #333;
+}
+
+.apexcharts-selection-icon,
+.apexcharts-menu-icon {
+  position: relative;
+}
+
+.apexcharts-reset-icon {
+  margin-left: 5px;
+}
+
+.apexcharts-zoom-icon,
+.apexcharts-reset-icon,
+.apexcharts-menu-icon {
+  transform: scale(0.85);
+}
+
+.apexcharts-zoomin-icon,
+.apexcharts-zoomout-icon {
+  transform: scale(0.7);
+}
+
+.apexcharts-zoomout-icon {
+  margin-right: 3px;
+}
+
+.apexcharts-pan-icon {
+  transform: scale(0.62);
+  position: relative;
+  left: 1px;
+  top: 0px;
+}
+
+.apexcharts-pan-icon svg {
+  fill: #fff;
+  stroke: #6E8192;
+  stroke-width: 2;
+}
+
+.apexcharts-pan-icon.apexcharts-selected svg {
+  stroke: #008FFB;
+}
+
+.apexcharts-pan-icon:not(.apexcharts-selected):hover svg {
+  stroke: #333;
+}
+
+.apexcharts-toolbar {
+  position: absolute;
+  z-index: 11;
+  max-width: 176px;
+  text-align: right;
+  border-radius: 3px;
+  padding: 0px 6px 2px 6px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.apexcharts-menu {
+  background: #fff;
+  position: absolute;
+  top: 100%;
+  border: 1px solid #ddd;
+  border-radius: 3px;
+  padding: 3px;
+  right: 10px;
+  opacity: 0;
+  min-width: 110px;
+  transition: 0.15s ease all;
+  pointer-events: none;
+}
+
+.apexcharts-menu.apexcharts-menu-open {
+  opacity: 1;
+  pointer-events: all;
+  transition: 0.15s ease all;
+}
+
+.apexcharts-menu-item {
+  padding: 6px 7px;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.apexcharts-theme-light .apexcharts-menu-item:hover {
+  background: #eee;
+}
+
+.apexcharts-theme-dark .apexcharts-menu {
+  background: rgba(0, 0, 0, 0.7);
+  color: #fff;
+}
+
+@media screen and (min-width: 768px) {
+  .apexcharts-canvas:hover .apexcharts-toolbar {
+    opacity: 1;
+  }
+}
+.apexcharts-datalabel.apexcharts-element-hidden {
+  opacity: 0;
+}
+
+.apexcharts-pie-label,
+.apexcharts-datalabels,
+.apexcharts-datalabel,
+.apexcharts-datalabel-label,
+.apexcharts-datalabel-value {
+  cursor: default;
+  pointer-events: none;
+}
+
+.apexcharts-pie-label-delay {
+  opacity: 0;
+  animation-name: opaque;
+  animation-duration: 0.3s;
+  animation-fill-mode: forwards;
+  animation-timing-function: ease;
+}
+
+.apexcharts-canvas .apexcharts-element-hidden {
+  opacity: 0;
+}
+
+.apexcharts-hide .apexcharts-series-points {
+  opacity: 0;
+}
+
+.apexcharts-gridline,
+.apexcharts-annotation-rect,
+.apexcharts-tooltip .apexcharts-marker,
+.apexcharts-area-series .apexcharts-area,
+.apexcharts-line,
+.apexcharts-zoom-rect,
+.apexcharts-toolbar svg,
+.apexcharts-area-series .apexcharts-series-markers .apexcharts-marker.no-pointer-events,
+.apexcharts-line-series .apexcharts-series-markers .apexcharts-marker.no-pointer-events,
+.apexcharts-radar-series path,
+.apexcharts-radar-series polygon {
+  pointer-events: none;
+}
+
+/* markers */
+.apexcharts-marker {
+  transition: 0.15s ease all;
+}
+
+@keyframes opaque {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+/* Resize generated styles */
+@keyframes resizeanim {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 0;
+  }
+}
+.resize-triggers {
+  animation: 1ms resizeanim;
+  visibility: hidden;
+  opacity: 0;
+}
+
+.resize-triggers,
+.resize-triggers > div,
+.contract-trigger:before {
+  content: " ";
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+}
+
+.resize-triggers > div {
+  background: #eee;
+  overflow: auto;
+}
+
+.contract-trigger:before {
+  width: 200%;
+  height: 200%;
+}
+
+.light-style .apexcharts-canvas .apexcharts-tooltip {
+  background: #fff;
+  border-color: #d9dee3;
+  box-shadow: 0 0.25rem 1rem rgba(161, 172, 184, 0.45);
+}
+.light-style .apexcharts-canvas .apexcharts-tooltip .apexcharts-tooltip-title {
+  background: #fff;
+  border-color: #d9dee3;
+  font-family: var(--bs-font-sans-serif) !important;
+  font-weight: 600;
+}
+.light-style .apexcharts-canvas .apexcharts-xaxistooltip,
+.light-style .apexcharts-canvas .apexcharts-yaxistooltip {
+  background: #f5f5f9;
+  border-color: #d9dee3;
+}
+.light-style .apexcharts-canvas .apexcharts-xaxistooltip.apexcharts-xaxistooltip-bottom:after, .light-style .apexcharts-canvas .apexcharts-xaxistooltip.apexcharts-yaxistooltip-bottom:after,
+.light-style .apexcharts-canvas .apexcharts-yaxistooltip.apexcharts-xaxistooltip-bottom:after,
+.light-style .apexcharts-canvas .apexcharts-yaxistooltip.apexcharts-yaxistooltip-bottom:after {
+  border-bottom-color: #f5f5f9;
+}
+.light-style .apexcharts-canvas .apexcharts-xaxistooltip.apexcharts-xaxistooltip-bottom:before, .light-style .apexcharts-canvas .apexcharts-xaxistooltip.apexcharts-yaxistooltip-bottom:before,
+.light-style .apexcharts-canvas .apexcharts-yaxistooltip.apexcharts-xaxistooltip-bottom:before,
+.light-style .apexcharts-canvas .apexcharts-yaxistooltip.apexcharts-yaxistooltip-bottom:before {
+  border-bottom-color: #d9dee3;
+}
+.light-style .apexcharts-canvas .apexcharts-xaxistooltip.apexcharts-xaxistooltip-left:after, .light-style .apexcharts-canvas .apexcharts-xaxistooltip.apexcharts-yaxistooltip-left:after,
+.light-style .apexcharts-canvas .apexcharts-yaxistooltip.apexcharts-xaxistooltip-left:after,
+.light-style .apexcharts-canvas .apexcharts-yaxistooltip.apexcharts-yaxistooltip-left:after {
+  border-left-color: #f5f5f9;
+}
+.light-style .apexcharts-canvas .apexcharts-xaxistooltip.apexcharts-xaxistooltip-left:before, .light-style .apexcharts-canvas .apexcharts-xaxistooltip.apexcharts-yaxistooltip-left:before,
+.light-style .apexcharts-canvas .apexcharts-yaxistooltip.apexcharts-xaxistooltip-left:before,
+.light-style .apexcharts-canvas .apexcharts-yaxistooltip.apexcharts-yaxistooltip-left:before {
+  border-left-color: #d9dee3;
+}
+.light-style .apexcharts-canvas .apexcharts-xaxistooltip.apexcharts-xaxistooltip-right:after, .light-style .apexcharts-canvas .apexcharts-xaxistooltip.apexcharts-yaxistooltip-right:after,
+.light-style .apexcharts-canvas .apexcharts-yaxistooltip.apexcharts-xaxistooltip-right:after,
+.light-style .apexcharts-canvas .apexcharts-yaxistooltip.apexcharts-yaxistooltip-right:after {
+  border-right-color: #f5f5f9;
+}
+.light-style .apexcharts-canvas .apexcharts-xaxistooltip.apexcharts-xaxistooltip-right:before, .light-style .apexcharts-canvas .apexcharts-xaxistooltip.apexcharts-yaxistooltip-right:before,
+.light-style .apexcharts-canvas .apexcharts-yaxistooltip.apexcharts-xaxistooltip-right:before,
+.light-style .apexcharts-canvas .apexcharts-yaxistooltip.apexcharts-yaxistooltip-right:before {
+  border-right-color: #d9dee3;
+}
+.light-style .apexcharts-canvas .apexcharts-xaxistooltip.apexcharts-xaxistooltip-top:after, .light-style .apexcharts-canvas .apexcharts-xaxistooltip.apexcharts-yaxistooltip-top:after,
+.light-style .apexcharts-canvas .apexcharts-yaxistooltip.apexcharts-xaxistooltip-top:after,
+.light-style .apexcharts-canvas .apexcharts-yaxistooltip.apexcharts-yaxistooltip-top:after {
+  border-top-color: #f5f5f9;
+}
+.light-style .apexcharts-canvas .apexcharts-xaxistooltip.apexcharts-xaxistooltip-top:before, .light-style .apexcharts-canvas .apexcharts-xaxistooltip.apexcharts-yaxistooltip-top:before,
+.light-style .apexcharts-canvas .apexcharts-yaxistooltip.apexcharts-xaxistooltip-top:before,
+.light-style .apexcharts-canvas .apexcharts-yaxistooltip.apexcharts-yaxistooltip-top:before {
+  border-top-color: #d9dee3;
+}
+.light-style .apexcharts-canvas .apexcharts-tooltip-text {
+  font-family: var(--bs-font-sans-serif) !important;
+  filter: none;
+}
+.light-style .apexcharts-canvas .apexcharts-marker {
+  filter: drop-shadow(0 2px 4px #a1acb866);
+}

src/main/webapp/resources/framework/template/sneat-1.0.0/assets/vendor/libs/highlight/highlight-github.css

@@ -0,0 +1 @@
+@import '../../node_modules/highlight.js/styles/github.css';

src/main/webapp/resources/framework/template/sneat-1.0.0/assets/vendor/libs/highlight/highlight.css

@@ -0,0 +1,95 @@
+/*
+
+Atom One Light by Daniel Gamage
+Original One Light Syntax theme from https://github.com/atom/one-light-syntax
+
+base:    #fafafa
+mono-1:  #383a42
+mono-2:  #686b77
+mono-3:  #a0a1a7
+hue-1:   #0184bb
+hue-2:   #4078f2
+hue-3:   #a626a4
+hue-4:   #50a14f
+hue-5:   #e45649
+hue-5-2: #c91243
+hue-6:   #986801
+hue-6-2: #c18401
+
+*/
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  color: #383a42;
+  background: #fafafa;
+}
+
+.hljs-comment,
+.hljs-quote {
+  color: #a0a1a7;
+  font-style: italic;
+}
+
+.hljs-doctag,
+.hljs-keyword,
+.hljs-formula {
+  color: #a626a4;
+}
+
+.hljs-section,
+.hljs-name,
+.hljs-selector-tag,
+.hljs-deletion,
+.hljs-subst {
+  color: #e45649;
+}
+
+.hljs-literal {
+  color: #0184bb;
+}
+
+.hljs-string,
+.hljs-regexp,
+.hljs-addition,
+.hljs-attribute,
+.hljs-meta-string {
+  color: #50a14f;
+}
+
+.hljs-built_in,
+.hljs-class .hljs-title {
+  color: #c18401;
+}
+
+.hljs-attr,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-type,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo,
+.hljs-number {
+  color: #986801;
+}
+
+.hljs-symbol,
+.hljs-bullet,
+.hljs-link,
+.hljs-meta,
+.hljs-selector-id,
+.hljs-title {
+  color: #4078f2;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}

src/main/webapp/resources/framework/template/sneat-1.0.0/assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.css

@@ -0,0 +1,211 @@
+/*
+ * Container style
+ */
+.ps {
+  overflow: hidden !important;
+  overflow-anchor: none;
+  -ms-overflow-style: none;
+  touch-action: auto;
+  -ms-touch-action: auto;
+}
+
+/*
+ * Scrollbar rail styles
+ */
+.ps__rail-x {
+  display: none;
+  opacity: 0;
+  transition: background-color 0.2s linear, opacity 0.2s linear;
+  -webkit-transition: background-color 0.2s linear, opacity 0.2s linear;
+  height: 15px;
+  /* there must be 'bottom' or 'top' for ps__rail-x */
+  bottom: 0px;
+  /* please don't change 'position' */
+  position: absolute;
+}
+
+.ps__rail-y {
+  display: none;
+  opacity: 0;
+  transition: background-color 0.2s linear, opacity 0.2s linear;
+  -webkit-transition: background-color 0.2s linear, opacity 0.2s linear;
+  width: 15px;
+  /* there must be 'right' or 'left' for ps__rail-y */
+  right: 0;
+  /* please don't change 'position' */
+  position: absolute;
+}
+
+.ps--active-x > .ps__rail-x,
+.ps--active-y > .ps__rail-y {
+  display: block;
+  background-color: transparent;
+}
+
+.ps:hover > .ps__rail-x,
+.ps:hover > .ps__rail-y,
+.ps--focus > .ps__rail-x,
+.ps--focus > .ps__rail-y,
+.ps--scrolling-x > .ps__rail-x,
+.ps--scrolling-y > .ps__rail-y {
+  opacity: 0.6;
+}
+
+.ps .ps__rail-x:hover,
+.ps .ps__rail-y:hover,
+.ps .ps__rail-x:focus,
+.ps .ps__rail-y:focus,
+.ps .ps__rail-x.ps--clicking,
+.ps .ps__rail-y.ps--clicking {
+  background-color: #eee;
+  opacity: 0.9;
+}
+
+/*
+ * Scrollbar thumb styles
+ */
+.ps__thumb-x {
+  background-color: #aaa;
+  border-radius: 6px;
+  transition: background-color 0.2s linear, height 0.2s ease-in-out;
+  -webkit-transition: background-color 0.2s linear, height 0.2s ease-in-out;
+  height: 6px;
+  /* there must be 'bottom' for ps__thumb-x */
+  bottom: 2px;
+  /* please don't change 'position' */
+  position: absolute;
+}
+
+.ps__thumb-y {
+  background-color: #aaa;
+  border-radius: 6px;
+  transition: background-color 0.2s linear, width 0.2s ease-in-out;
+  -webkit-transition: background-color 0.2s linear, width 0.2s ease-in-out;
+  width: 6px;
+  /* there must be 'right' for ps__thumb-y */
+  right: 2px;
+  /* please don't change 'position' */
+  position: absolute;
+}
+
+.ps__rail-x:hover > .ps__thumb-x,
+.ps__rail-x:focus > .ps__thumb-x,
+.ps__rail-x.ps--clicking .ps__thumb-x {
+  background-color: #999;
+  height: 11px;
+}
+
+.ps__rail-y:hover > .ps__thumb-y,
+.ps__rail-y:focus > .ps__thumb-y,
+.ps__rail-y.ps--clicking .ps__thumb-y {
+  background-color: #999;
+  width: 11px;
+}
+
+/* MS supports */
+@supports (-ms-overflow-style: none) {
+  .ps {
+    overflow: auto !important;
+  }
+}
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+  .ps {
+    overflow: auto !important;
+  }
+}
+.ps {
+  position: relative;
+}
+
+.ps__rail-x {
+  height: 0.25rem;
+}
+
+.ps__rail-y {
+  width: 0.25rem;
+}
+
+.ps__rail-x,
+.ps__rail-y,
+.ps__thumb-x,
+.ps__thumb-y {
+  border-radius: 10rem;
+}
+
+.ps__rail-x:hover,
+.ps__rail-x:focus,
+.ps__rail-x.ps--clicking,
+.ps__rail-x:hover > .ps__thumb-x,
+.ps__rail-x:focus > .ps__thumb-x,
+.ps__rail-x.ps--clicking > .ps__thumb-x {
+  height: 0.375rem;
+}
+
+.ps__rail-y:hover,
+.ps__rail-y:focus,
+.ps__rail-y.ps--clicking,
+.ps__rail-y:hover > .ps__thumb-y,
+.ps__rail-y:focus > .ps__thumb-y,
+.ps__rail-y.ps--clicking > .ps__thumb-y {
+  width: 0.375rem;
+}
+
+.ps__thumb-x {
+  height: 0.25rem;
+  bottom: 0;
+}
+
+.ps__thumb-y {
+  width: 0.25rem;
+  right: 0;
+}
+
+.light-style .ps__thumb-x,
+.light-style .ps__thumb-y {
+  background-color: rgba(67, 89, 113, 0.4);
+}
+.light-style .ps__rail-x:hover,
+.light-style .ps__rail-y:hover,
+.light-style .ps__rail-x:focus,
+.light-style .ps__rail-y:focus,
+.light-style .ps__rail-x.ps--clicking,
+.light-style .ps__rail-y.ps--clicking {
+  background-color: rgba(67, 89, 113, 0.2);
+}
+.light-style .ps__rail-x:hover > .ps__thumb-x,
+.light-style .ps__rail-y:hover > .ps__thumb-y,
+.light-style .ps__rail-x:focus > .ps__thumb-x,
+.light-style .ps__rail-y:focus > .ps__thumb-y,
+.light-style .ps__rail-x.ps--clicking > .ps__thumb-x,
+.light-style .ps__rail-y.ps--clicking > .ps__thumb-y {
+  background-color: rgba(67, 89, 113, 0.7);
+}
+.light-style .ps-inverted .ps__rail-x:hover,
+.light-style .ps-inverted .ps__rail-y:hover,
+.light-style .ps-inverted .ps__rail-x:focus,
+.light-style .ps-inverted .ps__rail-y:focus,
+.light-style .ps-inverted .ps__rail-x.ps--clicking,
+.light-style .ps-inverted .ps__rail-y.ps--clicking {
+  background-color: rgba(255, 255, 255, 0.5);
+}
+.light-style .ps-inverted .ps__thumb-x,
+.light-style .ps-inverted .ps__thumb-y {
+  background-color: rgba(255, 255, 255, 0.7);
+}
+.light-style .ps-inverted .ps__rail-x:hover > .ps__thumb-x,
+.light-style .ps-inverted .ps__rail-y:hover > .ps__thumb-y,
+.light-style .ps-inverted .ps__rail-x:focus > .ps__thumb-x,
+.light-style .ps-inverted .ps__rail-y:focus > .ps__thumb-y,
+.light-style .ps-inverted .ps__rail-x.ps--clicking > .ps__thumb-x,
+.light-style .ps-inverted .ps__rail-y.ps--clicking > .ps__thumb-y {
+  background-color: #fff;
+}
+
+@supports (-moz-appearance: none) {
+  #both-scrollbars-example {
+    max-width: 1080px;
+    margin: 0 auto;
+    padding-left: 0;
+    padding-right: 0;
+  }
+}

src/main/webapp/resources/framework/template/sneat-1.0.0/js/bootstrap.js

@@ -0,0 +1,29 @@
+import * as bootstrap from 'bootstrap'
+
+// Extend Tooltip to add color options
+bootstrap.Tooltip.prototype.show = (original => {
+  return function addTooltipColor() {
+    if (this._config.toggle === 'tooltip') {
+      if (this._element.getAttribute('data-color')) {
+        const str = `tooltip-${this._element.getAttribute('data-color')}`
+        this.getTipElement().classList.add(str)
+      }
+    }
+    original.apply(this)
+  }
+})(bootstrap.Tooltip.prototype.show)
+
+// Extend Popover to add color options
+bootstrap.Popover.prototype.show = (original => {
+  return function addPopoverColor() {
+    if (this._config.toggle === 'popover') {
+      if (this._element.getAttribute('data-color')) {
+        const str = `popover-${this._element.getAttribute('data-color')}`
+        this.getTipElement().classList.add(str)
+      }
+    }
+    original.apply(this)
+  }
+})(bootstrap.Popover.prototype.show)
+
+export { bootstrap }

src/main/webapp/resources/framework/template/sneat-1.0.0/js/helpers.js

@@ -0,0 +1,850 @@
+// Constants
+const TRANS_EVENTS = ['transitionend', 'webkitTransitionEnd', 'oTransitionEnd']
+const TRANS_PROPERTIES = ['transition', 'MozTransition', 'webkitTransition', 'WebkitTransition', 'OTransition']
+const INLINE_STYLES = `
+.layout-menu-fixed .layout-navbar-full .layout-menu,
+.layout-page {
+  padding-top: {navbarHeight}px !important;
+}
+.content-wrapper {
+  padding-bottom: {footerHeight}px !important;
+}`
+
+// Guard
+function requiredParam(name) {
+  throw new Error(`Parameter required${name ? `: \`${name}\`` : ''}`)
+}
+
+const Helpers = {
+  // Root Element
+  ROOT_EL: typeof window !== 'undefined' ? document.documentElement : null,
+
+  // Large screens breakpoint
+  LAYOUT_BREAKPOINT: 1200,
+
+  // Resize delay in milliseconds
+  RESIZE_DELAY: 200,
+
+  menuPsScroll: null,
+
+  mainMenu: null,
+
+  // Internal variables
+  _curStyle: null,
+  _styleEl: null,
+  _resizeTimeout: null,
+  _resizeCallback: null,
+  _transitionCallback: null,
+  _transitionCallbackTimeout: null,
+  _listeners: [],
+  _initialized: false,
+  _autoUpdate: false,
+  _lastWindowHeight: 0,
+
+  // *******************************************************************************
+  // * Utilities
+
+  // ---
+  // Scroll To Active Menu Item
+  _scrollToActive(animate = false, duration = 500) {
+    const layoutMenu = this.getLayoutMenu()
+
+    if (!layoutMenu) return
+
+    let activeEl = layoutMenu.querySelector('li.menu-item.active:not(.open)')
+
+    if (activeEl) {
+      // t = current time
+      // b = start value
+      // c = change in value
+      // d = duration
+      const easeInOutQuad = (t, b, c, d) => {
+        t /= d / 2
+        if (t < 1) return (c / 2) * t * t + b
+        t -= 1
+        return (-c / 2) * (t * (t - 2) - 1) + b
+      }
+
+      const element = this.getLayoutMenu().querySelector('.menu-inner')
+
+      if (typeof activeEl === 'string') {
+        activeEl = document.querySelector(activeEl)
+      }
+      if (typeof activeEl !== 'number') {
+        activeEl = activeEl.getBoundingClientRect().top + element.scrollTop
+      }
+
+      // If active element's top position is less than 2/3 (66%) of menu height than do not scroll
+      if (activeEl < parseInt((element.clientHeight * 2) / 3, 10)) return
+
+      const start = element.scrollTop
+      const change = activeEl - start - parseInt(element.clientHeight / 2, 10)
+      const startDate = +new Date()
+
+      if (animate === true) {
+        const animateScroll = () => {
+          const currentDate = +new Date()
+          const currentTime = currentDate - startDate
+          const val = easeInOutQuad(currentTime, start, change, duration)
+          element.scrollTop = val
+          if (currentTime < duration) {
+            requestAnimationFrame(animateScroll)
+          } else {
+            element.scrollTop = change
+          }
+        }
+        animateScroll()
+      } else {
+        element.scrollTop = change
+      }
+    }
+  },
+
+  // ---
+  // Add classes
+  _addClass(cls, el = this.ROOT_EL) {
+    if (el.length !== undefined) {
+      // Add classes to multiple elements
+      el.forEach(e => {
+        cls.split(' ').forEach(c => e.classList.add(c))
+      })
+    } else {
+      // Add classes to single element
+      cls.split(' ').forEach(c => el.classList.add(c))
+    }
+  },
+
+  // ---
+  // Remove classes
+  _removeClass(cls, el = this.ROOT_EL) {
+    if (el.length !== undefined) {
+      // Remove classes to multiple elements
+      el.forEach(e => {
+        cls.split(' ').forEach(c => e.classList.remove(c))
+      })
+    } else {
+      // Remove classes to single element
+      cls.split(' ').forEach(c => el.classList.remove(c))
+    }
+  },
+
+  // Toggle classes
+  _toggleClass(el = this.ROOT_EL, cls1, cls2) {
+    if (el.classList.contains(cls1)) {
+      el.classList.replace(cls1, cls2)
+    } else {
+      el.classList.replace(cls2, cls1)
+    }
+  },
+
+  // ---
+  // Has class
+  _hasClass(cls, el = this.ROOT_EL) {
+    let result = false
+
+    cls.split(' ').forEach(c => {
+      if (el.classList.contains(c)) result = true
+    })
+
+    return result
+  },
+
+  _findParent(el, cls) {
+    if ((el && el.tagName.toUpperCase() === 'BODY') || el.tagName.toUpperCase() === 'HTML') return null
+    el = el.parentNode
+    while (el && el.tagName.toUpperCase() !== 'BODY' && !el.classList.contains(cls)) {
+      el = el.parentNode
+    }
+    el = el && el.tagName.toUpperCase() !== 'BODY' ? el : null
+    return el
+  },
+
+  // ---
+  // Trigger window event
+  _triggerWindowEvent(name) {
+    if (typeof window === 'undefined') return
+
+    if (document.createEvent) {
+      let event
+
+      if (typeof Event === 'function') {
+        event = new Event(name)
+      } else {
+        event = document.createEvent('Event')
+        event.initEvent(name, false, true)
+      }
+
+      window.dispatchEvent(event)
+    } else {
+      window.fireEvent(`on${name}`, document.createEventObject())
+    }
+  },
+
+  // ---
+  // Trigger event
+  _triggerEvent(name) {
+    this._triggerWindowEvent(`layout${name}`)
+
+    this._listeners.filter(listener => listener.event === name).forEach(listener => listener.callback.call(null))
+  },
+
+  // ---
+  // Update style
+  _updateInlineStyle(navbarHeight = 0, footerHeight = 0) {
+    if (!this._styleEl) {
+      this._styleEl = document.createElement('style')
+      this._styleEl.type = 'text/css'
+      document.head.appendChild(this._styleEl)
+    }
+
+    const newStyle = INLINE_STYLES.replace(/\{navbarHeight\}/gi, navbarHeight).replace(
+      /\{footerHeight\}/gi,
+      footerHeight
+    )
+
+    if (this._curStyle !== newStyle) {
+      this._curStyle = newStyle
+      this._styleEl.textContent = newStyle
+    }
+  },
+
+  // ---
+  // Remove style
+  _removeInlineStyle() {
+    if (this._styleEl) document.head.removeChild(this._styleEl)
+    this._styleEl = null
+    this._curStyle = null
+  },
+
+  // ---
+  // Redraw layout menu (Safari bugfix)
+  _redrawLayoutMenu() {
+    const layoutMenu = this.getLayoutMenu()
+
+    if (layoutMenu && layoutMenu.querySelector('.menu')) {
+      const inner = layoutMenu.querySelector('.menu-inner')
+      const { scrollTop } = inner
+      const pageScrollTop = document.documentElement.scrollTop
+
+      layoutMenu.style.display = 'none'
+      // layoutMenu.offsetHeight
+      layoutMenu.style.display = ''
+      inner.scrollTop = scrollTop
+      document.documentElement.scrollTop = pageScrollTop
+
+      return true
+    }
+
+    return false
+  },
+
+  // ---
+  // Check for transition support
+  _supportsTransitionEnd() {
+    if (window.QUnit) return false
+
+    const el = document.body || document.documentElement
+
+    if (!el) return false
+
+    let result = false
+    TRANS_PROPERTIES.forEach(evnt => {
+      if (typeof el.style[evnt] !== 'undefined') result = true
+    })
+
+    return result
+  },
+
+  // ---
+  // Calculate current navbar height
+  _getNavbarHeight() {
+    const layoutNavbar = this.getLayoutNavbar()
+
+    if (!layoutNavbar) return 0
+    if (!this.isSmallScreen()) return layoutNavbar.getBoundingClientRect().height
+
+    // Needs some logic to get navbar height on small screens
+
+    const clonedEl = layoutNavbar.cloneNode(true)
+    clonedEl.id = null
+    clonedEl.style.visibility = 'hidden'
+    clonedEl.style.position = 'absolute'
+
+    Array.prototype.slice.call(clonedEl.querySelectorAll('.collapse.show')).forEach(el => this._removeClass('show', el))
+
+    layoutNavbar.parentNode.insertBefore(clonedEl, layoutNavbar)
+
+    const navbarHeight = clonedEl.getBoundingClientRect().height
+
+    clonedEl.parentNode.removeChild(clonedEl)
+
+    return navbarHeight
+  },
+
+  // ---
+  // Get current footer height
+  _getFooterHeight() {
+    const layoutFooter = this.getLayoutFooter()
+
+    if (!layoutFooter) return 0
+
+    return layoutFooter.getBoundingClientRect().height
+  },
+
+  // ---
+  // Get animation duration of element
+  _getAnimationDuration(el) {
+    const duration = window.getComputedStyle(el).transitionDuration
+
+    return parseFloat(duration) * (duration.indexOf('ms') !== -1 ? 1 : 1000)
+  },
+
+  // ---
+  // Set menu hover state
+  _setMenuHoverState(hovered) {
+    this[hovered ? '_addClass' : '_removeClass']('layout-menu-hover')
+  },
+
+  // ---
+  // Toggle collapsed
+  _setCollapsed(collapsed) {
+    if (this.isSmallScreen()) {
+      if (collapsed) {
+        this._removeClass('layout-menu-expanded')
+      } else {
+        setTimeout(
+          () => {
+            this._addClass('layout-menu-expanded')
+          },
+          this._redrawLayoutMenu() ? 5 : 0
+        )
+      }
+    }
+  },
+
+  // ---
+  // Add layout sivenav toggle animationEnd event
+  _bindLayoutAnimationEndEvent(modifier, cb) {
+    const menu = this.getMenu()
+    const duration = menu ? this._getAnimationDuration(menu) + 50 : 0
+
+    if (!duration) {
+      modifier.call(this)
+      cb.call(this)
+      return
+    }
+
+    this._transitionCallback = e => {
+      if (e.target !== menu) return
+      this._unbindLayoutAnimationEndEvent()
+      cb.call(this)
+    }
+
+    TRANS_EVENTS.forEach(e => {
+      menu.addEventListener(e, this._transitionCallback, false)
+    })
+
+    modifier.call(this)
+
+    this._transitionCallbackTimeout = setTimeout(() => {
+      this._transitionCallback.call(this, { target: menu })
+    }, duration)
+  },
+
+  // ---
+  // Remove layout sivenav toggle animationEnd event
+  _unbindLayoutAnimationEndEvent() {
+    const menu = this.getMenu()
+
+    if (this._transitionCallbackTimeout) {
+      clearTimeout(this._transitionCallbackTimeout)
+      this._transitionCallbackTimeout = null
+    }
+
+    if (menu && this._transitionCallback) {
+      TRANS_EVENTS.forEach(e => {
+        menu.removeEventListener(e, this._transitionCallback, false)
+      })
+    }
+
+    if (this._transitionCallback) {
+      this._transitionCallback = null
+    }
+  },
+
+  // ---
+  // Bind delayed window resize event
+  _bindWindowResizeEvent() {
+    this._unbindWindowResizeEvent()
+
+    const cb = () => {
+      if (this._resizeTimeout) {
+        clearTimeout(this._resizeTimeout)
+        this._resizeTimeout = null
+      }
+      this._triggerEvent('resize')
+    }
+
+    this._resizeCallback = () => {
+      if (this._resizeTimeout) clearTimeout(this._resizeTimeout)
+      this._resizeTimeout = setTimeout(cb, this.RESIZE_DELAY)
+    }
+
+    window.addEventListener('resize', this._resizeCallback, false)
+  },
+
+  // ---
+  // Unbind delayed window resize event
+  _unbindWindowResizeEvent() {
+    if (this._resizeTimeout) {
+      clearTimeout(this._resizeTimeout)
+      this._resizeTimeout = null
+    }
+
+    if (this._resizeCallback) {
+      window.removeEventListener('resize', this._resizeCallback, false)
+      this._resizeCallback = null
+    }
+  },
+
+  _bindMenuMouseEvents() {
+    if (this._menuMouseEnter && this._menuMouseLeave && this._windowTouchStart) return
+
+    const layoutMenu = this.getLayoutMenu()
+    if (!layoutMenu) return this._unbindMenuMouseEvents()
+
+    if (!this._menuMouseEnter) {
+      this._menuMouseEnter = () => {
+        if (this.isSmallScreen() || this._hasClass('layout-transitioning')) {
+          return this._setMenuHoverState(false)
+        }
+
+        return this._setMenuHoverState(false)
+      }
+      layoutMenu.addEventListener('mouseenter', this._menuMouseEnter, false)
+      layoutMenu.addEventListener('touchstart', this._menuMouseEnter, false)
+    }
+
+    if (!this._menuMouseLeave) {
+      this._menuMouseLeave = () => {
+        this._setMenuHoverState(false)
+      }
+      layoutMenu.addEventListener('mouseleave', this._menuMouseLeave, false)
+    }
+
+    if (!this._windowTouchStart) {
+      this._windowTouchStart = e => {
+        if (!e || !e.target || !this._findParent(e.target, '.layout-menu')) {
+          this._setMenuHoverState(false)
+        }
+      }
+      window.addEventListener('touchstart', this._windowTouchStart, true)
+    }
+  },
+
+  _unbindMenuMouseEvents() {
+    if (!this._menuMouseEnter && !this._menuMouseLeave && !this._windowTouchStart) return
+
+    const layoutMenu = this.getLayoutMenu()
+
+    if (this._menuMouseEnter) {
+      if (layoutMenu) {
+        layoutMenu.removeEventListener('mouseenter', this._menuMouseEnter, false)
+        layoutMenu.removeEventListener('touchstart', this._menuMouseEnter, false)
+      }
+      this._menuMouseEnter = null
+    }
+
+    if (this._menuMouseLeave) {
+      if (layoutMenu) {
+        layoutMenu.removeEventListener('mouseleave', this._menuMouseLeave, false)
+      }
+      this._menuMouseLeave = null
+    }
+
+    if (this._windowTouchStart) {
+      if (layoutMenu) {
+        window.addEventListener('touchstart', this._windowTouchStart, true)
+      }
+      this._windowTouchStart = null
+    }
+
+    this._setMenuHoverState(false)
+  },
+
+  // *******************************************************************************
+  // * Methods
+
+  scrollToActive(animate = false) {
+    this._scrollToActive(animate)
+  },
+
+  // ---
+  // Collapse / expand layout
+  setCollapsed(collapsed = requiredParam('collapsed'), animate = true) {
+    const layoutMenu = this.getLayoutMenu()
+
+    if (!layoutMenu) return
+
+    this._unbindLayoutAnimationEndEvent()
+
+    if (animate && this._supportsTransitionEnd()) {
+      this._addClass('layout-transitioning')
+      if (collapsed) this._setMenuHoverState(false)
+
+      this._bindLayoutAnimationEndEvent(
+        () => {
+          // Collapse / Expand
+          if (this.isSmallScreen) this._setCollapsed(collapsed)
+        },
+        () => {
+          this._removeClass('layout-transitioning')
+          this._triggerWindowEvent('resize')
+          this._triggerEvent('toggle')
+          this._setMenuHoverState(false)
+        }
+      )
+    } else {
+      this._addClass('layout-no-transition')
+      if (collapsed) this._setMenuHoverState(false)
+
+      // Collapse / Expand
+      this._setCollapsed(collapsed)
+
+      setTimeout(() => {
+        this._removeClass('layout-no-transition')
+        this._triggerWindowEvent('resize')
+        this._triggerEvent('toggle')
+        this._setMenuHoverState(false)
+      }, 1)
+    }
+  },
+
+  // ---
+  // Toggle layout
+  toggleCollapsed(animate = true) {
+    this.setCollapsed(!this.isCollapsed(), animate)
+  },
+
+  // ---
+  // Set layout positioning
+  setPosition(fixed = requiredParam('fixed'), offcanvas = requiredParam('offcanvas')) {
+    this._removeClass('layout-menu-offcanvas layout-menu-fixed layout-menu-fixed-offcanvas')
+
+    if (!fixed && offcanvas) {
+      this._addClass('layout-menu-offcanvas')
+    } else if (fixed && !offcanvas) {
+      this._addClass('layout-menu-fixed')
+      this._redrawLayoutMenu()
+    } else if (fixed && offcanvas) {
+      this._addClass('layout-menu-fixed-offcanvas')
+      this._redrawLayoutMenu()
+    }
+
+    this.update()
+  },
+
+  // *******************************************************************************
+  // * Getters
+
+  getLayoutMenu() {
+    return document.querySelector('.layout-menu')
+  },
+
+  getMenu() {
+    const layoutMenu = this.getLayoutMenu()
+
+    if (!layoutMenu) return null
+
+    return !this._hasClass('menu', layoutMenu) ? layoutMenu.querySelector('.menu') : layoutMenu
+  },
+
+  getLayoutNavbar() {
+    return document.querySelector('.layout-navbar')
+  },
+
+  getLayoutFooter() {
+    return document.querySelector('.content-footer')
+  },
+
+  // *******************************************************************************
+  // * Update
+
+  update() {
+    if (
+      (this.getLayoutNavbar() &&
+        ((!this.isSmallScreen() && this.isLayoutNavbarFull() && this.isFixed()) || this.isNavbarFixed())) ||
+      (this.getLayoutFooter() && this.isFooterFixed())
+    ) {
+      this._updateInlineStyle(this._getNavbarHeight(), this._getFooterHeight())
+    }
+
+    this._bindMenuMouseEvents()
+  },
+
+  setAutoUpdate(enable = requiredParam('enable')) {
+    if (enable && !this._autoUpdate) {
+      this.on('resize.Helpers:autoUpdate', () => this.update())
+      this._autoUpdate = true
+    } else if (!enable && this._autoUpdate) {
+      this.off('resize.Helpers:autoUpdate')
+      this._autoUpdate = false
+    }
+  },
+
+  // *******************************************************************************
+  // * Tests
+
+  isRtl() {
+    return (
+      document.querySelector('body').getAttribute('dir') === 'rtl' ||
+      document.querySelector('html').getAttribute('dir') === 'rtl'
+    )
+  },
+
+  isMobileDevice() {
+    return typeof window.orientation !== 'undefined' || navigator.userAgent.indexOf('IEMobile') !== -1
+  },
+
+  isSmallScreen() {
+    return (
+      (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth) < this.LAYOUT_BREAKPOINT
+    )
+  },
+
+  isLayoutNavbarFull() {
+    return !!document.querySelector('.layout-wrapper.layout-navbar-full')
+  },
+
+  isCollapsed() {
+    if (this.isSmallScreen()) {
+      return !this._hasClass('layout-menu-expanded')
+    }
+    return this._hasClass('layout-menu-collapsed')
+  },
+
+  isFixed() {
+    return this._hasClass('layout-menu-fixed layout-menu-fixed-offcanvas')
+  },
+
+  isNavbarFixed() {
+    return (
+      this._hasClass('layout-navbar-fixed') || (!this.isSmallScreen() && this.isFixed() && this.isLayoutNavbarFull())
+    )
+  },
+
+  isFooterFixed() {
+    return this._hasClass('layout-footer-fixed')
+  },
+
+  isLightStyle() {
+    return document.documentElement.classList.contains('light-style')
+  },
+
+  // *******************************************************************************
+  // * Events
+
+  on(event = requiredParam('event'), callback = requiredParam('callback')) {
+    const [_event] = event.split('.')
+    let [, ...namespace] = event.split('.')
+    // let [_event, ...namespace] = event.split('.')
+    namespace = namespace.join('.') || null
+
+    this._listeners.push({ event: _event, namespace, callback })
+  },
+
+  off(event = requiredParam('event')) {
+    const [_event] = event.split('.')
+    let [, ...namespace] = event.split('.')
+    namespace = namespace.join('.') || null
+
+    this._listeners
+      .filter(listener => listener.event === _event && listener.namespace === namespace)
+      .forEach(listener => this._listeners.splice(this._listeners.indexOf(listener), 1))
+  },
+
+  // *******************************************************************************
+  // * Life cycle
+
+  init() {
+    if (this._initialized) return
+    this._initialized = true
+
+    // Initialize `style` element
+    this._updateInlineStyle(0)
+
+    // Bind window resize event
+    this._bindWindowResizeEvent()
+
+    // Bind init event
+    this.off('init._Helpers')
+    this.on('init._Helpers', () => {
+      this.off('resize._Helpers:redrawMenu')
+      this.on('resize._Helpers:redrawMenu', () => {
+        // eslint-disable-next-line no-unused-expressions
+        this.isSmallScreen() && !this.isCollapsed() && this._redrawLayoutMenu()
+      })
+
+      // Force repaint in IE 10
+      if (typeof document.documentMode === 'number' && document.documentMode < 11) {
+        this.off('resize._Helpers:ie10RepaintBody')
+        this.on('resize._Helpers:ie10RepaintBody', () => {
+          if (this.isFixed()) return
+          const { scrollTop } = document.documentElement
+          document.body.style.display = 'none'
+          // document.body.offsetHeight
+          document.body.style.display = 'block'
+          document.documentElement.scrollTop = scrollTop
+        })
+      }
+    })
+
+    this._triggerEvent('init')
+  },
+
+  destroy() {
+    if (!this._initialized) return
+    this._initialized = false
+
+    this._removeClass('layout-transitioning')
+    this._removeInlineStyle()
+    this._unbindLayoutAnimationEndEvent()
+    this._unbindWindowResizeEvent()
+    this._unbindMenuMouseEvents()
+    this.setAutoUpdate(false)
+
+    this.off('init._Helpers')
+
+    // Remove all listeners except `init`
+    this._listeners
+      .filter(listener => listener.event !== 'init')
+      .forEach(listener => this._listeners.splice(this._listeners.indexOf(listener), 1))
+  },
+
+  // ---
+  // Init Password Toggle
+  initPasswordToggle() {
+    const toggler = document.querySelectorAll('.form-password-toggle i')
+    if (typeof toggler !== 'undefined' && toggler !== null) {
+      toggler.forEach(el => {
+        el.addEventListener('click', e => {
+          e.preventDefault()
+          const formPasswordToggle = el.closest('.form-password-toggle')
+          const formPasswordToggleIcon = formPasswordToggle.querySelector('i')
+          const formPasswordToggleInput = formPasswordToggle.querySelector('input')
+
+          if (formPasswordToggleInput.getAttribute('type') === 'text') {
+            formPasswordToggleInput.setAttribute('type', 'password')
+            formPasswordToggleIcon.classList.replace('bx-show', 'bx-hide')
+          } else if (formPasswordToggleInput.getAttribute('type') === 'password') {
+            formPasswordToggleInput.setAttribute('type', 'text')
+            formPasswordToggleIcon.classList.replace('bx-hide', 'bx-show')
+          }
+        })
+      })
+    }
+  },
+
+  // ---
+  // Init Speech To Text
+  initSpeechToText() {
+    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition
+    const speechToText = document.querySelectorAll('.speech-to-text')
+    if (SpeechRecognition !== undefined && SpeechRecognition !== null) {
+      if (typeof speechToText !== 'undefined' && speechToText !== null) {
+        const recognition = new SpeechRecognition()
+        const toggler = document.querySelectorAll('.speech-to-text i')
+        toggler.forEach(el => {
+          let listening = false
+          el.addEventListener('click', () => {
+            el.closest('.input-group').querySelector('.form-control').focus()
+            recognition.onspeechstart = () => {
+              listening = true
+            }
+            if (listening === false) {
+              recognition.start()
+            }
+            recognition.onerror = () => {
+              listening = false
+            }
+            recognition.onresult = event => {
+              el.closest('.input-group').querySelector('.form-control').value = event.results[0][0].transcript
+            }
+            recognition.onspeechend = () => {
+              listening = false
+              recognition.stop()
+            }
+          })
+        })
+      }
+    }
+  },
+
+  // Ajax Call Promise
+  ajaxCall(url) {
+    return new Promise((resolve, reject) => {
+      const req = new XMLHttpRequest()
+      req.open('GET', url)
+      req.onload = () => (req.status === 200 ? resolve(req.response) : reject(Error(req.statusText)))
+      req.onerror = e => reject(Error(`Network Error: ${e}`))
+      req.send()
+    })
+  },
+
+  // ---
+  // SidebarToggle (Used in Apps)
+  initSidebarToggle() {
+    const sidebarToggler = document.querySelectorAll('[data-bs-toggle="sidebar"]')
+
+    sidebarToggler.forEach(el => {
+      el.addEventListener('click', () => {
+        const target = el.getAttribute('data-target')
+        const overlay = el.getAttribute('data-overlay')
+        const appOverlay = document.querySelectorAll('.app-overlay')
+        const targetEl = document.querySelectorAll(target)
+
+        targetEl.forEach(tel => {
+          tel.classList.toggle('show')
+          if (
+            typeof overlay !== 'undefined' &&
+            overlay !== null &&
+            overlay !== false &&
+            typeof appOverlay !== 'undefined'
+          ) {
+            if (tel.classList.contains('show')) {
+              appOverlay[0].classList.add('show')
+            } else {
+              appOverlay[0].classList.remove('show')
+            }
+            appOverlay[0].addEventListener('click', e => {
+              e.currentTarget.classList.remove('show')
+              tel.classList.remove('show')
+            })
+          }
+        })
+      })
+    })
+  }
+}
+
+// *******************************************************************************
+// * Initialization
+
+if (typeof window !== 'undefined') {
+  Helpers.init()
+
+  if (Helpers.isMobileDevice() && window.chrome) {
+    document.documentElement.classList.add('layout-menu-100vh')
+  }
+
+  // Update layout after page load
+  if (document.readyState === 'complete') Helpers.update()
+  else
+    document.addEventListener('DOMContentLoaded', function onContentLoaded() {
+      Helpers.update()
+      document.removeEventListener('DOMContentLoaded', onContentLoaded)
+    })
+}
+
+// ---
+export { Helpers }

src/main/webapp/resources/framework/template/sneat-1.0.0/js/menu.js

@@ -0,0 +1,589 @@
+const TRANSITION_EVENTS = ['transitionend', 'webkitTransitionEnd', 'oTransitionEnd']
+// const TRANSITION_PROPERTIES = ['transition', 'MozTransition', 'webkitTransition', 'WebkitTransition', 'OTransition']
+
+class Menu {
+  constructor(el, config = {}, _PS = null) {
+    this._el = el
+    this._animate = config.animate !== false
+    this._accordion = config.accordion !== false
+    this._closeChildren = Boolean(config.closeChildren)
+
+    this._onOpen = config.onOpen || (() => {})
+    this._onOpened = config.onOpened || (() => {})
+    this._onClose = config.onClose || (() => {})
+    this._onClosed = config.onClosed || (() => {})
+
+    this._psScroll = null
+    this._topParent = null
+    this._menuBgClass = null
+
+    el.classList.add('menu')
+    el.classList[this._animate ? 'remove' : 'add']('menu-no-animation') // check
+
+    el.classList.add('menu-vertical')
+
+    const PerfectScrollbarLib = _PS || window.PerfectScrollbar
+
+    if (PerfectScrollbarLib) {
+      this._scrollbar = new PerfectScrollbarLib(el.querySelector('.menu-inner'), {
+        suppressScrollX: true,
+        wheelPropagation: !Menu._hasClass('layout-menu-fixed layout-menu-fixed-offcanvas')
+      })
+
+      window.Helpers.menuPsScroll = this._scrollbar
+    } else {
+      el.querySelector('.menu-inner').classList.add('overflow-auto')
+    }
+
+    // Add data attribute for bg color class of menu
+    const menuClassList = el.classList
+
+    for (let i = 0; i < menuClassList.length; i++) {
+      if (menuClassList[i].startsWith('bg-')) {
+        this._menuBgClass = menuClassList[i]
+      }
+    }
+    el.setAttribute('data-bg-class', this._menuBgClass)
+
+    this._bindEvents()
+
+    // Link menu instance to element
+    el.menuInstance = this
+  }
+
+  _bindEvents() {
+    // Click Event
+    this._evntElClick = e => {
+      // Find top parent element
+      if (e.target.closest('ul') && e.target.closest('ul').classList.contains('menu-inner')) {
+        const menuItem = Menu._findParent(e.target, 'menu-item', false)
+
+        // eslint-disable-next-line prefer-destructuring
+        if (menuItem) this._topParent = menuItem.childNodes[0]
+      }
+
+      const toggleLink = e.target.classList.contains('menu-toggle')
+        ? e.target
+        : Menu._findParent(e.target, 'menu-toggle', false)
+
+      if (toggleLink) {
+        e.preventDefault()
+
+        if (toggleLink.getAttribute('data-hover') !== 'true') {
+          this.toggle(toggleLink)
+        }
+      }
+    }
+    if (window.Helpers.isMobileDevice) this._el.addEventListener('click', this._evntElClick)
+
+    this._evntWindowResize = () => {
+      this.update()
+      if (this._lastWidth !== window.innerWidth) {
+        this._lastWidth = window.innerWidth
+        this.update()
+      }
+
+      const horizontalMenuTemplate = document.querySelector("[data-template^='horizontal-menu']")
+      if (!this._horizontal && !horizontalMenuTemplate) this.manageScroll()
+    }
+    window.addEventListener('resize', this._evntWindowResize)
+  }
+
+  static childOf(/* child node */ c, /* parent node */ p) {
+    // returns boolean
+    if (c.parentNode) {
+      while ((c = c.parentNode) && c !== p);
+      return !!c
+    }
+    return false
+  }
+
+  _unbindEvents() {
+    if (this._evntElClick) {
+      this._el.removeEventListener('click', this._evntElClick)
+      this._evntElClick = null
+    }
+
+    if (this._evntElMouseOver) {
+      this._el.removeEventListener('mouseover', this._evntElMouseOver)
+      this._evntElMouseOver = null
+    }
+
+    if (this._evntElMouseOut) {
+      this._el.removeEventListener('mouseout', this._evntElMouseOut)
+      this._evntElMouseOut = null
+    }
+
+    if (this._evntWindowResize) {
+      window.removeEventListener('resize', this._evntWindowResize)
+      this._evntWindowResize = null
+    }
+
+    if (this._evntBodyClick) {
+      document.body.removeEventListener('click', this._evntBodyClick)
+      this._evntBodyClick = null
+    }
+
+    if (this._evntInnerMousemove) {
+      this._inner.removeEventListener('mousemove', this._evntInnerMousemove)
+      this._evntInnerMousemove = null
+    }
+
+    if (this._evntInnerMouseleave) {
+      this._inner.removeEventListener('mouseleave', this._evntInnerMouseleave)
+      this._evntInnerMouseleave = null
+    }
+  }
+
+  static _isRoot(item) {
+    return !Menu._findParent(item, 'menu-item', false)
+  }
+
+  static _findParent(el, cls, throwError = true) {
+    if (el.tagName.toUpperCase() === 'BODY') return null
+    el = el.parentNode
+    while (el.tagName.toUpperCase() !== 'BODY' && !el.classList.contains(cls)) {
+      el = el.parentNode
+    }
+
+    el = el.tagName.toUpperCase() !== 'BODY' ? el : null
+
+    if (!el && throwError) throw new Error(`Cannot find \`.${cls}\` parent element`)
+
+    return el
+  }
+
+  static _findChild(el, cls) {
+    const items = el.childNodes
+    const found = []
+
+    for (let i = 0, l = items.length; i < l; i++) {
+      if (items[i].classList) {
+        let passed = 0
+
+        for (let j = 0; j < cls.length; j++) {
+          if (items[i].classList.contains(cls[j])) passed += 1
+        }
+
+        if (cls.length === passed) found.push(items[i])
+      }
+    }
+
+    return found
+  }
+
+  static _findMenu(item) {
+    let curEl = item.childNodes[0]
+    let menu = null
+
+    while (curEl && !menu) {
+      if (curEl.classList && curEl.classList.contains('menu-sub')) menu = curEl
+      curEl = curEl.nextSibling
+    }
+
+    if (!menu) throw new Error('Cannot find `.menu-sub` element for the current `.menu-toggle`')
+
+    return menu
+  }
+
+  // Has class
+  static _hasClass(cls, el = window.Helpers.ROOT_EL) {
+    let result = false
+
+    cls.split(' ').forEach(c => {
+      if (el.classList.contains(c)) result = true
+    })
+
+    return result
+  }
+
+  open(el, closeChildren = this._closeChildren) {
+    const item = this._findUnopenedParent(Menu._getItem(el, true), closeChildren)
+
+    if (!item) return
+
+    const toggleLink = Menu._getLink(item, true)
+
+    Menu._promisify(this._onOpen, this, item, toggleLink, Menu._findMenu(item))
+      .then(() => {
+        if (!this._horizontal || !Menu._isRoot(item)) {
+          if (this._animate && !this._horizontal) {
+            window.requestAnimationFrame(() => this._toggleAnimation(true, item, false))
+            if (this._accordion) this._closeOther(item, closeChildren)
+          } else if (this._animate) {
+            // eslint-disable-next-line no-unused-expressions
+            this._onOpened && this._onOpened(this, item, toggleLink, Menu._findMenu(item))
+          } else {
+            item.classList.add('open')
+            // eslint-disable-next-line no-unused-expressions
+            this._onOpened && this._onOpened(this, item, toggleLink, Menu._findMenu(item))
+            if (this._accordion) this._closeOther(item, closeChildren)
+          }
+        } else {
+          // eslint-disable-next-line no-unused-expressions
+          this._onOpened && this._onOpened(this, item, toggleLink, Menu._findMenu(item))
+        }
+      })
+      .catch(() => {})
+  }
+
+  close(el, closeChildren = this._closeChildren, _autoClose = false) {
+    const item = Menu._getItem(el, true)
+    const toggleLink = Menu._getLink(el, true)
+
+    if (!item.classList.contains('open') || item.classList.contains('disabled')) return
+
+    Menu._promisify(this._onClose, this, item, toggleLink, Menu._findMenu(item), _autoClose)
+      .then(() => {
+        if (!this._horizontal || !Menu._isRoot(item)) {
+          if (this._animate && !this._horizontal) {
+            window.requestAnimationFrame(() => this._toggleAnimation(false, item, closeChildren))
+          } else {
+            item.classList.remove('open')
+
+            if (closeChildren) {
+              const opened = item.querySelectorAll('.menu-item.open')
+              for (let i = 0, l = opened.length; i < l; i++) opened[i].classList.remove('open')
+            }
+
+            // eslint-disable-next-line no-unused-expressions
+            this._onClosed && this._onClosed(this, item, toggleLink, Menu._findMenu(item))
+          }
+        } else {
+          // eslint-disable-next-line no-unused-expressions
+          this._onClosed && this._onClosed(this, item, toggleLink, Menu._findMenu(item))
+        }
+      })
+      .catch(() => {})
+  }
+
+  _closeOther(item, closeChildren) {
+    const opened = Menu._findChild(item.parentNode, ['menu-item', 'open'])
+
+    for (let i = 0, l = opened.length; i < l; i++) {
+      if (opened[i] !== item) this.close(opened[i], closeChildren)
+    }
+  }
+
+  toggle(el, closeChildren = this._closeChildren) {
+    const item = Menu._getItem(el, true)
+    // const toggleLink = Menu._getLink(el, true)
+
+    if (item.classList.contains('open')) this.close(item, closeChildren)
+    else this.open(item, closeChildren)
+  }
+
+  static _getItem(el, toggle) {
+    let item = null
+    const selector = toggle ? 'menu-toggle' : 'menu-link'
+
+    if (el.classList.contains('menu-item')) {
+      if (Menu._findChild(el, [selector]).length) item = el
+    } else if (el.classList.contains(selector)) {
+      item = el.parentNode.classList.contains('menu-item') ? el.parentNode : null
+    }
+
+    if (!item) {
+      throw new Error(`${toggle ? 'Toggable ' : ''}\`.menu-item\` element not found.`)
+    }
+
+    return item
+  }
+
+  static _getLink(el, toggle) {
+    let found = []
+    const selector = toggle ? 'menu-toggle' : 'menu-link'
+
+    if (el.classList.contains(selector)) found = [el]
+    else if (el.classList.contains('menu-item')) found = Menu._findChild(el, [selector])
+
+    if (!found.length) throw new Error(`\`${selector}\` element not found.`)
+
+    return found[0]
+  }
+
+  _findUnopenedParent(item, closeChildren) {
+    let tree = []
+    let parentItem = null
+
+    while (item) {
+      if (item.classList.contains('disabled')) {
+        parentItem = null
+        tree = []
+      } else {
+        if (!item.classList.contains('open')) parentItem = item
+        tree.push(item)
+      }
+
+      item = Menu._findParent(item, 'menu-item', false)
+    }
+
+    if (!parentItem) return null
+    if (tree.length === 1) return parentItem
+
+    tree = tree.slice(0, tree.indexOf(parentItem))
+
+    for (let i = 0, l = tree.length; i < l; i++) {
+      tree[i].classList.add('open')
+
+      if (this._accordion) {
+        const openedItems = Menu._findChild(tree[i].parentNode, ['menu-item', 'open'])
+
+        for (let j = 0, k = openedItems.length; j < k; j++) {
+          if (openedItems[j] !== tree[i]) {
+            openedItems[j].classList.remove('open')
+
+            if (closeChildren) {
+              const openedChildren = openedItems[j].querySelectorAll('.menu-item.open')
+              for (let x = 0, z = openedChildren.length; x < z; x++) {
+                openedChildren[x].classList.remove('open')
+              }
+            }
+          }
+        }
+      }
+    }
+
+    return parentItem
+  }
+
+  _toggleAnimation(open, item, closeChildren) {
+    const toggleLink = Menu._getLink(item, true)
+    const menu = Menu._findMenu(item)
+
+    Menu._unbindAnimationEndEvent(item)
+
+    const linkHeight = Math.round(toggleLink.getBoundingClientRect().height)
+
+    item.style.overflow = 'hidden'
+
+    const clearItemStyle = () => {
+      item.classList.remove('menu-item-animating')
+      item.classList.remove('menu-item-closing')
+      item.style.overflow = null
+      item.style.height = null
+
+      this.update()
+    }
+
+    if (open) {
+      item.style.height = `${linkHeight}px`
+      item.classList.add('menu-item-animating')
+      item.classList.add('open')
+
+      Menu._bindAnimationEndEvent(item, () => {
+        clearItemStyle()
+        this._onOpened(this, item, toggleLink, menu)
+      })
+
+      setTimeout(() => {
+        item.style.height = `${linkHeight + Math.round(menu.getBoundingClientRect().height)}px`
+      }, 50)
+    } else {
+      item.style.height = `${linkHeight + Math.round(menu.getBoundingClientRect().height)}px`
+      item.classList.add('menu-item-animating')
+      item.classList.add('menu-item-closing')
+
+      Menu._bindAnimationEndEvent(item, () => {
+        item.classList.remove('open')
+        clearItemStyle()
+
+        if (closeChildren) {
+          const opened = item.querySelectorAll('.menu-item.open')
+          for (let i = 0, l = opened.length; i < l; i++) opened[i].classList.remove('open')
+        }
+
+        this._onClosed(this, item, toggleLink, menu)
+      })
+
+      setTimeout(() => {
+        item.style.height = `${linkHeight}px`
+      }, 50)
+    }
+  }
+
+  static _bindAnimationEndEvent(el, handler) {
+    const cb = e => {
+      if (e.target !== el) return
+      Menu._unbindAnimationEndEvent(el)
+      handler(e)
+    }
+
+    let duration = window.getComputedStyle(el).transitionDuration
+    duration = parseFloat(duration) * (duration.indexOf('ms') !== -1 ? 1 : 1000)
+
+    el._menuAnimationEndEventCb = cb
+    TRANSITION_EVENTS.forEach(ev => el.addEventListener(ev, el._menuAnimationEndEventCb, false))
+
+    el._menuAnimationEndEventTimeout = setTimeout(() => {
+      cb({ target: el })
+    }, duration + 50)
+  }
+
+  _getItemOffset(item) {
+    let curItem = this._inner.childNodes[0]
+    let left = 0
+
+    while (curItem !== item) {
+      if (curItem.tagName) {
+        left += Math.round(curItem.getBoundingClientRect().width)
+      }
+
+      curItem = curItem.nextSibling
+    }
+
+    return left
+  }
+
+  static _promisify(fn, ...args) {
+    const result = fn(...args)
+    if (result instanceof Promise) {
+      return result
+    }
+    if (result === false) {
+      return Promise.reject()
+    }
+    return Promise.resolve()
+  }
+
+  get _innerWidth() {
+    const items = this._inner.childNodes
+    let width = 0
+
+    for (let i = 0, l = items.length; i < l; i++) {
+      if (items[i].tagName) {
+        width += Math.round(items[i].getBoundingClientRect().width)
+      }
+    }
+
+    return width
+  }
+
+  get _innerPosition() {
+    return parseInt(this._inner.style[this._rtl ? 'marginRight' : 'marginLeft'] || '0px', 10)
+  }
+
+  set _innerPosition(value) {
+    this._inner.style[this._rtl ? 'marginRight' : 'marginLeft'] = `${value}px`
+    return value
+  }
+
+  static _unbindAnimationEndEvent(el) {
+    const cb = el._menuAnimationEndEventCb
+
+    if (el._menuAnimationEndEventTimeout) {
+      clearTimeout(el._menuAnimationEndEventTimeout)
+      el._menuAnimationEndEventTimeout = null
+    }
+
+    if (!cb) return
+
+    TRANSITION_EVENTS.forEach(ev => el.removeEventListener(ev, cb, false))
+    el._menuAnimationEndEventCb = null
+  }
+
+  closeAll(closeChildren = this._closeChildren) {
+    const opened = this._el.querySelectorAll('.menu-inner > .menu-item.open')
+
+    for (let i = 0, l = opened.length; i < l; i++) this.close(opened[i], closeChildren)
+  }
+
+  static setDisabled(el, disabled) {
+    Menu._getItem(el, false).classList[disabled ? 'add' : 'remove']('disabled')
+  }
+
+  static isActive(el) {
+    return Menu._getItem(el, false).classList.contains('active')
+  }
+
+  static isOpened(el) {
+    return Menu._getItem(el, false).classList.contains('open')
+  }
+
+  static isDisabled(el) {
+    return Menu._getItem(el, false).classList.contains('disabled')
+  }
+
+  update() {
+    if (this._scrollbar) {
+      this._scrollbar.update()
+    }
+  }
+
+  manageScroll() {
+    const { PerfectScrollbar } = window
+    const menuInner = document.querySelector('.menu-inner')
+
+    if (window.innerWidth < window.Helpers.LAYOUT_BREAKPOINT) {
+      if (this._scrollbar !== null) {
+        // window.Helpers.menuPsScroll.destroy()
+        this._scrollbar.destroy()
+        this._scrollbar = null
+      }
+      menuInner.classList.add('overflow-auto')
+    } else {
+      if (this._scrollbar === null) {
+        const menuScroll = new PerfectScrollbar(document.querySelector('.menu-inner'), {
+          suppressScrollX: true,
+          wheelPropagation: false
+        })
+        this._scrollbar = menuScroll
+      }
+      menuInner.classList.remove('overflow-auto')
+    }
+  }
+
+  destroy() {
+    if (!this._el) return
+
+    this._unbindEvents()
+
+    const items = this._el.querySelectorAll('.menu-item')
+    for (let i = 0, l = items.length; i < l; i++) {
+      Menu._unbindAnimationEndEvent(items[i])
+      items[i].classList.remove('menu-item-animating')
+      items[i].classList.remove('open')
+      items[i].style.overflow = null
+      items[i].style.height = null
+    }
+
+    const menus = this._el.querySelectorAll('.menu-menu')
+    for (let i2 = 0, l2 = menus.length; i2 < l2; i2++) {
+      menus[i2].style.marginRight = null
+      menus[i2].style.marginLeft = null
+    }
+
+    this._el.classList.remove('menu-no-animation')
+
+    if (this._wrapper) {
+      this._prevBtn.parentNode.removeChild(this._prevBtn)
+      this._nextBtn.parentNode.removeChild(this._nextBtn)
+      this._wrapper.parentNode.insertBefore(this._inner, this._wrapper)
+      this._wrapper.parentNode.removeChild(this._wrapper)
+      this._inner.style.marginLeft = null
+      this._inner.style.marginRight = null
+    }
+
+    this._el.menuInstance = null
+    delete this._el.menuInstance
+
+    this._el = null
+    this._animate = null
+    this._accordion = null
+    this._closeChildren = null
+    this._onOpen = null
+    this._onOpened = null
+    this._onClose = null
+    this._onClosed = null
+    if (this._scrollbar) {
+      this._scrollbar.destroy()
+      this._scrollbar = null
+    }
+    this._inner = null
+    this._prevBtn = null
+    this._wrapper = null
+    this._nextBtn = null
+  }
+}
+
+export { Menu }

src/main/webapp/resources/framework/template/sneat-1.0.0/libs/apex-charts/apex-charts.scss

@@ -0,0 +1,73 @@
+/**
+* Apex Charts
+*/
+@use '../../scss/_bootstrap-extended/include' as light;
+@import '../../scss/_custom-variables/libs';
+@import '../../node_modules/apexcharts-clevision/dist/apexcharts';
+
+// Light style
+@if $enable-light-style {
+  .light-style {
+    .apexcharts-canvas {
+      .apexcharts-tooltip {
+        background: light.$white;
+        border-color: light.$border-color;
+        box-shadow: light.$popover-box-shadow;
+        .apexcharts-tooltip-title {
+          background: light.$white;
+          border-color: light.$border-color;
+          font-family: light.$font-family-base !important;
+          font-weight: 600;
+        }
+      }
+      .apexcharts-xaxistooltip,
+      .apexcharts-yaxistooltip {
+        background: light.$body-bg;
+        border-color: light.$border-color;
+        &.apexcharts-xaxistooltip-bottom,
+        &.apexcharts-yaxistooltip-bottom {
+          &:after {
+            border-bottom-color: light.$body-bg;
+          }
+          &:before {
+            border-bottom-color: light.$border-color;
+          }
+        }
+        &.apexcharts-xaxistooltip-left,
+        &.apexcharts-yaxistooltip-left {
+          &:after {
+            border-left-color: light.$body-bg;
+          }
+          &:before {
+            border-left-color: light.$border-color;
+          }
+        }
+        &.apexcharts-xaxistooltip-right,
+        &.apexcharts-yaxistooltip-right {
+          &:after {
+            border-right-color: light.$body-bg;
+          }
+          &:before {
+            border-right-color: light.$border-color;
+          }
+        }
+        &.apexcharts-xaxistooltip-top,
+        &.apexcharts-yaxistooltip-top {
+          &:after {
+            border-top-color: light.$body-bg;
+          }
+          &:before {
+            border-top-color: light.$border-color;
+          }
+        }
+      }
+      .apexcharts-tooltip-text {
+        font-family: light.$font-family-base !important;
+        filter: none;
+      }
+      .apexcharts-marker {
+        filter: drop-shadow(0 2px 4px #a1acb866);
+      }
+    }
+  }
+}

src/main/webapp/resources/framework/template/sneat-1.0.0/libs/apex-charts/apexcharts.js

@@ -0,0 +1,3 @@
+import ApexCharts from 'apexcharts-clevision';
+
+export { ApexCharts };

src/main/webapp/resources/framework/template/sneat-1.0.0/libs/highlight/highlight-github.scss

@@ -0,0 +1 @@
+@import '../../node_modules/highlight.js/styles/github.css';

src/main/webapp/resources/framework/template/sneat-1.0.0/libs/highlight/highlight.js

@@ -0,0 +1,6 @@
+// var hljs = require('highlight.js/lib/index.js')
+
+// export { hljs }
+import hljs from 'highlight.js/lib/index';
+
+export { hljs };

src/main/webapp/resources/framework/template/sneat-1.0.0/libs/highlight/highlight.scss

@@ -0,0 +1 @@
+@import '../../node_modules/highlight.js/styles/atom-one-light';

src/main/webapp/resources/framework/template/sneat-1.0.0/libs/jquery/jquery.js

@@ -0,0 +1,4 @@
+import jQuery from 'jquery/dist/jquery';
+
+const $ = jQuery;
+export { jQuery, $ };

src/main/webapp/resources/framework/template/sneat-1.0.0/libs/masonry/masonry.js

@@ -0,0 +1,7 @@
+// var Masonry = require('masonry-layout/dist/masonry.pkgd')
+
+// export { Masonry }
+
+import * as Masonry from 'masonry-layout/dist/masonry.pkgd';
+
+export { Masonry };

src/main/webapp/resources/framework/template/sneat-1.0.0/libs/perfect-scrollbar/perfect-scrollbar.js

@@ -0,0 +1,3 @@
+import PerfectScrollbar from 'perfect-scrollbar/dist/perfect-scrollbar';
+
+export { PerfectScrollbar };

src/main/webapp/resources/framework/template/sneat-1.0.0/libs/perfect-scrollbar/perfect-scrollbar.scss

@@ -0,0 +1,115 @@
+@use '../../scss/_bootstrap-extended/include' as light;
+@import '../../scss/_custom-variables/libs';
+@import '../../node_modules/perfect-scrollbar/css/perfect-scrollbar';
+
+$ps-width: 0.25rem !default;
+$ps-hover-width: 0.375rem !default;
+
+.ps {
+  position: relative;
+}
+
+.ps__rail-x {
+  height: $ps-width;
+}
+
+.ps__rail-y {
+  width: $ps-width;
+}
+
+.ps__rail-x,
+.ps__rail-y,
+.ps__thumb-x,
+.ps__thumb-y {
+  border-radius: 10rem;
+}
+.ps__rail-x:hover,
+.ps__rail-x:focus,
+.ps__rail-x.ps--clicking,
+.ps__rail-x:hover > .ps__thumb-x,
+.ps__rail-x:focus > .ps__thumb-x,
+.ps__rail-x.ps--clicking > .ps__thumb-x {
+  height: $ps-hover-width;
+}
+
+.ps__rail-y:hover,
+.ps__rail-y:focus,
+.ps__rail-y.ps--clicking,
+.ps__rail-y:hover > .ps__thumb-y,
+.ps__rail-y:focus > .ps__thumb-y,
+.ps__rail-y.ps--clicking > .ps__thumb-y {
+  width: $ps-hover-width;
+}
+
+.ps__thumb-x {
+  height: $ps-width;
+  bottom: 0;
+}
+
+.ps__thumb-y {
+  width: $ps-width;
+  right: 0;
+}
+
+// Light layout
+@if $enable-light-style {
+  .light-style {
+    .ps__thumb-x,
+    .ps__thumb-y {
+      background-color: light.$gray-400;
+    }
+
+    .ps__rail-x:hover,
+    .ps__rail-y:hover,
+    .ps__rail-x:focus,
+    .ps__rail-y:focus,
+    .ps__rail-x.ps--clicking,
+    .ps__rail-y.ps--clicking {
+      background-color: light.$gray-200;
+    }
+
+    .ps__rail-x:hover > .ps__thumb-x,
+    .ps__rail-y:hover > .ps__thumb-y,
+    .ps__rail-x:focus > .ps__thumb-x,
+    .ps__rail-y:focus > .ps__thumb-y,
+    .ps__rail-x.ps--clicking > .ps__thumb-x,
+    .ps__rail-y.ps--clicking > .ps__thumb-y {
+      background-color: light.$gray-700;
+    }
+
+    .ps-inverted {
+      .ps__rail-x:hover,
+      .ps__rail-y:hover,
+      .ps__rail-x:focus,
+      .ps__rail-y:focus,
+      .ps__rail-x.ps--clicking,
+      .ps__rail-y.ps--clicking {
+        background-color: rgba(#fff, 0.5);
+      }
+
+      .ps__thumb-x,
+      .ps__thumb-y {
+        background-color: rgba(#fff, 0.7);
+      }
+
+      .ps__rail-x:hover > .ps__thumb-x,
+      .ps__rail-y:hover > .ps__thumb-y,
+      .ps__rail-x:focus > .ps__thumb-x,
+      .ps__rail-y:focus > .ps__thumb-y,
+      .ps__rail-x.ps--clicking > .ps__thumb-x,
+      .ps__rail-y.ps--clicking > .ps__thumb-y {
+        background-color: #fff;
+      }
+    }
+  }
+}
+
+// Firefox width issue fixed
+@supports (-moz-appearance: none) {
+  #both-scrollbars-example {
+    max-width: 1080px;
+    margin: 0 auto;
+    padding-left: 0;
+    padding-right: 0;
+  }
+}

src/main/webapp/resources/framework/template/sneat-1.0.0/libs/popper/popper.js

@@ -0,0 +1,6 @@
+import Popper from '@popperjs/core/dist/umd/popper.min';
+
+// Required to enable animations on dropdowns/tooltips/popovers
+// Popper.Defaults.modifiers.computeStyle.gpuAcceleration = false
+
+export { Popper };

src/main/webapp/resources/framework/template/startbootstrap-sb-admin-2-gh-pages/img/undraw_profile.svg

@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 108.3 108.3" style="enable-background:new 0 0 108.3 108.3;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#E6E6E6;}
+	.st1{fill:#FFB8B8;}
+	.st2{fill:#575A89;}
+	.st3{fill:#2F2E41;}
+</style>
+<g id="Group_45" transform="translate(-191 -152.079)">
+	<g id="Group_30" transform="translate(282.246 224.353)">
+		<path id="Path_944" class="st0" d="M17.1-18.1c0,10.5-3,20.8-8.8,29.6c-1.2,1.9-2.5,3.6-4,5.3c-3.4,4-7.3,7.4-11.6,10.3
+			c-1.2,0.8-2.4,1.5-3.6,2.2c-6.5,3.6-13.7,5.8-21,6.5c-1.7,0.2-3.4,0.2-5.1,0.2c-4.7,0-9.4-0.6-14-1.8c-2.6-0.7-5.1-1.6-7.6-2.6
+			c-1.3-0.5-2.5-1.1-3.7-1.8c-2.9-1.5-5.6-3.3-8.2-5.3c-1.2-0.9-2.3-1.9-3.4-2.9C-95.8,1.3-97.1-33-76.8-54.9s54.6-23.3,76.5-2.9
+			C10.8-47.6,17.1-33.2,17.1-18.1L17.1-18.1z"/>
+		<path id="Path_945" class="st1" d="M-50.2-13.2c0,0,4.9,13.7,1.1,21.4s6,16.4,6,16.4s25.8-13.1,22.5-19.7s-8.8-15.3-7.7-20.8
+			L-50.2-13.2z"/>
+		<ellipse id="Ellipse_185" class="st1" cx="-40.6" cy="-25.5" rx="17.5" ry="17.5"/>
+		<path id="Path_946" class="st2" d="M-51.1,34.2c-2.6-0.7-5.1-1.6-7.6-2.6l0.5-13.3l4.9-11c1.1,0.9,2.3,1.6,3.5,2.3
+			c0.3,0.2,0.6,0.3,0.9,0.5c4.6,2.2,12.2,4.2,19.5-1.3c2.7-2.1,5-4.7,6.7-7.6L-8.8,9l0.7,8.4l0.8,9.8c-1.2,0.8-2.4,1.5-3.6,2.2
+			c-6.5,3.6-13.7,5.8-21,6.5c-1.7,0.2-3.4,0.2-5.1,0.2C-41.8,36.1-46.5,35.4-51.1,34.2z"/>
+		<path id="Path_947" class="st2" d="M-47.7-0.9L-47.7-0.9l-0.7,7.2l-0.4,3.8l-0.5,5.6l-1.8,18.5c-2.6-0.7-5.1-1.6-7.6-2.6
+			c-1.3-0.5-2.5-1.1-3.7-1.8c-2.9-1.5-5.6-3.3-8.2-5.3l-1.9-9l0.1-0.1L-47.7-0.9z"/>
+		<path id="Path_948" class="st2" d="M-10.9,29.3c-6.5,3.6-13.7,5.8-21,6.5c0.4-6.7,1-13.1,1.6-18.8c0.3-2.9,0.7-5.7,1.1-8.2
+			c1.2-8,2.5-13.5,3.4-14.2l6.1,4L4.9,7.3l-0.5,9.5c-3.4,4-7.3,7.4-11.6,10.3C-8.5,27.9-9.7,28.7-10.9,29.3z"/>
+		<path id="Path_949" class="st2" d="M-70.5,24.6c-1.2-0.9-2.3-1.9-3.4-2.9l0.9-6.1l0.7-0.1l3.1-0.4l6.8,14.8
+			C-65.2,28.3-67.9,26.6-70.5,24.6L-70.5,24.6z"/>
+		<path id="Path_950" class="st2" d="M8.3,11.5c-1.2,1.9-2.5,3.6-4,5.3c-3.4,4-7.3,7.4-11.6,10.3c-1.2,0.8-2.4,1.5-3.6,2.2l-0.6-2.8
+			l3.5-9.1l4.2-11.1l8.8,1.1C6.1,8.7,7.2,10.1,8.3,11.5z"/>
+		<path id="Path_951" class="st3" d="M-23.9-41.4c-2.7-4.3-6.8-7.5-11.6-8.9l-3.6,2.9l1.4-3.3c-1.2-0.2-2.3-0.2-3.5-0.2l-3.2,4.1
+			l1.3-4c-5.6,0.7-10.7,3.7-14,8.3c-4.1,5.9-4.8,14.1-0.8,20c1.1-3.4,2.4-6.6,3.5-9.9c0.9,0.1,1.7,0.1,2.6,0l1.3-3.1l0.4,3
+			c4.2-0.4,10.3-1.2,14.3-1.9l-0.4-2.3l2.3,1.9c1.2-0.3,1.9-0.5,1.9-0.7c2.9,4.7,5.8,7.7,8.8,12.5C-22.1-29.8-20.2-35.3-23.9-41.4z"
+			/>
+		<ellipse id="Ellipse_186" class="st1" cx="-24.9" cy="-26.1" rx="1.2" ry="2.4"/>
+	</g>
+</g>
+</svg>

src/main/webapp/resources/framework/template/startbootstrap-sb-admin-2-gh-pages/img/undraw_profile_1.svg

@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="_x38_8ce59e9-c4b8-4d1d-9d7a-ce0190159aa8"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 231.8 231.8"
+	 style="enable-background:new 0 0 231.8 231.8;" xml:space="preserve">
+<style type="text/css">
+	.st0{opacity:0.5;}
+	.st1{fill:url(#SVGID_1_);}
+	.st2{fill:#F5F5F5;}
+	.st3{fill:#333333;}
+	.st4{fill:#4E73DF;}
+	.st5{opacity:0.1;enable-background:new    ;}
+	.st6{fill:#BE7C5E;}
+</style>
+<g class="st0">
+	
+		<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="115.89" y1="525.2" x2="115.89" y2="756.98" gradientTransform="matrix(1 0 0 -1 0 756.98)">
+		<stop  offset="0" style="stop-color:#808080;stop-opacity:0.25"/>
+		<stop  offset="0.54" style="stop-color:#808080;stop-opacity:0.12"/>
+		<stop  offset="1" style="stop-color:#808080;stop-opacity:0.1"/>
+	</linearGradient>
+	<circle class="st1" cx="115.9" cy="115.9" r="115.9"/>
+</g>
+<circle class="st2" cx="115.9" cy="115.3" r="113.4"/>
+<path class="st3" d="M71.6,116.3c0,0-12.9,63.4-19.9,59.8c0,0,67.7,58.5,127.5,0c0,0-10.5-44.6-25.7-59.8H71.6z"/>
+<path class="st4" d="M116.2,229c22.2,0,43.9-6.5,62.4-18.7c-4.2-22.8-20.1-24.1-20.1-24.1H70.8c0,0-15,1.2-19.7,22.2
+	C70.1,221.9,92.9,229.1,116.2,229z"/>
+<circle class="st3" cx="115" cy="112.8" r="50.3"/>
+<path class="st5" d="M97.3,158.4h35.1l0,0v28.1c0,9.7-7.8,17.5-17.5,17.5l0,0c-9.7,0-17.5-7.9-17.5-17.5L97.3,158.4L97.3,158.4z"/>
+<path class="st6" d="M100.7,157.1h28.4c1.9,0,3.4,1.5,3.4,3.3v0v24.7c0,9.7-7.8,17.5-17.5,17.5l0,0c-9.7,0-17.5-7.9-17.5-17.5v0
+	v-24.7C97.4,158.6,98.9,157.1,100.7,157.1z"/>
+<path class="st5" d="M97.4,171.6c11.3,4.2,23.8,4.3,35.1,0.1v-4.3H97.4V171.6z"/>
+<circle class="st6" cx="115" cy="123.7" r="50.3"/>
+<path class="st3" d="M66.9,104.6h95.9c0,0-8.2-38.7-44.4-36.2S66.9,104.6,66.9,104.6z"/>
+<ellipse class="st6" cx="65.8" cy="121.5" rx="4.7" ry="8.8"/>
+<ellipse class="st6" cx="164" cy="121.5" rx="4.7" ry="8.8"/>
+<path class="st5" d="M66.9,105.9h95.9c0,0-8.2-38.7-44.4-36.2S66.9,105.9,66.9,105.9z"/>
+</svg>

src/main/webapp/resources/framework/template/startbootstrap-sb-admin-2-gh-pages/img/undraw_profile_2.svg

@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="_x38_8ce59e9-c4b8-4d1d-9d7a-ce0190159aa8"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 231.8 231.8"
+	 style="enable-background:new 0 0 231.8 231.8;" xml:space="preserve">
+<style type="text/css">
+	.st0{opacity:0.5;}
+	.st1{fill:url(#SVGID_1_);}
+	.st2{fill:#F5F5F5;}
+	.st3{fill:#4E73DF;}
+	.st4{fill:#72351C;}
+	.st5{opacity:0.1;enable-background:new    ;}
+	.st6{fill:#FDA57D;}
+</style>
+<g class="st0">
+	
+		<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="115.89" y1="526.22" x2="115.89" y2="758" gradientTransform="matrix(1 0 0 -1 0 758)">
+		<stop  offset="0" style="stop-color:#808080;stop-opacity:0.25"/>
+		<stop  offset="0.54" style="stop-color:#808080;stop-opacity:0.12"/>
+		<stop  offset="1" style="stop-color:#808080;stop-opacity:0.1"/>
+	</linearGradient>
+	<circle class="st1" cx="115.9" cy="115.9" r="115.9"/>
+</g>
+<circle class="st2" cx="116.1" cy="115.1" r="113.4"/>
+<path class="st3" d="M116.2,229c22.2,0,43.9-6.5,62.4-18.7c-4.2-22.9-20.1-24.2-20.1-24.2H70.8c0,0-15,1.2-19.7,22.2
+	C70.1,221.9,92.9,229.1,116.2,229z"/>
+<circle class="st4" cx="115" cy="112.8" r="54.8"/>
+<path class="st5" d="M97.3,158.4h35.1l0,0v28.1c0,9.7-7.8,17.6-17.5,17.6c0,0,0,0,0,0l0,0c-9.7,0-17.5-7.9-17.5-17.5L97.3,158.4
+	L97.3,158.4z"/>
+<path class="st6" d="M100.7,157.1h28.4c1.9,0,3.3,1.5,3.3,3.4v24.7c0,9.7-7.9,17.5-17.5,17.5l0,0c-9.7,0-17.5-7.9-17.5-17.5v-24.7
+	C97.3,158.6,98.8,157.1,100.7,157.1L100.7,157.1z"/>
+<path class="st5" d="M97.4,171.6c11.3,4.2,23.8,4.3,35.1,0.1v-4.3H97.4V171.6z"/>
+<circle class="st6" cx="115" cy="123.7" r="50.3"/>
+<path class="st5" d="M79.2,77.9c0,0,21.2,43,81,18l-13.9-21.8l-24.7-8.9L79.2,77.9z"/>
+<path class="st4" d="M79.2,77.3c0,0,21.2,43,81,18l-13.9-21.8l-24.7-8.9L79.2,77.3z"/>
+<path class="st4" d="M79,74.4c1.4-4.4,3.9-8.4,7.2-11.7c9.9-9.8,26.1-11.8,34.4-23c1.8,3.1,0.7,7.1-2.4,8.9
+	c-0.2,0.1-0.4,0.2-0.6,0.3c8-0.1,17.2-0.8,21.7-7.3c2.3,5.3,1.3,11.4-2.5,15.7c7.1,0.3,14.6,5.1,15.1,12.2c0.3,4.7-2.6,9.1-6.5,11.9
+	s-8.5,3.9-13.1,4.9C118.8,89.2,70.3,101.6,79,74.4z"/>
+<path class="st4" d="M165.3,124.1H164L138,147.2c-25-11.7-43.3,0-43.3,0l-27.2-22.1l-2.7,0.3c0.8,27.8,23.9,49.6,51.7,48.9
+	C143.6,173.5,165.3,151.3,165.3,124.1L165.3,124.1z M115,156.1c-9.8,0-17.7-2-17.7-4.4s7.9-4.4,17.7-4.4s17.7,2,17.7,4.4
+	S124.7,156.1,115,156.1L115,156.1z"/>
+<ellipse class="st6" cx="64.7" cy="123.6" rx="4.7" ry="8.8"/>
+<ellipse class="st6" cx="165.3" cy="123.6" rx="4.7" ry="8.8"/>
+</svg>

src/main/webapp/resources/framework/template/startbootstrap-sb-admin-2-gh-pages/img/undraw_profile_3.svg

@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="_x38_8ce59e9-c4b8-4d1d-9d7a-ce0190159aa8"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 231.8 231.8"
+	 style="enable-background:new 0 0 231.8 231.8;" xml:space="preserve">
+<style type="text/css">
+	.st0{opacity:0.5;}
+	.st1{fill:url(#SVGID_1_);}
+	.st2{fill:#F5F5F5;}
+	.st3{fill:#4E73DF;}
+	.st4{fill:#F55F44;}
+	.st5{opacity:0.1;enable-background:new    ;}
+	.st6{fill:#FDA57D;}
+	.st7{fill:#333333;}
+</style>
+<g class="st0">
+	
+		<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="115.89" y1="9.36" x2="115.89" y2="241.14" gradientTransform="matrix(1 0 0 -1 0 241.14)">
+		<stop  offset="0" style="stop-color:#808080;stop-opacity:0.25"/>
+		<stop  offset="0.54" style="stop-color:#808080;stop-opacity:0.12"/>
+		<stop  offset="1" style="stop-color:#808080;stop-opacity:0.1"/>
+	</linearGradient>
+	<circle class="st1" cx="115.9" cy="115.9" r="115.9"/>
+</g>
+<circle class="st2" cx="116.1" cy="115.1" r="113.4"/>
+<path class="st3" d="M116.2,229c22.2,0,43.8-6.5,62.3-18.7c-4.2-22.8-20.1-24.2-20.1-24.2H70.8c0,0-15,1.2-19.7,22.2
+	C70.1,221.9,92.9,229.1,116.2,229z"/>
+<circle class="st4" cx="115" cy="112.8" r="54.8"/>
+<path class="st5" d="M97.3,158.4h35.1l0,0v28.1c0,9.7-7.9,17.5-17.5,17.5l0,0l0,0c-9.7,0-17.5-7.9-17.5-17.5l0,0L97.3,158.4
+	L97.3,158.4z"/>
+<path class="st6" d="M100.7,157.1h28.4c1.9,0,3.4,1.5,3.4,3.4l0,0v24.7c0,9.7-7.9,17.5-17.5,17.5l0,0l0,0c-9.7,0-17.5-7.9-17.5-17.5
+	l0,0v-24.7C97.4,158.6,98.8,157.1,100.7,157.1L100.7,157.1L100.7,157.1z"/>
+<path class="st5" d="M97.4,171.6c11.3,4.2,23.8,4.3,35.1,0.1v-4.3H97.4V171.6z"/>
+<circle class="st6" cx="115" cy="123.7" r="50.3"/>
+<circle class="st4" cx="114.9" cy="57.1" r="20.2"/>
+<circle class="st4" cx="114.9" cy="37.1" r="13.3"/>
+<path class="st4" d="M106.2,68.2c-9.9-4.4-14.5-15.8-10.5-25.9c-0.1,0.3-0.3,0.6-0.4,0.9c-4.6,10.2,0,22.2,10.2,26.8
+	s22.2,0,26.8-10.2c0.1-0.3,0.2-0.6,0.4-0.9C127.6,68.5,116,72.6,106.2,68.2z"/>
+<path class="st5" d="M79.2,77.9c0,0,21.2,43,81,18l-13.9-21.8l-24.7-8.9L79.2,77.9z"/>
+<path class="st4" d="M79.2,77.3c0,0,21.2,43,81,18l-13.9-21.8l-24.7-8.9L79.2,77.3z"/>
+<path class="st7" d="M95.5,61.6c13-1,26.1-1,39.2,0C134.7,61.6,105.8,64.3,95.5,61.6z"/>
+<path class="st4" d="M118,23c-1,0-2,0-3,0.2h0.8c7.3,0.2,13.1,6.4,12.8,13.7c-0.2,6.2-4.7,11.5-10.8,12.6
+	c7.3,0.1,13.3-5.8,13.4-13.2C131.2,29.1,125.3,23.1,118,23L118,23z"/>
+<ellipse class="st6" cx="64.7" cy="123.6" rx="4.7" ry="8.8"/>
+<ellipse class="st6" cx="165.3" cy="123.6" rx="4.7" ry="8.8"/>
+<polygon class="st4" points="76,78.6 85.8,73.5 88,81.6 82,85.7 "/>
+</svg>

src/main/webapp/resources/framework/template/startbootstrap-sb-admin-2-gh-pages/img/undraw_rocket.svg

@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="b759170a-51c3-4e2f-999d-77dec9fd6d11"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 650.9 610.5"
+	 style="enable-background:new 0 0 650.9 610.5;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#AFC0E0;}
+	.st1{opacity:0.2;fill:#FFFFFF;enable-background:new    ;}
+	.st2{opacity:0.1;enable-background:new    ;}
+	.st3{fill:#E3E8F4;}
+	.st4{fill:#4E73DF;}
+</style>
+<path class="st0" d="M174,321c-2-1.6-4.2-3-6.6-4.2c-51.8-26.2-157,67.8-157,67.8L0,372.7c0,0,42.1-43.8,92.4-117.3
+	c45.2-66.1,150.7-51.8,171.4-48.3c2.3,0.4,3.6,0.7,3.6,0.7C298.7,288.3,174,321,174,321z"/>
+<path class="st1" d="M269.4,213.9c-0.6-2-1.3-4-2-6c0,0-1.2-0.2-3.6-0.7c-20.7-3.5-126.2-17.8-171.4,48.3C42.1,329,0,372.7,0,372.7
+	l5.9,6.7c0,0,42.1-43.8,92.4-117.3C143.3,196.3,248,210.2,269.4,213.9z"/>
+<path class="st0" d="M337.7,533.4c-79.2,40.8-127.8,77.1-127.8,77.1l-10.5-11.9c0,0,111.1-96.8,85.3-150.9c-0.5-1.2-1.2-2.3-1.9-3.4
+	c0,0,47.9-119.6,123.9-78.5c0,0,0.1,1,0.2,2.9C407.8,387.8,409.7,496.3,337.7,533.4z"/>
+<path class="st2" d="M174,321c-2-1.6-4.2-3-6.6-4.2c29.3-38.9,61.5-75.5,96.3-109.7c2.3,0.4,3.6,0.7,3.6,0.7
+	C298.7,288.3,174,321,174,321z"/>
+<path class="st2" d="M406.9,368.6c-38.6,29.6-79.4,56.1-122.3,79.1c-0.5-1.2-1.2-2.3-1.9-3.4c0,0,47.9-119.6,123.9-78.5
+	C406.7,365.7,406.8,366.7,406.9,368.6z"/>
+<path class="st3" d="M263.6,455.5c-20.3,10.4-41.6,20.5-64,30.2c-33.6,14.6-51.5-2.2-80.7-91.5c0,0,12.5-22.5,37.2-57
+	c54.3-75.8,167.5-209.1,336.1-286.7C542.7,27.1,596.1,10.1,650.9,0c0,0-9.1,68.8-62,160.1S439.1,365.3,263.6,455.5z"/>
+<circle class="st0" cx="435.6" cy="199.7" r="71.6"/>
+<path class="st4" d="M469.2,237.9c-21,18.6-53.1,16.6-71.7-4.5c-7.8-8.8-12.2-20-12.7-31.8c-0.2-4.7,0.3-9.4,1.4-14
+	c0.5-2,1.1-4.1,1.9-6c2.9-7.7,7.7-14.5,13.8-19.9c0.3-0.3,0.6-0.5,0.9-0.8c17.1-14.4,41.5-15.9,60.3-3.8c3.5,2.3,6.7,4.9,9.5,7.9
+	l1,1.1C492.2,187.2,490.2,219.3,469.2,237.9C469.2,237.8,469.2,237.9,469.2,237.9z"/>
+<path class="st0" d="M588.9,160.1c-83-35.2-96.8-109.6-96.8-109.6C542.7,27,596.1,10.1,650.9,0C650.9,0,641.8,68.8,588.9,160.1z"/>
+<path class="st0" d="M263.6,455.5c-13.7,7.1-27.9,13.9-42.6,20.7c-7,3.2-14.1,6.4-21.4,9.5c-10.9,4.7-51.5-2.2-80.7-91.5
+	c0,0,4.1-7.3,12.1-20c6.1-9.6,14.5-22.2,25.1-37c0,0,11,33.2,41.1,67.3C215.8,425.7,238.4,443,263.6,455.5z"/>
+<path class="st3" d="M221,476.2c-7,3.2-14.1,6.4-21.4,9.5c-10.9,4.7-51.5-2.2-80.7-91.5c0,0,4.1-7.3,12.1-20
+	C131,374.2,170.2,456.9,221,476.2z"/>
+<path class="st1" d="M463.2,157l-0.1,0l-60.1,3.9c-0.3,0.3-0.6,0.5-0.9,0.8c-6.2,5.4-10.9,12.3-13.8,19.9l84.5-16.6L463.2,157z"/>
+<path class="st1" d="M438.8,194.3l-53.9,7.3c-0.2-4.7,0.3-9.4,1.4-14l52.8,1.4L438.8,194.3z"/>
+<path class="st1" d="M131.7,408.7c0,0,12.5-22.5,37.2-57C223.2,276,336.4,142.7,504.9,65c45.6-21.1,93.3-36.9,142.5-47.3
+	C650.1,6.4,650.9,0,650.9,0c-54.8,10.1-108.2,27-158.7,50.5c-168.6,77.7-281.8,211-336.1,286.7c-24.7,34.4-37.2,57-37.2,57
+	c11.5,35.3,26.6,57,40.5,70.3C149.4,451.4,139.7,433.3,131.7,408.7z"/>
+</svg>

src/main/webapp/resources/framework/template/startbootstrap-sb-admin-2-gh-pages/js/demo/chart-area-demo.js

@@ -0,0 +1,118 @@
+// Set new default font family and font color to mimic Bootstrap's default styling
+Chart.defaults.global.defaultFontFamily = 'Nunito', '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
+Chart.defaults.global.defaultFontColor = '#858796';
+
+function number_format(number, decimals, dec_point, thousands_sep) {
+  // *     example: number_format(1234.56, 2, ',', ' ');
+  // *     return: '1 234,56'
+  number = (number + '').replace(',', '').replace(' ', '');
+  var n = !isFinite(+number) ? 0 : +number,
+    prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
+    sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
+    dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
+    s = '',
+    toFixedFix = function(n, prec) {
+      var k = Math.pow(10, prec);
+      return '' + Math.round(n * k) / k;
+    };
+  // Fix for IE parseFloat(0.55).toFixed(0) = 0;
+  s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.');
+  if (s[0].length > 3) {
+    s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep);
+  }
+  if ((s[1] || '').length < prec) {
+    s[1] = s[1] || '';
+    s[1] += new Array(prec - s[1].length + 1).join('0');
+  }
+  return s.join(dec);
+}
+
+// Area Chart Example
+var ctx = document.getElementById("myAreaChart");
+var myLineChart = new Chart(ctx, {
+  type: 'line',
+  data: {
+    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
+    datasets: [{
+      label: "Earnings",
+      lineTension: 0.3,
+      backgroundColor: "rgba(78, 115, 223, 0.05)",
+      borderColor: "rgba(78, 115, 223, 1)",
+      pointRadius: 3,
+      pointBackgroundColor: "rgba(78, 115, 223, 1)",
+      pointBorderColor: "rgba(78, 115, 223, 1)",
+      pointHoverRadius: 3,
+      pointHoverBackgroundColor: "rgba(78, 115, 223, 1)",
+      pointHoverBorderColor: "rgba(78, 115, 223, 1)",
+      pointHitRadius: 10,
+      pointBorderWidth: 2,
+      data: [0, 10000, 5000, 15000, 10000, 20000, 15000, 25000, 20000, 30000, 25000, 40000],
+    }],
+  },
+  options: {
+    maintainAspectRatio: false,
+    layout: {
+      padding: {
+        left: 10,
+        right: 25,
+        top: 25,
+        bottom: 0
+      }
+    },
+    scales: {
+      xAxes: [{
+        time: {
+          unit: 'date'
+        },
+        gridLines: {
+          display: false,
+          drawBorder: false
+        },
+        ticks: {
+          maxTicksLimit: 7
+        }
+      }],
+      yAxes: [{
+        ticks: {
+          maxTicksLimit: 5,
+          padding: 10,
+          // Include a dollar sign in the ticks
+          callback: function(value, index, values) {
+            return '$' + number_format(value);
+          }
+        },
+        gridLines: {
+          color: "rgb(234, 236, 244)",
+          zeroLineColor: "rgb(234, 236, 244)",
+          drawBorder: false,
+          borderDash: [2],
+          zeroLineBorderDash: [2]
+        }
+      }],
+    },
+    legend: {
+      display: false
+    },
+    tooltips: {
+      backgroundColor: "rgb(255,255,255)",
+      bodyFontColor: "#858796",
+      titleMarginBottom: 10,
+      titleFontColor: '#6e707e',
+      titleFontSize: 14,
+      borderColor: '#dddfeb',
+      borderWidth: 1,
+      xPadding: 15,
+      yPadding: 15,
+      displayColors: false,
+      intersect: false,
+      mode: 'index',
+      caretPadding: 10,
+      callbacks: {
+        label: function(tooltipItem, chart) {
+          var datasetLabel = chart.datasets[tooltipItem.datasetIndex].label || '';
+          return datasetLabel + ': $' + number_format(tooltipItem.yLabel);
+        }
+      }
+    }
+  }
+});