feat(popover & tooltip): add container classes (#2190)

* feat(tooltip): add containerClass * feat(popover): add containerClass * refactor(popover & tooltip): string setters, no reserved keywords fixes #1707 fixes #1395
valor-software · Jul 18, 2017 · 690d811 · 690d811
1 parent d039a8d
commit 690d811
Show file tree

Hide file tree

Showing 14 changed files with 97 additions and 11 deletions.
diff --git a/demo/src/app/components/+popover/demos/class/class.html b/demo/src/app/components/+popover/demos/class/class.html
@@ -0,0 +1,5 @@
+<button type="button" class="btn btn-primary"
+        popover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." containerClass="customClass">
+  Custom class demo
+</button>
+
diff --git a/demo/src/app/components/+popover/demos/class/class.ts b/demo/src/app/components/+popover/demos/class/class.ts
@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'demo-popover-class',
+  templateUrl: './class.html'
+})
+export class DemoPopoverClassComponent {
+}
diff --git a/demo/src/app/components/+popover/demos/index.ts b/demo/src/app/components/+popover/demos/index.ts
@@ -9,6 +9,7 @@ import { DemoPopoverStylingGlobalComponent } from './styling-global/styling-glob
 import { DemoPopoverStylingLocalComponent } from './styling-local/styling-local';
 import { DemoPopoverTriggersCustomComponent } from './triggers-custom/triggers-custom';
 import { DemoPopoverTriggersManualComponent } from './triggers-manual/triggers-manual';
+import { DemoPopoverClassComponent } from './class/class';
 
 export const DEMO_COMPONENTS = [
   DemoPopoverBasicComponent,
@@ -21,7 +22,8 @@ export const DEMO_COMPONENTS = [
   DemoPopoverStylingGlobalComponent,
   DemoPopoverStylingLocalComponent,
   DemoPopoverTriggersCustomComponent,
-  DemoPopoverTriggersManualComponent
+  DemoPopoverTriggersManualComponent,
+  DemoPopoverClassComponent
 ];
 
 export const DEMOS = {
@@ -68,5 +70,9 @@ export const DEMOS = {
   stylingGlobal: {
     component: require('!!raw-loader?lang=typescript!./styling-global/styling-global.ts'),
     html: require('!!raw-loader?lang=markup!./styling-global/styling-global.html')
+  },
+  customClass: {
+    component: require('!!raw-loader?lang=typescript!./class/class.ts'),
+    html: require('!!raw-loader?lang=markup!./class/class.html')
   }
 };
diff --git a/demo/src/app/components/+popover/popover-section.component.ts b/demo/src/app/components/+popover/popover-section.component.ts
@@ -24,6 +24,7 @@ let titleDoc = require('html-loader!markdown-loader!./docs/title.md');
         <li><a routerLink="." fragment="triggers-custom">Custom triggers</a></li>
         <li><a routerLink="." fragment="triggers-manual">Manual triggering</a></li>
         <li><a routerLink="." fragment="styling-local">Component level styling</a></li>
+        <li><a routerLink="." fragment="class">Custom class</a></li>
         <!--<li><a routerLink="." fragment="styling-global">Global styling</a></li>-->
       </ul>
     </li>
@@ -98,7 +99,11 @@ let titleDoc = require('html-loader!markdown-loader!./docs/title.md');
     <demo-popover-styling-local></demo-popover-styling-local>
   </ng-sample-box>
 
-  <!-- todo: add custom class -->
+  <h2 routerLink="." fragment="class" id="class">Custom class</h2>
+  <ng-sample-box [ts]="demos.customClass.component" [html]="demos.customClass.html">
+    <demo-popover-class></demo-popover-class>
+  </ng-sample-box>
+  
   <!--<h2 routerLink="." fragment="styling-global" id="styling-global">Global styling</h2>-->
   <!--<ng-sample-box [ts]="demos.stylingGlobal.component" [html]="demos.stylingGlobal.html">-->
     <!--<demo-popover-styling-global></demo-popover-styling-global>-->

diff --git a/demo/src/app/components/+tooltip/demos/class/class.html b/demo/src/app/components/+tooltip/demos/class/class.html
@@ -0,0 +1,5 @@
+<button type="button" class="btn btn-primary"
+        tooltip="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." containerClass="customClass">
+  Demo with custom class
+</button>
+
diff --git a/demo/src/app/components/+tooltip/demos/class/class.ts b/demo/src/app/components/+tooltip/demos/class/class.ts
@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'demo-tooltip-class',
+  templateUrl: './class.html'
+})
+export class DemoTooltipClassComponent {
+}
diff --git a/demo/src/app/components/+tooltip/demos/index.ts b/demo/src/app/components/+tooltip/demos/index.ts
@@ -9,6 +9,7 @@ import { DemoTooltipStylingLocalComponent } from './styling-local/styling-local'
 import { DemoTooltipTriggersCustomComponent } from './triggers-custom/triggers-custom';
 import { DemoTooltipTriggersManualComponent } from './triggers-manual/triggers-manual';
 import { DemoTooltipDynamicHtmlComponent } from './dynamic-html/dynamic-html';
