@tarienna/ng-tri-state-checkbox
Version:
A TriStateCheckbox for Angular 9
339 lines (331 loc) • 14.5 kB
JavaScript
import { __values, __decorate, __extends } from 'tslib';
import { Renderer2, Input, ViewChild, Component, forwardRef, ViewEncapsulation, ElementRef, HostListener, Directive, NgModule } from '@angular/core';
import { NG_VALUE_ACCESSOR, CheckboxControlValueAccessor, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
var TriStateCheckboxState;
(function (TriStateCheckboxState) {
TriStateCheckboxState["NONE"] = "NONE";
TriStateCheckboxState["SOME"] = "SOME";
TriStateCheckboxState["ALL"] = "ALL";
})(TriStateCheckboxState || (TriStateCheckboxState = {}));
var NgTriStateCheckboxComponent = /** @class */ (function () {
function NgTriStateCheckboxComponent(renderer) {
this.renderer = renderer;
this.checkboxClass = 'tri-state-checkbox-default';
this._isDisabled = false;
this.controls = new Map();
this.currentState = TriStateCheckboxState.NONE;
this.onChanged = function (_) { };
this.onTouched = function () { };
}
NgTriStateCheckboxComponent_1 = NgTriStateCheckboxComponent;
NgTriStateCheckboxComponent.prototype.ngOnDestroy = function () {
this.controls.clear();
};
NgTriStateCheckboxComponent.prototype.registerOnChange = function (fn) {
if (typeof fn === 'function') {
this.onChanged = fn;
}
else {
this.onChanged = function (_) { };
}
};
NgTriStateCheckboxComponent.prototype.registerOnTouched = function (fn) {
if (typeof fn === 'function') {
this.onTouched = fn;
}
else {
this.onTouched = function () { };
}
};
NgTriStateCheckboxComponent.prototype.setDisabledState = function (isDisabled) {
var e_1, _a;
this._isDisabled = isDisabled;
try {
for (var _b = __values(this.controls.keys()), _c = _b.next(); !_c.done; _c = _b.next()) {
var currentControl = _c.value;
currentControl.setDisabled(isDisabled);
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
}
finally { if (e_1) throw e_1.error; }
}
};
Object.defineProperty(NgTriStateCheckboxComponent.prototype, "isDisabled", {
get: function () {
return this._isDisabled;
},
enumerable: true,
configurable: true
});
NgTriStateCheckboxComponent.prototype.addControl = function (control) {
var _this = this;
if (!!control) {
this.controls.set(control, control.readValue());
this.refreshState();
setTimeout(function () {
_this.emitValueChanged();
});
}
};
NgTriStateCheckboxComponent.prototype.removeControl = function (control) {
var _this = this;
this.controls.delete(control);
this.refreshState();
setTimeout(function () {
_this.emitValueChanged();
});
};
NgTriStateCheckboxComponent.prototype.changeControlValue = function (control, value) {
this.controls.set(control, value);
this.refreshState();
this.emitValueChanged();
};
NgTriStateCheckboxComponent.prototype.refreshState = function () {
this.currentState = this.getState();
this.refreshCheckboxState();
};
NgTriStateCheckboxComponent.prototype.getState = function () {
var e_2, _a;
var anyWasFalse = false;
var result = TriStateCheckboxState.NONE;
try {
for (var _b = __values(this.controls.values()), _c = _b.next(); !_c.done; _c = _b.next()) {
var currentValue = _c.value;
if (!!currentValue) {
result = TriStateCheckboxState.SOME;
}
if (!currentValue) {
anyWasFalse = true;
}
}
}
catch (e_2_1) { e_2 = { error: e_2_1 }; }
finally {
try {
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
}
finally { if (e_2) throw e_2.error; }
}
if (!anyWasFalse && result === TriStateCheckboxState.SOME) {
result = TriStateCheckboxState.ALL;
}
return result;
};
NgTriStateCheckboxComponent.prototype.onClick = function () {
var currentState = this.getState();
if (currentState === TriStateCheckboxState.SOME || currentState === TriStateCheckboxState.ALL) {
// gets unselected
this.writeAllControlValues(false);
this.currentState = TriStateCheckboxState.NONE;
}
else if (currentState === TriStateCheckboxState.NONE) {
this.writeAllControlValues(true);
this.currentState = TriStateCheckboxState.ALL;
}
this.refreshCheckboxState();
this.emitValueChanged();
};
NgTriStateCheckboxComponent.prototype.writeAllControlValues = function (nValue) {
var e_3, _a;
try {
for (var _b = __values(this.controls.keys()), _c = _b.next(); !_c.done; _c = _b.next()) {
var currentControl = _c.value;
if (currentControl) {
currentControl.writeValue(nValue);
}
}
}
catch (e_3_1) { e_3 = { error: e_3_1 }; }
finally {
try {
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
}
finally { if (e_3) throw e_3.error; }
}
};
NgTriStateCheckboxComponent.prototype.refreshCheckboxState = function () {
if (this.customCheckbox && this.customCheckbox.nativeElement) {
var checked = false;
var indeterminate = false;
if (this.currentState === TriStateCheckboxState.ALL) {
checked = true;
indeterminate = false;
}
else if (this.currentState === TriStateCheckboxState.SOME) {
checked = true;
indeterminate = true;
}
this.renderer.setProperty(this.customCheckbox.nativeElement, 'checked', checked);
// Browser Support for indeterminate: https://caniuse.com/#search=indeterminate
this.customCheckbox.nativeElement.indeterminate = indeterminate;
}
};
NgTriStateCheckboxComponent.prototype.emitValueChanged = function () {
var e_4, _a;
var values = [];
try {
for (var _b = __values(this.controls.values()), _c = _b.next(); !_c.done; _c = _b.next()) {
var value = _c.value;
if (!!value) {
values.push(value);
}
}
}
catch (e_4_1) { e_4 = { error: e_4_1 }; }
finally {
try {
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
}
finally { if (e_4) throw e_4.error; }
}
this.onChanged(values);
this.onTouched();
};
NgTriStateCheckboxComponent.prototype.reset = function () {
this.writeAllControlValues(false);
this.refreshState();
this.emitValueChanged();
};
NgTriStateCheckboxComponent.prototype.writeValue = function (obj) {
if (!!obj && obj.hasOwnProperty('length') && obj.length > 0) {
console.warn('It\'s currently not possible to set values. Maybe later there is a solution to do that.');
}
};
var NgTriStateCheckboxComponent_1;
NgTriStateCheckboxComponent.ctorParameters = function () { return [
{ type: Renderer2 }
]; };
__decorate([
Input()
], NgTriStateCheckboxComponent.prototype, "checkboxClass", void 0);
__decorate([
ViewChild('customCheckbox', { static: false })
], NgTriStateCheckboxComponent.prototype, "customCheckbox", void 0);
NgTriStateCheckboxComponent = NgTriStateCheckboxComponent_1 = __decorate([
Component({
selector: 'ng-tri-state-checkbox',
template: "<input type=\"checkbox\" [class]=\"checkboxClass\" (change)=\"onClick()\" #customCheckbox [disabled]=\"isDisabled\">\n",
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(function () { return NgTriStateCheckboxComponent_1; }),
multi: true
}
],
exportAs: 'ngTriStateCheckbox',
encapsulation: ViewEncapsulation.None,
styles: [".tri-state-checkbox-default{height:1rem;width:1rem;display:block;position:relative;pointer-events:auto;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;background-image:none;border:1px solid #adb5bd;border-radius:.15rem;box-sizing:border-box}.tri-state-checkbox-default:checked:not(:indeterminate){background-color:#0099da;color:#fff}.tri-state-checkbox-default:checked:not(:indeterminate):after{content:\"\";display:block;position:absolute;top:-1px;left:-1px;width:1rem;height:1rem;pointer-events:none;color:#fff;background-color:#0099da;background-repeat:no-repeat;background-size:50% 50%;background-position:50%;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e\");border:1px solid #0099da;border-radius:.15rem}.tri-state-checkbox-default:indeterminate{background-color:#fff;color:#adb5bd;border-color:#0099da}.tri-state-checkbox-default:indeterminate:after{content:\"\";display:block;position:absolute;top:calc(.225rem - 1px);left:calc(.225rem - 1px);width:.55rem;height:.55rem;pointer-events:none;background-color:#0099da;border:1px solid #0099da;border-radius:.15rem}"]
})
], NgTriStateCheckboxComponent);
return NgTriStateCheckboxComponent;
}());
var NgTriStateControlDirective = /** @class */ (function (_super) {
__extends(NgTriStateControlDirective, _super);
function NgTriStateControlDirective(renderer, elementRef) {
var _this = _super.call(this, renderer, elementRef) || this;
_this.renderer = renderer;
_this.elementRef = elementRef;
_this.checkedValue = null;
_this.isDisabled = false;
return _this;
}
NgTriStateControlDirective_1 = NgTriStateControlDirective;
NgTriStateControlDirective.prototype.ngOnInit = function () {
if (!!this.registry) {
this.registry.addControl(this);
}
};
NgTriStateControlDirective.prototype.ngOnDestroy = function () {
if (!!this.registry) {
this.registry.removeControl(this);
}
};
NgTriStateControlDirective.prototype.ngOnChanges = function (changes) {
if (changes && changes.hasOwnProperty('registry') && !changes.registry.firstChange) {
var registerChanged = changes.registry;
if (!!registerChanged.previousValue) {
registerChanged.previousValue.removeControl(this);
}
if (!!registerChanged.currentValue) {
registerChanged.currentValue.addControl(this);
}
}
};
NgTriStateControlDirective.prototype.readValue = function () {
if (this.checkedValue) {
return !!this.value ? this.value : this.checkedValue;
}
return null;
};
NgTriStateControlDirective.prototype.writeValue = function (value) {
_super.prototype.writeValue.call(this, value);
this.checkedValue = value;
this.updateValueOnRegistry();
};
NgTriStateControlDirective.prototype.setDisabled = function (state) {
this.isDisabled = state;
_super.prototype.setDisabledState.call(this, state);
};
NgTriStateControlDirective.prototype.updateValueOnRegistry = function () {
if (!!this.registry) {
this.registry.changeControlValue(this, this.readValue());
}
};
NgTriStateControlDirective.prototype.onChangeValue = function (value) {
this.checkedValue = value;
this.updateValueOnRegistry();
};
var NgTriStateControlDirective_1;
NgTriStateControlDirective.ctorParameters = function () { return [
{ type: Renderer2 },
{ type: ElementRef }
]; };
__decorate([
Input()
], NgTriStateControlDirective.prototype, "value", void 0);
__decorate([
Input('ngTriStateControl')
], NgTriStateControlDirective.prototype, "registry", void 0);
__decorate([
HostListener('change', ['$event.target.checked'])
], NgTriStateControlDirective.prototype, "onChangeValue", null);
NgTriStateControlDirective = NgTriStateControlDirective_1 = __decorate([
Directive({
selector: 'input[type=checkbox][ngTriStateControl]',
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(function () { return NgTriStateControlDirective_1; }),
multi: true
}
],
exportAs: 'ngTriStateControl'
})
], NgTriStateControlDirective);
return NgTriStateControlDirective;
}(CheckboxControlValueAccessor));
var NgTriStateCheckboxModule = /** @class */ (function () {
function NgTriStateCheckboxModule() {
}
NgTriStateCheckboxModule = __decorate([
NgModule({
declarations: [NgTriStateCheckboxComponent, NgTriStateControlDirective],
imports: [CommonModule, FormsModule, ReactiveFormsModule],
exports: [NgTriStateCheckboxComponent, NgTriStateControlDirective]
})
], NgTriStateCheckboxModule);
return NgTriStateCheckboxModule;
}());
/*
* Public API Surface of ng-tri-state-checkbox
*/
/**
* Generated bundle index. Do not edit.
*/
export { NgTriStateCheckboxComponent, NgTriStateCheckboxModule, NgTriStateControlDirective };
//# sourceMappingURL=tarienna-ng-tri-state-checkbox.js.map