static-columns 13.3.2 → 13.3.4

package/client/fesm2015/static-columns.mjs

@@ -1,276 +1,374 @@
 import * as i0 from '@angular/core';
-import { Directive, Component, HostBinding, Input, EventEmitter, Output, ViewChildren, NgModule } from '@angular/core';
+import { Directive, Injectable, Component, HostBinding, Input, EventEmitter, Output, ViewChildren, NgModule } from '@angular/core';
 import { Subject, takeUntil } from 'rxjs';
 import * as i1 from '@angular/cdk/layout';
-import { LayoutModule } from '@angular/cdk/layout';
+import { Breakpoints, LayoutModule } from '@angular/cdk/layout';
+import { _ } from 'tnp-core/browser';
 
-class DirectiveGrow {
-    constructor(e, renderer) {
-        this.e = e;
-        this.renderer = renderer;
-        setTimeout(() => {
-            renderer.setStyle(e.nativeElement, 'flexGrow', '1');
-        }, 0);
-    }
-}
-DirectiveGrow.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DirectiveGrow, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-DirectiveGrow.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: DirectiveGrow, selector: "[grow]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DirectiveGrow, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[grow]'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; } });
-;
+class DirectiveGrow {
+    constructor(e, renderer) {
+        this.e = e;
+        this.renderer = renderer;
+        setTimeout(() => {
+            renderer.setStyle(e.nativeElement, 'flexGrow', '1');
+        }, 0);
+    }
+}
+DirectiveGrow.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DirectiveGrow, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+DirectiveGrow.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: DirectiveGrow, selector: "[grow]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DirectiveGrow, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[grow]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; } });
+;
 ({}); // @--end-of-file-for-module=static-columns lib/column/column-grow.directive.ts
 
-class DirectiveHideMobile {
-    constructor(e, renderer, breakpointObserver) {
-        this.e = e;
-        this.renderer = renderer;
-        this.breakpointObserver = breakpointObserver;
-        this.$destroy = new Subject();
-    }
-    ngOnInit() {
-        this.breakpointObserver
-            .observe(['(min-width: 600px)'])
-            .pipe(takeUntil(this.$destroy))
-            .subscribe((state) => {
-            if (typeof this.originalDisaplay === 'undefined') {
-                this.originalDisaplay = this.e.nativeElement.style.display;
-            }
-            if (state.matches) {
-                this.renderer.setStyle(this.e.nativeElement, 'display', this.originalDisaplay);
-            }
-            else {
-                this.renderer.setStyle(this.e.nativeElement, 'display', 'none');
-            }
-        });
-    }
-    ngOnDestroy() {
-        this.$destroy.next(void 0);
-        this.$destroy.complete();
-    }
-}
-DirectiveHideMobile.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DirectiveHideMobile, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Directive });
-DirectiveHideMobile.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: DirectiveHideMobile, selector: "[hideMobile]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DirectiveHideMobile, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[hideMobile]'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.BreakpointObserver }]; } });
-;
+class BreakpointsService {
+    constructor(breakpointObserver) {
+        this.sub = new Subject();
+        this.listenTo = this.sub.asObservable();
+        breakpointObserver.observe([Breakpoints.XSmall, Breakpoints.Tablet, Breakpoints.Web]).subscribe((state) => {
+            if (!_.isUndefined(Breakpoints.XSmall.split(', ').find(f => state.breakpoints[f]))) {
+                this.sub.next('mobile');
+            }
+            else if (!_.isUndefined(Breakpoints.Tablet.split(', ').find(f => state.breakpoints[f]))) {
+                this.sub.next('tablet');
+            }
+            else if (!_.isUndefined(Breakpoints.Web.split(', ').find(f => state.breakpoints[f]))) {
+                this.sub.next('desktop');
+            }
+        });
+        setTimeout(() => {
+            if (breakpointObserver.isMatched([Breakpoints.XSmall])) {
+                this.sub.next('mobile');
+            }
+            if (breakpointObserver.isMatched([Breakpoints.Tablet])) {
+                this.sub.next('tablet');
+            }
+            if (breakpointObserver.isMatched([Breakpoints.Web])) {
+                this.sub.next('desktop');
+            }
+        });
+    }
+}
+BreakpointsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BreakpointsService, deps: [{ token: i1.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Injectable });
+BreakpointsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BreakpointsService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BreakpointsService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: function () { return [{ type: i1.BreakpointObserver }]; } });
+;
+({}); // @--end-of-file-for-module=static-columns lib/breakpoints.service.ts
+
+class BaseHideShowDirective {
+    constructor(e, renderer, breakpoints) {
+        this.e = e;
+        this.renderer = renderer;
+        this.breakpoints = breakpoints;
+        this.$destroy = new Subject();
+    }
+    hideElement() {
+        this.renderer.setStyle(this.e.nativeElement, 'display', 'none');
+    }
+    showElement() {
+        this.renderer.setStyle(this.e.nativeElement, 'display', this.originalDisaplay);
+    }
+    ngOnInit() {
+        //Called after ngAfterContentInit when the component's view has been initialized. Applies to components only.
+        //Add 'implements AfterViewInit' to the class.
+        this.breakpoints
+            .listenTo
+            .pipe(takeUntil(this.$destroy))
+            .subscribe((state) => {
+            if (typeof this.originalDisaplay === 'undefined') {
+                this.originalDisaplay = this.e.nativeElement.style.display;
+            }
+            this.action(state);
+        });
+    }
+    ngOnDestroy() {
+        this.$destroy.next(void 0);
+        this.$destroy.complete();
+    }
+}
+BaseHideShowDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BaseHideShowDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: BreakpointsService }], target: i0.ɵɵFactoryTarget.Directive });
+BaseHideShowDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: BaseHideShowDirective, selector: "[baseHideShowDirective]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BaseHideShowDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[baseHideShowDirective]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: BreakpointsService }]; } });
+;
+({}); // @--end-of-file-for-module=static-columns lib/column/base-hide-show.directive.ts
+
+class DirectiveHideMobile extends BaseHideShowDirective {
+    action(state) {
+        if (state === 'mobile') {
+            this.hideElement();
+        }
+        else {
+            this.showElement();
+        }
+    }
+}
+DirectiveHideMobile.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DirectiveHideMobile, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+DirectiveHideMobile.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: DirectiveHideMobile, selector: "[hideMobile]", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DirectiveHideMobile, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[hideMobile]'
+                }]
+        }] });
+;
 ({}); // @--end-of-file-for-module=static-columns lib/column/column-hide-mobile.directive.ts
 
