From 7cc7ec1d86188155b1541247512a36204bcc9b87 Mon Sep 17 00:00:00 2001 From: Silke Date: Wed, 8 Dec 2021 15:37:31 +0100 Subject: [PATCH] refactor: remove obsolete form components (#953) BREAKING CHANGES: Our deprecated form components have been removed, use Formly to generate and maintain your forms. (see [Migrations / 1.4 to 2.0](https://github.com/intershop/intershop-pwa/blob/develop/docs/guides/migrations.md#14-to-20) for more details. --- docs/guides/forms.md | 1 - docs/guides/migrations.md | 5 + .../checkbox/checkbox.component.html | 10 -- .../checkbox/checkbox.component.spec.ts | 57 ------- .../components/checkbox/checkbox.component.ts | 24 --- .../form-element/form-element.component.ts | 97 ----------- .../input-birthday.component.html | 47 ------ .../input-birthday.component.spec.ts | 45 ----- .../input-birthday.component.ts | 100 ----------- .../components/input/input.component.html | 28 --- .../components/input/input.component.spec.ts | 159 ------------------ .../forms/components/input/input.component.ts | 66 -------- .../select-address.component.spec.ts | 76 --------- .../select-address.component.ts | 35 ---- .../select-country.component.spec.ts | 69 -------- .../select-country.component.ts | 38 ----- .../select-region.component.spec.ts | 68 -------- .../select-region/select-region.component.ts | 38 ----- .../select-title.component.spec.ts | 65 ------- .../select-title/select-title.component.ts | 58 ------- .../components/select/select.component.html | 28 --- .../select/select.component.spec.ts | 110 ------------ .../components/select/select.component.ts | 39 ----- .../textarea/textarea.component.html | 25 --- .../textarea/textarea.component.spec.ts | 153 ----------------- .../components/textarea/textarea.component.ts | 64 ------- src/app/shared/forms/forms.module.ts | 28 +-- 27 files changed, 7 insertions(+), 1526 deletions(-) delete mode 100644 src/app/shared/forms/components/checkbox/checkbox.component.html delete mode 100644 src/app/shared/forms/components/checkbox/checkbox.component.spec.ts delete mode 100644 src/app/shared/forms/components/checkbox/checkbox.component.ts delete mode 100644 src/app/shared/forms/components/form-element/form-element.component.ts delete mode 100644 src/app/shared/forms/components/input-birthday/input-birthday.component.html delete mode 100644 src/app/shared/forms/components/input-birthday/input-birthday.component.spec.ts delete mode 100644 src/app/shared/forms/components/input-birthday/input-birthday.component.ts delete mode 100644 src/app/shared/forms/components/input/input.component.html delete mode 100644 src/app/shared/forms/components/input/input.component.spec.ts delete mode 100644 src/app/shared/forms/components/input/input.component.ts delete mode 100644 src/app/shared/forms/components/select-address/select-address.component.spec.ts delete mode 100644 src/app/shared/forms/components/select-address/select-address.component.ts delete mode 100644 src/app/shared/forms/components/select-country/select-country.component.spec.ts delete mode 100644 src/app/shared/forms/components/select-country/select-country.component.ts delete mode 100644 src/app/shared/forms/components/select-region/select-region.component.spec.ts delete mode 100644 src/app/shared/forms/components/select-region/select-region.component.ts delete mode 100644 src/app/shared/forms/components/select-title/select-title.component.spec.ts delete mode 100644 src/app/shared/forms/components/select-title/select-title.component.ts delete mode 100644 src/app/shared/forms/components/select/select.component.html delete mode 100644 src/app/shared/forms/components/select/select.component.spec.ts delete mode 100644 src/app/shared/forms/components/select/select.component.ts delete mode 100644 src/app/shared/forms/components/textarea/textarea.component.html delete mode 100644 src/app/shared/forms/components/textarea/textarea.component.spec.ts delete mode 100644 src/app/shared/forms/components/textarea/textarea.component.ts diff --git a/docs/guides/forms.md b/docs/guides/forms.md index a1efd93f20..0455c822ce 100644 --- a/docs/guides/forms.md +++ b/docs/guides/forms.md @@ -33,7 +33,6 @@ If you are looking for documentation, refer to [older documentation](https://git - Reusable form components are available as Formly field types that come with wrappers and extensions. You can find them in: _app/shared/formly/_ or _app/shared/formly-address-forms/components_ - These forms can be used as (sub)forms on arbitrary pages, e.g., there are address forms on registration page, checkout and _My Account_ pages. -- There are still some deprecated form components which you can find in _app/shared/forms/components/\_ or _app/shared/address-forms/components/\_ ### Page Specific Form Components diff --git a/docs/guides/migrations.md b/docs/guides/migrations.md index 50f9cb0cca..6a713223fb 100644 --- a/docs/guides/migrations.md +++ b/docs/guides/migrations.md @@ -19,6 +19,11 @@ In projects where the recommended procedure for using a custom theme has been fo We moved the model `SelectOption` from the select.component.ts to the select-option.model.ts and adapted all necessary imports. +In the PWA 0.28 we introduced the usage of [Formly](https://formly.dev/) to generate and maintain our forms. +Now we removed the obsolete form components. +If you want to use the obsolete form components in your project nevertheless, skip the commit `remove obsolete form components`. +For more information concerning Formly please refer to our [Formly - Guide](./formly.md)). + ## 1.1 to 1.2 The `dist` folder now only contains results of the build process (except for `healthcheck.js`). diff --git a/src/app/shared/forms/components/checkbox/checkbox.component.html b/src/app/shared/forms/components/checkbox/checkbox.component.html deleted file mode 100644 index db97bdc580..0000000000 --- a/src/app/shared/forms/components/checkbox/checkbox.component.html +++ /dev/null @@ -1,10 +0,0 @@ -
-
- -
- -
diff --git a/src/app/shared/forms/components/checkbox/checkbox.component.spec.ts b/src/app/shared/forms/components/checkbox/checkbox.component.spec.ts deleted file mode 100644 index f8865d6dc1..0000000000 --- a/src/app/shared/forms/components/checkbox/checkbox.component.spec.ts +++ /dev/null @@ -1,57 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms'; -import { TranslateModule } from '@ngx-translate/core'; -import { MockComponent, MockDirective } from 'ng-mocks'; - -import { FormControlFeedbackComponent } from 'ish-shared/forms/components/form-control-feedback/form-control-feedback.component'; -import { ShowFormFeedbackDirective } from 'ish-shared/forms/directives/show-form-feedback.directive'; - -import { CheckboxComponent } from './checkbox.component'; - -// tslint:disable ish-deprecation -describe('Checkbox Component', () => { - let component: CheckboxComponent; - let fixture: ComponentFixture; - let element: HTMLElement; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ - CheckboxComponent, - MockComponent(FormControlFeedbackComponent), - MockDirective(ShowFormFeedbackDirective), - ], - imports: [ReactiveFormsModule, TranslateModule.forRoot()], - }).compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(CheckboxComponent); - component = fixture.componentInstance; - element = fixture.nativeElement; - - const form = new FormGroup({ - requiredField: new FormControl('', [Validators.required]), - simpleField: new FormControl(), - }); - component.label = 'label'; - component.form = form; - component.controlName = 'requiredField'; - }); - - it('should be created', () => { - expect(component).toBeTruthy(); - expect(element).toBeTruthy(); - expect(() => fixture.detectChanges()).not.toThrow(); - }); - - it('should be rendered on creation', () => { - fixture.detectChanges(); - expect(element.querySelector('[data-testing-id=requiredField]')).toBeTruthy(); - }); - - it('should set input type properly on creation', () => { - fixture.detectChanges(); - expect(element.querySelector('input[type=checkbox]')).toBeTruthy(); - }); -}); diff --git a/src/app/shared/forms/components/checkbox/checkbox.component.ts b/src/app/shared/forms/components/checkbox/checkbox.component.ts deleted file mode 100644 index 3e9527f1c9..0000000000 --- a/src/app/shared/forms/components/checkbox/checkbox.component.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; -import { TranslateService } from '@ngx-translate/core'; - -import { FormElementComponent } from 'ish-shared/forms/components/form-element/form-element.component'; - -// tslint:disable ish-deprecation - -/** - * @deprecated use formly instead - */ -@Component({ - selector: 'ish-checkbox', - templateUrl: './checkbox.component.html', - changeDetection: ChangeDetectionStrategy.Default, -}) -export class CheckboxComponent extends FormElementComponent implements OnInit { - constructor(protected translate: TranslateService) { - super(translate); - } - - ngOnInit() { - super.init(); - } -} diff --git a/src/app/shared/forms/components/form-element/form-element.component.ts b/src/app/shared/forms/components/form-element/form-element.component.ts deleted file mode 100644 index 407f1abed5..0000000000 --- a/src/app/shared/forms/components/form-element/form-element.component.ts +++ /dev/null @@ -1,97 +0,0 @@ -import { Component, Input } from '@angular/core'; -import { AbstractControl, FormControl } from '@angular/forms'; -import { TranslateService } from '@ngx-translate/core'; -import { UUID } from 'angular2-uuid'; - -/** - * @deprecated use formly instead - */ -// tslint:disable-next-line: use-component-change-detection -@Component({ template: '' }) -// tslint:disable-next-line: component-creation-test -export abstract class FormElementComponent { - /** - * Name of the corresponding form group (required) - */ - @Input() form: AbstractControl; - /** - * control name, corresponding control with this name should exist in the form group (required) - */ - @Input() controlName: string; - /** - * error messages for each validator of the control(s) - */ - @Input() errorMessages: { [key: string]: string }; - /** - * Label for the input/select field(s) - */ - @Input() label: string; - /** - css-class for the label (default: 'col-md-4') - */ - @Input() labelClass = 'col-md-4'; - /** - css-class for the input/select field (default: 'col-md-8') - */ - @Input() inputClass = 'col-md-8'; - /** - * decides whether to show a required sign after the label - * values: 'auto' (default) - label is marked, if an required validator is set - /* 'on' (label is always marked as required), - /* 'off' (label is never marked as required) - */ - @Input() markRequiredLabel = 'auto'; - - uuid: string; - - constructor(protected translate: TranslateService) {} - - init() { - if (!this.form) { - throw new Error('required input parameter
is missing for FormElementComponent'); - } - if (!this.controlName) { - throw new Error('required input parameter is missing for FormElementComponent'); - } - if (!this.formControl) { - throw new Error( - `input parameter with value '${this.controlName}' does not exist in the given form for FormElementComponent` - ); - } - - this.uuid = UUID.UUID(); // uuid to make the id of the control unique - } - - /** - * get the form control according to the controlName - */ - get formControl(): FormControl { - return this.form.get(this.controlName) as FormControl; - } - - /** decides whether to show a required sign after the label in dependence of the markRequiredLabel - * @returns true, if markRequiredLabel= 'on' - * @returns false, if markRequiredLabel= 'off', - * @returns whether the control is a required field and markRequiredLabel = 'auto' - */ - get required(): boolean { - switch (this.markRequiredLabel) { - case 'on': { - return true; - } - case 'off': { - return false; - } - default: { - // determine, if the control has the required attribute - let required = false; - const formControl = new FormControl(); - if (this.form.get(this.controlName).validator) { - const validationResult = this.form.get(this.controlName).validator(formControl); - required = !!validationResult && validationResult.required; - } - return required; - } - } - } -} diff --git a/src/app/shared/forms/components/input-birthday/input-birthday.component.html b/src/app/shared/forms/components/input-birthday/input-birthday.component.html deleted file mode 100644 index c827865844..0000000000 --- a/src/app/shared/forms/components/input-birthday/input-birthday.component.html +++ /dev/null @@ -1,47 +0,0 @@ -
- -
-
-
- -
mm
-
-
- -
dd
-
-
- -
yyyy
-
-
-
- - -
diff --git a/src/app/shared/forms/components/input-birthday/input-birthday.component.spec.ts b/src/app/shared/forms/components/input-birthday/input-birthday.component.spec.ts deleted file mode 100644 index 39ccac1eb7..0000000000 --- a/src/app/shared/forms/components/input-birthday/input-birthday.component.spec.ts +++ /dev/null @@ -1,45 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms'; -import { TranslateModule } from '@ngx-translate/core'; -import { MockComponent, MockDirective } from 'ng-mocks'; - -import { FormControlFeedbackComponent } from 'ish-shared/forms/components/form-control-feedback/form-control-feedback.component'; -import { ShowFormFeedbackDirective } from 'ish-shared/forms/directives/show-form-feedback.directive'; - -import { InputBirthdayComponent } from './input-birthday.component'; - -// tslint:disable ish-deprecation - -describe('Input Birthday Component', () => { - let component: InputBirthdayComponent; - let fixture: ComponentFixture; - let element: HTMLElement; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ - InputBirthdayComponent, - MockComponent(FormControlFeedbackComponent), - MockDirective(ShowFormFeedbackDirective), - ], - imports: [ReactiveFormsModule, TranslateModule.forRoot()], - }).compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(InputBirthdayComponent); - component = fixture.componentInstance; - element = fixture.nativeElement; - - const form = new FormGroup({ - birthday: new FormControl(), - }); - component.form = form; - }); - - it('should be created', () => { - expect(component).toBeTruthy(); - expect(element).toBeTruthy(); - expect(() => fixture.detectChanges()).not.toThrow(); - }); -}); diff --git a/src/app/shared/forms/components/input-birthday/input-birthday.component.ts b/src/app/shared/forms/components/input-birthday/input-birthday.component.ts deleted file mode 100644 index 998c7fa1af..0000000000 --- a/src/app/shared/forms/components/input-birthday/input-birthday.component.ts +++ /dev/null @@ -1,100 +0,0 @@ -import { ChangeDetectionStrategy, Component, Input, OnDestroy, OnInit } from '@angular/core'; -import { FormBuilder, FormGroup, Validators } from '@angular/forms'; -import { TranslateService } from '@ngx-translate/core'; -import { Subject } from 'rxjs'; -import { takeUntil } from 'rxjs/operators'; - -import { FormElementComponent } from 'ish-shared/forms/components/form-element/form-element.component'; - -// tslint:disable ish-deprecation - -/** - * @deprecated use formly instead - */ -@Component({ - selector: 'ish-input-birthday', - templateUrl: './input-birthday.component.html', - changeDetection: ChangeDetectionStrategy.Default, -}) -export class InputBirthdayComponent extends FormElementComponent implements OnInit, OnDestroy { - @Input() minYear = 0; - @Input() maxYear = 9999; - dateForm: FormGroup; - minDay = 1; - maxDay = 31; - minMonth = 1; - maxMonth = 12; - - private destroy$ = new Subject(); - - constructor(private fb: FormBuilder, protected translate: TranslateService) { - super(translate); - } - - ngOnInit() { - this.setDefaultValues(); // call this method before parent init - super.init(); - this.createForm(); - - // FM: this is temporary (if any subscribe is kept, unsubscribe will be necessary) - this.dateForm.valueChanges.pipe(takeUntil(this.destroy$)).subscribe(() => this.writeBirthday()); - } - - private setDefaultValues() { - this.controlName = this.controlName || 'birthday'; - this.label = this.label || 'Birthday'; // ToDo: Translation key - this.errorMessages = this.errorMessages || { - min: 'Please enter a valid birthday', - max: 'Please enter a valid birthday', - }; // ToDo - - const currentDate = new Date(); - // TODO: move into template? - // tslint:disable-next-line:no-assignment-to-inputs - this.minYear = this.minYear || currentDate.getFullYear() - 116; - // tslint:disable-next-line:no-assignment-to-inputs - this.maxYear = this.maxYear || currentDate.getFullYear() - 16; - } - - private createForm() { - this.dateForm = this.fb.group({ - day: ['', [Validators.min(this.minDay), Validators.max(this.maxDay)]], - month: ['', [Validators.min(this.minMonth), Validators.max(this.maxMonth)]], - year: ['', [Validators.min(this.minYear), Validators.max(this.maxYear)]], - }); - - /* Add form group temporarily to the parent form to prevent a form submit with an invalid birth date - FM: commented out because child components don't change parent components' stuff - this.form.addControl('birthday-form', this.dateForm); */ - } - - /** - * calculates the birthday in form 'yyyy-mm-dd' on base of the input fields - * writes the result to the given parent form control (controlName) - */ - writeBirthday() { - let day = this.dateForm.get('day').value; - let month = this.dateForm.get('month').value; - const year = this.dateForm.get('year').value; - let birthday = ''; - if ( - day && - month && - year && - this.dateForm.get('day').valid && - this.dateForm.get('month').valid && - this.dateForm.get('year').valid - ) { - day = day.length === 1 ? '0' + day : day; - month = month.length === 1 ? '0' + month : month; - birthday = `${year}-${month}-${day}`; - } - - this.formControl.setValue(birthday); - } - - ngOnDestroy() { - this.destroy$.next(); - this.destroy$.complete(); - } -} diff --git a/src/app/shared/forms/components/input/input.component.html b/src/app/shared/forms/components/input/input.component.html deleted file mode 100644 index 175a9fa1e2..0000000000 --- a/src/app/shared/forms/components/input/input.component.html +++ /dev/null @@ -1,28 +0,0 @@ -
- -
-
-
- {{ prepend }} -
- - -
- - -
-
diff --git a/src/app/shared/forms/components/input/input.component.spec.ts b/src/app/shared/forms/components/input/input.component.spec.ts deleted file mode 100644 index 300c932a30..0000000000 --- a/src/app/shared/forms/components/input/input.component.spec.ts +++ /dev/null @@ -1,159 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms'; -import { TranslateModule } from '@ngx-translate/core'; -import { MockComponent, MockDirective } from 'ng-mocks'; - -import { FormControlFeedbackComponent } from 'ish-shared/forms/components/form-control-feedback/form-control-feedback.component'; -import { ShowFormFeedbackDirective } from 'ish-shared/forms/directives/show-form-feedback.directive'; - -import { InputComponent } from './input.component'; - -// tslint:disable ish-deprecation - -describe('Input Component', () => { - let component: InputComponent; - let fixture: ComponentFixture; - let element: HTMLElement; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ - InputComponent, - MockComponent(FormControlFeedbackComponent), - MockDirective(ShowFormFeedbackDirective), - ], - imports: [ReactiveFormsModule, TranslateModule.forRoot()], - }).compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(InputComponent); - component = fixture.componentInstance; - element = fixture.nativeElement; - - const form = new FormGroup({ - requiredField: new FormControl('', [Validators.required]), - simpleField: new FormControl(), - }); - component.label = 'label'; - component.form = form; - component.controlName = 'requiredField'; - }); - - it('should be created', () => { - expect(component).toBeTruthy(); - expect(element).toBeTruthy(); - expect(() => fixture.detectChanges()).not.toThrow(); - }); - - it('should be rendered on creation', () => { - fixture.detectChanges(); - expect(element.querySelector('input[data-testing-id=requiredField]')).toBeTruthy(); - }); - - it('should set default values properly on creation', () => { - fixture.detectChanges(); - expect(element.querySelector('input[type=text]')).toBeTruthy(); - expect(element.querySelector('label.col-md-4')).toBeTruthy(); - expect(element.querySelector('label + div.col-md-8')).toBeTruthy(); - expect(element.querySelector('input[autocomplete]')).toBeFalsy(); - }); - - it('should throw an error if input parameter type is not set properly', () => { - component.type = 'xyz'; - expect(() => fixture.detectChanges()).toThrow(); - }); - - it('should set input parameter type on html element', () => { - component.type = 'email'; - fixture.detectChanges(); - expect(element.querySelector('input[type=email]')).toBeTruthy(); - }); - - it('should set input parameter autocomplete on html element', () => { - component.autocomplete = 'off'; - fixture.detectChanges(); - expect(element.querySelector('input[autocomplete=off]')).toBeTruthy(); - }); - - it('should render placeholder text if placeholder set', () => { - component.placeholder = 'placeholder'; - fixture.detectChanges(); - expect(element.querySelector('input[placeholder=placeholder]')).toBeTruthy(); - }); - - it('should render a prepend string if prepend is set', () => { - component.prepend = 'USD'; - fixture.detectChanges(); - expect(element.querySelector('.input-group')).toBeTruthy(); - }); - - it('should not render a prepend string if prepend is not set', () => { - fixture.detectChanges(); - expect(element.querySelector('.input-group')).toBeFalsy(); - }); - - /* - tests for parent class: form-element - */ - - it('should set input parameter labelClass on html element', () => { - component.labelClass = 'col-md-3'; - fixture.detectChanges(); - expect(element.querySelector('label.col-md-3')).toBeTruthy(); - }); - - it('should set input parameter inputClass on html element', () => { - component.inputClass = 'col-md-9'; - fixture.detectChanges(); - expect(element.querySelector('label + div.col-md-9')).toBeTruthy(); - }); - - // markAsRequired tests - it('should set required asterisk for required fields (default)', () => { - fixture.detectChanges(); - expect(element.querySelector('span.required')).toBeTruthy(); - }); - - it('should set required asterisk if MarkRequiredLabel = on', () => { - component.markRequiredLabel = 'on'; - component.controlName = 'simpleField'; - fixture.detectChanges(); - expect(element.querySelector('span.required')).toBeTruthy(); - }); - - it('should not set required asterisk if markRequiredLabel = off', () => { - component.markRequiredLabel = 'off'; - fixture.detectChanges(); - expect(element.querySelector('span.required')).toBeFalsy(); - }); - - it('should not set required asterisk if MarkRequiredLabel = auto and the field is not required', () => { - component.markRequiredLabel = 'auto'; - component.controlName = 'simpleField'; - fixture.detectChanges(); - expect(element.querySelector('span.required')).toBeFalsy(); - }); - - it('should not render a label if label input parameter is missing', () => { - component.label = ''; - fixture.detectChanges(); - expect(element.querySelector('label')).toBeFalsy(); - }); - - // error are thrown if required input parameters are missing - it('should throw an error if there is no form set as input parameter', () => { - component.form = undefined; - expect(() => fixture.detectChanges()).toThrow(); - }); - - it('should throw an error if there is no controlName set as input parameter', () => { - component.controlName = undefined; - expect(() => fixture.detectChanges()).toThrow(); - }); - - it('should throw an error if there is no control with controlName in the given form', () => { - component.controlName = 'xxx'; - expect(() => fixture.detectChanges()).toThrow(); - }); -}); diff --git a/src/app/shared/forms/components/input/input.component.ts b/src/app/shared/forms/components/input/input.component.ts deleted file mode 100644 index 64bd01350c..0000000000 --- a/src/app/shared/forms/components/input/input.component.ts +++ /dev/null @@ -1,66 +0,0 @@ -import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core'; -import { TranslateService } from '@ngx-translate/core'; - -import { FormElementComponent } from 'ish-shared/forms/components/form-element/form-element.component'; - -// tslint:disable ish-deprecation - -/** - * @deprecated use formly instead - */ -@Component({ - selector: 'ish-input', - templateUrl: './input.component.html', - changeDetection: ChangeDetectionStrategy.Default, -}) -export class InputComponent extends FormElementComponent implements OnInit { - /** - * values: 'text' (default), 'password', 'email' - */ - @Input() type = 'text'; - @Input() maxlength = 60; - /** - * default = undefined for input type 'text' and 'email' (autocomplete not set) - * 'off' for input type 'password' - */ - @Input() autocomplete?: string; - @Input() min?: number; - @Input() max?: number; - - @Input() placeholder = ''; - /** Extend the input field by a prepend text */ - @Input() prepend?: string; - @Input() disabled: boolean; - - calculatedAutocomplete: string; - - constructor(protected translate: TranslateService) { - super(translate); - } - - ngOnInit() { - super.init(); - - // set default values for empty component parameters - this.setDefaultValues(); - - // check type is valid - const types = 'text|password|email|number'; - if (!types.includes(this.type)) { - throw new Error( - 'input parameter is not valid for InputComponent, only text, email, password and number are possible types' - ); - } - } - - get disAbled(): boolean { - return !this.disabled ? undefined : true; - } - - /** - * set default values for empty input parameters - */ - protected setDefaultValues() { - this.calculatedAutocomplete = this.autocomplete ? this.autocomplete : this.type === 'password' ? 'off' : undefined; - } -} diff --git a/src/app/shared/forms/components/select-address/select-address.component.spec.ts b/src/app/shared/forms/components/select-address/select-address.component.spec.ts deleted file mode 100644 index 8f1bf56a23..0000000000 --- a/src/app/shared/forms/components/select-address/select-address.component.spec.ts +++ /dev/null @@ -1,76 +0,0 @@ -import { SimpleChange, SimpleChanges } from '@angular/core'; -import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms'; -import { TranslateModule } from '@ngx-translate/core'; -import { MockComponent, MockDirective } from 'ng-mocks'; - -import { Address } from 'ish-core/models/address/address.model'; -import { FormControlFeedbackComponent } from 'ish-shared/forms/components/form-control-feedback/form-control-feedback.component'; -import { ShowFormFeedbackDirective } from 'ish-shared/forms/directives/show-form-feedback.directive'; - -import { SelectAddressComponent } from './select-address.component'; - -// tslint:disable ish-deprecation - -describe('Select Address Component', () => { - let component: SelectAddressComponent; - let fixture: ComponentFixture; - let element: HTMLElement; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ - MockComponent(FormControlFeedbackComponent), - MockDirective(ShowFormFeedbackDirective), - SelectAddressComponent, - ], - imports: [ReactiveFormsModule, TranslateModule.forRoot()], - }).compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(SelectAddressComponent); - component = fixture.componentInstance; - element = fixture.nativeElement; - - const form = new FormGroup({ - id: new FormControl(), - urn: new FormControl(), - }); - component.controlName = 'id'; - component.form = form; - component.addresses = [ - { id: '4711', urn: 'urn4711', firstName: 'Patricia' } as Address, - { id: '4712', urn: 'urn4712', firstName: 'John' } as Address, - ]; - }); - - it('should be created', () => { - expect(component).toBeTruthy(); - expect(element).toBeTruthy(); - expect(() => fixture.detectChanges()).not.toThrow(); - }); - - it('should display addresses if component input changes', () => { - const changes: SimpleChanges = { - addresses: new SimpleChange(undefined, component.addresses, false), - }; - component.ngOnChanges(changes); - - fixture.detectChanges(); - expect(component.options).toHaveLength(2); - expect(element.querySelector('[data-testing-id=id]')).toBeTruthy(); - expect(element.querySelector('option[value="4711"]')).toBeTruthy(); - }); - - it('should use urn as value if controlName does not equals id', () => { - const changes: SimpleChanges = { - addresses: new SimpleChange(undefined, component.addresses, false), - }; - component.controlName = 'urn'; - component.ngOnChanges(changes); - - fixture.detectChanges(); - expect(element.querySelector('option[value=urn4711]')).toBeTruthy(); - }); -}); diff --git a/src/app/shared/forms/components/select-address/select-address.component.ts b/src/app/shared/forms/components/select-address/select-address.component.ts deleted file mode 100644 index dd14fed8c6..0000000000 --- a/src/app/shared/forms/components/select-address/select-address.component.ts +++ /dev/null @@ -1,35 +0,0 @@ -import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from '@angular/core'; - -import { Address } from 'ish-core/models/address/address.model'; -import { SelectOption } from 'ish-core/models/select-option/select-option.model'; -import { SelectComponent } from 'ish-shared/forms/components/select/select.component'; - -// tslint:disable ish-deprecation - -/** - * @deprecated use formly instead - * Select box for the given addresses. - * if controlName equals 'id' the form control gets the id of the addresses as selected value, otherwise the address urn is taken as value - */ -@Component({ - selector: 'ish-select-address', - templateUrl: '../select/select.component.html', - changeDetection: ChangeDetectionStrategy.Default, -}) -export class SelectAddressComponent extends SelectComponent implements OnChanges { - @Input() addresses: Address[]; - @Input() emptyOptionLabel: string; - - ngOnChanges(c: SimpleChanges) { - if (c.addresses && this.addresses) { - this.options = this.mapToOptions(this.addresses); - } - } - - private mapToOptions(addresses: Address[]): SelectOption[] { - return addresses.map((a: Address) => ({ - label: `${a.firstName} ${a.lastName}, ${a.addressLine1}, ${a.city}`, - value: this.controlName === 'id' ? a.id : a.urn, - })); - } -} diff --git a/src/app/shared/forms/components/select-country/select-country.component.spec.ts b/src/app/shared/forms/components/select-country/select-country.component.spec.ts deleted file mode 100644 index 307829b935..0000000000 --- a/src/app/shared/forms/components/select-country/select-country.component.spec.ts +++ /dev/null @@ -1,69 +0,0 @@ -import { SimpleChange, SimpleChanges } from '@angular/core'; -import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms'; -import { TranslateModule } from '@ngx-translate/core'; -import { MockComponent, MockDirective } from 'ng-mocks'; - -import { FormControlFeedbackComponent } from 'ish-shared/forms/components/form-control-feedback/form-control-feedback.component'; -import { ShowFormFeedbackDirective } from 'ish-shared/forms/directives/show-form-feedback.directive'; - -import { SelectCountryComponent } from './select-country.component'; - -// tslint:disable ish-deprecation - -describe('Select Country Component', () => { - let component: SelectCountryComponent; - let fixture: ComponentFixture; - let element: HTMLElement; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ - MockComponent(FormControlFeedbackComponent), - MockDirective(ShowFormFeedbackDirective), - SelectCountryComponent, - ], - imports: [ReactiveFormsModule, TranslateModule.forRoot()], - }).compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(SelectCountryComponent); - component = fixture.componentInstance; - element = fixture.nativeElement; - - const form = new FormGroup({ - countryCode: new FormControl(), - state: new FormControl('Region1', [Validators.required]), - }); - component.form = form; - component.countries = [ - { countryCode: 'BG', name: 'Bulgaria' }, - { countryCode: 'DE', name: 'Germany' }, - { countryCode: 'FR', name: 'France' }, - ]; - }); - - it('should be created', () => { - expect(component).toBeTruthy(); - expect(element).toBeTruthy(); - expect(() => fixture.detectChanges()).not.toThrow(); - }); - - it('should set default values properly on creation', () => { - fixture.detectChanges(); - expect(component.controlName).toEqual('countryCode'); - expect(component.label).toEqual('account.address.country.label'); - }); - - it('should display countries if component input changes', () => { - const changes: SimpleChanges = { - countries: new SimpleChange(undefined, component.countries, false), - }; - component.ngOnChanges(changes); - - fixture.detectChanges(); - expect(component.options).toHaveLength(3); - expect(element.querySelector('[data-testing-id=countryCode]')).toBeTruthy(); - }); -}); diff --git a/src/app/shared/forms/components/select-country/select-country.component.ts b/src/app/shared/forms/components/select-country/select-country.component.ts deleted file mode 100644 index 37c21e9e71..0000000000 --- a/src/app/shared/forms/components/select-country/select-country.component.ts +++ /dev/null @@ -1,38 +0,0 @@ -import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from '@angular/core'; - -import { Country } from 'ish-core/models/country/country.model'; -import { SelectOption } from 'ish-core/models/select-option/select-option.model'; -import { SelectComponent } from 'ish-shared/forms/components/select/select.component'; - -// tslint:disable ish-deprecation - -/** - * @deprecated use formly instead - */ -@Component({ - selector: 'ish-select-country', - templateUrl: '../select/select.component.html', - changeDetection: ChangeDetectionStrategy.Default, -}) -export class SelectCountryComponent extends SelectComponent implements OnChanges { - @Input() countries: Country[]; - @Input() controlName = 'countryCode'; - @Input() label = 'account.address.country.label'; - @Input() errorMessages = { required: 'account.address.country.error.default' }; - - ngOnChanges(c: SimpleChanges) { - if (c.countries) { - this.options = this.mapToOptions(this.countries); - } - } - - private mapToOptions(countries: Country[]): SelectOption[] { - if (!countries) { - return; - } - return countries.map(c => ({ - label: c.name, - value: c.countryCode, - })); - } -} diff --git a/src/app/shared/forms/components/select-region/select-region.component.spec.ts b/src/app/shared/forms/components/select-region/select-region.component.spec.ts deleted file mode 100644 index da5f060ed4..0000000000 --- a/src/app/shared/forms/components/select-region/select-region.component.spec.ts +++ /dev/null @@ -1,68 +0,0 @@ -import { SimpleChange, SimpleChanges } from '@angular/core'; -import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms'; -import { TranslateModule } from '@ngx-translate/core'; -import { MockComponent, MockDirective } from 'ng-mocks'; - -import { FormControlFeedbackComponent } from 'ish-shared/forms/components/form-control-feedback/form-control-feedback.component'; -import { ShowFormFeedbackDirective } from 'ish-shared/forms/directives/show-form-feedback.directive'; - -import { SelectRegionComponent } from './select-region.component'; - -// tslint:disable ish-deprecation - -describe('Select Region Component', () => { - let component: SelectRegionComponent; - let fixture: ComponentFixture; - let element: HTMLElement; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ - MockComponent(FormControlFeedbackComponent), - MockDirective(ShowFormFeedbackDirective), - SelectRegionComponent, - ], - imports: [ReactiveFormsModule, TranslateModule.forRoot()], - }).compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(SelectRegionComponent); - component = fixture.componentInstance; - element = fixture.nativeElement; - - const form = new FormGroup({ - countryCode: new FormControl('BG'), - state: new FormControl('Region1', [Validators.required]), - }); - component.form = form; - component.regions = [ - { countryCode: 'BG', regionCode: '02', name: 'Burgas', id: 'BG02' }, - { countryCode: 'BG', regionCode: '23', name: 'Sofia', id: 'BG23' }, - ]; - }); - - it('should be created', () => { - expect(component).toBeTruthy(); - expect(element).toBeTruthy(); - expect(() => fixture.detectChanges()).not.toThrow(); - }); - - it('should set default values properly on creation', () => { - fixture.detectChanges(); - expect(component.controlName).toEqual('state'); - expect(component.label).toEqual('account.default_address.state.label'); - }); - - it('should get and display regions for a certain country', () => { - const changes: SimpleChanges = { - regions: new SimpleChange(undefined, component.regions, false), - }; - component.ngOnChanges(changes); - - fixture.detectChanges(); - expect(component.options).toHaveLength(2); - expect(element.querySelector('[data-testing-id=state]')).toBeTruthy(); - }); -}); diff --git a/src/app/shared/forms/components/select-region/select-region.component.ts b/src/app/shared/forms/components/select-region/select-region.component.ts deleted file mode 100644 index 820fc3e9fb..0000000000 --- a/src/app/shared/forms/components/select-region/select-region.component.ts +++ /dev/null @@ -1,38 +0,0 @@ -import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from '@angular/core'; - -import { Region } from 'ish-core/models/region/region.model'; -import { SelectOption } from 'ish-core/models/select-option/select-option.model'; -import { SelectComponent } from 'ish-shared/forms/components/select/select.component'; - -// tslint:disable ish-deprecation - -/** - * @deprecated use formly instead - */ -@Component({ - selector: 'ish-select-region', - templateUrl: '../select/select.component.html', - changeDetection: ChangeDetectionStrategy.Default, -}) -export class SelectRegionComponent extends SelectComponent implements OnChanges { - @Input() regions: Region[]; - @Input() controlName = 'state'; - @Input() label = 'account.default_address.state.label'; - @Input() errorMessages = { required: 'account.address.state.error.default' }; - - ngOnChanges(c: SimpleChanges) { - if (c.regions) { - this.options = this.mapToOptions(this.regions); - } - } - - private mapToOptions(regions: Region[]): SelectOption[] { - if (!regions) { - return; - } - return regions.map(r => ({ - label: r.name, - value: r.regionCode, - })); - } -} diff --git a/src/app/shared/forms/components/select-title/select-title.component.spec.ts b/src/app/shared/forms/components/select-title/select-title.component.spec.ts deleted file mode 100644 index 893876b163..0000000000 --- a/src/app/shared/forms/components/select-title/select-title.component.spec.ts +++ /dev/null @@ -1,65 +0,0 @@ -import { SimpleChange, SimpleChanges } from '@angular/core'; -import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms'; -import { TranslateModule } from '@ngx-translate/core'; -import { MockComponent, MockDirective } from 'ng-mocks'; - -import { FormControlFeedbackComponent } from 'ish-shared/forms/components/form-control-feedback/form-control-feedback.component'; -import { ShowFormFeedbackDirective } from 'ish-shared/forms/directives/show-form-feedback.directive'; - -import { SelectTitleComponent } from './select-title.component'; - -// tslint:disable ish-deprecation - -describe('Select Title Component', () => { - let component: SelectTitleComponent; - let fixture: ComponentFixture; - let element: HTMLElement; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ - MockComponent(FormControlFeedbackComponent), - MockDirective(ShowFormFeedbackDirective), - SelectTitleComponent, - ], - imports: [ReactiveFormsModule, TranslateModule.forRoot()], - }).compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(SelectTitleComponent); - component = fixture.componentInstance; - element = fixture.nativeElement; - - const form = new FormGroup({ - countryCode: new FormControl('BG'), - title: new FormControl(), - }); - component.form = form; - component.titles = ['account.salutation.ms.text', 'account.salutation.mr.text', 'account.salutation.dr.text']; - }); - - it('should be created', () => { - expect(component).toBeTruthy(); - expect(element).toBeTruthy(); - expect(() => fixture.detectChanges()).not.toThrow(); - }); - - it('should set default values properly on creation', () => { - fixture.detectChanges(); - expect(component.controlName).toEqual('title'); - expect(component.label).toEqual('account.default_address.title.label'); - }); - - it('should get and display titles for a certain country', () => { - const changes: SimpleChanges = { - titles: new SimpleChange(undefined, component.titles, false), - }; - component.ngOnChanges(changes); - - fixture.detectChanges(); - expect(component.options).toHaveLength(3); - expect(element.querySelector('[data-testing-id=title]')).toBeTruthy(); - }); -}); diff --git a/src/app/shared/forms/components/select-title/select-title.component.ts b/src/app/shared/forms/components/select-title/select-title.component.ts deleted file mode 100644 index 34edaa85b7..0000000000 --- a/src/app/shared/forms/components/select-title/select-title.component.ts +++ /dev/null @@ -1,58 +0,0 @@ -import { ChangeDetectionStrategy, Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core'; -import { TranslateService } from '@ngx-translate/core'; - -import { SelectOption } from 'ish-core/models/select-option/select-option.model'; -import { SelectComponent } from 'ish-shared/forms/components/select/select.component'; - -// tslint:disable ish-deprecation - -/** - * @deprecated use formly instead - */ -@Component({ - selector: 'ish-select-title', - templateUrl: '../select/select.component.html', - changeDetection: ChangeDetectionStrategy.Default, -}) -export class SelectTitleComponent extends SelectComponent implements OnChanges, OnInit { - @Input() titles: string[]; - - constructor(protected translate: TranslateService) { - super(translate); - } - - ngOnInit() { - this.setDefaultValues(); - super.componentInit(); - this.translateOptionLabels = true; - this.translateOptionValues = true; - } - - /** - * refresh titles if they changed - */ - ngOnChanges(c: SimpleChanges) { - if (c.titles) { - this.options = this.mapToOptions(this.titles); - } - } - - /** - * set default values for empty input parameters - */ - private setDefaultValues() { - this.controlName = this.controlName || 'title'; - this.label = this.label || 'account.default_address.title.label'; - this.errorMessages = this.errorMessages || { required: 'account.address.title.error.required' }; - } - - private mapToOptions(titles: string[]): SelectOption[] { - if (!titles) { - return; - } - return titles.map(t => ({ - label: t, - value: t, - })); - } -} diff --git a/src/app/shared/forms/components/select/select.component.html b/src/app/shared/forms/components/select/select.component.html deleted file mode 100644 index 5fa8075fe6..0000000000 --- a/src/app/shared/forms/components/select/select.component.html +++ /dev/null @@ -1,28 +0,0 @@ - -
- -
- - -
-
- diff --git a/src/app/shared/forms/components/select/select.component.spec.ts b/src/app/shared/forms/components/select/select.component.spec.ts deleted file mode 100644 index f7e2adbde0..0000000000 --- a/src/app/shared/forms/components/select/select.component.spec.ts +++ /dev/null @@ -1,110 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms'; -import { TranslateModule } from '@ngx-translate/core'; -import { MockComponent, MockDirective } from 'ng-mocks'; - -import { SelectOption } from 'ish-core/models/select-option/select-option.model'; -import { FormControlFeedbackComponent } from 'ish-shared/forms/components/form-control-feedback/form-control-feedback.component'; -import { ShowFormFeedbackDirective } from 'ish-shared/forms/directives/show-form-feedback.directive'; - -import { SelectComponent } from './select.component'; - -// tslint:disable ish-deprecation - -describe('Select Component', () => { - let component: SelectComponent; - let fixture: ComponentFixture; - let element: HTMLElement; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ - MockComponent(FormControlFeedbackComponent), - MockDirective(ShowFormFeedbackDirective), - SelectComponent, - ], - imports: [ReactiveFormsModule, TranslateModule.forRoot()], - }).compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(SelectComponent); - component = fixture.componentInstance; - element = fixture.nativeElement; - - const form = new FormGroup({ - simpleField: new FormControl(), - requiredField: new FormControl('', [Validators.required]), - }); - const options: SelectOption[] = [ - { label: 'optionLabel', value: 'optionValue' }, - { label: 'optionLabel2', value: 'optionValue2' }, - ]; - - component.label = 'label'; - component.form = form; - component.controlName = 'simpleField'; - component.options = options; - }); - - it('should be created', () => { - expect(component).toBeTruthy(); - expect(element).toBeTruthy(); - expect(() => fixture.detectChanges()).not.toThrow(); - }); - - it('should be rendered on creation and show options', () => { - fixture.detectChanges(); - expect(element.querySelector('select[data-testing-id=simpleField]')).toBeTruthy(); - expect(element.querySelector('select[data-testing-id=simpleField] option[value = optionValue ]')).toBeTruthy(); - expect( - element.querySelector('select[data-testing-id=simpleField] option[value = optionValue ]').innerHTML - ).toContain('optionLabel'); - expect( - element.querySelector('select[data-testing-id=simpleField] option[value = optionValue2 ]').innerHTML - ).toContain('optionLabel2'); - }); - - it('should not be rendered if there are no options and no required validator', () => { - component.options = undefined; - fixture.detectChanges(); - expect(element.querySelector('select[data-testing-id=simpleField]')).toBeFalsy(); - }); - - it('should be rendered if there are no options but a required validator', () => { - component.controlName = 'requiredField'; - fixture.detectChanges(); - expect(element.querySelector('select[data-testing-id=requiredField]')).toBeTruthy(); - }); - - it('should show empty option if no value is set', () => { - fixture.detectChanges(); - expect(component.showEmptyOption).toBeTruthy(); - expect(element.querySelector('select[data-testing-id=simpleField] option[value=""]')).toBeTruthy(); - }); - - it('should not show empty option if a value is set', () => { - component.form.get(component.controlName).setValue('optionValue'); - fixture.detectChanges(); - expect(component.showEmptyOption).toBeFalsy(); - expect(element.querySelector('select[data-testing-id=simpleField] option[value=""]')).toBeFalsy(); - }); - - it('should not render a label if label input parameter is missing', () => { - component.label = ''; - fixture.detectChanges(); - expect(element.querySelector('label')).toBeFalsy(); - }); - - it('should set input parameter labelClass on html element', () => { - component.labelClass = 'col-md-3'; - fixture.detectChanges(); - expect(element.querySelector('label.col-md-3')).toBeTruthy(); - }); - - it('should set input parameter inputClass on html element: ', () => { - component.inputClass = 'col-md-9'; - fixture.detectChanges(); - expect(element.querySelector('label + div.col-md-9')).toBeTruthy(); - }); -}); diff --git a/src/app/shared/forms/components/select/select.component.ts b/src/app/shared/forms/components/select/select.component.ts deleted file mode 100644 index 28f93fc542..0000000000 --- a/src/app/shared/forms/components/select/select.component.ts +++ /dev/null @@ -1,39 +0,0 @@ -import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core'; -import { TranslateService } from '@ngx-translate/core'; - -import { SelectOption } from 'ish-core/models/select-option/select-option.model'; -import { FormElementComponent } from 'ish-shared/forms/components/form-element/form-element.component'; - -// tslint:disable ish-deprecation - -/** - * @deprecated use formly instead - */ -@Component({ - selector: 'ish-select', - templateUrl: './select.component.html', - changeDetection: ChangeDetectionStrategy.Default, -}) -export class SelectComponent extends FormElementComponent implements OnInit { - @Input() options: SelectOption[]; - @Input() translateOptionLabels = false; - @Input() translateOptionValues = false; - @Input() emptyOptionLabel = 'account.option.select.text'; - - showEmptyOption: boolean; // is automatically set if the control value is empty - - constructor(protected translate: TranslateService) { - super(translate); - } - - ngOnInit() { - this.componentInit(); - } - - protected componentInit() { - super.init(); - - // show empty option if the control value is empty - this.showEmptyOption = !this.formControl.value; - } -} diff --git a/src/app/shared/forms/components/textarea/textarea.component.html b/src/app/shared/forms/components/textarea/textarea.component.html deleted file mode 100644 index 9c881cc249..0000000000 --- a/src/app/shared/forms/components/textarea/textarea.component.html +++ /dev/null @@ -1,25 +0,0 @@ -
- -
- - - - -
-
diff --git a/src/app/shared/forms/components/textarea/textarea.component.spec.ts b/src/app/shared/forms/components/textarea/textarea.component.spec.ts deleted file mode 100644 index 4fd791b41d..0000000000 --- a/src/app/shared/forms/components/textarea/textarea.component.spec.ts +++ /dev/null @@ -1,153 +0,0 @@ -import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; -import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms'; -import { TranslateModule } from '@ngx-translate/core'; -import { MockDirective } from 'ng-mocks'; - -import { ShowFormFeedbackDirective } from 'ish-shared/forms/directives/show-form-feedback.directive'; - -import { TextareaComponent } from './textarea.component'; - -// tslint:disable ish-deprecation - -describe('Textarea Component', () => { - let component: TextareaComponent; - let fixture: ComponentFixture; - let element: HTMLElement; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [MockDirective(ShowFormFeedbackDirective), TextareaComponent], - imports: [ReactiveFormsModule, TranslateModule.forRoot()], - schemas: [CUSTOM_ELEMENTS_SCHEMA], - }).compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(TextareaComponent); - component = fixture.componentInstance; - element = fixture.nativeElement; - - const form = new FormGroup({ - requiredField: new FormControl('', [Validators.required]), - simpleField: new FormControl(), - }); - component.label = 'label'; - component.form = form; - component.controlName = 'requiredField'; - }); - - it('should be created', () => { - expect(component).toBeTruthy(); - expect(element).toBeTruthy(); - expect(() => fixture.detectChanges()).not.toThrow(); - }); - - it('should be rendered on creation', () => { - fixture.detectChanges(); - expect(element.querySelector('textarea')).toBeTruthy(); - }); - - /** snapshot test is not possible here, because the id is a UUID */ - it('should set default values properly on creation', () => { - fixture.detectChanges(); - const labelClasses = element.querySelector('label').className; - const inputClasses = element.querySelector('label + div').className; - expect(labelClasses).toContain('col-md-4'); - expect(inputClasses).toContain('col-md-8'); - expect(element.querySelector('textarea').attributes.getNamedItem('rows').textContent).toBe('3'); - expect(element.querySelector('textarea').attributes.getNamedItem('placeholder').textContent).toBeEmpty(); - }); - - it('should set textarea parameter rows on html element', () => { - component.rows = 10; - fixture.detectChanges(); - expect(element.querySelector('textarea').attributes.getNamedItem('rows').textContent).toBe('10'); - }); - - it('should set textarea parameter placeholder on html element', () => { - component.placeholder = 'Some Placeholder'; - fixture.detectChanges(); - expect(element.querySelector('textarea').attributes.getNamedItem('placeholder').textContent).toBe( - 'Some Placeholder' - ); - }); - - it('should set textarea parameter maxlength on html element and display remaining counter information', () => { - component.maxlength = 100; - fixture.detectChanges(); - expect(element.querySelector('textarea').attributes.getNamedItem('maxlength').textContent).toBe('100'); - expect(element.querySelector('small.input-help')).toBeTruthy(); - }); - - it('should not set textarea parameter maxlength on html element and remaining counter info if maxlength is undefined', () => { - component.maxlength = undefined; - fixture.detectChanges(); - expect(element.querySelector('textarea').attributes.getNamedItem('maxlength')).toBeNull(); - expect(element.querySelector('small.input-help')).toBeFalsy(); - }); - - /* - tests for parent class: form-element - */ - - it('should set textarea parameter labelClass on html element', () => { - component.labelClass = 'col-sm-5'; - fixture.detectChanges(); - expect(element.querySelector('label.col-sm-5')).toBeTruthy(); - }); - - it('should set textarea parameter inputClass on html element', () => { - component.inputClass = 'col-sm-5'; - fixture.detectChanges(); - expect(element.querySelector('label + div.col-sm-5')).toBeTruthy(); - }); - - // markAsRequired tests - it('should set required asterisk for required fields (default)', () => { - fixture.detectChanges(); - expect(element.querySelector('span.required')).toBeTruthy(); - }); - - it('should set required asterisk if MarkRequiredLabel = on', () => { - component.markRequiredLabel = 'on'; - component.controlName = 'simpleField'; - fixture.detectChanges(); - expect(element.querySelector('span.required')).toBeTruthy(); - }); - - it('should not set required asterisk if markRequiredLabel = off', () => { - component.markRequiredLabel = 'off'; - fixture.detectChanges(); - expect(element.querySelector('span.required')).toBeFalsy(); - }); - - it('should not set required asterisk if MarkRequiredLabel = auto and the field is not required', () => { - component.markRequiredLabel = 'auto'; - component.controlName = 'simpleField'; - fixture.detectChanges(); - expect(element.querySelector('span.required')).toBeFalsy(); - }); - - it('should not render a label if label textarea parameter is missing', () => { - component.label = ''; - fixture.detectChanges(); - expect(element.querySelector('label')).toBeFalsy(); - }); - - // error are thrown if required textarea parameters are missing - it('should throw an error if there is no form set as textarea parameter', () => { - component.form = undefined; - expect(() => fixture.detectChanges()).toThrow(); - }); - - it('should throw an error if there is no controlName set as textarea parameter', () => { - component.controlName = undefined; - expect(() => fixture.detectChanges()).toThrow(); - }); - - it('should throw an error if there is no control with controlName in the given form', () => { - component.controlName = 'xxx'; - expect(() => fixture.detectChanges()).toThrow(); - }); -}); diff --git a/src/app/shared/forms/components/textarea/textarea.component.ts b/src/app/shared/forms/components/textarea/textarea.component.ts deleted file mode 100644 index 2c20701969..0000000000 --- a/src/app/shared/forms/components/textarea/textarea.component.ts +++ /dev/null @@ -1,64 +0,0 @@ -import { ChangeDetectionStrategy, Component, Input, OnDestroy, OnInit } from '@angular/core'; -import { TranslateService } from '@ngx-translate/core'; -import { Subject } from 'rxjs'; -import { takeUntil } from 'rxjs/operators'; - -import { FormElementComponent } from 'ish-shared/forms/components/form-element/form-element.component'; - -// tslint:disable ish-deprecation - -/** - * @deprecated use formly instead - * - * The Textarea Component renders a textarea for a reactive form - * - * @example - * - */ -@Component({ - selector: 'ish-textarea', - templateUrl: './textarea.component.html', - changeDetection: ChangeDetectionStrategy.Default, -}) -export class TextareaComponent extends FormElementComponent implements OnInit, OnDestroy { - /** the rows parameter of the textarea (default: 3) */ - @Input() rows = 3; - /** the placeholder for the textarea (default: '') */ - @Input() placeholder = ''; - /** switch spellcheck on/off (default: false) */ - @Input() spellcheck = false; - /** the maxlength parameter of the textarea (if provided a remaining characters counter is displayed) */ - @Input() maxlength?: number; - - charactersRemaining: number; - - private destroy$ = new Subject(); - - constructor(protected translate: TranslateService) { - super(translate); - } - - ngOnInit() { - super.init(); - if (this.maxlength) { - this.charactersRemaining = this.maxlength; - this.formControl.valueChanges.pipe(takeUntil(this.destroy$)).subscribe(text => { - this.charactersRemaining = this.maxlength - text.length; - }); - } - } - - ngOnDestroy() { - this.destroy$.next(); - this.destroy$.complete(); - } -} diff --git a/src/app/shared/forms/forms.module.ts b/src/app/shared/forms/forms.module.ts index d649388bc7..f15840add8 100644 --- a/src/app/shared/forms/forms.module.ts +++ b/src/app/shared/forms/forms.module.ts @@ -8,35 +8,11 @@ import { DirectivesModule } from 'ish-core/directives.module'; import { FeatureToggleModule } from 'ish-core/feature-toggle.module'; import { IconModule } from 'ish-core/icon.module'; -import { CheckboxComponent } from './components/checkbox/checkbox.component'; import { FormControlFeedbackComponent } from './components/form-control-feedback/form-control-feedback.component'; -import { InputBirthdayComponent } from './components/input-birthday/input-birthday.component'; -import { InputComponent } from './components/input/input.component'; -import { SelectAddressComponent } from './components/select-address/select-address.component'; -import { SelectCountryComponent } from './components/select-country/select-country.component'; -import { SelectRegionComponent } from './components/select-region/select-region.component'; -import { SelectTitleComponent } from './components/select-title/select-title.component'; -import { SelectComponent } from './components/select/select.component'; -import { TextareaComponent } from './components/textarea/textarea.component'; import { ShowFormFeedbackDirective } from './directives/show-form-feedback.directive'; const exportedComponents = [FormControlFeedbackComponent, ShowFormFeedbackDirective]; -// tslint:disable ish-deprecation -const deprecatedExportedComponents = [ - CheckboxComponent, - InputBirthdayComponent, - InputComponent, - SelectAddressComponent, - SelectComponent, - SelectCountryComponent, - SelectRegionComponent, - SelectTitleComponent, - TextareaComponent, -]; - -// tslint:enable ish-deprecation - @NgModule({ imports: [ CommonModule, @@ -47,7 +23,7 @@ const deprecatedExportedComponents = [ RouterModule, TranslateModule, ], - declarations: [...deprecatedExportedComponents, ...exportedComponents], - exports: [...deprecatedExportedComponents, ...exportedComponents], + declarations: [...exportedComponents], + exports: [...exportedComponents], }) export class FormsSharedModule {}