ngx-round-slider 21.0.0

package/README.md

@@ -0,0 +1,64 @@
+# NgxRoundSlider
+
+This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 21.2.0.
+
+## Code scaffolding
+
+Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+
+```bash
+ng generate component component-name
+```
+
+For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+
+```bash
+ng generate --help
+```
+
+## Building
+
+To build the library, run:
+
+```bash
+ng build ngx-round-slider
+```
+
+This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
+
+### Publishing the Library
+
+Once the project is built, you can publish your library by following these steps:
+
+1. Navigate to the `dist` directory:
+
+   ```bash
+   cd dist/ngx-round-slider
+   ```
+
+2. Run the `npm publish` command to publish your library to the npm registry:
+   ```bash
+   npm publish
+   ```
+
+## Running unit tests
+
+To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
+
+```bash
+ng test
+```
+
+## Running end-to-end tests
+
+For end-to-end (e2e) testing, run:
+
+```bash
+ng e2e
+```
+
+Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+
+## Additional Resources
+
+For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.

package/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/ngx-round-slider",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "ngx-round-slider",
+  "version": "21.0.0",
+  "main": "bundles/ngx-round-slider.umd.js",
+  "module": "fesm2022/ngx-round-slider.mjs",
+  "exports": {
+    ".": {
+      "import": "./fesm2022/ngx-round-slider.mjs",
+      "require": "./bundles/ngx-round-slider.umd.js"
+    }
+  },
+  "peerDependencies": {
+    "@angular/common": "^20.0.0 || ^21.0.0",
+    "@angular/core": "^20.0.0 || ^21.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false
+}

package/src/lib/ngx-round-slider-styles.ts

@@ -0,0 +1,9 @@
+export class NgxRoundSliderStyles {
+  pathSelectedRange?: string;
+  pathSelectedRangeCone?: string;
+  pathOutboundDashed?: string;
+  pathAllowedRangeBorder?: string;
+  pathAllowedRangeCenter?: string;
+  pathZeroLine?: string;
+  handler?: string;
+}

package/src/lib/ngx-round-slider.css

@@ -0,0 +1,45 @@
+:host {
+  --ngx-round-slider-path-selected-range: #0060e4;
+  --ngx-round-slider-path-selected-range-cone: rgba(0, 96, 228, 0.5);
+  --ngx-round-slider-path-outbound-dashed:  #818080;
+  --ngx-round-slider-path-allowed-range-border: #5a5a5a;
+  --ngx-round-slider-path-allowed-range-center: #858585;
+  --ngx-round-slider-path-zero-line: #5a5a5a;
+  --ngx-round-slider-handler-fill: #3a3a3a;
+  --ngx-round-slider-handler-stroke: #3a3a3a;
+}
+
+.path-selected-range {
+  fill: transparent;
+  stroke: var(--ngx-round-slider-path-selected-range);
+}
+
+.path-selected-range-cone {
+  fill: var(--ngx-round-slider-path-selected-range-cone);
+}
+
+.path-outbound-dashed {
+  fill: transparent;
+  stroke: var(--ngx-round-slider-path-outbound-dashed);
+}
+
+.path-allowed-range-border {
+  fill: transparent;
+  stroke: var(--ngx-round-slider-path-allowed-range-border);
+}
+
+.path-allowed-range-center {
+  fill: transparent;
+  stroke: var(--ngx-round-slider-path-allowed-range-center);
+}
+
+.path-zero-line {
+  fill: transparent;
+  stroke: var(--ngx-round-slider-path-zero-line);
+}
+
+.handler {
+  cursor: move;
+  fill: var(--ngx-round-slider-handler-fill);
+  stroke: var(--ngx-round-slider-handler-stroke);
+}

package/src/lib/ngx-round-slider.html

