dynamic-ds 1.0.0

package/fesm2022/fis-ds.mjs

@@ -0,0 +1,332 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, Optional, Inject, Injectable, Component } from '@angular/core';
+import { of } from 'rxjs';
+
+// Token để inject config (Cầu nối giữa App và Lib)
+const SYSTEM_DESIGN_CONFIG = new InjectionToken('SYSTEM_DESIGN_CONFIG');
+
+class FisDsService {
+    config;
+    // Default colors
+    DEFAULT_BRAND = '#006BDF';
+    DEFAULT_PRIMARY = '#006BDF';
+    DEFAULT_SECONDARY = '#9F5100';
+    DEFAULT_FUNCTIONAL = '#006BDF';
+    DEFAULT_UTILITY = '#CF0026';
+    constructor(config) {
+        this.config = config;
+    }
+    /**
+     * Initialize theme colors from system config
+     * Call this method during app initialization (e.g., in APP_INITIALIZER)
+     * Each color is processed independently - uses fetched value if available, otherwise uses default
+     * @returns Observable that completes when theme initialization is done
+     */
+    initializeTheme() {
+        console.log('[SystemDesignService] Initializing theme...');
+        try {
+            const brandColor = this.config?.brand;
+            const primaryColor = this.config?.primary;
+            const secondaryColor = this.config?.secondary;
+            const functionalColor = this.config?.functional;
+            const utilityColor = this.config?.utility;
+            // Process each color individually - use fetched value OR default
+            this.applyColorOrDefault(brandColor, 'brand', this.DEFAULT_BRAND);
+            this.applyColorOrDefault(primaryColor, 'primary', this.DEFAULT_PRIMARY);
+            this.applyColorOrDefault(secondaryColor, 'secondary', this.DEFAULT_SECONDARY);
+            this.applyColorOrDefault(functionalColor, 'functional', this.DEFAULT_FUNCTIONAL);
+            this.applyColorOrDefault(utilityColor, 'utility', this.DEFAULT_UTILITY);
+            console.log('[SystemDesignService] Theme initialization completed');
+            return of(true);
+        }
+        catch (error) {
+            // If entire fetch fails, fallback to all defaults
+            console.warn('[SystemDesignService] Failed to fetch theme config, using all defaults', error);
+            this.resetToDefaults();
+            return of(false);
+        }
+    }
+    /**
+     * Reload theme colors from latest system config
+     * This is a convenience method that's equivalent to initializeTheme()
+     * but with a more descriptive name for runtime reloading
+     *
+     * Usage: After updating theme config, call this to apply new colors
+     * @returns Observable that completes when theme is reloaded
+     */
+    reloadThemeFromConfig() {
+        console.log('[SystemDesignService] Reloading theme from current config...');
+        return this.initializeTheme();
+    }
+    /**
+     * Apply color if valid, otherwise use default
+     * @param fetchedColor Color fetched from config (may be null/undefined/invalid)
+     * @param type Color type
+     * @param defaultColor Default color to use as fallback
+     */
+    applyColorOrDefault(fetchedColor, type, defaultColor) {
+        // Check if fetched color exists and is valid
+        if (fetchedColor && this.isValidHexColor(fetchedColor)) {
+            this.setColorPalette(fetchedColor, type);
+            console.log(`[SystemDesignService] Applied ${type}: ${fetchedColor} (from config)`);
+        }
+        else {
+            this.setColorPalette(defaultColor, type);
+            const reason = !fetchedColor ? 'not found' : 'invalid format';
+            console.log(`[SystemDesignService] Applied ${type}: ${defaultColor} (default - ${reason})`);
+        }
+    }
+    /**
+     * Set color and generate full palette (900 -> 50)
+     * @param color Hex color value (e.g., '#006BDF')
+     * @param type Type of color ('primary' | 'secondary' | 'brand')
+     */
+    setColorPalette(color, type) {
+        if (!this.isValidHexColor(color)) {
+            console.error(`[SystemDesignService] Invalid color format: ${color}`);
+            return;
+        }
+        // Set base color (600)
+        document.documentElement.style.setProperty(`--${type}-color`, color);
+        document.documentElement.style.setProperty(`--${type}-600`, color);
+        // Set RGB for base color
+        const rgb = this.hexToRgb(color);
+        if (rgb) {
+            const rgbValue = `${rgb.r}, ${rgb.g}, ${rgb.b}`;
+            document.documentElement.style.setProperty(`--${type}-color-rgb`, rgbValue);
+            document.documentElement.style.setProperty(`--${type}-600-rgb`, rgbValue);
+        }
+        // Generate and set full palette
+        const palette = this.generateColorPalette(color);
+        Object.entries(palette).forEach(([shade, hexColor]) => {
+            document.documentElement.style.setProperty(`--${type}-${shade}`, hexColor);
+            // Set RGB variant for each shade
+            const shadeRgb = this.hexToRgb(hexColor);
+            if (shadeRgb) {
+                document.documentElement.style.setProperty(`--${type}-${shade}-rgb`, `${shadeRgb.r}, ${shadeRgb.g}, ${shadeRgb.b}`);
+            }
+        });
+        console.log(`[SystemDesignService] ${type} color palette generated from: ${color}`);
+    }
+    /**
+     * Generate color palette from base color
+     * Creates all shades matching system-design.scss $shade-offsets
+     * Uses RGB mix algorithm (mix with white/black) for accurate colors
+     * @param baseColor Hex color string
+     * @returns Object with shade keys and hex color values
+     */
+    generateColorPalette(baseColor) {
+        const rgb = this.hexToRgb(baseColor);
+        if (!rgb) {
+            console.error('[SystemDesignService] Failed to convert color to RGB');
+            return {};
+        }
+        // Shade offsets matching system-design.scss
+        // Negative values = mix with black (darken)
+        // Positive values = mix with white (lighten)
+        const shadeOffsets = {
+            '900': -73.5, // Darkest
+            '875': -62.5,
+            '850': -47.0,
+            '800': -34.5,
+            '700': -18.5,
+            // '600' is the base color (0%), set separately
+            '500': 17.5,
+            '400': 33.0,
+            '300': 53.0,
+            '200': 72.0,
+            '100': 85.0,
+            '50': 89.5,
+            '25': 93.5,
+            '10': 97.0, // Lightest
+        };
+        const palette = {};
+        Object.entries(shadeOffsets).forEach(([shade, offset]) => {
+            palette[shade] = this.mixColor(rgb, offset);
+        });
+        return palette;
+    }
+    /**
+     * Mix base color with white or black
+     * @param baseRgb Base color RGB
+     * @param weight Percentage to mix (-100 to 100)
+     *               Negative = mix with black (darken)
+     *               Positive = mix with white (lighten)
+     * @returns Hex color string
+     */
+    mixColor(baseRgb, weight) {
+        const white = { r: 255, g: 255, b: 255 };
+        const black = { r: 0, g: 0, b: 0 };
+        let mixWith;
+        let mixWeight;
+        if (weight > 0) {
+            // Positive weight = mix with white (lighten)
+            mixWith = white;
+            mixWeight = weight / 100;
+        }
+        else {
+            // Negative weight = mix with black (darken)
+            mixWith = black;
+            mixWeight = Math.abs(weight) / 100;
+        }
+        // Mix formula: result = base * (1 - weight) + mixWith * weight
+        const r = Math.round(baseRgb.r * (1 - mixWeight) + mixWith.r * mixWeight);
+        const g = Math.round(baseRgb.g * (1 - mixWeight) + mixWith.g * mixWeight);
+        const b = Math.round(baseRgb.b * (1 - mixWeight) + mixWith.b * mixWeight);
+        return this.rgbToHex({ r, g, b });
+    }
+    /**
+     * Convert RGB to HEX
+     * @param rgb RGB object
+     * @returns Hex color string
+     */
+    rgbToHex(rgb) {
+        const toHex = (n) => {
+            const hex = Math.max(0, Math.min(255, n)).toString(16);
+            return hex.length === 1 ? '0' + hex : hex;
+        };
+        return `#${toHex(rgb.r)}${toHex(rgb.g)}${toHex(rgb.b)}`;
+    }
+    /**
+     * Update system design colors dynamically
+     * Call this when user changes theme colors in settings
+     * Only updates colors that are provided and valid
+     * @param colors Object containing colors to update (optional properties)
+     */
+    updateSystemDesignColor(colors) {
+        console.log('[SystemDesignService] Updating colors:', colors);
+        // Update each color if provided and valid
+        if (colors.brandColor) {
+            if (this.isValidHexColor(colors.brandColor)) {
+                this.setColorPalette(colors.brandColor, 'brand');
+            }
+            else {
+                console.warn('[SystemDesignService] Invalid brand color format:', colors.brandColor);
+            }
+        }
+        if (colors.primaryColor) {
+            if (this.isValidHexColor(colors.primaryColor)) {
+                this.setColorPalette(colors.primaryColor, 'primary');
+            }
+            else {
+                console.warn('[SystemDesignService] Invalid primary color format:', colors.primaryColor);
+            }
+        }
+        if (colors.secondaryColor) {
+            if (this.isValidHexColor(colors.secondaryColor)) {
+                this.setColorPalette(colors.secondaryColor, 'secondary');
+            }
+            else {
+                console.warn('[SystemDesignService] Invalid secondary color format:', colors.secondaryColor);
+            }
+        }
+        if (colors.functionalColor) {
+            if (this.isValidHexColor(colors.functionalColor)) {
+                this.setColorPalette(colors.functionalColor, 'functional');
+            }
+            else {
+                console.warn('[SystemDesignService] Invalid functional color format:', colors.functionalColor);
+            }
+        }
+        if (colors.utilityColor) {
+            if (this.isValidHexColor(colors.utilityColor)) {
+                this.setColorPalette(colors.utilityColor, 'utility');
+            }
+            else {
+                console.warn('[SystemDesignService] Invalid utility color format:', colors.utilityColor);
+            }
+        }
+    }
+    /**
+     * Get current theme colors
+     * @returns Object with current brand, primary, secondary, functional, and utility colors
+     */
+    getCurrentColors() {
+        const style = getComputedStyle(document.documentElement);
+        return {
+            brand: style.getPropertyValue('--brand-color').trim(),
+            primary: style.getPropertyValue('--primary-color').trim(),
+            secondary: style.getPropertyValue('--secondary-color').trim(),
+            functional: style.getPropertyValue('--functional-color').trim(),
+            utility: style.getPropertyValue('--utility-color').trim(),
+        };
+    }
+    /**
+     * Reset to default colors
+     */
+    resetToDefaults() {
+        console.log('[SystemDesignService] Resetting to default colors');
+        this.setColorPalette(this.DEFAULT_BRAND, 'brand');
+        this.setColorPalette(this.DEFAULT_PRIMARY, 'primary');
+        this.setColorPalette(this.DEFAULT_SECONDARY, 'secondary');
+        this.setColorPalette(this.DEFAULT_FUNCTIONAL, 'functional');
+        this.setColorPalette(this.DEFAULT_UTILITY, 'utility');
+    }
+    // ============================================================================
+    // COLOR CONVERSION UTILITIES
+    // ============================================================================
+    /**
+     * Validate hex color format
+     * @param hex Color string to validate
+     * @returns true if valid hex color
+     */
+    isValidHexColor(hex) {
+        return /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.test(hex);
+    }
+    /**
+     * Convert HEX to RGB
+     * @param hex Hex color string (e.g., '#006BDF')
+     * @returns RGB object or null if invalid
+     */
+    hexToRgb(hex) {
+        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+        return result
+            ? {
+                r: parseInt(result[1], 16),
+                g: parseInt(result[2], 16),
+                b: parseInt(result[3], 16),
+            }
+            : null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FisDsService, deps: [{ token: SYSTEM_DESIGN_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FisDsService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FisDsService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [SYSTEM_DESIGN_CONFIG]
+                }] }] });
+
+class FisDsComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FisDsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: FisDsComponent, isStandalone: true, selector: "lib-fis-ds", ngImport: i0, template: `
+    <p>
+      fis-ds works!
+    </p>
+  `, isInline: true, styles: [""] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FisDsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-fis-ds', imports: [], template: `
+    <p>
+      fis-ds works!
+    </p>
+  ` }]
+        }] });
+
+/*
+ * Public API Surface of fis-ds
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FisDsComponent, FisDsService, SYSTEM_DESIGN_CONFIG };
+//# sourceMappingURL=fis-ds.mjs.map

package/fesm2022/fis-ds.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"fis-ds.mjs","sources":["../../../projects/fis-ds/src/lib/fis-ds.config.ts","../../../projects/fis-ds/src/lib/fis-ds.service.ts","../../../projects/fis-ds/src/lib/fis-ds.component.ts","../../../projects/fis-ds/src/public-api.ts","../../../projects/fis-ds/src/fis-ds.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\r\n\r\n// Interface định nghĩa các màu cần thiết\r\nexport interface SystemDesignConfig {\r\n  brand?: string;\r\n  primary?: string;\r\n  secondary?: string;\r\n  functional?: string;\r\n  utility?: string;\r\n}\r\n\r\n// Token để inject config (Cầu nối giữa App và Lib)\r\nexport const SYSTEM_DESIGN_CONFIG = new InjectionToken<SystemDesignConfig>(\r\n  'SYSTEM_DESIGN_CONFIG',\r\n);\r\n","import { Inject, Injectable, Optional } from '@angular/core';\r\nimport { SYSTEM_DESIGN_CONFIG, SystemDesignConfig } from './fis-ds.config';\r\nimport { Observable, of } from 'rxjs';\r\n\r\n@Injectable({\r\n  providedIn: 'root',\r\n})\r\nexport class FisDsService {\r\n  // Default colors\r\n  private readonly DEFAULT_BRAND = '#006BDF';\r\n  private readonly DEFAULT_PRIMARY = '#006BDF';\r\n  private readonly DEFAULT_SECONDARY = '#9F5100';\r\n  private readonly DEFAULT_FUNCTIONAL = '#006BDF';\r\n  private readonly DEFAULT_UTILITY = '#CF0026';\r\n\r\n  constructor(\r\n    @Optional()\r\n    @Inject(SYSTEM_DESIGN_CONFIG)\r\n    private readonly config: SystemDesignConfig,\r\n  ) {}\r\n\r\n  /**\r\n   * Initialize theme colors from system config\r\n   * Call this method during app initialization (e.g., in APP_INITIALIZER)\r\n   * Each color is processed independently - uses fetched value if available, otherwise uses default\r\n   * @returns Observable that completes when theme initialization is done\r\n   */\r\n  initializeTheme(): Observable<any> {\r\n    console.log('[SystemDesignService] Initializing theme...');\r\n\r\n    try {\r\n      const brandColor = this.config?.brand;\r\n      const primaryColor = this.config?.primary;\r\n      const secondaryColor = this.config?.secondary;\r\n      const functionalColor = this.config?.functional;\r\n      const utilityColor = this.config?.utility;\r\n\r\n      // Process each color individually - use fetched value OR default\r\n      this.applyColorOrDefault(brandColor, 'brand', this.DEFAULT_BRAND);\r\n      this.applyColorOrDefault(primaryColor, 'primary', this.DEFAULT_PRIMARY);\r\n      this.applyColorOrDefault(\r\n        secondaryColor,\r\n        'secondary',\r\n        this.DEFAULT_SECONDARY,\r\n      );\r\n      this.applyColorOrDefault(\r\n        functionalColor,\r\n        'functional',\r\n        this.DEFAULT_FUNCTIONAL,\r\n      );\r\n      this.applyColorOrDefault(utilityColor, 'utility', this.DEFAULT_UTILITY);\r\n\r\n      console.log('[SystemDesignService] Theme initialization completed');\r\n      return of(true);\r\n    } catch (error) {\r\n      // If entire fetch fails, fallback to all defaults\r\n      console.warn(\r\n        '[SystemDesignService] Failed to fetch theme config, using all defaults',\r\n        error,\r\n      );\r\n      this.resetToDefaults();\r\n      return of(false);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Reload theme colors from latest system config\r\n   * This is a convenience method that's equivalent to initializeTheme()\r\n   * but with a more descriptive name for runtime reloading\r\n   *\r\n   * Usage: After updating theme config, call this to apply new colors\r\n   * @returns Observable that completes when theme is reloaded\r\n   */\r\n  reloadThemeFromConfig(): Observable<any> {\r\n    console.log('[SystemDesignService] Reloading theme from current config...');\r\n    return this.initializeTheme();\r\n  }\r\n\r\n  /**\r\n   * Apply color if valid, otherwise use default\r\n   * @param fetchedColor Color fetched from config (may be null/undefined/invalid)\r\n   * @param type Color type\r\n   * @param defaultColor Default color to use as fallback\r\n   */\r\n  private applyColorOrDefault(\r\n    fetchedColor: string | null | undefined,\r\n    type: 'primary' | 'secondary' | 'brand' | 'functional' | 'utility',\r\n    defaultColor: string,\r\n  ): void {\r\n    // Check if fetched color exists and is valid\r\n    if (fetchedColor && this.isValidHexColor(fetchedColor)) {\r\n      this.setColorPalette(fetchedColor, type);\r\n      console.log(\r\n        `[SystemDesignService] Applied ${type}: ${fetchedColor} (from config)`,\r\n      );\r\n    } else {\r\n      this.setColorPalette(defaultColor, type);\r\n      const reason = !fetchedColor ? 'not found' : 'invalid format';\r\n      console.log(\r\n        `[SystemDesignService] Applied ${type}: ${defaultColor} (default - ${reason})`,\r\n      );\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Set color and generate full palette (900 -> 50)\r\n   * @param color Hex color value (e.g., '#006BDF')\r\n   * @param type Type of color ('primary' | 'secondary' | 'brand')\r\n   */\r\n  private setColorPalette(\r\n    color: string,\r\n    type: 'primary' | 'secondary' | 'brand' | 'functional' | 'utility',\r\n  ): void {\r\n    if (!this.isValidHexColor(color)) {\r\n      console.error(`[SystemDesignService] Invalid color format: ${color}`);\r\n      return;\r\n    }\r\n\r\n    // Set base color (600)\r\n    document.documentElement.style.setProperty(`--${type}-color`, color);\r\n    document.documentElement.style.setProperty(`--${type}-600`, color);\r\n\r\n    // Set RGB for base color\r\n    const rgb = this.hexToRgb(color);\r\n    if (rgb) {\r\n      const rgbValue = `${rgb.r}, ${rgb.g}, ${rgb.b}`;\r\n      document.documentElement.style.setProperty(\r\n        `--${type}-color-rgb`,\r\n        rgbValue,\r\n      );\r\n      document.documentElement.style.setProperty(`--${type}-600-rgb`, rgbValue);\r\n    }\r\n\r\n    // Generate and set full palette\r\n    const palette = this.generateColorPalette(color);\r\n\r\n    Object.entries(palette).forEach(([shade, hexColor]) => {\r\n      document.documentElement.style.setProperty(\r\n        `--${type}-${shade}`,\r\n        hexColor,\r\n      );\r\n\r\n      // Set RGB variant for each shade\r\n      const shadeRgb = this.hexToRgb(hexColor);\r\n      if (shadeRgb) {\r\n        document.documentElement.style.setProperty(\r\n          `--${type}-${shade}-rgb`,\r\n          `${shadeRgb.r}, ${shadeRgb.g}, ${shadeRgb.b}`,\r\n        );\r\n      }\r\n    });\r\n\r\n    console.log(\r\n      `[SystemDesignService] ${type} color palette generated from: ${color}`,\r\n    );\r\n  }\r\n\r\n  /**\r\n   * Generate color palette from base color\r\n   * Creates all shades matching system-design.scss $shade-offsets\r\n   * Uses RGB mix algorithm (mix with white/black) for accurate colors\r\n   * @param baseColor Hex color string\r\n   * @returns Object with shade keys and hex color values\r\n   */\r\n  private generateColorPalette(baseColor: string): Record<string, string> {\r\n    const rgb = this.hexToRgb(baseColor);\r\n    if (!rgb) {\r\n      console.error('[SystemDesignService] Failed to convert color to RGB');\r\n      return {};\r\n    }\r\n\r\n    // Shade offsets matching system-design.scss\r\n    // Negative values = mix with black (darken)\r\n    // Positive values = mix with white (lighten)\r\n    const shadeOffsets: Record<string, number> = {\r\n      '900': -73.5, // Darkest\r\n      '875': -62.5,\r\n      '850': -47.0,\r\n      '800': -34.5,\r\n      '700': -18.5,\r\n      // '600' is the base color (0%), set separately\r\n      '500': 17.5,\r\n      '400': 33.0,\r\n      '300': 53.0,\r\n      '200': 72.0,\r\n      '100': 85.0,\r\n      '50': 89.5,\r\n      '25': 93.5,\r\n      '10': 97.0, // Lightest\r\n    };\r\n\r\n    const palette: Record<string, string> = {};\r\n\r\n    Object.entries(shadeOffsets).forEach(([shade, offset]) => {\r\n      palette[shade] = this.mixColor(rgb, offset);\r\n    });\r\n\r\n    return palette;\r\n  }\r\n\r\n  /**\r\n   * Mix base color with white or black\r\n   * @param baseRgb Base color RGB\r\n   * @param weight Percentage to mix (-100 to 100)\r\n   *               Negative = mix with black (darken)\r\n   *               Positive = mix with white (lighten)\r\n   * @returns Hex color string\r\n   */\r\n  private mixColor(\r\n    baseRgb: { r: number; g: number; b: number },\r\n    weight: number,\r\n  ): string {\r\n    const white = { r: 255, g: 255, b: 255 };\r\n    const black = { r: 0, g: 0, b: 0 };\r\n\r\n    let mixWith: { r: number; g: number; b: number };\r\n    let mixWeight: number;\r\n\r\n    if (weight > 0) {\r\n      // Positive weight = mix with white (lighten)\r\n      mixWith = white;\r\n      mixWeight = weight / 100;\r\n    } else {\r\n      // Negative weight = mix with black (darken)\r\n      mixWith = black;\r\n      mixWeight = Math.abs(weight) / 100;\r\n    }\r\n\r\n    // Mix formula: result = base * (1 - weight) + mixWith * weight\r\n    const r = Math.round(baseRgb.r * (1 - mixWeight) + mixWith.r * mixWeight);\r\n    const g = Math.round(baseRgb.g * (1 - mixWeight) + mixWith.g * mixWeight);\r\n    const b = Math.round(baseRgb.b * (1 - mixWeight) + mixWith.b * mixWeight);\r\n\r\n    return this.rgbToHex({ r, g, b });\r\n  }\r\n\r\n  /**\r\n   * Convert RGB to HEX\r\n   * @param rgb RGB object\r\n   * @returns Hex color string\r\n   */\r\n  private rgbToHex(rgb: { r: number; g: number; b: number }): string {\r\n    const toHex = (n: number): string => {\r\n      const hex = Math.max(0, Math.min(255, n)).toString(16);\r\n      return hex.length === 1 ? '0' + hex : hex;\r\n    };\r\n    return `#${toHex(rgb.r)}${toHex(rgb.g)}${toHex(rgb.b)}`;\r\n  }\r\n\r\n  /**\r\n   * Update system design colors dynamically\r\n   * Call this when user changes theme colors in settings\r\n   * Only updates colors that are provided and valid\r\n   * @param colors Object containing colors to update (optional properties)\r\n   */\r\n  updateSystemDesignColor(colors: {\r\n    primaryColor?: string;\r\n    secondaryColor?: string;\r\n    brandColor?: string;\r\n    functionalColor?: string;\r\n    utilityColor?: string;\r\n  }): void {\r\n    console.log('[SystemDesignService] Updating colors:', colors);\r\n\r\n    // Update each color if provided and valid\r\n    if (colors.brandColor) {\r\n      if (this.isValidHexColor(colors.brandColor)) {\r\n        this.setColorPalette(colors.brandColor, 'brand');\r\n      } else {\r\n        console.warn(\r\n          '[SystemDesignService] Invalid brand color format:',\r\n          colors.brandColor,\r\n        );\r\n      }\r\n    }\r\n\r\n    if (colors.primaryColor) {\r\n      if (this.isValidHexColor(colors.primaryColor)) {\r\n        this.setColorPalette(colors.primaryColor, 'primary');\r\n      } else {\r\n        console.warn(\r\n          '[SystemDesignService] Invalid primary color format:',\r\n          colors.primaryColor,\r\n        );\r\n      }\r\n    }\r\n\r\n    if (colors.secondaryColor) {\r\n      if (this.isValidHexColor(colors.secondaryColor)) {\r\n        this.setColorPalette(colors.secondaryColor, 'secondary');\r\n      } else {\r\n        console.warn(\r\n          '[SystemDesignService] Invalid secondary color format:',\r\n          colors.secondaryColor,\r\n        );\r\n      }\r\n    }\r\n\r\n    if (colors.functionalColor) {\r\n      if (this.isValidHexColor(colors.functionalColor)) {\r\n        this.setColorPalette(colors.functionalColor, 'functional');\r\n      } else {\r\n        console.warn(\r\n          '[SystemDesignService] Invalid functional color format:',\r\n          colors.functionalColor,\r\n        );\r\n      }\r\n    }\r\n\r\n    if (colors.utilityColor) {\r\n      if (this.isValidHexColor(colors.utilityColor)) {\r\n        this.setColorPalette(colors.utilityColor, 'utility');\r\n      } else {\r\n        console.warn(\r\n          '[SystemDesignService] Invalid utility color format:',\r\n          colors.utilityColor,\r\n        );\r\n      }\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Get current theme colors\r\n   * @returns Object with current brand, primary, secondary, functional, and utility colors\r\n   */\r\n  getCurrentColors(): {\r\n    brand: string;\r\n    primary: string;\r\n    secondary: string;\r\n    functional: string;\r\n    utility: string;\r\n  } {\r\n    const style = getComputedStyle(document.documentElement);\r\n    return {\r\n      brand: style.getPropertyValue('--brand-color').trim(),\r\n      primary: style.getPropertyValue('--primary-color').trim(),\r\n      secondary: style.getPropertyValue('--secondary-color').trim(),\r\n      functional: style.getPropertyValue('--functional-color').trim(),\r\n      utility: style.getPropertyValue('--utility-color').trim(),\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Reset to default colors\r\n   */\r\n  resetToDefaults(): void {\r\n    console.log('[SystemDesignService] Resetting to default colors');\r\n    this.setColorPalette(this.DEFAULT_BRAND, 'brand');\r\n    this.setColorPalette(this.DEFAULT_PRIMARY, 'primary');\r\n    this.setColorPalette(this.DEFAULT_SECONDARY, 'secondary');\r\n    this.setColorPalette(this.DEFAULT_FUNCTIONAL, 'functional');\r\n    this.setColorPalette(this.DEFAULT_UTILITY, 'utility');\r\n  }\r\n\r\n  // ============================================================================\r\n  // COLOR CONVERSION UTILITIES\r\n  // ============================================================================\r\n\r\n  /**\r\n   * Validate hex color format\r\n   * @param hex Color string to validate\r\n   * @returns true if valid hex color\r\n   */\r\n  private isValidHexColor(hex: string): boolean {\r\n    return /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.test(hex);\r\n  }\r\n\r\n  /**\r\n   * Convert HEX to RGB\r\n   * @param hex Hex color string (e.g., '#006BDF')\r\n   * @returns RGB object or null if invalid\r\n   */\r\n  private hexToRgb(hex: string): { r: number; g: number; b: number } | null {\r\n    const result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\r\n    return result\r\n      ? {\r\n          r: parseInt(result[1], 16),\r\n          g: parseInt(result[2], 16),\r\n          b: parseInt(result[3], 16),\r\n        }\r\n      : null;\r\n  }\r\n}\r\n","import { Component } from '@angular/core';\r\n\r\n@Component({\r\n  selector: 'lib-fis-ds',\r\n  imports: [],\r\n  template: `\r\n    <p>\r\n      fis-ds works!\r\n    </p>\r\n  `,\r\n  styles: ``\r\n})\r\nexport class FisDsComponent {\r\n\r\n}\r\n","/*\r\n * Public API Surface of fis-ds\r\n */\r\n\r\nexport * from './lib/fis-ds.service';\r\nexport * from './lib/fis-ds.component';\r\nexport * from './lib/fis-ds.config';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="dynamic-ds" />
+export * from './public-api';

