Ghostfolio/apps/client/src/app/components/rule/rule-settings-dialog/rule-settings-dialog.html

<div mat-dialog-title>{{ data.categoryName }} › {{ data.rule.name }}</div>

<div class="py-3" mat-dialog-content>
  @if (
    data.rule.configuration.thresholdMin && data.rule.configuration.thresholdMax
  ) {
    <div class="w-100">
      <h6 class="d-flex mb-0">
        <ng-container i18n>Threshold range</ng-container>:
        <gf-value
          class="ml-1"
          [isPercent]="data.rule.configuration.threshold.unit === '%'"
          [locale]="data.locale"
          [precision]="2"
          [value]="data.settings.thresholdMin"
        />
        <span class="mx-1">-</span>
        <gf-value
          [isPercent]="data.rule.configuration.threshold.unit === '%'"
          [locale]="data.locale"
          [precision]="2"
          [value]="data.settings.thresholdMax"
        />
      </h6>
      <div class="align-items-center d-flex w-100">
        <gf-value
          [isPercent]="data.rule.configuration.threshold.unit === '%'"
          [locale]="data.locale"
          [precision]="2"
          [value]="data.rule.configuration.threshold.min"
        />
        <mat-slider
          class="flex-grow-1"
          [max]="data.rule.configuration.threshold.max"
          [min]="data.rule.configuration.threshold.min"
          [step]="data.rule.configuration.threshold.step"
        >
          <input matSliderStartThumb [(ngModel)]="data.settings.thresholdMin" />
          <input matSliderEndThumb [(ngModel)]="data.settings.thresholdMax" />
        </mat-slider>
        <gf-value
          [isPercent]="data.rule.configuration.threshold.unit === '%'"
          [locale]="data.locale"
          [precision]="2"
          [value]="data.rule.configuration.threshold.max"
        />
      </div>
    </div>
  } @else {
    <div class="w-100" [class.d-none]="!data.rule.configuration.thresholdMin">
      <h6 class="d-flex mb-0">
        <ng-container i18n>Threshold Min</ng-container>:
        <gf-value
          class="ml-1"
          [isPercent]="data.rule.configuration.threshold.unit === '%'"
          [locale]="data.locale"
          [precision]="2"
          [value]="data.settings.thresholdMin"
        />
      </h6>
      <div class="align-items-center d-flex w-100">
        <gf-value
          [isPercent]="data.rule.configuration.threshold.unit === '%'"
          [locale]="data.locale"
          [precision]="2"
          [value]="data.rule.configuration.threshold.min"
        />
        <mat-slider
          class="flex-grow-1"
          name="thresholdMin"
          [max]="data.rule.configuration.threshold.max"
          [min]="data.rule.configuration.threshold.min"
          [step]="data.rule.configuration.threshold.step"
        >
          <input matSliderThumb [(ngModel)]="data.settings.thresholdMin" />
        </mat-slider>
        <gf-value
          [isPercent]="data.rule.configuration.threshold.unit === '%'"
          [locale]="data.locale"
          [precision]="2"
          [value]="data.rule.configuration.threshold.max"
        />
      </div>
    </div>
    <div class="w-100" [class.d-none]="!data.rule.configuration.thresholdMax">
      <h6 class="d-flex mb-0">
        <ng-container i18n>Threshold Max</ng-container>:
        <gf-value
          class="ml-1"
          [isPercent]="data.rule.configuration.threshold.unit === '%'"
          [locale]="data.locale"
          [precision]="2"
          [value]="data.settings.thresholdMax"
        />
      </h6>
      <div class="align-items-center d-flex w-100">
        <gf-value
          [isPercent]="data.rule.configuration.threshold.unit === '%'"
          [locale]="data.locale"
          [precision]="2"
          [value]="data.rule.configuration.threshold.min"
        />
        <mat-slider
          class="flex-grow-1"
          name="thresholdMax"
          [max]="data.rule.configuration.threshold.max"
          [min]="data.rule.configuration.threshold.min"
          [step]="data.rule.configuration.threshold.step"
        >
          <input matSliderThumb [(ngModel)]="data.settings.thresholdMax" />
        </mat-slider>
        <gf-value
          [isPercent]="data.rule.configuration.threshold.unit === '%'"
          [locale]="data.locale"
          [precision]="2"
          [value]="data.rule.configuration.threshold.max"
        />
      </div>
    </div>
  }
</div>

<div align="end" mat-dialog-actions>
  <button i18n mat-button (click)="dialogRef.close()">Close</button>
  <button
    color="primary"
    mat-flat-button
    (click)="dialogRef.close(data.settings)"
  >
    <ng-container i18n>Save</ng-container>
  </button>
</div>