carbon-components-angular 5.22.1 → 5.23.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (100) hide show
  1. package/docs/documentation/components/PopoverContent.html +215 -11
  2. package/docs/documentation/components/Toggletip.html +842 -459
  3. package/docs/documentation/components/Tooltip.html +1056 -606
  4. package/docs/documentation/components/TooltipDefinition.html +977 -538
  5. package/docs/documentation/coverage.html +20 -20
  6. package/docs/documentation/dependencies.html +3 -1
  7. package/docs/documentation/directives/PopoverContainer.html +1017 -636
  8. package/docs/documentation/images/coverage-badge-documentation.svg +1 -1
  9. package/docs/documentation/js/search/search_index.js +2 -2
  10. package/docs/documentation/miscellaneous/typealiases.html +21 -0
  11. package/docs/documentation/modules/ComboBoxModule/dependencies.svg +4 -4
  12. package/docs/documentation/modules/ComboBoxModule.html +4 -4
  13. package/docs/documentation/modules/ContentSwitcherModule/dependencies.svg +4 -4
  14. package/docs/documentation/modules/ContentSwitcherModule.html +4 -4
  15. package/docs/documentation/modules/DatePickerInputModule/dependencies.svg +7 -7
  16. package/docs/documentation/modules/DatePickerInputModule.html +7 -7
  17. package/docs/documentation/modules/DatePickerModule/dependencies.svg +57 -53
  18. package/docs/documentation/modules/DatePickerModule.html +57 -53
  19. package/docs/documentation/modules/DialogModule/dependencies.svg +34 -34
  20. package/docs/documentation/modules/DialogModule.html +34 -34
  21. package/docs/documentation/modules/GridModule/dependencies.svg +60 -60
  22. package/docs/documentation/modules/GridModule.html +60 -60
  23. package/docs/documentation/modules/LoadingModule/dependencies.svg +4 -4
  24. package/docs/documentation/modules/LoadingModule.html +4 -4
  25. package/docs/documentation/modules/NFormsModule/dependencies.svg +4 -4
  26. package/docs/documentation/modules/NFormsModule.html +4 -4
  27. package/docs/documentation/modules/NumberModule/dependencies.svg +4 -4
  28. package/docs/documentation/modules/NumberModule.html +4 -4
  29. package/docs/documentation/modules/ProgressIndicatorModule/dependencies.svg +4 -4
  30. package/docs/documentation/modules/ProgressIndicatorModule.html +4 -4
  31. package/docs/documentation/modules/RadioModule/dependencies.svg +4 -4
  32. package/docs/documentation/modules/RadioModule.html +4 -4
  33. package/docs/documentation/modules/SearchModule/dependencies.svg +4 -4
  34. package/docs/documentation/modules/SearchModule.html +4 -4
  35. package/docs/documentation/modules/SelectModule/dependencies.svg +58 -58
  36. package/docs/documentation/modules/SelectModule.html +58 -58
  37. package/docs/documentation/modules/SliderModule/dependencies.svg +4 -4
  38. package/docs/documentation/modules/SliderModule.html +4 -4
  39. package/docs/documentation/modules/StructuredListModule/dependencies.svg +66 -66
  40. package/docs/documentation/modules/StructuredListModule.html +66 -66
  41. package/docs/documentation/modules/TabsModule/dependencies.svg +69 -69
  42. package/docs/documentation/modules/TabsModule.html +69 -69
  43. package/docs/documentation/modules/TagModule/dependencies.svg +4 -4
  44. package/docs/documentation/modules/TagModule.html +4 -4
  45. package/docs/documentation/modules/ThemeModule/dependencies.svg +13 -13
  46. package/docs/documentation/modules/ThemeModule.html +13 -13
  47. package/docs/documentation/modules/TimePickerModule/dependencies.svg +4 -4
  48. package/docs/documentation/modules/TimePickerModule.html +4 -4
  49. package/docs/documentation/modules/TimePickerSelectModule/dependencies.svg +45 -49
  50. package/docs/documentation/modules/TimePickerSelectModule.html +45 -49
  51. package/docs/documentation/modules/ToggleModule/dependencies.svg +44 -40
  52. package/docs/documentation/modules/ToggleModule.html +44 -40
  53. package/docs/documentation/modules/ToggletipModule/dependencies.svg +4 -4
  54. package/docs/documentation/modules/ToggletipModule.html +4 -4
  55. package/docs/documentation/modules/TooltipModule/dependencies.svg +4 -4
  56. package/docs/documentation/modules/TooltipModule.html +4 -4
  57. package/docs/documentation.json +1583 -809
  58. package/docs/storybook/1562.1e6a79b6.iframe.bundle.js +1 -0
  59. package/docs/storybook/4578.0721a3f2.iframe.bundle.js +1 -0
  60. package/docs/storybook/iframe.html +2 -2
  61. package/docs/storybook/index.json +1 -1
  62. package/docs/storybook/main.058586e7.iframe.bundle.js +1 -0
  63. package/docs/storybook/main.css +1156 -571
  64. package/docs/storybook/popover-popover-stories.a91784a3.iframe.bundle.js +1 -0
  65. package/docs/storybook/project.json +1 -1
  66. package/docs/storybook/runtime~main.e62f61de.iframe.bundle.js +1 -0
  67. package/docs/storybook/stories.json +1 -1
  68. package/docs/storybook/toggletip-toggletip-stories.7265233d.iframe.bundle.js +1 -0
  69. package/docs/storybook/tooltip-definition-tooptip-stories.af07fda0.iframe.bundle.js +1 -0
  70. package/docs/storybook/tooltip-tooltip-stories.18664f1b.iframe.bundle.js +1 -0
  71. package/esm2020/popover/popover-content.component.mjs +33 -13
  72. package/esm2020/popover/popover.directive.mjs +215 -96
  73. package/esm2020/toggletip/toggletip.component.mjs +8 -6
  74. package/esm2020/tooltip/definition-tooptip.component.mjs +14 -15
  75. package/esm2020/tooltip/tooltip.component.mjs +13 -8
  76. package/fesm2015/carbon-components-angular-popover.mjs +247 -107
  77. package/fesm2015/carbon-components-angular-popover.mjs.map +1 -1
  78. package/fesm2015/carbon-components-angular-toggletip.mjs +7 -5
  79. package/fesm2015/carbon-components-angular-toggletip.mjs.map +1 -1
  80. package/fesm2015/carbon-components-angular-tooltip.mjs +25 -21
  81. package/fesm2015/carbon-components-angular-tooltip.mjs.map +1 -1
  82. package/fesm2020/carbon-components-angular-popover.mjs +246 -107
  83. package/fesm2020/carbon-components-angular-popover.mjs.map +1 -1
  84. package/fesm2020/carbon-components-angular-toggletip.mjs +7 -5
  85. package/fesm2020/carbon-components-angular-toggletip.mjs.map +1 -1
  86. package/fesm2020/carbon-components-angular-tooltip.mjs +25 -21
  87. package/fesm2020/carbon-components-angular-tooltip.mjs.map +1 -1
  88. package/package.json +3 -2
  89. package/popover/popover-content.component.d.ts +7 -1
  90. package/popover/popover.directive.d.ts +74 -29
  91. package/toggletip/toggletip.component.d.ts +6 -5
  92. package/tooltip/definition-tooptip.component.d.ts +7 -8
  93. package/tooltip/tooltip.component.d.ts +6 -3
  94. package/docs/storybook/4578.93dc52a7.iframe.bundle.js +0 -1
  95. package/docs/storybook/main.f61a9bb7.iframe.bundle.js +0 -1
  96. package/docs/storybook/popover-popover-stories.cc1684df.iframe.bundle.js +0 -1
  97. package/docs/storybook/runtime~main.6a22a4e9.iframe.bundle.js +0 -1
  98. package/docs/storybook/toggletip-toggletip-stories.22e37008.iframe.bundle.js +0 -1
  99. package/docs/storybook/tooltip-definition-tooptip-stories.2e1a211c.iframe.bundle.js +0 -1
  100. package/docs/storybook/tooltip-tooltip-stories.6a4a1383.iframe.bundle.js +0 -1
package/docs/documentation/directives/PopoverContainer.html CHANGED
@@ -67,18 +67,18 @@
67
67
  </p>
68
68
 
69
69
 
70
+
71
+
70
72
  <p class="comment">
71
- <h3>Description</h3>
73
+ <h3>Implements</h3>
72
74
  </p>
73
75
  <p class="comment">
74
- <p>Applies popover container styling to the element it is applied to. Get started with importing the module:</p>
75
- <div><pre class="line-numbers"><code class="language-typescript">import { PopoverModule } from &#39;carbon-components-angular&#39;;</code></pre></div><p><a href="../../?path=/story/components-popover--basic">See demo</a></p>
76
-
76
+ <code>AfterViewInit</code>
77
+ <code>OnChanges</code>
78
+ <code>OnDestroy</code>
77
79
  </p>
78
80
 
79
81
 
80
-
81
-
82
82
  <section data-compodoc="block-metadata">
83
83
  <h3>Metadata</h3>
84
84
  <table class="table table-sm table-hover metadata">
@@ -108,10 +108,37 @@
108
108
  <tr>
109
109
  <td class="col-md-4">
110
110
  <ul class="index-list">
111
+ <li>
112
+ <a href="#_align" >_align</a>
113
+ </li>
114
+ <li>
115
+ <span class="modifier">Readonly</span>
116
+ <a href="#alignmentClassPrefix" >alignmentClassPrefix</a>
117
+ </li>
118
+ <li>
119
+ <span class="modifier">Protected</span>
120
+ <a href="#caretHeight" >caretHeight</a>
121
+ </li>
122
+ <li>
123
+ <span class="modifier">Protected</span>
124
+ <a href="#caretOffset" >caretOffset</a>
125
+ </li>
126
+ <li>
127
+ <span class="modifier">Protected</span>
128
+ <a href="#caretRef" >caretRef</a>
129
+ </li>
111
130
  <li>
112
131
  <span class="modifier"></span>
113
132
  <a href="#containerClass" >containerClass</a>
114
133
  </li>
134
+ <li>
135
+ <span class="modifier">Protected</span>
136
+ <a href="#popoverContentRef" >popoverContentRef</a>
137
+ </li>
138
+ <li>
139
+ <span class="modifier">Protected</span>
140
+ <a href="#unmountFloatingElement" >unmountFloatingElement</a>
141
+ </li>
115
142
  </ul>
116
143
  </td>
117
144
  </tr>
@@ -124,9 +151,33 @@
124
151
  <tr>
125
152
  <td class="col-md-4">
126
153
  <ul class="index-list">
154
+ <li>
155
+ <a href="#cleanUp" >cleanUp</a>
156
+ </li>
127
157
  <li>
128
158
  <a href="#handleChange" >handleChange</a>
129
159
  </li>
160
+ <li>
161
+ <a href="#initializeReferences" >initializeReferences</a>
162
+ </li>
163
+ <li>
164
+ <a href="#ngAfterViewInit" >ngAfterViewInit</a>
165
+ </li>
166
+ <li>
167
+ <a href="#ngOnChanges" >ngOnChanges</a>
168
+ </li>
169
+ <li>
170
+ <a href="#ngOnDestroy" >ngOnDestroy</a>
171
+ </li>
172
+ <li>
173
+ <a href="#recomputePosition" >recomputePosition</a>
174
+ </li>
175
+ <li>
176
+ <a href="#roundByDPR" >roundByDPR</a>
177
+ </li>
178
+ <li>
179
+ <a href="#updateAlignmentClass" >updateAlignmentClass</a>
180
+ </li>
130
181
  </ul>
