@sumaris-net/ngx-components 2.7.3-rc15 → 2.7.3-rc18

package/package.json

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

package/src/app/shared/form/field.component.d.ts

@@ -1,12 +1,13 @@
 import { ChangeDetectorRef, ElementRef, EventEmitter, InjectionToken, Injector, OnInit } from '@angular/core';
 import { ControlValueAccessor, FormGroupDirective, UntypedFormControl } from '@angular/forms';
-import { DisplayFn, FormFieldDefinition, FormFieldType, AppFloatLabelType } from './field.model';
+import { AppFloatLabelType, DisplayFn, FormFieldDefinition, FormFieldType } from './field.model';
 import { TranslateService } from '@ngx-translate/core';
 import { filterNumberInput, selectInputContent } from '../inputs';
 import { Property } from '../types';
 import { ThemePalette } from '@angular/material/core';
 import { PredefinedColors } from '@ionic/core';
 import { MatAutocompleteField } from '../material/autocomplete/material.autocomplete';
+import { MatFormFieldAppearance } from '@angular/material/form-field';
 import * as i0 from "@angular/core";
 export declare class AppFormField implements OnInit, ControlValueAccessor {
     protected translate: TranslateService;
@@ -29,12 +30,13 @@ export declare class AppFormField implements OnInit, ControlValueAccessor {
     placeholder: string;
     compact: boolean;
     floatLabel: AppFloatLabelType;
+    appearance: MatFormFieldAppearance;
     tabindex: number;
     autofocus: boolean;
     clearable: boolean;
     chipColor: ThemePalette | PredefinedColors;
-    debug: boolean;
     classList: string;
+    debug: boolean;
     onKeyupEnter: EventEmitter<any>;
     get value(): any;
     matInput: ElementRef;
@@ -67,5 +69,5 @@ export declare class AppFormField implements OnInit, ControlValueAccessor {
     }): void;
     protected updateTabIndex(timeout?: number): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AppFormField, [null, null, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AppFormField, "app-form-field", never, { "definition": { "alias": "definition"; "required": false; }; "required": { "alias": "required"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "formControl": { "alias": "formControl"; "required": false; }; "formControlName": { "alias": "formControlName"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "compact": { "alias": "compact"; "required": false; }; "floatLabel": { "alias": "floatLabel"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "autofocus": { "alias": "autofocus"; "required": false; }; "clearable": { "alias": "clearable"; "required": false; }; "chipColor": { "alias": "chipColor"; "required": false; }; "debug": { "alias": "debug"; "required": false; }; "classList": { "alias": "class"; "required": false; }; }, { "onKeyupEnter": "keyup.enter"; }, never, ["[matSuffix]", "[matSuffix]", "[matSuffix]", "[matSuffix]", "[matSuffix]", "[matSuffix]", "[matPrefix]", "[matSuffix]", "[matSuffix]", "[matPrefix]", "[matSuffix]", "[matPrefix]", "[matSuffix]", "[matSuffix]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AppFormField, "app-form-field", never, { "definition": { "alias": "definition"; "required": false; }; "required": { "alias": "required"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "formControl": { "alias": "formControl"; "required": false; }; "formControlName": { "alias": "formControlName"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "compact": { "alias": "compact"; "required": false; }; "floatLabel": { "alias": "floatLabel"; "required": false; }; "appearance": { "alias": "appearance"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "autofocus": { "alias": "autofocus"; "required": false; }; "clearable": { "alias": "clearable"; "required": false; }; "chipColor": { "alias": "chipColor"; "required": false; }; "classList": { "alias": "class"; "required": false; }; "debug": { "alias": "debug"; "required": false; }; }, { "onKeyupEnter": "keyup.enter"; }, never, ["[matSuffix]", "[matSuffix]", "[matSuffix]", "[matSuffix]", "[matSuffix]", "[matSuffix]", "[matPrefix]", "[matSuffix]", "[matSuffix]", "[matPrefix]", "[matSuffix]", "[matPrefix]", "[matSuffix]", "[matSuffix]"], false, never>;
 }

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

@@ -112,6 +112,7 @@ export declare class MatAutocompleteField implements OnInit, AfterViewInit, OnDe
     filterInputTextFocusEvent(event: FocusEvent): boolean;
     protected filterInputTextBlurEvent(event: FocusEvent): void;
     protected ionSearchBarChanged(event: Event): void;
+    ionSearchBarChanged1(event: any): void;
     filterMatSelectFocusEvent(event: FocusEvent): void;
     filterMatSelectBlurEvent(event: FocusEvent): boolean;
     clearValue(event?: Event): void;

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

package/src/theme/_material.scss

@@ -57,13 +57,14 @@
 }
 .mat-mdc-option {
   --mat-option-label-text-tracking: normal;
-  --mat-option-label-text-size: 14px;
+  --mat-option-label-text-size: 16px;
 }
 .mat-mdc-select {
   --mat-select-trigger-text-font: inherit;
   --mat-select-trigger-text-tracking: normal;
   --mat-select-trigger-text-size: inherit;
   --mat-select-disabled-trigger-text-color: inherit;
+  --mat-select-trigger-text-line-height: inherit;
 }
 
   // Badge

package/src/theme/_ngx-components.scss

@@ -132,19 +132,20 @@ ion-menu.menu-side-left {
 .form-container,
 form.form-container {
   color: #{$app-form-color};
+  @include font-size(16px);
+
   --mdc-filled-text-field-container-color: #{$app-form-field-background-color};
   --mdc-filled-text-field-disabled-container-color: #{$app-form-field-background-color};
   --mat-form-field-state-layer-color: #{$app-form-field-focus-background-color};
   --mat-form-field-container-height: 45px;
-  --mat-form-field-container-text-size: 14px;
+  --mat-form-field-container-text-size: inherit;
   --mat-form-field-filled-label-display: block;
-  --mat-form-field-container-vertical-padding: 16px;
+  --mat-form-field-container-vertical-padding: 8px;
   --mat-form-field-filled-with-label-container-padding-top: 16px;
   --mat-form-field-filled-with-label-container-padding-bottom: 0px;
   --mdc-filled-text-field-label-text-tracking: normal;
   --mat-select-trigger-text-size: var(--mat-form-field-container-text-size);
 
-  @include font-size(14px);
 
   .mat-form-field-disabled,
   .mat-mdc-input-element:disabled {
@@ -153,7 +154,7 @@ form.form-container {
 
   // TODO BLA: voir si utile ?
   .mat-form-field-disabled {
-    .mat-mdc-form-field-infix{
+    .mat-mdc-form-field-infix {
       min-height: 41px;
     }
   }
@@ -176,15 +177,17 @@ form.form-container {
     mat-icon[matPrefix],
     .mat-mdc-form-field-icon-prefix {
 
+      --mdc-icon-button-icon-size: calculateRem(24px);
+      --mdc-icon-button-state-layer-size: calculateRem(28px);
+      --mdc-icon-button-margin-vertical: calc((var(--mdc-icon-button-state-layer-size) - var(--mdc-icon-button-state-layer-size)) / 2);
+
       ion-icon, .mat-icon {
-        $font-size: calculateRem(24px);
-        $margin-vertical: calculateRem(4px);
-        font-size: $font-size !important;
+        font-size: var(--mdc-icon-button-icon-size) !important;
         line-height: 1.125;
-        height: $font-size;
-        width: $font-size;
-        margin-left: $margin-vertical;
-        margin-right: $margin-vertical;
+        height: var(--mdc-icon-button-icon-size);
+        width: var(--mdc-icon-button-icon-size);
+        margin-left: var(--mdc-icon-button-margin-vertical);
+        margin-right: var(--mdc-icon-button-margin-vertical);
         position: relative;
       }
     }
@@ -193,15 +196,24 @@ form.form-container {
     mat-icon[matSuffix],
     .mat-mdc-form-field-icon-suffix {
       white-space: nowrap;
+      align-self: baseline;
 
       .mat-mdc-icon-button {
-        --mdc-icon-button-icon-size: 24px;
-        --mdc-icon-button-state-layer-size: 28px;
-        padding: 2px;
+        --mdc-icon-button-state-layer-size: 22px;
+        --mdc-icon-button-padding: 4px;
+        --mdc-icon-button-icon-size: 14px;
+        padding: var(--mdc-icon-button-padding);
+
+        &.large {
+          --mdc-icon-button-state-layer-size: 48px;
+          --mdc-icon-button-padding: 12px;
+          --mdc-icon-button-icon-size: 24px;
+        }
 
-        ion-icon, .mat-icon, .mat-icon.large {
+        ion-icon, .mat-icon {
+          height: var(--mdc-icon-button-icon-size);
+          width: var(--mdc-icon-button-icon-size);
           font-size: var(--mdc-icon-button-icon-size);
-          line-height: var(--mdc-icon-button-icon-size);
         }
 
         .mat-mdc-button-touch-target {
@@ -212,7 +224,7 @@ form.form-container {
       ion-icon, .mat-icon {
 
         &.large {
-          $font-size: calculateRem(24px);
+          $font-size: calculateRem(14px);
           font-size: $font-size;
           line-height: 1.125;
         }
@@ -263,12 +275,12 @@ form.form-container {
   /* -- Computed field -- */
 
   // Set color on computed field (if enable or disable)
-  .computed mat-mdc-form-field,
-  mat-mdc-form-field .computed,
-  mat-mdc-form-field.computed,
-  .computed mat-mdc-form-field .mat-mdc-input-element:disabled,
-  mat-mdc-form-field .computed .mat-mdc-input-element:disabled,
-  mat-mdc-form-field.computed .mat-mdc-input-element:disabled {
+  .computed .mat-mdc-form-field,
+  .mat-mdc-form-field .computed,
+  .mat-mdc-form-field.computed,
+  .computed .mat-mdc-form-field .mat-mdc-input-element:disabled,
+  .mat-mdc-form-field .computed .mat-mdc-input-element:disabled,
+  .mat-mdc-form-field.computed .mat-mdc-input-element:disabled {
     color: var(--ion-color-primary-tint) !important;
     font-style: italic;
   }
@@ -358,12 +370,6 @@ mat-option {
     flex-grow: 1;
   }
   .mat-option-text:not(:has(ion-row)),
-
-  // TODO : Disabled : mat-option already have padding : this is redundant
-  //.mdc-list-item__primary-text:not(:has(ion-row)) {
-  //  padding: 0 16px;
-  //}
-
   .mat-option-text:has(ion-searchbar),
   .mdc-list-item__primary-text:has(ion-searchbar) {
     padding: 0 !important;
@@ -471,7 +477,7 @@ ion-list,
     }
   }
 
-  .mat-mdc-option.mat-select-searchbar,
+  .mat-mdc-optgroup.mat-select-searchbar,
   .mat-mdc-option.mat-autocomplete-searchbar
   {
     padding: 0 !important;
@@ -479,8 +485,10 @@ ion-list,
     background-color: var(--ion-color-secondary100) !important;
     pointer-events: inherit !important;
 
-    .mdc-list-item__primary-text {
-      opacity: 1 !important;
+    .mat-mdc-optgroup-label {
+      background-color: var(--ion-color-secondary100) !important;
+      padding: 0;
+      display: block;
     }
 
     /* hide pseudo checkbox, in the searchbar*/

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

@@ -276,26 +276,19 @@
       }
     }
 
-    //.mdc-line-ripple--deactivating {
-    //  display: none;
-    //}
-
-    mat-mdc-form-field,
     mat-autocomplete-field,
-    app-form-field,
+    app-form-field {
+      width: 100%;
+    }
+
     .mat-mdc-form-field {
       width: 100%;
+      padding-top: 1px;
       --mat-form-field-container-text-size: 14px;
       --mdc-filled-text-field-label-text-size: var(--mat-form-field-container-text-size);
       --mat-select-trigger-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;
       height: var(--mat-mdc-form-field-height);
-    }
-
-    .mat-mdc-form-field {
-      padding-top: 1px;
 
       .mat-mdc-form-field-label {
         width: 100%;
@@ -410,8 +403,6 @@
       }
 
       mat-error {
-        //font-size: ;
-      //--mdc-typography-caption-font-size: 10px;
         font-size: 10px;
       }