diff --git a/.changeset/weak-papayas-sort.md b/.changeset/weak-papayas-sort.md new file mode 100644 index 000000000..c96a020b9 --- /dev/null +++ b/.changeset/weak-papayas-sort.md @@ -0,0 +1,5 @@ +--- +"@lion/overlays": patch +--- + +Overlays: open, close and toggle methods on host (OverlayMixin) diff --git a/packages/overlays/src/OverlayMixin.js b/packages/overlays/src/OverlayMixin.js index f656ab722..543ba2362 100644 --- a/packages/overlays/src/OverlayMixin.js +++ b/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); diff --git a/packages/overlays/test-suites/OverlayMixin.suite.js b/packages/overlays/test-suites/OverlayMixin.suite.js index 057860549..483eca504 100644 --- a/packages/overlays/test-suites/OverlayMixin.suite.js +++ b/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}> +