libey-ng-component-library 0.0.29 → 0.0.31

package/README.md

@@ -1,24 +1,24 @@
-# LibeyNgComponentLibrary
-
-This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 12.2.0.
-
-## Code scaffolding
-
-Run `ng generate component component-name --project libey-ngComponent-library` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project libey-ngComponent-library`.
-> Note: Don't forget to add `--project libey-ngComponent-library` or else it will be added to the default project in your `angular.json` file. 
-
-## Build
-
-Run `ng build libey-ngComponent-library` to build the project. The build artifacts will be stored in the `dist/` directory.
-
-## Publishing
-
-After building your library with `ng build libey-ngComponent-library`, go to the dist folder `cd dist/libey-ng-component-library` and run `npm publish`.
-
-## Running unit tests
-
-Run `ng test libey-ngComponent-library` to execute the unit tests via [Karma](https://karma-runner.github.io).
-
-## Further help
-
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
+# LibeyNgComponentLibrary
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 12.2.0.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project libey-ngComponent-library` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project libey-ngComponent-library`.
+> Note: Don't forget to add `--project libey-ngComponent-library` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build libey-ngComponent-library` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build libey-ngComponent-library`, go to the dist folder `cd dist/libey-ng-component-library` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test libey-ngComponent-library` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

package/bundles/libey-ng-component-library.umd.js

@@ -2146,6 +2146,242 @@
                     }]
             }] });
 
