@fluid-topics/ft-drawer 2.2.36 → 2.2.38

package/build/ft-drawer.d.ts

@@ -1,25 +1,8 @@
-import { ElementDefinitionsMap, FtdsBase } from "@fluid-topics/ft-wc-utils";
 import { FtDrawerProperties } from "./ft-drawer.properties";
-declare const FtDrawer_base: typeof FtdsBase & import("@fluid-topics/ft-wc-utils").Constructor<import("@fluid-topics/ft-i18n").FtLitElementWithI18nInterface>;
-export declare class FtDrawer extends FtDrawer_base implements FtDrawerProperties {
-    static elementDefinitions: ElementDefinitionsMap;
+import { FtModal } from "@fluid-topics/ft-modal";
+export declare class FtDrawer extends FtModal implements FtDrawerProperties {
     static styles: import("lit").CSSResult;
-    buttonLabel: string;
-    buttonIcon?: string;
-    heading: string;
-    dialog?: HTMLDialogElement;
-    constructor();
-    protected render(): import("lit").TemplateResult<1>;
-    private renderCloseButton;
-    protected onTriggerClick(e: MouseEvent): void;
-    protected elementToFocusOnClose?: HTMLElement;
-    private intersectionObserver;
-    open(elementToFocusOnClose?: HTMLElement): void;
-    close(): void;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    private onClose;
-    private onOverlayClick;
-    private onEscapePressed;
+    protected setupI18nContext(): void;
+    protected getContainerClasses(): Record<string, boolean>;
+    protected renderCloseButton(): import("lit").TemplateResult<1>;
 }
-export {};

package/build/ft-drawer.js

@@ -1,76 +1,16 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { html, nothing, } from "lit";
-import { property, query, } from "lit/decorators.js";
-import { focusTrap, FtdsBase, } from "@fluid-topics/ft-wc-utils";
-import { classMap } from "lit/directives/class-map.js";
+import { html } from "lit";
 import { FtIcons } from "@fluid-topics/ft-icon";
-import { FtTypography, FtTypographyVariants, } from "@fluid-topics/ft-typography";
-import { withI18n } from "@fluid-topics/ft-i18n";
-import { when } from "lit/directives/when.js";
-import { ifDefined } from "lit/directives/if-defined.js";
-import { FtButton } from "@fluid-topics/ft-button";
 import { ftDrawerStyles } from "./ft-drawer.styles";
 import { defaultFtDrawerMessages, ftDrawerContext, } from "./FtDrawerMessages";
-class FtDrawerCloseEvent extends Event {
-    constructor() {
-        super("close");
-    }
-}
-class FtDrawerOpenEvent extends Event {
-    constructor() {
-        super("open");
-    }
-}
-export class FtDrawer extends withI18n(FtdsBase) {
-    constructor() {
-        super();
-        this.buttonLabel = "";
-        this.heading = "";
-        this.intersectionObserver = new IntersectionObserver(() => {
-            if (this.dialog && !this.dialog.checkVisibility()) {
-                this.close();
-            }
-        });
+import { FtModal } from "@fluid-topics/ft-modal";
+export class FtDrawer extends FtModal {
+    setupI18nContext() {
         this.addI18nContext(ftDrawerContext, defaultFtDrawerMessages);
     }
-    render() {
-        const classes = {
+    getContainerClasses() {
+        return {
             "ft-drawer": true,
         };
-        return html `
-            <div class="${classMap(classes)}" part="container">
-                <slot @click=${this.onTriggerClick} name="trigger">
-                    <ft-button part="button" icon="${ifDefined(this.buttonIcon)}" label="${this.buttonLabel}" ariaHasPopup="dialog">
-                        ${when(this.buttonIcon, () => nothing, () => this.buttonLabel)}
-                    </ft-button>
-                </slot>
-                <dialog part="dialog" popover="manual" aria-labelledby="heading" @close=${this.onClose} ${focusTrap()}>
-                    <div part="overlay" @click=${this.onOverlayClick}></div>
-                    <div part="inner-container">
-                        <div part="header">
-                            ${this.renderCloseButton()}
-                            <ft-typography id="heading" part="heading" role="heading" variant="${FtTypographyVariants.title}">
-                                ${this.heading}
-                            </ft-typography>
-                            <slot name="header-actions"></slot>
-                        </div>
-                        <div part="body">
-                            <div part="content">
-                                <slot></slot>
-                            </div>
-                        </div>
-                        <div part="actions">
-                            <slot name="actions"></slot>
-                        </div>
-                    </div>
-                </dialog>
-            </div>
-        `;
     }
     renderCloseButton() {
         return html `
@@ -81,60 +21,5 @@ export class FtDrawer extends withI18n(FtdsBase) {
                        tooltipPosition="right"
                        @click=${this.close}></ft-button>`;
     }
-    onTriggerClick(e) {
-        this.open(e.target);
-    }
-    open(elementToFocusOnClose) {
-        this.elementToFocusOnClose = elementToFocusOnClose;
-        if (this.dialog) {
-            this.dialog.showPopover();
-            this.intersectionObserver.observe(this.dialog);
-            this.dispatchEvent(new FtDrawerOpenEvent());
-        }
-    }
-    close() {
-        var _a;
-        (_a = this.dialog) === null || _a === void 0 ? void 0 : _a.hidePopover();
-        this.onClose();
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.addEventListener("keydown", this.onEscapePressed);
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.removeEventListener("keydown", this.onEscapePressed);
-        this.close();
-    }
-    onClose() {
-        var _a;
-        this.intersectionObserver.disconnect();
-        (_a = this.elementToFocusOnClose) === null || _a === void 0 ? void 0 : _a.focus();
-        this.dispatchEvent(new FtDrawerCloseEvent());
-    }
-    onOverlayClick() {
-        this.close();
-    }
-    onEscapePressed(e) {
-        if (e.key === "Escape") {
-            this.close();
-        }
-    }
 }
-FtDrawer.elementDefinitions = {
-    "ft-button": FtButton,
-    "ft-typography": FtTypography,
-};
 FtDrawer.styles = ftDrawerStyles;
-__decorate([
-    property()
-], FtDrawer.prototype, "buttonLabel", void 0);
-__decorate([
-    property()
-], FtDrawer.prototype, "buttonIcon", void 0);
-__decorate([
-    property()
-], FtDrawer.prototype, "heading", void 0);
-__decorate([
-    query("dialog")
-], FtDrawer.prototype, "dialog", void 0);