@libs-ui/utils 0.2.300 → 0.2.303

package/fesm2022/libs-ui-utils.mjs

@@ -1,4 +1,4 @@
-import { fromEvent, tap, takeUntil, mergeMap, startWith, finalize, Observable, Subject, filter } from 'rxjs';
+import { fromEvent, tap, takeUntil, mergeMap, startWith, finalize, Subject, filter, Observable } from 'rxjs';
 import Quill from 'quill';
 import DeviceDetector from 'device-detector-js';
 import CryptoES from 'crypto-es';
@@ -598,1422 +598,1607 @@ class UtilsHttpParamsRequest extends HttpParams {
 //   "pathVariable-name": '124',
 // };
 
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/**Các hàm tương tự thư viện lodash */
-/**
- * Kiểm tra xem một giá trị có phải là null hoặc undefined hay không
- * @param value Giá trị cần kiểm tra
- * @returns true nếu giá trị là null hoặc undefined, false nếu không
- * @example
- * isNil(null); // true
- * isNil(undefined); // true
- * isNil(0); // false
- * isNil('hello'); // false
- */
-const isNil = (value) => {
-    return value === null || value === undefined;
-};
+let key = '12~@#loqwsxacva(3rdhaq12';
 /**
- * Kiểm tra xem một giá trị có phải là rỗng hay không
- * @param value Giá trị cần kiểm tra
- * @returns true nếu giá trị là null, rỗng hoặc undefined, false nếu không
- * @example
- * isEmpty(null); // true
- * isEmpty(''); // true
- * isEmpty(undefined); // true
- * isEmpty({}); // true
- * isEmpty([]); // true
- * isEmpty([1, 2, 3]); // false
- * isEmpty({ a: 1 }); // false
+ * @description Thiết lập key mã hóa
+ * @param value key mã hóa, độ dài bằng 24 hoặc 32 ký tự.
  */
-const isEmpty = (value) => {
-    while (isSignal(value)) {
-        value = value();
+const setKeyCrypto3rd = (value) => {
+    if (value.length !== 24 && value.length !== 32) {
+        throw Error(`key.length = ${value.length}; Key phải là 1 chuỗi dài 24 hoặc 32 ký tự`);
     }
-    return value === null || value === '' || value === undefined || (typeof value === 'object' && (JSON.stringify(value) === '{}' || JSON.stringify(value) === '[]'));
+    key = value;
 };
-/**
- * Loại bỏ các thuộc tính của đối tượng dựa trên một hàm điều kiện
- * @param objData Đối tượng cần xử lý
- * @param predicate Hàm điều kiện để kiểm tra giá trị của thuộc tính. Nếu hàm trả về true thì thuộc tính đó sẽ bị loại bỏ
- * @returns Đối tượng mới sau khi đã loại bỏ các thuộc tính thỏa mãn điều kiện
- * @example
- * const obj = { a: 1, b: null, c: 3, d: undefined };
- * omitBy(obj, isNil); // { a: 1, c: 3 }
- */
-const omitBy = (objData, predicate) => {
-    if (!objData || typeof objData !== 'object' || Array.isArray(objData)) {
-        return objData;
+const keyStore = () => {
+    return key;
+};
+const encrypt3rd = (plainData) => {
+    if (!keyStore()) {
+        throw Error("lỗi chưa setup key mã hóa");
     }
-    const newObj = {};
-    Object.keys(objData).forEach(key => {
-        const valueOfKey = get(objData, key);
-        if (!predicate(valueOfKey)) {
-            set(newObj, key, valueOfKey);
-        }
-    });
-    return newObj;
+    const key = CryptoES.enc.Hex.parse(keyStore());
+    const iv = CryptoES.enc.Hex.parse(keyStore());
+    const mode = CryptoES.mode.CBC;
+    const padding = CryptoES.pad.Pkcs7;
+    const options = { iv: iv, mode: mode, padding: padding };
+    return CryptoES.AES.encrypt(plainData, key, options).toString();
 };
-/**
- * Lấy giá trị từ đối tượng theo đường dẫn chỉ định
- *
- * Hàm này giúp bạn truy cập vào các thuộc tính sâu bên trong một đối tượng một cách an toàn,
- * tránh lỗi khi thuộc tính không tồn tại.
- *
- * @param obj Đối tượng nguồn cần lấy giá trị
- * @param path Đường dẫn đến thuộc tính cần lấy. Có thể là:
- *   - Chuỗi: 'user.profile.name' hoặc 'items[0].title'
- *   - Mảng: ['user', 'profile', 'name'] hoặc ['items', '0', 'title']
- *   - Chuỗi rỗng '': trả về chính đối tượng gốc
- * @param defaultValue Giá trị mặc định trả về khi không tìm thấy thuộc tính (mặc định: undefined)
- * @param keepLastValueIfSignal Có giữ nguyên signal cuối cùng hay không (mặc định: false - sẽ gọi signal())
- * @returns Giá trị tìm được hoặc giá trị mặc định
- *
- * @example
- * // Ví dụ cơ bản
- * const user = { name: 'John', age: 30 };
- * get(user, 'name'); // 'John'
- * get(user, 'email'); // undefined
- * get(user, 'email', 'no-email'); // 'no-email'
- *
- * @example
- * // Truyền path rỗng - trả về chính đối tượng gốc
- * const data = { name: 'Alice', age: 25 };
- * get(data, ''); // { name: 'Alice', age: 25 } (chính đối tượng data)
- * get(data, '', 'default'); // { name: 'Alice', age: 25 } (bỏ qua defaultValue)
- *
- * @example
- * // Truy cập thuộc tính sâu
- * const data = {
- *   user: {
- *     profile: {
- *       name: 'Alice',
- *       settings: { theme: 'dark' }
- *     }
- *   }
- * };
- * get(data, 'user.profile.name'); // 'Alice'
- * get(data, 'user.profile.settings.theme'); // 'dark'
- * get(data, 'user.profile.avatar', 'default.jpg'); // 'default.jpg'
- *
- * @example
- * // Truy cập mảng
- * const items = [
- *   { name: 'Item 1', price: 100 },
- *   { name: 'Item 2', price: 200 }
- * ];
- * get(items, '[0].name'); // 'Item 1'
- * get(items, '[1].name'); // 'Item 2'
- * get(items, '[2].name', 'Not found'); // 'Not found'
- *
- * @example
- * // Sử dụng với mảng path
- * const nested = { a: { b: { c: 'deep value' } } };
- * get(nested, ['a', 'b', 'c']); // 'deep value'
- * get(nested, ['a', 'b', 'd'], 'default'); // 'default'
- *
- * @example
- * // Trường hợp đặc biệt
- * get(null, 'any.path'); // undefined
- * get(undefined, 'any.path', 'fallback'); // 'fallback'
- */
-const get = (obj, path, defaultValue = undefined, keepLastValueIfSignal) => {
-    if (isNil(obj)) {
-        return defaultValue;
+const decrypt3rd = (encryptedData) => {
+    if (!keyStore()) {
+        throw Error("lỗi chưa setup key mã hóa");
     }
-    while (isSignal(obj)) {
-        obj = obj();
+    const key = CryptoES.enc.Hex.parse(keyStore());
+    const iv = CryptoES.enc.Hex.parse(keyStore());
+    const mode = CryptoES.mode.CBC;
+    const padding = CryptoES.pad.Pkcs7;
+    const options = { iv: iv, mode: mode, padding: padding };
+    return CryptoES.AES.decrypt(encryptedData, key, options).toString(CryptoES.enc.Utf8);
+};
+
+let functionCheck = () => {
+    return window.parent !== window.top;
+};
+const updateFunctionCheckEmbedFrame = (functionCustom) => {
+    functionCheck = functionCustom;
+};
+const isEmbedFrame = () => {
+    return functionCheck();
+};
+
+const ERROR_MESSAGE_EMPTY_VALID = 'i18n_valid_empty_message';
+const ERROR_MESSAGE_PATTEN_VALID = 'i18n_valid_pattern_message';
+const ERROR_MESSAGE_MIN_VALID = 'i18n_message_error_input_min_value';
+const ERROR_MESSAGE_MAX_VALID = 'i18n_message_error_input_max_value';
+const ERROR_MESSAGE_MIN_LENGTH = 'i18n_message_error_input_min_length';
+const ERROR_MESSAGE_MAX_LENGTH = 'i18n_message_error_input_max_length';
+const CHARACTER_DATA_EMPTY = '__';
+const DEFAULT_START_PAGE_0 = 'defaultStartPage0';
+const COMMUNICATE_MICRO_PREFIX_TYPE = '3RD_INTEGRATE_MICRO_SITE_';
+const COMMUNICATE_MICRO_KEY_GET_ALL_MESSAGE = 'MICRO_SITES_ALL_MESSAGE';
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+class UtilsCommunicateMicroKeyGlobal {
+    static KEY_MESSAGE_MODAL = 'LIBS_UI_MODEL_EVENT';
+}
+class UtilsCommunicateMicro {
+    static initdEvent;
+    static subs = new Map();
+    static allMessageSub = new Subject();
+    static initEvent(currentWindow, onDestroy) {
+        if (this.initdEvent) {
+            return;
+        }
+        this.initdEvent = true;
+        if (!this.subs.get(COMMUNICATE_MICRO_KEY_GET_ALL_MESSAGE)) {
+            this.subs.set(COMMUNICATE_MICRO_KEY_GET_ALL_MESSAGE, UtilsCommunicateMicro.allMessageSub);
+        }
+        fromEvent(currentWindow, 'message').pipe(takeUntil(onDestroy)).subscribe(e => {
+            const event = { data: { ...e.data } };
+            const data = event.data;
+            const type = data.type;
+            if (!type) {
+                return this.allMessageSub.next(event);
+            }
+            const sub = UtilsCommunicateMicro.GetMessage(type);
+            if (!type || !data.response) {
+                return;
+            }
+            try {
+                if (type.includes(COMMUNICATE_MICRO_PREFIX_TYPE)) {
+                    data.response = JSON.parse(decrypt3rd(data.response));
+                    sub.next(event);
+                    this.allMessageSub.next(event);
+                    return;
+                }
+                data.response = JSON.parse(decrypt(data.response));
+                sub.next(event);
+                this.allMessageSub.next(event);
+            }
+            catch (error) {
+                console.log(error);
+                sub.next(event);
+                this.allMessageSub.next(event);
+            }
+        });
+        UtilsCommunicateMicro.GetMessage(UtilsCache.typeKeyClearLocalStorage).pipe(filter(e => e.data.response !== UtilsCache.idService), takeUntil(onDestroy)).subscribe(() => {
+            console.log('clear all cache by event');
+            UtilsCache.ClearAll();
+        });
     }
-    if (path === '') {
-        return obj;
+    static PostMessageToParent(data) {
+        data = this.convertData(data);
+        try {
+            if (isEmbedFrame()) {
+                window?.parent?.postMessage(data, "*");
+                return;
+            }
+            window?.top?.postMessage(data, "*");
+        }
+        catch (error) {
+            console.log(error);
+        }
     }
-    if (obj instanceof HttpParams) {
-        return obj.get(`${path}`);
+    static PostMessageToChildren(data) {
+        data = this.convertData(data);
+        const iframes = document.querySelectorAll("iframe");
+        Array.from(iframes).forEach(iframe => {
+            iframe?.contentWindow?.postMessage(data, '*');
+        });
     }
-    if (obj instanceof DOMRect) {
-        return obj[path];
+    static PostMessageToOpener(data) {
+        if (!window.opener) {
+            return;
+        }
+        data = this.convertData(data);
+        window.opener.postMessage(data, '*');
     }
-    const paths = Array.isArray(path) ? path : path.replace(/\[(\d+)]/g, '.$1').split('.').filter(key => key);
-    for (const index in paths) {
-        const key = paths[index];
-        if (obj instanceof CSSStyleDeclaration) {
-            obj = obj[key];
-            continue;
+    static convertData(data) {
+        if (!data || !data.type || !data.response) {
+            return data;
         }
-        if (obj instanceof HTMLElement) {
-            obj = obj[key];
-            continue;
+        data = { ...data };
+        const type = data.type;
+        if (type.includes(COMMUNICATE_MICRO_PREFIX_TYPE)) {
+            try {
+                JSON.parse(decrypt3rd(data.response));
+                return data;
+            }
+            catch (_) {
+                data.response = encrypt3rd(JSON.stringify(data.response));
+                return data;
+            }
         }
-        if (isNil(obj) || !Object.prototype.hasOwnProperty.call(obj, key)) {
-            return defaultValue;
+        try {
+            JSON.parse(decrypt(data.response));
+            return data;
+        }
+        catch (_) {
+            data.response = encrypt(JSON.stringify(data.response));
+            return data;
         }
-        const val = isSignal(obj[key]) && !keepLastValueIfSignal ? obj[key]() : obj[key];
-        obj = val;
-    }
-    return obj;
-};
-/**
- * Thiết lập giá trị cho một thuộc tính trong đối tượng theo đường dẫn chỉ định
- * @param obj Đối tượng cần thiết lập giá trị
- * @param path Đường dẫn đến thuộc tính, có thể là chuỗi (vd: 'a.b.c') hoặc mảng (vd: ['a', 'b', 'c'])
- * @param value Giá trị cần thiết lập
- * @returns Đối tượng sau khi đã thiết lập giá trị
- * @throws Error nếu tham số đầu tiên không phải là đối tượng
- * @example
- * const obj = { a: { b: 1 } };
- * set(obj, 'a.b', 2); // { a: { b: 2 } }
- */
-const set = (obj, path, value) => {
-    if (!obj || (typeof obj !== "object" && !isSignal(obj)) || (isSignal(obj) && typeof obj() !== "object")) {
-        throw new Error("The first argument must be an object");
-    }
-    if (obj instanceof HttpParams) {
-        return obj.set(`${path}`, value);
     }
-    const pathArray = Array.isArray(path) ? path : path.replace(/\[(\d+)]/g, '.[$1]').split('.').filter(key => key);
-    let currentObjectByKey = isSignal(obj) ? obj() : obj;
-    let preObjectByKey = obj;
-    pathArray.forEach((key, index) => {
-        if (index < pathArray.length - 1) {
-            if (!(key in currentObjectByKey) || (typeof currentObjectByKey[key] !== "object" && !isSignal(currentObjectByKey[key]))) {
-                const nextKey = pathArray[index + 1];
-                key = key.replace(/\[(\d+)]/g, '$1');
-                currentObjectByKey[key] = /\[(\d+)]/g.test(nextKey) ? [] : {};
+    static GetMessage(messageType) {
+        if (!this.initdEvent) {
+            throw Error("chưa khơi tạo hàm lắng nghe sự kiện, gọi UtilsCommunicateMicro.initEvent(window) tại root component");
+        }
+        if (typeof messageType === 'string') {
+            let sub = this.subs.get(messageType);
+            if (!sub) {
+                sub = new Subject();
+                this.subs.set(messageType, sub);
+                return sub;
             }
-            currentObjectByKey = key ? currentObjectByKey[key] : currentObjectByKey;
-            preObjectByKey = currentObjectByKey;
-            currentObjectByKey = isSignal(currentObjectByKey) ? currentObjectByKey() : currentObjectByKey;
-            return;
+            return sub;
         }
-        if (typeof currentObjectByKey !== "object") {
-            return;
+        if (!Array.isArray(messageType) || !messageType.length) {
+            throw new Error('message type empty');
         }
-        // Gán giá trị ở cuối đường dẫn
-        key = key.replace(/\[(\d+)]/g, '$1');
-        const valueOfKey = currentObjectByKey[key];
-        const valueOfKeyIsSignal = isSignal(valueOfKey);
-        if (valueOfKeyIsSignal && (typeof valueOfKey() !== 'object' || valueOfKey() === null)) {
-            valueOfKey.set(isSignal(value) ? value() : value);
-            return;
+        if (messageType.length === 1) {
+            return this.GetMessage(messageType[0]);
         }
-        if (isSignal(preObjectByKey)) {
-            preObjectByKey.update((data) => {
-                const dataOfKey = data[key];
-                if (isNil(dataOfKey) || !valueOfKeyIsSignal) {
-                    data[key] = value;
-                }
-                if (valueOfKeyIsSignal) {
-                    valueOfKey.set(isSignal(value) ? value() : value);
-                }
-                if (Array.isArray(data)) {
-                    return [...data];
-                }
-                return { ...data };
+        const types = messageType.sort().join(';');
+        let sub = this.subs.get(types);
+        if (sub) {
+            return sub;
+        }
+        sub = new Subject();
+        this.subs.set(types, sub);
+        this.initSubject(sub, messageType);
+        return sub;
+    }
+    static initSubject(subRoot, messageType) {
+        messageType.forEach(key => {
+            this.GetMessage(key).subscribe(e => {
+                subRoot.next(e);
             });
+        });
+    }
+}
+
+class UtilsLanguageConstants {
+    static VI = "vi"; // Tiếng Việt
+    static EN = "en"; // Tiếng Anh
+    static FR = "fr"; // Tiếng Pháp
+    static DE = "de"; // Tiếng Đức
+    static ES = "es"; // Tiếng Tây Ban Nha
+    static ZH = "zh"; // Tiếng Trung (Giản thể)
+    static ZH_TW = "zh-TW"; // Tiếng Trung (Phồn thể)
+    static JA = "ja"; // Tiếng Nhật
+    static KO = "ko"; // Tiếng Hàn
+    static RU = "ru"; // Tiếng Nga
+    static IT = "it"; // Tiếng Ý
+    static PT = "pt"; // Tiếng Bồ Đào Nha
+    static TH = "th"; // Tiếng Thái
+    static ID = "id"; // Tiếng Indonesia
+    static MS = "ms"; // Tiếng Malaysia
+    static AR = "ar"; // Tiếng Ả Rập
+    static HI = "hi"; // Tiếng Hindi
+    static BN = "bn"; // Tiếng Bengal
+    static TR = "tr"; // Tiếng Thổ Nhĩ Kỳ
+    static NL = "nl"; // Tiếng Hà Lan
+    static KM = "km"; // Tiếng Khmer (Campuchia)
+    static LO = "lo"; // Tiếng Lào
+    static MY = "my"; // Tiếng Miến Điện (Myanmar)
+    static TL = "tl"; // Tiếng Tagalog (Philippines)
+    static CEB = "ceb"; // Tiếng Cebuano (Philippines)
+    static JV = "jv"; // Tiếng Java (Indonesia)
+    static SU = "su"; // Tiếng Sundanese (Indonesia)
+    // Ngôn ngữ mặc định
+    static defaultLang = UtilsLanguageConstants.VI;
+    // Danh sách các ngôn ngữ được hỗ trợ
+    static supportedLanguages = new Set([
+        UtilsLanguageConstants.VI,
+        UtilsLanguageConstants.EN,
+        UtilsLanguageConstants.FR,
+        UtilsLanguageConstants.DE,
+        UtilsLanguageConstants.ES,
+        UtilsLanguageConstants.ZH,
+        UtilsLanguageConstants.ZH_TW,
+        UtilsLanguageConstants.JA,
+        UtilsLanguageConstants.KO,
+        UtilsLanguageConstants.RU,
+        UtilsLanguageConstants.IT,
+        UtilsLanguageConstants.PT,
+        UtilsLanguageConstants.TH,
+        UtilsLanguageConstants.ID,
+        UtilsLanguageConstants.MS,
+        UtilsLanguageConstants.AR,
+        UtilsLanguageConstants.HI,
+        UtilsLanguageConstants.BN,
+        UtilsLanguageConstants.TR,
+        UtilsLanguageConstants.NL,
+        UtilsLanguageConstants.KM,
+        UtilsLanguageConstants.LO,
+        UtilsLanguageConstants.MY,
+        UtilsLanguageConstants.TL,
+        UtilsLanguageConstants.CEB,
+        UtilsLanguageConstants.JV,
+        UtilsLanguageConstants.SU,
+    ]);
+    /**
+     * Kiểm tra xem ngôn ngữ đầu vào có được hỗ trợ không
+     * @param lang Mã ngôn ngữ cần kiểm tra
+     * @returns True nếu được hỗ trợ, False nếu không
+     */
+    static isSupported(lang) {
+        return UtilsLanguageConstants.supportedLanguages.has(lang);
+    }
+}
+
+/* eslint-disable no-async-promise-executor */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+class UtilsCache {
+    static CACHE_EXPIRE_TIME_DEFAULT = 5 * 60;
+    static CACHE_EXPIRE_NONE = -1;
+    static idService = uuid();
+    static typeKeyClearLocalStorage = 'LIBS_UI_CLEAR_LOCAL_STORAGE_EVENT';
+    static languageKeyCache = 'SR3xQKxHgffiCevPQRralg';
+    static listKeyKeepWhenClearALll = Array();
+    static initdEvent;
+    static storage;
+    static dbName = 'libs-ui-cache';
+    static itemIndexByKey = 'key';
+    static dbVersion = 1;
+    static db = null;
+    static init(config) {
+        if (this.initdEvent) {
             return;
         }
-        if (valueOfKeyIsSignal) {
-            valueOfKey.set(isSignal(value) ? value() : value);
-            return;
+        this.initdEvent = true;
+        if (config.indexedDBName) {
+            this.dbName = config.indexedDBName;
+        }
+        if (config.typeKeyClearLocalStorage) {
+            this.typeKeyClearLocalStorage = config.typeKeyClearLocalStorage;
+        }
+        if (config.listKeyKeepWhenClearAll) {
+            this.listKeyKeepWhenClearALll = config.listKeyKeepWhenClearAll;
+        }
+        if (config.languageKeyCache) {
+            this.languageKeyCache = config.languageKeyCache;
         }
-        currentObjectByKey[key] = value;
-    });
-    return obj;
-};
-/**
- * Tạo một bản sao sâu của một đối tượng hoặc giá trị bất kỳ
- * @param data Dữ liệu cần sao chép
- * @param options Tùy chọn cấu hình
- * @param options.ignoreSignal Nếu true, sẽ không sao chép các signal mà trả về signal gốc
- * @param seen WeakMap để theo dõi các tham chiếu đã được sao chép, tránh lặp vô hạn với các tham chiếu vòng
- * @returns Bản sao sâu của dữ liệu đầu vào
- * @example
- * const obj = {
- *   a: 1,
- *   b: { c: 2 },
- *   d: [1, 2, 3]
- * };
- * const clone = cloneDeep(obj);
- * // clone là một bản sao hoàn toàn độc lập của obj
- */
-const cloneDeep = (data, options = { ignoreSignal: false }, seen = new WeakMap()) => {
-    if (data === null || (typeof data !== 'object' && !isSignal(data))) {
-        return data;
-    }
-    if (seen.has(data)) {
-        return seen.get(data);
-    }
-    if (data instanceof HttpParams) {
-        return new UtilsHttpParamsRequest(undefined, data);
     }
-    if (data instanceof Date) {
-        return new Date(data.getTime());
+    static setLang(lang) {
+        if (!UtilsLanguageConstants.isSupported(lang)) {
+            throw Error(`Language not support ${lang}`);
+        }
+        this.Set(this.languageKeyCache, lang, this.CACHE_EXPIRE_NONE);
     }
-    if (data instanceof RegExp) {
-        return new RegExp(data.source, data.flags);
+    static getLang() {
+        return this.Get(this.languageKeyCache, UtilsLanguageConstants.defaultLang);
     }
-    if (data instanceof Map) {
-        const mapCopy = new Map();
-        seen.set(data, mapCopy);
-        data.forEach((val, key) => {
-            mapCopy.set(cloneDeep(key, options, seen), cloneDeep(val, options, seen));
-        });
-        return mapCopy;
-    }
-    if (data instanceof Set) {
-        const setCopy = new Set();
-        seen.set(data, setCopy);
-        data.forEach(val => {
-            setCopy.add(cloneDeep(val, options, seen));
+    static openDB() {
+        return new Promise(resolve => {
+            const request = indexedDB.open(this.dbName, this.dbVersion);
+            request.onupgradeneeded = (event) => {
+                const db = event.target.result;
+                if (!db.objectStoreNames.contains(this.dbName)) {
+                    const objectStore = db.createObjectStore(this.dbName, { keyPath: this.itemIndexByKey });
+                    objectStore.createIndex(this.itemIndexByKey, this.itemIndexByKey, { unique: true });
+                }
+            };
+            request.onsuccess = () => {
+                this.db = request.result;
+                resolve(true);
+            };
+            request.onerror = (event) => {
+                console.trace('Error opening IndexedDB:', event);
+                resolve(false);
+            };
         });
-        return setCopy;
-    }
-    if (Array.isArray(data)) {
-        seen.set(data, data.map(item => cloneDeep(item, options, seen)));
-        return seen.get(data);
-    }
-    if (data instanceof File || data instanceof Blob || Object.prototype.toString.call(data) === '[object File]') {
-        return data;
-    }
-    if (data instanceof TemplateRef || data instanceof ElementRef || data instanceof Element || data instanceof Promise || data instanceof Observable) {
-        return data;
     }
-    if (isSignal(data)) {
-        if (options?.ignoreSignal) {
-            return data;
+    static async getObjectStore() {
+        if (!this.db) {
+            await this.openDB();
         }
-        seen.set(data, signal(cloneDeep(data(), options, seen)));
-        return seen.get(data);
+        const transaction = this.db?.transaction([this.dbName], 'readwrite');
+        if (!transaction) {
+            return null;
+        }
+        return transaction.objectStore(this.dbName);
     }
-    const result = {};
-    seen.set(data, result);
-    for (const key in data) {
-        const value = data[key];
-        if (value instanceof HttpParams) {
-            result[key] = new UtilsHttpParamsRequest(undefined, value);
-            continue;
+    static get LocalStorage() {
+        try {
+            if (typeof window.localStorage !== 'undefined') {
+                const OS = getPlatFromBrowser();
+                if (OS.includes('Safari') && parseFloat(OS.split(' ').pop() || '0') >= 16) {
+                    return this.getLocalStorageFakeOnSafari();
+                }
+                return localStorage;
+            }
+            return this.getLocalStorageFake();
         }
-        if (value instanceof TemplateRef || value instanceof ElementRef || value instanceof Element || value instanceof Promise || value instanceof Observable) {
-            result[key] = value;
-            continue;
+        catch (error) {
+            console.trace(`LocalStorage `, error);
+            return this.getLocalStorageFake();
         }
-        if (Object.prototype.hasOwnProperty.call(data, key)) {
-            result[key] = cloneDeep(value, options, seen);
+    }
+    static getLocalStorageFakeOnSafari() {
+        if (typeof window.localStorage !== 'undefined' && !this.storage && Object.keys(localStorage).length) {
+            this.storage = { ...localStorage };
         }
+        return {
+            setItem: (key, value) => {
+                localStorage.setItem(key, value);
+                this.storage[key] = value;
+            },
+            getItem: (key) => {
+                const value = localStorage.getItem(key);
+                if (value) {
+                    return value;
+                }
+                if (!this.storage || isNil(this.storage[key])) {
+                    return null;
+                }
+                localStorage.setItem(key, this.storage[key]);
+                return this.storage?.[key];
+            },
+            removeItem: (key) => {
+                delete this.storage?.[key];
+                localStorage.removeItem(key);
+            },
+            clear: () => {
+                this.storage = {};
+                localStorage.clear();
+            }
+        };
     }
-    return result;
-};
-/**
- * Chuyển đổi một mảng các đối tượng thành một đối tượng với khóa được chỉ định
- * @param data Mảng các đối tượng cần chuyển đổi
- * @param key Tên thuộc tính được sử dụng làm khóa trong đối tượng kết quả
- * @returns Đối tượng với các giá trị từ mảng được đánh key theo thuộc tính đã chỉ định
- * @example
- * const data = [
- *   { id: 1, name: 'John' },
- *   { id: 2, name: 'Jane' }
- * ];
- * keyBy(data, 'id');
- * // Kết quả: {
- * //   '1': { id: 1, name: 'John' },
- * //   '2': { id: 2, name: 'Jane' }
- * // }
- */
-const keyBy = (data, key) => {
-    if (!data || !data.length || !key) {
-        return {};
+    static getLocalStorageFake() {
+        if (!this.storage) {
+            this.storage = {};
+        }
+        return {
+            setItem: (key, value) => {
+                this.storage[key] = value;
+            },
+            getItem: (key) => {
+                return this.storage?.[key];
+            },
+            removeItem: (key) => {
+                delete this.storage?.[key];
+            },
+            clear: () => {
+                this.storage = {};
+            }
+        };
     }
-    return data.reduce((dir, nextItem) => {
-        const valueOfKey = get(nextItem, key);
-        if (typeof valueOfKey !== 'string' && typeof valueOfKey !== 'number' && typeof valueOfKey !== 'boolean') {
-            return dir;
+    static async GetAsync(key, default_value, isKeyMD5 = false) {
+        key = isKeyMD5 ? key : md5(key);
+        return new Promise(async (resolve) => {
+            const objectStore = await this.getObjectStore();
+            if (!objectStore) {
+                return resolve(default_value);
+            }
+            const request = objectStore.get(key);
+            request.onsuccess = () => {
+                if (!request.result) {
+                    return resolve(default_value);
+                }
+                const data = JSON.parse(decrypt(request.result.value));
+                if (data.expire === this.CACHE_EXPIRE_NONE) {
+                    return resolve(data.json);
+                }
+                const currentMillisecond = (new Date().valueOf() / 1000);
+                if (data.expire < currentMillisecond) {
+                    return resolve(default_value);
+                }
+                return resolve(data.json);
+            };
+            request.onerror = () => {
+                console.trace(`Get key ${key} Error, return default value: ${default_value}`);
+                return resolve(default_value);
+            };
+        });
+    }
+    static Get(key, default_value) {
+        if (!key) {
+            return this.GetDefaultValueBySpecificKey(key, default_value);
         }
-        if (!Object.keys(dir).includes(`${valueOfKey}`)) {
-            dir[`${valueOfKey}`] = nextItem;
+        const cachedData = this.LocalStorage.getItem(key);
+        if (!cachedData) {
+            return this.GetDefaultValueBySpecificKey(key, default_value);
         }
-        return dir;
-    }, {});
-};
-/**
- * Nhóm các đối tượng trong một mảng thành các nhóm dựa trên một thuộc tính cụ thể
- * @param data Mảng các đối tượng cần nhóm
- * @param key Tên thuộc tính được sử dụng làm khóa nhóm
- * @returns Đối tượng với các giá trị từ mảng được nhóm theo thuộc tính đã chỉ định
- * @example
- * const data = [
- *   { id: 1, name: 'John' },
- *   { id: 2, name: 'Jane' },
- *   { id: 1, name: 'John' }
- * ];
- * groupBy(data, 'id');
- * // Kết quả: {
- * //   '1': [
- * //     { id: 1, name: 'John' },
- * //     { id: 1, name: 'John' }
- * //   ],
- * //   '2': [
- * //     { id: 2, name: 'Jane' }
- * // }
- */
-const groupBy = (data, key) => {
-    if (!data || !data.length || !Object.keys(get(data, '0')).length || !key) {
-        return {};
-    }
-    return data.reduce((dir, nextItem) => {
-        const valueOfKey = get(nextItem, key);
-        if (typeof valueOfKey !== 'string' && typeof valueOfKey !== 'number' && typeof valueOfKey !== 'boolean') {
-            return dir;
+        try {
+            const data = JSON.parse(decrypt(cachedData));
+            if (data.expire === this.CACHE_EXPIRE_NONE) {
+                return data.value ?? default_value;
+            }
+            const currentMillisecond = (new Date().valueOf() / 1000);
+            if (data.expire < currentMillisecond) {
+                return this.GetDefaultValueBySpecificKey(key, default_value);
+            }
+            return data.value;
         }
-        if (!Object.keys(dir).includes(`${valueOfKey}`)) {
-            dir[`${valueOfKey}`] = [];
+        catch (error) {
+            console.trace(`Get key ${key} Error, return default value: ${default_value}`, error);
+            return this.GetDefaultValueBySpecificKey(key, default_value);
         }
-        dir[`${valueOfKey}`].push(nextItem);
-        return dir;
-    }, {});
-};
-/**
- * Tạo một mảng các số từ giá trị bắt đầu đến giá trị kết thúc với bước nhảy tùy chọn
- * @param start Giá trị bắt đầu của dãy số. Nếu chỉ có một tham số, đây sẽ là giá trị kết thúc và giá trị bắt đầu sẽ là 0
- * @param end Giá trị kết thúc của dãy số (tùy chọn)
- * @param step Bước nhảy giữa các số trong dãy (tùy chọn). Mặc định là 1 nếu end > start, -1 nếu end < start
- * @returns Mảng các số từ start đến end với bước nhảy step
- * @example
- * range(4);      // [0, 1, 2, 3]
- * range(1, 5);   // [1, 2, 3, 4]
- * range(0, 20, 5); // [0, 5, 10, 15]
- * range(5, 2);   // [5, 4, 3]
- */
-const range = (start, end, step) => {
-    if (end === undefined || end === null) {
-        end = start;
-        start = 0;
     }
-    if (!step) {
-        step = end < 0 ? -1 : 1;
-    }
-    if (end < start && step > 0) {
-        step *= -1;
+    static GetDefaultValueBySpecificKey(key, default_value) {
+        return default_value;
     }
-    const valueStartByStep = step + start;
-    const direction = start < end ? 'asc' : 'desc';
-    if ((direction === 'asc' && (valueStartByStep < start || valueStartByStep > end)) || (direction === 'desc' && (valueStartByStep > start || valueStartByStep < end))) {
-        return [start];
+    static async SetAsync(key, value, expireTimeBySecond = this.CACHE_EXPIRE_TIME_DEFAULT, isKeyMD5 = false) {
+        return new Promise(async (resolve) => {
+            const objectStore = await this.getObjectStore();
+            key = isKeyMD5 ? key : md5(key);
+            try {
+                const currentMillisecond = expireTimeBySecond === this.CACHE_EXPIRE_NONE ? this.CACHE_EXPIRE_NONE : (new Date().valueOf() / 1000) + expireTimeBySecond;
+                const data = {
+                    value: encrypt(JSON.stringify({ json: value, expire: currentMillisecond })),
+                };
+                data[this.itemIndexByKey] = key;
+                if (!objectStore) {
+                    console.trace(`Can not open object store`);
+                    return resolve({ key, messageError: 'Can not open object store' });
+                }
+                const request = objectStore?.put(data);
+                request.onsuccess = () => {
+                    console.log(`Set key ${key} Success`);
+                    resolve(request.result);
+                };
+                request.onerror = (error) => {
+                    console.trace(`Set key ${key} Error`);
+                    resolve({ key, messageError: get(error, 'message') });
+                };
+            }
+            catch (error) {
+                console.trace(`Set key ${key} Error`);
+                resolve({ key, messageError: get(error, 'message') });
+            }
+        });
     }
-    const arr = new Array();
-    for (let index = 0; index < Math.abs(end - start); index++) {
-        let value = start + index * step;
-        if (index === 0) {
-            value = start;
+    static Set(key, value, expireTimeBySecond = this.CACHE_EXPIRE_TIME_DEFAULT) {
+        const currentMillisecond = expireTimeBySecond === this.CACHE_EXPIRE_NONE ? this.CACHE_EXPIRE_NONE : (new Date().valueOf() / 1000) + expireTimeBySecond;
+        const data = {
+            value: value,
+            expire: currentMillisecond
+        };
+        try {
+            this.LocalStorage.setItem(key, encrypt(JSON.stringify(data)));
+            return true;
         }
-        if ((direction === 'asc' && (value < start || value > end)) || (direction === 'desc' && (value > start || value < end))) {
-            return arr;
+        catch (error) {
+            console.trace(`Set key ${key} Error`, error);
+            return false;
         }
-        arr.push(value);
     }
-    return arr;
-};
-/**
- * So sánh hai giá trị bất kỳ có bằng nhau hay không
- * @param value1 Giá trị thứ nhất cần so sánh
- * @param value2 Giá trị thứ hai cần so sánh
- * @param exactlyPosition Có so sánh chính xác vị trí các phần tử trong mảng hay không
- * @returns true nếu hai giá trị bằng nhau, false nếu không bằng nhau
- * @example
- * isEqual([1,2,3], [1,2,3]); // true
- * isEqual([1,2,3], [3,2,1]); // true khi exactlyPosition = false
- * isEqual([1,2,3], [3,2,1]); // false khi exactlyPosition = true
- * isEqual({a:1}, {a:1}); // true
- */
-const isEqual = (value1, value2, options) => {
-    const { exactlyPosition = false, ignoreExactlyDataType = false } = options || {};
-    if (value1 === value2 || (value1 === null && value2 === null) || (value1 === undefined && value2 === undefined)) {
-        return true;
+    static async ClearAsync(key, isMD5 = false) {
+        return new Promise(async (resolve) => {
+            const objectStore = await this.getObjectStore();
+            if (!objectStore) {
+                return resolve();
+            }
+            const request = objectStore.delete(isMD5 ? key : md5(key));
+            request.onsuccess = () => {
+                resolve({ clearSuccess: true });
+            };
+            request.onerror = (event) => {
+                console.trace('Error deleting Key:', get(event.target.error, 'message'));
+                resolve({ messageError: get(event.target.error, 'message'), clearSuccess: false });
+            };
+        });
     }
-    if (ignoreExactlyDataType) {
-        return isEqual(isNil(value1) ? undefined : `${value1}`, isNil(value2) ? undefined : `${value2}`);
+    static Clear(key) {
+        if (key.includes('kc-callback-')) {
+            return;
+        }
+        this.LocalStorage.removeItem(key);
     }
-    // Handle signals
-    while (isSignal(value1)) {
-        value1 = value1();
+    static ClearAllAsync() {
+        return new Promise(async (resolve) => {
+            const objectStore = await this.getObjectStore();
+            if (!objectStore) {
+                return resolve();
+            }
+            const request = objectStore.clear();
+            request.onsuccess = () => {
+                console.log('clear all successfully');
+                resolve({ clearSuccess: true });
+            };
+            request.onerror = (event) => {
+                console.trace('Error deleting key:', get(event.target.error, 'message'));
+                resolve({ messageError: get(event.target.error, 'message'), clearSuccess: false });
+            };
+        });
     }
-    while (isSignal(value2)) {
-        value2 = value2();
+    static ClearAll() {
+        if (isEmbedFrame()) {
+            const data = {
+                type: this.typeKeyClearLocalStorage,
+                response: {
+                    idEvent: this.idService
+                }
+            };
+            UtilsCommunicateMicro.PostMessageToParent(data);
+        }
+        const keys = [...this.listKeyKeepWhenClearALll];
+        Object.keys(this.LocalStorage).forEach(key => {
+            if (key.includes('kc-callback-')) {
+                keys.push(key);
+            }
+        });
+        const stores = this.GetDataByKeys(Array.from(keys));
+        this.LocalStorage.clear();
+        this.SetDataByKey(stores);
     }
-    if (typeof value1 !== 'object' || typeof value2 !== 'object' || (Array.isArray(value1) && !Array.isArray(value2)) || (!Array.isArray(value1) && Array.isArray(value2))) {
-        return false;
+    static GetDataByKeys(keys) {
+        const stores = new Map();
+        keys.forEach((key) => {
+            if (key.includes('kc-callback-')) {
+                stores.set(key, this.LocalStorage.getItem(key));
+                return;
+            }
+            stores.set(key, this.Get(key));
+        });
+        return stores;
     }
-    if (Array.isArray(value1)) {
-        if (value1.length !== value2.length) {
-            return false;
-        }
-        if (!exactlyPosition) {
-            return !value1.some(item => !value2.includes(item));
+    static SetDataByKey(stores) {
+        stores.forEach((value, key) => {
+            if (key.includes('kc-callback-')) {
+                this.LocalStorage.setItem(key, value);
+                return;
+            }
+            if (key === this.languageKeyCache) {
+                return this.setLang(value);
+            }
+            this.Set(key, value, this.CACHE_EXPIRE_NONE);
+        });
+    }
+    static DeleteKeyStartWithAsync(keyCacheStartWith, isKeyMD5 = false) {
+        return new Promise(async (resolve) => {
+            const objectStore = await this.getObjectStore();
+            if (!objectStore) {
+                return resolve({});
+            }
+            // Lấy tất cả các keys từ index
+            const request = objectStore.getAll();
+            keyCacheStartWith = isKeyMD5 ? keyCacheStartWith : md5(keyCacheStartWith);
+            request.onsuccess = (e) => {
+                const data = e.target.result;
+                if (!Array.isArray(data)) {
+                    return resolve({});
+                }
+                data.forEach(obj => {
+                    if (obj[this.itemIndexByKey].startsWith(keyCacheStartWith)) {
+                        this.ClearAsync(obj[this.itemIndexByKey], true);
+                    }
+                });
+                return resolve({});
+            };
+            request.onerror = () => {
+                return resolve({});
+            };
+        });
+    }
+    static DeleteKeyStartWith(keyCache, isMD5 = false) {
+        keyCache = isMD5 ? md5(keyCache) : keyCache;
+        const keys = Object.keys(this.LocalStorage);
+        if (!keys || !keys.length) {
+            return;
         }
-        return !value1.some((item, index) => !isEqual(item, value2[index], options));
+        keys.forEach(key => {
+            if (key.startsWith(keyCache)) {
+                this.Clear(key);
+            }
+        });
     }
-    if (Object.keys(value1).length !== Object.keys(value2).length) {
-        return false;
+    static DeleteDatabaseIndexDB(dbName) {
+        return new Promise((resolve) => {
+            dbName = (dbName || this.dbName);
+            const request = indexedDB.deleteDatabase(dbName);
+            request.onsuccess = () => {
+                console.trace('Database deleted successfully');
+                resolve({ deleteSuccess: true });
+            };
+            request.onerror = (event) => {
+                console.trace('Error deleting database:', event.target.error);
+                resolve({ messageError: get(event.target.error, 'message'), deleteSuccess: false });
+            };
+            request.onblocked = () => {
+                console.trace('Delete request is blocked');
+                resolve({ messageError: 'Delete request is blocked', deleteSuccess: false });
+            };
+        });
     }
-    return !Object.keys(value1).some((key) => !isEqual(value1[key], value2[key], options));
+}
+
+dayjs.extend(localeData);
+dayjs.extend(updateLocale);
+dayjs.extend(utc);
+dayjs.extend(timezone);
+dayjs.extend(customParseFormat);
+let timeZoneSetup = "Asia/Ho_Chi_Minh";
+const setDefaultTimeZone = (localeZone = timeZoneSetup) => {
+    timeZoneSetup = localeZone;
+    dayjs.tz.setDefault(localeZone);
+};
+let functionFormatDate = undefined;
+const updateFunctionFormatDate = (functionCustom) => {
+    functionFormatDate = functionCustom;
 };
 /**
- * Loại bỏ các phần tử trùng lặp trong mảng dựa trên một thuộc tính chỉ định
- * @param data Mảng dữ liệu cần xử lý
- * @param key Tên thuộc tính dùng để so sánh trùng lặp. Nếu không có key thì so sánh trực tiếp giá trị
- * @returns Mảng mới chứa các phần tử không trùng lặp
- * @example
- * const arr = [
- *   { id: 1, name: 'A' },
- *   { id: 2, name: 'B' },
- *   { id: 1, name: 'C' }
- * ];
- * uniqBy(arr, 'id'); // [{ id: 1, name: 'A' }, { id: 2, name: 'B' }]
- *
- * const numbers = [1, 2, 2, 3, 3];
- * uniqBy(numbers); // [1, 2, 3]
- *
- * const numbersSignal = [signal(1), signal(2), signal(3), signal(2), signal(5), signal(4), signal(1), signal(6), signal(7), signal(6)];
- * uniqBy(numbersSignal); // [signal(1), signal(2), signal(3), signal(5), signal(4), signal(6), signal(7)]
- */
-const uniqBy = (data, key) => {
-    if (!key || !data?.length || typeof get(data, '0') !== 'object') {
-        // Xử lý mảng chứa signal values
-        if (data[0] && isSignal(data[0])) {
-            const seen = new Set();
-            return data.filter(item => {
-                const value = `${get(item, '')}`;
-                if (seen.has(value)) {
-                    return false;
-                }
-                seen.add(value);
-                return true;
-            });
-        }
-        // Xử lý mảng primitive values
-        return Array.from(new Set(data));
+  * @description Lấy đối tượng dayjs theo config
+  * @param config nếu không có config sẽ trả về đối tượng dayjs là thời gian hiện tại
+  * @param config.date thời gian cần lấy
+  * @param config.returnDayjsIfConfigDateNotExist true nếu muốn trả về đối tượng dayjs nếu config.date không có
+  * @param config.utc true nếu muốn lấy thời gian UTC
+  * @param config.formatOfDate định dạng thời gian đang được truyền vào
+*/
+const getDayjs = (config) => {
+    if (!config) {
+        return dayjs().tz();
     }
-    const dataUnique = keyBy(data, key);
-    return Object.keys(dataUnique).map(key => dataUnique[key]);
-};
-const generateInterface = (obj, interfaceName) => {
-    const generateType = (value) => {
-        if (value === null) {
-            return 'null';
-        }
-        const type = typeof value;
-        if (type === 'string') {
-            return 'string';
-        }
-        if (type === 'number') {
-            return 'number';
-        }
-        if (type === 'boolean') {
-            return 'boolean';
-        }
-        if (type === 'undefined') {
-            return 'any';
-        }
-        if (value instanceof Date) {
-            return 'Date';
-        }
-        if (value instanceof RegExp) {
-            return 'RegExp';
-        }
-        if (Array.isArray(value)) {
-            if (value.length === 0) {
-                return 'Array<any>';
-            }
-            return `Array<${generateType(value[0])}>`;
-        }
-        if (type === 'object') {
-            let interfaceStr = '{\n';
-            for (const key in value) {
-                if (Object.prototype.hasOwnProperty.call(value, key)) {
-                    const valueType = generateType(value[key]);
-                    interfaceStr += `  ${key}: ${valueType};\n`;
-                }
-            }
-            interfaceStr += '}';
-            return interfaceStr;
-        }
-        return 'any';
-    };
-    const interfaceStr = `interface ${interfaceName} ${generateType(obj)}`;
-    return interfaceStr;
-};
-
-;
-const step = 20;
-const percent = 0.05;
-const colorStepContrastFromOrigin = (color, stepNumber) => {
-    return colorContrastFromOrigin(color).find(item => item.step === stepNumber);
-};
-const colorContrastFromOrigin = (color) => {
-    const parsedColorsArray = parseColorValues(color);
-    const colors = [];
-    let calculatedShades = [];
-    let calculatedTints = [];
-    if (parsedColorsArray !== null) {
-        for (let i = 0; i < parsedColorsArray.length; i++) {
-            calculatedShades = calculateShades(parsedColorsArray[i]);
-            calculatedTints = calculateTints(parsedColorsArray[i]);
+    config.date = !config.date && config.returnDayjsIfConfigDateNotExist ? dayjs().tz() : config.date;
+    if (typeof config.date === 'number') {
+        config.date = dayjs.unix(config.date);
+    }
+    if (!config.date) {
+        return undefined;
+    }
+    let { date, utc, formatOfDate } = config;
+    while (isSignal(date)) {
+        date = date();
+    }
+    while (isSignal(utc)) {
+        utc = utc();
+    }
+    while (isSignal(formatOfDate)) {
+        formatOfDate = formatOfDate();
+    }
+    if (utc) {
+        if (formatOfDate) {
+            return dayjs(date, formatOfDate).utc();
         }
-        for (let i = 0; i <= step; i++) {
-            colors.push({ step: i * 5, label: `${i * 5}%`, dark: `#${calculatedShades[i]}`, light: `#${calculatedTints[i]}` });
+        const dateInputIsUTC = (dayjs.isDayjs(date) && date.isUTC()) || (typeof date === 'string' && date.includes('Z'));
+        if (dateInputIsUTC) {
+            return dayjs(date);
         }
+        return dayjs(date).utc();
     }
-    return colors;
-};
-const parseColorValues = (colorValues) => {
-    let colorValuesArray = colorValues.match(/\b[0-9A-Fa-f]{3}\b|[0-9A-Fa-f]{6}\b/g);
-    if (colorValuesArray) {
-        colorValuesArray = colorValuesArray.map((item) => {
-            if (item.length === 3) {
-                let newItem = item.toString().split('');
-                newItem = newItem.reduce((acc, it) => {
-                    return acc + it + it;
-                }, '');
-                return newItem;
-            }
-            return item;
-        });
+    if (typeof date === 'string' && !date.includes('Z') && !date.includes('+')) {
+        return (formatOfDate ? dayjs.tz(date, formatOfDate, config.localeZone || timeZoneSetup) : dayjs.tz(date, config.localeZone || timeZoneSetup));
     }
-    return colorValuesArray;
-};
-const calculateShades = (colorValue) => {
-    return calculate(colorValue, rgbShade).concat("000000");
-};
-const calculateTints = (colorValue) => {
-    return calculate(colorValue, rgbTint).concat("ffffff");
+    return (formatOfDate ? dayjs(date, formatOfDate) : dayjs(date)).tz();
 };
-const calculate = (colorValue, shadeOrTint) => {
-    const color = hexToRGB(colorValue);
-    const shadeValues = [];
-    for (let i = 0; i < step; i++) {
-        shadeValues[i] = rgbToHex(shadeOrTint(color, i));
+/**
+ * @description Kiểm tra xem hai ngày có khác nhau không (khác ngày trong tuần)
+ * @param date1 ngày thứ nhất cần so sánh
+ * @param date2 ngày thứ hai cần so sánh
+ * @returns true nếu hai ngày khác nhau, false nếu giống nhau hoặc không thể so sánh
+ */
+const isDifferenceDay = (date1, date2) => {
+    if (isDifferenceMonth(date1, date2)) {
+        return true;
     }
-    return shadeValues;
+    const day1 = getDayjs({ date: date1 })?.day();
+    const day2 = getDayjs({ date: date2 })?.day();
+    return day1 !== day2;
 };
-const rgbShade = (rgb, i) => { return { red: rgb.red * (1 - percent * i), green: rgb.green * (1 - percent * i), blue: rgb.blue * (1 - percent * i) }; };
-const rgbTint = (rgb, i) => { return { red: rgb.red + (255 - rgb.red) * i * percent, green: rgb.green + (255 - rgb.green) * i * percent, blue: rgb.blue + (255 - rgb.blue) * i * percent }; };
-const rgbToHex = (rgb) => { return intToHex(rgb.red) + intToHex(rgb.green) + intToHex(rgb.blue); };
-const hexToRGB = (colorValue) => { return { red: parseInt(colorValue.substr(0, 2), 16), green: parseInt(colorValue.substr(2, 2), 16), blue: parseInt(colorValue.substr(4, 2), 16) }; };
-const intToHex = (rgbint) => { return pad(Math.min(Math.max(Math.round(rgbint), 0), 255).toString(16), 2); };
-const pad = (number, length) => {
-    let str = '' + number;
-    while (str.length < length) {
-        str = '0' + str;
+/**
+ * @description Kiểm tra xem hai ngày có khác tháng không
+ * @param date1 ngày thứ nhất cần so sánh
+ * @param date2 ngày thứ hai cần so sánh
+ * @returns true nếu hai ngày khác tháng, false nếu cùng tháng hoặc không thể so sánh
+ */
+const isDifferenceMonth = (date1, date2) => {
+    if (isDifferenceYear(date1, date2)) {
+        return true;
     }
-    return str;
+    const month1 = getDayjs({ date: date1 })?.month();
+    const month2 = getDayjs({ date: date2 })?.month();
+    return month1 !== month2;
 };
-const listColorDefine = ['#E62222', '#B81B1B', '#EB4E4E', '#F97316', '#C75C12', '#FA8F45', '#FFB700', '#CC9200', '#FFC533', '#84CC16', '#6AA312', '#9dd645', '#00BC62', '#00A757', '#33DA8A', '#06B6D4', '#1B59C4', '#4E8CF7', '#0EA5E9',
-    '#1B59C4', '#4E8CF7', '#226FF5', '#1B59C4', '#4E8CF7', '#6366F1', '#4F52C1', '#8285F4', '#5B04B3', '#49038F', '#7C36C2', '#D946EF', '#AE38BF', '#E16BF2', '#EC4899', '#BD3A7A', '#F06DAD', '#F43F5E', '#C3324B', '#F6657E', '#757380', '#5E5C66', '#918F99',
-    '#202020', '#1A1A1A', '#4D4D4D'
-];
-const getColorById = (str) => {
-    let hashString = 0;
-    if (!str) {
-        return '';
-    }
-    for (let i = 0; i < str.length; i++) {
-        const char = str.charCodeAt(i);
-        hashString = ((hashString << 5) - hashString) + char;
-        hashString = hashString & hashString;
-    }
-    return listColorDefine[Math.abs(hashString) % listColorDefine.length];
+/**
+ * @description Kiểm tra xem hai ngày có khác năm không
+ * @param date1 ngày thứ nhất cần so sánh
+ * @param date2 ngày thứ hai cần so sánh
+ * @returns true nếu hai ngày khác năm, false nếu cùng năm hoặc không thể so sánh
+ */
+const isDifferenceYear = (date1, date2) => {
+    const year1 = getDayjs({ date: date1 })?.year();
+    const year2 = getDayjs({ date: date2 })?.year();
+    return year1 !== year2;
 };
-
-let key = '12~@#loqwsxacva(3rdhaq12';
 /**
- * @description Thiết lập key mã hóa
- * @param value key mã hóa, độ dài bằng 24 hoặc 32 ký tự.
+ * @description Lấy ra chuỗi thời gian hiển thị theo định dạng và ngôn ngữ
+ * @param date thời gian cần định dạng
+ * @param format định dạng thời gian muốn lấy ra
+ * @param lang lấy theo ngôn ngữ
  */
-const setKeyCrypto3rd = (value) => {
-    if (value.length !== 24 && value.length !== 32) {
-        throw Error(`key.length = ${value.length}; Key phải là 1 chuỗi dài 24 hoặc 32 ký tự`);
+const formatDate = (date, formatOutput = 'YYYY/MM/DD HH:mm', lang, formatInput) => {
+    if (!date) {
+        return '';
     }
-    key = value;
-};
-const keyStore = () => {
-    return key;
-};
-const encrypt3rd = (plainData) => {
-    if (!keyStore()) {
-        throw Error("lỗi chưa setup key mã hóa");
+    lang = lang || UtilsCache.getLang();
+    if (functionFormatDate) {
+        return functionFormatDate(date, formatOutput, lang);
     }
-    const key = CryptoES.enc.Hex.parse(keyStore());
-    const iv = CryptoES.enc.Hex.parse(keyStore());
-    const mode = CryptoES.mode.CBC;
-    const padding = CryptoES.pad.Pkcs7;
-    const options = { iv: iv, mode: mode, padding: padding };
-    return CryptoES.AES.encrypt(plainData, key, options).toString();
-};
-const decrypt3rd = (encryptedData) => {
-    if (!keyStore()) {
-        throw Error("lỗi chưa setup key mã hóa");
+    date = getDayjs({ date, formatOfDate: formatInput }).locale(lang);
+    if (lang === 'vi') {
+        dayjs.updateLocale('vi', {
+            monthsShort: 'Thg 1_Thg 2_Thg 3_Thg 4_Thg 5_Thg 6_Thg 7_Thg 8_Thg 9_Thg 10_Thg 11_Thg 12'.split('_')
+        });
+    }
+    return date.format(getFormatData(getTypeByFormat(formatOutput), lang)) || '';
+};
+const getTypeByFormat = (format) => {
+    if (format === 'dm' || format === 'dmy' || format === 'dmy hm' || format === 'my') {
+        return format;
+    }
+    if (format === 'DD/MM/YYYY' || format === 'YYYY-MM-DD' || format === 'dd/MM/yyyy' || format === 'dd-MM-yyyy' || format === 'dd/mm/yyyy') {
+        return 'dmy';
+    }
+    if (format === 'MM-DD' || format === 'dd/MM' || format === 'dd/mm') {
+        return 'dm';
+    }
+    if (format === 'M/YYYY' || format === 'YYYY-MM' || format === 'MM/yyyy') {
+        return 'my';
+    }
+    if (format === 'YYYY/MM/DD hh:mm:ss' || format === 'dmy hms' || format === 'dd/mm/yyyy hh:mm:ss') {
+        return 'dmy hms';
+    }
+    if (format === 'hh:mm' || format === 'HH:mm') {
+        return 'hh:mm';
+    }
+    if (format === 'hh:mm A' || format === 'HH:mm A') {
+        return 'hh:mm A';
+    }
+    return 'dmy hm';
+};
+const getFormatData = (type, lang) => {
+    switch (type) {
+        case 'dm':
+            if (lang === 'vi') {
+                return 'D MMM';
+            }
+            return 'MMM D';
+        case 'dmy':
+            if (lang === 'vi') {
+                return 'D MMM, YYYY';
+            }
+            return 'MMM D, YYYY';
+        case 'dmy hm':
+            if (lang === 'vi') {
+                return 'D MMM, YYYY HH:mm';
+            }
+            return 'MMM D, YYYY HH:mm';
+        case 'my':
+            if (lang === 'vi') {
+                return 'MMM, YYYY';
+            }
+            return 'MMM YYYY ';
+        case 'dmy hms':
+            if (lang === 'vi') {
+                return 'D MMM, YYYY HH:mm:ss';
+            }
+            return 'MMM D, YYYY HH:mm:ss';
+        case 'hh:mm':
+        case 'HH:mm':
+            return 'HH:mm';
+        case 'hh:mm A':
+        case 'HH:mm A':
+            return 'HH:mm A';
     }
-    const key = CryptoES.enc.Hex.parse(keyStore());
-    const iv = CryptoES.enc.Hex.parse(keyStore());
-    const mode = CryptoES.mode.CBC;
-    const padding = CryptoES.pad.Pkcs7;
-    const options = { iv: iv, mode: mode, padding: padding };
-    return CryptoES.AES.decrypt(encryptedData, key, options).toString(CryptoES.enc.Utf8);
 };
 
-class UtilsKeyCodeConstant {
-    static MAC_ENTER = 3;
-    static BACKSPACE = 8;
-    static TAB = 9;
-    static NUM_CENTER = 12;
-    static ENTER = 13;
-    static SHIFT = 16;
-    static CONTROL = 17;
-    static ALT = 18;
-    static PAUSE = 19;
-    static CAPS_LOCK = 20;
-    static ESCAPE = 27;
-    static SPACE = 32;
-    static PAGE_UP = 33;
-    static PAGE_DOWN = 34;
-    static END = 35;
-    static HOME = 36;
-    static LEFT_ARROW = 37;
-    static UP_ARROW = 38;
-    static RIGHT_ARROW = 39;
-    static DOWN_ARROW = 40;
-    static PLUS_SIGN = 43;
-    static PRINT_SCREEN = 44;
-    static INSERT = 45;
-    static DELETE = 46;
-    static ZERO = 48;
-    static ONE = 49;
-    static TWO = 50;
-    static THREE = 51;
-    static FOUR = 52;
-    static FIVE = 53;
-    static SIX = 54;
-    static SEVEN = 55;
-    static EIGHT = 56;
-    static NINE = 57;
-    static FF_SEMICOLON = 59; // Firefox (Gecko) fires this for semicolon instead of 186
-    static FF_EQUALS = 61; // Firefox (Gecko) fires this for equals instead of 187
-    static QUESTION_MARK = 63;
-    static AT_SIGN = 64;
-    static A = 65;
-    static B = 66;
-    static C = 67;
-    static D = 68;
-    static E = 69;
-    static F = 70;
-    static G = 71;
-    static H = 72;
-    static I = 73;
-    static J = 74;
-    static K = 75;
-    static L = 76;
-    static M = 77;
-    static N = 78;
-    static O = 79;
-    static P = 80;
-    static Q = 81;
-    static R = 82;
-    static S = 83;
-    static T = 84;
-    static U = 85;
-    static V = 86;
-    static W = 87;
-    static X = 88;
-    static Y = 89;
-    static Z = 90;
-    static META = 91; // WIN_KEY_LEFT
-    static MAC_WK_CMD_LEFT = 91;
-    static MAC_WK_CMD_RIGHT = 93;
-    static CONTEXT_MENU = 93;
-    static NUMPAD_ZERO = 96;
-    static NUMPAD_ONE = 97;
-    static NUMPAD_TWO = 98;
-    static NUMPAD_THREE = 99;
-    static NUMPAD_FOUR = 100;
-    static NUMPAD_FIVE = 101;
-    static NUMPAD_SIX = 102;
-    static NUMPAD_SEVEN = 103;
-    static NUMPAD_EIGHT = 104;
-    static NUMPAD_NINE = 105;
-    static NUMPAD_MULTIPLY = 106;
-    static NUMPAD_PLUS = 107;
-    static NUMPAD_MINUS = 109;
-    static NUMPAD_PERIOD = 110;
-    static NUMPAD_DIVIDE = 111;
-    static F1 = 112;
-    static F2 = 113;
-    static F3 = 114;
-    static F4 = 115;
-    static F5 = 116;
-    static F6 = 117;
-    static F7 = 118;
-    static F8 = 119;
-    static F9 = 120;
-    static F10 = 121;
-    static F11 = 122;
-    static F12 = 123;
-    static NUM_LOCK = 144;
-    static SCROLL_LOCK = 145;
-    static FIRST_MEDIA = 166;
-    static FF_MINUS = 173;
-    static MUTE = 173; // Firefox (Gecko) fires 181 for MUTE
-    static VOLUME_DOWN = 174; // Firefox (Gecko) fires 182 for VOLUME_DOWN
-    static VOLUME_UP = 175; // Firefox (Gecko) fires 183 for VOLUME_UP
-    static FF_MUTE = 181;
-    static FF_VOLUME_DOWN = 182;
-    static LAST_MEDIA = 183;
-    static FF_VOLUME_UP = 183;
-    static SEMICOLON = 186; // Firefox (Gecko) fires 59 for SEMICOLON
-    static EQUALS = 187; // Firefox (Gecko) fires 61 for EQUALS
-    static COMMA = 188;
-    static DASH = 189; // Firefox (Gecko) fires 173 for DASH/MINUS
-    static PERIOD = 190;
-    static SLASH = 191;
-    static APOSTROPHE = 192;
-    static TILDE = 192;
-    static OPEN_SQUARE_BRACKET = 219;
-    static BACKSLASH = 220;
-    static CLOSE_SQUARE_BRACKET = 221;
-    static SINGLE_QUOTE = 222;
-    static MAC_META = 224;
-}
-
-class UtilsLanguageConstants {
-    static VI = "vi"; // Tiếng Việt
-    static EN = "en"; // Tiếng Anh
-    static FR = "fr"; // Tiếng Pháp
-    static DE = "de"; // Tiếng Đức
-    static ES = "es"; // Tiếng Tây Ban Nha
-    static ZH = "zh"; // Tiếng Trung (Giản thể)
-    static ZH_TW = "zh-TW"; // Tiếng Trung (Phồn thể)
-    static JA = "ja"; // Tiếng Nhật
-    static KO = "ko"; // Tiếng Hàn
-    static RU = "ru"; // Tiếng Nga
-    static IT = "it"; // Tiếng Ý
-    static PT = "pt"; // Tiếng Bồ Đào Nha
-    static TH = "th"; // Tiếng Thái
-    static ID = "id"; // Tiếng Indonesia
-    static MS = "ms"; // Tiếng Malaysia
-    static AR = "ar"; // Tiếng Ả Rập
-    static HI = "hi"; // Tiếng Hindi
-    static BN = "bn"; // Tiếng Bengal
-    static TR = "tr"; // Tiếng Thổ Nhĩ Kỳ
-    static NL = "nl"; // Tiếng Hà Lan
-    static KM = "km"; // Tiếng Khmer (Campuchia)
-    static LO = "lo"; // Tiếng Lào
-    static MY = "my"; // Tiếng Miến Điện (Myanmar)
-    static TL = "tl"; // Tiếng Tagalog (Philippines)
-    static CEB = "ceb"; // Tiếng Cebuano (Philippines)
-    static JV = "jv"; // Tiếng Java (Indonesia)
-    static SU = "su"; // Tiếng Sundanese (Indonesia)
-    // Ngôn ngữ mặc định
-    static defaultLang = UtilsLanguageConstants.VI;
-    // Danh sách các ngôn ngữ được hỗ trợ
-    static supportedLanguages = new Set([
-        UtilsLanguageConstants.VI,
-        UtilsLanguageConstants.EN,
-        UtilsLanguageConstants.FR,
-        UtilsLanguageConstants.DE,
-        UtilsLanguageConstants.ES,
-        UtilsLanguageConstants.ZH,
-        UtilsLanguageConstants.ZH_TW,
-        UtilsLanguageConstants.JA,
-        UtilsLanguageConstants.KO,
-        UtilsLanguageConstants.RU,
-        UtilsLanguageConstants.IT,
-        UtilsLanguageConstants.PT,
-        UtilsLanguageConstants.TH,
-        UtilsLanguageConstants.ID,
-        UtilsLanguageConstants.MS,
-        UtilsLanguageConstants.AR,
-        UtilsLanguageConstants.HI,
-        UtilsLanguageConstants.BN,
-        UtilsLanguageConstants.TR,
-        UtilsLanguageConstants.NL,
-        UtilsLanguageConstants.KM,
-        UtilsLanguageConstants.LO,
-        UtilsLanguageConstants.MY,
-        UtilsLanguageConstants.TL,
-        UtilsLanguageConstants.CEB,
-        UtilsLanguageConstants.JV,
-        UtilsLanguageConstants.SU,
-    ]);
-    /**
-     * Kiểm tra xem ngôn ngữ đầu vào có được hỗ trợ không
-     * @param lang Mã ngôn ngữ cần kiểm tra
-     * @returns True nếu được hỗ trợ, False nếu không
-     */
-    static isSupported(lang) {
-        return UtilsLanguageConstants.supportedLanguages.has(lang);
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/**Các hàm tương tự thư viện lodash */
+/**
+ * Kiểm tra xem một giá trị có phải là null hoặc undefined hay không
+ * @param value Giá trị cần kiểm tra
+ * @returns true nếu giá trị là null hoặc undefined, false nếu không
+ * @example
+ * isNil(null); // true
+ * isNil(undefined); // true
+ * isNil(0); // false
+ * isNil('hello'); // false
+ */
+const isNil = (value) => {
+    return value === null || value === undefined;
+};
+/**
+ * Kiểm tra xem một giá trị có phải là rỗng hay không
+ * @param value Giá trị cần kiểm tra
+ * @returns true nếu giá trị là null, rỗng hoặc undefined, false nếu không
+ * @example
+ * isEmpty(null); // true
+ * isEmpty(''); // true
+ * isEmpty(undefined); // true
+ * isEmpty({}); // true
+ * isEmpty([]); // true
+ * isEmpty([1, 2, 3]); // false
+ * isEmpty({ a: 1 }); // false
+ */
+const isEmpty = (value) => {
+    while (isSignal(value)) {
+        value = value();
+    }
+    return value === null || value === '' || value === undefined || (typeof value === 'object' && (JSON.stringify(value) === '{}' || JSON.stringify(value) === '[]'));
+};
+/**
+ * Loại bỏ các thuộc tính của đối tượng dựa trên một hàm điều kiện
+ * @param objData Đối tượng cần xử lý
+ * @param predicate Hàm điều kiện để kiểm tra giá trị của thuộc tính. Nếu hàm trả về true thì thuộc tính đó sẽ bị loại bỏ
+ * @returns Đối tượng mới sau khi đã loại bỏ các thuộc tính thỏa mãn điều kiện
+ * @example
+ * const obj = { a: 1, b: null, c: 3, d: undefined };
+ * omitBy(obj, isNil); // { a: 1, c: 3 }
+ */
+const omitBy = (objData, predicate) => {
+    if (!objData || typeof objData !== 'object' || Array.isArray(objData)) {
+        return objData;
+    }
+    const newObj = {};
+    Object.keys(objData).forEach(key => {
+        const valueOfKey = get(objData, key);
+        if (!predicate(valueOfKey)) {
+            set(newObj, key, valueOfKey);
+        }
+    });
+    return newObj;
+};
+/**
+ * Lấy giá trị từ đối tượng theo đường dẫn chỉ định
+ *
+ * Hàm này giúp bạn truy cập vào các thuộc tính sâu bên trong một đối tượng một cách an toàn,
+ * tránh lỗi khi thuộc tính không tồn tại.
+ *
+ * @param obj Đối tượng nguồn cần lấy giá trị
+ * @param path Đường dẫn đến thuộc tính cần lấy. Có thể là:
+ *   - Chuỗi: 'user.profile.name' hoặc 'items[0].title'
+ *   - Mảng: ['user', 'profile', 'name'] hoặc ['items', '0', 'title']
+ *   - Chuỗi rỗng '': trả về chính đối tượng gốc
+ * @param defaultValue Giá trị mặc định trả về khi không tìm thấy thuộc tính (mặc định: undefined)
+ * @param keepLastValueIfSignal Có giữ nguyên signal cuối cùng hay không (mặc định: false - sẽ gọi signal())
+ * @returns Giá trị tìm được hoặc giá trị mặc định
+ *
+ * @example
+ * // Ví dụ cơ bản
+ * const user = { name: 'John', age: 30 };
+ * get(user, 'name'); // 'John'
+ * get(user, 'email'); // undefined
+ * get(user, 'email', 'no-email'); // 'no-email'
+ *
+ * @example
+ * // Truyền path rỗng - trả về chính đối tượng gốc
+ * const data = { name: 'Alice', age: 25 };
+ * get(data, ''); // { name: 'Alice', age: 25 } (chính đối tượng data)
+ * get(data, '', 'default'); // { name: 'Alice', age: 25 } (bỏ qua defaultValue)
+ *
+ * @example
+ * // Truy cập thuộc tính sâu
+ * const data = {
+ *   user: {
+ *     profile: {
+ *       name: 'Alice',
+ *       settings: { theme: 'dark' }
+ *     }
+ *   }
+ * };
+ * get(data, 'user.profile.name'); // 'Alice'
+ * get(data, 'user.profile.settings.theme'); // 'dark'
+ * get(data, 'user.profile.avatar', 'default.jpg'); // 'default.jpg'
+ *
+ * @example
+ * // Truy cập mảng
+ * const items = [
+ *   { name: 'Item 1', price: 100 },
+ *   { name: 'Item 2', price: 200 }
+ * ];
+ * get(items, '[0].name'); // 'Item 1'
+ * get(items, '[1].name'); // 'Item 2'
+ * get(items, '[2].name', 'Not found'); // 'Not found'
+ *
+ * @example
+ * // Sử dụng với mảng path
+ * const nested = { a: { b: { c: 'deep value' } } };
+ * get(nested, ['a', 'b', 'c']); // 'deep value'
+ * get(nested, ['a', 'b', 'd'], 'default'); // 'default'
+ *
+ * @example
+ * // Trường hợp đặc biệt
+ * get(null, 'any.path'); // undefined
+ * get(undefined, 'any.path', 'fallback'); // 'fallback'
+ */
+const get = (obj, path, defaultValue = undefined, keepLastValueIfSignal) => {
+    if (isNil(obj)) {
+        return defaultValue;
     }
-}
-
-/* eslint-disable @typescript-eslint/no-explicit-any */
-const getKeyCacheByArrayObject = (keyCache, argumentsValue) => {
-    if (!keyCache || !argumentsValue) {
-        return '';
+    while (isSignal(obj)) {
+        obj = obj();
     }
-    let keyBuild = `${JSON.stringify(argumentsValue.slice(1))}-key-cache-plus`;
-    argumentsValue.forEach((item) => {
-        if (typeof item === 'object') {
-            if (Array.isArray(item)) {
-                keyBuild = `${keyBuild}${JSON.stringify(item)}`;
-                return;
+    if (path === '') {
+        return obj;
+    }
+    if (obj instanceof HttpParams) {
+        return obj.get(`${path}`);
+    }
+    if (obj instanceof DOMRect) {
+        return obj[path];
+    }
+    const paths = Array.isArray(path) ? path : path.replace(/\[(\d+)]/g, '.$1').split('.').filter(key => key);
+    for (const index in paths) {
+        const key = paths[index];
+        if (obj instanceof CSSStyleDeclaration) {
+            obj = obj[key];
+            continue;
+        }
+        if (obj instanceof HTMLElement) {
+            obj = obj[key];
+            continue;
+        }
+        if (isNil(obj) || !Object.prototype.hasOwnProperty.call(obj, key)) {
+            return defaultValue;
+        }
+        const val = isSignal(obj[key]) && !keepLastValueIfSignal ? obj[key]() : obj[key];
+        obj = val;
+    }
+    return obj;
+};
+/**
+ * Thiết lập giá trị cho một thuộc tính trong đối tượng theo đường dẫn chỉ định
+ * @param obj Đối tượng cần thiết lập giá trị
+ * @param path Đường dẫn đến thuộc tính, có thể là chuỗi (vd: 'a.b.c') hoặc mảng (vd: ['a', 'b', 'c'])
+ * @param value Giá trị cần thiết lập
+ * @returns Đối tượng sau khi đã thiết lập giá trị
+ * @throws Error nếu tham số đầu tiên không phải là đối tượng
+ * @example
+ * const obj = { a: { b: 1 } };
+ * set(obj, 'a.b', 2); // { a: { b: 2 } }
+ */
+const set = (obj, path, value) => {
+    if (!obj || (typeof obj !== "object" && !isSignal(obj)) || (isSignal(obj) && typeof obj() !== "object")) {
+        throw new Error("The first argument must be an object");
+    }
+    if (obj instanceof HttpParams) {
+        return obj.set(`${path}`, value);
+    }
+    const pathArray = Array.isArray(path) ? path : path.replace(/\[(\d+)]/g, '.[$1]').split('.').filter(key => key);
+    let currentObjectByKey = isSignal(obj) ? obj() : obj;
+    let preObjectByKey = obj;
+    pathArray.forEach((key, index) => {
+        if (index < pathArray.length - 1) {
+            if (!(key in currentObjectByKey) || (typeof currentObjectByKey[key] !== "object" && !isSignal(currentObjectByKey[key]))) {
+                const nextKey = pathArray[index + 1];
+                key = key.replace(/\[(\d+)]/g, '$1');
+                currentObjectByKey[key] = /\[(\d+)]/g.test(nextKey) ? [] : {};
             }
-            const keys = (item instanceof HttpParams ? item.keys() : Object.keys(item)).sort(((str1, str2) => str1.localeCompare(str2)));
-            keys.forEach(key => {
-                keyBuild = `${keyBuild}${JSON.stringify(get(item, key))}`;
-            });
+            currentObjectByKey = key ? currentObjectByKey[key] : currentObjectByKey;
+            preObjectByKey = currentObjectByKey;
+            currentObjectByKey = isSignal(currentObjectByKey) ? currentObjectByKey() : currentObjectByKey;
             return;
         }
-        keyBuild = `${keyBuild}${item}`;
-    });
-    const keyCachePlus = md5(keyBuild);
-    const keyCacheMD5 = md5(keyCache);
-    return `${keyCacheMD5}-${md5(`${keyCacheMD5}-${keyCachePlus}`)}`;
-};
-
-let functionCheck = () => {
-    return window.parent !== window.top;
-};
-const updateFunctionCheckEmbedFrame = (functionCustom) => {
-    functionCheck = functionCustom;
-};
-const isEmbedFrame = () => {
-    return functionCheck();
-};
-
-const ERROR_MESSAGE_EMPTY_VALID = 'i18n_valid_empty_message';
-const ERROR_MESSAGE_PATTEN_VALID = 'i18n_valid_pattern_message';
-const ERROR_MESSAGE_MIN_VALID = 'i18n_message_error_input_min_value';
-const ERROR_MESSAGE_MAX_VALID = 'i18n_message_error_input_max_value';
-const ERROR_MESSAGE_MIN_LENGTH = 'i18n_message_error_input_min_length';
-const ERROR_MESSAGE_MAX_LENGTH = 'i18n_message_error_input_max_length';
-const CHARACTER_DATA_EMPTY = '__';
-const DEFAULT_START_PAGE_0 = 'defaultStartPage0';
-const COMMUNICATE_MICRO_PREFIX_TYPE = '3RD_INTEGRATE_MICRO_SITE_';
-const COMMUNICATE_MICRO_KEY_GET_ALL_MESSAGE = 'MICRO_SITES_ALL_MESSAGE';
-
-/* eslint-disable @typescript-eslint/no-explicit-any */
-class UtilsCommunicateMicroKeyGlobal {
-    static KEY_MESSAGE_MODAL = 'LIBS_UI_MODEL_EVENT';
-}
-class UtilsCommunicateMicro {
-    static initdEvent;
-    static subs = new Map();
-    static allMessageSub = new Subject();
-    static initEvent(currentWindow, onDestroy) {
-        if (this.initdEvent) {
+        if (typeof currentObjectByKey !== "object") {
             return;
         }
-        this.initdEvent = true;
-        if (!this.subs.get(COMMUNICATE_MICRO_KEY_GET_ALL_MESSAGE)) {
-            this.subs.set(COMMUNICATE_MICRO_KEY_GET_ALL_MESSAGE, UtilsCommunicateMicro.allMessageSub);
+        // Gán giá trị ở cuối đường dẫn
+        key = key.replace(/\[(\d+)]/g, '$1');
+        const valueOfKey = currentObjectByKey[key];
+        const valueOfKeyIsSignal = isSignal(valueOfKey);
+        if (valueOfKeyIsSignal && (typeof valueOfKey() !== 'object' || valueOfKey() === null)) {
+            valueOfKey.set(isSignal(value) ? value() : value);
+            return;
         }
-        fromEvent(currentWindow, 'message').pipe(takeUntil(onDestroy)).subscribe(e => {
-            const event = { data: { ...e.data } };
-            const data = event.data;
-            const type = data.type;
-            if (!type) {
-                return this.allMessageSub.next(event);
-            }
-            const sub = UtilsCommunicateMicro.GetMessage(type);
-            if (!type || !data.response) {
-                return;
-            }
-            try {
-                if (type.includes(COMMUNICATE_MICRO_PREFIX_TYPE)) {
-                    data.response = JSON.parse(decrypt3rd(data.response));
-                    sub.next(event);
-                    this.allMessageSub.next(event);
-                    return;
+        if (isSignal(preObjectByKey)) {
+            preObjectByKey.update((data) => {
+                const dataOfKey = data[key];
+                if (isNil(dataOfKey) || !valueOfKeyIsSignal) {
+                    data[key] = value;
                 }
-                data.response = JSON.parse(decrypt(data.response));
-                sub.next(event);
-                this.allMessageSub.next(event);
-            }
-            catch (error) {
-                console.log(error);
-                sub.next(event);
-                this.allMessageSub.next(event);
-            }
-        });
-        UtilsCommunicateMicro.GetMessage(UtilsCache.typeKeyClearLocalStorage).pipe(filter(e => e.data.response !== UtilsCache.idService), takeUntil(onDestroy)).subscribe(() => {
-            console.log('clear all cache by event');
-            UtilsCache.ClearAll();
-        });
-    }
-    static PostMessageToParent(data) {
-        data = this.convertData(data);
-        try {
-            if (isEmbedFrame()) {
-                window?.parent?.postMessage(data, "*");
-                return;
-            }
-            window?.top?.postMessage(data, "*");
+                if (valueOfKeyIsSignal) {
+                    valueOfKey.set(isSignal(value) ? value() : value);
+                }
+                if (Array.isArray(data)) {
+                    return [...data];
+                }
+                return { ...data };
+            });
+            return;
         }
-        catch (error) {
-            console.log(error);
+        if (valueOfKeyIsSignal) {
+            valueOfKey.set(isSignal(value) ? value() : value);
+            return;
         }
+        currentObjectByKey[key] = value;
+    });
+    return obj;
+};
+/**
+ * Tạo một bản sao sâu của một đối tượng hoặc giá trị bất kỳ
+ * @param data Dữ liệu cần sao chép
+ * @param options Tùy chọn cấu hình
+ * @param options.ignoreSignal Nếu true, sẽ không sao chép các signal mà trả về signal gốc
+ * @param seen WeakMap để theo dõi các tham chiếu đã được sao chép, tránh lặp vô hạn với các tham chiếu vòng
+ * @returns Bản sao sâu của dữ liệu đầu vào
+ * @example
+ * const obj = {
+ *   a: 1,
+ *   b: { c: 2 },
+ *   d: [1, 2, 3]
+ * };
+ * const clone = cloneDeep(obj);
+ * // clone là một bản sao hoàn toàn độc lập của obj
+ */
+const cloneDeep = (data, options = { ignoreSignal: false }, seen = new WeakMap()) => {
+    if (data === null || (typeof data !== 'object' && !isSignal(data))) {
+        return data;
     }
-    static PostMessageToChildren(data) {
-        data = this.convertData(data);
-        const iframes = document.querySelectorAll("iframe");
-        Array.from(iframes).forEach(iframe => {
-            iframe?.contentWindow?.postMessage(data, '*');
+    if (seen.has(data)) {
+        return seen.get(data);
+    }
+    if (data instanceof HttpParams) {
+        return new UtilsHttpParamsRequest(undefined, data);
+    }
+    if (data instanceof Date) {
+        return new Date(data.getTime());
+    }
+    if (dayjs.isDayjs(data)) {
+        return getDayjs({ date: data.valueOf() });
+    }
+    if (data instanceof RegExp) {
+        return new RegExp(data.source, data.flags);
+    }
+    if (data instanceof Map) {
+        const mapCopy = new Map();
+        seen.set(data, mapCopy);
+        data.forEach((val, key) => {
+            mapCopy.set(cloneDeep(key, options, seen), cloneDeep(val, options, seen));
         });
+        return mapCopy;
     }
-    static PostMessageToOpener(data) {
-        if (!window.opener) {
-            return;
-        }
-        data = this.convertData(data);
-        window.opener.postMessage(data, '*');
+    if (data instanceof Set) {
+        const setCopy = new Set();
+        seen.set(data, setCopy);
+        data.forEach(val => {
+            setCopy.add(cloneDeep(val, options, seen));
+        });
+        return setCopy;
+    }
+    if (Array.isArray(data)) {
+        seen.set(data, data.map(item => cloneDeep(item, options, seen)));
+        return seen.get(data);
+    }
+    if (data instanceof File || data instanceof Blob || Object.prototype.toString.call(data) === '[object File]') {
+        return data;
     }
-    static convertData(data) {
-        if (!data || !data.type || !data.response) {
-            return data;
-        }
-        data = { ...data };
-        const type = data.type;
-        if (type.includes(COMMUNICATE_MICRO_PREFIX_TYPE)) {
-            try {
-                JSON.parse(decrypt3rd(data.response));
-                return data;
-            }
-            catch (_) {
-                data.response = encrypt3rd(JSON.stringify(data.response));
-                return data;
-            }
-        }
-        try {
-            JSON.parse(decrypt(data.response));
-            return data;
-        }
-        catch (_) {
-            data.response = encrypt(JSON.stringify(data.response));
+    if (data instanceof TemplateRef || data instanceof ElementRef || data instanceof Element || data instanceof Promise || data instanceof Observable) {
+        return data;
+    }
+    if (isSignal(data)) {
+        if (options?.ignoreSignal) {
             return data;
         }
+        seen.set(data, signal(cloneDeep(data(), options, seen)));
+        return seen.get(data);
     }
-    static GetMessage(messageType) {
-        if (!this.initdEvent) {
-            throw Error("chưa khơi tạo hàm lắng nghe sự kiện, gọi UtilsCommunicateMicro.initEvent(window) tại root component");
-        }
-        if (typeof messageType === 'string') {
-            let sub = this.subs.get(messageType);
-            if (!sub) {
-                sub = new Subject();
-                this.subs.set(messageType, sub);
-                return sub;
-            }
-            return sub;
+    const result = {};
+    seen.set(data, result);
+    for (const key in data) {
+        const value = data[key];
+        if (value instanceof HttpParams) {
+            result[key] = new UtilsHttpParamsRequest(undefined, value);
+            continue;
         }
-        if (!Array.isArray(messageType) || !messageType.length) {
-            throw new Error('message type empty');
+        if (dayjs.isDayjs(value)) {
+            result[key] = getDayjs({ date: value.valueOf() });
+            continue;
         }
-        if (messageType.length === 1) {
-            return this.GetMessage(messageType[0]);
+        if (value instanceof TemplateRef || value instanceof ElementRef || value instanceof Element || value instanceof Promise || value instanceof Observable) {
+            result[key] = value;
+            continue;
         }
-        const types = messageType.sort().join(';');
-        let sub = this.subs.get(types);
-        if (sub) {
-            return sub;
+        if (Object.prototype.hasOwnProperty.call(data, key)) {
+            result[key] = cloneDeep(value, options, seen);
         }
-        sub = new Subject();
-        this.subs.set(types, sub);
-        this.initSubject(sub, messageType);
-        return sub;
     }
-    static initSubject(subRoot, messageType) {
-        messageType.forEach(key => {
-            this.GetMessage(key).subscribe(e => {
-                subRoot.next(e);
-            });
-        });
+    return result;
+};
+/**
+ * Chuyển đổi một mảng các đối tượng thành một đối tượng với khóa được chỉ định
+ * @param data Mảng các đối tượng cần chuyển đổi
+ * @param key Tên thuộc tính được sử dụng làm khóa trong đối tượng kết quả
+ * @returns Đối tượng với các giá trị từ mảng được đánh key theo thuộc tính đã chỉ định
+ * @example
+ * const data = [
+ *   { id: 1, name: 'John' },
+ *   { id: 2, name: 'Jane' }
+ * ];
+ * keyBy(data, 'id');
+ * // Kết quả: {
+ * //   '1': { id: 1, name: 'John' },
+ * //   '2': { id: 2, name: 'Jane' }
+ * // }
+ */
+const keyBy = (data, key) => {
+    if (!data || !data.length || !key) {
+        return {};
     }
-}
-
-/* eslint-disable no-async-promise-executor */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-class UtilsCache {
-    static CACHE_EXPIRE_TIME_DEFAULT = 5 * 60;
-    static CACHE_EXPIRE_NONE = -1;
-    static idService = uuid();
-    static typeKeyClearLocalStorage = 'LIBS_UI_CLEAR_LOCAL_STORAGE_EVENT';
-    static languageKeyCache = 'SR3xQKxHgffiCevPQRralg';
-    static listKeyKeepWhenClearALll = Array();
-    static initdEvent;
-    static storage;
-    static dbName = 'libs-ui-cache';
-    static itemIndexByKey = 'key';
-    static dbVersion = 1;
-    static db = null;
-    static init(config) {
-        if (this.initdEvent) {
-            return;
-        }
-        this.initdEvent = true;
-        if (config.indexedDBName) {
-            this.dbName = config.indexedDBName;
+    return data.reduce((dir, nextItem) => {
+        const valueOfKey = get(nextItem, key);
+        if (typeof valueOfKey !== 'string' && typeof valueOfKey !== 'number' && typeof valueOfKey !== 'boolean') {
+            return dir;
         }
-        if (config.typeKeyClearLocalStorage) {
-            this.typeKeyClearLocalStorage = config.typeKeyClearLocalStorage;
+        if (!Object.keys(dir).includes(`${valueOfKey}`)) {
+            dir[`${valueOfKey}`] = nextItem;
         }
-        if (config.listKeyKeepWhenClearAll) {
-            this.listKeyKeepWhenClearALll = config.listKeyKeepWhenClearAll;
+        return dir;
+    }, {});
+};
+/**
+ * Nhóm các đối tượng trong một mảng thành các nhóm dựa trên một thuộc tính cụ thể
+ * @param data Mảng các đối tượng cần nhóm
+ * @param key Tên thuộc tính được sử dụng làm khóa nhóm
+ * @returns Đối tượng với các giá trị từ mảng được nhóm theo thuộc tính đã chỉ định
+ * @example
+ * const data = [
+ *   { id: 1, name: 'John' },
+ *   { id: 2, name: 'Jane' },
+ *   { id: 1, name: 'John' }
+ * ];
+ * groupBy(data, 'id');
+ * // Kết quả: {
+ * //   '1': [
+ * //     { id: 1, name: 'John' },
+ * //     { id: 1, name: 'John' }
+ * //   ],
+ * //   '2': [
+ * //     { id: 2, name: 'Jane' }
+ * // }
+ */
+const groupBy = (data, key) => {
+    if (!data || !data.length || !Object.keys(get(data, '0')).length || !key) {
+        return {};
+    }
+    return data.reduce((dir, nextItem) => {
+        const valueOfKey = get(nextItem, key);
+        if (typeof valueOfKey !== 'string' && typeof valueOfKey !== 'number' && typeof valueOfKey !== 'boolean') {
+            return dir;
         }
-        if (config.languageKeyCache) {
-            this.languageKeyCache = config.languageKeyCache;
+        if (!Object.keys(dir).includes(`${valueOfKey}`)) {
+            dir[`${valueOfKey}`] = [];
         }
+        dir[`${valueOfKey}`].push(nextItem);
+        return dir;
+    }, {});
+};
+/**
+ * Tạo một mảng các số từ giá trị bắt đầu đến giá trị kết thúc với bước nhảy tùy chọn
+ * @param start Giá trị bắt đầu của dãy số. Nếu chỉ có một tham số, đây sẽ là giá trị kết thúc và giá trị bắt đầu sẽ là 0
+ * @param end Giá trị kết thúc của dãy số (tùy chọn)
+ * @param step Bước nhảy giữa các số trong dãy (tùy chọn). Mặc định là 1 nếu end > start, -1 nếu end < start
+ * @returns Mảng các số từ start đến end với bước nhảy step
+ * @example
+ * range(4);      // [0, 1, 2, 3]
+ * range(1, 5);   // [1, 2, 3, 4]
+ * range(0, 20, 5); // [0, 5, 10, 15]
+ * range(5, 2);   // [5, 4, 3]
+ */
+const range = (start, end, step) => {
+    if (end === undefined || end === null) {
+        end = start;
+        start = 0;
     }
-    static setLang(lang) {
-        if (!UtilsLanguageConstants.isSupported(lang)) {
-            throw Error(`Language not support ${lang}`);
+    if (!step) {
+        step = end < 0 ? -1 : 1;
+    }
+    if (end < start && step > 0) {
+        step *= -1;
+    }
+    const valueStartByStep = step + start;
+    const direction = start < end ? 'asc' : 'desc';
+    if ((direction === 'asc' && (valueStartByStep < start || valueStartByStep > end)) || (direction === 'desc' && (valueStartByStep > start || valueStartByStep < end))) {
+        return [start];
+    }
+    const arr = new Array();
+    for (let index = 0; index < Math.abs(end - start); index++) {
+        let value = start + index * step;
+        if (index === 0) {
+            value = start;
         }
-        this.Set(this.languageKeyCache, lang, this.CACHE_EXPIRE_NONE);
+        if ((direction === 'asc' && (value < start || value > end)) || (direction === 'desc' && (value > start || value < end))) {
+            return arr;
+        }
+        arr.push(value);
     }
-    static getLang() {
-        return this.Get(this.languageKeyCache, UtilsLanguageConstants.defaultLang);
+    return arr;
+};
+/**
+ * So sánh hai giá trị bất kỳ có bằng nhau hay không
+ * @param value1 Giá trị thứ nhất cần so sánh
+ * @param value2 Giá trị thứ hai cần so sánh
+ * @param exactlyPosition Có so sánh chính xác vị trí các phần tử trong mảng hay không
+ * @returns true nếu hai giá trị bằng nhau, false nếu không bằng nhau
+ * @example
+ * isEqual([1,2,3], [1,2,3]); // true
+ * isEqual([1,2,3], [3,2,1]); // true khi exactlyPosition = false
+ * isEqual([1,2,3], [3,2,1]); // false khi exactlyPosition = true
+ * isEqual({a:1}, {a:1}); // true
+ */
+const isEqual = (value1, value2, options) => {
+    const { exactlyPosition = false, ignoreExactlyDataType = false } = options || {};
+    if (value1 === value2 || (value1 === null && value2 === null) || (value1 === undefined && value2 === undefined)) {
+        return true;
     }
-    static openDB() {
-        return new Promise(resolve => {
-            const request = indexedDB.open(this.dbName, this.dbVersion);
-            request.onupgradeneeded = (event) => {
-                const db = event.target.result;
-                if (!db.objectStoreNames.contains(this.dbName)) {
-                    const objectStore = db.createObjectStore(this.dbName, { keyPath: this.itemIndexByKey });
-                    objectStore.createIndex(this.itemIndexByKey, this.itemIndexByKey, { unique: true });
-                }
-            };
-            request.onsuccess = () => {
-                this.db = request.result;
-                resolve(true);
-            };
-            request.onerror = (event) => {
-                console.trace('Error opening IndexedDB:', event);
-                resolve(false);
-            };
-        });
+    if (ignoreExactlyDataType) {
+        return isEqual(isNil(value1) ? undefined : `${value1}`, isNil(value2) ? undefined : `${value2}`);
+    }
+    // Handle signals
+    while (isSignal(value1)) {
+        value1 = value1();
+    }
+    while (isSignal(value2)) {
+        value2 = value2();
     }
-    static async getObjectStore() {
-        if (!this.db) {
-            await this.openDB();
+    if (typeof value1 !== 'object' || typeof value2 !== 'object' || (Array.isArray(value1) && !Array.isArray(value2)) || (!Array.isArray(value1) && Array.isArray(value2))) {
+        return false;
+    }
+    if (Array.isArray(value1)) {
+        if (value1.length !== value2.length) {
+            return false;
         }
-        const transaction = this.db?.transaction([this.dbName], 'readwrite');
-        if (!transaction) {
-            return null;
+        if (!exactlyPosition) {
+            return !value1.some(item => !value2.includes(item));
         }
-        return transaction.objectStore(this.dbName);
+        return !value1.some((item, index) => !isEqual(item, value2[index], options));
     }
-    static get LocalStorage() {
-        try {
-            if (typeof window.localStorage !== 'undefined') {
-                const OS = getPlatFromBrowser();
-                if (OS.includes('Safari') && parseFloat(OS.split(' ').pop() || '0') >= 16) {
-                    return this.getLocalStorageFakeOnSafari();
+    if (Object.keys(value1).length !== Object.keys(value2).length) {
+        return false;
+    }
+    return !Object.keys(value1).some((key) => !isEqual(value1[key], value2[key], options));
+};
+/**
+ * Loại bỏ các phần tử trùng lặp trong mảng dựa trên một thuộc tính chỉ định
+ * @param data Mảng dữ liệu cần xử lý
+ * @param key Tên thuộc tính dùng để so sánh trùng lặp. Nếu không có key thì so sánh trực tiếp giá trị
+ * @returns Mảng mới chứa các phần tử không trùng lặp
+ * @example
+ * const arr = [
+ *   { id: 1, name: 'A' },
+ *   { id: 2, name: 'B' },
+ *   { id: 1, name: 'C' }
+ * ];
+ * uniqBy(arr, 'id'); // [{ id: 1, name: 'A' }, { id: 2, name: 'B' }]
+ *
+ * const numbers = [1, 2, 2, 3, 3];
+ * uniqBy(numbers); // [1, 2, 3]
+ *
+ * const numbersSignal = [signal(1), signal(2), signal(3), signal(2), signal(5), signal(4), signal(1), signal(6), signal(7), signal(6)];
+ * uniqBy(numbersSignal); // [signal(1), signal(2), signal(3), signal(5), signal(4), signal(6), signal(7)]
+ */
+const uniqBy = (data, key) => {
+    if (!key || !data?.length || typeof get(data, '0') !== 'object') {
+        // Xử lý mảng chứa signal values
+        if (data[0] && isSignal(data[0])) {
+            const seen = new Set();
+            return data.filter(item => {
+                const value = `${get(item, '')}`;
+                if (seen.has(value)) {
+                    return false;
                 }
-                return localStorage;
-            }
-            return this.getLocalStorageFake();
-        }
-        catch (error) {
-            console.trace(`LocalStorage `, error);
-            return this.getLocalStorageFake();
+                seen.add(value);
+                return true;
+            });
         }
+        // Xử lý mảng primitive values
+        return Array.from(new Set(data));
     }
-    static getLocalStorageFakeOnSafari() {
-        if (typeof window.localStorage !== 'undefined' && !this.storage && Object.keys(localStorage).length) {
-            this.storage = { ...localStorage };
+    const dataUnique = keyBy(data, key);
+    return Object.keys(dataUnique).map(key => dataUnique[key]);
+};
+const generateInterface = (obj, interfaceName) => {
+    const generateType = (value) => {
+        if (value === null) {
+            return 'null';
         }
-        return {
-            setItem: (key, value) => {
-                localStorage.setItem(key, value);
-                this.storage[key] = value;
-            },
-            getItem: (key) => {
-                const value = localStorage.getItem(key);
-                if (value) {
-                    return value;
-                }
-                if (!this.storage || isNil(this.storage[key])) {
-                    return null;
-                }
-                localStorage.setItem(key, this.storage[key]);
-                return this.storage?.[key];
-            },
-            removeItem: (key) => {
-                delete this.storage?.[key];
-                localStorage.removeItem(key);
-            },
-            clear: () => {
-                this.storage = {};
-                localStorage.clear();
-            }
-        };
-    }
-    static getLocalStorageFake() {
-        if (!this.storage) {
-            this.storage = {};
+        const type = typeof value;
+        if (type === 'string') {
+            return 'string';
         }
-        return {
-            setItem: (key, value) => {
-                this.storage[key] = value;
-            },
-            getItem: (key) => {
-                return this.storage?.[key];
-            },
-            removeItem: (key) => {
-                delete this.storage?.[key];
-            },
-            clear: () => {
-                this.storage = {};
-            }
-        };
-    }
-    static async GetAsync(key, default_value, isKeyMD5 = false) {
-        key = isKeyMD5 ? key : md5(key);
-        return new Promise(async (resolve) => {
-            const objectStore = await this.getObjectStore();
-            if (!objectStore) {
-                return resolve(default_value);
-            }
-            const request = objectStore.get(key);
-            request.onsuccess = () => {
-                if (!request.result) {
-                    return resolve(default_value);
-                }
-                const data = JSON.parse(decrypt(request.result.value));
-                if (data.expire === this.CACHE_EXPIRE_NONE) {
-                    return resolve(data.json);
-                }
-                const currentMillisecond = (new Date().valueOf() / 1000);
-                if (data.expire < currentMillisecond) {
-                    return resolve(default_value);
-                }
-                return resolve(data.json);
-            };
-            request.onerror = () => {
-                console.trace(`Get key ${key} Error, return default value: ${default_value}`);
-                return resolve(default_value);
-            };
-        });
-    }
-    static Get(key, default_value) {
-        if (!key) {
-            return this.GetDefaultValueBySpecificKey(key, default_value);
+        if (type === 'number') {
+            return 'number';
         }
-        const cachedData = this.LocalStorage.getItem(key);
-        if (!cachedData) {
-            return this.GetDefaultValueBySpecificKey(key, default_value);
+        if (type === 'boolean') {
+            return 'boolean';
         }
-        try {
-            const data = JSON.parse(decrypt(cachedData));
-            if (data.expire === this.CACHE_EXPIRE_NONE) {
-                return data.value ?? default_value;
-            }
-            const currentMillisecond = (new Date().valueOf() / 1000);
-            if (data.expire < currentMillisecond) {
-                return this.GetDefaultValueBySpecificKey(key, default_value);
-            }
-            return data.value;
+        if (type === 'undefined') {
+            return 'any';
         }
-        catch (error) {
-            console.trace(error);
-            console.trace(`Get key ${key} Error, return default value: ${default_value}`, error);
-            return this.GetDefaultValueBySpecificKey(key, default_value);
+        if (value instanceof Date) {
+            return 'Date';
         }
-    }
-    static GetDefaultValueBySpecificKey(key, default_value) {
-        return default_value;
-    }
-    static async SetAsync(key, value, expireTimeBySecond = this.CACHE_EXPIRE_TIME_DEFAULT, isKeyMD5 = false) {
-        return new Promise(async (resolve) => {
-            const objectStore = await this.getObjectStore();
-            key = isKeyMD5 ? key : md5(key);
-            try {
-                const currentMillisecond = expireTimeBySecond === this.CACHE_EXPIRE_NONE ? this.CACHE_EXPIRE_NONE : (new Date().valueOf() / 1000) + expireTimeBySecond;
-                const data = {
-                    value: encrypt(JSON.stringify({ json: value, expire: currentMillisecond })),
-                };
-                data[this.itemIndexByKey] = key;
-                if (!objectStore) {
-                    console.trace(`Can not open object store`);
-                    return resolve({ key, messageError: 'Can not open object store' });
-                }
-                const request = objectStore?.put(data);
-                request.onsuccess = () => {
-                    console.log(`Set key ${key} Success`);
-                    resolve(request.result);
-                };
-                request.onerror = (error) => {
-                    console.trace(`Set key ${key} Error`);
-                    resolve({ key, messageError: get(error, 'message') });
-                };
+        if (value instanceof RegExp) {
+            return 'RegExp';
+        }
+        if (Array.isArray(value)) {
+            if (value.length === 0) {
+                return 'Array<any>';
             }
-            catch (error) {
-                console.trace(`Set key ${key} Error`);
-                resolve({ key, messageError: get(error, 'message') });
+            return `Array<${generateType(value[0])}>`;
+        }
+        if (type === 'object') {
+            let interfaceStr = '{\n';
+            for (const key in value) {
+                if (Object.prototype.hasOwnProperty.call(value, key)) {
+                    const valueType = generateType(value[key]);
+                    interfaceStr += `  ${key}: ${valueType};\n`;
+                }
             }
-        });
-    }
-    static Set(key, value, expireTimeBySecond = this.CACHE_EXPIRE_TIME_DEFAULT) {
-        const currentMillisecond = expireTimeBySecond === this.CACHE_EXPIRE_NONE ? this.CACHE_EXPIRE_NONE : (new Date().valueOf() / 1000) + expireTimeBySecond;
-        const data = {
-            value: value,
-            expire: currentMillisecond
-        };
-        try {
-            this.LocalStorage.setItem(key, encrypt(JSON.stringify(data)));
-            return true;
+            interfaceStr += '}';
+            return interfaceStr;
+        }
+        return 'any';
+    };
+    const interfaceStr = `interface ${interfaceName} ${generateType(obj)}`;
+    return interfaceStr;
+};
+
+;
+const step = 20;
+const percent = 0.05;
+const colorStepContrastFromOrigin = (color, stepNumber) => {
+    return colorContrastFromOrigin(color).find(item => item.step === stepNumber);
+};
+const colorContrastFromOrigin = (color) => {
+    const parsedColorsArray = parseColorValues(color);
+    const colors = [];
+    let calculatedShades = [];
+    let calculatedTints = [];
+    if (parsedColorsArray !== null) {
+        for (let i = 0; i < parsedColorsArray.length; i++) {
+            calculatedShades = calculateShades(parsedColorsArray[i]);
+            calculatedTints = calculateTints(parsedColorsArray[i]);
         }
-        catch (error) {
-            console.trace(`Set key ${key} Error`, error);
-            return false;
+        for (let i = 0; i <= step; i++) {
+            colors.push({ step: i * 5, label: `${i * 5}%`, dark: `#${calculatedShades[i]}`, light: `#${calculatedTints[i]}` });
         }
     }
-    static async ClearAsync(key, isMD5 = false) {
-        return new Promise(async (resolve) => {
-            const objectStore = await this.getObjectStore();
-            if (!objectStore) {
-                return resolve();
+    return colors;
+};
+const parseColorValues = (colorValues) => {
+    let colorValuesArray = colorValues.match(/\b[0-9A-Fa-f]{3}\b|[0-9A-Fa-f]{6}\b/g);
+    if (colorValuesArray) {
+        colorValuesArray = colorValuesArray.map((item) => {
+            if (item.length === 3) {
+                let newItem = item.toString().split('');
+                newItem = newItem.reduce((acc, it) => {
+                    return acc + it + it;
+                }, '');
+                return newItem;
             }
-            const request = objectStore.delete(isMD5 ? key : md5(key));
-            request.onsuccess = () => {
-                resolve({ clearSuccess: true });
-            };
-            request.onerror = (event) => {
-                console.trace('Error deleting Key:', get(event.target.error, 'message'));
-                resolve({ messageError: get(event.target.error, 'message'), clearSuccess: false });
-            };
+            return item;
         });
     }
-    static Clear(key) {
-        if (key.includes('kc-callback-')) {
-            return;
-        }
-        this.LocalStorage.removeItem(key);
+    return colorValuesArray;
+};
+const calculateShades = (colorValue) => {
+    return calculate(colorValue, rgbShade).concat("000000");
+};
+const calculateTints = (colorValue) => {
+    return calculate(colorValue, rgbTint).concat("ffffff");
+};
+const calculate = (colorValue, shadeOrTint) => {
+    const color = hexToRGB(colorValue);
+    const shadeValues = [];
+    for (let i = 0; i < step; i++) {
+        shadeValues[i] = rgbToHex(shadeOrTint(color, i));
     }
-    static ClearAllAsync() {
-        return new Promise(async (resolve) => {
-            const objectStore = await this.getObjectStore();
-            if (!objectStore) {
-                return resolve();
-            }
-            const request = objectStore.clear();
-            request.onsuccess = () => {
-                console.log('clear all successfully');
-                resolve({ clearSuccess: true });
-            };
-            request.onerror = (event) => {
-                console.trace('Error deleting key:', get(event.target.error, 'message'));
-                resolve({ messageError: get(event.target.error, 'message'), clearSuccess: false });
-            };
-        });
+    return shadeValues;
+};
+const rgbShade = (rgb, i) => { return { red: rgb.red * (1 - percent * i), green: rgb.green * (1 - percent * i), blue: rgb.blue * (1 - percent * i) }; };
+const rgbTint = (rgb, i) => { return { red: rgb.red + (255 - rgb.red) * i * percent, green: rgb.green + (255 - rgb.green) * i * percent, blue: rgb.blue + (255 - rgb.blue) * i * percent }; };
+const rgbToHex = (rgb) => { return intToHex(rgb.red) + intToHex(rgb.green) + intToHex(rgb.blue); };
+const hexToRGB = (colorValue) => { return { red: parseInt(colorValue.substr(0, 2), 16), green: parseInt(colorValue.substr(2, 2), 16), blue: parseInt(colorValue.substr(4, 2), 16) }; };
+const intToHex = (rgbint) => { return pad(Math.min(Math.max(Math.round(rgbint), 0), 255).toString(16), 2); };
+const pad = (number, length) => {
+    let str = '' + number;
+    while (str.length < length) {
+        str = '0' + str;
     }
-    static ClearAll() {
-        if (isEmbedFrame()) {
-            const data = {
-                type: this.typeKeyClearLocalStorage,
-                response: {
-                    idEvent: this.idService
-                }
-            };
-            UtilsCommunicateMicro.PostMessageToParent(data);
-        }
-        const keys = [...this.listKeyKeepWhenClearALll];
-        Object.keys(this.LocalStorage).forEach(key => {
-            if (key.includes('kc-callback-')) {
-                keys.push(key);
-            }
-        });
-        const stores = this.GetDataByKeys(Array.from(keys));
-        this.LocalStorage.clear();
-        this.SetDataByKey(stores);
+    return str;
+};
+const listColorDefine = ['#E62222', '#B81B1B', '#EB4E4E', '#F97316', '#C75C12', '#FA8F45', '#FFB700', '#CC9200', '#FFC533', '#84CC16', '#6AA312', '#9dd645', '#00BC62', '#00A757', '#33DA8A', '#06B6D4', '#1B59C4', '#4E8CF7', '#0EA5E9',
+    '#1B59C4', '#4E8CF7', '#226FF5', '#1B59C4', '#4E8CF7', '#6366F1', '#4F52C1', '#8285F4', '#5B04B3', '#49038F', '#7C36C2', '#D946EF', '#AE38BF', '#E16BF2', '#EC4899', '#BD3A7A', '#F06DAD', '#F43F5E', '#C3324B', '#F6657E', '#757380', '#5E5C66', '#918F99',
+    '#202020', '#1A1A1A', '#4D4D4D'
+];
+const getColorById = (str) => {
+    let hashString = 0;
+    if (!str) {
+        return '';
     }
-    static GetDataByKeys(keys) {
-        const stores = new Map();
-        keys.forEach((key) => {
-            if (key.includes('kc-callback-')) {
-                stores.set(key, this.LocalStorage.getItem(key));
-                return;
-            }
-            stores.set(key, this.Get(key));
-        });
-        return stores;
+    for (let i = 0; i < str.length; i++) {
+        const char = str.charCodeAt(i);
+        hashString = ((hashString << 5) - hashString) + char;
+        hashString = hashString & hashString;
     }
-    static SetDataByKey(stores) {
-        stores.forEach((value, key) => {
-            if (key.includes('kc-callback-')) {
-                this.LocalStorage.setItem(key, value);
-                return;
-            }
-            if (key === this.languageKeyCache) {
-                return this.setLang(value);
-            }
-            this.Set(key, value, this.CACHE_EXPIRE_NONE);
-        });
+    return listColorDefine[Math.abs(hashString) % listColorDefine.length];
+};
+
+class UtilsKeyCodeConstant {
+    static MAC_ENTER = 3;
+    static BACKSPACE = 8;
+    static TAB = 9;
+    static NUM_CENTER = 12;
+    static ENTER = 13;
+    static SHIFT = 16;
+    static CONTROL = 17;
+    static ALT = 18;
+    static PAUSE = 19;
+    static CAPS_LOCK = 20;
+    static ESCAPE = 27;
+    static SPACE = 32;
+    static PAGE_UP = 33;
+    static PAGE_DOWN = 34;
+    static END = 35;
+    static HOME = 36;
+    static LEFT_ARROW = 37;
+    static UP_ARROW = 38;
+    static RIGHT_ARROW = 39;
+    static DOWN_ARROW = 40;
+    static PLUS_SIGN = 43;
+    static PRINT_SCREEN = 44;
+    static INSERT = 45;
+    static DELETE = 46;
+    static ZERO = 48;
+    static ONE = 49;
+    static TWO = 50;
+    static THREE = 51;
+    static FOUR = 52;
+    static FIVE = 53;
+    static SIX = 54;
+    static SEVEN = 55;
+    static EIGHT = 56;
+    static NINE = 57;
+    static FF_SEMICOLON = 59; // Firefox (Gecko) fires this for semicolon instead of 186
+    static FF_EQUALS = 61; // Firefox (Gecko) fires this for equals instead of 187
+    static QUESTION_MARK = 63;
+    static AT_SIGN = 64;
+    static A = 65;
+    static B = 66;
+    static C = 67;
+    static D = 68;
+    static E = 69;
+    static F = 70;
+    static G = 71;
+    static H = 72;
+    static I = 73;
+    static J = 74;
+    static K = 75;
+    static L = 76;
+    static M = 77;
+    static N = 78;
+    static O = 79;
+    static P = 80;
+    static Q = 81;
+    static R = 82;
+    static S = 83;
+    static T = 84;
+    static U = 85;
+    static V = 86;
+    static W = 87;
+    static X = 88;
+    static Y = 89;
+    static Z = 90;
+    static META = 91; // WIN_KEY_LEFT
+    static MAC_WK_CMD_LEFT = 91;
+    static MAC_WK_CMD_RIGHT = 93;
+    static CONTEXT_MENU = 93;
+    static NUMPAD_ZERO = 96;
+    static NUMPAD_ONE = 97;
+    static NUMPAD_TWO = 98;
+    static NUMPAD_THREE = 99;
+    static NUMPAD_FOUR = 100;
+    static NUMPAD_FIVE = 101;
+    static NUMPAD_SIX = 102;
+    static NUMPAD_SEVEN = 103;
+    static NUMPAD_EIGHT = 104;
+    static NUMPAD_NINE = 105;
+    static NUMPAD_MULTIPLY = 106;
+    static NUMPAD_PLUS = 107;
+    static NUMPAD_MINUS = 109;
+    static NUMPAD_PERIOD = 110;
+    static NUMPAD_DIVIDE = 111;
+    static F1 = 112;
+    static F2 = 113;
+    static F3 = 114;
+    static F4 = 115;
+    static F5 = 116;
+    static F6 = 117;
+    static F7 = 118;
+    static F8 = 119;
+    static F9 = 120;
+    static F10 = 121;
+    static F11 = 122;
+    static F12 = 123;
+    static NUM_LOCK = 144;
+    static SCROLL_LOCK = 145;
+    static FIRST_MEDIA = 166;
+    static FF_MINUS = 173;
+    static MUTE = 173; // Firefox (Gecko) fires 181 for MUTE
+    static VOLUME_DOWN = 174; // Firefox (Gecko) fires 182 for VOLUME_DOWN
+    static VOLUME_UP = 175; // Firefox (Gecko) fires 183 for VOLUME_UP
+    static FF_MUTE = 181;
+    static FF_VOLUME_DOWN = 182;
+    static LAST_MEDIA = 183;
+    static FF_VOLUME_UP = 183;
+    static SEMICOLON = 186; // Firefox (Gecko) fires 59 for SEMICOLON
+    static EQUALS = 187; // Firefox (Gecko) fires 61 for EQUALS
+    static COMMA = 188;
+    static DASH = 189; // Firefox (Gecko) fires 173 for DASH/MINUS
+    static PERIOD = 190;
+    static SLASH = 191;
+    static APOSTROPHE = 192;
+    static TILDE = 192;
+    static OPEN_SQUARE_BRACKET = 219;
+    static BACKSLASH = 220;
+    static CLOSE_SQUARE_BRACKET = 221;
+    static SINGLE_QUOTE = 222;
+    static MAC_META = 224;
+}
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+const getKeyCacheByArrayObject = (keyCache, argumentsValue) => {
+    if (!keyCache || !argumentsValue) {
+        return '';
     }
-    static DeleteKeyStartWithAsync(keyCacheStartWith, isKeyMD5 = false) {
-        return new Promise(async (resolve) => {
-            const objectStore = await this.getObjectStore();
-            if (!objectStore) {
-                return resolve({});
+    let keyBuild = `${JSON.stringify(argumentsValue.slice(1))}-key-cache-plus`;
+    argumentsValue.forEach((item) => {
+        if (typeof item === 'object') {
+            if (Array.isArray(item)) {
+                keyBuild = `${keyBuild}${JSON.stringify(item)}`;
+                return;
             }
-            // Lấy tất cả các keys từ index
-            const request = objectStore.getAll();
-            keyCacheStartWith = isKeyMD5 ? keyCacheStartWith : md5(keyCacheStartWith);
-            request.onsuccess = (e) => {
-                const data = e.target.result;
-                if (!Array.isArray(data)) {
-                    return resolve({});
-                }
-                data.forEach(obj => {
-                    if (obj[this.itemIndexByKey].startsWith(keyCacheStartWith)) {
-                        this.ClearAsync(obj[this.itemIndexByKey], true);
-                    }
-                });
-                return resolve({});
-            };
-            request.onerror = () => {
-                return resolve({});
-            };
-        });
-    }
-    static DeleteKeyStartWith(keyCache, isMD5 = false) {
-        keyCache = isMD5 ? md5(keyCache) : keyCache;
-        const keys = Object.keys(this.LocalStorage);
-        if (!keys || !keys.length) {
+            const keys = (item instanceof HttpParams ? item.keys() : Object.keys(item)).sort(((str1, str2) => str1.localeCompare(str2)));
+            keys.forEach(key => {
+                keyBuild = `${keyBuild}${JSON.stringify(get(item, key))}`;
+            });
             return;
         }
-        keys.forEach(key => {
-            if (key.startsWith(keyCache)) {
-                this.Clear(key);
-            }
-        });
-    }
-    static DeleteDatabaseIndexDB(dbName) {
-        return new Promise((resolve) => {
-            dbName = (dbName || this.dbName);
-            const request = indexedDB.deleteDatabase(dbName);
-            request.onsuccess = () => {
-                console.trace('Database deleted successfully');
-                resolve({ deleteSuccess: true });
-            };
-            request.onerror = (event) => {
-                console.trace('Error deleting database:', event.target.error);
-                resolve({ messageError: get(event.target.error, 'message'), deleteSuccess: false });
-            };
-            request.onblocked = () => {
-                console.trace('Delete request is blocked');
-                resolve({ messageError: 'Delete request is blocked', deleteSuccess: false });
-            };
-        });
-    }
-}
+        keyBuild = `${keyBuild}${item}`;
+    });
+    const keyCachePlus = md5(keyBuild);
+    const keyCacheMD5 = md5(keyCache);
+    return `${keyCacheMD5}-${md5(`${keyCacheMD5}-${keyCachePlus}`)}`;
+};
 
 const formatNumber = (value) => {
     const lang = UtilsCache.getLang();
@@ -2194,185 +2379,6 @@ const convertSignalToObject = (data, isCloneDeep = true, seen = new WeakMap()) =
     return result;
 };
 
-dayjs.extend(localeData);
-dayjs.extend(updateLocale);
-dayjs.extend(utc);
-dayjs.extend(timezone);
-dayjs.extend(customParseFormat);
-let timeZoneSetup = "Asia/Ho_Chi_Minh";
-const setDefaultTimeZone = (localeZone = timeZoneSetup) => {
-    timeZoneSetup = localeZone;
-    dayjs.tz.setDefault(localeZone);
-};
-let functionFormatDate = undefined;
-const updateFunctionFormatDate = (functionCustom) => {
-    functionFormatDate = functionCustom;
-};
-/**
-  * @description Lấy đối tượng dayjs theo config
-  * @param config nếu không có config sẽ trả về đối tượng dayjs là thời gian hiện tại
-  * @param config.date thời gian cần lấy
-  * @param config.returnDayjsIfConfigDateNotExist true nếu muốn trả về đối tượng dayjs nếu config.date không có
-  * @param config.utc true nếu muốn lấy thời gian UTC
-  * @param config.formatOfDate định dạng thời gian đang được truyền vào
-*/
-const getDayjs = (config) => {
-    if (!config) {
-        return dayjs().tz();
-    }
-    config.date = !config.date && config.returnDayjsIfConfigDateNotExist ? dayjs().tz() : config.date;
-    if (typeof config.date === 'number') {
-        config.date = dayjs.unix(config.date);
-    }
-    if (!config.date) {
-        return undefined;
-    }
-    let { date, utc, formatOfDate } = config;
-    while (isSignal(date)) {
-        date = date();
-    }
-    while (isSignal(utc)) {
-        utc = utc();
-    }
-    while (isSignal(formatOfDate)) {
-        formatOfDate = formatOfDate();
-    }
-    if (utc) {
-        if (formatOfDate) {
-            return dayjs(date, formatOfDate).utc();
-        }
-        const dateInputIsUTC = (typeof date === 'object' && date.isUTC()) || (typeof date === 'string' && date.includes('Z'));
-        if (dateInputIsUTC) {
-            return dayjs(date);
-        }
-        return dayjs(date).utc();
-    }
-    if (typeof date === 'string' && !date.includes('Z') && !date.includes('+')) {
-        return (formatOfDate ? dayjs.tz(date, formatOfDate, config.localeZone || timeZoneSetup) : dayjs.tz(date, config.localeZone || timeZoneSetup));
-    }
-    return (formatOfDate ? dayjs(date, formatOfDate) : dayjs(date)).tz();
-};
-/**
- * @description Kiểm tra xem hai ngày có khác nhau không (khác ngày trong tuần)
- * @param date1 ngày thứ nhất cần so sánh
- * @param date2 ngày thứ hai cần so sánh
- * @returns true nếu hai ngày khác nhau, false nếu giống nhau hoặc không thể so sánh
- */
-const isDifferenceDay = (date1, date2) => {
-    if (isDifferenceMonth(date1, date2)) {
-        return true;
-    }
-    const day1 = getDayjs({ date: date1 })?.day();
-    const day2 = getDayjs({ date: date2 })?.day();
-    return day1 !== day2;
-};
-/**
- * @description Kiểm tra xem hai ngày có khác tháng không
- * @param date1 ngày thứ nhất cần so sánh
- * @param date2 ngày thứ hai cần so sánh
- * @returns true nếu hai ngày khác tháng, false nếu cùng tháng hoặc không thể so sánh
- */
-const isDifferenceMonth = (date1, date2) => {
-    if (isDifferenceYear(date1, date2)) {
-        return true;
-    }
-    const month1 = getDayjs({ date: date1 })?.month();
-    const month2 = getDayjs({ date: date2 })?.month();
-    return month1 !== month2;
-};
-/**
- * @description Kiểm tra xem hai ngày có khác năm không
- * @param date1 ngày thứ nhất cần so sánh
- * @param date2 ngày thứ hai cần so sánh
- * @returns true nếu hai ngày khác năm, false nếu cùng năm hoặc không thể so sánh
- */
-const isDifferenceYear = (date1, date2) => {
-    const year1 = getDayjs({ date: date1 })?.year();
-    const year2 = getDayjs({ date: date2 })?.year();
-    return year1 !== year2;
-};
-/**
- * @description Lấy ra chuỗi thời gian hiển thị theo định dạng và ngôn ngữ
- * @param date thời gian cần định dạng
- * @param format định dạng thời gian muốn lấy ra
- * @param lang lấy theo ngôn ngữ
- */
-const formatDate = (date, formatOutput = 'YYYY/MM/DD HH:mm', lang, formatInput) => {
-    if (!date) {
-        return '';
-    }
-    lang = lang || UtilsCache.getLang();
-    if (functionFormatDate) {
-        return functionFormatDate(date, formatOutput, lang);
-    }
-    date = getDayjs({ date, formatOfDate: formatInput }).locale(lang);
-    if (lang === 'vi') {
-        dayjs.updateLocale('vi', {
-            monthsShort: 'Thg 1_Thg 2_Thg 3_Thg 4_Thg 5_Thg 6_Thg 7_Thg 8_Thg 9_Thg 10_Thg 11_Thg 12'.split('_')
-        });
-    }
-    return date.format(getFormatData(getTypeByFormat(formatOutput), lang)) || '';
-};
-const getTypeByFormat = (format) => {
-    if (format === 'dm' || format === 'dmy' || format === 'dmy hm' || format === 'my') {
-        return format;
-    }
-    if (format === 'DD/MM/YYYY' || format === 'YYYY-MM-DD' || format === 'dd/MM/yyyy' || format === 'dd-MM-yyyy' || format === 'dd/mm/yyyy') {
-        return 'dmy';
-    }
-    if (format === 'MM-DD' || format === 'dd/MM' || format === 'dd/mm') {
-        return 'dm';
-    }
-    if (format === 'M/YYYY' || format === 'YYYY-MM' || format === 'MM/yyyy') {
-        return 'my';
-    }
-    if (format === 'YYYY/MM/DD hh:mm:ss' || format === 'dmy hms' || format === 'dd/mm/yyyy hh:mm:ss') {
-        return 'dmy hms';
-    }
-    if (format === 'hh:mm' || format === 'HH:mm') {
-        return 'hh:mm';
-    }
-    if (format === 'hh:mm A' || format === 'HH:mm A') {
-        return 'hh:mm A';
-    }
-    return 'dmy hm';
-};
-const getFormatData = (type, lang) => {
-    switch (type) {
-        case 'dm':
-            if (lang === 'vi') {
-                return 'D MMM';
-            }
-            return 'MMM D';
-        case 'dmy':
-            if (lang === 'vi') {
-                return 'D MMM, YYYY';
-            }
-            return 'MMM D, YYYY';
-        case 'dmy hm':
-            if (lang === 'vi') {
-                return 'D MMM, YYYY HH:mm';
-            }
-            return 'MMM D, YYYY HH:mm';
-        case 'my':
-            if (lang === 'vi') {
-                return 'MMM, YYYY';
-            }
-            return 'MMM YYYY ';
-        case 'dmy hms':
-            if (lang === 'vi') {
-                return 'D MMM, YYYY HH:mm:ss';
-            }
-            return 'MMM D, YYYY HH:mm:ss';
-        case 'hh:mm':
-        case 'HH:mm':
-            return 'HH:mm';
-        case 'hh:mm A':
-        case 'HH:mm A':
-            return 'HH:mm A';
-    }
-};
-
 const ENCODE_URI_PATTERN = /%([0-9A-F]{2})/g;
 const decodeURI = (value) => {
     return decodeURIComponent(value.split('').map((c) => {
@@ -2531,7 +2537,7 @@ const convertBlobToFile = (blob, fileName) => {
     return new File([blob], name, { type: blob.type, lastModified: Date.now() });
 };
 const convertUrlToFile = (url, fileName) => {
-    return new Promise((resolve) => {
+    return new Promise((resolve, reject) => {
         const xhr = new XMLHttpRequest();
         xhr.onload = function () {
             const reader = new FileReader();
@@ -2541,6 +2547,9 @@ const convertUrlToFile = (url, fileName) => {
             };
             reader.readAsDataURL(xhr.response);
         };
+        xhr.onerror = (err) => {
+            reject(err);
+        };
         xhr.open('GET', url);
         xhr.responseType = 'blob';
         xhr.send();