@pepperi/lib
Version:
This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 10.0.1.
89 lines • 9.48 kB
JavaScript
import { Component, HostListener } from '@angular/core';
import { SCREEN_SIZE } from '@pepperi/lib';
import * as i0 from "@angular/core";
import * as i1 from "@pepperi/lib";
import * as i2 from "@angular/common";
import * as i3 from "@angular/flex-layout/extended";
function SizeDetectorComponent_div_0_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementStart(0, "div", 1);
i0.ɵɵtext(1);
i0.ɵɵelementEnd();
} if (rf & 2) {
const s_r1 = ctx.$implicit;
const ctx_r0 = i0.ɵɵnextContext();
i0.ɵɵclassMap(s_r1.css + " " + (ctx_r0.prefix + s_r1.id));
i0.ɵɵpropertyInterpolate("fxShow.xs", s_r1.name == "xs");
i0.ɵɵpropertyInterpolate("fxShow.sm", s_r1.name == "sm");
i0.ɵɵpropertyInterpolate("fxShow.md", s_r1.name == "md");
i0.ɵɵpropertyInterpolate("fxShow.lg", s_r1.name == "lg");
i0.ɵɵpropertyInterpolate("fxShow.xl", s_r1.name == "xl");
i0.ɵɵadvance(1);
i0.ɵɵtextInterpolate1("The current screen size is - ", s_r1.name, "\n");
} }
export class SizeDetectorComponent {
constructor(element, layoutService) {
this.element = element;
this.layoutService = layoutService;
this.prefix = 'is-';
this.sizes = [
{
id: SCREEN_SIZE.XS,
name: 'xs',
css: `d-block d-sm-none`
},
{
id: SCREEN_SIZE.SM,
name: 'sm',
css: `d-none d-sm-block d-md-none`
},
{
id: SCREEN_SIZE.MD,
name: 'md',
css: `d-none d-md-block d-lg-none`
},
{
id: SCREEN_SIZE.LG,
name: 'lg',
css: `d-none d-lg-block d-xl-none`
},
{
id: SCREEN_SIZE.XL,
name: 'xl',
css: `d-none d-xl-block`
},
];
}
onResize(event) {
this.detectScreenSize();
}
ngAfterViewInit() {
this.detectScreenSize();
}
detectScreenSize() {
const currentSize = this.sizes.find(x => {
const el = this.element.nativeElement.querySelector(`.${this.prefix}${x.id}`);
const isVisible = window.getComputedStyle(el).display !== 'none';
return isVisible;
});
this.layoutService.onResize(currentSize.id);
}
}
SizeDetectorComponent.ɵfac = function SizeDetectorComponent_Factory(t) { return new (t || SizeDetectorComponent)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i1.LayoutService)); };
SizeDetectorComponent.ɵcmp = i0.ɵɵdefineComponent({ type: SizeDetectorComponent, selectors: [["pep-size-detector"]], hostBindings: function SizeDetectorComponent_HostBindings(rf, ctx) { if (rf & 1) {
i0.ɵɵlistener("resize", function SizeDetectorComponent_resize_HostBindingHandler($event) { return ctx.onResize($event); }, false, i0.ɵɵresolveWindow);
} }, decls: 1, vars: 1, consts: [[3, "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "class", 4, "ngFor", "ngForOf"], [3, "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl"]], template: function SizeDetectorComponent_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtemplate(0, SizeDetectorComponent_div_0_Template, 2, 9, "div", 0);
} if (rf & 2) {
i0.ɵɵproperty("ngForOf", ctx.sizes);
} }, directives: [i2.NgForOf, i3.DefaultShowHideDirective], encapsulation: 2 });
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(SizeDetectorComponent, [{
type: Component,
args: [{
selector: 'pep-size-detector',
templateUrl: './size-detector.component.html'
}]
}], function () { return [{ type: i0.ElementRef }, { type: i1.LayoutService }]; }, { onResize: [{
type: HostListener,
args: ['window:resize', ['$event']]
}] }); })();
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2l6ZS1kZXRlY3Rvci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9wZXBwZXJpLWxpYi9zaXplLWRldGVjdG9yL3NpemUtZGV0ZWN0b3IuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vcHJvamVjdHMvcGVwcGVyaS1saWIvc2l6ZS1kZXRlY3Rvci9zaXplLWRldGVjdG9yLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQXlCLFlBQVksRUFBYyxNQUFNLGVBQWUsQ0FBQztBQUMzRixPQUFPLEVBQWlCLFdBQVcsRUFBRSxNQUFNLGNBQWMsQ0FBQzs7Ozs7O0lDRzFELDhCQUU2QztJQUFBLFlBQzdDO0lBQUEsaUJBQU07Ozs7SUFESix5REFBMEM7SUFGZix3REFBOEI7SUFBQyx3REFBOEI7SUFDeEYsd0RBQThCO0lBQUMsd0RBQThCO0lBQUMsd0RBQThCO0lBQ2pELGVBQzdDO0lBRDZDLHVFQUM3Qzs7QURBQSxNQUFNLE9BQU8scUJBQXFCO0lBK0I5QixZQUFvQixPQUFtQixFQUFVLGFBQTRCO1FBQXpELFlBQU8sR0FBUCxPQUFPLENBQVk7UUFBVSxrQkFBYSxHQUFiLGFBQWEsQ0FBZTtRQTdCN0UsV0FBTSxHQUFHLEtBQUssQ0FBQztRQUNmLFVBQUssR0FBRztZQUNKO2dCQUNJLEVBQUUsRUFBRSxXQUFXLENBQUMsRUFBRTtnQkFDbEIsSUFBSSxFQUFFLElBQUk7Z0JBQ1YsR0FBRyxFQUFFLG1CQUFtQjthQUMzQjtZQUNEO2dCQUNJLEVBQUUsRUFBRSxXQUFXLENBQUMsRUFBRTtnQkFDbEIsSUFBSSxFQUFFLElBQUk7Z0JBQ1YsR0FBRyxFQUFFLDZCQUE2QjthQUNyQztZQUNEO2dCQUNJLEVBQUUsRUFBRSxXQUFXLENBQUMsRUFBRTtnQkFDbEIsSUFBSSxFQUFFLElBQUk7Z0JBQ1YsR0FBRyxFQUFFLDZCQUE2QjthQUNyQztZQUNEO2dCQUNJLEVBQUUsRUFBRSxXQUFXLENBQUMsRUFBRTtnQkFDbEIsSUFBSSxFQUFFLElBQUk7Z0JBQ1YsR0FBRyxFQUFFLDZCQUE2QjthQUNyQztZQUNEO2dCQUNJLEVBQUUsRUFBRSxXQUFXLENBQUMsRUFBRTtnQkFDbEIsSUFBSSxFQUFFLElBQUk7Z0JBQ1YsR0FBRyxFQUFFLG1CQUFtQjthQUMzQjtTQUNKLENBQUM7SUFFK0UsQ0FBQztJQUdsRixRQUFRLENBQUMsS0FBSztRQUNWLElBQUksQ0FBQyxnQkFBZ0IsRUFBRSxDQUFDO0lBQzVCLENBQUM7SUFFRCxlQUFlO1FBQ1gsSUFBSSxDQUFDLGdCQUFnQixFQUFFLENBQUM7SUFDNUIsQ0FBQztJQUVPLGdCQUFnQjtRQUNwQixNQUFNLFdBQVcsR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsRUFBRTtZQUNwQyxNQUFNLEVBQUUsR0FBRyxJQUFJLENBQUMsT0FBTyxDQUFDLGFBQWEsQ0FBQyxhQUFhLENBQUMsSUFBSSxJQUFJLENBQUMsTUFBTSxHQUFHLENBQUMsQ0FBQyxFQUFFLEVBQUUsQ0FBQyxDQUFDO1lBQzlFLE1BQU0sU0FBUyxHQUFHLE1BQU0sQ0FBQyxnQkFBZ0IsQ0FBQyxFQUFFLENBQUMsQ0FBQyxPQUFPLEtBQUssTUFBTSxDQUFDO1lBRWpFLE9BQU8sU0FBUyxDQUFDO1FBQ3JCLENBQUMsQ0FBQyxDQUFDO1FBRUgsSUFBSSxDQUFDLGFBQWEsQ0FBQyxRQUFRLENBQUMsV0FBVyxDQUFDLEVBQUUsQ0FBQyxDQUFDO0lBQ2hELENBQUM7OzBGQW5EUSxxQkFBcUI7MERBQXJCLHFCQUFxQjswR0FBckIsb0JBQWdCOztRQ0g3QixzRUFFNkM7O1FBRnhDLG1DQUF1Qjs7a0RER2YscUJBQXFCO2NBSmpDLFNBQVM7ZUFBQztnQkFDUCxRQUFRLEVBQUUsbUJBQW1CO2dCQUM3QixXQUFXLEVBQUUsZ0NBQWdDO2FBQ2hEO3lGQW1DRyxRQUFRO2tCQURQLFlBQVk7bUJBQUMsZUFBZSxFQUFFLENBQUMsUUFBUSxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBPbkluaXQsIEFmdGVyVmlld0luaXQsIEhvc3RMaXN0ZW5lciwgRWxlbWVudFJlZiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBMYXlvdXRTZXJ2aWNlLCBTQ1JFRU5fU0laRSB9IGZyb20gJ0BwZXBwZXJpL2xpYic7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICAgIHNlbGVjdG9yOiAncGVwLXNpemUtZGV0ZWN0b3InLFxyXG4gICAgdGVtcGxhdGVVcmw6ICcuL3NpemUtZGV0ZWN0b3IuY29tcG9uZW50Lmh0bWwnXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBTaXplRGV0ZWN0b3JDb21wb25lbnQgaW1wbGVtZW50cyBBZnRlclZpZXdJbml0IHtcclxuXHJcbiAgICBwcmVmaXggPSAnaXMtJztcclxuICAgIHNpemVzID0gW1xyXG4gICAgICAgIHtcclxuICAgICAgICAgICAgaWQ6IFNDUkVFTl9TSVpFLlhTLFxyXG4gICAgICAgICAgICBuYW1lOiAneHMnLFxyXG4gICAgICAgICAgICBjc3M6IGBkLWJsb2NrIGQtc20tbm9uZWBcclxuICAgICAgICB9LFxyXG4gICAgICAgIHtcclxuICAgICAgICAgICAgaWQ6IFNDUkVFTl9TSVpFLlNNLFxyXG4gICAgICAgICAgICBuYW1lOiAnc20nLFxyXG4gICAgICAgICAgICBjc3M6IGBkLW5vbmUgZC1zbS1ibG9jayBkLW1kLW5vbmVgXHJcbiAgICAgICAgfSxcclxuICAgICAgICB7XHJcbiAgICAgICAgICAgIGlkOiBTQ1JFRU5fU0laRS5NRCxcclxuICAgICAgICAgICAgbmFtZTogJ21kJyxcclxuICAgICAgICAgICAgY3NzOiBgZC1ub25lIGQtbWQtYmxvY2sgZC1sZy1ub25lYFxyXG4gICAgICAgIH0sXHJcbiAgICAgICAge1xyXG4gICAgICAgICAgICBpZDogU0NSRUVOX1NJWkUuTEcsXHJcbiAgICAgICAgICAgIG5hbWU6ICdsZycsXHJcbiAgICAgICAgICAgIGNzczogYGQtbm9uZSBkLWxnLWJsb2NrIGQteGwtbm9uZWBcclxuICAgICAgICB9LFxyXG4gICAgICAgIHtcclxuICAgICAgICAgICAgaWQ6IFNDUkVFTl9TSVpFLlhMLFxyXG4gICAgICAgICAgICBuYW1lOiAneGwnLFxyXG4gICAgICAgICAgICBjc3M6IGBkLW5vbmUgZC14bC1ibG9ja2BcclxuICAgICAgICB9LFxyXG4gICAgXTtcclxuXHJcbiAgICBjb25zdHJ1Y3Rvcihwcml2YXRlIGVsZW1lbnQ6IEVsZW1lbnRSZWYsIHByaXZhdGUgbGF5b3V0U2VydmljZTogTGF5b3V0U2VydmljZSkgeyB9XHJcblxyXG4gICAgQEhvc3RMaXN0ZW5lcignd2luZG93OnJlc2l6ZScsIFsnJGV2ZW50J10pXHJcbiAgICBvblJlc2l6ZShldmVudCk6IHZvaWQge1xyXG4gICAgICAgIHRoaXMuZGV0ZWN0U2NyZWVuU2l6ZSgpO1xyXG4gICAgfVxyXG5cclxuICAgIG5nQWZ0ZXJWaWV3SW5pdCgpOiB2b2lkIHtcclxuICAgICAgICB0aGlzLmRldGVjdFNjcmVlblNpemUoKTtcclxuICAgIH1cclxuXHJcbiAgICBwcml2YXRlIGRldGVjdFNjcmVlblNpemUoKTogdm9pZCB7XHJcbiAgICAgICAgY29uc3QgY3VycmVudFNpemUgPSB0aGlzLnNpemVzLmZpbmQoeCA9PiB7XHJcbiAgICAgICAgICAgIGNvbnN0IGVsID0gdGhpcy5lbGVtZW50Lm5hdGl2ZUVsZW1lbnQucXVlcnlTZWxlY3RvcihgLiR7dGhpcy5wcmVmaXh9JHt4LmlkfWApO1xyXG4gICAgICAgICAgICBjb25zdCBpc1Zpc2libGUgPSB3aW5kb3cuZ2V0Q29tcHV0ZWRTdHlsZShlbCkuZGlzcGxheSAhPT0gJ25vbmUnO1xyXG5cclxuICAgICAgICAgICAgcmV0dXJuIGlzVmlzaWJsZTtcclxuICAgICAgICB9KTtcclxuXHJcbiAgICAgICAgdGhpcy5sYXlvdXRTZXJ2aWNlLm9uUmVzaXplKGN1cnJlbnRTaXplLmlkKTtcclxuICAgIH1cclxufVxyXG4iLCI8IS0tIEJvb3RzdHJhcCAtLT5cclxuPCEtLSA8ZGl2ICpuZ0Zvcj1cImxldCBzIG9mIHNpemVzXCIgY2xhc3M9XCJ7e3MuY3NzICsgJyAnICsgKHByZWZpeCArIHMuaWQpIH19XCI+e3tzLm5hbWV9fTwvZGl2PiAtLT5cclxuXHJcbjwhLS0gQW5ndWxhciBmbGV4LWxheW91dCAtLT5cclxuPGRpdiAqbmdGb3I9XCJsZXQgcyBvZiBzaXplc1wiIGZ4U2hvdy54cz1cInt7cy5uYW1lID09ICd4cyd9fVwiIGZ4U2hvdy5zbT1cInt7cy5uYW1lID09ICdzbSd9fVwiXHJcbiAgZnhTaG93Lm1kPVwie3tzLm5hbWUgPT0gJ21kJ319XCIgZnhTaG93LmxnPVwie3tzLm5hbWUgPT0gJ2xnJ319XCIgZnhTaG93LnhsPVwie3tzLm5hbWUgPT0gJ3hsJ319XCJcclxuICBjbGFzcz1cInt7cy5jc3MgKyAnICcgKyAocHJlZml4ICsgcy5pZCkgfX1cIj5UaGUgY3VycmVudCBzY3JlZW4gc2l6ZSBpcyAtIHt7cy5uYW1lfX1cclxuPC9kaXY+Il19