libey-ng-component-library 0.0.32 → 0.0.34

package/karma.conf.js

@@ -0,0 +1,44 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, '../../coverage/libey-ng-component-library'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ]
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};

package/ng-package.json

@@ -0,0 +1,13 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/libey-ng-component-library",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  },
+  "whitelistedNonPeerDependencies": [
+    "angular2-signaturepad",
+    "@ng-select/ng-select",
+    "@ng-bootstrap/ng-bootstrap",
+    "@popperjs/core"
+  ]
+}

package/package.json

@@ -1,24 +1,17 @@
-{
-  "name": "libey-ng-component-library",
-  "version": "0.0.32",
-  "peerDependencies": {
-    "@angular/common": "^12.2.0",
-    "@angular/core": "^12.2.0",
-    "@angular/forms": "^12.2.0",
-    "@ng-bootstrap/ng-bootstrap": "^12.1.2"
-  },
-  "dependencies": {
-    "@ng-bootstrap/ng-bootstrap": "^12.1.1",
-    "@ng-select/ng-select": "^8.3.0",
-    "@popperjs/core": "^2.11.5",
-    "angular2-signaturepad": "^4.0.2",
-    "tslib": "^2.3.0"
-  },
-  "main": "bundles/libey-ng-component-library.umd.js",
-  "module": "fesm2015/libey-ng-component-library.js",
-  "es2015": "fesm2015/libey-ng-component-library.js",
-  "esm2015": "esm2015/libey-ng-component-library.js",
-  "fesm2015": "fesm2015/libey-ng-component-library.js",
-  "typings": "libey-ng-component-library.d.ts",
-  "sideEffects": false
-}
+{
+  "name": "libey-ng-component-library",
+  "version": "0.0.34",
+  "peerDependencies": {
+    "@angular/common": "^12.2.0",
+    "@angular/core": "^12.2.0",
+    "@angular/forms": "^12.2.0",
+    "@ng-bootstrap/ng-bootstrap": "^12.1.2"
+  },
+  "dependencies": {
+    "@ng-bootstrap/ng-bootstrap": "^12.1.1",
+    "@ng-select/ng-select": "^8.3.0",
+    "@popperjs/core": "^2.11.5",
+    "angular2-signaturepad": "^4.0.2",
+    "tslib": "^2.3.0"
+  }
+}

package/src/lib/cpm-indicator/libey-ng-cpm-indicator.component.css

