From 5fc39bed09673bd37dc9cd264effd21be8c76545 Mon Sep 17 00:00:00 2001
From: Thijs Louisse <Thijs.Louisse@ing.com>
Date: Tue, 15 Mar 2022 19:13:01 +0100
Subject: [PATCH] feat(select-rich): give invoker access .to hostElement

---
 packages/select-rich/src/LionSelectInvoker.js | 28 ++++++++++---------
 packages/select-rich/src/LionSelectRich.js    |  3 ++
 2 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/packages/select-rich/src/LionSelectInvoker.js b/packages/select-rich/src/LionSelectInvoker.js
index 2b1ed0727..21fcfeeaa 100644
--- a/packages/select-rich/src/LionSelectInvoker.js
+++ b/packages/select-rich/src/LionSelectInvoker.js
@@ -5,6 +5,7 @@ import { css, html, SlotMixin } from '@lion/core';
  * @typedef {import('@lion/core').CSSResult} CSSResult
  * @typedef {import('@lion/core').TemplateResult} TemplateResult
  * @typedef {import('@lion/listbox').LionOption} LionOption
+ * @typedef {import('@lion/select-rich').LionSelectRich} LionSelectRich
  */
 
 /**
@@ -32,19 +33,10 @@ export class LionSelectInvoker extends SlotMixin(LionButton) {
   static get properties() {
     return {
       ...super.properties,
-      selectedElement: {
-        type: Object,
-      },
-      readOnly: {
-        type: Boolean,
-        reflect: true,
-        attribute: 'readonly',
-      },
-      singleOption: {
-        type: Boolean,
-        reflect: true,
-        attribute: 'single-option',
-      },
+      selectedElement: { type: Object },
+      hostElement: { type: Object },
+      readOnly: { type: Boolean, reflect: true, attribute: 'readonly' },
+      singleOption: { type: Boolean, reflect: true, attribute: 'single-option' },
     };
   }
 
@@ -61,6 +53,9 @@ export class LionSelectInvoker extends SlotMixin(LionButton) {
     };
   }
 
+  /**
+   * @configure OverlayMixin
+   */
   get _contentWrapperNode() {
     return /** @type {ShadowRoot} */ (this.shadowRoot).getElementById('content-wrapper');
   }
@@ -78,6 +73,13 @@ export class LionSelectInvoker extends SlotMixin(LionButton) {
      * @type {LionOption | null}
      */
     this.selectedElement = null;
+
+    /**
+     * The LionSelectRich element this invoker is part of. Will be set on connectedCallback of
+     * LionSelectRich
+     * @type {LionSelectRich | null}
+     */
+    this.hostElement = null;
     /**
      * When the connected LionSelectRich instance has only one option,
      * this should be reflected in the invoker as well
diff --git a/packages/select-rich/src/LionSelectRich.js b/packages/select-rich/src/LionSelectRich.js
index 9223f865a..3d70117b5 100644
--- a/packages/select-rich/src/LionSelectRich.js
+++ b/packages/select-rich/src/LionSelectRich.js
@@ -140,6 +140,9 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L
     super.connectedCallback();
     this._invokerNode.selectedElement =
       this.formElements[/**  @type {number} */ (this.checkedIndex)];
+
+    this._invokerNode.hostElement = this;
+
     this.__setupInvokerNode();
     this.__toggleInvokerDisabled();
     this.addEventListener('keyup', this.__onKeyUp);