@blackcube/aurelia2-bleet 1.0.0

package/src/attributes/dropdown.ts

@@ -0,0 +1,377 @@
+import {customAttribute, ILogger, INode, resolve} from "aurelia";
+import {ITrapFocusService} from '../services/trap-focus-service';
+
+// @ts-ignore
+@customAttribute('bleet-dropdown')
+export class BleetDropdownCustomAttribute {
+
+    private select?: HTMLSelectElement;
+    private button?: HTMLButtonElement;
+    private buttonText?: HTMLElement;
+    private optionTemplate?: HTMLTemplateElement;
+    private tagTemplate?: HTMLTemplateElement;
+    private tagsContainer?: HTMLElement;
+    private placeholder?: HTMLElement;
+    private itemsPlace?: HTMLElement;
+    private itemsContainer?: HTMLElement;
+    private searchInput?: HTMLInputElement;
+    private emptyMessage?: HTMLElement;
+    private isMultiple: boolean = false;
+    private withTags: boolean = false;
+
+    public constructor(
+        private readonly logger: ILogger = resolve(ILogger).scopeTo('bleet-dropdown'),
+        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-dropdown=value]') as HTMLElement;
+        this.tagsContainer = this.button.querySelector('[data-dropdown=tags]') as HTMLElement;
+        this.placeholder = this.button.querySelector('[data-dropdown=placeholder]') as HTMLElement;
+        this.optionTemplate = this.element.querySelector('[data-dropdown=item-template]') as HTMLTemplateElement;
+        this.tagTemplate = this.element.querySelector('[data-dropdown=tag-template]') as HTMLTemplateElement;
+        this.itemsPlace = this.element.querySelector('[data-dropdown=items]') as HTMLElement;
+        this.itemsContainer = this.element.querySelector('[data-dropdown=items-container]') as HTMLElement;
+        this.searchInput = this.element.querySelector('[data-dropdown=search]') as HTMLInputElement;
+        this.emptyMessage = this.element.querySelector('[data-dropdown=empty]') as HTMLElement;
+        this.isMultiple = this.select?.multiple || false;
+        this.withTags = this.tagTemplate !== null;
+    }
+
+    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-dropdown-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 && !this.tagsContainer) {
+            throw new Error('Button text or tags container 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);
+        this.searchInput?.addEventListener('input', this.onSearchInput);
+
+        // Tag remove event listener (delegation)
+        if (this.withTags) {
+            this.tagsContainer?.addEventListener('click', this.onClickRemoveTag);
+        }
+    }
+
+    public detached()
+    {
+        this.logger.trace('detached');
+        this.button?.removeEventListener('click', this.onClickToggleMenu);
+        this.itemsPlace?.removeEventListener('click', this.onClickToggleItem);
+        this.searchInput?.removeEventListener('input', this.onSearchInput);
+        if (this.withTags) {
+            this.tagsContainer?.removeEventListener('click', this.onClickRemoveTag);
+        }
+    }
+
+    private onClickToggleMenu = (event: MouseEvent) => {
+        this.logger.trace('onClick', event);
+        // Ne pas ouvrir si on clique sur un bouton de suppression de tag
+        if ((event.target as HTMLElement).closest('[data-dropdown=tag-remove]')) {
+            return;
+        }
+        event.preventDefault();
+        return this.toggleMenu();
+    }
+
+    private onClickRemoveTag = (event: MouseEvent) => {
+        const removeButton = (event.target as HTMLElement).closest('[data-dropdown=tag-remove]');
+        if (!removeButton) return;
+
+        event.preventDefault();
+        event.stopPropagation();
+
+        const tagElement = removeButton.closest('[data-tag-value]') as HTMLElement;
+        if (!tagElement) return;
+
+        const value = tagElement.dataset.tagValue;
+
+        // Désélectionner l'option
+        Array.from((this.select as HTMLSelectElement).options).forEach((option) => {
+            if (option.value == value) {
+                option.selected = false;
+            }
+        });
+
+        // Dispatch change event sur le select natif pour active-form
+        this.select?.dispatchEvent(new Event('change', { bubbles: true }));
+
+        this.swapItemClasses();
+        this.updateDisplay();
+    }
+
+    private onStopTrapFocus = () => {
+        this.logger.trace('onStopTrapFocus');
+        this.itemsPlace?.classList.add('hidden');
+        // Reset search on close
+        if (this.searchInput) {
+            this.searchInput.value = '';
+            this.filterItems('');
+        }
+        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, or search input if searchable
+                const initialFocus = this.searchInput || 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,
+                    initialFocus
+                )
+                    .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;
+        if (!element) return;
+
+        const clickedValue = element.dataset.value;
+
+        if (this.isMultiple) {
+            // Toggle la sélection de l'option cliquée
+            Array.from((this.select as HTMLSelectElement).options).forEach((option) => {
+                if (option.value == clickedValue) {
+                    option.selected = !option.selected;
+                }
+            });
+
+            // Dispatch change event sur le select natif pour active-form
+            this.select?.dispatchEvent(new Event('change', { bubbles: true }));
+
+            // Ne pas fermer le menu en mode multiple
+            this.swapItemClasses();
+            this.updateDisplay();
+        } else {
+            // Mode simple : une seule sélection
+            Array.from((this.select as HTMLSelectElement).options).forEach((option) => {
+                option.selected = option.value == clickedValue;
+            });
+
+            // Dispatch change event sur le select natif pour active-form
+            this.select?.dispatchEvent(new Event('change', { bubbles: true }));
+
+            this.synchSelect();
+        }
+    }
+
+    private onSearchInput = (event: Event) => {
+        const query = (event.target as HTMLInputElement).value;
+        this.filterItems(query);
+    }
+
+    private filterItems(query: string) {
+        const normalizedQuery = query.toLowerCase().trim();
+        let visibleCount = 0;
+
+        this.itemsContainer?.querySelectorAll('[data-value]').forEach((item) => {
+            const text = item.querySelector('[data-dropdown=item-text]')?.textContent?.toLowerCase() || '';
+            const isVisible = normalizedQuery === '' || text.includes(normalizedQuery);
+
+            if (isVisible) {
+                (item as HTMLElement).classList.remove('hidden');
+                visibleCount++;
+            } else {
+                (item as HTMLElement).classList.add('hidden');
+            }
+        });
+
+        // Show/hide empty message
+        if (this.emptyMessage) {
+            if (visibleCount === 0 && normalizedQuery !== '') {
+                this.emptyMessage.classList.remove('hidden');
+            } else {
+                this.emptyMessage.classList.add('hidden');
+            }
+        }
+    }
+
+    private synchSelect() {
+        this.swapItemClasses();
+
+        // Close menu
+        return this.toggleMenu();
+    }
+
+    private updateDisplay() {
+        if (this.withTags) {
+            this.updateTags();
+        } else {
+            this.updateButtonText();
+        }
+    }
+
+    private updateButtonText() {
+        const selectedOptions = Array.from((this.select as HTMLSelectElement).options).filter(opt => opt.selected);
+
+        if (selectedOptions.length === 0) {
+            // Afficher le placeholder s'il existe
+            const placeholder = Array.from((this.select as HTMLSelectElement).options).find(opt => opt.value === '');
+            (this.buttonText as HTMLElement).innerHTML = placeholder?.innerHTML || '';
+        } else if (selectedOptions.length === 1) {
+            (this.buttonText as HTMLElement).innerHTML = selectedOptions[0].innerHTML;
+        } else {
+            (this.buttonText as HTMLElement).textContent = `${selectedOptions.length} sélectionnés`;
+        }
+    }
+
+    private updateTags() {
+        if (!this.tagsContainer || !this.tagTemplate) return;
+
+        const selectedOptions = Array.from((this.select as HTMLSelectElement).options).filter(opt => opt.selected && opt.value !== '');
+
+        // Supprimer les tags existants (sauf le placeholder)
+        this.tagsContainer.querySelectorAll('[data-tag-value]').forEach(tag => tag.remove());
+
+        // Afficher/masquer le placeholder
+        if (this.placeholder) {
+            if (selectedOptions.length === 0) {
+                this.placeholder.classList.remove('hidden');
+            } else {
+                this.placeholder.classList.add('hidden');
+            }
+        }
+
+        // Créer les tags
+        selectedOptions.forEach((option) => {
+            const tagFragment = this.tagTemplate!.content.cloneNode(true) as DocumentFragment;
+            const tagElement = tagFragment.querySelector('[data-tag-value]') as HTMLElement;
+            const tagText = tagFragment.querySelector('[data-dropdown=tag-text]') as HTMLElement;
+
+            tagElement.dataset.tagValue = option.value;
+            tagText.textContent = option.textContent;
+
+            this.tagsContainer?.appendChild(tagFragment);
+        });
+    }
+
+    private swapItemClasses() {
+        Array.from((this.select as HTMLSelectElement).options).forEach((option) => {
+            const item = this.itemsContainer?.querySelector(`[data-value="${option.value}"]`) as HTMLElement;
+            if (!item) return;
+
+            const checkmark = item.querySelector('[data-dropdown=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);
+            } 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');
+            }
+        });
+
+        // Update display (text or tags)
+        this.updateDisplay();
+    }
+
+    private preparePanel() {
+        this.logger.trace('preparePanel');
+        if (!this.select) {
+            throw new Error('Select element not found');
+        }
+        // Vider le container
+        if (this.itemsContainer) {
+            this.itemsContainer.innerHTML = '';
+        }
+
+        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-dropdown=item-text]') as HTMLElement;
+            const itemValue = item.querySelector('[data-value]') as HTMLElement;
+            itemValue.dataset.value = option.value;
+            itemText.innerHTML = option.innerHTML;
+
+            this.itemsContainer?.append(item);
+        });
+
+        // Appliquer les classes active/inactive
+        this.swapItemClasses();
+    }
+}

