@fluid-topics/ft-drawer 1.3.56

package/README.md

@@ -0,0 +1,19 @@
+A drawer component
+
+## Install
+
+```shell
+npm install @fluid-topics/ft-drawer
+yarn add @fluid-topics/ft-drawer
+```
+
+## Usage
+
+```typescript
+import { html } from "lit"
+import "@fluid-topics/ft-drawer"
+
+function render() {
+    return html` <ft-drawer foo="bar"></ft-drawer> `
+}
+```

package/build/FtDrawerMessages.d.ts

@@ -0,0 +1,6 @@
+import { DefaultI18nMessages, I18nMessageContext, I18nMessages } from "@fluid-topics/ft-i18n";
+export interface FtDrawerMessages extends I18nMessages {
+    closeDrawer(): string;
+}
+export declare const ftDrawerContext: I18nMessageContext<FtDrawerMessages>;
+export declare const defaultFtDrawerMessages: DefaultI18nMessages<FtDrawerMessages>;

package/build/FtDrawerMessages.js

@@ -0,0 +1,5 @@
+import { I18nMessageContext } from "@fluid-topics/ft-i18n";
+export const ftDrawerContext = I18nMessageContext.build("ftDrawer");
+export const defaultFtDrawerMessages = {
+    closeDrawer: "Close drawer",
+};

package/build/ft-drawer.d.ts

@@ -0,0 +1,23 @@
+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;
+    static styles: import("lit").CSSResult;
+    buttonLabel: string;
+    buttonIcon?: string;
+    heading: string;
+    dialog?: HTMLDialogElement;
+    constructor();
+    protected render(): import("lit-html").TemplateResult<1>;
+    private renderCloseButton;
+    protected onTriggerClick(e: MouseEvent): void;
+    protected elementToFocusOnClose?: HTMLElement;
+    private intersectionObserver;
+    open(elementToFocusOnClose?: HTMLElement): void;
+    close(): void;
+    disconnectedCallback(): void;
+    private onClose;
+    private onOverlayClick;
+}
+export {};

package/build/ft-drawer.js

@@ -0,0 +1,131 @@
+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 { FtdsBase, } from "@fluid-topics/ft-wc-utils";
+import { classMap } from "lit/directives/class-map.js";
+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");
+    }
+}
+class FtDrawer extends withI18n(FtdsBase) {
+    constructor() {
+        super();
+        this.buttonLabel = "";
+        this.heading = "";
+        this.intersectionObserver = new IntersectionObserver(() => {
+            if (this.dialog && !this.dialog.checkVisibility()) {
+                this.close();
+            }
+        });
+        this.addI18nContext(ftDrawerContext, defaultFtDrawerMessages);
+    }
+    render() {
+        const classes = {
+            "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" aria-labelledby="heading" @close=${this.onClose}>
+                    <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 `
+            <ft-button part="closing-button"
+                       icon="${FtIcons.CLOSE}"
+                       tertiary
+                       label="${ftDrawerContext.messages.closeDrawer()}"
+                       tooltipPosition="right"
+                       @click=${this.close}></ft-button>`;
+    }
+    onTriggerClick(e) {
+        this.open(e.target);
+    }
+    open(elementToFocusOnClose) {
+        this.elementToFocusOnClose = elementToFocusOnClose;
+        if (this.dialog) {
+            this.dialog.showModal();
+            this.intersectionObserver.observe(this.dialog);
+            this.dispatchEvent(new FtDrawerOpenEvent());
+        }
+    }
+    close() {
+        var _a;
+        (_a = this.dialog) === null || _a === void 0 ? void 0 : _a.close();
+        this.onClose();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        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();
+    }
+}
+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);
+export { FtDrawer };