@ruc-lib/knob 3.1.0 → 3.2.0

package/lib/ruclib-knob/ruclib-knob.component.d.ts

@@ -0,0 +1,275 @@
+import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { KnobConfig } from '../../models/knob.interface';
+import { ControlValueAccessor } from '@angular/forms';
+import * as i0 from "@angular/core";
+export declare class RuclibKnobComponent implements ControlValueAccessor, OnInit, AfterViewInit, OnChanges {
+    private cdr;
+    bgArcRef: ElementRef<SVGPathElement>;
+    progressArcRef: ElementRef<SVGPathElement>;
+    handleRef: ElementRef<SVGCircleElement>;
+    horizontalLineRef: ElementRef<SVGLineElement>;
+    verticalLineRef: ElementRef<SVGLineElement>;
+    rucEvent: EventEmitter<any>;
+    customTheme?: string;
+    rucInputData: KnobConfig;
+    activeHandle: 'start' | 'end' | '';
+    value: number;
+    dragging: boolean;
+    centerX: number;
+    centerY: number;
+    radius: number;
+    startAngle: number;
+    endAngle: number;
+    arcLength: number;
+    changeColorAfter: number;
+    tooltipX: number;
+    tooltipY: number;
+    showTooltip: boolean;
+    hovering: boolean;
+    config: {
+        min: number;
+        max: number;
+        step: number;
+        size: number;
+        valueColor: string;
+        strokeBackground: string;
+        progressBackground: string | string[];
+        strokeWidth: number;
+        valueSize: number;
+        valueWeight: string;
+        showHandle: boolean;
+        handleBackground: string;
+        handleBorderColor: string;
+        handleBorderWidth: number;
+        roundedCorner: boolean;
+        valuePrefix: string;
+        valueSuffix: string;
+        readOnly: boolean;
+        disabled: boolean;
+        enableTooltip: boolean;
+        animateOnHover: boolean;
+        isRangeMode: boolean;
+        rangeStartValue: number;
+        rangeEndValue: number;
+        showButtons: boolean;
+        knobType: "arc" | "horizontal" | "vertical";
+    };
+    private onTouched;
+    private onChange;
+    constructor(cdr: ChangeDetectorRef);
+    /**
+     * handling form control binding to write value
+     * @param val
+     */
+    writeValue(val: number): void;
+    /**
+     * registering onChange method to use as form control
+     * @param fn
+     */
+    registerOnChange(fn: () => void): void;
+    /**
+     * registering onTouch method to use as form control
+     * @param fn
+     */
+    registerOnTouched(fn: () => void): void;
+    /**
+     * registering disabled state
+     * @param isDisabled
+     */
+    setDisabledState(isDisabled: boolean): void;
+    /**
+     * handling input data changes
+     * updating default config with user provided config
+     * @param changes
+     */
+    ngOnChanges(changes: SimpleChanges): void;
+    /**
+     * handling change on component initilization
+     */
+    ngOnInit(): void;
+    /**
+     * handling change after view initilization
+     */
+    ngAfterViewInit(): void;
+    /**
+     * handling change when dragin on svg
+     * @returns
+     */
+    startDrag(): void;
+    /**
+     * rounding value to increment or decrement based on provide config value for step
+     * @param value
+     * @returns
+     */
+    roundToStep(value: number): number;
+    /**
+     * adjusting default value within min & max value when its provide out of range
+     */
+    adjustDefaultValue(): void;
+    /**
+     * handle changes on mouseUp and touchEnd event
+     */
+    stopDrag(): void;
+    /**
+     * handle changes on mouseMove and touch event
+     * @param event
+     * @returns
+     */
+    onMove(event: MouseEvent | TouchEvent): void;
+    /**
+     * handling change on main svg click
+     * @param event
+     * @returns
+     */
+    onSvgClick(event: MouseEvent | TouchEvent): void;
+    /**
+     * get ref of active svg element for different type of knobs
+     * @returns
+     */
+    getTargetSvg(): SVGElement | null;
+    /**
+     * updating progrees value while dragging the handle on stroke bar
+     * @param e
+     * @returns
+     */
+    setProgressFromEvent(e: MouseEvent | TouchEvent): void;
+    /**
+     * updating svg progress based on value changes
+     * @returns
+     */
+    updateArc(): void;
+    /**
+     * return maximum value out of min & max range
+     * @param val
+     * @param min
+     * @param max
+     * @returns
+     */
+    clamp(val: number, min: number, max: number): number;
+    /**
+     * getting calulated  point from polar coordinates to cartesian coordinates
+     * @param cx
+     * @param cy
+     * @param r
+     * @param angleDeg
+     * @returns
+     */
+    polarToCartesian(cx: number, cy: number, r: number, angleDeg: number): {
+        x: number;
+        y: number;
+    };
+    /**
+     * getting radius for arc handle based on stroke width
+     * @returns
+     */
+    getRadius(): number;
+    /**
+     * getting svg box size based on different knob shapes
+     * @returns
+     */
+    getSvgViewBoxSize(): string;
+    /**
+     * geeting dynamic bg color for progress stroke based on provide config for "progressBackground"
+     */
+    get progressColor(): string;
+    /**
+     * getting coordinates for arc based on provided inputs
+     * @param cx
+     * @param cy
+     * @param r
+     * @param start
+     * @param end
+     * @returns
+     */
+    describeArc(cx: number, cy: number, r: number, start: number, end: number): string;
+    /**
+     * getting calculated angle for arc progress based on provided input
+     * @param x
+     * @param y
+     * @returns
+     */
+    getAngleFromPoint(x: number, y: number): number | null;
+    /**
+     * increment value on click on button
+     * @returns
+     */
+    increment(): void;
+    /**
+     * decrement value on click on button
+     * @returns
+     */
+    decrement(): void;
+    /**
+     * change value using arrow keys for accessibility
+     * @param event
+     * @returns
+     */
+    onKeyDown(event: KeyboardEvent): void;
+    /**
+     * geeting arc coordinated for range selection mode
+     * @returns
+     */
+    getRangeArcPath(): string;
+    /**
+     * handling mousedown when range mode is enabled
+     * @param event
+     * @param handleType
+     * @returns
+     */
+    onHandleMouseDown(event: MouseEvent, handleType: 'start' | 'end'): void;
+    /**
+     * getting x & y to update handle position when dragging
+     * @param value
+     * @returns
+     */
+    getHandlePosition(value: number): {
+        x: number;
+        y: number;
+    };
+    /**
+     * geeting handle position for  horizontal line
+     * @param value
+     * @returns
+     */
+    getHorizontalHandleX(value: number): number;
+    /**
+     * geeting start position for  horizontal line
+     * @param value
+     * @returns
+     */
+    getHorizontalLineStartX(): number;
+    /**
+     * geeting end position for  horizontal line
+     * @param value
+     * @returns
+     */
+    getHorizontalLineEndX(): number;
+    /**
+     * geeting handle position for  vertical line
+     * @param value
+     * @returns
+     */
+    getVerticalHandleY(value: number): number;
+    /**
+     * geeting start position for  vertical line
+     * @param value
+     * @returns
+     */
+    getVerticalLineStartY(): number;
+    /**
+     * get output to be emitted based on range mode
+     * @returns
+     */
+    getEventOutput(): number | {
+        start: number;
+        end: number;
+    };
+    /**
+     * get correct page label from object
+     * @param labelName
+     * @returns string
+     */
+    getLabel(labelName: string): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RuclibKnobComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RuclibKnobComponent, "uxp-ruclib-knob", never, { "customTheme": "customTheme"; "rucInputData": "rucInputData"; }, { "rucEvent": "rucEvent"; }, never, never, false, never>;
+}

