@switch (paramType) {
  @case(eCubeParameterEnum.Input) {
    @if (options()?.slider) {
      <z-slider class="w-full"
        [step]="options()?.sliderStep || 1"
        [min]="options()?.sliderMin || 0"
        [max]="options()?.sliderMax || 100"
        [showValueLabel]="options()?.showThumbLabel"
        [showTickMarks]="options()?.showTickMarks"
        [ngModel]="parameterValue()"
        (changeEnd)="onSlicerEnd($event)"
      >
      </z-slider>
    } @else {
      <ngm-input class="block w-full px-2" [ngModel]="parameterValue()" [type]="parameter().dataType ?? 'string'"
        (blur)="onBlur($event)"
      />
    }
  }
  @case(eCubeParameterEnum.Select) {
    <ul role="list" class="w-full flex-1 flex flex-col justify-start items-start" cdkListbox
      [(ngModel)]="valueList"
    >
      @for (option of availableMembers(); track option.key; let i = $index) {
        <li role="listitem" class="radio-item w-full flex items-center px-2 py-1.5 rounded-lg cursor-pointer hover:bg-hover-bg" [cdkOption]="option.key">
          <input id="default-radio-{{i}}" name="parameter-radio" type="radio" [checked]="option.key === valueList()?.[0]"
            class="h-4 w-4 border border-divider-regular bg-components-input-bg-normal text-[var(--sys-primary)] focus:ring-2 focus:ring-components-input-border-active"
          >
          <label for="default-radio-{{i}}" class="ms-2 text-sm font-medium text-text-primary">{{ option.caption }}</label>
        </li>
      }
    </ul>
  }
  @case(eCubeParameterEnum.Dimension) {
    <ul class="flex-1 ngm-cdk-listbox" cdkListbox
      [cdkListboxMultiple]="multiple"
      [cdkListboxCompareWith]="compareWith"
      [cdkListboxValue]="selectedDimensionMembers()"
      (cdkListboxValueChange)="updateParameterValue($event.value)"
    >
      @for (availableMember of listboxAvailableMembers(); track availableMember.key) {
        <li class="ngm-cdk-option rounded-lg" [cdkOption]="availableMember">
          <ngm-display-behaviour [option]="availableMember" [displayBehaviour]="displayBehaviour()" />
        </li>
      }
    </ul>
  }
}

<!-- todo dimension$ change to referenceDimension -->
@if (variableProperty()?.referenceDimension) {
  <ngm-member-tree class="flex-1"
    [dataSettings]="dataSettings()"
    [dimension]="dimension$ | async"
    [options]="options()"
    [ngModel]="slicer"
    (ngModelChange)="onSlicerChange($event)"
  />
}