-class DirectiveHideTablet {
-    constructor(e, renderer, breakpointObserver) {
-        this.e = e;
-        this.renderer = renderer;
-        this.breakpointObserver = breakpointObserver;
-        this.$destroy = new Subject();
-    }
-    ngOnInit() {
-        this.breakpointObserver
-            .observe(['(min-width: 800px)'])
-            .pipe(takeUntil(this.$destroy))
-            .subscribe((state) => {
-            if (typeof this.originalDisaplay === 'undefined') {
-                this.originalDisaplay = this.e.nativeElement.style.display;
-            }
-            if (state.matches) {
-                this.renderer.setStyle(this.e.nativeElement, 'display', this.originalDisaplay);
-            }
-            else {
-                this.renderer.setStyle(this.e.nativeElement, 'display', 'none');
-            }
-        });
-    }
-    ngOnDestroy() {
-        this.$destroy.next(void 0);
-        this.$destroy.complete();
-    }
-}
-DirectiveHideTablet.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DirectiveHideTablet, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Directive });
-DirectiveHideTablet.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: DirectiveHideTablet, selector: "[hideTablet]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DirectiveHideTablet, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[hideTablet]'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.BreakpointObserver }]; } });
-;
+class DirectiveHideTablet extends BaseHideShowDirective {
+    action(state) {
+        if (state === 'tablet') {
+            this.hideElement();
+        }
+        else {
+            this.showElement();
+        }
+    }
+}
+DirectiveHideTablet.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DirectiveHideTablet, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+DirectiveHideTablet.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: DirectiveHideTablet, selector: "[hideTablet]", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DirectiveHideTablet, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[hideTablet]'
+                }]
+        }] });
+;
 ({}); // @--end-of-file-for-module=static-columns lib/column/column-hide-tablet.directive.ts
 