+    // Modos de visualización del indicador
+    exports.CpmIndicatorMode = void 0;
+    (function (CpmIndicatorMode) {
+        CpmIndicatorMode["Cpm"] = "cpm";
+        CpmIndicatorMode["Gauge"] = "gauge";
+    })(exports.CpmIndicatorMode || (exports.CpmIndicatorMode = {}));
+    // Tipo de ítem: gasto ya consumido (Base) o estimado (Projected)
+    exports.CpmItemType = void 0;
+    (function (CpmItemType) {
+        CpmItemType["Base"] = "base";
+        CpmItemType["Projected"] = "projected";
+    })(exports.CpmItemType || (exports.CpmItemType = {}));
+    // Tercios por defecto si no se proporcionan thresholds
+    var DEFAULT_THRESHOLDS = {
+        zone1Max: 1 / 3,
+        zone2Max: 2 / 3,
+        zone3Max: 1.0,
+    };
+    var ZONE_COLORS = {
+        zone1: { dark: '#16a34a', light: '#86efac' },
+        zone2: { dark: '#ca8a04', light: '#fde68a' },
+        zone3: { dark: '#ea580c', light: '#fdba74' },
+        zone4: { dark: '#dc2626', light: '#fca5a5' }, // Rojo
+    };
+
+    var LibeyNgCpmIndicatorComponent = /** @class */ (function () {
+        function LibeyNgCpmIndicatorComponent() {
+            /** Tope máximo del contrato. */
+            this.limit = 250;
+            /**
+             * Ítems de gasto. El padre es responsable de:
+             * - Excluir ítems que no aplican al CPM
+             * - Marcar cada uno con CpmItemType.Base o CpmItemType.Projected
+             * - Actualizar el array al agregar o eliminar
+             */
+            this.items = [];
+            /** Símbolo de moneda. Por defecto 's/' (sol peruano). */
+            this.currency = 's/';
+            /** Modo de visualización: CPM (solo gauge) o Gauge (montos + leyenda). */
+            this.mode = exports.CpmIndicatorMode.Cpm;
+            /** Activa sliders de prueba. Solo para desarrollo, nunca en producción. */
+            this.devMode = false;
+            // ── Outputs ──
+            /** Emite el resumen de montos en cada recalculo. Usar para persistir en BD. */
+            this.cpmChange = new i0.EventEmitter();
+            /** Emite true cuando la proyección supera el límite. */
+            this.limitExceeded = new i0.EventEmitter();
+            this.scale = 1;
+            // ── Propiedades del template ──
+            this.baseAmount = 0;
+            this.projectedAmount = 0;
+            this.totalAmount = 0;
+            this.excess = 0;
+            this.activeColors = ZONE_COLORS['zone1'];
+            this.trackArcPath = '';
+            this.baseArcPath = '';
+            this.totalArcPath = '';
+            this.dotBasePos = { x: 0, y: 0 };
+            this.dotTotalPos = { x: 0, y: 0 };
+            this.dotTotalVisible = false;
+            this.limitTextPos = { x: 0, y: 0 };
+            // ── devMode ──
+            this.sliderBase = 0;
+            this.sliderProjected = 0;
+            // Necesario para usar el enum en el template
+            this.CpmIndicatorMode = exports.CpmIndicatorMode;
+            // Geometría del SVG (coordenadas internas del viewBox 220x130)
+            this.CX = 110;
+            this.CY = 115;
+            this.R = 90;
+            this.ANGLE_START = Math.PI;
+            this.ANGLE_END = 0;
+            this.EXCESS_TOLERANCE = 0.005;
+        }
+        Object.defineProperty(LibeyNgCpmIndicatorComponent.prototype, "sliderMax", {
+            get: function () {
+                return this.limit * 1.5;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        LibeyNgCpmIndicatorComponent.prototype.ngOnInit = function () {
+            this.recalculate();
+        };
+        LibeyNgCpmIndicatorComponent.prototype.ngOnChanges = function (changes) {
+            if (changes['items'] || changes['limit'] || changes['thresholds']) {
+                this.recalculate();
+            }
+        };
+        LibeyNgCpmIndicatorComponent.prototype.onDevBaseChange = function (event) {
+            this.sliderBase = parseFloat(event.target.value);
+            if (this.sliderBase > this.sliderProjected) {
+                this.sliderProjected = this.sliderBase;
+            }
+            this.recalculateFromSliders();
+        };
+        LibeyNgCpmIndicatorComponent.prototype.onDevProjectedChange = function (event) {
+            this.sliderProjected = parseFloat(event.target.value);
+            if (this.sliderProjected < this.sliderBase) {
+                this.sliderProjected = this.sliderBase;
+            }
+            this.recalculateFromSliders();
+        };
+        // Flujo de producción: calcula a partir del array de items
+        LibeyNgCpmIndicatorComponent.prototype.recalculate = function () {
+            this.baseAmount = this.items
+                .filter(function (i) { return i.type === exports.CpmItemType.Base; })
+                .reduce(function (acc, i) { return acc + i.amount; }, 0);
+            this.projectedAmount = this.items
+                .filter(function (i) { return i.type === exports.CpmItemType.Projected; })
+                .reduce(function (acc, i) { return acc + i.amount; }, 0);
+            this.totalAmount = this.baseAmount + this.projectedAmount;
+            // Sincroniza sliders por si se activa devMode
+            this.sliderBase = this.baseAmount;
+            this.sliderProjected = this.totalAmount;
+            this.updateGauge();
+            this.emitSummary();
+        };
+        // Flujo de devMode: calcula a partir de los sliders
+        LibeyNgCpmIndicatorComponent.prototype.recalculateFromSliders = function () {
+            this.baseAmount = this.sliderBase;
+            this.projectedAmount = this.sliderProjected - this.sliderBase;
+            this.totalAmount = this.sliderProjected;
+            this.updateGauge();
+            this.emitSummary();
+        };
+        LibeyNgCpmIndicatorComponent.prototype.updateGauge = function () {
+            var _a;
+            var thresholds = (_a = this.thresholds) !== null && _a !== void 0 ? _a : DEFAULT_THRESHOLDS;
+            this.activeColors = this.getZoneColors(this.totalAmount, thresholds);
+            this.trackArcPath = this.buildArcPath(this.ANGLE_START, this.ANGLE_END);
+            this.totalArcPath = this.buildArcPath(this.ANGLE_START, this.valueToAngle(this.totalAmount));
+            this.baseArcPath = this.buildArcPath(this.ANGLE_START, this.valueToAngle(this.baseAmount));
+            this.dotBasePos = this.polar(this.valueToAngle(this.baseAmount));
+            this.dotTotalPos = this.polar(this.valueToAngle(this.totalAmount));
+            // El punto de proyección solo aparece si va delante del real y no llegó al borde
+            this.dotTotalVisible = this.totalAmount > this.baseAmount && this.totalAmount < this.limit;
+            this.limitTextPos = this.polar(this.ANGLE_END, this.R + 20);
+            this.excess = Math.max(0, this.totalAmount - this.limit);
+            this.limitExceeded.emit(this.excess > this.EXCESS_TOLERANCE);
+        };
+        LibeyNgCpmIndicatorComponent.prototype.emitSummary = function () {
+            this.cpmChange.emit({
+                baseAmount: this.baseAmount,
+                projectedAmount: this.projectedAmount,
+                totalAmount: this.totalAmount,
+                limit: this.limit,
+            });
+        };
+        // Clampea el valor al límite para que el arco no desborde visualmente
+        LibeyNgCpmIndicatorComponent.prototype.valueToAngle = function (value) {
+            var clamped = Math.min(value, this.limit);
+            return Math.PI - (clamped / this.limit) * Math.PI;
+        };
+        LibeyNgCpmIndicatorComponent.prototype.polar = function (angle, radius) {
+            if (radius === void 0) { radius = this.R; }
+            return {
+                x: this.CX + radius * Math.cos(angle),
+                y: this.CY - radius * Math.sin(angle),
+            };
+        };
+        LibeyNgCpmIndicatorComponent.prototype.buildArcPath = function (a1, a2) {
+            var start = this.polar(a1);
+            var end = this.polar(a2);
+            var large = (a1 - a2) > Math.PI ? 1 : 0;
+            return "M " + start.x + " " + start.y + " A " + this.R + " " + this.R + " 0 " + large + " 1 " + end.x + " " + end.y;
+        };
+        LibeyNgCpmIndicatorComponent.prototype.getZoneColors = function (value, t) {
+            var pct = value / this.limit;
+            if (pct < t.zone1Max)
+                return ZONE_COLORS['zone1'];
+            if (pct < t.zone2Max)
+                return ZONE_COLORS['zone2'];
+            if (pct < t.zone3Max)
+                return ZONE_COLORS['zone3'];
+            return ZONE_COLORS['zone4'];
+        };
+        return LibeyNgCpmIndicatorComponent;
+    }());
+    LibeyNgCpmIndicatorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: LibeyNgCpmIndicatorComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    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 } });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: LibeyNgCpmIndicatorComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'lib-libey-ng-cpm-indicator',
+                        templateUrl: './libey-ng-cpm-indicator.component.html',
+                        styleUrls: ['./libey-ng-cpm-indicator.component.css']
+                    }]
+            }], ctorParameters: function () { return []; }, propDecorators: { limit: [{
+                    type: i0.Input
+                }], items: [{
+                    type: i0.Input
+                }], currency: [{
+                    type: i0.Input
+                }], thresholds: [{
+                    type: i0.Input
+                }], mode: [{
+                    type: i0.Input
+                }], devMode: [{
+                    type: i0.Input
+                }], cpmChange: [{
+                    type: i0.Output
+                }], limitExceeded: [{
+                    type: i0.Output
+                }], cpmLegend: [{
+                    type: i0.ViewChild,
+                    args: ['cpmLegend']
+                }], scale: [{
+                    type: i0.Input
+                }] } });
+
+    var LibeyNgCpmIndicatorModule = /** @class */ (function () {
+        function LibeyNgCpmIndicatorModule() {
+        }
+        return LibeyNgCpmIndicatorModule;
+    }());
+    LibeyNgCpmIndicatorModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: LibeyNgCpmIndicatorModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    LibeyNgCpmIndicatorModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: LibeyNgCpmIndicatorModule, declarations: [LibeyNgCpmIndicatorComponent], imports: [i1$1.CommonModule], exports: [LibeyNgCpmIndicatorComponent] });
+    LibeyNgCpmIndicatorModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: LibeyNgCpmIndicatorModule, imports: [[
+                i1$1.CommonModule
+            ]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: LibeyNgCpmIndicatorModule, decorators: [{
+                type: i0.NgModule,
+                args: [{
+                        declarations: [
+                            LibeyNgCpmIndicatorComponent
+                        ],
+                        imports: [
+                            i1$1.CommonModule
+                        ],
+                        exports: [
+                            LibeyNgCpmIndicatorComponent
+                        ]
+                    }]
+            }] });
+
     var LibeyNgComponentLibraryModule = /** @class */ (function () {
         function LibeyNgComponentLibraryModule() {
         }
@@ -2157,21 +2393,25 @@
             LibeyNgTableModule,
             LibeyNgSignatureModule,
             i2.SignaturePadModule,
-            IconsModule], exports: [LibeyNgTableModule,
+            IconsModule,
+            LibeyNgCpmIndicatorModule], exports: [LibeyNgTableModule,
             LibeyNgSignatureModule,
             i2.SignaturePadModule,
-            IconsModule] });
+            IconsModule,
+            LibeyNgCpmIndicatorModule] });
     LibeyNgComponentLibraryModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: LibeyNgComponentLibraryModule, providers: [i1$1.DatePipe], imports: [[
                 i1$1.CommonModule,
                 i3.FormsModule,
                 LibeyNgTableModule,
                 LibeyNgSignatureModule,
                 i2.SignaturePadModule,
-                IconsModule
+                IconsModule,
+                LibeyNgCpmIndicatorModule,
             ], LibeyNgTableModule,
             LibeyNgSignatureModule,
             i2.SignaturePadModule,
-            IconsModule] });
+            IconsModule,
+            LibeyNgCpmIndicatorModule] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: LibeyNgComponentLibraryModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
@@ -2182,13 +2422,15 @@
                             LibeyNgTableModule,
                             LibeyNgSignatureModule,
                             i2.SignaturePadModule,
