@klippa/ngx-enhancy-forms 18.25.6 → 18.25.8

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 (8) hide show
  1. package/esm2022/lib/elements/date-picker/date-picker.component.mjs +1 -1
  2. package/esm2022/lib/elements/date-time-picker/date-time-picker.component.mjs +12 -4
  3. package/esm2022/lib/form/form-element/form-element.component.mjs +6 -3
  4. package/fesm2022/klippa-ngx-enhancy-forms.mjs +17 -6
  5. package/fesm2022/klippa-ngx-enhancy-forms.mjs.map +1 -1
  6. package/lib/elements/date-time-picker/date-time-picker.component.d.ts +3 -1
  7. package/lib/form/form-element/form-element.component.d.ts +2 -1
  8. package/package.json +1 -1
package/fesm2022/klippa-ngx-enhancy-forms.mjs CHANGED
@@ -585,6 +585,7 @@ class FormElementComponent {
585
585
  this.spaceDistribution = '40-60';
586
586
  this.swapInputAndCaption = false;
587
587
  this.errorMessageAsTooltip = false;
588
+ this.errorMessageHasMaxWidth = true;
588
589
  this.errorMessages = DEFAULT_ERROR_MESSAGES;
589
590
  this.customErrorHandlers = [];
590
591
  this.popupState = 'onHover';
@@ -809,11 +810,11 @@ class FormElementComponent {
809
810
  }
810
811
  }
