tailjng 0.1.6 → 0.1.8

package/fesm2022/tailjng.mjs

@@ -6,7 +6,6 @@ import { es } from 'date-fns/locale';
 import { map, firstValueFrom, isObservable, forkJoin } from 'rxjs';
 import * as i1 from '@angular/common/http';
 import { HttpParams } from '@angular/common/http';
-import { Link2Off, Link, Clipboard, CircleAlert, Clock, Calendar, EllipsisVertical, Trash, Edit, Pencil, PencilLine, ListRestart, FileUp, Download, MonitorUp, FileSpreadsheet, Cpu, Trash2, Eraser, ArrowDownWideNarrow, Filter, ArrowBigRight, ChevronsRight, ChevronRight, ChevronLeft, ChevronsLeft, ListFilter, Table, Loader2, Moon, Sun, Save, Copy, Search, SquareDashedMousePointer, ChevronsUpDown, ChevronDown, ChevronUp, Eye, Upload, ImageOff, Images, Image, Minimize2, Scan, RefreshCcw, RotateCcw, RotateCw, ZoomOut, ZoomIn, Check, X, CircleHelp, TriangleAlert, CircleX, CircleCheck, Info } from 'lucide-angular';
 import * as FileSaver from 'file-saver';
 import * as ExcelJS from 'exceljs';
 
@@ -1231,121 +1230,289 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                 }]
         }] });
 
