@libs-ui/services-config-project 0.1.1-1

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

@@ -0,0 +1,957 @@
+import * as i0 from '@angular/core';
+import { signal, computed, effect, Injectable } from '@angular/core';
+import { colorStepContrastFromOrigin, get } from '@libs-ui/utils';
+
+const fontConfig = {
+    name: 'SVN-Poppins',
+    uri_regular: 'SVN-Poppins-Regular.ttf',
+    uri_medium: 'SVN-Poppins-Medium.ttf',
+    uri_semibold: 'SVN-Poppins-SemiBold.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': '42px',
+        'letter-spacing': 'calc(30px * (0.5 / 100))',
+    },
+    h1m: {
+        'font-size': '30px',
+        'font-weight': '500',
+        'line-height': '42px',
+        'letter-spacing': 'calc(30px * (0.5 / 100))',
+    },
+    h1s: {
+        'font-size': '30px',
+        'font-weight': '600',
+        'line-height': '42px',
+        'letter-spacing': 'calc(30px * (0.5 / 100))',
+    },
+    h1b: {
+        'font-size': '30px',
+        'font-weight': '700',
+        'line-height': '42px',
+        'letter-spacing': 'calc(30px * (0.5 / 100))',
+    },
+    h2r: {
+        'font-size': '20px',
+        'font-weight': '400',
+        'line-height': '28px',
+        'letter-spacing': 'calc(20px * (0.5 / 100))',
+    },
+    h2m: {
+        'font-size': '20px',
+        'font-weight': '500',
+        'line-height': '28px',
+        'letter-spacing': 'calc(20px * (0.5 / 100))',
+    },
+    h2s: {
+        'font-size': '20px',
+        'font-weight': '600',
+        'line-height': '28px',
+        'letter-spacing': 'calc(20px * (0.5 / 100))',
+    },
+    h2b: {
+        'font-size': '20px',
+        'font-weight': '400',
+        'line-height': '28px',
+        'letter-spacing': 'calc(20px * (0.5 / 100))',
+    },
+    h3r: {
+        'font-size': '16px',
+        'font-weight': '400',
+        'line-height': '24px',
+        'letter-spacing': 'calc(16px * (0.5 / 100))',
+    },
+    h3m: {
+        'font-size': '16px',
+        'font-weight': '500',
+        'line-height': '24px',
+        'letter-spacing': 'calc(16px * (0.5 / 100))',
+    },
+    h3s: {
+        'font-size': '16px',
+        'font-weight': '600',
+        'line-height': '24px',
+        'letter-spacing': 'calc(16px * (0.5 / 100))',
+    },
+    h3b: {
+        'font-size': '16px',
+        'font-weight': '700',
+        'line-height': '24px',
+        'letter-spacing': 'calc(16px * (0.5 / 100))',
+    },
+    h4r: {
+        'font-size': '13px',
+        'font-weight': '400',
+        'line-height': '20px',
+        'letter-spacing': 'calc(13px * (0.5 / 100))',
+    },
+    h4m: {
+        'font-size': '13px',
+        'font-weight': '500',
+        'line-height': '20px',
+        'letter-spacing': 'calc(13px * (0.5 / 100))',
+    },
+    h4s: {
+        'font-size': '13px',
+        'font-weight': '600',
+        'line-height': '20px',
+        'letter-spacing': 'calc(13px * (0.5 / 100))',
+    },
+    h4b: {
+        'font-size': '13px',
+        'font-weight': '700',
+        'line-height': '20px',
+        'letter-spacing': 'calc(13px * (0.5 / 100))',
+    },
+    h5r: {
+        'font-size': '12px',
+        'font-weight': '400',
+        'line-height': '18px',
+        'letter-spacing': 'calc(12px * (0.5 / 100))',
+    },
+    h5m: {
+        'font-size': '12px',
+        'font-weight': '500',
+        'line-height': '18px',
+        'letter-spacing': 'calc(12px * (0.5 / 100))',
+    },
+    h5s: {
+        'font-size': '12px',
+        'font-weight': '600',
+        'line-height': '18px',
+        'letter-spacing': 'calc(12px * (0.5 / 100))',
+    },
+    h5b: {
+        'font-size': '12px',
+        'font-weight': '700',
+        'line-height': '18px',
+        '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': '600',
+        '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': '14px',
+        'letter-spacing': 'calc(11px * (0.5 / 100))',
+    },
+    h7m: {
+        'font-size': '10px',
+        'font-weight': '500',
+        'line-height': '14px',
+        'letter-spacing': 'calc(11px * (0.5 / 100))',
+    },
+    h7s: {
+        'font-size': '10px',
+        'font-weight': '600',
+        'line-height': '14px',
+        'letter-spacing': 'calc(11px * (0.5 / 100))',
+    },
+    h7b: {
+        'font-size': '10px',
+        'font-weight': '700',
+        'line-height': '14px',
+        'letter-spacing': 'calc(11px * (0.5 / 100))',
+    },
+};
+const sizeButtonConfig = () => ({
+    icon: {
+        large: '20px',
+        medium: '16px',
+        small: '16px',
+        smaller: '16px',
+    },
+    large: {
+        font_size: '16px',
+        line_height: '24px',
+    },
+    medium: {
+        font_size: '12px',
+        line_height: '18px',
+    },
+    small: {
+        font_size: '12px',
+        line_height: '18px',
+    },
+    smaller: {
+        font_size: '11px',
+        line_height: '16px',
+    },
+});
+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',
+        },
+        'button-third-hover-danger': {
+            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: '#EE2D41',
+        },
+    };
+};
+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"] > .libs-ui-button-tab-label {
+    color: ${config.color} !important;
+  }
+
+  .libs-ui-button-tab-${type}[active="true"] > .libs-ui-button-tab-badge > .libs-ui-button-tab-badge-circle {
+    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');
+    iconHoverDangerColor = signal('#f15767');
+    borderErrorColor = signal('#ee2d41');
+    backgroundDisableColor = signal('#f8f9fa');
+    textReadonlyColor = signal('#071631');
+    textDisableColor = signal('#9ca2ad');
+    backgroundReadonlyColor = signal('#f8f9fa');
+    backgroundUserSelection = signal('#00000040');
+    backgroundList = signal('#f8f9fa');
+    backgroundListHover = signal('#f8f9fa');
+    backgroundListHoverDanger = signal('#fef5f6');
+    configFont = signal(fontConfig);
+    configHead = signal(configHeading);
+    functionGetConfigButtonIncludes = signal(() => {
+        return {};
+    });
+    configButton = computed(() => {
+        return { ...configButtonColor(this.themeColor()), ...configLinkButton(this.themeColor()), ...this.functionGetConfigButtonIncludes()(this.themeColor()) };
+    });
+    configButtonSize = signal(sizeButtonConfig());
+    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();
+        });
+        effect(() => {
+            this.setupButtonSize();
+        });
+        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 IconHoverDangerColor(color) {
+        this.iconHoverDangerColor.set(color || '#ff5454');
+    }
+    set BackgroundReadonlyColor(color) {
+        this.backgroundReadonlyColor.set(color || '#f15767');
+    }
+    set TextReadonlyColor(color) {
+        this.textReadonlyColor.set(color || '#071631');
+    }
+    set BackgroundUserSelection(color) {
+        this.backgroundUserSelection.set(color || '#00000040');
+    }
+    set BackgroundList(color) {
+        this.backgroundList.set(color || '#f8f9fa');
+    }
+    set BackgroundListHover(color) {
+        this.backgroundListHover.set(color || '#f8f9fa');
+    }
+    set BackgroundListHoverDanger(color) {
+        this.backgroundListHover.set(color || '#fef5f6');
+    }
+    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 ConfigButton() {
+        return this.configButton;
+    }
+    set FunctionGetConfigButtonIncludes(functionGetConfigButtonIncludes) {
+        this.functionGetConfigButtonIncludes.set(functionGetConfigButtonIncludes);
+    }
+    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) {
+        try {
+            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) => {
+                if (!get(this.configFont(), key)) {
+                    return;
+                }
+                const fontFace = new FontFace(this.configFont().name, `url(${get(this.configFont(), key)})`, { weight: get(weights, key) });
+                fontFace.load().then((loadedFont) => {
+                    if (currentDoc && 'add' in currentDoc.fonts) {
+                        currentDoc.fonts.add(loadedFont);
+                    }
+                });
+            });
+        }
+        catch (error) {
+            console.log(error);
+        }
+    }
+    setupFontHead() {
+        const configHeadsData = this.configHead();
+        let styles = '';
+        Object.keys(configHeadsData).forEach((keyConfig) => {
+            let style = `font-family:var(--libs-ui-font-family-name,'Arial');`;
+            const config = get(configHeadsData, keyConfig);
+            Object.keys(config).forEach((key) => {
+                style = `${style}${key}:${get(config, key)};`;
+            });
+            styles = `${styles} .libs-ui-font-${keyConfig}{${style}}.libs-ui-font-${keyConfig}i{${style.replace(/;/g, ' !important;')}}`;
+        });
+        styles = `*{box-sizing: border-box !important;}${styles}`;
+        this.styleClassHeadEl.innerHTML = styles;
+        document.head.append(this.styleClassHeadEl);
+    }
+    setupButtonSize() {
+        const configButtonSize = this.configButtonSize();
+        const doc = document.documentElement;
+        Object.keys(configButtonSize).forEach((keySize) => {
+            const config = get(configButtonSize, keySize);
+            Object.keys(config).forEach((keyType) => {
+                const name = `--libs-ui-button-size-${keySize}-${keyType.replace(/[_]/g, '-')}`;
+                doc.style.setProperty(name, get(config, keyType));
+            });
+        });
+    }
+    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,
+                    background_list: this.backgroundList(),
+                    background_list_hover: this.backgroundListHover(),
+                    background_list_hover_danger: this.backgroundListHoverDanger(),
+                    background_selection: this.backgroundUserSelection(),
+                    border: this.borderColor(),
+                    border_error: this.borderErrorColor(),
+                    text_error: this.textErrorColor(),
+                    icon_hover_danger: this.iconHoverDangerColor(),
+                    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-general{border: dashed 1px var(--libs-ui-color-border, #e6e7ea);}
+    .libs-ui-border-top-dashed-general{border-top: dashed 1px var(--libs-ui-color-border, #e6e7ea);}
+    .libs-ui-border-left-dashed-general{border-left: dashed 1px var(--libs-ui-color-border, #e6e7ea);}
+    .libs-ui-border-right-dashed-general{border-right: dashed 1px var(--libs-ui-color-border, #e6e7ea);}
+    .libs-ui-border-bottom-dashed-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) !important;}
+    .libs-ui-bg-list {background-color: var(--libs-ui-background-list, #f8f9fa);}
+    .libs-ui-bg-list-hover:hover {background-color: var(--libs-ui-background-list-hover, #f8f9fa);}
+    .libs-ui-bg-list-active {background-color:  var(--libs-ui-color-light-3, #f4f8ff);}
+    .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-bg-list-hover-danger:hover {background-color: var(--libs-ui-background-list-hover-danger, #fef5f6); color: var(--libs-ui-color-icon-hover-danger, #f15767) !important; [class*="libs-ui-icon-"],[class*="icon-font-3rd"]{&:before,&:after{color: var(--libs-ui-color-icon-hover-danger, #f15767) !important;}}}
+    .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) !important;}
+    .libs-ui-disable {cursor: not-allowed !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-disable-active-background{background: var(--libs-ui-color-light-4,#91b7fa) !important;}
+    .libs-ui-readonly {cursor: not-allowed !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;}
+    .libs-ui-icon-hover-danger:hover {color: var(--libs-ui-color-icon-hover-danger, #f15767) !important; [class*="libs-ui-icon-"],[class*="icon-font-3rd"]{&:before,&:after{color: var(--libs-ui-color-icon-hover-danger, #f15767) !important;}}}
+    .break-word{word-break: break-word !important;}
+    .libs-ui-shadow {box-shadow: 0 2px 10px 1px rgba(51, 51, 51, 0.1);}
+    .libs-ui-shadow-md {box-shadow: 0 4px 8px 0 rgba(51, 51, 51, 0.1);}
+    .libs-ui-shadow-lg {box-shadow: 0 15px 30px 0 rgba(51, 51, 51, 0.1);}
+    .libs-ui-shadow-top {box-shadow: 0 -5px 5px -5px rgba(51, 51, 51, 0.1);}
+    .libs-ui-shadow-right {box-shadow: -5px 0 5px -5px rgba(51, 51, 51, 0.1);}
+    .libs-ui-shadow-bottom {box-shadow: 0 5px 5px -5px rgba(51, 51, 51, 0.1);}
+    .libs-ui-shadow-left {box-shadow: 5px 0 5px -5px rgba(51, 51, 51, 0.1);}
+    .libs-ui-shadow-sm {box-shadow: 0 1px 2px 0 rgba(51, 51, 51, 0.1);}
+    .libs-ui-shadow-popup {box-shadow: -2px 0 4px 0 rgba(51, 51, 51, 0.1);}
+    .libs-ui-shadow-none {box-shadow: none !important;}
+    .libs-ui-shadow-small {box-shadow: 0px 1px 2px 0px rgba(0,20,51,.04), 0px 1px 1px 0px rgba(0,20,51,.02);}
+    .libs-ui-shadow-medium {box-shadow: 0px 4px 8px 0px rgba(0, 20, 51, 0.04), 0px 1px 1px 0px rgba(0, 20, 51, 0.02);}
+    .libs-ui-shadow-large {box-shadow: 0px 4px 16px 0px rgba(0,20,51,.1), 0px 1px 1px 0px rgba(0,20,51,.02);}
+    .libs-ui-shadow-extra-large {box-shadow: 0px 8px 56px 0px rgba(0,20,51,.05), 0px 1px 1px 0px rgba(0,20,51,.02);}
+    ::-moz-selection {background: var(--libs-ui-color-background-selection, #00000040) !important;}
+    ::selection {background: var(--libs-ui-color-background-selection, #00000040) !important;}
+    `.replace(/\n+/g, '');
+        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.14", ngImport: i0, type: LibsUiConfigProjectService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiConfigProjectService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiConfigProjectService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { LibsUiConfigProjectService, configButtonColor, configButtonStatus, configButtonTab, configHeading, configLinkButton, fontConfig, sizeButtonConfig, styleButtonTab, weights };
+//# sourceMappingURL=libs-ui-services-config-project.mjs.map