From b06c85bbb407b5fb1879f8d1b27864e08e4bbdfd Mon Sep 17 00:00:00 2001
From: Joren Broekema <joren.broekema@ing.com>
Date: Mon, 28 Sep 2020 11:52:13 +0200
Subject: [PATCH] feat(dialog): add types for dialog

---
 .changeset/metal-maps-collect.md         |  5 +++++
 packages/dialog/src/LionDialog.js        | 11 +++++++----
 packages/dialog/test/lion-dialog.test.js | 22 +++++++++++++++++-----
 tsconfig.json                            |  1 +
 4 files changed, 30 insertions(+), 9 deletions(-)
 create mode 100644 .changeset/metal-maps-collect.md

diff --git a/.changeset/metal-maps-collect.md b/.changeset/metal-maps-collect.md
new file mode 100644
index 000000000..2ec58f346
--- /dev/null
+++ b/.changeset/metal-maps-collect.md
@@ -0,0 +1,5 @@
+---
+'@lion/dialog': minor
+---
+
+Added types for dialog package.
diff --git a/packages/dialog/src/LionDialog.js b/packages/dialog/src/LionDialog.js
index 315f3bdc9..909875989 100644
--- a/packages/dialog/src/LionDialog.js
+++ b/packages/dialog/src/LionDialog.js
@@ -2,6 +2,13 @@ import { html, LitElement } from '@lion/core';
 import { OverlayMixin, withModalDialogConfig } from '@lion/overlays';
 
 export class LionDialog extends OverlayMixin(LitElement) {
+  constructor() {
+    super();
+    this.__toggle = () => {
+      this.opened = !this.opened;
+    };
+  }
+
   // eslint-disable-next-line class-methods-use-this
   _defineOverlayConfig() {
     return {
@@ -11,10 +18,6 @@ export class LionDialog extends OverlayMixin(LitElement) {
 
   _setupOpenCloseListeners() {
     super._setupOpenCloseListeners();
-    this.__toggle = () => {
-      this.opened = !this.opened;
-    };
-
     if (this._overlayInvokerNode) {
       this._overlayInvokerNode.addEventListener('click', this.__toggle);
     }
diff --git a/packages/dialog/test/lion-dialog.test.js b/packages/dialog/test/lion-dialog.test.js
index dabb9c95d..d4f4b3351 100644
--- a/packages/dialog/test/lion-dialog.test.js
+++ b/packages/dialog/test/lion-dialog.test.js
@@ -1,7 +1,14 @@
 import { runOverlayMixinSuite } from '@lion/overlays/test-suites/OverlayMixin.suite.js';
-import { expect, fixture, html, unsafeStatic } from '@open-wc/testing';
+import { expect, fixture as _fixture, html, unsafeStatic } from '@open-wc/testing';
 import '../lion-dialog.js';
 
+/**
+
+ * @typedef {import('../src/LionDialog').LionDialog} LionDialog
+ * @typedef {import('lit-html').TemplateResult} TemplateResult
+ */
+const fixture = /** @type {(arg: TemplateResult) => Promise<LionDialog>} */ (_fixture);
+
 describe('lion-dialog', () => {
   // For some reason, globalRootNode is not cleared properly on disconnectedCallback from previous overlay test fixtures...
   // Not sure why this "bug" happens...
@@ -31,7 +38,7 @@ describe('lion-dialog', () => {
           <button slot="invoker">Popup button</button>
         </lion-dialog>
       `);
-      const invoker = el.querySelector('[slot="invoker"]');
+      const invoker = /** @type {HTMLElement} */ (el.querySelector('[slot="invoker"]'));
       invoker.click();
 
       expect(el.opened).to.be.true;
@@ -51,12 +58,17 @@ describe('lion-dialog', () => {
         </lion-dialog>
       `);
 
+      // @ts-expect-error you're not allowed to call protected _overlayInvokerNode in public context, but for testing it's okay
       el._overlayInvokerNode.click();
       expect(el.opened).to.be.true;
 
-      const wrapperNode = Array.from(document.querySelector('.global-overlays').children)[1];
-      const nestedDialog = wrapperNode.querySelector('lion-dialog');
-      nestedDialog._overlayInvokerNode.click();
+      const overlaysContainer = /** @type {HTMLElement} */ (document.querySelector(
+        '.global-overlays',
+      ));
+      const wrapperNode = Array.from(overlaysContainer.children)[1];
+      const nestedDialog = /** @type {LionDialog} */ (wrapperNode.querySelector('lion-dialog'));
+      // @ts-expect-error you're not allowed to call protected _overlayInvokerNode in public context, but for testing it's okay
+      nestedDialog?._overlayInvokerNode.click();
       expect(nestedDialog.opened).to.be.true;
     });
   });
diff --git a/tsconfig.json b/tsconfig.json
index f672325f4..8b47f4de6 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -20,6 +20,7 @@
     "packages/checkbox-group/**/*.js",
     "packages/collapsible/**/*.js",
     "packages/core/**/*.js",
+    "packages/dialog/**/*.js",
     "packages/fieldset/**/*.js",
     "packages/form/**/*.js",
     "packages/form-core/**/*.js",