@revolist/revogrid 4.24.3 → 4.25.0

package/dist/collection/themeManager/presets/high-contrast-dark.js

@@ -0,0 +1,89 @@
+/*!
+ * Built by Revolist OU ❤️
+ */
+import { defineTheme } from "../../types/theme";
+import { createPresetTokens } from "./shared";
+const highContrastDarkFoundation = [
+    '#ffd400',
+    'rgba(255, 212, 0, 0.94)',
+    '#050505',
+    '#ffffff',
+    '#d1d5db',
+    'rgba(0, 0, 0, 0.8)',
+    '#ffffff',
+    '#bfc7d5',
+];
+const highContrastDarkGrid = [
+    '#171717',
+    '#ffffff',
+    '#e5e7eb',
+    '#005f73',
+    '#303030',
+    '#737b87',
+    '#737b87',
+    '#182c3f',
+    '#202a33',
+    '#222222',
+    '#ffffff',
+    '#303030',
+];
+const highContrastDarkFilterPanel = [
+    '#0a0a0a',
+    '#ffffff',
+    'rgba(0, 0, 0, 0.85)',
+    '#171717',
+    '#d1d5db',
+    '#e5e7eb',
+    '#ffd400',
+    '#00e5ff',
+    '#e5e7eb',
+    '#ffffff',
+    '#d1d5db',
+    '0 0 0 3px #ffd400',
+    '#e5e7eb',
+    '#ffd400',
+];
+const highContrastDarkTypography = [
+    '14px',
+    '48px',
+    '13px',
+    '700',
+    'none',
+    'left',
+    'left',
+    '0 14px',
+    '0 14px',
+];
+const highContrastDarkSelection = [
+    '#00e5ff',
+    'rgba(0, 229, 255, 0.2)',
+    '#ffd400',
+    '#000000',
+    'rgba(0, 229, 255, 0.32)',
+    '#ffd400',
+    '#ff7ad9',
+    '#ffd400',
+];
+const highContrastDarkButtons = [
+    '#000000',
+    '#ffd400',
+    '#7cfc00',
+    '#ff8080',
+    '#ffffff',
+    '#ffffff',
+];
+/** High-contrast dark preset with luminous yellow and cyan interaction states. */
+export const highContrastDarkTheme = defineTheme({
+    name: 'highContrastDark',
+    extends: 'darkMaterial',
+    colorScheme: 'dark',
+    defaultRowSize: 40,
+    tokens: createPresetTokens({
+        foundation: highContrastDarkFoundation,
+        grid: highContrastDarkGrid,
+        filterPanel: highContrastDarkFilterPanel,
+        typography: highContrastDarkTypography,
+        selection: highContrastDarkSelection,
+        buttons: highContrastDarkButtons,
+    }),
+});

package/dist/collection/themeManager/presets/high-contrast.js

@@ -0,0 +1,89 @@
+/*!
+ * Built by Revolist OU ❤️
+ */
+import { defineTheme } from "../../types/theme";
+import { createPresetTokens } from "./shared";
+const highContrastFoundation = [
+    '#003eaa',
+    'rgba(0, 62, 170, 0.92)',
+    '#ffffff',
+    '#000000',
+    '#374151',
+    'rgba(0, 0, 0, 0.35)',
+    '#111827',
+    '#374151',
+];
+const highContrastGrid = [
+    '#111827',
+    '#ffffff',
+    '#ffffff',
+    '#003eaa',
+    '#1f2937',
+    '#6b7280',
+    '#6b7280',
+    '#d6e9ff',
+    '#e8f2ff',
+    '#e5e7eb',
+    '#000000',
+    '#d1d5db',
+];
+const highContrastFilterPanel = [
+    '#ffffff',
+    '#111827',
+    'rgba(0, 0, 0, 0.4)',
+    '#ffffff',
+    '#4b5563',
+    '#111827',
+    '#003eaa',
+    '#003eaa',
+    '#374151',
+    '#000000',
+    '#374151',
+    '0 0 0 3px #ffbf00',
+    '#111827',
+    '#003eaa',
+];
+const highContrastTypography = [
+    '14px',
+    '48px',
+    '13px',
+    '700',
+    'none',
+    'left',
+    'left',
+    '0 14px',
+    '0 14px',
+];
+const highContrastSelection = [
+    '#003eaa',
+    'rgba(0, 95, 204, 0.2)',
+    '#003eaa',
+    '#ffffff',
+    'rgba(0, 95, 204, 0.3)',
+    '#a61b1b',
+    '#5b21b6',
+    '#ffbf00',
+];
+const highContrastButtons = [
+    '#ffffff',
+    '#003eaa',
+    '#006b3c',
+    '#b91c1c',
+    '#111827',
+    '#111827',
+];
+/** High-contrast light preset with dark structure and vivid blue focus states. */
+export const highContrastTheme = defineTheme({
+    name: 'highContrast',
+    extends: 'material',
+    colorScheme: 'light',
+    defaultRowSize: 40,
+    tokens: createPresetTokens({
+        foundation: highContrastFoundation,
+        grid: highContrastGrid,
+        filterPanel: highContrastFilterPanel,
+        typography: highContrastTypography,
+        selection: highContrastSelection,
+        buttons: highContrastButtons,
+    }),
+});

