@blackcube/aurelia2-bleet 1.0.0

package/src/components/bleet-drawer.ts

@@ -0,0 +1,236 @@
+import { bindable, customElement, IDisposable, IEventAggregator, ILogger, IPlatform, resolve } from 'aurelia';
+import { Channels, DialogAction, DrawerAction, DrawerStatus, OverlayAction, ToasterAction, UiColor } from '../enums/event-aggregator';
+import { IDrawer, IDrawerStatus, IOverlay, IToast, IToaster } from '../interfaces/event-aggregator';
+import { IDialogResponse } from '../interfaces/dialog';
+import { ITransitionService } from '../services/transition-service';
+import { ISvgService } from '../services/svg-service';
+import { IApiService } from '../services/api-service';
+import template from './bleet-drawer.html';
+
+@customElement({ name: 'bleet-drawer', template })
+export class BleetDrawer {
+    @bindable id: string = '';
+
+    private dialogElement: HTMLDialogElement;
+    private disposable?: IDisposable;
+
+    // State
+    private loading: boolean = false;
+    private color: UiColor = UiColor.Primary;
+    private headerView: string | null = null;
+    private contentView: string | null = null;
+    private footerView: string | null = null;
+
+    // Color classes for header
+    private static readonly HEADER_BG_CLASSES: Record<UiColor, string> = {
+        [UiColor.Primary]: 'bg-primary-700',
+        [UiColor.Secondary]: 'bg-secondary-700',
+        [UiColor.Success]: 'bg-success-700',
+        [UiColor.Danger]: 'bg-danger-700',
+        [UiColor.Warning]: 'bg-warning-700',
+        [UiColor.Info]: 'bg-info-700',
+        [UiColor.Accent]: 'bg-accent-700',
+    };
+
+    private static readonly CLOSE_BUTTON_TEXT_CLASSES: Record<UiColor, string> = {
+        [UiColor.Primary]: 'text-primary-200',
+        [UiColor.Secondary]: 'text-secondary-200',
+        [UiColor.Success]: 'text-success-200',
+        [UiColor.Danger]: 'text-danger-200',
+        [UiColor.Warning]: 'text-warning-200',
+        [UiColor.Info]: 'text-info-200',
+        [UiColor.Accent]: 'text-accent-200',
+    };
+
+    public constructor(
+        private readonly logger: ILogger = resolve(ILogger).scopeTo('<bleet-drawer>'),
+        private readonly ea: IEventAggregator = resolve(IEventAggregator),
+        private readonly platform: IPlatform = resolve(IPlatform),
+        private readonly transitionService: ITransitionService = resolve(ITransitionService),
+        private readonly svgService: ISvgService = resolve(ISvgService),
+        private readonly apiService: IApiService = resolve(IApiService),
+    ) {}
+
+    // Getters
+    private get headerBgClass(): string {
+        return BleetDrawer.HEADER_BG_CLASSES[this.color] ?? BleetDrawer.HEADER_BG_CLASSES[UiColor.Primary];
+    }
+
+    private get closeButtonTextClass(): string {
+        return BleetDrawer.CLOSE_BUTTON_TEXT_CLASSES[this.color] ?? BleetDrawer.CLOSE_BUTTON_TEXT_CLASSES[UiColor.Primary];
+    }
+
+    // Lifecycle
+    public attached(): void {
+        this.disposable = this.ea.subscribe(Channels.Drawer, this.onDrawerEvent);
+        this.dialogElement.addEventListener('close', this.onCloseEvent);
+        this.dialogElement.addEventListener('cancel', this.onCancelEvent);
+    }
+
+    public detached(): void {
+        this.dialogElement.removeEventListener('close', this.onCloseEvent);
+        this.dialogElement.removeEventListener('cancel', this.onCancelEvent);
+        this.disposable?.dispose();
+    }
+
+    private bindDialogEvents(): void {
+        this.dialogElement.addEventListener('submit', this.onFormSubmit);
+        this.dialogElement.addEventListener('click', this.onDialogClick);
+    }
+
+    private unbindDialogEvents(): void {
+        this.dialogElement.removeEventListener('submit', this.onFormSubmit);
+        this.dialogElement.removeEventListener('click', this.onDialogClick);
+    }
+
+    // Handlers
+    private onDrawerEvent = (data: IDrawer): void => {
+        if (this.id && this.id !== '' && data.id === this.id) {
+            if (data.action === DrawerAction.Open && this.dialogElement.open !== true) {
+                if (data.url) {
+                    this.loadFromUrl(data.url);
+                }
+            } else if (data.action === DrawerAction.Close && this.dialogElement.open === true) {
+                this.close();
+            } else if (data.action === DrawerAction.Toggle) {
+                if (this.dialogElement.open === true) {
+                    this.close();
+                } else if (data.url) {
+                    this.loadFromUrl(data.url);
+                }
+            }
+        }
+    }
+
+    private onCloseEvent = (event: Event): void => {
+        this.ea.publish(Channels.Overlay, <IOverlay>{ action: OverlayAction.Close });
+    }
+
+    private onCancelEvent = (event: Event): void => {
+        this.close();
+    }
+
+    private onDialogClick = (event: MouseEvent): void => {
+        const target = event.target as HTMLElement;
+        if (target.closest('[data-drawer="close"]')) {
+            event.preventDefault();
+            this.close();
+        }
+    }
+
+    private onFormSubmit = (event: SubmitEvent): void => {
+        const form = (event.target as HTMLElement).closest('form');
+        if (!form) return;
+
+        event.preventDefault();
+
+        const formData = new FormData(form);
+
+        // Capture submitter button name/value (not included by default in FormData)
+        if (event.submitter instanceof HTMLButtonElement && event.submitter.name) {
+            formData.append(event.submitter.name, event.submitter.value || '');
+        }
+
+        const method = (formData.get('_method') as string) || form.getAttribute('method') || 'POST';
+
+        this.apiService
+            .url(form.action)
+            .fromMultipart(formData)
+            .request<IDialogResponse>(method)
+            .then((response) => {
+                this.applyResponse(response.body);
+            })
+            .catch((error) => {
+                this.logger.error('form submit failed', error);
+                this.ea.publish(Channels.Toaster, <IToaster>{
+                    action: ToasterAction.Add,
+                    toast: { color: UiColor.Danger, content: 'Erreur lors de l\'envoi' } as IToast
+                });
+            });
+    }
+
+    private loadFromUrl(url: string): void {
+        this.loading = true;
+        this.open();
+
+        this.apiService.url(url).get<IDialogResponse>()
+            .then((response) => {
+                this.applyResponse(response.body);
+            })
+            .catch((error) => {
+                this.logger.error('loadFromUrl failed', error);
+                this.close();
+                this.ea.publish(Channels.Toaster, <IToaster>{
+                    action: ToasterAction.Add,
+                    toast: { color: UiColor.Danger, content: 'Erreur de chargement' } as IToast
+                });
+            })
+            .finally(() => {
+                this.loading = false;
+            });
+    }
+
+    private applyResponse(response: IDialogResponse): void {
+        this.color = response.color ?? UiColor.Primary;
+        if (response.header) this.headerView = response.header;
+        if (response.content) this.contentView = response.content;
+        if (response.footer) this.footerView = response.footer;
+        this.executeActions(response);
+    }
+
+    private executeActions(response: IDialogResponse): void {
+        // 1. Primary action
+        if (response.action === DialogAction.Close) {
+            this.close();
+        }
+
+        // 2. Secondary actions (combinable)
+        if (response.toast) {
+            this.ea.publish(Channels.Toaster, <IToaster>{
+                action: ToasterAction.Add,
+                toast: response.toast
+            });
+        }
+        if (response.ajaxify) {
+            this.ea.publish(Channels.Ajaxify, response.ajaxify);
+        } else if (response.redirect) {
+            this.platform.window.location.href = response.redirect;
+        } else if (response.refresh) {
+            this.platform.window.location.reload();
+        }
+    }
+
+    // Open / Close — translate-x
+    private open(): void {
+        this.bindDialogEvents();
+        this.transitionService.run(this.dialogElement, (element) => {
+            this.ea.publish(Channels.Overlay, <IOverlay>{ action: OverlayAction.Open });
+            this.ea.publish(Channels.DrawerStatus, <IDrawerStatus>{ status: DrawerStatus.Opening, id: this.id });
+            (element as HTMLDialogElement).showModal();
+            this.platform.requestAnimationFrame(() => {
+                element.classList.add('translate-x-0');
+                element.classList.remove('translate-x-full');
+            });
+        }, () => {
+            this.ea.publish(Channels.DrawerStatus, <IDrawerStatus>{ status: DrawerStatus.Opened, id: this.id });
+        });
+    }
+
+    private close(): void {
+        this.transitionService.run(this.dialogElement, (element) => {
+            this.ea.publish(Channels.DrawerStatus, <IDrawerStatus>{ status: DrawerStatus.Closing, id: this.id });
+            this.ea.publish(Channels.Overlay, <IOverlay>{ action: OverlayAction.Close });
+            element.classList.add('translate-x-full');
+            element.classList.remove('translate-x-0');
+        }, (element) => {
+            (element as HTMLDialogElement).close();
+            this.unbindDialogEvents();
+            this.headerView = null;
+            this.contentView = null;
+            this.footerView = null;
+            this.color = UiColor.Primary;
+            this.loading = false;
+            this.ea.publish(Channels.DrawerStatus, <IDrawerStatus>{ status: DrawerStatus.Closed, id: this.id });
+        });
+    }
+}

