<div ng-class="customMargin ? ('!' + customMargin) : '!mb-5'">
    <div class="!block !mb-2">
        <label class="!font-light !text-sm !text-gray-900" ng-if="labelText">
            {{labelText}} <span class="!text-red-600" ng-if="isRequired">*</span>
        </label>
        <!-- Description text - only shown if description is provided -->
        <div class="!text-sm !font-normal !text-black " style="white-space: pre-line" ng-if="description">{{description}}</div>
    </div>
    <div class="!relative !w-full">
        <textarea
                class="!text-sm !appearance-none !w-full !border !rounded-md !py-2 !px-3 !text-black !font-normal !leading-tight !focus:outline-none !focus:shadow-outline !resize-y"
                ng-model="config[configProperty]" placeholder="{{placeholder || 'Enter ' + labelText.toLowerCase()}}"
                ng-class="{
        '!border-red-500 !ring-1 !ring-red-500': formName.$submitted && isRequired && !config[configProperty]
    }"
                style="min-height: 42px;" ng-required="isRequired">
        </textarea>

        <div class="!text-red-500 !text-sm !mt-1"
             ng-show="formName.$submitted && isRequired && !config[configProperty]">
            Text area is required
        </div>

    </div>
</div>