131
182
  </td>
132
183
  </tr>
@@ -142,6 +193,9 @@
142
193
  <li>
143
194
  <a href="#align" >align</a>
144
195
  </li>
196
+ <li>
197
+ <a href="#autoAlign" >autoAlign</a>
198
+ </li>
145
199
  <li>
146
200
  <a href="#caret" >caret</a>
147
201
  </li>
@@ -187,42 +241,6 @@
187
241
  <tr>
188
242
  <td class="col-md-4">
189
243
  <ul class="index-list">
190
- <li>
191
- <a href="#class.cds--popover--bottom" >class.cds--popover--bottom</a>
192
- </li>
193
- <li>
194
- <a href="#class.cds--popover--bottom-left" >class.cds--popover--bottom-left</a>
195
- </li>
196
- <li>
197
- <a href="#class.cds--popover--bottom-right" >class.cds--popover--bottom-right</a>
198
- </li>
199
- <li>
200
- <a href="#class.cds--popover--left" >class.cds--popover--left</a>
201
- </li>
202
- <li>
203
- <a href="#class.cds--popover--left-bottom" >class.cds--popover--left-bottom</a>
204
- </li>
205
- <li>
206
- <a href="#class.cds--popover--left-top" >class.cds--popover--left-top</a>
207
- </li>
208
- <li>
209
- <a href="#class.cds--popover--right" >class.cds--popover--right</a>
210
- </li>
211
- <li>
212
- <a href="#class.cds--popover--right-bottom" >class.cds--popover--right-bottom</a>
213
- </li>
214
- <li>
215
- <a href="#class.cds--popover--right-top" >class.cds--popover--right-top</a>
216
- </li>
217
- <li>
218
- <a href="#class.cds--popover--top" >class.cds--popover--top</a>
219
- </li>
220
- <li>
221
- <a href="#class.cds--popover--top-left" >class.cds--popover--top-left</a>
222
- </li>
223
- <li>
224
- <a href="#class.cds--popover--top-right" >class.cds--popover--top-right</a>
225
- </li>
226
244
  <li>
227
245
  <a href="#class.cds--popover-container" >class.cds--popover-container</a>
228
246
  </li>
@@ -240,40 +258,7 @@
240
258
  <td class="col-md-4">
241
259
  <ul class="index-list">
242
260
  <li>
243
- <a href="#alignmentTopClass" >alignmentTopClass</a>
244
- </li>
245
- <li>
246
- <a href="#alignmentTopLeftClass" >alignmentTopLeftClass</a>
247
- </li>
248
- <li>
249
- <a href="#alignmentTopRightClass" >alignmentTopRightClass</a>
250
- </li>
251
- <li>
252
- <a href="#alignmentBottomClass" >alignmentBottomClass</a>
253
- </li>
254
- <li>
255
- <a href="#alignmentBottomLeftClass" >alignmentBottomLeftClass</a>
256
- </li>
257
- <li>
258
- <a href="#alignmentBottomRightClass" >alignmentBottomRightClass</a>
259
- </li>
260
- <li>
261
- <a href="#alignmentLeftClass" >alignmentLeftClass</a>
262
- </li>
263
- <li>
264
- <a href="#alignmentLeftTopClass" >alignmentLeftTopClass</a>
265
- </li>
266
- <li>
267
- <a href="#alignmentLeftBottomClass" >alignmentLeftBottomClass</a>
268
- </li>
269
- <li>
270
- <a href="#alignmentRightClass" >alignmentRightClass</a>
271
- </li>
272
- <li>
273
- <a href="#alignmentRightTopClass" >alignmentRightTopClass</a>
274
- </li>
275
- <li>
276
- <a href="#alignmentRightBottomClass" >alignmentRightBottomClass</a>
261
+ <a href="#align" >align</a>
277
262
  </li>
278
263
  </ul>
279
264
  </td>
@@ -288,12 +273,12 @@
288
273
  <tbody>
289
274
  <tr>
290
275
  <td class="col-md-4">
291
- <code>constructor(changeDetectorRef: ChangeDetectorRef)</code>
276
+ <code>constructor(elementRef: ElementRef, ngZone: NgZone, renderer: Renderer2, changeDetectorRef: ChangeDetectorRef)</code>
292
277
  </td>
293
278
  </tr>
294
279
  <tr>
295
280
  <td class="col-md-4">
296
- <div class="io-line">Defined in <a href="" data-line="97" class="link-to-prism">src/popover/popover.directive.ts:97</a></div>
281
+ <div class="io-line">Defined in <a href="" data-line="123" class="link-to-prism">src/popover/popover.directive.ts:123</a></div>
297
282
  </td>
298
283
  </tr>
299
284
 
@@ -310,6 +295,42 @@
310
295
  </tr>
311
296
  </thead>
312
297
  <tbody>
298
+ <tr>
299
+ <td>elementRef</td>
300
+
301
+ <td>
302
+ <code>ElementRef</code>
303
+ </td>
304
+
305
+ <td>
306
+ No
307
+ </td>
308
+
309
+ </tr>
310
+ <tr>
311
+ <td>ngZone</td>
312
+
313
+ <td>
314
+ <code>NgZone</code>
315
+ </td>
316
+
317
+ <td>
318
+ No
319
+ </td>
320
+
321
+ </tr>
322
+ <tr>
323
+ <td>renderer</td>
324
+
325
+ <td>
326
+ <code>Renderer2</code>
327
+ </td>
328
+
329
+ <td>
330
+ No
331
+ </td>
332
+
333
+ </tr>
313
334
  <tr>
314
335
  <td>changeDetectorRef</td>
315
336
 
@@ -343,20 +364,56 @@
343
364
  </tr>
344
365
  <tr>
345
366
  <td class="col-md-4">
346
- <i>Type : </i> <code>&quot;top&quot; | &quot;top-left&quot; | &quot;top-right&quot; | &quot;bottom&quot; | &quot;bottom-left&quot; | &quot;bottom-right&quot; | &quot;left&quot; | &quot;left-bottom&quot; | &quot;left-top&quot; | &quot;right&quot; | &quot;right-bottom&quot; | &quot;right-top&quot;</code>
367
+ <i>Type : </i> <code><a href="../miscellaneous/typealiases.html#oldPlacement" target="_self" >oldPlacement | Placement</a></code>
347
368
 
348
369
  </td>
349
370
  </tr>
371
+ <tr>
372
+ <td class="col-md-2" colspan="2">
373
+ <div class="io-line">Defined in <a href="" data-line="45" class="link-to-prism">src/popover/popover.directive.ts:45</a></div>
374
+ </td>
375
+ </tr>
350
376
  <tr>
351
377
  <td class="col-md-4">
352
- <i>Default value : </i><code>&quot;bottom&quot;</code>
378
+ <div class="io-description"><p>Set alignment of popover
379
+ As of v5, <code>oldPlacements</code> are now deprecated in favor of Placements</p>
380
+ <p>When <code>autoAlign</code> is set to <code>true</code>, alignment may change for best placement</p>
381
+ </div>
382
+ </td>
383
+ </tr>
384
+ </tbody>
385
+ </table>
386
+ <table class="table table-sm table-bordered">
387
+ <tbody>
388
+ <tr>
389
+ <td class="col-md-4">
390
+ <a name="autoAlign"></a>
391
+ <b>autoAlign</b>
392
+ </td>
393
+ </tr>
394
+ <tr>
395
+ <td class="col-md-4">
396
+ <i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
397
+
398
+ </td>
399
+ </tr>
400
+ <tr>
401
+ <td class="col-md-4">
402
+ <i>Default value : </i><code>false</code>
353
403
  </td>
354
404
  </tr>
355
405
  <tr>
356
406
  <td class="col-md-2" colspan="2">
357
- <div class="io-line">Defined in <a href="" data-line="94" class="link-to-prism">src/popover/popover.directive.ts:94</a></div>
407
+ <div class="io-line">Defined in <a href="" data-line="115" class="link-to-prism">src/popover/popover.directive.ts:115</a></div>
358
408
  </td>
359
409
  </tr>
410
+ <tr>
411
+ <td class="col-md-4">
412
+ <div class="io-description"><p><strong>Experimental</strong>: Use floating-ui to position the tooltip
413
+ This is not toggleable - should be assigned once</p>
414
+ </div>
415
+ </td>
416
+ </tr>
360
417
  </tbody>
361
418
  </table>
362
419
  <table class="table table-sm table-bordered">
@@ -380,9 +437,15 @@
380
437
  </tr>
381
438
  <tr>
382
439
  <td class="col-md-2" colspan="2">
383
- <div class="io-line">Defined in <a href="" data-line="88" class="link-to-prism">src/popover/popover.directive.ts:88</a></div>
440
+ <div class="io-line">Defined in <a href="" data-line="102" class="link-to-prism">src/popover/popover.directive.ts:102</a></div>
384
441
  </td>
385
442
  </tr>
443
+ <tr>
444
+ <td class="col-md-4">
445
+ <div class="io-description"><p>Show caret at the alignment position</p>
446
+ </div>
447
+ </td>
448
+ </tr>
386
449
  </tbody>
387
450
  </table>
388
451
  <table class="table table-sm table-bordered">
@@ -406,9 +469,15 @@
406
469
  </tr>
407
470
  <tr>
408
471
  <td class="col-md-2" colspan="2">
409
- <div class="io-line">Defined in <a href="" data-line="89" class="link-to-prism">src/popover/popover.directive.ts:89</a></div>
472
+ <div class="io-line">Defined in <a href="" data-line="106" class="link-to-prism">src/popover/popover.directive.ts:106</a></div>
410
473
  </td>
411
474
  </tr>
475
+ <tr>
476
+ <td class="col-md-4">
477
+ <div class="io-description"><p>Enable drop shadow around the popover container</p>
478
+ </div>
479
+ </td>
480
+ </tr>
412
481
  </tbody>
413
482
  </table>
414
483
  <table class="table table-sm table-bordered">
@@ -432,9 +501,15 @@
432
501
  </tr>
433
502
  <tr>
434
503
  <td class="col-md-2" colspan="2">
435
- <div class="io-line">Defined in <a href="" data-line="90" class="link-to-prism">src/popover/popover.directive.ts:90</a></div>
504
+ <div class="io-line">Defined in <a href="" data-line="110" class="link-to-prism">src/popover/popover.directive.ts:110</a></div>
436
505
  </td>
437
506
  </tr>
507
+ <tr>
508
+ <td class="col-md-4">
509
+ <div class="io-description"><p>Enable high contrast for popover container</p>
510
+ </div>
511
+ </td>
512
+ </tr>
438
513
  </tbody>
439
514
  </table>
440
515
  <table class="table table-sm table-bordered">
@@ -458,7 +533,7 @@
458
533
  </tr>
459
534
  <tr>
460
535
  <td class="col-md-2" colspan="2">
