ngx-gem-spaas
Version:
This library contains services, components, images and styles to provide a unified look and way-of-working throughout GEM SPaaS.
38 lines • 7.12 kB
JavaScript
import { Component, Input } from '@angular/core';
import { BG_LIST } from "../_models/bg.model";
import { BaseComponent } from "../base/base.component";
import * as i0 from "@angular/core";
export class BgComponent extends BaseComponent {
constructor() {
super(...arguments);
this.imgExt = '.webp';
this.imgList = BG_LIST;
// LEFT: ALIGN BG IMG LEFT INSTEAD OF DEFAULT RIGHT
// PORTRAIT: SWITCHES BACKGROUND-SIZE FROM COVER TO AUTO (SO PORTRAIT IMGS ARE NOT STRETCHED OVER FULL WIDTH OF SCREEN)
this.bgX = 100;
this.bgY = 50;
this.bgPortrait = false;
this.bgImg = 'employee_solar';
this.bgAnimate = true;
}
ngOnInit() {
this.bg = this.imgList[this.bgImg];
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BgComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: BgComponent, selector: "spaas-bg", inputs: { bgX: "bgX", bgY: "bgY", bgPortrait: "bgPortrait", bgImg: "bgImg", bgAnimate: "bgAnimate" }, usesInheritance: true, ngImport: i0, template: "<div class=\"bg\">\r\n <div class=\"bg__img-wrapper\"\r\n [title]=\"bg.alt\"\r\n [class.with-anim]=\"bgAnimate\"\r\n [style.background-position-x.%]=\"bgX\"\r\n [style.background-position-y.%]=\"bgY\"\r\n [class.portrait]=\"bgPortrait\"\r\n [style.background-image]=\"'url(' + bg.url + imgExt + ')'\">\r\n </div>\r\n</div>\r\n", styles: [".bg{height:100%;left:0;overflow:hidden;position:absolute;top:0;width:100%;z-index:-1}.bg__img-wrapper{background-repeat:no-repeat;background-size:cover;height:100%;overflow:hidden;width:100%}.bg__img-wrapper.with-anim{animation:kenburns-bottom 4s ease-out both}.bg__img-wrapper.visible{opacity:1}.bg__img-wrapper.invisible{opacity:0}.bg__img-wrapper.portrait{background-size:auto;left:0;right:auto;width:60%}@media screen and (min-width: 768px) and (max-width: 1024px) and (max-height: 1024px) and (orientation: portrait),screen and (max-width: 767px) and (orientation: portrait),screen and (max-height: 420px) and (orientation: landscape){.bg__img-wrapper.portrait{width:100%}}@keyframes kenburns-bottom{0%{transform:scale(1) translate(0);transform-origin:14% 14%}to{transform:scale(1.04) translate(-14px,-4px);transform-origin:top left}}\n"] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BgComponent, decorators: [{
type: Component,
args: [{ selector: 'spaas-bg', template: "<div class=\"bg\">\r\n <div class=\"bg__img-wrapper\"\r\n [title]=\"bg.alt\"\r\n [class.with-anim]=\"bgAnimate\"\r\n [style.background-position-x.%]=\"bgX\"\r\n [style.background-position-y.%]=\"bgY\"\r\n [class.portrait]=\"bgPortrait\"\r\n [style.background-image]=\"'url(' + bg.url + imgExt + ')'\">\r\n </div>\r\n</div>\r\n", styles: [".bg{height:100%;left:0;overflow:hidden;position:absolute;top:0;width:100%;z-index:-1}.bg__img-wrapper{background-repeat:no-repeat;background-size:cover;height:100%;overflow:hidden;width:100%}.bg__img-wrapper.with-anim{animation:kenburns-bottom 4s ease-out both}.bg__img-wrapper.visible{opacity:1}.bg__img-wrapper.invisible{opacity:0}.bg__img-wrapper.portrait{background-size:auto;left:0;right:auto;width:60%}@media screen and (min-width: 768px) and (max-width: 1024px) and (max-height: 1024px) and (orientation: portrait),screen and (max-width: 767px) and (orientation: portrait),screen and (max-height: 420px) and (orientation: landscape){.bg__img-wrapper.portrait{width:100%}}@keyframes kenburns-bottom{0%{transform:scale(1) translate(0);transform-origin:14% 14%}to{transform:scale(1.04) translate(-14px,-4px);transform-origin:top left}}\n"] }]
}], propDecorators: { bgX: [{
type: Input
}], bgY: [{
type: Input
}], bgPortrait: [{
type: Input
}], bgImg: [{
type: Input
}], bgAnimate: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmcuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWdlbS1zcGFhcy9zcmMvYmcvYmcuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWdlbS1zcGFhcy9zcmMvYmcvYmcuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFDLFNBQVMsRUFBRSxLQUFLLEVBQVMsTUFBTSxlQUFlLENBQUM7QUFDdkQsT0FBTyxFQUFDLE9BQU8sRUFBUyxNQUFNLHFCQUFxQixDQUFDO0FBQ3BELE9BQU8sRUFBQyxhQUFhLEVBQUMsTUFBTSx3QkFBd0IsQ0FBQzs7QUFPckQsTUFBTSxPQUFPLFdBQVksU0FBUSxhQUFhO0lBTDlDOztRQU9FLFdBQU0sR0FBRyxPQUFPLENBQUM7UUFDakIsWUFBTyxHQUFHLE9BQU8sQ0FBQztRQUVsQixtREFBbUQ7UUFDbkQsdUhBQXVIO1FBQzlHLFFBQUcsR0FBRyxHQUFHLENBQUM7UUFDVixRQUFHLEdBQUcsRUFBRSxDQUFDO1FBQ1QsZUFBVSxHQUFHLEtBQUssQ0FBQztRQUNuQixVQUFLLEdBQVcsZ0JBQWdCLENBQUM7UUFDakMsY0FBUyxHQUFHLElBQUksQ0FBQztLQVEzQjtJQUpDLFFBQVE7UUFDTixJQUFJLENBQUMsRUFBRSxHQUFHLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ3JDLENBQUM7K0dBakJVLFdBQVc7bUdBQVgsV0FBVyw2S0NUeEIsOFdBVUE7OzRGRERhLFdBQVc7a0JBTHZCLFNBQVM7K0JBQ0UsVUFBVTs4QkFXWCxHQUFHO3NCQUFYLEtBQUs7Z0JBQ0csR0FBRztzQkFBWCxLQUFLO2dCQUNHLFVBQVU7c0JBQWxCLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQUNHLFNBQVM7c0JBQWpCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge0NvbXBvbmVudCwgSW5wdXQsIE9uSW5pdH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7QkdfTElTVCwgQmdUeXBlfSBmcm9tIFwiLi4vX21vZGVscy9iZy5tb2RlbFwiO1xyXG5pbXBvcnQge0Jhc2VDb21wb25lbnR9IGZyb20gXCIuLi9iYXNlL2Jhc2UuY29tcG9uZW50XCI7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ3NwYWFzLWJnJyxcclxuICB0ZW1wbGF0ZVVybDogJy4vYmcuY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsczogWycuL2JnLmNvbXBvbmVudC5zY3NzJ11cclxufSlcclxuZXhwb3J0IGNsYXNzIEJnQ29tcG9uZW50IGV4dGVuZHMgQmFzZUNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XHJcblxyXG4gIGltZ0V4dCA9ICcud2VicCc7XHJcbiAgaW1nTGlzdCA9IEJHX0xJU1Q7XHJcblxyXG4gIC8vIExFRlQ6IEFMSUdOIEJHIElNRyBMRUZUIElOU1RFQUQgT0YgREVGQVVMVCBSSUdIVFxyXG4gIC8vIFBPUlRSQUlUOiBTV0lUQ0hFUyBCQUNLR1JPVU5ELVNJWkUgRlJPTSBDT1ZFUiBUTyBBVVRPIChTTyBQT1JUUkFJVCBJTUdTIEFSRSBOT1QgU1RSRVRDSEVEIE9WRVIgRlVMTCBXSURUSCBPRiBTQ1JFRU4pXHJcbiAgQElucHV0KCkgYmdYID0gMTAwO1xyXG4gIEBJbnB1dCgpIGJnWSA9IDUwO1xyXG4gIEBJbnB1dCgpIGJnUG9ydHJhaXQgPSBmYWxzZTtcclxuICBASW5wdXQoKSBiZ0ltZzogQmdUeXBlID0gJ2VtcGxveWVlX3NvbGFyJztcclxuICBASW5wdXQoKSBiZ0FuaW1hdGUgPSB0cnVlO1xyXG5cclxuICBiZzogYW55O1xyXG5cclxuICBuZ09uSW5pdCgpOiB2b2lkIHtcclxuICAgIHRoaXMuYmcgPSB0aGlzLmltZ0xpc3RbdGhpcy5iZ0ltZ107XHJcbiAgfVxyXG5cclxufVxyXG4iLCI8ZGl2IGNsYXNzPVwiYmdcIj5cclxuICA8ZGl2IGNsYXNzPVwiYmdfX2ltZy13cmFwcGVyXCJcclxuICAgICAgIFt0aXRsZV09XCJiZy5hbHRcIlxyXG4gICAgICAgW2NsYXNzLndpdGgtYW5pbV09XCJiZ0FuaW1hdGVcIlxyXG4gICAgICAgW3N0eWxlLmJhY2tncm91bmQtcG9zaXRpb24teC4lXT1cImJnWFwiXHJcbiAgICAgICBbc3R5bGUuYmFja2dyb3VuZC1wb3NpdGlvbi15LiVdPVwiYmdZXCJcclxuICAgICAgIFtjbGFzcy5wb3J0cmFpdF09XCJiZ1BvcnRyYWl0XCJcclxuICAgICAgIFtzdHlsZS5iYWNrZ3JvdW5kLWltYWdlXT1cIid1cmwoJyArIGJnLnVybCArIGltZ0V4dCArICcpJ1wiPlxyXG4gIDwvZGl2PlxyXG48L2Rpdj5cclxuIl19