-class DirectiveShowMobile {
-    constructor(e, renderer, breakpointObserver) {
-        this.e = e;
-        this.renderer = renderer;
-        this.breakpointObserver = breakpointObserver;
-        this.$destroy = new Subject();
-    }
-    ngOnInit() {
-        this.breakpointObserver
-            .observe(['(min-width: 600px)'])
-            .pipe(takeUntil(this.$destroy))
-            .subscribe((state) => {
-            if (typeof this.originalDisaplay === 'undefined') {
-                this.originalDisaplay = this.e.nativeElement.style.display;
-            }
-            if (state.matches) {
-                this.renderer.setStyle(this.e.nativeElement, 'display', 'none');
-            }
-            else {
-                this.renderer.setStyle(this.e.nativeElement, 'display', this.originalDisaplay);
-            }
-        });
-    }
-    ngOnDestroy() {
-        this.$destroy.next(void 0);
-        this.$destroy.complete();
-    }
-}
-DirectiveShowMobile.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DirectiveShowMobile, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Directive });
-DirectiveShowMobile.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: DirectiveShowMobile, selector: "[showMobile]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DirectiveShowMobile, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[showMobile]'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.BreakpointObserver }]; } });
-;
+class DirectiveHideDesktop extends BaseHideShowDirective {
+    action(state) {
+        if (state === 'desktop') {
+            this.hideElement();
+        }
+        else {
+            this.showElement();
+        }
+    }
+}
+DirectiveHideDesktop.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DirectiveHideDesktop, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+DirectiveHideDesktop.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: DirectiveHideDesktop, selector: "[hideDesktop]", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DirectiveHideDesktop, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[hideDesktop]'
+                }]
+        }] });
+;
+({}); // @--end-of-file-for-module=static-columns lib/column/column-hide-desktop.directive.ts
+
+class DirectiveShowMobile extends BaseHideShowDirective {
+    action(state) {
+        if (state === 'mobile') {
+            this.showElement();
+        }
+        else {
+            this.hideElement();
+        }
+    }
+}
+DirectiveShowMobile.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DirectiveShowMobile, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+DirectiveShowMobile.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: DirectiveShowMobile, selector: "[showMobile]", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DirectiveShowMobile, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[showMobile]'
+                }]
+        }] });
+;
 ({}); // @--end-of-file-for-module=static-columns lib/column/column-show-mobile.directive.ts
 
-class ColumnComponent {
-    constructor() {
-    }
-    ngOnInit() { }
-}
-ColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ColumnComponent, selector: "column", inputs: { width: "width" }, host: { properties: { "style.flex.basis.px": "this.width", "style.minWidth.px": "this.width" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{flex-grow:0;flex-shrink:0;width:0px}\n"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'column', template: '<ng-content></ng-content>', styles: [":host{flex-grow:0;flex-shrink:0;width:0px}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { width: [{
-                type: HostBinding,
-                args: ['style.flex.basis.px']
-            }, {
-                type: HostBinding,
-                args: ['style.minWidth.px']
-            }, {
-                type: Input
-            }] } });
-;
+class DirectiveShowTablet extends BaseHideShowDirective {
+    action(state) {
+        if (state === 'tablet') {
+            this.showElement();
+        }
+        else {
+            this.hideElement();
+        }
+    }
+}
+DirectiveShowTablet.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DirectiveShowTablet, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+DirectiveShowTablet.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: DirectiveShowTablet, selector: "[showTablet]", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DirectiveShowTablet, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[showTablet]'
+                }]
+        }] });
+;
+({}); // @--end-of-file-for-module=static-columns lib/column/column-show-tablet.directive.ts
+
+class DirectiveShowDesktop extends BaseHideShowDirective {
+    action(state) {
+        if (state === 'desktop') {
+            this.showElement();
+        }
+        else {
+            this.hideElement();
+        }
+    }
+}
+DirectiveShowDesktop.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DirectiveShowDesktop, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+DirectiveShowDesktop.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: DirectiveShowDesktop, selector: "[showDesktop]", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DirectiveShowDesktop, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[showDesktop]'
+                }]
+        }] });
+;
+({}); // @--end-of-file-for-module=static-columns lib/column/column-show-desktop.directive.ts
+
+class ColumnComponent {
+    constructor() {
+    }
+    ngOnInit() { }
+}
+ColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ColumnComponent, selector: "column", inputs: { width: "width" }, host: { properties: { "style.flex.basis.px": "this.width", "style.minWidth.px": "this.width" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{flex-grow:0;flex-shrink:0;width:0px}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'column', template: '<ng-content></ng-content>', styles: [":host{flex-grow:0;flex-shrink:0;width:0px}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { width: [{
+                type: HostBinding,
+                args: ['style.flex.basis.px']
+            }, {
+                type: HostBinding,
+                args: ['style.minWidth.px']
+            }, {
+                type: Input
+            }] } });
+;
 ({}); // @--end-of-file-for-module=static-columns lib/column/column.component.ts
 
