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 672db34c22..6a713223fb 100644 --- a/docs/guides/migrations.md +++ b/docs/guides/migrations.md @@ -17,6 +17,13 @@ With version 2.0 we introduce a renaming of the two standard PWA themes and chan With this change the according folders and references had to be renamed/moved and need to be adapted in customer projects as well. In projects where the recommended procedure for using a custom theme has been followed (see [Customization Guide - Start Customization](./customizations.md#start-customization)), minimal migration effort should be required. +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/projects/organization-management/src/app/components/user-profile-form/user-profile-form.component.ts b/projects/organization-management/src/app/components/user-profile-form/user-profile-form.component.ts index 72b88bd2c1..7276f7202a 100644 --- a/projects/organization-management/src/app/components/user-profile-form/user-profile-form.component.ts +++ b/projects/organization-management/src/app/components/user-profile-form/user-profile-form.component.ts @@ -5,7 +5,7 @@ import { pick } from 'lodash-es'; import { Observable } from 'rxjs'; import { HttpError } from 'ish-core/models/http-error/http-error.model'; -import { SelectOption } from 'ish-shared/forms/components/select/select.component'; +import { SelectOption } from 'ish-core/models/select-option/select-option.model'; import { FormsService } from 'ish-shared/forms/utils/forms.service'; import { SpecialValidators } from 'ish-shared/forms/validators/special-validators'; diff --git a/src/app/core/models/select-option/select-option.model.ts b/src/app/core/models/select-option/select-option.model.ts new file mode 100644 index 0000000000..9aca28df17 --- /dev/null +++ b/src/app/core/models/select-option/select-option.model.ts @@ -0,0 +1,4 @@ +export interface SelectOption { + value: string; + label: string; +} diff --git a/src/app/extensions/order-templates/facades/order-templates.facade.ts b/src/app/extensions/order-templates/facades/order-templates.facade.ts index 69cd92dee2..ced43a507d 100644 --- a/src/app/extensions/order-templates/facades/order-templates.facade.ts +++ b/src/app/extensions/order-templates/facades/order-templates.facade.ts @@ -4,7 +4,7 @@ import { Observable } from 'rxjs'; import { map, startWith, withLatestFrom } from 'rxjs/operators'; import { HttpError } from 'ish-core/models/http-error/http-error.model'; -import { SelectOption } from 'ish-shared/forms/components/select/select.component'; +import { SelectOption } from 'ish-core/models/select-option/select-option.model'; import { OrderTemplate, OrderTemplateHeader } from '../models/order-template/order-template.model'; import { diff --git a/src/app/extensions/order-templates/shared/select-order-template-form/select-order-template-form.component.ts b/src/app/extensions/order-templates/shared/select-order-template-form/select-order-template-form.component.ts index 6285b67d70..8064f1b75c 100644 --- a/src/app/extensions/order-templates/shared/select-order-template-form/select-order-template-form.component.ts +++ b/src/app/extensions/order-templates/shared/select-order-template-form/select-order-template-form.component.ts @@ -5,7 +5,7 @@ import { TranslateService } from '@ngx-translate/core'; import { Observable } from 'rxjs'; import { map } from 'rxjs/operators'; -import { SelectOption } from 'ish-shared/forms/components/select/select.component'; +import { SelectOption } from 'ish-core/models/select-option/select-option.model'; import { OrderTemplatesFacade } from '../../facades/order-templates.facade'; diff --git a/src/app/extensions/order-templates/shared/select-order-template-modal/select-order-template-modal.component.ts b/src/app/extensions/order-templates/shared/select-order-template-modal/select-order-template-modal.component.ts index e6093ace29..63e1e00013 100644 --- a/src/app/extensions/order-templates/shared/select-order-template-modal/select-order-template-modal.component.ts +++ b/src/app/extensions/order-templates/shared/select-order-template-modal/select-order-template-modal.component.ts @@ -16,7 +16,7 @@ import { TranslateService } from '@ngx-translate/core'; import { Observable, Subject, of } from 'rxjs'; import { filter, map, take, takeUntil } from 'rxjs/operators'; -import { SelectOption } from 'ish-shared/forms/components/select/select.component'; +import { SelectOption } from 'ish-core/models/select-option/select-option.model'; import { markAsDirtyRecursive } from 'ish-shared/forms/utils/form-utils'; import { OrderTemplatesFacade } from '../../facades/order-templates.facade'; diff --git a/src/app/extensions/wishlists/shared/select-wishlist-form/select-wishlist-form.component.ts b/src/app/extensions/wishlists/shared/select-wishlist-form/select-wishlist-form.component.ts index 48797f1f5e..f228a2e98d 100644 --- a/src/app/extensions/wishlists/shared/select-wishlist-form/select-wishlist-form.component.ts +++ b/src/app/extensions/wishlists/shared/select-wishlist-form/select-wishlist-form.component.ts @@ -5,7 +5,7 @@ import { TranslateService } from '@ngx-translate/core'; import { Observable } from 'rxjs'; import { map } from 'rxjs/operators'; -import { SelectOption } from 'ish-shared/forms/components/select/select.component'; +import { SelectOption } from 'ish-core/models/select-option/select-option.model'; import { WishlistsFacade } from '../../facades/wishlists.facade'; diff --git a/src/app/extensions/wishlists/shared/select-wishlist-modal/select-wishlist-modal.component.ts b/src/app/extensions/wishlists/shared/select-wishlist-modal/select-wishlist-modal.component.ts index 402e5e7eb4..19221acc26 100644 --- a/src/app/extensions/wishlists/shared/select-wishlist-modal/select-wishlist-modal.component.ts +++ b/src/app/extensions/wishlists/shared/select-wishlist-modal/select-wishlist-modal.component.ts @@ -15,8 +15,8 @@ import { FormlyFieldConfig } from '@ngx-formly/core'; import { Observable, Subject, of } from 'rxjs'; import { filter, map, take, takeUntil } from 'rxjs/operators'; +import { SelectOption } from 'ish-core/models/select-option/select-option.model'; import { whenTruthy } from 'ish-core/utils/operators'; -import { SelectOption } from 'ish-shared/forms/components/select/select.component'; import { markAsDirtyRecursive } from 'ish-shared/forms/utils/form-utils'; import { WishlistsFacade } from '../../facades/wishlists.facade'; diff --git a/src/app/pages/account-profile-user/account-profile-user/account-profile-user.component.ts b/src/app/pages/account-profile-user/account-profile-user/account-profile-user.component.ts index d155d259be..55a481d6b1 100644 --- a/src/app/pages/account-profile-user/account-profile-user/account-profile-user.component.ts +++ b/src/app/pages/account-profile-user/account-profile-user/account-profile-user.component.ts @@ -5,8 +5,8 @@ import { pick } from 'lodash-es'; import { Observable } from 'rxjs'; import { HttpError } from 'ish-core/models/http-error/http-error.model'; +import { SelectOption } from 'ish-core/models/select-option/select-option.model'; import { User } from 'ish-core/models/user/user.model'; -import { SelectOption } from 'ish-shared/forms/components/select/select.component'; import { markAsDirtyRecursive } from 'ish-shared/forms/utils/form-utils'; import { FormsService } from 'ish-shared/forms/utils/forms.service'; import { SpecialValidators } from 'ish-shared/forms/validators/special-validators'; diff --git a/src/app/pages/checkout-payment/payment-concardis-creditcard/payment-concardis-creditcard.component.ts b/src/app/pages/checkout-payment/payment-concardis-creditcard/payment-concardis-creditcard.component.ts index aaab3f8d6c..bceb6645df 100644 --- a/src/app/pages/checkout-payment/payment-concardis-creditcard/payment-concardis-creditcard.component.ts +++ b/src/app/pages/checkout-payment/payment-concardis-creditcard/payment-concardis-creditcard.component.ts @@ -3,8 +3,8 @@ import { FormControl, Validators } from '@angular/forms'; import { range } from 'lodash-es'; import { takeUntil } from 'rxjs/operators'; +import { SelectOption } from 'ish-core/models/select-option/select-option.model'; import { ScriptLoaderService } from 'ish-core/utils/script-loader/script-loader.service'; -import { SelectOption } from 'ish-shared/forms/components/select/select.component'; import { markAsDirtyRecursive } from 'ish-shared/forms/utils/form-utils'; import { PaymentConcardisComponent } from '../payment-concardis/payment-concardis.component'; diff --git a/src/app/pages/checkout-payment/payment-cybersource-creditcard/payment-cybersource-creditcard.component.ts b/src/app/pages/checkout-payment/payment-cybersource-creditcard/payment-cybersource-creditcard.component.ts index 96ba28871e..6aec4ee2f6 100644 --- a/src/app/pages/checkout-payment/payment-cybersource-creditcard/payment-cybersource-creditcard.component.ts +++ b/src/app/pages/checkout-payment/payment-cybersource-creditcard/payment-cybersource-creditcard.component.ts @@ -16,8 +16,8 @@ import { takeUntil } from 'rxjs/operators'; import { Attribute } from 'ish-core/models/attribute/attribute.model'; import { PaymentMethod } from 'ish-core/models/payment-method/payment-method.model'; +import { SelectOption } from 'ish-core/models/select-option/select-option.model'; import { ScriptLoaderService } from 'ish-core/utils/script-loader/script-loader.service'; -import { SelectOption } from 'ish-shared/forms/components/select/select.component'; import { markAsDirtyRecursive } from 'ish-shared/forms/utils/form-utils'; // tslint:disable:no-any - allows access to cybersource js functionality diff --git a/src/app/shared/components/basket/basket-cost-center-selection/basket-cost-center-selection.component.ts b/src/app/shared/components/basket/basket-cost-center-selection/basket-cost-center-selection.component.ts index f729844091..27891f5dc7 100644 --- a/src/app/shared/components/basket/basket-cost-center-selection/basket-cost-center-selection.component.ts +++ b/src/app/shared/components/basket/basket-cost-center-selection/basket-cost-center-selection.component.ts @@ -6,8 +6,8 @@ import { distinctUntilChanged, map, shareReplay, switchMap, take, takeUntil } fr import { AccountFacade } from 'ish-core/facades/account.facade'; import { CheckoutFacade } from 'ish-core/facades/checkout.facade'; +import { SelectOption } from 'ish-core/models/select-option/select-option.model'; import { whenTruthy } from 'ish-core/utils/operators'; -import { SelectOption } from 'ish-shared/forms/components/select/select.component'; import { markAsDirtyRecursive } from 'ish-shared/forms/utils/form-utils'; /** diff --git a/src/app/shared/components/product/product-list-toolbar/product-list-toolbar.component.ts b/src/app/shared/components/product/product-list-toolbar/product-list-toolbar.component.ts index 0a9c1f09c4..5f4d2107bb 100644 --- a/src/app/shared/components/product/product-list-toolbar/product-list-toolbar.component.ts +++ b/src/app/shared/components/product/product-list-toolbar/product-list-toolbar.component.ts @@ -2,8 +2,8 @@ import { ChangeDetectionStrategy, Component, Input, OnChanges } from '@angular/c import { ActivatedRoute, Router } from '@angular/router'; import { SortableAttributesType } from 'ish-core/models/product-listing/product-listing.model'; +import { SelectOption } from 'ish-core/models/select-option/select-option.model'; import { ViewType } from 'ish-core/models/viewtype/viewtype.types'; -import { SelectOption } from 'ish-shared/forms/components/select/select.component'; @Component({ selector: 'ish-product-list-toolbar', diff --git a/src/app/shared/formly-address-forms/components/formly-address-form/formly-address-form.component.ts b/src/app/shared/formly-address-forms/components/formly-address-form/formly-address-form.component.ts index 8d136aad66..beb75193df 100644 --- a/src/app/shared/formly-address-forms/components/formly-address-form/formly-address-form.component.ts +++ b/src/app/shared/formly-address-forms/components/formly-address-form/formly-address-form.component.ts @@ -6,8 +6,8 @@ import { map } from 'rxjs/operators'; import { AppFacade } from 'ish-core/facades/app.facade'; import { Address } from 'ish-core/models/address/address.model'; +import { SelectOption } from 'ish-core/models/select-option/select-option.model'; import { AddressFormConfigurationProvider } from 'ish-shared/formly-address-forms/configurations/address-form-configuration.provider'; -import { SelectOption } from 'ish-shared/forms/components/select/select.component'; @Component({ selector: 'ish-formly-address-form', diff --git a/src/app/shared/formly/types/select-field/select-field.component.ts b/src/app/shared/formly/types/select-field/select-field.component.ts index a94d7e8abf..665e777137 100644 --- a/src/app/shared/formly/types/select-field/select-field.component.ts +++ b/src/app/shared/formly/types/select-field/select-field.component.ts @@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'; import { FormControl } from '@angular/forms'; import { FieldType } from '@ngx-formly/core'; -import { SelectOption } from 'ish-shared/forms/components/select/select.component'; +import { SelectOption } from 'ish-core/models/select-option/select-option.model'; /** * Type for a basic select field 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 4cb0e5380f..0000000000 --- a/src/app/shared/forms/components/select-address/select-address.component.ts +++ /dev/null @@ -1,34 +0,0 @@ -import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from '@angular/core'; - -import { Address } from 'ish-core/models/address/address.model'; -import { SelectComponent, SelectOption } 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 39e6ddc4ca..0000000000 --- a/src/app/shared/forms/components/select-country/select-country.component.ts +++ /dev/null @@ -1,37 +0,0 @@ -import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from '@angular/core'; - -import { Country } from 'ish-core/models/country/country.model'; -import { SelectComponent, SelectOption } 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 d6711d7727..0000000000 --- a/src/app/shared/forms/components/select-region/select-region.component.ts +++ /dev/null @@ -1,37 +0,0 @@ -import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from '@angular/core'; - -import { Region } from 'ish-core/models/region/region.model'; -import { SelectComponent, SelectOption } 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 e6f4f1b988..0000000000 --- a/src/app/shared/forms/components/select-title/select-title.component.ts +++ /dev/null @@ -1,57 +0,0 @@ -import { ChangeDetectionStrategy, Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core'; -import { TranslateService } from '@ngx-translate/core'; - -import { SelectComponent, SelectOption } 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 59eed3fa96..0000000000 --- a/src/app/shared/forms/components/select/select.component.spec.ts +++ /dev/null @@ -1,109 +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 { SelectComponent, SelectOption } 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 fdc15279b7..0000000000 --- a/src/app/shared/forms/components/select/select.component.ts +++ /dev/null @@ -1,43 +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'; - -export interface SelectOption { - value: string; - label: string; -} - -// 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 {} diff --git a/src/app/shared/forms/utils/forms.service.spec.ts b/src/app/shared/forms/utils/forms.service.spec.ts index e65bfae3ba..b81308e490 100644 --- a/src/app/shared/forms/utils/forms.service.spec.ts +++ b/src/app/shared/forms/utils/forms.service.spec.ts @@ -4,8 +4,8 @@ import { of } from 'rxjs'; import { instance, mock } from 'ts-mockito'; import { Address } from 'ish-core/models/address/address.model'; +import { SelectOption } from 'ish-core/models/select-option/select-option.model'; import { CoreStoreModule } from 'ish-core/store/core/core-store.module'; -import { SelectOption } from 'ish-shared/forms/components/select/select.component'; import { FormsService } from './forms.service'; diff --git a/src/app/shared/forms/utils/forms.service.ts b/src/app/shared/forms/utils/forms.service.ts index 36537ad1dc..9be6aac021 100644 --- a/src/app/shared/forms/utils/forms.service.ts +++ b/src/app/shared/forms/utils/forms.service.ts @@ -5,9 +5,9 @@ import { Observable, OperatorFunction } from 'rxjs'; import { map } from 'rxjs/operators'; import { Address } from 'ish-core/models/address/address.model'; +import { SelectOption } from 'ish-core/models/select-option/select-option.model'; import { getCurrentLocale } from 'ish-core/store/core/configuration'; import { whenTruthy } from 'ish-core/utils/operators'; -import { SelectOption } from 'ish-shared/forms/components/select/select.component'; /** * FormsService.getAddressOptions as a pipeable operator diff --git a/src/styles/global/forms/forms.scss b/src/styles/global/forms.scss similarity index 57% rename from src/styles/global/forms/forms.scss rename to src/styles/global/forms.scss index bf95dddff0..157e74c925 100644 --- a/src/styles/global/forms/forms.scss +++ b/src/styles/global/forms.scss @@ -1,24 +1,63 @@ +fieldset { + margin-bottom: ($space-default); +} + +// REQUIRED FIELDS +.indicates-required { + color: $text-color-quarternary; + + .required { + margin-right: 4px; + color: $text-color-special; + } +} + +// LABELS +label { + font-weight: normal; + + .required { + margin-left: 4px; + color: $text-color-special; + } + + &.disabled { + opacity: 0.5; + } + + > * { + vertical-align: baseline; + } +} + +.label-empty { + @media (max-width: $screen-xs-max) { + margin-top: 2.2rem; + } +} + .form-check { height: auto; padding-bottom: 0; padding-left: 0; margin-bottom: 0.5rem; -} -.has-feedback { - .form-control[type='number'] { - padding: $grid-gutter-width * 0.2 divide($grid-gutter-width, 2.5); + label { + label { + padding-left: 0; + } } +} - .form-control[type='number'] + * .form-control-feedback { - display: none !important; - } +.form-check-label { + margin-left: 18px; +} - .form-control { - + a.form-control-feedback { - pointer-events: all; - } - } +// FORM CONTROLS +.quantity-input { + min-width: 80px; + max-width: 165px; + margin-bottom: $space-default; } input { @@ -31,15 +70,26 @@ input[type='file'] { box-shadow: none; } +input[type='radio'] ~ input[type='text'] { + margin-left: $space-default * 0.5; + + @media (max-width: $screen-xs-max) { + display: inline-block; + width: 90%; + } +} + +input[type='radio'], +input[type='checkbox'] { + margin-right: 4px; + vertical-align: middle; +} + input.form-check-input { margin-top: 0.25rem; margin-left: 0; } -.form-check-label { - margin-left: 18px; -} - .form-control-checkbox { margin-bottom: 0; font-size: $font-size-base; @@ -68,6 +118,46 @@ input.form-check-input { } } +.form-control:focus { + border-color: $color-special-tertiary; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px lighten($color-special-tertiary, 20%); +} + +.input-help { + color: $text-color-quarternary; +} + +// ERROR and SUCCESS +.has-feedback { + .form-control[type='number'] { + padding: $grid-gutter-width * 0.2 divide($grid-gutter-width, 2.5); + } + + .form-control[type='number'] + * .form-control-feedback { + display: none !important; + } + + .form-control { + + a.form-control-feedback { + pointer-events: all; + } + + padding-right: 42.5px; // TODO: dynamic field + } +} + +.has-feedback .form-control-feedback { + position: absolute; + top: 0; + right: 25px; // TODO: dynamic field + height: $input-line-height + ($input-padding-y * 2); + line-height: $input-line-height + ($input-padding-y * 2); +} + +.has-feedback select + * .form-control-feedback { + right: 35px; // TODO: dynamic field +} + .has-success { .ng-fa-icon { color: $success-color; @@ -99,67 +189,13 @@ input.form-check-input { } } - .validation-message small { - display: block; - } - .captcha > div { border: solid 1px $error-color; } } -/* purgecss ignore */ -.grecaptcha-badge { - visibility: hidden; -} - -.filter-dropdown { - position: relative; - padding-bottom: 15px; - - .dropdown-menu { - width: 100%; - padding: 0; - - a.dropdown-item { - color: $input-color; - - &.selected { - color: $text-color-corporate; - background-color: $color-inverse; - - .icon-checked { - position: absolute; - right: 15px; - padding-top: divide($space-default, 6); - } - } - } - } - - .dropdown, - .dropup { - &.show { - color: $input-focus-color; - background-color: $input-focus-bg; - border-color: $input-focus-border-color; - outline: 0; - } - - .dropdown-toggle { - color: $text-color-primary; - - &:hover { - color: $text-color-primary; - } - - &::after { - position: absolute; - top: calc(#{$input-height} / 2); - right: $space-default * 0.5; - } - } - } +.validation-message small { + display: block; } .validation-offset { @@ -174,8 +210,7 @@ input.form-check-input { } } -.label-empty { - @media (max-width: $screen-xs-max) { - margin-top: 2.2rem; - } +/* purgecss ignore */ +.grecaptcha-badge { + visibility: hidden; } diff --git a/src/styles/global/forms/fields.scss b/src/styles/global/forms/fields.scss deleted file mode 100644 index 76d32ec6eb..0000000000 --- a/src/styles/global/forms/fields.scss +++ /dev/null @@ -1,64 +0,0 @@ -fieldset { - margin-bottom: ($space-default); -} - -.form-control:focus { - border-color: $color-special-tertiary; - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px lighten($color-special-tertiary, 20%); -} - -.quantity-input { - min-width: 80px; - max-width: 165px; - margin-bottom: $space-default; -} - -input[type='radio'] ~ input[type='text'] { - margin-left: $space-default * 0.5; - - @media (max-width: $screen-xs-max) { - display: inline-block; - width: 90%; - } -} - -input[type='radio'], -input[type='checkbox'] { - margin-right: 4px; - vertical-align: middle; -} - -// ERROR -.has-feedback .form-control-feedback { - position: absolute; - top: 0; - right: 25px; // TODO: dynamic field - height: $input-line-height + ($input-padding-y * 2); - line-height: $input-line-height + ($input-padding-y * 2); -} - -.has-feedback select + * .form-control-feedback { - right: 35px; // TODO: dynamic field -} - -.has-feedback .form-control { - padding-right: 42.5px; // TODO: dynamic field -} - -// REQUIRED FIELDS - -.indicates-required { - color: $text-color-quarternary; - - .required { - margin-right: 4px; - color: $text-color-special; - } -} - -label { - .required { - margin-left: 4px; - color: $text-color-special; - } -} diff --git a/src/styles/global/forms/labels.scss b/src/styles/global/forms/labels.scss deleted file mode 100644 index 925ea8cd0b..0000000000 --- a/src/styles/global/forms/labels.scss +++ /dev/null @@ -1,29 +0,0 @@ -.form-inline { - label { - padding-right: ($space-default * 0.25); - } -} - -label { - font-weight: normal; - - &.disabled { - opacity: 0.5; - } - - > * { - vertical-align: baseline; - } -} - -.input-help { - color: $text-color-quarternary; -} - -.form-check { - label { - label { - padding-left: 0; - } - } -} diff --git a/src/styles/main.scss b/src/styles/main.scss index 7fa9c36fb6..e4a5a90e72 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -40,9 +40,7 @@ @import 'global/tables'; @import 'global/toasts'; @import 'global/swiper'; -@import 'global/forms/labels'; -@import 'global/forms/fields'; -@import 'global/forms/forms'; +@import 'global/forms'; @import 'global/lists'; @import 'global/share-tools'; @import 'global/notifications'; diff --git a/src/styles/pages/category/filter-panel.scss b/src/styles/pages/category/filter-panel.scss index 9f9b0ad9c0..509807ac9b 100644 --- a/src/styles/pages/category/filter-panel.scss +++ b/src/styles/pages/category/filter-panel.scss @@ -203,6 +203,55 @@ } } +.filter-dropdown { + position: relative; + padding-bottom: 15px; + + .dropdown-menu { + width: 100%; + padding: 0; + + a.dropdown-item { + color: $input-color; + + &.selected { + color: $text-color-corporate; + background-color: $color-inverse; + + .icon-checked { + position: absolute; + right: 15px; + padding-top: divide($space-default, 6); + } + } + } + } + + .dropdown, + .dropup { + &.show { + color: $input-focus-color; + background-color: $input-focus-bg; + border-color: $input-focus-border-color; + outline: 0; + } + + .dropdown-toggle { + color: $text-color-primary; + + &:hover { + color: $text-color-primary; + } + + &::after { + position: absolute; + top: calc(#{$input-height} / 2); + right: $space-default * 0.5; + } + } + } +} + .non-parametric-panel { .filter-group { padding-bottom: 0;