@eric-emg/symphiq-components 1.3.46 → 1.3.47

package/fesm2022/symphiq-components.mjs

@@ -3806,7 +3806,16 @@ class TooltipDirective {
         this.isHovered = signal(false, ...(ngDevMode ? [{ debugName: "isHovered" }] : []));
         this.mouseX = 0;
         this.mouseY = 0;
-        this.renderer.setStyle(this.elementRef.nativeElement, 'cursor', 'help');
+        effect(() => {
+            const content = this.symphiqTooltip();
+            const hasContent = content && (typeof content === 'string' ? content.length > 0 : Object.keys(content).length > 0);
+            if (hasContent) {
+                this.renderer.setStyle(this.elementRef.nativeElement, 'cursor', 'help');
+            }
+            else {
+                this.renderer.removeStyle(this.elementRef.nativeElement, 'cursor');
+            }
+        });
         effect(() => {
             if (this.isHovered() && this.symphiqTooltip()) {
                 this.scheduleShow();
@@ -29062,10 +29071,12 @@ class RelatedContentButtonComponent {
         this.tooltipType = input('text', ...(ngDevMode ? [{ debugName: "tooltipType" }] : []));
         this.buttonClicked = output();
         this.isLightMode = computed(() => this.viewMode() === ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "isLightMode" }] : []));
-        this.hasInteraction = computed(() => {
+        this.hasTooltip = computed(() => {
             const content = this.tooltipContent();
-            const hasTooltip = typeof content === 'string' ? content.length > 0 : content?.text?.length > 0;
-            return this.showChevron() || hasTooltip;
+            return typeof content === 'string' ? content.length > 0 : (content?.text?.length ?? 0) > 0;
+        }, ...(ngDevMode ? [{ debugName: "hasTooltip" }] : []));
+        this.hasInteraction = computed(() => {
+            return this.showChevron() || this.hasTooltip();
         }, ...(ngDevMode ? [{ debugName: "hasInteraction" }] : []));
         this.buttonClasses = computed(() => {
             const base = 'w-full flex items-center justify-between px-4 py-3 rounded-lg transition-all duration-200';
@@ -29085,7 +29096,7 @@ class RelatedContentButtonComponent {
         }
     }
     static { this.ɵfac = function RelatedContentButtonComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || RelatedContentButtonComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: RelatedContentButtonComponent, selectors: [["symphiq-related-content-button"]], inputs: { count: [1, "count"], label: [1, "label"], labelPlural: [1, "labelPlural"], svgPath: [1, "svgPath"], viewMode: [1, "viewMode"], showChevron: [1, "showChevron"], tooltipContent: [1, "tooltipContent"], tooltipType: [1, "tooltipType"] }, outputs: { buttonClicked: "buttonClicked" }, decls: 7, vars: 10, consts: [["type", "button", 3, "click", "ngClass", "libSymphiqTooltip", "tooltipType", "tooltipPosition"], [1, "flex", "items-center", "gap-2"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4", "flex-shrink-0"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2"], [1, "text-xs", "font-semibold", "uppercase", "tracking-wide"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 5l7 7-7 7"]], template: function RelatedContentButtonComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: RelatedContentButtonComponent, selectors: [["symphiq-related-content-button"]], inputs: { count: [1, "count"], label: [1, "label"], labelPlural: [1, "labelPlural"], svgPath: [1, "svgPath"], viewMode: [1, "viewMode"], showChevron: [1, "showChevron"], tooltipContent: [1, "tooltipContent"], tooltipType: [1, "tooltipType"] }, outputs: { buttonClicked: "buttonClicked" }, decls: 7, vars: 12, consts: [["type", "button", 3, "click", "ngClass", "libSymphiqTooltip", "tooltipType", "tooltipPosition"], [1, "flex", "items-center", "gap-2"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4", "flex-shrink-0"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2"], [1, "text-xs", "font-semibold", "uppercase", "tracking-wide"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 5l7 7-7 7"]], template: function RelatedContentButtonComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "button", 0);
             i0.ɵɵlistener("click", function RelatedContentButtonComponent_Template_button_click_0_listener() { return ctx.onClick(); });
             i0.ɵɵelementStart(1, "div", 1);
@@ -29100,7 +29111,7 @@ class RelatedContentButtonComponent {
             i0.ɵɵconditionalCreate(6, RelatedContentButtonComponent_Conditional_6_Template, 2, 0, ":svg:svg", 2);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
-            i0.ɵɵclassProp("cursor-default", !ctx.hasInteraction());
+            i0.ɵɵclassProp("cursor-default", !ctx.hasInteraction())("cursor-pointer", ctx.showChevron() && !ctx.hasTooltip());
             i0.ɵɵproperty("ngClass", ctx.buttonClasses())("libSymphiqTooltip", ctx.tooltipContent())("tooltipType", ctx.tooltipType())("tooltipPosition", "top");
             i0.ɵɵadvance(3);
             i0.ɵɵattribute("d", ctx.svgPath());
@@ -29122,6 +29133,7 @@ class RelatedContentButtonComponent {
       type="button"
       [ngClass]="buttonClasses()"
       [class.cursor-default]="!hasInteraction()"
+      [class.cursor-pointer]="showChevron() && !hasTooltip()"
       [libSymphiqTooltip]="tooltipContent()"
       [tooltipType]="tooltipType()"
       [tooltipPosition]="'top'"
@@ -29164,7 +29176,7 @@ class RelatedContentButtonComponent {
   `
             }]
     }], null, { count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], labelPlural: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPlural", required: true }] }], svgPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "svgPath", required: true }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], showChevron: [{ type: i0.Input, args: [{ isSignal: true, alias: "showChevron", required: false }] }], tooltipContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipContent", required: false }] }], tooltipType: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipType", required: false }] }], buttonClicked: [{ type: i0.Output, args: ["buttonClicked"] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RelatedContentButtonComponent, { className: "RelatedContentButtonComponent", filePath: "lib/components/shared/related-content-button.component.ts", lineNumber: 58 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RelatedContentButtonComponent, { className: "RelatedContentButtonComponent", filePath: "lib/components/shared/related-content-button.component.ts", lineNumber: 59 }); })();
 
 function RelatedContentSidebarComponent_Conditional_0_Conditional_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
@@ -100875,15 +100887,70 @@ class SourceSummaryComponent {
     }], null, { sourceTypeCounts: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceTypeCounts", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SourceSummaryComponent, { className: "SourceSummaryComponent", filePath: "lib/components/shared/source-summary.component.ts", lineNumber: 63 }); })();
 
-function UnifiedGoalCardComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 8);
+function ThematicCategoryBadgeComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 0);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngClass", ctx_r0.thematicCategoryBadgeClasses());
+    i0.ɵɵproperty("ngClass", ctx_r0.badgeClasses());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r0.goal().thematicCategory, " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.formattedCategory(), " ");
+} }
+class ThematicCategoryBadgeComponent {
+    constructor() {
+        this.category = input(...(ngDevMode ? [undefined, { debugName: "category" }] : []));
+        this.viewMode = input(ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "viewMode" }] : []));
+        this.isDark = computed(() => this.viewMode() === ViewModeEnum.DARK, ...(ngDevMode ? [{ debugName: "isDark" }] : []));
+        this.formattedCategory = computed(() => {
+            const cat = this.category();
+            if (!cat)
+                return '';
+            return cat
+                .split('_')
+                .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+                .join(' ');
+        }, ...(ngDevMode ? [{ debugName: "formattedCategory" }] : []));
+        this.badgeClasses = computed(() => {
+            if (this.isDark()) {
+                return 'bg-indigo-500/20 text-indigo-300 border border-indigo-500/30';
+            }
+            return 'bg-indigo-50 text-indigo-700 border border-indigo-200';
+        }, ...(ngDevMode ? [{ debugName: "badgeClasses" }] : []));
+    }
+    static { this.ɵfac = function ThematicCategoryBadgeComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ThematicCategoryBadgeComponent)(); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ThematicCategoryBadgeComponent, selectors: [["symphiq-thematic-category-badge"]], inputs: { category: [1, "category"], viewMode: [1, "viewMode"] }, decls: 1, vars: 1, consts: [[1, "inline-block", "text-xs", "font-medium", "px-2.5", "py-1", "rounded-full", 3, "ngClass"]], template: function ThematicCategoryBadgeComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, ThematicCategoryBadgeComponent_Conditional_0_Template, 2, 2, "span", 0);
+        } if (rf & 2) {
+            i0.ɵɵconditional(ctx.category() ? 0 : -1);
+        } }, dependencies: [CommonModule, i1$1.NgClass], encapsulation: 2, changeDetection: 0 }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ThematicCategoryBadgeComponent, [{
+        type: Component,
+        args: [{
+                selector: 'symphiq-thematic-category-badge',
+                standalone: true,
+                imports: [CommonModule],
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: `
+    @if (category()) {
+      <span [ngClass]="badgeClasses()" class="inline-block text-xs font-medium px-2.5 py-1 rounded-full">
+        {{ formattedCategory() }}
+      </span>
+    }
+  `
+            }]
+    }], null, { category: [{ type: i0.Input, args: [{ isSignal: true, alias: "category", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ThematicCategoryBadgeComponent, { className: "ThematicCategoryBadgeComponent", filePath: "lib/components/shared/thematic-category-badge.component.ts", lineNumber: 18 }); })();
+
+function UnifiedGoalCardComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 8);
+    i0.ɵɵelement(1, "symphiq-thematic-category-badge", 18);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("category", ctx_r0.goal().thematicCategory)("viewMode", ctx_r0.viewMode());
 } }
 function UnifiedGoalCardComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "p", 9);
@@ -100897,7 +100964,7 @@ function UnifiedGoalCardComponent_Conditional_11_Template(rf, ctx) { if (rf & 1)
 } }
 function UnifiedGoalCardComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 10);
-    i0.ɵɵelement(1, "symphiq-roadmap-metrics", 18);
+    i0.ɵɵelement(1, "symphiq-roadmap-metrics", 19);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -100924,11 +100991,11 @@ function UnifiedGoalCardComponent_Conditional_16_Template(rf, ctx) { if (rf & 1)
 } }
 function UnifiedGoalCardComponent_Conditional_17_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 19);
+    i0.ɵɵelementStart(0, "div", 20);
     i0.ɵɵlistener("click", function UnifiedGoalCardComponent_Conditional_17_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onRelatedContextButtonClick($event)); });
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(1, "svg", 20);
-    i0.ɵɵelement(2, "path", 21);
+    i0.ɵɵelementStart(1, "svg", 21);
+    i0.ɵɵelement(2, "path", 22);
     i0.ɵɵelementEnd();
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
@@ -101056,12 +101123,6 @@ class UnifiedGoalCardComponent {
         this.descriptionClasses = computed(() => {
             return this.isDark() ? 'text-slate-300' : 'text-slate-600';
         }, ...(ngDevMode ? [{ debugName: "descriptionClasses" }] : []));
-        this.thematicCategoryBadgeClasses = computed(() => {
-            if (this.isDark()) {
-                return 'bg-indigo-500/20 text-indigo-300 border border-indigo-500/30';
-            }
-            return 'bg-indigo-50 text-indigo-700 border border-indigo-200';
-        }, ...(ngDevMode ? [{ debugName: "thematicCategoryBadgeClasses" }] : []));
         this.relatedContextButtonClasses = computed(() => {
             if (this.isDark()) {
                 return 'bg-slate-700/50 hover:bg-slate-700/70 border border-slate-600/50 text-slate-300';
@@ -101115,7 +101176,7 @@ class UnifiedGoalCardComponent {
         }
     }
     static { this.ɵfac = function UnifiedGoalCardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || UnifiedGoalCardComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: UnifiedGoalCardComponent, selectors: [["symphiq-unified-goal-card"]], inputs: { goal: [1, "goal"], viewMode: [1, "viewMode"] }, outputs: { goalClick: "goalClick", sourceBadgeClick: "sourceBadgeClick", relatedMetricsClick: "relatedMetricsClick", relatedFocusAreasClick: "relatedFocusAreasClick", learnMoreClick: "learnMoreClick" }, decls: 20, vars: 15, consts: [[1, "rounded-2xl", "p-6", "shadow-lg", "transition-all", "duration-200", 3, "ngClass"], [1, "flex", "items-start", "gap-4", "mb-2"], [3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"], [1, "flex-1", "min-w-0"], [1, "text-xs", "font-semibold", "uppercase", "tracking-wider", "mb-1", 3, "ngClass"], [1, "font-semibold", "text-lg", "line-clamp-2", 3, "ngClass"], [1, "inline-block", "text-xs", "font-medium", "px-2.5", "py-1", "rounded-full", "mb-3", 3, "ngClass"], [1, "text-sm", "mb-4", "line-clamp-3", "cursor-help", 3, "ngClass", "libSymphiqTooltip"], [1, "mb-4"], [1, "flex", "flex-wrap", "items-center", "justify-between", "gap-3", "mb-4"], [3, "priority", "viewMode"], [3, "timeframe", "viewMode"], [3, "sourceTypeCounts", "viewMode"], [1, "mt-4", "w-full", "flex", "items-center", "justify-center", "gap-2", "px-4", "py-2", "rounded-lg", "text-sm", "font-medium", "transition-all", "hover:scale-[1.02]", 3, "ngClass"], [1, "mt-4"], [3, "buttonClick", "viewMode", "variant", "label"], [3, "metrics", "viewMode"], [1, "mt-4", "w-full", "flex", "items-center", "justify-center", "gap-2", "px-4", "py-2", "rounded-lg", "text-sm", "font-medium", "transition-all", "hover:scale-[1.02]", 3, "click", "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", "M13 10V3L4 14h7v7l9-11h-7z"]], template: function UnifiedGoalCardComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: UnifiedGoalCardComponent, selectors: [["symphiq-unified-goal-card"]], inputs: { goal: [1, "goal"], viewMode: [1, "viewMode"] }, outputs: { goalClick: "goalClick", sourceBadgeClick: "sourceBadgeClick", relatedMetricsClick: "relatedMetricsClick", relatedFocusAreasClick: "relatedFocusAreasClick", learnMoreClick: "learnMoreClick" }, decls: 20, vars: 15, consts: [[1, "rounded-2xl", "p-6", "shadow-lg", "transition-all", "duration-200", 3, "ngClass"], [1, "flex", "items-start", "gap-4", "mb-2"], [3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"], [1, "flex-1", "min-w-0"], [1, "text-xs", "font-semibold", "uppercase", "tracking-wider", "mb-1", 3, "ngClass"], [1, "font-semibold", "text-lg", "line-clamp-2", 3, "ngClass"], [1, "mb-3"], [1, "text-sm", "mb-4", "line-clamp-3", "cursor-help", 3, "ngClass", "libSymphiqTooltip"], [1, "mb-4"], [1, "flex", "flex-wrap", "items-center", "justify-between", "gap-3", "mb-4"], [3, "priority", "viewMode"], [3, "timeframe", "viewMode"], [3, "sourceTypeCounts", "viewMode"], [1, "mt-4", "w-full", "flex", "items-center", "justify-center", "gap-2", "px-4", "py-2", "rounded-lg", "text-sm", "font-medium", "transition-all", "hover:scale-[1.02]", 3, "ngClass"], [1, "mt-4"], [3, "buttonClick", "viewMode", "variant", "label"], [3, "category", "viewMode"], [3, "metrics", "viewMode"], [1, "mt-4", "w-full", "flex", "items-center", "justify-center", "gap-2", "px-4", "py-2", "rounded-lg", "text-sm", "font-medium", "transition-all", "hover:scale-[1.02]", 3, "click", "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", "M13 10V3L4 14h7v7l9-11h-7z"]], template: function UnifiedGoalCardComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2);
             i0.ɵɵnamespaceSVG();
             i0.ɵɵelementStart(3, "svg", 3);
@@ -101128,7 +101189,7 @@ class UnifiedGoalCardComponent {
             i0.ɵɵelementStart(8, "h4", 7);
             i0.ɵɵtext(9);
             i0.ɵɵelementEnd()()();
-            i0.ɵɵconditionalCreate(10, UnifiedGoalCardComponent_Conditional_10_Template, 2, 2, "span", 8);
+            i0.ɵɵconditionalCreate(10, UnifiedGoalCardComponent_Conditional_10_Template, 2, 2, "div", 8);
             i0.ɵɵconditionalCreate(11, UnifiedGoalCardComponent_Conditional_11_Template, 2, 3, "p", 9);
             i0.ɵɵconditionalCreate(12, UnifiedGoalCardComponent_Conditional_12_Template, 2, 2, "div", 10);
             i0.ɵɵelementStart(13, "div", 11);
@@ -101177,6 +101238,7 @@ class UnifiedGoalCardComponent {
             RoadmapMetricsComponent,
             LearnMoreButtonComponent,
             SourceSummaryComponent,
+            ThematicCategoryBadgeComponent,
             TooltipDirective], encapsulation: 2, changeDetection: 0 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(UnifiedGoalCardComponent, [{
@@ -101191,6 +101253,7 @@ class UnifiedGoalCardComponent {
                     RoadmapMetricsComponent,
                     LearnMoreButtonComponent,
                     SourceSummaryComponent,
+                    ThematicCategoryBadgeComponent,
                     TooltipDirective
                 ],
                 changeDetection: ChangeDetectionStrategy.OnPush,
@@ -101214,9 +101277,12 @@ class UnifiedGoalCardComponent {
       </div>
 
       @if (goal()?.thematicCategory) {
-        <span [ngClass]="thematicCategoryBadgeClasses()" class="inline-block text-xs font-medium px-2.5 py-1 rounded-full mb-3">
-          {{ goal()!.thematicCategory }}
-        </span>
+        <div class="mb-3">
+          <symphiq-thematic-category-badge
+              [category]="goal()!.thematicCategory"
+              [viewMode]="viewMode()"
+          />
+        </div>
       }
 
       @if (goal()?.description) {
@@ -101280,7 +101346,7 @@ class UnifiedGoalCardComponent {
   `
             }]
     }], null, { goal: [{ type: i0.Input, args: [{ isSignal: true, alias: "goal", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], goalClick: [{ type: i0.Output, args: ["goalClick"] }], sourceBadgeClick: [{ type: i0.Output, args: ["sourceBadgeClick"] }], relatedMetricsClick: [{ type: i0.Output, args: ["relatedMetricsClick"] }], relatedFocusAreasClick: [{ type: i0.Output, args: ["relatedFocusAreasClick"] }], learnMoreClick: [{ type: i0.Output, args: ["learnMoreClick"] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(UnifiedGoalCardComponent, { className: "UnifiedGoalCardComponent", filePath: "lib/components/profile-analysis-unified-dashboard/cards/unified-goal-card.component.ts", lineNumber: 110 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(UnifiedGoalCardComponent, { className: "UnifiedGoalCardComponent", filePath: "lib/components/profile-analysis-unified-dashboard/cards/unified-goal-card.component.ts", lineNumber: 115 }); })();
 
 const _forTrack0$8 = ($index, $item) => $item.analysisId;
 function SourceAnalysisTraceabilityComponent_Conditional_0_For_7_Conditional_1_Template(rf, ctx) { if (rf & 1) {
@@ -101644,7 +101710,16 @@ class SynthesisConfidenceSectionComponent {
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SynthesisConfidenceSectionComponent, { className: "SynthesisConfidenceSectionComponent", filePath: "lib/components/shared/synthesis-confidence-section.component.ts", lineNumber: 40 }); })();
 
 function UnifiedGoalDetailModalContentComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 3);
+    i0.ɵɵelementStart(0, "div", 3);
+    i0.ɵɵelement(1, "symphiq-thematic-category-badge", 12);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("category", ctx_r0.goal().thematicCategory)("viewMode", ctx_r0.viewMode());
+} }
+function UnifiedGoalDetailModalContentComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 4);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -101653,34 +101728,34 @@ function UnifiedGoalDetailModalContentComponent_Conditional_3_Template(rf, ctx)
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r0.goal().description, " ");
 } }
-function UnifiedGoalDetailModalContentComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+function UnifiedGoalDetailModalContentComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "symphiq-related-content-button", 11);
-    i0.ɵɵlistener("buttonClicked", function UnifiedGoalDetailModalContentComponent_Conditional_6_Template_symphiq_related_content_button_buttonClicked_0_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onContributingMetricsClick()); });
+    i0.ɵɵelementStart(0, "symphiq-related-content-button", 13);
+    i0.ɵɵlistener("buttonClicked", function UnifiedGoalDetailModalContentComponent_Conditional_7_Template_symphiq_related_content_button_buttonClicked_0_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onContributingMetricsClick()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("count", ctx_r0.contributingMetricsCount())("svgPath", ctx_r0.metricsIconPath)("viewMode", ctx_r0.viewMode());
 } }
-function UnifiedGoalDetailModalContentComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "symphiq-related-content-button", 7);
+function UnifiedGoalDetailModalContentComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "symphiq-related-content-button", 8);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("count", ctx_r0.contributingFocusAreasCount())("svgPath", ctx_r0.focusAreaIconPath)("viewMode", ctx_r0.viewMode())("showChevron", false)("tooltipContent", ctx_r0.focusAreasTooltipContent());
 } }
-function UnifiedGoalDetailModalContentComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+function UnifiedGoalDetailModalContentComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div");
-    i0.ɵɵelement(1, "symphiq-napkin-visual-placeholder", 12);
+    i0.ɵɵelement(1, "symphiq-napkin-visual-placeholder", 14);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
     i0.ɵɵproperty("visual", ctx_r0.goal().visual)("viewMode", ctx_r0.viewMode());
 } }
-function UnifiedGoalDetailModalContentComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+function UnifiedGoalDetailModalContentComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "symphiq-show-objectives-button", 13);
-    i0.ɵɵlistener("buttonClick", function UnifiedGoalDetailModalContentComponent_Conditional_9_Template_symphiq_show_objectives_button_buttonClick_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.showObjectives.emit()); });
+    i0.ɵɵelementStart(0, "symphiq-show-objectives-button", 15);
+    i0.ɵɵlistener("buttonClick", function UnifiedGoalDetailModalContentComponent_Conditional_10_Template_symphiq_show_objectives_button_buttonClick_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.showObjectives.emit()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -101742,39 +101817,42 @@ class UnifiedGoalDetailModalContentComponent {
         this.contributingMetricsClick.emit();
     }
     static { this.ɵfac = function UnifiedGoalDetailModalContentComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || UnifiedGoalDetailModalContentComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: UnifiedGoalDetailModalContentComponent, selectors: [["symphiq-unified-goal-detail-modal-content"]], inputs: { goal: [1, "goal"], allMetrics: [1, "allMetrics"], allCharts: [1, "allCharts"], loadedSourceAnalysisIds: [1, "loadedSourceAnalysisIds"], loadingSourceAnalysisId: [1, "loadingSourceAnalysisId"], viewMode: [1, "viewMode"], currentModalState: [1, "currentModalState"] }, outputs: { sourceAnalysisClick: "sourceAnalysisClick", metricClick: "metricClick", contributingMetricsClick: "contributingMetricsClick", showObjectives: "showObjectives", close: "close" }, decls: 12, vars: 15, consts: [[1, "flex", "flex-col", "gap-6"], [1, "flex", "flex-col", "lg:flex-row", "gap-6"], [1, "flex-1"], [1, "text-base", "leading-relaxed", 3, "ngClass"], [1, "lg:w-80", "flex-shrink-0", "flex", "flex-col", "gap-4"], ["layout", "vertical", 3, "expectedImpact", "viewMode", "showTitleIcon"], ["label", "CONTRIBUTING METRIC", "labelPlural", "CONTRIBUTING METRICS", 3, "count", "svgPath", "viewMode"], ["label", "CONTRIBUTING FOCUS AREA", "labelPlural", "CONTRIBUTING FOCUS AREAS", 3, "count", "svgPath", "viewMode", "showChevron", "tooltipContent"], [3, "viewMode", "subLabel"], [3, "score", "explanation", "viewMode"], [3, "sourceAnalysisClick", "sourceAnalyses", "loadedSourceAnalysisIds", "loadingSourceAnalysisId", "viewMode"], ["label", "CONTRIBUTING METRIC", "labelPlural", "CONTRIBUTING METRICS", 3, "buttonClicked", "count", "svgPath", "viewMode"], [3, "visual", "viewMode"], [3, "buttonClick", "viewMode", "subLabel"]], template: function UnifiedGoalDetailModalContentComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: UnifiedGoalDetailModalContentComponent, selectors: [["symphiq-unified-goal-detail-modal-content"]], inputs: { goal: [1, "goal"], allMetrics: [1, "allMetrics"], allCharts: [1, "allCharts"], loadedSourceAnalysisIds: [1, "loadedSourceAnalysisIds"], loadingSourceAnalysisId: [1, "loadingSourceAnalysisId"], viewMode: [1, "viewMode"], currentModalState: [1, "currentModalState"] }, outputs: { sourceAnalysisClick: "sourceAnalysisClick", metricClick: "metricClick", contributingMetricsClick: "contributingMetricsClick", showObjectives: "showObjectives", close: "close" }, decls: 13, vars: 16, consts: [[1, "flex", "flex-col", "gap-6"], [1, "flex", "flex-col", "lg:flex-row", "gap-6"], [1, "flex-1"], [1, "mb-3"], [1, "text-base", "leading-relaxed", 3, "ngClass"], [1, "lg:w-80", "flex-shrink-0", "flex", "flex-col", "gap-4"], ["layout", "vertical", 3, "expectedImpact", "viewMode", "showTitleIcon"], ["label", "CONTRIBUTING METRIC", "labelPlural", "CONTRIBUTING METRICS", 3, "count", "svgPath", "viewMode"], ["label", "CONTRIBUTING FOCUS AREA", "labelPlural", "CONTRIBUTING FOCUS AREAS", 3, "count", "svgPath", "viewMode", "showChevron", "tooltipContent"], [3, "viewMode", "subLabel"], [3, "score", "explanation", "viewMode"], [3, "sourceAnalysisClick", "sourceAnalyses", "loadedSourceAnalysisIds", "loadingSourceAnalysisId", "viewMode"], [3, "category", "viewMode"], ["label", "CONTRIBUTING METRIC", "labelPlural", "CONTRIBUTING METRICS", 3, "buttonClicked", "count", "svgPath", "viewMode"], [3, "visual", "viewMode"], [3, "buttonClick", "viewMode", "subLabel"]], template: function UnifiedGoalDetailModalContentComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2);
-            i0.ɵɵconditionalCreate(3, UnifiedGoalDetailModalContentComponent_Conditional_3_Template, 2, 2, "p", 3);
+            i0.ɵɵconditionalCreate(3, UnifiedGoalDetailModalContentComponent_Conditional_3_Template, 2, 2, "div", 3);
+            i0.ɵɵconditionalCreate(4, UnifiedGoalDetailModalContentComponent_Conditional_4_Template, 2, 2, "p", 4);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(4, "div", 4);
-            i0.ɵɵelement(5, "symphiq-expected-impact-section", 5);
-            i0.ɵɵconditionalCreate(6, UnifiedGoalDetailModalContentComponent_Conditional_6_Template, 1, 3, "symphiq-related-content-button", 6);
-            i0.ɵɵconditionalCreate(7, UnifiedGoalDetailModalContentComponent_Conditional_7_Template, 1, 5, "symphiq-related-content-button", 7);
+            i0.ɵɵelementStart(5, "div", 5);
+            i0.ɵɵelement(6, "symphiq-expected-impact-section", 6);
+            i0.ɵɵconditionalCreate(7, UnifiedGoalDetailModalContentComponent_Conditional_7_Template, 1, 3, "symphiq-related-content-button", 7);
+            i0.ɵɵconditionalCreate(8, UnifiedGoalDetailModalContentComponent_Conditional_8_Template, 1, 5, "symphiq-related-content-button", 8);
             i0.ɵɵelementEnd()();
-            i0.ɵɵconditionalCreate(8, UnifiedGoalDetailModalContentComponent_Conditional_8_Template, 2, 2, "div");
-            i0.ɵɵconditionalCreate(9, UnifiedGoalDetailModalContentComponent_Conditional_9_Template, 1, 2, "symphiq-show-objectives-button", 8);
-            i0.ɵɵelement(10, "symphiq-synthesis-confidence-section", 9);
-            i0.ɵɵelementStart(11, "symphiq-source-analysis-traceability", 10);
-            i0.ɵɵlistener("sourceAnalysisClick", function UnifiedGoalDetailModalContentComponent_Template_symphiq_source_analysis_traceability_sourceAnalysisClick_11_listener($event) { return ctx.onSourceAnalysisClick($event); });
+            i0.ɵɵconditionalCreate(9, UnifiedGoalDetailModalContentComponent_Conditional_9_Template, 2, 2, "div");
+            i0.ɵɵconditionalCreate(10, UnifiedGoalDetailModalContentComponent_Conditional_10_Template, 1, 2, "symphiq-show-objectives-button", 9);
+            i0.ɵɵelement(11, "symphiq-synthesis-confidence-section", 10);
+            i0.ɵɵelementStart(12, "symphiq-source-analysis-traceability", 11);
+            i0.ɵɵlistener("sourceAnalysisClick", function UnifiedGoalDetailModalContentComponent_Template_symphiq_source_analysis_traceability_sourceAnalysisClick_12_listener($event) { return ctx.onSourceAnalysisClick($event); });
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵadvance(3);
-            i0.ɵɵconditional(ctx.goal().description ? 3 : -1);
+            i0.ɵɵconditional(ctx.goal().thematicCategory ? 3 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.goal().description ? 4 : -1);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("expectedImpact", ctx.goal().expectedImpact)("viewMode", ctx.viewMode())("showTitleIcon", false);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.contributingMetricsCount() > 0 ? 6 : -1);
+            i0.ɵɵconditional(ctx.contributingMetricsCount() > 0 ? 7 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.contributingFocusAreasCount() > 0 ? 7 : -1);
+            i0.ɵɵconditional(ctx.contributingFocusAreasCount() > 0 ? 8 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.goal().visual ? 8 : -1);
+            i0.ɵɵconditional(ctx.goal().visual ? 9 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.goal().objectives && ctx.goal().objectives.length > 0 ? 9 : -1);
+            i0.ɵɵconditional(ctx.goal().objectives && ctx.goal().objectives.length > 0 ? 10 : -1);
             i0.ɵɵadvance();
             i0.ɵɵproperty("score", ctx.goal().synthesisConfidenceScore)("explanation", ctx.goal().synthesisConfidenceScoreExplanation)("viewMode", ctx.viewMode());
             i0.ɵɵadvance();
             i0.ɵɵproperty("sourceAnalyses", ctx.goal().sourceAnalyses)("loadedSourceAnalysisIds", ctx.loadedSourceAnalysisIds())("loadingSourceAnalysisId", ctx.loadingSourceAnalysisId())("viewMode", ctx.viewMode());