package/lib/ruclib-knob.module.d.ts

@@ -0,0 +1,11 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./ruclib-knob/ruclib-knob.component";
+import * as i2 from "@angular/common";
+import * as i3 from "@angular/forms";
+import * as i4 from "@angular/material/button";
+import * as i5 from "@angular/material/icon";
+export declare class RuclibKnobModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<RuclibKnobModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<RuclibKnobModule, [typeof i1.RuclibKnobComponent], [typeof i2.CommonModule, typeof i3.FormsModule, typeof i3.ReactiveFormsModule, typeof i4.MatButtonModule, typeof i5.MatIconModule], [typeof i1.RuclibKnobComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<RuclibKnobModule>;
+}

package/models/knob-config.model.d.ts

@@ -0,0 +1,32 @@
+export declare const DefaultKnobConfig: {
+    min: number;
+    max: number;
+    step: number;
+    size: number;
+    valueColor: string;
+    strokeBackground: string;
+    progressBackground: string | string[];
+    strokeWidth: number;
+    valueSize: number;
+    valueWeight: string;
+    showHandle: boolean;
+    handleBackground: string;
+    handleBorderColor: string;
+    handleBorderWidth: number;
+    roundedCorner: boolean;
+    valuePrefix: string;
+    valueSuffix: string;
+    readOnly: boolean;
+    disabled: boolean;
+    enableTooltip: boolean;
+    animateOnHover: boolean;
+    isRangeMode: boolean;
+    rangeStartValue: number;
+    rangeEndValue: number;
+    showButtons: boolean;
+    knobType: "arc" | "horizontal" | "vertical";
+};
+export declare const DEFAULT_LABELS: {
+    incrementButton: string;
+    decrementButton: string;
+};

