@neural-ui/core 1.2.1 → 1.3.0

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

@@ -0,0 +1,151 @@
+import * as i0 from '@angular/core';
+import { input, output, signal, computed, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
+
+/**
+ * NeuralUI Rating Component
+ *
+ * Selector de valoración con estrellas (o icono personalizable).
+ * Soporta valores medios (half-star) y modo solo-lectura.
+ *
+ * Uso:
+ *   <neu-rating [value]="rating" (valueChange)="rating = $event" />
+ *   <neu-rating [value]="4.5" [readonly]="true" />
+ */
+class NeuRatingComponent {
+    Math = Math;
+    /** Valor actual (1 a stars) / Current value (1 to stars) */
+    value = input(0, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Número de estrellas / Number of stars */
+    stars = input(5, ...(ngDevMode ? [{ debugName: "stars" }] : /* istanbul ignore next */ []));
+    /** Modo solo lectura / Read-only mode */
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+    /** Emite el nuevo valor al seleccionar / Emits the new value on selection */
+    valueChange = output();
+    hovered = signal(null, ...(ngDevMode ? [{ debugName: "hovered" }] : /* istanbul ignore next */ []));
+    starsArray = computed(() => Array.from({ length: this.stars() }, (_, i) => i + 1), ...(ngDevMode ? [{ debugName: "starsArray" }] : /* istanbul ignore next */ []));
+    onHover(i) {
+        if (!this.readonly())
+            this.hovered.set(i);
+    }
+    onLeave() {
+        this.hovered.set(null);
+    }
+    select(i) {
+        if (this.readonly())
+            return;
+        const clamped = Math.min(this.stars(), Math.max(1, i));
+        this.valueChange.emit(clamped);
+    }
+    isInteger(n) {
+        return Number.isInteger(n);
+    }
+    getFill(i) {
+        const val = this.hovered() ?? this.value();
+        if (i <= Math.floor(val))
+            return 'currentColor';
+        if (!Number.isInteger(val) && i === Math.ceil(val))
+            return `url(#half-${i})`;
+        return 'transparent';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: NeuRatingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: NeuRatingComponent, isStandalone: true, selector: "neu-rating", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, stars: { classPropertyName: "stars", publicName: "stars", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: `
+    <div
+      class="neu-rating"
+      [class.neu-rating--readonly]="readonly()"
+      [attr.role]="readonly() ? null : 'radiogroup'"
+      [attr.aria-label]="'Valoración: ' + value() + ' de ' + stars() + ' estrellas'"
+    >
+      @for (i of starsArray(); track i) {
+        <button
+          class="neu-rating__star"
+          [class.neu-rating__star--filled]="i <= (hovered() ?? value())"
+          [class.neu-rating__star--half]="
+            !isInteger(hovered() ?? value()) && i === Math.ceil(hovered() ?? value())
+          "
+          type="button"
+          [disabled]="readonly()"
+          [attr.aria-label]="i + ' star' + (i > 1 ? 's' : '')"
+          [attr.aria-checked]="i === value()"
+          [attr.role]="'radio'"
+          (mouseenter)="onHover(i)"
+          (mouseleave)="onLeave()"
+          (click)="select(i)"
+          (keydown.left)="select(value() - 1)"
+          (keydown.right)="select(value() + 1)"
+        >
+          <svg class="neu-rating__icon" viewBox="0 0 24 24" aria-hidden="true">
+            <defs>
+              <linearGradient [id]="'half-' + i" x1="0" x2="1" y1="0" y2="0">
+                <stop offset="50%" stop-color="currentColor" />
+                <stop offset="50%" stop-color="transparent" />
+              </linearGradient>
+            </defs>
+            <polygon
+              points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26"
+              [attr.fill]="getFill(i)"
+              stroke="currentColor"
+              stroke-width="1.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+        </button>
+      }
+    </div>
+  `, isInline: true, styles: [".neu-rating{display:inline-flex;align-items:center;gap:2px;font-family:var(--neu-font-sans)}.neu-rating--readonly{pointer-events:none}.neu-rating__star{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;background:transparent;border:none;border-radius:var(--neu-radius-sm);cursor:pointer;color:var(--neu-surface-3);padding:2px;transition:transform .15s ease,color .15s ease;outline:none}.neu-rating__star--filled{color:#f59e0b}.neu-rating__star:hover:not(:disabled){transform:scale(1.15)}.neu-rating__star:focus-visible{outline:2px solid var(--neu-primary);outline-offset:2px}.neu-rating__star:disabled{cursor:default}.neu-rating__icon{width:22px;height:22px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: NeuRatingComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'neu-rating', imports: [], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div
+      class="neu-rating"
+      [class.neu-rating--readonly]="readonly()"
+      [attr.role]="readonly() ? null : 'radiogroup'"
+      [attr.aria-label]="'Valoración: ' + value() + ' de ' + stars() + ' estrellas'"
+    >
+      @for (i of starsArray(); track i) {
+        <button
+          class="neu-rating__star"
+          [class.neu-rating__star--filled]="i <= (hovered() ?? value())"
+          [class.neu-rating__star--half]="
+            !isInteger(hovered() ?? value()) && i === Math.ceil(hovered() ?? value())
+          "
+          type="button"
+          [disabled]="readonly()"
+          [attr.aria-label]="i + ' star' + (i > 1 ? 's' : '')"
+          [attr.aria-checked]="i === value()"
+          [attr.role]="'radio'"
+          (mouseenter)="onHover(i)"
+          (mouseleave)="onLeave()"
+          (click)="select(i)"
+          (keydown.left)="select(value() - 1)"
+          (keydown.right)="select(value() + 1)"
+        >
+          <svg class="neu-rating__icon" viewBox="0 0 24 24" aria-hidden="true">
+            <defs>
+              <linearGradient [id]="'half-' + i" x1="0" x2="1" y1="0" y2="0">
+                <stop offset="50%" stop-color="currentColor" />
+                <stop offset="50%" stop-color="transparent" />
+              </linearGradient>
+            </defs>
+            <polygon
+              points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26"
+              [attr.fill]="getFill(i)"
+              stroke="currentColor"
+              stroke-width="1.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+        </button>
+      }
+    </div>
+  `, styles: [".neu-rating{display:inline-flex;align-items:center;gap:2px;font-family:var(--neu-font-sans)}.neu-rating--readonly{pointer-events:none}.neu-rating__star{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;background:transparent;border:none;border-radius:var(--neu-radius-sm);cursor:pointer;color:var(--neu-surface-3);padding:2px;transition:transform .15s ease,color .15s ease;outline:none}.neu-rating__star--filled{color:#f59e0b}.neu-rating__star:hover:not(:disabled){transform:scale(1.15)}.neu-rating__star:focus-visible{outline:2px solid var(--neu-primary);outline-offset:2px}.neu-rating__star:disabled{cursor:default}.neu-rating__icon{width:22px;height:22px}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], stars: [{ type: i0.Input, args: [{ isSignal: true, alias: "stars", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NeuRatingComponent };
+//# sourceMappingURL=neural-ui-core-rating.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"neural-ui-core-rating.mjs","sources":["../../../../projects/ui-core/rating/neu-rating.component.ts","../../../../projects/ui-core/rating/neural-ui-core-rating.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  ViewEncapsulation,\n  computed,\n  input,\n  output,\n  signal,\n} from '@angular/core';\n\n/**\n * NeuralUI Rating Component\n *\n * Selector de valoración con estrellas (o icono personalizable).\n * Soporta valores medios (half-star) y modo solo-lectura.\n *\n * Uso:\n *   <neu-rating [value]=\"rating\" (valueChange)=\"rating = $event\" />\n *   <neu-rating [value]=\"4.5\" [readonly]=\"true\" />\n */\n@Component({\n  selector: 'neu-rating',\n  imports: [],\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `\n    <div\n      class=\"neu-rating\"\n      [class.neu-rating--readonly]=\"readonly()\"\n      [attr.role]=\"readonly() ? null : 'radiogroup'\"\n      [attr.aria-label]=\"'Valoración: ' + value() + ' de ' + stars() + ' estrellas'\"\n    >\n      @for (i of starsArray(); track i) {\n        <button\n          class=\"neu-rating__star\"\n          [class.neu-rating__star--filled]=\"i <= (hovered() ?? value())\"\n          [class.neu-rating__star--half]=\"\n            !isInteger(hovered() ?? value()) && i === Math.ceil(hovered() ?? value())\n          \"\n          type=\"button\"\n          [disabled]=\"readonly()\"\n          [attr.aria-label]=\"i + ' star' + (i > 1 ? 's' : '')\"\n          [attr.aria-checked]=\"i === value()\"\n          [attr.role]=\"'radio'\"\n          (mouseenter)=\"onHover(i)\"\n          (mouseleave)=\"onLeave()\"\n          (click)=\"select(i)\"\n          (keydown.left)=\"select(value() - 1)\"\n          (keydown.right)=\"select(value() + 1)\"\n        >\n          <svg class=\"neu-rating__icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n            <defs>\n              <linearGradient [id]=\"'half-' + i\" x1=\"0\" x2=\"1\" y1=\"0\" y2=\"0\">\n                <stop offset=\"50%\" stop-color=\"currentColor\" />\n                <stop offset=\"50%\" stop-color=\"transparent\" />\n              </linearGradient>\n            </defs>\n            <polygon\n              points=\"12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26\"\n              [attr.fill]=\"getFill(i)\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.5\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n          </svg>\n        </button>\n      }\n    </div>\n  `,\n  styleUrl: './neu-rating.component.scss',\n})\nexport class NeuRatingComponent {\n  protected readonly Math = Math;\n\n  /** Valor actual (1 a stars) / Current value (1 to stars) */\n  value = input<number>(0);\n\n  /** Número de estrellas / Number of stars */\n  stars = input<number>(5);\n\n  /** Modo solo lectura / Read-only mode */\n  readonly = input<boolean>(false);\n\n  /** Emite el nuevo valor al seleccionar / Emits the new value on selection */\n  valueChange = output<number>();\n\n  protected readonly hovered = signal<number | null>(null);\n  readonly starsArray = computed(() => Array.from({ length: this.stars() }, (_, i) => i + 1));\n\n  onHover(i: number): void {\n    if (!this.readonly()) this.hovered.set(i);\n  }\n\n  onLeave(): void {\n    this.hovered.set(null);\n  }\n\n  select(i: number): void {\n    if (this.readonly()) return;\n    const clamped = Math.min(this.stars(), Math.max(1, i));\n    this.valueChange.emit(clamped);\n  }\n\n  isInteger(n: number): boolean {\n    return Number.isInteger(n);\n  }\n\n  getFill(i: number): string {\n    const val = this.hovered() ?? this.value();\n    if (i <= Math.floor(val)) return 'currentColor';\n    if (!Number.isInteger(val) && i === Math.ceil(val)) return `url(#half-${i})`;\n    return 'transparent';\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}