feat(overlays): open, close and toggle methods on host

.changeset/weak-papayas-sort.md

@@ -0,0 +1,5 @@
+---
+"@lion/overlays": patch
+---
+
+Overlays: open, close and toggle methods on host (OverlayMixin)

packages/overlays/src/OverlayMixin.js

@@ -28,6 +28,13 @@ export const OverlayMixinImplementation = superclass =>
       this.__needsSetup = true;
       /** @type {OverlayConfig} */
       this.config = {};
+
+      /** @type {EventListener} */
+      this.toggle = this.toggle.bind(this);
+      /** @type {EventListener} */
+      this.open = this.open.bind(this);
+      /** @type {EventListener} */
+      this.close = this.close.bind(this);
     }
 
     get config() {
@@ -308,5 +315,26 @@ export const OverlayMixinImplementation = superclass =>
         (this._overlayCtrl).hide();
       }
     }
+
+    /**
+     * Toggles the overlay
+     */
+    toggle() {
+      /** @type {OverlayController} */ (this._overlayCtrl).toggle();
+    }
+
+    /**
+     * Shows the overlay
+     */
+    open() {
+      /** @type {OverlayController} */ (this._overlayCtrl).show();
+    }
+
+    /**
+     * Hides the overlay
+     */
+    close() {
+      /** @type {OverlayController} */ (this._overlayCtrl).hide();
+    }
   };
 export const OverlayMixin = dedupeMixin(OverlayMixinImplementation);

packages/overlays/test-suites/OverlayMixin.suite.js

@@ -209,6 +209,32 @@ export function runOverlayMixinSuite({ tagString, tag, suffix = '' }) {
       await nextFrame(); // hide takes at least a frame
       expect(el.opened).to.be.false;
     });
+
+    // See https://github.com/ing-bank/lion/discussions/1095
+    it('exposes open(), close() and toggle() methods', async () => {
+      const el = /** @type {OverlayEl} */ (await fixture(html`
+        <${tag}>
+          <div slot="content">content</div>
+          <button slot="invoker">invoker button</button>
+        </${tag}>
+      `));
+      expect(el.opened).to.be.false;
+      el.open();
+      await nextFrame();
+      expect(el.opened).to.be.true;
+
+      el.close();
+      await nextFrame();
+      expect(el.opened).to.be.false;
+
+      el.toggle();
+      await nextFrame();
+      expect(el.opened).to.be.true;
+
+      el.toggle();
+      await nextFrame();
+      expect(el.opened).to.be.false;
+    });
   });
 
   describe(`OverlayMixin${suffix} nested`, () => {

packages/overlays/types/OverlayMixinTypes.d.ts

@@ -22,6 +22,10 @@ export declare class OverlayHost {
   public get config(): OverlayConfig;
   public set config(value: OverlayConfig);
 
+  public open(): void;
+  public close(): void;
+  public toggle(): void;
+
   protected _overlayCtrl: OverlayController;
 
   protected get _overlayInvokerNode(): HTMLElement;