@blackcube/aurelia2-bleet 1.0.0

package/src/attributes/password.ts

@@ -0,0 +1,47 @@
+import {customAttribute, ILogger, INode, resolve} from "aurelia";
+
+@customAttribute('bleet-password')
+export class BleetPasswordCustomAttribute
+{
+    private button?: HTMLElement;
+    private iconHidden?: HTMLElement;
+    private iconVisible?: HTMLElement;
+    private input?: HTMLInputElement;
+
+    public constructor(
+        private readonly logger: ILogger = resolve(ILogger).scopeTo('bleet-password'),
+        private readonly element: HTMLElement = resolve(INode) as HTMLElement,
+    ) {
+    }
+
+    public attaching(): void
+    {
+        this.button = this.element.querySelector('[data-password=toggle]') ?? undefined;
+        this.iconHidden = this.button?.querySelector('[data-password=icon-hidden]') ?? undefined;
+        this.iconVisible = this.button?.querySelector('[data-password=icon-visible]') ?? undefined;
+        this.input = this.element.querySelector('input') ?? undefined;
+    }
+
+    public attached(): void
+    {
+        this.button?.addEventListener('click', this.onToggle);
+    }
+
+    public detaching(): void
+    {
+        this.button?.removeEventListener('click', this.onToggle);
+    }
+
+    private onToggle = (event: MouseEvent): void => {
+        event.preventDefault();
+
+        const isPassword = this.input?.type === 'password';
+
+        if (this.input) {
+            this.input.type = isPassword ? 'text' : 'password';
+        }
+
+        this.iconHidden?.classList.toggle('hidden', isPassword);
+        this.iconVisible?.classList.toggle('hidden', !isPassword);
+    }
+}

package/src/attributes/profile.ts

