@sumaris-net/ngx-components 2.7.3-rc13 → 2.7.3-rc15

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sumaris-net/ngx-components",
   "description": "SUMARiS Angular components",
-  "version": "2.7.3-rc13",
+  "version": "2.7.3-rc15",
   "author": "contact@e-is.pro",
   "license": "AGPL-3.0",
   "readmeFilename": "README.md",

package/src/assets/manifest.json

@@ -2,7 +2,7 @@
   "name": "ngx-sumaris-components",
   "short_name": "ngx-sumaris-components",
   "manifest_version": 1,
-  "version": "2.7.3-rc13",
+  "version": "2.7.3-rc15",
   "default_locale": "fr",
   "description": "Angular components for building beautiful and responsive Apps",
   "icons": [{

package/src/theme/_material.scss

@@ -57,7 +57,13 @@
 }
 .mat-mdc-option {
   --mat-option-label-text-tracking: normal;
-  --mat-option-label-text-size: 16px;
+  --mat-option-label-text-size: 14px;
+}
+.mat-mdc-select {
+  --mat-select-trigger-text-font: inherit;
+  --mat-select-trigger-text-tracking: normal;
+  --mat-select-trigger-text-size: inherit;
+  --mat-select-disabled-trigger-text-color: inherit;
 }
 
   // Badge

package/src/theme/_ngx-components.scss

@@ -135,13 +135,23 @@ form.form-container {
   --mdc-filled-text-field-container-color: #{$app-form-field-background-color};
   --mdc-filled-text-field-disabled-container-color: #{$app-form-field-background-color};
   --mat-form-field-state-layer-color: #{$app-form-field-focus-background-color};
-  @include font-size(16px);
+  --mat-form-field-container-height: 45px;
+  --mat-form-field-container-text-size: 14px;
+  --mat-form-field-filled-label-display: block;
+  --mat-form-field-container-vertical-padding: 16px;
+  --mat-form-field-filled-with-label-container-padding-top: 16px;
+  --mat-form-field-filled-with-label-container-padding-bottom: 0px;
+  --mdc-filled-text-field-label-text-tracking: normal;
+  --mat-select-trigger-text-size: var(--mat-form-field-container-text-size);
+
+  @include font-size(14px);
 
   .mat-form-field-disabled,
   .mat-mdc-input-element:disabled {
     color: #{$app-form-color-disabled} !important;
   }
 
+  // TODO BLA: voir si utile ?
   .mat-form-field-disabled {
     .mat-mdc-form-field-infix{
       min-height: 41px;
@@ -300,9 +310,6 @@ ion-grid.form-container {
 }
 
 mat-form-field {
-  //mat-error {
-  //  text-align: right;
-  //}
 
   .mat-paginator-page-size-select {
     @include font-size-important(14px);

package/src/theme/_ngx-components.table.scss

@@ -156,6 +156,7 @@
       }
     }
 
+    .mat-mdc-cell-date,
     .mat-cell-date {
       min-width: 128px;
       max-width: 128px;
@@ -166,6 +167,7 @@
       }
     }
 
+    .mat-mdc-cell-date-time,
     .mat-cell-date-time {
       min-width: 145px;
       max-width: 180px;
@@ -190,9 +192,11 @@
     }
 
     .mat-mdc-cell.computed mat-form-field,
+    .mat-mdc-cell-computed,
     .mat-cell-computed,
     .mat-mdc-cell ion-text.computed,
     .mat-mdc-cell.calculated mat-form-field,
+    .mat-mdc-cell-calculated,
     .mat-cell-calculated {
       color: var(--ion-color-primary-tint);
       font-style: italic;
@@ -202,6 +206,7 @@
   .mat-mdc-row {
 
     // Disabled row
+    &.mat-mdc-row-disabled *,
     &.mat-row-disabled * {
       color: inherit;
       cursor: pointer;
@@ -209,10 +214,11 @@
       pointer-events: unset !important;
     }
 
+    &.mat-mdc-row-disabled:hover,
     &.mat-row-disabled:hover {
       background-color: var(--ion-color-light);
 
-      .mat-cell {
+      .mat-mdc-cell {
         color: var(--ion-color-light-contrast);
       }
     }
@@ -225,7 +231,7 @@
         background-color: var(--ion-color-secondary100);
       }
 
-      .mat-cell {
+      .mat-mdc-cell {
         color: var(--ion-color-secondary100-contrast);
       }
 
@@ -281,6 +287,7 @@
       width: 100%;
       --mat-form-field-container-text-size: 14px;
       --mdc-filled-text-field-label-text-size: var(--mat-form-field-container-text-size);
+      --mat-select-trigger-text-size: var(--mat-form-field-container-text-size);
       --mat-mdc-form-field-height: calc(var(--mat-row-height) - 2px);
       // TODO
       // use  -- active-  boder : 0;
@@ -429,7 +436,7 @@
       padding-top: 0.4em;
     }
 
-    .mat-cell > .ion-text-nowrap {
+    .mat-mdc-cell > .ion-text-nowrap {
       width: 100%;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -437,17 +444,17 @@
     }
 
     /* Show when hover row */
-    .mat-cell .visible-hover-row {
+    .mat-mdc-cell .visible-hover-row {
       visibility: hidden;
     }
 
     &:hover {
-      .mat-cell .visible-hover-row {
+      .mat-mdc-cell .visible-hover-row {
         visibility: visible;
       }
     }
 
-    .mat-cell .avatar {
+    .mat-mdc-cell .avatar {
       color: #d9d9d9;
       background-color: #f8f8f8;
       border: solid 1px #d9d9d9;
@@ -490,7 +497,7 @@
 }
 
 .mat-mdc-paginator {
-  --mat-paginator-container-size: #{$app-paginator-height};
+  --mat-paginator-container-size: var(--app-paginator-height, #{$app-paginator-height});
   --mat-paginator-container-background-color: whitesmoke;
   overflow-y: hidden;