@igo2/common
Version:
99 lines (94 loc) • 9.12 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, HostListener, Output, Directive, numberAttribute, HostBinding, Input, ChangeDetectionStrategy, Component } from '@angular/core';
import { fromEvent } from 'rxjs';
import { NgClass } from '@angular/common';
import * as i2 from '@angular/material/button';
import { MatButtonModule } from '@angular/material/button';
import * as i1 from '@angular/material/icon';
import { MatIconModule } from '@angular/material/icon';
class ResizeDirective {
mouseMove$$;
mouseUp$$;
change = new EventEmitter();
onMouseDown(event) {
this.mouseUp$$ = fromEvent(document, 'mouseup').subscribe(() => {
this._unsubscribe();
});
this.mouseMove$$ = fromEvent(document, 'mousemove').subscribe((moveEvent) => {
this.change.emit(moveEvent);
});
event.preventDefault();
}
_unsubscribe() {
this.mouseUp$$.unsubscribe();
this.mouseUp$$ = null;
this.mouseMove$$.unsubscribe();
this.mouseMove$$ = null;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ResizeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: ResizeDirective, isStandalone: true, selector: "[igoResize]", outputs: { change: "change" }, host: { listeners: { "mousedown": "onMouseDown($event)" } }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ResizeDirective, decorators: [{
type: Directive,
args: [{
selector: '[igoResize]'
}]
}], propDecorators: { change: [{
type: Output
}], onMouseDown: [{
type: HostListener,
args: ['mousedown', ['$event']]
}] } });
const ResizeAnchorType = ['top', 'left', 'bottom', 'right'];
const AlignmentType = ['vertical', 'horizontal'];
class ResizableBarComponent {
alignement;
iconRotation;
anchor = 'right';
/** En pixel */
min;
/** En pixel */
max;
change = new EventEmitter();
get cssClass() {
return `${this.alignement} ${this.anchor}`;
}
ngOnInit() {
this.alignement =
this.anchor === 'top' || this.anchor === 'bottom'
? 'horizontal'
: 'vertical';
this.iconRotation = this.alignement === 'vertical' ? 'rotate(90deg)' : '';
}
onChange(event) {
const value = this.alignement === 'horizontal' ? event.clientX : event.clientX;
if ((this.min && value <= this.min) || (this.max && value >= this.max)) {
return;
}
this.change.emit(event);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ResizableBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.15", type: ResizableBarComponent, isStandalone: true, selector: "igo-resizable-bar", inputs: { anchor: "anchor", min: ["min", "min", numberAttribute], max: ["max", "max", numberAttribute] }, outputs: { change: "change" }, host: { properties: { "class": "this.cssClass" } }, ngImport: i0, template: "<div igoResize (change)=\"onChange($event)\" class=\"resize-container\">\n <div class=\"resize-indicator\" [ngClass]=\"[alignement]\"></div>\n\n <div class=\"resize-bar\" [ngClass]=\"[alignement]\">\n <div class=\"resize-item\" [ngClass]=\"[alignement]\"></div>\n </div>\n\n <button mat-mini-fab class=\"expand-btn\" [ngClass]=\"[alignement, anchor]\">\n <mat-icon [style.transform]=\"iconRotation\">drag_handle</mat-icon>\n </button>\n</div>\n", styles: [":host{display:block;position:absolute;transform:translateZ(0);z-index:3000}:host.horizontal{left:0;right:0;height:12px}:host.vertical{top:0;bottom:0;width:3px;height:100%}:host.top{bottom:100%}:host.bottom{bottom:3px}:host.right{left:auto;right:0}:host.left{left:0;right:auto}.resize-container:hover .resize-item,.resize-container:hover .expand-btn{opacity:1}.resize-indicator{opacity:1;pointer-events:none;position:absolute;transition-duration:.2s;transition-property:left,opacity,width;transition-timing-function:cubic-bezier(.2,0,0,1);background:#0000001a}.resize-indicator.horizontal{left:0;right:0;bottom:-2px;height:3px}.resize-indicator.vertical{top:0;bottom:0;right:-2px;width:3px}.resize-bar{position:relative}.resize-bar.horizontal{cursor:n-resize;width:100%;height:12px;bottom:-3px}.resize-bar.vertical{cursor:e-resize;width:3px;height:100%;right:-3px;position:absolute}.resize-item{opacity:0;position:absolute;background-color:var(--mat-sys-secondary-fixed-dim)}.resize-item.horizontal{height:3px;width:100%;bottom:2px}.resize-item.vertical{height:100%;width:3px;right:2px}.expand-btn{pointer-events:none;position:absolute;width:24px;height:24px;line-height:24px;opacity:0;color:var(--mat-sys-primary);background-color:var(--mat-sys-on-primary);transition:opacity .3s cubic-bezier(.2,0,0,1) 0s,transform .3s cubic-bezier(.2,0,0,1) 0s}.expand-btn.horizontal{top:0;left:50%}.expand-btn.vertical{top:50%}.expand-btn.vertical.right{left:-8px}.expand-btn.vertical.left{right:-8px}.expand-btn .mat-icon{color:inherit;height:20px;width:20px;font-size:20px;transition:color .1s linear}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatMiniFabButton, selector: "button[mat-mini-fab]", exportAs: ["matButton"] }, { kind: "directive", type: ResizeDirective, selector: "[igoResize]", outputs: ["change"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ResizableBarComponent, decorators: [{
type: Component,
args: [{ selector: 'igo-resizable-bar', imports: [MatIconModule, MatButtonModule, ResizeDirective, NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div igoResize (change)=\"onChange($event)\" class=\"resize-container\">\n <div class=\"resize-indicator\" [ngClass]=\"[alignement]\"></div>\n\n <div class=\"resize-bar\" [ngClass]=\"[alignement]\">\n <div class=\"resize-item\" [ngClass]=\"[alignement]\"></div>\n </div>\n\n <button mat-mini-fab class=\"expand-btn\" [ngClass]=\"[alignement, anchor]\">\n <mat-icon [style.transform]=\"iconRotation\">drag_handle</mat-icon>\n </button>\n</div>\n", styles: [":host{display:block;position:absolute;transform:translateZ(0);z-index:3000}:host.horizontal{left:0;right:0;height:12px}:host.vertical{top:0;bottom:0;width:3px;height:100%}:host.top{bottom:100%}:host.bottom{bottom:3px}:host.right{left:auto;right:0}:host.left{left:0;right:auto}.resize-container:hover .resize-item,.resize-container:hover .expand-btn{opacity:1}.resize-indicator{opacity:1;pointer-events:none;position:absolute;transition-duration:.2s;transition-property:left,opacity,width;transition-timing-function:cubic-bezier(.2,0,0,1);background:#0000001a}.resize-indicator.horizontal{left:0;right:0;bottom:-2px;height:3px}.resize-indicator.vertical{top:0;bottom:0;right:-2px;width:3px}.resize-bar{position:relative}.resize-bar.horizontal{cursor:n-resize;width:100%;height:12px;bottom:-3px}.resize-bar.vertical{cursor:e-resize;width:3px;height:100%;right:-3px;position:absolute}.resize-item{opacity:0;position:absolute;background-color:var(--mat-sys-secondary-fixed-dim)}.resize-item.horizontal{height:3px;width:100%;bottom:2px}.resize-item.vertical{height:100%;width:3px;right:2px}.expand-btn{pointer-events:none;position:absolute;width:24px;height:24px;line-height:24px;opacity:0;color:var(--mat-sys-primary);background-color:var(--mat-sys-on-primary);transition:opacity .3s cubic-bezier(.2,0,0,1) 0s,transform .3s cubic-bezier(.2,0,0,1) 0s}.expand-btn.horizontal{top:0;left:50%}.expand-btn.vertical{top:50%}.expand-btn.vertical.right{left:-8px}.expand-btn.vertical.left{right:-8px}.expand-btn .mat-icon{color:inherit;height:20px;width:20px;font-size:20px;transition:color .1s linear}\n"] }]
}], propDecorators: { anchor: [{
type: Input
}], min: [{
type: Input,
args: [{ transform: numberAttribute }]
}], max: [{
type: Input,
args: [{ transform: numberAttribute }]
}], change: [{
type: Output
}], cssClass: [{
type: HostBinding,
args: ['class']
}] } });
/**
* Generated bundle index. Do not edit.
*/
export { AlignmentType, ResizableBarComponent, ResizeAnchorType, ResizeDirective };
//# sourceMappingURL=igo2-common-resizable-bar.mjs.map