characteristic.component.html

@if (!readOnly){
    <!-- Nombre y descripción -->
    <div class="my-2">
      <h4 class="text-lg font-semibold text-primary-100 dark:text-gray-300">{{ characteristic.name }}</h4>
      <markdown [ngClass]="{
        'break-all': hasLongWord(characteristic.description, 20),
        'break-words': !hasLongWord(characteristic.description, 20)
        }" class="text-gray-500 dark:text-gray-400 text-wrap break-words" [data]="characteristic.description"></markdown>
    </div>
    @if(!isDisabled){
    <!-- Slider -->
    @if (isSlider()){
      <div class="flex items-center space-x-2">
        <input
          type="range"
          [min]="getSliderRange()?.min"
          [max]="getSliderRange()?.max"
          [formControl]="control"
          (change)="onControlCommit()"
          class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
        />
        <span class="min-w-24 flex justify-center text-sm text-gray-600 dark:text-gray-400">{{ control.value }} {{ getUnit() }}</span>
      </div>
    } @else {   <!-- Select -->
      <div>
        <select
          [formControl]="control"
          (change)="onControlCommit()"
          class="block w-full px-3 py-2 border border-gray-300 rounded-lg text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-300 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600"
        >
          <option
            *ngFor="let val of characteristic.productSpecCharacteristicValue"
            [value]="val.value"
          >
            {{ val.value }} {{ getUnit() }}
          </option>
        </select>
      </div>
    }
    }

} @else {
  <div class="grid grid-cols-2 items-center">
    <div class="text-base font-semibold text-primary-100 dark:text-gray-400 flex justify-between content-center">{{ characteristic.name }}:</div>
    <span class="pl-4 min-w-24 flex text-sm text-gray-600 dark:text-gray-400">{{ control.value }} {{ getUnit() }}</span>
  </div>
}