@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>
114 lines (110 loc) • 10.3 kB
JavaScript
import * as i0 from '@angular/core';
import { Directive, inject, DOCUMENT, ChangeDetectorRef, ElementRef, NgZone, DestroyRef, afterNextRender, HostBinding, ViewChild, Input, ChangeDetectionStrategy, Component } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { ngDocZoneOptimize } from '@ng-doc/ui-kit/observables';
import { fromEvent, merge } from 'rxjs';
import { tap, map, pairwise, switchMap, takeUntil, take, filter, debounceTime } from 'rxjs/operators';
class NgDocPaneFrontDirective {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgDocPaneFrontDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: NgDocPaneFrontDirective, isStandalone: true, selector: "[ngDocPaneFront]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgDocPaneFrontDirective, decorators: [{
type: Directive,
args: [{
selector: '[ngDocPaneFront]',
standalone: true,
}]
}] });
class NgDocPaneBackDirective {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgDocPaneBackDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: NgDocPaneBackDirective, isStandalone: true, selector: "[ngDocPaneBack]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgDocPaneBackDirective, decorators: [{
type: Directive,
args: [{
selector: '[ngDocPaneBack]',
standalone: true,
}]
}] });
class NgDocPaneComponent {
constructor() {
this.document = inject(DOCUMENT);
this.changeDetectorRef = inject(ChangeDetectorRef);
this.elementRef = inject(ElementRef);
this.ngZone = inject(NgZone);
this.expanded = false;
this.width = '0%';
this.dragging = false;
const destroyRef = inject(DestroyRef);
afterNextRender(() => {
if (this.resizer) {
const mouseDown$ = fromEvent(this.resizer.nativeElement, 'mousedown').pipe(tap(() => {
this.dragging = true;
this.changeDetectorRef.markForCheck();
}));
const mouseUp$ = fromEvent(this.document, 'mouseup').pipe(tap(() => {
this.dragging = false;
this.changeDetectorRef.markForCheck();
}));
const mouseMove$ = fromEvent(this.document, 'mousemove').pipe(map((event) => event.clientX), pairwise(), map(([prev, next]) => next - prev));
mouseDown$
.pipe(switchMap(() => {
const dragEvent$ = mouseMove$.pipe(takeUntil(mouseUp$));
const clickEvent$ = mouseUp$.pipe(map(() => null), takeUntil(mouseMove$), take(1));
return merge(dragEvent$, clickEvent$);
}), filter((delta) => delta !== 0), ngDocZoneOptimize(this.ngZone), takeUntilDestroyed(destroyRef))
.subscribe((delta) => {
delta === null ? this.toggle() : this.addDelta(delta);
});
}
fromEvent(window, 'resize')
.pipe(debounceTime(100), ngDocZoneOptimize(this.ngZone), takeUntilDestroyed(destroyRef))
.subscribe(() => this.addDelta(0));
});
this.addDelta(0);
}
ngOnChanges({ expanded }) {
if (expanded) {
expanded.currentValue
? this.addDelta(this.elementRef.nativeElement.offsetWidth)
: this.addDelta(-this.elementRef.nativeElement.offsetWidth);
}
}
toggle() {
if (this.resizer) {
const middle = this.elementRef.nativeElement.offsetWidth / 2;
if (this.resizer.nativeElement.offsetLeft < middle) {
this.addDelta(this.elementRef.nativeElement.offsetWidth);
}
else {
this.addDelta(-this.elementRef.nativeElement.offsetWidth);
}
}
}
addDelta(delta) {
if (this.resizer) {
const maxWidth = this.elementRef.nativeElement.offsetWidth - this.resizer.nativeElement.offsetWidth;
this.width = `${Math.min(maxWidth, Math.max(0, this.resizer.nativeElement.offsetLeft + delta))}px`;
this.changeDetectorRef.detectChanges();
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgDocPaneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: NgDocPaneComponent, isStandalone: true, selector: "ng-doc-pane", inputs: { expanded: "expanded" }, host: { properties: { "attr.data-ng-doc-dragging": "this.dragging" } }, viewQueries: [{ propertyName: "resizer", first: true, predicate: ["resizer"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"ng-doc-pane-back\" [style.width]=\"width\">\n\t<div class=\"ng-doc-pane-content\">\n\t\t<ng-content select=\"[ngDocPaneBack]\"></ng-content>\n\t</div>\n</div>\n<div class=\"ng-doc-pane-resizer\" #resizer></div>\n<div class=\"ng-doc-pane-front\">\n\t<div class=\"ng-doc-pane-content\">\n\t\t<ng-content select=\"[ngDocPaneFront]\"></ng-content>\n\t</div>\n</div>\n", styles: [":host{position:relative;display:flex;width:100%;border-radius:var(--ng-doc-pane-border-radius, var(--ng-doc-base-gutter));border:var(--ng-doc-pane-border, 1px solid var(--ng-doc-border-color));overflow:hidden}:host[data-ng-doc-dragging=false] .ng-doc-pane-back{transition:var(--ng-doc-transition) width}:host .ng-doc-pane-front{position:relative;display:flex;width:100%;background-color:var(--ng-doc-pane-front-background, var(--ng-doc-pane-background, var(--ng-doc-base-1)));overflow:hidden;border-top-right-radius:var(--ng-doc-base-gutter);border-bottom-right-radius:var(--ng-doc-base-gutter);border:var(--ng-doc-pane-front-border, var(--ng-doc-pane-border))}:host .ng-doc-pane-back{position:relative;display:flex;flex-shrink:0;width:100%;background-color:var(--ng-doc-pane-back-background, var(--ng-doc-pane-background, var(--ng-doc-base-1)));overflow:hidden;border-top-left-radius:var(--ng-doc-base-gutter);border-bottom-left-radius:var(--ng-doc-base-gutter);border:var(--ng-doc-pane-back-border, var(--ng-doc-pane-border))}:host .ng-doc-pane-resizer{position:relative;flex-shrink:0;transform:translateZ(0);background-color:var(--ng-doc-base-3);width:16px;display:block;cursor:ew-resize}:host .ng-doc-pane-resizer:after{content:\"\";display:flex;background:var(--ng-doc-base-10);border-radius:50px;position:absolute;width:4px;height:20%;top:50%;left:50%;transform:translateY(-50%) translate(-50%);opacity:1;transition:var(--ng-doc-transition) height}:host .ng-doc-pane-content{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:100%;height:100%;min-width:var(--ng-doc-pane-content-min-width, 200px)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgDocPaneComponent, decorators: [{
type: Component,
args: [{ selector: 'ng-doc-pane', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"ng-doc-pane-back\" [style.width]=\"width\">\n\t<div class=\"ng-doc-pane-content\">\n\t\t<ng-content select=\"[ngDocPaneBack]\"></ng-content>\n\t</div>\n</div>\n<div class=\"ng-doc-pane-resizer\" #resizer></div>\n<div class=\"ng-doc-pane-front\">\n\t<div class=\"ng-doc-pane-content\">\n\t\t<ng-content select=\"[ngDocPaneFront]\"></ng-content>\n\t</div>\n</div>\n", styles: [":host{position:relative;display:flex;width:100%;border-radius:var(--ng-doc-pane-border-radius, var(--ng-doc-base-gutter));border:var(--ng-doc-pane-border, 1px solid var(--ng-doc-border-color));overflow:hidden}:host[data-ng-doc-dragging=false] .ng-doc-pane-back{transition:var(--ng-doc-transition) width}:host .ng-doc-pane-front{position:relative;display:flex;width:100%;background-color:var(--ng-doc-pane-front-background, var(--ng-doc-pane-background, var(--ng-doc-base-1)));overflow:hidden;border-top-right-radius:var(--ng-doc-base-gutter);border-bottom-right-radius:var(--ng-doc-base-gutter);border:var(--ng-doc-pane-front-border, var(--ng-doc-pane-border))}:host .ng-doc-pane-back{position:relative;display:flex;flex-shrink:0;width:100%;background-color:var(--ng-doc-pane-back-background, var(--ng-doc-pane-background, var(--ng-doc-base-1)));overflow:hidden;border-top-left-radius:var(--ng-doc-base-gutter);border-bottom-left-radius:var(--ng-doc-base-gutter);border:var(--ng-doc-pane-back-border, var(--ng-doc-pane-border))}:host .ng-doc-pane-resizer{position:relative;flex-shrink:0;transform:translateZ(0);background-color:var(--ng-doc-base-3);width:16px;display:block;cursor:ew-resize}:host .ng-doc-pane-resizer:after{content:\"\";display:flex;background:var(--ng-doc-base-10);border-radius:50px;position:absolute;width:4px;height:20%;top:50%;left:50%;transform:translateY(-50%) translate(-50%);opacity:1;transition:var(--ng-doc-transition) height}:host .ng-doc-pane-content{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:100%;height:100%;min-width:var(--ng-doc-pane-content-min-width, 200px)}\n"] }]
}], ctorParameters: () => [], propDecorators: { expanded: [{
type: Input
}], resizer: [{
type: ViewChild,
args: ['resizer', { static: true }]
}], dragging: [{
type: HostBinding,
args: ['attr.data-ng-doc-dragging']
}] } });
/**
* Generated bundle index. Do not edit.
*/
export { NgDocPaneBackDirective, NgDocPaneComponent, NgDocPaneFrontDirective };
//# sourceMappingURL=ng-doc-ui-kit-components-pane.mjs.map