@sumaris-net/ngx-components 18.23.67 → 18.23.69

package/doc/changelog.md

@@ -2193,4 +2193,12 @@ enh: Environment: add useHash property to configure Angular router to use hash U
 - enh(shared): Add new pipe `changeCaseToUnderscore` to convert camelCase to underscore_case in templates
 
 ## 18.23.65
-- enh(date-time-field): Fix datetime value emission on invalid datetime
+- enh(date-time-field): Fix datetime value emission on invalid datetime (closes sumaris-app#1863)
+
+## 18.23.68
+- enh(theme): add responsive `min-width` utility classes for select panel - Allow to use panelClass with :
+  * mobile/desktop: `min-width-fit-content`, `min-width-medium`, `min-width-large`, `min-width-xlarge` , `min-width-80vw` : 
+  * mobile only: `mat-select-panel-fit-content`|`mat-select-panel-medium-size`|`mat-select-panel-large-size`|`mat-select-panel-xlarge-size`|`mat-select-panel-80vw-size`
+
+## 18.23.69
+- enh(theme): MatAutocompleteField: add panelClass style `full-width`, as an alias of `full-size`

package/package.json

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

package/src/app/shared/inputs.d.ts

@@ -18,7 +18,7 @@ export interface InputElement extends FocusableElement {
 }
 export declare function isInputElement(object: any): object is InputElement;
 export declare function asInputElement<T = any>(object: ElementRef<T>): InputElement | undefined;
-export declare function tabindexComparator(a: InputElement, b: InputElement): 1 | 0 | -1;
+export declare function tabindexComparator(a: InputElement, b: InputElement): 0 | 1 | -1;
 export interface CanGainFocusOptions {
     minTabindex?: number;
     maxTabindex?: number;

package/src/assets/manifest.json

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

package/src/theme/_ngx-components.scss

@@ -208,10 +208,31 @@ mat-option:not(:last-of-type) {
   max-width: var(--max-width) !important;
 
   // FIXME : This is a workaround find at : https://github.com/angular/components/issues/26000#issuecomment-1563107933
+  &:has(.min-width-fit-content),
   &:has(.mat-select-panel-fit-content) {
     --min-width: fit-content !important;
   }
 
+  &:has(.min-width-medium),
+  &:has(.mat-select-panel-panel-medium-size) {
+    --min-width: 300px;
+  }
+
+  &:has(.min-width-large),
+  &:has(.mat-select-panel-large-size) {
+    --min-width: 400px;
+  }
+
+  &:has(.min-width-xlarge),
+  &:has(.mat-select-panel-xlarge-size) {
+    --min-width: 450px;
+  }
+
+  &:has(.min-width-80vw),
+  &:has(.mat-select-panel-80vw-size) {
+    --min-width: 80vw;
+  }
+
   .mat-mdc-select-panel {
     --mat-switch-visible-track-transition: transform 75ms 50ms cubic-bezier(0, 0, 0.2, 1);
     transition: --mat-switch-visible-track-transition;
@@ -232,13 +253,14 @@ mat-option:not(:last-of-type) {
 }
 
 
-.cdk-overlay-pane:has(.mat-mdc-autocomplete-panel) {
+.cdk-overlay-pane:has(.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;
 
   // FIXME : This is a workaround find at : https://github.com/angular/components/issues/26000#issuecomment-1563107933
+  &:has(.min-width-fit-content),
   &:has(.mat-select-panel-fit-content) {
     --min-width: fit-content !important;
   }
@@ -258,12 +280,15 @@ mat-option:not(:last-of-type) {
     --min-width: 450px;
   }
 
-  &:has(.min-width-80vw) {
+  &:has(.min-width-80vw),
+  &:has(.mat-mdc-autocomplete-panel-80vw-size){
     --min-width: 80vw;
   }
 
-  &:has(.mat-mdc-autocomplete-panel-full-size),
-  &:has(.full-size) {
+  &:has(.full-size),
+  &:has(.full-width),
+  &:has(.mat-mdc-autocomplete-panel-full-size)
+   {
     --margin-left: 32px;
     --margin-right: 32px;
     --min-width: calc(100vw - var(--margin-left) - var(--margin-right));