@igo2/common
Version:
162 lines (155 loc) • 13.1 kB
JavaScript
import { NgIf, NgFor, AsyncPipe } from '@angular/common';
import * as i0 from '@angular/core';
import { Optional, Inject, Component, Injectable, NgModule } from '@angular/core';
import * as i1 from '@angular/forms';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import * as i6 from '@angular/material/button';
import { MatButtonModule } from '@angular/material/button';
import * as i4 from '@angular/material/checkbox';
import { MatCheckboxModule } from '@angular/material/checkbox';
import * as i3 from '@angular/material/dialog';
import { MAT_DIALOG_DATA, MatDialogTitle, MatDialogActions } from '@angular/material/dialog';
import * as i5 from '@angular/material/radio';
import { MatRadioModule } from '@angular/material/radio';
import * as i2 from '@igo2/core/language';
import { IgoLanguageModule } from '@igo2/core/language';
import { BehaviorSubject } from 'rxjs';
import * as i7 from '@ngx-translate/core';
var SelectValueDialogType;
(function (SelectValueDialogType) {
SelectValueDialogType["Radio"] = "radio";
SelectValueDialogType["Checkbox"] = "checkbox";
})(SelectValueDialogType || (SelectValueDialogType = {}));
class SelectValueCheckRadioDialogComponent {
formBuilder;
languageService;
dialogRef;
data;
formGroup;
isDisabled$ = new BehaviorSubject(true);
constructor(formBuilder, languageService, dialogRef, data) {
this.formBuilder = formBuilder;
this.languageService = languageService;
this.dialogRef = dialogRef;
this.data = data;
this.formGroup = this.formBuilder.group(this.getFg());
this.data.selectFieldText =
this.data.selectFieldText ??
'igo.common.selectValueDialog.selectFieldText';
this.data.processButtonText =
this.data.processButtonText ??
'igo.common.selectValueDialog.processButtonText';
this.data.cancelButtonText =
this.data.cancelButtonText ??
'igo.common.selectValueDialog.cancelButtonText';
this.data.title =
this.data.title ?? 'igo.common.selectValueDialog.multipleTitle';
if (this.data.type === SelectValueDialogType.Radio) {
this.data.title = 'igo.common.selectValueDialog.title';
}
}
ngOnInit() {
this.formGroup.valueChanges.subscribe(() => this.canProcess());
}
getFg() {
const a = {};
this.data.choices.map((l) => (a[l.value] = false));
return a;
}
canProcess() {
const choices = this.data.choices.map((l) => l.value);
const selectedIds = [];
choices.map((l) => this.formGroup.value[l] ? selectedIds.push(l) : undefined);
selectedIds.length
? this.isDisabled$.next(false)
: this.isDisabled$.next(true);
}
save() {
const choices = this.data.choices.map((l) => l.value);
const selectedChoices = [];
choices.map((l) => this.formGroup.value[l] ? selectedChoices.push(l) : undefined);
this.dialogRef.close({ choices: selectedChoices });
}
cancel() {
this.dialogRef.close();
}
onChange(e) {
const choices = {};
this.data.choices.map((l) => (choices[l.value] = false));
choices[e.value] = true;
this.formGroup.setValue(choices);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SelectValueCheckRadioDialogComponent, deps: [{ token: i1.UntypedFormBuilder }, { token: i2.LanguageService }, { token: i3.MatDialogRef }, { token: MAT_DIALOG_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: SelectValueCheckRadioDialogComponent, isStandalone: true, selector: "igo-select-value-check-radio-dialog", ngImport: i0, template: "<h1 mat-dialog-title>{{ data.title | translate }}</h1>\n\n<form class=\"igo-form\" [formGroup]=\"formGroup\">\n <section class=\"choices-section\">\n <ng-template\n *ngIf=\"data.type === 'checkbox'\"\n ngFor\n let-choice\n let-i=\"index\"\n [ngForOf]=\"data.choices\"\n >\n <mat-checkbox formControlName=\"{{ choice.value }}\">{{\n choice.title || choice.value\n }}</mat-checkbox>\n </ng-template>\n\n <mat-radio-group *ngIf=\"data.type === 'radio'\" (change)=\"onChange($event)\">\n <mat-radio-button\n *ngFor=\"let choice of data.choices\"\n [value]=\"choice.value\"\n >\n {{ choice.title || choice.value }}\n </mat-radio-button>\n </mat-radio-group>\n </section>\n <div mat-dialog-actions>\n <div class=\"button-group\">\n <button mat-raised-button type=\"button\" (click)=\"cancel()\">\n {{ data.cancelButtonText | translate }}\n </button>\n <button\n [disabled]=\"isDisabled$ | async\"\n id=\"processBtnDialog\"\n mat-raised-button\n type=\"button\"\n color=\"primary\"\n (click)=\"save()\"\n >\n {{ data.processButtonText | translate }}\n </button>\n </div>\n </div>\n</form>\n", styles: [":host::ng-deep div[mat-dialog-actions]{margin:10px 0 0}:host::ng-deep section.choices-section{max-width:auto;display:grid;grid-template-columns:auto auto;grid-gap:0px;padding:5px}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i4.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i5.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i5.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SelectValueCheckRadioDialogComponent, decorators: [{
type: Component,
args: [{ selector: 'igo-select-value-check-radio-dialog', imports: [
MatDialogTitle,
FormsModule,
ReactiveFormsModule,
NgIf,
NgFor,
MatCheckboxModule,
MatRadioModule,
MatDialogActions,
MatButtonModule,
AsyncPipe,
IgoLanguageModule
], template: "<h1 mat-dialog-title>{{ data.title | translate }}</h1>\n\n<form class=\"igo-form\" [formGroup]=\"formGroup\">\n <section class=\"choices-section\">\n <ng-template\n *ngIf=\"data.type === 'checkbox'\"\n ngFor\n let-choice\n let-i=\"index\"\n [ngForOf]=\"data.choices\"\n >\n <mat-checkbox formControlName=\"{{ choice.value }}\">{{\n choice.title || choice.value\n }}</mat-checkbox>\n </ng-template>\n\n <mat-radio-group *ngIf=\"data.type === 'radio'\" (change)=\"onChange($event)\">\n <mat-radio-button\n *ngFor=\"let choice of data.choices\"\n [value]=\"choice.value\"\n >\n {{ choice.title || choice.value }}\n </mat-radio-button>\n </mat-radio-group>\n </section>\n <div mat-dialog-actions>\n <div class=\"button-group\">\n <button mat-raised-button type=\"button\" (click)=\"cancel()\">\n {{ data.cancelButtonText | translate }}\n </button>\n <button\n [disabled]=\"isDisabled$ | async\"\n id=\"processBtnDialog\"\n mat-raised-button\n type=\"button\"\n color=\"primary\"\n (click)=\"save()\"\n >\n {{ data.processButtonText | translate }}\n </button>\n </div>\n </div>\n</form>\n", styles: [":host::ng-deep div[mat-dialog-actions]{margin:10px 0 0}:host::ng-deep section.choices-section{max-width:auto;display:grid;grid-template-columns:auto auto;grid-gap:0px;padding:5px}\n"] }]
}], ctorParameters: () => [{ type: i1.UntypedFormBuilder }, { type: i2.LanguageService }, { type: i3.MatDialogRef }, { type: undefined, decorators: [{
type: Optional
}, {
type: Inject,
args: [MAT_DIALOG_DATA]
}] }] });
class SelectValueDialogService {
dialog;
constructor(dialog) {
this.dialog = dialog;
}
open(choices, options) {
const data = {
choices,
...options
};
const dialogRef = this.dialog.open(SelectValueCheckRadioDialogComponent, {
disableClose: false,
data,
...options
});
return dialogRef.afterClosed();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SelectValueDialogService, deps: [{ token: i3.MatDialog }], target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SelectValueDialogService });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SelectValueDialogService, decorators: [{
type: Injectable
}], ctorParameters: () => [{ type: i3.MatDialog }] });
class IgoSelectValueDialogModule {
/**
* @deprecated it has no effect
*/
static forRoot() {
return {
ngModule: IgoSelectValueDialogModule,
providers: []
};
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: IgoSelectValueDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: IgoSelectValueDialogModule, imports: [SelectValueCheckRadioDialogComponent], exports: [SelectValueCheckRadioDialogComponent] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: IgoSelectValueDialogModule, providers: [SelectValueDialogService], imports: [SelectValueCheckRadioDialogComponent] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: IgoSelectValueDialogModule, decorators: [{
type: NgModule,
args: [{
imports: [SelectValueCheckRadioDialogComponent],
exports: [SelectValueCheckRadioDialogComponent],
providers: [SelectValueDialogService]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { IgoSelectValueDialogModule, SelectValueCheckRadioDialogComponent, SelectValueDialogService, SelectValueDialogType };
//# sourceMappingURL=igo2-common-select-value-dialog.mjs.map