@sumaris-net/ngx-components 1.20.14 → 1.20.17

package/bundles/sumaris-net.ngx-components.umd.js

@@ -3477,8 +3477,10 @@
             var errorCode = msg ? 'msg' : 'dateRange';
             var error = msg ? { msg: msg } : { dateRange: true };
             return function (control) {
-                var _a;
-                var startControl = (_a = control.parent) === null || _a === void 0 ? void 0 : _a.get(startDateFieldName);
+                // Form group not created yet: skip
+                if (!control.parent)
+                    return null;
+                var startControl = control.parent.get(startDateFieldName);
                 if (!startControl) {
                     console.warn("Cannot find brother control '" + startDateFieldName + "' in the parent form");
                     return null;
@@ -3498,8 +3500,10 @@
             var errorCode = msg ? 'msg' : 'dateRange';
             var error = msg ? { msg: msg } : { dateRange: true };
             return function (control) {
-                var _a;
-                var endDateControl = (_a = control.parent) === null || _a === void 0 ? void 0 : _a.get(endDateFieldName);
+                // Form group not created yet: skip
+                if (!control.parent)
+                    return null;
+                var endDateControl = control.parent.get(endDateFieldName);
                 if (!endDateControl) {
                     console.warn("Cannot find control '" + endDateFieldName + "' in the parent form");
                     return null;
@@ -3520,7 +3524,13 @@
                 // Skip if control already has some errors
                 if (control.errors)
                     return null;
-                var errors = control.parent && control.parent.errors;
+                // Skip if parent form group not created yet
+                if (!control.parent)
+                    return null;
+                // Form group not created yet
+                if (!control.parent)
+                    return null;
+                var errors = control.parent.errors;
                 // No errors, or copy all errors
                 if (!errors || isEmptyArray(errorNames))
                     return errors;
@@ -3725,13 +3735,13 @@
          */
         SharedFormArrayValidators.uniqueEntity = function (controlName) {
             return function (array) {
-                var e_1, _b;
+                var e_1, _a;
                 var controls = [];
                 if (array.length) {
                     try {
                         // gather controls in array with valid entity
-                        for (var _c = __values(array.controls), _d = _c.next(); !_d.done; _d = _c.next()) {
-                            var control = _d.value;
+                        for (var _b = __values(array.controls), _c = _b.next(); !_c.done; _c = _b.next()) {
+                            var control = _c.value;
                             var fromGroup = control;
                             if (fromGroup.controls[controlName]) {
                                 var value = fromGroup.controls[controlName].value;
@@ -3743,7 +3753,7 @@
                     catch (e_1_1) { e_1 = { error: e_1_1 }; }
                     finally {
                         try {
-                            if (_d && !_d.done && (_b = _c.return)) _b.call(_c);
+                            if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
                         }
                         finally { if (e_1) throw e_1.error; }
                     }
@@ -3788,12 +3798,12 @@
          */
         SharedFormArrayValidators.validSumMaxValue = function (controlName, max) {
             return function (array) {
-                var e_2, _b;
+                var e_2, _a;
                 var controls = [];
                 if (array.length) {
                     try {
-                        for (var _c = __values(array.controls), _d = _c.next(); !_d.done; _d = _c.next()) {
-                            var control = _d.value;
+                        for (var _b = __values(array.controls), _c = _b.next(); !_c.done; _c = _b.next()) {
+                            var control = _c.value;
                             var fromGroup = control;
                             if (fromGroup.controls[controlName] && isNotNilOrNaN(fromGroup.controls[controlName].value)) {
                                 controls.push(fromGroup.controls[controlName]);
@@ -3803,7 +3813,7 @@
                     catch (e_2_1) { e_2 = { error: e_2_1 }; }
                     finally {
                         try {
-                            if (_d && !_d.done && (_b = _c.return)) _b.call(_c);
+                            if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
                         }
                         finally { if (e_2) throw e_2.error; }
                     }
@@ -9039,15 +9049,14 @@
         { type: i0.Component, args: [{
                     // eslint-disable-next-line @angular-eslint/component-selector
                     selector: 'mat-chips-field',
-                    template: "<ion-grid class=\"ion-no-padding\">\n  <ion-row>\n    <ion-col class=\"ion-no-padding\">\n      <mat-form-field [floatLabel]=\"floatLabel\"\n                      [appearance]=\"appearance\"\n                      class=\"material-chips\" [class.mat-form-field-disabled]=\"disabled\">\n        <div matPrefix>\n          <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n        </div>\n        <mat-label>{{placeholder}}</mat-label>\n        <mat-chip-list #chipList\n                       (focus)=\"filterChipsFocusEvent($event)\" >\n          <mat-chip\n            *ngFor=\"let item of value\"\n            [selectable]=\"false\"\n            [removable]=\"!disabled\"\n            (removed)=\"remove(item)\"\n            [color]=\"chipColor\"\n            >\n            {{displayWith(item)}}\n            <mat-icon matChipRemove *ngIf=\"!disabled\">cancel</mat-icon>\n          </mat-chip>\n\n          <input #matInputText type=\"text\"\n                 [matAutocomplete]=\"autocomplete\"\n                 [matAutocompletePosition]=\"matAutocompletePosition\"\n                 [formControl]=\"inputControl\"\n                 [appAutofocus]=\"autofocus\"\n                 [tabindex]=\"_tabindex\"\n                 [readonly]=\"disabled\"\n                 [hidden]=\"disabled\"\n                 [required]=\"required\"\n                 (click)=\"clicked.emit($event)\"\n                 (focus)=\"filterInputTextFocusEvent($event)\"\n                 (blur)=\"filterInputTextBlurEvent($event)\"\n                 (keydown.escape)=\"keydownEscape.emit($event)\"\n                 (keyup.enter)=\"keyupEnter.emit($event)\"\n                 (keyup.arrowdown)=\"!autocomplete.showPanel && dropButtonClick.emit($event)\"\n                 [matChipInputFor]=\"chipList\"\n          >\n        </mat-chip-list>\n\n        <!-- autocomplete -->\n        <mat-autocomplete #autocomplete=\"matAutocomplete\"\n                          (optionSelected)=\"add($event)\"\n                          autoActiveFirstOption\n                          [displayWith]=\"displayWith\"\n                          [class]=\"classList\"\n                          [panelWidth]=\"panelWidth\">\n          <ion-row class=\"mat-autocomplete-header ion-no-padding column\">\n            <ion-col *ngFor=\"let attr of displayAttributes; index as i\" [size]=\"displayColumnSizes[i]\">\n              <ion-label [innerHTML]=\"displayColumnNames[i] | translate\"></ion-label>\n            </ion-col>\n          </ion-row>\n\n          <ng-container *ngIf=\"$filteredItems | async as items; else loadingTemplate\">\n            <!-- No item option -->\n            <mat-option *ngIf=\"items | isEmptyArray\" class=\"ion-padding text-italic\" disabled>\n              <ion-label>{{noResultMessage | translate}}</ion-label>\n            </mat-option>\n\n            <mat-option *ngFor=\"let item of items\" [value]=\"item\" class=\"ion-no-padding\">\n              <ion-row [classList]=\"item.classList\">\n                <ion-col *ngFor=\"let path of displayAttributes; index as i;\"\n                         [size]=\"displayColumnSizes[i]\">\n                  <ion-text [innerHTML]=\"item | propertyGet: path | highlight: { search: inputControl.value, withAccent: highlightAccent } \"></ion-text>\n                </ion-col>\n              </ion-row>\n            </mat-option>\n\n            <!-- More item -->\n            <mat-option *ngIf=\"_moreItemsCount\" (ngInit)=\"_initAutocompleteInfiniteScroll()\"\n                        class=\"ion-padding\" disabled>\n              <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n            </mat-option>\n          </ng-container>\n\n          <!-- footer -->\n          <ion-row *ngIf=\"itemCount as count\"\n                   class=\"mat-autocomplete-footer ion-no-padding\">\n            <ion-col>\n              <ion-text class=\"ion-float-end ion-padding-end\"><i>{{'COMMON.RESULT_COUNT'|translate: {count: count} }}</i></ion-text>\n            </ion-col>\n          </ion-row>\n\n          <!-- Loading spinner -->\n          <ng-template #loadingTemplate>\n            <mat-option *ngIf=\"(matInputText.value | strLength) >= suggestLengthThreshold; else waitMoreCharacterTemplate\"\n                        class=\"ion-padding\" disabled>\n              <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n            </mat-option>\n          </ng-template>\n\n          <!-- Need more characters -->\n          <ng-template #waitMoreCharacterTemplate>\n            <mat-option class=\"ion-padding text-italic\" disabled>\n              <ion-label>\n                {{'INFO.PLEASE_TYPE_MORE_CHARACTERS'|translate:{minLength: suggestLengthThreshold} }}\n              </ion-label>\n            </mat-option>\n          </ng-template>\n        </mat-autocomplete>\n\n        <div matSuffix>\n          <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n        </div>\n\n        <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n        <ng-content select=\"[matError]\"></ng-content>\n\n      </mat-form-field>\n\n    </ion-col>\n    <ion-col size=\"auto\" class=\"ion-align-self-center\">\n      <ng-content select=\"[matAfter]\"></ng-content>\n    </ion-col>\n  </ion-row>\n</ion-grid>\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n\n\n<ng-template #matSuffixTemplate>\n  <button mat-icon-button tabindex=\"-1\"\n          type=\"button\"\n          (click)=\"dropButtonClick.emit($event)\"\n          [hidden]=\"disabled\">\n    <mat-icon class=\"large select-arrow\">arrow_drop_down</mat-icon>\n  </button>\n  <button mat-icon-button tabindex=\"-1\"\n          type=\"button\"\n          *ngIf=\"clearable\"\n          (click)=\"clearValue($event)\"\n          [hidden]=\"disabled || !formControl.value\">\n    <mat-icon>close</mat-icon>\n  </button>\n\n  <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n",
+                    template: "<ion-grid class=\"ion-no-padding\">\n  <ion-row>\n    <ion-col class=\"ion-no-padding\">\n      <mat-form-field [floatLabel]=\"floatLabel\"\n                      [appearance]=\"appearance\"\n                      class=\"material-chips\" [class.mat-form-field-disabled]=\"disabled\">\n        <div matPrefix>\n          <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n        </div>\n        <mat-label>{{placeholder}}</mat-label>\n        <mat-chip-list #chipList\n                       (focus)=\"filterChipsFocusEvent($event)\" >\n          <mat-chip class=\"ion-no-margin\"\n            *ngFor=\"let item of value\"\n            [selectable]=\"false\"\n            [removable]=\"!disabled\"\n            (removed)=\"remove(item)\"\n            [color]=\"chipColor\"\n            >\n            {{displayWith(item)}}\n            <mat-icon matChipRemove *ngIf=\"!disabled\">cancel</mat-icon>\n          </mat-chip>\n\n          <input #matInputText type=\"text\"\n                 [matAutocomplete]=\"autocomplete\"\n                 [matAutocompletePosition]=\"matAutocompletePosition\"\n                 [formControl]=\"inputControl\"\n                 [appAutofocus]=\"autofocus\"\n                 [tabindex]=\"_tabindex\"\n                 [readonly]=\"disabled\"\n                 [hidden]=\"disabled\"\n                 [required]=\"required\"\n                 (click)=\"clicked.emit($event)\"\n                 (focus)=\"filterInputTextFocusEvent($event)\"\n                 (blur)=\"filterInputTextBlurEvent($event)\"\n                 (keydown.escape)=\"keydownEscape.emit($event)\"\n                 (keyup.enter)=\"keyupEnter.emit($event)\"\n                 (keyup.arrowdown)=\"!autocomplete.showPanel && dropButtonClick.emit($event)\"\n                 [matChipInputFor]=\"chipList\"\n          >\n        </mat-chip-list>\n\n        <!-- autocomplete -->\n        <mat-autocomplete #autocomplete=\"matAutocomplete\"\n                          (optionSelected)=\"add($event)\"\n                          autoActiveFirstOption\n                          [displayWith]=\"displayWith\"\n                          [class]=\"classList\"\n                          [panelWidth]=\"panelWidth\">\n          <ion-row class=\"mat-autocomplete-header ion-no-padding column\">\n            <ion-col *ngFor=\"let attr of displayAttributes; index as i\" [size]=\"displayColumnSizes[i]\">\n              <ion-label [innerHTML]=\"displayColumnNames[i] | translate\"></ion-label>\n            </ion-col>\n          </ion-row>\n\n          <ng-container *ngIf=\"$filteredItems | async as items; else loadingTemplate\">\n            <!-- No item option -->\n            <mat-option *ngIf=\"items | isEmptyArray\" class=\"ion-padding text-italic\" disabled>\n              <ion-label>{{noResultMessage | translate}}</ion-label>\n            </mat-option>\n\n            <mat-option *ngFor=\"let item of items\" [value]=\"item\" class=\"ion-no-padding\">\n              <ion-row [classList]=\"item.classList\">\n                <ion-col *ngFor=\"let path of displayAttributes; index as i;\"\n                         [size]=\"displayColumnSizes[i]\">\n                  <ion-text [innerHTML]=\"item | propertyGet: path | highlight: { search: inputControl.value, withAccent: highlightAccent } \"></ion-text>\n                </ion-col>\n              </ion-row>\n            </mat-option>\n\n            <!-- More item -->\n            <mat-option *ngIf=\"_moreItemsCount\" (ngInit)=\"_initAutocompleteInfiniteScroll()\"\n                        class=\"ion-padding\" disabled>\n              <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n            </mat-option>\n          </ng-container>\n\n          <!-- footer -->\n          <ion-row *ngIf=\"itemCount as count\"\n                   class=\"mat-autocomplete-footer ion-no-padding\">\n            <ion-col>\n              <ion-text class=\"ion-float-end ion-padding-end\"><i>{{'COMMON.RESULT_COUNT'|translate: {count: count} }}</i></ion-text>\n            </ion-col>\n          </ion-row>\n\n          <!-- Loading spinner -->\n          <ng-template #loadingTemplate>\n            <mat-option *ngIf=\"(matInputText.value | strLength) >= suggestLengthThreshold; else waitMoreCharacterTemplate\"\n                        class=\"ion-padding\" disabled>\n              <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n            </mat-option>\n          </ng-template>\n\n          <!-- Need more characters -->\n          <ng-template #waitMoreCharacterTemplate>\n            <mat-option class=\"ion-padding text-italic\" disabled>\n              <ion-label>\n                {{'INFO.PLEASE_TYPE_MORE_CHARACTERS'|translate:{minLength: suggestLengthThreshold} }}\n              </ion-label>\n            </mat-option>\n          </ng-template>\n        </mat-autocomplete>\n\n        <div matSuffix class=\"mat-form-field-suffix-bottom\">\n          <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n        </div>\n\n        <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n        <ng-content select=\"[matError]\"></ng-content>\n\n      </mat-form-field>\n\n    </ion-col>\n    <ion-col size=\"auto\" class=\"ion-align-self-center\">\n      <ng-content select=\"[matAfter]\"></ng-content>\n    </ion-col>\n  </ion-row>\n</ion-grid>\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n\n\n<ng-template #matSuffixTemplate>\n  <button mat-icon-button tabindex=\"-1\"\n          type=\"button\"\n          (click)=\"dropButtonClick.emit($event)\"\n          [hidden]=\"disabled\">\n    <mat-icon class=\"large select-arrow\">arrow_drop_down</mat-icon>\n  </button>\n  <button mat-icon-button tabindex=\"-1\"\n          type=\"button\"\n          *ngIf=\"clearable\"\n          (click)=\"clearValue($event)\"\n          [hidden]=\"disabled || !formControl.value\">\n    <mat-icon>close</mat-icon>\n  </button>\n\n  <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n",
                     providers: [{
                             provide: i1.NG_VALUE_ACCESSOR,
                             multi: true,
                             useExisting: i0.forwardRef(function () { return MatChipsField; })
                         }],
-                    encapsulation: i0.ViewEncapsulation.None,
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [":host{width:100%;display:inline-block;position:relative}:host.ion-text-wrap ion-label{white-space:normal!important}button[hidden]{display:none}mat-icon.select-arrow{color:rgba(0,0,0,.47);font-size:150%}.mat-form-field-suffix{position:absolute!important;right:0!important;top:calc(100% - 50px)!important}.mat-chip.mat-standard-chip.mat-primary{background-color:var(--ion-color-primary);color:var(--ion-color-primary-contrast)}.mat-chip.mat-standard-chip.mat-secondary{background-color:var(--ion-color-secondary);color:var(--ion-color-secondary-contrast)}.mat-chip.mat-standard-chip.mat-tertiary{background-color:var(--ion-color-tertiary);color:var(--ion-color-tertiary-contrast)}.mat-chip.mat-standard-chip.mat-accent{background-color:var(--ion-color-accent);color:var(--ion-color-accent-contrast)}.mat-chip.mat-standard-chip.mat-warning{background-color:var(--ion-color-warning);color:var(--ion-color-warning-contrast)}"]
+                    styles: [":host{width:100%;display:inline-block;position:relative}:host.ion-text-wrap ion-label{white-space:normal!important}button[hidden]{display:none}.mat-standard-chip.mat-chip-with-trailing-icon{padding:0 7px 0 12px}mat-icon.select-arrow{color:rgba(0,0,0,.47);font-size:150%}.mat-chip.mat-standard-chip{margin:1px 0 0 2px!important;min-height:calc(32px - .5em - 1px)}.mat-chip.mat-standard-chip.mat-chip-with-trailing-icon{padding:0 7px 0 12px}.mat-chip.mat-standard-chip.mat-primary{background-color:var(--ion-color-primary);color:var(--ion-color-primary-contrast)}.mat-chip.mat-standard-chip.mat-secondary{background-color:var(--ion-color-secondary);color:var(--ion-color-secondary-contrast)}.mat-chip.mat-standard-chip.mat-tertiary{background-color:var(--ion-color-tertiary);color:var(--ion-color-tertiary-contrast)}.mat-chip.mat-standard-chip.mat-accent{background-color:var(--ion-color-accent);color:var(--ion-color-accent-contrast)}.mat-chip.mat-standard-chip.mat-warning{background-color:var(--ion-color-warning);color:var(--ion-color-warning-contrast)}.mat-form-field-appearance-legacy .mat-standard-chip{min-height:calc(32px - .4375em - 1px)}"]
                 },] }
     ];
     MatChipsField.ctorParameters = function () { return [
@@ -20461,6 +20470,104 @@
         autofocus: [{ type: i0.Input }]
     };
 
+    var ResizableDirective = /** @class */ (function () {
+        function ResizableDirective(document, elementRef) {
+            var _this = this;
+            this.document = document;
+            this.elementRef = elementRef;
+            this.resizable = rxjs.fromEvent(this.elementRef.nativeElement, 'mousedown').pipe(operators.tap(function (e) {
+                e.preventDefault();
+                e.stopPropagation();
+            }), operators.switchMap(function () {
+                var _a = _this.elementRef.nativeElement.closest('th').getBoundingClientRect(), width = _a.width, right = _a.right;
+                return rxjs.fromEvent(_this.document, 'mousemove').pipe(operators.map(function (_a) {
+                    var clientX = _a.clientX;
+                    return width + clientX - right;
+                }), operators.distinctUntilChanged(), operators.takeUntil(rxjs.fromEvent(_this.document, 'mouseup')));
+            }));
+            this.fit = rxjs.fromEvent(this.elementRef.nativeElement, 'click').pipe(operators.bufferWhen(function () { return rxjs.interval(500); }), operators.filter(function (ar) { return ar.length === 2; }));
+        }
+        return ResizableDirective;
+    }());
+    ResizableDirective.decorators = [
+        { type: i0.Directive, args: [{
+                    selector: '[resizable]',
+                },] }
+    ];
+    ResizableDirective.ctorParameters = function () { return [
+        { type: undefined, decorators: [{ type: i0.Inject, args: [i1$4.DOCUMENT,] }] },
+        { type: i0.ElementRef, decorators: [{ type: i0.Inject, args: [i0.ElementRef,] }] }
+    ]; };
+    ResizableDirective.propDecorators = {
+        resizable: [{ type: i0.Output }],
+        fit: [{ type: i0.Output }]
+    };
+
+    var ResizableComponent = /** @class */ (function () {
+        function ResizableComponent(columnDef) {
+            this.columnDef = columnDef;
+            this.sizeChanged = new i0.EventEmitter();
+            this.width = null;
+            this.minWidth = null;
+            this.maxWidth = null;
+            this.debug = false;
+        }
+        ResizableComponent.prototype.onResize = function (width, opts) {
+            if (!this.resizable)
+                return;
+            if (this.debug)
+                console.info("resize:" + width);
+            this.minWidth = width + 'px';
+            this.maxWidth = width + 'px';
+            if (!opts || opts.emitEvent) {
+                this.sizeChanged.emit(width);
+            }
+        };
+        ResizableComponent.prototype.onFit = function (opts) {
+            if (!this.resizable)
+                return;
+            if (this.debug)
+                console.info('fit');
+            this.width = 'auto';
+            this.minWidth = null;
+            this.maxWidth = null;
+            if (!opts || opts.emitEvent) {
+                this.sizeChanged.emit(undefined);
+            }
+        };
+        return ResizableComponent;
+    }());
+    ResizableComponent.decorators = [
+        { type: i0.Component, args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: 'th[resizable]',
+                    template: "<div class=\"wrapper\">\n  <div class=\"content\">\n    <ng-content></ng-content>\n  </div>\n  <div class=\"bar\" [class.cdk-visually-hidden]=\"!resizable\" (resizable)=\"onResize($event)\" (fit)=\"onFit()\"></div>\n</div>\n",
+                    styles: [":host:last-child .bar{display:none}.wrapper{display:flex;justify-content:flex-end;align-items:center}.content{flex:1}.bar{height:var(--app-table-header-height,55px);width:10px;justify-self:flex-end;border-left:4px solid transparent;border-right:4px solid transparent;background:var(--ion-color-secondary);background-clip:content-box;cursor:ew-resize;opacity:0;transition:opacity .3s}.bar:active,.bar:hover{opacity:1}:host-context(.mat-table-sticky) .bar{width:12px!important}"]
+                },] }
+    ];
+    ResizableComponent.ctorParameters = function () { return [
+        { type: table.MatColumnDef, decorators: [{ type: i0.Optional }] }
+    ]; };
+    ResizableComponent.propDecorators = {
+        resizable: [{ type: i0.Input }],
+        sizeChanged: [{ type: i0.Output }],
+        width: [{ type: i0.HostBinding, args: ['style.width',] }],
+        minWidth: [{ type: i0.HostBinding, args: ['style.min-width',] }],
+        maxWidth: [{ type: i0.HostBinding, args: ['style.max-width',] }]
+    };
+
+    var ResizableModule = /** @class */ (function () {
+        function ResizableModule() {
+        }
+        return ResizableModule;
+    }());
+    ResizableModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    declarations: [ResizableComponent, ResizableDirective],
+                    exports: [ResizableComponent, ResizableDirective],
+                },] }
+    ];
+
     function mergeLoadResult(res1, res2) {
         var _c;
         var _a, _b;
@@ -31347,6 +31454,7 @@
             this._items = deepCopy$1(FAKE_ENTITIES$1, 100);
             this._$items = new rxjs.BehaviorSubject(undefined);
             this.autocompleteFields = new MatAutocompleteConfigHolder();
+            this.appearance = 'legacy';
             this.form = formBuilder.group({
                 entity: [null, SharedValidators.entity],
                 entityInitial: [null, SharedValidators.entity],
@@ -31456,7 +31564,7 @@
     ChipsTestPage.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-chips-test',
-                    template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Chips field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n\n  <form class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n\n    <ion-grid>\n\n      <ion-row>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Suggest() function\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <pre><small>suggestFn: (searchText, filter) =&gt; any[]</small></pre>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-chips-field formControlName=\"entity\"\n                               [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                               [logPrefix]=\"'[mat-chips-empty] '\"\n                               chipColor=\"accent\"\n                               [debug]=\"false\"\n              ></mat-chips-field>\n              {{stringify(form.controls.entity.value)}}\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Suggest() function with initial value\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <pre><small>suggestFn: (searchText, filter) =&gt; any[]</small></pre>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-chips-field formControlName=\"entityInitial\"\n                               [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                               [logPrefix]=\"'[mat-chips-initialized] '\"\n                               chipColor=\"primary\"\n                               [debug]=\"true\"\n              ></mat-chips-field>\n              {{stringify(form.controls.entityInitial.value)}}\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Disabled control\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-chips-field formControlName=\"disableEntity\"\n                               [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                               [equals]=\"equals\"\n                               [logPrefix]=\"'[mat-chips-disabled] '\"\n                               chipColor=\"warning\"\n                               [debug]=\"true\"\n              ></mat-chips-field>\n              {{stringify(form.controls.disableEntity.value)}}\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Readonly control\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-chips-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[mat-chips-readonly] '\"\n                                      [readonly]=\"true\"\n              ></mat-chips-field>\n              {{stringify(form.controls.entity.value)}}\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n\n  </form>\n\n</ion-content>\n"
+                    template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Chips field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n\n  <form class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n\n    <ion-grid>\n\n      <ion-row>\n\n        <ion-col size=\"12\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Suggest() function\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <pre><small>suggestFn: (searchText, filter) =&gt; any[]</small></pre>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-chips-field formControlName=\"entity\"\n                                     placeholder=\"A chip field\" [appearance]=\"appearance\"\n                                     [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                                     [logPrefix]=\"'[mat-chips-empty] '\"\n                                     chipColor=\"accent\"\n                                     [debug]=\"false\"\n                    ></mat-chips-field>\n                  </ion-col>\n\n                  <ion-col>\n                    <mat-form-field [appearance]=\"appearance\">\n                      <mat-label>Another field</mat-label>\n                      <input matInput type=\"text\">\n                    </mat-form-field>\n                  </ion-col>\n                </ion-row>\n                <ion-row>\n                  <ion-col>\n                  {{stringify(form.controls.entity.value)}}\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Suggest() function with initial value\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <pre><small>suggestFn: (searchText, filter) =&gt; any[]</small></pre>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-chips-field formControlName=\"entityInitial\"\n                               [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                               [logPrefix]=\"'[mat-chips-initialized] '\"\n                               chipColor=\"primary\"\n                               [debug]=\"true\"\n              ></mat-chips-field>\n              {{stringify(form.controls.entityInitial.value)}}\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Disabled control\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-chips-field formControlName=\"disableEntity\"\n                               [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                               [equals]=\"equals\"\n                               [logPrefix]=\"'[mat-chips-disabled] '\"\n                               chipColor=\"warning\"\n                               [debug]=\"true\"\n              ></mat-chips-field>\n              {{stringify(form.controls.disableEntity.value)}}\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Readonly control\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-chips-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[mat-chips-readonly] '\"\n                                      [readonly]=\"true\"\n              ></mat-chips-field>\n              {{stringify(form.controls.entity.value)}}\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n\n  </form>\n\n</ion-content>\n"
                 },] }
     ];
     ChipsTestPage.ctorParameters = function () { return [
@@ -32590,6 +32698,9 @@
     exports.ReferentialUtils = ReferentialUtils;
     exports.ReferentialValidatorService = ReferentialValidatorService;
     exports.RegisterConfirmPage = RegisterConfirmPage;
+    exports.ResizableComponent = ResizableComponent;
+    exports.ResizableDirective = ResizableDirective;
+    exports.ResizableModule = ResizableModule;
     exports.SETTINGS_DISPLAY_COLUMNS = SETTINGS_DISPLAY_COLUMNS;
     exports.SETTINGS_FILTER = SETTINGS_FILTER;
     exports.SETTINGS_PAGE_SIZE = SETTINGS_PAGE_SIZE;