feat(): refactor overlay position

src/api/docs/components/menu.html

@@ -3,4 +3,8 @@ <h1 id="menu">Menu</h1>
 <p>Menus allow users make a selection from multiple options.</p>
 <demo-view path="docs/components/menu-demo/menu-demo-01">
   <aui-menu-demo-01></aui-menu-demo-01>
+</demo-view>
+<h2 id="menu-playground">Menu Playground</h2>
+<demo-view path="docs/components/menu-demo/menu-playground">
+  <aui-menu-playground></aui-menu-playground>
 </demo-view>

src/api/docs/demos/menu-playground.component.html.html

@@ -0,0 +1,55 @@
+<pre class="ttb"><code prsm class="ttm"><span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;</span>button</span> <span class="tt18 ttbx">ly-button</span> <span class="tt18 ttbx">[openOnHover]</span><span class="tt18 ttbm"><span class="tt18 ttae">=</span><span class="tt18 ttae">"</span>openOnHover<span class="tt18 ttae">"</span></span> <span class="tt18 ttbx">[lyMenuTriggerFor]</span><span class="tt18 ttbm"><span class="tt18 ttae">=</span><span class="tt18 ttae">"</span>_myMenu<span class="tt18 ttae">"</span></span><span class="tt18 ttae">></span></span>
+  I am a button
+<span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;/</span>button</span><span class="tt18 ttae">></span></span>
+
+<span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;</span>ng-template</span> <span class="tt18 ttbx">#_myMenu</span> <span class="tt18 ttbx">let-M</span><span class="tt18 ttae">></span></span>
+  <span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;</span>ly-menu</span>
+    <span class="tt18 ttbx">[ref]</span><span class="tt18 ttbm"><span class="tt18 ttae">=</span><span class="tt18 ttae">"</span>M<span class="tt18 ttae">"</span></span>
+    <span class="tt18 ttbx">[hasBackdrop]</span><span class="tt18 ttbm"><span class="tt18 ttae">=</span><span class="tt18 ttae">"</span>hasBackdrop<span class="tt18 ttae">"</span></span>
+    <span class="tt18 ttbx">[xAnchor]</span><span class="tt18 ttbm"><span class="tt18 ttae">=</span><span class="tt18 ttae">"</span>xAnchor<span class="tt18 ttae">"</span></span>
+    <span class="tt18 ttbx">[yAnchor]</span><span class="tt18 ttbm"><span class="tt18 ttae">=</span><span class="tt18 ttae">"</span>yAnchor<span class="tt18 ttae">"</span></span>
+    <span class="tt18 ttbx">[xAxis]</span><span class="tt18 ttbm"><span class="tt18 ttae">=</span><span class="tt18 ttae">"</span>xAxis<span class="tt18 ttae">"</span></span>
+    <span class="tt18 ttbx">[yAxis]</span><span class="tt18 ttbm"><span class="tt18 ttae">=</span><span class="tt18 ttae">"</span>yAxis<span class="tt18 ttae">"</span></span>
+  <span class="tt18 ttae">></span></span>
+    <span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;</span>button</span> <span class="tt18 ttbx">ly-button</span> <span class="tt18 ttbx">ly-menu-item</span> <span class="tt18 ttbx">*ngFor</span><span class="tt18 ttbm"><span class="tt18 ttae">=</span><span class="tt18 ttae">"</span>let item of [null, null, null]; index as i<span class="tt18 ttae">"</span></span><span class="tt18 ttae">></span></span>
+      <span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;</span>span</span><span class="tt18 ttae">></span></span>Item &#123;&#123; i + 1 &#125;&#125;<span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;/</span>span</span><span class="tt18 ttae">></span></span>
+    <span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;/</span>button</span><span class="tt18 ttae">></span></span>
+  <span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;/</span>ly-menu</span><span class="tt18 ttae">></span></span>
+<span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;/</span>ng-template</span><span class="tt18 ttae">></span></span>
+
+<span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;</span>div</span><span class="tt18 ttae">></span></span>
+  <span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;</span>ly-checkbox</span> <span class="tt18 ttbx">[(ngModel)]</span><span class="tt18 ttbm"><span class="tt18 ttae">=</span><span class="tt18 ttae">"</span>hasBackdrop<span class="tt18 ttae">"</span></span><span class="tt18 ttae">></span></span>hasBackdrop<span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;/</span>ly-checkbox</span><span class="tt18 ttae">></span></span>
+  <span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;</span>ly-checkbox</span> <span class="tt18 ttbx">[(ngModel)]</span><span class="tt18 ttbm"><span class="tt18 ttae">=</span><span class="tt18 ttae">"</span>openOnHover<span class="tt18 ttae">"</span></span><span class="tt18 ttae">></span></span>openOnHover<span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;/</span>ly-checkbox</span><span class="tt18 ttae">></span></span>
+<span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;/</span>div</span><span class="tt18 ttae">></span></span>
+
+<span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;</span>div</span><span class="tt18 ttae">></span></span>
+  <span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;</span>ly-radio-group</span> <span class="tt18 ttbx">[(ngModel)]</span><span class="tt18 ttbm"><span class="tt18 ttae">=</span><span class="tt18 ttae">"</span>xAnchor<span class="tt18 ttae">"</span></span><span class="tt18 ttae">></span></span>
+    <span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;</span>label</span> <span class="tt18 ttbx">lyTyp</span><span class="tt18 ttbm"><span class="tt18 ttae">=</span><span class="tt18 ttae">"</span>subheading<span class="tt18 ttae">"</span></span> <span class="tt18 ttbx">gutterBottom</span><span class="tt18 ttae">></span></span>xAnchor: <span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;/</span>label</span><span class="tt18 ttae">></span></span>
+    <span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;</span>ly-radio</span> <span class="tt18 ttbx">value</span><span class="tt18 ttbm"><span class="tt18 ttae">=</span><span class="tt18 ttae">"</span>before<span class="tt18 ttae">"</span></span><span class="tt18 ttae">></span></span>before<span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;/</span>ly-radio</span><span class="tt18 ttae">></span></span>
+    <span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;</span>ly-radio</span> <span class="tt18 ttbx">value</span><span class="tt18 ttbm"><span class="tt18 ttae">=</span><span class="tt18 ttae">"</span>after<span class="tt18 ttae">"</span></span><span class="tt18 ttae">></span></span>after<span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;/</span>ly-radio</span><span class="tt18 ttae">></span></span>
+  <span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;/</span>ly-radio-group</span><span class="tt18 ttae">></span></span>
+<span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;/</span>div</span><span class="tt18 ttae">></span></span>
+<span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;</span>div</span><span class="tt18 ttae">></span></span>
+  <span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;</span>ly-radio-group</span> <span class="tt18 ttbx">[(ngModel)]</span><span class="tt18 ttbm"><span class="tt18 ttae">=</span><span class="tt18 ttae">"</span>yAnchor<span class="tt18 ttae">"</span></span><span class="tt18 ttae">></span></span>
+    <span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;</span>label</span> <span class="tt18 ttbx">lyTyp</span><span class="tt18 ttbm"><span class="tt18 ttae">=</span><span class="tt18 ttae">"</span>subheading<span class="tt18 ttae">"</span></span> <span class="tt18 ttbx">gutterBottom</span><span class="tt18 ttae">></span></span>yAnchor: <span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;/</span>label</span><span class="tt18 ttae">></span></span>
+    <span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;</span>ly-radio</span> <span class="tt18 ttbx">value</span><span class="tt18 ttbm"><span class="tt18 ttae">=</span><span class="tt18 ttae">"</span>above<span class="tt18 ttae">"</span></span><span class="tt18 ttae">></span></span>above<span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;/</span>ly-radio</span><span class="tt18 ttae">></span></span>
+    <span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;</span>ly-radio</span> <span class="tt18 ttbx">value</span><span class="tt18 ttbm"><span class="tt18 ttae">=</span><span class="tt18 ttae">"</span>below<span class="tt18 ttae">"</span></span><span class="tt18 ttae">></span></span>below<span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;/</span>ly-radio</span><span class="tt18 ttae">></span></span>
+  <span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;/</span>ly-radio-group</span><span class="tt18 ttae">></span></span>
+<span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;/</span>div</span><span class="tt18 ttae">></span></span>
+
+<span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;</span>div</span><span class="tt18 ttae">></span></span>
+  <span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;</span>ly-radio-group</span> <span class="tt18 ttbx">[(ngModel)]</span><span class="tt18 ttbm"><span class="tt18 ttae">=</span><span class="tt18 ttae">"</span>xAxis<span class="tt18 ttae">"</span></span><span class="tt18 ttae">></span></span>
+    <span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;</span>label</span> <span class="tt18 ttbx">lyTyp</span><span class="tt18 ttbm"><span class="tt18 ttae">=</span><span class="tt18 ttae">"</span>subheading<span class="tt18 ttae">"</span></span> <span class="tt18 ttbx">gutterBottom</span><span class="tt18 ttae">></span></span>xAxis: <span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;/</span>label</span><span class="tt18 ttae">></span></span>
+    <span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;</span>ly-radio</span> <span class="tt18 ttbx">value</span><span class="tt18 ttbm"><span class="tt18 ttae">=</span><span class="tt18 ttae">"</span>before<span class="tt18 ttae">"</span></span><span class="tt18 ttae">></span></span>before<span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;/</span>ly-radio</span><span class="tt18 ttae">></span></span>
+    <span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;</span>ly-radio</span> <span class="tt18 ttbx">value</span><span class="tt18 ttbm"><span class="tt18 ttae">=</span><span class="tt18 ttae">"</span>after<span class="tt18 ttae">"</span></span><span class="tt18 ttae">></span></span>after<span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;/</span>ly-radio</span><span class="tt18 ttae">></span></span>
+  <span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;/</span>ly-radio-group</span><span class="tt18 ttae">></span></span>
+<span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;/</span>div</span><span class="tt18 ttae">></span></span>
+
+<span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;</span>div</span><span class="tt18 ttae">></span></span>
+  <span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;</span>ly-radio-group</span> <span class="tt18 ttbx">[(ngModel)]</span><span class="tt18 ttbm"><span class="tt18 ttae">=</span><span class="tt18 ttae">"</span>yAxis<span class="tt18 ttae">"</span></span><span class="tt18 ttae">></span></span>
+    <span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;</span>label</span> <span class="tt18 ttbx">lyTyp</span><span class="tt18 ttbm"><span class="tt18 ttae">=</span><span class="tt18 ttae">"</span>subheading<span class="tt18 ttae">"</span></span> <span class="tt18 ttbx">gutterBottom</span><span class="tt18 ttae">></span></span>yAxis: <span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;/</span>label</span><span class="tt18 ttae">></span></span>
+    <span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;</span>ly-radio</span> <span class="tt18 ttbx">value</span><span class="tt18 ttbm"><span class="tt18 ttae">=</span><span class="tt18 ttae">"</span>above<span class="tt18 ttae">"</span></span><span class="tt18 ttae">></span></span>above<span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;/</span>ly-radio</span><span class="tt18 ttae">></span></span>
+    <span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;</span>ly-radio</span> <span class="tt18 ttbx">value</span><span class="tt18 ttbm"><span class="tt18 ttae">=</span><span class="tt18 ttae">"</span>below<span class="tt18 ttae">"</span></span><span class="tt18 ttae">></span></span>below<span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;/</span>ly-radio</span><span class="tt18 ttae">></span></span>
+  <span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;/</span>ly-radio-group</span><span class="tt18 ttae">></span></span>
+<span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;/</span>div</span><span class="tt18 ttae">></span></span>
+</code></pre>

