@klippa/ngx-enhancy-forms 1.0.0 → 2.1.0

package/src/lib/elements/select/select.component.scss

@@ -1,289 +0,0 @@
-@import '../../../style/themes/default/variables';
-$color-marked: lighten($primary, 50%)!default;
-$label-background: lighten($primary, 50%)!default;
-$label-border: lighten($primary, 30%)!default;
-
-:host {
-	display: block;
-}
-.showErrors ::ng-deep .ng-select-container {
-	border-color: $default-warning;
-}
-:host ::ng-deep ng-select.ng-select .ng-select-container {
-  color: $default-text-color;
-}
-
-:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container{
-  background:#fff;
-  //border-color:#b3b3b3 #ccc #d9d9d9
-  border-color: lighten($primary, 10%);
-}
-:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container:hover{
-  box-shadow:none
-}
-:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container .ng-arrow{
-  top:-2px;
-  border-color:transparent transparent #999;
-  border-width:0 5px 5px
-}
-:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container .ng-arrow:hover{
-  border-color:transparent transparent #666
-}
-:host ::ng-deep .ng-select.ng-select-opened.ng-select-bottom>.ng-select-container{
-  border-bottom-right-radius:0;
-  border-bottom-left-radius:0
-}
-:host ::ng-deep .ng-select.ng-select-opened.ng-select-top>.ng-select-container{
-  border-top-right-radius:0;
-  border-top-left-radius:0
-}
-:host ::ng-deep .ng-select.ng-select-focused:not(.ng-select-opened)>.ng-select-container{
-  //border-color:#007eff;
-  //box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 0 3px rgba(0,126,255,0.1)
-}
-:host ::ng-deep .ng-select.ng-select-disabled>.ng-select-container{
-  background-color:#f9f9f9
-}
-:host ::ng-deep .ng-select .ng-has-value .ng-placeholder{
-  display:none
-}
-:host ::ng-deep .ng-select .ng-select-container{
-  display: flex;
-  flex-direction: row;
-  background-color:#fff;
-  border-radius:4px;
-  border:1px solid #ccc;
-  min-height:42px;
-  align-items:center;
-
-  background-clip: padding-box;
-  background-color: #fff;
-  border: 1px solid #e6ecf5;
-  border-radius: 2px;
-  box-shadow: none;
-  box-sizing: border-box;
-  color: #888da8;
-  font-size: 1rem;
-  font-size: 14px;
-  //height: calc(2.25rem + 2px);
-  line-height: 1.5;
-  margin: 0;
-  outline: none;
-  overflow: visible;
-  padding: .375rem .75rem;
-  transition-delay: 0s;
-  transition-duration: .2s;
-  transition-property: all;
-  transition-timing-function: ease-in;
-  width: 100%;
-}
-:host ::ng-deep .ng-select .ng-select-container:hover{
-  box-shadow:0 1px 0 rgba(0,0,0,0.06)
-}
-:host ::ng-deep .ng-select .ng-select-container .ng-value-container{
-  align-items:center;
-  padding-left:10px;
-	overflow: hidden;
-}
-:host ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{
-  color:#aaa
-}
-:host ::ng-deep .ng-select.ng-select-single .ng-select-container{
-  height:42px;
-}
-:host ::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{
-  left:0;
-  padding-left:10px;
-  padding-right:50px;
-  top:5px;
-}
-:host ::ng-deep .ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value{
-  background-color:#f9f9f9;
-  border:1px solid #e3e3e3;
-}
-:host ::ng-deep .ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value .ng-value-label{
-  padding:0px 5px
-}
-:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container{
-  padding-left:7px;
-  padding-right:10px;
-  padding-top:2px;
-}
-
-:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{
-  font-size:0.9em;
-  margin-right:5px;
-  margin-bottom:5px;
-  background-color:$label-background;
-  border-radius:2px;
-  border:1px solid $label-border;
-	display: flex;
-	overflow: hidden;
-}
-:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled{
-  background-color:#f9f9f9;
-  border:1px solid #e3e3e3
-}
-:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-label{
-  padding-left:5px
-}
-:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-label{
-  display:inline-block;
-  padding:0px 5px 0px 5px;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
-:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{
-  display:inline-block;
-  padding:0px 5px
-}
-:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon:hover{
-  background-color:$label-border;
-}
-:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{
-  border-right:1px solid $label-border;
-}
-:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{
-  border-left:1px solid #c2e0ff
-}
-:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input{
-  padding-bottom:3px;
-  padding-left:3px
-}
-:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{
-  top:5px;
-  padding-bottom:3px;
-  padding-left:3px;
-  position: static;
-}
-
-:host ::ng-deep .ng-select .ng-clear-wrapper{
-  color:#999
-}
-:host ::ng-deep .ng-select .ng-clear-wrapper .ng-clear:hover{
-  color:$default-danger;
-}
-:host ::ng-deep .ng-select .ng-spinner-zone{
-  padding-right:5px;
-  padding-top:5px
-}
-:host ::ng-deep .ng-select .ng-arrow-wrapper{
-  padding-right:5px;
-  width:25px
-}
-:host ::ng-deep .ng-select .ng-arrow-wrapper:hover .ng-arrow{
-  border-top-color:#666
-}
-:host ::ng-deep .ng-select .ng-arrow-wrapper .ng-arrow{
-  border-color:#999 transparent transparent;
-  border-style:solid;
-  border-width:5px 5px 2.5px
-}
-:host ::ng-deep .ng-dropdown-panel{
-  background-color:#fff;
-  border:1px solid lighten($primary, 10%);
-  box-shadow:0 1px 0 rgba(0,0,0,0.06)
-}
-:host ::ng-deep .ng-dropdown-panel.ng-select-bottom{
-  top:100%;
-  border-bottom-right-radius:4px;
-  border-bottom-left-radius:4px;
-  border-top-color:#e6e6e6;
-  margin-top:-1px
-}
-:host ::ng-deep .ng-dropdown-panel.ng-select-bottom .ng-dropdown-panel-items .ng-option:last-child{
-  border-bottom-right-radius:4px;
-  border-bottom-left-radius:4px
-}
-:host ::ng-deep .ng-dropdown-panel.ng-select-top{
-  bottom:100%;
-  border-top-right-radius:4px;
-  border-top-left-radius:4px;
-  border-bottom-color:#e6e6e6;
-  margin-bottom:-1px
-}
-:host ::ng-deep .ng-dropdown-panel.ng-select-top .ng-dropdown-panel-items .ng-option:first-child{
-  border-top-right-radius:4px;
-  border-top-left-radius:4px
-}
-:host ::ng-deep .ng-dropdown-panel .ng-dropdown-header{
-  border-bottom:1px solid #ccc;
-  padding:5px 7px
-}
-:host ::ng-deep .ng-dropdown-panel .ng-dropdown-footer{
-  border-top:1px solid #ccc;
-  padding:5px 7px
-}
-:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items{
-  margin-bottom:1px
-}
-:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{
-  user-select:none;
-  cursor:default;
-  padding:8px 10px;
-  font-weight:500;
-  color:rgba(0,0,0,0.54);
-  cursor:pointer
-}
-:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-disabled{
-  cursor:default
-}
-:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-marked{
-  background-color:#ebf5ff
-}
-:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected{
-  background-color:#f5faff;
-  font-weight:600
-}
-:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{
-  background-color:#fff;
-  color:rgba(0,0,0,0.87);
-  padding:8px 10px
-}
-:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{
-  color:#333;
-  background-color:$color-marked;
-}
-:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected .ng-option-label{
-  font-weight:600
-}
-:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{
-  background-color: $color-marked;
-  color:#333
-}
-:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled{
-  color:#cccccc
-}
-:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{
-  padding-left:22px
-}
-:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{
-  padding-right:5px;
-  font-size:80%;
-  font-weight:400
-}
-
-:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container {
-  padding-left: 0;
-}
-
-:host ::ng-deep ng-select.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input {
-  top: 9px;
-  color: $default-text-color;
-}
-
-:host ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input>input {
-  color: $default-text-color;
-}
-
-:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option {
-  color: $default-text-color;
-}
-
-:host ::ng-deep .ng-select.ng-select-auto-grow {
-  max-width: inherit;
-
-  .ng-dropdown-panel {
-    width: auto;
-  }
-}

package/src/lib/elements/select/select.component.ts

@@ -1,44 +0,0 @@
-import { Component, Host, Input, OnInit, Optional } from '@angular/core';
-import { ControlContainer, NG_VALUE_ACCESSOR } from '@angular/forms';
-import {ValueAccessorBase} from "../value-accessor-base/value-accessor-base.component";
-import {FormElementComponent} from "../../form/form-element/form-element.component";
-// import { TranslateService } from '@ngx-translate/core';
-// import { _ } from '~/app/util/i18n'; // TODO: translate
-
-export type AppSelectOptions = Array<{
-	id: any;
-	name: string;
-	description?: string;
-	disabled?: boolean;
-}>;
-
-@Component({
-	selector: 'klp-form-select',
-	templateUrl: './select.component.html',
-	styleUrls: ['./select.component.scss'],
-	providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: SelectComponent, multi: true }],
-})
-export class SelectComponent extends ValueAccessorBase<string | string[]> implements OnInit {
-	@Input() placeholder: string;
-	@Input() options: AppSelectOptions;
-	@Input() multiple = false;
-	@Input() clearable = true;
-	@Input() public dropdownPosition: string;
-	@Input() public customSearchFn: (term: string, item: { id: string; name: string; description: string }) => boolean;
-
-	constructor(
-		@Optional() @Host() protected parent: FormElementComponent,
-		@Optional() @Host() protected controlContainer: ControlContainer,
-		// private translate: TranslateService
-	) {
-		super(parent, controlContainer);
-	}
-
-	ngOnInit(): void {
-		super.ngOnInit();
-		if (!this.placeholder) {
-			// this.placeholder = this.translate.instant(_('Pick an option'));
-			this.placeholder = ('Pick an option');
-		}
-	}
-}

