@klippa/ngx-enhancy-forms 20.1.1 → 20.1.3

package/index.d.ts

@@ -1,13 +1,13 @@
 import * as i0 from '@angular/core';
-import { OnInit, OnDestroy, OnChanges, TemplateRef, EventEmitter, SimpleChanges, AfterViewInit, ElementRef, NgZone, InjectionToken, ChangeDetectorRef, QueryList, ApplicationRef } from '@angular/core';
-import * as i32 from '@angular/forms';
+import { InjectionToken, OnInit, OnDestroy, OnChanges, TemplateRef, EventEmitter, SimpleChanges, AfterViewInit, ElementRef, NgZone, ChangeDetectorRef, QueryList, ApplicationRef } from '@angular/core';
+import * as i34 from '@angular/forms';
 import { FormGroup, FormArray, AbstractControl, UntypedFormArray, UntypedFormGroup, UntypedFormControl, ControlValueAccessor, ControlContainer, ValidationErrors } from '@angular/forms';
 import * as i3 from '@angular/material/core';
 import { MatDateFormats, DateAdapter } from '@angular/material/core';
 import * as i1 from '@angular/material/datepicker';
 import { MatDatepicker, DateFilterFn } from '@angular/material/datepicker';
-import * as i31 from '@angular/common';
-import * as i33 from '@ng-select/ng-select';
+import * as i33 from '@angular/common';
+import * as i35 from '@ng-select/ng-select';
 import * as i2 from '@angular/material/form-field';
 import * as i4 from '@angular/material/input';
 import * as i5 from '@angular/material/button';
@@ -28,6 +28,12 @@ type CustomErrorMessages = Record<keyof FormErrorMessages, () => string>;
 type KlpDateFormats = (format: string) => MatDateFormats;
 type ErrorTypes = keyof FormErrorMessages | 'message' | 'async' | string;
 
