@ngflux/ngflux 1.0.4 → 2.0.0

package/lib/components/loading/main/main.component.scss

@@ -0,0 +1,42 @@
+:host {
+  display: block;
+
+  svg {
+    width: 3.25em;
+    transform-origin: center;
+    animation: rotate4 2s linear infinite;
+  }
+
+  circle {
+    fill: none;
+    // stroke: hsl(214, 97%, 59%);
+    stroke: var(--ngf-loading-foreground) !important;
+    stroke-width: 5;
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
+    stroke-linecap: round;
+    animation: dash4 1.5s ease-in-out infinite;
+  }
+
+  @keyframes rotate4 {
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes dash4 {
+    0% {
+      stroke-dasharray: 1, 200;
+      stroke-dashoffset: 0;
+    }
+
+    50% {
+      stroke-dasharray: 90, 200;
+      stroke-dashoffset: -35px;
+    }
+
+    100% {
+      stroke-dashoffset: -125px;
+    }
+  }
+}

package/lib/components/loading/root/root.component.scss

@@ -0,0 +1,21 @@
+:host {
+  display: none;
+  position: fixed;
+  z-index: var(--ngf-loading-z-index) !important;
+  inset: 0px;
+
+  &.show {
+    display: block;
+  }
+
+  > .wrapper {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background-color: var(--ngf-loading-background) !important;
+    height: 100% !important;
+    width: 100% !important;
+
+  }
+}

package/lib/components/pagination/info/info.component.scss

@@ -0,0 +1,58 @@
+@use '../../../../scss/system' as ngf;
+
+:host {
+  display: block;
+  container: pagination / inline-size;
+
+  .wrapper {
+    display: flex;
+    flex-direction: column;
+    font-family: "Poppins", sans-serif;
+    align-items: end;
+    text-align: center;
+    font-size: .8rem;
+    gap: 5px;
+
+    @container pagination (min-width: 400px) {
+      flex-direction: row;
+      justify-content: end;
+      align-items: center;
+      gap: 15px;
+    }
+
+    .block {
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+      gap: 5px;
+    }
+
+    .limit {
+      > select {
+        display: block;
+        padding: 2px 5px;
+        font-size: inherit;
+        outline: none !important;
+        width: 50px;
+      }
+    }
+
+    .nav {
+      > button {
+        display: block;
+        background-color: transparent;
+        box-shadow: none !important;
+        outline: none !important;
+        cursor: pointer;
+        border: none;
+        padding: 0px;
+
+        &:disabled {
+          cursor: default;
+          color: #AAA;
+        }
+      }
+    }
+  }
+}

package/lib/components/pagination/pagination.component.scss

@@ -0,0 +1,7 @@
+:host {
+  display: block;
+
+  > .content {
+    margin: 20px 0px;
+  }
+}

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@ngflux/ngflux",
-  "version": "1.0.4",
+  "version": "2.0.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/NgFlux/ngflux.git"
   },