package/src/attributes/index.ts

@@ -0,0 +1,15 @@
+export * from './burger';
+export * from './menu';
+export * from './badge';
+export * from './select';
+export * from './dropdown';
+export * from './password';
+export * from './tabs';
+export * from './profile';
+export * from './toaster-trigger';
+export * from './alert';
+export * from './drawer-trigger';
+export * from './modal-trigger';
+export * from './pager';
+export * from './upload';
+export * from './ajaxify-trigger';

package/src/attributes/menu.ts

@@ -0,0 +1,179 @@
+import {customAttribute, IDisposable, IEventAggregator, ILogger, INode, IPlatform, resolve} from "aurelia";
+import {Channels, MenuAction, MenuStatus, OverlayAction, OverlayStatus} from '../enums/event-aggregator';
+import {IMenu, IMenuStatus, IOverlay, IOverlayStatus} from '../interfaces/event-aggregator';
+import {ITransitionService} from '../services/transition-service';
+import {IStorageService} from '../services/storage-service';
+
+@customAttribute('bleet-menu')
+export class BleetMenuCustomAttribute
+{
+    private disposable?: IDisposable;
+    private disposableOverlay?: IDisposable;
+    private closeButton?: HTMLButtonElement;
+    private toggleButtons?: NodeListOf<HTMLButtonElement>;
+    private sublists: Map<HTMLButtonElement, {list: HTMLElement, svg: HTMLElement}> = new Map();
+    private isOpen: boolean = false;
+    public constructor(
+        private readonly logger: ILogger = resolve(ILogger).scopeTo('bleet-menu'),
+        private readonly ea:IEventAggregator = resolve(IEventAggregator),
+        private readonly element: HTMLElement = resolve(INode) as HTMLElement,
+        private readonly platform: IPlatform = resolve(IPlatform),
+        private readonly transitionService: ITransitionService = resolve(ITransitionService),
+        private readonly storageService: IStorageService = resolve(IStorageService),
+    ) {
+        this.logger.trace('constructor')
+    }
+
+    public attaching()
+    {
+        this.logger.trace('attaching');
+        this.closeButton = this.element.querySelector('[data-menu=close]') as HTMLButtonElement;
+        this.toggleButtons = this.element.querySelectorAll('[data-menu^="toggle-button"]');
+        this.initMenuButtons();
+    }
+    public attached()
+    {
+        this.logger.trace('attached');
+        this.disposable = this.ea.subscribe(Channels.Menu, this.onMenuEvent);
+        this.disposableOverlay = this.ea.subscribe(Channels.OverlayStatus, this.onOverlayStatus);
+        this.closeButton?.addEventListener('click', this.onClickClose);
+        this.element.addEventListener('click', this.onClickToggleButtons)
+    }
+
+    public detached()
+    {
+        this.logger.trace('detached');
+        this.closeButton?.removeEventListener('click', this.onClickClose);
+        this.element.removeEventListener('click', this.onClickToggleButtons)
+        this.disposableOverlay?.dispose();
+        this.disposable?.dispose();
+    }
+    public dispose() {
+        this.logger.trace('dispose');
+        this.disposableOverlay?.dispose();
+        this.disposable?.dispose();
+    }
+
+    private open(fromOverlay: boolean = false) {
+        if (!this.isOpen) {
+            this.logger.trace('open');
+            this.isOpen = true;
+            this.transitionService.run(this.element, (element: HTMLElement) => {
+                if (!fromOverlay) {
+                    this.ea.publish(Channels.Overlay, <IOverlay>{action: OverlayAction.Open});
+                }
+                this.ea.publish(Channels.MenuStatus, <IMenuStatus>{status: MenuStatus.Opening});
+                element.classList.add('translate-x-0');
+                element.classList.remove('-translate-x-full');
+                element.ariaHidden = 'false';
+            }, (element: HTMLElement) => {
+                this.ea.publish(Channels.MenuStatus, <IMenuStatus>{status: MenuStatus.Opened});
+            });
+        }
+    }
+    private close(fromOverlay: boolean = false) {
+        if (this.isOpen) {
+            this.logger.trace('close');
+            this.isOpen = false;
+            this.transitionService.run(this.element, (element: HTMLElement) => {
+                this.ea.publish(Channels.MenuStatus, <IMenuStatus>{status: MenuStatus.Closing});
+                if (!fromOverlay) {
+                    this.ea.publish(Channels.Overlay, <IOverlay>{action: OverlayAction.Close});
+                }
+                element.classList.add('-translate-x-full');
+                element.classList.remove('translate-x-0');
+                element.ariaHidden = 'true';
+            }, (element: HTMLElement) => {
+                this.ea.publish(Channels.MenuStatus, <IMenuStatus>{status: MenuStatus.Closed});
+            });
+        }
+    }
+
+    private onClickClose = (event: MouseEvent) => {
+        this.logger.trace('onClickClose', event);
+        event.preventDefault();
+        this.close();
+    }
+
+    private onClickToggleButtons = (event: MouseEvent) => {
+        const target = event.target as HTMLElement;
+        const btn = target.closest('[data-menu^="toggle-button"]') as HTMLButtonElement;
+        if (btn && btn.matches('[data-menu^="toggle-button"]')) {
+            event.preventDefault();
+            this.toggleButton(btn);
+        }
+    }
+
+    private initMenuButtons() {
+        this.logger.trace('initMenu');
+        this.toggleButtons?.forEach((btn: HTMLButtonElement) => {
+            if (!this.sublists.has(btn)) {
+                const id = btn.dataset.menu?.replace('toggle-button-', '');
+                const isOpen = this.storageService.load(`toggle-list-${id}`, false);
+                const list = this.element.querySelector(`[data-menu="toggle-list-${id}"]`) as HTMLUListElement;
+                const svg = btn.querySelector('svg[data-menu=icon]') as HTMLElement;
+                this.sublists.set(btn, {list, svg});
+                if (!isOpen) {
+                    svg.classList.remove('rotate-180');
+                    list.classList.add('hidden');
+                    btn.ariaExpanded = 'false';
+                } else {
+                    svg.classList.add('rotate-180');
+                    list.classList.remove('hidden');
+                    btn.ariaExpanded = 'true';
+                }
+            }
+        });
+    }
+
+    private toggleButton(btn: HTMLButtonElement) {
+        if (this.sublists.has(btn)) {
+            const sublist = this.sublists.get(btn);
+            const id = btn.dataset.menu?.replace('toggle-button-', '');
+            if (sublist?.list.classList.contains('hidden')) {
+                sublist?.list.classList.remove('hidden');
+                sublist?.svg.classList.add('rotate-180');
+                btn.ariaExpanded = 'true';
+                this.storageService.save(`toggle-list-${id}`, true);
+            } else {
+                sublist?.list.classList.add('hidden');
+                sublist?.svg.classList.remove('rotate-180');
+                btn.ariaExpanded = 'false';
+                this.storageService.save(`toggle-list-${id}`, false);
+            }
+        }
+    }
+    private closeOtherButtons(except: HTMLButtonElement) {
+        this.sublists.forEach((value, key) => {
+            if (key !== except) {
+                const id = key.dataset.menu?.replace('toggle-button-', '');
+                this.storageService.save(`toggle-list-${id}`, false);
+                value.list.classList.add('hidden');
+                value.svg.classList.remove('rotate-180');
+            }
+        });
+    }
+    private onMenuEvent = (data: IMenu) => {
+        this.logger.trace('onMenuEvent', data);
+        if (data.action === MenuAction.Close) {
+            // this.element.classList.add('-translate-x-full');
+            this.logger.trace('Menu Close action received');
+            this.close();
+        } else if (data.action === MenuAction.Open) {
+            // this.element.classList.remove('-translate-x-full');
+            this.logger.trace('Menu Open action received');
+            this.open();
+        } else if (data.action === MenuAction.Toggle) {
+            // this.element.classList.toggle('-translate-x-full');
+            this.logger.trace('Menu Toggle action received');
+        }
+    }
+    private onOverlayStatus = (data: IOverlayStatus) => {
+        if (data.status === OverlayStatus.Closing) {
+            this.logger.trace('Overlay Close action received');
+            this.close(true);
+        } else {
+            this.logger.trace('onOverlayStatus unhandled', data);
+        }
+    }
+}

