## Timepicker

TimePicker is a component allowing users to select times using either manual entry or a dropdown.
Demo
Required Imports
import { InputTimeFieldModule } from 'nextsapien-component-lib';
Input and Output Properties

Type | Name | Description | Default | Required
--- | --- | --- | --- | ---
Input | startDate | The date from which the time slots are generated. | two days from today | false
Input | interval | The interval in minutes between time slots. | 30 minutes | false
Input | displaySlotTime | Whether to display the time difference between slots and the starting time. | n/a | false
Input | fromTime | The starting time used to generate slots relative to this value. | n/a | false
Input | format | The time format for displaying time slots, such as 'hh:mm aa'. | hh:mm | false
Input | label | The label for the input field. | n/a | false
Input | readonly | Disables the input if true. | n/a | false
Input | showIcon | Determines if an icon is shown beside the input field. | n/a | false
Input | disabled | Disables the component entirely if true. | n/a | false
Output | focusEvent | Emits a boolean value when the input field gains or loses focus. | n/a | false
Public | timeSlots | An array of generated time slots based on the provided start date and interval. | n/a | n/a
Public | filteredTimeSlots | The filtered list of time slots used for display in the dropdown. | n/a | n/a
Public | control | A reactive form control used to manage the selected time slot. | n/a | n/a
Public | focused | A flag indicating whether the input field is currently focused. | n/a | n/a

CSS Properties

Name | Description
--- | ---
`--border-radius` | Border radius of input and it's container.
`--input-field-margin` | Margin around input field to separate other content like error messages.
`--label-font-size-floated` | Label font size after floated to top.
`--label-color` | Label text color.
`--label-position-left` | Label position distance from left.
`--label-position-top` | Label position distance from top.
`--label-float-position-top` | Label top position after floated to top.
`--label-padding` | Label padding to make space around.
`--label-font-family` | Font family for label.
`--label-font-style` | Font style for label.
`--label-font-weight` | Font weight for label.
`--label-font-size` | Label font size.
`--label-line-height` | Label line height.
`--input-font-color` | Input text color.
`--input-font-family` | Font family for input field.
`--input-font-size` | Font size for input text.
`--height` | Height of the input field.
`--width` | Width of the input field.
`--input-border` | Border around input field only.
`--input-padding` | Input field space inside.
`--box-shadow` | Input field box shadow.
`--border` | Border around the full component.

Example usage
`{{ codeExample }}`