@blackcube/aurelia2-bleet 1.0.0

package/src/services/storage-service.ts

@@ -0,0 +1,36 @@
+import {DI, ILogger, IPlatform, resolve} from "aurelia";
+
+export interface IStorageService extends StorageService { }
+export const IStorageService = /*@__PURE__*/DI.createInterface<IStorageService>('IStorageService', (x) => x.singleton(StorageService));
+
+export class StorageService
+{
+    public constructor(
+        private readonly logger: ILogger = resolve(ILogger).scopeTo('StorageService'),
+        private readonly platform:IPlatform = resolve(IPlatform),
+    ) {
+        this.logger.trace('constructor')
+    }
+
+    public load(key: string, def: any = null): any
+    {
+        this.logger.trace('load', key);
+        const value = localStorage.getItem(key);
+        if (value === null) {
+            return def;
+        }
+        return JSON.parse(value);
+    }
+
+    public save(key: string, value: any): void
+    {
+        this.logger.trace('save', key, value);
+        localStorage.setItem(key, JSON.stringify(value));
+    }
+
+    public remove(key: string): void
+    {
+        this.logger.trace('remove', key);
+        localStorage.removeItem(key);
+    }
+}

package/src/services/svg-service.ts

@@ -0,0 +1,35 @@
+import { DI, ILogger, resolve } from "aurelia";
+
+export interface ISvgService extends SvgService { }
+export const ISvgService = /*@__PURE__*/DI.createInterface<ISvgService>('ISvgService', (x) => x.singleton(SvgService));
+
+export class SvgService {
+    private static readonly ICONS: Record<string, string> = {
+        'information-circle': `<svg class="size-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 0 1 .67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 1 1-.671-1.34l.041-.022ZM12 9a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z" clip-rule="evenodd"/></svg>`,
+        'check-circle': `<svg class="size-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z" clip-rule="evenodd"/></svg>`,
+        'exclamation-triangle': `<svg class="size-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003ZM12 8.25a.75.75 0 0 1 .75.75v3.75a.75.75 0 0 1-1.5 0V9a.75.75 0 0 1 .75-.75Zm0 8.25a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z" clip-rule="evenodd"/></svg>`,
+        'x-circle': `<svg class="size-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm-1.72 6.97a.75.75 0 1 0-1.06 1.06L10.94 12l-1.72 1.72a.75.75 0 1 0 1.06 1.06L12 13.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L13.06 12l1.72-1.72a.75.75 0 1 0-1.06-1.06L12 10.94l-1.72-1.72Z" clip-rule="evenodd"/></svg>`,
+        'x-mark': `<svg class="size-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M5.47 5.47a.75.75 0 0 1 1.06 0L12 10.94l5.47-5.47a.75.75 0 1 1 1.06 1.06L13.06 12l5.47 5.47a.75.75 0 1 1-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 0 1-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd"/></svg>`,
+    };
+
+    public constructor(
+        private readonly logger: ILogger = resolve(ILogger).scopeTo('SvgService'),
+    ) {
+        this.logger.trace('constructor');
+    }
+
+    /**
+     * Retourne le SVG pour une icône
+     * @param icon Clé heroicon (ex: 'check-circle') ou SVG inline custom
+     * @returns Le SVG du map si clé connue, sinon retourne icon tel quel (SVG custom)
+     */
+    public get(icon: string): string | null {
+        this.logger.trace('get', icon);
+        if (!icon) return null;
+        return SvgService.ICONS[icon] ?? icon;
+    }
+
+    public has(key: string): boolean {
+        return key in SvgService.ICONS;
+    }
+}

package/src/services/transition-service.ts

@@ -0,0 +1,39 @@
+import {DI, IEventAggregator, ILogger, INode, IPlatform, resolve} from "aurelia";
+
+export interface ITransitionService extends TransitionService { }
+export const ITransitionService = /*@__PURE__*/DI.createInterface<ITransitionService>('ITransitionService', (x) => x.singleton(TransitionService));
+
+export type TransitionCallback = (e: HTMLElement|HTMLDialogElement) => void
+export class TransitionService
+{
+    public securityTimeout: number = 2000;
+    public constructor(
+        private readonly logger: ILogger = resolve(ILogger).scopeTo('TransitionService'),
+        private readonly platform:IPlatform = resolve(IPlatform),
+    ) {
+        this.logger.trace('constructor')
+    }
+
+    public run(element: HTMLElement, before: TransitionCallback, after?: TransitionCallback) {
+        let securityTimeout: any = undefined;
+        const endTransition = (evt: TransitionEvent) => {
+            if (securityTimeout !== undefined) {
+                this.platform.clearTimeout(securityTimeout);
+                securityTimeout = undefined;
+            }
+            element.removeEventListener('transitionend', endTransition);
+            if (after) {
+                this.logger.trace('after()');
+                after(element);
+            }
+        }
+        if (before) {
+            securityTimeout = this.platform.setTimeout(endTransition, this.securityTimeout);
+            element.addEventListener('transitionend', endTransition);
+            this.platform.requestAnimationFrame(() => {
+                this.logger.trace('before()');
+                before(element);
+            });
+        }
+    }
+}