package/models/knob.interface.d.ts

@@ -0,0 +1,157 @@
+export interface KnobConfig {
+    /**
+     * Defines the minimum value of the knob.
+     * @type {number}
+     * @default 0
+     */
+    min?: number;
+    /**
+     * Defines the maximum value of the knob.
+     * @type {number}
+     * @default 100
+     */
+    max?: number;
+    /**
+     * Defines the step size for incrementing/decrementing the knob value.
+     * @type {number}
+     * @default 1
+     */
+    step?: number;
+    /**
+     * Defines the size (width and height) of the knob in pixels.
+     * @type {number}
+     * @default 150
+     */
+    size?: number;
+    /**
+     * Defines the color of the displayed value.
+     * @type {string}
+     * @default ''
+     */
+    valueColor?: string;
+    /**
+    * Defines the font weight of the displayed value.
+    * @type {string}
+    * @default 'normal'
+    */
+    valueWeight?: string;
+    /**
+     * Defines the font size of the displayed value in pixels.
+     * @type {number}
+     * @default 20
+     */
+    valueSize?: number;
+    /**
+    * Defines the background color of the knob's stroke.
+    * @type {string}
+    * @default 'lightblue'
+    */
+    strokeBackground?: string;
+    /**
+    * Defines the background color of the progress stroke. Can be a single color or an array of colors for gradient.
+    * @type {string | string[]}
+    * @default 'blue'
+    */
+    progressBackground?: string | string[];
+    /**
+     * Defines the width of the knob's stroke in pixels.
+     * @type {number}
+     * @default 15
+     */
+    strokeWidth?: number;
+    /**
+     * Specifies whether the corners of the progress stroke should be rounded.
+     * @type {boolean}
+     * @default true
+     */
+    roundedCorner?: boolean;
+    /**
+     * Specifies whether a handle should be displayed on the knob.
+     * @type {boolean}
+     * @default true
+     */
+    showHandle?: boolean;
+    handleBackground?: string;
+    /**
+     * Defines the border color of the handle.
+     * @type {string}
+     * @default 'blue'
+     */
+    handleBorderColor?: string;
+    /**
+     * Defines the border width of the handle.
+     * @type {number}
+     * @default 4
+     */
+    handleBorderWidth?: number;
+    /**
+       * Defines the prefix for the displayed value (e.g., '$').
+       * @type {string}
+       * @default ''
+       */
+    valuePrefix?: string;
+    /**
+     * Defines the suffix for the displayed value (e.g., '%').
+     * @type {string}
+     * @default ''
+     */
+    valueSuffix?: string;
+    /**
+     * Specifies whether the knob is read-only.
+     * @type {boolean}
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+       * Specifies whether the knob is disabled.
+       * @type {boolean}
+       * @default false
+       */
+    disabled?: boolean;
+    /**
+     * Specifies whether a tooltip should be enabled for the knob.
+     * @type {boolean}
+     * @default false
+     */
+    enableTooltip?: boolean;
+    /**
+     * Specifies whether the knob animates on hover.
+     * @type {boolean}
+     * @default false
+     */
+    animateOnHover?: boolean;
+    /**
+     * Specifies whether the knob operates in range mode, allowing selection of a value range.
+     * @type {boolean}
+     * @default false
+     */
+    isRangeMode?: boolean;
+    /**
+     * Defines the starting value for the range when `isRangeMode` is true.
+     * @type {number}
+     * @default 25
+     */
+    rangeStartValue?: number;
+    /**
+     * Defines the ending value for the range when `isRangeMode` is true.
+     * @type {number}
+     * @default 75
+     */
+    rangeEndValue?: number;
+    /**
+     * Specifies whether increment/decrement buttons should be shown.
+     * @type {boolean}
+     * @default false
+     */
+    showButtons?: boolean;
+    /**
+     * Defines the type of knob.
+     * @type {'arc' | 'horizontal' | 'vertical'}
+     * @default 'arc'
+     */
+    knobType?: 'arc' | 'horizontal' | 'vertical';
+}
+export interface KnobRangeValue {
+    start: number;
+    end: number;
+}

