@libs-ui/services-config-project 0.2.5

package/fesm2022/libs-ui-services-config-project.mjs

@@ -0,0 +1,913 @@
+import * as i0 from '@angular/core';
+import { signal, computed, effect, Injectable, inject, importProvidersFrom } from '@angular/core';
+import { colorStepContrastFromOrigin, get, UtilsCache } from '@libs-ui/utils';
+import { HttpClient, provideHttpClient } from '@angular/common/http';
+import { TranslateService, TranslateLoader, TranslateCompiler, TranslateStore, TranslateParser, MissingTranslationHandler, TranslateModule } from '@ngx-translate/core';
+import { TranslateMessageFormatCompiler } from 'ngx-translate-messageformat-compiler';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+import { take } from 'rxjs';
+
+const fontConfig = {
+    name: 'SVN-Poppins',
+    uri_regular: 'SVN-Poppins-Regular.ttf',
+    uri_medium: 'SVN-Poppins-Medium.ttf',
+    uri_semibold: 'SVN-Poppins-SemiBold.ttf',
+    uri_bold: 'SVN-Poppins-Bold.ttf'
+};
+const weights = {
+    uri_regular: '400',
+    uri_medium: '500',
+    uri_semibold: '600',
+    uri_bold: '700'
+};
+const configHeading = {
+    h1r: {
+        "font-size": '30px',
+        "font-weight": '400',
+        "line-height": '38px',
+        "letter-spacing": 'calc(30px * (0.5 / 100))'
+    },
+    h1m: {
+        "font-size": '30px',
+        "font-weight": '500',
+        "line-height": '38px',
+        "letter-spacing": 'calc(30px * (0.5 / 100))'
+    },
+    h1s: {
+        "font-size": '30px',
+        "font-weight": '600',
+        "line-height": '38px',
+        "letter-spacing": 'calc(30px * (0.5 / 100))'
+    },
+    h1b: {
+        "font-size": '30px',
+        "font-weight": '700',
+        "line-height": '38px',
+        "letter-spacing": 'calc(30px * (0.5 / 100))'
+    },
+    h2r: {
+        "font-size": '20px',
+        "font-weight": '400',
+        "line-height": '26px',
+        "letter-spacing": 'calc(20px * (0.5 / 100))'
+    },
+    h2m: {
+        "font-size": '20px',
+        "font-weight": '500',
+        "line-height": '26px',
+        "letter-spacing": 'calc(20px * (0.5 / 100))'
+    },
+    h2s: {
+        "font-size": '20px',
+        "font-weight": '600',
+        "line-height": '26px',
+        "letter-spacing": 'calc(20px * (0.5 / 100))'
+    },
+    h2b: {
+        "font-size": '20px',
+        "font-weight": '400',
+        "line-height": '76px',
+        "letter-spacing": 'calc(20px * (0.5 / 100))'
+    },
+    h3r: {
+        "font-size": '16px',
+        "font-weight": '400',
+        "line-height": '20px',
+        "letter-spacing": 'calc(16px * (0.5 / 100))'
+    },
+    h3m: {
+        "font-size": '16px',
+        "font-weight": '500',
+        "line-height": '20px',
+        "letter-spacing": 'calc(16px * (0.5 / 100))'
+    },
+    h3s: {
+        "font-size": '16px',
+        "font-weight": '600',
+        "line-height": '20px',
+        "letter-spacing": 'calc(16px * (0.5 / 100))'
+    },
+    h3b: {
+        "font-size": '16px',
+        "font-weight": '700',
+        "line-height": '20px',
+        "letter-spacing": 'calc(16px * (0.5 / 100))'
+    },
+    h4r: {
+        "font-size": '13px',
+        "font-weight": '400',
+        "line-height": '16px',
+        "letter-spacing": 'calc(13px * (0.5 / 100))'
+    },
+    h4m: {
+        "font-size": '13px',
+        "font-weight": '500',
+        "line-height": '16px',
+        "letter-spacing": 'calc(13px * (0.5 / 100))'
+    },
+    h4s: {
+        "font-size": '13px',
+        "font-weight": '600',
+        "line-height": '16px',
+        "letter-spacing": 'calc(13px * (0.5 / 100))'
+    },
+    h4b: {
+        "font-size": '13px',
+        "font-weight": '700',
+        "line-height": '16px',
+        "letter-spacing": 'calc(13px * (0.5 / 100))'
+    },
+    h5r: {
+        "font-size": '12px',
+        "font-weight": '400',
+        "line-height": '16px',
+        "letter-spacing": 'calc(12px * (0.5 / 100))'
+    },
+    h5m: {
+        "font-size": '12px',
+        "font-weight": '500',
+        "line-height": '16px',
+        "letter-spacing": 'calc(12px * (0.5 / 100))'
+    },
+    h5s: {
+        "font-size": '12px',
+        "font-weight": '600',
+        "line-height": '16px',
+        "letter-spacing": 'calc(12px * (0.5 / 100))'
+    },
+    h5b: {
+        "font-size": '12px',
+        "font-weight": '700',
+        "line-height": '16px',
+        "letter-spacing": 'calc(12px * (0.5 / 100))'
+    },
+    h6r: {
+        "font-size": '11px',
+        "font-weight": '400',
+        "line-height": '16px',
+        "letter-spacing": 'calc(11px * (0.5 / 100))'
+    },
+    h6m: {
+        "font-size": '11px',
+        "font-weight": '500',
+        "line-height": '16px',
+        "letter-spacing": 'calc(11px * (0.5 / 100))'
+    },
+    h6s: {
+        "font-size": '11px',
+        "font-weight": '700',
+        "line-height": '16px',
+        "letter-spacing": 'calc(11px * (0.5 / 100))'
+    },
+    h6b: {
+        "font-size": '11px',
+        "font-weight": '700',
+        "line-height": '16px',
+        "letter-spacing": 'calc(11px * (0.5 / 100))'
+    },
+    h7r: {
+        "font-size": '10px',
+        "font-weight": '400',
+        "line-height": '16px',
+        "letter-spacing": 'calc(11px * (0.5 / 100))'
+    },
+    h7m: {
+        "font-size": '10px',
+        "font-weight": '500',
+        "line-height": '16px',
+        "letter-spacing": 'calc(11px * (0.5 / 100))'
+    },
+    h7s: {
+        "font-size": '10px',
+        "font-weight": '600',
+        "line-height": '16px',
+        "letter-spacing": 'calc(11px * (0.5 / 100))'
+    },
+    h7b: {
+        "font-size": '10px',
+        "font-weight": '700',
+        "line-height": '16px',
+        "letter-spacing": 'calc(11px * (0.5 / 100))'
+    },
+};
+const configButtonColor = (rootColorInTheme) => {
+    return {
+        "button-primary": {
+            configStepColor: {
+                text: "white",
+                text_hover: "white",
+                text_active: "white",
+                text_disable: "#CDD0D6",
+                background: 0,
+                background_hover: 20,
+                background_active: -20,
+                background_disable: "#F8F9FA",
+                border: 0,
+                border_hover: 20,
+                border_active: -20,
+                border_disable: "#F8F9FA"
+            },
+            rootColor: rootColorInTheme
+        },
+        "button-primary-revert": {
+            configStepColor: {
+                text: 0,
+                text_hover: "white",
+                text_active: "white",
+                text_disable: "#CDD0D6",
+                background: "white",
+                background_hover: 20,
+                background_active: -20,
+                background_disable: "#F8F9FA",
+                border: 0,
+                border_hover: 20,
+                border_active: -20,
+                border_disable: "#F8F9FA"
+            },
+            rootColor: rootColorInTheme
+        },
+        "button-secondary": {
+            configStepColor: {
+                text: 0,
+                text_hover: 20,
+                text_active: -20,
+                text_disable: "#CDD0D6",
+                background: 90,
+                background_hover: 90,
+                background_active: 90,
+                background_disable: "#F8F9FA",
+                border: 90,
+                border_hover: 90,
+                border_active: 90,
+                border_disable: "#F8F9FA"
+            },
+            rootColor: rootColorInTheme
+        },
+        "button-third": {
+            configStepColor: {
+                text: "#6A7383",
+                text_hover: 20,
+                text_active: -20,
+                text_disable: "#CDD0D6",
+                background: "#F8F9FA",
+                background_hover: 90,
+                background_active: 90,
+                background_disable: "#F8F9FA",
+                border: "#F8F9FA",
+                border_hover: 90,
+                border_active: 90,
+                border_disable: "#F8F9FA"
+            },
+            rootColor: rootColorInTheme
+        },
+        "button-secondary-red": {
+            configStepColor: {
+                text: 0,
+                text_hover: -20,
+                text_active: -20,
+                text_disable: "#CDD0D6",
+                background: 90,
+                background_hover: 90,
+                background_active: 90,
+                background_disable: "#F8F9FA",
+                border: 90,
+                border_hover: 90,
+                border_active: 90,
+                border_disable: "#F8F9FA"
+            },
+            rootColor: '#EE2D41'
+        },
+        "button-outline": {
+            configStepColor: {
+                text: "#6A7383",
+                text_hover: 20,
+                text_active: -20,
+                text_disable: "#CDD0D6",
+                background: "white",
+                background_hover: "white",
+                background_active: "white",
+                background_disable: "#F8F9FA",
+                border: "#e6e7ea",
+                border_hover: 20,
+                border_active: -20,
+                border_disable: "#E6E7EA"
+            },
+            rootColor: rootColorInTheme
+        },
+        "button-danger-high": {
+            configStepColor: {
+                text: "white",
+                text_hover: "white",
+                text_active: "white",
+                text_disable: "#CDD0D6",
+                background: 0,
+                background_hover: 20,
+                background_active: -20,
+                background_disable: "#F8F9FA",
+                border: 0,
+                border_hover: 20,
+                border_active: -20,
+                border_disable: "#F8F9FA"
+            },
+            rootColor: "#ee2d41"
+        },
+        "button-danger-low": {
+            configStepColor: {
+                text: "white",
+                text_hover: "white",
+                text_active: "white",
+                text_disable: "#CDD0D6",
+                background: 0,
+                background_hover: 20,
+                background_active: -20,
+                background_disable: "#F8F9FA",
+                border: 0,
+                border_hover: 20,
+                border_active: -20,
+                border_disable: "#F8F9FA"
+            },
+            rootColor: "#ffa621"
+        },
+        "button-green": {
+            configStepColor: {
+                text: "white",
+                text_hover: "white",
+                text_active: "white",
+                text_disable: "#CDD0D6",
+                background: 0,
+                background_hover: 20,
+                background_active: -20,
+                background_disable: "#F8F9FA",
+                border: 0,
+                border_hover: 20,
+                border_active: -20,
+                border_disable: "#F8F9FA"
+            },
+            rootColor: "#00d16d"
+        },
+        "button-violet": {
+            configStepColor: {
+                text: "white",
+                text_hover: "white",
+                text_active: "white",
+                text_disable: "#CDD0D6",
+                background: 0,
+                background_hover: 20,
+                background_active: -20,
+                background_disable: "#F8F9FA",
+                border: 0,
+                border_hover: 20,
+                border_active: -20,
+                border_disable: "#F8F9FA"
+            },
+            rootColor: "#7239ea"
+        },
+        "button-outline-green": {
+            configStepColor: {
+                text: "#6A7383",
+                text_hover: 20,
+                text_active: -20,
+                text_disable: "#CDD0D6",
+                background: "white",
+                background_hover: "white",
+                background_active: "white",
+                background_disable: "#F8F9FA",
+                border: "#e6e7ea",
+                border_hover: 20,
+                border_active: -20,
+                border_disable: "#E6E7EA"
+            },
+            rootColor: "#00d16d"
+        },
+        "button-secondary-green": {
+            configStepColor: {
+                text: 0,
+                text_hover: "white",
+                text_active: "white",
+                text_disable: "#CDD0D6",
+                background: 90,
+                background_hover: 0,
+                background_active: 0,
+                background_disable: "#F8F9FA",
+                border: 0,
+                border_hover: 0,
+                border_active: 0,
+                border_disable: "#F8F9FA"
+            },
+            rootColor: "#00d16d"
+        },
+        "button-outline-secondary": {
+            configStepColor: {
+                text: 0,
+                text_hover: "white",
+                text_active: "white",
+                text_disable: "#CDD0D6",
+                background: 90,
+                background_hover: 0,
+                background_active: 0,
+                background_disable: "#F8F9FA",
+                border: 0,
+                border_hover: 0,
+                border_active: 0,
+                border_disable: "#E6E7EA"
+            },
+            rootColor: rootColorInTheme
+        },
+        "button-outline-hover-danger": {
+            configStepColor: {
+                text: "#6A7383",
+                text_hover: 0,
+                text_active: -20,
+                text_disable: "#CDD0D6",
+                background: "white",
+                background_hover: "white",
+                background_active: "white",
+                background_disable: "#F8F9FA",
+                border: "#e6e7ea",
+                border_hover: 0,
+                border_active: -20,
+                border_disable: "#e6e7ea"
+            },
+            rootColor: "#f15767"
+        }
+    };
+};
+const configLinkButton = (rootColorInTheme) => {
+    return {
+        "button-link-primary": {
+            configStepColor: {
+                text: 0,
+                text_hover: 20,
+                text_active: -20,
+                text_disable: "#CDD0D6"
+            },
+            rootColor: rootColorInTheme
+        },
+        "button-link-third": {
+            configStepColor: {
+                text: "#6A7383",
+                text_hover: 20,
+                text_active: -20,
+                text_disable: "#CDD0D6",
+            },
+            rootColor: rootColorInTheme
+        },
+        "button-link-danger-high": {
+            configStepColor: {
+                text: 0,
+                text_hover: 20,
+                text_active: -20,
+                text_disable: "#CDD0D6",
+            },
+            rootColor: "#ee2d41"
+        },
+        "button-link-danger-low": {
+            configStepColor: {
+                text: 0,
+                text_hover: 20,
+                text_active: -20,
+                text_disable: "#CDD0D6",
+            },
+            rootColor: "#ffa621"
+        },
+        "button-link-green": {
+            configStepColor: {
+                text: 0,
+                text_hover: 20,
+                text_active: -20,
+                text_disable: "#CDD0D6",
+            },
+            rootColor: "#00d16d"
+        },
+        "button-link-violet": {
+            configStepColor: {
+                text: 0,
+                text_hover: 20,
+                text_active: -20,
+                text_disable: "#CDD0D6",
+            },
+            rootColor: "#7239ea"
+        }
+    };
+};
+const configButtonStatus = () => {
+    return {
+        "blue": {
+            color: "#226FF5",
+            background: "#E9F1FE"
+        },
+        "green": {
+            color: "#00D16D",
+            background: "#E6FAF0"
+        },
+        "red": {
+            color: "#EE2D41",
+            background: "#FDEAEC"
+        },
+        "orange": {
+            color: "#F05800",
+            background: "#FEEEE6"
+        },
+        "yellow": {
+            color: "#FFA621",
+            background: "#FFF6E9"
+        },
+        "cyan": {
+            color: "#04C8C8",
+            background: "#E6FAFA"
+        },
+        "purple": {
+            color: "#7239EA",
+            background: "#F1EBFD"
+        },
+        "brown": {
+            color: "#663259",
+            background: "#F0EBEE"
+        }
+    };
+};
+const configButtonTab = () => {
+    return {
+        "blue": {
+            color: "#226FF5",
+            background: "#F4F8FF",
+            background_badge: "#E9F1FE"
+        },
+        "green": {
+            color: "#00D16D",
+            background: "#F2FCF7",
+            background_badge: "#E6FAF0"
+        },
+        "red": {
+            color: "#EE2D41",
+            background: "#FDEAEC",
+            background_badge: "#FEE9F1"
+        },
+        "orange": {
+            color: "#F05800",
+            background: "#FEF7F2",
+            background_badge: "#FEEEE6"
+        },
+        "yellow": {
+            color: "#FFA621",
+            background: "#FFFBF4",
+            background_badge: "#FFF6E9"
+        },
+        "cyan": {
+            color: "#04C8C8",
+            background: "#F2FCFC",
+            background_badge: "#E6FAFA"
+        },
+        "purple": {
+            color: "#7239EA",
+            background: "#F8F5FE",
+            background_badge: "#F1EBFD"
+        },
+        "brown": {
+            color: "#663259",
+            background: "#F7F5F7",
+            background_badge: "#F0EBEE"
+        }
+    };
+};
+const styleButtonTab = (type, config) => {
+    const background = config.background || colorStepContrastFromOrigin(config.color, 95)?.light;
+    const backgroundBadge = config.background_badge || colorStepContrastFromOrigin(config.color, 90)?.light;
+    return `.libs-ui-button-tab-${type}[active="true"] {
+    background-color: ${background} !important;
+  }
+
+  .libs-ui-button-tab-${type}[active="true"] > .label {
+    color: ${config.color} !important;
+  }
+
+  .libs-ui-button-tab-${type}[active="true"] > .badge > .circle-tab {
+    color: ${config.color} !important;
+    background-color: ${backgroundBadge} !important;
+  }`;
+};
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+class LibsUiConfigProjectService {
+    themeColor = signal('#226ff5');
+    borderColor = signal('#e6e7ea');
+    textErrorColor = signal('#ff5454');
+    borderErrorColor = signal('#ee2d41');
+    backgroundDisableColor = signal('#f8f9fa');
+    textReadonlyColor = signal('#071631');
+    textDisableColor = signal('#9ca2ad');
+    backgroundReadonlyColor = signal('#f8f9fa');
+    configFont = signal(fontConfig);
+    configHead = signal(configHeading);
+    configDefaultInterpolateParam = signal({ vi: {}, en: {} });
+    configButton = computed(() => {
+        return { ...configButtonColor(this.themeColor()), ...configLinkButton(this.themeColor()) };
+    });
+    configButtonStatus = signal(configButtonStatus());
+    configButtonTab = signal(configButtonTab());
+    styleClassGlobalEl = document.createElement('style');
+    styleClassHeadEl = document.createElement('style');
+    styleClassButtonTabEl = document.createElement('style');
+    constructor() {
+        effect(() => {
+            this.setThemeColor();
+        });
+        effect(() => {
+            this.setupFontFamily();
+        });
+        effect(() => {
+            this.setupFontHead();
+        });
+        effect(() => {
+            this.setupButtonTab();
+        });
+        this.configString();
+        this.setClassGlobal();
+    }
+    set ThemeColor(color) {
+        this.themeColor.set(color || '#226ff5');
+    }
+    set BorderColor(color) {
+        this.borderColor.set(color || '#e6e7ea');
+    }
+    set BorderErrorColor(color) {
+        this.borderErrorColor.set(color || '#ee2d41');
+    }
+    set TextErrorColor(color) {
+        this.textErrorColor.set(color || '#ff5454');
+    }
+    set BackgroundReadonlyColor(color) {
+        this.backgroundReadonlyColor.set(color || '#f8f9fa');
+    }
+    set TextReadonlyColor(color) {
+        this.textReadonlyColor.set(color || '#071631');
+    }
+    set BackgroundDisableColor(color) {
+        this.backgroundDisableColor.set(color || '#f8f9fa');
+    }
+    set TextDisableColor(color) {
+        this.textDisableColor.set(color || '#9ca2ad');
+    }
+    set ConfigFont(configFont) {
+        this.configFont.set({ ...configFont });
+    }
+    set ConfigFontHead(configHead) {
+        this.configHead.set({ ...configHead });
+    }
+    get ConfigDefaultInterpolateParam() {
+        return this.configDefaultInterpolateParam;
+    }
+    get ConfigButton() {
+        return this.configButton;
+    }
+    get ConfigButtonStatus() {
+        return this.configButtonStatus();
+    }
+    set ConfigButtonStatus(config) {
+        this.configButtonStatus.set(config);
+    }
+    set ConfigButtonTab(config) {
+        this.configButtonTab.set(config);
+    }
+    // public hàm để sử dụng cho component input sử dụng tagInput = frameArea;
+    setupFontFamily(currentDoc) {
+        currentDoc = currentDoc || document;
+        const doc = currentDoc.documentElement;
+        doc.style.setProperty('--libs-ui-font-family-name', `${this.configFont().name},Arial, Helvetica, sans-serif`);
+        Object.keys(weights).forEach(key => {
+            const fontFace = new FontFace(this.configFont().name, `url(${get(this.configFont(), key)})`, { weight: get(weights, key) });
+            fontFace.load().then(loadedFont => {
+                if ('add' in currentDoc.fonts) {
+                    currentDoc.fonts.add(loadedFont);
+                }
+            });
+        });
+    }
+    setupFontHead() {
+        const configHeads = this.configHead();
+        let styles = '';
+        Object.keys(configHeads).forEach(keyConfig => {
+            let style = `font-family:var(--libs-ui-font-family-name,'Arial');`;
+            const config = get(configHeading, keyConfig);
+            Object.keys(config).forEach(key => {
+                style = `${style}${key}:${get(config, key)};`;
+            });
+            styles = `${styles} .libs-ui-font-${keyConfig}{${style}}`;
+        });
+        styles = `*{box-sizing: border-box !important;}${styles}`;
+        this.styleClassHeadEl.innerHTML = styles;
+        document.head.append(this.styleClassHeadEl);
+    }
+    setupButtonTab() {
+        const configButtonTab = this.configButtonTab();
+        let styles = '';
+        Object.keys(configButtonTab).forEach(key => {
+            const config = get(configButtonTab, key);
+            const style = config ? styleButtonTab(key, config) : '';
+            styles = `${styles}${style}`;
+        });
+        this.styleClassButtonTabEl.innerHTML = styles;
+        document.head.append(this.styleClassButtonTabEl);
+    }
+    setThemeColor() {
+        const doc = document.documentElement;
+        [{
+                group: 'libs-ui',
+                type: 'color',
+                property: {
+                    default: colorStepContrastFromOrigin(this.themeColor(), 0)?.light,
+                    light_1: colorStepContrastFromOrigin(this.themeColor(), 20)?.light,
+                    light_2: colorStepContrastFromOrigin(this.themeColor(), 90)?.light,
+                    light_3: colorStepContrastFromOrigin(this.themeColor(), 95)?.light,
+                    light_4: colorStepContrastFromOrigin(this.themeColor(), 50)?.light,
+                    light_5: colorStepContrastFromOrigin(this.themeColor(), 70)?.light,
+                    light_6: colorStepContrastFromOrigin(this.themeColor(), 80)?.light,
+                    dark: colorStepContrastFromOrigin(this.themeColor(), 20)?.dark,
+                    border: this.borderColor(),
+                    border_error: this.borderErrorColor(),
+                    text_error: this.textErrorColor(),
+                    background_readonly: this.backgroundReadonlyColor(),
+                    text_readonly: this.textReadonlyColor(),
+                    background_disable: this.backgroundDisableColor(),
+                    text_disable: this.textDisableColor(),
+                    gradient_from: this.themeColor().toLocaleUpperCase() === '#226FF5' ? colorStepContrastFromOrigin(this.themeColor(), 10)?.light : colorStepContrastFromOrigin(this.themeColor(), 0)?.light,
+                    gradient_to: this.themeColor().toLocaleUpperCase() === '#226FF5' ? colorStepContrastFromOrigin('#5B2EBB', 10)?.light : colorStepContrastFromOrigin(this.themeColor(), 20)?.dark,
+                }
+            }].forEach(item => {
+            const name = `--${item.group.replace(/[_]/g, '-')}-${item.type.replace(/[_]/g, '-')}`;
+            Object.keys(item.property).forEach(key => doc.style.setProperty(`${name}-${key.replace(/[_]/g, '-')}`, item.property[key]));
+        });
+    }
+    colorStepContrastFromOrigin(step, color) {
+        return colorStepContrastFromOrigin(color || this.themeColor(), step || 0);
+    }
+    setClassGlobal() {
+        this.styleClassGlobalEl.innerHTML = `
+    .libs-ui-border-primary-general{border: 1px solid var(--libs-ui-color-default, #226FF5);}
+    .libs-ui-border-primary-focus-general{border: 1px solid var(--libs-ui-color-light-1, #4e8cf7);}
+    .libs-ui-border-primary-hover-general{border: 1px solid var(--libs-ui-color-light-3, #f4f8ff);}
+    .libs-ui-border-general{ border: 1px solid var(--libs-ui-color-border, #e6e7ea);}
+    .libs-ui-border-top-general{border-top: 1px solid var(--libs-ui-color-border, #e6e7ea);}
+    .libs-ui-border-right-general{border-right: 1px solid var(--libs-ui-color-border, #e6e7ea);}
+    .libs-ui-border-bottom-general{border-bottom: 1px solid var(--libs-ui-color-border, #e6e7ea);}
+    .libs-ui-border-dashed-bottom-general{border-bottom: dashed 1px var(--libs-ui-color-border, #e6e7ea);}
+    .libs-ui-border-left-general{border-left: 1px solid var(--libs-ui-color-border, #e6e7ea);}
+    .libs-ui-border-x-general{border-left: 1px solid var(--libs-ui-color-border, #e6e7ea);  border-right: 1px solid var(--libs-ui-color-border, #e6e7ea);}
+    .libs-ui-border-y-general{border-top: 1px solid var(--libs-ui-color-border, #e6e7ea);  border-bottom: 1px solid var(--libs-ui-color-border, #e6e7ea);}
+    .libs-ui-border-left-top-general{border-left: 1px solid var(--libs-ui-color-border, #e6e7ea);  border-top: 1px solid var(--libs-ui-color-border, #e6e7ea);}
+    .libs-ui-border-left-bottom-general{border-left: 1px solid var(--libs-ui-color-border, #e6e7ea);  border-bottom: 1px solid var(--libs-ui-color-border, #e6e7ea);}
+    .libs-ui-border-right-top-general{border-right: 1px solid var(--libs-ui-color-border, #e6e7ea);  border-top: 1px solid var(--libs-ui-color-border, #e6e7ea);}
+    .libs-ui-border-right-bottom-general{border-right: 1px solid var(--libs-ui-color-border, #e6e7ea);  border-bottom: 1px solid var(--libs-ui-color-border, #e6e7ea);}
+    .libs-ui-border-error-general{border: 1px solid var(--libs-ui-color-border-error, #ee2d41);}
+    .libs-ui-bg-list-hover:hover {background-color: #f8f9fa;}
+    .libs-ui-bg-list-hover-active:hover {background-color: #f8f9fa;}
+    .libs-ui-bg-list-hover-active:active {background-color: var(--libs-ui-color-light-3, #f4f8ff);}
+    .libs-ui-text-error {color: var(--libs-ui-color-text-error, #ff5454); !important}
+    .libs-ui-text-error::before {color: var(--libs-ui-color-text-error, #ff5454);}
+    .libs-ui-disable {cursor: default !important;text-decoration: none;color:var(--libs-ui-color-text-disable, #cdd0d6) !important}
+    .libs-ui-disable::before {color:var(--libs-ui-color-text-disable, #9ca2ad) !important}
+    .libs-ui-disable-background{background: var(--libs-ui-color-background-disable, #f8f9fa) !important;}
+    .libs-ui-disable-active {color:var(--libs-ui-color-light-4,#91b7fa) !important}
+    .libs-ui-disable-active::before {color:var(--libs-ui-color-light-4,#91b7fa) !important}
+    .libs-ui-readonly {cursor: default !important;color:var(--libs-ui-color-text-readonly, #071631) !important;}
+    .libs-ui-readonly::before {color:var(--libs-ui-color-text-readonly, #071631) !important;}
+    .libs-ui-readonly-background{background: var(--libs-ui-color-background-readonly, #f8f9fa) !important;}
+  `;
+        document.head.append(this.styleClassGlobalEl);
+    }
+    configString() {
+        const prototype = String.prototype;
+        prototype.replaceAt = function (index, replacement) {
+            const values = this.split('');
+            values[index] = replacement;
+            return values.join('');
+        };
+        prototype.replaceAll = function (index, separator, replacement) {
+            const regex = new RegExp(separator, 'g');
+            return `${this.substr(0, index)}${this.substr(index + 1 + (replacement?.length || 0)).replace(regex, replacement)}`;
+        };
+        prototype.occurrencesByCharacter = function (character) {
+            const values = this.split('');
+            if (!values || !values.length) {
+                return 0;
+            }
+            return values.filter((char) => char === character).length;
+        };
+        prototype.indexesOfCharacter = function (character) {
+            const values = this.split('');
+            const indexes = [];
+            if (!values || !values.length) {
+                return indexes;
+            }
+            for (const indexValue in values) {
+                if (values[indexValue] === character) {
+                    indexes.push(+indexValue);
+                }
+            }
+            return indexes;
+        };
+        prototype.indexesByString = function (str) {
+            const values = this;
+            const indexes = [];
+            if (!values || !values.length || !str || !str.length || values.length < str.length) {
+                return indexes;
+            }
+            for (const indexValue in values) {
+                if (values[indexValue] !== str[0] || ((+indexValue) + str.length) > values.length) {
+                    continue;
+                }
+                for (const index in str.split('')) {
+                    if (values[(+indexValue) + (+index)] !== str[index]) {
+                        break;
+                    }
+                }
+                indexes.push(+indexValue);
+            }
+            return indexes;
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiConfigProjectService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiConfigProjectService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiConfigProjectService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+;
+;
+;
+
+const dataTranslation = () => {
+    return {
+        vi: { "i18n_character": "Ký tự", "i18n_search": "Tìm kiếm", "i18n_color_custom": "Màu tuỳ chỉnh", "i18n_add_new": "Thêm giá trị mới", "i18n_cancel": "Hủy bỏ", "i18n_apply": "Áp dụng" },
+        en: { "i18n_character": "character", "i18n_search": "Search", "i18n_color_custom": "Custom theme color", "i18n_add_new": "Add new value", "i18n_cancel": "Cancel", "i18n_apply": "Apply" }
+    };
+};
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+class LibsUiTranslateService extends TranslateService {
+    configProjectService = inject(LibsUiConfigProjectService);
+    interpolateParam = computed(() => this.configProjectService.ConfigDefaultInterpolateParam());
+    constructor(store, currentLoader, compiler, parser, missingTranslationHandler, useDefaultLang, isolate, extend, defaultLanguage) {
+        super(store, currentLoader, compiler, parser, missingTranslationHandler, useDefaultLang, isolate, extend, defaultLanguage);
+    }
+    instant(key, interpolateParams) {
+        const val = super.instant(key, { ...this.interpolateParam()[UtilsCache.getLang()], ...(interpolateParams || {}) });
+        return val;
+    }
+    get(key, interpolateParams) {
+        return super.get(key, { ...this.interpolateParam()[UtilsCache.getLang()], ...(interpolateParams || {}) });
+    }
+    getParsedResult(translations, key, interpolateParams) {
+        return super.getParsedResult(translations, key, { ...this.interpolateParam()[UtilsCache.getLang()], ...(interpolateParams || {}) });
+    }
+    use(lang) {
+        const event = super.use(lang);
+        this.get(lang).pipe(take(1)).subscribe(() => super.setTranslation(lang, get(dataTranslation(), lang), true));
+        UtilsCache.setLang(lang);
+        return event;
+    }
+}
+
+let link = '/i18n/';
+const httpLoaderFactory = (http) => {
+    return new TranslateHttpLoader(http, link, '.json');
+};
+const TranslateForRootConfig = {
+    loader: {
+        provide: TranslateLoader,
+        useFactory: httpLoaderFactory,
+        deps: [HttpClient]
+    },
+    compiler: {
+        provide: TranslateCompiler,
+        useClass: TranslateMessageFormatCompiler,
+    }
+};
+const TranslateProviderConfig = {
+    provide: TranslateService,
+    useFactory: (store, currentLoader, compiler, parser, missingTranslationHandler, useDefaultLang, isolate, extend, defaultLanguage) => {
+        return new LibsUiTranslateService(store, currentLoader, compiler, parser, missingTranslationHandler, useDefaultLang, isolate, extend, defaultLanguage);
+    },
+    deps: [TranslateStore, TranslateLoader, TranslateCompiler, TranslateParser, MissingTranslationHandler],
+};
+const GET_CONFIG_TRANSLATE = (linkFileI18n) => {
+    if (linkFileI18n !== undefined) {
+        link = linkFileI18n;
+    }
+    return [
+        provideHttpClient(),
+        importProvidersFrom(TranslateModule.forRoot(TranslateForRootConfig)),
+        TranslateProviderConfig
+    ];
+};
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { GET_CONFIG_TRANSLATE, LibsUiConfigProjectService };
+//# sourceMappingURL=libs-ui-services-config-project.mjs.map