811
812
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", 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 }); }
812
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: FormElementComponent, selector: "klp-form-element", inputs: { caption: "caption", direction: "direction", captionSpacing: "captionSpacing", verticalAlignment: "verticalAlignment", spaceDistribution: "spaceDistribution", swapInputAndCaption: "swapInputAndCaption", errorMessageAsTooltip: "errorMessageAsTooltip" }, 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\tclass=\"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}\"\n>\n\t<div class=\"errorAboveInputContainer\" *ngIf=\"direction === 'horizontal' && !errorMessageAsTooltip\">\n\t\t<div class=\"spacer\"></div>\n\t\t<ng-container [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t</div>\n\n\t<div class=\"captionInputAndError\" #internalComponentRef>\n\t\t<div class=\"captionDummyForSpaceCalculation\" #captionDummyForSpaceCalculation *ngIf=\"hasRightOfCaptionError()\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"captionTpl\" [ngTemplateOutletContext]=\"{forCalculation: true}\"></ng-container>\n\t\t</div>\n\t\t<ng-container [ngTemplateOutlet]=\"captionTpl\"></ng-container>\n\t\t<ng-container *ngIf=\"direction === 'vertical' && getErrorLocation() === 'belowCaption' && !errorMessageAsTooltip\" [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t\t<div class=\"inputContainer\" #inputContainer>\n\t\t\t<ng-container *ngIf=\"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</ng-container>\n\t\t\t<ng-content></ng-content>\n\t\t</div>\n\t</div>\n</div>\n\n<ng-template #captionTpl let-forCalculation=\"forCalculation\">\n\t<div class=\"caption\"\n\t\t*ngIf=\"caption || captionRef\"\n\t\t[ngClass]=\"{\n\t\t\twithErrorRightOfCaption: getErrorLocation() === 'rightOfCaption'\n\t\t}\"\n\t>\n\t\t<div *ngIf=\"captionRef\" class=\"captionRefContainer\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"captionRef\"></ng-container>\n\t\t\t<div *ngIf=\"isRequired()\">&nbsp;*</div>\n\t\t</div>\n\t\t<div *ngIf=\"!captionRef\" class=\"captionText\">{{caption}}<span *ngIf=\"isRequired()\">&nbsp;*</span></div>\n\t\t<div class=\"rightOfCaptionError\" *ngIf=\"hasRightOfCaptionError()\" [ngClass]=\"{errorFullyVisible: errorFullyVisible}\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"errorRef\" [ngTemplateOutletContext]=\"{forCalculation: forCalculation}\"></ng-container>\n\t\t</div>\n\t</div>\n</ng-template>\n\n<ng-template #errorRef let-forCalculation=\"forCalculation\">\n\t<div *ngIf=\"shouldShowErrorMessages() && getErrorToShow()\" class=\"errorContainer\" [elementIsTruncatedCb]=\"forCalculation ? setErrorMessageIsTruncated : null\" [ngClass]=\"{horizontal: direction === 'horizontal', hasCaption: caption || captionRef, 'd30-70': spaceDistribution === '30-70', 'd34-66': spaceDistribution === '34-66'}\">\n\t\t<div *ngIf=\"showDefaultError('min')\">{{substituteParameters(getErrorMessage(\"min\"), {min: attachedControl.errors.min.min})}}</div>\n\t\t<div *ngIf=\"showDefaultError('max')\">{{substituteParameters(getErrorMessage(\"max\"), {max: attachedControl.errors.max.max})}}</div>\n\t\t<div *ngIf=\"showDefaultError('required')\">{{getErrorMessage(\"required\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('email')\">{{getErrorMessage(\"email\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('minlength')\">{{substituteParameters(getErrorMessage(\"minLength\"), {minLength: attachedControl.errors.minlength.requiredLength})}}</div>\n\t\t<div *ngIf=\"showDefaultError('maxlength')\">{{substituteParameters(getErrorMessage(\"maxLength\"), {maxLength: attachedControl.errors.maxlength.requiredLength})}}</div>\n\t\t<div *ngIf=\"showDefaultError('pattern')\">{{getErrorMessage(\"pattern\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('MatchPassword')\">{{getErrorMessage(\"matchPassword\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('date')\">{{getErrorMessage(\"date\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('message')\">{{attachedControl.errors.message.value}}</div>\n\t\t<div *ngIf=\"showDefaultError('formLevel')\">{{getErrorMessage(\"formLevel\")}}</div>\n\t\t<div [ngTemplateOutlet]=\"getCustomErrorHandler(getErrorToShow())?.templateRef\"></div>\n\t</div>\n</ng-template>\n\n<ng-template #tailTpl>\n\t<div class=\"errorTooltipContainer\" [ngClass]=\"{alwaysOpen: shouldShowErrorTooltipOpened()}\">\n\t\t<ng-container *ngIf=\"hasHoverableErrorTooltip() || shouldShowErrorTooltipOpened()\">\n\t\t\t<div class=\"errorTooltipTriangle\"></div>\n\t\t\t<div class=\"errorTooltipTriangleWhite\"></div>\n\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<ng-container *ngIf=\"getErrorToShow()\" [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t\t\t\t\t\t<div *ngIf=\"!getErrorToShow() && shouldShowWarningPopup()\">\n\t\t\t\t\t\t\t<ng-container *ngIf=\"getWarningToShowIsTemplateRef()\" [ngTemplateOutlet]=\"getWarningToShowAsTemplateRef()\"></ng-container>\n\t\t\t\t\t\t\t<span *ngIf=\"!getWarningToShowIsTemplateRef()\">{{getWarningToShow()}}</span>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t</ng-container>\n\t\t<klp-form-warning-icon variant=\"fill\" *ngIf=\"getErrorToShow()\" (click)=\"togglePopup()\"></klp-form-warning-icon>\n\t\t<klp-form-warning-icon variant=\"line\" *ngIf=\"!getErrorToShow() && getWarningToShow()\" (click)=\"togglePopup()\"></klp-form-warning-icon>\n\t</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{flex:0 0 auto}.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{display:flex}.caption{font-weight:700;flex:0 0 auto;color:#515365}.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;max-width:40%;font-weight:400;overflow:hidden;flex:1 0 auto;text-align:right}.caption.withErrorRightOfCaption .rightOfCaptionError.errorFullyVisible{display:block}.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;position:absolute;top:-.6rem;right:-1.875rem;transform:translateY(-100%);width:20rem}.inputContainer .errorTooltip.noPointerEvents{pointer-events:none}.inputContainer .errorTooltip .closeBtn{display:none;position:absolute;top:.2rem;right:.2rem;padding:.2rem .4rem;cursor:pointer;color:#666;font-size:1rem}.inputContainer .errorTooltip .closeBtn:hover{color:#515365}.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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }] }); }
813
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: FormElementComponent, 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\tclass=\"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}\"\n>\n\t<div class=\"errorAboveInputContainer\" *ngIf=\"direction === 'horizontal' && !errorMessageAsTooltip\">\n\t\t<div class=\"spacer\"></div>\n\t\t<ng-container [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t</div>\n\n\t<div class=\"captionInputAndError\" #internalComponentRef>\n\t\t<div class=\"captionDummyForSpaceCalculation\" #captionDummyForSpaceCalculation *ngIf=\"hasRightOfCaptionError()\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"captionTpl\" [ngTemplateOutletContext]=\"{forCalculation: true}\"></ng-container>\n\t\t</div>\n\t\t<ng-container [ngTemplateOutlet]=\"captionTpl\"></ng-container>\n\t\t<ng-container *ngIf=\"direction === 'vertical' && getErrorLocation() === 'belowCaption' && !errorMessageAsTooltip\" [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t\t<div class=\"inputContainer\" #inputContainer>\n\t\t\t<ng-container *ngIf=\"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</ng-container>\n\t\t\t<ng-content></ng-content>\n\t\t</div>\n\t</div>\n</div>\n\n<ng-template #captionTpl let-forCalculation=\"forCalculation\">\n\t<div class=\"caption\"\n\t\t*ngIf=\"caption || captionRef\"\n\t\t[ngClass]=\"{\n\t\t\twithErrorRightOfCaption: getErrorLocation() === 'rightOfCaption'\n\t\t}\"\n\t>\n\t\t<div *ngIf=\"captionRef\" class=\"captionRefContainer\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"captionRef\"></ng-container>\n\t\t\t<div *ngIf=\"isRequired()\">&nbsp;*</div>\n\t\t</div>\n\t\t<div *ngIf=\"!captionRef\" class=\"captionText\">{{caption}}<span *ngIf=\"isRequired()\">&nbsp;*</span></div>\n\t\t<div class=\"rightOfCaptionError\" *ngIf=\"hasRightOfCaptionError()\" [ngClass]=\"{errorFullyVisible: errorFullyVisible, errorMessageHasMaxWidth: errorMessageHasMaxWidth}\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"errorRef\" [ngTemplateOutletContext]=\"{forCalculation: forCalculation}\"></ng-container>\n\t\t</div>\n\t</div>\n</ng-template>\n\n<ng-template #errorRef let-forCalculation=\"forCalculation\">\n\t<div *ngIf=\"shouldShowErrorMessages() && getErrorToShow()\" class=\"errorContainer\" [elementIsTruncatedCb]=\"forCalculation ? setErrorMessageIsTruncated : null\" [ngClass]=\"{horizontal: direction === 'horizontal', hasCaption: caption || captionRef, 'd30-70': spaceDistribution === '30-70', 'd34-66': spaceDistribution === '34-66'}\">\n\t\t<div *ngIf=\"showDefaultError('min')\">{{substituteParameters(getErrorMessage(\"min\"), {min: attachedControl.errors.min.min})}}</div>\n\t\t<div *ngIf=\"showDefaultError('max')\">{{substituteParameters(getErrorMessage(\"max\"), {max: attachedControl.errors.max.max})}}</div>\n\t\t<div *ngIf=\"showDefaultError('required')\">{{getErrorMessage(\"required\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('email')\">{{getErrorMessage(\"email\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('minlength')\">{{substituteParameters(getErrorMessage(\"minLength\"), {minLength: attachedControl.errors.minlength.requiredLength})}}</div>\n\t\t<div *ngIf=\"showDefaultError('maxlength')\">{{substituteParameters(getErrorMessage(\"maxLength\"), {maxLength: attachedControl.errors.maxlength.requiredLength})}}</div>\n\t\t<div *ngIf=\"showDefaultError('pattern')\">{{getErrorMessage(\"pattern\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('MatchPassword')\">{{getErrorMessage(\"matchPassword\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('date')\">{{getErrorMessage(\"date\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('message')\">{{attachedControl.errors.message.value}}</div>\n\t\t<div *ngIf=\"showDefaultError('formLevel')\">{{getErrorMessage(\"formLevel\")}}</div>\n\t\t<div [ngTemplateOutlet]=\"getCustomErrorHandler(getErrorToShow())?.templateRef\"></div>\n\t</div>\n</ng-template>\n\n<ng-template #tailTpl>\n\t<div class=\"errorTooltipContainer\" [ngClass]=\"{alwaysOpen: shouldShowErrorTooltipOpened()}\">\n\t\t<ng-container *ngIf=\"hasHoverableErrorTooltip() || shouldShowErrorTooltipOpened()\">\n\t\t\t<div class=\"errorTooltipTriangle\"></div>\n\t\t\t<div class=\"errorTooltipTriangleWhite\"></div>\n\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<ng-container *ngIf=\"getErrorToShow()\" [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t\t\t\t\t\t<div *ngIf=\"!getErrorToShow() && shouldShowWarningPopup()\">\n\t\t\t\t\t\t\t<ng-container *ngIf=\"getWarningToShowIsTemplateRef()\" [ngTemplateOutlet]=\"getWarningToShowAsTemplateRef()\"></ng-container>\n\t\t\t\t\t\t\t<span *ngIf=\"!getWarningToShowIsTemplateRef()\">{{getWarningToShow()}}</span>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t</ng-container>\n\t\t<klp-form-warning-icon variant=\"fill\" *ngIf=\"getErrorToShow()\" (click)=\"togglePopup()\"></klp-form-warning-icon>\n\t\t<klp-form-warning-icon variant=\"line\" *ngIf=\"!getErrorToShow() && getWarningToShow()\" (click)=\"togglePopup()\"></klp-form-warning-icon>\n\t</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{flex:0 0 auto}.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{display:flex}.caption{font-weight:700;flex:0 0 auto;color:#515365}.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;font-weight:400;overflow:hidden;flex:1 0 auto;text-align:right}.caption.withErrorRightOfCaption .rightOfCaptionError.errorFullyVisible{display:block}.caption.withErrorRightOfCaption .rightOfCaptionError.errorMessageHasMaxWidth{max-width:40%}.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;position:absolute;top:-.6rem;right:-1.875rem;transform:translateY(-100%);width:20rem}.inputContainer .errorTooltip.noPointerEvents{pointer-events:none}.inputContainer .errorTooltip .closeBtn{display:none;position:absolute;top:.2rem;right:.2rem;padding:.2rem .4rem;cursor:pointer;color:#666;font-size:1rem}.inputContainer .errorTooltip .closeBtn:hover{color:#515365}.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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }] }); }
813
814
  }
