@dflat-core/web 1.0.0-beta

package/fesm2022/dflat-core-web.mjs

@@ -0,0 +1,18 @@
+/*
+ * Point d'entrée principal de @dflat-core/web.
+ * Les librairies sont exposées par des points d'entrée secondaires :
+ *   @dflat-core/web/core, @dflat-core/web/core-model, @dflat-core/web/core-services, @dflat-core/web/core-data,
+ *   @dflat-core/web/core-ux, @dflat-core/web/system-model, @dflat-core/web/system-data,
+ *   @dflat-core/web/system-root, @dflat-core/web/system-ux
+ */
+const DFLAT_WEB_ENTRY_POINTS = [
+    'core', 'core-model', 'core-services', 'core-data', 'core-ux',
+    'system-model', 'system-data', 'system-root', 'system-ux'
+];
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DFLAT_WEB_ENTRY_POINTS };
+//# sourceMappingURL=dflat-core-web.mjs.map

package/fesm2022/dflat-core-web.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"dflat-core-web.mjs","sources":["../../src/index.ts","../../src/dflat-core-web.ts"],"sourcesContent":["/*\n * Point d'entrée principal de @dflat-core/web.\n * Les librairies sont exposées par des points d'entrée secondaires :\n *   @dflat-core/web/core, @dflat-core/web/core-model, @dflat-core/web/core-services, @dflat-core/web/core-data,\n *   @dflat-core/web/core-ux, @dflat-core/web/system-model, @dflat-core/web/system-data,\n *   @dflat-core/web/system-root, @dflat-core/web/system-ux\n */\nexport const DFLAT_WEB_ENTRY_POINTS = [\n    'core', 'core-model', 'core-services', 'core-data', 'core-ux',\n    'system-model', 'system-data', 'system-root', 'system-ux'\n] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"AAAA;;;;;;AAMG;AACI,MAAM,sBAAsB,GAAG;AAClC,IAAA,MAAM,EAAE,YAAY,EAAE,eAAe,EAAE,WAAW,EAAE,SAAS;AAC7D,IAAA,cAAc,EAAE,aAAa,EAAE,aAAa,EAAE;;;ACTlD;;AAEG;;"}

package/index.d.ts

@@ -0,0 +1 @@
+export declare const DFLAT_WEB_ENTRY_POINTS: readonly ["core", "core-model", "core-services", "core-data", "core-ux", "system-model", "system-data", "system-root", "system-ux"];

package/package.json

@@ -0,0 +1,82 @@
+{
+  "name": "@dflat-core/web",
+  "version": "1.0.0-beta",
+  "description": "Librairies Angular Dflat (core, core-*, system-*) et assets partagés, empaquetées en un module npm unique.",
+  "license": "MIT",
+  "peerDependencies": {
+    "@angular/animations": "^19.2.0",
+    "@angular/cdk": "^19.2.0",
+    "@angular/common": "^19.2.0",
+    "@angular/core": "^19.2.0",
+    "@angular/forms": "^19.2.0",
+    "@angular/platform-browser": "^19.2.0",
+    "@angular/router": "^19.2.0",
+    "@kolkov/angular-editor": "^2.1.0",
+    "@microsoft/signalr": "^7.0.12",
+    "@ng-select/ng-select": "^14.2.6",
+    "@samotics/ngx-treeview": "^20.1.2",
+    "@swimlane/ngx-datatable": "^20.0.0",
+    "guid-typescript": "^1.0.9",
+    "jwt-decode": "^2.2.0",
+    "lodash": "^4.17.14",
+    "lodash-es": "^4.17.21",
+    "moment": "^2.30.1",
+    "ng-recaptcha": "^12.0.2",
+    "ngx-bootstrap": "^20.0.2",
+    "ngx-dropzone": "^3.1.0",
+    "ngx-image-compress": "^13.1.13",
+    "ngx-toastr": "^16.2.0",
+    "rxjs": "^7.4.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "module": "fesm2022/dflat-core-web.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./fesm2022/dflat-core-web.mjs"
+    },
+    "./core-data": {
+      "types": "./core-data/index.d.ts",
+      "default": "./fesm2022/dflat-core-web-core-data.mjs"
+    },
+    "./core-model": {
+      "types": "./core-model/index.d.ts",
+      "default": "./fesm2022/dflat-core-web-core-model.mjs"
+    },
+    "./core": {
+      "types": "./core/index.d.ts",
+      "default": "./fesm2022/dflat-core-web-core.mjs"
+    },
+    "./core-services": {
+      "types": "./core-services/index.d.ts",
+      "default": "./fesm2022/dflat-core-web-core-services.mjs"
+    },
+    "./core-ux": {
+      "types": "./core-ux/index.d.ts",
+      "default": "./fesm2022/dflat-core-web-core-ux.mjs"
+    },
+    "./system-data": {
+      "types": "./system-data/index.d.ts",
+      "default": "./fesm2022/dflat-core-web-system-data.mjs"
+    },
+    "./system-model": {
+      "types": "./system-model/index.d.ts",
+      "default": "./fesm2022/dflat-core-web-system-model.mjs"
+    },
+    "./system-root": {
+      "types": "./system-root/index.d.ts",
+      "default": "./fesm2022/dflat-core-web-system-root.mjs"
+    },
+    "./system-ux": {
+      "types": "./system-ux/index.d.ts",
+      "default": "./fesm2022/dflat-core-web-system-ux.mjs"
+    }
+  },
+  "sideEffects": false
+}