package/src/lib/elements/sortable-items/sortable-items.component.html

@@ -1,23 +0,0 @@
-<ng-template #listItem>
-	<li *ngFor="let item of innerValue; index as index"
-	    class="sortableItem"
-	    [ngClass]="{
-			largeSortableItem: sortableItemSize === 'lg',
-		 	smallSortableItem: sortableItemSize === 'sm'
-		 }"
-	>
-		<ng-container [ngTemplateOutlet]="template" [ngTemplateOutletContext]="{ item: item, index:index }" ></ng-container>
-	</li>
-</ng-template>
-
-<ol *ngIf='!disabled'
-        [sortablejs]="innerValue"
-        [sortablejsOptions]="{ onUpdate: itemsOrderChanged }"
-        class="itemsContainer"
->
-	<ng-container *ngTemplateOutlet="listItem"></ng-container>
-</ol>
-
-<ol *ngIf='disabled' class="itemsContainer disabled-mouse-cursor">
-	<ng-container *ngTemplateOutlet="listItem"></ng-container>
-</ol>

package/src/lib/elements/sortable-items/sortable-items.component.scss

@@ -1,34 +0,0 @@
-@import '../../../style/themes/default/variables';
-
-:host {
-	display: block;
-}
-.itemsContainer {
-	border: 1px solid $border-color;
-	border-radius: $border-radius-default;
-	padding: 0;
-	margin-bottom: 0; // overwrite default styling for <ol>
-}
-.sortableItem {
-	list-style: none;
-	border-top: 1px solid $border-color;
-	cursor: grab;
-	&:hover {
-		background: $default-gray-light;
-	}
-	&:first-child {
-		border-top: none; // otherwise you get 2 borders, 1 from container and 1 from the topmost item
-	}
-}
-
-.largeSortableItem {
-	padding: 15px;
-}
-
-.smallSortableItem {
-	padding: 0 10px;
-}
-
-.disabled-mouse-cursor li {
-	cursor: no-drop;
-}

