UNPKG

@asoftwareworld/form-builder-pro

Version:

ASW Form Builder Pro helps you with rapid development and designed web forms which includes several controls. The key feature of Form Builder is to make your content attractive and effective. We can customize our control at run time and preview the same b

310 lines (304 loc) 27.4 kB
import * as i0 from '@angular/core'; import { EventEmitter, Output, Input, Component, NgModule } from '@angular/core'; import { CSSFrameworkEnum } from '@asoftwareworld/form-builder-pro/api'; import * as i2 from '@asoftwareworld/form-builder-pro/common'; import { Constants, Icons, MaterialModule, AswPipeModule } from '@asoftwareworld/form-builder-pro/common'; import { AswConfirmDialog, AswConfirmDialogModule } from '@asoftwareworld/form-builder-pro/form-control/confirm-dialog'; import { AswMultiSelectDialog, AswSharedDialogModule } from '@asoftwareworld/form-builder-pro/form-control/shared'; import { ReplaySubject, Subject, take, takeUntil } from 'rxjs'; import * as i1 from '@angular/material/dialog'; import * as i3 from '@angular/common'; import { CommonModule } from '@angular/common'; import * as i4 from '@angular/forms'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import * as i5 from '@angular/material/core'; import * as i6 from '@angular/material/button'; import * as i7 from '@angular/material/form-field'; import * as i8 from '@angular/material/select'; import * as i9 from '@angular/material/tooltip'; import * as i10 from '@asoftwareworld/form-builder-pro/form-control/select-search'; import { AswSelectSearchModule } from '@asoftwareworld/form-builder-pro/form-control/select-search'; import * as i11 from '@asoftwareworld/form-builder-pro/core'; import { AswTranslateModule } from '@asoftwareworld/form-builder-pro/core'; /** * @license * Copyright ASW (A Software World) All Rights Reserved. * * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file */ class AswMultiSelect { dialog; aswApiService; constants = Constants; icons = Icons; filterValue; filteredOptions = new ReplaySubject(1); /** * MultiSelect control */ control; propertyPersonalization = []; isPreviewTemplate = false; CSSFramework = CSSFrameworkEnum.Material; formControls = []; multiSelectUpdateEvent = new EventEmitter(); multiSelectDeleteEvent = new EventEmitter(); selectionChange = new EventEmitter(); duplicateControl = new EventEmitter(); _onDestroy = new Subject(); /** local copy of filtered options to help set the toggle all checkbox state */ filteredOptionsCache = []; /** flags to set the toggle all checkbox state */ isIndeterminate = false; isChecked = false; constructor(dialog, aswApiService) { this.dialog = dialog; this.aswApiService = aswApiService; } ngOnInit() { if (this.control?.apiUrl) { this.callApiToFetchData(this.control); } else { this.filteredOptions.next(this.control.options.slice()); this.filteredOptionsCache = this.control.options.slice(); } } callApiToFetchData(control) { switch (control.method) { case 'GET': { this.aswApiService.get(control.apiUrl, control.headers).subscribe({ next: (data) => { if (data?.value) { this.setControlOptions(data.value); } else { this.setControlOptions(data); } } }); break; } case 'POST': { this.aswApiService.post(control.apiUrl, control.body, control.headers).subscribe({ next: (data) => { if (data?.value) { this.setControlOptions(data.value); } else { this.setControlOptions(data); } } }); break; } case 'PUT': { this.aswApiService.put(control.apiUrl, control.body, control.headers).subscribe({ next: (data) => { if (data?.value) { this.setControlOptions(data.value); } else { this.setControlOptions(data); } } }); break; } case 'PATCH': { this.aswApiService.patch(control.apiUrl, control.body, control.headers).subscribe({ next: (data) => { if (data?.value) { this.setControlOptions(data.value); } else { this.setControlOptions(data); } } }); break; } case 'DELETE': { this.aswApiService.delete(control.apiUrl, control.headers).subscribe({ next: (data) => { if (data?.value) { this.setControlOptions(data.value); } else { this.setControlOptions(data); } } }); break; } } } setControlOptions(options) { this.control.options = options; this.filteredOptions.next(this.control.options.slice()); this.filteredOptionsCache = this.control.options.slice(); } deleteMultiSelectDialog(control) { const dialogRef = this.dialog.open(AswConfirmDialog, { width: '350px', data: { name: control.controlType, message: this.constants.messages.waringMessage } }); dialogRef.afterClosed().subscribe((result) => { if (result !== undefined) { this.multiSelectDeleteEvent.emit(control); } }); } editMultiSelectDialog(control, formControls) { let allControls = []; this.getAllExceptCurrentControl(formControls, allControls); allControls = [...new Set(allControls.map((control) => control))]; control.options.forEach((element) => { element.isChecked = control.value.includes(element.key) ? true : false; if (!element.hideControl) { element.hideControl = []; } }); const dialogRef = this.dialog.open(AswMultiSelectDialog, { width: '80%', minWidth: '70vw', disableClose: true, data: { control, CSSFramework: this.CSSFramework, propertyPersonalization: this.propertyPersonalization, allControls } }); dialogRef.afterClosed().subscribe((result) => { if (result !== undefined) { this.multiSelectUpdateEvent.emit(result); } }); } onSelectionChange(control) { control.options.forEach((element) => { element.isChecked = control.value.includes(element.key) ? true : false; }); this.selectionChange.emit(control); this.setToggleAllCheckboxState(control); } duplicateMultiSelectControl(control) { this.duplicateControl.emit(control); } toggleSelectAll(selectAllValue, control) { this.filteredOptions.pipe(take(1), takeUntil(this._onDestroy)).subscribe((val) => { if (selectAllValue) { control.value = val.map((x) => x.key); } else { control.value = []; } }); } filter(control) { if (!control.options) { return; } let search = this.filterValue; if (!search) { this.filteredOptionsCache = control.options.slice(); this.filteredOptions.next(this.filteredOptionsCache); this.setToggleAllCheckboxState(control); return; } else { search = search.toLowerCase(); } // filter the options this.filteredOptionsCache = control.options.filter((option) => option.value.toLowerCase().indexOf(search) > -1); this.filteredOptions.next(this.filteredOptionsCache); this.setToggleAllCheckboxState(control); } setToggleAllCheckboxState(control) { let filteredLength = 0; if (control && control.value) { this.filteredOptionsCache.forEach((el) => { if (control.value.indexOf(el.key) > -1) { filteredLength++; } }); this.isIndeterminate = filteredLength > 0 && filteredLength < this.filteredOptionsCache.length; this.isChecked = filteredLength > 0 && filteredLength === this.filteredOptionsCache.length; } } getAllExceptCurrentControl(formControls, allControls) { //allControls.push(...formControls.filter((x) => x.id !== this.control.id)); const columnsControls = formControls.filter((x) => x.controlType === 'columns'); if (columnsControls.length) { columnsControls.forEach((control) => { let isSelectedControl = false; control.columns.forEach((column) => { column.components.forEach((component) => { if (component.controlType === 'columns') { this.getAllExceptCurrentControl(column.components, allControls); } if (component.id === this.control.id) { isSelectedControl = true; } }); }); if (!isSelectedControl) { allControls.push(control); } }); } } static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AswMultiSelect, deps: [{ token: i1.MatDialog }, { token: i2.AswApiService }], target: i0.ɵɵFactoryTarget.Component }); static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: AswMultiSelect, selector: "asw-multi-select", inputs: { control: "control", propertyPersonalization: "propertyPersonalization", isPreviewTemplate: "isPreviewTemplate", CSSFramework: "CSSFramework", formControls: "formControls" }, outputs: { multiSelectUpdateEvent: "multiSelectUpdateEvent", multiSelectDeleteEvent: "multiSelectDeleteEvent", selectionChange: "selectionChange", duplicateControl: "duplicateControl" }, ngImport: i0, template: "<ng-container *ngIf=\"control as control\">\r\n <ng-container *ngIf=\"CSSFramework === 'material'; else bootstrap\">\r\n <mat-form-field [appearance]=\"control.style\" class=\"asw-width-100 {{control.customClass}}\">\r\n <mat-label>{{control.label | aswTranslate}}</mat-label>\r\n <mat-select [placeholder]=\"control.label | aswTranslate\" \r\n [(ngModel)]=\"control.value\"\r\n [id]=\"control.id\"\r\n [matTooltip]=\"control.tooltip | aswTranslate\"\r\n #input=\"ngModel\" \r\n multiple \r\n (selectionChange)=\"onSelectionChange(control)\"\r\n [required]=\"control.isRequired\"\r\n [disabled]=\"control.isDisabled ? true : false\">\r\n <mat-option>\r\n <asw-select-search [showToggleAllCheckbox]=\"true\"\r\n [toggleAllCheckboxIndeterminate]=\"isIndeterminate\"\r\n [toggleAllCheckboxChecked]=\"isChecked\"\r\n (toggleAll)=\"toggleSelectAll($event, control)\"\r\n ngModel \r\n [(ngModel)]=\"filterValue\"\r\n (ngModelChange)=\"filter(control)\">\r\n </asw-select-search>\r\n </mat-option>\r\n <mat-option *ngFor=\"let option of filteredOptions | async\" [value]=\"option.key\">\r\n {{ option.value }}\r\n </mat-option>\r\n </mat-select>\r\n <mat-error *ngIf=\"input.invalid && (input.dirty || input.touched)\">\r\n <ng-container *ngIf=\"input?.errors?.required\">\r\n {{control.label | aswTranslate}} {{'FormControl.IsRequired' | aswTranslate}}\r\n </ng-container>\r\n </mat-error>\r\n </mat-form-field>\r\n </ng-container>\r\n <ng-template #bootstrap>\r\n <div class=\"asw-mb-3\">\r\n <label for=\"{{control.id}}\" \r\n class=\"asw-input-label {{(input.invalid && (input.dirty || input.touched)) ? 'asw-red-color' : ''}}\"\r\n [class.asw-invalid-label]=\"control.isRequired\">{{control.label | aswTranslate}}</label>\r\n <mat-select [placeholder]=\"control.label | aswTranslate\" \r\n [(ngModel)]=\"control.value\"\r\n [id]=\"control.id\"\r\n [matTooltip]=\"control.tooltip | aswTranslate\"\r\n #input=\"ngModel\" \r\n multiple \r\n color=\"primary\"\r\n class=\"asw-input-control {{control.customClass}}\"\r\n [class.asw-is-invalid]=\"input.invalid && (input.dirty || input.touched)\"\r\n (selectionChange)=\"onSelectionChange(control)\"\r\n [required]=\"control.isRequired\"\r\n [disabled]=\"control.isDisabled ? true : false\">\r\n <!-- <mat-option>\r\n <asw-select-search [showToggleAllCheckbox]=\"true\"\r\n [toggleAllCheckboxIndeterminate]=\"isIndeterminate\"\r\n [toggleAllCheckboxChecked]=\"isChecked\"\r\n (toggleAll)=\"toggleSelectAll($event, control)\"\r\n ngModel \r\n [(ngModel)]=\"filterValue\"\r\n (ngModelChange)=\"filter(control)\">\r\n </asw-select-search>\r\n </mat-option> -->\r\n <mat-option *ngFor=\"let option of filteredOptions | async\" [value]=\"option.key\">\r\n {{ option.value }}\r\n </mat-option>\r\n </mat-select>\r\n <div *ngIf=\"input.invalid && (input.dirty || input.touched)\" class=\"invalid-feedback\">\r\n <ng-container *ngIf=\"input?.errors?.required\">\r\n {{control.label | aswTranslate}} {{'FormControl.IsRequired' | aswTranslate}}\r\n </ng-container>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <div class=\"asw-row\" *ngIf=\"isPreviewTemplate\">\r\n <div class=\"asw-col-md-12\" align=\"right\">\r\n <button mat-icon-button \r\n type=\"button\" \r\n matTooltip=\"{{'FormControl.Duplicate' | aswTranslate}}\" \r\n [matTooltipPosition]=\"'below'\" \r\n (click)=\"duplicateMultiSelectControl(control)\">\r\n <div [innerHTML]=\"icons.contentCopy | aswSafeHtml\"></div>\r\n </button>\r\n <button mat-icon-button \r\n type=\"button\" \r\n matTooltip=\"{{'FormControl.Edit' | aswTranslate}}\" \r\n [matTooltipPosition]=\"'below'\" \r\n (click)=\"editMultiSelectDialog(control, formControls)\">\r\n <div [innerHTML]=\"icons.edit | aswSafeHtml\"></div>\r\n </button>\r\n <button mat-icon-button \r\n type=\"button\" \r\n matTooltip=\"{{'FormControl.Delete' | aswTranslate}}\" \r\n [matTooltipPosition]=\"'below'\" \r\n (click)=\"deleteMultiSelectDialog(control)\">\r\n <div [innerHTML]=\"icons.delete2 | aswSafeHtml\"></div>\r\n </button>\r\n </div>\r\n </div>\r\n</ng-container>", dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i8.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i9.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i10.AswSelectSearch, selector: "asw-select-search", inputs: ["placeholderLabel", "type", "closeIcon", "closeSvgIcon", "noEntriesFoundLabel", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toggleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti"], outputs: ["toggleAll"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i11.AswTranslatePipe, name: "aswTranslate" }, { kind: "pipe", type: i2.AswSafeHtmlPipe, name: "aswSafeHtml" }] }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AswMultiSelect, decorators: [{ type: Component, args: [{ selector: 'asw-multi-select', template: "<ng-container *ngIf=\"control as control\">\r\n <ng-container *ngIf=\"CSSFramework === 'material'; else bootstrap\">\r\n <mat-form-field [appearance]=\"control.style\" class=\"asw-width-100 {{control.customClass}}\">\r\n <mat-label>{{control.label | aswTranslate}}</mat-label>\r\n <mat-select [placeholder]=\"control.label | aswTranslate\" \r\n [(ngModel)]=\"control.value\"\r\n [id]=\"control.id\"\r\n [matTooltip]=\"control.tooltip | aswTranslate\"\r\n #input=\"ngModel\" \r\n multiple \r\n (selectionChange)=\"onSelectionChange(control)\"\r\n [required]=\"control.isRequired\"\r\n [disabled]=\"control.isDisabled ? true : false\">\r\n <mat-option>\r\n <asw-select-search [showToggleAllCheckbox]=\"true\"\r\n [toggleAllCheckboxIndeterminate]=\"isIndeterminate\"\r\n [toggleAllCheckboxChecked]=\"isChecked\"\r\n (toggleAll)=\"toggleSelectAll($event, control)\"\r\n ngModel \r\n [(ngModel)]=\"filterValue\"\r\n (ngModelChange)=\"filter(control)\">\r\n </asw-select-search>\r\n </mat-option>\r\n <mat-option *ngFor=\"let option of filteredOptions | async\" [value]=\"option.key\">\r\n {{ option.value }}\r\n </mat-option>\r\n </mat-select>\r\n <mat-error *ngIf=\"input.invalid && (input.dirty || input.touched)\">\r\n <ng-container *ngIf=\"input?.errors?.required\">\r\n {{control.label | aswTranslate}} {{'FormControl.IsRequired' | aswTranslate}}\r\n </ng-container>\r\n </mat-error>\r\n </mat-form-field>\r\n </ng-container>\r\n <ng-template #bootstrap>\r\n <div class=\"asw-mb-3\">\r\n <label for=\"{{control.id}}\" \r\n class=\"asw-input-label {{(input.invalid && (input.dirty || input.touched)) ? 'asw-red-color' : ''}}\"\r\n [class.asw-invalid-label]=\"control.isRequired\">{{control.label | aswTranslate}}</label>\r\n <mat-select [placeholder]=\"control.label | aswTranslate\" \r\n [(ngModel)]=\"control.value\"\r\n [id]=\"control.id\"\r\n [matTooltip]=\"control.tooltip | aswTranslate\"\r\n #input=\"ngModel\" \r\n multiple \r\n color=\"primary\"\r\n class=\"asw-input-control {{control.customClass}}\"\r\n [class.asw-is-invalid]=\"input.invalid && (input.dirty || input.touched)\"\r\n (selectionChange)=\"onSelectionChange(control)\"\r\n [required]=\"control.isRequired\"\r\n [disabled]=\"control.isDisabled ? true : false\">\r\n <!-- <mat-option>\r\n <asw-select-search [showToggleAllCheckbox]=\"true\"\r\n [toggleAllCheckboxIndeterminate]=\"isIndeterminate\"\r\n [toggleAllCheckboxChecked]=\"isChecked\"\r\n (toggleAll)=\"toggleSelectAll($event, control)\"\r\n ngModel \r\n [(ngModel)]=\"filterValue\"\r\n (ngModelChange)=\"filter(control)\">\r\n </asw-select-search>\r\n </mat-option> -->\r\n <mat-option *ngFor=\"let option of filteredOptions | async\" [value]=\"option.key\">\r\n {{ option.value }}\r\n </mat-option>\r\n </mat-select>\r\n <div *ngIf=\"input.invalid && (input.dirty || input.touched)\" class=\"invalid-feedback\">\r\n <ng-container *ngIf=\"input?.errors?.required\">\r\n {{control.label | aswTranslate}} {{'FormControl.IsRequired' | aswTranslate}}\r\n </ng-container>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <div class=\"asw-row\" *ngIf=\"isPreviewTemplate\">\r\n <div class=\"asw-col-md-12\" align=\"right\">\r\n <button mat-icon-button \r\n type=\"button\" \r\n matTooltip=\"{{'FormControl.Duplicate' | aswTranslate}}\" \r\n [matTooltipPosition]=\"'below'\" \r\n (click)=\"duplicateMultiSelectControl(control)\">\r\n <div [innerHTML]=\"icons.contentCopy | aswSafeHtml\"></div>\r\n </button>\r\n <button mat-icon-button \r\n type=\"button\" \r\n matTooltip=\"{{'FormControl.Edit' | aswTranslate}}\" \r\n [matTooltipPosition]=\"'below'\" \r\n (click)=\"editMultiSelectDialog(control, formControls)\">\r\n <div [innerHTML]=\"icons.edit | aswSafeHtml\"></div>\r\n </button>\r\n <button mat-icon-button \r\n type=\"button\" \r\n matTooltip=\"{{'FormControl.Delete' | aswTranslate}}\" \r\n [matTooltipPosition]=\"'below'\" \r\n (click)=\"deleteMultiSelectDialog(control)\">\r\n <div [innerHTML]=\"icons.delete2 | aswSafeHtml\"></div>\r\n </button>\r\n </div>\r\n </div>\r\n</ng-container>" }] }], ctorParameters: () => [{ type: i1.MatDialog }, { type: i2.AswApiService }], propDecorators: { control: [{ type: Input }], propertyPersonalization: [{ type: Input }], isPreviewTemplate: [{ type: Input }], CSSFramework: [{ type: Input }], formControls: [{ type: Input }], multiSelectUpdateEvent: [{ type: Output }], multiSelectDeleteEvent: [{ type: Output }], selectionChange: [{ type: Output }], duplicateControl: [{ type: Output }] } }); /** * @license * Copyright ASW (A Software World) All Rights Reserved. * * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file */ class AswMultiSelectModule { static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AswMultiSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.8", ngImport: i0, type: AswMultiSelectModule, declarations: [AswMultiSelect], imports: [CommonModule, FormsModule, ReactiveFormsModule, MaterialModule, AswConfirmDialogModule, AswSharedDialogModule, AswTranslateModule, AswPipeModule, AswSelectSearchModule], exports: [AswMultiSelect] }); static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AswMultiSelectModule, imports: [CommonModule, FormsModule, ReactiveFormsModule, MaterialModule, AswConfirmDialogModule, AswSharedDialogModule, AswTranslateModule, AswPipeModule, AswSelectSearchModule] }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AswMultiSelectModule, decorators: [{ type: NgModule, args: [{ imports: [CommonModule, FormsModule, ReactiveFormsModule, MaterialModule, AswConfirmDialogModule, AswSharedDialogModule, AswTranslateModule, AswPipeModule, AswSelectSearchModule], declarations: [AswMultiSelect], exports: [AswMultiSelect] }] }] }); /** * @license * Copyright ASW (A Software World) All Rights Reserved. * * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file */ /** * Generated bundle index. Do not edit. */ export { AswMultiSelect, AswMultiSelectModule }; //# sourceMappingURL=asoftwareworld-form-builder-pro-form-control-multi-select.mjs.map