@sumaris-net/ngx-components 2.2.1-rc9 → 2.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/src/app/core/form/form.utils.mjs +30 -14
- package/esm2020/src/app/core/table/actions-column.component.mjs +3 -3
- package/esm2020/src/app/shared/forms.mjs +11 -5
- package/esm2020/src/app/social/user-event/user-event.service.mjs +6 -3
- package/fesm2015/sumaris-net.ngx-components.mjs +39 -20
- package/fesm2015/sumaris-net.ngx-components.mjs.map +1 -1
- package/fesm2020/sumaris-net.ngx-components.mjs +43 -18
- package/fesm2020/sumaris-net.ngx-components.mjs.map +1 -1
- package/package.json +1 -1
- package/src/app/core/form/form.utils.d.ts +5 -7
|
@@ -4175,7 +4175,7 @@ function disableControls(form, paths, opts) {
|
|
|
4175
4175
|
});
|
|
4176
4176
|
}
|
|
4177
4177
|
function addValueInArray(arrayControl, createControl, equals, isEmpty, value, options) {
|
|
4178
|
-
|
|
4178
|
+
const disabled = arrayControl.disabled;
|
|
4179
4179
|
let hasChanged = false;
|
|
4180
4180
|
let index = -1;
|
|
4181
4181
|
// Search if value already exists
|
|
@@ -4195,11 +4195,17 @@ function addValueInArray(arrayControl, createControl, equals, isEmpty, value, op
|
|
|
4195
4195
|
}
|
|
4196
4196
|
else {
|
|
4197
4197
|
const control = createControl(value);
|
|
4198
|
-
|
|
4198
|
+
// Apply parent disabled state, before to push it into the array
|
|
4199
|
+
// This is need to avoid parent form to be enabled
|
|
4200
|
+
if (disabled && control.enabled)
|
|
4201
|
+
control.disable({ emitEvent: false });
|
|
4202
|
+
else if (!disabled && control.disabled)
|
|
4203
|
+
control.enable({ emitEvent: false });
|
|
4204
|
+
arrayControl.push(control, options);
|
|
4199
4205
|
hasChanged = true;
|
|
4200
4206
|
}
|
|
4201
4207
|
if (hasChanged) {
|
|
4202
|
-
if (
|
|
4208
|
+
if (!options || options.emitEvent !== false) {
|
|
4203
4209
|
// Mark array control dirty
|
|
4204
4210
|
if (!isEmpty(value)) {
|
|
4205
4211
|
arrayControl.markAsDirty();
|
|
@@ -4611,11 +4617,15 @@ class AppFormArray extends UntypedFormArray {
|
|
|
4611
4617
|
this.createControl = createControl;
|
|
4612
4618
|
this.equals = equals;
|
|
4613
4619
|
this.isEmpty = isEmpty;
|
|
4614
|
-
this.options =
|
|
4615
|
-
|
|
4620
|
+
this.options = {
|
|
4621
|
+
allowEmptyArray: true,
|
|
4622
|
+
allowReuseControls: true,
|
|
4623
|
+
...options
|
|
4624
|
+
};
|
|
4625
|
+
this.setAllowEmptyArray(this.options.allowEmptyArray);
|
|
4616
4626
|
}
|
|
4617
4627
|
get allowEmptyArray() {
|
|
4618
|
-
return this.
|
|
4628
|
+
return this.options.allowEmptyArray;
|
|
4619
4629
|
}
|
|
4620
4630
|
set allowEmptyArray(value) {
|
|
4621
4631
|
this.setAllowEmptyArray(value);
|
|
@@ -4626,16 +4636,29 @@ class AppFormArray extends UntypedFormArray {
|
|
|
4626
4636
|
* @param options
|
|
4627
4637
|
*/
|
|
4628
4638
|
setValue(values, options) {
|
|
4629
|
-
if (this.options
|
|
4630
|
-
|
|
4639
|
+
if (this.options.allowReuseControls === false) {
|
|
4640
|
+
const disabled = this.disabled;
|
|
4641
|
+
// Clean all
|
|
4642
|
+
this.resize(0, { emitEvent: options?.emitEvent });
|
|
4643
|
+
// Recreate each control, with a default value
|
|
4644
|
+
(values || []).forEach(value => {
|
|
4645
|
+
const control = this.createControl(value);
|
|
4646
|
+
// Apply parent disabled state, before to push it into the array
|
|
4647
|
+
// This is need to avoid parent form to be enabled, after calling AppFormArray.patchValue() (e.g. in table's row validator)
|
|
4648
|
+
if (disabled && control.enabled)
|
|
4649
|
+
control.disable({ emitEvent: false });
|
|
4650
|
+
else if (!disabled && control.disabled)
|
|
4651
|
+
control.enable({ emitEvent: false });
|
|
4652
|
+
this.push(control, options);
|
|
4653
|
+
});
|
|
4631
4654
|
}
|
|
4632
4655
|
else {
|
|
4633
|
-
this.resize(values?.length || 0);
|
|
4656
|
+
this.resize(values?.length || 0, { emitEvent: false });
|
|
4634
4657
|
super.setValue(values, options);
|
|
4635
4658
|
}
|
|
4636
4659
|
}
|
|
4637
4660
|
patchValue(values, options) {
|
|
4638
|
-
if (this.options
|
|
4661
|
+
if (this.options.allowReuseControls === false) {
|
|
4639
4662
|
const disabled = this.disabled;
|
|
4640
4663
|
// Clean all
|
|
4641
4664
|
this.resize(0, { emitEvent: options?.emitEvent });
|
|
@@ -4695,14 +4718,13 @@ class AppFormArray extends UntypedFormArray {
|
|
|
4695
4718
|
/**
|
|
4696
4719
|
* @param value
|
|
4697
4720
|
* @param options
|
|
4698
|
-
* @deprecated Use push() instead
|
|
4699
4721
|
*/
|
|
4700
4722
|
add(value, options) {
|
|
4701
4723
|
addValueInArray(this, this.createControl, this.equals, this.isEmpty, value, options);
|
|
4702
4724
|
}
|
|
4703
4725
|
removeAt(index, options) {
|
|
4704
4726
|
// Do not remove if last criterion
|
|
4705
|
-
if (
|
|
4727
|
+
if (this.options.allowEmptyArray === false && this.length === 1) {
|
|
4706
4728
|
this.clearAt(index, options);
|
|
4707
4729
|
}
|
|
4708
4730
|
else {
|
|
@@ -4736,11 +4758,11 @@ class AppFormArray extends UntypedFormArray {
|
|
|
4736
4758
|
}
|
|
4737
4759
|
/* -- internal -- */
|
|
4738
4760
|
setAllowEmptyArray(value) {
|
|
4739
|
-
if (this.
|
|
4761
|
+
if (this.options.allowEmptyArray === value)
|
|
4740
4762
|
return; // Skip if same
|
|
4741
|
-
this.
|
|
4763
|
+
this.options.allowEmptyArray = value;
|
|
4742
4764
|
// Set required (or reste) min length validator
|
|
4743
|
-
if (this.
|
|
4765
|
+
if (this.options.allowEmptyArray) {
|
|
4744
4766
|
this.setValidators(this.options.validators || null);
|
|
4745
4767
|
}
|
|
4746
4768
|
else {
|
|
@@ -23936,10 +23958,10 @@ class ActionsColumnComponent {
|
|
|
23936
23958
|
}
|
|
23937
23959
|
}
|
|
23938
23960
|
ActionsColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: ActionsColumnComponent, deps: [{ token: i1$6.MatTable }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
23939
|
-
ActionsColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: ActionsColumnComponent, selector: "app-actions-column", inputs: { stickyEnd: "stickyEnd", canCancel: "canCancel", canDelete: "canDelete", canBackward: "canBackward", canForward: "canForward", canConfirmAndAdd: "canConfirmAndAdd", dirtyIcon: "dirtyIcon", optionsTitle: "optionsTitle", classList: ["class", "classList"], cellTemplate: "cellTemplate" }, outputs: { optionsClick: "optionsClick", cancelOrDeleteClick: "cancelOrDeleteClick", confirmAndAddClick: "confirmAndAddClick", backward: "backward", forward: "forward" }, viewQueries: [{ propertyName: "columnDef", first: true, predicate: MatColumnDef, descendants: true }, { propertyName: "matMenuTrigger", first: true, predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "<ng-container matColumnDef=\"actions\" [stickyEnd]=\"stickyEnd\">\n <th mat-header-cell *matHeaderCellDef [class]=\"classList\" [class.mat-column-sticky]=\"stickyEnd\">\n <button mat-icon-button\n *ngIf=\"optionsClick.observers | isNotEmptyArray\"\n [title]=\"optionsTitle | translate\"\n (click)=\"optionsClick.emit($event)\">\n <mat-icon>more_vert</mat-icon>\n </button>\n <ng-content select=\"[matHeader]\"></ng-content>\n </th>\n <td mat-cell *matCellDef=\"let row\" [class]=\"classList\">\n <ng-container *ngIf=\"row.editing; else view\">\n\n <!-- pending -->\n <ion-spinner *ngIf=\"row.validator?.pending\" name=\"dots\" class=\"center\"></ion-spinner>\n\n <!-- new row -->\n <ng-container *ngIf=\"row.id === -1; else existingRow\">\n\n <!-- delete button -->\n <button mat-icon-button color=\"light\"\n *ngIf=\"canDelete && row.validator.invalid\"\n [title]=\"'COMMON.BTN_DELETE' | translate\"\n (click)=\"cancelOrDeleteClick.emit({event: $event, row: row})\">\n <mat-icon>delete_outline</mat-icon>\n </button>\n\n <!-- add button -->\n <button mat-icon-button color=\"light\"\n *ngIf=\"!canForward && canConfirmAndAdd && row.validator.valid\"\n [title]=\"'COMMON.BTN_ADD'|translate\"\n (click)=\"confirmAndAddClick.emit({event: $event, row: row})\">\n <mat-icon>add</mat-icon>\n </button>\n\n <!-- next button (invisible - focusable only) -->\n <button style=\"color: transparent;
|
|
23961
|
+
ActionsColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: ActionsColumnComponent, selector: "app-actions-column", inputs: { stickyEnd: "stickyEnd", canCancel: "canCancel", canDelete: "canDelete", canBackward: "canBackward", canForward: "canForward", canConfirmAndAdd: "canConfirmAndAdd", dirtyIcon: "dirtyIcon", optionsTitle: "optionsTitle", classList: ["class", "classList"], cellTemplate: "cellTemplate" }, outputs: { optionsClick: "optionsClick", cancelOrDeleteClick: "cancelOrDeleteClick", confirmAndAddClick: "confirmAndAddClick", backward: "backward", forward: "forward" }, viewQueries: [{ propertyName: "columnDef", first: true, predicate: MatColumnDef, descendants: true }, { propertyName: "matMenuTrigger", first: true, predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "<ng-container matColumnDef=\"actions\" [stickyEnd]=\"stickyEnd\">\n <th mat-header-cell *matHeaderCellDef [class]=\"classList\" [class.mat-column-sticky]=\"stickyEnd\">\n <button mat-icon-button\n *ngIf=\"optionsClick.observers | isNotEmptyArray\"\n [title]=\"optionsTitle | translate\"\n (click)=\"optionsClick.emit($event)\">\n <mat-icon>more_vert</mat-icon>\n </button>\n <ng-content select=\"[matHeader]\"></ng-content>\n </th>\n <td mat-cell *matCellDef=\"let row\" [class]=\"classList\">\n <ng-container *ngIf=\"row.editing; else view\">\n\n <!-- pending -->\n <ion-spinner *ngIf=\"row.validator?.pending\" name=\"dots\" class=\"center\"></ion-spinner>\n\n <!-- new row -->\n <ng-container *ngIf=\"row.id === -1; else existingRow\">\n\n <!-- delete button -->\n <button mat-icon-button color=\"light\"\n *ngIf=\"canDelete && row.validator.invalid\"\n [title]=\"'COMMON.BTN_DELETE' | translate\"\n (click)=\"cancelOrDeleteClick.emit({event: $event, row: row})\">\n <mat-icon>delete_outline</mat-icon>\n </button>\n\n <!-- add button -->\n <button mat-icon-button color=\"light\"\n *ngIf=\"!canForward && canConfirmAndAdd && row.validator.valid\"\n [title]=\"'COMMON.BTN_ADD'|translate\"\n (click)=\"confirmAndAddClick.emit({event: $event, row: row})\">\n <mat-icon>add</mat-icon>\n </button>\n\n <!-- next button (invisible - focusable only) -->\n <button class=\"mat-row-action-button\"\n style=\"color: transparent; position: absolute; top: 0; margin: 0; padding: 0; width: 0;\"\n *ngIf=\"canForward && row.validator.valid\"\n (focus)=\"this.forward.emit({event: $event, row: row})\">\n </button>\n </ng-container>\n\n <!-- existing row -->\n <ng-template #existingRow>\n <!-- cancel button -->\n <button mat-icon-button color=\"light\"\n *ngIf=\"canCancel && row.validator.dirty\"\n [title]=\"'COMMON.BTN_UNDO' | translate\"\n (click)=\"cancelOrDeleteClick.emit({event: $event, row: row})\">\n <mat-icon>undo</mat-icon>\n </button>\n\n <!-- next button (invisible - focusable only) -->\n <button class=\"mat-row-action-button\"\n style=\"color: transparent; position: absolute; top: 0; margin: 0; padding: 0; width: 0;\"\n *ngIf=\"canForward && row.validator.valid\"\n (focus)=\"this.forward.emit({event: $event, row: row})\">\n </button>\n </ng-template>\n\n </ng-container>\n\n <ng-template #view>\n <!-- dirty icon -->\n <ion-icon *ngIf=\"dirtyIcon && row.validator?.dirty\" [name]=\"dirtyIcon\" color=\"accent\" class=\"dirty-icon\"></ion-icon>\n\n <!-- backward button (invisible - focusable only) -->\n <button mat-icon-button class=\"mat-row-action-button\"\n style=\"color: transparent; position: absolute; top: 0; margin: 0; padding: 0; width: 0;\"\n *ngIf=\"canBackward\"\n (focus)=\"this.backward.emit({event: $event, row: row})\">\n </button>\n </ng-template>\n\n <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: row }\"></ng-container>\n </td>\n\n <td mat-footer-cell *matFooterCellDef>\n <ng-content select=\"[matFooter]\"></ng-content>\n </td>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "directive", type: i1$6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$6.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i1$6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$6.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i1$6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i1$6.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: NotEmptyArrayPipe, name: "isNotEmptyArray" }] });
|
|
23940
23962
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: ActionsColumnComponent, decorators: [{
|
|
23941
23963
|
type: Component,
|
|
23942
|
-
args: [{ selector: 'app-actions-column', template: "<ng-container matColumnDef=\"actions\" [stickyEnd]=\"stickyEnd\">\n <th mat-header-cell *matHeaderCellDef [class]=\"classList\" [class.mat-column-sticky]=\"stickyEnd\">\n <button mat-icon-button\n *ngIf=\"optionsClick.observers | isNotEmptyArray\"\n [title]=\"optionsTitle | translate\"\n (click)=\"optionsClick.emit($event)\">\n <mat-icon>more_vert</mat-icon>\n </button>\n <ng-content select=\"[matHeader]\"></ng-content>\n </th>\n <td mat-cell *matCellDef=\"let row\" [class]=\"classList\">\n <ng-container *ngIf=\"row.editing; else view\">\n\n <!-- pending -->\n <ion-spinner *ngIf=\"row.validator?.pending\" name=\"dots\" class=\"center\"></ion-spinner>\n\n <!-- new row -->\n <ng-container *ngIf=\"row.id === -1; else existingRow\">\n\n <!-- delete button -->\n <button mat-icon-button color=\"light\"\n *ngIf=\"canDelete && row.validator.invalid\"\n [title]=\"'COMMON.BTN_DELETE' | translate\"\n (click)=\"cancelOrDeleteClick.emit({event: $event, row: row})\">\n <mat-icon>delete_outline</mat-icon>\n </button>\n\n <!-- add button -->\n <button mat-icon-button color=\"light\"\n *ngIf=\"!canForward && canConfirmAndAdd && row.validator.valid\"\n [title]=\"'COMMON.BTN_ADD'|translate\"\n (click)=\"confirmAndAddClick.emit({event: $event, row: row})\">\n <mat-icon>add</mat-icon>\n </button>\n\n <!-- next button (invisible - focusable only) -->\n <button style=\"color: transparent;
|
|
23964
|
+
args: [{ selector: 'app-actions-column', template: "<ng-container matColumnDef=\"actions\" [stickyEnd]=\"stickyEnd\">\n <th mat-header-cell *matHeaderCellDef [class]=\"classList\" [class.mat-column-sticky]=\"stickyEnd\">\n <button mat-icon-button\n *ngIf=\"optionsClick.observers | isNotEmptyArray\"\n [title]=\"optionsTitle | translate\"\n (click)=\"optionsClick.emit($event)\">\n <mat-icon>more_vert</mat-icon>\n </button>\n <ng-content select=\"[matHeader]\"></ng-content>\n </th>\n <td mat-cell *matCellDef=\"let row\" [class]=\"classList\">\n <ng-container *ngIf=\"row.editing; else view\">\n\n <!-- pending -->\n <ion-spinner *ngIf=\"row.validator?.pending\" name=\"dots\" class=\"center\"></ion-spinner>\n\n <!-- new row -->\n <ng-container *ngIf=\"row.id === -1; else existingRow\">\n\n <!-- delete button -->\n <button mat-icon-button color=\"light\"\n *ngIf=\"canDelete && row.validator.invalid\"\n [title]=\"'COMMON.BTN_DELETE' | translate\"\n (click)=\"cancelOrDeleteClick.emit({event: $event, row: row})\">\n <mat-icon>delete_outline</mat-icon>\n </button>\n\n <!-- add button -->\n <button mat-icon-button color=\"light\"\n *ngIf=\"!canForward && canConfirmAndAdd && row.validator.valid\"\n [title]=\"'COMMON.BTN_ADD'|translate\"\n (click)=\"confirmAndAddClick.emit({event: $event, row: row})\">\n <mat-icon>add</mat-icon>\n </button>\n\n <!-- next button (invisible - focusable only) -->\n <button class=\"mat-row-action-button\"\n style=\"color: transparent; position: absolute; top: 0; margin: 0; padding: 0; width: 0;\"\n *ngIf=\"canForward && row.validator.valid\"\n (focus)=\"this.forward.emit({event: $event, row: row})\">\n </button>\n </ng-container>\n\n <!-- existing row -->\n <ng-template #existingRow>\n <!-- cancel button -->\n <button mat-icon-button color=\"light\"\n *ngIf=\"canCancel && row.validator.dirty\"\n [title]=\"'COMMON.BTN_UNDO' | translate\"\n (click)=\"cancelOrDeleteClick.emit({event: $event, row: row})\">\n <mat-icon>undo</mat-icon>\n </button>\n\n <!-- next button (invisible - focusable only) -->\n <button class=\"mat-row-action-button\"\n style=\"color: transparent; position: absolute; top: 0; margin: 0; padding: 0; width: 0;\"\n *ngIf=\"canForward && row.validator.valid\"\n (focus)=\"this.forward.emit({event: $event, row: row})\">\n </button>\n </ng-template>\n\n </ng-container>\n\n <ng-template #view>\n <!-- dirty icon -->\n <ion-icon *ngIf=\"dirtyIcon && row.validator?.dirty\" [name]=\"dirtyIcon\" color=\"accent\" class=\"dirty-icon\"></ion-icon>\n\n <!-- backward button (invisible - focusable only) -->\n <button mat-icon-button class=\"mat-row-action-button\"\n style=\"color: transparent; position: absolute; top: 0; margin: 0; padding: 0; width: 0;\"\n *ngIf=\"canBackward\"\n (focus)=\"this.backward.emit({event: $event, row: row})\">\n </button>\n </ng-template>\n\n <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: row }\"></ng-container>\n </td>\n\n <td mat-footer-cell *matFooterCellDef>\n <ng-content select=\"[matFooter]\"></ng-content>\n </td>\n</ng-container>\n" }]
|
|
23943
23965
|
}], ctorParameters: function () { return [{ type: i1$6.MatTable }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { columnDef: [{
|
|
23944
23966
|
type: ViewChild,
|
|
23945
23967
|
args: [MatColumnDef]
|
|
@@ -28787,7 +28809,7 @@ class AbstractUserEventService extends BaseGraphqlService {
|
|
|
28787
28809
|
}
|
|
28788
28810
|
async ngOnStart() {
|
|
28789
28811
|
// Update component when refresh is need (=login events)
|
|
28790
|
-
this._subscriptions.add(merge(this.accountService.onLogin, this.accountService.onLogout,
|
|
28812
|
+
this._subscriptions.add(merge(this.accountService.onLogin, this.accountService.onLogout, timer(1000) // Starts with - first attempt if account is ready
|
|
28791
28813
|
)
|
|
28792
28814
|
.pipe(
|
|
28793
28815
|
// Wait account service ready (can be restarted)
|
|
@@ -29140,6 +29162,9 @@ class AbstractUserEventService extends BaseGraphqlService {
|
|
|
29140
29162
|
this.startListenCountChanges();
|
|
29141
29163
|
}
|
|
29142
29164
|
onLogout() {
|
|
29165
|
+
// Reset counter
|
|
29166
|
+
this._countSubject.next(0);
|
|
29167
|
+
// Stop listening
|
|
29143
29168
|
this.stopListenCountChanges();
|
|
29144
29169
|
}
|
|
29145
29170
|
startListenCountChanges() {
|