mis-crystal-design-system 18.0.21 → 18.0.22-test-dynamic-theme

package/fesm2022/mis-crystal-design-system-dynamic-theme.mjs

@@ -0,0 +1,313 @@
+import * as i0 from '@angular/core';
+import { Injectable, NgModule } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+
+var BrandingTypes;
+(function (BrandingTypes) {
+    BrandingTypes.defaultTheme = {
+        // Brand
+        brandPrimary: "#0937B2",
+        brandPrimaryLight: "#3C68D0",
+        brandPrimaryDark: "#062A99",
+        brandPrimaryDarker: "#041F80",
+        brandPrimaryLighter: "#638FE7",
+        brandPrimaryLightest: "#CBDDFB",
+        brandPrimaryHover: "#F0F3FA",
+        brandPrimaryActive: "#DAE1F3",
+        brandSecondary: "#ED711C",
+        brandSecondaryLight: "#F09E65",
+        brandSecondaryDark: "#B23600",
+        brandSecondaryLighter: "#FFC6F2",
+        brandAccent: "#10ADAE",
+        brandAccentLight: "#16CBBC",
+        brandAccentDark: "#035F6B",
+        brandAccentLighter: "#ACDADA",
+        // Semantic
+        brandSuccess: "#38AF49",
+        brandSuccessLight: "#4CAF50",
+        brandSuccessDark: "#216531",
+        brandSuccessLighter: "#E4F5E9",
+        brandSuccessLightest: "#F1FFF3",
+        brandError: "#B00020",
+        brandErrorLight: "#F04E4E",
+        brandErrorDark: "#A60060",
+        brandErrorLighter: "#FAE1EA",
+        brandErrorLightest: "#FDF2F2",
+        brandWarning: "#FF9D00",
+        brandWarningLight: "#D4900C",
+        brandWarningDark: "#624000",
+        brandWarningLighter: "#F4E7C3",
+        brandWarningLightest: "#FAEFED",
+        brandInfo: "#0091FF",
+        brandInfoLight: "#35A1FF",
+        brandInfoDark: "#0087B2",
+        brandInfoLighter: "#CFECF9",
+        // Text
+        textPrimary: "#181F33",
+        textSecondary: "#6A737D",
+        textTertiary: "#929DAB",
+        textDisabled: "#C8CDD3",
+        textPrimary87: "rgba(24, 31, 51, 0.87)",
+        textPrimary60: "rgba(24, 31, 51, 0.60)",
+        textPrimary38: "rgba(24, 31, 51, 0.38)",
+        textPrimary12: "rgba(24, 31, 51, 0.12)",
+        // Background
+        bgPrimary: "#FFFFFF",
+        bgSecondary: "#FAFAFA",
+        bgTertiary: "#F5F5F5",
+        bgOverlay: "rgba(0, 0, 0, 0.32)",
+        bgOverlayLight: "rgba(0, 0, 0, 0.12)",
+        bgOverlayLighter: "rgba(0, 0, 0, 0.08)",
+        bgOverlayLightest: "rgba(0, 0, 0, 0.04)",
+        // Border
+        borderPrimary: "#E0E0E0",
+        borderSecondary: "#D6DCE2",
+        borderTertiary: "#C8CDD3",
+        borderLight: "#F1F4F8",
+        borderPrimary12: "rgba(0, 0, 0, 0.12)",
+        borderPrimary08: "rgba(0, 0, 0, 0.08)",
+        borderPrimary06: "rgba(0, 0, 0, 0.06)",
+        // Shadows
+        shadowPrimary: "rgba(0, 0, 0, 0.12)",
+        shadowSecondary: "rgba(0, 0, 0, 0.08)",
+        shadowTertiary: "rgba(0, 0, 0, 0.04)",
+        shadowLight: "rgba(0, 0, 0, 0.06)",
+        // Status
+        statusAvailable: "#929DAB",
+        statusUnavailable: "#CCD3DA",
+        statusHotseat: "#857BFF",
+        statusMultiteam: "#10ADAE",
+        statusSelected: "#10ADAE",
+        statusUpcoming: "#D4900C",
+        statusRoom: "#38AF49",
+        statusRoomBooked: "#B23600",
+        statusRoomUnavailable: "#181F33",
+        // Team
+        teamColor1: "#F8C52E",
+        teamColor2: "#FA8E20",
+        teamColor3: "#987CDD",
+        teamColor4: "#16CBBC",
+        teamColor5: "#E65010",
+        teamColor6: "#A60060",
+        teamColor7: "#ED323B",
+        teamColor8: "#35A1FF",
+        teamColor9: "#80D348",
+    };
+})(BrandingTypes || (BrandingTypes = {}));
+
+class DynamicThemeService {
+    constructor() {
+        this.currentThemeSubject = new BehaviorSubject(BrandingTypes.defaultTheme);
+        this.currentTheme$ = this.currentThemeSubject.asObservable();
+        // Initialize with default theme on service creation
+        this.applyTheme(BrandingTypes.defaultTheme);
+    }
+    /**
+     * Apply a complete theme configuration to the root element
+     * @param theme - ThemeColors object containing all color values
+     */
+    applyTheme(theme) {
+        const root = document.documentElement;
+        Object.entries(theme).forEach(([camelName, value]) => {
+            const cssVar = `--${this.camelToKebabCase(camelName)}`;
+            root.style.setProperty(cssVar, String(value));
+        });
+        // Update the current theme subject
+        this.currentThemeSubject.next(theme);
+    }
+    /**
+     * Apply partial theme updates (only specified colors will be updated)
+     * @param partialTheme - Partial ThemeColors object with only the colors to update
+     */
+    applyPartialTheme(partialTheme) {
+        const root = document.documentElement;
+        Object.entries(partialTheme).forEach(([camelName, value]) => {
+            if (value !== undefined) {
+                const cssVar = `--${this.camelToKebabCase(camelName)}`;
+                root.style.setProperty(cssVar, String(value));
+            }
+        });
+        // Update the current theme with merged values
+        const currentTheme = this.currentThemeSubject.value;
+        const updatedTheme = { ...currentTheme, ...partialTheme };
+        this.currentThemeSubject.next(updatedTheme);
+    }
+    /**
+     * Set a single color property
+     * @param colorKey - The camelCase key of the color property
+     * @param colorValue - The color value (hex, rgb, rgba, etc.)
+     */
+    setColorProperty(colorKey, colorValue) {
+        const root = document.documentElement;
+        const cssVar = `--${this.camelToKebabCase(colorKey)}`;
+        root.style.setProperty(cssVar, colorValue);
+        // Update the current theme
+        const currentTheme = this.currentThemeSubject.value;
+        const updatedTheme = { ...currentTheme, [colorKey]: colorValue };
+        this.currentThemeSubject.next(updatedTheme);
+    }
+    /**
+     * Get the current theme colors
+     * @returns Current ThemeColors object
+     */
+    getCurrentTheme() {
+        return this.currentThemeSubject.value;
+    }
+    /**
+     * Get a specific color value from the current theme
+     * @param colorKey - The camelCase key of the color property
+     * @returns The color value as string
+     */
+    getColorProperty(colorKey) {
+        return this.currentThemeSubject.value[colorKey];
+    }
+    /**
+     * Reset theme to default values
+     */
+    resetToDefault() {
+        this.applyTheme(BrandingTypes.defaultTheme);
+    }
+    /**
+     * Remove a specific CSS custom property from the root element
+     * @param colorKey - The camelCase key of the color property to remove
+     */
+    removeColorProperty(colorKey) {
+        const root = document.documentElement;
+        const cssVar = `--${this.camelToKebabCase(colorKey)}`;
+        root.style.removeProperty(cssVar);
+    }
+    /**
+     * Get all CSS custom properties currently set on the root element
+     * @returns Object with CSS variable names as keys and their values
+     */
+    getAllCSSVariables() {
+        const root = document.documentElement;
+        const computedStyle = getComputedStyle(root);
+        const cssVars = {};
+        // Get all CSS custom properties that start with our prefix
+        for (let i = 0; i < computedStyle.length; i++) {
+            const property = computedStyle[i];
+            if (property.startsWith('--brand-') ||
+                property.startsWith('--text-') ||
+                property.startsWith('--bg-') ||
+                property.startsWith('--border-') ||
+                property.startsWith('--shadow-') ||
+                property.startsWith('--status-') ||
+                property.startsWith('--team-color-')) {
+                cssVars[property] = computedStyle.getPropertyValue(property).trim();
+            }
+        }
+        return cssVars;
+    }
+    /**
+     * Apply theme with validation
+     * @param theme - ThemeColors object to validate and apply
+     * @returns boolean indicating if the theme was successfully applied
+     */
+    applyThemeWithValidation(theme) {
+        try {
+            // Basic validation - check if all required properties exist
+            const requiredKeys = Object.keys(BrandingTypes.defaultTheme);
+            const themeKeys = Object.keys(theme);
+            const missingKeys = requiredKeys.filter(key => !themeKeys.includes(key));
+            if (missingKeys.length > 0) {
+                console.warn('DynamicThemeService: Missing theme properties:', missingKeys);
+                // Apply with default values for missing keys
+                const completeTheme = { ...BrandingTypes.defaultTheme, ...theme };
+                this.applyTheme(completeTheme);
+                return false;
+            }
+            this.applyTheme(theme);
+            return true;
+        }
+        catch (error) {
+            console.error('DynamicThemeService: Error applying theme:', error);
+            return false;
+        }
+    }
+    /**
+     * Convert camelCase to kebab-case for CSS custom properties
+     * @param camelCase - The camelCase string to convert
+     * @returns kebab-case string
+     */
+    camelToKebabCase(camelCase) {
+        return camelCase.replace(/([A-Z])/g, '-$1').toLowerCase();
+    }
+    /**
+     * Convert kebab-case to camelCase
+     * @param kebabCase - The kebab-case string to convert
+     * @returns camelCase string
+     */
+    kebabToCamelCase(kebabCase) {
+        return kebabCase.replace(/-([a-z])/g, (match, letter) => letter.toUpperCase());
+    }
+    /**
+     * Create a theme preset from current applied theme
+     * @param presetName - Name for the theme preset
+     * @returns Theme preset object
+     */
+    createThemePreset(presetName) {
+        return {
+            name: presetName,
+            theme: { ...this.getCurrentTheme() }
+        };
+    }
+    /**
+     * Export current theme as JSON string
+     * @returns JSON string representation of current theme
+     */
+    exportThemeAsJSON() {
+        return JSON.stringify(this.getCurrentTheme(), null, 2);
+    }
+    /**
+     * Import theme from JSON string
+     * @param jsonString - JSON string representation of theme
+     * @returns boolean indicating success
+     */
+    importThemeFromJSON(jsonString) {
+        try {
+            const theme = JSON.parse(jsonString);
+            return this.applyThemeWithValidation(theme);
+        }
+        catch (error) {
+            console.error('DynamicThemeService: Error importing theme from JSON:', error);
+            return false;
+        }
+    }
+    static { this.ɵfac = function DynamicThemeService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || DynamicThemeService)(); }; }
+    static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: DynamicThemeService, factory: DynamicThemeService.ɵfac, providedIn: 'root' }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DynamicThemeService, [{
+        type: Injectable,
+        args: [{
+                providedIn: 'root'
+            }]
+    }], () => [], null); })();
+
+class DynamicThemeModule {
+    constructor(themeService) {
+        this.themeService = themeService;
+        // Initialize the theme service when module is loaded
+        // This ensures the default theme is applied
+    }
+    static { this.ɵfac = function DynamicThemeModule_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || DynamicThemeModule)(i0.ɵɵinject(DynamicThemeService)); }; }
+    static { this.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: DynamicThemeModule }); }
+    static { this.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ providers: [
+            DynamicThemeService
+        ] }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DynamicThemeModule, [{
+        type: NgModule,
+        args: [{
+                providers: [
+                    DynamicThemeService
+                ]
+            }]
+    }], () => [{ type: DynamicThemeService }], null); })();
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BrandingTypes, DynamicThemeModule, DynamicThemeService };
+//# sourceMappingURL=mis-crystal-design-system-dynamic-theme.mjs.map

