@eric-emg/symphiq-components 1.2.85 → 1.2.86
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.
- package/fesm2022/symphiq-components.mjs +81 -204
- package/fesm2022/symphiq-components.mjs.map +1 -1
- package/index.d.ts +3 -5
- package/index.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -10862,110 +10862,110 @@ const _c0$6 = () => [];
|
|
|
10862
10862
|
function TooltipContainerComponent_Conditional_0_Case_3_Conditional_0_Template(rf, ctx) { if (rf & 1) {
|
|
10863
10863
|
i0.ɵɵelement(0, "symphiq-metric-value-tooltip", 6);
|
|
10864
10864
|
} if (rf & 2) {
|
|
10865
|
-
const
|
|
10866
|
-
i0.ɵɵproperty("content",
|
|
10865
|
+
const ctx_r0 = i0.ɵɵnextContext(3);
|
|
10866
|
+
i0.ɵɵproperty("content", ctx_r0.metricContent())("isLightMode", ctx_r0.isLightMode());
|
|
10867
10867
|
} }
|
|
10868
10868
|
function TooltipContainerComponent_Conditional_0_Case_3_Template(rf, ctx) { if (rf & 1) {
|
|
10869
10869
|
i0.ɵɵconditionalCreate(0, TooltipContainerComponent_Conditional_0_Case_3_Conditional_0_Template, 1, 2, "symphiq-metric-value-tooltip", 6);
|
|
10870
10870
|
} if (rf & 2) {
|
|
10871
|
-
const
|
|
10872
|
-
i0.ɵɵconditional(
|
|
10871
|
+
const ctx_r0 = i0.ɵɵnextContext(2);
|
|
10872
|
+
i0.ɵɵconditional(ctx_r0.metricContent() ? 0 : -1);
|
|
10873
10873
|
} }
|
|
10874
10874
|
function TooltipContainerComponent_Conditional_0_Case_4_Conditional_0_Template(rf, ctx) { if (rf & 1) {
|
|
10875
10875
|
i0.ɵɵelement(0, "symphiq-status-badge-tooltip", 6);
|
|
10876
10876
|
} if (rf & 2) {
|
|
10877
|
-
const
|
|
10878
|
-
i0.ɵɵproperty("content",
|
|
10877
|
+
const ctx_r0 = i0.ɵɵnextContext(3);
|
|
10878
|
+
i0.ɵɵproperty("content", ctx_r0.statusContent())("isLightMode", ctx_r0.isLightMode());
|
|
10879
10879
|
} }
|
|
10880
10880
|
function TooltipContainerComponent_Conditional_0_Case_4_Template(rf, ctx) { if (rf & 1) {
|
|
10881
10881
|
i0.ɵɵconditionalCreate(0, TooltipContainerComponent_Conditional_0_Case_4_Conditional_0_Template, 1, 2, "symphiq-status-badge-tooltip", 6);
|
|
10882
10882
|
} if (rf & 2) {
|
|
10883
|
-
const
|
|
10884
|
-
i0.ɵɵconditional(
|
|
10883
|
+
const ctx_r0 = i0.ɵɵnextContext(2);
|
|
10884
|
+
i0.ɵɵconditional(ctx_r0.statusContent() ? 0 : -1);
|
|
10885
10885
|
} }
|
|
10886
10886
|
function TooltipContainerComponent_Conditional_0_Case_5_Conditional_0_Template(rf, ctx) { if (rf & 1) {
|
|
10887
10887
|
i0.ɵɵelement(0, "symphiq-trend-indicator-tooltip", 6);
|
|
10888
10888
|
} if (rf & 2) {
|
|
10889
|
-
const
|
|
10890
|
-
i0.ɵɵproperty("content",
|
|
10889
|
+
const ctx_r0 = i0.ɵɵnextContext(3);
|
|
10890
|
+
i0.ɵɵproperty("content", ctx_r0.trendContent())("isLightMode", ctx_r0.isLightMode());
|
|
10891
10891
|
} }
|
|
10892
10892
|
function TooltipContainerComponent_Conditional_0_Case_5_Template(rf, ctx) { if (rf & 1) {
|
|
10893
10893
|
i0.ɵɵconditionalCreate(0, TooltipContainerComponent_Conditional_0_Case_5_Conditional_0_Template, 1, 2, "symphiq-trend-indicator-tooltip", 6);
|
|
10894
10894
|
} if (rf & 2) {
|
|
10895
|
-
const
|
|
10896
|
-
i0.ɵɵconditional(
|
|
10895
|
+
const ctx_r0 = i0.ɵɵnextContext(2);
|
|
10896
|
+
i0.ɵɵconditional(ctx_r0.trendContent() ? 0 : -1);
|
|
10897
10897
|
} }
|
|
10898
10898
|
function TooltipContainerComponent_Conditional_0_Case_6_Conditional_0_Template(rf, ctx) { if (rf & 1) {
|
|
10899
10899
|
i0.ɵɵelement(0, "symphiq-priority-badge-tooltip", 6);
|
|
10900
10900
|
} if (rf & 2) {
|
|
10901
|
-
const
|
|
10902
|
-
i0.ɵɵproperty("content",
|
|
10901
|
+
const ctx_r0 = i0.ɵɵnextContext(3);
|
|
10902
|
+
i0.ɵɵproperty("content", ctx_r0.priorityContent())("isLightMode", ctx_r0.isLightMode());
|
|
10903
10903
|
} }
|
|
10904
10904
|
function TooltipContainerComponent_Conditional_0_Case_6_Template(rf, ctx) { if (rf & 1) {
|
|
10905
10905
|
i0.ɵɵconditionalCreate(0, TooltipContainerComponent_Conditional_0_Case_6_Conditional_0_Template, 1, 2, "symphiq-priority-badge-tooltip", 6);
|
|
10906
10906
|
} if (rf & 2) {
|
|
10907
|
-
const
|
|
10908
|
-
i0.ɵɵconditional(
|
|
10907
|
+
const ctx_r0 = i0.ɵɵnextContext(2);
|
|
10908
|
+
i0.ɵɵconditional(ctx_r0.priorityContent() ? 0 : -1);
|
|
10909
10909
|
} }
|
|
10910
10910
|
function TooltipContainerComponent_Conditional_0_Case_7_Conditional_0_Template(rf, ctx) { if (rf & 1) {
|
|
10911
10911
|
i0.ɵɵelement(0, "symphiq-badge-tooltip", 6);
|
|
10912
10912
|
} if (rf & 2) {
|
|
10913
|
-
const
|
|
10914
|
-
i0.ɵɵproperty("content",
|
|
10913
|
+
const ctx_r0 = i0.ɵɵnextContext(3);
|
|
10914
|
+
i0.ɵɵproperty("content", ctx_r0.badgeContent())("isLightMode", ctx_r0.isLightMode());
|
|
10915
10915
|
} }
|
|
10916
10916
|
function TooltipContainerComponent_Conditional_0_Case_7_Template(rf, ctx) { if (rf & 1) {
|
|
10917
10917
|
i0.ɵɵconditionalCreate(0, TooltipContainerComponent_Conditional_0_Case_7_Conditional_0_Template, 1, 2, "symphiq-badge-tooltip", 6);
|
|
10918
10918
|
} if (rf & 2) {
|
|
10919
|
-
const
|
|
10920
|
-
i0.ɵɵconditional(
|
|
10919
|
+
const ctx_r0 = i0.ɵɵnextContext(2);
|
|
10920
|
+
i0.ɵɵconditional(ctx_r0.badgeContent() ? 0 : -1);
|
|
10921
10921
|
} }
|
|
10922
10922
|
function TooltipContainerComponent_Conditional_0_Case_8_Conditional_0_Template(rf, ctx) { if (rf & 1) {
|
|
10923
10923
|
i0.ɵɵelement(0, "symphiq-breakdown-row-tooltip", 6);
|
|
10924
10924
|
} if (rf & 2) {
|
|
10925
|
-
const
|
|
10926
|
-
i0.ɵɵproperty("content",
|
|
10925
|
+
const ctx_r0 = i0.ɵɵnextContext(3);
|
|
10926
|
+
i0.ɵɵproperty("content", ctx_r0.breakdownContent())("isLightMode", ctx_r0.isLightMode());
|
|
10927
10927
|
} }
|
|
10928
10928
|
function TooltipContainerComponent_Conditional_0_Case_8_Template(rf, ctx) { if (rf & 1) {
|
|
10929
10929
|
i0.ɵɵconditionalCreate(0, TooltipContainerComponent_Conditional_0_Case_8_Conditional_0_Template, 1, 2, "symphiq-breakdown-row-tooltip", 6);
|
|
10930
10930
|
} if (rf & 2) {
|
|
10931
|
-
const
|
|
10932
|
-
i0.ɵɵconditional(
|
|
10931
|
+
const ctx_r0 = i0.ɵɵnextContext(2);
|
|
10932
|
+
i0.ɵɵconditional(ctx_r0.breakdownContent() ? 0 : -1);
|
|
10933
10933
|
} }
|
|
10934
10934
|
function TooltipContainerComponent_Conditional_0_Case_9_Conditional_0_Template(rf, ctx) { if (rf & 1) {
|
|
10935
10935
|
i0.ɵɵelement(0, "symphiq-competitive-benchmark-tooltip", 6);
|
|
10936
10936
|
} if (rf & 2) {
|
|
10937
|
-
const
|
|
10938
|
-
i0.ɵɵproperty("content",
|
|
10937
|
+
const ctx_r0 = i0.ɵɵnextContext(3);
|
|
10938
|
+
i0.ɵɵproperty("content", ctx_r0.competitiveContent())("isLightMode", ctx_r0.isLightMode());
|
|
10939
10939
|
} }
|
|
10940
10940
|
function TooltipContainerComponent_Conditional_0_Case_9_Template(rf, ctx) { if (rf & 1) {
|
|
10941
10941
|
i0.ɵɵconditionalCreate(0, TooltipContainerComponent_Conditional_0_Case_9_Conditional_0_Template, 1, 2, "symphiq-competitive-benchmark-tooltip", 6);
|
|
10942
10942
|
} if (rf & 2) {
|
|
10943
|
-
const
|
|
10944
|
-
i0.ɵɵconditional(
|
|
10943
|
+
const ctx_r0 = i0.ɵɵnextContext(2);
|
|
10944
|
+
i0.ɵɵconditional(ctx_r0.competitiveContent() ? 0 : -1);
|
|
10945
10945
|
} }
|
|
10946
10946
|
function TooltipContainerComponent_Conditional_0_Case_10_Conditional_0_Template(rf, ctx) { if (rf & 1) {
|
|
10947
10947
|
i0.ɵɵelement(0, "symphiq-insights-list-tooltip", 6);
|
|
10948
10948
|
} if (rf & 2) {
|
|
10949
|
-
const
|
|
10950
|
-
i0.ɵɵproperty("content",
|
|
10949
|
+
const ctx_r0 = i0.ɵɵnextContext(3);
|
|
10950
|
+
i0.ɵɵproperty("content", ctx_r0.insightsListContent())("isLightMode", ctx_r0.isLightMode());
|
|
10951
10951
|
} }
|
|
10952
10952
|
function TooltipContainerComponent_Conditional_0_Case_10_Template(rf, ctx) { if (rf & 1) {
|
|
10953
10953
|
i0.ɵɵconditionalCreate(0, TooltipContainerComponent_Conditional_0_Case_10_Conditional_0_Template, 1, 2, "symphiq-insights-list-tooltip", 6);
|
|
10954
10954
|
} if (rf & 2) {
|
|
10955
|
-
const
|
|
10956
|
-
i0.ɵɵconditional(
|
|
10955
|
+
const ctx_r0 = i0.ɵɵnextContext(2);
|
|
10956
|
+
i0.ɵɵconditional(ctx_r0.insightsListContent() ? 0 : -1);
|
|
10957
10957
|
} }
|
|
10958
10958
|
function TooltipContainerComponent_Conditional_0_Case_11_Conditional_0_Template(rf, ctx) { if (rf & 1) {
|
|
10959
10959
|
i0.ɵɵelement(0, "symphiq-narrative-tooltip", 6);
|
|
10960
10960
|
} if (rf & 2) {
|
|
10961
|
-
const
|
|
10962
|
-
i0.ɵɵproperty("content",
|
|
10961
|
+
const ctx_r0 = i0.ɵɵnextContext(3);
|
|
10962
|
+
i0.ɵɵproperty("content", ctx_r0.narrativeContent())("isLightMode", ctx_r0.isLightMode());
|
|
10963
10963
|
} }
|
|
10964
10964
|
function TooltipContainerComponent_Conditional_0_Case_11_Template(rf, ctx) { if (rf & 1) {
|
|
10965
10965
|
i0.ɵɵconditionalCreate(0, TooltipContainerComponent_Conditional_0_Case_11_Conditional_0_Template, 1, 2, "symphiq-narrative-tooltip", 6);
|
|
10966
10966
|
} if (rf & 2) {
|
|
10967
|
-
const
|
|
10968
|
-
i0.ɵɵconditional(
|
|
10967
|
+
const ctx_r0 = i0.ɵɵnextContext(2);
|
|
10968
|
+
i0.ɵɵconditional(ctx_r0.narrativeContent() ? 0 : -1);
|
|
10969
10969
|
} }
|
|
10970
10970
|
function TooltipContainerComponent_Conditional_0_Case_12_Conditional_1_For_1_Template(rf, ctx) { if (rf & 1) {
|
|
10971
10971
|
i0.ɵɵelementStart(0, "div", 7)(1, "div", 8);
|
|
@@ -10975,18 +10975,18 @@ function TooltipContainerComponent_Conditional_0_Case_12_Conditional_1_For_1_Tem
|
|
|
10975
10975
|
i0.ɵɵtext(4);
|
|
10976
10976
|
i0.ɵɵelementEnd()();
|
|
10977
10977
|
} if (rf & 2) {
|
|
10978
|
-
const
|
|
10978
|
+
const section_r2 = ctx.$implicit;
|
|
10979
10979
|
i0.ɵɵadvance(2);
|
|
10980
|
-
i0.ɵɵtextInterpolate(
|
|
10980
|
+
i0.ɵɵtextInterpolate(section_r2.title);
|
|
10981
10981
|
i0.ɵɵadvance(2);
|
|
10982
|
-
i0.ɵɵtextInterpolate(
|
|
10982
|
+
i0.ɵɵtextInterpolate(section_r2.content);
|
|
10983
10983
|
} }
|
|
10984
10984
|
function TooltipContainerComponent_Conditional_0_Case_12_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
10985
10985
|
i0.ɵɵrepeaterCreate(0, TooltipContainerComponent_Conditional_0_Case_12_Conditional_1_For_1_Template, 5, 2, "div", 7, i0.ɵɵrepeaterTrackByIndex);
|
|
10986
10986
|
} if (rf & 2) {
|
|
10987
10987
|
i0.ɵɵnextContext(2);
|
|
10988
|
-
const
|
|
10989
|
-
i0.ɵɵrepeater(
|
|
10988
|
+
const content_r3 = i0.ɵɵreadContextLet(2);
|
|
10989
|
+
i0.ɵɵrepeater(content_r3["sections"] || i0.ɵɵpureFunction0(0, _c0$6));
|
|
10990
10990
|
} }
|
|
10991
10991
|
function TooltipContainerComponent_Conditional_0_Case_12_Template(rf, ctx) { if (rf & 1) {
|
|
10992
10992
|
i0.ɵɵelementStart(0, "div", 3);
|
|
@@ -10994,25 +10994,25 @@ function TooltipContainerComponent_Conditional_0_Case_12_Template(rf, ctx) { if
|
|
|
10994
10994
|
i0.ɵɵelementEnd();
|
|
10995
10995
|
} if (rf & 2) {
|
|
10996
10996
|
i0.ɵɵnextContext();
|
|
10997
|
-
const
|
|
10998
|
-
const
|
|
10999
|
-
i0.ɵɵproperty("ngClass",
|
|
10997
|
+
const content_r3 = i0.ɵɵreadContextLet(2);
|
|
10998
|
+
const ctx_r0 = i0.ɵɵnextContext();
|
|
10999
|
+
i0.ɵɵproperty("ngClass", ctx_r0.textClass());
|
|
11000
11000
|
i0.ɵɵadvance();
|
|
11001
|
-
i0.ɵɵconditional(
|
|
11001
|
+
i0.ɵɵconditional(content_r3 && typeof content_r3 === "object" && "sections" in content_r3 ? 1 : -1);
|
|
11002
11002
|
} }
|
|
11003
11003
|
function TooltipContainerComponent_Conditional_0_Case_13_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
11004
11004
|
i0.ɵɵtext(0);
|
|
11005
11005
|
} if (rf & 2) {
|
|
11006
11006
|
i0.ɵɵnextContext(2);
|
|
11007
|
-
const
|
|
11008
|
-
i0.ɵɵtextInterpolate1(" ",
|
|
11007
|
+
const content_r3 = i0.ɵɵreadContextLet(2);
|
|
11008
|
+
i0.ɵɵtextInterpolate1(" ", content_r3["text"], " ");
|
|
11009
11009
|
} }
|
|
11010
11010
|
function TooltipContainerComponent_Conditional_0_Case_13_Conditional_2_Template(rf, ctx) { if (rf & 1) {
|
|
11011
11011
|
i0.ɵɵtext(0);
|
|
11012
11012
|
} if (rf & 2) {
|
|
11013
11013
|
i0.ɵɵnextContext(2);
|
|
11014
|
-
const
|
|
11015
|
-
i0.ɵɵtextInterpolate1(" ",
|
|
11014
|
+
const content_r3 = i0.ɵɵreadContextLet(2);
|
|
11015
|
+
i0.ɵɵtextInterpolate1(" ", content_r3, " ");
|
|
11016
11016
|
} }
|
|
11017
11017
|
function TooltipContainerComponent_Conditional_0_Case_13_Template(rf, ctx) { if (rf & 1) {
|
|
11018
11018
|
i0.ɵɵelementStart(0, "div", 4);
|
|
@@ -11020,11 +11020,11 @@ function TooltipContainerComponent_Conditional_0_Case_13_Template(rf, ctx) { if
|
|
|
11020
11020
|
i0.ɵɵelementEnd();
|
|
11021
11021
|
} if (rf & 2) {
|
|
11022
11022
|
i0.ɵɵnextContext();
|
|
11023
|
-
const
|
|
11024
|
-
const
|
|
11025
|
-
i0.ɵɵproperty("ngClass",
|
|
11023
|
+
const content_r3 = i0.ɵɵreadContextLet(2);
|
|
11024
|
+
const ctx_r0 = i0.ɵɵnextContext();
|
|
11025
|
+
i0.ɵɵproperty("ngClass", ctx_r0.textClass());
|
|
11026
11026
|
i0.ɵɵadvance();
|
|
11027
|
-
i0.ɵɵconditional(
|
|
11027
|
+
i0.ɵɵconditional(content_r3 && typeof content_r3 === "object" && "text" in content_r3 ? 1 : 2);
|
|
11028
11028
|
} }
|
|
11029
11029
|
function TooltipContainerComponent_Conditional_0_Case_14_Template(rf, ctx) { if (rf & 1) {
|
|
11030
11030
|
i0.ɵɵelementStart(0, "div", 5);
|
|
@@ -11032,31 +11032,29 @@ function TooltipContainerComponent_Conditional_0_Case_14_Template(rf, ctx) { if
|
|
|
11032
11032
|
i0.ɵɵelementEnd();
|
|
11033
11033
|
} if (rf & 2) {
|
|
11034
11034
|
i0.ɵɵnextContext();
|
|
11035
|
-
const
|
|
11036
|
-
const
|
|
11037
|
-
i0.ɵɵproperty("ngClass",
|
|
11035
|
+
const content_r3 = i0.ɵɵreadContextLet(2);
|
|
11036
|
+
const ctx_r0 = i0.ɵɵnextContext();
|
|
11037
|
+
i0.ɵɵproperty("ngClass", ctx_r0.textClass());
|
|
11038
11038
|
i0.ɵɵadvance();
|
|
11039
|
-
i0.ɵɵtextInterpolate1(" ",
|
|
11039
|
+
i0.ɵɵtextInterpolate1(" ", content_r3, " ");
|
|
11040
11040
|
} }
|
|
11041
11041
|
function TooltipContainerComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
|
|
11042
|
-
const _r1 = i0.ɵɵgetCurrentView();
|
|
11043
11042
|
i0.ɵɵelementStart(0, "div", 1)(1, "div", 2);
|
|
11044
|
-
i0.ɵɵlistener("mouseenter", function TooltipContainerComponent_Conditional_0_Template_div_mouseenter_1_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onTooltipMouseEnter()); })("mouseleave", function TooltipContainerComponent_Conditional_0_Template_div_mouseleave_1_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onTooltipMouseLeave()); });
|
|
11045
11043
|
i0.ɵɵdeclareLet(2);
|
|
11046
11044
|
i0.ɵɵconditionalCreate(3, TooltipContainerComponent_Conditional_0_Case_3_Template, 1, 1)(4, TooltipContainerComponent_Conditional_0_Case_4_Template, 1, 1)(5, TooltipContainerComponent_Conditional_0_Case_5_Template, 1, 1)(6, TooltipContainerComponent_Conditional_0_Case_6_Template, 1, 1)(7, TooltipContainerComponent_Conditional_0_Case_7_Template, 1, 1)(8, TooltipContainerComponent_Conditional_0_Case_8_Template, 1, 1)(9, TooltipContainerComponent_Conditional_0_Case_9_Template, 1, 1)(10, TooltipContainerComponent_Conditional_0_Case_10_Template, 1, 1)(11, TooltipContainerComponent_Conditional_0_Case_11_Template, 1, 1)(12, TooltipContainerComponent_Conditional_0_Case_12_Template, 2, 2, "div", 3)(13, TooltipContainerComponent_Conditional_0_Case_13_Template, 3, 2, "div", 4)(14, TooltipContainerComponent_Conditional_0_Case_14_Template, 2, 2, "div", 5);
|
|
11047
11045
|
i0.ɵɵelementEnd()();
|
|
11048
11046
|
} if (rf & 2) {
|
|
11049
|
-
let
|
|
11050
|
-
const
|
|
11051
|
-
i0.ɵɵstyleMap("position: fixed; left: " +
|
|
11052
|
-
i0.ɵɵ
|
|
11047
|
+
let tmp_6_0;
|
|
11048
|
+
const ctx_r0 = i0.ɵɵnextContext();
|
|
11049
|
+
i0.ɵɵstyleMap("position: fixed; left: " + ctx_r0.tooltipLeft() + "px; top: " + ctx_r0.tooltipTop() + "px; margin: 0; padding: 0; width: 24rem;");
|
|
11050
|
+
i0.ɵɵproperty("@fadeInScale", undefined);
|
|
11053
11051
|
i0.ɵɵadvance();
|
|
11054
|
-
i0.ɵɵstyleMap("transform: " +
|
|
11055
|
-
i0.ɵɵproperty("ngClass",
|
|
11052
|
+
i0.ɵɵstyleMap("transform: " + ctx_r0.transformStyle() + "; min-width: 12rem; box-sizing: border-box;");
|
|
11053
|
+
i0.ɵɵproperty("ngClass", ctx_r0.contentClass());
|
|
11056
11054
|
i0.ɵɵadvance();
|
|
11057
|
-
i0.ɵɵstoreLet(
|
|
11055
|
+
i0.ɵɵstoreLet(ctx_r0.tooltipContent());
|
|
11058
11056
|
i0.ɵɵadvance();
|
|
11059
|
-
i0.ɵɵconditional((
|
|
11057
|
+
i0.ɵɵconditional((tmp_6_0 = ctx_r0.tooltipType()) === "metric" ? 3 : tmp_6_0 === "status" ? 4 : tmp_6_0 === "trend" ? 5 : tmp_6_0 === "priority" ? 6 : tmp_6_0 === "badge" ? 7 : tmp_6_0 === "breakdown" ? 8 : tmp_6_0 === "competitive" ? 9 : tmp_6_0 === "insightsList" ? 10 : tmp_6_0 === "narrative" ? 11 : tmp_6_0 === "insight" ? 12 : tmp_6_0 === "text" ? 13 : 14);
|
|
11060
11058
|
} }
|
|
11061
11059
|
class TooltipContainerComponent {
|
|
11062
11060
|
constructor() {
|
|
@@ -11120,14 +11118,10 @@ class TooltipContainerComponent {
|
|
|
11120
11118
|
return this.tooltipType() === 'narrative' ? content : null;
|
|
11121
11119
|
}, ...(ngDevMode ? [{ debugName: "narrativeContent" }] : []));
|
|
11122
11120
|
this.tooltipLeft = computed(() => {
|
|
11123
|
-
|
|
11124
|
-
console.log('📍 [FINAL tooltipLeft]', left);
|
|
11125
|
-
return left;
|
|
11121
|
+
return this.calculateLeft();
|
|
11126
11122
|
}, ...(ngDevMode ? [{ debugName: "tooltipLeft" }] : []));
|
|
11127
11123
|
this.tooltipTop = computed(() => {
|
|
11128
|
-
|
|
11129
|
-
console.log('📍 [FINAL tooltipTop]', top);
|
|
11130
|
-
return top;
|
|
11124
|
+
return this.calculateTop();
|
|
11131
11125
|
}, ...(ngDevMode ? [{ debugName: "tooltipTop" }] : []));
|
|
11132
11126
|
this.shouldCenter = computed(() => {
|
|
11133
11127
|
const rect = this.targetRect();
|
|
@@ -11151,19 +11145,8 @@ class TooltipContainerComponent {
|
|
|
11151
11145
|
// Convert effective bounds back to viewport coordinates for comparison
|
|
11152
11146
|
const viewportEffectiveLeft = effectiveLeft + ancestorOffset;
|
|
11153
11147
|
const viewportEffectiveRight = effectiveRight + ancestorOffset;
|
|
11154
|
-
console.log('🎯 [shouldCenter calculation]', {
|
|
11155
|
-
position,
|
|
11156
|
-
ancestorOffset,
|
|
11157
|
-
effectiveLeft,
|
|
11158
|
-
effectiveRight,
|
|
11159
|
-
viewportEffectiveLeft,
|
|
11160
|
-
viewportEffectiveRight,
|
|
11161
|
-
'rect.left': rect.left,
|
|
11162
|
-
'rect.width': rect.width
|
|
11163
|
-
});
|
|
11164
11148
|
// For 'auto' positioning, always center horizontally
|
|
11165
11149
|
if (position === 'auto') {
|
|
11166
|
-
console.log('✅ [shouldCenter] auto = true');
|
|
11167
11150
|
return true;
|
|
11168
11151
|
}
|
|
11169
11152
|
if (position === 'top' || position === 'bottom') {
|
|
@@ -11171,49 +11154,15 @@ class TooltipContainerComponent {
|
|
|
11171
11154
|
const halfWidth = tooltipWidth / 2;
|
|
11172
11155
|
const wouldGoOffLeft = centerPosition - halfWidth < viewportEffectiveLeft + padding;
|
|
11173
11156
|
const wouldGoOffRight = centerPosition + halfWidth > viewportEffectiveRight - padding;
|
|
11174
|
-
|
|
11175
|
-
console.log('🎯 [shouldCenter] top/bottom', {
|
|
11176
|
-
centerPosition,
|
|
11177
|
-
halfWidth,
|
|
11178
|
-
wouldGoOffLeft,
|
|
11179
|
-
wouldGoOffRight,
|
|
11180
|
-
result
|
|
11181
|
-
});
|
|
11182
|
-
return result;
|
|
11157
|
+
return !wouldGoOffLeft && !wouldGoOffRight;
|
|
11183
11158
|
}
|
|
11184
|
-
console.log('❌ [shouldCenter] other position = false');
|
|
11185
11159
|
return false;
|
|
11186
11160
|
}, ...(ngDevMode ? [{ debugName: "shouldCenter" }] : []));
|
|
11187
11161
|
this.containerClass = computed(() => {
|
|
11188
11162
|
const position = this.tooltipPosition();
|
|
11189
11163
|
if (position === 'top' || position === 'bottom' || position === 'auto') {
|
|
11190
|
-
|
|
11191
|
-
const classes = shouldCenter ? '-translate-x-1/2' : '';
|
|
11192
|
-
const left = this.tooltipLeft();
|
|
11193
|
-
const rect = this.targetRect();
|
|
11194
|
-
const bounds = this.viewportBounds();
|
|
11195
|
-
console.log('═══════════════════════════════════════');
|
|
11196
|
-
console.log('🎨 [FINAL RENDER STATE]');
|
|
11197
|
-
console.log('═══════════════════════════════════════');
|
|
11198
|
-
console.log('Position:', position);
|
|
11199
|
-
console.log('Should Center:', shouldCenter);
|
|
11200
|
-
console.log('CSS Classes:', classes || '(none)');
|
|
11201
|
-
console.log('style.left will be:', left + 'px');
|
|
11202
|
-
console.log('Target rect.left:', rect?.left);
|
|
11203
|
-
console.log('Target center:', rect ? rect.left + rect.width / 2 : 'N/A');
|
|
11204
|
-
console.log('Viewport bounds:', bounds);
|
|
11205
|
-
console.log('');
|
|
11206
|
-
console.log('EXPECTED RESULT:');
|
|
11207
|
-
if (shouldCenter) {
|
|
11208
|
-
console.log('✅ Tooltip LEFT edge at', left, '+ transform -50% = CENTER at', left);
|
|
11209
|
-
}
|
|
11210
|
-
else {
|
|
11211
|
-
console.log('❌ Tooltip LEFT edge at', left, '(no centering transform)');
|
|
11212
|
-
}
|
|
11213
|
-
console.log('═══════════════════════════════════════');
|
|
11214
|
-
return classes;
|
|
11164
|
+
return this.shouldCenter() ? '-translate-x-1/2' : '';
|
|
11215
11165
|
}
|
|
11216
|
-
console.log('📦 [containerClass] no centering');
|
|
11217
11166
|
return '';
|
|
11218
11167
|
}, ...(ngDevMode ? [{ debugName: "containerClass" }] : []));
|
|
11219
11168
|
this.contentClass = computed(() => this.isLightMode()
|
|
@@ -11224,9 +11173,7 @@ class TooltipContainerComponent {
|
|
|
11224
11173
|
const centered = this.shouldCenter();
|
|
11225
11174
|
// Use fixed pixel value instead of percentage to avoid timing issues
|
|
11226
11175
|
// max-w-sm (384px) / 2 = 192px
|
|
11227
|
-
|
|
11228
|
-
console.log('🎨 [transformStyle]', { centered, transform });
|
|
11229
|
-
return transform;
|
|
11176
|
+
return centered ? 'translateX(-192px)' : 'none';
|
|
11230
11177
|
}, ...(ngDevMode ? [{ debugName: "transformStyle" }] : []));
|
|
11231
11178
|
this.tooltipService.tooltipState$
|
|
11232
11179
|
.pipe(takeUntilDestroyed())
|
|
@@ -11248,15 +11195,6 @@ class TooltipContainerComponent {
|
|
|
11248
11195
|
}
|
|
11249
11196
|
});
|
|
11250
11197
|
}
|
|
11251
|
-
onTooltipMouseEnter() {
|
|
11252
|
-
// DEBUGGING: Keep tooltip visible
|
|
11253
|
-
// this.tooltipService.setTooltipHovered(true);
|
|
11254
|
-
}
|
|
11255
|
-
onTooltipMouseLeave() {
|
|
11256
|
-
// DEBUGGING: Keep tooltip visible
|
|
11257
|
-
// this.tooltipService.setTooltipHovered(false);
|
|
11258
|
-
// this.tooltipService.triggerHideCheck();
|
|
11259
|
-
}
|
|
11260
11198
|
calculateLeft() {
|
|
11261
11199
|
const rect = this.targetRect();
|
|
11262
11200
|
if (!rect)
|
|
@@ -11265,18 +11203,6 @@ class TooltipContainerComponent {
|
|
|
11265
11203
|
// When an ancestor has transform, position:fixed is relative to that ancestor, not viewport
|
|
11266
11204
|
const transformedAncestor = this.findTransformedAncestor();
|
|
11267
11205
|
const ancestorOffset = transformedAncestor ? transformedAncestor.getBoundingClientRect().left : 0;
|
|
11268
|
-
console.log('🎯🎯🎯 [RECT FROM DIRECTIVE] 🎯🎯🎯', {
|
|
11269
|
-
left: rect.left,
|
|
11270
|
-
right: rect.right,
|
|
11271
|
-
top: rect.top,
|
|
11272
|
-
bottom: rect.bottom,
|
|
11273
|
-
width: rect.width,
|
|
11274
|
-
height: rect.height,
|
|
11275
|
-
x: rect.x,
|
|
11276
|
-
y: rect.y,
|
|
11277
|
-
ancestorOffset,
|
|
11278
|
-
transformedAncestor: transformedAncestor?.tagName
|
|
11279
|
-
});
|
|
11280
11206
|
const position = this.tooltipPosition();
|
|
11281
11207
|
const mousePos = this.mousePosition();
|
|
11282
11208
|
const tooltipWidth = 384;
|
|
@@ -11292,18 +11218,6 @@ class TooltipContainerComponent {
|
|
|
11292
11218
|
effectiveLeft = bounds.left - ancestorOffset;
|
|
11293
11219
|
effectiveRight = bounds.right - ancestorOffset;
|
|
11294
11220
|
}
|
|
11295
|
-
console.log('🔍 [Tooltip calculateLeft]', {
|
|
11296
|
-
position,
|
|
11297
|
-
'rect.left': rect.left,
|
|
11298
|
-
'rect.right': rect.right,
|
|
11299
|
-
'rect.width': rect.width,
|
|
11300
|
-
tooltipWidth,
|
|
11301
|
-
bounds,
|
|
11302
|
-
ancestorOffset,
|
|
11303
|
-
effectiveLeft,
|
|
11304
|
-
effectiveRight,
|
|
11305
|
-
'window.innerWidth': window.innerWidth
|
|
11306
|
-
});
|
|
11307
11221
|
// Handle 'auto' positioning with mouse coordinates
|
|
11308
11222
|
if (position === 'auto' && mousePos) {
|
|
11309
11223
|
const halfWidth = tooltipWidth / 2;
|
|
@@ -11331,66 +11245,37 @@ class TooltipContainerComponent {
|
|
|
11331
11245
|
// Check if centered tooltip would go off bounds (all in viewport coordinates)
|
|
11332
11246
|
const wouldGoOffLeft = centerPosition - halfWidth < viewportEffectiveLeft + padding;
|
|
11333
11247
|
const wouldGoOffRight = centerPosition + halfWidth > viewportEffectiveRight - padding;
|
|
11334
|
-
console.log('📍 [Tooltip top/bottom calculation]', {
|
|
11335
|
-
centerPosition,
|
|
11336
|
-
halfWidth,
|
|
11337
|
-
ancestorOffset,
|
|
11338
|
-
effectiveLeft,
|
|
11339
|
-
effectiveRight,
|
|
11340
|
-
viewportEffectiveLeft,
|
|
11341
|
-
viewportEffectiveRight,
|
|
11342
|
-
'centerPosition - halfWidth': centerPosition - halfWidth,
|
|
11343
|
-
'centerPosition + halfWidth': centerPosition + halfWidth,
|
|
11344
|
-
wouldGoOffLeft,
|
|
11345
|
-
wouldGoOffRight,
|
|
11346
|
-
'viewportEffectiveLeft + padding': viewportEffectiveLeft + padding,
|
|
11347
|
-
'viewportEffectiveRight - padding': viewportEffectiveRight - padding
|
|
11348
|
-
});
|
|
11349
11248
|
if (wouldGoOffLeft) {
|
|
11350
11249
|
// Align to left edge with padding (no transform applied, so this is the actual left edge)
|
|
11351
|
-
|
|
11352
|
-
console.log('⬅️ [Tooltip adjusting LEFT]', { result, effectiveLeft, tooltipWidth });
|
|
11353
|
-
return result;
|
|
11250
|
+
return effectiveLeft + padding;
|
|
11354
11251
|
}
|
|
11355
11252
|
else if (wouldGoOffRight) {
|
|
11356
11253
|
// Align to right edge with padding (no transform applied, so this is the actual left edge)
|
|
11357
|
-
|
|
11358
|
-
console.log('➡️ [Tooltip adjusting RIGHT]', { result, effectiveRight, tooltipWidth });
|
|
11359
|
-
return result;
|
|
11254
|
+
return effectiveRight - padding - tooltipWidth;
|
|
11360
11255
|
}
|
|
11361
11256
|
else {
|
|
11362
11257
|
// Center normally (transform will be applied to shift by -50%)
|
|
11363
|
-
|
|
11364
|
-
console.log('🎯 [Tooltip centered]', { centerPosition, ancestorOffset, result });
|
|
11365
|
-
return result;
|
|
11258
|
+
return centerPosition - ancestorOffset;
|
|
11366
11259
|
}
|
|
11367
11260
|
}
|
|
11368
11261
|
case 'left': {
|
|
11369
11262
|
const leftPosition = rect.left - tooltipWidth - 8;
|
|
11370
11263
|
// If tooltip would go off left edge, position it to the right instead
|
|
11371
11264
|
if (leftPosition < effectiveLeft + padding) {
|
|
11372
|
-
|
|
11373
|
-
console.log('⬅️➡️ [Tooltip LEFT flipped to RIGHT]', { leftPosition, result, ancestorOffset });
|
|
11374
|
-
return result;
|
|
11265
|
+
return rect.right + 8 - ancestorOffset;
|
|
11375
11266
|
}
|
|
11376
|
-
console.log('⬅️ [Tooltip LEFT]', { leftPosition, ancestorOffset });
|
|
11377
11267
|
return leftPosition - ancestorOffset;
|
|
11378
11268
|
}
|
|
11379
11269
|
case 'right': {
|
|
11380
11270
|
const rightPosition = rect.right + 8;
|
|
11381
11271
|
// If tooltip would go off right edge, position it to the left instead
|
|
11382
11272
|
if (rightPosition + tooltipWidth > effectiveRight - padding) {
|
|
11383
|
-
|
|
11384
|
-
console.log('➡️⬅️ [Tooltip RIGHT flipped to LEFT]', { rightPosition, result, ancestorOffset });
|
|
11385
|
-
return result;
|
|
11273
|
+
return rect.left - tooltipWidth - 8 - ancestorOffset;
|
|
11386
11274
|
}
|
|
11387
|
-
console.log('➡️ [Tooltip RIGHT]', { rightPosition, ancestorOffset });
|
|
11388
11275
|
return rightPosition - ancestorOffset;
|
|
11389
11276
|
}
|
|
11390
11277
|
default:
|
|
11391
|
-
|
|
11392
|
-
console.log('🔄 [Tooltip DEFAULT]', { defaultResult, ancestorOffset });
|
|
11393
|
-
return defaultResult;
|
|
11278
|
+
return rect.left + rect.width / 2 - ancestorOffset;
|
|
11394
11279
|
}
|
|
11395
11280
|
}
|
|
11396
11281
|
calculateTop() {
|
|
@@ -11472,11 +11357,6 @@ class TooltipContainerComponent {
|
|
|
11472
11357
|
const transform = style.transform;
|
|
11473
11358
|
// Check if element has any transform (including identity transforms like matrix3d)
|
|
11474
11359
|
if (transform && transform !== 'none') {
|
|
11475
|
-
console.log('🔍 [Found transformed ancestor]', {
|
|
11476
|
-
tagName: element.tagName,
|
|
11477
|
-
transform,
|
|
11478
|
-
rect: element.getBoundingClientRect()
|
|
11479
|
-
});
|
|
11480
11360
|
return element;
|
|
11481
11361
|
}
|
|
11482
11362
|
element = element.parentElement;
|
|
@@ -11486,8 +11366,8 @@ class TooltipContainerComponent {
|
|
|
11486
11366
|
static { this.ɵfac = function TooltipContainerComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TooltipContainerComponent)(); }; }
|
|
11487
11367
|
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TooltipContainerComponent, selectors: [["symphiq-tooltip-container"]], hostVars: 2, hostBindings: function TooltipContainerComponent_HostBindings(rf, ctx) { if (rf & 2) {
|
|
11488
11368
|
i0.ɵɵstyleProp("display", "contents");
|
|
11489
|
-
} }, decls: 1, vars: 1, consts: [[1, "z-[100]", "pointer-events-none", 3, "style"], [1, "z-[100]", "pointer-events-none"], [1, "rounded-lg", "shadow-2xl", "border", "backdrop-blur-xl", "px-4", "py-3", "pointer-events-auto", 3, "
|
|
11490
|
-
i0.ɵɵconditionalCreate(0, TooltipContainerComponent_Conditional_0_Template, 15,
|
|
11369
|
+
} }, decls: 1, vars: 1, consts: [[1, "z-[100]", "pointer-events-none", 3, "style"], [1, "z-[100]", "pointer-events-none"], [1, "rounded-lg", "shadow-2xl", "border", "backdrop-blur-xl", "px-4", "py-3", "pointer-events-auto", 3, "ngClass"], [1, "text-sm", "space-y-3", 3, "ngClass"], [1, "text-sm", "whitespace-pre-line", "leading-relaxed", 3, "ngClass"], [1, "text-sm", "whitespace-pre-line", 3, "ngClass"], [3, "content", "isLightMode"], [1, "space-y-2"], [1, "font-semibold"], [1, "whitespace-pre-line", "leading-relaxed"]], template: function TooltipContainerComponent_Template(rf, ctx) { if (rf & 1) {
|
|
11370
|
+
i0.ɵɵconditionalCreate(0, TooltipContainerComponent_Conditional_0_Template, 15, 8, "div", 0);
|
|
11491
11371
|
} if (rf & 2) {
|
|
11492
11372
|
i0.ɵɵconditional(ctx.isVisible() ? 0 : -1);
|
|
11493
11373
|
} }, dependencies: [CommonModule, i1.NgClass, MetricValueTooltipComponent,
|
|
@@ -11545,16 +11425,13 @@ class TooltipContainerComponent {
|
|
|
11545
11425
|
template: `
|
|
11546
11426
|
@if (isVisible()) {
|
|
11547
11427
|
<div
|
|
11428
|
+
[@fadeInScale]
|
|
11548
11429
|
[style]="'position: fixed; left: ' + tooltipLeft() + 'px; top: ' + tooltipTop() + 'px; margin: 0; padding: 0; width: 24rem;'"
|
|
11549
|
-
[attr.data-debug-left]="tooltipLeft()"
|
|
11550
|
-
[attr.data-debug-transform]="transformStyle()"
|
|
11551
11430
|
class="z-[100] pointer-events-none">
|
|
11552
11431
|
<div
|
|
11553
11432
|
[ngClass]="contentClass()"
|
|
11554
11433
|
class="rounded-lg shadow-2xl border backdrop-blur-xl px-4 py-3 pointer-events-auto"
|
|
11555
|
-
[style]="'transform: ' + transformStyle() + '; min-width: 12rem; box-sizing: border-box;'"
|
|
11556
|
-
(mouseenter)="onTooltipMouseEnter()"
|
|
11557
|
-
(mouseleave)="onTooltipMouseLeave()">
|
|
11434
|
+
[style]="'transform: ' + transformStyle() + '; min-width: 12rem; box-sizing: border-box;'">
|
|
11558
11435
|
@let content = tooltipContent();
|
|
11559
11436
|
@switch (tooltipType()) {
|
|
11560
11437
|
@case ('metric') {
|
|
@@ -11653,7 +11530,7 @@ class TooltipContainerComponent {
|
|
|
11653
11530
|
`
|
|
11654
11531
|
}]
|
|
11655
11532
|
}], () => [], null); })();
|
|
11656
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TooltipContainerComponent, { className: "TooltipContainerComponent", filePath: "lib/components/funnel-analysis-dashboard/tooltip/tooltip-container.component.ts", lineNumber:
|
|
11533
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TooltipContainerComponent, { className: "TooltipContainerComponent", filePath: "lib/components/funnel-analysis-dashboard/tooltip/tooltip-container.component.ts", lineNumber: 173 }); })();
|
|
11657
11534
|
|
|
11658
11535
|
function MobileFABComponent_Conditional_1_Conditional_5_Template(rf, ctx) { if (rf & 1) {
|
|
11659
11536
|
i0.ɵɵnamespaceSVG();
|