package/src/attributes/modal-trigger.ts

@@ -0,0 +1,53 @@
+import {bindable, customAttribute, IEventAggregator, ILogger, INode, resolve} from "aurelia";
+import {Channels, ModalAction} from '../enums/event-aggregator';
+import {IModal} from '../interfaces/event-aggregator';
+
+@customAttribute({ name: 'bleet-modal-trigger', defaultProperty: 'id' })
+export class BleetModalTriggerCustomAttribute {
+
+    @bindable id: string = '';
+    @bindable() url: string = '';
+    @bindable() color: string = 'primary';
+
+    public constructor(
+        private readonly logger: ILogger = resolve(ILogger).scopeTo('bleet-modal-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);
+    }
+    public dispose()
+    {
+        this.logger.trace('dispose');
+    }
+
+    private onClick = (event: Event): void => {
+        this.logger.trace('onClick', event);
+        event.preventDefault();
+
+        this.ea.publish(Channels.Modal, <IModal>{
+            action: ModalAction.Toggle,
+            id: this.id,
+            url: this.url,
+            color: this.color,
+        });
+    };
+
+}

package/src/attributes/pager.ts

@@ -0,0 +1,43 @@
+import {customAttribute, ILogger, INode, IPlatform, resolve} from "aurelia";
+
+
+@customAttribute('bleet-pager')
+export class BleetPagerCustomAttribute {
+
+    private select?: HTMLSelectElement;
+    public constructor(
+        private readonly logger: ILogger = resolve(ILogger).scopeTo('bleet-pager'),
+        private readonly element: HTMLElement = resolve(INode) as HTMLElement,
+        private readonly p: IPlatform = resolve(IPlatform),
+    ) {
+        this.logger.trace('constructor')
+    }
+
+    public attaching()
+    {
+        this.logger.trace('attaching');
+        this.select = this.element.querySelector('[data-pager="select"]') as HTMLSelectElement;
+    }
+
+    public attached()
+    {
+        this.logger.trace('attached');
+        this.select?.addEventListener('change', this.onChangeSelect);
+    }
+
+    public detached()
+    {
+        this.logger.trace('detached');
+        this.select?.removeEventListener('change', this.onChangeSelect);
+    }
+
+    private onChangeSelect = (event: Event) => {
+        this.logger.trace('onChangeSelect', event);
+        const pageNumber = this.select?.value;
+        const link = this.element.querySelector(`[data-pager="page-${pageNumber}"]`) as HTMLElement;
+
+        if (link) {
+            link.click();
+        }
+    }
+}