@labsforge/flipbook/esm2020/lib/page/page.component.mjs

A simple angular flipbook component written in typescript

import { Component, Input, HostBinding } from '@angular/core';
import * as i0 from "@angular/core";
export class PageComponent {
    constructor() { }
    get hostLeft() {
        return this.width * this.zoom;
    }
    get hostRotation() {
        return `rotateY(${this.page.rotation}deg)`;
    }
}
PageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
PageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PageComponent, selector: "flipbook-page", inputs: { page: "page", width: "width", height: "height", rotation: "rotation", zoom: "zoom" }, host: { properties: { "style.left.px": "this.hostLeft", "style.transform": "this.hostRotation" } }, ngImport: i0, template: "<div class=\"page\"\r\n  [class.cover]=\"page.front?.isCover\"\r\n  [style.width.px]=\"width * zoom\"\r\n  [style.height.px]=\"height * zoom\"\r\n  [style.z-index]=\"rotation > -90 ? 1 : 0\"\r\n  [style.background-image]=\"page.front ? 'url(' + page.front.imageUrl + ')' : null\"\r\n  [style.background-size]=\"page.front?.width * zoom + 'px ' + page.front?.height * zoom + 'px'\"\r\n  [style.background-color]=\"page.front?.backgroundColor\"\r\n  [style.opacity.%]=\"page.front?.opacity * 100\">\r\n</div>\r\n<div class=\"page back\"\r\n  [class.cover]=\"page.back?.isCover\"\r\n  [style.width.px]=\"width * zoom\"\r\n  [style.height.px]=\"height * zoom\"\r\n  [style.z-index]=\"rotation < -90 ? 1 : 0\"\r\n  [style.background-image]=\"page.back ? 'url(' + page.back.imageUrl + ')' : null\"\r\n  [style.background-size]=\"page.back?.width * zoom + 'px ' + page.back?.height * zoom + 'px'\"\r\n  [style.background-color]=\"page.back?.backgroundColor\"\r\n  [style.opacity.%]=\"page.back?.opacity * 100\">\r\n</div>\r\n", styles: [":host{position:absolute}.page{position:absolute;box-sizing:border-box;background-position-y:50%;background-position-x:0%;background-repeat:no-repeat}.back{transform:scaleX(-1);background-position-x:100%}.cover{background-size:cover}\n"] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PageComponent, decorators: [{
            type: Component,
            args: [{ selector: 'flipbook-page', template: "<div class=\"page\"\r\n  [class.cover]=\"page.front?.isCover\"\r\n  [style.width.px]=\"width * zoom\"\r\n  [style.height.px]=\"height * zoom\"\r\n  [style.z-index]=\"rotation > -90 ? 1 : 0\"\r\n  [style.background-image]=\"page.front ? 'url(' + page.front.imageUrl + ')' : null\"\r\n  [style.background-size]=\"page.front?.width * zoom + 'px ' + page.front?.height * zoom + 'px'\"\r\n  [style.background-color]=\"page.front?.backgroundColor\"\r\n  [style.opacity.%]=\"page.front?.opacity * 100\">\r\n</div>\r\n<div class=\"page back\"\r\n  [class.cover]=\"page.back?.isCover\"\r\n  [style.width.px]=\"width * zoom\"\r\n  [style.height.px]=\"height * zoom\"\r\n  [style.z-index]=\"rotation < -90 ? 1 : 0\"\r\n  [style.background-image]=\"page.back ? 'url(' + page.back.imageUrl + ')' : null\"\r\n  [style.background-size]=\"page.back?.width * zoom + 'px ' + page.back?.height * zoom + 'px'\"\r\n  [style.background-color]=\"page.back?.backgroundColor\"\r\n  [style.opacity.%]=\"page.back?.opacity * 100\">\r\n</div>\r\n", styles: [":host{position:absolute}.page{position:absolute;box-sizing:border-box;background-position-y:50%;background-position-x:0%;background-repeat:no-repeat}.back{transform:scaleX(-1);background-position-x:100%}.cover{background-size:cover}\n"] }]
        }], ctorParameters: function () { return []; }, propDecorators: { page: [{
                type: Input
            }], width: [{
                type: Input
            }], height: [{
                type: Input
            }], rotation: [{
                type: Input
            }], zoom: [{
                type: Input
            }], hostLeft: [{
                type: HostBinding,
                args: ['style.left.px']
            }], hostRotation: [{
                type: HostBinding,
                args: ['style.transform']
            }] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFnZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9mbGlwYm9vay1saWIvc3JjL2xpYi9wYWdlL3BhZ2UuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZmxpcGJvb2stbGliL3NyYy9saWIvcGFnZS9wYWdlLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLFdBQVcsRUFBRSxNQUFNLGVBQWUsQ0FBQzs7QUFROUQsTUFBTSxPQUFPLGFBQWE7SUFrQnhCLGdCQUFnQixDQUFDO0lBVmpCLElBQ0ksUUFBUTtRQUNWLE9BQU8sSUFBSSxDQUFDLEtBQUssR0FBRyxJQUFJLENBQUMsSUFBSSxDQUFDO0lBQ2hDLENBQUM7SUFFRCxJQUNJLFlBQVk7UUFDZCxPQUFPLFdBQVcsSUFBSSxDQUFDLElBQUksQ0FBQyxRQUFRLE1BQU0sQ0FBQztJQUM3QyxDQUFDOzsyR0FoQlUsYUFBYTsrRkFBYixhQUFhLHlQQ1IxQiw0L0JBb0JBOzRGRFphLGFBQWE7a0JBTHpCLFNBQVM7K0JBQ0UsZUFBZTswRUFNaEIsSUFBSTtzQkFBWixLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxNQUFNO3NCQUFkLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUs7Z0JBR0YsUUFBUTtzQkFEWCxXQUFXO3VCQUFDLGVBQWU7Z0JBTXhCLFlBQVk7c0JBRGYsV0FBVzt1QkFBQyxpQkFBaUIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBIb3N0QmluZGluZyB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBQYWdlIH0gZnJvbSAnLi4vaW50ZXJmYWNlcyc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ2ZsaXBib29rLXBhZ2UnLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9wYWdlLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybHM6IFsnLi9wYWdlLmNvbXBvbmVudC5zY3NzJ11cclxufSlcclxuZXhwb3J0IGNsYXNzIFBhZ2VDb21wb25lbnQge1xyXG5cclxuICBASW5wdXQoKSBwYWdlOiBQYWdlO1xyXG4gIEBJbnB1dCgpIHdpZHRoOiBudW1iZXI7XHJcbiAgQElucHV0KCkgaGVpZ2h0OiBudW1iZXI7XHJcbiAgQElucHV0KCkgcm90YXRpb246IG51bWJlcjtcclxuICBASW5wdXQoKSB6b29tOiBudW1iZXI7XHJcblxyXG4gIEBIb3N0QmluZGluZygnc3R5bGUubGVmdC5weCcpXHJcbiAgZ2V0IGhvc3RMZWZ0KCkge1xyXG4gICAgcmV0dXJuIHRoaXMud2lkdGggKiB0aGlzLnpvb207XHJcbiAgfVxyXG5cclxuICBASG9zdEJpbmRpbmcoJ3N0eWxlLnRyYW5zZm9ybScpXHJcbiAgZ2V0IGhvc3RSb3RhdGlvbigpIHtcclxuICAgIHJldHVybiBgcm90YXRlWSgke3RoaXMucGFnZS5yb3RhdGlvbn1kZWcpYDtcclxuICB9XHJcblxyXG4gIGNvbnN0cnVjdG9yKCkgeyB9XHJcblxyXG59XHJcbiIsIjxkaXYgY2xhc3M9XCJwYWdlXCJcclxuICBbY2xhc3MuY292ZXJdPVwicGFnZS5mcm9udD8uaXNDb3ZlclwiXHJcbiAgW3N0eWxlLndpZHRoLnB4XT1cIndpZHRoICogem9vbVwiXHJcbiAgW3N0eWxlLmhlaWdodC5weF09XCJoZWlnaHQgKiB6b29tXCJcclxuICBbc3R5bGUuei1pbmRleF09XCJyb3RhdGlvbiA+IC05MCA/IDEgOiAwXCJcclxuICBbc3R5bGUuYmFja2dyb3VuZC1pbWFnZV09XCJwYWdlLmZyb250ID8gJ3VybCgnICsgcGFnZS5mcm9udC5pbWFnZVVybCArICcpJyA6IG51bGxcIlxyXG4gIFtzdHlsZS5iYWNrZ3JvdW5kLXNpemVdPVwicGFnZS5mcm9udD8ud2lkdGggKiB6b29tICsgJ3B4ICcgKyBwYWdlLmZyb250Py5oZWlnaHQgKiB6b29tICsgJ3B4J1wiXHJcbiAgW3N0eWxlLmJhY2tncm91bmQtY29sb3JdPVwicGFnZS5mcm9udD8uYmFja2dyb3VuZENvbG9yXCJcclxuICBbc3R5bGUub3BhY2l0eS4lXT1cInBhZ2UuZnJvbnQ/Lm9wYWNpdHkgKiAxMDBcIj5cclxuPC9kaXY+XHJcbjxkaXYgY2xhc3M9XCJwYWdlIGJhY2tcIlxyXG4gIFtjbGFzcy5jb3Zlcl09XCJwYWdlLmJhY2s/LmlzQ292ZXJcIlxyXG4gIFtzdHlsZS53aWR0aC5weF09XCJ3aWR0aCAqIHpvb21cIlxyXG4gIFtzdHlsZS5oZWlnaHQucHhdPVwiaGVpZ2h0ICogem9vbVwiXHJcbiAgW3N0eWxlLnotaW5kZXhdPVwicm90YXRpb24gPCAtOTAgPyAxIDogMFwiXHJcbiAgW3N0eWxlLmJhY2tncm91bmQtaW1hZ2VdPVwicGFnZS5iYWNrID8gJ3VybCgnICsgcGFnZS5iYWNrLmltYWdlVXJsICsgJyknIDogbnVsbFwiXHJcbiAgW3N0eWxlLmJhY2tncm91bmQtc2l6ZV09XCJwYWdlLmJhY2s/LndpZHRoICogem9vbSArICdweCAnICsgcGFnZS5iYWNrPy5oZWlnaHQgKiB6b29tICsgJ3B4J1wiXHJcbiAgW3N0eWxlLmJhY2tncm91bmQtY29sb3JdPVwicGFnZS5iYWNrPy5iYWNrZ3JvdW5kQ29sb3JcIlxyXG4gIFtzdHlsZS5vcGFjaXR5LiVdPVwicGFnZS5iYWNrPy5vcGFjaXR5ICogMTAwXCI+XHJcbjwvZGl2PlxyXG4iXX0=