#8209 - rating

packages/survey-angular-ui/src/components/rating/rating-item-smiley.component.html

@@ -3,7 +3,7 @@
  <input type="radio"
  class="sv-visuallyhidden"
  [attr.name]="model.questionName" [attr.id]="model.getInputId(index)" [value]="item.value" [attr.aria-required]="model.ariaRequired" [attr.aria-label]="model.ariaLabel" [attr.aria-invalid]="model.ariaInvalid" [attr.aria-errormessage]="model.ariaErrormessage"
- [disabled]="model.isInputReadOnly" [checked]="model.value === item.value" (click)="onClick($event)"
+ [disabled]="model.isDisabledAttr" [readonly]="model.isReadOnlyAttr" [checked]="model.value === item.value" (click)="onClick($event)"
  />
  <svg [iconName]="model.getItemSmileyIconName(item.itemValue)" [size]="'auto'" [title]="item.text" sv-ng-svg-icon></svg>
  </label>

packages/survey-angular-ui/src/components/rating/rating-item-star.component.html

@@ -3,7 +3,7 @@
  <input type="radio"
  class="sv-visuallyhidden"
  [attr.name]="model.questionName" [attr.id]="model.getInputId(index)" [value]="item.value" [attr.aria-required]="model.ariaRequired" [attr.aria-label]="model.ariaLabel" [attr.aria-invalid]="model.ariaInvalid" [attr.aria-errormessage]="model.ariaErrormessage"
- [disabled]="model.isInputReadOnly" [checked]="model.value === item.value" (click)="onClick($event)"
+ [disabled]="model.isDisabledAttr" [readonly]="model.isReadOnlyAttr" [checked]="model.value === item.value" (click)="onClick($event)"
  />
  <svg [iconName]="model.itemStarIcon" [size]="'auto'" [title]="item.text" [class]="'sv-star'" sv-ng-svg-icon></svg>
  <svg [iconName]="model.itemStarIconAlt" [size]="'auto'" [title]="item.text" [class]="'sv-star-2'" sv-ng-svg-icon></svg>

packages/survey-angular-ui/src/components/rating/rating-item.component.html

@@ -3,7 +3,7 @@
  <input type="radio"
  class="sv-visuallyhidden"
  [attr.name]="model.questionName" [attr.id]="model.getInputId(index)" [value]="item.value" [attr.aria-required]="model.ariaRequired" [attr.aria-label]="model.ariaLabel" [attr.aria-invalid]="model.ariaInvalid" [attr.aria-errormessage]="model.ariaErrormessage"
- [disabled]="model.isInputReadOnly" [checked]="model.value === item.value" (click)="onClick($event)"
+ [disabled]="model.isDisabledAttr" [readonly]="model.isReadOnlyAttr" [checked]="model.value === item.value" (click)="onClick($event)"
  />
  <span [class]="model.cssClasses.itemText" [model]="item.locText" sv-ng-string></span>
  </label>

packages/survey-vue3-ui/src/components/rating/RatingItem.vue

@@ -10,7 +10,8 @@
  :name="question.questionName"
  :id="question.getInputId(index)"
  :value="item.value"
- :disabled="question.isInputReadOnly"
+ :disabled="question.isDisabledAttr"
+ :readonly="question.isReadOnlyAttr"
  @click="(e) => question.setValueFromClick((e.target as any).value)"
  :aria-required="question.ariaRequired"
  :aria-label="question.ariaLabel"

packages/survey-vue3-ui/src/components/rating/RatingItemSmiley.vue

@@ -13,7 +13,8 @@
  :name="question.questionName"
  :id="question.getInputId(index)"
  :value="item.value"
- :disabled="question.isInputReadOnly"
+ :disabled="question.isDisabledAttr"
+ :readonly="question.isReadOnlyAttr"
  @click="(e) => question.setValueFromClick(((e.target as any).value))"
  :aria-required="question.ariaRequired"
  :aria-label="question.ariaLabel"

packages/survey-vue3-ui/src/components/rating/RatingItemStar.vue

@@ -12,7 +12,8 @@
  :name="question.questionName"
  :id="question.getInputId(index)"
  :value="item.value"
