coer-elements 2.0.33 → 2.0.35

package/fesm2022/coer-elements-pages.mjs

@@ -1,12 +1,12 @@
 import * as i0 from '@angular/core';
-import { computed, effect, Component, viewChild, output, inject, signal, input, Input, NgModule } from '@angular/core';
+import { computed, effect, Component, viewChild, output, inject, signal, input, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import * as i1$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i1 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import * as i4 from 'coer-elements/tools';
-import { Page, Tools, CoerAlert, Menu, HTMLElements, User } from 'coer-elements/tools';
+import { Page, Tools, CoerAlert, HTMLElements, User, Menu } from 'coer-elements/tools';
 import { menuSelectedSIGNAL, isLoadingSIGNAL, navigationSIGNAL, colorsSIGNAL, isMenuOpenSIGNAL } from 'coer-elements/signals';
 import * as i2 from 'coer-elements/components';
 import { ComponentsModule } from 'coer-elements/components';
@@ -143,6 +143,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImpor
         }] });
 
 class COERSystem {
+    //Constructor
     constructor() {
         //Injection
         this._alert = inject(CoerAlert);
@@ -158,17 +159,23 @@ class COERSystem {
         this._inputPassword = viewChild.required('inputPassword');
         this._inputPasswordConfirm = viewChild.required('inputPasswordConfirm');
         this._resetButton = viewChild.required('resetButton');
+        //Generic Tools
+        this.IsNotNull = Tools.IsNotNull;
+        this.IsNotOnlyWhiteSpace = Tools.IsNotOnlyWhiteSpace;
         this._isLoading = isLoadingSIGNAL;
+        this._userRoles = signal([]);
+        this._user = signal(null);
+        this._userImageStatic = signal('');
         this._mainRole = null;
         this._nickname = '';
         this._password = '';
         this._passwordConfirm = '';
-        this._userRoles = signal([]);
-        this._user = signal(null);
-        this._userImageStatic = '';
         //Inputs
         this.userImage = input(null);
         this.toolbarMenu = input([]);
+        this.navigation = input([]);
+        this.user = input(null);
+        this.userRoles = input([]);
         //Outputs 
         this.onLogin = output();
         this.onClickMenuOption = output();
@@ -178,9 +185,12 @@ class COERSystem {
         this.onUploadUserImage = output();
         this.onDeleteUserImage = output();
         this.onUpdateJWT = output();
-        //Generic Tools
-        this.IsNotNull = Tools.IsNotNull;
-        this.IsNotOnlyWhiteSpace = Tools.IsNotOnlyWhiteSpace;
+        //computed
+        this._userImage = computed(() => {
+            return this._staticLogin
+                ? this._userImageStatic()
+                : (this.IsNotOnlyWhiteSpace(this.userImage()) ? this.userImage() : '');
+        });
         //computed
         this._toolbarMenu = computed(() => {
             let toolbarMenu = this.toolbarMenu();
@@ -191,64 +201,59 @@ class COERSystem {
             }
             return toolbarMenu.concat([{ label: 'Log Out', icon: 'fa-solid fa-door-open' }]);
         });
-    }
-    set user(value) {
-        if (Tools.IsNotNull(value)) {
-            this._user.set(value);
-            Tools.Sleep(1000, 'coerSystemGetUser').then(() => {
+        this._effectUser = effect(() => {
+            if (this.user()) {
+                this._user.set(this.user());
                 if (Tools.IsNotOnlyWhiteSpace(this._user()?.nickname)) {
                     this._nickname = this._user()?.nickname;
                 }
-            });
-        }
-    }
-    set userRoles(value) {
-        if (Tools.IsNotNull(value)) {
+            }
+        });
+        this._effectUserRoles = effect(() => {
             let id = 0;
-            this._userRoles.set(value.map(item => Object.assign({ id: ++id, option: item })));
-            Tools.Sleep(1000, 'coerSystemGetUserRoles').then(() => {
-                this._mainRole = this._userRoles().find(x => x.option === this._user()?.role) || null;
-            });
-        }
+            this._userRoles.set(this.userRoles().map(item => ({ id: ++id, option: item })));
+            this._mainRole = this._userRoles().find(x => x.option === this._user()?.role) || null;
+        });
+        this._effectNavigation = effect(() => {
+            if (Tools.IsNotNull(this._user()) && this.navigation().length > 0) {
+                navigationSIGNAL.set(this.navigation());
+                this.SetActiveLink();
+            }
+        });
     }
-    set navigation(value) {
-        if (Tools.IsNotNull(value)) {
-            navigationSIGNAL.set(value);
-            Tools.Sleep(1000, 'coerSystemGetUserNavigation').then(() => {
-                if (Tools.IsNotNull(this._user())) {
-                    this._sidenav().SetActiveLink(Menu.GetSelectedOption());
+    //AfterViewInit
+    ngAfterViewInit() {
+        Tools.Sleep().then(_ => {
+            colorsSIGNAL.update(colors => ({
+                fixedColors: { ...colors.fixedColors },
+                actionColors: {
+                    primary: HTMLElements.GetElementColor(HTMLElements.GetElement('#coer-system-actionColors-primary')),
+                    secondary: HTMLElements.GetElementColor(HTMLElements.GetElement('#coer-system-actionColors-secondary')),
+                    success: HTMLElements.GetElementColor(HTMLElements.GetElement('#coer-system-actionColors-success')),
+                    warning: HTMLElements.GetElementColor(HTMLElements.GetElement('#coer-system-actionColors-warning')),
+                    danger: HTMLElements.GetElementColor(HTMLElements.GetElement('#coer-system-actionColors-danger')),
+                    navigation: HTMLElements.GetElementColor(HTMLElements.GetElement('#coer-system-actionColors-navigation')),
+                    information: HTMLElements.GetElementColor(HTMLElements.GetElement('#coer-system-actionColors-information'))
+                },
+                appColors: {
+                    breadcrumbs: HTMLElements.GetElementColor(HTMLElements.GetElement('#coer-system-appColors-breadcrumbs')),
+                    background: HTMLElements.GetElementColor(HTMLElements.GetElement('#coer-system-appColors-background')),
+                    containers: HTMLElements.GetElementColor(HTMLElements.GetElement('#coer-system-appColors-containers')),
+                    sidenav: HTMLElements.GetElementColor(HTMLElements.GetElement('#coer-system-appColors-sidenav')),
+                    sidenavText: HTMLElements.GetElementColor(HTMLElements.GetElement('#coer-system-appColors-sidenav-text')),
+                    sidenavActive: HTMLElements.GetElementColor(HTMLElements.GetElement('#coer-system-appColors-sidenav-active')),
+                    toolbar: HTMLElements.GetElementColor(HTMLElements.GetElement('#coer-system-appColors-toolbar')),
+                    toolbarText: HTMLElements.GetElementColor(HTMLElements.GetElement('#coer-system-appColors-toolbar-text'))
                 }
-            });
-        }
-    }
-    async ngAfterContentInit() {
-        await Tools.Sleep();
-        colorsSIGNAL.update(colors => ({
-            fixedColors: { ...colors.fixedColors },
-            actionColors: {
-                primary: HTMLElements.GetElementColor(HTMLElements.GetElement('#coer-system-actionColors-primary')),
-                secondary: HTMLElements.GetElementColor(HTMLElements.GetElement('#coer-system-actionColors-secondary')),
-                success: HTMLElements.GetElementColor(HTMLElements.GetElement('#coer-system-actionColors-success')),
-                warning: HTMLElements.GetElementColor(HTMLElements.GetElement('#coer-system-actionColors-warning')),
-                danger: HTMLElements.GetElementColor(HTMLElements.GetElement('#coer-system-actionColors-danger')),
-                navigation: HTMLElements.GetElementColor(HTMLElements.GetElement('#coer-system-actionColors-navigation')),
-                information: HTMLElements.GetElementColor(HTMLElements.GetElement('#coer-system-actionColors-information'))
-            },
-            appColors: {
-                breadcrumbs: HTMLElements.GetElementColor(HTMLElements.GetElement('#coer-system-appColors-breadcrumbs')),
-                background: HTMLElements.GetElementColor(HTMLElements.GetElement('#coer-system-appColors-background')),
-                containers: HTMLElements.GetElementColor(HTMLElements.GetElement('#coer-system-appColors-containers')),
-                sidenav: HTMLElements.GetElementColor(HTMLElements.GetElement('#coer-system-appColors-sidenav')),
-                sidenavText: HTMLElements.GetElementColor(HTMLElements.GetElement('#coer-system-appColors-sidenav-text')),
-                sidenavActive: HTMLElements.GetElementColor(HTMLElements.GetElement('#coer-system-appColors-sidenav-active')),
-                toolbar: HTMLElements.GetElementColor(HTMLElements.GetElement('#coer-system-appColors-toolbar')),
-                toolbarText: HTMLElements.GetElementColor(HTMLElements.GetElement('#coer-system-appColors-toolbar-text'))
-            }
-        }));
+            }));
+        });
     }
     ngOnDestroy() {
         clearInterval(this._watchJWT$);
         clearInterval(this._startJWT$);
+        this._effectNavigation?.destroy();
+        this._effectUser?.destroy();
+        this._effectUserRoles?.destroy();
     }
     //getter
     get _enableButtonLogin() {
@@ -266,12 +271,6 @@ class COERSystem {
             ? this._user()?.fullName
             : this._user()?.user;
     }
-    //getter
-    get _userImage() {
-        return this._staticLogin
-            ? this._userImageStatic
-            : (this.IsNotOnlyWhiteSpace(this.userImage()) ? this.userImage() : '');
-    }
     /** */
     async __SelectedOption(menu) {
         this.onClickMenuOption.emit(menu);
@@ -363,7 +362,7 @@ class COERSystem {
         if (images.length > 0) {
             const [image] = images;
             if (this._staticLogin) {
-                this._userImageStatic = image.base64 || '';
+                this._userImageStatic.set(image.base64 || '');
             }
             else {
                 this.onUploadUserImage.emit(image);
@@ -375,7 +374,7 @@ class COERSystem {
         this._alert.Confirm(`Remove <b>User Image</b> ?`, 'warning', 'fa-solid fa-trash-can').then(response => {
             if (response) {
                 if (this._staticLogin) {
-                    this._userImageStatic = '';
+                    this._userImageStatic.set('');
                 }
                 else {
                     this.onDeleteUserImage.emit();
@@ -450,19 +449,17 @@ class COERSystem {
         });
         return User.Get();
     }
+    /** */
+    SetActiveLink() {
+        Tools.Sleep().then(_ => this._sidenav().SetActiveLink(Menu.GetSelectedOption()));
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: COERSystem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: COERSystem, isStandalone: false, selector: "coer-system", inputs: { userImage: { classPropertyName: "userImage", publicName: "userImage", isSignal: true, isRequired: false, transformFunction: null }, toolbarMenu: { classPropertyName: "toolbarMenu", publicName: "toolbarMenu", isSignal: true, isRequired: false, transformFunction: null }, user: { classPropertyName: "user", publicName: "user", isSignal: false, isRequired: false, transformFunction: null }, userRoles: { classPropertyName: "userRoles", publicName: "userRoles", isSignal: false, isRequired: false, transformFunction: null }, navigation: { classPropertyName: "navigation", publicName: "navigation", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onLogin: "onLogin", onClickMenuOption: "onClickMenuOption", onResetPassword: "onResetPassword", onRecoveryPassword: "onRecoveryPassword", onUpdateProfile: "onUpdateProfile", onUploadUserImage: "onUploadUserImage", onDeleteUserImage: "onDeleteUserImage", onUpdateJWT: "onUpdateJWT" }, viewQueries: [{ propertyName: "_sidenav", first: true, predicate: ["sidenav"], descendants: true, isSignal: true }, { propertyName: "_loginPage", first: true, predicate: ["loginPage"], descendants: true, isSignal: true }, { propertyName: "_modalProfile", first: true, predicate: ["modalProfile"], descendants: true, isSignal: true }, { propertyName: "_modalPassword", first: true, predicate: ["modalPassword"], descendants: true, isSignal: true }, { propertyName: "_inputPassword", first: true, predicate: ["inputPassword"], descendants: true, isSignal: true }, { propertyName: "_inputPasswordConfirm", first: true, predicate: ["inputPasswordConfirm"], descendants: true, isSignal: true }, { propertyName: "_resetButton", first: true, predicate: ["resetButton"], descendants: true, isSignal: true }], ngImport: i0, template: "@if(IsNotNull(_user())) {\r\n    <coer-toolbar \r\n        [user]=\"_user()\" \r\n        [image]=\"userImage()\" \r\n        [menu]=\"_toolbarMenu()\" \r\n        (onClickMenu)=\"sidenav.Toggle()\" \r\n        (onClickOption)=\"__SelectedOption($event)\"\r\n    ></coer-toolbar>\r\n    \r\n    <coer-sidenav #sidenav> \r\n        <section> \r\n            <ng-content></ng-content>\r\n        </section>  \r\n    </coer-sidenav>\r\n\r\n    <!-- Modal Profile -->    \r\n    <coer-modal #modalProfile [title]=\"_profileTitle\" icon=\"icon-user icon-fill\" width=\"auto\"> \r\n        <coer-filebox\r\n            type=\"image\"\r\n            [image]=\"{ \r\n                value: _userImage, \r\n                name: _profileTitle,\r\n                maxWidth: '150px', \r\n                maxHeight: '150px', \r\n                marginBottom: '15px',\r\n                allowExpand: false \r\n            }\"\r\n            [isLoading]=\"_isLoading()\"\r\n            (onSelected)=\"__UploadImage($event)\"\r\n            (onDeleteImage)=\"__DeleteUserImage()\"\r\n        ></coer-filebox>\r\n\r\n        <section class=\"flex-wrap coer-system-profile max-width-550px\">\r\n            <!-- User --> \r\n            <div class=\"mv-flex-item-grow-100 flex-item-grow-45\">\r\n                <coer-textbox\r\n                    label=\"User\"\r\n                    [value]=\"_user()?.user\"\r\n                    [isReadonly]=\"true\"   \r\n                ></coer-textbox>\r\n            </div>\r\n\r\n            <!-- User Number -->\r\n            @if(IsNotOnlyWhiteSpace(_user()?.userNumber)) { \r\n                <div class=\"mv-flex-item-grow-100 flex-item-grow-45\">\r\n                    <coer-textbox\r\n                        label=\"Number\"\r\n                        [value]=\"_user()?.userNumber\"\r\n                        [isReadonly]=\"true\"       \r\n                    ></coer-textbox>\r\n                </div>\r\n            }\r\n\r\n            <!-- Email -->\r\n            <div class=\"mv-flex-item-grow-100 flex-item-grow-45\">\r\n                <coer-textbox\r\n                    label=\"Email\"\r\n                    [value]=\"_user()?.email\"\r\n                    [isReadonly]=\"true\"       \r\n                ></coer-textbox> \r\n            </div>\r\n\r\n            <!-- Nickame --> \r\n            @if(IsNotOnlyWhiteSpace(_user()?.nickname)) { \r\n                <div class=\"mv-flex-item-grow-100 flex-item-grow-45\">\r\n                    <coer-textbox\r\n                        label=\"Nickame\"\r\n                        [(ngModel)]=\"_nickname\" \r\n                        [isLoading]=\"_isLoading()\"   \r\n                    ></coer-textbox>  \r\n                </div>\r\n            }   \r\n\r\n            @if(IsNotNull(_user()?.roles) && (_user()?.roles!.length > 1)) {\r\n                <!-- Role -->         \r\n                <div class=\"mv-flex-item-grow-100 flex-item-grow-45\">\r\n                    <coer-selectbox\r\n                        label=\"Role\"\r\n                        [(ngModel)]=\"_mainRole\"\r\n                        propDisplay=\"option\"\r\n                        [dataSource]=\"_userRoles()\"\r\n                        [isLoading]=\"_isLoading()\" \r\n                    ></coer-selectbox>\r\n                </div>\r\n            }\r\n\r\n            @else {\r\n                <div class=\"mv-flex-item-grow-100 flex-item-grow-45\">\r\n                    <coer-textbox\r\n                        label=\"Role\"\r\n                        [value]=\"_user()?.role!\" \r\n                        [isReadonly]=\"true\"  \r\n                    ></coer-textbox>  \r\n                </div>\r\n            }\r\n        </section> \r\n    \r\n        @if(!_staticLogin) {\r\n            <ng-template coerRef=\"footer\">\r\n                <coer-button\r\n                    #buttonSave\r\n                    color=\"dark\"\r\n                    icon=\"save\"\r\n                    [isLoading]=\"_isLoading()\"\r\n                    (onClick)=\"UpdateProfile()\"\r\n                > Update </coer-button>\r\n            </ng-template>\r\n        } \r\n    </coer-modal> \r\n\r\n    <!-- Modal Password -->\r\n    <coer-modal #modalPassword title=\"Reset Password\" icon=\"fa-solid fa-lock\" (onClose)=\"_password = ''; _passwordConfirm = '';\">\r\n        <coer-secretbox\r\n            #inputPassword\r\n            label=\"New Password\"\r\n            [(ngModel)]=\"_password\"\r\n            [isLoading]=\"_isLoading()\" \r\n            [maxLength]=\"20\"\r\n            marginBottom=\"15px\"\r\n            (onKeyupEnter)=\"__Focus()\"\r\n        ></coer-secretbox>\r\n\r\n        <coer-secretbox\r\n            #inputPasswordConfirm\r\n            label=\"Confirm Password\"\r\n            [(ngModel)]=\"_passwordConfirm\"\r\n            [isLoading]=\"_isLoading()\" \r\n            [maxLength]=\"20\"\r\n            (onKeyupEnter)=\"__Focus()\"\r\n        ></coer-secretbox>\r\n\r\n        <ng-template coerRef=\"footer\">\r\n            <!-- Reset Button -->\r\n            <coer-button\r\n                #resetButton\r\n                color=\"dark\" \r\n                [isDisabled]=\"!_enableButtonLogin\"\r\n                [isLoading]=\"_isLoading()\" \r\n                (onClick)=\"__ResetPassword()\"\r\n            > Reset </coer-button>\r\n        </ng-template>\r\n    </coer-modal>\r\n}\r\n\r\n@else {\r\n    <login-page \r\n        #loginPage \r\n        (onLogin)=\"onLogin.emit($event)\"\r\n        (onRecovery)=\"onRecoveryPassword.emit($event)\"\r\n    ></login-page>\r\n}  \r\n\r\n<coer-alert></coer-alert> \r\n\r\n<div class=\"d-none\">\r\n    <span id=\"coer-system-actionColors-primary\"></span>\r\n    <span id=\"coer-system-actionColors-secondary\"></span>\r\n    <span id=\"coer-system-actionColors-success\"></span>\r\n    <span id=\"coer-system-actionColors-warning\"></span>\r\n    <span id=\"coer-system-actionColors-danger\"></span>\r\n    <span id=\"coer-system-actionColors-navigation\"></span>\r\n    <span id=\"coer-system-actionColors-information\"></span>\r\n    <span id=\"coer-system-appColors-breadcrumbs\"></span>\r\n    <span id=\"coer-system-appColors-background\"></span> \r\n    <span id=\"coer-system-appColors-containers\"></span>\r\n    <span id=\"coer-system-appColors-sidenav\"></span> \r\n    <span id=\"coer-system-appColors-sidenav-text\"></span>\r\n    <span id=\"coer-system-appColors-sidenav-active\"></span>\r\n    <span id=\"coer-system-appColors-toolbar\"></span> \r\n    <span id=\"coer-system-appColors-toolbar-text\"></span> \r\n</div>", styles: ["section.row.coer-system-profile{max-width:600px}span#coer-system-actionColors-primary{color:var(--primary-inner)}span#coer-system-actionColors-secondary{color:var(--secondary-inner)}span#coer-system-actionColors-success{color:var(--success-inner)}span#coer-system-actionColors-warning{color:var(--warning-inner)}span#coer-system-actionColors-danger{color:var(--danger-inner)}span#coer-system-actionColors-navigation{color:var(--navigation-inner)}span#coer-system-actionColors-information{color:var(--information-inner)}span#coer-system-appColors-breadcrumbs{color:var(--breadcrumbs-inner)}span#coer-system-appColors-background{color:var(--background-inner)}span#coer-system-appColors-containers{color:var(--containers-inner)}span#coer-system-appColors-sidenav{color:var(--sidenav-inner)}span#coer-system-appColors-sidenav-text{color:var(--sidenav-text-inner)}span#coer-system-appColors-sidenav-active{color:var(--sidenav-active-inner)}span#coer-system-appColors-toolbar{color:var(--toolbar-inner)}span#coer-system-appColors-toolbar-text{color:var(--toolbar-text-inner)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.CoerButton, selector: "coer-button", inputs: ["id", "color", "type", "icon", "iconPosition", "path", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "height", "minHeight", "marginTop", "marginRight", "marginBottom", "marginLeft", "tooltip", "tooltipPosition"], outputs: ["onClick"] }, { kind: "component", type: i2.CoerFilebox, selector: "coer-filebox", inputs: ["type", "image", "multiple", "isLoading", "isDisabled", "isReadonly", "isInvisible"], outputs: ["onSelected", "onDeleteImage"] }, { kind: "component", type: i2.CoerModal, selector: "coer-modal", inputs: ["id", "title", "icon", "showCloseButton", "width", "height", "maxHeight"], outputs: ["onOpen", "onClose"] }, { kind: "component", type: i2.CoerSecretBox, selector: "coer-secretbox", inputs: ["id", "value", "label", "placeholder", "textPosition", "minLength", "maxLength", "isInvalid", "isValid", "showSecret", "selectOnFocus", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "marginTop", "marginRight", "marginBottom", "marginLeft"], outputs: ["onKeyupEnter", "onInput", "onClickClear", "onClickExternalButton"] }, { kind: "component", type: i2.CoerSidenav, selector: "coer-sidenav", outputs: ["onMenuSelected"] }, { kind: "component", type: i2.CoerSelectbox, selector: "coer-selectbox", inputs: ["id", "value", "label", "placeholder", "isInvalid", "isValid", "dataSource", "displayProperty", "rowsByPage", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "marginTop", "marginRight", "marginBottom", "marginLeft"], outputs: ["onSelected", "onUnselect"] }, { kind: "component", type: i2.CoerTextBox, selector: "coer-textbox", inputs: ["id", "value", "label", "placeholder", "textPosition", "minLength", "maxLength", "isInvalid", "isValid", "externalButton", "selectOnFocus", "showClearIcon", "showSearchIcon", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "marginTop", "marginRight", "marginBottom", "marginLeft"], outputs: ["onKeyupEnter", "onInput", "onClickClear", "onClickSearch", "onClickExternalButton"] }, { kind: "component", type: i2.CoerToolbar, selector: "coer-toolbar", inputs: ["user", "image", "menu"], outputs: ["onClickMenu", "onClickOption"] }, { kind: "directive", type: i3.CoerRefDirective, selector: "[coerRef]", inputs: ["coerRef", "title", "icon", "isDisabled", "show", "tooltip"] }, { kind: "component", type: i4.CoerAlert, selector: "coer-alert" }, { kind: "component", type: LoginPage, selector: "login-page", outputs: ["onLogin", "onRecovery"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: COERSystem, isStandalone: false, selector: "coer-system", inputs: { userImage: { classPropertyName: "userImage", publicName: "userImage", isSignal: true, isRequired: false, transformFunction: null }, toolbarMenu: { classPropertyName: "toolbarMenu", publicName: "toolbarMenu", isSignal: true, isRequired: false, transformFunction: null }, navigation: { classPropertyName: "navigation", publicName: "navigation", isSignal: true, isRequired: false, transformFunction: null }, user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: false, transformFunction: null }, userRoles: { classPropertyName: "userRoles", publicName: "userRoles", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onLogin: "onLogin", onClickMenuOption: "onClickMenuOption", onResetPassword: "onResetPassword", onRecoveryPassword: "onRecoveryPassword", onUpdateProfile: "onUpdateProfile", onUploadUserImage: "onUploadUserImage", onDeleteUserImage: "onDeleteUserImage", onUpdateJWT: "onUpdateJWT" }, viewQueries: [{ propertyName: "_sidenav", first: true, predicate: ["sidenav"], descendants: true, isSignal: true }, { propertyName: "_loginPage", first: true, predicate: ["loginPage"], descendants: true, isSignal: true }, { propertyName: "_modalProfile", first: true, predicate: ["modalProfile"], descendants: true, isSignal: true }, { propertyName: "_modalPassword", first: true, predicate: ["modalPassword"], descendants: true, isSignal: true }, { propertyName: "_inputPassword", first: true, predicate: ["inputPassword"], descendants: true, isSignal: true }, { propertyName: "_inputPasswordConfirm", first: true, predicate: ["inputPasswordConfirm"], descendants: true, isSignal: true }, { propertyName: "_resetButton", first: true, predicate: ["resetButton"], descendants: true, isSignal: true }], ngImport: i0, template: "@if(IsNotNull(_user())) {\r\n    <coer-toolbar \r\n        [user]=\"_user()\" \r\n        [image]=\"userImage()\" \r\n        [menu]=\"_toolbarMenu()\" \r\n        (onClickMenu)=\"sidenav.Toggle()\" \r\n        (onClickOption)=\"__SelectedOption($event)\"\r\n    ></coer-toolbar>\r\n    \r\n    <coer-sidenav #sidenav> \r\n        <section> \r\n            <ng-content></ng-content>\r\n        </section>  \r\n    </coer-sidenav>\r\n\r\n    <!-- Modal Profile -->    \r\n    <coer-modal #modalProfile [title]=\"_profileTitle\" icon=\"icon-user icon-fill\" width=\"auto\"> \r\n        <coer-filebox\r\n            type=\"image\"\r\n            [image]=\"{ \r\n                value: _userImage(), \r\n                name: _profileTitle,\r\n                maxWidth: '150px', \r\n                maxHeight: '150px', \r\n                marginBottom: '15px',\r\n                allowExpand: false \r\n            }\"\r\n            [isLoading]=\"_isLoading()\"\r\n            (onSelected)=\"__UploadImage($event)\"\r\n            (onDeleteImage)=\"__DeleteUserImage()\"\r\n        ></coer-filebox>\r\n\r\n        <section class=\"flex-wrap coer-system-profile max-width-550px\">\r\n            <!-- User --> \r\n            <div class=\"mv-flex-item-grow-100 flex-item-grow-45\">\r\n                <coer-textbox\r\n                    label=\"User\"\r\n                    [value]=\"_user()?.user\"\r\n                    [isReadonly]=\"true\"   \r\n                ></coer-textbox>\r\n            </div>\r\n\r\n            <!-- User Number -->\r\n            @if(IsNotOnlyWhiteSpace(_user()?.userNumber)) { \r\n                <div class=\"mv-flex-item-grow-100 flex-item-grow-45\">\r\n                    <coer-textbox\r\n                        label=\"Number\"\r\n                        [value]=\"_user()?.userNumber\"\r\n                        [isReadonly]=\"true\"       \r\n                    ></coer-textbox>\r\n                </div>\r\n            }\r\n\r\n            <!-- Email -->\r\n            <div class=\"mv-flex-item-grow-100 flex-item-grow-45\">\r\n                <coer-textbox\r\n                    label=\"Email\"\r\n                    [value]=\"_user()?.email\"\r\n                    [isReadonly]=\"true\"       \r\n                ></coer-textbox> \r\n            </div>\r\n\r\n            <!-- Nickame --> \r\n            @if(IsNotNull(_user()?.nickname)) { \r\n                <div class=\"mv-flex-item-grow-100 flex-item-grow-45\">\r\n                    <coer-textbox\r\n                        label=\"Nickame\"\r\n                        [(ngModel)]=\"_nickname\" \r\n                        [isLoading]=\"_isLoading()\"   \r\n                    ></coer-textbox>  \r\n                </div>\r\n            }   \r\n\r\n            @if(IsNotNull(_user()?.roles) && (_user()?.roles!.length > 1)) {\r\n                <!-- Role -->         \r\n                <div class=\"mv-flex-item-grow-100 flex-item-grow-45\">\r\n                    <coer-selectbox\r\n                        label=\"Role\"\r\n                        [(ngModel)]=\"_mainRole\"\r\n                        propDisplay=\"option\"\r\n                        [dataSource]=\"_userRoles()\"\r\n                        [isLoading]=\"_isLoading()\" \r\n                    ></coer-selectbox>\r\n                </div>\r\n            }\r\n\r\n            @else {\r\n                <div class=\"mv-flex-item-grow-100 flex-item-grow-45\">\r\n                    <coer-textbox\r\n                        label=\"Role\"\r\n                        [value]=\"_user()?.role!\" \r\n                        [isReadonly]=\"true\"  \r\n                    ></coer-textbox>  \r\n                </div>\r\n            }\r\n        </section> \r\n    \r\n        @if(!_staticLogin) {\r\n            <ng-template coerRef=\"footer\">\r\n                <coer-button\r\n                    #buttonSave\r\n                    color=\"dark\"\r\n                    icon=\"save\"\r\n                    [isLoading]=\"_isLoading()\"\r\n                    (onClick)=\"UpdateProfile()\"\r\n                > Update </coer-button>\r\n            </ng-template>\r\n        } \r\n    </coer-modal> \r\n\r\n    <!-- Modal Password -->\r\n    <coer-modal #modalPassword title=\"Reset Password\" icon=\"fa-solid fa-lock\" (onClose)=\"_password = ''; _passwordConfirm = '';\">\r\n        <coer-secretbox\r\n            #inputPassword\r\n            label=\"New Password\"\r\n            [(ngModel)]=\"_password\"\r\n            [isLoading]=\"_isLoading()\" \r\n            [maxLength]=\"20\"\r\n            marginBottom=\"15px\"\r\n            (onKeyupEnter)=\"__Focus()\"\r\n        ></coer-secretbox>\r\n\r\n        <coer-secretbox\r\n            #inputPasswordConfirm\r\n            label=\"Confirm Password\"\r\n            [(ngModel)]=\"_passwordConfirm\"\r\n            [isLoading]=\"_isLoading()\" \r\n            [maxLength]=\"20\"\r\n            (onKeyupEnter)=\"__Focus()\"\r\n        ></coer-secretbox>\r\n\r\n        <ng-template coerRef=\"footer\">\r\n            <!-- Reset Button -->\r\n            <coer-button\r\n                #resetButton\r\n                color=\"dark\" \r\n                [isDisabled]=\"!_enableButtonLogin\"\r\n                [isLoading]=\"_isLoading()\" \r\n                (onClick)=\"__ResetPassword()\"\r\n            > Reset </coer-button>\r\n        </ng-template>\r\n    </coer-modal>\r\n}\r\n\r\n@else {\r\n    <login-page \r\n        #loginPage \r\n        (onLogin)=\"onLogin.emit($event)\"\r\n        (onRecovery)=\"onRecoveryPassword.emit($event)\"\r\n    ></login-page>\r\n}  \r\n\r\n<coer-alert></coer-alert> \r\n\r\n<div class=\"d-none\">\r\n    <span id=\"coer-system-actionColors-primary\"></span>\r\n    <span id=\"coer-system-actionColors-secondary\"></span>\r\n    <span id=\"coer-system-actionColors-success\"></span>\r\n    <span id=\"coer-system-actionColors-warning\"></span>\r\n    <span id=\"coer-system-actionColors-danger\"></span>\r\n    <span id=\"coer-system-actionColors-navigation\"></span>\r\n    <span id=\"coer-system-actionColors-information\"></span>\r\n    <span id=\"coer-system-appColors-breadcrumbs\"></span>\r\n    <span id=\"coer-system-appColors-background\"></span> \r\n    <span id=\"coer-system-appColors-containers\"></span>\r\n    <span id=\"coer-system-appColors-sidenav\"></span> \r\n    <span id=\"coer-system-appColors-sidenav-text\"></span>\r\n    <span id=\"coer-system-appColors-sidenav-active\"></span>\r\n    <span id=\"coer-system-appColors-toolbar\"></span> \r\n    <span id=\"coer-system-appColors-toolbar-text\"></span> \r\n</div>", styles: ["section.row.coer-system-profile{max-width:600px}span#coer-system-actionColors-primary{color:var(--primary-inner)}span#coer-system-actionColors-secondary{color:var(--secondary-inner)}span#coer-system-actionColors-success{color:var(--success-inner)}span#coer-system-actionColors-warning{color:var(--warning-inner)}span#coer-system-actionColors-danger{color:var(--danger-inner)}span#coer-system-actionColors-navigation{color:var(--navigation-inner)}span#coer-system-actionColors-information{color:var(--information-inner)}span#coer-system-appColors-breadcrumbs{color:var(--breadcrumbs-inner)}span#coer-system-appColors-background{color:var(--background-inner)}span#coer-system-appColors-containers{color:var(--containers-inner)}span#coer-system-appColors-sidenav{color:var(--sidenav-inner)}span#coer-system-appColors-sidenav-text{color:var(--sidenav-text-inner)}span#coer-system-appColors-sidenav-active{color:var(--sidenav-active-inner)}span#coer-system-appColors-toolbar{color:var(--toolbar-inner)}span#coer-system-appColors-toolbar-text{color:var(--toolbar-text-inner)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.CoerButton, selector: "coer-button", inputs: ["id", "color", "type", "icon", "iconPosition", "path", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "height", "minHeight", "marginTop", "marginRight", "marginBottom", "marginLeft", "tooltip", "tooltipPosition"], outputs: ["onClick"] }, { kind: "component", type: i2.CoerFilebox, selector: "coer-filebox", inputs: ["type", "image", "multiple", "isLoading", "isDisabled", "isReadonly", "isInvisible"], outputs: ["onSelected", "onDeleteImage"] }, { kind: "component", type: i2.CoerModal, selector: "coer-modal", inputs: ["id", "title", "icon", "showCloseButton", "width", "height", "maxHeight"], outputs: ["onOpen", "onClose"] }, { kind: "component", type: i2.CoerSecretBox, selector: "coer-secretbox", inputs: ["id", "value", "label", "placeholder", "textPosition", "minLength", "maxLength", "isInvalid", "isValid", "showSecret", "selectOnFocus", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "marginTop", "marginRight", "marginBottom", "marginLeft"], outputs: ["onKeyupEnter", "onInput", "onClickClear", "onClickExternalButton"] }, { kind: "component", type: i2.CoerSidenav, selector: "coer-sidenav", outputs: ["onMenuSelected"] }, { kind: "component", type: i2.CoerSelectbox, selector: "coer-selectbox", inputs: ["id", "value", "label", "placeholder", "isInvalid", "isValid", "dataSource", "displayProperty", "rowsByPage", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "marginTop", "marginRight", "marginBottom", "marginLeft"], outputs: ["onSelected", "onUnselect"] }, { kind: "component", type: i2.CoerTextBox, selector: "coer-textbox", inputs: ["id", "value", "label", "placeholder", "textPosition", "minLength", "maxLength", "isInvalid", "isValid", "externalButton", "selectOnFocus", "showClearIcon", "showSearchIcon", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "marginTop", "marginRight", "marginBottom", "marginLeft"], outputs: ["onKeyupEnter", "onInput", "onClickClear", "onClickSearch", "onClickExternalButton"] }, { kind: "component", type: i2.CoerToolbar, selector: "coer-toolbar", inputs: ["user", "image", "menu"], outputs: ["onClickMenu", "onClickOption"] }, { kind: "directive", type: i3.CoerRefDirective, selector: "[coerRef]", inputs: ["coerRef", "title", "icon", "isDisabled", "show", "tooltip"] }, { kind: "component", type: i4.CoerAlert, selector: "coer-alert" }, { kind: "component", type: LoginPage, selector: "login-page", outputs: ["onLogin", "onRecovery"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: COERSystem, decorators: [{
             type: Component,
-            args: [{ selector: 'coer-system', standalone: false, template: "@if(IsNotNull(_user())) {\r\n    <coer-toolbar \r\n        [user]=\"_user()\" \r\n        [image]=\"userImage()\" \r\n        [menu]=\"_toolbarMenu()\" \r\n        (onClickMenu)=\"sidenav.Toggle()\" \r\n        (onClickOption)=\"__SelectedOption($event)\"\r\n    ></coer-toolbar>\r\n    \r\n    <coer-sidenav #sidenav> \r\n        <section> \r\n            <ng-content></ng-content>\r\n        </section>  \r\n    </coer-sidenav>\r\n\r\n    <!-- Modal Profile -->    \r\n    <coer-modal #modalProfile [title]=\"_profileTitle\" icon=\"icon-user icon-fill\" width=\"auto\"> \r\n        <coer-filebox\r\n            type=\"image\"\r\n            [image]=\"{ \r\n                value: _userImage, \r\n                name: _profileTitle,\r\n                maxWidth: '150px', \r\n                maxHeight: '150px', \r\n                marginBottom: '15px',\r\n                allowExpand: false \r\n            }\"\r\n            [isLoading]=\"_isLoading()\"\r\n            (onSelected)=\"__UploadImage($event)\"\r\n            (onDeleteImage)=\"__DeleteUserImage()\"\r\n        ></coer-filebox>\r\n\r\n        <section class=\"flex-wrap coer-system-profile max-width-550px\">\r\n            <!-- User --> \r\n            <div class=\"mv-flex-item-grow-100 flex-item-grow-45\">\r\n                <coer-textbox\r\n                    label=\"User\"\r\n                    [value]=\"_user()?.user\"\r\n                    [isReadonly]=\"true\"   \r\n                ></coer-textbox>\r\n            </div>\r\n\r\n            <!-- User Number -->\r\n            @if(IsNotOnlyWhiteSpace(_user()?.userNumber)) { \r\n                <div class=\"mv-flex-item-grow-100 flex-item-grow-45\">\r\n                    <coer-textbox\r\n                        label=\"Number\"\r\n                        [value]=\"_user()?.userNumber\"\r\n                        [isReadonly]=\"true\"       \r\n                    ></coer-textbox>\r\n                </div>\r\n            }\r\n\r\n            <!-- Email -->\r\n            <div class=\"mv-flex-item-grow-100 flex-item-grow-45\">\r\n                <coer-textbox\r\n                    label=\"Email\"\r\n                    [value]=\"_user()?.email\"\r\n                    [isReadonly]=\"true\"       \r\n                ></coer-textbox> \r\n            </div>\r\n\r\n            <!-- Nickame --> \r\n            @if(IsNotOnlyWhiteSpace(_user()?.nickname)) { \r\n                <div class=\"mv-flex-item-grow-100 flex-item-grow-45\">\r\n                    <coer-textbox\r\n                        label=\"Nickame\"\r\n                        [(ngModel)]=\"_nickname\" \r\n                        [isLoading]=\"_isLoading()\"   \r\n                    ></coer-textbox>  \r\n                </div>\r\n            }   \r\n\r\n            @if(IsNotNull(_user()?.roles) && (_user()?.roles!.length > 1)) {\r\n                <!-- Role -->         \r\n                <div class=\"mv-flex-item-grow-100 flex-item-grow-45\">\r\n                    <coer-selectbox\r\n                        label=\"Role\"\r\n                        [(ngModel)]=\"_mainRole\"\r\n                        propDisplay=\"option\"\r\n                        [dataSource]=\"_userRoles()\"\r\n                        [isLoading]=\"_isLoading()\" \r\n                    ></coer-selectbox>\r\n                </div>\r\n            }\r\n\r\n            @else {\r\n                <div class=\"mv-flex-item-grow-100 flex-item-grow-45\">\r\n                    <coer-textbox\r\n                        label=\"Role\"\r\n                        [value]=\"_user()?.role!\" \r\n                        [isReadonly]=\"true\"  \r\n                    ></coer-textbox>  \r\n                </div>\r\n            }\r\n        </section> \r\n    \r\n        @if(!_staticLogin) {\r\n            <ng-template coerRef=\"footer\">\r\n                <coer-button\r\n                    #buttonSave\r\n                    color=\"dark\"\r\n                    icon=\"save\"\r\n                    [isLoading]=\"_isLoading()\"\r\n                    (onClick)=\"UpdateProfile()\"\r\n                > Update </coer-button>\r\n            </ng-template>\r\n        } \r\n    </coer-modal> \r\n\r\n    <!-- Modal Password -->\r\n    <coer-modal #modalPassword title=\"Reset Password\" icon=\"fa-solid fa-lock\" (onClose)=\"_password = ''; _passwordConfirm = '';\">\r\n        <coer-secretbox\r\n            #inputPassword\r\n            label=\"New Password\"\r\n            [(ngModel)]=\"_password\"\r\n            [isLoading]=\"_isLoading()\" \r\n            [maxLength]=\"20\"\r\n            marginBottom=\"15px\"\r\n            (onKeyupEnter)=\"__Focus()\"\r\n        ></coer-secretbox>\r\n\r\n        <coer-secretbox\r\n            #inputPasswordConfirm\r\n            label=\"Confirm Password\"\r\n            [(ngModel)]=\"_passwordConfirm\"\r\n            [isLoading]=\"_isLoading()\" \r\n            [maxLength]=\"20\"\r\n            (onKeyupEnter)=\"__Focus()\"\r\n        ></coer-secretbox>\r\n\r\n        <ng-template coerRef=\"footer\">\r\n            <!-- Reset Button -->\r\n            <coer-button\r\n                #resetButton\r\n                color=\"dark\" \r\n                [isDisabled]=\"!_enableButtonLogin\"\r\n                [isLoading]=\"_isLoading()\" \r\n                (onClick)=\"__ResetPassword()\"\r\n            > Reset </coer-button>\r\n        </ng-template>\r\n    </coer-modal>\r\n}\r\n\r\n@else {\r\n    <login-page \r\n        #loginPage \r\n        (onLogin)=\"onLogin.emit($event)\"\r\n        (onRecovery)=\"onRecoveryPassword.emit($event)\"\r\n    ></login-page>\r\n}  \r\n\r\n<coer-alert></coer-alert> \r\n\r\n<div class=\"d-none\">\r\n    <span id=\"coer-system-actionColors-primary\"></span>\r\n    <span id=\"coer-system-actionColors-secondary\"></span>\r\n    <span id=\"coer-system-actionColors-success\"></span>\r\n    <span id=\"coer-system-actionColors-warning\"></span>\r\n    <span id=\"coer-system-actionColors-danger\"></span>\r\n    <span id=\"coer-system-actionColors-navigation\"></span>\r\n    <span id=\"coer-system-actionColors-information\"></span>\r\n    <span id=\"coer-system-appColors-breadcrumbs\"></span>\r\n    <span id=\"coer-system-appColors-background\"></span> \r\n    <span id=\"coer-system-appColors-containers\"></span>\r\n    <span id=\"coer-system-appColors-sidenav\"></span> \r\n    <span id=\"coer-system-appColors-sidenav-text\"></span>\r\n    <span id=\"coer-system-appColors-sidenav-active\"></span>\r\n    <span id=\"coer-system-appColors-toolbar\"></span> \r\n    <span id=\"coer-system-appColors-toolbar-text\"></span> \r\n</div>", styles: ["section.row.coer-system-profile{max-width:600px}span#coer-system-actionColors-primary{color:var(--primary-inner)}span#coer-system-actionColors-secondary{color:var(--secondary-inner)}span#coer-system-actionColors-success{color:var(--success-inner)}span#coer-system-actionColors-warning{color:var(--warning-inner)}span#coer-system-actionColors-danger{color:var(--danger-inner)}span#coer-system-actionColors-navigation{color:var(--navigation-inner)}span#coer-system-actionColors-information{color:var(--information-inner)}span#coer-system-appColors-breadcrumbs{color:var(--breadcrumbs-inner)}span#coer-system-appColors-background{color:var(--background-inner)}span#coer-system-appColors-containers{color:var(--containers-inner)}span#coer-system-appColors-sidenav{color:var(--sidenav-inner)}span#coer-system-appColors-sidenav-text{color:var(--sidenav-text-inner)}span#coer-system-appColors-sidenav-active{color:var(--sidenav-active-inner)}span#coer-system-appColors-toolbar{color:var(--toolbar-inner)}span#coer-system-appColors-toolbar-text{color:var(--toolbar-text-inner)}\n"] }]
-        }], propDecorators: { user: [{
-                type: Input
-            }], userRoles: [{
-                type: Input
-            }], navigation: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'coer-system', standalone: false, template: "@if(IsNotNull(_user())) {\r\n    <coer-toolbar \r\n        [user]=\"_user()\" \r\n        [image]=\"userImage()\" \r\n        [menu]=\"_toolbarMenu()\" \r\n        (onClickMenu)=\"sidenav.Toggle()\" \r\n        (onClickOption)=\"__SelectedOption($event)\"\r\n    ></coer-toolbar>\r\n    \r\n    <coer-sidenav #sidenav> \r\n        <section> \r\n            <ng-content></ng-content>\r\n        </section>  \r\n    </coer-sidenav>\r\n\r\n    <!-- Modal Profile -->    \r\n    <coer-modal #modalProfile [title]=\"_profileTitle\" icon=\"icon-user icon-fill\" width=\"auto\"> \r\n        <coer-filebox\r\n            type=\"image\"\r\n            [image]=\"{ \r\n                value: _userImage(), \r\n                name: _profileTitle,\r\n                maxWidth: '150px', \r\n                maxHeight: '150px', \r\n                marginBottom: '15px',\r\n                allowExpand: false \r\n            }\"\r\n            [isLoading]=\"_isLoading()\"\r\n            (onSelected)=\"__UploadImage($event)\"\r\n            (onDeleteImage)=\"__DeleteUserImage()\"\r\n        ></coer-filebox>\r\n\r\n        <section class=\"flex-wrap coer-system-profile max-width-550px\">\r\n            <!-- User --> \r\n            <div class=\"mv-flex-item-grow-100 flex-item-grow-45\">\r\n                <coer-textbox\r\n                    label=\"User\"\r\n                    [value]=\"_user()?.user\"\r\n                    [isReadonly]=\"true\"   \r\n                ></coer-textbox>\r\n            </div>\r\n\r\n            <!-- User Number -->\r\n            @if(IsNotOnlyWhiteSpace(_user()?.userNumber)) { \r\n                <div class=\"mv-flex-item-grow-100 flex-item-grow-45\">\r\n                    <coer-textbox\r\n                        label=\"Number\"\r\n                        [value]=\"_user()?.userNumber\"\r\n                        [isReadonly]=\"true\"       \r\n                    ></coer-textbox>\r\n                </div>\r\n            }\r\n\r\n            <!-- Email -->\r\n            <div class=\"mv-flex-item-grow-100 flex-item-grow-45\">\r\n                <coer-textbox\r\n                    label=\"Email\"\r\n                    [value]=\"_user()?.email\"\r\n                    [isReadonly]=\"true\"       \r\n                ></coer-textbox> \r\n            </div>\r\n\r\n            <!-- Nickame --> \r\n            @if(IsNotNull(_user()?.nickname)) { \r\n                <div class=\"mv-flex-item-grow-100 flex-item-grow-45\">\r\n                    <coer-textbox\r\n                        label=\"Nickame\"\r\n                        [(ngModel)]=\"_nickname\" \r\n                        [isLoading]=\"_isLoading()\"   \r\n                    ></coer-textbox>  \r\n                </div>\r\n            }   \r\n\r\n            @if(IsNotNull(_user()?.roles) && (_user()?.roles!.length > 1)) {\r\n                <!-- Role -->         \r\n                <div class=\"mv-flex-item-grow-100 flex-item-grow-45\">\r\n                    <coer-selectbox\r\n                        label=\"Role\"\r\n                        [(ngModel)]=\"_mainRole\"\r\n                        propDisplay=\"option\"\r\n                        [dataSource]=\"_userRoles()\"\r\n                        [isLoading]=\"_isLoading()\" \r\n                    ></coer-selectbox>\r\n                </div>\r\n            }\r\n\r\n            @else {\r\n                <div class=\"mv-flex-item-grow-100 flex-item-grow-45\">\r\n                    <coer-textbox\r\n                        label=\"Role\"\r\n                        [value]=\"_user()?.role!\" \r\n                        [isReadonly]=\"true\"  \r\n                    ></coer-textbox>  \r\n                </div>\r\n            }\r\n        </section> \r\n    \r\n        @if(!_staticLogin) {\r\n            <ng-template coerRef=\"footer\">\r\n                <coer-button\r\n                    #buttonSave\r\n                    color=\"dark\"\r\n                    icon=\"save\"\r\n                    [isLoading]=\"_isLoading()\"\r\n                    (onClick)=\"UpdateProfile()\"\r\n                > Update </coer-button>\r\n            </ng-template>\r\n        } \r\n    </coer-modal> \r\n\r\n    <!-- Modal Password -->\r\n    <coer-modal #modalPassword title=\"Reset Password\" icon=\"fa-solid fa-lock\" (onClose)=\"_password = ''; _passwordConfirm = '';\">\r\n        <coer-secretbox\r\n            #inputPassword\r\n            label=\"New Password\"\r\n            [(ngModel)]=\"_password\"\r\n            [isLoading]=\"_isLoading()\" \r\n            [maxLength]=\"20\"\r\n            marginBottom=\"15px\"\r\n            (onKeyupEnter)=\"__Focus()\"\r\n        ></coer-secretbox>\r\n\r\n        <coer-secretbox\r\n            #inputPasswordConfirm\r\n            label=\"Confirm Password\"\r\n            [(ngModel)]=\"_passwordConfirm\"\r\n            [isLoading]=\"_isLoading()\" \r\n            [maxLength]=\"20\"\r\n            (onKeyupEnter)=\"__Focus()\"\r\n        ></coer-secretbox>\r\n\r\n        <ng-template coerRef=\"footer\">\r\n            <!-- Reset Button -->\r\n            <coer-button\r\n                #resetButton\r\n                color=\"dark\" \r\n                [isDisabled]=\"!_enableButtonLogin\"\r\n                [isLoading]=\"_isLoading()\" \r\n                (onClick)=\"__ResetPassword()\"\r\n            > Reset </coer-button>\r\n        </ng-template>\r\n    </coer-modal>\r\n}\r\n\r\n@else {\r\n    <login-page \r\n        #loginPage \r\n        (onLogin)=\"onLogin.emit($event)\"\r\n        (onRecovery)=\"onRecoveryPassword.emit($event)\"\r\n    ></login-page>\r\n}  \r\n\r\n<coer-alert></coer-alert> \r\n\r\n<div class=\"d-none\">\r\n    <span id=\"coer-system-actionColors-primary\"></span>\r\n    <span id=\"coer-system-actionColors-secondary\"></span>\r\n    <span id=\"coer-system-actionColors-success\"></span>\r\n    <span id=\"coer-system-actionColors-warning\"></span>\r\n    <span id=\"coer-system-actionColors-danger\"></span>\r\n    <span id=\"coer-system-actionColors-navigation\"></span>\r\n    <span id=\"coer-system-actionColors-information\"></span>\r\n    <span id=\"coer-system-appColors-breadcrumbs\"></span>\r\n    <span id=\"coer-system-appColors-background\"></span> \r\n    <span id=\"coer-system-appColors-containers\"></span>\r\n    <span id=\"coer-system-appColors-sidenav\"></span> \r\n    <span id=\"coer-system-appColors-sidenav-text\"></span>\r\n    <span id=\"coer-system-appColors-sidenav-active\"></span>\r\n    <span id=\"coer-system-appColors-toolbar\"></span> \r\n    <span id=\"coer-system-appColors-toolbar-text\"></span> \r\n</div>", styles: ["section.row.coer-system-profile{max-width:600px}span#coer-system-actionColors-primary{color:var(--primary-inner)}span#coer-system-actionColors-secondary{color:var(--secondary-inner)}span#coer-system-actionColors-success{color:var(--success-inner)}span#coer-system-actionColors-warning{color:var(--warning-inner)}span#coer-system-actionColors-danger{color:var(--danger-inner)}span#coer-system-actionColors-navigation{color:var(--navigation-inner)}span#coer-system-actionColors-information{color:var(--information-inner)}span#coer-system-appColors-breadcrumbs{color:var(--breadcrumbs-inner)}span#coer-system-appColors-background{color:var(--background-inner)}span#coer-system-appColors-containers{color:var(--containers-inner)}span#coer-system-appColors-sidenav{color:var(--sidenav-inner)}span#coer-system-appColors-sidenav-text{color:var(--sidenav-text-inner)}span#coer-system-appColors-sidenav-active{color:var(--sidenav-active-inner)}span#coer-system-appColors-toolbar{color:var(--toolbar-inner)}span#coer-system-appColors-toolbar-text{color:var(--toolbar-text-inner)}\n"] }]
+        }], ctorParameters: () => [] });
 
 const ROUTES = [
     { path: 'menu', component: CoerMenuPage, data: { Page: 'COER' } },