diff --git a/src/components/drawer/bl-drawer.css b/src/components/drawer/bl-drawer.css index d0a98c0a..4248e9f4 100644 --- a/src/components/drawer/bl-drawer.css +++ b/src/components/drawer/bl-drawer.css @@ -12,7 +12,7 @@ padding-bottom: max(env(safe-area-inset-bottom), var(--bl-size-xl)); background: var(--bl-color-neutral-full); box-shadow: var(--bl-size-xs) 0 var(--bl-size-2xl) rgba(0 0 0 / 50%); - transition: right var(--bl-drawer-animation-duration); + transition: right var(--bl-drawer-animation-duration, 0.25s); z-index: var(--bl-index-sticky); } diff --git a/src/components/drawer/bl-drawer.ts b/src/components/drawer/bl-drawer.ts index 25a869fd..404b0f4a 100644 --- a/src/components/drawer/bl-drawer.ts +++ b/src/components/drawer/bl-drawer.ts @@ -1,6 +1,6 @@ import { CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { PropertyValues } from "lit"; -import { customElement, property, state } from "lit/decorators.js"; +import { customElement, property, query, state } from "lit/decorators.js"; import { event, EventDispatcher } from "../../utilities/event"; import { styleToPixelConverter } from "../../utilities/style-to-px.converter"; import "../button/bl-button"; @@ -59,6 +59,9 @@ export default class BlDrawer extends LitElement { */ @event("bl-drawer-close") private onClose: EventDispatcher; + @query("iframe") + private _drawerIframe: HTMLIFrameElement; + connectedCallback() { super.connectedCallback(); window?.addEventListener("bl-drawer-open", event => { @@ -107,21 +110,18 @@ export default class BlDrawer extends LitElement { if (this.domExistenceSchedule) { clearTimeout(this.domExistenceSchedule); } - this.domExistence = true; + // When drawer open with embedUrl, iframe should reload because of unmount issues + if (this.embedUrl) { + this._drawerIframe.src = this.embedUrl; + } // FIXME: Allow events without payload this.onOpen(""); } else { - const documentElement = document.documentElement; - const durationString = getComputedStyle(documentElement).getPropertyValue( - "--bl-drawer-animation-duration" - ); - const durationInMs = parseFloat(durationString) * 1000; - // Give some time for exit animation this.domExistenceSchedule = window.setTimeout(() => { this.domExistence = false; - }, durationInMs); + }, 1000); // FIXME: Allow events without payload this.onClose(""); diff --git a/src/themes/default.css b/src/themes/default.css index 33f76038..ba03fad5 100644 --- a/src/themes/default.css +++ b/src/themes/default.css @@ -215,9 +215,6 @@ --bl-font-caption-size: var(--bl-font-caption-font-size) / var(--bl-font-caption-line-height); --bl-font-caption: var(--bl-font-weight-medium) var(--bl-font-caption-size) var(--bl-font-family); - /* Style: Drawer */ - --bl-drawer-animation-duration: 250ms; - /* @DEPRECATED