KbqActionsPanel — всплывающая панель с массовыми действиями над выбранными объектами.

Панель массовых действий становится компактной, чтобы помещаться в доступную область экрана. Адаптивность реализована при помощи компонента KbqOverflowItems, который автоматически скрывает элементы с динамической адаптацией под ширину контейнера. Для отслеживания изменений размеров панели используется атрибут additionalResizeObserverTargets, который позволяет отслеживать изменения размеров указанных элементов на странице.

В компоненте есть возможность показать дополнительный счетчик. Принцип работы дополнительного счетчика можно настроить под нужды своего продукта. Например, если элементы списка сгруппированы, то счетчик внутри бейджа может показать общее количество элементов, а не только групп.

Панель обычно остается открытой после запуска действия. Иногда бывают такие команды, после которых в таблице не остается выбранных элементов, например «Удалить». В подобных случаях предусмотрена возможность закрывать панель.

По умолчанию клавиша ESCAPE закрывает KbqActionsPanel, но вы можете отключить это поведение с помощью свойства disableClose в KbqActionsPanelConfig.

Вы можете использовать опцию data для передачи информации компоненту:

import { inject } from '@angular/core';
import { KbqActionsPanel } from '@koobiq/components/actions-panel';

export class YourComponent {
    private readonly actionsPanel = inject(KbqActionsPanel, { self: true });

    openActionsPanel() {
        const actionsPanelRef = this.actionsPanel.open(YourActionsPanelComponent, {
            data: { name: 'koobiq' }
        });
    }
}

Доступ к данным в компоненте осуществляется при помощи KBQ_ACTIONS_PANEL_DATA токена:

import { Component, Inject } from '@angular/core';
import { KBQ_ACTIONS_PANEL_DATA } from '@koobiq/components/actions-panel';

@Component({
    selector: 'your-actions-panel',
    template: `
        <div>{{ data.name }}</div>
        <button (click)="actionsPanelRef.close()">close</button>
    `
})
export class YourActionsPanelComponent {
    readonly data = inject(KBQ_ACTIONS_PANEL_DATA);
    readonly actionsPanelRef = inject(KbqActionsPanelRef);
}

Если вы используете TemplateRef для содержимого панели действий, то data и actionsPanelRef доступны в шаблоне:

<ng-template let-data let-actionsPanelRef="actionsPanelRef">
    <div>{{ data.name }}</div>
    <button (click)="actionsPanelRef.close()">close</button>
</ng-template>

OverlayContainer определяет, где в DOM-дереве будет отображаться панель действий. По умолчанию - в теле документа (document.body).

Если вам необходимо отобразить панель действий в определенном элементе (например, внутри Sidebar), используйте опцию overlayContainer:

import { ElementRef, inject } from '@angular/core';
import { KbqActionsPanel } from '@koobiq/components/actions-panel';

export class YourComponent {
    private readonly actionsPanel = inject(KbqActionsPanel, { self: true });
    private readonly customContainer = inject(ElementRef);

    openActionsPanel() {
        const actionsPanelRef = this.actionsPanel.open(YourActionsPanelComponent, {
            overlayContainer: this.customContainer
        });
    }
}

import { Injectable } from '@angular/core';
import { OverlayContainer } from '@angular/cdk/overlay';

@Injectable()
export class CustomOverlayContainer extends OverlayContainer {}

@NgModule({
    providers: [{ provide: OverlayContainer, useClass: CustomOverlayContainer }]
})