libey-ng-component-library 0.0.31 → 0.0.32
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/bundles/libey-ng-component-library.umd.js +14 -5
- package/bundles/libey-ng-component-library.umd.js.map +1 -1
- package/esm2015/lib/cpm-indicator/libey-ng-cpm-indicator.component.js +11 -2
- package/esm2015/utils/CpmIndicator/cpm-indicator-types.js +5 -5
- package/fesm2015/libey-ng-component-library.js +14 -5
- package/fesm2015/libey-ng-component-library.js.map +1 -1
- package/lib/cpm-indicator/libey-ng-cpm-indicator.component.d.ts +3 -2
- package/package.json +1 -1
- package/utils/CpmIndicator/cpm-indicator-types.d.ts +6 -0
|
@@ -2165,10 +2165,10 @@
|
|
|
2165
2165
|
zone3Max: 1.0,
|
|
2166
2166
|
};
|
|
2167
2167
|
var ZONE_COLORS = {
|
|
2168
|
-
zone1: { dark: '#
|
|
2169
|
-
zone2: { dark: '#
|
|
2170
|
-
zone3: { dark: '#
|
|
2171
|
-
zone4: { dark: '#
|
|
2168
|
+
zone1: { dark: '#2B9429', light: '#80BF7F' },
|
|
2169
|
+
zone2: { dark: '#FFE500', light: '#F4E878' },
|
|
2170
|
+
zone3: { dark: '#FFA826', light: '#F6C276' },
|
|
2171
|
+
zone4: { dark: '#D30000', light: '#DB5E60' }, // Rojo
|
|
2172
2172
|
};
|
|
2173
2173
|
|
|
2174
2174
|
var LibeyNgCpmIndicatorComponent = /** @class */ (function () {
|
|
@@ -2193,6 +2193,7 @@
|
|
|
2193
2193
|
this.cpmChange = new i0.EventEmitter();
|
|
2194
2194
|
/** Emite true cuando la proyección supera el límite. */
|
|
2195
2195
|
this.limitExceeded = new i0.EventEmitter();
|
|
2196
|
+
this.colorChange = new i0.EventEmitter();
|
|
2196
2197
|
this.scale = 1;
|
|
2197
2198
|
// ── Propiedades del template ──
|
|
2198
2199
|
this.baseAmount = 0;
|
|
@@ -2286,6 +2287,12 @@
|
|
|
2286
2287
|
this.limitTextPos = this.polar(this.ANGLE_END, this.R + 20);
|
|
2287
2288
|
this.excess = Math.max(0, this.totalAmount - this.limit);
|
|
2288
2289
|
this.limitExceeded.emit(this.excess > this.EXCESS_TOLERANCE);
|
|
2290
|
+
this.colorChange.emit({
|
|
2291
|
+
darkColor: this.activeColors.dark,
|
|
2292
|
+
lightColor: this.activeColors.light,
|
|
2293
|
+
grayColor: '#E8EAEF',
|
|
2294
|
+
limitReached: this.totalAmount >= this.limit,
|
|
2295
|
+
});
|
|
2289
2296
|
};
|
|
2290
2297
|
LibeyNgCpmIndicatorComponent.prototype.emitSummary = function () {
|
|
2291
2298
|
this.cpmChange.emit({
|
|
@@ -2326,7 +2333,7 @@
|
|
|
2326
2333
|
return LibeyNgCpmIndicatorComponent;
|
|
2327
2334
|
}());
|
|
2328
2335
|
LibeyNgCpmIndicatorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: LibeyNgCpmIndicatorComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
2329
|
-
LibeyNgCpmIndicatorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: LibeyNgCpmIndicatorComponent, selector: "lib-libey-ng-cpm-indicator", inputs: { limit: "limit", items: "items", currency: "currency", thresholds: "thresholds", mode: "mode", devMode: "devMode", scale: "scale" }, outputs: { cpmChange: "cpmChange", limitExceeded: "limitExceeded" }, viewQueries: [{ propertyName: "cpmLegend", first: true, predicate: ["cpmLegend"], descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<!-- Modo CPM: solo el gauge con \"CPM\" en el centro -->\r\n<ng-container *ngIf=\"mode === CpmIndicatorMode.Cpm\">\r\n <div class=\"gauge-wrap\" [style.width.px]=\"220 * scale\" [style.height.px]=\"120 * scale\">\r\n <svg class=\"gauge-svg\" viewBox=\"0 0 220 130\" xmlns=\"http://www.w3.org/2000/svg\"\r\n [style.width.px]=\"220 * scale\"\r\n [style.height.px]=\"135 * scale\">\r\n <defs>\r\n <filter id=\"dotShadowCpm\" x=\"-60%\" y=\"-60%\" width=\"220%\" height=\"220%\">\r\n <feDropShadow dx=\"0\" dy=\"1\" stdDeviation=\"2\" flood-color=\"rgba(0,0,0,0.22)\"/>\r\n </filter>\r\n </defs>\r\n\r\n <path [attr.d]=\"trackArcPath\" fill=\"none\" stroke=\"#e8ecf5\" stroke-width=\"14\" stroke-linecap=\"round\"/>\r\n\r\n <!-- Proyecci\u00F3n debajo, real encima -->\r\n <path\r\n [style.display]=\"totalAmount > 0 ? '' : 'none'\"\r\n [attr.d]=\"totalArcPath\"\r\n [attr.stroke]=\"activeColors.light\"\r\n fill=\"none\" stroke-width=\"14\" stroke-linecap=\"round\"/>\r\n\r\n <path\r\n [style.display]=\"baseAmount > 0 ? '' : 'none'\"\r\n [attr.d]=\"baseArcPath\"\r\n [attr.stroke]=\"activeColors.dark\"\r\n fill=\"none\" stroke-width=\"14\" stroke-linecap=\"round\"/>\r\n\r\n <circle\r\n [style.display]=\"baseAmount > 0 ? '' : 'none'\"\r\n [attr.cx]=\"dotBasePos.x\" [attr.cy]=\"dotBasePos.y\"\r\n r=\"7\" [attr.fill]=\"activeColors.dark\"\r\n stroke=\"#ffffff\" stroke-width=\"2.5\"\r\n filter=\"url(#dotShadowCpm)\"/>\r\n\r\n <!-- Solo visible si la proyecci\u00F3n va por delante del real -->\r\n <circle\r\n [style.display]=\"dotTotalVisible ? '' : 'none'\"\r\n [attr.cx]=\"dotTotalPos.x\" [attr.cy]=\"dotTotalPos.y\"\r\n r=\"6\" [attr.fill]=\"activeColors.light\"\r\n stroke=\"#ffffff\" stroke-width=\"2.5\"\r\n filter=\"url(#dotShadowCpm)\"/>\r\n </svg>\r\n\r\n <div class=\"gauge-center gauge-center--cpm\" [style.bottom.px]=\"15 * scale\">\r\n <div class=\"main-value\" [style.font-size.px]=\"26 * scale\">CPM</div>\r\n </div>\r\n </div>\r\n</ng-container>\r\n\r\n\r\n<!-- Modo Gauge: gauge completo con montos, leyenda y alerta -->\r\n<ng-container *ngIf=\"mode === CpmIndicatorMode.Gauge\">\r\n <div class=\"gauge-wrap\" [style.width.px]=\"220 * scale\" [style.height.px]=\"120 * scale\">\r\n <svg class=\"gauge-svg\" viewBox=\"0 0 220 130\" xmlns=\"http://www.w3.org/2000/svg\"\r\n [style.width.px]=\"220 * scale\"\r\n [style.height.px]=\"135 * scale\">\r\n <defs>\r\n <filter id=\"dotShadowGauge\" x=\"-60%\" y=\"-60%\" width=\"220%\" height=\"220%\">\r\n <feDropShadow dx=\"0\" dy=\"1\" stdDeviation=\"2\" flood-color=\"rgba(0,0,0,0.22)\"/>\r\n </filter>\r\n </defs>\r\n\r\n <path [attr.d]=\"trackArcPath\" fill=\"none\" stroke=\"#e8ecf5\" stroke-width=\"14\" stroke-linecap=\"round\"/>\r\n\r\n <!-- Proyecci\u00F3n debajo, real encima -->\r\n <path\r\n [style.display]=\"totalAmount > 0 ? '' : 'none'\"\r\n [attr.d]=\"totalArcPath\"\r\n [attr.stroke]=\"activeColors.light\"\r\n fill=\"none\" stroke-width=\"14\" stroke-linecap=\"round\"/>\r\n\r\n <path\r\n [style.display]=\"baseAmount > 0 ? '' : 'none'\"\r\n [attr.d]=\"baseArcPath\"\r\n [attr.stroke]=\"activeColors.dark\"\r\n fill=\"none\" stroke-width=\"14\" stroke-linecap=\"round\"/>\r\n\r\n <circle\r\n [style.display]=\"baseAmount > 0 ? '' : 'none'\"\r\n [attr.cx]=\"dotBasePos.x\" [attr.cy]=\"dotBasePos.y\"\r\n r=\"7\" [attr.fill]=\"activeColors.dark\"\r\n stroke=\"#ffffff\" stroke-width=\"2.5\"\r\n filter=\"url(#dotShadowGauge)\"/>\r\n\r\n <circle\r\n [style.display]=\"dotTotalVisible ? '' : 'none'\"\r\n [attr.cx]=\"dotTotalPos.x\" [attr.cy]=\"dotTotalPos.y\"\r\n r=\"6\" [attr.fill]=\"activeColors.light\"\r\n stroke=\"#ffffff\" stroke-width=\"2.5\"\r\n filter=\"url(#dotShadowGauge)\"/>\r\n\r\n <!-- <text\r\n [attr.x]=\"limitTextPos.x\" [attr.y]=\"limitTextPos.y\"\r\n font-family=\"DM Mono,monospace\" font-size=\"9\" font-weight=\"600\"\r\n fill=\"#8a8fa8\" text-anchor=\"middle\">\r\n {{ currency }}{{ limit }}\r\n </text> -->\r\n </svg>\r\n\r\n <!-- El color del monto cambia a rojo si supera el l\u00EDmite -->\r\n <div class=\"gauge-center gauge-center--gauge\" [style.bottom.px]=\"-10 * scale\">\r\n <div class=\"main-value\"\r\n [style.font-size.px]=\"26 * scale\"\r\n [style.color]=\"totalAmount > limit ? activeColors.dark : '#1a1a2e'\">\r\n CPM<br>\r\n {{ currency }}{{ totalAmount | number:'1.2-2' }}\r\n </div>\r\n <div class=\"limit-label\" [style.font-size.px]=\"16 * scale\">\r\n de {{ currency }}{{ limit | number:'1.2-2' }}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"legend\">\r\n <div class=\"legend-item\">\r\n <span class=\"dot\" [style.background]=\"activeColors.dark\"></span>\r\n Real\r\n </div>\r\n <div class=\"legend-item\">\r\n <span class=\"dot\"\r\n [style.background]=\"activeColors.light\"\r\n [style.border]=\"'1.5px solid ' + activeColors.dark\">\r\n </span>\r\n Proyecci\u00F3n\r\n </div>\r\n <div class=\"legend-item\">\r\n <span class=\"dot\" style=\"background:#e8ecf5; border:1px solid #ccc\"></span>\r\n Disponible\r\n </div>\r\n </div>\r\n\r\n <!-- Sliders de prueba \u2014 solo en devMode -->\r\n <ng-container *ngIf=\"devMode\">\r\n <div class=\"divider\"></div>\r\n <div class=\"dev-badge\">Dev Mode</div>\r\n <div class=\"controls\">\r\n\r\n <div class=\"ctrl-row\">\r\n <div class=\"ctrl-header\">\r\n <span class=\"ctrl-label\">\r\n <span class=\"ctrl-label-dot\" [style.background]=\"activeColors.dark\"></span>\r\n Gasto real (consumido)\r\n </span>\r\n <span class=\"ctrl-val\" [style.color]=\"activeColors.dark\">\r\n {{ currency }}{{ sliderBase | number:'1.2-2' }}\r\n </span>\r\n </div>\r\n <div class=\"zones-bar\">\r\n <div style=\"background:#16a34a\"></div>\r\n <div style=\"background:#ca8a04\"></div>\r\n <div style=\"background:#ea580c\"></div>\r\n <div style=\"background:#dc2626\"></div>\r\n </div>\r\n <input type=\"range\" [min]=\"0\" [max]=\"sliderMax\" step=\"0.5\"\r\n [value]=\"sliderBase\" (input)=\"onDevBaseChange($event)\">\r\n </div>\r\n\r\n <div class=\"ctrl-row\">\r\n <div class=\"ctrl-header\">\r\n <span class=\"ctrl-label\">\r\n <span class=\"ctrl-label-dot\"\r\n [style.background]=\"activeColors.light\"\r\n [style.border]=\"'1px solid ' + activeColors.dark\"\r\n style=\"border-radius:50%\">\r\n </span>\r\n Proyecci\u00F3n (presupuesto)\r\n </span>\r\n <span class=\"ctrl-val\" [style.color]=\"activeColors.dark\">\r\n {{ currency }}{{ sliderProjected | number:'1.2-2' }}\r\n </span>\r\n </div>\r\n <div class=\"zones-bar\">\r\n <div style=\"background:#16a34a\"></div>\r\n <div style=\"background:#ca8a04\"></div>\r\n <div style=\"background:#ea580c\"></div>\r\n <div style=\"background:#dc2626\"></div>\r\n </div>\r\n <input type=\"range\" [min]=\"0\" [max]=\"sliderMax\" step=\"0.5\"\r\n [value]=\"sliderProjected\" (input)=\"onDevProjectedChange($event)\">\r\n </div>\r\n\r\n </div>\r\n </ng-container>\r\n</ng-container>\r\n\r\n<ng-template #cpmLegend>\r\n <div class=\"legend-tooltip\">\r\n <div class=\"legend-tooltip__item\">\r\n <span class=\"dot\" [style.background]=\"activeColors.dark\"></span>\r\n Real<span *ngIf=\"mode === CpmIndicatorMode.Gauge\">: {{ currency }}{{ baseAmount | number:'1.2-2' }}</span>\r\n </div>\r\n <div class=\"legend-tooltip__item\">\r\n <span class=\"dot\" [style.background]=\"activeColors.light\"></span>\r\n Proyecci\u00F3n<span *ngIf=\"mode === CpmIndicatorMode.Gauge\">: {{ currency }}{{ projectedAmount | number:'1.2-2' }}</span>\r\n </div>\r\n <div class=\"legend-tooltip__item\">\r\n <span class=\"dot\" style=\"background:#e8ecf5\"></span>\r\n Disponible<span *ngIf=\"mode === CpmIndicatorMode.Gauge\">: {{ currency }}{{ (limit - totalAmount) | number:'1.2-2' }}</span>\r\n </div>\r\n </div>\r\n</ng-template>", styles: [":host{display:inline-flex;flex-direction:column;align-items:center;font-family:\"DM Sans\",sans-serif}.card{background:#ffffff;border-radius:20px;padding:36px 40px 28px;width:340px;box-shadow:0 4px 32px #0000001a,0 1px 4px #0000000f;display:flex;flex-direction:column;align-items:center}.gauge-wrap{position:relative;overflow:visible}.gauge-svg{overflow:visible}.gauge-center{position:absolute;left:50%;transform:translate(-50%);text-align:center;pointer-events:none;white-space:nowrap}.gauge-center--cpm{bottom:15px}.gauge-center--gauge{bottom:-10px}.main-value{font-size:26px;font-weight:700;font-family:\"DM Mono\",monospace;letter-spacing:-.5px;color:#1a1a2e;line-height:1;transition:color .3s ease}.limit-label{font-size:12px;color:#8a8fa8;font-weight:400;margin-top:3px;font-family:\"DM Mono\",monospace}.legend{display:flex;grid-gap:14px;gap:14px;margin-top:22px;margin-bottom:6px;flex-wrap:wrap;justify-content:center}.legend-item{display:flex;align-items:center;grid-gap:6px;gap:6px;font-size:12px;color:#555;font-weight:500}.dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}.divider{width:100%;height:1px;background:#f0f2f5;margin:14px 0 4px}.dev-badge{font-size:11px;font-weight:700;color:#7c3aed;background:#ede9fe;border-radius:6px;padding:3px 10px;margin-bottom:8px;letter-spacing:.3px}.controls{width:100%;display:flex;flex-direction:column;grid-gap:16px;gap:16px}.ctrl-row{display:flex;flex-direction:column;grid-gap:5px;gap:5px}.ctrl-header{display:flex;justify-content:space-between;align-items:center}.ctrl-label{font-size:12px;color:#8a8fa8;font-weight:500;display:flex;align-items:center;grid-gap:5px;gap:5px}.ctrl-label-dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0}.ctrl-val{font-size:12px;font-family:\"DM Mono\",monospace;font-weight:600;color:#1a1a2e}.zones-bar{display:flex;border-radius:4px;overflow:hidden;height:3px;width:100%;margin-bottom:3px}.zones-bar div{flex:1}input[type=range]{appearance:none;width:100%;height:5px;border-radius:99px;background:#e2e6ef;outline:none;cursor:pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#16a34a;border:2.5px solid #fff;box-shadow:0 1px 8px #0003;cursor:grab;-webkit-transition:background .3s,transform .15s;transition:background .3s,transform .15s}input[type=range]::-webkit-slider-thumb:active{transform:scale(1.2);cursor:grabbing}input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#16a34a;border:2.5px solid #fff;cursor:grab}\n"], directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "number": i1__namespace.DecimalPipe } });
|
|
2336
|
+
LibeyNgCpmIndicatorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: LibeyNgCpmIndicatorComponent, selector: "lib-libey-ng-cpm-indicator", inputs: { limit: "limit", items: "items", currency: "currency", thresholds: "thresholds", mode: "mode", devMode: "devMode", scale: "scale" }, outputs: { cpmChange: "cpmChange", limitExceeded: "limitExceeded", colorChange: "colorChange" }, viewQueries: [{ propertyName: "cpmLegend", first: true, predicate: ["cpmLegend"], descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<!-- Modo CPM: solo el gauge con \"CPM\" en el centro -->\r\n<ng-container *ngIf=\"mode === CpmIndicatorMode.Cpm\">\r\n <div class=\"gauge-wrap\" [style.width.px]=\"220 * scale\" [style.height.px]=\"120 * scale\">\r\n <svg class=\"gauge-svg\" viewBox=\"0 0 220 130\" xmlns=\"http://www.w3.org/2000/svg\"\r\n [style.width.px]=\"220 * scale\"\r\n [style.height.px]=\"135 * scale\">\r\n <defs>\r\n <filter id=\"dotShadowCpm\" x=\"-60%\" y=\"-60%\" width=\"220%\" height=\"220%\">\r\n <feDropShadow dx=\"0\" dy=\"1\" stdDeviation=\"2\" flood-color=\"rgba(0,0,0,0.22)\"/>\r\n </filter>\r\n </defs>\r\n\r\n <path [attr.d]=\"trackArcPath\" fill=\"none\" stroke=\"#E8EAEF\" stroke-width=\"14\" stroke-linecap=\"round\"/>\r\n\r\n <!-- Proyecci\u00F3n debajo, real encima -->\r\n <path\r\n [style.display]=\"totalAmount > 0 ? '' : 'none'\"\r\n [attr.d]=\"totalArcPath\"\r\n [attr.stroke]=\"activeColors.light\"\r\n fill=\"none\" stroke-width=\"14\" stroke-linecap=\"round\"/>\r\n\r\n <path\r\n [style.display]=\"baseAmount > 0 ? '' : 'none'\"\r\n [attr.d]=\"baseArcPath\"\r\n [attr.stroke]=\"activeColors.dark\"\r\n fill=\"none\" stroke-width=\"14\" stroke-linecap=\"round\"/>\r\n\r\n <circle\r\n [style.display]=\"baseAmount > 0 ? '' : 'none'\"\r\n [attr.cx]=\"dotBasePos.x\" [attr.cy]=\"dotBasePos.y\"\r\n r=\"7\" [attr.fill]=\"activeColors.dark\"\r\n stroke=\"#ffffff\" stroke-width=\"2.5\"\r\n filter=\"url(#dotShadowCpm)\"/>\r\n\r\n <!-- Solo visible si la proyecci\u00F3n va por delante del real -->\r\n <circle\r\n [style.display]=\"dotTotalVisible ? '' : 'none'\"\r\n [attr.cx]=\"dotTotalPos.x\" [attr.cy]=\"dotTotalPos.y\"\r\n r=\"6\" [attr.fill]=\"activeColors.light\"\r\n stroke=\"#ffffff\" stroke-width=\"2.5\"\r\n filter=\"url(#dotShadowCpm)\"/>\r\n </svg>\r\n\r\n <div class=\"gauge-center gauge-center--cpm\" [style.bottom.px]=\"15 * scale\">\r\n <div class=\"main-value\" [style.font-size.px]=\"26 * scale\">CPM</div>\r\n </div>\r\n </div>\r\n</ng-container>\r\n\r\n\r\n<!-- Modo Gauge: gauge completo con montos, leyenda y alerta -->\r\n<ng-container *ngIf=\"mode === CpmIndicatorMode.Gauge\">\r\n <div class=\"gauge-wrap\" [style.width.px]=\"220 * scale\" [style.height.px]=\"120 * scale\">\r\n <svg class=\"gauge-svg\" viewBox=\"0 0 220 130\" xmlns=\"http://www.w3.org/2000/svg\"\r\n [style.width.px]=\"220 * scale\"\r\n [style.height.px]=\"135 * scale\">\r\n <defs>\r\n <filter id=\"dotShadowGauge\" x=\"-60%\" y=\"-60%\" width=\"220%\" height=\"220%\">\r\n <feDropShadow dx=\"0\" dy=\"1\" stdDeviation=\"2\" flood-color=\"rgba(0,0,0,0.22)\"/>\r\n </filter>\r\n </defs>\r\n\r\n <path [attr.d]=\"trackArcPath\" fill=\"none\" stroke=\"#E8EAEF\" stroke-width=\"14\" stroke-linecap=\"round\"/>\r\n\r\n <!-- Proyecci\u00F3n debajo, real encima -->\r\n <path\r\n [style.display]=\"totalAmount > 0 ? '' : 'none'\"\r\n [attr.d]=\"totalArcPath\"\r\n [attr.stroke]=\"activeColors.light\"\r\n fill=\"none\" stroke-width=\"14\" stroke-linecap=\"round\"/>\r\n\r\n <path\r\n [style.display]=\"baseAmount > 0 ? '' : 'none'\"\r\n [attr.d]=\"baseArcPath\"\r\n [attr.stroke]=\"activeColors.dark\"\r\n fill=\"none\" stroke-width=\"14\" stroke-linecap=\"round\"/>\r\n\r\n <circle\r\n [style.display]=\"baseAmount > 0 ? '' : 'none'\"\r\n [attr.cx]=\"dotBasePos.x\" [attr.cy]=\"dotBasePos.y\"\r\n r=\"7\" [attr.fill]=\"activeColors.dark\"\r\n stroke=\"#ffffff\" stroke-width=\"2.5\"\r\n filter=\"url(#dotShadowGauge)\"/>\r\n\r\n <circle\r\n [style.display]=\"dotTotalVisible ? '' : 'none'\"\r\n [attr.cx]=\"dotTotalPos.x\" [attr.cy]=\"dotTotalPos.y\"\r\n r=\"6\" [attr.fill]=\"activeColors.light\"\r\n stroke=\"#ffffff\" stroke-width=\"2.5\"\r\n filter=\"url(#dotShadowGauge)\"/>\r\n\r\n <!-- <text\r\n [attr.x]=\"limitTextPos.x\" [attr.y]=\"limitTextPos.y\"\r\n font-family=\"DM Mono,monospace\" font-size=\"9\" font-weight=\"600\"\r\n fill=\"#8a8fa8\" text-anchor=\"middle\">\r\n {{ currency }}{{ limit }}\r\n </text> -->\r\n </svg>\r\n\r\n <!-- El color del monto cambia a rojo si supera el l\u00EDmite -->\r\n <div class=\"gauge-center gauge-center--gauge\" [style.bottom.px]=\"-10 * scale\">\r\n <div class=\"main-value\"\r\n [style.font-size.px]=\"26 * scale\"\r\n [style.color]=\"totalAmount > limit ? activeColors.dark : '#1a1a2e'\">\r\n CPM<br>\r\n {{ currency }}{{ totalAmount | number:'1.2-2' }}\r\n </div>\r\n <div class=\"limit-label\" [style.font-size.px]=\"16 * scale\">\r\n de {{ currency }}{{ limit | number:'1.2-2' }}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"legend\">\r\n <div class=\"legend-item\">\r\n <span class=\"dot\" [style.background]=\"activeColors.dark\"></span>\r\n Real\r\n </div>\r\n <div class=\"legend-item\">\r\n <span class=\"dot\"\r\n [style.background]=\"activeColors.light\"\r\n [style.border]=\"'1.5px solid ' + activeColors.dark\">\r\n </span>\r\n Proyecci\u00F3n\r\n </div>\r\n <div class=\"legend-item\">\r\n <span class=\"dot\" style=\"background:#e8ecf5; border:1px solid #ccc\"></span>\r\n Disponible\r\n </div>\r\n </div>\r\n\r\n <!-- Sliders de prueba \u2014 solo en devMode -->\r\n <ng-container *ngIf=\"devMode\">\r\n <div class=\"divider\"></div>\r\n <div class=\"dev-badge\">Dev Mode</div>\r\n <div class=\"controls\">\r\n\r\n <div class=\"ctrl-row\">\r\n <div class=\"ctrl-header\">\r\n <span class=\"ctrl-label\">\r\n <span class=\"ctrl-label-dot\" [style.background]=\"activeColors.dark\"></span>\r\n Gasto real (consumido)\r\n </span>\r\n <span class=\"ctrl-val\" [style.color]=\"activeColors.dark\">\r\n {{ currency }}{{ sliderBase | number:'1.2-2' }}\r\n </span>\r\n </div>\r\n <div class=\"zones-bar\">\r\n <div style=\"background:#16a34a\"></div>\r\n <div style=\"background:#ca8a04\"></div>\r\n <div style=\"background:#ea580c\"></div>\r\n <div style=\"background:#dc2626\"></div>\r\n </div>\r\n <input type=\"range\" [min]=\"0\" [max]=\"sliderMax\" step=\"0.5\"\r\n [value]=\"sliderBase\" (input)=\"onDevBaseChange($event)\">\r\n </div>\r\n\r\n <div class=\"ctrl-row\">\r\n <div class=\"ctrl-header\">\r\n <span class=\"ctrl-label\">\r\n <span class=\"ctrl-label-dot\"\r\n [style.background]=\"activeColors.light\"\r\n [style.border]=\"'1px solid ' + activeColors.dark\"\r\n style=\"border-radius:50%\">\r\n </span>\r\n Proyecci\u00F3n (presupuesto)\r\n </span>\r\n <span class=\"ctrl-val\" [style.color]=\"activeColors.dark\">\r\n {{ currency }}{{ sliderProjected | number:'1.2-2' }}\r\n </span>\r\n </div>\r\n <div class=\"zones-bar\">\r\n <div style=\"background:#16a34a\"></div>\r\n <div style=\"background:#ca8a04\"></div>\r\n <div style=\"background:#ea580c\"></div>\r\n <div style=\"background:#dc2626\"></div>\r\n </div>\r\n <input type=\"range\" [min]=\"0\" [max]=\"sliderMax\" step=\"0.5\"\r\n [value]=\"sliderProjected\" (input)=\"onDevProjectedChange($event)\">\r\n </div>\r\n\r\n </div>\r\n </ng-container>\r\n</ng-container>\r\n\r\n<ng-template #cpmLegend>\r\n <div class=\"legend-tooltip\">\r\n <div class=\"legend-tooltip__item\">\r\n <span class=\"dot\" [style.background]=\"activeColors.dark\"></span>\r\n Real<span *ngIf=\"mode === CpmIndicatorMode.Gauge\">: {{ currency }}{{ baseAmount | number:'1.2-2' }}</span>\r\n </div>\r\n <div class=\"legend-tooltip__item\">\r\n <span class=\"dot\" [style.background]=\"activeColors.light\"></span>\r\n Proyecci\u00F3n<span *ngIf=\"mode === CpmIndicatorMode.Gauge\">: {{ currency }}{{ projectedAmount | number:'1.2-2' }}</span>\r\n </div>\r\n <div class=\"legend-tooltip__item\">\r\n <span class=\"dot\" style=\"background:#e8ecf5\"></span>\r\n Disponible<span *ngIf=\"mode === CpmIndicatorMode.Gauge\">: {{ currency }}{{ (limit - totalAmount) | number:'1.2-2' }}</span>\r\n </div>\r\n </div>\r\n</ng-template>", styles: [":host{display:inline-flex;flex-direction:column;align-items:center;font-family:\"DM Sans\",sans-serif}.card{background:#ffffff;border-radius:20px;padding:36px 40px 28px;width:340px;box-shadow:0 4px 32px #0000001a,0 1px 4px #0000000f;display:flex;flex-direction:column;align-items:center}.gauge-wrap{position:relative;overflow:visible}.gauge-svg{overflow:visible}.gauge-center{position:absolute;left:50%;transform:translate(-50%);text-align:center;pointer-events:none;white-space:nowrap}.gauge-center--cpm{bottom:15px}.gauge-center--gauge{bottom:-10px}.main-value{font-size:26px;font-weight:700;font-family:\"DM Mono\",monospace;letter-spacing:-.5px;color:#1a1a2e;line-height:1;transition:color .3s ease}.limit-label{font-size:12px;color:#8a8fa8;font-weight:400;margin-top:3px;font-family:\"DM Mono\",monospace}.legend{display:flex;grid-gap:14px;gap:14px;margin-top:22px;margin-bottom:6px;flex-wrap:wrap;justify-content:center}.legend-item{display:flex;align-items:center;grid-gap:6px;gap:6px;font-size:12px;color:#555;font-weight:500}.dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}.divider{width:100%;height:1px;background:#f0f2f5;margin:14px 0 4px}.dev-badge{font-size:11px;font-weight:700;color:#7c3aed;background:#ede9fe;border-radius:6px;padding:3px 10px;margin-bottom:8px;letter-spacing:.3px}.controls{width:100%;display:flex;flex-direction:column;grid-gap:16px;gap:16px}.ctrl-row{display:flex;flex-direction:column;grid-gap:5px;gap:5px}.ctrl-header{display:flex;justify-content:space-between;align-items:center}.ctrl-label{font-size:12px;color:#8a8fa8;font-weight:500;display:flex;align-items:center;grid-gap:5px;gap:5px}.ctrl-label-dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0}.ctrl-val{font-size:12px;font-family:\"DM Mono\",monospace;font-weight:600;color:#1a1a2e}.zones-bar{display:flex;border-radius:4px;overflow:hidden;height:3px;width:100%;margin-bottom:3px}.zones-bar div{flex:1}input[type=range]{appearance:none;width:100%;height:5px;border-radius:99px;background:#e2e6ef;outline:none;cursor:pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#16a34a;border:2.5px solid #fff;box-shadow:0 1px 8px #0003;cursor:grab;-webkit-transition:background .3s,transform .15s;transition:background .3s,transform .15s}input[type=range]::-webkit-slider-thumb:active{transform:scale(1.2);cursor:grabbing}input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#16a34a;border:2.5px solid #fff;cursor:grab}\n"], directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "number": i1__namespace.DecimalPipe } });
|
|
2330
2337
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: LibeyNgCpmIndicatorComponent, decorators: [{
|
|
2331
2338
|
type: i0.Component,
|
|
2332
2339
|
args: [{
|
|
@@ -2353,6 +2360,8 @@
|
|
|
2353
2360
|
}], cpmLegend: [{
|
|
2354
2361
|
type: i0.ViewChild,
|
|
2355
2362
|
args: ['cpmLegend']
|
|
2363
|
+
}], colorChange: [{
|
|
2364
|
+
type: i0.Output
|
|
2356
2365
|
}], scale: [{
|
|
2357
2366
|
type: i0.Input
|
|
2358
2367
|
}] } });
|