@klippa/ngx-enhancy-forms 20.1.1 → 20.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/fesm2022/klippa-ngx-enhancy-forms.mjs +230 -78
  2. package/fesm2022/klippa-ngx-enhancy-forms.mjs.map +1 -1
  3. package/index.d.ts +89 -39
  4. package/package.json +1 -1
package/fesm2022/klippa-ngx-enhancy-forms.mjs CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as i0 from '@angular/core';
2
- import { Input, Directive, EventEmitter, Output, SkipSelf, Optional, Component, InjectionToken, TemplateRef, ContentChild, ViewChild, Inject, Host, HostBinding, ViewChildren, inject, NgModule } from '@angular/core';
2
+ import { InjectionToken, Input, Directive, inject, EventEmitter, Output, SkipSelf, Optional, Component, TemplateRef, ContentChild, ViewChild, Inject, Host, HostBinding, NgZone, ViewChildren, NgModule } from '@angular/core';
3
3
  import * as i1 from '@angular/common';
4
4
  import { CommonModule } from '@angular/common';
5
5
  import * as i2 from '@angular/forms';
@@ -87,6 +87,19 @@ function isArrayOf(arr, kind) {
87
87
  return arr.reduce((acc, val) => acc && val instanceof kind, true);
88
88
  }
89
89
 
90
+ function getSizeClass(size) {
91
+ switch (size) {
92
+ case 'small':
93
+ return 'input-sm';
94
+ case 'medium':
95
+ return 'input-md';
96
+ case 'large':
97
+ return 'input-lg';
98
+ }
99
+ }
100
+ const KLP_FORM_DEFAULT_SIZE = new InjectionToken('KLP_FORM_DEFAULT_SIZE');
101
+ const DefaultSize = 'medium';
102
+
90
103
  function getAllLimitingContainers(element) {
91
104
  const result = [];
92
105
  let current = element;
@@ -176,6 +189,7 @@ class FormComponent {
176
189
  this.immutableValues = {};
177
190
  this.errors = new Map();
178
191
  this.allowSubmitOn = 'buttonAndEnter';
192
+ this.size = inject(KLP_FORM_DEFAULT_SIZE, { optional: true }) ?? DefaultSize;
179
193
  this.onInjected = new EventEmitter();
180
194
  // we keep track of what form controls are actually rendered. Only those count when looking at form validation
181
195
  this.activeControls = [];
@@ -555,7 +569,7 @@ class FormComponent {
555
569
  });
556
570
  }
557
571
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: FormComponent, deps: [{ token: FormComponent, optional: true, skipSelf: true }, { token: SubFormDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
558
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: FormComponent, isStandalone: false, selector: "klp-form", inputs: { readOnly: "readOnly", showErrorMessages: "showErrorMessages", errorMessageLocation: "errorMessageLocation", formGroup: "formGroup", formArray: "formArray", warnings: "warnings", immutableValues: "immutableValues", errors: "errors", patchValueInterceptor: "patchValueInterceptor", allowSubmitOn: "allowSubmitOn" }, outputs: { onInjected: "onInjected" }, usesOnChanges: true, ngImport: i0, template: "<form>\n\t<ng-content></ng-content>\n</form>\n\n\n", styles: [":host{display:block}:host.row{display:flex}:host form{height:inherit}\n"], dependencies: [{ kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] }); }
572
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: FormComponent, isStandalone: false, selector: "klp-form", inputs: { readOnly: "readOnly", showErrorMessages: "showErrorMessages", errorMessageLocation: "errorMessageLocation", formGroup: "formGroup", formArray: "formArray", warnings: "warnings", immutableValues: "immutableValues", errors: "errors", patchValueInterceptor: "patchValueInterceptor", allowSubmitOn: "allowSubmitOn", size: "size" }, outputs: { onInjected: "onInjected" }, usesOnChanges: true, ngImport: i0, template: "<form>\n\t<ng-content></ng-content>\n</form>\n\n\n", styles: [":host{display:block}:host.row{display:flex}:host form{height:inherit}\n"], dependencies: [{ kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] }); }
559
573
  }
560
574
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: FormComponent, decorators: [{
561
575
  type: Component,
@@ -586,6 +600,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
586
600
  type: Input
587
601
  }], allowSubmitOn: [{
588
602
  type: Input
603
+ }], size: [{
604
+ type: Input
589
605
  }], onInjected: [{
590
606
  type: Output
591
607
  }] } });
@@ -710,6 +726,8 @@ class FormElementComponent {
710
726
  this.swapInputAndCaption = false;
711
727
  this.errorMessageAsTooltip = false;
712
728
  this.errorMessageHasMaxWidth = true;
729
+ this.size = null;
730
+ this.injectedSize = inject(KLP_FORM_DEFAULT_SIZE, { optional: true });
713
731
  this.errorMessages = DEFAULT_ERROR_MESSAGES;
714
732
  this.customErrorHandlers = [];
715
733
  this.popupState = 'onHover';
@@ -727,6 +745,17 @@ class FormElementComponent {
727
745
  }
728
746
  };
729
747
  }
748
+ ngOnInit() {
749
+ if (!this.size) {
750
+ this.size = this.parent?.size ?? this.injectedSize ?? DefaultSize;
751
+ }
752
+ this.sizeClass = getSizeClass(this.size);
753
+ }
754
+ ngOnChanges(changes) {
755
+ if (changes.size) {
756
+ this.sizeClass = getSizeClass(this.size);
757
+ }
758
+ }
730
759
  async ngAfterViewInit() {
731
760
  const subscription = this.fieldInput?.onTouch.asObservable().subscribe(() => {
732
761
  this.determinePopupState();
@@ -810,6 +839,9 @@ class FormElementComponent {
810
839
  registerCaptionEnd(templateRef) {
811
840
  this.captionEndRef = templateRef;
812
841
  }
842
+ registerSubCaption(templateRef) {
843
+ this.subCaptionRef = templateRef;
844
+ }
813
845
  getWarningToShow() {
814
846
  return this.parent?.getWarningToShow(this.attachedControl);
815
847
  }
@@ -938,11 +970,11 @@ class FormElementComponent {
938
970
  }
939
971
  }
940
972
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: FormElementComponent, deps: [{ token: FormComponent, optional: true }, { token: FORM_ERROR_MESSAGES, optional: true }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
941
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: FormElementComponent, isStandalone: false, selector: "klp-form-element", inputs: { caption: "caption", direction: "direction", captionSpacing: "captionSpacing", verticalAlignment: "verticalAlignment", spaceDistribution: "spaceDistribution", swapInputAndCaption: "swapInputAndCaption", errorMessageAsTooltip: "errorMessageAsTooltip", errorMessageHasMaxWidth: "errorMessageHasMaxWidth" }, queries: [{ propertyName: "fieldInput", first: true, predicate: NG_VALUE_ACCESSOR, descendants: true }], viewQueries: [{ propertyName: "internalComponentRef", first: true, predicate: ["internalComponentRef"], descendants: true }, { propertyName: "tailTpl", first: true, predicate: ["tailTpl"], descendants: true }, { propertyName: "captionDummyForSpaceCalculation", first: true, predicate: ["captionDummyForSpaceCalculation"], descendants: true }, { propertyName: "absoluteAnchor", first: true, predicate: ["absoluteAnchor"], descendants: true }, { propertyName: "fixedAnchor", first: true, predicate: ["fixedAnchor"], descendants: true }, { propertyName: "fixedWrapper", first: true, predicate: ["fixedWrapper"], descendants: true }, { propertyName: "inputContainer", first: true, predicate: ["inputContainer"], descendants: true }], ngImport: i0, template: "<div\n class=\"componentContainer\"\n\t[ngClass]=\"{\n\t\thasCaption: caption || captionRef,\n\t\tvertical: direction === 'vertical',\n\t\thorizontal: direction === 'horizontal',\n\t\ttopAlignment: verticalAlignment === 'top',\n\t\treverseOrder: swapInputAndCaption,\n\t\thasErrors: getErrorToShow() && attachedControl.touched,\n\t\tpercentageSpacing: captionSpacing === 'percentages' && spaceDistribution !== 'fixedInputWidth',\n\t\t'd40-60': spaceDistribution === '40-60',\n\t\t'd30-70': spaceDistribution === '30-70',\n\t\t'd34-66': spaceDistribution === '34-66',\n\t\t'fixedInputWidth': spaceDistribution === 'fixedInputWidth',\n\t\t'fixedCaptionWidth': spaceDistribution === 'fixedCaptionWidth'\n\t}\"\n >\n @if (direction === 'horizontal' && !errorMessageAsTooltip) {\n <div class=\"errorAboveInputContainer\">\n <div class=\"spacer\"></div>\n <ng-container [ngTemplateOutlet]=\"errorRef\"></ng-container>\n </div>\n }\n\n <div class=\"captionInputAndError\" #internalComponentRef>\n @if (hasRightOfCaptionError()) {\n <div class=\"captionDummyForSpaceCalculation\" #captionDummyForSpaceCalculation>\n <ng-container [ngTemplateOutlet]=\"captionTpl\" [ngTemplateOutletContext]=\"{forCalculation: true}\"></ng-container>\n </div>\n }\n <ng-container [ngTemplateOutlet]=\"captionTpl\"></ng-container>\n @if (direction === 'vertical' && getErrorLocation() === 'belowCaption' && !errorMessageAsTooltip) {\n <ng-container [ngTemplateOutlet]=\"errorRef\"></ng-container>\n }\n <div class=\"inputContainer\" #inputContainer>\n @if (errorMessageAsTooltip && shouldShowErrorMessages() && getErrorToShow()) {\n <div class=\"errorTooltipTriangle\"></div>\n <div class=\"errorTooltipTriangleWhite\"></div>\n <div class=\"errorTooltip\">\n <ng-container [ngTemplateOutlet]=\"errorRef\"></ng-container>\n </div>\n }\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n\n<ng-template #captionTpl let-forCalculation=\"forCalculation\">\n @if (caption || captionRef) {\n <div class=\"caption\"\n\t\t[ngClass]=\"{\n\t\t\twithErrorRightOfCaption: getErrorLocation() === 'rightOfCaption'\n\t\t}\"\n >\n @if (captionRef) {\n <div class=\"captionRefContainer\">\n <ng-container [ngTemplateOutlet]=\"captionRef\"></ng-container>\n @if (isRequired()) {\n <div>&nbsp;*</div>\n }\n </div>\n }\n @if (!captionRef) {\n <div class=\"captionText\">{{caption}}@if (isRequired()) {\n <span>&nbsp;*</span>\n }</div>\n }\n @if (hasRightOfCaptionError()) {\n <div class=\"rightOfCaptionError\" [ngClass]=\"{errorFullyVisible: errorFullyVisible, errorMessageHasMaxWidth: errorMessageHasMaxWidth}\">\n <ng-container [ngTemplateOutlet]=\"errorRef\" [ngTemplateOutletContext]=\"{forCalculation: forCalculation}\"></ng-container>\n </div>\n }\n @if (captionEndRef) {\n <div class=\"captionEndRefContainer\">\n <ng-container [ngTemplateOutlet]=\"captionEndRef\"></ng-container>\n </div>\n }\n </div>\n }\n</ng-template>\n\n<ng-template #errorRef let-forCalculation=\"forCalculation\">\n @if (shouldShowErrorMessages() && getErrorToShow()) {\n <div class=\"errorContainer\" [elementIsTruncatedCb]=\"forCalculation ? setErrorMessageIsTruncated : null\" [ngClass]=\"{horizontal: direction === 'horizontal', hasCaption: caption || captionRef, 'd30-70': spaceDistribution === '30-70', 'd34-66': spaceDistribution === '34-66'}\">\n @if (showDefaultError('min')) {\n <div>{{substituteParameters(getErrorMessage(\"min\"), {min: attachedControl.errors.min.min})}}</div>\n }\n @if (showDefaultError('max')) {\n <div>{{substituteParameters(getErrorMessage(\"max\"), {max: attachedControl.errors.max.max})}}</div>\n }\n @if (showDefaultError('required')) {\n <div>{{getErrorMessage(\"required\")}}</div>\n }\n @if (showDefaultError('email')) {\n <div>{{getErrorMessage(\"email\")}}</div>\n }\n @if (showDefaultError('minlength')) {\n <div>{{substituteParameters(getErrorMessage(\"minLength\"), {minLength: attachedControl.errors.minlength.requiredLength})}}</div>\n }\n @if (showDefaultError('maxlength')) {\n <div>{{substituteParameters(getErrorMessage(\"maxLength\"), {maxLength: attachedControl.errors.maxlength.requiredLength})}}</div>\n }\n @if (showDefaultError('pattern')) {\n <div>{{getErrorMessage(\"pattern\")}}</div>\n }\n @if (showDefaultError('MatchPassword')) {\n <div>{{getErrorMessage(\"matchPassword\")}}</div>\n }\n @if (showDefaultError('date')) {\n <div>{{getErrorMessage(\"date\")}}</div>\n }\n @if (showDefaultError('message')) {\n <div>{{attachedControl.errors.message.value}}</div>\n }\n @if (showDefaultError('formLevel')) {\n <div>{{getErrorMessage(\"formLevel\")}}</div>\n }\n <div [ngTemplateOutlet]=\"getCustomErrorHandler(getErrorToShow())?.templateRef\"></div>\n </div>\n }\n</ng-template>\n\n<ng-template #tailTpl>\n <div class=\"errorTooltipContainer\" [ngClass]=\"{alwaysOpen: shouldShowErrorTooltipOpened()}\">\n @if (hasHoverableErrorTooltip() || shouldShowErrorTooltipOpened()) {\n <div class=\"errorTooltipTriangle\"></div>\n <div class=\"errorTooltipTriangleWhite\"></div>\n <div class=\"absoluteAnchor\" #absoluteAnchor></div>\n <div class=\"fixedAnchor\" #fixedAnchor [onRenderFn]=\"setErrorTooltipOffset\"></div>\n <div class=\"fixedWrapper\" #fixedWrapper>\n <div class=\"errorTooltip\" [ngClass]=\"{noPointerEvents: !shouldShowErrorTooltipOpened()}\">\n <div class=\"errorTooltipInner\">\n <i class=\"closeBtn\" (click)=\"closePopup();\">\u00D7</i>\n @if (getErrorToShow()) {\n <ng-container [ngTemplateOutlet]=\"errorRef\"></ng-container>\n }\n @if (!getErrorToShow() && shouldShowWarningPopup()) {\n <div>\n @if (getWarningToShowIsTemplateRef()) {\n <ng-container [ngTemplateOutlet]=\"getWarningToShowAsTemplateRef()\"></ng-container>\n }\n @if (!getWarningToShowIsTemplateRef()) {\n <span>{{getWarningToShow()}}</span>\n }\n </div>\n }\n </div>\n </div>\n </div>\n }\n @if (getErrorToShow()) {\n <klp-form-warning-icon variant=\"fill\" (click)=\"togglePopup()\"></klp-form-warning-icon>\n }\n @if (!getErrorToShow() && getWarningToShow()) {\n <klp-form-warning-icon variant=\"line\" (click)=\"togglePopup()\"></klp-form-warning-icon>\n }\n </div>\n</ng-template>\n", styles: [":host{display:block}.componentContainer:not(.hasCaption) .captionInputAndError{display:block}.componentContainer:not(.hasCaption) .captionInputAndError .inputContainer{margin-top:0;padding-left:0;max-width:initial}.componentContainer:not(.hasCaption) .errorContainer{padding-left:0}.componentContainer.hasCaption .errorAboveInputContainer .spacer{display:block}.componentContainer.reverseOrder .captionInputAndError{flex-direction:row-reverse;justify-content:flex-end}.componentContainer.vertical .captionInputAndError{display:block}.componentContainer.vertical .captionInputAndError .inputContainer{margin-top:.3125rem}.componentContainer.vertical .captionInputAndError .errorContainer{margin-left:0}.componentContainer.topAlignment .captionInputAndError{align-items:flex-start}.componentContainer.horizontal.hasCaption .inputContainer,.componentContainer.horizontal.hasCaption .errorAboveInputContainer .errorContainer{padding-left:1rem}.componentContainer.horizontal.hasCaption.d40-60 .errorAboveInputContainer .spacer{flex:0 1 40%}.componentContainer.horizontal.hasCaption.d40-60 .errorAboveInputContainer .errorContainer{flex:60 1 0px}.componentContainer.horizontal.hasCaption.d40-60 .caption{max-width:40%;flex:40 1 0px}.componentContainer.horizontal.hasCaption.d40-60 .inputContainer{max-width:60%;flex:60 1 0px}.componentContainer.horizontal.hasCaption.d34-66 .errorAboveInputContainer .spacer{flex:0 1 34%}.componentContainer.horizontal.hasCaption.d34-66 .errorAboveInputContainer .errorContainer{flex:66 1 0px}.componentContainer.horizontal.hasCaption.d34-66 .caption{max-width:34%;flex:34 1 0px}.componentContainer.horizontal.hasCaption.d34-66 .inputContainer{max-width:66%;flex:66 1 0px}.componentContainer.horizontal.hasCaption.d30-70 .errorAboveInputContainer .spacer{flex:0 1 30%}.componentContainer.horizontal.hasCaption.d30-70 .errorAboveInputContainer .errorContainer{flex:70 1 0px}.componentContainer.horizontal.hasCaption.d30-70 .caption{max-width:30%;flex:30 1 0px}.componentContainer.horizontal.hasCaption.d30-70 .inputContainer{max-width:70%;flex:70 1 0px}.componentContainer.fixedInputWidth .caption{flex:1 1 0px;overflow:hidden}.componentContainer.fixedInputWidth .inputContainer,.componentContainer.fixedCaptionWidth .caption{flex:0 0 auto}.componentContainer.fixedCaptionWidth .inputContainer{flex:1 1 0px;overflow:hidden}.captionInputAndError{display:flex;align-items:center;min-height:42px}.errorAboveInputContainer{display:flex}.errorAboveInputContainer .spacer{display:none}.captionDummyForSpaceCalculation .caption.withErrorRightOfCaption{height:0px;overflow:hidden}.captionDummyForSpaceCalculation .caption.withErrorRightOfCaption .rightOfCaptionError{display:block}.captionRefContainer,.captionEndRefContainer{display:flex}.caption{font-weight:500;flex:0 0 auto}.caption.percentageSpacing{max-width:40%;flex:40 1 0px}.caption.percentageSpacing.d30-70{max-width:30%;flex:30 1 0px}.caption.percentageSpacing.d34-66{max-width:34%;flex:34 1 0px}.caption{color:#101828}.caption.withErrorRightOfCaption{display:flex;justify-content:space-between;gap:1rem}.caption.withErrorRightOfCaption .captionText{flex:1 2 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.caption.withErrorRightOfCaption .rightOfCaptionError{display:none}.caption.withErrorRightOfCaption .rightOfCaptionError.errorFullyVisible{display:block}.caption.withErrorRightOfCaption .rightOfCaptionError.errorMessageHasMaxWidth{max-width:40%}.caption.withErrorRightOfCaption .rightOfCaptionError{font-weight:400;overflow:hidden;flex:1 0 auto;text-align:right}.caption.withErrorRightOfCaption .rightOfCaptionError ::ng-deep *{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.inputContainer{position:relative;flex:1}.inputContainer .errorTooltipContainer{position:relative}.inputContainer .errorTooltipContainer.alwaysOpen .errorTooltipTriangle,.inputContainer .errorTooltipContainer.alwaysOpen .errorTooltipTriangleWhite,.inputContainer .errorTooltipContainer.alwaysOpen .errorTooltip{display:flex}.inputContainer .errorTooltipContainer.alwaysOpen .closeBtn{display:block}.inputContainer .errorTooltipContainer.alwaysOpen .errorTooltipInner{padding-right:1.4rem}.inputContainer .errorTooltipContainer klp-form-warning-icon{cursor:pointer}.inputContainer .errorTooltipContainer .absoluteAnchor{position:absolute}.inputContainer .errorTooltipContainer .fixedAnchor,.inputContainer .errorTooltipContainer .fixedWrapper{position:fixed}.inputContainer .errorTooltipTriangle{display:none;z-index:1;position:absolute;right:0;transform:translate(-.15rem,calc(-100% - .1rem)) scaleX(.8);width:0px;height:0px;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid rgba(0,0,0,.13)}.inputContainer .errorTooltipTriangleWhite{display:none;z-index:3;position:absolute;right:0;transform:translate(-.15rem,calc(-100% - .1rem - 2px)) scaleX(.8);width:0px;height:0px;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid white}.inputContainer .errorTooltip{display:none;justify-content:flex-end}.inputContainer .errorTooltip.noPointerEvents{pointer-events:none}.inputContainer .errorTooltip{position:absolute;top:-.6rem;right:-1.875rem;transform:translateY(-100%);width:20rem}.inputContainer .errorTooltip .closeBtn{display:none;position:absolute;top:.2rem;right:.2rem;padding:.2rem .4rem;cursor:pointer;color:#667085;font-size:1rem}.inputContainer .errorTooltip .closeBtn:hover{color:#475467}.inputContainer .errorTooltipInner{background:#fff;padding:.4rem .6rem;border-radius:.4rem;border:1px solid rgba(0,0,0,.13);box-shadow:#00000021 2px 3px 10px}.inputContainer:hover .errorTooltipContainer .errorTooltip,.inputContainer:hover .errorTooltipContainer .errorTooltipTriangle,.inputContainer:hover .errorTooltipContainer .errorTooltipTriangleWhite{display:flex}.errorContainer{color:#ff8000}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: OnRenderDirective, selector: "[onRenderFn]", inputs: ["onRenderFn"] }, { kind: "component", type: WarningIconComponent, selector: "klp-form-warning-icon", inputs: ["variant"] }, { kind: "directive", type: ElementIsTruncatedCbComponent, selector: "[elementIsTruncatedCb]", inputs: ["elementIsTruncatedCb"] }] }); }
973
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: FormElementComponent, isStandalone: false, selector: "klp-form-element", inputs: { caption: "caption", direction: "direction", captionSpacing: "captionSpacing", verticalAlignment: "verticalAlignment", spaceDistribution: "spaceDistribution", swapInputAndCaption: "swapInputAndCaption", errorMessageAsTooltip: "errorMessageAsTooltip", errorMessageHasMaxWidth: "errorMessageHasMaxWidth", size: "size" }, queries: [{ propertyName: "fieldInput", first: true, predicate: NG_VALUE_ACCESSOR, descendants: true }], viewQueries: [{ propertyName: "internalComponentRef", first: true, predicate: ["internalComponentRef"], descendants: true }, { propertyName: "tailTpl", first: true, predicate: ["tailTpl"], descendants: true }, { propertyName: "captionDummyForSpaceCalculation", first: true, predicate: ["captionDummyForSpaceCalculation"], descendants: true }, { propertyName: "absoluteAnchor", first: true, predicate: ["absoluteAnchor"], descendants: true }, { propertyName: "fixedAnchor", first: true, predicate: ["fixedAnchor"], descendants: true }, { propertyName: "fixedWrapper", first: true, predicate: ["fixedWrapper"], descendants: true }, { propertyName: "inputContainer", first: true, predicate: ["inputContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n\tclass=\"componentContainer\"\n\t[ngClass]=\"{\n\t\thasCaption: caption || captionRef,\n\t\thasSubCaption: !!subCaptionRef,\n\t\tvertical: direction === 'vertical',\n\t\thorizontal: direction === 'horizontal',\n\t\ttopAlignment: verticalAlignment === 'top',\n\t\treverseOrder: swapInputAndCaption,\n\t\thasErrors: getErrorToShow() && attachedControl.touched,\n\t\tpercentageSpacing: captionSpacing === 'percentages' && spaceDistribution !== 'fixedInputWidth',\n\t\t'd40-60': spaceDistribution === '40-60',\n\t\t'd30-70': spaceDistribution === '30-70',\n\t\t'd34-66': spaceDistribution === '34-66',\n\t\t'fixedInputWidth': spaceDistribution === 'fixedInputWidth',\n\t\t'fixedCaptionWidth': spaceDistribution === 'fixedCaptionWidth'\n\t}\"\n>\n\t@if (direction === 'horizontal' && !errorMessageAsTooltip) {\n\t\t<div class=\"errorAboveInputContainer\">\n\t\t\t<div class=\"spacer\"></div>\n\t\t\t<ng-container [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t\t</div>\n\t}\n\n\t<div class=\"captionInputAndError\" #internalComponentRef>\n\t\t@if (hasRightOfCaptionError()) {\n\t\t\t<div class=\"captionDummyForSpaceCalculation\" #captionDummyForSpaceCalculation>\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"captionTpl\" [ngTemplateOutletContext]=\"{forCalculation: true}\"></ng-container>\n\t\t\t</div>\n\t\t}\n\t\t<ng-container [ngTemplateOutlet]=\"captionTpl\"></ng-container>\n\t\t@if (direction === 'vertical' && getErrorLocation() === 'belowCaption' && !errorMessageAsTooltip) {\n\t\t\t<ng-container [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t\t}\n\t\t<div class=\"inputContainer\" #inputContainer>\n\t\t\t@if (errorMessageAsTooltip && shouldShowErrorMessages() && getErrorToShow()) {\n\t\t\t\t<div class=\"errorTooltipTriangle\"></div>\n\t\t\t\t<div class=\"errorTooltipTriangleWhite\"></div>\n\t\t\t\t<div class=\"errorTooltip\">\n\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t<ng-content></ng-content>\n\t\t</div>\n\t\t<ng-container [ngTemplateOutlet]=\"subCaptionTpl\"></ng-container>\n\t</div>\n</div>\n\n<ng-template #captionTpl let-forCalculation=\"forCalculation\">\n\t@if (caption || captionRef) {\n\t\t<div class=\"caption\"\n\t\t\t\t [ngClass]=\"{\n\t\t\twithErrorRightOfCaption: getErrorLocation() === 'rightOfCaption'\n\t\t}\"\n\t\t\t\t [class]=\"sizeClass\"\n\t\t>\n\t\t\t@if (captionRef) {\n\t\t\t\t<div class=\"captionRefContainer\">\n\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"captionRef\"></ng-container>\n\t\t\t\t\t@if (isRequired()) {\n\t\t\t\t\t\t<div>&nbsp;*</div>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@if (!captionRef) {\n\t\t\t\t<div class=\"captionText\">{{ caption }}@if (isRequired()) {\n\t\t\t\t\t<span>&nbsp;*</span>\n\t\t\t\t}</div>\n\t\t\t}\n\t\t\t@if (hasRightOfCaptionError()) {\n\t\t\t\t<div class=\"rightOfCaptionError\"\n\t\t\t\t\t\t [ngClass]=\"{errorFullyVisible: errorFullyVisible, errorMessageHasMaxWidth: errorMessageHasMaxWidth}\">\n\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"errorRef\"\n\t\t\t\t\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{forCalculation: forCalculation}\"></ng-container>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@if (captionEndRef) {\n\t\t\t\t<div class=\"captionEndRefContainer\">\n\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"captionEndRef\"></ng-container>\n\t\t\t\t</div>\n\t\t\t}\n\t\t</div>\n\t}\n</ng-template>\n\n<ng-template #errorRef let-forCalculation=\"forCalculation\">\n\t@if (shouldShowErrorMessages() && getErrorToShow()) {\n\t\t<div class=\"errorContainer\" [elementIsTruncatedCb]=\"forCalculation ? setErrorMessageIsTruncated : null\"\n\t\t\t\t [ngClass]=\"{horizontal: direction === 'horizontal', hasCaption: caption || captionRef, 'd30-70': spaceDistribution === '30-70', 'd34-66': spaceDistribution === '34-66'}\">\n\t\t\t@if (showDefaultError('min')) {\n\t\t\t\t<div>{{ substituteParameters(getErrorMessage(\"min\"), {min: attachedControl.errors.min.min}) }}</div>\n\t\t\t}\n\t\t\t@if (showDefaultError('max')) {\n\t\t\t\t<div>{{ substituteParameters(getErrorMessage(\"max\"), {max: attachedControl.errors.max.max}) }}</div>\n\t\t\t}\n\t\t\t@if (showDefaultError('required')) {\n\t\t\t\t<div>{{ getErrorMessage(\"required\") }}</div>\n\t\t\t}\n\t\t\t@if (showDefaultError('email')) {\n\t\t\t\t<div>{{ getErrorMessage(\"email\") }}</div>\n\t\t\t}\n\t\t\t@if (showDefaultError('minlength')) {\n\t\t\t\t<div>{{ substituteParameters(getErrorMessage(\"minLength\"), {minLength: attachedControl.errors.minlength.requiredLength}) }}</div>\n\t\t\t}\n\t\t\t@if (showDefaultError('maxlength')) {\n\t\t\t\t<div>{{ substituteParameters(getErrorMessage(\"maxLength\"), {maxLength: attachedControl.errors.maxlength.requiredLength}) }}</div>\n\t\t\t}\n\t\t\t@if (showDefaultError('pattern')) {\n\t\t\t\t<div>{{ getErrorMessage(\"pattern\") }}</div>\n\t\t\t}\n\t\t\t@if (showDefaultError('MatchPassword')) {\n\t\t\t\t<div>{{ getErrorMessage(\"matchPassword\") }}</div>\n\t\t\t}\n\t\t\t@if (showDefaultError('date')) {\n\t\t\t\t<div>{{ getErrorMessage(\"date\") }}</div>\n\t\t\t}\n\t\t\t@if (showDefaultError('message')) {\n\t\t\t\t<div>{{ attachedControl.errors.message.value }}</div>\n\t\t\t}\n\t\t\t@if (showDefaultError('formLevel')) {\n\t\t\t\t<div>{{ getErrorMessage(\"formLevel\") }}</div>\n\t\t\t}\n\t\t\t<div [ngTemplateOutlet]=\"getCustomErrorHandler(getErrorToShow())?.templateRef\"></div>\n\t\t</div>\n\t}\n</ng-template>\n\n<ng-template #tailTpl>\n\t<div class=\"errorTooltipContainer\" [ngClass]=\"{alwaysOpen: shouldShowErrorTooltipOpened()}\">\n\t\t@if (hasHoverableErrorTooltip() || shouldShowErrorTooltipOpened()) {\n\t\t\t<div class=\"errorTooltipTriangle\"></div>\n\t\t\t<div class=\"errorTooltipTriangleWhite\"></div>\n\t\t\t<div class=\"absoluteAnchor\" #absoluteAnchor></div>\n\t\t\t<div class=\"fixedAnchor\" #fixedAnchor [onRenderFn]=\"setErrorTooltipOffset\"></div>\n\t\t\t<div class=\"fixedWrapper\" #fixedWrapper>\n\t\t\t\t<div class=\"errorTooltip\" [ngClass]=\"{noPointerEvents: !shouldShowErrorTooltipOpened()}\">\n\t\t\t\t\t<div class=\"errorTooltipInner\">\n\t\t\t\t\t\t<i class=\"closeBtn\" (click)=\"closePopup();\">\u00D7</i>\n\t\t\t\t\t\t@if (getErrorToShow()) {\n\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (!getErrorToShow() && shouldShowWarningPopup()) {\n\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t@if (getWarningToShowIsTemplateRef()) {\n\t\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"getWarningToShowAsTemplateRef()\"></ng-container>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@if (!getWarningToShowIsTemplateRef()) {\n\t\t\t\t\t\t\t\t\t<span>{{ getWarningToShow() }}</span>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t}\n\t\t@if (getErrorToShow()) {\n\t\t\t<klp-form-warning-icon variant=\"fill\" (click)=\"togglePopup()\"></klp-form-warning-icon>\n\t\t}\n\t\t@if (!getErrorToShow() && getWarningToShow()) {\n\t\t\t<klp-form-warning-icon variant=\"line\" (click)=\"togglePopup()\"></klp-form-warning-icon>\n\t\t}\n\t</div>\n</ng-template>\n\n<ng-template #subCaptionTpl>\n\t<div class=\"subCaption\"\n\t\t\t [class]=\"sizeClass\"\n\t>\n\t\t@if (subCaptionRef){\n\t\t\t<ng-container [ngTemplateOutlet]=\"subCaptionRef\"></ng-container>\n\t\t}\n\t</div>\n</ng-template>\n", styles: [":host{display:block;max-width:100%;max-height:100%}.componentContainer:not(.hasCaption) .captionInputAndError{display:block}.componentContainer:not(.hasCaption) .captionInputAndError .inputContainer{margin-top:0;padding-left:0;max-width:initial}.componentContainer:not(.hasCaption) .errorContainer{padding-left:0}.componentContainer:not(.hasSubCaption) .captionInputAndError .inputContainer{margin-bottom:0!important}.componentContainer.hasCaption .errorAboveInputContainer .spacer{display:block}.componentContainer.reverseOrder .captionInputAndError{flex-direction:row-reverse;justify-content:flex-end}.componentContainer.vertical .captionInputAndError{display:block}.componentContainer.vertical .captionInputAndError .inputContainer{margin-top:.25rem;margin-bottom:.25rem}.componentContainer.vertical .captionInputAndError .errorContainer{margin-left:0}.componentContainer.topAlignment .captionInputAndError{align-items:flex-start}.componentContainer.horizontal.hasCaption .inputContainer,.componentContainer.horizontal.hasCaption .errorAboveInputContainer .errorContainer{padding-left:1rem}.componentContainer.horizontal.hasCaption.d40-60 .errorAboveInputContainer .spacer{flex:0 1 40%}.componentContainer.horizontal.hasCaption.d40-60 .errorAboveInputContainer .errorContainer{flex:60 1 0px}.componentContainer.horizontal.hasCaption.d40-60 .caption{max-width:40%;flex:40 1 0px}.componentContainer.horizontal.hasCaption.d40-60 .inputContainer{max-width:60%;flex:60 1 0px}.componentContainer.horizontal.hasCaption.d34-66 .errorAboveInputContainer .spacer{flex:0 1 34%}.componentContainer.horizontal.hasCaption.d34-66 .errorAboveInputContainer .errorContainer{flex:66 1 0px}.componentContainer.horizontal.hasCaption.d34-66 .caption{max-width:34%;flex:34 1 0px}.componentContainer.horizontal.hasCaption.d34-66 .inputContainer{max-width:66%;flex:66 1 0px}.componentContainer.horizontal.hasCaption.d30-70 .errorAboveInputContainer .spacer{flex:0 1 30%}.componentContainer.horizontal.hasCaption.d30-70 .errorAboveInputContainer .errorContainer{flex:70 1 0px}.componentContainer.horizontal.hasCaption.d30-70 .caption{max-width:30%;flex:30 1 0px}.componentContainer.horizontal.hasCaption.d30-70 .inputContainer{max-width:70%;flex:70 1 0px}.componentContainer.fixedInputWidth .caption{flex:1 1 0px;overflow:hidden}.componentContainer.fixedInputWidth .inputContainer,.componentContainer.fixedCaptionWidth .caption{flex:0 0 auto}.componentContainer.fixedCaptionWidth .inputContainer{flex:1 1 0px;overflow:hidden}.captionInputAndError{display:flex;align-items:center}.errorAboveInputContainer{display:flex}.errorAboveInputContainer .spacer{display:none}.captionDummyForSpaceCalculation .caption.withErrorRightOfCaption{height:0px;overflow:hidden}.captionDummyForSpaceCalculation .caption.withErrorRightOfCaption .rightOfCaptionError{display:block}.captionRefContainer,.captionEndRefContainer{display:flex}.caption{color:#101828;font-feature-settings:\"cv05\" on;font-size:16px;font-style:normal;font-weight:500;line-height:24px;letter-spacing:.16px}.caption.input-sm{font-size:14px;line-height:20px;letter-spacing:.14px}.caption.disabled{color:#98a2b3}.caption{flex:0 0 auto}.caption.percentageSpacing{max-width:40%;flex:40 1 0px}.caption.percentageSpacing.d30-70{max-width:30%;flex:30 1 0px}.caption.percentageSpacing.d34-66{max-width:34%;flex:34 1 0px}.caption.withErrorRightOfCaption{display:flex;justify-content:space-between;gap:1rem}.caption.withErrorRightOfCaption .captionText{flex:1 2 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.caption.withErrorRightOfCaption .rightOfCaptionError{display:none}.caption.withErrorRightOfCaption .rightOfCaptionError.errorFullyVisible{display:block}.caption.withErrorRightOfCaption .rightOfCaptionError.errorMessageHasMaxWidth{max-width:40%}.caption.withErrorRightOfCaption .rightOfCaptionError{font-weight:400;overflow:hidden;flex:1 0 auto;text-align:right}.caption.withErrorRightOfCaption .rightOfCaptionError ::ng-deep *{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.inputContainer{position:relative;flex:1}.inputContainer .errorTooltipContainer{position:relative}.inputContainer .errorTooltipContainer.alwaysOpen .errorTooltipTriangle,.inputContainer .errorTooltipContainer.alwaysOpen .errorTooltipTriangleWhite,.inputContainer .errorTooltipContainer.alwaysOpen .errorTooltip{display:flex}.inputContainer .errorTooltipContainer.alwaysOpen .closeBtn{display:block}.inputContainer .errorTooltipContainer.alwaysOpen .errorTooltipInner{padding-right:1.4rem}.inputContainer .errorTooltipContainer klp-form-warning-icon{cursor:pointer}.inputContainer .errorTooltipContainer .absoluteAnchor{position:absolute}.inputContainer .errorTooltipContainer .fixedAnchor,.inputContainer .errorTooltipContainer .fixedWrapper{position:fixed}.inputContainer .errorTooltipTriangle{display:none;z-index:1;position:absolute;right:0;transform:translate(-.15rem,calc(-100% - .1rem)) scaleX(.8);width:0px;height:0px;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid rgba(0,0,0,.13)}.inputContainer .errorTooltipTriangleWhite{display:none;z-index:3;position:absolute;right:0;transform:translate(-.15rem,calc(-100% - .1rem - 2px)) scaleX(.8);width:0px;height:0px;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid white}.inputContainer .errorTooltip{display:none;justify-content:flex-end}.inputContainer .errorTooltip.noPointerEvents{pointer-events:none}.inputContainer .errorTooltip{position:absolute;top:-.6rem;right:-1.875rem;transform:translateY(-100%);width:20rem}.inputContainer .errorTooltip .closeBtn{display:none;position:absolute;top:.2rem;right:.2rem;padding:.2rem .4rem;cursor:pointer;color:#667085;font-size:1rem}.inputContainer .errorTooltip .closeBtn:hover{color:#475467}.inputContainer .errorTooltipInner{background:#fff;padding:.4rem .6rem;border-radius:.4rem;border:1px solid rgba(0,0,0,.13);box-shadow:#00000021 2px 3px 10px}.inputContainer:hover .errorTooltipContainer .errorTooltip,.inputContainer:hover .errorTooltipContainer .errorTooltipTriangle,.inputContainer:hover .errorTooltipContainer .errorTooltipTriangleWhite{display:flex}.errorContainer{color:#ff8000}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: OnRenderDirective, selector: "[onRenderFn]", inputs: ["onRenderFn"] }, { kind: "component", type: WarningIconComponent, selector: "klp-form-warning-icon", inputs: ["variant"] }, { kind: "directive", type: ElementIsTruncatedCbComponent, selector: "[elementIsTruncatedCb]", inputs: ["elementIsTruncatedCb"] }] }); }
942
974
  }
943
975
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: FormElementComponent, decorators: [{
944
976
  type: Component,
945
- args: [{ selector: 'klp-form-element', standalone: false, template: "<div\n class=\"componentContainer\"\n\t[ngClass]=\"{\n\t\thasCaption: caption || captionRef,\n\t\tvertical: direction === 'vertical',\n\t\thorizontal: direction === 'horizontal',\n\t\ttopAlignment: verticalAlignment === 'top',\n\t\treverseOrder: swapInputAndCaption,\n\t\thasErrors: getErrorToShow() && attachedControl.touched,\n\t\tpercentageSpacing: captionSpacing === 'percentages' && spaceDistribution !== 'fixedInputWidth',\n\t\t'd40-60': spaceDistribution === '40-60',\n\t\t'd30-70': spaceDistribution === '30-70',\n\t\t'd34-66': spaceDistribution === '34-66',\n\t\t'fixedInputWidth': spaceDistribution === 'fixedInputWidth',\n\t\t'fixedCaptionWidth': spaceDistribution === 'fixedCaptionWidth'\n\t}\"\n >\n @if (direction === 'horizontal' && !errorMessageAsTooltip) {\n <div class=\"errorAboveInputContainer\">\n <div class=\"spacer\"></div>\n <ng-container [ngTemplateOutlet]=\"errorRef\"></ng-container>\n </div>\n }\n\n <div class=\"captionInputAndError\" #internalComponentRef>\n @if (hasRightOfCaptionError()) {\n <div class=\"captionDummyForSpaceCalculation\" #captionDummyForSpaceCalculation>\n <ng-container [ngTemplateOutlet]=\"captionTpl\" [ngTemplateOutletContext]=\"{forCalculation: true}\"></ng-container>\n </div>\n }\n <ng-container [ngTemplateOutlet]=\"captionTpl\"></ng-container>\n @if (direction === 'vertical' && getErrorLocation() === 'belowCaption' && !errorMessageAsTooltip) {\n <ng-container [ngTemplateOutlet]=\"errorRef\"></ng-container>\n }\n <div class=\"inputContainer\" #inputContainer>\n @if (errorMessageAsTooltip && shouldShowErrorMessages() && getErrorToShow()) {\n <div class=\"errorTooltipTriangle\"></div>\n <div class=\"errorTooltipTriangleWhite\"></div>\n <div class=\"errorTooltip\">\n <ng-container [ngTemplateOutlet]=\"errorRef\"></ng-container>\n </div>\n }\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n\n<ng-template #captionTpl let-forCalculation=\"forCalculation\">\n @if (caption || captionRef) {\n <div class=\"caption\"\n\t\t[ngClass]=\"{\n\t\t\twithErrorRightOfCaption: getErrorLocation() === 'rightOfCaption'\n\t\t}\"\n >\n @if (captionRef) {\n <div class=\"captionRefContainer\">\n <ng-container [ngTemplateOutlet]=\"captionRef\"></ng-container>\n @if (isRequired()) {\n <div>&nbsp;*</div>\n }\n </div>\n }\n @if (!captionRef) {\n <div class=\"captionText\">{{caption}}@if (isRequired()) {\n <span>&nbsp;*</span>\n }</div>\n }\n @if (hasRightOfCaptionError()) {\n <div class=\"rightOfCaptionError\" [ngClass]=\"{errorFullyVisible: errorFullyVisible, errorMessageHasMaxWidth: errorMessageHasMaxWidth}\">\n <ng-container [ngTemplateOutlet]=\"errorRef\" [ngTemplateOutletContext]=\"{forCalculation: forCalculation}\"></ng-container>\n </div>\n }\n @if (captionEndRef) {\n <div class=\"captionEndRefContainer\">\n <ng-container [ngTemplateOutlet]=\"captionEndRef\"></ng-container>\n </div>\n }\n </div>\n }\n</ng-template>\n\n<ng-template #errorRef let-forCalculation=\"forCalculation\">\n @if (shouldShowErrorMessages() && getErrorToShow()) {\n <div class=\"errorContainer\" [elementIsTruncatedCb]=\"forCalculation ? setErrorMessageIsTruncated : null\" [ngClass]=\"{horizontal: direction === 'horizontal', hasCaption: caption || captionRef, 'd30-70': spaceDistribution === '30-70', 'd34-66': spaceDistribution === '34-66'}\">\n @if (showDefaultError('min')) {\n <div>{{substituteParameters(getErrorMessage(\"min\"), {min: attachedControl.errors.min.min})}}</div>\n }\n @if (showDefaultError('max')) {\n <div>{{substituteParameters(getErrorMessage(\"max\"), {max: attachedControl.errors.max.max})}}</div>\n }\n @if (showDefaultError('required')) {\n <div>{{getErrorMessage(\"required\")}}</div>\n }\n @if (showDefaultError('email')) {\n <div>{{getErrorMessage(\"email\")}}</div>\n }\n @if (showDefaultError('minlength')) {\n <div>{{substituteParameters(getErrorMessage(\"minLength\"), {minLength: attachedControl.errors.minlength.requiredLength})}}</div>\n }\n @if (showDefaultError('maxlength')) {\n <div>{{substituteParameters(getErrorMessage(\"maxLength\"), {maxLength: attachedControl.errors.maxlength.requiredLength})}}</div>\n }\n @if (showDefaultError('pattern')) {\n <div>{{getErrorMessage(\"pattern\")}}</div>\n }\n @if (showDefaultError('MatchPassword')) {\n <div>{{getErrorMessage(\"matchPassword\")}}</div>\n }\n @if (showDefaultError('date')) {\n <div>{{getErrorMessage(\"date\")}}</div>\n }\n @if (showDefaultError('message')) {\n <div>{{attachedControl.errors.message.value}}</div>\n }\n @if (showDefaultError('formLevel')) {\n <div>{{getErrorMessage(\"formLevel\")}}</div>\n }\n <div [ngTemplateOutlet]=\"getCustomErrorHandler(getErrorToShow())?.templateRef\"></div>\n </div>\n }\n</ng-template>\n\n<ng-template #tailTpl>\n <div class=\"errorTooltipContainer\" [ngClass]=\"{alwaysOpen: shouldShowErrorTooltipOpened()}\">\n @if (hasHoverableErrorTooltip() || shouldShowErrorTooltipOpened()) {\n <div class=\"errorTooltipTriangle\"></div>\n <div class=\"errorTooltipTriangleWhite\"></div>\n <div class=\"absoluteAnchor\" #absoluteAnchor></div>\n <div class=\"fixedAnchor\" #fixedAnchor [onRenderFn]=\"setErrorTooltipOffset\"></div>\n <div class=\"fixedWrapper\" #fixedWrapper>\n <div class=\"errorTooltip\" [ngClass]=\"{noPointerEvents: !shouldShowErrorTooltipOpened()}\">\n <div class=\"errorTooltipInner\">\n <i class=\"closeBtn\" (click)=\"closePopup();\">\u00D7</i>\n @if (getErrorToShow()) {\n <ng-container [ngTemplateOutlet]=\"errorRef\"></ng-container>\n }\n @if (!getErrorToShow() && shouldShowWarningPopup()) {\n <div>\n @if (getWarningToShowIsTemplateRef()) {\n <ng-container [ngTemplateOutlet]=\"getWarningToShowAsTemplateRef()\"></ng-container>\n }\n @if (!getWarningToShowIsTemplateRef()) {\n <span>{{getWarningToShow()}}</span>\n }\n </div>\n }\n </div>\n </div>\n </div>\n }\n @if (getErrorToShow()) {\n <klp-form-warning-icon variant=\"fill\" (click)=\"togglePopup()\"></klp-form-warning-icon>\n }\n @if (!getErrorToShow() && getWarningToShow()) {\n <klp-form-warning-icon variant=\"line\" (click)=\"togglePopup()\"></klp-form-warning-icon>\n }\n </div>\n</ng-template>\n", styles: [":host{display:block}.componentContainer:not(.hasCaption) .captionInputAndError{display:block}.componentContainer:not(.hasCaption) .captionInputAndError .inputContainer{margin-top:0;padding-left:0;max-width:initial}.componentContainer:not(.hasCaption) .errorContainer{padding-left:0}.componentContainer.hasCaption .errorAboveInputContainer .spacer{display:block}.componentContainer.reverseOrder .captionInputAndError{flex-direction:row-reverse;justify-content:flex-end}.componentContainer.vertical .captionInputAndError{display:block}.componentContainer.vertical .captionInputAndError .inputContainer{margin-top:.3125rem}.componentContainer.vertical .captionInputAndError .errorContainer{margin-left:0}.componentContainer.topAlignment .captionInputAndError{align-items:flex-start}.componentContainer.horizontal.hasCaption .inputContainer,.componentContainer.horizontal.hasCaption .errorAboveInputContainer .errorContainer{padding-left:1rem}.componentContainer.horizontal.hasCaption.d40-60 .errorAboveInputContainer .spacer{flex:0 1 40%}.componentContainer.horizontal.hasCaption.d40-60 .errorAboveInputContainer .errorContainer{flex:60 1 0px}.componentContainer.horizontal.hasCaption.d40-60 .caption{max-width:40%;flex:40 1 0px}.componentContainer.horizontal.hasCaption.d40-60 .inputContainer{max-width:60%;flex:60 1 0px}.componentContainer.horizontal.hasCaption.d34-66 .errorAboveInputContainer .spacer{flex:0 1 34%}.componentContainer.horizontal.hasCaption.d34-66 .errorAboveInputContainer .errorContainer{flex:66 1 0px}.componentContainer.horizontal.hasCaption.d34-66 .caption{max-width:34%;flex:34 1 0px}.componentContainer.horizontal.hasCaption.d34-66 .inputContainer{max-width:66%;flex:66 1 0px}.componentContainer.horizontal.hasCaption.d30-70 .errorAboveInputContainer .spacer{flex:0 1 30%}.componentContainer.horizontal.hasCaption.d30-70 .errorAboveInputContainer .errorContainer{flex:70 1 0px}.componentContainer.horizontal.hasCaption.d30-70 .caption{max-width:30%;flex:30 1 0px}.componentContainer.horizontal.hasCaption.d30-70 .inputContainer{max-width:70%;flex:70 1 0px}.componentContainer.fixedInputWidth .caption{flex:1 1 0px;overflow:hidden}.componentContainer.fixedInputWidth .inputContainer,.componentContainer.fixedCaptionWidth .caption{flex:0 0 auto}.componentContainer.fixedCaptionWidth .inputContainer{flex:1 1 0px;overflow:hidden}.captionInputAndError{display:flex;align-items:center;min-height:42px}.errorAboveInputContainer{display:flex}.errorAboveInputContainer .spacer{display:none}.captionDummyForSpaceCalculation .caption.withErrorRightOfCaption{height:0px;overflow:hidden}.captionDummyForSpaceCalculation .caption.withErrorRightOfCaption .rightOfCaptionError{display:block}.captionRefContainer,.captionEndRefContainer{display:flex}.caption{font-weight:500;flex:0 0 auto}.caption.percentageSpacing{max-width:40%;flex:40 1 0px}.caption.percentageSpacing.d30-70{max-width:30%;flex:30 1 0px}.caption.percentageSpacing.d34-66{max-width:34%;flex:34 1 0px}.caption{color:#101828}.caption.withErrorRightOfCaption{display:flex;justify-content:space-between;gap:1rem}.caption.withErrorRightOfCaption .captionText{flex:1 2 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.caption.withErrorRightOfCaption .rightOfCaptionError{display:none}.caption.withErrorRightOfCaption .rightOfCaptionError.errorFullyVisible{display:block}.caption.withErrorRightOfCaption .rightOfCaptionError.errorMessageHasMaxWidth{max-width:40%}.caption.withErrorRightOfCaption .rightOfCaptionError{font-weight:400;overflow:hidden;flex:1 0 auto;text-align:right}.caption.withErrorRightOfCaption .rightOfCaptionError ::ng-deep *{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.inputContainer{position:relative;flex:1}.inputContainer .errorTooltipContainer{position:relative}.inputContainer .errorTooltipContainer.alwaysOpen .errorTooltipTriangle,.inputContainer .errorTooltipContainer.alwaysOpen .errorTooltipTriangleWhite,.inputContainer .errorTooltipContainer.alwaysOpen .errorTooltip{display:flex}.inputContainer .errorTooltipContainer.alwaysOpen .closeBtn{display:block}.inputContainer .errorTooltipContainer.alwaysOpen .errorTooltipInner{padding-right:1.4rem}.inputContainer .errorTooltipContainer klp-form-warning-icon{cursor:pointer}.inputContainer .errorTooltipContainer .absoluteAnchor{position:absolute}.inputContainer .errorTooltipContainer .fixedAnchor,.inputContainer .errorTooltipContainer .fixedWrapper{position:fixed}.inputContainer .errorTooltipTriangle{display:none;z-index:1;position:absolute;right:0;transform:translate(-.15rem,calc(-100% - .1rem)) scaleX(.8);width:0px;height:0px;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid rgba(0,0,0,.13)}.inputContainer .errorTooltipTriangleWhite{display:none;z-index:3;position:absolute;right:0;transform:translate(-.15rem,calc(-100% - .1rem - 2px)) scaleX(.8);width:0px;height:0px;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid white}.inputContainer .errorTooltip{display:none;justify-content:flex-end}.inputContainer .errorTooltip.noPointerEvents{pointer-events:none}.inputContainer .errorTooltip{position:absolute;top:-.6rem;right:-1.875rem;transform:translateY(-100%);width:20rem}.inputContainer .errorTooltip .closeBtn{display:none;position:absolute;top:.2rem;right:.2rem;padding:.2rem .4rem;cursor:pointer;color:#667085;font-size:1rem}.inputContainer .errorTooltip .closeBtn:hover{color:#475467}.inputContainer .errorTooltipInner{background:#fff;padding:.4rem .6rem;border-radius:.4rem;border:1px solid rgba(0,0,0,.13);box-shadow:#00000021 2px 3px 10px}.inputContainer:hover .errorTooltipContainer .errorTooltip,.inputContainer:hover .errorTooltipContainer .errorTooltipTriangle,.inputContainer:hover .errorTooltipContainer .errorTooltipTriangleWhite{display:flex}.errorContainer{color:#ff8000}\n"] }]
977
+ args: [{ selector: 'klp-form-element', standalone: false, template: "<div\n\tclass=\"componentContainer\"\n\t[ngClass]=\"{\n\t\thasCaption: caption || captionRef,\n\t\thasSubCaption: !!subCaptionRef,\n\t\tvertical: direction === 'vertical',\n\t\thorizontal: direction === 'horizontal',\n\t\ttopAlignment: verticalAlignment === 'top',\n\t\treverseOrder: swapInputAndCaption,\n\t\thasErrors: getErrorToShow() && attachedControl.touched,\n\t\tpercentageSpacing: captionSpacing === 'percentages' && spaceDistribution !== 'fixedInputWidth',\n\t\t'd40-60': spaceDistribution === '40-60',\n\t\t'd30-70': spaceDistribution === '30-70',\n\t\t'd34-66': spaceDistribution === '34-66',\n\t\t'fixedInputWidth': spaceDistribution === 'fixedInputWidth',\n\t\t'fixedCaptionWidth': spaceDistribution === 'fixedCaptionWidth'\n\t}\"\n>\n\t@if (direction === 'horizontal' && !errorMessageAsTooltip) {\n\t\t<div class=\"errorAboveInputContainer\">\n\t\t\t<div class=\"spacer\"></div>\n\t\t\t<ng-container [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t\t</div>\n\t}\n\n\t<div class=\"captionInputAndError\" #internalComponentRef>\n\t\t@if (hasRightOfCaptionError()) {\n\t\t\t<div class=\"captionDummyForSpaceCalculation\" #captionDummyForSpaceCalculation>\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"captionTpl\" [ngTemplateOutletContext]=\"{forCalculation: true}\"></ng-container>\n\t\t\t</div>\n\t\t}\n\t\t<ng-container [ngTemplateOutlet]=\"captionTpl\"></ng-container>\n\t\t@if (direction === 'vertical' && getErrorLocation() === 'belowCaption' && !errorMessageAsTooltip) {\n\t\t\t<ng-container [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t\t}\n\t\t<div class=\"inputContainer\" #inputContainer>\n\t\t\t@if (errorMessageAsTooltip && shouldShowErrorMessages() && getErrorToShow()) {\n\t\t\t\t<div class=\"errorTooltipTriangle\"></div>\n\t\t\t\t<div class=\"errorTooltipTriangleWhite\"></div>\n\t\t\t\t<div class=\"errorTooltip\">\n\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t<ng-content></ng-content>\n\t\t</div>\n\t\t<ng-container [ngTemplateOutlet]=\"subCaptionTpl\"></ng-container>\n\t</div>\n</div>\n\n<ng-template #captionTpl let-forCalculation=\"forCalculation\">\n\t@if (caption || captionRef) {\n\t\t<div class=\"caption\"\n\t\t\t\t [ngClass]=\"{\n\t\t\twithErrorRightOfCaption: getErrorLocation() === 'rightOfCaption'\n\t\t}\"\n\t\t\t\t [class]=\"sizeClass\"\n\t\t>\n\t\t\t@if (captionRef) {\n\t\t\t\t<div class=\"captionRefContainer\">\n\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"captionRef\"></ng-container>\n\t\t\t\t\t@if (isRequired()) {\n\t\t\t\t\t\t<div>&nbsp;*</div>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@if (!captionRef) {\n\t\t\t\t<div class=\"captionText\">{{ caption }}@if (isRequired()) {\n\t\t\t\t\t<span>&nbsp;*</span>\n\t\t\t\t}</div>\n\t\t\t}\n\t\t\t@if (hasRightOfCaptionError()) {\n\t\t\t\t<div class=\"rightOfCaptionError\"\n\t\t\t\t\t\t [ngClass]=\"{errorFullyVisible: errorFullyVisible, errorMessageHasMaxWidth: errorMessageHasMaxWidth}\">\n\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"errorRef\"\n\t\t\t\t\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{forCalculation: forCalculation}\"></ng-container>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@if (captionEndRef) {\n\t\t\t\t<div class=\"captionEndRefContainer\">\n\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"captionEndRef\"></ng-container>\n\t\t\t\t</div>\n\t\t\t}\n\t\t</div>\n\t}\n</ng-template>\n\n<ng-template #errorRef let-forCalculation=\"forCalculation\">\n\t@if (shouldShowErrorMessages() && getErrorToShow()) {\n\t\t<div class=\"errorContainer\" [elementIsTruncatedCb]=\"forCalculation ? setErrorMessageIsTruncated : null\"\n\t\t\t\t [ngClass]=\"{horizontal: direction === 'horizontal', hasCaption: caption || captionRef, 'd30-70': spaceDistribution === '30-70', 'd34-66': spaceDistribution === '34-66'}\">\n\t\t\t@if (showDefaultError('min')) {\n\t\t\t\t<div>{{ substituteParameters(getErrorMessage(\"min\"), {min: attachedControl.errors.min.min}) }}</div>\n\t\t\t}\n\t\t\t@if (showDefaultError('max')) {\n\t\t\t\t<div>{{ substituteParameters(getErrorMessage(\"max\"), {max: attachedControl.errors.max.max}) }}</div>\n\t\t\t}\n\t\t\t@if (showDefaultError('required')) {\n\t\t\t\t<div>{{ getErrorMessage(\"required\") }}</div>\n\t\t\t}\n\t\t\t@if (showDefaultError('email')) {\n\t\t\t\t<div>{{ getErrorMessage(\"email\") }}</div>\n\t\t\t}\n\t\t\t@if (showDefaultError('minlength')) {\n\t\t\t\t<div>{{ substituteParameters(getErrorMessage(\"minLength\"), {minLength: attachedControl.errors.minlength.requiredLength}) }}</div>\n\t\t\t}\n\t\t\t@if (showDefaultError('maxlength')) {\n\t\t\t\t<div>{{ substituteParameters(getErrorMessage(\"maxLength\"), {maxLength: attachedControl.errors.maxlength.requiredLength}) }}</div>\n\t\t\t}\n\t\t\t@if (showDefaultError('pattern')) {\n\t\t\t\t<div>{{ getErrorMessage(\"pattern\") }}</div>\n\t\t\t}\n\t\t\t@if (showDefaultError('MatchPassword')) {\n\t\t\t\t<div>{{ getErrorMessage(\"matchPassword\") }}</div>\n\t\t\t}\n\t\t\t@if (showDefaultError('date')) {\n\t\t\t\t<div>{{ getErrorMessage(\"date\") }}</div>\n\t\t\t}\n\t\t\t@if (showDefaultError('message')) {\n\t\t\t\t<div>{{ attachedControl.errors.message.value }}</div>\n\t\t\t}\n\t\t\t@if (showDefaultError('formLevel')) {\n\t\t\t\t<div>{{ getErrorMessage(\"formLevel\") }}</div>\n\t\t\t}\n\t\t\t<div [ngTemplateOutlet]=\"getCustomErrorHandler(getErrorToShow())?.templateRef\"></div>\n\t\t</div>\n\t}\n</ng-template>\n\n<ng-template #tailTpl>\n\t<div class=\"errorTooltipContainer\" [ngClass]=\"{alwaysOpen: shouldShowErrorTooltipOpened()}\">\n\t\t@if (hasHoverableErrorTooltip() || shouldShowErrorTooltipOpened()) {\n\t\t\t<div class=\"errorTooltipTriangle\"></div>\n\t\t\t<div class=\"errorTooltipTriangleWhite\"></div>\n\t\t\t<div class=\"absoluteAnchor\" #absoluteAnchor></div>\n\t\t\t<div class=\"fixedAnchor\" #fixedAnchor [onRenderFn]=\"setErrorTooltipOffset\"></div>\n\t\t\t<div class=\"fixedWrapper\" #fixedWrapper>\n\t\t\t\t<div class=\"errorTooltip\" [ngClass]=\"{noPointerEvents: !shouldShowErrorTooltipOpened()}\">\n\t\t\t\t\t<div class=\"errorTooltipInner\">\n\t\t\t\t\t\t<i class=\"closeBtn\" (click)=\"closePopup();\">\u00D7</i>\n\t\t\t\t\t\t@if (getErrorToShow()) {\n\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (!getErrorToShow() && shouldShowWarningPopup()) {\n\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t@if (getWarningToShowIsTemplateRef()) {\n\t\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"getWarningToShowAsTemplateRef()\"></ng-container>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@if (!getWarningToShowIsTemplateRef()) {\n\t\t\t\t\t\t\t\t\t<span>{{ getWarningToShow() }}</span>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t}\n\t\t@if (getErrorToShow()) {\n\t\t\t<klp-form-warning-icon variant=\"fill\" (click)=\"togglePopup()\"></klp-form-warning-icon>\n\t\t}\n\t\t@if (!getErrorToShow() && getWarningToShow()) {\n\t\t\t<klp-form-warning-icon variant=\"line\" (click)=\"togglePopup()\"></klp-form-warning-icon>\n\t\t}\n\t</div>\n</ng-template>\n\n<ng-template #subCaptionTpl>\n\t<div class=\"subCaption\"\n\t\t\t [class]=\"sizeClass\"\n\t>\n\t\t@if (subCaptionRef){\n\t\t\t<ng-container [ngTemplateOutlet]=\"subCaptionRef\"></ng-container>\n\t\t}\n\t</div>\n</ng-template>\n", styles: [":host{display:block;max-width:100%;max-height:100%}.componentContainer:not(.hasCaption) .captionInputAndError{display:block}.componentContainer:not(.hasCaption) .captionInputAndError .inputContainer{margin-top:0;padding-left:0;max-width:initial}.componentContainer:not(.hasCaption) .errorContainer{padding-left:0}.componentContainer:not(.hasSubCaption) .captionInputAndError .inputContainer{margin-bottom:0!important}.componentContainer.hasCaption .errorAboveInputContainer .spacer{display:block}.componentContainer.reverseOrder .captionInputAndError{flex-direction:row-reverse;justify-content:flex-end}.componentContainer.vertical .captionInputAndError{display:block}.componentContainer.vertical .captionInputAndError .inputContainer{margin-top:.25rem;margin-bottom:.25rem}.componentContainer.vertical .captionInputAndError .errorContainer{margin-left:0}.componentContainer.topAlignment .captionInputAndError{align-items:flex-start}.componentContainer.horizontal.hasCaption .inputContainer,.componentContainer.horizontal.hasCaption .errorAboveInputContainer .errorContainer{padding-left:1rem}.componentContainer.horizontal.hasCaption.d40-60 .errorAboveInputContainer .spacer{flex:0 1 40%}.componentContainer.horizontal.hasCaption.d40-60 .errorAboveInputContainer .errorContainer{flex:60 1 0px}.componentContainer.horizontal.hasCaption.d40-60 .caption{max-width:40%;flex:40 1 0px}.componentContainer.horizontal.hasCaption.d40-60 .inputContainer{max-width:60%;flex:60 1 0px}.componentContainer.horizontal.hasCaption.d34-66 .errorAboveInputContainer .spacer{flex:0 1 34%}.componentContainer.horizontal.hasCaption.d34-66 .errorAboveInputContainer .errorContainer{flex:66 1 0px}.componentContainer.horizontal.hasCaption.d34-66 .caption{max-width:34%;flex:34 1 0px}.componentContainer.horizontal.hasCaption.d34-66 .inputContainer{max-width:66%;flex:66 1 0px}.componentContainer.horizontal.hasCaption.d30-70 .errorAboveInputContainer .spacer{flex:0 1 30%}.componentContainer.horizontal.hasCaption.d30-70 .errorAboveInputContainer .errorContainer{flex:70 1 0px}.componentContainer.horizontal.hasCaption.d30-70 .caption{max-width:30%;flex:30 1 0px}.componentContainer.horizontal.hasCaption.d30-70 .inputContainer{max-width:70%;flex:70 1 0px}.componentContainer.fixedInputWidth .caption{flex:1 1 0px;overflow:hidden}.componentContainer.fixedInputWidth .inputContainer,.componentContainer.fixedCaptionWidth .caption{flex:0 0 auto}.componentContainer.fixedCaptionWidth .inputContainer{flex:1 1 0px;overflow:hidden}.captionInputAndError{display:flex;align-items:center}.errorAboveInputContainer{display:flex}.errorAboveInputContainer .spacer{display:none}.captionDummyForSpaceCalculation .caption.withErrorRightOfCaption{height:0px;overflow:hidden}.captionDummyForSpaceCalculation .caption.withErrorRightOfCaption .rightOfCaptionError{display:block}.captionRefContainer,.captionEndRefContainer{display:flex}.caption{color:#101828;font-feature-settings:\"cv05\" on;font-size:16px;font-style:normal;font-weight:500;line-height:24px;letter-spacing:.16px}.caption.input-sm{font-size:14px;line-height:20px;letter-spacing:.14px}.caption.disabled{color:#98a2b3}.caption{flex:0 0 auto}.caption.percentageSpacing{max-width:40%;flex:40 1 0px}.caption.percentageSpacing.d30-70{max-width:30%;flex:30 1 0px}.caption.percentageSpacing.d34-66{max-width:34%;flex:34 1 0px}.caption.withErrorRightOfCaption{display:flex;justify-content:space-between;gap:1rem}.caption.withErrorRightOfCaption .captionText{flex:1 2 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.caption.withErrorRightOfCaption .rightOfCaptionError{display:none}.caption.withErrorRightOfCaption .rightOfCaptionError.errorFullyVisible{display:block}.caption.withErrorRightOfCaption .rightOfCaptionError.errorMessageHasMaxWidth{max-width:40%}.caption.withErrorRightOfCaption .rightOfCaptionError{font-weight:400;overflow:hidden;flex:1 0 auto;text-align:right}.caption.withErrorRightOfCaption .rightOfCaptionError ::ng-deep *{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.inputContainer{position:relative;flex:1}.inputContainer .errorTooltipContainer{position:relative}.inputContainer .errorTooltipContainer.alwaysOpen .errorTooltipTriangle,.inputContainer .errorTooltipContainer.alwaysOpen .errorTooltipTriangleWhite,.inputContainer .errorTooltipContainer.alwaysOpen .errorTooltip{display:flex}.inputContainer .errorTooltipContainer.alwaysOpen .closeBtn{display:block}.inputContainer .errorTooltipContainer.alwaysOpen .errorTooltipInner{padding-right:1.4rem}.inputContainer .errorTooltipContainer klp-form-warning-icon{cursor:pointer}.inputContainer .errorTooltipContainer .absoluteAnchor{position:absolute}.inputContainer .errorTooltipContainer .fixedAnchor,.inputContainer .errorTooltipContainer .fixedWrapper{position:fixed}.inputContainer .errorTooltipTriangle{display:none;z-index:1;position:absolute;right:0;transform:translate(-.15rem,calc(-100% - .1rem)) scaleX(.8);width:0px;height:0px;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid rgba(0,0,0,.13)}.inputContainer .errorTooltipTriangleWhite{display:none;z-index:3;position:absolute;right:0;transform:translate(-.15rem,calc(-100% - .1rem - 2px)) scaleX(.8);width:0px;height:0px;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid white}.inputContainer .errorTooltip{display:none;justify-content:flex-end}.inputContainer .errorTooltip.noPointerEvents{pointer-events:none}.inputContainer .errorTooltip{position:absolute;top:-.6rem;right:-1.875rem;transform:translateY(-100%);width:20rem}.inputContainer .errorTooltip .closeBtn{display:none;position:absolute;top:.2rem;right:.2rem;padding:.2rem .4rem;cursor:pointer;color:#667085;font-size:1rem}.inputContainer .errorTooltip .closeBtn:hover{color:#475467}.inputContainer .errorTooltipInner{background:#fff;padding:.4rem .6rem;border-radius:.4rem;border:1px solid rgba(0,0,0,.13);box-shadow:#00000021 2px 3px 10px}.inputContainer:hover .errorTooltipContainer .errorTooltip,.inputContainer:hover .errorTooltipContainer .errorTooltipTriangle,.inputContainer:hover .errorTooltipContainer .errorTooltipTriangleWhite{display:flex}.errorContainer{color:#ff8000}\n"] }]
946
978
  }], ctorParameters: () => [{ type: FormComponent, decorators: [{
947
979
  type: Optional
948
980
  }] }, { type: undefined, decorators: [{
@@ -966,6 +998,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
966
998
  type: Input
967
999
  }], errorMessageHasMaxWidth: [{
968
1000
  type: Input
1001
+ }], size: [{
1002
+ type: Input
969
1003
  }], internalComponentRef: [{
970
1004
  type: ViewChild,
971
1005
  args: ['internalComponentRef']
@@ -1013,7 +1047,9 @@ class ValueAccessorBase {
1013
1047
  this.formControlName = null;
1014
1048
  this.formControl = null;
1015
1049
  this.inErrorState = false;
1050
+ this.size = null;
1016
1051
  this.onTouch = new EventEmitter();
1052
+ this.injectedSize = inject(KLP_FORM_DEFAULT_SIZE, { optional: true });
1017
1053
  this.focus = () => {
1018
1054
  if (isValueSet(this.nativeInputRef?.nativeElement)) {
1019
1055
  this.nativeInputRef?.nativeElement?.focus();
@@ -1049,6 +1085,15 @@ class ValueAccessorBase {
1049
1085
  });
1050
1086
  this.getImmutableValueFn = this.parent?.registerControl(this.attachedFormControl, this);
1051
1087
  }
1088
+ if (!this.size) {
1089
+ this.size = this.parent?.size ?? this.injectedSize ?? DefaultSize;
1090
+ }
1091
+ this.sizeClass = getSizeClass(this.size);
1092
+ }
1093
+ ngOnChanges(changes) {
1094
+ if (changes.size) {
1095
+ this.sizeClass = getSizeClass(this.size);
1096
+ }
1052
1097
  }
1053
1098
  getImmutableValue() {
1054
1099
  return this.getImmutableValueFn?.();
@@ -1118,7 +1163,7 @@ class ValueAccessorBase {
1118
1163
  return false;
1119
1164
  }
1120
1165
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ValueAccessorBase, deps: [{ token: FormElementComponent, host: true, optional: true }, { token: i2.ControlContainer, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
1121
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: ValueAccessorBase, isStandalone: false, selector: "ng-component", inputs: { disabled: "disabled", innerValueChangeInterceptor: "innerValueChangeInterceptor", formControlName: "formControlName", formControl: "formControl", inErrorState: "inErrorState", getTailTplFn: "getTailTplFn" }, outputs: { onTouch: "onTouch" }, viewQueries: [{ propertyName: "nativeInputRef", first: true, predicate: ["nativeInputRef"], descendants: true }], ngImport: i0, template: '', isInline: true }); }
1166
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: ValueAccessorBase, isStandalone: false, selector: "ng-component", inputs: { disabled: "disabled", innerValueChangeInterceptor: "innerValueChangeInterceptor", formControlName: "formControlName", formControl: "formControl", inErrorState: "inErrorState", getTailTplFn: "getTailTplFn", size: "size" }, outputs: { onTouch: "onTouch" }, viewQueries: [{ propertyName: "nativeInputRef", first: true, predicate: ["nativeInputRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: '', isInline: true }); }
1122
1167
  }
1123
1168
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ValueAccessorBase, decorators: [{
1124
1169
  type: Component,
@@ -1147,6 +1192,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
1147
1192
  type: Input
1148
1193
  }], getTailTplFn: [{
1149
1194
  type: Input
1195
+ }], size: [{
1196
+ type: Input
1150
1197
  }], onTouch: [{
1151
1198
  type: Output
1152
1199
  }], nativeInputRef: [{
@@ -1158,14 +1205,27 @@ class LoadingIndicatorComponent {
1158
1205
  constructor() {
1159
1206
  this.variant = '3dots';
1160
1207
  this.size = 'medium';
1161
- this.formSize = 'medium';
1208
+ this.formSize = null;
1209
+ this.injectedSize = inject(KLP_FORM_DEFAULT_SIZE, { optional: true });
1210
+ this.parent = inject(FormElementComponent, { optional: true });
1211
+ }
1212
+ ngOnInit() {
1213
+ if (!this.size) {
1214
+ this.size = this.parent?.size ?? this.injectedSize ?? DefaultSize;
1215
+ }
1216
+ this.sizeClass = getSizeClass(this.formSize);
1217
+ }
1218
+ ngOnChanges(changes) {
1219
+ if (changes.formSize) {
1220
+ this.sizeClass = getSizeClass(this.formSize);
1221
+ }
1162
1222
  }
1163
1223
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LoadingIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1164
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: LoadingIndicatorComponent, isStandalone: false, selector: "klp-form-loading-indicator", inputs: { variant: "variant", size: "size", formSize: "formSize" }, ngImport: i0, template: "@if (variant === '3dots') {\n <div class=\"threeDots\" [ngClass]=\"[size]\">\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n </div>\n}\n\n@if (variant === 'spinner') {\n <div class=\"spinner\" [ngClass]=\"[size]\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"48\" height=\"48\" viewBox=\"0 0 48 48\">\n <circle cx=\"24\" cy=\"4\" r=\"4\" fill=\"currentColor\" />\n <circle cx=\"12.19\" cy=\"7.86\" r=\"3.7\" fill=\"currentColor\" />\n <circle cx=\"5.02\" cy=\"17.68\" r=\"3.4\" fill=\"currentColor\" />\n <circle cx=\"5.02\" cy=\"30.32\" r=\"3.1\" fill=\"currentColor\" />\n <circle cx=\"12.19\" cy=\"40.14\" r=\"2.8\" fill=\"currentColor\" />\n <circle cx=\"24\" cy=\"44\" r=\"2.5\" fill=\"currentColor\" />\n <circle cx=\"35.81\" cy=\"40.14\" r=\"2.2\" fill=\"currentColor\" />\n <circle cx=\"42.98\" cy=\"30.32\" r=\"1.9\" fill=\"currentColor\" />\n <circle cx=\"42.98\" cy=\"17.68\" r=\"1.6\" fill=\"currentColor\" />\n <circle cx=\"35.81\" cy=\"7.86\" r=\"1.3\" fill=\"currentColor\" />\n </svg>\n </div>\n}\n\n@if (variant === 'textInput') {\n <div class=\"textInput\" [ngClass]=\"{'input-sm': formSize === 'small', 'input-lg': formSize === 'large'}\">\n <input\n disabled\n type=\"text\"\n class=\"form-control\"\n placeholder=\"Loading...\"\n >\n </div>\n}\n\n@if (variant === 'picker') {\n <div class=\"picker\" [ngClass]=\"{'input-sm': formSize === 'small', 'input-lg': formSize === 'large'}\">\n <input\n disabled\n type=\"text\"\n class=\"form-control\"\n placeholder=\"Loading...\"\n >\n <div class=\"chevronDown\"></div>\n </div>\n}\n", styles: [":host{display:block}.threeDots{display:block;position:relative}.threeDots.tiny{--base: 4px}.threeDots.small{--base: 8px}.threeDots.medium{--base: 12px}.threeDots.large{--base: 18px}.threeDots.huge{--base: 26px}.threeDots{width:calc(4 * var(--base));height:var(--base)}.threeDots div{position:absolute;top:0;width:var(--base);height:var(--base);border-radius:50%;background:#00ac42;animation-timing-function:cubic-bezier(0,1,1,0)}.threeDots div:nth-child(1){animation:lds-ellipsis1 .6s infinite}.threeDots div:nth-child(2){animation:lds-ellipsis2 .6s infinite}.threeDots div:nth-child(3){left:calc(1.5 * var(--base));animation:lds-ellipsis2 .6s infinite}.threeDots div:nth-child(4){left:calc(3 * var(--base));animation:lds-ellipsis3 .6s infinite}@keyframes lds-ellipsis1{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes lds-ellipsis3{0%{transform:scale(1)}to{transform:scale(0)}}@keyframes lds-ellipsis2{0%{transform:translate(0)}to{transform:translate(150%)}}.spinner.tiny svg{width:1rem;height:1rem}.spinner.small svg{width:1.6rem;height:1.6rem}.spinner.medium svg{width:2.5rem;height:2.5rem}.spinner.large svg{width:3rem;height:3rem}.spinner.huge svg{width:4rem;height:4rem}.spinner svg{-webkit-transition-property:-webkit-transform;-webkit-transition-duration:1.2s;-webkit-animation-name:rotate;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;-moz-transition-property:-moz-transform;-moz-animation-name:rotate;-moz-animation-duration:1.2s;-moz-animation-iteration-count:infinite;-moz-animation-timing-function:linear;transition-property:transform;animation-name:rotate;animation-duration:1.2s;animation-iteration-count:infinite;animation-timing-function:linear}@-webkit-keyframes rotate{0%{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(360deg)}}@-moz-keyframes rotate{0%{-moz-transform:rotate(0deg)}to{-moz-transform:rotate(360deg)}}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.textInput::-webkit-input-placeholder{color:#98a2b3}.textInput:-moz-placeholder{color:#98a2b3}.textInput::-moz-placeholder{color:#98a2b3}.textInput:-ms-input-placeholder{color:#98a2b3}.textInput{display:block;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:none;height:40px;width:100%;padding:.5rem .75rem;font-size:16px;font-weight:400;line-height:24px;color:#101828}.textInput:focus,.textInput:focus-within{outline:1px solid #00AC42;box-shadow:none;border-color:#00ac42}.textInput.input-sm{padding:.375rem .5rem;font-size:14px;line-height:20px;height:32px}.textInput.input-sm.grow{min-height:32px}.textInput.input-lg{padding:.625rem .75rem;height:44px}.textInput.input-lg.grow{min-height:44px}.textInput.grow{height:auto;min-height:40px}.textInput:hover{border-color:#98a2b3}.textInput.error{border-color:#dc3545;background-color:#f6cdd1}.textInput.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}.textInput:placeholder-shown{text-overflow:ellipsis}.textInput.disabled{background-color:#f2f4f7;border-color:#f2f4f7;cursor:not-allowed}.textInput input{outline:none;border:none;flex:1 1 auto;min-width:0;width:auto;height:100%;font-size:inherit;line-height:inherit;color:inherit;background:none}.textInput input.disabled{cursor:not-allowed}.textInput input :disabled{cursor:not-allowed}.picker::-webkit-input-placeholder{color:#98a2b3}.picker:-moz-placeholder{color:#98a2b3}.picker::-moz-placeholder{color:#98a2b3}.picker:-ms-input-placeholder{color:#98a2b3}.picker{display:block;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:none;height:40px;width:100%;padding:.5rem .75rem;font-size:16px;font-weight:400;line-height:24px;color:#101828}.picker:focus,.picker:focus-within{outline:1px solid #00AC42;box-shadow:none;border-color:#00ac42}.picker.input-sm{padding:.375rem .5rem;font-size:14px;line-height:20px;height:32px}.picker.input-sm.grow{min-height:32px}.picker.input-lg{padding:.625rem .75rem;height:44px}.picker.input-lg.grow{min-height:44px}.picker.grow{height:auto;min-height:40px}.picker:hover{border-color:#98a2b3}.picker.error{border-color:#dc3545;background-color:#f6cdd1}.picker.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}.picker:placeholder-shown{text-overflow:ellipsis}.picker.disabled{background-color:#f2f4f7;border-color:#f2f4f7;cursor:not-allowed}.picker{position:relative;display:flex;align-items:center;flex-direction:row;justify-content:space-between}.picker input{outline:none;border:none;flex:1 1 auto;min-width:0;width:auto;height:100%;font-size:inherit;line-height:inherit;color:inherit;background:none}.picker input.disabled{cursor:not-allowed}.picker input :disabled{cursor:not-allowed}.picker .chevronDown{border-top:5px solid #101828;border-left:5px solid transparent;border-right:5px solid transparent}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
1224
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: LoadingIndicatorComponent, isStandalone: false, selector: "klp-form-loading-indicator", inputs: { variant: "variant", size: "size", formSize: "formSize" }, usesOnChanges: true, ngImport: i0, template: "@if (variant === '3dots') {\n <div class=\"threeDots\" [ngClass]=\"[size]\">\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n </div>\n}\n\n@if (variant === 'spinner') {\n <div class=\"spinner\" [ngClass]=\"[size]\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"48\" height=\"48\" viewBox=\"0 0 48 48\">\n <circle cx=\"24\" cy=\"4\" r=\"4\" fill=\"currentColor\" />\n <circle cx=\"12.19\" cy=\"7.86\" r=\"3.7\" fill=\"currentColor\" />\n <circle cx=\"5.02\" cy=\"17.68\" r=\"3.4\" fill=\"currentColor\" />\n <circle cx=\"5.02\" cy=\"30.32\" r=\"3.1\" fill=\"currentColor\" />\n <circle cx=\"12.19\" cy=\"40.14\" r=\"2.8\" fill=\"currentColor\" />\n <circle cx=\"24\" cy=\"44\" r=\"2.5\" fill=\"currentColor\" />\n <circle cx=\"35.81\" cy=\"40.14\" r=\"2.2\" fill=\"currentColor\" />\n <circle cx=\"42.98\" cy=\"30.32\" r=\"1.9\" fill=\"currentColor\" />\n <circle cx=\"42.98\" cy=\"17.68\" r=\"1.6\" fill=\"currentColor\" />\n <circle cx=\"35.81\" cy=\"7.86\" r=\"1.3\" fill=\"currentColor\" />\n </svg>\n </div>\n}\n\n@if (variant === 'textInput') {\n <div class=\"textInput\" [class]=\"sizeClass\">\n <input\n disabled\n type=\"text\"\n class=\"form-control\"\n placeholder=\"Loading...\"\n >\n </div>\n}\n\n@if (variant === 'picker') {\n <div class=\"picker\" [class]=\"sizeClass\">\n <input\n disabled\n type=\"text\"\n class=\"form-control\"\n placeholder=\"Loading...\"\n >\n <div class=\"chevronDown\"></div>\n </div>\n}\n", styles: [":host{display:block}.threeDots{display:block;position:relative}.threeDots.tiny{--base: 4px}.threeDots.small{--base: 8px}.threeDots.medium{--base: 12px}.threeDots.large{--base: 18px}.threeDots.huge{--base: 26px}.threeDots{width:calc(4 * var(--base));height:var(--base)}.threeDots div{position:absolute;top:0;width:var(--base);height:var(--base);border-radius:50%;background:#00ac42;animation-timing-function:cubic-bezier(0,1,1,0)}.threeDots div:nth-child(1){animation:lds-ellipsis1 .6s infinite}.threeDots div:nth-child(2){animation:lds-ellipsis2 .6s infinite}.threeDots div:nth-child(3){left:calc(1.5 * var(--base));animation:lds-ellipsis2 .6s infinite}.threeDots div:nth-child(4){left:calc(3 * var(--base));animation:lds-ellipsis3 .6s infinite}@keyframes lds-ellipsis1{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes lds-ellipsis3{0%{transform:scale(1)}to{transform:scale(0)}}@keyframes lds-ellipsis2{0%{transform:translate(0)}to{transform:translate(150%)}}.spinner.tiny svg{width:1rem;height:1rem}.spinner.small svg{width:1.6rem;height:1.6rem}.spinner.medium svg{width:2.5rem;height:2.5rem}.spinner.large svg{width:3rem;height:3rem}.spinner.huge svg{width:4rem;height:4rem}.spinner svg{-webkit-transition-property:-webkit-transform;-webkit-transition-duration:1.2s;-webkit-animation-name:rotate;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;-moz-transition-property:-moz-transform;-moz-animation-name:rotate;-moz-animation-duration:1.2s;-moz-animation-iteration-count:infinite;-moz-animation-timing-function:linear;transition-property:transform;animation-name:rotate;animation-duration:1.2s;animation-iteration-count:infinite;animation-timing-function:linear}@-webkit-keyframes rotate{0%{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(360deg)}}@-moz-keyframes rotate{0%{-moz-transform:rotate(0deg)}to{-moz-transform:rotate(360deg)}}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.textInput::-webkit-input-placeholder{color:#98a2b3}.textInput:-moz-placeholder{color:#98a2b3}.textInput::-moz-placeholder{color:#98a2b3}.textInput:-ms-input-placeholder{color:#98a2b3}.textInput{display:block;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:none;height:40px;width:100%;padding:.5rem .75rem;font-size:16px;font-weight:400;line-height:24px;color:#101828}.textInput:hover{border:1px solid #98A2B3}.textInput.showErrors{border:1px solid #ff8000;outline:.5px solid #ff8000}.textInput:focus,.textInput:focus-within{border:1px solid #00AC42;outline:1px solid #00AC42}.textInput.disabled{border:1px solid #F2F4F7;background-color:#f2f4f7;cursor:not-allowed}.textInput.input-sm{padding:.375rem .5rem;font-size:14px;line-height:20px;height:32px}.textInput.input-sm.grow{min-height:32px}.textInput.input-lg{padding:.625rem .75rem;height:44px}.textInput.input-lg.grow{min-height:44px}.textInput.grow{height:auto;min-height:40px}.textInput:placeholder-shown{text-overflow:ellipsis}.textInput input{outline:none;border:none;flex:1 1 auto;min-width:0;width:100%;height:100%;font-size:inherit;line-height:inherit;color:inherit;background:none}.textInput input.disabled{cursor:not-allowed}.textInput input :disabled{cursor:not-allowed}.picker::-webkit-input-placeholder{color:#98a2b3}.picker:-moz-placeholder{color:#98a2b3}.picker::-moz-placeholder{color:#98a2b3}.picker:-ms-input-placeholder{color:#98a2b3}.picker{display:block;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:none;height:40px;width:100%;padding:.5rem .75rem;font-size:16px;font-weight:400;line-height:24px;color:#101828}.picker:hover{border:1px solid #98A2B3}.picker.showErrors{border:1px solid #ff8000;outline:.5px solid #ff8000}.picker:focus,.picker:focus-within{border:1px solid #00AC42;outline:1px solid #00AC42}.picker.disabled{border:1px solid #F2F4F7;background-color:#f2f4f7;cursor:not-allowed}.picker.input-sm{padding:.375rem .5rem;font-size:14px;line-height:20px;height:32px}.picker.input-sm.grow{min-height:32px}.picker.input-lg{padding:.625rem .75rem;height:44px}.picker.input-lg.grow{min-height:44px}.picker.grow{height:auto;min-height:40px}.picker:placeholder-shown{text-overflow:ellipsis}.picker{position:relative;display:flex;align-items:center;flex-direction:row;justify-content:space-between}.picker input{outline:none;border:none;flex:1 1 auto;min-width:0;width:100%;height:100%;font-size:inherit;line-height:inherit;color:inherit;background:none}.picker input.disabled{cursor:not-allowed}.picker input :disabled{cursor:not-allowed}.picker .chevronDown{border-top:5px solid #101828;border-left:5px solid transparent;border-right:5px solid transparent}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
1165
1225
  }
1166
1226
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LoadingIndicatorComponent, decorators: [{
1167
1227
  type: Component,
1168
- args: [{ selector: 'klp-form-loading-indicator', standalone: false, template: "@if (variant === '3dots') {\n <div class=\"threeDots\" [ngClass]=\"[size]\">\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n </div>\n}\n\n@if (variant === 'spinner') {\n <div class=\"spinner\" [ngClass]=\"[size]\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"48\" height=\"48\" viewBox=\"0 0 48 48\">\n <circle cx=\"24\" cy=\"4\" r=\"4\" fill=\"currentColor\" />\n <circle cx=\"12.19\" cy=\"7.86\" r=\"3.7\" fill=\"currentColor\" />\n <circle cx=\"5.02\" cy=\"17.68\" r=\"3.4\" fill=\"currentColor\" />\n <circle cx=\"5.02\" cy=\"30.32\" r=\"3.1\" fill=\"currentColor\" />\n <circle cx=\"12.19\" cy=\"40.14\" r=\"2.8\" fill=\"currentColor\" />\n <circle cx=\"24\" cy=\"44\" r=\"2.5\" fill=\"currentColor\" />\n <circle cx=\"35.81\" cy=\"40.14\" r=\"2.2\" fill=\"currentColor\" />\n <circle cx=\"42.98\" cy=\"30.32\" r=\"1.9\" fill=\"currentColor\" />\n <circle cx=\"42.98\" cy=\"17.68\" r=\"1.6\" fill=\"currentColor\" />\n <circle cx=\"35.81\" cy=\"7.86\" r=\"1.3\" fill=\"currentColor\" />\n </svg>\n </div>\n}\n\n@if (variant === 'textInput') {\n <div class=\"textInput\" [ngClass]=\"{'input-sm': formSize === 'small', 'input-lg': formSize === 'large'}\">\n <input\n disabled\n type=\"text\"\n class=\"form-control\"\n placeholder=\"Loading...\"\n >\n </div>\n}\n\n@if (variant === 'picker') {\n <div class=\"picker\" [ngClass]=\"{'input-sm': formSize === 'small', 'input-lg': formSize === 'large'}\">\n <input\n disabled\n type=\"text\"\n class=\"form-control\"\n placeholder=\"Loading...\"\n >\n <div class=\"chevronDown\"></div>\n </div>\n}\n", styles: [":host{display:block}.threeDots{display:block;position:relative}.threeDots.tiny{--base: 4px}.threeDots.small{--base: 8px}.threeDots.medium{--base: 12px}.threeDots.large{--base: 18px}.threeDots.huge{--base: 26px}.threeDots{width:calc(4 * var(--base));height:var(--base)}.threeDots div{position:absolute;top:0;width:var(--base);height:var(--base);border-radius:50%;background:#00ac42;animation-timing-function:cubic-bezier(0,1,1,0)}.threeDots div:nth-child(1){animation:lds-ellipsis1 .6s infinite}.threeDots div:nth-child(2){animation:lds-ellipsis2 .6s infinite}.threeDots div:nth-child(3){left:calc(1.5 * var(--base));animation:lds-ellipsis2 .6s infinite}.threeDots div:nth-child(4){left:calc(3 * var(--base));animation:lds-ellipsis3 .6s infinite}@keyframes lds-ellipsis1{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes lds-ellipsis3{0%{transform:scale(1)}to{transform:scale(0)}}@keyframes lds-ellipsis2{0%{transform:translate(0)}to{transform:translate(150%)}}.spinner.tiny svg{width:1rem;height:1rem}.spinner.small svg{width:1.6rem;height:1.6rem}.spinner.medium svg{width:2.5rem;height:2.5rem}.spinner.large svg{width:3rem;height:3rem}.spinner.huge svg{width:4rem;height:4rem}.spinner svg{-webkit-transition-property:-webkit-transform;-webkit-transition-duration:1.2s;-webkit-animation-name:rotate;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;-moz-transition-property:-moz-transform;-moz-animation-name:rotate;-moz-animation-duration:1.2s;-moz-animation-iteration-count:infinite;-moz-animation-timing-function:linear;transition-property:transform;animation-name:rotate;animation-duration:1.2s;animation-iteration-count:infinite;animation-timing-function:linear}@-webkit-keyframes rotate{0%{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(360deg)}}@-moz-keyframes rotate{0%{-moz-transform:rotate(0deg)}to{-moz-transform:rotate(360deg)}}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.textInput::-webkit-input-placeholder{color:#98a2b3}.textInput:-moz-placeholder{color:#98a2b3}.textInput::-moz-placeholder{color:#98a2b3}.textInput:-ms-input-placeholder{color:#98a2b3}.textInput{display:block;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:none;height:40px;width:100%;padding:.5rem .75rem;font-size:16px;font-weight:400;line-height:24px;color:#101828}.textInput:focus,.textInput:focus-within{outline:1px solid #00AC42;box-shadow:none;border-color:#00ac42}.textInput.input-sm{padding:.375rem .5rem;font-size:14px;line-height:20px;height:32px}.textInput.input-sm.grow{min-height:32px}.textInput.input-lg{padding:.625rem .75rem;height:44px}.textInput.input-lg.grow{min-height:44px}.textInput.grow{height:auto;min-height:40px}.textInput:hover{border-color:#98a2b3}.textInput.error{border-color:#dc3545;background-color:#f6cdd1}.textInput.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}.textInput:placeholder-shown{text-overflow:ellipsis}.textInput.disabled{background-color:#f2f4f7;border-color:#f2f4f7;cursor:not-allowed}.textInput input{outline:none;border:none;flex:1 1 auto;min-width:0;width:auto;height:100%;font-size:inherit;line-height:inherit;color:inherit;background:none}.textInput input.disabled{cursor:not-allowed}.textInput input :disabled{cursor:not-allowed}.picker::-webkit-input-placeholder{color:#98a2b3}.picker:-moz-placeholder{color:#98a2b3}.picker::-moz-placeholder{color:#98a2b3}.picker:-ms-input-placeholder{color:#98a2b3}.picker{display:block;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:none;height:40px;width:100%;padding:.5rem .75rem;font-size:16px;font-weight:400;line-height:24px;color:#101828}.picker:focus,.picker:focus-within{outline:1px solid #00AC42;box-shadow:none;border-color:#00ac42}.picker.input-sm{padding:.375rem .5rem;font-size:14px;line-height:20px;height:32px}.picker.input-sm.grow{min-height:32px}.picker.input-lg{padding:.625rem .75rem;height:44px}.picker.input-lg.grow{min-height:44px}.picker.grow{height:auto;min-height:40px}.picker:hover{border-color:#98a2b3}.picker.error{border-color:#dc3545;background-color:#f6cdd1}.picker.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}.picker:placeholder-shown{text-overflow:ellipsis}.picker.disabled{background-color:#f2f4f7;border-color:#f2f4f7;cursor:not-allowed}.picker{position:relative;display:flex;align-items:center;flex-direction:row;justify-content:space-between}.picker input{outline:none;border:none;flex:1 1 auto;min-width:0;width:auto;height:100%;font-size:inherit;line-height:inherit;color:inherit;background:none}.picker input.disabled{cursor:not-allowed}.picker input :disabled{cursor:not-allowed}.picker .chevronDown{border-top:5px solid #101828;border-left:5px solid transparent;border-right:5px solid transparent}\n"] }]
1228
+ args: [{ selector: 'klp-form-loading-indicator', standalone: false, template: "@if (variant === '3dots') {\n <div class=\"threeDots\" [ngClass]=\"[size]\">\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n </div>\n}\n\n@if (variant === 'spinner') {\n <div class=\"spinner\" [ngClass]=\"[size]\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"48\" height=\"48\" viewBox=\"0 0 48 48\">\n <circle cx=\"24\" cy=\"4\" r=\"4\" fill=\"currentColor\" />\n <circle cx=\"12.19\" cy=\"7.86\" r=\"3.7\" fill=\"currentColor\" />\n <circle cx=\"5.02\" cy=\"17.68\" r=\"3.4\" fill=\"currentColor\" />\n <circle cx=\"5.02\" cy=\"30.32\" r=\"3.1\" fill=\"currentColor\" />\n <circle cx=\"12.19\" cy=\"40.14\" r=\"2.8\" fill=\"currentColor\" />\n <circle cx=\"24\" cy=\"44\" r=\"2.5\" fill=\"currentColor\" />\n <circle cx=\"35.81\" cy=\"40.14\" r=\"2.2\" fill=\"currentColor\" />\n <circle cx=\"42.98\" cy=\"30.32\" r=\"1.9\" fill=\"currentColor\" />\n <circle cx=\"42.98\" cy=\"17.68\" r=\"1.6\" fill=\"currentColor\" />\n <circle cx=\"35.81\" cy=\"7.86\" r=\"1.3\" fill=\"currentColor\" />\n </svg>\n </div>\n}\n\n@if (variant === 'textInput') {\n <div class=\"textInput\" [class]=\"sizeClass\">\n <input\n disabled\n type=\"text\"\n class=\"form-control\"\n placeholder=\"Loading...\"\n >\n </div>\n}\n\n@if (variant === 'picker') {\n <div class=\"picker\" [class]=\"sizeClass\">\n <input\n disabled\n type=\"text\"\n class=\"form-control\"\n placeholder=\"Loading...\"\n >\n <div class=\"chevronDown\"></div>\n </div>\n}\n", styles: [":host{display:block}.threeDots{display:block;position:relative}.threeDots.tiny{--base: 4px}.threeDots.small{--base: 8px}.threeDots.medium{--base: 12px}.threeDots.large{--base: 18px}.threeDots.huge{--base: 26px}.threeDots{width:calc(4 * var(--base));height:var(--base)}.threeDots div{position:absolute;top:0;width:var(--base);height:var(--base);border-radius:50%;background:#00ac42;animation-timing-function:cubic-bezier(0,1,1,0)}.threeDots div:nth-child(1){animation:lds-ellipsis1 .6s infinite}.threeDots div:nth-child(2){animation:lds-ellipsis2 .6s infinite}.threeDots div:nth-child(3){left:calc(1.5 * var(--base));animation:lds-ellipsis2 .6s infinite}.threeDots div:nth-child(4){left:calc(3 * var(--base));animation:lds-ellipsis3 .6s infinite}@keyframes lds-ellipsis1{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes lds-ellipsis3{0%{transform:scale(1)}to{transform:scale(0)}}@keyframes lds-ellipsis2{0%{transform:translate(0)}to{transform:translate(150%)}}.spinner.tiny svg{width:1rem;height:1rem}.spinner.small svg{width:1.6rem;height:1.6rem}.spinner.medium svg{width:2.5rem;height:2.5rem}.spinner.large svg{width:3rem;height:3rem}.spinner.huge svg{width:4rem;height:4rem}.spinner svg{-webkit-transition-property:-webkit-transform;-webkit-transition-duration:1.2s;-webkit-animation-name:rotate;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;-moz-transition-property:-moz-transform;-moz-animation-name:rotate;-moz-animation-duration:1.2s;-moz-animation-iteration-count:infinite;-moz-animation-timing-function:linear;transition-property:transform;animation-name:rotate;animation-duration:1.2s;animation-iteration-count:infinite;animation-timing-function:linear}@-webkit-keyframes rotate{0%{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(360deg)}}@-moz-keyframes rotate{0%{-moz-transform:rotate(0deg)}to{-moz-transform:rotate(360deg)}}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.textInput::-webkit-input-placeholder{color:#98a2b3}.textInput:-moz-placeholder{color:#98a2b3}.textInput::-moz-placeholder{color:#98a2b3}.textInput:-ms-input-placeholder{color:#98a2b3}.textInput{display:block;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:none;height:40px;width:100%;padding:.5rem .75rem;font-size:16px;font-weight:400;line-height:24px;color:#101828}.textInput:hover{border:1px solid #98A2B3}.textInput.showErrors{border:1px solid #ff8000;outline:.5px solid #ff8000}.textInput:focus,.textInput:focus-within{border:1px solid #00AC42;outline:1px solid #00AC42}.textInput.disabled{border:1px solid #F2F4F7;background-color:#f2f4f7;cursor:not-allowed}.textInput.input-sm{padding:.375rem .5rem;font-size:14px;line-height:20px;height:32px}.textInput.input-sm.grow{min-height:32px}.textInput.input-lg{padding:.625rem .75rem;height:44px}.textInput.input-lg.grow{min-height:44px}.textInput.grow{height:auto;min-height:40px}.textInput:placeholder-shown{text-overflow:ellipsis}.textInput input{outline:none;border:none;flex:1 1 auto;min-width:0;width:100%;height:100%;font-size:inherit;line-height:inherit;color:inherit;background:none}.textInput input.disabled{cursor:not-allowed}.textInput input :disabled{cursor:not-allowed}.picker::-webkit-input-placeholder{color:#98a2b3}.picker:-moz-placeholder{color:#98a2b3}.picker::-moz-placeholder{color:#98a2b3}.picker:-ms-input-placeholder{color:#98a2b3}.picker{display:block;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:none;height:40px;width:100%;padding:.5rem .75rem;font-size:16px;font-weight:400;line-height:24px;color:#101828}.picker:hover{border:1px solid #98A2B3}.picker.showErrors{border:1px solid #ff8000;outline:.5px solid #ff8000}.picker:focus,.picker:focus-within{border:1px solid #00AC42;outline:1px solid #00AC42}.picker.disabled{border:1px solid #F2F4F7;background-color:#f2f4f7;cursor:not-allowed}.picker.input-sm{padding:.375rem .5rem;font-size:14px;line-height:20px;height:32px}.picker.input-sm.grow{min-height:32px}.picker.input-lg{padding:.625rem .75rem;height:44px}.picker.input-lg.grow{min-height:44px}.picker.grow{height:auto;min-height:40px}.picker:placeholder-shown{text-overflow:ellipsis}.picker{position:relative;display:flex;align-items:center;flex-direction:row;justify-content:space-between}.picker input{outline:none;border:none;flex:1 1 auto;min-width:0;width:100%;height:100%;font-size:inherit;line-height:inherit;color:inherit;background:none}.picker input.disabled{cursor:not-allowed}.picker input :disabled{cursor:not-allowed}.picker .chevronDown{border-top:5px solid #101828;border-left:5px solid transparent;border-right:5px solid transparent}\n"] }]
1169
1229
  }], propDecorators: { variant: [{
1170
1230
  type: Input
1171
1231
  }], size: [{
@@ -1229,14 +1289,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
1229
1289
  class CheckboxComponent extends ValueAccessorBase {
1230
1290
  constructor() {
1231
1291
  super(...arguments);
1292
+ this.stringIsSetAndFilled = stringIsSetAndFilled;
1232
1293
  this.renderUndefinedAsIndeterminate = false;
1233
1294
  }
1295
+ ngOnInit() {
1296
+ super.ngOnInit();
1297
+ const sizes = this.calculateCheckboxSize();
1298
+ this.checkBoxSize = sizes.size;
1299
+ this.captionSpacing = sizes.captionSpacing;
1300
+ }
1301
+ ngOnChanges(changes) {
1302
+ super.ngOnChanges(changes);
1303
+ if (changes.size) {
1304
+ const sizes = this.calculateCheckboxSize();
1305
+ this.checkBoxSize = sizes.size;
1306
+ this.captionSpacing = sizes.captionSpacing;
1307
+ }
1308
+ }
1309
+ calculateCheckboxSize() {
1310
+ switch (this.size) {
1311
+ case 'small':
1312
+ return { size: 16, captionSpacing: 8 };
1313
+ case 'medium':
1314
+ return { size: 20, captionSpacing: 10 };
1315
+ case 'large':
1316
+ return { size: 24, captionSpacing: 12 };
1317
+ }
1318
+ }
1234
1319
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: CheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
1235
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: CheckboxComponent, isStandalone: false, selector: "klp-form-checkbox", inputs: { caption: "caption", description: "description", renderUndefinedAsIndeterminate: "renderUndefinedAsIndeterminate" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: CheckboxComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"componentContainer\">\n\t<label>\n\t\t<div class=\"checkboxContainer\">\n\t\t\t<div class=\"checkBoxVisualContainer\">\n\t\t\t\t<input type=\"checkbox\" class=\"checkboxNative\"\n\t\t\t\t\t\t\t [(ngModel)]=\"innerValue\"\n\t\t\t\t\t\t\t (change)=\"setInnerValueAndNotify(innerValue); touch()\"\n\t\t\t\t\t\t\t [disabled]=\"disabled\"\n\t\t\t\t\t\t\t #nativeInputRef\n\t\t\t\t/>\n\t\t\t\t<div class=\"checkboxVisual\"\n\t\t\t\t\t\t [ngClass]=\"{filledWithColor: innerValue === true || (renderUndefinedAsIndeterminate && innerValue === undefined)}\">\n\t\t\t\t\t@if (innerValue === true) {\n\t\t\t\t\t\t<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"9\" viewBox=\"0 0 12 9\" fill=\"none\">\n\t\t\t\t\t\t\t<path d=\"M10.3333 1L3.91667 7.41667L1 4.5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n\t\t\t\t\t\t\t\t\t\tstroke-linejoin=\"round\"/>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t}\n\t\t\t\t\t@if (renderUndefinedAsIndeterminate && innerValue === undefined) {\n\t\t\t\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"2\" viewBox=\"0 0 11 2\" fill=\"none\">\n\t\t\t\t\t\t\t<path d=\"M1 1H9.16667\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n\t\t\t\t\t\t\t\t\t\tstroke-linejoin=\"round\"/>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t\t@if (caption) {\n\t\t\t<div class=\"caption\">{{ caption }}</div>\n\t\t}\n\t</label>\n\t@if (description) {\n\t\t<div class=\"description\">{{ description }}</div>\n\t}\n</div>\n", styles: [":host{display:block}.componentContainer{display:grid;grid-template-columns:auto 1fr;align-items:start;margin-bottom:0}label{display:contents;align-items:center;justify-content:center;margin-bottom:0}.checkboxContainer{position:relative;grid-column:1;align-self:center}.checkBoxVisualContainer{padding:2px;margin-right:10px;border-radius:4px}.checkBoxVisualContainer:focus-within{outline:2px solid #00AC42}.caption{cursor:pointer;font-weight:400;color:#101828;grid-column:2}.description{font-weight:400;color:#667085;grid-column:2}.checkboxNative{position:absolute;opacity:0;top:0;left:0;width:20px;height:20px;cursor:pointer}.checkboxVisual{pointer-events:none;padding:.125rem;color:#fff;width:20px;height:20px;display:flex;align-items:center;justify-content:center;border:1px solid #D0D5DD;border-radius:4px;font-size:15px;font-weight:400;line-height:19px;vertical-align:bottom;text-align:center;background-color:#fff;cursor:pointer}.checkboxVisual.filledWithColor{background-color:#00ac42;border-color:#00ac42}.checkboxNative:hover+.checkboxVisual{border-color:#98a2b3}.checkboxNative:hover+.checkboxVisual.filledWithColor{border-color:#00ac42}.checkboxNative:hover[disabled]+.checkboxVisual{border-color:#eaecf0}.checkboxNative:hover[disabled]+.checkboxVisual.filledWithColor{border-color:#f2f4f7}.checkboxNative[disabled]{cursor:not-allowed}.checkboxNative[disabled]+.checkboxVisual{background-color:#f2f4f7;border-color:#eaecf0}.checkboxNative[disabled]+.checkboxVisual svg{color:#101828}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
1320
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: CheckboxComponent, isStandalone: false, selector: "klp-form-checkbox", inputs: { caption: "caption", description: "description", renderUndefinedAsIndeterminate: "renderUndefinedAsIndeterminate" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: CheckboxComponent, multi: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"componentContainer\" [style.--checkbox-size]=\"checkBoxSize + 'px'\" [style.--caption-spacing]=\"captionSpacing + 'px'\">\n\t<label>\n\t\t<div class=\"checkboxContainer\">\n\t\t\t<div class=\"checkBoxVisualContainer\" [class.hasMargin]=\"stringIsSetAndFilled(caption)\">\n\t\t\t\t<input type=\"checkbox\" class=\"checkboxNative\"\n\t\t\t\t\t\t\t [(ngModel)]=\"innerValue\"\n\t\t\t\t\t\t\t (change)=\"setInnerValueAndNotify(innerValue); touch()\"\n\t\t\t\t\t\t\t [disabled]=\"disabled\"\n\t\t\t\t\t\t\t #nativeInputRef\n\t\t\t\t/>\n\t\t\t\t<div class=\"checkboxVisual\"\n\t\t\t\t\t\t [ngClass]=\"{filledWithColor: innerValue === true || (renderUndefinedAsIndeterminate && innerValue === undefined)}\">\n\t\t\t\t\t@if (innerValue === true) {\n\t\t\t\t\t\t<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"9\" viewBox=\"0 0 12 9\" fill=\"none\">\n\t\t\t\t\t\t\t<path d=\"M10.3333 1L3.91667 7.41667L1 4.5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n\t\t\t\t\t\t\t\t\t\tstroke-linejoin=\"round\"/>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t}\n\t\t\t\t\t@if (renderUndefinedAsIndeterminate && innerValue === undefined) {\n\t\t\t\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"2\" viewBox=\"0 0 11 2\" fill=\"none\">\n\t\t\t\t\t\t\t<path d=\"M1 1H9.16667\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n\t\t\t\t\t\t\t\t\t\tstroke-linejoin=\"round\"/>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t\t@if (caption) {\n\t\t\t<div class=\"caption\" [class]=\"sizeClass\" [ngClass]=\"{disabled: disabled}\">{{ caption }}</div>\n\t\t}\n\t</label>\n\t@if (description) {\n\t\t<div class=\"description\" [class]=\"sizeClass\" [ngClass]=\"{disabled: disabled}\">{{ description }}</div>\n\t}\n</div>\n", styles: [":host{display:block}.componentContainer{display:grid;grid-template-columns:auto 1fr;align-items:start;margin-bottom:0}label{display:contents;align-items:center;justify-content:center;margin-bottom:0}.checkboxContainer{position:relative;grid-column:1;align-self:center}.checkBoxVisualContainer{padding:2px;border-radius:4px}.checkBoxVisualContainer:focus-within{outline:2px solid #00AC42}.checkBoxVisualContainer.hasMargin{margin-right:var(--caption-spacing)}.caption{color:#101828;font-feature-settings:\"cv05\" on;font-size:16px;font-style:normal;font-weight:500;line-height:24px;letter-spacing:.16px}.caption.input-sm{font-size:14px;line-height:20px;letter-spacing:.14px}.caption.disabled{color:#98a2b3}.caption{font-weight:400;cursor:pointer;grid-column:2}.caption.disabled{cursor:not-allowed}.description{color:#101828;font-feature-settings:\"cv05\" on;font-size:16px;font-style:normal;font-weight:500;line-height:24px;letter-spacing:.16px}.description.input-sm{font-size:14px;line-height:20px;letter-spacing:.14px}.description.disabled{color:#98a2b3}.description{font-weight:400;color:#667085;grid-column:2}.checkboxNative{position:absolute;opacity:0;top:0;left:0;width:var(--checkbox-size);height:var(--checkbox-size);cursor:pointer}.checkboxVisual{pointer-events:none;padding:.125rem;color:#fff;width:var(--checkbox-size);height:var(--checkbox-size);display:flex;align-items:center;justify-content:center;border:1px solid #D0D5DD;border-radius:4px;font-size:15px;font-weight:400;line-height:19px;vertical-align:bottom;text-align:center;background-color:#fff;cursor:pointer}.checkboxVisual.filledWithColor{background-color:#00ac42;border-color:#00ac42}.checkboxNative:hover+.checkboxVisual{border-color:#98a2b3}.checkboxNative:hover+.checkboxVisual.filledWithColor{border-color:#00ac42}.checkboxNative:hover[disabled]+.checkboxVisual{border-color:#eaecf0}.checkboxNative:hover[disabled]+.checkboxVisual.filledWithColor{border-color:#f2f4f7}.checkboxNative[disabled]{cursor:not-allowed}.checkboxNative[disabled]+.checkboxVisual{background-color:#f2f4f7;border-color:#eaecf0}.checkboxNative[disabled]+.checkboxVisual svg{color:#101828}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
1236
1321
  }
1237
1322
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: CheckboxComponent, decorators: [{
1238
1323
  type: Component,
1239
- args: [{ selector: 'klp-form-checkbox', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: CheckboxComponent, multi: true }], standalone: false, template: "<div class=\"componentContainer\">\n\t<label>\n\t\t<div class=\"checkboxContainer\">\n\t\t\t<div class=\"checkBoxVisualContainer\">\n\t\t\t\t<input type=\"checkbox\" class=\"checkboxNative\"\n\t\t\t\t\t\t\t [(ngModel)]=\"innerValue\"\n\t\t\t\t\t\t\t (change)=\"setInnerValueAndNotify(innerValue); touch()\"\n\t\t\t\t\t\t\t [disabled]=\"disabled\"\n\t\t\t\t\t\t\t #nativeInputRef\n\t\t\t\t/>\n\t\t\t\t<div class=\"checkboxVisual\"\n\t\t\t\t\t\t [ngClass]=\"{filledWithColor: innerValue === true || (renderUndefinedAsIndeterminate && innerValue === undefined)}\">\n\t\t\t\t\t@if (innerValue === true) {\n\t\t\t\t\t\t<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"9\" viewBox=\"0 0 12 9\" fill=\"none\">\n\t\t\t\t\t\t\t<path d=\"M10.3333 1L3.91667 7.41667L1 4.5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n\t\t\t\t\t\t\t\t\t\tstroke-linejoin=\"round\"/>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t}\n\t\t\t\t\t@if (renderUndefinedAsIndeterminate && innerValue === undefined) {\n\t\t\t\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"2\" viewBox=\"0 0 11 2\" fill=\"none\">\n\t\t\t\t\t\t\t<path d=\"M1 1H9.16667\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n\t\t\t\t\t\t\t\t\t\tstroke-linejoin=\"round\"/>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t\t@if (caption) {\n\t\t\t<div class=\"caption\">{{ caption }}</div>\n\t\t}\n\t</label>\n\t@if (description) {\n\t\t<div class=\"description\">{{ description }}</div>\n\t}\n</div>\n", styles: [":host{display:block}.componentContainer{display:grid;grid-template-columns:auto 1fr;align-items:start;margin-bottom:0}label{display:contents;align-items:center;justify-content:center;margin-bottom:0}.checkboxContainer{position:relative;grid-column:1;align-self:center}.checkBoxVisualContainer{padding:2px;margin-right:10px;border-radius:4px}.checkBoxVisualContainer:focus-within{outline:2px solid #00AC42}.caption{cursor:pointer;font-weight:400;color:#101828;grid-column:2}.description{font-weight:400;color:#667085;grid-column:2}.checkboxNative{position:absolute;opacity:0;top:0;left:0;width:20px;height:20px;cursor:pointer}.checkboxVisual{pointer-events:none;padding:.125rem;color:#fff;width:20px;height:20px;display:flex;align-items:center;justify-content:center;border:1px solid #D0D5DD;border-radius:4px;font-size:15px;font-weight:400;line-height:19px;vertical-align:bottom;text-align:center;background-color:#fff;cursor:pointer}.checkboxVisual.filledWithColor{background-color:#00ac42;border-color:#00ac42}.checkboxNative:hover+.checkboxVisual{border-color:#98a2b3}.checkboxNative:hover+.checkboxVisual.filledWithColor{border-color:#00ac42}.checkboxNative:hover[disabled]+.checkboxVisual{border-color:#eaecf0}.checkboxNative:hover[disabled]+.checkboxVisual.filledWithColor{border-color:#f2f4f7}.checkboxNative[disabled]{cursor:not-allowed}.checkboxNative[disabled]+.checkboxVisual{background-color:#f2f4f7;border-color:#eaecf0}.checkboxNative[disabled]+.checkboxVisual svg{color:#101828}\n"] }]
1324
+ args: [{ selector: 'klp-form-checkbox', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: CheckboxComponent, multi: true }], standalone: false, template: "<div class=\"componentContainer\" [style.--checkbox-size]=\"checkBoxSize + 'px'\" [style.--caption-spacing]=\"captionSpacing + 'px'\">\n\t<label>\n\t\t<div class=\"checkboxContainer\">\n\t\t\t<div class=\"checkBoxVisualContainer\" [class.hasMargin]=\"stringIsSetAndFilled(caption)\">\n\t\t\t\t<input type=\"checkbox\" class=\"checkboxNative\"\n\t\t\t\t\t\t\t [(ngModel)]=\"innerValue\"\n\t\t\t\t\t\t\t (change)=\"setInnerValueAndNotify(innerValue); touch()\"\n\t\t\t\t\t\t\t [disabled]=\"disabled\"\n\t\t\t\t\t\t\t #nativeInputRef\n\t\t\t\t/>\n\t\t\t\t<div class=\"checkboxVisual\"\n\t\t\t\t\t\t [ngClass]=\"{filledWithColor: innerValue === true || (renderUndefinedAsIndeterminate && innerValue === undefined)}\">\n\t\t\t\t\t@if (innerValue === true) {\n\t\t\t\t\t\t<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"9\" viewBox=\"0 0 12 9\" fill=\"none\">\n\t\t\t\t\t\t\t<path d=\"M10.3333 1L3.91667 7.41667L1 4.5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n\t\t\t\t\t\t\t\t\t\tstroke-linejoin=\"round\"/>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t}\n\t\t\t\t\t@if (renderUndefinedAsIndeterminate && innerValue === undefined) {\n\t\t\t\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"2\" viewBox=\"0 0 11 2\" fill=\"none\">\n\t\t\t\t\t\t\t<path d=\"M1 1H9.16667\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n\t\t\t\t\t\t\t\t\t\tstroke-linejoin=\"round\"/>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t\t@if (caption) {\n\t\t\t<div class=\"caption\" [class]=\"sizeClass\" [ngClass]=\"{disabled: disabled}\">{{ caption }}</div>\n\t\t}\n\t</label>\n\t@if (description) {\n\t\t<div class=\"description\" [class]=\"sizeClass\" [ngClass]=\"{disabled: disabled}\">{{ description }}</div>\n\t}\n</div>\n", styles: [":host{display:block}.componentContainer{display:grid;grid-template-columns:auto 1fr;align-items:start;margin-bottom:0}label{display:contents;align-items:center;justify-content:center;margin-bottom:0}.checkboxContainer{position:relative;grid-column:1;align-self:center}.checkBoxVisualContainer{padding:2px;border-radius:4px}.checkBoxVisualContainer:focus-within{outline:2px solid #00AC42}.checkBoxVisualContainer.hasMargin{margin-right:var(--caption-spacing)}.caption{color:#101828;font-feature-settings:\"cv05\" on;font-size:16px;font-style:normal;font-weight:500;line-height:24px;letter-spacing:.16px}.caption.input-sm{font-size:14px;line-height:20px;letter-spacing:.14px}.caption.disabled{color:#98a2b3}.caption{font-weight:400;cursor:pointer;grid-column:2}.caption.disabled{cursor:not-allowed}.description{color:#101828;font-feature-settings:\"cv05\" on;font-size:16px;font-style:normal;font-weight:500;line-height:24px;letter-spacing:.16px}.description.input-sm{font-size:14px;line-height:20px;letter-spacing:.14px}.description.disabled{color:#98a2b3}.description{font-weight:400;color:#667085;grid-column:2}.checkboxNative{position:absolute;opacity:0;top:0;left:0;width:var(--checkbox-size);height:var(--checkbox-size);cursor:pointer}.checkboxVisual{pointer-events:none;padding:.125rem;color:#fff;width:var(--checkbox-size);height:var(--checkbox-size);display:flex;align-items:center;justify-content:center;border:1px solid #D0D5DD;border-radius:4px;font-size:15px;font-weight:400;line-height:19px;vertical-align:bottom;text-align:center;background-color:#fff;cursor:pointer}.checkboxVisual.filledWithColor{background-color:#00ac42;border-color:#00ac42}.checkboxNative:hover+.checkboxVisual{border-color:#98a2b3}.checkboxNative:hover+.checkboxVisual.filledWithColor{border-color:#00ac42}.checkboxNative:hover[disabled]+.checkboxVisual{border-color:#eaecf0}.checkboxNative:hover[disabled]+.checkboxVisual.filledWithColor{border-color:#f2f4f7}.checkboxNative[disabled]{cursor:not-allowed}.checkboxNative[disabled]+.checkboxVisual{background-color:#f2f4f7;border-color:#eaecf0}.checkboxNative[disabled]+.checkboxVisual svg{color:#101828}\n"] }]
1240
1325
  }], propDecorators: { caption: [{
1241
1326
  type: Input
1242
1327
  }], description: [{
@@ -1251,11 +1336,11 @@ class EmailInputComponent extends ValueAccessorBase {
1251
1336
  this.placeholder = '';
1252
1337
  }
1253
1338
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: EmailInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
1254
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: EmailInputComponent, isStandalone: false, selector: "klp-form-email-input", inputs: { placeholder: "placeholder" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: EmailInputComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"componentContainer\">\n\t<input\n\t\ttype=\"email\"\n\t\tclass=\"form-control\"\n\t\t[(ngModel)]=\"innerValue\"\n\t\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t\t[placeholder]=\"placeholder\"\n\t\t(blur)=\"touch()\"\n\t\t[disabled]=\"disabled\"\n\t\t[ngClass]=\"{showErrors: isInErrorState()}\"\n\t\t#nativeInputRef\n\t/>\n\t<div class=\"tail\">\n\t\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n\t</div>\n</div>\n", styles: [":host{display:block}input{outline:none}input::-webkit-input-placeholder{color:#98a2b3}input:-moz-placeholder{color:#98a2b3}input::-moz-placeholder{color:#98a2b3}input:-ms-input-placeholder{color:#98a2b3}input{display:block;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:none;height:40px;width:100%;padding:.5rem .75rem;font-size:16px;font-weight:400;line-height:24px;color:#101828}input:focus,input:focus-within{outline:1px solid #00AC42;box-shadow:none;border-color:#00ac42}input.input-sm{padding:.375rem .5rem;font-size:14px;line-height:20px;height:32px}input.input-sm.grow{min-height:32px}input.input-lg{padding:.625rem .75rem;height:44px}input.input-lg.grow{min-height:44px}input.grow{height:auto;min-height:40px}input:hover{border-color:#98a2b3}input.error{border-color:#dc3545;background-color:#f6cdd1}input.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}input:placeholder-shown{text-overflow:ellipsis}input.disabled{background-color:#f2f4f7;border-color:#f2f4f7;cursor:not-allowed}.componentContainer{position:relative}.showErrors{border-color:#ff8000;padding-right:2rem}.tail{position:absolute;right:.625rem;display:flex;align-items:center;top:0;bottom:0;gap:.625rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
1339
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: EmailInputComponent, isStandalone: false, selector: "klp-form-email-input", inputs: { placeholder: "placeholder" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: EmailInputComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"componentContainer\" [ngClass]=\"{showErrors: isInErrorState()}\">\n\t<input\n\t\ttype=\"email\"\n\t\tclass=\"form-control\"\n\t\t[(ngModel)]=\"innerValue\"\n\t\t[class]=\"sizeClass\"\n\t\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t\t[placeholder]=\"placeholder\"\n\t\t(blur)=\"touch()\"\n\t\t[disabled]=\"disabled\"\n\t\t[ngClass]=\"{showErrors: isInErrorState()}\"\n\t\t#nativeInputRef\n\t/>\n\t<div class=\"tail\">\n\t\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n\t</div>\n</div>\n", styles: [":host{display:block}input{outline:none}input::-webkit-input-placeholder{color:#98a2b3}input:-moz-placeholder{color:#98a2b3}input::-moz-placeholder{color:#98a2b3}input:-ms-input-placeholder{color:#98a2b3}input{display:block;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:none;height:40px;width:100%;padding:.5rem .75rem;font-size:16px;font-weight:400;line-height:24px;color:#101828}input:hover{border:1px solid #98A2B3}input.showErrors{border:1px solid #ff8000;outline:.5px solid #ff8000}input:focus,input:focus-within{border:1px solid #00AC42;outline:1px solid #00AC42}input.disabled{border:1px solid #F2F4F7;background-color:#f2f4f7;cursor:not-allowed}input.input-sm{padding:.375rem .5rem;font-size:14px;line-height:20px;height:32px}input.input-sm.grow{min-height:32px}input.input-lg{padding:.625rem .75rem;height:44px}input.input-lg.grow{min-height:44px}input.grow{height:auto;min-height:40px}input:placeholder-shown{text-overflow:ellipsis}.componentContainer{position:relative}.showErrors{border-color:#ff8000;padding-right:2rem}.tail{position:absolute;right:.625rem;display:flex;align-items:center;top:0;bottom:0;gap:.625rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
1255
1340
  }
1256
1341
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: EmailInputComponent, decorators: [{
1257
1342
  type: Component,
1258
- args: [{ selector: 'klp-form-email-input', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: EmailInputComponent, multi: true }], standalone: false, template: "<div class=\"componentContainer\">\n\t<input\n\t\ttype=\"email\"\n\t\tclass=\"form-control\"\n\t\t[(ngModel)]=\"innerValue\"\n\t\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t\t[placeholder]=\"placeholder\"\n\t\t(blur)=\"touch()\"\n\t\t[disabled]=\"disabled\"\n\t\t[ngClass]=\"{showErrors: isInErrorState()}\"\n\t\t#nativeInputRef\n\t/>\n\t<div class=\"tail\">\n\t\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n\t</div>\n</div>\n", styles: [":host{display:block}input{outline:none}input::-webkit-input-placeholder{color:#98a2b3}input:-moz-placeholder{color:#98a2b3}input::-moz-placeholder{color:#98a2b3}input:-ms-input-placeholder{color:#98a2b3}input{display:block;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:none;height:40px;width:100%;padding:.5rem .75rem;font-size:16px;font-weight:400;line-height:24px;color:#101828}input:focus,input:focus-within{outline:1px solid #00AC42;box-shadow:none;border-color:#00ac42}input.input-sm{padding:.375rem .5rem;font-size:14px;line-height:20px;height:32px}input.input-sm.grow{min-height:32px}input.input-lg{padding:.625rem .75rem;height:44px}input.input-lg.grow{min-height:44px}input.grow{height:auto;min-height:40px}input:hover{border-color:#98a2b3}input.error{border-color:#dc3545;background-color:#f6cdd1}input.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}input:placeholder-shown{text-overflow:ellipsis}input.disabled{background-color:#f2f4f7;border-color:#f2f4f7;cursor:not-allowed}.componentContainer{position:relative}.showErrors{border-color:#ff8000;padding-right:2rem}.tail{position:absolute;right:.625rem;display:flex;align-items:center;top:0;bottom:0;gap:.625rem}\n"] }]
1343
+ args: [{ selector: 'klp-form-email-input', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: EmailInputComponent, multi: true }], standalone: false, template: "<div class=\"componentContainer\" [ngClass]=\"{showErrors: isInErrorState()}\">\n\t<input\n\t\ttype=\"email\"\n\t\tclass=\"form-control\"\n\t\t[(ngModel)]=\"innerValue\"\n\t\t[class]=\"sizeClass\"\n\t\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t\t[placeholder]=\"placeholder\"\n\t\t(blur)=\"touch()\"\n\t\t[disabled]=\"disabled\"\n\t\t[ngClass]=\"{showErrors: isInErrorState()}\"\n\t\t#nativeInputRef\n\t/>\n\t<div class=\"tail\">\n\t\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n\t</div>\n</div>\n", styles: [":host{display:block}input{outline:none}input::-webkit-input-placeholder{color:#98a2b3}input:-moz-placeholder{color:#98a2b3}input::-moz-placeholder{color:#98a2b3}input:-ms-input-placeholder{color:#98a2b3}input{display:block;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:none;height:40px;width:100%;padding:.5rem .75rem;font-size:16px;font-weight:400;line-height:24px;color:#101828}input:hover{border:1px solid #98A2B3}input.showErrors{border:1px solid #ff8000;outline:.5px solid #ff8000}input:focus,input:focus-within{border:1px solid #00AC42;outline:1px solid #00AC42}input.disabled{border:1px solid #F2F4F7;background-color:#f2f4f7;cursor:not-allowed}input.input-sm{padding:.375rem .5rem;font-size:14px;line-height:20px;height:32px}input.input-sm.grow{min-height:32px}input.input-lg{padding:.625rem .75rem;height:44px}input.input-lg.grow{min-height:44px}input.grow{height:auto;min-height:40px}input:placeholder-shown{text-overflow:ellipsis}.componentContainer{position:relative}.showErrors{border-color:#ff8000;padding-right:2rem}.tail{position:absolute;right:.625rem;display:flex;align-items:center;top:0;bottom:0;gap:.625rem}\n"] }]
1259
1344
  }], propDecorators: { placeholder: [{
1260
1345
  type: Input
1261
1346
  }] } });
@@ -1264,7 +1349,6 @@ class NumberInputComponent extends ValueAccessorBase {
1264
1349
  constructor() {
1265
1350
  super(...arguments);
1266
1351
  this.parseNumber = false;
1267
- this.size = 'medium';
1268
1352
  this.suffixTpl = null;
1269
1353
  this.prefixTpl = null;
1270
1354
  }
@@ -1277,17 +1361,15 @@ class NumberInputComponent extends ValueAccessorBase {
1277
1361
  }
1278
1362
  }
1279
1363
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: NumberInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
1280
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: NumberInputComponent, isStandalone: false, selector: "klp-form-number-input", inputs: { placeholder: "placeholder", parseNumber: "parseNumber", size: "size", suffixTpl: "suffixTpl", prefixTpl: "prefixTpl" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: NumberInputComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"componentContainer\" [ngClass]=\"{'input-sm': size === 'small', 'input-lg': size === 'large', disabled: disabled}\">\n\t<div class=\"head\">\n\t\t@if (prefixTpl) {\n\t\t\t<div class=\"prefix\">\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"prefixTpl\"></ng-container>\n\t\t\t</div>\n\t\t}\n\t</div>\n\n\t<input\n\t\ttype=\"number\"\n\t\tclass=\"form-control\"\n\t\t[(ngModel)]=\"innerValue\"\n\t\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t\t[placeholder]=\"placeholder ? placeholder : ''\"\n\t\t[ngClass]=\"{showErrors: isInErrorState(), disabled: disabled}\"\n\t\t[disabled]=\"disabled\"\n\t\t#nativeInputRef\n\t/>\n\n\t<div class=\"tail\">\n\t\t@if (suffixTpl) {\n\t\t\t<div class=\"suffix\">\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"suffixTpl\"></ng-container>\n\t\t\t</div>\n\t\t}\n\t</div>\n</div>\n", styles: [":host{display:block}.componentContainer::-webkit-input-placeholder{color:#98a2b3}.componentContainer:-moz-placeholder{color:#98a2b3}.componentContainer::-moz-placeholder{color:#98a2b3}.componentContainer:-ms-input-placeholder{color:#98a2b3}.componentContainer{display:block;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:none;height:40px;width:100%;padding:.5rem .75rem;font-size:16px;font-weight:400;line-height:24px;color:#101828}.componentContainer:focus,.componentContainer:focus-within{outline:1px solid #00AC42;box-shadow:none;border-color:#00ac42}.componentContainer.input-sm{padding:.375rem .5rem;font-size:14px;line-height:20px;height:32px}.componentContainer.input-sm.grow{min-height:32px}.componentContainer.input-lg{padding:.625rem .75rem;height:44px}.componentContainer.input-lg.grow{min-height:44px}.componentContainer.grow{height:auto;min-height:40px}.componentContainer:hover{border-color:#98a2b3}.componentContainer.error{border-color:#dc3545;background-color:#f6cdd1}.componentContainer.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}.componentContainer:placeholder-shown{text-overflow:ellipsis}.componentContainer.disabled{background-color:#f2f4f7;border-color:#f2f4f7;cursor:not-allowed}.componentContainer{display:flex;flex-direction:row;align-items:center;overflow-y:hidden}.componentContainer input{outline:none;border:none;flex:1 1 auto;min-width:0;width:auto;height:100%;font-size:inherit;line-height:inherit;color:inherit;background:none}.componentContainer input.disabled{cursor:not-allowed}.componentContainer input :disabled{cursor:not-allowed}.componentContainer .head,.componentContainer .tail{cursor:default}.componentContainer .prefix,.componentContainer .suffix{display:flex;align-items:center;flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
1364
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: NumberInputComponent, isStandalone: false, selector: "klp-form-number-input", inputs: { placeholder: "placeholder", parseNumber: "parseNumber", suffixTpl: "suffixTpl", prefixTpl: "prefixTpl" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: NumberInputComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"componentContainer\"\n\t\t [ngClass]=\"{disabled: disabled, showErrors: isInErrorState()}\"\n\t\t [class]=\"sizeClass\"\n>\n\t<div class=\"head\">\n\t\t@if (prefixTpl) {\n\t\t\t<div class=\"prefix\">\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"prefixTpl\"></ng-container>\n\t\t\t</div>\n\t\t}\n\t</div>\n\n\t<input\n\t\ttype=\"number\"\n\t\tclass=\"form-control\"\n\t\t[(ngModel)]=\"innerValue\"\n\t\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t\t[placeholder]=\"placeholder ? placeholder : ''\"\n\t\t[ngClass]=\"{showErrors: isInErrorState(), disabled: disabled}\"\n\t\t[disabled]=\"disabled\"\n\t\t#nativeInputRef\n\t/>\n\n\t<div class=\"tail\">\n\t\t@if (suffixTpl) {\n\t\t\t<div class=\"suffix\">\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"suffixTpl\"></ng-container>\n\t\t\t</div>\n\t\t}\n\t</div>\n</div>\n", styles: [":host{display:block}.componentContainer::-webkit-input-placeholder{color:#98a2b3}.componentContainer:-moz-placeholder{color:#98a2b3}.componentContainer::-moz-placeholder{color:#98a2b3}.componentContainer:-ms-input-placeholder{color:#98a2b3}.componentContainer{display:block;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:none;height:40px;width:100%;padding:.5rem .75rem;font-size:16px;font-weight:400;line-height:24px;color:#101828}.componentContainer:hover{border:1px solid #98A2B3}.componentContainer.showErrors{border:1px solid #ff8000;outline:.5px solid #ff8000}.componentContainer:focus,.componentContainer:focus-within{border:1px solid #00AC42;outline:1px solid #00AC42}.componentContainer.disabled{border:1px solid #F2F4F7;background-color:#f2f4f7;cursor:not-allowed}.componentContainer.input-sm{padding:.375rem .5rem;font-size:14px;line-height:20px;height:32px}.componentContainer.input-sm.grow{min-height:32px}.componentContainer.input-lg{padding:.625rem .75rem;height:44px}.componentContainer.input-lg.grow{min-height:44px}.componentContainer.grow{height:auto;min-height:40px}.componentContainer:placeholder-shown{text-overflow:ellipsis}.componentContainer{display:flex;flex-direction:row;align-items:center;overflow-y:hidden}.componentContainer input{outline:none;border:none;flex:1 1 auto;min-width:0;width:100%;height:100%;font-size:inherit;line-height:inherit;color:inherit;background:none}.componentContainer input.disabled{cursor:not-allowed}.componentContainer input :disabled{cursor:not-allowed}.componentContainer .head,.componentContainer .tail{cursor:default}.componentContainer .prefix,.componentContainer .suffix{display:flex;align-items:center;flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
1281
1365
  }
1282
1366
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: NumberInputComponent, decorators: [{
1283
1367
  type: Component,
1284
- args: [{ selector: 'klp-form-number-input', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: NumberInputComponent, multi: true }], standalone: false, template: "<div class=\"componentContainer\" [ngClass]=\"{'input-sm': size === 'small', 'input-lg': size === 'large', disabled: disabled}\">\n\t<div class=\"head\">\n\t\t@if (prefixTpl) {\n\t\t\t<div class=\"prefix\">\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"prefixTpl\"></ng-container>\n\t\t\t</div>\n\t\t}\n\t</div>\n\n\t<input\n\t\ttype=\"number\"\n\t\tclass=\"form-control\"\n\t\t[(ngModel)]=\"innerValue\"\n\t\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t\t[placeholder]=\"placeholder ? placeholder : ''\"\n\t\t[ngClass]=\"{showErrors: isInErrorState(), disabled: disabled}\"\n\t\t[disabled]=\"disabled\"\n\t\t#nativeInputRef\n\t/>\n\n\t<div class=\"tail\">\n\t\t@if (suffixTpl) {\n\t\t\t<div class=\"suffix\">\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"suffixTpl\"></ng-container>\n\t\t\t</div>\n\t\t}\n\t</div>\n</div>\n", styles: [":host{display:block}.componentContainer::-webkit-input-placeholder{color:#98a2b3}.componentContainer:-moz-placeholder{color:#98a2b3}.componentContainer::-moz-placeholder{color:#98a2b3}.componentContainer:-ms-input-placeholder{color:#98a2b3}.componentContainer{display:block;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:none;height:40px;width:100%;padding:.5rem .75rem;font-size:16px;font-weight:400;line-height:24px;color:#101828}.componentContainer:focus,.componentContainer:focus-within{outline:1px solid #00AC42;box-shadow:none;border-color:#00ac42}.componentContainer.input-sm{padding:.375rem .5rem;font-size:14px;line-height:20px;height:32px}.componentContainer.input-sm.grow{min-height:32px}.componentContainer.input-lg{padding:.625rem .75rem;height:44px}.componentContainer.input-lg.grow{min-height:44px}.componentContainer.grow{height:auto;min-height:40px}.componentContainer:hover{border-color:#98a2b3}.componentContainer.error{border-color:#dc3545;background-color:#f6cdd1}.componentContainer.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}.componentContainer:placeholder-shown{text-overflow:ellipsis}.componentContainer.disabled{background-color:#f2f4f7;border-color:#f2f4f7;cursor:not-allowed}.componentContainer{display:flex;flex-direction:row;align-items:center;overflow-y:hidden}.componentContainer input{outline:none;border:none;flex:1 1 auto;min-width:0;width:auto;height:100%;font-size:inherit;line-height:inherit;color:inherit;background:none}.componentContainer input.disabled{cursor:not-allowed}.componentContainer input :disabled{cursor:not-allowed}.componentContainer .head,.componentContainer .tail{cursor:default}.componentContainer .prefix,.componentContainer .suffix{display:flex;align-items:center;flex-shrink:0}\n"] }]
1368
+ args: [{ selector: 'klp-form-number-input', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: NumberInputComponent, multi: true }], standalone: false, template: "<div class=\"componentContainer\"\n\t\t [ngClass]=\"{disabled: disabled, showErrors: isInErrorState()}\"\n\t\t [class]=\"sizeClass\"\n>\n\t<div class=\"head\">\n\t\t@if (prefixTpl) {\n\t\t\t<div class=\"prefix\">\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"prefixTpl\"></ng-container>\n\t\t\t</div>\n\t\t}\n\t</div>\n\n\t<input\n\t\ttype=\"number\"\n\t\tclass=\"form-control\"\n\t\t[(ngModel)]=\"innerValue\"\n\t\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t\t[placeholder]=\"placeholder ? placeholder : ''\"\n\t\t[ngClass]=\"{showErrors: isInErrorState(), disabled: disabled}\"\n\t\t[disabled]=\"disabled\"\n\t\t#nativeInputRef\n\t/>\n\n\t<div class=\"tail\">\n\t\t@if (suffixTpl) {\n\t\t\t<div class=\"suffix\">\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"suffixTpl\"></ng-container>\n\t\t\t</div>\n\t\t}\n\t</div>\n</div>\n", styles: [":host{display:block}.componentContainer::-webkit-input-placeholder{color:#98a2b3}.componentContainer:-moz-placeholder{color:#98a2b3}.componentContainer::-moz-placeholder{color:#98a2b3}.componentContainer:-ms-input-placeholder{color:#98a2b3}.componentContainer{display:block;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:none;height:40px;width:100%;padding:.5rem .75rem;font-size:16px;font-weight:400;line-height:24px;color:#101828}.componentContainer:hover{border:1px solid #98A2B3}.componentContainer.showErrors{border:1px solid #ff8000;outline:.5px solid #ff8000}.componentContainer:focus,.componentContainer:focus-within{border:1px solid #00AC42;outline:1px solid #00AC42}.componentContainer.disabled{border:1px solid #F2F4F7;background-color:#f2f4f7;cursor:not-allowed}.componentContainer.input-sm{padding:.375rem .5rem;font-size:14px;line-height:20px;height:32px}.componentContainer.input-sm.grow{min-height:32px}.componentContainer.input-lg{padding:.625rem .75rem;height:44px}.componentContainer.input-lg.grow{min-height:44px}.componentContainer.grow{height:auto;min-height:40px}.componentContainer:placeholder-shown{text-overflow:ellipsis}.componentContainer{display:flex;flex-direction:row;align-items:center;overflow-y:hidden}.componentContainer input{outline:none;border:none;flex:1 1 auto;min-width:0;width:100%;height:100%;font-size:inherit;line-height:inherit;color:inherit;background:none}.componentContainer input.disabled{cursor:not-allowed}.componentContainer input :disabled{cursor:not-allowed}.componentContainer .head,.componentContainer .tail{cursor:default}.componentContainer .prefix,.componentContainer .suffix{display:flex;align-items:center;flex-shrink:0}\n"] }]
1285
1369
  }], propDecorators: { placeholder: [{
1286
1370
  type: Input
1287
1371
  }], parseNumber: [{
1288
1372
  type: Input
1289
- }], size: [{
1290
- type: Input
1291
1373
  }], suffixTpl: [{
1292
1374
  type: Input
1293
1375
  }], prefixTpl: [{
@@ -1300,11 +1382,11 @@ class PasswordFieldComponent extends ValueAccessorBase {
1300
1382
  this.placeholder = 'Password';
1301
1383
  }
1302
1384
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: PasswordFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
1303
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: PasswordFieldComponent, isStandalone: false, selector: "klp-form-password-field", inputs: { placeholder: "placeholder" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: PasswordFieldComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<input\n\ttype=\"password\"\n\tclass=\"form-control\"\n [ngClass]=\"{showErrors: isInErrorState()}\"\n\t[(ngModel)]=\"innerValue\"\n\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t[placeholder]=\"placeholder\"\n\t(blur)=\"touch()\"\n\t[disabled]=\"disabled\"\n\t#nativeInputRef\n/>\n", styles: [":host{display:block}input{outline:none}input::-webkit-input-placeholder{color:#98a2b3}input:-moz-placeholder{color:#98a2b3}input::-moz-placeholder{color:#98a2b3}input:-ms-input-placeholder{color:#98a2b3}input{display:block;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:none;height:40px;width:100%;padding:.5rem .75rem;font-size:16px;font-weight:400;line-height:24px;color:#101828}input:focus,input:focus-within{outline:1px solid #00AC42;box-shadow:none;border-color:#00ac42}input.input-sm{padding:.375rem .5rem;font-size:14px;line-height:20px;height:32px}input.input-sm.grow{min-height:32px}input.input-lg{padding:.625rem .75rem;height:44px}input.input-lg.grow{min-height:44px}input.grow{height:auto;min-height:40px}input:hover{border-color:#98a2b3}input.error{border-color:#dc3545;background-color:#f6cdd1}input.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}input:placeholder-shown{text-overflow:ellipsis}input.disabled{background-color:#f2f4f7;border-color:#f2f4f7;cursor:not-allowed}.showErrors{border-color:#ff8000}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
1385
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: PasswordFieldComponent, isStandalone: false, selector: "klp-form-password-field", inputs: { placeholder: "placeholder" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: PasswordFieldComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"componentContainer\" [ngClass]=\"{showErrors: isInErrorState()}\">\n\t<input\n\t\ttype=\"password\"\n\t\tclass=\"form-control\"\n\t\t[class]=\"sizeClass\"\n\t\t[(ngModel)]=\"innerValue\"\n\t\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t\t[placeholder]=\"placeholder\"\n\t\t(blur)=\"touch()\"\n\t\t[disabled]=\"disabled\"\n\t\t#nativeInputRef\n\t/>\n</div>\n", styles: [":host{display:block}.componentContainer::-webkit-input-placeholder{color:#98a2b3}.componentContainer:-moz-placeholder{color:#98a2b3}.componentContainer::-moz-placeholder{color:#98a2b3}.componentContainer:-ms-input-placeholder{color:#98a2b3}.componentContainer{display:block;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:none;height:40px;width:100%;padding:.5rem .75rem;font-size:16px;font-weight:400;line-height:24px;color:#101828}.componentContainer:hover{border:1px solid #98A2B3}.componentContainer.showErrors{border:1px solid #ff8000;outline:.5px solid #ff8000}.componentContainer:focus,.componentContainer:focus-within{border:1px solid #00AC42;outline:1px solid #00AC42}.componentContainer.disabled{border:1px solid #F2F4F7;background-color:#f2f4f7;cursor:not-allowed}.componentContainer.input-sm{padding:.375rem .5rem;font-size:14px;line-height:20px;height:32px}.componentContainer.input-sm.grow{min-height:32px}.componentContainer.input-lg{padding:.625rem .75rem;height:44px}.componentContainer.input-lg.grow{min-height:44px}.componentContainer.grow{height:auto;min-height:40px}.componentContainer:placeholder-shown{text-overflow:ellipsis}input{outline:none;border:none;flex:1 1 auto;min-width:0;width:100%;height:100%;font-size:inherit;line-height:inherit;color:inherit;background:none}input.disabled{cursor:not-allowed}input :disabled{cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
1304
1386
  }
1305
1387
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: PasswordFieldComponent, decorators: [{
1306
1388
  type: Component,
1307
- args: [{ selector: 'klp-form-password-field', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: PasswordFieldComponent, multi: true }], standalone: false, template: "<input\n\ttype=\"password\"\n\tclass=\"form-control\"\n [ngClass]=\"{showErrors: isInErrorState()}\"\n\t[(ngModel)]=\"innerValue\"\n\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t[placeholder]=\"placeholder\"\n\t(blur)=\"touch()\"\n\t[disabled]=\"disabled\"\n\t#nativeInputRef\n/>\n", styles: [":host{display:block}input{outline:none}input::-webkit-input-placeholder{color:#98a2b3}input:-moz-placeholder{color:#98a2b3}input::-moz-placeholder{color:#98a2b3}input:-ms-input-placeholder{color:#98a2b3}input{display:block;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:none;height:40px;width:100%;padding:.5rem .75rem;font-size:16px;font-weight:400;line-height:24px;color:#101828}input:focus,input:focus-within{outline:1px solid #00AC42;box-shadow:none;border-color:#00ac42}input.input-sm{padding:.375rem .5rem;font-size:14px;line-height:20px;height:32px}input.input-sm.grow{min-height:32px}input.input-lg{padding:.625rem .75rem;height:44px}input.input-lg.grow{min-height:44px}input.grow{height:auto;min-height:40px}input:hover{border-color:#98a2b3}input.error{border-color:#dc3545;background-color:#f6cdd1}input.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}input:placeholder-shown{text-overflow:ellipsis}input.disabled{background-color:#f2f4f7;border-color:#f2f4f7;cursor:not-allowed}.showErrors{border-color:#ff8000}\n"] }]
1389
+ args: [{ selector: 'klp-form-password-field', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: PasswordFieldComponent, multi: true }], standalone: false, template: "<div class=\"componentContainer\" [ngClass]=\"{showErrors: isInErrorState()}\">\n\t<input\n\t\ttype=\"password\"\n\t\tclass=\"form-control\"\n\t\t[class]=\"sizeClass\"\n\t\t[(ngModel)]=\"innerValue\"\n\t\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t\t[placeholder]=\"placeholder\"\n\t\t(blur)=\"touch()\"\n\t\t[disabled]=\"disabled\"\n\t\t#nativeInputRef\n\t/>\n</div>\n", styles: [":host{display:block}.componentContainer::-webkit-input-placeholder{color:#98a2b3}.componentContainer:-moz-placeholder{color:#98a2b3}.componentContainer::-moz-placeholder{color:#98a2b3}.componentContainer:-ms-input-placeholder{color:#98a2b3}.componentContainer{display:block;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:none;height:40px;width:100%;padding:.5rem .75rem;font-size:16px;font-weight:400;line-height:24px;color:#101828}.componentContainer:hover{border:1px solid #98A2B3}.componentContainer.showErrors{border:1px solid #ff8000;outline:.5px solid #ff8000}.componentContainer:focus,.componentContainer:focus-within{border:1px solid #00AC42;outline:1px solid #00AC42}.componentContainer.disabled{border:1px solid #F2F4F7;background-color:#f2f4f7;cursor:not-allowed}.componentContainer.input-sm{padding:.375rem .5rem;font-size:14px;line-height:20px;height:32px}.componentContainer.input-sm.grow{min-height:32px}.componentContainer.input-lg{padding:.625rem .75rem;height:44px}.componentContainer.input-lg.grow{min-height:44px}.componentContainer.grow{height:auto;min-height:40px}.componentContainer:placeholder-shown{text-overflow:ellipsis}input{outline:none;border:none;flex:1 1 auto;min-width:0;width:100%;height:100%;font-size:inherit;line-height:inherit;color:inherit;background:none}input.disabled{cursor:not-allowed}input :disabled{cursor:not-allowed}\n"] }]
1308
1390
  }], propDecorators: { placeholder: [{
1309
1391
  type: Input
1310
1392
  }] } });
@@ -1340,7 +1422,6 @@ class SelectComponent extends ValueAccessorBase {
1340
1422
  this.hasBorderRight = true;
1341
1423
  this.dropdownPosition = null;
1342
1424
  this.dropdownAlignment = 'left';
1343
- this.size = 'medium';
1344
1425
  this.prefixTpl = null;
1345
1426
  this.suffixTpl = null;
1346
1427
  this.onSearch = new EventEmitter();
@@ -1673,11 +1754,11 @@ class SelectComponent extends ValueAccessorBase {
1673
1754
  this.resizeObserver?.disconnect();
1674
1755
  }
1675
1756
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: SelectComponent, deps: [{ token: FormElementComponent, host: true, optional: true }, { token: i2.ControlContainer, host: true, optional: true }, { token: SELECT_TRANSLATIONS, optional: true }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
1676
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: SelectComponent, isStandalone: false, selector: "klp-form-select", inputs: { placeholder: "placeholder", prefix: "prefix", orientation: "orientation", options: "options", multiple: "multiple", multipleDisplayedAsAmount: "multipleDisplayedAsAmount", clearable: "clearable", truncateOptions: "truncateOptions", withSeparatingLine: "withSeparatingLine", searchable: "searchable", hasBorderLeft: "hasBorderLeft", hasBorderRight: "hasBorderRight", dropdownPosition: "dropdownPosition", dropdownAlignment: "dropdownAlignment", customSearchFn: "customSearchFn", footerElement: "footerElement", size: "size", prefixTpl: "prefixTpl", suffixTpl: "suffixTpl" }, outputs: { onSearch: "onSearch", onEndReached: "onEndReached", onOpened: "onOpened", onClosed: "onClosed", onBlur: "onBlur", onClear: "onClear", onEnterKey: "onEnterKey" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: SelectComponent, multi: true }], queries: [{ propertyName: "customOptionTpl", first: true, predicate: KlpSelectOptionTemplateDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "ngSelect", first: true, predicate: ["ngSelect"], descendants: true }, { propertyName: "tailRef", first: true, predicate: ["tailRef"], descendants: true }, { propertyName: "tailMockRef", first: true, predicate: ["tailMockRef"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"componentContainer\"\n\t\t [class.verticalOrientation]=\"orientation === 'vertical'\"\n\t\t [ngClass]=\"{'input-sm': size === 'small', 'input-lg': size === 'large', 'grow': multiple, noBorderLeft: !hasBorderLeft, noBorderRight: !hasBorderRight, disabled: disabled}\"\n>\n\t@if (prefixTpl) {\n\t\t<div class=\"prefix-tpl\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"prefixTpl\"></ng-container>\n\t\t</div>\n\t}\n\n\t<div class=\"inputContainer\" [class.grow]=\"multiple\">\n\t\t<ng-select\n\t\t\t#ngSelect\n\t\t\t[placeholder]=\"getTranslation('placeholder')\"\n\t\t\tbindLabel=\"name\"\n\t\t\tbindValue=\"id\"\n\t\t\t[items]=\"options\"\n\t\t\t[clearable]=\"clearable\"\n\t\t\t[(ngModel)]=\"innerValue\"\n\t\t\t[ngClass]=\"{showErrors: isInErrorState(), truncateOptions: truncateOptions, nonTruncatedOptions: !truncateOptions, withSeparatingLine: withSeparatingLine, hasCustomOptionTpl: !!customOptionTpl, 'grow': multiple, disabled: disabled}\"\n\t\t\t(change)=\"setInnerValueAndNotify(innerValue)\"\n\t\t\t[multiple]=\"multiple\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t(blur)=\"touch(); onBlur.emit()\"\n\t\t\t(clear)=\"onClear.emit()\"\n\t\t\t(search)=\"searchQueryChanged($event.term)\"\n\t\t\t[searchable]=\"searchable\"\n\t\t\t[dropdownPosition]=\"dropdownPositionToUse\"\n\t\t\t[searchFn]=\"customSearchFn\"\n\t\t\t[selectOnTab]=\"true\"\n\t\t\t[virtualScroll]=\"true\"\n\t\t\t(scroll)=\"onScroll($event.end)\"\n\t\t\t(open)=\"onOpen()\"\n\t\t\t(close)=\"onClose()\"\n\t\t\t(focus)=\"onFocus()\"\n\t\t>\n\t\t\t<ng-template let-item=\"item\" ng-option-tmp>\n\t\t\t\t@if (customOptionTpl) {\n\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"customOptionTpl\" [ngTemplateOutletContext]=\"{item: item}\"></ng-container>\n\t\t\t\t}\n\t\t\t\t@if (!customOptionTpl) {\n\t\t\t\t\t<div [attr.data-cy]=\"item.id\">\n\t\t\t\t\t\t{{ item.name }}\n\t\t\t\t\t\t@if (item.description) {\n\t\t\t\t\t\t\t<div class=\"dropdown-item-description\">\n\t\t\t\t\t\t\t\t{{ item.description }}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t</ng-template>\n\t\t\t@if (multiple && multipleDisplayedAsAmount && innerValue?.length > 1) {\n\t\t\t\t<ng-template ng-multi-label-tmp>\n\t\t\t\t\t<div class=\"ng-value\">\n\t\t\t\t\t\t<span class=\"ng-value-label\">{{ getTranslation('amountSelected', innerValue?.length) }}</span>\n\t\t\t\t\t</div>\n\t\t\t\t</ng-template>\n\t\t\t}\n\t\t\t@if (footerElement) {\n\t\t\t\t<ng-template ng-footer-tmp>\n\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"footerElement\"></ng-container>\n\t\t\t\t</ng-template>\n\t\t\t}\n\t\t</ng-select>\n\n\t\t<div class=\"tail\" #tailRef>\n\t\t\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n\t\t</div>\n\t\t<!-- I need this mock to reserve the space. I cant use the normal tail because that opens the dropdown from ng-select -->\n\t\t<!-- I have no idea how to avoid that -->\n\t\t<div class=\"tailMock\" #tailMockRef>\n\t\t\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n\t\t</div>\n\t</div>\n\n\t@if (suffixTpl) {\n\t\t<div class=\"suffix\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"suffixTpl\"></ng-container>\n\t\t</div>\n\t}\n</div>\n", styles: [":host{display:block;position:relative}.componentContainer::-webkit-input-placeholder{color:#98a2b3}.componentContainer:-moz-placeholder{color:#98a2b3}.componentContainer::-moz-placeholder{color:#98a2b3}.componentContainer:-ms-input-placeholder{color:#98a2b3}.componentContainer{display:block;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:none;height:40px;width:100%;padding:.5rem .75rem;font-size:16px;font-weight:400;line-height:24px;color:#101828}.componentContainer:focus,.componentContainer:focus-within{outline:1px solid #00AC42;box-shadow:none;border-color:#00ac42}.componentContainer.input-sm{padding:.375rem .5rem;font-size:14px;line-height:20px;height:32px}.componentContainer.input-sm.grow{min-height:32px}.componentContainer.input-lg{padding:.625rem .75rem;height:44px}.componentContainer.input-lg.grow{min-height:44px}.componentContainer.grow{height:auto;min-height:40px}.componentContainer:hover{border-color:#98a2b3}.componentContainer.error{border-color:#dc3545;background-color:#f6cdd1}.componentContainer.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}.componentContainer:placeholder-shown{text-overflow:ellipsis}.componentContainer.disabled{background-color:#f2f4f7;border-color:#f2f4f7;cursor:not-allowed}.componentContainer{display:flex;flex-direction:row}.componentContainer.noBorderLeft{border-left:none;border-top-left-radius:0;border-bottom-left-radius:0}.componentContainer.noBorderRight{border-right:none;border-top-right-radius:0;border-bottom-right-radius:0}.componentContainer .prefix-tpl,.componentContainer .suffix{display:flex;align-items:center;flex-shrink:0}ng-select.ng-select.showErrors::ng-deep .ng-select-container{border-color:#ff8000}.inputContainer{width:100%}.inputContainer.grow{height:auto;display:flex;flex-direction:row}:host ::ng-deep ng-select.ng-select{height:100%;width:100%}:host ::ng-deep ng-select.ng-select .ng-select-container{outline:none;border:none;flex:1 1 auto;min-width:0;width:auto;height:100%;font-size:inherit;line-height:inherit;color:inherit;background:none}:host ::ng-deep ng-select.ng-select .ng-select-container.disabled{cursor:not-allowed}:host ::ng-deep ng-select.ng-select .ng-select-container :disabled{cursor:not-allowed}:host ::ng-deep ng-select.ng-select .ng-select-container{display:flex}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container{background:#fff}: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{position:relative;display:block}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container .ng-arrow:after{position:absolute;content:\"\";display:inline-block;width:20px;height:20px;margin-left:10px;background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"><path d=\"M15 12.5L10 7.5L5 12.5\" stroke=\"%23475467\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>');background-size:contain;background-repeat:no-repeat;transform:translate(-50%,-50%)}: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-disabled>.ng-select-container,:host ::ng-deep .ng-select.ng-select-disabled>.ng-select-container:hover{background-color:#f2f4f7;border-color:#f2f4f7}:host ::ng-deep .ng-select .ng-has-value .ng-placeholder{display:none}:host ::ng-deep .ng-select:not(.ng-select-multiple) .ng-placeholder,:host ::ng-deep .ng-select:not(.ng-select-multiple) .ng-value{width:0px;flex-grow:1;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{width:0px;max-width:0;flex-grow:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host ::ng-deep .ng-select.ng-select-multiple .ng-value{flex-direction:row-reverse}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{white-space:initial}:host ::ng-deep .ng-select .ng-select-container{display:flex;gap:.4rem;flex-direction:row;background-color:#fff;align-items:center;background-clip:padding-box;border:1px solid #e6ecf5;border-radius:2px;box-shadow:none;box-sizing:border-box;outline:none;overflow:visible;width:100%}:host ::ng-deep .ng-select .ng-select-container:hover{box-shadow:0 1px #0000000f}:host ::ng-deep .ng-select .ng-select-container .ng-value-container{height:100%;align-items:center;padding-left:10px;overflow:hidden}:host ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#98a2b3;max-width:100%}:host ::ng-deep .ng-select.ng-select-multiple>.ng-select-container :has(input:focus) .ng-placeholder{top:initial!important;position:absolute!important}:host ::ng-deep .ng-select.ng-select-multiple>.ng-select-container:not(:has(input:focus)):not(.ng-has-value) .ng-input{position:absolute}:host ::ng-deep .ng-select.ng-select-multiple>.ng-select-container .ng-value-container{gap: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:0 5px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{font-size:1em;background-color:#fff;border:1px solid #D0D5DD;border-radius:6px;display:flex;align-items:center;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:0 5px;overflow:hidden;text-overflow:ellipsis;line-height:22px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{display:inline-block;padding:0 5px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{position:relative;color:transparent;width:20px;height:20px;padding:0 10px 0 0}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left:after{position:absolute;left:0;content:\"\";display:inline-block;width:20px;height:20px;background-image:url('data:image/svg+xml;utf8,<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M13.5 6.5L6.5 13.5M6.5 6.5L13.5 13.5\" stroke=\"%2398A2B3\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>');background-size:contain;background-repeat:no-repeat}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left:hover:after{background-image:url('data:image/svg+xml;utf8,<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"20\" height=\"20\" rx=\"3\" fill=\"%23F2F4F7\"/><path d=\"M13.5 6.5L6.5 13.5M6.5 6.5L13.5 13.5\" stroke=\"%23667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>')}: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.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{top:5px;padding-left:3px;position:static}:host ::ng-deep .ng-select .ng-clear-wrapper{position:relative;width:24px;height:24px}:host ::ng-deep .ng-select .ng-clear-wrapper .ng-clear{display:block;color:transparent}:host ::ng-deep .ng-select .ng-clear-wrapper .ng-clear:after{position:absolute;left:0;content:\"\";display:inline-block;width:24px;height:24px;background-image:url('data:image/svg+xml;utf8,<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M17 7L7 17M7 7L17 17\" stroke=\"%23667085\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>');background-size:contain;background-repeat:no-repeat}:host ::ng-deep .ng-select .ng-clear-wrapper:hover .ng-clear:after{background-image:url('data:image/svg+xml;utf8,<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"24\" height=\"24\" rx=\"4\" fill=\"%23F2F4F7\"/><path d=\"M17 7L7 17M7 7L17 17\" stroke=\"%23475467\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>')}:host ::ng-deep .ng-select .ng-clear-wrapper .ng-clear:hover{color:#dc3545}:host ::ng-deep .ng-select .ng-spinner-zone{padding-right:5px;padding-top:5px}:host ::ng-deep .ng-select .ng-arrow-wrapper{position:relative;width:20px}:host ::ng-deep .ng-select .ng-arrow-wrapper .ng-arrow{position:relative;display:block}:host ::ng-deep .ng-select .ng-arrow-wrapper .ng-arrow:after{position:absolute;content:\"\";display:inline-block;width:20px;height:20px;margin-left:10px;background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"><path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"%23475467\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>');background-size:contain;background-repeat:no-repeat;transform:translate(-50%,-50%)}:host ::ng-deep .ng-select.ng-select-disabled .ng-arrow-wrapper .ng-arrow:after{background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"><path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"%2398a2b3\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>')}:host ::ng-deep .ng-dropdown-panel{background-color:#fff;border:1px solid #D0D5DD;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;padding-top:6px;padding-bottom:6px}:host ::ng-deep .ng-dropdown-panel .scrollable-content.calculatingWidths{width:initial}:host ::ng-deep .ng-dropdown-panel.ng-select-bottom{border-radius:8px;border-top-color:#e6e6e6;margin-top:-1px}:host ::ng-deep .ng-dropdown-panel.ng-select-top{border-radius:8px;border-bottom-color:#e6e6e6;margin-bottom:-1px}: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{-webkit-user-select:none;user-select:none;padding:8px 10px;font-weight:500;color:#0000008a;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-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{background-color:#fff;color:#000000de;padding:1px 6px;display:flex;border-radius:6px;box-sizing:content-box}:host ::ng-deep .ng-select:not(.hasCustomOptionTpl) .ng-dropdown-panel .ng-dropdown-panel-items .ng-option div{white-space:nowrap;min-width:100%;cursor:pointer}:host .ng-select.truncateOptions ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{display:block}:host .ng-select.truncateOptions ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option div{overflow:hidden;text-overflow:ellipsis}:host .ng-select.nonTruncatedOptions ::ng-deep .ng-dropdown-panel{visibility:hidden}:host .ng-select.nonTruncatedOptions.verticalOrientation{overflow:initial}:host .ng-select.withSeparatingLine ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{border-bottom:1px solid #e3e3e3}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{font-weight:500}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked>div{color:#006912;background-color:#c3ebca}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected>div{color:#006912;background-color:#e6f7e9}: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>div{background-color:#f2f4f7;color:#101828}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled{color:#98a2b3;padding:8px}: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-dropdown-panel .ng-dropdown-panel-items .ng-option>div{color:#101828;padding:8px 10px;border-radius:6px;flex-grow:1}:host ::ng-deep .ng-select.ng-select-auto-grow{max-width:inherit}:host ::ng-deep .ng-select.ng-select-auto-grow .ng-dropdown-panel{width:auto}:host ::ng-deep .ng-select.grow{height:auto}:host ::ng-deep .ng-select.grow .ng-select-container{height:auto;align-items:center;flex-wrap:wrap}:host ::ng-deep .componentContainer .ng-input{height:100%}:host ::ng-deep .componentContainer .ng-input>input{font:inherit;color:inherit;line-height:inherit}.verticalOrientation{transform:translateY(100%) rotate(-90deg);transform-origin:top left}.verticalOrientation ::ng-deep ng-dropdown-panel.ng-select-bottom{transform:rotate(90deg) translate(100%);transform-origin:top right;border-top-color:#3ed778;border-bottom-right-radius:2px;border-bottom-left-radius:0;border-top-right-radius:2px}.tail{position:absolute;top:10px;z-index:2;background:transparent}.tailMock{opacity:0;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "dropdownPosition", "appendTo", "outsideClickEvent", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "tabFocusOnClearButton", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "deselectOnClick", "clearSearchOnAdd", "compareWith", "keyDownFn", "bindLabel", "bindValue", "appearance", "isOpen", "items"], outputs: ["bindLabelChange", "bindValueChange", "appearanceChange", "isOpenChange", "itemsChange", "blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"], exportAs: ["ngSelect"] }, { kind: "directive", type: i4.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i4.NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { kind: "directive", type: i4.NgFooterTemplateDirective, selector: "[ng-footer-tmp]" }] }); }
1757
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: SelectComponent, isStandalone: false, selector: "klp-form-select", inputs: { placeholder: "placeholder", prefix: "prefix", orientation: "orientation", options: "options", multiple: "multiple", multipleDisplayedAsAmount: "multipleDisplayedAsAmount", clearable: "clearable", truncateOptions: "truncateOptions", withSeparatingLine: "withSeparatingLine", searchable: "searchable", hasBorderLeft: "hasBorderLeft", hasBorderRight: "hasBorderRight", dropdownPosition: "dropdownPosition", dropdownAlignment: "dropdownAlignment", customSearchFn: "customSearchFn", footerElement: "footerElement", prefixTpl: "prefixTpl", suffixTpl: "suffixTpl" }, outputs: { onSearch: "onSearch", onEndReached: "onEndReached", onOpened: "onOpened", onClosed: "onClosed", onBlur: "onBlur", onClear: "onClear", onEnterKey: "onEnterKey" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: SelectComponent, multi: true }], queries: [{ propertyName: "customOptionTpl", first: true, predicate: KlpSelectOptionTemplateDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "ngSelect", first: true, predicate: ["ngSelect"], descendants: true }, { propertyName: "tailRef", first: true, predicate: ["tailRef"], descendants: true }, { propertyName: "tailMockRef", first: true, predicate: ["tailMockRef"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"componentContainer\"\n\t\t [class.verticalOrientation]=\"orientation === 'vertical'\"\n\t\t [ngClass]=\"{'grow': multiple, noBorderLeft: !hasBorderLeft, noBorderRight: !hasBorderRight, disabled: disabled, showErrors: isInErrorState()}\"\n\t\t [class]=\"sizeClass\"\n>\n\t@if (prefixTpl) {\n\t\t<div class=\"prefix-tpl\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"prefixTpl\"></ng-container>\n\t\t</div>\n\t}\n\n\t<div class=\"inputContainer\" [class.grow]=\"multiple\">\n\t\t<ng-select\n\t\t\t#ngSelect\n\t\t\t[placeholder]=\"getTranslation('placeholder')\"\n\t\t\tbindLabel=\"name\"\n\t\t\tbindValue=\"id\"\n\t\t\t[items]=\"options\"\n\t\t\t[clearable]=\"clearable\"\n\t\t\t[(ngModel)]=\"innerValue\"\n\t\t\t[ngClass]=\"{showErrors: isInErrorState(), truncateOptions: truncateOptions, nonTruncatedOptions: !truncateOptions, withSeparatingLine: withSeparatingLine, hasCustomOptionTpl: !!customOptionTpl, 'grow': multiple, disabled: disabled}\"\n\t\t\t(change)=\"setInnerValueAndNotify(innerValue)\"\n\t\t\t[multiple]=\"multiple\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t(blur)=\"touch(); onBlur.emit()\"\n\t\t\t(clear)=\"onClear.emit()\"\n\t\t\t(search)=\"searchQueryChanged($event.term)\"\n\t\t\t[searchable]=\"searchable\"\n\t\t\t[dropdownPosition]=\"dropdownPositionToUse\"\n\t\t\t[searchFn]=\"customSearchFn\"\n\t\t\t[selectOnTab]=\"true\"\n\t\t\t[virtualScroll]=\"true\"\n\t\t\t(scroll)=\"onScroll($event.end)\"\n\t\t\t(open)=\"onOpen()\"\n\t\t\t(close)=\"onClose()\"\n\t\t\t(focus)=\"onFocus()\"\n\t\t>\n\t\t\t<ng-template let-item=\"item\" ng-option-tmp>\n\t\t\t\t@if (customOptionTpl) {\n\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"customOptionTpl\" [ngTemplateOutletContext]=\"{item: item}\"></ng-container>\n\t\t\t\t}\n\t\t\t\t@if (!customOptionTpl) {\n\t\t\t\t\t<div [attr.data-cy]=\"item.id\">\n\t\t\t\t\t\t{{ item.name }}\n\t\t\t\t\t\t@if (item.description) {\n\t\t\t\t\t\t\t<div class=\"dropdown-item-description\">\n\t\t\t\t\t\t\t\t{{ item.description }}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t</ng-template>\n\t\t\t@if (multiple && multipleDisplayedAsAmount && innerValue?.length > 1) {\n\t\t\t\t<ng-template ng-multi-label-tmp>\n\t\t\t\t\t<div class=\"ng-value\">\n\t\t\t\t\t\t<span class=\"ng-value-label\">{{ getTranslation('amountSelected', innerValue?.length) }}</span>\n\t\t\t\t\t</div>\n\t\t\t\t</ng-template>\n\t\t\t}\n\t\t\t@if (footerElement) {\n\t\t\t\t<ng-template ng-footer-tmp>\n\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"footerElement\"></ng-container>\n\t\t\t\t</ng-template>\n\t\t\t}\n\t\t</ng-select>\n\n\t\t<div class=\"tail\" #tailRef>\n\t\t\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n\t\t</div>\n\t\t<!-- I need this mock to reserve the space. I cant use the normal tail because that opens the dropdown from ng-select -->\n\t\t<!-- I have no idea how to avoid that -->\n\t\t<div class=\"tailMock\" #tailMockRef>\n\t\t\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n\t\t</div>\n\t</div>\n\n\t@if (suffixTpl) {\n\t\t<div class=\"suffix\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"suffixTpl\"></ng-container>\n\t\t</div>\n\t}\n</div>\n", styles: [":host{display:block;position:relative}.componentContainer::-webkit-input-placeholder{color:#98a2b3}.componentContainer:-moz-placeholder{color:#98a2b3}.componentContainer::-moz-placeholder{color:#98a2b3}.componentContainer:-ms-input-placeholder{color:#98a2b3}.componentContainer{display:block;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:none;height:40px;width:100%;padding:.5rem .75rem;font-size:16px;font-weight:400;line-height:24px;color:#101828}.componentContainer:hover{border:1px solid #98A2B3}.componentContainer.showErrors{border:1px solid #ff8000;outline:.5px solid #ff8000}.componentContainer:focus,.componentContainer:focus-within{border:1px solid #00AC42;outline:1px solid #00AC42}.componentContainer.disabled{border:1px solid #F2F4F7;background-color:#f2f4f7;cursor:not-allowed}.componentContainer.input-sm{padding:.375rem .5rem;font-size:14px;line-height:20px;height:32px}.componentContainer.input-sm.grow{min-height:32px}.componentContainer.input-lg{padding:.625rem .75rem;height:44px}.componentContainer.input-lg.grow{min-height:44px}.componentContainer.grow{height:auto;min-height:40px}.componentContainer:placeholder-shown{text-overflow:ellipsis}.componentContainer{display:flex;flex-direction:row}.componentContainer.noBorderLeft{border-left:none;border-top-left-radius:0;border-bottom-left-radius:0}.componentContainer.noBorderRight{border-right:none;border-top-right-radius:0;border-bottom-right-radius:0}.componentContainer.input-sm{padding-top:3px;padding-bottom:3px}.componentContainer.input-sm ::ng-deep .inputContainer .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{height:24px}.componentContainer .prefix-tpl,.componentContainer .suffix{display:flex;align-items:center;flex-shrink:0}ng-select.ng-select.showErrors::ng-deep .ng-select-container{border-color:#ff8000}.inputContainer{width:100%}.inputContainer.grow{height:auto;display:flex;flex-direction:row}:host ::ng-deep ng-select.ng-select{height:100%;width:100%}:host ::ng-deep ng-select.ng-select .ng-select-container{outline:none;border:none;flex:1 1 auto;min-width:0;width:100%;height:100%;font-size:inherit;line-height:inherit;color:inherit;background:none}:host ::ng-deep ng-select.ng-select .ng-select-container.disabled{cursor:not-allowed}:host ::ng-deep ng-select.ng-select .ng-select-container :disabled{cursor:not-allowed}:host ::ng-deep ng-select.ng-select .ng-select-container{display:flex}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container{background:#fff}: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{position:relative;display:block}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container .ng-arrow:after{position:absolute;content:\"\";display:inline-block;width:20px;height:20px;margin-left:10px;background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"><path d=\"M15 12.5L10 7.5L5 12.5\" stroke=\"%23475467\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>');background-size:contain;background-repeat:no-repeat;transform:translate(-50%,-50%)}: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-disabled>.ng-select-container,:host ::ng-deep .ng-select.ng-select-disabled>.ng-select-container:hover{background-color:#f2f4f7;border-color:#f2f4f7}:host ::ng-deep .ng-select .ng-has-value .ng-placeholder{display:none}:host ::ng-deep .ng-select:not(.ng-select-multiple) .ng-placeholder,:host ::ng-deep .ng-select:not(.ng-select-multiple) .ng-value{width:0px;flex-grow:1;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{width:0px;max-width:0;flex-grow:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host ::ng-deep .ng-select.ng-select-multiple .ng-value{flex-direction:row-reverse}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{white-space:initial}:host ::ng-deep .ng-select .ng-select-container{display:flex;gap:.4rem;flex-direction:row;background-color:#fff;align-items:center;background-clip:padding-box;border:1px solid #e6ecf5;border-radius:2px;box-shadow:none;box-sizing:border-box;outline:none;overflow:visible;width:100%}:host ::ng-deep .ng-select .ng-select-container:hover{box-shadow:0 1px #0000000f}:host ::ng-deep .ng-select .ng-select-container .ng-value-container{height:100%;align-items:center;padding-left:10px;overflow:hidden}:host ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#98a2b3;max-width:100%}:host ::ng-deep .ng-select.ng-select-multiple>.ng-select-container :has(input:focus) .ng-placeholder{top:initial!important;position:absolute!important}:host ::ng-deep .ng-select.ng-select-multiple>.ng-select-container:not(:has(input:focus)):not(.ng-has-value) .ng-input{position:absolute}:host ::ng-deep .ng-select.ng-select-multiple>.ng-select-container .ng-value-container{gap: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:0 5px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{font-size:1em;background-color:#fff;border:1px solid #D0D5DD;border-radius:6px;display:flex;align-items:center;overflow:hidden;height:28px}: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:0 5px;overflow:hidden;text-overflow:ellipsis;line-height:22px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{display:inline-block;padding:0 5px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{position:relative;color:transparent;width:20px;height:20px;padding:0 10px 0 0}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left:after{position:absolute;left:0;content:\"\";display:inline-block;width:20px;height:20px;background-image:url('data:image/svg+xml;utf8,<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M13.5 6.5L6.5 13.5M6.5 6.5L13.5 13.5\" stroke=\"%2398A2B3\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>');background-size:contain;background-repeat:no-repeat}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left:hover:after{background-image:url('data:image/svg+xml;utf8,<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"20\" height=\"20\" rx=\"3\" fill=\"%23F2F4F7\"/><path d=\"M13.5 6.5L6.5 13.5M6.5 6.5L13.5 13.5\" stroke=\"%23667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>')}: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.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{top:5px;padding-left:3px;position:static}:host ::ng-deep .ng-select .ng-clear-wrapper{position:relative;width:24px;height:24px}:host ::ng-deep .ng-select .ng-clear-wrapper .ng-clear{display:block;color:transparent}:host ::ng-deep .ng-select .ng-clear-wrapper .ng-clear:after{position:absolute;left:0;content:\"\";display:inline-block;width:24px;height:24px;background-image:url('data:image/svg+xml;utf8,<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M17 7L7 17M7 7L17 17\" stroke=\"%23667085\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>');background-size:contain;background-repeat:no-repeat}:host ::ng-deep .ng-select .ng-clear-wrapper:hover .ng-clear:after{background-image:url('data:image/svg+xml;utf8,<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"24\" height=\"24\" rx=\"4\" fill=\"%23F2F4F7\"/><path d=\"M17 7L7 17M7 7L17 17\" stroke=\"%23475467\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>')}:host ::ng-deep .ng-select .ng-clear-wrapper .ng-clear:hover{color:#dc3545}:host ::ng-deep .ng-select .ng-spinner-zone{padding-right:5px;padding-top:5px}:host ::ng-deep .ng-select .ng-arrow-wrapper{position:relative;width:20px}:host ::ng-deep .ng-select .ng-arrow-wrapper .ng-arrow{position:relative;display:block}:host ::ng-deep .ng-select .ng-arrow-wrapper .ng-arrow:after{position:absolute;content:\"\";display:inline-block;width:20px;height:20px;margin-left:10px;background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"><path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"%23475467\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>');background-size:contain;background-repeat:no-repeat;transform:translate(-50%,-50%)}:host ::ng-deep .ng-select.ng-select-disabled .ng-arrow-wrapper .ng-arrow:after{background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"><path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"%2398a2b3\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>')}:host ::ng-deep .ng-dropdown-panel{background-color:#fff;border:1px solid #D0D5DD;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;padding-top:6px;padding-bottom:6px}:host ::ng-deep .ng-dropdown-panel .scrollable-content.calculatingWidths{width:initial}:host ::ng-deep .ng-dropdown-panel.ng-select-bottom{border-radius:8px;border-top-color:#e6e6e6;margin-top:-1px}:host ::ng-deep .ng-dropdown-panel.ng-select-top{border-radius:8px;border-bottom-color:#e6e6e6;margin-bottom:-1px}: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{-webkit-user-select:none;user-select:none;padding:8px 10px;font-weight:500;color:#0000008a;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-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{background-color:#fff;color:#000000de;padding:1px 6px;display:flex;border-radius:6px;box-sizing:content-box}:host ::ng-deep .ng-select:not(.hasCustomOptionTpl) .ng-dropdown-panel .ng-dropdown-panel-items .ng-option div{white-space:nowrap;min-width:100%;cursor:pointer}:host .ng-select.truncateOptions ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{display:block}:host .ng-select.truncateOptions ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option div{overflow:hidden;text-overflow:ellipsis}:host .ng-select.nonTruncatedOptions ::ng-deep .ng-dropdown-panel{visibility:hidden}:host .ng-select.nonTruncatedOptions.verticalOrientation{overflow:initial}:host .ng-select.withSeparatingLine ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{border-bottom:1px solid #e3e3e3}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{font-weight:500}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked>div{color:#006912;background-color:#c3ebca}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected>div{color:#006912;background-color:#e6f7e9}: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>div{background-color:#f2f4f7;color:#101828}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled{color:#98a2b3;padding:8px}: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-dropdown-panel .ng-dropdown-panel-items .ng-option>div{color:#101828;padding:8px 10px;border-radius:6px;flex-grow:1}:host ::ng-deep .ng-select.ng-select-auto-grow{max-width:inherit}:host ::ng-deep .ng-select.ng-select-auto-grow .ng-dropdown-panel{width:auto}:host ::ng-deep .ng-select.grow{height:auto}:host ::ng-deep .ng-select.grow .ng-select-container{height:auto;align-items:center;flex-wrap:wrap}:host ::ng-deep .componentContainer .ng-input{height:100%}:host ::ng-deep .componentContainer .ng-input>input{font:inherit;color:inherit;line-height:inherit}.verticalOrientation{transform:translateY(100%) rotate(-90deg);transform-origin:top left}.verticalOrientation ::ng-deep ng-dropdown-panel.ng-select-bottom{transform:rotate(90deg) translate(100%);transform-origin:top right;border-top-color:#3ed778;border-bottom-right-radius:2px;border-bottom-left-radius:0;border-top-right-radius:2px}.tail{position:absolute;top:10px;z-index:2;background:transparent}.tailMock{opacity:0;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "dropdownPosition", "appendTo", "outsideClickEvent", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "tabFocusOnClearButton", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "deselectOnClick", "clearSearchOnAdd", "compareWith", "keyDownFn", "bindLabel", "bindValue", "appearance", "isOpen", "items"], outputs: ["bindLabelChange", "bindValueChange", "appearanceChange", "isOpenChange", "itemsChange", "blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"], exportAs: ["ngSelect"] }, { kind: "directive", type: i4.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i4.NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { kind: "directive", type: i4.NgFooterTemplateDirective, selector: "[ng-footer-tmp]" }] }); }
1677
1758
  }
1678
1759
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: SelectComponent, decorators: [{
1679
1760
  type: Component,
1680
- args: [{ selector: 'klp-form-select', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: SelectComponent, multi: true }], standalone: false, template: "<div class=\"componentContainer\"\n\t\t [class.verticalOrientation]=\"orientation === 'vertical'\"\n\t\t [ngClass]=\"{'input-sm': size === 'small', 'input-lg': size === 'large', 'grow': multiple, noBorderLeft: !hasBorderLeft, noBorderRight: !hasBorderRight, disabled: disabled}\"\n>\n\t@if (prefixTpl) {\n\t\t<div class=\"prefix-tpl\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"prefixTpl\"></ng-container>\n\t\t</div>\n\t}\n\n\t<div class=\"inputContainer\" [class.grow]=\"multiple\">\n\t\t<ng-select\n\t\t\t#ngSelect\n\t\t\t[placeholder]=\"getTranslation('placeholder')\"\n\t\t\tbindLabel=\"name\"\n\t\t\tbindValue=\"id\"\n\t\t\t[items]=\"options\"\n\t\t\t[clearable]=\"clearable\"\n\t\t\t[(ngModel)]=\"innerValue\"\n\t\t\t[ngClass]=\"{showErrors: isInErrorState(), truncateOptions: truncateOptions, nonTruncatedOptions: !truncateOptions, withSeparatingLine: withSeparatingLine, hasCustomOptionTpl: !!customOptionTpl, 'grow': multiple, disabled: disabled}\"\n\t\t\t(change)=\"setInnerValueAndNotify(innerValue)\"\n\t\t\t[multiple]=\"multiple\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t(blur)=\"touch(); onBlur.emit()\"\n\t\t\t(clear)=\"onClear.emit()\"\n\t\t\t(search)=\"searchQueryChanged($event.term)\"\n\t\t\t[searchable]=\"searchable\"\n\t\t\t[dropdownPosition]=\"dropdownPositionToUse\"\n\t\t\t[searchFn]=\"customSearchFn\"\n\t\t\t[selectOnTab]=\"true\"\n\t\t\t[virtualScroll]=\"true\"\n\t\t\t(scroll)=\"onScroll($event.end)\"\n\t\t\t(open)=\"onOpen()\"\n\t\t\t(close)=\"onClose()\"\n\t\t\t(focus)=\"onFocus()\"\n\t\t>\n\t\t\t<ng-template let-item=\"item\" ng-option-tmp>\n\t\t\t\t@if (customOptionTpl) {\n\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"customOptionTpl\" [ngTemplateOutletContext]=\"{item: item}\"></ng-container>\n\t\t\t\t}\n\t\t\t\t@if (!customOptionTpl) {\n\t\t\t\t\t<div [attr.data-cy]=\"item.id\">\n\t\t\t\t\t\t{{ item.name }}\n\t\t\t\t\t\t@if (item.description) {\n\t\t\t\t\t\t\t<div class=\"dropdown-item-description\">\n\t\t\t\t\t\t\t\t{{ item.description }}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t</ng-template>\n\t\t\t@if (multiple && multipleDisplayedAsAmount && innerValue?.length > 1) {\n\t\t\t\t<ng-template ng-multi-label-tmp>\n\t\t\t\t\t<div class=\"ng-value\">\n\t\t\t\t\t\t<span class=\"ng-value-label\">{{ getTranslation('amountSelected', innerValue?.length) }}</span>\n\t\t\t\t\t</div>\n\t\t\t\t</ng-template>\n\t\t\t}\n\t\t\t@if (footerElement) {\n\t\t\t\t<ng-template ng-footer-tmp>\n\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"footerElement\"></ng-container>\n\t\t\t\t</ng-template>\n\t\t\t}\n\t\t</ng-select>\n\n\t\t<div class=\"tail\" #tailRef>\n\t\t\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n\t\t</div>\n\t\t<!-- I need this mock to reserve the space. I cant use the normal tail because that opens the dropdown from ng-select -->\n\t\t<!-- I have no idea how to avoid that -->\n\t\t<div class=\"tailMock\" #tailMockRef>\n\t\t\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n\t\t</div>\n\t</div>\n\n\t@if (suffixTpl) {\n\t\t<div class=\"suffix\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"suffixTpl\"></ng-container>\n\t\t</div>\n\t}\n</div>\n", styles: [":host{display:block;position:relative}.componentContainer::-webkit-input-placeholder{color:#98a2b3}.componentContainer:-moz-placeholder{color:#98a2b3}.componentContainer::-moz-placeholder{color:#98a2b3}.componentContainer:-ms-input-placeholder{color:#98a2b3}.componentContainer{display:block;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:none;height:40px;width:100%;padding:.5rem .75rem;font-size:16px;font-weight:400;line-height:24px;color:#101828}.componentContainer:focus,.componentContainer:focus-within{outline:1px solid #00AC42;box-shadow:none;border-color:#00ac42}.componentContainer.input-sm{padding:.375rem .5rem;font-size:14px;line-height:20px;height:32px}.componentContainer.input-sm.grow{min-height:32px}.componentContainer.input-lg{padding:.625rem .75rem;height:44px}.componentContainer.input-lg.grow{min-height:44px}.componentContainer.grow{height:auto;min-height:40px}.componentContainer:hover{border-color:#98a2b3}.componentContainer.error{border-color:#dc3545;background-color:#f6cdd1}.componentContainer.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}.componentContainer:placeholder-shown{text-overflow:ellipsis}.componentContainer.disabled{background-color:#f2f4f7;border-color:#f2f4f7;cursor:not-allowed}.componentContainer{display:flex;flex-direction:row}.componentContainer.noBorderLeft{border-left:none;border-top-left-radius:0;border-bottom-left-radius:0}.componentContainer.noBorderRight{border-right:none;border-top-right-radius:0;border-bottom-right-radius:0}.componentContainer .prefix-tpl,.componentContainer .suffix{display:flex;align-items:center;flex-shrink:0}ng-select.ng-select.showErrors::ng-deep .ng-select-container{border-color:#ff8000}.inputContainer{width:100%}.inputContainer.grow{height:auto;display:flex;flex-direction:row}:host ::ng-deep ng-select.ng-select{height:100%;width:100%}:host ::ng-deep ng-select.ng-select .ng-select-container{outline:none;border:none;flex:1 1 auto;min-width:0;width:auto;height:100%;font-size:inherit;line-height:inherit;color:inherit;background:none}:host ::ng-deep ng-select.ng-select .ng-select-container.disabled{cursor:not-allowed}:host ::ng-deep ng-select.ng-select .ng-select-container :disabled{cursor:not-allowed}:host ::ng-deep ng-select.ng-select .ng-select-container{display:flex}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container{background:#fff}: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{position:relative;display:block}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container .ng-arrow:after{position:absolute;content:\"\";display:inline-block;width:20px;height:20px;margin-left:10px;background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"><path d=\"M15 12.5L10 7.5L5 12.5\" stroke=\"%23475467\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>');background-size:contain;background-repeat:no-repeat;transform:translate(-50%,-50%)}: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-disabled>.ng-select-container,:host ::ng-deep .ng-select.ng-select-disabled>.ng-select-container:hover{background-color:#f2f4f7;border-color:#f2f4f7}:host ::ng-deep .ng-select .ng-has-value .ng-placeholder{display:none}:host ::ng-deep .ng-select:not(.ng-select-multiple) .ng-placeholder,:host ::ng-deep .ng-select:not(.ng-select-multiple) .ng-value{width:0px;flex-grow:1;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{width:0px;max-width:0;flex-grow:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host ::ng-deep .ng-select.ng-select-multiple .ng-value{flex-direction:row-reverse}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{white-space:initial}:host ::ng-deep .ng-select .ng-select-container{display:flex;gap:.4rem;flex-direction:row;background-color:#fff;align-items:center;background-clip:padding-box;border:1px solid #e6ecf5;border-radius:2px;box-shadow:none;box-sizing:border-box;outline:none;overflow:visible;width:100%}:host ::ng-deep .ng-select .ng-select-container:hover{box-shadow:0 1px #0000000f}:host ::ng-deep .ng-select .ng-select-container .ng-value-container{height:100%;align-items:center;padding-left:10px;overflow:hidden}:host ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#98a2b3;max-width:100%}:host ::ng-deep .ng-select.ng-select-multiple>.ng-select-container :has(input:focus) .ng-placeholder{top:initial!important;position:absolute!important}:host ::ng-deep .ng-select.ng-select-multiple>.ng-select-container:not(:has(input:focus)):not(.ng-has-value) .ng-input{position:absolute}:host ::ng-deep .ng-select.ng-select-multiple>.ng-select-container .ng-value-container{gap: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:0 5px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{font-size:1em;background-color:#fff;border:1px solid #D0D5DD;border-radius:6px;display:flex;align-items:center;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:0 5px;overflow:hidden;text-overflow:ellipsis;line-height:22px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{display:inline-block;padding:0 5px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{position:relative;color:transparent;width:20px;height:20px;padding:0 10px 0 0}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left:after{position:absolute;left:0;content:\"\";display:inline-block;width:20px;height:20px;background-image:url('data:image/svg+xml;utf8,<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M13.5 6.5L6.5 13.5M6.5 6.5L13.5 13.5\" stroke=\"%2398A2B3\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>');background-size:contain;background-repeat:no-repeat}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left:hover:after{background-image:url('data:image/svg+xml;utf8,<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"20\" height=\"20\" rx=\"3\" fill=\"%23F2F4F7\"/><path d=\"M13.5 6.5L6.5 13.5M6.5 6.5L13.5 13.5\" stroke=\"%23667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>')}: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.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{top:5px;padding-left:3px;position:static}:host ::ng-deep .ng-select .ng-clear-wrapper{position:relative;width:24px;height:24px}:host ::ng-deep .ng-select .ng-clear-wrapper .ng-clear{display:block;color:transparent}:host ::ng-deep .ng-select .ng-clear-wrapper .ng-clear:after{position:absolute;left:0;content:\"\";display:inline-block;width:24px;height:24px;background-image:url('data:image/svg+xml;utf8,<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M17 7L7 17M7 7L17 17\" stroke=\"%23667085\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>');background-size:contain;background-repeat:no-repeat}:host ::ng-deep .ng-select .ng-clear-wrapper:hover .ng-clear:after{background-image:url('data:image/svg+xml;utf8,<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"24\" height=\"24\" rx=\"4\" fill=\"%23F2F4F7\"/><path d=\"M17 7L7 17M7 7L17 17\" stroke=\"%23475467\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>')}:host ::ng-deep .ng-select .ng-clear-wrapper .ng-clear:hover{color:#dc3545}:host ::ng-deep .ng-select .ng-spinner-zone{padding-right:5px;padding-top:5px}:host ::ng-deep .ng-select .ng-arrow-wrapper{position:relative;width:20px}:host ::ng-deep .ng-select .ng-arrow-wrapper .ng-arrow{position:relative;display:block}:host ::ng-deep .ng-select .ng-arrow-wrapper .ng-arrow:after{position:absolute;content:\"\";display:inline-block;width:20px;height:20px;margin-left:10px;background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"><path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"%23475467\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>');background-size:contain;background-repeat:no-repeat;transform:translate(-50%,-50%)}:host ::ng-deep .ng-select.ng-select-disabled .ng-arrow-wrapper .ng-arrow:after{background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"><path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"%2398a2b3\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>')}:host ::ng-deep .ng-dropdown-panel{background-color:#fff;border:1px solid #D0D5DD;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;padding-top:6px;padding-bottom:6px}:host ::ng-deep .ng-dropdown-panel .scrollable-content.calculatingWidths{width:initial}:host ::ng-deep .ng-dropdown-panel.ng-select-bottom{border-radius:8px;border-top-color:#e6e6e6;margin-top:-1px}:host ::ng-deep .ng-dropdown-panel.ng-select-top{border-radius:8px;border-bottom-color:#e6e6e6;margin-bottom:-1px}: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{-webkit-user-select:none;user-select:none;padding:8px 10px;font-weight:500;color:#0000008a;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-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{background-color:#fff;color:#000000de;padding:1px 6px;display:flex;border-radius:6px;box-sizing:content-box}:host ::ng-deep .ng-select:not(.hasCustomOptionTpl) .ng-dropdown-panel .ng-dropdown-panel-items .ng-option div{white-space:nowrap;min-width:100%;cursor:pointer}:host .ng-select.truncateOptions ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{display:block}:host .ng-select.truncateOptions ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option div{overflow:hidden;text-overflow:ellipsis}:host .ng-select.nonTruncatedOptions ::ng-deep .ng-dropdown-panel{visibility:hidden}:host .ng-select.nonTruncatedOptions.verticalOrientation{overflow:initial}:host .ng-select.withSeparatingLine ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{border-bottom:1px solid #e3e3e3}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{font-weight:500}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked>div{color:#006912;background-color:#c3ebca}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected>div{color:#006912;background-color:#e6f7e9}: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>div{background-color:#f2f4f7;color:#101828}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled{color:#98a2b3;padding:8px}: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-dropdown-panel .ng-dropdown-panel-items .ng-option>div{color:#101828;padding:8px 10px;border-radius:6px;flex-grow:1}:host ::ng-deep .ng-select.ng-select-auto-grow{max-width:inherit}:host ::ng-deep .ng-select.ng-select-auto-grow .ng-dropdown-panel{width:auto}:host ::ng-deep .ng-select.grow{height:auto}:host ::ng-deep .ng-select.grow .ng-select-container{height:auto;align-items:center;flex-wrap:wrap}:host ::ng-deep .componentContainer .ng-input{height:100%}:host ::ng-deep .componentContainer .ng-input>input{font:inherit;color:inherit;line-height:inherit}.verticalOrientation{transform:translateY(100%) rotate(-90deg);transform-origin:top left}.verticalOrientation ::ng-deep ng-dropdown-panel.ng-select-bottom{transform:rotate(90deg) translate(100%);transform-origin:top right;border-top-color:#3ed778;border-bottom-right-radius:2px;border-bottom-left-radius:0;border-top-right-radius:2px}.tail{position:absolute;top:10px;z-index:2;background:transparent}.tailMock{opacity:0;pointer-events:none}\n"] }]
1761
+ args: [{ selector: 'klp-form-select', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: SelectComponent, multi: true }], standalone: false, template: "<div class=\"componentContainer\"\n\t\t [class.verticalOrientation]=\"orientation === 'vertical'\"\n\t\t [ngClass]=\"{'grow': multiple, noBorderLeft: !hasBorderLeft, noBorderRight: !hasBorderRight, disabled: disabled, showErrors: isInErrorState()}\"\n\t\t [class]=\"sizeClass\"\n>\n\t@if (prefixTpl) {\n\t\t<div class=\"prefix-tpl\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"prefixTpl\"></ng-container>\n\t\t</div>\n\t}\n\n\t<div class=\"inputContainer\" [class.grow]=\"multiple\">\n\t\t<ng-select\n\t\t\t#ngSelect\n\t\t\t[placeholder]=\"getTranslation('placeholder')\"\n\t\t\tbindLabel=\"name\"\n\t\t\tbindValue=\"id\"\n\t\t\t[items]=\"options\"\n\t\t\t[clearable]=\"clearable\"\n\t\t\t[(ngModel)]=\"innerValue\"\n\t\t\t[ngClass]=\"{showErrors: isInErrorState(), truncateOptions: truncateOptions, nonTruncatedOptions: !truncateOptions, withSeparatingLine: withSeparatingLine, hasCustomOptionTpl: !!customOptionTpl, 'grow': multiple, disabled: disabled}\"\n\t\t\t(change)=\"setInnerValueAndNotify(innerValue)\"\n\t\t\t[multiple]=\"multiple\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t(blur)=\"touch(); onBlur.emit()\"\n\t\t\t(clear)=\"onClear.emit()\"\n\t\t\t(search)=\"searchQueryChanged($event.term)\"\n\t\t\t[searchable]=\"searchable\"\n\t\t\t[dropdownPosition]=\"dropdownPositionToUse\"\n\t\t\t[searchFn]=\"customSearchFn\"\n\t\t\t[selectOnTab]=\"true\"\n\t\t\t[virtualScroll]=\"true\"\n\t\t\t(scroll)=\"onScroll($event.end)\"\n\t\t\t(open)=\"onOpen()\"\n\t\t\t(close)=\"onClose()\"\n\t\t\t(focus)=\"onFocus()\"\n\t\t>\n\t\t\t<ng-template let-item=\"item\" ng-option-tmp>\n\t\t\t\t@if (customOptionTpl) {\n\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"customOptionTpl\" [ngTemplateOutletContext]=\"{item: item}\"></ng-container>\n\t\t\t\t}\n\t\t\t\t@if (!customOptionTpl) {\n\t\t\t\t\t<div [attr.data-cy]=\"item.id\">\n\t\t\t\t\t\t{{ item.name }}\n\t\t\t\t\t\t@if (item.description) {\n\t\t\t\t\t\t\t<div class=\"dropdown-item-description\">\n\t\t\t\t\t\t\t\t{{ item.description }}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t</ng-template>\n\t\t\t@if (multiple && multipleDisplayedAsAmount && innerValue?.length > 1) {\n\t\t\t\t<ng-template ng-multi-label-tmp>\n\t\t\t\t\t<div class=\"ng-value\">\n\t\t\t\t\t\t<span class=\"ng-value-label\">{{ getTranslation('amountSelected', innerValue?.length) }}</span>\n\t\t\t\t\t</div>\n\t\t\t\t</ng-template>\n\t\t\t}\n\t\t\t@if (footerElement) {\n\t\t\t\t<ng-template ng-footer-tmp>\n\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"footerElement\"></ng-container>\n\t\t\t\t</ng-template>\n\t\t\t}\n\t\t</ng-select>\n\n\t\t<div class=\"tail\" #tailRef>\n\t\t\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n\t\t</div>\n\t\t<!-- I need this mock to reserve the space. I cant use the normal tail because that opens the dropdown from ng-select -->\n\t\t<!-- I have no idea how to avoid that -->\n\t\t<div class=\"tailMock\" #tailMockRef>\n\t\t\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n\t\t</div>\n\t</div>\n\n\t@if (suffixTpl) {\n\t\t<div class=\"suffix\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"suffixTpl\"></ng-container>\n\t\t</div>\n\t}\n</div>\n", styles: [":host{display:block;position:relative}.componentContainer::-webkit-input-placeholder{color:#98a2b3}.componentContainer:-moz-placeholder{color:#98a2b3}.componentContainer::-moz-placeholder{color:#98a2b3}.componentContainer:-ms-input-placeholder{color:#98a2b3}.componentContainer{display:block;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:none;height:40px;width:100%;padding:.5rem .75rem;font-size:16px;font-weight:400;line-height:24px;color:#101828}.componentContainer:hover{border:1px solid #98A2B3}.componentContainer.showErrors{border:1px solid #ff8000;outline:.5px solid #ff8000}.componentContainer:focus,.componentContainer:focus-within{border:1px solid #00AC42;outline:1px solid #00AC42}.componentContainer.disabled{border:1px solid #F2F4F7;background-color:#f2f4f7;cursor:not-allowed}.componentContainer.input-sm{padding:.375rem .5rem;font-size:14px;line-height:20px;height:32px}.componentContainer.input-sm.grow{min-height:32px}.componentContainer.input-lg{padding:.625rem .75rem;height:44px}.componentContainer.input-lg.grow{min-height:44px}.componentContainer.grow{height:auto;min-height:40px}.componentContainer:placeholder-shown{text-overflow:ellipsis}.componentContainer{display:flex;flex-direction:row}.componentContainer.noBorderLeft{border-left:none;border-top-left-radius:0;border-bottom-left-radius:0}.componentContainer.noBorderRight{border-right:none;border-top-right-radius:0;border-bottom-right-radius:0}.componentContainer.input-sm{padding-top:3px;padding-bottom:3px}.componentContainer.input-sm ::ng-deep .inputContainer .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{height:24px}.componentContainer .prefix-tpl,.componentContainer .suffix{display:flex;align-items:center;flex-shrink:0}ng-select.ng-select.showErrors::ng-deep .ng-select-container{border-color:#ff8000}.inputContainer{width:100%}.inputContainer.grow{height:auto;display:flex;flex-direction:row}:host ::ng-deep ng-select.ng-select{height:100%;width:100%}:host ::ng-deep ng-select.ng-select .ng-select-container{outline:none;border:none;flex:1 1 auto;min-width:0;width:100%;height:100%;font-size:inherit;line-height:inherit;color:inherit;background:none}:host ::ng-deep ng-select.ng-select .ng-select-container.disabled{cursor:not-allowed}:host ::ng-deep ng-select.ng-select .ng-select-container :disabled{cursor:not-allowed}:host ::ng-deep ng-select.ng-select .ng-select-container{display:flex}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container{background:#fff}: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{position:relative;display:block}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container .ng-arrow:after{position:absolute;content:\"\";display:inline-block;width:20px;height:20px;margin-left:10px;background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"><path d=\"M15 12.5L10 7.5L5 12.5\" stroke=\"%23475467\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>');background-size:contain;background-repeat:no-repeat;transform:translate(-50%,-50%)}: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-disabled>.ng-select-container,:host ::ng-deep .ng-select.ng-select-disabled>.ng-select-container:hover{background-color:#f2f4f7;border-color:#f2f4f7}:host ::ng-deep .ng-select .ng-has-value .ng-placeholder{display:none}:host ::ng-deep .ng-select:not(.ng-select-multiple) .ng-placeholder,:host ::ng-deep .ng-select:not(.ng-select-multiple) .ng-value{width:0px;flex-grow:1;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{width:0px;max-width:0;flex-grow:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host ::ng-deep .ng-select.ng-select-multiple .ng-value{flex-direction:row-reverse}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{white-space:initial}:host ::ng-deep .ng-select .ng-select-container{display:flex;gap:.4rem;flex-direction:row;background-color:#fff;align-items:center;background-clip:padding-box;border:1px solid #e6ecf5;border-radius:2px;box-shadow:none;box-sizing:border-box;outline:none;overflow:visible;width:100%}:host ::ng-deep .ng-select .ng-select-container:hover{box-shadow:0 1px #0000000f}:host ::ng-deep .ng-select .ng-select-container .ng-value-container{height:100%;align-items:center;padding-left:10px;overflow:hidden}:host ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#98a2b3;max-width:100%}:host ::ng-deep .ng-select.ng-select-multiple>.ng-select-container :has(input:focus) .ng-placeholder{top:initial!important;position:absolute!important}:host ::ng-deep .ng-select.ng-select-multiple>.ng-select-container:not(:has(input:focus)):not(.ng-has-value) .ng-input{position:absolute}:host ::ng-deep .ng-select.ng-select-multiple>.ng-select-container .ng-value-container{gap: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:0 5px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{font-size:1em;background-color:#fff;border:1px solid #D0D5DD;border-radius:6px;display:flex;align-items:center;overflow:hidden;height:28px}: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:0 5px;overflow:hidden;text-overflow:ellipsis;line-height:22px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{display:inline-block;padding:0 5px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{position:relative;color:transparent;width:20px;height:20px;padding:0 10px 0 0}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left:after{position:absolute;left:0;content:\"\";display:inline-block;width:20px;height:20px;background-image:url('data:image/svg+xml;utf8,<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M13.5 6.5L6.5 13.5M6.5 6.5L13.5 13.5\" stroke=\"%2398A2B3\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>');background-size:contain;background-repeat:no-repeat}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left:hover:after{background-image:url('data:image/svg+xml;utf8,<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"20\" height=\"20\" rx=\"3\" fill=\"%23F2F4F7\"/><path d=\"M13.5 6.5L6.5 13.5M6.5 6.5L13.5 13.5\" stroke=\"%23667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>')}: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.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{top:5px;padding-left:3px;position:static}:host ::ng-deep .ng-select .ng-clear-wrapper{position:relative;width:24px;height:24px}:host ::ng-deep .ng-select .ng-clear-wrapper .ng-clear{display:block;color:transparent}:host ::ng-deep .ng-select .ng-clear-wrapper .ng-clear:after{position:absolute;left:0;content:\"\";display:inline-block;width:24px;height:24px;background-image:url('data:image/svg+xml;utf8,<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M17 7L7 17M7 7L17 17\" stroke=\"%23667085\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>');background-size:contain;background-repeat:no-repeat}:host ::ng-deep .ng-select .ng-clear-wrapper:hover .ng-clear:after{background-image:url('data:image/svg+xml;utf8,<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"24\" height=\"24\" rx=\"4\" fill=\"%23F2F4F7\"/><path d=\"M17 7L7 17M7 7L17 17\" stroke=\"%23475467\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>')}:host ::ng-deep .ng-select .ng-clear-wrapper .ng-clear:hover{color:#dc3545}:host ::ng-deep .ng-select .ng-spinner-zone{padding-right:5px;padding-top:5px}:host ::ng-deep .ng-select .ng-arrow-wrapper{position:relative;width:20px}:host ::ng-deep .ng-select .ng-arrow-wrapper .ng-arrow{position:relative;display:block}:host ::ng-deep .ng-select .ng-arrow-wrapper .ng-arrow:after{position:absolute;content:\"\";display:inline-block;width:20px;height:20px;margin-left:10px;background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"><path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"%23475467\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>');background-size:contain;background-repeat:no-repeat;transform:translate(-50%,-50%)}:host ::ng-deep .ng-select.ng-select-disabled .ng-arrow-wrapper .ng-arrow:after{background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"><path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"%2398a2b3\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>')}:host ::ng-deep .ng-dropdown-panel{background-color:#fff;border:1px solid #D0D5DD;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;padding-top:6px;padding-bottom:6px}:host ::ng-deep .ng-dropdown-panel .scrollable-content.calculatingWidths{width:initial}:host ::ng-deep .ng-dropdown-panel.ng-select-bottom{border-radius:8px;border-top-color:#e6e6e6;margin-top:-1px}:host ::ng-deep .ng-dropdown-panel.ng-select-top{border-radius:8px;border-bottom-color:#e6e6e6;margin-bottom:-1px}: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{-webkit-user-select:none;user-select:none;padding:8px 10px;font-weight:500;color:#0000008a;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-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{background-color:#fff;color:#000000de;padding:1px 6px;display:flex;border-radius:6px;box-sizing:content-box}:host ::ng-deep .ng-select:not(.hasCustomOptionTpl) .ng-dropdown-panel .ng-dropdown-panel-items .ng-option div{white-space:nowrap;min-width:100%;cursor:pointer}:host .ng-select.truncateOptions ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{display:block}:host .ng-select.truncateOptions ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option div{overflow:hidden;text-overflow:ellipsis}:host .ng-select.nonTruncatedOptions ::ng-deep .ng-dropdown-panel{visibility:hidden}:host .ng-select.nonTruncatedOptions.verticalOrientation{overflow:initial}:host .ng-select.withSeparatingLine ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{border-bottom:1px solid #e3e3e3}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{font-weight:500}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked>div{color:#006912;background-color:#c3ebca}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected>div{color:#006912;background-color:#e6f7e9}: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>div{background-color:#f2f4f7;color:#101828}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled{color:#98a2b3;padding:8px}: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-dropdown-panel .ng-dropdown-panel-items .ng-option>div{color:#101828;padding:8px 10px;border-radius:6px;flex-grow:1}:host ::ng-deep .ng-select.ng-select-auto-grow{max-width:inherit}:host ::ng-deep .ng-select.ng-select-auto-grow .ng-dropdown-panel{width:auto}:host ::ng-deep .ng-select.grow{height:auto}:host ::ng-deep .ng-select.grow .ng-select-container{height:auto;align-items:center;flex-wrap:wrap}:host ::ng-deep .componentContainer .ng-input{height:100%}:host ::ng-deep .componentContainer .ng-input>input{font:inherit;color:inherit;line-height:inherit}.verticalOrientation{transform:translateY(100%) rotate(-90deg);transform-origin:top left}.verticalOrientation ::ng-deep ng-dropdown-panel.ng-select-bottom{transform:rotate(90deg) translate(100%);transform-origin:top right;border-top-color:#3ed778;border-bottom-right-radius:2px;border-bottom-left-radius:0;border-top-right-radius:2px}.tail{position:absolute;top:10px;z-index:2;background:transparent}.tailMock{opacity:0;pointer-events:none}\n"] }]
1681
1762
  }], ctorParameters: () => [{ type: FormElementComponent, decorators: [{
1682
1763
  type: Optional
1683
1764
  }, {
@@ -1723,8 +1804,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
1723
1804
  type: Input
1724
1805
  }], footerElement: [{
1725
1806
  type: Input
1726
- }], size: [{
1727
- type: Input
1728
1807
  }], prefixTpl: [{
1729
1808
  type: Input
1730
1809
  }], suffixTpl: [{
@@ -1771,13 +1850,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
1771
1850
  }] } });
1772
1851
 
1773
1852
  class SortableItemsComponent extends ValueAccessorBase {
1774
- constructor(parent, controlContainer, ngZone) {
1775
- super(parent, controlContainer);
1776
- this.parent = parent;
1777
- this.controlContainer = controlContainer;
1778
- this.ngZone = ngZone;
1853
+ constructor() {
1854
+ super(...arguments);
1779
1855
  this.sortableItemSize = 'lg';
1780
1856
  this.scrollInterval = null;
1857
+ this.ngZone = inject(NgZone);
1781
1858
  this.onDragOver = (ev) => {
1782
1859
  ev.preventDefault();
1783
1860
  };
@@ -1915,7 +1992,7 @@ class SortableItemsComponent extends ValueAccessorBase {
1915
1992
  clearInterval(this.scrollInterval);
1916
1993
  this.scrollInterval = null;
1917
1994
  }
1918
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: SortableItemsComponent, deps: [{ token: FormElementComponent, host: true, optional: true }, { token: i2.ControlContainer, host: true, optional: true }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
1995
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: SortableItemsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
1919
1996
  static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: SortableItemsComponent, isStandalone: false, selector: "klp-form-sortable-items", inputs: { sortableItemSize: "sortableItemSize" }, providers: [
1920
1997
  {
1921
1998
  provide: NG_VALUE_ACCESSOR,
@@ -1933,15 +2010,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
1933
2010
  multi: true,
1934
2011
  },
1935
2012
  ], standalone: false, template: "<ng-template #listItem>\n @for (item of innerValue; track item; let index = $index) {\n <li\n class=\"sortableItem\"\n [draggable]=\"!disabled\"\n\t\t\t[ngClass]=\"{\n\t\t\tlargeSortableItem: sortableItemSize === 'lg',\n\t\t \tsmallSortableItem: sortableItemSize === 'sm',\n\t\t \t}\"\n #dragItem\n >\n <div class=\"visual\">\n <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ item: item, index:index }\"></ng-container>\n </div>\n </li>\n }\n</ng-template>\n\n@if (!disabled) {\n <ol\n class=\"itemsContainer\"\n [ngClass]=\"{dragInProgress: dragSourceIndex >= 0}\"\n >\n <ng-container *ngTemplateOutlet=\"listItem\"></ng-container>\n </ol>\n}\n\n@if (disabled) {\n <ol class=\"itemsContainer disabled-mouse-cursor\">\n <ng-container *ngTemplateOutlet=\"listItem\"></ng-container>\n </ol>\n}\n", styles: [":host{display:block;position:relative}.itemsContainer{border:1px solid #D0D5DD;border-radius:8px;padding:0;margin-top:0;margin-bottom:0;clip-path:inset(1px 0px 0px 0px round 6px);overflow:hidden}.dragInProgress .visual{pointer-events:none;transition:transform .1s linear}.sortableItem{list-style:none}.sortableItem .visual{border-top:1px solid #D0D5DD}.sortableItem .visual:hover{background:#f8f9fa}.sortableItem{cursor:grab}.largeSortableItem .visual{padding:15px}.smallSortableItem .visual{padding:0 10px}.disabled-mouse-cursor li{cursor:no-drop}\n"] }]
1936
- }], ctorParameters: () => [{ type: FormElementComponent, decorators: [{
1937
- type: Host
1938
- }, {
1939
- type: Optional
1940
- }] }, { type: i2.ControlContainer, decorators: [{
1941
- type: Host
1942
- }, {
1943
- type: Optional
1944
- }] }, { type: i0.NgZone }], propDecorators: { template: [{
2013
+ }], propDecorators: { template: [{
1945
2014
  type: ContentChild,
1946
2015
  args: [TemplateRef]
1947
2016
  }], sortableItemSize: [{
@@ -1960,7 +2029,6 @@ class TextInputComponent extends ValueAccessorBase {
1960
2029
  this.hasBorderRight = true;
1961
2030
  this.suffixTpl = null;
1962
2031
  this.prefixTpl = null;
1963
- this.size = 'medium';
1964
2032
  this.onBlur = new EventEmitter();
1965
2033
  this.isPeekingPassword = false;
1966
2034
  }
@@ -1974,11 +2042,11 @@ class TextInputComponent extends ValueAccessorBase {
1974
2042
  return this.isPeekingPassword ? 'text' : 'password';
1975
2043
  }
1976
2044
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TextInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
1977
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: TextInputComponent, isStandalone: false, selector: "klp-form-text-input", inputs: { placeholder: "placeholder", type: "type", clearable: "clearable", hasBorderLeft: "hasBorderLeft", hasBorderRight: "hasBorderRight", passwordPeekIcon: "passwordPeekIcon", suffixTpl: "suffixTpl", prefixTpl: "prefixTpl", size: "size" }, outputs: { onBlur: "onBlur" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: TextInputComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"componentContainer\" [ngClass]=\"{'input-sm': size === 'small', 'input-lg': size === 'large', disabled: disabled}\">\n\t<div class=\"head\">\n\t\t@if (prefixTpl) {\n\t\t\t<div class=\"prefix\">\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"prefixTpl\"></ng-container>\n\t\t\t</div>\n\t\t}\n\t</div>\n\t<input\n\t\t[type]=\"getType()\"\n\t\t[(ngModel)]=\"innerValue\"\n\t\t[ngClass]=\"{noBorderLeft: !hasBorderLeft, noBorderRight: !hasBorderRight, disabled: disabled}\"\n\t\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t\t[placeholder]=\"placeholder ? placeholder : ''\"\n\t\t(blur)=\"touch(); onBlur.emit()\"\n\t\t[disabled]='disabled'\n\t\t#nativeInputRef\n\t/>\n\t<div class=\"tail\">\n\t\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n\t\t@if (clearable && innerValue?.length > 0) {\n\t\t\t<div class=\"clearIcon\" (click)=\"resetToNull()\">\n\t\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n\t\t\t\t\t<path d=\"M15 5L5 15M5 5L15 15\" stroke=\"#475467\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n\t\t\t\t\t\t\t\tstroke-linejoin=\"round\"/>\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t}\n\t\t@if (passwordPeekIcon && type === 'password') {\n\t\t\t<div class=\"peakBtn\" (click)=\"togglePeakPassword()\">\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"passwordPeekIcon\"></ng-container>\n\t\t\t</div>\n\t\t}\n\t\t@if (suffixTpl) {\n\t\t\t<div class=\"suffix\">\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"suffixTpl\"></ng-container>\n\t\t\t</div>\n\t\t}\n\t</div>\n</div>\n\n", styles: [":host{display:block}:host .componentContainer::-webkit-input-placeholder{color:#98a2b3}:host .componentContainer:-moz-placeholder{color:#98a2b3}:host .componentContainer::-moz-placeholder{color:#98a2b3}:host .componentContainer:-ms-input-placeholder{color:#98a2b3}:host .componentContainer{display:block;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:none;height:40px;width:100%;padding:.5rem .75rem;font-size:16px;font-weight:400;line-height:24px;color:#101828}:host .componentContainer:focus,:host .componentContainer:focus-within{outline:1px solid #00AC42;box-shadow:none;border-color:#00ac42}:host .componentContainer.input-sm{padding:.375rem .5rem;font-size:14px;line-height:20px;height:32px}:host .componentContainer.input-sm.grow{min-height:32px}:host .componentContainer.input-lg{padding:.625rem .75rem;height:44px}:host .componentContainer.input-lg.grow{min-height:44px}:host .componentContainer.grow{height:auto;min-height:40px}:host .componentContainer:hover{border-color:#98a2b3}:host .componentContainer.error{border-color:#dc3545;background-color:#f6cdd1}:host .componentContainer.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}:host .componentContainer:placeholder-shown{text-overflow:ellipsis}:host .componentContainer.disabled{background-color:#f2f4f7;border-color:#f2f4f7;cursor:not-allowed}:host .componentContainer{display:flex;flex-direction:row;align-items:center;overflow-y:hidden}:host .componentContainer input{outline:none;border:none;flex:1 1 auto;min-width:0;width:auto;height:100%;font-size:inherit;line-height:inherit;color:inherit;background:none}:host .componentContainer input.disabled{cursor:not-allowed}:host .componentContainer input :disabled{cursor:not-allowed}:host .componentContainer input.noBorderLeft{border-left:none;border-top-left-radius:0;border-bottom-left-radius:0}:host .componentContainer input.noBorderRight{border-right:none;border-top-right-radius:0;border-bottom-right-radius:0}:host .componentContainer .head{cursor:default}:host .componentContainer .tail{display:flex;flex-direction:row;align-items:center;gap:.625rem;cursor:default}:host .componentContainer .tail .clearIcon{font-size:18px;width:20px;height:20px;cursor:pointer}:host .componentContainer .tail .clearIcon:hover{background:#f2f4f7}:host .componentContainer .tail .peakBtn{border:none;background:transparent;height:100%;padding:0;display:flex;align-items:center;cursor:pointer}:host .componentContainer .prefix,:host .componentContainer .suffix{display:flex;align-items:center;flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
2045
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: TextInputComponent, isStandalone: false, selector: "klp-form-text-input", inputs: { placeholder: "placeholder", type: "type", clearable: "clearable", hasBorderLeft: "hasBorderLeft", hasBorderRight: "hasBorderRight", passwordPeekIcon: "passwordPeekIcon", suffixTpl: "suffixTpl", prefixTpl: "prefixTpl" }, outputs: { onBlur: "onBlur" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: TextInputComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"componentContainer\"\n\t\t [ngClass]=\"{disabled: disabled, showErrors: isInErrorState()}\"\n\t\t [class]=\"sizeClass\"\n>\n\t<div class=\"head\">\n\t\t@if (prefixTpl) {\n\t\t\t<div class=\"prefix\">\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"prefixTpl\"></ng-container>\n\t\t\t</div>\n\t\t}\n\t</div>\n\t<input\n\t\t[type]=\"getType()\"\n\t\t[(ngModel)]=\"innerValue\"\n\t\t[ngClass]=\"{noBorderLeft: !hasBorderLeft, noBorderRight: !hasBorderRight, disabled: disabled}\"\n\t\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t\t[placeholder]=\"placeholder ? placeholder : ''\"\n\t\t(blur)=\"touch(); onBlur.emit()\"\n\t\t[disabled]='disabled'\n\t\t#nativeInputRef\n\t/>\n\t<div class=\"tail\">\n\t\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n\t\t@if (clearable && innerValue?.length > 0) {\n\t\t\t<div class=\"clearIcon\" (click)=\"resetToNull()\">\n\t\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n\t\t\t\t\t<path d=\"M15 5L5 15M5 5L15 15\" stroke=\"#475467\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n\t\t\t\t\t\t\t\tstroke-linejoin=\"round\"/>\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t}\n\t\t@if (passwordPeekIcon && type === 'password') {\n\t\t\t<div class=\"peakBtn\" (click)=\"togglePeakPassword()\">\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"passwordPeekIcon\"></ng-container>\n\t\t\t</div>\n\t\t}\n\t\t@if (suffixTpl) {\n\t\t\t<div class=\"suffix\">\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"suffixTpl\"></ng-container>\n\t\t\t</div>\n\t\t}\n\t</div>\n</div>\n\n", styles: [":host{display:block}:host .componentContainer::-webkit-input-placeholder{color:#98a2b3}:host .componentContainer:-moz-placeholder{color:#98a2b3}:host .componentContainer::-moz-placeholder{color:#98a2b3}:host .componentContainer:-ms-input-placeholder{color:#98a2b3}:host .componentContainer{display:block;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:none;height:40px;width:100%;padding:.5rem .75rem;font-size:16px;font-weight:400;line-height:24px;color:#101828}:host .componentContainer:hover{border:1px solid #98A2B3}:host .componentContainer.showErrors{border:1px solid #ff8000;outline:.5px solid #ff8000}:host .componentContainer:focus,:host .componentContainer:focus-within{border:1px solid #00AC42;outline:1px solid #00AC42}:host .componentContainer.disabled{border:1px solid #F2F4F7;background-color:#f2f4f7;cursor:not-allowed}:host .componentContainer.input-sm{padding:.375rem .5rem;font-size:14px;line-height:20px;height:32px}:host .componentContainer.input-sm.grow{min-height:32px}:host .componentContainer.input-lg{padding:.625rem .75rem;height:44px}:host .componentContainer.input-lg.grow{min-height:44px}:host .componentContainer.grow{height:auto;min-height:40px}:host .componentContainer:placeholder-shown{text-overflow:ellipsis}:host .componentContainer{display:flex;flex-direction:row;align-items:center;overflow-y:hidden}:host .componentContainer input{outline:none;border:none;flex:1 1 auto;min-width:0;width:100%;height:100%;font-size:inherit;line-height:inherit;color:inherit;background:none}:host .componentContainer input.disabled{cursor:not-allowed}:host .componentContainer input :disabled{cursor:not-allowed}:host .componentContainer input.noBorderLeft{border-left:none;border-top-left-radius:0;border-bottom-left-radius:0}:host .componentContainer input.noBorderRight{border-right:none;border-top-right-radius:0;border-bottom-right-radius:0}:host .componentContainer .head{cursor:default}:host .componentContainer .tail{display:flex;flex-direction:row;align-items:center;gap:.625rem;cursor:default}:host .componentContainer .tail .clearIcon{font-size:18px;width:20px;height:20px;cursor:pointer}:host .componentContainer .tail .clearIcon:hover{background:#f2f4f7}:host .componentContainer .tail .peakBtn{border:none;background:transparent;height:100%;padding:0;display:flex;align-items:center;cursor:pointer}:host .componentContainer .prefix,:host .componentContainer .suffix{display:flex;align-items:center;flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
1978
2046
  }
1979
2047
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TextInputComponent, decorators: [{
1980
2048
  type: Component,
1981
- args: [{ selector: 'klp-form-text-input', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: TextInputComponent, multi: true }], standalone: false, template: "<div class=\"componentContainer\" [ngClass]=\"{'input-sm': size === 'small', 'input-lg': size === 'large', disabled: disabled}\">\n\t<div class=\"head\">\n\t\t@if (prefixTpl) {\n\t\t\t<div class=\"prefix\">\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"prefixTpl\"></ng-container>\n\t\t\t</div>\n\t\t}\n\t</div>\n\t<input\n\t\t[type]=\"getType()\"\n\t\t[(ngModel)]=\"innerValue\"\n\t\t[ngClass]=\"{noBorderLeft: !hasBorderLeft, noBorderRight: !hasBorderRight, disabled: disabled}\"\n\t\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t\t[placeholder]=\"placeholder ? placeholder : ''\"\n\t\t(blur)=\"touch(); onBlur.emit()\"\n\t\t[disabled]='disabled'\n\t\t#nativeInputRef\n\t/>\n\t<div class=\"tail\">\n\t\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n\t\t@if (clearable && innerValue?.length > 0) {\n\t\t\t<div class=\"clearIcon\" (click)=\"resetToNull()\">\n\t\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n\t\t\t\t\t<path d=\"M15 5L5 15M5 5L15 15\" stroke=\"#475467\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n\t\t\t\t\t\t\t\tstroke-linejoin=\"round\"/>\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t}\n\t\t@if (passwordPeekIcon && type === 'password') {\n\t\t\t<div class=\"peakBtn\" (click)=\"togglePeakPassword()\">\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"passwordPeekIcon\"></ng-container>\n\t\t\t</div>\n\t\t}\n\t\t@if (suffixTpl) {\n\t\t\t<div class=\"suffix\">\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"suffixTpl\"></ng-container>\n\t\t\t</div>\n\t\t}\n\t</div>\n</div>\n\n", styles: [":host{display:block}:host .componentContainer::-webkit-input-placeholder{color:#98a2b3}:host .componentContainer:-moz-placeholder{color:#98a2b3}:host .componentContainer::-moz-placeholder{color:#98a2b3}:host .componentContainer:-ms-input-placeholder{color:#98a2b3}:host .componentContainer{display:block;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:none;height:40px;width:100%;padding:.5rem .75rem;font-size:16px;font-weight:400;line-height:24px;color:#101828}:host .componentContainer:focus,:host .componentContainer:focus-within{outline:1px solid #00AC42;box-shadow:none;border-color:#00ac42}:host .componentContainer.input-sm{padding:.375rem .5rem;font-size:14px;line-height:20px;height:32px}:host .componentContainer.input-sm.grow{min-height:32px}:host .componentContainer.input-lg{padding:.625rem .75rem;height:44px}:host .componentContainer.input-lg.grow{min-height:44px}:host .componentContainer.grow{height:auto;min-height:40px}:host .componentContainer:hover{border-color:#98a2b3}:host .componentContainer.error{border-color:#dc3545;background-color:#f6cdd1}:host .componentContainer.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}:host .componentContainer:placeholder-shown{text-overflow:ellipsis}:host .componentContainer.disabled{background-color:#f2f4f7;border-color:#f2f4f7;cursor:not-allowed}:host .componentContainer{display:flex;flex-direction:row;align-items:center;overflow-y:hidden}:host .componentContainer input{outline:none;border:none;flex:1 1 auto;min-width:0;width:auto;height:100%;font-size:inherit;line-height:inherit;color:inherit;background:none}:host .componentContainer input.disabled{cursor:not-allowed}:host .componentContainer input :disabled{cursor:not-allowed}:host .componentContainer input.noBorderLeft{border-left:none;border-top-left-radius:0;border-bottom-left-radius:0}:host .componentContainer input.noBorderRight{border-right:none;border-top-right-radius:0;border-bottom-right-radius:0}:host .componentContainer .head{cursor:default}:host .componentContainer .tail{display:flex;flex-direction:row;align-items:center;gap:.625rem;cursor:default}:host .componentContainer .tail .clearIcon{font-size:18px;width:20px;height:20px;cursor:pointer}:host .componentContainer .tail .clearIcon:hover{background:#f2f4f7}:host .componentContainer .tail .peakBtn{border:none;background:transparent;height:100%;padding:0;display:flex;align-items:center;cursor:pointer}:host .componentContainer .prefix,:host .componentContainer .suffix{display:flex;align-items:center;flex-shrink:0}\n"] }]
2049
+ args: [{ selector: 'klp-form-text-input', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: TextInputComponent, multi: true }], standalone: false, template: "<div class=\"componentContainer\"\n\t\t [ngClass]=\"{disabled: disabled, showErrors: isInErrorState()}\"\n\t\t [class]=\"sizeClass\"\n>\n\t<div class=\"head\">\n\t\t@if (prefixTpl) {\n\t\t\t<div class=\"prefix\">\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"prefixTpl\"></ng-container>\n\t\t\t</div>\n\t\t}\n\t</div>\n\t<input\n\t\t[type]=\"getType()\"\n\t\t[(ngModel)]=\"innerValue\"\n\t\t[ngClass]=\"{noBorderLeft: !hasBorderLeft, noBorderRight: !hasBorderRight, disabled: disabled}\"\n\t\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t\t[placeholder]=\"placeholder ? placeholder : ''\"\n\t\t(blur)=\"touch(); onBlur.emit()\"\n\t\t[disabled]='disabled'\n\t\t#nativeInputRef\n\t/>\n\t<div class=\"tail\">\n\t\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n\t\t@if (clearable && innerValue?.length > 0) {\n\t\t\t<div class=\"clearIcon\" (click)=\"resetToNull()\">\n\t\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n\t\t\t\t\t<path d=\"M15 5L5 15M5 5L15 15\" stroke=\"#475467\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n\t\t\t\t\t\t\t\tstroke-linejoin=\"round\"/>\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t}\n\t\t@if (passwordPeekIcon && type === 'password') {\n\t\t\t<div class=\"peakBtn\" (click)=\"togglePeakPassword()\">\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"passwordPeekIcon\"></ng-container>\n\t\t\t</div>\n\t\t}\n\t\t@if (suffixTpl) {\n\t\t\t<div class=\"suffix\">\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"suffixTpl\"></ng-container>\n\t\t\t</div>\n\t\t}\n\t</div>\n</div>\n\n", styles: [":host{display:block}:host .componentContainer::-webkit-input-placeholder{color:#98a2b3}:host .componentContainer:-moz-placeholder{color:#98a2b3}:host .componentContainer::-moz-placeholder{color:#98a2b3}:host .componentContainer:-ms-input-placeholder{color:#98a2b3}:host .componentContainer{display:block;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:none;height:40px;width:100%;padding:.5rem .75rem;font-size:16px;font-weight:400;line-height:24px;color:#101828}:host .componentContainer:hover{border:1px solid #98A2B3}:host .componentContainer.showErrors{border:1px solid #ff8000;outline:.5px solid #ff8000}:host .componentContainer:focus,:host .componentContainer:focus-within{border:1px solid #00AC42;outline:1px solid #00AC42}:host .componentContainer.disabled{border:1px solid #F2F4F7;background-color:#f2f4f7;cursor:not-allowed}:host .componentContainer.input-sm{padding:.375rem .5rem;font-size:14px;line-height:20px;height:32px}:host .componentContainer.input-sm.grow{min-height:32px}:host .componentContainer.input-lg{padding:.625rem .75rem;height:44px}:host .componentContainer.input-lg.grow{min-height:44px}:host .componentContainer.grow{height:auto;min-height:40px}:host .componentContainer:placeholder-shown{text-overflow:ellipsis}:host .componentContainer{display:flex;flex-direction:row;align-items:center;overflow-y:hidden}:host .componentContainer input{outline:none;border:none;flex:1 1 auto;min-width:0;width:100%;height:100%;font-size:inherit;line-height:inherit;color:inherit;background:none}:host .componentContainer input.disabled{cursor:not-allowed}:host .componentContainer input :disabled{cursor:not-allowed}:host .componentContainer input.noBorderLeft{border-left:none;border-top-left-radius:0;border-bottom-left-radius:0}:host .componentContainer input.noBorderRight{border-right:none;border-top-right-radius:0;border-bottom-right-radius:0}:host .componentContainer .head{cursor:default}:host .componentContainer .tail{display:flex;flex-direction:row;align-items:center;gap:.625rem;cursor:default}:host .componentContainer .tail .clearIcon{font-size:18px;width:20px;height:20px;cursor:pointer}:host .componentContainer .tail .clearIcon:hover{background:#f2f4f7}:host .componentContainer .tail .peakBtn{border:none;background:transparent;height:100%;padding:0;display:flex;align-items:center;cursor:pointer}:host .componentContainer .prefix,:host .componentContainer .suffix{display:flex;align-items:center;flex-shrink:0}\n"] }]
1982
2050
  }], propDecorators: { placeholder: [{
1983
2051
  type: Input
1984
2052
  }], type: [{
@@ -1995,8 +2063,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
1995
2063
  type: Input
1996
2064
  }], prefixTpl: [{
1997
2065
  type: Input
1998
- }], size: [{
1999
- type: Input
2000
2066
  }], onBlur: [{
2001
2067
  type: Output
2002
2068
  }] } });
@@ -2004,16 +2070,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
2004
2070
  class ToggleComponent extends ValueAccessorBase {
2005
2071
  constructor() {
2006
2072
  super(...arguments);
2073
+ this.stringIsSetAndFilled = stringIsSetAndFilled;
2007
2074
  this.transparentBackground = true;
2008
2075
  }
2076
+ ngOnInit() {
2077
+ super.ngOnInit();
2078
+ const sizes = this.calculateToggleSize();
2079
+ this.toggleWidth = sizes.width;
2080
+ this.toggleHeight = sizes.height;
2081
+ this.captionSpacing = sizes.captionSpacing;
2082
+ }
2083
+ ngOnChanges(changes) {
2084
+ super.ngOnChanges(changes);
2085
+ if (changes.size) {
2086
+ const sizes = this.calculateToggleSize();
2087
+ this.toggleWidth = sizes.width;
2088
+ this.toggleHeight = sizes.height;
2089
+ this.captionSpacing = sizes.captionSpacing;
2090
+ }
2091
+ }
2092
+ calculateToggleSize() {
2093
+ switch (this.size) {
2094
+ case 'small':
2095
+ return { width: 36, height: 20, captionSpacing: 8 };
2096
+ case 'medium':
2097
+ return { width: 44, height: 24, captionSpacing: 12 };
2098
+ case 'large':
2099
+ return { width: 54, height: 32, captionSpacing: 12 };
2100
+ }
2101
+ }
2009
2102
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ToggleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
2010
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: ToggleComponent, isStandalone: false, selector: "klp-form-toggle", inputs: { transparentBackground: "transparentBackground" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: ToggleComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"componentContainer\" [ngClass]=\"{disabled: disabled}\">\n\t<div class=\"hiddenValue\" data-cy-value>{{innerValue}}</div>\n\t<input type=\"checkbox\" class=\"nativeCheckbox\"\n\t\t[(ngModel)]=\"innerValue\"\n\t\t(input)=\"setInnerValueAndNotify($event.target.checked); touch()\"\n\t\t[disabled]=\"disabled\"\n\t\t[ngClass]=\"{showErrors: isInErrorState()}\"\n\t #nativeInputRef\n\t/>\n\t<div class=\"toggleVisual\" [ngClass]=\"{transparentBackground: transparentBackground}\"></div>\n</div>\n", styles: [":host{display:block}.hiddenValue{display:none}.componentContainer{position:relative;padding-right:6px}.nativeCheckbox{position:absolute;opacity:0;top:0;left:0;width:35px;height:20px;cursor:pointer;margin:0}.toggleVisual{pointer-events:none;position:relative;display:block;transition:.4s ease;-webkit-transition:.4s ease;-moz-transition:.4s ease;-o-transition:.4s ease;-ms-transition:.4s ease;width:35px;height:20px;border:1px solid #D0D5DD;border-radius:35px;background:#eaecf0}.toggleVisual.transparentBackground{background:transparent}.toggleVisual:before{content:\"\";position:absolute;display:block;transition:.2s cubic-bezier(.24,0,.5,1);-webkit-transition:.2s cubic-bezier(.24,0,.5,1);-moz-transition:.2s cubic-bezier(.24,0,.5,1);-o-transition:.2s cubic-bezier(.24,0,.5,1);-ms-transition:.2s cubic-bezier(.24,0,.5,1);margin:1px;width:33px;height:18px;top:-1px;left:-1px;border-radius:30px}.toggleVisual:after{content:\"\";position:absolute;display:block;box-shadow:0 0 0 1px #0000001a,0 4px #0000000a,0 4px 9px #00000021,0 3px 3px #0000000d;transition:.35s cubic-bezier(.54,1.6,.5,1);-webkit-transition:.35s cubic-bezier(.54,1.6,.5,1);-moz-transition:.35s cubic-bezier(.54,1.6,.5,1);-o-transition:.35s cubic-bezier(.54,1.6,.5,1);-ms-transition:.35s cubic-bezier(.54,1.6,.5,1);background:#f7f7f7;height:20px;width:20px;top:-1px;left:0;border-radius:60px}.nativeCheckbox:checked+.toggleVisual:before{background:#37c936;transition:width .2s cubic-bezier(0,0,0,.1);-webkit-transition:width .2s cubic-bezier(0,0,0,.1);-moz-transition:width .2s cubic-bezier(0,0,0,.1);-o-transition:width .2s cubic-bezier(0,0,0,.1);-ms-transition:width .2s cubic-bezier(0,0,0,.1)}.nativeCheckbox:checked+.toggleVisual:after{left:18px}.disabled{opacity:.6}.disabled .nativeCheckbox{cursor:not-allowed}.showErrors+.toggleVisual:before{border:1px solid #ff8000}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
2103
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: ToggleComponent, isStandalone: false, selector: "klp-form-toggle", inputs: { transparentBackground: "transparentBackground", caption: "caption", description: "description" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: ToggleComponent, multi: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"componentContainer\" [style.--toggle-width]=\"toggleWidth + 'px'\"\n\t\t [style.--toggle-height]=\"toggleHeight + 'px'\"\n\t\t [style.--caption-spacing]=\"captionSpacing + 'px'\">\n\t<label>\n\t\t<div class=\"toggleContainer\" [ngClass]=\"{disabled: disabled}\">\n\t\t\t<div class=\"hiddenValue\" data-cy-value>{{ innerValue }}</div>\n\t\t\t<input type=\"checkbox\" class=\"nativeCheckbox\"\n\t\t\t\t\t\t [(ngModel)]=\"innerValue\"\n\t\t\t\t\t\t (input)=\"setInnerValueAndNotify($event.target.checked); touch()\"\n\t\t\t\t\t\t [disabled]=\"disabled\"\n\t\t\t\t\t\t [ngClass]=\"{showErrors: isInErrorState()}\"\n\t\t\t\t\t\t #nativeInputRef\n\t\t\t/>\n\t\t\t<div class=\"toggleVisual\" [ngClass]=\"{transparentBackground: transparentBackground}\"></div>\n\t\t</div>\n\t\t@if (caption) {\n\t\t\t<div class=\"caption\" [class]=\"sizeClass\" [ngClass]=\"{disabled: disabled}\">{{ caption }}</div>\n\t\t}\n\t</label>\n\t@if (description) {\n\t\t<div class=\"description\" [class]=\"sizeClass\" [ngClass]=\"{disabled: disabled}\">{{ description }}</div>\n\t}\n</div>\n", styles: [":host{display:block}.hiddenValue{display:none}.componentContainer{display:grid;grid-template-columns:auto 1fr;align-items:start;margin-bottom:0}label{display:contents;align-items:center;justify-content:center;margin-bottom:0}.toggleContainer{position:relative;grid-column:1;align-self:center;margin-right:var(--caption-spacing)}.toggleContainer.disabled{opacity:.6}.nativeCheckbox{position:absolute;opacity:0;top:0;left:0;width:var(--toggle-width);height:var(--toggle-height);cursor:pointer;margin:0}.toggleVisual{pointer-events:none;position:relative;display:block;transition:.4s ease;-webkit-transition:.4s ease;-moz-transition:.4s ease;-o-transition:.4s ease;-ms-transition:.4s ease;width:var(--toggle-width);height:var(--toggle-height);border:1px solid #D0D5DD;border-radius:var(--toggle-width);background:#eaecf0}.toggleVisual.transparentBackground{background:transparent}.toggleVisual:before{content:\"\";position:absolute;display:block;transition:.2s cubic-bezier(.24,0,.5,1);-webkit-transition:.2s cubic-bezier(.24,0,.5,1);-moz-transition:.2s cubic-bezier(.24,0,.5,1);-o-transition:.2s cubic-bezier(.24,0,.5,1);-ms-transition:.2s cubic-bezier(.24,0,.5,1);margin:1px;width:calc(var(--toggle-width) - 2px);height:calc(var(--toggle-height) - 2px);top:-1px;left:-1px;border-radius:30px}.toggleVisual:after{content:\"\";position:absolute;display:block;box-shadow:0 0 0 1px #0000001a,0 4px #0000000a,0 4px 9px #00000021,0 3px 3px #0000000d;transition:.35s cubic-bezier(.54,1.6,.5,1);-webkit-transition:.35s cubic-bezier(.54,1.6,.5,1);-moz-transition:.35s cubic-bezier(.54,1.6,.5,1);-o-transition:.35s cubic-bezier(.54,1.6,.5,1);-ms-transition:.35s cubic-bezier(.54,1.6,.5,1);background:#f7f7f7;height:var(--toggle-height);width:var(--toggle-height);top:-1px;left:0;border-radius:60px}.nativeCheckbox:checked+.toggleVisual:before{background:#37c936;transition:width .2s cubic-bezier(0,0,0,.1);-webkit-transition:width .2s cubic-bezier(0,0,0,.1);-moz-transition:width .2s cubic-bezier(0,0,0,.1);-o-transition:width .2s cubic-bezier(0,0,0,.1);-ms-transition:width .2s cubic-bezier(0,0,0,.1)}.nativeCheckbox:checked+.toggleVisual:after{left:calc(var(--toggle-width) - var(--toggle-height))}.disabled .nativeCheckbox{cursor:not-allowed}.showErrors+.toggleVisual:before{border:1px solid #ff8000}.caption{color:#101828;font-feature-settings:\"cv05\" on;font-size:16px;font-style:normal;font-weight:500;line-height:24px;letter-spacing:.16px}.caption.input-sm{font-size:14px;line-height:20px;letter-spacing:.14px}.caption.disabled{color:#98a2b3}.caption{font-weight:400;cursor:pointer;grid-column:2}.caption.disabled{cursor:not-allowed}.description{color:#101828;font-feature-settings:\"cv05\" on;font-size:16px;font-style:normal;font-weight:500;line-height:24px;letter-spacing:.16px}.description.input-sm{font-size:14px;line-height:20px;letter-spacing:.14px}.description.disabled{color:#98a2b3}.description{font-weight:400;color:#667085;grid-column:2}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
2011
2104
  }
2012
2105
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ToggleComponent, decorators: [{
2013
2106
  type: Component,
2014
- args: [{ selector: 'klp-form-toggle', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: ToggleComponent, multi: true }], standalone: false, template: "<div class=\"componentContainer\" [ngClass]=\"{disabled: disabled}\">\n\t<div class=\"hiddenValue\" data-cy-value>{{innerValue}}</div>\n\t<input type=\"checkbox\" class=\"nativeCheckbox\"\n\t\t[(ngModel)]=\"innerValue\"\n\t\t(input)=\"setInnerValueAndNotify($event.target.checked); touch()\"\n\t\t[disabled]=\"disabled\"\n\t\t[ngClass]=\"{showErrors: isInErrorState()}\"\n\t #nativeInputRef\n\t/>\n\t<div class=\"toggleVisual\" [ngClass]=\"{transparentBackground: transparentBackground}\"></div>\n</div>\n", styles: [":host{display:block}.hiddenValue{display:none}.componentContainer{position:relative;padding-right:6px}.nativeCheckbox{position:absolute;opacity:0;top:0;left:0;width:35px;height:20px;cursor:pointer;margin:0}.toggleVisual{pointer-events:none;position:relative;display:block;transition:.4s ease;-webkit-transition:.4s ease;-moz-transition:.4s ease;-o-transition:.4s ease;-ms-transition:.4s ease;width:35px;height:20px;border:1px solid #D0D5DD;border-radius:35px;background:#eaecf0}.toggleVisual.transparentBackground{background:transparent}.toggleVisual:before{content:\"\";position:absolute;display:block;transition:.2s cubic-bezier(.24,0,.5,1);-webkit-transition:.2s cubic-bezier(.24,0,.5,1);-moz-transition:.2s cubic-bezier(.24,0,.5,1);-o-transition:.2s cubic-bezier(.24,0,.5,1);-ms-transition:.2s cubic-bezier(.24,0,.5,1);margin:1px;width:33px;height:18px;top:-1px;left:-1px;border-radius:30px}.toggleVisual:after{content:\"\";position:absolute;display:block;box-shadow:0 0 0 1px #0000001a,0 4px #0000000a,0 4px 9px #00000021,0 3px 3px #0000000d;transition:.35s cubic-bezier(.54,1.6,.5,1);-webkit-transition:.35s cubic-bezier(.54,1.6,.5,1);-moz-transition:.35s cubic-bezier(.54,1.6,.5,1);-o-transition:.35s cubic-bezier(.54,1.6,.5,1);-ms-transition:.35s cubic-bezier(.54,1.6,.5,1);background:#f7f7f7;height:20px;width:20px;top:-1px;left:0;border-radius:60px}.nativeCheckbox:checked+.toggleVisual:before{background:#37c936;transition:width .2s cubic-bezier(0,0,0,.1);-webkit-transition:width .2s cubic-bezier(0,0,0,.1);-moz-transition:width .2s cubic-bezier(0,0,0,.1);-o-transition:width .2s cubic-bezier(0,0,0,.1);-ms-transition:width .2s cubic-bezier(0,0,0,.1)}.nativeCheckbox:checked+.toggleVisual:after{left:18px}.disabled{opacity:.6}.disabled .nativeCheckbox{cursor:not-allowed}.showErrors+.toggleVisual:before{border:1px solid #ff8000}\n"] }]
2107
+ args: [{ selector: 'klp-form-toggle', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: ToggleComponent, multi: true }], standalone: false, template: "<div class=\"componentContainer\" [style.--toggle-width]=\"toggleWidth + 'px'\"\n\t\t [style.--toggle-height]=\"toggleHeight + 'px'\"\n\t\t [style.--caption-spacing]=\"captionSpacing + 'px'\">\n\t<label>\n\t\t<div class=\"toggleContainer\" [ngClass]=\"{disabled: disabled}\">\n\t\t\t<div class=\"hiddenValue\" data-cy-value>{{ innerValue }}</div>\n\t\t\t<input type=\"checkbox\" class=\"nativeCheckbox\"\n\t\t\t\t\t\t [(ngModel)]=\"innerValue\"\n\t\t\t\t\t\t (input)=\"setInnerValueAndNotify($event.target.checked); touch()\"\n\t\t\t\t\t\t [disabled]=\"disabled\"\n\t\t\t\t\t\t [ngClass]=\"{showErrors: isInErrorState()}\"\n\t\t\t\t\t\t #nativeInputRef\n\t\t\t/>\n\t\t\t<div class=\"toggleVisual\" [ngClass]=\"{transparentBackground: transparentBackground}\"></div>\n\t\t</div>\n\t\t@if (caption) {\n\t\t\t<div class=\"caption\" [class]=\"sizeClass\" [ngClass]=\"{disabled: disabled}\">{{ caption }}</div>\n\t\t}\n\t</label>\n\t@if (description) {\n\t\t<div class=\"description\" [class]=\"sizeClass\" [ngClass]=\"{disabled: disabled}\">{{ description }}</div>\n\t}\n</div>\n", styles: [":host{display:block}.hiddenValue{display:none}.componentContainer{display:grid;grid-template-columns:auto 1fr;align-items:start;margin-bottom:0}label{display:contents;align-items:center;justify-content:center;margin-bottom:0}.toggleContainer{position:relative;grid-column:1;align-self:center;margin-right:var(--caption-spacing)}.toggleContainer.disabled{opacity:.6}.nativeCheckbox{position:absolute;opacity:0;top:0;left:0;width:var(--toggle-width);height:var(--toggle-height);cursor:pointer;margin:0}.toggleVisual{pointer-events:none;position:relative;display:block;transition:.4s ease;-webkit-transition:.4s ease;-moz-transition:.4s ease;-o-transition:.4s ease;-ms-transition:.4s ease;width:var(--toggle-width);height:var(--toggle-height);border:1px solid #D0D5DD;border-radius:var(--toggle-width);background:#eaecf0}.toggleVisual.transparentBackground{background:transparent}.toggleVisual:before{content:\"\";position:absolute;display:block;transition:.2s cubic-bezier(.24,0,.5,1);-webkit-transition:.2s cubic-bezier(.24,0,.5,1);-moz-transition:.2s cubic-bezier(.24,0,.5,1);-o-transition:.2s cubic-bezier(.24,0,.5,1);-ms-transition:.2s cubic-bezier(.24,0,.5,1);margin:1px;width:calc(var(--toggle-width) - 2px);height:calc(var(--toggle-height) - 2px);top:-1px;left:-1px;border-radius:30px}.toggleVisual:after{content:\"\";position:absolute;display:block;box-shadow:0 0 0 1px #0000001a,0 4px #0000000a,0 4px 9px #00000021,0 3px 3px #0000000d;transition:.35s cubic-bezier(.54,1.6,.5,1);-webkit-transition:.35s cubic-bezier(.54,1.6,.5,1);-moz-transition:.35s cubic-bezier(.54,1.6,.5,1);-o-transition:.35s cubic-bezier(.54,1.6,.5,1);-ms-transition:.35s cubic-bezier(.54,1.6,.5,1);background:#f7f7f7;height:var(--toggle-height);width:var(--toggle-height);top:-1px;left:0;border-radius:60px}.nativeCheckbox:checked+.toggleVisual:before{background:#37c936;transition:width .2s cubic-bezier(0,0,0,.1);-webkit-transition:width .2s cubic-bezier(0,0,0,.1);-moz-transition:width .2s cubic-bezier(0,0,0,.1);-o-transition:width .2s cubic-bezier(0,0,0,.1);-ms-transition:width .2s cubic-bezier(0,0,0,.1)}.nativeCheckbox:checked+.toggleVisual:after{left:calc(var(--toggle-width) - var(--toggle-height))}.disabled .nativeCheckbox{cursor:not-allowed}.showErrors+.toggleVisual:before{border:1px solid #ff8000}.caption{color:#101828;font-feature-settings:\"cv05\" on;font-size:16px;font-style:normal;font-weight:500;line-height:24px;letter-spacing:.16px}.caption.input-sm{font-size:14px;line-height:20px;letter-spacing:.14px}.caption.disabled{color:#98a2b3}.caption{font-weight:400;cursor:pointer;grid-column:2}.caption.disabled{cursor:not-allowed}.description{color:#101828;font-feature-settings:\"cv05\" on;font-size:16px;font-style:normal;font-weight:500;line-height:24px;letter-spacing:.16px}.description.input-sm{font-size:14px;line-height:20px;letter-spacing:.14px}.description.disabled{color:#98a2b3}.description{font-weight:400;color:#667085;grid-column:2}\n"] }]
2015
2108
  }], propDecorators: { transparentBackground: [{
2016
2109
  type: Input
2110
+ }], caption: [{
2111
+ type: Input
2112
+ }], description: [{
2113
+ type: Input
2017
2114
  }] } });
2018
2115
 
2019
2116
  class FormCaptionComponent {
@@ -2176,10 +2273,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
2176
2273
  }] } });
2177
2274
 
2178
2275
  class MultipleValueAccessorBase extends ValueAccessorBase {
2179
- constructor(parent, controlContainer) {
2180
- super(parent, controlContainer);
2181
- this.parent = parent;
2182
- this.controlContainer = controlContainer;
2276
+ constructor() {
2277
+ super(...arguments);
2183
2278
  this.multiple = false;
2184
2279
  }
2185
2280
  writeValue(value) {
@@ -2209,7 +2304,7 @@ class MultipleValueAccessorBase extends ValueAccessorBase {
2209
2304
  super.setInnerValueAndNotify(value);
2210
2305
  }
2211
2306
  }
2212
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MultipleValueAccessorBase, deps: [{ token: FormElementComponent, host: true, optional: true }, { token: i2.ControlContainer, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
2307
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MultipleValueAccessorBase, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
2213
2308
  static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: MultipleValueAccessorBase, isStandalone: false, selector: "ng-component", inputs: { multiple: "multiple" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
2214
2309
  }
2215
2310
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MultipleValueAccessorBase, decorators: [{
@@ -2219,15 +2314,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
2219
2314
  template: '',
2220
2315
  standalone: false
2221
2316
  }]
2222
- }], ctorParameters: () => [{ type: FormElementComponent, decorators: [{
2223
- type: Host
2224
- }, {
2225
- type: Optional
2226
- }] }, { type: i2.ControlContainer, decorators: [{
2227
- type: Host
2228
- }, {
2229
- type: Optional
2230
- }] }], propDecorators: { multiple: [{
2317
+ }], propDecorators: { multiple: [{
2231
2318
  type: Input
2232
2319
  }] } });
2233
2320
 
@@ -2263,7 +2350,6 @@ class DateTimePickerComponent extends MultipleValueAccessorBase {
2263
2350
  this.initHour = null;
2264
2351
  this.initMinute = null;
2265
2352
  this.invalidTimeAsMidnight = false; // if the time is not valid, use 00:00 as the time
2266
- this.size = 'medium';
2267
2353
  this.suffixTpl = null;
2268
2354
  this.prefixTpl = null;
2269
2355
  this.openPickerOnDate = null;
@@ -2590,14 +2676,14 @@ class DateTimePickerComponent extends MultipleValueAccessorBase {
2590
2676
  this.datePickerRef.open();
2591
2677
  }
2592
2678
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: DateTimePickerComponent, deps: [{ token: FormElementComponent, host: true, optional: true }, { token: i2.ControlContainer, host: true, optional: true }, { token: DATE_TIME_PICKER_TRANSLATIONS, optional: true }, { token: DATE_PICKER_LOCALE, optional: true }, { token: i3.DateAdapter }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
2593
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: DateTimePickerComponent, isStandalone: false, selector: "klp-form-date-time-picker", inputs: { minDate: "minDate", maxDate: "maxDate", sameMonthOnly: "sameMonthOnly", format: "format", placeholder: "placeholder", clearable: "clearable", showTimeInput: "showTimeInput", initHour: "initHour", initMinute: "initMinute", invalidTimeAsMidnight: "invalidTimeAsMidnight", size: "size", suffixTpl: "suffixTpl", prefixTpl: "prefixTpl" }, providers: [
2679
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: DateTimePickerComponent, isStandalone: false, selector: "klp-form-date-time-picker", inputs: { minDate: "minDate", maxDate: "maxDate", sameMonthOnly: "sameMonthOnly", format: "format", placeholder: "placeholder", clearable: "clearable", showTimeInput: "showTimeInput", initHour: "initHour", initMinute: "initMinute", invalidTimeAsMidnight: "invalidTimeAsMidnight", suffixTpl: "suffixTpl", prefixTpl: "prefixTpl" }, providers: [
2594
2680
  { provide: NG_VALUE_ACCESSOR, useExisting: DateTimePickerComponent, multi: true },
2595
2681
  {
2596
2682
  provide: MAT_DATE_FORMATS,
2597
2683
  deps: [DateTimePickerComponent, [new Optional(), KLP_DATE_FORMATS]],
2598
2684
  useFactory: matDateFormatsFactory,
2599
2685
  },
2600
- ], viewQueries: [{ propertyName: "nativeInputRef", first: true, predicate: ["nativeInput"], descendants: true }, { propertyName: "datePickerRef", first: true, predicate: ["picker"], descendants: true }, { propertyName: "timeDoubleDropdown", first: true, predicate: ["timeDoubleDropdown"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"componentContainer\" [ngClass]=\"{showErrors: isInErrorState()}\" [ngClass]=\"{disabled: disabled}\">\n\t<div class=\"dateContainer\" [ngClass]=\"{disabled: disabled, 'input-sm': size === 'small', 'input-lg': size === 'large'}\" [style.--button-size]=\"size === 'small' ? '20px' : '24px'\" >\n\t\t\t<div class=\"head\">\n\t\t\t\t@if (prefixTpl) {\n\t\t\t\t\t<div class=\"prefix\">\n\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"prefixTpl\"></ng-container>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t</div>\n\t\t\t<mat-form-field floatLabel=\"never\">\n\t\t\t\t@if (multiple) {\n\t\t\t\t\t<div class=\"daysSelectedCaption\" (click)=\"picker.open()\" [ngClass]=\"{disabled: disabled}\">\n\t\t\t\t\t\t@if (selectedDates.length >= 2) {\n\t\t\t\t\t\t\t<span>{{ getTranslation('daysSelected', selectedDates.length) }}</span>\n\t\t\t\t\t\t\t@if (getSelectedMonths() === 1) {\n\t\t\t\t\t\t\t\t<span>{{ getTranslation('selectedInMonth', selectedDates[0]) }}</span>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (selectedDates.length === 1) {\n\t\t\t\t\t\t\t<span>{{ getTranslation('selectedDate', selectedDates[0]) }}</span>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (selectedDates.length === 0) {\n\t\t\t\t\t\t\t<span class=\"placeholderForMultipleSelection\">{{ getTranslation('selectDays') }}</span>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t}\n\n\t\t\t\t@if (disabled) {\n\t\t\t\t\t<div class=\"disabledClickArea\" (click)=\"picker.open()\"></div>\n\t\t\t\t}\n\t\t\t\t<input\n\t\t\t\t\t#nativeInput\n\t\t\t\t\tmatInput\n\t\t\t\t\t[matDatepicker]=\"picker\"\n\t\t\t\t\t[matDatepickerFilter]=\"filterDates\"\n\t\t\t\t\t[(ngModel)]=\"valueForMaterialDatePicker\"\n\t\t\t\t\t(dateInput)=\"dateChanged($event)\"\n\t\t\t\t\t(input)=\"nativeValueChanged()\"\n\t\t\t\t\t(click)=\"picker.open()\"\n\t\t\t\t\t[min]=\"minDateStartOfDay\"\n\t\t\t\t\t[max]=\"maxDateEndOfDay\"\n\t\t\t\t\t[placeholder]=\"getTranslation('placeholder')\"\n\t\t\t\t\t(blur)=\"touchDate()\"\n\t\t\t\t\t[ngClass]=\"{inputForMultipleDays: multiple, disabled: disabled}\"\n\t\t\t\t>\n\t\t\t\t<mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n\t\t\t\t<mat-datepicker\n\t\t\t\t\t#picker\n\t\t\t\t\t[dateClass]=\"isSelected\"\n\t\t\t\t\t[startAt]=\"openPickerOnDate\"\n\t\t\t\t></mat-datepicker>\n\t\t\t</mat-form-field>\n\t\t\t<div class=\"tail\">\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n\t\t\t\t@if (suffixTpl) {\n\t\t\t\t\t<div class=\"suffix\">\n\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"suffixTpl\"></ng-container>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t</div>\n\t</div>\n\t@if (showTimeInput) {\n\t\t<div class=\"timeContainer\" [ngClass]=\"{disabled: disabled}\">\n\t\t\t<div class=\"timeContainerInner\">\n\t\t\t\t<svg class=\"clockIcon\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t (click)=\"hourInput.focus()\">\n\t\t\t\t\t<path\n\t\t\t\t\t\td=\"M12 6V12L16 14M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z\"\n\t\t\t\t\t\tstroke=\"#888da8\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n\t\t\t\t</svg>\n\t\t\t\t<input #hourInput maxlength=\"2\" placeholder=\"__\" [disabled]=\"disabled\" [(ngModel)]=\"hours\"\n\t\t\t\t\t\t\t (ngModelChange)=\"notifyNewDate()\" (focus)=\"dropdownVisible = true\" (blur)=\"blurredHours();\">\n\t\t\t\t<div class=\"divider\">:</div>\n\t\t\t\t<input maxlength=\"2\" placeholder=\"__\" [disabled]=\"disabled\" [(ngModel)]=\"minutes\"\n\t\t\t\t\t\t\t (ngModelChange)=\"notifyNewDate()\" (focus)=\"dropdownVisible = true\" (blur)=\"blurredMinutes();\">\n\t\t\t</div>\n\t\t\t@if (dropdownVisible) {\n\t\t\t\t<div class=\"timeDoubleDropdown\" #timeDoubleDropdown [onRenderFn]=\"timeDropdownRendered\">\n\t\t\t\t\t<div class=\"hourOfDay\">\n\t\t\t\t\t\t@for (hour of counter(24); track hour) {\n\t\t\t\t\t\t\t<div class=\"entry\" (mousedown)=\"setHour(hour)\"\n\t\t\t\t\t\t\t\t\t [ngClass]=\"{isActive: isActive(hour, hours)}\">{{ hour > 9 ? hour : '0' + hour }}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"minuteOfHour\">\n\t\t\t\t\t\t@for (minute of minutesOfHour; track minute) {\n\t\t\t\t\t\t\t<div class=\"entry\" (mousedown)=\"setMinute(minute)\"\n\t\t\t\t\t\t\t\t\t [ngClass]=\"{isActive: isActive(minute, minutes)}\">{{ minute > 9 ? minute : '0' + minute }}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t}\n\t\t</div>\n\t}\n</div>\n", styles: [":host{display:block;--mat-icon-button-icon-size: 18px}:host ::ng-deep .mat-mdc-icon-button .mat-mdc-button-persistent-ripple{border-radius:unset;display:flex;align-items:center;justify-content:center;width:100%;height:100%}:host ::ng-deep .mat-mdc-icon-button .mat-mdc-button-touch-target{display:flex;align-items:center;justify-content:center;width:100%;height:100%}:host ::ng-deep .mat-datepicker-toggle-default-icon{color:transparent;width:var(--button-size, 24px);height:var(--button-size, 24px);display:flex;align-items:center;justify-content:center}:host ::ng-deep .mat-mdc-form-field{display:block;height:100%;width:100%}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper,:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-focus-overlay{background-color:unset}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper:hover,:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-focus-overlay:hover{background-color:unset}:host ::ng-deep .mat-mdc-form-field .mat-mdc-form-field-infix{padding-top:8px;padding-bottom:8px;min-height:40px;font-size:14px;color:#101828;width:100%}:host ::ng-deep .mat-mdc-form-field .mat-mdc-form-field-icon-suffix{height:100%;padding:0;display:flex;align-items:center;justify-content:center}:host ::ng-deep .mat-mdc-form-field .mat-mdc-icon-button{width:var(--button-size, 24px);height:var(--button-size, 24px);min-width:var(--button-size, 24px);min-height:var(--button-size, 24px);padding:0;margin:0 8px 0 0;display:flex;align-items:center;justify-content:center}:host ::ng-deep .mat-mdc-form-field .mat-mdc-icon-button:after{position:absolute;left:50%;content:\"\";display:inline-block;width:var(--button-size, 24px);height:var(--button-size, 24px);background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"><path d=\"M17.5 8.33329H2.5M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M6.5 18.3333H13.5C14.9001 18.3333 15.6002 18.3333 16.135 18.0608C16.6054 17.8211 16.9878 17.4387 17.2275 16.9683C17.5 16.4335 17.5 15.7334 17.5 14.3333V7.33329C17.5 5.93316 17.5 5.2331 17.2275 4.69832C16.9878 4.22791 16.6054 3.84546 16.135 3.60578C15.6002 3.33329 14.9001 3.33329 13.5 3.33329H6.5C5.09987 3.33329 4.3998 3.33329 3.86502 3.60578C3.39462 3.84546 3.01217 4.22791 2.77248 4.69832C2.5 5.2331 2.5 5.93316 2.5 7.33329V14.3333C2.5 15.7334 2.5 16.4335 2.77248 16.9683C3.01217 17.4387 3.39462 17.8211 3.86502 18.0608C4.3998 18.3333 5.09987 18.3333 6.5 18.3333Z\" stroke=\"%23475467\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/> </svg>');background-size:contain;background-repeat:no-repeat;transform:translate(-50%)}:host ::ng-deep .mat-mdc-form-field .mat-mdc-icon-button.cdk-focused .mat-mdc-button-persistent-ripple.mdc-icon-button__ripple{display:none}:host ::ng-deep .mat-mdc-form-field .mat-mdc-icon-button span{width:var(--button-size, 24px);height:var(--button-size, 24px);display:flex;align-items:center;justify-content:center}:host ::ng-deep .mat-mdc-form-field .mat-mdc-form-field-subscript-wrapper{display:none}:host ::ng-deep .mat-mdc-form-field .mdc-line-ripple:before,:host ::ng-deep .mat-mdc-form-field .mdc-line-ripple:after{display:none}:host ::ng-deep .mat-mdc-form-field .mat-mdc-form-field-label{color:#adadad}:host ::ng-deep .mat-mdc-form-field.mat-mdc-focused,:host ::ng-deep .mat-mdc-form-field .mat-mdc-form-field-label{color:#adadad}:host ::ng-deep .mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-text-field__input,:host ::ng-deep .mat-mdc-form-field-input-control,:host ::ng-deep .mdc-text-field__input{color:#101828}:host ::ng-deep .mat-mdc-form-field-has-icon-suffix .mat-mdc-text-field-wrapper{padding:0}:host ::ng-deep .mat-mdc-datepicker-toggle-active{color:#667085}:host ::ng-deep .mat-mdc-form-field-flex{flex-direction:row-reverse}:host ::ng-deep .daysSelectedCaption{cursor:pointer}:host ::ng-deep .daysSelectedCaption.disabled{cursor:zoom-in}:host ::ng-deep .inputForMultipleDays{display:none}:host ::ng-deep .disabledClickArea{position:absolute;inset:0;z-index:1}:host ::ng-deep .mat-mdc-form-field.mat-focused,:host ::ng-deep .mat-mdc-form-field-focus-overlay{opacity:unset;background-color:unset}.componentContainer{display:flex;position:relative;border-radius:2px;color:#101828}.componentContainer .dateContainer::-webkit-input-placeholder{color:#98a2b3}.componentContainer .dateContainer:-moz-placeholder{color:#98a2b3}.componentContainer .dateContainer::-moz-placeholder{color:#98a2b3}.componentContainer .dateContainer:-ms-input-placeholder{color:#98a2b3}.componentContainer .dateContainer{display:block;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:none;height:40px;width:100%;padding:.5rem .75rem;font-size:16px;font-weight:400;line-height:24px;color:#101828}.componentContainer .dateContainer:focus,.componentContainer .dateContainer:focus-within{outline:1px solid #00AC42;box-shadow:none;border-color:#00ac42}.componentContainer .dateContainer.input-sm{padding:.375rem .5rem;font-size:14px;line-height:20px;height:32px}.componentContainer .dateContainer.input-sm.grow{min-height:32px}.componentContainer .dateContainer.input-lg{padding:.625rem .75rem;height:44px}.componentContainer .dateContainer.input-lg.grow{min-height:44px}.componentContainer .dateContainer.grow{height:auto;min-height:40px}.componentContainer .dateContainer.error{border-color:#dc3545;background-color:#f6cdd1}.componentContainer .dateContainer.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}.componentContainer .dateContainer:placeholder-shown{text-overflow:ellipsis}.componentContainer .dateContainer.disabled{background-color:#f2f4f7;border-color:#f2f4f7;cursor:not-allowed}.componentContainer .dateContainer{display:flex;flex-direction:row;align-items:center;flex:1 1 auto;background:#fff;border:1px solid #D0D5DD;border-radius:8px}.componentContainer .dateContainer mat-form-field{flex:1 1 auto;height:100%;display:flex}.componentContainer .dateContainer mat-form-field ::ng-deep .mat-mdc-text-field-wrapper{height:100%;display:flex;align-items:center}.componentContainer .dateContainer mat-form-field ::ng-deep .mat-mdc-form-field-infix{padding:0;min-height:auto;display:flex;align-items:center;align-self:center}.componentContainer .dateContainer mat-form-field ::ng-deep input.mat-mdc-input-element{height:100%;padding:0;margin:0}.componentContainer .dateContainer mat-form-field::ng-deep input{outline:none;border:none;flex:1 1 auto;min-width:0;width:auto;height:100%;font-size:inherit;line-height:inherit;color:inherit;background:none}.componentContainer .dateContainer mat-form-field::ng-deep input.disabled{cursor:not-allowed}.componentContainer .dateContainer mat-form-field::ng-deep input :disabled{cursor:not-allowed}.componentContainer .dateContainer mat-form-field::ng-deep input{align-self:center}.componentContainer .dateContainer mat-form-field::ng-deep input:placeholder-shown{text-overflow:ellipsis}.componentContainer .dateContainer mat-form-field::ng-deep input::-webkit-input-placeholder{color:red}.componentContainer .dateContainer mat-form-field::ng-deep input:-moz-placeholder{color:red}.componentContainer .dateContainer mat-form-field::ng-deep input::-moz-placeholder{color:red}.componentContainer .dateContainer mat-form-field::ng-deep input:-ms-input-placeholder{color:red}.componentContainer .dateContainer.disabled{background:#f2f4f7;border-color:transparent;cursor:pointer}.componentContainer .dateContainer.disabled::ng-deep input{cursor:pointer}.componentContainer .dateContainer:hover{border-color:#98a2b3}.componentContainer .dateContainer:focus-within{border-color:#00ac42;outline:1px solid #00AC42}.componentContainer .dateContainer ::ng-deep .mdc-text-field__input::placeholder{color:#aaa!important}.componentContainer .dateContainer .placeholderForMultipleSelection,.componentContainer .dateContainer .placeholderForSelection{color:#adadad}.componentContainer .dateContainer .head{cursor:default}.componentContainer .dateContainer .tail{cursor:default;display:flex;flex-direction:row;align-items:center;gap:.625rem}.componentContainer .dateContainer .prefix,.componentContainer .dateContainer .suffix{display:flex;align-items:center;flex-shrink:0}.componentContainer .dateContainer.showErrors .dateContainer,.componentContainer .dateContainer.showErrors .timeContainer,.componentContainer .dateContainer.showErrors .clearButton.withoutSpacing{border-color:#ff8000}.componentContainer .dateContainer .clearButton{flex:0 0 auto;display:flex;align-items:center;background:#fff;color:#7b7b7b;border:1px solid #D0D5DD;margin-left:1.25rem;padding:6px 14px;font-size:18px}.componentContainer .dateContainer .clearButton.withoutSpacing{border-left:none;margin-left:0}.componentContainer .dateContainer .clearButton:disabled{border:1px solid #D0D5DD;background:#f2f4f7}.componentContainer .timeContainer{width:102px;position:relative;margin-left:1.25rem}.componentContainer .timeContainer .timeContainerInner{height:100%;flex:0 0 auto;padding:6px .625rem;background:#fff;display:flex;align-items:center;border:1px solid #D0D5DD;border-radius:8px}.componentContainer .timeContainer .timeContainerInner:hover{border-color:#98a2b3}.componentContainer .timeContainer .timeContainerInner:focus-within{border-color:#00ac42;outline:1px solid #00AC42}.componentContainer .timeContainer.disabled .timeContainerInner,.componentContainer .timeContainer.disabled input{background:#f2f4f7}.componentContainer .timeContainer .clockIcon{width:18px;margin-right:.3125rem}.componentContainer .timeContainer input{color:#101828;text-align:center;width:20px;padding:0;border:none;height:100%}.componentContainer .timeContainer input::placeholder{color:#adadad}.componentContainer .timeContainer .divider{margin:0 .3125rem}.componentContainer .timeContainer .timeDoubleDropdown{position:absolute;height:275px;width:102px;z-index:1;transform:translate(102px) translate(-100%);border:1px solid #D0D5DD;display:flex;background:#fff}.componentContainer .timeContainer .timeDoubleDropdown .hourOfDay{overflow:auto;scrollbar-width:none;width:50%}.componentContainer .timeContainer .timeDoubleDropdown .minuteOfHour{border-left:1px solid #D0D5DD;overflow:auto;scrollbar-width:none;width:50%}.componentContainer .timeContainer .timeDoubleDropdown .entry{text-align:center;height:42px;width:100%;line-height:42px;background:#fff;cursor:pointer}.componentContainer .timeContainer .timeDoubleDropdown .entry:hover{background:#f8f9fa}.componentContainer .timeContainer .timeDoubleDropdown .entry.isActive{color:#fff;background:#00ac42}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i5.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i5.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: OnRenderDirective, selector: "[onRenderFn]", inputs: ["onRenderFn"] }] }); }
2686
+ ], viewQueries: [{ propertyName: "nativeInputRef", first: true, predicate: ["nativeInput"], descendants: true }, { propertyName: "datePickerRef", first: true, predicate: ["picker"], descendants: true }, { propertyName: "timeDoubleDropdown", first: true, predicate: ["timeDoubleDropdown"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"componentContainer\" [ngClass]=\"{showErrors: isInErrorState(), disabled: disabled}\">\n\t<div class=\"dateContainer\" [class]=\"sizeClass\" [style.--button-size]=\"size === 'small' ? '20px' : '24px'\" >\n\t\t\t<div class=\"head\">\n\t\t\t\t@if (prefixTpl) {\n\t\t\t\t\t<div class=\"prefix\">\n\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"prefixTpl\"></ng-container>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t</div>\n\t\t\t<mat-form-field floatLabel=\"never\">\n\t\t\t\t@if (multiple) {\n\t\t\t\t\t<div class=\"daysSelectedCaption\" (click)=\"picker.open()\" [ngClass]=\"{disabled: disabled}\">\n\t\t\t\t\t\t@if (selectedDates.length >= 2) {\n\t\t\t\t\t\t\t<span>{{ getTranslation('daysSelected', selectedDates.length) }}</span>\n\t\t\t\t\t\t\t@if (getSelectedMonths() === 1) {\n\t\t\t\t\t\t\t\t<span>{{ getTranslation('selectedInMonth', selectedDates[0]) }}</span>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (selectedDates.length === 1) {\n\t\t\t\t\t\t\t<span>{{ getTranslation('selectedDate', selectedDates[0]) }}</span>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (selectedDates.length === 0) {\n\t\t\t\t\t\t\t<span class=\"placeholderForMultipleSelection\">{{ getTranslation('selectDays') }}</span>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t}\n\n\t\t\t\t@if (disabled) {\n\t\t\t\t\t<div class=\"disabledClickArea\" (click)=\"picker.open()\"></div>\n\t\t\t\t}\n\t\t\t\t<input\n\t\t\t\t\t#nativeInput\n\t\t\t\t\tmatInput\n\t\t\t\t\t[matDatepicker]=\"picker\"\n\t\t\t\t\t[matDatepickerFilter]=\"filterDates\"\n\t\t\t\t\t[(ngModel)]=\"valueForMaterialDatePicker\"\n\t\t\t\t\t(dateInput)=\"dateChanged($event)\"\n\t\t\t\t\t(input)=\"nativeValueChanged()\"\n\t\t\t\t\t(click)=\"picker.open()\"\n\t\t\t\t\t[min]=\"minDateStartOfDay\"\n\t\t\t\t\t[max]=\"maxDateEndOfDay\"\n\t\t\t\t\t[placeholder]=\"getTranslation('placeholder')\"\n\t\t\t\t\t(blur)=\"touchDate()\"\n\t\t\t\t\t[ngClass]=\"{inputForMultipleDays: multiple, disabled: disabled}\"\n\t\t\t\t>\n\t\t\t\t<mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n\t\t\t\t<mat-datepicker\n\t\t\t\t\t#picker\n\t\t\t\t\t[dateClass]=\"isSelected\"\n\t\t\t\t\t[startAt]=\"openPickerOnDate\"\n\t\t\t\t></mat-datepicker>\n\t\t\t</mat-form-field>\n\t\t\t<div class=\"tail\">\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n\t\t\t\t@if (suffixTpl) {\n\t\t\t\t\t<div class=\"suffix\">\n\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"suffixTpl\"></ng-container>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t</div>\n\t</div>\n\t@if (showTimeInput) {\n\t\t<div class=\"timeContainer\" [ngClass]=\"{disabled: disabled}\">\n\t\t\t<div class=\"timeContainerInner\">\n\t\t\t\t<svg class=\"clockIcon\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t (click)=\"hourInput.focus()\">\n\t\t\t\t\t<path\n\t\t\t\t\t\td=\"M12 6V12L16 14M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z\"\n\t\t\t\t\t\tstroke=\"#888da8\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n\t\t\t\t</svg>\n\t\t\t\t<input #hourInput maxlength=\"2\" placeholder=\"__\" [disabled]=\"disabled\" [(ngModel)]=\"hours\"\n\t\t\t\t\t\t\t (ngModelChange)=\"notifyNewDate()\" (focus)=\"dropdownVisible = true\" (blur)=\"blurredHours();\">\n\t\t\t\t<div class=\"divider\">:</div>\n\t\t\t\t<input maxlength=\"2\" placeholder=\"__\" [disabled]=\"disabled\" [(ngModel)]=\"minutes\"\n\t\t\t\t\t\t\t (ngModelChange)=\"notifyNewDate()\" (focus)=\"dropdownVisible = true\" (blur)=\"blurredMinutes();\">\n\t\t\t</div>\n\t\t\t@if (dropdownVisible) {\n\t\t\t\t<div class=\"timeDoubleDropdown\" #timeDoubleDropdown [onRenderFn]=\"timeDropdownRendered\">\n\t\t\t\t\t<div class=\"hourOfDay\">\n\t\t\t\t\t\t@for (hour of counter(24); track hour) {\n\t\t\t\t\t\t\t<div class=\"entry\" (mousedown)=\"setHour(hour)\"\n\t\t\t\t\t\t\t\t\t [ngClass]=\"{isActive: isActive(hour, hours)}\">{{ hour > 9 ? hour : '0' + hour }}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"minuteOfHour\">\n\t\t\t\t\t\t@for (minute of minutesOfHour; track minute) {\n\t\t\t\t\t\t\t<div class=\"entry\" (mousedown)=\"setMinute(minute)\"\n\t\t\t\t\t\t\t\t\t [ngClass]=\"{isActive: isActive(minute, minutes)}\">{{ minute > 9 ? minute : '0' + minute }}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t}\n\t\t</div>\n\t}\n</div>\n", styles: [":host{display:block;--mat-icon-button-icon-size: 18px}:host ::ng-deep .mat-mdc-icon-button .mat-mdc-button-persistent-ripple{border-radius:unset;display:flex;align-items:center;justify-content:center;width:100%;height:100%}:host ::ng-deep .mat-mdc-icon-button .mat-mdc-button-touch-target{display:flex;align-items:center;justify-content:center;width:100%;height:100%}:host ::ng-deep .mat-datepicker-toggle-default-icon{color:transparent;width:var(--button-size, 24px);height:var(--button-size, 24px);display:flex;align-items:center;justify-content:center}:host ::ng-deep .mat-mdc-form-field{display:block;height:100%;width:100%}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper,:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-focus-overlay{background-color:unset}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper:hover,:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-focus-overlay:hover{background-color:unset}:host ::ng-deep .mat-mdc-form-field .mat-mdc-form-field-infix{padding-top:8px;padding-bottom:8px;min-height:40px;font-size:14px;color:#101828;width:100%}:host ::ng-deep .mat-mdc-form-field .mat-mdc-form-field-icon-suffix{height:100%;padding:0;display:flex;align-items:center;justify-content:center}:host ::ng-deep .mat-mdc-form-field .mat-mdc-icon-button{width:var(--button-size, 24px);height:var(--button-size, 24px);min-width:var(--button-size, 24px);min-height:var(--button-size, 24px);padding:0;margin:0 8px 0 0;display:flex;align-items:center;justify-content:center}:host ::ng-deep .mat-mdc-form-field .mat-mdc-icon-button:after{position:absolute;left:50%;content:\"\";display:inline-block;width:var(--button-size, 24px);height:var(--button-size, 24px);background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"><path d=\"M17.5 8.33329H2.5M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M6.5 18.3333H13.5C14.9001 18.3333 15.6002 18.3333 16.135 18.0608C16.6054 17.8211 16.9878 17.4387 17.2275 16.9683C17.5 16.4335 17.5 15.7334 17.5 14.3333V7.33329C17.5 5.93316 17.5 5.2331 17.2275 4.69832C16.9878 4.22791 16.6054 3.84546 16.135 3.60578C15.6002 3.33329 14.9001 3.33329 13.5 3.33329H6.5C5.09987 3.33329 4.3998 3.33329 3.86502 3.60578C3.39462 3.84546 3.01217 4.22791 2.77248 4.69832C2.5 5.2331 2.5 5.93316 2.5 7.33329V14.3333C2.5 15.7334 2.5 16.4335 2.77248 16.9683C3.01217 17.4387 3.39462 17.8211 3.86502 18.0608C4.3998 18.3333 5.09987 18.3333 6.5 18.3333Z\" stroke=\"%23475467\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/> </svg>');background-size:contain;background-repeat:no-repeat;transform:translate(-50%)}:host ::ng-deep .mat-mdc-form-field .mat-mdc-icon-button.cdk-focused .mat-mdc-button-persistent-ripple.mdc-icon-button__ripple{display:none}:host ::ng-deep .mat-mdc-form-field .mat-mdc-icon-button span{width:var(--button-size, 24px);height:var(--button-size, 24px);display:flex;align-items:center;justify-content:center}:host ::ng-deep .mat-mdc-form-field .mat-mdc-form-field-subscript-wrapper{display:none}:host ::ng-deep .mat-mdc-form-field .mdc-line-ripple:before,:host ::ng-deep .mat-mdc-form-field .mdc-line-ripple:after{display:none}:host ::ng-deep .mat-mdc-form-field .mat-mdc-form-field-label{color:#adadad}:host ::ng-deep .mat-mdc-form-field.mat-mdc-focused,:host ::ng-deep .mat-mdc-form-field .mat-mdc-form-field-label{color:#adadad}:host ::ng-deep .mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-text-field__input,:host ::ng-deep .mat-mdc-form-field-input-control,:host ::ng-deep .mdc-text-field__input{color:#101828}:host ::ng-deep .mat-mdc-form-field-has-icon-suffix .mat-mdc-text-field-wrapper{padding:0}:host ::ng-deep .mat-mdc-datepicker-toggle-active{color:#667085}:host ::ng-deep .mat-mdc-form-field-flex{flex-direction:row-reverse}:host ::ng-deep .daysSelectedCaption{cursor:pointer}:host ::ng-deep .daysSelectedCaption.disabled{cursor:zoom-in}:host ::ng-deep .inputForMultipleDays{display:none}:host ::ng-deep .disabledClickArea{position:absolute;inset:0;z-index:1}:host ::ng-deep .mat-mdc-form-field.mat-focused,:host ::ng-deep .mat-mdc-form-field-focus-overlay{opacity:unset;background-color:unset}.componentContainer{display:flex;position:relative;border-radius:2px;color:#101828}.componentContainer .dateContainer::-webkit-input-placeholder{color:#98a2b3}.componentContainer .dateContainer:-moz-placeholder{color:#98a2b3}.componentContainer .dateContainer::-moz-placeholder{color:#98a2b3}.componentContainer .dateContainer:-ms-input-placeholder{color:#98a2b3}.componentContainer .dateContainer{display:block;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:none;height:40px;width:100%;padding:.5rem .75rem;font-size:16px;font-weight:400;line-height:24px;color:#101828}.componentContainer .dateContainer:hover{border:1px solid #98A2B3}.componentContainer .dateContainer.showErrors{border:1px solid #ff8000;outline:.5px solid #ff8000}.componentContainer .dateContainer:focus,.componentContainer .dateContainer:focus-within{border:1px solid #00AC42;outline:1px solid #00AC42}.componentContainer .dateContainer.disabled{border:1px solid #F2F4F7;background-color:#f2f4f7;cursor:not-allowed}.componentContainer .dateContainer.input-sm{padding:.375rem .5rem;font-size:14px;line-height:20px;height:32px}.componentContainer .dateContainer.input-sm.grow{min-height:32px}.componentContainer .dateContainer.input-lg{padding:.625rem .75rem;height:44px}.componentContainer .dateContainer.input-lg.grow{min-height:44px}.componentContainer .dateContainer.grow{height:auto;min-height:40px}.componentContainer .dateContainer:placeholder-shown{text-overflow:ellipsis}.componentContainer .dateContainer{display:flex;flex-direction:row;align-items:center;flex:1 1 auto;background:#fff;border:1px solid #D0D5DD;border-radius:8px}.componentContainer .dateContainer mat-form-field{flex:1 1 auto;height:100%;display:flex}.componentContainer .dateContainer mat-form-field ::ng-deep .mat-mdc-text-field-wrapper{height:100%;display:flex;align-items:center}.componentContainer .dateContainer mat-form-field ::ng-deep .mat-mdc-form-field-infix{padding:0;min-height:auto;display:flex;align-items:center;align-self:center}.componentContainer .dateContainer mat-form-field ::ng-deep input.mat-mdc-input-element{height:100%;padding:0;margin:0}.componentContainer .dateContainer mat-form-field::ng-deep input{outline:none;border:none;flex:1 1 auto;min-width:0;width:100%;height:100%;font-size:inherit;line-height:inherit;color:inherit;background:none}.componentContainer .dateContainer mat-form-field::ng-deep input.disabled{cursor:not-allowed}.componentContainer .dateContainer mat-form-field::ng-deep input :disabled{cursor:not-allowed}.componentContainer .dateContainer mat-form-field::ng-deep input{align-self:center}.componentContainer .dateContainer mat-form-field::ng-deep input:placeholder-shown{text-overflow:ellipsis}.componentContainer .dateContainer mat-form-field::ng-deep input::-webkit-input-placeholder{color:red}.componentContainer .dateContainer mat-form-field::ng-deep input:-moz-placeholder{color:red}.componentContainer .dateContainer mat-form-field::ng-deep input::-moz-placeholder{color:red}.componentContainer .dateContainer mat-form-field::ng-deep input:-ms-input-placeholder{color:red}.componentContainer .dateContainer.disabled{background:#f2f4f7;border-color:transparent;cursor:pointer}.componentContainer .dateContainer.disabled::ng-deep input{cursor:pointer}.componentContainer .dateContainer:hover{border-color:#98a2b3}.componentContainer .dateContainer:focus-within{border-color:#00ac42;outline:1px solid #00AC42}.componentContainer .dateContainer ::ng-deep .mdc-text-field__input::placeholder{color:#aaa!important}.componentContainer .dateContainer .placeholderForMultipleSelection,.componentContainer .dateContainer .placeholderForSelection{color:#adadad}.componentContainer .dateContainer .head{cursor:default}.componentContainer .dateContainer .tail{cursor:default;display:flex;flex-direction:row;align-items:center;gap:.625rem}.componentContainer .dateContainer .prefix,.componentContainer .dateContainer .suffix{display:flex;align-items:center;flex-shrink:0}.componentContainer .dateContainer.showErrors .dateContainer,.componentContainer .dateContainer.showErrors .timeContainer,.componentContainer .dateContainer.showErrors .clearButton.withoutSpacing{border-color:#ff8000}.componentContainer .dateContainer .clearButton{flex:0 0 auto;display:flex;align-items:center;background:#fff;color:#7b7b7b;border:1px solid #D0D5DD;margin-left:1.25rem;padding:6px 14px;font-size:18px}.componentContainer .dateContainer .clearButton.withoutSpacing{border-left:none;margin-left:0}.componentContainer .dateContainer .clearButton:disabled{border:1px solid #D0D5DD;background:#f2f4f7}.componentContainer .timeContainer{width:102px;position:relative;margin-left:1.25rem}.componentContainer .timeContainer .timeContainerInner{height:100%;flex:0 0 auto;padding:6px .625rem;background:#fff;display:flex;align-items:center;border:1px solid #D0D5DD;border-radius:8px}.componentContainer .timeContainer .timeContainerInner:hover{border-color:#98a2b3}.componentContainer .timeContainer .timeContainerInner:focus-within{border-color:#00ac42;outline:1px solid #00AC42}.componentContainer .timeContainer.disabled .timeContainerInner,.componentContainer .timeContainer.disabled input{background:#f2f4f7}.componentContainer .timeContainer .clockIcon{width:18px;margin-right:.3125rem}.componentContainer .timeContainer input{color:#101828;text-align:center;width:20px;padding:0;border:none;height:100%}.componentContainer .timeContainer input::placeholder{color:#adadad}.componentContainer .timeContainer .divider{margin:0 .3125rem}.componentContainer .timeContainer .timeDoubleDropdown{position:absolute;height:275px;width:102px;z-index:1;transform:translate(102px) translate(-100%);border:1px solid #D0D5DD;display:flex;background:#fff}.componentContainer .timeContainer .timeDoubleDropdown .hourOfDay{overflow:auto;scrollbar-width:none;width:50%}.componentContainer .timeContainer .timeDoubleDropdown .minuteOfHour{border-left:1px solid #D0D5DD;overflow:auto;scrollbar-width:none;width:50%}.componentContainer .timeContainer .timeDoubleDropdown .entry{text-align:center;height:42px;width:100%;line-height:42px;background:#fff;cursor:pointer}.componentContainer .timeContainer .timeDoubleDropdown .entry:hover{background:#f8f9fa}.componentContainer .timeContainer .timeDoubleDropdown .entry.isActive{color:#fff;background:#00ac42}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i5.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i5.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: OnRenderDirective, selector: "[onRenderFn]", inputs: ["onRenderFn"] }] }); }
2601
2687
  }
2602
2688
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: DateTimePickerComponent, decorators: [{
2603
2689
  type: Component,
@@ -2608,7 +2694,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
2608
2694
  deps: [DateTimePickerComponent, [new Optional(), KLP_DATE_FORMATS]],
2609
2695
  useFactory: matDateFormatsFactory,
2610
2696
  },
2611
- ], standalone: false, template: "<div class=\"componentContainer\" [ngClass]=\"{showErrors: isInErrorState()}\" [ngClass]=\"{disabled: disabled}\">\n\t<div class=\"dateContainer\" [ngClass]=\"{disabled: disabled, 'input-sm': size === 'small', 'input-lg': size === 'large'}\" [style.--button-size]=\"size === 'small' ? '20px' : '24px'\" >\n\t\t\t<div class=\"head\">\n\t\t\t\t@if (prefixTpl) {\n\t\t\t\t\t<div class=\"prefix\">\n\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"prefixTpl\"></ng-container>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t</div>\n\t\t\t<mat-form-field floatLabel=\"never\">\n\t\t\t\t@if (multiple) {\n\t\t\t\t\t<div class=\"daysSelectedCaption\" (click)=\"picker.open()\" [ngClass]=\"{disabled: disabled}\">\n\t\t\t\t\t\t@if (selectedDates.length >= 2) {\n\t\t\t\t\t\t\t<span>{{ getTranslation('daysSelected', selectedDates.length) }}</span>\n\t\t\t\t\t\t\t@if (getSelectedMonths() === 1) {\n\t\t\t\t\t\t\t\t<span>{{ getTranslation('selectedInMonth', selectedDates[0]) }}</span>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (selectedDates.length === 1) {\n\t\t\t\t\t\t\t<span>{{ getTranslation('selectedDate', selectedDates[0]) }}</span>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (selectedDates.length === 0) {\n\t\t\t\t\t\t\t<span class=\"placeholderForMultipleSelection\">{{ getTranslation('selectDays') }}</span>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t}\n\n\t\t\t\t@if (disabled) {\n\t\t\t\t\t<div class=\"disabledClickArea\" (click)=\"picker.open()\"></div>\n\t\t\t\t}\n\t\t\t\t<input\n\t\t\t\t\t#nativeInput\n\t\t\t\t\tmatInput\n\t\t\t\t\t[matDatepicker]=\"picker\"\n\t\t\t\t\t[matDatepickerFilter]=\"filterDates\"\n\t\t\t\t\t[(ngModel)]=\"valueForMaterialDatePicker\"\n\t\t\t\t\t(dateInput)=\"dateChanged($event)\"\n\t\t\t\t\t(input)=\"nativeValueChanged()\"\n\t\t\t\t\t(click)=\"picker.open()\"\n\t\t\t\t\t[min]=\"minDateStartOfDay\"\n\t\t\t\t\t[max]=\"maxDateEndOfDay\"\n\t\t\t\t\t[placeholder]=\"getTranslation('placeholder')\"\n\t\t\t\t\t(blur)=\"touchDate()\"\n\t\t\t\t\t[ngClass]=\"{inputForMultipleDays: multiple, disabled: disabled}\"\n\t\t\t\t>\n\t\t\t\t<mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n\t\t\t\t<mat-datepicker\n\t\t\t\t\t#picker\n\t\t\t\t\t[dateClass]=\"isSelected\"\n\t\t\t\t\t[startAt]=\"openPickerOnDate\"\n\t\t\t\t></mat-datepicker>\n\t\t\t</mat-form-field>\n\t\t\t<div class=\"tail\">\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n\t\t\t\t@if (suffixTpl) {\n\t\t\t\t\t<div class=\"suffix\">\n\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"suffixTpl\"></ng-container>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t</div>\n\t</div>\n\t@if (showTimeInput) {\n\t\t<div class=\"timeContainer\" [ngClass]=\"{disabled: disabled}\">\n\t\t\t<div class=\"timeContainerInner\">\n\t\t\t\t<svg class=\"clockIcon\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t (click)=\"hourInput.focus()\">\n\t\t\t\t\t<path\n\t\t\t\t\t\td=\"M12 6V12L16 14M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z\"\n\t\t\t\t\t\tstroke=\"#888da8\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n\t\t\t\t</svg>\n\t\t\t\t<input #hourInput maxlength=\"2\" placeholder=\"__\" [disabled]=\"disabled\" [(ngModel)]=\"hours\"\n\t\t\t\t\t\t\t (ngModelChange)=\"notifyNewDate()\" (focus)=\"dropdownVisible = true\" (blur)=\"blurredHours();\">\n\t\t\t\t<div class=\"divider\">:</div>\n\t\t\t\t<input maxlength=\"2\" placeholder=\"__\" [disabled]=\"disabled\" [(ngModel)]=\"minutes\"\n\t\t\t\t\t\t\t (ngModelChange)=\"notifyNewDate()\" (focus)=\"dropdownVisible = true\" (blur)=\"blurredMinutes();\">\n\t\t\t</div>\n\t\t\t@if (dropdownVisible) {\n\t\t\t\t<div class=\"timeDoubleDropdown\" #timeDoubleDropdown [onRenderFn]=\"timeDropdownRendered\">\n\t\t\t\t\t<div class=\"hourOfDay\">\n\t\t\t\t\t\t@for (hour of counter(24); track hour) {\n\t\t\t\t\t\t\t<div class=\"entry\" (mousedown)=\"setHour(hour)\"\n\t\t\t\t\t\t\t\t\t [ngClass]=\"{isActive: isActive(hour, hours)}\">{{ hour > 9 ? hour : '0' + hour }}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"minuteOfHour\">\n\t\t\t\t\t\t@for (minute of minutesOfHour; track minute) {\n\t\t\t\t\t\t\t<div class=\"entry\" (mousedown)=\"setMinute(minute)\"\n\t\t\t\t\t\t\t\t\t [ngClass]=\"{isActive: isActive(minute, minutes)}\">{{ minute > 9 ? minute : '0' + minute }}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t}\n\t\t</div>\n\t}\n</div>\n", styles: [":host{display:block;--mat-icon-button-icon-size: 18px}:host ::ng-deep .mat-mdc-icon-button .mat-mdc-button-persistent-ripple{border-radius:unset;display:flex;align-items:center;justify-content:center;width:100%;height:100%}:host ::ng-deep .mat-mdc-icon-button .mat-mdc-button-touch-target{display:flex;align-items:center;justify-content:center;width:100%;height:100%}:host ::ng-deep .mat-datepicker-toggle-default-icon{color:transparent;width:var(--button-size, 24px);height:var(--button-size, 24px);display:flex;align-items:center;justify-content:center}:host ::ng-deep .mat-mdc-form-field{display:block;height:100%;width:100%}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper,:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-focus-overlay{background-color:unset}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper:hover,:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-focus-overlay:hover{background-color:unset}:host ::ng-deep .mat-mdc-form-field .mat-mdc-form-field-infix{padding-top:8px;padding-bottom:8px;min-height:40px;font-size:14px;color:#101828;width:100%}:host ::ng-deep .mat-mdc-form-field .mat-mdc-form-field-icon-suffix{height:100%;padding:0;display:flex;align-items:center;justify-content:center}:host ::ng-deep .mat-mdc-form-field .mat-mdc-icon-button{width:var(--button-size, 24px);height:var(--button-size, 24px);min-width:var(--button-size, 24px);min-height:var(--button-size, 24px);padding:0;margin:0 8px 0 0;display:flex;align-items:center;justify-content:center}:host ::ng-deep .mat-mdc-form-field .mat-mdc-icon-button:after{position:absolute;left:50%;content:\"\";display:inline-block;width:var(--button-size, 24px);height:var(--button-size, 24px);background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"><path d=\"M17.5 8.33329H2.5M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M6.5 18.3333H13.5C14.9001 18.3333 15.6002 18.3333 16.135 18.0608C16.6054 17.8211 16.9878 17.4387 17.2275 16.9683C17.5 16.4335 17.5 15.7334 17.5 14.3333V7.33329C17.5 5.93316 17.5 5.2331 17.2275 4.69832C16.9878 4.22791 16.6054 3.84546 16.135 3.60578C15.6002 3.33329 14.9001 3.33329 13.5 3.33329H6.5C5.09987 3.33329 4.3998 3.33329 3.86502 3.60578C3.39462 3.84546 3.01217 4.22791 2.77248 4.69832C2.5 5.2331 2.5 5.93316 2.5 7.33329V14.3333C2.5 15.7334 2.5 16.4335 2.77248 16.9683C3.01217 17.4387 3.39462 17.8211 3.86502 18.0608C4.3998 18.3333 5.09987 18.3333 6.5 18.3333Z\" stroke=\"%23475467\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/> </svg>');background-size:contain;background-repeat:no-repeat;transform:translate(-50%)}:host ::ng-deep .mat-mdc-form-field .mat-mdc-icon-button.cdk-focused .mat-mdc-button-persistent-ripple.mdc-icon-button__ripple{display:none}:host ::ng-deep .mat-mdc-form-field .mat-mdc-icon-button span{width:var(--button-size, 24px);height:var(--button-size, 24px);display:flex;align-items:center;justify-content:center}:host ::ng-deep .mat-mdc-form-field .mat-mdc-form-field-subscript-wrapper{display:none}:host ::ng-deep .mat-mdc-form-field .mdc-line-ripple:before,:host ::ng-deep .mat-mdc-form-field .mdc-line-ripple:after{display:none}:host ::ng-deep .mat-mdc-form-field .mat-mdc-form-field-label{color:#adadad}:host ::ng-deep .mat-mdc-form-field.mat-mdc-focused,:host ::ng-deep .mat-mdc-form-field .mat-mdc-form-field-label{color:#adadad}:host ::ng-deep .mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-text-field__input,:host ::ng-deep .mat-mdc-form-field-input-control,:host ::ng-deep .mdc-text-field__input{color:#101828}:host ::ng-deep .mat-mdc-form-field-has-icon-suffix .mat-mdc-text-field-wrapper{padding:0}:host ::ng-deep .mat-mdc-datepicker-toggle-active{color:#667085}:host ::ng-deep .mat-mdc-form-field-flex{flex-direction:row-reverse}:host ::ng-deep .daysSelectedCaption{cursor:pointer}:host ::ng-deep .daysSelectedCaption.disabled{cursor:zoom-in}:host ::ng-deep .inputForMultipleDays{display:none}:host ::ng-deep .disabledClickArea{position:absolute;inset:0;z-index:1}:host ::ng-deep .mat-mdc-form-field.mat-focused,:host ::ng-deep .mat-mdc-form-field-focus-overlay{opacity:unset;background-color:unset}.componentContainer{display:flex;position:relative;border-radius:2px;color:#101828}.componentContainer .dateContainer::-webkit-input-placeholder{color:#98a2b3}.componentContainer .dateContainer:-moz-placeholder{color:#98a2b3}.componentContainer .dateContainer::-moz-placeholder{color:#98a2b3}.componentContainer .dateContainer:-ms-input-placeholder{color:#98a2b3}.componentContainer .dateContainer{display:block;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:none;height:40px;width:100%;padding:.5rem .75rem;font-size:16px;font-weight:400;line-height:24px;color:#101828}.componentContainer .dateContainer:focus,.componentContainer .dateContainer:focus-within{outline:1px solid #00AC42;box-shadow:none;border-color:#00ac42}.componentContainer .dateContainer.input-sm{padding:.375rem .5rem;font-size:14px;line-height:20px;height:32px}.componentContainer .dateContainer.input-sm.grow{min-height:32px}.componentContainer .dateContainer.input-lg{padding:.625rem .75rem;height:44px}.componentContainer .dateContainer.input-lg.grow{min-height:44px}.componentContainer .dateContainer.grow{height:auto;min-height:40px}.componentContainer .dateContainer.error{border-color:#dc3545;background-color:#f6cdd1}.componentContainer .dateContainer.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}.componentContainer .dateContainer:placeholder-shown{text-overflow:ellipsis}.componentContainer .dateContainer.disabled{background-color:#f2f4f7;border-color:#f2f4f7;cursor:not-allowed}.componentContainer .dateContainer{display:flex;flex-direction:row;align-items:center;flex:1 1 auto;background:#fff;border:1px solid #D0D5DD;border-radius:8px}.componentContainer .dateContainer mat-form-field{flex:1 1 auto;height:100%;display:flex}.componentContainer .dateContainer mat-form-field ::ng-deep .mat-mdc-text-field-wrapper{height:100%;display:flex;align-items:center}.componentContainer .dateContainer mat-form-field ::ng-deep .mat-mdc-form-field-infix{padding:0;min-height:auto;display:flex;align-items:center;align-self:center}.componentContainer .dateContainer mat-form-field ::ng-deep input.mat-mdc-input-element{height:100%;padding:0;margin:0}.componentContainer .dateContainer mat-form-field::ng-deep input{outline:none;border:none;flex:1 1 auto;min-width:0;width:auto;height:100%;font-size:inherit;line-height:inherit;color:inherit;background:none}.componentContainer .dateContainer mat-form-field::ng-deep input.disabled{cursor:not-allowed}.componentContainer .dateContainer mat-form-field::ng-deep input :disabled{cursor:not-allowed}.componentContainer .dateContainer mat-form-field::ng-deep input{align-self:center}.componentContainer .dateContainer mat-form-field::ng-deep input:placeholder-shown{text-overflow:ellipsis}.componentContainer .dateContainer mat-form-field::ng-deep input::-webkit-input-placeholder{color:red}.componentContainer .dateContainer mat-form-field::ng-deep input:-moz-placeholder{color:red}.componentContainer .dateContainer mat-form-field::ng-deep input::-moz-placeholder{color:red}.componentContainer .dateContainer mat-form-field::ng-deep input:-ms-input-placeholder{color:red}.componentContainer .dateContainer.disabled{background:#f2f4f7;border-color:transparent;cursor:pointer}.componentContainer .dateContainer.disabled::ng-deep input{cursor:pointer}.componentContainer .dateContainer:hover{border-color:#98a2b3}.componentContainer .dateContainer:focus-within{border-color:#00ac42;outline:1px solid #00AC42}.componentContainer .dateContainer ::ng-deep .mdc-text-field__input::placeholder{color:#aaa!important}.componentContainer .dateContainer .placeholderForMultipleSelection,.componentContainer .dateContainer .placeholderForSelection{color:#adadad}.componentContainer .dateContainer .head{cursor:default}.componentContainer .dateContainer .tail{cursor:default;display:flex;flex-direction:row;align-items:center;gap:.625rem}.componentContainer .dateContainer .prefix,.componentContainer .dateContainer .suffix{display:flex;align-items:center;flex-shrink:0}.componentContainer .dateContainer.showErrors .dateContainer,.componentContainer .dateContainer.showErrors .timeContainer,.componentContainer .dateContainer.showErrors .clearButton.withoutSpacing{border-color:#ff8000}.componentContainer .dateContainer .clearButton{flex:0 0 auto;display:flex;align-items:center;background:#fff;color:#7b7b7b;border:1px solid #D0D5DD;margin-left:1.25rem;padding:6px 14px;font-size:18px}.componentContainer .dateContainer .clearButton.withoutSpacing{border-left:none;margin-left:0}.componentContainer .dateContainer .clearButton:disabled{border:1px solid #D0D5DD;background:#f2f4f7}.componentContainer .timeContainer{width:102px;position:relative;margin-left:1.25rem}.componentContainer .timeContainer .timeContainerInner{height:100%;flex:0 0 auto;padding:6px .625rem;background:#fff;display:flex;align-items:center;border:1px solid #D0D5DD;border-radius:8px}.componentContainer .timeContainer .timeContainerInner:hover{border-color:#98a2b3}.componentContainer .timeContainer .timeContainerInner:focus-within{border-color:#00ac42;outline:1px solid #00AC42}.componentContainer .timeContainer.disabled .timeContainerInner,.componentContainer .timeContainer.disabled input{background:#f2f4f7}.componentContainer .timeContainer .clockIcon{width:18px;margin-right:.3125rem}.componentContainer .timeContainer input{color:#101828;text-align:center;width:20px;padding:0;border:none;height:100%}.componentContainer .timeContainer input::placeholder{color:#adadad}.componentContainer .timeContainer .divider{margin:0 .3125rem}.componentContainer .timeContainer .timeDoubleDropdown{position:absolute;height:275px;width:102px;z-index:1;transform:translate(102px) translate(-100%);border:1px solid #D0D5DD;display:flex;background:#fff}.componentContainer .timeContainer .timeDoubleDropdown .hourOfDay{overflow:auto;scrollbar-width:none;width:50%}.componentContainer .timeContainer .timeDoubleDropdown .minuteOfHour{border-left:1px solid #D0D5DD;overflow:auto;scrollbar-width:none;width:50%}.componentContainer .timeContainer .timeDoubleDropdown .entry{text-align:center;height:42px;width:100%;line-height:42px;background:#fff;cursor:pointer}.componentContainer .timeContainer .timeDoubleDropdown .entry:hover{background:#f8f9fa}.componentContainer .timeContainer .timeDoubleDropdown .entry.isActive{color:#fff;background:#00ac42}\n"] }]
2697
+ ], standalone: false, template: "<div class=\"componentContainer\" [ngClass]=\"{showErrors: isInErrorState(), disabled: disabled}\">\n\t<div class=\"dateContainer\" [class]=\"sizeClass\" [style.--button-size]=\"size === 'small' ? '20px' : '24px'\" >\n\t\t\t<div class=\"head\">\n\t\t\t\t@if (prefixTpl) {\n\t\t\t\t\t<div class=\"prefix\">\n\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"prefixTpl\"></ng-container>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t</div>\n\t\t\t<mat-form-field floatLabel=\"never\">\n\t\t\t\t@if (multiple) {\n\t\t\t\t\t<div class=\"daysSelectedCaption\" (click)=\"picker.open()\" [ngClass]=\"{disabled: disabled}\">\n\t\t\t\t\t\t@if (selectedDates.length >= 2) {\n\t\t\t\t\t\t\t<span>{{ getTranslation('daysSelected', selectedDates.length) }}</span>\n\t\t\t\t\t\t\t@if (getSelectedMonths() === 1) {\n\t\t\t\t\t\t\t\t<span>{{ getTranslation('selectedInMonth', selectedDates[0]) }}</span>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (selectedDates.length === 1) {\n\t\t\t\t\t\t\t<span>{{ getTranslation('selectedDate', selectedDates[0]) }}</span>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (selectedDates.length === 0) {\n\t\t\t\t\t\t\t<span class=\"placeholderForMultipleSelection\">{{ getTranslation('selectDays') }}</span>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t}\n\n\t\t\t\t@if (disabled) {\n\t\t\t\t\t<div class=\"disabledClickArea\" (click)=\"picker.open()\"></div>\n\t\t\t\t}\n\t\t\t\t<input\n\t\t\t\t\t#nativeInput\n\t\t\t\t\tmatInput\n\t\t\t\t\t[matDatepicker]=\"picker\"\n\t\t\t\t\t[matDatepickerFilter]=\"filterDates\"\n\t\t\t\t\t[(ngModel)]=\"valueForMaterialDatePicker\"\n\t\t\t\t\t(dateInput)=\"dateChanged($event)\"\n\t\t\t\t\t(input)=\"nativeValueChanged()\"\n\t\t\t\t\t(click)=\"picker.open()\"\n\t\t\t\t\t[min]=\"minDateStartOfDay\"\n\t\t\t\t\t[max]=\"maxDateEndOfDay\"\n\t\t\t\t\t[placeholder]=\"getTranslation('placeholder')\"\n\t\t\t\t\t(blur)=\"touchDate()\"\n\t\t\t\t\t[ngClass]=\"{inputForMultipleDays: multiple, disabled: disabled}\"\n\t\t\t\t>\n\t\t\t\t<mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n\t\t\t\t<mat-datepicker\n\t\t\t\t\t#picker\n\t\t\t\t\t[dateClass]=\"isSelected\"\n\t\t\t\t\t[startAt]=\"openPickerOnDate\"\n\t\t\t\t></mat-datepicker>\n\t\t\t</mat-form-field>\n\t\t\t<div class=\"tail\">\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n\t\t\t\t@if (suffixTpl) {\n\t\t\t\t\t<div class=\"suffix\">\n\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"suffixTpl\"></ng-container>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t</div>\n\t</div>\n\t@if (showTimeInput) {\n\t\t<div class=\"timeContainer\" [ngClass]=\"{disabled: disabled}\">\n\t\t\t<div class=\"timeContainerInner\">\n\t\t\t\t<svg class=\"clockIcon\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t (click)=\"hourInput.focus()\">\n\t\t\t\t\t<path\n\t\t\t\t\t\td=\"M12 6V12L16 14M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z\"\n\t\t\t\t\t\tstroke=\"#888da8\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n\t\t\t\t</svg>\n\t\t\t\t<input #hourInput maxlength=\"2\" placeholder=\"__\" [disabled]=\"disabled\" [(ngModel)]=\"hours\"\n\t\t\t\t\t\t\t (ngModelChange)=\"notifyNewDate()\" (focus)=\"dropdownVisible = true\" (blur)=\"blurredHours();\">\n\t\t\t\t<div class=\"divider\">:</div>\n\t\t\t\t<input maxlength=\"2\" placeholder=\"__\" [disabled]=\"disabled\" [(ngModel)]=\"minutes\"\n\t\t\t\t\t\t\t (ngModelChange)=\"notifyNewDate()\" (focus)=\"dropdownVisible = true\" (blur)=\"blurredMinutes();\">\n\t\t\t</div>\n\t\t\t@if (dropdownVisible) {\n\t\t\t\t<div class=\"timeDoubleDropdown\" #timeDoubleDropdown [onRenderFn]=\"timeDropdownRendered\">\n\t\t\t\t\t<div class=\"hourOfDay\">\n\t\t\t\t\t\t@for (hour of counter(24); track hour) {\n\t\t\t\t\t\t\t<div class=\"entry\" (mousedown)=\"setHour(hour)\"\n\t\t\t\t\t\t\t\t\t [ngClass]=\"{isActive: isActive(hour, hours)}\">{{ hour > 9 ? hour : '0' + hour }}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"minuteOfHour\">\n\t\t\t\t\t\t@for (minute of minutesOfHour; track minute) {\n\t\t\t\t\t\t\t<div class=\"entry\" (mousedown)=\"setMinute(minute)\"\n\t\t\t\t\t\t\t\t\t [ngClass]=\"{isActive: isActive(minute, minutes)}\">{{ minute > 9 ? minute : '0' + minute }}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t}\n\t\t</div>\n\t}\n</div>\n", styles: [":host{display:block;--mat-icon-button-icon-size: 18px}:host ::ng-deep .mat-mdc-icon-button .mat-mdc-button-persistent-ripple{border-radius:unset;display:flex;align-items:center;justify-content:center;width:100%;height:100%}:host ::ng-deep .mat-mdc-icon-button .mat-mdc-button-touch-target{display:flex;align-items:center;justify-content:center;width:100%;height:100%}:host ::ng-deep .mat-datepicker-toggle-default-icon{color:transparent;width:var(--button-size, 24px);height:var(--button-size, 24px);display:flex;align-items:center;justify-content:center}:host ::ng-deep .mat-mdc-form-field{display:block;height:100%;width:100%}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper,:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-focus-overlay{background-color:unset}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper:hover,:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-focus-overlay:hover{background-color:unset}:host ::ng-deep .mat-mdc-form-field .mat-mdc-form-field-infix{padding-top:8px;padding-bottom:8px;min-height:40px;font-size:14px;color:#101828;width:100%}:host ::ng-deep .mat-mdc-form-field .mat-mdc-form-field-icon-suffix{height:100%;padding:0;display:flex;align-items:center;justify-content:center}:host ::ng-deep .mat-mdc-form-field .mat-mdc-icon-button{width:var(--button-size, 24px);height:var(--button-size, 24px);min-width:var(--button-size, 24px);min-height:var(--button-size, 24px);padding:0;margin:0 8px 0 0;display:flex;align-items:center;justify-content:center}:host ::ng-deep .mat-mdc-form-field .mat-mdc-icon-button:after{position:absolute;left:50%;content:\"\";display:inline-block;width:var(--button-size, 24px);height:var(--button-size, 24px);background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"><path d=\"M17.5 8.33329H2.5M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M6.5 18.3333H13.5C14.9001 18.3333 15.6002 18.3333 16.135 18.0608C16.6054 17.8211 16.9878 17.4387 17.2275 16.9683C17.5 16.4335 17.5 15.7334 17.5 14.3333V7.33329C17.5 5.93316 17.5 5.2331 17.2275 4.69832C16.9878 4.22791 16.6054 3.84546 16.135 3.60578C15.6002 3.33329 14.9001 3.33329 13.5 3.33329H6.5C5.09987 3.33329 4.3998 3.33329 3.86502 3.60578C3.39462 3.84546 3.01217 4.22791 2.77248 4.69832C2.5 5.2331 2.5 5.93316 2.5 7.33329V14.3333C2.5 15.7334 2.5 16.4335 2.77248 16.9683C3.01217 17.4387 3.39462 17.8211 3.86502 18.0608C4.3998 18.3333 5.09987 18.3333 6.5 18.3333Z\" stroke=\"%23475467\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/> </svg>');background-size:contain;background-repeat:no-repeat;transform:translate(-50%)}:host ::ng-deep .mat-mdc-form-field .mat-mdc-icon-button.cdk-focused .mat-mdc-button-persistent-ripple.mdc-icon-button__ripple{display:none}:host ::ng-deep .mat-mdc-form-field .mat-mdc-icon-button span{width:var(--button-size, 24px);height:var(--button-size, 24px);display:flex;align-items:center;justify-content:center}:host ::ng-deep .mat-mdc-form-field .mat-mdc-form-field-subscript-wrapper{display:none}:host ::ng-deep .mat-mdc-form-field .mdc-line-ripple:before,:host ::ng-deep .mat-mdc-form-field .mdc-line-ripple:after{display:none}:host ::ng-deep .mat-mdc-form-field .mat-mdc-form-field-label{color:#adadad}:host ::ng-deep .mat-mdc-form-field.mat-mdc-focused,:host ::ng-deep .mat-mdc-form-field .mat-mdc-form-field-label{color:#adadad}:host ::ng-deep .mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-text-field__input,:host ::ng-deep .mat-mdc-form-field-input-control,:host ::ng-deep .mdc-text-field__input{color:#101828}:host ::ng-deep .mat-mdc-form-field-has-icon-suffix .mat-mdc-text-field-wrapper{padding:0}:host ::ng-deep .mat-mdc-datepicker-toggle-active{color:#667085}:host ::ng-deep .mat-mdc-form-field-flex{flex-direction:row-reverse}:host ::ng-deep .daysSelectedCaption{cursor:pointer}:host ::ng-deep .daysSelectedCaption.disabled{cursor:zoom-in}:host ::ng-deep .inputForMultipleDays{display:none}:host ::ng-deep .disabledClickArea{position:absolute;inset:0;z-index:1}:host ::ng-deep .mat-mdc-form-field.mat-focused,:host ::ng-deep .mat-mdc-form-field-focus-overlay{opacity:unset;background-color:unset}.componentContainer{display:flex;position:relative;border-radius:2px;color:#101828}.componentContainer .dateContainer::-webkit-input-placeholder{color:#98a2b3}.componentContainer .dateContainer:-moz-placeholder{color:#98a2b3}.componentContainer .dateContainer::-moz-placeholder{color:#98a2b3}.componentContainer .dateContainer:-ms-input-placeholder{color:#98a2b3}.componentContainer .dateContainer{display:block;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:none;height:40px;width:100%;padding:.5rem .75rem;font-size:16px;font-weight:400;line-height:24px;color:#101828}.componentContainer .dateContainer:hover{border:1px solid #98A2B3}.componentContainer .dateContainer.showErrors{border:1px solid #ff8000;outline:.5px solid #ff8000}.componentContainer .dateContainer:focus,.componentContainer .dateContainer:focus-within{border:1px solid #00AC42;outline:1px solid #00AC42}.componentContainer .dateContainer.disabled{border:1px solid #F2F4F7;background-color:#f2f4f7;cursor:not-allowed}.componentContainer .dateContainer.input-sm{padding:.375rem .5rem;font-size:14px;line-height:20px;height:32px}.componentContainer .dateContainer.input-sm.grow{min-height:32px}.componentContainer .dateContainer.input-lg{padding:.625rem .75rem;height:44px}.componentContainer .dateContainer.input-lg.grow{min-height:44px}.componentContainer .dateContainer.grow{height:auto;min-height:40px}.componentContainer .dateContainer:placeholder-shown{text-overflow:ellipsis}.componentContainer .dateContainer{display:flex;flex-direction:row;align-items:center;flex:1 1 auto;background:#fff;border:1px solid #D0D5DD;border-radius:8px}.componentContainer .dateContainer mat-form-field{flex:1 1 auto;height:100%;display:flex}.componentContainer .dateContainer mat-form-field ::ng-deep .mat-mdc-text-field-wrapper{height:100%;display:flex;align-items:center}.componentContainer .dateContainer mat-form-field ::ng-deep .mat-mdc-form-field-infix{padding:0;min-height:auto;display:flex;align-items:center;align-self:center}.componentContainer .dateContainer mat-form-field ::ng-deep input.mat-mdc-input-element{height:100%;padding:0;margin:0}.componentContainer .dateContainer mat-form-field::ng-deep input{outline:none;border:none;flex:1 1 auto;min-width:0;width:100%;height:100%;font-size:inherit;line-height:inherit;color:inherit;background:none}.componentContainer .dateContainer mat-form-field::ng-deep input.disabled{cursor:not-allowed}.componentContainer .dateContainer mat-form-field::ng-deep input :disabled{cursor:not-allowed}.componentContainer .dateContainer mat-form-field::ng-deep input{align-self:center}.componentContainer .dateContainer mat-form-field::ng-deep input:placeholder-shown{text-overflow:ellipsis}.componentContainer .dateContainer mat-form-field::ng-deep input::-webkit-input-placeholder{color:red}.componentContainer .dateContainer mat-form-field::ng-deep input:-moz-placeholder{color:red}.componentContainer .dateContainer mat-form-field::ng-deep input::-moz-placeholder{color:red}.componentContainer .dateContainer mat-form-field::ng-deep input:-ms-input-placeholder{color:red}.componentContainer .dateContainer.disabled{background:#f2f4f7;border-color:transparent;cursor:pointer}.componentContainer .dateContainer.disabled::ng-deep input{cursor:pointer}.componentContainer .dateContainer:hover{border-color:#98a2b3}.componentContainer .dateContainer:focus-within{border-color:#00ac42;outline:1px solid #00AC42}.componentContainer .dateContainer ::ng-deep .mdc-text-field__input::placeholder{color:#aaa!important}.componentContainer .dateContainer .placeholderForMultipleSelection,.componentContainer .dateContainer .placeholderForSelection{color:#adadad}.componentContainer .dateContainer .head{cursor:default}.componentContainer .dateContainer .tail{cursor:default;display:flex;flex-direction:row;align-items:center;gap:.625rem}.componentContainer .dateContainer .prefix,.componentContainer .dateContainer .suffix{display:flex;align-items:center;flex-shrink:0}.componentContainer .dateContainer.showErrors .dateContainer,.componentContainer .dateContainer.showErrors .timeContainer,.componentContainer .dateContainer.showErrors .clearButton.withoutSpacing{border-color:#ff8000}.componentContainer .dateContainer .clearButton{flex:0 0 auto;display:flex;align-items:center;background:#fff;color:#7b7b7b;border:1px solid #D0D5DD;margin-left:1.25rem;padding:6px 14px;font-size:18px}.componentContainer .dateContainer .clearButton.withoutSpacing{border-left:none;margin-left:0}.componentContainer .dateContainer .clearButton:disabled{border:1px solid #D0D5DD;background:#f2f4f7}.componentContainer .timeContainer{width:102px;position:relative;margin-left:1.25rem}.componentContainer .timeContainer .timeContainerInner{height:100%;flex:0 0 auto;padding:6px .625rem;background:#fff;display:flex;align-items:center;border:1px solid #D0D5DD;border-radius:8px}.componentContainer .timeContainer .timeContainerInner:hover{border-color:#98a2b3}.componentContainer .timeContainer .timeContainerInner:focus-within{border-color:#00ac42;outline:1px solid #00AC42}.componentContainer .timeContainer.disabled .timeContainerInner,.componentContainer .timeContainer.disabled input{background:#f2f4f7}.componentContainer .timeContainer .clockIcon{width:18px;margin-right:.3125rem}.componentContainer .timeContainer input{color:#101828;text-align:center;width:20px;padding:0;border:none;height:100%}.componentContainer .timeContainer input::placeholder{color:#adadad}.componentContainer .timeContainer .divider{margin:0 .3125rem}.componentContainer .timeContainer .timeDoubleDropdown{position:absolute;height:275px;width:102px;z-index:1;transform:translate(102px) translate(-100%);border:1px solid #D0D5DD;display:flex;background:#fff}.componentContainer .timeContainer .timeDoubleDropdown .hourOfDay{overflow:auto;scrollbar-width:none;width:50%}.componentContainer .timeContainer .timeDoubleDropdown .minuteOfHour{border-left:1px solid #D0D5DD;overflow:auto;scrollbar-width:none;width:50%}.componentContainer .timeContainer .timeDoubleDropdown .entry{text-align:center;height:42px;width:100%;line-height:42px;background:#fff;cursor:pointer}.componentContainer .timeContainer .timeDoubleDropdown .entry:hover{background:#f8f9fa}.componentContainer .timeContainer .timeDoubleDropdown .entry.isActive{color:#fff;background:#00ac42}\n"] }]
2612
2698
  }], ctorParameters: () => [{ type: FormElementComponent, decorators: [{
2613
2699
  type: Host
2614
2700
  }, {
@@ -2647,8 +2733,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
2647
2733
  type: Input
2648
2734
  }], invalidTimeAsMidnight: [{
2649
2735
  type: Input
2650
- }], size: [{
2651
- type: Input
2652
2736
  }], suffixTpl: [{
2653
2737
  type: Input
2654
2738
  }], prefixTpl: [{
@@ -2676,7 +2760,7 @@ class DatePickerComponent extends MultipleValueAccessorBase {
2676
2760
  this.sameMonthOnly = false;
2677
2761
  this.format = 'dd-MM-yyyy';
2678
2762
  this.clearable = false;
2679
- this.size = 'medium';
2763
+ this.size = null;
2680
2764
  this.suffixTpl = null;
2681
2765
  this.prefixTpl = null;
2682
2766
  }
@@ -2732,7 +2816,7 @@ class DatePickerComponent extends MultipleValueAccessorBase {
2732
2816
  return this.translations?.[key]?.(params) ?? this.getDefaultTranslation(key)(params);
2733
2817
  }
2734
2818
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: DatePickerComponent, deps: [{ token: FormElementComponent, host: true, optional: true }, { token: i2.ControlContainer, host: true, optional: true }, { token: DATE_PICKER_TRANSLATIONS, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
2735
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: DatePickerComponent, isStandalone: false, selector: "klp-form-date-picker", inputs: { minDate: "minDate", maxDate: "maxDate", sameMonthOnly: "sameMonthOnly", format: "format", placeholder: "placeholder", clearable: "clearable", size: "size", suffixTpl: "suffixTpl", prefixTpl: "prefixTpl" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: DatePickerComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"componentContainer\" [ngClass]=\"{showErrors: isInErrorState()}\">\n\t<klp-form-date-time-picker\n\t\t[multiple]=\"multiple\"\n\t\t[disabled]=\"disabled\"\n\t\t[(ngModel)]=\"dateValue\"\n\t\t(ngModelChange)=\"dateChanged($event)\"\n\t\t[minDate]=\"minDate\"\n\t\t[maxDate]=\"maxDate\"\n\t\t[sameMonthOnly]=\"sameMonthOnly\"\n\t\t[format]=\"format\"\n\t\t[placeholder]=\"getTranslation('placeholder')\"\n\t\t[clearable]=\"clearable\"\n\t\t[showTimeInput]=\"false\"\n\t\t[getTailTplFn]=\"getTailTpl\"\n\t\t(onTouch)=\"touch()\"\n\t\t[size]=\"size\"\n\t\t[suffixTpl]=\"suffixTpl\"\n\t\t[prefixTpl]=\"prefixTpl\"\n\t></klp-form-date-time-picker>\n</div>\n", styles: [":host{display:block;--mat-icon-button-icon-size: 18px}.componentContainer{position:relative}.componentContainer.showErrors ::ng-deep klp-form-date-time-picker .dateContainer,.componentContainer.showErrors ::ng-deep klp-form-date-time-picker .clearButton{border-color:#ff8000}.tail{position:absolute;right:.625rem;display:flex;align-items:center;top:0;bottom:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DateTimePickerComponent, selector: "klp-form-date-time-picker", inputs: ["minDate", "maxDate", "sameMonthOnly", "format", "placeholder", "clearable", "showTimeInput", "initHour", "initMinute", "invalidTimeAsMidnight", "size", "suffixTpl", "prefixTpl"] }] }); }
2819
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: DatePickerComponent, isStandalone: false, selector: "klp-form-date-picker", inputs: { minDate: "minDate", maxDate: "maxDate", sameMonthOnly: "sameMonthOnly", format: "format", placeholder: "placeholder", clearable: "clearable", size: "size", suffixTpl: "suffixTpl", prefixTpl: "prefixTpl" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: DatePickerComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"componentContainer\" [ngClass]=\"{showErrors: isInErrorState()}\">\n\t<klp-form-date-time-picker\n\t\t[multiple]=\"multiple\"\n\t\t[disabled]=\"disabled\"\n\t\t[(ngModel)]=\"dateValue\"\n\t\t(ngModelChange)=\"dateChanged($event)\"\n\t\t[minDate]=\"minDate\"\n\t\t[maxDate]=\"maxDate\"\n\t\t[sameMonthOnly]=\"sameMonthOnly\"\n\t\t[format]=\"format\"\n\t\t[placeholder]=\"getTranslation('placeholder')\"\n\t\t[clearable]=\"clearable\"\n\t\t[showTimeInput]=\"false\"\n\t\t[getTailTplFn]=\"getTailTpl\"\n\t\t(onTouch)=\"touch()\"\n\t\t[size]=\"size\"\n\t\t[suffixTpl]=\"suffixTpl\"\n\t\t[prefixTpl]=\"prefixTpl\"\n\t></klp-form-date-time-picker>\n</div>\n", styles: [":host{display:block;--mat-icon-button-icon-size: 18px}.componentContainer{position:relative}.componentContainer.showErrors ::ng-deep klp-form-date-time-picker .dateContainer,.componentContainer.showErrors ::ng-deep klp-form-date-time-picker .clearButton{border-color:#ff8000}.tail{position:absolute;right:.625rem;display:flex;align-items:center;top:0;bottom:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DateTimePickerComponent, selector: "klp-form-date-time-picker", inputs: ["minDate", "maxDate", "sameMonthOnly", "format", "placeholder", "clearable", "showTimeInput", "initHour", "initMinute", "invalidTimeAsMidnight", "suffixTpl", "prefixTpl"] }] }); }
2736
2820
  }
2737
2821
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: DatePickerComponent, decorators: [{
2738
2822
  type: Component,
@@ -2978,11 +3062,11 @@ class HourMinuteInputComponent extends ValueAccessorBase {
2978
3062
  }
2979
3063
  }
2980
3064
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: HourMinuteInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
2981
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: HourMinuteInputComponent, isStandalone: false, selector: "klp-form-hour-minute-input", inputs: { placeholders: "placeholders" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: HourMinuteInputComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"componentContainer\" [ngClass]=\"{disabled: disabled}\" [ngClass]=\"{showErrors: isInErrorState()}\">\n\t<input class=\"hourInput\" maxlength=\"4\" [placeholder]=\"placeholders[0]\" [disabled]=\"disabled\" [(ngModel)]=\"hours\" (blur)=\"formatHours(); formatTime(); touchHours(); notifyNewTime()\" (ngModelChange)=\"notifyNewTime()\" #nativeInputRef>\n\t<div class=\"divider\">:</div>\n\t<input maxlength=\"2\" [placeholder]=\"placeholders[1]\" [disabled]=\"disabled\" [(ngModel)]=\"minutes\" (blur)=\"formatMinutes(); formatTime(); touchMinutes(); notifyNewTime()\" (ngModelChange)=\"notifyNewTime()\">\n\t<div class=\"tail\">\n\t\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n\t</div>\n</div>\n", styles: [":host{display:flex}.componentContainer{height:42px}.componentContainer::-webkit-input-placeholder{color:#98a2b3}.componentContainer:-moz-placeholder{color:#98a2b3}.componentContainer::-moz-placeholder{color:#98a2b3}.componentContainer:-ms-input-placeholder{color:#98a2b3}.componentContainer{display:block;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:none;height:40px;width:100%;padding:.5rem .75rem;font-size:16px;font-weight:400;line-height:24px;color:#101828}.componentContainer:focus,.componentContainer:focus-within{outline:1px solid #00AC42;box-shadow:none;border-color:#00ac42}.componentContainer.input-sm{padding:.375rem .5rem;font-size:14px;line-height:20px;height:32px}.componentContainer.input-sm.grow{min-height:32px}.componentContainer.input-lg{padding:.625rem .75rem;height:44px}.componentContainer.input-lg.grow{min-height:44px}.componentContainer.grow{height:auto;min-height:40px}.componentContainer:hover{border-color:#98a2b3}.componentContainer.error{border-color:#dc3545;background-color:#f6cdd1}.componentContainer.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}.componentContainer:placeholder-shown{text-overflow:ellipsis}.componentContainer.disabled{background-color:#f2f4f7;border-color:#f2f4f7;cursor:not-allowed}.componentContainer{width:initial;flex:0 0 auto;padding:6px .625rem;background:#fff;display:flex;align-items:center;border:1px solid #D0D5DD}.componentContainer.showErrors{border-color:#ff8000}.componentContainer.disabled{background:#f2f4f7;cursor:not-allowed}.componentContainer:focus-within{border-color:#00ac42;outline:1px solid #00AC42}.componentContainer input{color:#101828;text-align:center;height:100%;width:30px}.componentContainer input.hourInput{width:50px}.componentContainer input{padding:0;border:none}.componentContainer input::placeholder{color:#adadad}.componentContainer .divider{margin:0 .3125rem}.tail{margin-left:.4rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
3065
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: HourMinuteInputComponent, isStandalone: false, selector: "klp-form-hour-minute-input", inputs: { placeholders: "placeholders" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: HourMinuteInputComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"componentContainer\" [ngClass]=\"{disabled: disabled, showErrors: isInErrorState()}\">\n\t<input class=\"hourInput\" maxlength=\"4\" [placeholder]=\"placeholders[0]\" [disabled]=\"disabled\" [(ngModel)]=\"hours\" (blur)=\"formatHours(); formatTime(); touchHours(); notifyNewTime()\" (ngModelChange)=\"notifyNewTime()\" #nativeInputRef>\n\t<div class=\"divider\">:</div>\n\t<input maxlength=\"2\" [placeholder]=\"placeholders[1]\" [disabled]=\"disabled\" [(ngModel)]=\"minutes\" (blur)=\"formatMinutes(); formatTime(); touchMinutes(); notifyNewTime()\" (ngModelChange)=\"notifyNewTime()\">\n\t<div class=\"tail\">\n\t\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n\t</div>\n</div>\n", styles: [":host{display:flex}.componentContainer{height:42px}.componentContainer::-webkit-input-placeholder{color:#98a2b3}.componentContainer:-moz-placeholder{color:#98a2b3}.componentContainer::-moz-placeholder{color:#98a2b3}.componentContainer:-ms-input-placeholder{color:#98a2b3}.componentContainer{display:block;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:none;height:40px;width:100%;padding:.5rem .75rem;font-size:16px;font-weight:400;line-height:24px;color:#101828}.componentContainer:hover{border:1px solid #98A2B3}.componentContainer.showErrors{border:1px solid #ff8000;outline:.5px solid #ff8000}.componentContainer:focus,.componentContainer:focus-within{border:1px solid #00AC42;outline:1px solid #00AC42}.componentContainer.disabled{border:1px solid #F2F4F7;background-color:#f2f4f7;cursor:not-allowed}.componentContainer.input-sm{padding:.375rem .5rem;font-size:14px;line-height:20px;height:32px}.componentContainer.input-sm.grow{min-height:32px}.componentContainer.input-lg{padding:.625rem .75rem;height:44px}.componentContainer.input-lg.grow{min-height:44px}.componentContainer.grow{height:auto;min-height:40px}.componentContainer:placeholder-shown{text-overflow:ellipsis}.componentContainer{width:initial;flex:0 0 auto;padding:6px .625rem;background:#fff;display:flex;align-items:center;border:1px solid #D0D5DD}.componentContainer.showErrors{border-color:#ff8000}.componentContainer.disabled{background:#f2f4f7;cursor:not-allowed}.componentContainer:focus-within{border-color:#00ac42;outline:1px solid #00AC42}.componentContainer input{color:#101828;text-align:center;height:100%;width:30px}.componentContainer input.hourInput{width:50px}.componentContainer input{padding:0;border:none}.componentContainer input::placeholder{color:#adadad}.componentContainer .divider{margin:0 .3125rem}.tail{margin-left:.4rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
2982
3066
  }
2983
3067
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: HourMinuteInputComponent, decorators: [{
2984
3068
  type: Component,
2985
- args: [{ selector: 'klp-form-hour-minute-input', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: HourMinuteInputComponent, multi: true }], standalone: false, template: "<div class=\"componentContainer\" [ngClass]=\"{disabled: disabled}\" [ngClass]=\"{showErrors: isInErrorState()}\">\n\t<input class=\"hourInput\" maxlength=\"4\" [placeholder]=\"placeholders[0]\" [disabled]=\"disabled\" [(ngModel)]=\"hours\" (blur)=\"formatHours(); formatTime(); touchHours(); notifyNewTime()\" (ngModelChange)=\"notifyNewTime()\" #nativeInputRef>\n\t<div class=\"divider\">:</div>\n\t<input maxlength=\"2\" [placeholder]=\"placeholders[1]\" [disabled]=\"disabled\" [(ngModel)]=\"minutes\" (blur)=\"formatMinutes(); formatTime(); touchMinutes(); notifyNewTime()\" (ngModelChange)=\"notifyNewTime()\">\n\t<div class=\"tail\">\n\t\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n\t</div>\n</div>\n", styles: [":host{display:flex}.componentContainer{height:42px}.componentContainer::-webkit-input-placeholder{color:#98a2b3}.componentContainer:-moz-placeholder{color:#98a2b3}.componentContainer::-moz-placeholder{color:#98a2b3}.componentContainer:-ms-input-placeholder{color:#98a2b3}.componentContainer{display:block;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:none;height:40px;width:100%;padding:.5rem .75rem;font-size:16px;font-weight:400;line-height:24px;color:#101828}.componentContainer:focus,.componentContainer:focus-within{outline:1px solid #00AC42;box-shadow:none;border-color:#00ac42}.componentContainer.input-sm{padding:.375rem .5rem;font-size:14px;line-height:20px;height:32px}.componentContainer.input-sm.grow{min-height:32px}.componentContainer.input-lg{padding:.625rem .75rem;height:44px}.componentContainer.input-lg.grow{min-height:44px}.componentContainer.grow{height:auto;min-height:40px}.componentContainer:hover{border-color:#98a2b3}.componentContainer.error{border-color:#dc3545;background-color:#f6cdd1}.componentContainer.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}.componentContainer:placeholder-shown{text-overflow:ellipsis}.componentContainer.disabled{background-color:#f2f4f7;border-color:#f2f4f7;cursor:not-allowed}.componentContainer{width:initial;flex:0 0 auto;padding:6px .625rem;background:#fff;display:flex;align-items:center;border:1px solid #D0D5DD}.componentContainer.showErrors{border-color:#ff8000}.componentContainer.disabled{background:#f2f4f7;cursor:not-allowed}.componentContainer:focus-within{border-color:#00ac42;outline:1px solid #00AC42}.componentContainer input{color:#101828;text-align:center;height:100%;width:30px}.componentContainer input.hourInput{width:50px}.componentContainer input{padding:0;border:none}.componentContainer input::placeholder{color:#adadad}.componentContainer .divider{margin:0 .3125rem}.tail{margin-left:.4rem}\n"] }]
3069
+ args: [{ selector: 'klp-form-hour-minute-input', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: HourMinuteInputComponent, multi: true }], standalone: false, template: "<div class=\"componentContainer\" [ngClass]=\"{disabled: disabled, showErrors: isInErrorState()}\">\n\t<input class=\"hourInput\" maxlength=\"4\" [placeholder]=\"placeholders[0]\" [disabled]=\"disabled\" [(ngModel)]=\"hours\" (blur)=\"formatHours(); formatTime(); touchHours(); notifyNewTime()\" (ngModelChange)=\"notifyNewTime()\" #nativeInputRef>\n\t<div class=\"divider\">:</div>\n\t<input maxlength=\"2\" [placeholder]=\"placeholders[1]\" [disabled]=\"disabled\" [(ngModel)]=\"minutes\" (blur)=\"formatMinutes(); formatTime(); touchMinutes(); notifyNewTime()\" (ngModelChange)=\"notifyNewTime()\">\n\t<div class=\"tail\">\n\t\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n\t</div>\n</div>\n", styles: [":host{display:flex}.componentContainer{height:42px}.componentContainer::-webkit-input-placeholder{color:#98a2b3}.componentContainer:-moz-placeholder{color:#98a2b3}.componentContainer::-moz-placeholder{color:#98a2b3}.componentContainer:-ms-input-placeholder{color:#98a2b3}.componentContainer{display:block;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:none;height:40px;width:100%;padding:.5rem .75rem;font-size:16px;font-weight:400;line-height:24px;color:#101828}.componentContainer:hover{border:1px solid #98A2B3}.componentContainer.showErrors{border:1px solid #ff8000;outline:.5px solid #ff8000}.componentContainer:focus,.componentContainer:focus-within{border:1px solid #00AC42;outline:1px solid #00AC42}.componentContainer.disabled{border:1px solid #F2F4F7;background-color:#f2f4f7;cursor:not-allowed}.componentContainer.input-sm{padding:.375rem .5rem;font-size:14px;line-height:20px;height:32px}.componentContainer.input-sm.grow{min-height:32px}.componentContainer.input-lg{padding:.625rem .75rem;height:44px}.componentContainer.input-lg.grow{min-height:44px}.componentContainer.grow{height:auto;min-height:40px}.componentContainer:placeholder-shown{text-overflow:ellipsis}.componentContainer{width:initial;flex:0 0 auto;padding:6px .625rem;background:#fff;display:flex;align-items:center;border:1px solid #D0D5DD}.componentContainer.showErrors{border-color:#ff8000}.componentContainer.disabled{background:#f2f4f7;cursor:not-allowed}.componentContainer:focus-within{border-color:#00ac42;outline:1px solid #00AC42}.componentContainer input{color:#101828;text-align:center;height:100%;width:30px}.componentContainer input.hourInput{width:50px}.componentContainer input{padding:0;border:none}.componentContainer input::placeholder{color:#adadad}.componentContainer .divider{margin:0 .3125rem}.tail{margin-left:.4rem}\n"] }]
2986
3070
  }], propDecorators: { placeholders: [{
2987
3071
  type: Input
2988
3072
  }] } });
@@ -2997,23 +3081,44 @@ class RadioComponent extends ValueAccessorBase {
2997
3081
  super(...arguments);
2998
3082
  this.orientation = Orientation.ROW;
2999
3083
  this.variant = 'classic';
3000
- this.size = 'medium';
3001
3084
  this.Orientation = Orientation;
3002
3085
  }
3086
+ ngOnInit() {
3087
+ super.ngOnInit();
3088
+ const sizes = this.calculateRadioSize();
3089
+ this.radioSize = sizes.size;
3090
+ this.captionSpacing = sizes.captionSpacing;
3091
+ }
3092
+ ngOnChanges(changes) {
3093
+ super.ngOnChanges(changes);
3094
+ if (changes.size) {
3095
+ const sizes = this.calculateRadioSize();
3096
+ this.radioSize = sizes.size;
3097
+ this.captionSpacing = sizes.captionSpacing;
3098
+ }
3099
+ }
3100
+ calculateRadioSize() {
3101
+ switch (this.size) {
3102
+ case 'small':
3103
+ return { size: 16, captionSpacing: 8 };
3104
+ case 'medium':
3105
+ return { size: 20, captionSpacing: 10 };
3106
+ case 'large':
3107
+ return { size: 24, captionSpacing: 12 };
3108
+ }
3109
+ }
3003
3110
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: RadioComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
3004
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: RadioComponent, isStandalone: false, selector: "klp-form-radio", inputs: { options: "options", orientation: "orientation", variant: "variant", size: "size" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: RadioComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"componentContainer\" [ngClass]=\"{'verticallyOriented': orientation === Orientation.COLUMN, 'horizontallyOriented': orientation === Orientation.ROW, buttonGray: variant === 'buttonGray', sizeSmall: size === 'small'}\">\n @for (option of options; track option) {\n <button class=\"optionContainer\"\n [ngClass]=\"{classic: variant === 'classic', button: variant === 'button', buttonGray: variant === 'buttonGray', isSelected: innerValue === option.id}\"\n (click)=\"setInnerValueAndNotify(option.id)\"\n\t\t\t[disabled]=\"disabled\"\n >\n <div class=\"radioAndName\">\n @if (variant === 'classic') {\n <div class=\"radioBtnContainer\" [ngClass]=\"{selected: innerValue === option.id}\">\n @if (innerValue === option.id) {\n <div class=\"innerCircle\"></div>\n }\n </div>\n }\n <div class=\"nameAndDescription\">\n <div>{{option.name}}</div>\n @if (option.description) {\n <div class=\"description\">{{option.description}}</div>\n }\n </div>\n </div>\n </button>\n }\n</div>\n", styles: [":host{display:block}.componentContainer{position:relative;display:flex}.componentContainer.verticallyOriented{flex-direction:column}.componentContainer.verticallyOriented .optionContainer{margin-bottom:.3125rem}.componentContainer.verticallyOriented .optionContainer:last-child{margin-bottom:0}.componentContainer.horizontallyOriented{flex-direction:row}.componentContainer.horizontallyOriented .optionContainer:first-child{border-radius:6px 0 0 6px}.componentContainer.horizontallyOriented .optionContainer:last-child{border-radius:0 6px 6px 0}.componentContainer.horizontallyOriented.buttonGray .optionContainer:first-child{border-radius:8px}.componentContainer.horizontallyOriented.buttonGray .optionContainer:last-child{border-radius:8px}.componentContainer.buttonGray{background:#eaecf0;border-radius:8px;display:inline-block}.componentContainer.sizeSmall .optionContainer{padding:.4rem .8rem}.optionContainer{margin-right:.3125rem;background:transparent;border:none;align-items:center}.optionContainer.classic{cursor:pointer}.optionContainer.classic:focus,.optionContainer.classic:focus-visible{outline:none}.optionContainer.classic:focus .radioBtnContainer,.optionContainer.classic:focus-visible .radioBtnContainer{outline:2px solid #00AC42;outline-offset:2px}.optionContainer.classic:disabled .radioBtnContainer.selected{background-color:#eaecf0;border-color:#eaecf0}.optionContainer.classic .radioBtnContainer{flex:0 0 auto;position:relative;height:20px;width:20px;padding:4px;border-radius:50%;border:1px solid #D0D5DD;margin-right:.3125rem;display:flex;align-items:center;justify-content:center}.optionContainer.classic .radioBtnContainer.selected{background-color:#00ac42;border-color:#00ac42}.optionContainer.classic .radioBtnContainer .innerCircle{height:80%;width:80%;display:block;border-radius:100%;background-color:#fff}.optionContainer.classic .description{opacity:1;margin-top:.4rem;color:#475467}.optionContainer.classic .nameAndDescription{color:#101828;margin-top:2px}.optionContainer.button{position:relative;cursor:pointer;padding:10px 14px;margin-right:0;color:#00ac42;border:1px solid #00AC42;background-color:#fff}.optionContainer.button.isSelected{background:#00ac42;color:#fff}.optionContainer.buttonGray{position:relative;cursor:pointer;padding:10px 14px;margin:2px;color:#475467;background:#eaecf0;border-radius:8px}.optionContainer.buttonGray.isSelected{background:#fff;color:#101828}.radioAndName{display:flex;flex-direction:row;gap:.2rem}.nameAndDescription{text-align:left;line-height:1.1rem}.description{margin-top:.2rem;opacity:.6}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
3111
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: RadioComponent, isStandalone: false, selector: "klp-form-radio", inputs: { options: "options", orientation: "orientation", variant: "variant" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: RadioComponent, multi: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"componentContainer\" [style.--radio-size]=\"radioSize + 'px'\" [style.--caption-spacing]=\"captionSpacing + 'px'\" [ngClass]=\"{'verticallyOriented': orientation === Orientation.COLUMN, 'horizontallyOriented': orientation === Orientation.ROW, buttonGray: variant === 'buttonGray'}\">\n @for (option of options; track option) {\n @if (variant === 'classic') {\n <div class=\"optionWrapper\">\n <label>\n <div class=\"radioVisualContainer\">\n <input type=\"radio\"\n class=\"radioNative\"\n [checked]=\"innerValue === option.id\"\n (change)=\"setInnerValueAndNotify(option.id); touch()\"\n [disabled]=\"disabled\"\n />\n <div class=\"radioBtnContainer\" [ngClass]=\"{selected: innerValue === option.id}\">\n @if (innerValue === option.id) {\n <div class=\"innerCircle\"></div>\n }\n </div>\n </div>\n <div class=\"name\" [class]=\"sizeClass\" [ngClass]=\"{disabled: disabled}\">{{option.name}}</div>\n </label>\n @if (option.description) {\n <div class=\"description\" [class]=\"sizeClass\" [ngClass]=\"{disabled: disabled}\">{{option.description}}</div>\n }\n </div>\n } @else {\n <button class=\"optionContainer\"\n [ngClass]=\"{button: variant === 'button', buttonGray: variant === 'buttonGray', isSelected: innerValue === option.id}\"\n (click)=\"setInnerValueAndNotify(option.id)\"\n [disabled]=\"disabled\"\n >\n <div class=\"nameAndDescription\">\n <div>{{option.name}}</div>\n @if (option.description) {\n <div class=\"description\">{{option.description}}</div>\n }\n </div>\n </button>\n }\n }\n</div>\n", styles: [":host{display:block}.componentContainer{position:relative;display:flex}.componentContainer.verticallyOriented{flex-direction:column}.componentContainer.verticallyOriented .optionWrapper{margin-bottom:.3125rem}.componentContainer.verticallyOriented .optionWrapper:last-child{margin-bottom:0}.componentContainer.verticallyOriented .optionContainer{margin-bottom:.3125rem}.componentContainer.verticallyOriented .optionContainer:last-child{margin-bottom:0}.componentContainer.horizontallyOriented{flex-direction:row}.componentContainer.horizontallyOriented .optionContainer:first-child{border-radius:6px 0 0 6px}.componentContainer.horizontallyOriented .optionContainer:last-child{border-radius:0 6px 6px 0}.componentContainer.horizontallyOriented.buttonGray .optionContainer:first-child{border-radius:8px}.componentContainer.horizontallyOriented.buttonGray .optionContainer:last-child{border-radius:8px}.componentContainer.buttonGray{background:#eaecf0;border-radius:8px;display:inline-block}.optionWrapper{display:grid;grid-template-columns:auto 1fr;align-items:start;margin-bottom:0}.optionWrapper label{display:contents;align-items:center;justify-content:center;margin-bottom:0}.optionWrapper .radioVisualContainer{position:relative;grid-column:1;align-self:center}.optionWrapper .radioNative{position:absolute;opacity:0;top:0;left:0;width:var(--radio-size);height:var(--radio-size);cursor:pointer;margin:0}.optionWrapper .radioNative[disabled]{cursor:not-allowed}.optionWrapper .radioNative:focus+.radioBtnContainer{outline:2px solid #00AC42;outline-offset:2px}.optionWrapper .radioBtnContainer{pointer-events:none;flex:0 0 auto;position:relative;height:var(--radio-size);width:var(--radio-size);border-radius:50%;border:1px solid #D0D5DD;margin-right:var(--caption-spacing);display:flex;align-items:center;justify-content:center}.optionWrapper .radioBtnContainer.selected{background-color:#00ac42;border-color:#00ac42}.optionWrapper .radioBtnContainer .innerCircle{height:50%;width:50%;display:block;border-radius:100%;background-color:#fff}.optionWrapper .radioNative:disabled+.radioBtnContainer{background-color:#f2f4f7;border-color:#eaecf0}.optionWrapper .radioNative:disabled+.radioBtnContainer.selected{background-color:#eaecf0;border-color:#eaecf0}.optionWrapper .name{color:#101828;font-feature-settings:\"cv05\" on;font-size:16px;font-style:normal;font-weight:500;line-height:24px;letter-spacing:.16px}.optionWrapper .name.input-sm{font-size:14px;line-height:20px;letter-spacing:.14px}.optionWrapper .name.disabled{color:#98a2b3}.optionWrapper .name{font-weight:400;cursor:pointer;grid-column:2}.optionWrapper .name.disabled{cursor:not-allowed}.optionWrapper .description{color:#101828;font-feature-settings:\"cv05\" on;font-size:16px;font-style:normal;font-weight:500;line-height:24px;letter-spacing:.16px}.optionWrapper .description.input-sm{font-size:14px;line-height:20px;letter-spacing:.14px}.optionWrapper .description.disabled{color:#98a2b3}.optionWrapper .description{font-weight:400;color:#667085;grid-column:2;opacity:1}.optionContainer{margin-right:.3125rem;background:transparent;border:none;align-items:center}.optionContainer.button{position:relative;cursor:pointer;padding:10px 14px;margin-right:0;color:#00ac42;border:1px solid #00AC42;background-color:#fff}.optionContainer.button.isSelected{background:#00ac42;color:#fff}.optionContainer.button:disabled{cursor:not-allowed;opacity:.6}.optionContainer.buttonGray{position:relative;cursor:pointer;padding:10px 14px;margin:2px;color:#475467;background:#eaecf0;border-radius:8px}.optionContainer.buttonGray.isSelected{background:#fff;color:#101828}.optionContainer.buttonGray:disabled{cursor:not-allowed;opacity:.6}.nameAndDescription{text-align:left;line-height:1.1rem}.nameAndDescription .description{margin-top:.2rem;opacity:.6}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
3005
3112
  }
3006
3113
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: RadioComponent, decorators: [{
3007
3114
  type: Component,
3008
- args: [{ selector: 'klp-form-radio', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: RadioComponent, multi: true }], standalone: false, template: "<div class=\"componentContainer\" [ngClass]=\"{'verticallyOriented': orientation === Orientation.COLUMN, 'horizontallyOriented': orientation === Orientation.ROW, buttonGray: variant === 'buttonGray', sizeSmall: size === 'small'}\">\n @for (option of options; track option) {\n <button class=\"optionContainer\"\n [ngClass]=\"{classic: variant === 'classic', button: variant === 'button', buttonGray: variant === 'buttonGray', isSelected: innerValue === option.id}\"\n (click)=\"setInnerValueAndNotify(option.id)\"\n\t\t\t[disabled]=\"disabled\"\n >\n <div class=\"radioAndName\">\n @if (variant === 'classic') {\n <div class=\"radioBtnContainer\" [ngClass]=\"{selected: innerValue === option.id}\">\n @if (innerValue === option.id) {\n <div class=\"innerCircle\"></div>\n }\n </div>\n }\n <div class=\"nameAndDescription\">\n <div>{{option.name}}</div>\n @if (option.description) {\n <div class=\"description\">{{option.description}}</div>\n }\n </div>\n </div>\n </button>\n }\n</div>\n", styles: [":host{display:block}.componentContainer{position:relative;display:flex}.componentContainer.verticallyOriented{flex-direction:column}.componentContainer.verticallyOriented .optionContainer{margin-bottom:.3125rem}.componentContainer.verticallyOriented .optionContainer:last-child{margin-bottom:0}.componentContainer.horizontallyOriented{flex-direction:row}.componentContainer.horizontallyOriented .optionContainer:first-child{border-radius:6px 0 0 6px}.componentContainer.horizontallyOriented .optionContainer:last-child{border-radius:0 6px 6px 0}.componentContainer.horizontallyOriented.buttonGray .optionContainer:first-child{border-radius:8px}.componentContainer.horizontallyOriented.buttonGray .optionContainer:last-child{border-radius:8px}.componentContainer.buttonGray{background:#eaecf0;border-radius:8px;display:inline-block}.componentContainer.sizeSmall .optionContainer{padding:.4rem .8rem}.optionContainer{margin-right:.3125rem;background:transparent;border:none;align-items:center}.optionContainer.classic{cursor:pointer}.optionContainer.classic:focus,.optionContainer.classic:focus-visible{outline:none}.optionContainer.classic:focus .radioBtnContainer,.optionContainer.classic:focus-visible .radioBtnContainer{outline:2px solid #00AC42;outline-offset:2px}.optionContainer.classic:disabled .radioBtnContainer.selected{background-color:#eaecf0;border-color:#eaecf0}.optionContainer.classic .radioBtnContainer{flex:0 0 auto;position:relative;height:20px;width:20px;padding:4px;border-radius:50%;border:1px solid #D0D5DD;margin-right:.3125rem;display:flex;align-items:center;justify-content:center}.optionContainer.classic .radioBtnContainer.selected{background-color:#00ac42;border-color:#00ac42}.optionContainer.classic .radioBtnContainer .innerCircle{height:80%;width:80%;display:block;border-radius:100%;background-color:#fff}.optionContainer.classic .description{opacity:1;margin-top:.4rem;color:#475467}.optionContainer.classic .nameAndDescription{color:#101828;margin-top:2px}.optionContainer.button{position:relative;cursor:pointer;padding:10px 14px;margin-right:0;color:#00ac42;border:1px solid #00AC42;background-color:#fff}.optionContainer.button.isSelected{background:#00ac42;color:#fff}.optionContainer.buttonGray{position:relative;cursor:pointer;padding:10px 14px;margin:2px;color:#475467;background:#eaecf0;border-radius:8px}.optionContainer.buttonGray.isSelected{background:#fff;color:#101828}.radioAndName{display:flex;flex-direction:row;gap:.2rem}.nameAndDescription{text-align:left;line-height:1.1rem}.description{margin-top:.2rem;opacity:.6}\n"] }]
3115
+ args: [{ selector: 'klp-form-radio', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: RadioComponent, multi: true }], standalone: false, template: "<div class=\"componentContainer\" [style.--radio-size]=\"radioSize + 'px'\" [style.--caption-spacing]=\"captionSpacing + 'px'\" [ngClass]=\"{'verticallyOriented': orientation === Orientation.COLUMN, 'horizontallyOriented': orientation === Orientation.ROW, buttonGray: variant === 'buttonGray'}\">\n @for (option of options; track option) {\n @if (variant === 'classic') {\n <div class=\"optionWrapper\">\n <label>\n <div class=\"radioVisualContainer\">\n <input type=\"radio\"\n class=\"radioNative\"\n [checked]=\"innerValue === option.id\"\n (change)=\"setInnerValueAndNotify(option.id); touch()\"\n [disabled]=\"disabled\"\n />\n <div class=\"radioBtnContainer\" [ngClass]=\"{selected: innerValue === option.id}\">\n @if (innerValue === option.id) {\n <div class=\"innerCircle\"></div>\n }\n </div>\n </div>\n <div class=\"name\" [class]=\"sizeClass\" [ngClass]=\"{disabled: disabled}\">{{option.name}}</div>\n </label>\n @if (option.description) {\n <div class=\"description\" [class]=\"sizeClass\" [ngClass]=\"{disabled: disabled}\">{{option.description}}</div>\n }\n </div>\n } @else {\n <button class=\"optionContainer\"\n [ngClass]=\"{button: variant === 'button', buttonGray: variant === 'buttonGray', isSelected: innerValue === option.id}\"\n (click)=\"setInnerValueAndNotify(option.id)\"\n [disabled]=\"disabled\"\n >\n <div class=\"nameAndDescription\">\n <div>{{option.name}}</div>\n @if (option.description) {\n <div class=\"description\">{{option.description}}</div>\n }\n </div>\n </button>\n }\n }\n</div>\n", styles: [":host{display:block}.componentContainer{position:relative;display:flex}.componentContainer.verticallyOriented{flex-direction:column}.componentContainer.verticallyOriented .optionWrapper{margin-bottom:.3125rem}.componentContainer.verticallyOriented .optionWrapper:last-child{margin-bottom:0}.componentContainer.verticallyOriented .optionContainer{margin-bottom:.3125rem}.componentContainer.verticallyOriented .optionContainer:last-child{margin-bottom:0}.componentContainer.horizontallyOriented{flex-direction:row}.componentContainer.horizontallyOriented .optionContainer:first-child{border-radius:6px 0 0 6px}.componentContainer.horizontallyOriented .optionContainer:last-child{border-radius:0 6px 6px 0}.componentContainer.horizontallyOriented.buttonGray .optionContainer:first-child{border-radius:8px}.componentContainer.horizontallyOriented.buttonGray .optionContainer:last-child{border-radius:8px}.componentContainer.buttonGray{background:#eaecf0;border-radius:8px;display:inline-block}.optionWrapper{display:grid;grid-template-columns:auto 1fr;align-items:start;margin-bottom:0}.optionWrapper label{display:contents;align-items:center;justify-content:center;margin-bottom:0}.optionWrapper .radioVisualContainer{position:relative;grid-column:1;align-self:center}.optionWrapper .radioNative{position:absolute;opacity:0;top:0;left:0;width:var(--radio-size);height:var(--radio-size);cursor:pointer;margin:0}.optionWrapper .radioNative[disabled]{cursor:not-allowed}.optionWrapper .radioNative:focus+.radioBtnContainer{outline:2px solid #00AC42;outline-offset:2px}.optionWrapper .radioBtnContainer{pointer-events:none;flex:0 0 auto;position:relative;height:var(--radio-size);width:var(--radio-size);border-radius:50%;border:1px solid #D0D5DD;margin-right:var(--caption-spacing);display:flex;align-items:center;justify-content:center}.optionWrapper .radioBtnContainer.selected{background-color:#00ac42;border-color:#00ac42}.optionWrapper .radioBtnContainer .innerCircle{height:50%;width:50%;display:block;border-radius:100%;background-color:#fff}.optionWrapper .radioNative:disabled+.radioBtnContainer{background-color:#f2f4f7;border-color:#eaecf0}.optionWrapper .radioNative:disabled+.radioBtnContainer.selected{background-color:#eaecf0;border-color:#eaecf0}.optionWrapper .name{color:#101828;font-feature-settings:\"cv05\" on;font-size:16px;font-style:normal;font-weight:500;line-height:24px;letter-spacing:.16px}.optionWrapper .name.input-sm{font-size:14px;line-height:20px;letter-spacing:.14px}.optionWrapper .name.disabled{color:#98a2b3}.optionWrapper .name{font-weight:400;cursor:pointer;grid-column:2}.optionWrapper .name.disabled{cursor:not-allowed}.optionWrapper .description{color:#101828;font-feature-settings:\"cv05\" on;font-size:16px;font-style:normal;font-weight:500;line-height:24px;letter-spacing:.16px}.optionWrapper .description.input-sm{font-size:14px;line-height:20px;letter-spacing:.14px}.optionWrapper .description.disabled{color:#98a2b3}.optionWrapper .description{font-weight:400;color:#667085;grid-column:2;opacity:1}.optionContainer{margin-right:.3125rem;background:transparent;border:none;align-items:center}.optionContainer.button{position:relative;cursor:pointer;padding:10px 14px;margin-right:0;color:#00ac42;border:1px solid #00AC42;background-color:#fff}.optionContainer.button.isSelected{background:#00ac42;color:#fff}.optionContainer.button:disabled{cursor:not-allowed;opacity:.6}.optionContainer.buttonGray{position:relative;cursor:pointer;padding:10px 14px;margin:2px;color:#475467;background:#eaecf0;border-radius:8px}.optionContainer.buttonGray.isSelected{background:#fff;color:#101828}.optionContainer.buttonGray:disabled{cursor:not-allowed;opacity:.6}.nameAndDescription{text-align:left;line-height:1.1rem}.nameAndDescription .description{margin-top:.2rem;opacity:.6}\n"] }]
3009
3116
  }], propDecorators: { options: [{
3010
3117
  type: Input
3011
3118
  }], orientation: [{
3012
3119
  type: Input
3013
3120
  }], variant: [{
3014
3121
  type: Input
3015
- }], size: [{
3016
- type: Input
3017
3122
  }] } });
3018
3123
 
3019
3124
  const triangleSize = '12px';
@@ -3212,11 +3317,11 @@ class TextAreaComponent extends ValueAccessorBase {
3212
3317
  this.onBlur = new EventEmitter();
3213
3318
  }
3214
3319
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TextAreaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
3215
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: TextAreaComponent, isStandalone: false, selector: "klp-form-text-area", inputs: { placeholder: "placeholder" }, outputs: { onBlur: "onBlur" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: TextAreaComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"componentContainer\">\n\t<textarea\n\t\t[(ngModel)]=\"innerValue\"\n\t\t[ngClass]=\"{showErrors: isInErrorState()}\"\n\t\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t\t[placeholder]=\"placeholder ? placeholder : ''\"\n\t\t(blur)=\"touch(); onBlur.emit()\"\n\t\t[disabled]='disabled'\n\t\t#nativeInputRef\n\t></textarea>\n</div>\n", styles: [":host{display:block}:host input:disabled{cursor:not-allowed}.componentContainer{position:relative;height:100%}textarea{outline:none}textarea::-webkit-input-placeholder{color:#98a2b3}textarea:-moz-placeholder{color:#98a2b3}textarea::-moz-placeholder{color:#98a2b3}textarea:-ms-input-placeholder{color:#98a2b3}textarea{display:block;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:none;height:40px;width:100%;padding:.5rem .75rem;font-size:16px;font-weight:400;line-height:24px;color:#101828}textarea:focus,textarea:focus-within{outline:1px solid #00AC42;box-shadow:none;border-color:#00ac42}textarea.input-sm{padding:.375rem .5rem;font-size:14px;line-height:20px;height:32px}textarea.input-sm.grow{min-height:32px}textarea.input-lg{padding:.625rem .75rem;height:44px}textarea.input-lg.grow{min-height:44px}textarea.grow{height:auto;min-height:40px}textarea:hover{border-color:#98a2b3}textarea.error{border-color:#dc3545;background-color:#f6cdd1}textarea.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}textarea:placeholder-shown{text-overflow:ellipsis}textarea.disabled{background-color:#f2f4f7;border-color:#f2f4f7;cursor:not-allowed}textarea{height:100%;resize:none}.showErrors{border-color:#ff8000}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
3320
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: TextAreaComponent, isStandalone: false, selector: "klp-form-text-area", inputs: { placeholder: "placeholder" }, outputs: { onBlur: "onBlur" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: TextAreaComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"componentContainer\" [ngClass]=\"{showErrors: isInErrorState()}\">\n\t<textarea\n\t\t[(ngModel)]=\"innerValue\"\n\t\t[ngClass]=\"{showErrors: isInErrorState()}\"\n\t\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t\t[placeholder]=\"placeholder ? placeholder : ''\"\n\t\t(blur)=\"touch(); onBlur.emit()\"\n\t\t[disabled]='disabled'\n\t\t#nativeInputRef\n\t></textarea>\n</div>\n", styles: [":host{display:block}:host input:disabled{cursor:not-allowed}.componentContainer{position:relative;height:100%}textarea{outline:none}textarea::-webkit-input-placeholder{color:#98a2b3}textarea:-moz-placeholder{color:#98a2b3}textarea::-moz-placeholder{color:#98a2b3}textarea:-ms-input-placeholder{color:#98a2b3}textarea{display:block;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:none;height:40px;width:100%;padding:.5rem .75rem;font-size:16px;font-weight:400;line-height:24px;color:#101828}textarea:hover{border:1px solid #98A2B3}textarea.showErrors{border:1px solid #ff8000;outline:.5px solid #ff8000}textarea:focus,textarea:focus-within{border:1px solid #00AC42;outline:1px solid #00AC42}textarea.disabled{border:1px solid #F2F4F7;background-color:#f2f4f7;cursor:not-allowed}textarea.input-sm{padding:.375rem .5rem;font-size:14px;line-height:20px;height:32px}textarea.input-sm.grow{min-height:32px}textarea.input-lg{padding:.625rem .75rem;height:44px}textarea.input-lg.grow{min-height:44px}textarea.grow{height:auto;min-height:40px}textarea:placeholder-shown{text-overflow:ellipsis}textarea{height:100%;resize:none}.showErrors{border-color:#ff8000}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
3216
3321
  }
3217
3322
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TextAreaComponent, decorators: [{
3218
3323
  type: Component,
3219
- args: [{ selector: 'klp-form-text-area', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: TextAreaComponent, multi: true }], standalone: false, template: "<div class=\"componentContainer\">\n\t<textarea\n\t\t[(ngModel)]=\"innerValue\"\n\t\t[ngClass]=\"{showErrors: isInErrorState()}\"\n\t\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t\t[placeholder]=\"placeholder ? placeholder : ''\"\n\t\t(blur)=\"touch(); onBlur.emit()\"\n\t\t[disabled]='disabled'\n\t\t#nativeInputRef\n\t></textarea>\n</div>\n", styles: [":host{display:block}:host input:disabled{cursor:not-allowed}.componentContainer{position:relative;height:100%}textarea{outline:none}textarea::-webkit-input-placeholder{color:#98a2b3}textarea:-moz-placeholder{color:#98a2b3}textarea::-moz-placeholder{color:#98a2b3}textarea:-ms-input-placeholder{color:#98a2b3}textarea{display:block;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:none;height:40px;width:100%;padding:.5rem .75rem;font-size:16px;font-weight:400;line-height:24px;color:#101828}textarea:focus,textarea:focus-within{outline:1px solid #00AC42;box-shadow:none;border-color:#00ac42}textarea.input-sm{padding:.375rem .5rem;font-size:14px;line-height:20px;height:32px}textarea.input-sm.grow{min-height:32px}textarea.input-lg{padding:.625rem .75rem;height:44px}textarea.input-lg.grow{min-height:44px}textarea.grow{height:auto;min-height:40px}textarea:hover{border-color:#98a2b3}textarea.error{border-color:#dc3545;background-color:#f6cdd1}textarea.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}textarea:placeholder-shown{text-overflow:ellipsis}textarea.disabled{background-color:#f2f4f7;border-color:#f2f4f7;cursor:not-allowed}textarea{height:100%;resize:none}.showErrors{border-color:#ff8000}\n"] }]
3324
+ args: [{ selector: 'klp-form-text-area', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: TextAreaComponent, multi: true }], standalone: false, template: "<div class=\"componentContainer\" [ngClass]=\"{showErrors: isInErrorState()}\">\n\t<textarea\n\t\t[(ngModel)]=\"innerValue\"\n\t\t[ngClass]=\"{showErrors: isInErrorState()}\"\n\t\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t\t[placeholder]=\"placeholder ? placeholder : ''\"\n\t\t(blur)=\"touch(); onBlur.emit()\"\n\t\t[disabled]='disabled'\n\t\t#nativeInputRef\n\t></textarea>\n</div>\n", styles: [":host{display:block}:host input:disabled{cursor:not-allowed}.componentContainer{position:relative;height:100%}textarea{outline:none}textarea::-webkit-input-placeholder{color:#98a2b3}textarea:-moz-placeholder{color:#98a2b3}textarea::-moz-placeholder{color:#98a2b3}textarea:-ms-input-placeholder{color:#98a2b3}textarea{display:block;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:none;height:40px;width:100%;padding:.5rem .75rem;font-size:16px;font-weight:400;line-height:24px;color:#101828}textarea:hover{border:1px solid #98A2B3}textarea.showErrors{border:1px solid #ff8000;outline:.5px solid #ff8000}textarea:focus,textarea:focus-within{border:1px solid #00AC42;outline:1px solid #00AC42}textarea.disabled{border:1px solid #F2F4F7;background-color:#f2f4f7;cursor:not-allowed}textarea.input-sm{padding:.375rem .5rem;font-size:14px;line-height:20px;height:32px}textarea.input-sm.grow{min-height:32px}textarea.input-lg{padding:.625rem .75rem;height:44px}textarea.input-lg.grow{min-height:44px}textarea.grow{height:auto;min-height:40px}textarea:placeholder-shown{text-overflow:ellipsis}textarea{height:100%;resize:none}.showErrors{border-color:#ff8000}\n"] }]
3220
3325
  }], propDecorators: { placeholder: [{
3221
3326
  type: Input
3222
3327
  }], onBlur: [{
@@ -3254,6 +3359,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
3254
3359
  args: ['contentRef']
3255
3360
  }] } });
3256
3361
 
3362
+ class FormSubCaptionComponent {
3363
+ constructor() {
3364
+ this.parent = inject(FormElementComponent, { optional: true });
3365
+ }
3366
+ ngAfterViewInit() {
3367
+ setTimeout(() => {
3368
+ // Avoid changing state in the first CD cycle
3369
+ this.parent.registerSubCaption(this.contentRef);
3370
+ });
3371
+ }
3372
+ ngOnDestroy() {
3373
+ this.parent.registerSubCaption(null);
3374
+ }
3375
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: FormSubCaptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
3376
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: FormSubCaptionComponent, isStandalone: false, selector: "klp-form-sub-caption", viewQueries: [{ propertyName: "contentRef", first: true, predicate: ["contentRef"], descendants: true }], ngImport: i0, template: "<ng-template #contentRef>\n\t<ng-content></ng-content>\n</ng-template>\n", styles: [":host{display:block}\n"] }); }
3377
+ }
3378
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: FormSubCaptionComponent, decorators: [{
3379
+ type: Component,
3380
+ args: [{ selector: 'klp-form-sub-caption', standalone: false, template: "<ng-template #contentRef>\n\t<ng-content></ng-content>\n</ng-template>\n", styles: [":host{display:block}\n"] }]
3381
+ }], propDecorators: { contentRef: [{
3382
+ type: ViewChild,
3383
+ args: ['contentRef']
3384
+ }] } });
3385
+
3386
+ class FormTextSubCaptionComponent {
3387
+ constructor() {
3388
+ this.parent = inject(FormElementComponent, { optional: true });
3389
+ }
3390
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: FormTextSubCaptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
3391
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: FormTextSubCaptionComponent, isStandalone: false, selector: "klp-form-text-sub-caption", inputs: { text: "text" }, ngImport: i0, template: "<klp-form-sub-caption>\n\t<span class=\"text\" [ngClass]=\"parent.sizeClass\">{{text}}</span>\n</klp-form-sub-caption>\n", styles: [".text{color:#101828;font-feature-settings:\"cv05\" on;font-size:16px;font-style:normal;font-weight:500;line-height:24px;letter-spacing:.16px}.text.input-sm{font-size:14px;line-height:20px;letter-spacing:.14px}.text.disabled{color:#98a2b3}.text{color:#475467;font-weight:400}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: FormSubCaptionComponent, selector: "klp-form-sub-caption" }] }); }
3392
+ }
3393
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: FormTextSubCaptionComponent, decorators: [{
3394
+ type: Component,
3395
+ args: [{ selector: 'klp-form-text-sub-caption', standalone: false, template: "<klp-form-sub-caption>\n\t<span class=\"text\" [ngClass]=\"parent.sizeClass\">{{text}}</span>\n</klp-form-sub-caption>\n", styles: [".text{color:#101828;font-feature-settings:\"cv05\" on;font-size:16px;font-style:normal;font-weight:500;line-height:24px;letter-spacing:.16px}.text.input-sm{font-size:14px;line-height:20px;letter-spacing:.14px}.text.disabled{color:#98a2b3}.text{color:#475467;font-weight:400}\n"] }]
3396
+ }], propDecorators: { text: [{
3397
+ type: Input,
3398
+ args: [{ required: true }]
3399
+ }] } });
3400
+
3257
3401
  class NgxEnhancyFormsModule {
3258
3402
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: NgxEnhancyFormsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
3259
3403
  static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.14", ngImport: i0, type: NgxEnhancyFormsModule, declarations: [ValueAccessorBase,
@@ -3277,6 +3421,8 @@ class NgxEnhancyFormsModule {
3277
3421
  FileInputComponent,
3278
3422
  FormCaptionComponent,
3279
3423
  FormCaptionEndComponent,
3424
+ FormSubCaptionComponent,
3425
+ FormTextSubCaptionComponent,
3280
3426
  FormElementComponent,
3281
3427
  FormErrorComponent,
3282
3428
  FormSubmitButtonComponent,
@@ -3311,6 +3457,8 @@ class NgxEnhancyFormsModule {
3311
3457
  FileInputComponent,
3312
3458
  FormCaptionComponent,
3313
3459
  FormCaptionEndComponent,
3460
+ FormSubCaptionComponent,
3461
+ FormTextSubCaptionComponent,
3314
3462
  FormElementComponent,
3315
3463
  FormErrorComponent,
3316
3464
  FormSubmitButtonComponent,
@@ -3357,6 +3505,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
3357
3505
  FileInputComponent,
3358
3506
  FormCaptionComponent,
3359
3507
  FormCaptionEndComponent,
3508
+ FormSubCaptionComponent,
3509
+ FormTextSubCaptionComponent,
3360
3510
  FormElementComponent,
3361
3511
  FormErrorComponent,
3362
3512
  FormSubmitButtonComponent,
@@ -3391,6 +3541,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
3391
3541
  FileInputComponent,
3392
3542
  FormCaptionComponent,
3393
3543
  FormCaptionEndComponent,
3544
+ FormSubCaptionComponent,
3545
+ FormTextSubCaptionComponent,
3394
3546
  FormElementComponent,
3395
3547
  FormErrorComponent,
3396
3548
  FormSubmitButtonComponent,
@@ -3413,5 +3565,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
3413
3565
  * Generated bundle index. Do not edit.
3414
3566
  */
3415
3567
 
3416
- 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 };
3568
+ 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 };
3417
3569
  //# sourceMappingURL=klippa-ngx-enhancy-forms.mjs.map