From 20ba0ca8c02ebb983da3b5cd4fa494fae70e6c41 Mon Sep 17 00:00:00 2001
From: Thijs Louisse <Thijs.Louisse@ing.com>
Date: Fri, 23 Oct 2020 16:40:07 +0200
Subject: [PATCH] chore: type enhancements SlotMixin, LocalizeMixin,
 SelectRichInvoker

---
 .changeset/large-walls-dance.md                      | 11 +++++++++++
 packages/core/types/SlotMixinTypes.d.ts              |  2 +-
 packages/localize/types/LocalizeMixinTypes.d.ts      |  3 ++-
 packages/select-rich/src/LionSelectInvoker.js        |  5 +++--
 .../select-rich/test/lion-select-invoker.test.js     | 12 ++++++++----
 5 files changed, 25 insertions(+), 8 deletions(-)
 create mode 100644 .changeset/large-walls-dance.md

diff --git a/.changeset/large-walls-dance.md b/.changeset/large-walls-dance.md
new file mode 100644
index 000000000..522088b93
--- /dev/null
+++ b/.changeset/large-walls-dance.md
@@ -0,0 +1,11 @@
+---
+'@lion/core': patch
+'@lion/localize': patch
+'@lion/select-rich': patch
+---
+
+Type enhancements
+
+- LocalizeMixinTypes.d.ts extend from LitElement
+- Make `slots` a getter in SlotMixin types
+- selectedElement of type 'LionOption' in SelectRichInvoker
diff --git a/packages/core/types/SlotMixinTypes.d.ts b/packages/core/types/SlotMixinTypes.d.ts
index 9bca61a6a..8644536b9 100644
--- a/packages/core/types/SlotMixinTypes.d.ts
+++ b/packages/core/types/SlotMixinTypes.d.ts
@@ -10,7 +10,7 @@ export declare class SlotHost {
   /**
    * Obtains all the slots to create
    */
-  slots: SlotsMap;
+  get slots(): SlotsMap;
 
   /**
    * Starts the creation of slots
diff --git a/packages/localize/types/LocalizeMixinTypes.d.ts b/packages/localize/types/LocalizeMixinTypes.d.ts
index be0af9e3c..f79d5ef99 100644
--- a/packages/localize/types/LocalizeMixinTypes.d.ts
+++ b/packages/localize/types/LocalizeMixinTypes.d.ts
@@ -1,4 +1,5 @@
 import { Constructor } from '@open-wc/dedupe-mixin';
+import { LitElement } from '@lion/core';
 
 export interface FormatNumberPart {
   type: string;
@@ -68,7 +69,7 @@ declare class LocalizeMixinHost {
   private __localizeOnLocaleChanged(event: CustomEvent): void;
 }
 
-declare function LocalizeMixinImplementation<T extends Constructor<HTMLElement>>(
+declare function LocalizeMixinImplementation<T extends Constructor<LitElement>>(
   superclass: T,
 ): T & Constructor<LocalizeMixinHost> & typeof LocalizeMixinHost;
 
diff --git a/packages/select-rich/src/LionSelectInvoker.js b/packages/select-rich/src/LionSelectInvoker.js
index 89e2180d7..111231fa7 100644
--- a/packages/select-rich/src/LionSelectInvoker.js
+++ b/packages/select-rich/src/LionSelectInvoker.js
@@ -3,6 +3,7 @@ import { css, html } from '@lion/core';
 
 /**
  * @typedef {import('@lion/core').CSSResult} CSSResult
+ * @typedef {import('@lion/listbox').LionOption} LionOption
  */
 
 /**
@@ -66,8 +67,8 @@ export class LionSelectInvoker extends LionButton {
      */
     this.readOnly = false;
     /**
-     * The option Element that is currently selected
-     * @type {HTMLElement | null}
+     * The option element that is currently selected
+     * @type {LionOption | null}
      */
     this.selectedElement = null;
     /**
diff --git a/packages/select-rich/test/lion-select-invoker.test.js b/packages/select-rich/test/lion-select-invoker.test.js
index aef18d508..b93683ca2 100644
--- a/packages/select-rich/test/lion-select-invoker.test.js
+++ b/packages/select-rich/test/lion-select-invoker.test.js
@@ -3,6 +3,10 @@ import { defineCE, expect, fixture, html } from '@open-wc/testing';
 import '../lion-select-invoker.js';
 import { LionSelectInvoker } from '../src/LionSelectInvoker.js';
 
+/**
+ * @typedef {import('@lion/listbox').LionOption} LionOption
+ */
+
 describe('lion-select-invoker', () => {
   it('should behave as a button', async () => {
     const el = await fixture(html`<lion-select-invoker></lion-select-invoker>`);
@@ -13,7 +17,7 @@ describe('lion-select-invoker', () => {
     const el = /** @type {LionSelectInvoker} */ (await fixture(
       html`<lion-select-invoker></lion-select-invoker>`,
     ));
-    el.selectedElement = /** @type {HTMLElement} */ (await fixture(
+    el.selectedElement = /** @type {LionOption} */ (await fixture(
       `<div class="option">Textnode<h2>I am</h2><p>2 lines</p></div>`,
     ));
     await el.updateComplete;
@@ -34,7 +38,7 @@ describe('lion-select-invoker', () => {
     const el = /** @type {LionSelectInvoker} */ (await fixture(
       html`<lion-select-invoker></lion-select-invoker>`,
     ));
-    el.selectedElement = /** @type {HTMLElement} */ (await fixture(
+    el.selectedElement = /** @type {LionOption} */ (await fixture(
       `<div class="option">just textContent</div>`,
     ));
     await el.updateComplete;
@@ -81,13 +85,13 @@ describe('lion-select-invoker', () => {
       );
       const el = /** @type {LionSelectInvoker} */ (await fixture(`<${myTag}></${myTag}>`));
 
-      el.selectedElement = /** @type {HTMLElement} */ (await fixture(
+      el.selectedElement = /** @type {LionOption} */ (await fixture(
         `<div class="option">cat</div>`,
       ));
       await el.updateComplete;
       expect(el._contentWrapperNode).lightDom.to.equal('cat selected');
 
-      el.selectedElement = /** @type {HTMLElement} */ (await fixture(
+      el.selectedElement = /** @type {LionOption} */ (await fixture(
         `<div class="option">dog</div>`,
       ));
       await el.updateComplete;