@fuentis/phoenix-ui 0.0.9-alpha.407 → 0.0.9-alpha.409

package/fesm2022/fuentis-phoenix-ui.mjs

@@ -7,7 +7,7 @@ import { TooltipModule } from 'primeng/tooltip';
 import * as i2 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
 import * as i1 from '@angular/router';
-import { RouterLink, RouterLinkActive, RouterModule, Router, NavigationEnd } from '@angular/router';
+import { NavigationEnd, RouterLink, RouterLinkActive, RouterModule, Router } from '@angular/router';
 import * as i2$1 from '@ngx-translate/core';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import * as i8 from 'primeng/tag';
@@ -16,6 +16,7 @@ import * as i7 from 'primeng/menu';
 import { MenuModule } from 'primeng/menu';
 import * as i9 from 'primeng/divider';
 import { DividerModule } from 'primeng/divider';
+import { filter } from 'rxjs/operators';
 import * as i3$1 from 'primeng/api';
 import { MessageService, FilterMatchMode } from 'primeng/api';
 import * as i4 from 'primeng/accordion';
@@ -126,28 +127,67 @@ class SidebarItemComponent {
     item;
     classname = '';
     sliderClick = new EventEmitter();
+    active = false;
+    constructor(router) {
+        this.router = router;
+    }
+    ngOnInit() {
+        this.updateActive();
+        this.router.events
+            .pipe(filter((e) => e instanceof NavigationEnd))
+            .subscribe(() => this.updateActive());
+    }
+    ngOnChanges(_) {
+        this.updateActive();
+    }
+    updateActive() {
+        if (!this.item) {
+            this.active = false;
+            return;
+        }
+        let url = this.router.url.split('?')[0];
+        const hashIdx = url.indexOf('#');
+        if (hashIdx >= 0) {
+            url = url.substring(hashIdx + 1) || '/';
+        }
+        if (url.length > 1 && url.endsWith('/')) {
+            url = url.slice(0, -1);
+        }
+        const basePath = (this.item.basePath || this.item.basepath);
+        const path = this.item.path;
+        const matchPath = (p) => {
+            if (p.length > 1 && p.endsWith('/'))
+                p = p.slice(0, -1);
+            return url === p || url.startsWith(p + '/');
+        };
+        if (basePath && typeof basePath === 'string') {
+            this.active = matchPath(basePath);
+        }
+        else if (path && typeof path === 'string') {
+            this.active = matchPath(path);
+        }
+        else {
+            this.active = false;
+        }
+    }
     onSliderClick($event, menu) {
         $event.stopPropagation();
         $event.preventDefault();
         menu.toggle($event);
     }
     onSliderItemsClick(event) {
-        console.log(event);
         this.sliderClick.emit(event);
     }
-    constructor(router) {
-        this.router = router;
-    }
-    ngOnChanges(changes) { }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SidebarItemComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: SidebarItemComponent, isStandalone: true, selector: "pho-sidebar-item", inputs: { item: "item", classname: "classname" }, outputs: { sliderClick: "sliderClick" }, usesOnChanges: true, ngImport: i0, template: `
     @if(item.path === '/dashboard'){
     <li class="list-none flex align-items-center border-bottom-1 border-200">
       <a
-        class="p-button no-underline w-full justify-content-between surface-0 hover:surface-100	 border-none overflow-hidden bg-transparent sidebaritem"
+        class="p-button no-underline w-full justify-content-between surface-0 hover:surface-100 border-none overflow-hidden bg-transparent sidebaritem"
         [attr.data-cy]="'navigation-side-navigation-item-' + item.label"
         [routerLink]="item?.disabled ? null : item.path"
         routerLinkActive="active-link"
+        [class.active-link]="active"
         [ngClass]="[
           classname,
           item?.disabled ? 'opacity-50 cursor-not-allowed' : ''
@@ -170,6 +210,7 @@ class SidebarItemComponent {
           [disabled]="item.disabledConfig"
         />
       </a>
+
       <p-menu
         styleClass="w-20rem"
         appendTo="body"
@@ -182,6 +223,7 @@ class SidebarItemComponent {
             item.label | translate
           }}</span>
         </ng-template>
+
         <ng-template pTemplate="item" let-item>
           <a
             (click)="onSliderItemsClick(item)"
@@ -191,14 +233,10 @@ class SidebarItemComponent {
           >
             <div class="flex justify-content-between w-full">
               <div>
-                @if(item.icon){
-                <i [class]="item.icon"> </i>
-                }
+                @if(item.icon){ <i [class]="item.icon"></i> }
                 <span class="ml-2">{{ item.title | translate }}</span>
               </div>
-              @if(item.activated){
-              <i class=" pi pi-check"></i>
-              }
+              @if(item.activated){ <i class="pi pi-check"></i> }
             </div>
           </a>
         </ng-template>
@@ -218,41 +256,29 @@ class SidebarItemComponent {
     </li>
 
     } @else {
-    <li
-      class="list-none flex align-items-center "
-      [pTooltip]="item?.tooltip | translate"
-    >
+    <li class="list-none flex align-items-center " [pTooltip]="item?.tooltip | translate">
       <a
         [attr.data-cy]="'navigation-side-navigation-item-' + item.label"
         [routerLink]="item?.disabled ? null : item.path"
         routerLinkActive="active-link"
+        [class.active-link]="active"
         [ngClass]="[
           classname,
           item?.disabled ? 'opacity-50 cursor-not-allowed' : ''
         ]"
-        class="p-button  no-underline w-full justify-content-start surface-0 hover:surface-100	 border-none overflow-hidden bg-transparent sidebaritem"
+        class="p-button no-underline w-full justify-content-start surface-0 hover:surface-100 border-none overflow-hidden bg-transparent sidebaritem"
         [style.pointer-events]="item?.disabled ? 'none' : 'auto'"
       >
-        <div
-          class="flex justify-content-between w-full "
-          style="margin-left: 24px; "
-        >
+        <div class="flex justify-content-between w-full" style="margin-left: 24px;">
           <span style="font-size:13px" class="text-primary white-space-nowrap">
-            {{ item.label | translate }}</span
-          >
+            {{ item.label | translate }}
+          </span>
+
           @if(item.tag){
-          <p-tag
-            [style]="{ fontSize: '9px', padding: '2px 6px' }"
-            severity="danger"
-            [value]="item.tag"
-          />
-          } @if(item.lock){
-          <p-tag
-            [style]="{ fontSize: '9px', paddingRight: '3px' }"
-            severity="warn"
-            icon="pi pi-lock
-"
-          />
+            <p-tag [style]="{ fontSize: '9px', padding: '2px 6px' }" severity="danger" [value]="item.tag" />
+          }
+          @if(item.lock){
+            <p-tag [style]="{ fontSize: '9px', paddingRight: '3px' }" severity="warn" icon="pi pi-lock" />
           }
         </div>
       </a>
@@ -262,7 +288,7 @@ class SidebarItemComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SidebarItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pho-sidebar-item', standalone: true, imports: [
+            args: [{ selector: 'pho-sidebar-item', standalone: true, encapsulation: ViewEncapsulation.None, imports: [
                         CommonModule,
                         ButtonModule,
                         RouterLink,
@@ -272,14 +298,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         MenuModule,
                         TagModule,
                         DividerModule,
-                    ], encapsulation: ViewEncapsulation.None, template: `
+                    ], template: `
     @if(item.path === '/dashboard'){
     <li class="list-none flex align-items-center border-bottom-1 border-200">
       <a
-        class="p-button no-underline w-full justify-content-between surface-0 hover:surface-100	 border-none overflow-hidden bg-transparent sidebaritem"
+        class="p-button no-underline w-full justify-content-between surface-0 hover:surface-100 border-none overflow-hidden bg-transparent sidebaritem"
         [attr.data-cy]="'navigation-side-navigation-item-' + item.label"
         [routerLink]="item?.disabled ? null : item.path"
         routerLinkActive="active-link"
+        [class.active-link]="active"
         [ngClass]="[
           classname,
           item?.disabled ? 'opacity-50 cursor-not-allowed' : ''
@@ -302,6 +329,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
           [disabled]="item.disabledConfig"
         />
       </a>
+
       <p-menu
         styleClass="w-20rem"
         appendTo="body"
@@ -314,6 +342,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
             item.label | translate
           }}</span>
         </ng-template>
+
         <ng-template pTemplate="item" let-item>
           <a
             (click)="onSliderItemsClick(item)"
@@ -323,14 +352,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
           >
             <div class="flex justify-content-between w-full">
               <div>
-                @if(item.icon){
-                <i [class]="item.icon"> </i>
-                }
+                @if(item.icon){ <i [class]="item.icon"></i> }
                 <span class="ml-2">{{ item.title | translate }}</span>
               </div>
-              @if(item.activated){
-              <i class=" pi pi-check"></i>
-              }
+              @if(item.activated){ <i class="pi pi-check"></i> }
             </div>
           </a>
         </ng-template>
@@ -350,41 +375,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
     </li>
 
     } @else {
-    <li
-      class="list-none flex align-items-center "
-      [pTooltip]="item?.tooltip | translate"
-    >
+    <li class="list-none flex align-items-center " [pTooltip]="item?.tooltip | translate">
       <a
         [attr.data-cy]="'navigation-side-navigation-item-' + item.label"
         [routerLink]="item?.disabled ? null : item.path"
         routerLinkActive="active-link"
+        [class.active-link]="active"
         [ngClass]="[
           classname,
           item?.disabled ? 'opacity-50 cursor-not-allowed' : ''
         ]"
-        class="p-button  no-underline w-full justify-content-start surface-0 hover:surface-100	 border-none overflow-hidden bg-transparent sidebaritem"
+        class="p-button no-underline w-full justify-content-start surface-0 hover:surface-100 border-none overflow-hidden bg-transparent sidebaritem"
         [style.pointer-events]="item?.disabled ? 'none' : 'auto'"
       >
-        <div
-          class="flex justify-content-between w-full "
-          style="margin-left: 24px; "
-        >
+        <div class="flex justify-content-between w-full" style="margin-left: 24px;">
           <span style="font-size:13px" class="text-primary white-space-nowrap">
-            {{ item.label | translate }}</span
-          >
+            {{ item.label | translate }}
+          </span>
+
           @if(item.tag){
-          <p-tag
-            [style]="{ fontSize: '9px', padding: '2px 6px' }"
-            severity="danger"
-            [value]="item.tag"
-          />
-          } @if(item.lock){
-          <p-tag
-            [style]="{ fontSize: '9px', paddingRight: '3px' }"
-            severity="warn"
-            icon="pi pi-lock
-"
-          />
+            <p-tag [style]="{ fontSize: '9px', padding: '2px 6px' }" severity="danger" [value]="item.tag" />
+          }
+          @if(item.lock){
+            <p-tag [style]="{ fontSize: '9px', paddingRight: '3px' }" severity="warn" icon="pi pi-lock" />
           }
         </div>
       </a>