package/src/lib/elements/sortable-items/sortable-items.component.ts

@@ -1,18 +0,0 @@
-import { Component, ContentChild, Input, TemplateRef } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import {ValueAccessorBase} from "../value-accessor-base/value-accessor-base.component";
-
-@Component({
-	selector: 'klp-form-sortable-items',
-	templateUrl: './sortable-items.component.html',
-	styleUrls: ['./sortable-items.component.scss'],
-	providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: SortableItemsComponent, multi: true }],
-})
-export class SortableItemsComponent extends ValueAccessorBase<Array<any>> {
-	@ContentChild(TemplateRef) template;
-	@Input() sortableItemSize: 'sm' | 'lg' = 'lg';
-
-	itemsOrderChanged = () => {
-		this.setInnerValueAndNotify(this.innerValue);
-	};
-}

package/src/lib/elements/text-input/text-input.component.html

@@ -1,10 +0,0 @@
-<input
-	[type]="type"
-	class="form-control"
-	[ngClass]="{showErrors: isInErrorState()}"
-	[(ngModel)]="innerValue"
-	(input)="setInnerValueAndNotify($event.target.value)"
-	[placeholder]="placeholder ? placeholder : ''"
-	(blur)="touch()"
-	[disabled]='disabled'
-/>

package/src/lib/elements/text-input/text-input.component.scss

