@cognior/iap-sdk 0.1.0

package/src/styles/survey.css.ts

@@ -0,0 +1,1013 @@
+// src/styles/survey.css.ts
+// Styles for the survey component
+
+export const surveyCssText = `
+/* Survey specific styles */
+.dap-modal-wrap {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(15, 23, 42, 0.6); /* Improved overlay color */
+  z-index: 2147483647;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: auto;
+  padding: 24px; /* Better padding */
+  box-sizing: border-box;
+  width: 100vw;
+  height: 100vh;
+  margin: 0;
+  animation: fadeIn 0.3s ease-out;
+  backdrop-filter: blur(4px); /* Enhanced blur effect */
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes slideUp {
+  from { opacity: 0; transform: translate(-50%, -40%); }
+  to { opacity: 1; transform: translate(-50%, -50%); }
+}
+
+.dap-survey-modal {
+  position: absolute;
+  max-width: 680px;
+  max-height: 85vh;
+  width: 92%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  background: white;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  border-radius: 12px;
+  z-index: 2147483648;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: #333;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  animation: slideUp 0.35s ease-out;
+}
+
+/* Content-adaptive sizing for survey modals */
+.dap-survey-modal.dap-size-small {
+  max-width: min(92vw, 450px);
+  max-height: min(85vh, 500px);
+}
+
+.dap-survey-modal.dap-size-medium {
+  max-width: min(92vw, 680px);
+  max-height: min(85vh, 650px);
+}
+
+.dap-survey-modal.dap-size-large {
+  max-width: min(92vw, 950px);
+  max-height: min(85vh, 800px);
+}
+
+/* Improved scrollable handling */
+.dap-survey-modal.dap-scrollable .dap-survey-body {
+  overflow-y: auto;
+  overflow-x: auto;
+}
+
+.dap-survey-modal .dap-survey-body {
+  overflow: visible; /* Default: no scroll unless needed */
+}
+
+.dap-survey-body {
+  max-height: calc(85vh - 140px);
+  overflow: visible; /* Let adaptive sizing handle overflow */
+  padding: 32px;
+  flex: 1;
+}
+
+.dap-survey-content {
+  display: flex;
+  flex-direction: column;
+  gap: 24px; /* Increased gap for better spacing */
+  width: 100%;
+}
+
+/* Two column layout for larger screens */
+@media (min-width: 650px) {
+  .dap-survey-content {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 24px; /* Consistent gap in grid layout */
+  }
+  
+  /* Certain question types should still span full width */
+  .dap-survey-question.dap-full-width {
+    grid-column: 1 / -1;
+  }
+}
+
+.dap-header-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px 24px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+  background-color: #fff;
+  border-top-left-radius: 12px;
+  border-top-right-radius: 12px;
+}
+
+.dap-modal-header {
+  margin: 0;
+  font-size: 22px;
+  font-weight: 600;
+  color: #111;
+}
+
+/* Progress bar similar to React version */
+.dap-progress-container {
+  height: 4px;
+  width: 100%;
+  background-color: #f0f2f5;
+  border-radius: 2px;
+  overflow: hidden;
+  margin-top: 12px;
+}
+
+.dap-progress-bar {
+  height: 100%;
+  background-color: #4361ee;
+  transition: width 0.3s ease;
+}
+
+.dap-progress-text {
+  font-size: 12px;
+  color: #666;
+  text-align: right;
+  margin-top: 4px;
+}
+
+.dap-close {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px;
+  color: #666;
+  font-size: 22px;
+  line-height: 1;
+  border-radius: 9999px;
+  transition: background-color 0.2s ease, color 0.2s ease;
+}
+
+.dap-close:hover {
+  background-color: rgba(0, 0, 0, 0.05);
+  color: #333;
+}
+
+.dap-close:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px rgba(67, 97, 238, 0.2);
+}
+  border-radius: 50%;
+  transition: all 0.2s;
+  width: 32px;
+  height: 32px;
+}
+
+.dap-close:hover {
+  background-color: rgba(0, 0, 0, 0.05);
+  color: #333;
+}
+
+.dap-survey-intro {
+  margin: 0;
+  padding: 24px 24px 0;
+  line-height: 1.5;
+  color: #555;
+  font-size: 15px;
+}
+
+.dap-survey-form {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  width: 100%;
+  padding: 20px 24px 24px;
+}
+
+.dap-survey-error {
+  background-color: #fff0f0;
+  color: #e53935;
+  padding: 12px 16px;
+  border-radius: 8px;
+  margin-bottom: 16px;
+  font-weight: 500;
+  font-size: 14px;
+  border-left: 3px solid #e53935;
+}
+
+.dap-survey-question {
+  padding: 20px;
+  width: 100%;
+  border: 1px solid #eaeef2;
+  border-radius: 12px;
+  margin-bottom: 16px;
+  background-color: white;
+  transition: box-shadow 0.2s ease, border-color 0.2s ease;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+}
+
+.dap-survey-question:hover {
+  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
+  border-color: #dbe1e8;
+}
+
+.dap-survey-question:last-child {
+  margin-bottom: 0;
+}
+
+.dap-question-label {
+  display: block;
+  font-weight: 600;
+  margin-bottom: 14px;
+  color: #222;
+  font-size: 16px;
+  line-height: 1.4;
+}
+
+.dap-question-input {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  width: 100%;
+}
+
+/* Radio and Checkbox */
+.dap-radio-wrapper,
+.dap-checkbox-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin: 4px 0;
+  padding: 10px 14px;
+  border-radius: 6px;
+  transition: all 0.2s ease;
+  border: 1px solid #eaeef2;
+  background-color: #fafbfd;
+}
+
+.dap-radio-wrapper:hover,
+.dap-checkbox-wrapper:hover {
+  background-color: #f0f4f8;
+  border-color: #dbe1e8;
+  transform: translateY(-1px);
+}
+
+.dap-radio-wrapper input,
+.dap-checkbox-wrapper input {
+  margin: 0;
+  width: 18px;
+  height: 18px;
+  accent-color: #4361ee;
+}
+
+.dap-radio-wrapper label,
+.dap-checkbox-wrapper label {
+  cursor: pointer;
+  font-size: 15px;
+  color: #333;
+  flex: 1;
+  font-weight: 500;
+}
+
+/* Text inputs */
+.dap-question-input input[type="text"],
+.dap-question-input textarea,
+.dap-question-input select {
+  padding: 12px 14px;
+  border: 1px solid #e2e8f0;
+  border-radius: 6px;
+  font-family: inherit;
+  font-size: 15px;
+  width: 100%;
+  box-sizing: border-box;
+  transition: all 0.2s ease;
+  background-color: white;
+  color: #333;
+  line-height: 1.5;
+}
+
+.dap-question-input input[type="text"]:focus,
+.dap-question-input textarea:focus,
+.dap-question-input select:focus {
+  outline: none;
+  border-color: #4361ee;
+  box-shadow: 0 0 0 2px rgba(67, 97, 238, 0.15);
+}
+
+.dap-question-input textarea {
+  min-height: 120px;
+  resize: vertical;
+  line-height: 1.6;
+}
+}
+
+.dap-question-input textarea {
+  resize: vertical;
+  min-height: 90px;
+  line-height: 1.5;
+}
+
+/* Opinion Scale */
+.dap-scale-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: 12px;
+}
+
+.dap-scale-options {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.dap-scale-option {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+}
+
+.dap-scale-option input {
+  margin: 0;
+  width: 18px;
+  height: 18px;
+  accent-color: #4361ee;
+}
+
+.dap-scale-option label {
+  font-size: 14px;
+  text-align: center;
+  font-weight: 500;
+}
+
+.dap-scale-label {
+  font-size: 14px;
+  color: #555;
+  max-width: 120px;
+  font-weight: 500;
+}
+
+.dap-scale-option input {
+  margin: 0;
+  width: 18px;
+  height: 18px;
+  accent-color: #4361ee;
+}
+
+.dap-scale-option label {
+  font-size: 14px;
+  text-align: center;
+  font-weight: 500;
+}
+
+.dap-scale-label {
+  font-size: 14px;
+  color: #555;
+  max-width: 120px;
+  font-weight: 500;
+}
+
+/* Opinion Scale Choice (Face Scale) */
+.dap-scale-faces {
+  display: flex;
+  justify-content: space-between;
+  gap: 10px;
+  width: 100%;
+  margin-top: 12px;
+}
+
+.dap-face-option {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}
+
+.dap-face-radio {
+  display: none;
+}
+
+.dap-face-label {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  font-size: 28px;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  background-color: #f0f4f8;
+  border: 2px solid transparent;
+}
+
+.dap-face-radio:checked + .dap-face-label {
+  background-color: #e0e7ff;
+  border-color: #4361ee;
+  transform: scale(1.1);
+}
+
+.dap-face-label:hover {
+  background-color: #e0e7ff;
+  transform: translateY(-2px);
+}
+
+/* NPS Scale */
+.dap-nps-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: 12px;
+}
+
+.dap-nps-scale {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.dap-nps-option {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+}
+
+.dap-nps-option input {
+  margin: 0;
+  width: 18px;
+  height: 18px;
+  accent-color: #4361ee;
+}
+
+.dap-nps-option label {
+  font-size: 14px;
+  text-align: center;
+  font-weight: 500;
+  cursor: pointer;
+  transition: color 0.2s ease;
+}
+
+.dap-nps-labels {
+  display: flex;
+  justify-content: space-between;
+  font-size: 14px;
+  color: #555;
+  width: 100%;
+  margin-top: 4px;
+  font-weight: 500;
+}
+
+.dap-nps-label-min {
+  text-align: left;
+}
+
+.dap-nps-label-max {
+  text-align: right;
+}
+
+/* NPS Options */
+.dap-nps-options {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  width: 100%;
+}
+
+.dap-nps-category {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 14px;
+  background-color: #f7f9fc;
+  border-radius: 8px;
+  border: 1px solid #e2e8f0;
+  transition: all 0.2s ease;
+}
+
+.dap-nps-category:hover {
+  background-color: #edf2fc;
+  transform: translateY(-2px);
+}
+
+.dap-nps-category input {
+  accent-color: #4361ee;
+  width: 18px;
+  height: 18px;
+}
+
+.dap-nps-category label {
+  font-weight: 500;
+  font-size: 15px;
+  cursor: pointer;
+}
+
+/* Star Rating */
+.dap-star-container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 4px 0;
+  transition: all 0.2s ease;
+  background: transparent;
+  border: none;
+}
+
+/* Star Rating Styles */
+.dap-rating-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.dap-star-rating {
+  display: inline-flex;
+  direction: rtl; /* This reverses the order for the hover effect */
+  unicode-bidi: bidi-override;
+  justify-content: center;
+  gap: 0;
+  margin: 5px 0;
+}
+
+/* Clear button */
+.dap-clear-rating {
+  font-size: 13px;
+  background: transparent;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  padding: 4px 8px;
+  color: #555;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: inline-flex;
+  align-items: center;
+  height: fit-content;
+}
+
+.dap-clear-rating:hover {
+  background-color: #f5f5f5;
+  border-color: #ccc;
+  color: #333;
+}
+
+/* Rating text only used in StarChoice */
+.dap-rating-text {
+  font-size: 14px;
+  color: #777;
+  margin-top: 8px;
+  text-align: center;
+  min-height: 20px;
+}
+
+.dap-rating-selected {
+  font-weight: 500;
+  color: #4361ee;
+}
+
+/* Hide radio buttons */
+.dap-star-input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+/* Star labels */
+.dap-star-label {
+  font-size: 30px;
+  color: #e0e0e0;
+  cursor: pointer;
+  display: inline-block;
+  transition: color 0.15s ease;
+  padding: 0 2px;
+}
+
+/* Create star shape */
+.dap-star-label::before {
+  content: "★";
+  display: block;
+}
+
+/* Unselected color */
+.dap-star-rating .dap-star-label {
+  color: #e0e0e0;
+}
+
+/* Hover effect */
+.dap-star-label:hover,
+.dap-star-label:hover ~ .dap-star-label,
+.dap-star-input:checked ~ .dap-star-label {
+  color: #ffc107;
+}
+
+/* Selected stars */
+.dap-star-input:checked ~ .dap-star-label {
+  color: #ffc107;
+}
+
+/* When focusing on stars */
+.dap-star-input:focus + .dap-star-label {
+  outline: 1px dotted #4361ee;
+  outline-offset: 2px;
+}
+
+/* Focused star for accessibility */
+.dap-star:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px rgba(66, 153, 225, 0.5);
+  border-radius: 50%;
+}
+
+/* Star Choice Component */
+.dap-star-ratings-container {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  width: 100%;
+}
+
+.dap-criterion-card {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 0;
+  background-color: transparent;
+  border: none;
+  border-radius: 0;
+  transition: all 0.2s ease;
+}
+
+.dap-criterion-card:hover {
+  transform: none;
+  box-shadow: none;
+}
+
+.dap-criterion-label {
+  font-weight: 500;
+  color: #333;
+  font-size: 16px;
+  margin-bottom: 2px;
+}
+
+/* Tables for multi-rating questions */
+.dap-scale-table,
+.dap-star-table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  margin-top: 12px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.dap-scale-table th,
+.dap-scale-table td,
+.dap-star-table th,
+.dap-star-table td {
+  padding: 12px 10px;
+  text-align: center;
+  vertical-align: middle;
+  border-bottom: 1px solid #eee;
+}
+
+.dap-scale-table tr:last-child td,
+.dap-star-table tr:last-child td {
+  border-bottom: none;
+}
+
+.dap-scale-table th,
+.dap-star-table th {
+  background-color: #f7f9fc;
+  color: #444;
+  font-weight: 600;
+  font-size: 14px;
+  text-transform: none;
+}
+
+.dap-scale-table td:first-child,
+.dap-star-table td:first-child {
+  text-align: left;
+  font-weight: 500;
+  color: #333;
+  padding-left: 16px;
+}
+
+.dap-option-name,
+.dap-criterion-name {
+  text-align: left !important;
+  font-weight: normal;
+  min-width: 120px;
+}
+
+.dap-scale-min-label {
+  text-align: left !important;
+  font-size: 13px;
+  color: #666;
+}
+
+.dap-scale-max-label {
+  text-align: right !important;
+  font-size: 13px;
+  color: #666;
+}
+
+.dap-scale-labels td {
+  padding-top: 0 !important;
+}
+
+/* Footer buttons */
+.dap-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  padding: 16px 24px;
+  border-top: 1px solid rgba(0, 0, 0, 0.08);
+  background-color: #fafbfc;
+  border-bottom-left-radius: var(--dap-radius, 8px);
+  border-bottom-right-radius: var(--dap-radius, 8px);
+  width: 100%;
+  box-sizing: border-box;
+  margin: 0;
+}
+
+.dap-footer button {
+  padding: 10px 20px;
+  border-radius: 6px;
+  font-size: 15px;
+  cursor: pointer;
+  font-weight: 600;
+  transition: all 0.2s ease;
+  outline: none;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+.dap-footer .dap-cta {
+  background-color: #4361ee;
+  color: white;
+  border: none;
+}
+
+.dap-footer .dap-secondary {
+  background-color: transparent;
+  color: #555;
+  border: 1px solid #ddd;
+}
+
+.dap-footer .dap-cta:hover {
+  background-color: #3a56d4;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 8px rgba(67, 97, 238, 0.15);
+}
+
+.dap-footer .dap-secondary:hover {
+  background-color: #f0f2f5;
+  border-color: #ccc;
+}
+
+/* Responsive adjustments */
+@media (max-width: 720px) {
+  .dap-survey-modal {
+    max-width: 95%;
+  }
+}
+
+@media (max-width: 480px) {
+  .dap-survey-modal {
+    width: 100%;
+    max-width: 95%;
+    max-height: 95vh;
+    margin: 0 auto;
+    border-radius: 12px;
+  }
+  
+  .dap-survey-body {
+    padding: 16px;
+    max-height: calc(95vh - 110px);
+  }
+  
+  .dap-header-bar {
+    padding: 14px 16px;
+  }
+  
+  .dap-footer {
+    padding: 14px 16px;
+  }
+  
+  .dap-survey-title {
+    font-size: 18px;
+  }
+  
+  .dap-question-label {
+    font-size: 15px;
+  }
+  
+  .dap-radio-wrapper,
+  .dap-checkbox-wrapper {
+    padding: 8px;
+  }
+  
+  .dap-scale-table,
+  .dap-star-table {
+    font-size: 13px;
+  }
+  
+  .dap-scale-option label,
+  .dap-nps-option label {
+    font-size: 12px;
+  }
+  
+  .dap-star {
+    font-size: 28px;
+  }
+  
+  .dap-footer button {
+    padding: 9px 16px;
+    font-size: 14px;
+    width: 100%;
+  }
+  
+  .dap-footer {
+    flex-direction: column-reverse;
+    gap: 8px;
+  }
+  
+  .dap-text-input, 
+  .dap-textarea {
+    font-size: 15px;
+  }
+  
+  /* Star rating responsive adjustments */
+  .dap-star-label {
+    font-size: 28px;
+  }
+  
+  .dap-criterion-card {
+    padding: 12px;
+  }
+}
+
+/* Additional star choice styles */
+.dap-criterion-card .dap-star-rating {
+  margin: 8px 0;
+}
+
+.dap-criterion-card .dap-rating-text {
+  text-align: left;
+  margin-left: 4px;
+  color: #555;
+  font-style: italic;
+  font-size: 13px;
+  min-height: 20px;
+}
+
+.dap-criterion-card .dap-rating-selected {
+  color: #4361ee;
+  font-weight: 500;
+  font-style: normal;
+}
+
+/* Adjust for survey question spacing */
+.dap-question-input .dap-star-rating {
+  padding: 5px 0;
+  margin: 5px 0;
+}
+
+/* Style for criterion cards */
+.dap-criterion-card {
+  margin-bottom: 10px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #eee;
+}
+
+.dap-criterion-card:last-child {
+  border-bottom: none;
+}
+
+/* Make clear button smaller for criterion cards */
+.dap-criterion-card .dap-clear-rating {
+  font-size: 12px;
+  padding: 3px 6px;
+}
+
+/* Enhanced Star Choice Styles */
+.dap-star-choice-container {
+  display: flex;
+  flex-direction: column;
+  padding: 10px 0;
+}
+
+
+
+/* Star Choice Specific Styles */
+.dap-star-choice-container {
+  padding: 8px 0;
+}
+
+.dap-star-choice-options {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.dap-star-choice-option {
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+
+.dap-star-choice-input {
+  margin: 0;
+  margin-right: 8px;
+}
+
+.dap-star-choice-label {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  gap: 8px;
+}
+
+.dap-star-choice-stars {
+  display: flex;
+  align-items: center;
+}
+
+.dap-star-choice-star {
+  color: #e0e0e0;
+  font-size: 20px;
+  line-height: 1;
+}
+
+.dap-star-choice-star.filled {
+  color: #ffc107;
+}
+
+.dap-star-choice-text {
+  font-size: 14px;
+  color: #333;
+  margin-left: 4px;
+}
+
+/* Hover effect for the star choice options */
+.dap-star-choice-option:hover .dap-star-choice-label {
+  font-weight: 500;
+}
+
+/* Selected state */
+.dap-star-choice-input:checked + .dap-star-choice-label .dap-star-choice-text {
+  font-weight: 500;
+}
+
+/* Accessible focus style */
+.dap-star-choice-input:focus {
+  outline: 2px solid #4361ee;
+  outline-offset: 2px;
+}
+
+/* Focus states for keyboard navigation */
+.dap-star-choice-container .dap-star-input:focus + .dap-star-label {
+  outline: 2px solid #4361ee;
+  outline-offset: 2px;
+}
+
+/* Mobile-friendly adjustments */
+@media (max-width: 768px) {
+  .dap-star-choice-star {
+    font-size: 18px;
+  }
+  
+  .dap-star-choice-text {
+    font-size: 13px;
+  }
+}
+
+/* Small mobile devices */
+@media (max-width: 480px) {
+  .dap-star-choice-option {
+    margin-bottom: 4px;
+  }
+  
+  .dap-star-choice-star {
+    font-size: 16px;
+  }
+}
+`;