-;
+;
 ({}); // @--end-of-file-for-module=static-columns lib/column/index.ts
 
-class ColumnsGapComponent {
-    constructor() {
-        this.width = 20;
-        this.handlers = [];
-        this.columnsGapDataChanged = new EventEmitter();
-        this.columnsGapData = {};
-    }
-    ngOnInit() {
-    }
-    ngOnDestroy() {
-        this.handlers.forEach(h => h.unsubscribe());
-    }
-}
-ColumnsGapComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnsGapComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ColumnsGapComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ColumnsGapComponent, selector: "columns-gap", inputs: { columnsGapData: "columnsGapData" }, outputs: { columnsGapDataChanged: "columnsGapDataChanged" }, host: { properties: { "style.flex.basis.px": "this.width", "style.minWidth.px": "this.width" } }, ngImport: i0, template: "<column [width]=\"width\"></column>\r\n", styles: [":host{flex-grow:0;flex-shrink:0;width:0px}\n"], components: [{ type: ColumnComponent, selector: "column", inputs: ["width"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnsGapComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'columns-gap', template: "<column [width]=\"width\"></column>\r\n", styles: [":host{flex-grow:0;flex-shrink:0;width:0px}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { width: [{
-                type: HostBinding,
-                args: ['style.flex.basis.px']
-            }, {
-                type: HostBinding,
-                args: ['style.minWidth.px']
-            }], columnsGapDataChanged: [{
-                type: Output
-            }], columnsGapData: [{
-                type: Input
-            }] } });
-;
+class ColumnsGapComponent {
+    constructor() {
+        this.width = 20;
+        this.handlers = [];
+        this.columnsGapDataChanged = new EventEmitter();
+        this.columnsGapData = {};
+    }
+    ngOnInit() {
+    }
+    ngOnDestroy() {
+        this.handlers.forEach(h => h.unsubscribe());
+    }
+}
+ColumnsGapComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnsGapComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ColumnsGapComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ColumnsGapComponent, selector: "columns-gap", inputs: { columnsGapData: "columnsGapData" }, outputs: { columnsGapDataChanged: "columnsGapDataChanged" }, host: { properties: { "style.flex.basis.px": "this.width", "style.minWidth.px": "this.width" } }, ngImport: i0, template: "<column [width]=\"width\"></column>\n", styles: [":host{flex-grow:0;flex-shrink:0;width:0px}\n"], components: [{ type: ColumnComponent, selector: "column", inputs: ["width"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnsGapComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'columns-gap', template: "<column [width]=\"width\"></column>\n", styles: [":host{flex-grow:0;flex-shrink:0;width:0px}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { width: [{
+                type: HostBinding,
+                args: ['style.flex.basis.px']
+            }, {
+                type: HostBinding,
+                args: ['style.minWidth.px']
+            }], columnsGapDataChanged: [{
+                type: Output
+            }], columnsGapData: [{
+                type: Input
+            }] } });
+;
 ({}); // @--end-of-file-for-module=static-columns lib/columns-gap/columns-gap.component.ts
 
-;
+;
 ({}); // @--end-of-file-for-module=static-columns lib/columns-gap/index.ts
 
-class ColumnsComponent {
-    constructor() {
-    }
-    ngOnInit() { }
-}
-ColumnsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ColumnsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ColumnsComponent, selector: "columns-container", viewQueries: [{ propertyName: "childrens", predicate: ColumnComponent, descendants: true }], ngImport: i0, template: "<ng-content></ng-content>\r\n", styles: [":host{display:flex;width:100%;align-content:streach;justify-content:space-between}.static-columns-hide-mobile{display:block}@media (max-width: 600px){.static-columns-hide-mobile{display:none}}\n"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'columns-container', template: "<ng-content></ng-content>\r\n", styles: [":host{display:flex;width:100%;align-content:streach;justify-content:space-between}.static-columns-hide-mobile{display:block}@media (max-width: 600px){.static-columns-hide-mobile{display:none}}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { childrens: [{
-                type: ViewChildren,
-                args: [ColumnComponent]
-            }] } });
-;
+class ColumnsComponent {
+    constructor() {
+    }
+    ngOnInit() { }
+}
+ColumnsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ColumnsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ColumnsComponent, selector: "columns-container", viewQueries: [{ propertyName: "childrens", predicate: ColumnComponent, descendants: true }], ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:flex;width:100%;align-content:streach;justify-content:space-between}.static-columns-hide-mobile{display:block}@media (max-width: 600px){.static-columns-hide-mobile{display:none}}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'columns-container', template: "<ng-content></ng-content>\n", styles: [":host{display:flex;width:100%;align-content:streach;justify-content:space-between}.static-columns-hide-mobile{display:block}@media (max-width: 600px){.static-columns-hide-mobile{display:none}}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { childrens: [{
+                type: ViewChildren,
+                args: [ColumnComponent]
+            }] } });
+;
 ({}); // @--end-of-file-for-module=static-columns lib/columns.component.ts
 
