@favian/headwind-ui
Version:
Headless UI for Angular - Styleless Angular components to integrate with Tailwind CSS
57 lines • 8.04 kB
JavaScript
import { Component, HostListener, Input } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import * as i0 from "@angular/core";
import * as i1 from "../../service/headwind-tab-group.service";
export class HeadwindTabButtonComponent {
constructor(_destroyRef, _headwindTabGroupService) {
this._destroyRef = _destroyRef;
this._headwindTabGroupService = _headwindTabGroupService;
this._selected = false;
}
get selected() {
return this._selected;
}
ngOnInit() {
// to wait until 'tabKey' is provided by input
this._headwindTabGroupService.tab$.pipe(takeUntilDestroyed(this._destroyRef)).subscribe((tabKey) => {
this._selected = tabKey === this.tabKey;
});
}
onHostClick() {
this._headwindTabGroupService.tab = this.tabKey;
}
onHostSpaceKeydown(event) {
event.stopPropagation();
event.preventDefault();
this._headwindTabGroupService.tab = this.tabKey;
}
onHostEnterKeydown(event) {
event.stopPropagation();
event.preventDefault();
this._headwindTabGroupService.tab = this.tabKey;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HeadwindTabButtonComponent, deps: [{ token: i0.DestroyRef }, { token: i1.HeadwindTabGroupService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: HeadwindTabButtonComponent, isStandalone: true, selector: "headwind-tab-button", inputs: { tabKey: "tabKey" }, host: { attributes: { "role": "button", "tabindex": "0" }, listeners: { "click": "onHostClick()", "keydown.space": "onHostSpaceKeydown($event)", "keydown.enter": "onHostEnterKeydown($event)" }, properties: { "class.headwind-selected": "selected" }, classAttribute: "headwind-tab-button" }, ngImport: i0, template: "<ng-content></ng-content>\r\n", styles: [""] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HeadwindTabButtonComponent, decorators: [{
type: Component,
args: [{ selector: 'headwind-tab-button', standalone: true, imports: [], host: {
role: 'button',
tabindex: '0',
class: 'headwind-tab-button',
['[class.headwind-selected]']: 'selected',
}, template: "<ng-content></ng-content>\r\n" }]
}], ctorParameters: () => [{ type: i0.DestroyRef }, { type: i1.HeadwindTabGroupService }], propDecorators: { tabKey: [{
type: Input,
args: [{ required: true }]
}], onHostClick: [{
type: HostListener,
args: ['click']
}], onHostSpaceKeydown: [{
type: HostListener,
args: ['keydown.space', ['$event']]
}], onHostEnterKeydown: [{
type: HostListener,
args: ['keydown.enter', ['$event']]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaGVhZHdpbmQtdGFiLWJ1dHRvbi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9oZWFkd2luZC11aS9zcmMvY29tcG9uZW50cy9oZWFkd2luZC10YWItZ3JvdXAvaGVhZHdpbmQtdGFiLWJ1dHRvbi1ncm91cC9oZWFkd2luZC10YWItYnV0dG9uL2hlYWR3aW5kLXRhYi1idXR0b24uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvaGVhZHdpbmQtdWkvc3JjL2NvbXBvbmVudHMvaGVhZHdpbmQtdGFiLWdyb3VwL2hlYWR3aW5kLXRhYi1idXR0b24tZ3JvdXAvaGVhZHdpbmQtdGFiLWJ1dHRvbi9oZWFkd2luZC10YWItYnV0dG9uLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQWMsWUFBWSxFQUFFLEtBQUssRUFBVSxNQUFNLGVBQWUsQ0FBQztBQUVuRixPQUFPLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQzs7O0FBZWhFLE1BQU0sT0FBTywwQkFBMEI7SUFHckMsWUFDbUIsV0FBdUIsRUFDdkIsd0JBQWlEO1FBRGpELGdCQUFXLEdBQVgsV0FBVyxDQUFZO1FBQ3ZCLDZCQUF3QixHQUF4Qix3QkFBd0IsQ0FBeUI7UUFHNUQsY0FBUyxHQUFHLEtBQUssQ0FBQztJQUZ2QixDQUFDO0lBSUosSUFBSSxRQUFRO1FBQ1YsT0FBTyxJQUFJLENBQUMsU0FBUyxDQUFDO0lBQ3hCLENBQUM7SUFFRCxRQUFRO1FBQ04sOENBQThDO1FBQzlDLElBQUksQ0FBQyx3QkFBd0IsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLGtCQUFrQixDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsQ0FBQyxDQUFDLFNBQVMsQ0FBQyxDQUFDLE1BQU0sRUFBRSxFQUFFO1lBQ2pHLElBQUksQ0FBQyxTQUFTLEdBQUcsTUFBTSxLQUFLLElBQUksQ0FBQyxNQUFNLENBQUM7UUFDMUMsQ0FBQyxDQUFDLENBQUM7SUFDTCxDQUFDO0lBR0QsV0FBVztRQUNULElBQUksQ0FBQyx3QkFBd0IsQ0FBQyxHQUFHLEdBQUcsSUFBSSxDQUFDLE1BQU0sQ0FBQztJQUNsRCxDQUFDO0lBR0Qsa0JBQWtCLENBQUMsS0FBWTtRQUM3QixLQUFLLENBQUMsZUFBZSxFQUFFLENBQUM7UUFDeEIsS0FBSyxDQUFDLGNBQWMsRUFBRSxDQUFDO1FBRXZCLElBQUksQ0FBQyx3QkFBd0IsQ0FBQyxHQUFHLEdBQUcsSUFBSSxDQUFDLE1BQU0sQ0FBQztJQUNsRCxDQUFDO0lBR0Qsa0JBQWtCLENBQUMsS0FBWTtRQUM3QixLQUFLLENBQUMsZUFBZSxFQUFFLENBQUM7UUFDeEIsS0FBSyxDQUFDLGNBQWMsRUFBRSxDQUFDO1FBRXZCLElBQUksQ0FBQyx3QkFBd0IsQ0FBQyxHQUFHLEdBQUcsSUFBSSxDQUFDLE1BQU0sQ0FBQztJQUNsRCxDQUFDOytHQXhDVSwwQkFBMEI7bUdBQTFCLDBCQUEwQiwrWUNqQnZDLCtCQUNBOzs0RkRnQmEsMEJBQTBCO2tCQWJ0QyxTQUFTOytCQUNFLHFCQUFxQixjQUNuQixJQUFJLFdBQ1AsRUFBRSxRQUdMO3dCQUNKLElBQUksRUFBRSxRQUFRO3dCQUNkLFFBQVEsRUFBRSxHQUFHO3dCQUNiLEtBQUssRUFBRSxxQkFBcUI7d0JBQzVCLENBQUMsMkJBQTJCLENBQUMsRUFBRSxVQUFVO3FCQUMxQztxSEFHMEIsTUFBTTtzQkFBaEMsS0FBSzt1QkFBQyxFQUFFLFFBQVEsRUFBRSxJQUFJLEVBQUU7Z0JBcUJ6QixXQUFXO3NCQURWLFlBQVk7dUJBQUMsT0FBTztnQkFNckIsa0JBQWtCO3NCQURqQixZQUFZO3VCQUFDLGVBQWUsRUFBRSxDQUFDLFFBQVEsQ0FBQztnQkFTekMsa0JBQWtCO3NCQURqQixZQUFZO3VCQUFDLGVBQWUsRUFBRSxDQUFDLFFBQVEsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRGVzdHJveVJlZiwgSG9zdExpc3RlbmVyLCBJbnB1dCwgT25Jbml0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IEhlYWR3aW5kVGFiR3JvdXBTZXJ2aWNlIH0gZnJvbSAnLi4vLi4vc2VydmljZS9oZWFkd2luZC10YWItZ3JvdXAuc2VydmljZSc7XHJcbmltcG9ydCB7IHRha2VVbnRpbERlc3Ryb3llZCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUvcnhqcy1pbnRlcm9wJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnaGVhZHdpbmQtdGFiLWJ1dHRvbicsXHJcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcclxuICBpbXBvcnRzOiBbXSxcclxuICB0ZW1wbGF0ZVVybDogJy4vaGVhZHdpbmQtdGFiLWJ1dHRvbi5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmw6ICcuL2hlYWR3aW5kLXRhYi1idXR0b24uY29tcG9uZW50LnNjc3MnLFxyXG4gIGhvc3Q6IHtcclxuICAgIHJvbGU6ICdidXR0b24nLFxyXG4gICAgdGFiaW5kZXg6ICcwJyxcclxuICAgIGNsYXNzOiAnaGVhZHdpbmQtdGFiLWJ1dHRvbicsXHJcbiAgICBbJ1tjbGFzcy5oZWFkd2luZC1zZWxlY3RlZF0nXTogJ3NlbGVjdGVkJyxcclxuICB9LFxyXG59KVxyXG5leHBvcnQgY2xhc3MgSGVhZHdpbmRUYWJCdXR0b25Db21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xyXG4gIEBJbnB1dCh7IHJlcXVpcmVkOiB0cnVlIH0pIHRhYktleSE6IGFueTtcclxuXHJcbiAgY29uc3RydWN0b3IoXHJcbiAgICBwcml2YXRlIHJlYWRvbmx5IF9kZXN0cm95UmVmOiBEZXN0cm95UmVmLFxyXG4gICAgcHJpdmF0ZSByZWFkb25seSBfaGVhZHdpbmRUYWJHcm91cFNlcnZpY2U6IEhlYWR3aW5kVGFiR3JvdXBTZXJ2aWNlLFxyXG4gICkge31cclxuXHJcbiAgcHJpdmF0ZSBfc2VsZWN0ZWQgPSBmYWxzZTtcclxuXHJcbiAgZ2V0IHNlbGVjdGVkKCk6IGJvb2xlYW4ge1xyXG4gICAgcmV0dXJuIHRoaXMuX3NlbGVjdGVkO1xyXG4gIH1cclxuXHJcbiAgbmdPbkluaXQoKSB7XHJcbiAgICAvLyB0byB3YWl0IHVudGlsICd0YWJLZXknIGlzIHByb3ZpZGVkIGJ5IGlucHV0XHJcbiAgICB0aGlzLl9oZWFkd2luZFRhYkdyb3VwU2VydmljZS50YWIkLnBpcGUodGFrZVVudGlsRGVzdHJveWVkKHRoaXMuX2Rlc3Ryb3lSZWYpKS5zdWJzY3JpYmUoKHRhYktleSkgPT4ge1xyXG4gICAgICB0aGlzLl9zZWxlY3RlZCA9IHRhYktleSA9PT0gdGhpcy50YWJLZXk7XHJcbiAgICB9KTtcclxuICB9XHJcblxyXG4gIEBIb3N0TGlzdGVuZXIoJ2NsaWNrJylcclxuICBvbkhvc3RDbGljaygpOiB2b2lkIHtcclxuICAgIHRoaXMuX2hlYWR3aW5kVGFiR3JvdXBTZXJ2aWNlLnRhYiA9IHRoaXMudGFiS2V5O1xyXG4gIH1cclxuXHJcbiAgQEhvc3RMaXN0ZW5lcigna2V5ZG93bi5zcGFjZScsIFsnJGV2ZW50J10pXHJcbiAgb25Ib3N0U3BhY2VLZXlkb3duKGV2ZW50OiBFdmVudCk6IHZvaWQge1xyXG4gICAgZXZlbnQuc3RvcFByb3BhZ2F0aW9uKCk7XHJcbiAgICBldmVudC5wcmV2ZW50RGVmYXVsdCgpO1xyXG5cclxuICAgIHRoaXMuX2hlYWR3aW5kVGFiR3JvdXBTZXJ2aWNlLnRhYiA9IHRoaXMudGFiS2V5O1xyXG4gIH1cclxuXHJcbiAgQEhvc3RMaXN0ZW5lcigna2V5ZG93bi5lbnRlcicsIFsnJGV2ZW50J10pXHJcbiAgb25Ib3N0RW50ZXJLZXlkb3duKGV2ZW50OiBFdmVudCk6IHZvaWQge1xyXG4gICAgZXZlbnQuc3RvcFByb3BhZ2F0aW9uKCk7XHJcbiAgICBldmVudC5wcmV2ZW50RGVmYXVsdCgpO1xyXG5cclxuICAgIHRoaXMuX2hlYWR3aW5kVGFiR3JvdXBTZXJ2aWNlLnRhYiA9IHRoaXMudGFiS2V5O1xyXG4gIH1cclxufVxyXG4iLCI8bmctY29udGVudD48L25nLWNvbnRlbnQ+XHJcbiJdfQ==