@eric-emg/symphiq-components 1.2.375 → 1.2.377

package/fesm2022/symphiq-components.mjs

@@ -89074,172 +89074,172 @@ class ShopProfileQuestionAnswerComponent {
                         ])
                     ])
                 ],
-                template: `
-    <div class="flex flex-col h-full">
-      <!-- Scrollable Content -->
-      <div #scrollContainer class="flex-1 overflow-y-auto">
-        <!-- Unanswered Questions Status -->
-        <div [ngClass]="statusHeaderClasses()" class="px-6 py-4 border-b">
-          <h4 [ngClass]="statusTitleClasses()" class="text-sm font-semibold mb-3">
-            Unanswered questions status
-          </h4>
-          <div class="flex items-center gap-3">
-            <div class="flex-1">
-              <div [ngClass]="progressBarContainerClasses()" class="h-2 rounded-full overflow-hidden">
-                <div
-                  [ngClass]="progressBarFillClasses()"
-                  class="h-full transition-all duration-500 ease-out rounded-full"
-                  [style.width.%]="progressPercentage()"></div>
-              </div>
-            </div>
-            <div [ngClass]="progressTextClasses()" class="text-sm font-medium whitespace-nowrap">
-              {{ answeredCount() }} / {{ totalCount() }} answered
-            </div>
-          </div>
-        </div>
-
-        <!-- Sentinel for intersection observer -->
-        <div #stickySentinel class="h-0"></div>
-
-        <!-- Sticky Question Header -->
-        <div #stickyHeader [ngClass]="stickyHeaderClasses()" class="sticky top-0 z-10 px-6 py-4 transition-all duration-200">
-          <!-- Breadcrumb - hide for All Questions mode -->
-          @if (viewType() !== 'all') {
-            <div [ngClass]="breadcrumbClasses()" class="text-sm italic mb-2">
-              Shop > {{ breadcrumbPath() }}
-            </div>
-          }
-
-          <!-- Question - animates from text-2xl to text-lg when sticky -->
-          <h2 #questionTitle [ngClass]="questionTextClasses()" class="font-bold text-2xl [&.is-sticky]:text-lg transition-all duration-200">
-            {{ question().question }}
-          </h2>
-        </div>
-
-        <!-- Context and Focus Areas - scroll under sticky header -->
-        <div class="px-6">
-          <!-- Context -->
-          @if (question().context) {
-            <p [ngClass]="contextTextClasses()" class="text-sm leading-relaxed mt-3">
-              {{ question().context }}
-            </p>
-          }
-
-          <!-- Related Focus Areas -->
-          @if (relatedFocusAreas().length > 0) {
-            <div class="mt-4">
-              <div class="flex items-center gap-2 mb-2">
-                <span [ngClass]="relatedLabelClasses()" class="text-xs font-semibold">
-                  Related to {{ relatedFocusAreas().length }} focus area(s)
-                </span>
-                <svg class="w-4 h-4" [ngClass]="relatedLabelClasses()" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-                </svg>
-              </div>
-              <div class="flex flex-wrap gap-2">
-                @for (focusArea of relatedFocusAreas(); track focusArea) {
-                  <span [ngClass]="focusAreaChipClasses()" class="px-3 py-1.5 rounded-full text-xs font-medium">
-                    {{ getFocusAreaTitle(focusArea) }}
-                  </span>
-                }
-              </div>
-            </div>
-          }
-        </div>
-
-        <div class="px-6 py-6">
-
-        <!-- Answer Options -->
-        <div class="space-y-3 mb-4">
-          @for (option of answerOptions(); track option.tempId) {
-            <label
-              [ngClass]="checkboxRowClasses()"
-              class="flex items-start gap-3 p-4 rounded-lg cursor-pointer transition-all duration-200 hover:scale-[1.01]">
-              <input
-                type="checkbox"
-                [checked]="option.isSelected"
-                (change)="toggleAnswer(option.text)"
-                [ngClass]="checkboxClasses()"
-                class="mt-0.5 w-5 h-5 rounded border-2 cursor-pointer transition-all duration-200 focus:ring-2 focus:ring-offset-2" />
-              <span [ngClass]="checkboxLabelClasses()" class="text-base flex-1">
-                {{ option.text }}
-              </span>
-            </label>
-          }
-        </div>
-
-        <!-- Add Other Answers -->
-        <div class="mb-6">
-          <div
-            class="grid transition-[grid-template-rows] duration-300 ease-in-out"
-            [style.grid-template-rows]="addOtherAnswersExpanded() ? '1fr' : '0fr'">
-            <div class="overflow-hidden min-h-0">
-              <div class="pb-4">
-                <textarea
-                  [(ngModel)]="customAnswerText"
-                  [ngClass]="textareaClasses()"
-                  class="w-full px-4 py-3 rounded-lg border-2 text-sm resize-y transition-colors duration-200 focus:ring-2 focus:ring-offset-2"
-                  rows="5"
-                  placeholder="Enter your answer(s) here, separated by returns."></textarea>
-                <div class="flex items-center gap-3 mt-3">
-                  <button
-                    type="button"
-                    (click)="cancelCustomAnswers()"
-                    [ngClass]="cancelButtonClasses()"
-                    class="px-5 py-2.5 rounded-lg font-medium text-sm transition-all duration-200 hover:scale-105 active:scale-95">
-                    Cancel
-                  </button>
-                  <button
-                    type="button"
-                    (click)="addCustomAnswers()"
-                    [disabled]="!canAddCustomAnswers()"
-                    [ngClass]="addButtonClasses()"
-                    class="flex-1 px-5 py-2.5 rounded-lg font-medium text-sm transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100">
-                    Add
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          @if (!addOtherAnswersExpanded()) {
-            <button
-              type="button"
-              (click)="toggleAddOtherAnswers()"
-              [ngClass]="addOtherAnswersButtonClasses()"
-              class="w-full px-5 py-3 rounded-lg font-medium text-sm transition-all duration-200 border-2 hover:scale-[1.01] active:scale-[0.99]">
-              Add other answers
-            </button>
-          }
-        </div>
-        </div>
-      </div>
-
-      <!-- Sticky Footer -->
-      <div [ngClass]="footerClasses()" class="px-6 py-4 border-t sticky bottom-0 z-10">
-        <div class="flex items-center gap-4">
-          <button
-            type="button"
-            (click)="onSave()"
-            [disabled]="saveButtonsDisabled()"
-            [ngClass]="saveButtonClasses()"
-            class="px-5 py-2.5 rounded-lg font-medium text-sm transition-all duration-200 border disabled:opacity-50 disabled:cursor-not-allowed hover:scale-[1.02] active:scale-95 disabled:hover:scale-100">
-            Save
-          </button>
-          <button
-            type="button"
-            (click)="onSaveAndNext()"
-            [disabled]="saveButtonsDisabled()"
-            [ngClass]="saveAndNextButtonClasses()"
-            class="flex-1 px-5 py-2.5 rounded-lg font-medium text-sm transition-all duration-200 flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed hover:scale-[1.01] active:scale-[0.99] disabled:hover:scale-100">
-            <span>Save & next unanswered</span>
-            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
-            </svg>
-          </button>
-        </div>
-      </div>
-    </div>
+                template: `
+    <div class="flex flex-col h-full">
+      <!-- Scrollable Content -->
+      <div #scrollContainer class="flex-1 overflow-y-auto">
+        <!-- Unanswered Questions Status -->
+        <div [ngClass]="statusHeaderClasses()" class="px-6 py-4 border-b">
+          <h4 [ngClass]="statusTitleClasses()" class="text-sm font-semibold mb-3">
+            Unanswered questions status
+          </h4>
+          <div class="flex items-center gap-3">
+            <div class="flex-1">
+              <div [ngClass]="progressBarContainerClasses()" class="h-2 rounded-full overflow-hidden">
+                <div
+                  [ngClass]="progressBarFillClasses()"
+                  class="h-full transition-all duration-500 ease-out rounded-full"
+                  [style.width.%]="progressPercentage()"></div>
+              </div>
+            </div>
+            <div [ngClass]="progressTextClasses()" class="text-sm font-medium whitespace-nowrap">
+              {{ answeredCount() }} / {{ totalCount() }} answered
+            </div>
+          </div>
+        </div>
+
+        <!-- Sentinel for intersection observer -->
+        <div #stickySentinel class="h-0"></div>
+
+        <!-- Sticky Question Header -->
+        <div #stickyHeader [ngClass]="stickyHeaderClasses()" class="sticky top-0 z-10 px-6 py-4 transition-all duration-200">
+          <!-- Breadcrumb - hide for All Questions mode -->
+          @if (viewType() !== 'all') {
+            <div [ngClass]="breadcrumbClasses()" class="text-sm italic mb-2">
+              Shop > {{ breadcrumbPath() }}
+            </div>
+          }
+
+          <!-- Question - animates from text-2xl to text-lg when sticky -->
+          <h2 #questionTitle [ngClass]="questionTextClasses()" class="font-bold text-2xl [&.is-sticky]:text-lg transition-all duration-200">
+            {{ question().question }}
+          </h2>
+        </div>
+
+        <!-- Context and Focus Areas - scroll under sticky header -->
+        <div class="px-6">
+          <!-- Context -->
+          @if (question().context) {
+            <p [ngClass]="contextTextClasses()" class="text-sm leading-relaxed mt-3">
+              {{ question().context }}
+            </p>
+          }
+
+          <!-- Related Focus Areas -->
+          @if (relatedFocusAreas().length > 0) {
+            <div class="mt-4">
+              <div class="flex items-center gap-2 mb-2">
+                <span [ngClass]="relatedLabelClasses()" class="text-xs font-semibold">
+                  Related to {{ relatedFocusAreas().length }} focus area(s)
+                </span>
+                <svg class="w-4 h-4" [ngClass]="relatedLabelClasses()" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                </svg>
+              </div>
+              <div class="flex flex-wrap gap-2">
+                @for (focusArea of relatedFocusAreas(); track focusArea) {
+                  <span [ngClass]="focusAreaChipClasses()" class="px-3 py-1.5 rounded-full text-xs font-medium">
+                    {{ getFocusAreaTitle(focusArea) }}
+                  </span>
+                }
+              </div>
+            </div>
+          }
+        </div>
+
+        <div class="px-6 py-6">
+
+        <!-- Answer Options -->
+        <div class="space-y-3 mb-4">
+          @for (option of answerOptions(); track option.tempId) {
+            <label
+              [ngClass]="checkboxRowClasses()"
+              class="flex items-start gap-3 p-4 rounded-lg cursor-pointer transition-all duration-200 hover:scale-[1.01]">
+              <input
+                type="checkbox"
+                [checked]="option.isSelected"
+                (change)="toggleAnswer(option.text)"
+                [ngClass]="checkboxClasses()"
+                class="mt-0.5 w-5 h-5 rounded border-2 cursor-pointer transition-all duration-200 focus:ring-2 focus:ring-offset-2" />
+              <span [ngClass]="checkboxLabelClasses()" class="text-base flex-1">
+                {{ option.text }}
+              </span>
+            </label>
+          }
+        </div>
+
+        <!-- Add Other Answers -->
+        <div class="mb-6">
+          <div
+            class="grid transition-[grid-template-rows] duration-300 ease-in-out"
+            [style.grid-template-rows]="addOtherAnswersExpanded() ? '1fr' : '0fr'">
+            <div class="overflow-hidden min-h-0">
+              <div class="pb-4">
+                <textarea
+                  [(ngModel)]="customAnswerText"
+                  [ngClass]="textareaClasses()"
+                  class="w-full px-4 py-3 rounded-lg border-2 text-sm resize-y transition-colors duration-200 focus:ring-2 focus:ring-offset-2"
+                  rows="5"
+                  placeholder="Enter your answer(s) here, separated by returns."></textarea>
+                <div class="flex items-center gap-3 mt-3">
+                  <button
+                    type="button"
+                    (click)="cancelCustomAnswers()"
+                    [ngClass]="cancelButtonClasses()"
+                    class="px-5 py-2.5 rounded-lg font-medium text-sm transition-all duration-200 hover:scale-105 active:scale-95">
+                    Cancel
+                  </button>
+                  <button
+                    type="button"
+                    (click)="addCustomAnswers()"
+                    [disabled]="!canAddCustomAnswers()"
+                    [ngClass]="addButtonClasses()"
+                    class="flex-1 px-5 py-2.5 rounded-lg font-medium text-sm transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100">
+                    Add
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          @if (!addOtherAnswersExpanded()) {
+            <button
+              type="button"
+              (click)="toggleAddOtherAnswers()"
+              [ngClass]="addOtherAnswersButtonClasses()"
+              class="w-full px-5 py-3 rounded-lg font-medium text-sm transition-all duration-200 border-2 hover:scale-[1.01] active:scale-[0.99]">
+              Add other answers
+            </button>
+          }
+        </div>
+        </div>
+      </div>
+
+      <!-- Sticky Footer -->
+      <div [ngClass]="footerClasses()" class="px-6 py-4 border-t sticky bottom-0 z-10">
+        <div class="flex items-center gap-4">
+          <button
+            type="button"
+            (click)="onSave()"
+            [disabled]="saveButtonsDisabled()"
+            [ngClass]="saveButtonClasses()"
+            class="px-5 py-2.5 rounded-lg font-medium text-sm transition-all duration-200 border disabled:opacity-50 disabled:cursor-not-allowed hover:scale-[1.02] active:scale-95 disabled:hover:scale-100">
+            Save
+          </button>
+          <button
+            type="button"
+            (click)="onSaveAndNext()"
+            [disabled]="saveButtonsDisabled()"
+            [ngClass]="saveAndNextButtonClasses()"
+            class="flex-1 px-5 py-2.5 rounded-lg font-medium text-sm transition-all duration-200 flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed hover:scale-[1.01] active:scale-[0.99] disabled:hover:scale-100">
+            <span>Save & next unanswered</span>
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
   `
             }]
     }], () => [], { question: [{ type: i0.Input, args: [{ isSignal: true, alias: "question", required: true }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], viewType: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewType", required: false }] }], selectedCategoryId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedCategoryId", required: false }] }], selectedFocusAreaId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedFocusAreaId", required: false }] }], filteredQuestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "filteredQuestions", required: false }] }], profileShopAnswers: [{ type: i0.Input, args: [{ isSignal: true, alias: "profileShopAnswers", required: false }] }], backClick: [{ type: i0.Output, args: ["backClick"] }], saveClick: [{ type: i0.Output, args: ["saveClick"] }], saveAndNextClick: [{ type: i0.Output, args: ["saveAndNextClick"] }], scrollContainer: [{