+
+ `;
+ },
+ },
+ browser: {
+ title: 'Browser',
+ render: (item) => {
+ return `
+
+ 
+
+
+ ${item.name}
+
+
+
+
+ ${item.name}
+
+ `;
+ },
+ },
+ ipAddress: {
+ title: 'IP Address',
+ },
+ location: {
+ title: 'Location',
+ render: (item) => {
+ const prefix = DataTableManager.isLocalhost() ? 'metronic-tailwind-html' : 'metronic/tailwind';
+ return `
+
+ 
+ ${item.name}
+
+ `;
+ },
+ },
+ action: {
+ title: '',
+ render: (item) => {
+ return `
+
+ `;
+ },
+ createdCell: (cell, cellData, rowData) => {
+ cell.querySelector('.btn').addEventListener('click', () => {
+ alert(`Clicked on action button for row ${rowData.user.name}`);
+ });
+ },
+ },
+ },
+ };
+ }
+
+ /**
+ * Creates a map of filter elements based on the data-datatable-filter-column attribute.
+ *
+ * @return {Map
+ ${item.name}
+
+
+ `
+ );
+ }
+ },
+ markers: {
+ size: 0,
+ colors: 'var(--tw-primary-light)',
+ strokeColors: 'var(--tw-primary)',
+ strokeWidth: 4,
+ strokeOpacity: 1,
+ strokeDashArray: 0,
+ fillOpacity: 1,
+ discrete: [],
+ shape: "circle",
+ radius: 2,
+ offsetX: 0,
+ offsetY: 0,
+ onClick: undefined,
+ onDblClick: undefined,
+ showNullDataPoints: true,
+ hover: {
+ size: 8,
+ sizeOffset: 0
+ }
+ },
+ fill: {
+ gradient: {
+ enabled: true,
+ opacityFrom: 0.25,
+ opacityTo: 0
+ }
+ },
+ grid: {
+ borderColor: 'var(--tw-gray-200)',
+ strokeDashArray: 5,
+ clipMarkers: false,
+ yaxis: {
+ lines: {
+ show: true
+ }
+ },
+ xaxis: {
+ lines: {
+ show: false
+ }
+ },
+ },
+ };
+
+ const element = document.querySelector('#media_uploads_chart');
+ if (!element) return;
+
+ const chart = new ApexCharts(element, options);
+ chart.render();
+ }
+
+ static initEarningsChart() {
+ const data = [75, 25, 45, 15, 85, 35, 70, 25, 35, 15, 45, 30];
+ const categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+
+ const options = {
+ series: [{
+ name: 'series1',
+ data: data
+ }],
+ chart: {
+ height: 250,
+ type: 'area',
+ toolbar: {
+ show: false
+ }
+ },
+ dataLabels: {
+ enabled: false
+ },
+ legend: {
+ show: false
+ },
+ stroke: {
+ curve: 'smooth',
+ show: true,
+ width: 3,
+ colors: ['var(--tw-primary)']
+ },
+ xaxis: {
+ categories: categories,
+ axisBorder: {
+ show: false,
+ },
+ maxTicks: 12,
+ axisTicks: {
+ show: false
+ },
+ labels: {
+ style: {
+ colors: 'var(--tw-gray-500)',
+ fontSize: '12px'
+ }
+ },
+ crosshairs: {
+ position: 'front',
+ stroke: {
+ color: 'var(--tw-primary)',
+ width: 1,
+ dashArray: 3
+ }
+ },
+ tooltip: {
+ enabled: false,
+ formatter: undefined,
+ offsetY: 0,
+ style: {
+ fontSize: '12px'
+ }
+ }
+ },
+ yaxis: {
+ min: 0,
+ max: 100,
+ tickAmount: 5, // This will create 5 ticks: 0, 20, 40, 60, 80, 100
+ axisTicks: {
+ show: false
+ },
+ labels: {
+ style: {
+ colors: 'var(--tw-gray-500)',
+ fontSize: '12px'
+ },
+ formatter: (value) => {
+ return `$${value}K`;
+ }
+ }
+ },
+ tooltip: {
+ enabled: true,
+ custom({series, seriesIndex, dataPointIndex, w}) {
+ const number = parseInt(series[seriesIndex][dataPointIndex]) * 1000;
+ const month = w.globals.seriesX[seriesIndex][dataPointIndex];
+ const monthName = categories[month];
+
+ const formatter = new Intl.NumberFormat('en-US', {
+ style: 'currency',
+ currency: 'USD',
+ });
+
+ const formattedNumber = formatter.format(number);
+
+ return (
+ `
+ ${monthName}, 2024 Sales
+
+
+ ${formattedNumber}
+ +24%
+
+
+ `
+ );
+ }
+ },
+ markers: {
+ size: 0,
+ colors: 'var(--tw-primary-light)',
+ strokeColors: 'var(--tw-primary)',
+ strokeWidth: 4,
+ strokeOpacity: 1,
+ strokeDashArray: 0,
+ fillOpacity: 1,
+ discrete: [],
+ shape: "circle",
+ radius: 2,
+ offsetX: 0,
+ offsetY: 0,
+ onClick: undefined,
+ onDblClick: undefined,
+ showNullDataPoints: true,
+ hover: {
+ size: 8,
+ sizeOffset: 0
+ }
+ },
+ fill: {
+ gradient: {
+ enabled: true,
+ opacityFrom: 0.25,
+ opacityTo: 0
+ }
+ },
+ grid: {
+ borderColor: 'var(--tw-gray-200)',
+ strokeDashArray: 5,
+ clipMarkers: false,
+ yaxis: {
+ lines: {
+ show: true
+ }
+ },
+ xaxis: {
+ lines: {
+ show: false
+ }
+ },
+ },
+ };
+
+ const element = document.querySelector('#earnings_chart');
+ if (!element) return;
+
+ const chart = new ApexCharts(element, options);
+ chart.render();
+ }
+
+ static initMyBalanceChart(chartId, data, categories) {
+ const options = {
+ series: [{
+ name: 'series1',
+ data: data
+ }],
+ chart: {
+ height: 250,
+ type: 'area',
+ toolbar: {
+ show: false
+ }
+ },
+ dataLabels: {
+ enabled: false
+ },
+ legend: {
+ show: false
+ },
+ stroke: {
+ curve: 'smooth',
+ show: true,
+ width: 3,
+ colors: ['var(--tw-primary)']
+ },
+ xaxis: {
+ categories: categories,
+ axisBorder: {
+ show: false,
+ },
+ axisTicks: {
+ show: false
+ },
+ labels: {
+ style: {
+ colors: 'var(--tw-gray-600)',
+ fontSize: '12px'
+ }
+ },
+ crosshairs: {
+ position: 'front',
+ stroke: {
+ color: 'var(--tw-primary)',
+ width: 1,
+ dashArray: 3
+ }
+ },
+ tooltip: {
+ enabled: false,
+ formatter: undefined,
+ offsetY: 0,
+ style: {
+ fontSize: '12px'
+ }
+ }
+ },
+ yaxis: {
+ min: 0,
+ max: 100,
+ tickAmount: 5,
+ axisTicks: {
+ show: false
+ },
+ labels: {
+ style: {
+ colors: 'var(--tw-gray-600)',
+ fontSize: '12px'
+ },
+ formatter: (value) => {
+ return `$${value}K`;
+ }
+ }
+ },
+ tooltip: {
+ enabled: true,
+ custom({series, seriesIndex, dataPointIndex, w}) {
+ const number = parseInt(series[seriesIndex][dataPointIndex]) * 1000;
+ const month = w.globals.seriesX[seriesIndex][dataPointIndex];
+ const monthName = categories[month];
+
+ const formatter = new Intl.NumberFormat('en-US', {
+ style: 'currency',
+ currency: 'USD',
+ });
+
+ const formattedNumber = formatter.format(number);
+
+ return (
+ `
+ ${monthName}, 2024 Sales
+
+
+ ${formattedNumber}
+ +24%
+
+
+ `
+ );
+ }
+ },
+ markers: {
+ size: 0,
+ colors: 'var(--tw-primary-light)',
+ strokeColors: 'var(--tw-primary)',
+ strokeWidth: 4,
+ strokeOpacity: 1,
+ strokeDashArray: 0,
+ fillOpacity: 1,
+ discrete: [],
+ shape: "circle",
+ radius: 2,
+ offsetX: 0,
+ offsetY: 0,
+ onClick: undefined,
+ onDblClick: undefined,
+ showNullDataPoints: true,
+ hover: {
+ size: 8,
+ sizeOffset: 0
+ }
+ },
+ fill: {
+ gradient: {
+ enabled: true,
+ opacityFrom: 0.25,
+ opacityTo: 0
+ }
+ },
+ grid: {
+ borderColor: 'var(--tw-gray-200)',
+ strokeDashArray: 5,
+ clipMarkers: false,
+ yaxis: {
+ lines: {
+ show: true
+ }
+ },
+ xaxis: {
+ lines: {
+ show: false
+ }
+ },
+ },
+ };
+
+ const element = document.querySelector(`#${chartId}`);
+ if (!element) return;
+
+ // Destroy the old chart instance if it exists
+ if (element.chart) {
+ element.chart.destroy();
+ }
+
+ const chart = new ApexCharts(element, options);
+ element.chart = chart; // Store the chart instance on the element
+ chart.render();
+ }
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+ // Initial chart rendering
+ KTGeneralWidgets.initMyBalanceChart('my_balance_chart', [75, 25, 45, 15, 85, 35, 70, 25, 35], ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep']);
+
+ // Event listener for tab buttons
+ document.querySelectorAll('.tab-button').forEach(button => {
+ button.addEventListener('click', (event) => {
+ // Remove active class from all buttons
+ document.querySelectorAll('.tab-button').forEach(btn => btn.classList.remove('active'));
+
+ // Add active class to the clicked button
+ event.target.classList.add('active');
+
+ // Determine chart data and categories based on the clicked tab
+ const chartId = 'my_balance_chart'; // You might need to adjust this if you have multiple charts
+ let data, categories;
+ switch (event.target.getAttribute('data-chart')) {
+ case 'my_balance_chart1':
+ data = [45, 35, 45, 35, 55, 85, 20, 25, 55];
+ categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'];
+ break;
+ case 'my_balance_chart2':
+ data = [25, 55, 65, 45, 25, 65, 50, 40, 60];
+ categories = ['Oct', 'Nov', 'Dec', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'];
+ break;
+ case 'my_balance_chart3':
+ data = [80, 40, 50, 20, 50, 80, 60, 20, 30];
+ categories = ['Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', 'Jan', 'Feb', 'Mar'];
+ break;
+ case 'my_balance_chart4':
+ data = [20, 65, 20, 50, 70, 25, 40, 60, 80];
+ categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'];
+ break;
+ default:
+ data = [];
+ categories = [];
+ }
+
+ // Update chart with new data and categories
+ KTGeneralWidgets.initMyBalanceChart(chartId, data, categories);
+ });
+ });
+});
+
+
+KTDom.ready(() => {
+ KTGeneralWidgets.initCompanyProfileMap();
+ KTGeneralWidgets.initContributionChart();
+ KTGeneralWidgets.initMediaUploadsChart();
+ KTGeneralWidgets.initEarningsChart();
+});
\ No newline at end of file
diff --git a/resources/metronic/core/components/collapse/collapse.ts b/resources/metronic/core/components/collapse/collapse.ts
index 8f3e7d4..f2e0f18 100644
--- a/resources/metronic/core/components/collapse/collapse.ts
+++ b/resources/metronic/core/components/collapse/collapse.ts
@@ -166,7 +166,7 @@ export class KTCollapse extends KTComponent implements KTCollapseInterface {
}
public static createInstances(): void {
- const elements = document.querySelectorAll('[data-collapse]:not([data-collapse="false"]');
+ const elements = document.querySelectorAll('[data-collapse]:not([data-collapse="false"])');
elements.forEach((element) => {
new KTCollapse(element as HTMLElement);
diff --git a/resources/metronic/core/components/component.ts b/resources/metronic/core/components/component.ts
index f30d7ab..249d88f 100644
--- a/resources/metronic/core/components/component.ts
+++ b/resources/metronic/core/components/component.ts
@@ -70,21 +70,21 @@ export default class KTComponent {
const parts = String(value).split('|');
if (parts.length > 1) {
- parts.every((part) => {
- if (part.includes(':')) {
- const [breakpointKey, breakpointValue] = part.split(':');
- const breakpoint = KTUtils.getBreakpoint(breakpointKey as KTBreakpointType);
+ for (let i = parts.length - 1; i < parts.length; i--) {
+ const part = parts[i];
+ if (part.includes(':')) {
+ const [breakpointKey, breakpointValue] = part.split(':');
+ const breakpoint = KTUtils.getBreakpoint(breakpointKey as KTBreakpointType);
if (breakpoint <= width) {
result = breakpointValue;
- return false;
+ break;
}
} else {
result = part;
+ break;
}
-
- return true;
- });
+ }
} else {
result = value;
}
diff --git a/resources/metronic/core/components/datatable/types.ts b/resources/metronic/core/components/datatable/types.ts
index 717e941..decef07 100644
--- a/resources/metronic/core/components/datatable/types.ts
+++ b/resources/metronic/core/components/datatable/types.ts
@@ -76,7 +76,7 @@ export interface KTDataTableConfigInterface {
stateSave?: boolean;
stateNamespace?: string;
pageSizes?: number[];
- columns: {
+ columns?: {
[key: keyof KTDataTableDataInterface | string]: {
title?: string,
render?: (item: KTDataTableDataInterface[keyof KTDataTableDataInterface] | string, data: KTDataTableDataInterface, context: KTDataTableInterface) => string,
diff --git a/resources/metronic/core/components/dismiss/dismiss.ts b/resources/metronic/core/components/dismiss/dismiss.ts
index 94ddb7f..255ae3a 100644
--- a/resources/metronic/core/components/dismiss/dismiss.ts
+++ b/resources/metronic/core/components/dismiss/dismiss.ts
@@ -120,7 +120,7 @@ export class KTDismiss extends KTComponent implements KTDismissInterface {
}
public static createInstances(): void {
- const elements = document.querySelectorAll('[data-dismiss]:not([data-dismiss="false"]');
+ const elements = document.querySelectorAll('[data-dismiss]:not([data-dismiss="false"])');
elements.forEach((element) => {
new KTDismiss(element as HTMLElement);
diff --git a/resources/metronic/core/components/menu/menu.ts b/resources/metronic/core/components/menu/menu.ts
index 920c946..2cc8dc1 100644
--- a/resources/metronic/core/components/menu/menu.ts
+++ b/resources/metronic/core/components/menu/menu.ts
@@ -1128,7 +1128,7 @@ export class KTMenu extends KTComponent implements KTMenuInterface {
public static handleClick() {
KTEventHandler.on(
document.body,
- '.menu-item[data-menu-item-trigger] > .menu-link, .menu-item[data-menu-item-trigger] > .menu-toggle, .menu-item[data-menu-item-trigger] > .menu-label .menu-toggle, [data-menu-item-trigger]:not(.menu-item):not([data-menu-item-trigger="auto"])',
+ '.menu-item[data-menu-item-trigger] > .menu-link, .menu-item[data-menu-item-trigger] > .menu-label .menu-toggle, .menu-item[data-menu-item-trigger] > .menu-toggle, [data-menu-item-trigger]:not(.menu-item):not([data-menu-item-trigger="auto"])',
'click',
(event: Event, target: HTMLElement) => {
const menu = KTMenu.getInstance(target);
@@ -1147,6 +1147,9 @@ export class KTMenu extends KTComponent implements KTMenuInterface {
const menu = KTMenu.getInstance(target);
if (menu !== null) {
+ if (target.tagName == 'a' || target.hasAttribute('href')) {
+ menu.dismiss(target);
+ }
return menu.link(target, event);
}
}
@@ -1188,12 +1191,12 @@ export class KTMenu extends KTComponent implements KTMenuInterface {
}
public static initHandlers(): void {
+ this.handleDismiss();
this.handleClickAway();
this.handleKeyboard();
this.handleMouseover();
this.handleMouseout();
this.handleClick();
- this.handleDismiss();
this.handleResize();
}
diff --git a/resources/metronic/core/components/scrollable/scrollable.ts b/resources/metronic/core/components/scrollable/scrollable.ts
index d1aba69..fba0bad 100644
--- a/resources/metronic/core/components/scrollable/scrollable.ts
+++ b/resources/metronic/core/components/scrollable/scrollable.ts
@@ -19,7 +19,7 @@ export class KTScrollable extends KTComponent implements KTScrollableInterface {
save: true,
dependencies: '',
wrappers: '',
- offset: '',
+ offset: ''
};
protected override _config: KTScrollableConfigInterface = this._defaultConfig;
protected _elementId: string | null = null;
@@ -53,11 +53,12 @@ export class KTScrollable extends KTComponent implements KTScrollableInterface {
protected _setupHeight(): void {
if (!this._element) return;
+
const heightType = this._getHeightType();
const height = this._getHeight();
// Set height
- if (height && height.length > 0) {
+ if (height && height != '0' && height.length > 0) {
this._element.style.setProperty(heightType, height);
} else {
this._element.style.setProperty(heightType, '');
diff --git a/resources/metronic/core/components/scrollable/types.ts b/resources/metronic/core/components/scrollable/types.ts
index 8d8f07f..b6b2565 100644
--- a/resources/metronic/core/components/scrollable/types.ts
+++ b/resources/metronic/core/components/scrollable/types.ts
@@ -2,7 +2,7 @@ export interface KTScrollableConfigInterface {
save: boolean,
dependencies: string,
wrappers: string,
- offset: string,
+ offset: string
}
export interface KTScrollableInterface {
diff --git a/resources/metronic/core/components/scrollto/scrollto.ts b/resources/metronic/core/components/scrollto/scrollto.ts
index 884418f..d0d2009 100644
--- a/resources/metronic/core/components/scrollto/scrollto.ts
+++ b/resources/metronic/core/components/scrollto/scrollto.ts
@@ -90,7 +90,7 @@ export class KTScrollto extends KTComponent implements KTScrolltoInterface {
}
public static createInstances(): void {
- const elements = document.querySelectorAll('[data-scrollto]:not([data-scrollto="false"]');
+ const elements = document.querySelectorAll('[data-scrollto]:not([data-scrollto="false"])');
elements.forEach((element) => {
new KTScrollto(element as HTMLElement);
diff --git a/resources/metronic/core/components/sticky/sticky.ts b/resources/metronic/core/components/sticky/sticky.ts
index e32b75e..fc44b93 100644
--- a/resources/metronic/core/components/sticky/sticky.ts
+++ b/resources/metronic/core/components/sticky/sticky.ts
@@ -20,13 +20,14 @@ export class KTSticky extends KTComponent implements KTStickyInterface {
offset: 0,
reverse: false,
release: '',
- activate: ''
+ activate: '',
};
protected override _config: KTStickyConfigInterface = this._defaultConfig;
protected _attributeRoot: string;
protected _eventTriggerState: boolean;
protected _lastScrollTop: number;
protected _releaseElement: HTMLElement;
+ protected _activateElement: HTMLElement;
protected _wrapperElement: HTMLElement;
constructor(element: HTMLElement, config: KTStickyConfigInterface | null = null) {
@@ -38,6 +39,7 @@ export class KTSticky extends KTComponent implements KTStickyInterface {
this._buildConfig(config);
this._releaseElement = KTDom.getElement(this._getOption('release') as string);
+ this._activateElement = KTDom.getElement(this._getOption('activate') as string);
this._wrapperElement = this._element.closest('[data-sticky-wrapper]');
this._attributeRoot = `data-sticky-${this._getOption('name')}`;
this._eventTriggerState = true;
@@ -68,21 +70,20 @@ export class KTSticky extends KTComponent implements KTStickyInterface {
protected _process(): void {
const reverse = this._getOption('reverse');
- const activateOffset = this._getActivateOffset();
- const releaseOffset = this._getReleaseOffset();
+ const offset = this._getOffset();
- if (activateOffset < 0) {
+ if (offset < 0) {
this._disable();
return;
}
const st = KTDom.getScrollTop();
- const proceed = (!this._releaseElement || releaseOffset > st);
+ const release = (this._releaseElement && KTDom.isPartiallyInViewport(this._releaseElement));
// Release on reverse scroll mode
if (reverse === true) {
// Forward scroll mode
- if (st > activateOffset && proceed) {
+ if (st > offset && !release) {
if (document.body.hasAttribute(this._attributeRoot) === false) {
if (this._enable() === false) {
return;
@@ -101,6 +102,9 @@ export class KTSticky extends KTComponent implements KTStickyInterface {
} else {
if (document.body.hasAttribute(this._attributeRoot) === true) {
this._disable();
+ if (release) {
+ this._element.classList.add('release');
+ }
document.body.removeAttribute(this._attributeRoot);
}
@@ -116,7 +120,7 @@ export class KTSticky extends KTComponent implements KTStickyInterface {
// Classic scroll mode
} else {
// Forward scroll mode
- if (st > activateOffset && proceed) {
+ if (st > offset && !release) {
if (document.body.hasAttribute(this._attributeRoot) === false) {
if (this._enable() === false) {
return;
@@ -135,6 +139,9 @@ export class KTSticky extends KTComponent implements KTStickyInterface {
} else { // back scroll mode
if (document.body.hasAttribute(this._attributeRoot) === true) {
this._disable();
+ if (release) {
+ this._element.classList.add('release');
+ }
document.body.removeAttribute(this._attributeRoot);
}
@@ -148,7 +155,7 @@ export class KTSticky extends KTComponent implements KTStickyInterface {
}
}
- protected _getActivateOffset(): number {
+ protected _getOffset(): number {
let offset = parseInt(this._getOption('offset') as string);
const activateElement = KTDom.getElement(this._getOption('activate') as string);
@@ -159,16 +166,6 @@ export class KTSticky extends KTComponent implements KTStickyInterface {
return offset;
}
- protected _getReleaseOffset(): number {
- let offset = parseInt(this._getOption('offset') as string);
-
- if (this._releaseElement && this._releaseElement.offsetTop) {
- offset = Math.abs(offset - this._releaseElement.offsetTop);
- }
-
- return offset;
- }
-
protected _enable(): boolean {
if (!this._element) return false;
@@ -235,6 +232,7 @@ export class KTSticky extends KTComponent implements KTStickyInterface {
}
this._element.classList.add('active');
+ this._element.classList.remove('release');
return true;
}
diff --git a/resources/metronic/core/components/toggle-password/toggle-password.ts b/resources/metronic/core/components/toggle-password/toggle-password.ts
index 5fe5d7e..4681bab 100644
--- a/resources/metronic/core/components/toggle-password/toggle-password.ts
+++ b/resources/metronic/core/components/toggle-password/toggle-password.ts
@@ -24,7 +24,7 @@ export class KTTogglePassword extends KTComponent implements KTTogglePasswordInt
this._buildConfig(config);
this._triggerElement = this._element.querySelector('[data-toggle-password-trigger]');
- this._inputElement = this._element.querySelector('input[type="password"]');
+ this._inputElement = this._element.querySelector('input');
if (!this._triggerElement || !this._inputElement) {
return;
@@ -36,12 +36,11 @@ export class KTTogglePassword extends KTComponent implements KTTogglePasswordInt
protected _handlers(): void {
if (!this._element) return;
- this._triggerElement.addEventListener('click', () => {
+ this._triggerElement.addEventListener('click', (e: Event) => {
this._toggle();
});
this._inputElement.addEventListener('input', () => {
-
this._update();
});
}
diff --git a/resources/metronic/core/components/toggle/toggle.ts b/resources/metronic/core/components/toggle/toggle.ts
index 6aab462..e052954 100644
--- a/resources/metronic/core/components/toggle/toggle.ts
+++ b/resources/metronic/core/components/toggle/toggle.ts
@@ -131,7 +131,7 @@ export class KTToggle extends KTComponent implements KTToggleInterface {
}
public static createInstances(): void {
- const elements = document.querySelectorAll('[data-toggle]:not([data-toggle="false"]');
+ const elements = document.querySelectorAll('[data-toggle]:not([data-toggle="false"])');
elements.forEach((element) => {
new KTToggle(element as HTMLElement);
});
diff --git a/resources/metronic/core/components/tooltip/tooltip.ts b/resources/metronic/core/components/tooltip/tooltip.ts
index 1806a50..03e31c4 100644
--- a/resources/metronic/core/components/tooltip/tooltip.ts
+++ b/resources/metronic/core/components/tooltip/tooltip.ts
@@ -286,7 +286,7 @@ export class KTTooltip extends KTComponent implements KTTooltipInterface {
}
public static createInstances(): void {
- document.querySelectorAll('[data-tooltip]:not([data-tooltip="false"]').forEach((element) => {
+ document.querySelectorAll('[data-tooltip]:not([data-tooltip="false"])').forEach((element) => {
new KTTooltip(element as HTMLElement);
});
}
diff --git a/resources/metronic/core/index.spa.ts b/resources/metronic/core/index.spa.ts
index 1a8e452..066f6db 100644
--- a/resources/metronic/core/index.spa.ts
+++ b/resources/metronic/core/index.spa.ts
@@ -1,130 +1,135 @@
-
/*
-* Index
-* @version: 1.0.0
+* Metronic
* @author: Keenthemes
* Copyright 2024 Keenthemes
*/
-import KTUtils from './helpers/utils';
import KTDom from './helpers/dom';
+import KTUtils from './helpers/utils';
import KTEventHandler from './helpers/event-handler';
-import {KTMenu} from './components/menu';
-import {KTDropdown} from './components/dropdown';
-import {KTModal} from './components/modal';
-import {KTDrawer} from './components/drawer';
-import {KTCollapse} from './components/collapse';
-import {KTDismiss} from './components/dismiss';
-import {KTTabs} from './components/tabs';
-import {KTAccordion} from './components/accordion';
-import {KTScrollspy} from './components/scrollspy';
-import {KTScrollable} from './components/scrollable';
-import {KTScrollto} from './components/scrollto';
-import {KTSticky} from './components/sticky';
-import {KTReparent} from './components/reparent';
-import {KTToggle} from './components/toggle';
-import {KTTooltip} from './components/tooltip';
-import {KTStepper} from './components/stepper';
-import {KTTheme} from './components/theme';
-import {KTImageInput} from './components/image-input';
-import {KTTogglePassword} from './components/toggle-password';
-import {KTDataTable} from './components/datatable';
+import { KTMenu } from './components/menu';
+import { KTDropdown } from './components/dropdown';
+import { KTModal } from './components/modal';
+import { KTDrawer } from './components/drawer';
+import { KTCollapse } from './components/collapse';
+import { KTDismiss } from './components/dismiss';
+import { KTTabs } from './components/tabs';
+import { KTAccordion } from './components/accordion';
+import { KTScrollspy } from './components/scrollspy';
+import { KTScrollable } from './components/scrollable';
+import { KTScrollto } from './components/scrollto';
+import { KTSticky } from './components/sticky';
+import { KTReparent } from './components/reparent';
+import { KTToggle } from './components/toggle';
+import { KTTooltip } from './components/tooltip';
+import { KTStepper } from './components/stepper';
+import { KTTheme } from './components/theme';
+import { KTImageInput } from './components/image-input';
+import { KTTogglePassword } from './components/toggle-password';
+import { KTDataTable } from './components/datatable';
-export {default as KTUtils} from './helpers/utils';
-export {default as KTDom} from './helpers/dom';
-export {default as KTEventHandler} from './helpers/event-handler';
-export {KTMenu} from './components/menu';
-export {KTDropdown} from './components/dropdown';
-export {KTModal} from './components/modal';
-export {KTDrawer} from './components/drawer';
-export {KTCollapse} from './components/collapse';
-export {KTDismiss} from './components/dismiss';
-export {KTTabs} from './components/tabs';
-export {KTAccordion} from './components/accordion';
-export {KTScrollspy} from './components/scrollspy';
-export {KTScrollable} from './components/scrollable';
-export {KTScrollto} from './components/scrollto';
-export {KTSticky} from './components/sticky';
-export {KTReparent} from './components/reparent';
-export {KTToggle} from './components/toggle'
-export {KTTooltip} from './components/tooltip';
-export {KTStepper} from './components/stepper';
-export {KTTheme} from './components/theme';
-export {KTImageInput} from './components/image-input';
-export {KTTogglePassword} from './components/toggle-password';
-export {KTDataTable} from './components/datatable';
-
-declare let globalThis: {
- KTUtils: typeof KTUtils,
- KTDom: typeof KTDom,
- KTEventHandler: typeof KTEventHandler;
- KTMenu: typeof KTMenu;
- KTDropdown: typeof KTDropdown;
- KTModal: typeof KTModal;
- KTDrawer: typeof KTDrawer;
- KTCollapse: typeof KTCollapse;
- KTDismiss: typeof KTDismiss;
- KTTabs: typeof KTTabs;
- KTAccordion: typeof KTAccordion;
- KTScrollspy: typeof KTScrollspy;
- KTScrollable: typeof KTScrollable;
- KTScrollto: typeof KTScrollto;
- KTSticky: typeof KTSticky;
- KTReparent: typeof KTReparent;
- KTToggle: typeof KTToggle;
- KTTooltip: typeof KTTooltip;
- KTStepper: typeof KTStepper;
- KTTheme: typeof KTTheme;
- KTImageInput: typeof KTImageInput;
- KTTogglePassword: typeof KTTogglePassword;
-};
-
-globalThis.KTUtils = KTUtils;
-globalThis.KTDom = KTDom;
-globalThis.KTEventHandler = KTEventHandler;
-globalThis.KTMenu = KTMenu;
-globalThis.KTDropdown = KTDropdown;
-globalThis.KTModal = KTModal;
-globalThis.KTDrawer = KTDrawer;
-globalThis.KTCollapse = KTCollapse;
-globalThis.KTDismiss = KTDismiss;
-globalThis.KTTabs = KTTabs;
-globalThis.KTAccordion = KTAccordion;
-globalThis.KTScrollspy = KTScrollspy;
-globalThis.KTScrollable = KTScrollable;
-globalThis.KTScrollto = KTScrollto;
-globalThis.KTSticky = KTSticky;
-globalThis.KTReparent = KTReparent;
-globalThis.KTToggle = KTToggle;
-globalThis.KTTooltip = KTTooltip;
-globalThis.KTStepper = KTStepper;
-globalThis.KTTheme = KTTheme;
-globalThis.KTImageInput = KTImageInput;
-globalThis.KTTogglePassword = KTTogglePassword;
+export { KTMenu } from './components/menu';
+export { KTDropdown } from './components/dropdown';
+export { KTModal } from './components/modal';
+export { KTDrawer } from './components/drawer';
+export { KTCollapse } from './components/collapse';
+export { KTDismiss } from './components/dismiss';
+export { KTTabs } from './components/tabs';
+export { KTAccordion } from './components/accordion';
+export { KTScrollspy } from './components/scrollspy';
+export { KTScrollable } from './components/scrollable';
+export { KTScrollto } from './components/scrollto';
+export { KTSticky } from './components/sticky';
+export { KTReparent } from './components/reparent';
+export { KTToggle } from './components/toggle';
+export { KTTooltip } from './components/tooltip';
+export { KTStepper } from './components/stepper';
+export { KTTheme } from './components/theme';
+export { KTImageInput } from './components/image-input';
+export { KTTogglePassword } from './components/toggle-password';
+export { KTDataTable } from './components/datatable';
const KTComponents = {
- init(): void {
- KTMenu.init();
- KTDropdown.init();
- KTModal.init();
- KTDrawer.init();
- KTCollapse.init();
- KTDismiss.init();
- KTTabs.init();
- KTAccordion.init();
- KTScrollspy.init();
- KTScrollable.init();
- KTScrollto.init();
- KTSticky.init();
- KTReparent.init();
- KTToggle.init();
- KTTooltip.init();
- KTStepper.init();
- KTTheme.init();
- KTImageInput.init();
- KTTogglePassword.init();
- KTDataTable.init();
- }
+ init(): void {
+ KTMenu.init();
+ KTDropdown.init();
+ KTModal.init();
+ KTDrawer.init();
+ KTCollapse.init();
+ KTDismiss.init();
+ KTTabs.init();
+ KTAccordion.init();
+ KTScrollspy.init();
+ KTScrollable.init();
+ KTScrollto.init();
+ KTSticky.init();
+ KTReparent.init();
+ KTToggle.init();
+ KTTooltip.init();
+ KTStepper.init();
+ KTTheme.init();
+ KTImageInput.init();
+ KTTogglePassword.init();
+ KTDataTable.init();
+ }
};
-export default KTComponents;
\ No newline at end of file
+declare global {
+ interface Window {
+ KTUtils: typeof KTUtils;
+ KTDom: typeof KTDom;
+ KTEventHandler: typeof KTEventHandler;
+ KTMenu: typeof KTMenu;
+ KTDropdown: typeof KTDropdown;
+ KTModal: typeof KTModal;
+ KTDrawer: typeof KTDrawer;
+ KTCollapse: typeof KTCollapse;
+ KTDismiss: typeof KTDismiss;
+ KTTabs: typeof KTTabs;
+ KTAccordion: typeof KTAccordion;
+ KTScrollspy: typeof KTScrollspy;
+ KTScrollable: typeof KTScrollable;
+ KTScrollto: typeof KTScrollto;
+ KTSticky: typeof KTSticky;
+ KTReparent: typeof KTReparent;
+ KTToggle: typeof KTToggle;
+ KTTooltip: typeof KTTooltip;
+ KTStepper: typeof KTStepper;
+ KTTheme: typeof KTTheme;
+ KTImageInput: typeof KTImageInput;
+ KTTogglePassword: typeof KTTogglePassword;
+ KTDataTable: typeof KTDataTable;
+ KTComponents: typeof KTComponents;
+ }
+}
+
+window.KTUtils = KTUtils;
+window.KTDom = KTDom;
+window.KTEventHandler = KTEventHandler;
+window.KTMenu = KTMenu;
+window.KTDropdown = KTDropdown;
+window.KTModal = KTModal;
+window.KTDrawer = KTDrawer;
+window.KTCollapse = KTCollapse;
+window.KTDismiss = KTDismiss;
+window.KTTabs = KTTabs;
+window.KTAccordion = KTAccordion;
+window.KTScrollspy = KTScrollspy;
+window.KTScrollable = KTScrollable;
+window.KTScrollto = KTScrollto;
+window.KTSticky = KTSticky;
+window.KTReparent = KTReparent;
+window.KTToggle = KTToggle;
+window.KTTooltip = KTTooltip;
+window.KTStepper = KTStepper;
+window.KTTheme = KTTheme;
+window.KTImageInput = KTImageInput;
+window.KTTogglePassword = KTTogglePassword;
+window.KTDataTable = KTDataTable;
+window.KTComponents = KTComponents;
+
+export default KTComponents;
+
+KTDom.ready(() => {
+ KTComponents.init();
+});
diff --git a/resources/metronic/core/index.ts b/resources/metronic/core/index.ts
index f4fef06..066f6db 100644
--- a/resources/metronic/core/index.ts
+++ b/resources/metronic/core/index.ts
@@ -1,10 +1,9 @@
-
/*
-* Index
-* @version: 1.0.0
+* Metronic
* @author: Keenthemes
* Copyright 2024 Keenthemes
*/
+
import KTDom from './helpers/dom';
import KTUtils from './helpers/utils';
import KTEventHandler from './helpers/event-handler';
@@ -51,57 +50,57 @@ export { KTTogglePassword } from './components/toggle-password';
export { KTDataTable } from './components/datatable';
const KTComponents = {
- init(): void {
- KTMenu.init();
- KTDropdown.init();
- KTModal.init();
- KTDrawer.init();
- KTCollapse.init();
- KTDismiss.init();
- KTTabs.init();
- KTAccordion.init();
- KTScrollspy.init();
- KTScrollable.init();
- KTScrollto.init();
- KTSticky.init();
- KTReparent.init();
- KTToggle.init();
- KTTooltip.init();
- KTStepper.init();
- KTTheme.init();
- KTImageInput.init();
- KTTogglePassword.init();
- KTDataTable.init();
- }
+ init(): void {
+ KTMenu.init();
+ KTDropdown.init();
+ KTModal.init();
+ KTDrawer.init();
+ KTCollapse.init();
+ KTDismiss.init();
+ KTTabs.init();
+ KTAccordion.init();
+ KTScrollspy.init();
+ KTScrollable.init();
+ KTScrollto.init();
+ KTSticky.init();
+ KTReparent.init();
+ KTToggle.init();
+ KTTooltip.init();
+ KTStepper.init();
+ KTTheme.init();
+ KTImageInput.init();
+ KTTogglePassword.init();
+ KTDataTable.init();
+ }
};
declare global {
- interface Window {
- KTUtils: typeof KTUtils;
- KTDom: typeof KTDom;
- KTEventHandler: typeof KTEventHandler;
- KTMenu: typeof KTMenu;
- KTDropdown: typeof KTDropdown;
- KTModal: typeof KTModal;
- KTDrawer: typeof KTDrawer;
- KTCollapse: typeof KTCollapse;
- KTDismiss: typeof KTDismiss;
- KTTabs: typeof KTTabs;
- KTAccordion: typeof KTAccordion;
- KTScrollspy: typeof KTScrollspy;
- KTScrollable: typeof KTScrollable;
- KTScrollto: typeof KTScrollto;
- KTSticky: typeof KTSticky;
- KTReparent: typeof KTReparent;
- KTToggle: typeof KTToggle;
- KTTooltip: typeof KTTooltip;
- KTStepper: typeof KTStepper;
- KTTheme: typeof KTTheme;
- KTImageInput: typeof KTImageInput;
- KTTogglePassword: typeof KTTogglePassword;
- KTDataTable: typeof KTDataTable;
- KTComponents: typeof KTComponents;
- }
+ interface Window {
+ KTUtils: typeof KTUtils;
+ KTDom: typeof KTDom;
+ KTEventHandler: typeof KTEventHandler;
+ KTMenu: typeof KTMenu;
+ KTDropdown: typeof KTDropdown;
+ KTModal: typeof KTModal;
+ KTDrawer: typeof KTDrawer;
+ KTCollapse: typeof KTCollapse;
+ KTDismiss: typeof KTDismiss;
+ KTTabs: typeof KTTabs;
+ KTAccordion: typeof KTAccordion;
+ KTScrollspy: typeof KTScrollspy;
+ KTScrollable: typeof KTScrollable;
+ KTScrollto: typeof KTScrollto;
+ KTSticky: typeof KTSticky;
+ KTReparent: typeof KTReparent;
+ KTToggle: typeof KTToggle;
+ KTTooltip: typeof KTTooltip;
+ KTStepper: typeof KTStepper;
+ KTTheme: typeof KTTheme;
+ KTImageInput: typeof KTImageInput;
+ KTTogglePassword: typeof KTTogglePassword;
+ KTDataTable: typeof KTDataTable;
+ KTComponents: typeof KTComponents;
+ }
}
window.KTUtils = KTUtils;
@@ -132,6 +131,5 @@ window.KTComponents = KTComponents;
export default KTComponents;
KTDom.ready(() => {
- KTComponents.init();
+ KTComponents.init();
});
-
diff --git a/resources/metronic/core/plugins/components/accordion.js b/resources/metronic/core/plugins/components/accordion.js
index e65d01a..95fc275 100644
--- a/resources/metronic/core/plugins/components/accordion.js
+++ b/resources/metronic/core/plugins/components/accordion.js
@@ -11,6 +11,7 @@ export default plugin(({addComponents}) => {
'display': 'flex',
'flex-grow': '1',
'align-items': 'center',
+ 'text-align': 'start',
'justify-content': 'space-between',
},
'.accordion-content': {
diff --git a/resources/metronic/core/plugins/components/btn.js b/resources/metronic/core/plugins/components/btn.js
index 666ed8a..a569c5b 100644
--- a/resources/metronic/core/plugins/components/btn.js
+++ b/resources/metronic/core/plugins/components/btn.js
@@ -209,7 +209,6 @@ export default plugin(({addComponents, theme}) => {
'padding-left': '0',
'padding-right': '0',
'border-radius': '0',
- 'font-weight': theme('fontWeight.semibold'),
'background-color': 'transparent',
'border-bottom': '1px dashed var(--tw-primary)',
'&:hover, &:focus, &:active, &.active' : {
diff --git a/resources/metronic/core/plugins/components/checkbox.js b/resources/metronic/core/plugins/components/checkbox.js
index 5069685..60f47c3 100644
--- a/resources/metronic/core/plugins/components/checkbox.js
+++ b/resources/metronic/core/plugins/components/checkbox.js
@@ -10,6 +10,9 @@ export default plugin(({addComponents, theme}) => {
'appearance': 'none',
'box-shadow': 'none',
'background-color': 'var(--tw-light-light)',
+ '.dark &': {
+ 'background-color': 'var(--tw-coal-500)',
+ },
'border-radius': theme('custom.components.checkbox.DEFAULT.borderRadius'),
'height': theme('custom.components.checkbox.DEFAULT.size'),
'width': theme('custom.components.checkbox.DEFAULT.size'),
diff --git a/resources/metronic/core/plugins/components/container.js b/resources/metronic/core/plugins/components/container.js
index 971b510..008e4ef 100644
--- a/resources/metronic/core/plugins/components/container.js
+++ b/resources/metronic/core/plugins/components/container.js
@@ -6,6 +6,7 @@ export default plugin(({addComponents, theme}) => {
addComponents({
'.container-fixed': {
'flex-grow': '1',
+ 'width': '100%',
'padding-left': theme('custom.components.container.fixed.px.DEFAULT'),
'padding-right': theme('custom.components.container.fixed.px.DEFAULT')
},
@@ -23,6 +24,7 @@ export default plugin(({addComponents, theme}) => {
// Fluid
addComponents({
'.container-fluid': {
+ 'width': '100%',
'flex-grow': '1',
'padding-left': theme('custom.components.container.fluid.px.DEFAULT'),
'padding-right': theme('custom.components.container.fluid.px.DEFAULT')
diff --git a/resources/metronic/core/plugins/components/radio.js b/resources/metronic/core/plugins/components/radio.js
index 69857b2..d62cb0f 100644
--- a/resources/metronic/core/plugins/components/radio.js
+++ b/resources/metronic/core/plugins/components/radio.js
@@ -10,6 +10,9 @@ export default plugin(({addComponents, theme}) => {
'appearance': 'none',
'box-shadow': 'none',
'background-color': 'var(--tw-light-light)',
+ '.dark &': {
+ 'background-color': 'var(--tw-coal-500)',
+ },
'border-radius': '50%',
'height': theme('custom.components.radio.DEFAULT.size'),
'width': theme('custom.components.radio.DEFAULT.size'),
diff --git a/resources/metronic/core/plugins/plugin.js b/resources/metronic/core/plugins/plugin.js
index 4e984b3..73d8054 100644
--- a/resources/metronic/core/plugins/plugin.js
+++ b/resources/metronic/core/plugins/plugin.js
@@ -27,13 +27,19 @@ export default plugin(({config, addBase, addComponents, addVariant, e}) => {
'flex-grow': '1',
'line-height': '1',
},
+ '.menu-toggle': {
+ 'display': 'flex',
+ 'align-items': 'center',
+ 'flex-grow': '1',
+ 'line-height': '1',
+ },
'.menu-title': {
'display': 'flex',
'align-items': 'center',
'line-height': '1',
'flex-grow': '1',
},
- '.menu-icon, .menu-toggle, .menu-bullet, .menu-badge, .menu-arrow': {
+ '.menu-icon, .menu-bullet, .menu-badge, .menu-arrow': {
'display': 'flex',
'align-items': 'center',
'flex-shrink': '0',
@@ -85,6 +91,16 @@ export default plugin(({config, addBase, addComponents, addVariant, e}) => {
modifySelectors(({className}) => {
return `.menu-item.active > .menu-label .${e(`menu-item-active${separator}${className}`)}`;
});
+ },
+ ({modifySelectors, separator}) => {
+ modifySelectors(({className}) => {
+ return `.menu-item.active > .menu-toggle.${e(`menu-item-active${separator}${className}`)}`;
+ });
+ },
+ ({modifySelectors, separator}) => {
+ modifySelectors(({className}) => {
+ return `.menu-item.active > .menu-toggle .${e(`menu-item-active${separator}${className}`)}`;
+ });
}
]);
@@ -113,6 +129,16 @@ export default plugin(({config, addBase, addComponents, addVariant, e}) => {
modifySelectors(({className}) => {
return `.menu-item.here > .menu-label .${e(`menu-item-here${separator}${className}`)}`;
});
+ },
+ ({modifySelectors, separator}) => {
+ modifySelectors(({className}) => {
+ return `.menu-item.here > .menu-toggle.${e(`menu-item-here${separator}${className}`)}`;
+ });
+ },
+ ({modifySelectors, separator}) => {
+ modifySelectors(({className}) => {
+ return `.menu-item.here > .menu-toggle .${e(`menu-item-here${separator}${className}`)}`;
+ });
}
]);
@@ -141,6 +167,54 @@ export default plugin(({config, addBase, addComponents, addVariant, e}) => {
modifySelectors(({className}) => {
return `.menu-item.show > .menu-label .${e(`menu-item-show${separator}${className}`)}`;
});
+ },
+ ({modifySelectors, separator}) => {
+ modifySelectors(({className}) => {
+ return `.menu-item.show > .menu-toggle.${e(`menu-item-show${separator}${className}`)}`;
+ });
+ },
+ ({modifySelectors, separator}) => {
+ modifySelectors(({className}) => {
+ return `.menu-item.show > .menu-toggle .${e(`menu-item-show${separator}${className}`)}`;
+ });
+ }
+ ]);
+
+ addVariant('menu-item-disabled', [
+ ({modifySelectors, separator}) => {
+ modifySelectors(({className}) => {
+ return `.menu-item.disabled.${e(`menu-item-disabled${separator}${className}`)}`;
+ });
+ },
+ ({modifySelectors, separator}) => {
+ modifySelectors(({className}) => {
+ return `.menu-item.disabled > .menu-link.${e(`menu-item-disabled${separator}${className}`)}`;
+ });
+ },
+ ({modifySelectors, separator}) => {
+ modifySelectors(({className}) => {
+ return `.menu-item.disabled > .menu-link .${e(`menu-item-disabled${separator}${className}`)}`;
+ });
+ },
+ ({modifySelectors, separator}) => {
+ modifySelectors(({className}) => {
+ return `.menu-item.disabled > .menu-label.${e(`menu-item-disabled${separator}${className}`)}`;
+ });
+ },
+ ({modifySelectors, separator}) => {
+ modifySelectors(({className}) => {
+ return `.menu-item.disabled > .menu-label .${e(`menu-item-disabled${separator}${className}`)}`;
+ });
+ },
+ ({modifySelectors, separator}) => {
+ modifySelectors(({className}) => {
+ return `.menu-item.disabled > .menu-toggle.${e(`menu-item-disabled${separator}${className}`)}`;
+ });
+ },
+ ({modifySelectors, separator}) => {
+ modifySelectors(({className}) => {
+ return `.menu-item.disabled > .menu-toggle .${e(`menu-item-disabled${separator}${className}`)}`;
+ });
}
]);
@@ -168,7 +242,7 @@ export default plugin(({config, addBase, addComponents, addVariant, e}) => {
return `.menu-link:focus .${e(`menu-link-focus${separator}${className}`)}`;
});
},
- ]);
+ ]);
// DataTable
addVariant('datatable-loading', [
diff --git a/resources/metronic/css/base.css b/resources/metronic/css/base.css
index 8d9bf41..31b289a 100644
--- a/resources/metronic/css/base.css
+++ b/resources/metronic/css/base.css
@@ -1,126 +1,126 @@
/* Variables */
.metronic {
- --tw-sidebar-transition-duration: 0.3s;
- --tw-sidebar-transition-timing: ease;
- --tw-sidebar-width: theme('custom.layouts.metronic.sidebar.width.desktop');
- --tw-sidebar-defualt-width: theme('custom.layouts.metronic.sidebar.width.desktop');
- --tw-header-height: theme('custom.layouts.metronic.header.height.desktop');
+ --tw-sidebar-transition-duration: 0.3s;
+ --tw-sidebar-transition-timing: ease;
+ --tw-sidebar-width: theme('custom.layouts.metronic.sidebar.width.desktop');
+ --tw-sidebar-defualt-width: theme('custom.layouts.metronic.sidebar.width.desktop');
+ --tw-header-height: theme('custom.layouts.metronic.header.height.desktop');
}
@media (max-width: theme('screens.lg')) {
- .metronic {
- --tw-sidebar-width: theme('custom.layouts.metronic.sidebar.width.mobile');
- --tw-header-height: theme('custom.layouts.metronic.header.height.mobile');
- }
+ .metronic {
+ --tw-sidebar-width: theme('custom.layouts.metronic.sidebar.width.mobile');
+ --tw-header-height: theme('custom.layouts.metronic.header.height.mobile');
+ }
}
/* Base */
.metronic .header {
- height: var(--tw-header-height);
+ height: var(--tw-header-height);
}
.metronic .sidebar {
- width: var(--tw-sidebar-width);
+ width: var(--tw-sidebar-width);
}
.metronic.header-fixed .wrapper {
- padding-top: var(--tw-header-height);
+ padding-top: var(--tw-header-height);
}
/* Desktop mode */
@media (min-width: theme('screens.lg')) {
- .metronic .sidebar {
- width: var(--tw-sidebar-width);
- transition: width var(--tw-sidebar-transition-duration) var(--tw-sidebar-transition-timing);
- }
+ .metronic .sidebar {
+ width: var(--tw-sidebar-width);
+ transition: width var(--tw-sidebar-transition-duration) var(--tw-sidebar-transition-timing);
+ }
- .metronic .sidebar .sidebar-header {
- height: var(--tw-header-height);
- }
+ .metronic .sidebar .sidebar-header {
+ height: var(--tw-header-height);
+ }
- .metronic .sidebar .sidebar-wrapper {
- width: var(--tw-sidebar-defualt-width);
- }
+ .metronic .sidebar .sidebar-wrapper {
+ width: var(--tw-sidebar-defualt-width);
+ }
- .metronic .sidebar .sidebar-logo {
- width: var(--tw-sidebar-defualt-width);
- }
+ .metronic .sidebar .sidebar-logo {
+ width: var(--tw-sidebar-defualt-width);
+ }
- .metronic .sidebar .small-logo {
- display: none;
- }
+ .metronic .sidebar .small-logo {
+ display: none;
+ }
- .metronic.sidebar-fixed .wrapper {
- padding-left: var(--tw-sidebar-width);
- transition: padding-left var(--tw-sidebar-transition-duration) var(--tw-sidebar-transition-timing);
- }
+ .metronic.sidebar-fixed .wrapper {
+ padding-left: var(--tw-sidebar-width);
+ transition: padding-left var(--tw-sidebar-transition-duration) var(--tw-sidebar-transition-timing);
+ }
- .metronic.sidebar-fixed.header-fixed .header {
- left: var(--tw-sidebar-width);
- transition: left var(--tw-sidebar-transition-duration) var(--tw-sidebar-transition-timing);
- }
+ .metronic.sidebar-fixed.header-fixed .header {
+ left: var(--tw-sidebar-width);
+ transition: left var(--tw-sidebar-transition-duration) var(--tw-sidebar-transition-timing);
+ }
- .metronic.sidebar-fixed.header-fixed .wrapper {
- padding-top: var(--tw-header-height);
- }
+ .metronic.sidebar-fixed.header-fixed .wrapper {
+ padding-top: var(--tw-header-height);
+ }
- .metronic.sidebar-collapse {
- --tw-sidebar-width: theme('custom.layouts.metronic.sidebar.width.desktopCollapse');
- }
+ .metronic.sidebar-collapse {
+ --tw-sidebar-width: theme('custom.layouts.metronic.sidebar.width.desktopCollapse');
+ }
- .metronic.sidebar-collapse .sidebar {
- transition: width var(--tw-sidebar-transition-duration) var(--tw-sidebar-transition-timing);
- }
+ .metronic.sidebar-collapse .sidebar {
+ transition: width var(--tw-sidebar-transition-duration) var(--tw-sidebar-transition-timing);
+ }
- .metronic.sidebar-collapse .sidebar.animating {
- pointer-events: none;
- }
+ .metronic.sidebar-collapse .sidebar.animating {
+ pointer-events: none;
+ }
- .metronic.sidebar-collapse .sidebar:hover:not(.animating) {
- width: var(--tw-sidebar-defualt-width);
- transition: width var(--tw-sidebar-transition-duration) var(--tw-sidebar-transition-timing);
- }
+ .metronic.sidebar-collapse .sidebar:hover:not(.animating) {
+ width: var(--tw-sidebar-defualt-width);
+ transition: width var(--tw-sidebar-transition-duration) var(--tw-sidebar-transition-timing);
+ }
- .metronic.sidebar-collapse .sidebar:not(:hover) .default-logo {
- display: none;
- }
+ .metronic.sidebar-collapse .sidebar:not(:hover) .default-logo {
+ display: none;
+ }
- .metronic.sidebar-collapse .sidebar:not(:hover) .small-logo {
- display: flex;
- }
+ .metronic.sidebar-collapse .sidebar:not(:hover) .small-logo {
+ display: flex;
+ }
- .metronic.sidebar-collapse .sidebar:not(:hover) .menu > .menu-item > .menu-link .menu-title,
- .metronic.sidebar-collapse .sidebar:not(:hover) .menu > .menu-item > .menu-link .menu-arrow,
- .metronic.sidebar-collapse .sidebar:not(:hover) .menu > .menu-item > .menu-link .menu-badge,
- .metronic.sidebar-collapse .sidebar:not(:hover) .menu > .menu-item > .menu-label .menu-title,
- .metronic.sidebar-collapse .sidebar:not(:hover) .menu > .menu-item > .menu-label .menu-arrow,
- .metronic.sidebar-collapse .sidebar:not(:hover) .menu > .menu-item > .menu-label .menu-badge {
- display: none;
- }
+ .metronic.sidebar-collapse .sidebar:not(:hover) .menu > .menu-item > .menu-link .menu-title,
+ .metronic.sidebar-collapse .sidebar:not(:hover) .menu > .menu-item > .menu-link .menu-arrow,
+ .metronic.sidebar-collapse .sidebar:not(:hover) .menu > .menu-item > .menu-link .menu-badge,
+ .metronic.sidebar-collapse .sidebar:not(:hover) .menu > .menu-item > .menu-label .menu-title,
+ .metronic.sidebar-collapse .sidebar:not(:hover) .menu > .menu-item > .menu-label .menu-arrow,
+ .metronic.sidebar-collapse .sidebar:not(:hover) .menu > .menu-item > .menu-label .menu-badge {
+ display: none;
+ }
- .metronic.sidebar-collapse .sidebar:not(:hover) .menu > .menu-item > .menu-accordion {
- display: none;
- }
+ .metronic.sidebar-collapse .sidebar:not(:hover) .menu > .menu-item > .menu-accordion {
+ display: none;
+ }
- .metronic.sidebar-collapse .sidebar:not(:hover) .menu > .menu-item > .menu-heading {
- visibility: hidden;
- position: relative;
- }
+ .metronic.sidebar-collapse .sidebar:not(:hover) .menu > .menu-item > .menu-heading {
+ visibility: hidden;
+ position: relative;
+ }
- .metronic.sidebar-collapse .sidebar:not(:hover) .menu > .menu-item > .menu-heading::before {
- content: "...";
- color: currentColor;
- font-size: inherit;
- position: absolute;
- visibility: visible;
- display: inline-block;
- bottom: 50%;
- left: 0;
- margin-left: 0.225rem;
- transform: translateX(100%);
- }
+ .metronic.sidebar-collapse .sidebar:not(:hover) .menu > .menu-item > .menu-heading::before {
+ content: "...";
+ color: currentColor;
+ font-size: inherit;
+ position: absolute;
+ visibility: visible;
+ display: inline-block;
+ bottom: 50%;
+ left: 0;
+ margin-left: 0.225rem;
+ transform: translateX(100%);
+ }
- .metronic.sidebar-collapse .sidebar .sidebar-content {
- overflow: hidden;
- }
+ .metronic.sidebar-collapse .sidebar .sidebar-content {
+ overflow: hidden;
+ }
}
${monthName}, 2024 Sales
+
+
+ ${formattedNumber}
+ +24%
+