carbon-components-angular
Version:
Next generation components
380 lines (375 loc) • 13.3 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, ViewChild, HostListener, NgModule } from '@angular/core';
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
/**
* Defines the set of states for a checkbox component.
*/
var CheckboxState;
(function (CheckboxState) {
CheckboxState[CheckboxState["Init"] = 0] = "Init";
CheckboxState[CheckboxState["Indeterminate"] = 1] = "Indeterminate";
CheckboxState[CheckboxState["Checked"] = 2] = "Checked";
CheckboxState[CheckboxState["Unchecked"] = 3] = "Unchecked";
})(CheckboxState || (CheckboxState = {}));
/**
* Get started with importing the module:
*
* ```typescript
* import { CheckboxModule } from 'carbon-components-angular';
* ```
*
* [See demo](../../?path=/story/components-checkbox--basic)
*/
class Checkbox {
/**
* Creates an instance of `Checkbox`.
*/
constructor(changeDetectorRef) {
this.changeDetectorRef = changeDetectorRef;
/**
* Set to `true` for a disabled checkbox.
*/
this.disabled = false;
/**
* Set to `true` for a loading checkbox.
*/
this.skeleton = false;
/**
* Set to `true` to hide the checkbox labels.
*/
this.hideLabel = false;
/**
* The unique id for the checkbox component.
*/
this.id = `checkbox-${Checkbox.checkboxCount}`;
/**
* Emits click event.
*/
this.click = new EventEmitter();
/**
* Emits an event when the value of the checkbox changes.
*
* Allows double biding with the `checked` Input.
*/
this.checkedChange = new EventEmitter();
/**
* Emits event notifying other classes when a change in state occurs specifically
* on an indeterminate checkbox.
*/
this.indeterminateChange = new EventEmitter();
/**
* Set to `true` if the input checkbox is selected (or checked).
*/
this._checked = false;
/**
* Set to `true` if the input checkbox is in state indeterminate.
*/
this._indeterminate = false;
/**
* Keeps a reference to the checkboxes current state, as defined in `CheckboxState`.
*/
this.currentCheckboxState = CheckboxState.Init;
/**
* Called when checkbox is blurred. Needed to properly implement `ControlValueAccessor`.
*/
this.onTouched = () => { };
/**
* Method set in `registerOnChange` to propagate changes back to the form.
*/
this.propagateChange = (_) => { };
Checkbox.checkboxCount++;
}
/**
* Set the checkbox's indeterminate state to match the parameter and transition the view to reflect the change.
*
* Allows double binding with the `indeterminateChange` Output.
*/
set indeterminate(indeterminate) {
if (indeterminate === this._indeterminate) {
return;
}
this._indeterminate = indeterminate;
if (this._indeterminate) {
this.transitionCheckboxState(CheckboxState.Indeterminate);
}
else {
this.transitionCheckboxState(this.checked ? CheckboxState.Checked : CheckboxState.Unchecked);
}
if (this.inputCheckbox && this.inputCheckbox.nativeElement) {
this.inputCheckbox.nativeElement.indeterminate = indeterminate;
}
this.changeDetectorRef.markForCheck();
this.indeterminateChange.emit(this._indeterminate);
}
/**
* Reflects whether the checkbox state is indeterminate.
*/
get indeterminate() {
return this._indeterminate;
}
/**
* Sets the `checked` state. `true` for checked, `false` for unchecked
*
* Allows double binding with the `checkedChange` Output.
*/
set checked(checked) {
this.setChecked(checked, false);
}
/**
* Returns value `true` if state is selected for the checkbox.
*/
get checked() {
return this._checked;
}
/**
* Toggle the selected state of the checkbox.
*/
toggle() {
// Flip checked and reset indeterminate
this.setChecked(!this.checked, true);
}
/**
* Writes a value from `ngModel` to the component.
*
* In this case the value is the `checked` property.
*
* @param value boolean, corresponds to the `checked` property.
*/
writeValue(value) {
// Set checked and reset indeterminate
this.setChecked(!!value, true);
}
/**
* Sets a method in order to propagate changes back to the form.
*/
registerOnChange(fn) {
this.propagateChange = fn;
}
/**
* Registers a callback to be triggered when the control has been touched.
* @param fn Callback to be triggered when the checkbox is touched.
*/
registerOnTouched(fn) {
this.onTouched = fn;
}
/**
* `ControlValueAccessor` method to programmatically disable the checkbox.
*
* ex: `this.formGroup.get("myCheckbox").disable();`
*
* @param isDisabled `true` to disable the checkbox
*/
setDisabledState(isDisabled) {
this.disabled = isDisabled;
this.changeDetectorRef.markForCheck();
}
focusOut() {
this.onTouched();
}
/**
* Executes on the event of a change within `Checkbox` to block propagation.
*/
onChange(event) {
event.stopPropagation();
}
/**
* Handles click events on the `Checkbox` and emits changes to other classes.
*/
onClick(event) {
if (this.click.observers.length) {
// Disable default checkbox activation behavior which flips checked and resets indeterminate.
// This allows the parent component to control the checked/indeterminate properties.
event.preventDefault();
this.click.emit();
return;
}
if (!this.disabled) {
this.toggle();
this.transitionCheckboxState(this._checked ? CheckboxState.Checked : CheckboxState.Unchecked);
this.emitChangeEvent();
}
}
/**
* Handles changes between checkbox states.
*/
transitionCheckboxState(newState) {
this.currentCheckboxState = newState;
}
/**
* Creates instance of `CheckboxChange` used to propagate the change event.
*/
emitChangeEvent() {
this.checkedChange.emit(this.checked);
this.propagateChange(this.checked);
}
/**
* Updates the checkbox if it is in the indeterminate state.
*/
ngAfterViewInit() {
if (this.indeterminate && this.inputCheckbox && this.inputCheckbox.nativeElement) {
this.inputCheckbox.nativeElement.indeterminate = true;
}
}
/**
* Sets checked state and optionally resets indeterminate state.
*/
setChecked(checked, resetIndeterminate) {
if (checked === this._checked) {
return;
}
this._checked = checked;
// Reset indeterminate if requested
if (resetIndeterminate && this._indeterminate) {
this._indeterminate = false;
Promise.resolve().then(() => {
this.indeterminateChange.emit(this._indeterminate);
});
}
this.changeDetectorRef.markForCheck();
}
}
/**
* Variable used for creating unique ids for checkbox components.
*/
Checkbox.checkboxCount = 0;
Checkbox.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: Checkbox, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
Checkbox.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: Checkbox, selector: "cds-checkbox, ibm-checkbox", inputs: { disabled: "disabled", skeleton: "skeleton", hideLabel: "hideLabel", name: "name", id: "id", required: "required", value: "value", ariaLabel: "ariaLabel", ariaLabelledby: "ariaLabelledby", indeterminate: "indeterminate", checked: "checked" }, outputs: { click: "click", checkedChange: "checkedChange", indeterminateChange: "indeterminateChange" }, host: { listeners: { "focusout": "focusOut()" } }, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: Checkbox,
multi: true
}
], viewQueries: [{ propertyName: "inputCheckbox", first: true, predicate: ["inputCheckbox"], descendants: true }], ngImport: i0, template: `
<div class="cds--form-item cds--checkbox-wrapper">
<input
#inputCheckbox
class="cds--checkbox"
type="checkbox"
[id]="id + '_input'"
[value]="value"
[name]="name"
[required]="required"
[checked]="checked"
[disabled]="disabled"
[attr.aria-labelledby]="ariaLabelledby"
(change)="onChange($event)"
(click)="onClick($event)">
<label
[for]="id + '_input'"
[attr.aria-label]="ariaLabel"
class="cds--checkbox-label"
[ngClass]="{
'cds--skeleton' : skeleton
}">
<span [ngClass]="{'cds--visually-hidden' : hideLabel}" class="cds--checkbox-label-text">
<ng-content></ng-content>
</span>
</label>
</div>
`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: Checkbox, decorators: [{
type: Component,
args: [{
selector: "cds-checkbox, ibm-checkbox",
template: `
<div class="cds--form-item cds--checkbox-wrapper">
<input
#inputCheckbox
class="cds--checkbox"
type="checkbox"
[id]="id + '_input'"
[value]="value"
[name]="name"
[required]="required"
[checked]="checked"
[disabled]="disabled"
[attr.aria-labelledby]="ariaLabelledby"
(change)="onChange($event)"
(click)="onClick($event)">
<label
[for]="id + '_input'"
[attr.aria-label]="ariaLabel"
class="cds--checkbox-label"
[ngClass]="{
'cds--skeleton' : skeleton
}">
<span [ngClass]="{'cds--visually-hidden' : hideLabel}" class="cds--checkbox-label-text">
<ng-content></ng-content>
</span>
</label>
</div>
`,
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: Checkbox,
multi: true
}
],
changeDetection: ChangeDetectionStrategy.OnPush
}]
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { disabled: [{
type: Input
}], skeleton: [{
type: Input
}], hideLabel: [{
type: Input
}], name: [{
type: Input
}], id: [{
type: Input
}], required: [{
type: Input
}], value: [{
type: Input
}], ariaLabel: [{
type: Input
}], ariaLabelledby: [{
type: Input
}], indeterminate: [{
type: Input
}], checked: [{
type: Input
}], click: [{
type: Output
}], checkedChange: [{
type: Output
}], indeterminateChange: [{
type: Output
}], inputCheckbox: [{
type: ViewChild,
args: ["inputCheckbox"]
}], focusOut: [{
type: HostListener,
args: ["focusout"]
}] } });
// modules
class CheckboxModule {
}
CheckboxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
CheckboxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: CheckboxModule, declarations: [Checkbox], imports: [CommonModule,
FormsModule], exports: [Checkbox] });
CheckboxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CheckboxModule, imports: [CommonModule,
FormsModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CheckboxModule, decorators: [{
type: NgModule,
args: [{
declarations: [
Checkbox
],
exports: [
Checkbox
],
imports: [
CommonModule,
FormsModule
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { Checkbox, CheckboxModule, CheckboxState };
//# sourceMappingURL=carbon-components-angular-checkbox.mjs.map