package/scss/core-ux.scss

@@ -0,0 +1,5 @@
+@import "variables.scss";
+@import "styles/shared.scss";
+@import "styles/forms.scss";
+
+

package/scss/images/circle-info.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle-info" class="svg-inline--fa fa-circle-info" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM256 128c17.67 0 32 14.33 32 32c0 17.67-14.33 32-32 32S224 177.7 224 160C224 142.3 238.3 128 256 128zM296 384h-80C202.8 384 192 373.3 192 360s10.75-24 24-24h16v-64H224c-13.25 0-24-10.75-24-24S210.8 224 224 224h32c13.25 0 24 10.75 24 24v88h16c13.25 0 24 10.75 24 24S309.3 384 296 384z"></path></svg>

package/scss/images/circlecross.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="57" height="57" viewBox="0 0 57 57">
+  <path id="Rond_Croix" data-name="Rond Croix" d="M28.5,57A28.5,28.5,0,0,1,8.347,8.347,28.5,28.5,0,1,1,48.652,48.652,28.317,28.317,0,0,1,28.5,57Zm0-24.036h0l11.9,11.9L44.869,40.4,32.964,28.5,44.869,16.593,40.4,12.129,28.5,24.034,16.594,12.129l-4.465,4.464L24.034,28.5,12.129,40.4l4.463,4.465L28.5,32.965Z"/>
+</svg>

package/scss/images/circularoptionselected.svg

@@ -0,0 +1 @@
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 84.87 84.87"><defs><style>.cls-1{fill:#1d1d1b;}</style></defs><circle class="cls-1" cx="42.9" cy="41.98" r="21.68"/><path class="cls-1" d="M42.29.13A42.44,42.44,0,1,0,84.73,42.56,42.44,42.44,0,0,0,42.29.13Zm0,73.8A31.37,31.37,0,1,1,73.66,42.56,31.37,31.37,0,0,1,42.29,73.93Z" transform="translate(0.15 -0.13)"/></svg>

package/scss/images/filter.svg

@@ -0,0 +1,2 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
+<path fill="currentColor" d="M3.9 54.9C10.5 40.9 24.5 32 40 32l432 0c15.5 0 29.5 8.9 36.1 22.9s4.6 30.5-5.2 42.5L320 320.9 320 448c0 12.1-6.8 23.2-17.7 28.6s-23.8 4.3-33.5-3l-64-48c-8.1-6-12.8-15.5-12.8-25.6l0-79.1L9 97.3C-.7 85.4-2.8 68.8 3.9 54.9z"/></svg>

