{"version":3,"file":"fiscal-io-ds-components.mjs","sources":["../../../../projects/fiscal-io/ds-components/src/lib/services/ds-sidebar.service.ts","../../../../projects/fiscal-io/ds-components/src/lib/services/theme.service.ts","../../../../projects/fiscal-io/ds-components/src/lib/services/locale.service.ts","../../../../projects/fiscal-io/ds-components/src/lib/services/ds-toast.service.ts","../../../../projects/fiscal-io/ds-components/src/public-api.ts","../../../../projects/fiscal-io/ds-components/src/fiscal-io-ds-components.ts"],"sourcesContent":["import { Injectable, signal } from '@angular/core';\n\n@Injectable({\n providedIn: 'root'\n})\nexport class DsSidebarService {\n // Status signal to lock/unlock expansion\n private _isLocked = signal(false);\n readonly isLocked = this._isLocked.asReadonly();\n\n constructor() {}\n\n /**\n * Locks the sidebar, preventing it from opening.\n * If the sidebar is currently open, it should be closed by the component listening to this state.\n */\n lock(): void {\n this._isLocked.set(true);\n }\n\n /**\n * Unlocks the sidebar, allowing normal open/close behavior.\n */\n unlock(): void {\n this._isLocked.set(false);\n }\n\n /**\n * Sets the locked state manually.\n * @param value True to lock, False to unlock\n */\n setLocked(value: boolean): void {\n this._isLocked.set(value);\n }\n}\n","import {\r\n Injectable,\r\n Inject,\r\n InjectionToken,\r\n Optional,\r\n Renderer2,\r\n RendererFactory2,\r\n DOCUMENT,\r\n signal,\r\n} from '@angular/core';\r\n\r\nexport type ClientTheme = {\r\n primary: string;\r\n};\r\n\r\n/**\r\n * Configuration for the ThemeService.\r\n * Provide via `DS_THEME_CONFIG` token in your app's providers.\r\n */\r\nexport interface DsThemeConfig {\r\n /** Prefix for localStorage keys (default: 'ds'). Use your app name to avoid conflicts. */\r\n storagePrefix?: string;\r\n /** Default primary color hex (e.g. '#265cd1'). If not set, uses the theme's default. */\r\n defaultPrimaryColor?: string;\r\n}\r\n\r\n/** Injection token to configure ThemeService per-app */\r\nexport const DS_THEME_CONFIG = new InjectionToken('DS_THEME_CONFIG');\r\n\r\n@Injectable({\r\n providedIn: 'root',\r\n})\r\nexport class ThemeService {\r\n private renderer: Renderer2;\r\n private readonly STORAGE_KEY: string;\r\n private readonly DARK_MODE_STORAGE_KEY: string;\r\n private readonly defaultPrimaryColor: string | null;\r\n public isDarkMode = signal(false);\r\n\r\n constructor(\r\n @Inject(DOCUMENT) private document: Document,\r\n private rendererFactory: RendererFactory2,\r\n @Optional() @Inject(DS_THEME_CONFIG) config?: DsThemeConfig,\r\n ) {\r\n const prefix = config?.storagePrefix || 'ds';\r\n this.STORAGE_KEY = `${prefix}-primary-color`;\r\n this.DARK_MODE_STORAGE_KEY = `${prefix}-dark-mode`;\r\n this.defaultPrimaryColor = config?.defaultPrimaryColor || null;\r\n\r\n this.renderer = rendererFactory.createRenderer(null, null);\r\n\r\n // Ensure Syncfusion theme CSS loads AFTER Angular's compiled styles (Bootstrap)\r\n // so that Syncfusion has higher CSS cascade priority\r\n this.ensureThemeLinkOrder();\r\n\r\n this.loadSavedTheme();\r\n \r\n const savedDarkMode = localStorage.getItem(this.DARK_MODE_STORAGE_KEY);\r\n if (savedDarkMode === 'true') {\r\n this.isDarkMode.set(true);\r\n this.applyDarkMode(true);\r\n }\r\n }\r\n\r\n /**\r\n * Ensures the Syncfusion theme CSS link exists and is at the END of .\r\n * Angular injects its compiled styles.css (Bootstrap) after existing tags,\r\n * so the sf-theme link must come AFTER to win in the CSS cascade.\r\n * Also handles HMR scenarios where the link may be missing.\r\n */\r\n private ensureThemeLinkOrder(): void {\r\n let themeLink = this.document.getElementById('sf-theme') as HTMLLinkElement;\r\n \r\n if (!themeLink) {\r\n // Link missing (e.g. HMR rebuild) — create it\r\n themeLink = this.document.createElement('link');\r\n themeLink.id = 'sf-theme';\r\n themeLink.rel = 'stylesheet';\r\n themeLink.href = this.isDarkMode() ? 'assets/themes/syncfusion-dark.css' : 'assets/themes/syncfusion-light.css';\r\n }\r\n \r\n // (Re-)append to end of so it comes AFTER Angular's compiled styles\r\n this.document.head.appendChild(themeLink);\r\n }\r\n\r\n toggleDarkMode(): void {\r\n const newMode = !this.isDarkMode();\r\n this.isDarkMode.set(newMode);\r\n localStorage.setItem(this.DARK_MODE_STORAGE_KEY, newMode.toString());\r\n this.applyDarkMode(newMode);\r\n }\r\n\r\n private applyDarkMode(isDark: boolean): void {\r\n this.document.documentElement.setAttribute('data-bs-theme', isDark ? 'dark' : 'light');\r\n const themeLink = this.document.getElementById('sf-theme') as HTMLLinkElement;\r\n if (themeLink) {\r\n themeLink.href = isDark ? 'assets/themes/syncfusion-dark.css' : 'assets/themes/syncfusion-light.css';\r\n }\r\n }\r\n\r\n /**\r\n * Restores the previously saved primary color from localStorage.\r\n * Falls back to `defaultPrimaryColor` from config if nothing is saved.\r\n */\r\n private loadSavedTheme(): void {\r\n const savedColor = localStorage.getItem(this.STORAGE_KEY);\r\n if (savedColor) {\r\n this.setPrimaryColor(savedColor);\r\n } else if (this.defaultPrimaryColor) {\r\n this.setPrimaryColor(this.defaultPrimaryColor);\r\n }\r\n }\r\n\r\n /**\r\n * Removes the saved primary color from localStorage.\r\n */\r\n clearSavedTheme(): void {\r\n localStorage.removeItem(this.STORAGE_KEY);\r\n }\r\n\r\n /**\r\n * Set the primary color and update ALL Bootstrap 5.3 + Syncfusion selectors at runtime.\r\n */\r\n setPrimaryColor(color: string): void {\r\n const root = this.document.documentElement;\r\n const rgb = this.hexToRgb(color);\r\n const rgbString = `${rgb.r}, ${rgb.g}, ${rgb.b}`;\r\n\r\n // --- Color variations (Bootstrap-like tint/shade) ---\r\n const hover = this.tintColor(color, 15);\r\n const hoverBorder = this.shadeColor(color, 20);\r\n const active = this.shadeColor(color, 20);\r\n const activeBorder = this.shadeColor(color, 25);\r\n const linkHover = this.shadeColor(color, 20);\r\n const subtle = this.tintColor(color, 80);\r\n const borderSubtle = this.tintColor(color, 60);\r\n const textEmphasis = this.shadeColor(color, 60);\r\n const focusShadow = this.mixColor(color, '#ffffff', 50);\r\n\r\n const hoverRgb = this.hexToRgb(hover);\r\n const activeRgb = this.hexToRgb(active);\r\n const linkHoverRgb = this.hexToRgb(linkHover);\r\n const focusShadowRgb = this.hexToRgb(focusShadow);\r\n const subtleRgb = this.hexToRgb(subtle);\r\n\r\n // ──────────────────────────────────────────────\r\n // 1. :root CSS variables (handles already-reactive selectors)\r\n // .bg-primary, .text-primary, .text-bg-primary, .form-control:focus,\r\n // .nav-pills .nav-link.active, a tags, etc.\r\n // ──────────────────────────────────────────────\r\n const rootVars: Record = {\r\n '--bs-primary': color,\r\n '--bs-primary-rgb': rgbString,\r\n '--bs-link-color': color,\r\n '--bs-link-color-rgb': rgbString,\r\n '--bs-link-hover-color': linkHover,\r\n '--bs-link-hover-color-rgb': `${linkHoverRgb.r}, ${linkHoverRgb.g}, ${linkHoverRgb.b}`,\r\n '--bs-focus-ring-color': `rgba(${rgbString}, 0.25)`,\r\n '--bs-primary-bg-subtle': subtle,\r\n '--bs-primary-border-subtle': borderSubtle,\r\n '--bs-primary-text-emphasis': textEmphasis,\r\n\r\n // Syncfusion Variables\r\n '--color-sf-primary': color,\r\n '--color-sf-primary-text-color': '#ffffff',\r\n '--color-sf-primary-light': borderSubtle,\r\n '--color-sf-primary-lighter': subtle,\r\n '--color-sf-primary-dark': active,\r\n '--color-sf-primary-darker': textEmphasis,\r\n '--color-sf-primary-bg-color': color,\r\n '--color-sf-primary-border-color': color,\r\n '--color-sf-primary-bg-color-hover': hover,\r\n '--color-sf-primary-border-color-hover': hover,\r\n '--color-sf-primary-bg-color-pressed': active,\r\n '--color-sf-primary-border-color-pressed': active,\r\n '--color-sf-primary-bg-color-focus': hover,\r\n '--color-sf-primary-border-color-focus': hover,\r\n '--color-sf-primary-bg-color-disabled': `rgba(${rgbString}, 0.65)`,\r\n '--color-sf-primary-border-color-disabled': `rgba(${rgbString}, 0.65)`,\r\n '--color-sf-primary-text': '#ffffff',\r\n '--color-sf-primary-text-hover': '#ffffff',\r\n '--color-sf-primary-text-pressed': '#ffffff',\r\n '--color-sf-primary-text-focus': '#ffffff',\r\n '--color-sf-primary-text-disabled': 'rgba(255, 255, 255, 0.65)',\r\n '--color-sf-content-bg-color-selected': color,\r\n '--color-sf-content-text-color-selected': '#ffffff',\r\n '--color-sf-flyout-bg-color-pressed': color,\r\n '--color-sf-flyout-text-color-pressed': '#ffffff',\r\n '--color-sf-rating-selected-color': color,\r\n '--color-sf-rating-unrated-hover-color': color,\r\n '--color-sf-border-focus': borderSubtle,\r\n '--color-sf-border-selected': borderSubtle,\r\n '--color-sf-primary-shadow': rgbString,\r\n };\r\n\r\n Object.entries(rootVars).forEach(([key, value]) => {\r\n root.style.setProperty(key, value);\r\n });\r\n\r\n // ──────────────────────────────────────────────\r\n // 2. Inject