* `op-form-field` was used both as a BEM block as well as a component. This commit removes usages of `op-form-field` in both instances. * It changes all usages of `opFormBinding` to `spotFormBinding`. * It removes all old files related to `op-form-field`.pull/11330/head
Benjamin Bädorf
3 years ago
parent
c5313bee41
commit
c1d0e02629
@ -1,24 +0,0 @@ |
|||||||
import { Directive, forwardRef, Input } from '@angular/core'; |
|
||||||
import { |
|
||||||
FormArray, FormControl, FormGroup, NgControl, |
|
||||||
} from '@angular/forms'; |
|
||||||
|
|
||||||
export const formControlBinding:any = { |
|
||||||
provide: NgControl, |
|
||||||
useExisting: forwardRef(() => OpFormBindingDirective), |
|
||||||
}; |
|
||||||
|
|
||||||
@Directive({ |
|
||||||
selector: '[opFormBinding]', |
|
||||||
providers: [formControlBinding], |
|
||||||
exportAs: 'ngForm', |
|
||||||
}) |
|
||||||
export class OpFormBindingDirective extends NgControl { |
|
||||||
@Input('opFormBinding') form!:FormControl|FormGroup|FormArray; |
|
||||||
|
|
||||||
get control():FormControl|FormGroup|FormArray { |
|
||||||
return this.form; |
|
||||||
} |
|
||||||
|
|
||||||
viewToModelUpdate():void {} |
|
||||||
} |
|
||||||
@ -1,7 +0,0 @@ |
|||||||
.op-form-field_invalid |
|
||||||
.ng-select-container, |
|
||||||
.op-input, |
|
||||||
.op-option-list--item, |
|
||||||
.document-editor__editable-container, |
|
||||||
.ck.ck-toolbar |
|
||||||
border-color: var(--content-form-error-color) |
|
||||||
@ -1,56 +0,0 @@ |
|||||||
<ng-container *ngIf="!hidden"> |
|
||||||
<label class="op-form-field--label-wrap"> |
|
||||||
<div class="op-form-field--label"> |
|
||||||
<span |
|
||||||
*ngIf="showErrorMessage" |
|
||||||
class="hidden-for-sighted" |
|
||||||
> |
|
||||||
{{ text.invalid }} |
|
||||||
</span> |
|
||||||
{{ label }} |
|
||||||
|
|
||||||
<span *ngIf="required" class="op-form-field--label-indicator">*</span> |
|
||||||
|
|
||||||
<attribute-help-text |
|
||||||
[attribute]="helpTextAttribute" |
|
||||||
[attributeScope]="helpTextAttributeScope" |
|
||||||
></attribute-help-text> |
|
||||||
</div> |
|
||||||
|
|
||||||
<ng-container *ngIf="!noWrapLabel"> |
|
||||||
<ng-container *ngTemplateOutlet="inputTemplate"></ng-container> |
|
||||||
</ng-container> |
|
||||||
</label> |
|
||||||
|
|
||||||
<ng-container *ngIf="noWrapLabel"> |
|
||||||
<ng-container *ngTemplateOutlet="inputTemplate"></ng-container> |
|
||||||
</ng-container> |
|
||||||
|
|
||||||
<div class="op-form-field--help-text"> |
|
||||||
<ng-content select="[slot=help-text]"></ng-content> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div |
|
||||||
class="op-form-field--errors" |
|
||||||
*ngIf="showErrorMessage" |
|
||||||
[id]="errorsID" |
|
||||||
> |
|
||||||
<ng-content select="[slot=errors]"></ng-content> |
|
||||||
</div> |
|
||||||
</ng-container> |
|
||||||
|
|
||||||
<ng-template #inputTemplate> |
|
||||||
<div |
|
||||||
class="op-form-field--description" |
|
||||||
[id]="descriptionID" |
|
||||||
> |
|
||||||
<ng-content select="[slot=description]"></ng-content> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div |
|
||||||
class="op-form-field--input" |
|
||||||
[attr.aria-describedby]="describedByID" |
|
||||||
> |
|
||||||
<ng-content select="[slot=input]"></ng-content> |
|
||||||
</div> |
|
||||||
</ng-template> |
|
||||||
@ -1,78 +0,0 @@ |
|||||||
import { |
|
||||||
Component, ContentChild, HostBinding, Input, Optional, |
|
||||||
} from '@angular/core'; |
|
||||||
import { AbstractControl, FormGroupDirective, NgControl } from '@angular/forms'; |
|
||||||
import { I18nService } from 'core-app/core/i18n/i18n.service'; |
|
||||||
|
|
||||||
@Component({ |
|
||||||
selector: 'op-form-field', |
|
||||||
templateUrl: './form-field.component.html', |
|
||||||
}) |
|
||||||
export class OpFormFieldComponent { |
|
||||||
@HostBinding('class.op-form-field') className = true; |
|
||||||
|
|
||||||
@HostBinding('class.op-form-field_invalid') get errorClassName() { |
|
||||||
return this.showErrorMessage; |
|
||||||
} |
|
||||||
|
|
||||||
@Input() label = ''; |
|
||||||
|
|
||||||
@Input() noWrapLabel = false; |
|
||||||
|
|
||||||
@Input() required = false; |
|
||||||
|
|
||||||
@Input() hidden = false; |
|
||||||
|
|
||||||
@Input() showValidationErrorOn:'change' | 'blur' | 'submit' | 'never' = 'submit'; |
|
||||||
|
|
||||||
@Input() control?:AbstractControl; |
|
||||||
|
|
||||||
@Input() helpTextAttribute?:string; |
|
||||||
|
|
||||||
@Input() helpTextAttributeScope?:string; |
|
||||||
|
|
||||||
@ContentChild(NgControl) ngControl:NgControl; |
|
||||||
|
|
||||||
internalID = `op-form-field-${+new Date()}`; |
|
||||||
|
|
||||||
text = { |
|
||||||
invalid: this.I18n.t('js.label_invalid'), |
|
||||||
}; |
|
||||||
|
|
||||||
get errorsID() { |
|
||||||
return `${this.internalID}-errors`; |
|
||||||
} |
|
||||||
|
|
||||||
get descriptionID() { |
|
||||||
return `${this.internalID}-description`; |
|
||||||
} |
|
||||||
|
|
||||||
get describedByID() { |
|
||||||
return this.showErrorMessage ? this.errorsID : this.descriptionID; |
|
||||||
} |
|
||||||
|
|
||||||
get formControl():AbstractControl|undefined|null { |
|
||||||
return this.ngControl?.control || this.control; |
|
||||||
} |
|
||||||
|
|
||||||
get showErrorMessage():boolean { |
|
||||||
if (!this.formControl) { |
|
||||||
return false; |
|
||||||
} |
|
||||||
|
|
||||||
if (this.showValidationErrorOn === 'submit') { |
|
||||||
return this.formControl.invalid && this._formGroupDirective?.submitted; |
|
||||||
} if (this.showValidationErrorOn === 'blur') { |
|
||||||
return this.formControl.invalid && this.formControl.touched; |
|
||||||
} if (this.showValidationErrorOn === 'change') { |
|
||||||
return this.formControl.invalid && this.formControl.dirty; |
|
||||||
} |
|
||||||
|
|
||||||
return false; |
|
||||||
} |
|
||||||
|
|
||||||
constructor( |
|
||||||
@Optional() private _formGroupDirective:FormGroupDirective, |
|
||||||
readonly I18n:I18nService, |
|
||||||
) {} |
|
||||||
} |
|
||||||
@ -1,53 +0,0 @@ |
|||||||
@import 'form-field.children' |
|
||||||
|
|
||||||
.op-form-field |
|
||||||
display: flex |
|
||||||
flex-direction: column |
|
||||||
line-height: 1.6rem |
|
||||||
|
|
||||||
// This is a fix for the formly-forms, which render the wrapper around a non-visible input |
|
||||||
&:empty |
|
||||||
display: none |
|
||||||
|
|
||||||
&--label, |
|
||||||
&--description, |
|
||||||
&--input, |
|
||||||
&--help-text |
|
||||||
margin-bottom: 0.5rem |
|
||||||
|
|
||||||
&--label-wrap |
|
||||||
display: flex |
|
||||||
flex-direction: column |
|
||||||
margin: 0 |
|
||||||
|
|
||||||
&--label |
|
||||||
font-size: 1rem |
|
||||||
font-weight: bold |
|
||||||
|
|
||||||
&-indicator |
|
||||||
color: var(--primary-color) |
|
||||||
|
|
||||||
&_invalid &--label |
|
||||||
color: var(--content-form-error-color) |
|
||||||
|
|
||||||
&--description, |
|
||||||
&--help-text |
|
||||||
font-size: 12px |
|
||||||
|
|
||||||
&--description *:last-child |
|
||||||
margin-bottom: 0 |
|
||||||
|
|
||||||
&--errors |
|
||||||
display: flex |
|
||||||
flex-direction: column |
|
||||||
|
|
||||||
&--error |
|
||||||
color: var(--content-form-error-color) |
|
||||||
margin-bottom: 1rem |
|
||||||
font-size: 0.8rem |
|
||||||
|
|
||||||
&--description, |
|
||||||
&--help-text, |
|
||||||
&--errors |
|
||||||
&:empty |
|
||||||
display: none |
|
||||||
Loading…
Reference in new issue