@@ -0,0 +1,67 @@
+<svg
+  [attr.width]="radius * 2 + 20"
+  [attr.height]="radius * 2 + 20"
+  (mousemove)="updateAngle($event)"
+  (mouseup)="activeHandler = null">
+
+  <!-- área preenchida (cone do intervalo selecionado) -->
+  <path
+    [class]="styleClasses?.pathSelectedRangeCone ?? 'path-selected-range-cone'"
+    [attr.d]="getConePath()"
+  />
+
+  <foreignObject [attr.x]="strokePathWidth" [attr.y]="0" [attr.width]="(radius*2) - strokePathWidth"
+                 [attr.height]="radius">
+    <ng-content select="[top]"></ng-content>
+  </foreignObject>
+  <foreignObject [attr.x]="strokePathWidth" [attr.y]="radius" [attr.width]="(radius*2) - strokePathWidth"
+                 [attr.height]="radius">
+    <ng-content select="[bottom]"></ng-content>
+  </foreignObject>
+
+  <g>
+    <!-- arco pontilhado (fora dos limites) -->
+    <path
+      [class]="styleClasses?.pathOutboundDashed ?? 'path-outbound-dashed'"
+      [attr.d]="getExcludedArcPath()"
+      stroke-width="2"
+      stroke-dasharray="6,4"
+    />
+    <!-- arco cinza (limite permitido) -->
+    <path
+      [class]="styleClasses?.pathAllowedRangeBorder ?? 'path-allowed-range-border'"
+      [attr.d]="getLimitArcPath()"
+      [attr.stroke-width]="strokePathWidth"
+    />
+    <path
+      [class]="styleClasses?.pathAllowedRangeCenter ?? 'path-allowed-range-center'"
+      [attr.d]="getLimitArcPath()"
+      [attr.stroke-width]="strokePathWidth - (strokePathWidth/5)"
+    />
+  </g>
+
+  <!-- arco selecionado -->
+  <path
+    [class]="styleClasses?.pathSelectedRange ?? 'path-selected-range'"
+    [attr.d]="getArcPath()"
+    [attr.stroke-width]="strokePathWidth"
+  />
+  <!-- 0(zero) line -->
+  <line
+    [class]="styleClasses?.pathZeroLine ?? 'path-zero-line'"
+    [attr.x1]="0" [attr.y1]="radius+10" [attr.x2]="strokePathWidth+4" [attr.y2]="radius+10"
+    stroke-width="1" stroke-linecap="round" />
+
+  <!-- handles -->
+  @for (handle of circleHandlersOrder; track handle) {
+    @if (!disabled) {
+      <circle
+        [class]="styleClasses?.handler ?? 'handler'"
+        [attr.r]="strokePathWidth/2"
+        [attr.cx]="getHandleX(handle === 'start' ? start : end) + radius + 10"
+        [attr.cy]="getHandleY(handle === 'start' ? start : end) + radius + 10"
+        (mousedown)="setActive(handle)"
+      />
+    }
+  }
+</svg>

package/src/lib/ngx-round-slider.spec.ts

@@ -0,0 +1,68 @@
+import { NgxRoundSlider } from './ngx-round-slider';
+
+describe('NgxRoundSlider', () => {
+  let component: NgxRoundSlider;
+
+  beforeEach(() => {
+    component = new NgxRoundSlider();
+    component.radius = 100;
+    component.min = 0;
+    component.max = 360;
+    component.start = 0;
+    component.end = 360;
+  });
+
+  function mockMouseEvent(x: number, y: number, svgSize = 200): MouseEvent {
+    const event = {
+      clientX: x,
+      clientY: y,
+      target: {
+        closest: () => ({
+          getBoundingClientRect: () => ({
+            left: 0,
+            top: 0,
+            width: svgSize,
+            height: svgSize,
+          }),
+        }),
+      },
+    } as unknown as MouseEvent;
+    return event;
+  }
+
+  it('deve permitir que o start chegue em 0°', () => {
+    component.setActive('start');
+    // ponto à esquerda do centro
+    const event = mockMouseEvent(0, 100);
+    component.updateAngle(event);
+    expect(component.start).toBe(0);
+  });
+
+  it('deve permitir que o end chegue em 360°', () => {
+    component.setActive('end');
+    // ponto à esquerda do centro
+    const event = mockMouseEvent(0, 100);
+    component.updateAngle(event);
+    expect(component.end).toBe(360);
+  });
+
+  it('não deve permitir que start ultrapasse end', () => {
+    component.start = 100;
+    component.end = 120;
+    component.setActive('start');
+    // tenta mover start para 130 (maior que end)
+    const event = mockMouseEvent(200, 100);
+    component.updateAngle(event);
+    expect(component.start).toBeLessThan(component.end);
+  });
+
+  it('não deve permitir que end seja menor que start', () => {
+    component.start = 100;
+    component.end = 120;
+    component.setActive('end');
+    // tenta mover end para 90 (menor que start)
+    const event = mockMouseEvent(150, 100);
+    component.updateAngle(event);
+    expect(component.end).toBeGreaterThanOrEqual(component.start);
+  });
+});

