libey-ng-component-library 0.0.29 → 0.0.30

package/fesm2015/libey-ng-component-library.js

@@ -33,19 +33,19 @@ class LibeyNgComponentLibraryComponent {
     }
 }
 LibeyNgComponentLibraryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: LibeyNgComponentLibraryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-LibeyNgComponentLibraryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: LibeyNgComponentLibraryComponent, selector: "lib-libey-ngComponent-library", ngImport: i0, template: `
-    <p>
-      libey-ng-component-library works!
-    </p>
+LibeyNgComponentLibraryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: LibeyNgComponentLibraryComponent, selector: "lib-libey-ngComponent-library", ngImport: i0, template: `
+    <p>
+      libey-ng-component-library works!
+    </p>
   `, isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: LibeyNgComponentLibraryComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'lib-libey-ngComponent-library',
-                    template: `
-    <p>
-      libey-ng-component-library works!
-    </p>
+                    template: `
+    <p>
+      libey-ng-component-library works!
+    </p>
   `,
                     styles: []
                 }]
@@ -2094,6 +2094,230 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 }]
         }] });
 
+// Modos de visualización del indicador
+var CpmIndicatorMode;
+(function (CpmIndicatorMode) {
+    CpmIndicatorMode["Cpm"] = "cpm";
+    CpmIndicatorMode["Gauge"] = "gauge";
+})(CpmIndicatorMode || (CpmIndicatorMode = {}));
+// Tipo de ítem: gasto ya consumido (Base) o estimado (Projected)
+var CpmItemType;
+(function (CpmItemType) {
+    CpmItemType["Base"] = "base";
+    CpmItemType["Projected"] = "projected";
+})(CpmItemType || (CpmItemType = {}));
+// Tercios por defecto si no se proporcionan thresholds
+const DEFAULT_THRESHOLDS = {
+    zone1Max: 1 / 3,
+    zone2Max: 2 / 3,
+    zone3Max: 1.0,
+};
+const ZONE_COLORS = {
+    zone1: { dark: '#16a34a', light: '#86efac' },
+    zone2: { dark: '#ca8a04', light: '#fde68a' },
+    zone3: { dark: '#ea580c', light: '#fdba74' },
+    zone4: { dark: '#dc2626', light: '#fca5a5' }, // Rojo
+};
+
+class LibeyNgCpmIndicatorComponent {
+    constructor() {
+        /** 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 = 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 EventEmitter();
+        /** Emite true cuando la proyección supera el límite. */
+        this.limitExceeded = new EventEmitter();
+        // ── 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 = 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;
+    }
+    get sliderMax() {
+        return this.limit * 1.5;
+    }
+    ngOnInit() {
+        this.recalculate();
+    }
+    ngOnChanges(changes) {
+        if (changes['items'] || changes['limit'] || changes['thresholds']) {
+            this.recalculate();
+        }
+    }
+    onDevBaseChange(event) {
+        this.sliderBase = parseFloat(event.target.value);
+        if (this.sliderBase > this.sliderProjected) {
+            this.sliderProjected = this.sliderBase;
+        }
+        this.recalculateFromSliders();
+    }
+    onDevProjectedChange(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
+    recalculate() {
+        this.baseAmount = this.items
+            .filter(i => i.type === CpmItemType.Base)
+            .reduce((acc, i) => acc + i.amount, 0);
+        this.projectedAmount = this.items
+            .filter(i => i.type === CpmItemType.Projected)
+            .reduce((acc, i) => 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
+    recalculateFromSliders() {
+        this.baseAmount = this.sliderBase;
+        this.projectedAmount = this.sliderProjected - this.sliderBase;
+        this.totalAmount = this.sliderProjected;
+        this.updateGauge();
+        this.emitSummary();
+    }
+    updateGauge() {
+        var _a;
+        const 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);
+    }
+    emitSummary() {
+        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
+    valueToAngle(value) {
+        const clamped = Math.min(value, this.limit);
+        return Math.PI - (clamped / this.limit) * Math.PI;
+    }
+    polar(angle, radius = this.R) {
+        return {
+            x: this.CX + radius * Math.cos(angle),
+            y: this.CY - radius * Math.sin(angle),
+        };
+    }
+    buildArcPath(a1, a2) {
+        const start = this.polar(a1);
+        const end = this.polar(a2);
+        const 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}`;
+    }
+    getZoneColors(value, t) {
+        const 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'];
+    }
+}
+LibeyNgCpmIndicatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: LibeyNgCpmIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+LibeyNgCpmIndicatorComponent.ɵcmp = i0.ɵɵ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, 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "number": i1.DecimalPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: LibeyNgCpmIndicatorComponent, decorators: [{
+            type: 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: Input
+            }], items: [{
+                type: Input
+            }], currency: [{
+                type: Input
+            }], thresholds: [{
+                type: Input
+            }], mode: [{
+                type: Input
+            }], devMode: [{
+                type: Input
+            }], cpmChange: [{
+                type: Output
+            }], limitExceeded: [{
+                type: Output
+            }], cpmLegend: [{
+                type: ViewChild,
+                args: ['cpmLegend']
+            }] } });
+
+class LibeyNgCpmIndicatorModule {
+}
+LibeyNgCpmIndicatorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: LibeyNgCpmIndicatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+LibeyNgCpmIndicatorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: LibeyNgCpmIndicatorModule, declarations: [LibeyNgCpmIndicatorComponent], imports: [CommonModule], exports: [LibeyNgCpmIndicatorComponent] });
+LibeyNgCpmIndicatorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: LibeyNgCpmIndicatorModule, imports: [[
+            CommonModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: LibeyNgCpmIndicatorModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        LibeyNgCpmIndicatorComponent
+                    ],
+                    imports: [
+                        CommonModule
+                    ],
+                    exports: [
+                        LibeyNgCpmIndicatorComponent
+                    ]
+                }]
+        }] });
+
 class LibeyNgComponentLibraryModule {
 }
 LibeyNgComponentLibraryModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: LibeyNgComponentLibraryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -2102,21 +2326,25 @@ LibeyNgComponentLibraryModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12
         LibeyNgTableModule,
         LibeyNgSignatureModule,
         SignaturePadModule,
-        IconsModule], exports: [LibeyNgTableModule,
+        IconsModule,
+        LibeyNgCpmIndicatorModule], exports: [LibeyNgTableModule,
         LibeyNgSignatureModule,
         SignaturePadModule,
-        IconsModule] });
+        IconsModule,
+        LibeyNgCpmIndicatorModule] });
 LibeyNgComponentLibraryModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: LibeyNgComponentLibraryModule, providers: [DatePipe], imports: [[
             CommonModule,
             FormsModule,
             LibeyNgTableModule,
             LibeyNgSignatureModule,
             SignaturePadModule,
-            IconsModule
+            IconsModule,
+            LibeyNgCpmIndicatorModule,
         ], LibeyNgTableModule,
         LibeyNgSignatureModule,
         SignaturePadModule,
-        IconsModule] });
+        IconsModule,
+        LibeyNgCpmIndicatorModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: LibeyNgComponentLibraryModule, decorators: [{
             type: NgModule,
             args: [{
@@ -2127,13 +2355,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                         LibeyNgTableModule,
                         LibeyNgSignatureModule,
                         SignaturePadModule,
-                        IconsModule
+                        IconsModule,
+                        LibeyNgCpmIndicatorModule,
                     ],
                     exports: [
                         LibeyNgTableModule,
                         LibeyNgSignatureModule,
                         SignaturePadModule,
                         IconsModule,
+                        LibeyNgCpmIndicatorModule
                     ],
                     providers: [DatePipe]
                 }]
@@ -2147,5 +2377,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { IconsModule, LibeyColumnDirective, LibeyNgComponentLibraryComponent, LibeyNgComponentLibraryModule, LibeyNgComponentLibraryService, LibeyNgIconsComponent, LibeyNgSignatureComponent, LibeyNgSignatureModule, LibeyNgTableComponent, LibeyNgTableModule, SigWebTablet };
+export { CpmIndicatorMode, CpmItemType, DEFAULT_THRESHOLDS, IconsModule, LibeyColumnDirective, LibeyNgComponentLibraryComponent, LibeyNgComponentLibraryModule, LibeyNgComponentLibraryService, LibeyNgCpmIndicatorComponent, LibeyNgCpmIndicatorModule, LibeyNgIconsComponent, LibeyNgSignatureComponent, LibeyNgSignatureModule, LibeyNgTableComponent, LibeyNgTableModule, SigWebTablet, ZONE_COLORS };
 //# sourceMappingURL=libey-ng-component-library.js.map