Time Duration Input

The TimeDurationInputComponent is an Angular component designed for handling time duration inputs in a user-friendly way. It allows users to specify a time duration along with a unit (e.g., minutes or hours). This component emits changes to the selected duration and unit, making it suitable for applications that require precise time input and flexibility in time units.

How to use the component in your app :

1. import the component :

import {TimeDurationInputComponent} from '@tradinos/cms-frontend-form';

1. The selector for component , like it :

<lib-cms-time-duration-input></lib-cms-time-duration-input>

Features

1. Time Unit Selection:

   • Users can choose between predefined time units (e.g., minutes, hours).

2. Dynamic Value Binding:

   • Accepts a TimeDuration object as input and updates the component dynamically.

3. Event-Driven Updates:

   • Emits changes via the valueChange output whenever the time duration or unit is updated.

4. Validation States:

   • Handles disabled and invalid states for seamless integration with forms.

5. Translation Support:

   • Time unit labels are translated dynamically using PrimeNG's translation service.

Inputs

Input	Type	Description	Default Value
value	TimeDuration	The initial time duration object containing the unit (key) and value.	-
disabled	boolean | null	Disables the input when set to true.	null
invalid	boolean	Marks the component as invalid when set to true.	false

This is the TimeDuration type:

{
  key: "m" | "h";
  value: number;
}

For example:

typescript:

{
    key: 'm',//Unit: minutes
    value: 30,//Duration: 30 minutes
  };

  isDisabled = true;//Disable the input
} 
  // Handle changes in the time duration
  onTimeDurationChange(updatedTime: { key: string; value: number }) {
  //add your logic
  }
}

html:

<cms-time-duration-input
  [value]="initialTimeDuration"
  [disabled]="isDisabled"
  (valueChange)="onTimeDurationChange($event)"
></cms-time-duration-input>

Outputs

Output	Type	Description
valueChange	EventEmitter<TimeDuration>	Emits the updated time duration whenever the user modifies the input or changes the unit.

Methods

1. setValue(timeDuration: TimeDuration): void

• Description:

  • Updates the component's state based on the provided TimeDuration object.

  • Ensures that the selected unit (key) and value are synchronized with the input.

• Parameters:

  • timeDuration: An object containing key (unit) and value (time duration).

2. onValueChanged(): void

• Description:

  • Emits the updated time duration through the valueChange output whenever the user modifies the input or unit.

• Parameters: None.

Key Properties

Property	Type	Description
options	Array<{ key, label }>	The available time units (e.g., minutes and hours) with their translated labels.
option	any	The currently selected time unit.
duration	any	The currently entered time duration.