@ng-doc/ui-kit
Version:
<!-- PROJECT LOGO --> <br /> <div align="center"> <a href="https://github.com/ng-doc/ng-doc"> <img src="https://ng-doc.com/assets/images/ng-doc.svg?raw=true" alt="Logo" height="150px"> </a>
100 lines (96 loc) • 7.88 kB
JavaScript
import { __decorate, __metadata } from 'tslib';
import * as i0 from '@angular/core';
import { inject, Component, ChangeDetectionStrategy, ViewChild, HostBinding } from '@angular/core';
import { NgDocPositionUtils } from '@ng-doc/ui-kit/utils';
import { untilDestroyed, UntilDestroy } from '@ngneat/until-destroy';
import { DIStateControl, injectHostControl, DICompareHost } from 'di-controls';
import { fromEvent } from 'rxjs';
import { filter, switchMap, pairwise, map, tap, startWith, takeUntil, last } from 'rxjs/operators';
let NgDocToggleComponent = class NgDocToggleComponent extends DIStateControl {
constructor() {
super({
host: injectHostControl({ optional: true }),
compareHost: inject(DICompareHost, { optional: true }),
onIncomingUpdate: () => {
this.setState(!!this.checked());
},
});
this.dragging = false;
this.maxPixelValue = 0;
}
ngOnInit() {
super.ngOnInit();
if (this.wrapper && this.circle) {
this.maxPixelValue =
this.wrapper.nativeElement.offsetWidth - this.circle.nativeElement.offsetWidth - 6;
fromEvent(this.circle.nativeElement, 'mousedown')
.pipe(filter(() => !this.disabled), switchMap(() => {
const transition = this.circle?.nativeElement.style.transition ?? '';
this.renderer.setStyle(this.circle?.nativeElement, 'transition', '');
this.setDragging(true);
return fromEvent(document.body, 'mousemove').pipe(pairwise(), map(([newEvent, oldEvent]) => [newEvent, oldEvent]), map(([newEvent, oldEvent]) => oldEvent.clientX - newEvent.clientX), filter((deltaX) => deltaX !== 0), tap((deltaX) => this.changeCirclePosition(deltaX)), startWith(null), takeUntil(fromEvent(document.body, 'mouseup').pipe(tap(() => this.setDragging(false)))), last(), tap(() => this.circle &&
this.renderer.setStyle(this.circle.nativeElement, 'transition', transition)));
}), untilDestroyed(this))
.subscribe((deltaX) => {
deltaX === null ? this.toggle() : this.detectByCoordinates();
});
}
}
updateModel(value) {
super.updateModel(value);
this.setState(!!this.checked);
}
setState(isSelected) {
isSelected
? this.circle &&
this.renderer.setStyle(this.circle.nativeElement, 'transform', `translateX(${this.maxPixelValue}px)`)
: this.circle &&
this.renderer.setStyle(this.circle.nativeElement, 'transform', `translateX(0)`);
}
setDragging(value) {
this.dragging = value;
this.changeDetectorRef.markForCheck();
}
detectByCoordinates() {
if (!this.disabled && this.wrapper && this.circle) {
const wrapperMiddle = NgDocPositionUtils.getElementPosition(this.wrapper.nativeElement).x +
this.wrapper.nativeElement.offsetWidth / 2;
const circleCenterLeft = NgDocPositionUtils.getElementPosition(this.circle.nativeElement).x +
this.circle.nativeElement.offsetWidth / 2;
circleCenterLeft > wrapperMiddle ? this.check() : this.uncheck();
this.setState(!!this.checked);
}
}
changeCirclePosition(delta) {
if (this.wrapper && this.circle) {
const wrapperLeft = NgDocPositionUtils.getElementPosition(this.wrapper.nativeElement).x;
const circleLeft = NgDocPositionUtils.getElementPosition(this.circle.nativeElement).x;
const newPosition = Math.max(Math.min(circleLeft - wrapperLeft - 3 + delta, this.maxPixelValue), 0);
this.renderer.setStyle(this.circle.nativeElement, 'transform', `translateX(${newPosition}px)`);
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgDocToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: NgDocToggleComponent, isStandalone: true, selector: "ng-doc-toggle", host: { properties: { "attr.data-ng-doc-dragging": "this.dragging" } }, viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true, static: true }, { propertyName: "circle", first: true, predicate: ["circle"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ng-doc-toggle-wrapper\" (click)=\"toggle()\" #wrapper>\n\t<div class=\"ng-doc-toggle-circle\" #circle></div>\n</div>\n", styles: [":host .ng-doc-toggle-wrapper{position:relative;display:inline-block;width:40px;height:22px;border-radius:24px;background-color:var(--ng-doc-base-3);cursor:pointer;transition:background-color var(--ng-doc-transition)}:host .ng-doc-toggle-wrapper .ng-doc-toggle-circle{position:absolute;left:3px;top:3px;height:calc(var(--ng-doc-base-gutter) * 2);width:calc(var(--ng-doc-base-gutter) * 2);border-radius:50%;background-color:var(--ng-doc-base-0);-webkit-user-select:none;user-select:none;transition:transform var(--ng-doc-transition);box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}:host[data-checked=true] .ng-doc-toggle-wrapper{background-color:var(--ng-doc-primary)}:host[data-ng-doc-dragging=true]{cursor:grabbing}:host[data-ng-doc-dragging=true] .ng-doc-toggle-wrapper{pointer-events:none}:host[data-disabled=true] .ng-doc-toggle-wrapper{background-color:var(--ng-doc-base-2);cursor:unset}:host[data-disabled=true][data-checked=true] .ng-doc-toggle-wrapper{background-color:var(--ng-doc-base-3)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
};
NgDocToggleComponent = __decorate([
UntilDestroy(),
__metadata("design:paramtypes", [])
], NgDocToggleComponent);
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgDocToggleComponent, decorators: [{
type: Component,
args: [{ selector: 'ng-doc-toggle', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"ng-doc-toggle-wrapper\" (click)=\"toggle()\" #wrapper>\n\t<div class=\"ng-doc-toggle-circle\" #circle></div>\n</div>\n", styles: [":host .ng-doc-toggle-wrapper{position:relative;display:inline-block;width:40px;height:22px;border-radius:24px;background-color:var(--ng-doc-base-3);cursor:pointer;transition:background-color var(--ng-doc-transition)}:host .ng-doc-toggle-wrapper .ng-doc-toggle-circle{position:absolute;left:3px;top:3px;height:calc(var(--ng-doc-base-gutter) * 2);width:calc(var(--ng-doc-base-gutter) * 2);border-radius:50%;background-color:var(--ng-doc-base-0);-webkit-user-select:none;user-select:none;transition:transform var(--ng-doc-transition);box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}:host[data-checked=true] .ng-doc-toggle-wrapper{background-color:var(--ng-doc-primary)}:host[data-ng-doc-dragging=true]{cursor:grabbing}:host[data-ng-doc-dragging=true] .ng-doc-toggle-wrapper{pointer-events:none}:host[data-disabled=true] .ng-doc-toggle-wrapper{background-color:var(--ng-doc-base-2);cursor:unset}:host[data-disabled=true][data-checked=true] .ng-doc-toggle-wrapper{background-color:var(--ng-doc-base-3)}\n"] }]
}], ctorParameters: () => [], propDecorators: { wrapper: [{
type: ViewChild,
args: ['wrapper', { static: true }]
}], circle: [{
type: ViewChild,
args: ['circle', { static: true }]
}], dragging: [{
type: HostBinding,
args: ['attr.data-ng-doc-dragging']
}] } });
/**
* Generated bundle index. Do not edit.
*/
export { NgDocToggleComponent };
//# sourceMappingURL=ng-doc-ui-kit-components-toggle.mjs.map