<div class="!w-[70%]">
    <p class="!block !text-sm !mb-1 !w-[142.85%]  !text-[#333E48] !font-medium">
        {{labelText}} <span ng-if="fieldRequired" class="!text-red-500">*</span>
    </p>
    <p ng-show="subLabel" class="!text-sm !mb-1 !text-gray-500 !relative !w-[142.85%] !left-0"
       style="white-space: pre-line">{{subLabel}}</p>

    <div class="!relative">
        <!-- Hidden input for Angular form validation -->
        <input type="hidden"
               name="{{configProperty || 'numberField'}}"
               ng-model="modelValue"
               ng-required="fieldRequired"/>

        <!-- Unified Input with Custom Arrows -->
        <div class="!w-[100px] !relative">
            <input type="number"
                   ng-model="modelValue"
                   min="{{minValue}}"
                   max="{{maxValue}}"
                   ng-attr-step="{{step}}"
                   ng-focus="inputFocused = true"
                   ng-blur="inputFocused = false"
                   ng-change="onInputChange()"
                   class="!block !w-full !rounded-md !border-gray-300 !shadow-sm !focus:border-blue-500 !focus:ring-blue-500 !sm:text-sm !py-2 !px-3 !pr-8 !h-10 number-input-no-spinner"
                   ng-class="{'!ring-1 !ring-gray-400 !border-gray-400': inputFocused, '!ring-gray-300 !border-gray-300': !inputFocused,
                   '!border-red-500 !ring-1 !ring-red-500': invalidInput || (formName.$submitted && fieldRequired && !isValidValue())}"
                   placeholder="{{placeholder}}">

            <!-- Custom Arrow Buttons -->
            <div class="!absolute !right-1 !top-1/2 !transform !-translate-y-1/2 !flex !flex-col !gap-0">
                <button type="button"
                        class="!w-6 !h-4 !flex !items-center !justify-center !text-gray-500 hover:!text-gray-700 !rounded-sm hover:!bg-gray-100 !transition-colors"
                        ng-mousedown="startIncrementing()"
                        ng-mouseup="stopActions()"
                        ng-mouseleave="stopActions()"
                        tabindex="-1">
                    <i class="dku-icon-chevron-up-12 !text-xs"></i>
                </button>
                <button type="button"
                        class="!w-6 !h-4 !flex !items-center !justify-center !text-gray-500 hover:!text-gray-700 !rounded-sm hover:!bg-gray-100 !transition-colors"
                        ng-mousedown="startDecrementing()"
                        ng-mouseup="stopActions()"
                        ng-mouseleave="stopActions()"
                        tabindex="-1">
                    <i class="dku-icon-chevron-down-12 !text-xs"></i>
                </button>
            </div>
        </div>

        <p ng-show="description" class="!text-xs !text-gray-500 !mt-0.5" style="white-space: pre-line">
            {{description}}
        </p>
        <div class="!text-sm !text-gray-500 !mt-1" ng-show="modelValue === 0 && zeroMessage">
            {{zeroMessage}}
        </div>
        <div class="!text-sm !text-gray-500 !mt-1" ng-show="warningMessage">
            {{warningMessage}}
        </div>
    </div>

    <!-- Validation Error Messages -->
    <div class="!text-sm !text-red-600 !mt-1" ng-show="invalidInput && maxValue">
        Value must be between {{minValue}} and {{maxValue}}
    </div>
    <div class="!text-sm !text-red-600 !mt-1" ng-show="invalidInput && minValue && !maxValue">
        Value must be greater than {{minValue}}
    </div>
    <div class="!text-red-500 !text-sm !mt-1"
         ng-show="formName.$submitted && fieldRequired && !isValidValue()">
        This field is required
    </div>
</div>