@solcre-org/core-ui 2.15.39 → 2.15.40
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/assets/css/inc/components/main-nav.nav.css +54 -0
- package/assets/css/inc/components/placeholder.css +17 -14
- package/assets/css/inc/components/table.css +2 -0
- package/fesm2022/solcre-org-core-ui.mjs +34 -10
- package/fesm2022/solcre-org-core-ui.mjs.map +1 -1
- package/index.d.ts +1 -0
- package/package.json +1 -1
|
@@ -30,6 +30,10 @@
|
|
|
30
30
|
opacity: .8;
|
|
31
31
|
}
|
|
32
32
|
|
|
33
|
+
.c-mn-user__nav-close {
|
|
34
|
+
display: none;
|
|
35
|
+
}
|
|
36
|
+
|
|
33
37
|
.c-mn-user__name{
|
|
34
38
|
font-weight: 700;
|
|
35
39
|
display: block;
|
|
@@ -321,4 +325,54 @@ button:is(.c-mn-nav__link, .c-mn-nav__sublink){
|
|
|
321
325
|
font-size: var(--_icon-fz);
|
|
322
326
|
text-align: center;
|
|
323
327
|
translate: 0 var(--font-visual-correction-t);
|
|
328
|
+
}
|
|
329
|
+
|
|
330
|
+
/* ********************** desde DESKTOP ********************** */
|
|
331
|
+
|
|
332
|
+
@media (min-width: 61.25rem) /* 980px */ {
|
|
333
|
+
|
|
334
|
+
.c-mn-user__nav-close{
|
|
335
|
+
display: flex;
|
|
336
|
+
position: absolute;
|
|
337
|
+
opacity: 1;
|
|
338
|
+
transition: opacity var(--trs-duration-400) ease-out;
|
|
339
|
+
}
|
|
340
|
+
|
|
341
|
+
.c-mn-user__short {
|
|
342
|
+
display: flex;
|
|
343
|
+
width: var(--_left-col-w);
|
|
344
|
+
align-items: center;
|
|
345
|
+
justify-content: center;
|
|
346
|
+
margin-inline: calc(var(--_left-col-w) / -2 + 1rem);
|
|
347
|
+
}
|
|
348
|
+
|
|
349
|
+
.c-mn-user__short span{
|
|
350
|
+
font-size: 1.4em;
|
|
351
|
+
display: flex;
|
|
352
|
+
align-items: center;
|
|
353
|
+
justify-content: center;
|
|
354
|
+
border-radius: 50%;
|
|
355
|
+
background-color: var(--color-primary-600);
|
|
356
|
+
width: calc(var(--_left-col-w)*.8);
|
|
357
|
+
height: calc(var(--_left-col-w)*.8);
|
|
358
|
+
}
|
|
359
|
+
|
|
360
|
+
.c-mn-user__nav-open{
|
|
361
|
+
opacity: calc(1 * var(--nav-expanded));
|
|
362
|
+
transition: opacity var(--trs-duration-400) ease-out;
|
|
363
|
+
}
|
|
364
|
+
|
|
365
|
+
}
|
|
366
|
+
|
|
367
|
+
/* ********************** MEDIA HOVER ********************** */
|
|
368
|
+
|
|
369
|
+
@media (hover: hover) {
|
|
370
|
+
|
|
371
|
+
.nav-expanded .c-mn-user__nav-close,
|
|
372
|
+
.c-main-nav:hover .c-mn-user__nav-close{
|
|
373
|
+
display: none;
|
|
374
|
+
opacity: 0;
|
|
375
|
+
transition: opacity var(--trs-duration-400) ease-out;
|
|
376
|
+
}
|
|
377
|
+
|
|
324
378
|
}
|
|
@@ -5,39 +5,42 @@
|
|
|
5
5
|
.c-placeholder{
|
|
6
6
|
--_color-main-hsl: var(--color-neutral-800-hsl);
|
|
7
7
|
--_color-text-hsl: var(--color-neutral-800-hsl);
|
|
8
|
-
|
|
9
8
|
--_padd-y: 1.5em;
|
|
10
9
|
--_padd-x: 1.5em;
|
|
11
10
|
--_br: var(--app-main-br);
|
|
12
11
|
--_fz: var(--fz-100);
|
|
13
|
-
--_fw:
|
|
14
|
-
|
|
12
|
+
--_fw: 600;
|
|
15
13
|
padding: var(--_padd-y) var(--_padd-x);
|
|
16
|
-
background-color: hsl(var(--_color-main-hsl)/4%);
|
|
14
|
+
background-color: hsl(var(--_color-main-hsl) / 4%);
|
|
17
15
|
border-radius: var(--_br);
|
|
18
16
|
font-size: var(--_fz);
|
|
19
17
|
font-weight: var(--_fw);
|
|
20
18
|
letter-spacing: 0.05em;
|
|
21
19
|
text-align: left;
|
|
22
20
|
line-height: 1.2;
|
|
23
|
-
color: hsl(var(--_color-main-hsl)
|
|
21
|
+
color: hsl(var(--_color-main-hsl));
|
|
24
22
|
}
|
|
25
23
|
|
|
26
24
|
.c-placeholder--centered{
|
|
27
|
-
|
|
28
|
-
flex-direction: column;
|
|
29
|
-
align-items: center;
|
|
30
|
-
gap: 1em;
|
|
25
|
+
--_padd-y: 2.5em;
|
|
31
26
|
text-align: center;
|
|
32
27
|
}
|
|
33
28
|
|
|
34
|
-
.c-
|
|
35
|
-
|
|
36
|
-
|
|
29
|
+
.c-placeholder--centered > *:not(:first-child){
|
|
30
|
+
margin-top: 0.7em;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.c-placeholder__icon{
|
|
34
|
+
font-size: var(--_icon-fz);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.c-placeholder__icon + .c-placeholder__heading{
|
|
38
|
+
margin-top: 1.3em;
|
|
37
39
|
}
|
|
38
40
|
|
|
39
|
-
.c-
|
|
40
|
-
|
|
41
|
+
.c-placeholder__hint{
|
|
42
|
+
font-weight: 400;
|
|
43
|
+
opacity: .7;
|
|
41
44
|
}
|
|
42
45
|
|
|
43
46
|
/* In sidenav */
|
|
@@ -14388,7 +14388,6 @@ class GenericTableComponent {
|
|
|
14388
14388
|
position: actionConfig.tooltipPosition || 'bottom'
|
|
14389
14389
|
},
|
|
14390
14390
|
context: ButtonContext.ERROR,
|
|
14391
|
-
text: 'table.delete'
|
|
14392
14391
|
},
|
|
14393
14392
|
[TableAction.RECOVER]: {
|
|
14394
14393
|
type: ButtonType.ICON,
|
|
@@ -14399,7 +14398,6 @@ class GenericTableComponent {
|
|
|
14399
14398
|
text: actionConfig.tooltip || 'table.recover',
|
|
14400
14399
|
position: actionConfig.tooltipPosition || 'bottom'
|
|
14401
14400
|
},
|
|
14402
|
-
text: 'table.recover'
|
|
14403
14401
|
}
|
|
14404
14402
|
};
|
|
14405
14403
|
const config = configs[action] || {
|
|
@@ -14411,14 +14409,17 @@ class GenericTableComponent {
|
|
|
14411
14409
|
text: actionConfig.tooltip || action,
|
|
14412
14410
|
position: actionConfig.tooltipPosition || 'bottom'
|
|
14413
14411
|
},
|
|
14414
|
-
text: action
|
|
14415
14412
|
};
|
|
14416
14413
|
const isDisabled = row && actionConfig.shouldDisable ? actionConfig.shouldDisable(row) : false;
|
|
14417
|
-
|
|
14414
|
+
const buttonConfig = {
|
|
14418
14415
|
...config,
|
|
14419
14416
|
customClass: actionConfig.class || 'c-icon-btn',
|
|
14420
14417
|
disabled: isDisabled
|
|
14421
14418
|
};
|
|
14419
|
+
if (actionConfig.isExtra) {
|
|
14420
|
+
buttonConfig.text = this.getActionLabel(action);
|
|
14421
|
+
}
|
|
14422
|
+
return buttonConfig;
|
|
14422
14423
|
}
|
|
14423
14424
|
getCustomActionButtonConfig(customAction) {
|
|
14424
14425
|
const hasLabel = !!customAction.label;
|
|
@@ -16362,12 +16363,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
|
|
|
16362
16363
|
// Este archivo es generado automáticamente por scripts/update-version.js
|
|
16363
16364
|
// No edites manualmente este archivo
|
|
16364
16365
|
const VERSION = {
|
|
16365
|
-
full: '2.15.
|
|
16366
|
+
full: '2.15.40',
|
|
16366
16367
|
major: 2,
|
|
16367
16368
|
minor: 15,
|
|
16368
|
-
patch:
|
|
16369
|
-
timestamp: '2025-11-
|
|
16370
|
-
buildDate: '
|
|
16369
|
+
patch: 40,
|
|
16370
|
+
timestamp: '2025-11-25T12:21:55.220Z',
|
|
16371
|
+
buildDate: '25/11/2025'
|
|
16371
16372
|
};
|
|
16372
16373
|
|
|
16373
16374
|
class MainNavComponent {
|
|
@@ -16478,6 +16479,29 @@ class MainNavComponent {
|
|
|
16478
16479
|
user.email ||
|
|
16479
16480
|
'');
|
|
16480
16481
|
}
|
|
16482
|
+
getUserInitials() {
|
|
16483
|
+
let fullName = '';
|
|
16484
|
+
if (this.userConfig?.nameKey) {
|
|
16485
|
+
fullName = this.userConfig.nameKey;
|
|
16486
|
+
}
|
|
16487
|
+
else if (this.userConfig?.name) {
|
|
16488
|
+
fullName = this.userConfig.name;
|
|
16489
|
+
}
|
|
16490
|
+
else {
|
|
16491
|
+
fullName = this.getFallbackUserName();
|
|
16492
|
+
}
|
|
16493
|
+
if (!fullName) {
|
|
16494
|
+
return '';
|
|
16495
|
+
}
|
|
16496
|
+
const words = fullName.trim().split(/\s+/).filter(word => word.length > 0);
|
|
16497
|
+
if (words.length === 0) {
|
|
16498
|
+
return '';
|
|
16499
|
+
}
|
|
16500
|
+
if (words.length === 1) {
|
|
16501
|
+
return words[0].substring(0, 2).toUpperCase();
|
|
16502
|
+
}
|
|
16503
|
+
return (words[0].charAt(0) + words[1].charAt(0)).toUpperCase();
|
|
16504
|
+
}
|
|
16481
16505
|
hasPermission(item) {
|
|
16482
16506
|
if (!item.requiredPermission) {
|
|
16483
16507
|
return true;
|
|
@@ -16691,11 +16715,11 @@ class MainNavComponent {
|
|
|
16691
16715
|
});
|
|
16692
16716
|
}
|
|
16693
16717
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: MainNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
16694
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: MainNavComponent, isStandalone: true, selector: "core-main-nav", inputs: { navConfig: { classPropertyName: "navConfig", publicName: "navConfig", isSignal: true, isRequired: false, transformFunction: null }, appVersion: { classPropertyName: "appVersion", publicName: "appVersion", isSignal: true, isRequired: false, transformFunction: null }, navItems: { classPropertyName: "navItems", publicName: "navItems", isSignal: true, isRequired: false, transformFunction: null }, bottomNavItems: { classPropertyName: "bottomNavItems", publicName: "bottomNavItems", isSignal: true, isRequired: false, transformFunction: null }, isProduction: { classPropertyName: "isProduction", publicName: "isProduction", isSignal: true, isRequired: false, transformFunction: null }, logoImagesConfig: { classPropertyName: "logoImagesConfig", publicName: "logoImagesConfig", isSignal: true, isRequired: false, transformFunction: null }, collapsedLogo: { classPropertyName: "collapsedLogo", publicName: "collapsedLogo", isSignal: true, isRequired: false, transformFunction: null }, expandedLogo: { classPropertyName: "expandedLogo", publicName: "expandedLogo", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onLogout: "onLogout" }, usesOnChanges: true, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "\n<!-- ! Refactor: Start -->\n<div class=\"c-nav-overlay\" (click)=\"toggleMobileNav()\"></div>\n<div class=\"o-layout__nav c-main-nav\"> <!-- [ngClass]=\"{'nav-expanded': !isCollapsed}\"> -->\n <div class=\"c-main-nav__viewport\">\n\n <!-- Toggle btn -->\n <button (click)=\"onToggleSidebar()\"\n class=\"c-main-nav__toggle c-mn-toggle\"\n [title]=\"isCollapsed ? ('Expandir navegaci\u00F3n' | translate) : ('Colapsar navegaci\u00F3n' | translate )\"\n aria-label=\"Expandir navegaci\u00F3n\"\n ></button>\n\n <!-- Brand -->\n @if(navConfig().showLogo !== false) {\n <div class=\"c-main-nav__brand c-mn-brand\">\n @if(getCollapsedLogoSrc()) {\n <img class=\"c-mn-brand__iso\" \n [src]=\"getCollapsedLogoSrc()\" \n [width]=\"getCollapsedLogoSettings().width\" \n [height]=\"getCollapsedLogoSettings().height\" \n [alt]=\"getCollapsedLogoSettings().alt\">\n }\n @if(getExpandedLogoSrc()) {\n <img class=\"c-mn-brand__logo\" \n [src]=\"getExpandedLogoSrc()\" \n [width]=\"getExpandedLogoSettings().width\" \n [height]=\"getExpandedLogoSettings().height\" \n [alt]=\"getExpandedLogoSettings().alt\">\n }\n </div>\n }\n\n <!-- User -->\n @if(shouldShowUserSection()) {\n <div class=\"c-main-nav__user c-mn-user\">\n <p class=\"c-mn-user__welcome\">\n @if(userConfig?.greetingKey) {\n {{ (userConfig?.greetingKey ?? '') | translate }}\n } @else if(userConfig?.greetingText) {\n {{ userConfig?.greetingText }}\n } @else {\n Bienvenido/a,\n }\n </p>\n <p class=\"c-mn-user__name\">\n @if(userConfig?.nameKey) {\n {{ (userConfig?.nameKey ?? '') | translate }}\n } @else if(userConfig?.name) {\n {{ userConfig?.name }}\n } @else {\n {{ getFallbackUserName() }}\n }\n </p>\n </div>\n }\n\n <!-- Nav -->\n <nav class=\"c-main-nav__nav c-mn-nav\">\n <ul class=\"c-mn-nav__list\">\n\n <ng-template #menuItems let-items=\"items\" let-level=\"level\">\n <ng-container *ngFor=\"let item of items; let i = index\">\n <ng-container *ngIf=\"hasPermission(item) && !item.hidden && (!item.children || hasVisibleChildren(item))\">\n\n <li class=\"c-mn-nav__item c-mn-nav__submenu\"\n [ngClass]=\"{'is-expanded': isSectionExpanded(item.label, level)}\"\n *ngIf=\"item.children && hasVisibleChildren(item); else singleLink\"\n >\n \n <button class=\"c-mn-nav__link\"\n [ngClass]=\"{'is-active': isParentActive(item)}\"\n (click)=\"toggleSection(item.label, level)\"\n [title]=\"isCollapsed ? (item.label | translate) : ''\">\n <span class=\"c-mn-nav__icon\" [ngClass]=\"item.icon | coreIconCompat\"></span>\n <span class=\"c-mn-nav__text\">\n {{ item.label | translate }}\n <span class=\"c-mn-nav__plus\"></span>\n </span>\n </button>\n\n <div class=\"c-mn-nav__subholder\">\n <ul class=\"c-mn-nav__sublist\">\n\n <ng-container *ngFor=\"let child of item.children; let j = index\">\n <ng-container *ngIf=\"hasPermission(child) && !child.hidden && (!child.children || hasVisibleChildren(child))\">\n\n <ng-container *ngIf=\"!child.children; else nestedChild\">\n\n <li class=\"c-mn-nav__subitem\">\n <button class=\"c-mn-nav__sublink\"\n [routerLink]=\"child.disabled ? null : child.path\" \n routerLinkActive=\"is-active\"\n [routerLinkActiveOptions]=\"{ exact: false }\" \n [title]=\"isCollapsed ? (child.label | translate) : ''\"\n [ngClass]=\"{'is-disabled': child.disabled}\"\n [style.pointer-events]=\"child.disabled ? 'none' : 'auto'\"\n [style.opacity]=\"child.disabled ? '0.5' : '1'\"\n >\n {{ child.label | translate }}\n </button>\n </li>\n </ng-container>\n\n <ng-template #nestedChild>\n \n <li class=\"c-mn-nav__subitem\"\n [ngClass]=\"{'submenu-open': isSectionExpanded(child.label, level + 1) && !isCollapsed}\"\n *ngIf=\"child.children && hasVisibleChildren(child)\"\n >\n <button class=\"c-mn-nav__sublink\"\n [ngClass]=\"{'is-active': isParentActive(child)}\"\n (click)=\"toggleSection(child.label, level + 1)\"\n [title]=\"isCollapsed ? (child.label | translate) : ''\"\n >\n {{ child.label | translate }}\n </button>\n\n <div class=\"c-mn-nav__subholder\">\n <ul class=\"c-mn-nav__sublist\">\n\n <ng-container *ngFor=\"let subItem of child.children\">\n <li class=\"c-mn-nav__subitem\"\n *ngIf=\"hasPermission(subItem) && !subItem.hidden\"\n >\n <button class=\"c-mn-nav__sublink\"\n [routerLink]=\"subItem.path\"\n routerLinkActive=\"is-active\"\n >\n {{ subItem.label | translate }}\n </button>\n </li>\n </ng-container>\n\n </ul>\n </div>\n </li>\n </ng-template>\n\n </ng-container>\n </ng-container>\n </ul>\n </div>\n </li>\n\n <ng-template #singleLink>\n\n <li class=\"c-mn-nav__item\">\n <button class=\"c-mn-nav__link\"\n [routerLink]=\"item.disabled ? null : item.path\" \n routerLinkActive=\"is-active\"\n [routerLinkActiveOptions]=\"{ exact: false }\" \n [title]=\"isCollapsed ? (item.label | translate) : ''\" \n [ngClass]=\"{'is-disabled': item.disabled}\"\n [disabled]=\"item.disabled\"\n [style.opacity]=\"item.disabled ? '0.5' : '1'\"\n >\n <span class=\"c-mn-nav__icon\" [ngClass]=\"item.icon | coreIconCompat\"></span>\n <span class=\"c-mn-nav__text\">\n {{ item.label | translate }}\n </span>\n </button>\n </li>\n </ng-template>\n\n\n </ng-container>\n </ng-container>\n </ng-template>\n \n <ng-container *ngTemplateOutlet=\"menuItems; context: { items: navItems(), level: 0 }\"></ng-container>\n\n </ul>\n </nav> <!-- .c-mn-nav -->\n\n <!-- TODO User -->\n\n <nav class=\"c-main-nav__bottom c-mn-nav\">\n <ul class=\"c-mn-nav__list\">\n <li class=\"c-mn-nav__item\">\n <button class=\"c-mn-nav__link\"\n (click)=\"logout()\"\n [title]=\"isCollapsed ? ('sidebar.logout' | translate) : ''\"\n >\n <span class=\"c-mn-nav__icon icon-logout\"></span>\n <span class=\"c-mn-nav__text\">\n {{ 'sidebar.logout' | translate }}\n </span>\n </button>\n </li>\n @if(navConfig().showVersion !== false) {\n <li class=\"c-mn-nav__version\">\n v{{ appVersion().full }}\n </li>\n }\n </ul>\n </nav>\n\n </div> <!-- .c-main-nav__viewport -->\n</div> <!-- .c-main-nav -->\n\n<!-- ! Refactor: End -->\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i4.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: IconCompatPipe, name: "coreIconCompat" }] });
|
|
16718
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: MainNavComponent, isStandalone: true, selector: "core-main-nav", inputs: { navConfig: { classPropertyName: "navConfig", publicName: "navConfig", isSignal: true, isRequired: false, transformFunction: null }, appVersion: { classPropertyName: "appVersion", publicName: "appVersion", isSignal: true, isRequired: false, transformFunction: null }, navItems: { classPropertyName: "navItems", publicName: "navItems", isSignal: true, isRequired: false, transformFunction: null }, bottomNavItems: { classPropertyName: "bottomNavItems", publicName: "bottomNavItems", isSignal: true, isRequired: false, transformFunction: null }, isProduction: { classPropertyName: "isProduction", publicName: "isProduction", isSignal: true, isRequired: false, transformFunction: null }, logoImagesConfig: { classPropertyName: "logoImagesConfig", publicName: "logoImagesConfig", isSignal: true, isRequired: false, transformFunction: null }, collapsedLogo: { classPropertyName: "collapsedLogo", publicName: "collapsedLogo", isSignal: true, isRequired: false, transformFunction: null }, expandedLogo: { classPropertyName: "expandedLogo", publicName: "expandedLogo", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onLogout: "onLogout" }, usesOnChanges: true, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "\n<!-- ! Refactor: Start -->\n<div class=\"c-nav-overlay\" (click)=\"toggleMobileNav()\"></div>\n<div class=\"o-layout__nav c-main-nav\"> <!-- [ngClass]=\"{'nav-expanded': !isCollapsed}\"> -->\n <div class=\"c-main-nav__viewport\">\n\n <!-- Toggle btn -->\n <button (click)=\"onToggleSidebar()\"\n class=\"c-main-nav__toggle c-mn-toggle\"\n [title]=\"isCollapsed ? ('Expandir navegaci\u00F3n' | translate) : ('Colapsar navegaci\u00F3n' | translate )\"\n aria-label=\"Expandir navegaci\u00F3n\"\n ></button>\n\n <!-- Brand -->\n @if(navConfig().showLogo !== false) {\n <div class=\"c-main-nav__brand c-mn-brand\">\n @if(getCollapsedLogoSrc()) {\n <img class=\"c-mn-brand__iso\" \n [src]=\"getCollapsedLogoSrc()\" \n [width]=\"getCollapsedLogoSettings().width\" \n [height]=\"getCollapsedLogoSettings().height\" \n [alt]=\"getCollapsedLogoSettings().alt\">\n }\n @if(getExpandedLogoSrc()) {\n <img class=\"c-mn-brand__logo\" \n [src]=\"getExpandedLogoSrc()\" \n [width]=\"getExpandedLogoSettings().width\" \n [height]=\"getExpandedLogoSettings().height\" \n [alt]=\"getExpandedLogoSettings().alt\">\n }\n </div>\n }\n\n <!-- User -->\n @if(shouldShowUserSection()) {\n <div class=\"c-main-nav__user c-mn-user\">\n <div class=\"c-mn-user__short c-mn-user__nav-close\">\n <span>{{ getUserInitials() }}</span>\n </div>\n <div class=\"c-mn-user__nav-open\">\n <p class=\"c-mn-user__welcome\">\n @if(userConfig?.greetingKey) {\n {{ (userConfig?.greetingKey ?? '') | translate }}\n } @else if(userConfig?.greetingText) {\n {{ userConfig?.greetingText }}\n } @else {\n Bienvenido/a,\n }\n </p>\n <p class=\"c-mn-user__name\">\n @if(userConfig?.nameKey) {\n {{ (userConfig?.nameKey ?? '') | translate }}\n } @else if(userConfig?.name) {\n {{ userConfig?.name }}\n } @else {\n {{ getFallbackUserName() }}\n }\n </p>\n </div>\n </div>\n }\n\n <!-- Nav -->\n <nav class=\"c-main-nav__nav c-mn-nav\">\n <ul class=\"c-mn-nav__list\">\n\n <ng-template #menuItems let-items=\"items\" let-level=\"level\">\n <ng-container *ngFor=\"let item of items; let i = index\">\n <ng-container *ngIf=\"hasPermission(item) && !item.hidden && (!item.children || hasVisibleChildren(item))\">\n\n <li class=\"c-mn-nav__item c-mn-nav__submenu\"\n [ngClass]=\"{'is-expanded': isSectionExpanded(item.label, level)}\"\n *ngIf=\"item.children && hasVisibleChildren(item); else singleLink\"\n >\n \n <button class=\"c-mn-nav__link\"\n [ngClass]=\"{'is-active': isParentActive(item)}\"\n (click)=\"toggleSection(item.label, level)\"\n [title]=\"isCollapsed ? (item.label | translate) : ''\">\n <span class=\"c-mn-nav__icon\" [ngClass]=\"item.icon | coreIconCompat\"></span>\n <span class=\"c-mn-nav__text\">\n {{ item.label | translate }}\n <span class=\"c-mn-nav__plus\"></span>\n </span>\n </button>\n\n <div class=\"c-mn-nav__subholder\">\n <ul class=\"c-mn-nav__sublist\">\n\n <ng-container *ngFor=\"let child of item.children; let j = index\">\n <ng-container *ngIf=\"hasPermission(child) && !child.hidden && (!child.children || hasVisibleChildren(child))\">\n\n <ng-container *ngIf=\"!child.children; else nestedChild\">\n\n <li class=\"c-mn-nav__subitem\">\n <button class=\"c-mn-nav__sublink\"\n [routerLink]=\"child.disabled ? null : child.path\" \n routerLinkActive=\"is-active\"\n [routerLinkActiveOptions]=\"{ exact: false }\" \n [title]=\"isCollapsed ? (child.label | translate) : ''\"\n [ngClass]=\"{'is-disabled': child.disabled}\"\n [style.pointer-events]=\"child.disabled ? 'none' : 'auto'\"\n [style.opacity]=\"child.disabled ? '0.5' : '1'\"\n >\n {{ child.label | translate }}\n </button>\n </li>\n </ng-container>\n\n <ng-template #nestedChild>\n \n <li class=\"c-mn-nav__subitem\"\n [ngClass]=\"{'submenu-open': isSectionExpanded(child.label, level + 1) && !isCollapsed}\"\n *ngIf=\"child.children && hasVisibleChildren(child)\"\n >\n <button class=\"c-mn-nav__sublink\"\n [ngClass]=\"{'is-active': isParentActive(child)}\"\n (click)=\"toggleSection(child.label, level + 1)\"\n [title]=\"isCollapsed ? (child.label | translate) : ''\"\n >\n {{ child.label | translate }}\n </button>\n\n <div class=\"c-mn-nav__subholder\">\n <ul class=\"c-mn-nav__sublist\">\n\n <ng-container *ngFor=\"let subItem of child.children\">\n <li class=\"c-mn-nav__subitem\"\n *ngIf=\"hasPermission(subItem) && !subItem.hidden\"\n >\n <button class=\"c-mn-nav__sublink\"\n [routerLink]=\"subItem.path\"\n routerLinkActive=\"is-active\"\n >\n {{ subItem.label | translate }}\n </button>\n </li>\n </ng-container>\n\n </ul>\n </div>\n </li>\n </ng-template>\n\n </ng-container>\n </ng-container>\n </ul>\n </div>\n </li>\n\n <ng-template #singleLink>\n\n <li class=\"c-mn-nav__item\">\n <button class=\"c-mn-nav__link\"\n [routerLink]=\"item.disabled ? null : item.path\" \n routerLinkActive=\"is-active\"\n [routerLinkActiveOptions]=\"{ exact: false }\" \n [title]=\"isCollapsed ? (item.label | translate) : ''\" \n [ngClass]=\"{'is-disabled': item.disabled}\"\n [disabled]=\"item.disabled\"\n [style.opacity]=\"item.disabled ? '0.5' : '1'\"\n >\n <span class=\"c-mn-nav__icon\" [ngClass]=\"item.icon | coreIconCompat\"></span>\n <span class=\"c-mn-nav__text\">\n {{ item.label | translate }}\n </span>\n </button>\n </li>\n </ng-template>\n\n\n </ng-container>\n </ng-container>\n </ng-template>\n \n <ng-container *ngTemplateOutlet=\"menuItems; context: { items: navItems(), level: 0 }\"></ng-container>\n\n </ul>\n </nav> <!-- .c-mn-nav -->\n\n <!-- TODO User -->\n\n <nav class=\"c-main-nav__bottom c-mn-nav\">\n <ul class=\"c-mn-nav__list\">\n <li class=\"c-mn-nav__item\">\n <button class=\"c-mn-nav__link\"\n (click)=\"logout()\"\n [title]=\"isCollapsed ? ('sidebar.logout' | translate) : ''\"\n >\n <span class=\"c-mn-nav__icon icon-logout\"></span>\n <span class=\"c-mn-nav__text\">\n {{ 'sidebar.logout' | translate }}\n </span>\n </button>\n </li>\n @if(navConfig().showVersion !== false) {\n <li class=\"c-mn-nav__version\">\n v{{ appVersion().full }}\n </li>\n }\n </ul>\n </nav>\n\n </div> <!-- .c-main-nav__viewport -->\n</div> <!-- .c-main-nav -->\n\n<!-- ! Refactor: End -->\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i4.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: IconCompatPipe, name: "coreIconCompat" }] });
|
|
16695
16719
|
}
|
|
16696
16720
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: MainNavComponent, decorators: [{
|
|
16697
16721
|
type: Component,
|
|
16698
|
-
args: [{ selector: 'core-main-nav', standalone: true, imports: [CommonModule, TranslateModule, RouterModule, IconCompatPipe], hostDirectives: [CoreHostDirective], template: "\n<!-- ! Refactor: Start -->\n<div class=\"c-nav-overlay\" (click)=\"toggleMobileNav()\"></div>\n<div class=\"o-layout__nav c-main-nav\"> <!-- [ngClass]=\"{'nav-expanded': !isCollapsed}\"> -->\n <div class=\"c-main-nav__viewport\">\n\n <!-- Toggle btn -->\n <button (click)=\"onToggleSidebar()\"\n class=\"c-main-nav__toggle c-mn-toggle\"\n [title]=\"isCollapsed ? ('Expandir navegaci\u00F3n' | translate) : ('Colapsar navegaci\u00F3n' | translate )\"\n aria-label=\"Expandir navegaci\u00F3n\"\n ></button>\n\n <!-- Brand -->\n @if(navConfig().showLogo !== false) {\n <div class=\"c-main-nav__brand c-mn-brand\">\n @if(getCollapsedLogoSrc()) {\n <img class=\"c-mn-brand__iso\" \n [src]=\"getCollapsedLogoSrc()\" \n [width]=\"getCollapsedLogoSettings().width\" \n [height]=\"getCollapsedLogoSettings().height\" \n [alt]=\"getCollapsedLogoSettings().alt\">\n }\n @if(getExpandedLogoSrc()) {\n <img class=\"c-mn-brand__logo\" \n [src]=\"getExpandedLogoSrc()\" \n [width]=\"getExpandedLogoSettings().width\" \n [height]=\"getExpandedLogoSettings().height\" \n [alt]=\"getExpandedLogoSettings().alt\">\n }\n </div>\n }\n\n <!-- User -->\n @if(shouldShowUserSection()) {\n <div class=\"c-main-nav__user c-mn-user\">\n
|
|
16722
|
+
args: [{ selector: 'core-main-nav', standalone: true, imports: [CommonModule, TranslateModule, RouterModule, IconCompatPipe], hostDirectives: [CoreHostDirective], template: "\n<!-- ! Refactor: Start -->\n<div class=\"c-nav-overlay\" (click)=\"toggleMobileNav()\"></div>\n<div class=\"o-layout__nav c-main-nav\"> <!-- [ngClass]=\"{'nav-expanded': !isCollapsed}\"> -->\n <div class=\"c-main-nav__viewport\">\n\n <!-- Toggle btn -->\n <button (click)=\"onToggleSidebar()\"\n class=\"c-main-nav__toggle c-mn-toggle\"\n [title]=\"isCollapsed ? ('Expandir navegaci\u00F3n' | translate) : ('Colapsar navegaci\u00F3n' | translate )\"\n aria-label=\"Expandir navegaci\u00F3n\"\n ></button>\n\n <!-- Brand -->\n @if(navConfig().showLogo !== false) {\n <div class=\"c-main-nav__brand c-mn-brand\">\n @if(getCollapsedLogoSrc()) {\n <img class=\"c-mn-brand__iso\" \n [src]=\"getCollapsedLogoSrc()\" \n [width]=\"getCollapsedLogoSettings().width\" \n [height]=\"getCollapsedLogoSettings().height\" \n [alt]=\"getCollapsedLogoSettings().alt\">\n }\n @if(getExpandedLogoSrc()) {\n <img class=\"c-mn-brand__logo\" \n [src]=\"getExpandedLogoSrc()\" \n [width]=\"getExpandedLogoSettings().width\" \n [height]=\"getExpandedLogoSettings().height\" \n [alt]=\"getExpandedLogoSettings().alt\">\n }\n </div>\n }\n\n <!-- User -->\n @if(shouldShowUserSection()) {\n <div class=\"c-main-nav__user c-mn-user\">\n <div class=\"c-mn-user__short c-mn-user__nav-close\">\n <span>{{ getUserInitials() }}</span>\n </div>\n <div class=\"c-mn-user__nav-open\">\n <p class=\"c-mn-user__welcome\">\n @if(userConfig?.greetingKey) {\n {{ (userConfig?.greetingKey ?? '') | translate }}\n } @else if(userConfig?.greetingText) {\n {{ userConfig?.greetingText }}\n } @else {\n Bienvenido/a,\n }\n </p>\n <p class=\"c-mn-user__name\">\n @if(userConfig?.nameKey) {\n {{ (userConfig?.nameKey ?? '') | translate }}\n } @else if(userConfig?.name) {\n {{ userConfig?.name }}\n } @else {\n {{ getFallbackUserName() }}\n }\n </p>\n </div>\n </div>\n }\n\n <!-- Nav -->\n <nav class=\"c-main-nav__nav c-mn-nav\">\n <ul class=\"c-mn-nav__list\">\n\n <ng-template #menuItems let-items=\"items\" let-level=\"level\">\n <ng-container *ngFor=\"let item of items; let i = index\">\n <ng-container *ngIf=\"hasPermission(item) && !item.hidden && (!item.children || hasVisibleChildren(item))\">\n\n <li class=\"c-mn-nav__item c-mn-nav__submenu\"\n [ngClass]=\"{'is-expanded': isSectionExpanded(item.label, level)}\"\n *ngIf=\"item.children && hasVisibleChildren(item); else singleLink\"\n >\n \n <button class=\"c-mn-nav__link\"\n [ngClass]=\"{'is-active': isParentActive(item)}\"\n (click)=\"toggleSection(item.label, level)\"\n [title]=\"isCollapsed ? (item.label | translate) : ''\">\n <span class=\"c-mn-nav__icon\" [ngClass]=\"item.icon | coreIconCompat\"></span>\n <span class=\"c-mn-nav__text\">\n {{ item.label | translate }}\n <span class=\"c-mn-nav__plus\"></span>\n </span>\n </button>\n\n <div class=\"c-mn-nav__subholder\">\n <ul class=\"c-mn-nav__sublist\">\n\n <ng-container *ngFor=\"let child of item.children; let j = index\">\n <ng-container *ngIf=\"hasPermission(child) && !child.hidden && (!child.children || hasVisibleChildren(child))\">\n\n <ng-container *ngIf=\"!child.children; else nestedChild\">\n\n <li class=\"c-mn-nav__subitem\">\n <button class=\"c-mn-nav__sublink\"\n [routerLink]=\"child.disabled ? null : child.path\" \n routerLinkActive=\"is-active\"\n [routerLinkActiveOptions]=\"{ exact: false }\" \n [title]=\"isCollapsed ? (child.label | translate) : ''\"\n [ngClass]=\"{'is-disabled': child.disabled}\"\n [style.pointer-events]=\"child.disabled ? 'none' : 'auto'\"\n [style.opacity]=\"child.disabled ? '0.5' : '1'\"\n >\n {{ child.label | translate }}\n </button>\n </li>\n </ng-container>\n\n <ng-template #nestedChild>\n \n <li class=\"c-mn-nav__subitem\"\n [ngClass]=\"{'submenu-open': isSectionExpanded(child.label, level + 1) && !isCollapsed}\"\n *ngIf=\"child.children && hasVisibleChildren(child)\"\n >\n <button class=\"c-mn-nav__sublink\"\n [ngClass]=\"{'is-active': isParentActive(child)}\"\n (click)=\"toggleSection(child.label, level + 1)\"\n [title]=\"isCollapsed ? (child.label | translate) : ''\"\n >\n {{ child.label | translate }}\n </button>\n\n <div class=\"c-mn-nav__subholder\">\n <ul class=\"c-mn-nav__sublist\">\n\n <ng-container *ngFor=\"let subItem of child.children\">\n <li class=\"c-mn-nav__subitem\"\n *ngIf=\"hasPermission(subItem) && !subItem.hidden\"\n >\n <button class=\"c-mn-nav__sublink\"\n [routerLink]=\"subItem.path\"\n routerLinkActive=\"is-active\"\n >\n {{ subItem.label | translate }}\n </button>\n </li>\n </ng-container>\n\n </ul>\n </div>\n </li>\n </ng-template>\n\n </ng-container>\n </ng-container>\n </ul>\n </div>\n </li>\n\n <ng-template #singleLink>\n\n <li class=\"c-mn-nav__item\">\n <button class=\"c-mn-nav__link\"\n [routerLink]=\"item.disabled ? null : item.path\" \n routerLinkActive=\"is-active\"\n [routerLinkActiveOptions]=\"{ exact: false }\" \n [title]=\"isCollapsed ? (item.label | translate) : ''\" \n [ngClass]=\"{'is-disabled': item.disabled}\"\n [disabled]=\"item.disabled\"\n [style.opacity]=\"item.disabled ? '0.5' : '1'\"\n >\n <span class=\"c-mn-nav__icon\" [ngClass]=\"item.icon | coreIconCompat\"></span>\n <span class=\"c-mn-nav__text\">\n {{ item.label | translate }}\n </span>\n </button>\n </li>\n </ng-template>\n\n\n </ng-container>\n </ng-container>\n </ng-template>\n \n <ng-container *ngTemplateOutlet=\"menuItems; context: { items: navItems(), level: 0 }\"></ng-container>\n\n </ul>\n </nav> <!-- .c-mn-nav -->\n\n <!-- TODO User -->\n\n <nav class=\"c-main-nav__bottom c-mn-nav\">\n <ul class=\"c-mn-nav__list\">\n <li class=\"c-mn-nav__item\">\n <button class=\"c-mn-nav__link\"\n (click)=\"logout()\"\n [title]=\"isCollapsed ? ('sidebar.logout' | translate) : ''\"\n >\n <span class=\"c-mn-nav__icon icon-logout\"></span>\n <span class=\"c-mn-nav__text\">\n {{ 'sidebar.logout' | translate }}\n </span>\n </button>\n </li>\n @if(navConfig().showVersion !== false) {\n <li class=\"c-mn-nav__version\">\n v{{ appVersion().full }}\n </li>\n }\n </ul>\n </nav>\n\n </div> <!-- .c-main-nav__viewport -->\n</div> <!-- .c-main-nav -->\n\n<!-- ! Refactor: End -->\n\n" }]
|
|
16699
16723
|
}], ctorParameters: () => [] });
|
|
16700
16724
|
|
|
16701
16725
|
class LayoutStateService {
|