package/dist/collection/themeManager/presets/index.js

@@ -0,0 +1,25 @@
+/*!
+ * Built by Revolist OU ❤️
+ */
+export { oceanTheme } from './ocean';
+export { midnightTheme } from './midnight';
+export { auroraTheme } from './aurora';
+export { highContrastTheme } from './high-contrast';
+export { highContrastDarkTheme } from './high-contrast-dark';
+import { oceanTheme } from "./ocean";
+import { midnightTheme } from "./midnight";
+import { auroraTheme } from "./aurora";
+import { highContrastTheme } from "./high-contrast";
+import { highContrastDarkTheme } from "./high-contrast-dark";
+/** Accessible light and dark high-contrast choices. */
+export const highContrastThemeDefinitions = [
+    highContrastTheme,
+    highContrastDarkTheme,
+];
+/** Ready-to-register modern presets. Presets remain opt-in and per grid. */
+export const modernThemeDefinitions = [
+    oceanTheme,
+    midnightTheme,
+    auroraTheme,
+    ...highContrastThemeDefinitions,
+];

package/dist/collection/themeManager/presets/midnight.js

@@ -0,0 +1,89 @@
+/*!
+ * Built by Revolist OU ❤️
+ */
+import { defineTheme } from "../../types/theme";
+import { createPresetTokens } from "./shared";
+const midnightFoundation = [
+    '#8b5cf6',
+    'rgba(139, 92, 246, 0.9)',
+    '#0b1020',
+    '#f8fafc',
+    '#334155',
+    'rgba(0, 0, 0, 0.5)',
+    '#dbeafe',
+    '#25324d',
+];
+const midnightGrid = [
+    '#121a2f',
+    '#e2e8f0',
+    '#2a3855',
+    null,
+    null,
+    '#202c46',
+    null,
+    '#172554',
+    '#111c35',
+    '#10182b',
+    '#94a3b8',
+    'rgba(100, 116, 139, 0.12)',
+];
+const midnightFilterPanel = [
+    '#111827',
+    '#334155',
+    'rgba(0, 0, 0, 0.55)',
+    '#1e293b',
+    '#334155',
+    '#475569',
+    '#22d3ee',
+    '#22d3ee',
+    '#94a3b8',
+    '#e2e8f0',
+    '#94a3b8',
+    '0 0 0 3px rgba(34, 211, 238, 0.2)',
+    '#94a3b8',
+    '#22d3ee',
+];
+const midnightTypography = [
+    '13px',
+    '46px',
+    '12px',
+    '650',
+    'none',
+    'left',
+    'left',
+    '0 14px',
+    '0 14px',
+];
+const midnightSelection = [
+    '#22d3ee',
+    'rgba(34, 211, 238, 0.12)',
+    '#22d3ee',
+    '#0b1020',
+    'rgba(34, 211, 238, 0.24)',
+    '#f472b6',
+    '#a78bfa',
+    '#22d3ee',
+];
+const midnightButtons = [
+    '#ffffff',
+    '#7c3aed',
+    '#059669',
+    '#e11d48',
+    '#475569',
+    '#e2e8f0',
+];
+/** Deep navy preset with cyan selection and violet action accents. */
+export const midnightTheme = defineTheme({
+    name: 'midnight',
+    extends: 'darkMaterial',
+    colorScheme: 'dark',
+    defaultRowSize: 40,
+    tokens: createPresetTokens({
+        foundation: midnightFoundation,
+        grid: midnightGrid,
+        filterPanel: midnightFilterPanel,
+        typography: midnightTypography,
+        selection: midnightSelection,
+        buttons: midnightButtons,
+    }),
+});

