@brggroup/share-lib 0.0.1

package/fesm2022/brggroup-share-lib.mjs

@@ -0,0 +1,2951 @@
+import * as i0 from '@angular/core';
+import { inject, Injectable, Component, HostListener, ViewContainerRef, Input, ViewChild, EventEmitter, Output, Directive, Optional, Self, HostBinding, forwardRef, Pipe } from '@angular/core';
+import * as i1$3 from '@angular/router';
+import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
+import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
+import * as i3 from '@ngx-translate/core';
+import { TranslateService, TranslateModule } from '@ngx-translate/core';
+import { firstValueFrom, BehaviorSubject, of, catchError, EMPTY, throwError, finalize, filter, fromEvent } from 'rxjs';
+import { NzNotificationService } from 'ng-zorro-antd/notification';
+import * as i1 from 'ng-zorro-antd/modal';
+import { NzModalService } from 'ng-zorro-antd/modal';
+import { jwtDecode } from 'jwt-decode';
+import { switchMap, delay, distinctUntilChanged, filter as filter$1, takeUntil } from 'rxjs/operators';
+import * as i2$2 from '@angular/forms';
+import { FormGroup, FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import * as i1$2 from '@angular/common';
+import { Location, CommonModule } from '@angular/common';
+import { Overlay } from '@angular/cdk/overlay';
+import { TemplatePortal } from '@angular/cdk/portal';
+import * as i1$1 from 'ng-zorro-antd/breadcrumb';
+import { NzBreadCrumbModule } from 'ng-zorro-antd/breadcrumb';
+import * as i2 from 'ng-zorro-antd/icon';
+import { NzIconModule } from 'ng-zorro-antd/icon';
+import { Chart, registerables } from 'chart.js';
+import * as i4 from 'ng-zorro-antd/grid';
+import { NzGridModule } from 'ng-zorro-antd/grid';
+import * as i2$1 from 'ng-zorro-antd/checkbox';
+import { NzCheckboxModule } from 'ng-zorro-antd/checkbox';
+import * as i5 from 'ng-zorro-antd/form';
+import { NzFormModule } from 'ng-zorro-antd/form';
+import * as i5$1 from 'ng-zorro-antd/date-picker';
+import { NzDatePickerModule } from 'ng-zorro-antd/date-picker';
+import * as i6 from 'ng-zorro-antd/input-number';
+import { NzInputNumberModule } from 'ng-zorro-antd/input-number';
+import * as i6$1 from 'ng-zorro-antd/input';
+import { NzInputModule } from 'ng-zorro-antd/input';
+import * as i6$2 from 'ng-zorro-antd/select';
+import { NzSelectModule } from 'ng-zorro-antd/select';
+import * as i1$4 from 'ngx-extended-pdf-viewer';
+import { NgxExtendedPdfViewerModule } from 'ngx-extended-pdf-viewer';
+import { trigger, transition, animate, style } from '@angular/animations';
+import * as i2$3 from 'ng-zorro-antd/spin';
+import { NzSpinModule } from 'ng-zorro-antd/spin';
+import * as XLSX from 'xlsx';
+
+var TranslateKey;
+(function (TranslateKey) {
+    TranslateKey["ACTION"] = "ACTION";
+    TranslateKey["ADD"] = "ADD";
+    TranslateKey["AGREE"] = "AGREE";
+    TranslateKey["BACK"] = "BACK";
+    TranslateKey["CANCEL"] = "CANCEL";
+    TranslateKey["CLOSE"] = "CLOSE";
+    TranslateKey["CONFIRM"] = "CONFIRM";
+    TranslateKey["CONFIRM_DELETE"] = "CONFIRM_DELETE";
+    TranslateKey["COMPLETE"] = "COMPLETE";
+    TranslateKey["DELETE"] = "DELETE";
+    TranslateKey["DELETE_SUCCESS"] = "DELETE_SUCCESS";
+    TranslateKey["EDIT"] = "EDIT";
+    TranslateKey["ERROR"] = "ERROR";
+    TranslateKey["EXPORT"] = "EXPORT";
+    TranslateKey["HIDDEN"] = "HIDDEN";
+    TranslateKey["IMPORT"] = "IMPORT";
+    TranslateKey["INFO"] = "INFO";
+    TranslateKey["LOGIN"] = "LOGIN";
+    TranslateKey["LOGOUT"] = "LOGOUT";
+    TranslateKey["NO_CONNECT_TO_SERVER"] = "NO_CONNECT_TO_SERVER";
+    TranslateKey["OK"] = "OK";
+    TranslateKey["PASSWORD"] = "PASSWORD";
+    TranslateKey["REQUIRED"] = "REQUIRED";
+    TranslateKey["REQUIRED_FIELD"] = "REQUIRED_FIELD";
+    TranslateKey["REFEESH"] = "REFEESH";
+    TranslateKey["RESET"] = "RESET";
+    TranslateKey["RESET_PASSWORD"] = "RESET_PASSWORD";
+    TranslateKey["SAVE"] = "SAVE";
+    TranslateKey["SEARCH"] = "SEARCH";
+    TranslateKey["SHOW"] = "SHOW";
+    TranslateKey["SUCCESS"] = "SUCCESS";
+    TranslateKey["SAVE_SUCCESS"] = "SAVE_SUCCESS";
+    TranslateKey["SETTING"] = "SETTING";
+    TranslateKey["PROFILE"] = "PROFILE";
+    TranslateKey["USERNAME"] = "USERNAME";
+    TranslateKey["UPDATE"] = "UPDATE";
+    TranslateKey["WARNING"] = "WARNING";
+    TranslateKey["YES"] = "YES";
+    TranslateKey["DOWNLOAD_TEMPLATE"] = "DOWNLOAD_TEMPLATE";
+    TranslateKey["WARNING_CHECK_DATA"] = "WARNING_CHECK_DATA";
+})(TranslateKey || (TranslateKey = {}));
+
+class AppGlobals {
+    static apiEndpoint;
+    static versionCheck;
+    static MENU_TYPE = 'toolbar-menu';
+    static pageSizeOptions = [10, 20, 50, 100];
+    static filterSet = {};
+    static selectedIdSet = {};
+    static clearFillter() {
+        this.filterSet = {};
+    }
+    static getFilter(key) {
+        return this.filterSet[key];
+    }
+    static setFilter(key, filter) {
+        this.filterSet[key] = filter;
+    }
+    static getSelectedId(key) {
+        return this.selectedIdSet[key];
+    }
+    static setSelectedId(key, value) {
+        this.selectedIdSet[key] = value;
+    }
+    static setLang(lang) {
+        localStorage.setItem('LANGUAGE', lang);
+    }
+    static getLang() {
+        if (!localStorage.getItem('LANGUAGE')) {
+            localStorage.setItem('LANGUAGE', 'vn');
+        }
+        return localStorage.getItem('LANGUAGE') || '';
+    }
+    static getOrgId() {
+        return localStorage.getItem('orgid');
+    }
+    static getOrgCode() {
+        return localStorage.getItem('orgcode');
+    }
+    static getOrgName() {
+        return localStorage.getItem('orgname');
+    }
+    static getUserName() {
+        return localStorage.getItem('username');
+    }
+    static getUserFullName() {
+        return localStorage.getItem('fullname');
+    }
+}
+
+class AppStorage {
+    static get tokenStorage() {
+        return localStorage;
+        // return sessionStorage;
+    }
+    static get localStoreage() {
+        return localStorage;
+    }
+    static get sessionStoreage() {
+        return sessionStorage;
+    }
+    static getLang() {
+        return AppStorage.localStoreage.getItem('LANGUAGE') || 'vn';
+    }
+    static setLang(lang) {
+        AppStorage.localStoreage.setItem('LANGUAGE', lang || 'vn');
+    }
+}
+
+class HTTPService {
+    httpClient = inject(HttpClient);
+    get(url, noLoadingMark) {
+        const options = {
+            headers: new HttpHeaders({
+                'Content-Type': 'application/json; charset=utf-8',
+                'no-loading-mark': noLoadingMark ? '1' : '0',
+            }),
+        };
+        return firstValueFrom(this.httpClient.get(url, options));
+    }
+    getParams(url, params, noLoadingMark) {
+        const options = {
+            headers: new HttpHeaders({
+                'Content-Type': 'application/json; charset=utf-8',
+                'no-loading-mark': noLoadingMark ? '1' : '0',
+            }),
+            params: params,
+        };
+        return firstValueFrom(this.httpClient.get(url, options));
+    }
+    post(url, noLoadingMark) {
+        const options = {
+            headers: new HttpHeaders({
+                'Content-Type': 'application/json; charset=utf-8',
+                'no-loading-mark': noLoadingMark ? '1' : '0',
+            }),
+        };
+        return firstValueFrom(this.httpClient.post(url, null, options));
+    }
+    postParams(url, params, noLoadingMark) {
+        const options = {
+            headers: new HttpHeaders({
+                'Content-Type': 'application/json; charset=utf-8',
+                'no-loading-mark': noLoadingMark ? '1' : '0',
+            }),
+            params: params,
+        };
+        return firstValueFrom(this.httpClient.post(url, null, options));
+    }
+    postData(url, body, noLoadingMark) {
+        const options = {
+            headers: new HttpHeaders({
+                'Content-Type': 'application/json; charset=utf-8',
+                'no-loading-mark': noLoadingMark ? '1' : '0',
+            }),
+        };
+        return firstValueFrom(this.httpClient.post(url, body, options));
+    }
+    postDataWithParams(url, body, params, noLoadingMark) {
+        const options = {
+            headers: new HttpHeaders({
+                'Content-Type': 'application/json; charset=utf-8',
+                'no-loading-mark': noLoadingMark ? '1' : '0',
+            }),
+            params: params,
+        };
+        return firstValueFrom(this.httpClient.post(url, body, options));
+    }
+}
+
+function escapeHtml(str) {
+    return str.replace(/</g, '&lt;').replace(/>/g, '&gt;');
+}
+class NotiService {
+    modal = inject(NzModalService);
+    notification = inject(NzNotificationService);
+    translate = inject(TranslateService);
+    async success(title, content = '', showPopup = false) {
+        if (showPopup) {
+            return new Promise((resolve) => {
+                const modalRef = this.modal.success({
+                    nzTitle: title ?? this.translate.instant(TranslateKey.SUCCESS),
+                    nzContent: content,
+                    nzOnOk: () => resolve(),
+                });
+            });
+        }
+        else {
+            const notiRef = this.notification.success(title ?? this.translate.instant(TranslateKey.SUCCESS), content);
+            if (notiRef?.onClose) {
+                await firstValueFrom(notiRef.onClose);
+            }
+        }
+    }
+    async warning(title, content = '', showPopup = false) {
+        if (showPopup) {
+            return new Promise((resolve) => {
+                const modalRef = this.modal.warning({
+                    nzTitle: title,
+                    nzContent: content,
+                    nzOnOk: () => resolve(),
+                });
+            });
+        }
+        else {
+            const notiRef = this.notification.warning(title, content);
+            if (notiRef?.onClose) {
+                await firstValueFrom(notiRef.onClose);
+            }
+        }
+    }
+    async error(title, content = '', showPopup = false) {
+        if (showPopup) {
+            return new Promise((resolve) => {
+                const modalRef = this.modal.error({
+                    nzTitle: title,
+                    nzContent: content,
+                    nzOnOk: () => resolve(),
+                });
+            });
+        }
+        else {
+            const notiRef = this.notification.error(title, content);
+            if (notiRef?.onClose) {
+                await firstValueFrom(notiRef.onClose);
+            }
+        }
+    }
+    handleError(err) {
+        if (err?.status == 0) {
+            // this.notification.error('', this.translate.instant('NO_CONNECT_TO_SERVER'), { nzDuration: 0 });
+            this.modal.error({
+                nzTitle: 'Lỗi phát sinh',
+                nzContent: this.translate.instant('NO_CONNECT_TO_SERVER'),
+                nzWidth: '40vw',
+                nzOkText: 'Đóng',
+            });
+            return;
+        }
+        let _data = null;
+        if (err?.error instanceof ArrayBuffer) {
+            const message = new TextDecoder('utf-8').decode(new Uint8Array(err.error));
+            try {
+                _data = JSON.parse(message);
+            }
+            catch (error) { }
+        }
+        else if (err?.error instanceof Blob) {
+            const reader = new FileReader();
+            reader.onload = () => {
+                try {
+                    const text = reader.result;
+                    _data = JSON.parse(text);
+                    this.handleError(_data);
+                }
+                catch (e) {
+                    // this.notification.error('', this.translate.instant('UNKNOWN_ERROR'), { nzDuration: 0 });
+                    this.modal.error({
+                        nzTitle: 'Lỗi phát sinh',
+                        nzContent: this.translate.instant('UNKNOWN_ERROR'),
+                        nzWidth: '40vw',
+                        nzOkText: 'Đóng',
+                    });
+                }
+            };
+            reader.onerror = () => {
+                // this.notification.error('', this.translate.instant('UNKNOWN_ERROR'), { nzDuration: 0 });
+                this.modal.error({
+                    nzTitle: 'Lỗi phát sinh',
+                    nzContent: this.translate.instant('UNKNOWN_ERROR'),
+                    nzWidth: '40vw',
+                    nzOkText: 'Đóng',
+                });
+            };
+            reader.readAsText(err.error);
+            return;
+        }
+        else if (err?.error && typeof err.error === 'object') {
+            _data = err.error;
+        }
+        else {
+            _data = err;
+        }
+        let errorMsg = err?.message || 'An unexpected error occurred.';
+        if (err?.name == 'EmptyError' && err?.message == 'no elements in sequence') {
+            return;
+        }
+        if (_data?.ErrorMessage) {
+            let hasMsgTag = false;
+            let isMatchFirstMsg = false;
+            let isMatch = _data.ErrorMessage?.match(/System.Data.SqlClient.SqlException \(0x80131904\): <msg>(.*?)<\/msg>/);
+            isMatchFirstMsg = isMatch ? true : false;
+            if (isMatchFirstMsg) {
+                const matches = [..._data.ErrorMessage?.matchAll(/<msg>(.*?)<\/msg>/g)];
+                const messages = matches.map((m) => m[1]);
+                if (messages.length > 0) {
+                    errorMsg = messages.join('\n');
+                    hasMsgTag = true;
+                }
+                else {
+                    errorMsg = _data.ErrorMessage;
+                }
+            }
+            else {
+                errorMsg = _data.ErrorMessage;
+            }
+        }
+        const modalRef = this.modal.error({
+            nzTitle: 'Lỗi phát sinh',
+            nzContent: errorMsg,
+            nzWidth: '40vw',
+            nzClosable: false,
+            nzOkText: 'Đóng',
+            nzCancelText: 'Chi tiết',
+            nzOnCancel: () => {
+                modalRef.destroy();
+                this.modal.error({
+                    nzTitle: 'Chi tiết lỗi',
+                    nzContent: escapeHtml(JSON.stringify(_data, null, 2)),
+                    nzWidth: '60vw',
+                    nzDraggable: true,
+                    nzCentered: true,
+                    nzOkText: 'Đóng',
+                });
+            },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: NotiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: NotiService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: NotiService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+var ENUM_ResponseType;
+(function (ENUM_ResponseType) {
+    ENUM_ResponseType["ARRAYBUFFER"] = "arraybuffer";
+    ENUM_ResponseType["BLOB"] = "blob";
+})(ENUM_ResponseType || (ENUM_ResponseType = {}));
+class CommonService extends HTTPService {
+    ESP(obj) {
+        const params = new HttpParams().append('SPN', obj.SPN);
+        return this.postDataWithParams(AppGlobals.apiEndpoint + '/api/Common/ESP', obj, params);
+    }
+    ExportExcel(data) {
+        return firstValueFrom(this.httpClient.post(AppGlobals.apiEndpoint + '/api/Common/ExportExcel', data, {
+            responseType: ENUM_ResponseType.BLOB,
+            observe: 'response',
+        }));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: CommonService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: CommonService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: CommonService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class TokenStorage {
+    static JWT_TOKEN = 'JWT_TOKEN';
+    static USER_NAME = 'username';
+    static FULL_NAME = 'fullname';
+    static USER_MENU = 'usermenu';
+    static ORG_ID = 'orgid';
+    static ORG_CODE = 'orgcode';
+    static ORG_NAME = 'orgname';
+    static saveToken(tokenRes) {
+        AppStorage.tokenStorage.setItem(this.JWT_TOKEN, tokenRes.Data.Token);
+        const userInfo = jwtDecode(tokenRes.Data.Token);
+        AppStorage.tokenStorage.setItem(this.USER_NAME, userInfo[this.USER_NAME]);
+        AppStorage.tokenStorage.setItem(this.FULL_NAME, userInfo[this.FULL_NAME]);
+        AppStorage.tokenStorage.setItem(this.ORG_ID, userInfo[this.ORG_ID]);
+        AppStorage.tokenStorage.setItem(this.ORG_CODE, userInfo[this.ORG_CODE]);
+        AppStorage.tokenStorage.setItem(this.ORG_NAME, userInfo[this.ORG_NAME]);
+    }
+    static saveUserMenu(menus) {
+        AppStorage.tokenStorage.setItem(this.USER_MENU, JSON.stringify(menus));
+    }
+    static getUserMenu() {
+        return JSON.parse(AppStorage.tokenStorage.getItem(this.USER_MENU) || '[]');
+    }
+    static getUsername() {
+        return AppStorage.tokenStorage.getItem(this.USER_NAME);
+    }
+    static getUserFullname() {
+        return AppStorage.tokenStorage.getItem(this.FULL_NAME);
+    }
+    static getOrgId() {
+        return AppStorage.tokenStorage.getItem(this.ORG_ID);
+    }
+    static getOrgCode() {
+        return AppStorage.tokenStorage.getItem(this.ORG_CODE);
+    }
+    static getOrgName() {
+        return AppStorage.tokenStorage.getItem(this.ORG_NAME);
+    }
+    static getToken() {
+        return AppStorage.tokenStorage.getItem(this.JWT_TOKEN);
+    }
+    static isLoggedIn() {
+        return AppStorage.tokenStorage.getItem(this.JWT_TOKEN) != null;
+    }
+    static clearToken() {
+        console.log('-- clearToken --');
+        AppStorage.tokenStorage.removeItem(this.JWT_TOKEN);
+        AppStorage.tokenStorage.removeItem(this.USER_NAME);
+        AppStorage.tokenStorage.removeItem(this.FULL_NAME);
+        AppStorage.tokenStorage.removeItem(this.USER_MENU);
+        AppStorage.tokenStorage.removeItem(this.ORG_ID);
+        AppStorage.tokenStorage.removeItem(this.ORG_CODE);
+        AppStorage.tokenStorage.removeItem(this.ORG_NAME);
+    }
+}
+
+const URLs = {
+    login: '/api/Auth/Login',
+    pingAuth: '/api/Auth/PingAuth',
+    changePassword: '/api/Auth/ChangePassword',
+    setPass: '/api/Auth/SetPass',
+};
+class AuthService extends HTTPService {
+    notiService = inject(NotiService);
+    commonService = inject(CommonService);
+    router = inject(Router);
+    translate = inject(TranslateService);
+    async pingAuth() {
+        try {
+            const res = await this.post(AppGlobals.apiEndpoint + URLs.pingAuth);
+            return res?.IsSuccess;
+        }
+        catch {
+            return false;
+        }
+    }
+    async signIn(username, password, orgid, returnUrl) {
+        try {
+            const body = {
+                UserName: username,
+                Password: password,
+                OrgId: orgid,
+            };
+            const res = await this.sendSignIn(body);
+            if (!res.IsSuccess) {
+                this.notiService.error(this.translate.instant(res.ErrorMessage));
+                return false;
+            }
+            this.notiService.success('Đăng nhập thành công');
+            TokenStorage.saveToken(res);
+            if (returnUrl) {
+                this.router.navigateByUrl(returnUrl);
+            }
+        }
+        catch (err) {
+            this.notiService.handleError(err);
+            return false;
+        }
+        return true;
+    }
+    async sendSignIn(body) {
+        return firstValueFrom(this.httpClient.post(AppGlobals.apiEndpoint + URLs.login, body, {
+            headers: new HttpHeaders().set('Content-Type', 'application/json'),
+        }));
+    }
+    signOut() {
+        TokenStorage.clearToken();
+        this.router.navigate(['/login']);
+    }
+    getUserMenu() {
+        let data = {
+            SPN: `App_User_getUserMenu`,
+        };
+        return this.commonService.ESP(data);
+    }
+    async checkUserMenu(url) {
+        try {
+            const ret = await this.commonService.ESP({
+                SPN: `App_User_checkUserMenu`,
+                Params: [url],
+            });
+            return ret.IsSuccess && ret.Data == '1';
+        }
+        catch (error) {
+            this.notiService.handleError(error);
+            return true;
+        }
+    }
+    changePassword(data) {
+        return this.postData(AppGlobals.apiEndpoint + URLs.changePassword, data);
+    }
+    setPass(data) {
+        return this.postData(AppGlobals.apiEndpoint + URLs.setPass, data);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AuthService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AuthService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AuthService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class AuthGuard {
+    router = inject(Router);
+    authService = inject(AuthService);
+    async canActivate(route, state) {
+        // return true;
+        if (await this.authService.pingAuth()) {
+            return true;
+        }
+        TokenStorage.clearToken();
+        if (state.url != '/') {
+            this.router.navigate(['/login'], { queryParams: { returnUrl: state.url } });
+        }
+        else {
+            this.router.navigate(['/login']);
+        }
+        return false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AuthGuard, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AuthGuard, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AuthGuard, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class LoadingService {
+    static loadingStack = [];
+    loadingSubject = new BehaviorSubject(false);
+    update() {
+        const isLoading = LoadingService.loadingStack.length > 0;
+        this.loadingSubject.next(isLoading);
+    }
+    loadingUp() {
+        LoadingService.loadingStack.push(1);
+        this.update();
+    }
+    loadingDown() {
+        LoadingService.loadingStack.pop();
+        this.update();
+    }
+    /** Trả về observable loading có delay khi bật để tránh chớp nháy */
+    get loading$() {
+        return this.loadingSubject.asObservable().pipe(switchMap((loading) => {
+            return loading
+                ? of(true).pipe(delay(200)) // delay khi bật
+                : of(false); // tắt thì không delay
+        }), distinctUntilChanged());
+    }
+    /** Nếu chỉ cần giá trị hiện tại boolean (ít dùng hơn) */
+    get isLoading() {
+        return LoadingService.loadingStack.length > 0;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: LoadingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: LoadingService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: LoadingService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+let initialReturnUrl = null;
+function authInterceptor(req, next) {
+    const router = inject(Router);
+    const loadingService = inject(LoadingService);
+    const modalService = inject(NzModalService);
+    const notiService = inject(NotiService);
+    const translate = inject(TranslateService);
+    const authToken = TokenStorage.getToken();
+    loadingService.loadingUp();
+    if (!(req.body instanceof FormData)) {
+        const newBody = convertDatesInBody(req.body);
+        if (req.body !== newBody) {
+            req = req.clone({ body: newBody });
+        }
+    }
+    if (authToken) {
+        req = req.clone({
+            setHeaders: { Authorization: `Bearer ${authToken}` },
+        });
+    }
+    return next(req).pipe(catchError((error) => {
+        if (error.status === 401) {
+            modalService.closeAll();
+            notiService.error(translate.instant('EXPIRED_TOKEN'));
+            const currentUrl = router.routerState.snapshot.url;
+            if (!initialReturnUrl && !currentUrl.startsWith('/login')) {
+                initialReturnUrl = currentUrl;
+            }
+            router.navigate(['/login'], {
+                queryParams: { returnUrl: initialReturnUrl || '/' },
+            });
+            return EMPTY;
+        }
+        return throwError(() => error);
+    }), finalize(() => {
+        loadingService.loadingDown();
+    }));
+}
+function convertDatesInBody(obj) {
+    if (obj instanceof Date) {
+        return formatDate(obj);
+    }
+    if (Array.isArray(obj)) {
+        return obj.map(convertDatesInBody);
+    }
+    if (typeof obj === 'object' && obj !== null) {
+        const newObj = {};
+        for (const key of Object.keys(obj)) {
+            const value = obj[key];
+            if (value instanceof Date) {
+                newObj[key] = formatDate(value);
+            }
+            else if (typeof value === 'string' && isIsoDate(value)) {
+                newObj[key] = formatDate(new Date(value));
+            }
+            else if (typeof value === 'object') {
+                newObj[key] = convertDatesInBody(value);
+            }
+            else {
+                newObj[key] = value;
+            }
+        }
+        return newObj;
+    }
+    return obj;
+}
+function isIsoDate(str) {
+    // ISO string with optional time and timezone
+    return /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(\.\d+)?(Z|[\+\-]\d{2}:\d{2})?$/.test(str);
+}
+function formatDate(date) {
+    const pad = (n) => n.toString().padStart(2, '0');
+    return (`${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ` +
+        `${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`);
+}
+
+class UnsavedChangesGuard {
+    canDeactivate(component) {
+        return component.canDeactivate ? component.canDeactivate() : true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: UnsavedChangesGuard, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: UnsavedChangesGuard, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: UnsavedChangesGuard, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class CustomModalService {
+    modal;
+    constructor(modal) {
+        this.modal = modal;
+    }
+    create(options) {
+        const defaultOptions = {
+            nzMaskClosable: false,
+            nzCentered: true,
+            nzBodyStyle: {
+                'max-height': 'calc(100vh - 180px)',
+                overflow: 'auto',
+            },
+        };
+        const mergedOptions = {
+            ...defaultOptions,
+            ...options,
+            nzStyle: {
+                ...defaultOptions.nzStyle,
+                ...options.nzStyle,
+            },
+        };
+        return this.modal.create(mergedOptions);
+    }
+    confirm(options) {
+        return this.modal.confirm(options);
+    }
+    info(options) {
+        return this.modal.info(options);
+    }
+    success(options) {
+        return this.modal.success(options);
+    }
+    warning(options) {
+        return this.modal.warning(options);
+    }
+    error(options) {
+        return this.modal.error(options);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: CustomModalService, deps: [{ token: i1.NzModalService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: CustomModalService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: CustomModalService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: i1.NzModalService }] });
+
+class BaseComponent {
+    AppGlobals = AppGlobals;
+    TranslateKey = TranslateKey;
+    route = inject(ActivatedRoute);
+    router = inject(Router);
+    location = inject(Location);
+    notiService = inject(NotiService);
+    translate = inject(TranslateService);
+    modal = inject(CustomModalService);
+    routeSub;
+    onRouteChange(callback) {
+        this.routeSub = this.router.events
+            .pipe(filter((e) => e instanceof NavigationEnd))
+            .subscribe((e) => {
+            callback(e.urlAfterRedirects);
+        });
+    }
+    unSubRouteChange() {
+        this.routeSub?.unsubscribe();
+    }
+    goback() {
+        this.location.back();
+    }
+    goto(url) {
+        if (url) {
+            if (url.startsWith('/')) {
+                this.router.navigateByUrl(url);
+            }
+            else {
+                this.router.navigate([url], { relativeTo: this.route });
+            }
+        }
+    }
+    getUrlParam(paramName) {
+        const paramValue = this.route.snapshot.params[paramName];
+        // bằng 0 thì trả về null vì chuyển primary key từ bigint sang string, code cũ đang truyền vào 0
+        if (paramValue == '0' || paramValue == 'new' || paramValue == 'them-moi') {
+            return null;
+        }
+        return paramValue;
+    }
+    getUrlQueryParam(queryParamName) {
+        const queryParamValue = this.route.snapshot.queryParamMap.get(queryParamName);
+        return queryParamValue;
+    }
+    getUrlData(key) {
+        return this.route.snapshot.data[key];
+    }
+    getCurrentUrl() {
+        return this.router.url;
+    }
+    handleError(err) {
+        this.notiService.handleError(err);
+    }
+    touchControls(formData) {
+        Object.values(formData.controls).forEach((control) => {
+            if (control.invalid) {
+                control.markAsDirty();
+                control.updateValueAndValidity({ onlySelf: true });
+            }
+        });
+    }
+    logFormErrors(form, parentKey = '') {
+        Object.keys(form.controls).forEach((key) => {
+            const control = form.get(key);
+            const fieldPath = parentKey ? `${parentKey}.${key}` : key;
+            if (control instanceof FormGroup) {
+                this.logFormErrors(control, fieldPath);
+            }
+            else {
+                if (control?.errors) {
+                    console.log(`Control: ${fieldPath}`, control.errors);
+                }
+            }
+        });
+    }
+    confirm(title, content = '') {
+        return new Promise((resolve) => {
+            this.modal.confirm({
+                // nzCentered: true,
+                nzTitle: title,
+                nzContent: content,
+                nzOkText: this.translate.instant(this.TranslateKey.AGREE),
+                nzOkType: 'primary',
+                nzOkDanger: true,
+                nzClosable: false,
+                nzOnOk: () => resolve(true),
+                nzAutofocus: 'ok',
+                nzCancelText: this.translate.instant(this.TranslateKey.CANCEL),
+                nzOnCancel: () => resolve(false),
+            });
+        });
+    }
+    backToTop() {
+        // go to top
+        window.scrollTo({
+            top: 0,
+            behavior: 'smooth',
+        });
+        const content = document.querySelector('nz-content');
+        if (content) {
+            content.scrollTo({
+                top: 0,
+                behavior: 'smooth',
+            });
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: BaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: BaseComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: '', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: BaseComponent, decorators: [{
+            type: Component,
+            args: [{ template: '' }]
+        }] });
+
+class BaseGuardChangeComponent extends BaseComponent {
+    formData;
+    unloadNotification($event) {
+        if (this.formData?.dirty) {
+            $event.preventDefault();
+            $event.returnValue = true; // Chrome requires this line
+        }
+    }
+    async canDeactivate() {
+        if (this.formData?.dirty) {
+            return await this.confirm('Dữ liệu chưa được lưu. Bạn có chắc chắn muốn rời khỏi trang?');
+        }
+        return true;
+    }
+    clearChange() {
+        // bỏ dirty để không hỏi khi rời trang
+        this.formData?.markAsPristine();
+        this.formData?.markAsUntouched();
+        this.formData?.updateValueAndValidity();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: BaseGuardChangeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: BaseGuardChangeComponent, isStandalone: true, selector: "ng-component", host: { listeners: { "window:beforeunload": "unloadNotification($event)" } }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: BaseGuardChangeComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: '',
+                }]
+        }], propDecorators: { unloadNotification: [{
+                type: HostListener,
+                args: ['window:beforeunload', ['$event']]
+            }] } });
+
+class BaseOverlayComponent extends BaseComponent {
+    // custom dropdow
+    inputWidth = 0;
+    triggerSpan = 500;
+    overlayRef;
+    overlay = inject(Overlay);
+    vcr = inject(ViewContainerRef);
+    openOverlay(originEl, target, width = 0) {
+        const origin = originEl?.elementRef?.nativeElement ?? originEl?.nativeElement ?? originEl;
+        this.updateInputWidth(origin);
+        if (this.overlayRef) {
+            this.overlayRef.detach(); // Đóng nếu đã mở
+        }
+        width = width > origin.offsetWidth ? width : origin.offsetWidth; // 👈 Lấy chiều rộng của input
+        const positionStrategy = this.overlay
+            .position()
+            .flexibleConnectedTo(origin)
+            .withPositions([
+            {
+                originX: 'start',
+                originY: 'bottom',
+                overlayX: 'start',
+                overlayY: 'top',
+                offsetY: 5,
+            },
+            {
+                originX: 'start',
+                originY: 'top',
+                overlayX: 'start',
+                overlayY: 'bottom',
+                offsetY: -5,
+            },
+        ])
+            .withDefaultOffsetY(5);
+        this.overlayRef = this.overlay.create({
+            positionStrategy,
+            hasBackdrop: false,
+            backdropClass: 'cdk-overlay-transparent-backdrop',
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+            width, // 👈 Gán chiều rộng cho overlay
+        });
+        this.overlayRef.backdropClick().subscribe(() => {
+            this.overlayRef.detach();
+        });
+        const portal = new TemplatePortal(target, this.vcr);
+        this.overlayRef.attach(portal);
+        const overlayElement = this.overlayRef.overlayElement;
+        // hasBackdrop: false, thêm cái này để đóng khi click ra ngoài
+        fromEvent(document, 'click')
+            .pipe(filter$1((event) => {
+            const clickTarget = event.target;
+            return (this.overlayRef &&
+                !overlayElement.contains(clickTarget) && // click không nằm trong overlay
+                !origin.contains(clickTarget) && // và cũng không phải click vào input gốc
+                !clickTarget.closest('.ant-select-dropdown') &&
+                !clickTarget.closest('.ant-select-item') &&
+                !clickTarget.closest('.ant-select-item-option-content') &&
+                !clickTarget.closest('.no-close-custom-dropdow'));
+        }), takeUntil(this.overlayRef.detachments()))
+            .subscribe(() => {
+            this.overlayRef?.detach();
+        });
+    }
+    updateInputWidth(inputEl) {
+        this.inputWidth = inputEl?.offsetWidth || 0;
+    }
+}
+
+class Breadcrumb extends BaseComponent {
+    Breadcrumb = Breadcrumb;
+    static lstBreadcrumb = [];
+    static clear() {
+        Breadcrumb.lstBreadcrumb = [];
+    }
+    gohome() {
+        this.goto('');
+    }
+    onclick(item) {
+        if (item.URL) {
+            this.goto(item.URL);
+        }
+        else if (item.Click) {
+            item.Click();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: Breadcrumb, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: Breadcrumb, isStandalone: true, selector: "app-breadcrumb", usesInheritance: true, ngImport: i0, template: "<nz-breadcrumb>\n  <nz-breadcrumb-item (click)=\"gohome()\">\n    <nz-icon nzType=\"home\" nzTheme=\"outline\" />\n  </nz-breadcrumb-item>\n  @for (item of Breadcrumb.lstBreadcrumb; track $index) {\n    <nz-breadcrumb-item (click)=\"onclick(item)\">{{ item.Name }}</nz-breadcrumb-item>\n  }\n</nz-breadcrumb>\n", dependencies: [{ kind: "ngmodule", type: NzBreadCrumbModule }, { kind: "component", type: i1$1.NzBreadCrumbComponent, selector: "nz-breadcrumb", inputs: ["nzAutoGenerate", "nzSeparator", "nzRouteLabel", "nzRouteLabelFn", "nzRouteFn"], exportAs: ["nzBreadcrumb"] }, { kind: "component", type: i1$1.NzBreadCrumbItemComponent, selector: "nz-breadcrumb-item", inputs: ["nzOverlay"], exportAs: ["nzBreadcrumbItem"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: Breadcrumb, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-breadcrumb', imports: [NzBreadCrumbModule, NzIconModule], template: "<nz-breadcrumb>\n  <nz-breadcrumb-item (click)=\"gohome()\">\n    <nz-icon nzType=\"home\" nzTheme=\"outline\" />\n  </nz-breadcrumb-item>\n  @for (item of Breadcrumb.lstBreadcrumb; track $index) {\n    <nz-breadcrumb-item (click)=\"onclick(item)\">{{ item.Name }}</nz-breadcrumb-item>\n  }\n</nz-breadcrumb>\n" }]
+        }] });
+
+class AnimatedDigitComponent {
+    duration = 0;
+    digit = 0;
+    steps = 0;
+    animatedDigit;
+    currentValue = 0;
+    animateCount() {
+        if (!this.duration) {
+            this.duration = 1000;
+        }
+        if (typeof this.digit === 'number') {
+            this.counterFunc(this.currentValue, this.digit, this.duration, this.animatedDigit);
+        }
+    }
+    counterFunc(startValue, endValue, durationMs, element) {
+        if (!this.steps) {
+            this.steps = 12;
+        }
+        const stepCount = Math.abs(durationMs / this.steps);
+        const valueIncrement = (endValue - startValue) / stepCount;
+        const sinValueIncrement = Math.PI / stepCount;
+        let currentSinValue = 0;
+        function step() {
+            currentSinValue += sinValueIncrement;
+            startValue += valueIncrement * Math.sin(currentSinValue) ** 2 * 2;
+            if (element)
+                element.nativeElement.textContent = Math.abs(Math.floor(startValue));
+            if (currentSinValue < Math.PI) {
+                window.requestAnimationFrame(step);
+            }
+        }
+        step();
+    }
+    ngAfterViewInit() {
+        if (this.digit) {
+            this.animateCount();
+        }
+    }
+    ngOnChanges(changes) {
+        if (changes['digit']) {
+            this.animateCount();
+            setTimeout(() => {
+                this.currentValue = this.digit;
+            }, this.duration);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AnimatedDigitComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: AnimatedDigitComponent, isStandalone: true, selector: "animated-digit", inputs: { duration: "duration", digit: "digit", steps: "steps" }, viewQueries: [{ propertyName: "animatedDigit", first: true, predicate: ["animatedDigit"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<span #animatedDigit class=\"animated-digit\">\n  <span>{{digit}}</span>\n</span>", styles: [".animated-digit{display:inline-flex;padding:0}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AnimatedDigitComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'animated-digit', template: "<span #animatedDigit class=\"animated-digit\">\n  <span>{{digit}}</span>\n</span>", styles: [".animated-digit{display:inline-flex;padding:0}\n"] }]
+        }], propDecorators: { duration: [{
+                type: Input
+            }], digit: [{
+                type: Input
+            }], steps: [{
+                type: Input
+            }], animatedDigit: [{
+                type: ViewChild,
+                args: ['animatedDigit']
+            }] } });
+
+class BarGraphComponent {
+    height = 0;
+    id = '';
+    chart;
+    constructor() {
+        Chart.register(...registerables);
+    }
+    ngOnInit() {
+        setTimeout(() => {
+            this.createBarGraph();
+        }, 500);
+    }
+    ngOnDestroy() {
+        if (this.chart) {
+            this.chart.destroy();
+        }
+    }
+    createBarGraph() {
+        if (!this.id) {
+            return;
+        }
+        this.chart = new Chart(this.id, {
+            type: 'bar',
+            data: {
+                labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'],
+                datasets: [
+                    {
+                        backgroundColor: 'rgba(92, 107, 192, .7)',
+                        borderColor: 'rgba(92, 107, 192, .7)',
+                        data: [70, 88, 77, 93, 82, 100, 70, 67, 78, 99],
+                        label: 'Dataset',
+                    },
+                    {
+                        backgroundColor: 'rgba(66, 165, 245, .7)',
+                        borderColor: 'rgba(69, 39, 160, .7)',
+                        data: [80, 88, 67, 95, 76, 60, 67, 95, 95, 66],
+                        label: 'Dataset',
+                    },
+                    {
+                        backgroundColor: 'rgba(38, 166, 154, .7)',
+                        borderColor: 'rgba(69, 39, 160, .7)',
+                        data: [60, 88, 70, 67, 27, 83, 78, 88, 95, 60],
+                        label: 'Dataset',
+                    },
+                    {
+                        backgroundColor: 'rgba(102, 187, 106, .7)',
+                        borderColor: 'rgba(255, 99, 132)',
+                        data: [75, 55, 55, 95, 66, 88, 70, 78, 77, 100],
+                        label: 'Dataset',
+                    },
+                ],
+            },
+            options: {
+                elements: {
+                    line: {
+                        tension: 0.000001,
+                    },
+                },
+                maintainAspectRatio: false,
+                plugins: {
+                    filler: {
+                        propagate: false,
+                    },
+                },
+            },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: BarGraphComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: BarGraphComponent, isStandalone: true, selector: "cdk-bar-graph", inputs: { height: "height", id: "id" }, ngImport: i0, template: "<div class=\"dash-bar-graph-holder mat-elevation-z4\" [ngStyle]=\"{ height: height + 'px' }\">\n  <canvas [id]=\"id\"></canvas>\n</div>\n", styles: [".dash-bar-graph-holder{margin:10px 5px;background-color:#fff}.nav-item{transition:all .6s cubic-bezier(.165,.84,.44,1);cursor:default}.nav-item:hover{transform:translateY(-8px);box-shadow:0 20px 20px #00000029}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: BarGraphComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cdk-bar-graph', imports: [CommonModule], template: "<div class=\"dash-bar-graph-holder mat-elevation-z4\" [ngStyle]=\"{ height: height + 'px' }\">\n  <canvas [id]=\"id\"></canvas>\n</div>\n", styles: [".dash-bar-graph-holder{margin:10px 5px;background-color:#fff}.nav-item{transition:all .6s cubic-bezier(.165,.84,.44,1);cursor:default}.nav-item:hover{transform:translateY(-8px);box-shadow:0 20px 20px #00000029}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { height: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }] } });
+
+class DashcardComponent {
+    dashData;
+    constructor() { }
+    ngOnInit() { }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: DashcardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: DashcardComponent, isStandalone: true, selector: "cdk-dashcard", inputs: { dashData: "dashData" }, ngImport: i0, template: "<div nz-row class=\"dashcard mat-elevation-z2\" style=\"height: 100%\">\n  <div nz-col [nzSpan]=\"8\" class=\"text-center\" [style.background]=\"dashData?.colorLight\">\n    <nz-icon class=\"mat-icon\" style=\"padding-top: 50px\" [nzType]=\"dashData?.icon\" nzTheme=\"outline\" />\n  </div>\n  <div nz-col [nzSpan]=\"16\" [style.background]=\"dashData?.colorDark\">\n    <div class=\"text-center animated-digit\">\n      <animated-digit [digit]=\"dashData?.number\"></animated-digit>\n    </div>\n    <p\n      class=\"text-center mat-body-1 border-top text-bold\"\n      style=\"font-size: 16px; margin-bottom: 8px; padding-top: 3px\"\n    >\n      {{ dashData?.title }}\n    </p>\n  </div>\n</div>\n", styles: [".dashcard .dashcard{margin:10px 5px;height:100px;background-color:#fff}.dashcard .mat-icon{font-size:40px;height:40px;width:40px;color:#fff}.dashcard .border-top{border-top:1px solid white}.dashcard .mat-headline,.dashcard .mat-body-1{margin:0;color:#fff}.dashcard .animated-digit{color:#fff;font-size:40px;font-weight:700}.nav-item{transition:all .6s cubic-bezier(.165,.84,.44,1);cursor:default}.nav-item:hover{transform:translateY(-8px);box-shadow:0 20px 20px #00000029}\n"], dependencies: [{ kind: "ngmodule", type: NzGridModule }, { kind: "directive", type: i4.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i4.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "component", type: AnimatedDigitComponent, selector: "animated-digit", inputs: ["duration", "digit", "steps"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: DashcardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cdk-dashcard', imports: [NzGridModule, NzIconModule, AnimatedDigitComponent], template: "<div nz-row class=\"dashcard mat-elevation-z2\" style=\"height: 100%\">\n  <div nz-col [nzSpan]=\"8\" class=\"text-center\" [style.background]=\"dashData?.colorLight\">\n    <nz-icon class=\"mat-icon\" style=\"padding-top: 50px\" [nzType]=\"dashData?.icon\" nzTheme=\"outline\" />\n  </div>\n  <div nz-col [nzSpan]=\"16\" [style.background]=\"dashData?.colorDark\">\n    <div class=\"text-center animated-digit\">\n      <animated-digit [digit]=\"dashData?.number\"></animated-digit>\n    </div>\n    <p\n      class=\"text-center mat-body-1 border-top text-bold\"\n      style=\"font-size: 16px; margin-bottom: 8px; padding-top: 3px\"\n    >\n      {{ dashData?.title }}\n    </p>\n  </div>\n</div>\n", styles: [".dashcard .dashcard{margin:10px 5px;height:100px;background-color:#fff}.dashcard .mat-icon{font-size:40px;height:40px;width:40px;color:#fff}.dashcard .border-top{border-top:1px solid white}.dashcard .mat-headline,.dashcard .mat-body-1{margin:0;color:#fff}.dashcard .animated-digit{color:#fff;font-size:40px;font-weight:700}.nav-item{transition:all .6s cubic-bezier(.165,.84,.44,1);cursor:default}.nav-item:hover{transform:translateY(-8px);box-shadow:0 20px 20px #00000029}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { dashData: [{
+                type: Input
+            }] } });
+
+class DoughnutGraphComponent {
+    height = 0;
+    id = '';
+    chart;
+    constructor() {
+        Chart.register(...registerables);
+    }
+    ngOnInit() {
+        setTimeout(() => {
+            this.createDoughnutGraph();
+        }, 500);
+    }
+    ngOnDestroy() {
+        if (this.chart) {
+            this.chart.destroy();
+        }
+    }
+    randomNumber(min = 0, max = 0) {
+        if (min == 0 || max == 0)
+            return Math.round(Math.random() * 100);
+        else
+            return Math.random() * (max - min) + min;
+    }
+    createDoughnutGraph() {
+        if (!this.id) {
+            return;
+        }
+        this.chart = new Chart(this.id, {
+            type: 'doughnut',
+            data: {
+                labels: ['Data '],
+                datasets: [
+                    {
+                        data: [this.randomNumber(), this.randomNumber(), this.randomNumber(), this.randomNumber()],
+                        backgroundColor: [
+                            'rgba(255, 99, 132,.7)',
+                            'rgba(92, 107, 192,.7)',
+                            'rgba(66, 165, 245,.7)',
+                            'rgba(38, 166, 154,.7)',
+                            'rgba(102, 187, 106,.7)',
+                        ],
+                    },
+                ],
+            },
+            options: {
+                elements: {
+                    line: {
+                        tension: 0.000001,
+                    },
+                },
+                maintainAspectRatio: false,
+                responsive: true,
+                plugins: {
+                    filler: {
+                        propagate: false,
+                    },
+                },
+            },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: DoughnutGraphComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: DoughnutGraphComponent, isStandalone: true, selector: "cdk-doughnut-graph", inputs: { height: "height", id: "id" }, ngImport: i0, template: "<div  class=\"doughnut-graph-graph-holder mat-elevation-z4  \" [ngStyle]=\"{'height': height + 'px'}\">\n    <canvas [id]=\"id\"></canvas>\n</div>", styles: [".doughnut-graph-graph-holder{margin:10px 5px;background-color:#fff}.nav-item{transition:all .6s cubic-bezier(.165,.84,.44,1);cursor:default}.nav-item:hover{transform:translateY(-8px);box-shadow:0 20px 20px #00000029}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: DoughnutGraphComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cdk-doughnut-graph', imports: [CommonModule], template: "<div  class=\"doughnut-graph-graph-holder mat-elevation-z4  \" [ngStyle]=\"{'height': height + 'px'}\">\n    <canvas [id]=\"id\"></canvas>\n</div>", styles: [".doughnut-graph-graph-holder{margin:10px 5px;background-color:#fff}.nav-item{transition:all .6s cubic-bezier(.165,.84,.44,1);cursor:default}.nav-item:hover{transform:translateY(-8px);box-shadow:0 20px 20px #00000029}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { height: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }] } });
+
+class LineGraphComponent {
+    height = 0;
+    id = '';
+    chart;
+    constructor() {
+        Chart.register(...registerables);
+    }
+    ngOnInit() {
+        setTimeout(() => {
+            this.createLineChart();
+        }, 500);
+    }
+    ngOnDestroy() {
+        if (this.chart) {
+            this.chart.destroy();
+        }
+    }
+    createLineChart() {
+        if (!this.id) {
+            return;
+        }
+        this.chart = new Chart(this.id, {
+            type: 'line',
+            data: {
+                labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
+                datasets: [
+                    {
+                        backgroundColor: 'rgba(92, 107, 192, 0.36)',
+                        borderColor: 'rgba(92, 107, 192,.5)',
+                        data: [76.97, 88.91, 99.31, 122.19, 130.85, 140.91, 150.36, 142.66, 150.36, 142.66],
+                        label: 'Dataset',
+                        fill: 'start',
+                    },
+                ],
+            },
+            options: {
+                elements: {
+                    line: {
+                        tension: 0.000001,
+                    },
+                },
+                maintainAspectRatio: false,
+                plugins: {
+                    filler: {
+                        propagate: false,
+                    },
+                },
+            },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: LineGraphComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: LineGraphComponent, isStandalone: true, selector: "cdk-line-graph", inputs: { height: "height", id: "id" }, ngImport: i0, template: "<div  class=\"line-graph-holder mat-elevation-z4 \" [ngStyle]=\"{'height': height + 'px'}\">\n    <canvas [id]=\"id\"></canvas>\n</div>", styles: [".line-graph-holder{margin:10px 5px;background-color:#fff}.nav-item{transition:all .6s cubic-bezier(.165,.84,.44,1);cursor:default}.nav-item:hover{transform:translateY(-8px);box-shadow:0 20px 20px #00000029}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: LineGraphComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cdk-line-graph', imports: [CommonModule], template: "<div  class=\"line-graph-holder mat-elevation-z4 \" [ngStyle]=\"{'height': height + 'px'}\">\n    <canvas [id]=\"id\"></canvas>\n</div>", styles: [".line-graph-holder{margin:10px 5px;background-color:#fff}.nav-item{transition:all .6s cubic-bezier(.165,.84,.44,1);cursor:default}.nav-item:hover{transform:translateY(-8px);box-shadow:0 20px 20px #00000029}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { height: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }] } });
+
+class ExtendCheckbox {
+    label = '';
+    labelSpan = 8;
+    disabled = false;
+    formData;
+    controlName;
+    /**
+     * default: boolean
+     */
+    valueType = 'boolean';
+    get _ngModel() {
+        if (this.valueType == 'boolean') {
+            return this.checked;
+        }
+        if (this.valueType == 'number') {
+            return this.checked ? 1 : 0;
+        }
+        if (this.valueType == 'string') {
+            return this.checked ? 'Y' : 'N';
+        }
+    }
+    set _ngModel(val) {
+        if (this.controlName) {
+            if (this.valueType == 'boolean') {
+                this.formData.controls[this.controlName].valueChanges.subscribe((x) => {
+                    this.checked = x;
+                });
+            }
+            else if (this.valueType == 'number') {
+                this.formData.controls[this.controlName].valueChanges.subscribe((x) => {
+                    this.checked = x == 1;
+                });
+            }
+            else {
+                this.formData.controls[this.controlName].valueChanges.subscribe((x) => {
+                    this.checked = x == 'Y';
+                });
+            }
+        }
+        else {
+            this.checked = val ? true : false;
+        }
+    }
+    _ngModelChange = new EventEmitter();
+    checked = false;
+    ngOnInit() {
+        if (this.controlName && this.formData?.controls[this.controlName]) {
+            if (this.valueType === 'boolean') {
+                this.checked = this.formData.controls[this.controlName].getRawValue();
+                console.log(this.checked);
+            }
+            else if (this.valueType === 'number') {
+                this.checked = this.formData.controls[this.controlName].getRawValue() === 1;
+            }
+            else {
+                this.checked = this.formData.controls[this.controlName].getRawValue() === 'Y';
+            }
+            this.formData.controls[this.controlName].valueChanges.subscribe((x) => {
+                if (this.valueType === 'boolean') {
+                    this.checked = x;
+                }
+                else if (this.valueType === 'number') {
+                    this.checked = x === 1;
+                }
+                else {
+                    this.checked = x === 'Y';
+                }
+            });
+        }
+    }
+    onCheckChange(event) {
+        if (this.controlName) {
+            if (this.valueType == 'boolean') {
+                this.formData.controls[this.controlName].setValue(event);
+            }
+            else if (this.valueType == 'number') {
+                this.formData.controls[this.controlName].setValue(event ? 1 : 0);
+            }
+            else if (this.valueType == 'string') {
+                this.formData.controls[this.controlName].setValue(event ? 'Y' : 'N');
+            }
+        }
+        else {
+            if (this.valueType == 'boolean') {
+                this._ngModelChange.emit(event);
+            }
+            else if (this.valueType == 'number') {
+                this._ngModelChange.emit(event ? 1 : 0);
+            }
+            else if (this.valueType == 'string') {
+                this._ngModelChange.emit(event ? 'Y' : 'N');
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ExtendCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: ExtendCheckbox, isStandalone: true, selector: "extend-checkbox", inputs: { label: "label", labelSpan: "labelSpan", disabled: "disabled", formData: "formData", controlName: "controlName", valueType: "valueType", _ngModel: "_ngModel" }, outputs: { _ngModelChange: "_ngModelChange" }, ngImport: i0, template: "@if (label) {\n  <div nz-row>\n    <div nz-col [nzSpan]=\"labelSpan\"></div>\n    <div nz-col nzFlex=\"auto\">\n      <label\n        style=\"position: relative; top: 5px\"\n        nz-checkbox\n        [nzDisabled]=\"disabled\"\n        [(nzChecked)]=\"checked\"\n        (nzCheckedChange)=\"onCheckChange($event)\"\n      >\n        {{ label }}\n      </label>\n    </div>\n  </div>\n} @else {\n  <label\n    nz-checkbox\n    [nzDisabled]=\"disabled\"\n    [(nzChecked)]=\"checked\"\n    (nzCheckedChange)=\"onCheckChange($event)\"\n    style=\"width: 16px\"\n  >\n    {{ label }}\n  </label>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: NzFormModule }, { kind: "directive", type: i4.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i4.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "ngmodule", type: NzCheckboxModule }, { kind: "component", type: i2$1.NzCheckboxComponent, selector: "[nz-checkbox]", inputs: ["nzValue", "nzAutoFocus", "nzDisabled", "nzIndeterminate", "nzChecked", "nzId", "nzName"], outputs: ["nzCheckedChange"], exportAs: ["nzCheckbox"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ExtendCheckbox, decorators: [{
+            type: Component,
+            args: [{ selector: 'extend-checkbox', imports: [CommonModule, FormsModule, ReactiveFormsModule, NzFormModule, NzCheckboxModule], template: "@if (label) {\n  <div nz-row>\n    <div nz-col [nzSpan]=\"labelSpan\"></div>\n    <div nz-col nzFlex=\"auto\">\n      <label\n        style=\"position: relative; top: 5px\"\n        nz-checkbox\n        [nzDisabled]=\"disabled\"\n        [(nzChecked)]=\"checked\"\n        (nzCheckedChange)=\"onCheckChange($event)\"\n      >\n        {{ label }}\n      </label>\n    </div>\n  </div>\n} @else {\n  <label\n    nz-checkbox\n    [nzDisabled]=\"disabled\"\n    [(nzChecked)]=\"checked\"\n    (nzCheckedChange)=\"onCheckChange($event)\"\n    style=\"width: 16px\"\n  >\n    {{ label }}\n  </label>\n}\n" }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], labelSpan: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], formData: [{
+                type: Input
+            }], controlName: [{
+                type: Input
+            }], valueType: [{
+                type: Input
+            }], _ngModel: [{
+                type: Input
+            }], _ngModelChange: [{
+                type: Output
+            }] } });
+
+class DateTimeHelper {
+    static lstDay = Array.from({ length: 31 }, (_, i) => i + 1);
+    static lstMonth = Array.from({ length: 12 }, (_, i) => i + 1);
+    static fromYear = new Date().getFullYear() - 10;
+    static toYear = new Date().getFullYear();
+    static lstYear = Array.from({ length: DateTimeHelper.toYear - DateTimeHelper.fromYear }, (_, i) => DateTimeHelper.toYear - i);
+    /**
+     * Lấy ngày giờ hiện tại dưới dạng chuỗi "YYYY-MM-DD HH:mm:ss"
+     * @return {string}
+     */
+    static now() {
+        const now = new Date();
+        return `${now.getFullYear()}-${this.pad(now.getMonth() + 1)}-${this.pad(now.getDate())} ${this.pad(now.getHours())}:${this.pad(now.getMinutes())}:${this.pad(now.getSeconds())}`;
+    }
+    /**
+     * Lấy ngày hôm nay dưới dạng chuỗi "YYYY-MM-DD HH:mm:ss"
+     * @return {string}
+     */
+    static today() {
+        const now = new Date();
+        return `${now.getFullYear()}-${this.pad(now.getMonth() + 1)}-${this.pad(now.getDate())} 00:00:00`;
+    }
+    /**
+     * Tạo ngày từ năm, tháng, ngày (có kiểm tra hợp lệ, không bị lệch múi giờ).
+     * @param {number} year Năm
+     * @param {number} month Tháng (1-12)
+     * @param {number} day Ngày (1-31)
+     * @param {boolean} isEndOfDay Nếu true, trả về 23:59:59, ngược lại 00:00:00
+     * @return {string | null} Chuỗi ngày định dạng "YYYY-MM-DD HH:mm:ss" hoặc null nếu ngày không hợp lệ
+     */
+    static createDate(year, month, day, isEndOfDay = false) {
+        if (!this.isValidDate(year, month, day)) {
+            return null;
+        }
+        const hour = isEndOfDay ? 23 : 0;
+        const minute = isEndOfDay ? 59 : 0;
+        const second = isEndOfDay ? 59 : 0;
+        return `${year}-${this.pad(month)}-${this.pad(day)} ${this.pad(hour)}:${this.pad(minute)}:${this.pad(second)}`;
+    }
+    /**
+     * Kiểm tra xem ngày có hợp lệ không.
+     * @param {number} year Năm
+     * @param {number} month Tháng (1-12)
+     * @param {number} day Ngày (1-31)
+     * @return {boolean} True nếu ngày hợp lệ, ngược lại False.
+     */
+    static isValidDate(year, month, day) {
+        if (month < 1 || month > 12)
+            return false;
+        if (day < 1)
+            return false;
+        const lastDay = new Date(year, month, 0).getDate(); // Lấy ngày cuối tháng
+        return day <= lastDay;
+    }
+    /**
+     * Hàm hỗ trợ: Định dạng số thành 2 chữ số (01, 02, ..., 09)
+     * @param {number} n The second number.
+     * @return {string} The sum of the two numbers.
+     */
+    static pad(n) {
+        return n.toString().padStart(2, '0');
+    }
+    static parser(dateStr) {
+        if (!dateStr.includes('/')) {
+            dateStr = this.formatNumberToDate(dateStr);
+        }
+        const parts = dateStr.split('/');
+        const current = new Date();
+        let normalizedValue = '';
+        if (parts.length === 1 && /^\d{1,2}$/.test(parts[0])) {
+            // Chỉ có ngày -> ghép tháng/năm hiện tại
+            normalizedValue = `${parts[0].padStart(2, '0')}/${(current.getMonth() + 1).toString().padStart(2, '0')}/${current.getFullYear()}`;
+        }
+        else if (parts.length === 2 && /^\d{1,2}$/.test(parts[0]) && /^\d{1,2}$/.test(parts[1])) {
+            // Có ngày + tháng -> ghép năm hiện tại
+            normalizedValue = `${parts[0].padStart(2, '0')}/${parts[1].padStart(2, '0')}/${current.getFullYear()}`;
+        }
+        else {
+            // Đã đủ 3 phần
+            normalizedValue = dateStr;
+        }
+        if (normalizedValue) {
+            const parts = normalizedValue.split('/');
+            const day = +parts[0];
+            const month = +parts[1];
+            const year = +parts[2];
+            if (DateTimeHelper.isValidDate(year, month, day)) {
+                return DateTimeHelper.createDate(year, month, day);
+            }
+        }
+        return '';
+    }
+    static formatNumberToDate(input) {
+        // Lấy tối đa 8 ký tự
+        input = input.replace(/\D/g, '').substring(0, 8);
+        const day = input.substring(0, 2);
+        const month = input.substring(2, 4);
+        const year = input.substring(4, 8);
+        let result = '';
+        if (day) {
+            result += day;
+            if (month)
+                result += '/';
+        }
+        if (month) {
+            result += month;
+            if (year)
+                result += '/';
+        }
+        if (year) {
+            result += year;
+        }
+        return result;
+    }
+}
+
+/**
+ * Dùng cho nz-date-picker
+ */
+class DateInputParserDirective {
+    el;
+    ngControl;
+    format = 'dd/MM/yyyy';
+    inputElement = null;
+    blurHandler = this.tryParseAndSet.bind(this);
+    constructor(el, ngControl) {
+        this.el = el;
+        this.ngControl = ngControl;
+    }
+    ngAfterViewInit() {
+        // Tìm thẻ input bên trong nz-date-picker
+        this.inputElement = this.el.nativeElement.querySelector('input');
+        // Gắn listener blur vào input
+        if (this.inputElement) {
+            this.inputElement.addEventListener('blur', this.blurHandler);
+        }
+    }
+    ngOnDestroy() {
+        // Cleanup blur listener để tránh memory leak
+        if (this.inputElement) {
+            this.inputElement.removeEventListener('blur', this.blurHandler);
+        }
+    }
+    onEnter() {
+        this.tryParseAndSet();
+        this.inputElement?.blur(); // Blur sau khi enter nếu muốn trigger binding ngoài
+    }
+    tryParseAndSet() {
+        if (!this.inputElement)
+            return;
+        const rawValue = this.inputElement.value.trim();
+        const parsed = DateTimeHelper.parser(rawValue);
+        if (parsed) {
+            this.ngControl?.control?.setValue(parsed);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: DateInputParserDirective, deps: [{ token: i0.ElementRef }, { token: i2$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.7", type: DateInputParserDirective, isStandalone: true, selector: "nz-date-picker", inputs: { format: "format" }, host: { listeners: { "keyup.enter": "onEnter()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: DateInputParserDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'nz-date-picker',
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i2$2.NgControl, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }] }], propDecorators: { format: [{
+                type: Input,
+                args: ['format']
+            }], onEnter: [{
+                type: HostListener,
+                args: ['keyup.enter']
+            }] } });
+
+class ExtendDatePicker {
+    dateFormat = 'dd/MM/yyyy';
+    layOutType = 'horizontal';
+    label = '';
+    placeHolder = '';
+    labelAlign = 'left';
+    labelSpan = 8;
+    inputSpan = 16;
+    disabled = false;
+    required = false;
+    noBottom = false;
+    selectModeType = 'default';
+    inputWidth = '';
+    inputHeight = '';
+    borderBottomOnly = false;
+    displayInline = false;
+    size = 'default';
+    lstItem = [];
+    displayField = '';
+    valueField = '';
+    formData;
+    controlName;
+    _ngModel = null;
+    _ngModelChange = new EventEmitter();
+    onChange = (_) => { };
+    onTouched = () => { };
+    writeValue(obj) {
+        this._ngModel = obj;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    ngOnInit() { }
+    onNgModelChange(val) {
+        this._ngModel = val;
+        this.onChange(val); // Gửi ngược ra form
+        this.onTouched();
+        this._ngModelChange.emit(val);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ExtendDatePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: ExtendDatePicker, isStandalone: true, selector: "extend-date-picker", inputs: { dateFormat: "dateFormat", layOutType: "layOutType", label: "label", placeHolder: "placeHolder", labelAlign: "labelAlign", labelSpan: "labelSpan", inputSpan: "inputSpan", disabled: "disabled", required: "required", noBottom: "noBottom", selectModeType: "selectModeType", inputWidth: "inputWidth", inputHeight: "inputHeight", borderBottomOnly: "borderBottomOnly", displayInline: "displayInline", size: "size", lstItem: "lstItem", displayField: "displayField", valueField: "valueField", formData: "formData", controlName: "controlName", _ngModel: "_ngModel" }, outputs: { _ngModelChange: "_ngModelChange" }, ngImport: i0, template: "<div class=\"extend-wrapper\" [ngStyle]=\"{ display: displayInline ? 'inline' : null }\">\n  @if (controlName) {\n    <div [formGroup]=\"formData\">\n      <nz-form-item>\n        <nz-form-label\n          [nzSpan]=\"layOutType == 'horizontal' ? labelSpan : null\"\n          [nzLabelAlign]=\"labelAlign\"\n          [nzRequired]=\"required\"\n          [nzFor]=\"controlName\"\n          nzNoColon\n          nzLabelWrap\n        >\n          {{ label }}\n        </nz-form-label>\n        <nz-form-control\n          [nzSpan]=\"layOutType == 'horizontal' ? inputSpan : null\"\n          [ngClass]=\"{ 'full-width': layOutType == 'vertical' }\"\n          [nzErrorTip]=\"'REQUIRED_FIELD' | translate\"\n        >\n          <nz-date-picker\n            class=\"full-width\"\n            [nzPlaceHolder]=\"placeHolder || ' '\"\n            [nzFormat]=\"dateFormat\"\n            [formControlName]=\"controlName\"\n            [ngStyle]=\"{\n              width: inputWidth,\n              height: inputHeight,\n            }\"\n            [ngClass]=\"{\n              'border-bottom-only': borderBottomOnly,\n            }\"\n          ></nz-date-picker>\n        </nz-form-control>\n      </nz-form-item>\n    </div>\n  } @else {\n    @if (label) {\n      <nz-form-item>\n        <nz-form-label\n          [nzSpan]=\"layOutType == 'horizontal' ? labelSpan : null\"\n          [nzLabelAlign]=\"labelAlign\"\n          [nzRequired]=\"required\"\n          [nzFor]=\"controlName\"\n          nzNoColon\n          nzLabelWrap\n        >\n          {{ label }}\n        </nz-form-label>\n        <nz-form-control\n          [nzSpan]=\"layOutType == 'horizontal' ? inputSpan : null\"\n          [ngClass]=\"{ 'full-width': layOutType == 'vertical' }\"\n          [nzErrorTip]=\"'REQUIRED_FIELD' | translate\"\n        >\n          <nz-date-picker\n            class=\"full-width\"\n            [nzPlaceHolder]=\"placeHolder || ' '\"\n            [nzFormat]=\"dateFormat\"\n            [disabled]=\"disabled\"\n            [ngStyle]=\"{\n              width: inputWidth,\n              height: inputHeight,\n            }\"\n            [ngClass]=\"{\n              'border-bottom-only': borderBottomOnly,\n            }\"\n            [(ngModel)]=\"_ngModel\"\n            (ngModelChange)=\"onNgModelChange($event)\"\n          ></nz-date-picker>\n        </nz-form-control>\n      </nz-form-item>\n    } @else {\n      <nz-date-picker\n        class=\"full-width\"\n        [ngStyle]=\"{\n          width: inputWidth,\n          height: inputHeight,\n        }\"\n        [ngClass]=\"{\n          'border-bottom-only': borderBottomOnly,\n        }\"\n        [nzPlaceHolder]=\"placeHolder || ' '\"\n        [nzFormat]=\"dateFormat\"\n        [disabled]=\"disabled\"\n        [(ngModel)]=\"_ngModel\"\n        (ngModelChange)=\"onNgModelChange($event)\"\n      ></nz-date-picker>\n    }\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: NzFormModule }, { kind: "directive", type: i4.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i4.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "component", type: i5.NzFormItemComponent, selector: "nz-form-item", exportAs: ["nzFormItem"] }, { kind: "component", type: i5.NzFormLabelComponent, selector: "nz-form-label", inputs: ["nzFor", "nzRequired", "nzNoColon", "nzTooltipTitle", "nzTooltipIcon", "nzLabelAlign", "nzLabelWrap"], exportAs: ["nzFormLabel"] }, { kind: "component", type: i5.NzFormControlComponent, selector: "nz-form-control", inputs: ["nzSuccessTip", "nzWarningTip", "nzErrorTip", "nzValidatingTip", "nzExtra", "nzAutoTips", "nzDisableAutoTips", "nzHasFeedback", "nzValidateStatus"], exportAs: ["nzFormControl"] }, { kind: "ngmodule", type: NzDatePickerModule }, { kind: "component", type: i5$1.NzDatePickerComponent, selector: "nz-date-picker,nz-week-picker,nz-month-picker,nz-quarter-picker,nz-year-picker,nz-range-picker", inputs: ["nzAllowClear", "nzAutoFocus", "nzDisabled", "nzBorderless", "nzInputReadOnly", "nzInline", "nzOpen", "nzDisabledDate", "nzLocale", "nzPlaceHolder", "nzPopupStyle", "nzDropdownClassName", "nzSize", "nzStatus", "nzFormat", "nzDateRender", "nzDisabledTime", "nzRenderExtraFooter", "nzShowToday", "nzMode", "nzShowNow", "nzRanges", "nzDefaultPickerValue", "nzSeparator", "nzSuffixIcon", "nzBackdrop", "nzId", "nzPlacement", "nzShowWeekNumber", "nzShowTime"], outputs: ["nzOnPanelChange", "nzOnCalendarChange", "nzOnOk", "nzOnOpenChange"], exportAs: ["nzDatePicker"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "directive", type: DateInputParserDirective, selector: "nz-date-picker", inputs: ["format"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ExtendDatePicker, decorators: [{
+            type: Component,
+            args: [{ selector: 'extend-date-picker', imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        NzFormModule,
+                        NzDatePickerModule,
+                        TranslateModule,
+                        DateInputParserDirective,
+                    ], template: "<div class=\"extend-wrapper\" [ngStyle]=\"{ display: displayInline ? 'inline' : null }\">\n  @if (controlName) {\n    <div [formGroup]=\"formData\">\n      <nz-form-item>\n        <nz-form-label\n          [nzSpan]=\"layOutType == 'horizontal' ? labelSpan : null\"\n          [nzLabelAlign]=\"labelAlign\"\n          [nzRequired]=\"required\"\n          [nzFor]=\"controlName\"\n          nzNoColon\n          nzLabelWrap\n        >\n          {{ label }}\n        </nz-form-label>\n        <nz-form-control\n          [nzSpan]=\"layOutType == 'horizontal' ? inputSpan : null\"\n          [ngClass]=\"{ 'full-width': layOutType == 'vertical' }\"\n          [nzErrorTip]=\"'REQUIRED_FIELD' | translate\"\n        >\n          <nz-date-picker\n            class=\"full-width\"\n            [nzPlaceHolder]=\"placeHolder || ' '\"\n            [nzFormat]=\"dateFormat\"\n            [formControlName]=\"controlName\"\n            [ngStyle]=\"{\n              width: inputWidth,\n              height: inputHeight,\n            }\"\n            [ngClass]=\"{\n              'border-bottom-only': borderBottomOnly,\n            }\"\n          ></nz-date-picker>\n        </nz-form-control>\n      </nz-form-item>\n    </div>\n  } @else {\n    @if (label) {\n      <nz-form-item>\n        <nz-form-label\n          [nzSpan]=\"layOutType == 'horizontal' ? labelSpan : null\"\n          [nzLabelAlign]=\"labelAlign\"\n          [nzRequired]=\"required\"\n          [nzFor]=\"controlName\"\n          nzNoColon\n          nzLabelWrap\n        >\n          {{ label }}\n        </nz-form-label>\n        <nz-form-control\n          [nzSpan]=\"layOutType == 'horizontal' ? inputSpan : null\"\n          [ngClass]=\"{ 'full-width': layOutType == 'vertical' }\"\n          [nzErrorTip]=\"'REQUIRED_FIELD' | translate\"\n        >\n          <nz-date-picker\n            class=\"full-width\"\n            [nzPlaceHolder]=\"placeHolder || ' '\"\n            [nzFormat]=\"dateFormat\"\n            [disabled]=\"disabled\"\n            [ngStyle]=\"{\n              width: inputWidth,\n              height: inputHeight,\n            }\"\n            [ngClass]=\"{\n              'border-bottom-only': borderBottomOnly,\n            }\"\n            [(ngModel)]=\"_ngModel\"\n            (ngModelChange)=\"onNgModelChange($event)\"\n          ></nz-date-picker>\n        </nz-form-control>\n      </nz-form-item>\n    } @else {\n      <nz-date-picker\n        class=\"full-width\"\n        [ngStyle]=\"{\n          width: inputWidth,\n          height: inputHeight,\n        }\"\n        [ngClass]=\"{\n          'border-bottom-only': borderBottomOnly,\n        }\"\n        [nzPlaceHolder]=\"placeHolder || ' '\"\n        [nzFormat]=\"dateFormat\"\n        [disabled]=\"disabled\"\n        [(ngModel)]=\"_ngModel\"\n        (ngModelChange)=\"onNgModelChange($event)\"\n      ></nz-date-picker>\n    }\n  }\n</div>\n" }]
+        }], propDecorators: { dateFormat: [{
+                type: Input
+            }], layOutType: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], placeHolder: [{
+                type: Input
+            }], labelAlign: [{
+                type: Input
+            }], labelSpan: [{
+                type: Input
+            }], inputSpan: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], noBottom: [{
+                type: Input
+            }], selectModeType: [{
+                type: Input
+            }], inputWidth: [{
+                type: Input
+            }], inputHeight: [{
+                type: Input
+            }], borderBottomOnly: [{
+                type: Input
+            }], displayInline: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], lstItem: [{
+                type: Input
+            }], displayField: [{
+                type: Input
+            }], valueField: [{
+                type: Input
+            }], formData: [{
+                type: Input
+            }], controlName: [{
+                type: Input
+            }], _ngModel: [{
+                type: Input
+            }], _ngModelChange: [{
+                type: Output
+            }] } });
+
+class ExtendInputNumber {
+    layOutType = 'horizontal'; // horizontal: ngang, vertical dọc
+    label = '';
+    placeHolder = '';
+    labelAlign = 'left';
+    labelSpan = 8;
+    disabled = false;
+    required = false;
+    noBottom = false;
+    size = 'default';
+    min = null;
+    max = null;
+    precision = 0;
+    inputWidth = '';
+    inputHeight = '';
+    borderBottomOnly = false;
+    displayInline = false;
+    /** separatorType: 'comma' (,) | 'dot' (.) */
+    separatorType;
+    /** defaultSeparatorType: 'comma' (,) | 'dot' (.) */
+    static defaultSeparatorType = 'comma';
+    formData;
+    controlName;
+    _ngModel = null;
+    _ngModelChange = new EventEmitter();
+    ngOnInit() { }
+    _onNgModelChange() {
+        this._ngModelChange.emit(this._ngModel);
+    }
+    inputElement;
+    focus() {
+        this.inputElement?.nativeElement?.focus();
+    }
+    formatterNumber = (value) => {
+        if (value == null || isNaN(value))
+            return '';
+        if (!this.getSeparatorType()) {
+            return value.toString();
+        }
+        const parts = `${value}`.split('.');
+        const integerPart = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, this.getSeparatorType() === 'comma' ? ',' : '.');
+        return parts.length > 1
+            ? `${integerPart}${this.getSeparatorType() === 'comma' ? '.' : ','}${parts[1]}`
+            : integerPart;
+    };
+    parserNumber = (value) => {
+        if (!value)
+            return 0;
+        if (!this.getSeparatorType()) {
+            return parseFloat(value);
+        }
+        // Bỏ ký tự phân cách hàng nghìn
+        const cleaned = value
+            .replace(new RegExp(`\\${this.getSeparatorType() === 'comma' ? ',' : '.'}`, 'g'), '')
+            .replace(this.getSeparatorType() === 'comma' ? '.' : ',', '.');
+        // Kiểm tra toàn bộ chuỗi có phải là số hợp lệ hay không
+        if (!/^-?\d+(\.\d+)?$/.test(cleaned))
+            return NaN;
+        return parseFloat(cleaned);
+    };
+    getSeparatorType() {
+        if (this.separatorType == 'blank') {
+            return '';
+        }
+        if (this.separatorType) {
+            return this.separatorType;
+        }
+        return ExtendInputNumber.defaultSeparatorType;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ExtendInputNumber, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: ExtendInputNumber, isStandalone: true, selector: "extend-input-number", inputs: { layOutType: "layOutType", label: "label", placeHolder: "placeHolder", labelAlign: "labelAlign", labelSpan: "labelSpan", disabled: "disabled", required: "required", noBottom: "noBottom", size: "size", min: "min", max: "max", precision: "precision", inputWidth: "inputWidth", inputHeight: "inputHeight", borderBottomOnly: "borderBottomOnly", displayInline: "displayInline", separatorType: "separatorType", formData: "formData", controlName: "controlName", _ngModel: "_ngModel" }, outputs: { _ngModelChange: "_ngModelChange" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }], ngImport: i0, template: "<div class=\"extend-wrapper\" [ngStyle]=\"{ display: displayInline ? 'inline' : null }\">\n  @if (controlName) {\n    <div [formGroup]=\"formData\">\n      <nz-form-item>\n        <nz-form-label\n          [nzSpan]=\"layOutType == 'horizontal' ? labelSpan : null\"\n          [nzLabelAlign]=\"labelAlign\"\n          [nzRequired]=\"required\"\n          [nzFor]=\"controlName\"\n          nzNoColon\n          nzLabelWrap\n        >\n          {{ label }}\n        </nz-form-label>\n        <nz-form-control\n          [nzSpan]=\"layOutType == 'horizontal' ? 24 - labelSpan : null\"\n          [ngClass]=\"{ 'full-width': layOutType == 'vertical' }\"\n          [nzErrorTip]=\"'REQUIRED_FIELD' | translate\"\n        >\n          <nz-input-number\n            class=\"full-width\"\n            [nzSize]=\"size\"\n            [nzFormatter]=\"formatterNumber\"\n            [nzParser]=\"parserNumber\"\n            [nzPrecision]=\"precision\"\n            [formControlName]=\"controlName\"\n          />\n        </nz-form-control>\n      </nz-form-item>\n    </div>\n  } @else {\n    @if (label) {\n      <nz-form-item>\n        <nz-form-label\n          [nzSpan]=\"layOutType == 'horizontal' ? labelSpan : null\"\n          [nzLabelAlign]=\"labelAlign\"\n          [nzRequired]=\"required\"\n          [nzFor]=\"controlName\"\n          nzNoColon\n          nzLabelWrap\n        >\n          {{ label }}\n        </nz-form-label>\n        <nz-form-control\n          [nzSpan]=\"layOutType == 'horizontal' ? 24 - labelSpan : null\"\n          [ngClass]=\"{ 'full-width': layOutType == 'vertical' }\"\n          [nzErrorTip]=\"'REQUIRED_FIELD' | translate\"\n        >\n          @if (min != null && max != null) {\n            <nz-input-number\n              class=\"full-width\"\n              [nzSize]=\"size\"\n              [nzMin]=\"min\"\n              [nzMax]=\"max\"\n              [nzFormatter]=\"formatterNumber\"\n              [nzParser]=\"parserNumber\"\n              [nzPrecision]=\"precision\"\n              [nzDisabled]=\"disabled\"\n              [(ngModel)]=\"_ngModel\"\n              (ngModelChange)=\"_onNgModelChange()\"\n            />\n          } @else if (min != null) {\n            <nz-input-number\n              class=\"full-width\"\n              [nzSize]=\"size\"\n              [nzMin]=\"min\"\n              [nzFormatter]=\"formatterNumber\"\n              [nzParser]=\"parserNumber\"\n              [nzPrecision]=\"precision\"\n              [nzDisabled]=\"disabled\"\n              [(ngModel)]=\"_ngModel\"\n              (ngModelChange)=\"_onNgModelChange()\"\n            />\n          } @else if (max != null) {\n            <nz-input-number\n              class=\"full-width\"\n              [nzSize]=\"size\"\n              [nzMax]=\"max\"\n              [nzFormatter]=\"formatterNumber\"\n              [nzParser]=\"parserNumber\"\n              [nzPrecision]=\"precision\"\n              [nzDisabled]=\"disabled\"\n              [(ngModel)]=\"_ngModel\"\n              (ngModelChange)=\"_onNgModelChange()\"\n            />\n          } @else {\n            <nz-input-number\n              class=\"full-width\"\n              [nzSize]=\"size\"\n              [nzFormatter]=\"formatterNumber\"\n              [nzParser]=\"parserNumber\"\n              [nzPrecision]=\"precision\"\n              [nzDisabled]=\"disabled\"\n              [(ngModel)]=\"_ngModel\"\n              (ngModelChange)=\"_onNgModelChange()\"\n            />\n          }\n        </nz-form-control>\n      </nz-form-item>\n    } @else {\n      @if (min != null && max != null) {\n        <nz-input-number\n          class=\"full-width\"\n          [nzSize]=\"size\"\n          [nzMin]=\"min\"\n          [nzMax]=\"max\"\n          [nzFormatter]=\"formatterNumber\"\n          [nzParser]=\"parserNumber\"\n          [nzPrecision]=\"precision\"\n          [nzDisabled]=\"disabled\"\n          [(ngModel)]=\"_ngModel\"\n          (ngModelChange)=\"_onNgModelChange()\"\n        />\n      } @else if (min != null) {\n        <nz-input-number\n          class=\"full-width\"\n          [nzSize]=\"size\"\n          [nzMin]=\"min\"\n          [nzFormatter]=\"formatterNumber\"\n          [nzParser]=\"parserNumber\"\n          [nzPrecision]=\"precision\"\n          [nzDisabled]=\"disabled\"\n          [(ngModel)]=\"_ngModel\"\n          (ngModelChange)=\"_onNgModelChange()\"\n        />\n      } @else if (max != null) {\n        <nz-input-number\n          class=\"full-width\"\n          [nzSize]=\"size\"\n          [nzMax]=\"max\"\n          [nzFormatter]=\"formatterNumber\"\n          [nzParser]=\"parserNumber\"\n          [nzPrecision]=\"precision\"\n          [nzDisabled]=\"disabled\"\n          [(ngModel)]=\"_ngModel\"\n          (ngModelChange)=\"_onNgModelChange()\"\n        />\n      } @else {\n        <nz-input-number\n          class=\"full-width\"\n          [nzSize]=\"size\"\n          [nzFormatter]=\"formatterNumber\"\n          [nzParser]=\"parserNumber\"\n          [nzPrecision]=\"precision\"\n          [nzDisabled]=\"disabled\"\n          [(ngModel)]=\"_ngModel\"\n          (ngModelChange)=\"_onNgModelChange()\"\n          [ngStyle]=\"{\n            width: inputWidth,\n            height: inputHeight,\n            border: borderBottomOnly ? 'none' : '',\n            'border-bottom': borderBottomOnly ? '1px dashed' : '',\n          }\"\n        />\n      }\n    }\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: NzFormModule }, { kind: "directive", type: i4.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i4.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "component", type: i5.NzFormItemComponent, selector: "nz-form-item", exportAs: ["nzFormItem"] }, { kind: "component", type: i5.NzFormLabelComponent, selector: "nz-form-label", inputs: ["nzFor", "nzRequired", "nzNoColon", "nzTooltipTitle", "nzTooltipIcon", "nzLabelAlign", "nzLabelWrap"], exportAs: ["nzFormLabel"] }, { kind: "component", type: i5.NzFormControlComponent, selector: "nz-form-control", inputs: ["nzSuccessTip", "nzWarningTip", "nzErrorTip", "nzValidatingTip", "nzExtra", "nzAutoTips", "nzDisableAutoTips", "nzHasFeedback", "nzValidateStatus"], exportAs: ["nzFormControl"] }, { kind: "ngmodule", type: NzInputNumberModule }, { kind: "component", type: i6.NzInputNumberComponent, selector: "nz-input-number", inputs: ["nzId", "nzSize", "nzPlaceHolder", "nzStatus", "nzStep", "nzMin", "nzMax", "nzPrecision", "nzParser", "nzFormatter", "nzDisabled", "nzReadOnly", "nzAutoFocus", "nzBordered", "nzKeyboard", "nzControls"], outputs: ["nzOnStep"], exportAs: ["nzInputNumber"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ExtendInputNumber, decorators: [{
+            type: Component,
+            args: [{ selector: 'extend-input-number', imports: [CommonModule, FormsModule, ReactiveFormsModule, TranslateModule, NzFormModule, NzInputNumberModule], template: "<div class=\"extend-wrapper\" [ngStyle]=\"{ display: displayInline ? 'inline' : null }\">\n  @if (controlName) {\n    <div [formGroup]=\"formData\">\n      <nz-form-item>\n        <nz-form-label\n          [nzSpan]=\"layOutType == 'horizontal' ? labelSpan : null\"\n          [nzLabelAlign]=\"labelAlign\"\n          [nzRequired]=\"required\"\n          [nzFor]=\"controlName\"\n          nzNoColon\n          nzLabelWrap\n        >\n          {{ label }}\n        </nz-form-label>\n        <nz-form-control\n          [nzSpan]=\"layOutType == 'horizontal' ? 24 - labelSpan : null\"\n          [ngClass]=\"{ 'full-width': layOutType == 'vertical' }\"\n          [nzErrorTip]=\"'REQUIRED_FIELD' | translate\"\n        >\n          <nz-input-number\n            class=\"full-width\"\n            [nzSize]=\"size\"\n            [nzFormatter]=\"formatterNumber\"\n            [nzParser]=\"parserNumber\"\n            [nzPrecision]=\"precision\"\n            [formControlName]=\"controlName\"\n          />\n        </nz-form-control>\n      </nz-form-item>\n    </div>\n  } @else {\n    @if (label) {\n      <nz-form-item>\n        <nz-form-label\n          [nzSpan]=\"layOutType == 'horizontal' ? labelSpan : null\"\n          [nzLabelAlign]=\"labelAlign\"\n          [nzRequired]=\"required\"\n          [nzFor]=\"controlName\"\n          nzNoColon\n          nzLabelWrap\n        >\n          {{ label }}\n        </nz-form-label>\n        <nz-form-control\n          [nzSpan]=\"layOutType == 'horizontal' ? 24 - labelSpan : null\"\n          [ngClass]=\"{ 'full-width': layOutType == 'vertical' }\"\n          [nzErrorTip]=\"'REQUIRED_FIELD' | translate\"\n        >\n          @if (min != null && max != null) {\n            <nz-input-number\n              class=\"full-width\"\n              [nzSize]=\"size\"\n              [nzMin]=\"min\"\n              [nzMax]=\"max\"\n              [nzFormatter]=\"formatterNumber\"\n              [nzParser]=\"parserNumber\"\n              [nzPrecision]=\"precision\"\n              [nzDisabled]=\"disabled\"\n              [(ngModel)]=\"_ngModel\"\n              (ngModelChange)=\"_onNgModelChange()\"\n            />\n          } @else if (min != null) {\n            <nz-input-number\n              class=\"full-width\"\n              [nzSize]=\"size\"\n              [nzMin]=\"min\"\n              [nzFormatter]=\"formatterNumber\"\n              [nzParser]=\"parserNumber\"\n              [nzPrecision]=\"precision\"\n              [nzDisabled]=\"disabled\"\n              [(ngModel)]=\"_ngModel\"\n              (ngModelChange)=\"_onNgModelChange()\"\n            />\n          } @else if (max != null) {\n            <nz-input-number\n              class=\"full-width\"\n              [nzSize]=\"size\"\n              [nzMax]=\"max\"\n              [nzFormatter]=\"formatterNumber\"\n              [nzParser]=\"parserNumber\"\n              [nzPrecision]=\"precision\"\n              [nzDisabled]=\"disabled\"\n              [(ngModel)]=\"_ngModel\"\n              (ngModelChange)=\"_onNgModelChange()\"\n            />\n          } @else {\n            <nz-input-number\n              class=\"full-width\"\n              [nzSize]=\"size\"\n              [nzFormatter]=\"formatterNumber\"\n              [nzParser]=\"parserNumber\"\n              [nzPrecision]=\"precision\"\n              [nzDisabled]=\"disabled\"\n              [(ngModel)]=\"_ngModel\"\n              (ngModelChange)=\"_onNgModelChange()\"\n            />\n          }\n        </nz-form-control>\n      </nz-form-item>\n    } @else {\n      @if (min != null && max != null) {\n        <nz-input-number\n          class=\"full-width\"\n          [nzSize]=\"size\"\n          [nzMin]=\"min\"\n          [nzMax]=\"max\"\n          [nzFormatter]=\"formatterNumber\"\n          [nzParser]=\"parserNumber\"\n          [nzPrecision]=\"precision\"\n          [nzDisabled]=\"disabled\"\n          [(ngModel)]=\"_ngModel\"\n          (ngModelChange)=\"_onNgModelChange()\"\n        />\n      } @else if (min != null) {\n        <nz-input-number\n          class=\"full-width\"\n          [nzSize]=\"size\"\n          [nzMin]=\"min\"\n          [nzFormatter]=\"formatterNumber\"\n          [nzParser]=\"parserNumber\"\n          [nzPrecision]=\"precision\"\n          [nzDisabled]=\"disabled\"\n          [(ngModel)]=\"_ngModel\"\n          (ngModelChange)=\"_onNgModelChange()\"\n        />\n      } @else if (max != null) {\n        <nz-input-number\n          class=\"full-width\"\n          [nzSize]=\"size\"\n          [nzMax]=\"max\"\n          [nzFormatter]=\"formatterNumber\"\n          [nzParser]=\"parserNumber\"\n          [nzPrecision]=\"precision\"\n          [nzDisabled]=\"disabled\"\n          [(ngModel)]=\"_ngModel\"\n          (ngModelChange)=\"_onNgModelChange()\"\n        />\n      } @else {\n        <nz-input-number\n          class=\"full-width\"\n          [nzSize]=\"size\"\n          [nzFormatter]=\"formatterNumber\"\n          [nzParser]=\"parserNumber\"\n          [nzPrecision]=\"precision\"\n          [nzDisabled]=\"disabled\"\n          [(ngModel)]=\"_ngModel\"\n          (ngModelChange)=\"_onNgModelChange()\"\n          [ngStyle]=\"{\n            width: inputWidth,\n            height: inputHeight,\n            border: borderBottomOnly ? 'none' : '',\n            'border-bottom': borderBottomOnly ? '1px dashed' : '',\n          }\"\n        />\n      }\n    }\n  }\n</div>\n" }]
+        }], propDecorators: { layOutType: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], placeHolder: [{
+                type: Input
+            }], labelAlign: [{
+                type: Input
+            }], labelSpan: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], noBottom: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], precision: [{
+                type: Input
+            }], inputWidth: [{
+                type: Input
+            }], inputHeight: [{
+                type: Input
+            }], borderBottomOnly: [{
+                type: Input
+            }], displayInline: [{
+                type: Input
+            }], separatorType: [{
+                type: Input
+            }], formData: [{
+                type: Input
+            }], controlName: [{
+                type: Input
+            }], _ngModel: [{
+                type: Input
+            }], _ngModelChange: [{
+                type: Output
+            }], inputElement: [{
+                type: ViewChild,
+                args: ['inputElement']
+            }] } });
+
+class ExtendInput {
+    layOutType = 'horizontal'; // horizontal: ngang, vertical dọc
+    label = '';
+    placeHolder = '';
+    labelAlign = 'left';
+    inputClass = '';
+    /**
+     * default = 8
+     */
+    labelSpan = 8;
+    allowClear = false;
+    disabled = false;
+    required = false;
+    noBottom = false;
+    selectModeType = 'default';
+    autocomplete = '';
+    inputWidth = '';
+    inputHeight = '';
+    borderBottomOnly = false;
+    displayInline = false;
+    size = 'default';
+    lstItem = [];
+    /**
+     * Dùng trong word page
+     */
+    displayField = '';
+    valueField = '';
+    formData;
+    controlName;
+    _ngModel = null;
+    _ngModelChange = new EventEmitter();
+    onclickClearIcon = new EventEmitter();
+    onenter = new EventEmitter();
+    ngOnInit() { }
+    _onNgModelChange() {
+        this._ngModelChange.emit(this._ngModel);
+    }
+    inputElement;
+    focus() {
+        this.inputElement?.nativeElement?.select();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ExtendInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: ExtendInput, isStandalone: true, selector: "extend-input", inputs: { layOutType: "layOutType", label: "label", placeHolder: "placeHolder", labelAlign: "labelAlign", inputClass: "inputClass", labelSpan: "labelSpan", allowClear: "allowClear", disabled: "disabled", required: "required", noBottom: "noBottom", selectModeType: "selectModeType", autocomplete: "autocomplete", inputWidth: "inputWidth", inputHeight: "inputHeight", borderBottomOnly: "borderBottomOnly", displayInline: "displayInline", size: "size", lstItem: "lstItem", displayField: "displayField", valueField: "valueField", formData: "formData", controlName: "controlName", _ngModel: "_ngModel" }, outputs: { _ngModelChange: "_ngModelChange", onclickClearIcon: "onclickClearIcon", onenter: "onenter" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }], ngImport: i0, template: "<div class=\"extend-wrapper\" [ngStyle]=\"{ display: displayInline ? 'inline' : null }\">\n  @if (controlName) {\n    <div [formGroup]=\"formData\">\n      <nz-form-item>\n        <nz-form-label\n          [nzSpan]=\"layOutType == 'horizontal' ? labelSpan : null\"\n          [nzLabelAlign]=\"labelAlign\"\n          [nzRequired]=\"required\"\n          [nzFor]=\"controlName\"\n          nzNoColon\n          nzLabelWrap\n        >\n          {{ label }}\n        </nz-form-label>\n        <nz-form-control\n          [nzSpan]=\"layOutType == 'horizontal' ? 24 - labelSpan : null\"\n          [ngClass]=\"{ 'full-width': layOutType == 'vertical' }\"\n          [nzErrorTip]=\"'REQUIRED_FIELD' | translate\"\n        >\n          <input\n            #inputElement\n            nz-input\n            [nzSize]=\"size\"\n            [id]=\"controlName\"\n            [name]=\"controlName\"\n            [formControlName]=\"controlName\"\n            [autocomplete]=\"autocomplete\"\n            [placeholder]=\"placeHolder\"\n            [ngClass]=\"inputClass\"\n            (keyup.enter)=\"onenter.emit()\"\n          />\n        </nz-form-control>\n      </nz-form-item>\n    </div>\n  } @else {\n    @if (label) {\n      <nz-form-item>\n        <nz-form-label\n          [nzSpan]=\"layOutType == 'horizontal' ? labelSpan : null\"\n          [nzLabelAlign]=\"labelAlign\"\n          [nzRequired]=\"required\"\n          [nzFor]=\"controlName\"\n          nzNoColon\n          nzLabelWrap\n        >\n          {{ label }}\n        </nz-form-label>\n        <nz-form-control\n          [nzSpan]=\"layOutType == 'horizontal' ? 24 - labelSpan : null\"\n          [ngClass]=\"{ 'full-width': layOutType == 'vertical' }\"\n          [nzErrorTip]=\"'REQUIRED_FIELD' | translate\"\n        >\n          <nz-input-group [nzSuffix]=\"allowClear ? clearIcon : undefined\">\n            <input\n              #inputElement\n              nz-input\n              [nzSize]=\"size\"\n              [id]=\"controlName\"\n              [name]=\"controlName\"\n              [(ngModel)]=\"_ngModel\"\n              [autocomplete]=\"autocomplete\"\n              (ngModelChange)=\"_onNgModelChange()\"\n              [disabled]=\"disabled\"\n              [placeholder]=\"placeHolder\"\n              [ngClass]=\"inputClass\"\n              (keyup.enter)=\"onenter.emit()\"\n            />\n          </nz-input-group>\n        </nz-form-control>\n      </nz-form-item>\n    } @else {\n      <input\n        #inputElement\n        nz-input\n        [nzSize]=\"size\"\n        [ngStyle]=\"{\n          width: inputWidth,\n          height: inputHeight,\n        }\"\n        [id]=\"controlName\"\n        [name]=\"controlName\"\n        [(ngModel)]=\"_ngModel\"\n        (ngModelChange)=\"_onNgModelChange()\"\n        [autocomplete]=\"autocomplete\"\n        [disabled]=\"disabled\"\n        [placeholder]=\"placeHolder\"\n        [ngClass]=\"inputClass + ' ' + (borderBottomOnly ? 'border-bottom-only' : '')\"\n        (keyup.enter)=\"onenter.emit()\"\n      />\n    }\n  }\n</div>\n\n<ng-template #clearIcon>\n  <i\n    nz-icon\n    nzType=\"close-circle\"\n    nzTheme=\"twotone\"\n    nzTwotoneColor=\"#999\"\n    *ngIf=\"_ngModel\"\n    (click)=\"_ngModel = null; _onNgModelChange(); onclickClearIcon.emit()\"\n    style=\"cursor: pointer\"\n  ></i>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: NzFormModule }, { kind: "directive", type: i4.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i4.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "component", type: i5.NzFormItemComponent, selector: "nz-form-item", exportAs: ["nzFormItem"] }, { kind: "component", type: i5.NzFormLabelComponent, selector: "nz-form-label", inputs: ["nzFor", "nzRequired", "nzNoColon", "nzTooltipTitle", "nzTooltipIcon", "nzLabelAlign", "nzLabelWrap"], exportAs: ["nzFormLabel"] }, { kind: "component", type: i5.NzFormControlComponent, selector: "nz-form-control", inputs: ["nzSuccessTip", "nzWarningTip", "nzErrorTip", "nzValidatingTip", "nzExtra", "nzAutoTips", "nzDisableAutoTips", "nzHasFeedback", "nzValidateStatus"], exportAs: ["nzFormControl"] }, { kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i6$1.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "component", type: i6$1.NzInputGroupComponent, selector: "nz-input-group", inputs: ["nzAddOnBeforeIcon", "nzAddOnAfterIcon", "nzPrefixIcon", "nzSuffixIcon", "nzAddOnBefore", "nzAddOnAfter", "nzPrefix", "nzStatus", "nzSuffix", "nzSize", "nzSearch", "nzCompact"], exportAs: ["nzInputGroup"] }, { kind: "directive", type: i6$1.NzInputGroupWhitSuffixOrPrefixDirective, selector: "nz-input-group[nzSuffix], nz-input-group[nzPrefix]" }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i2.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ExtendInput, decorators: [{
+            type: Component,
+            args: [{ selector: 'extend-input', imports: [CommonModule, FormsModule, ReactiveFormsModule, TranslateModule, NzFormModule, NzInputModule, NzIconModule], template: "<div class=\"extend-wrapper\" [ngStyle]=\"{ display: displayInline ? 'inline' : null }\">\n  @if (controlName) {\n    <div [formGroup]=\"formData\">\n      <nz-form-item>\n        <nz-form-label\n          [nzSpan]=\"layOutType == 'horizontal' ? labelSpan : null\"\n          [nzLabelAlign]=\"labelAlign\"\n          [nzRequired]=\"required\"\n          [nzFor]=\"controlName\"\n          nzNoColon\n          nzLabelWrap\n        >\n          {{ label }}\n        </nz-form-label>\n        <nz-form-control\n          [nzSpan]=\"layOutType == 'horizontal' ? 24 - labelSpan : null\"\n          [ngClass]=\"{ 'full-width': layOutType == 'vertical' }\"\n          [nzErrorTip]=\"'REQUIRED_FIELD' | translate\"\n        >\n          <input\n            #inputElement\n            nz-input\n            [nzSize]=\"size\"\n            [id]=\"controlName\"\n            [name]=\"controlName\"\n            [formControlName]=\"controlName\"\n            [autocomplete]=\"autocomplete\"\n            [placeholder]=\"placeHolder\"\n            [ngClass]=\"inputClass\"\n            (keyup.enter)=\"onenter.emit()\"\n          />\n        </nz-form-control>\n      </nz-form-item>\n    </div>\n  } @else {\n    @if (label) {\n      <nz-form-item>\n        <nz-form-label\n          [nzSpan]=\"layOutType == 'horizontal' ? labelSpan : null\"\n          [nzLabelAlign]=\"labelAlign\"\n          [nzRequired]=\"required\"\n          [nzFor]=\"controlName\"\n          nzNoColon\n          nzLabelWrap\n        >\n          {{ label }}\n        </nz-form-label>\n        <nz-form-control\n          [nzSpan]=\"layOutType == 'horizontal' ? 24 - labelSpan : null\"\n          [ngClass]=\"{ 'full-width': layOutType == 'vertical' }\"\n          [nzErrorTip]=\"'REQUIRED_FIELD' | translate\"\n        >\n          <nz-input-group [nzSuffix]=\"allowClear ? clearIcon : undefined\">\n            <input\n              #inputElement\n              nz-input\n              [nzSize]=\"size\"\n              [id]=\"controlName\"\n              [name]=\"controlName\"\n              [(ngModel)]=\"_ngModel\"\n              [autocomplete]=\"autocomplete\"\n              (ngModelChange)=\"_onNgModelChange()\"\n              [disabled]=\"disabled\"\n              [placeholder]=\"placeHolder\"\n              [ngClass]=\"inputClass\"\n              (keyup.enter)=\"onenter.emit()\"\n            />\n          </nz-input-group>\n        </nz-form-control>\n      </nz-form-item>\n    } @else {\n      <input\n        #inputElement\n        nz-input\n        [nzSize]=\"size\"\n        [ngStyle]=\"{\n          width: inputWidth,\n          height: inputHeight,\n        }\"\n        [id]=\"controlName\"\n        [name]=\"controlName\"\n        [(ngModel)]=\"_ngModel\"\n        (ngModelChange)=\"_onNgModelChange()\"\n        [autocomplete]=\"autocomplete\"\n        [disabled]=\"disabled\"\n        [placeholder]=\"placeHolder\"\n        [ngClass]=\"inputClass + ' ' + (borderBottomOnly ? 'border-bottom-only' : '')\"\n        (keyup.enter)=\"onenter.emit()\"\n      />\n    }\n  }\n</div>\n\n<ng-template #clearIcon>\n  <i\n    nz-icon\n    nzType=\"close-circle\"\n    nzTheme=\"twotone\"\n    nzTwotoneColor=\"#999\"\n    *ngIf=\"_ngModel\"\n    (click)=\"_ngModel = null; _onNgModelChange(); onclickClearIcon.emit()\"\n    style=\"cursor: pointer\"\n  ></i>\n</ng-template>\n" }]
+        }], propDecorators: { layOutType: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], placeHolder: [{
+                type: Input
+            }], labelAlign: [{
+                type: Input
+            }], inputClass: [{
+                type: Input
+            }], labelSpan: [{
+                type: Input
+            }], allowClear: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], noBottom: [{
+                type: Input
+            }], selectModeType: [{
+                type: Input
+            }], autocomplete: [{
+                type: Input
+            }], inputWidth: [{
+                type: Input
+            }], inputHeight: [{
+                type: Input
+            }], borderBottomOnly: [{
+                type: Input
+            }], displayInline: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], lstItem: [{
+                type: Input
+            }], displayField: [{
+                type: Input
+            }], valueField: [{
+                type: Input
+            }], formData: [{
+                type: Input
+            }], controlName: [{
+                type: Input
+            }], _ngModel: [{
+                type: Input
+            }], _ngModelChange: [{
+                type: Output
+            }], onclickClearIcon: [{
+                type: Output
+            }], onenter: [{
+                type: Output
+            }], inputElement: [{
+                type: ViewChild,
+                args: ['inputElement']
+            }] } });
+
+class ExtendSelectComponent {
+    layOutType = 'horizontal';
+    label = '';
+    placeHolder = '';
+    labelAlign = 'left';
+    /**
+     * default = 8
+     */
+    labelSpan = 8;
+    disabled = false;
+    required = false;
+    noBottom = false;
+    multiple = false;
+    showSelectAll = false;
+    maxTagCount = 10;
+    inputWidth = '';
+    inputHeight = '';
+    borderBottomOnly = false;
+    /**
+     *
+     */
+    displayInline = false;
+    size = 'default';
+    lstItem = [];
+    displayField = '';
+    displayFields = [];
+    valueField = '';
+    formData;
+    controlName;
+    _ngModel = null;
+    _ngModelChange = new EventEmitter();
+    onFocus = new EventEmitter();
+    get cssHeight() {
+        return this.inputHeight ? +this.inputHeight.replaceAll('px', '') - 1 + 'px' : null;
+    }
+    ngOnInit() { }
+    getDisplay(item) {
+        if (this.displayField) {
+            return item[this.displayField];
+        }
+        if (this.displayFields?.length) {
+            const display = this.displayFields.map((field) => item[field]).join(' - ');
+            return display;
+        }
+        return item;
+    }
+    onSelectChange(val) {
+        if (val instanceof Array && val.find((x) => x == '__all__')) {
+            const allIds = this.lstItem.map((x) => (this.valueField ? x[this.valueField] : x));
+            val = allIds;
+        }
+        this._ngModel = val;
+        this._ngModelChange.emit(val);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ExtendSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: ExtendSelectComponent, isStandalone: true, selector: "extend-select", inputs: { layOutType: "layOutType", label: "label", placeHolder: "placeHolder", labelAlign: "labelAlign", labelSpan: "labelSpan", disabled: "disabled", required: "required", noBottom: "noBottom", multiple: "multiple", showSelectAll: "showSelectAll", maxTagCount: "maxTagCount", inputWidth: "inputWidth", inputHeight: "inputHeight", borderBottomOnly: "borderBottomOnly", displayInline: "displayInline", size: "size", lstItem: "lstItem", displayField: "displayField", displayFields: "displayFields", valueField: "valueField", formData: "formData", controlName: "controlName", _ngModel: "_ngModel" }, outputs: { _ngModelChange: "_ngModelChange", onFocus: "onFocus" }, host: { properties: { "style.--custom-select-height": "this.cssHeight" } }, ngImport: i0, template: "<div class=\"extend-wrapper\" [ngStyle]=\"{ display: displayInline ? 'inline' : null }\">\n  @if (!multiple) {\n    @if (controlName) {\n      <div [formGroup]=\"formData\">\n        <nz-form-item>\n          <nz-form-label\n            [nzSpan]=\"layOutType == 'horizontal' ? labelSpan : null\"\n            [nzLabelAlign]=\"labelAlign\"\n            [nzRequired]=\"required\"\n            nzNoColon\n            nzLabelWrap\n          >\n            {{ label }}\n          </nz-form-label>\n          <nz-form-control\n            [nzSpan]=\"layOutType == 'horizontal' ? 24 - labelSpan : null\"\n            [ngClass]=\"{ 'full-width': layOutType == 'vertical' }\"\n            [nzErrorTip]=\"'REQUIRED_FIELD' | translate\"\n          >\n            <nz-select\n              nzShowSearch\n              nzAllowClear\n              [nzSize]=\"size\"\n              [nzAllowClear]=\"true\"\n              [nzShowSearch]=\"true\"\n              [nzDropdownMatchSelectWidth]=\"false\"\n              [formControlName]=\"controlName\"\n              (nzFocus)=\"onFocus.emit()\"\n            >\n              @if (showSelectAll) {\n                <nz-option [nzLabel]=\"'-- Ch\u1ECDn t\u1EA5t c\u1EA3 --'\" [nzValue]=\"'__all__'\"></nz-option>\n              }\n              @for (item of lstItem; track $index) {\n                <nz-option [nzLabel]=\"getDisplay(item)\" [nzValue]=\"valueField ? item[valueField] : item\"></nz-option>\n              }\n            </nz-select>\n          </nz-form-control>\n        </nz-form-item>\n      </div>\n    } @else {\n      @if (label) {\n        <nz-form-item>\n          <nz-form-label\n            [nzSpan]=\"layOutType == 'horizontal' ? labelSpan : null\"\n            [nzLabelAlign]=\"labelAlign\"\n            [nzRequired]=\"required\"\n            nzNoColon\n            nzLabelWrap\n          >\n            {{ label }}\n          </nz-form-label>\n          <nz-form-control\n            [nzSpan]=\"layOutType == 'horizontal' ? 24 - labelSpan : null\"\n            [ngClass]=\"{ 'full-width': layOutType == 'vertical' }\"\n            [nzErrorTip]=\"'REQUIRED_FIELD' | translate\"\n          >\n            <nz-select\n              nzShowSearch\n              nzAllowClear\n              [nzSize]=\"size\"\n              [nzAllowClear]=\"true\"\n              [nzShowSearch]=\"true\"\n              [nzDropdownMatchSelectWidth]=\"false\"\n              [ngModel]=\"_ngModel\"\n              [disabled]=\"disabled\"\n              (ngModelChange)=\"onSelectChange($event)\"\n              (nzFocus)=\"onFocus.emit()\"\n            >\n              @if (showSelectAll) {\n                <nz-option [nzLabel]=\"'-- Ch\u1ECDn t\u1EA5t c\u1EA3 --'\" [nzValue]=\"'__all__'\"></nz-option>\n              }\n              @for (item of lstItem; track $index) {\n                <nz-option [nzLabel]=\"getDisplay(item)\" [nzValue]=\"valueField ? item[valueField] : item\"></nz-option>\n              }\n            </nz-select>\n          </nz-form-control>\n        </nz-form-item>\n      } @else {\n        <nz-select\n          class=\"full-width\"\n          nzShowSearch\n          nzAllowClear\n          [nzSize]=\"size\"\n          [nzPlaceHolder]=\"placeHolder\"\n          [nzDropdownMatchSelectWidth]=\"false\"\n          [ngModel]=\"_ngModel\"\n          (ngModelChange)=\"onSelectChange($event)\"\n          (nzFocus)=\"onFocus.emit()\"\n          [disabled]=\"disabled\"\n          [ngStyle]=\"{\n            width: inputWidth,\n            height: inputHeight,\n          }\"\n          [ngClass]=\"{\n            'border-bottom-only': borderBottomOnly,\n            'custom-height-select': inputHeight ? true : false,\n          }\"\n        >\n          @if (showSelectAll) {\n            <nz-option [nzLabel]=\"'-- Ch\u1ECDn t\u1EA5t c\u1EA3 --'\" [nzValue]=\"'__all__'\"></nz-option>\n          }\n          @for (item of lstItem; track $index) {\n            <nz-option [nzLabel]=\"getDisplay(item)\" [nzValue]=\"valueField ? item[valueField] : item\"></nz-option>\n          }\n        </nz-select>\n      }\n    }\n  } @else {\n    @if (controlName) {\n      <div [formGroup]=\"formData\">\n        <nz-form-item>\n          <nz-form-label\n            [nzSpan]=\"layOutType == 'horizontal' ? labelSpan : null\"\n            [nzLabelAlign]=\"labelAlign\"\n            [nzRequired]=\"required\"\n            nzNoColon\n            nzLabelWrap\n          >\n            {{ label }}\n          </nz-form-label>\n          <nz-form-control\n            [nzSpan]=\"layOutType == 'horizontal' ? 24 - labelSpan : null\"\n            [ngClass]=\"{ 'full-width': layOutType == 'vertical' }\"\n            [nzErrorTip]=\"'REQUIRED_FIELD' | translate\"\n          >\n            <nz-select\n              nzShowSearch\n              nzAllowClear\n              [nzSize]=\"size\"\n              [nzMode]=\"'multiple'\"\n              [nzMaxMultipleCount]=\"lstItem.length\"\n              [nzMaxTagCount]=\"maxTagCount\"\n              [nzAllowClear]=\"true\"\n              [nzShowSearch]=\"true\"\n              [nzDropdownMatchSelectWidth]=\"false\"\n              [formControlName]=\"controlName\"\n              (nzFocus)=\"onFocus.emit()\"\n            >\n              @if (showSelectAll) {\n                <nz-option [nzLabel]=\"'-- Ch\u1ECDn t\u1EA5t c\u1EA3 --'\" [nzValue]=\"'__all__'\"></nz-option>\n              }\n              @for (item of lstItem; track $index) {\n                <nz-option [nzLabel]=\"getDisplay(item)\" [nzValue]=\"valueField ? item[valueField] : item\"></nz-option>\n              }\n            </nz-select>\n          </nz-form-control>\n        </nz-form-item>\n      </div>\n    } @else {\n      @if (label) {\n        <nz-form-item>\n          <nz-form-label\n            [nzSpan]=\"layOutType == 'horizontal' ? labelSpan : null\"\n            [nzLabelAlign]=\"labelAlign\"\n            [nzRequired]=\"required\"\n            nzNoColon\n            nzLabelWrap\n          >\n            {{ label }}\n          </nz-form-label>\n          <nz-form-control\n            [nzSpan]=\"layOutType == 'horizontal' ? 24 - labelSpan : null\"\n            [ngClass]=\"{ 'full-width': layOutType == 'vertical' }\"\n            [nzErrorTip]=\"'REQUIRED_FIELD' | translate\"\n          >\n            <nz-select\n              nzShowSearch\n              nzAllowClear\n              [nzSize]=\"size\"\n              [nzMode]=\"'multiple'\"\n              [nzMaxMultipleCount]=\"lstItem.length\"\n              [nzMaxTagCount]=\"maxTagCount\"\n              [nzAllowClear]=\"true\"\n              [nzShowSearch]=\"true\"\n              [nzDropdownMatchSelectWidth]=\"false\"\n              [ngModel]=\"_ngModel\"\n              [disabled]=\"disabled\"\n              (ngModelChange)=\"onSelectChange($event)\"\n              (nzFocus)=\"onFocus.emit()\"\n            >\n              @if (showSelectAll) {\n                <nz-option [nzLabel]=\"'-- Ch\u1ECDn t\u1EA5t c\u1EA3 --'\" [nzValue]=\"'__all__'\"></nz-option>\n              }\n              @for (item of lstItem; track $index) {\n                <nz-option [nzLabel]=\"getDisplay(item)\" [nzValue]=\"valueField ? item[valueField] : item\"></nz-option>\n              }\n            </nz-select>\n          </nz-form-control>\n        </nz-form-item>\n      } @else {\n        <nz-select\n          class=\"full-width\"\n          nzShowSearch\n          nzAllowClear\n          [nzSize]=\"size\"\n          [nzPlaceHolder]=\"placeHolder\"\n          [nzMode]=\"'multiple'\"\n          [nzMaxMultipleCount]=\"lstItem.length\"\n          [nzMaxTagCount]=\"maxTagCount\"\n          [nzDropdownMatchSelectWidth]=\"false\"\n          [ngModel]=\"_ngModel\"\n          [disabled]=\"disabled\"\n          (ngModelChange)=\"onSelectChange($event)\"\n          (nzFocus)=\"onFocus.emit()\"\n        >\n          @if (showSelectAll) {\n            <nz-option [nzLabel]=\"'-- Ch\u1ECDn t\u1EA5t c\u1EA3 --'\" [nzValue]=\"'__all__'\"></nz-option>\n          }\n          @for (item of lstItem; track $index) {\n            <nz-option [nzLabel]=\"getDisplay(item)\" [nzValue]=\"valueField ? item[valueField] : item\"></nz-option>\n          }\n        </nz-select>\n      }\n    }\n  }\n</div>\n", styles: [":host ::ng-deep .ant-select-selector{height:var(--custom-select-height)!important;line-height:var(--custom-select-height)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: NzFormModule }, { kind: "directive", type: i4.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i4.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "component", type: i5.NzFormItemComponent, selector: "nz-form-item", exportAs: ["nzFormItem"] }, { kind: "component", type: i5.NzFormLabelComponent, selector: "nz-form-label", inputs: ["nzFor", "nzRequired", "nzNoColon", "nzTooltipTitle", "nzTooltipIcon", "nzLabelAlign", "nzLabelWrap"], exportAs: ["nzFormLabel"] }, { kind: "component", type: i5.NzFormControlComponent, selector: "nz-form-control", inputs: ["nzSuccessTip", "nzWarningTip", "nzErrorTip", "nzValidatingTip", "nzExtra", "nzAutoTips", "nzDisableAutoTips", "nzHasFeedback", "nzValidateStatus"], exportAs: ["nzFormControl"] }, { kind: "ngmodule", type: NzSelectModule }, { kind: "component", type: i6$2.NzOptionComponent, selector: "nz-option", inputs: ["nzTitle", "nzLabel", "nzValue", "nzKey", "nzDisabled", "nzHide", "nzCustomContent"], exportAs: ["nzOption"] }, { kind: "component", type: i6$2.NzSelectComponent, selector: "nz-select", inputs: ["nzId", "nzSize", "nzStatus", "nzOptionHeightPx", "nzOptionOverflowSize", "nzDropdownClassName", "nzDropdownMatchSelectWidth", "nzDropdownStyle", "nzNotFoundContent", "nzPlaceHolder", "nzPlacement", "nzMaxTagCount", "nzDropdownRender", "nzCustomTemplate", "nzSuffixIcon", "nzClearIcon", "nzRemoveIcon", "nzMenuItemSelectedIcon", "nzTokenSeparators", "nzMaxTagPlaceholder", "nzMaxMultipleCount", "nzMode", "nzFilterOption", "compareWith", "nzAllowClear", "nzBorderless", "nzShowSearch", "nzLoading", "nzAutoFocus", "nzAutoClearSearchValue", "nzServerSearch", "nzDisabled", "nzOpen", "nzSelectOnTab", "nzBackdrop", "nzOptions", "nzShowArrow"], outputs: ["nzOnSearch", "nzScrollToBottom", "nzOpenChange", "nzBlur", "nzFocus"], exportAs: ["nzSelect"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ExtendSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'extend-select', imports: [CommonModule, FormsModule, ReactiveFormsModule, TranslateModule, NzFormModule, NzSelectModule], template: "<div class=\"extend-wrapper\" [ngStyle]=\"{ display: displayInline ? 'inline' : null }\">\n  @if (!multiple) {\n    @if (controlName) {\n      <div [formGroup]=\"formData\">\n        <nz-form-item>\n          <nz-form-label\n            [nzSpan]=\"layOutType == 'horizontal' ? labelSpan : null\"\n            [nzLabelAlign]=\"labelAlign\"\n            [nzRequired]=\"required\"\n            nzNoColon\n            nzLabelWrap\n          >\n            {{ label }}\n          </nz-form-label>\n          <nz-form-control\n            [nzSpan]=\"layOutType == 'horizontal' ? 24 - labelSpan : null\"\n            [ngClass]=\"{ 'full-width': layOutType == 'vertical' }\"\n            [nzErrorTip]=\"'REQUIRED_FIELD' | translate\"\n          >\n            <nz-select\n              nzShowSearch\n              nzAllowClear\n              [nzSize]=\"size\"\n              [nzAllowClear]=\"true\"\n              [nzShowSearch]=\"true\"\n              [nzDropdownMatchSelectWidth]=\"false\"\n              [formControlName]=\"controlName\"\n              (nzFocus)=\"onFocus.emit()\"\n            >\n              @if (showSelectAll) {\n                <nz-option [nzLabel]=\"'-- Ch\u1ECDn t\u1EA5t c\u1EA3 --'\" [nzValue]=\"'__all__'\"></nz-option>\n              }\n              @for (item of lstItem; track $index) {\n                <nz-option [nzLabel]=\"getDisplay(item)\" [nzValue]=\"valueField ? item[valueField] : item\"></nz-option>\n              }\n            </nz-select>\n          </nz-form-control>\n        </nz-form-item>\n      </div>\n    } @else {\n      @if (label) {\n        <nz-form-item>\n          <nz-form-label\n            [nzSpan]=\"layOutType == 'horizontal' ? labelSpan : null\"\n            [nzLabelAlign]=\"labelAlign\"\n            [nzRequired]=\"required\"\n            nzNoColon\n            nzLabelWrap\n          >\n            {{ label }}\n          </nz-form-label>\n          <nz-form-control\n            [nzSpan]=\"layOutType == 'horizontal' ? 24 - labelSpan : null\"\n            [ngClass]=\"{ 'full-width': layOutType == 'vertical' }\"\n            [nzErrorTip]=\"'REQUIRED_FIELD' | translate\"\n          >\n            <nz-select\n              nzShowSearch\n              nzAllowClear\n              [nzSize]=\"size\"\n              [nzAllowClear]=\"true\"\n              [nzShowSearch]=\"true\"\n              [nzDropdownMatchSelectWidth]=\"false\"\n              [ngModel]=\"_ngModel\"\n              [disabled]=\"disabled\"\n              (ngModelChange)=\"onSelectChange($event)\"\n              (nzFocus)=\"onFocus.emit()\"\n            >\n              @if (showSelectAll) {\n                <nz-option [nzLabel]=\"'-- Ch\u1ECDn t\u1EA5t c\u1EA3 --'\" [nzValue]=\"'__all__'\"></nz-option>\n              }\n              @for (item of lstItem; track $index) {\n                <nz-option [nzLabel]=\"getDisplay(item)\" [nzValue]=\"valueField ? item[valueField] : item\"></nz-option>\n              }\n            </nz-select>\n          </nz-form-control>\n        </nz-form-item>\n      } @else {\n        <nz-select\n          class=\"full-width\"\n          nzShowSearch\n          nzAllowClear\n          [nzSize]=\"size\"\n          [nzPlaceHolder]=\"placeHolder\"\n          [nzDropdownMatchSelectWidth]=\"false\"\n          [ngModel]=\"_ngModel\"\n          (ngModelChange)=\"onSelectChange($event)\"\n          (nzFocus)=\"onFocus.emit()\"\n          [disabled]=\"disabled\"\n          [ngStyle]=\"{\n            width: inputWidth,\n            height: inputHeight,\n          }\"\n          [ngClass]=\"{\n            'border-bottom-only': borderBottomOnly,\n            'custom-height-select': inputHeight ? true : false,\n          }\"\n        >\n          @if (showSelectAll) {\n            <nz-option [nzLabel]=\"'-- Ch\u1ECDn t\u1EA5t c\u1EA3 --'\" [nzValue]=\"'__all__'\"></nz-option>\n          }\n          @for (item of lstItem; track $index) {\n            <nz-option [nzLabel]=\"getDisplay(item)\" [nzValue]=\"valueField ? item[valueField] : item\"></nz-option>\n          }\n        </nz-select>\n      }\n    }\n  } @else {\n    @if (controlName) {\n      <div [formGroup]=\"formData\">\n        <nz-form-item>\n          <nz-form-label\n            [nzSpan]=\"layOutType == 'horizontal' ? labelSpan : null\"\n            [nzLabelAlign]=\"labelAlign\"\n            [nzRequired]=\"required\"\n            nzNoColon\n            nzLabelWrap\n          >\n            {{ label }}\n          </nz-form-label>\n          <nz-form-control\n            [nzSpan]=\"layOutType == 'horizontal' ? 24 - labelSpan : null\"\n            [ngClass]=\"{ 'full-width': layOutType == 'vertical' }\"\n            [nzErrorTip]=\"'REQUIRED_FIELD' | translate\"\n          >\n            <nz-select\n              nzShowSearch\n              nzAllowClear\n              [nzSize]=\"size\"\n              [nzMode]=\"'multiple'\"\n              [nzMaxMultipleCount]=\"lstItem.length\"\n              [nzMaxTagCount]=\"maxTagCount\"\n              [nzAllowClear]=\"true\"\n              [nzShowSearch]=\"true\"\n              [nzDropdownMatchSelectWidth]=\"false\"\n              [formControlName]=\"controlName\"\n              (nzFocus)=\"onFocus.emit()\"\n            >\n              @if (showSelectAll) {\n                <nz-option [nzLabel]=\"'-- Ch\u1ECDn t\u1EA5t c\u1EA3 --'\" [nzValue]=\"'__all__'\"></nz-option>\n              }\n              @for (item of lstItem; track $index) {\n                <nz-option [nzLabel]=\"getDisplay(item)\" [nzValue]=\"valueField ? item[valueField] : item\"></nz-option>\n              }\n            </nz-select>\n          </nz-form-control>\n        </nz-form-item>\n      </div>\n    } @else {\n      @if (label) {\n        <nz-form-item>\n          <nz-form-label\n            [nzSpan]=\"layOutType == 'horizontal' ? labelSpan : null\"\n            [nzLabelAlign]=\"labelAlign\"\n            [nzRequired]=\"required\"\n            nzNoColon\n            nzLabelWrap\n          >\n            {{ label }}\n          </nz-form-label>\n          <nz-form-control\n            [nzSpan]=\"layOutType == 'horizontal' ? 24 - labelSpan : null\"\n            [ngClass]=\"{ 'full-width': layOutType == 'vertical' }\"\n            [nzErrorTip]=\"'REQUIRED_FIELD' | translate\"\n          >\n            <nz-select\n              nzShowSearch\n              nzAllowClear\n              [nzSize]=\"size\"\n              [nzMode]=\"'multiple'\"\n              [nzMaxMultipleCount]=\"lstItem.length\"\n              [nzMaxTagCount]=\"maxTagCount\"\n              [nzAllowClear]=\"true\"\n              [nzShowSearch]=\"true\"\n              [nzDropdownMatchSelectWidth]=\"false\"\n              [ngModel]=\"_ngModel\"\n              [disabled]=\"disabled\"\n              (ngModelChange)=\"onSelectChange($event)\"\n              (nzFocus)=\"onFocus.emit()\"\n            >\n              @if (showSelectAll) {\n                <nz-option [nzLabel]=\"'-- Ch\u1ECDn t\u1EA5t c\u1EA3 --'\" [nzValue]=\"'__all__'\"></nz-option>\n              }\n              @for (item of lstItem; track $index) {\n                <nz-option [nzLabel]=\"getDisplay(item)\" [nzValue]=\"valueField ? item[valueField] : item\"></nz-option>\n              }\n            </nz-select>\n          </nz-form-control>\n        </nz-form-item>\n      } @else {\n        <nz-select\n          class=\"full-width\"\n          nzShowSearch\n          nzAllowClear\n          [nzSize]=\"size\"\n          [nzPlaceHolder]=\"placeHolder\"\n          [nzMode]=\"'multiple'\"\n          [nzMaxMultipleCount]=\"lstItem.length\"\n          [nzMaxTagCount]=\"maxTagCount\"\n          [nzDropdownMatchSelectWidth]=\"false\"\n          [ngModel]=\"_ngModel\"\n          [disabled]=\"disabled\"\n          (ngModelChange)=\"onSelectChange($event)\"\n          (nzFocus)=\"onFocus.emit()\"\n        >\n          @if (showSelectAll) {\n            <nz-option [nzLabel]=\"'-- Ch\u1ECDn t\u1EA5t c\u1EA3 --'\" [nzValue]=\"'__all__'\"></nz-option>\n          }\n          @for (item of lstItem; track $index) {\n            <nz-option [nzLabel]=\"getDisplay(item)\" [nzValue]=\"valueField ? item[valueField] : item\"></nz-option>\n          }\n        </nz-select>\n      }\n    }\n  }\n</div>\n", styles: [":host ::ng-deep .ant-select-selector{height:var(--custom-select-height)!important;line-height:var(--custom-select-height)!important}\n"] }]
+        }], propDecorators: { layOutType: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], placeHolder: [{
+                type: Input
+            }], labelAlign: [{
+                type: Input
+            }], labelSpan: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], noBottom: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }], showSelectAll: [{
+                type: Input
+            }], maxTagCount: [{
+                type: Input
+            }], inputWidth: [{
+                type: Input
+            }], inputHeight: [{
+                type: Input
+            }], borderBottomOnly: [{
+                type: Input
+            }], displayInline: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], lstItem: [{
+                type: Input
+            }], displayField: [{
+                type: Input
+            }], displayFields: [{
+                type: Input
+            }], valueField: [{
+                type: Input
+            }], formData: [{
+                type: Input
+            }], controlName: [{
+                type: Input
+            }], _ngModel: [{
+                type: Input
+            }], _ngModelChange: [{
+                type: Output
+            }], onFocus: [{
+                type: Output
+            }], cssHeight: [{
+                type: HostBinding,
+                args: ['style.--custom-select-height']
+            }] } });
+
+class ExtendTextArea {
+    layOutType = 'horizontal';
+    label = '';
+    placeHolder = '';
+    labelAlign = 'left';
+    labelSpan = 8;
+    inputSpan = 16;
+    disabled = false;
+    required = false;
+    noBottom = false;
+    selectModeType = 'default';
+    inputClass = '';
+    minRows = 3;
+    maxRows = 5;
+    autoSize = false;
+    lstItem = [];
+    displayField = '';
+    valueField = '';
+    formData;
+    controlName;
+    _ngModel = null;
+    _ngModelChange = new EventEmitter();
+    ngAfterViewInit() { }
+    onChange() {
+        this._ngModelChange.emit(this._ngModel);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ExtendTextArea, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: ExtendTextArea, isStandalone: true, selector: "extend-textarea", inputs: { layOutType: "layOutType", label: "label", placeHolder: "placeHolder", labelAlign: "labelAlign", labelSpan: "labelSpan", inputSpan: "inputSpan", disabled: "disabled", required: "required", noBottom: "noBottom", selectModeType: "selectModeType", inputClass: "inputClass", minRows: "minRows", maxRows: "maxRows", autoSize: "autoSize", lstItem: "lstItem", displayField: "displayField", valueField: "valueField", formData: "formData", controlName: "controlName", _ngModel: "_ngModel" }, outputs: { _ngModelChange: "_ngModelChange" }, ngImport: i0, template: "@if (controlName) {\n  <div [formGroup]=\"formData\">\n    <nz-form-item>\n      <nz-form-label\n        [nzSpan]=\"layOutType == 'horizontal' ? labelSpan : null\"\n        [nzLabelAlign]=\"labelAlign\"\n        [nzRequired]=\"required\"\n        [nzFor]=\"controlName\"\n        nzNoColon\n        nzLabelWrap\n      >\n        {{ label }}\n      </nz-form-label>\n      <nz-form-control\n        [ngClass]=\"{ 'full-width': layOutType == 'vertical' }\"\n        [nzErrorTip]=\"'REQUIRED_FIELD' | translate\"\n      >\n        <textarea\n          nz-input\n          [nzAutosize]=\"autoSize || { minRows: minRows, maxRows: maxRows }\"\n          [formControlName]=\"controlName\"\n          [ngClass]=\"inputClass\"\n        ></textarea>\n      </nz-form-control>\n    </nz-form-item>\n  </div>\n} @else {\n  @if (label) {\n    <nz-form-item>\n      <nz-form-label\n        [nzSpan]=\"layOutType == 'horizontal' ? labelSpan : null\"\n        [nzLabelAlign]=\"labelAlign\"\n        [nzRequired]=\"required\"\n        [nzFor]=\"controlName\"\n        nzNoColon\n        nzLabelWrap\n      >\n        {{ label }}\n      </nz-form-label>\n      <nz-form-control\n        [ngClass]=\"{ 'full-width': layOutType == 'vertical' }\"\n        [nzErrorTip]=\"'REQUIRED_FIELD' | translate\"\n      >\n        <textarea\n          nz-input\n          [nzAutosize]=\"autoSize || { minRows: minRows, maxRows: maxRows }\"\n          [(ngModel)]=\"_ngModel\"\n          (ngModelChange)=\"onChange()\"\n          [disabled]=\"disabled\"\n          [ngClass]=\"inputClass\"\n        ></textarea>\n      </nz-form-control>\n    </nz-form-item>\n  } @else {\n    <textarea\n      nz-input\n      [nzAutosize]=\"autoSize || { minRows: minRows, maxRows: maxRows }\"\n      [(ngModel)]=\"_ngModel\"\n      (ngModelChange)=\"onChange()\"\n      [disabled]=\"disabled\"\n      [ngClass]=\"inputClass\"\n    ></textarea>\n  }\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: NzFormModule }, { kind: "directive", type: i4.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i4.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "component", type: i5.NzFormItemComponent, selector: "nz-form-item", exportAs: ["nzFormItem"] }, { kind: "component", type: i5.NzFormLabelComponent, selector: "nz-form-label", inputs: ["nzFor", "nzRequired", "nzNoColon", "nzTooltipTitle", "nzTooltipIcon", "nzLabelAlign", "nzLabelWrap"], exportAs: ["nzFormLabel"] }, { kind: "component", type: i5.NzFormControlComponent, selector: "nz-form-control", inputs: ["nzSuccessTip", "nzWarningTip", "nzErrorTip", "nzValidatingTip", "nzExtra", "nzAutoTips", "nzDisableAutoTips", "nzHasFeedback", "nzValidateStatus"], exportAs: ["nzFormControl"] }, { kind: "ngmodule", type: NzDatePickerModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i6$1.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "directive", type: i6$1.NzAutosizeDirective, selector: "textarea[nzAutosize]", inputs: ["nzAutosize"], exportAs: ["nzAutosize"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ExtendTextArea, decorators: [{
+            type: Component,
+            args: [{ selector: 'extend-textarea', imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        NzFormModule,
+                        NzDatePickerModule,
+                        TranslateModule,
+                        NzInputModule,
+                    ], template: "@if (controlName) {\n  <div [formGroup]=\"formData\">\n    <nz-form-item>\n      <nz-form-label\n        [nzSpan]=\"layOutType == 'horizontal' ? labelSpan : null\"\n        [nzLabelAlign]=\"labelAlign\"\n        [nzRequired]=\"required\"\n        [nzFor]=\"controlName\"\n        nzNoColon\n        nzLabelWrap\n      >\n        {{ label }}\n      </nz-form-label>\n      <nz-form-control\n        [ngClass]=\"{ 'full-width': layOutType == 'vertical' }\"\n        [nzErrorTip]=\"'REQUIRED_FIELD' | translate\"\n      >\n        <textarea\n          nz-input\n          [nzAutosize]=\"autoSize || { minRows: minRows, maxRows: maxRows }\"\n          [formControlName]=\"controlName\"\n          [ngClass]=\"inputClass\"\n        ></textarea>\n      </nz-form-control>\n    </nz-form-item>\n  </div>\n} @else {\n  @if (label) {\n    <nz-form-item>\n      <nz-form-label\n        [nzSpan]=\"layOutType == 'horizontal' ? labelSpan : null\"\n        [nzLabelAlign]=\"labelAlign\"\n        [nzRequired]=\"required\"\n        [nzFor]=\"controlName\"\n        nzNoColon\n        nzLabelWrap\n      >\n        {{ label }}\n      </nz-form-label>\n      <nz-form-control\n        [ngClass]=\"{ 'full-width': layOutType == 'vertical' }\"\n        [nzErrorTip]=\"'REQUIRED_FIELD' | translate\"\n      >\n        <textarea\n          nz-input\n          [nzAutosize]=\"autoSize || { minRows: minRows, maxRows: maxRows }\"\n          [(ngModel)]=\"_ngModel\"\n          (ngModelChange)=\"onChange()\"\n          [disabled]=\"disabled\"\n          [ngClass]=\"inputClass\"\n        ></textarea>\n      </nz-form-control>\n    </nz-form-item>\n  } @else {\n    <textarea\n      nz-input\n      [nzAutosize]=\"autoSize || { minRows: minRows, maxRows: maxRows }\"\n      [(ngModel)]=\"_ngModel\"\n      (ngModelChange)=\"onChange()\"\n      [disabled]=\"disabled\"\n      [ngClass]=\"inputClass\"\n    ></textarea>\n  }\n}\n" }]
+        }], propDecorators: { layOutType: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], placeHolder: [{
+                type: Input
+            }], labelAlign: [{
+                type: Input
+            }], labelSpan: [{
+                type: Input
+            }], inputSpan: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], noBottom: [{
+                type: Input
+            }], selectModeType: [{
+                type: Input
+            }], inputClass: [{
+                type: Input
+            }], minRows: [{
+                type: Input
+            }], maxRows: [{
+                type: Input
+            }], autoSize: [{
+                type: Input
+            }], lstItem: [{
+                type: Input
+            }], displayField: [{
+                type: Input
+            }], valueField: [{
+                type: Input
+            }], formData: [{
+                type: Input
+            }], controlName: [{
+                type: Input
+            }], _ngModel: [{
+                type: Input
+            }], _ngModelChange: [{
+                type: Output
+            }] } });
+
+class NoPermission {
+    router;
+    deniedUrl = null;
+    message = null;
+    constructor(router) {
+        this.router = router;
+    }
+    ngOnInit() {
+        const state = history.state;
+        this.deniedUrl = state?.deniedUrl || null;
+        this.message = state?.message || null;
+        console.log('Lấy từ history.state:', state);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: NoPermission, deps: [{ token: i1$3.Router }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: NoPermission, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+    <h2>Không có quyền truy cập</h2>
+    <p *ngIf="message">{{ message }}</p>
+    <p *ngIf="deniedUrl">
+      Bạn đã cố gắng truy cập: <strong>{{ deniedUrl }}</strong>
+    </p>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: NoPermission, decorators: [{
+            type: Component,
+            args: [{
+                    template: `
+    <h2>Không có quyền truy cập</h2>
+    <p *ngIf="message">{{ message }}</p>
+    <p *ngIf="deniedUrl">
+      Bạn đã cố gắng truy cập: <strong>{{ deniedUrl }}</strong>
+    </p>
+  `,
+                    imports: [CommonModule],
+                }]
+        }], ctorParameters: () => [{ type: i1$3.Router }] });
+
+class PdfViewerComponent {
+    // data = inject(NZ_MODAL_DATA);
+    dataType = null;
+    pdfData;
+    ngOnInit() {
+        // this.dataType = this.data.dataType;
+        // this.pdfData = this.data.pdfData;
+        // this.showPrintButton = this.data.showPrintButton;
+    }
+    print() {
+        if (this.dataType == 'base64') {
+            const byteCharacters = atob(this.pdfData);
+            const byteNumbers = new Array(byteCharacters.length).fill(0).map((_, i) => byteCharacters.charCodeAt(i));
+            const byteArray = new Uint8Array(byteNumbers);
+            const blob = new Blob([byteArray], { type: 'application/pdf' });
+            const blobUrl = window.URL.createObjectURL(blob);
+            const iframe = document.createElement('iframe');
+            iframe.style.display = 'none';
+            iframe.src = blobUrl;
+            document.body.appendChild(iframe);
+            iframe.contentWindow?.print();
+        }
+        else if (this.dataType == 'bytes') {
+            const blob = new Blob([this.pdfData], { type: 'application/pdf' });
+            const blobUrl = window.URL.createObjectURL(blob);
+            const iframe = document.createElement('iframe');
+            iframe.style.display = 'none';
+            iframe.src = blobUrl;
+            document.body.appendChild(iframe);
+            iframe.contentWindow?.print();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: PdfViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: PdfViewerComponent, isStandalone: true, selector: "pdf-viewer", inputs: { dataType: "dataType", pdfData: "pdfData" }, ngImport: i0, template: "@if (dataType == \"base64\") {\n  <ngx-extended-pdf-viewer\n    [zoom]=\"100\"\n    [base64Src]=\"this.pdfData\"\n    [showPrintButton]=\"false\"\n    [showOpenFileButton]=\"false\"\n    [showDownloadButton]=\"false\"\n  ></ngx-extended-pdf-viewer>\n}\n\n@if (dataType == \"bytes\") {\n  <ngx-extended-pdf-viewer\n    [zoom]=\"100\"\n    [src]=\"this.pdfData\"\n    [showPrintButton]=\"false\"\n    [showOpenFileButton]=\"false\"\n    [showDownloadButton]=\"false\"\n  ></ngx-extended-pdf-viewer>\n}\n", dependencies: [{ kind: "ngmodule", type: NgxExtendedPdfViewerModule }, { kind: "component", type: i1$4.NgxExtendedPdfViewerComponent, selector: "ngx-extended-pdf-viewer", inputs: ["customFindbarInputArea", "customToolbar", "customFindbar", "customFindbarButtons", "customPdfViewer", "customSecondaryToolbar", "customSidebar", "customThumbnail", "customFreeFloatingBar", "showFreeFloatingBar", "enableDragAndDrop", "forceUsingLegacyES5", "formData", "disableForms", "pageViewMode", "scrollMode", "authorization", "httpHeaders", "contextMenuAllowed", "enablePrint", "enablePrintAutoRotate", "forceFullReloadOfJavaScriptCode", "showTextEditor", "showStampEditor", "showDrawEditor", "showHighlightEditor", "logLevel", "relativeCoordsOptions", "minifiedJSLibraries", "printResolution", "rotation", "src", "base64Src", "minHeight", "height", "backgroundColor", "filenameForDownload", "ignoreKeyboard", "ignoreKeys", "acceptKeys", "imageResourcesPath", "localeFolderPath", "language", "listenToURL", "nameddest", "password", "replaceBrowserPrint", "useInlineScripts", "showUnverifiedSignatures", "startTabindex", "showSidebarButton", "sidebarVisible", "activeSidebarView", "findbarVisible", "propertiesDialogVisible", "showFindButton", "showFindHighlightAll", "showFindMatchCase", "showFindMultiple", "showFindRegexp", "showFindEntireWord", "showFindMatchDiacritics", "showFindResultsCount", "showFindMessages", "showPagingButtons", "showFirstAndLastPageButtons", "showPreviousAndNextPageButtons", "showPageNumber", "showPageLabel", "showZoomButtons", "showZoomDropdown", "showPresentationModeButton", "showOpenFileButton", "showPrintButton", "showDownloadButton", "theme", "showToolbar", "showSecondaryToolbarButton", "showSinglePageModeButton", "showVerticalScrollButton", "showHorizontalScrollButton", "showWrappedScrollButton", "showInfiniteScrollButton", "showBookModeButton", "showRotateButton", "showRotateCwButton", "showRotateCcwButton", "handTool", "showHandToolButton", "showSpreadButton", "showPropertiesButton", "showBorders", "spread", "showScrollingButtons", "page", "pageLabel", "textLayer", "zoom", "zoomLevels", "maxZoom", "minZoom", "mobileFriendlyZoom"], outputs: ["annotationEditorEvent", "formDataChange", "pageViewModeChange", "progress", "srcChange", "scrollModeChange", "afterPrint", "beforePrint", "currentZoomFactor", "rotationChange", "annotationLayerRendered", "annotationEditorLayerRendered", "xfaLayerRendered", "outlineLoaded", "attachmentsloaded", "layersloaded", "sidebarVisibleChange", "activeSidebarViewChange", "findbarVisibleChange", "propertiesDialogVisibleChange", "handToolChange", "spreadChange", "thumbnailDrawn", "pageChange", "pageLabelChange", "pagesLoaded", "pageRender", "pageRendered", "pdfDownloaded", "pdfLoaded", "pdfLoadingStarts", "pdfLoadingFailed", "textLayerRendered", "annotationEditorModeChanged", "updateFindMatchesCount", "updateFindState", "zoomChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: PdfViewerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pdf-viewer', imports: [NgxExtendedPdfViewerModule], template: "@if (dataType == \"base64\") {\n  <ngx-extended-pdf-viewer\n    [zoom]=\"100\"\n    [base64Src]=\"this.pdfData\"\n    [showPrintButton]=\"false\"\n    [showOpenFileButton]=\"false\"\n    [showDownloadButton]=\"false\"\n  ></ngx-extended-pdf-viewer>\n}\n\n@if (dataType == \"bytes\") {\n  <ngx-extended-pdf-viewer\n    [zoom]=\"100\"\n    [src]=\"this.pdfData\"\n    [showPrintButton]=\"false\"\n    [showOpenFileButton]=\"false\"\n    [showDownloadButton]=\"false\"\n  ></ngx-extended-pdf-viewer>\n}\n" }]
+        }], propDecorators: { dataType: [{
+                type: Input
+            }], pdfData: [{
+                type: Input
+            }] } });
+
+// global-spinner.component.ts
+class GlobalSpinnerComponent {
+    loadingService;
+    visible = false;
+    sub;
+    constructor(loadingService) {
+        this.loadingService = loadingService;
+    }
+    ngOnInit() {
+        this.sub = this.loadingService.loading$.subscribe((v) => {
+            this.visible = v;
+        });
+    }
+    ngOnDestroy() {
+        this.sub.unsubscribe();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: GlobalSpinnerComponent, deps: [{ token: LoadingService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: GlobalSpinnerComponent, isStandalone: true, selector: "app-global-spinner", ngImport: i0, template: `
+    @if (visible) {
+      <div class="global-spinner" [@fadeInOut]>
+        <nz-spin [nzSpinning]="true" style="position: relative; bottom: 50px;"></nz-spin>
+      </div>
+    }
+  `, isInline: true, styles: [".global-spinner{position:fixed;z-index:1200;top:50px;left:0;width:100vw;height:100vh;background-color:#fffc;display:flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: NzSpinModule }, { kind: "component", type: i2$3.NzSpinComponent, selector: "nz-spin", inputs: ["nzIndicator", "nzSize", "nzTip", "nzDelay", "nzSimple", "nzSpinning"], exportAs: ["nzSpin"] }], animations: [
+            trigger('fadeInOut', [
+                // transition(':enter', [style({ opacity: 0 }), animate('250ms ease-in', style({ opacity: 1 }))]),
+                transition(':leave', [animate('250ms ease-out', style({ opacity: 0 }))]),
+            ]),
+        ] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: GlobalSpinnerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-global-spinner', template: `
+    @if (visible) {
+      <div class="global-spinner" [@fadeInOut]>
+        <nz-spin [nzSpinning]="true" style="position: relative; bottom: 50px;"></nz-spin>
+      </div>
+    }
+  `, animations: [
+                        trigger('fadeInOut', [
+                            // transition(':enter', [style({ opacity: 0 }), animate('250ms ease-in', style({ opacity: 1 }))]),
+                            transition(':leave', [animate('250ms ease-out', style({ opacity: 0 }))]),
+                        ]),
+                    ], imports: [NzSpinModule], styles: [".global-spinner{position:fixed;z-index:1200;top:50px;left:0;width:100vw;height:100vh;background-color:#fffc;display:flex;align-items:center;justify-content:center}\n"] }]
+        }], ctorParameters: () => [{ type: LoadingService }] });
+
+class Height {
+    height = 0;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: Height, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: Height, isStandalone: true, selector: "height", inputs: { height: "height" }, ngImport: i0, template: `<div [ngStyle]="{ height: height + 'px' }"></div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: Height, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'height',
+                    template: `<div [ngStyle]="{ height: height + 'px' }"></div>`,
+                    imports: [CommonModule],
+                }]
+        }], propDecorators: { height: [{
+                type: Input
+            }] } });
+
+class Width {
+    width = 0;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: Width, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: Width, isStandalone: true, selector: "width", inputs: { width: "width" }, ngImport: i0, template: `<div style="display: inline" [ngStyle]="{ 'padding-left': width + 'px' }"></div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: Width, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'width',
+                    template: `<div style="display: inline" [ngStyle]="{ 'padding-left': width + 'px' }"></div>`,
+                    imports: [CommonModule],
+                }]
+        }], propDecorators: { width: [{
+                type: Input
+            }] } });
+
+class Box {
+    display = '';
+    width = 0;
+    height = 0;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: Box, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: Box, isStandalone: true, selector: "box", inputs: { display: "display", width: "width", height: "height" }, ngImport: i0, template: `<div
+    [ngStyle]="{
+      height: height + 'px',
+      'padding-left': width + 'px',
+      display: display ? display : width && height ? 'block' : height ? 'block' : width ? 'inline' : display,
+    }"
+  ></div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: Box, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'box',
+                    template: `<div
+    [ngStyle]="{
+      height: height + 'px',
+      'padding-left': width + 'px',
+      display: display ? display : width && height ? 'block' : height ? 'block' : width ? 'inline' : display,
+    }"
+  ></div>`,
+                    imports: [CommonModule],
+                }]
+        }], propDecorators: { display: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }] } });
+
+class AutoFocusDirective {
+    el;
+    renderer;
+    appAutoFocus = false;
+    constructor(el, renderer) {
+        this.el = el;
+        this.renderer = renderer;
+    }
+    ngOnChanges(changes) {
+        if (changes['appAutoFocus'] && this.appAutoFocus) {
+            setTimeout(() => this.el.nativeElement.focus(), 0);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AutoFocusDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.7", type: AutoFocusDirective, isStandalone: true, selector: "[appAutoFocus]", inputs: { appAutoFocus: "appAutoFocus" }, usesOnChanges: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AutoFocusDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[appAutoFocus]'
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { appAutoFocus: [{
+                type: Input
+            }] } });
+
+class NullIfEmptyDirective {
+    el;
+    ngControl;
+    constructor(el, ngControl) {
+        this.el = el;
+        this.ngControl = ngControl;
+    }
+    onInput() {
+        // const value = this.el.nativeElement.value;
+        // const newValue = value.trim() === '' ? null : value;
+        // this.ngControl?.control?.setValue(newValue, { emitEvent: false });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: NullIfEmptyDirective, deps: [{ token: i0.ElementRef }, { token: i2$2.NgControl, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.7", type: NullIfEmptyDirective, isStandalone: true, selector: "input", host: { listeners: { "input": "onInput()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: NullIfEmptyDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input',
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i2$2.NgControl, decorators: [{
+                    type: Optional
+                }] }], propDecorators: { onInput: [{
+                type: HostListener,
+                args: ['input']
+            }] } });
+
+class NumberOnlyDirective {
+    el;
+    renderer;
+    onChange = (value) => { };
+    onTouched = () => { };
+    constructor(el, renderer) {
+        this.el = el;
+        this.renderer = renderer;
+    }
+    onInput(value) {
+        const formattedValue = this.formatValue(value);
+        this.renderer.setProperty(this.el.nativeElement, 'value', formattedValue);
+        if (this.onChange) {
+            this.onChange(formattedValue);
+        }
+    }
+    writeValue(value) {
+        const formattedValue = value ? this.formatValue(value) : '';
+        this.renderer.setProperty(this.el.nativeElement, 'value', formattedValue);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.renderer.setProperty(this.el.nativeElement, 'disabled', isDisabled);
+    }
+    formatValue(value) {
+        return value.replace(/\D/g, '');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: NumberOnlyDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.7", type: NumberOnlyDirective, isStandalone: true, selector: "[numberOnly]", host: { listeners: { "input": "onInput($event.target.value)" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => NumberOnlyDirective),
+                multi: true,
+            },
+        ], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: NumberOnlyDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[numberOnly]',
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => NumberOnlyDirective),
+                            multi: true,
+                        },
+                    ],
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { onInput: [{
+                type: HostListener,
+                args: ['input', ['$event.target.value']]
+            }] } });
+
+class UpperCaseFirsLetterEachWordDirective {
+    el;
+    renderer;
+    inputElement = null;
+    constructor(el, renderer) {
+        this.el = el;
+        this.renderer = renderer;
+    }
+    ngAfterViewInit() {
+        setTimeout(() => {
+            // Nếu gắn vào <input>, thì chính nó là input
+            if (this.el.nativeElement.tagName.toLowerCase() === 'input') {
+                this.inputElement = this.el.nativeElement;
+            }
+            else {
+                // Nếu không, tìm input con bên trong
+                this.inputElement = this.el.nativeElement.querySelector('input');
+            }
+            if (this.inputElement) {
+                this.renderer.listen(this.inputElement, 'input', (event) => {
+                    const formatted = this.formatValue(event.target.value);
+                    this.renderer.setProperty(this.inputElement, 'value', formatted);
+                    this.onChange(formatted);
+                });
+            }
+            if (this.pendingValue !== null) {
+                this.renderer.setProperty(this.inputElement, 'value', this.pendingValue);
+                this.pendingValue = null;
+            }
+        }, 0);
+    }
+    pendingValue = null;
+    writeValue(value) {
+        const formattedValue = value ? this.formatValue(value) : '';
+        if (this.inputElement) {
+            this.renderer.setProperty(this.inputElement, 'value', formattedValue);
+        }
+        else {
+            this.pendingValue = formattedValue;
+        }
+    }
+    onChange = (_) => { };
+    onTouched = () => { };
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        if (this.inputElement) {
+            this.renderer.setProperty(this.inputElement, 'disabled', isDisabled);
+        }
+    }
+    formatValue(value) {
+        return value
+            .split(' ')
+            .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+            .join(' ');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: UpperCaseFirsLetterEachWordDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.7", type: UpperCaseFirsLetterEachWordDirective, isStandalone: true, selector: "[uppercaseFirstLetterEachWord]", providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => UpperCaseFirsLetterEachWordDirective),
+                multi: true,
+            },
+        ], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: UpperCaseFirsLetterEachWordDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[uppercaseFirstLetterEachWord]',
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => UpperCaseFirsLetterEachWordDirective),
+                            multi: true,
+                        },
+                    ],
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
+
+class UppercaseFirstLetterDirective {
+    el;
+    renderer;
+    onChange = (value) => { };
+    onTouched = () => { };
+    constructor(el, renderer) {
+        this.el = el;
+        this.renderer = renderer;
+    }
+    onInput(value) {
+        const formattedValue = this.formatValue(value);
+        this.renderer.setProperty(this.el.nativeElement, 'value', formattedValue);
+        if (this.onChange) {
+            this.onChange(formattedValue);
+        }
+    }
+    writeValue(value) {
+        const formattedValue = value ? this.formatValue(value) : '';
+        this.renderer.setProperty(this.el.nativeElement, 'value', formattedValue);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.renderer.setProperty(this.el.nativeElement, 'disabled', isDisabled);
+    }
+    formatValue(value) {
+        const ls = value.split('');
+        ls[0] = ls[0].toUpperCase();
+        return ls.join('');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: UppercaseFirstLetterDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.7", type: UppercaseFirstLetterDirective, isStandalone: true, selector: "[uppercaseFirstLetter]", host: { listeners: { "input": "onInput($event.target.value)" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => UppercaseFirstLetterDirective),
+                multi: true,
+            },
+        ], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: UppercaseFirstLetterDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[uppercaseFirstLetter]',
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => UppercaseFirstLetterDirective),
+                            multi: true,
+                        },
+                    ],
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { onInput: [{
+                type: HostListener,
+                args: ['input', ['$event.target.value']]
+            }] } });
+
+class UppercaseDirective {
+    el;
+    renderer;
+    onChange = (value) => { };
+    onTouched = () => { };
+    constructor(el, renderer) {
+        this.el = el;
+        this.renderer = renderer;
+    }
+    onInput(value) {
+        const formattedValue = this.formatValue(value);
+        this.renderer.setProperty(this.el.nativeElement, 'value', formattedValue);
+        if (this.onChange) {
+            this.onChange(formattedValue);
+        }
+    }
+    writeValue(value) {
+        const formattedValue = value ? this.formatValue(value) : '';
+        this.renderer.setProperty(this.el.nativeElement, 'value', formattedValue);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.renderer.setProperty(this.el.nativeElement, 'disabled', isDisabled);
+    }
+    formatValue(value) {
+        return value.toUpperCase();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: UppercaseDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.7", type: UppercaseDirective, isStandalone: true, selector: "[uppercase]", host: { listeners: { "input": "onInput($event.target.value)" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => UppercaseDirective),
+                multi: true,
+            },
+        ], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: UppercaseDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[uppercase]',
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => UppercaseDirective),
+                            multi: true,
+                        },
+                    ],
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { onInput: [{
+                type: HostListener,
+                args: ['input', ['$event.target.value']]
+            }] } });
+
+class LimitWordsPipe {
+    transform(value, limit = 3) {
+        if (!value)
+            return '';
+        const words = value.split(' ');
+        return words.length <= limit ? value : words.slice(0, limit).join(' ') + '...';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: LimitWordsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.1.7", ngImport: i0, type: LimitWordsPipe, isStandalone: true, name: "limitWords" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: LimitWordsPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'limitWords',
+                }]
+        }] });
+
+class DownloadHelper {
+    static downloadFileBlop(response) {
+        const contentDisposition = response.headers.get('Content-Disposition');
+        let filename = 'downloaded-file';
+        if (contentDisposition) {
+            const filenameStarMatch = contentDisposition.match(/filename\*\=UTF-8''(.+?)(;|$)/);
+            const filenameMatch = contentDisposition.match(/filename="?([^"]+)"?/);
+            if (filenameStarMatch?.[1]) {
+                filename = decodeURIComponent(filenameStarMatch[1]);
+            }
+            else if (filenameMatch?.[1]) {
+                filename = filenameMatch[1];
+            }
+        }
+        const blob = new Blob([response.body], { type: 'application/octet-stream' });
+        if (blob.size <= 4) {
+            console.log(blob.size);
+            alert('Không có dữ liệu file');
+            return;
+        }
+        const link = document.createElement('a');
+        link.href = window.URL.createObjectURL(blob);
+        link.download = filename;
+        link.click();
+    }
+    static downloadFile(data, filename) {
+        const contentType = 'application/octet-stream';
+        const blob = new Blob([data], { type: contentType });
+        if (blob.size <= 4) {
+            console.log(blob.size);
+            alert('Không có dữ liệu file');
+            return;
+        }
+        const link = document.createElement('a');
+        link.href = window.URL.createObjectURL(blob);
+        link.download = filename;
+        link.click();
+    }
+    static downloadFileBase64(base64Data, fileName) {
+        // Chuyển đổi Base64 thành dữ liệu nhị phân
+        const binaryString = window.atob(base64Data);
+        const binaryLen = binaryString.length;
+        const bytes = new Uint8Array(binaryLen);
+        for (let i = 0; i < binaryLen; i++) {
+            bytes[i] = binaryString.charCodeAt(i);
+        }
+        // Tạo một Blob từ dữ liệu nhị phân
+        const blob = new Blob([bytes], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' });
+        if (blob.size <= 4) {
+            console.log(blob.size);
+            alert('Không có dữ liệu file');
+            return;
+        }
+        // Tạo một liên kết tạm thời để tải tệp về
+        const link = document.createElement('a');
+        link.href = window.URL.createObjectURL(blob);
+        link.download = fileName;
+        // Kích hoạt việc tải tệp
+        document.body.appendChild(link);
+        link.click();
+        // Xóa liên kết sau khi tải
+        document.body.removeChild(link);
+    }
+}
+
+class XLSXHelper {
+    static readExcelFileToObjects(file, columnCount, readAllSheets) {
+        return new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                const data = new Uint8Array(e.target?.result);
+                const workbook = XLSX.read(data, { type: 'array' });
+                const sheetNames = workbook.SheetNames;
+                // Trả về nhiều sheet
+                if (readAllSheets) {
+                    const sheetsdata = {};
+                    for (const sheetName of sheetNames) {
+                        const worksheet = workbook.Sheets[sheetName];
+                        const rawData = XLSX.utils.sheet_to_json(worksheet, {
+                            header: 1,
+                            defval: '',
+                        });
+                        let rows = rawData.slice(1);
+                        while (rows.length > 0 && rows[rows.length - 1].every((cell) => cell === '' || cell == null)) {
+                            rows.pop();
+                        }
+                        const result = rows.map((row, index) => {
+                            const obj = {};
+                            const limit = columnCount ?? row.length;
+                            for (let i = 0; i < limit; i++) {
+                                obj[`col${i + 1}`] = row[i] ?? '';
+                            }
+                            obj.rowIndex = index + 2;
+                            return obj;
+                        });
+                        sheetsdata[sheetName] = result;
+                    }
+                    postMessage({
+                        sheets: sheetNames,
+                        sheetsdata,
+                    });
+                    resolve({
+                        sheets: sheetNames,
+                        sheetsdata,
+                    });
+                }
+                // Trả về sheet đầu tiên
+                else {
+                    const sheetName = sheetNames[0];
+                    const worksheet = workbook.Sheets[sheetName];
+                    const rawData = XLSX.utils.sheet_to_json(worksheet, {
+                        header: 1,
+                        defval: '',
+                    });
+                    let rows = rawData.slice(1);
+                    while (rows.length > 0 && rows[rows.length - 1].every((cell) => cell === '' || cell == null)) {
+                        rows.pop();
+                    }
+                    const result = rows.map((row, index) => {
+                        const obj = {};
+                        const limit = columnCount ?? row.length;
+                        for (let i = 0; i < limit; i++) {
+                            obj[`col${i + 1}`] = row[i] ?? '';
+                        }
+                        obj.rowIndex = index + 2;
+                        return obj;
+                    });
+                    resolve(result);
+                }
+            };
+            reader.onerror = (error) => reject(error);
+            reader.readAsArrayBuffer(file);
+        });
+    }
+}
+
+class PagingModel {
+    PageIndex = 0;
+    PageSize = AppGlobals.pageSizeOptions[1];
+}
+class GridFilter extends PagingModel {
+    Keyword = null;
+    OrderOption = null;
+}
+class OrderOption {
+    FieldName = null;
+    Direction = null;
+}
+class PagingData {
+    TypeConstructor;
+    LstHeader = [];
+    LstItem = [];
+    TotalCount = 0;
+    constructor(obj, TypeConstructor) {
+        this.TypeConstructor = TypeConstructor;
+        obj = obj ?? {};
+        this.LstHeader = obj.LstHeader || [];
+        this.TotalCount = obj.TotalCount || 0;
+        if (Array.isArray(obj.LstItem) && this.TypeConstructor) {
+            this.LstItem = obj.LstItem.map((item) => new this.TypeConstructor(item));
+        }
+        else {
+            this.LstItem = obj.LstItem || [];
+        }
+    }
+}
+class TableHeader {
+    Code = '';
+    Name = '';
+    Class = '';
+    Type = '';
+    Width = '';
+    MinWidth = '';
+}
+class CheckModel {
+    ConfirmMessage = '';
+    ConfirmContent = '';
+    ErrorMessage = '';
+    ErrorContent = '';
+}
+
+class RouteMonitorService {
+    router;
+    authService;
+    notiService;
+    constructor(router, authService, notiService) {
+        this.router = router;
+        this.authService = authService;
+        this.notiService = notiService;
+        this.router.events.subscribe(async (event) => {
+            if (event instanceof NavigationEnd) {
+                const url = event.urlAfterRedirects;
+                if (url.startsWith('/') || url.startsWith('/login') || url == '/no-permission') {
+                    return;
+                }
+                const hasMenu = await this.authService.checkUserMenu(url);
+                if (!hasMenu) {
+                    this.notiService.error(`Không có quyền truy cập: ${url}`);
+                    this.router.navigate(['/no-permission'], {
+                        state: {
+                            deniedUrl: url,
+                            message: `Bạn không có quyền truy cập vào đường dẫn ${url}`,
+                        },
+                    });
+                }
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RouteMonitorService, deps: [{ token: i1$3.Router }, { token: AuthService }, { token: NotiService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RouteMonitorService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: RouteMonitorService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: i1$3.Router }, { type: AuthService }, { type: NotiService }] });
+
+class ThemeService {
+    setHighContrast(enabled) {
+        document.body.classList.toggle('high-contrast', enabled);
+        localStorage.setItem('high-contrast', enabled ? '1' : '0');
+    }
+    isHighContrast() {
+        return localStorage.getItem('high-contrast') == '1';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ThemeService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: ThemeService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class VscService extends HTTPService {
+    // private readonly currentVersion = '{{POST_BUILD_ENTERS_VERSION_HERE}}';
+    static feClientVersion = '{{POST_BUILD_ENTERS_VERSION_HERE}}';
+    static feServerVersion;
+    static beVersion;
+    static dbVersion;
+    static jsReportTemplateVersion;
+    modal = inject(NzModalService);
+    notiService = inject(NotiService);
+    interval;
+    isShowingPopup = false;
+    // 10 phút
+    initVersionCheck(frequency = 1000 * 60 * 10) {
+        this.interval = setInterval(() => {
+            if (!this.isShowingPopup) {
+                this.checkVersion();
+            }
+        }, frequency);
+        this.checkVersion();
+    }
+    checkVersion(all = false) {
+        console.log('Check version');
+        this.checkFrontendVersion();
+        if (all) {
+            this.checkBackendVersion();
+            // this.checkDatabaseVersion();
+            // this.checkJSReportTemplateVersion();
+        }
+    }
+    checkFrontendVersion() {
+        if (this.isShowingPopup) {
+            return;
+        }
+        console.log('Check version');
+        console.log('current version: ', VscService.feClientVersion);
+        this.get(AppGlobals.versionCheck + '?t=' + new Date().getTime()).then(async (response) => {
+            VscService.feServerVersion = response.version;
+            console.log('version check: ', VscService.feServerVersion);
+            const hashChanged = this.hasVersionChanged(VscService.feClientVersion, VscService.feServerVersion);
+            if (hashChanged) {
+                // window.location.reload();
+                // window.location.href = window.location.href;
+                this.isShowingPopup = true;
+                // await this.notiService.warning('Có phiên bản mới', 'Vui lòng ấn "Ctrl + F5" để cập nhật');
+                // this.isShowingPopup = false;
+                const modalRef = this.modal.warning({
+                    nzTitle: 'Có phiên bản mới',
+                    nzContent: 'Vui lòng ấn "Ctrl + F5" để cập nhật',
+                });
+            }
+        }, (err) => {
+            console.error(err, 'Could not get version');
+        });
+    }
+    hasVersionChanged(currentVersion, newVersion) {
+        if (!currentVersion || newVersion === currentVersion) {
+            return false;
+        }
+        return currentVersion !== newVersion;
+    }
+    clearInterval() {
+        if (this.interval) {
+            clearInterval(this.interval);
+        }
+    }
+    checkBackendVersion() {
+        this.httpClient.get(AppGlobals.apiEndpoint + '/version').subscribe(async (response) => {
+            VscService.beVersion = response;
+        }, (err) => {
+            console.error(err, 'Could not get backend version');
+            VscService.beVersion = 'Could not get backend version';
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: VscService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: VscService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: VscService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AnimatedDigitComponent, AppGlobals, AppStorage, AuthGuard, AutoFocusDirective, BarGraphComponent, BaseComponent, BaseGuardChangeComponent, BaseOverlayComponent, Box, Breadcrumb, CheckModel, CommonService, DashcardComponent, DateInputParserDirective, DateTimeHelper, DoughnutGraphComponent, DownloadHelper, ENUM_ResponseType, ExtendCheckbox, ExtendDatePicker, ExtendInput, ExtendInputNumber, ExtendSelectComponent, ExtendTextArea, GlobalSpinnerComponent, GridFilter, HTTPService, Height, LimitWordsPipe, LineGraphComponent, LoadingService, NoPermission, NotiService, NullIfEmptyDirective, NumberOnlyDirective, OrderOption, PagingData, PagingModel, PdfViewerComponent, RouteMonitorService, TableHeader, ThemeService, TokenStorage, TranslateKey, UnsavedChangesGuard, UpperCaseFirsLetterEachWordDirective, UppercaseDirective, UppercaseFirstLetterDirective, VscService, Width, XLSXHelper, authInterceptor };
+//# sourceMappingURL=brggroup-share-lib.mjs.map