814
815
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FormElementComponent, decorators: [{
815
816
  type: Component,
816
- args: [{ selector: 'klp-form-element', template: "<div\n\tclass=\"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}\"\n>\n\t<div class=\"errorAboveInputContainer\" *ngIf=\"direction === 'horizontal' && !errorMessageAsTooltip\">\n\t\t<div class=\"spacer\"></div>\n\t\t<ng-container [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t</div>\n\n\t<div class=\"captionInputAndError\" #internalComponentRef>\n\t\t<div class=\"captionDummyForSpaceCalculation\" #captionDummyForSpaceCalculation *ngIf=\"hasRightOfCaptionError()\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"captionTpl\" [ngTemplateOutletContext]=\"{forCalculation: true}\"></ng-container>\n\t\t</div>\n\t\t<ng-container [ngTemplateOutlet]=\"captionTpl\"></ng-container>\n\t\t<ng-container *ngIf=\"direction === 'vertical' && getErrorLocation() === 'belowCaption' && !errorMessageAsTooltip\" [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t\t<div class=\"inputContainer\" #inputContainer>\n\t\t\t<ng-container *ngIf=\"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</ng-container>\n\t\t\t<ng-content></ng-content>\n\t\t</div>\n\t</div>\n</div>\n\n<ng-template #captionTpl let-forCalculation=\"forCalculation\">\n\t<div class=\"caption\"\n\t\t*ngIf=\"caption || captionRef\"\n\t\t[ngClass]=\"{\n\t\t\twithErrorRightOfCaption: getErrorLocation() === 'rightOfCaption'\n\t\t}\"\n\t>\n\t\t<div *ngIf=\"captionRef\" class=\"captionRefContainer\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"captionRef\"></ng-container>\n\t\t\t<div *ngIf=\"isRequired()\">&nbsp;*</div>\n\t\t</div>\n\t\t<div *ngIf=\"!captionRef\" class=\"captionText\">{{caption}}<span *ngIf=\"isRequired()\">&nbsp;*</span></div>\n\t\t<div class=\"rightOfCaptionError\" *ngIf=\"hasRightOfCaptionError()\" [ngClass]=\"{errorFullyVisible: errorFullyVisible}\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"errorRef\" [ngTemplateOutletContext]=\"{forCalculation: forCalculation}\"></ng-container>\n\t\t</div>\n\t</div>\n</ng-template>\n\n<ng-template #errorRef let-forCalculation=\"forCalculation\">\n\t<div *ngIf=\"shouldShowErrorMessages() && getErrorToShow()\" class=\"errorContainer\" [elementIsTruncatedCb]=\"forCalculation ? setErrorMessageIsTruncated : null\" [ngClass]=\"{horizontal: direction === 'horizontal', hasCaption: caption || captionRef, 'd30-70': spaceDistribution === '30-70', 'd34-66': spaceDistribution === '34-66'}\">\n\t\t<div *ngIf=\"showDefaultError('min')\">{{substituteParameters(getErrorMessage(\"min\"), {min: attachedControl.errors.min.min})}}</div>\n\t\t<div *ngIf=\"showDefaultError('max')\">{{substituteParameters(getErrorMessage(\"max\"), {max: attachedControl.errors.max.max})}}</div>\n\t\t<div *ngIf=\"showDefaultError('required')\">{{getErrorMessage(\"required\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('email')\">{{getErrorMessage(\"email\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('minlength')\">{{substituteParameters(getErrorMessage(\"minLength\"), {minLength: attachedControl.errors.minlength.requiredLength})}}</div>\n\t\t<div *ngIf=\"showDefaultError('maxlength')\">{{substituteParameters(getErrorMessage(\"maxLength\"), {maxLength: attachedControl.errors.maxlength.requiredLength})}}</div>\n\t\t<div *ngIf=\"showDefaultError('pattern')\">{{getErrorMessage(\"pattern\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('MatchPassword')\">{{getErrorMessage(\"matchPassword\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('date')\">{{getErrorMessage(\"date\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('message')\">{{attachedControl.errors.message.value}}</div>\n\t\t<div *ngIf=\"showDefaultError('formLevel')\">{{getErrorMessage(\"formLevel\")}}</div>\n\t\t<div [ngTemplateOutlet]=\"getCustomErrorHandler(getErrorToShow())?.templateRef\"></div>\n\t</div>\n</ng-template>\n\n<ng-template #tailTpl>\n\t<div class=\"errorTooltipContainer\" [ngClass]=\"{alwaysOpen: shouldShowErrorTooltipOpened()}\">\n\t\t<ng-container *ngIf=\"hasHoverableErrorTooltip() || shouldShowErrorTooltipOpened()\">\n\t\t\t<div class=\"errorTooltipTriangle\"></div>\n\t\t\t<div class=\"errorTooltipTriangleWhite\"></div>\n\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<ng-container *ngIf=\"getErrorToShow()\" [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t\t\t\t\t\t<div *ngIf=\"!getErrorToShow() && shouldShowWarningPopup()\">\n\t\t\t\t\t\t\t<ng-container *ngIf=\"getWarningToShowIsTemplateRef()\" [ngTemplateOutlet]=\"getWarningToShowAsTemplateRef()\"></ng-container>\n\t\t\t\t\t\t\t<span *ngIf=\"!getWarningToShowIsTemplateRef()\">{{getWarningToShow()}}</span>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t</ng-container>\n\t\t<klp-form-warning-icon variant=\"fill\" *ngIf=\"getErrorToShow()\" (click)=\"togglePopup()\"></klp-form-warning-icon>\n\t\t<klp-form-warning-icon variant=\"line\" *ngIf=\"!getErrorToShow() && getWarningToShow()\" (click)=\"togglePopup()\"></klp-form-warning-icon>\n\t</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{flex:0 0 auto}.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{display:flex}.caption{font-weight:700;flex:0 0 auto;color:#515365}.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;max-width:40%;font-weight:400;overflow:hidden;flex:1 0 auto;text-align:right}.caption.withErrorRightOfCaption .rightOfCaptionError.errorFullyVisible{display:block}.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;position:absolute;top:-.6rem;right:-1.875rem;transform:translateY(-100%);width:20rem}.inputContainer .errorTooltip.noPointerEvents{pointer-events:none}.inputContainer .errorTooltip .closeBtn{display:none;position:absolute;top:.2rem;right:.2rem;padding:.2rem .4rem;cursor:pointer;color:#666;font-size:1rem}.inputContainer .errorTooltip .closeBtn:hover{color:#515365}.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"] }]
817
+ args: [{ selector: 'klp-form-element', template: "<div\n\tclass=\"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}\"\n>\n\t<div class=\"errorAboveInputContainer\" *ngIf=\"direction === 'horizontal' && !errorMessageAsTooltip\">\n\t\t<div class=\"spacer\"></div>\n\t\t<ng-container [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t</div>\n\n\t<div class=\"captionInputAndError\" #internalComponentRef>\n\t\t<div class=\"captionDummyForSpaceCalculation\" #captionDummyForSpaceCalculation *ngIf=\"hasRightOfCaptionError()\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"captionTpl\" [ngTemplateOutletContext]=\"{forCalculation: true}\"></ng-container>\n\t\t</div>\n\t\t<ng-container [ngTemplateOutlet]=\"captionTpl\"></ng-container>\n\t\t<ng-container *ngIf=\"direction === 'vertical' && getErrorLocation() === 'belowCaption' && !errorMessageAsTooltip\" [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t\t<div class=\"inputContainer\" #inputContainer>\n\t\t\t<ng-container *ngIf=\"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</ng-container>\n\t\t\t<ng-content></ng-content>\n\t\t</div>\n\t</div>\n</div>\n\n<ng-template #captionTpl let-forCalculation=\"forCalculation\">\n\t<div class=\"caption\"\n\t\t*ngIf=\"caption || captionRef\"\n\t\t[ngClass]=\"{\n\t\t\twithErrorRightOfCaption: getErrorLocation() === 'rightOfCaption'\n\t\t}\"\n\t>\n\t\t<div *ngIf=\"captionRef\" class=\"captionRefContainer\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"captionRef\"></ng-container>\n\t\t\t<div *ngIf=\"isRequired()\">&nbsp;*</div>\n\t\t</div>\n\t\t<div *ngIf=\"!captionRef\" class=\"captionText\">{{caption}}<span *ngIf=\"isRequired()\">&nbsp;*</span></div>\n\t\t<div class=\"rightOfCaptionError\" *ngIf=\"hasRightOfCaptionError()\" [ngClass]=\"{errorFullyVisible: errorFullyVisible, errorMessageHasMaxWidth: errorMessageHasMaxWidth}\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"errorRef\" [ngTemplateOutletContext]=\"{forCalculation: forCalculation}\"></ng-container>\n\t\t</div>\n\t</div>\n</ng-template>\n\n<ng-template #errorRef let-forCalculation=\"forCalculation\">\n\t<div *ngIf=\"shouldShowErrorMessages() && getErrorToShow()\" class=\"errorContainer\" [elementIsTruncatedCb]=\"forCalculation ? setErrorMessageIsTruncated : null\" [ngClass]=\"{horizontal: direction === 'horizontal', hasCaption: caption || captionRef, 'd30-70': spaceDistribution === '30-70', 'd34-66': spaceDistribution === '34-66'}\">\n\t\t<div *ngIf=\"showDefaultError('min')\">{{substituteParameters(getErrorMessage(\"min\"), {min: attachedControl.errors.min.min})}}</div>\n\t\t<div *ngIf=\"showDefaultError('max')\">{{substituteParameters(getErrorMessage(\"max\"), {max: attachedControl.errors.max.max})}}</div>\n\t\t<div *ngIf=\"showDefaultError('required')\">{{getErrorMessage(\"required\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('email')\">{{getErrorMessage(\"email\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('minlength')\">{{substituteParameters(getErrorMessage(\"minLength\"), {minLength: attachedControl.errors.minlength.requiredLength})}}</div>\n\t\t<div *ngIf=\"showDefaultError('maxlength')\">{{substituteParameters(getErrorMessage(\"maxLength\"), {maxLength: attachedControl.errors.maxlength.requiredLength})}}</div>\n\t\t<div *ngIf=\"showDefaultError('pattern')\">{{getErrorMessage(\"pattern\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('MatchPassword')\">{{getErrorMessage(\"matchPassword\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('date')\">{{getErrorMessage(\"date\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('message')\">{{attachedControl.errors.message.value}}</div>\n\t\t<div *ngIf=\"showDefaultError('formLevel')\">{{getErrorMessage(\"formLevel\")}}</div>\n\t\t<div [ngTemplateOutlet]=\"getCustomErrorHandler(getErrorToShow())?.templateRef\"></div>\n\t</div>\n</ng-template>\n\n<ng-template #tailTpl>\n\t<div class=\"errorTooltipContainer\" [ngClass]=\"{alwaysOpen: shouldShowErrorTooltipOpened()}\">\n\t\t<ng-container *ngIf=\"hasHoverableErrorTooltip() || shouldShowErrorTooltipOpened()\">\n\t\t\t<div class=\"errorTooltipTriangle\"></div>\n\t\t\t<div class=\"errorTooltipTriangleWhite\"></div>\n\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<ng-container *ngIf=\"getErrorToShow()\" [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t\t\t\t\t\t<div *ngIf=\"!getErrorToShow() && shouldShowWarningPopup()\">\n\t\t\t\t\t\t\t<ng-container *ngIf=\"getWarningToShowIsTemplateRef()\" [ngTemplateOutlet]=\"getWarningToShowAsTemplateRef()\"></ng-container>\n\t\t\t\t\t\t\t<span *ngIf=\"!getWarningToShowIsTemplateRef()\">{{getWarningToShow()}}</span>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t</ng-container>\n\t\t<klp-form-warning-icon variant=\"fill\" *ngIf=\"getErrorToShow()\" (click)=\"togglePopup()\"></klp-form-warning-icon>\n\t\t<klp-form-warning-icon variant=\"line\" *ngIf=\"!getErrorToShow() && getWarningToShow()\" (click)=\"togglePopup()\"></klp-form-warning-icon>\n\t</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{flex:0 0 auto}.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{display:flex}.caption{font-weight:700;flex:0 0 auto;color:#515365}.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;font-weight:400;overflow:hidden;flex:1 0 auto;text-align:right}.caption.withErrorRightOfCaption .rightOfCaptionError.errorFullyVisible{display:block}.caption.withErrorRightOfCaption .rightOfCaptionError.errorMessageHasMaxWidth{max-width:40%}.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;position:absolute;top:-.6rem;right:-1.875rem;transform:translateY(-100%);width:20rem}.inputContainer .errorTooltip.noPointerEvents{pointer-events:none}.inputContainer .errorTooltip .closeBtn{display:none;position:absolute;top:.2rem;right:.2rem;padding:.2rem .4rem;cursor:pointer;color:#666;font-size:1rem}.inputContainer .errorTooltip .closeBtn:hover{color:#515365}.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"] }]
817
818
  }], ctorParameters: () => [{ type: FormComponent, decorators: [{
818
819
  type: Optional
819
820
  }] }, { type: undefined, decorators: [{
@@ -835,6 +836,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
835
836
  type: Input
836
837
  }], errorMessageAsTooltip: [{
837
838
  type: Input
839
+ }], errorMessageHasMaxWidth: [{
840
+ type: Input
838
841
  }], internalComponentRef: [{
839
842
  type: ViewChild,
840
843
  args: ['internalComponentRef']
@@ -1981,6 +1984,8 @@ class DateTimePickerComponent extends MultipleValueAccessorBase {
1981
1984
  this.format = 'dd-MM-yyyy';
1982
1985
  this.clearable = false;
1983
1986
  this.showTimeInput = true;
1987
+ this.initHour = null;
1988
+ this.initMinute = null;
1984
1989
  this.invalidTimeAsMidnight = false; // if the time is not valid, use 00:00 as the time
1985
1990
  this.openPickerOnDate = null;
1986
1991
  this.minDateStartOfDay = undefined;
@@ -2011,6 +2016,8 @@ class DateTimePickerComponent extends MultipleValueAccessorBase {
2011
2016
  this.placeholder = '';
2012
2017
  this.showTimeInput = false;
2013
2018
  }
2019
+ this.hours = this.initHour;
2020
+ this.minutes = this.initMinute;
2014
2021
  }
2015
2022
  ngAfterViewInit() {
2016
2023
  if (this.multiple) {
@@ -2169,8 +2176,8 @@ class DateTimePickerComponent extends MultipleValueAccessorBase {
2169
2176
  this.openPickerOnDate = value;
2170
2177
  }
2171
2178
  else {
2172
- this.hours = '';
2173
- this.minutes = '';
2179
+ this.hours = this.initHour ?? '';
2180
+ this.minutes = this.initMinute ?? '';
2174
2181
  this.openPickerOnDate = null;
2175
2182
  this.selectedDates = [];
2176
2183
  }
@@ -2243,7 +2250,7 @@ class DateTimePickerComponent extends MultipleValueAccessorBase {
2243
2250
  return this.translations?.[key]?.(params) ?? this.getDefaultTranslation(key)(params);
2244
2251
  }
2245
2252
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", 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.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
2246
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: DateTimePickerComponent, selector: "klp-form-date-time-picker", inputs: { minDate: "minDate", maxDate: "maxDate", sameMonthOnly: "sameMonthOnly", format: "format", placeholder: "placeholder", clearable: "clearable", showTimeInput: "showTimeInput", invalidTimeAsMidnight: "invalidTimeAsMidnight" }, providers: [
2253
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: DateTimePickerComponent, 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" }, providers: [
2247
2254
  { provide: NG_VALUE_ACCESSOR, useExisting: DateTimePickerComponent, multi: true },
2248
2255
  {
2249
2256
  provide: MAT_DATE_FORMATS,
@@ -2294,6 +2301,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
2294
2301
  type: Input
2295
2302
  }], showTimeInput: [{
2296
2303
  type: Input
2304
+ }], initHour: [{
2305
+ type: Input
2306
+ }], initMinute: [{
2307
+ type: Input
2297
2308
  }], invalidTimeAsMidnight: [{
2298
2309
  type: Input
2299
2310
  }], nativeInputRef: [{
@@ -2369,7 +2380,7 @@ class DatePickerComponent extends MultipleValueAccessorBase {
2369
2380
  return this.translations?.[key]?.(params) ?? this.getDefaultTranslation(key)(params);
2370
2381
  }
2371
2382
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", 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 }); }
2372
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: DatePickerComponent, selector: "klp-form-date-picker", inputs: { minDate: "minDate", maxDate: "maxDate", sameMonthOnly: "sameMonthOnly", format: "format", placeholder: "placeholder", clearable: "clearable" }, 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(onTouch)=\"touch()\"\n\t></klp-form-date-time-picker>\n\t<div class=\"tail\">\n\t\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n\t</div>\n</div>\n", styles: [":host{display:block;--mdc-icon-button-icon-size: 18px}.componentContainer{position:relative}.componentContainer ::ng-deep .mdc-text-field__input::placeholder{color:#aaa!important}.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: 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: DateTimePickerComponent, selector: "klp-form-date-time-picker", inputs: ["minDate", "maxDate", "sameMonthOnly", "format", "placeholder", "clearable", "showTimeInput", "invalidTimeAsMidnight"] }] }); }
2383
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: DatePickerComponent, selector: "klp-form-date-picker", inputs: { minDate: "minDate", maxDate: "maxDate", sameMonthOnly: "sameMonthOnly", format: "format", placeholder: "placeholder", clearable: "clearable" }, 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(onTouch)=\"touch()\"\n\t></klp-form-date-time-picker>\n\t<div class=\"tail\">\n\t\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n\t</div>\n</div>\n", styles: [":host{display:block;--mdc-icon-button-icon-size: 18px}.componentContainer{position:relative}.componentContainer ::ng-deep .mdc-text-field__input::placeholder{color:#aaa!important}.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: 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: DateTimePickerComponent, selector: "klp-form-date-time-picker", inputs: ["minDate", "maxDate", "sameMonthOnly", "format", "placeholder", "clearable", "showTimeInput", "initHour", "initMinute", "invalidTimeAsMidnight"] }] }); }
2373
2384
  }
2374
2385
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: DatePickerComponent, decorators: [{
2375
2386
  type: Component,