package/scss/images/pen-solid.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="pen" class="svg-inline--fa fa-pen fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M290.74 93.24l128.02 128.02-277.99 277.99-114.14 12.6C11.35 513.54-1.56 500.62.14 485.34l12.7-114.22 277.9-277.88zm207.2-19.06l-60.11-60.11c-18.75-18.75-49.16-18.75-67.91 0l-56.55 56.55 128.02 128.02 56.55-56.55c18.75-18.76 18.75-49.16 0-67.91z"></path></svg>

package/scss/images/search.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="49.485" height="49.485" viewBox="0 0 49.485 49.485">
+  <path id="Recherche" d="M31.88,37.039A20.324,20.324,0,1,1,12.411,1.6,20.324,20.324,0,0,1,37.039,31.88L49.485,44.326l-5.158,5.158ZM10.373,10.373a14.07,14.07,0,1,0,9.948-4.12A13.977,13.977,0,0,0,10.373,10.373Z"/>
+</svg>

package/scss/layout/default/default-layout.scss

@@ -0,0 +1,270 @@
+@use "variables.scss";
+@use "text.scss";
+
+$sidebar_back_color: text.$blue-8; //222d32
+$search_bar: #8FA3DF;
+
+
+.sidebar-incontainer {
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  -ms-overflow-style: none;  /* Internet Explorer 10+ */
+  scrollbar-width: none;  /* Firefox */
+}
+
+.sidebar-outcontainer {
+  height: 100%;
+  //overflow-y: auto;
+  //overflow-x: hidden;
+  background: $sidebar_back_color;
+  -ms-overflow-style: none;  /* Internet Explorer 10+ */
+  scrollbar-width: none;  /* Firefox */
+}
+.sidebar-outcontainer::-webkit-scrollbar {
+  display: none;  /* Safari and Chrome */
+}
+
+.sidebar-button {
+  width: variables.$header_height;
+  font-size : 16px;
+}
+
+.btn.btn-primary:hover,
+.btn.btn-primary:focus,
+.btn.btn-primary:active
+{
+  color: text.$blue-0;
+  background-color: text.$blue-7;
+  border-color: text.$blue-7;
+}
+
+.base-container {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  flex-grow: 1;
+  flex-shrink: 0;
+  overflow: auto;
+}
+
+.base-topbar {
+  display: flex;
+  flex-grow: 0;
+  flex-shrink: 0;
+  width: 100%;
+  height: variables.$header_height;
+  background: variables.$main_bg_color;
+  align-content: center;
+}
+
+.right-topbar {
+  display: flex;
+  margin-left: auto;
+  order: 2;
+}
+
+.base-main {
+  flex-grow: 1;
+  flex-shrink: 0;
+  height: 50%;
+  display: flex;
+  flex-direction: row;
+  justify-content: stretch;
+  align-content: flex-start;
+  flex-wrap: nowrap;
+}
+
+.footer {
+  display: none;
+  width: 100%;
+  height: variables.$footer_height;
+  background: $sidebar_back_color;
+  color: text.$white;
+  padding: 5px;
+}
+
+.main-content {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  flex-grow: 1;
+  flex-shrink: 1;
+  overflow: auto;
+  margin-left: 0;
+}
+
+.left-topbar {
+  display: flex;
+  align-content: center;
+}
+.left-topbar>div {
+    height: variables.$header_height;
+}
+.left-topbar>div>span {
+    line-height: variables.$header_height;
+    vertical-align:middle;
+}
+
+.sidebar-container {
+  display: flex;
+  flex-direction: column;
+  overflow-y: scroll;
+  height: calc(100% - 50px);
+  min-width: variables.$sidebar_width;
+  width: variables.$sidebar_width;
+  background: $sidebar_back_color;
+  
+  position: fixed;
+  // top: 60px; /* height of topbar */
+  // left: 0;
+  // width: 260px;
+  // height: calc(100vh - 60px);
+  // background: #1f2937;
+  transform: translateX(-100%);
+  transition: transform 0.25s ease-in-out;
+  z-index: 2000;
+  // box-shadow: 2px 0 8px rgba(0, 0, 0, 0.3);
+  &.collapsed {
+    // opacity: 0%;
+    margin-left:-(variables.$sidebar_width);
+    transition: ease-in 0.1s all;
+  }
+
+  &.uncollapsed {
+    margin-left:0px;
+    width: variables.$sidebar_width;
+    min-width: variables.$sidebar_width;
+    transition: ease-in 0.1s all;
+  }
+}
+
+.sidebar-hover-zone {
+    position: fixed;
+    top: 50px;
+    left: 0;
+    width: 50px;              /* 10% of viewport */
+    height: calc(100% - 50px);
+    z-index: 1000;
+     background: $sidebar_back_color;
+}
+.sidebar-container.visible {
+    transform: translateX(0);
+}
+
+
+.menu-container {
+  display: flex;
+  flex-direction: column;
+  flex:1;
+}
+
+.main-component {
+  width: 100%;  
+  height: 100%;
+  overflow: auto;
+}
+
+.mini-logo3D-lg {
+    width: auto;
+    height: 80px;
+    background: variables.$main-bg-color;
+    padding: 0px 30px 0px 0px;
+    margin-left: 0px;
+    margin-top: 0px;
+    cursor: pointer;
+    //opacity: 100%;
+
+}
+
+.mini-logo-lg {
+  width: auto;
+  height: 40px;
+  background: variables.$main-bg-color;
+  padding: 5px 5px 5px 5px;
+  margin-left: 0px;
+  margin-top: 5px;
+  cursor: pointer;
+}
+
+.dflat-logo {
+    font-family: "ErasITC-Bold", "Eras ITC", "Eras Light ITC", sans-serif;
+    font-size: 16pt;
+    color: white;
+    cursor: pointer;
+}
+
+
+.breadcrumb-panel {
+  height: 44x;
+  width: 100%;
+  border-bottom: solid 1px var(--main-bg-color);
+}
+
+// ***********************************************************
+// JC Ajout le 02-04-2024 pour la barre de recherche
+// ***********************************************************
+
+
+.search-bar-container {
+  margin-left: 55px;
+  margin-top: -5px;
+}
+
+.search {
+  border-radius: 5px;
+  border: 1px solid $search_bar;
+  background-color: variables.$main-bg-color;
+  padding-left: 30px;
+  margin-top: 14px;
+  width: 400px;
+  color: white;
+}::placeholder{
+  color:$search_bar
+}
+
+.search-bar-container {
+  &::before {
+    position: relative;
+    display: block;
+    float: left;
+    width: 16px;
+    height: 16px;
+    content: " ";
+    background-size: 16px 16px;
+    -webkit-background-size: 16px 16px;
+    background-image: url('../../images/search.svg');
+    background-repeat: no-repeat;
+    margin: 9px -40px 0px 9px;
+    filter: text.$filter-blue-4;
+  }
+}
+
+.user-menu {
+  display: flex;
+  flex-direction: column;
+  padding: 10px;
+}
+
+.mini-logo-histo {
+  display: flex;
+  justify-content: flex-end;
+
+  width: auto;
+  height: 40px;
+  background: variables.$main_bg_color;
+  padding: 5px 5px 5px 5px;
+  margin-left: 0px;
+  margin-top: 5px;
+  cursor: pointer;
+}
+
+
+@media screen and (max-width: 500px) {
+  .search {
+    width: 150px;
+  }
+}
+// ***********************************************************

