<div ng-class="customMargin ? ('!' + customMargin) : '!mb-5'">
  <div class="!block !mb-2">
    <label class="!font-medium !text-[#333E48] !text-sm" ng-show="labelText">
      {{labelText}}<span class="!text-red-600" ng-show="fieldRequired">*</span>
    </label>
    <div
      ng-show="description"
      class="!flex !flex-col !items-start !gap-1 !self-stretch !p-2 !px-3 !rounded-lg border border-[#1B4E7A] !bg-white !mb-2"
    >
      <div class="!flex !items-start !gap-2">
        <i class="dku-icon-info-circle-outline-16 !text-[#1B4E7A] !text-sm"></i>
        <span class="!text-[#1B4E7A] !text-sm !font-normal !leading-5">
          {{ description }}
        </span>
      </div>
    </div>
  </div>
  <div class="!relative !w-full">
    <textarea
      class="!text-sm !appearance-none !w-full !border !rounded-md !py-2 !px-3 !text-zinc-900 !font-normal !leading-tight !resize-y focus:!border-gray-400 focus:!ring-1 focus:!ring-gray-400"
      ng-model="config[configProperty]"
      placeholder="{{placeholder || null}}"
      ng-class="{
        '!border-red-500 !ring-1 !ring-red-500': formName.$submitted && fieldRequired && !config[configProperty],
            'focus:!border-red-500 focus:!ring-1 focus:!ring-red-500':
      !config[configProperty] && fieldRequired,
          'focus:!border-gray-400 focus:!ring-1 focus:!ring-gray-400':
      !!config[configProperty]
                }"
      style="min-height: 42px"
      ng-required="fieldRequired"
    >
    </textarea>

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