@@ -0,0 +1,112 @@
+import {bindable, customAttribute, IEventAggregator, ILogger, INode, IPlatform, resolve} from "aurelia";
+import {Channels, ProfileAction, ProfileStatus} from '../enums/event-aggregator';
+import {IProfile, IProfileStatus} from '../interfaces/event-aggregator';
+import {ITransitionService} from '../services/transition-service';
+import {ITrapFocusService} from '../services/trap-focus-service';
+
+@customAttribute({ name: 'bleet-profile', defaultProperty: 'id' })
+export class BleetProfileCustomAttribute
+{
+
+    @bindable id: string = '';
+    private toggleButton?: HTMLButtonElement;
+    private panel?: HTMLDivElement;
+    private isOpen: boolean = false;
+
+    public constructor(
+        private readonly logger: ILogger = resolve(ILogger).scopeTo('bleet-profile'),
+        private readonly ea: IEventAggregator = resolve(IEventAggregator),
+        private readonly element: HTMLElement = resolve(INode) as HTMLElement,
+        private readonly transitionService: ITransitionService = resolve(ITransitionService),
+        private readonly platform: IPlatform = resolve(IPlatform),
+        private readonly trapFocusService: ITrapFocusService = resolve(ITrapFocusService),
+    ) {
+        this.logger.trace('constructor')
+    }
+
+    public attaching()
+    {
+        this.logger.trace('attaching');
+        this.toggleButton = this.element.querySelector('[data-profile=toggle]') as HTMLButtonElement;
+        this.panel = this.element.querySelector('[data-profile=panel]') as HTMLDivElement;
+    }
+
+    public attached()
+    {
+        this.logger.trace('attached');
+        this.toggleButton?.addEventListener('click', this.onClickToggle);
+    }
+
+    public detached()
+    {
+        this.logger.trace('detached');
+        this.toggleButton?.removeEventListener('click', this.onClickToggle);
+        if (this.isOpen) {
+            this.trapFocusService.stop();
+        }
+    }
+
+    private onClickToggle = (event: MouseEvent) => {
+        this.logger.trace('onClickToggle', event);
+        event.preventDefault();
+        if (this.isOpen) {
+            this.close();
+        } else {
+            this.open();
+        }
+    }
+
+    private onStopTrapFocus = () => {
+        this.logger.trace('onStopTrapFocus');
+        this.isOpen = false;
+        this.toggleButton?.setAttribute('aria-expanded', 'false');
+        this.transitionService.run(this.panel!, (element) => {
+            this.ea.publish(Channels.Profile, <IProfile>{action: ProfileAction.Close, id: this.id});
+            this.ea.publish(Channels.ProfileStatus, <IProfileStatus>{status: ProfileStatus.Closing, id: this.id});
+            this.platform.requestAnimationFrame(() => {
+                element.classList.remove('opacity-100', 'scale-100');
+                element.classList.add('opacity-0', 'scale-95', 'pointer-events-none');
+            });
+        }, (element) => {
+            element.classList.add('hidden');
+            this.ea.publish(Channels.ProfileStatus, <IProfileStatus>{status: ProfileStatus.Closed, id: this.id});
+        });
+        return Promise.resolve();
+    }
+
+    private open() {
+        this.logger.trace('open');
+        this.isOpen = true;
+        this.toggleButton?.setAttribute('aria-expanded', 'true');
+
+        // Find first focusable item in panel
+        const firstItem = this.panel?.querySelector('a, button') as HTMLElement;
+
+        this.trapFocusService.start(
+            this.toggleButton as HTMLButtonElement,
+            this.panel as HTMLElement,
+            this.element,
+            undefined,
+            this.onStopTrapFocus,
+            firstItem
+        ).then(() => {
+            this.transitionService.run(this.panel!, (element) => {
+                this.ea.publish(Channels.Profile, <IProfile>{action: ProfileAction.Open, id: this.id});
+                this.ea.publish(Channels.ProfileStatus, <IProfileStatus>{status: ProfileStatus.Opening, id: this.id});
+                element.classList.remove('hidden');
+                this.platform.requestAnimationFrame(() => {
+                    element.classList.add('opacity-100', 'scale-100');
+                    element.classList.remove('opacity-0', 'scale-95', 'pointer-events-none');
+                });
+            }, () => {
+                this.ea.publish(Channels.ProfileStatus, <IProfileStatus>{status: ProfileStatus.Opened, id: this.id});
+            });
+        });
+    }
+
+    private close() {
+        this.logger.trace('close');
+        this.trapFocusService.stop();
+    }
+
+}

package/src/attributes/select.ts

