@klippa/ngx-enhancy-forms 20.0.14 → 20.0.15
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.
|
@@ -938,11 +938,11 @@ class FormElementComponent {
|
|
|
938
938
|
}
|
|
939
939
|
}
|
|
940
940
|
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> *</div>\n }\n </div>\n }\n @if (!captionRef) {\n <div class=\"captionText\">{{caption}}@if (isRequired()) {\n <span> *</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:#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.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"] }] }); }
|
|
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> *</div>\n }\n </div>\n }\n @if (!captionRef) {\n <div class=\"captionText\">{{caption}}@if (isRequired()) {\n <span> *</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"] }] }); }
|
|
942
942
|
}
|
|
943
943
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: FormElementComponent, decorators: [{
|
|
944
944
|
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> *</div>\n }\n </div>\n }\n @if (!captionRef) {\n <div class=\"captionText\">{{caption}}@if (isRequired()) {\n <span> *</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:#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"] }]
|
|
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> *</div>\n }\n </div>\n }\n @if (!captionRef) {\n <div class=\"captionText\">{{caption}}@if (isRequired()) {\n <span> *</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"] }]
|
|
946
946
|
}], ctorParameters: () => [{ type: FormComponent, decorators: [{
|
|
947
947
|
type: Optional
|
|
948
948
|
}] }, { type: undefined, decorators: [{
|
|
@@ -1197,11 +1197,11 @@ class ButtonComponent {
|
|
|
1197
1197
|
}
|
|
1198
1198
|
}
|
|
1199
1199
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1200
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: ButtonComponent, isStandalone: false, selector: "klp-form-button", inputs: { variant: "variant", size: "size", fullWidth: "fullWidth", hasBorder: "hasBorder", disabled: "disabled", isLoading: "isLoading", type: "type", clickCallback: "clickCallback" }, host: { properties: { "class._fullWidth": "this._" } }, ngImport: i0, template: "<button class=\"buttonFundamentals\"\n\t[ngClass]=\"[\n\t\tvariant,\n\t\tsize,\n\t\tfullWidth ? 'fullWidth' : '',\n\t\thasBorder ? '' : 'no-border',\n\t\tdisabled ? 'disabled' : ''\n\t]\"\n [type]=\"type\"\n (click)=\"onClick($event)\"\n >\n <div class=\"caption\" [ngClass]=\"{invisible: isLoading}\">\n <ng-content></ng-content>\n </div>\n @if (isLoading) {\n <div class=\"loadingSpinnerContainer\">\n <klp-form-loading-indicator variant=\"spinner\" size=\"small\"></klp-form-loading-indicator>\n </div>\n }\n</button>\n", styles: [":host{display:inline-block}:host._fullWidth{display:block}.buttonFundamentals{cursor:pointer;letter-spacing:1px;font-size:13px;font-weight:700;padding:0 20px;border:1px solid #D0D5DD;border-radius:8px;color:#101828;height:2.625rem}.buttonFundamentals.disabled{cursor:not-allowed}.buttonFundamentals.tiny{font-size:.75rem;font-weight:400;height:2rem}.buttonFundamentals.large{height:3rem}.fullWidth{width:100%}.no-border{border:none}.caption.invisible{visibility:hidden}button{position:relative}.loadingSpinnerContainer{position:absolute;inset:0;display:flex;justify-content:center;align-items:center}.white{color:#
|
|
1200
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: ButtonComponent, isStandalone: false, selector: "klp-form-button", inputs: { variant: "variant", size: "size", fullWidth: "fullWidth", hasBorder: "hasBorder", disabled: "disabled", isLoading: "isLoading", type: "type", clickCallback: "clickCallback" }, host: { properties: { "class._fullWidth": "this._" } }, ngImport: i0, template: "<button class=\"buttonFundamentals\"\n\t[ngClass]=\"[\n\t\tvariant,\n\t\tsize,\n\t\tfullWidth ? 'fullWidth' : '',\n\t\thasBorder ? '' : 'no-border',\n\t\tdisabled ? 'disabled' : ''\n\t]\"\n [type]=\"type\"\n (click)=\"onClick($event)\"\n >\n <div class=\"caption\" [ngClass]=\"{invisible: isLoading}\">\n <ng-content></ng-content>\n </div>\n @if (isLoading) {\n <div class=\"loadingSpinnerContainer\">\n <klp-form-loading-indicator variant=\"spinner\" size=\"small\"></klp-form-loading-indicator>\n </div>\n }\n</button>\n", styles: [":host{display:inline-block}:host._fullWidth{display:block}.buttonFundamentals{cursor:pointer;letter-spacing:1px;font-size:13px;font-weight:700;padding:0 20px;border:1px solid #D0D5DD;border-radius:8px;color:#101828;height:2.625rem}.buttonFundamentals.disabled{cursor:not-allowed}.buttonFundamentals.tiny{font-size:.75rem;font-weight:400;height:2rem}.buttonFundamentals.large{height:3rem}.fullWidth{width:100%}.no-border{border:none}.caption.invisible{visibility:hidden}button{position:relative}.loadingSpinnerContainer{position:absolute;inset:0;display:flex;justify-content:center;align-items:center}.white{color:#475467;background-color:#fff;border-color:#c1c8d2;font-weight:500}.white:hover,.white:active{color:#475467;background-color:#d6dae1;border-color:#d6dae1}.white:focus{text-decoration:underline}.greenFilled{background-color:#00ac42;border-color:#00ac42;color:#fff}.greenFilled:hover{color:#fff;background-color:#00c64c;border-color:#00c64c}.greenFilled:focus{text-decoration:underline}.greenFilled:active{background-color:#009338;border-color:#009338}.greenOutlined{background-color:#fff;border-color:#00ac42;color:#00ac42}.greenOutlined:hover{color:#fff;background-color:#00c64c;border-color:#00c64c}.greenOutlined:focus{text-decoration:underline}.greenOutlined:active{background-color:#009338;border-color:#009338}.greenLink{color:#00ac42;border:none;background:none;padding:0}.greenLink:hover,.greenLink:focus{text-decoration:underline}.contextMenuItem{color:#101828;background-color:#fff;border-color:#fff}.contextMenuItem:hover{background-color:#f2f4f7;border-color:#f2f4f7}.contextMenuItem:focus,.contextMenuItem:active{text-decoration:underline}.redFilled{color:#fff;background-color:#dc3545;border-color:#dc3545}.redFilled:hover{color:#fff;background-color:#e04b59;border-color:#e04b59}.redFilled:focus{text-decoration:underline}.redFilled:active{background-color:#d32535;border-color:#d32535}.redOutlined{color:#dc3545;background-color:#fff;border-color:#dc3545}.redOutlined:hover{color:#fff;background-color:#e04b59;border-color:#e04b59}.redOutlined:focus{text-decoration:underline}.redOutlined:active{background-color:#d32535;border-color:#d32535}.orangeFilled{color:#fff;background-color:#ff8000;border-color:#ff8000}.orangeFilled:hover{color:#fff;background-color:#ff8d1a;border-color:#ff8d1a}.orangeFilled:focus{text-decoration:underline}.orangeFilled:active{background-color:#e67300;border-color:#e67300}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "klp-form-loading-indicator", inputs: ["variant", "size"] }] }); }
|
|
1201
1201
|
}
|
|
1202
1202
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
1203
1203
|
type: Component,
|
|
1204
|
-
args: [{ selector: 'klp-form-button', standalone: false, template: "<button class=\"buttonFundamentals\"\n\t[ngClass]=\"[\n\t\tvariant,\n\t\tsize,\n\t\tfullWidth ? 'fullWidth' : '',\n\t\thasBorder ? '' : 'no-border',\n\t\tdisabled ? 'disabled' : ''\n\t]\"\n [type]=\"type\"\n (click)=\"onClick($event)\"\n >\n <div class=\"caption\" [ngClass]=\"{invisible: isLoading}\">\n <ng-content></ng-content>\n </div>\n @if (isLoading) {\n <div class=\"loadingSpinnerContainer\">\n <klp-form-loading-indicator variant=\"spinner\" size=\"small\"></klp-form-loading-indicator>\n </div>\n }\n</button>\n", styles: [":host{display:inline-block}:host._fullWidth{display:block}.buttonFundamentals{cursor:pointer;letter-spacing:1px;font-size:13px;font-weight:700;padding:0 20px;border:1px solid #D0D5DD;border-radius:8px;color:#101828;height:2.625rem}.buttonFundamentals.disabled{cursor:not-allowed}.buttonFundamentals.tiny{font-size:.75rem;font-weight:400;height:2rem}.buttonFundamentals.large{height:3rem}.fullWidth{width:100%}.no-border{border:none}.caption.invisible{visibility:hidden}button{position:relative}.loadingSpinnerContainer{position:absolute;inset:0;display:flex;justify-content:center;align-items:center}.white{color:#
|
|
1204
|
+
args: [{ selector: 'klp-form-button', standalone: false, template: "<button class=\"buttonFundamentals\"\n\t[ngClass]=\"[\n\t\tvariant,\n\t\tsize,\n\t\tfullWidth ? 'fullWidth' : '',\n\t\thasBorder ? '' : 'no-border',\n\t\tdisabled ? 'disabled' : ''\n\t]\"\n [type]=\"type\"\n (click)=\"onClick($event)\"\n >\n <div class=\"caption\" [ngClass]=\"{invisible: isLoading}\">\n <ng-content></ng-content>\n </div>\n @if (isLoading) {\n <div class=\"loadingSpinnerContainer\">\n <klp-form-loading-indicator variant=\"spinner\" size=\"small\"></klp-form-loading-indicator>\n </div>\n }\n</button>\n", styles: [":host{display:inline-block}:host._fullWidth{display:block}.buttonFundamentals{cursor:pointer;letter-spacing:1px;font-size:13px;font-weight:700;padding:0 20px;border:1px solid #D0D5DD;border-radius:8px;color:#101828;height:2.625rem}.buttonFundamentals.disabled{cursor:not-allowed}.buttonFundamentals.tiny{font-size:.75rem;font-weight:400;height:2rem}.buttonFundamentals.large{height:3rem}.fullWidth{width:100%}.no-border{border:none}.caption.invisible{visibility:hidden}button{position:relative}.loadingSpinnerContainer{position:absolute;inset:0;display:flex;justify-content:center;align-items:center}.white{color:#475467;background-color:#fff;border-color:#c1c8d2;font-weight:500}.white:hover,.white:active{color:#475467;background-color:#d6dae1;border-color:#d6dae1}.white:focus{text-decoration:underline}.greenFilled{background-color:#00ac42;border-color:#00ac42;color:#fff}.greenFilled:hover{color:#fff;background-color:#00c64c;border-color:#00c64c}.greenFilled:focus{text-decoration:underline}.greenFilled:active{background-color:#009338;border-color:#009338}.greenOutlined{background-color:#fff;border-color:#00ac42;color:#00ac42}.greenOutlined:hover{color:#fff;background-color:#00c64c;border-color:#00c64c}.greenOutlined:focus{text-decoration:underline}.greenOutlined:active{background-color:#009338;border-color:#009338}.greenLink{color:#00ac42;border:none;background:none;padding:0}.greenLink:hover,.greenLink:focus{text-decoration:underline}.contextMenuItem{color:#101828;background-color:#fff;border-color:#fff}.contextMenuItem:hover{background-color:#f2f4f7;border-color:#f2f4f7}.contextMenuItem:focus,.contextMenuItem:active{text-decoration:underline}.redFilled{color:#fff;background-color:#dc3545;border-color:#dc3545}.redFilled:hover{color:#fff;background-color:#e04b59;border-color:#e04b59}.redFilled:focus{text-decoration:underline}.redFilled:active{background-color:#d32535;border-color:#d32535}.redOutlined{color:#dc3545;background-color:#fff;border-color:#dc3545}.redOutlined:hover{color:#fff;background-color:#e04b59;border-color:#e04b59}.redOutlined:focus{text-decoration:underline}.redOutlined:active{background-color:#d32535;border-color:#d32535}.orangeFilled{color:#fff;background-color:#ff8000;border-color:#ff8000}.orangeFilled:hover{color:#fff;background-color:#ff8d1a;border-color:#ff8d1a}.orangeFilled:focus{text-decoration:underline}.orangeFilled:active{background-color:#e67300;border-color:#e67300}\n"] }]
|
|
1205
1205
|
}], propDecorators: { variant: [{
|
|
1206
1206
|
type: Input
|
|
1207
1207
|
}], size: [{
|
|
@@ -2717,11 +2717,11 @@ class FileInputComponent extends MultipleValueAccessorBase {
|
|
|
2717
2717
|
this.nativeInputRef.nativeElement.click();
|
|
2718
2718
|
}
|
|
2719
2719
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: FileInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
2720
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: FileInputComponent, isStandalone: false, selector: "klp-form-file-input", inputs: { isLoading: "isLoading", clearable: "clearable", onlyShowUploadButton: "onlyShowUploadButton", useFullParentSize: "useFullParentSize", buttonText: "buttonText", fullyCustom: "fullyCustom" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: FileInputComponent, multi: true }], viewQueries: [{ propertyName: "nativeInputRef", first: true, predicate: ["nativeInputRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (fullyCustom) {\n <div class=\"fullyCustom\">\n <input\n type=\"file\"\n #nativeInputRef\n (change)=\"onChange($event.target.files)\"\n [multiple]=\"multiple\"\n [disabled]=\"disabled\"\n />\n <div (click)=\"uploadFileClicked()\">\n <ng-container [ngTemplateOutlet]=\"contentTpl\"></ng-container>\n </div>\n </div>\n}\n\n@if (!fullyCustom) {\n <div class=\"componentContainer\" [ngClass]=\"{fullParentSize: useFullParentSize, showErrors: isInErrorState()}\"\n >\n <div class=\"buttonContainer\">\n <input\n type=\"file\"\n #nativeInputRef\n (change)=\"onChange($event.target.files)\"\n [multiple]=\"multiple\"\n [disabled]=\"disabled\"\n >\n <klp-form-button\n class=\"uploadButton\"\n [isLoading]=\"isLoading\"\n [disabled]=\"disabled\"\n (click)=\"uploadFileClicked()\"\n >\n <div class=\"innerButton\">\n @if (buttonText) {\n <span>{{ buttonText }}</span>\n }\n @if (!buttonText) {\n <div>\n <ng-container [ngTemplateOutlet]=\"contentTpl\"></ng-container>\n </div>\n }\n <div class=\"tail\">\n <ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n </div>\n </div>\n </klp-form-button>\n </div>\n @if (!onlyShowUploadButton) {\n <div class=\"fileName\">\n {{ getFileNames() }}\n </div>\n }\n @if (shouldShowClearButton()) {\n <klp-form-button class=\"clearButton\" variant=\"white\" (click)=\"resetToNull()\">X\n </klp-form-button>\n }\n </div>\n}\n\n<ng-template #contentTpl>\n <ng-content></ng-content>\n</ng-template>\n", styles: [":host{display:block}:host input:disabled{cursor:not-allowed}.componentContainer{display:flex;align-items:center}.componentContainer.showErrors ::ng-deep button{border-color:#ff8000}.componentContainer.fullParentSize{height:100%;justify-content:center;position:relative}.componentContainer:not(.fullParentSize) .buttonContainer{position:relative}.componentContainer .buttonContainer{flex:0 0 auto}.innerButton{display:flex;align-items:center}.tail{margin-left:.4rem}input{position:absolute;cursor:pointer;opacity:0;inset:0}.fileName{flex:1 1 0px;margin-left:.625rem;color:#
|
|
2720
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: FileInputComponent, isStandalone: false, selector: "klp-form-file-input", inputs: { isLoading: "isLoading", clearable: "clearable", onlyShowUploadButton: "onlyShowUploadButton", useFullParentSize: "useFullParentSize", buttonText: "buttonText", fullyCustom: "fullyCustom" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: FileInputComponent, multi: true }], viewQueries: [{ propertyName: "nativeInputRef", first: true, predicate: ["nativeInputRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (fullyCustom) {\n <div class=\"fullyCustom\">\n <input\n type=\"file\"\n #nativeInputRef\n (change)=\"onChange($event.target.files)\"\n [multiple]=\"multiple\"\n [disabled]=\"disabled\"\n />\n <div (click)=\"uploadFileClicked()\">\n <ng-container [ngTemplateOutlet]=\"contentTpl\"></ng-container>\n </div>\n </div>\n}\n\n@if (!fullyCustom) {\n <div class=\"componentContainer\" [ngClass]=\"{fullParentSize: useFullParentSize, showErrors: isInErrorState()}\"\n >\n <div class=\"buttonContainer\">\n <input\n type=\"file\"\n #nativeInputRef\n (change)=\"onChange($event.target.files)\"\n [multiple]=\"multiple\"\n [disabled]=\"disabled\"\n >\n <klp-form-button\n class=\"uploadButton\"\n [isLoading]=\"isLoading\"\n [disabled]=\"disabled\"\n (click)=\"uploadFileClicked()\"\n >\n <div class=\"innerButton\">\n @if (buttonText) {\n <span>{{ buttonText }}</span>\n }\n @if (!buttonText) {\n <div>\n <ng-container [ngTemplateOutlet]=\"contentTpl\"></ng-container>\n </div>\n }\n <div class=\"tail\">\n <ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n </div>\n </div>\n </klp-form-button>\n </div>\n @if (!onlyShowUploadButton) {\n <div class=\"fileName\">\n {{ getFileNames() }}\n </div>\n }\n @if (shouldShowClearButton()) {\n <klp-form-button class=\"clearButton\" variant=\"white\" (click)=\"resetToNull()\">X\n </klp-form-button>\n }\n </div>\n}\n\n<ng-template #contentTpl>\n <ng-content></ng-content>\n</ng-template>\n", styles: [":host{display:block}:host input:disabled{cursor:not-allowed}.componentContainer{display:flex;align-items:center}.componentContainer.showErrors ::ng-deep button{border-color:#ff8000}.componentContainer.fullParentSize{height:100%;justify-content:center;position:relative}.componentContainer:not(.fullParentSize) .buttonContainer{position:relative}.componentContainer .buttonContainer{flex:0 0 auto}.innerButton{display:flex;align-items:center}.tail{margin-left:.4rem}input{position:absolute;cursor:pointer;opacity:0;inset:0}.fileName{flex:1 1 0px;margin-left:.625rem;color:#475467;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.clearButton{flex:0 0 auto}.fullyCustom input{display: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: "component", type: ButtonComponent, selector: "klp-form-button", inputs: ["variant", "size", "fullWidth", "hasBorder", "disabled", "isLoading", "type", "clickCallback"] }] }); }
|
|
2721
2721
|
}
|
|
2722
2722
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: FileInputComponent, decorators: [{
|
|
2723
2723
|
type: Component,
|
|
2724
|
-
args: [{ selector: 'klp-form-file-input', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: FileInputComponent, multi: true }], standalone: false, template: "@if (fullyCustom) {\n <div class=\"fullyCustom\">\n <input\n type=\"file\"\n #nativeInputRef\n (change)=\"onChange($event.target.files)\"\n [multiple]=\"multiple\"\n [disabled]=\"disabled\"\n />\n <div (click)=\"uploadFileClicked()\">\n <ng-container [ngTemplateOutlet]=\"contentTpl\"></ng-container>\n </div>\n </div>\n}\n\n@if (!fullyCustom) {\n <div class=\"componentContainer\" [ngClass]=\"{fullParentSize: useFullParentSize, showErrors: isInErrorState()}\"\n >\n <div class=\"buttonContainer\">\n <input\n type=\"file\"\n #nativeInputRef\n (change)=\"onChange($event.target.files)\"\n [multiple]=\"multiple\"\n [disabled]=\"disabled\"\n >\n <klp-form-button\n class=\"uploadButton\"\n [isLoading]=\"isLoading\"\n [disabled]=\"disabled\"\n (click)=\"uploadFileClicked()\"\n >\n <div class=\"innerButton\">\n @if (buttonText) {\n <span>{{ buttonText }}</span>\n }\n @if (!buttonText) {\n <div>\n <ng-container [ngTemplateOutlet]=\"contentTpl\"></ng-container>\n </div>\n }\n <div class=\"tail\">\n <ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n </div>\n </div>\n </klp-form-button>\n </div>\n @if (!onlyShowUploadButton) {\n <div class=\"fileName\">\n {{ getFileNames() }}\n </div>\n }\n @if (shouldShowClearButton()) {\n <klp-form-button class=\"clearButton\" variant=\"white\" (click)=\"resetToNull()\">X\n </klp-form-button>\n }\n </div>\n}\n\n<ng-template #contentTpl>\n <ng-content></ng-content>\n</ng-template>\n", styles: [":host{display:block}:host input:disabled{cursor:not-allowed}.componentContainer{display:flex;align-items:center}.componentContainer.showErrors ::ng-deep button{border-color:#ff8000}.componentContainer.fullParentSize{height:100%;justify-content:center;position:relative}.componentContainer:not(.fullParentSize) .buttonContainer{position:relative}.componentContainer .buttonContainer{flex:0 0 auto}.innerButton{display:flex;align-items:center}.tail{margin-left:.4rem}input{position:absolute;cursor:pointer;opacity:0;inset:0}.fileName{flex:1 1 0px;margin-left:.625rem;color:#
|
|
2724
|
+
args: [{ selector: 'klp-form-file-input', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: FileInputComponent, multi: true }], standalone: false, template: "@if (fullyCustom) {\n <div class=\"fullyCustom\">\n <input\n type=\"file\"\n #nativeInputRef\n (change)=\"onChange($event.target.files)\"\n [multiple]=\"multiple\"\n [disabled]=\"disabled\"\n />\n <div (click)=\"uploadFileClicked()\">\n <ng-container [ngTemplateOutlet]=\"contentTpl\"></ng-container>\n </div>\n </div>\n}\n\n@if (!fullyCustom) {\n <div class=\"componentContainer\" [ngClass]=\"{fullParentSize: useFullParentSize, showErrors: isInErrorState()}\"\n >\n <div class=\"buttonContainer\">\n <input\n type=\"file\"\n #nativeInputRef\n (change)=\"onChange($event.target.files)\"\n [multiple]=\"multiple\"\n [disabled]=\"disabled\"\n >\n <klp-form-button\n class=\"uploadButton\"\n [isLoading]=\"isLoading\"\n [disabled]=\"disabled\"\n (click)=\"uploadFileClicked()\"\n >\n <div class=\"innerButton\">\n @if (buttonText) {\n <span>{{ buttonText }}</span>\n }\n @if (!buttonText) {\n <div>\n <ng-container [ngTemplateOutlet]=\"contentTpl\"></ng-container>\n </div>\n }\n <div class=\"tail\">\n <ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n </div>\n </div>\n </klp-form-button>\n </div>\n @if (!onlyShowUploadButton) {\n <div class=\"fileName\">\n {{ getFileNames() }}\n </div>\n }\n @if (shouldShowClearButton()) {\n <klp-form-button class=\"clearButton\" variant=\"white\" (click)=\"resetToNull()\">X\n </klp-form-button>\n }\n </div>\n}\n\n<ng-template #contentTpl>\n <ng-content></ng-content>\n</ng-template>\n", styles: [":host{display:block}:host input:disabled{cursor:not-allowed}.componentContainer{display:flex;align-items:center}.componentContainer.showErrors ::ng-deep button{border-color:#ff8000}.componentContainer.fullParentSize{height:100%;justify-content:center;position:relative}.componentContainer:not(.fullParentSize) .buttonContainer{position:relative}.componentContainer .buttonContainer{flex:0 0 auto}.innerButton{display:flex;align-items:center}.tail{margin-left:.4rem}input{position:absolute;cursor:pointer;opacity:0;inset:0}.fileName{flex:1 1 0px;margin-left:.625rem;color:#475467;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.clearButton{flex:0 0 auto}.fullyCustom input{display:none}\n"] }]
|
|
2725
2725
|
}], propDecorators: { isLoading: [{
|
|
2726
2726
|
type: Input
|
|
2727
2727
|
}], clearable: [{
|
|
@@ -2887,11 +2887,11 @@ class RadioComponent extends ValueAccessorBase {
|
|
|
2887
2887
|
this.Orientation = Orientation;
|
|
2888
2888
|
}
|
|
2889
2889
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: RadioComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
2890
|
-
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 >\n <div class=\"radioAndName\">\n @if (variant === 'classic') {\n <div class=\"
|
|
2890
|
+
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"] }] }); }
|
|
2891
2891
|
}
|
|
2892
2892
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: RadioComponent, decorators: [{
|
|
2893
2893
|
type: Component,
|
|
2894
|
-
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 >\n <div class=\"radioAndName\">\n @if (variant === 'classic') {\n <div class=\"
|
|
2894
|
+
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"] }]
|
|
2895
2895
|
}], propDecorators: { options: [{
|
|
2896
2896
|
type: Input
|
|
2897
2897
|
}], orientation: [{
|