Merge pull request #7850 from surveyjs/feature/7827-interchange-switc…

…h-labels

Feature/7827 interchange switch labels

packages/survey-angular-ui/src/questions/boolean.component.html

@@ -10,16 +10,16 @@
         [attr.aria-invalid]="model.a11y_input_ariaInvalid"
         [attr.aria-describedby]="model.a11y_input_ariaDescribedBy"
         [class]="model.cssClasses.control" [disabled]="model.isInputReadOnly"  [indeterminate]="model.isIndeterminate" [value]="model.booleanValue" [(ngModel)]="model.booleanValue" />
-      <div [class]="model.cssClasses.sliderGhost" (click)="model.onLabelClick($event, false)">
-        <span [class]="model.getLabelCss(false)" [model]="model.locLabelFalse" sv-ng-string></span>
+      <div [class]="model.cssClasses.sliderGhost" (click)="model.onLabelClick($event, model.swapOrder)">
+        <span [class]="model.getLabelCss(model.swapOrder)" [model]="model.locLabelLeft" sv-ng-string></span>
       </div>
       <div [class]="model.cssClasses.switch" (click)="model.onSwitchClickModel($event)">
         <span [class]="model.cssClasses.slider">
             <span *ngIf="model.cssClasses.sliderText && model.isDeterminated" [class]="model.cssClasses.sliderText" [model]="model.getCheckedLabel()" sv-ng-string></span>
         </span>
       </div>
-      <div [class]="model.cssClasses.sliderGhost" (click)="model.onLabelClick($event, true)">
-        <span [class]="model.getLabelCss(true)" [model]="model.locLabelTrue"  sv-ng-string></span>
+      <div [class]="model.cssClasses.sliderGhost" (click)="model.onLabelClick($event, !model.swapOrder)">
+        <span [class]="model.getLabelCss(!model.swapOrder)" [model]="model.locLabelRight"  sv-ng-string></span>
       </div>
     </label>
 </div>

packages/survey-vue3-ui/src/BooleanSwitch.vue

@@ -23,10 +23,10 @@
       />
       <div
         :class="question.cssClasses.sliderGhost"
-        v-on:click="onLabelClick($event, false)"
+        v-on:click="onLabelClick($event, question.swapOrder)"
       >
-        <span :class="question.getLabelCss(false)"
-          ><survey-string :locString="question.locLabelFalse"></survey-string
+        <span :class="question.getLabelCss(question.swapOrder)"
+          ><survey-string :locString="question.locLabelLeft"></survey-string
         ></span>
       </div>
       <div
@@ -46,10 +46,10 @@
       </div>
       <div
         :class="question.cssClasses.sliderGhost"
-        v-on:click="onLabelClick($event, true)"
+        v-on:click="onLabelClick($event, !question.swapOrder)"
       >
-        <span :class="question.getLabelCss(true)"
-          ><survey-string :locString="question.locLabelTrue"></survey-string
+        <span :class="question.getLabelCss(!question.swapOrder)"
+          ><survey-string :locString="question.locLabelRight"></survey-string
         ></span>
       </div>
     </label>

src/defaultCss/defaultV2Css.ts

@@ -289,6 +289,7 @@ export var defaultV2Css = {
     itemOnError: "sd-boolean--error",
     control: "sd-boolean__control sd-visuallyhidden",
     itemChecked: "sd-boolean--checked",
+    itemExchanged: "sd-boolean--exchanged",
     itemIndeterminate: "sd-boolean--indeterminate",
     itemDisabled: "sd-boolean--disabled",
     itemHover: "sd-boolean--allowhover",

src/defaultV2-theme/blocks/sd-boolean.scss

@@ -75,6 +75,23 @@
   transform: translateX(-100%);
 }
 
