@ngflux/ngflux 1.0.3 → 1.0.6

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 NgFlux
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,64 +1,28 @@
-# Ngflex
+# NgFlux Angular Library
 
-This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 21.2.0.
+[![NPM version][npm-version-image]][npm-url]
+[![NPM downloads][npm-downloads-image]][npm-downloads-url]
+[![MIT License][license-image]][license-url]
 
-## Code scaffolding
+NgFlux provides powerful angular components, services, directives, pipes, guards and many more features for building awesome applications.
 
-Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+<!-- ## Resources -->
 
-```bash
-ng generate component component-name
-```
+<!-- - [Wiki/Documentation][wiki-url] -->
+<!-- - [Blog][blog-url] -->
 
-For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+## License
 
-```bash
-ng generate --help
-```
+NgFlux is freely distributable under the terms of the [MIT license][license-url].
 
-## Building
+[wiki-url]: https://www.cyberpull.com/wiki/opensource/ngflux
+[blog-url]: https://www.cyberpull.com/blog/tag/ngflux
 
-To build the library, run:
+[license-image]: https://img.shields.io/github/license/NgFlux/ngflux
+[license-url]: LICENSE
 
-```bash
-ng build ngflux
-```
+[npm-version-image]: https://img.shields.io/npm/v/@ngflux/ngflux.svg?style=flat
+[npm-url]: https://www.npmjs.com/package/@ngflux/ngflux
 
-This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
-
-### Publishing the Library
-
-Once the project is built, you can publish your library by following these steps:
-
-1. Navigate to the `dist` directory:
-
-   ```bash
-   cd dist/ngflux
-   ```
-
-2. Run the `npm publish` command to publish your library to the npm registry:
-   ```bash
-   npm publish
-   ```
-
-## Running unit tests
-
-To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
-
-```bash
-ng test
-```
-
-## Running end-to-end tests
-
-For end-to-end (e2e) testing, run:
-
-```bash
-ng e2e
-```
-
-Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
-
-## Additional Resources
-
-For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
+[npm-downloads-image]: https://img.shields.io/npm/dw/@ngflux/ngflux
+[npm-downloads-url]: https://npmcharts.com/compare/@ngflux/ngflux?minimal=true

package/_index.scss

@@ -0,0 +1 @@
+@forward './scss/system';

package/lib/components/button/button.component.scss