package/dist/collection/themeManager/presets/ocean.js

@@ -0,0 +1,89 @@
+/*!
+ * Built by Revolist OU ❤️
+ */
+import { defineTheme } from "../../types/theme";
+import { createPresetTokens } from "./shared";
+const oceanFoundation = [
+    '#2563eb',
+    'rgba(37, 99, 235, 0.88)',
+    '#f8fafc',
+    '#0f172a',
+    '#cbd5e1',
+    'rgba(15, 23, 42, 0.16)',
+    '#334155',
+    '#d8e2ee',
+];
+const oceanGrid = [
+    '#eef4fb',
+    '#0f172a',
+    '#d7e2ee',
+    null,
+    null,
+    '#e5edf5',
+    null,
+    '#dbeafe',
+    '#eff6ff',
+    '#e7f0fa',
+    '#475569',
+    '#f1f5f9',
+];
+const oceanFilterPanel = [
+    '#ffffff',
+    '#dbe4ef',
+    'rgba(15, 23, 42, 0.18)',
+    '#f1f5f9',
+    '#e2e8f0',
+    '#cbd5e1',
+    '#2563eb',
+    '#2563eb',
+    '#64748b',
+    '#334155',
+    '#64748b',
+    '0 0 0 3px rgba(37, 99, 235, 0.2)',
+    '#64748b',
+    '#2563eb',
+];
+const oceanTypography = [
+    '13px',
+    '44px',
+    '12px',
+    '650',
+    'none',
+    'left',
+    'left',
+    '0 14px',
+    '0 14px',
+];
+const oceanSelection = [
+    '#2563eb',
+    'rgba(37, 99, 235, 0.1)',
+    '#2563eb',
+    '#ffffff',
+    'rgba(37, 99, 235, 0.22)',
+    '#f97316',
+    '#64748b',
+    '#3b82f6',
+];
+const oceanButtons = [
+    '#ffffff',
+    '#2563eb',
+    '#059669',
+    '#dc2626',
+    '#cbd5e1',
+    '#334155',
+];
+/** Bright blue and slate preset for data-heavy daytime interfaces. */
+export const oceanTheme = defineTheme({
+    name: 'ocean',
+    extends: 'material',
+    colorScheme: 'light',
+    defaultRowSize: 38,
+    tokens: createPresetTokens({
+        foundation: oceanFoundation,
+        grid: oceanGrid,
+        filterPanel: oceanFilterPanel,
+        typography: oceanTypography,
+        selection: oceanSelection,
+        buttons: oceanButtons,
+    }),
+});

package/dist/collection/themeManager/presets/shared.js

