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

Author: IlyaSurmay

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>
+

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 {
+}

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')
   }
 };

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>-->

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>
+

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 {
+}

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')
   }
 };

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>
   

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 {

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",