Refactor #3922 - For Knob

components/lib/knob/Knob.d.ts

@@ -9,6 +9,79 @@
  */
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type KnobPassThroughOptionType = KnobPassThroughAttributes | ((options: KnobPassThroughMethodOptions) => KnobPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface KnobPassThroughMethodOptions {
+    props: KnobProps;
+    state: KnobState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link KnobProps.pt}
+ */
+export interface KnobPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: KnobPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the svg's DOM element.
+     */
+    svg?: KnobPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the range's DOM element.
+     */
+    range?: KnobPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the value' DOM element.
+     */
+    value?: KnobPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the label's DOM element.
+     */
+    label?: KnobPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface KnobPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in Knob component.
+ */
+export interface KnobState {
+    /**
+     * Current radius state as a number.
+     * @defaultValue 40
+     */
+    radius: number;
+    /**
+     * Current middle x axis state as a number.
+     * @defaultValue 50
+     */
+    midX: number;
+    /**
+     * Current middle y axis state as a number.
+     * @defaultValue 50
+     */
+    midY: number;
+    /**
+     * Current minimum radian state as a number.
+     */
+    minRadians: number;
+    /**
+     * Current maximum radian state as a number.
+     */
+    maxRadians: number;
+}
+
 /**
  * Defines valid properties in Knob component.
  */
@@ -90,6 +163,11 @@ export interface KnobProps {
      * Used to define a string that labels the element.
      */
     'aria-label'?: string | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {KnobPassThroughOptions}
+     */
+    pt?: KnobPassThroughOptions;
 }
 
 /**