@posiwise/shared-components 0.0.150 → 0.0.153

package/fesm2022/posiwise-shared-components.mjs

@@ -29,8 +29,8 @@ import * as i5$2 from 'primeng/select';
 import { SelectModule } from 'primeng/select';
 import * as i6 from 'primeng/table';
 import { TableModule } from 'primeng/table';
-import * as i2$2 from 'primeng/tabmenu';
-import { TabMenuModule } from 'primeng/tabmenu';
+import * as i2$2 from 'primeng/tabs';
+import { TabsModule } from 'primeng/tabs';
 import * as i3$2 from '@ng-bootstrap/ng-bootstrap';
 import { NgbTooltipModule, NgbNavModule, NgbModalModule } from '@ng-bootstrap/ng-bootstrap';
 import { AppBaseComponent } from '@posiwise/app-base-component';
@@ -1367,6 +1367,10 @@ class PwTabsComponent extends AppBaseComponent {
         super(injector);
         this.items = [];
         this.withSubscription = false;
+        /** Arrow function so trackBy is called with correct `this` from template */
+        this.trackByItem = (_index, item) => {
+            return this.getItemValue(item);
+        };
     }
     ngOnInit() {
         if (this.withSubscription) {
@@ -1394,43 +1398,46 @@ class PwTabsComponent extends AppBaseComponent {
             }
         });
     }
+    getItemValue(item) {
+        if (!item.routerLink) {
+            return item.id ?? item.label ?? '';
+        }
+        const routePath = Array.isArray(item.routerLink) ? item.routerLink[0] : item.routerLink;
+        return String(routePath);
+    }
+    onTabChange(value) {
+        const item = this.items.find(i => this.getItemValue(i) === value);
+        if (item?.routerLink) {
+            const routePath = Array.isArray(item.routerLink) ? item.routerLink : [item.routerLink];
+            this.router.navigate(routePath);
+        }
+    }
     updateActiveTab() {
-        if (!this.tabInstance || !this.items.length) {
+        if (!this.items.length) {
             return;
         }
         const currentUrl = this.router.url.split('?')[0];
         const matchedItem = this.items.find(item => {
-            if (!item.routerLink || !item.visible) {
+            if (!item.routerLink || item.visible === false) {
                 return false;
             }
             const routePath = Array.isArray(item.routerLink) ? item.routerLink[0] : item.routerLink;
-            return routePath === currentUrl;
+            const pathStr = String(routePath);
+            return currentUrl === pathStr || currentUrl.startsWith(pathStr + '/');
         });
-        if (matchedItem) {
-            // Clear previous activeItem first to ensure only one tab is active
-            this.tabInstance.activeItem = null;
-            // Then set the new activeItem
-            this.tabInstance.activeItem = matchedItem;
-        }
-        else {
-            // Clear activeItem if no match found
-            this.tabInstance.activeItem = null;
-        }
+        this.activeTabValue = matchedItem ? this.getItemValue(matchedItem) : undefined;
     }
     ngOnDestroy() {
         this.routeEventSubscription.unsubscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: PwTabsComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: PwTabsComponent, isStandalone: false, selector: "pw-tabs", inputs: { items: "items", withSubscription: "withSubscription" }, viewQueries: [{ propertyName: "tabInstance", first: true, predicate: ["tabMenu"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n  <p-tabMenu [model]=\"items\"\n    #tabMenu></p-tabMenu>\n  <div class=\"dashboard\">\n    <div class=\"dashboard-body\">\n      <router-outlet></router-outlet>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i5.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: i2$2.TabMenu, selector: "p-tabMenu, p-tabmenu", inputs: ["model", "activeItem", "scrollable", "popup", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["activeItemChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: PwTabsComponent, isStandalone: false, selector: "pw-tabs", inputs: { items: "items", withSubscription: "withSubscription" }, usesInheritance: true, ngImport: i0, template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n  <p-tabs [value]=\"activeTabValue\" (valueChange)=\"onTabChange($event)\">\n    <p-tablist>\n      <ng-container *ngFor=\"let item of items; trackBy: trackByItem\">\n        <p-tab *ngIf=\"item.visible !== false\" [value]=\"getItemValue(item)\">\n          <i *ngIf=\"item.icon\" [class]=\"item.icon\" aria-hidden=\"true\"></i>\n          <span>{{ item.label }}</span>\n        </p-tab>\n      </ng-container>\n    </p-tablist>\n  </p-tabs>\n  <div class=\"dashboard\">\n    <div class=\"dashboard-body\">\n      <router-outlet></router-outlet>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i5.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: i2$2.Tabs, selector: "p-tabs", inputs: ["value", "scrollable", "lazy", "selectOnFocus", "showNavigators", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: i2$2.TabList, selector: "p-tablist" }, { kind: "component", type: i2$2.Tab, selector: "p-tab", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: PwTabsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-tabs', standalone: false, template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n  <p-tabMenu [model]=\"items\"\n    #tabMenu></p-tabMenu>\n  <div class=\"dashboard\">\n    <div class=\"dashboard-body\">\n      <router-outlet></router-outlet>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'pw-tabs', standalone: false, template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n  <p-tabs [value]=\"activeTabValue\" (valueChange)=\"onTabChange($event)\">\n    <p-tablist>\n      <ng-container *ngFor=\"let item of items; trackBy: trackByItem\">\n        <p-tab *ngIf=\"item.visible !== false\" [value]=\"getItemValue(item)\">\n          <i *ngIf=\"item.icon\" [class]=\"item.icon\" aria-hidden=\"true\"></i>\n          <span>{{ item.label }}</span>\n        </p-tab>\n      </ng-container>\n    </p-tablist>\n  </p-tabs>\n  <div class=\"dashboard\">\n    <div class=\"dashboard-body\">\n      <router-outlet></router-outlet>\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.Injector }], propDecorators: { items: [{
                 type: Input
-            }], tabInstance: [{
-                type: ViewChild,
-                args: ['tabMenu', { static: false }]
             }], withSubscription: [{
                 type: Input
             }] } });
@@ -1498,12 +1505,6 @@ class InputContainerComponent {
                     }
                 }
             }
