@sumaris-net/ngx-components 2.7.3-rc10 → 2.7.3-rc11

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sumaris-net/ngx-components",
   "description": "SUMARiS Angular components",
-  "version": "2.7.3-rc10",
+  "version": "2.7.3-rc11",
   "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-rc10",
+  "version": "2.7.3-rc11",
   "default_locale": "fr",
   "description": "Angular components for building beautiful and responsive Apps",
   "icons": [{

package/src/theme/_material.scss

@@ -55,6 +55,10 @@
   --mat-menu-item-label-text-size: 14px;
   --mat-menu-item-icon-color: #0000008a;
 }
+.mat-mdc-option {
+  --mat-option-label-text-tracking: normal;
+  --mat-option-label-text-size: 14px;
+}
 
   // Badge
 .mdc-tab .mat-badge-content {

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

@@ -217,10 +217,11 @@
       }
     }
 
+    &.mat-mdc-row-selected,
     &.mat-row-selected {
       background-color: var(--ion-color-secondary100);
 
-      &:not(.mat-row-error):hover {
+      &:not(.mat-mdc-row-error):not(.mat-row-error):hover {
         background-color: var(--ion-color-secondary100);
       }
 
@@ -228,6 +229,7 @@
         color: var(--ion-color-secondary100-contrast);
       }
 
+      &.mat-mdc-row-disabled:hover,
       &.mat-row-disabled:hover {
         background-color: var(--ion-color-secondary100-shade) !important;
       }
@@ -235,9 +237,8 @@
     }
 
     // Dirty row
+    &.mat-mdc-row-dirty,
     &.mat-row-dirty {
-      //border-left: 3px solid var(--ion-color-primary-tint);
-
       // Resize the dirty icon (in the 'actions' column)
       .mat-column-actions mat-icon.dirty-icon,
       .mat-column-actions ion-icon.dirty-icon {
@@ -246,10 +247,12 @@
     }
 
     // Error row
+    &.mat-mdc-row-error,
     &.mat-row-error {
       //border-left: 3px solid var(--ion-color-danger-tint) !important;
       background-color: var(--ion-color-warning-tint);
 
+      &.mat-mdc-row-disabled:hover,
       &.mat-row-disabled:hover {
         background-color: var(--ion-color-warning-shade) !important;
       }
@@ -458,100 +461,26 @@
 
   /* Special case to have small row */
   &.compact .mat-mdc-row,
+  .mat-mdc-row.mat-mdc-row-small,
   .mat-mdc-row.mat-row-small {
     min-height: inherit;
     --mat-row-height: 33px;
     --mat-row-max-height: 33px;
   }
 
-  .mat-mdc-row.mat-row-small .mat-cell,
-  .mat-mdc-row .mat-cell.mat-row-small {
+  .mat-mdc-row.mat-mdc-row-small .mat-mdc-cell,
+  .mat-mdc-row .mat-mdc-cell.mat-mdc-row-small,
+  .mat-mdc-row.mat-row-small .mat-mdc-cell,
+  .mat-mdc-row .mat-mdc-cell.mat-row-small {
     line-height: 15px;
     @include font-size(12px);
   }
 
-  .mat-row-height-auto { // todo useful ?
+  .mat-mdc-row-height-auto,
+  .mat-row-height-auto {
     max-height: unset !important;
   }
 
-  // Make smaller row
-  // NOTE : useless on angular 15
-  //&.compact {
-  //  --mat-row-height: 33px;
-  //
-  //  // TODO test it !  then remove is not need
-  //  .mat-mdc-row {
-  //
-  //    ion-label {
-  //      display: inline-block;
-  //      margin-top: 5px;
-  //      width: 100%;
-  //      overflow: hidden;
-  //      white-space: nowrap;
-  //      text-overflow: ellipsis;
-  //    }
-  //
-  //    .mat-badge-content {
-  //      top: -2px;
-  //    }
-  //
-  //    .mat-icon-button {
-  //      height: 32px;
-  //      width: 32px;
-  //      line-height: 32px;
-  //    }
-  //
-  //    .mat-mdc-form-field-underline {
-  //      bottom: 6px !important;
-  //    }
-  //
-  //    .mat-mdc-form-field {
-  //
-  //      .mat-mdc-form-field-wrapper {
-  //        max-height: 32px;
-  //
-  //        .mat-mdc-form-field-flex {
-  //
-  //          .mat-mdc-form-field-infix {
-  //            max-height: 32px;
-  //            padding-top: 0;
-  //            border-top-width: 10px;
-  //
-  //            .mat-mdc-form-field-label-wrapper {
-  //
-  //              .mat-mdc-form-field-label {
-  //                top: 12px;
-  //              }
-  //            }
-  //
-  //            .mat-checkbox {
-  //              display: block;
-  //              position: absolute;
-  //              top: -2px;
-  //
-  //              .mat-checkbox-ripple {
-  //                height: 32px;
-  //                width: 32px;
-  //                left: calc(50% - 16px);
-  //                top: calc(50% - 16px);
-  //              }
-  //            }
-  //          }
-  //        }
-  //
-  //        // make click on mat-error transfer to input
-  //        //.mat-mdc-form-field-subscript-wrapper {
-  //        //  pointer-events: none;
-  //        //}
-  //
-  //        mat-error {
-  //          margin-top: 10px;
-  //        }
-  //      }
-  //    }
-  //  }
-  //}
-
   // Restore border on last row
   .mdc-data-table__row:last-child .mat-mdc-cell {
     border-bottom-color: var(--mat-table-row-item-outline-color, rgba(0, 0, 0, 0.12)) !important;