- :disabled="question.isInputReadOnly"
+ :disabled="question.isDisabledAttr"
+ :readonly="question.isReadOnlyAttr"
  @click="(e) => question.setValueFromClick((e?.target as any).value)"
  :aria-required="question.ariaRequired"
  :aria-label="question.ariaLabel"

src/knockout/components/rating/rating-item-smiley.html

@@ -2,7 +2,7 @@
  <input
  type="radio"
  class="sv-visuallyhidden"
- data-bind="attr: { name: question.questionName, id: question.getInputId(index), value: item.value, 'aria-required': question.ariaRequired, 'aria-label': question.ariaLabel, 'aria-invalid': question.ariaInvalid, 'aria-errormessage': question.ariaErrormessage }, checkedValue: item.value, enable: !question.isInputReadOnly, event: { click: function(data, event) { question.setValueFromClick(event.target.value); return true; } }"
+ data-bind="attr: { name: question.questionName, id: question.getInputId(index), value: item.value, readonly: question.isReadOnlyAttr, 'aria-required': question.ariaRequired, 'aria-label': question.ariaLabel, 'aria-invalid': question.ariaInvalid, 'aria-errormessage': question.ariaErrormessage }, checkedValue: item.value, enable: !question.isDisabledAttr, event: { click: function(data, event) { question.setValueFromClick(event.target.value); return true; } }"
  />
  <!-- ko component: { name: 'sv-svg-icon', params: { iconName: question.getItemSmileyIconName(item.itemValue), size: 'auto', title: item.text } } --><!-- /ko -->
 </label>

src/knockout/components/rating/rating-item-star.html

@@ -2,7 +2,7 @@
  <input
  type="radio"
  class="sv-visuallyhidden"
- data-bind="attr: { name: question.questionName, id: question.getInputId(index), value: item.value, 'aria-required': question.ariaRequired, 'aria-label': question.ariaLabel, 'aria-invalid': question.ariaInvalid, 'aria-errormessage': question.ariaErrormessage }, checkedValue: item.value, enable: !question.isInputReadOnly, event: { click: function(data, event) { question.setValueFromClick(event.target.value); return true; } }"
+ data-bind="attr: { name: question.questionName, id: question.getInputId(index), value: item.value, readonly: question.isReadOnlyAttr, 'aria-required': question.ariaRequired, 'aria-label': question.ariaLabel, 'aria-invalid': question.ariaInvalid, 'aria-errormessage': question.ariaErrormessage }, checkedValue: item.value, enable: !question.isDisabledAttr, event: { click: function(data, event) { question.setValueFromClick(event.target.value); return true; } }"
  />
  <!-- ko component: { name: 'sv-svg-icon', params: { css: 'sv-star', iconName: question.itemStarIcon, size: 'auto', title: item.text } } --><!-- /ko -->
  <!-- ko component: { name: 'sv-svg-icon', params: { css: 'sv-star-2', iconName: question.itemStarIconAlt, size: 'auto', title: item.text } } --><!-- /ko -->

src/knockout/components/rating/rating-item.html

@@ -2,7 +2,7 @@
  <input
  type="radio"
  class="sv-visuallyhidden"
- data-bind="attr: { name: question.questionName, id: question.getInputId(index), value: item.value, 'aria-required': question.ariaRequired, 'aria-label': question.ariaLabel, 'aria-invalid': question.ariaInvalid, 'aria-errormessage': question.ariaErrormessage }, checkedValue: item.value, enable: !question.isInputReadOnly, event: { click: function(data, event) { question.setValueFromClick(event.target.value); return true; } }"
+ data-bind="attr: { name: question.questionName, id: question.getInputId(index), value: item.value, readonly: question.isReadOnlyAttr, 'aria-required': question.ariaRequired, 'aria-label': question.ariaLabel, 'aria-invalid': question.ariaInvalid, 'aria-errormessage': question.ariaErrormessage }, checkedValue: item.value, enable: !question.isDisabledAttr, event: { click: function(data, event) { question.setValueFromClick(event.target.value); return true; } }"
  />
  <span data-bind="css: question.cssClasses.itemText">
  <!-- ko template: { name: 'survey-string', data: item.locText } -->

src/react/components/rating/rating-item-smiley.tsx