-            else {
-                window.console.warn('Missing FormControlName directive from host element of the component');
-            }
-        }
-        else {
-            window.console.warn("Can't find parent FormGroup directive");
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: InputContainerComponent, deps: [{ token: i2.ControlContainer, host: true, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component }); }
@@ -1563,9 +1564,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
             }] } });
 
 class ResourceSharedComponentsModule {
-    constructor() {
-        console.log('🚀 RESOURCE SHARED COMPONENTS MODULE LOADED! - Minimal shared components for resource module');
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ResourceSharedComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.18", ngImport: i0, type: ResourceSharedComponentsModule, declarations: [NoDataComponent, InputContainerComponent], imports: [CommonModule,
             FormsModule,
@@ -1650,7 +1648,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                         FieldErrorDisplayModule
                     ]
                 }]
-        }], ctorParameters: () => [] });
+        }] });
 
 class SplashComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SplashComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -1693,7 +1691,7 @@ const allModules = [
     NgbNavModule,
     NgbModalModule,
     TableModule,
-    TabMenuModule,
+    TabsModule,
     ButtonModule,
     SelectModule,
     MultiSelectModule,
@@ -1704,9 +1702,6 @@ const allModules = [
     NgxDaterangepickerMd.forRoot()
 ];
 class SharedComponentsModule {
-    constructor() {
-        console.log('🚀 SHARED COMPONENTS MODULE LOADED! - Shared UI components');
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SharedComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.18", ngImport: i0, type: SharedComponentsModule, declarations: [PasswordValidationComponent,
             PwTabsComponent,
@@ -1733,7 +1728,7 @@ class SharedComponentsModule {
             NgbNavModule,
             NgbModalModule,
             TableModule,
-            TabMenuModule,
+            TabsModule,
             ButtonModule,
             SelectModule,
             MultiSelectModule,
@@ -1750,7 +1745,7 @@ class SharedComponentsModule {
             NgbNavModule,
             NgbModalModule,
             TableModule,
-            TabMenuModule,
+            TabsModule,
             ButtonModule,
             SelectModule,
             MultiSelectModule,
@@ -1787,7 +1782,7 @@ class SharedComponentsModule {
             NgbNavModule,
             NgbModalModule,
             TableModule,
-            TabMenuModule,
+            TabsModule,
             ButtonModule,
             SelectModule,
             MultiSelectModule,
@@ -1856,7 +1851,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                         ResourceSharedComponentsModule
                     ]
                 }]
-        }], ctorParameters: () => [] });
+        }] });
 
 /**
  * Generated bundle index. Do not edit.