@product7/feedback-sdk 1.7.6 → 1.7.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -7354,11 +7354,11 @@
7354
7354
  title: this.surveyOptions.title || '',
7355
7355
  description: cesPrompt,
7356
7356
  html: `
7357
- <div class="feedback-survey-ces">
7357
+ <div class="feedback-survey-ces-list">
7358
7358
  ${['Very Difficult', 'Difficult', 'Neutral', 'Easy', 'Very Easy']
7359
7359
  .map(
7360
7360
  (label, i) => `
7361
- <button class="feedback-survey-ces-btn" data-score="${i + 1}">${label}</button>
7361
+ <button class="feedback-survey-ces-btn feedback-survey-ces-list-btn" data-score="${i + 1}">${label}</button>
7362
7362
  `
7363
7363
  )
7364
7364
  .join('')}
@@ -7579,12 +7579,12 @@
7579
7579
  if (ratingType === 'ces') {
7580
7580
  const cesLabels = ['Very Difficult', 'Difficult', 'Neutral', 'Easy', 'Very Easy'];
7581
7581
  return `
7582
- <div class="feedback-survey-ces" data-page-id="${pageId}">
7582
+ <div class="feedback-survey-ces-list" data-page-id="${pageId}">
7583
7583
  ${cesLabels
7584
7584
  .map((label, i) => {
7585
7585
  const score = i + 1;
7586
7586
  const selected = currentRating === score ? ' selected' : '';
7587
- return `<button class="feedback-survey-page-rating-btn feedback-survey-ces-btn${selected}" data-page-id="${pageId}" data-score="${score}">${label}</button>`;
7587
+ return `<button class="feedback-survey-page-rating-btn feedback-survey-ces-list-btn${selected}" data-page-id="${pageId}" data-score="${score}">${label}</button>`;
7588
7588
  })
7589
7589
  .join('')}
7590
7590
  </div>
@@ -12882,6 +12882,38 @@
12882
12882
  color: var(--color-white);
12883
12883
  }
12884
12884
 
12885
+ .feedback-survey-ces-list {
12886
+ display: flex;
12887
+ flex-direction: column;
12888
+ gap: var(--spacing-2);
12889
+ }
12890
+
12891
+ .feedback-survey-ces-list-btn {
12892
+ width: 100%;
12893
+ padding: var(--spacing-3) var(--spacing-4);
12894
+ border: 1px solid var(--color-border);
12895
+ border-radius: var(--radius-md);
12896
+ background: var(--color-surface);
12897
+ cursor: pointer;
12898
+ font-size: var(--font-size-base);
12899
+ font-weight: var(--font-weight-medium);
12900
+ color: var(--color-text-primary);
12901
+ transition: all var(--transition-fast);
12902
+ font-family: inherit;
12903
+ text-align: left;
12904
+ }
12905
+
12906
+ .feedback-survey-ces-list-btn:hover {
12907
+ background: var(--color-neutral-100);
12908
+ border-color: var(--color-border);
12909
+ }
12910
+
12911
+ .feedback-survey-ces-list-btn.selected {
12912
+ background: var(--color-primary);
12913
+ border-color: var(--color-primary);
12914
+ color: var(--color-white);
12915
+ }
12916
+
12885
12917
  .feedback-survey-rating-scale {
12886
12918
  display: flex;
12887
12919
  gap: 0;