add network status component to template

npm/ng-packs/apps/dev-app/src/app/app.module.ts

@@ -39,7 +39,7 @@ import { APP_ROUTE_PROVIDER } from './route.provider';
     ThemeLeptonXModule.forRoot(),
     SideMenuLayoutModule.forRoot(),
     AccountLayoutModule.forRoot(),
-    InternetConnectionStatusComponent
+    InternetConnectionStatusComponent,
   ],
   providers: [APP_ROUTE_PROVIDER],
   declarations: [AppComponent],

npm/ng-packs/packages/core/src/lib/services/internet-connection-service.ts

@@ -5,28 +5,28 @@ import { BehaviorSubject } from 'rxjs';
 @Injectable({
   providedIn: 'root',
 })
-export class InternetConnectionService{
+export class InternetConnectionService {
-  readonly document = inject(DOCUMENT)
+  readonly document = inject(DOCUMENT);
   readonly window = this.document.defaultView;
   readonly navigator = this.window.navigator;
 
-  private status$ = new BehaviorSubject<boolean>(this.navigator.onLine)
+  private status$ = new BehaviorSubject<boolean>(this.navigator.onLine);
 
   private status = signal(this.navigator.onLine);
 
-  networkStatus = computed(() => this.status())
+  networkStatus = computed(() => this.status());
-  
+
-  constructor(){
+  constructor() {
     this.window.addEventListener('offline', () => this.setStatus(false));
     this.window.addEventListener('online', () => this.setStatus(true));
   }
 
-  setStatus(val:boolean){
+  setStatus(val: boolean) {
-    this.status.set(val)
+    this.status.set(val);
-    this.status$.next(val)
+    this.status$.next(val);
   }
 
-  get networkStatus$(){
+  get networkStatus$() {
-    return this.status$.asObservable()
+    return this.status$.asObservable();
   }
 }

npm/ng-packs/packages/theme-shared/src/lib/components/internet-connection-status/internet-connection-status.component.ts

@@ -1,47 +1,62 @@
-import { Component, computed, inject  } from '@angular/core';
+import { Component, inject } from '@angular/core';
-import { NgIf } from '@angular/common'
+import { InternetConnectionService, LocalizationModule } from '@abp/ng.core';
-import { InternetConnectionService , LocalizationModule } from '@abp/ng.core';
+import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
 
 @Component({
   selector: 'abp-internet-status',
   standalone: true,
-  imports:[NgIf, LocalizationModule],
+  imports: [LocalizationModule, NgbTooltip],
   template: `
-    <div class="status-icon" *ngIf="!isOnline()">
+    @if (!isOnline()) {
-      <i data-toggle="tooltip" title="{{ 'AbpUi::InternetConnectionInfo' | abpLocalization }}" data-placement="left" class="fa fa-circle text-blinking blink">
+      <div class="status-icon">
-      </i>
+        <i
-    </div>
+          ngbTooltip="{{ 'AbpUi::InternetConnectionInfo' | abpLocalization }}"
-  `,
+          container="body"
-  styles: [`
+          placement="left-top" 
-    .blink {
+          class="fa fa-circle text-blinking blink"
-      animation: blinker 0.9s cubic-bezier(.5, 0, 1, 1) infinite alternate;  
+        >
-    }
+        </i>
-    @keyframes blinker {  
+      </div>
-      0% { color:#c1c1c1 }
-      70% { color: #DC3545 }
-      100% { color: #DC3545 }
     }
+  `,
+  styles: [
+    `
+      .blink {
+        animation: blinker 0.9s cubic-bezier(0.5, 0, 1, 1) infinite alternate;
+      }
+      @keyframes blinker {
+        0% {
+          color: #c1c1c1;
+        }
+        70% {
+          color: #dc3545;
+        }
+        100% {
+          color: #dc3545;
+        }
+      }
 
-    .text-blinking{
+      .text-blinking {
-      font-size:1.2rem;
+        font-size: 1.2rem;
-    }
+      }
 
-    .status-icon{
+      .status-icon {
-      position: fixed;
+        position: fixed;
-      z-index: 999999;
+        z-index: 999999;
-      top: 10px;
+        top: 10px;
-      right: 10px;
+        right: 10px;
-    }
+      }
 
-    @media (width < 768px){
+      @media (width < 768px) {
-      .status-icon{
+        .status-icon {
-        top: 26px;
+          top: 26px;
-        right: 134px;
+          right: 134px;
+        }
       }
-    }
+    `,
-  `]
+  ],
 })
-export class InternetConnectionStatusComponent{
+export class InternetConnectionStatusComponent {
   internetConnectionService = inject(InternetConnectionService);
-  isOnline = this.internetConnectionService.networkStatus
+  isOnline = this.internetConnectionService.networkStatus;
 }

templates/app/angular/src/app/app.component.ts

@@ -5,6 +5,7 @@ import { Component } from '@angular/core';
   template: `
     <abp-loader-bar></abp-loader-bar>
     <abp-dynamic-layout></abp-dynamic-layout>
+    <abp-internet-status></abp-internet-status>
   `,
 })
 export class AppComponent {}

templates/app/angular/src/app/app.module.ts

@@ -6,7 +6,7 @@ import { SettingManagementConfigModule } from '@abp/ng.setting-management/config
 import { TenantManagementConfigModule } from '@abp/ng.tenant-management/config';
 import { ThemeLeptonXModule } from '@abp/ng.theme.lepton-x';
 import { SideMenuLayoutModule } from '@abp/ng.theme.lepton-x/layouts';
-import { ThemeSharedModule } from '@abp/ng.theme.shared';
+import { InternetConnectionStatusComponent, ThemeSharedModule } from '@abp/ng.theme.shared';
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@@ -36,6 +36,7 @@ import { AccountLayoutModule } from '@abp/ng.theme.lepton-x/account';
     ThemeLeptonXModule.forRoot(),
     SideMenuLayoutModule.forRoot(),
     FeatureManagementModule.forRoot(),
+    InternetConnectionStatusComponent
   ],
   declarations: [AppComponent],
   providers: [APP_ROUTE_PROVIDER],