+  "license": "MIT",
   "homepage": "https://github.com/NgFlux/ngflux",
   "keywords": [
     "angular",
@@ -18,8 +19,8 @@
     "access": "public"
   },
   "peerDependencies": {
-    "@angular/common": "^21.2.0",
-    "@angular/core": "^21.2.0"
+    "@angular/common": "^22.0.0",
+    "@angular/core": "^22.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"

package/types/ngflux-ngflux.d.ts

@@ -44,6 +44,7 @@ type PaginationInfo = {
 };
 
 type LoadingOptions = {
+    showOnRouteNavigation?: boolean;
     component?: NgFluxComponent;
 };
 type DialogAlertOptions = {
@@ -131,11 +132,6 @@ type NgFluxLoadingEntry = {
 
 declare const provideNgFlux: (config?: NgFluxConfig) => _angular_core.EnvironmentProviders;
 
-declare class NgFluxRootComponent {
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgFluxRootComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgFluxRootComponent, "ngf-root", never, {}, {}, never, ["*"], true, never>;
-}
-
 declare class NgFluxButton {
     private readonly ref;
     readonly icon: _angular_core.InputSignal<string | undefined>;
@@ -167,10 +163,11 @@ declare class NgFluxDialogFooterComponent {
 
 declare class NgFluxLoading {
     private readonly internal;
+    private readonly root;
     readonly data: _angular_core.Signal<_ngflux_ngflux.NgFluxLoadingEntry | undefined>;
     readonly isLoading: _angular_core.Signal<boolean>;
-    start(text?: string): void;
-    stop(): void;
+    readonly start: (text?: string) => void;
+    readonly stop: () => void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgFluxLoading, never>;
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<NgFluxLoading>;
 }
@@ -216,22 +213,25 @@ declare class NgFluxDialogHeaderComponent {
 }
 
 declare class NgFluxDialogRootComponent {
-    private readonly internal;
     readonly injector: Injector;
     readonly viewContainer: _angular_core.Signal<ViewContainerRef>;
-    constructor();
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgFluxDialogRootComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgFluxDialogRootComponent, "ngf-dialog-root", never, {}, {}, never, never, true, never>;
 }
 
 declare class NgFluxLoadingRootComponent {
     private readonly config;
-    private readonly internal;
     private readonly injector;
-    get isLoading(): boolean;
+    private readonly entries;
+    readonly count: _angular_core.Signal<number>;
+    readonly isLoading: _angular_core.Signal<boolean>;
+    get showLoading(): boolean;
     readonly viewContainer: _angular_core.Signal<ViewContainerRef>;
     private componentRef;
     constructor();
+    readonly entry: _angular_core.Signal<NgFluxLoadingEntry | undefined>;
+    readonly start: (text?: string) => void;
+    readonly stop: () => void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgFluxLoadingRootComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgFluxLoadingRootComponent, "ngf-loading-root", never, {}, {}, never, never, true, never>;
 }
@@ -250,5 +250,5 @@ declare class NgFluxPagination {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgFluxPagination, "ngf-pagination", never, { "data": { "alias": "data"; "required": true; "isSignal": true; }; "preload": { "alias": "preload"; "required": false; "isSignal": true; }; "transform": { "alias": "transform"; "required": false; "isSignal": true; }; "limit": { "alias": "limit"; "required": false; "isSignal": true; }; "limitEntries": { "alias": "limitEntries"; "required": false; "isSignal": true; }; }, { "limit": "limitChange"; "callback": "callback"; }, never, ["*"], true, never>;
 }
 
-export { NGF_CONFIG, NGF_DIALOG_DATA, NgFluxButton, NgFluxDialog, NgFluxDialogBodyComponent, NgFluxDialogFooterComponent, NgFluxDialogHeaderComponent, NgFluxDialogInstance, NgFluxDialogRef, NgFluxDialogRootComponent, NgFluxLoading, NgFluxLoadingRootComponent, NgFluxPagination, NgFluxRootComponent, provideNgFlux };
+export { NGF_CONFIG, NGF_DIALOG_DATA, NgFluxButton, NgFluxDialog, NgFluxDialogBodyComponent, NgFluxDialogFooterComponent, NgFluxDialogHeaderComponent, NgFluxDialogInstance, NgFluxDialogRef, NgFluxDialogRootComponent, NgFluxLoading, NgFluxLoadingRootComponent, NgFluxPagination, provideNgFlux };
 export type { ButtonDirection, ButtonOptions, ButtonSize, ButtonTheme, ButtonType, NgFluxComponent, NgFluxConfig, NgFluxDialogAlertOptions, NgFluxDialogButton, NgFluxDialogButtonObj, NgFluxDialogCommand, NgFluxDialogConfig, NgFluxDialogConfirmOptions, NgFluxDialogEvents, NgFluxDialogPromptOptions, NgFluxDialogRoot, NgFluxLoadingEntry, Pagination, PaginationInfo, PaginationTransformer };