#5659 Extract Rating items to separated component - better css and co…

…mponent integration Fixes #5659
surveyjs · Feb 15, 2023 · 8926f59 · 8926f59
1 parent c9fd115
commit 8926f59
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 8 deletions.
diff --git a/packages/survey-angular-ui/src/components/rating/rating-item.component.ts b/packages/survey-angular-ui/src/components/rating/rating-item.component.ts
@@ -4,7 +4,7 @@ import { BaseAngular } from "../../base-angular";
 import { AngularComponentFactory } from "../../component-factory";
 
 @Component({
-  selector: "sv-ng-rating-item, '[sv-ng-rating-item]'",
+  selector: "sv-ng-rating-item",
   templateUrl: "./rating-item.component.html",
   styleUrls: ["../../hide-host.scss"],
 })

diff --git a/packages/survey-angular-ui/src/questions/rating.component.html b/packages/survey-angular-ui/src/questions/rating.component.html
@@ -3,8 +3,7 @@
           <legend role="presentation" class="sv-hidden"></legend>
           <span *ngIf="model.hasMinLabel" [class]="model.cssClasses.minText" [model]="model.locMinRateDescription" sv-ng-string>
           </span>
-          <sv-ng-rating-item *ngFor="let item of model.renderedRateItems; index as index; trackBy: trackByFn" [model]="model" [item]="item" [index]="index">
-          </sv-ng-rating-item>
+          <ng-template *ngFor="let item of model.renderedRateItems; index as index; trackBy: trackByFn" [component]="{ name: 'sv-rating-item', data: {model: model, item: item, index: index }}"></ng-template>
           <span *ngIf="model.hasMaxLabel" [class]="model.cssClasses.maxText" [model]="model.locMaxRateDescription" sv-ng-string></span>
       </fieldset>
   </div>
diff --git a/src/defaultV2-theme/blocks/sd-rating.scss b/src/defaultV2-theme/blocks/sd-rating.scss
@@ -34,8 +34,7 @@
   font-size: calcSize(2);
 }
 
-legend+.sd-rating__item,
-legend+sv-ng-rating-item+.sd-rating__item {
+legend~.sd-rating__item:first-of-type {
   margin-inline-start: 2px;
 }
 

diff --git a/src/vue/rating.vue b/src/vue/rating.vue
@@ -6,13 +6,13 @@
           :class="question.cssClasses.minText">
           <survey-string :locString="question.locMinRateDescription" />
         </span>
-        <sv-rating-item
+        <component
           v-for="(item, index) in question.renderedRateItems"
+          :is="('sv-rating-item')"
           :item="item"
           :index="index"
           :question="question"
-        >
-        </sv-rating-item>
+        ></component>
         <span v-if="question.hasMaxLabel"
               :class="question.cssClasses.maxText"
         >