@sumaris-net/ngx-components 2.7.3-rc2 → 2.7.3-rc4

package/package.json

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

package/src/app/shared/material/chips/material.chips.d.ts

@@ -3,7 +3,7 @@ import { ControlValueAccessor, FormGroupDirective, UntypedFormControl } from '@a
 import { BehaviorSubject, Observable } from 'rxjs';
 import { InputElement } from '../../inputs';
 import { SuggestFn } from '../../services/entity-service.class';
-import { DisplayFn, EqualsFn, AppFloatLabelType } from '../../form/field.model';
+import { AppFloatLabelType, DisplayFn, EqualsFn } from '../../form/field.model';
 import { ThemePalette } from '@angular/material/core';
 import { MatAutocompleteFieldConfig } from '../autocomplete/material.autocomplete.config';
 import { MatFormFieldAppearance } from '@angular/material/form-field';

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-rc2",
+  "version": "2.7.3-rc4",
   "default_locale": "fr",
   "description": "Angular components for building beautiful and responsive Apps",
   "icons": [{

package/src/theme/_ngx-components.scss

@@ -384,191 +384,74 @@ mat-option:not(:last-of-type) {
   min-width: var(--min-width) !important;
   max-width: var(--max-width) !important;
 }
-.mat-autocomplete-panel {
-  --min-width: 250px;
+.mat-mdc-autocomplete-panel {
+  --min-width: 200px;
   --max-width: calc(min(100%, 100vw - 64px));
   min-width: var(--min-width) !important;
   max-width: var(--max-width) !important;
   width: var(--max-width) !important;
 }
 
-.mat-autocomplete-panel-medium-size .mat-autocomplete-panel,
-.mat-autocomplete-panel-medium-size.mat-autocomplete-panel,
-.min-width-medium .mat-autocomplete-panel,
-.min-width-medium.mat-autocomplete-panel {
+.mat-mdc-autocomplete-panel-medium-size .mat-mdc-autocomplete-panel,
+.mat-mdc-autocomplete-panel-medium-size.mat-mdc-autocomplete-panel,
+.min-width-medium .mat-mdc-autocomplete-panel,
+.min-width-medium.mat-mdc-autocomplete-panel,
+.min-width-medium.mat-mdc-select-panel {
   --min-width: 300px;
 }
-.mat-autocomplete-panel-large-size .mat-autocomplete-panel,
-.mat-autocomplete-panel.mat-autocomplete-panel-large-size,
-.min-width-large .mat-autocomplete-panel,
-.min-width-large.mat-autocomplete-panel {
+.mat-mdc-autocomplete-panel-large-size .mat-mdc-autocomplete-panel,
+.mat-mdc-autocomplete-panel.mat-mdc-autocomplete-panel-large-size,
+.min-width-large .mat-mdc-autocomplete-panel,
+.min-width-large.mat-mdc-autocomplete-panel,
+.min-width-large.mat-mdc-select-panel{
   --min-width: 400px;
 }
-.mat-autocomplete-panel-xlarge-size .mat-autocomplete-panel,
-.mat-autocomplete-panel-xlarge-size.mat-autocomplete-panel {
+.mat-mdc-autocomplete-panel-xlarge-size .mat-mdc-autocomplete-panel,
+.mat-mdc-autocomplete-panel-xlarge-size.mat-mdc-autocomplete-panel,
+.mat-mdc-autocomplete-panel-xlarge-size.mat-mdc-select-panel {
   --min-width: 450px;
 }
 .mat-select-panel.min-width-80vw,
 .mat-mdc-select-panel.min-width-80vw,
-.min-width-80vw .mat-autocomplete-panel,
-.min-width-80vw.mat-autocomplete-panel {
+.min-width-80vw .mat-mdc-autocomplete-panel,
+.min-width-80vw.mat-mdc-autocomplete-panel {
   --min-width: 80vw;
 }
 
-.mat-autocomplete-panel-center .mat-autocomplete-panel,
-.mat-autocomplete-panel-center.mat-autocomplete-panel {
+.mat-mdc-autocomplete-panel-center .mat-mdc-autocomplete-panel,
+.mat-mdc-autocomplete-panel-center.mat-mdc-autocomplete-panel {
   margin-left: calc(var(--min-width, 200px) / -2 + 50%) !important;
 }
 
-.mat-autocomplete-panel-full-size .mat-autocomplete-panel,
-.mat-autocomplete-panel-full-size.mat-autocomplete-panel {
+.mat-mdc-autocomplete-panel-full-size .mat-mdc-autocomplete-panel,
+.mat-mdc-autocomplete-panel-full-size.mat-mdc-autocomplete-panel {
   --min-width: calc(100vw - 64px);
   --max-width: calc(100vw - 64px);
   position: fixed;
   left: 32px;
 }
 
-.mat-select-panel,
 .mat-mdc-select-panel,
-.mat-autocomplete-panel {
+.mat-mdc-autocomplete-panel {
   /* when multiple selection enable */
   mat-pseudo-checkbox {
     margin-left: 8px;
   }
+
+  padding: 0 !important;
 }
 
 ion-list,
-.mat-select-panel,
-.mat-menu-panel,
-.mat-autocomplete-panel {
-
+.mat-menu-panel {
   &.ion-list-popover {
     padding: 0 !important;
   }
-
-  /* Avoid bad display, when opening panel for the first time  */
-  &.ng-trigger-transformPanel {
-    ion-searchbar.mat-select-header,
-    ion-searchbar.mat-autocomplete-header {
-      visibility: visible;
-      display: flex;
-      opacity: 1;
-      transition: opacity 0.3s ease-in-out;
-    }
-  }
-
-  mat-option.mat-select-searchbar,
-  mat-option.mat-autocomplete-searchbar
-  {
-    padding: 0 !important;
-    height: 58px !important;
-    background-color: var(--ion-color-secondary100) !important;
-
-    /* hide pseudo checkbox, in the searchbar*/
-    mat-pseudo-checkbox {
-      visibility: hidden;
-      display: none;
-    }
-
-    &.mat-select-searchbar-sticky {
-      z-index: 1001;
-      /* Set header as sticky*/
-      position: -webkit-sticky;
-      position: sticky;
-      top: 0;
-    }
-  }
-
-  ion-row.ion-list-header,
-  ion-row.mat-select-header,
-  ion-row.mat-menu-header,
-  ion-row.mat-autocomplete-header {
-    &.multiple {
-      /* Offset due to mat-pseudo-checkbox */
-      padding-left: 32px;
-    }
-    &.column {
-      /* Set header as sticky*/
-      position: -webkit-sticky;
-      position: sticky;
-      top: 0;
-      z-index: 1001;
-      background-color: var(--ion-color-secondary);
-      border-bottom: 1px solid #{$app-select-option-border-color};
-      color: var(--ion-color-secondary-contrast);
-      line-height: 20px;
-      @include font-size(12px);
-      font-weight: 500;
-      height: 20px;
-      ion-col {
-        white-space: nowrap;
-        text-overflow: ellipsis;
-      }
-      &.mat-select-searchbar-sticky {
-        /* offset because of the searchbar height */
-        top: 58px;
-      }
-    }
-
-  }
-
-  ion-row.ion-list-footer,
-  ion-row.mat-select-footer,
-  ion-row.mat-menu-footer,
-  ion-row.mat-autocomplete-footer,
-  mat-option.mat-autocomplete-footer {
-    /* Set footer as sticky*/
-    position: -webkit-sticky;
-    position: sticky;
-    bottom: 0;
-    z-index: 1001;
-    border-top: 1px solid #{$app-select-option-border-color};
-    background-color: whitesmoke;
-    color: var(--ion-color-medium);
-    @include font-size(12px);
-    font-weight: 500;
-    height: 20px;
-    line-height: 20px;
-
-    ion-col {
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
-  }
-
-  ion-row {
-    --ion-grid-column-padding: 0;
-
-    ion-col {
-      --ion-padding-start: 8px;
-      padding: 0 !important;
-      padding-left: var(--ion-padding-start) !important;
-      text-overflow: ellipsis;
-      overflow: hidden;
-    }
-
-
-  }
-
-  .odd {
-    background: var(--ion-light-color-shade, $light);
-  }
-
-  .mat-option[no-padding],
-  mat-option[no-padding] {
-    padding: 0 !important;
-  }
 }
 
+ion-list,
+.mat-menu-panel,
 .mat-mdc-select-panel,
-.mat-mdc-autocomplete-panel
-//ion-list,
-//.mat-menu-panel,
-{
-
-  //&.ion-list-popover {
-    padding: 0 !important;
-  //}
+.mat-mdc-autocomplete-panel {
 
   /* Avoid bad display, when opening panel for the first time  */
   &.ng-trigger-transformPanel {
@@ -581,12 +464,17 @@ ion-list,
     }
   }
 
-  mat-option.mat-select-searchbar,
-  mat-option.mat-autocomplete-searchbar
+  .mat-mdc-option.mat-select-searchbar,
+  .mat-mdc-option.mat-autocomplete-searchbar
   {
     padding: 0 !important;
     height: 58px !important;
     background-color: var(--ion-color-secondary100) !important;
+    pointer-events: inherit !important;
+
+    .mdc-list-item__primary-text {
+      opacity: 1 !important;
+    }
 
     /* hide pseudo checkbox, in the searchbar*/
     mat-pseudo-checkbox {
@@ -671,6 +559,7 @@ ion-list,
       padding-left: var(--ion-padding-start) !important;
       text-overflow: ellipsis;
       overflow: hidden;
+      white-space: nowrap;
     }
 
 
@@ -680,12 +569,14 @@ ion-list,
     background: var(--ion-light-color-shade, $light);
   }
 
+  .mat-mdc-option[no-padding],
   .mat-option[no-padding],
   mat-option[no-padding] {
     padding: 0 !important;
   }
 }
 
+
 mat-expansion-panel {
 
   &.filter-panel {

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

@@ -1,8 +1,9 @@
 // --------------------------------------------------
-// Material tab group
+// Material tab group/link
 // --------------------------------------------------
+
 // -- Keep Angular 14 tab style
-.mat-mdc-tab-label-container {
+.mat-mdc-tab-label-container, .mat-mdc-tab-link-container {
   --mat-tab-header-divider-color: rgba(0,0,0,.12) !important;
   --mat-tab-header-divider-height: 1px !important;
 }