[IMP] web: add a <Popover> component

Using bootstrap popover with owl is possible, but with a lot of
friction.

This commit adds a Popover element to ease developments that require
a popover. This component takes 2 props:
  - position='bottom' (optional): 'top', 'bottom', 'left', 'right'
  - title (optional)

Its usage requires setting an `opened` slot for the content of the
popover, whilst the 'trigger' of the popover uses the default slot.

E.g.
```xml
<Parent>
 <Popover>
  <t t-set="opened">
   <p>You have opened the popover, congratulations!</p>
   <button t-on-click='_handlerOnParent'>Dispatch cake</button>
  </t>
  <button class="btn btn-primary">Click me!</button>
 </Popover>
</Parent>
```

Note that:
- only one popover can be opened at a time (opening a popover will
close any previously opened popover)
- `Popover` uses `Portal` under the hood, so events are propagated
correctly even though the popover is teleported elsewhere in the dom
(see example in this commit message with `_handlerOnParent`)
- `<Popover>` is registed as a global component in QWeb and does not
need to be added to a Component's subcomponents list

closes odoo/odoo#47710

Signed-off-by: Damien Bouvy (dbo) <dbo@odoo.com>

1 files changed, 3 insertions, 0 deletions

diff --git a/addons/web/views/webclient_templates.xml b/addons/web/views/webclient_templates.xml
index 0a208699b9b..05059f15d55 100644
--- a/addons/web/views/webclient_templates.xml
+++ b/addons/web/views/webclient_templates.xml
@@ -74,6 +74,7 @@
         <link rel="stylesheet" type="text/scss" href="/web/static/src/scss/daterangepicker.scss"/>
         <link rel="stylesheet" type="text/scss" href="/web/static/src/scss/banner.scss"/>
         <link rel="stylesheet" type="text/scss" href="/web/static/src/scss/colorpicker.scss"/>
+        <link rel="stylesheet" type="text/scss" href="/web/static/src/scss/popover.scss"/>
         <link rel="stylesheet" type="text/scss" href="/web/static/src/scss/translation_dialog.scss"/>
         <link rel="stylesheet" type="text/scss" href="/web/static/src/scss/keyboard.scss"/>
         <link rel="stylesheet" type="text/scss" href="/web/static/src/scss/name_and_signature.scss"/>
@@ -139,6 +140,7 @@
         <script type="text/javascript" src="/web/static/src/js/core/concurrency.js"></script>
         <script type="text/javascript" src="/web/static/src/js/core/dialog.js"></script>
         <script type="text/javascript" src="/web/static/src/js/core/owl_dialog.js"></script>
+        <script type="text/javascript" src="/web/static/src/js/core/popover.js"></script>
         <script type="text/javascript" src="/web/static/src/js/core/dom.js"></script>
         <script type="text/javascript" src="/web/static/src/js/core/local_storage.js"></script>
         <script type="text/javascript" src="/web/static/src/js/core/mixins.js"></script>
@@ -725,6 +727,7 @@
         <script type="text/javascript" src="/web/static/tests/core/widget_tests.js"></script>
         <script type="text/javascript" src="/web/static/tests/core/dialog_tests.js"></script>
         <script type="text/javascript" src="/web/static/tests/core/owl_dialog_tests.js"></script>
+        <script type="text/javascript" src="/web/static/tests/core/popover_tests.js"></script>
         <script type="text/javascript" src="/web/static/tests/core/dom_tests.js"></script>
 
         <script type="text/javascript" src="/web/static/tests/chrome/action_manager_tests.js"></script>