+type FormSize = 'small' | 'medium' | 'large';
+type SizeClass = 'input-sm' | 'input-md' | 'input-lg';
+declare function getSizeClass(size: FormSize): SizeClass;
+declare const KLP_FORM_DEFAULT_SIZE: InjectionToken<FormSize>;
+declare const DefaultSize = "medium";
+
 declare const invalidFieldsSymbol: unique symbol;
 type OnInjectedEmitterType = {
     childValue: Record<string, any>;
@@ -54,6 +60,7 @@ declare class FormComponent implements OnInit, OnDestroy, OnChanges {
     errors: Map<AbstractControl, string>;
     patchValueInterceptor: (values: any) => Promise<any>;
     allowSubmitOn: 'buttonAndEnter' | 'buttonOnly';
+    size: FormSize;
     onInjected: EventEmitter<OnInjectedEmitterType>;
     private topLevelFormControl;
     private activeControls;
@@ -84,12 +91,12 @@ declare class FormComponent implements OnInit, OnDestroy, OnChanges {
     _ext_getRenderedFieldValues(): Record<string, any>;
     private setDisabledStatesForAllControls;
     static ɵfac: i0.ɵɵFactoryDeclaration<FormComponent, [{ optional: true; skipSelf: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FormComponent, "klp-form", never, { "readOnly": { "alias": "readOnly"; "required": false; }; "showErrorMessages": { "alias": "showErrorMessages"; "required": false; }; "errorMessageLocation": { "alias": "errorMessageLocation"; "required": false; }; "formGroup": { "alias": "formGroup"; "required": false; }; "formArray": { "alias": "formArray"; "required": false; }; "warnings": { "alias": "warnings"; "required": false; }; "immutableValues": { "alias": "immutableValues"; "required": false; }; "errors": { "alias": "errors"; "required": false; }; "patchValueInterceptor": { "alias": "patchValueInterceptor"; "required": false; }; "allowSubmitOn": { "alias": "allowSubmitOn"; "required": false; }; }, { "onInjected": "onInjected"; }, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FormComponent, "klp-form", never, { "readOnly": { "alias": "readOnly"; "required": false; }; "showErrorMessages": { "alias": "showErrorMessages"; "required": false; }; "errorMessageLocation": { "alias": "errorMessageLocation"; "required": false; }; "formGroup": { "alias": "formGroup"; "required": false; }; "formArray": { "alias": "formArray"; "required": false; }; "warnings": { "alias": "warnings"; "required": false; }; "immutableValues": { "alias": "immutableValues"; "required": false; }; "errors": { "alias": "errors"; "required": false; }; "patchValueInterceptor": { "alias": "patchValueInterceptor"; "required": false; }; "allowSubmitOn": { "alias": "allowSubmitOn"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, { "onInjected": "onInjected"; }, never, ["*"], false, never>;
 }
 
 declare const FORM_ERROR_MESSAGES: InjectionToken<CustomErrorMessages>;
 declare const DEFAULT_ERROR_MESSAGES: FormErrorMessages;
-declare class FormElementComponent implements AfterViewInit, OnDestroy {
+declare class FormElementComponent implements OnInit, OnChanges, AfterViewInit, OnDestroy {
     private parent;
     private customMessages;
     private elRef;
@@ -103,6 +110,7 @@ declare class FormElementComponent implements AfterViewInit, OnDestroy {
     swapInputAndCaption: boolean;
     errorMessageAsTooltip: boolean;
     errorMessageHasMaxWidth: boolean;
+    size: FormSize | null;
     internalComponentRef: ElementRef;
     tailTpl: TemplateRef<any>;
     captionDummyForSpaceCalculation: ElementRef;
@@ -111,8 +119,10 @@ declare class FormElementComponent implements AfterViewInit, OnDestroy {
     fixedWrapper: ElementRef;
     inputContainer: ElementRef;
     fieldInput: ValueAccessorBase<any>;
+    private injectedSize;
     captionRef: TemplateRef<any>;
     captionEndRef: TemplateRef<any>;
+    subCaptionRef: TemplateRef<any>;
     errorMessages: FormErrorMessages;
     customErrorHandlers: Array<{
         error: string;
@@ -122,7 +132,10 @@ declare class FormElementComponent implements AfterViewInit, OnDestroy {
     errorFullyVisible: boolean;
     private popupState;
     private subscriptions;
+    sizeClass: SizeClass;
     constructor(parent: FormComponent, customMessages: CustomErrorMessages, elRef: ElementRef, ngZone: NgZone);
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
     ngAfterViewInit(): Promise<void>;
     shouldShowErrorMessages(): boolean;
     substituteParameters(message: string, parameters: Record<string, any>): string;
@@ -135,6 +148,7 @@ declare class FormElementComponent implements AfterViewInit, OnDestroy {
     registerErrorHandler(error: string, templateRef: TemplateRef<any>): void;
     registerCaption(templateRef: TemplateRef<any>): void;
     registerCaptionEnd(templateRef: TemplateRef<any>): void;
+    registerSubCaption(templateRef: TemplateRef<any>): void;
     getWarningToShow(): string | TemplateRef<any>;
     getWarningToShowAsTemplateRef(): TemplateRef<any>;
     getWarningToShowIsTemplateRef(): boolean;
@@ -160,7 +174,7 @@ declare class FormElementComponent implements AfterViewInit, OnDestroy {
     ngOnDestroy(): void;
     private initializeTailTpl;
     static ɵfac: i0.ɵɵFactoryDeclaration<FormElementComponent, [{ optional: true; }, { optional: true; }, null, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FormElementComponent, "klp-form-element", never, { "caption": { "alias": "caption"; "required": false; }; "direction": { "alias": "direction"; "required": false; }; "captionSpacing": { "alias": "captionSpacing"; "required": false; }; "verticalAlignment": { "alias": "verticalAlignment"; "required": false; }; "spaceDistribution": { "alias": "spaceDistribution"; "required": false; }; "swapInputAndCaption": { "alias": "swapInputAndCaption"; "required": false; }; "errorMessageAsTooltip": { "alias": "errorMessageAsTooltip"; "required": false; }; "errorMessageHasMaxWidth": { "alias": "errorMessageHasMaxWidth"; "required": false; }; }, {}, ["fieldInput"], ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FormElementComponent, "klp-form-element", never, { "caption": { "alias": "caption"; "required": false; }; "direction": { "alias": "direction"; "required": false; }; "captionSpacing": { "alias": "captionSpacing"; "required": false; }; "verticalAlignment": { "alias": "verticalAlignment"; "required": false; }; "spaceDistribution": { "alias": "spaceDistribution"; "required": false; }; "swapInputAndCaption": { "alias": "swapInputAndCaption"; "required": false; }; "errorMessageAsTooltip": { "alias": "errorMessageAsTooltip"; "required": false; }; "errorMessageHasMaxWidth": { "alias": "errorMessageHasMaxWidth"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, {}, ["fieldInput"], ["*"], false, never>;
 }
 
 /**
@@ -172,7 +186,7 @@ declare class FormElementComponent implements AfterViewInit, OnDestroy {
  * 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.
  */
-declare class ValueAccessorBase<T> implements ControlValueAccessor, OnInit, OnDestroy {
+declare class ValueAccessorBase<T> implements ControlValueAccessor, OnInit, OnChanges, OnDestroy {
     protected parent: FormElementComponent;
     protected controlContainer: ControlContainer;
     innerValue: T;
@@ -186,13 +200,17 @@ declare class ValueAccessorBase<T> implements ControlValueAccessor, OnInit, OnDe
     formControl: UntypedFormControl;
     inErrorState: boolean;
     getTailTplFn: () => TemplateRef<any>;
+    size: FormSize | null;
     onTouch: EventEmitter<void>;
     nativeInputRef: ElementRef;
+    private injectedSize;
+    protected sizeClass: SizeClass;
     private attachedFormControl;
     private tailTpl;
     private getImmutableValueFn;
     constructor(parent: FormElementComponent, controlContainer: ControlContainer);
     ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
     protected getImmutableValue(): T;
     isInErrorState(): boolean;
     ngOnDestroy(): void;
@@ -207,17 +225,14 @@ declare class ValueAccessorBase<T> implements ControlValueAccessor, OnInit, OnDe
     setTailTpl: (tpl: TemplateRef<any>) => void;
     getTailTpl: () => TemplateRef<any>;
     static ɵfac: i0.ɵɵFactoryDeclaration<ValueAccessorBase<any>, [{ optional: true; host: true; }, { optional: true; host: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ValueAccessorBase<any>, "ng-component", never, { "disabled": { "alias": "disabled"; "required": false; }; "innerValueChangeInterceptor": { "alias": "innerValueChangeInterceptor"; "required": false; }; "formControlName": { "alias": "formControlName"; "required": false; }; "formControl": { "alias": "formControl"; "required": false; }; "inErrorState": { "alias": "inErrorState"; "required": false; }; "getTailTplFn": { "alias": "getTailTplFn"; "required": false; }; }, { "onTouch": "onTouch"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ValueAccessorBase<any>, "ng-component", never, { "disabled": { "alias": "disabled"; "required": false; }; "innerValueChangeInterceptor": { "alias": "innerValueChangeInterceptor"; "required": false; }; "formControlName": { "alias": "formControlName"; "required": false; }; "formControl": { "alias": "formControl"; "required": false; }; "inErrorState": { "alias": "inErrorState"; "required": false; }; "getTailTplFn": { "alias": "getTailTplFn"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, { "onTouch": "onTouch"; }, never, never, false, never>;
 }
 
 declare class MultipleValueAccessorBase<T> extends ValueAccessorBase<Array<T> | T> {
-    protected parent: FormElementComponent;
-    protected controlContainer: ControlContainer;
     multiple: boolean;
-    constructor(parent: FormElementComponent, controlContainer: ControlContainer);
     writeValue(value: Array<T> | T): void;
     setInnerValueAndNotify(value: T | Array<T>): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MultipleValueAccessorBase<any>, [{ optional: true; host: true; }, { optional: true; host: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MultipleValueAccessorBase<any>, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MultipleValueAccessorBase<any>, "ng-component", never, { "multiple": { "alias": "multiple"; "required": false; }; }, {}, never, never, false, never>;
 }
 
@@ -237,10 +252,18 @@ declare class ButtonComponent {
     static ɵcmp: i0.ɵɵComponentDeclaration<ButtonComponent, "klp-form-button", never, { "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "fullWidth": { "alias": "fullWidth"; "required": false; }; "hasBorder": { "alias": "hasBorder"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "isLoading": { "alias": "isLoading"; "required": false; }; "type": { "alias": "type"; "required": false; }; "clickCallback": { "alias": "clickCallback"; "required": false; }; }, {}, never, ["*"], false, never>;
 }
 
-declare class CheckboxComponent extends ValueAccessorBase<boolean> {
+declare function stringIsSetAndFilled(s: string): boolean;
+
+declare class CheckboxComponent extends ValueAccessorBase<boolean> implements OnInit, OnChanges {
+    protected readonly stringIsSetAndFilled: typeof stringIsSetAndFilled;
     caption: string;
     description: string;
     renderUndefinedAsIndeterminate: boolean;
+    protected checkBoxSize: number;
+    protected captionSpacing: number;
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    private calculateCheckboxSize;
     static ɵfac: i0.ɵɵFactoryDeclaration<CheckboxComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<CheckboxComponent, "klp-form-checkbox", never, { "caption": { "alias": "caption"; "required": false; }; "description": { "alias": "description"; "required": false; }; "renderUndefinedAsIndeterminate": { "alias": "renderUndefinedAsIndeterminate"; "required": false; }; }, {}, never, never, false, never>;
 }
@@ -259,7 +282,7 @@ declare class DatePickerComponent extends MultipleValueAccessorBase<string | typ
     format: string;
     placeholder: string;
     clearable: boolean;
-    size: 'small' | 'medium' | 'large';
+    size: FormSize | null;
     suffixTpl: TemplateRef<any> | null;
     prefixTpl: TemplateRef<any> | null;
     dateValue: Date | Array<Date>;
@@ -295,7 +318,6 @@ declare class DateTimePickerComponent extends MultipleValueAccessorBase<Date | t
     initHour: string;
     initMinute: string;
     invalidTimeAsMidnight: boolean;
-    size: 'small' | 'medium' | 'large';
     suffixTpl: TemplateRef<any> | null;
     prefixTpl: TemplateRef<any> | null;
     nativeInputRef: ElementRef;
@@ -347,7 +369,7 @@ declare class DateTimePickerComponent extends MultipleValueAccessorBase<Date | t
     clickHandlerForTimeDropdown: (event: MouseEvent) => void;
     shizzle(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DateTimePickerComponent, [{ optional: true; host: true; }, { optional: true; host: true; }, { optional: true; }, { optional: true; }, null, null, null, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DateTimePickerComponent, "klp-form-date-time-picker", never, { "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "sameMonthOnly": { "alias": "sameMonthOnly"; "required": false; }; "format": { "alias": "format"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "clearable": { "alias": "clearable"; "required": false; }; "showTimeInput": { "alias": "showTimeInput"; "required": false; }; "initHour": { "alias": "initHour"; "required": false; }; "initMinute": { "alias": "initMinute"; "required": false; }; "invalidTimeAsMidnight": { "alias": "invalidTimeAsMidnight"; "required": false; }; "size": { "alias": "size"; "required": false; }; "suffixTpl": { "alias": "suffixTpl"; "required": false; }; "prefixTpl": { "alias": "prefixTpl"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DateTimePickerComponent, "klp-form-date-time-picker", never, { "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "sameMonthOnly": { "alias": "sameMonthOnly"; "required": false; }; "format": { "alias": "format"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "clearable": { "alias": "clearable"; "required": false; }; "showTimeInput": { "alias": "showTimeInput"; "required": false; }; "initHour": { "alias": "initHour"; "required": false; }; "initMinute": { "alias": "initMinute"; "required": false; }; "invalidTimeAsMidnight": { "alias": "invalidTimeAsMidnight"; "required": false; }; "suffixTpl": { "alias": "suffixTpl"; "required": false; }; "prefixTpl": { "alias": "prefixTpl"; "required": false; }; }, {}, never, never, false, never>;
 }
 
 declare class EmailInputComponent extends ValueAccessorBase<string> {
@@ -356,10 +378,15 @@ declare class EmailInputComponent extends ValueAccessorBase<string> {
     static ɵcmp: i0.ɵɵComponentDeclaration<EmailInputComponent, "klp-form-email-input", never, { "placeholder": { "alias": "placeholder"; "required": false; }; }, {}, never, never, false, never>;
 }
 
-declare class LoadingIndicatorComponent {
+declare class LoadingIndicatorComponent implements OnInit, OnChanges {
     variant: '3dots' | 'spinner' | 'textInput' | 'picker';
     size: 'tiny' | 'small' | 'medium' | 'large' | 'huge';
-    formSize: 'small' | 'medium' | 'large';
+    formSize: FormSize | null;
+    private injectedSize;
+    protected parent: FormElementComponent;
+    protected sizeClass: SizeClass;
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<LoadingIndicatorComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<LoadingIndicatorComponent, "klp-form-loading-indicator", never, { "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "formSize": { "alias": "formSize"; "required": false; }; }, {}, never, never, false, never>;
 }
@@ -367,12 +394,11 @@ declare class LoadingIndicatorComponent {
 declare class NumberInputComponent extends ValueAccessorBase<string | number> {
     placeholder: string;
     parseNumber: boolean;
-    size: 'small' | 'medium' | 'large';
     suffixTpl: TemplateRef<any> | null;
     prefixTpl: TemplateRef<any> | null;
     setInnerValueAndNotify(value: string | number): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<NumberInputComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NumberInputComponent, "klp-form-number-input", never, { "placeholder": { "alias": "placeholder"; "required": false; }; "parseNumber": { "alias": "parseNumber"; "required": false; }; "size": { "alias": "size"; "required": false; }; "suffixTpl": { "alias": "suffixTpl"; "required": false; }; "prefixTpl": { "alias": "prefixTpl"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NumberInputComponent, "klp-form-number-input", never, { "placeholder": { "alias": "placeholder"; "required": false; }; "parseNumber": { "alias": "parseNumber"; "required": false; }; "suffixTpl": { "alias": "suffixTpl"; "required": false; }; "prefixTpl": { "alias": "prefixTpl"; "required": false; }; }, {}, never, never, false, never>;
 }
 
 declare class PasswordFieldComponent extends ValueAccessorBase<string> {
@@ -394,7 +420,7 @@ declare class KlpSelectOptionTemplateDirective {
     static ɵfac: i0.ɵɵFactoryDeclaration<KlpSelectOptionTemplateDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KlpSelectOptionTemplateDirective, "[klpSelectOptionTpl]", never, {}, {}, never, never, false, never>;
 }
-declare class SelectComponent extends ValueAccessorBase<string | string[]> implements OnChanges, AfterViewInit, OnDestroy {
+declare class SelectComponent extends ValueAccessorBase<string | string[]> implements OnInit, OnChanges, AfterViewInit, OnDestroy {
     protected parent: FormElementComponent;
     protected controlContainer: ControlContainer;
     private translations;
@@ -420,7 +446,6 @@ declare class SelectComponent extends ValueAccessorBase<string | string[]> imple
         description: string;
     }) => boolean;
     footerElement: TemplateRef<any>;
-    size: 'small' | 'medium' | 'large';
     prefixTpl: TemplateRef<any> | null;
     suffixTpl: TemplateRef<any> | null;
     onSearch: EventEmitter<string>;
@@ -471,7 +496,7 @@ declare class SelectComponent extends ValueAccessorBase<string | string[]> imple
     private getScrollbarWidth;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SelectComponent, [{ optional: true; host: true; }, { optional: true; host: true; }, { optional: true; }, null, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SelectComponent, "klp-form-select", never, { "placeholder": { "alias": "placeholder"; "required": false; }; "prefix": { "alias": "prefix"; "required": false; }; "orientation": { "alias": "orientation"; "required": false; }; "options": { "alias": "options"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "multipleDisplayedAsAmount": { "alias": "multipleDisplayedAsAmount"; "required": false; }; "clearable": { "alias": "clearable"; "required": false; }; "truncateOptions": { "alias": "truncateOptions"; "required": false; }; "withSeparatingLine": { "alias": "withSeparatingLine"; "required": false; }; "searchable": { "alias": "searchable"; "required": false; }; "hasBorderLeft": { "alias": "hasBorderLeft"; "required": false; }; "hasBorderRight": { "alias": "hasBorderRight"; "required": false; }; "dropdownPosition": { "alias": "dropdownPosition"; "required": false; }; "dropdownAlignment": { "alias": "dropdownAlignment"; "required": false; }; "customSearchFn": { "alias": "customSearchFn"; "required": false; }; "footerElement": { "alias": "footerElement"; "required": false; }; "size": { "alias": "size"; "required": false; }; "prefixTpl": { "alias": "prefixTpl"; "required": false; }; "suffixTpl": { "alias": "suffixTpl"; "required": false; }; }, { "onSearch": "onSearch"; "onEndReached": "onEndReached"; "onOpened": "onOpened"; "onClosed": "onClosed"; "onBlur": "onBlur"; "onClear": "onClear"; "onEnterKey": "onEnterKey"; }, ["customOptionTpl"], never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SelectComponent, "klp-form-select", never, { "placeholder": { "alias": "placeholder"; "required": false; }; "prefix": { "alias": "prefix"; "required": false; }; "orientation": { "alias": "orientation"; "required": false; }; "options": { "alias": "options"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "multipleDisplayedAsAmount": { "alias": "multipleDisplayedAsAmount"; "required": false; }; "clearable": { "alias": "clearable"; "required": false; }; "truncateOptions": { "alias": "truncateOptions"; "required": false; }; "withSeparatingLine": { "alias": "withSeparatingLine"; "required": false; }; "searchable": { "alias": "searchable"; "required": false; }; "hasBorderLeft": { "alias": "hasBorderLeft"; "required": false; }; "hasBorderRight": { "alias": "hasBorderRight"; "required": false; }; "dropdownPosition": { "alias": "dropdownPosition"; "required": false; }; "dropdownAlignment": { "alias": "dropdownAlignment"; "required": false; }; "customSearchFn": { "alias": "customSearchFn"; "required": false; }; "footerElement": { "alias": "footerElement"; "required": false; }; "prefixTpl": { "alias": "prefixTpl"; "required": false; }; "suffixTpl": { "alias": "suffixTpl"; "required": false; }; }, { "onSearch": "onSearch"; "onEndReached": "onEndReached"; "onOpened": "onOpened"; "onClosed": "onClosed"; "onBlur": "onBlur"; "onClear": "onClear"; "onEnterKey": "onEnterKey"; }, ["customOptionTpl"], never, false, never>;
 }
 
 declare class SelectFooterComponent {
@@ -482,16 +507,13 @@ declare class SelectFooterComponent {
 }
 
 declare class SortableItemsComponent extends ValueAccessorBase<Array<any>> implements OnInit, AfterViewInit {
-    protected parent: FormElementComponent;
-    protected controlContainer: ControlContainer;
-    private ngZone;
     template: TemplateRef<any>;
     sortableItemSize: 'sm' | 'lg';
     dragItems: QueryList<ElementRef>;
     dragSourceIndex: number;
     private currentDragPosition;
     private scrollInterval;
-    constructor(parent: FormElementComponent, controlContainer: ControlContainer, ngZone: NgZone);
+    private ngZone;
     ngAfterViewInit(): void;
     private setDragItemListeners;
     private onDragOver;
@@ -502,7 +524,7 @@ declare class SortableItemsComponent extends ValueAccessorBase<Array<any>> imple
     shouldShoveUp(index: number): boolean;
     private scrollPage;
     private stopScrolling;
-    static ɵfac: i0.ɵɵFactoryDeclaration<SortableItemsComponent, [{ optional: true; host: true; }, { optional: true; host: true; }, null]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SortableItemsComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<SortableItemsComponent, "klp-form-sortable-items", never, { "sortableItemSize": { "alias": "sortableItemSize"; "required": false; }; }, {}, ["template"], never, false, never>;
 }
 
@@ -525,13 +547,12 @@ declare class TextInputComponent extends ValueAccessorBase<string> {
     passwordPeekIcon: TemplateRef<any>;
     suffixTpl: TemplateRef<any> | null;
     prefixTpl: TemplateRef<any> | null;
-    size: 'small' | 'medium' | 'large';
     onBlur: EventEmitter<void>;
     private isPeekingPassword;
     togglePeakPassword(): void;
     getType(): 'text' | 'password';
     static ɵfac: i0.ɵɵFactoryDeclaration<TextInputComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TextInputComponent, "klp-form-text-input", never, { "placeholder": { "alias": "placeholder"; "required": false; }; "type": { "alias": "type"; "required": false; }; "clearable": { "alias": "clearable"; "required": false; }; "hasBorderLeft": { "alias": "hasBorderLeft"; "required": false; }; "hasBorderRight": { "alias": "hasBorderRight"; "required": false; }; "passwordPeekIcon": { "alias": "passwordPeekIcon"; "required": false; }; "suffixTpl": { "alias": "suffixTpl"; "required": false; }; "prefixTpl": { "alias": "prefixTpl"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, { "onBlur": "onBlur"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TextInputComponent, "klp-form-text-input", never, { "placeholder": { "alias": "placeholder"; "required": false; }; "type": { "alias": "type"; "required": false; }; "clearable": { "alias": "clearable"; "required": false; }; "hasBorderLeft": { "alias": "hasBorderLeft"; "required": false; }; "hasBorderRight": { "alias": "hasBorderRight"; "required": false; }; "passwordPeekIcon": { "alias": "passwordPeekIcon"; "required": false; }; "suffixTpl": { "alias": "suffixTpl"; "required": false; }; "prefixTpl": { "alias": "prefixTpl"; "required": false; }; }, { "onBlur": "onBlur"; }, never, never, false, never>;
 }
 
 declare class TextAreaComponent extends ValueAccessorBase<string> {
@@ -541,10 +562,19 @@ declare class TextAreaComponent extends ValueAccessorBase<string> {
     static ɵcmp: i0.ɵɵComponentDeclaration<TextAreaComponent, "klp-form-text-area", never, { "placeholder": { "alias": "placeholder"; "required": false; }; }, { "onBlur": "onBlur"; }, never, never, false, never>;
 }
 
-declare class ToggleComponent extends ValueAccessorBase<boolean> {
+declare class ToggleComponent extends ValueAccessorBase<boolean> implements OnInit, OnChanges {
+    protected readonly stringIsSetAndFilled: typeof stringIsSetAndFilled;
     transparentBackground: boolean;
+    caption: string;
+    description: string;
+    protected toggleWidth: number;
+    protected toggleHeight: number;
+    protected captionSpacing: number;
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    private calculateToggleSize;
     static ɵfac: i0.ɵɵFactoryDeclaration<ToggleComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ToggleComponent, "klp-form-toggle", never, { "transparentBackground": { "alias": "transparentBackground"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ToggleComponent, "klp-form-toggle", never, { "transparentBackground": { "alias": "transparentBackground"; "required": false; }; "caption": { "alias": "caption"; "required": false; }; "description": { "alias": "description"; "required": false; }; }, {}, never, never, false, never>;
 }
 
 declare class FileInputComponent extends MultipleValueAccessorBase<File> {
@@ -582,6 +612,22 @@ declare class FormCaptionEndComponent implements OnInit, OnDestroy {
     static ɵcmp: i0.ɵɵComponentDeclaration<FormCaptionEndComponent, "klp-form-caption-end", never, {}, {}, never, ["*"], false, never>;
 }
 
+declare class FormSubCaptionComponent implements AfterViewInit, OnDestroy {
+    contentRef: TemplateRef<any>;
+    private parent;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FormSubCaptionComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FormSubCaptionComponent, "klp-form-sub-caption", never, {}, {}, never, ["*"], false, never>;
+}
+
+declare class FormTextSubCaptionComponent {
+    text: string;
+    protected parent: FormElementComponent;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FormTextSubCaptionComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FormTextSubCaptionComponent, "klp-form-text-sub-caption", never, { "text": { "alias": "text"; "required": true; }; }, {}, never, never, false, never>;
+}
+
 declare class FormErrorComponent implements OnInit {
     private parent;
     error: ErrorTypes;
@@ -644,14 +690,18 @@ type RadioOption = {
     name: string;
     description?: string;
 };
-declare class RadioComponent extends ValueAccessorBase<string> {
+declare class RadioComponent extends ValueAccessorBase<string> implements OnInit, OnChanges {
     options: RadioOptions;
     orientation: Orientation;
     variant: 'classic' | 'button' | 'buttonGray';
-    size: 'small' | 'medium';
     Orientation: typeof Orientation;
+    protected radioSize: number;
+    protected captionSpacing: number;
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    private calculateRadioSize;
     static ɵfac: i0.ɵɵFactoryDeclaration<RadioComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<RadioComponent, "klp-form-radio", never, { "options": { "alias": "options"; "required": false; }; "orientation": { "alias": "orientation"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RadioComponent, "klp-form-radio", never, { "options": { "alias": "options"; "required": false; }; "orientation": { "alias": "orientation"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; }, {}, never, never, false, never>;
 }
 
 declare class WithTooltipDirective {
@@ -713,7 +763,7 @@ declare class MaterialModule {
 
 declare class NgxEnhancyFormsModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<NgxEnhancyFormsModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<NgxEnhancyFormsModule, [typeof ValueAccessorBase, typeof MultipleValueAccessorBase, typeof ButtonComponent, typeof CheckboxComponent, typeof DatePickerComponent, typeof DateTimePickerComponent, typeof EmailInputComponent, typeof LoadingIndicatorComponent, typeof NumberInputComponent, typeof PasswordFieldComponent, typeof SelectComponent, typeof KlpSelectOptionTemplateDirective, typeof SelectFooterComponent, typeof SortableItemsComponent, typeof SortableGroupedItemsComponent, typeof TextInputComponent, typeof TextAreaComponent, typeof ToggleComponent, typeof FileInputComponent, typeof FormCaptionComponent, typeof FormCaptionEndComponent, typeof FormElementComponent, typeof FormErrorComponent, typeof FormSubmitButtonComponent, typeof FormComponent, typeof SubFormDirective, typeof HourMinuteInputComponent, typeof RadioComponent, typeof WithTooltipDirective, typeof OnRenderDirective, typeof WarningIconComponent, typeof ElementIsTruncatedCbComponent], [typeof i31.CommonModule, typeof i32.FormsModule, typeof i33.NgSelectModule, typeof MaterialModule], [typeof ValueAccessorBase, typeof MultipleValueAccessorBase, typeof ButtonComponent, typeof DatePickerComponent, typeof DateTimePickerComponent, typeof CheckboxComponent, typeof EmailInputComponent, typeof LoadingIndicatorComponent, typeof NumberInputComponent, typeof PasswordFieldComponent, typeof SelectComponent, typeof KlpSelectOptionTemplateDirective, typeof SelectFooterComponent, typeof SortableItemsComponent, typeof SortableGroupedItemsComponent, typeof TextInputComponent, typeof TextAreaComponent, typeof ToggleComponent, typeof FileInputComponent, typeof FormCaptionComponent, typeof FormCaptionEndComponent, typeof FormElementComponent, typeof FormErrorComponent, typeof FormSubmitButtonComponent, typeof FormComponent, typeof SubFormDirective, typeof HourMinuteInputComponent, typeof RadioComponent, typeof WithTooltipDirective, typeof OnRenderDirective, typeof ElementIsTruncatedCbComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<NgxEnhancyFormsModule, [typeof ValueAccessorBase, typeof MultipleValueAccessorBase, typeof ButtonComponent, typeof CheckboxComponent, typeof DatePickerComponent, typeof DateTimePickerComponent, typeof EmailInputComponent, typeof LoadingIndicatorComponent, typeof NumberInputComponent, typeof PasswordFieldComponent, typeof SelectComponent, typeof KlpSelectOptionTemplateDirective, typeof SelectFooterComponent, typeof SortableItemsComponent, typeof SortableGroupedItemsComponent, typeof TextInputComponent, typeof TextAreaComponent, typeof ToggleComponent, typeof FileInputComponent, typeof FormCaptionComponent, typeof FormCaptionEndComponent, typeof FormSubCaptionComponent, typeof FormTextSubCaptionComponent, typeof FormElementComponent, typeof FormErrorComponent, typeof FormSubmitButtonComponent, typeof FormComponent, typeof SubFormDirective, typeof HourMinuteInputComponent, typeof RadioComponent, typeof WithTooltipDirective, typeof OnRenderDirective, typeof WarningIconComponent, typeof ElementIsTruncatedCbComponent], [typeof i33.CommonModule, typeof i34.FormsModule, typeof i35.NgSelectModule, typeof MaterialModule], [typeof ValueAccessorBase, typeof MultipleValueAccessorBase, typeof ButtonComponent, typeof DatePickerComponent, typeof DateTimePickerComponent, typeof CheckboxComponent, typeof EmailInputComponent, typeof LoadingIndicatorComponent, typeof NumberInputComponent, typeof PasswordFieldComponent, typeof SelectComponent, typeof KlpSelectOptionTemplateDirective, typeof SelectFooterComponent, typeof SortableItemsComponent, typeof SortableGroupedItemsComponent, typeof TextInputComponent, typeof TextAreaComponent, typeof ToggleComponent, typeof FileInputComponent, typeof FormCaptionComponent, typeof FormCaptionEndComponent, typeof FormSubCaptionComponent, typeof FormTextSubCaptionComponent, typeof FormElementComponent, typeof FormErrorComponent, typeof FormSubmitButtonComponent, typeof FormComponent, typeof SubFormDirective, typeof HourMinuteInputComponent, typeof RadioComponent, typeof WithTooltipDirective, typeof OnRenderDirective, typeof ElementIsTruncatedCbComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<NgxEnhancyFormsModule>;
 }
 
@@ -730,5 +780,5 @@ declare const KLP_FORM_ERROR_HANDLER: InjectionToken<FormErrorHandler>;
 declare const KLP_FORM_ERROR_NO_CONTROL_FOUND_HANDLER: InjectionToken<FormErrorNoControlFound>;
 declare const DefaultErrorHandler: FormErrorHandler;
 
-export { ButtonComponent, CheckboxComponent, DATE_PICKER_LOCALE, DATE_PICKER_TRANSLATIONS, DATE_TIME_PICKER_TRANSLATIONS, DEFAULT_ERROR_MESSAGES, DatePickerComponent, DateTimePickerComponent, DefaultErrorHandler, ElementIsTruncatedCbComponent, EmailInputComponent, FORM_ERROR_MESSAGES, FileInputComponent, FormCaptionComponent, FormCaptionEndComponent, FormComponent, FormElementComponent, FormErrorComponent, FormSubmitButtonComponent, FormValidationError, HourMinuteInputComponent, KLP_DATE_FORMATS, KLP_FORM_ERROR_HANDLER, KLP_FORM_ERROR_NO_CONTROL_FOUND_HANDLER, KlpSelectOptionTemplateDirective, LoadingIndicatorComponent, MultipleValueAccessorBase, NgxEnhancyFormsModule, NumberInputComponent, OnRenderDirective, Orientation, PasswordFieldComponent, RadioComponent, SELECT_TRANSLATIONS, SelectComponent, SelectFooterComponent, SortableGroupedItemsComponent, SortableItemsComponent, SubFormDirective, TextAreaComponent, TextInputComponent, ToggleComponent, ValueAccessorBase, WithTooltipDirective, dateValidator, invalidDateKey, invalidFieldsSymbol, matDateFormatsFactory };
-export type { AppSelectOption, AppSelectOptions, ButtonVariant, CustomErrorMessages, ErrorTypes, FormErrorHandler, FormErrorMessages, FormErrorNoControlFound, FormValidationErrors, KlpDateFormats, OnInjectedEmitterType, RadioOption, RadioOptions, SubmitButtonVariant };
+export { ButtonComponent, CheckboxComponent, DATE_PICKER_LOCALE, DATE_PICKER_TRANSLATIONS, DATE_TIME_PICKER_TRANSLATIONS, DEFAULT_ERROR_MESSAGES, DatePickerComponent, DateTimePickerComponent, DefaultErrorHandler, DefaultSize, ElementIsTruncatedCbComponent, EmailInputComponent, FORM_ERROR_MESSAGES, FileInputComponent, FormCaptionComponent, FormCaptionEndComponent, FormComponent, FormElementComponent, FormErrorComponent, FormSubCaptionComponent, FormSubmitButtonComponent, FormTextSubCaptionComponent, FormValidationError, HourMinuteInputComponent, KLP_DATE_FORMATS, KLP_FORM_DEFAULT_SIZE, KLP_FORM_ERROR_HANDLER, KLP_FORM_ERROR_NO_CONTROL_FOUND_HANDLER, KlpSelectOptionTemplateDirective, LoadingIndicatorComponent, MultipleValueAccessorBase, NgxEnhancyFormsModule, NumberInputComponent, OnRenderDirective, Orientation, PasswordFieldComponent, RadioComponent, SELECT_TRANSLATIONS, SelectComponent, SelectFooterComponent, SortableGroupedItemsComponent, SortableItemsComponent, SubFormDirective, TextAreaComponent, TextInputComponent, ToggleComponent, ValueAccessorBase, WithTooltipDirective, dateValidator, getSizeClass, invalidDateKey, invalidFieldsSymbol, matDateFormatsFactory };
+export type { AppSelectOption, AppSelectOptions, ButtonVariant, CustomErrorMessages, ErrorTypes, FormErrorHandler, FormErrorMessages, FormErrorNoControlFound, FormSize, FormValidationErrors, KlpDateFormats, OnInjectedEmitterType, RadioOption, RadioOptions, SizeClass, SubmitButtonVariant };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@klippa/ngx-enhancy-forms",
-  "version": "20.1.1",
+  "version": "20.1.3",
   "publishConfig": {
     "access": "public"
   },