+import { DemoTooltipClassComponent } from './class/class';
 
 export const DEMO_COMPONENTS = [
   DemoTooltipBasicComponent,
@@ -21,7 +22,8 @@ export const DEMO_COMPONENTS = [
   DemoTooltipStylingGlobalComponent,
   DemoTooltipStylingLocalComponent,
   DemoTooltipTriggersCustomComponent,
-  DemoTooltipTriggersManualComponent
+  DemoTooltipTriggersManualComponent,
+  DemoTooltipClassComponent
 ];
 
 export const DEMOS = {
@@ -68,5 +70,9 @@ export const DEMOS = {
   stylingGlobal: {
     component: require('!!raw-loader?lang=typescript!./styling-global/styling-global.ts'),
     html: require('!!raw-loader?lang=markup!./styling-global/styling-global.html')
+  },
+  customClass: {
+    component: require('!!raw-loader?lang=typescript!./class/class.ts'),
+    html: require('!!raw-loader?lang=markup!./class/class.html')
   }
 };
diff --git a/demo/src/app/components/+tooltip/tooltip-section.component.ts b/demo/src/app/components/+tooltip/tooltip-section.component.ts
@@ -23,6 +23,7 @@ let titleDoc = require('html-loader!markdown-loader!./docs/title.md');
         <li><a routerLink="." fragment="triggers-custom">Custom triggers</a></li>
         <li><a routerLink="." fragment="triggers-manual">Manual triggering</a></li>
         <li><a routerLink="." fragment="styling-local">Component level styling</a></li>
+        <li><a routerLink="." fragment="custom-class">Custom class</a></li>
       </ul>
     </li>
     <li><a routerLink="." fragment="api-reference">API Reference</a>
@@ -95,6 +96,11 @@ let titleDoc = require('html-loader!markdown-loader!./docs/title.md');
   <ng-sample-box [ts]="demos.stylingComponent.component" [html]="demos.stylingComponent.html">
     <demo-tooltip-styling-local></demo-tooltip-styling-local>
   </ng-sample-box>
+
+  <h2 routerLink="." fragment="custom-class" id="custom-class">Custom class</h2>
+  <ng-sample-box [ts]="demos.customClass.component" [html]="demos.customClass.html">
+    <demo-tooltip-class></demo-tooltip-class>
+  </ng-sample-box>
       
   <h2 routerLink="." fragment="api-reference" id="api-reference">API Reference</h2>
   

diff --git a/demo/src/assets/css/style.css b/demo/src/assets/css/style.css
@@ -620,7 +620,15 @@ pre {
   transition: opacity 1s;
 }
 .tooltip.customClass .tooltip-arrow {
-  display: none;
+  border-top-color: #ffff75;
+}
+
+/* Specify styling for popover contents */
+.popover.customClass, .popover.customClass .popover-content {
+  background: #94bada;
+}
+.popover.customClass.top>.arrow:after {
+  border-top-color: #94bada;
 }
 
 .nav-item.customClass {

diff --git a/demo/src/ng-api-doc.ts b/demo/src/ng-api-doc.ts
@@ -1007,6 +1007,12 @@ export const ngdoc: any = {
           }
         ],
         "returnType": "void"
+      },
+      {
+        "name": "focusOtherModal",
+        "description": "<p>Events tricks </p>\n",
+        "args": [],
+        "returnType": "void"
       }
     ]
   },