@@ -0,0 +1,214 @@
+import {customAttribute, ILogger, INode, resolve} from "aurelia";
+import {ITrapFocusService} from '../services/trap-focus-service';
+
+// @ts-ignore
+@customAttribute('bleet-select')
+export class BleetSelectCustomAttribute {
+
+    private select?: HTMLSelectElement;
+    private button?: HTMLButtonElement;
+    private buttonText?: HTMLElement;
+    private optionTemplate?: HTMLTemplateElement;
+    private itemsPlace?: HTMLElement;
+
+    public constructor(
+        private readonly logger: ILogger = resolve(ILogger).scopeTo('bleet-select'),
+        private readonly element: HTMLElement = resolve(INode) as HTMLElement,
+        private readonly trapFocusService: ITrapFocusService = resolve(ITrapFocusService),
+    ) {
+        this.logger.trace('constructor')
+    }
+
+    public attaching()
+    {
+        this.logger.trace('attaching');
+        this.select = this.element.querySelector('select') as HTMLSelectElement;
+        this.button = this.element.querySelector('button') as HTMLButtonElement;
+        this.buttonText = this.button.querySelector('[data-select=value]') as HTMLElement;
+        this.optionTemplate = this.element.querySelector('[data-select=item-template]') as HTMLTemplateElement;
+        this.itemsPlace = this.element.querySelector('[data-select=items]') as HTMLElement;
+    }
+
+    public attached()
+    {
+        this.logger.trace('attached');
+        if (!this.itemsPlace) {
+            throw new Error('Items place element not found');
+        }
+        if (!this.itemsPlace.id) {
+            this.itemsPlace.id = `data-select-items-${Math.random().toString(36).substring(2, 15)}`;
+        }
+        if (!this.select?.options) {
+            throw new Error('Select options not found');
+        }
+        if (!this.optionTemplate) {
+            throw new Error('Option template not found');
+        }
+        if (!this.button) {
+            throw new Error('Button element not found');
+        }
+        if (!this.buttonText) {
+            throw new Error('Button text element not found');
+        }
+        this.preparePanel();
+
+        // ARIA setup
+        this.button.ariaHasPopup = 'listbox';
+        this.button.setAttribute('aria-controls', this.itemsPlace.id);
+        this.itemsPlace.role = 'listbox';
+
+        // Event listeners
+        this.button?.addEventListener('click', this.onClickToggleMenu);
+        this.itemsPlace?.addEventListener('click', this.onClickToggleItem);
+    }
+
+    public detached()
+    {
+        this.logger.trace('detached');
+        this.button?.removeEventListener('click', this.onClickToggleMenu);
+        this.itemsPlace?.removeEventListener('click', this.onClickToggleItem);
+    }
+
+    private onClickToggleMenu = (event: MouseEvent) => {
+        this.logger.trace('onClick', event);
+        event.preventDefault();
+        if (this.select?.disabled) {
+            return;
+        }
+        return this.toggleMenu();
+    }
+
+    private onStopTrapFocus = () => {
+        this.logger.trace('onStopTrapFocus');
+        this.itemsPlace?.classList.add('hidden');
+        return Promise.resolve();
+    }
+
+    private toggleMenu = () => {
+        const isClosed = this.itemsPlace?.classList.contains('hidden');
+        return new Promise((resolve) => {
+            if (isClosed) {
+                // Opening menu
+                (this.button as HTMLButtonElement).ariaExpanded = 'true';
+
+                // Find selected option to focus initially
+                const selectedOption = this.itemsPlace?.querySelector('[aria-selected="true"]') as HTMLElement;
+
+                return this.trapFocusService.start(
+                    this.button as HTMLButtonElement,
+                    this.itemsPlace as HTMLElement,
+                    this.element,
+                    undefined,
+                    this.onStopTrapFocus,
+                    selectedOption // Pass selected option as initial focus
+                )
+                    .then(() => {
+                        this.logger.trace('toggleMenu opened');
+                        this.itemsPlace?.classList.remove('hidden');
+                        resolve(void 0);
+                    });
+            } else {
+                // Closing menu
+                (this.button as HTMLButtonElement).ariaExpanded = 'false';
+                return this.trapFocusService.stop()
+                    .then(() => {
+                        this.logger.trace('toggleMenu closed');
+                        this.itemsPlace?.classList.add('hidden');
+                        resolve(void 0);
+                    });
+            }
+        });
+    }
+
+    private onClickToggleItem = (event: MouseEvent) => {
+        this.logger.trace('onClickItem', event);
+        event.preventDefault();
+        const element = (event.target as HTMLElement).closest('[data-value]') as HTMLElement;
+
+        // Update select options
+        Array.from((this.select as HTMLSelectElement).options).forEach((option) => {
+            option.selected = option.value == element.dataset.value;
+        });
+
+        // Dispatch change event sur le select natif pour active-form
+        this.select?.dispatchEvent(new Event('change', { bubbles: true }));
+
+        this.synchSelect();
+    }
+
+    private synchSelect() {
+        this.swapItemClasses();
+
+        // Close menu
+        return this.toggleMenu();
+    }
+
+    private swapItemClasses() {
+        Array.from((this.select as HTMLSelectElement).options).forEach((option) => {
+            const item = this.itemsPlace?.querySelector(`[data-value="${option.value}"]`) as HTMLElement;
+            if (!item) return;
+
+            const checkmark = item.querySelector('[data-select=item-check]') as HTMLElement;
+
+            // Récupérer les classes depuis les data-attributes de l'élément
+            const itemInactiveClasses = item.dataset.classInactive?.split(' ') || [];
+            const itemActiveClasses = item.dataset.classActive?.split(' ') || [];
+            const checkInactiveClasses = checkmark?.dataset.classInactive?.split(' ') || [];
+            const checkActiveClasses = checkmark?.dataset.classActive?.split(' ') || [];
+
+            if (option.selected) {
+                // Swap vers active
+                item.classList.remove(...itemInactiveClasses);
+                item.classList.add(...itemActiveClasses);
+                checkmark?.classList.remove(...checkInactiveClasses);
+                checkmark?.classList.add(...checkActiveClasses);
+
+                // Update ARIA
+                item.setAttribute('aria-selected', 'true');
+                this.button?.setAttribute('aria-activedescendant', item.id);
+
+                // Update button text
+                (this.buttonText as HTMLElement).innerHTML = option.innerHTML;
+            } else {
+                // Swap vers inactive
+                item.classList.remove(...itemActiveClasses);
+                item.classList.add(...itemInactiveClasses);
+                checkmark?.classList.remove(...checkActiveClasses);
+                checkmark?.classList.add(...checkInactiveClasses);
+
+                // Update ARIA
+                item.setAttribute('aria-selected', 'false');
+            }
+        });
+    }
+    private preparePanel() {
+        this.logger.trace('preparePanel');
+        if (!this.select) {
+            throw new Error('Select element not found');
+        }
+        // Vider le panel (sauf les templates)
+        this.itemsPlace?.querySelectorAll('button').forEach((child) => child.remove());
+
+        const options = Array.from(this.select.options);
+        options.forEach((option) => {
+            // @ts-ignore
+            const item = this.optionTemplate.content.cloneNode(true) as DocumentFragment;
+            const button = item.querySelector('button') as HTMLButtonElement;
+
+            // ARIA attributes
+            button.role = 'option';
+            button.id = `bleet-option-${option.value}-${Math.random().toString(36).substring(2, 9)}`;
+
+            // Content
+            const itemText = item.querySelector('[data-select=item-text]') as HTMLElement;
+            const itemValue = item.querySelector('[data-value]') as HTMLElement;
+            itemValue.dataset.value = option.value;
+            itemText.innerHTML = option.innerHTML;
+
+            this.itemsPlace?.append(item);
+        });
+
+        // Appliquer les classes active/inactive
+        this.swapItemClasses();
+    }
+}