@@ -0,0 +1,64 @@
+/*!
+ * Built by Revolist OU ❤️
+ */
+export const modernSystemFont = "Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif";
+/** Maps compact, typed preset data to the public semantic theme-token contract. */
+export function createPresetTokens({ foundation, grid, filterPanel, typography, selection, buttons, }) {
+    const [primary, primaryTransparent, background, foreground, divider, shadow, text, border,] = foundation;
+    const [headerBg, headerColor, headerBorder, headerFocusedBg, headerHoverBg, cellBorder, cellVerticalBorder, focusedBg, rowHover, rowHeadersBg, rowHeadersColor, cellDisabledBg,] = grid;
+    const [filterPanelBg, filterPanelBorder, filterPanelShadow, filterPanelInputBg, filterPanelDivider, filterPanelSelectBorder, filterPanelSelectBorderHover, filterPanelReorderAccent, filterPanelReorderColor, filterPanelText, filterPanelMutedText, filterPanelFocusRing, filterPanelIcon, filterPanelIconActive,] = filterPanel;
+    const [fontSize, headerHeight, headerFontSize, headerFontWeight, headerTextTransform, headerTextAlign, cellTextAlign, headerPadding, cellPadding,] = typography;
+    const [selectionBorder, selectionBg, autofillHandleBg, autofillHandleBorder, rangeHandleBg, temporaryRangeBorder, temporarySelectionBorder, headerResizeHover,] = selection;
+    const [buttonText, buttonBg, buttonSuccessBg, buttonDangerBg, buttonOutlineBorder, buttonOutlineText,] = buttons;
+    return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ primary,
+        primaryTransparent,
+        background,
+        foreground,
+        divider,
+        shadow,
+        text,
+        border,
+        headerBg,
+        headerColor,
+        headerBorder }, (headerFocusedBg ? { headerFocusedBg } : {})), (headerHoverBg ? { headerHoverBg } : {})), { cellBorder }), (cellVerticalBorder ? { cellVerticalBorder } : {})), { focusedBg,
+        rowHover,
+        rowHeadersBg,
+        rowHeadersColor,
+        cellDisabledBg,
+        filterPanelBg,
+        filterPanelBorder,
+        filterPanelShadow,
+        filterPanelInputBg,
+        filterPanelDivider,
+        filterPanelSelectBorder,
+        filterPanelSelectBorderHover,
+        filterPanelReorderAccent,
+        filterPanelReorderColor,
+        filterPanelText,
+        filterPanelMutedText,
+        filterPanelFocusRing,
+        filterPanelIcon,
+        filterPanelIconActive, fontFamily: modernSystemFont, fontSize,
+        headerHeight,
+        headerFontSize,
+        headerFontWeight,
+        headerTextTransform,
+        headerTextAlign,
+        cellTextAlign,
+        headerPadding,
+        cellPadding,
+        selectionBorder,
+        selectionBg,
+        autofillHandleBg,
+        autofillHandleBorder,
+        rangeHandleBg,
+        temporaryRangeBorder,
+        temporarySelectionBorder,
+        headerResizeHover,
+        buttonText,
+        buttonBg,
+        buttonSuccessBg,
+        buttonDangerBg,
+        buttonOutlineBorder,
+        buttonOutlineText });
+}

package/dist/collection/themeManager/theme.service.js

@@ -1,9 +1,7 @@
 /*!
  * Built by Revolist OU ❤️
  */
