static-columns
Version:
Static columns with flex-box for Angular 2+
460 lines (438 loc) • 22.6 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, Directive, HostBinding, Input, Component, 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 { _ } from 'tnp-core/browser';
const BRK = {
mobile: '(max-width: 599.98px)',
// tablet: obsvious
desktop: '(min-width: 840.00px)',
};
class BreakpointsService {
listenTo() {
setTimeout(() => {
this.sub.next(this.current);
});
return this.sub.asObservable();
}
constructor(breakpointObserver) {
this.sub = new Subject();
breakpointObserver.observe([BRK.mobile, BRK.desktop]).subscribe(state => {
if (!_.isUndefined([BRK.mobile].find(f => state.breakpoints[f]))) {
this.current = 'mobile';
this.sub.next('mobile');
}
else if (!_.isUndefined([BRK.desktop].find(f => state.breakpoints[f]))) {
this.current = 'desktop';
this.sub.next('desktop');
}
else {
this.current = 'tablet';
this.sub.next('tablet');
}
});
setTimeout(() => {
if (breakpointObserver.isMatched([BRK.mobile])) {
this.current = 'mobile';
this.sub.next('mobile');
}
else if (breakpointObserver.isMatched([BRK.desktop])) {
this.current = 'desktop';
this.sub.next('desktop');
}
else {
this.current = 'tablet';
this.sub.next('tablet');
}
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BreakpointsService, deps: [{ token: i1.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BreakpointsService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BreakpointsService, decorators: [{
type: Injectable,
args: [{ providedIn: 'root' }]
}], ctorParameters: () => [{ type: i1.BreakpointObserver }] });
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);
}
scale(scale = 1) {
this.renderer.setStyle(this.e.nativeElement, 'transform', `scale(${scale})`);
}
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;
}
// console.log(`state for actin: ${state}`)
this.action(state);
});
}
ngOnDestroy() {
this.$destroy.next(void 0);
this.$destroy.complete();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BaseHideShowDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: BreakpointsService }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: BaseHideShowDirective, isStandalone: false, selector: "[baseHideShowDirective]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BaseHideShowDirective, decorators: [{
type: Directive,
args: [{
selector: '[baseHideShowDirective]',
standalone: false,
}]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: BreakpointsService }] });
class DirectiveGrow {
constructor(e, renderer) {
this.e = e;
this.renderer = renderer;
setTimeout(() => {
// e.nativeElement.style.flexGrow = 1;
renderer.setStyle(e.nativeElement, 'flexGrow', '1');
}, 0);
// renderer.setElementStyle(e.nativeElement, 'flexGrow', '1');
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DirectiveGrow, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: DirectiveGrow, isStandalone: false, selector: "[grow]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DirectiveGrow, decorators: [{
type: Directive,
args: [{
selector: '[grow]',
standalone: false,
}]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
class DirectiveHideDesktop extends BaseHideShowDirective {
action(state) {
if (state === 'desktop') {
this.hideElement();
}
else {
this.showElement();
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DirectiveHideDesktop, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: DirectiveHideDesktop, isStandalone: false, selector: "[hideDesktop]", usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DirectiveHideDesktop, decorators: [{
type: Directive,
args: [{
selector: '[hideDesktop]',
standalone: false,
}]
}] });
class DirectiveHideMobile extends BaseHideShowDirective {
action(state) {
if (state === 'mobile') {
this.hideElement();
}
else {
this.showElement();
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DirectiveHideMobile, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: DirectiveHideMobile, isStandalone: false, selector: "[hideMobile]", usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DirectiveHideMobile, decorators: [{
type: Directive,
args: [{
selector: '[hideMobile]',
standalone: false,
}]
}] });
class DirectiveHideTablet extends BaseHideShowDirective {
action(state) {
if (state === 'tablet') {
this.hideElement();
}
else {
this.showElement();
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DirectiveHideTablet, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: DirectiveHideTablet, isStandalone: false, selector: "[hideTablet]", usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DirectiveHideTablet, decorators: [{
type: Directive,
args: [{
selector: '[hideTablet]',
standalone: false,
}]
}] });
class DirectiveShowDesktop extends BaseHideShowDirective {
action(state) {
if (state === 'desktop') {
this.showElement();
}
else {
this.hideElement();
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DirectiveShowDesktop, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: DirectiveShowDesktop, isStandalone: false, selector: "[showDesktop]", usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DirectiveShowDesktop, decorators: [{
type: Directive,
args: [{
selector: '[showDesktop]',
standalone: false,
}]
}] });
class DirectiveShowMobile extends BaseHideShowDirective {
action(state) {
if (state === 'mobile') {
this.showElement();
}
else {
this.hideElement();
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DirectiveShowMobile, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: DirectiveShowMobile, isStandalone: false, selector: "[showMobile]", usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DirectiveShowMobile, decorators: [{
type: Directive,
args: [{
selector: '[showMobile]',
standalone: false,
}]
}] });
class DirectiveShowTablet extends BaseHideShowDirective {
action(state) {
if (state === 'tablet') {
this.showElement();
}
else {
this.hideElement();
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DirectiveShowTablet, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: DirectiveShowTablet, isStandalone: false, selector: "[showTablet]", usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DirectiveShowTablet, decorators: [{
type: Directive,
args: [{
selector: '[showTablet]',
standalone: false,
}]
}] });
class ColumnComponent {
constructor() {
// this.ccwidth = 90;
}
ngOnInit() { }
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ColumnComponent, isStandalone: false, 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: "19.2.14", ngImport: i0, type: ColumnComponent, decorators: [{
type: Component,
args: [{ selector: 'column', template: '<ng-content></ng-content>', standalone: false, styles: [":host{flex-grow:0;flex-shrink:0;width:0px}\n"] }]
}], ctorParameters: () => [], propDecorators: { width: [{
type: HostBinding,
args: ['style.flex.basis.px']
}, {
type: HostBinding,
args: ['style.minWidth.px']
}, {
type: Input
}] } });
class DirectiveShrinkOnMobile extends BaseHideShowDirective {
constructor(e, renderer, breakpoints) {
super(e, renderer, breakpoints);
this.e = e;
this.renderer = renderer;
this.breakpoints = breakpoints;
this.scaleFactor = 75;
}
action(state) {
if (state === 'mobile') {
this.scale(0.75);
}
else {
// if (state === 'tablet' && this.tablet75) {
// } else {
this.scale();
// }
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DirectiveShrinkOnMobile, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: BreakpointsService }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: DirectiveShrinkOnMobile, isStandalone: false, selector: "[shrinkOnMobile]", usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DirectiveShrinkOnMobile, decorators: [{
type: Directive,
args: [{
selector: '[shrinkOnMobile]',
standalone: false,
}]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: BreakpointsService }] });
class DirectiveShrinkOnMobile50 extends DirectiveShrinkOnMobile {
constructor() {
super(...arguments);
this.scaleFactor = 50;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DirectiveShrinkOnMobile50, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: DirectiveShrinkOnMobile50, isStandalone: false, selector: "[shrinkOnMobile50]", usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DirectiveShrinkOnMobile50, decorators: [{
type: Directive,
args: [{
selector: '[shrinkOnMobile50]',
standalone: false,
}]
}] });
// import { DirectiveShrinkOnMobile50 } from './shrink-on-mobile50.directive';
// import { DirectiveShrinkOnMobile } from './shrink-on-mobile75.directive';
class DirectiveShrinkOnTablet extends BaseHideShowDirective {
constructor(e, renderer, breakpoints) {
super(e, renderer, breakpoints);
this.e = e;
this.renderer = renderer;
this.breakpoints = breakpoints;
}
action(state) {
// if (state === 'tablet') {
// this.scale(0.75)
// } else {
// if (state === 'mobile' && (this.mobile50 || this.mobile75)) {
// } else {
// this.scale()
// }
// }
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DirectiveShrinkOnTablet, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: BreakpointsService }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: DirectiveShrinkOnTablet, isStandalone: false, selector: "[shrinkOnTablet]", usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DirectiveShrinkOnTablet, decorators: [{
type: Directive,
args: [{
selector: '[shrinkOnTablet]',
standalone: false,
}]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: BreakpointsService }] });
//#region @browser
//#endregion
//#region @browser
class ColumnsGapComponent {
constructor() {
this.width = 20;
this.handlers = [];
this.columnsGapDataChanged = new EventEmitter();
this.columnsGapData = {};
}
ngOnInit() { }
ngOnDestroy() {
this.handlers.forEach(h => h.unsubscribe());
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ColumnsGapComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ColumnsGapComponent, isStandalone: false, 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"], dependencies: [{ kind: "component", type: ColumnComponent, selector: "column", inputs: ["width"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ColumnsGapComponent, decorators: [{
type: Component,
args: [{ selector: 'columns-gap', standalone: false, template: "<column [width]=\"width\"></column>\n", styles: [":host{flex-grow:0;flex-shrink:0;width:0px}\n"] }]
}], ctorParameters: () => [], propDecorators: { width: [{
type: HostBinding,
args: ['style.flex.basis.px']
}, {
type: HostBinding,
args: ['style.minWidth.px']
}], columnsGapDataChanged: [{
type: Output
}], columnsGapData: [{
type: Input
}] } });
//#region @browser
//#endregion
// import { Log, Level } from 'ng2-logger/index';
// const log = Log.create('test');
// log.i('asdas')
class ColumnsComponent {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ColumnsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ColumnsComponent, isStandalone: false, 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: "19.2.14", ngImport: i0, type: ColumnsComponent, decorators: [{
type: Component,
args: [{ selector: 'columns-container', standalone: false, 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"] }]
}], propDecorators: { childrens: [{
type: ViewChildren,
args: [ColumnComponent]
}] } });
//#region @browser
const components = [
ColumnsComponent,
ColumnComponent,
DirectiveGrow,
DirectiveHideMobile,
DirectiveHideTablet,
DirectiveHideDesktop,
DirectiveShowTablet,
DirectiveShowMobile,
DirectiveShowDesktop,
ColumnsGapComponent,
DirectiveShrinkOnMobile50,
DirectiveShrinkOnMobile,
DirectiveShrinkOnTablet,
];
class StaticColumnsModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: StaticColumnsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: StaticColumnsModule, declarations: [ColumnsComponent,
ColumnComponent,
DirectiveGrow,
DirectiveHideMobile,
DirectiveHideTablet,
DirectiveHideDesktop,
DirectiveShowTablet,
DirectiveShowMobile,
DirectiveShowDesktop,
ColumnsGapComponent,
DirectiveShrinkOnMobile50,
DirectiveShrinkOnMobile,
DirectiveShrinkOnTablet], imports: [LayoutModule], exports: [LayoutModule, ColumnsComponent,
ColumnComponent,
DirectiveGrow,
DirectiveHideMobile,
DirectiveHideTablet,
DirectiveHideDesktop,
DirectiveShowTablet,
DirectiveShowMobile,
DirectiveShowDesktop,
ColumnsGapComponent,
DirectiveShrinkOnMobile50,
DirectiveShrinkOnMobile,
DirectiveShrinkOnTablet] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: StaticColumnsModule, providers: [BreakpointsService], imports: [LayoutModule, LayoutModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: StaticColumnsModule, decorators: [{
type: NgModule,
args: [{
imports: [LayoutModule],
exports: [LayoutModule, ...components],
declarations: [...components],
providers: [BreakpointsService],
}]
}] });
//#endregion
/* */
/* */
/* */
/* */
/**
* Generated bundle index. Do not edit.
*/
export { BaseHideShowDirective, BreakpointsService, ColumnComponent, ColumnsComponent, ColumnsGapComponent, DirectiveGrow, DirectiveHideDesktop, DirectiveHideMobile, DirectiveHideTablet, DirectiveShowDesktop, DirectiveShowMobile, DirectiveShowTablet, DirectiveShrinkOnMobile, DirectiveShrinkOnMobile50, DirectiveShrinkOnTablet, StaticColumnsModule };
//# sourceMappingURL=static-columns.mjs.map