package/package.json

@@ -1,22 +1,29 @@
 {
   "name": "@ruc-lib/knob",
-  "version": "3.1.0",
+  "version": "3.2.0",
+  "license": "MIT",
   "peerDependencies": {
-    "@angular/common": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0",
-    "@angular/core": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0",
-    "@angular/material": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0",
-    "@angular/platform-browser": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0",
-    "@angular/animations": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0",
-    "@angular/forms": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0",
-    "ngx-pagination": "^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0",
-    "rxjs": ">=7.5.0 <8.0.0",
-    "zone.js": "^0.13.0 || ^0.14.0"
+    "@angular/material": "^15.2.0",
+    "@angular/animations": ">=15.0.0 <18.0.0",
+    "@angular/core": ">=15.0.0 <18.0.0",
+    "@angular/common": ">=15.0.0 <18.0.0",
+    "@angular/forms": ">=15.0.0 <18.0.0",
+    "ngx-pagination": "^6.0.3",
+    "rxjs": ">=6.5.0 <8.0.0",
+    "zone.js": ">=0.11.4 <0.14.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"
   },
+  "publishConfig": {
+    "access": "public"
+  },
   "sideEffects": false,
-  "module": "fesm2022/ruc-lib-knob.mjs",
+  "module": "fesm2015/ruc-lib-knob.mjs",
+  "es2020": "fesm2020/ruc-lib-knob.mjs",
+  "esm2020": "esm2020/ruc-lib-knob.mjs",
+  "fesm2020": "fesm2020/ruc-lib-knob.mjs",
+  "fesm2015": "fesm2015/ruc-lib-knob.mjs",
   "typings": "index.d.ts",
   "exports": {
     "./package.json": {
@@ -24,7 +31,11 @@
     },
     ".": {
       "types": "./index.d.ts",
-      "default": "./fesm2022/ruc-lib-knob.mjs"
+      "esm2020": "./esm2020/ruc-lib-knob.mjs",
+      "es2020": "./fesm2020/ruc-lib-knob.mjs",
+      "es2015": "./fesm2015/ruc-lib-knob.mjs",
+      "node": "./fesm2015/ruc-lib-knob.mjs",
+      "default": "./fesm2020/ruc-lib-knob.mjs"
     }
   }
 }