Missing minRateDescription and maxRateDescription (#7412)

* work for #5409 Missing minRateDescription and maxRateDescription

* work for #5409 Missing minRateDescription and maxRateDescription

* work for #5409 Missing minRateDescription and maxRateDescription

* work for #5409 Missing minRateDescription and maxRateDescription

---------

Co-authored-by: LARINA-NB-W10\OlgaLarina <olga.larina.dev@gmail.com>

packages/survey-angular-ui/src/angular-ui.module.ts

@@ -50,6 +50,7 @@ import { RatingItemComponent } from "./components/rating/rating-item.component";
 import { RatingItemStarComponent } from "./components/rating/rating-item-star.component";
 import { RatingItemSmileyComponent } from "./components/rating/rating-item-smiley.component";
 import { RowComponent } from "./row.component";
+import { RatingDropdownItemComponent } from "./components/renderAs/rating-dropdown/rating-dropdown-item.component";
 import { RatingDropdownComponent } from "./components/renderAs/rating-dropdown/rating-dropdown.component";
 import { BooleanCheckboxComponent } from "./components/renderAs/boolean-checkbox/boolean-checkbox.component";
 import { BooleanRadioComponent } from "./components/renderAs/boolean-radio/boolean-radio.component";
@@ -129,7 +130,7 @@ import { FilePreviewComponent } from "./components/file/file-preview.component";
     TagboxFilterComponent, TagboxComponent, TagboxQuestionComponent, TagboxItemComponent,
     ActionBarComponent, ActionComponent, ActionBarItemComponent, ActionBarItemDropdownComponent, HtmlQuestionComponent,
     SelectBaseItemComponent, SelectBaseComponent, SurveyCommentComponent, SurveyCommentOtherComponent, ElementHeaderComponent, ElementTitleActionsComponent, ElementTitleComponent, DynamicHeadComponent, RowComponent,
-    RatingQuestionComponent, RatingDropdownComponent, BooleanQuestionComponent, BooleanCheckboxComponent, BooleanRadioComponent, BooleanRadioItemComponent, ImagePickerItemComponent, ImagePickerQuestionComponent, ImageQuestionComponent,
+    RatingQuestionComponent, RatingDropdownItemComponent, RatingDropdownComponent, BooleanQuestionComponent, BooleanCheckboxComponent, BooleanRadioComponent, BooleanRadioItemComponent, ImagePickerItemComponent, ImagePickerQuestionComponent, ImageQuestionComponent,
     SurveyHeaderComponent, ProgressDefaultComponent, ProgressButtonsComponent, ProgressTocComponent, SurveyNavigationButton, MatrixQuestionComponent, SvgIconComponent, FileQuestionComponent, SafeUrlPipe, SafeHtmlPipe, CommentQuestionComponent, SignaturePadQuestionComponent, ErrorsComponent,
     MultipleTextComponent, MultipleTextItemComponent, DynamicComponentDirective, RankingQuestionComponent, RankingItemComponent, PanelDynamicQuestionComponent, EmbeddedViewContentComponent, CustomWidgetComponent, MatrixCellComponent, MatrixTableComponent, MatrixDropdownComponent,
     MatrixDynamicComponent, MatrixDetailButtonComponent, MatrixDynamicRemoveButtonComponent, MatrixDynamicDragDropIconComponent, MatrixRequiredHeader, ExpressionComponent, SafeResourceUrlPipe, BrandInfoComponent,
@@ -150,7 +151,7 @@ import { FilePreviewComponent } from "./components/file/file-preview.component";
     TagboxFilterComponent, TagboxComponent, TagboxQuestionComponent, TagboxItemComponent,
     ActionBarComponent, ActionComponent, ActionBarItemComponent, ActionBarItemDropdownComponent, HtmlQuestionComponent,
     SelectBaseItemComponent, SelectBaseComponent, SurveyCommentComponent, SurveyCommentOtherComponent, ElementHeaderComponent, ElementTitleComponent, DynamicHeadComponent, RowComponent,
-    RatingQuestionComponent, RatingDropdownComponent, BooleanQuestionComponent, BooleanCheckboxComponent, BooleanRadioComponent, BooleanRadioItemComponent, ImagePickerItemComponent, ImagePickerQuestionComponent, ImageQuestionComponent,
+    RatingQuestionComponent, RatingDropdownItemComponent, RatingDropdownComponent, BooleanQuestionComponent, BooleanCheckboxComponent, BooleanRadioComponent, BooleanRadioItemComponent, ImagePickerItemComponent, ImagePickerQuestionComponent, ImageQuestionComponent,
     SurveyHeaderComponent, ProgressDefaultComponent, ProgressButtonsComponent, SurveyNavigationButton, MatrixQuestionComponent, SvgIconComponent, FileQuestionComponent, SafeUrlPipe, SafeHtmlPipe, CommentQuestionComponent, SignaturePadQuestionComponent, ErrorsComponent,
     MultipleTextComponent, MultipleTextItemComponent, DynamicComponentDirective, RankingQuestionComponent, RankingItemComponent, PanelDynamicQuestionComponent, EmbeddedViewContentComponent, CustomWidgetComponent, MatrixCellComponent, MatrixTableComponent, MatrixDropdownComponent,
     MatrixDynamicComponent, MatrixDetailButtonComponent, MatrixDynamicRemoveButtonComponent, MatrixDynamicDragDropIconComponent, MatrixRequiredHeader, ExpressionComponent, SafeResourceUrlPipe,

packages/survey-angular-ui/src/angular-ui.ts

@@ -54,6 +54,7 @@ export * from "./components/rating/rating-item.component";
 export * from "./components/rating/rating-item-star.component";
 export * from "./components/rating/rating-item-smiley.component";
 export * from "./row.component";
+export * from "./components/renderAs/rating-dropdown/rating-dropdown-item.component";
 export * from "./components/renderAs/rating-dropdown/rating-dropdown.component";
 export * from "./components/renderAs/boolean-checkbox/boolean-checkbox.component";
 export * from "./components/renderAs/boolean-radio/boolean-radio.component";

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

@@ -0,0 +1,10 @@
+<ng-template #template>
+  <div class="sd-rating-dropdown-item">
+    <span class="sd-rating-dropdown-item_text">{{model.title}}</span>
+    <ng-container *ngIf="!!model.description">
+    <div class="sd-rating-dropdown-item_description">
+      <sv-ng-string [model]="model.description"></sv-ng-string>
+    </div>
+    </ng-container>
+  </div>
+</ng-template>

packages/survey-angular-ui/src/components/renderAs/rating-dropdown/rating-dropdown-item.component.ts

@@ -0,0 +1,20 @@
+import { Component, Input } from "@angular/core";
+import { BaseAngular } from "../../../base-angular";
+import { AngularComponentFactory } from "../../../component-factory";
+
+@Component({
+  selector: "sv-ng-rating-dropdown-item, '[sv-ng-rating-dropdown-item]'",
+  templateUrl: "./rating-dropdown-item.component.html",
+  styleUrls: ["../../../hide-host.scss"],
+})
+
+export class RatingDropdownItemComponent extends BaseAngular {
+  @Input() element: any;
+  @Input() model!: any;
+
+  getModel() {
+    return this.model;
+  }
+}
+
+AngularComponentFactory.Instance.registerComponent("sv-rating-dropdown-item", RatingDropdownItemComponent);

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

@@ -0,0 +1,16 @@
+<template>
+  <div class="sd-rating-dropdown-item">
+    <span class="sd-rating-dropdown-item_text">{{ item.title }}</span>
+    <div v-if="!!item.description" class="sd-rating-dropdown-item_description">
+      <survey-string :locString="item.description" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useBase } from "@/base";
+
+const props = defineProps<{ item: any }>();
+
+useBase(() => props.item);
+</script>

