@doku-dev/doku-fragment
Version:
A new Angular UI library that moving away from Bootstrap and built from scratch.
89 lines • 10.4 kB
JavaScript
import { CommonModule } from '@angular/common';
import { ChangeDetectionStrategy, Component, EventEmitter, HostBinding, Input, Optional, Output, Self, ViewEncapsulation, } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/forms";
let nextId = 1;
export class DokuToggle {
constructor(ngControl) {
this.ngControl = ngControl;
/**
* Unique id of the toggle.
* Default value is auto-generated.
*
* @default 'd-toggle-[nextId]'
*/
this.id = `d-toggle-${nextId++}`;
/**
* Whether the toggle is checked.
*
* If using reactive forms or template-driven forms, the value will be replaced.
*
* @default false
*/
this.checked = false;
/**
* Whether the toggle is disabled.
*
* If using reactive forms, the value will be replaced.
* Use form control's method to disable the toggle.
*
* @default false;
*/
this.disabled = false;
/**
* Vertical alignment of the toggle.
*
* @default 'center'
*/
this.verticalAlignment = 'center';
this.checkedChange = new EventEmitter();
if (this.ngControl !== null) {
this.ngControl.valueAccessor = this;
}
}
get classes() {
return ['d-toggle-container', `d-toggle-v-alignment-${this.verticalAlignment}`];
}
writeValue(value) {
this.checked = value;
}
registerOnTouched(fn) {
this.onTouched = fn;
}
registerOnChange(fn) {
this.onChange = fn;
}
setDisabledState(isDisabled) {
this.disabled = isDisabled;
}
onToggleChange(ev) {
const checked = ev.target.checked;
this.checkedChange.emit(checked);
this.onChange?.(checked);
this.onTouched?.();
}
}
DokuToggle.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuToggle, deps: [{ token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
DokuToggle.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DokuToggle, isStandalone: true, selector: "doku-toggle", inputs: { id: "id", checked: "checked", disabled: "disabled", verticalAlignment: "verticalAlignment" }, outputs: { checkedChange: "checkedChange" }, host: { properties: { "class": "this.classes" } }, exportAs: ["dokuToggle"], ngImport: i0, template: "<input\n [id]=\"id\"\n type=\"checkbox\"\n class=\"d-toggle\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n (change)=\"onToggleChange($event)\"\n/>\n<div class=\"d-toggle-content\">\n <label [for]=\"id\"><ng-content></ng-content></label>\n <ng-content select=\"doku-toggle-description\"></ng-content>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DokuToggle, decorators: [{
type: Component,
args: [{ selector: 'doku-toggle', exportAs: 'dokuToggle', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<input\n [id]=\"id\"\n type=\"checkbox\"\n class=\"d-toggle\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n (change)=\"onToggleChange($event)\"\n/>\n<div class=\"d-toggle-content\">\n <label [for]=\"id\"><ng-content></ng-content></label>\n <ng-content select=\"doku-toggle-description\"></ng-content>\n</div>\n" }]
}], ctorParameters: function () { return [{ type: i1.NgControl, decorators: [{
type: Optional
}, {
type: Self
}] }]; }, propDecorators: { id: [{
type: Input
}], checked: [{
type: Input
}], disabled: [{
type: Input
}], verticalAlignment: [{
type: Input
}], checkedChange: [{
type: Output
}], classes: [{
type: HostBinding,
args: ['class']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG9nZ2xlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2Rva3UtZnJhZ21lbnQvc3JjL2xpYi90b2dnbGUvdG9nZ2xlLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2Rva3UtZnJhZ21lbnQvc3JjL2xpYi90b2dnbGUvdG9nZ2xlLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxZQUFZLEVBQVcsTUFBTSxpQkFBaUIsQ0FBQztBQUN4RCxPQUFPLEVBQ0wsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFDVCxZQUFZLEVBQ1osV0FBVyxFQUNYLEtBQUssRUFDTCxRQUFRLEVBQ1IsTUFBTSxFQUNOLElBQUksRUFDSixpQkFBaUIsR0FDbEIsTUFBTSxlQUFlLENBQUM7OztBQUd2QixJQUFJLE1BQU0sR0FBRyxDQUFDLENBQUM7QUFXZixNQUFNLE9BQU8sVUFBVTtJQXFDckIsWUFBd0MsU0FBb0I7UUFBcEIsY0FBUyxHQUFULFNBQVMsQ0FBVztRQXBDNUQ7Ozs7O1dBS0c7UUFDTSxPQUFFLEdBQUcsWUFBWSxNQUFNLEVBQUUsRUFBRSxDQUFDO1FBRXJDOzs7Ozs7V0FNRztRQUNNLFlBQU8sR0FBRyxLQUFLLENBQUM7UUFFekI7Ozs7Ozs7V0FPRztRQUNNLGFBQVEsR0FBRyxLQUFLLENBQUM7UUFFMUI7Ozs7V0FJRztRQUNNLHNCQUFpQixHQUFnQyxRQUFRLENBQUM7UUFFekQsa0JBQWEsR0FBRyxJQUFJLFlBQVksRUFBVyxDQUFDO1FBR3BELElBQUksSUFBSSxDQUFDLFNBQVMsS0FBSyxJQUFJLEVBQUU7WUFDM0IsSUFBSSxDQUFDLFNBQVMsQ0FBQyxhQUFhLEdBQUcsSUFBSSxDQUFDO1NBQ3JDO0lBQ0gsQ0FBQztJQUVELElBQ2MsT0FBTztRQUNuQixPQUFPLENBQUMsb0JBQW9CLEVBQUUsd0JBQXdCLElBQUksQ0FBQyxpQkFBaUIsRUFBRSxDQUFDLENBQUM7SUFDbEYsQ0FBQztJQUtELFVBQVUsQ0FBQyxLQUFjO1FBQ3ZCLElBQUksQ0FBQyxPQUFPLEdBQUcsS0FBSyxDQUFDO0lBQ3ZCLENBQUM7SUFFRCxpQkFBaUIsQ0FBQyxFQUFjO1FBQzlCLElBQUksQ0FBQyxTQUFTLEdBQUcsRUFBRSxDQUFDO0lBQ3RCLENBQUM7SUFFRCxnQkFBZ0IsQ0FBQyxFQUF1QjtRQUN0QyxJQUFJLENBQUMsUUFBUSxHQUFHLEVBQUUsQ0FBQztJQUNyQixDQUFDO0lBRUQsZ0JBQWdCLENBQUMsVUFBbUI7UUFDbEMsSUFBSSxDQUFDLFFBQVEsR0FBRyxVQUFVLENBQUM7SUFDN0IsQ0FBQztJQUVTLGNBQWMsQ0FBQyxFQUFTO1FBQ2hDLE1BQU0sT0FBTyxHQUFJLEVBQUUsQ0FBQyxNQUEyQixDQUFDLE9BQU8sQ0FBQztRQUN4RCxJQUFJLENBQUMsYUFBYSxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsQ0FBQztRQUNqQyxJQUFJLENBQUMsUUFBUSxFQUFFLENBQUMsT0FBTyxDQUFDLENBQUM7UUFDekIsSUFBSSxDQUFDLFNBQVMsRUFBRSxFQUFFLENBQUM7SUFDckIsQ0FBQzs7dUdBeEVVLFVBQVU7MkZBQVYsVUFBVSx5U0N6QnZCLHNVQVlBLDJDRFFZLFlBQVk7MkZBS1gsVUFBVTtrQkFUdEIsU0FBUzsrQkFDRSxhQUFhLFlBQ2IsWUFBWSxjQUNWLElBQUksV0FDUCxDQUFDLFlBQVksQ0FBQyxpQkFFUixpQkFBaUIsQ0FBQyxJQUFJLG1CQUNwQix1QkFBdUIsQ0FBQyxNQUFNOzswQkF1Q2xDLFFBQVE7OzBCQUFJLElBQUk7NENBOUJwQixFQUFFO3NCQUFWLEtBQUs7Z0JBU0csT0FBTztzQkFBZixLQUFLO2dCQVVHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBT0csaUJBQWlCO3NCQUF6QixLQUFLO2dCQUVJLGFBQWE7c0JBQXRCLE1BQU07Z0JBU08sT0FBTztzQkFEcEIsV0FBVzt1QkFBQyxPQUFPIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tbW9uTW9kdWxlLCBOZ0NsYXNzIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7XG4gIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICBDb21wb25lbnQsXG4gIEV2ZW50RW1pdHRlcixcbiAgSG9zdEJpbmRpbmcsXG4gIElucHV0LFxuICBPcHRpb25hbCxcbiAgT3V0cHV0LFxuICBTZWxmLFxuICBWaWV3RW5jYXBzdWxhdGlvbixcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBDb250cm9sVmFsdWVBY2Nlc3NvciwgTmdDb250cm9sIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuXG5sZXQgbmV4dElkID0gMTtcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnZG9rdS10b2dnbGUnLFxuICBleHBvcnRBczogJ2Rva3VUb2dnbGUnLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlXSxcbiAgdGVtcGxhdGVVcmw6ICcuL3RvZ2dsZS5jb21wb25lbnQuaHRtbCcsXG4gIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxufSlcbmV4cG9ydCBjbGFzcyBEb2t1VG9nZ2xlIGltcGxlbWVudHMgQ29udHJvbFZhbHVlQWNjZXNzb3Ige1xuICAvKipcbiAgICogVW5pcXVlIGlkIG9mIHRoZSB0b2dnbGUuXG4gICAqIERlZmF1bHQgdmFsdWUgaXMgYXV0by1nZW5lcmF0ZWQuXG4gICAqXG4gICAqIEBkZWZhdWx0ICdkLXRvZ2dsZS1bbmV4dElkXSdcbiAgICovXG4gIEBJbnB1dCgpIGlkID0gYGQtdG9nZ2xlLSR7bmV4dElkKyt9YDtcblxuICAvKipcbiAgICogV2hldGhlciB0aGUgdG9nZ2xlIGlzIGNoZWNrZWQuXG4gICAqXG4gICAqIElmIHVzaW5nIHJlYWN0aXZlIGZvcm1zIG9yIHRlbXBsYXRlLWRyaXZlbiBmb3JtcywgdGhlIHZhbHVlIHdpbGwgYmUgcmVwbGFjZWQuXG4gICAqXG4gICAqIEBkZWZhdWx0IGZhbHNlXG4gICAqL1xuICBASW5wdXQoKSBjaGVja2VkID0gZmFsc2U7XG5cbiAgLyoqXG4gICAqIFdoZXRoZXIgdGhlIHRvZ2dsZSBpcyBkaXNhYmxlZC5cbiAgICpcbiAgICogSWYgdXNpbmcgcmVhY3RpdmUgZm9ybXMsIHRoZSB2YWx1ZSB3aWxsIGJlIHJlcGxhY2VkLlxuICAgKiBVc2UgZm9ybSBjb250cm9sJ3MgbWV0aG9kIHRvIGRpc2FibGUgdGhlIHRvZ2dsZS5cbiAgICpcbiAgICogQGRlZmF1bHQgZmFsc2U7XG4gICAqL1xuICBASW5wdXQoKSBkaXNhYmxlZCA9IGZhbHNlO1xuXG4gIC8qKlxuICAgKiBWZXJ0aWNhbCBhbGlnbm1lbnQgb2YgdGhlIHRvZ2dsZS5cbiAgICpcbiAgICogQGRlZmF1bHQgJ2NlbnRlcidcbiAgICovXG4gIEBJbnB1dCgpIHZlcnRpY2FsQWxpZ25tZW50OiAndG9wJyB8ICdjZW50ZXInIHwgJ2JvdHRvbScgPSAnY2VudGVyJztcblxuICBAT3V0cHV0KCkgY2hlY2tlZENoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8Ym9vbGVhbj4oKTtcblxuICBjb25zdHJ1Y3RvcihAT3B0aW9uYWwoKSBAU2VsZigpIHByaXZhdGUgbmdDb250cm9sOiBOZ0NvbnRyb2wpIHtcbiAgICBpZiAodGhpcy5uZ0NvbnRyb2wgIT09IG51bGwpIHtcbiAgICAgIHRoaXMubmdDb250cm9sLnZhbHVlQWNjZXNzb3IgPSB0aGlzO1xuICAgIH1cbiAgfVxuXG4gIEBIb3N0QmluZGluZygnY2xhc3MnKVxuICBwcm90ZWN0ZWQgZ2V0IGNsYXNzZXMoKTogTmdDbGFzc1snbmdDbGFzcyddIHtcbiAgICByZXR1cm4gWydkLXRvZ2dsZS1jb250YWluZXInLCBgZC10b2dnbGUtdi1hbGlnbm1lbnQtJHt0aGlzLnZlcnRpY2FsQWxpZ25tZW50fWBdO1xuICB9XG5cbiAgb25DaGFuZ2U/OiAoXzogYW55KSA9PiB2b2lkO1xuICBvblRvdWNoZWQ/OiAoKSA9PiB2b2lkO1xuXG4gIHdyaXRlVmFsdWUodmFsdWU6IGJvb2xlYW4pOiB2b2lkIHtcbiAgICB0aGlzLmNoZWNrZWQgPSB2YWx1ZTtcbiAgfVxuXG4gIHJlZ2lzdGVyT25Ub3VjaGVkKGZuOiAoKSA9PiB2b2lkKTogdm9pZCB7XG4gICAgdGhpcy5vblRvdWNoZWQgPSBmbjtcbiAgfVxuXG4gIHJlZ2lzdGVyT25DaGFuZ2UoZm46IChfOiBhbnkpID0+IHVua25vd24pOiB2b2lkIHtcbiAgICB0aGlzLm9uQ2hhbmdlID0gZm47XG4gIH1cblxuICBzZXREaXNhYmxlZFN0YXRlKGlzRGlzYWJsZWQ6IGJvb2xlYW4pOiB2b2lkIHtcbiAgICB0aGlzLmRpc2FibGVkID0gaXNEaXNhYmxlZDtcbiAgfVxuXG4gIHByb3RlY3RlZCBvblRvZ2dsZUNoYW5nZShldjogRXZlbnQpOiB2b2lkIHtcbiAgICBjb25zdCBjaGVja2VkID0gKGV2LnRhcmdldCBhcyBIVE1MSW5wdXRFbGVtZW50KS5jaGVja2VkO1xuICAgIHRoaXMuY2hlY2tlZENoYW5nZS5lbWl0KGNoZWNrZWQpO1xuICAgIHRoaXMub25DaGFuZ2U/LihjaGVja2VkKTtcbiAgICB0aGlzLm9uVG91Y2hlZD8uKCk7XG4gIH1cbn1cbiIsIjxpbnB1dFxuICBbaWRdPVwiaWRcIlxuICB0eXBlPVwiY2hlY2tib3hcIlxuICBjbGFzcz1cImQtdG9nZ2xlXCJcbiAgW2NoZWNrZWRdPVwiY2hlY2tlZFwiXG4gIFtkaXNhYmxlZF09XCJkaXNhYmxlZFwiXG4gIChjaGFuZ2UpPVwib25Ub2dnbGVDaGFuZ2UoJGV2ZW50KVwiXG4vPlxuPGRpdiBjbGFzcz1cImQtdG9nZ2xlLWNvbnRlbnRcIj5cbiAgPGxhYmVsIFtmb3JdPVwiaWRcIj48bmctY29udGVudD48L25nLWNvbnRlbnQ+PC9sYWJlbD5cbiAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiZG9rdS10b2dnbGUtZGVzY3JpcHRpb25cIj48L25nLWNvbnRlbnQ+XG48L2Rpdj5cbiJdfQ==