package/src/components/bleet-modal.html.ts

@@ -0,0 +1,30 @@
+export default `<template>
+    <dialog ref="dialogElement"
+            class="fixed inset-0 z-50 size-auto max-h-none max-w-none overflow-y-auto transition ease-in-out duration-300 bg-transparent backdrop:bg-transparent opacity-0">
+        <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+            <div class="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl sm:my-8 sm:w-full sm:max-w-lg">
+
+                <!-- Loader -->
+                <div if.bind="loading" class="flex items-center justify-center py-12">
+                    <svg class="animate-spin size-8 text-primary-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                    </svg>
+                </div>
+
+                <!-- Contenu -->
+                <template else>
+                    <!-- Header -->
+                    <au-compose if.bind="headerView" template.bind="headerView"></au-compose>
+
+                    <!-- Content -->
+                    <au-compose if.bind="contentView" template.bind="contentView"></au-compose>
+
+                    <!-- Footer -->
+                    <au-compose if.bind="footerView" template.bind="footerView"></au-compose>
+                </template>
+
+            </div>
+        </div>
+    </dialog>
+</template>`

package/src/components/bleet-modal.ts

@@ -0,0 +1,274 @@
+import { bindable, customElement, IDisposable, IEventAggregator, ILogger, IPlatform, resolve } from 'aurelia';
+import { Channels, DialogAction, ModalAction, ModalStatus, OverlayAction, ToasterAction, UiColor } from '../enums/event-aggregator';
+import { IModal, IModalStatus, IOverlay, IToast, IToaster } from '../interfaces/event-aggregator';
+import { IDialogResponse } from '../interfaces/dialog';
+import { ITransitionService } from '../services/transition-service';
+import { ISvgService } from '../services/svg-service';
+import { IApiService } from '../services/api-service';
+import template from './bleet-modal.html';
+
+@customElement({ name: 'bleet-modal', template })
+export class BleetModal {
+    @bindable id: string = '';
+
+    private dialogElement: HTMLDialogElement;
+    private disposable?: IDisposable;
+
+    // State
+    private loading: boolean = false;
+    private color: UiColor = UiColor.Primary;
+    private icon: string | null = null;
+    private headerView: string | null = null;
+    private contentView: string | null = null;
+    private footerView: string | null = null;
+
+    // Color classes — no Tailwind interpolation
+    private static readonly ICON_BG_CLASSES: Record<UiColor, string> = {
+        [UiColor.Primary]: 'bg-primary-100',
+        [UiColor.Secondary]: 'bg-secondary-100',
+        [UiColor.Success]: 'bg-success-100',
+        [UiColor.Danger]: 'bg-danger-100',
+        [UiColor.Warning]: 'bg-warning-100',
+        [UiColor.Info]: 'bg-info-100',
+        [UiColor.Accent]: 'bg-accent-100',
+    };
+
+    private static readonly ICON_TEXT_CLASSES: Record<UiColor, string> = {
+        [UiColor.Primary]: 'text-primary-600',
+        [UiColor.Secondary]: 'text-secondary-600',
+        [UiColor.Success]: 'text-success-600',
+        [UiColor.Danger]: 'text-danger-600',
+        [UiColor.Warning]: 'text-warning-600',
+        [UiColor.Info]: 'text-info-600',
+        [UiColor.Accent]: 'text-accent-600',
+    };
+
+    private static readonly HEADER_BG_CLASSES: Record<UiColor, string> = {
+        [UiColor.Primary]: 'bg-primary-600',
+        [UiColor.Secondary]: 'bg-secondary-600',
+        [UiColor.Success]: 'bg-success-600',
+        [UiColor.Danger]: 'bg-danger-600',
+        [UiColor.Warning]: 'bg-warning-600',
+        [UiColor.Info]: 'bg-info-600',
+        [UiColor.Accent]: 'bg-accent-600',
+    };
+
+    private static readonly CLOSE_BUTTON_TEXT_CLASSES: Record<UiColor, string> = {
+        [UiColor.Primary]: 'text-primary-200',
+        [UiColor.Secondary]: 'text-secondary-200',
+        [UiColor.Success]: 'text-success-200',
+        [UiColor.Danger]: 'text-danger-200',
+        [UiColor.Warning]: 'text-warning-200',
+        [UiColor.Info]: 'text-info-200',
+        [UiColor.Accent]: 'text-accent-200',
+    };
+
+    public constructor(
+        private readonly logger: ILogger = resolve(ILogger).scopeTo('<bleet-modal>'),
+        private readonly ea: IEventAggregator = resolve(IEventAggregator),
+        private readonly platform: IPlatform = resolve(IPlatform),
+        private readonly transitionService: ITransitionService = resolve(ITransitionService),
+        private readonly svgService: ISvgService = resolve(ISvgService),
+        private readonly apiService: IApiService = resolve(IApiService),
+    ) {}
+
+    // Getters
+    private get iconSvg(): string | null {
+        if (!this.icon) return null;
+        return this.svgService.get(this.icon);
+    }
+
+    private get iconBgClass(): string {
+        return BleetModal.ICON_BG_CLASSES[this.color] ?? BleetModal.ICON_BG_CLASSES[UiColor.Primary];
+    }
+
+    private get iconTextClass(): string {
+        return BleetModal.ICON_TEXT_CLASSES[this.color] ?? BleetModal.ICON_TEXT_CLASSES[UiColor.Primary];
+    }
+
+    private get headerBgClass(): string {
+        return BleetModal.HEADER_BG_CLASSES[this.color] ?? BleetModal.HEADER_BG_CLASSES[UiColor.Primary];
+    }
+
+    private get closeButtonTextClass(): string {
+        return BleetModal.CLOSE_BUTTON_TEXT_CLASSES[this.color] ?? BleetModal.CLOSE_BUTTON_TEXT_CLASSES[UiColor.Primary];
+    }
+
+    // Lifecycle
+    public attached(): void {
+        this.disposable = this.ea.subscribe(Channels.Modal, this.onModalEvent);
+        this.dialogElement.addEventListener('close', this.onCloseEvent);
+        this.dialogElement.addEventListener('cancel', this.onCancelEvent);
+    }
+
+    public detached(): void {
+        this.dialogElement.removeEventListener('close', this.onCloseEvent);
+        this.dialogElement.removeEventListener('cancel', this.onCancelEvent);
+        this.disposable?.dispose();
+    }
+
+    private bindDialogEvents(): void {
+        this.dialogElement.addEventListener('submit', this.onFormSubmit);
+        this.dialogElement.addEventListener('click', this.onDialogClick);
+    }
+
+    private unbindDialogEvents(): void {
+        this.dialogElement.removeEventListener('submit', this.onFormSubmit);
+        this.dialogElement.removeEventListener('click', this.onDialogClick);
+    }
+
+    // Handlers
+    private onModalEvent = (data: IModal): void => {
+        if (this.id && this.id !== '' && data.id === this.id) {
+            if (data.action === ModalAction.Open && this.dialogElement.open !== true) {
+                if (data.url) {
+                    this.loadFromUrl(data.url);
+                }
+            } else if (data.action === ModalAction.Close && this.dialogElement.open === true) {
+                this.close();
+            } else if (data.action === ModalAction.Toggle) {
+                if (this.dialogElement.open === true) {
+                    this.close();
+                } else if (data.url) {
+                    this.loadFromUrl(data.url);
+                }
+            }
+        }
+    }
+
+    private onCloseEvent = (event: Event): void => {
+        this.ea.publish(Channels.Overlay, <IOverlay>{ action: OverlayAction.Close });
+    }
+
+    private onCancelEvent = (event: Event): void => {
+        this.close();
+    }
+
+    private onDialogClick = (event: MouseEvent): void => {
+        const target = event.target as HTMLElement;
+        if (target.closest('[data-modal="close"]')) {
+            event.preventDefault();
+            this.close();
+        }
+    }
+
+    private onFormSubmit = (event: SubmitEvent): void => {
+        const form = (event.target as HTMLElement).closest('form');
+        if (!form) return;
+
+        event.preventDefault();
+
+        const formData = new FormData(form);
+        const method = (formData.get('_method') as string) || form.getAttribute('method') || 'POST';
+
+        this.apiService
+            .url(form.action)
+            .fromMultipart(formData)
+            .request<IDialogResponse>(method)
+            .then((response) => {
+                this.applyResponse(response.body);
+            })
+            .catch((error) => {
+                this.logger.error('form submit failed', error);
+                this.ea.publish(Channels.Toaster, <IToaster>{
+                    action: ToasterAction.Add,
+                    toast: { color: UiColor.Danger, content: 'Erreur lors de l\'envoi' } as IToast
+                });
+            });
+    }
+
+    // AJAX
+    private loadFromUrl(url: string): void {
+        this.loading = true;
+        this.open();
+
+        this.apiService.url(url).get<IDialogResponse>()
+            .then((response) => {
+                this.applyResponse(response.body);
+            })
+            .catch((error) => {
+                this.logger.error('loadFromUrl failed', error);
+                this.close();
+                this.ea.publish(Channels.Toaster, <IToaster>{
+                    action: ToasterAction.Add,
+                    toast: { color: UiColor.Danger, content: 'Erreur de chargement' } as IToast
+                });
+            })
+            .finally(() => {
+                this.loading = false;
+            });
+    }
+
+    private applyResponse(response: IDialogResponse): void {
+        // Style
+        this.color = response.color ?? UiColor.Primary;
+        this.icon = response.icon ?? null;
+
+        // Content
+        if (response.header) this.headerView = response.header;
+        if (response.content) this.contentView = response.content;
+        if (response.footer) this.footerView = response.footer;
+
+        // Actions
+        this.executeActions(response);
+    }
+
+    private executeActions(response: IDialogResponse): void {
+        // 1. Primary action
+        if (response.action === DialogAction.Close) {
+            this.close();
+        }
+        // DialogAction.Keep → do nothing, dialog stays open
+
+        // 2. Secondary actions (combinable)
+        if (response.toast) {
+            this.ea.publish(Channels.Toaster, <IToaster>{
+                action: ToasterAction.Add,
+                toast: response.toast
+            });
+        }
+        if (response.ajaxify) {
+            this.ea.publish(Channels.Ajaxify, response.ajaxify);
+        } else if (response.redirect) {
+            this.platform.window.location.href = response.redirect;
+        } else if (response.refresh) {
+            this.platform.window.location.reload();
+        }
+    }
+
+    // Open / Close
+    private open(): void {
+        this.bindDialogEvents();
+        this.transitionService.run(this.dialogElement, (element) => {
+            this.ea.publish(Channels.Overlay, <IOverlay>{ action: OverlayAction.Open });
+            this.ea.publish(Channels.ModalStatus, <IModalStatus>{ status: ModalStatus.Opening, id: this.id });
+            (element as HTMLDialogElement).showModal();
+            this.platform.requestAnimationFrame(() => {
+                element.classList.add('opacity-100');
+                element.classList.remove('opacity-0');
+            });
+        }, () => {
+            this.ea.publish(Channels.ModalStatus, <IModalStatus>{ status: ModalStatus.Opened, id: this.id });
+        });
+    }
+
+    private close(): void {
+        this.transitionService.run(this.dialogElement, (element) => {
+            this.ea.publish(Channels.ModalStatus, <IModalStatus>{ status: ModalStatus.Closing, id: this.id });
+            this.ea.publish(Channels.Overlay, <IOverlay>{ action: OverlayAction.Close });
+            element.classList.add('opacity-0');
+            element.classList.remove('opacity-100');
+        }, (element) => {
+            (element as HTMLDialogElement).close();
+            this.unbindDialogEvents();
+            // Reset
+            this.headerView = null;
+            this.contentView = null;
+            this.footerView = null;
+            this.icon = null;
+            this.color = UiColor.Primary;
+            this.loading = false;
+            this.ea.publish(Channels.ModalStatus, <IModalStatus>{ status: ModalStatus.Closed, id: this.id });
+        });
+    }
+}

