diff --git a/package.json b/package.json index 95980b9..b67fdd6 100644 --- a/package.json +++ b/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", diff --git a/src/circular-text-predictor/circular-text-predictor.ts b/src/circular-text-predictor/circular-text-predictor.ts index de2c9ed..8c917e5 100644 --- a/src/circular-text-predictor/circular-text-predictor.ts +++ b/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``; + return html``; } render() { return html`
${this.widgetPayload?.question}
- o.description) ?? []} .value=${this.hasInteracted ? this.interactedValue : 0} - @change=${this.handleSliderChange} - .disabled=${this.isFollowupPublished || this.hasInteracted || this.isExpired} - .hasInteracted=${this.hasInteracted} - > + @change=${this.handleSliderChange} .disabled=${this.isFollowupPublished || this.hasInteracted || this.isExpired} + .hasInteracted=${this.hasInteracted}> `; } diff --git a/src/circular-text-predictor/components/circular-slider/circular-slider.ts b/src/circular-text-predictor/components/circular-slider/circular-slider.ts index 78b6809..a27c79a 100644 --- a/src/circular-text-predictor/components/circular-slider/circular-slider.ts +++ b/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` - - - + + - - + )}" stroke-width="15.175" stroke-linecap="round" /> + + ${this.getDisplayScoreValue(this.value, this.hasInteracted)} @@ -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; }; diff --git a/src/image-poll/image-poll.css b/src/image-poll/image-poll.css index 9b5cf52..424ef2e 100644 --- a/src/image-poll/image-poll.css +++ b/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,10 +80,8 @@ 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; @@ -88,20 +89,13 @@ image-poll 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; @@ -109,14 +103,17 @@ image-poll 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; +} \ No newline at end of file