package/src/attributes/tabs.ts

@@ -0,0 +1,99 @@
+import {customAttribute, ILogger, INode, IPlatform, resolve} from "aurelia";
+
+
+@customAttribute('bleet-tabs')
+export class BleetTabsCustomAttribute {
+
+    private activeClasses: string = '';
+    private inactiveClasses: string = '';
+    private select?: HTMLSelectElement;
+    public constructor(
+        private readonly logger: ILogger = resolve(ILogger).scopeTo('bleet-tabs'),
+        private readonly element: HTMLElement = resolve(INode) as HTMLElement,
+        private readonly p: IPlatform = resolve(IPlatform),
+    ) {
+        this.logger.trace('constructor')
+    }
+
+    public attaching()
+    {
+        this.logger.trace('attaching');
+        const activeButton = this.element.querySelector('[data-tabs^="tab-"][aria-selected="true"]');
+        const inactiveButton = this.element.querySelector('[data-tabs^="tab-"][aria-selected="false"]');
+
+        this.activeClasses = activeButton?.className || '';
+        this.inactiveClasses = inactiveButton?.className || '';
+
+        this.select = this.element.querySelector('select') as HTMLSelectElement;
+    }
+
+    public attached()
+    {
+        this.logger.trace('attached');
+        this.element.querySelectorAll('[data-tabs^="tab-"]').forEach((button: Element) => {
+            button.addEventListener('click', this.onClickTab);
+        });
+
+        // Écouter le select mobile
+        if (this.select) {
+            this.select.addEventListener('change', this.onChangeSelect);
+        }
+    }
+
+    public detached()
+    {
+        this.logger.trace('detached');
+        this.element.querySelectorAll('[data-tabs^="tab-"]').forEach((button: Element) => {
+            button.removeEventListener('click', this.onClickTab);
+        });
+
+        if (this.select) {
+            this.select.removeEventListener('change', this.onChangeSelect);
+        }
+    }
+
+    private onClickTab = (event: Event) => {
+        this.logger.trace('onClickTab', event);
+        event.preventDefault();
+        const tabIndex = (event.currentTarget as HTMLElement).getAttribute('data-tabs')?.replace('tab-', '') || '0';
+
+        // Mettre à jour les tabs
+        this.element.querySelectorAll('[data-tabs^="tab-"]').forEach((button: Element) => {
+            const buttonTabIndex = button.getAttribute('data-tabs')?.replace('tab-', '') || '0';
+            if (buttonTabIndex === tabIndex) {
+                button.setAttribute('aria-selected', 'true');
+                button.className = this.activeClasses;
+            } else {
+                button.setAttribute('aria-selected', 'false');
+                button.className = this.inactiveClasses;
+            }
+        });
+
+        // Mettre à jour les panels
+        this.element.querySelectorAll('[data-tabs^="panel-"]').forEach((panel: Element) => {
+            const panelIndex = panel.getAttribute('data-tabs')?.replace('panel-', '') || '0';
+            if (panelIndex === tabIndex) {
+                panel.classList.remove('hidden');
+                panel.setAttribute('aria-hidden', 'false');
+            } else {
+                panel.classList.add('hidden');
+                panel.setAttribute('aria-hidden', 'true');
+            }
+        });
+
+        // Synchroniser le select
+        if (this.select) {
+            this.select.value = tabIndex;
+        }
+    }
+
+    private onChangeSelect = (event: Event) => {
+        this.logger.trace('onChangeSelect', event);
+        const tabIndex = this.select?.value;
+        const button = this.element.querySelector(`[data-tabs="tab-${tabIndex}"]`) as HTMLElement;
+
+        if (button) {
+            button.click();
+        }
+    }
+}

