@eric-emg/symphiq-components 1.2.371 → 1.2.374
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.
|
@@ -88682,6 +88682,9 @@ class ShopProfileQuestionAnswerComponent {
|
|
|
88682
88682
|
this.saveButtonsDisabled = computed(() => {
|
|
88683
88683
|
return this.selectedAnswerTexts().length === 0 || this.addOtherAnswersExpanded();
|
|
88684
88684
|
}, ...(ngDevMode ? [{ debugName: "saveButtonsDisabled" }] : []));
|
|
88685
|
+
this.stickyState = false;
|
|
88686
|
+
this.lastStickyChange = 0;
|
|
88687
|
+
this.stickyChangeCount = 0;
|
|
88685
88688
|
// Initialize selected answers from existing profile answers
|
|
88686
88689
|
effect(() => {
|
|
88687
88690
|
const questionId = this.question().id;
|
|
@@ -88703,17 +88706,37 @@ class ShopProfileQuestionAnswerComponent {
|
|
|
88703
88706
|
const header = this.stickyHeader?.nativeElement;
|
|
88704
88707
|
const title = this.questionTitle?.nativeElement;
|
|
88705
88708
|
if (!sentinel || !scrollRoot || !header) {
|
|
88709
|
+
console.log('[StickyDebug] Setup failed - missing elements:', { sentinel: !!sentinel, scrollRoot: !!scrollRoot, header: !!header });
|
|
88706
88710
|
return;
|
|
88707
88711
|
}
|
|
88712
|
+
console.log('[StickyDebug] Setting up IntersectionObserver');
|
|
88708
88713
|
this.ngZone.runOutsideAngular(() => {
|
|
88709
88714
|
this.intersectionObserver = new IntersectionObserver((entries) => {
|
|
88710
88715
|
entries.forEach((entry) => {
|
|
88711
|
-
|
|
88716
|
+
const now = Date.now();
|
|
88717
|
+
const timeSinceLastChange = now - this.lastStickyChange;
|
|
88718
|
+
const newStickyState = !entry.isIntersecting;
|
|
88719
|
+
this.stickyChangeCount++;
|
|
88720
|
+
console.log(`[StickyDebug #${this.stickyChangeCount}] isIntersecting: ${entry.isIntersecting}, boundingClientRect.top: ${entry.boundingClientRect.top.toFixed(1)}, intersectionRatio: ${entry.intersectionRatio.toFixed(3)}, currentSticky: ${this.stickyState}, newSticky: ${newStickyState}, timeSinceLastChange: ${timeSinceLastChange}ms`);
|
|
88721
|
+
// Debounce: ignore changes within 100ms to prevent flip-flopping
|
|
88722
|
+
if (timeSinceLastChange < 100 && this.stickyState !== newStickyState) {
|
|
88723
|
+
console.log(`[StickyDebug] DEBOUNCED - ignoring change from ${this.stickyState} to ${newStickyState} (only ${timeSinceLastChange}ms since last change)`);
|
|
88724
|
+
return;
|
|
88725
|
+
}
|
|
88726
|
+
if (this.stickyState === newStickyState) {
|
|
88727
|
+
console.log(`[StickyDebug] No state change needed (already ${this.stickyState})`);
|
|
88728
|
+
return;
|
|
88729
|
+
}
|
|
88730
|
+
this.stickyState = newStickyState;
|
|
88731
|
+
this.lastStickyChange = now;
|
|
88732
|
+
if (newStickyState) {
|
|
88733
|
+
console.log('[StickyDebug] Applying sticky classes');
|
|
88712
88734
|
header.classList.add('shadow-md');
|
|
88713
88735
|
header.classList.add('is-sticky');
|
|
88714
88736
|
title?.classList.add('is-sticky');
|
|
88715
88737
|
}
|
|
88716
88738
|
else {
|
|
88739
|
+
console.log('[StickyDebug] Removing sticky classes');
|
|
88717
88740
|
header.classList.remove('shadow-md');
|
|
88718
88741
|
header.classList.remove('is-sticky');
|
|
88719
88742
|
title?.classList.remove('is-sticky');
|
|
@@ -88721,7 +88744,8 @@ class ShopProfileQuestionAnswerComponent {
|
|
|
88721
88744
|
});
|
|
88722
88745
|
}, {
|
|
88723
88746
|
root: scrollRoot,
|
|
88724
|
-
threshold: 0
|
|
88747
|
+
threshold: 0,
|
|
88748
|
+
rootMargin: '-20px 0px 0px 0px'
|
|
88725
88749
|
});
|
|
88726
88750
|
this.intersectionObserver.observe(sentinel);
|
|
88727
88751
|
});
|
|
@@ -88931,7 +88955,7 @@ class ShopProfileQuestionAnswerComponent {
|
|
|
88931
88955
|
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.stickySentinel = _t.first);
|
|
88932
88956
|
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.stickyHeader = _t.first);
|
|
88933
88957
|
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.questionTitle = _t.first);
|
|
88934
|
-
} }, inputs: { question: [1, "question"], viewMode: [1, "viewMode"], viewType: [1, "viewType"], selectedCategoryId: [1, "selectedCategoryId"], selectedFocusAreaId: [1, "selectedFocusAreaId"], filteredQuestions: [1, "filteredQuestions"], profileShopAnswers: [1, "profileShopAnswers"] }, outputs: { backClick: "backClick", saveClick: "saveClick", saveAndNextClick: "saveAndNextClick" }, decls: 47, vars: 28, consts: [["scrollContainer", ""], ["stickySentinel", ""], ["stickyHeader", ""], ["questionTitle", ""], [1, "flex", "flex-col", "h-full"], [1, "flex-1", "overflow-y-auto"], [1, "px-6", "py-4", "border-b", 3, "ngClass"], [1, "text-sm", "font-semibold", "mb-3", 3, "ngClass"], [1, "flex", "items-center", "gap-3"], [1, "flex-1"], [1, "h-2", "rounded-full", "overflow-hidden", 3, "ngClass"], [1, "h-full", "transition-all", "duration-500", "ease-out", "rounded-full", 3, "ngClass"], [1, "text-sm", "font-medium", "whitespace-nowrap", 3, "ngClass"], [1, "h-0"], [1, "sticky", "top-0", "z-10", "px-6", "py-4", "transition-all", "duration-200", 3, "ngClass"], [1, "text-sm", "italic", "mb-2", 3, "ngClass"], [1, "font-bold", "text-
|
|
88958
|
+
} }, inputs: { question: [1, "question"], viewMode: [1, "viewMode"], viewType: [1, "viewType"], selectedCategoryId: [1, "selectedCategoryId"], selectedFocusAreaId: [1, "selectedFocusAreaId"], filteredQuestions: [1, "filteredQuestions"], profileShopAnswers: [1, "profileShopAnswers"] }, outputs: { backClick: "backClick", saveClick: "saveClick", saveAndNextClick: "saveAndNextClick" }, decls: 47, vars: 28, consts: [["scrollContainer", ""], ["stickySentinel", ""], ["stickyHeader", ""], ["questionTitle", ""], [1, "flex", "flex-col", "h-full"], [1, "flex-1", "overflow-y-auto"], [1, "px-6", "py-4", "border-b", 3, "ngClass"], [1, "text-sm", "font-semibold", "mb-3", 3, "ngClass"], [1, "flex", "items-center", "gap-3"], [1, "flex-1"], [1, "h-2", "rounded-full", "overflow-hidden", 3, "ngClass"], [1, "h-full", "transition-all", "duration-500", "ease-out", "rounded-full", 3, "ngClass"], [1, "text-sm", "font-medium", "whitespace-nowrap", 3, "ngClass"], [1, "h-0"], [1, "sticky", "top-0", "z-10", "px-6", "py-4", "transition-all", "duration-200", 3, "ngClass"], [1, "text-sm", "italic", "mb-2", 3, "ngClass"], [1, "font-bold", "text-2xl", "[&.is-sticky]:text-lg", "transition-all", "duration-200", 3, "ngClass"], [1, "px-6"], [1, "text-sm", "leading-relaxed", "mt-3", 3, "ngClass"], [1, "mt-4"], [1, "px-6", "py-6"], [1, "space-y-3", "mb-4"], [1, "flex", "items-start", "gap-3", "p-4", "rounded-lg", "cursor-pointer", "transition-all", "duration-200", "hover:scale-[1.01]", 3, "ngClass"], [1, "mb-6"], [1, "grid", "transition-[grid-template-rows]", "duration-300", "ease-in-out"], [1, "overflow-hidden", "min-h-0"], [1, "pb-4"], ["rows", "5", "placeholder", "Enter your answer(s) here, separated by returns.", 1, "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", 3, "ngModelChange", "ngModel", "ngClass"], [1, "flex", "items-center", "gap-3", "mt-3"], ["type", "button", 1, "px-5", "py-2.5", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-200", "hover:scale-105", "active:scale-95", 3, "click", "ngClass"], ["type", "button", 1, "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", 3, "click", "disabled", "ngClass"], ["type", "button", 1, "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]", 3, "ngClass"], [1, "px-6", "py-4", "border-t", "sticky", "bottom-0", "z-10", 3, "ngClass"], [1, "flex", "items-center", "gap-4"], ["type", "button", 1, "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", 3, "click", "disabled", "ngClass"], ["type", "button", 1, "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", 3, "click", "disabled", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 5l7 7-7 7"], [1, "flex", "items-center", "gap-2", "mb-2"], [1, "text-xs", "font-semibold", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4", 3, "ngClass"], ["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"], [1, "flex", "flex-wrap", "gap-2"], [1, "px-3", "py-1.5", "rounded-full", "text-xs", "font-medium", 3, "ngClass"], ["type", "checkbox", 1, "mt-0.5", "w-5", "h-5", "rounded", "border-2", "cursor-pointer", "transition-all", "duration-200", "focus:ring-2", "focus:ring-offset-2", 3, "change", "checked", "ngClass"], [1, "text-base", "flex-1", 3, "ngClass"], ["type", "button", 1, "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]", 3, "click", "ngClass"]], template: function ShopProfileQuestionAnswerComponent_Template(rf, ctx) { if (rf & 1) {
|
|
88935
88959
|
const _r1 = i0.ɵɵgetCurrentView();
|
|
88936
88960
|
i0.ɵɵelementStart(0, "div", 4)(1, "div", 5, 0)(3, "div", 6)(4, "h4", 7);
|
|
88937
88961
|
i0.ɵɵtext(5, " Unanswered questions status ");
|
|
@@ -89086,8 +89110,8 @@ class ShopProfileQuestionAnswerComponent {
|
|
|
89086
89110
|
</div>
|
|
89087
89111
|
}
|
|
89088
89112
|
|
|
89089
|
-
<!-- Question - animates from text-
|
|
89090
|
-
<h2 #questionTitle [ngClass]="questionTextClasses()" class="font-bold text-
|
|
89113
|
+
<!-- Question - animates from text-2xl to text-lg when sticky -->
|
|
89114
|
+
<h2 #questionTitle [ngClass]="questionTextClasses()" class="font-bold text-2xl [&.is-sticky]:text-lg transition-all duration-200">
|
|
89091
89115
|
{{ question().question }}
|
|
89092
89116
|
</h2>
|
|
89093
89117
|
</div>
|