@sumaris-net/ngx-components 4.0.0-rc3 → 4.0.0-rc5

package/package.json

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

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

@@ -38,7 +38,6 @@ export declare class MatDateTime implements OnInit, AfterViewInit, OnDestroy, Co
     private _controlName;
     private _required;
     protected _subscriptSizing: SubscriptSizing | null;
-    protected _subscriptAnimationState: string;
     dayControl: UntypedFormControl;
     hourControl: UntypedFormControl;
     displayPattern: string;
@@ -75,8 +74,8 @@ export declare class MatDateTime implements OnInit, AfterViewInit, OnDestroy, Co
     matInputs: QueryList<ElementRef>;
     matError: MatError;
     constructor(dateAdapter: MomentDateAdapter, translate: TranslateService, formBuilder: UntypedFormBuilder, cd: ChangeDetectorRef, formGroupDir: FormGroupDirective, _defaults?: MatFormFieldDefaultOptions);
-    _getDisplayedMessages(): 'error' | 'hint';
     ngOnInit(): void;
+    _getDisplayedMessages(): 'error' | 'hint';
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     writeValue(value: any): void;

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

@@ -1,7 +1,7 @@
 import { ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy, OnInit } from '@angular/core';
 import { ControlValueAccessor, FormGroupDirective, UntypedFormBuilder, UntypedFormControl } from '@angular/forms';
 import { LatLongFormatFn, LatLongFormatOptions, LatLongPattern } from './latlong.utils';
-import { MatFormFieldAppearance } from '@angular/material/form-field';
+import { MatError, MatFormFieldAppearance, MatFormFieldDefaultOptions, SubscriptSizing } from '@angular/material/form-field';
 import { AppFloatLabelType } from '../../form/field.model';
 import { MaskitoMask } from '@maskito/core/lib/types/mask';
 import * as i0 from "@angular/core";
@@ -9,12 +9,14 @@ export declare class MatLatLongField implements OnInit, OnDestroy, ControlValueA
     private formBuilder;
     private cd;
     private formGroupDir;
+    private _defaults?;
     private _onChangeCallback;
     private _onTouchedCallback;
     private _subscription;
     private _formatOptions;
     private _disabling;
     private _writing;
+    protected _subscriptSizing: SubscriptSizing | null;
     _readonly: boolean;
     _formatFn: LatLongFormatFn;
     textFormControl: UntypedFormControl;
@@ -38,11 +40,15 @@ export declare class MatLatLongField implements OnInit, OnDestroy, ControlValueA
     autofocus: boolean;
     set readonly(value: boolean);
     get readonly(): boolean;
+    get subscriptSizing(): SubscriptSizing;
+    set subscriptSizing(value: SubscriptSizing);
     onBlur: EventEmitter<FocusEvent>;
     onFocus: EventEmitter<FocusEvent>;
     inputElement: ElementRef;
-    constructor(formBuilder: UntypedFormBuilder, cd: ChangeDetectorRef, formGroupDir: FormGroupDirective);
+    matError: MatError;
+    constructor(formBuilder: UntypedFormBuilder, cd: ChangeDetectorRef, formGroupDir: FormGroupDirective, _defaults?: MatFormFieldDefaultOptions);
     ngOnInit(): void;
+    _getDisplayedMessages(): 'error' | 'hint';
     ngOnDestroy(): void;
     writeValue(obj: any): void;
     registerOnChange(fn: any): void;
