Untitled

update the code for primeInputText by adding the props in a similar way as the below code for the props:suffixLabelText
suffixLabelClass
prefixLabelText
prefixLabel
labelClassName


return (
            (showIf != undefined ? showIf : true) && (
                <div
                    id={`${id}_wrapper`}
                    className={classNames('ux-form-group', wrapperClass, className, {
                        'ux-error': getConfigValue('modelErrorMessageFlags.' + model + '.isError'),
                    })}
                    aria-hidden="false"
                >
                    {clickValidation !== undefined && (
                        <UXButton
                            mode="link"
                            className={`ux-click-validation offset-md-${labelWidth} ux-col-md-${width}`}
                            click={clickValidationFunc}
                        >
                            {clickValidation}
                        </UXButton>
                    )}

                    <UXLabel
                        id={id}
                        wcmKey={wcmKey}
                        for={id}
                        className={classNames(
                            { required: labelRequiredClassIf || required },
                            labelClassName,
                            {
                                'ux-error': getConfigValue(
                                    'modelErrorMessageFlags.' + model + '.isError',
                                ),
                            },
                        )}
                        labelSubstituteText={labelSubstituteText}
                        labelSubstitute={labelSubstitute}
                        ariaHiddenForRequired={true}
                    >
                        {children}
                    </UXLabel>
                    {this.getFieldErrorTag('top')}
                    <div
                        className={classNames('ux-input-group', {
                            'ux-error': getConfigValue(
                                'modelErrorMessageFlags.' + model + '.isError',
                            ),
                        })}
                    >
                        {(prependIcon !== undefined ||
                            prefixLabel !== undefined ||
                            prefixLabelText !== undefined) && (
                            <div className="ux-input-group-prepend">
                                <div className="ux-input-group-text">
                                    {prefixLabel === undefined && prependIcon !== undefined && (
                                        <span className={`fa fa-${prependIcon}`}></span>
                                    )}
                                    {(prefixLabel !== undefined || prefixLabelText !== undefined) &&
                                        prependIcon === undefined && (
                                            <span id={`prefixLabelOf_${id}`} wcmkey={prefixLabel}>
                                                {this.getPrefixLabel()}
                                            </span>
                                        )}
                                </div>
                            </div>
                        )}
                        {/* <!-- prettier-ignore --> */}
                        <input
                            type={this.state.mask ? 'password' : this.textBoxType}
                            inputMode={this.inputMode}
                            id={id}
                            required={required}
                            className={classNames(
                                'ux-form-control',
                                'ux-inline-input',
                                inputClassName,
                            )}
                            ref={(c) => (this._input = c)}
                            aria-label={arialabel}
                            aria-labelledby={arialabelledby}
                            aria-describedby={this.ariaDesribedText()}
                            aria-required={required ? true : undefined}
                            attribute-type={this.textBoxType}
                            name={id}
                            autoComplete={autoComplete}
                            placeholder={placeholder ? placeholder : ''}
                            maxLength={maxLength}
                            readOnly={readOnly}
                            disabled={disabled}
                            datatype={dataType ? dataType : 'string'}
                            onBlur={this.handleOnBlur}
                            model={model ? model : ''}
                            value={this.state[model] || ''}
                            onFocus={this.handleOnFocus}
                            onDrop={() => {
                                return false;
                            }}
                            onKeyPress={(e) => {
                                this.handleOnKeyPress(e);
                            }}
                            onKeyUp={(e) => {
                                this.handleOnKeyUp(e);
                            }}
                            onKeyDown={(e) => {
                                this.handleOnKeyDown(e);
                            }}
                            onChange={(e) => {
                                this.updateState(e);
                                change ? change(e) : '';
                            }}
                            aria-invalid={
                                getConfigValue('modelErrorMessageFlags.' + model + '.isError')
                                    ? 'true'
                                    : 'false'
                            }
                        />
                        {(suffixLabel !== undefined || suffixLabelText !== undefined) && (
                            <UXLabel
                                id={`suffixLabelOf_${this.props.id}`}
                                className={classNames('ux-input-group-addon', sufixLabelClass)}
                            >
                                {this.getSuffixLabel()}
                            </UXLabel>
                        )}
                        {appendIcon !== undefined &&
                            !getConfigValue('modelErrorMessageFlags.' + model + '.isError') && (
                                <div className="ux-input-group-append">
                                    <div
                                        className={classNames('ux-input-group-text', {
                                            'ux-error': getConfigValue(
                                                'modelErrorMessageFlags.' + model + '.isError',
                                            ),
                                        })}
                                    >
                                        <span className={`fa fa-${appendIcon}`}></span>
                                    </div>
                                </div>
                            )}

                             getSuffixLabel() {
        if (typeof this.props.suffixLabel !== 'undefined') {
            return parse(Util.getWcmValue(this.props.suffixLabel.toString().toLowerCase(), this));
        } else if (typeof this.props.suffixLabelText !== 'undefined') {
            return this.props.suffixLabelText;
        } else {
            return '';
        }
    }
    getPrefixLabel() {
        if (typeof this.props.prefixLabel !== 'undefined') {
            return parse(Util.getWcmValue(this.props.prefixLabel.toString().toLowerCase(), this));
        } else if (typeof this.props.prefixLabelText !== 'undefined') {
            return this.props.prefixLabelText;
        } else {
            return '';
        }
    }
    /** below function will make the aria-describedby text and return it to Dom element */
    ariaDesribedText() {
        let text = `errorMessageSpanForElementWithId_${this.props.id}`;

        if (this.props.prefixLabel !== undefined && this.props.prependIcon === undefined) {
            text =
                text !== undefined
                    ? text + ' prefixLabelOf_' + this.props.id
                    : ' prefixLabelOf_' + this.props.id;
        }
        if (this.props.ariadescribedby) {
            text =
                text !== undefined
                    ? text + ' ' + this.props.ariadescribedby
                    : ' ' + this.props.ariadescribedby;
        }
        if (
            this.props.helperTextShowIf &&
            (this.props.helperText || this.props.helperTextLabelKey)
        ) {
            text =
                text !== undefined
                    ? text + ' ' + this.props.id + '_helptext'
                    : ' ' + this.props.id + '_helptext';
        }
        if (
            this.props.validatorGroup &&
            ((this.props.showValidatorGroupAlways !== undefined &&
                this.props.showValidatorGroupAlways === true) ||
                (this.state[this.props.model] !== undefined &&
                    this.state[this.props.model] !== null &&
                    this.state[this.props.model].trim() !== ''))
        ) {
            text =
                text !== undefined
                    ? text + ' ' + 'customValidator_' + this.props.id
                    : ' customValidator_' + this.props.id;
        }
        return text;
    }