igniteui-angular
Version:
Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps
276 lines (271 loc) • 13.7 kB
JavaScript
import { CheckboxBaseDirective, IgxRippleDirective } from 'igniteui-angular/directives';
export { LabelPosition } from 'igniteui-angular/directives';
import * as i0 from '@angular/core';
import { booleanAttribute, HostBinding, Input, Component, NgModule } from '@angular/core';
import { EDITOR_PROVIDER } from 'igniteui-angular/core';
/**
* Allows users to make a binary choice for a certain condition.
*
* @igxModule IgxCheckboxModule
*
* @igxTheme igx-checkbox-theme
*
* @igxKeywords checkbox, label
*
* @igxGroup Data entry and display
*
* @remarks
* The Ignite UI Checkbox is a selection control that allows users to make a binary choice for a certain condition.It behaves similarly
* to the native browser checkbox.
*
* @example
* ```html
* <igx-checkbox [checked]="true">
* simple checkbox
* </igx-checkbox>
* ```
*/
class IgxCheckboxComponent extends CheckboxBaseDirective {
constructor() {
super(...arguments);
/**
* Returns the class of the checkbox component.
*
* @example
* ```typescript
* let class = this.checkbox.cssClass;
* ```
*/
this.cssClass = 'igx-checkbox';
/**
* Sets/gets whether the checkbox component is on focus.
* Default value is `false`.
*
* @example
* ```typescript
* this.checkbox.focused = true;
* ```
* ```typescript
* let isFocused = this.checkbox.focused;
* ```
*/
this.focused = false;
/**
* Sets/gets the checkbox indeterminate visual state.
* Default value is `false`;
*
* @example
* ```html
* <igx-checkbox [indeterminate]="true"></igx-checkbox>
* ```
* ```typescript
* let isIndeterminate = this.checkbox.indeterminate;
* ```
*/
this.indeterminate = false;
/**
* Sets/gets whether the checkbox is disabled.
* Default value is `false`.
*
* @example
* ```html
* <igx-checkbox disabled></igx-checkbox>
* ```
* ```typescript
* let isDisabled = this.checkbox.disabled;
* ```
*/
this.disabled = false;
/**
* Sets/gets whether the checkbox is invalid.
* Default value is `false`.
*
* @example
* ```html
* <igx-checkbox invalid></igx-checkbox>
* ```
* ```typescript
* let isInvalid = this.checkbox.invalid;
* ```
*/
this.invalid = false;
/**
* Sets/gets whether the checkbox is readonly.
* Default value is `false`.
*
* @example
* ```html
* <igx-checkbox [readonly]="true"></igx-checkbox>
* ```
* ```typescript
* let readonly = this.checkbox.readonly;
* ```
*/
this.readonly = false;
/**
* Sets/gets whether the checkbox should disable all css transitions.
* Default value is `false`.
*
* @example
* ```html
* <igx-checkbox [disableTransitions]="true"></igx-checkbox>
* ```
* ```typescript
* let disableTransitions = this.checkbox.disableTransitions;
* ```
*/
this.disableTransitions = false;
}
/**
* Returns if the component is of type `material`.
*
* @example
* ```typescript
* let checkbox = this.checkbox.material;
* ```
*/
get material() {
return this.theme === 'material';
}
/**
* Returns if the component is of type `indigo`.
*
* @example
* ```typescript
* let checkbox = this.checkbox.indigo;
* ```
*/
get indigo() {
return this.theme === 'indigo';
}
/**
* Returns if the component is of type `bootstrap`.
*
* @example
* ```typescript
* let checkbox = this.checkbox.bootstrap;
* ```
*/
get bootstrap() {
return this.theme === 'bootstrap';
}
/**
* Returns if the component is of type `fluent`.
*
* @example
* ```typescript
* let checkbox = this.checkbox.fluent;
* ```
*/
get fluent() {
return this.theme === 'fluent';
}
/**
* Sets/gets whether the checkbox is checked.
* Default value is `false`.
*
* @example
* ```html
* <igx-checkbox [checked]="true"></igx-checkbox>
* ```
* ```typescript
* let isChecked = this.checkbox.checked;
* ```
*/
set checked(value) {
super.checked = value;
}
get checked() {
return super.checked;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: IgxCheckboxComponent, isStandalone: true, selector: "igx-checkbox", inputs: { indeterminate: ["indeterminate", "indeterminate", booleanAttribute], checked: ["checked", "checked", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], invalid: ["invalid", "invalid", booleanAttribute], readonly: ["readonly", "readonly", booleanAttribute], disableTransitions: ["disableTransitions", "disableTransitions", booleanAttribute] }, host: { properties: { "class.igx-checkbox": "this.cssClass", "class.igx-checkbox--material": "this.material", "class.igx-checkbox--indigo": "this.indigo", "class.igx-checkbox--bootstrap": "this.bootstrap", "class.igx-checkbox--fluent": "this.fluent", "class.igx-checkbox--focused": "this.focused", "class.igx-checkbox--indeterminate": "this.indeterminate", "class.igx-checkbox--checked": "this.checked", "class.igx-checkbox--disabled": "this.disabled", "class.igx-checkbox--invalid": "this.invalid", "class.igx-checkbox--plain": "this.disableTransitions" } }, providers: [
{
provide: EDITOR_PROVIDER,
useExisting: IgxCheckboxComponent,
multi: true,
},
], usesInheritance: true, ngImport: i0, template: "<input #checkbox class=\"igx-checkbox__input\"\n type=\"checkbox\"\n [id]=\"inputId\"\n [name]=\"name\"\n [value]=\"value\"\n [tabindex]=\"tabindex\"\n [disabled]=\"disabled\"\n [indeterminate]=\"indeterminate\"\n [checked]=\"checked\"\n [required]=\"required\"\n [attr.aria-required]=\"required\"\n [attr.aria-invalid]=\"invalid\"\n [attr.aria-checked]=\"ariaChecked\"\n [attr.aria-labelledby]=\"ariaLabel ? null : ariaLabelledBy\"\n [attr.aria-label]=\"ariaLabel\"\n (change)=\"_onCheckboxChange($event)\"\n (blur)=\"onBlur()\" />\n\n<div\n igxRipple\n igxRippleTarget=\".igx-checkbox__ripple\"\n [igxRippleDisabled]=\"disableRipple\"\n [igxRippleCentered]=\"true\"\n [igxRippleDuration]=\"300\"\n class=\"igx-checkbox__composite-wrapper\"\n>\n <span #label class=\"igx-checkbox__composite\">\n @if (theme === 'indigo') {\n <svg class=\"igx-checkbox__composite-mark\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <rect width=\"18\" height=\"4\" x=\"2\" y=\"9\" rx=\"1.85\"/>\n <path d=\"M19.033 5a1.966 1.966 0 0 0-1.418.586l-8.479 8.577-2.753-2.77a1.971 1.971 0 0 0-2.8 0 1.998 1.998 0 0 0 0 2.822l4.155 4.196a1.955 1.955 0 0 0 2.8 0l9.879-9.99a1.998 1.998 0 0 0 0-2.821 1.966 1.966 0 0 0-1.384-.6Z\"/>\n </svg>\n } @else {\n <svg class=\"igx-checkbox__composite-mark\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path d=\"M4.1,12.7 9,17.6 20.3,6.3\"/>\n </svg>\n }\n </span>\n\n <div class=\"igx-checkbox__ripple\"></div>\n</div>\n\n<span #placeholderLabel\n [class]=\"labelClass\"\n [id]=\"labelId\">\n <ng-content></ng-content>\n</span>\n", dependencies: [{ kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxCheckboxComponent, decorators: [{
type: Component,
args: [{ selector: 'igx-checkbox', providers: [
{
provide: EDITOR_PROVIDER,
useExisting: IgxCheckboxComponent,
multi: true,
},
], preserveWhitespaces: false, imports: [IgxRippleDirective], template: "<input #checkbox class=\"igx-checkbox__input\"\n type=\"checkbox\"\n [id]=\"inputId\"\n [name]=\"name\"\n [value]=\"value\"\n [tabindex]=\"tabindex\"\n [disabled]=\"disabled\"\n [indeterminate]=\"indeterminate\"\n [checked]=\"checked\"\n [required]=\"required\"\n [attr.aria-required]=\"required\"\n [attr.aria-invalid]=\"invalid\"\n [attr.aria-checked]=\"ariaChecked\"\n [attr.aria-labelledby]=\"ariaLabel ? null : ariaLabelledBy\"\n [attr.aria-label]=\"ariaLabel\"\n (change)=\"_onCheckboxChange($event)\"\n (blur)=\"onBlur()\" />\n\n<div\n igxRipple\n igxRippleTarget=\".igx-checkbox__ripple\"\n [igxRippleDisabled]=\"disableRipple\"\n [igxRippleCentered]=\"true\"\n [igxRippleDuration]=\"300\"\n class=\"igx-checkbox__composite-wrapper\"\n>\n <span #label class=\"igx-checkbox__composite\">\n @if (theme === 'indigo') {\n <svg class=\"igx-checkbox__composite-mark\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <rect width=\"18\" height=\"4\" x=\"2\" y=\"9\" rx=\"1.85\"/>\n <path d=\"M19.033 5a1.966 1.966 0 0 0-1.418.586l-8.479 8.577-2.753-2.77a1.971 1.971 0 0 0-2.8 0 1.998 1.998 0 0 0 0 2.822l4.155 4.196a1.955 1.955 0 0 0 2.8 0l9.879-9.99a1.998 1.998 0 0 0 0-2.821 1.966 1.966 0 0 0-1.384-.6Z\"/>\n </svg>\n } @else {\n <svg class=\"igx-checkbox__composite-mark\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path d=\"M4.1,12.7 9,17.6 20.3,6.3\"/>\n </svg>\n }\n </span>\n\n <div class=\"igx-checkbox__ripple\"></div>\n</div>\n\n<span #placeholderLabel\n [class]=\"labelClass\"\n [id]=\"labelId\">\n <ng-content></ng-content>\n</span>\n" }]
}], propDecorators: { cssClass: [{
type: HostBinding,
args: ['class.igx-checkbox']
}], material: [{
type: HostBinding,
args: ['class.igx-checkbox--material']
}], indigo: [{
type: HostBinding,
args: ['class.igx-checkbox--indigo']
}], bootstrap: [{
type: HostBinding,
args: ['class.igx-checkbox--bootstrap']
}], fluent: [{
type: HostBinding,
args: ['class.igx-checkbox--fluent']
}], focused: [{
type: HostBinding,
args: ['class.igx-checkbox--focused']
}], indeterminate: [{
type: HostBinding,
args: ['class.igx-checkbox--indeterminate']
}, {
type: Input,
args: [{ transform: booleanAttribute }]
}], checked: [{
type: HostBinding,
args: ['class.igx-checkbox--checked']
}, {
type: Input,
args: [{ transform: booleanAttribute }]
}], disabled: [{
type: HostBinding,
args: ['class.igx-checkbox--disabled']
}, {
type: Input,
args: [{ transform: booleanAttribute }]
}], invalid: [{
type: HostBinding,
args: ['class.igx-checkbox--invalid']
}, {
type: Input,
args: [{ transform: booleanAttribute }]
}], readonly: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], disableTransitions: [{
type: HostBinding,
args: ['class.igx-checkbox--plain']
}, {
type: Input,
args: [{ transform: booleanAttribute }]
}] } });
/**
* @hidden
* IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
*/
class IgxCheckboxModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxCheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.2", ngImport: i0, type: IgxCheckboxModule, imports: [IgxCheckboxComponent], exports: [IgxCheckboxComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxCheckboxModule }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxCheckboxModule, decorators: [{
type: NgModule,
args: [{
imports: [IgxCheckboxComponent],
exports: [IgxCheckboxComponent]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { IgxCheckboxComponent, IgxCheckboxModule };
//# sourceMappingURL=igniteui-angular-checkbox.mjs.map