@@ -62,6 +68,6 @@ export declare class MatLatLongField implements OnInit, OnDestroy, ControlValueA
     private onFormChange;
     private checkIfTouched;
     private markForCheck;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatLatLongField, [null, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatLatLongField, "mat-latlong-field", never, { "formControl": { "alias": "formControl"; "required": false; }; "formControlName": { "alias": "formControlName"; "required": false; }; "type": { "alias": "type"; "required": false; }; "pattern": { "alias": "latLongPattern"; "required": false; }; "required": { "alias": "required"; "required": false; }; "floatLabel": { "alias": "floatLabel"; "required": false; }; "appearance": { "alias": "appearance"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "defaultSign": { "alias": "defaultSign"; "required": false; }; "maxDecimals": { "alias": "maxDecimals"; "required": false; }; "placeholderChar": { "alias": "placeholderChar"; "required": false; }; "autofocus": { "alias": "autofocus"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; }, { "onBlur": "onBlur"; "onFocus": "onFocus"; }, never, ["mat-error", "mat-hint", "[matPrefix]", "[matSuffix]"], false, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatLatLongField, [null, null, { optional: true; }, null]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatLatLongField, "mat-latlong-field", never, { "formControl": { "alias": "formControl"; "required": false; }; "formControlName": { "alias": "formControlName"; "required": false; }; "type": { "alias": "type"; "required": false; }; "pattern": { "alias": "latLongPattern"; "required": false; }; "required": { "alias": "required"; "required": false; }; "floatLabel": { "alias": "floatLabel"; "required": false; }; "appearance": { "alias": "appearance"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "defaultSign": { "alias": "defaultSign"; "required": false; }; "maxDecimals": { "alias": "maxDecimals"; "required": false; }; "placeholderChar": { "alias": "placeholderChar"; "required": false; }; "autofocus": { "alias": "autofocus"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "subscriptSizing": { "alias": "subscriptSizing"; "required": false; }; }, { "onBlur": "onBlur"; "onFocus": "onFocus"; }, ["matError"], ["mat-error", "mat-hint:not([align='end'])", "mat-hint[align='end']", "[matPrefix]", "[matSuffix]"], false, never>;
 }

package/src/theme/_material.scss

@@ -1,16 +1,29 @@
 // --------------------------------------------------
 // Override material style
 // --------------------------------------------------
-.mat-tab-group.mat-secondary, .mat-tab-nav-bar.mat-secondary {
+.mat-mdc-tab-group.mat-secondary, .mat-mdc-tab-nav-bar.mat-secondary {
   background-color: var(--ion-color-secondary, $secondary);
-  .mat-tab-link {
+  .mat-mdc-tab-link {
     color: var(--ion-color-secondary-contrast);
     --mat-tab-header-label-text-tracking: normal;
   }
 }
-.mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar {
+.mat-mdc-tab-group.mat-primary .mat-ink-bar, .mat-mdc-tab-nav-bar.mat-primary .mat-ink-bar {
   background-color: var(--ion-color-primary, $primary);
 }
+// Keep some style element that have changed after angular 15 migration
+.mdc-tab {
+  min-width: 160px !important;
+}
+.mat-mdc-tab-group, .mat-mdc-tab-nav-bar {
+  --mat-tab-header-active-label-text-color: #000000de;
+  --mat-tab-header-active-focus-label-text-color: #000000de;
+  --mat-tab-header-active-hover-label-text-color: #000000de;
+}
+.mat-form-field-appearance-fill .mat-mdc-select-arrow-wrapper {
+  transform: translateY(0px) !important;
+}
+
 // Icon, Button
 .mat-icon.mat-primary,
 .mat-icon-button.mat-primary,
@@ -35,6 +48,9 @@
 }
 
 // Badge
+.mdc-tab .mat-badge-content {
+    padding-left: 2px;
+}
 .mat-badge-primary .mat-badge-content {
   background-color: var(--ion-color-tertiary);
   color: var(--ion-color-tertiary-contrast);
@@ -124,13 +140,6 @@ mat-icon[slot] {
   pointer-events: none;
 }
 
-
-.mat-mdc-form-field {
-  --mat-form-field-container-text-size: 14px;
-  --mdc-filled-text-field-label-text-size: var(--mat-form-field-container-text-size);
-}
-
-
 // Form Fields
 .mat-mdc-form-field-errors {
   margin-top: -20px;
@@ -151,4 +160,3 @@ mat-icon[slot] {
     }
   }
 }
-

package/src/theme/_ngx-components.scss

@@ -847,7 +847,7 @@ mat-button-toggle.mat-button-toggle-checked.mat-button-toggle-disabled {
 // --------------------------------------------------
 
 // --- Allow to hide headers
-mat-tab-group.mat-tab-group-header-hidden .mat-tab-header {
+mat-tab-group.mat-tab-group-header-hidden .mat-mdc-tab-header {
     display: none;
 }
 

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

@@ -56,6 +56,8 @@
   }
 
   .mat-mdc-header-row {
+    --mat-table-header-headline-size: 12px;
+    --mat-table-header-headline-line-height: 12px;
     height: var(--app-table-header-height, 52px);
     border-bottom: 1px solid #{$app-table-border-color};
   }
@@ -270,6 +272,8 @@
     app-form-field,
     .mat-mdc-form-field {
       width: 100%;
+      --mat-form-field-container-text-size: 14px;
+      --mdc-filled-text-field-label-text-size: var(--mat-form-field-container-text-size);
       --mat-mdc-form-field-height: calc(var(--mat-row-height) - 2px);
       // TODO
       // use  -- active-  boder : 0;