@gravitee/ui-particles-angular 5.14.0 → 5.15.0

package/fesm2020/gravitee-ui-particles-angular.mjs

@@ -1,7 +1,7 @@
 import { trigger, transition, style, animate } from '@angular/animations';
 import * as i0 from '@angular/core';
 import { EventEmitter, Component, HostBinding, Input, Output, HostListener, NgModule, Optional, Self, ViewChild, Directive, Inject, forwardRef, ChangeDetectionStrategy, Injectable, ViewEncapsulation, ContentChildren, Host, ContentChild, InjectionToken } from '@angular/core';
-import { timer, Subject, fromEvent, of, BehaviorSubject, ReplaySubject } from 'rxjs';
+import { timer, Subject, fromEvent, of, BehaviorSubject, combineLatest, ReplaySubject } from 'rxjs';
 import * as i1 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
 import * as i2 from '@angular/material/button';
@@ -13,7 +13,7 @@ import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import * as i3$1 from '@angular/material/form-field';
 import { MatFormFieldControl, MatFormFieldModule, MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
 import { isEmpty, toLower, dropRight, isNil, isArray, remove, isObject, cloneDeep, set, uniqueId } from 'lodash';
-import { startWith, map, distinctUntilChanged, tap, debounce, takeUntil, delay, filter, switchMap } from 'rxjs/operators';
+import { startWith, map, distinctUntilChanged, tap, debounce, takeUntil, delay, filter, switchMap, debounceTime } from 'rxjs/operators';
 import * as i7 from '@angular/forms';
 import { FormsModule, FormArray, FormGroup, FormControl, NG_VALUE_ACCESSOR, ReactiveFormsModule, NgControl } from '@angular/forms';
 import * as i2$2 from '@angular/cdk/a11y';
@@ -2797,6 +2797,7 @@ class GioFormlyJsonSchemaService {
         return this.formlyJsonschema.toFieldConfig(jsonSchema, {
             map: (mappedField, mapSource) => {
                 mappedField = this.uiTypeMap(mappedField, mapSource);
+                mappedField = this.formatMap(mappedField, mapSource);
                 mappedField = this.bannerMap(mappedField, mapSource);
                 mappedField = this.toggleMap(mappedField, mapSource);
                 return mappedField;
@@ -2807,6 +2808,22 @@ class GioFormlyJsonSchemaService {
         mappedField.type = mapSource.gioConfig?.uiType ?? mappedField.type;
         return mappedField;
     }
+    formatMap(mappedField, mapSource) {
+        if (mapSource.type === 'string' && mapSource.format === 'text') {
+            mappedField.type = 'textarea';
+            mappedField.props = {
+                ...mappedField.props,
+                autosize: true,
+            };
+        }
+        else if (mapSource.type === 'string' && mapSource.format === 'password') {
+            mappedField.props = {
+                ...mappedField.props,
+                type: 'password',
+            };
+        }
+        return mappedField;
+    }
     bannerMap(mappedField, mapSource) {
         mappedField.props = {
             ...mappedField.props,
@@ -2859,9 +2876,11 @@ class GioFormJsonSchemaComponent {
         this.options = {};
         this.model = {};
         this.fields = [];
+        this.loading = true;
         this._onChange = () => ({});
         this._onTouched = () => ({});
         this.touched = false;
+        this.stateChanges$ = new Subject();
         if (ngControl) {
             // Setting the value accessor directly (instead of using
             // the providers `NG_VALUE_ACCESSOR`) to avoid running into a circular import.
@@ -2881,25 +2900,38 @@ class GioFormJsonSchemaComponent {
         }
     }
     ngOnInit() {
-        // When the parent form is touched, mark all the sub formGroup as touched
+        // When the parent form is touched, mark all the sub formGroup as touched ony once
         const parentControl = this.ngControl?.control?.parent;
         parentControl?.statusChanges
-            ?.pipe(takeUntil(this.unsubscribe$), map(() => parentControl?.touched), filter(touched => touched === true), tap(() => this.formGroup.markAllAsTouched()))
-            .subscribe();
-        this.formGroup.statusChanges.pipe(takeUntil(this.unsubscribe$)).subscribe(status => {
-            if (status === 'VALID') {
-                this.ngControl?.control?.setErrors(null);
-            }
-            if (status === 'INVALID') {
-                this.ngControl?.control?.setErrors({ invalid: true });
-            }
+            ?.pipe(takeUntil(this.unsubscribe$), map(() => parentControl?.touched), filter(touched => touched === true), distinctUntilChanged())
+            .subscribe(() => {
+            this.formGroup.markAllAsTouched();
+            this.stateChanges$.next();
         });
         // To simulate the behavior of classic form controls, emit value only when the form is touched
         // Allow to keep the formControl pristine until the user interact with it
-        this.formGroup.valueChanges
-            .pipe(takeUntil(this.unsubscribe$), filter(() => this.touched))
-            .subscribe(value => {
-            this._onChange(value);
+        combineLatest([this.formGroup.statusChanges, this.formGroup.valueChanges])
+            .pipe(takeUntil(this.unsubscribe$), 
+        // Group all valueChanges events emit by formly in a single one
+        debounceTime(100))
+            .subscribe(() => {
+            this.stateChanges$.next();
+        });
+        this.stateChanges$.pipe(takeUntil(this.unsubscribe$)).subscribe(() => {
+            const { status, value, touched } = this.formGroup;
+            if (touched) {
+                this._onTouched();
+                this.touched = true;
+            }
+            if (this.touched) {
+                this._onChange(value);
+                if (status === 'VALID') {
+                    this.ngControl?.control?.setErrors(null);
+                }
+                if (status === 'INVALID') {
+                    this.ngControl?.control?.setErrors({ invalid: true });
+                }
+            }
         });
     }
     ngOnDestroy() {
@@ -3351,7 +3383,7 @@ GioFjsMultiSchemaTypeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
       </div>
       <formly-field *ngFor="let f of field.fieldGroup" [field]="f"></formly-field>
     </div>
-  `, isInline: true, styles: [".wrapper{padding:8px;border:1px solid #d3d5dc;border-radius:8px}.wrapper__title{font-size:16px;font-weight:500;line-height:24px;font:600 14px/20px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px;margin-bottom:4px}.wrapper:empty{display:none}.wrapper__error{font:400 12px/16px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;color:#ec4899}\n"], components: [{ type: i1$4.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { type: i1$4.FormlyField, selector: "formly-field", inputs: ["field"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+  `, isInline: true, styles: [".wrapper__title{font-size:16px;font-weight:500;line-height:24px;font:600 14px/20px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px;margin-bottom:4px}.wrapper:empty{display:none}.wrapper__error{font:400 12px/16px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;color:#ec4899}\n"], components: [{ type: i1$4.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { type: i1$4.FormlyField, selector: "formly-field", inputs: ["field"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFjsMultiSchemaTypeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gio-fjs-multi-schema-type', template: `
@@ -3363,7 +3395,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
       </div>
       <formly-field *ngFor="let f of field.fieldGroup" [field]="f"></formly-field>
     </div>
-  `, styles: [".wrapper{padding:8px;border:1px solid #d3d5dc;border-radius:8px}.wrapper__title{font-size:16px;font-weight:500;line-height:24px;font:600 14px/20px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px;margin-bottom:4px}.wrapper:empty{display:none}.wrapper__error{font:400 12px/16px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;color:#ec4899}\n"] }]
+  `, styles: [".wrapper__title{font-size:16px;font-weight:500;line-height:24px;font:600 14px/20px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px;margin-bottom:4px}.wrapper:empty{display:none}.wrapper__error{font:400 12px/16px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;color:#ec4899}\n"] }]
         }] });
 
 /*
@@ -3501,6 +3533,74 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
   `, styles: [".wrapper{display:flex;flex-direction:column;padding:8px;border:1px solid #d3d5dc;border-radius:8px}.wrapper__header{display:flex}.wrapper__header__text{flex:1 1 auto}.wrapper__header__text__title{font:600 16px/24px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px;margin-bottom:8px}.wrapper__header__collapse{flex:0 0 auto}.wrapper__header__collapse .collapse-open{transform:rotate(180deg);transition:transform 225ms cubic-bezier(.4,0,.2,1)}.wrapper__header__collapse .collapse-close{transform:rotate(0);transition:transform 225ms cubic-bezier(.4,0,.2,1)}.wrapper__error{font:400 12px/16px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;color:#ec4899}\n"] }]
         }] });
 
+/*
+ * Copyright (C) 2023 The Gravitee team (http://gravitee.io)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class GioPasswordEyeWrapperComponent extends FieldWrapper {
+    constructor() {
+        super(...arguments);
+        this.hide = true;
+    }
+    ngAfterViewInit() {
+        if (this.matSuffix) {
+            this.props.suffix = this.matSuffix;
+        }
+    }
+    addonEyeClick($event) {
+        $event.stopPropagation();
+        this.hide = !this.hide;
+        this.props.type = this.hide ? 'password' : 'text';
+    }
+}
+GioPasswordEyeWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioPasswordEyeWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+GioPasswordEyeWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GioPasswordEyeWrapperComponent, selector: "gio-password-eye-wrapper", viewQueries: [{ propertyName: "matSuffix", first: true, predicate: ["matSuffix"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
+    <ng-container #fieldComponent></ng-container>
+
+    <ng-template #matSuffix>
+      <span style="cursor: pointer" (click)="addonEyeClick($event)">
+        <mat-icon [svgIcon]="hide ? 'gio:eye-empty' : 'gio:eye-off'"></mat-icon>
+      </span>
+    </ng-template>
+  `, isInline: true, components: [{ type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioPasswordEyeWrapperComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'gio-password-eye-wrapper',
+                    template: `
+    <ng-container #fieldComponent></ng-container>
+
+    <ng-template #matSuffix>
+      <span style="cursor: pointer" (click)="addonEyeClick($event)">
+        <mat-icon [svgIcon]="hide ? 'gio:eye-empty' : 'gio:eye-off'"></mat-icon>
+      </span>
+    </ng-template>
+  `,
+                }]
+        }], propDecorators: { matSuffix: [{
+                type: ViewChild,
+                args: ['matSuffix', { static: true }]
+            }] } });
+function passwordEyeExtension(field) {
+    if (!field.props || (field.wrappers && field.wrappers.indexOf('gio-password-eye') !== -1)) {
+        return;
+    }
+    if (field.props.type === 'password') {
+        field.wrappers = [...(field.wrappers || []), 'gio-password-eye'];
+    }
+}
+
 /*
  * Copyright (C) 2015 The Gravitee team (http://gravitee.io)
  *
@@ -3526,7 +3626,8 @@ GioFormJsonSchemaModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0",
         GioFjsArrayTypeComponent,
         GioFjsToggleTypeComponent,
         GioFjsHeadersTypeComponent,
-        GioFormFieldWrapperComponent], imports: [CommonModule,
+        GioFormFieldWrapperComponent,
+        GioPasswordEyeWrapperComponent], imports: [CommonModule,
         A11yModule,
         ReactiveFormsModule, i1$4.FormlyModule, FormlyMaterialModule,
         GioIconsModule,
@@ -3554,7 +3655,10 @@ GioFormJsonSchemaModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0",
                     { name: 'uniqueItems', message: 'Should NOT have duplicate items' },
                     { name: 'const', message: constValidationMessage },
                 ],
-                wrappers: [{ name: 'gio-with-banner', component: GioFormFieldWrapperComponent }],
+                wrappers: [
+                    { name: 'gio-with-banner', component: GioFormFieldWrapperComponent },
+                    { name: 'gio-password-eye', component: GioPasswordEyeWrapperComponent },
+                ],
                 types: [
                     { name: 'null', component: GioFjsNullTypeComponent, wrappers: ['form-field'] },
                     { name: 'array', component: GioFjsArrayTypeComponent },
@@ -3569,7 +3673,10 @@ GioFormJsonSchemaModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0",
                         component: GioFjsHeadersTypeComponent,
                     },
                 ],
-                extensions: [{ name: 'banner', extension: { onPopulate: bannerExtension } }],
+                extensions: [
+                    { name: 'banner', extension: { onPopulate: bannerExtension } },
+                    { name: 'password-eye', extension: { onPopulate: passwordEyeExtension } },
+                ],
                 extras: {
                     checkExpressionOn: 'changeDetectionCheck',
                 },
@@ -3593,6 +3700,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         GioFjsToggleTypeComponent,
                         GioFjsHeadersTypeComponent,
                         GioFormFieldWrapperComponent,
+                        GioPasswordEyeWrapperComponent,
                     ],
                     imports: [
                         CommonModule,
@@ -3614,7 +3722,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                                 { name: 'uniqueItems', message: 'Should NOT have duplicate items' },
                                 { name: 'const', message: constValidationMessage },
                             ],
-                            wrappers: [{ name: 'gio-with-banner', component: GioFormFieldWrapperComponent }],
+                            wrappers: [
+                                { name: 'gio-with-banner', component: GioFormFieldWrapperComponent },
+                                { name: 'gio-password-eye', component: GioPasswordEyeWrapperComponent },
+                            ],
                             types: [
                                 { name: 'null', component: GioFjsNullTypeComponent, wrappers: ['form-field'] },
                                 { name: 'array', component: GioFjsArrayTypeComponent },
@@ -3629,7 +3740,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                                     component: GioFjsHeadersTypeComponent,
                                 },
                             ],
-                            extensions: [{ name: 'banner', extension: { onPopulate: bannerExtension } }],
+                            extensions: [
+                                { name: 'banner', extension: { onPopulate: bannerExtension } },
+                                { name: 'password-eye', extension: { onPopulate: passwordEyeExtension } },
+                            ],
                             extras: {
                                 checkExpressionOn: 'changeDetectionCheck',
                             },
@@ -3685,17 +3799,17 @@ class GioFormFocusInvalidDirective {
     onFormSubmit() {
         const selector = '.ng-invalid[formControlName],input.ng-invalid,mat-select.ng-invalid,textarea.ng-invalid,.gio-ng-invalid';
         try {
+            // Mark all controls as touched to display errors
+            if (this.formGroupDirective) {
+                this.formGroupDirective.control.markAllAsTouched();
+                this.formGroupDirective.control.updateValueAndValidity();
+            }
             let invalidControl = this.renderer.selectRootElement(selector, true);
             // If the form is a GioFormJsonSchema, we need to focus the first invalid control inside
             if (invalidControl.tagName === 'GIO-FORM-JSON-SCHEMA') {
                 invalidControl = invalidControl.querySelector(selector);
             }
             if (invalidControl) {
-                // Mark all controls as touched to display errors
-                if (this.formGroupDirective) {
-                    this.formGroupDirective.control.markAllAsTouched();
-                    this.formGroupDirective.control.updateValueAndValidity();
-                }
                 invalidControl.scrollIntoView({ behavior: 'smooth', block: 'center' });
                 invalidControl.focus({ preventScroll: true });
             }