+.sd-boolean--exchanged {
+  .sd-boolean__thumb {
+    margin-left: 100%;
+    transform: translateX(-100%);
+  }
+
+  &.sd-boolean--checked .sd-boolean__thumb {
+    margin-left: 0%;
+    transform: translateX(0);
+  }
+
+  &.sd-boolean:not(.sd-boolean--checked):not(sd-boolean--indeterminate) .sd-boolean__label--false,
+  &.sd-boolean.sd-boolean--checked .sd-boolean__label--true {
+    color: $font-editorfont-placeholdercolor;
+  }
+}
+
 .sd-boolean--disabled {
   pointer-events: none;
 

src/knockout/koquestion_boolean.ts

@@ -13,10 +13,10 @@ export class QuestionBoolean extends QuestionBooleanModel {
     return super.onSwitchClickModel(getOriginalEvent(event));
   }
   public onTrueLabelClick(data: any, event: any) {
-    return this.onLabelClick(event, true);
+    return this.onLabelClick(event, !this.swapOrder);
   }
   public onFalseLabelClick(data: any, event: any) {
-    return this.onLabelClick(event, false);
+    return this.onLabelClick(event, this.swapOrder);
   }
   public onKeyDown(data: any, event: any): boolean {
     return this.onKeyDownCore(event);
@@ -27,7 +27,7 @@ export class QuestionBoolean extends QuestionBooleanModel {
     super.dispose();
   }
 }
-Serializer.overrideClassCreator("boolean", function() {
+Serializer.overrideClassCreator("boolean", function () {
   return new QuestionBoolean("");
 });
 

src/knockout/templates/question-boolean.html

@@ -6,8 +6,8 @@
         data-bind="value: question.booleanValue, css: question.cssClasses.control, attr: {name: question.name, id: question.inputId, 'role': question.a11y_input_ariaRole, 'aria-required': question.a11y_input_ariaRequired, 'aria-labelledby': question.a11y_input_ariaLabelledBy, 'aria-invalid': question.a11y_input_ariaInvalid, 'aria-describedby': question.a11y_input_ariaDescribedBy, 'aria-label': question.a11y_input_ariaLabel}, checked: question.booleanValue, surveyProp: {indeterminate: question.isIndeterminate}, enable: !question.isInputReadOnly"
       />
       <div data-bind="css: question.cssClasses.sliderGhost, click: onFalseLabelClick">
-        <span data-bind="css: question.getLabelCss(false)">
-          <!-- ko template: { name: 'survey-string', data: locLabelFalse } --><!-- /ko -->
+        <span data-bind="css: question.getLabelCss(swapOrder)">
+          <!-- ko template: { name: 'survey-string', data: locLabelLeft } --><!-- /ko -->
         </span>
       </div>
       <div data-bind="css: question.cssClasses.switch, click: onSwitchClick">
@@ -20,8 +20,8 @@
         </span>
       </div>
       <div data-bind="css: question.cssClasses.sliderGhost, click: onTrueLabelClick">
-        <span data-bind="css: question.getLabelCss(true)">
-          <!-- ko template: { name: 'survey-string', data: locLabelTrue } --><!-- /ko -->
+        <span data-bind="css: question.getLabelCss(!swapOrder)">
+          <!-- ko template: { name: 'survey-string', data: locLabelRight } --><!-- /ko -->
         </span>
       </div>
     </label>

src/question_boolean.ts

@@ -116,6 +116,14 @@ export class QuestionBooleanModel extends Question {
     return this.booleanValue !== null && this.booleanValue !== undefined;
   }
 
+  @property({ defaultValue: false }) swapOrder: boolean;
+  get locLabelLeft(): LocalizableString {
+    return this.swapOrder ? this.getLocalizableString("labelTrue") : this.getLocalizableString("labelFalse");
+  }
+  get locLabelRight(): LocalizableString {
+    return this.swapOrder ? this.getLocalizableString("labelFalse") : this.getLocalizableString("labelTrue");
+  }
+
   /**
    * Gets or sets a text label that corresponds to a negative answer.
    *
@@ -177,7 +185,9 @@ export class QuestionBooleanModel extends Question {
       .append(css.itemDisabled, this.isReadOnly)
       .append(css.itemHover, !this.isDesignMode)
       .append(css.itemChecked, !!this.booleanValue)
+      .append(css.itemExchanged, !!this.swapOrder)
       .append(css.itemIndeterminate, !this.isDeterminated)
+      .append(css.itemIndeterminate, )
       .toString();
   }
 
@@ -200,8 +210,8 @@ export class QuestionBooleanModel extends Question {
     return new CssClassBuilder()
       .append(this.cssClasses.label)
       .append(this.cssClasses.disabledLabel, this.booleanValue === !checked || this.isReadOnly)
-      .append(this.cssClasses.labelTrue, !this.isIndeterminate && checked === true)
-      .append(this.cssClasses.labelFalse, !this.isIndeterminate && checked === false)
+      .append(this.cssClasses.labelTrue, !this.isIndeterminate && checked === !this.swapOrder)
+      .append(this.cssClasses.labelFalse, !this.isIndeterminate && checked === this.swapOrder)
       .toString();
   }
 
@@ -309,6 +319,7 @@ Serializer.addClass(
     },
     "valueTrue",
     "valueFalse",
+    { name: "swapOrder", default: false, category: "general" },
     { name: "renderAs", default: "default", visible: false },
   ],
   function () {

src/react/boolean.tsx

@@ -80,23 +80,23 @@ export class SurveyQuestionBoolean extends SurveyQuestionElementBase {
             aria-invalid={this.question.a11y_input_ariaInvalid}
             aria-describedby={this.question.a11y_input_ariaDescribedBy}
           />
-          <div className={cssClasses.sliderGhost} onClick={(event) => this.handleOnLabelClick(event, false)}>
-            <span className={this.question.getLabelCss(false)}>
-              {this.renderLocString(this.question.locLabelFalse)}
+          <div className={cssClasses.sliderGhost} onClick={(event) => this.handleOnLabelClick(event, this.question.swapOrder)}>
+            <span className={this.question.getLabelCss(this.question.swapOrder)}>
+              {this.renderLocString(this.question.locLabelLeft)}
             </span>
           </div>
           <div className={cssClasses.switch} onClick={this.handleOnSwitchClick}>
             <span className={cssClasses.slider}>
               {
                 this.question.isDeterminated && cssClasses.sliderText ?
-                  <span className={cssClasses.sliderText}>{ this.renderLocString(this.question.getCheckedLabel()) }</span>
+                  <span className={cssClasses.sliderText}>{this.renderLocString(this.question.getCheckedLabel())}</span>
                   : null
               }
             </span>
           </div>
-          <div className={cssClasses.sliderGhost} onClick={(event) => this.handleOnLabelClick(event, true)}>
-            <span className={this.question.getLabelCss(true)}>
-              {this.renderLocString(this.question.locLabelTrue)}
+          <div className={cssClasses.sliderGhost} onClick={(event) => this.handleOnLabelClick(event, !this.question.swapOrder)}>
+            <span className={this.question.getLabelCss(!this.question.swapOrder)}>
+              {this.renderLocString(this.question.locLabelRight)}
             </span>
           </div>
         </label>

src/vue/boolean-switch.vue

@@ -19,11 +19,11 @@
       />
       <div
         :class="question.cssClasses.sliderGhost"
-        v-on:click="onLabelClick($event, false)"
+        v-on:click="onLabelClick($event, question.swapOrder)"
       >
       <span
-        :class="question.getLabelCss(false)"
-        ><survey-string :locString="question.locLabelFalse"></survey-string
+        :class="question.getLabelCss(question.swapOrder)"
+        ><survey-string :locString="question.locLabelLeft"></survey-string
       ></span>
       </div>
       <div
@@ -38,9 +38,9 @@
       </div>
       <div
         :class="question.cssClasses.sliderGhost"
-        v-on:click="onLabelClick($event, true)"
-      ><span :class="question.getLabelCss(true)"
-        ><survey-string :locString="question.locLabelTrue"></survey-string
+        v-on:click="onLabelClick($event, !question.swapOrder)"
+      ><span :class="question.getLabelCss(!question.swapOrder)"
+        ><survey-string :locString="question.locLabelRight"></survey-string
       ></span>
       </div>
     </label>

tests/questionBooleanTests.ts

@@ -1,6 +1,7 @@
 import { SurveyModel } from "../src/survey";
 
 import { QuestionBooleanModel } from "../src/question_boolean";
+import { defaultV2Css } from "../src/defaultCss/defaultV2Css";
 import { QuestionMatrixDynamicModel } from "../src/question_matrixdynamic";
 
 export default QUnit.module("boolean");
@@ -249,6 +250,26 @@ QUnit.test("Boolean shouldn't set booleanValue in design time", function (assert
   question.booleanValue = false;
   assert.equal(question.value, true);
 });
+QUnit.test("Boolean swapOrder", function (assert) {
+  const survey = new SurveyModel({});
+  const question = new QuestionBooleanModel("q1");
+  survey.css = defaultV2Css;
+  question.setSurveyImpl(survey);
+  assert.equal(question.swapOrder, false);
+  assert.equal(question.getItemCss(), "sd-boolean sd-boolean--allowhover sd-boolean--indeterminate");
+  assert.equal(question.getLabelCss(false), "sd-boolean__label");
+  assert.equal(question.getLabelCss(true), "sd-boolean__label");
+  assert.equal(question.locLabelLeft, question.locLabelFalse);
+  assert.equal(question.locLabelRight, question.locLabelTrue);
+
+  question.swapOrder = true;
+  assert.equal(question.swapOrder, true);
+  assert.equal(question.getItemCss(), "sd-boolean sd-boolean--allowhover sd-boolean--exchanged sd-boolean--indeterminate");
+  assert.equal(question.getLabelCss(false), "sd-boolean__label");
+  assert.equal(question.getLabelCss(true), "sd-boolean__label");
+  assert.equal(question.locLabelLeft, question.locLabelTrue);
+  assert.equal(question.locLabelRight, question.locLabelFalse);
+});
 QUnit.test("Boolean in matrix dynamic", function (assert) {
   var survey = new SurveyModel({
     elements: [

visualRegressionTests/tests/defaultV2/boolean.ts

@@ -1,3 +1,4 @@
+/* eslint-disable indent */
 import { Selector, ClientFunction } from "testcafe";
 import { url, frameworks, initSurvey, setOptions, url_test, takeElementScreenshot, wrapVisualTest, resetFocusToBody } from "../../helper";
 
@@ -16,8 +17,8 @@ const theme = "defaultV2";
 frameworks.forEach(framework => {
   fixture`${framework} ${title} ${theme}`
     .page`${url_test}${theme}/${framework}`.beforeEach(async t => {
-    await applyTheme(theme);
-  });
+      await applyTheme(theme);
+    });
 
   test("Check boolean question", async (t) => {
     await wrapVisualTest(t, async (t, comparer) => {
@@ -53,6 +54,41 @@ frameworks.forEach(framework => {
     });
   });
 
+  test("Check boolean question - interchange buttons", async (t) => {
+    await wrapVisualTest(t, async (t, comparer) => {
+      await t.resizeWindow(1600, 800);
+      await initSurvey(framework, {
+        questions: [
+          {
+            type: "boolean",
+            name: "boolean_question",
+            swapOrder: true
+          },
+        ]
+      });
+      const questionRoot = Selector(".sd-question--boolean");
+      await t.wait(1000);
+      await resetFocusToBody();
+      await takeElementScreenshot("boolean-question-exch-indeterminate.png", questionRoot, t, comparer);
+
+      await t.hover(".sd-boolean__thumb-ghost");
+      await takeElementScreenshot("boolean-question-exch-indeterminate-hovered.png", questionRoot, t, comparer);
+
+      await t.click(Selector(".sv-string-viewer").withText("No"));
+      await takeElementScreenshot("boolean-question-exch-clicked.png", questionRoot, t, comparer);
+
+      await t.hover(Selector(".sd-boolean__thumb-ghost").nth(1));
+      await takeElementScreenshot("boolean-question-exch-clicked-hovered.png", questionRoot, t, comparer);
+
+      await t.hover(".sd-boolean__thumb-ghost");
+      await setOptions("boolean_question", { readOnly: true });
+      await takeElementScreenshot("boolean-question-exch-clicked-disabled.png", questionRoot, t, comparer);
+
+      await setOptions("boolean_question", { value: null });
+      await takeElementScreenshot("boolean-question-exch-disabled.png", questionRoot, t, comparer);
+    });
+  });
+
   test("Check radio boolean question", async (t) => {
     await wrapVisualTest(t, async (t, comparer) => {
       await t.resizeWindow(1920, 1080);