package/fesm2022/mis-crystal-design-system-dynamic-theme.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"mis-crystal-design-system-dynamic-theme.mjs","sources":["../../../projects/mis-components/dynamic-theme/branding.types.ts","../../../projects/mis-components/dynamic-theme/dynamic-theme.service.ts","../../../projects/mis-components/dynamic-theme/dynamic-theme.module.ts","../../../projects/mis-components/dynamic-theme/mis-crystal-design-system-dynamic-theme.ts"],"sourcesContent":["export namespace BrandingTypes {\n\n  export interface ThemeColors {\n    // Brand\n    brandPrimary: string;\n    brandPrimaryLight: string;\n    brandPrimaryDark: string;\n    brandPrimaryDarker: string;\n    brandPrimaryLighter: string;\n    brandPrimaryLightest: string;\n    brandPrimaryHover: string;\n    brandPrimaryActive: string;\n\n    brandSecondary: string;\n    brandSecondaryLight: string;\n    brandSecondaryDark: string;\n    brandSecondaryLighter: string;\n\n    brandAccent: string;\n    brandAccentLight: string;\n    brandAccentDark: string;\n    brandAccentLighter: string;\n\n    // Semantic\n    brandSuccess: string;\n    brandSuccessLight: string;\n    brandSuccessDark: string;\n    brandSuccessLighter: string;\n    brandSuccessLightest: string;\n\n    brandError: string;\n    brandErrorLight: string;\n    brandErrorDark: string;\n    brandErrorLighter: string;\n    brandErrorLightest: string;\n\n    brandWarning: string;\n    brandWarningLight: string;\n    brandWarningDark: string;\n    brandWarningLighter: string;\n    brandWarningLightest: string;\n\n    brandInfo: string;\n    brandInfoLight: string;\n    brandInfoDark: string;\n    brandInfoLighter: string;\n\n    // Text\n    textPrimary: string;\n    textSecondary: string;\n    textTertiary: string;\n    textDisabled: string;\n\n    textPrimary87: string;\n    textPrimary60: string;\n    textPrimary38: string;\n    textPrimary12: string;\n\n    // Background\n    bgPrimary: string;\n    bgSecondary: string;\n    bgTertiary: string;\n    bgOverlay: string;\n    bgOverlayLight: string;\n    bgOverlayLighter: string;\n    bgOverlayLightest: string;\n\n    // Border\n    borderPrimary: string;\n    borderSecondary: string;\n    borderTertiary: string;\n    borderLight: string;\n    borderPrimary12: string;\n    borderPrimary08: string;\n    borderPrimary06: string;\n\n    // Shadows\n    shadowPrimary: string;\n    shadowSecondary: string;\n    shadowTertiary: string;\n    shadowLight: string;\n\n    // Status\n    statusAvailable: string;\n    statusUnavailable: string;\n    statusHotseat: string;\n    statusMultiteam: string;\n    statusSelected: string;\n    statusUpcoming: string;\n    statusRoom: string;\n    statusRoomBooked: string;\n    statusRoomUnavailable: string;\n\n    // Team\n    teamColor1: string;\n    teamColor2: string;\n    teamColor3: string;\n    teamColor4: string;\n    teamColor5: string;\n    teamColor6: string;\n    teamColor7: string;\n    teamColor8: string;\n    teamColor9: string;\n  }\n  \n  export const defaultTheme: ThemeColors = {\n    // Brand\n    brandPrimary: \"#0937B2\",\n    brandPrimaryLight: \"#3C68D0\",\n    brandPrimaryDark: \"#062A99\",\n    brandPrimaryDarker: \"#041F80\",\n    brandPrimaryLighter: \"#638FE7\",\n    brandPrimaryLightest: \"#CBDDFB\",\n    brandPrimaryHover: \"#F0F3FA\",\n    brandPrimaryActive: \"#DAE1F3\",\n  \n    brandSecondary: \"#ED711C\",\n    brandSecondaryLight: \"#F09E65\",\n    brandSecondaryDark: \"#B23600\",\n    brandSecondaryLighter: \"#FFC6F2\",\n  \n    brandAccent: \"#10ADAE\",\n    brandAccentLight: \"#16CBBC\",\n    brandAccentDark: \"#035F6B\",\n    brandAccentLighter: \"#ACDADA\",\n  \n    // Semantic\n    brandSuccess: \"#38AF49\",\n    brandSuccessLight: \"#4CAF50\",\n    brandSuccessDark: \"#216531\",\n    brandSuccessLighter: \"#E4F5E9\",\n    brandSuccessLightest: \"#F1FFF3\",\n  \n    brandError: \"#B00020\",\n    brandErrorLight: \"#F04E4E\",\n    brandErrorDark: \"#A60060\",\n    brandErrorLighter: \"#FAE1EA\",\n    brandErrorLightest: \"#FDF2F2\",\n  \n    brandWarning: \"#FF9D00\",\n    brandWarningLight: \"#D4900C\",\n    brandWarningDark: \"#624000\",\n    brandWarningLighter: \"#F4E7C3\",\n    brandWarningLightest: \"#FAEFED\",\n  \n    brandInfo: \"#0091FF\",\n    brandInfoLight: \"#35A1FF\",\n    brandInfoDark: \"#0087B2\",\n    brandInfoLighter: \"#CFECF9\",\n  \n    // Text\n    textPrimary: \"#181F33\",\n    textSecondary: \"#6A737D\",\n    textTertiary: \"#929DAB\",\n    textDisabled: \"#C8CDD3\",\n  \n    textPrimary87: \"rgba(24, 31, 51, 0.87)\",\n    textPrimary60: \"rgba(24, 31, 51, 0.60)\",\n    textPrimary38: \"rgba(24, 31, 51, 0.38)\",\n    textPrimary12: \"rgba(24, 31, 51, 0.12)\",\n  \n    // Background\n    bgPrimary: \"#FFFFFF\",\n    bgSecondary: \"#FAFAFA\",\n    bgTertiary: \"#F5F5F5\",\n    bgOverlay: \"rgba(0, 0, 0, 0.32)\",\n    bgOverlayLight: \"rgba(0, 0, 0, 0.12)\",\n    bgOverlayLighter: \"rgba(0, 0, 0, 0.08)\",\n    bgOverlayLightest: \"rgba(0, 0, 0, 0.04)\",\n  \n    // Border\n    borderPrimary: \"#E0E0E0\",\n    borderSecondary: \"#D6DCE2\",\n    borderTertiary: \"#C8CDD3\",\n    borderLight: \"#F1F4F8\",\n    borderPrimary12: \"rgba(0, 0, 0, 0.12)\",\n    borderPrimary08: \"rgba(0, 0, 0, 0.08)\",\n    borderPrimary06: \"rgba(0, 0, 0, 0.06)\",\n  \n    // Shadows\n    shadowPrimary: \"rgba(0, 0, 0, 0.12)\",\n    shadowSecondary: \"rgba(0, 0, 0, 0.08)\",\n    shadowTertiary: \"rgba(0, 0, 0, 0.04)\",\n    shadowLight: \"rgba(0, 0, 0, 0.06)\",\n  \n    // Status\n    statusAvailable: \"#929DAB\",\n    statusUnavailable: \"#CCD3DA\",\n    statusHotseat: \"#857BFF\",\n    statusMultiteam: \"#10ADAE\",\n    statusSelected: \"#10ADAE\",\n    statusUpcoming: \"#D4900C\",\n    statusRoom: \"#38AF49\",\n    statusRoomBooked: \"#B23600\",\n    statusRoomUnavailable: \"#181F33\",\n  \n    // Team\n    teamColor1: \"#F8C52E\",\n    teamColor2: \"#FA8E20\",\n    teamColor3: \"#987CDD\",\n    teamColor4: \"#16CBBC\",\n    teamColor5: \"#E65010\",\n    teamColor6: \"#A60060\",\n    teamColor7: \"#ED323B\",\n    teamColor8: \"#35A1FF\",\n    teamColor9: \"#80D348\",\n  };\n}","import { Injectable } from '@angular/core';\nimport { BehaviorSubject, Observable } from 'rxjs';\nimport { BrandingTypes } from './branding.types';\n\n@Injectable({\n  providedIn: 'root'\n})\nexport class DynamicThemeService {\n  private currentThemeSubject = new BehaviorSubject<BrandingTypes.ThemeColors>(BrandingTypes.defaultTheme);\n  public currentTheme$: Observable<BrandingTypes.ThemeColors> = this.currentThemeSubject.asObservable();\n\n  constructor() {\n    // Initialize with default theme on service creation\n    this.applyTheme(BrandingTypes.defaultTheme);\n  }\n\n  /**\n   * Apply a complete theme configuration to the root element\n   * @param theme - ThemeColors object containing all color values\n   */\n  applyTheme(theme: BrandingTypes.ThemeColors): void {\n    const root = document.documentElement;\n    \n    Object.entries(theme).forEach(([camelName, value]) => {\n      const cssVar = `--${this.camelToKebabCase(camelName)}`;\n      root.style.setProperty(cssVar, String(value));\n    });\n\n    // Update the current theme subject\n    this.currentThemeSubject.next(theme);\n  }\n\n  /**\n   * Apply partial theme updates (only specified colors will be updated)\n   * @param partialTheme - Partial ThemeColors object with only the colors to update\n   */\n  applyPartialTheme(partialTheme: Partial<BrandingTypes.ThemeColors>): void {\n    const root = document.documentElement;\n    \n    Object.entries(partialTheme).forEach(([camelName, value]) => {\n      if (value !== undefined) {\n        const cssVar = `--${this.camelToKebabCase(camelName)}`;\n        root.style.setProperty(cssVar, String(value));\n      }\n    });\n\n    // Update the current theme with merged values\n    const currentTheme = this.currentThemeSubject.value;\n    const updatedTheme = { ...currentTheme, ...partialTheme };\n    this.currentThemeSubject.next(updatedTheme);\n  }\n\n  /**\n   * Set a single color property\n   * @param colorKey - The camelCase key of the color property\n   * @param colorValue - The color value (hex, rgb, rgba, etc.)\n   */\n  setColorProperty(colorKey: keyof BrandingTypes.ThemeColors, colorValue: string): void {\n    const root = document.documentElement;\n    const cssVar = `--${this.camelToKebabCase(colorKey)}`;\n    root.style.setProperty(cssVar, colorValue);\n\n    // Update the current theme\n    const currentTheme = this.currentThemeSubject.value;\n    const updatedTheme = { ...currentTheme, [colorKey]: colorValue };\n    this.currentThemeSubject.next(updatedTheme);\n  }\n\n  /**\n   * Get the current theme colors\n   * @returns Current ThemeColors object\n   */\n  getCurrentTheme(): BrandingTypes.ThemeColors {\n    return this.currentThemeSubject.value;\n  }\n\n  /**\n   * Get a specific color value from the current theme\n   * @param colorKey - The camelCase key of the color property\n   * @returns The color value as string\n   */\n  getColorProperty(colorKey: keyof BrandingTypes.ThemeColors): string {\n    return this.currentThemeSubject.value[colorKey];\n  }\n\n  /**\n   * Reset theme to default values\n   */\n  resetToDefault(): void {\n    this.applyTheme(BrandingTypes.defaultTheme);\n  }\n\n  /**\n   * Remove a specific CSS custom property from the root element\n   * @param colorKey - The camelCase key of the color property to remove\n   */\n  removeColorProperty(colorKey: keyof BrandingTypes.ThemeColors): void {\n    const root = document.documentElement;\n    const cssVar = `--${this.camelToKebabCase(colorKey)}`;\n    root.style.removeProperty(cssVar);\n  }\n\n  /**\n   * Get all CSS custom properties currently set on the root element\n   * @returns Object with CSS variable names as keys and their values\n   */\n  getAllCSSVariables(): Record<string, string> {\n    const root = document.documentElement;\n    const computedStyle = getComputedStyle(root);\n    const cssVars: Record<string, string> = {};\n\n    // Get all CSS custom properties that start with our prefix\n    for (let i = 0; i < computedStyle.length; i++) {\n      const property = computedStyle[i];\n      if (property.startsWith('--brand-') || \n          property.startsWith('--text-') || \n          property.startsWith('--bg-') || \n          property.startsWith('--border-') || \n          property.startsWith('--shadow-') || \n          property.startsWith('--status-') || \n          property.startsWith('--team-color-')) {\n        cssVars[property] = computedStyle.getPropertyValue(property).trim();\n      }\n    }\n\n    return cssVars;\n  }\n\n  /**\n   * Apply theme with validation\n   * @param theme - ThemeColors object to validate and apply\n   * @returns boolean indicating if the theme was successfully applied\n   */\n  applyThemeWithValidation(theme: BrandingTypes.ThemeColors): boolean {\n    try {\n      // Basic validation - check if all required properties exist\n      const requiredKeys = Object.keys(BrandingTypes.defaultTheme) as (keyof BrandingTypes.ThemeColors)[];\n      const themeKeys = Object.keys(theme) as (keyof BrandingTypes.ThemeColors)[];\n      \n      const missingKeys = requiredKeys.filter(key => !themeKeys.includes(key));\n      \n      if (missingKeys.length > 0) {\n        console.warn('DynamicThemeService: Missing theme properties:', missingKeys);\n        // Apply with default values for missing keys\n        const completeTheme = { ...BrandingTypes.defaultTheme, ...theme };\n        this.applyTheme(completeTheme);\n        return false;\n      }\n\n      this.applyTheme(theme);\n      return true;\n    } catch (error) {\n      console.error('DynamicThemeService: Error applying theme:', error);\n      return false;\n    }\n  }\n\n  /**\n   * Convert camelCase to kebab-case for CSS custom properties\n   * @param camelCase - The camelCase string to convert\n   * @returns kebab-case string\n   */\n  private camelToKebabCase(camelCase: string): string {\n    return camelCase.replace(/([A-Z])/g, '-$1').toLowerCase();\n  }\n\n  /**\n   * Convert kebab-case to camelCase\n   * @param kebabCase - The kebab-case string to convert\n   * @returns camelCase string\n   */\n  private kebabToCamelCase(kebabCase: string): string {\n    return kebabCase.replace(/-([a-z])/g, (match, letter) => letter.toUpperCase());\n  }\n\n  /**\n   * Create a theme preset from current applied theme\n   * @param presetName - Name for the theme preset\n   * @returns Theme preset object\n   */\n  createThemePreset(presetName: string): { name: string; theme: BrandingTypes.ThemeColors } {\n    return {\n      name: presetName,\n      theme: { ...this.getCurrentTheme() }\n    };\n  }\n\n  /**\n   * Export current theme as JSON string\n   * @returns JSON string representation of current theme\n   */\n  exportThemeAsJSON(): string {\n    return JSON.stringify(this.getCurrentTheme(), null, 2);\n  }\n\n  /**\n   * Import theme from JSON string\n   * @param jsonString - JSON string representation of theme\n   * @returns boolean indicating success\n   */\n  importThemeFromJSON(jsonString: string): boolean {\n    try {\n      const theme = JSON.parse(jsonString) as BrandingTypes.ThemeColors;\n      return this.applyThemeWithValidation(theme);\n    } catch (error) {\n      console.error('DynamicThemeService: Error importing theme from JSON:', error);\n      return false;\n    }\n  }\n}\n","import { NgModule } from '@angular/core';\nimport { DynamicThemeService } from './dynamic-theme.service';\n\n@NgModule({\n  providers: [\n    DynamicThemeService\n  ]\n})\nexport class DynamicThemeModule {\n  constructor(private themeService: DynamicThemeService) {\n    // Initialize the theme service when module is loaded\n    // This ensures the default theme is applied\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1.DynamicThemeService"],"mappings":"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"}

