@coreui/angular
Version:
CoreUI Components Library for Angular
96 lines • 13.2 kB
JavaScript
import { booleanAttribute, computed, DestroyRef, Directive, effect, ElementRef, inject, Input, input, signal, untracked } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { fromEvent, merge, takeWhile } from 'rxjs';
import { filter, tap } from 'rxjs/operators';
import { TabsService } from '../tabs.service';
import * as i0 from "@angular/core";
export class TabDirective {
constructor() {
this.#destroyRef = inject(DestroyRef);
this.#elementRef = inject(ElementRef);
this.#tabsService = inject(TabsService);
this.#disabled = signal(false);
this.attrDisabled = computed(() => this.#disabled() || null);
/**
* Item key.
* @type string | number
* @required
*/
this.itemKey = input.required();
/**
* Element id attribute
* @type string
* @default undefined
*/
this.id = input();
/**
* aria-controls attribute
* @type string
* @default undefined
*/
this.ariaControls = input(undefined, {
alias: 'aria-controls'
});
this.isActive = computed(() => !this.#disabled() && this.#tabsService.activeItemKey() === this.itemKey());
this.hostClasses = computed(() => ({
'nav-link': true,
active: this.isActive(),
disabled: this.#disabled()
}));
this.propId = computed(() => this.id() ?? `${this.#tabsService.id()}-tab-${this.itemKey()}`);
this.attrAriaControls = computed(() => this.ariaControls() ?? `${this.#tabsService.id()}-panel-${this.itemKey()}`);
this.disabledEffect = effect(() => {
if (!this.#disabled()) {
const click$ = fromEvent(this.#elementRef.nativeElement, 'click');
const focusIn$ = fromEvent(this.#elementRef.nativeElement, 'focusin');
merge(focusIn$, click$)
.pipe(filter(($event) => !this.#disabled()), tap(($event) => {
this.#tabsService.activeItemKey.set(untracked(this.itemKey));
}), takeWhile(() => !this.#disabled()), takeUntilDestroyed(this.#destroyRef))
.subscribe();
}
}, { allowSignalWrites: true });
}
#destroyRef;
#elementRef;
#tabsService;
/**
* Disabled attribute
* @type boolean
* @default false
*/
set disabled(value) {
this.#disabled.set(value);
}
get disabled() {
return this.#disabled();
}
#disabled;
focus(origin) {
this.#elementRef.nativeElement.focus();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: TabDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.12", type: TabDirective, isStandalone: true, selector: "button[cTab]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, itemKey: { classPropertyName: "itemKey", publicName: "itemKey", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ariaControls: { classPropertyName: "ariaControls", publicName: "aria-controls", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button", "role": "tab" }, properties: { "class": "hostClasses()", "attr.aria-selected": "isActive()", "attr.aria-controls": "attrAriaControls()", "attr.disabled": "attrDisabled() || null", "id": "propId()", "tabindex": "isActive() ? 0 : -1" } }, exportAs: ["cTab"], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: TabDirective, decorators: [{
type: Directive,
args: [{
exportAs: 'cTab',
selector: 'button[cTab]',
standalone: true,
host: {
'[class]': 'hostClasses()',
type: 'button',
role: 'tab',
'[attr.aria-selected]': 'isActive()',
'[attr.aria-controls]': 'attrAriaControls()',
'[attr.disabled]': 'attrDisabled() || null',
'[id]': 'propId()',
'[tabindex]': 'isActive() ? 0 : -1'
}
}]
}], propDecorators: { disabled: [{
type: Input,
args: [{ transform: booleanAttribute }]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFiLmRpcmVjdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NvcmV1aS1hbmd1bGFyL3NyYy9saWIvdGFicy0yL3RhYi90YWIuZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUNBLE9BQU8sRUFDTCxnQkFBZ0IsRUFDaEIsUUFBUSxFQUNSLFVBQVUsRUFDVixTQUFTLEVBQ1QsTUFBTSxFQUNOLFVBQVUsRUFDVixNQUFNLEVBQ04sS0FBSyxFQUNMLEtBQUssRUFFTCxNQUFNLEVBQ04sU0FBUyxFQUNWLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxNQUFNLDRCQUE0QixDQUFDO0FBQ2hFLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLFNBQVMsRUFBRSxNQUFNLE1BQU0sQ0FBQztBQUNuRCxPQUFPLEVBQUUsTUFBTSxFQUFFLEdBQUcsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQzdDLE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQzs7QUFpQjlDLE1BQU0sT0FBTyxZQUFZO0lBZnpCO1FBZ0JXLGdCQUFXLEdBQUcsTUFBTSxDQUFDLFVBQVUsQ0FBQyxDQUFDO1FBQ2pDLGdCQUFXLEdBQUcsTUFBTSxDQUFDLFVBQVUsQ0FBQyxDQUFDO1FBQ2pDLGlCQUFZLEdBQUcsTUFBTSxDQUFDLFdBQVcsQ0FBQyxDQUFDO1FBZ0JuQyxjQUFTLEdBQUcsTUFBTSxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQzFCLGlCQUFZLEdBQUcsUUFBUSxDQUFDLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQyxTQUFTLEVBQUUsSUFBSSxJQUFJLENBQUMsQ0FBQztRQUVqRTs7OztXQUlHO1FBQ00sWUFBTyxHQUFpQyxLQUFLLENBQUMsUUFBUSxFQUFtQixDQUFDO1FBRW5GOzs7O1dBSUc7UUFDTSxPQUFFLEdBQW9DLEtBQUssRUFBVSxDQUFDO1FBRS9E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b0JBQ2hCLElBQUksRUFBRTt3QkFDSixTQUFTLEVBQUUsZUFBZTt3QkFDMUIsSUFBSSxFQUFFLFFBQVE7d0JBQ2QsSUFBSSxFQUFFLEtBQUs7d0JBQ1gsc0JBQXNCLEVBQUUsWUFBWTt3QkFDcEMsc0JBQXNCLEVBQUUsb0JBQW9CO3dCQUM1QyxpQkFBaUIsRUFBRSx3QkFBd0I7d0JBQzNDLE1BQU0sRUFBRSxVQUFVO3dCQUNsQixZQUFZLEVBQUUscUJBQXFCO3FCQUNwQztpQkFDRjs4QkFZSyxRQUFRO3NCQURYLEtBQUs7dUJBQUMsRUFBRSxTQUFTLEVBQUUsZ0JBQWdCLEVBQUUiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBGb2N1c2FibGVPcHRpb24sIEZvY3VzT3JpZ2luIH0gZnJvbSAnQGFuZ3VsYXIvY2RrL2ExMXknO1xuaW1wb3J0IHtcbiAgYm9vbGVhbkF0dHJpYnV0ZSxcbiAgY29tcHV0ZWQsXG4gIERlc3Ryb3lSZWYsXG4gIERpcmVjdGl2ZSxcbiAgZWZmZWN0LFxuICBFbGVtZW50UmVmLFxuICBpbmplY3QsXG4gIElucHV0LFxuICBpbnB1dCxcbiAgSW5wdXRTaWduYWwsXG4gIHNpZ25hbCxcbiAgdW50cmFja2VkXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgdGFrZVVudGlsRGVzdHJveWVkIH0gZnJvbSAnQGFuZ3VsYXIvY29yZS9yeGpzLWludGVyb3AnO1xuaW1wb3J0IHsgZnJvbUV2ZW50LCBtZXJnZSwgdGFrZVdoaWxlIH0gZnJvbSAncnhqcyc7XG5pbXBvcnQgeyBmaWx0ZXIsIHRhcCB9IGZyb20gJ3J4anMvb3BlcmF0b3JzJztcbmltcG9ydCB7IFRhYnNTZXJ2aWNlIH0gZnJvbSAnLi4vdGFicy5zZXJ2aWNlJztcblxuQERpcmVjdGl2ZSh7XG4gIGV4cG9ydEFzOiAnY1RhYicsXG4gIHNlbGVjdG9yOiAnYnV0dG9uW2NUYWJdJyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgaG9zdDoge1xuICAgICdbY2xhc3NdJzogJ2hvc3RDbGFzc2VzKCknLFxuICAgIHR5cGU6ICdidXR0b24nLFxuICAgIHJvbGU6ICd0YWInLFxuICAgICdbYXR0ci5hcmlhLXNlbGVjdGVkXSc6ICdpc0FjdGl2ZSgpJyxcbiAgICAnW2F0dHIuYXJpYS1jb250cm9sc10nOiAnYXR0ckFyaWFDb250cm9scygpJyxcbiAgICAnW2F0dHIuZGlzYWJsZWRdJzogJ2F0dHJEaXNhYmxlZCgpIHx8IG51bGwnLFxuICAgICdbaWRdJzogJ3Byb3BJZCgpJyxcbiAgICAnW3RhYmluZGV4XSc6ICdpc0FjdGl2ZSgpID8gMCA6IC0xJ1xuICB9XG59KVxuZXhwb3J0IGNsYXNzIFRhYkRpcmVjdGl2ZSBpbXBsZW1lbnRzIEZvY3VzYWJsZU9wdGlvbiB7XG4gIHJlYWRvbmx5ICNkZXN0cm95UmVmID0gaW5qZWN0KERlc3Ryb3lSZWYpO1xuICByZWFkb25seSAjZWxlbWVudFJlZiA9IGluamVjdChFbGVtZW50UmVmKTtcbiAgcmVhZG9ubHkgI3RhYnNTZXJ2aWNlID0gaW5qZWN0KFRhYnNTZXJ2aWNlKTtcblxuICAvKipcbiAgICogRGlzYWJsZWQgYXR0cmlidXRlXG4gICAqIEB0eXBlIGJvb2xlYW5cbiAgICogQGRlZmF1bHQgZmFsc2VcbiAgICovXG4gIEBJbnB1dCh7IHRyYW5zZm9ybTogYm9vbGVhbkF0dHJpYnV0ZSB9KVxuICBzZXQgZGlzYWJsZWQodmFsdWU6IGJvb2xlYW4pIHtcbiAgICB0aGlzLiNkaXNhYmxlZC5zZXQodmFsdWUpO1xuICB9XG5cbiAgZ2V0IGRpc2FibGVkKCkge1xuICAgIHJldHVybiB0aGlzLiNkaXNhYmxlZCgpO1xuICB9XG5cbiAgcmVhZG9ubHkgI2Rpc2FibGVkID0gc2lnbmFsKGZhbHNlKTtcbiAgcmVhZG9ubHkgYXR0ckRpc2FibGVkID0gY29tcHV0ZWQoKCkgPT4gdGhpcy4jZGlzYWJsZWQoKSB8fCBudWxsKTtcblxuICAvKipcbiAgICogSXRlbSBrZXkuXG4gICAqIEB0eXBlIHN0cmluZyB8IG51bWJlclxuICAgKiBAcmVxdWlyZWRcbiAgICovXG4gIHJlYWRvbmx5IGl0ZW1LZXk6IElucHV0U2lnbmFsPHN0cmluZyB8IG51bWJlcj4gPSBpbnB1dC5yZXF1aXJlZDxzdHJpbmcgfCBudW1iZXI+KCk7XG5cbiAgLyoqXG4gICAqIEVsZW1lbnQgaWQgYXR0cmlidXRlXG4gICAqIEB0eXBlIHN0cmluZ1xuICAgKiBAZGVmYXVsdCB1bmRlZmluZWRcbiAgICovXG4gIHJlYWRvbmx5IGlkOiBJbnB1dFNpZ25hbDxzdHJpbmcgfCB1bmRlZmluZWQ+ID0gaW5wdXQ8c3RyaW5nPigpO1xuXG4gIC8qKlxuICAgKiBhcmlhLWNvbnRyb2xzIGF0dHJpYnV0ZVxuICAgKiBAdHlwZSBzdHJpbmdcbiAgICogQGRlZmF1bHQgdW5kZWZpbmVkXG4gICAqL1xuICByZWFkb25seSBhcmlhQ29udHJvbHM6IElucHV0U2lnbmFsPHN0cmluZyB8IHVuZGVmaW5lZD4gPSBpbnB1dDxzdHJpbmcgfCB1bmRlZmluZWQ+KHVuZGVmaW5lZCwge1xuICAgIGFsaWFzOiAnYXJpYS1jb250cm9scydcbiAgfSk7XG5cbiAgcmVhZG9ubHkgaXNBY3RpdmUgPSBjb21wdXRlZDxib29sZWFuPihcbiAgICAoKSA9PiAhdGhpcy4jZGlzYWJsZWQoKSAmJiB0aGlzLiN0YWJzU2VydmljZS5hY3RpdmVJdGVtS2V5KCkgPT09IHRoaXMuaXRlbUtleSgpXG4gICk7XG5cbiAgcmVhZG9ubHkgaG9zdENsYXNzZXMgPSBjb21wdXRlZCgoKSA9PiAoe1xuICAgICduYXYtbGluayc6IHRydWUsXG4gICAgYWN0aXZlOiB0aGlzLmlzQWN0aXZlKCksXG4gICAgZGlzYWJsZWQ6IHRoaXMuI2Rpc2FibGVkKClcbiAgfSkpO1xuXG4gIHJlYWRvbmx5IHByb3BJZCA9IGNvbXB1dGVkKCgpID0+IHRoaXMuaWQoKSA/PyBgJHt0aGlzLiN0YWJzU2VydmljZS5pZCgpfS10YWItJHt0aGlzLml0ZW1LZXkoKX1gKTtcblxuICByZWFkb25seSBhdHRyQXJpYUNvbnRyb2xzID0gY29tcHV0ZWQoXG4gICAgKCkgPT4gdGhpcy5hcmlhQ29udHJvbHMoKSA/PyBgJHt0aGlzLiN0YWJzU2VydmljZS5pZCgpfS1wYW5lbC0ke3RoaXMuaXRlbUtleSgpfWBcbiAgKTtcblxuICBkaXNhYmxlZEVmZmVjdCA9IGVmZmVjdChcbiAgICAoKSA9PiB7XG4gICAgICBpZiAoIXRoaXMuI2Rpc2FibGVkKCkpIHtcbiAgICAgICAgY29uc3QgY2xpY2skID0gZnJvbUV2ZW50PE1vdXNlRXZlbnQ+KHRoaXMuI2VsZW1lbnRSZWYubmF0aXZlRWxlbWVudCwgJ2NsaWNrJyk7XG4gICAgICAgIGNvbnN0IGZvY3VzSW4kID0gZnJvbUV2ZW50PEZvY3VzRXZlbnQ+KHRoaXMuI2VsZW1lbnRSZWYubmF0aXZlRWxlbWVudCwgJ2ZvY3VzaW4nKTtcblxuICAgICAgICBtZXJnZShmb2N1c0luJCwgY2xpY2skKVxuICAgICAgICAgIC5waXBlKFxuICAgICAgICAgICAgZmlsdGVyKCgkZXZlbnQpID0+ICF0aGlzLiNkaXNhYmxlZCgpKSxcbiAgICAgICAgICAgIHRhcCgoJGV2ZW50KSA9PiB7XG4gICAgICAgICAgICAgIHRoaXMuI3RhYnNTZXJ2aWNlLmFjdGl2ZUl0ZW1LZXkuc2V0KHVudHJhY2tlZCh0aGlzLml0ZW1LZXkpKTtcbiAgICAgICAgICAgIH0pLFxuICAgICAgICAgICAgdGFrZVdoaWxlKCgpID0+ICF0aGlzLiNkaXNhYmxlZCgpKSxcbiAgICAgICAgICAgIHRha2VVbnRpbERlc3Ryb3llZCh0aGlzLiNkZXN0cm95UmVmKVxuICAgICAgICAgIClcbiAgICAgICAgICAuc3Vic2NyaWJlKCk7XG4gICAgICB9XG4gICAgfSxcbiAgICB7IGFsbG93U2lnbmFsV3JpdGVzOiB0cnVlIH1cbiAgKTtcblxuICBmb2N1cyhvcmlnaW4/OiBGb2N1c09yaWdpbik6IHZvaWQge1xuICAgIHRoaXMuI2VsZW1lbnRSZWYubmF0aXZlRWxlbWVudC5mb2N1cygpO1xuICB9XG59XG4iXX0=