package/src/attributes/toaster-trigger.ts

@@ -0,0 +1,54 @@
+import {bindable, customAttribute, IEventAggregator, ILogger, INode, resolve} from "aurelia";
+import {Channels, ToasterAction, UiColor, UiToastIcon} from '../enums/event-aggregator';
+import {IToaster} from '../interfaces/event-aggregator';
+
+@customAttribute({ name: 'bleet-toaster-trigger', defaultProperty: 'id' })
+export class BleetToasterTriggerCustomAttribute {
+
+    @bindable id: string = '';
+    @bindable() public color: UiColor = UiColor.Info;
+    @bindable() public icon: UiToastIcon = UiToastIcon.Info;
+    @bindable() public title: string = '';
+    @bindable() public content: string = '';
+    @bindable() public duration: number = 0; // Duration in milliseconds
+    public constructor(
+        private readonly logger: ILogger = resolve(ILogger).scopeTo('bleet-toaster-trigger'),
+        private readonly element: HTMLElement = resolve(INode) as HTMLElement,
+        private readonly ea: IEventAggregator = resolve(IEventAggregator),
+    ) {
+        this.logger.trace('constructor')
+    }
+
+    public attaching()
+    {
+        this.logger.trace('attaching');
+    }
+
+    public attached()
+    {
+        this.logger.trace('attached');
+        this.element.addEventListener('click', this.onClick);
+    }
+
+    public detached()
+    {
+        this.logger.trace('detached');
+        this.element.removeEventListener('click', this.onClick);
+    }
+
+    private onClick = (event: Event) => {
+        this.logger.trace('onClick', event);
+        event.preventDefault();
+        this.ea.publish(Channels.Toaster, <IToaster>{
+            action: ToasterAction.Add, toast:
+                {
+                    id: this.id,
+                    duration: this.duration,
+                    color: this.color,
+                    icon: this.icon,
+                    title: this.title,
+                    content: this.content
+                }
+        });
+    }
+}