@sumaris-net/ngx-components 1.20.16 → 1.20.17

package/bundles/sumaris-net.ngx-components.umd.js

@@ -20470,6 +20470,104 @@
         autofocus: [{ type: i0.Input }]
     };
 
+    var ResizableDirective = /** @class */ (function () {
+        function ResizableDirective(document, elementRef) {
+            var _this = this;
+            this.document = document;
+            this.elementRef = elementRef;
+            this.resizable = rxjs.fromEvent(this.elementRef.nativeElement, 'mousedown').pipe(operators.tap(function (e) {
+                e.preventDefault();
+                e.stopPropagation();
+            }), operators.switchMap(function () {
+                var _a = _this.elementRef.nativeElement.closest('th').getBoundingClientRect(), width = _a.width, right = _a.right;
+                return rxjs.fromEvent(_this.document, 'mousemove').pipe(operators.map(function (_a) {
+                    var clientX = _a.clientX;
+                    return width + clientX - right;
+                }), operators.distinctUntilChanged(), operators.takeUntil(rxjs.fromEvent(_this.document, 'mouseup')));
+            }));
+            this.fit = rxjs.fromEvent(this.elementRef.nativeElement, 'click').pipe(operators.bufferWhen(function () { return rxjs.interval(500); }), operators.filter(function (ar) { return ar.length === 2; }));
+        }
+        return ResizableDirective;
+    }());
+    ResizableDirective.decorators = [
+        { type: i0.Directive, args: [{
+                    selector: '[resizable]',
+                },] }
+    ];
+    ResizableDirective.ctorParameters = function () { return [
+        { type: undefined, decorators: [{ type: i0.Inject, args: [i1$4.DOCUMENT,] }] },
+        { type: i0.ElementRef, decorators: [{ type: i0.Inject, args: [i0.ElementRef,] }] }
+    ]; };
+    ResizableDirective.propDecorators = {
+        resizable: [{ type: i0.Output }],
+        fit: [{ type: i0.Output }]
+    };
+
+    var ResizableComponent = /** @class */ (function () {
+        function ResizableComponent(columnDef) {
+            this.columnDef = columnDef;
+            this.sizeChanged = new i0.EventEmitter();
+            this.width = null;
+            this.minWidth = null;
+            this.maxWidth = null;
+            this.debug = false;
+        }
+        ResizableComponent.prototype.onResize = function (width, opts) {
+            if (!this.resizable)
+                return;
+            if (this.debug)
+                console.info("resize:" + width);
+            this.minWidth = width + 'px';
+            this.maxWidth = width + 'px';
+            if (!opts || opts.emitEvent) {
+                this.sizeChanged.emit(width);
+            }
+        };
+        ResizableComponent.prototype.onFit = function (opts) {
+            if (!this.resizable)
+                return;
+            if (this.debug)
+                console.info('fit');
+            this.width = 'auto';
+            this.minWidth = null;
+            this.maxWidth = null;
+            if (!opts || opts.emitEvent) {
+                this.sizeChanged.emit(undefined);
+            }
+        };
+        return ResizableComponent;
+    }());
+    ResizableComponent.decorators = [
+        { type: i0.Component, args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: 'th[resizable]',
+                    template: "<div class=\"wrapper\">\n  <div class=\"content\">\n    <ng-content></ng-content>\n  </div>\n  <div class=\"bar\" [class.cdk-visually-hidden]=\"!resizable\" (resizable)=\"onResize($event)\" (fit)=\"onFit()\"></div>\n</div>\n",
+                    styles: [":host:last-child .bar{display:none}.wrapper{display:flex;justify-content:flex-end;align-items:center}.content{flex:1}.bar{height:var(--app-table-header-height,55px);width:10px;justify-self:flex-end;border-left:4px solid transparent;border-right:4px solid transparent;background:var(--ion-color-secondary);background-clip:content-box;cursor:ew-resize;opacity:0;transition:opacity .3s}.bar:active,.bar:hover{opacity:1}:host-context(.mat-table-sticky) .bar{width:12px!important}"]
+                },] }
+    ];
+    ResizableComponent.ctorParameters = function () { return [
+        { type: table.MatColumnDef, decorators: [{ type: i0.Optional }] }
+    ]; };
+    ResizableComponent.propDecorators = {
+        resizable: [{ type: i0.Input }],
+        sizeChanged: [{ type: i0.Output }],
+        width: [{ type: i0.HostBinding, args: ['style.width',] }],
+        minWidth: [{ type: i0.HostBinding, args: ['style.min-width',] }],
+        maxWidth: [{ type: i0.HostBinding, args: ['style.max-width',] }]
+    };
+
+    var ResizableModule = /** @class */ (function () {
+        function ResizableModule() {
+        }
+        return ResizableModule;
+    }());
+    ResizableModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    declarations: [ResizableComponent, ResizableDirective],
+                    exports: [ResizableComponent, ResizableDirective],
+                },] }
+    ];
+
     function mergeLoadResult(res1, res2) {
         var _c;
         var _a, _b;
@@ -32600,6 +32698,9 @@
     exports.ReferentialUtils = ReferentialUtils;
     exports.ReferentialValidatorService = ReferentialValidatorService;
     exports.RegisterConfirmPage = RegisterConfirmPage;
+    exports.ResizableComponent = ResizableComponent;
+    exports.ResizableDirective = ResizableDirective;
+    exports.ResizableModule = ResizableModule;
     exports.SETTINGS_DISPLAY_COLUMNS = SETTINGS_DISPLAY_COLUMNS;
     exports.SETTINGS_FILTER = SETTINGS_FILTER;
     exports.SETTINGS_PAGE_SIZE = SETTINGS_PAGE_SIZE;