<div
  class="ui-option"
  [attr.data-label]="uiOption?.label"
  [attr.data-value]="uiOption?.value"
  [attr.data-key]="uiOption?.key"
  [attr.data-selected]="uiOption?.selected"
  [attr.data-target]="uiOption?.expanded"
  >
  <ui-checkbox [ngModel]="uiOption?.selected" (ngModelChange)="uiOption?.setSelected($event)" [indeterminate]="hasPartiallyCheckedChildren">
    {{ uiOption?.label }}
  </ui-checkbox>
  @if (uiOption?.values?.length) {
    <button
      class="btn-expand"
      (click)="uiOption.setExpanded(!uiOption?.expanded)"
      [class.expanded]="uiOption?.expanded"
      type="button"
      >
      <ui-icon icon="arrow_head" size="1em"></ui-icon>
    </button>
  }
</div>
@if (uiOption?.expanded) {
  @for (subOption of uiOption?.values; track subOption) {
    <ui-input-option-bool class="ml-10" [option]="subOption"></ui-input-option-bool>
  }
}