@@ -21,7 +21,8 @@ export class RatingItemSmiley extends RatingItemBase {
  name={this.question.questionName}
  id={this.question.getInputId(this.index)}
  value={this.item.value}
- disabled={this.isDisplayMode}
+ disabled={this.question.isDisabledAttr}
+ readOnly={this.question.isReadOnlyAttr}
  checked={this.question.value == this.item.value}
  onClick={this.props.handleOnClick}
  onChange={() => { }}

src/react/components/rating/rating-item-star.tsx

@@ -20,7 +20,8 @@ export class RatingItemStar extends RatingItemBase {
  name={this.question.questionName}
  id={this.question.getInputId(this.index)}
  value={this.item.value}
- disabled={this.isDisplayMode}
+ disabled={this.question.isDisabledAttr}
+ readOnly={this.question.isReadOnlyAttr}
  checked={this.question.value == this.item.value}
  onClick={this.props.handleOnClick}
  onChange={() => { }}

src/react/components/rating/rating-item.tsx

@@ -44,7 +44,8 @@ export class RatingItem extends RatingItemBase {
  name={this.question.questionName}
  id={this.question.getInputId(this.index)}
  value={this.item.value}
- disabled={this.isDisplayMode}
+ disabled={this.question.isDisabledAttr}
+ readOnly={this.question.isReadOnlyAttr}
  checked={this.question.value == this.item.value}
  onClick={this.props.handleOnClick}
  onChange={() => { }}

src/vue/components/rating/rating-item-smiley.vue

@@ -2,7 +2,10 @@
  <label :key="item.value" @mousedown="question.onMouseDown()" :style="question.getItemStyle(item.itemValue, item.highlight)" :class="question.getItemClass(item.itemValue, item.highlight)" @mouseover="(e) => question.onItemMouseIn(item)"
  @mouseleave="(e) => question.onItemMouseOut(item)">
  <input type="radio" class="sv-visuallyhidden" :name="question.questionName" :id="question.getInputId(index)"
- :value="item.value" :disabled="question.isInputReadOnly" @click="(e) => question.setValueFromClick(e.target.value)"
+ :value="item.value"
+ :disabled="question.isDisabledAttr"
+ :readonly="question.isReadOnlyAttr"
+ @click="(e) => question.setValueFromClick(e.target.value)"
  :aria-required="question.ariaRequired" :aria-label="question.ariaLabel" :aria-invalid="question.ariaInvalid"
  :aria-errormessage="question.ariaErrormessage" />
  <sv-svg-icon :iconName="question.getItemSmileyIconName(item.itemValue)" :size="'auto'"

src/vue/components/rating/rating-item-star.vue

@@ -3,7 +3,10 @@
  @mouseover="(e) => question.onItemMouseIn(item)"
  @mouseleave="(e) => question.onItemMouseOut(item)">
  <input type="radio" class="sv-visuallyhidden" :name="question.questionName" :id="question.getInputId(index)"
- :value="item.value" :disabled="question.isInputReadOnly" @click="(e) => question.setValueFromClick(e.target.value)"
+ :value="item.value"
+ :disabled="question.isDisabledAttr"
+ :readonly="question.isReadOnlyAttr"
+ @click="(e) => question.setValueFromClick(e.target.value)"
  :aria-required="question.ariaRequired" :aria-label="question.ariaLabel" :aria-invalid="question.ariaInvalid"
  :aria-errormessage="question.ariaErrormessage" />
  <sv-svg-icon :class="'sv-star'" :iconName="question.itemStarIcon" :size="'auto'" :title="item.text"></sv-svg-icon>

src/vue/components/rating/rating-item.vue

@@ -1,7 +1,9 @@
 <template>
  <label :key="item.value" @mousedown="question.onMouseDown()" :class="question.getItemClassByText(item.itemValue, item.text)">
  <input type="radio" class="sv-visuallyhidden" :name="question.questionName" :id="question.getInputId(index)"
- :value="item.value" :disabled="question.isInputReadOnly"
+ :value="item.value"
+ :disabled="question.isDisabledAttr"
+ :readonly="question.isReadOnlyAttr"
  @click="(e) => question.setValueFromClick(e.target.value)" :aria-required="question.ariaRequired"
  :aria-label="question.ariaLabel" :aria-invalid="question.ariaInvalid"
  :aria-errormessage="question.ariaErrormessage" />

tests/markup/etalon_rating.ts

@@ -1,4 +1,4 @@
-import { StylesManager, DropdownListModel } from "survey-core";
+import { StylesManager, DropdownListModel, settings } from "survey-core";
 import { registerMarkupTests } from "./helper";
 
 registerMarkupTests(
@@ -18,7 +18,41 @@ registerMarkupTests(
  snapshot: "rating-simple",
  },
  {
- name: "Test Rating question min/max labels",
+ name: "Test Rating question integers readonly",
+ json: {
+ questions: [
+ {
+ name: "name",
+ type: "rating",
+ title: "Question title",
+ readOnly: "true",
+ rateMax: 4,
+ titleLocation: "hidden"
+ }
+ ]
+ },
+ snapshot: "rating-simple-readonly",
+ },
+ {
+ name: "Test Rating question integers disabled",
+ json: {
+ questions: [
+ {
+ name: "name",
+ type: "rating",
+ title: "Question title",
+ rateMax: 4,
+ titleLocation: "hidden"
+ }
+ ]
+ },
+ initSurvey: (survey) => survey.setDesignMode(true),
+ before: () => { settings.supportCreatorV2 = true; StylesManager.applyTheme("defaultV2"); },
+ after: () => { settings.supportCreatorV2 = false; StylesManager.applyTheme("default"); },
+ snapshot: "rating-simple-disabled",
+ },
+ {
+ name: "Test Rating question min/max labels disabled",
  json: {
  questions: [
  {
@@ -109,6 +143,26 @@ registerMarkupTests(
  after: () => StylesManager.applyTheme("default"),
  snapshot: "rating-as-dropdown-readonly-with-value",
  },
+ {
+ name: "Test Rating question as dropdown disabled with value",
+ json: {
+ questions: [
+ {
+ name: "name",
+ type: "rating",
+ defaultValue: 3,
+ title: "Question title",
+ titleLocation: "hidden",
+ renderAs: "dropdown",
+ rateMax: 4,
+ }
+ ]
+ },
+ initSurvey: (survey) => survey.setDesignMode(true),
+ before: () => { settings.supportCreatorV2 = true; StylesManager.applyTheme("defaultV2"); },
+ after: () => { settings.supportCreatorV2 = false; StylesManager.applyTheme("default"); },
+ snapshot: "rating-as-dropdown-disabled-with-value",
+ },
  {
  name: "Test Rating question as dropdown with value focused",
  json: {
@@ -169,6 +223,42 @@ registerMarkupTests(
  },
  snapshot: "rating-stars",
  },
+ {
+ name: "Test Rating question as stars readonly",
+ json: {
+ questions: [
+ {
+ name: "name",
+ type: "rating",
+ title: "Question title",
+ titleLocation: "hidden",
+ readonly: "true",
+ rateType: "stars",
+ rateMax: 2,
+ }
+ ]
+ },
+ snapshot: "rating-stars-readonly",
+ },
+ {
+ name: "Test Rating question as stars disabled",
+ json: {
+ questions: [
+ {
+ name: "name",
+ type: "rating",
+ title: "Question title",
+ titleLocation: "hidden",
+ rateType: "stars",
+ rateMax: 2,
+ }
+ ]
+ },
+ snapshot: "rating-stars-disabled",
+ initSurvey: (survey) => survey.setDesignMode(true),
+ before: () => { settings.supportCreatorV2 = true; },
+ after: () => { settings.supportCreatorV2 = false; },
+ },
  {
  name: "Test Rating question as smileys",
  json: {
@@ -185,6 +275,42 @@ registerMarkupTests(
  },
  snapshot: "rating-smileys",
  },
+ {
+ name: "Test Rating question as smileys readonly",
+ json: {
+ questions: [
+ {
+ name: "name",
+ type: "rating",
+ title: "Question title",
+ titleLocation: "hidden",
+ readOnly: true,
+ rateType: "smileys",
+ rateMax: 2,
+ }
+ ]
+ },
+ snapshot: "rating-smileys-readonly",
+ },
+ {
+ name: "Test Rating question as smileys disabled",
+ json: {
+ questions: [
+ {
+ name: "name",
+ type: "rating",
+ title: "Question title",
+ titleLocation: "hidden",
+ rateType: "smileys",
+ rateMax: 2,
+ }
+ ]
+ },
+ initSurvey: (survey) => survey.setDesignMode(true),
+ before: () => { settings.supportCreatorV2 = true; },
+ after: () => { settings.supportCreatorV2 = false; },
+ snapshot: "rating-smileys-disabled",
+ },
  {
  name: "Test Rating question display mode",
  json: {

tests/markup/snapshots/rating-as-dropdown-disabled-with-value.snap.html

@@ -0,0 +1,35 @@
+<div class="sd-scrollable-container sd-scrollable-container--compact sd-selectbase">
+ <div class="sv-dropdown_select-wrapper">
+ <div aria-controls="testid0i_list" aria-expanded="false" aria-invalid="false" aria-label="Question title" aria-required="false" class="sd-dropdown sd-input" disabled="" id="testid0i" role="textbox">
+ <div class="sd-dropdown__value">
+ <span class="sv-string-editor" contenteditable="true">3</span>
+ <input aria-controls="testid0i_list" aria-expanded="false" aria-label="Question title" autocomplete="off" class="sd-dropdown__filter-string-input" disabled="" id="testid0i_undefined" inputmode="text" placeholder="" readonly="" type="text">
+ </div>
+ </div>
+ <div>
+ <div class="sv-dropdown-popup sv-popup sv-popup--dropdown sv-single-select-list" style="display:none;" tabindex="-1">
+ <div class="sv-popup__container">
+ <div class="sv-popup__shadow">
+ <div class="sv-popup__body-content">
+ <div class="sv-popup__scrolling-content">
+ <div class="sv-popup__content">
+ <div class="sd-list sv-list__container">
+ <div class="sv-list__empty-container" style="display:none;">
+ <div aria-label="No data to display" class="sv-list__empty-text">No data to display</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div aria-hidden="true" class="sd-dropdown_chevron-button">
+ <svg class="sd-dropdown_chevron-button-svg sv-svg-icon" role="img">
+ <use xlink:href="#icon-chevron" class="">
+ </use>
+ </svg>
+ </div>
+ </div>
+</div>

tests/markup/snapshots/rating-display-mode.snap.html

@@ -3,25 +3,25 @@
  <legend class="sv-hidden" role="presentation">
  </legend>
  <label class="sv_q_rating_item sv_q_rating_item_fixed">
- <input aria-invalid="false" aria-label="Question title" aria-required="false" class="sv-visuallyhidden" disabled="" id="testid0i_0" name="name_testid0" type="radio" value="1">
+ <input aria-invalid="false" aria-label="Question title" aria-required="false" class="sv-visuallyhidden" id="testid0i_0" name="name_testid0" readonly="" type="radio" value="1">
  <span class="sv_q_rating_item_text">
  <span class="sv-string-viewer">1</span>
  </span>
  </label>
  <label class="sv_q_rating_item sv_q_rating_item_fixed">
- <input aria-invalid="false" aria-label="Question title" aria-required="false" class="sv-visuallyhidden" disabled="" id="testid0i_1" name="name_testid0" type="radio" value="2">
+ <input aria-invalid="false" aria-label="Question title" aria-required="false" class="sv-visuallyhidden" id="testid0i_1" name="name_testid0" readonly="" type="radio" value="2">
  <span class="sv_q_rating_item_text">
  <span class="sv-string-viewer">2</span>
  </span>
  </label>
  <label class="sv_q_rating_item sv_q_rating_item_fixed">
- <input aria-invalid="false" aria-label="Question title" aria-required="false" class="sv-visuallyhidden" disabled="" id="testid0i_2" name="name_testid0" type="radio" value="3">
+ <input aria-invalid="false" aria-label="Question title" aria-required="false" class="sv-visuallyhidden" id="testid0i_2" name="name_testid0" readonly="" type="radio" value="3">
  <span class="sv_q_rating_item_text">
  <span class="sv-string-viewer">3</span>
  </span>
  </label>
  <label class="sv_q_rating_item sv_q_rating_item_fixed">
- <input aria-invalid="false" aria-label="Question title" aria-required="false" class="sv-visuallyhidden" disabled="" id="testid0i_3" name="name_testid0" type="radio" value="4">
+ <input aria-invalid="false" aria-label="Question title" aria-required="false" class="sv-visuallyhidden" id="testid0i_3" name="name_testid0" readonly="" type="radio" value="4">
  <span class="sv_q_rating_item_text">
  <span class="sv-string-viewer">4</span>
  </span>