new-front-common-library 16.0.0 → 16.0.1-REF-2

package/assets/css/_dark-theme.scss

@@ -100,7 +100,7 @@
 
   //19
   input {
-    color: $gray-light;
+    color: $gray-light !important;
   }
 
   textarea {
@@ -525,11 +525,6 @@
     color: $blue-primary !important;
   }
 
-  .mat-datepicker-content .mat-calendar {
-    width: 220px;
-    height: auto;
-  }
-
   .mat-calendar-controls {
     display: flex;
     margin: 0% calc(33% / 7 - 16px);

package/assets/css/_global.scss

@@ -105,12 +105,17 @@ body, html {
   height: 1em !important;
 }
 
+.mat-datepicker-content .mat-calendar {
+  width: 230px;
+  height: auto;
+}
+
 .mat-row .mat-form-field .mat-datepicker-toggle-default-icon {
   height: 15px !important;
   margin-top: -8px;
 }
 
-.datepicker .mat-datepicker-toggle-default-icon {
+.datepicker .mat-form-field-wrapper .mat-datepicker-toggle-default-icon {
   height: 15px !important;
   margin: 0 0 0 5px !important
 }
@@ -324,7 +329,7 @@ textarea {
 
 .mat-standard-chip.mat-chip-with-trailing-icon{
   padding-right: 2px;
-  padding-left: 4px;
+  padding-left: 2px;
 }
 
 .mat-standard-chip .mat-chip-remove, .mat-standard-chip .mat-chip-trailing-icon{
@@ -434,6 +439,10 @@ mat-paginator .mat-select-trigger {
   vertical-align: middle;
 }
 
+.action-menu.mat-menu-panel {
+  max-width: 100%;
+}
+
 .mat-menu-panel {
   min-height: auto !important;
 }
@@ -447,6 +456,7 @@ mat-paginator .mat-select-trigger {
   border-radius: 6px;
   width: auto;
   padding: 0 8px 0 8px;
+  height: 24px !important;
 }
 
 .cancel-button {
@@ -458,6 +468,7 @@ mat-paginator .mat-select-trigger {
   width: auto;
   padding: 0 8px 0 8px;
   cursor: pointer;
+  height: 24px !important;
 }
 
 .expand-button {

package/assets/css/_light-theme.scss

@@ -100,7 +100,7 @@
 
   //19
   input {
-    color: $black-bluish;
+    color: $black-bluish !important;
   }
 
   textarea {
@@ -549,11 +549,6 @@
     color: $blue-primary !important;
   }
 
-  .mat-datepicker-content .mat-calendar {
-    width: 220px;
-    height: auto;
-  }
-
   .mat-calendar-controls {
     display: flex;
     margin: 0% calc(33% / 7 - 16px);

package/assets/css/_mat-palettes.scss

@@ -15,6 +15,7 @@ $gray-light: #A1B7D4;
 $gray-primary: #809EC1;
 $medium-blue: #4c709a;
 $black-bluish: #445D7B;
+$light-border-color: #0000001E;
 //dark theme colors
 $background-lvl5: #111219;
 $background-lvl4: #212332;
@@ -25,6 +26,7 @@ $black-bluish: #445D7B;
 $gray-light: #A1B7D4;
 $gray-background-dark: #C2CFDD;
 //custom
+$dark-border-color: #FFFFFF4C;
 $dark-background-color: #2A2D3E;
 $dark-default-text-color: white;
 $dark-work-title-color: #C2CFDD;

package/assets/css/_themes.scss

@@ -1,7 +1,11 @@
 @use '@angular/material' as mat;
 
 
+/*TODO(mdc-migration): Remove legacy-core once all legacy components are migrated*/
 @include mat.legacy-core();
+
+
+@include mat.core();
 //Fonts
 @import url('https://fonts.googleapis.com/css?family=Poppins');
 @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');
@@ -10,15 +14,16 @@
 //Imports
 @import "mat-palettes";
 @import "global";
-@import "new-global";
+@import "material/mdc";
 @import '@angular/material/theming';
 
 // Define a light theme
 $mat-theme-ignore-duplication-warnings: true;
 $light-primary: mat.define-palette($light-unity-palette);
 $light-accent: mat.define-palette($light-unity-palette);
-$light-typography: mat.define-legacy-typography-config(
-        $font-family: '"Roboto","Source Sans Pro",Poppins'
+$light-typography: mat.define-typography-config(
+        $font-family: '"Roboto","Source Sans Pro",Poppins',
+        $button: mat.define-typography-level(14px, 14px, 500, $letter-spacing: normal)
 );
 $light-theme: mat.define-light-theme((
         color: (
@@ -39,16 +44,25 @@ $dark-theme: mat.define-dark-theme((
 ));
 
 .dark-theme {
+  /*TODO(mdc-migration): Remove all-legacy-component-themes once all legacy components are migrated*/
   @include mat.all-legacy-component-themes($dark-theme);
+  @include mat.all-component-themes($dark-theme);
 
 }
 
 .light-theme {
+  /*TODO(mdc-migration): Remove all-legacy-component-themes once all legacy components are migrated*/
   @include mat.all-legacy-component-themes($light-theme);
+  @include mat.all-component-themes($light-theme);
 
 }
 
 @include mat.all-legacy-component-themes($light-theme);
+@include mat.all-component-themes($light-theme);
+
+
+@import "material/mdc-light-theme";
+@import "material/mdc-dark-theme";
 @import "dark-theme";
 @import "light-theme";
 @import "flex";

package/assets/css/material/_mdc-dark-theme.scss

@@ -0,0 +1,240 @@
+@import "../mat-palettes";
+
+.dark-theme {
+
+  .mdc-notched-outline {
+    background: $background-lvl3;
+    z-index: 0 !important;
+  }
+
+  .mdc-line-ripple {
+    background-color: $background-lvl3 !important;
+  }
+
+  .mat-mdc-select-value-text {
+    color: $gray-background-lightest;
+  }
+
+  .mat-form-field-disabled .mat-mdc-select-value-text {
+    color: gray;
+  }
+
+  .mat-mdc-paginator .mat-mdc-select-value-text {
+    color: $gray-strong !important;
+  }
+
+  .mat-mdc-select-placeholder {
+    color: $black-bluish !important;
+  }
+
+  .mat-mdc-select-arrow {
+    color: $blue-primary;
+  }
+
+  .mat-mdc-row .mat-mdc-select {
+    background: none;
+  }
+
+  .mat-mdc-row .mat-mdc-input-element {
+    background: none;
+  }
+
+  .mat-mdc-row mat-label {
+    background: $gray-strong;
+  }
+
+  .mat-mdc-paginator-page-size .mat-mdc-select-trigger {
+    background: $background-lvl3;
+    padding: 2px;
+  }
+
+  .mdc-text-field--outlined .mdc-notched-outline {
+    .mdc-notched-outline__leading, .mdc-notched-outline__trailing{
+      border-color : $black-bluish;
+    }
+  }
+
+
+  .mat-mdc-form-field .mat-icon {
+    color: $blue-primary;
+  }
+
+  .mat-mdc-select-panel {
+    background: $background-lvl2 !important;
+  }
+
+  .mat-mdc-option {
+    color: $gray-background-lightest !important;
+  }
+
+  .mat-mdc-option.mat-option-global-search:hover:not(.mat-option-disabled), .mat-option.mat-option-global-search:focus:not(.mat-option-disabled) {
+    background: $background-lvl3 !important;
+  }
+
+  //Customize mat-form-field Border Color
+  .mdc-notched-outline > * {
+    border-color: $dark-border-color !important;
+  }
+
+  .mdc-text-field--focused .mdc-notched-outline > * {
+    border-color: $gray-light !important;
+  }
+
+  .mdc-text-field--invalid .mdc-notched-outline > * {
+    border-color: red !important;
+  }
+
+  .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading {
+    border: 2px solid $blue-primary !important;
+    border-right: none !important;
+  }
+
+  .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing {
+    border: 2px solid $blue-primary !important;
+    border-left: none !important;
+  }
+  //END custom mat-form-field Border Color
+
+  .mat-mdc-form-field:hover .mat-mdc-form-field-focus-overlay {
+    opacity: 0 !important;
+  }
+
+  .mat-mdc-form-field.mat-focused .mat-mdc-form-field-focus-overlay {
+    opacity: 0 !important;
+  }
+
+  .mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-text-field__input {
+    color: $gray-light;
+  }
+  .global-search-input::placeholder {
+    color: $gray-light !important;
+  }
+
+
+
+  .mat-mdc-card {
+    padding: 5px !important;
+    background: $background-lvl3;
+    color: $gray-background-dark;
+  }
+
+  .mat-mdc-table {
+    background-color: $background-lvl2;
+    border-color: $background-lvl3;
+    border-bottom: 1px solid $background-lvl3;
+  }
+
+  .mat-mdc-cell {
+    color: $gray-light;;
+  }
+
+  .mat-mdc-row, row-drop {
+    border-left-width: 1px;
+    border-right-width: 1px;
+    border-left-color: $background-lvl3;
+    border-right-color: $background-lvl3;
+  }
+
+  .mat-mdc-row .mat-mdc-input-element {
+    background: $background-lvl3;
+  }
+
+  .mat-mdc-row .mat-mdc-select {
+    background: $background-lvl3;
+  }
+
+  .mat-mdc-footer-cell {
+    font-style: italic;
+    font-weight: normal;
+    font-size: 14px;
+    background-color: $background-lvl2;
+    border-color: $background-lvl2;
+  }
+
+  .mat-mdc-menu-item {
+    color: $gray-background-lightest !important;
+  }
+
+  .mat-mdc-menu-panel {
+    background: $background-lvl2 !important
+  }
+
+  .mat-mdc-header-cell {
+    color: $gray-background-lightest;
+  }
+  .mat-mdc-header-cell mat-label {
+    color: $gray-background-lightest !important;
+  }
+
+  .mat-mdc-header-row {
+    background: $background-lvl3;
+  }
+
+  .mat-mdc-standard-chip {
+    --mdc-chip-label-text-color: white !important;
+    --mdc-chip-with-trailing-icon-trailing-icon-color: #FFFFFF !important;
+  }
+
+  .mat-mdc-checkbox {
+    color: $gray-primary;
+  }
+
+  // POPUP
+
+  .mat-mdc-dialog-container {
+    --mdc-dialog-container-color: #{$background-lvl3};
+  }
+
+  .mat-mdc-dialog-container h1 {
+    color: $gray-background-lightest !important;
+  }
+
+  .mat-mdc-dialog-container h2 {
+    color: $gray-background-lightest !important;
+  }
+
+  .mat-mdc-dialog-container h3 {
+    color: $gray-background-lightest !important;
+  }
+
+  .mat-mdc-dialog-container h4 {
+    color: $gray-background-lightest !important;
+  }
+
+  .mat-mdc-dialog-container .text {
+    color: $gray-background-lightest !important;
+  }
+
+  // END POPUP
+
+  // PAGINATOR
+
+  .mat-mdc-paginator-container {
+    background-color: $background-lvl3;
+    color: $gray-background-lightest;
+  }
+
+  .mat-mdc-paginator-page-size .mat-select-trigger {
+    background: $background-lvl2;
+    padding: 2px;
+  }
+
+  .mat-mdc-paginator .mat-select-value-text {
+    color: $gray-background-lightest !important;
+  }
+
+  //END PAGINATOR
+
+  .expandable-row .mat-mdc-cell {
+    background: transparent;
+  }
+
+  .mat-mdc-raised-button.mat-accent {
+    background: $gray-blue-primary !important;
+  }
+
+  mat-row, .mat-mdc-header-cell, .mat-mdc-header-row, mat-footer-row,
+  th.mat-header-cell, td.mat-cell, td.mat-footer-cell {
+    border-bottom: $dark-border-color 1px solid;
+  }
+}

package/assets/css/material/_mdc-light-theme.scss

@@ -0,0 +1,267 @@
+@import "../mat-palettes";
+
+.light-theme {
+
+  .mdc-notched-outline {
+    background: $gray-strong;
+    z-index: 0 !important;
+  }
+
+  .mdc-line-ripple {
+    background-color: $gray-background-lightest !important;
+  }
+
+  .mat-mdc-select-value-text {
+    color: $black-bluish;
+  }
+
+  .mat-form-field-disabled .mat-mdc-select-value-text {
+    color: gray;
+  }
+
+  .mat-mdc-paginator .mat-mdc-select-value-text {
+    color: $black-bluish !important;
+  }
+
+  .mat-mdc-select-placeholder {
+    color: $gray-light !important;
+  }
+
+  .mat-mdc-select-arrow {
+    color: $blue-primary;
+  }
+
+
+  .mat-mdc-row mat-label {
+    background: $black-bluish;
+  }
+
+  .mat-mdc-paginator-page-size .mat-mdc-select-trigger {
+    background: $gray-strong;
+    padding: 2px;
+  }
+
+
+  .mat-mdc-form-field .mat-icon {
+    color: $blue-primary;
+  }
+
+  .mat-mdc-select-panel {
+    background: #FFFFFF !important;
+  }
+
+  .mat-mdc-option {
+    color: $black-bluish !important;
+  }
+
+  .mat-mdc-option.mat-option-global-search:hover:not(.mat-option-disabled), .mat-option.mat-option-global-search:focus:not(.mat-option-disabled) {
+    background: $gray-strong !important;
+  }
+
+
+  //Customize mat-form-field Border Color
+  .mdc-notched-outline > * {
+    border-color: $light-border-color !important;
+  }
+
+  .mdc-text-field--focused .mdc-notched-outline > * {
+    border-color: $black-bluish !important;
+  }
+
+  .mdc-text-field--invalid .mdc-notched-outline > * {
+    border-color: red !important;
+  }
+
+  .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading {
+    border: 2px solid $blue-primary !important;
+    border-right: none !important;
+  }
+
+  .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing {
+    border: 2px solid $blue-primary !important;
+    border-left: none !important;
+  }
+  //END custom mat-form-field Border Color
+
+  .mat-mdc-form-field:hover .mat-mdc-form-field-focus-overlay {
+    opacity: 0 !important;
+  }
+
+  .mat-mdc-form-field.mat-focused .mat-mdc-form-field-focus-overlay {
+    opacity: 0 !important;
+  }
+
+  .mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-text-field__input {
+    color: $black-bluish;
+  }
+
+  .global-search-input::placeholder {
+    color: $black-bluish !important;
+  }
+
+
+  .mat-mdc-card {
+    padding: 5px !important;
+    background: $gray-background-lightest;
+    color: $black-bluish;
+  }
+
+  .mat-mdc-table {
+    background-color: $gray-background-light2;
+    border-color: $gray-strong;
+    border-bottom: 1px solid $gray-strong;
+  }
+
+  .mat-mdc-cell {
+    color: $black-bluish;
+  }
+
+  .mat-mdc-row, row-drop {
+    border-left-width: 1px;
+    border-right-width: 1px;
+    border-left-color: $gray-strong;
+    border-right-color: $gray-strong;
+  }
+
+  .mat-mdc-row .mat-mdc-input-element {
+    background: $gray-strong;
+  }
+
+  .mat-mdc-row .mat-mdc-select {
+    background: $gray-strong;
+  }
+
+  .mat-mdc-footer-cell {
+    font-style: italic;
+    font-weight: normal;
+    font-size: 14px;
+    background-color: $gray-background-light2;
+    border-color: $gray-strong;
+  }
+
+  .mat-mdc-menu-item {
+    color: $black-bluish !important;
+  }
+
+  .mat-mdc-menu-panel {
+    background: #FFFFFF !important
+  }
+
+  .mat-mdc-header-cell {
+    color: $medium-blue;
+  }
+
+  .mat-mdc-header-row {
+    background: $gray-background-lightest;
+  }
+
+  .mat-mdc-standard-chip {
+    --mdc-chip-label-text-color: white !important;
+    --mdc-chip-with-trailing-icon-trailing-icon-color: #FFFFFF !important;
+  }
+
+  .mat-mdc-chip.mat-mdc-standard-chip {
+    background: $black-bluish;
+    color: white;
+  }
+
+  .mat-mdc-checkbox {
+    color: $gray-primary;
+  }
+
+  .mat-mdc-checkbox-checked.mat-accent .mdc-checkbox__background {
+    background-color: $blue-primary;
+  }
+  .mdc-checkbox__background {
+    border-color: $gray-primary !important;
+  }
+
+  // POPUP
+
+  .mat-mdc-dialog-container {
+    --mdc-dialog-container-color: #{$gray-background-lightest};
+  }
+
+  .mat-mdc-dialog-container h1 {
+    color: $black-bluish !important;
+  }
+
+  .mat-mdc-dialog-container h2 {
+    color: $black-bluish !important;
+  }
+
+  .mat-mdc-dialog-container h3 {
+    color: $black-bluish !important;
+  }
+
+  .mat-mdc-dialog-container h4 {
+    color: $black-bluish !important;
+  }
+
+  .mat-mdc-dialog-container .text {
+    color: $black-bluish !important;
+  }
+
+  .mat-mdc-dialog-container .btn- {
+    color: white !important;
+    background: $blue-primary !important;
+    border: none;
+    padding: 5px 10px 5px 10px;
+    border-radius: 4px;
+    height: 32px;
+    min-width: 64px;
+    margin-right: 10px;
+    cursor: pointer;
+  }
+
+  .mat-mdc-dialog-container .btn-ko {
+    color: white !important;
+    background: $red-primary !important;
+    border: none;
+    padding: 5px 10px 5px 10px;
+    border-radius: 4px;
+    height: 32px;
+    min-width: 64px;
+    margin-right: 10px;
+    cursor: pointer;
+  }
+
+  // END POPUP
+
+  // PAGINATOR
+
+  .mat-mdc-paginator-container {
+    background-color: $gray-background-lightest;
+    color: $black-bluish;
+  }
+
+  .mat-mdc-paginator-page-size .mat-select-trigger {
+    background: $gray-strong;
+    padding: 2px;
+  }
+
+  .mat-mdc-paginator .mat-select-value-text {
+    color: $black-bluish !important;
+  }
+
+  //END PAGINATOR
+
+  .expandable-row .mat-mdc-cell {
+    background: white;
+  }
+
+  .mat-mdc-raised-button.mat-accent {
+    background: $gray-blue-primary !important;
+  }
+
+  mat-row, mat-header-row, mat-footer-row,
+  th.mat-header-cell, td.mat-cell, td.mat-footer-cell {
+    border-bottom: $light-border-color 1px solid;
+  }
+
+  --mdc-checkbox-selected-icon-color: #{$blue-primary};
+  --mdc-checkbox-selected-hover-icon-color: #{$blue-primary};
+  --mdc-checkbox-selected-focus-icon-color: #{$blue-primary};
+  --mdc-checkbox-selected-pressed-icon-color: #{$blue-primary};
+
+}