### Spec/Dropdowns/Dropdowns.Examples.Accessibility.Use Case
6.18: Dropdowns Accessibility example
=====================================
**Primary Actor**: User
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
**Goal**: Show user information about dropdown accessibility
Main success scenario:
----------------------
1. User opens Dropdowns demo page
2. User clicks on Accessibility sub-menu
3. User see info about role="menu" widget and role and aria- attributes
---
### Spec/Dropdowns/Dropdowns.Examples.Append To Body.Use Case
6.10: Dropdowns Append to body example
======================================
**Primary Actor**: User
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
**Goal**: Show user example how to append dropdown to body
Main success scenario:
----------------------
1. User opens Dropdowns demo page
2. User clicks on Append to body sub-menu
3. User see clickable button "Dropdown on Body"
4. When user clicks on this button, then dropdown opened and there are 4 items, one of them is separated
5. When user clicks on any item, then dropdown closes
6. Template src should be implemented with dropdown container="body"
Variations:
-----------
2*. User scroll to Append to body sub-menu
---
### Spec/Dropdowns/Dropdowns.Examples.Auto Close.Use Case
6.17: Dropdowns Auto close example
==================================
**Primary Actor**: User
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
**Goal**: Show user example how to use autoClose property for dropdown behaviour
Main success scenario:
----------------------
1. User opens Dropdowns demo page
2. User clicks on Auto close sub-menu
3. User see 2 clickable buttons "Button dropdown"
4. When user clicks on the first "Button dropdown", then dropdown opened and there are 3 items inside
5. When user press "ESC", then this dropdown closes
6. When user clicks on the first "Button dropdown" again, then dropdown opened and there are 3 items inside
7. When user clicks outside dropdown, then this dropdown closes
8. When user clicks on the second "Button dropdown", then dropdown opened and there are 3 items inside
9. When user press "ESC", nothing happens
10. When user clicks outside dropdown, nothing happens
11. When user clicks on the second "Button dropdown" again, then dropdown closed
Variations:
-----------
2*. User scroll to Auto close sub-menu
---
### Spec/Dropdowns/Dropdowns.Examples.Basic.Use Case
6.1: Dropdowns basic example
============================
**Primary Actor**: User
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
**Goal**: Show user basic dropdowns functionality
Main success scenario:
----------------------
1. User opens Dropdowns demo page
2. User clicks on Basic sub-menu
3. User see "Button dropdown" and able to click on it
4. When user clicks on "Button dropdown", then dropdown opened and there are 4 items, 1 of them is separated
5. When user clicks on any item, then dropdown closes
Variations:
-----------
2*. User scroll to Basic sub-menu
---
### Spec/Dropdowns/Dropdowns.Examples.Config Defaults.Use Case
6.14: Dropdowns Configuring defaults example
============================================
**Primary Actor**: User
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
**Goal**: Show user example how to override default dropdown parameters
Main success scenario:
----------------------
1. User opens Dropdowns demo page
2. User clicks on Configuring defaults sub-menu
3. User see clickable button "Button dropdown"
4. When user clicks on "Button dropdown", then dropdown opened and there are 3 items
5. When user clicks on any item, nothing happens.
6. When user click on button "Button dropdown" again, then dropdown closes
7. Component src should be written with BsDropdownConfig as a provider and autoClose: false as a value object
Variations:
-----------
2*. User scroll to Configuring defaults sub-menu
---
### Spec/Dropdowns/Dropdowns.Examples.Custom Html.Use Case
6.13: Dropdowns Custom html example
============================================
**Primary Actor**: User
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
**Goal**: Show user example how to add custom html to the dropdown items
Main success scenario:
----------------------
1. User opens Dropdowns demo page
2. User clicks on Custom html sub-menu
3. User see clickable button "Button dropdown"
4. When user clicks on this button, then dropdown opened and there are 3 items
5. Latest item in dropdown should have specific class
Variations:
-----------
2*. User scroll to Custom html sub-menu
---
### Spec/Dropdowns/Dropdowns.Examples.Disabled Menu.Use Case
6.6: Dropdowns Disabled menu example
====================================
**Primary Actor**: User
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
**Goal**: Show user example how to use isDisabled property in dropdown
Main success scenario:
----------------------
1. User opens Dropdowns demo page
2. User clicks on Disabled menu sub-menu
3. User see 2 clickable buttons "Button dropdown" and "Enable/Disable"
4. When user clicks on "Button dropdown", then dropdown opened and there are 4 items, 1 of them is separated
5. When user clicks on any item, dropdown closes
6. When user clicks on "Enable/Disable", then "Button dropdown" disabled and user can't click on it
7. When user clicks on "Enable/Disable" again, then "Button dropdown" active again
8. When user clicks on "Button dropdown" again, then dropdown opened and there are 4 items
9. When user clicks on any item, dropdown closes
Variations:
-----------
2*. User scroll to Disabled menu sub-menu
---
### Spec/Dropdowns/Dropdowns.Examples.Dropup Variation.Use Case
6.11: Dropdowns Dropup variation example
========================================
**Primary Actor**: User
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
**Goal**: Show user example how to make dropdown which opens to top
Main success scenario:
----------------------
1. User opens Dropdowns demo page
2. User clicks on Dropup variation sub-menu
3. User see clickable button "Dropup"
4. When user clicks on this button, then dropdown opened to top and there are 4 items, one of them is separated
5. When user clicks on any item, then dropdown closes
6. Component src should be implemented with isDropup = true param
Variations:
-----------
2*. User scroll to Dropup variation sub-menu
---
### Spec/Dropdowns/Dropdowns.Examples.Inside Click.Use Case
6.19: Dropdowns Inside click example
====================================
**Primary Actor**: User
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
**Goal**: Show user example with insideClick, which provide possibility to click inside dropdown without closing it
Main success scenario:
----------------------
1. User opens Dropdowns demo page
2. User clicks on Inside click sub-menu
3. User see clickable button "Button dropdown", be default dropdown is closed
4. When user clicks on it, then dropdown opened and there are 4 items with 1 separator
5. When user clicks on any item, then nothing happens, dropdown still opened
6. When user clicks on button again, dropdown closed
Variations:
-----------
2*. User scroll to Inside click sub-menu
---
### Spec/Dropdowns/Dropdowns.Examples.Manual Trigger
6.4: Dropdowns Manual triggering example
========================================
**Primary Actor**: User
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
**Goal**: Show user example how to trigger dropdown with show, hide and toggle methods
Main success scenario:
----------------------
1. User opens Dropdowns demo page
2. User clicks on Manual triggering sub-menu
3. User see 4 clickable buttons: "Button dropdown", "Toggle", "Show", "Hide"
4. When user clicks on "Button dropdown", then dropdown opened and there are 3 items
5. When user clicks on any item, then dropdown closes
6. When user clicks on "Toggle", then dropdown opened and there are 3 items
7. When user clicks on "Toggle" again, then dropdown closes
8. When user clicks on "Show", then dropdown opened and there are 3 items
9. When user clicks on "Show" again, nothing happens
10. When user clicks on any item, nothing happens
11. When user clicks on "Hide", then dropdown closes
12. Template src should be implemented with dropdown.show, dropdown.hide and dropdown.toggle
Variations:
-----------
2*. User scroll to Manual triggering sub-menu
---
### Spec/Dropdowns/Dropdowns.Examples.Mark Item Disabled.Use Case
6.7: Dropdowns Mark item as disabled example
=================================================
**Primary Actor**: User
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
**Goal**: Show user example how to mark dropdown item as disabled
Main success scenario:
----------------------
1. User opens Dropdowns demo page
2. User clicks on Mark item as disabled sub-menu
3. User see clickable button "Button dropdown"
4. When user clicks on "Button dropdown", then dropdown opened and there are 3 items, first is disabled and other is enabled
5. When user clicks on the first item, nothing happens
6. When user clicks on the second item, then dropdown closes
7. When user clicks on "Button dropdown" again, then dropdown opened and there are 3 items in the same state as previous
8. When user clicks on the third item, then dropdown closes
Variations:
-----------
2*. User scroll to Mark item as disabled sub-menu
---
### Spec/Dropdowns/Dropdowns.Examples.Menu Alignment.Use Case
6.8: Dropdowns Menu alignment example
=====================================
**Primary Actor**: User
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
**Goal**: Show user example how to align dropdown items
Main success scenario:
----------------------
1. User opens Dropdowns demo page
2. User clicks on Menu alignment sub-menu
3. User see clickable button with long text "This dropdown's menu is right-aligned"
4. When user clicks on this button, then dropdown opened and there are 4 items, one of them is separated
5. Opened dropdown should be aligned to the right
6. When user clicks on any item, then dropdown closes
Variations:
-----------
2*. User scroll to Menu alignment sub-menu
---
### Spec/Dropdowns/Dropdowns.Examples.Menu Dividers.Use Case
6.12: Dropdowns Menu dividers example
=====================================
**Primary Actor**: User
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
**Goal**: Show user example how to separate dropdown items with divider
Main success scenario:
----------------------
1. User opens Dropdowns demo page
2. User clicks on Menu dividers sub-menu
3. User see clickable button "Button dropdown"
4. When user clicks on this button, then dropdown opened and there are 4 items, one of them is separated
5. When user clicks on any item, then dropdown closes
6. Template src should be implemented with divider class
Variations:
-----------
2*. User scroll to Menu dividers sub-menu
---
### Spec/Dropdowns/Dropdowns.Examples.Nested Dropdowns.Use Case
6.9: Dropdowns Nested dropdowns example
=====================================
**Primary Actor**: User
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
**Goal**: Show user example with nested dropdowns
Main success scenario:
----------------------
1. User opens Dropdowns demo page
2. User clicks on Nested dropdowns sub-menu
3. User see clickable button "dropdown has nested submenu"
4. When user clicks on this button, then dropdown opened and there are 4 items, one of them is separated
5. When user move mouse to the first item with caret, then nested dropdown opened and there are 3 items in the sub-menu
6. When user move mouse to the second item with caret, then nested dropdown opened and there are 3 items in the sub-menu
7. When user clicks on button again, then dropdown closes
Variations:
-----------
2*. User scroll to Nested dropdowns sub-menu
---
### Spec/Dropdowns/Dropdowns.Examples.Split Button.Use Case
6.3: Dropdowns Split button example
===================================
**Primary Actor**: User
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
**Goal**: Show user dropdown example with splitted button and caret
Main success scenario:
----------------------
1. User opens Dropdowns demo page
2. User clicks on Split button dropdowns sub-menu
3. User see dropdown, which consist of 2 buttons: with text and with caret
4. When user clicks on text, nothing happens
5. When user clicks on caret, then dropdown opened and there are 4 items, 1 of them is separated
6. When user clicks on any item, then dropdown closes
Variations:
-----------
2*. User scroll to Split button dropdowns sub-menu
---
### Spec/Dropdowns/Dropdowns.Examples.State Change Event.Use Case
6.16: Dropdowns State change event example
==========================================
**Primary Actor**: User
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
**Goal**: Show user example how to subscribe to dropdown state changing events
Main success scenario:
----------------------
1. User opens Dropdowns demo page
2. User clicks on State change event sub-menu
3. User see clickable button "Button dropdown"
4. When user clicks on "Button dropdown", then dropdown opened and there are 3 items and card "The dropdown is opened" shown
5. When user clicks on any item, then dropdown closed and card "The dropdown is closed" is shown
6. When user clicks on "Button dropdown" again, then dropdown opened and card "The dropdown is opened" is shown
7. When user clicks on "Button dropdown" again, then dropdown closed and card "The dropdown is closed" is shown
Variations:
-----------
2*. User scroll to State change event sub-menu
---
### Spec/Dropdowns/Dropdowns.Examples.Trigger By A.Use Case
6.2: Dropdowns Trigger by tag \ example
==========================================
**Primary Actor**: User
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
**Goal**: Show user example with link dropdowns
Main success scenario:
----------------------
1. User opens Dropdowns demo page
2. User clicks on Trigger by tag \ sub-menu
3. User see clickable link
4. When user clicks on it, then dropdown opened and there are 3 items
5. When user clicks on any item, then dropdown closes
Variations:
-----------
2*. User scroll to Trigger by tag \ sub-menu
---
### Spec/Dropdowns/Dropdowns.Examples.Trigger By Isopen.Use Case
6.5: Dropdowns Trigger by isOpen property example
==========================================
**Primary Actor**: User
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
**Goal**: Show user example how to trigger dropdown by changing isOpen property
Main success scenario:
----------------------
1. User opens Dropdowns demo page
2. User clicks on Trigger by isOpen property sub-menu
3. User see 2 clickable buttons "Button dropdown" and "Toggle"
4. When user clicks on "Button dropdown", then dropdown opened and there are 3 items
5. When user clicks on any item, nothing happens
6. When user clicks on "Toggle", then dropdown closed
7. When user clicks on "Toggle" again, then dropdown opened and there are 3 items
8. When user clicks on "Toggle" again, then dropdown closed again
9. Template src should be implemented with dropdown.isOpen
Variations:
-----------
2*. User scroll to Trigger by isOpen property sub-menu
---
### Spec/Dropdowns/Dropdowns.Examples.Visibility Events.Use Case
6.15: Dropdowns Visibility Events example
=========================================
**Primary Actor**: User
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
**Goal**: Show user example how to subscribe to dropdown visibility events
Main success scenario:
----------------------
1. User opens Dropdowns demo page
2. User clicks on Visibility Events sub-menu
3. User see clickable button "Button dropdown"
4. When user clicks on "Button dropdown", then dropdown opened and there are 3 items and card "Event onShown is fired" should be shown
5. When user clicks on any item, then dropdown closed and card "Event onHidden is fired" is shown
6. When user clicks on "Button dropdown" again, then dropdown opened and card "Event onHidden is fired" is hidden
7. When user clicks on any item, then dropdown closed and card "Event onHidden is fired" is shown again
Variations:
-----------
2*. User scroll to Visibility Events sub-menu
---
### Spec/Datepicker/Datepicker.Example.With Animation.Use Case
5.26: Datapicker With animation example
==========================
**Primary Actor**: User
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
**Goal**: Show user datapicker and datarangepicker With animation usage example
Main success scenario:
----------------------
1. User opens Datapicker demo page
2. User clicks on With animation sub-menu
3. User see 2 inputs: Datepicker and Daterangepicker
###### Datepicker
4. When a user clicks on "Datepicker" input, bs-datepicker-container opened with animation and with no one date selected
5. By default, Datepicker shows the current year and current month in the head block with 2 arrows at the edges of it: "‹" and "›", and with the current month calendar in the bs-datepicker-container body
6. By default, no date is selected in the Datepicker month calendar, all the data of the current month are enabled and data of the previous and the next month are disabled
7. When the user clicks on the left arrow "‹" in the bs-datepicker-container head block - previous month and current year shown in the head block with the previous month calendar in the bs-datepicker-container body
8. When user clicks on the right arrow "›" in the bs-datepicker-container head block after that twice - next month shown
9. When user clicks on month in the bs-datepicker-container head block, then full table with 12 months shown with current year in head block
10. When user clicks on year in the bs-datepicker-container head block, then table with 16 years shown with year interval in head block
11. When user clicks on any date in the bs-datepicker-container body - then this date appeared in the input in format "mm/dd/yyyy"
12. When user clears input and add there date in format "mm.dd.yyyy", click "Enter" - date converted to "mm/dd/yyyy"
13. When user clears input and add there date in format "mm-dd-yyyy", click "Enter" - date converted to "mm/dd/yyyy"
14. When user clicks on "Datepicker" input again, bs-datepicker-container opened and chosen date selected
###### Daterangepicker
15. When user clicks on "Daterangepicker" input, Daterangepicker bs-datepicker-container opens with animation and with no one date selected, and Datepicker bs-datepicker-container closes
16. By default, user sees Daterangepicker container with 2 arrows: left "‹" and right "›". It consists of 2 bs-datepicker-head blocks with the current year and current month in the left datepicker-head block with the left arrow "‹" at the left edge of it, and with the current month calendar in the left bs-datepicker-body block. And with next month and the current year in the right datepicker-head block with right arrow ">" at the right edge of it, and with the next month calendar in the right bs-datepicker-body block.
17. When user clicks on the left arrow "<" of the bs-days-calendar-view block - the interval starts from the previous month, is shown
18. When user clicks on the right arrow ">" of the bs-days-calendar-view block twice - the interval starts from the next month, is shown
19. When user clicks on month name in any of the bs-datepicker-head blocks, then 2 tables with 12 months in each shown with current year in the right bs-datepicker-head block and with thee next year in the left bs-datepicker-head block
21. When user clicks on year in any of the bs-datepicker-head blocks, then bs-datepicker-container reach with 16 years period shown in each bs-datepicker-body block with that periods years interval in head blocks, and the current year is shown in the left bs-datepicker-body block
22. When user clicks on any year in any of the bs-datepicker-container, clicks on any month name after that, and chose any date from the bs-datepicker-container - then this date apears selected in the bs-datepicker-head blocks
23. When user click on the later date, then this interval chosen and appeared in the input in format "mm/dd/yyyy" - "mm/dd/yyyy"
24. When user clicks on "Daterangepicker" input field again, bs-dateragdepicker-container opened and chosen date interval selected
25. When user clears input and clicks on the input field another one, the chosen date interval still appears as selected
26. When user clears input and add there date interval in format "mm.dd.yyyy" - "mm.dd.yyyy", click "Enter" - interval converted to "mm/dd/yyyy" - "mm/dd/yyyy"
27. When user clears input and add there date interval in format "mm-dd-yyyy" - "mm-dd-yyyy", click "Enter" - interval converted to "mm/dd/yyyy" - "mm/dd/yyyy"
Variations:
-----------
2*. User scrolls to Radio without explicit group sub-menu
---
### Spec/Datepicker/Datepicker.Examples.Basic.Use Case
5.1: Datepicker basic example
=============================
**Primary Actor**: User
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
**Goal**: Show user basic Datepicker and Daterangepicker functionality
Main success scenario:
----------------------
1. User opens Datepicker demo page
2. User clicks on Basic sub-menu
3. User see 2 inputs: Datepicker and Daterangepicker
###### Datepicker
4. When user clicks on "Datepicker" input, bs-datepicker-container opened and no one date selected
5. User see Datepicker container with 2 arrows in the bs-datepicker-head block: left "<" and right ">"
6. By default, Datepicker show current year and current month in head block
7. When the user clicks on the left arrow "<" - then the previous month name with current year shown in the bs-datepicker-head block and the previous month's calendar shown in the bs-datepicker-body block
8. When user clicks on the right arrow ">" after that twice - then the next month name with current year number shown in the the bs-datepicker-head block, and next month's calendar shown in the bs-datepicker-body block
9. When the user clicks on the month name in the bs-datepicker-head block, the current year number is displayed in the bs-datepicker-head block, and the full table with 12 months is displayed in the bs-datepicker-body block
10. When the user clicks a year in the bs-datepicker-head block, a 16-year interval appears in the bs-datepicker-head block, and the bs-datepicker-body displays the complete table with that 16 year period
11. When user clicks on any year, next clicks on any month name and next click on the any date in the bs-datepicker-body - then selected date appears in the input in the format "mm/dd/yyyy"
12. When user clicks on "Datepicker" input again, bs-datepicker-container opened and chosen date selected in the month calendar
13. When user clears input and add there date in format "mm.dd.yyyy", click "Enter" - date converted to "mm/dd/yyyy"
14. When user clears input and add there date in format "mm-dd-yyyy", click "Enter" - date converted to "mm/dd/yyyy"
15. When user clicks on "Datepicker" input again, bs-datepicker-container opened and chosen date selected
###### Daterangepicker
14. Daterangepicker bs-datepicker-container opens with animation and with no one date selected, and Datepicker bs-datepicker-container closes
15. By default, user see 2 bs-days-calendar-view blocks in the bs-datepicker-container
16. User see Daterangepicker container with 2 arrows: "‹" and "›"
17. When user clicks on "‹" - shown interval, which started from previous month
18. When user clicks on "›" - shown interval, which started from next month
19. By default, Daterangepicker show interval from current month, year and next month, year in head block
20. When user clicks on month, then 2 tables with 12 months in each shown with years(current and next) in head block
21. When user clicks on year, then 2 tables with 16 years in each shown with year interval in head block
22. When user clicks on any date - then this date selected
23. When user click on the later date, then this interval appeared in the input in format "mm/dd/yyyy" - "mm/dd/yyyy"
24. When user clicks on "Daterangepicker" input again, bs-dateragdepicker-container opened and chosen date interval selected
25. When user clears input and add there date interval in format "mm.dd.yyyy" - "mm.dd.yyyy", click "Enter" - interval converted to "mm/dd/yyyy" - "mm/dd/yyyy"
Variations:
-----------
2*. User scroll to Basic sub-menu
Extentions:
-----------
###### Datepicker
9a. When user clicks on "‹" button - previous year in head block shown
9b. When user clicks on "›" button - next year in head block shown
9c. When user clicks on any month - then this month shown in head block and table with dates shown
10a. When user clicks on "‹" button - interval with previous 16 years shown
10b. When user clicks on "›" button - interval with next 16 years shown
10c. When user clicks on any year - then this year shown in head block and table with 12 months shown
10d. When user clicks on any month - then this month and year shown in head block and table with dates shown
13a. When user clears input and add there date in bad format, click "Enter" - "Invalid date" shown
13b. When user clears input and add there date in format "mmddyyyy", click "Enter" - date converted to "mm/dd/yyyy"
###### Daterangepicker
14a. If "Datepicker" closed, when user clicks on "Daterangepicker" input, bs-dateragdepicker-container opened
20a. When user clicks on "‹" button - interval, which started from previous year in head block shown
20b. When user clicks on "›" button - interval, which started from next year in head block shown
20c. When user clicks on any month - then tables with dates shown and in head block shown interval, which start from chosen month
21a. When user clicks on "‹" button - interval with previous 16 years shown in each table
21b. When user clicks on "›" button - interval with next 16 years shown in each table
21c. When user clicks on any year from the left table - then this year shown in head block and tables with 12 months in each shown
21d. When user clicks on any month from the left table - then this month and year shown in head block and tables with dates in each shown
25a. When user clears input and add there date interval in bad format, click "Enter" - nothing happens
25b. When user clears input and add there date interval in format "mmddyyyy" - "mmddyyyy", click "Enter" - date converted to "mm/dd/yyyy" - "mm/dd/yyyy"
---
### Spec/Datepicker/Datepicker.Examples.Config Method.Use Case
5.13: Datepicker Config method example
======================================
**Primary Actor**: User
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
**Goal**: Show user how to manage options of Datepicker
Main success scenario:
----------------------
1. User opens Datepicker demo page
2. User clicks on Config method sub-menu
3. User see Datepicker input and clickable button "Set min date"
4. When user clicks on Datepicker input, bs-datepicker-container opens
5. User able to click on any date, even any date from May 2018
6. When user clicks on 8 may 2018 - then this date appear in the input
7. When user clicks on "Set min date" button, then bs-datepicker-container opens
8. When user try to click on any date before 13 of June 2018, nothing happens
9. When user try to click on any date after 13 of June 2018 - then this date chosen and appear in the input
Variations:
-----------
2*. User scroll to Config method sub-menu
---
### Spec/Datepicker/Datepicker.Examples.Config Properties
5.16: Datepicker Config properties example
==========================================
**Primary Actor**: User
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
**Goal**: Show user example how to configure datepicker with bsConfig
Main success scenario:
----------------------
1. User opens Datepicker demo page
2. User clicks on Config properties sub-menu
3. User see Datepicker input
4. Template src should contain bsConfig parameter with dateInputFormat: "DD-MM-YYYY" and containerClass: "theme-red"
5. When user clicks on Datepicker input, bs-datepicker-container opens in style "theme-red"
6. When user chose any date, then bs-datepicker-container disappeared and date is shown in the input in format "DD-MM-YYYY"
Variations:
-----------
2*. User scroll to Config properties sub-menu
---
### Spec/Datepicker/Datepicker.Examples.Custom Date Format.Use Case
5.3: Datepicker Custom date format example
==========================================
**Primary Actor**: User
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
**Goal**: Show user Datepicker with custom format of date
Main success scenario:
----------------------
1. User opens Datepicker demo page
2. User clicks on Custom date format sub-menu
3. User see 3 inputs for Datepicker
4. User see 3 clickable buttons of "Date Picker"
5. By default, value in inputs is current day in different formats: "YYYY-MM-DD", "MM/DD/YYYY", "MMMM Do YYYY,h:mm:ss a"
6. When user click on the first "Date Picker" button and chose any other date - that date chosen and appear in the input with format "YYYY-MM-DD"
7. When user click on the second "Date Picker" button and chose any other date - that date chosen and appear in the input with format "MM/DD/YYYY"
8. When user click on the third "Date Picker" button and chose any other date - that date chosen and appear in the input with format "MMMM Do YYYY,h:mm:ss a"
Variations:
-----------
2*. User scroll to Custom date format sub-menu
---
### Spec/Datepicker/Datepicker.Examples.Custom Today Class.Use Case
5.22: Datepicker Custom today class
==================================
**Primary Actor**: User
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
**Goal**: Show user how to set custom class for today date
Main success scenario:
----------------------
1. User opens Datepicker demo page
2. User clicks on Custom today class sub-menu
3. User see 1 input for Datepicker
4. When user clicks on the "DatePicker" input then container opened and no one date selected by default
6. Current today date have specific class name "custom-today-class"
7. When user chose any date, then this date chosen and shown in the input
8. When user clicks on input again, then previous date selected and current date still with "custom-today-class"
9. When user chose today date and click on datepicker input again, then current date selected and still with "custom-today-class"
Variations:
-----------
2*. User scroll to Custom today class
---
### Spec/Datepicker/Datepicker.Examples.Custom Trigger
5.19: Datepicker Custom triggers example
========================================
**Primary Actor**: User
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
**Goal**: Show user example how to use different triggers in datepicker
Main success scenario:
----------------------
1. User opens Datepicker demo page
2. User clicks on Custom triggers sub-menu
3. User see 1 Datepicker input and 2 DateRangepicker inputs
4. When user move mouse to the first Datepicker input, then bs-datepicker-container opens
5. When user chose any date, then this date appear in the first input field in format "mm/dd/yyyy"
6. When user click in the first DateRangepicker input, it's activated and bs-daterangepicker-container not shown
7. When user press any key, then bs-daterangepicker-container shown and user can chose any interval
8. When user chose interval, then bs-daterangepicker-container disappeared and this interval shown in appropriate input in format "mm/dd/yyyy" - "mm/dd/yyyy"
9. When user click in the second DateRangepicker input, it's activated and bs-daterangepicker-container not shown
10. When user press any key, then bs-daterangepicker-container still not shown
11. When user click twice on input, then bs-daterangepicker-container shown and user can chose any interval
12. When user chose interval, then bs-daterangepicker-container disappeared and this interval shown in appropriate input in format "mm/dd/yyyy" - "mm/dd/yyyy"
Variations:
-----------
2*. User scroll to Custom triggers sub-menu
---
### Spec/Datepicker/Datepicker.Examples.Days Disabled.Use Case
5.23: Datepicker Days disabled example
===============================
**Primary Actor**: User
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
**Goal**: Show user how to disable Saturday and Sunday in Datepicker and Daterangepicker
Main success scenario:
----------------------
1. User opens Datepicker demo page
2. User clicks on Days disabled sub-menu
3. User see 2 inputs for Datepicker
4. When user clicks on the first Datepicker input, then bs-datepicker-container opened and user can chose any date except Saturday and Sunday
5. When user clicks on any Saturday or Sunday, nothing happens, they are disabled
6. When user clicks on any active date, this date chosen and shown in the input field in format "mm/dd/yyyy"
7. When user clicks on the second Datepicker input, then bs-datepicker-container opened and user can chose any date
8. When user clicks on any Saturday or Sunday in 2d datepicker, this date chosen and shown in the input field in format "mm/dd/yyyy"
Variations:
-----------
2*. User scroll to Days disabled sub-menu
---
### Spec/Datepicker/Datepicker.Examples.Disabled.Use Case
5.8: Datepicker Disabled example
================================
**Primary Actor**: User
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
**Goal**: Show user how to disable content in Datepicker and Daterangepicker
Main success scenario:
----------------------
1. User opens Datepicker demo page
2. User clicks on Disabled sub-menu
3. User see 2 inputs: Datepicker and Daterangepicker and button "Toggle disabling"
###### Datepicker
4. When user clicks on Datepicker input, then bs-datepicker-container opened and user can chose any date
5. When user clicks on any date, then this date chosen and shown in the input field in format "mm/dd/yyyy"
6. When user clicks on "Toggle disabling" and then clicks on Datepicker input, then user unable to chose any date
7. When user clicks on any date, month or year - nothing happens //TODO in current implementation user can click on Month and Year, it's not necessary
8. When user clicks on "Toggle disabling" again and then clicks on Datepicker input, then user able to chose another date
9. When user clicks on any date, then this date chosen and shown in the input field in format "mm/dd/yyyy"
###### Daterangepicker
10. When user clicks on Daterangepicker input, then bs-daterangepicker-container opened and user can chose any date
11. When user chose any interval, then this interval chosen and shown in the input field in format "mm/dd/yyyy" - "mm/dd/yyyy"
12. When user clicks on "Toggle disabling" and then clicks on Daterangepicker input, then user unable to chose any date
13. When user clicks on any date, month or year - nothing happens //TODO in current implementation user can click on Month and Year, it's not necessary
14. When user clicks on "Toggle disabling" again and then clicks on Daterangepicker input, then user able to chose another interval
15. When user chose any other interval, then this interval chosen and shown in the input field in format "mm/dd/yyyy" - "mm/dd/yyyy"
Variations:
-----------
2*. User scroll to Disabled sub-menu
---
### Spec/Datepicker/Datepicker.Examples.Forms.Use Case
5.9: Datepicker Forms example
=============================
**Primary Actor**: User
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
**Goal**: Show user how to use Datepicker and Daterangepicker in forms
Main success scenario:
----------------------
1. User opens Datepicker demo page
2. User clicks on Forms sub-menu
3. User see 2 inputs: Datepicker and Daterangepicker and preview block, empty by default
4. When user chose any date from Datepicker, then in preview block date is shown in default JS format (full text string format)
5. When user chose any interval from Daterangepicker, then in preview block interval is shown in default JS format (full text string format)
Variations:
-----------
2*. User scroll to Forms sub-menu
---
### Spec/Datepicker/Datepicker.Examples.Hide On Scroll.Use Case
5.4: Datepicker Hide on scroll example
======================================
**Primary Actor**: User
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
**Goal**: Show user how to hide Datepicker on scroll
Main success scenario:
----------------------
1. User opens Datepicker demo page
2. User clicks on Hide on scroll sub-menu
3. User see Datepicker input and "Date Picker" button
4. When user clicks on "Date Picker" button, bs-datepicker-container opened without any selected date
5. When user start to scroll, bs-datepicker-container dissapeared
6. When user clicks on "Date Picker" button again, select any date, then this date appear in the input field
7. When user clicks on "Date Picker" button again and start to scroll, then bs-datepicker-container dissapeared and date stay as from previous step
Variations:
-----------
2*. User scroll to Hide on scroll sub-menu
---
### Spec/Datepicker/Datepicker.Examples.Initial State.Use Case
5.2: Datepicker Initial state example
=====================================
**Primary Actor**: User
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
**Goal**: Show user Datepicker and Daterangepicker with initial state
Main success scenario:
----------------------
1. User opens Datepicker demo page
2. User clicks on Initial state sub-menu
3. User see 2 inputs: Datepicker and Daterangepicker
4. User see 2 clickable buttons: "Date Picker" and "Date Range Picker"
5. By default, value in Datepicker input is current day
6. By default, value in Daterangepicker input is interval from current day to current + 7 days
7. When user clicks on "Date Picker" button, bs-datepicker-container opened and current date selected
8. When user clicks on other date, that date selected and shown in input
9. When user clicks on "Date Range Picker" button, bs-daterangepicker-container opened and appropriate interval selected
10. When user chose another interval, that interval selected and shown in input
Variations:
-----------
2*. User scroll to Initial state sub-menu
---
### Spec/Datepicker/Datepicker.Examples.Inline Datepicker.Use Case
5.21: Datepicker Inline Datepicker example
==========================================
**Primary Actor**: User
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
**Goal**: Show user how to use inline datepicker, with initial state
Main success scenario:
----------------------
1. User opens Datepicker demo page
2. User clicks on Inline Datepicker sub-menu
3. User see Datepicker with selected date (Today)
4. When user clicks on any other date - then this date selected
5. When user chose another month and chose there any date - then this date selected
Variations:
-----------
2*. User scroll to Inline Datepicker sub-menu
---
### Spec/Datepicker/Datepicker.Examples.Locales.Use Case
5.6: Datepicker Locales example
===============================
**Primary Actor**: User
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
**Goal**: Show user how to use different locales in Datepicker and Daterangepicker
Main success scenario:
----------------------
1. User opens Datepicker demo page
2. User clicks on Locales sub-menu
3. User see 2 select fileds (with "en" by default), Datepicker and Daterangepicker and appropriate buttons
4. When user clicks on "Date Picker" button, bs-datepicker-container opened with all info in English (month, days)
5. When user chose other locale "N" for "Datepicker", bs-datepicker-container shown with all info in appropriate language
6. When user clicks on "Date Range Picker" button, bs-daterangepicker-container opened with all info in English (month, days)
7. When user chose other locale "N" for "Daterangepicker", bs-daterangepicker-container shown with all info in appropriate language
8. When user back to "en" - then all selects changed to "en"
Variations:
-----------
2*. User scroll to Locales sub-menu
---
### Spec/Datepicker/Datepicker.Examples.Manual Trigger.Use Case
5.11: Datepicker Manual triggering example
==========================================
**Primary Actor**: User
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
**Goal**: Show user how to trigger Datepicker manually
Main success scenario:
----------------------
1. User opens Datepicker demo page
2. User clicks on Manual triggering sub-menu
3. User see Datepicker input and 3 clickable buttons: "Open", "Close", "Toggle"
4. When user clicks "Open", bs-datepicker-container opened
5. When user chose any date, then bs-datepicker-container disappeared and date shown in the input in format "mm/dd/yyyy"
6. When user clicks "Open" again, bs-datepicker-container opened and date is selected
7. When user clicks "Close", then bs-datepicker-container disappeared and date shown in the input in format "mm/dd/yyyy"
8. When user clicks "Toggle", then bs-datepicker-container opened and date is selected
9. When user clicks "Toggle" again, then bs-datepicker-container disappeared and date shown in the input in format "mm/dd/yyyy"
Variations:
-----------
2*. User scroll to Manual triggering sub-menu
---
### Spec/Datepicker/Datepicker.Examples.Min Max.Use Case
5.7: Datepicker Min-max example
===============================
**Primary Actor**: User
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
**Goal**: Show user how to use min and max date in Datepicker and Daterangepicker
Main success scenario:
----------------------
1. User opens Datepicker demo page
2. User clicks on Min-max sub-menu
3. User see 2 inputs: Datepicker and Daterangepicker
4. When user clicks on Datepicker input, then bs-datepicker-container opened and user can chose any date from interval (yesterday - current day in the next week)
5. When user clicks on any other date, not from this interval, nothing happens
6. When user clicks on date from this interval, this date chosen and shown in the input field in format "mm/dd/yyyy"
7. When user clicks on Daterangepicker input, then bs-daterangepicker-container opened and user can chose any interval from interval (yesterday - current day in the next week)
8. When user clicks on any other date, not from this interval, nothing happens
9. When user clicks on the first date from this interval and second date also from this interval, then this interval chosen and shown in the input field in format "mm/dd/yyyy" - "mm/dd/yyyy"
Variations:
-----------
2*. User scroll to Min-max sub-menu
---
### Spec/Datepicker/Datepicker.Examples.Min Mode.Use Case
5.20: Datepicker Min-mode example
===============================
**Primary Actor**: User
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
**Goal**: Show user how to set min view mode of datepicker (month, year)
Main success scenario:
----------------------
1. User opens Datepicker demo page
2. User clicks on Min-mode sub-menu
3. User see 1 input of Datepicker and button "Date Picker"
4. When user clicks on Datepicker input, then bs-datepicker-container opened and user see list with months (mode=month)
5. When user clicks on any month, then this month chosen and date shown in the input field in format "mm/01/yyyy"
Variations:
-----------
2*. User scroll to Min-mode sub-menu
4*. When user clicks on Datepicker btn, then bs-datepicker-container opened and user see list with months (mode=month)
Extentions:
-----------
5a. When user clicks on year in navigation, then table with years shown
5b. When user clicks on any year, then this year chosen and user see months calendar
5c. When user chose any month, then this month chosen and date shown in the input field in format "mm/01/yyyy"
---
### Spec/Datepicker/Datepicker.Examples.Outside Click
5.17: Datepicker Outside click example
==========================================
**Primary Actor**: User
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
**Goal**: Show user example how to implement datepicker which closes by outside click
Main success scenario:
----------------------
1. User opens Datepicker demo page
2. User clicks on Outside click sub-menu
3. User see 2 Datepicker inputs
4. When user clicks on the 1st Datepicker input, bs-datepicker-container opens
5. When user clicks outside this Datepicker, then bs-datepicker-container disappeared
6. When user clicks on the 2d Datepicker input, bs-datepicker-container opens
7. When user clicks outside this Datepicker, then bs-datepicker-container stay open
8. When user select any date from this Datepicker, then bs-datepicker-container disappeared and date is shown in format "mm/dd/yyyy"
Variations:
-----------
2*. User scroll to Outside click sub-menu
---
### Spec/Datepicker/Datepicker.Examples.Placement.Use Case
5.12: Datepicker Placement example
==================================
**Primary Actor**: User
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
**Goal**: Show user how to change placement of Datepicker
Main success scenario:
----------------------
1. User opens Datepicker demo page
2. User clicks on Placement sub-menu
3. User see 4 Datepicker inputs (each have description about placement: right, top, bottom, left)
4. When user clicks on first input, bs-datepicker-container opens on the right side and centered according to this input
5. When user clicks on first input again, bs-datepicker-container disappeared
6. When user clicks on second input, bs-datepicker-container opens at the top of input and centered according to this input
7. When user clicks on second input again, bs-datepicker-container disappeared
8. When user clicks on third input, bs-datepicker-container opens at the bottom of input and centered according to this input
9. When user clicks on third input again, bs-datepicker-container disappeared
10. When user clicks on fourth input, bs-datepicker-container opens on the left side and centered according to this input
11. When user clicks on fourth input again, bs-datepicker-container disappeared
Variations:
-----------
2*. User scroll to Placement sub-menu
---
### Spec/Datepicker/Datepicker.Examples.Reactive Forms.Use Case
5.10: Datepicker Reactive forms example
=======================================
**Primary Actor**: User
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
**Goal**: Show user how to use Datepicker and Daterangepicker in reactive forms
Main success scenario:
----------------------
1. User opens Datepicker demo page
2. User clicks on Reactive forms sub-menu
3. User see 2 inputs: Datepicker and Daterangepicker
4. By default, user don't see any preview blocks
5. When user chose any date from Datepicker, then in preview block date value shown in ISO Dates (Date-Time) format
6. When user chose any date from Daterangepicker, then in preview block range value shown in ISO Dates (Date-Time) format
8. Component src should be written with using FormGroup and FormBuilder
Variations:
-----------
2*. User scroll to Reactive forms sub-menu
---
### Spec/Datepicker/Datepicker.Examples.Select Dates From Other Month.Use Case
5.24: Datepicker Select dates from other month example
======================================
**Primary Actor**: User
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
**Goal**: Show user how to manage selectFromOtherMonth option of Datepicker for getting possibility to chose day from other month
Main success scenario:
----------------------
1. User opens Datepicker demo page
2. User clicks on Select dates from other month sub-menu
3. User see Datepicker input
4. When user clicks on Datepicker input, bs-datepicker-container opens
5. When user clicks on any date from previous month in this view, then this date chosen and appear in the input
6. When user clicks on bs-datepicker-container again, then user see calendar with chosen month
7. When user clicks on any date from next month in this view, then this date chosen and appear in the input
8. When user clicks on bs-datepicker-container again, then user see calendar with chosen month
9. Template src should be written with dateInputFormat: 'DD-MM-YYYY' and selectFromOtherMonth: true
Variations:
-----------
2*. User scroll to Select dates from other month sub-menu
---
### Spec/Datepicker/Datepicker.Examples.Select Week.Use Case
5.25: Datepicker Select week example
====================================
**Primary Actor**: User
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
**Goal**: Show user how to use selectWeek option, which give possibility to user to chose weeks instead of days in datepicker
Main success scenario:
----------------------
1. User opens Datepicker demo page
2. User clicks on Select week sub-menu
3. User see 4 inputs of Datepicker, each with appropriate placeholder
4. When user clicks on the first datepicker input, then container opened and user can chose any week. Week numbers started from 1, from January 1 each year.
5. When user select week, then datepicker container disappeared and date shown in input in format MM/DD/YYYY (day should be always Monday)
6. When user clicks on this input again, then container opened and user see selected date
7. When user clicks on the second input, then container opened and user can select weeks from other months.
8. When user click on the week from previous month, then datepicker container disappeared and date shown in input in format MM/DD/YYYY
9. When user click on the 2d datepicker input again, then container opened and user see selected date
10. When user chose the week from the next month, then datepicker container disappeared and date shown in input in format MM/DD/YYYY
11. When user click on the 3d datepicker input, then datepicker container opened
12. When user click on Sunday or Monday, nothing happens, they disabled
13. When user click on the week from current month, then datepicker container disappeared and date shown in input in format MM/DD/YYYY (day should be Tuesday)
14. When user click on the 3d datepicker again, then container opened and user see selected date
15. When user click on the 4th datepicker input, then datepicker container opened
16. When user click on any item, nothing happens, they are disabled.
17. When user enter the correct date to the input and press enter, then after datepicker opens, this date selected.
Variations:
-----------
2*. User scroll to Select week sub-menu
---
### Spec/Datepicker/Datepicker.Examples.Themes.Use Case
5.5: Datepicker Themes example
==============================
**Primary Actor**: User
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
**Goal**: Show user different themes and styles for Datepicker
Main success scenario:
----------------------
1. User opens Datepicker demo page
2. User clicks on Themes sub-menu
3. User see select field (with "green" by default), Datepicker input and button "Open"
4. When user clicks on "Open" button, bs-datepicker theme-green opened with appropriate styles
5. When user chose "default", bs-datepicker theme-default shown with appropriate styles
6. When user chose "blue", bs-datepicker theme-blue shown with appropriate styles
7. When user chose "dark-blue", bs-datepicker theme-dark-blue shown with appropriate styles
8. When user chose "red", bs-datepicker theme-red shown with appropriate styles
9. When user chose "orange", bs-datepicker theme-orange shown with appropriate styles
Variations:
-----------
2*. User scroll to Themes sub-menu
---
### Spec/Datepicker/Datepicker.Examples.Trigger By Isopen
5.18: Datepicker Trigger by isOpen property example
===================================================
**Primary Actor**: User
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
**Goal**: Show user example how to trigger datepicker by changing isOpen property
Main success scenario:
----------------------
1. User opens Datepicker demo page
2. User clicks on Trigger by isOpen property sub-menu
3. User see Datepicker input and clickable button "Toggle"
4. When user clicks on "Toggle", then bs-datepicker-container opens
5. When user select any date from this Datepicker, then bs-datepicker-container disappeared and date is shown in format "mm/dd/yyyy"
6. When user clicks on "Toggle" again, then bs-datepicker-container opens again
7. When user clicks on "Toggle" again, then bs-datepicker-container disappear
Variations:
-----------
2*. User scroll to Trigger by isOpen property sub-menu
---
### Spec/Datepicker/Datepicker.Examples.Value Change Event.Use Case
5.15: Datepicker Value change event example
==========================================
**Primary Actor**: User
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
**Goal**: Show user example how to subscribe to datepicker value change event
Main success scenario:
----------------------
1. User opens Datepicker demo page
2. User clicks on Value change event sub-menu
3. User see Datepicker input
4. When user clicks on Datepicker input, bs-datepicker-container opens and user can chose any Date
5. When user chose any date, then bs-datepicker-container disappeared, this date is shown in the input in format "mm/dd/yyyy" and card with info "Changed date is Mmm dd, yyyy" shown
6. When user clicks on Datepicker input again and chose another Date, then this new date is shown in the input in format "mm/dd/yyyy" and card with info "Changed date is Mmm dd, yyyy" shown
7. When user clears input, then card with info disappeared
Variations:
-----------
2*. User scroll to Value change event sub-menu
---
### Spec/Datepicker/Datepicker.Examples.Visibility Events.Use Case
5.14: Datepicker Visibility Events example
==========================================
**Primary Actor**: User
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
**Goal**: Show user example how to subscribe to datepicker visibility events
Main success scenario:
----------------------
1. User opens Datepicker demo page
2. User clicks on Visibility Events sub-menu
3. User see Datepicker input
4. When user clicks on Datepicker input, bs-datepicker-container opens and user see card with "Event onShown is fired"
5. When user chose any date, then bs-datepicker-container disappeared and "Event onShown is fired", "Event onHidden is fired" shown
6. When user clicks on input again, then "Event onShown is fired" shown and "Event onHidden is fired" hidden
Variations:
-----------
2*. User scroll to Visibility Events sub-menu
---
### Spec/Collapse/Collapse.Examples.Accessibility.Use Case
4.5: Collapse accessibility example
===================================
**Primary Actor**: User
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
**Goal**: Show user info about accessibility for collapse
Main success scenario:
----------------------
1. User opens Collapse demo page
2. User clicks on Accessibility sub-menu
3. User see info about "aria-expanded" attribute
4. User see info about "aria-controls" attribute
---
### Spec/Collapse/Collapse.Examples.Basic.Use Case
4.1: Collapse basic example
===========================
**Primary Actor**: User
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
**Goal**: Show user basic collapse functionality
Main success scenario:
----------------------
1. User opens Collapse demo page
2. User clicks on Basic sub-menu
3. User see clickable "Toggle collapse" button
4. User see div block with "Some content"
5. When user clicks on "Toggle collapse", then "Some content" disappear
6. When user clicks on "Toggle collapse" second time, then "Some content" appear
Variations:
-----------
2*. User scrolls to Basic sub-menu
---
### Spec/Collapse/Collapse.Examples.Events.Use Case
4.2: Collapse events example
============================
**Primary Actor**: User
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
**Goal**: Show user how to handle events with collapse
Main success scenario:
----------------------
1. User opens Collapse demo page
2. User clicks on Events sub-menu
3. User see clickable "Toggle collapse" button
4. User see div block with "Some content" and div block with "Event: expanded"
5. When user clicks on "Toggle collapse", then "Some content" disappear and user see "Event: collapsed"
6. When user clicks on "Toggle collapse" second time, then "Some content" and div block with "Event: expanded" appear
Variations:
-----------
2*. User scrolls to Events sub-menu
---
### Spec/Collapse/Collapse.Examples.Inline Display.Use Case
4.4: Collapse inline display example
===================================
**Primary Actor**: User
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
**Goal**: Show user collapse with inline display example
Main success scenario:
----------------------
1. User opens Collapse demo page
2. User clicks on Inline display sub-menu
3. User see clickable "Inline-block" and "None" buttons
4. When user clicks on "Inline-block", then "Some content" appear with style: inline-block
5. When user clicks on "None", tthen "Some content" disappear with style: display-none
Variations:
-----------
2*. User scrolls to Inline display sub-menu
---
### Spec/Collapse/Collapse.Examples.Manual Toggle.Use Case
4.3: Collapse manual toggle example
===================================
**Primary Actor**: User
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
**Goal**: Show user collapse with manual toggle example
Main success scenario:
----------------------
1. User opens Collapse demo page
2. User clicks on Manual toggle sub-menu
3. User see clickable "Show content" and "Hide content" buttons
4. User see div block with "Some content"
5. When user clicks on "Hide content", then "Some content" disappear
6. When user clicks on "Show content", then "Some content" appear
Variations:
-----------
2*. User scrolls to Manual toggle sub-menu
---
### Spec/Carousel/Carousel.Examples.Accessibility.Use Case
3.11: Carousel Accessibility example
============================
**Primary Actor**: User
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
**Goal**: Show user info about Accessibility
Main success scenario:
----------------------
1. User open Carousel demo page
2. User click on Accessibility sub-menu
3. User see info about "alt" attribute
---
### Spec/Carousel/Carousel.Examples.Basic.Use Case
3.1: Carousel basic example
===========================
**Primary Actor**: User
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
**Goal**: Show user basic carousel functionality
Main success scenario:
----------------------
1. User open Carousel demo page
2. User clicks on Basic sub-menu
3. User see carousel component with 3 slides and 2 arrows: left, right
4. When the user clicks on the left arrow - the previous slide has shown
5. When the user clicks on the right arrow - next slide has shown
6. When the user does nothing more than 5 sec - next slide automatically has shown
Variations:
-----------
2*. User scroll to Basic sub-menu
---