-import { ThemeCompact } from "./theme.compact";
-import { ThemeDefault } from "./theme.default";
-import { ThemeMaterial } from "./theme.material";
+import { themeTokenCssVariables, } from "../types/theme";
 export const DEFAULT_THEME = 'default';
 export const allowedThemes = [
     DEFAULT_THEME,
@@ -12,6 +10,72 @@ export const allowedThemes = [
     'darkMaterial',
     'darkCompact',
 ];
+const builtInThemeNames = new Set(allowedThemes);
+const builtInThemes = Object.freeze({
+    default: Object.freeze({
+        name: 'default',
+        base: 'default',
+        colorScheme: 'light',
+        defaultRowSize: 27,
+        tokens: Object.freeze({}),
+        custom: false,
+    }),
+    material: Object.freeze({
+        name: 'material',
+        base: 'material',
+        colorScheme: 'light',
+        defaultRowSize: 42,
+        tokens: Object.freeze({}),
+        custom: false,
+    }),
+    compact: Object.freeze({
+        name: 'compact',
+        base: 'compact',
+        colorScheme: 'light',
+        defaultRowSize: 32,
+        tokens: Object.freeze({}),
+        custom: false,
+    }),
+    darkMaterial: Object.freeze({
+        name: 'darkMaterial',
+        base: 'material',
+        colorScheme: 'dark',
+        defaultRowSize: 42,
+        tokens: Object.freeze({}),
+        custom: false,
+    }),
+    darkCompact: Object.freeze({
+        name: 'darkCompact',
+        base: 'compact',
+        colorScheme: 'dark',
+        defaultRowSize: 32,
+        tokens: Object.freeze({}),
+        custom: false,
+    }),
+});
+function isBuiltInTheme(theme) {
+    return builtInThemeNames.has(theme);
+}
+function isPositiveSize(size) {
+    return typeof size === 'number' && Number.isFinite(size) && size > 0;
+}
+function getColorScheme(scheme, fallback) {
+    return scheme === 'light' || scheme === 'dark' ? scheme : fallback;
+}
+function getThemeTokens(tokens) {
+    if (!tokens || typeof tokens !== 'object') {
+        return {};
+    }
+    const result = {};
+    for (const [name, value] of Object.entries(tokens)) {
+        if (Object.hasOwn(themeTokenCssVariables, name) &&
+            typeof value === 'string' &&
+            value.trim()) {
+            result[name] = value;
+        }
+    }
+    return result;
+}
 export default class ThemeService {
     get theme() {
         return this.currentTheme;
@@ -20,33 +84,90 @@ export default class ThemeService {
         return this.customRowSize || this.currentTheme.defaultRowSize;
     }
     set rowSize(size) {
-        this.customRowSize = size;
+        this.customRowSize = isPositiveSize(size) ? size : 0;
     }
     constructor(cfg) {
+        this.currentTheme = Object.assign({}, builtInThemes.default);
+        this.customThemes = new Map();
         this.customRowSize = 0;
-        this.customRowSize = cfg.rowSize;
+        this.rowSize = cfg.rowSize;
         this.register('default');
     }
+    setDefinitions(definitions = []) {
+        const customThemes = new Map();
+        if (Array.isArray(definitions)) {
+            for (const definition of definitions) {
+                if (!definition || typeof definition !== 'object') {
+                    continue;
+                }
+                if (typeof definition.name !== 'string' || !definition.name.trim()) {
+                    continue;
+                }
+                const name = getTheme(definition.name);
+                if (isBuiltInTheme(name)) {
+                    continue;
+                }
+                customThemes.set(name, Object.assign(Object.assign({}, definition), { name }));
+            }
+        }
+        this.customThemes = customThemes;
+    }
     register(theme) {
-        const parsedTheme = getTheme(theme);
-        switch (parsedTheme) {
-            case 'material':
-            case 'darkMaterial':
-                this.currentTheme = new ThemeMaterial();
-                break;
-            case 'compact':
-            case 'darkCompact':
-                this.currentTheme = new ThemeCompact();
+        const name = getTheme(theme);
+        if (isBuiltInTheme(name)) {
+            this.currentTheme = Object.assign(Object.assign({}, builtInThemes[name]), { tokens: {} });
+            return this.currentTheme;
+        }
+        const definition = this.customThemes.get(name);
+        if (!definition) {
+            this.currentTheme = Object.assign(Object.assign({}, builtInThemes.default), { name, tokens: {}, custom: true });
+            return this.currentTheme;
+        }
+        this.currentTheme = this.resolveDefinition(name);
+        return this.currentTheme;
+    }
+    resolveDefinition(name) {
+        const chain = [];
+        const visited = new Set();
+        let parentName = name;
+        let validChain = true;
+        while (!isBuiltInTheme(parentName)) {
+            if (visited.has(parentName)) {
+                validChain = false;
                 break;
-            default:
-                this.currentTheme = new ThemeDefault();
+            }
+            visited.add(parentName);
+            const definition = this.customThemes.get(parentName);
+            if (!definition) {
+                validChain = false;
                 break;
+            }
+            chain.push(definition);
+            parentName = getTheme(definition.extends);
+        }
+        let resolved = Object.assign(Object.assign({}, (validChain && isBuiltInTheme(parentName)
+            ? builtInThemes[parentName]
+            : builtInThemes.default)), { tokens: {} });
+        if (validChain) {
+            chain.reverse();
         }
+        const definitions = validChain ? chain : chain.slice(0, 1);
+        for (const definition of definitions) {
+            resolved = {
+                name: definition.name,
+                base: resolved.base,
+                colorScheme: getColorScheme(definition.colorScheme, resolved.colorScheme),
+                defaultRowSize: isPositiveSize(definition.defaultRowSize)
+                    ? definition.defaultRowSize
+                    : resolved.defaultRowSize,
+                tokens: Object.assign(Object.assign({}, resolved.tokens), getThemeTokens(definition.tokens)),
+                custom: true,
+            };
+        }
+        return resolved;
     }
 }
 export function getTheme(theme) {
-    if (theme && allowedThemes.indexOf(theme) > -1) {
-        return theme;
-    }
-    return DEFAULT_THEME;
+    const normalizedTheme = typeof theme === 'string' ? theme.trim() : '';
+    return normalizedTheme || DEFAULT_THEME;
 }