coer-elements 2.0.5 → 2.0.7

package/fesm2022/coer-elements-pages.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { computed, effect, Component, viewChild, input, output, inject, signal, Input, NgModule } from '@angular/core';
+import { computed, effect, Component, viewChild, output, inject, signal, input, Input, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import * as i1$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
@@ -7,11 +7,13 @@ import * as i1 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import * as i4 from 'coer-elements/tools';
 import { Page, Tools, CoerAlert, Menu, ElementsHTML, User } from 'coer-elements/tools';
-import { menuSelectedSIGNAL, isLoadingSIGNAL, navigationSIGNAL, primaryColorSIGNAL, secondaryColorSIGNAL, successColorSIGNAL, warningColorSIGNAL, dangerColorSIGNAL, backgroundColorSIGNAL, sidenavColorSIGNAL, navigationColorSIGNAL, containerColorSIGNAL, isMenuOpenSIGNAL } from 'coer-elements/signals';
+import { menuSelectedSIGNAL, isLoadingSIGNAL, navigationSIGNAL, colorsSIGNAL, isMenuOpenSIGNAL } from 'coer-elements/signals';
 import * as i2 from 'coer-elements/components';
 import { ComponentsModule } from 'coer-elements/components';
 import * as i3 from 'coer-elements/directives';
 import { DirectivesModule } from 'coer-elements/directives';
+import { JWTService } from 'coer-elements/services';
+import moment from 'moment';
 
 class CoerMenuPage extends Page {
     constructor() {
@@ -41,11 +43,11 @@ class CoerMenuPage extends Page {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerMenuPage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerMenuPage, isStandalone: false, selector: "coer-menu-page", usesInheritance: true, ngImport: i0, template: "<!-- Title -->\r\n<coer-page-title\r\n    title=\"Menu\"\r\n    [breadcrumbs]=\"breadcrumbs\"\r\n    [goBack]=\"goBack\"\r\n></coer-page-title>\r\n\r\n<div class=\"flex-wrap-left fade-in\">\r\n    @for(item of _gridMenu(); track item.id) {   \r\n        @if(_isPage(item)) {\r\n            <a [routerLink]=\"_getPath(item)\" class=\"flex-wrap-item\">\r\n                @if(IsNotOnlyWhiteSpace(item?.icon)) {\r\n                    <i [class]=\"item!.icon\"></i>\r\n                }\r\n                <span> {{ item.label }} </span>\r\n            </a> \r\n        }\r\n\r\n        @else {\r\n            <a [routerLink]=\"null\" class=\"flex-wrap-item menu\">\r\n                @if(IsNotOnlyWhiteSpace(item?.icon)) {\r\n                    <i [class]=\"item!.icon\"></i>\r\n                }\r\n                <span> {{ item.label }} </span>\r\n            </a> \r\n        }\r\n    }\r\n</div>", styles: ["div.flex-wrap-left{margin:30px 30px 0;gap:30px!important}a.flex-wrap-item{border:3px ridge rgba(128,128,128,.2588235294);width:180px!important;max-width:auto!important;height:150px!important;max-height:150px!important;display:flex;align-items:center;justify-content:center;flex-direction:column;text-decoration:none;gap:5px;font-weight:700;border-radius:5px;color:var(--sidenav-inner)!important}a.flex-wrap-item i{font-size:x-large}a.flex-wrap-item.menu{background-color:var(--secondary-inner);cursor:not-allowed}a.flex-wrap-item:not(.menu):hover{transform:scale(1.02);box-shadow:0 0 15px -4px var(--navigation-inner);border-color:var(--navigation-inner);border-width:1px;color:var(--navigation-inner);background-color:var(--container-inner)}\n"], dependencies: [{ kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i2.CoerPageTitle, selector: "coer-page-title", inputs: ["title", "showNavigation", "breadcrumbs", "goBack", "information"], outputs: ["onClickInformation"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerMenuPage, isStandalone: false, selector: "coer-menu-page", usesInheritance: true, ngImport: i0, template: "<!-- Title -->\r\n<coer-page-title\r\n    title=\"Menu\"\r\n    [breadcrumbs]=\"breadcrumbs\"\r\n    [goBack]=\"goBack\"\r\n></coer-page-title>\r\n\r\n<div class=\"flex-wrap-left fade-in\">\r\n    @for(item of _gridMenu(); track item.id) {   \r\n        @if(_isPage(item)) {\r\n            <a [routerLink]=\"_getPath(item)\" class=\"flex-wrap-item\">\r\n                @if(IsNotOnlyWhiteSpace(item?.icon)) {\r\n                    <i [class]=\"item!.icon\"></i>\r\n                }\r\n                <span> {{ item.label }} </span>\r\n            </a> \r\n        }\r\n\r\n        @else {\r\n            <a [routerLink]=\"null\" class=\"flex-wrap-item menu\">\r\n                @if(IsNotOnlyWhiteSpace(item?.icon)) {\r\n                    <i [class]=\"item!.icon\"></i>\r\n                }\r\n                <span> {{ item.label }} </span>\r\n            </a> \r\n        }\r\n    }\r\n</div>", styles: ["div.flex-wrap-left{margin:30px 30px 0;gap:30px!important}a.flex-wrap-item{border:3px ridge rgba(128,128,128,.2588235294);width:180px!important;max-width:auto!important;height:150px!important;max-height:150px!important;display:flex;align-items:center;justify-content:center;flex-direction:column;text-decoration:none;gap:5px;font-weight:700!important;border-radius:5px!important;color:var(--black)!important}a.flex-wrap-item i{font-size:x-large!important}a.flex-wrap-item.menu{background-color:var(--secondary-inner)!important;cursor:not-allowed!important}a.flex-wrap-item:not(.menu):hover{transform:scale(1.02)!important;box-shadow:0 0 15px -4px var(--navigation-inner)!important;border-color:var(--navigation-inner)!important;border-width:1px!important;color:var(--navigation-inner)!important;background-color:var(--containers-inner)!important}\n"], dependencies: [{ kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i2.CoerPageTitle, selector: "coer-page-title", inputs: ["title", "showNavigation", "breadcrumbs", "goBack", "information"], outputs: ["onClickInformation"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerMenuPage, decorators: [{
             type: Component,
-            args: [{ selector: 'coer-menu-page', standalone: false, template: "<!-- Title -->\r\n<coer-page-title\r\n    title=\"Menu\"\r\n    [breadcrumbs]=\"breadcrumbs\"\r\n    [goBack]=\"goBack\"\r\n></coer-page-title>\r\n\r\n<div class=\"flex-wrap-left fade-in\">\r\n    @for(item of _gridMenu(); track item.id) {   \r\n        @if(_isPage(item)) {\r\n            <a [routerLink]=\"_getPath(item)\" class=\"flex-wrap-item\">\r\n                @if(IsNotOnlyWhiteSpace(item?.icon)) {\r\n                    <i [class]=\"item!.icon\"></i>\r\n                }\r\n                <span> {{ item.label }} </span>\r\n            </a> \r\n        }\r\n\r\n        @else {\r\n            <a [routerLink]=\"null\" class=\"flex-wrap-item menu\">\r\n                @if(IsNotOnlyWhiteSpace(item?.icon)) {\r\n                    <i [class]=\"item!.icon\"></i>\r\n                }\r\n                <span> {{ item.label }} </span>\r\n            </a> \r\n        }\r\n    }\r\n</div>", styles: ["div.flex-wrap-left{margin:30px 30px 0;gap:30px!important}a.flex-wrap-item{border:3px ridge rgba(128,128,128,.2588235294);width:180px!important;max-width:auto!important;height:150px!important;max-height:150px!important;display:flex;align-items:center;justify-content:center;flex-direction:column;text-decoration:none;gap:5px;font-weight:700;border-radius:5px;color:var(--sidenav-inner)!important}a.flex-wrap-item i{font-size:x-large}a.flex-wrap-item.menu{background-color:var(--secondary-inner);cursor:not-allowed}a.flex-wrap-item:not(.menu):hover{transform:scale(1.02);box-shadow:0 0 15px -4px var(--navigation-inner);border-color:var(--navigation-inner);border-width:1px;color:var(--navigation-inner);background-color:var(--container-inner)}\n"] }]
+            args: [{ selector: 'coer-menu-page', standalone: false, template: "<!-- Title -->\r\n<coer-page-title\r\n    title=\"Menu\"\r\n    [breadcrumbs]=\"breadcrumbs\"\r\n    [goBack]=\"goBack\"\r\n></coer-page-title>\r\n\r\n<div class=\"flex-wrap-left fade-in\">\r\n    @for(item of _gridMenu(); track item.id) {   \r\n        @if(_isPage(item)) {\r\n            <a [routerLink]=\"_getPath(item)\" class=\"flex-wrap-item\">\r\n                @if(IsNotOnlyWhiteSpace(item?.icon)) {\r\n                    <i [class]=\"item!.icon\"></i>\r\n                }\r\n                <span> {{ item.label }} </span>\r\n            </a> \r\n        }\r\n\r\n        @else {\r\n            <a [routerLink]=\"null\" class=\"flex-wrap-item menu\">\r\n                @if(IsNotOnlyWhiteSpace(item?.icon)) {\r\n                    <i [class]=\"item!.icon\"></i>\r\n                }\r\n                <span> {{ item.label }} </span>\r\n            </a> \r\n        }\r\n    }\r\n</div>", styles: ["div.flex-wrap-left{margin:30px 30px 0;gap:30px!important}a.flex-wrap-item{border:3px ridge rgba(128,128,128,.2588235294);width:180px!important;max-width:auto!important;height:150px!important;max-height:150px!important;display:flex;align-items:center;justify-content:center;flex-direction:column;text-decoration:none;gap:5px;font-weight:700!important;border-radius:5px!important;color:var(--black)!important}a.flex-wrap-item i{font-size:x-large!important}a.flex-wrap-item.menu{background-color:var(--secondary-inner)!important;cursor:not-allowed!important}a.flex-wrap-item:not(.menu):hover{transform:scale(1.02)!important;box-shadow:0 0 15px -4px var(--navigation-inner)!important;border-color:var(--navigation-inner)!important;border-width:1px!important;color:var(--navigation-inner)!important;background-color:var(--containers-inner)!important}\n"] }]
         }], ctorParameters: () => [] });
 
 class HomePage extends Page {
@@ -71,19 +73,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImpor
 
 class LoginPage {
     constructor() {
+        //appSettings 
+        this._appName = Tools.AvoidNull(appSettings?.appInfo?.name, 'string');
         //Elements
-        this.inputUser = viewChild.required('inputUser');
-        this.inputPassword = viewChild.required('inputPassword');
-        this.inputRecovery = viewChild.required('inputRecovery');
+        this._inputUser = viewChild.required('inputUser');
+        this._inputPassword = viewChild.required('inputPassword');
+        this._inputRecovery = viewChild.required('inputRecovery');
         //Signals
-        this.isLoading = isLoadingSIGNAL;
-        //Inputs 
-        this.title = input('');
+        this._isLoading = isLoadingSIGNAL;
         //Variables
-        this.user = '';
-        this.password = '';
-        this.remember = false;
-        this.show = 'login';
+        this._user = '';
+        this._password = '';
+        this._remember = false;
+        this._show = 'LOGIN';
         //Outputs 
         this.onLogin = output();
         this.onRecovery = output();
@@ -91,120 +93,110 @@ class LoginPage {
         this.IsNotOnlyWhiteSpace = Tools.IsNotOnlyWhiteSpace;
     }
     //getter
-    get enableButton() {
-        return Tools.IsNotOnlyWhiteSpace(this.user)
-            && Tools.IsNotOnlyWhiteSpace(this.password)
-            && this.password.length >= 6;
+    get _enableButton() {
+        return Tools.IsNotOnlyWhiteSpace(this._user)
+            && Tools.IsNotOnlyWhiteSpace(this._password)
+            && this._password.length >= 6;
     }
     //getter
-    get enableRecoveryButton() {
-        return Tools.IsNotOnlyWhiteSpace(this.user)
-            && this.user.length >= 6;
+    get _enableRecoveryButton() {
+        return Tools.IsNotOnlyWhiteSpace(this._user)
+            && this._user.length >= 6;
     }
     /** */
-    Login() {
-        if (this.enableButton) {
+    __Login() {
+        if (this._enableButton) {
             this.onLogin.emit({
-                user: this.user,
-                password: this.password
+                user: this._user,
+                password: this._password
             });
         }
     }
     /** */
-    Recovery() {
-        if (this.enableRecoveryButton) {
-            this.onRecovery.emit(this.user);
+    __Recovery() {
+        if (this._enableRecoveryButton) {
+            this.onRecovery.emit(this._user);
         }
     }
     /** */
     async Show(view) {
-        this.show = view;
+        this._show = view;
         await Tools.Sleep(150);
-        if (view === 'recovery') {
-            this.inputRecovery().Focus();
+        if (view === 'RECOVERY') {
+            this._inputRecovery().Focus();
         }
-        else if (view === 'login') {
-            this.inputUser().Focus();
+        else if (view === 'LOGIN') {
+            this._inputUser().Focus();
         }
     }
     /** */
     FocusUser() {
-        this.inputUser().Focus();
+        this._inputUser().Focus();
     }
     /** */
     FocusPassword() {
-        this.inputPassword().Focus(true);
+        this._inputPassword().Focus(true);
     }
     /** */
     SetUser(user) {
-        this.user = user;
+        this._user = user;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: LoginPage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: LoginPage, isStandalone: false, selector: "login-page", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onLogin: "onLogin", onRecovery: "onRecovery" }, viewQueries: [{ propertyName: "inputUser", first: true, predicate: ["inputUser"], descendants: true, isSignal: true }, { propertyName: "inputPassword", first: true, predicate: ["inputPassword"], descendants: true, isSignal: true }, { propertyName: "inputRecovery", first: true, predicate: ["inputRecovery"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"login-container\">\r\n\r\n    <!-- Title -->\r\n    <div class=\"title\">\r\n        {{ title() }}\r\n    </div>\r\n     \r\n    @if(show === 'login') {\r\n        <section>\r\n            <!-- User -->\r\n            <coer-textbox\r\n                #inputUser\r\n                label=\"User\"\r\n                [(ngModel)]=\"user\"\r\n                [isLoading]=\"isLoading()\" \r\n                marginTop=\"35px\"\r\n                marginBottom=\"35px\"\r\n                [maxLength]=\"15\"\r\n                (onKeyupEnter)=\"inputPassword.Focus(true)\"\r\n            ></coer-textbox>\r\n             \r\n            <!-- Password -->\r\n            <coer-secretbox\r\n                #inputPassword\r\n                label=\"Password\"\r\n                [(ngModel)]=\"password\"\r\n                [isLoading]=\"isLoading()\"\r\n                marginBottom=\"35px\"\r\n                [maxLength]=\"20\"\r\n                (onKeyupEnter)=\"Login()\"\r\n            ></coer-secretbox>   \r\n            \r\n            <!-- Login -->\r\n            <div class=\"text-center\">\r\n                <coer-button\r\n                    color=\"dark\" \r\n                    [isDisabled]=\"!enableButton\"\r\n                    [isLoading]=\"isLoading()\"\r\n                    (onClick)=\"Login()\"\r\n                > Login </coer-button>\r\n            </div>\r\n        </section>\r\n\r\n\r\n        <!-- Recover password -->\r\n        <div class=\"recover\" (click)=\"Show('recovery')\">\r\n            Recover password\r\n        </div>  \r\n    } \r\n\r\n\r\n    @if(show === 'recovery') {\r\n        <section>\r\n            <!-- Recovery -->\r\n            <coer-textbox\r\n                #inputRecovery\r\n                label=\"User / Email\"\r\n                [(ngModel)]=\"user\"\r\n                [isLoading]=\"isLoading()\" \r\n                marginTop=\"35px\"\r\n                marginBottom=\"35px\"\r\n                [maxLength]=\"50\"\r\n                (onKeyupEnter)=\"Recovery()\"\r\n            ></coer-textbox> \r\n\r\n\r\n            <!--  -->\r\n            <coer-textbox [isInvisible]=\"true\"></coer-textbox>   \r\n\r\n            \r\n            <!-- Login -->\r\n            <div class=\"text-center\">\r\n                <coer-button \r\n                    color=\"dark\" \r\n                    [isDisabled]=\"!enableRecoveryButton\"\r\n                    [isLoading]=\"isLoading()\"\r\n                    marginTop=\"35px\"\r\n                    (onClick)=\"Recovery()\"\r\n                > Recovery </coer-button>\r\n            </div>\r\n        </section>\r\n\r\n        <!-- Recover password -->\r\n        <div class=\"back\" (click)=\"Show('login')\">\r\n            Back\r\n        </div>\r\n    } \r\n</div>\r\n\r\n", styles: [".login-container{position:relative;border:1px solid black;border-radius:25px;min-width:400px;max-width:400px;margin:35px auto auto;padding:35px}.login-container .title{display:flex;align-items:center;justify-content:center;font-size:25px;font-weight:700;color:var(--navigation-inner)}.login-container .back,.login-container .recover,.login-container .remember{position:absolute;left:20px;bottom:-25px;font-size:small;font-weight:700;color:var(--secondary-inner);cursor:pointer}.login-container .back:hover,.login-container .recover:hover{transform:scale(1.01)}\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", "animation", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "height", "minHeight", "marginTop", "marginRight", "marginBottom", "marginLeft", "tooltipPosition", "tooltip"], outputs: ["onClick"] }, { kind: "component", type: i2.CoerSecretBox, selector: "coer-secretbox", inputs: ["value", "id", "label", "placeholder", "textPosition", "minLength", "maxLength", "isInvalid", "isValid", "showSecret", "selectOnFocus", "showClearIcon", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "marginTop", "marginRight", "marginBottom", "marginLeft"], outputs: ["onKeyupEnter", "onInput", "onClickClear", "onClickExternalButton"] }, { kind: "component", type: i2.CoerTextBox, selector: "coer-textbox", inputs: ["value", "id", "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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: LoginPage, isStandalone: false, selector: "login-page", outputs: { onLogin: "onLogin", onRecovery: "onRecovery" }, viewQueries: [{ propertyName: "_inputUser", first: true, predicate: ["inputUser"], descendants: true, isSignal: true }, { propertyName: "_inputPassword", first: true, predicate: ["inputPassword"], descendants: true, isSignal: true }, { propertyName: "_inputRecovery", first: true, predicate: ["inputRecovery"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"login-container\">\r\n\r\n    <!-- Title -->\r\n    <div class=\"title\">\r\n        {{ _appName }}\r\n    </div>\r\n     \r\n    @if(_show === 'LOGIN') {\r\n        <section>\r\n            <!-- User -->\r\n            <coer-textbox\r\n                #inputUser\r\n                label=\"User\"\r\n                [(ngModel)]=\"_user\"\r\n                [isLoading]=\"_isLoading()\" \r\n                marginTop=\"35px\"\r\n                marginBottom=\"35px\"\r\n                [maxLength]=\"15\"\r\n                (onKeyupEnter)=\"inputPassword.Focus(true)\"\r\n            ></coer-textbox>\r\n             \r\n            <!-- Password -->\r\n            <coer-secretbox\r\n                #inputPassword\r\n                label=\"Password\"\r\n                [(ngModel)]=\"_password\"\r\n                [isLoading]=\"_isLoading()\"\r\n                marginBottom=\"35px\"\r\n                [maxLength]=\"20\"\r\n                (onKeyupEnter)=\"__Login()\"\r\n            ></coer-secretbox>   \r\n            \r\n            <!-- Login -->\r\n            <div class=\"text-center\">\r\n                <coer-button\r\n                    color=\"dark\" \r\n                    [isDisabled]=\"!_enableButton\"\r\n                    [isLoading]=\"_isLoading()\"\r\n                    (onClick)=\"__Login()\"\r\n                > Login </coer-button>\r\n            </div>\r\n        </section>\r\n\r\n\r\n        <!-- Recover password -->\r\n        <div class=\"recover\" (click)=\"Show('RECOVERY')\">\r\n            Recover password\r\n        </div>  \r\n    } \r\n\r\n\r\n    @if(_show === 'RECOVERY') {\r\n        <section>\r\n            <!-- Recovery -->\r\n            <coer-textbox\r\n                #inputRecovery\r\n                label=\"User / Email\"\r\n                [(ngModel)]=\"_user\"\r\n                [isLoading]=\"_isLoading()\" \r\n                marginTop=\"35px\"\r\n                marginBottom=\"35px\"\r\n                [maxLength]=\"50\"\r\n                (onKeyupEnter)=\"__Recovery()\"\r\n            ></coer-textbox> \r\n\r\n\r\n            <!--  -->\r\n            <coer-textbox [isInvisible]=\"true\"></coer-textbox>   \r\n\r\n            \r\n            <!-- Login -->\r\n            <div class=\"text-center\">\r\n                <coer-button \r\n                    color=\"dark\" \r\n                    [isDisabled]=\"!_enableRecoveryButton\"\r\n                    [isLoading]=\"_isLoading()\"\r\n                    marginTop=\"35px\"\r\n                    (onClick)=\"__Recovery()\"\r\n                > Recovery </coer-button>\r\n            </div>\r\n        </section>\r\n\r\n        <!-- Recover password -->\r\n        <div class=\"back\" (click)=\"Show('LOGIN')\">\r\n            Back\r\n        </div>\r\n    } \r\n</div>\r\n\r\n", styles: [".login-container{position:relative;border:1px solid black;border-radius:25px;min-width:400px;max-width:400px;margin:35px auto auto;padding:35px}.login-container .title{display:flex;align-items:center;justify-content:center;font-size:25px;font-weight:700;color:var(--primary-inner)}.login-container .back,.login-container .recover,.login-container .remember{position:absolute;left:20px;bottom:-25px;font-size:small;font-weight:700;color:var(--secondary-inner);cursor:pointer}.login-container .back:hover,.login-container .recover:hover{transform:scale(1.01)}\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", "animation", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "height", "minHeight", "marginTop", "marginRight", "marginBottom", "marginLeft", "tooltipPosition", "tooltip"], outputs: ["onClick"] }, { kind: "component", type: i2.CoerSecretBox, selector: "coer-secretbox", inputs: ["value", "id", "label", "placeholder", "textPosition", "minLength", "maxLength", "isInvalid", "isValid", "showSecret", "selectOnFocus", "showClearIcon", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "marginTop", "marginRight", "marginBottom", "marginLeft"], outputs: ["onKeyupEnter", "onInput", "onClickClear", "onClickExternalButton"] }, { kind: "component", type: i2.CoerTextBox, selector: "coer-textbox", inputs: ["value", "id", "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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: LoginPage, decorators: [{
             type: Component,
-            args: [{ selector: 'login-page', standalone: false, template: "<div class=\"login-container\">\r\n\r\n    <!-- Title -->\r\n    <div class=\"title\">\r\n        {{ title() }}\r\n    </div>\r\n     \r\n    @if(show === 'login') {\r\n        <section>\r\n            <!-- User -->\r\n            <coer-textbox\r\n                #inputUser\r\n                label=\"User\"\r\n                [(ngModel)]=\"user\"\r\n                [isLoading]=\"isLoading()\" \r\n                marginTop=\"35px\"\r\n                marginBottom=\"35px\"\r\n                [maxLength]=\"15\"\r\n                (onKeyupEnter)=\"inputPassword.Focus(true)\"\r\n            ></coer-textbox>\r\n             \r\n            <!-- Password -->\r\n            <coer-secretbox\r\n                #inputPassword\r\n                label=\"Password\"\r\n                [(ngModel)]=\"password\"\r\n                [isLoading]=\"isLoading()\"\r\n                marginBottom=\"35px\"\r\n                [maxLength]=\"20\"\r\n                (onKeyupEnter)=\"Login()\"\r\n            ></coer-secretbox>   \r\n            \r\n            <!-- Login -->\r\n            <div class=\"text-center\">\r\n                <coer-button\r\n                    color=\"dark\" \r\n                    [isDisabled]=\"!enableButton\"\r\n                    [isLoading]=\"isLoading()\"\r\n                    (onClick)=\"Login()\"\r\n                > Login </coer-button>\r\n            </div>\r\n        </section>\r\n\r\n\r\n        <!-- Recover password -->\r\n        <div class=\"recover\" (click)=\"Show('recovery')\">\r\n            Recover password\r\n        </div>  \r\n    } \r\n\r\n\r\n    @if(show === 'recovery') {\r\n        <section>\r\n            <!-- Recovery -->\r\n            <coer-textbox\r\n                #inputRecovery\r\n                label=\"User / Email\"\r\n                [(ngModel)]=\"user\"\r\n                [isLoading]=\"isLoading()\" \r\n                marginTop=\"35px\"\r\n                marginBottom=\"35px\"\r\n                [maxLength]=\"50\"\r\n                (onKeyupEnter)=\"Recovery()\"\r\n            ></coer-textbox> \r\n\r\n\r\n            <!--  -->\r\n            <coer-textbox [isInvisible]=\"true\"></coer-textbox>   \r\n\r\n            \r\n            <!-- Login -->\r\n            <div class=\"text-center\">\r\n                <coer-button \r\n                    color=\"dark\" \r\n                    [isDisabled]=\"!enableRecoveryButton\"\r\n                    [isLoading]=\"isLoading()\"\r\n                    marginTop=\"35px\"\r\n                    (onClick)=\"Recovery()\"\r\n                > Recovery </coer-button>\r\n            </div>\r\n        </section>\r\n\r\n        <!-- Recover password -->\r\n        <div class=\"back\" (click)=\"Show('login')\">\r\n            Back\r\n        </div>\r\n    } \r\n</div>\r\n\r\n", styles: [".login-container{position:relative;border:1px solid black;border-radius:25px;min-width:400px;max-width:400px;margin:35px auto auto;padding:35px}.login-container .title{display:flex;align-items:center;justify-content:center;font-size:25px;font-weight:700;color:var(--navigation-inner)}.login-container .back,.login-container .recover,.login-container .remember{position:absolute;left:20px;bottom:-25px;font-size:small;font-weight:700;color:var(--secondary-inner);cursor:pointer}.login-container .back:hover,.login-container .recover:hover{transform:scale(1.01)}\n"] }]
+            args: [{ selector: 'login-page', standalone: false, template: "<div class=\"login-container\">\r\n\r\n    <!-- Title -->\r\n    <div class=\"title\">\r\n        {{ _appName }}\r\n    </div>\r\n     \r\n    @if(_show === 'LOGIN') {\r\n        <section>\r\n            <!-- User -->\r\n            <coer-textbox\r\n                #inputUser\r\n                label=\"User\"\r\n                [(ngModel)]=\"_user\"\r\n                [isLoading]=\"_isLoading()\" \r\n                marginTop=\"35px\"\r\n                marginBottom=\"35px\"\r\n                [maxLength]=\"15\"\r\n                (onKeyupEnter)=\"inputPassword.Focus(true)\"\r\n            ></coer-textbox>\r\n             \r\n            <!-- Password -->\r\n            <coer-secretbox\r\n                #inputPassword\r\n                label=\"Password\"\r\n                [(ngModel)]=\"_password\"\r\n                [isLoading]=\"_isLoading()\"\r\n                marginBottom=\"35px\"\r\n                [maxLength]=\"20\"\r\n                (onKeyupEnter)=\"__Login()\"\r\n            ></coer-secretbox>   \r\n            \r\n            <!-- Login -->\r\n            <div class=\"text-center\">\r\n                <coer-button\r\n                    color=\"dark\" \r\n                    [isDisabled]=\"!_enableButton\"\r\n                    [isLoading]=\"_isLoading()\"\r\n                    (onClick)=\"__Login()\"\r\n                > Login </coer-button>\r\n            </div>\r\n        </section>\r\n\r\n\r\n        <!-- Recover password -->\r\n        <div class=\"recover\" (click)=\"Show('RECOVERY')\">\r\n            Recover password\r\n        </div>  \r\n    } \r\n\r\n\r\n    @if(_show === 'RECOVERY') {\r\n        <section>\r\n            <!-- Recovery -->\r\n            <coer-textbox\r\n                #inputRecovery\r\n                label=\"User / Email\"\r\n                [(ngModel)]=\"_user\"\r\n                [isLoading]=\"_isLoading()\" \r\n                marginTop=\"35px\"\r\n                marginBottom=\"35px\"\r\n                [maxLength]=\"50\"\r\n                (onKeyupEnter)=\"__Recovery()\"\r\n            ></coer-textbox> \r\n\r\n\r\n            <!--  -->\r\n            <coer-textbox [isInvisible]=\"true\"></coer-textbox>   \r\n\r\n            \r\n            <!-- Login -->\r\n            <div class=\"text-center\">\r\n                <coer-button \r\n                    color=\"dark\" \r\n                    [isDisabled]=\"!_enableRecoveryButton\"\r\n                    [isLoading]=\"_isLoading()\"\r\n                    marginTop=\"35px\"\r\n                    (onClick)=\"__Recovery()\"\r\n                > Recovery </coer-button>\r\n            </div>\r\n        </section>\r\n\r\n        <!-- Recover password -->\r\n        <div class=\"back\" (click)=\"Show('LOGIN')\">\r\n            Back\r\n        </div>\r\n    } \r\n</div>\r\n\r\n", styles: [".login-container{position:relative;border:1px solid black;border-radius:25px;min-width:400px;max-width:400px;margin:35px auto auto;padding:35px}.login-container .title{display:flex;align-items:center;justify-content:center;font-size:25px;font-weight:700;color:var(--primary-inner)}.login-container .back,.login-container .recover,.login-container .remember{position:absolute;left:20px;bottom:-25px;font-size:small;font-weight:700;color:var(--secondary-inner);cursor:pointer}.login-container .back:hover,.login-container .recover:hover{transform:scale(1.01)}\n"] }]
         }] });
 
 class COERSystem {
     constructor() {
         //Injection
-        this.alert = inject(CoerAlert);
+        this._alert = inject(CoerAlert);
+        this._jwtService = inject(JWTService);
+        //appSettings 
+        this._appName = Tools.AvoidNull(appSettings?.appInfo?.name, 'string');
+        this._staticLogin = Tools.AvoidNull(appSettings?.login?.staticLogin, 'boolean');
         //Elements
-        this.sidenav = viewChild.required('sidenav');
-        this.loginPage = viewChild.required('loginPage');
-        this.modalProfile = viewChild.required('modalProfile');
-        this.modalPassword = viewChild.required('modalPassword');
-        this.inputPassword = viewChild.required('inputPassword');
-        this.inputPasswordConfirm = viewChild.required('inputPasswordConfirm');
-        this.resetButton = viewChild.required('resetButton');
-        //Variables
-        this.title = 'COER System';
+        this._sidenav = viewChild.required('sidenav');
+        this._loginPage = viewChild.required('loginPage');
+        this._modalProfile = viewChild.required('modalProfile');
+        this._modalPassword = viewChild.required('modalPassword');
+        this._inputPassword = viewChild.required('inputPassword');
+        this._inputPasswordConfirm = viewChild.required('inputPasswordConfirm');
+        this._resetButton = viewChild.required('resetButton');
         this._isLoading = isLoadingSIGNAL;
-        this.mainRole = null;
-        this.nickname = '';
-        this.password = '';
-        this.passwordConfirm = '';
+        this._mainRole = null;
+        this._nickname = '';
+        this._password = '';
+        this._passwordConfirm = '';
         this._userRoles = signal([]);
         this._user = signal(null);
-        //Inputs 
+        this._userImageStatic = '';
+        //Inputs
         this.userImage = input(null);
         this.toolbarMenu = input([]);
         //Outputs 
         this.onLogin = output();
-        this.onRecovery = output();
-        this.onClickOption = output();
+        this.onClickMenuOption = output();
         this.onResetPassword = output();
+        this.onRecoveryPassword = output();
         this.onUpdateProfile = output();
         this.onUploadUserImage = output();
         this.onDeleteUserImage = output();
+        this.onUpdateJWT = output();
         //Generic Tools
         this.IsNotNull = Tools.IsNotNull;
         this.IsNotOnlyWhiteSpace = Tools.IsNotOnlyWhiteSpace;
         //computed
         this._toolbarMenu = computed(() => {
-            const menu = [...this.toolbarMenu()];
-            return [
-                { label: 'Profile', icon: 'fa-solid fa-user' },
-                { label: 'Reset Password', icon: 'fa-solid fa-lock' },
-                { label: 'Log Out', icon: 'fa-solid fa-door-open' }
-            ].concat(menu);
-        });
-        //computed
-        this.userName = computed(() => {
-            const user = this._user();
-            if (Tools.IsNotNull(user)) {
-                if (Tools.IsNotOnlyWhiteSpace(user?.fullName))
-                    return user?.fullName;
-                const name = Tools.IsNotNull(this._user()) && Tools.IsNotOnlyWhiteSpace(this._user()?.name) ? this._user().name : '';
-                const firstName = Tools.IsNotNull(this._user()) && Tools.IsNotOnlyWhiteSpace(this._user()?.firstName) ? this._user().firstName : '';
-                const middleName = Tools.IsNotNull(this._user()) && Tools.IsNotOnlyWhiteSpace(this._user()?.middleName) ? this._user().middleName : '';
-                const lastName = Tools.IsNotNull(this._user()) && Tools.IsNotOnlyWhiteSpace(this._user()?.lastName) ? this._user().lastName : '';
-                const secondLastName = Tools.IsNotNull(this._user()) && Tools.IsNotOnlyWhiteSpace(this._user()?.secondName) ? this._user().secondLastName : '';
-                return `${name} ${firstName} ${middleName} ${lastName} ${secondLastName}`;
+            let toolbarMenu = this.toolbarMenu();
+            if (this._staticLogin) {
+                const index = toolbarMenu.findIndex(x => x.label.toUpperCase() == 'RESET PASSWORD');
+                if (index > -1)
+                    toolbarMenu.splice(index, 1);
             }
-            return '';
+            return toolbarMenu.concat([{ label: 'Log Out', icon: 'fa-solid fa-door-open' }]);
         });
     }
     set user(value) {
@@ -212,68 +204,17 @@ class COERSystem {
             this._user.set(value);
             Tools.Sleep(1000, 'coerSystemGetUser').then(() => {
                 if (Tools.IsNotOnlyWhiteSpace(this._user()?.nickname)) {
-                    this.nickname = this._user().nickname;
+                    this._nickname = this._user()?.nickname;
                 }
             });
         }
     }
     set userRoles(value) {
         if (Tools.IsNotNull(value)) {
-            this._userRoles.set(value);
+            let id = 0;
+            this._userRoles.set(value.map(item => Object.assign({ id: ++id, option: item })));
             Tools.Sleep(1000, 'coerSystemGetUserRoles').then(() => {
-                let mainRole = null;
-                //id & name
-                if (Tools.IsNull(mainRole)) {
-                    mainRole = this._userRoles().find(x => (typeof x?.id == 'number')
-                        && (typeof x?.name == 'string')
-                        && x.id === (this._user()?.roleId)) || null;
-                }
-                //id & name
-                if (Tools.IsNull(mainRole)) {
-                    mainRole = this._userRoles().find(x => (typeof x?.id == 'number')
-                        && (typeof x?.name == 'string')
-                        && x.name === (this._user()?.role)) || null;
-                }
-                //roleId & name
-                if (Tools.IsNull(mainRole)) {
-                    mainRole = this._userRoles().find(x => (typeof x?.roleId == 'number')
-                        && (typeof x?.name == 'string')
-                        && x.roleId === (this._user()?.roleId)) || null;
-                }
-                //roleId & name
-                if (Tools.IsNull(mainRole)) {
-                    mainRole = this._userRoles().find(x => (typeof x?.roleId == 'number')
-                        && (typeof x?.name == 'string')
-                        && x.name === (this._user()?.role)) || null;
-                }
-                //id & role
-                if (Tools.IsNull(mainRole)) {
-                    mainRole = this._userRoles().find(x => (typeof x?.id == 'number')
-                        && (typeof x?.role == 'string')
-                        && x.id === (this._user()?.roleId)) || null;
-                }
-                //id & role
-                if (Tools.IsNull(mainRole)) {
-                    mainRole = this._userRoles().find(x => (typeof x?.id == 'number')
-                        && (typeof x?.role == 'string')
-                        && x.role === (this._user()?.role)) || null;
-                }
-                //roleId & role
-                if (Tools.IsNull(mainRole)) {
-                    mainRole = this._userRoles().find(x => (typeof x?.roleId == 'number')
-                        && (typeof x?.role == 'string')
-                        && x.roleId === (this._user()?.roleId)) || null;
-                }
-                //roleId & role
-                if (Tools.IsNull(mainRole)) {
-                    mainRole = this._userRoles().find(x => (typeof x?.roleId == 'number')
-                        && (typeof x?.role == 'string')
-                        && x.role === (this._user()?.role)) || null;
-                }
-                //Response
-                if (Tools.IsNotNull(mainRole)) {
-                    this.mainRole = mainRole;
-                }
+                this._mainRole = this._userRoles().find(x => x.option === this._user()?.role) || null;
             });
         }
     }
@@ -282,135 +223,245 @@ class COERSystem {
             navigationSIGNAL.set(value);
             Tools.Sleep(1000, 'coerSystemGetUserNavigation').then(() => {
                 if (Tools.IsNotNull(this._user())) {
-                    this.sidenav().SetActiveLink(Menu.GetSelectedOption());
+                    this._sidenav().SetActiveLink(Menu.GetSelectedOption());
                 }
             });
         }
     }
     async ngAfterContentInit() {
         await Tools.Sleep();
-        primaryColorSIGNAL.set(ElementsHTML.GetCssValueBy('#coer-system-color-primary', 'color'));
-        secondaryColorSIGNAL.set(ElementsHTML.GetCssValueBy('#coer-system-color-secondary', 'color'));
-        successColorSIGNAL.set(ElementsHTML.GetCssValueBy('#coer-system-color-success', 'color'));
-        warningColorSIGNAL.set(ElementsHTML.GetCssValueBy('#coer-system-color-warning', 'color'));
-        dangerColorSIGNAL.set(ElementsHTML.GetCssValueBy('#coer-system-color-danger', 'color'));
-        backgroundColorSIGNAL.set(ElementsHTML.GetCssValueBy('#coer-system-color-background', 'color'));
-        sidenavColorSIGNAL.set(ElementsHTML.GetCssValueBy('#coer-system-color-sidenav', 'color'));
-        navigationColorSIGNAL.set(ElementsHTML.GetCssValueBy('#coer-system-color-navigation', 'color'));
-        containerColorSIGNAL.set(ElementsHTML.GetCssValueBy('#coer-system-color-container', 'color'));
+        colorsSIGNAL.update(colors => ({
+            fixedColors: { ...colors.fixedColors },
+            actionColors: {
+                primary: ElementsHTML.GetElementColor(ElementsHTML.GetElement('#coer-system-actionColors-primary')),
+                secondary: ElementsHTML.GetElementColor(ElementsHTML.GetElement('#coer-system-actionColors-secondary')),
+                success: ElementsHTML.GetElementColor(ElementsHTML.GetElement('#coer-system-actionColors-success')),
+                warning: ElementsHTML.GetElementColor(ElementsHTML.GetElement('#coer-system-actionColors-warning')),
+                danger: ElementsHTML.GetElementColor(ElementsHTML.GetElement('#coer-system-actionColors-danger')),
+                navigation: ElementsHTML.GetElementColor(ElementsHTML.GetElement('#coer-system-actionColors-navigation')),
+                information: ElementsHTML.GetElementColor(ElementsHTML.GetElement('#coer-system-actionColors-information'))
+            },
+            appColors: {
+                breadcrumbs: ElementsHTML.GetElementColor(ElementsHTML.GetElement('#coer-system-appColors-breadcrumbs')),
+                background: ElementsHTML.GetElementColor(ElementsHTML.GetElement('#coer-system-appColors-background')),
+                containers: ElementsHTML.GetElementColor(ElementsHTML.GetElement('#coer-system-appColors-containers')),
+                sidenav: ElementsHTML.GetElementColor(ElementsHTML.GetElement('#coer-system-appColors-sidenav')),
+                sidenavText: ElementsHTML.GetElementColor(ElementsHTML.GetElement('#coer-system-appColors-sidenav-text')),
+                toolbar: ElementsHTML.GetElementColor(ElementsHTML.GetElement('#coer-system-appColors-toolbar')),
+                toolbarText: ElementsHTML.GetElementColor(ElementsHTML.GetElement('#coer-system-appColors-toolbar-text'))
+            }
+        }));
+    }
+    ngOnDestroy() {
+        clearInterval(this._watchJWT$);
+        clearInterval(this._startJWT$);
     }
     //getter
-    get enableButton() {
+    get _enableButtonLogin() {
         return Tools.IsNotOnlyWhiteSpace(this._user())
-            && Tools.IsNotOnlyWhiteSpace(this.password)
-            && Tools.IsNotOnlyWhiteSpace(this.passwordConfirm)
-            && this.password.length >= 5
-            && this.passwordConfirm.length >= 5
+            && Tools.IsNotOnlyWhiteSpace(this._password)
+            && Tools.IsNotOnlyWhiteSpace(this._passwordConfirm)
+            && this._password.length >= 5
+            && this._passwordConfirm.length >= 5
             && !this._isLoading()
-            && this.password === this.passwordConfirm;
+            && this._password === this._passwordConfirm;
+    }
+    //getter
+    get _profileTitle() {
+        return Tools.IsNotOnlyWhiteSpace(this._user()?.fullName)
+            ? this._user()?.fullName
+            : this._user()?.user;
+    }
+    //getter
+    get _userImage() {
+        return this._staticLogin
+            ? this._userImageStatic
+            : (this.IsNotOnlyWhiteSpace(this.userImage()) ? this.userImage() : '');
     }
     /** */
-    async SelectedOption(menu) {
-        this.onClickOption.emit(menu);
+    async __SelectedOption(menu) {
+        this.onClickMenuOption.emit(menu);
+        if (Tools.AvoidNull(menu?.preventDefault, 'boolean'))
+            return;
+        const hasPath = Tools.IsNotOnlyWhiteSpace(menu?.path);
         switch (menu.label) {
             case 'Profile': {
-                this.modalProfile().Open();
+                if (!hasPath)
+                    this._modalProfile().Open();
                 break;
             }
             case 'Reset Password': {
-                this.modalPassword().Open();
-                await Tools.Sleep(1000);
-                this.Focus();
+                if (!hasPath && !this._staticLogin) {
+                    this._modalPassword().Open();
+                    await Tools.Sleep(750);
+                    this.__Focus();
+                }
                 break;
             }
             case 'Log Out': {
-                User.LogOut();
+                if (!hasPath)
+                    User.LogOut();
                 break;
             }
         }
     }
     /** */
     SetUser(user) {
-        this.loginPage().SetUser(user);
+        this._loginPage().SetUser(user);
     }
     /** */
     FocusUser() {
-        this.loginPage().FocusUser();
+        this._loginPage().FocusUser();
     }
     /** */
     FocusPassword() {
-        this.loginPage().FocusPassword();
+        this._loginPage().FocusPassword();
     }
     /** */
-    Focus() {
-        if (Tools.IsOnlyWhiteSpace(this.password)) {
-            this.inputPassword().Focus();
+    __Focus() {
+        if (Tools.IsOnlyWhiteSpace(this._password)) {
+            this._inputPassword().Focus();
             return;
         }
-        if (Tools.IsOnlyWhiteSpace(this.passwordConfirm)) {
-            this.inputPasswordConfirm().Focus();
+        if (Tools.IsOnlyWhiteSpace(this._passwordConfirm)) {
+            this._inputPasswordConfirm().Focus();
             return;
         }
-        if (this.enableButton) {
-            this.resetButton().Focus();
+        if (this._enableButtonLogin) {
+            this._resetButton().Focus();
         }
     }
     /** */
-    ResetPassword() {
-        if (this.enableButton) {
-            const password = this.password;
-            this.onResetPassword.emit(password);
+    __ResetPassword() {
+        if (this._enableButtonLogin && !this._staticLogin) {
+            this.onResetPassword.emit(this._password);
         }
     }
     /** */
     CloseModal() {
-        this.modalPassword().Close();
-        this.modalProfile().Close();
+        this._modalPassword().Close();
+        this._modalProfile().Close();
     }
     /** */
     Show(view) {
-        this.loginPage().Show(view);
+        this._loginPage().Show(view);
     }
     /** */
     UpdateProfile() {
-        this.onUpdateProfile.emit({
-            user: Tools.AvoidNull(this._user()?.user, 'string'),
-            nickname: Tools.AvoidNull(this.nickname, 'string'),
-            roleId: Tools.AvoidNull(this.mainRole?.id, 'number'),
-            role: Tools.AvoidNull(this.mainRole?.name, 'string')
-        });
+        if (!this._staticLogin) {
+            const role = this._userRoles().length > 1
+                ? Tools.AvoidNull(this._mainRole?.option, 'string')
+                : this._user()?.role;
+            this.onUpdateProfile.emit({
+                userId: Tools.AvoidNull(this._user()?.userId, 'number'),
+                user: Tools.AvoidNull(this._user()?.user, 'string'),
+                userNumber: Tools.AvoidNull(this._user()?.userNumber, 'string'),
+                role: role,
+                fullName: Tools.AvoidNull(this._user()?.fullName, 'string'),
+                nickname: Tools.AvoidNull(this._nickname, 'string'),
+                email: Tools.AvoidNull(this._user()?.email, 'string'),
+                roles: this._userRoles().map(item => item.option)
+            });
+        }
     }
     /** */
-    UploadImage(images) {
+    __UploadImage(images) {
         if (images.length > 0) {
             const [image] = images;
-            this.onUploadUserImage.emit(image);
+            if (this._staticLogin) {
+                this._userImageStatic = image.base64 || '';
+            }
+            else {
+                this.onUploadUserImage.emit(image);
+            }
         }
     }
     /** */
-    async DeleteUserImage() {
-        const response = await this.alert.Confirm(`Remove <b>User Image</b> ?`, 'warning', 'fa-solid fa-trash-can');
-        if (response)
-            this.onDeleteUserImage.emit();
+    __DeleteUserImage() {
+        this._alert.Confirm(`Remove <b>User Image</b> ?`, 'warning', 'fa-solid fa-trash-can').then(response => {
+            if (response) {
+                if (this._staticLogin) {
+                    this._userImageStatic = '';
+                }
+                else {
+                    this.onDeleteUserImage.emit();
+                }
+            }
+        });
     }
     /** */
     OpenSideNav() {
         if (!isMenuOpenSIGNAL()) {
-            this.sidenav().Toggle();
+            this._sidenav().Toggle();
         }
     }
     /** */
     CloseSideNav() {
         if (isMenuOpenSIGNAL()) {
-            this.sidenav().Toggle();
+            this._sidenav().Toggle();
+        }
+    }
+    /** */
+    StartJWT(validateEvery = 1000, diferenceToUpdate = 30) {
+        if (!this._staticLogin) {
+            if (Tools.IsOnlyWhiteSpace(this._jwtService.jwt)) {
+                this._alert.Warning('The JWT has not been provided');
+                return;
+            }
+            this._WatchJWT();
+            this.onUpdateJWT.emit();
+            clearInterval(this._startJWT$);
+            this._startJWT$ = setInterval(() => {
+                const DIFERENCE = Math.abs(moment().diff(this._jwtService.expirationDate, 'minute'));
+                if (DIFERENCE <= diferenceToUpdate) {
+                    this.onUpdateJWT.emit();
+                }
+            }, validateEvery);
+        }
+    }
+    /** */
+    _WatchJWT() {
+        if (this._jwtService.isExpired) {
+            User.LogOut();
+            return;
         }
+        clearInterval(this._watchJWT$);
+        this._watchJWT$ = setInterval(() => {
+            if (this._jwtService.isExpired) {
+                clearInterval(this._watchJWT$);
+                User.LogOut();
+            }
+        }, 1000);
+    }
+    /** */
+    UpdateJWT(jwt) {
+        if (this._staticLogin)
+            return;
+        this._jwtService.UpdateJWT(jwt);
+    }
+    /** */
+    StopJWT() {
+        if (this._staticLogin)
+            return;
+        clearInterval(this._startJWT$);
+    }
+    /** */
+    UseStaticLogin() {
+        User.Set({
+            user: 'COERSystem',
+            role: 'Development',
+            fullName: 'COER System',
+            email: 'coer.system@gmail.com',
+            jwt: 'staticLogin'
+        });
+        return User.Get();
     }
     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", onRecovery: "onRecovery", onClickOption: "onClickOption", onResetPassword: "onResetPassword", onUpdateProfile: "onUpdateProfile", onUploadUserImage: "onUploadUserImage", onDeleteUserImage: "onDeleteUserImage" }, 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]=\"userName()\" icon=\"fa-solid fa-user\" width=\"auto\" height=\"350px\" (onClose)=\"null\"> \r\n        <coer-filebox\r\n            type=\"image\"\r\n            [image]=\"{ \r\n                value: IsNotOnlyWhiteSpace(userImage()) ? userImage() : '', \r\n                name: userName(),\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        <div class=\"d-flex\"> \r\n            <!-- User --> \r\n            <coer-textbox\r\n                label=\"User\"\r\n                [value]=\"_user()?.user\"\r\n                [isReadonly]=\"true\" \r\n                marginRight=\"15px\"\r\n                marginBottom=\"15px\" \r\n                width=\"250px\"           \r\n            ></coer-textbox>         \r\n            \r\n            <!-- Email -->         \r\n            <coer-textbox\r\n                label=\"Email\"\r\n                [value]=\"_user()?.email\"\r\n                [isReadonly]=\"true\" \r\n                marginBottom=\"15px\"\r\n                width=\"250px\"            \r\n            ></coer-textbox> \r\n        </div> \r\n    \r\n        <div class=\"d-flex\"> \r\n            <!-- Nickame --> \r\n            <coer-textbox\r\n                label=\"Nickame\"\r\n                [(ngModel)]=\"nickname\" \r\n                [isLoading]=\"_isLoading()\"\r\n                marginRight=\"15px\"\r\n                marginBottom=\"15px\" \r\n                width=\"250px\"           \r\n            ></coer-textbox>         \r\n            \r\n            <!-- Role -->         \r\n            <coer-selectbox\r\n                label=\"Role\"\r\n                [(ngModel)]=\"mainRole\"\r\n                [dataSource]=\"_userRoles()\"\r\n                [isLoading]=\"_isLoading()\" \r\n                marginBottom=\"15px\"\r\n                width=\"250px\"            \r\n            ></coer-selectbox> \r\n        </div> \r\n    \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    </coer-modal>\r\n\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-textbox\r\n            #inputPassword\r\n            label=\"New Password\"\r\n            [(ngModel)]=\"password\"\r\n            [isLoading]=\"_isLoading()\"\r\n            [selectOnFocus]=\"true\"\r\n            marginBottom=\"15px\"\r\n            (onKeyupEnter)=\"Focus()\"\r\n        ></coer-textbox>\r\n\r\n        <coer-textbox\r\n            #inputPasswordConfirm\r\n            label=\"Confirm Password\"\r\n            [(ngModel)]=\"passwordConfirm\"\r\n            [isLoading]=\"_isLoading()\"\r\n            [selectOnFocus]=\"true\" \r\n            (onKeyupEnter)=\"Focus()\"\r\n        ></coer-textbox>\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]=\"!enableButton\"\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        [title]=\"title\" \r\n        (onLogin)=\"onLogin.emit($event)\"\r\n        (onRecovery)=\"onRecovery.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-color-primary\"></span>\r\n    <span id=\"coer-system-color-secondary\"></span>\r\n    <span id=\"coer-system-color-success\"></span>\r\n    <span id=\"coer-system-color-warning\"></span>\r\n    <span id=\"coer-system-color-danger\"></span>\r\n    <span id=\"coer-system-color-background\"></span>\r\n    <span id=\"coer-system-color-sidenav\"></span>\r\n    <span id=\"coer-system-color-navigation\"></span>\r\n    <span id=\"coer-system-color-container\"></span> \r\n</div>", styles: ["span#coer-system-color-primary{color:var(--primary-inner)}span#coer-system-color-secondary{color:var(--secondary-inner)}span#coer-system-color-success{color:var(--success-inner)}span#coer-system-color-warning{color:var(--warning-inner)}span#coer-system-color-danger{color:var(--danger-inner)}span#coer-system-color-background{color:var(--background-inner)}span#coer-system-color-sidenav{color:var(--sidenav-inner)}span#coer-system-color-navigation{color:var(--navigation-inner)}span#coer-system-color-container{color:var(--container-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", "animation", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "height", "minHeight", "marginTop", "marginRight", "marginBottom", "marginLeft", "tooltipPosition", "tooltip"], outputs: ["onClick"] }, { kind: "component", type: i2.CoerFilebox, selector: "coer-filebox", inputs: ["type", "multiple", "isLoading", "isDisabled", "isReadonly", "isInvisible", "image"], 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.CoerSidenav, selector: "coer-sidenav", outputs: ["onMenuSelected"] }, { kind: "component", type: i2.CoerSelectbox, selector: "coer-selectbox", inputs: ["value", "id", "label", "placeholder", "isInvalid", "isValid", "dataSource", "propDisplay", "rowsByPage", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "marginTop", "marginRight", "marginBottom", "marginLeft"], outputs: ["onSelected", "onUnselect"] }, { kind: "component", type: i2.CoerTextBox, selector: "coer-textbox", inputs: ["value", "id", "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", inputs: ["title"], 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 }, 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=\"fa-solid fa-user\" 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=\"row coer-system-profile\">\r\n            <!-- User --> \r\n            <div class=\"col-6\">\r\n                <coer-textbox\r\n                    label=\"User\"\r\n                    [value]=\"_user()?.user\"\r\n                    [isReadonly]=\"true\"  \r\n                    marginBottom=\"15px\"       \r\n                ></coer-textbox>\r\n            </div>\r\n\r\n            <!-- User Number -->\r\n            @if(IsNotOnlyWhiteSpace(_user()?.userNumber)) { \r\n                <div class=\"col-6\">\r\n                    <coer-textbox\r\n                        label=\"Number\"\r\n                        [value]=\"_user()?.userNumber\"\r\n                        [isReadonly]=\"true\" \r\n                        marginBottom=\"15px\"           \r\n                    ></coer-textbox>\r\n                </div>\r\n            }\r\n\r\n            <!-- Email -->\r\n            <div class=\"col-6\">\r\n                <coer-textbox\r\n                    label=\"Email\"\r\n                    [value]=\"_user()?.email\"\r\n                    [isReadonly]=\"true\" \r\n                    marginBottom=\"15px\"           \r\n                ></coer-textbox> \r\n            </div>\r\n\r\n            <!-- Nickame --> \r\n            @if(IsNotOnlyWhiteSpace(_user()?.nickname)) { \r\n                <div class=\"col-6\">\r\n                    <coer-textbox\r\n                        label=\"Nickame\"\r\n                        [(ngModel)]=\"_nickname\" \r\n                        [isLoading]=\"_isLoading()\" \r\n                        marginBottom=\"15px\"       \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=\"col-6\">\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                        marginBottom=\"15px\"      \r\n                    ></coer-selectbox>\r\n                </div>\r\n            }\r\n\r\n            @else {\r\n                <div class=\"col-6\">\r\n                    <coer-textbox\r\n                        label=\"Role\"\r\n                        [value]=\"_user()?.role!\" \r\n                        [isReadonly]=\"true\" \r\n                        marginBottom=\"15px\"       \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-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-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", "animation", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "height", "minHeight", "marginTop", "marginRight", "marginBottom", "marginLeft", "tooltipPosition", "tooltip"], outputs: ["onClick"] }, { kind: "component", type: i2.CoerFilebox, selector: "coer-filebox", inputs: ["type", "multiple", "isLoading", "isDisabled", "isReadonly", "isInvisible", "image"], 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: ["value", "id", "label", "placeholder", "textPosition", "minLength", "maxLength", "isInvalid", "isValid", "showSecret", "selectOnFocus", "showClearIcon", "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: ["value", "id", "label", "placeholder", "isInvalid", "isValid", "dataSource", "propDisplay", "rowsByPage", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "marginTop", "marginRight", "marginBottom", "marginLeft"], outputs: ["onSelected", "onUnselect"] }, { kind: "component", type: i2.CoerTextBox, selector: "coer-textbox", inputs: ["value", "id", "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]=\"userName()\" icon=\"fa-solid fa-user\" width=\"auto\" height=\"350px\" (onClose)=\"null\"> \r\n        <coer-filebox\r\n            type=\"image\"\r\n            [image]=\"{ \r\n                value: IsNotOnlyWhiteSpace(userImage()) ? userImage() : '', \r\n                name: userName(),\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        <div class=\"d-flex\"> \r\n            <!-- User --> \r\n            <coer-textbox\r\n                label=\"User\"\r\n                [value]=\"_user()?.user\"\r\n                [isReadonly]=\"true\" \r\n                marginRight=\"15px\"\r\n                marginBottom=\"15px\" \r\n                width=\"250px\"           \r\n            ></coer-textbox>         \r\n            \r\n            <!-- Email -->         \r\n            <coer-textbox\r\n                label=\"Email\"\r\n                [value]=\"_user()?.email\"\r\n                [isReadonly]=\"true\" \r\n                marginBottom=\"15px\"\r\n                width=\"250px\"            \r\n            ></coer-textbox> \r\n        </div> \r\n    \r\n        <div class=\"d-flex\"> \r\n            <!-- Nickame --> \r\n            <coer-textbox\r\n                label=\"Nickame\"\r\n                [(ngModel)]=\"nickname\" \r\n                [isLoading]=\"_isLoading()\"\r\n                marginRight=\"15px\"\r\n                marginBottom=\"15px\" \r\n                width=\"250px\"           \r\n            ></coer-textbox>         \r\n            \r\n            <!-- Role -->         \r\n            <coer-selectbox\r\n                label=\"Role\"\r\n                [(ngModel)]=\"mainRole\"\r\n                [dataSource]=\"_userRoles()\"\r\n                [isLoading]=\"_isLoading()\" \r\n                marginBottom=\"15px\"\r\n                width=\"250px\"            \r\n            ></coer-selectbox> \r\n        </div> \r\n    \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    </coer-modal>\r\n\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-textbox\r\n            #inputPassword\r\n            label=\"New Password\"\r\n            [(ngModel)]=\"password\"\r\n            [isLoading]=\"_isLoading()\"\r\n            [selectOnFocus]=\"true\"\r\n            marginBottom=\"15px\"\r\n            (onKeyupEnter)=\"Focus()\"\r\n        ></coer-textbox>\r\n\r\n        <coer-textbox\r\n            #inputPasswordConfirm\r\n            label=\"Confirm Password\"\r\n            [(ngModel)]=\"passwordConfirm\"\r\n            [isLoading]=\"_isLoading()\"\r\n            [selectOnFocus]=\"true\" \r\n            (onKeyupEnter)=\"Focus()\"\r\n        ></coer-textbox>\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]=\"!enableButton\"\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        [title]=\"title\" \r\n        (onLogin)=\"onLogin.emit($event)\"\r\n        (onRecovery)=\"onRecovery.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-color-primary\"></span>\r\n    <span id=\"coer-system-color-secondary\"></span>\r\n    <span id=\"coer-system-color-success\"></span>\r\n    <span id=\"coer-system-color-warning\"></span>\r\n    <span id=\"coer-system-color-danger\"></span>\r\n    <span id=\"coer-system-color-background\"></span>\r\n    <span id=\"coer-system-color-sidenav\"></span>\r\n    <span id=\"coer-system-color-navigation\"></span>\r\n    <span id=\"coer-system-color-container\"></span> \r\n</div>", styles: ["span#coer-system-color-primary{color:var(--primary-inner)}span#coer-system-color-secondary{color:var(--secondary-inner)}span#coer-system-color-success{color:var(--success-inner)}span#coer-system-color-warning{color:var(--warning-inner)}span#coer-system-color-danger{color:var(--danger-inner)}span#coer-system-color-background{color:var(--background-inner)}span#coer-system-color-sidenav{color:var(--sidenav-inner)}span#coer-system-color-navigation{color:var(--navigation-inner)}span#coer-system-color-container{color:var(--container-inner)}\n"] }]
+            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=\"fa-solid fa-user\" 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=\"row coer-system-profile\">\r\n            <!-- User --> \r\n            <div class=\"col-6\">\r\n                <coer-textbox\r\n                    label=\"User\"\r\n                    [value]=\"_user()?.user\"\r\n                    [isReadonly]=\"true\"  \r\n                    marginBottom=\"15px\"       \r\n                ></coer-textbox>\r\n            </div>\r\n\r\n            <!-- User Number -->\r\n            @if(IsNotOnlyWhiteSpace(_user()?.userNumber)) { \r\n                <div class=\"col-6\">\r\n                    <coer-textbox\r\n                        label=\"Number\"\r\n                        [value]=\"_user()?.userNumber\"\r\n                        [isReadonly]=\"true\" \r\n                        marginBottom=\"15px\"           \r\n                    ></coer-textbox>\r\n                </div>\r\n            }\r\n\r\n            <!-- Email -->\r\n            <div class=\"col-6\">\r\n                <coer-textbox\r\n                    label=\"Email\"\r\n                    [value]=\"_user()?.email\"\r\n                    [isReadonly]=\"true\" \r\n                    marginBottom=\"15px\"           \r\n                ></coer-textbox> \r\n            </div>\r\n\r\n            <!-- Nickame --> \r\n            @if(IsNotOnlyWhiteSpace(_user()?.nickname)) { \r\n                <div class=\"col-6\">\r\n                    <coer-textbox\r\n                        label=\"Nickame\"\r\n                        [(ngModel)]=\"_nickname\" \r\n                        [isLoading]=\"_isLoading()\" \r\n                        marginBottom=\"15px\"       \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=\"col-6\">\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                        marginBottom=\"15px\"      \r\n                    ></coer-selectbox>\r\n                </div>\r\n            }\r\n\r\n            @else {\r\n                <div class=\"col-6\">\r\n                    <coer-textbox\r\n                        label=\"Role\"\r\n                        [value]=\"_user()?.role!\" \r\n                        [isReadonly]=\"true\" \r\n                        marginBottom=\"15px\"       \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-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-toolbar{color:var(--toolbar-inner)}span#coer-system-appColors-toolbar-text{color:var(--toolbar-text-inner)}\n"] }]
         }], propDecorators: { user: [{
                 type: Input
             }], userRoles: [{