Remplacement des radios "paramètre fixé/à varier/à calculer" par des boutons dans un buttongroup

src/app/components/param-field-line/param-field-line.component.html

@@ -4,42 +4,25 @@
         <param-input [inputDisabled]="isInputDisabled" [param]="_param" [title]="title"></param-input>
     </div>
 
-    <!-- radio "fixé" -->
-    <div class="col-4 col-sm-2">
-        <input *ngIf="hasRadioFix()" type="radio" name="radio_param_{{symbol}}" value="fix" (click)="onRadioClick(symbol, 'fix')"
-            [checked]=radioFixCheck [disabled]=isDisabled id="radio_fix" />
-        <label *ngIf="hasRadioFix()" for="radio_fix">{{uitextParamFixe}}</label>
-    </div>
+    <div class="btn-group" role="group">
+        <!-- radio "fixé" -->
+        <label class="{{radioFixClass}} h-50 px-3 py-2" [(ngModel)]="radioModel" mdbRadio="Left" name="radio_param_{{symbol}}" value="fix"
+            (click)="onRadioClick(symbol, 'fix')" [checked]=radioFixCheck [disabled]=isDisabled id="radio_fix">
+            {{uitextParamFixe}}
+        </label>
 
-    <!-- radio "varier" -->
-    <div class="col-4 col-sm-2">
-        <input *ngIf="hasRadioVar()" type="radio" name="radio_param_{{symbol}}" value="var" (click)="onRadioClick(symbol,
-            'var')" [checked]=radioVarCheck [disabled]=isDisabled id="radio_var" />
-        <label *ngIf="hasRadioVar()" for="radio_var">{{uitextParamVarier}}</label>
-    </div>
+        <!-- radio "varier" -->
+        <label class="{{radioVarClass}} h-50 px-3 py-2" [(ngModel)]="radioModel" mdbRadio="Middle" name="radio_param_{{symbol}}"
+            value="var" (click)="onRadioClick(symbol, 'var')" [checked]=radioVarCheck [disabled]=isDisabled id="radio_var">
+            {{uitextParamVarier}}
+        </label>
 
-    <!-- radio "calculer" -->
-    <div class="col-4 col-sm-2">
-        <input *ngIf="hasRadioCal()" type="radio" name="radio_param_{{symbol}}" value="cal" (click)="onRadioClick(symbol,
-                            'cal')" [checked]=radioCalCheck [disabled]=isDisabled id="radio_cal" />
-        <label *ngIf="hasRadioCal()" for="radio_cal">{{uitextParamCalculer}}</label>
+        <!-- radio "calculer" -->
+        <label class="{{radioCalClass}} h-50 px-3 py-2" [(ngModel)]="radioModel" mdbRadio="Right" name="radio_param_{{symbol}}" value="cal"
+            (click)="onRadioClick(symbol, 'cal')" [checked]=radioCalCheck [disabled]=isDisabled id="radio_cal">
+            {{uitextParamCalculer}}
+        </label>
     </div>
-
-    <!-- <div class="btn-group" role="group"> -->
-    <!-- <label class="btn {{radioFixClass}} btn-sm h-50" aria-pressed="false" [(ngModel)]="radioModel" mdbRadio="Left" mdbRippleRadius
-        name="radio_param_{{symbol}}" value="fix" (click)="onRadioClick(symbol, 'fix')" [checked]=radioFixCheck [disabled]=isDisabled
-        id="radio_fix">
-        {{uitextParamFixe}}
-    </label>
-    <label class="btn {{radioVarClass}} btn-sm h-50" [(ngModel)]="radioModel" mdbRadio="Middle" mdbRippleRadius name="radio_param_{{symbol}}"
-        value="var" (click)="onRadioClick(symbol, 'var')" [checked]=radioVarCheck [disabled]=isDisabled id="radio_var">
-        {{uitextParamVarier}}
-    </label>
-    <label class="btn {{radioCalClass}} btn-sm h-50" [(ngModel)]="radioModel" mdbRadio="Right" mdbRippleRadius name="radio_param_{{symbol}}"
-        value="cal" (click)="onRadioClick(symbol, 'cal')" [checked]=radioCalCheck [disabled]=isDisabled id="radio_cal">
-        {{uitextParamCalculer}}
-    </label> -->
-    <!-- </div> -->
 </div>
 
 <div *ngIf="isRadioVarChecked" class="row">