461
- <div class="io-line">Defined in <a href="" data-line="91" class="link-to-prism">src/popover/popover.directive.ts:91</a></div>
536
+ <div class="io-line">Defined in <a href="" data-line="117" class="link-to-prism">src/popover/popover.directive.ts:117</a></div>
462
537
  </td>
463
538
  </tr>
464
539
  </tbody>
@@ -482,7 +557,7 @@
482
557
  </tr>
483
558
  <tr>
484
559
  <td class="col-md-2" colspan="2">
485
- <div class="io-line">Defined in <a href="" data-line="86" class="link-to-prism">src/popover/popover.directive.ts:86</a></div>
560
+ <div class="io-line">Defined in <a href="" data-line="98" class="link-to-prism">src/popover/popover.directive.ts:98</a></div>
486
561
  </td>
487
562
  </tr>
488
563
  <tr>
@@ -509,7 +584,7 @@
509
584
  </tr>
510
585
  <tr>
511
586
  <td class="col-md-2" colspan="2">
512
- <div class="io-line">Defined in <a href="" data-line="78" class="link-to-prism">src/popover/popover.directive.ts:78</a></div>
587
+ <div class="io-line">Defined in <a href="" data-line="90" class="link-to-prism">src/popover/popover.directive.ts:90</a></div>
513
588
  </td>
514
589
  </tr>
515
590
  <tr>
@@ -536,7 +611,7 @@
536
611
  </tr>
537
612
  <tr>
538
613
  <td class="col-md-2" colspan="2">
539
- <div class="io-line">Defined in <a href="" data-line="82" class="link-to-prism">src/popover/popover.directive.ts:82</a></div>
614
+ <div class="io-line">Defined in <a href="" data-line="94" class="link-to-prism">src/popover/popover.directive.ts:94</a></div>
540
615
  </td>
541
616
  </tr>
542
617
  <tr>
@@ -553,10 +628,10 @@
553
628
  <tbody>
554
629
  <tr>
555
630
  <td class="col-md-4">
556
- <a name="class.cds--popover--bottom"></a>
631
+ <a name="class.cds--popover-container"></a>
557
632
  <span class="name">
558
- <span ><b>class.cds--popover--bottom</b></span>
559
- <a href="#class.cds--popover--bottom"><span class="icon ion-ios-link"></span></a>
633
+ <span ><b>class.cds--popover-container</b></span>
634
+ <a href="#class.cds--popover-container"><span class="icon ion-ios-link"></span></a>
560
635
  </span>
561
636
  </td>
562
637
  </tr>
@@ -566,368 +641,269 @@
566
641
 
567
642
  </td>
568
643
  </tr>
569
- <tr>
570
- <td class="col-md-4">
571
- <div class="io-line">Defined in <a href="" data-line="37" class="link-to-prism">src/popover/popover.directive.ts:37</a></div>
572
- </td>
573
- </tr>
574
-
575
-
576
- </tbody>
577
- </table>
578
- <table class="table table-sm table-bordered">
579
- <tbody>
580
- <tr>
581
- <td class="col-md-4">
582
- <a name="class.cds--popover--bottom-left"></a>
583
- <span class="name">
584
- <span ><b>class.cds--popover--bottom-left</b></span>
585
- <a href="#class.cds--popover--bottom-left"><span class="icon ion-ios-link"></span></a>
586
- </span>
587
- </td>
588
- </tr>
589
644
  <tr>
590
645
  <td class="col-md-4">
591
- <i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
592
-
646
+ <i>Default value : </i><code>true</code>
593
647
  </td>
594
648
  </tr>
595
649
  <tr>
596
650
  <td class="col-md-4">
597
- <div class="io-line">Defined in <a href="" data-line="41" class="link-to-prism">src/popover/popover.directive.ts:41</a></div>
651
+ <div class="io-line">Defined in <a href="" data-line="116" class="link-to-prism">src/popover/popover.directive.ts:116</a></div>
598
652
  </td>
599
653
  </tr>
600
654
 
601
655
 
602
656
  </tbody>
603
657
  </table>
658
+ </section>
659
+
660
+
661
+ <section data-compodoc="block-methods">
662
+
663
+ <h3 id="methods">
664
+ Methods
665
+ </h3>
604
666
  <table class="table table-sm table-bordered">
605
667
  <tbody>
606
668
  <tr>
607
669
  <td class="col-md-4">
608
- <a name="class.cds--popover--bottom-right"></a>
670
+ <a name="cleanUp"></a>
609
671
  <span class="name">
610
- <span ><b>class.cds--popover--bottom-right</b></span>
611
- <a href="#class.cds--popover--bottom-right"><span class="icon ion-ios-link"></span></a>
672
+ <span ><b>cleanUp</b></span>
673
+ <a href="#cleanUp"><span class="icon ion-ios-link"></span></a>
612
674
  </span>
613
675
  </td>
614
676
  </tr>
615
- <tr>
616
- <td class="col-md-4">
617
- <i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
618
-
619
- </td>
620
- </tr>
621
- <tr>
622
- <td class="col-md-4">
623
- <div class="io-line">Defined in <a href="" data-line="45" class="link-to-prism">src/popover/popover.directive.ts:45</a></div>
624
- </td>
625
- </tr>
677
+ <tr>
678
+ <td class="col-md-4">
679
+ <code>cleanUp()</code>
680
+ </td>
681
+ </tr>
626
682
 
627
683
 
628
- </tbody>
629
- </table>
630
- <table class="table table-sm table-bordered">
631
- <tbody>
632
684
  <tr>
633
685
  <td class="col-md-4">
634
- <a name="class.cds--popover--left"></a>
635
- <span class="name">
636
- <span ><b>class.cds--popover--left</b></span>
637
- <a href="#class.cds--popover--left"><span class="icon ion-ios-link"></span></a>
638
- </span>
686
+ <div class="io-line">Defined in <a href="" data-line="285"
687
+ class="link-to-prism">src/popover/popover.directive.ts:285</a></div>
639
688
  </td>
640
689
  </tr>
641
- <tr>
642
- <td class="col-md-4">
643
- <i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
644
690
 
645
- </td>
646
- </tr>
647
- <tr>
648
- <td class="col-md-4">
649
- <div class="io-line">Defined in <a href="" data-line="50" class="link-to-prism">src/popover/popover.directive.ts:50</a></div>
650
- </td>
651
- </tr>
652
691
 
692
+ <tr>
693
+ <td class="col-md-4">
694
+ <div class="io-description"><p>Clean up <code>autoUpdate</code> if auto alignment is enabled</p>
695
+ </div>
696
+
697
+ <div class="io-description">
698
+ <b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
653
699
 
700
+ </div>
701
+ </td>
702
+ </tr>
654
703
  </tbody>
655
704
  </table>
656
705
  <table class="table table-sm table-bordered">
657
706
  <tbody>
658
707
  <tr>
659
708
  <td class="col-md-4">
660
- <a name="class.cds--popover--left-bottom"></a>
709
+ <a name="handleChange"></a>
661
710
  <span class="name">
662
- <span ><b>class.cds--popover--left-bottom</b></span>
663
- <a href="#class.cds--popover--left-bottom"><span class="icon ion-ios-link"></span></a>
711
+ <span ><b>handleChange</b></span>
712
+ <a href="#handleChange"><span class="icon ion-ios-link"></span></a>
664
713
  </span>
665
714
  </td>
666
715
  </tr>