@@ -1,15 +0,0 @@
-@import '../../../style/themes/default/variables';
-@import '../../../style/mixins';
-
-:host {
-	display: block;
-}
-
-input {
-  outline: none;
-  @include formControl();
-}
-
-.showErrors {
-	border-color: $default-warning;
-}

package/src/lib/elements/text-input/text-input.component.ts

@@ -1,14 +0,0 @@
-import { Component, Input } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import {ValueAccessorBase} from "../value-accessor-base/value-accessor-base.component";
-
-@Component({
-	selector: 'klp-form-text-input',
-	templateUrl: './text-input.component.html',
-	styleUrls: ['./text-input.component.scss'],
-	providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: TextInputComponent, multi: true }],
-})
-export class TextInputComponent extends ValueAccessorBase<string> {
-	@Input() placeholder: string;
-	@Input() type: 'text' | 'password' = 'text';
-}

package/src/lib/elements/toggle/toggle.component.html

@@ -1,9 +0,0 @@
-<div class="componentContainer" [ngClass]="{disabled: disabled}">
-	<input type="checkbox" class="nativeCheckbox"
-		[(ngModel)]="innerValue"
-		(input)="setInnerValueAndNotify($event.target.checked); touch()"
-		[disabled]="disabled"
-		[ngClass]="{showErrors: isInErrorState()}"
-	/>
-	<div class="toggleVisual"></div>
-</div>

package/src/lib/elements/toggle/toggle.component.scss

@@ -1,78 +0,0 @@
-@import '../../../style/themes/default/variables';
-@import '../../../style/mixins';
-
-$width: 35px;
-$height: 20px;
-
-:host {
-	display: block;
-}
-.componentContainer {
-	position: relative;
-}
-.nativeCheckbox {
-	position: absolute;
-	opacity: 0;
-	top: 0;
-	left: 0;
-	width: $width;
-	height: $height;
-	cursor: pointer;
-}
-
-.toggleVisual {
-	pointer-events: none;
-	position: relative;
-	display: block;
-	@include transition(0.4s ease);
-	width: $width;
-	height: $height;
-	border: 1px solid $border-color;
-	border-radius: $width;
-
-	&:before {
-		content: '';
-		position: absolute;
-		display: block;
-		@include transition(0.2s cubic-bezier(0.24, 0, 0.5, 1));
-    margin: 1px;
-		width: $width - 2px;
-		height: $height - 2px;
-		top: -1px;
-		left: -1px;
-		border-radius: 30px;
-	}
-
-	&:after {
-		content: '';
-		position: absolute;
-		display: block;
-		box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 0px 0 rgba(0, 0, 0, 0.04), 0 4px 9px rgba(0, 0, 0, 0.13), 0 3px 3px rgba(0, 0, 0, 0.05);
-		@include transition(0.35s cubic-bezier(0.54, 1.6, 0.5, 1));
-		background: darken($default-white, 3%);
-		height: $height;
-		width: $height; // using height here because we want the knob to be as same width as height
-		top: -1px;
-		left: 0;
-		border-radius: 60px;
-	}
-}
-
-.nativeCheckbox:checked {
-	+ .toggleVisual {
-		&:before {
-			background: $default-success;
-			@include transition(width 0.2s cubic-bezier(0, 0, 0, 0.1));
-		}
-		&:after {
-			left: 18px;
-		}
-	}
-}
-
-.disabled {
-	opacity: 0.6;
-}
-.showErrors + .toggleVisual:before {
-	border: 1px solid $default-warning;
-}

package/src/lib/elements/toggle/toggle.component.ts

@@ -1,11 +0,0 @@
-import { Component, Input } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import {ValueAccessorBase} from "../value-accessor-base/value-accessor-base.component";
-
-@Component({
-	selector: 'klp-form-toggle',
-	templateUrl: './toggle.component.html',
-	styleUrls: ['./toggle.component.scss'],
-	providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: ToggleComponent, multi: true }],
-})
-export class ToggleComponent extends ValueAccessorBase<boolean> {}

package/src/lib/elements/value-accessor-base/value-accessor-base.component.ts