package/lib/fis-ds.component.d.ts

@@ -0,0 +1,5 @@
+import * as i0 from "@angular/core";
+export declare class FisDsComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<FisDsComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FisDsComponent, "lib-fis-ds", never, {}, {}, never, never, true, never>;
+}

package/lib/fis-ds.config.d.ts

@@ -0,0 +1,9 @@
+import { InjectionToken } from '@angular/core';
+export interface SystemDesignConfig {
+    brand?: string;
+    primary?: string;
+    secondary?: string;
+    functional?: string;
+    utility?: string;
+}
+export declare const SYSTEM_DESIGN_CONFIG: InjectionToken<SystemDesignConfig>;

package/lib/fis-ds.service.d.ts

@@ -0,0 +1,106 @@
+import { SystemDesignConfig } from './fis-ds.config';
+import { Observable } from 'rxjs';
+import * as i0 from "@angular/core";
+export declare class FisDsService {
+    private readonly config;
+    private readonly DEFAULT_BRAND;
+    private readonly DEFAULT_PRIMARY;
+    private readonly DEFAULT_SECONDARY;
+    private readonly DEFAULT_FUNCTIONAL;
+    private readonly DEFAULT_UTILITY;
+    constructor(config: SystemDesignConfig);
+    /**
+     * Initialize theme colors from system config
+     * Call this method during app initialization (e.g., in APP_INITIALIZER)
+     * Each color is processed independently - uses fetched value if available, otherwise uses default
+     * @returns Observable that completes when theme initialization is done
+     */
+    initializeTheme(): Observable<any>;
+    /**
+     * Reload theme colors from latest system config
+     * This is a convenience method that's equivalent to initializeTheme()
+     * but with a more descriptive name for runtime reloading
+     *
+     * Usage: After updating theme config, call this to apply new colors
+     * @returns Observable that completes when theme is reloaded
+     */
+    reloadThemeFromConfig(): Observable<any>;
+    /**
+     * Apply color if valid, otherwise use default
+     * @param fetchedColor Color fetched from config (may be null/undefined/invalid)
+     * @param type Color type
+     * @param defaultColor Default color to use as fallback
+     */
+    private applyColorOrDefault;
+    /**
+     * Set color and generate full palette (900 -> 50)
+     * @param color Hex color value (e.g., '#006BDF')
+     * @param type Type of color ('primary' | 'secondary' | 'brand')
+     */
+    private setColorPalette;
+    /**
+     * Generate color palette from base color
+     * Creates all shades matching system-design.scss $shade-offsets
+     * Uses RGB mix algorithm (mix with white/black) for accurate colors
+     * @param baseColor Hex color string
+     * @returns Object with shade keys and hex color values
+     */
+    private generateColorPalette;
+    /**
+     * Mix base color with white or black
+     * @param baseRgb Base color RGB
+     * @param weight Percentage to mix (-100 to 100)
+     *               Negative = mix with black (darken)
+     *               Positive = mix with white (lighten)
+     * @returns Hex color string
+     */
+    private mixColor;
+    /**
+     * Convert RGB to HEX
+     * @param rgb RGB object
+     * @returns Hex color string
+     */
+    private rgbToHex;
+    /**
+     * Update system design colors dynamically
+     * Call this when user changes theme colors in settings
+     * Only updates colors that are provided and valid
+     * @param colors Object containing colors to update (optional properties)
+     */
+    updateSystemDesignColor(colors: {
+        primaryColor?: string;
+        secondaryColor?: string;
+        brandColor?: string;
+        functionalColor?: string;
+        utilityColor?: string;
+    }): void;
+    /**
+     * Get current theme colors
+     * @returns Object with current brand, primary, secondary, functional, and utility colors
+     */
+    getCurrentColors(): {
+        brand: string;
+        primary: string;
+        secondary: string;
+        functional: string;
+        utility: string;
+    };
+    /**
+     * Reset to default colors
+     */
+    resetToDefaults(): void;
+    /**
+     * Validate hex color format
+     * @param hex Color string to validate
+     * @returns true if valid hex color
+     */
+    private isValidHexColor;
+    /**
+     * Convert HEX to RGB
+     * @param hex Hex color string (e.g., '#006BDF')
+     * @returns RGB object or null if invalid
+     */
+    private hexToRgb;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FisDsService, [{ optional: true; }]>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<FisDsService>;
+}

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "dynamic-ds",
+  "version": "1.0.0",
+  "description": "A fully dynamic Design System Core Library for Angular",
+  "author": "Lê Minh Bảo <leminhbao.work@gmail.com>",
+  "contributors": [
+    {
+      "name": "Hoàng Phi Hùng",
+      "email": "hoangphihung4403@gmail.com"
+    }
+  ],
+  "keywords": [
+    "angular",
+    "design-system",
+    "theme",
+    "scss",
+    "dynamic",
+    "ui-kit"
+  ],
+  "license": "MIT",
+  "peerDependencies": {
+    "@angular/common": "^14.0.0",
+    "@angular/core": "^14.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/dynamic-ds.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./fesm2022/dynamic-ds.mjs"
+    }
+  }
+}

package/public-api.d.ts

@@ -0,0 +1,3 @@
+export * from './lib/fis-ds.service';
+export * from './lib/fis-ds.component';
+export * from './lib/fis-ds.config';