coer-elements 2.0.26 → 2.0.28

package/fesm2022/coer-elements-extensions.mjs

@@ -46,8 +46,11 @@ String.prototype.removeLastChar = function () {
 String.prototype.removeAccents = function (except = []) {
     return Strings.RemoveAccents(this.toString(), except);
 };
-String.prototype.onlyAlphaNumeric = function () {
-    return Strings.OnlyAlphaNumeric(this.toString());
+String.prototype.removeSpecialCharacters = function () {
+    return Strings.RemoveSpecialCharacters(this.toString());
+};
+String.prototype.onlyAlphanumeric = function () {
+    return Strings.OnlyAlphanumeric(this.toString());
 };
 String.prototype.equals = function (value, sensitive = false) {
     return Strings.Equals(this.toString(), value, sensitive);

package/fesm2022/coer-elements-extensions.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"coer-elements-extensions.mjs","sources":["../../../projects/coer-elements/extensions/lib/object.extension.ts","../../../projects/coer-elements/extensions/lib/string.extension.ts","../../../projects/coer-elements/extensions/coer-elements-extensions.ts"],"sourcesContent":["//import { Tools } from \"coer-elements/tools\";\r\n//\r\n//declare global {\r\n//    interface Object {\r\n//       \r\n//        /** Avoid Null value */\r\n//        AvoidNull<T>(type: 'string' | 'number' | 'boolean' | null): T; \r\n//\r\n//        /** Get properties of an object */\r\n//        GetPropertyList(): string[];\r\n//\r\n//        /** Break reference of a object or array */\r\n//        BreakReference<T>(object: T): T;\r\n//    }\r\n//}\r\n//\r\n//Object.prototype.AvoidNull = function<T>(type: 'string' | 'number' | 'boolean' | null = null): T {\r\n//    return Tools.AvoidNull<T>(this as T, type);\r\n//}\r\n//\r\n//Object.prototype.GetPropertyList = function(): string[] {\r\n//    return Tools.GetPropertyList(this);\r\n//}\r\n//\r\n//Object.prototype.BreakReference = function<T>(): T {\r\n//    return Tools.BreakReference<T>(this as T);\r\n//}\r\n\r\nexport {};","import { Strings, Tools } from \"coer-elements/tools\";\r\n\r\ndeclare global {\r\n    interface String {\r\n\r\n        /** Sets the first character to lowercase */\r\n        firstCharToLower(): string;\r\n\r\n        /** Sets the first character to uppercase */\r\n        firstCharToUpper(): string;\r\n\r\n        /** Clean extra whitespaces */\r\n        cleanUpBlanks(): string;\r\n\r\n        /** Apply title formatting */\r\n        toTitle(): string;\r\n\r\n        /** Removes the last character */\r\n        removeLastChar(): string;\r\n\r\n        /** Removes accents */\r\n        removeAccents(except?: string[]): string;  \r\n        \r\n        /** Removes special characters */\r\n        onlyAlphaNumeric(): string;  \r\n\r\n        /** Validates if both strings are equal */\r\n        equals(value: string | number | null | undefined, sensitive?: boolean): boolean;\r\n\r\n        /** Returns true if the value is null or undefined or contains only whitespace, false otherwise */\r\n        isOnlyWhiteSpace(): boolean;\r\n\r\n        /** Returns true if has string value and is not only whitespace, false otherwise */\r\n        isNotOnlyWhiteSpace(): boolean; \r\n    }\r\n}\r\n\r\n\r\nString.prototype.firstCharToLower = function(): string {\r\n    return Strings.FirstCharToLower(this.toString());\r\n}; \r\n\r\n\r\nString.prototype.firstCharToUpper = function(): string {\r\n    return Strings.FirstCharToUpper(this.toString());\r\n};\r\n\r\n\r\nString.prototype.cleanUpBlanks = function(): string {\r\n    return Strings.CleanUpBlanks(this.toString());\r\n};  \r\n\r\n\r\nString.prototype.toTitle = function(): string {\r\n    return Strings.ToTitle(this.toString());\r\n};\r\n\r\n\r\nString.prototype.removeLastChar = function(): string {\r\n    return Strings.RemoveLastChar(this.toString());\r\n} \r\n\r\n\r\nString.prototype.removeAccents = function(except: string[] = []): string { \r\n    return Strings.RemoveAccents(this.toString(), except);\r\n};\r\n\r\n\r\nString.prototype.onlyAlphaNumeric = function(): string { \r\n    return Strings.OnlyAlphaNumeric(this.toString());\r\n};\r\n\r\n\r\nString.prototype.equals = function(value: string | number | null | undefined, sensitive: boolean = false): boolean { \r\n    return Strings.Equals(this.toString(), value, sensitive);\r\n} \r\n\r\n\r\nString.prototype.isOnlyWhiteSpace = function(): boolean {\r\n    return Tools.IsOnlyWhiteSpace(this);\r\n}\r\n\r\n\r\nString.prototype.isNotOnlyWhiteSpace = function(): boolean {\r\n    return Tools.IsNotOnlyWhiteSpace(this);\r\n}\r\n\r\nexport {};","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;ACYA,MAAM,CAAC,SAAS,CAAC,gBAAgB,GAAG,YAAA;IAChC,OAAO,OAAO,CAAC,gBAAgB,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;AACpD,CAAC;AAGD,MAAM,CAAC,SAAS,CAAC,gBAAgB,GAAG,YAAA;IAChC,OAAO,OAAO,CAAC,gBAAgB,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;AACpD,CAAC;AAGD,MAAM,CAAC,SAAS,CAAC,aAAa,GAAG,YAAA;IAC7B,OAAO,OAAO,CAAC,aAAa,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;AACjD,CAAC;AAGD,MAAM,CAAC,SAAS,CAAC,OAAO,GAAG,YAAA;IACvB,OAAO,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;AAC3C,CAAC;AAGD,MAAM,CAAC,SAAS,CAAC,cAAc,GAAG,YAAA;IAC9B,OAAO,OAAO,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;AAClD,CAAC;AAGD,MAAM,CAAC,SAAS,CAAC,aAAa,GAAG,UAAS,SAAmB,EAAE,EAAA;IAC3D,OAAO,OAAO,CAAC,aAAa,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,MAAM,CAAC;AACzD,CAAC;AAGD,MAAM,CAAC,SAAS,CAAC,gBAAgB,GAAG,YAAA;IAChC,OAAO,OAAO,CAAC,gBAAgB,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;AACpD,CAAC;AAGD,MAAM,CAAC,SAAS,CAAC,MAAM,GAAG,UAAS,KAAyC,EAAE,SAAA,GAAqB,KAAK,EAAA;AACpG,IAAA,OAAO,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,KAAK,EAAE,SAAS,CAAC;AAC5D,CAAC;AAGD,MAAM,CAAC,SAAS,CAAC,gBAAgB,GAAG,YAAA;AAChC,IAAA,OAAO,KAAK,CAAC,gBAAgB,CAAC,IAAI,CAAC;AACvC,CAAC;AAGD,MAAM,CAAC,SAAS,CAAC,mBAAmB,GAAG,YAAA;AACnC,IAAA,OAAO,KAAK,CAAC,mBAAmB,CAAC,IAAI,CAAC;AAC1C,CAAC;;ACrFD;;AAEG"}
+{"version":3,"file":"coer-elements-extensions.mjs","sources":["../../../projects/coer-elements/extensions/lib/object.extension.ts","../../../projects/coer-elements/extensions/lib/string.extension.ts","../../../projects/coer-elements/extensions/coer-elements-extensions.ts"],"sourcesContent":["//import { Tools } from \"coer-elements/tools\";\r\n//\r\n//declare global {\r\n//    interface Object {\r\n//       \r\n//        /** Avoid Null value */\r\n//        AvoidNull<T>(type: 'string' | 'number' | 'boolean' | null): T; \r\n//\r\n//        /** Get properties of an object */\r\n//        GetPropertyList(): string[];\r\n//\r\n//        /** Break reference of a object or array */\r\n//        BreakReference<T>(object: T): T;\r\n//    }\r\n//}\r\n//\r\n//Object.prototype.AvoidNull = function<T>(type: 'string' | 'number' | 'boolean' | null = null): T {\r\n//    return Tools.AvoidNull<T>(this as T, type);\r\n//}\r\n//\r\n//Object.prototype.GetPropertyList = function(): string[] {\r\n//    return Tools.GetPropertyList(this);\r\n//}\r\n//\r\n//Object.prototype.BreakReference = function<T>(): T {\r\n//    return Tools.BreakReference<T>(this as T);\r\n//}\r\n\r\nexport {};","import { Strings, Tools } from \"coer-elements/tools\";\r\n\r\ndeclare global {\r\n    interface String {\r\n\r\n        /** Sets the first character to lowercase */\r\n        firstCharToLower(): string;\r\n\r\n        /** Sets the first character to uppercase */\r\n        firstCharToUpper(): string;\r\n\r\n        /** Clean extra whitespaces */\r\n        cleanUpBlanks(): string;\r\n\r\n        /** Apply title formatting */\r\n        toTitle(): string;\r\n\r\n        /** Removes the last character */\r\n        removeLastChar(): string;\r\n\r\n        /** Removes accents */\r\n        removeAccents(except?: string[]): string;  \r\n        \r\n        /** Removes special characters */\r\n        removeSpecialCharacters(): string; \r\n        \r\n        /** Only alphaNumeric */\r\n        onlyAlphanumeric(): string; \r\n\r\n        /** Validates if both strings are equal */\r\n        equals(value: string | number | null | undefined, sensitive?: boolean): boolean;\r\n\r\n        /** Returns true if the value is null or undefined or contains only whitespace, false otherwise */\r\n        isOnlyWhiteSpace(): boolean;\r\n\r\n        /** Returns true if has string value and is not only whitespace, false otherwise */\r\n        isNotOnlyWhiteSpace(): boolean; \r\n    }\r\n}\r\n\r\n\r\nString.prototype.firstCharToLower = function(): string {\r\n    return Strings.FirstCharToLower(this.toString());\r\n}; \r\n\r\n\r\nString.prototype.firstCharToUpper = function(): string {\r\n    return Strings.FirstCharToUpper(this.toString());\r\n};\r\n\r\n\r\nString.prototype.cleanUpBlanks = function(): string {\r\n    return Strings.CleanUpBlanks(this.toString());\r\n};  \r\n\r\n\r\nString.prototype.toTitle = function(): string {\r\n    return Strings.ToTitle(this.toString());\r\n};\r\n\r\n\r\nString.prototype.removeLastChar = function(): string {\r\n    return Strings.RemoveLastChar(this.toString());\r\n} \r\n\r\n\r\nString.prototype.removeAccents = function(except: string[] = []): string { \r\n    return Strings.RemoveAccents(this.toString(), except);\r\n};\r\n\r\n\r\nString.prototype.removeSpecialCharacters = function(): string { \r\n    return Strings.RemoveSpecialCharacters(this.toString());\r\n};\r\n\r\n\r\nString.prototype.onlyAlphanumeric = function(): string { \r\n    return Strings.OnlyAlphanumeric(this.toString());\r\n};\r\n\r\n\r\nString.prototype.equals = function(value: string | number | null | undefined, sensitive: boolean = false): boolean { \r\n    return Strings.Equals(this.toString(), value, sensitive);\r\n} \r\n\r\n\r\nString.prototype.isOnlyWhiteSpace = function(): boolean {\r\n    return Tools.IsOnlyWhiteSpace(this);\r\n}\r\n\r\n\r\nString.prototype.isNotOnlyWhiteSpace = function(): boolean {\r\n    return Tools.IsNotOnlyWhiteSpace(this);\r\n}\r\n\r\nexport {};","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;ACeA,MAAM,CAAC,SAAS,CAAC,gBAAgB,GAAG,YAAA;IAChC,OAAO,OAAO,CAAC,gBAAgB,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;AACpD,CAAC;AAGD,MAAM,CAAC,SAAS,CAAC,gBAAgB,GAAG,YAAA;IAChC,OAAO,OAAO,CAAC,gBAAgB,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;AACpD,CAAC;AAGD,MAAM,CAAC,SAAS,CAAC,aAAa,GAAG,YAAA;IAC7B,OAAO,OAAO,CAAC,aAAa,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;AACjD,CAAC;AAGD,MAAM,CAAC,SAAS,CAAC,OAAO,GAAG,YAAA;IACvB,OAAO,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;AAC3C,CAAC;AAGD,MAAM,CAAC,SAAS,CAAC,cAAc,GAAG,YAAA;IAC9B,OAAO,OAAO,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;AAClD,CAAC;AAGD,MAAM,CAAC,SAAS,CAAC,aAAa,GAAG,UAAS,SAAmB,EAAE,EAAA;IAC3D,OAAO,OAAO,CAAC,aAAa,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,MAAM,CAAC;AACzD,CAAC;AAGD,MAAM,CAAC,SAAS,CAAC,uBAAuB,GAAG,YAAA;IACvC,OAAO,OAAO,CAAC,uBAAuB,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;AAC3D,CAAC;AAGD,MAAM,CAAC,SAAS,CAAC,gBAAgB,GAAG,YAAA;IAChC,OAAO,OAAO,CAAC,gBAAgB,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;AACpD,CAAC;AAGD,MAAM,CAAC,SAAS,CAAC,MAAM,GAAG,UAAS,KAAyC,EAAE,SAAA,GAAqB,KAAK,EAAA;AACpG,IAAA,OAAO,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,KAAK,EAAE,SAAS,CAAC;AAC5D,CAAC;AAGD,MAAM,CAAC,SAAS,CAAC,gBAAgB,GAAG,YAAA;AAChC,IAAA,OAAO,KAAK,CAAC,gBAAgB,CAAC,IAAI,CAAC;AACvC,CAAC;AAGD,MAAM,CAAC,SAAS,CAAC,mBAAmB,GAAG,YAAA;AACnC,IAAA,OAAO,KAAK,CAAC,mBAAmB,CAAC,IAAI,CAAC;AAC1C,CAAC;;AC7FD;;AAEG"}

package/fesm2022/coer-elements-pages.mjs

@@ -43,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=\"coer-menu flex-wrap-top-left gap-30px padding-bottom-30px fade-in\">\r\n    @for(item of _gridMenu(); track item.id) {   \r\n        @if(_isPage(item)) {\r\n            <a [routerLink]=\"_getPath(item)\" class=\"flex-item-grow-200px\">\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-item-grow-200px 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.coer-menu{margin:30px 30px 0}div.coer-menu a{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}div.coer-menu a i{font-size:x-large!important}div.coer-menu a.menu{background-color:var(--secondary-inner)!important;cursor:not-allowed!important}div.coer-menu a:not(.menu):hover{transform:scale(1.02)!important;box-shadow:0 0 15px -4px var(--sidenav-active-inner)!important;border-color:var(--sidenav-active-inner)!important;border-width:1px!important;color:var(--sidenav-active-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", "showBreadcrumbs", "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=\"coer-menu flex-wrap-top-left mv-margin-ltr-15px margin-ltr-30px mv-gap-15px xs-gap-30px mv-padding-bottom-15px xs-padding-bottom-30px fade-in\">\r\n    @for(item of _gridMenu(); track item.id) {   \r\n        @if(_isPage(item)) {\r\n            <a [routerLink]=\"_getPath(item)\" class=\"mv-flex-item-grow-150px flex-item-grow-200px\">\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=\"mv-flex-item-grow-150px flex-item-grow-200px 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.coer-menu a{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}div.coer-menu a i{font-size:x-large!important}div.coer-menu a.menu{background-color:var(--secondary-inner)!important;cursor:not-allowed!important}div.coer-menu a:not(.menu):hover{transform:scale(1.02)!important;box-shadow:0 0 15px -4px var(--sidenav-active-inner)!important;border-color:var(--sidenav-active-inner)!important;border-width:1px!important;color:var(--sidenav-active-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", "showBreadcrumbs", "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=\"coer-menu flex-wrap-top-left gap-30px padding-bottom-30px fade-in\">\r\n    @for(item of _gridMenu(); track item.id) {   \r\n        @if(_isPage(item)) {\r\n            <a [routerLink]=\"_getPath(item)\" class=\"flex-item-grow-200px\">\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-item-grow-200px 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.coer-menu{margin:30px 30px 0}div.coer-menu a{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}div.coer-menu a i{font-size:x-large!important}div.coer-menu a.menu{background-color:var(--secondary-inner)!important;cursor:not-allowed!important}div.coer-menu a:not(.menu):hover{transform:scale(1.02)!important;box-shadow:0 0 15px -4px var(--sidenav-active-inner)!important;border-color:var(--sidenav-active-inner)!important;border-width:1px!important;color:var(--sidenav-active-inner)!important;background-color:var(--containers-inner)!important}\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=\"coer-menu flex-wrap-top-left mv-margin-ltr-15px margin-ltr-30px mv-gap-15px xs-gap-30px mv-padding-bottom-15px xs-padding-bottom-30px fade-in\">\r\n    @for(item of _gridMenu(); track item.id) {   \r\n        @if(_isPage(item)) {\r\n            <a [routerLink]=\"_getPath(item)\" class=\"mv-flex-item-grow-150px flex-item-grow-200px\">\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=\"mv-flex-item-grow-150px flex-item-grow-200px 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.coer-menu a{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}div.coer-menu a i{font-size:x-large!important}div.coer-menu a.menu{background-color:var(--secondary-inner)!important;cursor:not-allowed!important}div.coer-menu a:not(.menu):hover{transform:scale(1.02)!important;box-shadow:0 0 15px -4px var(--sidenav-active-inner)!important;border-color:var(--sidenav-active-inner)!important;border-width:1px!important;color:var(--sidenav-active-inner)!important;background-color:var(--containers-inner)!important}\n"] }]
         }], ctorParameters: () => [] });
 
 class HomePage extends Page {
@@ -55,22 +55,13 @@ class HomePage extends Page {
         super('home');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: HomePage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.1", type: HomePage, isStandalone: false, selector: "home-page", usesInheritance: true, ngImport: i0, template: "<!-- Title -->\r\n<coer-page-title\r\n    title=\"Home\"\r\n    [breadcrumbs]=\"breadcrumbs\"\r\n    [goBack]=\"goBack\"\r\n></coer-page-title>\r\n\r\n<div class=\"coer-container\"> \r\n   \r\n</div>\r\n\r\n<div class=\"position-absolute left-negative-0px bottom-30px\">\r\n    <coer-card\r\n        name=\"Christian Omar Escamilla Rodriguez\"\r\n        icon=\"icon-developer\"\r\n        title=\"Ing. Desarrollador Software\"\r\n        phone=\"8124216386\"\r\n        email=\"coer0408@gmail.com\"\r\n    ></coer-card> \r\n</div>", styles: [""], dependencies: [{ kind: "component", type: i2.CoerCard, selector: "coer-card", inputs: ["id", "icon", "name", "title", "phone", "email"] }, { kind: "component", type: i2.CoerPageTitle, selector: "coer-page-title", inputs: ["title", "showBreadcrumbs", "breadcrumbs", "goBack", "information"], outputs: ["onClickInformation"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.1", type: HomePage, isStandalone: false, selector: "home-page", usesInheritance: true, ngImport: i0, template: "<!-- Title -->\r\n<coer-page-title\r\n    title=\"Home\"\r\n    [breadcrumbs]=\"breadcrumbs\"\r\n    [goBack]=\"goBack\"\r\n></coer-page-title>\r\n\r\n<div class=\"coer-container\"> \r\n   \r\n</div>\r\n\r\n<div class=\"position-absolute left-negative-0px mv-bottom-15px bottom-30px\">\r\n    <coer-card\r\n        name=\"Christian Omar Escamilla Rodriguez\"\r\n        icon=\"icon-developer\"\r\n        title=\"Ing. Desarrollador Software\"\r\n        phone=\"8124216386\"\r\n        email=\"coer0408@gmail.com\"\r\n    ></coer-card> \r\n</div>", styles: [""], dependencies: [{ kind: "component", type: i2.CoerCard, selector: "coer-card", inputs: ["id", "icon", "name", "title", "phone", "email"] }, { kind: "component", type: i2.CoerPageTitle, selector: "coer-page-title", inputs: ["title", "showBreadcrumbs", "breadcrumbs", "goBack", "information"], outputs: ["onClickInformation"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: HomePage, decorators: [{
             type: Component,
-            args: [{ selector: 'home-page', standalone: false, template: "<!-- Title -->\r\n<coer-page-title\r\n    title=\"Home\"\r\n    [breadcrumbs]=\"breadcrumbs\"\r\n    [goBack]=\"goBack\"\r\n></coer-page-title>\r\n\r\n<div class=\"coer-container\"> \r\n   \r\n</div>\r\n\r\n<div class=\"position-absolute left-negative-0px bottom-30px\">\r\n    <coer-card\r\n        name=\"Christian Omar Escamilla Rodriguez\"\r\n        icon=\"icon-developer\"\r\n        title=\"Ing. Desarrollador Software\"\r\n        phone=\"8124216386\"\r\n        email=\"coer0408@gmail.com\"\r\n    ></coer-card> \r\n</div>" }]
+            args: [{ selector: 'home-page', standalone: false, template: "<!-- Title -->\r\n<coer-page-title\r\n    title=\"Home\"\r\n    [breadcrumbs]=\"breadcrumbs\"\r\n    [goBack]=\"goBack\"\r\n></coer-page-title>\r\n\r\n<div class=\"coer-container\"> \r\n   \r\n</div>\r\n\r\n<div class=\"position-absolute left-negative-0px mv-bottom-15px bottom-30px\">\r\n    <coer-card\r\n        name=\"Christian Omar Escamilla Rodriguez\"\r\n        icon=\"icon-developer\"\r\n        title=\"Ing. Desarrollador Software\"\r\n        phone=\"8124216386\"\r\n        email=\"coer0408@gmail.com\"\r\n    ></coer-card> \r\n</div>" }]
         }], ctorParameters: () => [] });
 
-class LoadingPage {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: LoadingPage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.1", type: LoadingPage, isStandalone: false, selector: "loading-page", ngImport: i0, template: "Loading...", styles: [""] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: LoadingPage, decorators: [{
-            type: Component,
-            args: [{ selector: 'loading-page', standalone: false, template: "Loading..." }]
-        }] });
-
 class LoginPage {
     constructor() {
         //appSettings 
@@ -142,7 +133,7 @@ class LoginPage {
         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", 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: ["id", "label", "placeholder", "textPosition", "minLength", "maxLength", "isInvalid", "isValid", "showSecret", "selectOnFocus", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "marginTop", "marginRight", "marginBottom", "marginLeft", "value"], outputs: ["onKeyupEnter", "onInput", "onClickClear", "onClickExternalButton"] }, { kind: "component", type: i2.CoerTextBox, selector: "coer-textbox", inputs: ["id", "label", "placeholder", "textPosition", "minLength", "maxLength", "isInvalid", "isValid", "externalButton", "selectOnFocus", "showClearIcon", "showSearchIcon", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "marginTop", "marginRight", "marginBottom", "marginLeft", "value"], 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", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "height", "minHeight", "marginTop", "marginRight", "marginBottom", "marginLeft", "tooltip", "tooltipPosition"], outputs: ["onClick"] }, { 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.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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: LoginPage, decorators: [{
             type: Component,
@@ -458,11 +449,11 @@ class COERSystem {
         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", 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-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", "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: ["id", "label", "placeholder", "textPosition", "minLength", "maxLength", "isInvalid", "isValid", "showSecret", "selectOnFocus", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "marginTop", "marginRight", "marginBottom", "marginLeft", "value"], 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", "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", "label", "placeholder", "textPosition", "minLength", "maxLength", "isInvalid", "isValid", "externalButton", "selectOnFocus", "showClearIcon", "showSearchIcon", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "marginTop", "marginRight", "marginBottom", "marginLeft", "value"], 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 }, 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=\"flex-wrap coer-system-profile margin-bottom-10px\">\r\n            <!-- User --> \r\n            <div class=\"flex-item-grow-50\">\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=\"flex-item-grow-50\">\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=\"flex-item-grow-50\">\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=\"flex-item-grow-50\">\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=\"flex-item-grow-50\">\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=\"flex-item-grow-50\">\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=\"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-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"] }]
+            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=\"flex-wrap coer-system-profile margin-bottom-10px\">\r\n            <!-- User --> \r\n            <div class=\"flex-item-grow-50\">\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=\"flex-item-grow-50\">\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=\"flex-item-grow-50\">\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=\"flex-item-grow-50\">\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=\"flex-item-grow-50\">\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=\"flex-item-grow-50\">\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: [{
@@ -473,7 +464,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImpor
 
 const ROUTES = [
     { path: 'menu', component: CoerMenuPage, data: { Page: 'COER' } },
-    { path: 'loading', component: LoadingPage, data: { Page: 'COER' } },
     { path: 'home', component: HomePage, data: { Page: 'COER' } },
     { path: '**', redirectTo: '/home' }
 ];
@@ -482,16 +472,14 @@ class PagesModule {
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.1", ngImport: i0, type: PagesModule, declarations: [COERSystem,
             LoginPage,
             CoerMenuPage,
-            HomePage,
-            LoadingPage], imports: [CommonModule,
+            HomePage], imports: [CommonModule,
             RouterModule,
             FormsModule,
             ComponentsModule,
             DirectivesModule,
             CoerAlert], exports: [COERSystem,
             CoerMenuPage,
-            HomePage,
-            LoadingPage] }); }
+            HomePage] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: PagesModule, imports: [CommonModule,
             RouterModule,
             FormsModule,
@@ -515,13 +503,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImpor
                         LoginPage,
                         CoerMenuPage,
                         HomePage,
-                        LoadingPage,
                     ],
                     exports: [
                         COERSystem,
                         CoerMenuPage,
                         HomePage,
-                        LoadingPage,
                     ]
                 }]
         }] });
@@ -530,5 +516,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { COERSystem, CoerMenuPage, HomePage, LoadingPage, PagesModule, ROUTES };
+export { COERSystem, CoerMenuPage, HomePage, PagesModule, ROUTES };
 //# sourceMappingURL=coer-elements-pages.mjs.map