package/src/components/bleet-overlay.ts

@@ -0,0 +1,111 @@
+import {customElement, IDisposable, IEventAggregator, ILogger, INode, IPlatform, resolve} from "aurelia";
+import {Channels, OverlayAction, OverlayStatus} from '../enums/event-aggregator';
+import {IOverlay, IOverlayStatus} from '../interfaces/event-aggregator';
+import {ITransitionService} from '../services/transition-service';
+
+@customElement({
+    name: 'bleet-overlay',
+    template: null,
+})
+export class BleetOverlay {
+
+    private disposable?: IDisposable;
+    public constructor(
+        private readonly logger: ILogger = resolve(ILogger).scopeTo('<bleet-overlay>'),
+        private readonly element: HTMLElement = resolve(INode) as HTMLElement,
+        private readonly ea: IEventAggregator = resolve(IEventAggregator),
+        private readonly platform: IPlatform = resolve(IPlatform),
+        private readonly transitionService: ITransitionService = resolve(ITransitionService),
+    ) {
+        this.logger.trace('constructor')
+    }
+
+    public attaching()
+    {
+        this.logger.trace('attaching');
+    }
+
+    public attached()
+    {
+        this.logger.trace('attached');
+        this.disposable = this.ea.subscribe(Channels.Overlay, this.onOverlayEvent);
+        this.element.addEventListener('click', this.onClickOverlay);
+    }
+
+    public detached()
+    {
+        this.logger.trace('detached');
+        this.element.removeEventListener('click', this.onClickOverlay);
+        this.disposable?.dispose();
+    }
+    public dispose()
+    {
+        this.logger.trace('dispose');
+        this.disposable?.dispose();
+    }
+
+    private toggle(fromOverlay: boolean = false) {
+        if (this.element.classList.contains('hidden')) {
+            this.open(fromOverlay);
+        } else {
+            this.close(fromOverlay);
+        }
+    }
+    private open(fromOverlay: boolean = false) {
+        if (this.element.classList.contains('hidden')) {
+            this.logger.trace('open');
+            this.transitionService.run(this.element, (element: HTMLElement) => {
+                if (fromOverlay) {
+                    this.ea.publish(Channels.Overlay, <IOverlay>{action: OverlayAction.Open});
+                }
+                this.ea.publish(Channels.OverlayStatus, <IOverlayStatus>{status: OverlayStatus.Opening});
+                element.classList.remove('hidden');
+                this.platform.requestAnimationFrame(() => {
+                    element.classList.remove('opacity-0');
+                    element.classList.add('opacity-100');
+                });
+                this.logger.trace('open before()');
+            }, (element: HTMLElement) => {
+                this.ea.publish(Channels.OverlayStatus, <IOverlayStatus>{status: OverlayStatus.Opened});
+                this.logger.trace('open after()');
+            });
+        }
+    }
+    private close(fromOverlay: boolean = false) {
+        if (!this.element.classList.contains('hidden')) {
+            this.transitionService.run(this.element, (element: HTMLElement) => {
+                if (fromOverlay) {
+                    this.ea.publish(Channels.Overlay, <IOverlay>{action: OverlayAction.Close});
+                }
+                this.ea.publish(Channels.OverlayStatus, <IOverlayStatus>{status: OverlayStatus.Closing});
+                element.classList.remove('opacity-100');
+                element.classList.add('opacity-0');
+                this.logger.trace('close before()');
+            }, (element: HTMLElement) => {
+                element.classList.add('hidden');
+                this.logger.trace('close after()');
+                this.ea.publish(Channels.OverlayStatus, <IOverlayStatus>{status: OverlayStatus.Closed});
+            });
+        }
+    }
+    private onOverlayEvent = (data: IOverlay) => {
+        if (data.action === OverlayAction.Open) {
+            this.logger.trace('onOverlayEvent', data);
+            this.open();
+        } else if (data.action === OverlayAction.Close) {
+            this.logger.trace('onOverlayEvent', data);
+            this.close();
+        } else if (data.action === OverlayAction.Toggle) {
+            this.logger.trace('onOverlayEvent', data);
+            this.toggle();
+        } else {
+            this.logger.trace('onOverlayEvent unhandled', data);
+        }
+    }
+    private onClickOverlay = (event: MouseEvent) => {
+        this.logger.trace('onClickOverlay', event);
+        event.preventDefault();
+        this.close(true);
+    }
+
+}

package/src/components/bleet-quilljs.html.ts

@@ -0,0 +1,4 @@
+export default `<template>
+    <input type="hidden" ref="hiddenField">
+    <div ref="editorElement"></div>
+</template>`