src/app/components/param-field-line/param-field-line.component.ts

@@ -7,7 +7,23 @@ import { NgParameter, ParamRadioConfig } from "../../formulaire/ngparam";
 
 @Component({
     selector: "param-field-line",
-    templateUrl: "./param-field-line.component.html"
+    templateUrl: "./param-field-line.component.html",
+    styles: [
+        `.btn-on {
+            color:#505050;
+            border: 3px solid #505050;
+            background-color:white;
+            text-transform: uppercase;
+            font-size: 0.8em;
+        }`,
+        `.btn-off {
+            color:white;
+            border: 3px solid #505050;
+            background-color:#505050;
+            text-transform: uppercase;
+            font-size: 0.8em;
+        }`
+    ]
 })
 export class ParamFieldLineComponent {
     @Input("param")
@@ -60,7 +76,6 @@ export class ParamFieldLineComponent {
      * calcule la présence du radio "paramètre fixé"
      */
     private hasRadioFix(): boolean {
-        // switch (this._option) {
         switch (this._param.radioConfig) {
             case ParamRadioConfig.FIX:
                 return false;
@@ -74,7 +89,6 @@ export class ParamFieldLineComponent {
      * calcule la présence du radio "paramètre à varier"
      */
     private hasRadioVar(): boolean {
-        // switch (this._option) {
         switch (this._param.radioConfig) {
             case ParamRadioConfig.VAR:
             case ParamRadioConfig.CAL:
@@ -89,7 +103,6 @@ export class ParamFieldLineComponent {
     * calcule la présence du radio "paramètre à calculer"
     */
     private hasRadioCal(): boolean {
-        // switch (this._option) {
         switch (this._param.radioConfig) {
             case ParamRadioConfig.CAL:
                 return true;
@@ -171,24 +184,33 @@ export class ParamFieldLineComponent {
         return this._param.radioState != ParamRadioConfig.FIX;
     }
 
-    // /**
-    //  * classe du radio "fixé"
-    //  */
-    // private get radioFixClass(): string {
-    //     return this.radioFixCheck == undefined ? "btn-primary" : "btn-outline-primary";
-    // }
-
-    // /**
-    //  * classe du radio "varier"
-    //  */
-    // private get radioVarClass(): string {
-    //     return this.radioVarCheck == undefined ? "btn-primary" : "btn-outline-primary";
-    // }
-
-    // /**
-    //  * classe du radio "calculer"
-    //  */
-    // private get radioCalClass(): string {
-    //     return this.radioCalCheck == undefined ? "btn-primary" : "btn-outline-primary";
-    // }
+    /**
+     * classe du radio "fixé"
+     */
+    private on = true;
+    private onClass = "btn-on"
+    private offClass = "btn-off"
+    private get radioFixClass(): string {
+        if (this.on)
+            return this.radioFixCheck == undefined ? this.offClass : this.onClass;
+        return "";
+    }
+
+    /**
+     * classe du radio "varier"
+     */
+    private get radioVarClass(): string {
+        if (this.on)
+            return this.radioVarCheck == undefined ? this.offClass : this.onClass;
+        return "";
+    }
+
+    /**
+     * classe du radio "calculer"
+     */
+    private get radioCalClass(): string {
+        if (this.on)
+            return this.radioCalCheck == undefined ? this.offClass : this.onClass;
+        return "";
+    }
 }