cmat 0.0.87 → 0.0.88

package/fesm2022/cmat-components-knob-input.mjs

@@ -1,7 +1,7 @@
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { NgStyle } from '@angular/common';
 import * as i0 from '@angular/core';
-import { EventEmitter, signal, inject, DOCUMENT, Renderer2, ElementRef, HostListener, Input, Output, HostBinding, ViewChild, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
+import { viewChild, input, output, signal, inject, DOCUMENT, Renderer2, ElementRef, HostListener, Input, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
 import { NgControl } from '@angular/forms';
 import { MatFormFieldControl } from '@angular/material/form-field';
 import { isNil } from 'lodash-es';
@@ -10,39 +10,118 @@ import { Subject } from 'rxjs';
 /* eslint-disable @typescript-eslint/member-ordering */
 let NEXT_ID = 0;
 class CmatKnobInputComponent {
+    get value() {
+        return this._valueSignal() ?? this.min();
+    }
+    set value(val) {
+        const current = this._valueSignal();
+        if (val !== current) {
+            this._valueSignal.set(val);
+            this.stateChanges.next();
+            this._onModelChange(val);
+            this.valueChange.emit(val);
+        }
+    }
+    get placeholder() {
+        return this._placeholderSignal();
+    }
+    set placeholder(plh) {
+        this._placeholderSignal.set(plh);
+        this.stateChanges.next();
+    }
+    get required() {
+        return this._requiredSignal();
+    }
+    set required(req) {
+        this._requiredSignal.set(coerceBooleanProperty(req));
+        this.stateChanges.next();
+    }
+    get disabled() {
+        if (!isNil(this.ngControl?.disabled)) {
+            return this.ngControl.disabled;
+        }
+        return this._disabledSignal();
+    }
+    set disabled(val) {
+        const coerced = coerceBooleanProperty(val);
+        this._disabledSignal.set(coerced);
+        if (this._focused && coerced) {
+            this._focused = false;
+        }
+        this.stateChanges.next();
+    }
+    get empty() {
+        return this._valueSignal() == null;
+    }
+    get errorState() {
+        if (this.ngControl == null)
+            return false;
+        return (this.touched() && !!this.ngControl?.invalid) ?? false;
+    }
+    get shouldLabelFloat() {
+        return this._focused || !this.empty;
+    }
+    get focused() {
+        return this._focused;
+    }
     constructor() {
+        this.knobElementRef = viewChild('knob', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "knobElementRef" }] : /* istanbul ignore next */ []));
+        this.valueColor = input('var(--cmat-primary)', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "valueColor" }] : /* istanbul ignore next */ []));
+        this.rangeColor = input('var(--cmat-border)', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rangeColor" }] : /* istanbul ignore next */ []));
+        this.textColor = input('var(--cmat-text-default)', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "textColor" }] : /* istanbul ignore next */ []));
+        this.valueTemplate = input('{value}', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "valueTemplate" }] : /* istanbul ignore next */ []));
+        this.name = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "name" }] : /* istanbul ignore next */ []));
+        this.size = input(100, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        this.step = input(1, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
+        this.min = input(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+        this.max = input(100, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+        this.strokeWidth = input(14, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "strokeWidth" }] : /* istanbul ignore next */ []));
+        this.showValue = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showValue" }] : /* istanbul ignore next */ []));
+        this.valueChange = output();
         this.id = `cmat-knob-input-${NEXT_ID++}`;
-        this.valueColor = 'var(--cmat-primary)';
-        this.rangeColor = 'var(--cmat-border)';
-        this.textColor = 'var(--cmat-text-default)';
-        this.valueTemplate = '{value}';
-        this.size = 100;
-        this.step = 1;
-        this.min = 0;
-        this.max = 100;
-        this.strokeWidth = 14;
-        this.showValue = true;
-        this.valueChange = new EventEmitter();
+        this.stateChanges = new Subject();
+        this._valueSignal = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_valueSignal" }] : /* istanbul ignore next */ []));
+        this._placeholderSignal = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_placeholderSignal" }] : /* istanbul ignore next */ []));
+        this._requiredSignal = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_requiredSignal" }] : /* istanbul ignore next */ []));
+        this._disabledSignal = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_disabledSignal" }] : /* istanbul ignore next */ []));
+        this._focused = false;
+        this.touched = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+        this.refreshVersion = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "refreshVersion" }] : /* istanbul ignore next */ []));
         this.radius = 40;
         this.midX = 50;
         this.midY = 50;
         this.minRadians = (4 * Math.PI) / 3;
         this.maxRadians = -Math.PI / 3;
