## Toggle Input

A custom toggle input button component that allows users to toggle a state on or off. The state of the toggle button is controlled by a boolean property and a method is invoked whenever a user clicks the button to change the state.
Demo

Component | Demo
--- | ---
`{{ codeExample0 }}` |
`{{ codeExample1 }}` |
`{{ codeExample2 }}` |
`{{ codeExample3 }}` |
`{{ codeExample4 }}` |
`{{ code5example }}` |

Required Imports
import { ToggleModule } from 'nextsapien-component-lib';
Input and Output Properties

Type | Name | Description | Required
--- | --- | --- | ---
Input | disabled | Determines if the toggle input button is disabled, preventing user interaction. | false
Input | toggleState | The current state of the toggle input button, which can be either true (on) or false (off). | false
Input | variant | Defines the style variant of the toggle input button, using values from the `ToggleVariants` enum. | false
Input | left | Configuration for the left graphic (icon or image) in the toggle input button, using the `ToggleGraphics` interface. | false
Input | right | Configuration for the right graphic (icon or image) in the toggle input button, using the `ToggleGraphics` interface. | false
Input | thumbImg | Specifies an image to display on the thumb or knob of the toggle input button. | false
Output | toggleStateChange | Emits an event whenever the state of the toggle input button changes, passing the new state (true or false). | false
Public | _toggleState | Stores the current internal state of the toggle input button (true or false). | n/a
Public | currentToggleStatus | Keeps track of the toggle's animation status using the `ToggleStatuses` enum. | n/a
Public | circleMask | An object containing unique identifiers for the toggle's SVG masks to differentiate multiple toggle instances. | n/a

CSS Properties

Name | Type | Description | Example
--- | --- | --- | ---
--knob-color | fill | This is a property used that sets the knobs color to a desired value. | white
--toggle-input-background-off | background-color | This is a property used that sets the toggle button background color to a desired value when the button is off. | black
--toggle-input-background-on | background-color | This is a property used that sets the toggle button background color to a desired value when the button is on. | red
--toggle-input-box-shadow-off | box-shadow | This is a property used that sets the toggle button box-shadow color to a desired value when the button is off. | 0 0 10px blue
--toggle-input-box-shadow-on | box-shadow | This is a property used that sets the toggle button box-shadow color to a desired value when the button is on. | 0 0 10px red
--lib-toggle-input-anime-delay | animation-duration | This is a property that sets the animation delay of toggle | 400ms
left.enable | @Input() [left] | Left side image/text toggle input enabled state value | `assets/icons/enable.svg` or `On`
left.disable | @Input() [left] | Left side image/text toggle input disabled state value | `assets/icons/disable.svg` or `Off`
right.enable | @Input() [right] | Right side image/text toggle input enabled state value | `assets/icons/enable.svg` or `On`
right.disable | @Input() [right] | Right side image/text toggle input disabled state value | `assets/icons/disable.svg` or `Off`
thumbImg | @Input() [thumbImg] | thumb/knob image | assets/icons/knob.svg