@favian/headwind-ui
Version:
Headless UI for Angular - Styleless Angular components to integrate with Tailwind CSS
93 lines • 10.8 kB
JavaScript
import { booleanAttribute, Component, EventEmitter, HostListener, Input, Output } from '@angular/core';
import { HeadwindControlValueAccessor } from '../../abstracts/headwind-control-value-accessor';
import { HeadwindClickDetector } from '../../services/headwind-click-detector.service';
import { HeadwindCheckboxService } from './service/headwind-checkbox.service';
import * as i0 from "@angular/core";
import * as i1 from "./service/headwind-checkbox.service";
export class HeadwindCheckboxComponent extends HeadwindControlValueAccessor {
constructor(_headwindCheckboxService) {
super();
this._headwindCheckboxService = _headwindCheckboxService;
this.checkedChange = new EventEmitter();
}
get disabled() {
return this.isDisabled;
}
set disabled(value) {
this.setDisabledState(value);
}
get checked() {
return this._headwindCheckboxService.checked;
}
set checked(value) {
this._headwindCheckboxService.checked = value;
}
onHostClick() {
this.toggle();
}
onHostBlur() {
this.onTouched();
}
onHostSpaceKeydown(event) {
event.stopPropagation();
event.preventDefault();
this.toggle();
}
writeValue(obj) {
this.checked = obj;
}
updateValue(value) {
super.updateValue(value);
this.checkedChange.emit(value);
}
check() {
if (this.disabled) {
return;
}
this.updateValue(true);
}
uncheck() {
if (this.disabled) {
return;
}
this.updateValue(false);
}
toggle() {
if (this.checked) {
this.uncheck();
}
else {
this.check();
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HeadwindCheckboxComponent, deps: [{ token: i1.HeadwindCheckboxService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.13", type: HeadwindCheckboxComponent, isStandalone: true, selector: "headwind-checkbox", inputs: { disabled: ["disabled", "disabled", booleanAttribute], checked: ["checked", "checked", booleanAttribute] }, outputs: { checkedChange: "checkedChange" }, host: { attributes: { "tabindex": "0", "role": "checkbox" }, listeners: { "click": "onHostClick()", "blur": "onHostBlur()", "keydown.space": "onHostSpaceKeydown($event)" }, properties: { "attr.aria-checked": "checked", "class.headwind-checked": "checked" }, classAttribute: "headwind-checkbox" }, providers: [HeadwindClickDetector, HeadwindCheckboxService], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\r\n", styles: [""] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HeadwindCheckboxComponent, decorators: [{
type: Component,
args: [{ selector: 'headwind-checkbox', standalone: true, imports: [], providers: [HeadwindClickDetector, HeadwindCheckboxService], host: {
tabindex: '0',
class: 'headwind-checkbox',
role: 'checkbox',
['[attr.aria-checked]']: 'checked',
['[class.headwind-checked]']: 'checked',
}, template: "<ng-content></ng-content>\r\n" }]
}], ctorParameters: () => [{ type: i1.HeadwindCheckboxService }], propDecorators: { checkedChange: [{
type: Output
}], disabled: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], checked: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], onHostClick: [{
type: HostListener,
args: ['click']
}], onHostBlur: [{
type: HostListener,
args: ['blur']
}], onHostSpaceKeydown: [{
type: HostListener,
args: ['keydown.space', ['$event']]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaGVhZHdpbmQtY2hlY2tib3guY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvaGVhZHdpbmQtdWkvc3JjL2NvbXBvbmVudHMvaGVhZHdpbmQtY2hlY2tib3gvaGVhZHdpbmQtY2hlY2tib3guY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvaGVhZHdpbmQtdWkvc3JjL2NvbXBvbmVudHMvaGVhZHdpbmQtY2hlY2tib3gvaGVhZHdpbmQtY2hlY2tib3guY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLGdCQUFnQixFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDdkcsT0FBTyxFQUFFLDRCQUE0QixFQUFFLE1BQU0saURBQWlELENBQUM7QUFDL0YsT0FBTyxFQUFFLHFCQUFxQixFQUFFLE1BQU0sZ0RBQWdELENBQUM7QUFDdkYsT0FBTyxFQUFFLHVCQUF1QixFQUFFLE1BQU0scUNBQXFDLENBQUM7OztBQWlCOUUsTUFBTSxPQUFPLHlCQUEwQixTQUFRLDRCQUE0QjtJQUd6RSxZQUE2Qix3QkFBaUQ7UUFDNUUsS0FBSyxFQUFFLENBQUM7UUFEbUIsNkJBQXdCLEdBQXhCLHdCQUF3QixDQUF5QjtRQUZwRSxrQkFBYSxHQUFHLElBQUksWUFBWSxFQUFXLENBQUM7SUFJdEQsQ0FBQztJQUVELElBQ0ksUUFBUTtRQUNWLE9BQU8sSUFBSSxDQUFDLFVBQVUsQ0FBQztJQUN6QixDQUFDO0lBRUQsSUFBSSxRQUFRLENBQUMsS0FBYztRQUN6QixJQUFJLENBQUMsZ0JBQWdCLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDL0IsQ0FBQztJQUVELElBQ0ksT0FBTztRQUNULE9BQU8sSUFBSSxDQUFDLHdCQUF3QixDQUFDLE9BQU8sQ0FBQztJQUMvQyxDQUFDO0lBRUQsSUFBSSxPQUFPLENBQUMsS0FBYztRQUN4QixJQUFJLENBQUMsd0JBQXdCLENBQUMsT0FBTyxHQUFHLEtBQUssQ0FBQztJQUNoRCxDQUFDO0lBR0QsV0FBVztRQUNULElBQUksQ0FBQyxNQUFNLEVBQUUsQ0FBQztJQUNoQixDQUFDO0lBR0QsVUFBVTtRQUNSLElBQUksQ0FBQyxTQUFTLEVBQUUsQ0FBQztJQUNuQixDQUFDO0lBR0Qsa0JBQWtCLENBQUMsS0FBWTtRQUM3QixLQUFLLENBQUMsZUFBZSxFQUFFLENBQUM7UUFDeEIsS0FBSyxDQUFDLGNBQWMsRUFBRSxDQUFDO1FBRXZCLElBQUksQ0FBQyxNQUFNLEVBQUUsQ0FBQztJQUNoQixDQUFDO0lBRVEsVUFBVSxDQUFDLEdBQVE7UUFDMUIsSUFBSSxDQUFDLE9BQU8sR0FBRyxHQUFHLENBQUM7SUFDckIsQ0FBQztJQUVRLFdBQVcsQ0FBQyxLQUFVO1FBQzdCLEtBQUssQ0FBQyxXQUFXLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDekIsSUFBSSxDQUFDLGFBQWEsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDakMsQ0FBQztJQUVELEtBQUs7UUFDSCxJQUFJLElBQUksQ0FBQyxRQUFRLEVBQUUsQ0FBQztZQUNsQixPQUFPO1FBQ1QsQ0FBQztRQUVELElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDekIsQ0FBQztJQUVELE9BQU87UUFDTCxJQUFJLElBQUksQ0FBQyxRQUFRLEVBQUUsQ0FBQztZQUNsQixPQUFPO1FBQ1QsQ0FBQztRQUVELElBQUksQ0FBQyxXQUFXLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDMUIsQ0FBQztJQUVELE1BQU07UUFDSixJQUFJLElBQUksQ0FBQyxPQUFPLEVBQUUsQ0FBQztZQUNqQixJQUFJLENBQUMsT0FBTyxFQUFFLENBQUM7UUFDakIsQ0FBQzthQUFNLENBQUM7WUFDTixJQUFJLENBQUMsS0FBSyxFQUFFLENBQUM7UUFDZixDQUFDO0lBQ0gsQ0FBQzsrR0ExRVUseUJBQXlCO21HQUF6Qix5QkFBeUIsa0dBT2hCLGdCQUFnQixtQ0FTaEIsZ0JBQWdCLHNXQXpCekIsQ0FBQyxxQkFBcUIsRUFBRSx1QkFBdUIsQ0FBQyxpRENYN0QsK0JBQ0E7OzRGRG1CYSx5QkFBeUI7a0JBZnJDLFNBQVM7K0JBQ0UsbUJBQW1CLGNBQ2pCLElBQUksV0FDUCxFQUFFLGFBR0EsQ0FBQyxxQkFBcUIsRUFBRSx1QkFBdUIsQ0FBQyxRQUNyRDt3QkFDSixRQUFRLEVBQUUsR0FBRzt3QkFDYixLQUFLLEVBQUUsbUJBQW1CO3dCQUMxQixJQUFJLEVBQUUsVUFBVTt3QkFDaEIsQ0FBQyxxQkFBcUIsQ0FBQyxFQUFFLFNBQVM7d0JBQ2xDLENBQUMsMEJBQTBCLENBQUMsRUFBRSxTQUFTO3FCQUN4Qzs0RkFHUyxhQUFhO3NCQUF0QixNQUFNO2dCQU9ILFFBQVE7c0JBRFgsS0FBSzt1QkFBQyxFQUFFLFNBQVMsRUFBRSxnQkFBZ0IsRUFBRTtnQkFVbEMsT0FBTztzQkFEVixLQUFLO3VCQUFDLEVBQUUsU0FBUyxFQUFFLGdCQUFnQixFQUFFO2dCQVV0QyxXQUFXO3NCQURWLFlBQVk7dUJBQUMsT0FBTztnQkFNckIsVUFBVTtzQkFEVCxZQUFZO3VCQUFDLE1BQU07Z0JBTXBCLGtCQUFrQjtzQkFEakIsWUFBWTt1QkFBQyxlQUFlLEVBQUUsQ0FBQyxRQUFRLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBib29sZWFuQXR0cmlidXRlLCBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSG9zdExpc3RlbmVyLCBJbnB1dCwgT3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IEhlYWR3aW5kQ29udHJvbFZhbHVlQWNjZXNzb3IgfSBmcm9tICcuLi8uLi9hYnN0cmFjdHMvaGVhZHdpbmQtY29udHJvbC12YWx1ZS1hY2Nlc3Nvcic7XHJcbmltcG9ydCB7IEhlYWR3aW5kQ2xpY2tEZXRlY3RvciB9IGZyb20gJy4uLy4uL3NlcnZpY2VzL2hlYWR3aW5kLWNsaWNrLWRldGVjdG9yLnNlcnZpY2UnO1xyXG5pbXBvcnQgeyBIZWFkd2luZENoZWNrYm94U2VydmljZSB9IGZyb20gJy4vc2VydmljZS9oZWFkd2luZC1jaGVja2JveC5zZXJ2aWNlJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnaGVhZHdpbmQtY2hlY2tib3gnLFxyXG4gIHN0YW5kYWxvbmU6IHRydWUsXHJcbiAgaW1wb3J0czogW10sXHJcbiAgdGVtcGxhdGVVcmw6ICcuL2hlYWR3aW5kLWNoZWNrYm94LmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybDogJy4vaGVhZHdpbmQtY2hlY2tib3guY29tcG9uZW50LnNjc3MnLFxyXG4gIHByb3ZpZGVyczogW0hlYWR3aW5kQ2xpY2tEZXRlY3RvciwgSGVhZHdpbmRDaGVja2JveFNlcnZpY2VdLFxyXG4gIGhvc3Q6IHtcclxuICAgIHRhYmluZGV4OiAnMCcsXHJcbiAgICBjbGFzczogJ2hlYWR3aW5kLWNoZWNrYm94JyxcclxuICAgIHJvbGU6ICdjaGVja2JveCcsXHJcbiAgICBbJ1thdHRyLmFyaWEtY2hlY2tlZF0nXTogJ2NoZWNrZWQnLFxyXG4gICAgWydbY2xhc3MuaGVhZHdpbmQtY2hlY2tlZF0nXTogJ2NoZWNrZWQnLFxyXG4gIH0sXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBIZWFkd2luZENoZWNrYm94Q29tcG9uZW50IGV4dGVuZHMgSGVhZHdpbmRDb250cm9sVmFsdWVBY2Nlc3NvciB7XHJcbiAgQE91dHB1dCgpIGNoZWNrZWRDaGFuZ2UgPSBuZXcgRXZlbnRFbWl0dGVyPGJvb2xlYW4+KCk7XHJcblxyXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgcmVhZG9ubHkgX2hlYWR3aW5kQ2hlY2tib3hTZXJ2aWNlOiBIZWFkd2luZENoZWNrYm94U2VydmljZSkge1xyXG4gICAgc3VwZXIoKTtcclxuICB9XHJcblxyXG4gIEBJbnB1dCh7IHRyYW5zZm9ybTogYm9vbGVhbkF0dHJpYnV0ZSB9KVxyXG4gIGdldCBkaXNhYmxlZCgpOiBib29sZWFuIHtcclxuICAgIHJldHVybiB0aGlzLmlzRGlzYWJsZWQ7XHJcbiAgfVxyXG5cclxuICBzZXQgZGlzYWJsZWQodmFsdWU6IGJvb2xlYW4pIHtcclxuICAgIHRoaXMuc2V0RGlzYWJsZWRTdGF0ZSh2YWx1ZSk7XHJcbiAgfVxyXG5cclxuICBASW5wdXQoeyB0cmFuc2Zvcm06IGJvb2xlYW5BdHRyaWJ1dGUgfSlcclxuICBnZXQgY2hlY2tlZCgpOiBib29sZWFuIHtcclxuICAgIHJldHVybiB0aGlzLl9oZWFkd2luZENoZWNrYm94U2VydmljZS5jaGVja2VkO1xyXG4gIH1cclxuXHJcbiAgc2V0IGNoZWNrZWQodmFsdWU6IGJvb2xlYW4pIHtcclxuICAgIHRoaXMuX2hlYWR3aW5kQ2hlY2tib3hTZXJ2aWNlLmNoZWNrZWQgPSB2YWx1ZTtcclxuICB9XHJcblxyXG4gIEBIb3N0TGlzdGVuZXIoJ2NsaWNrJylcclxuICBvbkhvc3RDbGljaygpOiB2b2lkIHtcclxuICAgIHRoaXMudG9nZ2xlKCk7XHJcbiAgfVxyXG5cclxuICBASG9zdExpc3RlbmVyKCdibHVyJylcclxuICBvbkhvc3RCbHVyKCk6IHZvaWQge1xyXG4gICAgdGhpcy5vblRvdWNoZWQoKTtcclxuICB9XHJcblxyXG4gIEBIb3N0TGlzdGVuZXIoJ2tleWRvd24uc3BhY2UnLCBbJyRldmVudCddKVxyXG4gIG9uSG9zdFNwYWNlS2V5ZG93bihldmVudDogRXZlbnQpOiB2b2lkIHtcclxuICAgIGV2ZW50LnN0b3BQcm9wYWdhdGlvbigpO1xyXG4gICAgZXZlbnQucHJldmVudERlZmF1bHQoKTtcclxuXHJcbiAgICB0aGlzLnRvZ2dsZSgpO1xyXG4gIH1cclxuXHJcbiAgb3ZlcnJpZGUgd3JpdGVWYWx1ZShvYmo6IGFueSkge1xyXG4gICAgdGhpcy5jaGVja2VkID0gb2JqO1xyXG4gIH1cclxuXHJcbiAgb3ZlcnJpZGUgdXBkYXRlVmFsdWUodmFsdWU6IGFueSkge1xyXG4gICAgc3VwZXIudXBkYXRlVmFsdWUodmFsdWUpO1xyXG4gICAgdGhpcy5jaGVja2VkQ2hhbmdlLmVtaXQodmFsdWUpO1xyXG4gIH1cclxuXHJcbiAgY2hlY2soKTogdm9pZCB7XHJcbiAgICBpZiAodGhpcy5kaXNhYmxlZCkge1xyXG4gICAgICByZXR1cm47XHJcbiAgICB9XHJcblxyXG4gICAgdGhpcy51cGRhdGVWYWx1ZSh0cnVlKTtcclxuICB9XHJcblxyXG4gIHVuY2hlY2soKTogdm9pZCB7XHJcbiAgICBpZiAodGhpcy5kaXNhYmxlZCkge1xyXG4gICAgICByZXR1cm47XHJcbiAgICB9XHJcblxyXG4gICAgdGhpcy51cGRhdGVWYWx1ZShmYWxzZSk7XHJcbiAgfVxyXG5cclxuICB0b2dnbGUoKTogdm9pZCB7XHJcbiAgICBpZiAodGhpcy5jaGVja2VkKSB7XHJcbiAgICAgIHRoaXMudW5jaGVjaygpO1xyXG4gICAgfSBlbHNlIHtcclxuICAgICAgdGhpcy5jaGVjaygpO1xyXG4gICAgfVxyXG4gIH1cclxufVxyXG4iLCI8bmctY29udGVudD48L25nLWNvbnRlbnQ+XHJcbiJdfQ==