@eric-emg/symphiq-components 1.2.228 → 1.2.229
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 +26 -73
- package/fesm2022/symphiq-components.mjs.map +1 -1
- package/index.d.ts +7 -7
- package/package.json +1 -1
- package/styles.css +6 -138
|
@@ -54807,7 +54807,6 @@ function PacingStatusBadgeComponent_Conditional_0_Template(rf, ctx) { if (rf & 1
|
|
|
54807
54807
|
} if (rf & 2) {
|
|
54808
54808
|
const ctx_r0 = i0.ɵɵnextContext();
|
|
54809
54809
|
i0.ɵɵadvance();
|
|
54810
|
-
i0.ɵɵclassMap(ctx_r0.overlayPositionClasses());
|
|
54811
54810
|
i0.ɵɵproperty("ngClass", ctx_r0.overlayBadgeClasses());
|
|
54812
54811
|
i0.ɵɵadvance();
|
|
54813
54812
|
i0.ɵɵtextInterpolate1(" ", ctx_r0.extractPercentage(), " ");
|
|
@@ -54859,16 +54858,11 @@ class PacingStatusBadgeComponent {
|
|
|
54859
54858
|
}, ...(ngDevMode ? [{ debugName: "badgeClasses" }] : []));
|
|
54860
54859
|
this.sizeClasses = computed(() => {
|
|
54861
54860
|
const isCompact = this.isCompact();
|
|
54862
|
-
const showEmphasized = this.showEmphasizedPercentage();
|
|
54863
54861
|
const baseClasses = 'inline-flex items-center gap-1.5 rounded-lg border font-semibold transition-all';
|
|
54864
54862
|
if (isCompact) {
|
|
54865
|
-
return
|
|
54866
|
-
? `${baseClasses} px-2.5 py-1 pt-2.5 text-xs`
|
|
54867
|
-
: `${baseClasses} px-2.5 py-1 text-xs`;
|
|
54863
|
+
return `${baseClasses} px-2.5 py-1 text-xs`;
|
|
54868
54864
|
}
|
|
54869
|
-
return
|
|
54870
|
-
? `${baseClasses} px-3 py-1.5 pt-3 text-xs`
|
|
54871
|
-
: `${baseClasses} px-3 py-1.5 text-xs`;
|
|
54865
|
+
return `${baseClasses} px-3 py-1.5 text-xs`;
|
|
54872
54866
|
}, ...(ngDevMode ? [{ debugName: "sizeClasses" }] : []));
|
|
54873
54867
|
this.iconClasses = computed(() => {
|
|
54874
54868
|
return this.displayInfo().colorClass;
|
|
@@ -54890,6 +54884,12 @@ class PacingStatusBadgeComponent {
|
|
|
54890
54884
|
}
|
|
54891
54885
|
return this.displayInfo().displayText;
|
|
54892
54886
|
}, ...(ngDevMode ? [{ debugName: "displayText" }] : []));
|
|
54887
|
+
this.hasPercentage = computed(() => {
|
|
54888
|
+
const fullText = this.showAsFullText()
|
|
54889
|
+
? formatPacingDisplayFullText(this.pacingPercentage(), this.status())
|
|
54890
|
+
: this.displayInfo().displayText;
|
|
54891
|
+
return /\d+\.?\d*%/.test(fullText);
|
|
54892
|
+
}, ...(ngDevMode ? [{ debugName: "hasPercentage" }] : []));
|
|
54893
54893
|
this.extractPercentage = computed(() => {
|
|
54894
54894
|
const fullText = this.showAsFullText()
|
|
54895
54895
|
? formatPacingDisplayFullText(this.pacingPercentage(), this.status())
|
|
@@ -54905,44 +54905,17 @@ class PacingStatusBadgeComponent {
|
|
|
54905
54905
|
return textWithoutPercentage;
|
|
54906
54906
|
}, ...(ngDevMode ? [{ debugName: "displayTextWithoutPercentage" }] : []));
|
|
54907
54907
|
this.overlayBadgeClasses = computed(() => {
|
|
54908
|
-
const
|
|
54909
|
-
const status = this.status();
|
|
54908
|
+
const info = this.displayInfo();
|
|
54910
54909
|
const isCompact = this.isCompact();
|
|
54911
|
-
const baseClasses = 'px-2.5 py-0.5 rounded-md font-extrabold tracking-tight';
|
|
54912
54910
|
const sizeClass = isCompact ? 'text-xs' : 'text-sm';
|
|
54913
|
-
|
|
54914
|
-
if (status === 'ahead') {
|
|
54915
|
-
return `${baseClasses} ${sizeClass} bg-emerald-500/95 text-white border-emerald-400/50 shadow-emerald-500/50`;
|
|
54916
|
-
}
|
|
54917
|
-
else if (status === 'behind') {
|
|
54918
|
-
return `${baseClasses} ${sizeClass} bg-rose-500/95 text-white border-rose-400/50 shadow-rose-500/50`;
|
|
54919
|
-
}
|
|
54920
|
-
else {
|
|
54921
|
-
return `${baseClasses} ${sizeClass} bg-amber-500/95 text-white border-amber-400/50 shadow-amber-500/50`;
|
|
54922
|
-
}
|
|
54923
|
-
}
|
|
54924
|
-
else {
|
|
54925
|
-
if (status === 'ahead') {
|
|
54926
|
-
return `${baseClasses} ${sizeClass} bg-emerald-600 text-white border-emerald-500 shadow-emerald-600/50`;
|
|
54927
|
-
}
|
|
54928
|
-
else if (status === 'behind') {
|
|
54929
|
-
return `${baseClasses} ${sizeClass} bg-rose-600 text-white border-rose-500 shadow-rose-600/50`;
|
|
54930
|
-
}
|
|
54931
|
-
else {
|
|
54932
|
-
return `${baseClasses} ${sizeClass} bg-amber-600 text-white border-amber-500 shadow-amber-600/50`;
|
|
54933
|
-
}
|
|
54934
|
-
}
|
|
54911
|
+
return `${info.bgClass} ${info.colorClass} ${info.borderClass} ${sizeClass}`;
|
|
54935
54912
|
}, ...(ngDevMode ? [{ debugName: "overlayBadgeClasses" }] : []));
|
|
54936
|
-
this.overlayPositionClasses = computed(() => {
|
|
54937
|
-
const isCompact = this.isCompact();
|
|
54938
|
-
return isCompact ? '-top-0.5 left-1.5' : '-top-1 left-2';
|
|
54939
|
-
}, ...(ngDevMode ? [{ debugName: "overlayPositionClasses" }] : []));
|
|
54940
54913
|
}
|
|
54941
54914
|
static { this.ɵfac = function PacingStatusBadgeComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PacingStatusBadgeComponent)(); }; }
|
|
54942
|
-
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PacingStatusBadgeComponent, selectors: [["symphiq-pacing-status-badge"]], inputs: { viewMode: [1, "viewMode"], pacingPercentage: [1, "pacingPercentage"], status: [1, "status"], showAsFullText: [1, "showAsFullText"], isCompact: [1, "isCompact"], showEmphasizedPercentage: [1, "showEmphasizedPercentage"] }, decls: 2, vars: 1, consts: [[1, "
|
|
54943
|
-
i0.ɵɵconditionalCreate(0, PacingStatusBadgeComponent_Conditional_0_Template, 8,
|
|
54915
|
+
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PacingStatusBadgeComponent, selectors: [["symphiq-pacing-status-badge"]], inputs: { viewMode: [1, "viewMode"], pacingPercentage: [1, "pacingPercentage"], status: [1, "status"], showAsFullText: [1, "showAsFullText"], isCompact: [1, "isCompact"], showEmphasizedPercentage: [1, "showEmphasizedPercentage"] }, decls: 2, vars: 1, consts: [[1, "inline-flex", "flex-col", "items-start"], [3, "ngClass", "class"], [1, "px-2.5", "py-0.5", "rounded-md", "font-extrabold", "tracking-tight", "border-2", "shadow-lg", "transition-all", "duration-200", "-mb-1", "ml-2", "z-10", 3, "ngClass"], [3, "ngClass"]], template: function PacingStatusBadgeComponent_Template(rf, ctx) { if (rf & 1) {
|
|
54916
|
+
i0.ɵɵconditionalCreate(0, PacingStatusBadgeComponent_Conditional_0_Template, 8, 10, "div", 0)(1, PacingStatusBadgeComponent_Conditional_1_Template, 5, 8, "div", 1);
|
|
54944
54917
|
} if (rf & 2) {
|
|
54945
|
-
i0.ɵɵconditional(ctx.showEmphasizedPercentage() ? 0 : 1);
|
|
54918
|
+
i0.ɵɵconditional(ctx.showEmphasizedPercentage() && ctx.hasPercentage() ? 0 : 1);
|
|
54946
54919
|
} }, dependencies: [CommonModule, i1$1.NgClass], encapsulation: 2, changeDetection: 0 }); }
|
|
54947
54920
|
}
|
|
54948
54921
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PacingStatusBadgeComponent, [{
|
|
@@ -54953,11 +54926,10 @@ class PacingStatusBadgeComponent {
|
|
|
54953
54926
|
imports: [CommonModule],
|
|
54954
54927
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
54955
54928
|
template: `
|
|
54956
|
-
@if (showEmphasizedPercentage()) {
|
|
54957
|
-
<div class="
|
|
54929
|
+
@if (showEmphasizedPercentage() && hasPercentage()) {
|
|
54930
|
+
<div class="inline-flex flex-col items-start">
|
|
54958
54931
|
<div [ngClass]="overlayBadgeClasses()"
|
|
54959
|
-
|
|
54960
|
-
class="absolute z-10 border-2 shadow-lg transition-all duration-200">
|
|
54932
|
+
class="px-2.5 py-0.5 rounded-md font-extrabold tracking-tight border-2 shadow-lg transition-all duration-200 -mb-1 ml-2 z-10">
|
|
54961
54933
|
{{ extractPercentage() }}
|
|
54962
54934
|
</div>
|
|
54963
54935
|
<div
|
|
@@ -54984,7 +54956,7 @@ class PacingStatusBadgeComponent {
|
|
|
54984
54956
|
`
|
|
54985
54957
|
}]
|
|
54986
54958
|
}], null, { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], pacingPercentage: [{ type: i0.Input, args: [{ isSignal: true, alias: "pacingPercentage", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], showAsFullText: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAsFullText", required: false }] }], isCompact: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCompact", required: false }] }], showEmphasizedPercentage: [{ type: i0.Input, args: [{ isSignal: true, alias: "showEmphasizedPercentage", required: false }] }] }); })();
|
|
54987
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PacingStatusBadgeComponent, { className: "PacingStatusBadgeComponent", filePath: "lib/components/revenue-calculator-dashboard/pacing-status-badge.component.ts", lineNumber:
|
|
54959
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PacingStatusBadgeComponent, { className: "PacingStatusBadgeComponent", filePath: "lib/components/revenue-calculator-dashboard/pacing-status-badge.component.ts", lineNumber: 41 }); })();
|
|
54988
54960
|
|
|
54989
54961
|
const _forTrack0$i = ($index, $item) => $item.stageMetric.metric;
|
|
54990
54962
|
const _forTrack1$3 = ($index, $item) => $item.calc.metric;
|
|
@@ -55349,30 +55321,11 @@ class FunnelMetricsVisualizationComponent {
|
|
|
55349
55321
|
}
|
|
55350
55322
|
overlayBadgeClasses(percentageIncrease, metric, isCompact = false) {
|
|
55351
55323
|
const isDark = this.viewMode() === ViewModeEnum.DARK;
|
|
55352
|
-
const isIncrease = !MetricEnumUtil.increaseBad(metric);
|
|
55353
55324
|
if (isDark) {
|
|
55354
|
-
|
|
55355
|
-
return isCompact
|
|
55356
|
-
? 'bg-emerald-500/95 text-white border-emerald-400/50 shadow-emerald-500/40'
|
|
55357
|
-
: 'bg-emerald-500/95 text-white border-emerald-400/50 shadow-emerald-500/50';
|
|
55358
|
-
}
|
|
55359
|
-
else {
|
|
55360
|
-
return isCompact
|
|
55361
|
-
? 'bg-purple-500/95 text-white border-purple-400/50 shadow-purple-500/40'
|
|
55362
|
-
: 'bg-purple-500/95 text-white border-purple-400/50 shadow-purple-500/50';
|
|
55363
|
-
}
|
|
55325
|
+
return 'bg-purple-500/30 text-purple-200 border-purple-400/30';
|
|
55364
55326
|
}
|
|
55365
55327
|
else {
|
|
55366
|
-
|
|
55367
|
-
return isCompact
|
|
55368
|
-
? 'bg-emerald-600 text-white border-emerald-500 shadow-emerald-600/40'
|
|
55369
|
-
: 'bg-emerald-600 text-white border-emerald-500 shadow-emerald-600/50';
|
|
55370
|
-
}
|
|
55371
|
-
else {
|
|
55372
|
-
return isCompact
|
|
55373
|
-
? 'bg-purple-600 text-white border-purple-500 shadow-purple-600/40'
|
|
55374
|
-
: 'bg-purple-600 text-white border-purple-500 shadow-purple-600/50';
|
|
55375
|
-
}
|
|
55328
|
+
return 'bg-purple-100 text-purple-700 border-purple-300';
|
|
55376
55329
|
}
|
|
55377
55330
|
}
|
|
55378
55331
|
formatMetricValue(value, metric, fromUiData = true) {
|
|
@@ -55404,7 +55357,7 @@ class FunnelMetricsVisualizationComponent {
|
|
|
55404
55357
|
return MetricEnumUtil.increaseBad(metric) ? '-' : '+';
|
|
55405
55358
|
}
|
|
55406
55359
|
static { this.ɵfac = function FunnelMetricsVisualizationComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || FunnelMetricsVisualizationComponent)(); }; }
|
|
55407
|
-
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FunnelMetricsVisualizationComponent, selectors: [["symphiq-funnel-metrics-visualization"]], inputs: { viewMode: [1, "viewMode"], calculations: [1, "calculations"], pacingMetrics: [1, "pacingMetrics"] }, decls: 5, vars: 0, consts: [[1, "space-y-6"], [1, "space-y-8"], [1, "rounded-xl", "p-6", "border-2", "transition-all", "duration-200", 3, "ngClass"], [1, "flex", "items-start", "justify-between", "mb-6"], [1, "flex-1"], [1, "flex", "items-center", "gap-2", "mb-1"], [1, "text-lg", "font-bold", "leading-tight", "m-0", 3, "ngClass"], ["type", "button", "tooltipType", "markdown", "tooltipPosition", "right", 1, "flex-shrink-0", "w-6", "h-6", "rounded-full", "inline-flex", "items-center", "justify-center", "transition-colors", 3, "ngClass", "libSymphiqTooltip"], [1, "grid", "grid-cols-2", "lg:grid-cols-3", "gap-6", "mb-4"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", "mb-2", 3, "ngClass"], [1, "text-2xl", "font-bold", 3, "ngClass"], [1, "text-2xl", "font-bold", "mb-3", 3, "ngClass"], [1, "
|
|
55360
|
+
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FunnelMetricsVisualizationComponent, selectors: [["symphiq-funnel-metrics-visualization"]], inputs: { viewMode: [1, "viewMode"], calculations: [1, "calculations"], pacingMetrics: [1, "pacingMetrics"] }, decls: 5, vars: 0, consts: [[1, "space-y-6"], [1, "space-y-8"], [1, "rounded-xl", "p-6", "border-2", "transition-all", "duration-200", 3, "ngClass"], [1, "flex", "items-start", "justify-between", "mb-6"], [1, "flex-1"], [1, "flex", "items-center", "gap-2", "mb-1"], [1, "text-lg", "font-bold", "leading-tight", "m-0", 3, "ngClass"], ["type", "button", "tooltipType", "markdown", "tooltipPosition", "right", 1, "flex-shrink-0", "w-6", "h-6", "rounded-full", "inline-flex", "items-center", "justify-center", "transition-colors", 3, "ngClass", "libSymphiqTooltip"], [1, "grid", "grid-cols-2", "lg:grid-cols-3", "gap-6", "mb-4"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", "mb-2", 3, "ngClass"], [1, "text-2xl", "font-bold", 3, "ngClass"], [1, "text-2xl", "font-bold", "mb-3", 3, "ngClass"], [1, "inline-flex", "flex-col", "items-start"], [1, "px-2.5", "py-0.5", "rounded-md", "font-extrabold", "text-sm", "tracking-tight", "border-2", "shadow-lg", "transition-all", "duration-200", "-mb-1", "ml-2", "z-10", 3, "ngClass"], [1, "px-3", "py-1.5", "rounded-lg", "font-semibold", "text-xs", "inline-block", 3, "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 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"], [3, "viewMode", "pacingPercentage", "status", "showAsFullText", "showEmphasizedPercentage"], [1, "my-4", 3, "ngClass"], [1, "space-y-3"], [1, "text-xs", "font-semibold", "uppercase", "tracking-wider", "mb-3", 3, "ngClass"], [1, "grid", "gap-3"], [1, "p-4", "rounded-lg", 3, "ngClass"], [1, "flex", "items-center", "gap-2", "mb-4"], [1, "text-xs", "font-semibold", "leading-tight", 3, "ngClass"], ["type", "button", "tooltipType", "markdown", "tooltipPosition", "right", 1, "flex-shrink-0", "w-5", "h-5", "rounded-full", "inline-flex", "items-center", "justify-center", "transition-colors", 3, "ngClass", "libSymphiqTooltip"], [1, "grid", "grid-cols-2", "lg:grid-cols-3", "gap-4"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", "mb-1.5", 3, "ngClass"], [1, "text-lg", "font-bold", 3, "ngClass"], [1, "text-lg", "font-bold", "mb-2", 3, "ngClass"], [1, "px-2", "py-0.5", "rounded", "text-xs", "font-extrabold", "tracking-tight", "border", "shadow-md", "transition-all", "duration-200", "-mb-1", "ml-1.5", "z-10", 3, "ngClass"], [1, "px-2.5", "py-1", "rounded", "text-xs", "font-semibold", "inline-block", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-3.5", "h-3.5"], [3, "viewMode", "pacingPercentage", "status", "showAsFullText", "isCompact", "showEmphasizedPercentage"]], template: function FunnelMetricsVisualizationComponent_Template(rf, ctx) { if (rf & 1) {
|
|
55408
55361
|
i0.ɵɵelementStart(0, "div", 0);
|
|
55409
55362
|
i0.ɵɵelement(1, "symphiq-tooltip-container");
|
|
55410
55363
|
i0.ɵɵelementStart(2, "div", 1);
|
|
@@ -55467,12 +55420,12 @@ class FunnelMetricsVisualizationComponent {
|
|
|
55467
55420
|
<p [ngClass]="targetValueClasses()" class="text-2xl font-bold mb-3">
|
|
55468
55421
|
{{ formatMetricValue(stage.stageMetric.targetValue, stage.stageMetric.metric, false) }}
|
|
55469
55422
|
</p>
|
|
55470
|
-
<div class="
|
|
55423
|
+
<div class="inline-flex flex-col items-start">
|
|
55471
55424
|
<div [ngClass]="overlayBadgeClasses(stage.stageMetric.percentageIncrease, stage.stageMetric.metric)"
|
|
55472
|
-
class="
|
|
55425
|
+
class="px-2.5 py-0.5 rounded-md font-extrabold text-sm tracking-tight border-2 shadow-lg transition-all duration-200 -mb-1 ml-2 z-10">
|
|
55473
55426
|
{{ getPercentageOnly(stage.stageMetric.percentageIncrease, stage.stageMetric.metric) }}
|
|
55474
55427
|
</div>
|
|
55475
|
-
<div [ngClass]="percentageBadgeClasses()" class="px-3 py-1.5
|
|
55428
|
+
<div [ngClass]="percentageBadgeClasses()" class="px-3 py-1.5 rounded-lg font-semibold text-xs inline-block">
|
|
55476
55429
|
{{ getDescriptionOnly(stage.stageMetric.percentageIncrease, stage.stageMetric.metric) }}
|
|
55477
55430
|
</div>
|
|
55478
55431
|
</div>
|
|
@@ -55540,12 +55493,12 @@ class FunnelMetricsVisualizationComponent {
|
|
|
55540
55493
|
<p [ngClass]="relatedTargetValueClasses()" class="text-lg font-bold mb-2">
|
|
55541
55494
|
{{ formatMetricValue(metric.calc.targetValue, metric.calc.metric, false) }}
|
|
55542
55495
|
</p>
|
|
55543
|
-
<div class="
|
|
55496
|
+
<div class="inline-flex flex-col items-start">
|
|
55544
55497
|
<div [ngClass]="overlayBadgeClasses(metric.calc.percentageIncrease, metric.calc.metric, true)"
|
|
55545
|
-
class="
|
|
55498
|
+
class="px-2 py-0.5 rounded text-xs font-extrabold tracking-tight border shadow-md transition-all duration-200 -mb-1 ml-1.5 z-10">
|
|
55546
55499
|
{{ getPercentageOnly(metric.calc.percentageIncrease, metric.calc.metric) }}
|
|
55547
55500
|
</div>
|
|
55548
|
-
<div [ngClass]="relatedPercentageBadgeClasses()" class="px-2.5 py-1
|
|
55501
|
+
<div [ngClass]="relatedPercentageBadgeClasses()" class="px-2.5 py-1 rounded text-xs font-semibold inline-block">
|
|
55549
55502
|
{{ getDescriptionOnly(metric.calc.percentageIncrease, metric.calc.metric) }}
|
|
55550
55503
|
</div>
|
|
55551
55504
|
</div>
|