src/api/docs/demos/menu-playground.component.ts.html

@@ -0,0 +1,23 @@
+<pre class="ttb"><code prsm class="ttm"><span class="tt18 tt1j">import</span> <span class="tt18 ttae">&#123;</span> Component<span class="tt18 ttae">,</span> OnInit<span class="tt18 ttae">,</span> ChangeDetectionStrategy <span class="tt18 ttae">&#125;</span> <span class="tt18 tt1j">from</span> <span class="tt18 tt3z">'@angular/core'</span><span class="tt18 ttae">;</span>
+<span class="tt18 tt1j">import</span> <span class="tt18 ttae">&#123;</span> XPosition<span class="tt18 ttae">,</span> YPosition <span class="tt18 ttae">&#125;</span> <span class="tt18 tt1j">from</span> <span class="tt18 tt3z">'@alyle/ui'</span><span class="tt18 ttae">;</span>
+
+@<span class="tt18 tta3">Component</span><span class="tt18 ttae">(</span><span class="tt18 ttae">&#123;</span>
+  selector<span class="tt18 ttb0">:</span> <span class="tt18 tt3z">'aui-menu-playground'</span><span class="tt18 ttae">,</span>
+  templateUrl<span class="tt18 ttb0">:</span> <span class="tt18 tt3z">'./menu-playground.component.html'</span><span class="tt18 ttae">,</span>
+  changeDetection<span class="tt18 ttb0">:</span> ChangeDetectionStrategy<span class="tt18 ttae">.</span>OnPush
+<span class="tt18 ttae">&#125;</span><span class="tt18 ttae">)</span>
+<span class="tt18 tt1j">export</span> <span class="tt18 tt1j">class</span> <span class="tt18 ttc8">MenuPlaygroundComponent</span> <span class="tt18 tt1j">implements</span> <span class="tt18 ttc8">OnInit</span> <span class="tt18 ttae">&#123;</span>
+  openOnHover <span class="tt18 ttb0">=</span> <span class="tt18 boolean">false</span><span class="tt18 ttae">;</span>
+  hasBackdrop <span class="tt18 ttb0">=</span> <span class="tt18 boolean">true</span><span class="tt18 ttae">;</span>
+  xAnchor<span class="tt18 ttb0">:</span> XPosition <span class="tt18 ttb0">=</span> XPosition<span class="tt18 ttae">.</span>before<span class="tt18 ttae">;</span>
+  yAnchor<span class="tt18 ttb0">:</span> YPosition <span class="tt18 ttb0">=</span> YPosition<span class="tt18 ttae">.</span>below<span class="tt18 ttae">;</span>
+  xAxis<span class="tt18 ttb0">:</span> XPosition <span class="tt18 ttb0">=</span> XPosition<span class="tt18 ttae">.</span>after<span class="tt18 ttae">;</span>
+  yAxis<span class="tt18 ttb0">:</span> YPosition <span class="tt18 ttb0">=</span> YPosition<span class="tt18 ttae">.</span>below<span class="tt18 ttae">;</span>
+
+  <span class="tt18 tt1j">constructor</span><span class="tt18 ttae">(</span><span class="tt18 ttae">)</span> <span class="tt18 ttae">&#123;</span> <span class="tt18 ttae">&#125;</span>
+
+  <span class="tt18 tta3">ngOnInit</span><span class="tt18 ttae">(</span><span class="tt18 ttae">)</span><span class="tt18 ttb0">:</span> <span class="tt18 tt1j">void</span> <span class="tt18 ttae">&#123;</span>
+  <span class="tt18 ttae">&#125;</span>
+
+<span class="tt18 ttae">&#125;</span>
+</code></pre>

src/api/docs/demos/menu-playground.module.ts.html

@@ -0,0 +1,26 @@
+<pre class="ttb"><code prsm class="ttm"><span class="tt18 tt1j">import</span> <span class="tt18 ttae">&#123;</span> NgModule <span class="tt18 ttae">&#125;</span> <span class="tt18 tt1j">from</span> <span class="tt18 tt3z">'@angular/core'</span><span class="tt18 ttae">;</span>
+<span class="tt18 tt1j">import</span> <span class="tt18 ttae">&#123;</span> CommonModule <span class="tt18 ttae">&#125;</span> <span class="tt18 tt1j">from</span> <span class="tt18 tt3z">'@angular/common'</span><span class="tt18 ttae">;</span>
+<span class="tt18 tt1j">import</span> <span class="tt18 ttae">&#123;</span> FormsModule <span class="tt18 ttae">&#125;</span> <span class="tt18 tt1j">from</span> <span class="tt18 tt3z">'@angular/forms'</span><span class="tt18 ttae">;</span>
+<span class="tt18 tt1j">import</span> <span class="tt18 ttae">&#123;</span> LyButtonModule <span class="tt18 ttae">&#125;</span> <span class="tt18 tt1j">from</span> <span class="tt18 tt3z">'@alyle/ui/button'</span><span class="tt18 ttae">;</span>
+<span class="tt18 tt1j">import</span> <span class="tt18 ttae">&#123;</span> LyMenuModule <span class="tt18 ttae">&#125;</span> <span class="tt18 tt1j">from</span> <span class="tt18 tt3z">'@alyle/ui/menu'</span><span class="tt18 ttae">;</span>
+<span class="tt18 tt1j">import</span> <span class="tt18 ttae">&#123;</span> LyCheckboxModule <span class="tt18 ttae">&#125;</span> <span class="tt18 tt1j">from</span> <span class="tt18 tt3z">'@alyle/ui/checkbox'</span><span class="tt18 ttae">;</span>
+<span class="tt18 tt1j">import</span> <span class="tt18 ttae">&#123;</span> LyRadioModule <span class="tt18 ttae">&#125;</span> <span class="tt18 tt1j">from</span> <span class="tt18 tt3z">'@alyle/ui/radio'</span><span class="tt18 ttae">;</span>
+
+<span class="tt18 tt1j">import</span> <span class="tt18 ttae">&#123;</span> MenuPlaygroundComponent <span class="tt18 ttae">&#125;</span> <span class="tt18 tt1j">from</span> <span class="tt18 tt3z">'./menu-playground.component'</span><span class="tt18 ttae">;</span>
+
+
+
+@<span class="tt18 tta3">NgModule</span><span class="tt18 ttae">(</span><span class="tt18 ttae">&#123;</span>
+  declarations<span class="tt18 ttb0">:</span> <span class="tt18 ttae">[</span>MenuPlaygroundComponent<span class="tt18 ttae">]</span><span class="tt18 ttae">,</span>
+  imports<span class="tt18 ttb0">:</span> <span class="tt18 ttae">[</span>
+    CommonModule<span class="tt18 ttae">,</span>
+    FormsModule<span class="tt18 ttae">,</span>
+    LyButtonModule<span class="tt18 ttae">,</span>
+    LyMenuModule<span class="tt18 ttae">,</span>
+    LyCheckboxModule<span class="tt18 ttae">,</span>
+    LyRadioModule
+  <span class="tt18 ttae">]</span><span class="tt18 ttae">,</span>
+  exports<span class="tt18 ttb0">:</span> <span class="tt18 ttae">[</span>MenuPlaygroundComponent<span class="tt18 ttae">]</span>
+<span class="tt18 ttae">&#125;</span><span class="tt18 ttae">)</span>
+<span class="tt18 tt1j">export</span> <span class="tt18 tt1j">class</span> <span class="tt18 ttc8">MenuPlaygroundModule</span> <span class="tt18 ttae">&#123;</span> <span class="tt18 ttae">&#125;</span>
+</code></pre>