@aheadlabs/ngx-toolset
Version:
Opinionated Angular library that contains common tools and patterns to simplify things and reuse code.
173 lines (164 loc) • 10.3 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, Component, NgModule, EventEmitter, ViewChild, Output } from '@angular/core';
import * as i1 from '@angular/cdk/layout';
class NgxToolsetService {
constructor() { }
}
NgxToolsetService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: NgxToolsetService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
NgxToolsetService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: NgxToolsetService, providedIn: 'root' });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: NgxToolsetService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: function () { return []; } });
class NgxToolsetComponent {
constructor() { }
}
NgxToolsetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: NgxToolsetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
NgxToolsetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: NgxToolsetComponent, selector: "lib-ngx-toolset", ngImport: i0, template: `
<p>
ngx-toolset works!
</p>
`, isInline: true });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: NgxToolsetComponent, decorators: [{
type: Component,
args: [{ selector: 'lib-ngx-toolset', template: `
<p>
ngx-toolset works!
</p>
` }]
}], ctorParameters: function () { return []; } });
class NgxToolsetModule {
}
NgxToolsetModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: NgxToolsetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
NgxToolsetModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.0", ngImport: i0, type: NgxToolsetModule, declarations: [NgxToolsetComponent], exports: [NgxToolsetComponent] });
NgxToolsetModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: NgxToolsetModule });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: NgxToolsetModule, decorators: [{
type: NgModule,
args: [{
declarations: [
NgxToolsetComponent
],
imports: [],
exports: [
NgxToolsetComponent
]
}]
}] });
/**
* Emits a string that can be used to visualize the current bootstrap breakpoint.
* For more info, see https://getbootstrap.com/docs/5.0/layout/breakpoints/
*/
class BootstrapBreakpointComponent {
constructor(mediaMatcher, breakPointObserver) {
this.mediaMatcher = mediaMatcher;
this.breakPointObserver = breakPointObserver;
/**
* Event that emits bootstrap breakpoint value
* @type EventEmitter<string>
* @public
*/
this.bootstrapBreakpoint = new EventEmitter();
/**
* Event that emits bootstrap breakpoint value with a hyphen at the start.
* F.I: -sm, -xs, -xxl
*
* @type EventEmitter<string>
* @public
*/
this.bootstrapBreakpointStart = new EventEmitter();
/**
* Event that emits bootstrap breakpoint value with a hyphen at the end.
* F.I: sm-, xs-, xxl-
* @type EventEmitter<string>
* @public
*/
this.bootstrapBreakpointEnd = new EventEmitter();
/**
* Event that emits bootstrap breakpoint value with a hyphen both at the start and end.
* F.I: -sm-, -xs-, -xxl-
* @type EventEmitter<string>
* @public
*/
this.bootstrapBreakpointStartEnd = new EventEmitter();
this._mediaQueries = [
{ mediaQuery: '(max-width: 575px)', breakpoint: 'xs' },
{ mediaQuery: '(min-width: 576px) and (max-width: 767px)', breakpoint: 'sm' },
{ mediaQuery: '(min-width: 768px) and (max-width: 991px)', breakpoint: 'md' },
{ mediaQuery: '(min-width: 992px) and (max-width: 1199px)', breakpoint: 'lg' },
{ mediaQuery: '(min-width: 1200px) and (max-width: 1399px)', breakpoint: 'xl' },
{ mediaQuery: '(min-width: 1400px)', breakpoint: 'xxl' },
];
}
ngOnInit() {
this._mediaQueries.forEach(mq => this.observeMediaQueries(mq.mediaQuery));
}
getBreakpointFromMediaQuery(mediaQuery) {
return this._mediaQueries.filter(mq => mq.mediaQuery === mediaQuery).pop()?.breakpoint ?? '';
}
handleMediaQueryListEvent(event) {
this.setVariables(event.media);
}
observeMediaQueries(mediaQuery) {
// For initial value, use the breakpoint observer and emit initial breakpoint
if (this.breakPointObserver.isMatched(mediaQuery)) {
this.setVariables(mediaQuery);
}
// Then, open several observers with media matcher in order to live observe for changes on media queries.
this._matcher = this.mediaMatcher.matchMedia(mediaQuery);
this._matcher.addEventListener('change', this.handleMediaQueryListEvent.bind(this), false);
}
setVariables(mediaQuery) {
this._bootstrapBreakpoint = this.getBreakpointFromMediaQuery(mediaQuery);
this.bootstrapBreakpoint.emit(this._bootstrapBreakpoint);
this.bootstrapBreakpointStart.emit(`-${this._bootstrapBreakpoint}`);
this.bootstrapBreakpointEnd.emit(`${this._bootstrapBreakpoint}-`);
this.bootstrapBreakpointStartEnd.emit(`-${this._bootstrapBreakpoint}-`);
}
ngOnDestroy() {
this._matcher?.removeEventListener('change', this.handleMediaQueryListEvent.bind(this));
}
}
BootstrapBreakpointComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: BootstrapBreakpointComponent, deps: [{ token: i1.MediaMatcher }, { token: i1.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component });
BootstrapBreakpointComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: BootstrapBreakpointComponent, selector: "ngxtoolset-bootstrap-breakpoint", outputs: { bootstrapBreakpoint: "bootstrapBreakpoint", bootstrapBreakpointStart: "bootstrapBreakpointStart", bootstrapBreakpointEnd: "bootstrapBreakpointEnd", bootstrapBreakpointStartEnd: "bootstrapBreakpointStartEnd" }, viewQueries: [{ propertyName: "bootstrapBreakpointComponent", first: true, predicate: ["bootstrapBreakpointComponent"], descendants: true }], ngImport: i0, template: "<div\n #bootstrapBreakpointComponent\n id=\"bootstrap-breakpoint-component\">\n</div>\n", styles: ["#bootstrap-breakpoint-component{display:none}@media (min-width: 1400px){#bootstrap-breakpoint-component:before{content:\"xxl\"}}@media (max-width: 1399px){#bootstrap-breakpoint-component:before{content:\"xl\"}}@media (max-width: 1199px){#bootstrap-breakpoint-component:before{content:\"lg\"}}@media (max-width: 991px){#bootstrap-breakpoint-component:before{content:\"md\"}}@media (max-width: 767px){#bootstrap-breakpoint-component:before{content:\"sm\"}}@media (max-width: 575px){#bootstrap-breakpoint-component:before{content:\"xs\"}}\n"] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: BootstrapBreakpointComponent, decorators: [{
type: Component,
args: [{ selector: 'ngxtoolset-bootstrap-breakpoint', template: "<div\n #bootstrapBreakpointComponent\n id=\"bootstrap-breakpoint-component\">\n</div>\n", styles: ["#bootstrap-breakpoint-component{display:none}@media (min-width: 1400px){#bootstrap-breakpoint-component:before{content:\"xxl\"}}@media (max-width: 1399px){#bootstrap-breakpoint-component:before{content:\"xl\"}}@media (max-width: 1199px){#bootstrap-breakpoint-component:before{content:\"lg\"}}@media (max-width: 991px){#bootstrap-breakpoint-component:before{content:\"md\"}}@media (max-width: 767px){#bootstrap-breakpoint-component:before{content:\"sm\"}}@media (max-width: 575px){#bootstrap-breakpoint-component:before{content:\"xs\"}}\n"] }]
}], ctorParameters: function () { return [{ type: i1.MediaMatcher }, { type: i1.BreakpointObserver }]; }, propDecorators: { bootstrapBreakpointComponent: [{
type: ViewChild,
args: ['bootstrapBreakpointComponent']
}], bootstrapBreakpoint: [{
type: Output
}], bootstrapBreakpointStart: [{
type: Output
}], bootstrapBreakpointEnd: [{
type: Output
}], bootstrapBreakpointStartEnd: [{
type: Output
}] } });
class BootstrapBreakpointModule {
}
BootstrapBreakpointModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: BootstrapBreakpointModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
BootstrapBreakpointModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.0", ngImport: i0, type: BootstrapBreakpointModule, declarations: [BootstrapBreakpointComponent], exports: [BootstrapBreakpointComponent] });
BootstrapBreakpointModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: BootstrapBreakpointModule });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: BootstrapBreakpointModule, decorators: [{
type: NgModule,
args: [{
declarations: [
BootstrapBreakpointComponent
],
imports: [],
exports: [
BootstrapBreakpointComponent
]
}]
}] });
/*
* Public API Surface of ngx-toolset
*/
/**
* Generated bundle index. Do not edit.
*/
export { BootstrapBreakpointComponent, BootstrapBreakpointModule, NgxToolsetComponent, NgxToolsetModule, NgxToolsetService };
//# sourceMappingURL=aheadlabs-ngx-toolset.mjs.map