-const components = [
-    ColumnsComponent,
-    ColumnComponent,
-    DirectiveGrow,
-    DirectiveHideMobile,
-    DirectiveHideTablet,
-    DirectiveShowMobile,
-    ColumnsGapComponent,
-];
-class StaticColumnsModule {
-}
-StaticColumnsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: StaticColumnsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-StaticColumnsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: StaticColumnsModule, declarations: [ColumnsComponent,
-        ColumnComponent,
-        DirectiveGrow,
-        DirectiveHideMobile,
-        DirectiveHideTablet,
-        DirectiveShowMobile,
-        ColumnsGapComponent], imports: [LayoutModule], exports: [LayoutModule, ColumnsComponent,
-        ColumnComponent,
-        DirectiveGrow,
-        DirectiveHideMobile,
-        DirectiveHideTablet,
-        DirectiveShowMobile,
-        ColumnsGapComponent] });
-StaticColumnsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: StaticColumnsModule, providers: [], imports: [[
-            LayoutModule,
-        ], LayoutModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: StaticColumnsModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        LayoutModule,
-                    ],
-                    exports: [
-                        LayoutModule,
-                        ...components,
-                    ],
-                    declarations: [
-                        ...components,
-                    ],
-                    providers: [],
-                }]
-        }] });
-;
+const components = [
+    ColumnsComponent,
+    ColumnComponent,
+    DirectiveGrow,
+    DirectiveHideMobile,
+    DirectiveHideTablet,
+    DirectiveHideDesktop,
+    DirectiveShowTablet,
+    DirectiveShowMobile,
+    DirectiveShowDesktop,
+    ColumnsGapComponent,
+];
+class StaticColumnsModule {
+}
+StaticColumnsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: StaticColumnsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+StaticColumnsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: StaticColumnsModule, declarations: [ColumnsComponent,
+        ColumnComponent,
+        DirectiveGrow,
+        DirectiveHideMobile,
+        DirectiveHideTablet,
+        DirectiveHideDesktop,
+        DirectiveShowTablet,
+        DirectiveShowMobile,
+        DirectiveShowDesktop,
+        ColumnsGapComponent], imports: [LayoutModule], exports: [LayoutModule, ColumnsComponent,
+        ColumnComponent,
+        DirectiveGrow,
+        DirectiveHideMobile,
+        DirectiveHideTablet,
+        DirectiveHideDesktop,
+        DirectiveShowTablet,
+        DirectiveShowMobile,
+        DirectiveShowDesktop,
+        ColumnsGapComponent] });
+StaticColumnsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: StaticColumnsModule, providers: [BreakpointsService], imports: [[
+            LayoutModule,
+        ], LayoutModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: StaticColumnsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        LayoutModule,
+                    ],
+                    exports: [
+                        LayoutModule,
+                        ...components,
+                    ],
+                    declarations: [
+                        ...components,
+                    ],
+                    providers: [BreakpointsService],
+                }]
+        }] });
+;
 ({}); // @--end-of-file-for-module=static-columns lib/columns.module.ts
 
-;
+;
 ({}); // @--end-of-file-for-module=static-columns lib/index.ts
 
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
 
-export { ColumnComponent, ColumnsComponent, ColumnsGapComponent, DirectiveGrow, DirectiveHideMobile, DirectiveHideTablet, DirectiveShowMobile, StaticColumnsModule };
+export { BreakpointsService, ColumnComponent, ColumnsComponent, ColumnsGapComponent, DirectiveGrow, DirectiveHideDesktop, DirectiveHideMobile, DirectiveHideTablet, DirectiveShowDesktop, DirectiveShowMobile, DirectiveShowTablet, StaticColumnsModule };
 //# sourceMappingURL=static-columns.mjs.map