@tapsellorg/angular-material-library
Version:
Angular library for Tapsell
88 lines (82 loc) • 4.31 kB
JavaScript
import * as i0 from '@angular/core';
import { signal, input, Directive, NgModule } from '@angular/core';
import { withDestroy } from '@tapsellorg/angular-material-library/src/lib/common';
import { takeUntil } from 'rxjs/operators';
import * as i1 from '@angular/cdk/layout';
import { CommonModule } from '@angular/common';
const PghBreakpoints = {
xs: '(min-width: 400px)',
sm: '(min-width: 600px)',
md: '(min-width: 720px)',
lg: '(min-width: 960px)',
xl: '(min-width: 1280px)',
'max-xs': '(max-width: 599.98px)',
'max-sm': '(max-width: 719.98px)',
'max-md': '(max-width: 959.98px)',
'max-lg': '(max-width: 1279.98px)',
};
class PghMediaDirective extends withDestroy() {
constructor(viewContainer, template, breakpointObserver, cdr) {
super();
this.viewContainer = viewContainer;
this.template = template;
this.breakpointObserver = breakpointObserver;
this.cdr = cdr;
this.mediaChange = signal(undefined);
this.ifMedia = input(undefined, {
transform: (breakpoints) => {
const media = this.mediaChange();
this.mediaChange.set(breakpoints);
this.observeBreakpoints(breakpoints);
return media;
},
});
this.hasView = false;
}
observeBreakpoints(breakpoints) {
const mappedBreakpoints = Array.isArray(breakpoints)
? breakpoints.map(breakpoint => PghBreakpoints[breakpoint])
: PghBreakpoints[breakpoints];
this.breakpointObserver
.observe(mappedBreakpoints)
.pipe(takeUntil(this._destroyed$))
.subscribe(result => {
if (result.matches && !this.hasView) {
this.hasView = true;
this.viewContainer.createEmbeddedView(this.template);
}
if (!result.matches && this.hasView) {
this.hasView = false;
this.viewContainer.clear();
}
this.cdr.detectChanges();
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PghMediaDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.TemplateRef }, { token: i1.BreakpointObserver }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.15", type: PghMediaDirective, isStandalone: false, selector: "[ifMedia]", inputs: { ifMedia: { classPropertyName: "ifMedia", publicName: "ifMedia", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PghMediaDirective, decorators: [{
type: Directive,
args: [{
selector: '[ifMedia]',
standalone: false,
}]
}], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef }, { type: i1.BreakpointObserver }, { type: i0.ChangeDetectorRef }] });
class PghMediaModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PghMediaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: PghMediaModule, declarations: [PghMediaDirective], imports: [CommonModule], exports: [PghMediaDirective] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PghMediaModule, imports: [CommonModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PghMediaModule, decorators: [{
type: NgModule,
args: [{
declarations: [PghMediaDirective],
imports: [CommonModule],
exports: [PghMediaDirective],
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { PghBreakpoints, PghMediaDirective, PghMediaModule };
//# sourceMappingURL=tapsellorg-angular-material-library-media.mjs.map