@angular-mdl/core
Version:
Angular components, directives and styles based on material design lite https://getmdl.io.
135 lines • 13.5 kB
JavaScript
import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, forwardRef, HostBinding, HostListener, Input, Output, Renderer2, ViewEncapsulation, } from "@angular/core";
import { NG_VALUE_ACCESSOR } from "@angular/forms";
import { toBoolean } from "../common/boolean-property";
import { noop } from "../common/noop";
import * as i0 from "@angular/core";
import * as i1 from "@angular/forms";
const IS_FOCUSED = "is-focused";
export const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => MdlCheckboxComponent),
multi: true,
};
export class MdlCheckboxComponent {
constructor(elementRef, renderer) {
this.elementRef = elementRef;
this.renderer = renderer;
this.tabindex = null;
// eslint-disable-next-line @angular-eslint/no-output-native
this.change = new EventEmitter();
this.isCheckbox = true;
this.isUpgraded = true;
this.onTouchedCallback = noop;
this.onChangeCallback = noop;
this.internalValue = false;
this.internalDisabled = false;
this.el = elementRef.nativeElement;
}
get value() {
return this.internalValue;
}
set value(v) {
this.internalValue = v;
this.onChangeCallback(v);
this.change.emit(v);
}
get disabled() {
return this.internalDisabled;
}
set disabled(value) {
this.internalDisabled = toBoolean(value);
}
onClick() {
if (this.disabled) {
return;
}
this.value = !this.value;
}
writeValue(value) {
this.internalValue = value;
}
registerOnChange(fn) {
this.onChangeCallback = fn;
}
registerOnTouched(fn) {
this.onTouchedCallback = fn;
}
setDisabledState(isDisabled) {
this.disabled = isDisabled;
}
onFocus() {
this.renderer.addClass(this.el, IS_FOCUSED);
}
onBlur() {
this.renderer.removeClass(this.el, IS_FOCUSED);
this.onTouchedCallback();
}
}
MdlCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MdlCheckboxComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
MdlCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: MdlCheckboxComponent, selector: "mdl-checkbox", inputs: { tabindex: "tabindex", value: "value", disabled: "disabled" }, outputs: { change: "change" }, host: { listeners: { "click": "onClick()" }, properties: { "class.is-checked": "this.value", "class.is-disabled": "this.disabled", "class.mdl-checkbox": "this.isCheckbox", "class.is-upgraded": "this.isUpgraded" } }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR], ngImport: i0, template: `
<input
type="checkbox"
class="mdl-checkbox__input"
(focus)="onFocus()"
(blur)="onBlur()"
[disabled]="disabled"
[attr.tabindex]="tabindex"
[ngModel]="value"
/>
<span class="mdl-checkbox__label"><ng-content></ng-content></span>
<span class="mdl-checkbox__focus-helper"></span>
<span class="mdl-checkbox__box-outline">
<span class="mdl-checkbox__tick-outline"></span>
</span>
`, isInline: true, dependencies: [{ kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MdlCheckboxComponent, decorators: [{
type: Component,
args: [{
selector: "mdl-checkbox",
providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR],
template: `
<input
type="checkbox"
class="mdl-checkbox__input"
(focus)="onFocus()"
(blur)="onBlur()"
[disabled]="disabled"
[attr.tabindex]="tabindex"
[ngModel]="value"
/>
<span class="mdl-checkbox__label"><ng-content></ng-content></span>
<span class="mdl-checkbox__focus-helper"></span>
<span class="mdl-checkbox__box-outline">
<span class="mdl-checkbox__tick-outline"></span>
</span>
`,
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { tabindex: [{
type: Input
}], value: [{
type: Input
}, {
type: HostBinding,
args: ["class.is-checked"]
}], disabled: [{
type: Input
}, {
type: HostBinding,
args: ["class.is-disabled"]
}],
// eslint-disable-next-line @angular-eslint/no-output-native
change: [{
type: Output
}], isCheckbox: [{
type: HostBinding,
args: ["class.mdl-checkbox"]
}], isUpgraded: [{
type: HostBinding,
args: ["class.is-upgraded"]
}], onClick: [{
type: HostListener,
args: ["click"]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWRsLWNoZWNrYm94LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NvcmUvc3JjL2xpYi9jaGVja2JveC9tZGwtY2hlY2tib3guY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCx1QkFBdUIsRUFDdkIsU0FBUyxFQUNULFVBQVUsRUFDVixZQUFZLEVBQ1osVUFBVSxFQUNWLFdBQVcsRUFDWCxZQUFZLEVBQ1osS0FBSyxFQUNMLE1BQU0sRUFFTixTQUFTLEVBQ1QsaUJBQWlCLEdBQ2xCLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBd0IsaUJBQWlCLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUN6RSxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sNEJBQTRCLENBQUM7QUFDdkQsT0FBTyxFQUFFLElBQUksRUFBRSxNQUFNLGdCQUFnQixDQUFDOzs7QUFFdEMsTUFBTSxVQUFVLEdBQUcsWUFBWSxDQUFDO0FBQ2hDLE1BQU0sQ0FBQyxNQUFNLG1DQUFtQyxHQUFhO0lBQzNELE9BQU8sRUFBRSxpQkFBaUI7SUFDMUIsV0FBVyxFQUFFLFVBQVUsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxvQkFBb0IsQ0FBQztJQUNuRCxLQUFLLEVBQUUsSUFBSTtDQUNaLENBQUM7QUF3QkYsTUFBTSxPQUFPLG9CQUFvQjtJQTBDL0IsWUFBb0IsVUFBc0IsRUFBVSxRQUFtQjtRQUFuRCxlQUFVLEdBQVYsVUFBVSxDQUFZO1FBQVUsYUFBUSxHQUFSLFFBQVEsQ0FBVztRQXhDdkUsYUFBUSxHQUFrQixJQUFJLENBQUM7UUF5Qi9CLDZEQUE2RDtRQUM3RCxXQUFNLEdBQTBCLElBQUksWUFBWSxFQUFXLENBQUM7UUFHNUQsZUFBVSxHQUFHLElBQUksQ0FBQztRQUdsQixlQUFVLEdBQUcsSUFBSSxDQUFDO1FBR1Ysc0JBQWlCLEdBQWUsSUFBSSxDQUFDO1FBQ3JDLHFCQUFnQixHQUF5QixJQUFJLENBQUM7UUFDOUMsa0JBQWEsR0FBRyxLQUFLLENBQUM7UUFDdEIscUJBQWdCLEdBQUcsS0FBSyxDQUFDO1FBRy9CLElBQUksQ0FBQyxFQUFFLEdBQUcsVUFBVSxDQUFDLGFBQWEsQ0FBQztJQUNyQyxDQUFDO0lBeENELElBQUksS0FBSztRQUNQLE9BQU8sSUFBSSxDQUFDLGFBQWEsQ0FBQztJQUM1QixDQUFDO0lBRUQsSUFFSSxLQUFLLENBQUMsQ0FBVTtRQUNsQixJQUFJLENBQUMsYUFBYSxHQUFHLENBQUMsQ0FBQztRQUN2QixJQUFJLENBQUMsZ0JBQWdCLENBQUMsQ0FBQyxDQUFDLENBQUM7UUFDekIsSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLENBQUM7SUFDdEIsQ0FBQztJQUVELElBQUksUUFBUTtRQUNWLE9BQU8sSUFBSSxDQUFDLGdCQUFnQixDQUFDO0lBQy9CLENBQUM7SUFFRCxJQUVJLFFBQVEsQ0FBQyxLQUFjO1FBQ3pCLElBQUksQ0FBQyxnQkFBZ0IsR0FBRyxTQUFTLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDM0MsQ0FBQztJQXVCRCxPQUFPO1FBQ0wsSUFBSSxJQUFJLENBQUMsUUFBUSxFQUFFO1lBQ2pCLE9BQU87U0FDUjtRQUNELElBQUksQ0FBQyxLQUFLLEdBQUcsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDO0lBQzNCLENBQUM7SUFFRCxVQUFVLENBQUMsS0FBYztRQUN2QixJQUFJLENBQUMsYUFBYSxHQUFHLEtBQUssQ0FBQztJQUM3QixDQUFDO0lBRUQsZ0JBQWdCLENBQUMsRUFBaUI7UUFDaEMsSUFBSSxDQUFDLGdCQUFnQixHQUFHLEVBQUUsQ0FBQztJQUM3QixDQUFDO0lBRUQsaUJBQWlCLENBQUMsRUFBaUI7UUFDakMsSUFBSSxDQUFDLGlCQUFpQixHQUFHLEVBQUUsQ0FBQztJQUM5QixDQUFDO0lBRUQsZ0JBQWdCLENBQUMsVUFBbUI7UUFDbEMsSUFBSSxDQUFDLFFBQVEsR0FBRyxVQUFVLENBQUM7SUFDN0IsQ0FBQztJQUVELE9BQU87UUFDTCxJQUFJLENBQUMsUUFBUSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsRUFBRSxFQUFFLFVBQVUsQ0FBQyxDQUFDO0lBQzlDLENBQUM7SUFFRCxNQUFNO1FBQ0osSUFBSSxDQUFDLFFBQVEsQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLEVBQUUsRUFBRSxVQUFVLENBQUMsQ0FBQztRQUMvQyxJQUFJLENBQUMsaUJBQWlCLEVBQUUsQ0FBQztJQUMzQixDQUFDOztpSEE3RVUsb0JBQW9CO3FHQUFwQixvQkFBb0Isc1dBcEJwQixDQUFDLG1DQUFtQyxDQUFDLDBCQUN0Qzs7Ozs7Ozs7Ozs7Ozs7O0dBZVQ7MkZBSVUsb0JBQW9CO2tCQXRCaEMsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsY0FBYztvQkFDeEIsU0FBUyxFQUFFLENBQUMsbUNBQW1DLENBQUM7b0JBQ2hELFFBQVEsRUFBRTs7Ozs7Ozs7Ozs7Ozs7O0dBZVQ7b0JBQ0QsYUFBYSxFQUFFLGlCQUFpQixDQUFDLElBQUk7b0JBQ3JDLGVBQWUsRUFBRSx1QkFBdUIsQ0FBQyxNQUFNO2lCQUNoRDt5SEFHQyxRQUFRO3NCQURQLEtBQUs7Z0JBU0YsS0FBSztzQkFGUixLQUFLOztzQkFDTCxXQUFXO3VCQUFDLGtCQUFrQjtnQkFhM0IsUUFBUTtzQkFGWCxLQUFLOztzQkFDTCxXQUFXO3VCQUFDLG1CQUFtQjs7UUFNaEMsNkRBQTZEO1FBQzdELE1BQU07c0JBRkwsTUFBTTtnQkFLUCxVQUFVO3NCQURULFdBQVc7dUJBQUMsb0JBQW9CO2dCQUlqQyxVQUFVO3NCQURULFdBQVc7dUJBQUMsbUJBQW1CO2dCQWNoQyxPQUFPO3NCQUROLFlBQVk7dUJBQUMsT0FBTyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICBDb21wb25lbnQsXG4gIEVsZW1lbnRSZWYsXG4gIEV2ZW50RW1pdHRlcixcbiAgZm9yd2FyZFJlZixcbiAgSG9zdEJpbmRpbmcsXG4gIEhvc3RMaXN0ZW5lcixcbiAgSW5wdXQsXG4gIE91dHB1dCxcbiAgUHJvdmlkZXIsXG4gIFJlbmRlcmVyMixcbiAgVmlld0VuY2Fwc3VsYXRpb24sXG59IGZyb20gXCJAYW5ndWxhci9jb3JlXCI7XG5pbXBvcnQgeyBDb250cm9sVmFsdWVBY2Nlc3NvciwgTkdfVkFMVUVfQUNDRVNTT1IgfSBmcm9tIFwiQGFuZ3VsYXIvZm9ybXNcIjtcbmltcG9ydCB7IHRvQm9vbGVhbiB9IGZyb20gXCIuLi9jb21tb24vYm9vbGVhbi1wcm9wZXJ0eVwiO1xuaW1wb3J0IHsgbm9vcCB9IGZyb20gXCIuLi9jb21tb24vbm9vcFwiO1xuXG5jb25zdCBJU19GT0NVU0VEID0gXCJpcy1mb2N1c2VkXCI7XG5leHBvcnQgY29uc3QgQ1VTVE9NX0lOUFVUX0NPTlRST0xfVkFMVUVfQUNDRVNTT1I6IFByb3ZpZGVyID0ge1xuICBwcm92aWRlOiBOR19WQUxVRV9BQ0NFU1NPUixcbiAgdXNlRXhpc3Rpbmc6IGZvcndhcmRSZWYoKCkgPT4gTWRsQ2hlY2tib3hDb21wb25lbnQpLFxuICBtdWx0aTogdHJ1ZSxcbn07XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogXCJtZGwtY2hlY2tib3hcIixcbiAgcHJvdmlkZXJzOiBbQ1VTVE9NX0lOUFVUX0NPTlRST0xfVkFMVUVfQUNDRVNTT1JdLFxuICB0ZW1wbGF0ZTogYFxuICAgIDxpbnB1dFxuICAgICAgdHlwZT1cImNoZWNrYm94XCJcbiAgICAgIGNsYXNzPVwibWRsLWNoZWNrYm94X19pbnB1dFwiXG4gICAgICAoZm9jdXMpPVwib25Gb2N1cygpXCJcbiAgICAgIChibHVyKT1cIm9uQmx1cigpXCJcbiAgICAgIFtkaXNhYmxlZF09XCJkaXNhYmxlZFwiXG4gICAgICBbYXR0ci50YWJpbmRleF09XCJ0YWJpbmRleFwiXG4gICAgICBbbmdNb2RlbF09XCJ2YWx1ZVwiXG4gICAgLz5cbiAgICA8c3BhbiBjbGFzcz1cIm1kbC1jaGVja2JveF9fbGFiZWxcIj48bmctY29udGVudD48L25nLWNvbnRlbnQ+PC9zcGFuPlxuICAgIDxzcGFuIGNsYXNzPVwibWRsLWNoZWNrYm94X19mb2N1cy1oZWxwZXJcIj48L3NwYW4+XG4gICAgPHNwYW4gY2xhc3M9XCJtZGwtY2hlY2tib3hfX2JveC1vdXRsaW5lXCI+XG4gICAgICA8c3BhbiBjbGFzcz1cIm1kbC1jaGVja2JveF9fdGljay1vdXRsaW5lXCI+PC9zcGFuPlxuICAgIDwvc3Bhbj5cbiAgYCxcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG59KVxuZXhwb3J0IGNsYXNzIE1kbENoZWNrYm94Q29tcG9uZW50IGltcGxlbWVudHMgQ29udHJvbFZhbHVlQWNjZXNzb3Ige1xuICBASW5wdXQoKVxuICB0YWJpbmRleDogbnVtYmVyIHwgbnVsbCA9IG51bGw7XG5cbiAgZ2V0IHZhbHVlKCk6IGJvb2xlYW4ge1xuICAgIHJldHVybiB0aGlzLmludGVybmFsVmFsdWU7XG4gIH1cblxuICBASW5wdXQoKVxuICBASG9zdEJpbmRpbmcoXCJjbGFzcy5pcy1jaGVja2VkXCIpXG4gIHNldCB2YWx1ZSh2OiBib29sZWFuKSB7XG4gICAgdGhpcy5pbnRlcm5hbFZhbHVlID0gdjtcbiAgICB0aGlzLm9uQ2hhbmdlQ2FsbGJhY2sodik7XG4gICAgdGhpcy5jaGFuZ2UuZW1pdCh2KTtcbiAgfVxuXG4gIGdldCBkaXNhYmxlZCgpOiBib29sZWFuIHtcbiAgICByZXR1cm4gdGhpcy5pbnRlcm5hbERpc2FibGVkO1xuICB9XG5cbiAgQElucHV0KClcbiAgQEhvc3RCaW5kaW5nKFwiY2xhc3MuaXMtZGlzYWJsZWRcIilcbiAgc2V0IGRpc2FibGVkKHZhbHVlOiBib29sZWFuKSB7XG4gICAgdGhpcy5pbnRlcm5hbERpc2FibGVkID0gdG9Cb29sZWFuKHZhbHVlKTtcbiAgfVxuXG4gIEBPdXRwdXQoKVxuICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgIEBhbmd1bGFyLWVzbGludC9uby1vdXRwdXQtbmF0aXZlXG4gIGNoYW5nZTogRXZlbnRFbWl0dGVyPGJvb2xlYW4+ID0gbmV3IEV2ZW50RW1pdHRlcjxib29sZWFuPigpO1xuXG4gIEBIb3N0QmluZGluZyhcImNsYXNzLm1kbC1jaGVja2JveFwiKVxuICBpc0NoZWNrYm94ID0gdHJ1ZTtcblxuICBASG9zdEJpbmRpbmcoXCJjbGFzcy5pcy11cGdyYWRlZFwiKVxuICBpc1VwZ3JhZGVkID0gdHJ1ZTtcblxuICBwcml2YXRlIHJlYWRvbmx5IGVsOiBIVE1MRWxlbWVudDtcbiAgcHJpdmF0ZSBvblRvdWNoZWRDYWxsYmFjazogKCkgPT4gdm9pZCA9IG5vb3A7XG4gIHByaXZhdGUgb25DaGFuZ2VDYWxsYmFjazogKF86IHVua25vd24pID0+IHZvaWQgPSBub29wO1xuICBwcml2YXRlIGludGVybmFsVmFsdWUgPSBmYWxzZTtcbiAgcHJpdmF0ZSBpbnRlcm5hbERpc2FibGVkID0gZmFsc2U7XG5cbiAgY29uc3RydWN0b3IocHJpdmF0ZSBlbGVtZW50UmVmOiBFbGVtZW50UmVmLCBwcml2YXRlIHJlbmRlcmVyOiBSZW5kZXJlcjIpIHtcbiAgICB0aGlzLmVsID0gZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50O1xuICB9XG5cbiAgQEhvc3RMaXN0ZW5lcihcImNsaWNrXCIpXG4gIG9uQ2xpY2soKTogdm9pZCB7XG4gICAgaWYgKHRoaXMuZGlzYWJsZWQpIHtcbiAgICAgIHJldHVybjtcbiAgICB9XG4gICAgdGhpcy52YWx1ZSA9ICF0aGlzLnZhbHVlO1xuICB9XG5cbiAgd3JpdGVWYWx1ZSh2YWx1ZTogYm9vbGVhbik6IHZvaWQge1xuICAgIHRoaXMuaW50ZXJuYWxWYWx1ZSA9IHZhbHVlO1xuICB9XG5cbiAgcmVnaXN0ZXJPbkNoYW5nZShmbjogKCkgPT4gdW5rbm93bik6IHZvaWQge1xuICAgIHRoaXMub25DaGFuZ2VDYWxsYmFjayA9IGZuO1xuICB9XG5cbiAgcmVnaXN0ZXJPblRvdWNoZWQoZm46ICgpID0+IHVua25vd24pOiB2b2lkIHtcbiAgICB0aGlzLm9uVG91Y2hlZENhbGxiYWNrID0gZm47XG4gIH1cblxuICBzZXREaXNhYmxlZFN0YXRlKGlzRGlzYWJsZWQ6IGJvb2xlYW4pOiB2b2lkIHtcbiAgICB0aGlzLmRpc2FibGVkID0gaXNEaXNhYmxlZDtcbiAgfVxuXG4gIG9uRm9jdXMoKTogdm9pZCB7XG4gICAgdGhpcy5yZW5kZXJlci5hZGRDbGFzcyh0aGlzLmVsLCBJU19GT0NVU0VEKTtcbiAgfVxuXG4gIG9uQmx1cigpOiB2b2lkIHtcbiAgICB0aGlzLnJlbmRlcmVyLnJlbW92ZUNsYXNzKHRoaXMuZWwsIElTX0ZPQ1VTRUQpO1xuICAgIHRoaXMub25Ub3VjaGVkQ2FsbGJhY2soKTtcbiAgfVxufVxuIl19