@sumaris-net/ngx-components 2.9.6 → 2.9.7

package/doc/changelog.md

@@ -791,3 +791,9 @@ This will allow subclasses to override the default selectedTabIndex after an err
 
 # 2.9.4
 - [fix] Form: reduce line height of row label (form-container > ion-row > ion-col > ion-label) 
+
+# 2.9.6
+- [fix] MatAutocompleteField: Remove animation in searchbar (bad icon position in iOS) 
+
+# 2.9.7
+- [fix] Form: fix field label position (form-container > ion-row > ion-col > ion-label) 

package/package.json

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

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

@@ -191,25 +191,64 @@ ion-grid.form-container {
     padding: 0;
 
     & > ion-col {
-
       // No top/bottom padding between grid cell
       padding-bottom: 0;
       padding-top: 0;
 
       & > ion-label {
         color: var(--ion-color-primary100);
-        padding-inline-end: 5px;
-        line-height: 1rem;
       }
 
-      & > ion-label[text-wrap] {
+      & > ion-label[text-wrap],
+      & > ion-label.ion-text-wrap {
         word-wrap: normal;
         white-space: normal;
+        line-height: 1rem !important;
       }
     }
   }
 }
 
+
+// --------------------------------------------------
+// Forms
+// --------------------------------------------------
+// On small screen, align label on left
+@media screen and (max-width: $screen-sm-max) {
+  form.form-container > ion-grid,
+  ion-grid.form-container {
+    ion-col > ion-label.ion-float-center,
+    ion-col > ion-label.ion-float-end {
+      display: block;
+      width: 100%;
+      text-align: start !important;
+      line-height: 37px;
+      min-height: 37px;
+      margin-top: 0;
+      margin-bottom: 0;
+      margin-right: 0;
+    }
+  }
+}
+
+// On large screen, align label on right
+@media screen and (min-width: $screen-md) {
+
+  form.form-container > ion-grid,
+  ion-grid.form-container {
+   ion-col > ion-label.ion-float-center,
+   ion-col > ion-label.ion-float-end {
+      display: block;
+      text-align: end !important;
+      min-height: var(--mat-form-field-container-height, 45px);
+      margin-top: 11px;
+      margin-bottom: 11px;
+      padding-inline-end: 5px;
+    }
+  }
+}
+
+
 // TODO: activer ce code et tester les mat-select en dark mode
 //html {
 //  div.mat-mdc-select-panel {

package/src/theme/_responsive.scss

@@ -326,37 +326,6 @@ body {
   }
 }
 
-// --------------------------------------------------
-// Forms
-// --------------------------------------------------
-// On small screen, align label on left
-@media screen and (max-width: $screen-sm-max) {
-  form ion-col>ion-label.ion-float-center,
-  form ion-col>ion-label.ion-float-end {
-    display: block;
-    width: 100%;
-    text-align: start !important;
-    line-height: 37px;
-    margin-top: 0;
-    margin-bottom: 0;
-    margin-right: 0;
-    //padding-left: var(--ion-label-padding, 11px);
-    //background-color: var(--ion-color-light);
-  }
-}
-
-// On large screen, align label on right
-@media screen and (min-width: $screen-md) {
-  form ion-col > ion-label.ion-float-center,
-  form ion-col > ion-label.ion-float-end {
-    display: block;
-    text-align: end !important;
-    line-height: 37px;
-    margin-top: 11px;
-    margin-bottom: 11px;
-  }
-}
-
 // --------------------------------------------------
 // Modals
 // --------------------------------------------------