@sumaris-net/ngx-components 4.0.0-rc12 → 4.0.0-rc14

package/package.json

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

package/src/theme/_mixins.scss

@@ -108,7 +108,7 @@
 
   --app-table-header-height: #{$app-table-header-height};
   --app-toolbar-height: #{$app-toolbar-height};
-  --app-paginator-height: #{$app-paginator-height};
+  //--app-paginator-height: #{$app-paginator-height};
   --app-form-buttons-bar-height: #{$app-form-buttons-bar-height};
   --app-footer-height: var(--app-form-buttons-bar-height);
   --mat-tab-link-height: #{$mat-tab-link-height};

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

@@ -351,6 +351,23 @@
       // Suffix
       .mat-mdc-form-field-icon-suffix {
         white-space: nowrap;
+
+        .mat-mdc-icon-button {
+          width: 24px;
+          height: 24px;
+          padding: 2px 0 0 0;
+
+          ion-icon, .mat-icon {
+            $font-size: calculateRem(18px);
+            font-size: $font-size;
+            line-height: 1.125;
+          }
+
+          .mat-mdc-button-touch-target {
+            width: 24px;
+          }
+        }
+
       }
 
       // Specific behavior for chips
@@ -391,22 +408,6 @@
 
     } // .mat-mdc-form-field
 
-    // Specific icon button styles
-    .mat-mdc-icon-button {
-      width: 24px;
-      height: 24px;
-      padding: 2px 0 0 0;
-
-      ion-icon, .mat-icon {
-        $font-size: calculateRem(18px);
-        font-size: $font-size;
-        line-height: 1.125;
-      }
-
-      .mat-mdc-button-touch-target {
-        width: 24px;
-      }
-    }
 
     .mat-boolean-field-radio.mat-mdc-form-field-appearance-fill .mat-mdc-form-field-infix,
     .mat-boolean-field-radio .mat-mdc-form-field-infix {
@@ -553,37 +554,30 @@
   //}
 }
 
-.mat-paginator-footer {
-  height: var(--app-paginator-height);
-  background-color: whitesmoke;
-
-  .mat-mdc-paginator-outer-container {
-    height: var(--app-paginator-height);
-    overflow-y: hidden;
-
-    .mat-mdc-paginator-container {
-      height: var(--app-paginator-height);
-      min-height: unset;
-      margin-top: 3px;
+.mat-mdc-paginator {
+  --mat-paginator-container-size: #{$app-paginator-height};
+  --mat-paginator-container-background-color: whitesmoke;
+  overflow-y: hidden;
 
-      button {
-        height: var(--app-paginator-height);
-        width: var(--app-paginator-height);
-        //line-height: var(--app-paginator-height);
-        padding: 6px;
-
-        .mat-mdc-button-touch-target {
-          height: var(--app-paginator-height);
-          width: var(--app-paginator-height);
-        }
+  .mat-mdc-paginator-page-size-select {
+    height: var(--mat-paginator-container-size) !important;
+    margin-top: -10px;
 
-      }
+    .mat-mdc-form-field-infix {
+      height: var(--mat-paginator-container-size) !important;
     }
   }
+
+  button {
+    --mdc-icon-button-state-layer-size: var(--mat-paginator-container-size) !important;
+    padding: 6px !important;
+  }
+
 }
 
 html.plt-mobile {
 
+  // fixme: class mat-paginator-footer not used anymore, use .mat-mdc-paginator
   .mat-paginator-footer {
     .mat-paginator-outer-container {
       .mat-paginator-container {