-class JIconsService {
-    icons = {
-        info: Info,
-        success: CircleCheck,
-        error: CircleX,
-        warning: TriangleAlert,
-        question: CircleHelp,
-        close: X,
-        check: Check,
-        zoomIn: ZoomIn,
-        zoomOut: ZoomOut,
-        rotateRight: RotateCw,
-        rotateLeft: RotateCcw,
-        reset: RefreshCcw,
-        fullscreen: Scan,
-        exitFullscreen: Minimize2,
-        img: Image,
-        imgs: Images,
-        imageOff: ImageOff,
-        upload: Upload,
-        view: Eye,
-        chevronUp: ChevronUp,
-        chevronDown: ChevronDown,
-        chevronsUpDown: ChevronsUpDown,
-        squareDashedMousePointer: SquareDashedMousePointer,
-        search: Search,
-        copy: Copy,
-        save: Save,
-        sun: Sun,
-        moon: Moon,
-        loading: Loader2,
-        table: Table,
-        listFilter: ListFilter,
-        firstPage: ChevronsLeft,
-        prevPage: ChevronLeft,
-        nextPage: ChevronRight,
-        lastPage: ChevronsRight,
-        arrowBigRight: ArrowBigRight,
-        filter: Filter,
-        filterList: ArrowDownWideNarrow,
-        eraser: Eraser,
-        transh: Trash2,
-        default: Cpu,
-        fileSpreadsheet: FileSpreadsheet,
-        monitorUp: MonitorUp,
-        download: Download,
-        fileUp: FileUp,
-        listRestart: ListRestart,
-        editRowLine: PencilLine,
-        editRow: Pencil,
-        edit: Edit,
-        delete: Trash,
-        ellipsisVertical: EllipsisVertical,
-        calendar: Calendar,
-        clock: Clock,
-        circleAlert: CircleAlert,
-        clipboard: Clipboard,
-        link: Link,
-        linkOff: Link2Off,
-    };
-    constructor() { }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: JIconsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: JIconsService, providedIn: 'root' });
+/** All keys emitted by the theme generator into `@theme`. */
+const GENERATED_COLOR_KEYS = [
+    'background',
+    'foreground',
+    'card',
+    'cardForeground',
+    'popover',
+    'popoverForeground',
+    'primary',
+    'primaryForeground',
+    'secondary',
+    'secondaryForeground',
+    'muted',
+    'mutedForeground',
+    'accent',
+    'accentForeground',
+    'destructive',
+    'destructiveForeground',
+    'border',
+    'input',
+    'ring',
+    'darkBackground',
+    'darkForeground',
+    'darkCard',
+    'darkCardForeground',
+    'darkPopover',
+    'darkPopoverForeground',
+    'darkPrimary',
+    'darkPrimaryForeground',
+    'darkSecondary',
+    'darkSecondaryForeground',
+    'darkMuted',
+    'darkMutedForeground',
+    'darkAccent',
+    'darkAccentForeground',
+    'darkDestructive',
+    'darkDestructiveForeground',
+    'darkBorder',
+    'darkInput',
+    'darkRing',
+];
+const RADIUS_VARS = ['--color-radius', '--color-dark-radius'];
+const CUSTOM_THEME_STYLE_ID = 'tailjng-custom-theme';
+/**
+ * Converts a generated color key to a Tailwind `@theme` CSS variable name.
+ * @param key Generated palette key.
+ * @returns CSS custom property name.
+ */
+function generatedColorToCssVarName(key) {
+    return `--color-${key.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`)}`;
+}
+/**
+ * Builds a `:root` CSS block for the generated palette.
+ * @param colors Generated palette.
+ * @returns CSS rules for `:root`.
+ */
+function buildRootThemeCss(colors) {
+    const lines = GENERATED_COLOR_KEYS.map((key) => `  ${generatedColorToCssVarName(key)}: ${colors[key]};`);
+    lines.push('  --color-radius: 0.5rem;');
+    lines.push('  --color-dark-radius: 0.5rem;');
+    return `:root {\n${lines.join('\n')}\n}`;
+}
+/**
+ * Applies generated palette values through a dedicated stylesheet (reliable with Tailwind v4).
+ * @param colors Generated palette.
+ */
+function applyGeneratedColorsToDocument(colors) {
+    const css = buildRootThemeCss(colors);
+    let styleEl = document.getElementById(CUSTOM_THEME_STYLE_ID);
+    if (!styleEl) {
+        styleEl = document.createElement('style');
+        styleEl.id = CUSTOM_THEME_STYLE_ID;
+        document.head.appendChild(styleEl);
+    }
+    styleEl.textContent = css;
+    document.head.appendChild(styleEl);
+    clearInlineThemeOverrides();
+}
+/**
+ * Removes custom theme overrides from the document.
+ */
+function clearGeneratedColorsFromDocument() {
+    document.getElementById(CUSTOM_THEME_STYLE_ID)?.remove();
+    clearInlineThemeOverrides();
+}
+/**
+ * Builds the `@theme { ... }` block copied by the theme generator.
+ * @param colors Generated palette.
+ * @returns Tailwind v4 `@theme` snippet.
+ */
+function buildThemeCode(colors) {
+    const lines = [];
+    let darkStarted = false;
+    for (const key of GENERATED_COLOR_KEYS) {
+        if (!darkStarted && key.startsWith('dark')) {
+            lines.push('');
+            darkStarted = true;
+        }
+        lines.push(`  ${generatedColorToCssVarName(key)}: ${colors[key]};`);
+    }
+    lines.push('  --color-radius: 0.5rem;');
+    lines.push('  --color-dark-radius: 0.5rem;');
+    return `@theme {\n${lines.join('\n')}\n}`;
+}
+/** Clears legacy inline overrides on `documentElement`. */
+function clearInlineThemeOverrides(root = document.documentElement) {
+    for (const key of GENERATED_COLOR_KEYS) {
+        root.style.removeProperty(generatedColorToCssVarName(key));
+    }
+    for (const cssVar of RADIUS_VARS) {
+        root.style.removeProperty(cssVar);
+    }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: JIconsService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [] });
 
+const THEME_MODE_STORAGE_KEY = 'theme';
+const CUSTOM_COLORS_STORAGE_KEY = 'tailjng-custom-colors';
 class JThemeService {
     _theme = signal('light');
     themeSignal = this._theme.asReadonly();
+    previewColorsActive = false;
+    persistedColors = null;
+    activeColors = null;
     constructor() {
         this.initializeTheme();
+        this.loadPersistedCustomColors();
         this.listenToExternalChanges();
     }
     initializeTheme() {
-        const savedTheme = localStorage.getItem('theme');
+        const savedTheme = localStorage.getItem(THEME_MODE_STORAGE_KEY);
         if (savedTheme) {
             this._theme.set(savedTheme);
         }
         else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
             this._theme.set('dark');
         }
-        this.applyTheme();
+        this.applyThemeModeClass();
     }
     listenToExternalChanges() {
         window.addEventListener('storage', (event) => {
-            if (event.key === 'theme' && event.newValue) {
+            if (event.key === THEME_MODE_STORAGE_KEY && event.newValue) {
                 const newTheme = event.newValue;
                 this._theme.set(newTheme);
-                this.applyTheme();
+                this.applyThemeModeClass();
+                this.syncActiveColorsToDocument();
+                return;
+            }
+            if (event.key === CUSTOM_COLORS_STORAGE_KEY) {
+                this.loadPersistedCustomColors();
             }
         });
     }
-    applyTheme() {
+    applyThemeModeClass() {
         const current = this._theme();
         document.documentElement.classList.toggle('dark', current === 'dark');
     }
+    /**
+     * Re-applies the `dark` class on the next frame so Tailwind re-evaluates tokens.
+     */
+    refreshThemeModeClass() {
+        const isDark = this._theme() === 'dark';
+        const html = document.documentElement;
+        if (!isDark) {
+            html.classList.remove('dark');
+            return;
+        }
+        html.classList.remove('dark');
+        requestAnimationFrame(() => html.classList.add('dark'));
+    }
+    syncActiveColorsToDocument(refreshMode = false) {
+        if (!this.activeColors) {
+            return;
+        }
+        applyGeneratedColorsToDocument(this.activeColors);
+        if (refreshMode) {
+            this.refreshThemeModeClass();
+        }
+    }
+    setActiveColors(colors, refreshMode = false) {
+        this.activeColors = colors;
+        applyGeneratedColorsToDocument(colors);
+        if (refreshMode) {
+            this.refreshThemeModeClass();
+        }
+    }
+    /**
+     * Loads a previously saved custom palette from localStorage and applies it.
+     */
+    loadPersistedCustomColors() {
+        const raw = localStorage.getItem(CUSTOM_COLORS_STORAGE_KEY);
+        if (!raw) {
+            this.persistedColors = null;
+            if (!this.previewColorsActive) {
+                this.activeColors = null;
+            }
+            return;
+        }
+        try {
+            const parsed = JSON.parse(raw);
+            if (!this.isValidGeneratedColors(parsed)) {
+                localStorage.removeItem(CUSTOM_COLORS_STORAGE_KEY);
+                this.persistedColors = null;
+                return;
+            }
+            this.persistedColors = parsed;
+            this.setActiveColors(this.persistedColors);
+        }
+        catch {
+            localStorage.removeItem(CUSTOM_COLORS_STORAGE_KEY);
+            this.persistedColors = null;
+        }
+    }
+    /**
+     * Whether a custom palette is saved in localStorage.
+     * @returns `true` when a persisted palette exists.
+     */
+    hasPersistedCustomColors() {
+        return this.persistedColors !== null;
+    }
+    /**
+     * Saves and applies a custom palette for the whole app (survives reloads).
+     * @param colors Generated palette from the theme generator.
+     */
+    saveCustomColors(colors) {
+        localStorage.setItem(CUSTOM_COLORS_STORAGE_KEY, JSON.stringify(colors));
+        this.persistedColors = colors;
+        this.previewColorsActive = false;
+        this.setActiveColors(colors, true);
+    }
+    /**
+     * Removes the saved custom palette and restores `@theme` defaults from CSS.
+     */
+    clearPersistedCustomColors() {
+        localStorage.removeItem(CUSTOM_COLORS_STORAGE_KEY);
+        this.persistedColors = null;
+        this.previewColorsActive = false;
+        this.activeColors = null;
+        clearGeneratedColorsFromDocument();
+        this.refreshThemeModeClass();
+    }
+    /**
+     * Applies generated palette CSS variables to the document for live preview.
+     * @param colors Palette from the theme generator.
+     */
+    applyPreviewColors(colors) {
+        this.setActiveColors(colors);
+        this.previewColorsActive = true;
+    }
+    /**
+     * Ends live preview — reverts to the saved palette or CSS defaults.
+     */
+    clearPreviewColors() {
+        if (!this.previewColorsActive) {
+            return;
+        }
+        if (this.persistedColors) {
+            this.setActiveColors(this.persistedColors);
+        }
+        else {
+            this.activeColors = null;
+            clearGeneratedColorsFromDocument();
+            this.refreshThemeModeClass();
+        }
+        this.previewColorsActive = false;
+    }
     toggleTheme() {
         const newTheme = this._theme() === 'light' ? 'dark' : 'light';
-        localStorage.setItem('theme', newTheme);
+        localStorage.setItem(THEME_MODE_STORAGE_KEY, newTheme);
         this._theme.set(newTheme);
-        this.applyTheme();
+        this.applyThemeModeClass();
+        this.syncActiveColorsToDocument(true);
     }
     setTheme(theme) {
-        localStorage.setItem('theme', theme);
+        localStorage.setItem(THEME_MODE_STORAGE_KEY, theme);
         this._theme.set(theme);
-        this.applyTheme();
+        this.applyThemeModeClass();
+        this.syncActiveColorsToDocument(true);
     }
     getThemeMode() {
         return this._theme();
     }
+    isValidGeneratedColors(value) {
+        return GENERATED_COLOR_KEYS.every((key) => typeof value[key] === 'string' && value[key] !== '');
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: JThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: JThemeService, providedIn: 'root' });
 }
@@ -2334,5 +2501,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { JAlertDialogService, JAlertToastService, JCOLORS_DEFAULT_VARIANTS, JCalendarService, JColorsService, JConverterCrudService, JDialogShared, JErrorHandlerHttpService, JExcelFilterService, JExcelService, JFileHttpService, JFormShared, JGenericCrudService, JIconsService, JParamsHttpService, JThemeService, JTransformService, JUploadFilterService, TAILJNG_COLORS_CONFIG, TAILJNG_CONFIG };
+export { CUSTOM_THEME_STYLE_ID, GENERATED_COLOR_KEYS, JAlertDialogService, JAlertToastService, JCOLORS_DEFAULT_VARIANTS, JCalendarService, JColorsService, JConverterCrudService, JDialogShared, JErrorHandlerHttpService, JExcelFilterService, JExcelService, JFileHttpService, JFormShared, JGenericCrudService, JParamsHttpService, JThemeService, JTransformService, JUploadFilterService, TAILJNG_COLORS_CONFIG, TAILJNG_CONFIG, applyGeneratedColorsToDocument, buildRootThemeCss, buildThemeCode, clearGeneratedColorsFromDocument, generatedColorToCssVarName };
 //# sourceMappingURL=tailjng.mjs.map