@sumaris-net/ngx-components 2.9.0-alpha7 → 2.9.0-alpha9

package/package.json

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

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

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

package/src/app/shared/material/autocomplete/material.autocomplete.config.d.ts

@@ -13,11 +13,22 @@ export declare interface MatAutocompleteFieldConfig<T = any, F = any> {
     equals?: EqualsFn;
     showAllOnFocus?: boolean;
     showPanelOnFocus?: boolean;
-    class?: string;
     mobile?: boolean;
     debounceTime?: number;
     suggestLengthThreshold?: number;
     highlightAccent?: boolean;
+    /**
+     * Class to apply to the `div.mat-mdc-select-panel`
+     */
+    panelClass?: string;
+    /**
+     * Allow to fix panel width (e.g. '500px' or '100vw')
+     */
+    panelWidth?: string;
+    /**
+     * @deprecated use `panelClass` instead
+     */
+    class?: string;
 }
 export declare interface MatAutocompleteFieldAddOptions<T = any, F = any> extends Partial<MatAutocompleteFieldConfig<T, F>> {
     service?: SuggestService<T, F>;

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

@@ -5,7 +5,7 @@ import { SuggestFn } from '../../services/entity-service.class';
 import { InputElement } from '../../inputs';
 import { AppFloatLabelType, DisplayFn, EqualsFn } from '../../form/field.model';
 import { MatFormFieldAppearance, SubscriptSizing } from '@angular/material/form-field';
-import { MatOption, MatSelect } from '@angular/material/select';
+import { MatSelect } from '@angular/material/select';
 import { MatAutocomplete, MatAutocompleteTrigger } from '@angular/material/autocomplete';
 import { IonSearchbar, ModalController } from '@ionic/angular';
 import { MatAutocompleteFieldConfig } from './material.autocomplete.config';
@@ -72,7 +72,6 @@ export declare class MatAutocompleteField implements OnInit, AfterViewInit, OnDe
     applyImplicitValue: boolean | (() => boolean);
     dropButtonTitle: string;
     clearButtonTitle: string;
-    sortComparator: (a: MatOption, b: MatOption, options: MatOption[]) => number;
     clicked: EventEmitter<MouseEvent>;
     blurred: EventEmitter<FocusEvent>;
     focused: EventEmitter<FocusEvent>;
@@ -142,7 +141,7 @@ export declare class MatAutocompleteField implements OnInit, AfterViewInit, OnDe
      */
     private _fixSearchbarOverlay;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatAutocompleteField, [null, null, null, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatAutocompleteField, "mat-autocomplete-field", never, { "equals": { "alias": "equals"; "required": false; }; "logPrefix": { "alias": "logPrefix"; "required": false; }; "formControl": { "alias": "formControl"; "required": false; }; "formControlName": { "alias": "formControlName"; "required": false; }; "floatLabel": { "alias": "floatLabel"; "required": false; }; "appearance": { "alias": "appearance"; "required": false; }; "subscriptSizing": { "alias": "subscriptSizing"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "suggestFn": { "alias": "suggestFn"; "required": false; }; "required": { "alias": "required"; "required": false; }; "mobile": { "alias": "mobile"; "required": false; }; "clearable": { "alias": "clearable"; "required": false; }; "debounceTime": { "alias": "debounceTime"; "required": false; }; "displayWith": { "alias": "displayWith"; "required": false; }; "displayAttributes": { "alias": "displayAttributes"; "required": false; }; "displayColumnSizes": { "alias": "displayColumnSizes"; "required": false; }; "displayColumnNames": { "alias": "displayColumnNames"; "required": false; }; "highlightAccent": { "alias": "highlightAccent"; "required": false; }; "showAllOnFocus": { "alias": "showAllOnFocus"; "required": false; }; "showPanelOnFocus": { "alias": "showPanelOnFocus"; "required": false; }; "autofocus": { "alias": "autofocus"; "required": false; }; "config": { "alias": "config"; "required": false; }; "i18nPrefix": { "alias": "i18nPrefix"; "required": false; }; "noResultMessage": { "alias": "noResultMessage"; "required": false; }; "panelClass": { "alias": "class"; "required": false; }; "panelWidth": { "alias": "panelWidth"; "required": false; }; "matAutocompletePosition": { "alias": "matAutocompletePosition"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "fetchMoreThreshold": { "alias": "fetchMoreThreshold"; "required": false; }; "suggestLengthThreshold": { "alias": "suggestLengthThreshold"; "required": false; }; "showLoadingSpinner": { "alias": "showLoadingSpinner"; "required": false; }; "debug": { "alias": "debug"; "required": false; }; "showSearchBar": { "alias": "showSearchBar"; "required": false; }; "stickySearchBar": { "alias": "stickySearchBar"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "applyImplicitValue": { "alias": "applyImplicitValue"; "required": false; }; "dropButtonTitle": { "alias": "dropButtonTitle"; "required": false; }; "clearButtonTitle": { "alias": "clearButtonTitle"; "required": false; }; "sortComparator": { "alias": "sortComparator"; "required": false; }; "filter": { "alias": "filter"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "items": { "alias": "items"; "required": false; }; }, { "clicked": "click"; "blurred": "blur"; "focused": "focus"; "dropButtonClick": "dropButtonClick"; "keydownEscape": "keydown.escape"; "keyupEnter": "keyup.enter"; }, never, ["[matAfter]", "[matPrefix]", "[matSuffix]", "mat-error,[matError]", "mat-hint:not([align='end']),[matHint]", "mat-hint[align='end']"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatAutocompleteField, "mat-autocomplete-field", never, { "equals": { "alias": "equals"; "required": false; }; "logPrefix": { "alias": "logPrefix"; "required": false; }; "formControl": { "alias": "formControl"; "required": false; }; "formControlName": { "alias": "formControlName"; "required": false; }; "floatLabel": { "alias": "floatLabel"; "required": false; }; "appearance": { "alias": "appearance"; "required": false; }; "subscriptSizing": { "alias": "subscriptSizing"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "suggestFn": { "alias": "suggestFn"; "required": false; }; "required": { "alias": "required"; "required": false; }; "mobile": { "alias": "mobile"; "required": false; }; "clearable": { "alias": "clearable"; "required": false; }; "debounceTime": { "alias": "debounceTime"; "required": false; }; "displayWith": { "alias": "displayWith"; "required": false; }; "displayAttributes": { "alias": "displayAttributes"; "required": false; }; "displayColumnSizes": { "alias": "displayColumnSizes"; "required": false; }; "displayColumnNames": { "alias": "displayColumnNames"; "required": false; }; "highlightAccent": { "alias": "highlightAccent"; "required": false; }; "showAllOnFocus": { "alias": "showAllOnFocus"; "required": false; }; "showPanelOnFocus": { "alias": "showPanelOnFocus"; "required": false; }; "autofocus": { "alias": "autofocus"; "required": false; }; "config": { "alias": "config"; "required": false; }; "i18nPrefix": { "alias": "i18nPrefix"; "required": false; }; "noResultMessage": { "alias": "noResultMessage"; "required": false; }; "panelClass": { "alias": "panelClass"; "required": false; }; "panelWidth": { "alias": "panelWidth"; "required": false; }; "matAutocompletePosition": { "alias": "matAutocompletePosition"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "fetchMoreThreshold": { "alias": "fetchMoreThreshold"; "required": false; }; "suggestLengthThreshold": { "alias": "suggestLengthThreshold"; "required": false; }; "showLoadingSpinner": { "alias": "showLoadingSpinner"; "required": false; }; "debug": { "alias": "debug"; "required": false; }; "showSearchBar": { "alias": "showSearchBar"; "required": false; }; "stickySearchBar": { "alias": "stickySearchBar"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "applyImplicitValue": { "alias": "applyImplicitValue"; "required": false; }; "dropButtonTitle": { "alias": "dropButtonTitle"; "required": false; }; "clearButtonTitle": { "alias": "clearButtonTitle"; "required": false; }; "filter": { "alias": "filter"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "items": { "alias": "items"; "required": false; }; }, { "clicked": "click"; "blurred": "blur"; "focused": "focus"; "dropButtonClick": "dropButtonClick"; "keydownEscape": "keydown.escape"; "keyupEnter": "keyup.enter"; }, never, ["[matAfter]", "[matPrefix]", "[matSuffix]", "mat-error,[matError]", "mat-hint:not([align='end']),[matHint]", "mat-hint[align='end']"], false, never>;
     static ngAcceptInputType_required: unknown;
     static ngAcceptInputType_mobile: unknown;
     static ngAcceptInputType_clearable: unknown;

package/src/assets/manifest.json

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

package/src/theme/_ngx-components.scss

@@ -207,6 +207,16 @@ mat-option:not(:last-of-type) {
   --max-width: calc(min(100%, 100vw - 64px));
   min-width: var(--min-width) !important;
   max-width: var(--max-width) !important;
+
+  div.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;
+    transform: scaleY(1) !important;
+
+    &.hidden {
+      transform: scaleY(0) !important;
+    }
+  }
 }
 .mat-mdc-autocomplete-panel {
   --min-width: 200px;
@@ -244,7 +254,7 @@ mat-option:not(:last-of-type) {
 
 
 // FIXME : This is a workaround find at : https://github.com/angular/components/issues/26000#issuecomment-1563107933
-.cdk-overlay-pane.fit-content {
+.cdk-overlay-pane.mat-select-panel-fit-content {
   min-width: fit-content;
 }