package/scss/layout/login/login-layout.scss

@@ -0,0 +1,204 @@
+@use "variables.scss";
+
+.login-box {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content:space-around;
+  width: 100%;
+  height: 100%;
+  background-color: #F7FAFF;
+}
+
+
+.dflat-logo-container {
+  display: flex;
+  flex-direction: column;
+  width: 60%;
+  height: 100%;
+  align-items: center;
+  background: transparent linear-gradient(360deg, #3C5DC4 0%, #8EA7F8 100%)
+}
+
+.dflat-logo {
+  display: flex;
+  flex:auto;
+  align-items: center;
+  
+
+}
+.dflat-img {
+  // width: 275px;
+  height: 400px;
+}
+.login-box-body {
+  flex: auto;
+  width: 40%;
+  max-width: 500px;
+  border-radius: 20px;
+  box-shadow: 0px 3px 10px rgb(156,177,245,0.25);
+  background: white;  
+  // opacity: 0.15;
+  margin: 0px 50px;
+  padding: 50px;
+}
+.customer-img-container {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+
+}
+
+.login-form-container {
+  padding: 15px 0px;
+}
+
+.dflat-text {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  padding: 50px;
+  color: #6684E0;
+
+  .msw {
+    font-family: "ErasITC-Bold", "Eras ITC", "Eras Light ITC", sans-serif;
+    font-size: 16pt;
+  }
+}
+// .login-box-body,
+//  .register-box-body {
+//     background: #fff;
+//     border-top-color: $main_bg_color;
+//     border-top: 5px solid $main_bg_color;
+//     padding: 0px 10px 5px 10px;
+// }
+
+
+// .login-page {
+//     background: #efefef;
+// }
+
+// .logo-container {
+//     margin-top: 5px;
+//     position: relative;
+//     text-align: center;
+//     background-color: white;
+//     padding: 20px 0px 10px 0px;
+// }
+
+.customer-img {
+    width: 300px;
+    height: auto;
+    padding: 15px;
+}
+
+// .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;
+//     font-weight: 300;
+//     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;
+// }
+
+// /*
+//  * Page: Login & Register
+//  * ----------------------
+//  */
+//  .login-logo,
+//  .register-logo {
+//    text-align: center;
+//    font-weight: 300;
+//  }
+//  .login-logo a,
+//  .register-logo a {
+//    color: #444;
+//  }
+//  .login-page,
+//  .register-page {
+//    background: #d2d6de;
+//  }
+//  .login-box,
+//  .register-box {
+//   //  width: 360px;
+//   //  margin: 7% auto;
+//  }
+//  @media (max-width: 768px) {
+//    .login-box,
+//    .register-box {
+//     //  width: 90%;
+//     //  margin-top: 20px;
+//    }
+//  }
+ 
+//  .login-box-body .form-control-feedback,
+//  .register-box-body .form-control-feedback {
+//    color: $main_bg_color;
+//  }
+//  .login-box-msg,
+//  .register-box-msg {
+//    margin: 0;
+//    text-align: center;
+//    padding: 0 20px 20px 20px;
+//  }
+//  .social-auth-links {
+//    margin: 10px 0;
+//  }
+
+@media (max-width: 768px) {
+  .login-box {
+    flex-direction: row;
+    align-items: center;
+  }
+  .dflat-logo-container {
+    // height: 100px;
+    // width: 100%;
+    display: none;
+    visibility: collapse;
+
+  }  
+  .dflat-img {
+    height: 50px;
+    width: 50px;
+  }
+
+  .login-box-body {
+    width: 95%;
+    margin: 15px 15px;
+  }
+} 

package/scss/styles/drag-and-drop.scss

@@ -0,0 +1,36 @@
+.app-droppable {
+    position: relative;
+}
+
+.app-droppable:after {
+    content: '';
+    display: block;
+    background-color: transparent;
+    border-color: transparent;
+}
+
+.app-draggable {
+    cursor: pointer;
+    // box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+}
+
+.js-app-droppable--target:after,
+.js-app-droppable--zone:after {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border-width: 2px;
+    border-style: dashed;
+}
+
+.js-app-droppable--target:after {
+    border-color: #b6faff;
+    background-color: #f0feff;
+}
+
+.js-app-droppable--zone:after {
+    border-color: #85ca7f;
+    background-color: #ebffe8;
+}