packages/survey-vue3-ui/src/index.ts

@@ -36,6 +36,7 @@ import Rating from "./Rating.vue";
 import RatingItem from "./components/rating/RatingItem.vue";
 import RatingItemSmiley from "./components/rating/RatingItemSmiley.vue";
 import RatingItemStar from "./components/rating/RatingItemStar.vue";
+import RatingDropdownItem from "./components/rating/RatingDropdownItem.vue";
 import RatingDropdown from "./RatingDropdown.vue";
 import BooleanSwitch from "./BooleanSwitch.vue";
 import BooleanRadio from "./BooleanRadio.vue";
@@ -179,6 +180,7 @@ function registerComponents(app: App) {
   app.component("sv-rating-item-smiley", RatingItemSmiley);
   app.component("sv-rating-item-star", RatingItemStar);
   app.component("sv-rating-dropdown", RatingDropdown);
+  app.component("sv-rating-dropdown-item", RatingDropdownItem);
   app.component("survey-boolean", BooleanSwitch);
   app.component("sv-boolean-radio", BooleanRadio);
   app.component("sv-boolean-radio-item", BooleanRadioItem);

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

@@ -358,4 +358,24 @@ legend+sv-ng-rating-item+.sd-rating__item-smiley {
 .sd-rating__item--selected .sd-rating__item-text.sd-rating__item-text {
   color: $primary-foreground;
   font-weight: inherit;
-}
+}
+
+.sd-rating-dropdown-item {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+  gap: calcSize(4);
+}
+
+.sd-rating-dropdown-item_description {
+  color: $foreground-light;
+  font-family: $font-family;
+  font-style: normal;
+  font-weight: normal;
+  font-size: calcFontSize(0.75);
+  line-height: calcLineHeight(1);
+}
+.sv-list__item.sv-list__item--selected .sd-rating-dropdown-item_description {
+  color: $primary-foreground;
+}

src/entries/react-ui-model.ts

@@ -34,6 +34,7 @@ export {
 export { RatingItem } from "../react/components/rating/rating-item";
 export { RatingItemStar } from "../react/components/rating/rating-item-star";
 export { RatingItemSmiley } from "../react/components/rating/rating-item-smiley";
+export { RatingDropdownItem } from "../react/components/rating/rating-dropdown-item";
 
 export { TagboxFilterString } from "../react/tagbox-filter";
 export { SurveyQuestionOptionItem } from "../react/dropdown-item";

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

@@ -0,0 +1,9 @@
+<div class="sd-rating-dropdown-item">
+  <span class="sd-rating-dropdown-item_text" data-bind="text: item.title"></span>
+  <!-- ko if: !!item.description -->
+  <div class="sd-rating-dropdown-item_description">
+    <!-- ko template: { name: 'survey-string', data: item.description } -->
+    <!-- /ko -->
+  </div>
+  <!-- /ko -->
+</div>

src/knockout/components/rating-dropdown/rating-dropdown-item.ts

@@ -0,0 +1,19 @@
+import * as ko from "knockout";
+import { ImplementorBase } from "../../kobase";
+
+const template = require("./rating-dropdown-item.html");
+
+export var RatingItemViewComponent: any;
+
+ko.components.register("sv-rating-dropdown-item", {
+  viewModel: {
+    createViewModel: (params: any, componentInfo: any) => {
+      new ImplementorBase(params.item);
+      return {
+        item: params.item,
+        description: params.item.description
+      };
+    },
+  },
+  template: template,
+});

src/knockout/components/rating-dropdown/rating-dropdown.ts

@@ -3,6 +3,8 @@ import { RendererFactory } from "survey-core";
 
 const template = require("./rating-dropdown.html");
 
+export * from "./rating-dropdown-item";
+
 export var RatingDropdownViewModel: any;
 
 ko.components.register("sv-rating-dropdown", {

src/question_rating.ts

@@ -35,6 +35,12 @@ export class RenderedRatingItem extends Base {
   }
 }
 
+class RatingItemValue extends ItemValue {
+  constructor(value: any, public description: LocalizableString) {
+    super(value);
+  }
+}
+
 /**
  * A class that describes the Rating Scale question type.
  *
@@ -337,20 +343,7 @@ export class QuestionRatingModel extends Question {
       rateValues = this.rateValues;
     }
     else {
-      var res = [];
-      var value = this.rateMin;
-      var step = this.rateStep;
-      while (
-        value <= this.rateMax &&
-        res.length < settings.ratingMaximumRateValueCount
-      ) {
-        let item = new ItemValue(value);
-        item.locOwner = this;
-        item.ownerPropertyName = "rateValues";
-        res.push(item);
-        value = this.correctValue(value + step, step);
-      }
-      rateValues = res;
+      rateValues = this.createRateValues();
     }
 
     if (this.rateType == "smileys" && rateValues.length > 10) rateValues = rateValues.slice(0, 10);
@@ -367,6 +360,29 @@ export class QuestionRatingModel extends Question {
   }
   @propertyArray() renderedRateItems: Array<RenderedRatingItem>;
 
+  private createRateValues() {
+    var res = [];
+    var value = this.rateMin;
+    var step = this.rateStep;
+    while (value <= this.rateMax &&
+      res.length < settings.ratingMaximumRateValueCount) {
+      let description: LocalizableString;
+      if (value === this.rateMin) {
+        description = this.minRateDescription && this.locMinRateDescription;
+      }
+      if (value === this.rateMax || res.length === settings.ratingMaximumRateValueCount) {
+        description = this.maxRateDescription && this.locMaxRateDescription;
+      }
+
+      let item = new RatingItemValue(value, description);
+      item.locOwner = this;
+      item.ownerPropertyName = "rateValues";
+      res.push(item);
+      value = this.correctValue(value + step, step);
+    }
+    return res;
+  }
+
   private correctValue(value: number, step: number): number {
     if (!value) return value;
     if (Math.round(value) == value) return value;
@@ -532,7 +548,7 @@ export class QuestionRatingModel extends Question {
     return this.rateType == "smileys";
   }
   getDefaultItemComponent(): string {
-    if (this.renderAs == "dropdown") return "";
+    if (this.renderAs == "dropdown") return "sv-rating-dropdown-item";
     if (this.isStar) return "sv-rating-item-star";
     if (this.isSmiley) return "sv-rating-item-smiley";
     return "sv-rating-item";

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

@@ -0,0 +1,41 @@
+import React from "react";
+import { ReactElementFactory } from "../../element-factory";
+import { SurveyElementBase } from "../../reactquestion_element";
+
+interface IRatingItemProps {
+  item: any;
+}
+
+export class RatingDropdownItem extends SurveyElementBase<IRatingItemProps, any> {
+  get item(): any {
+    return this.props.item;
+  }
+  getStateElement() {
+    return this.item;
+  }
+  render(): JSX.Element | null {
+    if (!this.item) return null;
+    const item = this.props.item;
+    const description = this.renderDescription(item);
+
+    return (
+      <div className="sd-rating-dropdown-item">
+        <span className="sd-rating-dropdown-item_text">{item.title}</span>
+        {description}
+      </div>
+    );
+  }
+  renderDescription(item: any) {
+    if(!item.description) return null;
+
+    return (
+      <div className="sd-rating-dropdown-item_description">
+        {this.renderLocString(item.description, undefined, "locString")}
+      </div>
+    );
+  }
+}
+
+ReactElementFactory.Instance.registerElement("sv-rating-dropdown-item", (props) => {
+  return React.createElement(RatingDropdownItem, props);
+});

src/react/rating-dropdown.tsx

@@ -3,6 +3,8 @@ import { QuestionRatingModel, RendererFactory } from "survey-core";
 import { SurveyQuestionDropdownBase } from "./dropdown-base";
 import { ReactQuestionFactory } from "./reactquestion_factory";
 
+export * from "./components/rating/rating-dropdown-item";
+
 export class SurveyQuestionRatingDropdown extends SurveyQuestionDropdownBase<QuestionRatingModel> {
   constructor(props: any) {
     super(props);

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

@@ -0,0 +1,29 @@
+<template>
+<div class="sd-rating-dropdown-item">
+    <span class="sd-rating-dropdown-item_text">{{ item.title }}</span>
+    <div v-if="!!item.description" class="sd-rating-dropdown-item_description">
+      <survey-string :locString="item.description" />
+    </div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from "vue";
+import { Component, Prop } from "vue-property-decorator";
+import { BaseVue } from "../../base";
+
+@Component
+export class RatingItem extends BaseVue {
+  @Prop() item: any;
+  
+  constructor() {
+    super();
+  }
+  getModel() {
+    return this.item;
+  }
+}
+
+Vue.component("sv-rating-dropdown-item", RatingItem);
+export default RatingItem;
+</script>

src/vue/rating-dropdown.vue

@@ -10,6 +10,8 @@ import { Component, Prop } from "vue-property-decorator";
 import { default as QuestionVue } from "./question";
 import { QuestionRatingModel, RendererFactory } from "survey-core";
 
+export * from "./components/rating/rating-dropdown-item.vue";
+
 @Component
 export class RatingDropdown extends QuestionVue<QuestionRatingModel> {
 }

tests/question_ratingtests.ts

@@ -1469,7 +1469,7 @@ QUnit.test("rating items custom component", (assert) => {
   assert.equal(q1.itemComponent, "sv-rating-item");
 
   q1.renderAs = "dropdown";
-  assert.equal(q1.itemComponent, "");
+  assert.equal(q1.itemComponent, "sv-rating-dropdown-item");
 
   var json2 = {
     questions: [

visualRegressionTests/tests/defaultV2/rating.ts

@@ -133,6 +133,11 @@ frameworks.forEach(framework => {
       const questionRoot = Selector(".sd-question");
       await resetFocusToBody();
       await takeElementScreenshot("question-rating-dropdown.png", questionRoot, t, comparer);
+
+      const questionDropdownSelect = Selector(".sd-input.sd-dropdown");
+      const popupContainer = Selector(".sv-popup__container").filterVisible();
+      await t.click(questionDropdownSelect);
+      await takeElementScreenshot("question-rating-dropdown-popup.png", popupContainer, t, comparer);
     });
   });