libey-ng-component-library 0.0.30 → 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 +17 -5
- package/bundles/libey-ng-component-library.umd.js.map +1 -1
- package/esm2015/lib/cpm-indicator/libey-ng-cpm-indicator.component.js +14 -2
- package/esm2015/utils/CpmIndicator/cpm-indicator-types.js +5 -5
- package/fesm2015/libey-ng-component-library.js +17 -5
- package/fesm2015/libey-ng-component-library.js.map +1 -1
- package/lib/cpm-indicator/libey-ng-cpm-indicator.component.d.ts +4 -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,8 @@
|
|
|
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();
|
|
2197
|
+
this.scale = 1;
|
|
2196
2198
|
// ── Propiedades del template ──
|
|
2197
2199
|
this.baseAmount = 0;
|
|
2198
2200
|
this.projectedAmount = 0;
|
|
@@ -2285,6 +2287,12 @@
|
|
|
2285
2287
|
this.limitTextPos = this.polar(this.ANGLE_END, this.R + 20);
|
|
2286
2288
|
this.excess = Math.max(0, this.totalAmount - this.limit);
|
|
2287
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
|
+
});
|
|
2288
2296
|
};
|
|
2289
2297
|
LibeyNgCpmIndicatorComponent.prototype.emitSummary = function () {
|
|
2290
2298
|
this.cpmChange.emit({
|
|
@@ -2325,7 +2333,7 @@
|
|
|
2325
2333
|
return LibeyNgCpmIndicatorComponent;
|
|
2326
2334
|
}());
|
|
2327
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 });
|
|
2328
|
-
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" }, 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\">\r\n <svg class=\"gauge-svg\" viewBox=\"0 0 220 130\" xmlns=\"http://www.w3.org/2000/svg\">\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\">\r\n <div class=\"main-value\">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\">\r\n <svg class=\"gauge-svg\" viewBox=\"0 0 220 130\" xmlns=\"http://www.w3.org/2000/svg\">\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\">\r\n <div class=\"main-value\" [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\">de {{ currency }}{{ limit | number:'1.2-2' }}</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;width:220px;height:120px;overflow:visible}.gauge-svg{width:220px;height:135px;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 } });
|
|
2329
2337
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: LibeyNgCpmIndicatorComponent, decorators: [{
|
|
2330
2338
|
type: i0.Component,
|
|
2331
2339
|
args: [{
|
|
@@ -2352,6 +2360,10 @@
|
|
|
2352
2360
|
}], cpmLegend: [{
|
|
2353
2361
|
type: i0.ViewChild,
|
|
2354
2362
|
args: ['cpmLegend']
|
|
2363
|
+
}], colorChange: [{
|
|
2364
|
+
type: i0.Output
|
|
2365
|
+
}], scale: [{
|
|
2366
|
+
type: i0.Input
|
|
2355
2367
|
}] } });
|
|
2356
2368
|
|
|
2357
2369
|
var LibeyNgCpmIndicatorModule = /** @class */ (function () {
|