feat(doc): added docs for modals component (#4679)

docs/spec/index.md

@@ -0,0 +1,72 @@
+**Use-cases for each NGX-Bootstrap component show examples of using it by user**
+
+## Accordion
+
+## Alerts
+
+
+## Buttons
+
+
+## Carousel
+
+## Collapse
+
+## Datepicker
+
+## Dropdowns
+
+## Modals
+
+[Service examples. Template](modals/modals.service-examples.template.use-case.md)
+
+[Service examples. Component](modals/modals.service-examples.component.use-case.md)
+
+[Service examples. Nested](modals/modals.service-examples.nested.use-case.md)
+
+[Service examples. Scrolling long content](modals/modals.service-examples.scrolling-long-content.use-case.md)
+
+[Service examples. Events](modals/modals.service-examples.events.use-case.md)
+
+[Service examples. Confirm Window](modals/modals.service-examples.confirm-window.use-case.md)
+
+[Service examples. Сustom css class](modals/modals.service-examples.custom-css-class.use-case.md)
+
+[Service examples. Animation option](modals/modals.service-examples.animation-option.use-case.md)
+
+[Service examples. Esc closing option](modals/modals.service-examples.esc-closing-option.use-case.md)
+
+[Service examples. Modal window with tooltip and popover](modals/modals.service-examples.tooltip-and-popover.use-case.md)
+
+[Service examples. Backdrop options](modals/modals.service-examples.backdrop-options.use-case.md)
+
+[Directive examples. Static modal](modals/modals.directive-examples.static-modal.use-cases.md)
+
+[Directive examples. Optional sizes](modals/modals.directive-examples.optional-sizes.md)
+
+[Directive examples. Child modal](modals/modals.directive-examples.child-modal.use-case.md)
+
+[Directive examples. Nested modals](modals/modals.directive-examples.nested-modals.use-cases.md)
+
+[Directive examples. Modal events](modals/modals.directive-examples.modal-events.use-cases.md)
+
+[Directive examples. Auto shown modal](modals/modals.directive-examples.auto-shown-modal.md)
+
+
+## Pagination
+
+## Popover
+
+## Progressbar
+
+## Rating
+
+## Sortable
+
+## Tabs
+
+## Timepicker
+
+## Tooltip
+
+## Typeahead

docs/spec/modals/modals.directive-examples.auto-shown-modal.md

@@ -0,0 +1,22 @@
+7.17: Modals service auto shown modal
+=================================================
+
+**Primary Actor**: User 
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user auto shown modal functionality
+
+Main success scenario:
+----------------------
+
+1. User opens "Modals" demo page
+2. User clicks on "Auto shown modal"  sub-menu
+3. After click on "Render auto-shown modal" button, then modal popup is opened
+4. When user closes modal popup by click on the cross, modal popup is removed from the DOM  
+
+Variations:
+----------
+
+2*. User scrolls to "Auto shown modal"
+

docs/spec/modals/modals.directive-examples.child-modal.use-case.md

@@ -0,0 +1,21 @@
+7.13: Modals directive examples  child modal
+===============================================
+
+**Primary Actor**: User  
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user Child modal functionality
+
+Main success scenario:
+----------------------
+
+1. User opens "Modals" demo page
+2. User clicks on "Child modal" sub-menu
+3. After click on "Open child modal" button, child modal popup is opened
+4. When user closes modal popup by click on the cross, modal popup closed
+
+Variations:
+----------
+
+2*. User scrolls to "Child modal"

docs/spec/modals/modals.directive-examples.modal-events.use-cases.md

@@ -0,0 +1,25 @@
+7.16: Modals service modal events
+=================================================
+
+**Primary Actor**: User 
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user modals events functionality
+
+Main success scenario:
+----------------------
+
+1. User opens "Modals" demo page
+2. User clicks on "Modal events"  sub-menu
+3. When user clicks on "Open modal" button, modal popup is opened, should be messages "event onShow is fired" and "event onShown is fired"
+4. When user closes modal popup by click on the cross, should be  messages "event onHide is fired" and "event onHidden is fired"
+
+Variations:
+----------
+
+2*. User scrolls to "Modals events"
+4*. When user closes modal popup by click on backdrop, should be messages "event onHide is fired, dismissed by backdrop-click" 
+and "event onHidden is fired, dismissed by backdrop-click"
+4**. When user closes modal popup by click ESC, should be messages "event onHide is fired, dismissed by esc" 
+and "event onHidden is fired, dismissed by esc"

docs/spec/modals/modals.directive-examples.nested-modals.use-cases.md

@@ -0,0 +1,34 @@
+7.14: Modals directive examples nested modals
+===============================================
+
+**Primary Actor**: User  
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user Child modal functionality
+
+Main success scenario:
+----------------------
+
+1. User opens "Modals" demo page
+2. User clicks on "Nested modals" sub-menu
+3. After click on "Open parent modal" button,  modal popup is opened and user sees "Open second modal" button
+4. When user clicks on "Open second modal" button, then second modal is opened, user sees 
+ "Open third modal button", backdrop is changed
+5. When user clicks on "Open third modal button" button, then second modal is opened, backdrop is changed
+6. When user closes third modal popup by click on the cross, then third modal popup is closed, backdrop is changed
+7. When user closes second modal popup by click on the cross, then second modal popup is closed, backdrop is changed
+8. When user closes first modal popup by click on the cross, then first modal popup is closed, backdrop is closed
+
+Variations:
+----------
+
+2*. User scrolls to "Nested modals"
+6*. When user closes third modal popup by backdrop click, then third modal popup is closed, backdrop is changed
+6**. When user closes third modal popup by click ESC , then third modal popup is closed, backdrop is changed
+
+7*. When user closes second modal popup by backdrop click, then second modal popup is closed, backdrop is changed
+7**. When user closes second modal popup by click ESC , then second modal popup is closed, backdrop is changed
+
+8*. When user closes first modal popup by backdrop click, then first modal popup is closed, backdrop is changed
+8**. When user closes first modal popup by click ESC , then first modal popup is closed, backdrop is changed

docs/spec/modals/modals.directive-examples.optional-sizes.md

@@ -0,0 +1,23 @@
+7.13: Modals directive examples  optional sizes
+===============================================
+
+**Primary Actor**: User  
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user optional sizes functionality
+
+Main success scenario:
+----------------------
+
+1. User opens "Modals" demo page
+2. User clicks on "Optional sizes" sub-menu
+3. After click on "Large modal" button, large modal popup is opened
+4. When user closes large modal popup by click on the cross, modal popup closed
+5. After click on "Small modal" button, small modal popup is opened
+6. When user closes modal popup by click on the cross, modal popup is closed
+
+Variations:
+----------
+
+2*. User scrolls to "Static modal"

docs/spec/modals/modals.directive-examples.static-modal.use-cases.md

@@ -0,0 +1,22 @@
+7.12: Modals directive examples  static modal
+============================================
+
+**Primary Actor**: User  
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user static modal functionality
+
+Main success scenario:
+----------------------
+
+1. User opens "Modals" demo page
+2. User clicks on "Static modal" sub-menu
+4. After click on "Static modal" button, modal popup is opened
+5. When user closes modal popup by backdrop click, modal popup is still opened
+6. When user closes modal popup by click on the cross, modal popup is closed
+
+Variations:
+----------
+
+2*. User scrolls to "Static modal"

docs/spec/modals/modals.service-examples.animation-option.use-case.md

@@ -0,0 +1,24 @@
+7.8: Modals service examples animation option
+=================================================
+
+**Primary Actor**: User  
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user animation option functionality
+
+Main success scenario:
+----------------------
+
+1. User opens "Modals" demo page
+2. User clicks on "Animation option" sub-menu
+3. When user clicks on "Enable animation" button, title of button should change to "Disable animation"
+4. And after that click on "Open modal with custom css class" button, modal popup is opened with animations effects
+5. When user closes modal popup by click on the cross, modal popup is closed
+6. When user clicks on "Disable animation" button, title of button change to "Enable animation"
+7. And after that click on "Open modal with custom css class" button, modal popup is opened without animations effects
+
+Variations:
+----------
+
+2*. User scrolls to "Animation option"

docs/spec/modals/modals.service-examples.backdrop-options.use-case.md

@@ -0,0 +1,27 @@
+7.11: Modals service examples backdrop options 
+=============================================
+
+**Primary Actor**: User 
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user modal window with tooltip and popover functionality
+
+Main success scenario:
+----------------------
+
+1. User opens "Modals" demo page
+2. User clicks on "Backdrop options " sub-menu
+3. When user clicks on "Enable backdrop" button, title of button should change to "Disable backdrop"
+4. And after that click on "Open modal" button, modal popup is opened, backdrop is opened
+5. When user clicks on "Disable backdrop" button, title of button should change to "Enable backdrop"
+6. And after that click on "Open modal" button, modal popup is opened, backdrop is closed
+7. When user clicks on "Disable backdrop click" button, title of button should change to "Enable backdrop click"
+8. And after that open modal popup and close by click on backdrop, modal popup is opened
+9. When user clicks on "Enable backdrop click" button, title of button should change to "Disable backdrop click"
+10. And after that open modal popup and close by click on backdrop, modal popup is closed
+
+Variations:
+----------
+
+2*. User scrolls to "Modal window with tooltip and popover"

docs/spec/modals/modals.service-examples.component.use-case.md

@@ -0,0 +1,24 @@
+7.2: Modals service examples component
+===================================
+
+**Primary Actor**: User  
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user modal component functionality
+
+Main success scenario:
+----------------------
+
+1. User opens Modals demo page
+2. User clicks on Component sub-menu
+3. When user clicks on "Create template modal" button, modal popup is opened like a component, backdrop is enabled, "Close" button should be present
+5. When user closes modal popup by click on the cross, modal popup is closed and backdrop is inactive
+
+Variations:
+----------
+
+2*. User scrolls to "Component"
+5*. When user closes modal popup by click on backdrop, modal popup is closed and backdrop is disabled
+5**. When user closes modal popup by click ESC, modal popup is closed and backdrop is disabled
+5***. When user closes modal popup by click on Close button, modal popup is closed and backdrop is disabled

docs/spec/modals/modals.service-examples.confirm-window.use-case.md

@@ -0,0 +1,23 @@
+7.6: Modals service examples confirm window
+=================================================
+
+**Primary Actor**: User 
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user modals confirm window functionality
+
+Main success scenario:
+----------------------
+
+1. User opens "Modals" demo page
+2. User clicks on "Confirm Window"  sub-menu
+3. When user clicks on "Open modal" button, modal popup is opened, should contains two buttons: "yes" and "no"
+4. When user closes modal popup by click on "Yes", should be messages "Confirmed!"
+
+Variations:
+----------
+
+2*. User scrolls to Confirm window
+4*. When user closes modal popup by click on "No", should be messages "Declined!"
+

docs/spec/modals/modals.service-examples.custom-css-class.use-case.md

@@ -0,0 +1,22 @@
+7.7: Modals service examples custom css class
+=================================================
+
+**Primary Actor**: User 
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4 
+
+**Goal**: Show user custom css class functionality
+
+Main success scenario:
+----------------------
+
+1. User opens "Modals" demo page
+2. User clicks on "Сustom css class"  sub-menu
+3. When user clicks on "Open modal with custom css class" button, modal popup is opened with custom class
+4. When user closes modal popup by the cross, modal popup is closed
+
+Variations:
+----------
+
+2*. User scrolls to "Custom css class"
+

docs/spec/modals/modals.service-examples.esc-closing-option.use-case.md

@@ -0,0 +1,25 @@
+7.9: Modals service examples esc closing option
+===============================================
+
+**Primary Actor**: User  
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**: Show user esc closing option functionality
+
+Main success scenario:
+----------------------
+
+1. User opens "Modals" demo page
+2. User clicks on "Esc closing option" sub-menu
+3. When user clicks on "Enable Esc" button, title of button should change to "Disable Esc"
+4. And after that click on "Open modal" button, modal popup is opened
+5. When user closes modal popup by click ESC, modal popup is closed
+6. When user clicks on "Disable Esc" button, title of button change to "Enable Esc"
+7. And after that click on "Open modal" button, modal popup is opened
+8. When user closes modal popup by click ESC, modal popup is opened
+
+Variations:
+----------
+
+2*. User scrolls to "Esc closing option"