-        } }, dependencies: [CommonModule, i1$1.NgClass, ExpectedImpactSectionComponent, NapkinVisualPlaceholderComponent, ShowObjectivesButtonComponent, SourceAnalysisTraceabilityComponent, RelatedContentButtonComponent, SynthesisConfidenceSectionComponent], encapsulation: 2, changeDetection: 0 }); }
+        } }, dependencies: [CommonModule, i1$1.NgClass, ExpectedImpactSectionComponent, NapkinVisualPlaceholderComponent, ShowObjectivesButtonComponent, SourceAnalysisTraceabilityComponent, RelatedContentButtonComponent, SynthesisConfidenceSectionComponent, ThematicCategoryBadgeComponent], encapsulation: 2, changeDetection: 0 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(UnifiedGoalDetailModalContentComponent, [{
         type: Component,
@@ -101782,12 +101860,20 @@ class UnifiedGoalDetailModalContentComponent {
                 selector: 'symphiq-unified-goal-detail-modal-content',
                 standalone: true,
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                imports: [CommonModule, ExpectedImpactSectionComponent, NapkinVisualPlaceholderComponent, ShowObjectivesButtonComponent, SourceAnalysisTraceabilityComponent, RelatedContentButtonComponent, SynthesisConfidenceSectionComponent],
+                imports: [CommonModule, ExpectedImpactSectionComponent, NapkinVisualPlaceholderComponent, ShowObjectivesButtonComponent, SourceAnalysisTraceabilityComponent, RelatedContentButtonComponent, SynthesisConfidenceSectionComponent, ThematicCategoryBadgeComponent],
                 template: `
     <div class="flex flex-col gap-6">
       <!-- Description and Expected Impact Side by Side -->
       <div class="flex flex-col lg:flex-row gap-6">
         <div class="flex-1">
+          @if (goal().thematicCategory) {
+            <div class="mb-3">
+              <symphiq-thematic-category-badge
+                [category]="goal().thematicCategory"
+                [viewMode]="viewMode()"
+              />
+            </div>
+          }
           @if (goal().description) {
             <p [ngClass]="descriptionClasses()" class="text-base leading-relaxed">
               {{ goal().description }}
@@ -101864,7 +101950,7 @@ class UnifiedGoalDetailModalContentComponent {
   `
             }]
     }], null, { goal: [{ type: i0.Input, args: [{ isSignal: true, alias: "goal", required: true }] }], allMetrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "allMetrics", required: false }] }], allCharts: [{ type: i0.Input, args: [{ isSignal: true, alias: "allCharts", required: false }] }], loadedSourceAnalysisIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadedSourceAnalysisIds", required: false }] }], loadingSourceAnalysisId: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingSourceAnalysisId", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], currentModalState: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentModalState", required: false }] }], sourceAnalysisClick: [{ type: i0.Output, args: ["sourceAnalysisClick"] }], metricClick: [{ type: i0.Output, args: ["metricClick"] }], contributingMetricsClick: [{ type: i0.Output, args: ["contributingMetricsClick"] }], showObjectives: [{ type: i0.Output, args: ["showObjectives"] }], close: [{ type: i0.Output, args: ["close"] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(UnifiedGoalDetailModalContentComponent, { className: "UnifiedGoalDetailModalContentComponent", filePath: "lib/components/profile-analysis-unified-dashboard/modals/unified-goal-detail-modal-content.component.ts", lineNumber: 110 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(UnifiedGoalDetailModalContentComponent, { className: "UnifiedGoalDetailModalContentComponent", filePath: "lib/components/profile-analysis-unified-dashboard/modals/unified-goal-detail-modal-content.component.ts", lineNumber: 119 }); })();
 
 const _forTrack0$7 = ($index, $item) => $item.metric;
 function UnifiedGoalRelatedMetricsModalContentComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
@@ -103773,7 +103859,6 @@ class SymphiqProfileAnalysisUnifiedDashboardComponent {
                 }
             }
         }
-        console.log(`[countByType] type=${type}, uniqueAnalysisIds=`, Array.from(uniqueAnalysisIds), 'uniqueGoalIds=', Array.from(uniqueGoalIds), 'sources=', debugSources);
         return { analyses: uniqueAnalysisIds.size, goals: uniqueGoalIds.size };
     }
     openSearch() {