@@ -1,89 +0,0 @@
-import { ControlContainer, ControlValueAccessor, FormControl } from '@angular/forms';
-import { Component, Host, Input, Optional } from '@angular/core';
-import { FormElementComponent } from '../../form/form-element/form-element.component';
-import { isNullOrUndefined, stringIsSetAndNotEmpty } from '../../util/values';
-
-/**
- * This component is a base in order to create a component that supports ngModel.
- * Some important things to know about it:
- *
- * innerValue = your own inner state, which you should use to store the current state of what ngModel should be.
- * writeValue() = called by angular, when ngModel is changed from OUTSIDE of the component. Feel free to patch this method if you need inner logic to happen when ngModel is altered from the outside. Always remember to also call the super.writeValue if you do!
- * setInnerValueAndNotify() = call this when you want your ngModel to be updated from INSIDE of your component, and provide it to the OUTSIDE.
- * ngOnInit() = Used to support the angular reactive forms framework. If you use ngOnInit in your own component (which happens fairly often) you must not forget to call the super.ngOnInit() method.
- */
-
-@Component({
-	selector: '',
-	template: '',
-})
-export class ValueAccessorBase<T> implements ControlValueAccessor {
-	public innerValue: T;
-	public changed = new Array<(value: T) => void>();
-	private touched = new Array<() => void>();
-
-	@Input() public disabled = false;
-	// we support both providing just the formControlName and the full formControl
-	@Input() public formControlName: string = null;
-	@Input() public formControl: FormControl = null;
-
-	private attachedFormControl: FormControl;
-
-	constructor(
-		@Host() @Optional() protected parent: FormElementComponent,
-		@Host() @Optional() protected controlContainer: ControlContainer
-	) {}
-
-	ngOnInit() {
-		if (this.formControl) {
-			this.attachedFormControl = this.formControl;
-		} else if (stringIsSetAndNotEmpty(this.formControlName)) {
-			this.attachedFormControl = this.controlContainer?.control.get(this.formControlName) as FormControl;
-			if (isNullOrUndefined(this.attachedFormControl)) {
-				throw new Error(`Form element '${this.formControlName}' with caption '${this.parent?.caption}' is not declared in your FormGroup.`);
-			}
-		}
-		if (this.attachedFormControl) {
-			this.disabled = this.attachedFormControl.disabled;
-			this.attachedFormControl.statusChanges.subscribe(() => {
-				this.disabled = this.attachedFormControl.disabled;
-			});
-			this.parent?.registerControl(this.attachedFormControl);
-		}
-	}
-
-	isInErrorState() {
-		return this.attachedFormControl && this.attachedFormControl.status === 'INVALID' && this.attachedFormControl.touched;
-	}
-
-	ngOnDestroy() {
-		if (this.attachedFormControl) {
-			this.parent?.unregisterControl(this.attachedFormControl);
-		}
-	}
-
-	touch() {
-		this.touched.forEach((f) => f());
-	}
-
-	writeValue(value: T) {
-		this.innerValue = value;
-	}
-
-	registerOnChange(fn: (value: T) => void) {
-		this.changed.push(fn);
-	}
-
-	registerOnTouched(fn: () => void) {
-		this.touched.push(fn);
-	}
-
-	setInnerValueAndNotify(value) {
-		this.innerValue = value;
-		this.changed.forEach((fn) => fn(value));
-	}
-
-	resetToNull() {
-		this.setInnerValueAndNotify(null);
-	}
-}

package/src/lib/form/form-caption/form-caption.component.html

@@ -1,3 +0,0 @@
-<ng-template #contentRef>
-	<ng-content></ng-content>
-</ng-template>

package/src/lib/form/form-caption/form-caption.component.scss

@@ -1,3 +0,0 @@
-:host {
-	display: block;
-}

package/src/lib/form/form-caption/form-caption.component.ts

@@ -1,28 +0,0 @@
-import { Component, ElementRef, Host, OnInit, Optional, ViewChild } from '@angular/core';
-import {FormElementComponent} from "../form-element/form-element.component";
-import {isNullOrUndefined} from "../../util/values";
-
-@Component({
-	selector: 'klp-form-caption',
-	templateUrl: './form-caption.component.html',
-	styleUrls: ['./form-caption.component.scss'],
-})
-export class FormCaptionComponent implements OnInit {
-	@ViewChild('contentRef') public contentRef: ElementRef;
-
-	constructor(@Host() @Optional() private parent: FormElementComponent) {}
-
-	ngOnInit(): void {
-		// this is being run next cycle, because we dont want to fail if the order of components is as follows:
-		// <app-form-error />
-		// <some-input />
-		// That would fail, because the logic of the form error is run first, and at that moment, the `some-input` isnt registered yet
-		setTimeout(() => {
-			const attachedControl = this.parent.getAttachedControl();
-			this.parent.registerCaption(this.contentRef);
-			if (isNullOrUndefined(attachedControl)) {
-				throw new Error('You added a Form Caption component without an attached Form Control');
-			}
-		});
-	}
-}