ngx-gem-spaas
Version:
This library contains services, components, images and styles to provide a unified look and way-of-working throughout GEM SPaaS.
59 lines • 10 kB
JavaScript
import { Component, EventEmitter, Input, Output } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "../_services/local-storage.service";
import * as i2 from "../_services/session-storage.service";
import * as i3 from "@angular/cdk/drag-drop";
export class ResizerComponent {
constructor(localStorageService, sessionStorageService) {
this.localStorageService = localStorageService;
this.sessionStorageService = sessionStorageService;
this.sizePx = 324;
this.sizePxChange = new EventEmitter();
this.minSizePx = 144;
this.maxSizePx = 9999;
this.resizeAxis = 'y';
this.storage = 'local';
this.storageId = '';
}
ngOnInit() {
if (Number.isNaN(Number(this.sizePx))) {
throw new Error('the value you provided for sizePx is not a number');
}
}
onDragResizeEnd(e) {
e.source.reset();
const inc = this.resizeAxis === 'y' ? e.distance.y : e.distance.x;
this.sizePx += inc;
this.sizePx = Math.min(Math.max(this.sizePx, this.minSizePx), this.maxSizePx);
this.sizePxChange.emit(this.sizePx);
if (this.storageId) {
if (this.storage === 'local') {
this.localStorageService.setItem(this.storageId, this.sizePx);
}
else {
this.sessionStorageService.setItem(this.storageId, this.sizePx);
}
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ResizerComponent, deps: [{ token: i1.LocalStorageService }, { token: i2.SessionStorageService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ResizerComponent, selector: "spaas-resizer", inputs: { sizePx: "sizePx", minSizePx: "minSizePx", maxSizePx: "maxSizePx", resizeAxis: "resizeAxis", storage: "storage", storageId: "storageId" }, outputs: { sizePxChange: "sizePxChange" }, ngImport: i0, template: "<div (cdkDragEnded)=\"onDragResizeEnd($event)\"\r\n [cdkDragLockAxis]=\"resizeAxis\"\r\n [class.resize-x]=\"resizeAxis === 'x'\"\r\n cdkDrag\r\n class=\"resizer\">\r\n</div>\r\n", styles: [".resizer{bottom:0;cursor:ns-resize;height:8px;left:0;position:absolute;transition:background-color .4s;width:100%;z-index:9000}.resizer:before{background-color:hsla(var(--bg-h),var(--bg-s),var(--bg-l),1);border-color:hsla(var(--disabled-h),var(--disabled-s),var(--disabled-l),1);border-style:solid;border-width:1px 0 1px 0;content:\"\";height:2px;left:calc(50% - 22px);position:absolute;top:2px;width:44px}.resizer:hover,.resizer.cdk-drag-dragging{background-color:hsla(var(--color-h),var(--color-s),var(--color-l),.2)}.resizer.resize-x{cursor:ew-resize;height:100%;left:auto;right:0;width:8px}.resizer.resize-x:before{border-width:0 1px 0 1px;width:2px;height:44px;left:2px;top:calc(50% - 22px)}\n"], dependencies: [{ kind: "directive", type: i3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ResizerComponent, decorators: [{
type: Component,
args: [{ selector: 'spaas-resizer', template: "<div (cdkDragEnded)=\"onDragResizeEnd($event)\"\r\n [cdkDragLockAxis]=\"resizeAxis\"\r\n [class.resize-x]=\"resizeAxis === 'x'\"\r\n cdkDrag\r\n class=\"resizer\">\r\n</div>\r\n", styles: [".resizer{bottom:0;cursor:ns-resize;height:8px;left:0;position:absolute;transition:background-color .4s;width:100%;z-index:9000}.resizer:before{background-color:hsla(var(--bg-h),var(--bg-s),var(--bg-l),1);border-color:hsla(var(--disabled-h),var(--disabled-s),var(--disabled-l),1);border-style:solid;border-width:1px 0 1px 0;content:\"\";height:2px;left:calc(50% - 22px);position:absolute;top:2px;width:44px}.resizer:hover,.resizer.cdk-drag-dragging{background-color:hsla(var(--color-h),var(--color-s),var(--color-l),.2)}.resizer.resize-x{cursor:ew-resize;height:100%;left:auto;right:0;width:8px}.resizer.resize-x:before{border-width:0 1px 0 1px;width:2px;height:44px;left:2px;top:calc(50% - 22px)}\n"] }]
}], ctorParameters: () => [{ type: i1.LocalStorageService }, { type: i2.SessionStorageService }], propDecorators: { sizePx: [{
type: Input
}], sizePxChange: [{
type: Output
}], minSizePx: [{
type: Input
}], maxSizePx: [{
type: Input
}], resizeAxis: [{
type: Input
}], storage: [{
type: Input
}], storageId: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmVzaXplci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtZ2VtLXNwYWFzL3NyYy9yZXNpemVyL3Jlc2l6ZXIuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWdlbS1zcGFhcy9zcmMvcmVzaXplci9yZXNpemVyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBQyxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBVSxNQUFNLEVBQUMsTUFBTSxlQUFlLENBQUM7Ozs7O0FBVzdFLE1BQU0sT0FBTyxnQkFBZ0I7SUFXM0IsWUFDVSxtQkFBd0MsRUFDeEMscUJBQTRDO1FBRDVDLHdCQUFtQixHQUFuQixtQkFBbUIsQ0FBcUI7UUFDeEMsMEJBQXFCLEdBQXJCLHFCQUFxQixDQUF1QjtRQVg3QyxXQUFNLEdBQUcsR0FBRyxDQUFDO1FBQ1osaUJBQVksR0FBRyxJQUFJLFlBQVksRUFBVSxDQUFDO1FBRTNDLGNBQVMsR0FBRyxHQUFHLENBQUM7UUFDaEIsY0FBUyxHQUFHLElBQUksQ0FBQztRQUNqQixlQUFVLEdBQWMsR0FBRyxDQUFDO1FBQzVCLFlBQU8sR0FBd0IsT0FBTyxDQUFDO1FBQ3ZDLGNBQVMsR0FBRyxFQUFFLENBQUM7SUFNeEIsQ0FBQztJQUVELFFBQVE7UUFDTixJQUFJLE1BQU0sQ0FBQyxLQUFLLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQyxFQUFFLENBQUM7WUFDdEMsTUFBTSxJQUFJLEtBQUssQ0FBQyxtREFBbUQsQ0FBQyxDQUFDO1FBQ3ZFLENBQUM7SUFDSCxDQUFDO0lBRUQsZUFBZSxDQUFDLENBQWE7UUFDM0IsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxLQUFLLEVBQUUsQ0FBQztRQUNqQixNQUFNLEdBQUcsR0FBRyxJQUFJLENBQUMsVUFBVSxLQUFLLEdBQUcsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLFFBQVEsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFDO1FBQ2xFLElBQUksQ0FBQyxNQUFNLElBQUksR0FBRyxDQUFDO1FBQ25CLElBQUksQ0FBQyxNQUFNLEdBQUcsSUFBSSxDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxNQUFNLEVBQUUsSUFBSSxDQUFDLFNBQVMsQ0FBQyxFQUFFLElBQUksQ0FBQyxTQUFTLENBQUMsQ0FBQztRQUM5RSxJQUFJLENBQUMsWUFBWSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLENBQUM7UUFDcEMsSUFBSSxJQUFJLENBQUMsU0FBUyxFQUFFLENBQUM7WUFDbkIsSUFBSSxJQUFJLENBQUMsT0FBTyxLQUFLLE9BQU8sRUFBRSxDQUFDO2dCQUM3QixJQUFJLENBQUMsbUJBQW1CLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxTQUFTLEVBQUUsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDO1lBQ2hFLENBQUM7aUJBQU0sQ0FBQztnQkFDTixJQUFJLENBQUMscUJBQXFCLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxTQUFTLEVBQUUsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDO1lBQ2xFLENBQUM7UUFDSCxDQUFDO0lBQ0gsQ0FBQzsrR0FwQ1UsZ0JBQWdCO21HQUFoQixnQkFBZ0Isb1BDWDdCLG1NQU1BOzs0RkRLYSxnQkFBZ0I7a0JBTjVCLFNBQVM7K0JBQ0UsZUFBZTs0SEFPaEIsTUFBTTtzQkFBZCxLQUFLO2dCQUNJLFlBQVk7c0JBQXJCLE1BQU07Z0JBRUUsU0FBUztzQkFBakIsS0FBSztnQkFDRyxTQUFTO3NCQUFqQixLQUFLO2dCQUNHLFVBQVU7c0JBQWxCLEtBQUs7Z0JBQ0csT0FBTztzQkFBZixLQUFLO2dCQUNHLFNBQVM7c0JBQWpCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge0NvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT25Jbml0LCBPdXRwdXR9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQge0Nka0RyYWdFbmR9IGZyb20gXCJAYW5ndWxhci9jZGsvZHJhZy1kcm9wXCI7XHJcbmltcG9ydCB7TG9jYWxTdG9yYWdlU2VydmljZX0gZnJvbSBcIi4uL19zZXJ2aWNlcy9sb2NhbC1zdG9yYWdlLnNlcnZpY2VcIjtcclxuaW1wb3J0IHtTZXNzaW9uU3RvcmFnZVNlcnZpY2V9IGZyb20gXCIuLi9fc2VydmljZXMvc2Vzc2lvbi1zdG9yYWdlLnNlcnZpY2VcIjtcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnc3BhYXMtcmVzaXplcicsXHJcbiAgdGVtcGxhdGVVcmw6ICcuL3Jlc2l6ZXIuY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsczogWycuL3Jlc2l6ZXIuY29tcG9uZW50LnNjc3MnXVxyXG59KVxyXG5cclxuZXhwb3J0IGNsYXNzIFJlc2l6ZXJDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xyXG5cclxuICBASW5wdXQoKSBzaXplUHggPSAzMjQ7XHJcbiAgQE91dHB1dCgpIHNpemVQeENoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8bnVtYmVyPigpO1xyXG5cclxuICBASW5wdXQoKSBtaW5TaXplUHggPSAxNDQ7XHJcbiAgQElucHV0KCkgbWF4U2l6ZVB4ID0gOTk5OTtcclxuICBASW5wdXQoKSByZXNpemVBeGlzOiAneCcgfCAneScgPSAneSc7XHJcbiAgQElucHV0KCkgc3RvcmFnZTogJ3Nlc3Npb24nIHwgJ2xvY2FsJyA9ICdsb2NhbCc7XHJcbiAgQElucHV0KCkgc3RvcmFnZUlkID0gJyc7XHJcblxyXG4gIGNvbnN0cnVjdG9yKFxyXG4gICAgcHJpdmF0ZSBsb2NhbFN0b3JhZ2VTZXJ2aWNlOiBMb2NhbFN0b3JhZ2VTZXJ2aWNlLFxyXG4gICAgcHJpdmF0ZSBzZXNzaW9uU3RvcmFnZVNlcnZpY2U6IFNlc3Npb25TdG9yYWdlU2VydmljZSxcclxuICApIHtcclxuICB9XHJcblxyXG4gIG5nT25Jbml0KCkge1xyXG4gICAgaWYgKE51bWJlci5pc05hTihOdW1iZXIodGhpcy5zaXplUHgpKSkge1xyXG4gICAgICB0aHJvdyBuZXcgRXJyb3IoJ3RoZSB2YWx1ZSB5b3UgcHJvdmlkZWQgZm9yIHNpemVQeCBpcyBub3QgYSBudW1iZXInKTtcclxuICAgIH1cclxuICB9XHJcblxyXG4gIG9uRHJhZ1Jlc2l6ZUVuZChlOiBDZGtEcmFnRW5kKTogdm9pZCB7XHJcbiAgICBlLnNvdXJjZS5yZXNldCgpO1xyXG4gICAgY29uc3QgaW5jID0gdGhpcy5yZXNpemVBeGlzID09PSAneScgPyBlLmRpc3RhbmNlLnkgOiBlLmRpc3RhbmNlLng7XHJcbiAgICB0aGlzLnNpemVQeCArPSBpbmM7XHJcbiAgICB0aGlzLnNpemVQeCA9IE1hdGgubWluKE1hdGgubWF4KHRoaXMuc2l6ZVB4LCB0aGlzLm1pblNpemVQeCksIHRoaXMubWF4U2l6ZVB4KTtcclxuICAgIHRoaXMuc2l6ZVB4Q2hhbmdlLmVtaXQodGhpcy5zaXplUHgpO1xyXG4gICAgaWYgKHRoaXMuc3RvcmFnZUlkKSB7XHJcbiAgICAgIGlmICh0aGlzLnN0b3JhZ2UgPT09ICdsb2NhbCcpIHtcclxuICAgICAgICB0aGlzLmxvY2FsU3RvcmFnZVNlcnZpY2Uuc2V0SXRlbSh0aGlzLnN0b3JhZ2VJZCwgdGhpcy5zaXplUHgpO1xyXG4gICAgICB9IGVsc2Uge1xyXG4gICAgICAgIHRoaXMuc2Vzc2lvblN0b3JhZ2VTZXJ2aWNlLnNldEl0ZW0odGhpcy5zdG9yYWdlSWQsIHRoaXMuc2l6ZVB4KTtcclxuICAgICAgfVxyXG4gICAgfVxyXG4gIH1cclxuXHJcbn1cclxuIiwiPGRpdiAoY2RrRHJhZ0VuZGVkKT1cIm9uRHJhZ1Jlc2l6ZUVuZCgkZXZlbnQpXCJcclxuICAgICBbY2RrRHJhZ0xvY2tBeGlzXT1cInJlc2l6ZUF4aXNcIlxyXG4gICAgIFtjbGFzcy5yZXNpemUteF09XCJyZXNpemVBeGlzID09PSAneCdcIlxyXG4gICAgIGNka0RyYWdcclxuICAgICBjbGFzcz1cInJlc2l6ZXJcIj5cclxuPC9kaXY+XHJcbiJdfQ==