@dflat-core/web 1.0.0-beta

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Dflat
+
+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

@@ -0,0 +1,94 @@
+# @dflat-core/web
+
+Librairies Angular de Dflat, empaquetées en un module npm unique (Angular Package Format, construit avec ng-packagr).
+
+## Points d'entrée
+
+| Import                     | Contenu                                                      |
+| -------------------------- | ------------------------------------------------------------ |
+| `@dflat-core/web/core`          | Utilitaires, `EnvironmentBase`                               |
+| `@dflat-core/web/core-model`    | Modèle de base (interfaces générées depuis Dflat.Kernel.Model) |
+| `@dflat-core/web/core-services` | Authentification, messages, menus, hub SignalR...            |
+| `@dflat-core/web/core-data`     | `DataService`, `EntityDataService`                           |
+| `@dflat-core/web/core-ux`       | Composants, directives et services d'interface               |
+| `@dflat-core/web/system-model`  | Modèle du module System (généré)                             |
+| `@dflat-core/web/system-data`   | Services de données du module System (générés)               |
+| `@dflat-core/web/system-root`   | Permissions, clés d'entités et menus du module System        |
+| `@dflat-core/web/system-ux`     | Écrans du module System                                      |
+
+Ressources non TypeScript livrées dans le package :
+
+- `assets/` : styles partagés (`site.scss`, `variables.scss`, `text.scss`...), images et polices ;
+- `scss/` : styles globaux de core-ux (`core-ux.scss`, `layout/default/default-layout.scss`...).
+
+## Construire
+
+```bash
+npm install
+npm run build        # <dépôt>/artifacts/nodejs/dflat-web (compilation partielle, publiable)
+npm run watch        # reconstruction continue pendant le développement
+npm run pack         # <dépôt>/artifacts/nodejs/dflat-web-<version>.tgz
+```
+
+Depuis la racine du dépôt, `scripts/publish-dflat.ps1` enchaîne ces étapes :
+
+```powershell
+.\scripts\publish-dflat.ps1 -bw                  # npm install si besoin, build, vidage du cache Angular de webapps
+.\scripts\publish-dflat.ps1 -pn                  # package versionné + archive .tgz (version calculée depuis npmjs.com)
+.\scripts\publish-dflat.ps1 -pn -Push            # ... puis publication sur npmjs.com, après confirmation
+```
+
+`npm install` applique `tools/patch-ng-packagr.js` : correctif d'un bug de ng-packagr 19.2 sur la réécriture
+des `url()` des partials Sass (voir le commentaire du script).
+
+## Utiliser dans un espace de travail Angular / Nx
+
+1. Dépendance, dans `package.json` (ex. `webapps`) :
+
+   ```json
+   "@dflat-core/web": "file:../artifacts/nodejs/dflat-web"
+   ```
+
+   puis `npm install`. Le lien est symbolique : un `npm run build` du package suffit ensuite, **à condition de
+   vider le cache Angular de l'application** (`.angular/cache`) et de relancer `nx serve`. Le cache webpack considère
+   `node_modules` comme immuable tant que la version du package ne change pas et resservirait l'ancien bundle.
+   Depuis `webapps`, `npm run build:dflat-web` enchaîne les deux.
+
+2. Dans les options de build de l'application (`project.json`) :
+
+   ```json
+   "preserveSymlinks": true,
+   "stylePreprocessorOptions": { "includePaths": ["node_modules/@dflat-core/web/assets"] },
+   "assets": [{ "input": "node_modules/@dflat-core/web/assets", "glob": "*/**", "output": "assets" }]
+   ```
+
+   `preserveSymlinks` évite de résoudre Angular depuis `web/dflat-web/node_modules` (double instance).
+
+3. Styles globaux (`styles.scss`) :
+
+   ```scss
+   @import "../../../node_modules/@dflat-core/web/scss/core-ux.scss";
+   ```
+
+## Règles propres à une librairie
+
+La compilation partielle d'Angular est plus stricte que celle d'une application :
+
+- **pas d'import par le barrel de sa propre librairie** (`@dflat-core/web/core-ux` depuis core-ux) : utiliser un
+  chemin relatif. Entre librairies, toujours passer par `@dflat-core/web/<librairie>` ;
+- **toute classe déclarée par un NgModule doit être exportée** par le `src/index.ts` de sa librairie (NG3001) ;
+- **pas de cycle d'imports entre un composant et ce qu'utilise son template** (NG3003). Pour casser un cycle :
+  `import type` lorsque le symbole ne sert qu'au typage, ou un `InjectionToken` lorsqu'un type de composant
+  est nécessaire à l'exécution (voir `core-ux/src/lib/modals/dialog-component.tokens.ts`,
+  `RowRefHost` dans `row-ref.directive.ts`) ;
+- **pas de cycle d'imports entre une classe et sa classe parente**, même indirect : chaque point d'entrée est
+  aplati en un seul fichier et la classe fille pourrait y être émise avant la parente
+  (`Cannot access 'X' before initialization` au démarrage de l'application). `tools/check-bundles.js`, lancé par
+  `npm run build`, le détecte.
+
+## Code généré
+
+`codegenerator -ts -webpkg <dépôt>\web\dflat-web` écrit les librairies Dflat (core-model, system-model,
+system-data) dans ce dossier et génère les imports en `@dflat-core/web/<librairie>`. Sans `-webpkg` (application hôte
+hors dépôt), ces librairies ne sont pas générées : elles sont fournies par le package. `dbmanager` écrit les
+permissions TypeScript du module System dans `system-root/src/lib`.

package/assets/bootswatch.scss

@@ -0,0 +1,100 @@
+// Pulse 4.3.1
+// Bootswatch
+
+//
+// Color system
+//
+
+$white:    #fff !default;
+$gray-100: #fafafa !default;
+$gray-200: #F9F8FC !default;
+$gray-300: #EDEDED !default;
+$gray-400: #cbc8d0 !default;
+$gray-500: #adb5bd !default;
+$gray-600: #868e96 !default;
+$gray-700: #444 !default;
+$gray-800: #343a40 !default;
+$gray-900: #17141F !default;
+$black:    #000 !default;
+
+$blue:    #007bff !default;
+$indigo:  #4465C9 !default;
+$purple:  #4465C9 !default;
+$pink:    #e83e8c !default;
+$red:     #FC3939 !default;
+$orange:  #fd7e14 !default;
+$yellow:  #EFA31D !default;
+$green:   #13B955 !default;
+$teal:    #20c997 !default;
+$cyan:    #009CDC !default;
+
+$primary:       $purple !default;
+$secondary:     $gray-200 !default;
+$success:       $green !default;
+$info:          $cyan !default;
+$warning:       $yellow !default;
+$danger:        $red !default;
+$light:         $gray-200 !default;
+$dark:          $gray-900 !default;
+
+// Options
+
+$enable-rounded: false !default;
+
+// Body
+
+$body-color:                $gray-700 !default;
+
+// Links
+
+$link-hover-color:          $primary !default;
+
+// Fonts
+
+$font-size-base:              0.875rem !default;
+
+// Tables
+
+$table-border-color:          rgba(0, 0, 0, 0.05) !default;
+
+// Forms
+
+$input-focus-border-color:              $primary !default;
+
+// Dropdowns
+
+$dropdown-link-color:               $gray-700 !default;
+$dropdown-link-hover-color:         $white !default;
+$dropdown-link-hover-bg:            $primary !default;
+
+// Navs
+
+$nav-tabs-border-color:             $gray-300 !default;
+$nav-tabs-link-hover-border-color:  $primary !default;
+
+// Navbar
+
+$navbar-padding-y:                  1.2rem !default;
+
+$navbar-dark-hover-color:           rgba($white,.9) !default;
+$navbar-dark-active-color:          rgba($white,.9) !default;
+
+$navbar-light-color:                rgba($black,.4) !default;
+$navbar-light-active-color:         rgba($black,.7) !default;
+$navbar-light-disabled-color:       rgba($black,.2) !default;
+
+// Progress bars
+
+$progress-bg:                       $gray-300 !default;
+$progress-bar-bg:                   $primary !default;
+
+// List group
+
+$list-group-bg:                     $gray-900 !default;
+$list-group-border-color:           transparent !default;
+
+$list-group-hover-bg:               lighten($list-group-bg, 10%) !default;
+$list-group-active-color:           $white !default;
+$list-group-active-bg:              $list-group-bg !default;
+
+$list-group-disabled-color:         lighten($list-group-bg, 30%) !default;

package/assets/buttons.scss

@@ -0,0 +1,70 @@
+@import 'variables.scss';
+@import 'text.scss';
+
+.btn-bar {
+    flex-grow: 1;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+}
+.btn-bar-horizontal {
+    flex-direction: row;
+}
+.btn-bar button {
+    align-self: stretch;
+    margin-top: 5px;
+    margin-bottom: 5px;
+    ;
+}
+.btn-bar a {
+    margin-top: 15px;
+}
+
+.btn-bar.btn-bar-horizontal a,
+.btn-bar.btn-bar-horizontal button {
+    margin-right: 15px;
+}
+
+.btn-bar.btn-bar-right button {
+    align-self: flex-end;
+}
+
+.btn-bar.btn-bar-left button {
+    align-self: flex-start;
+}
+
+.btn-bar.btn-bar-center button {
+    align-self: center;
+}
+
+.btn-bar {
+    // display: flex;
+    // flex-direction: row;
+
+    // justify-content: flex-start;
+    // background: transparent;
+    // width: 100%;
+    // padding-top: 5px;
+
+    &.horizontal {
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-end;
+        background: $form-grey;
+        width: 100%;
+        padding-top: 5px;
+    }
+
+    .btn-bar-container {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: flex-end;
+        margin-right: 5px;
+        > button {
+            margin-left: 15px;
+            min-width: 130px;
+            cursor: pointer;
+        }
+    }
+}

package/assets/components/datagrid.scss

@@ -0,0 +1,138 @@
+// /*
+// bootstrap table theme
+// */
+
+// .ngx-datatable {
+//     text-align: left;
+//     /* width:75%;
+// 	margin:0 auto;  */
+//     /* height: 690px; */
+// }
+
+// .ngx-datatable.dflat-datatable {
+//     box-shadow: none;
+//     font-family: 'SegoeUI';
+//     border: none;
+//     background-color: white;
+// }
+
+// .ngx-datatable.dflat-datatable .datatable-body-row.selectable {
+//     cursor: pointer;
+// }
+
+// .ngx-datatable p {
+//     margin: 0px;
+// }
+
+// .ngx-datatable.dflat-datatable .datatable-header .datatable-header-cell {
+//     vertical-align: bottom;
+//     padding: 2px 10px;
+//     /* border-top: 1px solid var(--main-bg-color); */
+//     /*border-left: 1px solid var(--main-bg-color); */
+//     border-bottom: 1px solid var(--main-bg-color);
+//     font-family: 'Open Sans';
+//     font-size: 10pt;
+//     color: var(--main-bg-color);
+// }
+
+// .ngx-datatable.dflat-datatable .datatable-body {
+//     min-height: 658px;
+//     border-bottom: solid 1px var(--main-bg-color);
+// }
+
+// .ngx-datatable.dflat-datatable .datatable-header .datatable-header-cell .datatable-header-cell-label {
+//     line-height: 27px;
+// }
+
+// .ngx-datatable.dflat-datatable .datatable-body .datatable-body-row {
+//     vertical-align: top;
+// }
+
+// .ngx-datatable.dflat-datatable .datatable-body .datatable-body-cell {
+//     padding: 2px 10px;
+// }
+
+// .ngx-datatable.dflat-datatable .datatable-body .datatable-body-row.datatable-row-even {
+//     background-color: #efefef;
+// }
+
+// .ngx-datatable.dflat-datatable .datatable-body .datatable-body-row.active {
+//     background-color: #3c8de5;
+//     color: #FFF;
+// }
+
+// .ngx-datatable.dflat-datatable .datatable-body .datatable-body-row .datatable-body-cell {
+//     text-align: left;
+//     vertical-align: top;
+// }
+
+// .ngx-datatable.dflat-datatable .datatable-footer {
+//     background: white;
+//     color: #00aedb;
+//     margin-top: -1px;
+// }
+
+// .ngx-datatable.dflat-datatable .datatable-footer .page-count {
+//     /* line-height: 50px;
+//     height: 50px; */
+//     padding: 0 1.2rem;
+// }
+
+// .ngx-datatable.dflat-datatable .datatable-footer .datatable-pager {
+//     margin: 0px 0px 0px 0px;
+//     vertical-align: top;
+// }
+
+// .ngx-datatable.dflat-datatable .datatable-footer .datatable-pager ul li {
+//     margin: 10px 0px;
+// }
+
+// .ngx-datatable.dflat-datatable .datatable-footer .datatable-pager ul li:not(.disabled).active a,
+// .ngx-datatable.dflat-datatable .datatable-footer .datatable-pager ul li:not(.disabled):hover a {
+//     /* background-color: #545454; */
+//     background-color: #00aedb;
+//     color: white;
+//     font-weight: bold;
+// }
+
+// .ngx-datatable.dflat-datatable .datatable-footer .datatable-pager a {
+//     height: 32px;
+//     min-width: 32px;
+//     line-height: 32px;
+//     padding: 0;
+//     border-radius: 3px;
+//     margin: 0 3px;
+//     text-align: center;
+//     vertical-align: top;
+//     text-decoration: none;
+//     vertical-align: bottom;
+//     color: #00aedb;
+//     border: 1px solid #00aedb;
+// }
+
+// .ngx-datatable.dflat-datatable .datatable-footer .datatable-pager .datatable-icon-left,
+// .ngx-datatable.dflat-datatable .datatable-footer .datatable-pager .datatable-icon-skip,
+// .ngx-datatable.dflat-datatable .datatable-footer .datatable-pager .datatable-icon-right,
+// .ngx-datatable.dflat-datatable .datatable-footer .datatable-pager .datatable-icon-prev {
+//     /* font-size: 18px;
+//     line-height: 27px; */
+//     padding: 0 3px;
+// }
+
+// .pager li>a,
+// .pager li>span {
+//     display: inline-block;
+//     padding: 5px 18px;
+//     background-color: white;
+//     border: 1px solid #00aedb;
+//     border-radius: 15px;
+//     color: #00aedb;
+// }
+
+// .pager .disabled>a,
+// .pager .disabled>a:hover,
+// .pager .disabled>a:focus,
+// .pager .disabled>span {
+//     cursor: not-allowed;
+// }
+

package/assets/components/fonts.scss

@@ -0,0 +1,24 @@
+@font-face {
+    font-family: 'ErasITC-Bold';
+    src: url('../fonts/ErasITC-Bold/ErasITC-Bold.eot?#iefix') format('embedded-opentype'), url('../fonts/ErasITC-Bold/ErasITC-Bold.woff') format('woff'), url('../fonts/ErasITC-Bold/ErasITC-Bold.ttf') format('truetype'), url('../fonts/ErasITC-Bold/ErasITC-Bold.svg#ErasITC-Bold') format('svg');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'SegoeUI';
+    src: url('../fonts/SegoeUI/SegoeUI.eot?#iefix') format('embedded-opentype'), url('../fonts/SegoeUI/SegoeUI.woff') format('woff'), url('../fonts/SegoeUI/SegoeUI.ttf') format('truetype'), url('../fonts/SegoeUI/SegoeUI.svg#SegoeUI') format('svg');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'SegoeUI-Light';
+    src: url('../fonts/SegoeUI-Light/SegoeUI-Light.eot?#iefix') format('embedded-opentype'), url('../fonts/SegoeUI-Light/SegoeUI-Light.woff') format('woff'), url('../fonts/SegoeUI-Light/SegoeUI-Light.ttf') format('truetype'), url('../fonts/SegoeUI-Light/SegoeUI-Light.svg#SegoeUI-Light') format('svg');
+    font-weight: normal;
+    font-style: normal;
+}
+@import "https://fonts.googleapis.com/css?family=Arvo:400,700,400italic,700italic";
+@import "https://fonts.googleapis.com/css?family=Open+Sans:700,400";
+@import "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap";
+

package/assets/components/login.scss

@@ -0,0 +1,59 @@
+.login-page {
+    background: #efefef;
+}
+
+/* .logo-container {
+    position: relative;
+    text-align: center;
+    background-color: white;
+    padding: 20px 0px 10px 0px;
+}
+
+.customer-img {
+    width: 100%;
+    height: auto;
+    padding: 15px 0px 5px 0px;
+}
+
+.logo-container .customer-img {
+    border-top: 1px solid black;
+    border-bottom: 1px solid black;
+    padding: 15px 0px 15px 0px;
+    margin: -5px 0px 0px 0px;
+    z-index: 130;
+}
+
+.login-logo {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    background: white;
+    color: black;
+    text-align: right;
+    margin: 8px 0 0 0;
+    padding: 0 0 0 5px;
+    border: 0 0 0 0;
+    font-size: 5px;
+    line-height: 10px;
+    z-index: 100;
+}
+
+.dflat-logo {
+    font-family: "ErasITC-Bold", "Eras ITC", "Eras Light ITC", sans-serif;
+    font-size: 16pt;
+    color: white;
+}
+
+
+/* .dflat-logo.header {
+    padding-top: 15px;
+} */
+
+/* .logo-black {
+    color: black;
+}
+
+.dflat-version {
+    font-size: 10px;
+    font-weight: bold;
+} */

package/assets/components/modals.scss

@@ -0,0 +1,62 @@
+
+@use "text.scss";
+@use "variables.scss";
+
+.modal-body {
+    padding: 0px 0px 0px 0px;
+    max-height: 80vh;
+    display: flex;
+    flex-direction: column;
+    // overflow-y: auto;
+
+    &.row {
+        flex-direction: row;
+    }
+}
+
+
+
+.modal-header {
+    border-bottom: 1px solid text.$blue-8;
+    h4 {
+        margin-left : 10px;
+    }
+}
+
+.modal-xlg {
+    min-width: 1000px;
+}
+.modal-lg {
+    min-width: 700px;
+}
+.modal-md {
+    min-width: 500px;
+}
+.modal-sm {
+    min-width: 300px;
+}
+
+
+
+.modal-footer {
+    padding: 10px;
+}
+
+.modal-footer .btn-primary {
+    background: text.$blue-6;
+}
+
+.modal-header .close {
+    color: white;
+    
+}
+
+.modal-header {
+    background: text.$blue-6;
+    color: white;
+}
+
+.modal-dialog {
+      
+    margin: 5.25rem auto !important;
+  }