@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>
123 lines (117 loc) • 6.89 kB
JavaScript
import * as i0 from '@angular/core';
import { Directive, inject, ElementRef, DestroyRef, Input, HostBinding, ChangeDetectionStrategy, Component } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { distinctUntilChanged, debounceTime } from 'rxjs/operators';
import { ReplaySubject } from 'rxjs';
class NgDocSelectionHostDirective {
constructor() {
this.origins = new Set();
this.selectedChange = new ReplaySubject();
}
get selectedChange$() {
return this.selectedChange.pipe(distinctUntilChanged());
}
addOrigin(origin) {
this.origins.add(origin);
}
removeOrigin(origin) {
this.origins.delete(origin);
if (this.selected === origin) {
this.changeSelected(origin, false);
}
}
changeSelected(origin, selected) {
this.selected =
this.selected === origin || selected ? (selected ? origin : undefined) : this.selected;
this.selectedChange.next(this.selected?.elementRef?.nativeElement ?? undefined);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: NgDocSelectionHostDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.3", type: NgDocSelectionHostDirective, isStandalone: true, selector: "[ngDocSelectionHost]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: NgDocSelectionHostDirective, decorators: [{
type: Directive,
args: [{
selector: '[ngDocSelectionHost]',
standalone: true,
}]
}] });
class NgDocSelectionComponent {
constructor() {
this.elementRef = inject(ElementRef);
this.selectionHost = inject(NgDocSelectionHostDirective);
this.align = 'bottom';
this.destroyRef = inject(DestroyRef);
}
ngAfterViewInit() {
this.selectionHost.selectedChange$
.pipe(debounceTime(0), takeUntilDestroyed(this.destroyRef))
.subscribe((selected) => this.setStyles(selected));
}
setStyles(element) {
this.elementRef.nativeElement.style.visibility = 'hidden';
if (element) {
const position = this.getPosition(element);
if (this.align === 'left' || this.align === 'right') {
this.elementRef.nativeElement.style.top = position.top;
}
else {
this.elementRef.nativeElement.style.left = position.left;
}
this.elementRef.nativeElement.style.height = position.height;
this.elementRef.nativeElement.style.width = position.width;
this.elementRef.nativeElement.style.visibility = 'visible';
}
}
getPosition(element) {
return {
top: element ? `${element.offsetTop || 0}px` : '0',
left: element ? `${element.offsetLeft || 0}px` : '0',
width: element ? `${element.offsetWidth || 0}px` : '0',
height: element ? `${element.offsetHeight || 0}px` : '0',
};
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: NgDocSelectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.3", type: NgDocSelectionComponent, isStandalone: true, selector: "ng-doc-selection", inputs: { align: "align" }, host: { properties: { "attr.data-ng-doc-align": "this.align" } }, ngImport: i0, template: '', isInline: true, styles: [":host{position:absolute;transition:var(--ng-doc-transition);pointer-events:none;background:var(--ng-doc-selection-background)}:host[data-ng-doc-align=left]{left:0;border-left:var(--ng-doc-selection-border)}:host[data-ng-doc-align=right]{right:0;border-right:var(--ng-doc-selection-border)}:host[data-ng-doc-align=bottom]{bottom:0;border-bottom:var(--ng-doc-selection-border)}:host[data-ng-doc-align=top]{top:0;border-top:var(--ng-doc-selection-border)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: NgDocSelectionComponent, decorators: [{
type: Component,
args: [{ selector: 'ng-doc-selection', template: '', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, styles: [":host{position:absolute;transition:var(--ng-doc-transition);pointer-events:none;background:var(--ng-doc-selection-background)}:host[data-ng-doc-align=left]{left:0;border-left:var(--ng-doc-selection-border)}:host[data-ng-doc-align=right]{right:0;border-right:var(--ng-doc-selection-border)}:host[data-ng-doc-align=bottom]{bottom:0;border-bottom:var(--ng-doc-selection-border)}:host[data-ng-doc-align=top]{top:0;border-top:var(--ng-doc-selection-border)}\n"] }]
}], ctorParameters: () => [], propDecorators: { align: [{
type: Input
}, {
type: HostBinding,
args: ['attr.data-ng-doc-align']
}] } });
class NgDocSelectionOriginDirective {
constructor() {
this.elementRef = inject(ElementRef);
this.selectionHost = inject(NgDocSelectionHostDirective);
this.selected = false;
this.selectionHost.addOrigin(this);
}
ngOnChanges({ selected }) {
if (selected) {
this.selectionHost.changeSelected(this, this.selected);
}
}
ngOnDestroy() {
this.selectionHost.removeOrigin(this);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: NgDocSelectionOriginDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.3", type: NgDocSelectionOriginDirective, isStandalone: true, selector: "[ngDocSelectionOrigin]", inputs: { selected: ["ngDocSelectionOrigin", "selected"] }, usesOnChanges: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: NgDocSelectionOriginDirective, decorators: [{
type: Directive,
args: [{
selector: '[ngDocSelectionOrigin]',
standalone: true,
}]
}], ctorParameters: () => [], propDecorators: { selected: [{
type: Input,
args: ['ngDocSelectionOrigin']
}] } });
/**
* Generated bundle index. Do not edit.
*/
export { NgDocSelectionComponent, NgDocSelectionHostDirective, NgDocSelectionOriginDirective };
//# sourceMappingURL=ng-doc-ui-kit-components-selection.mjs.map