@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>
125 lines (121 loc) • 10.9 kB
JavaScript
import { __decorate, __metadata } from 'tslib';
import { DOCUMENT } from '@angular/common';
import * as i0 from '@angular/core';
import { Directive, afterNextRender, ChangeDetectorRef, ElementRef, NgZone, Component, ChangeDetectionStrategy, Inject, Input, ViewChild, HostBinding } from '@angular/core';
import { ngDocZoneOptimize } from '@ng-doc/ui-kit/observables';
import { untilDestroyed, UntilDestroy } from '@ngneat/until-destroy';
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: "19.0.3", ngImport: i0, type: NgDocPaneFrontDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.3", type: NgDocPaneFrontDirective, isStandalone: true, selector: "[ngDocPaneFront]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgDocPaneFrontDirective, decorators: [{
type: Directive,
args: [{
selector: '[ngDocPaneFront]',
standalone: true,
}]
}] });
class NgDocPaneBackDirective {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgDocPaneBackDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.3", type: NgDocPaneBackDirective, isStandalone: true, selector: "[ngDocPaneBack]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgDocPaneBackDirective, decorators: [{
type: Directive,
args: [{
selector: '[ngDocPaneBack]',
standalone: true,
}]
}] });
let NgDocPaneComponent = class NgDocPaneComponent {
constructor(document, changeDetectorRef, elementRef, ngZone) {
this.document = document;
this.changeDetectorRef = changeDetectorRef;
this.elementRef = elementRef;
this.ngZone = ngZone;
this.expanded = false;
this.width = '0%';
this.dragging = false;
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), untilDestroyed(this))
.subscribe((delta) => {
delta === null ? this.toggle() : this.addDelta(delta);
});
}
fromEvent(window, 'resize')
.pipe(debounceTime(100), untilDestroyed(this), ngDocZoneOptimize(this.ngZone))
.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: "19.0.3", ngImport: i0, type: NgDocPaneComponent, deps: [{ token: DOCUMENT }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", 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 }); }
};
NgDocPaneComponent = __decorate([
UntilDestroy(),
__metadata("design:paramtypes", [Document,
ChangeDetectorRef,
ElementRef,
NgZone])
], NgDocPaneComponent);
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", 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: () => [{ type: Document, decorators: [{
type: Inject,
args: [DOCUMENT]
}] }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }], 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