@ruc-lib/knob 2.0.0

package/README.md

@@ -0,0 +1,108 @@
+# ruclib-knob
+
+A component for creating a custom knob with different shapes like arc, vertical slider & horizontal slider where user can adjust the value by sliding a handle on arc or by sliding a handle on vertical or horizonatl slider.
+
+# Features
+
+- User is allowed to add the knob of their choise from any of these: Arc, Vertical or Horizontal slider.
+- User is allowed to adjust the width (stroke) of the arc or slider line.
+- User is allowed to set size, color and width of the knob.
+- User is allowed to set the font-size, weight and color of value text.
+- User is allowed to set min and max value of range.
+- User is allowed to custom text before and after the value.
+- User is allowed to toggle the visibility of custom buttons to increment and decrement the value.
+- User is allowed to toggle the readonly and disabled mode.
+- User is allowed to toggle the visibility of tooltip.
+- User is allowed to adjust the value by using arrow keys of keyboard.
+- User is allowed to do some actions on these events onBlur, onFocus, onChange, onDragStart & onDragEnd.
+
+
+# Installation guide
+
+# Install complete library
+
+`npm install @uxpractice/ruc-lib`
+
+# Install individual component
+
+If users only need the knob component, they can install it separately
+`npm install @ruc-lib/knob`
+
+# Usage
+
+here path of the scss file is subject to change as per choice of the installation
+
+for library
+`@import "../node_modules/@ruc-lib/knob/lib/knob.scss";`
+
+for seperate package
+`@import "../node_modules/@uxpractice/ruc-lib/knob/lib/knob.scss";`
+
+# import required modules
+
+for library
+`import { RuclibKnobModule } from '@uxpractice/ruc-lib/knob';`
+
+for seperate package
+`import { RuclibKnobModule } from '@ruc-lib/knob';`
+
+# use component selector
+
+```
+<uxp-ruclib-knob [rucInputData]="knobConfig" [customTheme]="customTheme"
+  (rucEvent)="passEvent($event)"></uxp-ruclib-knob>
+```
+
+
+# Input and Output
+
+# Inputs
+rucInputData -> It is the configuration input to configure the knob
+
+customTheme -> It is the name of the theme.
+
+# Output
+
+rucEvent -> is the event which will be fired when any change is made in knob component
+
+# rucInputData (sample object)
+
+# Detail definition of the each property can be found in type definition file.
+
+ ```
+knobConfig = {
+    min:<number> 0,
+    max:<number> 100,
+    step:<number> 1,
+    size:<number> 150,
+    valueColor:<string> '',
+    strokeBackground:<string> 'lightblue',
+    progressBackground: <string | string[]> 'blue', // 'green' |  ['green'] | ['red', 'blue', 'green', 'black', 'orange'],
+    strokeWidth:<number> 15,
+    valueSize:<number> 20,
+    valueWeight:<string> 'normal',
+    showHandle:<boolean> true,
+    handleBackground:<string> 'lightblue',
+    handleBorderColor:<string> 'blue',
+    handleBorderWidth:<number> 4,
+    roundedCorner:<boolean> true,
+    valuePrefix:<string> '',
+    valueSuffix:<string> '',
+    readOnly:<boolean> false,
+    disabled:<boolean> false,
+    enableTooltip:<boolean> false,
+    animateOnHover:<boolean> false,
+    isRangeMode:<boolean> false,
+    rangeStartValue:<number> 25,
+    rangeEndValue:<number> 75,
+    showButtons:<boolean> false,
+    knobType:<'horizontal' | 'vertical' | 'arc'> 'arc' // 'horizontal' | 'vertical' | 'arc'
+  };
+```
+
+
+# Contribution
+Contributions are welcome! Feel free to open issues or pull requests for any enhancements or fixes.
+
+# Acknowledgements
+Thank you for choosing the Knob Component Library. If you have any feedback or suggestions, please let us know!

package/esm2020/index.mjs

@@ -0,0 +1,4 @@
+export * from './lib/ruclib-knob.module';
+export * from './lib/ruclib-knob/ruclib-knob.component';
+export * from './models/knob.interface';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9saWJzL3J1Y2xpYi9rbm9iL3NyYy9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxjQUFjLDBCQUEwQixDQUFDO0FBQ3pDLGNBQWMseUNBQXlDLENBQUM7QUFDeEQsY0FBYyx5QkFBeUIsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCAqIGZyb20gJy4vbGliL3J1Y2xpYi1rbm9iLm1vZHVsZSc7XHJcbmV4cG9ydCAqIGZyb20gJy4vbGliL3J1Y2xpYi1rbm9iL3J1Y2xpYi1rbm9iLmNvbXBvbmVudCc7XHJcbmV4cG9ydCAqIGZyb20gJy4vbW9kZWxzL2tub2IuaW50ZXJmYWNlJztcclxuIl19