package/src/services/trap-focus-service.ts

@@ -0,0 +1,213 @@
+import {DI, ILogger, IPlatform, resolve} from "aurelia";
+
+export interface ITrapFocusService extends TrapFocusService { }
+export const ITrapFocusService = /*@__PURE__*/DI.createInterface<ITrapFocusService>('ITrapFocusService', (x) => x.transient(TrapFocusService));
+
+export class TrapFocusService
+{
+
+    public focusableElementsQuerySelector = '[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"]), [accesskey], summary, canvas, audio, video, details, iframe, [contenteditable]';
+
+    private opener: HTMLElement|null = null;
+    private target: HTMLElement|null = null;
+    private globalElement: HTMLElement|null = null;
+    private startCallback: Function|null = null;
+    private stopCallback: Function|null = null;
+    private focusableElements: HTMLElement[] = [];
+    private lastFocusedElement: HTMLElement|null = null;
+    private started: boolean = false;
+
+
+    public constructor(
+        private readonly logger: ILogger = resolve(ILogger).scopeTo('TrapFocusService'),
+        private readonly platform:IPlatform = resolve(IPlatform),
+    ) {
+        this.logger.trace('constructor')
+    }
+
+    private buildFocusableElements() {
+        this.focusableElements = [];
+        const focusableElements = this.target?.querySelectorAll(this.focusableElementsQuerySelector);
+        focusableElements?.forEach((element: Element) => {
+            const isDisabled = element.hasAttribute('disabled');
+            const isAriaHidden = (element.getAttribute('aria-hidden') === 'true');
+            const isNotTabbable = (element.getAttribute('tabindex') === '-1');
+            if (isDisabled === false && isAriaHidden === false && isNotTabbable === false) {
+                this.focusableElements.push(element as HTMLElement);
+            }
+        });
+    }
+
+    public start(opener: HTMLElement, target: HTMLElement, globalElement: HTMLElement, startCallback?: Function, stopCallback?: Function, initialFocusElement?: HTMLElement) {
+        this.logger.trace('start', opener, target);
+        this.startCallback = startCallback ?? null;
+        this.stopCallback = stopCallback ?? null;
+        this.opener = opener;
+        this.target = target;
+        this.globalElement = globalElement;
+        this.buildFocusableElements();
+
+        // Use provided initialFocusElement if valid, otherwise default to first focusable
+        if (initialFocusElement && this.focusableElements.includes(initialFocusElement)) {
+            this.lastFocusedElement = initialFocusElement;
+        } else {
+            this.lastFocusedElement = this.focusableElements[0] || undefined;
+        }
+
+        this.logger.trace('start: add keydown listener');
+        this.platform.requestAnimationFrame(() => {
+            this.logger.trace('start: focus initial element', this.lastFocusedElement);
+            this.lastFocusedElement?.focus();
+
+        });
+        this.target.addEventListener('keydown', this.onKeyDown);
+        this.platform.document.addEventListener('click', this.onClickOutside);
+        this.started = true;
+        if(this.startCallback) {
+            const promise = this.startCallback();
+            if (promise && promise instanceof Promise) {
+                return promise;
+            }
+        }
+        return Promise.resolve();
+
+    }
+    public stop() {
+        this.logger.trace('stop');
+        return new Promise((resolve, reject) => {
+
+            if (this.started) {
+                this.logger.trace('stop: remove keydown listener');
+                this.target?.removeEventListener('keydown', this.onKeyDown);
+                this.platform.document.removeEventListener('click', this.onClickOutside);
+
+                if(this.stopCallback) {
+                    const promise = this.stopCallback();
+                    if (promise && promise instanceof Promise) {
+                        this.platform.requestAnimationFrame(() => {
+                            this.opener?.focus()
+                            this.cleanup();
+                            promise.then((res) => {
+                                return resolve(res);
+                            });
+                        });
+                        return;
+                    }
+                    return resolve(void 0);
+                }
+
+                this.platform.requestAnimationFrame(() => {
+                    this.opener?.focus()
+                    this.cleanup();
+                    return resolve(void 0);
+                });
+                return;
+            }
+
+            return reject('TrapFocusService: not started');
+        });
+    }
+    private cleanup() {
+        this.logger.trace('cleanup');
+        if (this.started) {
+            this.opener = null;
+            this.startCallback = null;
+            this.stopCallback = null;
+            this.target = null;
+            this.lastFocusedElement = null;
+            this.focusableElements = [];
+            this.started = false;
+        }
+    }
+
+
+    private focusedElementIndex() : number {
+        let index = -1;
+        if (this.lastFocusedElement) {
+            index = this.focusableElements.indexOf(this.lastFocusedElement);
+        }
+        if (index === -1 && this.lastFocusedElement !== undefined) {
+            this.lastFocusedElement = null;
+        }
+        return index;
+    }
+    private focusPreviousElement(loop = true): HTMLElement | null {
+
+        const currentIndex = this.focusedElementIndex();
+        if (currentIndex === -1) {
+            return null;
+        }
+        let changed = false;
+        if (currentIndex === 0 && loop === true) {
+            this.lastFocusedElement = this.focusableElements[this.focusableElements.length - 1];
+            changed = true;
+        } else if (currentIndex > 0) {
+            this.lastFocusedElement = this.focusableElements[currentIndex - 1];
+            changed = true;
+        }
+        if (changed === true) {
+            this.platform.requestAnimationFrame(() => {
+                this.logger.trace('focusPreviousElement: focusing', this.lastFocusedElement);
+                this.lastFocusedElement?.focus();
+            });
+        }
+        return this.lastFocusedElement;
+    }
+    private focusNextElement(loop = true): HTMLElement | null {
+        const currentIndex = this.focusedElementIndex();
+        if (currentIndex === -1) {
+            return null;
+        }
+        let changed = false;
+        if (currentIndex === this.focusableElements.length - 1 && loop === true) {
+            this.lastFocusedElement = this.focusableElements[0];
+            changed = true;
+        } else if (currentIndex < this.focusableElements.length - 1) {
+            this.lastFocusedElement = this.focusableElements[currentIndex + 1];
+            changed = true;
+        }
+        if (changed === true) {
+            this.platform.requestAnimationFrame(() => {
+                this.logger.trace('focusNextElement: focusing', this.lastFocusedElement);
+                this.lastFocusedElement?.focus();
+            });
+        }
+        return this.lastFocusedElement;
+    }
+
+    private onKeyDown = (event: KeyboardEvent) => {
+        let changeFocus = false;
+        if (event.key === 'Tab') {
+            if (event.shiftKey) {
+                // shift + tab loop backwards
+                event.preventDefault();
+                this.lastFocusedElement = this.focusPreviousElement(true);
+            } else {
+                // tab loop forwards
+                event.preventDefault();
+                this.lastFocusedElement = this.focusNextElement(true);
+            }
+        } else if (event.key === 'ArrowUp') {
+            // up arrow, no loop
+            event.preventDefault();
+            this.lastFocusedElement = this.focusPreviousElement(false);
+        } else if (event.key === 'ArrowDown') {
+            // down arrow, no loop
+            event.preventDefault();
+            this.lastFocusedElement = this.focusNextElement(false);
+        } else if (event.key === 'Escape') {
+            // stop trap focus
+            event.preventDefault();
+            this.stop();
+        }
+    };
+    private onClickOutside = (event: MouseEvent) => {
+        this.logger.trace('onClickOutside', event);
+        if (this.started && this.globalElement && event.target) {
+            this.logger.trace('onClickOutside: checking if click is outside globalElement', event.target, this.globalElement);
+            if (!this.globalElement.contains(event.target as Node)) {
+                this.stop();
+            }
+        }
+    }
+}

package/src/types/css.d.ts

@@ -0,0 +1,4 @@
+declare module '*.css' {
+    const value: string;
+    export default value;
+}

package/src/types/html.d.ts

@@ -0,0 +1,12 @@
+declare module '*.html' {
+    import { IContainer } from '@aurelia/kernel';
+    import { BindableDefinition } from '@aurelia/runtime';
+    export const name: string;
+    export const template: string;
+    export default template;
+    export const dependencies: string[];
+    export const containerless: boolean | undefined;
+    export const bindables: Record<string, BindableDefinition>;
+    export const shadowOptions: { mode: 'open' | 'closed'} | undefined;
+    export function register(container: IContainer);
+}

package/src/types/svg.d.ts

@@ -0,0 +1,4 @@
+declare module '*.svg' {
+    const value: string;
+    export default value;
+}