@ruc-lib/knob 3.1.1 → 4.0.0

package/fesm2022/ruc-lib-knob.mjs

@@ -0,0 +1,595 @@
+import * as i3 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i2 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import { FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { EventEmitter, forwardRef, HostListener, Input, Output, ViewChild, Component } from '@angular/core';
+
+const DefaultKnobConfig = {
+    min: 0,
+    max: 100,
+    step: 1,
+    size: 150,
+    valueColor: '',
+    strokeBackground: 'lightblue',
+    progressBackground: 'blue', // 'green' |  ['green'] | ['red', 'blue', 'green', 'black', 'orange'],
+    strokeWidth: 15,
+    valueSize: 20,
+    valueWeight: 'normal',
+    showHandle: true,
+    handleBackground: 'lightblue',
+    handleBorderColor: 'blue',
+    handleBorderWidth: 4,
+    roundedCorner: true,
+    valuePrefix: '',
+    valueSuffix: '',
+    readOnly: false,
+    disabled: false,
+    enableTooltip: false,
+    animateOnHover: false,
+    isRangeMode: false,
+    rangeStartValue: 25,
+    rangeEndValue: 75,
+    showButtons: false,
+    knobType: 'arc' // 'horizontal' | 'vertical' | 'arc'
+};
+const DEFAULT_LABELS = {
+    incrementButton: 'Increment Value',
+    decrementButton: 'Decrement Value'
+};
+
+/* eslint-disable @typescript-eslint/no-empty-function */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable @typescript-eslint/no-inferrable-types */
+class RuclibKnobComponent {
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.rucEvent = new EventEmitter();
+        this.customTheme = '';
+        this.activeHandle = '';
+        this.value = 0;
+        this.dragging = false;
+        this.centerX = 0;
+        this.centerY = 0;
+        this.radius = 0;
+        this.startAngle = 210;
+        this.endAngle = 510;
+        this.arcLength = 300;
+        this.changeColorAfter = 0;
+        this.tooltipX = 0;
+        this.tooltipY = 0;
+        this.showTooltip = false;
+        this.hovering = false;
+        this.config = DefaultKnobConfig;
+        this.onTouched = () => { };
+        this.onChange = (value) => { };
+    }
+    /**
+     * handling form control binding to write value
+     * @param val
+     */
+    writeValue(val) {
+        this.value = val;
+    }
+    /**
+     * registering onChange method to use as form control
+     * @param fn
+     */
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    /**
+     * registering onTouch method to use as form control
+     * @param fn
+     */
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    /**
+     * registering disabled state
+     * @param isDisabled
+     */
+    setDisabledState(isDisabled) {
+        this.config.disabled = isDisabled;
+    }
+    /**
+     * handling input data changes
+     * updating default config with user provided config
+     * @param changes
+     */
+    ngOnChanges(changes) {
+        if (changes && changes['rucInputData'] && changes['rucInputData'].currentValue) {
+            this.config = { ...this.config, ...changes['rucInputData'].currentValue };
+        }
+    }
+    /**
+     * handling change on component initilization
+     */
+    ngOnInit() {
+        this.adjustDefaultValue();
+        if (this.config.knobType != 'arc') {
+            this.config.isRangeMode = false;
+            this.config.enableTooltip = false;
+        }
+        if (Array.isArray(this.config.progressBackground)) {
+            this.changeColorAfter = Math.round(100 / this.config.progressBackground.length);
+        }
+    }
+    /**
+     * handling change after view initilization
+     */
+    ngAfterViewInit() {
+        this.centerX = this.config.size / 2;
+        this.centerY = this.config.size / 2;
+        this.radius = this.config.size / 2 - 20;
+        this.bgArcRef?.nativeElement.setAttribute('d', this.describeArc(this.centerX, this.centerY, this.radius, this.startAngle, this.endAngle));
+        this.updateArc();
+        this.cdr.detectChanges();
+    }
+    /**
+     * handling change when dragin on svg
+     * @returns
+     */
+    startDrag() {
+        if (this.config.disabled || this.config.readOnly)
+            return;
+        this.dragging = true;
+        this.showTooltip = true;
+        this.rucEvent.emit({ eventName: 'dragStart', eventOutput: { value: this.getEventOutput() } });
+    }
+    /**
+     * rounding value to increment or decrement based on provide config value for step
+     * @param value
+     * @returns
+     */
+    roundToStep(value) {
+        const stepped = Math.round((value - this.config.min) / this.config.step) * this.config.step + this.config.min;
+        return this.clamp(stepped, this.config.min, this.config.max);
+    }
+    /**
+     * adjusting default value within min & max value when its provide out of range
+     */
+    adjustDefaultValue() {
+        if (this.value < this.config.min) {
+            this.value = this.config.min;
+        }
+        if (this.value > this.config.max) {
+            this.value = this.config.max;
+        }
+        if (this.config.isRangeMode) {
+            if (this.config.rangeStartValue < this.config.min || this.config.rangeStartValue > this.config.max) {
+                this.config.rangeStartValue = this.config.min;
+            }
+            if (this.config.rangeEndValue > this.config.max || this.config.rangeEndValue < this.config.min) {
+                this.config.rangeEndValue = this.config.max;
+            }
+        }
+        this.updateArc();
+    }
+    /**
+     * handle changes on mouseUp and touchEnd event
+     */
+    stopDrag() {
+        this.dragging = false;
+        this.showTooltip = false;
+        this.rucEvent.emit({ eventName: 'dragEnd', eventOutput: { value: this.getEventOutput() } });
+    }
+    /**
+     * handle changes on mouseMove and touch event
+     * @param event
+     * @returns
+     */
+    onMove(event) {
+        if (this.config.disabled || this.config.readOnly || !this.dragging)
+            return;
+        event.preventDefault();
+        this.setProgressFromEvent(event);
+    }
+    /**
+     * handling change on main svg click
+     * @param event
+     * @returns
+     */
+    onSvgClick(event) {
+        if (this.config.disabled || this.config.readOnly || this.config.isRangeMode)
+            return;
+        this.setProgressFromEvent(event);
+    }
+    /**
+     * get ref of active svg element for different type of knobs
+     * @returns
+     */
+    getTargetSvg() {
+        if (this.config.knobType === 'horizontal') {
+            return this.horizontalLineRef.nativeElement.closest('svg');
+        }
+        else if (this.config.knobType === 'vertical') {
+            return this.verticalLineRef.nativeElement.closest('svg');
+        }
+        return this.bgArcRef.nativeElement.closest('svg');
+    }
+    /**
+     * updating progrees value while dragging the handle on stroke bar
+     * @param e
+     * @returns
+     */
+    setProgressFromEvent(e) {
+        const svg = this.getTargetSvg();
+        if (!svg) {
+            return;
+        }
+        const rect = svg.getBoundingClientRect();
+        const clientX = (e instanceof TouchEvent) ? e.touches[0].clientX : e.clientX;
+        const clientY = (e instanceof TouchEvent) ? e.touches[0].clientY : e.clientY;
+        const x = clientX - rect.left;
+        const y = clientY - rect.top;
+        let rawPercent;
+        if (this.config.knobType === 'horizontal') {
+            const usableWidth = this.config.size - 2 * this.config.strokeWidth;
+            rawPercent = ((x - this.config.strokeWidth) / usableWidth) * 100;
+        }
+        else if (this.config.knobType === 'vertical') {
+            const usableHeight = this.config.size - 2 * this.config.strokeWidth;
+            rawPercent = (1 - (y - this.config.strokeWidth) / usableHeight) * 100;
+        }
+        else {
+            const angle = this.getAngleFromPoint(x, y);
+            if (angle === null)
+                return;
+            rawPercent = ((angle - this.startAngle) / this.arcLength) * 100;
+        }
+        const clampedPercent = this.clamp(rawPercent, 0, 100);
+        let absolutePercent = this.config.min + (clampedPercent / 100) * (this.config.max - this.config.min);
+        absolutePercent = this.roundToStep(absolutePercent);
+        if (this.config.isRangeMode) {
+            if (this.activeHandle === 'start') {
+                if (absolutePercent > this.config.rangeEndValue) {
+                    absolutePercent = this.config.rangeEndValue;
+                }
+                this.config.rangeStartValue = absolutePercent;
+            }
+            else {
+                if (absolutePercent < this.config.rangeStartValue) {
+                    absolutePercent = this.config.rangeStartValue;
+                }
+                this.config.rangeEndValue = absolutePercent;
+            }
+            this.rucEvent.emit({ eventName: 'valueChange', eventOutput: { start: this.config.rangeStartValue, end: this.config.rangeEndValue } });
+        }
+        else {
+            this.value = absolutePercent;
+            this.rucEvent.emit({ eventName: 'valueChange', eventOutput: this.value });
+        }
+        this.updateArc();
+        this.onChange(this.value);
+        this.onTouched();
+    }
+    /**
+     * updating svg progress based on value changes
+     * @returns
+     */
+    updateArc() {
+        if (this.config.knobType !== 'arc') {
+            return;
+        }
+        const scaled = (this.value - this.config.min) / (this.config.max - this.config.min);
+        const angle = this.startAngle + scaled * this.arcLength;
+        const path = this.describeArc(this.centerX, this.centerY, this.radius, this.startAngle, angle);
+        this.progressArcRef?.nativeElement.setAttribute('d', path);
+        const pos = this.polarToCartesian(this.centerX, this.centerY, this.radius, angle);
+        this.handleRef?.nativeElement.setAttribute('cx', pos.x.toString());
+        this.handleRef?.nativeElement.setAttribute('cy', pos.y.toString());
+        // for tooltip
+        const angleRad = (angle - 90) * Math.PI / 180;
+        const tooltipRadius = this.radius + this.config.strokeWidth / 2 + 10;
+        this.tooltipX = this.centerX + tooltipRadius * Math.cos(angleRad);
+        this.tooltipY = this.centerY + tooltipRadius * Math.sin(angleRad);
+    }
+    /**
+     * return maximum value out of min & max range
+     * @param val
+     * @param min
+     * @param max
+     * @returns
+     */
+    clamp(val, min, max) {
+        return Math.max(min, Math.min(max, val));
+    }
+    /**
+     * getting calulated  point from polar coordinates to cartesian coordinates
+     * @param cx
+     * @param cy
+     * @param r
+     * @param angleDeg
+     * @returns
+     */
+    polarToCartesian(cx, cy, r, angleDeg) {
+        const angleRad = (angleDeg - 90) * Math.PI / 180;
+        return {
+            x: cx + r * Math.cos(angleRad),
+            y: cy + r * Math.sin(angleRad)
+        };
+    }
+    /**
+     * getting radius for arc handle based on stroke width
+     * @returns
+     */
+    getRadius() {
+        return this.config.strokeWidth ? (this.config.strokeWidth / 2) - ((this.config.handleBorderWidth ?? 0) / 2) : 4;
+    }
+    /**
+     * getting svg box size based on different knob shapes
+     * @returns
+     */
+    getSvgViewBoxSize() {
+        let width = this.config.size, height = this.config.size;
+        if (this.config.knobType === 'horizontal') {
+            height = this.config.strokeWidth + 40;
+        }
+        if (this.config.knobType === 'vertical') {
+            height = this.config.size / 4 + 5;
+            width = this.config.strokeWidth + 40;
+        }
+        return '0 0 ' + width + ' ' + height;
+    }
+    /**
+     * geeting dynamic bg color for progress stroke based on provide config for "progressBackground"
+     */
+    get progressColor() {
+        if (typeof this.config.progressBackground === 'string') {
+            return this.config.progressBackground;
+        }
+        else if (this.config.progressBackground?.length == 1) {
+            return this.config.progressBackground[0];
+        }
+        else if (this.config.progressBackground.length > 1) {
+            return this.config.progressBackground[Math.ceil(this.value / this.changeColorAfter) - 1];
+        }
+        else {
+            return 'green';
+        }
+    }
+    /**
+     * getting coordinates for arc based on provided inputs
+     * @param cx
+     * @param cy
+     * @param r
+     * @param start
+     * @param end
+     * @returns
+     */
+    describeArc(cx, cy, r, start, end) {
+        const startPos = this.polarToCartesian(cx, cy, r, end);
+        const endPos = this.polarToCartesian(cx, cy, r, start);
+        const largeArc = end - start <= 180 ? 0 : 1;
+        return [
+            "M", startPos.x, startPos.y,
+            "A", r, r, 0, largeArc, 0, endPos.x, endPos.y
+        ].join(" ");
+    }
+    /**
+     * getting calculated angle for arc progress based on provided input
+     * @param x
+     * @param y
+     * @returns
+     */
+    getAngleFromPoint(x, y) {
+        const dx = x - this.centerX;
+        if (dx === 0) {
+            return null;
+        }
+        const dy = y - this.centerY;
+        let angle = Math.atan2(dy, dx) * 180 / Math.PI + 90;
+        if (angle < 0)
+            angle += 360;
+        const normalizedStart = this.startAngle % 360;
+        let delta = angle - normalizedStart;
+        if (delta < 0)
+            delta += 360;
+        if (delta > this.arcLength)
+            return null;
+        return this.startAngle + delta;
+    }
+    /**
+     * increment value on click on button
+     * @returns
+     */
+    increment() {
+        if (this.config.disabled || this.config.readOnly)
+            return;
+        this.value = this.clamp((this.value + this.config.step), this.config.min, this.config.max);
+        this.updateArc();
+        this.onChange(this.value);
+        this.onTouched();
+    }
+    /**
+     * decrement value on click on button
+     * @returns
+     */
+    decrement() {
+        if (this.config.disabled || this.config.readOnly)
+            return;
+        this.value = this.clamp((this.value - this.config.step), this.config.min, this.config.max);
+        this.updateArc();
+        this.onChange(this.value);
+        this.onTouched();
+    }
+    /**
+     * change value using arrow keys for accessibility
+     * @param event
+     * @returns
+     */
+    onKeyDown(event) {
+        if (this.config.readOnly || this.config.disabled)
+            return;
+        if (event.key === 'ArrowRight' || event.key === 'ArrowUp') {
+            this.increment();
+            event.preventDefault();
+        }
+        else if (event.key === 'ArrowLeft' || event.key === 'ArrowDown') {
+            this.decrement();
+            event.preventDefault();
+        }
+    }
+    /**
+     * geeting arc coordinated for range selection mode
+     * @returns
+     */
+    getRangeArcPath() {
+        const startAngle = this.startAngle + (this.config.rangeStartValue / (this.config.max - this.config.min)) * (this.endAngle - this.startAngle);
+        const endAngle = this.startAngle + (this.config.rangeEndValue / (this.config.max - this.config.min)) * (this.endAngle - this.startAngle);
+        return this.describeArc(this.centerX, this.centerY, this.radius, startAngle, endAngle);
+    }
+    /**
+     * handling mousedown when range mode is enabled
+     * @param event
+     * @param handleType
+     * @returns
+     */
+    onHandleMouseDown(event, handleType) {
+        if (this.config.disabled || this.config.readOnly)
+            return;
+        this.activeHandle = handleType;
+        this.startDrag();
+    }
+    /**
+     * getting x & y to update handle position when dragging
+     * @param value
+     * @returns
+     */
+    getHandlePosition(value) {
+        const scaled = (value - this.config.min) / (this.config.max - this.config.min);
+        const angle = this.startAngle + scaled * this.arcLength;
+        const pos = this.polarToCartesian(this.centerX, this.centerY, this.radius, angle);
+        return pos;
+    }
+    /**
+     * geeting handle position for  horizontal line
+     * @param value
+     * @returns
+     */
+    getHorizontalHandleX(value) {
+        const usableWidth = this.config.size - 2 * this.config.strokeWidth;
+        const ratio = (value - this.config.min) / (this.config.max - this.config.min);
+        return this.config.strokeWidth + usableWidth * ratio;
+    }
+    /**
+     * geeting start position for  horizontal line
+     * @param value
+     * @returns
+     */
+    getHorizontalLineStartX() {
+        return this.getHorizontalHandleX(this.config.isRangeMode ? this.config.rangeStartValue : this.config.min);
+    }
+    /**
+     * geeting end position for  horizontal line
+     * @param value
+     * @returns
+     */
+    getHorizontalLineEndX() {
+        return this.getHorizontalHandleX(this.config.isRangeMode ? this.config.rangeEndValue : this.value);
+    }
+    /**
+     * geeting handle position for  vertical line
+     * @param value
+     * @returns
+     */
+    getVerticalHandleY(value) {
+        const usableHeight = this.config.size - 2 * this.config.strokeWidth;
+        const ratio = 1 - (value - this.config.min) / (this.config.max - this.config.min);
+        return this.config.strokeWidth + usableHeight * ratio;
+    }
+    /**
+     * geeting start position for  vertical line
+     * @param value
+     * @returns
+     */
+    getVerticalLineStartY() {
+        return this.getVerticalHandleY(this.config.isRangeMode ? this.config.rangeEndValue : this.value);
+    }
+    /**
+     * get output to be emitted based on range mode
+     * @returns
+     */
+    getEventOutput() {
+        if (this.config.isRangeMode) {
+            return { start: this.config.rangeStartValue, end: this.config.rangeEndValue };
+        }
+        return this.value;
+    }
+    /**
+     * get correct page label from object
+     * @param labelName
+     * @returns string
+     */
+    getLabel(labelName) {
+        return DEFAULT_LABELS[labelName] || '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: RuclibKnobComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: RuclibKnobComponent, isStandalone: true, selector: "uxp-ruclib-knob", inputs: { customTheme: "customTheme", rucInputData: "rucInputData" }, outputs: { rucEvent: "rucEvent" }, host: { listeners: { "window:mouseup": "stopDrag()", "window:touchend": "stopDrag()", "window:mousemove": "onMove($event)", "window:touchmove": "onMove($event)" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => RuclibKnobComponent),
+                multi: true
+            }
+        ], viewQueries: [{ propertyName: "bgArcRef", first: true, predicate: ["bgArc"], descendants: true }, { propertyName: "progressArcRef", first: true, predicate: ["progressArc"], descendants: true }, { propertyName: "handleRef", first: true, predicate: ["handle"], descendants: true }, { propertyName: "horizontalLineRef", first: true, predicate: ["horizontalLine"], descendants: true }, { propertyName: "verticalLineRef", first: true, predicate: ["verticalLine"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"knob-container {{customTheme}}\" [style.width.px]=\"config.size\">\r\n  <svg [ngClass]=\"{ 'hover-animate': config.animateOnHover }\" [attr.viewBox]=\"getSvgViewBoxSize()\"\r\n    (click)=\"onSvgClick($event)\" [style.cursor]=\"(config.readOnly || config.disabled) ? 'not-allowed' : 'pointer'\"\r\n    [class.disabled]=\"config.disabled\" [class.read-only]=\"config.readOnly\"\r\n    (mouseenter)=\"showTooltip = true; hovering=true; rucEvent.emit({eventName: 'hover'})\"\r\n    (mouseleave)=\"showTooltip = false; hovering=false\" (focus)=\"rucEvent.emit({eventName: 'focus'})\"\r\n    (blur)=\"rucEvent.emit({eventName: 'blur'})\" (keydown)=\"onKeyDown($event)\" [attr.role]=\"'slider'\"\r\n    [attr.aria-valuemin]=\"config.min\" [attr.aria-valuemax]=\"config.max\" [attr.aria-valuenow]=\"value\"\r\n    [attr.aria-disabled]=\"config.disabled\">\r\n    @switch (config.knobType) {\r\n      <!-- arc knob -->\r\n      @case ('arc') {\r\n        <ng-container>\r\n          <!-- glow effect -->\r\n          <defs>\r\n            <filter id=\"glow\" x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\">\r\n              <feDropShadow dx=\"0\" dy=\"0\" stdDeviation=\"4\" [attr.flood-color]=\"config.strokeBackground\"\r\n                flood-opacity=\"0.75\" />\r\n            </filter>\r\n          </defs>\r\n          <!-- arc main stroke -->\r\n          <path #bgArc fill=\"none\" class=\"main-path\" [attr.stroke]=\"config.strokeBackground\"\r\n            [attr.stroke-width]=\"config.strokeWidth\" [attr.stroke-linecap]=\"config.roundedCorner ? 'round' : ''\" />\r\n          <!-- arc progress stroke - single handle -->\r\n          @if (!config.isRangeMode) {\r\n            <path #progressArc fill=\"none\" class=\"progress-path\" [attr.stroke]=\"progressColor\"\r\n              [attr.stroke-width]=\"config.strokeWidth\" [attr.stroke-linecap]=\"config.roundedCorner ? 'round' : ''\" />\r\n          }\r\n          <!-- arc - single handle -->\r\n          @if (!config.isRangeMode) {\r\n            <circle #handle class=\"handle\" [attr.r]=\"getRadius()\"\r\n              [attr.fill]=\"config.showHandle ? config.handleBackground : 'transparent'\"\r\n              [attr.stroke-width]=\"config.showHandle ? config.handleBorderWidth : 0\"\r\n              [attr.stroke]=\"config.showHandle ? config.handleBorderColor : 'transparent'\" (mousedown)=\"startDrag()\"\r\n              (touchstart)=\"startDrag()\" />\r\n          }\r\n          <!-- arc progress stroke - dual handle for range -->\r\n          @if (config.isRangeMode) {\r\n            <path [attr.d]=\"getRangeArcPath()\" [attr.stroke]=\"progressColor\"\r\n              [attr.stroke-width]=\"config.strokeWidth\" fill=\"none\" stroke-linecap=\"round\" />\r\n          }\r\n          <!-- arc dual handle - start -->\r\n          @if (config.isRangeMode) {\r\n            <circle [attr.cx]=\"getHandlePosition(config.rangeStartValue).x\"\r\n              [attr.cy]=\"getHandlePosition(config.rangeStartValue).y\" [attr.r]=\"getRadius()\"\r\n              [attr.fill]=\"config.handleBackground\" [attr.stroke-width]=\"config.handleBorderWidth\"\r\n              [attr.stroke]=\"config.handleBorderColor\" (mousedown)=\"onHandleMouseDown($event, 'start')\" />\r\n          }\r\n          <!-- arc dual handle - end -->\r\n          @if (config.isRangeMode) {\r\n            <circle [attr.cx]=\"getHandlePosition(config.rangeEndValue).x\"\r\n              [attr.cy]=\"getHandlePosition(config.rangeEndValue).y\" [attr.r]=\"getRadius()\"\r\n              [attr.fill]=\"config.handleBackground\" [attr.stroke-width]=\"config.handleBorderWidth\"\r\n              [attr.stroke]=\"config.handleBorderColor\" (mousedown)=\"onHandleMouseDown($event, 'end')\" />\r\n          }\r\n        </ng-container>\r\n      }\r\n      <!-- horizontal line -->\r\n      @case ('horizontal') {\r\n        <ng-container>\r\n          <line #horizontalLine [attr.x1]=\"config.strokeWidth\" [attr.x2]=\"config.size\" [attr.y1]=\"config.strokeWidth + 10\"\r\n            [attr.y2]=\"config.strokeWidth + 10\" [attr.stroke]=\"config.strokeBackground\"\r\n            [attr.stroke-width]=\"config.strokeWidth\" [attr.line-cap]=\"config.roundedCorner ? 'round' : ''\" />\r\n          <!-- progress for horizontal line -->\r\n          <line [attr.x1]=\"getHorizontalLineStartX()\" [attr.x2]=\"getHorizontalLineEndX()\"\r\n            [attr.y1]=\"config.strokeWidth + 10\" [attr.y2]=\"config.strokeWidth + 10\" [attr.stroke]=\"progressColor\"\r\n            [attr.stroke-width]=\"config.strokeWidth\" />\r\n          <!-- handle for horizontal line -->\r\n          @if (!config.isRangeMode) {\r\n            <rect [attr.x]=\"getHorizontalHandleX(value)\"\r\n              [attr.y]=\"config.strokeWidth + 10 - getRadius()-1\" [attr.width]=\"config.strokeWidth\"\r\n              [attr.height]=\"config.strokeWidth\"\r\n              [attr.fill]=\"config.handleBackground ? config.handleBackground : progressColor\" (mousedown)=\"startDrag()\"\r\n              (touchstart)=\"startDrag()\" />\r\n          }\r\n        </ng-container>\r\n      }\r\n      <!-- vertical line -->\r\n      @case ('vertical') {\r\n        <ng-container>\r\n          <line #verticalLine [attr.y1]=\"config.strokeWidth/4\" [attr.y2]=\"config.size/4\" [attr.x1]=\"config.strokeWidth + 10\"\r\n            [attr.x2]=\"config.strokeWidth + 10\" [attr.stroke]=\"config.strokeBackground\"\r\n            [attr.stroke-width]=\"config.strokeWidth/4\" [attr.line-cap]=\"config.roundedCorner ? 'round' : ''\" />\r\n          <!-- progress for vertical line -->\r\n          <line [attr.y1]=\"getVerticalLineStartY()/4\" [attr.y2]=\"config.size/4\" [attr.x1]=\"config.strokeWidth + 10\"\r\n            [attr.x2]=\"config.strokeWidth + 10\" [attr.stroke]=\"progressColor\" [attr.stroke-width]=\"config.strokeWidth/4\" />\r\n          <!-- Handle for vertical line -->\r\n          @if (!config.isRangeMode) {\r\n            <rect [attr.y]=\"getVerticalHandleY(value)/4\" [attr.x]=\"config.strokeWidth + 7.5\"\r\n              [attr.width]=\"config.strokeWidth/4\" [attr.height]=\"config.strokeWidth/4\"\r\n              [attr.fill]=\"config.handleBackground ? config.handleBackground : progressColor\" (mousedown)=\"startDrag()\"\r\n              (touchstart)=\"startDrag()\" />\r\n          }\r\n        </ng-container>\r\n      }\r\n    }\r\n  </svg>\r\n\r\n  <!-- tooltip -->\r\n  @if (config.enableTooltip && !config.isRangeMode) {\r\n    <div class=\"tooltip\" [class.show]=\"showTooltip\"\r\n      [style.left.px]=\"tooltipX\" [style.top.px]=\"tooltipY\">\r\n      {{ value}}\r\n    </div>\r\n  }\r\n\r\n  <!-- progress value -->\r\n  <div class=\"progress-value {{config.knobType}}\" [style.maxWidth.px]=\"config.size * 2 - 50\"\r\n    [style.color]=\"config.valueColor\" [style.fontSize.px]=\"config.valueSize\" [style.fontWeight]=\"config.valueWeight\"\r\n    [style.cursor]=\"(config.readOnly || config.disabled) ? 'not-allowed' : ''\" [class.disabled]=\"config.disabled\"\r\n    [class.read-only]=\"config.readOnly\" title=\"{{config.valuePrefix +''+value+''+config.valueSuffix}}\">\r\n    @if (!config.isRangeMode) {\r\n      <span class=\"value-prefix\">{{config.valuePrefix}}</span>\r\n      <span class=\"value\">{{ value }}</span>\r\n      <span class=\"value-suffix\">{{config.valueSuffix}}</span>\r\n    }\r\n    @if (config.isRangeMode) {\r\n      <span class=\"value\">{{config.rangeStartValue}} : {{config.rangeEndValue}}</span>\r\n    }\r\n  </div>\r\n\r\n  <!-- increment-decrement button -->\r\n  @if (!config.isRangeMode && config.showButtons) {\r\n    <div class=\"arc-buttons\">\r\n      <button mat-mini-fab color=\"secondary\" (click)=\"decrement()\" [disabled]=\"config.disabled || config.readOnly\" (keydown)=\"onKeyDown($event)\"\r\n        [attr.aria-label]=\"getLabel('decrementButton')\">\r\n        <mat-icon>remove</mat-icon>\r\n      </button>\r\n      <button mat-mini-fab color=\"secondary\" (click)=\"increment()\" [disabled]=\"config.disabled || config.readOnly\" (keydown)=\"onKeyDown($event)\"\r\n        [attr.aria-label]=\"getLabel('incrementButton')\">\r\n        <mat-icon>add</mat-icon>\r\n      </button>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".knob-container{position:relative;padding-bottom:10px}svg{width:100%;height:100%;outline:none}.progress-value{left:50%;font-size:24px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%)}.progress-value.arc{position:absolute;top:45%}.progress-value.horizontal,.progress-value.vertical{position:relative;display:flex;justify-content:center;align-items:center;padding-top:20px}.handle{cursor:pointer}.disabled{opacity:.6;pointer-events:none}.read-only{opacity:.8}.arc-buttons{display:flex;justify-content:center;gap:1rem;margin-top:-10px}.arc-buttons button{padding:6px;width:35px;height:35px;font-size:1rem;cursor:pointer;border:none;border-radius:4px;transition:background .2s ease;box-shadow:0 0 1px 1px #ddd!important}::ng-deep .mat-mdc-mini-fab:not(.mdc-fab--extended) .mdc-fab__ripple{border-radius:0!important;-webkit-border-radius:0!important;-moz-border-radius:0!important;-ms-border-radius:0!important;-o-border-radius:0!important}.arc-buttons button:disabled{opacity:.6;cursor:not-allowed}.tooltip{position:absolute;background:#333;color:#fff;padding:4px 8px;border-radius:4px;font-size:12px;pointer-events:none;white-space:nowrap;transform:translate(-50%,-100%);opacity:0;transition:opacity .3s ease}.tooltip.show{opacity:1}.main-path{transition:all 1s ease;-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-ms-transition:all 1s ease;-o-transition:all 1s ease}.hover-animate:hover .main-path{filter:url(#glow);-webkit-filter:url(#glow)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: RuclibKnobComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'uxp-ruclib-knob', imports: [CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        MatButtonModule,
+                        MatIconModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => RuclibKnobComponent),
+                            multi: true
+                        }
+                    ], template: "<div class=\"knob-container {{customTheme}}\" [style.width.px]=\"config.size\">\r\n  <svg [ngClass]=\"{ 'hover-animate': config.animateOnHover }\" [attr.viewBox]=\"getSvgViewBoxSize()\"\r\n    (click)=\"onSvgClick($event)\" [style.cursor]=\"(config.readOnly || config.disabled) ? 'not-allowed' : 'pointer'\"\r\n    [class.disabled]=\"config.disabled\" [class.read-only]=\"config.readOnly\"\r\n    (mouseenter)=\"showTooltip = true; hovering=true; rucEvent.emit({eventName: 'hover'})\"\r\n    (mouseleave)=\"showTooltip = false; hovering=false\" (focus)=\"rucEvent.emit({eventName: 'focus'})\"\r\n    (blur)=\"rucEvent.emit({eventName: 'blur'})\" (keydown)=\"onKeyDown($event)\" [attr.role]=\"'slider'\"\r\n    [attr.aria-valuemin]=\"config.min\" [attr.aria-valuemax]=\"config.max\" [attr.aria-valuenow]=\"value\"\r\n    [attr.aria-disabled]=\"config.disabled\">\r\n    @switch (config.knobType) {\r\n      <!-- arc knob -->\r\n      @case ('arc') {\r\n        <ng-container>\r\n          <!-- glow effect -->\r\n          <defs>\r\n            <filter id=\"glow\" x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\">\r\n              <feDropShadow dx=\"0\" dy=\"0\" stdDeviation=\"4\" [attr.flood-color]=\"config.strokeBackground\"\r\n                flood-opacity=\"0.75\" />\r\n            </filter>\r\n          </defs>\r\n          <!-- arc main stroke -->\r\n          <path #bgArc fill=\"none\" class=\"main-path\" [attr.stroke]=\"config.strokeBackground\"\r\n            [attr.stroke-width]=\"config.strokeWidth\" [attr.stroke-linecap]=\"config.roundedCorner ? 'round' : ''\" />\r\n          <!-- arc progress stroke - single handle -->\r\n          @if (!config.isRangeMode) {\r\n            <path #progressArc fill=\"none\" class=\"progress-path\" [attr.stroke]=\"progressColor\"\r\n              [attr.stroke-width]=\"config.strokeWidth\" [attr.stroke-linecap]=\"config.roundedCorner ? 'round' : ''\" />\r\n          }\r\n          <!-- arc - single handle -->\r\n          @if (!config.isRangeMode) {\r\n            <circle #handle class=\"handle\" [attr.r]=\"getRadius()\"\r\n              [attr.fill]=\"config.showHandle ? config.handleBackground : 'transparent'\"\r\n              [attr.stroke-width]=\"config.showHandle ? config.handleBorderWidth : 0\"\r\n              [attr.stroke]=\"config.showHandle ? config.handleBorderColor : 'transparent'\" (mousedown)=\"startDrag()\"\r\n              (touchstart)=\"startDrag()\" />\r\n          }\r\n          <!-- arc progress stroke - dual handle for range -->\r\n          @if (config.isRangeMode) {\r\n            <path [attr.d]=\"getRangeArcPath()\" [attr.stroke]=\"progressColor\"\r\n              [attr.stroke-width]=\"config.strokeWidth\" fill=\"none\" stroke-linecap=\"round\" />\r\n          }\r\n          <!-- arc dual handle - start -->\r\n          @if (config.isRangeMode) {\r\n            <circle [attr.cx]=\"getHandlePosition(config.rangeStartValue).x\"\r\n              [attr.cy]=\"getHandlePosition(config.rangeStartValue).y\" [attr.r]=\"getRadius()\"\r\n              [attr.fill]=\"config.handleBackground\" [attr.stroke-width]=\"config.handleBorderWidth\"\r\n              [attr.stroke]=\"config.handleBorderColor\" (mousedown)=\"onHandleMouseDown($event, 'start')\" />\r\n          }\r\n          <!-- arc dual handle - end -->\r\n          @if (config.isRangeMode) {\r\n            <circle [attr.cx]=\"getHandlePosition(config.rangeEndValue).x\"\r\n              [attr.cy]=\"getHandlePosition(config.rangeEndValue).y\" [attr.r]=\"getRadius()\"\r\n              [attr.fill]=\"config.handleBackground\" [attr.stroke-width]=\"config.handleBorderWidth\"\r\n              [attr.stroke]=\"config.handleBorderColor\" (mousedown)=\"onHandleMouseDown($event, 'end')\" />\r\n          }\r\n        </ng-container>\r\n      }\r\n      <!-- horizontal line -->\r\n      @case ('horizontal') {\r\n        <ng-container>\r\n          <line #horizontalLine [attr.x1]=\"config.strokeWidth\" [attr.x2]=\"config.size\" [attr.y1]=\"config.strokeWidth + 10\"\r\n            [attr.y2]=\"config.strokeWidth + 10\" [attr.stroke]=\"config.strokeBackground\"\r\n            [attr.stroke-width]=\"config.strokeWidth\" [attr.line-cap]=\"config.roundedCorner ? 'round' : ''\" />\r\n          <!-- progress for horizontal line -->\r\n          <line [attr.x1]=\"getHorizontalLineStartX()\" [attr.x2]=\"getHorizontalLineEndX()\"\r\n            [attr.y1]=\"config.strokeWidth + 10\" [attr.y2]=\"config.strokeWidth + 10\" [attr.stroke]=\"progressColor\"\r\n            [attr.stroke-width]=\"config.strokeWidth\" />\r\n          <!-- handle for horizontal line -->\r\n          @if (!config.isRangeMode) {\r\n            <rect [attr.x]=\"getHorizontalHandleX(value)\"\r\n              [attr.y]=\"config.strokeWidth + 10 - getRadius()-1\" [attr.width]=\"config.strokeWidth\"\r\n              [attr.height]=\"config.strokeWidth\"\r\n              [attr.fill]=\"config.handleBackground ? config.handleBackground : progressColor\" (mousedown)=\"startDrag()\"\r\n              (touchstart)=\"startDrag()\" />\r\n          }\r\n        </ng-container>\r\n      }\r\n      <!-- vertical line -->\r\n      @case ('vertical') {\r\n        <ng-container>\r\n          <line #verticalLine [attr.y1]=\"config.strokeWidth/4\" [attr.y2]=\"config.size/4\" [attr.x1]=\"config.strokeWidth + 10\"\r\n            [attr.x2]=\"config.strokeWidth + 10\" [attr.stroke]=\"config.strokeBackground\"\r\n            [attr.stroke-width]=\"config.strokeWidth/4\" [attr.line-cap]=\"config.roundedCorner ? 'round' : ''\" />\r\n          <!-- progress for vertical line -->\r\n          <line [attr.y1]=\"getVerticalLineStartY()/4\" [attr.y2]=\"config.size/4\" [attr.x1]=\"config.strokeWidth + 10\"\r\n            [attr.x2]=\"config.strokeWidth + 10\" [attr.stroke]=\"progressColor\" [attr.stroke-width]=\"config.strokeWidth/4\" />\r\n          <!-- Handle for vertical line -->\r\n          @if (!config.isRangeMode) {\r\n            <rect [attr.y]=\"getVerticalHandleY(value)/4\" [attr.x]=\"config.strokeWidth + 7.5\"\r\n              [attr.width]=\"config.strokeWidth/4\" [attr.height]=\"config.strokeWidth/4\"\r\n              [attr.fill]=\"config.handleBackground ? config.handleBackground : progressColor\" (mousedown)=\"startDrag()\"\r\n              (touchstart)=\"startDrag()\" />\r\n          }\r\n        </ng-container>\r\n      }\r\n    }\r\n  </svg>\r\n\r\n  <!-- tooltip -->\r\n  @if (config.enableTooltip && !config.isRangeMode) {\r\n    <div class=\"tooltip\" [class.show]=\"showTooltip\"\r\n      [style.left.px]=\"tooltipX\" [style.top.px]=\"tooltipY\">\r\n      {{ value}}\r\n    </div>\r\n  }\r\n\r\n  <!-- progress value -->\r\n  <div class=\"progress-value {{config.knobType}}\" [style.maxWidth.px]=\"config.size * 2 - 50\"\r\n    [style.color]=\"config.valueColor\" [style.fontSize.px]=\"config.valueSize\" [style.fontWeight]=\"config.valueWeight\"\r\n    [style.cursor]=\"(config.readOnly || config.disabled) ? 'not-allowed' : ''\" [class.disabled]=\"config.disabled\"\r\n    [class.read-only]=\"config.readOnly\" title=\"{{config.valuePrefix +''+value+''+config.valueSuffix}}\">\r\n    @if (!config.isRangeMode) {\r\n      <span class=\"value-prefix\">{{config.valuePrefix}}</span>\r\n      <span class=\"value\">{{ value }}</span>\r\n      <span class=\"value-suffix\">{{config.valueSuffix}}</span>\r\n    }\r\n    @if (config.isRangeMode) {\r\n      <span class=\"value\">{{config.rangeStartValue}} : {{config.rangeEndValue}}</span>\r\n    }\r\n  </div>\r\n\r\n  <!-- increment-decrement button -->\r\n  @if (!config.isRangeMode && config.showButtons) {\r\n    <div class=\"arc-buttons\">\r\n      <button mat-mini-fab color=\"secondary\" (click)=\"decrement()\" [disabled]=\"config.disabled || config.readOnly\" (keydown)=\"onKeyDown($event)\"\r\n        [attr.aria-label]=\"getLabel('decrementButton')\">\r\n        <mat-icon>remove</mat-icon>\r\n      </button>\r\n      <button mat-mini-fab color=\"secondary\" (click)=\"increment()\" [disabled]=\"config.disabled || config.readOnly\" (keydown)=\"onKeyDown($event)\"\r\n        [attr.aria-label]=\"getLabel('incrementButton')\">\r\n        <mat-icon>add</mat-icon>\r\n      </button>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".knob-container{position:relative;padding-bottom:10px}svg{width:100%;height:100%;outline:none}.progress-value{left:50%;font-size:24px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%)}.progress-value.arc{position:absolute;top:45%}.progress-value.horizontal,.progress-value.vertical{position:relative;display:flex;justify-content:center;align-items:center;padding-top:20px}.handle{cursor:pointer}.disabled{opacity:.6;pointer-events:none}.read-only{opacity:.8}.arc-buttons{display:flex;justify-content:center;gap:1rem;margin-top:-10px}.arc-buttons button{padding:6px;width:35px;height:35px;font-size:1rem;cursor:pointer;border:none;border-radius:4px;transition:background .2s ease;box-shadow:0 0 1px 1px #ddd!important}::ng-deep .mat-mdc-mini-fab:not(.mdc-fab--extended) .mdc-fab__ripple{border-radius:0!important;-webkit-border-radius:0!important;-moz-border-radius:0!important;-ms-border-radius:0!important;-o-border-radius:0!important}.arc-buttons button:disabled{opacity:.6;cursor:not-allowed}.tooltip{position:absolute;background:#333;color:#fff;padding:4px 8px;border-radius:4px;font-size:12px;pointer-events:none;white-space:nowrap;transform:translate(-50%,-100%);opacity:0;transition:opacity .3s ease}.tooltip.show{opacity:1}.main-path{transition:all 1s ease;-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-ms-transition:all 1s ease;-o-transition:all 1s ease}.hover-animate:hover .main-path{filter:url(#glow);-webkit-filter:url(#glow)}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { bgArcRef: [{
+                type: ViewChild,
+                args: ['bgArc']
+            }], progressArcRef: [{
+                type: ViewChild,
+                args: ['progressArc']
+            }], handleRef: [{
+                type: ViewChild,
+                args: ['handle']
+            }], horizontalLineRef: [{
+                type: ViewChild,
+                args: ['horizontalLine']
+            }], verticalLineRef: [{
+                type: ViewChild,
+                args: ['verticalLine']
+            }], rucEvent: [{
+                type: Output
+            }], customTheme: [{
+                type: Input
+            }], rucInputData: [{
+                type: Input
+            }], stopDrag: [{
+                type: HostListener,
+                args: ['window:mouseup']
+            }, {
+                type: HostListener,
+                args: ['window:touchend']
+            }], onMove: [{
+                type: HostListener,
+                args: ['window:mousemove', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['window:touchmove', ['$event']]
+            }] } });
+
+;
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RuclibKnobComponent };
+//# sourceMappingURL=ruc-lib-knob.mjs.map