-                            IconsModule
+                            IconsModule,
+                            LibeyNgCpmIndicatorModule,
                         ],
                         exports: [
                             LibeyNgTableModule,
                             LibeyNgSignatureModule,
                             i2.SignaturePadModule,
                             IconsModule,
+                            LibeyNgCpmIndicatorModule
                         ],
                         providers: [i1$1.DatePipe]
                     }]
@@ -2218,17 +2460,21 @@
         enumerable: true,
         get: function () { return ngBootstrap.NgbModule; }
     });
+    exports.DEFAULT_THRESHOLDS = DEFAULT_THRESHOLDS;
     exports.IconsModule = IconsModule;
     exports.LibeyColumnDirective = LibeyColumnDirective;
     exports.LibeyNgComponentLibraryComponent = LibeyNgComponentLibraryComponent;
     exports.LibeyNgComponentLibraryModule = LibeyNgComponentLibraryModule;
     exports.LibeyNgComponentLibraryService = LibeyNgComponentLibraryService;
+    exports.LibeyNgCpmIndicatorComponent = LibeyNgCpmIndicatorComponent;
+    exports.LibeyNgCpmIndicatorModule = LibeyNgCpmIndicatorModule;
     exports.LibeyNgIconsComponent = LibeyNgIconsComponent;
     exports.LibeyNgSignatureComponent = LibeyNgSignatureComponent;
     exports.LibeyNgSignatureModule = LibeyNgSignatureModule;
     exports.LibeyNgTableComponent = LibeyNgTableComponent;
     exports.LibeyNgTableModule = LibeyNgTableModule;
     exports.SigWebTablet = SigWebTablet;
+    exports.ZONE_COLORS = ZONE_COLORS;
     Object.keys(core).forEach(function (k) {
         if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
             enumerable: true,