feat(dialog): add types for dialog

.changeset/metal-maps-collect.md

@@ -0,0 +1,5 @@
+---
+'@lion/dialog': minor
+---
+
+Added types for dialog package.

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);
     }

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 overlaysContainer = /** @type {HTMLElement} */ (document.querySelector(
-      const nestedDialog = wrapperNode.querySelector('lion-dialog');
+        '.global-overlays',
-      nestedDialog._overlayInvokerNode.click();
+      ));
+      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;
     });
   });

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",