@neural-ui/core 1.2.1 → 1.3.0

package/fesm2022/neural-ui-core-knob.mjs

@@ -0,0 +1,323 @@
+import * as i0 from '@angular/core';
+import { input, output, signal, computed, inject, ElementRef, forwardRef, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+
+let _seq = 0;
+/**
+ * NeuralUI Knob Component
+ *
+ * Control de dial rotatorio para selección de valores numéricos. Implementa CVA.
+ *
+ * Uso: <neu-knob [min]="0" [max]="100" formControlName="volume" />
+ */
+class NeuKnobComponent {
+    /** Valor mínimo / Min value */
+    min = input(0, ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    /** Valor máximo / Max value */
+    max = input(100, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    /** Incremento por paso / Step increment */
+    step = input(1, ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
+    /** Tamaño del dial en px / Dial size in px */
+    size = input(80, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Muestra el valor numérico en el centro / Shows the numeric value in the center */
+    showValue = input(true, ...(ngDevMode ? [{ debugName: "showValue" }] : /* istanbul ignore next */ []));
+    /** Etiqueta visible / Visible label */
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Emitido en cada cambio / Emitted on each change */
+    valueChange = output();
+    _id = `neu-knob-${++_seq}`;
+    _cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_cvaDisabled" }] : /* istanbul ignore next */ []));
+    _value = signal(0, ...(ngDevMode ? [{ debugName: "_value" }] : /* istanbul ignore next */ []));
+    _strokeWidth = computed(() => Math.max(4, this.size() * 0.1), ...(ngDevMode ? [{ debugName: "_strokeWidth" }] : /* istanbul ignore next */ []));
+    _radius = computed(() => (this.size() - this._strokeWidth()) / 2 - 2, ...(ngDevMode ? [{ debugName: "_radius" }] : /* istanbul ignore next */ []));
+    _circumference = computed(() => 2 * Math.PI * this._radius(), ...(ngDevMode ? [{ debugName: "_circumference" }] : /* istanbul ignore next */ []));
+    /** Arc spans 260° (from -40° to 220°) */
+    _arcLength = computed(() => (260 / 360) * this._circumference(), ...(ngDevMode ? [{ debugName: "_arcLength" }] : /* istanbul ignore next */ []));
+    _normalizedValue = computed(() => {
+        const range = this.max() - this.min();
+        return range === 0 ? 0 : (this._value() - this.min()) / range;
+    }, ...(ngDevMode ? [{ debugName: "_normalizedValue" }] : /* istanbul ignore next */ []));
+    _arcDashArray = computed(() => `${this._arcLength()} ${this._circumference()}`, ...(ngDevMode ? [{ debugName: "_arcDashArray" }] : /* istanbul ignore next */ []));
+    _arcDashOffset = computed(() => this._arcLength() * (1 - this._normalizedValue()), ...(ngDevMode ? [{ debugName: "_arcDashOffset" }] : /* istanbul ignore next */ []));
+    // Indicator position on the track (relative to SVG center)
+    // El arco empieza en rotate(-220°) desde el Este del SVG.
+    // El punto indicador reposa en el Norte (12 en punto).
+    // Para que el indicador siga el arco, la rotación CW debe ser:
+    //   θ = 230° + normalizedValue × 260°
+    // (arco de 7:40 → 1:20 pasando por 12:00 en la mitad)
+    // Arc starts at rotate(-220°) from East; indicator natural position is North (12 o'clock).
+    // Correct clockwise rotation formula: θ = 230 + normalizedValue × 260.
+    _indicatorAngle = computed(() => this._normalizedValue() * 260 + 230, ...(ngDevMode ? [{ debugName: "_indicatorAngle" }] : /* istanbul ignore next */ []));
+    _indicatorX = computed(() => this.size() / 2, ...(ngDevMode ? [{ debugName: "_indicatorX" }] : /* istanbul ignore next */ []));
+    _indicatorY = computed(() => this.size() / 2 - this._radius(), ...(ngDevMode ? [{ debugName: "_indicatorY" }] : /* istanbul ignore next */ []));
+    _dragStartAngle = 0;
+    _dragStartValue = 0;
+    _onChange = () => { };
+    _onTouched = () => { };
+    _el = inject((ElementRef));
+    /** Calcula el ángulo en grados desde el centro del dial al punto (x, y).
+     *  Calculates the angle in degrees from the dial center to point (x, y). */
+    _getAngle(clientX, clientY) {
+        const dial = this._el.nativeElement.querySelector('.neu-knob__dial');
+        const rect = dial
+            ? dial.getBoundingClientRect()
+            : this._el.nativeElement.getBoundingClientRect();
+        const cx = rect.left + rect.width / 2;
+        const cy = rect.top + rect.height / 2;
+        return Math.atan2(clientY - cy, clientX - cx) * (180 / Math.PI);
+    }
+    hostClasses = computed(() => ({
+        'neu-knob': true,
+        'neu-knob--disabled': this._cvaDisabled(),
+    }), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    writeValue(val) {
+        this._value.set(this._clamp(val ?? this.min()));
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    setDisabledState(disabled) {
+        this._cvaDisabled.set(disabled);
+    }
+    onMouseDown(event) {
+        if (this._cvaDisabled())
+            return;
+        event.preventDefault();
+        this._dragStartAngle = this._getAngle(event.clientX, event.clientY);
+        this._dragStartValue = this._value();
+        const onMove = (e) => this._applyCircularDrag(e.clientX, e.clientY);
+        const onUp = () => {
+            window.removeEventListener('mousemove', onMove);
+            window.removeEventListener('mouseup', onUp);
+        };
+        window.addEventListener('mousemove', onMove);
+        window.addEventListener('mouseup', onUp);
+        this._onTouched();
+    }
+    onTouchStart(event) {
+        if (this._cvaDisabled())
+            return;
+        event.preventDefault();
+        this._dragStartAngle = this._getAngle(event.touches[0].clientX, event.touches[0].clientY);
+        this._dragStartValue = this._value();
+        const onMove = (e) => this._applyCircularDrag(e.touches[0].clientX, e.touches[0].clientY);
+        const onEnd = () => {
+            window.removeEventListener('touchmove', onMove);
+            window.removeEventListener('touchend', onEnd);
+        };
+        window.addEventListener('touchmove', onMove, { passive: false });
+        window.addEventListener('touchend', onEnd);
+        this._onTouched();
+    }
+    onKeyDown(event) {
+        if (this._cvaDisabled())
+            return;
+        let delta = 0;
+        if (event.key === 'ArrowUp' || event.key === 'ArrowRight')
+            delta = this.step();
+        else if (event.key === 'ArrowDown' || event.key === 'ArrowLeft')
+            delta = -this.step();
+        else if (event.key === 'Home') {
+            this._emit(this.min());
+            return;
+        }
+        else if (event.key === 'End') {
+            this._emit(this.max());
+            return;
+        }
+        if (delta !== 0) {
+            event.preventDefault();
+            this._emit(this._clamp(this._value() + delta));
+        }
+    }
+    /** Aplica el drag circular calculando el delta de ángulo respecto al punto inicial.
+     *  Applies circular drag by computing the angle delta from the start point. */
+    _applyCircularDrag(clientX, clientY) {
+        let deltaAngle = this._getAngle(clientX, clientY) - this._dragStartAngle;
+        // Normalizar a [-180, 180] para evitar saltos al cruzar el eje / Normalize to avoid jumps
+        if (deltaAngle > 180)
+            deltaAngle -= 360;
+        if (deltaAngle < -180)
+            deltaAngle += 360;
+        const range = this.max() - this.min();
+        // 260° de arco = rango completo / 260° arc = full range
+        const valueDelta = (deltaAngle / 260) * range;
+        this._emit(this._clamp(this._dragStartValue + valueDelta));
+    }
+    _emit(value) {
+        const snapped = Math.round(value / this.step()) * this.step();
+        const clamped = this._clamp(snapped);
+        this._value.set(clamped);
+        this._onChange(clamped);
+        this.valueChange.emit(clamped);
+    }
+    _clamp(v) {
+        return Math.min(this.max(), Math.max(this.min(), v));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: NeuKnobComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: NeuKnobComponent, isStandalone: true, selector: "neu-knob", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { properties: { "class": "hostClasses()" } }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NeuKnobComponent), multi: true },
+        ], ngImport: i0, template: `
+    <div
+      class="neu-knob__dial"
+      role="slider"
+      tabindex="0"
+      [attr.id]="_id"
+      [attr.aria-valuemin]="min()"
+      [attr.aria-valuemax]="max()"
+      [attr.aria-valuenow]="_value()"
+      [attr.aria-label]="label() || 'Knob'"
+      [attr.aria-disabled]="_cvaDisabled()"
+      [style.width.px]="size()"
+      [style.height.px]="size()"
+      (mousedown)="onMouseDown($event)"
+      (touchstart)="onTouchStart($event)"
+      (keydown)="onKeyDown($event)"
+    >
+      <svg
+        class="neu-knob__svg"
+        [attr.viewBox]="'0 0 ' + size() + ' ' + size()"
+        [attr.width]="size()"
+        [attr.height]="size()"
+        aria-hidden="true"
+      >
+        <!-- Track arc: 260° arc (same as value-arc) so the background only covers
+             the usable range, not a full 360° ring. -->
+        <circle
+          class="neu-knob__track"
+          [attr.cx]="size() / 2"
+          [attr.cy]="size() / 2"
+          [attr.r]="_radius()"
+          fill="none"
+          [attr.stroke-width]="_strokeWidth()"
+          stroke-linecap="round"
+          [attr.stroke-dasharray]="_arcDashArray()"
+          stroke-dashoffset="0"
+          [attr.transform]="'rotate(-220 ' + size() / 2 + ' ' + size() / 2 + ')'"
+        />
+        <!-- Value arc -->
+        <circle
+          class="neu-knob__value-arc"
+          [attr.cx]="size() / 2"
+          [attr.cy]="size() / 2"
+          [attr.r]="_radius()"
+          fill="none"
+          [attr.stroke-width]="_strokeWidth()"
+          stroke-linecap="round"
+          [attr.stroke-dasharray]="_arcDashArray()"
+          [attr.stroke-dashoffset]="_arcDashOffset()"
+          [attr.transform]="'rotate(-220 ' + size() / 2 + ' ' + size() / 2 + ')'"
+        />
+        <!-- Indicator dot -->
+        <circle
+          class="neu-knob__indicator"
+          [attr.cx]="_indicatorX()"
+          [attr.cy]="_indicatorY()"
+          [attr.r]="_strokeWidth() / 2 + 1"
+          [attr.transform]="
+            'rotate(' + _indicatorAngle() + ' ' + size() / 2 + ' ' + size() / 2 + ')'
+          "
+        />
+      </svg>
+      @if (showValue()) {
+        <span
+          class="neu-knob__display"
+          style="color: var(--neu-knob-display-color, var(--neu-text, #0f172a)) !important; -webkit-text-fill-color: var(--neu-knob-display-color, var(--neu-text, #0f172a)) !important;"
+          >{{ _value() }}</span
+        >
+      }
+    </div>
+    @if (label()) {
+      <label class="neu-knob__label" [attr.for]="_id">{{ label() }}</label>
+    }
+  `, isInline: true, styles: ["@charset \"UTF-8\";.neu-knob{display:inline-flex;flex-direction:column;align-items:center;gap:6px;-webkit-user-select:none;user-select:none}.neu-knob--disabled{opacity:.5;pointer-events:none}.neu-knob__dial{position:relative;display:flex;align-items:center;justify-content:center;cursor:grab;border-radius:50%;touch-action:none}.neu-knob__dial:focus-visible{outline:2px solid var(--neu-focus-ring, #0ea5e9);outline-offset:3px}.neu-knob__dial:active{cursor:grabbing}.neu-knob__track{stroke:var(--neu-knob-track, var(--neu-border-color, #e5e7eb))}.neu-knob__value-arc{stroke:var(--neu-color-primary, #0ea5e9);transition:stroke-dashoffset 40ms linear}.neu-knob__indicator{fill:var(--neu-color-primary, #0ea5e9)}.neu-knob__display{position:absolute;font-size:.8125rem;font-weight:600;color:var(--neu-knob-display-color, var(--neu-text, #0f172a));-webkit-text-fill-color:var(--neu-knob-display-color, var(--neu-text, #0f172a));pointer-events:none;font-variant-numeric:tabular-nums}.neu-knob__label{font-size:.8125rem;color:var(--neu-knob-label-color, var(--neu-text-muted, #64748b));cursor:pointer}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: NeuKnobComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'neu-knob', imports: [], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { '[class]': 'hostClasses()' }, providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NeuKnobComponent), multi: true },
+                    ], template: `
+    <div
+      class="neu-knob__dial"
+      role="slider"
+      tabindex="0"
+      [attr.id]="_id"
+      [attr.aria-valuemin]="min()"
+      [attr.aria-valuemax]="max()"
+      [attr.aria-valuenow]="_value()"
+      [attr.aria-label]="label() || 'Knob'"
+      [attr.aria-disabled]="_cvaDisabled()"
+      [style.width.px]="size()"
+      [style.height.px]="size()"
+      (mousedown)="onMouseDown($event)"
+      (touchstart)="onTouchStart($event)"
+      (keydown)="onKeyDown($event)"
+    >
+      <svg
+        class="neu-knob__svg"
+        [attr.viewBox]="'0 0 ' + size() + ' ' + size()"
+        [attr.width]="size()"
+        [attr.height]="size()"
+        aria-hidden="true"
+      >
+        <!-- Track arc: 260° arc (same as value-arc) so the background only covers
+             the usable range, not a full 360° ring. -->
+        <circle
+          class="neu-knob__track"
+          [attr.cx]="size() / 2"
+          [attr.cy]="size() / 2"
+          [attr.r]="_radius()"
+          fill="none"
+          [attr.stroke-width]="_strokeWidth()"
+          stroke-linecap="round"
+          [attr.stroke-dasharray]="_arcDashArray()"
+          stroke-dashoffset="0"
+          [attr.transform]="'rotate(-220 ' + size() / 2 + ' ' + size() / 2 + ')'"
+        />
+        <!-- Value arc -->
+        <circle
+          class="neu-knob__value-arc"
+          [attr.cx]="size() / 2"
+          [attr.cy]="size() / 2"
+          [attr.r]="_radius()"
+          fill="none"
+          [attr.stroke-width]="_strokeWidth()"
+          stroke-linecap="round"
+          [attr.stroke-dasharray]="_arcDashArray()"
+          [attr.stroke-dashoffset]="_arcDashOffset()"
+          [attr.transform]="'rotate(-220 ' + size() / 2 + ' ' + size() / 2 + ')'"
+        />
+        <!-- Indicator dot -->
+        <circle
+          class="neu-knob__indicator"
+          [attr.cx]="_indicatorX()"
+          [attr.cy]="_indicatorY()"
+          [attr.r]="_strokeWidth() / 2 + 1"
+          [attr.transform]="
+            'rotate(' + _indicatorAngle() + ' ' + size() / 2 + ' ' + size() / 2 + ')'
+          "
+        />
+      </svg>
+      @if (showValue()) {
+        <span
+          class="neu-knob__display"
+          style="color: var(--neu-knob-display-color, var(--neu-text, #0f172a)) !important; -webkit-text-fill-color: var(--neu-knob-display-color, var(--neu-text, #0f172a)) !important;"
+          >{{ _value() }}</span
+        >
+      }
+    </div>
+    @if (label()) {
+      <label class="neu-knob__label" [attr.for]="_id">{{ label() }}</label>
+    }
+  `, styles: ["@charset \"UTF-8\";.neu-knob{display:inline-flex;flex-direction:column;align-items:center;gap:6px;-webkit-user-select:none;user-select:none}.neu-knob--disabled{opacity:.5;pointer-events:none}.neu-knob__dial{position:relative;display:flex;align-items:center;justify-content:center;cursor:grab;border-radius:50%;touch-action:none}.neu-knob__dial:focus-visible{outline:2px solid var(--neu-focus-ring, #0ea5e9);outline-offset:3px}.neu-knob__dial:active{cursor:grabbing}.neu-knob__track{stroke:var(--neu-knob-track, var(--neu-border-color, #e5e7eb))}.neu-knob__value-arc{stroke:var(--neu-color-primary, #0ea5e9);transition:stroke-dashoffset 40ms linear}.neu-knob__indicator{fill:var(--neu-color-primary, #0ea5e9)}.neu-knob__display{position:absolute;font-size:.8125rem;font-weight:600;color:var(--neu-knob-display-color, var(--neu-text, #0f172a));-webkit-text-fill-color:var(--neu-knob-display-color, var(--neu-text, #0f172a));pointer-events:none;font-variant-numeric:tabular-nums}.neu-knob__label{font-size:.8125rem;color:var(--neu-knob-label-color, var(--neu-text-muted, #64748b));cursor:pointer}\n"] }]
+        }], propDecorators: { min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NeuKnobComponent };
+//# sourceMappingURL=neural-ui-core-knob.mjs.map

package/fesm2022/neural-ui-core-knob.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"neural-ui-core-knob.mjs","sources":["../../../../projects/ui-core/knob/neu-knob.component.ts","../../../../projects/ui-core/knob/neural-ui-core-knob.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  ViewEncapsulation,\n  computed,\n  forwardRef,\n  inject,\n  input,\n  output,\n  signal,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nlet _seq = 0;\n\n/**\n * NeuralUI Knob Component\n *\n * Control de dial rotatorio para selección de valores numéricos. Implementa CVA.\n *\n * Uso: <neu-knob [min]=\"0\" [max]=\"100\" formControlName=\"volume\" />\n */\n@Component({\n  selector: 'neu-knob',\n  imports: [],\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: { '[class]': 'hostClasses()' },\n  providers: [\n    { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NeuKnobComponent), multi: true },\n  ],\n  template: `\n    <div\n      class=\"neu-knob__dial\"\n      role=\"slider\"\n      tabindex=\"0\"\n      [attr.id]=\"_id\"\n      [attr.aria-valuemin]=\"min()\"\n      [attr.aria-valuemax]=\"max()\"\n      [attr.aria-valuenow]=\"_value()\"\n      [attr.aria-label]=\"label() || 'Knob'\"\n      [attr.aria-disabled]=\"_cvaDisabled()\"\n      [style.width.px]=\"size()\"\n      [style.height.px]=\"size()\"\n      (mousedown)=\"onMouseDown($event)\"\n      (touchstart)=\"onTouchStart($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    >\n      <svg\n        class=\"neu-knob__svg\"\n        [attr.viewBox]=\"'0 0 ' + size() + ' ' + size()\"\n        [attr.width]=\"size()\"\n        [attr.height]=\"size()\"\n        aria-hidden=\"true\"\n      >\n        <!-- Track arc: 260° arc (same as value-arc) so the background only covers\n             the usable range, not a full 360° ring. -->\n        <circle\n          class=\"neu-knob__track\"\n          [attr.cx]=\"size() / 2\"\n          [attr.cy]=\"size() / 2\"\n          [attr.r]=\"_radius()\"\n          fill=\"none\"\n          [attr.stroke-width]=\"_strokeWidth()\"\n          stroke-linecap=\"round\"\n          [attr.stroke-dasharray]=\"_arcDashArray()\"\n          stroke-dashoffset=\"0\"\n          [attr.transform]=\"'rotate(-220 ' + size() / 2 + ' ' + size() / 2 + ')'\"\n        />\n        <!-- Value arc -->\n        <circle\n          class=\"neu-knob__value-arc\"\n          [attr.cx]=\"size() / 2\"\n          [attr.cy]=\"size() / 2\"\n          [attr.r]=\"_radius()\"\n          fill=\"none\"\n          [attr.stroke-width]=\"_strokeWidth()\"\n          stroke-linecap=\"round\"\n          [attr.stroke-dasharray]=\"_arcDashArray()\"\n          [attr.stroke-dashoffset]=\"_arcDashOffset()\"\n          [attr.transform]=\"'rotate(-220 ' + size() / 2 + ' ' + size() / 2 + ')'\"\n        />\n        <!-- Indicator dot -->\n        <circle\n          class=\"neu-knob__indicator\"\n          [attr.cx]=\"_indicatorX()\"\n          [attr.cy]=\"_indicatorY()\"\n          [attr.r]=\"_strokeWidth() / 2 + 1\"\n          [attr.transform]=\"\n            'rotate(' + _indicatorAngle() + ' ' + size() / 2 + ' ' + size() / 2 + ')'\n          \"\n        />\n      </svg>\n      @if (showValue()) {\n        <span\n          class=\"neu-knob__display\"\n          style=\"color: var(--neu-knob-display-color, var(--neu-text, #0f172a)) !important; -webkit-text-fill-color: var(--neu-knob-display-color, var(--neu-text, #0f172a)) !important;\"\n          >{{ _value() }}</span\n        >\n      }\n    </div>\n    @if (label()) {\n      <label class=\"neu-knob__label\" [attr.for]=\"_id\">{{ label() }}</label>\n    }\n  `,\n  styleUrl: './neu-knob.component.scss',\n})\nexport class NeuKnobComponent implements ControlValueAccessor {\n  /** Valor mínimo / Min value */\n  readonly min = input<number>(0);\n  /** Valor máximo / Max value */\n  readonly max = input<number>(100);\n  /** Incremento por paso / Step increment */\n  readonly step = input<number>(1);\n  /** Tamaño del dial en px / Dial size in px */\n  readonly size = input<number>(80);\n  /** Muestra el valor numérico en el centro / Shows the numeric value in the center */\n  readonly showValue = input<boolean>(true);\n  /** Etiqueta visible / Visible label */\n  readonly label = input<string>('');\n  /** Emitido en cada cambio / Emitted on each change */\n  readonly valueChange = output<number>();\n\n  readonly _id = `neu-knob-${++_seq}`;\n  readonly _cvaDisabled = signal(false);\n  readonly _value = signal(0);\n\n  readonly _strokeWidth = computed(() => Math.max(4, this.size() * 0.1));\n  readonly _radius = computed(() => (this.size() - this._strokeWidth()) / 2 - 2);\n  readonly _circumference = computed(() => 2 * Math.PI * this._radius());\n  /** Arc spans 260° (from -40° to 220°) */\n  readonly _arcLength = computed(() => (260 / 360) * this._circumference());\n\n  readonly _normalizedValue = computed(() => {\n    const range = this.max() - this.min();\n    return range === 0 ? 0 : (this._value() - this.min()) / range;\n  });\n\n  readonly _arcDashArray = computed(() => `${this._arcLength()} ${this._circumference()}`);\n  readonly _arcDashOffset = computed(() => this._arcLength() * (1 - this._normalizedValue()));\n\n  // Indicator position on the track (relative to SVG center)\n  // El arco empieza en rotate(-220°) desde el Este del SVG.\n  // El punto indicador reposa en el Norte (12 en punto).\n  // Para que el indicador siga el arco, la rotación CW debe ser:\n  //   θ = 230° + normalizedValue × 260°\n  // (arco de 7:40 → 1:20 pasando por 12:00 en la mitad)\n  // Arc starts at rotate(-220°) from East; indicator natural position is North (12 o'clock).\n  // Correct clockwise rotation formula: θ = 230 + normalizedValue × 260.\n  readonly _indicatorAngle = computed(() => this._normalizedValue() * 260 + 230);\n  readonly _indicatorX = computed(() => this.size() / 2);\n  readonly _indicatorY = computed(() => this.size() / 2 - this._radius());\n\n  private _dragStartAngle = 0;\n  private _dragStartValue = 0;\n  private _onChange: (v: number) => void = () => {};\n  private _onTouched: () => void = () => {};\n\n  private readonly _el = inject(ElementRef<HTMLElement>);\n\n  /** Calcula el ángulo en grados desde el centro del dial al punto (x, y).\n   *  Calculates the angle in degrees from the dial center to point (x, y). */\n  private _getAngle(clientX: number, clientY: number): number {\n    const dial = this._el.nativeElement.querySelector('.neu-knob__dial') as HTMLElement;\n    const rect = dial\n      ? dial.getBoundingClientRect()\n      : this._el.nativeElement.getBoundingClientRect();\n    const cx = rect.left + rect.width / 2;\n    const cy = rect.top + rect.height / 2;\n    return Math.atan2(clientY - cy, clientX - cx) * (180 / Math.PI);\n  }\n\n  readonly hostClasses = computed(() => ({\n    'neu-knob': true,\n    'neu-knob--disabled': this._cvaDisabled(),\n  }));\n\n  writeValue(val: number | null): void {\n    this._value.set(this._clamp(val ?? this.min()));\n  }\n\n  registerOnChange(fn: (v: number) => void): void {\n    this._onChange = fn;\n  }\n  registerOnTouched(fn: () => void): void {\n    this._onTouched = fn;\n  }\n  setDisabledState(disabled: boolean): void {\n    this._cvaDisabled.set(disabled);\n  }\n\n  onMouseDown(event: MouseEvent): void {\n    if (this._cvaDisabled()) return;\n    event.preventDefault();\n    this._dragStartAngle = this._getAngle(event.clientX, event.clientY);\n    this._dragStartValue = this._value();\n    const onMove = (e: MouseEvent) => this._applyCircularDrag(e.clientX, e.clientY);\n    const onUp = () => {\n      window.removeEventListener('mousemove', onMove);\n      window.removeEventListener('mouseup', onUp);\n    };\n    window.addEventListener('mousemove', onMove);\n    window.addEventListener('mouseup', onUp);\n    this._onTouched();\n  }\n\n  onTouchStart(event: TouchEvent): void {\n    if (this._cvaDisabled()) return;\n    event.preventDefault();\n    this._dragStartAngle = this._getAngle(event.touches[0].clientX, event.touches[0].clientY);\n    this._dragStartValue = this._value();\n    const onMove = (e: TouchEvent) =>\n      this._applyCircularDrag(e.touches[0].clientX, e.touches[0].clientY);\n    const onEnd = () => {\n      window.removeEventListener('touchmove', onMove);\n      window.removeEventListener('touchend', onEnd);\n    };\n    window.addEventListener('touchmove', onMove, { passive: false });\n    window.addEventListener('touchend', onEnd);\n    this._onTouched();\n  }\n\n  onKeyDown(event: KeyboardEvent): void {\n    if (this._cvaDisabled()) return;\n    let delta = 0;\n    if (event.key === 'ArrowUp' || event.key === 'ArrowRight') delta = this.step();\n    else if (event.key === 'ArrowDown' || event.key === 'ArrowLeft') delta = -this.step();\n    else if (event.key === 'Home') {\n      this._emit(this.min());\n      return;\n    } else if (event.key === 'End') {\n      this._emit(this.max());\n      return;\n    }\n    if (delta !== 0) {\n      event.preventDefault();\n      this._emit(this._clamp(this._value() + delta));\n    }\n  }\n\n  /** Aplica el drag circular calculando el delta de ángulo respecto al punto inicial.\n   *  Applies circular drag by computing the angle delta from the start point. */\n  private _applyCircularDrag(clientX: number, clientY: number): void {\n    let deltaAngle = this._getAngle(clientX, clientY) - this._dragStartAngle;\n    // Normalizar a [-180, 180] para evitar saltos al cruzar el eje / Normalize to avoid jumps\n    if (deltaAngle > 180) deltaAngle -= 360;\n    if (deltaAngle < -180) deltaAngle += 360;\n    const range = this.max() - this.min();\n    // 260° de arco = rango completo / 260° arc = full range\n    const valueDelta = (deltaAngle / 260) * range;\n    this._emit(this._clamp(this._dragStartValue + valueDelta));\n  }\n\n  private _emit(value: number): void {\n    const snapped = Math.round(value / this.step()) * this.step();\n    const clamped = this._clamp(snapped);\n    this._value.set(clamped);\n    this._onChange(clamped);\n    this.valueChange.emit(clamped);\n  }\n\n  private _clamp(v: number): number {\n    return Math.min(this.max(), Math.max(this.min(), v));\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2022/neural-ui-core-meter-group.mjs

@@ -0,0 +1,122 @@
+import * as i0 from '@angular/core';
+import { input, computed, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
+import { DecimalPipe } from '@angular/common';
+
+/**
+ * NeuralUI MeterGroup Component
+ *
+ * Barra de progreso multi-segmento que muestra la distribución de valores.
+ *
+ * Uso:
+ *   <neu-meter-group [items]="meters" [total]="100" />
+ */
+class NeuMeterGroupComponent {
+    /** Segmentos del medidor / Meter segments */
+    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /** Total de referencia (0 = suma de items) / Reference total (0 = sum of items) */
+    total = input(0, ...(ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []));
+    /** Altura de la barra en px / Bar height in px */
+    height = input(12, ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+    /** Esquinas redondeadas / Rounded corners */
+    rounded = input(true, ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
+    /** Muestra leyenda debajo / Shows legend below */
+    showLegend = input(true, ...(ngDevMode ? [{ debugName: "showLegend" }] : /* istanbul ignore next */ []));
+    /** Aria-label de la barra / Aria-label for the bar */
+    ariaLabel = input('Medidor', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => ({
+        'neu-meter-group': true,
+        'neu-meter-group--rounded': this.rounded(),
+    }), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    _usedSum = computed(() => this.items().reduce((s, i) => s + i.value, 0), ...(ngDevMode ? [{ debugName: "_usedSum" }] : /* istanbul ignore next */ []));
+    _effectiveTotal = computed(() => this.total() > 0 ? this.total() : this._usedSum() || 1, ...(ngDevMode ? [{ debugName: "_effectiveTotal" }] : /* istanbul ignore next */ []));
+    _segments = computed(() => {
+        const total = this._effectiveTotal();
+        return this.items().map((item) => ({
+            ...item,
+            pct: Math.max(0, Math.min(100, (item.value / total) * 100)),
+        }));
+    }, ...(ngDevMode ? [{ debugName: "_segments" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: NeuMeterGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: NeuMeterGroupComponent, isStandalone: true, selector: "neu-meter-group", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: `
+    <div
+      class="neu-meter-group__bar"
+      role="meter"
+      [style.height.px]="height()"
+      [attr.aria-valuemin]="0"
+      [attr.aria-valuemax]="_effectiveTotal()"
+      [attr.aria-valuenow]="_usedSum()"
+      [attr.aria-label]="ariaLabel()"
+    >
+      @for (item of _segments(); track item.label) {
+        <div
+          class="neu-meter-group__segment"
+          [style.width.%]="item.pct"
+          [style.background]="item.color || null"
+          [attr.title]="item.label + ': ' + item.value"
+          [attr.data-index]="$index"
+        ></div>
+      }
+    </div>
+    @if (showLegend()) {
+      <ul class="neu-meter-group__legend" aria-hidden="true">
+        @for (item of _segments(); track item.label) {
+          <li class="neu-meter-group__legend-item">
+            <span
+              class="neu-meter-group__legend-dot"
+              [style.background]="item.color || null"
+              [attr.data-index]="$index"
+            ></span>
+            <span class="neu-meter-group__legend-label">{{ item.label }}</span>
+            <span class="neu-meter-group__legend-value">{{ item.pct | number: '1.0-1' }}%</span>
+          </li>
+        }
+      </ul>
+    }
+  `, isInline: true, styles: ["@charset \"UTF-8\";.neu-meter-group{display:flex;flex-direction:column;gap:10px;width:100%}.neu-meter-group__bar{display:flex;width:100%;height:12px;background:var(--neu-meter-track, #e5e7eb);overflow:hidden;border-radius:0}.neu-meter-group--rounded .neu-meter-group__bar{border-radius:var(--neu-radius-full, 9999px)}.neu-meter-group__segment{height:100%;transition:width .4s cubic-bezier(.4,0,.2,1);flex-shrink:0}.neu-meter-group__segment[data-index=\"0\"]:not([style*=background]){background:var(--neu-color-primary, #0ea5e9)}.neu-meter-group__segment[data-index=\"1\"]:not([style*=background]){background:var(--neu-color-success, #22c55e)}.neu-meter-group__segment[data-index=\"2\"]:not([style*=background]){background:var(--neu-color-warning, #f59e0b)}.neu-meter-group__segment[data-index=\"3\"]:not([style*=background]){background:var(--neu-color-danger, #ef4444)}.neu-meter-group__segment[data-index=\"4\"]:not([style*=background]){background:var(--neu-color-secondary, #8b5cf6)}.neu-meter-group__legend{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 16px}.neu-meter-group__legend-item{display:flex;align-items:center;gap:6px;font-size:.8125rem;color:var(--neu-text-muted, #6b7280)}.neu-meter-group__legend-dot{display:inline-block;width:10px;height:10px;border-radius:50%;flex-shrink:0}.neu-meter-group__legend-dot[data-index=\"0\"]:not([style*=background]){background:var(--neu-color-primary, #0ea5e9)}.neu-meter-group__legend-dot[data-index=\"1\"]:not([style*=background]){background:var(--neu-color-success, #22c55e)}.neu-meter-group__legend-dot[data-index=\"2\"]:not([style*=background]){background:var(--neu-color-warning, #f59e0b)}.neu-meter-group__legend-dot[data-index=\"3\"]:not([style*=background]){background:var(--neu-color-danger, #ef4444)}.neu-meter-group__legend-dot[data-index=\"4\"]:not([style*=background]){background:var(--neu-color-secondary, #8b5cf6)}.neu-meter-group__legend-label{color:var(--neu-text, #111)}.neu-meter-group__legend-value{font-variant-numeric:tabular-nums;color:var(--neu-text-muted, #6b7280)}\n"], dependencies: [{ kind: "pipe", type: DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: NeuMeterGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'neu-meter-group', imports: [DecimalPipe], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { '[class]': 'hostClasses()' }, template: `
+    <div
+      class="neu-meter-group__bar"
+      role="meter"
+      [style.height.px]="height()"
+      [attr.aria-valuemin]="0"
+      [attr.aria-valuemax]="_effectiveTotal()"
+      [attr.aria-valuenow]="_usedSum()"
+      [attr.aria-label]="ariaLabel()"
+    >
+      @for (item of _segments(); track item.label) {
+        <div
+          class="neu-meter-group__segment"
+          [style.width.%]="item.pct"
+          [style.background]="item.color || null"
+          [attr.title]="item.label + ': ' + item.value"
+          [attr.data-index]="$index"
+        ></div>
+      }
+    </div>
+    @if (showLegend()) {
+      <ul class="neu-meter-group__legend" aria-hidden="true">
+        @for (item of _segments(); track item.label) {
+          <li class="neu-meter-group__legend-item">
+            <span
+              class="neu-meter-group__legend-dot"
+              [style.background]="item.color || null"
+              [attr.data-index]="$index"
+            ></span>
+            <span class="neu-meter-group__legend-label">{{ item.label }}</span>
+            <span class="neu-meter-group__legend-value">{{ item.pct | number: '1.0-1' }}%</span>
+          </li>
+        }
+      </ul>
+    }
+  `, styles: ["@charset \"UTF-8\";.neu-meter-group{display:flex;flex-direction:column;gap:10px;width:100%}.neu-meter-group__bar{display:flex;width:100%;height:12px;background:var(--neu-meter-track, #e5e7eb);overflow:hidden;border-radius:0}.neu-meter-group--rounded .neu-meter-group__bar{border-radius:var(--neu-radius-full, 9999px)}.neu-meter-group__segment{height:100%;transition:width .4s cubic-bezier(.4,0,.2,1);flex-shrink:0}.neu-meter-group__segment[data-index=\"0\"]:not([style*=background]){background:var(--neu-color-primary, #0ea5e9)}.neu-meter-group__segment[data-index=\"1\"]:not([style*=background]){background:var(--neu-color-success, #22c55e)}.neu-meter-group__segment[data-index=\"2\"]:not([style*=background]){background:var(--neu-color-warning, #f59e0b)}.neu-meter-group__segment[data-index=\"3\"]:not([style*=background]){background:var(--neu-color-danger, #ef4444)}.neu-meter-group__segment[data-index=\"4\"]:not([style*=background]){background:var(--neu-color-secondary, #8b5cf6)}.neu-meter-group__legend{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 16px}.neu-meter-group__legend-item{display:flex;align-items:center;gap:6px;font-size:.8125rem;color:var(--neu-text-muted, #6b7280)}.neu-meter-group__legend-dot{display:inline-block;width:10px;height:10px;border-radius:50%;flex-shrink:0}.neu-meter-group__legend-dot[data-index=\"0\"]:not([style*=background]){background:var(--neu-color-primary, #0ea5e9)}.neu-meter-group__legend-dot[data-index=\"1\"]:not([style*=background]){background:var(--neu-color-success, #22c55e)}.neu-meter-group__legend-dot[data-index=\"2\"]:not([style*=background]){background:var(--neu-color-warning, #f59e0b)}.neu-meter-group__legend-dot[data-index=\"3\"]:not([style*=background]){background:var(--neu-color-danger, #ef4444)}.neu-meter-group__legend-dot[data-index=\"4\"]:not([style*=background]){background:var(--neu-color-secondary, #8b5cf6)}.neu-meter-group__legend-label{color:var(--neu-text, #111)}.neu-meter-group__legend-value{font-variant-numeric:tabular-nums;color:var(--neu-text-muted, #6b7280)}\n"] }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], total: [{ type: i0.Input, args: [{ isSignal: true, alias: "total", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NeuMeterGroupComponent };
+//# sourceMappingURL=neural-ui-core-meter-group.mjs.map

package/fesm2022/neural-ui-core-meter-group.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"neural-ui-core-meter-group.mjs","sources":["../../../../projects/ui-core/meter-group/neu-meter-group.component.ts","../../../../projects/ui-core/meter-group/neural-ui-core-meter-group.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  ViewEncapsulation,\n  computed,\n  input,\n} from '@angular/core';\nimport { DecimalPipe } from '@angular/common';\n\nexport interface NeuMeterItem {\n  /** Etiqueta del segmento / Segment label */\n  label: string;\n  /** Valor numérico del segmento / Numeric value of the segment */\n  value: number;\n  /** Color CSS opcional / Optional CSS color */\n  color?: string;\n}\n\n/**\n * NeuralUI MeterGroup Component\n *\n * Barra de progreso multi-segmento que muestra la distribución de valores.\n *\n * Uso:\n *   <neu-meter-group [items]=\"meters\" [total]=\"100\" />\n */\n@Component({\n  selector: 'neu-meter-group',\n  imports: [DecimalPipe],\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: { '[class]': 'hostClasses()' },\n  template: `\n    <div\n      class=\"neu-meter-group__bar\"\n      role=\"meter\"\n      [style.height.px]=\"height()\"\n      [attr.aria-valuemin]=\"0\"\n      [attr.aria-valuemax]=\"_effectiveTotal()\"\n      [attr.aria-valuenow]=\"_usedSum()\"\n      [attr.aria-label]=\"ariaLabel()\"\n    >\n      @for (item of _segments(); track item.label) {\n        <div\n          class=\"neu-meter-group__segment\"\n          [style.width.%]=\"item.pct\"\n          [style.background]=\"item.color || null\"\n          [attr.title]=\"item.label + ': ' + item.value\"\n          [attr.data-index]=\"$index\"\n        ></div>\n      }\n    </div>\n    @if (showLegend()) {\n      <ul class=\"neu-meter-group__legend\" aria-hidden=\"true\">\n        @for (item of _segments(); track item.label) {\n          <li class=\"neu-meter-group__legend-item\">\n            <span\n              class=\"neu-meter-group__legend-dot\"\n              [style.background]=\"item.color || null\"\n              [attr.data-index]=\"$index\"\n            ></span>\n            <span class=\"neu-meter-group__legend-label\">{{ item.label }}</span>\n            <span class=\"neu-meter-group__legend-value\">{{ item.pct | number: '1.0-1' }}%</span>\n          </li>\n        }\n      </ul>\n    }\n  `,\n  styleUrl: './neu-meter-group.component.scss',\n})\nexport class NeuMeterGroupComponent {\n  /** Segmentos del medidor / Meter segments */\n  readonly items = input<NeuMeterItem[]>([]);\n\n  /** Total de referencia (0 = suma de items) / Reference total (0 = sum of items) */\n  readonly total = input<number>(0);\n\n  /** Altura de la barra en px / Bar height in px */\n  readonly height = input<number>(12);\n\n  /** Esquinas redondeadas / Rounded corners */\n  readonly rounded = input<boolean>(true);\n\n  /** Muestra leyenda debajo / Shows legend below */\n  readonly showLegend = input<boolean>(true);\n\n  /** Aria-label de la barra / Aria-label for the bar */\n  readonly ariaLabel = input<string>('Medidor');\n\n  readonly hostClasses = computed(() => ({\n    'neu-meter-group': true,\n    'neu-meter-group--rounded': this.rounded(),\n  }));\n\n  readonly _usedSum = computed(() => this.items().reduce((s, i) => s + i.value, 0));\n\n  readonly _effectiveTotal = computed(() =>\n    this.total() > 0 ? this.total() : this._usedSum() || 1,\n  );\n\n  readonly _segments = computed(() => {\n    const total = this._effectiveTotal();\n    return this.items().map((item) => ({\n      ...item,\n      pct: Math.max(0, Math.min(100, (item.value / total) * 100)),\n    }));\n  });\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}