feat(popover): add delay option (#5389) (#5582)

* add delay option to popover
* fix(popover): small fix in description

Author: amiram

cypress/full/popover_page_spec.ts

@@ -360,4 +360,24 @@ describe('Popover demo page test suite', () => {
       popover.isPopoverDismiss(popoverContext);
     });
   });
+
+  describe('Popover with delay', () => {
+    const delayPopover = popover.exampleDemosArr.delayPopover;
+    it('when user clicks on "Popover with 0.5sec delay", then popover-container appear', () => {
+      cy.viewport(1440, 900);
+      popover.clickOnDemoMenu('Popover with delay');
+      popover.clickOnBtn(delayPopover);
+      popover.isPopoverAppears(delayPopover);
+      popover.isPopoverVisible(delayPopover);
+    });
+
+    it('when user clicks on "Popover with 0.5sec delay" again, then popover-container disappeared', () => {
+      cy.viewport(1440, 900);
+      popover.clickOnDemoMenu('Popover with delay');
+      popover.clickOnBtn(delayPopover);
+      popover.isPopoverAppears(delayPopover);
+      popover.clickOnBtn(delayPopover);
+      popover.isPopoverDismiss(delayPopover);
+    });
+  });
 });

cypress/support/popover.po.ts

@@ -25,7 +25,8 @@ export class PopoverPo extends BaseComponent {
     triggerIsOpen: 'demo-popover-trigger-by-isopen',
     componentLevelStyling: 'demo-popover-styling-local',
     customClass: 'demo-popover-class',
-    popoverContext: 'demo-popover-context'
+    popoverContext: 'demo-popover-context',
+    delayPopover: 'demo-popover-delay'
   };
 
   isPopoverPlacementCorrect(baseSelector: string, placement: string) {

demo/src/app/components/+popover/demos/config/config.ts

@@ -7,7 +7,8 @@ export function getPopoverConfig(): PopoverConfig {
   return Object.assign(new PopoverConfig(), {
     placement: 'right',
     container: 'body',
-    triggers: 'focus'
+    triggers: 'focus',
+    delay: 500
   });
 }
 

demo/src/app/components/+popover/demos/delay/delay.html

@@ -0,0 +1,5 @@
+<button type="button" class="btn btn-primary"
+        popover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." [delay]="500">
+  Popover with 0.5sec delay
+</button>
+

demo/src/app/components/+popover/demos/delay/delay.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'demo-popover-delay',
+  templateUrl: './delay.html'
+})
+export class DemoPopoverDelayComponent {}

demo/src/app/components/+popover/demos/index.ts

@@ -6,6 +6,7 @@ import { DemoPopoverConfigComponent } from './config/config';
 import { DemoPopoverContainerComponent } from './container/container';
 import { DemoPopoverContextComponent } from './popover-context/popover-context';
 import { DemoPopoverCustomContentComponent } from './custom-content/custom-content';
+import { DemoPopoverDelayComponent } from './delay/delay';
 import { DemoPopoverDismissComponent } from './dismiss/dismiss';
 import { DemoPopoverDynamicComponent } from './dynamic/dynamic';
 import { DemoPopoverDynamicHtmlComponent } from './dynamic-html/dynamic-html';
@@ -26,6 +27,7 @@ export const DEMO_COMPONENTS = [
   DemoPopoverContainerComponent,
   DemoPopoverContextComponent,
   DemoPopoverCustomContentComponent,
+  DemoPopoverDelayComponent,
   DemoPopoverDismissComponent,
   DemoPopoverDynamicComponent,
   DemoPopoverDynamicHtmlComponent,

demo/src/app/components/+popover/popover-section.list.ts

@@ -6,6 +6,7 @@ import { DemoPopoverConfigComponent } from './demos/config/config';
 import { DemoPopoverContainerComponent } from './demos/container/container';
 import { DemoPopoverContextComponent } from './demos/popover-context/popover-context';
 import { DemoPopoverCustomContentComponent } from './demos/custom-content/custom-content';
+import { DemoPopoverDelayComponent } from './demos/delay/delay';
 import { DemoPopoverDismissComponent } from './demos/dismiss/dismiss';
 import { DemoPopoverDynamicComponent } from './demos/dynamic/dynamic';
 import { DemoPopoverDynamicHtmlComponent } from './demos/dynamic-html/dynamic-html';
@@ -52,7 +53,7 @@ export const demoComponentContent: ContentSection[] = [
         anchor: 'placement',
         component: require('!!raw-loader!./demos/placement/placement.ts'),
         html: require('!!raw-loader!./demos/placement/placement.html'),
-        description: `<p>Four positioning options are available: <code>top</code>, <code>right</code>, 
+        description: `<p>Four positioning options are available: <code>top</code>, <code>right</code>,
         <code>bottom</code>, and <code>left</code>.
         Besides that, <code>auto</code> option may be used to detect a position that fits the component on screen.</p>`,
         outlet: DemoPopoverPlacementComponent
@@ -177,6 +178,14 @@ export const demoComponentContent: ContentSection[] = [
         component: require('!!raw-loader!./demos/popover-context/popover-context.ts'),
         html: require('!!raw-loader!./demos/popover-context/popover-context.html'),
         outlet: DemoPopoverContextComponent
+      },
+      {
+        title: 'Popover with delay',
+        anchor: 'popover-delay',
+        component: require('!!raw-loader!./demos/delay/delay.ts'),
+        html: require('!!raw-loader!./demos/delay/delay.html'),
+        description: `<p>Click on the button to see popover delayed for 0,5 second </p>`,
+        outlet: DemoPopoverDelayComponent
       }
     ]
   },

demo/src/ng-api-doc.ts

@@ -2624,6 +2624,12 @@ export const ngdoc: any = {
         "defaultValue": "click",
         "type": "string",
         "description": "<p>Specifies events that should trigger. Supports a space separated list of\nevent names.</p>\n"
+      },
+      {
+        "name": "delay",
+        "defaultValue": "0",
+        "type": "number",
+        "description": "<p>delay before showing the popover</p>\n"
       }
     ]
   },
@@ -2649,6 +2655,11 @@ export const ngdoc: any = {
         "type": "string",
         "description": "<p>Css class for popover container</p>\n"
       },
+      {
+        "name": "delay",
+        "type": "number",
+        "description": "<p>Delay before showing the popover</p>\n"
+      },
       {
         "name": "isOpen",
         "type": "boolean",

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

@@ -0,0 +1,20 @@
+9.17: Popover with delay example
+==================================
+**Primary Actor**: User
+
+**Scope**: Ngx-bootstrap DEMO / BS version 3&4
+
+**Goal**:
+
+Main success scenario:
+----------------------
+1. User opens Popover demo page
+2. User clicks on Popover with delay sub-menu
+3. User see button "Popover with 0.5sec delay"
+4. When user clicks on "Popover with 0.5sec delay", then popover-container appear above the button with 0.5sec delay
+5. When user clicks on "Popover with 0.5sec delay" again, then popover-container disappeared
+6. Template src should be written with [delay]="500"
+
+Variations:
+-----------
+2*. User scroll to Popover with delay sub-menu

src/popover/popover.config.ts

@@ -25,4 +25,6 @@ export class PopoverConfig {
    * A selector specifying the element the popover should be appended to.
    */
   container: string;
+  /** delay before showing the tooltip */
+  delay = 0;
 }