@@ -1252,6 +1258,11 @@ export const ngdoc: any = {
         "type": "string",
         "description": "<p>A selector specifying the element the popover should be appended to.\nCurrently only supports &quot;body&quot;.</p>\n"
       },
+      {
+        "name": "containerClass",
+        "type": "string",
+        "description": "<p>Css class for popover container</p>\n"
+      },
       {
         "name": "isOpen",
         "type": "boolean",
@@ -1897,6 +1908,11 @@ export const ngdoc: any = {
         "type": "string",
         "description": "<p>A selector specifying the element the tooltip should be appended to.\nCurrently only supports &quot;body&quot;.</p>\n"
       },
+      {
+        "name": "containerClass",
+        "type": "string",
+        "description": "<p>Css class for tooltip container</p>\n"
+      },
       {
         "name": "isDisabled",
         "type": "boolean",

diff --git a/src/popover/popover-container.component.ts b/src/popover/popover-container.component.ts
@@ -7,7 +7,7 @@ import { isBs3 } from '../utils/ng2-bootstrap-config';
   changeDetection: ChangeDetectionStrategy.OnPush,
   // tslint:disable-next-line
   host: {
-    '[class]': '"popover in popover-" + placement + " " + placement',
+    '[class]': '"popover in popover-" + placement + " " + placement + " " + containerClass',
     '[class.show]': '!isBs3',
     role: 'tooltip',
     style: 'display:block;'
@@ -20,6 +20,7 @@ import { isBs3 } from '../utils/ng2-bootstrap-config';
 export class PopoverContainerComponent {
   @Input() public placement: string;
   @Input() public title: string;
+  public containerClass: string;
 
   public get isBs3(): boolean {
     return isBs3();

diff --git a/src/popover/popover.directive.ts b/src/popover/popover.directive.ts
@@ -34,6 +34,11 @@ export class PopoverDirective implements OnInit, OnDestroy {
    */
   @Input() public container: string;
 
+  /**
+   * Css class for popover container
+   */
+  @Input() public containerClass: string;
+
   /**
    * Returns whether or not the popover is currently being shown
    */
@@ -95,7 +100,8 @@ export class PopoverDirective implements OnInit, OnDestroy {
       .show({
         content: this.popover,
         placement: this.placement,
-        title: this.popoverTitle
+        title: this.popoverTitle,
+        containerClass: this.containerClass
       });
     this.isOpen = true;
   }

diff --git a/src/tooltip/tooltip-container.component.ts b/src/tooltip/tooltip-container.component.ts
@@ -9,7 +9,7 @@ import { isBs3 } from '../utils/ng2-bootstrap-config';
   changeDetection: ChangeDetectionStrategy.OnPush,
   // tslint:disable-next-line
   host: {
-    '[class]': '"tooltip in tooltip-" + placement + " " + placement',
+    '[class]': '"tooltip in tooltip-" + placement + " " + placement + " " + containerClass',
     '[class.show]': '!isBs3',
     role: 'tooltip'
   },
@@ -40,7 +40,7 @@ import { isBs3 } from '../utils/ng2-bootstrap-config';
 export class TooltipContainerComponent implements AfterViewInit {
   public classMap: any;
   public placement: string;
-  public popupClass: string;
+  public containerClass: string;
   public animation: boolean;
 
   public get isBs3(): boolean {
@@ -61,8 +61,8 @@ export class TooltipContainerComponent implements AfterViewInit {
       this.classMap.fade = true;
     }
 
-    if (this.popupClass) {
-      this.classMap[this.popupClass] = true;
+    if (this.containerClass) {
+      this.classMap[this.containerClass] = true;
     }
   }
 }
diff --git a/src/tooltip/tooltip.directive.ts b/src/tooltip/tooltip.directive.ts
@@ -50,6 +50,11 @@ export class TooltipDirective implements OnInit, OnDestroy {
    */
   @Input() public isDisabled: boolean;
 
+  /**
+   * Css class for tooltip container
+   */
+  @Input() public containerClass: string;
+
   /**
    * Emits an event when the tooltip is shown
    */
@@ -204,7 +209,8 @@ export class TooltipDirective implements OnInit, OnDestroy {
       .position({attachment: this.placement})
       .show({
         content: this.tooltip,
-        placement: this.placement
+        placement: this.placement,
+        containerClass: this.containerClass
       });
 
     if (this._delay) {