@c8y/ngx-components
Version:
Angular modules for Cumulocity IoT applications
94 lines • 10.9 kB
JavaScript
import { Output, EventEmitter, Component, Input, forwardRef } from '@angular/core';
import { CheckboxControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { ElementRef, Renderer2 } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
/**
* A component to display checkboxes in a c8y-li. Use it with content projection. It
* can be used standalone or with an ngModel.
*
* ```html
* <c8y-li>
* <c8y-li-checkbox></c8y-li-checkbox>
* </c8y-li>
* ```
*/
export class ListItemCheckboxComponent extends CheckboxControlValueAccessor {
constructor(renderer, elementRef) {
super(renderer, elementRef);
this.renderer = renderer;
this.elementRef = elementRef;
/**
* Indicates if the checkbox is selected.
*/
this.selected = false;
/**
* Indicates if the checkbox is disabled.
*/
this.disabled = false;
/**
* An event emitted as soon as the checkbox is selected.
*/
this.onSelect = new EventEmitter();
/**
* Allows to display the chceckbox as a switch
*/
this.displayAsSwitch = false;
}
/**
* @ignore
*/
ngOnChanges(changes) {
if (changes.selected && !changes.selected.firstChange) {
this.onSelect.emit(changes.selected.currentValue);
}
}
/**
* Selects the checkbox.
* @param value The value to pass.
*/
select(value) {
this.onSelect.emit(value);
this.onChange(value);
this.selected = value;
}
// default implementation (https://github.com/angular/angular/blob/main/packages/forms/src/directives/checkbox_value_accessor.ts#L54) not sufficient.
// get overruled by our binding on checked..
writeValue(value) {
this.selected = value;
}
setDisabledState(isDisabled) {
this.disabled = isDisabled;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ListItemCheckboxComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ListItemCheckboxComponent, selector: "c8y-list-item-checkbox, c8y-li-checkbox", inputs: { selected: "selected", indeterminate: "indeterminate", disabled: "disabled", displayAsSwitch: "displayAsSwitch" }, outputs: { onSelect: "onSelect" }, host: { classAttribute: "c8y-list__item__check" }, providers: [
{
provide: NG_VALUE_ACCESSOR,
multi: true,
useExisting: forwardRef(() => ListItemCheckboxComponent)
}
], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<label [ngClass]=\"displayAsSwitch ? 'c8y-switch c8y-switch--inline' : 'c8y-checkbox'\">\n <input\n type=\"checkbox\"\n class=\"form-control\"\n [disabled]=\"disabled\"\n [checked]=\"selected\"\n (change)=\"select($event.target.checked); (false)\"\n [indeterminate]=\"indeterminate\"\n />\n <span></span>\n <span class=\"sr-only\">event</span>\n</label>\n<ng-content></ng-content>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ListItemCheckboxComponent, decorators: [{
type: Component,
args: [{ selector: 'c8y-list-item-checkbox, c8y-li-checkbox', host: {
class: 'c8y-list__item__check'
}, providers: [
{
provide: NG_VALUE_ACCESSOR,
multi: true,
useExisting: forwardRef(() => ListItemCheckboxComponent)
}
], template: "<label [ngClass]=\"displayAsSwitch ? 'c8y-switch c8y-switch--inline' : 'c8y-checkbox'\">\n <input\n type=\"checkbox\"\n class=\"form-control\"\n [disabled]=\"disabled\"\n [checked]=\"selected\"\n (change)=\"select($event.target.checked); (false)\"\n [indeterminate]=\"indeterminate\"\n />\n <span></span>\n <span class=\"sr-only\">event</span>\n</label>\n<ng-content></ng-content>\n" }]
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { selected: [{
type: Input
}], indeterminate: [{
type: Input
}], disabled: [{
type: Input
}], onSelect: [{
type: Output
}], displayAsSwitch: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGlzdC1pdGVtLWNoZWNrYm94LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL2NvcmUvbGlzdC1ncm91cC9saXN0LWl0ZW0tY2hlY2tib3guY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vY29yZS9saXN0LWdyb3VwL2xpc3QtaXRlbS1jaGVja2JveC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsTUFBTSxFQUFFLFlBQVksRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFpQixVQUFVLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDbEcsT0FBTyxFQUFFLDRCQUE0QixFQUFFLGlCQUFpQixFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDakYsT0FBTyxFQUFFLFVBQVUsRUFBRSxTQUFTLEVBQUUsTUFBTSxlQUFlLENBQUM7OztBQUV0RDs7Ozs7Ozs7O0dBU0c7QUFlSCxNQUFNLE9BQU8seUJBQTBCLFNBQVEsNEJBQTRCO0lBMkJ6RSxZQUNVLFFBQW1CLEVBQ25CLFVBQXNCO1FBRTlCLEtBQUssQ0FBQyxRQUFRLEVBQUUsVUFBVSxDQUFDLENBQUM7UUFIcEIsYUFBUSxHQUFSLFFBQVEsQ0FBVztRQUNuQixlQUFVLEdBQVYsVUFBVSxDQUFZO1FBNUJoQzs7V0FFRztRQUVILGFBQVEsR0FBRyxLQUFLLENBQUM7UUFNakI7O1dBRUc7UUFFSCxhQUFRLEdBQUcsS0FBSyxDQUFDO1FBQ2pCOztXQUVHO1FBRUgsYUFBUSxHQUFHLElBQUksWUFBWSxFQUFXLENBQUM7UUFFdkM7O1dBRUc7UUFDTSxvQkFBZSxHQUFHLEtBQUssQ0FBQztJQU9qQyxDQUFDO0lBRUQ7O09BRUc7SUFDSCxXQUFXLENBQUMsT0FBc0I7UUFDaEMsSUFBSSxPQUFPLENBQUMsUUFBUSxJQUFJLENBQUMsT0FBTyxDQUFDLFFBQVEsQ0FBQyxXQUFXLEVBQUUsQ0FBQztZQUN0RCxJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsUUFBUSxDQUFDLFlBQVksQ0FBQyxDQUFDO1FBQ3BELENBQUM7SUFDSCxDQUFDO0lBRUQ7OztPQUdHO0lBQ0gsTUFBTSxDQUFDLEtBQUs7UUFDVixJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUMxQixJQUFJLENBQUMsUUFBUSxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQ3JCLElBQUksQ0FBQyxRQUFRLEdBQUcsS0FBSyxDQUFDO0lBQ3hCLENBQUM7SUFFRCxxSkFBcUo7SUFDckosNENBQTRDO0lBQzVDLFVBQVUsQ0FBQyxLQUFjO1FBQ3ZCLElBQUksQ0FBQyxRQUFRLEdBQUcsS0FBSyxDQUFDO0lBQ3hCLENBQUM7SUFFRCxnQkFBZ0IsQ0FBQyxVQUFtQjtRQUNsQyxJQUFJLENBQUMsUUFBUSxHQUFHLFVBQVUsQ0FBQztJQUM3QixDQUFDOytHQTdEVSx5QkFBeUI7bUdBQXpCLHlCQUF5QixvUkFSekI7WUFDVDtnQkFDRSxPQUFPLEVBQUUsaUJBQWlCO2dCQUMxQixLQUFLLEVBQUUsSUFBSTtnQkFDWCxXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSxDQUFDLHlCQUF5QixDQUFDO2FBQ3pEO1NBQ0Ysc0VDMUJILHNaQWFBOzs0RkRlYSx5QkFBeUI7a0JBZHJDLFNBQVM7K0JBQ0UseUNBQXlDLFFBRTdDO3dCQUNKLEtBQUssRUFBRSx1QkFBdUI7cUJBQy9CLGFBQ1U7d0JBQ1Q7NEJBQ0UsT0FBTyxFQUFFLGlCQUFpQjs0QkFDMUIsS0FBSyxFQUFFLElBQUk7NEJBQ1gsV0FBVyxFQUFFLFVBQVUsQ0FBQyxHQUFHLEVBQUUsMEJBQTBCLENBQUM7eUJBQ3pEO3FCQUNGO3VHQU9ELFFBQVE7c0JBRFAsS0FBSztnQkFNTixhQUFhO3NCQURaLEtBQUs7Z0JBTU4sUUFBUTtzQkFEUCxLQUFLO2dCQU1OLFFBQVE7c0JBRFAsTUFBTTtnQkFNRSxlQUFlO3NCQUF2QixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgT3V0cHV0LCBFdmVudEVtaXR0ZXIsIENvbXBvbmVudCwgSW5wdXQsIFNpbXBsZUNoYW5nZXMsIGZvcndhcmRSZWYgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IENoZWNrYm94Q29udHJvbFZhbHVlQWNjZXNzb3IsIE5HX1ZBTFVFX0FDQ0VTU09SIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuaW1wb3J0IHsgRWxlbWVudFJlZiwgUmVuZGVyZXIyIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbi8qKlxuICogQSBjb21wb25lbnQgdG8gZGlzcGxheSBjaGVja2JveGVzIGluIGEgYzh5LWxpLiBVc2UgaXQgd2l0aCBjb250ZW50IHByb2plY3Rpb24uIEl0XG4gKiBjYW4gYmUgdXNlZCBzdGFuZGFsb25lIG9yIHdpdGggYW4gbmdNb2RlbC5cbiAqXG4gKiBgYGBodG1sXG4gKiA8Yzh5LWxpPlxuICogICA8Yzh5LWxpLWNoZWNrYm94PjwvYzh5LWxpLWNoZWNrYm94PlxuICogPC9jOHktbGk+XG4gKiBgYGBcbiAqL1xuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnYzh5LWxpc3QtaXRlbS1jaGVja2JveCwgYzh5LWxpLWNoZWNrYm94JyxcbiAgdGVtcGxhdGVVcmw6ICcuL2xpc3QtaXRlbS1jaGVja2JveC5jb21wb25lbnQuaHRtbCcsXG4gIGhvc3Q6IHtcbiAgICBjbGFzczogJ2M4eS1saXN0X19pdGVtX19jaGVjaydcbiAgfSxcbiAgcHJvdmlkZXJzOiBbXG4gICAge1xuICAgICAgcHJvdmlkZTogTkdfVkFMVUVfQUNDRVNTT1IsXG4gICAgICBtdWx0aTogdHJ1ZSxcbiAgICAgIHVzZUV4aXN0aW5nOiBmb3J3YXJkUmVmKCgpID0+IExpc3RJdGVtQ2hlY2tib3hDb21wb25lbnQpXG4gICAgfVxuICBdXG59KVxuZXhwb3J0IGNsYXNzIExpc3RJdGVtQ2hlY2tib3hDb21wb25lbnQgZXh0ZW5kcyBDaGVja2JveENvbnRyb2xWYWx1ZUFjY2Vzc29yIHtcbiAgLyoqXG4gICAqIEluZGljYXRlcyBpZiB0aGUgY2hlY2tib3ggaXMgc2VsZWN0ZWQuXG4gICAqL1xuICBASW5wdXQoKVxuICBzZWxlY3RlZCA9IGZhbHNlO1xuICAvKipcbiAgICogU2V0cyB0aGUgY2hlY2tib3ggaW50byB0aGUgaW5kZXRlcm1pbmF0ZSBzdGF0ZS5cbiAgICovXG4gIEBJbnB1dCgpXG4gIGluZGV0ZXJtaW5hdGU/OiBib29sZWFuO1xuICAvKipcbiAgICogSW5kaWNhdGVzIGlmIHRoZSBjaGVja2JveCBpcyBkaXNhYmxlZC5cbiAgICovXG4gIEBJbnB1dCgpXG4gIGRpc2FibGVkID0gZmFsc2U7XG4gIC8qKlxuICAgKiBBbiBldmVudCBlbWl0dGVkIGFzIHNvb24gYXMgdGhlIGNoZWNrYm94IGlzIHNlbGVjdGVkLlxuICAgKi9cbiAgQE91dHB1dCgpXG4gIG9uU2VsZWN0ID0gbmV3IEV2ZW50RW1pdHRlcjxib29sZWFuPigpO1xuXG4gIC8qKlxuICAgKiBBbGxvd3MgdG8gZGlzcGxheSB0aGUgY2hjZWNrYm94IGFzIGEgc3dpdGNoXG4gICAqL1xuICBASW5wdXQoKSBkaXNwbGF5QXNTd2l0Y2ggPSBmYWxzZTtcblxuICBjb25zdHJ1Y3RvcihcbiAgICBwcml2YXRlIHJlbmRlcmVyOiBSZW5kZXJlcjIsXG4gICAgcHJpdmF0ZSBlbGVtZW50UmVmOiBFbGVtZW50UmVmXG4gICkge1xuICAgIHN1cGVyKHJlbmRlcmVyLCBlbGVtZW50UmVmKTtcbiAgfVxuXG4gIC8qKlxuICAgKiBAaWdub3JlXG4gICAqL1xuICBuZ09uQ2hhbmdlcyhjaGFuZ2VzOiBTaW1wbGVDaGFuZ2VzKTogdm9pZCB7XG4gICAgaWYgKGNoYW5nZXMuc2VsZWN0ZWQgJiYgIWNoYW5nZXMuc2VsZWN0ZWQuZmlyc3RDaGFuZ2UpIHtcbiAgICAgIHRoaXMub25TZWxlY3QuZW1pdChjaGFuZ2VzLnNlbGVjdGVkLmN1cnJlbnRWYWx1ZSk7XG4gICAgfVxuICB9XG5cbiAgLyoqXG4gICAqIFNlbGVjdHMgdGhlIGNoZWNrYm94LlxuICAgKiBAcGFyYW0gdmFsdWUgVGhlIHZhbHVlIHRvIHBhc3MuXG4gICAqL1xuICBzZWxlY3QodmFsdWUpIHtcbiAgICB0aGlzLm9uU2VsZWN0LmVtaXQodmFsdWUpO1xuICAgIHRoaXMub25DaGFuZ2UodmFsdWUpO1xuICAgIHRoaXMuc2VsZWN0ZWQgPSB2YWx1ZTtcbiAgfVxuXG4gIC8vIGRlZmF1bHQgaW1wbGVtZW50YXRpb24gKGh0dHBzOi8vZ2l0aHViLmNvbS9hbmd1bGFyL2FuZ3VsYXIvYmxvYi9tYWluL3BhY2thZ2VzL2Zvcm1zL3NyYy9kaXJlY3RpdmVzL2NoZWNrYm94X3ZhbHVlX2FjY2Vzc29yLnRzI0w1NCkgbm90IHN1ZmZpY2llbnQuXG4gIC8vIGdldCBvdmVycnVsZWQgYnkgb3VyIGJpbmRpbmcgb24gY2hlY2tlZC4uXG4gIHdyaXRlVmFsdWUodmFsdWU6IGJvb2xlYW4pOiB2b2lkIHtcbiAgICB0aGlzLnNlbGVjdGVkID0gdmFsdWU7XG4gIH1cblxuICBzZXREaXNhYmxlZFN0YXRlKGlzRGlzYWJsZWQ6IGJvb2xlYW4pOiB2b2lkIHtcbiAgICB0aGlzLmRpc2FibGVkID0gaXNEaXNhYmxlZDtcbiAgfVxufVxuIiwiPGxhYmVsIFtuZ0NsYXNzXT1cImRpc3BsYXlBc1N3aXRjaCA/ICdjOHktc3dpdGNoIGM4eS1zd2l0Y2gtLWlubGluZScgOiAnYzh5LWNoZWNrYm94J1wiPlxuICA8aW5wdXRcbiAgICB0eXBlPVwiY2hlY2tib3hcIlxuICAgIGNsYXNzPVwiZm9ybS1jb250cm9sXCJcbiAgICBbZGlzYWJsZWRdPVwiZGlzYWJsZWRcIlxuICAgIFtjaGVja2VkXT1cInNlbGVjdGVkXCJcbiAgICAoY2hhbmdlKT1cInNlbGVjdCgkZXZlbnQudGFyZ2V0LmNoZWNrZWQpOyAoZmFsc2UpXCJcbiAgICBbaW5kZXRlcm1pbmF0ZV09XCJpbmRldGVybWluYXRlXCJcbiAgLz5cbiAgPHNwYW4+PC9zcGFuPlxuICA8c3BhbiBjbGFzcz1cInNyLW9ubHlcIj5ldmVudDwvc3Bhbj5cbjwvbGFiZWw+XG48bmctY29udGVudD48L25nLWNvbnRlbnQ+XG4iXX0=