fix: circular slider plus added

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livelike/custom-widgets",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "main": "dist/livelike.umd.cjs",
   "module": "dist/livelike.es.js",
   "types": "dist/index.d.ts",

src/circular-text-predictor/circular-text-predictor.ts

@@ -52,7 +52,7 @@ export class CircularPredictor extends LitElement {
       if (this.hasInteracted) {
         this.isUserCorrect =
           res[this.widgetPayload.kind][0].is_correct === true;
-        this.interactedValue = Number(
+        this.interactedValue = parseInt(
           this.widgetPayload.options.find(
             (obj: any) => obj.id === res[this.widgetPayload.kind][0].option_id
           )?.description
@@ -71,8 +71,8 @@ export class CircularPredictor extends LitElement {
   }
 
   setWidgetRange() {
-    const option1 = Number(this.widgetPayload.options[0].description);
-    const option2 = Number(this.widgetPayload.options[1].description);
+    const option1 = parseInt(this.widgetPayload.options[0].description);
+    const option2 = parseInt(this.widgetPayload.options[1].description);
     const optionLength = this.widgetPayload.options.length;
     const step = option2 - option1;
     this.range = {
@@ -88,7 +88,7 @@ export class CircularPredictor extends LitElement {
 
   handleSubmitButtonClicked = async () => {
     const selectedOptionItem = this.widgetPayload.options.find(
-      (obj: any) => Number(obj.description) === this.widgetValue
+      (obj: any) => parseInt(obj.description) === this.widgetValue
     );
     try {
       //@ts-ignore
@@ -125,23 +125,18 @@ export class CircularPredictor extends LitElement {
   }
 
   renderFooterButton(label: string, disabled: boolean) {
-    return html`<button
-      class="predictor-footer-buton ${disabled ? "disabled" : ""}"
-      @click=${!disabled ? this.handleSubmitButtonClicked : undefined}
-    >
-      ${label}
-    </button>`;
+    return html`<button class="predictor-footer-buton ${disabled ? " disabled" : ""}" @click=${!disabled ?
+      this.handleSubmitButtonClicked : undefined}>
+  ${label}
+</button>`;
   }
   render() {
     return html`
       <div class="title-container">${this.widgetPayload?.question}</div>
-      <sa-circular-slider
-        .range=${this.range}
+      <sa-circular-slider .range=${this.range} .labels=${this.widgetPayload?.options?.map((o: any)=> o.description) ?? []}
         .value=${this.hasInteracted ? this.interactedValue : 0}
-        @change=${this.handleSliderChange}
-        .disabled=${this.isFollowupPublished || this.hasInteracted || this.isExpired}
-        .hasInteracted=${this.hasInteracted}
-      ></sa-circular-slider>
+        @change=${this.handleSliderChange} .disabled=${this.isFollowupPublished || this.hasInteracted || this.isExpired}
+        .hasInteracted=${this.hasInteracted}></sa-circular-slider>
       <div class="widget-footer">${this.renderWidgetText()}</div>
     `;
   }

src/circular-text-predictor/components/circular-slider/circular-slider.ts

@@ -11,6 +11,7 @@ export class CircularSlider extends LitElement {
     step: number;
   } = { min: 0, max: 10, step: 1 };
   @property({ type: Number }) value = 0;
+  @property({ type: Array }) labels: string[] = [];
   @property() disabled: boolean = false;
   @state() hasInteracted: boolean = false;
 
@@ -49,48 +50,20 @@ export class CircularSlider extends LitElement {
     const [x, y] = this.angleToCoordinates(angle || 0);
 
     return html`
-      <svg
-        width="197"
-        height="197"
-        @mousedown="${!this.disabled && this.onMouseDown}"
-        @touchstart="${!this.disabled && this.onTouchStart}"
-      >
-        <circle
-          class="slider-background"
-          style="stroke: #F8F4F1"
-          cx="${this.center}"
-          cy="${this.center}"
-          r="${this.radius}"
-          stroke-width="15.175"
-        />
-        <path
-          class="slider-progress"
-          style="stroke: #00E8DA;"
-          d="${this.describeArc(
+      <svg width="197" height="197" @mousedown="${!this.disabled && this.onMouseDown}"
+        @touchstart="${!this.disabled && this.onTouchStart}">
+        <circle class="slider-background" style="stroke: #F8F4F1" cx="${this.center}" cy="${this.center}" r="${this.radius}"
+          stroke-width="15.175" />
+        <path class="slider-progress" style="stroke: #00E8DA;" d="${this.describeArc(
             this.center,
             this.center,
             this.radius,
             1,
             angle || 1
-          )}"
-          stroke-width="15.175"
-          stroke-linecap="round"
-        />
-        <circle
-          class="slider-handle"
-          style="fill: #225696;"
-          cx="${x}"
-          cy="${y}"
-          r="15"
-        />
-        <text
-          class="slider-value"
-          style="fill: #02235C;"
-          x="${this.center}"
-          y="${this.center}"
-          text-anchor="middle"
-          dominant-baseline="central"
-        >
+          )}" stroke-width="15.175" stroke-linecap="round" />
+        <circle class="slider-handle" style="fill: #225696;" cx="${x}" cy="${y}" r="15" />
+        <text class="slider-value" style="fill: #02235C;" x="${this.center}" y="${this.center}" text-anchor="middle"
+          dominant-baseline="central">
           ${this.getDisplayScoreValue(this.value, this.hasInteracted)}
         </text>
       </svg>
@@ -180,6 +153,10 @@ export class CircularSlider extends LitElement {
     if (!hasInteracted) {
       return "-";
     }
+    const index = Math.round((value - this.range.min) / this.range.step);
+    if (this.labels.length > 0 && index >= 0 && index < this.labels.length) {
+      return this.labels[index];
+    }
     return value;
   };
 

src/image-poll/image-poll.css

@@ -2,6 +2,7 @@ image-poll {
   background: var(--white);
   border-radius: 16px;
 }
+
 image-poll livelike-widget-root {
   margin-bottom: 0;
 }
@@ -40,6 +41,7 @@ image-poll livelike-select {
   border: 0;
   color: var(--black);
 }
+
 image-poll livelike-select[disabled] {
   border: none;
 }
@@ -62,6 +64,7 @@ image-poll livelike-option {
   gap: 10px;
   flex-direction: row;
 }
+
 image-poll livelike-option[selected] {
   border-radius: 8px;
   border: 2px solid var(--brand-blue);
@@ -77,46 +80,40 @@ image-poll livelike-option .livelike-voting-image-container {
   row-gap: 2px;
   flex-direction: row;
 }
-image-poll
-  livelike-option
-  .livelike-voting-image-container
-  livelike-description {
+
+image-poll livelike-option .livelike-voting-image-container livelike-description {
   font-size: 14px;
   color: var(--brand-title-color);
   font-style: normal;
   font-weight: 600;
   line-height: normal;
   padding: 0;
 }
-image-poll
-  livelike-option
-  .livelike-voting-image-container
-  livelike-description[selected],
-image-poll
-  livelike-option
-  .livelike-voting-image-container
-  livelike-percentage[selected] {
+
+image-poll livelike-option .livelike-voting-image-container livelike-description[selected],
+image-poll livelike-option .livelike-voting-image-container livelike-percentage[selected] {
   opacity: 1;
 }
-image-poll
-  livelike-option
-  .livelike-voting-image-container
-  livelike-percentage {
+
+image-poll livelike-option .livelike-voting-image-container livelike-percentage {
   font-style: normal;
   color: var(--black);
   font-size: 16px;
   font-weight: 400;
   line-height: normal;
   padding: 0;
 }
+
 image-poll livelike-option livelike-image img {
   height: 50px;
   width: 50px;
 }
+
 image-poll livelike-option[disabled] .livelike-voting-image-container {
   align-items: center;
   margin-bottom: 0;
 }
+
 image-poll livelike-option .livelike-voting-image-container {
   color: var(--brand-game-center-text);
   font-size: 14px;
@@ -168,6 +165,7 @@ image-poll livelike-footer .widget-button {
   opacity: 0.5;
   cursor: not-allowed;
 }
+
 image-poll livelike-footer .widget-button:disabled {
   background: var(--brand-button-gradient);
   color: var(--white);
@@ -201,7 +199,7 @@ image-poll livelike-footer .widget-button[notInteractedExpire] {
   font-size: 20px;
   font-style: normal;
   font-weight: 700;
-  line-height: 110%; /* 22px */
+  line-height: 110%;
   text-transform: uppercase;
   opacity: 1;
 }
@@ -218,3 +216,7 @@ image-poll livelike-title {
   width: 93%;
   background: var(--white);
 }
+
+image-poll .livelike-voting-image-container {
+  justify-content: space-between;
+}