@favian/headwind-ui
Version:
Headless UI for Angular - Styleless Angular components to integrate with Tailwind CSS
85 lines • 11.6 kB
JavaScript
import { Component, HostListener, Input } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { combineLatest } from 'rxjs';
import * as i0 from "@angular/core";
import * as i1 from "../../service/headwind-select.service";
export class HeadwindOptionComponent {
constructor(_destroyRef, _elementRef, _headwindSelectService) {
this._destroyRef = _destroyRef;
this._elementRef = _elementRef;
this._headwindSelectService = _headwindSelectService;
this._focused = false;
this._selected = false;
this._headwindSelectService.focusOption.pipe(takeUntilDestroyed()).subscribe((value) => {
this._focused = this.value === value;
});
this._headwindSelectService.hoverOption.pipe(takeUntilDestroyed()).subscribe(() => {
this._focused = false;
});
}
get focused() {
return this._focused;
}
get selected() {
return this._selected;
}
/** Get displayable label. When label isn't set, it returns textContent of host element */
get label() {
return this._label || this._elementRef?.nativeElement.textContent || '';
}
/**
* Set label to display when option is selected
* @param value - Label value
*/
set label(value) {
this._label = value;
}
ngOnInit() {
// subscribe after init to wait 'value' input
combineLatest([this._headwindSelectService.multiple$, this._headwindSelectService.value$])
.pipe(takeUntilDestroyed(this._destroyRef))
.subscribe(([multiple, value]) => {
if (multiple) {
this._selected = (value || []).includes(this.value);
}
else {
this._selected = value === this.value;
}
});
}
onHostClick() {
this._headwindSelectService.selectOption.emit(this.value);
}
onHostMouseEnter() {
this._headwindSelectService.hoverOption.emit();
}
focus() {
this._headwindSelectService.focusOption.emit(this.value);
}
getBoundingClientRect() {
return this._elementRef?.nativeElement.getBoundingClientRect();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HeadwindOptionComponent, deps: [{ token: i0.DestroyRef }, { token: i0.ElementRef }, { token: i1.HeadwindSelectService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: HeadwindOptionComponent, isStandalone: true, selector: "headwind-option", inputs: { value: "value", label: "label" }, host: { attributes: { "role": "option" }, listeners: { "click": "onHostClick()", "mouseenter": "onHostMouseEnter()" }, properties: { "class.headwind-focused": "focused", "class.headwind-selected": "selected" }, classAttribute: "headwind-option" }, ngImport: i0, template: "<ng-content></ng-content>\r\n", styles: [""] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HeadwindOptionComponent, decorators: [{
type: Component,
args: [{ selector: 'headwind-option', standalone: true, imports: [], host: {
class: 'headwind-option',
role: 'option',
['[class.headwind-focused]']: 'focused',
['[class.headwind-selected]']: 'selected',
}, template: "<ng-content></ng-content>\r\n" }]
}], ctorParameters: () => [{ type: i0.DestroyRef }, { type: i0.ElementRef }, { type: i1.HeadwindSelectService }], propDecorators: { value: [{
type: Input,
args: [{ required: true }]
}], label: [{
type: Input
}], onHostClick: [{
type: HostListener,
args: ['click']
}], onHostMouseEnter: [{
type: HostListener,
args: ['mouseenter']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaGVhZHdpbmQtb3B0aW9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2hlYWR3aW5kLXVpL3NyYy9jb21wb25lbnRzL2hlYWR3aW5kLXNlbGVjdC9oZWFkd2luZC1vcHRpb25zLW92ZXJsYXkvaGVhZHdpbmQtb3B0aW9uL2hlYWR3aW5kLW9wdGlvbi5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9oZWFkd2luZC11aS9zcmMvY29tcG9uZW50cy9oZWFkd2luZC1zZWxlY3QvaGVhZHdpbmQtb3B0aW9ucy1vdmVybGF5L2hlYWR3aW5kLW9wdGlvbi9oZWFkd2luZC1vcHRpb24uY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBMEIsWUFBWSxFQUFFLEtBQUssRUFBVSxNQUFNLGVBQWUsQ0FBQztBQUUvRixPQUFPLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQztBQUNoRSxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sTUFBTSxDQUFDOzs7QUFlckMsTUFBTSxPQUFPLHVCQUF1QjtJQUlsQyxZQUNtQixXQUF1QixFQUN2QixXQUFvQyxFQUNwQyxzQkFBNkM7UUFGN0MsZ0JBQVcsR0FBWCxXQUFXLENBQVk7UUFDdkIsZ0JBQVcsR0FBWCxXQUFXLENBQXlCO1FBQ3BDLDJCQUFzQixHQUF0QixzQkFBc0IsQ0FBdUI7UUFXeEQsYUFBUSxHQUFHLEtBQUssQ0FBQztRQU1qQixjQUFTLEdBQUcsS0FBSyxDQUFDO1FBZnhCLElBQUksQ0FBQyxzQkFBc0IsQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLGtCQUFrQixFQUFFLENBQUMsQ0FBQyxTQUFTLENBQUMsQ0FBQyxLQUFLLEVBQUUsRUFBRTtZQUNyRixJQUFJLENBQUMsUUFBUSxHQUFHLElBQUksQ0FBQyxLQUFLLEtBQUssS0FBSyxDQUFDO1FBQ3ZDLENBQUMsQ0FBQyxDQUFDO1FBRUgsSUFBSSxDQUFDLHNCQUFzQixDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsa0JBQWtCLEVBQUUsQ0FBQyxDQUFDLFNBQVMsQ0FBQyxHQUFHLEVBQUU7WUFDaEYsSUFBSSxDQUFDLFFBQVEsR0FBRyxLQUFLLENBQUM7UUFDeEIsQ0FBQyxDQUFDLENBQUM7SUFDTCxDQUFDO0lBSUQsSUFBSSxPQUFPO1FBQ1QsT0FBTyxJQUFJLENBQUMsUUFBUSxDQUFDO0lBQ3ZCLENBQUM7SUFJRCxJQUFJLFFBQVE7UUFDVixPQUFPLElBQUksQ0FBQyxTQUFTLENBQUM7SUFDeEIsQ0FBQztJQUlELDBGQUEwRjtJQUMxRixJQUFJLEtBQUs7UUFDUCxPQUFPLElBQUksQ0FBQyxNQUFNLElBQUksSUFBSSxDQUFDLFdBQVcsRUFBRSxhQUFhLENBQUMsV0FBVyxJQUFJLEVBQUUsQ0FBQztJQUMxRSxDQUFDO0lBRUQ7OztPQUdHO0lBQ0gsSUFDSSxLQUFLLENBQUMsS0FBYTtRQUNyQixJQUFJLENBQUMsTUFBTSxHQUFHLEtBQUssQ0FBQztJQUN0QixDQUFDO0lBRUQsUUFBUTtRQUNOLDZDQUE2QztRQUM3QyxhQUFhLENBQUMsQ0FBQyxJQUFJLENBQUMsc0JBQXNCLENBQUMsU0FBUyxFQUFFLElBQUksQ0FBQyxzQkFBc0IsQ0FBQyxNQUFNLENBQUMsQ0FBQzthQUN2RixJQUFJLENBQUMsa0JBQWtCLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxDQUFDO2FBQzFDLFNBQVMsQ0FBQyxDQUFDLENBQUMsUUFBUSxFQUFFLEtBQUssQ0FBQyxFQUFFLEVBQUU7WUFDL0IsSUFBSSxRQUFRLEVBQUUsQ0FBQztnQkFDYixJQUFJLENBQUMsU0FBUyxHQUFHLENBQUMsS0FBSyxJQUFJLEVBQUUsQ0FBQyxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7WUFDdEQsQ0FBQztpQkFBTSxDQUFDO2dCQUNOLElBQUksQ0FBQyxTQUFTLEdBQUcsS0FBSyxLQUFLLElBQUksQ0FBQyxLQUFLLENBQUM7WUFDeEMsQ0FBQztRQUNILENBQUMsQ0FBQyxDQUFDO0lBQ1AsQ0FBQztJQUdELFdBQVc7UUFDVCxJQUFJLENBQUMsc0JBQXNCLENBQUMsWUFBWSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDNUQsQ0FBQztJQUdELGdCQUFnQjtRQUNkLElBQUksQ0FBQyxzQkFBc0IsQ0FBQyxXQUFXLENBQUMsSUFBSSxFQUFFLENBQUM7SUFDakQsQ0FBQztJQUVELEtBQUs7UUFDSCxJQUFJLENBQUMsc0JBQXNCLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDM0QsQ0FBQztJQUVELHFCQUFxQjtRQUNuQixPQUFPLElBQUksQ0FBQyxXQUFXLEVBQUUsYUFBYSxDQUFDLHFCQUFxQixFQUFFLENBQUM7SUFDakUsQ0FBQzsrR0EzRVUsdUJBQXVCO21HQUF2Qix1QkFBdUIsK1dDbEJwQywrQkFDQTs7NEZEaUJhLHVCQUF1QjtrQkFibkMsU0FBUzsrQkFDRSxpQkFBaUIsY0FDZixJQUFJLFdBQ1AsRUFBRSxRQUdMO3dCQUNKLEtBQUssRUFBRSxpQkFBaUI7d0JBQ3hCLElBQUksRUFBRSxRQUFRO3dCQUNkLENBQUMsMEJBQTBCLENBQUMsRUFBRSxTQUFTO3dCQUN2QyxDQUFDLDJCQUEyQixDQUFDLEVBQUUsVUFBVTtxQkFDMUM7NElBSTBCLEtBQUs7c0JBQS9CLEtBQUs7dUJBQUMsRUFBRSxRQUFRLEVBQUUsSUFBSSxFQUFFO2dCQXdDckIsS0FBSztzQkFEUixLQUFLO2dCQW1CTixXQUFXO3NCQURWLFlBQVk7dUJBQUMsT0FBTztnQkFNckIsZ0JBQWdCO3NCQURmLFlBQVk7dUJBQUMsWUFBWSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRGVzdHJveVJlZiwgRWxlbWVudFJlZiwgSG9zdExpc3RlbmVyLCBJbnB1dCwgT25Jbml0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IEhlYWR3aW5kU2VsZWN0U2VydmljZSB9IGZyb20gJy4uLy4uL3NlcnZpY2UvaGVhZHdpbmQtc2VsZWN0LnNlcnZpY2UnO1xyXG5pbXBvcnQgeyB0YWtlVW50aWxEZXN0cm95ZWQgfSBmcm9tICdAYW5ndWxhci9jb3JlL3J4anMtaW50ZXJvcCc7XHJcbmltcG9ydCB7IGNvbWJpbmVMYXRlc3QgfSBmcm9tICdyeGpzJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnaGVhZHdpbmQtb3B0aW9uJyxcclxuICBzdGFuZGFsb25lOiB0cnVlLFxyXG4gIGltcG9ydHM6IFtdLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9oZWFkd2luZC1vcHRpb24uY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsOiAnLi9oZWFkd2luZC1vcHRpb24uY29tcG9uZW50LnNjc3MnLFxyXG4gIGhvc3Q6IHtcclxuICAgIGNsYXNzOiAnaGVhZHdpbmQtb3B0aW9uJyxcclxuICAgIHJvbGU6ICdvcHRpb24nLFxyXG4gICAgWydbY2xhc3MuaGVhZHdpbmQtZm9jdXNlZF0nXTogJ2ZvY3VzZWQnLFxyXG4gICAgWydbY2xhc3MuaGVhZHdpbmQtc2VsZWN0ZWRdJ106ICdzZWxlY3RlZCcsXHJcbiAgfSxcclxufSlcclxuZXhwb3J0IGNsYXNzIEhlYWR3aW5kT3B0aW9uQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcclxuICAvKiogVmFsdWUgb2Ygb3B0aW9uIHRvIGFwcGx5IHRvIHNlbGVjdCAqL1xyXG4gIEBJbnB1dCh7IHJlcXVpcmVkOiB0cnVlIH0pIHZhbHVlOiBhbnk7XHJcblxyXG4gIGNvbnN0cnVjdG9yKFxyXG4gICAgcHJpdmF0ZSByZWFkb25seSBfZGVzdHJveVJlZjogRGVzdHJveVJlZixcclxuICAgIHByaXZhdGUgcmVhZG9ubHkgX2VsZW1lbnRSZWY6IEVsZW1lbnRSZWY8SFRNTEVsZW1lbnQ+LFxyXG4gICAgcHJpdmF0ZSByZWFkb25seSBfaGVhZHdpbmRTZWxlY3RTZXJ2aWNlOiBIZWFkd2luZFNlbGVjdFNlcnZpY2UsXHJcbiAgKSB7XHJcbiAgICB0aGlzLl9oZWFkd2luZFNlbGVjdFNlcnZpY2UuZm9jdXNPcHRpb24ucGlwZSh0YWtlVW50aWxEZXN0cm95ZWQoKSkuc3Vic2NyaWJlKCh2YWx1ZSkgPT4ge1xyXG4gICAgICB0aGlzLl9mb2N1c2VkID0gdGhpcy52YWx1ZSA9PT0gdmFsdWU7XHJcbiAgICB9KTtcclxuXHJcbiAgICB0aGlzLl9oZWFkd2luZFNlbGVjdFNlcnZpY2UuaG92ZXJPcHRpb24ucGlwZSh0YWtlVW50aWxEZXN0cm95ZWQoKSkuc3Vic2NyaWJlKCgpID0+IHtcclxuICAgICAgdGhpcy5fZm9jdXNlZCA9IGZhbHNlO1xyXG4gICAgfSk7XHJcbiAgfVxyXG5cclxuICBwcml2YXRlIF9mb2N1c2VkID0gZmFsc2U7XHJcblxyXG4gIGdldCBmb2N1c2VkKCk6IGJvb2xlYW4ge1xyXG4gICAgcmV0dXJuIHRoaXMuX2ZvY3VzZWQ7XHJcbiAgfVxyXG5cclxuICBwcml2YXRlIF9zZWxlY3RlZCA9IGZhbHNlO1xyXG5cclxuICBnZXQgc2VsZWN0ZWQoKTogYm9vbGVhbiB7XHJcbiAgICByZXR1cm4gdGhpcy5fc2VsZWN0ZWQ7XHJcbiAgfVxyXG5cclxuICBwcml2YXRlIF9sYWJlbD86IHN0cmluZztcclxuXHJcbiAgLyoqIEdldCBkaXNwbGF5YWJsZSBsYWJlbC4gV2hlbiBsYWJlbCBpc24ndCBzZXQsIGl0IHJldHVybnMgdGV4dENvbnRlbnQgb2YgaG9zdCBlbGVtZW50ICovXHJcbiAgZ2V0IGxhYmVsKCk6IHN0cmluZyB7XHJcbiAgICByZXR1cm4gdGhpcy5fbGFiZWwgfHwgdGhpcy5fZWxlbWVudFJlZj8ubmF0aXZlRWxlbWVudC50ZXh0Q29udGVudCB8fCAnJztcclxuICB9XHJcblxyXG4gIC8qKlxyXG4gICAqIFNldCBsYWJlbCB0byBkaXNwbGF5IHdoZW4gb3B0aW9uIGlzIHNlbGVjdGVkXHJcbiAgICogQHBhcmFtIHZhbHVlIC0gTGFiZWwgdmFsdWVcclxuICAgKi9cclxuICBASW5wdXQoKVxyXG4gIHNldCBsYWJlbCh2YWx1ZTogc3RyaW5nKSB7XHJcbiAgICB0aGlzLl9sYWJlbCA9IHZhbHVlO1xyXG4gIH1cclxuXHJcbiAgbmdPbkluaXQoKSB7XHJcbiAgICAvLyBzdWJzY3JpYmUgYWZ0ZXIgaW5pdCB0byB3YWl0ICd2YWx1ZScgaW5wdXRcclxuICAgIGNvbWJpbmVMYXRlc3QoW3RoaXMuX2hlYWR3aW5kU2VsZWN0U2VydmljZS5tdWx0aXBsZSQsIHRoaXMuX2hlYWR3aW5kU2VsZWN0U2VydmljZS52YWx1ZSRdKVxyXG4gICAgICAucGlwZSh0YWtlVW50aWxEZXN0cm95ZWQodGhpcy5fZGVzdHJveVJlZikpXHJcbiAgICAgIC5zdWJzY3JpYmUoKFttdWx0aXBsZSwgdmFsdWVdKSA9PiB7XHJcbiAgICAgICAgaWYgKG11bHRpcGxlKSB7XHJcbiAgICAgICAgICB0aGlzLl9zZWxlY3RlZCA9ICh2YWx1ZSB8fCBbXSkuaW5jbHVkZXModGhpcy52YWx1ZSk7XHJcbiAgICAgICAgfSBlbHNlIHtcclxuICAgICAgICAgIHRoaXMuX3NlbGVjdGVkID0gdmFsdWUgPT09IHRoaXMudmFsdWU7XHJcbiAgICAgICAgfVxyXG4gICAgICB9KTtcclxuICB9XHJcblxyXG4gIEBIb3N0TGlzdGVuZXIoJ2NsaWNrJylcclxuICBvbkhvc3RDbGljaygpOiB2b2lkIHtcclxuICAgIHRoaXMuX2hlYWR3aW5kU2VsZWN0U2VydmljZS5zZWxlY3RPcHRpb24uZW1pdCh0aGlzLnZhbHVlKTtcclxuICB9XHJcblxyXG4gIEBIb3N0TGlzdGVuZXIoJ21vdXNlZW50ZXInKVxyXG4gIG9uSG9zdE1vdXNlRW50ZXIoKTogdm9pZCB7XHJcbiAgICB0aGlzLl9oZWFkd2luZFNlbGVjdFNlcnZpY2UuaG92ZXJPcHRpb24uZW1pdCgpO1xyXG4gIH1cclxuXHJcbiAgZm9jdXMoKTogdm9pZCB7XHJcbiAgICB0aGlzLl9oZWFkd2luZFNlbGVjdFNlcnZpY2UuZm9jdXNPcHRpb24uZW1pdCh0aGlzLnZhbHVlKTtcclxuICB9XHJcblxyXG4gIGdldEJvdW5kaW5nQ2xpZW50UmVjdCgpOiBET01SZWN0IHwgdW5kZWZpbmVkIHtcclxuICAgIHJldHVybiB0aGlzLl9lbGVtZW50UmVmPy5uYXRpdmVFbGVtZW50LmdldEJvdW5kaW5nQ2xpZW50UmVjdCgpO1xyXG4gIH1cclxufVxyXG4iLCI8bmctY29udGVudD48L25nLWNvbnRlbnQ+XHJcbiJdfQ==