package/src/lib/ngx-round-slider.ts

@@ -0,0 +1,220 @@
+import {
+  AfterViewInit,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+  ViewEncapsulation,
+} from '@angular/core';
+import { NgxRoundSliderStyles } from './ngx-round-slider-styles';
+
+@Component({
+  selector: 'ngx-round-slider',
+  standalone: true,
+  imports: [],
+  templateUrl: './ngx-round-slider.html',
+  styleUrl: './ngx-round-slider.css',
+})
+export class NgxRoundSlider implements AfterViewInit {
+  @Input() disabled = false;
+  @Input() radius = 100;
+  @Input() strokePathWidth = 20;
+
+  @Input() start = 0;
+  @Output() startChange = new EventEmitter<number>();
+  @Input() end = 0;
+  @Output() endChange = new EventEmitter<number>();
+  @Input() min = 0;
+  @Input() max = 360;
+
+  @Input() styleClasses?: NgxRoundSliderStyles;
+
+  // handlers
+  circleHandlersOrder: ('start' | 'end')[] = ['start', 'end'];
+  activeHandler: 'start' | 'end' | null = null;
+  inversionToleraceDeg = 5;
+
+  ngAfterViewInit(): void {
+    if (this.start < this.min) {
+      this.start = this.min;
+      this.startChange.emit(this.start);
+    }
+
+    if (this.end > this.max) {
+      this.end = this.max;
+      this.endChange.emit(this.end);
+    }
+
+    if (this.start > this.end) {
+      const oldStart = this.start;
+      const oldEnd = this.end;
+
+      this.start = oldEnd;
+      this.startChange.emit(this.start);
+      this.end = oldStart;
+      this.endChange.emit(this.end);
+    }
+  }
+
+  setActive(handle: 'start' | 'end') {
+    this.activeHandler = handle;
+    this.circleHandlersOrder = this.activeHandler === 'start' ? ['end', 'start'] : ['start', 'end'];
+  }
+
+  updateAngle(event: MouseEvent) {
+    if (!this.activeHandler) {
+      return;
+    }
+
+    const svg = (event.target as SVGElement).closest('svg');
+    if (!svg) {
+      return;
+    }
+
+    const rect = svg.getBoundingClientRect();
+    const cx = rect.left + rect.width / 2;
+    const cy = rect.top + rect.height / 2;
+
+    const dx = event.clientX - cx;
+    const dy = event.clientY - cy;
+
+    // atan2 retorna em radianos, converter para graus
+    let deg = Math.atan2(-dy, -dx) * (180 / Math.PI);
+
+    // normaliza para [0, 360)
+    if (deg < 0) {
+      deg += 360;
+    }
+    deg = Math.round(deg);
+
+    // se for o start, 360 deve virar 0
+    if (this.activeHandler === 'start' && deg === 360) {
+      deg = 0;
+    }
+
+    // se for o end, -0 deve virar 360
+    if (this.activeHandler === 'end' && deg === 0) {
+      deg = 360;
+    }
+
+    // inverte para comecar grau 0 na esquerda sentido horario
+    if (deg < 0 && this.activeHandler === 'end') {
+      deg += 360;
+    }
+
+    // corrige -0 → 0
+    if (Object.is(deg, -0)) {
+      deg = 0;
+    }
+
+    const isOutbound = deg < this.min || deg > this.max;
+    if (isOutbound) {
+      return;
+    }
+
+    if (this.activeHandler === 'start') {
+      if (deg > this.end) {
+        return;
+      }
+      // caso especial: atualmente é 0 e 360 e quer diminuir: NAO DA
+      if (this.start === 0 && this.end === 360 && deg > (360 - this.inversionToleraceDeg)) {
+        return;
+      }
+
+      this.start = Math.round(deg);
+      this.startChange.emit(this.start);
+    } else if (this.activeHandler === 'end') {
+      if (deg < this.start) {
+        return;
+      }
+      // caso especial: atualmente é 0 e 360 e quer aumentar ate 10: NAO DA
+      if (this.start === 0 && this.end === 360 && deg < this.inversionToleraceDeg) {
+        return;
+      }
+
+      this.end = Math.round(deg);
+      this.endChange.emit(this.end);
+    }
+  }
+
+  // coordenadas dos handles (0° = esquerda)
+  getHandleX(angle: number) {
+    return this.radius * Math.cos(((angle - 180) * Math.PI) / 180);
+  }
+  getHandleY(angle: number) {
+    return this.radius * Math.sin(((angle - 180) * Math.PI) / 180);
+  }
+
+  // arco cinza (limite permitido)
+  getLimitArcPath() {
+    if (this.min === 0 && this.max === 360) {
+      const cx = this.radius + 10;
+      const cy = this.radius + 10;
+      return `M ${cx - this.radius} ${cy} A ${this.radius} ${this.radius} 0 1 1 ${cx + this.radius} ${cy} A ${this.radius} ${this.radius} 0 1 1 ${cx - this.radius} ${cy}`;
+    }
+    const startX = this.getHandleX(this.min) + this.radius + 10;
+    const startY = this.getHandleY(this.min) + this.radius + 10;
+    const endX = this.getHandleX(this.max) + this.radius + 10;
+    const endY = this.getHandleY(this.max) + this.radius + 10;
+
+    const largeArc = (this.max - this.min + 360) % 360 > 180 ? 1 : 0;
+
+    return `M ${startX} ${startY} A ${this.radius} ${this.radius} 0 ${largeArc} 1 ${endX} ${endY}`;
+  }
+
+  // arco pontilhado (fora dos limites)
+  getExcludedArcPath() {
+    const cx = this.radius + 10;
+    const cy = this.radius + 10;
+
+    const startX = this.getHandleX(this.max) + cx;
+    const startY = this.getHandleY(this.max) + cy;
+    const endX = this.getHandleX(this.min) + cx;
+    const endY = this.getHandleY(this.min) + cy;
+
+    const largeArc = (this.min - this.max + 360) % 360 > 180 ? 1 : 0;
+
+    return `M ${startX} ${startY} A ${this.radius} ${this.radius} 0 ${largeArc} 1 ${endX} ${endY}`;
+  }
+
+  // arco entre start e end
+  getArcPath() {
+    if (this.start === 0 && this.end === 360) {
+      const cx = this.radius + 10;
+      const cy = this.radius + 10;
+      return `M ${cx - this.radius} ${cy} A ${this.radius} ${this.radius} 0 1 1 ${cx + this.radius} ${cy} A ${this.radius} ${this.radius} 0 1 1 ${cx - this.radius} ${cy}`;
+    }
+
+    const startX = this.getHandleX(this.start) + this.radius + 10;
+    const startY = this.getHandleY(this.start) + this.radius + 10;
+    const endX = this.getHandleX(this.end) + this.radius + 10;
+    const endY = this.getHandleY(this.end) + this.radius + 10;
+
+    const largeArc =
+      (this.start === 0 && this.end === 360) || (this.end - this.start + 360) % 360 > 180 ? 1 : 0;
+
+    return `M ${startX} ${startY} A ${this.radius} ${this.radius} 0 ${largeArc} 1 ${endX} ${endY}`;
+  }
+
+  // área preenchida (cone do ângulo selecionado)
+  getConePath() {
+    if (this.start === 0 && this.end === 360) {
+      const cx = this.radius + 10;
+      const cy = this.radius + 10;
+      return `M ${cx - this.radius} ${cy} A ${this.radius} ${this.radius} 0 1 1 ${cx + this.radius} ${cy} A ${this.radius} ${this.radius} 0 1 1 ${cx - this.radius} ${cy}`;
+    }
+
+    const cx = this.radius + 10;
+    const cy = this.radius + 10;
+
+    const startX = this.getHandleX(this.start) + cx;
+    const startY = this.getHandleY(this.start) + cy;
+    const endX = this.getHandleX(this.end) + cx;
+    const endY = this.getHandleY(this.end) + cy;
+
+    const largeArc = (this.end - this.start + 360) % 360 > 180 ? 1 : 0;
+
+    // M centro → L ponto inicial → arco até ponto final → Z fecha no centro
+    return `M ${cx} ${cy} L ${startX} ${startY} A ${this.radius} ${this.radius} 0 ${largeArc} 1 ${endX} ${endY} Z`;
+  }
+}

package/src/public-api.ts

@@ -0,0 +1 @@
+export * from './lib/ngx-round-slider';

package/tsconfig.lib.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "declaration": true,
+    "declarationMap": true,
+    "types": []
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["**/*.spec.ts"]
+}

package/tsconfig.lib.prod.json

@@ -0,0 +1,11 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

package/tsconfig.spec.json

@@ -0,0 +1,10 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": ["vitest/globals"]
+  },
+  "include": ["src/**/*.d.ts", "src/**/*.spec.ts"]
+}