@@ -0,0 +1,126 @@
+@use '../../../scss/system' as ngf;
+
+:host {
+  display: inline-block;
+  border: 1px solid rgba(0, 0, 0, .2);
+  border-radius: 3px;
+  cursor: pointer;
+  font-size: 1rem;
+  overflow: clip;
+
+  &.block { display: block; }
+
+  &.disabled {
+    opacity: .5 !important;
+    user-select: none !important;
+    cursor: not-allowed;
+  }
+
+  &.xs { font-size: .6rem; }
+  &.sm { font-size: .8rem; }
+  &.md { font-size: 1rem; }
+  &.lg { font-size: 1.25rem; }
+  &.xl { font-size: 1.5rem; }
+
+  &.default {
+    background-color: var(--ngf-default) !important;
+    color: var(--ngf-default-fg) !important;
+  }
+
+  &.primary {
+    background-color: var(--ngf-primary) !important;
+    color: var(--ngf-primary-fg) !important;
+  }
+
+  &.secondary {
+    background-color: var(--ngf-secondary) !important;
+    color: var(--ngf-secondary-fg) !important;
+  }
+
+  &.error {
+    background-color: var(--ngf-error) !important;
+    color: var(--ngf-error-fg) !important;
+  }
+
+  &.danger {
+    background-color: var(--ngf-danger) !important;
+    color: var(--ngf-danger-fg) !important;
+  }
+
+  &.success {
+    background-color: var(--ngf-success) !important;
+    color: var(--ngf-success-fg) !important;
+  }
+
+  &.warning {
+    background-color: var(--ngf-warning) !important;
+    color: var(--ngf-warning-fg) !important;
+  }
+
+  &.info {
+    background-color: var(--ngf-info) !important;
+    color: var(--ngf-info-fg) !important;
+  }
+
+  &.light {
+    background-color: var(--ngf-light) !important;
+    color: var(--ngf-light-fg) !important;
+  }
+
+  &.dark {
+    background-color: var(--ngf-dark) !important;
+    color: var(--ngf-dark-fg) !important;
+  }
+
+  > button {
+    display: block;
+    padding: 0px !important;
+    background-color: transparent;
+    border: none !important;
+    width: 100% !important;
+    cursor: inherit !important;
+    color: inherit !important;
+    font-weight: 500;
+    font-size: 1em;
+
+    &:focus {
+      outline: none !important;
+    }
+  }
+
+  .wrapper {
+    display: flex;
+    flex-direction: var(--flex-direction) !important;
+
+    --flex-direction: row;
+    --icon-border-left: none;
+    --icon-border-right: 1px solid rgba(0, 0, 0, .2);
+
+    &.reversed {
+      --flex-direction: row-reverse;
+      --icon-border-left: 1px solid rgba(0, 0, 0, .2);
+      --icon-border-right: none;
+    }
+
+    > .icon {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      font-size: 1.05em;
+      border-left: var(--icon-border-left) !important;
+      border-right: var(--icon-border-right) !important;
+      padding: 0px .5em;
+    }
+
+    > .content {
+      display: block;
+      flex-grow: 1;
+      padding: .5em 1em;
+      white-space: nowrap !important;
+      text-align: center !important;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+  }
+}

package/lib/components/dialog/body/body.component.scss

@@ -0,0 +1,4 @@
+:host {
+  display: block;
+  padding: 20px;
+}

package/lib/components/dialog/boxes/alert/alert.dialog.scss

@@ -0,0 +1,6 @@
+:host {
+  display: block;
+  width: 90%;
+  max-width: 500px;
+  background-color: #FFF;
+}

package/lib/components/dialog/boxes/confirm/confirm.dialog.scss

@@ -0,0 +1,6 @@
+:host {
+  display: block;
+  width: 90%;
+  max-width: 500px;
+  background-color: #FFF;
+}

package/lib/components/dialog/boxes/prompt/prompt.dialog.scss

@@ -0,0 +1,24 @@
+:host {
+  display: block;
+  width: 90%;
+  max-width: 350px;
+  background-color: #FFF;
+
+  .content {
+    margin: 0px 0px 10px 0px;
+  }
+
+  input {
+    display: block;
+    width: 100% !important;
+    border: 1px solid #DDD;
+    background-color: #FFF;
+    padding: 10px 15px;
+    font-size: 1.2rem;
+    
+    &:focus {
+      outline: 2px solid #DDD;
+      box-shadow: none !important;
+    }
+  }
+}

package/lib/components/dialog/footer/footer.component.scss

@@ -0,0 +1,12 @@
+:host {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: end;
+  position: sticky;
+  background-color: var(--ngf-dialog-background-color) !important;
+  border-top: var(--ngf-dialog-border) !important;
+  padding: 7px 15px;
+  bottom: 0px;
+  gap: 10px;
+}

package/lib/components/dialog/header/header.component.scss

@@ -0,0 +1,38 @@
+:host {
+  display: flex;
+  flex-direction: row;
+  position: sticky;
+  background-color: var(--ngf-dialog-background-color) !important;
+  border-bottom: var(--ngf-dialog-border) !important;
+  min-height: 50px;
+  top: 0px;
+
+  > .left {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    padding: 10px;
+  }
+
+  > .middle {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: start;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding: 10px 20px;
+    flex: 1 0 0;
+    width: 0px;
+  }
+
+  > .right {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    padding: 10px;
+  }
+}

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

@@ -0,0 +1,24 @@
+:host {
+  display: block;
+  position: fixed;
+  background-color: var(--ngf-dialog-backdrop-color) !important;
+  visibility: visible !important;
+  z-index: var(--ngf-dialog-z-index) !important;
+  inset: 0px;
+
+  > .wrapper {
+    display: block;
+    width: 100% !important;
+    height: 100% !important;
+    overflow: hidden auto;
+
+    > .content {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      min-width: 100%;
+      min-height: 100%;
+    }
+  }
+}

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

@@ -0,0 +1,6 @@
+:host {
+  display: block;
+  width: 0px;
+  height: 0px;
+  visibility: hidden;
+}

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.3",
+  "version": "1.0.6",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/NgFlux/ngflux.git"
   },
+  "license": "MIT",
   "homepage": "https://github.com/NgFlux/ngflux",
   "keywords": [
     "angular",