667
- <tr>
668
- <td class="col-md-4">
669
- <i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
670
-
671
- </td>
672
- </tr>
673
- <tr>
674
- <td class="col-md-4">
675
- <div class="io-line">Defined in <a href="" data-line="58" class="link-to-prism">src/popover/popover.directive.ts:58</a></div>
676
- </td>
677
- </tr>
716
+ <tr>
717
+ <td class="col-md-4">
718
+ <code>handleChange(open: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank">boolean</a>, event?: Event)</code>
719
+ </td>
720
+ </tr>
678
721
 
679
722
 
680
- </tbody>
681
- </table>
682
- <table class="table table-sm table-bordered">
683
- <tbody>
684
723
  <tr>
685
724
  <td class="col-md-4">
686
- <a name="class.cds--popover--left-top"></a>
687
- <span class="name">
688
- <span ><b>class.cds--popover--left-top</b></span>
689
- <a href="#class.cds--popover--left-top"><span class="icon ion-ios-link"></span></a>
690
- </span>
725
+ <div class="io-line">Defined in <a href="" data-line="137"
726
+ class="link-to-prism">src/popover/popover.directive.ts:137</a></div>
691
727
  </td>
692
728
  </tr>
693
- <tr>
694
- <td class="col-md-4">
695
- <i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
696
-
697
- </td>
698
- </tr>
699
- <tr>
700
- <td class="col-md-4">
701
- <div class="io-line">Defined in <a href="" data-line="54" class="link-to-prism">src/popover/popover.directive.ts:54</a></div>
702
- </td>
703
- </tr>
704
729
 
705
730
 
706
- </tbody>
707
- </table>
708
- <table class="table table-sm table-bordered">
709
- <tbody>
710
731
  <tr>
711
732
  <td class="col-md-4">
712
- <a name="class.cds--popover--right"></a>
713
- <span class="name">
714
- <span ><b>class.cds--popover--right</b></span>
715
- <a href="#class.cds--popover--right"><span class="icon ion-ios-link"></span></a>
716
- </span>
717
- </td>
718
- </tr>
719
- <tr>
720
- <td class="col-md-4">
721
- <i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
733
+ <div class="io-description"><p>Handles emitting open/close event</p>
734
+ </div>
722
735
 
723
- </td>
724
- </tr>
725
- <tr>
726
- <td class="col-md-4">
727
- <div class="io-line">Defined in <a href="" data-line="63" class="link-to-prism">src/popover/popover.directive.ts:63</a></div>
728
- </td>
729
- </tr>
736
+ <div class="io-description">
737
+ <b>Parameters :</b>
738
+
739
+ <table class="params">
740
+ <thead>
741
+ <tr>
742
+ <td>Name</td>
743
+ <td>Type</td>
744
+ <td>Optional</td>
745
+ <td>Description</td>
746
+ </tr>
747
+ </thead>
748
+ <tbody>
749
+ <tr>
750
+ <td>open</td>
751
+ <td>
752
+ <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
753
+ </td>
754
+
755
+ <td>
756
+ No
757
+ </td>
758
+
759
+
760
+ <td>
761
+ <ul>
762
+ <li>Is the popover container open</li>
763
+ </ul>
764
+
765
+ </td>
766
+ </tr>
767
+ <tr>
768
+ <td>event</td>
769
+ <td>
770
+ <code>Event</code>
771
+ </td>
772
+
773
+ <td>
774
+ Yes
775
+ </td>
776
+
777
+
778
+ <td>
779
+ <ul>
780
+ <li>Event</li>
781
+ </ul>
730
782
 
783
+ </td>
784
+ </tr>
785
+ </tbody>
786
+ </table>
787
+ </div>
788
+ <div>
789
+ </div>
790
+ <div class="io-description">
791
+ <b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
731
792
 
793
+ </div>
794
+ <div class="io-description">
795
+
796
+ </div>
797
+ </td>
798
+ </tr>
732
799
  </tbody>
733
800
  </table>
734
801
  <table class="table table-sm table-bordered">
735
802
  <tbody>
736
803
  <tr>
737
804
  <td class="col-md-4">
738
- <a name="class.cds--popover--right-bottom"></a>
805
+ <a name="initializeReferences"></a>
739
806
  <span class="name">
740
- <span ><b>class.cds--popover--right-bottom</b></span>
741
- <a href="#class.cds--popover--right-bottom"><span class="icon ion-ios-link"></span></a>
807
+ <span ><b>initializeReferences</b></span>
808
+ <a href="#initializeReferences"><span class="icon ion-ios-link"></span></a>
742
809
  </span>
743
810
  </td>
744
811
  </tr>
745
- <tr>
746
- <td class="col-md-4">
747
- <i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
748
-
749
- </td>
750
- </tr>
751
- <tr>
752
- <td class="col-md-4">
753
- <div class="io-line">Defined in <a href="" data-line="71" class="link-to-prism">src/popover/popover.directive.ts:71</a></div>
754
- </td>
755
- </tr>
756
-
757
-
758
- </tbody>
759
- </table>
760
- <table class="table table-sm table-bordered">
761
- <tbody>
762
812
  <tr>
763
813
  <td class="col-md-4">
764
- <a name="class.cds--popover--right-top"></a>
765
- <span class="name">
766
- <span ><b>class.cds--popover--right-top</b></span>
767
- <a href="#class.cds--popover--right-top"><span class="icon ion-ios-link"></span></a>
768
- </span>
814
+ <code>initializeReferences()</code>
769
815
  </td>
770
816
  </tr>
771
- <tr>
772
- <td class="col-md-4">
773
- <i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
774
-
775
- </td>
776
- </tr>
777
- <tr>
778
- <td class="col-md-4">
779
- <div class="io-line">Defined in <a href="" data-line="67" class="link-to-prism">src/popover/popover.directive.ts:67</a></div>
780
- </td>
781
- </tr>
782
817
 
783
818
 
784
- </tbody>
785
- </table>
786
- <table class="table table-sm table-bordered">
787
- <tbody>
788
819
  <tr>
789
820
  <td class="col-md-4">
790
- <a name="class.cds--popover--top"></a>
791
- <span class="name">
792
- <span ><b>class.cds--popover--top</b></span>
793
- <a href="#class.cds--popover--top"><span class="icon ion-ios-link"></span></a>
794
- </span>
821
+ <div class="io-line">Defined in <a href="" data-line="264"
822
+ class="link-to-prism">src/popover/popover.directive.ts:264</a></div>
795
823
  </td>
796
824
  </tr>
797
- <tr>
798
- <td class="col-md-4">
799
- <i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
800
825
 
801
- </td>
802
- </tr>
803
- <tr>
804
- <td class="col-md-4">
805
- <div class="io-line">Defined in <a href="" data-line="24" class="link-to-prism">src/popover/popover.directive.ts:24</a></div>
806
- </td>
807
- </tr>
808
826
 
827
+ <tr>
828
+ <td class="col-md-4">
829
+
830
+ <div class="io-description">
831
+ <b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
809
832
 
833
+ </div>
834
+ </td>
835
+ </tr>
810
836
  </tbody>
811
837
  </table>
812
838
  <table class="table table-sm table-bordered">
813
839
  <tbody>
814
840
  <tr>
815
841
  <td class="col-md-4">
816
- <a name="class.cds--popover--top-left"></a>
842
+ <a name="ngAfterViewInit"></a>
817
843
  <span class="name">
818
- <span ><b>class.cds--popover--top-left</b></span>
819
- <a href="#class.cds--popover--top-left"><span class="icon ion-ios-link"></span></a>
844
+ <span ><b>ngAfterViewInit</b></span>
845
+ <a href="#ngAfterViewInit"><span class="icon ion-ios-link"></span></a>
820
846
  </span>
821
847
  </td>
822
848
  </tr>
823
- <tr>
824
- <td class="col-md-4">
825
- <i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
826
-
827
- </td>
828
- </tr>
829
- <tr>
830
- <td class="col-md-4">
831
- <div class="io-line">Defined in <a href="" data-line="28" class="link-to-prism">src/popover/popover.directive.ts:28</a></div>
832
- </td>
833
- </tr>
834
-
835
-
836
- </tbody>
837
- </table>
838
- <table class="table table-sm table-bordered">
839
- <tbody>
840
849
  <tr>
841
850
  <td class="col-md-4">
842
- <a name="class.cds--popover--top-right"></a>
843
- <span class="name">
844
- <span ><b>class.cds--popover--top-right</b></span>
845
- <a href="#class.cds--popover--top-right"><span class="icon ion-ios-link"></span></a>
846
- </span>
851
+ <code>ngAfterViewInit()</code>
847
852
  </td>
848
853
  </tr>
849
- <tr>
850
- <td class="col-md-4">
851
- <i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
852
-
853
- </td>
854
- </tr>
855
- <tr>
856
- <td class="col-md-4">
857
- <div class="io-line">Defined in <a href="" data-line="32" class="link-to-prism">src/popover/popover.directive.ts:32</a></div>
858
- </td>
859
- </tr>
860
854
 
861
855
 
862
- </tbody>
863
- </table>
864
- <table class="table table-sm table-bordered">
865
- <tbody>
866
856
  <tr>
867
857
  <td class="col-md-4">
868
- <a name="class.cds--popover-container"></a>
869
- <span class="name">
870
- <span ><b>class.cds--popover-container</b></span>
871
- <a href="#class.cds--popover-container"><span class="icon ion-ios-link"></span></a>
872
- </span>
858
+ <div class="io-line">Defined in <a href="" data-line="260"
859
+ class="link-to-prism">src/popover/popover.directive.ts:260</a></div>
873
860
  </td>
874
861
  </tr>
875
- <tr>
876
- <td class="col-md-4">
877
- <i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
878
862
 
879
- </td>
880
- </tr>
881
- <tr>
882
- <td class="col-md-4">
883
- <i>Default value : </i><code>true</code>
884
- </td>
885
- </tr>
886
- <tr>
887
- <td class="col-md-4">
888
- <div class="io-line">Defined in <a href="" data-line="93" class="link-to-prism">src/popover/popover.directive.ts:93</a></div>
889
- </td>
890
- </tr>
891
863
 
864
+ <tr>
865
+ <td class="col-md-4">
866
+ <div class="io-description"><p>Handle initialization of element</p>
867
+ </div>
868
+
869
+ <div class="io-description">
870
+ <b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
892
871
 
872
+ </div>
873
+ </td>
874
+ </tr>
893
875
  </tbody>
894
876
  </table>
895
- </section>
896
-
897
-
898
- <section data-compodoc="block-methods">
899
-
900
- <h3 id="methods">
901
- Methods
902
- </h3>
903
877
  <table class="table table-sm table-bordered">
904
878
  <tbody>
905
879
  <tr>
906
880
  <td class="col-md-4">
907
- <a name="handleChange"></a>
881
+ <a name="ngOnChanges"></a>
908
882
  <span class="name">
909
- <span ><b>handleChange</b></span>
910
- <a href="#handleChange"><span class="icon ion-ios-link"></span></a>
883
+ <span ><b>ngOnChanges</b></span>
884
+ <a href="#ngOnChanges"><span class="icon ion-ios-link"></span></a>
911
885
  </span>
912
886
  </td>
913
887
  </tr>
914
888
  <tr>
915
889
  <td class="col-md-4">
916
- <code>handleChange(open: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank">boolean</a>, event: Event)</code>
890
+ <code>ngOnChanges(changes: SimpleChanges)</code>
917
891
  </td>
918
892
  </tr>
919
893
 
920
894
 
921
895
  <tr>
922
896
  <td class="col-md-4">
923
- <div class="io-line">Defined in <a href="" data-line="101"
924
- class="link-to-prism">src/popover/popover.directive.ts:101</a></div>
897
+ <div class="io-line">Defined in <a href="" data-line="241"
898
+ class="link-to-prism">src/popover/popover.directive.ts:241</a></div>
925
899
  </td>
926
900
  </tr>
927
901
 
928
902
 
929
903
  <tr>
930
904
  <td class="col-md-4">
905
+ <div class="io-description"><p>Close the popover and reopen it with updated values without emitting an event</p>
906
+ </div>
931
907
 
932
908
  <div class="io-description">
933
909
  <b>Parameters :</b>
@@ -942,21 +918,9 @@
942
918
  </thead>
943
919
  <tbody>
944
920
  <tr>
945
- <td>open</td>
946
- <td>
947
- <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
948
- </td>
949
-
950
- <td>
951
- No
952
- </td>
953
-
954
-
955
- </tr>
956
- <tr>
957
- <td>event</td>
921
+ <td>changes</td>
958
922
  <td>
959
- <code>Event</code>
923
+ <code>SimpleChanges</code>
960
924
  </td>
961
925
 
962
926
  <td>
@@ -981,315 +945,538 @@
981
945
  </tr>
982
946
  </tbody>
983
947
  </table>
984
- </section>
985
- <section data-compodoc="block-properties">
986
-
987
- <h3 id="inputs">
988
- Properties
989
- </h3>
990
948
  <table class="table table-sm table-bordered">
991
949
  <tbody>
992
950
  <tr>
993
951
  <td class="col-md-4">
994
- <a name="containerClass"></a>
952
+ <a name="ngOnDestroy"></a>
995
953
  <span class="name">
996
- <span class="modifier"></span>
997
- <span ><b>containerClass</b></span>
998
- <a href="#containerClass"><span class="icon ion-ios-link"></span></a>
954
+ <span ><b>ngOnDestroy</b></span>
955
+ <a href="#ngOnDestroy"><span class="icon ion-ios-link"></span></a>
999
956
  </span>
1000
957
  </td>
1001
958
  </tr>
1002
- <tr>
1003
- <td class="col-md-4">
1004
- <i>Default value : </i><code>true</code>
1005
- </td>
1006
- </tr>
1007
- <tr>
1008
- <td class="col-md-4">
1009
- <b>Decorators : </b>
1010
- <br />
1011
- <code>
1012
- @HostBinding(&#x27;class.cds--popover-container&#x27;)<br />
1013
- </code>
1014
- </td>
1015
- </tr>
1016
- <tr>
1017
- <td class="col-md-4">
1018
- <div class="io-line">Defined in <a href="" data-line="93" class="link-to-prism">src/popover/popover.directive.ts:93</a></div>
1019
- </td>
1020
- </tr>
1021
-
959
+ <tr>
960
+ <td class="col-md-4">
961
+ <code>ngOnDestroy()</code>
962
+ </td>
963
+ </tr>
1022
964
 
1023
- </tbody>
1024
- </table>
1025
- </section>
1026
965
 
1027
- <section data-compodoc="block-accessors">
1028
- <h3 id="accessors">
1029
- Accessors
1030
- </h3>
1031
- <table class="table table-sm table-bordered">
1032
- <tbody>
1033
- <tr>
1034
- <td class="col-md-4">
1035
- <a name="alignmentTopClass"></a>
1036
- <span class="name"><b>alignmentTopClass</b><a href="#alignmentTopClass"><span class="icon ion-ios-link"></span></a></span>
1037
- </td>
1038
- </tr>
966
+ <tr>
967
+ <td class="col-md-4">
968
+ <div class="io-line">Defined in <a href="" data-line="278"
969
+ class="link-to-prism">src/popover/popover.directive.ts:278</a></div>
970
+ </td>
971
+ </tr>
1039
972
 
1040
- <tr>
1041
- <td class="col-md-4">
1042
- <span class="accessor"><b>get</b><code>alignmentTopClass()</code></span>
1043
- </td>
1044
- </tr>
1045
- <tr>
1046
- <td class="col-md-4">
1047
- <div class="io-line">Defined in <a href="" data-line="24" class="link-to-prism">src/popover/popover.directive.ts:24</a></div>
1048
- </td>
1049
- </tr>
1050
973
 
1051
- </tbody>
1052
- </table>
1053
- <table class="table table-sm table-bordered">
1054
- <tbody>
1055
- <tr>
1056
- <td class="col-md-4">
1057
- <a name="alignmentTopLeftClass"></a>
1058
- <span class="name"><b>alignmentTopLeftClass</b><a href="#alignmentTopLeftClass"><span class="icon ion-ios-link"></span></a></span>
1059
- </td>
1060
- </tr>
974
+ <tr>
975
+ <td class="col-md-4">
976
+ <div class="io-description"><p>Clean up</p>
977
+ </div>
1061
978
 
1062
- <tr>
1063
- <td class="col-md-4">
1064
- <span class="accessor"><b>get</b><code>alignmentTopLeftClass()</code></span>
1065
- </td>
1066
- </tr>
1067
- <tr>
1068
- <td class="col-md-4">
1069
- <div class="io-line">Defined in <a href="" data-line="28" class="link-to-prism">src/popover/popover.directive.ts:28</a></div>
1070
- </td>
1071
- </tr>
979
+ <div class="io-description">
980
+ <b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
1072
981
 
1073
- </tbody>
1074
- </table>
1075
- <table class="table table-sm table-bordered">
1076
- <tbody>
1077
- <tr>
1078
- <td class="col-md-4">
1079
- <a name="alignmentTopRightClass"></a>
1080
- <span class="name"><b>alignmentTopRightClass</b><a href="#alignmentTopRightClass"><span class="icon ion-ios-link"></span></a></span>
1081
- </td>
1082
- </tr>
982
+ </div>
983
+ </td>
984
+ </tr>
985
+ </tbody>
986
+ </table>
987
+ <table class="table table-sm table-bordered">
988
+ <tbody>
989
+ <tr>
990
+ <td class="col-md-4">
991
+ <a name="recomputePosition"></a>
992
+ <span class="name">
993
+ <span ><b>recomputePosition</b></span>
994
+ <a href="#recomputePosition"><span class="icon ion-ios-link"></span></a>
995
+ </span>
996
+ </td>
997
+ </tr>
998
+ <tr>
999
+ <td class="col-md-4">
1000
+ <code>recomputePosition()</code>
1001
+ </td>
1002
+ </tr>
1083
1003
 
1084
- <tr>
1085
- <td class="col-md-4">
1086
- <span class="accessor"><b>get</b><code>alignmentTopRightClass()</code></span>
1087
- </td>
1088
- </tr>
1089
- <tr>
1090
- <td class="col-md-4">
1091
- <div class="io-line">Defined in <a href="" data-line="32" class="link-to-prism">src/popover/popover.directive.ts:32</a></div>
1092
- </td>
1093
- </tr>
1094
1004
 
1095
- </tbody>
1096
- </table>
1097
- <table class="table table-sm table-bordered">
1098
- <tbody>
1099
- <tr>
1100
- <td class="col-md-4">
1101
- <a name="alignmentBottomClass"></a>
1102
- <span class="name"><b>alignmentBottomClass</b><a href="#alignmentBottomClass"><span class="icon ion-ios-link"></span></a></span>
1103
- </td>
1104
- </tr>
1005
+ <tr>
1006
+ <td class="col-md-4">
1007
+ <div class="io-line">Defined in <a href="" data-line="185"
1008
+ class="link-to-prism">src/popover/popover.directive.ts:185</a></div>
1009
+ </td>
1010
+ </tr>
1105
1011
 
1106
- <tr>
1107
- <td class="col-md-4">
1108
- <span class="accessor"><b>get</b><code>alignmentBottomClass()</code></span>
1109
- </td>
1110
- </tr>
1111
- <tr>
1112
- <td class="col-md-4">
1113
- <div class="io-line">Defined in <a href="" data-line="37" class="link-to-prism">src/popover/popover.directive.ts:37</a></div>
1114
- </td>
1115
- </tr>
1116
1012
 
1117
- </tbody>
1118
- </table>
1119
- <table class="table table-sm table-bordered">
1120
- <tbody>
1121
- <tr>
1122
- <td class="col-md-4">
1123
- <a name="alignmentBottomLeftClass"></a>
1124
- <span class="name"><b>alignmentBottomLeftClass</b><a href="#alignmentBottomLeftClass"><span class="icon ion-ios-link"></span></a></span>
1125
- </td>
1126
- </tr>
1013
+ <tr>
1014
+ <td class="col-md-4">
1015
+ <div class="io-description"><p>Compute position of tooltip when autoAlign is enabled</p>
1016
+ </div>
1127
1017
 
1128
- <tr>
1129
- <td class="col-md-4">
1130
- <span class="accessor"><b>get</b><code>alignmentBottomLeftClass()</code></span>
1131
- </td>
1132
- </tr>
1133
- <tr>
1134
- <td class="col-md-4">
1135
- <div class="io-line">Defined in <a href="" data-line="41" class="link-to-prism">src/popover/popover.directive.ts:41</a></div>
1136
- </td>
1137
- </tr>
1018
+ <div class="io-description">
1019
+ <b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
1138
1020
 
1139
- </tbody>
1140
- </table>
1141
- <table class="table table-sm table-bordered">
1142
- <tbody>
1143
- <tr>
1144
- <td class="col-md-4">
1145
- <a name="alignmentBottomRightClass"></a>
1146
- <span class="name"><b>alignmentBottomRightClass</b><a href="#alignmentBottomRightClass"><span class="icon ion-ios-link"></span></a></span>
1147
- </td>
1148
- </tr>
1021
+ </div>
1022
+ </td>
1023
+ </tr>
1024
+ </tbody>
1025
+ </table>
1026
+ <table class="table table-sm table-bordered">
1027
+ <tbody>
1028
+ <tr>
1029
+ <td class="col-md-4">
1030
+ <a name="roundByDPR"></a>
1031
+ <span class="name">
1032
+ <span ><b>roundByDPR</b></span>
1033
+ <a href="#roundByDPR"><span class="icon ion-ios-link"></span></a>
1034
+ </span>
1035
+ </td>
1036
+ </tr>
1037
+ <tr>
1038
+ <td class="col-md-4">
1039
+ <code>roundByDPR(value)</code>
1040
+ </td>
1041
+ </tr>
1042
+
1043
+
1044
+ <tr>
1045
+ <td class="col-md-4">
1046
+ <div class="io-line">Defined in <a href="" data-line="177"
1047
+ class="link-to-prism">src/popover/popover.directive.ts:177</a></div>
1048
+ </td>
1049
+ </tr>
1050
+
1051
+
1052
+ <tr>
1053
+ <td class="col-md-4">
1054
+
1055
+ <div class="io-description">
1056
+ <b>Parameters :</b>
1057
+
1058
+ <table class="params">
1059
+ <thead>
1060
+ <tr>
1061
+ <td>Name</td>
1062
+ <td>Optional</td>
1063
+ </tr>
1064
+ </thead>
1065
+ <tbody>
1066
+ <tr>
1067
+ <td>value</td>
1068
+
1069
+ <td>
1070
+ No
1071
+ </td>
1072
+
1073
+
1074
+ </tr>
1075
+ </tbody>
1076
+ </table>
1077
+ </div>
1078
+ <div>
1079
+ </div>
1080
+ <div class="io-description">
1081
+ <b>Returns : </b> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank" >number</a></code>
1082
+
1083
+ </div>
1084
+ <div class="io-description">
1085
+
1086
+ </div>
1087
+ </td>
1088
+ </tr>
1089
+ </tbody>
1090
+ </table>
1091
+ <table class="table table-sm table-bordered">
1092
+ <tbody>
1093
+ <tr>
1094
+ <td class="col-md-4">
1095
+ <a name="updateAlignmentClass"></a>
1096
+ <span class="name">
1097
+ <span ><b>updateAlignmentClass</b></span>
1098
+ <a href="#updateAlignmentClass"><span class="icon ion-ios-link"></span></a>
1099
+ </span>
1100
+ </td>
1101
+ </tr>
1102
+ <tr>
1103
+ <td class="col-md-4">
1104
+ <code>updateAlignmentClass(newAlignment: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank">string</a>, previousAlignment?: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank">string</a>)</code>
1105
+ </td>
1106
+ </tr>
1107
+
1108
+
1109
+ <tr>
1110
+ <td class="col-md-4">
1111
+ <div class="io-line">Defined in <a href="" data-line="296"
1112
+ class="link-to-prism">src/popover/popover.directive.ts:296</a></div>
1113
+ </td>
1114
+ </tr>
1115
+
1116
+
1117
+ <tr>
1118
+ <td class="col-md-4">
1119
+ <div class="io-description"><p>Replace existing previous alignment class with new</p>
1120
+ </div>
1121
+
1122
+ <div class="io-description">
1123
+ <b>Parameters :</b>
1124
+
1125
+ <table class="params">
1126
+ <thead>
1127
+ <tr>
1128
+ <td>Name</td>
1129
+ <td>Type</td>
1130
+ <td>Optional</td>
1131
+ </tr>
1132
+ </thead>
1133
+ <tbody>
1134
+ <tr>
1135
+ <td>newAlignment</td>
1136
+ <td>
1137
+ <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
1138
+ </td>
1139
+
1140
+ <td>
1141
+ No
1142
+ </td>
1143
+
1144
+
1145
+ </tr>
1146
+ <tr>
1147
+ <td>previousAlignment</td>
1148
+ <td>
1149
+ <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
1150
+ </td>
1151
+
1152
+ <td>
1153
+ Yes
1154
+ </td>
1155
+
1156
+
1157
+ </tr>
1158
+ </tbody>
1159
+ </table>
1160
+ </div>
1161
+ <div>
1162
+ </div>
1163
+ <div class="io-description">
1164
+ <b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
1149
1165
 
1166
+ </div>
1167
+ <div class="io-description">
1168
+
1169
+ </div>
1170
+ </td>
1171
+ </tr>
1172
+ </tbody>
1173
+ </table>
1174
+ </section>
1175
+ <section data-compodoc="block-properties">
1176
+
1177
+ <h3 id="inputs">
1178
+ Properties
1179
+ </h3>
1180
+ <table class="table table-sm table-bordered">
1181
+ <tbody>
1182
+ <tr>
1183
+ <td class="col-md-4">
1184
+ <a name="_align"></a>
1185
+ <span class="name">
1186
+ <span ><b>_align</b></span>
1187
+ <a href="#_align"><span class="icon ion-ios-link"></span></a>
1188
+ </span>
1189
+ </td>
1190
+ </tr>
1150
1191
  <tr>
1151
1192
  <td class="col-md-4">
1152
- <span class="accessor"><b>get</b><code>alignmentBottomRightClass()</code></span>
1193
+ <i>Type : </i> <code>Placement</code>
1194
+
1153
1195
  </td>
1154
1196
  </tr>
1155
- <tr>
1156
- <td class="col-md-4">
1157
- <div class="io-line">Defined in <a href="" data-line="45" class="link-to-prism">src/popover/popover.directive.ts:45</a></div>
1158
- </td>
1159
- </tr>
1160
-
1161
- </tbody>
1162
- </table>
1163
- <table class="table table-sm table-bordered">
1164
- <tbody>
1165
1197
  <tr>
1166
1198
  <td class="col-md-4">
1167
- <a name="alignmentLeftClass"></a>
1168
- <span class="name"><b>alignmentLeftClass</b><a href="#alignmentLeftClass"><span class="icon ion-ios-link"></span></a></span>
1199
+ <i>Default value : </i><code>&quot;bottom&quot;</code>
1169
1200
  </td>
1170
1201
  </tr>
1202
+ <tr>
1203
+ <td class="col-md-4">
1204
+ <div class="io-line">Defined in <a href="" data-line="84" class="link-to-prism">src/popover/popover.directive.ts:84</a></div>
1205
+ </td>
1206
+ </tr>
1207
+
1171
1208
 
1209
+ </tbody>
1210
+ </table>
1211
+ <table class="table table-sm table-bordered">
1212
+ <tbody>
1213
+ <tr>
1214
+ <td class="col-md-4">
1215
+ <a name="alignmentClassPrefix"></a>
1216
+ <span class="name">
1217
+ <span class="modifier">Readonly</span>
1218
+ <span ><b>alignmentClassPrefix</b></span>
1219
+ <a href="#alignmentClassPrefix"><span class="icon ion-ios-link"></span></a>
1220
+ </span>
1221
+ </td>
1222
+ </tr>
1172
1223
  <tr>
1173
1224
  <td class="col-md-4">
1174
- <span class="accessor"><b>get</b><code>alignmentLeftClass()</code></span>
1225
+ <i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
1226
+
1175
1227
  </td>
1176
1228
  </tr>
1177
- <tr>
1178
- <td class="col-md-4">
1179
- <div class="io-line">Defined in <a href="" data-line="50" class="link-to-prism">src/popover/popover.directive.ts:50</a></div>
1180
- </td>
1181
- </tr>
1182
-
1183
- </tbody>
1184
- </table>
1185
- <table class="table table-sm table-bordered">
1186
- <tbody>
1187
1229
  <tr>
1188
1230
  <td class="col-md-4">
1189
- <a name="alignmentLeftTopClass"></a>
1190
- <span class="name"><b>alignmentLeftTopClass</b><a href="#alignmentLeftTopClass"><span class="icon ion-ios-link"></span></a></span>
1231
+ <i>Default value : </i><code>&quot;cds--popover--&quot;</code>
1191
1232
  </td>
1192
1233
  </tr>
1234
+ <tr>
1235
+ <td class="col-md-4">
1236
+ <div class="io-line">Defined in <a href="" data-line="85" class="link-to-prism">src/popover/popover.directive.ts:85</a></div>
1237
+ </td>
1238
+ </tr>
1193
1239
 
1240
+
1241
+ </tbody>
1242
+ </table>
1243
+ <table class="table table-sm table-bordered">
1244
+ <tbody>
1245
+ <tr>
1246
+ <td class="col-md-4">
1247
+ <a name="caretHeight"></a>
1248
+ <span class="name">
1249
+ <span class="modifier">Protected</span>
1250
+ <span ><b>caretHeight</b></span>
1251
+ <a href="#caretHeight"><span class="icon ion-ios-link"></span></a>
1252
+ </span>
1253
+ </td>
1254
+ </tr>
1194
1255
  <tr>
1195
1256
  <td class="col-md-4">
1196
- <span class="accessor"><b>get</b><code>alignmentLeftTopClass()</code></span>
1257
+ <i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank" >number</a></code>
1258
+
1197
1259
  </td>
1198
1260
  </tr>
1199
- <tr>
1200
- <td class="col-md-4">
1201
- <div class="io-line">Defined in <a href="" data-line="54" class="link-to-prism">src/popover/popover.directive.ts:54</a></div>
1202
- </td>
1203
- </tr>
1261
+ <tr>
1262
+ <td class="col-md-4">
1263
+ <div class="io-line">Defined in <a href="" data-line="122" class="link-to-prism">src/popover/popover.directive.ts:122</a></div>
1264
+ </td>
1265
+ </tr>
1204
1266
 
1205
- </tbody>
1206
- </table>
1207
- <table class="table table-sm table-bordered">
1208
- <tbody>
1267
+
1268
+ </tbody>
1269
+ </table>
1270
+ <table class="table table-sm table-bordered">
1271
+ <tbody>
1272
+ <tr>
1273
+ <td class="col-md-4">
1274
+ <a name="caretOffset"></a>
1275
+ <span class="name">
1276
+ <span class="modifier">Protected</span>
1277
+ <span ><b>caretOffset</b></span>
1278
+ <a href="#caretOffset"><span class="icon ion-ios-link"></span></a>
1279
+ </span>
1280
+ </td>
1281
+ </tr>
1209
1282
  <tr>
1210
1283
  <td class="col-md-4">
1211
- <a name="alignmentLeftBottomClass"></a>
1212
- <span class="name"><b>alignmentLeftBottomClass</b><a href="#alignmentLeftBottomClass"><span class="icon ion-ios-link"></span></a></span>
1284
+ <i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank" >number</a></code>
1285
+
1213
1286
  </td>
1214
1287
  </tr>
1288
+ <tr>
1289
+ <td class="col-md-4">
1290
+ <div class="io-line">Defined in <a href="" data-line="121" class="link-to-prism">src/popover/popover.directive.ts:121</a></div>
1291
+ </td>
1292
+ </tr>
1215
1293
 
1294
+
1295
+ </tbody>
1296
+ </table>
1297
+ <table class="table table-sm table-bordered">
1298
+ <tbody>
1299
+ <tr>
1300
+ <td class="col-md-4">
1301
+ <a name="caretRef"></a>
1302
+ <span class="name">
1303
+ <span class="modifier">Protected</span>
1304
+ <span ><b>caretRef</b></span>
1305
+ <a href="#caretRef"><span class="icon ion-ios-link"></span></a>
1306
+ </span>
1307
+ </td>
1308
+ </tr>
1216
1309
  <tr>
1217
1310
  <td class="col-md-4">
1218
- <span class="accessor"><b>get</b><code>alignmentLeftBottomClass()</code></span>
1311
+ <i>Type : </i> <code>HTMLElement</code>
1312
+
1219
1313
  </td>
1220
1314
  </tr>
1221
- <tr>
1222
- <td class="col-md-4">
1223
- <div class="io-line">Defined in <a href="" data-line="58" class="link-to-prism">src/popover/popover.directive.ts:58</a></div>
1224
- </td>
1225
- </tr>
1315
+ <tr>
1316
+ <td class="col-md-4">
1317
+ <div class="io-line">Defined in <a href="" data-line="120" class="link-to-prism">src/popover/popover.directive.ts:120</a></div>
1318
+ </td>
1319
+ </tr>
1226
1320
 
1227
- </tbody>
1228
- </table>
1229
- <table class="table table-sm table-bordered">
1230
- <tbody>
1321
+
1322
+ </tbody>
1323
+ </table>
1324
+ <table class="table table-sm table-bordered">
1325
+ <tbody>
1326
+ <tr>
1327
+ <td class="col-md-4">
1328
+ <a name="containerClass"></a>
1329
+ <span class="name">
1330
+ <span class="modifier"></span>
1331
+ <span ><b>containerClass</b></span>
1332
+ <a href="#containerClass"><span class="icon ion-ios-link"></span></a>
1333
+ </span>
1334
+ </td>
1335
+ </tr>
1231
1336
  <tr>
1232
1337
  <td class="col-md-4">
1233
- <a name="alignmentRightClass"></a>
1234
- <span class="name"><b>alignmentRightClass</b><a href="#alignmentRightClass"><span class="icon ion-ios-link"></span></a></span>
1338
+ <i>Default value : </i><code>true</code>
1235
1339
  </td>
1236
1340
  </tr>
1237
-
1238
1341
  <tr>
1239
1342
  <td class="col-md-4">
1240
- <span class="accessor"><b>get</b><code>alignmentRightClass()</code></span>
1343
+ <b>Decorators : </b>
1344
+ <br />
1345
+ <code>
1346
+ @HostBinding(&#x27;class.cds--popover-container&#x27;)<br />
1347
+ </code>
1241
1348
  </td>
1242
1349
  </tr>
1243
- <tr>
1244
- <td class="col-md-4">
1245
- <div class="io-line">Defined in <a href="" data-line="63" class="link-to-prism">src/popover/popover.directive.ts:63</a></div>
1246
- </td>
1247
- </tr>
1350
+ <tr>
1351
+ <td class="col-md-4">
1352
+ <div class="io-line">Defined in <a href="" data-line="116" class="link-to-prism">src/popover/popover.directive.ts:116</a></div>
1353
+ </td>
1354
+ </tr>
1248
1355
 
1249
- </tbody>
1250
- </table>
1251
- <table class="table table-sm table-bordered">
1252
- <tbody>
1356
+
1357
+ </tbody>
1358
+ </table>
1359
+ <table class="table table-sm table-bordered">
1360
+ <tbody>
1361
+ <tr>
1362
+ <td class="col-md-4">
1363
+ <a name="popoverContentRef"></a>
1364
+ <span class="name">
1365
+ <span class="modifier">Protected</span>
1366
+ <span ><b>popoverContentRef</b></span>
1367
+ <a href="#popoverContentRef"><span class="icon ion-ios-link"></span></a>
1368
+ </span>
1369
+ </td>
1370
+ </tr>
1253
1371
  <tr>
1254
1372
  <td class="col-md-4">
1255
- <a name="alignmentRightTopClass"></a>
1256
- <span class="name"><b>alignmentRightTopClass</b><a href="#alignmentRightTopClass"><span class="icon ion-ios-link"></span></a></span>
1373
+ <i>Type : </i> <code>HTMLElement</code>
1374
+
1257
1375
  </td>
1258
1376
  </tr>
1377
+ <tr>
1378
+ <td class="col-md-4">
1379
+ <div class="io-line">Defined in <a href="" data-line="119" class="link-to-prism">src/popover/popover.directive.ts:119</a></div>
1380
+ </td>
1381
+ </tr>
1259
1382
 
1383
+
1384
+ </tbody>
1385
+ </table>
1386
+ <table class="table table-sm table-bordered">
1387
+ <tbody>
1388
+ <tr>
1389
+ <td class="col-md-4">
1390
+ <a name="unmountFloatingElement"></a>
1391
+ <span class="name">
1392
+ <span class="modifier">Protected</span>
1393
+ <span ><b>unmountFloatingElement</b></span>
1394
+ <a href="#unmountFloatingElement"><span class="icon ion-ios-link"></span></a>
1395
+ </span>
1396
+ </td>
1397
+ </tr>
1260
1398
  <tr>
1261
1399
  <td class="col-md-4">
1262
- <span class="accessor"><b>get</b><code>alignmentRightTopClass()</code></span>
1400
+ <i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" target="_blank" >Function</a></code>
1401
+
1263
1402
  </td>
1264
1403
  </tr>
1265
- <tr>
1266
- <td class="col-md-4">
1267
- <div class="io-line">Defined in <a href="" data-line="67" class="link-to-prism">src/popover/popover.directive.ts:67</a></div>
1268
- </td>
1269
- </tr>
1404
+ <tr>
1405
+ <td class="col-md-4">
1406
+ <div class="io-line">Defined in <a href="" data-line="123" class="link-to-prism">src/popover/popover.directive.ts:123</a></div>
1407
+ </td>
1408
+ </tr>
1270
1409
 
1271
- </tbody>
1272
- </table>
1410
+
1411
+ </tbody>
1412
+ </table>
1413
+ </section>
1414
+
1415
+ <section data-compodoc="block-accessors">
1416
+ <h3 id="accessors">
1417
+ Accessors
1418
+ </h3>
1273
1419
  <table class="table table-sm table-bordered">
1274
1420
  <tbody>
1275
1421
  <tr>
1276
1422
  <td class="col-md-4">
1277
- <a name="alignmentRightBottomClass"></a>
1278
- <span class="name"><b>alignmentRightBottomClass</b><a href="#alignmentRightBottomClass"><span class="icon ion-ios-link"></span></a></span>
1423
+ <a name="align"></a>
1424
+ <span class="name"><b>align</b><a href="#align"><span class="icon ion-ios-link"></span></a></span>
1279
1425
  </td>
1280
1426
  </tr>
1281
1427
 
1428
+
1282
1429
  <tr>
1283
1430
  <td class="col-md-4">
1284
- <span class="accessor"><b>get</b><code>alignmentRightBottomClass()</code></span>
1431
+ <span class="accessor"><b>set</b><code>align(alignment: <a href="../undefineds/oldPlacement.html" target="_self">oldPlacement | Placement</a>)</code></span>
1285
1432
  </td>
1286
1433
  </tr>
1287
1434
  <tr>
1288
1435
  <td class="col-md-4">
1289
- <div class="io-line">Defined in <a href="" data-line="71" class="link-to-prism">src/popover/popover.directive.ts:71</a></div>
1436
+ <div class="io-line">Defined in <a href="" data-line="45" class="link-to-prism">src/popover/popover.directive.ts:45</a></div>
1290
1437
  </td>
1291
1438
  </tr>
1439
+ <tr>
1440
+ <td class="col-md-4">
1441
+ <div class="io-description"><p>Set alignment of popover
1442
+ As of v5, <code>oldPlacements</code> are now deprecated in favor of Placements</p>
1443
+ <p>When <code>autoAlign</code> is set to <code>true</code>, alignment may change for best placement</p>
1444
+ </div>
1292
1445
 
1446
+ <div class="io-description">
1447
+ <b>Parameters :</b>
1448
+ <table class="params">
1449
+ <thead>
1450
+ <tr>
1451
+ <td>Name</td>
1452
+ <td>Type</td>
1453
+ <td>Optional</td>
1454
+ </tr>
1455
+ </thead>
1456
+ <tbody>
1457
+ <tr>
1458
+ <td>alignment</td>
1459
+
1460
+ <td>
1461
+ <code><a href="../miscellaneous/typealiases.html#oldPlacement" target="_self" >oldPlacement | Placement</a></code>
1462
+ </td>
1463
+
1464
+ <td>
1465
+ No
1466
+ </td>
1467
+
1468
+ </tr>
1469
+ </tbody>
1470
+ </table>
1471
+ </div>
1472
+ <div>
1473
+ </div>
1474
+ <div class="io-description">
1475
+ <b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
1476
+
1477
+ </div>
1478
+ </td>
1479
+ </tr>
1293
1480
  </tbody>
1294
1481
  </table>
1295
1482
  </section>
@@ -1299,78 +1486,90 @@
1299
1486
 
1300
1487
  <div class="tab-pane fade tab-source-code" id="source">
1301
1488
  <pre class="line-numbers compodoc-sourcecode"><code class="language-typescript">import {
1489
+ AfterViewInit,
1302
1490
  ChangeDetectorRef,
1303
1491
  Directive,
1492
+ ElementRef,
1304
1493
  EventEmitter,
1305
1494
  HostBinding,
1306
1495
  Input,
1307
- Output
1496
+ NgZone,
1497
+ OnChanges,
1498
+ OnDestroy,
1499
+ Output,
1500
+ Renderer2,
1501
+ SimpleChanges
1308
1502
  } from &quot;@angular/core&quot;;
1503
+ import {
1504
+ arrow,
1505
+ autoUpdate,
1506
+ computePosition,
1507
+ flip,
1508
+ offset,
1509
+ Placement
1510
+ } from &quot;@floating-ui/dom&quot;;
1511
+
1512
+ // Deprecated popover alignments
1513
+ type oldPlacement &#x3D; &quot;top-left&quot;
1514
+ | &quot;top-right&quot;
1515
+ | &quot;bottom-left&quot;
1516
+ | &quot;bottom-right&quot;
1517
+ | &quot;left-bottom&quot;
1518
+ | &quot;left-top&quot;
1519
+ | &quot;right-bottom&quot;
1520
+ | &quot;right-top&quot;;
1309
1521
 
1310
- /**
1311
- * Applies popover container styling to the element it is applied to. Get started with importing the module:
1312
- *
1313
- * &#x60;&#x60;&#x60;typescript
1314
- * import { PopoverModule } from &#x27;carbon-components-angular&#x27;;
1315
- * &#x60;&#x60;&#x60;
1316
- *
1317
- * [See demo](../../?path&#x3D;/story/components-popover--basic)
1318
- */
1319
1522
  @Directive({
1320
1523
  selector: &quot;[cdsPopover], [ibmPopover]&quot;
1321
1524
  })
1322
- export class PopoverContainer {
1323
- // Top
1324
- @HostBinding(&quot;class.cds--popover--top&quot;) get alignmentTopClass() {
1325
- return this.align &#x3D;&#x3D;&#x3D; &quot;top&quot;;
1326
- }
1327
-
1328
- @HostBinding(&quot;class.cds--popover--top-left&quot;) get alignmentTopLeftClass() {
1329
- return this.align &#x3D;&#x3D;&#x3D; &quot;top-left&quot;;
1330
- }
1331
-
1332
- @HostBinding(&quot;class.cds--popover--top-right&quot;) get alignmentTopRightClass() {
1333
- return this.align &#x3D;&#x3D;&#x3D; &quot;top-right&quot;;
1334
- }
1335
-
1336
- // Bottom
1337
- @HostBinding(&quot;class.cds--popover--bottom&quot;) get alignmentBottomClass() {
1338
- return this.align &#x3D;&#x3D;&#x3D; &quot;bottom&quot;;
1339
- }
1340
-
1341
- @HostBinding(&quot;class.cds--popover--bottom-left&quot;) get alignmentBottomLeftClass() {
1342
- return this.align &#x3D;&#x3D;&#x3D; &quot;bottom-left&quot;;
1343
- }
1344
-
1345
- @HostBinding(&quot;class.cds--popover--bottom-right&quot;) get alignmentBottomRightClass() {
1346
- return this.align &#x3D;&#x3D;&#x3D; &quot;bottom-right&quot;;
1347
- }
1348
-
1349
- // Left
1350
- @HostBinding(&quot;class.cds--popover--left&quot;) get alignmentLeftClass() {
1351
- return this.align &#x3D;&#x3D;&#x3D; &quot;left&quot;;
1352
- }
1353
-
1354
- @HostBinding(&quot;class.cds--popover--left-top&quot;) get alignmentLeftTopClass() {
1355
- return this.align &#x3D;&#x3D;&#x3D; &quot;left-top&quot;;
1356
- }
1357
-
1358
- @HostBinding(&quot;class.cds--popover--left-bottom&quot;) get alignmentLeftBottomClass() {
1359
- return this.align &#x3D;&#x3D;&#x3D; &quot;left-bottom&quot;;
1360
- }
1361
-
1362
- // Right
1363
- @HostBinding(&quot;class.cds--popover--right&quot;) get alignmentRightClass() {
1364
- return this.align &#x3D;&#x3D;&#x3D; &quot;right&quot;;
1365
- }
1525
+ export class PopoverContainer implements AfterViewInit, OnChanges, OnDestroy {
1526
+ /**
1527
+ * Set alignment of popover
1528
+ * As of v5, &#x60;oldPlacements&#x60; are now deprecated in favor of Placements
1529
+ *
1530
+ * When &#x60;autoAlign&#x60; is set to &#x60;true&#x60;, alignment may change for best placement
1531
+ */
1532
+ @Input() set align(alignment: oldPlacement | Placement) {
1533
+ // If alignment is not passed, the default value will be &#x60;undefined&#x60;.
1534
+ if (!alignment) {
1535
+ return;
1536
+ }
1366
1537
 
1367
- @HostBinding(&quot;class.cds--popover--right-top&quot;) get alignmentRightTopClass() {
1368
- return this.align &#x3D;&#x3D;&#x3D; &quot;right-top&quot;;
1538
+ const previousAlignment &#x3D; this._align;
1539
+ switch (alignment) {
1540
+ case &quot;top-left&quot;:
1541
+ this._align &#x3D; &quot;top-start&quot;;
1542
+ break;
1543
+ case &quot;top-right&quot;:
1544
+ this._align &#x3D; &quot;top-end&quot;;
1545
+ break;
1546
+ case &quot;bottom-left&quot;:
1547
+ this._align &#x3D; &quot;bottom-start&quot;;
1548
+ break;
1549
+ case &quot;bottom-right&quot;:
1550
+ this._align &#x3D; &quot;bottom-end&quot;;
1551
+ break;
1552
+ case &quot;left-top&quot;:
1553
+ this._align &#x3D; &quot;left-start&quot;;
1554
+ break;
1555
+ case &quot;left-bottom&quot;:
1556
+ this._align &#x3D; &quot;left-end&quot;;
1557
+ break;
1558
+ case &quot;right-top&quot;:
1559
+ this._align &#x3D; &quot;right-start&quot;;
1560
+ break;
1561
+ case &quot;right-bottom&quot;:
1562
+ this._align &#x3D; &quot;right-end&quot;;
1563
+ break;
1564
+ default:
1565
+ this._align &#x3D; alignment as Placement;
1566
+ break;
1567
+ }
1568
+ this.updateAlignmentClass(this._align, previousAlignment);
1369
1569
  }
1370
1570
 
1371
- @HostBinding(&quot;class.cds--popover--right-bottom&quot;) get alignmentRightBottomClass() {
1372
- return this.align &#x3D;&#x3D;&#x3D; &quot;right-bottom&quot;;
1373
- }
1571
+ _align: Placement &#x3D; &quot;bottom&quot;;
1572
+ readonly alignmentClassPrefix &#x3D; &quot;cds--popover--&quot;;
1374
1573
 
1375
1574
  /**
1376
1575
  * Emits an event when the dialog is closed
@@ -1384,33 +1583,215 @@ export class PopoverContainer {
1384
1583
  * Emits an event when the state of &#x60;isOpen&#x60; changes. Allows &#x60;isOpen&#x60; to be double bound
1385
1584
  */
1386
1585
  @Output() isOpenChange &#x3D; new EventEmitter&lt;boolean&gt;();
1387
-
1586
+ /**
1587
+ * Show caret at the alignment position
1588
+ */
1388
1589
  @HostBinding(&quot;class.cds--popover--caret&quot;) @Input() caret &#x3D; true;
1590
+ /**
1591
+ * Enable drop shadow around the popover container
1592
+ */
1389
1593
  @HostBinding(&quot;class.cds--popover--drop-shadow&quot;) @Input() dropShadow &#x3D; true;
1594
+ /**
1595
+ * Enable high contrast for popover container
1596
+ */
1390
1597
  @HostBinding(&quot;class.cds--popover--high-contrast&quot;) @Input() highContrast &#x3D; false;
1391
- @HostBinding(&quot;class.cds--popover--open&quot;) @Input() isOpen &#x3D; false;
1392
-
1598
+ /**
1599
+ * **Experimental**: Use floating-ui to position the tooltip
1600
+ * This is not toggleable - should be assigned once
1601
+ */
1602
+ @HostBinding(&quot;class.cds--popover--auto-align&quot;) @Input() autoAlign &#x3D; false;
1393
1603
  @HostBinding(&quot;class.cds--popover-container&quot;) containerClass &#x3D; true;
1394
- @Input() align: &quot;top&quot; | &quot;top-left&quot; | &quot;top-right&quot; |
1395
- &quot;bottom&quot; | &quot;bottom-left&quot; | &quot;bottom-right&quot; |
1396
- &quot;left&quot; | &quot;left-bottom&quot; | &quot;left-top&quot; |
1397
- &quot;right&quot; | &quot;right-bottom&quot; | &quot;right-top&quot; &#x3D; &quot;bottom&quot;;
1604
+ @Input() @HostBinding(&quot;class.cds--popover--open&quot;) isOpen &#x3D; false;
1605
+
1606
+ protected popoverContentRef: HTMLElement;
1607
+ protected caretRef: HTMLElement;
1608
+ protected caretOffset: number;
1609
+ protected caretHeight: number;
1610
+ protected unmountFloatingElement: Function;
1398
1611
 
1399
- constructor(private changeDetectorRef: ChangeDetectorRef) {}
1612
+ constructor(
1613
+ protected elementRef: ElementRef,
1614
+ protected ngZone: NgZone,
1615
+ protected renderer: Renderer2,
1616
+ protected changeDetectorRef: ChangeDetectorRef
1617
+ ) {}
1400
1618
 
1401
- handleChange(open: boolean, event: Event) {
1402
- if (this.isOpen !&#x3D;&#x3D; open) {
1619
+ /**
1620
+ * Handles emitting open/close event
1621
+ * @param open - Is the popover container open
1622
+ * @param event - Event
1623
+ */
1624
+ handleChange(open: boolean, event?: Event) {
1625
+ // We only emit the event when parameter has an event to keep existing behavior
1626
+ if ((this.isOpen !&#x3D;&#x3D; open) &amp;&amp; event) {
1403
1627
  this.isOpenChange.emit(open);
1404
1628
  }
1405
1629
 
1406
1630
  if (open) {
1407
- this.onOpen.emit(event);
1631
+ if (event) {
1632
+ this.onOpen.emit(event);
1633
+ }
1634
+
1635
+ // when auto alignment is enabled, use auto update to set the placement for the element
1636
+ if (this.autoAlign) {
1637
+ if (this.caretRef) {
1638
+ // Get caret offset/height property
1639
+ // Getting computed styles once every open, otherwise expensive.
1640
+ const computedStyle &#x3D; getComputedStyle(this.caretRef);
1641
+ const offset &#x3D; computedStyle.getPropertyValue(&quot;--cds-popover-offset&quot;);
1642
+ const height &#x3D; computedStyle.getPropertyValue(&quot;--cds-popover-caret-height&quot;);
1643
+ this.caretOffset &#x3D; (offset?.includes(&quot;px&quot;) ? Number(offset.split(&quot;px&quot;, 1)[0]) : Number(offset.split(&quot;rem&quot;, 1)[0]) * 16) || 10;
1644
+ this.caretHeight &#x3D; (height?.includes(&quot;px&quot;) ? Number(height.split(&quot;px&quot;, 1)[0]) : Number(height.split(&quot;rem&quot;, 1)[0]) * 16) || 6;
1645
+ }
1646
+ if (this.elementRef.nativeElement &amp;&amp; this.popoverContentRef) {
1647
+ this.unmountFloatingElement &#x3D; autoUpdate(
1648
+ this.elementRef.nativeElement,
1649
+ this.popoverContentRef,
1650
+ this.recomputePosition.bind(this)
1651
+ );
1652
+ }
1653
+ }
1408
1654
  } else {
1409
- this.onClose.emit(event);
1655
+ this.cleanUp();
1656
+ if (event) {
1657
+ this.onClose.emit(event);
1658
+ }
1410
1659
  }
1411
1660
  this.isOpen &#x3D; open;
1412
1661
  this.changeDetectorRef.markForCheck();
1413
1662
  }
1663
+
1664
+ roundByDPR(value) {
1665
+ const dpr &#x3D; window.devicePixelRatio || 1;
1666
+ return Math.round(value * dpr) / dpr;
1667
+ }
1668
+
1669
+ /**
1670
+ * Compute position of tooltip when autoAlign is enabled
1671
+ */
1672
+ recomputePosition() {
1673
+ // Run outside of angular zone to avoid unnecessary change detection and rely on floating-ui
1674
+ this.ngZone.runOutsideAngular(async () &#x3D;&gt; {
1675
+ const { x, y, placement, middlewareData } &#x3D; await computePosition(
1676
+ this.elementRef.nativeElement,
1677
+ this.popoverContentRef,
1678
+ {
1679
+ placement: this._align,
1680
+ strategy: &quot;fixed&quot;,
1681
+ middleware: [
1682
+ offset(this.caretOffset),
1683
+ flip({ fallbackAxisSideDirection: &quot;start&quot; }),
1684
+ arrow({ element: this.caretRef })
1685
+ ]
1686
+ });
1687
+
1688
+ const previousAlignment &#x3D; this._align;
1689
+ this._align &#x3D; placement;
1690
+ this.updateAlignmentClass(this._align, previousAlignment);
1691
+
1692
+ // Using CSSOM to manipulate CSS to avoid content security policy inline-src
1693
+ // https://github.com/w3c/webappsec-csp/issues/212
1694
+ Object.assign(this.popoverContentRef.style, {
1695
+ position: &quot;fixed&quot;,
1696
+ top: &quot;0&quot;,
1697
+ left: &quot;0&quot;,
1698
+ // Using transform instead of top/left position to improve performance
1699
+ transform: &#x60;translate(${this.roundByDPR(x)}px,${this.roundByDPR(y)}px)&#x60;
1700
+ });
1701
+
1702
+ if (middlewareData.arrow) {
1703
+ const { x: arrowX, y: arrowY } &#x3D; middlewareData.arrow;
1704
+
1705
+ const staticSide &#x3D; {
1706
+ top: &quot;bottom&quot;,
1707
+ right: &quot;left&quot;,
1708
+ bottom: &quot;top&quot;,
1709
+ left: &quot;right&quot;
1710
+ }[placement.split(&quot;-&quot;)[0]];
1711
+
1712
+ this.caretRef.style.left &#x3D; arrowX !&#x3D; null ? &#x60;${arrowX}px&#x60; : &quot;&quot;;
1713
+ this.caretRef.style.top &#x3D; arrowY !&#x3D; null ? &#x60;${arrowY}px&#x60; : &quot;&quot;;
1714
+ this.caretRef.style.right &#x3D; &quot;&quot;;
1715
+ this.caretRef.style.bottom &#x3D; &quot;&quot;;
1716
+
1717
+ if (staticSide) {
1718
+ this.caretRef.style[staticSide] &#x3D; &#x60;${-this.caretHeight}px&#x60;;
1719
+ }
1720
+ }
1721
+ });
1722
+ }
1723
+
1724
+ /**
1725
+ * Close the popover and reopen it with updated values without emitting an event
1726
+ * @param changes
1727
+ */
1728
+ ngOnChanges(changes: SimpleChanges): void {
1729
+ // Close and reopen the popover, handle alignment/programmatic open/close
1730
+ const originalState &#x3D; this.isOpen;
1731
+ this.handleChange(false);
1732
+
1733
+ // Ignore first change since content is not initialized
1734
+ if (changes.autoAlign &amp;&amp; !changes.autoAlign.firstChange) {
1735
+ // Reset the inline styles
1736
+ this.popoverContentRef &#x3D; this.elementRef.nativeElement.querySelector(&quot;.cds--popover-content&quot;);
1737
+ this.popoverContentRef.setAttribute(&quot;style&quot;, &quot;&quot;);
1738
+ this.caretRef &#x3D; this.elementRef.nativeElement.querySelector(&quot;span.cds--popover-caret&quot;);
1739
+ }
1740
+
1741
+ this.handleChange(originalState);
1742
+ }
1743
+
1744
+ /**
1745
+ * Handle initialization of element
1746
+ */
1747
+ ngAfterViewInit(): void {
1748
+ this.initializeReferences();
1749
+ }
1750
+
1751
+ initializeReferences(): void {
1752
+ this.updateAlignmentClass(this._align);
1753
+
1754
+ // Initialize html references since they will not change and are required for popover components
1755
+ this.popoverContentRef &#x3D; this.elementRef.nativeElement.querySelector(&quot;.cds--popover-content&quot;);
1756
+ this.caretRef &#x3D; this.elementRef.nativeElement.querySelector(&quot;span.cds--popover-caret&quot;);
1757
+
1758
+ // Handle initial isOpen
1759
+ this.handleChange(this.isOpen);
1760
+ }
1761
+
1762
+ /**
1763
+ * Clean up
1764
+ */
1765
+ ngOnDestroy(): void {
1766
+ this.cleanUp();
1767
+ }
1768
+
1769
+ /**
1770
+ * Clean up &#x60;autoUpdate&#x60; if auto alignment is enabled
1771
+ */
1772
+ cleanUp() {
1773
+ if (this.unmountFloatingElement) {
1774
+ this.unmountFloatingElement();
1775
+ }
1776
+ this.unmountFloatingElement &#x3D; undefined;
1777
+ }
1778
+
1779
+ /**
1780
+ * Replace existing previous alignment class with new
1781
+ * @param previousAlignment
1782
+ */
1783
+ updateAlignmentClass(newAlignment: string, previousAlignment?: string) {
1784
+ if (this.elementRef.nativeElement &amp;&amp; previousAlignment !&#x3D;&#x3D; newAlignment) {
1785
+ const regexp &#x3D; new RegExp(&quot;right|top|left|bottom&quot;);
1786
+ // Since we are constantly switching, it&#x27;s safer to delete all matching class names
1787
+ this.elementRef.nativeElement.classList.forEach(className &#x3D;&gt; {
1788
+ if (regexp.test(className)) {
1789
+ this.renderer.removeClass(this.elementRef.nativeElement, &#x60;${className}&#x60;);
1790
+ }
1791
+ });
1792
+ this.renderer.addClass(this.elementRef.nativeElement, &#x60;${this.alignmentClassPrefix}${newAlignment}&#x60;);
1793
+ }
1794
+ }
1414
1795
  }
1415
1796
  </code></pre>
1416
1797
  </div>