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}> +
content
+ + + `)); + 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`, () => { diff --git a/packages/overlays/types/OverlayMixinTypes.d.ts b/packages/overlays/types/OverlayMixinTypes.d.ts index 023d1d1a4..ed7c344fe 100644 --- a/packages/overlays/types/OverlayMixinTypes.d.ts +++ b/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;