libey-ng-component-library 0.0.30 → 0.0.31
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 +4 -1
- package/bundles/libey-ng-component-library.umd.js.map +1 -1
- package/esm2015/lib/cpm-indicator/libey-ng-cpm-indicator.component.js +5 -2
- package/fesm2015/libey-ng-component-library.js +4 -1
- package/fesm2015/libey-ng-component-library.js.map +1 -1
- package/lib/cpm-indicator/libey-ng-cpm-indicator.component.d.ts +2 -1
- package/package.json +1 -1
|
@@ -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.scale = 1;
|
|
2196
2197
|
// ── Propiedades del template ──
|
|
2197
2198
|
this.baseAmount = 0;
|
|
2198
2199
|
this.projectedAmount = 0;
|
|
@@ -2325,7 +2326,7 @@
|
|
|
2325
2326
|
return LibeyNgCpmIndicatorComponent;
|
|
2326
2327
|
}());
|
|
2327
2328
|
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 } });
|
|
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 } });
|
|
2329
2330
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: LibeyNgCpmIndicatorComponent, decorators: [{
|
|
2330
2331
|
type: i0.Component,
|
|
2331
2332
|
args: [{
|
|
@@ -2352,6 +2353,8 @@
|
|
|
2352
2353
|
}], cpmLegend: [{
|
|
2353
2354
|
type: i0.ViewChild,
|
|
2354
2355
|
args: ['cpmLegend']
|
|
2356
|
+
}], scale: [{
|
|
2357
|
+
type: i0.Input
|
|
2355
2358
|
}] } });
|
|
2356
2359
|
|
|
2357
2360
|
var LibeyNgCpmIndicatorModule = /** @class */ (function () {
|