package/fesm2022/mis-crystal-design-system-fab.mjs

@@ -100,7 +100,7 @@ class FabComponent {
             i0.ɵɵtemplate(0, FabComponent_div_0_Template, 5, 5, "div", 0);
         } if (rf & 2) {
             i0.ɵɵproperty("ngIf", ctx.show);
-        } }, dependencies: [i1.NgForOf, i1.NgIf, i1.NgStyle], styles: [".fab-wrapper[_ngcontent-%COMP%]{position:fixed;right:24px;bottom:24px;z-index:1000}.fab-wrapper[_ngcontent-%COMP%]   .fab-item[_ngcontent-%COMP%]{position:relative;padding:0 0 16px 8px}.fab-wrapper[_ngcontent-%COMP%]   .fab-item[_ngcontent-%COMP%]   .fab-tooltip[_ngcontent-%COMP%]{position:absolute;background-color:#181f33;border-radius:4px;color:#fff;padding:8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;right:100%;top:calc(50% - 8px);transform:translateY(-50%)}.fab-wrapper[_ngcontent-%COMP%]   .fab-item[_ngcontent-%COMP%]   .fab-button[_ngcontent-%COMP%]{width:40px;height:40px;cursor:pointer;border-radius:50%;display:flex;justify-content:center;align-items:center}.fab-wrapper[_ngcontent-%COMP%]   .fab-container[_ngcontent-%COMP%]{border-radius:50%;cursor:pointer;display:flex;justify-content:center;align-items:center;width:56px;height:56px}.add-img[_ngcontent-%COMP%]{height:24px;width:24px}"], data: { animation: [
+        } }, dependencies: [i1.NgForOf, i1.NgIf, i1.NgStyle], styles: [".fab-wrapper[_ngcontent-%COMP%]{position:fixed;right:24px;bottom:24px;z-index:1000}.fab-wrapper[_ngcontent-%COMP%]   .fab-item[_ngcontent-%COMP%]{position:relative;padding:0 0 16px 8px}.fab-wrapper[_ngcontent-%COMP%]   .fab-item[_ngcontent-%COMP%]   .fab-tooltip[_ngcontent-%COMP%]{position:absolute;background-color:var(--text-primary);border-radius:4px;color:var(--bg-primary);padding:8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;right:100%;top:calc(50% - 8px);transform:translateY(-50%)}.fab-wrapper[_ngcontent-%COMP%]   .fab-item[_ngcontent-%COMP%]   .fab-button[_ngcontent-%COMP%]{width:40px;height:40px;cursor:pointer;border-radius:50%;display:flex;justify-content:center;align-items:center}.fab-wrapper[_ngcontent-%COMP%]   .fab-container[_ngcontent-%COMP%]{border-radius:50%;cursor:pointer;display:flex;justify-content:center;align-items:center;width:56px;height:56px}.add-img[_ngcontent-%COMP%]{height:24px;width:24px}"], data: { animation: [
                 trigger("slideUpFab", [
                     transition(":enter", [
                         style({ transform: "translateY(50px)", opacity: 0 }),
@@ -132,7 +132,7 @@ class FabComponent {
                         transition("rotated => default", animate("300ms ease-out")),
                         transition("default => rotated", animate("200ms ease-in"))
                     ])
-                ], template: "<div class=\"fab-wrapper\" *ngIf=\"show\">\n  <div class=\"fab-items\" *ngIf=\"isOpen\" @slideUpFab>\n    <div class=\"fab-item\" *ngFor=\"let item of items.reverse(); let i = index\" (click)=\"clickItem(item)\">\n      <div *ngIf=\"item.label\" class=\"fab-tooltip\">\n        {{ item.label }}\n      </div>\n      <div\n        class=\"fab-button\"\n        [ngStyle]=\"{\n          backgroundColor: item.backgroundColor || '#0937B2'\n        }\"\n      >\n        <img [src]=\"item.icon\" class=\"add-img\" />\n      </div>\n    </div>\n  </div>\n  <div\n    class=\"fab-container\"\n    [ngStyle]=\"{\n      backgroundColor: isOpen ? options.backgroundColorOpened : options.backgroundColorClosed\n    }\"\n    (click)=\"toogleFab()\"\n  >\n    <svg\n      [@rotateButton]=\"isOpen ? 'rotated' : 'default'\"\n      class=\"add-img\"\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M13.1424 5.15607C13.1424 4.51759 12.6313 4 12.0009 4C11.3704 4 10.8594 4.51759 10.8594 5.15607V10.8421H5.14149C4.51106 10.8421 4 11.3597 4 11.9982C4 12.6367 4.51106 13.1543 5.14149 13.1543H10.8594V18.8439C10.8594 19.4824 11.3704 20 12.0009 20C12.6313 20 13.1424 19.4824 13.1424 18.8439V13.1543H18.8585C19.4889 13.1543 20 12.6367 20 11.9982C20 11.3597 19.4889 10.8421 18.8585 10.8421H13.1424V5.15607Z\"\n        fill=\"white\"\n      />\n    </svg>\n  </div>\n</div>\n", styles: [".fab-wrapper{position:fixed;right:24px;bottom:24px;z-index:1000}.fab-wrapper .fab-item{position:relative;padding:0 0 16px 8px}.fab-wrapper .fab-item .fab-tooltip{position:absolute;background-color:#181f33;border-radius:4px;color:#fff;padding:8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;right:100%;top:calc(50% - 8px);transform:translateY(-50%)}.fab-wrapper .fab-item .fab-button{width:40px;height:40px;cursor:pointer;border-radius:50%;display:flex;justify-content:center;align-items:center}.fab-wrapper .fab-container{border-radius:50%;cursor:pointer;display:flex;justify-content:center;align-items:center;width:56px;height:56px}.add-img{height:24px;width:24px}\n"] }]
+                ], template: "<div class=\"fab-wrapper\" *ngIf=\"show\">\n  <div class=\"fab-items\" *ngIf=\"isOpen\" @slideUpFab>\n    <div class=\"fab-item\" *ngFor=\"let item of items.reverse(); let i = index\" (click)=\"clickItem(item)\">\n      <div *ngIf=\"item.label\" class=\"fab-tooltip\">\n        {{ item.label }}\n      </div>\n      <div\n        class=\"fab-button\"\n        [ngStyle]=\"{\n          backgroundColor: item.backgroundColor || '#0937B2'\n        }\"\n      >\n        <img [src]=\"item.icon\" class=\"add-img\" />\n      </div>\n    </div>\n  </div>\n  <div\n    class=\"fab-container\"\n    [ngStyle]=\"{\n      backgroundColor: isOpen ? options.backgroundColorOpened : options.backgroundColorClosed\n    }\"\n    (click)=\"toogleFab()\"\n  >\n    <svg\n      [@rotateButton]=\"isOpen ? 'rotated' : 'default'\"\n      class=\"add-img\"\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M13.1424 5.15607C13.1424 4.51759 12.6313 4 12.0009 4C11.3704 4 10.8594 4.51759 10.8594 5.15607V10.8421H5.14149C4.51106 10.8421 4 11.3597 4 11.9982C4 12.6367 4.51106 13.1543 5.14149 13.1543H10.8594V18.8439C10.8594 19.4824 11.3704 20 12.0009 20C12.6313 20 13.1424 19.4824 13.1424 18.8439V13.1543H18.8585C19.4889 13.1543 20 12.6367 20 11.9982C20 11.3597 19.4889 10.8421 18.8585 10.8421H13.1424V5.15607Z\"\n        fill=\"white\"\n      />\n    </svg>\n  </div>\n</div>\n", styles: [".fab-wrapper{position:fixed;right:24px;bottom:24px;z-index:1000}.fab-wrapper .fab-item{position:relative;padding:0 0 16px 8px}.fab-wrapper .fab-item .fab-tooltip{position:absolute;background-color:var(--text-primary);border-radius:4px;color:var(--bg-primary);padding:8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;right:100%;top:calc(50% - 8px);transform:translateY(-50%)}.fab-wrapper .fab-item .fab-button{width:40px;height:40px;cursor:pointer;border-radius:50%;display:flex;justify-content:center;align-items:center}.fab-wrapper .fab-container{border-radius:50%;cursor:pointer;display:flex;justify-content:center;align-items:center;width:56px;height:56px}.add-img{height:24px;width:24px}\n"] }]
     }], () => [{ type: i0.ElementRef }], { show: [{
             type: Input
         }], options: [{

package/fesm2022/mis-crystal-design-system-fab.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"mis-crystal-design-system-fab.mjs","sources":["../../../projects/mis-components/fab/fab.component.ts","../../../projects/mis-components/fab/fab.component.html","../../../projects/mis-components/fab/fab.module.ts","../../../projects/mis-components/fab/mis-crystal-design-system-fab.ts"],"sourcesContent":["/** @format */\n\nimport { Component, ElementRef, HostListener, Input, OnDestroy, OnInit } from \"@angular/core\";\nimport { trigger, transition, style, animate, state } from \"@angular/animations\";\n\nexport type FabOptions = {\n  backgroundColorClosed?: string;\n  backgroundColorOpened?: string;\n  size?: number;\n};\n\nexport type FabItem = {\n  label?: string;\n  icon: string;\n  backgroundColor?: string;\n  id?: string;\n  click?: () => any;\n};\n\nexport type FabItems = FabItem[];\n\n@Component({\n  selector: \"mis-fab\",\n  templateUrl: \"./fab.component.html\",\n  styleUrls: [\"./fab.component.scss\"],\n  animations: [\n    trigger(\"slideUpFab\", [\n      transition(\":enter\", [\n        style({ transform: \"translateY(50px)\", opacity: 0 }),\n        animate(\"300ms ease-out\", style({ transform: \"translateY(0px)\", opacity: 1 }))\n      ]),\n      transition(\":leave\", [animate(\"200ms ease-out\", style({ transform: \"translateY(70px)\", opacity: 0 }))])\n    ]),\n    trigger(\"rotateButton\", [\n      state(\"default\", style({ transform: \"rotate(0)\" })),\n      state(\"rotated\", style({ transform: \"rotate(45deg)\" })),\n      transition(\"rotated => default\", animate(\"300ms ease-out\")),\n      transition(\"default => rotated\", animate(\"200ms ease-in\"))\n    ])\n  ]\n})\nexport class FabComponent implements OnInit, OnDestroy {\n  @Input() show: boolean = false;\n  @Input() options: FabOptions = {};\n  @Input() items: FabItems = [];\n\n  isOpen: boolean = false;\n\n  constructor(private eRef: ElementRef) {}\n\n  @HostListener(\"document:click\", [\"$event\"])\n  clickout(event) {\n    if (!this.eRef.nativeElement.contains(event.target)) {\n      this.closeFab();\n    }\n  }\n\n  ngOnInit(): void {\n    this.options = {\n      size: 56,\n      backgroundColorClosed: \"#0937B2\",\n      backgroundColorOpened: \"#3a5fc1\",\n      ...this.options\n    };\n  }\n\n  ngOnDestroy(): void {}\n\n  clickItem(item: FabItem) {\n    this.closeFab();\n    item.click();\n  }\n\n  closeFab() {\n    this.isOpen = false;\n  }\n\n  toogleFab() {\n    this.isOpen = !this.isOpen;\n  }\n}\n","<div class=\"fab-wrapper\" *ngIf=\"show\">\n  <div class=\"fab-items\" *ngIf=\"isOpen\" @slideUpFab>\n    <div class=\"fab-item\" *ngFor=\"let item of items.reverse(); let i = index\" (click)=\"clickItem(item)\">\n      <div *ngIf=\"item.label\" class=\"fab-tooltip\">\n        {{ item.label }}\n      </div>\n      <div\n        class=\"fab-button\"\n        [ngStyle]=\"{\n          backgroundColor: item.backgroundColor || '#0937B2'\n        }\"\n      >\n        <img [src]=\"item.icon\" class=\"add-img\" />\n      </div>\n    </div>\n  </div>\n  <div\n    class=\"fab-container\"\n    [ngStyle]=\"{\n      backgroundColor: isOpen ? options.backgroundColorOpened : options.backgroundColorClosed\n    }\"\n    (click)=\"toogleFab()\"\n  >\n    <svg\n      [@rotateButton]=\"isOpen ? 'rotated' : 'default'\"\n      class=\"add-img\"\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M13.1424 5.15607C13.1424 4.51759 12.6313 4 12.0009 4C11.3704 4 10.8594 4.51759 10.8594 5.15607V10.8421H5.14149C4.51106 10.8421 4 11.3597 4 11.9982C4 12.6367 4.51106 13.1543 5.14149 13.1543H10.8594V18.8439C10.8594 19.4824 11.3704 20 12.0009 20C12.6313 20 13.1424 19.4824 13.1424 18.8439V13.1543H18.8585C19.4889 13.1543 20 12.6367 20 11.9982C20 11.3597 19.4889 10.8421 18.8585 10.8421H13.1424V5.15607Z\"\n        fill=\"white\"\n      />\n    </svg>\n  </div>\n</div>\n","import { NgModule, ModuleWithProviders } from \"@angular/core\";\nimport { CommonModule } from \"@angular/common\";\nimport { FabComponent } from \"./fab.component\";\n\n@NgModule({\n  declarations: [FabComponent],\n  imports: [CommonModule],\n  exports: [FabComponent]\n})\nexport class FabModule {\n  static forRoot(): ModuleWithProviders<FabModule> {\n    return { ngModule: FabModule, providers: [] };\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;AAAA;;;ICGM,EAA4C,CAAA,cAAA,CAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,CAAA;IAC1C,EACF,CAAA,MAAA,CAAA,CAAA,CAAA,CAAA;IAAA,EAAM,CAAA,YAAA,EAAA,CAAA;;;IADJ,EACF,CAAA,SAAA,EAAA,CAAA;IADE,EACF,CAAA,kBAAA,CAAA,GAAA,EAAA,OAAA,CAAA,KAAA,EAAA,GAAA,CAAA,CAAA;;;;IAHF,EAAoG,CAAA,cAAA,CAAA,CAAA,EAAA,KAAA,EAAA,CAAA,CAAA,CAAA;AAA1B,IAAA,EAAA,CAAA,UAAA,CAAA,OAAA,EAAA,SAAA,4DAAA,GAAA,EAAA,MAAA,OAAA,GAAA,EAAA,CAAA,aAAA,CAAA,GAAA,CAAA,CAAA,SAAA,CAAA,CAAA,MAAA,MAAA,GAAA,EAAA,CAAA,aAAA,CAAA,CAAA,CAAA,CAAA,CAAA,OAAA,EAAA,CAAA,WAAA,CAAS,yBAAe,CAAC,CAAA,EAAA,CAAA,CAAA;IACjG,EAA4C,CAAA,UAAA,CAAA,CAAA,EAAA,6CAAA,EAAA,CAAA,EAAA,CAAA,EAAA,KAAA,EAAA,CAAA,CAAA,CAAA;IAG5C,EAKC,CAAA,cAAA,CAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,CAAA;IACC,EAAyC,CAAA,SAAA,CAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,CAAA;AAE7C,IADE,iBAAM,EACF,CAAA;;;IAXE,EAAgB,CAAA,SAAA,EAAA,CAAA;IAAhB,EAAgB,CAAA,UAAA,CAAA,MAAA,EAAA,OAAA,CAAA,KAAA,CAAA,CAAA;IAKpB,EAEE,CAAA,SAAA,EAAA,CAAA;IAFF,EAEE,CAAA,UAAA,CAAA,SAAA,EAAA,EAAA,CAAA,eAAA,CAAA,CAAA,EAAA,GAAA,EAAA,OAAA,CAAA,eAAA,IAAA,SAAA,CAAA,CAAA,CAAA;IAEG,EAAiB,CAAA,SAAA,EAAA,CAAA;IAAjB,EAAiB,CAAA,UAAA,CAAA,KAAA,EAAA,OAAA,CAAA,IAAA,EAAA,EAAA,CAAA,aAAA,CAAA,CAAA;;;IAX5B,EAAkD,CAAA,cAAA,CAAA,CAAA,EAAA,KAAA,EAAA,CAAA,CAAA,CAAA;IAChD,EAAoG,CAAA,UAAA,CAAA,CAAA,EAAA,uCAAA,EAAA,CAAA,EAAA,CAAA,EAAA,KAAA,EAAA,CAAA,CAAA,CAAA;IAatG,EAAM,CAAA,YAAA,EAAA,CAAA;;;IAdgC,EAAW,CAAA,UAAA,CAAA,aAAA,EAAA,SAAA,CAAA,CAAA;IACR,EAAoB,CAAA,SAAA,EAAA,CAAA;IAApB,EAAoB,CAAA,UAAA,CAAA,SAAA,EAAA,MAAA,CAAA,KAAA,CAAA,OAAA,EAAA,CAAA,CAAA;;;;IAF/D,EAAsC,CAAA,cAAA,CAAA,CAAA,EAAA,KAAA,EAAA,CAAA,CAAA,CAAA;IACpC,EAAkD,CAAA,UAAA,CAAA,CAAA,EAAA,iCAAA,EAAA,CAAA,EAAA,CAAA,EAAA,KAAA,EAAA,CAAA,CAAA,CAAA;IAelD,EAMC,CAAA,cAAA,CAAA,CAAA,EAAA,KAAA,EAAA,CAAA,CAAA,CAAA;AADC,IAAA,EAAA,CAAA,UAAA,CAAA,OAAA,EAAA,SAAA,gDAAA,GAAA,EAAA,EAAA,CAAA,aAAA,CAAA,GAAA,CAAA,CAAA,CAAA,MAAA,MAAA,GAAA,EAAA,CAAA,aAAA,EAAA,CAAA,CAAA,OAAA,EAAA,CAAA,WAAA,CAAS,kBAAW,CAAC,CAAA,EAAA,CAAA,CAAA;;IAErB,EAQC,CAAA,cAAA,CAAA,CAAA,EAAA,KAAA,EAAA,CAAA,CAAA,CAAA;IACC,EAKE,CAAA,SAAA,CAAA,CAAA,EAAA,MAAA,EAAA,CAAA,CAAA,CAAA;IACJ,EAAM,CAAA,YAAA,EAAA,EACF,EACF,CAAA;;;IAvCoB,EAAY,CAAA,SAAA,EAAA,CAAA;IAAZ,EAAY,CAAA,UAAA,CAAA,MAAA,EAAA,MAAA,CAAA,MAAA,CAAA,CAAA;IAiBlC,EAEE,CAAA,SAAA,EAAA,CAAA;IAFF,EAEE,CAAA,UAAA,CAAA,SAAA,EAAA,EAAA,CAAA,eAAA,CAAA,CAAA,EAAA,GAAA,EAAA,MAAA,CAAA,MAAA,GAAA,MAAA,CAAA,OAAA,CAAA,qBAAA,GAAA,MAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,CAAA,CAAA;IAIA,EAAgD,CAAA,SAAA,EAAA,CAAA;IAAhD,EAAgD,CAAA,UAAA,CAAA,eAAA,EAAA,MAAA,CAAA,MAAA,GAAA,SAAA,GAAA,SAAA,CAAA,CAAA;;MDiBzC,YAAY,CAAA;AAOvB,IAAA,WAAA,CAAoB,IAAgB,EAAA;QAAhB,IAAI,CAAA,IAAA,GAAJ,IAAI,CAAY;QAN3B,IAAI,CAAA,IAAA,GAAY,KAAK,CAAC;QACtB,IAAO,CAAA,OAAA,GAAe,EAAE,CAAC;QACzB,IAAK,CAAA,KAAA,GAAa,EAAE,CAAC;QAE9B,IAAM,CAAA,MAAA,GAAY,KAAK,CAAC;KAEgB;AAGxC,IAAA,QAAQ,CAAC,KAAK,EAAA;AACZ,QAAA,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE;YACnD,IAAI,CAAC,QAAQ,EAAE,CAAC;SACjB;KACF;IAED,QAAQ,GAAA;QACN,IAAI,CAAC,OAAO,GAAG;AACb,YAAA,IAAI,EAAE,EAAE;AACR,YAAA,qBAAqB,EAAE,SAAS;AAChC,YAAA,qBAAqB,EAAE,SAAS;YAChC,GAAG,IAAI,CAAC,OAAO;SAChB,CAAC;KACH;AAED,IAAA,WAAW,MAAW;AAEtB,IAAA,SAAS,CAAC,IAAa,EAAA;QACrB,IAAI,CAAC,QAAQ,EAAE,CAAC;QAChB,IAAI,CAAC,KAAK,EAAE,CAAC;KACd;IAED,QAAQ,GAAA;AACN,QAAA,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;KACrB;IAED,SAAS,GAAA;AACP,QAAA,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;KAC5B;6GAtCU,YAAY,EAAA,EAAA,CAAA,iBAAA,CAAA,EAAA,CAAA,UAAA,CAAA,CAAA,CAAA,EAAA,CAAA,EAAA;oEAAZ,YAAY,EAAA,SAAA,EAAA,CAAA,CAAA,SAAA,CAAA,CAAA,EAAA,YAAA,EAAA,SAAA,yBAAA,CAAA,EAAA,EAAA,GAAA,EAAA,EAAA,IAAA,EAAA,GAAA,CAAA,EAAA;AAAZ,YAAA,EAAA,CAAA,UAAA,CAAA,OAAA,EAAA,SAAA,qCAAA,CAAA,MAAA,EAAA,EAAA,OAAA,oBAAgB,CAAJ,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,CAAA;;YCzCzB,EAAsC,CAAA,UAAA,CAAA,CAAA,EAAA,2BAAA,EAAA,CAAA,EAAA,CAAA,EAAA,KAAA,EAAA,CAAA,CAAA,CAAA;;YAAZ,EAAU,CAAA,UAAA,CAAA,MAAA,EAAA,GAAA,CAAA,IAAA,CAAA,CAAA;ADyBtB,SAAA,EAAA,EAAA,YAAA,EAAA,CAAA,EAAA,CAAA,OAAA,EAAA,EAAA,CAAA,IAAA,EAAA,EAAA,CAAA,OAAA,CAAA,EAAA,MAAA,EAAA,CAAA,y6BAAA,CAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA;gBACV,OAAO,CAAC,YAAY,EAAE;oBACpB,UAAU,CAAC,QAAQ,EAAE;wBACnB,KAAK,CAAC,EAAE,SAAS,EAAE,kBAAkB,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC;AACpD,wBAAA,OAAO,CAAC,gBAAgB,EAAE,KAAK,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC;qBAC/E,CAAC;oBACF,UAAU,CAAC,QAAQ,EAAE,CAAC,OAAO,CAAC,gBAAgB,EAAE,KAAK,CAAC,EAAE,SAAS,EAAE,kBAAkB,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;iBACxG,CAAC;gBACF,OAAO,CAAC,cAAc,EAAE;oBACtB,KAAK,CAAC,SAAS,EAAE,KAAK,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC,CAAC;oBACnD,KAAK,CAAC,SAAS,EAAE,KAAK,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC,CAAC;AACvD,oBAAA,UAAU,CAAC,oBAAoB,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAC;AAC3D,oBAAA,UAAU,CAAC,oBAAoB,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;iBAC3D,CAAC;AACH,aAAA,EAAA,EAAA,CAAA,CAAA,EAAA;;iFAEU,YAAY,EAAA,CAAA;cApBxB,SAAS;AACE,QAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,SAAS,EAGP,UAAA,EAAA;oBACV,OAAO,CAAC,YAAY,EAAE;wBACpB,UAAU,CAAC,QAAQ,EAAE;4BACnB,KAAK,CAAC,EAAE,SAAS,EAAE,kBAAkB,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC;AACpD,4BAAA,OAAO,CAAC,gBAAgB,EAAE,KAAK,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC;yBAC/E,CAAC;wBACF,UAAU,CAAC,QAAQ,EAAE,CAAC,OAAO,CAAC,gBAAgB,EAAE,KAAK,CAAC,EAAE,SAAS,EAAE,kBAAkB,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;qBACxG,CAAC;oBACF,OAAO,CAAC,cAAc,EAAE;wBACtB,KAAK,CAAC,SAAS,EAAE,KAAK,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC,CAAC;wBACnD,KAAK,CAAC,SAAS,EAAE,KAAK,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC,CAAC;AACvD,wBAAA,UAAU,CAAC,oBAAoB,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAC;AAC3D,wBAAA,UAAU,CAAC,oBAAoB,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;qBAC3D,CAAC;AACH,iBAAA,EAAA,QAAA,EAAA,+/CAAA,EAAA,MAAA,EAAA,CAAA,2rBAAA,CAAA,EAAA,CAAA;2CAGQ,IAAI,EAAA,CAAA;kBAAZ,KAAK;YACG,OAAO,EAAA,CAAA;kBAAf,KAAK;YACG,KAAK,EAAA,CAAA;kBAAb,KAAK;YAON,QAAQ,EAAA,CAAA;kBADP,YAAY;mBAAC,gBAAgB,EAAE,CAAC,QAAQ,CAAC,CAAA;;kFAT/B,YAAY,EAAA,EAAA,SAAA,EAAA,cAAA,EAAA,CAAA,CAAA,EAAA,GAAA;;MEhCZ,SAAS,CAAA;AACpB,IAAA,OAAO,OAAO,GAAA;QACZ,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC;KAC/C;0GAHU,SAAS,GAAA,CAAA,EAAA,CAAA,EAAA;mEAAT,SAAS,EAAA,CAAA,CAAA,EAAA;uEAHV,YAAY,CAAA,EAAA,CAAA,CAAA,EAAA;;iFAGX,SAAS,EAAA,CAAA;cALrB,QAAQ;AAAC,QAAA,IAAA,EAAA,CAAA;gBACR,YAAY,EAAE,CAAC,YAAY,CAAC;gBAC5B,OAAO,EAAE,CAAC,YAAY,CAAC;gBACvB,OAAO,EAAE,CAAC,YAAY,CAAC;AACxB,aAAA,CAAA;;AACY,CAAA,YAAA,EAAA,CAAA,OAAA,SAAA,KAAA,WAAA,IAAA,SAAA,KAAA,EAAA,CAAA,kBAAA,CAAA,SAAS,EAJL,EAAA,YAAA,EAAA,CAAA,YAAY,CACjB,EAAA,OAAA,EAAA,CAAA,YAAY,aACZ,YAAY,CAAA,EAAA,CAAA,CAAA,EAAA,GAAA;;ACPxB;;AAEG;;;;"}
+{"version":3,"file":"mis-crystal-design-system-fab.mjs","sources":["../../../projects/mis-components/fab/fab.component.ts","../../../projects/mis-components/fab/fab.component.html","../../../projects/mis-components/fab/fab.module.ts","../../../projects/mis-components/fab/mis-crystal-design-system-fab.ts"],"sourcesContent":["/** @format */\n\nimport { Component, ElementRef, HostListener, Input, OnDestroy, OnInit } from \"@angular/core\";\nimport { trigger, transition, style, animate, state } from \"@angular/animations\";\n\nexport type FabOptions = {\n  backgroundColorClosed?: string;\n  backgroundColorOpened?: string;\n  size?: number;\n};\n\nexport type FabItem = {\n  label?: string;\n  icon: string;\n  backgroundColor?: string;\n  id?: string;\n  click?: () => any;\n};\n\nexport type FabItems = FabItem[];\n\n@Component({\n  selector: \"mis-fab\",\n  templateUrl: \"./fab.component.html\",\n  styleUrls: [\"./fab.component.scss\"],\n  animations: [\n    trigger(\"slideUpFab\", [\n      transition(\":enter\", [\n        style({ transform: \"translateY(50px)\", opacity: 0 }),\n        animate(\"300ms ease-out\", style({ transform: \"translateY(0px)\", opacity: 1 }))\n      ]),\n      transition(\":leave\", [animate(\"200ms ease-out\", style({ transform: \"translateY(70px)\", opacity: 0 }))])\n    ]),\n    trigger(\"rotateButton\", [\n      state(\"default\", style({ transform: \"rotate(0)\" })),\n      state(\"rotated\", style({ transform: \"rotate(45deg)\" })),\n      transition(\"rotated => default\", animate(\"300ms ease-out\")),\n      transition(\"default => rotated\", animate(\"200ms ease-in\"))\n    ])\n  ]\n})\nexport class FabComponent implements OnInit, OnDestroy {\n  @Input() show: boolean = false;\n  @Input() options: FabOptions = {};\n  @Input() items: FabItems = [];\n\n  isOpen: boolean = false;\n\n  constructor(private eRef: ElementRef) {}\n\n  @HostListener(\"document:click\", [\"$event\"])\n  clickout(event) {\n    if (!this.eRef.nativeElement.contains(event.target)) {\n      this.closeFab();\n    }\n  }\n\n  ngOnInit(): void {\n    this.options = {\n      size: 56,\n      backgroundColorClosed: \"#0937B2\",\n      backgroundColorOpened: \"#3a5fc1\",\n      ...this.options\n    };\n  }\n\n  ngOnDestroy(): void {}\n\n  clickItem(item: FabItem) {\n    this.closeFab();\n    item.click();\n  }\n\n  closeFab() {\n    this.isOpen = false;\n  }\n\n  toogleFab() {\n    this.isOpen = !this.isOpen;\n  }\n}\n","<div class=\"fab-wrapper\" *ngIf=\"show\">\n  <div class=\"fab-items\" *ngIf=\"isOpen\" @slideUpFab>\n    <div class=\"fab-item\" *ngFor=\"let item of items.reverse(); let i = index\" (click)=\"clickItem(item)\">\n      <div *ngIf=\"item.label\" class=\"fab-tooltip\">\n        {{ item.label }}\n      </div>\n      <div\n        class=\"fab-button\"\n        [ngStyle]=\"{\n          backgroundColor: item.backgroundColor || '#0937B2'\n        }\"\n      >\n        <img [src]=\"item.icon\" class=\"add-img\" />\n      </div>\n    </div>\n  </div>\n  <div\n    class=\"fab-container\"\n    [ngStyle]=\"{\n      backgroundColor: isOpen ? options.backgroundColorOpened : options.backgroundColorClosed\n    }\"\n    (click)=\"toogleFab()\"\n  >\n    <svg\n      [@rotateButton]=\"isOpen ? 'rotated' : 'default'\"\n      class=\"add-img\"\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M13.1424 5.15607C13.1424 4.51759 12.6313 4 12.0009 4C11.3704 4 10.8594 4.51759 10.8594 5.15607V10.8421H5.14149C4.51106 10.8421 4 11.3597 4 11.9982C4 12.6367 4.51106 13.1543 5.14149 13.1543H10.8594V18.8439C10.8594 19.4824 11.3704 20 12.0009 20C12.6313 20 13.1424 19.4824 13.1424 18.8439V13.1543H18.8585C19.4889 13.1543 20 12.6367 20 11.9982C20 11.3597 19.4889 10.8421 18.8585 10.8421H13.1424V5.15607Z\"\n        fill=\"white\"\n      />\n    </svg>\n  </div>\n</div>\n","import { NgModule, ModuleWithProviders } from \"@angular/core\";\nimport { CommonModule } from \"@angular/common\";\nimport { FabComponent } from \"./fab.component\";\n\n@NgModule({\n  declarations: [FabComponent],\n  imports: [CommonModule],\n  exports: [FabComponent]\n})\nexport class FabModule {\n  static forRoot(): ModuleWithProviders<FabModule> {\n    return { ngModule: FabModule, providers: [] };\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/mis-crystal-design-system-filter.mjs

@@ -425,11 +425,11 @@ class FilterPanelComponent {
             i0.ɵɵtemplate(0, FilterPanelComponent_div_0_Template, 13, 10, "div", 0);
         } if (rf & 2) {
             i0.ɵɵproperty("ngIf", ctx.show);
-        } }, dependencies: [i2.NgForOf, i2.NgIf, i3.ButtonComponent, i4.DefaultValueAccessor, i4.NumberValueAccessor, i4.NgControlStatus, i4.NgControlStatusGroup, i4.MinValidator, i4.FormGroupDirective, i4.FormControlName, i5.MultiSelectDropdownComponent, i6.DropdownComponent, i7.MisInputComponent, i7.MisInputDirective, i8.TzDatepickerDirective, i9.TzDaterangepickerDirective, i10.CheckboxComponent], styles: [".filter-panel-container[_ngcontent-%COMP%]{display:flex;flex-direction:column;height:100%;max-width:100%;min-width:20rem;position:absolute;right:0;background:#fff;top:0;z-index:999;box-shadow:0 0 5px #000000a6;transition:all .3s ease}.filter-panel-container[_ngcontent-%COMP%]   .panel-header[_ngcontent-%COMP%]{display:flex;flex-direction:row;justify-content:space-between;align-items:center;font-weight:700;margin:0 1rem;flex-basis:5%}.filter-panel-container[_ngcontent-%COMP%]   .panel-header[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]{font-size:1.25rem}.filter-panel-container[_ngcontent-%COMP%]   .panel-header[_ngcontent-%COMP%]   .close-icon[_ngcontent-%COMP%]{cursor:pointer;border-radius:50%;transform:scale(1.4);padding:.3rem;transition:all .3s ease}.filter-panel-container[_ngcontent-%COMP%]   .panel-header[_ngcontent-%COMP%]   .close-icon[_ngcontent-%COMP%]:hover{background:#f5f5f5}.filter-panel-container[_ngcontent-%COMP%]   .panel-header[_ngcontent-%COMP%]   .close-icon[_ngcontent-%COMP%]:active{background:#e0e0e0}.filter-panel-container[_ngcontent-%COMP%]   .mat-divider.horizontal[_ngcontent-%COMP%]{margin:1rem}.filters[_ngcontent-%COMP%]{display:flex;flex-direction:column;flex:1;row-gap:.5rem;overflow:auto;padding:0 1rem}.filters[_ngcontent-%COMP%]   .filter[_ngcontent-%COMP%]{display:flex;flex-direction:column}.filters[_ngcontent-%COMP%]   .filter[_ngcontent-%COMP%]   .filter-title[_ngcontent-%COMP%]{color:#6a737d;font-size:.875rem;font-weight:700;line-height:20px;letter-spacing:.25px}.filters[_ngcontent-%COMP%]   .filter[_ngcontent-%COMP%]   .checkbox-row[_ngcontent-%COMP%]{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:.8rem 0}.filters[_ngcontent-%COMP%]   .filter[_ngcontent-%COMP%]   .checkbox-row[_ngcontent-%COMP%]   .checkbox-container[_ngcontent-%COMP%]{display:flex;flex-direction:row;align-items:center;gap:.5rem}.filters[_ngcontent-%COMP%]   .filter[_ngcontent-%COMP%]   .checkbox-row[_ngcontent-%COMP%]   .checkbox-label[_ngcontent-%COMP%]{display:block;width:8rem}.filters[_ngcontent-%COMP%]   .filter[_ngcontent-%COMP%]   .checkbox-row[_ngcontent-%COMP%]     .mat-checkbox-inner-container{width:20px;height:20px}.filters[_ngcontent-%COMP%]   .filter[_ngcontent-%COMP%]   .checkbox-row[_ngcontent-%COMP%]     .mat-checkbox-frame{border-radius:5px}.filters[_ngcontent-%COMP%]   .filter[_ngcontent-%COMP%]   .multiselect-filter[_ngcontent-%COMP%], .filters[_ngcontent-%COMP%]   .filter[_ngcontent-%COMP%]   mis-input[_ngcontent-%COMP%]{padding:.7rem 0}.horizontal-divider[_ngcontent-%COMP%]{display:block;width:100%;height:1px;margin:.5rem 0;background:#e0e0e0}.first[_ngcontent-%COMP%]{margin-top:0}.actions[_ngcontent-%COMP%]{display:flex;flex-direction:row;justify-content:end;align-items:center;gap:1rem;border-top:1px solid #E0E0E0;flex-basis:4%;padding:.5rem}.actions[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]{font-weight:700;border-radius:.5rem;width:6rem}.no-padding[_ngcontent-%COMP%]     .container{padding:0!important}.range-container[_ngcontent-%COMP%]{display:flex;justify-content:space-between;padding:.8rem 0}.range-container[_ngcontent-%COMP%]   .range-inner-container[_ngcontent-%COMP%]{display:flex;flex-direction:column}.range-container[_ngcontent-%COMP%]   .range-inner-container[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]{height:2.2rem;outline:none;border-radius:.375rem;border:1px solid #e0e0e0;width:8rem;padding:0 .5rem}.range-container[_ngcontent-%COMP%]   .range-inner-container[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]{margin-bottom:.2rem}input.ng-invalid.ng-touched[_ngcontent-%COMP%]{border:1px solid red;background-color:#ffe6e6}"], data: { animation: [slideFromRight] } }); }
+        } }, dependencies: [i2.NgForOf, i2.NgIf, i3.ButtonComponent, i4.DefaultValueAccessor, i4.NumberValueAccessor, i4.NgControlStatus, i4.NgControlStatusGroup, i4.MinValidator, i4.FormGroupDirective, i4.FormControlName, i5.MultiSelectDropdownComponent, i6.DropdownComponent, i7.MisInputComponent, i7.MisInputDirective, i8.TzDatepickerDirective, i9.TzDaterangepickerDirective, i10.CheckboxComponent], styles: [".filter-panel-container[_ngcontent-%COMP%]{display:flex;flex-direction:column;height:100%;max-width:100%;min-width:20rem;position:absolute;right:0;background:var(--bg-primary);top:0;z-index:999;box-shadow:0 0 5px #000000a6;transition:all .3s ease}.filter-panel-container[_ngcontent-%COMP%]   .panel-header[_ngcontent-%COMP%]{display:flex;flex-direction:row;justify-content:space-between;align-items:center;font-weight:700;margin:0 1rem;flex-basis:5%}.filter-panel-container[_ngcontent-%COMP%]   .panel-header[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]{font-size:1.25rem}.filter-panel-container[_ngcontent-%COMP%]   .panel-header[_ngcontent-%COMP%]   .close-icon[_ngcontent-%COMP%]{cursor:pointer;border-radius:50%;transform:scale(1.4);padding:.3rem;transition:all .3s ease}.filter-panel-container[_ngcontent-%COMP%]   .panel-header[_ngcontent-%COMP%]   .close-icon[_ngcontent-%COMP%]:hover{background:var(--bg-tertiary)}.filter-panel-container[_ngcontent-%COMP%]   .panel-header[_ngcontent-%COMP%]   .close-icon[_ngcontent-%COMP%]:active{background:var(--border-primary)}.filter-panel-container[_ngcontent-%COMP%]   .mat-divider.horizontal[_ngcontent-%COMP%]{margin:1rem}.filters[_ngcontent-%COMP%]{display:flex;flex-direction:column;flex:1;row-gap:.5rem;overflow:auto;padding:0 1rem}.filters[_ngcontent-%COMP%]   .filter[_ngcontent-%COMP%]{display:flex;flex-direction:column}.filters[_ngcontent-%COMP%]   .filter[_ngcontent-%COMP%]   .filter-title[_ngcontent-%COMP%]{color:var(--text-secondary);font-size:.875rem;font-weight:700;line-height:20px;letter-spacing:.25px}.filters[_ngcontent-%COMP%]   .filter[_ngcontent-%COMP%]   .checkbox-row[_ngcontent-%COMP%]{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:.8rem 0}.filters[_ngcontent-%COMP%]   .filter[_ngcontent-%COMP%]   .checkbox-row[_ngcontent-%COMP%]   .checkbox-container[_ngcontent-%COMP%]{display:flex;flex-direction:row;align-items:center;gap:.5rem}.filters[_ngcontent-%COMP%]   .filter[_ngcontent-%COMP%]   .checkbox-row[_ngcontent-%COMP%]   .checkbox-label[_ngcontent-%COMP%]{display:block;width:8rem}.filters[_ngcontent-%COMP%]   .filter[_ngcontent-%COMP%]   .checkbox-row[_ngcontent-%COMP%]     .mat-checkbox-inner-container{width:20px;height:20px}.filters[_ngcontent-%COMP%]   .filter[_ngcontent-%COMP%]   .checkbox-row[_ngcontent-%COMP%]     .mat-checkbox-frame{border-radius:5px}.filters[_ngcontent-%COMP%]   .filter[_ngcontent-%COMP%]   .multiselect-filter[_ngcontent-%COMP%], .filters[_ngcontent-%COMP%]   .filter[_ngcontent-%COMP%]   mis-input[_ngcontent-%COMP%]{padding:.7rem 0}.horizontal-divider[_ngcontent-%COMP%]{display:block;width:100%;height:1px;margin:.5rem 0;background:var(--border-primary)}.first[_ngcontent-%COMP%]{margin-top:0}.actions[_ngcontent-%COMP%]{display:flex;flex-direction:row;justify-content:end;align-items:center;gap:1rem;border-top:1px solid var(--border-primary);flex-basis:4%;padding:.5rem}.actions[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]{font-weight:700;border-radius:.5rem;width:6rem}.no-padding[_ngcontent-%COMP%]     .container{padding:0!important}.range-container[_ngcontent-%COMP%]{display:flex;justify-content:space-between;padding:.8rem 0}.range-container[_ngcontent-%COMP%]   .range-inner-container[_ngcontent-%COMP%]{display:flex;flex-direction:column}.range-container[_ngcontent-%COMP%]   .range-inner-container[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]{height:2.2rem;outline:none;border-radius:.375rem;border:1px solid var(--border-primary);width:8rem;padding:0 .5rem}.range-container[_ngcontent-%COMP%]   .range-inner-container[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]{margin-bottom:.2rem}input.ng-invalid.ng-touched[_ngcontent-%COMP%]{border:1px solid var(--brand-error);background-color:var(--brand-error-lightest)}"], data: { animation: [slideFromRight] } }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FilterPanelComponent, [{
         type: Component,
-        args: [{ selector: 'mis-filter-panel', animations: [slideFromRight], template: "<div class=\"filter-panel-container\" *ngIf=\"show\" @slideFromRight> \n    <div class=\"panel-header\">\n        <span>Filters</span>\n        <svg class=\"close-icon\" (click)=\"closePanel()\" width=\"25\" height=\"25\" viewBox=\"0 0 25 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <g id=\"ic-navigation-cancel-24\">\n            <path id=\"Union\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.60468 6.64355C8.09036 6.12923 7.25649 6.12923 6.74218 6.64355C6.22787 7.15786 6.22787 7.99173 6.74218 8.50604L10.4938 12.2576L6.7431 16.0083C6.22879 16.5226 6.22879 17.3564 6.7431 17.8708C7.25742 18.3851 8.09129 18.3851 8.6056 17.8708L12.3562 14.1201L16.1068 17.8707C16.6211 18.385 17.455 18.385 17.9693 17.8707C18.4836 17.3564 18.4836 16.5225 17.9693 16.0082L14.2187 12.2576L17.9702 8.50613C18.4845 7.99181 18.4845 7.15794 17.9702 6.64363C17.4559 6.12932 16.622 6.12932 16.1077 6.64363L12.3562 10.3951L8.60468 6.64355Z\" fill=\"#181F33\"/>\n            </g>\n        </svg>            \n    </div>\n    \n    <div class=\"horizontal-divider first\"></div>\n    \n    <div class=\"filters\" [formGroup]=\"filterForm\">\n        <ng-container *ngFor=\"let filter of config; let last = last\">\n            <div class=\"filter\" *ngIf=\"!filter.hidden\">\n                <span class=\"filter-title\">{{filter.title}}</span>\n\n                <ng-container *ngIf=\"filter.type === 'multiSelect'\">\n                    <div class=\"multiselect-filter\">\n                        <mis-multi-select-dropdown class=\"no-padding\" [label]=\"filter.placeholder || 'Select'\" [selectedItems]=\"filterForm.get(filter.key).value\" (onChange)=\"handleSelect($event, filter.key, filter)\" [data]=\"filter.options\" [searchEnabled]=\"true\"\n                            [showSelectedCount]=\"true\" [enableSelectAll]=\"true\"\n                            [hideApplyButton]=\"false\" width=\"100%\" height=\"44px\"></mis-multi-select-dropdown>\n                    </div>\n                </ng-container>\n\n                <ng-container *ngIf=\"filter.type === 'select'\">\n                    <div class=\"multiselect-filter\">\n                        <mis-dropdown [data]=\"filter.options\" [searchEnabled]=\"true\" width=\"100%\" height=\"44px\"\n                                (onChange)=\"handleSelect($event, filter.key, filter)\" [selectedItem]=\"filterForm.get(filter.key).value\">\n                        </mis-dropdown>\n                    </div>\n                </ng-container>\n        \n                <ng-container *ngIf=\"filter.type === 'checkbox'\">\n                    <div class=\"checkbox-row\">\n                        <div *ngFor=\"let option of filter.options\" class=\"checkbox-container\">\n                            <mis-checkbox [type]=\"'Default'\" [checked]=\"filterForm.get(filter.key).value?.includes(option.value)\" (valueChange)=\"handleCheckbox($event, filter.key, option.value, filter)\"></mis-checkbox>\n                            <span class=\"checkbox-label\">{{option.label}}</span>\n                        </div>\n                    </div>\n                </ng-container>\n\n                <ng-container *ngIf=\"filter.type === 'datePicker'\">\n                    {{filter.placeholder}}\n                    <mis-input type=\"rounded\">\n                        <input misTzDp misInput type=\"text\" readonly class=\"mis-input\" [dpConfig]=\"filter.datepickerConfig\" [placeholder]=\"filterForm.get(filter.key).value ? filterForm.get(filter.key).value : (filter.placeholder || 'Select')\" [value]=\"filterForm.get(filter.key).value ? filterForm.get(filter.key).value : (filter.placeholder || 'Select')\" (dateChange)=\"onDateChange($event, filter.key, filter)\" [selectedDate]=\"filterForm.get(filter.key).value\" [positionX]=\"'end'\" [offsetX]=\"-10\">\n                    </mis-input>\n                </ng-container>\n\n                <ng-container *ngIf=\"filter.type === 'dateRangePicker'\">\n                <mis-input type=\"rounded\">\n                    <input misTzDrp misInput type=\"text\" class=\"mis-input\" readonly\n                        [placeholder]=\"(!dateRangeSelectedDates.startDate && !dateRangeSelectedDates.endDate) ? (filter.placeholder || 'Select') : dateRangeSelectedDates.startDate + ' - ' + dateRangeSelectedDates.endDate\"\n                        [value]=\"(!dateRangeSelectedDates.startDate && !dateRangeSelectedDates.endDate) ? (filter.placeholder || 'Select') : dateRangeSelectedDates.startDate + ' - ' + dateRangeSelectedDates.endDate\" [positionX]=\"'start'\"\n                        [positionY]=\"'top'\" [selectedDates]=\"dateRangeSelectedDates\" (dateChange)=\"onDateChange($event, filter.key, filter)\"\n                        [dpConfig]=\"filter.dateRangePickerConfig\" />\n                        </mis-input>    \n                </ng-container>\n\n                <ng-container *ngIf=\"filter.type === 'text'\">\n                    <mis-input type=\"rounded\">\n                        <input misInput type=\"text\" class=\"input\" [placeholder]=\"filter.placeholder || 'Type here'\" [formControlName]=\"filter.key\">\n                    </mis-input>\n                </ng-container>\n\n                <ng-container *ngIf=\"filter.type === 'number'\">\n                    <mis-input type=\"rounded\">\n                        <input misInput type=\"number\" class=\"input\" [placeholder]=\"filter.placeholder || 'Type here'\" [formControlName]=\"filter.key\">\n                    </mis-input>\n                </ng-container>\n\n                <ng-container *ngIf=\"filter.type === 'range'\">\n                    <div class=\"range-container\" [formGroup]=\"filterForm.get(filter.key)\">\n                      <div class=\"range-inner-container\">\n                        <span>{{ filter?.options?.[0]?.label || 'Min' }}</span>\n                        <input \n                          misInput \n                          type=\"number\" \n                          class=\"input\" \n                          [placeholder]=\"filter.placeholder || 'Type here'\" \n                          formControlName=\"min\" \n                          />\n                      </div>\n                      <div class=\"range-inner-container\">\n                        <span>{{ filter?.options?.[1]?.label || 'Max' }}</span>\n                        <input \n                          misInput \n                          type=\"number\" \n                          class=\"input\" \n                          [placeholder]=\"filter.placeholder || 'Type here'\" \n                          formControlName=\"max\"\n                            [min]=\"filterForm.get?.(filter.key)?.get('min')?.value || 0\"\n                         />\n                      </div>\n                    </div>\n                  </ng-container>\n                  \n\n                <div class=\"horizontal-divider\" *ngIf=\"!last\"></div>\n            </div>  \n        </ng-container>\n    </div>\n\n    <div class=\"actions\">\n        <mis-button [name]=\"'Clear All'\" [size]=\"'Small'\" [type]=\"'Text'\" (click)=\"resetFilters()\"></mis-button>\n        <mis-button [name]=\"'Apply'\" [size]=\"'Small'\" [type]=\"'Solid'\" (click)=\"applyFilters()\" [disabled]=\"filterForm.invalid\"></mis-button>\n    </div>\n</div> \n", styles: [".filter-panel-container{display:flex;flex-direction:column;height:100%;max-width:100%;min-width:20rem;position:absolute;right:0;background:#fff;top:0;z-index:999;box-shadow:0 0 5px #000000a6;transition:all .3s ease}.filter-panel-container .panel-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;font-weight:700;margin:0 1rem;flex-basis:5%}.filter-panel-container .panel-header span{font-size:1.25rem}.filter-panel-container .panel-header .close-icon{cursor:pointer;border-radius:50%;transform:scale(1.4);padding:.3rem;transition:all .3s ease}.filter-panel-container .panel-header .close-icon:hover{background:#f5f5f5}.filter-panel-container .panel-header .close-icon:active{background:#e0e0e0}.filter-panel-container .mat-divider.horizontal{margin:1rem}.filters{display:flex;flex-direction:column;flex:1;row-gap:.5rem;overflow:auto;padding:0 1rem}.filters .filter{display:flex;flex-direction:column}.filters .filter .filter-title{color:#6a737d;font-size:.875rem;font-weight:700;line-height:20px;letter-spacing:.25px}.filters .filter .checkbox-row{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:.8rem 0}.filters .filter .checkbox-row .checkbox-container{display:flex;flex-direction:row;align-items:center;gap:.5rem}.filters .filter .checkbox-row .checkbox-label{display:block;width:8rem}.filters .filter .checkbox-row ::ng-deep .mat-checkbox-inner-container{width:20px;height:20px}.filters .filter .checkbox-row ::ng-deep .mat-checkbox-frame{border-radius:5px}.filters .filter .multiselect-filter,.filters .filter mis-input{padding:.7rem 0}.horizontal-divider{display:block;width:100%;height:1px;margin:.5rem 0;background:#e0e0e0}.first{margin-top:0}.actions{display:flex;flex-direction:row;justify-content:end;align-items:center;gap:1rem;border-top:1px solid #E0E0E0;flex-basis:4%;padding:.5rem}.actions button{font-weight:700;border-radius:.5rem;width:6rem}.no-padding ::ng-deep .container{padding:0!important}.range-container{display:flex;justify-content:space-between;padding:.8rem 0}.range-container .range-inner-container{display:flex;flex-direction:column}.range-container .range-inner-container input{height:2.2rem;outline:none;border-radius:.375rem;border:1px solid #e0e0e0;width:8rem;padding:0 .5rem}.range-container .range-inner-container span{margin-bottom:.2rem}input.ng-invalid.ng-touched{border:1px solid red;background-color:#ffe6e6}\n"] }]
+        args: [{ selector: 'mis-filter-panel', animations: [slideFromRight], template: "<div class=\"filter-panel-container\" *ngIf=\"show\" @slideFromRight> \n    <div class=\"panel-header\">\n        <span>Filters</span>\n        <svg class=\"close-icon\" (click)=\"closePanel()\" width=\"25\" height=\"25\" viewBox=\"0 0 25 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <g id=\"ic-navigation-cancel-24\">\n            <path id=\"Union\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.60468 6.64355C8.09036 6.12923 7.25649 6.12923 6.74218 6.64355C6.22787 7.15786 6.22787 7.99173 6.74218 8.50604L10.4938 12.2576L6.7431 16.0083C6.22879 16.5226 6.22879 17.3564 6.7431 17.8708C7.25742 18.3851 8.09129 18.3851 8.6056 17.8708L12.3562 14.1201L16.1068 17.8707C16.6211 18.385 17.455 18.385 17.9693 17.8707C18.4836 17.3564 18.4836 16.5225 17.9693 16.0082L14.2187 12.2576L17.9702 8.50613C18.4845 7.99181 18.4845 7.15794 17.9702 6.64363C17.4559 6.12932 16.622 6.12932 16.1077 6.64363L12.3562 10.3951L8.60468 6.64355Z\" fill=\"#181F33\"/>\n            </g>\n        </svg>            \n    </div>\n    \n    <div class=\"horizontal-divider first\"></div>\n    \n    <div class=\"filters\" [formGroup]=\"filterForm\">\n        <ng-container *ngFor=\"let filter of config; let last = last\">\n            <div class=\"filter\" *ngIf=\"!filter.hidden\">\n                <span class=\"filter-title\">{{filter.title}}</span>\n\n                <ng-container *ngIf=\"filter.type === 'multiSelect'\">\n                    <div class=\"multiselect-filter\">\n                        <mis-multi-select-dropdown class=\"no-padding\" [label]=\"filter.placeholder || 'Select'\" [selectedItems]=\"filterForm.get(filter.key).value\" (onChange)=\"handleSelect($event, filter.key, filter)\" [data]=\"filter.options\" [searchEnabled]=\"true\"\n                            [showSelectedCount]=\"true\" [enableSelectAll]=\"true\"\n                            [hideApplyButton]=\"false\" width=\"100%\" height=\"44px\"></mis-multi-select-dropdown>\n                    </div>\n                </ng-container>\n\n                <ng-container *ngIf=\"filter.type === 'select'\">\n                    <div class=\"multiselect-filter\">\n                        <mis-dropdown [data]=\"filter.options\" [searchEnabled]=\"true\" width=\"100%\" height=\"44px\"\n                                (onChange)=\"handleSelect($event, filter.key, filter)\" [selectedItem]=\"filterForm.get(filter.key).value\">\n                        </mis-dropdown>\n                    </div>\n                </ng-container>\n        \n                <ng-container *ngIf=\"filter.type === 'checkbox'\">\n                    <div class=\"checkbox-row\">\n                        <div *ngFor=\"let option of filter.options\" class=\"checkbox-container\">\n                            <mis-checkbox [type]=\"'Default'\" [checked]=\"filterForm.get(filter.key).value?.includes(option.value)\" (valueChange)=\"handleCheckbox($event, filter.key, option.value, filter)\"></mis-checkbox>\n                            <span class=\"checkbox-label\">{{option.label}}</span>\n                        </div>\n                    </div>\n                </ng-container>\n\n                <ng-container *ngIf=\"filter.type === 'datePicker'\">\n                    {{filter.placeholder}}\n                    <mis-input type=\"rounded\">\n                        <input misTzDp misInput type=\"text\" readonly class=\"mis-input\" [dpConfig]=\"filter.datepickerConfig\" [placeholder]=\"filterForm.get(filter.key).value ? filterForm.get(filter.key).value : (filter.placeholder || 'Select')\" [value]=\"filterForm.get(filter.key).value ? filterForm.get(filter.key).value : (filter.placeholder || 'Select')\" (dateChange)=\"onDateChange($event, filter.key, filter)\" [selectedDate]=\"filterForm.get(filter.key).value\" [positionX]=\"'end'\" [offsetX]=\"-10\">\n                    </mis-input>\n                </ng-container>\n\n                <ng-container *ngIf=\"filter.type === 'dateRangePicker'\">\n                <mis-input type=\"rounded\">\n                    <input misTzDrp misInput type=\"text\" class=\"mis-input\" readonly\n                        [placeholder]=\"(!dateRangeSelectedDates.startDate && !dateRangeSelectedDates.endDate) ? (filter.placeholder || 'Select') : dateRangeSelectedDates.startDate + ' - ' + dateRangeSelectedDates.endDate\"\n                        [value]=\"(!dateRangeSelectedDates.startDate && !dateRangeSelectedDates.endDate) ? (filter.placeholder || 'Select') : dateRangeSelectedDates.startDate + ' - ' + dateRangeSelectedDates.endDate\" [positionX]=\"'start'\"\n                        [positionY]=\"'top'\" [selectedDates]=\"dateRangeSelectedDates\" (dateChange)=\"onDateChange($event, filter.key, filter)\"\n                        [dpConfig]=\"filter.dateRangePickerConfig\" />\n                        </mis-input>    \n                </ng-container>\n\n                <ng-container *ngIf=\"filter.type === 'text'\">\n                    <mis-input type=\"rounded\">\n                        <input misInput type=\"text\" class=\"input\" [placeholder]=\"filter.placeholder || 'Type here'\" [formControlName]=\"filter.key\">\n                    </mis-input>\n                </ng-container>\n\n                <ng-container *ngIf=\"filter.type === 'number'\">\n                    <mis-input type=\"rounded\">\n                        <input misInput type=\"number\" class=\"input\" [placeholder]=\"filter.placeholder || 'Type here'\" [formControlName]=\"filter.key\">\n                    </mis-input>\n                </ng-container>\n\n                <ng-container *ngIf=\"filter.type === 'range'\">\n                    <div class=\"range-container\" [formGroup]=\"filterForm.get(filter.key)\">\n                      <div class=\"range-inner-container\">\n                        <span>{{ filter?.options?.[0]?.label || 'Min' }}</span>\n                        <input \n                          misInput \n                          type=\"number\" \n                          class=\"input\" \n                          [placeholder]=\"filter.placeholder || 'Type here'\" \n                          formControlName=\"min\" \n                          />\n                      </div>\n                      <div class=\"range-inner-container\">\n                        <span>{{ filter?.options?.[1]?.label || 'Max' }}</span>\n                        <input \n                          misInput \n                          type=\"number\" \n                          class=\"input\" \n                          [placeholder]=\"filter.placeholder || 'Type here'\" \n                          formControlName=\"max\"\n                            [min]=\"filterForm.get?.(filter.key)?.get('min')?.value || 0\"\n                         />\n                      </div>\n                    </div>\n                  </ng-container>\n                  \n\n                <div class=\"horizontal-divider\" *ngIf=\"!last\"></div>\n            </div>  \n        </ng-container>\n    </div>\n\n    <div class=\"actions\">\n        <mis-button [name]=\"'Clear All'\" [size]=\"'Small'\" [type]=\"'Text'\" (click)=\"resetFilters()\"></mis-button>\n        <mis-button [name]=\"'Apply'\" [size]=\"'Small'\" [type]=\"'Solid'\" (click)=\"applyFilters()\" [disabled]=\"filterForm.invalid\"></mis-button>\n    </div>\n</div> \n", styles: [".filter-panel-container{display:flex;flex-direction:column;height:100%;max-width:100%;min-width:20rem;position:absolute;right:0;background:var(--bg-primary);top:0;z-index:999;box-shadow:0 0 5px #000000a6;transition:all .3s ease}.filter-panel-container .panel-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;font-weight:700;margin:0 1rem;flex-basis:5%}.filter-panel-container .panel-header span{font-size:1.25rem}.filter-panel-container .panel-header .close-icon{cursor:pointer;border-radius:50%;transform:scale(1.4);padding:.3rem;transition:all .3s ease}.filter-panel-container .panel-header .close-icon:hover{background:var(--bg-tertiary)}.filter-panel-container .panel-header .close-icon:active{background:var(--border-primary)}.filter-panel-container .mat-divider.horizontal{margin:1rem}.filters{display:flex;flex-direction:column;flex:1;row-gap:.5rem;overflow:auto;padding:0 1rem}.filters .filter{display:flex;flex-direction:column}.filters .filter .filter-title{color:var(--text-secondary);font-size:.875rem;font-weight:700;line-height:20px;letter-spacing:.25px}.filters .filter .checkbox-row{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:.8rem 0}.filters .filter .checkbox-row .checkbox-container{display:flex;flex-direction:row;align-items:center;gap:.5rem}.filters .filter .checkbox-row .checkbox-label{display:block;width:8rem}.filters .filter .checkbox-row ::ng-deep .mat-checkbox-inner-container{width:20px;height:20px}.filters .filter .checkbox-row ::ng-deep .mat-checkbox-frame{border-radius:5px}.filters .filter .multiselect-filter,.filters .filter mis-input{padding:.7rem 0}.horizontal-divider{display:block;width:100%;height:1px;margin:.5rem 0;background:var(--border-primary)}.first{margin-top:0}.actions{display:flex;flex-direction:row;justify-content:end;align-items:center;gap:1rem;border-top:1px solid var(--border-primary);flex-basis:4%;padding:.5rem}.actions button{font-weight:700;border-radius:.5rem;width:6rem}.no-padding ::ng-deep .container{padding:0!important}.range-container{display:flex;justify-content:space-between;padding:.8rem 0}.range-container .range-inner-container{display:flex;flex-direction:column}.range-container .range-inner-container input{height:2.2rem;outline:none;border-radius:.375rem;border:1px solid var(--border-primary);width:8rem;padding:0 .5rem}.range-container .range-inner-container span{margin-bottom:.2rem}input.ng-invalid.ng-touched{border:1px solid var(--brand-error);background-color:var(--brand-error-lightest)}\n"] }]
     }], () => [{ type: HasValuePipe }], { show: [{
             type: Input
         }], onClose: [{