@@ -0,0 +1,216 @@
+
+/* ── Host ── */
+:host {
+  display: inline-flex;
+  flex-direction: column;  /* ← agregar */
+  align-items: center;     /* ← agregar */
+  font-family: 'DM Sans', sans-serif;
+}
+
+/* ═══════════════════════════════════════════════════════════
+   GAUGE — compartido entre modo CPM y modo Gauge
+   El modo CPM reutiliza todas estas clases, solo cambia
+   el texto central ("CPM" en lugar del monto)
+═══════════════════════════════════════════════════════════ */
+
+/* ── Tarjeta (solo modo Gauge) ── */
+.card {
+  background: #ffffff;
+  border-radius: 20px;
+  padding: 36px 40px 28px;
+  width: 340px;
+  box-shadow:
+    0 4px 32px rgba(0, 0, 0, 0.10),
+    0 1px 4px rgba(0, 0, 0, 0.06);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+/* ── Gauge SVG ── */
+.gauge-wrap {
+  position: relative;
+  overflow: visible;
+}
+
+.gauge-svg {
+  overflow: visible;
+}
+
+/* ── Valor central ── */
+.gauge-center {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  text-align: center;
+  pointer-events: none;
+  white-space: nowrap;
+}
+
+/* CPM — una sola línea, necesita más espacio */
+.gauge-center--cpm {
+  bottom: 15px;
+}
+
+/* Gauge — dos líneas (monto + límite) */
+.gauge-center--gauge {
+  bottom: -10px;
+}
+
+.main-value {
+  font-size: 26px;
+  font-weight: 700;
+  font-family: 'DM Mono', monospace;
+  letter-spacing: -0.5px;
+  color: #1a1a2e;
+  line-height: 1;
+  transition: color 0.3s ease;
+}
+
+.limit-label {
+  font-size: 12px;
+  color: #8a8fa8;
+  font-weight: 400;
+  margin-top: 3px;
+  font-family: 'DM Mono', monospace;
+}
+
+/* ── Leyenda ── */
+.legend {
+  display: flex;
+  gap: 14px;
+  margin-top: 22px;
+  margin-bottom: 6px;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: #555;
+  font-weight: 500;
+}
+
+/* ── Punto de leyenda ── */
+.dot {
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+/* ── Separador ── */
+.divider {
+  width: 100%;
+  height: 1px;
+  background: #f0f2f5;
+  margin: 14px 0 4px;
+}
+
+/* ── Badge dev mode ── */
+.dev-badge {
+  font-size: 11px;
+  font-weight: 700;
+  color: #7c3aed;
+  background: #ede9fe;
+  border-radius: 6px;
+  padding: 3px 10px;
+  margin-bottom: 8px;
+  letter-spacing: 0.3px;
+}
+
+/* ── Controles devMode ── */
+.controls {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.ctrl-row {
+  display: flex;
+  flex-direction: column;
+  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;
+  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; }
+
+/* ── Slider ── */
+input[type='range'] {
+  -webkit-appearance: none;
+  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 rgba(0, 0, 0, 0.2);
+  cursor: grab;
+  transition: background 0.3s, transform 0.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;
+}

package/src/lib/cpm-indicator/libey-ng-cpm-indicator.component.html

@@ -0,0 +1,201 @@
+<!-- Modo CPM: solo el gauge con "CPM" en el centro -->
+<ng-container *ngIf="mode === CpmIndicatorMode.Cpm">
+  <div class="gauge-wrap" [style.width.px]="220 * scale" [style.height.px]="120 * scale">
+    <svg class="gauge-svg" viewBox="0 0 220 130" xmlns="http://www.w3.org/2000/svg"
+    [style.width.px]="220 * scale"
+    [style.height.px]="135 * scale">
+      <defs>
+        <filter id="dotShadowCpm" x="-60%" y="-60%" width="220%" height="220%">
+          <feDropShadow dx="0" dy="1" stdDeviation="2" flood-color="rgba(0,0,0,0.22)"/>
+        </filter>
+      </defs>
+
+      <path [attr.d]="trackArcPath" fill="none" stroke="#E8EAEF" stroke-width="14" stroke-linecap="round"/>
+
+      <!-- Proyección debajo, real encima -->
+      <path
+        [style.display]="totalAmount > 0 ? '' : 'none'"
+        [attr.d]="totalArcPath"
+        [attr.stroke]="activeColors.light"
+        fill="none" stroke-width="14" stroke-linecap="round"/>
+
+      <path
+        [style.display]="baseAmount > 0 ? '' : 'none'"
+        [attr.d]="baseArcPath"
+        [attr.stroke]="activeColors.dark"
+        fill="none" stroke-width="14" stroke-linecap="round"/>
+
+      <circle
+        [style.display]="baseAmount > 0 ? '' : 'none'"
+        [attr.cx]="dotBasePos.x" [attr.cy]="dotBasePos.y"
+        r="7" [attr.fill]="activeColors.dark"
+        stroke="#ffffff" stroke-width="2.5"
+        filter="url(#dotShadowCpm)"/>
+
+      <!-- Solo visible si la proyección va por delante del real -->
+      <circle
+        [style.display]="dotTotalVisible ? '' : 'none'"
+        [attr.cx]="dotTotalPos.x" [attr.cy]="dotTotalPos.y"
+        r="6" [attr.fill]="activeColors.light"
+        stroke="#ffffff" stroke-width="2.5"
+        filter="url(#dotShadowCpm)"/>
+    </svg>
+
+    <div class="gauge-center gauge-center--cpm" [style.bottom.px]="15 * scale">
+      <div class="main-value" [style.font-size.px]="26 * scale">CPM</div>
+    </div>
+  </div>
+</ng-container>
+
+
+<!-- Modo Gauge: gauge completo con montos, leyenda y alerta -->
+<ng-container *ngIf="mode === CpmIndicatorMode.Gauge">
+  <div class="gauge-wrap" [style.width.px]="220 * scale" [style.height.px]="120 * scale">
+    <svg class="gauge-svg" viewBox="0 0 220 130" xmlns="http://www.w3.org/2000/svg"
+    [style.width.px]="220 * scale"
+    [style.height.px]="135 * scale">
+      <defs>
+        <filter id="dotShadowGauge" x="-60%" y="-60%" width="220%" height="220%">
+          <feDropShadow dx="0" dy="1" stdDeviation="2" flood-color="rgba(0,0,0,0.22)"/>
+        </filter>
+      </defs>
+
+      <path [attr.d]="trackArcPath" fill="none" stroke="#E8EAEF" stroke-width="14" stroke-linecap="round"/>
+
+      <!-- Proyección debajo, real encima -->
+      <path
+        [style.display]="totalAmount > 0 ? '' : 'none'"
+        [attr.d]="totalArcPath"
+        [attr.stroke]="activeColors.light"
+        fill="none" stroke-width="14" stroke-linecap="round"/>
+
+      <path
+        [style.display]="baseAmount > 0 ? '' : 'none'"
+        [attr.d]="baseArcPath"
+        [attr.stroke]="activeColors.dark"
+        fill="none" stroke-width="14" stroke-linecap="round"/>
+
+      <circle
+        [style.display]="baseAmount > 0 ? '' : 'none'"
+        [attr.cx]="dotBasePos.x" [attr.cy]="dotBasePos.y"
+        r="7" [attr.fill]="activeColors.dark"
+        stroke="#ffffff" stroke-width="2.5"
+        filter="url(#dotShadowGauge)"/>
+
+      <circle
+        [style.display]="dotTotalVisible ? '' : 'none'"
+        [attr.cx]="dotTotalPos.x" [attr.cy]="dotTotalPos.y"
+        r="6" [attr.fill]="activeColors.light"
+        stroke="#ffffff" stroke-width="2.5"
+        filter="url(#dotShadowGauge)"/>
+
+      <!-- <text
+        [attr.x]="limitTextPos.x" [attr.y]="limitTextPos.y"
+        font-family="DM Mono,monospace" font-size="9" font-weight="600"
+        fill="#8a8fa8" text-anchor="middle">
+        {{ currency }}{{ limit }}
+      </text> -->
+    </svg>
+
+    <!-- El color del monto cambia a rojo si supera el límite -->
+    <div class="gauge-center gauge-center--gauge" [style.bottom.px]="-10 * scale">
+      <div class="main-value"
+          [style.font-size.px]="26 * scale"
+          [style.color]="totalAmount > limit ? activeColors.dark : '#1a1a2e'">
+        CPM<br>
+        {{ currency }}{{ totalAmount | number:'1.2-2' }}
+      </div>
+      <div class="limit-label" [style.font-size.px]="16 * scale">
+        de {{ currency }}{{ limit | number:'1.2-2' }}
+      </div>
+    </div>
+  </div>
+
+  <div class="legend">
+    <div class="legend-item">
+      <span class="dot" [style.background]="activeColors.dark"></span>
+      Real
+    </div>
+    <div class="legend-item">
+      <span class="dot"
+            [style.background]="activeColors.light"
+            [style.border]="'1.5px solid ' + activeColors.dark">
+      </span>
+      Proyección
+    </div>
+    <div class="legend-item">
+      <span class="dot" style="background:#e8ecf5; border:1px solid #ccc"></span>
+      Disponible
+    </div>
+  </div>
+
+  <!-- Sliders de prueba — solo en devMode -->
+  <ng-container *ngIf="devMode">
+    <div class="divider"></div>
+    <div class="dev-badge">Dev Mode</div>
+    <div class="controls">
+
+      <div class="ctrl-row">
+        <div class="ctrl-header">
+          <span class="ctrl-label">
+            <span class="ctrl-label-dot" [style.background]="activeColors.dark"></span>
+            Gasto real (consumido)
+          </span>
+          <span class="ctrl-val" [style.color]="activeColors.dark">
+            {{ currency }}{{ sliderBase | number:'1.2-2' }}
+          </span>
+        </div>
+        <div class="zones-bar">
+          <div style="background:#16a34a"></div>
+          <div style="background:#ca8a04"></div>
+          <div style="background:#ea580c"></div>
+          <div style="background:#dc2626"></div>
+        </div>
+        <input type="range" [min]="0" [max]="sliderMax" step="0.5"
+               [value]="sliderBase" (input)="onDevBaseChange($event)">
+      </div>
+
+      <div class="ctrl-row">
+        <div class="ctrl-header">
+          <span class="ctrl-label">
+            <span class="ctrl-label-dot"
+                  [style.background]="activeColors.light"
+                  [style.border]="'1px solid ' + activeColors.dark"
+                  style="border-radius:50%">
+            </span>
+            Proyección (presupuesto)
+          </span>
+          <span class="ctrl-val" [style.color]="activeColors.dark">
+            {{ currency }}{{ sliderProjected | number:'1.2-2' }}
+          </span>
+        </div>
+        <div class="zones-bar">
+          <div style="background:#16a34a"></div>
+          <div style="background:#ca8a04"></div>
+          <div style="background:#ea580c"></div>
+          <div style="background:#dc2626"></div>
+        </div>
+        <input type="range" [min]="0" [max]="sliderMax" step="0.5"
+               [value]="sliderProjected" (input)="onDevProjectedChange($event)">
+      </div>
+
+    </div>
+  </ng-container>
+</ng-container>
+
+<ng-template #cpmLegend>
+  <div class="legend-tooltip">
+    <div class="legend-tooltip__item">
+      <span class="dot" [style.background]="activeColors.dark"></span>
+      Real<span *ngIf="mode === CpmIndicatorMode.Gauge">: {{ currency }}{{ baseAmount | number:'1.2-2' }}</span>
+    </div>
+    <div class="legend-tooltip__item">
+      <span class="dot" [style.background]="activeColors.light"></span>
+      Proyección<span *ngIf="mode === CpmIndicatorMode.Gauge">: {{ currency }}{{ projectedAmount | number:'1.2-2' }}</span>
+    </div>
+    <div class="legend-tooltip__item">
+      <span class="dot" style="background:#e8ecf5"></span>
+      Disponible<span *ngIf="mode === CpmIndicatorMode.Gauge">: {{ currency }}{{ (limit - totalAmount) | number:'1.2-2' }}</span>
+    </div>
+  </div>
+</ng-template>

package/src/lib/cpm-indicator/libey-ng-cpm-indicator.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LibeyNgCpmIndicatorComponent } from './libey-ng-cpm-indicator.component';
+
+describe('LibeyNgCpmIndicatorComponent', () => {
+  let component: LibeyNgCpmIndicatorComponent;
+  let fixture: ComponentFixture<LibeyNgCpmIndicatorComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ LibeyNgCpmIndicatorComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LibeyNgCpmIndicatorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});