@coreui/angular
Version:
CoreUI Components Library for Angular
93 lines • 14.3 kB
JavaScript
import { FocusKeyManager } from '@angular/cdk/a11y';
import { Component, computed, contentChildren, DestroyRef, effect, HostListener, inject, input, untracked } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { tap } from 'rxjs/operators';
import { TabDirective } from '../tab/tab.directive';
import { TabsService } from '../tabs.service';
import * as i0 from "@angular/core";
export class TabsListComponent {
constructor() {
this.#destroyRef = inject(DestroyRef);
this.tabsService = inject(TabsService);
/**
* Specify a layout type for component.
* @type 'fill' | 'justified' | undefined
* @default undefined
*/
this.layout = input();
/**
* Set the variant to tabs, pills or underline.
* @type 'pills' | 'tabs' | 'underline' | 'underline-border' | undefined
* @default undefined
*/
this.variant = input();
/**
* Set the role to tab list.
* @default 'tablist'
*/
this.role = input('tablist');
this.hostClasses = computed(() => ({
nav: true,
[`nav-${this.layout()}`]: this.layout(),
[`nav-${this.variant()}`]: this.variant()
}));
this.tabs = contentChildren(TabDirective);
this.tabsEffect = effect(() => {
if (this.tabs().length === 0) {
return;
}
this.#focusKeyManager = new FocusKeyManager(this.tabs())
.skipPredicate((tab) => tab.disabled === true)
.withHorizontalOrientation('ltr')
.withHomeAndEnd()
.withWrap();
this.#focusKeyManager.change
.pipe(tap((value) => {
this.tabsService.activeItemKey.set(this.#focusKeyManager.activeItem?.itemKey());
this.tabsService.activeItem.set(this.#focusKeyManager.activeItem);
}), takeUntilDestroyed(this.#destroyRef))
.subscribe();
const activeItem = this.tabs().find((tab) => untracked(tab.isActive)) ?? this.tabs().find((tab) => !tab.disabled);
const activeItemIndex = this.tabs().findIndex((tab) => tab === activeItem);
this.#focusKeyManager?.updateActiveItem(activeItemIndex < 0 ? 0 : activeItemIndex);
this.tabsService.activeItemKey.set(this.#focusKeyManager.activeItem?.itemKey());
this.tabsService.activeItem.set(this.#focusKeyManager.activeItem);
}, { allowSignalWrites: true });
this.tabsServiceEffect = effect(() => {
const activeItemIndex = this.tabs().findIndex((tab) => untracked(tab.isActive) && untracked(tab.itemKey) === this.tabsService.activeItemKey());
this.#focusKeyManager?.updateActiveItem(activeItemIndex < 0 ? 0 : activeItemIndex);
}, { allowSignalWrites: true });
}
#destroyRef;
#focusKeyManager;
onKeydown($event) {
if (['ArrowLeft', 'ArrowRight'].includes($event.key)) {
this.#focusKeyManager.onKeydown($event);
return;
}
if (['Tab'].includes($event.key)) {
this.#focusKeyManager?.tabOut.next();
}
return;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: TabsListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.12", type: TabsListComponent, isStandalone: true, selector: "c-tabs-list", inputs: { layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "attr.role": "role()", "class": "hostClasses()" } }, queries: [{ propertyName: "tabs", predicate: TabDirective, isSignal: true }], exportAs: ["cTabsList"], ngImport: i0, template: '<ng-content />', isInline: true }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: TabsListComponent, decorators: [{
type: Component,
args: [{
exportAs: 'cTabsList',
selector: 'c-tabs-list',
standalone: true,
imports: [],
template: '<ng-content />',
host: {
'[attr.role]': 'role()',
'[class]': 'hostClasses()'
}
}]
}], propDecorators: { onKeydown: [{
type: HostListener,
args: ['keydown', ['$event']]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFicy1saXN0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NvcmV1aS1hbmd1bGFyL3NyYy9saWIvdGFicy0yL3RhYnMtbGlzdC90YWJzLWxpc3QuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQztBQUNwRCxPQUFPLEVBQ0wsU0FBUyxFQUNULFFBQVEsRUFDUixlQUFlLEVBQ2YsVUFBVSxFQUNWLE1BQU0sRUFDTixZQUFZLEVBQ1osTUFBTSxFQUNOLEtBQUssRUFFTCxTQUFTLEVBQ1YsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0sNEJBQTRCLENBQUM7QUFDaEUsT0FBTyxFQUFFLEdBQUcsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQ3JDLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQztBQUNwRCxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0saUJBQWlCLENBQUM7O0FBYTlDLE1BQU0sT0FBTyxpQkFBaUI7SUFYOUI7UUFZVyxnQkFBVyxHQUFHLE1BQU0sQ0FBQyxVQUFVLENBQUMsQ0FBQztRQUNqQyxnQkFBVyxHQUFHLE1BQU0sQ0FBQyxXQUFXLENBQUMsQ0FBQztRQUUzQzs7OztXQUlHO1FBQ00sV0FBTSxHQUFrRCxLQUFLLEVBQUUsQ0FBQztRQUV6RTs7OztXQUlHO1FBQ00sWUFBTyxHQUFpRixLQUFLLEVBQUUsQ0FBQztRQUV6Rzs7O1dBR0c7UUFDTSxTQUFJLEdBQUcsS0FBSyxDQUFDLFNBQVMsQ0FBQyxDQUFDO1FBRXhCLGdCQUFXLEdBQUcsUUFBUSxDQUFDLEdBQUcsRUFBRSxDQUFDLENBQUM7WUFDckMsR0FBRyxFQUFFLElBQUk7WUFDVCxDQUFDLE9BQU8sSUFBSSxDQUFDLE1BQU0sRUFBRSxFQUFFLENBQUMsRUFBRSxJ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QUMsQ0FBQztRQUNyRixDQUFDLEVBQ0QsRUFBRSxpQkFBaUIsRUFBRSxJQUFJLEVBQUUsQ0FDNUIsQ0FBQztLQWFIO0lBbkZVLFdBQVcsQ0FBc0I7SUE4QjFDLGdCQUFnQixDQUFpQztJQTJDakQsU0FBUyxDQUFDLE1BQVc7UUFDbkIsSUFBSSxDQUFDLFdBQVcsRUFBRSxZQUFZLENBQUMsQ0FBQyxRQUFRLENBQUMsTUFBTSxDQUFDLEdBQUcsQ0FBQyxFQUFFLENBQUM7WUFDckQsSUFBSSxDQUFDLGdCQUFnQixDQUFDLFNBQVMsQ0FBQyxNQUFNLENBQUMsQ0FBQztZQUN4QyxPQUFPO1FBQ1QsQ0FBQztRQUNELElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQyxRQUFRLENBQUMsTUFBTSxDQUFDLEdBQUcsQ0FBQyxFQUFFLENBQUM7WUFDakMsSUFBSSxDQUFDLGdCQUFnQixFQUFFLE1BQU0sQ0FBQyxJQUFJLEVBQUUsQ0FBQztRQUN2QyxDQUFDO1FBQ0QsT0FBTztJQUNULENBQUM7K0dBbkZVLGlCQUFpQjttR0FBakIsaUJBQWlCLGdsQkE4QkksWUFBWSxzRUFwQ2xDLGdCQUFnQjs7NEZBTWYsaUJBQWlCO2tCQVg3QixTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxXQUFXO29CQUNyQixRQUFRLEVBQUUsYUFBYTtvQkFDdkIsVUFBVSxFQUFFLElBQUk7b0JBQ2hCLE9BQU8sRUFBRSxFQUFFO29CQUNYLFFBQVEsRUFBRSxnQkFBZ0I7b0JBQzFCLElBQUksRUFBRTt3QkFDSixhQUFhLEVBQUUsUUFBUTt3QkFDdkIsU0FBUyxFQUFFLGVBQWU7cUJBQzNCO2lCQUNGOzhCQTJFQyxTQUFTO3NCQURSLFlBQVk7dUJBQUMsU0FBUyxFQUFFLENBQUMsUUFBUSxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgRm9jdXNLZXlNYW5hZ2VyIH0gZnJvbSAnQGFuZ3VsYXIvY2RrL2ExMXknO1xuaW1wb3J0IHtcbiAgQ29tcG9uZW50LFxuICBjb21wdXRlZCxcbiAgY29udGVudENoaWxkcmVuLFxuICBEZXN0cm95UmVmLFxuICBlZmZlY3QsXG4gIEhvc3RMaXN0ZW5lcixcbiAgaW5qZWN0LFxuICBpbnB1dCxcbiAgSW5wdXRTaWduYWwsXG4gIHVudHJhY2tlZFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IHRha2VVbnRpbERlc3Ryb3llZCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUvcnhqcy1pbnRlcm9wJztcbmltcG9ydCB7IHRhcCB9IGZyb20gJ3J4anMvb3BlcmF0b3JzJztcbmltcG9ydCB7IFRhYkRpcmVjdGl2ZSB9IGZyb20gJy4uL3RhYi90YWIuZGlyZWN0aXZlJztcbmltcG9ydCB7IFRhYnNTZXJ2aWNlIH0gZnJvbSAnLi4vdGFicy5zZXJ2aWNlJztcblxuQENvbXBvbmVudCh7XG4gIGV4cG9ydEFzOiAnY1RhYnNMaXN0JyxcbiAgc2VsZWN0b3I6ICdjLXRhYnMtbGlzdCcsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtdLFxuICB0ZW1wbGF0ZTogJzxuZy1jb250ZW50IC8+JyxcbiAgaG9zdDoge1xuICAgICdbYXR0ci5yb2xlXSc6ICdyb2xlKCknLFxuICAgICdbY2xhc3NdJzogJ2hvc3RDbGFzc2VzKCknXG4gIH1cbn0pXG5leHBvcnQgY2xhc3MgVGFic0xpc3RDb21wb25lbnQge1xuICByZWFkb25seSAjZGVzdHJveVJlZiA9IGluamVjdChEZXN0cm95UmVmKTtcbiAgcmVhZG9ubHkgdGFic1NlcnZpY2UgPSBpbmplY3QoVGFic1NlcnZpY2UpO1xuXG4gIC8qKlxuICAgKiBTcGVjaWZ5IGEgbGF5b3V0IHR5cGUgZm9yIGNvbXBvbmVudC5cbiAgICogQHR5cGUgJ2ZpbGwnIHwgJ2p1c3RpZmllZCcgfCB1bmRlZmluZWRcbiAgICogQGRlZmF1bHQgdW5kZWZpbmVkXG4gICAqL1xuICByZWFkb25seSBsYXlvdXQ6IElucHV0U2lnbmFsPCdmaWxsJyB8ICdqdXN0aWZpZWQnIHwgdW5kZWZpbmVkPiA9IGlucHV0KCk7XG5cbiAgLyoqXG4gICAqIFNldCB0aGUgdmFyaWFudCB0byB0YWJzLCBwaWxscyBvciB1bmRlcmxpbmUuXG4gICAqIEB0eXBlICdwaWxscycgfCAndGFicycgfCAndW5kZXJsaW5lJyB8ICd1bmRlcmxpbmUtYm9yZGVyJyB8IHVuZGVmaW5lZFxuICAgKiBAZGVmYXVsdCB1bmRlZmluZWRcbiAgICovXG4gIHJlYWRvbmx5IHZhcmlhbnQ6IElucHV0U2lnbmFsPCdwaWxscycgfCAndGFicycgfCAndW5kZXJsaW5lJyB8ICd1bmRlcmxpbmUtYm9yZGVyJyB8IHVuZGVmaW5lZD4gPSBpbnB1dCgpO1xuXG4gIC8qKlxuICAgKiBTZXQgdGhlIHJvbGUgdG8gdGFiIGxpc3QuXG4gICAqIEBkZWZhdWx0ICd0YWJsaXN0J1xuICAgKi9cbiAgcmVhZG9ubHkgcm9sZSA9IGlucHV0KCd0YWJsaXN0Jyk7XG5cbiAgcmVhZG9ubHkgaG9zdENsYXNzZXMgPSBjb21wdXRlZCgoKSA9PiAoe1xuICAgIG5hdjogdHJ1ZSxcbiAgICBbYG5hdi0ke3RoaXMubGF5b3V0KCl9YF06IHRoaXMubGF5b3V0KCksXG4gICAgW2BuYXYtJHt0aGlzLnZhcmlhbnQoKX1gXTogdGhpcy52YXJpYW50KClcbiAgfSkpO1xuXG4gIHJlYWRvbmx5IHRhYnMgPSBjb250ZW50Q2hpbGRyZW4oVGFiRGlyZWN0aXZlKTtcbiAgI2ZvY3VzS2V5TWFuYWdlciE6IEZvY3VzS2V5TWFuYWdlcjxUYWJEaXJlY3RpdmU+O1xuXG4gIHJlYWRvbmx5IHRhYnNFZmZlY3QgPSBlZmZlY3QoXG4gICAgKCkgPT4ge1xuICAgICAgaWYgKHRoaXMudGFicygpLmxlbmd0aCA9PT0gMCkge1xuICAgICAgICByZXR1cm47XG4gICAgICB9XG4gICAgICB0aGlzLiNmb2N1c0tleU1hbmFnZXIgPSBuZXcgRm9jdXNLZXlNYW5hZ2VyKHRoaXMudGFicygpKVxuICAgICAgICAuc2tpcFByZWRpY2F0ZSgodGFiKSA9PiB0YWIuZGlzYWJsZWQgPT09IHRydWUpXG4gICAgICAgIC53aXRoSG9yaXpvbnRhbE9yaWVudGF0aW9uKCdsdHInKVxuICAgICAgICAud2l0aEhvbWVBbmRFbmQoKVxuICAgICAgICAud2l0aFdyYXAoKTtcblxuICAgICAgdGhpcy4jZm9jdXNLZXlNYW5hZ2VyLmNoYW5nZVxuICAgICAgICAucGlwZShcbiAgICAgICAgICB0YXAoKHZhbHVlKSA9PiB7XG4gICAgICAgICAgICB0aGlzLnRhYnNTZXJ2aWNlLmFjdGl2ZUl0ZW1LZXkuc2V0KHRoaXMuI2ZvY3VzS2V5TWFuYWdlci5hY3RpdmVJdGVtPy5pdGVtS2V5KCkpO1xuICAgICAgICAgICAgdGhpcy50YWJzU2VydmljZS5hY3RpdmVJdGVtLnNldCh0aGlzLiNmb2N1c0tleU1hbmFnZXIuYWN0aXZlSXRlbSk7XG4gICAgICAgICAgfSksXG4gICAgICAgICAgdGFrZVVudGlsRGVzdHJveWVkKHRoaXMuI2Rlc3Ryb3lSZWYpXG4gICAgICAgIClcbiAgICAgICAgLnN1YnNjcmliZSgpO1xuXG4gICAgICBjb25zdCBhY3RpdmVJdGVtID0gdGhpcy50YWJzKCkuZmluZCgodGFiKSA9PiB1bnRyYWNrZWQodGFiLmlzQWN0aXZlKSkgPz8gdGhpcy50YWJzKCkuZmluZCgodGFiKSA9PiAhdGFiLmRpc2FibGVkKTtcbiAgICAgIGNvbnN0IGFjdGl2ZUl0ZW1JbmRleCA9IHRoaXMudGFicygpLmZpbmRJbmRleCgodGFiKSA9PiB0YWIgPT09IGFjdGl2ZUl0ZW0pO1xuICAgICAgdGhpcy4jZm9jdXNLZXlNYW5hZ2VyPy51cGRhdGVBY3RpdmVJdGVtKGFjdGl2ZUl0ZW1JbmRleCA8IDAgPyAwIDogYWN0aXZlSXRlbUluZGV4KTtcbiAgICAgIHRoaXMudGFic1NlcnZpY2UuYWN0aXZlSXRlbUtleS5zZXQodGhpcy4jZm9jdXNLZXlNYW5hZ2VyLmFjdGl2ZUl0ZW0/Lml0ZW1LZXkoKSk7XG4gICAgICB0aGlzLnRhYnNTZXJ2aWNlLmFjdGl2ZUl0ZW0uc2V0KHRoaXMuI2ZvY3VzS2V5TWFuYWdlci5hY3RpdmVJdGVtKTtcbiAgICB9LFxuICAgIHsgYWxsb3dTaWduYWxXcml0ZXM6IHRydWUgfVxuICApO1xuXG4gIHRhYnNTZXJ2aWNlRWZmZWN0ID0gZWZmZWN0KFxuICAgICgpID0+IHtcbiAgICAgIGNvbnN0IGFjdGl2ZUl0ZW1JbmRleCA9IHRoaXMudGFicygpLmZpbmRJbmRleChcbiAgICAgICAgKHRhYikgPT4gdW50cmFja2VkKHRhYi5pc0FjdGl2ZSkgJiYgdW50cmFja2VkKHRhYi5pdGVtS2V5KSA9PT0gdGhpcy50YWJzU2VydmljZS5hY3RpdmVJdGVtS2V5KClcbiAgICAgICk7XG4gICAgICB0aGlzLiNmb2N1c0tleU1hbmFnZXI/LnVwZGF0ZUFjdGl2ZUl0ZW0oYWN0aXZlSXRlbUluZGV4IDwgMCA/IDAgOiBhY3RpdmVJdGVtSW5kZXgpO1xuICAgIH0sXG4gICAgeyBhbGxvd1NpZ25hbFdyaXRlczogdHJ1ZSB9XG4gICk7XG5cbiAgQEhvc3RMaXN0ZW5lcigna2V5ZG93bicsIFsnJGV2ZW50J10pXG4gIG9uS2V5ZG93bigkZXZlbnQ6IGFueSkge1xuICAgIGlmIChbJ0Fycm93TGVmdCcsICdBcnJvd1JpZ2h0J10uaW5jbHVkZXMoJGV2ZW50LmtleSkpIHtcbiAgICAgIHRoaXMuI2ZvY3VzS2V5TWFuYWdlci5vbktleWRvd24oJGV2ZW50KTtcbiAgICAgIHJldHVybjtcbiAgICB9XG4gICAgaWYgKFsnVGFiJ10uaW5jbHVkZXMoJGV2ZW50LmtleSkpIHtcbiAgICAgIHRoaXMuI2ZvY3VzS2V5TWFuYWdlcj8udGFiT3V0Lm5leHQoKTtcbiAgICB9XG4gICAgcmV0dXJuO1xuICB9XG59XG4iXX0=