coersystem
Version:
Library for Angular projects
472 lines (468 loc) • 57.9 kB
JavaScript
import * as i0 from '@angular/core';
import { computed, effect, Component, viewChild, output, inject, signal, input, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import * as i1$1 from '@angular/forms';
import { FormsModule } from '@angular/forms';
import * as i1 from '@angular/router';
import { RouterModule } from '@angular/router';
import * as i4 from 'coersystem/tools';
import { Page, Tools, CoerAlert, HTMLElements, User, Dates, Menu } from 'coersystem/tools';
import { menuSelectedSIGNAL, isLoadingSIGNAL, navigationSIGNAL, colorsSIGNAL, isMenuOpenSIGNAL } from 'coersystem/signals';
import * as i2 from 'coersystem/components';
import { ComponentsModule } from 'coersystem/components';
import * as i3 from 'coersystem/directives';
import { DirectivesModule } from 'coersystem/directives';
import { JWTService } from 'coersystem/services';
class CoerMenuPage extends Page {
constructor() {
super('coer-menu');
//signals
this.menu = menuSelectedSIGNAL;
//computed
this._gridMenu = computed(() => {
let id = 0;
return this.menu()?.items?.map(item => Object.assign(item, { id: ++id })) || [];
});
/** */
this._isPage = (item) => Tools.IsNotOnlyWhiteSpace(item?.path) && Tools.IsNull(item?.items);
/** */
this._getPath = (item) => (this._isPage(item) && item.path.length > 0) ? item.path : null;
effect(() => {
const menu = menuSelectedSIGNAL();
if (Tools.IsNotNull(menu))
this.SetPageFilters({ menu });
});
}
/** */
RunPage() {
if (Tools.IsNotNull(this.pageFilters) && Tools.IsNotNull(this.pageFilters.menu)) {
menuSelectedSIGNAL.set(this.pageFilters.menu);
this.SetPageName(this.pageFilters.menu.label);
}
}
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 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-basis-150px xs-flex-basis-200px flex-grow-1\">\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-basis-150px flex-basis-200px flex-grow-1 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 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-basis-150px xs-flex-basis-200px flex-grow-1\">\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-basis-150px flex-basis-200px flex-grow-1 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 {
constructor() {
super('home');
this.modal = viewChild.required('modal');
}
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: "17.2.0", version: "19.0.1", type: HomePage, isStandalone: false, selector: "home-page", viewQueries: [{ propertyName: "modal", first: true, predicate: ["modal"], descendants: true, isSignal: true }], 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</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</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 LoginPage {
constructor() {
//Elements
this._inputUser = viewChild.required('inputUser');
this._inputPassword = viewChild.required('inputPassword');
this._inputRecovery = viewChild.required('inputRecovery');
//appSettings
this._appName = Tools.AvoidNull(appSettings?.appInfo?.name, 'string');
//Signals
this._isLoading = isLoadingSIGNAL;
//Variables
this._user = '';
this._password = '';
this._remember = false;
this._show = 'LOGIN';
//Outputs
this.onLogin = output();
this.onRecovery = output();
//Generic Tools
this.IsNotOnlyWhiteSpace = Tools.IsNotOnlyWhiteSpace;
}
//getter
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;
}
/** */
__Login() {
this.onLogin.emit({
user: this._user,
password: this._password
});
}
/** */
Show(view) {
const user = this._user;
const password = this._password;
this._show = view;
Tools.Sleep(150).then(_ => {
this._user = user;
this._password = password;
if (view === 'RECOVERY') {
this._inputRecovery().Focus();
}
else if (view === 'LOGIN') {
if (this._user.length <= 0) {
this.FocusUser();
}
else {
this.FocusPassword();
}
}
});
}
/** */
FocusUser() {
this._inputUser().Focus();
}
/** */
FocusPassword() {
this._inputPassword().Focus(true);
}
/** */
SetUser(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", 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=\"width-100vw height-100vh flex-top-center display-contents\">\r\n <div class=\"login-container mv-padding-20px mv-margin-20px\">\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)=\"_enableButton ? loginButton.Click() : FocusPassword()\" \r\n ></coer-secretbox> \r\n \r\n <!-- Login -->\r\n <div class=\"text-center\">\r\n <coer-button\r\n #loginButton\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)=\"recoveryPassword.Click()\"\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 #recoveryPassword\r\n color=\"dark\" \r\n [isDisabled]=\"!_enableRecoveryButton\"\r\n [isLoading]=\"_isLoading()\"\r\n marginTop=\"35px\"\r\n (onClick)=\"onRecovery.emit(_user)\"\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</div>", styles: ["login-page{display:contents}.login-container{position:relative;border:1px solid black;border-radius:25px;max-width:400px;padding:35px;margin:35px;display:inline-block}.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", "typeBreakpoint", "icon", "iconPosition", "path", "isLoading", "isDisabled", "isReadonly", "isInvisible", "isHidden", "width", "widthBreakpoint", "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", "externalButton", "showSecret", "selectOnFocus", "isLoading", "isDisabled", "isReadonly", "isInvisible", "isHidden", "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", "isHidden", "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=\"width-100vw height-100vh flex-top-center display-contents\">\r\n <div class=\"login-container mv-padding-20px mv-margin-20px\">\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)=\"_enableButton ? loginButton.Click() : FocusPassword()\" \r\n ></coer-secretbox> \r\n \r\n <!-- Login -->\r\n <div class=\"text-center\">\r\n <coer-button\r\n #loginButton\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)=\"recoveryPassword.Click()\"\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 #recoveryPassword\r\n color=\"dark\" \r\n [isDisabled]=\"!_enableRecoveryButton\"\r\n [isLoading]=\"_isLoading()\"\r\n marginTop=\"35px\"\r\n (onClick)=\"onRecovery.emit(_user)\"\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</div>", styles: ["login-page{display:contents}.login-container{position:relative;border:1px solid black;border-radius:25px;max-width:400px;padding:35px;margin:35px;display:inline-block}.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
constructor() {
//Injection
this._alert = inject(CoerAlert);
this._jwtService = inject(JWTService);
//appSettings
this._appName = Tools.AvoidNull(appSettings?.appInfo?.name, 'string');
this._staticLogin = Tools.AvoidNull(appSettings?.login?.static, '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');
//Generic Tools
this.IsNotNull = Tools.IsNotNull;
this.IsNotOnlyWhiteSpace = Tools.IsNotOnlyWhiteSpace;
this._isLoading = isLoadingSIGNAL;
this._userRoles = signal([]);
this._user = signal(null);
this._userImageStatic = signal('');
this._mainRole = null;
this._nickname = '';
this._password = '';
this._passwordConfirm = '';
//Inputs
this.userImage = input(null);
this.toolbarMenu = input([]);
this.navigation = input([]);
this.user = input(null);
this.userRoles = input([]);
//Outputs
this.onLogin = output();
this.onClickMenuOption = output();
this.onResetPassword = output();
this.onRecoveryPassword = output();
this.onUpdateProfile = output();
this.onUploadUserImage = output();
this.onDeleteUserImage = output();
this.onUpdateJWT = output();
//computed
this._userImage = computed(() => {
return this._staticLogin
? this._userImageStatic()
: (this.IsNotOnlyWhiteSpace(this.userImage()) ? this.userImage() : '');
});
//computed
this._toolbarMenu = computed(() => {
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 toolbarMenu.concat([{ label: 'Log Out', icon: 'fa-solid fa-door-open' }]);
});
this._effectUser = effect(() => {
if (this.user()) {
this._user.set(this.user());
if (Tools.IsNotOnlyWhiteSpace(this._user()?.nickname)) {
this._nickname = this._user()?.nickname;
}
}
});
this._effectUserRoles = effect(() => {
let id = 0;
this._userRoles.set(this.userRoles().map(item => ({ id: ++id, option: item })));
this._mainRole = this._userRoles().find(x => x.option === this._user()?.role) || null;
});
this._effectNavigation = effect(() => {
if (Tools.IsNotNull(this._user()) && this.navigation().length > 0) {
navigationSIGNAL.set(this.navigation());
this.SetActiveLink();
}
});
}
//AfterViewInit
ngAfterViewInit() {
Tools.Sleep(10000).then(_ => {
colorsSIGNAL.update(colors => ({
fixedColors: { ...colors.fixedColors },
actionColors: {
primary: HTMLElements.GetElementColor(HTMLElements.GetElement('#coer-system-actionColors-primary')),
secondary: HTMLElements.GetElementColor(HTMLElements.GetElement('#coer-system-actionColors-secondary')),
success: HTMLElements.GetElementColor(HTMLElements.GetElement('#coer-system-actionColors-success')),
warning: HTMLElements.GetElementColor(HTMLElements.GetElement('#coer-system-actionColors-warning')),
danger: HTMLElements.GetElementColor(HTMLElements.GetElement('#coer-system-actionColors-danger')),
navigation: HTMLElements.GetElementColor(HTMLElements.GetElement('#coer-system-actionColors-navigation')),
information: HTMLElements.GetElementColor(HTMLElements.GetElement('#coer-system-actionColors-information'))
},
appColors: {
breadcrumbs: HTMLElements.GetElementColor(HTMLElements.GetElement('#coer-system-appColors-breadcrumbs')),
background: HTMLElements.GetElementColor(HTMLElements.GetElement('#coer-system-appColors-background')),
containers: HTMLElements.GetElementColor(HTMLElements.GetElement('#coer-system-appColors-containers')),
sidenav: HTMLElements.GetElementColor(HTMLElements.GetElement('#coer-system-appColors-sidenav')),
sidenavText: HTMLElements.GetElementColor(HTMLElements.GetElement('#coer-system-appColors-sidenav-text')),
sidenavActive: HTMLElements.GetElementColor(HTMLElements.GetElement('#coer-system-appColors-sidenav-active')),
toolbar: HTMLElements.GetElementColor(HTMLElements.GetElement('#coer-system-appColors-toolbar')),
toolbarText: HTMLElements.GetElementColor(HTMLElements.GetElement('#coer-system-appColors-toolbar-text'))
}
}));
});
}
ngOnDestroy() {
clearInterval(this._watchJWT$);
clearInterval(this._startJWT$);
this._effectNavigation?.destroy();
this._effectUser?.destroy();
this._effectUserRoles?.destroy();
}
//getter
get _enableButtonLogin() {
return Tools.IsNotOnlyWhiteSpace(this._user())
&& Tools.IsNotOnlyWhiteSpace(this._password)
&& Tools.IsNotOnlyWhiteSpace(this._passwordConfirm)
&& this._password.length >= 5
&& this._passwordConfirm.length >= 5
&& !this._isLoading()
&& this._password === this._passwordConfirm;
}
//getter
get _profileTitle() {
return Tools.IsNotOnlyWhiteSpace(this._user()?.fullName)
? this._user()?.fullName
: this._user()?.user;
}
/** */
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': {
if (!hasPath)
this._modalProfile().Open();
break;
}
case 'Reset Password': {
if (!hasPath && !this._staticLogin) {
this._modalPassword().Open();
await Tools.Sleep(750);
this.__Focus();
}
break;
}
case 'Log Out': {
if (!hasPath)
User.LogOut();
break;
}
}
}
/** */
SetUser(user) {
this._loginPage().SetUser(user);
}
/** */
FocusUser() {
this._loginPage().FocusUser();
}
/** */
FocusPassword() {
this._loginPage().FocusPassword();
}
/** */
__Focus() {
if (Tools.IsOnlyWhiteSpace(this._password)) {
this._inputPassword().Focus();
return;
}
if (Tools.IsOnlyWhiteSpace(this._passwordConfirm)) {
this._inputPasswordConfirm().Focus();
return;
}
if (this._enableButtonLogin) {
this._resetButton().Focus();
}
}
/** */
__ResetPassword() {
if (this._enableButtonLogin && !this._staticLogin) {
this.onResetPassword.emit(this._password);
}
}
/** */
CloseModal() {
this._modalPassword().Close();
this._modalProfile().Close();
}
/** */
Show(view) {
this._loginPage().Show(view);
}
/** */
UpdateProfile() {
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) {
if (images.length > 0) {
const [image] = images;
if (this._staticLogin) {
this._userImageStatic.set(image.base64 || '');
}
else {
this.onUploadUserImage.emit(image);
}
}
}
/** */
__DeleteUserImage() {
this._alert.Confirm(`Remove <b>User Image</b> ?`, 'warning', 'fa-solid fa-trash-can').then(response => {
if (response) {
if (this._staticLogin) {
this._userImageStatic.set('');
}
else {
this.onDeleteUserImage.emit();
}
}
});
}
/** */
OpenSideNav() {
if (!isMenuOpenSIGNAL()) {
this._sidenav().Toggle();
}
}
/** */
CloseSideNav() {
if (isMenuOpenSIGNAL()) {
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$);
if (Tools.IsNotOnlyWhiteSpace(this._jwtService?.expirationDate)) {
this._startJWT$ = setInterval(() => {
const DIFERENCE = Math.abs(Dates.GetDiffNow(this._jwtService.expirationDate, 'minutes'));
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: 'static'
});
return User.Get();
}
/** */
SetActiveLink() {
Tools.Sleep().then(_ => {
this._sidenav().SetActiveLink(Menu.GetSelectedOption() || {
level: 1,
label: "Home",
path: "/home",
icon: "icon-house icon-fill",
queryParams: '',
tree: [{ label: "Home", icon: "icon-house icon-fill", path: "/home" }]
});
});
}
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 }, navigation: { classPropertyName: "navigation", publicName: "navigation", isSignal: true, isRequired: false, transformFunction: null }, user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: false, transformFunction: null }, userRoles: { classPropertyName: "userRoles", publicName: "userRoles", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onLogin: "onLogin", onClickMenuOption: "onClickMenuOption", onResetPassword: "onResetPassword", onRecoveryPassword: "onRecoveryPassword", onUpdateProfile: "onUpdateProfile", onUploadUserImage: "onUploadUserImage", onDeleteUserImage: "onDeleteUserImage", onUpdateJWT: "onUpdateJWT" }, viewQueries: [{ propertyName: "_sidenav", first: true, predicate: ["sidenav"], descendants: true, isSignal: true }, { propertyName: "_loginPage", first: true, predicate: ["loginPage"], descendants: true, isSignal: true }, { propertyName: "_modalProfile", first: true, predicate: ["modalProfile"], descendants: true, isSignal: true }, { propertyName: "_modalPassword", first: true, predicate: ["modalPassword"], descendants: true, isSignal: true }, { propertyName: "_inputPassword", first: true, predicate: ["inputPassword"], descendants: true, isSignal: true }, { propertyName: "_inputPasswordConfirm", first: true, predicate: ["inputPasswordConfirm"], descendants: true, isSignal: true }, { propertyName: "_resetButton", first: true, predicate: ["resetButton"], descendants: true, isSignal: true }], ngImport: i0, template: "@if(IsNotNull(_user())) {\r\n <coer-toolbar \r\n [user]=\"_user()\" \r\n [image]=\"userImage()\" \r\n [menu]=\"_toolbarMenu()\" \r\n (onClickMenu)=\"sidenav.Toggle()\" \r\n (onClickOption)=\"__SelectedOption($event)\"\r\n ></coer-toolbar>\r\n \r\n <coer-sidenav #sidenav> \r\n <div class=\"toolbar-shadow\"></div>\r\n \r\n <section> \r\n <ng-content></ng-content>\r\n </section> \r\n </coer-sidenav>\r\n\r\n <!-- Modal Profile --> \r\n <coer-modal #modalProfile [title]=\"_profileTitle\" icon=\"icon-user icon-fill\" width=\"auto\"> \r\n <section class=\"text-align-center\">\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 </section>\r\n\r\n <section class=\"flex-wrap coer-system-profile max-width-550px\">\r\n <!-- User --> \r\n <div class=\"mv-flex-basis-100 xs-flex-basis-45 flex-grow-1\">\r\n <coer-textbox\r\n label=\"User\"\r\n [value]=\"_user()?.user\"\r\n [isReadonly]=\"true\" \r\n ></coer-textbox>\r\n </div>\r\n\r\n <!-- User Number -->\r\n @if(IsNotOnlyWhiteSpace(_user()?.userNumber)) { \r\n <div class=\"mv-flex-basis-100 xs-flex-basis-45 flex-grow-1\">\r\n <coer-textbox\r\n label=\"Number\"\r\n [value]=\"_user()?.userNumber\"\r\n [isReadonly]=\"true\" \r\n ></coer-textbox>\r\n </div>\r\n }\r\n\r\n <!-- Email -->\r\n <div class=\"mv-flex-basis-100 xs-flex-basis-45 flex-grow-1\">\r\n <coer-textbox\r\n label=\"Email\"\r\n [value]=\"_user()?.email\"\r\n [isReadonly]=\"true\" \r\n ></coer-textbox> \r\n </div>\r\n\r\n <!-- Nickame --> \r\n @if(IsNotNull(_user()?.nickname)) { \r\n <div class=\"mv-flex-basis-100 xs-flex-basis-45 flex-grow-1\">\r\n <coer-textbox\r\n label=\"Nickame\"\r\n [(ngModel)]=\"_nickname\" \r\n [isLoading]=\"_isLoading()\" \r\n ></coer-textbox> \r\n </div>\r\n } \r\n\r\n @if(IsNotNull(_user()?.roles) && (_user()?.roles!.length > 1)) {\r\n <!-- Role --> \r\n <div class=\"mv-flex-basis-100 xs-flex-basis-45 flex-grow-1\">\r\n <coer-selectbox\r\n label=\"Role\"\r\n [(ngModel)]=\"_mainRole\"\r\n displayProperty=\"option\"\r\n [dataSource]=\"_userRoles()\"\r\n [isLoading]=\"_isLoading()\" \r\n ></coer-selectbox>\r\n </div>\r\n }\r\n\r\n @else {\r\n <div class=\"mv-flex-basis-100 xs-flex-basis-45 flex-grow-1\">\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: ["div.toolbar-shadow{box-shadow:1px -10px 20px #000!important;width:100vw!important;height:45px!important;position:absolute!important;top:-45px!important}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", "typeBreakpoint", "icon", "iconPosition", "path", "isLoading", "isDisabled", "isReadonly", "isInvisible", "isHidden", "width", "widthBreakpoint", "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", "isHidden"], outputs: ["onSelected", "onDeleteImage"] }, { kind: "component", type: i2.CoerModal, selector: "coer-modal", inputs: ["id", "title", "icon", "showCloseButton", "width", "height", "maxHeight", "verticalPosition"], outputs: ["onOpen", "onClose"] }, { kind: "component", type: i2.CoerSecretBox, selector: "coer-secretbox", inputs: ["id", "value", "label", "placeholder", "textPosition", "minLength", "maxLength", "isInvalid", "isValid", "externalButton", "showSecret", "selectOnFocus", "isLoading", "isDisabled", "isReadonly", "isInvisible", "isHidden", "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", "externalButton", "dataSource", "displayProperty", "rowsByPage", "isLoading", "isDisabled", "isReadonly", "isInvisible", "isHidden", "width", "minWidth", "maxWidth", "marginTop", "marginRight", "marginBottom", "marginLeft"], outputs: ["onSelected", "onUnselect", "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", "isHidden", "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 <div class=\"toolbar-shadow\"></div>\r\n \r\n <section> \r\n <ng-content></ng-content>\r\n </section> \r\n </coer-sidenav>\r\n\r\n <!-- Modal Profile --> \r\n <coer-modal #modalProfile [title]=\"_profileTitle\" icon=\"icon-user icon-fill\" width=\"auto\"> \r\n <section class=\"text-align-center\">\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 </section>\r\n\r\n <section class=\"flex-wrap coer-system-profile max-width-550px\">\r\n <!-- User --> \r\n <div class=\"mv-flex-basis-100 xs-flex-basis-45 flex-grow-1\">\r\n <coer-textbox\r\n label=\"User\"\r\n [value]=\"_user()?.user\"\r\n [isReadonly]=\"true\" \r\n ></coer-textbox>\r\n </div>\r\n\r\n <!-- User Number -->\r\n @if(IsNotOnlyWhiteSpace(_user()?.userNumber)) { \r\n <div class=\"mv-flex-basis-100 xs-flex-basis-45 flex-grow-1\">\r\n <coer-textbox\r\n label=\"Number\"\r\n [value]=\"_user()?.userNumber\"\r\n [isReadonly]=\"true\" \r\n ></coer-textbox>\r\n </div>\r\n }\r\n\r\n <!-- Email -->\r\n <div class=\"mv-flex-basis-100 xs-flex-basis-45 flex-grow-1\">\r\n <coer-textbox\r\n label=\"Email\"\r\n [value]=\"_user()?.email\"\r\n [isReadonly]=\"true\" \r\n