diff --git a/package.json b/package.json index 43c5dc6f23..5d51451921 100644 --- a/package.json +++ b/package.json @@ -145,6 +145,7 @@ "@ngrx/store": "8.1.0", "@ngrx/store-devtools": "^8.1.0", "@ngx-formly/core": "^5.2.0", + "@ngx-formly/material": "^5.2.0", "@ngx-translate/core": "^11.0.1", "@ngx-translate/http-loader": "^4.0.0", "@schematics/angular": "^8.0.1", diff --git a/src/app/app.module.ts b/src/app/app.module.ts index eea28eb338..f92aa4536b 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -13,7 +13,7 @@ import {UiModule} from './ui/ui.module'; import {reducers} from './root-store'; import {CoreModule} from './core/core.module'; import {ReactiveFormsModule} from '@angular/forms'; -import {FormlyModule} from '@ngx-formly/core'; +import {FORMLY_CONFIG, FormlyModule} from '@ngx-formly/core'; import {PagesModule} from './pages/pages.module'; import {MainHeaderModule} from './core-ui/main-header/main-header.module'; import {HttpClient, HttpClientModule} from '@angular/common/http'; @@ -31,6 +31,7 @@ import {ProcrastinationModule} from './features/procrastination/procrastination. import {TaskRepeatCfgModule} from './features/task-repeat-cfg/task-repeat-cfg.module'; import {TranslateLoader, TranslateModule, TranslateService} from '@ngx-translate/core'; import {TranslateHttpLoader} from '@ngx-translate/http-loader'; +import {registerTranslateExtension} from './ui/formly-translate-extension/formly-translate-extension'; // NOTE: export required for aot to work export function createTranslateLoader(http: HttpClient) { @@ -91,7 +92,13 @@ export function createTranslateLoader(http: HttpClient) { bootstrap: [AppComponent], providers: [ {provide: ErrorHandler, useClass: GlobalErrorHandler}, - {provide: HAMMER_GESTURE_CONFIG, useClass: MyHammerConfig} + {provide: HAMMER_GESTURE_CONFIG, useClass: MyHammerConfig}, + { + provide: FORMLY_CONFIG, + multi: true, + useFactory: registerTranslateExtension, + deps: [TranslateService], + }, ], }) export class AppModule { diff --git a/src/app/features/config/keyboard-input/keyboard-input.component.ts b/src/app/features/config/keyboard-input/keyboard-input.component.ts index 4f526b9b8a..97598a1c80 100644 --- a/src/app/features/config/keyboard-input/keyboard-input.component.ts +++ b/src/app/features/config/keyboard-input/keyboard-input.component.ts @@ -1,6 +1,6 @@ import {ChangeDetectionStrategy, Component, ViewChild} from '@angular/core'; import {MatInput} from '@angular/material/input'; -import {FieldType} from '../../../ui/formly-material-components/form-field'; +import {FieldType} from '@ngx-formly/material'; @Component({ selector: 'keyboard-input', diff --git a/src/app/ui/duration/input-duration-formly/input-duration-formly.component.ts b/src/app/ui/duration/input-duration-formly/input-duration-formly.component.ts index d9e609d222..41dccaebe5 100644 --- a/src/app/ui/duration/input-duration-formly/input-duration-formly.component.ts +++ b/src/app/ui/duration/input-duration-formly/input-duration-formly.component.ts @@ -1,6 +1,6 @@ import {ChangeDetectionStrategy, Component, ViewChild} from '@angular/core'; import {MatInput} from '@angular/material/input'; -import {FieldType} from '../../formly-material-components/form-field'; +import {FieldType} from '@ngx-formly/material'; @Component({ selector: 'input-duration-formly', diff --git a/src/app/ui/formly-material-components/checkbox/index.ts b/src/app/ui/formly-material-components/checkbox/index.ts deleted file mode 100644 index decc72d85b..0000000000 --- a/src/app/ui/formly-material-components/checkbox/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './src/public_api'; diff --git a/src/app/ui/formly-material-components/checkbox/package.json b/src/app/ui/formly-material-components/checkbox/package.json deleted file mode 100644 index 4bbd7d0f7b..0000000000 --- a/src/app/ui/formly-material-components/checkbox/package.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "ngPackage": {} -} diff --git a/src/app/ui/formly-material-components/checkbox/src/checkbox.module.ts b/src/app/ui/formly-material-components/checkbox/src/checkbox.module.ts deleted file mode 100644 index 8722dc0403..0000000000 --- a/src/app/ui/formly-material-components/checkbox/src/checkbox.module.ts +++ /dev/null @@ -1,34 +0,0 @@ -import {NgModule} from '@angular/core'; -import {CommonModule} from '@angular/common'; -import {FormlyModule} from '@ngx-formly/core'; -import {ReactiveFormsModule} from '@angular/forms'; - -import {FormlyMatFormFieldModule} from '../../form-field'; -import {MatCheckboxModule} from '@angular/material/checkbox'; - -import {FormlyFieldCheckbox} from './checkbox.type'; -import {TranslateModule} from '@ngx-translate/core'; - -@NgModule({ - declarations: [FormlyFieldCheckbox], - imports: [ - CommonModule, - ReactiveFormsModule, - TranslateModule, - - MatCheckboxModule, - - FormlyMatFormFieldModule, - FormlyModule.forChild({ - types: [ - { - name: 'checkbox', - component: FormlyFieldCheckbox, - wrappers: ['form-field'], - }, - ], - }), - ], -}) -export class FormlyMatCheckboxModule { -} diff --git a/src/app/ui/formly-material-components/checkbox/src/checkbox.type.ts b/src/app/ui/formly-material-components/checkbox/src/checkbox.type.ts deleted file mode 100644 index 3c512a325f..0000000000 --- a/src/app/ui/formly-material-components/checkbox/src/checkbox.type.ts +++ /dev/null @@ -1,55 +0,0 @@ -import {AfterViewInit, Component, OnDestroy, ViewChild} from '@angular/core'; -import {FieldType} from '../../form-field'; -import {MatCheckbox} from '@angular/material/checkbox'; -import {FocusMonitor} from '@angular/cdk/a11y'; - -@Component({ - selector: 'formly-field-mat-checkbox', - template: ` - - {{ to.label|translate }} - * - - `, -}) -export class FormlyFieldCheckbox extends FieldType implements AfterViewInit, OnDestroy { - @ViewChild(MatCheckbox, {static: true}) checkbox!: MatCheckbox; - defaultOptions = { - templateOptions: { - hideFieldUnderline: true, - indeterminate: true, - floatLabel: 'always', - hideLabel: true, - align: 'start', // start or end - }, - }; - - constructor(private focusMonitor: FocusMonitor) { - super(); - } - - onContainerClick(event: MouseEvent): void { - this.checkbox.focus(); - super.onContainerClick(event); - } - - ngAfterViewInit() { - super.ngAfterViewInit(); - this.focusMonitor - .monitor(this.checkbox._inputElement.nativeElement) - .subscribe(focusOrigin => this.field.focus = !!focusOrigin); - } - - ngOnDestroy() { - super.ngOnDestroy(); - this.focusMonitor.stopMonitoring(this.checkbox._inputElement.nativeElement); - } -} diff --git a/src/app/ui/formly-material-components/checkbox/src/public_api.ts b/src/app/ui/formly-material-components/checkbox/src/public_api.ts deleted file mode 100644 index 30935c237a..0000000000 --- a/src/app/ui/formly-material-components/checkbox/src/public_api.ts +++ /dev/null @@ -1,2 +0,0 @@ -export {FormlyMatCheckboxModule} from './checkbox.module'; -export {FormlyFieldCheckbox} from './checkbox.type'; diff --git a/src/app/ui/formly-material-components/datepicker/index.ts b/src/app/ui/formly-material-components/datepicker/index.ts deleted file mode 100644 index decc72d85b..0000000000 --- a/src/app/ui/formly-material-components/datepicker/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './src/public_api'; diff --git a/src/app/ui/formly-material-components/datepicker/package.json b/src/app/ui/formly-material-components/datepicker/package.json deleted file mode 100644 index 4bbd7d0f7b..0000000000 --- a/src/app/ui/formly-material-components/datepicker/package.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "ngPackage": {} -} diff --git a/src/app/ui/formly-material-components/datepicker/src/datepicker.module.ts b/src/app/ui/formly-material-components/datepicker/src/datepicker.module.ts deleted file mode 100644 index 622aaf87d5..0000000000 --- a/src/app/ui/formly-material-components/datepicker/src/datepicker.module.ts +++ /dev/null @@ -1,33 +0,0 @@ -import {NgModule} from '@angular/core'; -import {CommonModule} from '@angular/common'; -import {FormlyModule} from '@ngx-formly/core'; -import {ReactiveFormsModule} from '@angular/forms'; - -import {FormlyMatFormFieldModule} from '../../form-field'; -import {MatInputModule} from '@angular/material/input'; -import {MatDatepickerModule} from '@angular/material/datepicker'; - -import {FormlyDatepickerTypeComponent} from './datepicker.type'; -import {TranslateModule} from '@ngx-translate/core'; - -@NgModule({ - declarations: [FormlyDatepickerTypeComponent], - imports: [ - CommonModule, - ReactiveFormsModule, - MatInputModule, - MatDatepickerModule, - TranslateModule, - - FormlyMatFormFieldModule, - FormlyModule.forChild({ - types: [{ - name: 'datepicker', - component: FormlyDatepickerTypeComponent, - wrappers: ['form-field'], - }], - }), - ], -}) -export class FormlyMatDatepickerModule { -} diff --git a/src/app/ui/formly-material-components/datepicker/src/datepicker.type.ts b/src/app/ui/formly-material-components/datepicker/src/datepicker.type.ts deleted file mode 100644 index cbd098b82c..0000000000 --- a/src/app/ui/formly-material-components/datepicker/src/datepicker.type.ts +++ /dev/null @@ -1,56 +0,0 @@ -import {AfterViewInit, Component, TemplateRef, ViewChild} from '@angular/core'; -import {ɵdefineHiddenProp as defineHiddenProp} from '@ngx-formly/core'; -import {FieldType} from '../../form-field'; -import {MatInput} from '@angular/material/input'; -import {MatDatepickerInput} from '@angular/material/datepicker'; - -@Component({ - selector: 'formly-field-mat-datepicker', - template: ` - - - - - - - `, -}) -export class FormlyDatepickerTypeComponent extends FieldType implements AfterViewInit { - @ViewChild(MatInput, {static: true}) formFieldControl!: MatInput; - @ViewChild(MatDatepickerInput, {static: true}) datepickerInput!: MatDatepickerInput; - @ViewChild('datepickerToggle', {static: true}) datepickerToggle!: TemplateRef; - - defaultOptions = { - templateOptions: { - datepickerOptions: { - startView: 'month', - datepickerTogglePosition: 'suffix', - }, - }, - }; - - ngAfterViewInit() { - super.ngAfterViewInit(); - // temporary fix for https://github.com/angular/material2/issues/6728 - (this.datepickerInput)._formField = this.formField; - - setTimeout(() => { - defineHiddenProp(this.field, '_mat' + this.to.datepickerOptions.datepickerTogglePosition, this.datepickerToggle); - }); - } -} diff --git a/src/app/ui/formly-material-components/datepicker/src/public_api.ts b/src/app/ui/formly-material-components/datepicker/src/public_api.ts deleted file mode 100644 index 1abcc3c4bc..0000000000 --- a/src/app/ui/formly-material-components/datepicker/src/public_api.ts +++ /dev/null @@ -1 +0,0 @@ -export {FormlyMatDatepickerModule} from './datepicker.module'; diff --git a/src/app/ui/formly-material-components/form-field/index.ts b/src/app/ui/formly-material-components/form-field/index.ts deleted file mode 100644 index decc72d85b..0000000000 --- a/src/app/ui/formly-material-components/form-field/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './src/public_api'; diff --git a/src/app/ui/formly-material-components/form-field/package.json b/src/app/ui/formly-material-components/form-field/package.json deleted file mode 100644 index 4bbd7d0f7b..0000000000 --- a/src/app/ui/formly-material-components/form-field/package.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "ngPackage": {} -} diff --git a/src/app/ui/formly-material-components/form-field/src/field.type.ts b/src/app/ui/formly-material-components/form-field/src/field.type.ts deleted file mode 100644 index 1bc856913e..0000000000 --- a/src/app/ui/formly-material-components/form-field/src/field.type.ts +++ /dev/null @@ -1,123 +0,0 @@ -import {AfterViewInit, OnDestroy, OnInit, TemplateRef, Type, ViewChild} from '@angular/core'; -import {FieldType as CoreFieldType, FormlyFieldConfig, ɵdefineHiddenProp as defineHiddenProp} from '@ngx-formly/core'; -import {Subject} from 'rxjs'; -import {MatFormField, MatFormFieldControl} from '@angular/material/form-field'; -import {FormlyErrorStateMatcher} from './formly.error-state-matcher'; - -export abstract class FieldType extends CoreFieldType implements OnInit, AfterViewInit, OnDestroy, MatFormFieldControl { - @ViewChild('matPrefix', {static: true}) matPrefix!: TemplateRef; - @ViewChild('matSuffix', {static: true}) matSuffix!: TemplateRef; - errorStateMatcher = new FormlyErrorStateMatcher(this); - stateChanges = new Subject(); - private _control!: MatFormFieldControl; - - get formFieldControl() { - return this._control || this; - } - - set formFieldControl(control: MatFormFieldControl) { - this._control = control; - if (this.formField && control !== this.formField._control) { - this.formField._control = control; - } - } - - _errorState = false; - - get errorState() { - const showError = this.options!.showError!(this); - if (showError !== this._errorState) { - this._errorState = showError; - this.stateChanges.next(); - } - - return showError; - } - - get controlType() { - if (this.to.type) { - return this.to.type; - } - - if ((this.field.type) instanceof Type) { - return this.field.type!.constructor.name; - } - - return this.field.type!; - } - - get focused() { - return !!this.field.focus && !this.disabled; - } - - get disabled() { - return !!this.to.disabled; - } - - get required() { - return !!this.to.required; - } - - get placeholder() { - return this.to.placeholder || ''; - } - - get shouldPlaceholderFloat() { - return this.shouldLabelFloat; - } - - get value() { - return this.formControl.value; - } - - set value(value) { - this.formControl.patchValue(value); - } - - get ngControl() { - return this.formControl as any; - } - - get empty() { - return this.value === undefined || this.value === null || this.value === ''; - } - - get shouldLabelFloat() { - return this.focused || !this.empty; - } - - get formField(): MatFormField { - return this.field ? (this.field)['__formField__'] : null; - } - - ngOnInit() { - if (this.formField) { - this.formField._control = this.formFieldControl; - } - } - - ngAfterViewInit() { - if (this.matPrefix || this.matSuffix) { - setTimeout(() => { - defineHiddenProp(this.field, '_matprefix', this.matPrefix); - defineHiddenProp(this.field, '_matsuffix', this.matSuffix); - (this.options)._markForCheck(this.field); - }); - } - } - - ngOnDestroy() { - if (this.formField) { - delete this.formField._control; - } - this.stateChanges.complete(); - } - - setDescribedByIds(ids: string[]): void { - } - - onContainerClick(event: MouseEvent): void { - this.field.focus = true; - this.stateChanges.next(); - } -} diff --git a/src/app/ui/formly-material-components/form-field/src/form-field.module.ts b/src/app/ui/formly-material-components/form-field/src/form-field.module.ts deleted file mode 100644 index 3e923b268e..0000000000 --- a/src/app/ui/formly-material-components/form-field/src/form-field.module.ts +++ /dev/null @@ -1,25 +0,0 @@ -import {NgModule} from '@angular/core'; -import {CommonModule} from '@angular/common'; -import {FormlyModule} from '@ngx-formly/core'; -import {ReactiveFormsModule} from '@angular/forms'; -import {MatFormFieldModule} from '@angular/material/form-field'; -import {FormlyWrapperFormField} from './form-field.wrapper'; -import {TranslateModule} from '@ngx-translate/core'; - -@NgModule({ - declarations: [FormlyWrapperFormField], - imports: [ - CommonModule, - ReactiveFormsModule, - MatFormFieldModule, - TranslateModule, - FormlyModule.forChild({ - wrappers: [{ - name: 'form-field', - component: FormlyWrapperFormField, - }], - }), - ], -}) -export class FormlyMatFormFieldModule { -} diff --git a/src/app/ui/formly-material-components/form-field/src/form-field.wrapper.ts b/src/app/ui/formly-material-components/form-field/src/form-field.wrapper.ts deleted file mode 100644 index 6c63281256..0000000000 --- a/src/app/ui/formly-material-components/form-field/src/form-field.wrapper.ts +++ /dev/null @@ -1,172 +0,0 @@ -import { - AfterContentChecked, - AfterViewInit, - Component, - OnDestroy, - OnInit, - Renderer2, - TemplateRef, - ViewChild, - ViewContainerRef -} from '@angular/core'; -import {FieldWrapper, FormlyFieldConfig, ɵdefineHiddenProp as defineHiddenProp} from '@ngx-formly/core'; -import {MatFormField, MatFormFieldControl} from '@angular/material/form-field'; -import {Subject} from 'rxjs'; - -import {FieldType} from './field.type'; - -interface MatFormlyFieldConfig extends FormlyFieldConfig { - _matprefix: TemplateRef; - _matsuffix: TemplateRef; - __formField__: FormlyWrapperFormField; - _componentFactory: any; -} - -@Component({ - selector: 'formly-wrapper-mat-form-field', - template: ` - - - - - {{ to.label|translate }} - * - - - - - - - - - - - - - - - - {{ to.description }} - - `, - providers: [{provide: MatFormFieldControl, useExisting: FormlyWrapperFormField}], -}) -export class FormlyWrapperFormField extends FieldWrapper implements OnInit, OnDestroy, MatFormFieldControl, AfterViewInit, AfterContentChecked { - @ViewChild('fieldComponent', {read: ViewContainerRef, static: true}) fieldComponent!: ViewContainerRef; - @ViewChild(MatFormField, {static: true}) formField!: MatFormField; - - stateChanges = new Subject(); - private initialGapCalculated = false; - - constructor(private renderer: Renderer2) { - super(); - } - - _errorState = false; - - get errorState() { - const showError = this.options!.showError!(this); - if (showError !== this._errorState) { - this._errorState = showError; - this.stateChanges.next(); - } - - return showError; - } - - get controlType() { - return this.to.type; - } - - get focused() { - return !!this.formlyField.focus && !this.disabled; - } - - get disabled() { - return !!this.to.disabled; - } - - get required() { - return !!this.to.required; - } - - get placeholder() { - return this.to.placeholder || ''; - } - - get shouldPlaceholderFloat() { - return this.shouldLabelFloat; - } - - get value() { - return this.formControl.value; - } - - get ngControl() { - return this.formControl as any; - } - - get empty() { - return !this.formControl.value; - } - - get shouldLabelFloat() { - return this.focused || !this.empty; - } - - get formlyField() { - return this.field as MatFormlyFieldConfig; - } - - ngOnInit() { - this.formField._control = this; - defineHiddenProp(this.field, '__formField__', this.formField); - - const fieldComponent = this.formlyField['_componentFactory']; - if (fieldComponent && !(fieldComponent.componentRef.instance instanceof FieldType)) { - console.warn(`Component '${fieldComponent.component.prototype.constructor.name}' must extend 'FieldType' from '@ngx-formly/material'.`); - } - - // fix for https://github.com/angular/material2/issues/11437 - if (this.formlyField.hide && this.formlyField.templateOptions!.appearance === 'outline') { - this.initialGapCalculated = true; - } - } - - ngAfterContentChecked() { - if (!this.initialGapCalculated || this.formlyField.hide) { - return; - } - - this.formField.updateOutlineGap(); - this.initialGapCalculated = true; - } - - ngAfterViewInit() { - // temporary fix for https://github.com/angular/material2/issues/7891 - if (this.formField.underlineRef && this.to.hideFieldUnderline === true) { - this.renderer.removeClass(this.formField.underlineRef.nativeElement, 'mat-form-field-underline'); - this.renderer.removeClass(this.formField.underlineRef.nativeElement.firstChild, 'mat-form-field-ripple'); - } - } - - ngOnDestroy() { - delete this.formlyField.__formField__; - this.stateChanges.complete(); - } - - setDescribedByIds(ids: string[]): void { - } - - onContainerClick(event: MouseEvent): void { - this.formlyField.focus = true; - this.stateChanges.next(); - } -} diff --git a/src/app/ui/formly-material-components/form-field/src/formly.error-state-matcher.ts b/src/app/ui/formly-material-components/form-field/src/formly.error-state-matcher.ts deleted file mode 100644 index 1402598c7d..0000000000 --- a/src/app/ui/formly-material-components/form-field/src/formly.error-state-matcher.ts +++ /dev/null @@ -1,12 +0,0 @@ -import {FormControl, FormGroupDirective, NgForm} from '@angular/forms'; -import {ErrorStateMatcher} from '@angular/material/core'; -import {FieldType} from '@ngx-formly/core'; - -export class FormlyErrorStateMatcher implements ErrorStateMatcher { - constructor(private field: FieldType) { - } - - isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean { - return this.field && this.field.showError; - } -} diff --git a/src/app/ui/formly-material-components/form-field/src/public_api.ts b/src/app/ui/formly-material-components/form-field/src/public_api.ts deleted file mode 100644 index 72cc83275e..0000000000 --- a/src/app/ui/formly-material-components/form-field/src/public_api.ts +++ /dev/null @@ -1,2 +0,0 @@ -export {FormlyMatFormFieldModule} from './form-field.module'; -export {FieldType} from './field.type'; diff --git a/src/app/ui/formly-material-components/input/index.ts b/src/app/ui/formly-material-components/input/index.ts deleted file mode 100644 index decc72d85b..0000000000 --- a/src/app/ui/formly-material-components/input/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './src/public_api'; diff --git a/src/app/ui/formly-material-components/input/package.json b/src/app/ui/formly-material-components/input/package.json deleted file mode 100644 index 4bbd7d0f7b..0000000000 --- a/src/app/ui/formly-material-components/input/package.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "ngPackage": {} -} diff --git a/src/app/ui/formly-material-components/input/src/input.module.ts b/src/app/ui/formly-material-components/input/src/input.module.ts deleted file mode 100644 index 8b7f2c01ac..0000000000 --- a/src/app/ui/formly-material-components/input/src/input.module.ts +++ /dev/null @@ -1,33 +0,0 @@ -import {NgModule} from '@angular/core'; -import {CommonModule} from '@angular/common'; -import {FormlyModule} from '@ngx-formly/core'; -import {ReactiveFormsModule} from '@angular/forms'; - -import {FormlyMatFormFieldModule} from '../../form-field'; -import {MatInputModule} from '@angular/material/input'; - -import {FormlyFieldInput} from './input.type'; -import {TranslateModule} from '@ngx-translate/core'; - -@NgModule({ - declarations: [FormlyFieldInput], - imports: [ - CommonModule, - ReactiveFormsModule, - MatInputModule, - TranslateModule, - - FormlyMatFormFieldModule, - FormlyModule.forChild({ - types: [ - { - name: 'input', - component: FormlyFieldInput, - wrappers: ['form-field'], - }, - ], - }), - ], -}) -export class FormlyMatInputModule { -} diff --git a/src/app/ui/formly-material-components/input/src/input.type.spec.ts b/src/app/ui/formly-material-components/input/src/input.type.spec.ts deleted file mode 100644 index de4ee223f0..0000000000 --- a/src/app/ui/formly-material-components/input/src/input.type.spec.ts +++ /dev/null @@ -1,85 +0,0 @@ -import {Component} from '@angular/core'; -import {ComponentFixture, TestBed} from '@angular/core/testing'; -import {FormGroup, ReactiveFormsModule} from '@angular/forms'; -import {MatInputModule} from '@angular/material/input'; -import {By} from '@angular/platform-browser'; -import {NoopAnimationsModule} from '@angular/platform-browser/animations'; -import {FormlyFieldConfig, FormlyFormOptions, FormlyModule} from '@ngx-formly/core'; -import {FormlyFieldInput} from './input.type'; - -@Component({ - selector: 'formly-test', - template: ` - - `, -}) -class FormlyTestComponent { - form = new FormGroup({}); - fields: FormlyFieldConfig[]; - model: any; - options: FormlyFormOptions; -} - -describe('ui-material: Formly Input Component', () => { - let fixture: ComponentFixture; - - beforeEach(() => { - TestBed.configureTestingModule({ - declarations: [FormlyTestComponent, FormlyFieldInput], - imports: [ - NoopAnimationsModule, - MatInputModule, - ReactiveFormsModule, - FormlyModule.forRoot({ - types: [ - { - name: 'input', - component: FormlyFieldInput, - }, - ], - }), - ], - }).compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(FormlyTestComponent); - }); - - it('should properly set the readonly value on text inputs', () => { - const componentInstance = fixture.componentInstance; - componentInstance.fields = [ - { - key: 'name', - type: 'input', - templateOptions: { - readonly: true, - }, - }, - ]; - fixture.detectChanges(); - - // assert - const inputField = fixture.debugElement.query(By.css('input')); - expect(inputField.nativeElement.getAttribute('readonly')).not.toBeNull(); - }); - - it('should properly set the readonly value on number inputs', () => { - const componentInstance = fixture.componentInstance; - componentInstance.fields = [ - { - key: 'name', - type: 'input', - templateOptions: { - type: 'number', - readonly: true, - }, - }, - ]; - fixture.detectChanges(); - - // assert - const inputField = fixture.debugElement.query(By.css('input')); - expect(inputField.nativeElement.getAttribute('readonly')).not.toBeNull(); - }); -}); diff --git a/src/app/ui/formly-material-components/input/src/input.type.ts b/src/app/ui/formly-material-components/input/src/input.type.ts deleted file mode 100644 index 0d14121b47..0000000000 --- a/src/app/ui/formly-material-components/input/src/input.type.ts +++ /dev/null @@ -1,37 +0,0 @@ -import {Component, OnInit, ViewChild} from '@angular/core'; -import {MatInput} from '@angular/material/input'; -import {FieldType} from '../../form-field'; - -@Component({ - selector: 'formly-field-mat-input', - template: ` - - - - - `, -}) -export class FormlyFieldInput extends FieldType implements OnInit { - @ViewChild(MatInput, {static: true}) formFieldControl!: MatInput; - - get type() { - return this.to.type || 'text'; - } -} diff --git a/src/app/ui/formly-material-components/input/src/public_api.ts b/src/app/ui/formly-material-components/input/src/public_api.ts deleted file mode 100644 index 091718fedd..0000000000 --- a/src/app/ui/formly-material-components/input/src/public_api.ts +++ /dev/null @@ -1,2 +0,0 @@ -export {FormlyMatInputModule} from './input.module'; -export {FormlyFieldInput} from './input.type'; diff --git a/src/app/ui/formly-material-components/multicheckbox/index.ts b/src/app/ui/formly-material-components/multicheckbox/index.ts deleted file mode 100644 index decc72d85b..0000000000 --- a/src/app/ui/formly-material-components/multicheckbox/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './src/public_api'; diff --git a/src/app/ui/formly-material-components/multicheckbox/package.json b/src/app/ui/formly-material-components/multicheckbox/package.json deleted file mode 100644 index 4bbd7d0f7b..0000000000 --- a/src/app/ui/formly-material-components/multicheckbox/package.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "ngPackage": {} -} diff --git a/src/app/ui/formly-material-components/multicheckbox/src/multicheckbox.module.ts b/src/app/ui/formly-material-components/multicheckbox/src/multicheckbox.module.ts deleted file mode 100644 index 8a9a08b1e5..0000000000 --- a/src/app/ui/formly-material-components/multicheckbox/src/multicheckbox.module.ts +++ /dev/null @@ -1,35 +0,0 @@ -import {NgModule} from '@angular/core'; -import {CommonModule} from '@angular/common'; -import {ReactiveFormsModule} from '@angular/forms'; -import {FormlyModule} from '@ngx-formly/core'; -import {FormlySelectModule} from '@ngx-formly/core/select'; -import {FormlyMatFormFieldModule} from '../../form-field'; -import {MatCheckboxModule} from '@angular/material/checkbox'; - -import {FormlyFieldMultiCheckbox} from './multicheckbox.type'; -import {TranslateModule} from '@ngx-translate/core'; - -@NgModule({ - declarations: [FormlyFieldMultiCheckbox], - imports: [ - CommonModule, - ReactiveFormsModule, - TranslateModule, - - MatCheckboxModule, - - FormlyMatFormFieldModule, - FormlySelectModule, - FormlyModule.forChild({ - types: [ - { - name: 'multicheckbox', - component: FormlyFieldMultiCheckbox, - wrappers: ['form-field'], - }, - ], - }), - ], -}) -export class FormlyMatMultiCheckboxModule { -} diff --git a/src/app/ui/formly-material-components/multicheckbox/src/multicheckbox.type.ts b/src/app/ui/formly-material-components/multicheckbox/src/multicheckbox.type.ts deleted file mode 100644 index b04fb91221..0000000000 --- a/src/app/ui/formly-material-components/multicheckbox/src/multicheckbox.type.ts +++ /dev/null @@ -1,41 +0,0 @@ -import {Component} from '@angular/core'; -import {FieldType} from '../../form-field'; - -@Component({ - selector: 'formly-field-mat-multicheckbox', - template: ` - - - {{ option.label|translate }} - - - `, -}) -export class FormlyFieldMultiCheckbox extends FieldType { - defaultOptions = { - templateOptions: { - hideFieldUnderline: true, - floatLabel: 'always', - options: [], - }, - }; - - onChange(value: any, checked: boolean) { - if (this.to.type === 'array') { - this.formControl.patchValue(checked - ? [...(this.formControl.value || []), value] - : [...(this.formControl.value || [])].filter(o => o !== value), - ); - } else { - this.formControl.patchValue({...this.formControl.value, [value]: checked}); - } - this.formControl.markAsTouched(); - } -} diff --git a/src/app/ui/formly-material-components/multicheckbox/src/public_api.ts b/src/app/ui/formly-material-components/multicheckbox/src/public_api.ts deleted file mode 100644 index d39bf5e35a..0000000000 --- a/src/app/ui/formly-material-components/multicheckbox/src/public_api.ts +++ /dev/null @@ -1,2 +0,0 @@ -export {FormlyMatMultiCheckboxModule} from './multicheckbox.module'; -export {FormlyFieldMultiCheckbox} from './multicheckbox.type'; diff --git a/src/app/ui/formly-material-components/native-select/index.ts b/src/app/ui/formly-material-components/native-select/index.ts deleted file mode 100644 index decc72d85b..0000000000 --- a/src/app/ui/formly-material-components/native-select/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './src/public_api'; diff --git a/src/app/ui/formly-material-components/native-select/package.json b/src/app/ui/formly-material-components/native-select/package.json deleted file mode 100644 index 4bbd7d0f7b..0000000000 --- a/src/app/ui/formly-material-components/native-select/package.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "ngPackage": {} -} diff --git a/src/app/ui/formly-material-components/native-select/src/native-select.module.ts b/src/app/ui/formly-material-components/native-select/src/native-select.module.ts deleted file mode 100644 index 4201292dd9..0000000000 --- a/src/app/ui/formly-material-components/native-select/src/native-select.module.ts +++ /dev/null @@ -1,35 +0,0 @@ -import {NgModule} from '@angular/core'; -import {CommonModule} from '@angular/common'; -import {FormlyModule} from '@ngx-formly/core'; -import {FormlySelectModule} from '@ngx-formly/core/select'; -import {ReactiveFormsModule} from '@angular/forms'; - -import {FormlyMatFormFieldModule} from '../../form-field'; -import {MatInputModule} from '@angular/material/input'; - -import {FormlyFieldNativeSelect} from './native-select.type'; -import {TranslateModule} from '@ngx-translate/core'; - -@NgModule({ - declarations: [FormlyFieldNativeSelect], - imports: [ - CommonModule, - ReactiveFormsModule, - MatInputModule, - TranslateModule, - - FormlyMatFormFieldModule, - FormlySelectModule, - FormlyModule.forChild({ - types: [ - { - name: 'native-select', - component: FormlyFieldNativeSelect, - wrappers: ['form-field'], - }, - ], - }), - ], -}) -export class FormlyMatNativeSelectModule { -} diff --git a/src/app/ui/formly-material-components/native-select/src/native-select.type.ts b/src/app/ui/formly-material-components/native-select/src/native-select.type.ts deleted file mode 100644 index 5460761483..0000000000 --- a/src/app/ui/formly-material-components/native-select/src/native-select.type.ts +++ /dev/null @@ -1,39 +0,0 @@ -import {Component, ViewChild} from '@angular/core'; -import {FieldType} from '../../form-field'; -import {MatInput} from '@angular/material/input'; - -@Component({ - selector: 'formly-field-mat-native-select', - template: ` - - `, -}) -export class FormlyFieldNativeSelect extends FieldType { - @ViewChild(MatInput, {static: true}) formFieldControl!: MatInput; - defaultOptions = { - templateOptions: { - options: [], - }, - }; -} diff --git a/src/app/ui/formly-material-components/native-select/src/public_api.ts b/src/app/ui/formly-material-components/native-select/src/public_api.ts deleted file mode 100644 index 93344ef738..0000000000 --- a/src/app/ui/formly-material-components/native-select/src/public_api.ts +++ /dev/null @@ -1,2 +0,0 @@ -export {FormlyMatNativeSelectModule} from './native-select.module'; -export {FormlyFieldNativeSelect} from './native-select.type'; diff --git a/src/app/ui/formly-material-components/radio/index.ts b/src/app/ui/formly-material-components/radio/index.ts deleted file mode 100644 index decc72d85b..0000000000 --- a/src/app/ui/formly-material-components/radio/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './src/public_api'; diff --git a/src/app/ui/formly-material-components/radio/package.json b/src/app/ui/formly-material-components/radio/package.json deleted file mode 100644 index 4bbd7d0f7b..0000000000 --- a/src/app/ui/formly-material-components/radio/package.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "ngPackage": {} -} diff --git a/src/app/ui/formly-material-components/radio/src/public_api.ts b/src/app/ui/formly-material-components/radio/src/public_api.ts deleted file mode 100644 index 0c5e41653a..0000000000 --- a/src/app/ui/formly-material-components/radio/src/public_api.ts +++ /dev/null @@ -1,2 +0,0 @@ -export {FormlyMatRadioModule} from './radio.module'; -export {FormlyFieldRadio} from './radio.type'; diff --git a/src/app/ui/formly-material-components/radio/src/radio.module.ts b/src/app/ui/formly-material-components/radio/src/radio.module.ts deleted file mode 100644 index 022c97881c..0000000000 --- a/src/app/ui/formly-material-components/radio/src/radio.module.ts +++ /dev/null @@ -1,33 +0,0 @@ -import {NgModule} from '@angular/core'; -import {CommonModule} from '@angular/common'; -import {FormlyModule} from '@ngx-formly/core'; -import {ReactiveFormsModule} from '@angular/forms'; -import {FormlySelectModule} from '@ngx-formly/core/select'; - -import {FormlyMatFormFieldModule} from '../../form-field'; -import {MatRadioModule} from '@angular/material/radio'; - -import {FormlyFieldRadio} from './radio.type'; -import {TranslateModule} from '@ngx-translate/core'; - -@NgModule({ - declarations: [FormlyFieldRadio], - imports: [ - CommonModule, - ReactiveFormsModule, - MatRadioModule, - TranslateModule, - - FormlyMatFormFieldModule, - FormlySelectModule, - FormlyModule.forChild({ - types: [{ - name: 'radio', - component: FormlyFieldRadio, - wrappers: ['form-field'], - }], - }), - ], -}) -export class FormlyMatRadioModule { -} diff --git a/src/app/ui/formly-material-components/radio/src/radio.type.ts b/src/app/ui/formly-material-components/radio/src/radio.type.ts deleted file mode 100644 index c8557fa667..0000000000 --- a/src/app/ui/formly-material-components/radio/src/radio.type.ts +++ /dev/null @@ -1,38 +0,0 @@ -import {Component, ViewChild} from '@angular/core'; -import {FieldType} from '../../form-field'; -import {MatRadioGroup} from '@angular/material/radio'; - -@Component({ - selector: 'formly-field-mat-radio', - template: ` - - - {{ option.label|translate }} - - - `, -}) -export class FormlyFieldRadio extends FieldType { - @ViewChild(MatRadioGroup, {static: true}) radioGroup!: MatRadioGroup; - defaultOptions = { - templateOptions: { - hideFieldUnderline: true, - floatLabel: 'always', - options: [], - }, - }; - - onContainerClick(event: MouseEvent): void { - if (this.radioGroup._radios.length && !this.radioGroup.selected) { - this.radioGroup._radios.first.focus(); - } - super.onContainerClick(event); - } -} diff --git a/src/app/ui/formly-material-components/select/index.ts b/src/app/ui/formly-material-components/select/index.ts deleted file mode 100644 index decc72d85b..0000000000 --- a/src/app/ui/formly-material-components/select/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './src/public_api'; diff --git a/src/app/ui/formly-material-components/select/package.json b/src/app/ui/formly-material-components/select/package.json deleted file mode 100644 index 4bbd7d0f7b..0000000000 --- a/src/app/ui/formly-material-components/select/package.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "ngPackage": {} -} diff --git a/src/app/ui/formly-material-components/select/src/public_api.ts b/src/app/ui/formly-material-components/select/src/public_api.ts deleted file mode 100644 index 4ddb5dc118..0000000000 --- a/src/app/ui/formly-material-components/select/src/public_api.ts +++ /dev/null @@ -1,2 +0,0 @@ -export {FormlyMatSelectModule} from './select.module'; -export {FormlyFieldSelect} from './select.type'; diff --git a/src/app/ui/formly-material-components/select/src/select.module.ts b/src/app/ui/formly-material-components/select/src/select.module.ts deleted file mode 100644 index 0d82a19a71..0000000000 --- a/src/app/ui/formly-material-components/select/src/select.module.ts +++ /dev/null @@ -1,35 +0,0 @@ -import {NgModule} from '@angular/core'; -import {CommonModule} from '@angular/common'; -import {ReactiveFormsModule} from '@angular/forms'; -import {FormlyModule} from '@ngx-formly/core'; -import {FormlySelectModule} from '@ngx-formly/core/select'; - -import {FormlyMatFormFieldModule} from '../../form-field'; -import {MatSelectModule} from '@angular/material/select'; - -import {FormlyFieldSelect} from './select.type'; -import {MatPseudoCheckboxModule} from '@angular/material/core'; -import {TranslateModule} from '@ngx-translate/core'; - -@NgModule({ - declarations: [FormlyFieldSelect], - imports: [ - CommonModule, - ReactiveFormsModule, - MatSelectModule, - MatPseudoCheckboxModule, - TranslateModule.forChild(), - - FormlyMatFormFieldModule, - FormlySelectModule, - FormlyModule.forChild({ - types: [{ - name: 'select', - component: FormlyFieldSelect, - wrappers: ['form-field'], - }], - }), - ], -}) -export class FormlyMatSelectModule { -} diff --git a/src/app/ui/formly-material-components/select/src/select.spec.ts b/src/app/ui/formly-material-components/select/src/select.spec.ts deleted file mode 100644 index 4d7b44f98e..0000000000 --- a/src/app/ui/formly-material-components/select/src/select.spec.ts +++ /dev/null @@ -1,236 +0,0 @@ -import {NoopAnimationsModule} from '@angular/platform-browser/animations'; -import {MatSelectModule} from '@angular/material/select'; -import {async, ComponentFixture, fakeAsync, TestBed, tick} from '@angular/core/testing'; -import {createGenericTestComponent} from '../../../../../../ngx-formly/src/core/src/lib/test-utils'; -import {By} from '@angular/platform-browser'; - -import {Component, ViewChild} from '@angular/core'; -import {FormGroup, ReactiveFormsModule} from '@angular/forms'; -import {FormlyForm, FormlyModule} from '@ngx-formly/core'; -import {FormlySelectModule} from '@ngx-formly/core/select'; -import {FormlyFieldSelect} from './select.type'; -import {of as observableOf} from 'rxjs'; -import {MatPseudoCheckboxModule} from '@angular/material/core'; -import {timeout} from 'rxjs/operators'; - -const createTestComponent = (html: string) => - createGenericTestComponent(html, TestComponent) as ComponentFixture; - -let testComponentInputs; - -describe('ui-material: Formly Field Select Component', () => { - beforeEach(() => { - TestBed.configureTestingModule({ - declarations: [TestComponent, FormlyFieldSelect], - imports: [ - NoopAnimationsModule, - MatSelectModule, - MatPseudoCheckboxModule, - ReactiveFormsModule, - FormlySelectModule, - FormlyModule.forRoot({ - types: [ - { - name: 'select', - component: FormlyFieldSelect, - }, - ], - }), - ], - }); - }); - - describe('options', () => { - beforeEach(() => { - testComponentInputs = { - form: new FormGroup({}), - options: {}, - model: {}, - }; - }); - - it('should correctly bind to a static array of data', () => { - testComponentInputs.fields = [{ - key: 'sportId', - type: 'select', - templateOptions: { - options: [ - {id: '1', name: 'Soccer'}, - {id: '2', name: 'Basketball'}, - {id: {test: 'A'}, name: 'Not Soccer or Basketball'}, - ], - valueProp: 'id', - labelProp: 'name', - }, - }]; - - const fixture = createTestComponent(''), - trigger = fixture.debugElement.query(By.css('.mat-select-trigger')).nativeElement; - - trigger.click(); - fixture.detectChanges(); - - expect(fixture.debugElement.queryAll(By.css('mat-option')).length).toEqual(3); - }); - - it('should correctly bind to an Observable', async(() => { - const sports$ = observableOf([ - {id: '1', name: 'Soccer'}, - {id: '2', name: 'Basketball'}, - {id: {test: 'A'}, name: 'Not Soccer or Basketball'}, - ]); - - testComponentInputs.fields = [{ - key: 'sportId', - type: 'select', - templateOptions: { - options: sports$, - valueProp: 'id', - labelProp: 'name', - }, - }]; - - const fixture = createTestComponent(''), - trigger = fixture.debugElement.query(By.css('.mat-select-trigger')).nativeElement; - - trigger.click(); - fixture.detectChanges(); - - expect(fixture.debugElement.queryAll(By.css('mat-option')).length).toEqual(3); - })); - - }); - - describe('multi select', () => { - - beforeEach(() => { - testComponentInputs = { - form: new FormGroup({}), - options: {}, - model: {}, - }; - - testComponentInputs.fields = [{ - key: 'sportId', - type: 'select', - templateOptions: { - multiple: true, - selectAllOption: 'Select All', - options: [ - {id: '1', name: 'Soccer'}, - {id: '2', name: 'Basketball'}, - {id: '3', name: 'Martial Arts'}, - ], - valueProp: 'id', - labelProp: 'name', - }, - }]; - }); - - it('should have a "Select All" option if configured', () => { - const fixture = createTestComponent(''); - const trigger = fixture.debugElement.query(By.css('.mat-select-trigger')).nativeElement; - - trigger.click(); - fixture.detectChanges(); - - expect(fixture.debugElement.queryAll(By.css('mat-option')).length).toEqual(1 + 3); - }); - - it('should select all options if clicking the "Select All" option', () => { - const fixture = createTestComponent(''); - const trigger = fixture.debugElement.query(By.css('.mat-select-trigger')).nativeElement; - - trigger.click(); - fixture.detectChanges(); - - const selectAllOption = fixture.debugElement.queryAll(By.css('mat-option'))[0].nativeElement; - selectAllOption.click(); - fixture.detectChanges(); - - expect(testComponentInputs.form.get('sportId').value.length).toEqual(3); - - // clicking again should deselect all - selectAllOption.click(); - fixture.detectChanges(); - - expect(testComponentInputs.form.get('sportId').value.length).toEqual(0); - }); - - it('should use the selectAllOption prop as label for the option entry', () => { - testComponentInputs.fields = [{ - key: 'sportId', - type: 'select', - templateOptions: { - multiple: true, - selectAllOption: 'Click me!!', - options: [ - {id: '1', name: 'Soccer'}, - {id: '2', name: 'Basketball'}, - {id: '3', name: 'Martial Arts'}, - ], - valueProp: 'id', - labelProp: 'name', - }, - }]; - - const fixture = createTestComponent(''); - const trigger = fixture.debugElement.query(By.css('.mat-select-trigger')).nativeElement; - - trigger.click(); - fixture.detectChanges(); - - const selectAllOption = fixture.debugElement.queryAll(By.css('mat-option'))[0].nativeElement; - expect(selectAllOption.innerHTML).toContain('Click me!!'); - }); - - it('should correctly bind a multi select to an observable', fakeAsync(() => { - // bind a value which triggers the error in case - testComponentInputs.model = { - sportId: [1], - }; - testComponentInputs.fields = [{ - key: 'sportId', - type: 'select', - templateOptions: { - multiple: true, - selectAllOption: 'Click me!!', - options: observableOf([ - {id: '1', name: 'Soccer'}, - {id: '2', name: 'Basketball'}, - {id: '3', name: 'Martial Arts'}, - ]).pipe( - timeout(50), - ), - valueProp: 'id', - labelProp: 'name', - }, - }]; - - const fixture = createTestComponent(''); - - tick(51); - fixture.detectChanges(); - - const trigger = fixture.debugElement.query(By.css('.mat-select-trigger')).nativeElement; - - trigger.click(); - fixture.detectChanges(); - - const selectAllOption = fixture.debugElement.queryAll(By.css('mat-option'))[0].nativeElement; - expect(selectAllOption.innerHTML).toContain('Click me!!'); - })); - - }); - -}); - -@Component({selector: 'formly-form-test', template: '', entryComponents: []}) -class TestComponent { - @ViewChild(FormlyForm) formlyForm: FormlyForm; - - fields = testComponentInputs.fields; - form: FormGroup = testComponentInputs.form; - model = testComponentInputs.model || {}; - options = testComponentInputs.options; -} diff --git a/src/app/ui/formly-material-components/select/src/select.type.ts b/src/app/ui/formly-material-components/select/src/select.type.ts deleted file mode 100644 index 60a0c4590e..0000000000 --- a/src/app/ui/formly-material-components/select/src/select.type.ts +++ /dev/null @@ -1,89 +0,0 @@ -import {Component} from '@angular/core'; -import {MatSelectChange} from '@angular/material/select'; -import {FieldType} from '../../form-field'; - -@Component({ - selector: 'formly-field-mat-select', - template: ` - - - - - {{ to.selectAllOption }} - - - - - - - - - - - - {{ child.label|translate }} - - - {{ item.label|translate }} - - - - `, -}) -export class FormlyFieldSelect extends FieldType { - defaultOptions = { - templateOptions: {options: []}, - }; - - get value() { - return this.formControl.value || []; - } - - getState(options: any[]) { - if (this.value.length > 0) { - return this.value.length !== options.length - ? 'indeterminate' - : 'checked'; - } - - return ''; - } - - toggleSelectAll(options: any[]) { - this.formControl.setValue( - this.value.length !== options.length - ? options.map(x => x.value) - : [], - ); - } - - change($event: MatSelectChange) { - if (this.to.change) { - this.to.change(this.field, $event); - } - } - - compareWith(o1: any, o2: any) { - return o1 === o2; - } -} diff --git a/src/app/ui/formly-material-components/slider/index.ts b/src/app/ui/formly-material-components/slider/index.ts deleted file mode 100644 index decc72d85b..0000000000 --- a/src/app/ui/formly-material-components/slider/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './src/public_api'; diff --git a/src/app/ui/formly-material-components/slider/package.json b/src/app/ui/formly-material-components/slider/package.json deleted file mode 100644 index 4bbd7d0f7b..0000000000 --- a/src/app/ui/formly-material-components/slider/package.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "ngPackage": {} -} diff --git a/src/app/ui/formly-material-components/slider/src/public_api.ts b/src/app/ui/formly-material-components/slider/src/public_api.ts deleted file mode 100644 index c611d76799..0000000000 --- a/src/app/ui/formly-material-components/slider/src/public_api.ts +++ /dev/null @@ -1 +0,0 @@ -export {FormlyMatSliderModule} from './slider.module'; diff --git a/src/app/ui/formly-material-components/slider/src/slider.module.ts b/src/app/ui/formly-material-components/slider/src/slider.module.ts deleted file mode 100644 index d0c2be59b3..0000000000 --- a/src/app/ui/formly-material-components/slider/src/slider.module.ts +++ /dev/null @@ -1,29 +0,0 @@ -import {NgModule} from '@angular/core'; -import {CommonModule} from '@angular/common'; -import {FormlyModule} from '@ngx-formly/core'; -import {ReactiveFormsModule} from '@angular/forms'; -import {MatSliderModule} from '@angular/material/slider'; -import {FormlyMatFormFieldModule} from '../../form-field'; - -import {FormlySliderTypeComponent} from './slider.type'; -import {TranslateModule} from '@ngx-translate/core'; - -@NgModule({ - declarations: [FormlySliderTypeComponent], - imports: [ - CommonModule, - ReactiveFormsModule, - MatSliderModule, - TranslateModule, - FormlyMatFormFieldModule, - FormlyModule.forChild({ - types: [{ - name: 'slider', - component: FormlySliderTypeComponent, - wrappers: ['form-field'], - }], - }), - ], -}) -export class FormlyMatSliderModule { -} diff --git a/src/app/ui/formly-material-components/slider/src/slider.type.ts b/src/app/ui/formly-material-components/slider/src/slider.type.ts deleted file mode 100644 index 650c0cff65..0000000000 --- a/src/app/ui/formly-material-components/slider/src/slider.type.ts +++ /dev/null @@ -1,31 +0,0 @@ -import {Component, ViewChild} from '@angular/core'; -import {FieldType} from '../../form-field'; -import {MatSlider} from '@angular/material/slider'; - -@Component({ - selector: 'formly-field-mat-slider', - template: ` - - - `, -}) -export class FormlySliderTypeComponent extends FieldType { - @ViewChild(MatSlider, {static: true}) slider!: MatSlider; - defaultOptions = { - templateOptions: { - hideFieldUnderline: true, - floatLabel: 'always', - }, - }; - - onContainerClick(event: MouseEvent): void { - this.slider.focus(); - super.onContainerClick(event); - } -} diff --git a/src/app/ui/formly-material-components/src/lib/ui-material.module.ts b/src/app/ui/formly-material-components/src/lib/ui-material.module.ts deleted file mode 100644 index a333ff7f96..0000000000 --- a/src/app/ui/formly-material-components/src/lib/ui-material.module.ts +++ /dev/null @@ -1,27 +0,0 @@ -import {NgModule} from '@angular/core'; - -import {FormlyMatFormFieldModule} from '../../form-field'; -import {FormlyMatInputModule} from '../../input'; -import {FormlyMatTextAreaModule} from '../../textarea'; -import {FormlyMatRadioModule} from '../../radio'; -import {FormlyMatCheckboxModule} from '../../checkbox'; -import {FormlyMatMultiCheckboxModule} from '../../multicheckbox'; -import {FormlyMatSelectModule} from '../../select'; -import {TranslateModule} from '@ngx-translate/core'; -import {FormlyMatToggleModule} from '../../toggle'; - -@NgModule({ - imports: [ - FormlyMatFormFieldModule, - FormlyMatInputModule, - FormlyMatTextAreaModule, - FormlyMatRadioModule, - FormlyMatCheckboxModule, - FormlyMatMultiCheckboxModule, - FormlyMatSelectModule, - FormlyMatToggleModule, - TranslateModule, - ], -}) -export class FormlyMaterialModule { -} diff --git a/src/app/ui/formly-material-components/src/lib/ui-material.ts b/src/app/ui/formly-material-components/src/lib/ui-material.ts deleted file mode 100644 index 46d92fa561..0000000000 --- a/src/app/ui/formly-material-components/src/lib/ui-material.ts +++ /dev/null @@ -1,3 +0,0 @@ -export {FieldType} from './../../form-field'; - -export {FormlyMaterialModule} from './ui-material.module'; diff --git a/src/app/ui/formly-material-components/src/public_api.ts b/src/app/ui/formly-material-components/src/public_api.ts deleted file mode 100644 index bc838578bc..0000000000 --- a/src/app/ui/formly-material-components/src/public_api.ts +++ /dev/null @@ -1,5 +0,0 @@ -/* - * Public API Surface of material - */ - -export * from './lib/ui-material'; diff --git a/src/app/ui/formly-material-components/src/test.ts b/src/app/ui/formly-material-components/src/test.ts deleted file mode 100644 index c7515e509a..0000000000 --- a/src/app/ui/formly-material-components/src/test.ts +++ /dev/null @@ -1,19 +0,0 @@ -// This file is required by karma.conf.js and loads recursively all the .spec and framework files - -import 'core-js/es7/reflect'; -import 'zone.js/dist/zone'; -import 'zone.js/dist/zone-testing'; -import {getTestBed} from '@angular/core/testing'; -import {BrowserDynamicTestingModule, platformBrowserDynamicTesting,} from '@angular/platform-browser-dynamic/testing'; - -declare const require: any; - -// First, initialize the Angular testing environment. -getTestBed().initTestEnvironment( - BrowserDynamicTestingModule, - platformBrowserDynamicTesting(), -); -// Then we find all the tests. -const context = require.context('../', true, /\.spec\.ts$/); -// And load the modules. -context.keys().map(context); diff --git a/src/app/ui/formly-material-components/textarea/index.ts b/src/app/ui/formly-material-components/textarea/index.ts deleted file mode 100644 index decc72d85b..0000000000 --- a/src/app/ui/formly-material-components/textarea/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './src/public_api'; diff --git a/src/app/ui/formly-material-components/textarea/package.json b/src/app/ui/formly-material-components/textarea/package.json deleted file mode 100644 index 4bbd7d0f7b..0000000000 --- a/src/app/ui/formly-material-components/textarea/package.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "ngPackage": {} -} diff --git a/src/app/ui/formly-material-components/textarea/src/public_api.ts b/src/app/ui/formly-material-components/textarea/src/public_api.ts deleted file mode 100644 index 3e09de1969..0000000000 --- a/src/app/ui/formly-material-components/textarea/src/public_api.ts +++ /dev/null @@ -1,2 +0,0 @@ -export {FormlyMatTextAreaModule} from './textarea.module'; -export {FormlyFieldTextArea} from './textarea.type'; diff --git a/src/app/ui/formly-material-components/textarea/src/textarea.module.ts b/src/app/ui/formly-material-components/textarea/src/textarea.module.ts deleted file mode 100644 index 6458c4ca6b..0000000000 --- a/src/app/ui/formly-material-components/textarea/src/textarea.module.ts +++ /dev/null @@ -1,33 +0,0 @@ -import {NgModule} from '@angular/core'; -import {CommonModule} from '@angular/common'; -import {FormlyModule} from '@ngx-formly/core'; -import {ReactiveFormsModule} from '@angular/forms'; - -import {FormlyMatFormFieldModule} from '../../form-field'; -import {MatInputModule} from '@angular/material/input'; - -import {FormlyFieldTextArea} from './textarea.type'; -import {TranslateModule} from '@ngx-translate/core'; - -@NgModule({ - declarations: [FormlyFieldTextArea], - imports: [ - CommonModule, - ReactiveFormsModule, - MatInputModule, - TranslateModule, - - FormlyMatFormFieldModule, - FormlyModule.forChild({ - types: [ - { - name: 'textarea', - component: FormlyFieldTextArea, - wrappers: ['form-field'], - }, - ], - }), - ], -}) -export class FormlyMatTextAreaModule { -} diff --git a/src/app/ui/formly-material-components/textarea/src/textarea.type.ts b/src/app/ui/formly-material-components/textarea/src/textarea.type.ts deleted file mode 100644 index fbba7659ae..0000000000 --- a/src/app/ui/formly-material-components/textarea/src/textarea.type.ts +++ /dev/null @@ -1,30 +0,0 @@ -import {Component, OnInit, ViewChild} from '@angular/core'; -import {MatInput} from '@angular/material/input'; -import {FieldType} from '../../form-field'; - -@Component({ - selector: 'formly-field-mat-textarea', - template: ` - - `, -}) -export class FormlyFieldTextArea extends FieldType implements OnInit { - @ViewChild(MatInput, {static: true}) formFieldControl!: MatInput; - defaultOptions = { - templateOptions: { - cols: 1, - rows: 1, - }, - }; -} diff --git a/src/app/ui/formly-material-components/toggle/index.ts b/src/app/ui/formly-material-components/toggle/index.ts deleted file mode 100644 index decc72d85b..0000000000 --- a/src/app/ui/formly-material-components/toggle/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './src/public_api'; diff --git a/src/app/ui/formly-material-components/toggle/package.json b/src/app/ui/formly-material-components/toggle/package.json deleted file mode 100644 index 4bbd7d0f7b..0000000000 --- a/src/app/ui/formly-material-components/toggle/package.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "ngPackage": {} -} diff --git a/src/app/ui/formly-material-components/toggle/src/public_api.ts b/src/app/ui/formly-material-components/toggle/src/public_api.ts deleted file mode 100644 index 46907081ef..0000000000 --- a/src/app/ui/formly-material-components/toggle/src/public_api.ts +++ /dev/null @@ -1 +0,0 @@ -export {FormlyMatToggleModule} from './toggle.module'; diff --git a/src/app/ui/formly-material-components/toggle/src/toggle.module.ts b/src/app/ui/formly-material-components/toggle/src/toggle.module.ts deleted file mode 100644 index e1878bebb2..0000000000 --- a/src/app/ui/formly-material-components/toggle/src/toggle.module.ts +++ /dev/null @@ -1,29 +0,0 @@ -import {NgModule} from '@angular/core'; -import {CommonModule} from '@angular/common'; -import {FormlyModule} from '@ngx-formly/core'; -import {ReactiveFormsModule} from '@angular/forms'; -import {MatSlideToggleModule} from '@angular/material/slide-toggle'; -import {FormlyMatFormFieldModule} from '../../form-field'; - -import {FormlyToggleTypeComponent} from './toggle.type'; -import {TranslateModule} from '@ngx-translate/core'; - -@NgModule({ - declarations: [FormlyToggleTypeComponent], - imports: [ - CommonModule, - TranslateModule, - ReactiveFormsModule, - MatSlideToggleModule, - FormlyMatFormFieldModule, - FormlyModule.forChild({ - types: [{ - name: 'toggle', - component: FormlyToggleTypeComponent, - wrappers: ['form-field'], - }], - }), - ], -}) -export class FormlyMatToggleModule { -} diff --git a/src/app/ui/formly-material-components/toggle/src/toggle.type.ts b/src/app/ui/formly-material-components/toggle/src/toggle.type.ts deleted file mode 100644 index 5d5fcdbd9e..0000000000 --- a/src/app/ui/formly-material-components/toggle/src/toggle.type.ts +++ /dev/null @@ -1,31 +0,0 @@ -import {Component, ViewChild} from '@angular/core'; -import {FieldType} from '../../form-field'; -import {MatSlideToggle} from '@angular/material/slide-toggle'; - -@Component({ - selector: 'formly-field-mat-toggle', - template: ` - - {{ to.label|translate }} - - `, -}) -export class FormlyToggleTypeComponent extends FieldType { - @ViewChild(MatSlideToggle, {static: true}) slideToggle!: MatSlideToggle; - defaultOptions = { - templateOptions: { - hideFieldUnderline: true, - floatLabel: 'always', - hideLabel: true, - }, - }; - - onContainerClick(event: MouseEvent): void { - this.slideToggle.focus(); - super.onContainerClick(event); - } -} diff --git a/src/app/ui/formly-translate-extension/formly-translate-extension.ts b/src/app/ui/formly-translate-extension/formly-translate-extension.ts new file mode 100644 index 0000000000..a44d12615c --- /dev/null +++ b/src/app/ui/formly-translate-extension/formly-translate-extension.ts @@ -0,0 +1,44 @@ +import {FormlyFieldConfig} from '@ngx-formly/core'; +import {TranslateService} from '@ngx-translate/core'; +import {of} from 'rxjs'; + +export class TranslateExtension { + constructor( + private translate: TranslateService, + ) { + } + + prePopulate(field: FormlyFieldConfig) { + const to = field.templateOptions || {}; + + field.expressionProperties = { + ...(field.expressionProperties || {}), + ...(to.label + ? {'templateOptions.label': this.translate.stream(to.label)} + : {}), + ...(to.placeholder + ? {'templateOptions.placeholder': this.translate.stream(to.placeholder)} + : {}), + ...(to.options && Array.isArray(to.options) + ? { + // TODO better solution working with live changes + 'templateOptions.options': of(to.options.map((opt) => { + return { + ...opt, + label: this.translate.instant(opt.label), + }; + })), + } + : {}), + }; + } +} + +export function registerTranslateExtension(translate: TranslateService) { + return { + extensions: [{ + name: 'translate', + extension: new TranslateExtension(translate) + }], + }; +} diff --git a/src/app/ui/ui.module.ts b/src/app/ui/ui.module.ts index 759c6987f9..34a3c33771 100644 --- a/src/app/ui/ui.module.ts +++ b/src/app/ui/ui.module.ts @@ -1,4 +1,4 @@ -import {NgModule} from '@angular/core'; +import {ErrorHandler, NgModule} from '@angular/core'; import {CommonModule} from '@angular/common'; import {InputDurationDirective} from './duration/input-duration.directive'; import {DurationFromStringPipe} from './duration/duration-from-string.pipe'; @@ -31,7 +31,7 @@ import {MatToolbarModule} from '@angular/material/toolbar'; import {MatTooltipModule} from '@angular/material/tooltip'; import {MarkdownModule, MarkdownService} from 'ngx-markdown'; import {FormsModule, ReactiveFormsModule} from '@angular/forms'; -import {FormlyModule} from '@ngx-formly/core'; +import {FORMLY_CONFIG, FormlyModule} from '@ngx-formly/core'; import {ThemeSelectComponent} from './theme-select/theme-select.component'; import {MsToStringPipe} from './duration/ms-to-string.pipe'; import {StringToMsPipe} from './duration/string-to-ms.pipe'; @@ -60,8 +60,12 @@ import {ChipListInputComponent} from './chip-list-input/chip-list-input.componen import {ValidationModule} from './validation/validation.module'; import {OwlDateTimeModule, OwlNativeDateTimeModule} from 'ng-pick-datetime'; import {FullPageSpinnerComponent} from './full-page-spinner/full-page-spinner.component'; -import {TranslateModule} from '@ngx-translate/core'; -import {FormlyMaterialModule} from './formly-material-components/src/lib/ui-material'; +import {TranslateModule, TranslateService} from '@ngx-translate/core'; +import {FormlyMaterialModule} from '@ngx-formly/material'; +import {GlobalErrorHandler} from '../core/error-handler/global-error-handler.class'; +import {HAMMER_GESTURE_CONFIG} from '@angular/platform-browser'; +import {MyHammerConfig} from '../../hammer-config.class'; +import {registerTranslateExtension} from './formly-translate-extension/formly-translate-extension'; @NgModule({ @@ -222,7 +226,17 @@ import {FormlyMaterialModule} from './formly-material-components/src/lib/ui-mate MarkdownModule, ValidationModule, TranslateModule, - ] + ], + providers: [ + {provide: ErrorHandler, useClass: GlobalErrorHandler}, + {provide: HAMMER_GESTURE_CONFIG, useClass: MyHammerConfig}, + { + provide: FORMLY_CONFIG, + multi: true, + useFactory: registerTranslateExtension, + deps: [TranslateService], + }, + ], }) export class UiModule { constructor(private _markdownService: MarkdownService) { diff --git a/yarn.lock b/yarn.lock index afbb3e8a54..e80597914a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -458,6 +458,13 @@ dependencies: tslib "^1.7.1" +"@ngx-formly/material@^5.2.0": + version "5.2.0" + resolved "https://registry.yarnpkg.com/@ngx-formly/material/-/material-5.2.0.tgz#dfbe8109f1af0f63221169bffabcf4e6bce90f18" + integrity sha512-RQajdWJz5fGmyRWzdcr3z3rGJF3X1xgqY9305Bw/vJyckTRfuT7yD4bZNna01HkeADafCVipnC2EogtdETNkoQ== + dependencies: + tslib "^1.9.0" + "@ngx-translate/core@^11.0.1": version "11.0.1" resolved "https://registry.yarnpkg.com/@ngx-translate/core/-/core-11.0.1.tgz#cecefad41f06368f5859dac48fec8fcc4485615f"