feat(docs): add use-cases for timepicker component (#4763)

docs/spec/timepicker/timepicker.examples.arrow-keys.use-case.md

@@ -0,0 +1,27 @@
+14.13: Timepicker Arrow keys example
+====================================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user example how to configure timepicker with arrow keys
+
+Main success scenario:
+----------------------
+1. User opens Timepicker demo page
+2. User clicks on Arrow keys sub-menu
+3. User see timepicker component with hour, minute inputs, clickable button "AM"("PM") and info alert with current date and time
+4. User see clickable button "Enable / Disable keyboard arrow keys"
+5. When user activates hours input and click keyboard arrow up key, then time number increases with appropriate changes in info alert
+6. When user clicks keyboard arrow down key, then time number decreases with approproate changes in info alert
+7. When user activates minutes input and click keyboard arrow up key, then time number increases with appropriate changes in info alert
+8. When user clicks keyboard arrow down key, then time number decreases with appropriate changes in info alert
+9. When user clicks on "Enable / Disable keyboard arrow keys" button, visually nothing changed
+10. When user activates hours input and click keyboard arrow up key, then hours data stay the same
+11. When user activates minutes input and click keyboard arrow down key, then minutes data stay the same
+12. When user change hours and minutes by arrow navigation, data change successfully
+13. When user clicks on "Enable / Disable keyboard arrow keys" button again, then user can change hours and minutes with keyboard arrow keys again
+
+Variations:
+-----------
+2*. User scrolls to Arrow keys sub-menu

docs/spec/timepicker/timepicker.examples.basic.use-case.md

@@ -0,0 +1,35 @@
+14.1: Timepicker basic example
+==============================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user basic timepicker functionality
+
+Main success scenario:
+----------------------
+1. User opens Timepicker demo page
+2. User clicks on Basic sub-menu
+3. User see timepicker component and info alert with selected date and time (current by default)
+4. User see current hour and current minute in timepicker inputs and button "AM/PM" (depend on the current time) by default
+
+##### Timepicker - hours
+5. When user clicks on arrow up above the hour input, then number in the input increased at 1 and info alert changed appropriate
+6. When user clicks on arrow down under the hour input, then number in the input decreased at 1 and info alert changed appropriate
+7. User able to chose hour from interval (01-12) by default
+8. When user send other valid (1-12) number to input and click outside, then number in the input saved and info alert changed appropriate
+9. When user send invalid number or string to input and click outside, then the red border appeared in input and danger alert shown "Time is: " info
+
+##### Timepicker - minutes
+10. When user clicks on arrow up above the minutes input, then number in the input increased at 5 and info alert changed appropriate
+11. When user clicks on arrow down under the minutes input, then number in the input decreased at 5 and info alert changed appropriate
+12. User able to chose minutes from interval (00-60) by default with 5 minutes step
+13. When user send other valid (00-60) number to input and click outside, then number in the input saved and info alert changed appropriate
+14. When user send invalid number or string to input and click outside, then the red border appeared in input and danger alert shown "Time is: " info
+
+##### Timepicker - AM/PM
+15. When user clicks on "PM"("AM") button, then it changed to "AM"("PM") and time converted appropriate
+
+Variations:
+-----------
+2*. User scrolls to Basic sub-menu

docs/spec/timepicker/timepicker.examples.config-defaults.use-case.md

@@ -0,0 +1,34 @@
+14.15: Timepicker Configuring defaults example
+==============================================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user how to configure defaults for timepicker
+
+Main success scenario:
+----------------------
+1. User opens Timepicker demo page
+2. User clicks on Configuring defaults sub-menu
+3. User see timepicker component with hour, minute inputs and arrows and placeholders "HH" and "MM"
+4. User see info alert with text "Time is:"
+5. Component src should assign to TimepickerConfig params:  hourStep: A, minuteStep: B, showMeridian, readonlyInput, mousewheel, showMinutes, showSeconds
+6. When showMeridian is true then button "AM"("PM") should be visible and clickable near inputs
+7. When readonlyInput is true then inputs and arrows should be not clickable
+8. When mousewheel is true then user able to change input values through the mouse wheel scrolling
+9. When showMinutes is true then minutes input with arrows are shown
+10. When showSeconds is true then seconds input with arrows are shown
+11. When user clicks on arrow up/down near hours input, then hour number increased/decreased at A and appropriate date and time shown in info alert
+11. When user clicks on arrow up/down near minutes input, then minutes number increased/decreased at B and appropriate date and time shown in info alert
+
+Extentions:
+-----------
+6.a. When showMeridian is false then button "AM"("PM") should not appear
+7.a. When readonlyInput is false then inputs and arrows should be clickable
+8.a. When mousewheel is false then user unable to change input values through the mouse wheel scrolling
+9.a. When showMinutes is false then minutes input with arrows are not shown
+10.a. When showSeconds is false then seconds input with arrows are not shown
+
+Variations:
+-----------
+2*. User scrolls to Configuring defaults sub-menu

docs/spec/timepicker/timepicker.examples.custom-meridian.use-case.md

@@ -0,0 +1,21 @@
+14.3: Timepicker custom meridian example
+========================================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user timepicker functionality with changing meridian param
+
+Main success scenario:
+----------------------
+1. User opens Timepicker demo page
+2. User clicks on Custom meridian sub-menu
+3. User see timepicker component and info alert with selected date and time (current by default)
+4. User see current hour and current minute in timepicker inputs and button "12H"("24H") by default (depend on current time)
+5. When user clicks on "12H / 24H", then input data stay the same and info changed appropriate
+6. Component src should be written with meridians = \['12H', '24H']
+7. Template src should be written with \[meridians]="meridians"
+
+Variations:
+-----------
+2*. User scrolls to Custom meridian sub-menu

docs/spec/timepicker/timepicker.examples.custom-steps.use-case.md

@@ -0,0 +1,39 @@
+14.8: Timepicker Custom steps example
+=====================================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user example how to change steps in hour, minute, second input of timepicker
+
+Main success scenario:
+----------------------
+1. User opens Timepicker demo page
+2. User clicks on Custom steps sub-menu
+3. User see timepicker component with hour, minute, second inputs, clickable button "AM"("PM") and data(according to the current time)
+4. User see 3 dropdowns "Hours step is:", "Minutes step is:", "Seconds step is:" and chosen (1|15|10) values by default
+
+##### Timepicker - hours, change step
+5. When user clicks on arrow up above the hours input, then input value increased at 1 and info alert changed appropriate
+6. When user clicks on arrow down under the hours input, then input value decreased at 1 and info alert changed appropriate
+7. When user clicks on dropdown "Hours step is:" and select "N", then this value is selected
+8. When user clicks on arrow up above the hours input, then input value increased at N and info alert changed appropriate
+9. When user clicks on arrow down under the hours input, then input value decreased at N and info alert changed appropriate
+
+##### Timepicker - minutes, change step
+10. When user clicks on arrow up above the minutes input, then input value increased at 15 and info alert changed appropriate
+11. When user clicks on arrow down under the minutes input, then input value decreased at 15 and info alert changed appropriate
+12. When user clicks on dropdown "Minutes step is:" and select "N", then this value is selected
+13. When user clicks on arrow up above the minutes input, then input value increased at M and info alert changed appropriate
+14. When user clicks on arrow down under the minutes input, then input value decreased at M and info alert changed appropriate
+
+##### Timepicker - seconds, change step
+15. When user clicks on arrow up above the seconds input, then input value increased at 10 and info alert changed appropriate
+16. When user clicks on arrow down under the seconds input, then input value decreased at 10 and info alert changed appropriate
+17. When user clicks on dropdown "Seconds step is:" and select "N", then this value is selected
+18. When user clicks on arrow up above the seconds input, then input value increased at L and info alert changed appropriate
+19. When user clicks on arrow down under the seconds input, then input value decreased at L and info alert changed appropriate
+
+Variations:
+-----------
+2*. User scrolls to Custom steps sub-menu

docs/spec/timepicker/timepicker.examples.custom-validation-event.use-case.md

@@ -0,0 +1,21 @@
+14.10: Timepicker Custom validation with isValid event example
+==============================================================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user example how to use custom validation with isValid event in the timepicker
+
+Main success scenario:
+----------------------
+1. User opens Timepicker demo page
+2. User clicks on Custom validation with isValid event sub-menu
+3. User see timepicker component with hour, minute inputs, clickable button "AM"("PM") and success alert with current date and time
+4. When user send any invalid time or string in hours input, then 2 danger alerts shown (1 with "Invalid time" and 2d - with "Time is:" info)
+5. When user send any invalid time or string in minutes input, then 2 danger alerts still present (1 with "Invalid time" and 2d - with "Time is:" info)
+6. When user clicks on any arrow, then date become valid (taken the nearest date from now)
+7. Component src should be written with isValid method
+
+Variations:
+-----------
+2*. User scrolls to Custom validation with isValid event sub-menu

docs/spec/timepicker/timepicker.examples.custom-validation.use-case.md

@@ -0,0 +1,20 @@
+14.9: Timepicker Custom validation example
+==========================================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user example how to use custom validators in the timepicker
+
+Main success scenario:
+----------------------
+1. User opens Timepicker demo page
+2. User clicks on Custom validation sub-menu
+3. User see timepicker component with hour, minute inputs, clickable button "AM"("PM") and success alert
+4. User see HH placeholder for hours input and MM placeholder for minutes input
+5. When user set any time between 11:00 and 12:59, then success alert with current date and appropriate time shown
+6. When user set any time outside of interval 11:00 - 12:59, then 2 danger alerts shown (1 with "Invalid time" and 2d - with "Time is:" info)
+
+Variations:
+-----------
+2*. User scrolls to Custom validation sub-menu

docs/spec/timepicker/timepicker.examples.disabled.use-case.md

@@ -0,0 +1,24 @@
+14.6: Timepicker Disabled example
+=================================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user example how to disable inputs and buttons in timepicker
+
+Main success scenario:
+----------------------
+1. User opens Timepicker demo page
+2. User clicks on Disabled sub-menu
+3. User see timepicker component and clickable button "AM"("PM") (according to the current time)
+4. User see clickable button "Enable / Disable input"
+5. When user clicks on "Enable / Disable input" button, then timepicker inputs and buttons become unclickable and disabled
+6. When user clicks on input or on button "AM"(""PM) - nothing happens
+7. When user clicks on "Enable / Disable input" button again, then timepicker inputs and buttons become clickable
+8. When user clicks on arrow up above the hour and minute input, then hours increased at 1 and minutes increased at 5
+9. When user clicks on arrow down under the hour and minute input, then hours decreased at 1 and minutes decreased at 5
+10. Component and template src should be written with isMeridian=true and isDisabled=true params
+
+Variations:
+-----------
+2*. User scrolls to Disabled sub-menu

docs/spec/timepicker/timepicker.examples.dynamic.use-case.md

@@ -0,0 +1,22 @@
+14.11: Timepicker Dynamic example
+=================================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user example how to make dynamic timepicker
+
+Main success scenario:
+----------------------
+1. User opens Timepicker demo page
+2. User clicks on Dynamic sub-menu
+3. User see timepicker component with hour, minute inputs, clickable button "AM"("PM") and info alert with current date and time
+4. User see 2 clickable buttons "Set to 14:00" and "Clear"
+5. When user clicks on "Set to 14:00" button, then hour input show "02", minute input show "00" and button show "PM"
+6. When user clicks on "Clear", then inputs cheared and hour input show placeholder "HH", minute input show placeholder "MM" and button show "AM"
+7. User see info alert with "Time is: " and danger alert with "Invalid time format"
+8. When user clicks on "Set to 14:00" button again, then hour input show "02", minute input show "00" and button show "PM"
+
+Variations:
+-----------
+2*. User scrolls to Dynamic sub-menu

docs/spec/timepicker/timepicker.examples.meridian.use-case.md

@@ -0,0 +1,30 @@
+14.2: Timepicker meridian example
+=================================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user timepicker functionality with changing meridian param
+
+Main success scenario:
+----------------------
+1. User opens Timepicker demo page
+2. User clicks on Meridian sub-menu
+3. User see timepicker component and info alert with selected date and time (current by default)
+4. User see current hour and current minute in timepicker inputs and button "AM"("PM") by default (depend on current time)
+5. User see clickable button "12H / 24H" by default
+6. When user clicks on "12H / 24H", then "AM"("PM") button dissapeared and time changed appropriate (according to 24-hours format)
+7. When user send other valid number to hours input (00-24), then time changed appropriate
+8. When user send invalid number or string to input and click outside, then the red border appeared in input and danger alert shown "Time is: " info
+9. When user clicks on arrow up, then invalid value changed to the 01 and info alert show appropriate time
+10. User able to chose hour from interval (00-24)
+11. When user clicks on "12H / 24H" again, then "AM"("PM") button appeared in appropriate state and time number in the input changed appropriate. Info alert did not changed anyhow.
+12. User able to chose hour from interval (01-12)
+
+Extentions:
+-----------
+9.a. When user clicks on arrow down, then invalid value changed to the 00 and info alert show appropriate time
+
+Variations:
+-----------
+2*. User scrolls to Meridian sub-menu

docs/spec/timepicker/timepicker.examples.min-max.use-case.md

@@ -0,0 +1,35 @@
+14.4: Timepicker Min - Max example
+========================================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user timepicker functionality with Min - Max values
+
+Main success scenario:
+----------------------
+1. User opens Timepicker demo page
+2. User clicks on Min - Max sub-menu
+3. User see timepicker component and info alert with selected date and time (current by default)
+4. User see current hour and current minute in timepicker inputs and not clickable button "PM"("AM") by default (depend on current time)
+5. Component src should be written with minTime.setHours(B), minTime.setMinutes(M), maxTime.setHours(A), maxTime.setMinutes(N)
+
+##### Timepicker - hour input, min-max values
+6. When user clicks on arrow up, then input data and info alert changed appropriate
+7. Maximum hour, which user can chose - A. When user chose (A-1) hour, then arrow up become unclickable
+9. When user clicks on arrow down, then input data and info alert changed appropriate
+10. Minimum hour, which user can chose - B. When user chose (B) hour, then arrow down become unclickable
+11. When user send valid hour to the input, from interval (B-A), then input time and info alert changed appropriate
+12. When user send invalid hour or string to the input, then red border appear in the input and danger alert show "Time is: "
+
+##### Timepicker - minute input, min-max values
+13. When user clicks on arrow up, then input data and info alert changed appropriate (with step 5 minutes)
+14. Maximum minute, which user can chose - N. When user chose (N-1) minute, then arrow up become unclickable
+15. When user clicks on arrow down, then input data and info alert changed appropriate (with step 5 minutes)
+16. Minimum minute, which user can chose - M. When user chose (M) minute, then arrow down become unclickable
+17. When user send valid minute to the input, from interval (M-N), then input time and info alert changed appropriate
+18. When user send invalid minute or string to the input, then red border appear in the input and danger alert show "Time is: "
+
+Variations:
+-----------
+2*. User scrolls to Min - Max sub-menu

docs/spec/timepicker/timepicker.examples.mouse-wheel.use-case.md

@@ -0,0 +1,27 @@
+14.12: Timepicker Mouse wheel example
+=====================================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user example how to configure timepicker with mouse wheel
+
+Main success scenario:
+----------------------
+1. User opens Timepicker demo page
+2. User clicks on Mouse wheel sub-menu
+3. User see timepicker component with hour, minute inputs, clickable button "AM"("PM") and info alert with current date and time
+4. User see clickable button "Enable / Disable mouse wheel"
+5. When user activates hours input and scroll up with mouse wheel, then time number increases with appropriate changes in info alert
+6. When user scrolls down with mouse wheel, then time number decreases with approproate changes in info alert
+7. When user activates minutes input and scroll up with mouse wheel, then time number increases with appropriate changes in info alert
+8. When user scrolls down with mouse wheel, then time number decreases with appropriate changes in info alert
+9. When user clicks on "Enable / Disable mouse wheel" button, visually nothing changed
+10. When user activates hours input and scroll up/down with mouse wheel, then hours data stay the same
+11. When user activates minutes input and scroll up/down with mouse wheel, then minutes data stay the same
+12. When user change hours and minutes by arrow navigation, data change successfully
+13. When user clicks on "Enable / Disable mouse wheel" button again, then user can change hours and minutes with mouse wheel scrolling again
+
+Variations:
+-----------
+2*. User scrolls to Mouse wheel sub-menu

docs/spec/timepicker/timepicker.examples.readonly.use-case.md

@@ -0,0 +1,24 @@
+14.7: Timepicker Readonly example
+=================================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user example how to use timepicker with readonly inputs param
+
+Main success scenario:
+----------------------
+1. User opens Timepicker demo page
+2. User clicks on Readonly sub-menu
+3. User see timepicker component with inputs and data(according to the current time)
+4. User see clickable button "Editable / Readonly input"
+5. When user clicks on "Editable / Readonly input" button, then timepicker inputs and buttons become unclickable and readonly
+6. When user clicks on any input or arrow - nothing happens
+7. When user clicks on "Editable / Readonly input" button again, then timepicker inputs become clickable
+8. When user clicks on arrow up above the hour and minute input, then hours increased at 1 and minutes increased at 5
+9. When user clicks on arrow down under the hour and minute input, then hours decreased at 1 and minutes decreased at 5
+10. Component and template src should be written with isMeridian=false and readonly=true params
+
+Variations:
+-----------
+2*. User scrolls to Readonly sub-menu