feat(docs): typeahead-use-cases (#4696)

docs/spec/typeahead/typeahead.examples.append-to-body.use-case.md

@@ -0,0 +1,22 @@
+16.13: Typeahead Append to body example
+=======================================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user how to specified element appends to body
+
+Main success scenario:
+----------------------
+1. User opens Typeahead demo page
+2. User clicks on Append to body sub-menu
+3. User sees typeahead input and typeahead card with "Model:" text
+4. When user starts to type a name of a State from "states" array then order of typed symbols and spaces between them is ignored and a drop-down with a list of States matches is shown
+5. If there are no matches then the drop-down is hidden. The "Model" is filled with inputted data
+6. When there are any matches then a drop-down with a list of States matches is shown.
+7. Items in the drop-down are clickable.
+8. When user clicks on any item in typeahead drop-down, then typeahead container auto-fills with a selected State
+
+Variations:
+-----------
+2*. User scrolls to Append to body sub-menu

docs/spec/typeahead/typeahead.examples.async-data.use-case.md

@@ -0,0 +1,21 @@
+16.4: Typeahead Async data example
+==================================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user how typeahead works with async data and how it loads results
+
+Main success scenario:
+-------------------------
+1. User opens Typeahead demo page
+2. User clicks on Async data sub-menu
+3. User sees typeahead input and typeahead card with "Model:" text. The input has a placeholder "Locations loaded with timeout"
+4. When user starts to type a name of a State from "statesComplex" array and there is no matches the drop-down is hidden. The "Model" is filled with inputted data
+5. When there are any matches then a drop-down with a list of States matches is shown. Items quantity in the drop-down is limited to 7
+6. Items in the drop-down are clickable
+7. When user clicks on any item in typeahead drop-down, then typeahead container auto-fills with a selected State
+
+Variations:
+-----------
+2*. User scrolls to Async data sub-menu

docs/spec/typeahead/typeahead.examples.basic-array.use-case.md

@@ -0,0 +1,21 @@
+16.1: Typeahead Basic array example
+===================================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user Basic Typeahead functionality
+
+Main success scenario:
+----------------------
+1. User opens Typeahead demo page
+2. User clicks on Basic array sub-menu
+3. User sees typeahead input and typeahead card with "Model:" text
+4. When user starts to type a name of a State from "states" array and there is no matches the drop-down is hidden. The "Model" is filled with inputted data
+5. When there are any matches then a drop-down with a list of States matches is shown
+6. Items in the drop-down are clickable
+7. When user clicks on any item in typeahead drop-down, then typeahead container auto-fills with a selected State
+
+Variations:
+-----------
+2*. User scrolls to Basic array sub-menu

docs/spec/typeahead/typeahead.examples.dropup.use-case.md

@@ -0,0 +1,21 @@
+16.11: Typeahead Dropup example
+===============================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user Dropup functionality
+
+Main success scenario:
+----------------------
+1. User opens Typeahead demo page
+2. User clicks on Dropup sub-menu
+3. User sees typeahead input and typeahead card with "Model:" text
+4. When user starts to type a name of a State from "states" array and there is no matches the drop-up is hidden. The "Model" is filled with inputted data
+5. When there are any matches then a drop-up with a list of States matches is shown. Items quantity in the drop-down is limited to 7
+6. Items in the drop-up are clickable
+7. When user clicks on any item in typeahead drop-down, then typeahead container auto-fills with a selected State
+
+Variations:
+-----------
+2*. User scrolls to Dropup sub-menu

docs/spec/typeahead/typeahead.examples.grouping-results.use-case.md

@@ -0,0 +1,21 @@
+16.8: Typeahead Grouping results example
+==============================================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user Grouping results functionality
+
+Main success scenario:
+----------------------
+1. User opens Typeahead demo page
+2. User clicks on Grouping results sub-menu
+3. User sees typeahead input and typeahead card with "Model:" text
+4. When user starts to type a name of a State from "statesComplex" array and there is no matches the drop-down is hidden. The "Model" is filled with inputted data
+5. When there are any matches then a drop-down with a list of States matches is shown. All shown States are grouped by region
+6. Items in the drop-down are clickable
+7. When user clicks on any item in typeahead drop-down, then typeahead container auto-fills with a selected State
+
+Variations:
+-----------
+2*. User scrolls to Grouping results sub-menu

docs/spec/typeahead/typeahead.examples.ignore-spaces-order.use-case.md

@@ -0,0 +1,23 @@
+16.9: Typeahead Ignore spaces and order example
+==============================================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user how spaces and symbols order can be ignored during typing
+
+Main success scenario:
+----------------------
+1. User opens Typeahead demo page
+2. User clicks on Ignore spaces and order sub-menu
+3. User sees typeahead input and typeahead card with "Model:" text. User sees the button "Toggle typeaheadSingleWords"
+4. "Default:" the input property is set "typeaheadSingleWords = true". Order of typed symbols and spaces between them is ignored
+5. If user starts to type a name of a State from "states" array and there is no matches the drop-down is hidden. The "Model" is filled with inputted data
+6. When there are any matches then a drop-down with a list of States matches is shown
+7. When user sets the "typeaheadSingleWords = false" by clicking on the button "Toggle typeaheadSingleWords" then order of typed symbols and spaces between them will NOT be ignored
+8. If user starts to type a name of a State from "states" array and there is no matches the drop-down is hidden. The "Model" is filled with inputted data
+9. When there are any matches then a drop-down with a list of States matches is shown
+
+Variations:
+-----------
+2*. User scrolls to Ignore spaces and order sub-menu

docs/spec/typeahead/typeahead.examples.item-template.use-case.md

@@ -0,0 +1,25 @@
+16.2: Typeahead Item template example
+=====================================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user Item template functionality
+
+Main success scenario:
+----------------------
+1. User opens Typeahead demo page
+2. User click on Item template sub-menu
+3. User sees typeahead input and typeahead card with "Model:" text
+4. When user starts to type a name of a State from "states" array and there is no matches the drop-down is hidden. The "Model" is filled with inputted data
+5. When there are any matches then a drop-down with a list of States matches is shown. The list contains a template "This is: "_matched state_" index: _index #"_
+6. Items in the drop-down are clickable
+7. When user clicks on any item in typeahead drop-down, then typeahead container auto-fills with a selected State
+
+Extensions:
+-----------
+4a. Typing a part of the template "This is:" or "Index" does not call the drop-down
+
+Variations:
+-----------
+2*. User scrolls to Item template sub-menu

docs/spec/typeahead/typeahead.examples.latinize.use-case.md

@@ -0,0 +1,24 @@
+16.16: Typeahead Latinize example
+=================================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user a possibility to use Latinize letters
+
+Main success scenario:
+----------------------
+1. User opens Typeahead demo page
+2. User clicks on Latinize sub-menu
+3. User sees typeahead input and typeahead card with "Model:" text
+4. When user starts to type a name of a State from "frenchWords" array and there is no matches the drop-down is hidden. The "Model" is filled with inputted data
+5. When there are any matches then a drop-down with a list of matches is shown. Letters are auto-switched to expanded latin
+6. User is able to use expanded latin letters
+7. When user starts to type a name of a State from "frenchWords" array and there is no matches the drop-down is hidden. The "Model" is filled with inputted data
+6. When there are any matches then a drop-down with a list of matches is shown
+8. Items in the drop-down are clickable
+9. When user clicks on any item in typeahead drop-down, then typeahead container auto-fills with a selected State
+
+Variations:
+-----------
+2*. User scrolls to Latinize sub-menu

docs/spec/typeahead/typeahead.examples.no-result.use-case.md

@@ -0,0 +1,19 @@
+16.14: Typeahead No result example
+===================================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user how typeahead works if there are no matches
+
+Main success scenario:
+----------------------
+1. User opens Typeahead demo page
+2. User clicks on No result sub-menu
+3. User sees typeahead input and typeahead card with "Model:" text
+4. When user starts to type a name of a State from "states" and if there are no matches found than an error message is "No Results Found" is shown. The "Model" is filled with inputted data
+5. If there are any matches the drop-down is shown
+
+Variations:
+-----------
+2*. User scrolls to No result sub-menu

docs/spec/typeahead/typeahead.examples.on-blur.use-case.md

@@ -0,0 +1,21 @@
+16.12: Typeahead On blur example
+================================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user how typeahead works if focus on input was lost
+
+Main success scenario:
+----------------------
+1. User opens Typeahead demo page
+2. User clicks on On blur sub-menu
+3. User sees typeahead input and typeahead card with "Model:" text. User sees typeahead card with "Option on blur:" text
+4. When user starts to type a name of a State from "states" array and there is no matches the drop-down is hidden
+5. If user clicks anywhere outside the input than the "Option on blur" stays empty
+6. When there are any matches then a drop-down with a list of States matches is shown
+7. If user highlights any option in the list with a mouse or arrow keys and clicks anywhere outside the input than the "Option on blur" is filled with the option user selected
+
+Variations:
+-----------
+2*. User scrolls to On blur sub-menu

docs/spec/typeahead/typeahead.examples.on-select.use-case.md

@@ -0,0 +1,21 @@
+16.17: Typeahead On select example
+==================================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user how typeahed returns an object on selected option
+
+Main success scenario:
+----------------------
+1. User open Typeahead demo page
+2. User clicks on On select sub-menu
+3. User sees typeahead input and typeahead card with "Model:" text. User sees typeahead card with "Selected option:" text
+4. When user starts to type a name of a State from "states" array and there is no matches the drop-down is hidden. The "Model" is filled with inputted data. The "Selected option" is empty
+5. When there are any matches then a drop-down with a list of States matches is shown
+6. Items in the drop-down are clickable
+7. When user clicks on any item in typeahead drop-down, then typeahead container auto-fills with a selected State and "Selected option" is filled with info about selected object: "id", "name" and "region"
+
+Variations:
+-----------
+2*. User scrolls to On select sub-menu

docs/spec/typeahead/typeahead.examples.option-field.use-case.md

@@ -0,0 +1,21 @@
+16.3: Typeahead Option field example
+====================================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user Option field functionality
+
+Main success scenario:
+----------------------
+1. User open Typeahead demo page
+2. User clicks on Option field sub-menu
+3. User sees typeahead input and typeahead card with "Model:" text
+4. When user starts to type a name of a State from "statesComplex" array and there is no matches the drop-down is hidden. The "Model" is filled with inputted data
+5. When there are any matches then a drop-down with a list of States matches is shown
+6. Items in the drop-down are clickable
+7. When user clicks on any item in typeahead drop-down, then typeahead container auto-fills with a selected State
+
+Variations:
+-----------
+2*. User scrolls to Option field sub-menu

docs/spec/typeahead/typeahead.examples.phrase-delimiters.use-case.md

@@ -0,0 +1,22 @@
+16.10: Typeahead Phrase delimiters example
+====================================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user delimiters functionality to match exact phrase
+
+Main success scenario:
+----------------------
+1. User open Typeahead demo page
+2. User clicks on Phrase delimiters sub-menu
+3. User sees typeahead input and typeahead card with "Model:" text
+4. User is able to use "&" and "," to delimit words for exact match
+5. When user uses "&" or "," and type "&york new&" or ",york new," than no drop-down with the match would be shown
+6. When user starts to type "york new" without delimiters than a drop-down with the match is shown
+7. Items in the drop-down are clickable
+8. Items in the drop-down are clickable. Click on any item auto-fills the "Model" with a selected State
+
+Variations:
+-----------
+2*. User scrolls to Phrase delimiters sub-menu

docs/spec/typeahead/typeahead.examples.reactive-forms.use-case.md

@@ -0,0 +1,22 @@
+16.7: Typeahead Reactive forms example
+=============================================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user how typeahead can be used in reactive forms
+
+Main success scenario:
+----------------------
+1. User open Typeahead demo page
+2. User clicks on Reactive forms sub-menu
+3. User sees typeahead input and typeahead card with "Model:" text and it's filled with "null". The input has a placeholder "Typeahead inside a form"
+4. When user places mouse coursor in the "Model" then a drop-down with the first seven States is shown
+5. When user starts to type a name of a State from "states" array and there are no matches then the drop-down is hidden. The "Model" is filled with inputted data
+6. If there are any matches found then the drop-down with a list of States matches is shown
+7. Items in the drop-down are clickable
+8. When user clicks on any item in typeahead drop-down, then typeahead container auto-fills with a selected State
+
+Variations:
+-----------
+2*. User scrolls to Reactive forms sub-menu

docs/spec/typeahead/typeahead.examples.scrollable.use-case.md

@@ -0,0 +1,22 @@
+16.15: Typeahead Scrollable example
+===================================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user options in drop-down can be scrollable
+
+Main success scenario:
+----------------------
+1. User open Typeahead demo page
+2. User clicks on Scrollable sub-menu
+3. User sees typeahead input and typeahead card with "Model:" text
+4. When user starts to type a name of a State from "states" array and there is no matches the drop-down is hidden. The "Model" is filled with inputted data
+5. When there are any matches then a drop-down with a list of States matches is shown. The drop-down is limited to show 5 items and has a scroll
+6. User is able to scroll down/up to see the matches list
+7. Items in the drop-down are clickable
+8. When user clicks on any item in typeahead drop-down, then typeahead container auto-fills with a selected State
+
+Variations:
+-----------
+2*. User scrolls to Scrollable sub-menu

docs/spec/typeahead/typeahead.examples.template-driven-forms.use-case.md

@@ -0,0 +1,24 @@
+16.6: Typeahead Template-driven forms example
+===================================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user how typeahead can be used in template-driven forms
+
+Main success scenario:
+----------------------
+1. User opens Typeahead demo page
+2. User clicks on Basic array sub-menu
+3. User sees the typeahead input and typeahead card with "Model:", by default it filled with the next object: "{ "address": "312 Sundown Lane", "state": null }"
+4. User sees typeahead input "Adress" input with a placeholder "312 Sundown Lane", by default
+5. User sees typeahead input "State"
+6. When user starts to type in the "Address" input then the inputted data is shown in the "Model"
+7. When user starts to type a name of a State from "states" array and there is no matches the drop-down is hidden. The "Model" is filled with inputted data in the key: "state"
+8. When there are any matches then a drop-down with a list of States matches is shown
+9. Items in the drop-down are clickable
+10. When user clicks on any item in typeahead drop-down, then typeahead container "Model:" auto-fills with a selected State in the key "state"
+
+Variations:
+-----------
+2*. User scrolls to Template-driven forms sub-menu

docs/spec/typeahead/typeahead.examples.with-delay.use-case.md

@@ -0,0 +1,22 @@
+16.5: Typeahead With delay example
+==================================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user With delay functionality
+
+Main success scenario:
+----------------------
+1. User open Typeahead demo page
+2. User clicks on With delay sub-menu
+3. User sees typeahead input and typeahead card with "Model:" text
+4. When user starts to type a name of a State from "states" array Drop-down update delay depends on key "typeaheadWaitMs", time delay = 1 sec, by default
+5. If there are no matches the drop-down is hidden. The "Model" is filled with inputted data
+6. If there are any matches then a drop-down with a list of States matches is shown
+7. Items in the drop-down are clickable
+8. When user clicks on any item in typeahead drop-down, then typeahead container auto-fills with a selected State
+
+Variations:
+-----------
+2*. User scrolls to With delay sub-menu