-        this.stateChanges = new Subject();
-        this.focused = false;
-        this.touched = false;
-        this.refreshVersion = signal(0, ...(ngDevMode ? [{ debugName: "refreshVersion" }] : /* istanbul ignore next */ []));
         this.ngControl = inject(NgControl, { optional: true, self: true });
         this._document = inject(DOCUMENT);
         this._renderer = inject(Renderer2);
         this._el = inject(ElementRef);
-        this._placeholder = '';
-        this._required = false;
-        this._disabled = false;
+        this.windowMouseMoveListener = null;
+        this.windowMouseUpListener = null;
+        this.windowTouchMoveListener = null;
+        this.windowTouchEndListener = null;
+        // --- CVA Internal Functions ---
         this._onModelChange = () => {
             // Intentionally left blank
         };
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
         this._onTouchedChange = () => { };
         if (this.ngControl != null) {
             this.ngControl.valueAccessor = this;
@@ -50,51 +129,54 @@ class CmatKnobInputComponent {
     }
     ngOnDestroy() {
         this.stateChanges.complete();
+        this._cleanupListeners();
+    }
+    _cleanupListeners() {
+        if (this.windowMouseMoveListener)
+            this.windowMouseMoveListener();
+        if (this.windowMouseUpListener)
+            this.windowMouseUpListener();
+        if (this.windowTouchMoveListener)
+            this.windowTouchMoveListener();
+        if (this.windowTouchEndListener)
+            this.windowTouchEndListener();
+        this.windowMouseMoveListener = null;
+        this.windowMouseUpListener = null;
+        this.windowTouchMoveListener = null;
+        this.windowTouchEndListener = null;
     }
-    get placeholder() {
-        return this._placeholder;
-    }
-    set placeholder(value) {
-        this._placeholder = value;
+    writeValue(value) {
+        this._valueSignal.set(value ?? this.min());
+        this.refreshVersion.update(v => v + 1);
         this.stateChanges.next();
     }
-    get value() {
-        return this._value ?? this.min;
-    }
-    set value(value) {
-        if (value !== this.value) {
-            this._value = value;
-            this.stateChanges.next();
-            this._onModelChange(value);
-        }
-    }
-    get empty() {
-        return !this._value;
-    }
-    get errorState() {
-        if (this.ngControl == null)
-            return false;
-        return (this.touched && this.ngControl?.invalid) ?? false;
+    registerOnChange(fn) {
+        this._onModelChange = fn;
     }
-    get shouldLabelFloat() {
-        return this.focused || !this.empty;
+    registerOnTouched(fn) {
+        this._onTouchedChange = fn;
     }
-    get required() { return this._required; }
-    set required(value) {
-        this._required = coerceBooleanProperty(value);
+    setDisabledState(val) {
+        this.disabled = val;
+        this.refreshVersion.update(v => v + 1);
         this.stateChanges.next();
     }
-    get disabled() {
-        if (!isNil(this.ngControl?.disabled)) {
-            return this.ngControl.disabled;
+    setDescribedByIds(ids) {
+        this.userAriaDescribedBy = ids.length ? ids.join(' ') : undefined;
+        const knobEl = this.knobElementRef()?.nativeElement;
+        if (knobEl) {
+            if (ids.length) {
+                knobEl.setAttribute('aria-describedby', ids.join(' '));
+            }
+            else {
+                knobEl.removeAttribute('aria-describedby');
+            }
         }
-        return this._disabled;
+        this.stateChanges.next();
     }
-    set disabled(value) {
-        this._disabled = coerceBooleanProperty(value);
-        if (this.focused) {
-            this.focused = false;
-            this.stateChanges.next();
+    onContainerClick() {
+        if (!this.focused) {
+            this.knobElementRef()?.nativeElement.focus();
         }
     }
     onKeyDown(event) {
@@ -120,12 +202,12 @@ class CmatKnobInputComponent {
                 }
                 case 'Home': {
                     keyboardEvent.preventDefault();
-                    this.updateModelValue(this.min);
+                    this.updateModelValue(this.min());
                     break;
                 }
                 case 'End': {
                     keyboardEvent.preventDefault();
-                    this.updateModelValue(this.max);
+                    this.updateModelValue(this.max());
                     break;
                 }
                 case 'PageUp': {
@@ -143,84 +225,63 @@ class CmatKnobInputComponent {
     }
     onMouseDown(event) {
         if (!this.disabled) {
-            const window = this._document.defaultView ?? 'window';
-            this.windowMouseMoveListener = this._renderer.listen(window, 'mousemove', this.onMouseMove.bind(this));
-            this.windowMouseUpListener = this._renderer.listen(window, 'mouseup', this.onMouseUp.bind(this));
+            this._cleanupListeners();
+            const win = this._document.defaultView ?? window;
+            this.windowMouseMoveListener = this._renderer.listen(win, 'mousemove', this.onMouseMove.bind(this));
+            this.windowMouseUpListener = this._renderer.listen(win, 'mouseup', this.onMouseUp.bind(this));
             event.preventDefault();
         }
     }
     onMouseUp(event) {
         if (!this.disabled) {
-            if (this.windowMouseMoveListener) {
-                this.windowMouseMoveListener();
-                this.windowMouseUpListener = null;
-            }
-            if (this.windowMouseUpListener) {
-                this.windowMouseUpListener();
-                this.windowMouseMoveListener = null;
-            }
+            this._cleanupListeners();
             event.preventDefault();
         }
     }
     onTouchStart(event) {
         if (!this.disabled) {
-            const window = this._document.defaultView ?? 'window';
-            this.windowTouchMoveListener = this._renderer.listen(window, 'touchmove', this.onTouchMove.bind(this));
-            this.windowTouchEndListener = this._renderer.listen(window, 'touchend', this.onTouchEnd.bind(this));
+            this._cleanupListeners();
+            const win = this._document.defaultView ?? window;
+            this.windowTouchMoveListener = this._renderer.listen(win, 'touchmove', this.onTouchMove.bind(this));
+            this.windowTouchEndListener = this._renderer.listen(win, 'touchend', this.onTouchEnd.bind(this));
             event.preventDefault();
         }
     }
     onTouchEnd(event) {
         if (!this.disabled) {
-            if (this.windowTouchMoveListener) {
-                this.windowTouchMoveListener();
-            }
-            if (this.windowTouchEndListener) {
-                this.windowTouchEndListener();
-            }
-            this.windowTouchMoveListener = null;
-            this.windowTouchEndListener = null;
+            this._cleanupListeners();
             event.preventDefault();
         }
     }
-    mapRange(x, inMin, inMax, outMin, outMax) {
-        return ((x - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin;
-    }
-    onClick(event) {
-        if (!this.disabled) {
-            this.updateValue(event.offsetX, event.offsetY);
-        }
-    }
     onFocusIn() {
-        if (!this.focused) {
-            this.focused = true;
+        if (!this._focused) {
+            this._focused = true;
             this.stateChanges.next();
         }
     }
     onFocusOut(event) {
-        if (!this._knobElementRef.nativeElement.contains(event.relatedTarget)) {
-            this.touched = true;
-            this.focused = false;
+        const knobEl = this.knobElementRef()?.nativeElement;
+        // Check if relatedTarget is outside the component
+        if (knobEl &&
+            !knobEl.contains(event.relatedTarget)) {
+            this.touched.set(true);
+            this._focused = false;
             this._onTouchedChange();
             this.stateChanges.next();
         }
     }
-    setDescribedByIds(ids) {
-        if (ids.length) {
-            this._knobElementRef?.nativeElement.setAttribute('aria-describedby', ids.join(' '));
-        }
-        else {
-            this._knobElementRef?.nativeElement.removeAttribute('aria-describedby');
-        }
+    // --- Logic Methods ---
+    mapRange(x, inMin, inMax, outMin, outMax) {
+        return ((x - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin;
     }
-    onContainerClick() {
-        if (!this.focused) {
-            this._knobElementRef.nativeElement.focus();
+    onClick(event) {
+        if (!this.disabled) {
+            this.updateValue(event.offsetX, event.offsetY);
         }
     }
     updateValue(offsetX, offsetY) {
-        let dx = offsetX - this.size / 2;
-        let dy = this.size / 2 - offsetY;
+        let dx = offsetX - this.size() / 2;
+        let dy = this.size() / 2 - offsetY;
         let angle = Math.atan2(dy, dx);
         let start = -Math.PI / 2 - Math.PI / 6;
         this.updateModel(angle, start);
@@ -228,59 +289,45 @@ class CmatKnobInputComponent {
     updateModel(angle, start) {
         let mappedValue;
         if (angle > this.maxRadians)
-            mappedValue = this.mapRange(angle, this.minRadians, this.maxRadians, this.min, this.max);
+            mappedValue = this.mapRange(angle, this.minRadians, this.maxRadians, this.min(), this.max());
         else if (angle < start)
-            mappedValue = this.mapRange(angle + 2 * Math.PI, this.minRadians, this.maxRadians, this.min, this.max);
+            mappedValue = this.mapRange(angle + 2 * Math.PI, this.minRadians, this.maxRadians, this.min(), this.max());
         else
             return;
-        let newValue = Math.round((mappedValue - this.min) / this.step) * this.step + this.min;
+        let newValue = Math.round((mappedValue - this.min()) / this.step()) * this.step() +
+            this.min();
         this.value = newValue;
-        this._onModelChange(this.value);
-        this.valueChange.emit(this.value);
     }
     onMouseMove(event) {
         if (!this.disabled) {
             this.updateValue(event.offsetX, event.offsetY);
             event.preventDefault();
-            this.refreshVersion.update(value => value + 1);
+            this.refreshVersion.update(v => v + 1);
         }
     }
     onTouchMove(event) {
-        if (!this.disabled && event instanceof TouchEvent && event.touches.length === 1) {
+        if (!this.disabled &&
+            event instanceof TouchEvent &&
+            event.touches.length === 1) {
             const rect = this._el.nativeElement.firstElementChild?.getBoundingClientRect();
             const touch = event.targetTouches.item(0);
             if (touch && rect) {
                 const offsetX = touch.clientX - rect.left;
                 const offsetY = touch.clientY - rect.top;
                 this.updateValue(offsetX, offsetY);
-                this.refreshVersion.update(value => value + 1);
+                this.refreshVersion.update(v => v + 1);
             }
         }
     }
     updateModelValue(newValue) {
-        if (newValue > this.max)
-            this.value = this.max;
-        else if (newValue < this.min)
-            this.value = this.min;
+        if (newValue > this.max())
+            this.value = this.max();
+        else if (newValue < this.min())
+            this.value = this.min();
         else
             this.value = newValue;
-        this._onModelChange(this.value);
-        this.valueChange.emit(this.value);
-    }
-    writeValue(value) {
-        this.value = value ?? this.min;
-        this.refreshVersion.update(value => value + 1);
-    }
-    registerOnChange(fn) {
-        this._onModelChange = fn;
-    }
-    registerOnTouched(fn) {
-        this._onTouchedChange = fn;
-    }
-    setDisabledState(val) {
-        this.disabled = val;
-        this.refreshVersion.update(value => value + 1);
     }
+    // --- SVG Path Calculations ---
     rangePath() {
         return `M ${this.minX()} ${this.minY()} A ${this.radius} ${this.radius} 0 1 1 ${this.maxX()} ${this.maxY()}`;
     }
@@ -288,13 +335,13 @@ class CmatKnobInputComponent {
         return `M ${this.zeroX()} ${this.zeroY()} A ${this.radius} ${this.radius} 0 ${this.largeArc()} ${this.sweep()} ${this.valueX()} ${this.valueY()}`;
     }
     zeroRadians() {
-        if (this.min > 0 && this.max > 0)
-            return this.mapRange(this.min, this.min, this.max, this.minRadians, this.maxRadians);
+        if (this.min() > 0 && this.max() > 0)
+            return this.mapRange(this.min(), this.min(), this.max(), this.minRadians, this.maxRadians);
         else
-            return this.mapRange(0, this.min, this.max, this.minRadians, this.maxRadians);
+            return this.mapRange(0, this.min(), this.max(), this.minRadians, this.maxRadians);
     }
     valueRadians() {
-        return this.mapRange(this.value, this.min, this.max, this.minRadians, this.maxRadians);
+        return this.mapRange(this.value, this.min(), this.max(), this.minRadians, this.maxRadians);
     }
     minX() {
         return this.midX + Math.cos(this.minRadians) * this.radius;
@@ -327,54 +374,25 @@ class CmatKnobInputComponent {
         return this.valueRadians() > this.zeroRadians() ? 0 : 1;
     }
     valueToDisplay() {
-        return this.valueTemplate.replace('{value}', this.value.toString());
+        return this.valueTemplate().replace('{value}', this.value.toString());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatKnobInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: CmatKnobInputComponent, isStandalone: true, selector: "cmat-knob-input", inputs: { id: "id", valueColor: "valueColor", rangeColor: "rangeColor", textColor: "textColor", valueTemplate: "valueTemplate", name: "name", size: "size", step: "step", min: "min", max: "max", strokeWidth: "strokeWidth", showValue: "showValue", placeholder: "placeholder", value: "value", required: "required", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "keydown": "onKeyDown($event)", "mousedown": "onMouseDown($event)", "mouseup": "onMouseUp($event)", "touchstart": "onTouchStart($event)", "touchend": "onTouchEnd($event)" }, properties: { "attr.id": "this.id" } }, providers: [
-            { provide: MatFormFieldControl, useExisting: CmatKnobInputComponent }
-        ], viewQueries: [{ propertyName: "_knobElementRef", first: true, predicate: ["knob"], descendants: true }], exportAs: ["cmatKnobInput"], ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/no-inline-styles -->\r\n<div #knob [attr.data-refresh]=\"refreshVersion()\" [class.cmat-knob-disabled]=\"disabled\" (focusin)=\"onFocusIn()\" (focusout)=\"onFocusOut($event)\">\r\n    <svg  viewBox=\"0 0 100 100\" role=\"slider\" [style.width]=\"size + 'px'\" [style.height]=\"size + 'px'\"\r\n        [attr.aria-valuemin]=\"min\" [attr.aria-valuemax]=\"max\" [attr.aria-valuenow]=\"value\"\r\n        [attr.tabindex]=\"disabled ? -1 : 0\" (click)=\"onClick($event)\" (keydown.enter)=\"onKeyDown($event)\" (keydown.space)=\"onKeyDown($event)\">\r\n        <path class=\"knob-range\" [attr.d]=\"rangePath()\" [attr.stroke-width]=\"strokeWidth\" [attr.stroke]=\"rangeColor\">\r\n        </path>\r\n        <path class=\"knob-value\" [attr.d]=\"valuePath()\" [attr.stroke-width]=\"strokeWidth\" [attr.stroke]=\"valueColor\">\r\n        </path>\r\n        @if(showValue){\r\n        <text text-anchor=\"middle\" class=\"knob-text\" [attr.x]=\"50\" [attr.y]=\"57\" [attr.fill]=\"textColor\"\r\n            [attr.name]=\"name\">{{ valueToDisplay() }}</text>\r\n        }\r\n    </svg>\r\n</div>\r\n\r\n", styles: ["cmat-knob-input .knob-range{fill:none;transition:stroke .1s ease-in}cmat-knob-input .knob-value{animation-name:dash-frame;animation-fill-mode:forwards;fill:none}cmat-knob-input .knob-text{font-size:1.3rem;text-align:center}cmat-knob-input .cmat-knob-disabled{opacity:.6}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatKnobInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: CmatKnobInputComponent, isStandalone: true, selector: "cmat-knob-input", inputs: { valueColor: { classPropertyName: "valueColor", publicName: "valueColor", isSignal: true, isRequired: false, transformFunction: null }, rangeColor: { classPropertyName: "rangeColor", publicName: "rangeColor", isSignal: true, isRequired: false, transformFunction: null }, textColor: { classPropertyName: "textColor", publicName: "textColor", isSignal: true, isRequired: false, transformFunction: null }, valueTemplate: { classPropertyName: "valueTemplate", publicName: "valueTemplate", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { listeners: { "keydown": "onKeyDown($event)", "mousedown": "onMouseDown($event)", "mouseup": "onMouseUp($event)", "touchstart": "onTouchStart($event)", "touchend": "onTouchEnd($event)" }, properties: { "attr.id": "id" } }, providers: [
+            { provide: MatFormFieldControl, useExisting: CmatKnobInputComponent },
+        ], viewQueries: [{ propertyName: "knobElementRef", first: true, predicate: ["knob"], descendants: true, isSignal: true }], exportAs: ["cmatKnobInput"], ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/no-inline-styles -->\r\n<div\r\n  #knob\r\n  tabindex=\"-1\"\r\n  [attr.data-refresh]=\"refreshVersion()\"\r\n  [class.cmat-knob-disabled]=\"disabled\"\r\n  (focusin)=\"onFocusIn()\"\r\n  (focusout)=\"onFocusOut($event)\"\r\n>\r\n  <svg\r\n    viewBox=\"0 0 100 100\"\r\n    role=\"slider\"\r\n    [style.width]=\"size() + 'px'\"\r\n    [style.height]=\"size() + 'px'\"\r\n    [attr.aria-valuemin]=\"min()\"\r\n    [attr.aria-valuemax]=\"max()\"\r\n    [attr.aria-valuenow]=\"value\"\r\n    [attr.tabindex]=\"disabled ? -1 : 0\"\r\n    (click)=\"onClick($event)\"\r\n    (keydown.enter)=\"onKeyDown($event)\"\r\n    (keydown.space)=\"onKeyDown($event)\"\r\n  >\r\n    <path\r\n      class=\"knob-range\"\r\n      [attr.d]=\"rangePath()\"\r\n      [attr.stroke-width]=\"strokeWidth()\"\r\n      [attr.stroke]=\"rangeColor()\"\r\n    ></path>\r\n    <path\r\n      class=\"knob-value\"\r\n      [attr.d]=\"valuePath()\"\r\n      [attr.stroke-width]=\"strokeWidth()\"\r\n      [attr.stroke]=\"valueColor()\"\r\n    ></path>\r\n    @if (showValue()) {\r\n      <text\r\n        text-anchor=\"middle\"\r\n        class=\"knob-text\"\r\n        [attr.x]=\"50\"\r\n        [attr.y]=\"57\"\r\n        [attr.fill]=\"textColor()\"\r\n        [attr.name]=\"name()\"\r\n      >\r\n        {{ valueToDisplay() }}\r\n      </text>\r\n    }\r\n  </svg>\r\n</div>", styles: ["cmat-knob-input .knob-range{fill:none;transition:stroke .1s ease-in}cmat-knob-input .knob-value{animation-name:dash-frame;animation-fill-mode:forwards;fill:none}cmat-knob-input .knob-text{font-size:1.3rem;text-align:center}cmat-knob-input .cmat-knob-disabled{opacity:.6}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatKnobInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatKnobInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-knob-input', providers: [
-                        { provide: MatFormFieldControl, useExisting: CmatKnobInputComponent }
-                    ], exportAs: 'cmatKnobInput', imports: [NgStyle], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- eslint-disable @angular-eslint/template/no-inline-styles -->\r\n<div #knob [attr.data-refresh]=\"refreshVersion()\" [class.cmat-knob-disabled]=\"disabled\" (focusin)=\"onFocusIn()\" (focusout)=\"onFocusOut($event)\">\r\n    <svg  viewBox=\"0 0 100 100\" role=\"slider\" [style.width]=\"size + 'px'\" [style.height]=\"size + 'px'\"\r\n        [attr.aria-valuemin]=\"min\" [attr.aria-valuemax]=\"max\" [attr.aria-valuenow]=\"value\"\r\n        [attr.tabindex]=\"disabled ? -1 : 0\" (click)=\"onClick($event)\" (keydown.enter)=\"onKeyDown($event)\" (keydown.space)=\"onKeyDown($event)\">\r\n        <path class=\"knob-range\" [attr.d]=\"rangePath()\" [attr.stroke-width]=\"strokeWidth\" [attr.stroke]=\"rangeColor\">\r\n        </path>\r\n        <path class=\"knob-value\" [attr.d]=\"valuePath()\" [attr.stroke-width]=\"strokeWidth\" [attr.stroke]=\"valueColor\">\r\n        </path>\r\n        @if(showValue){\r\n        <text text-anchor=\"middle\" class=\"knob-text\" [attr.x]=\"50\" [attr.y]=\"57\" [attr.fill]=\"textColor\"\r\n            [attr.name]=\"name\">{{ valueToDisplay() }}</text>\r\n        }\r\n    </svg>\r\n</div>\r\n\r\n", styles: ["cmat-knob-input .knob-range{fill:none;transition:stroke .1s ease-in}cmat-knob-input .knob-value{animation-name:dash-frame;animation-fill-mode:forwards;fill:none}cmat-knob-input .knob-text{font-size:1.3rem;text-align:center}cmat-knob-input .cmat-knob-disabled{opacity:.6}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { _knobElementRef: [{
-                type: ViewChild,
-                args: ['knob', { static: false }]
-            }], id: [{
-                type: HostBinding,
-                args: ['attr.id']
-            }, {
-                type: Input
-            }], valueColor: [{
-                type: Input
-            }], rangeColor: [{
-                type: Input
-            }], textColor: [{
-                type: Input
-            }], valueTemplate: [{
-                type: Input
-            }], name: [{
-                type: Input
-            }], size: [{
+                        { provide: MatFormFieldControl, useExisting: CmatKnobInputComponent },
+                    ], exportAs: 'cmatKnobInput', imports: [NgStyle], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        // eslint-disable-next-line @typescript-eslint/naming-convention
+                        '[attr.id]': 'id',
+                    }, template: "<!-- eslint-disable @angular-eslint/template/no-inline-styles -->\r\n<div\r\n  #knob\r\n  tabindex=\"-1\"\r\n  [attr.data-refresh]=\"refreshVersion()\"\r\n  [class.cmat-knob-disabled]=\"disabled\"\r\n  (focusin)=\"onFocusIn()\"\r\n  (focusout)=\"onFocusOut($event)\"\r\n>\r\n  <svg\r\n    viewBox=\"0 0 100 100\"\r\n    role=\"slider\"\r\n    [style.width]=\"size() + 'px'\"\r\n    [style.height]=\"size() + 'px'\"\r\n    [attr.aria-valuemin]=\"min()\"\r\n    [attr.aria-valuemax]=\"max()\"\r\n    [attr.aria-valuenow]=\"value\"\r\n    [attr.tabindex]=\"disabled ? -1 : 0\"\r\n    (click)=\"onClick($event)\"\r\n    (keydown.enter)=\"onKeyDown($event)\"\r\n    (keydown.space)=\"onKeyDown($event)\"\r\n  >\r\n    <path\r\n      class=\"knob-range\"\r\n      [attr.d]=\"rangePath()\"\r\n      [attr.stroke-width]=\"strokeWidth()\"\r\n      [attr.stroke]=\"rangeColor()\"\r\n    ></path>\r\n    <path\r\n      class=\"knob-value\"\r\n      [attr.d]=\"valuePath()\"\r\n      [attr.stroke-width]=\"strokeWidth()\"\r\n      [attr.stroke]=\"valueColor()\"\r\n    ></path>\r\n    @if (showValue()) {\r\n      <text\r\n        text-anchor=\"middle\"\r\n        class=\"knob-text\"\r\n        [attr.x]=\"50\"\r\n        [attr.y]=\"57\"\r\n        [attr.fill]=\"textColor()\"\r\n        [attr.name]=\"name()\"\r\n      >\r\n        {{ valueToDisplay() }}\r\n      </text>\r\n    }\r\n  </svg>\r\n</div>", styles: ["cmat-knob-input .knob-range{fill:none;transition:stroke .1s ease-in}cmat-knob-input .knob-value{animation-name:dash-frame;animation-fill-mode:forwards;fill:none}cmat-knob-input .knob-text{font-size:1.3rem;text-align:center}cmat-knob-input .cmat-knob-disabled{opacity:.6}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { knobElementRef: [{ type: i0.ViewChild, args: ['knob', { isSignal: true }] }], valueColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueColor", required: false }] }], rangeColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeColor", required: false }] }], textColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "textColor", required: false }] }], valueTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueTemplate", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], value: [{
                 type: Input
-            }], step: [{
-                type: Input
-            }], min: [{
-                type: Input
-            }], max: [{
-                type: Input
-            }], strokeWidth: [{
-                type: Input
-            }], showValue: [{
-                type: Input
-            }], valueChange: [{
-                type: Output
             }], placeholder: [{
                 type: Input
-            }], value: [{
-                type: Input
             }], required: [{
                 type: Input
             }], disabled: [{