ngx-printer
Version:
An easy to use service to print a window or parts of a window (div). Printing of Angular Templates or Components is possible.
834 lines (819 loc) • 33.6 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, Output, Component, createComponent, TemplateRef, Optional, Injectable, Input, Directive, NgModule } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
class Helpers {
/**
* Copy Css links to new page
* @param printWindow
*/
static copyCss(printWindowDoc) {
const links = document.querySelectorAll('link');
const styles = document.querySelectorAll('style');
const base = document.querySelector('base');
const targetHead = printWindowDoc.getElementsByTagName('head')[0];
if (base) {
targetHead.appendChild(document.importNode(base, true));
}
links.forEach(link => {
targetHead.appendChild(document.importNode(link, true));
});
styles.forEach(style => {
targetHead.appendChild(document.importNode(style, true));
});
}
}
/**
* Component used to render content when printed to current window
*/
class NgxPrinterComponent {
get renderClass() {
return this._renderClass;
}
set renderClass(value) {
this._renderClass = value;
this.setCustomClass();
}
get imgSrc() {
return this._imgSrc;
}
set imgSrc(value) {
this._imgSrc = value;
this.addImage(this._imgSrc);
}
constructor(elementRef, renderer) {
this.elementRef = elementRef;
this.renderer = renderer;
this._renderClass = 'default';
/**
* Display single image
*/
this._imgSrc = 'default';
this.completed = new EventEmitter();
}
ngOnInit() { }
/**
* Attach custom class to element
*/
setCustomClass() {
const natElement = this.elementRef.nativeElement;
this.renderer.removeClass(natElement, 'default');
this.renderer.addClass(natElement, this._renderClass);
}
/**
* Add custom image
* @param source
*/
addImage(source) {
const natElement = this.elementRef.nativeElement;
const newImgElement = this.renderer.createElement('img');
this.renderer.setAttribute(newImgElement, 'src', source);
this.renderer.listen(newImgElement, 'load', (evt) => {
console.log('loading completed', evt);
this.completed.emit(true);
});
this.renderer.appendChild(natElement, newImgElement);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: NgxPrinterComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: NgxPrinterComponent, isStandalone: false, selector: "ngx-printer", outputs: { completed: "completed" }, ngImport: i0, template: `
<ng-content></ng-content>
`, isInline: true, styles: [":host.default{background-color:#fff;height:100%;width:100%;position:fixed;top:0;left:0;margin:0;z-index:1000000}\n"] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: NgxPrinterComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-printer', template: `
<ng-content></ng-content>
`, standalone: false, styles: [":host.default{background-color:#fff;height:100%;width:100%;position:fixed;top:0;left:0;margin:0;z-index:1000000}\n"] }]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { completed: [{
type: Output
}] } });
var ngxPrintMarkerPosition;
(function (ngxPrintMarkerPosition) {
ngxPrintMarkerPosition[ngxPrintMarkerPosition["Topleft"] = 0] = "Topleft";
ngxPrintMarkerPosition[ngxPrintMarkerPosition["TopRight"] = 1] = "TopRight";
ngxPrintMarkerPosition[ngxPrintMarkerPosition["BottomLeft"] = 2] = "BottomLeft";
ngxPrintMarkerPosition[ngxPrintMarkerPosition["BottomRight"] = 3] = "BottomRight";
})(ngxPrintMarkerPosition || (ngxPrintMarkerPosition = {}));
/**
* Config for service - used in forRoot
*/
class PrintServiceConfig {
constructor() {
/** Print in a new window or not */
this.printOpenWindow = true;
/** Wait time before opening print dialog */
this.timeToWaitRender = 200;
/* Name ofapp route component - usally 'app-root' used by print to same window */
this.appRootName = 'app-root';
/* Default postion for image used in directive printerMarker */
this.markerPosition = ngxPrintMarkerPosition.Topleft;
/* Just show preview without fireing the print command - default is false */
this.printPreviewOnly = false;
}
}
/**
* Main print service
*/
class NgxPrinterService {
constructor(config, envInjector) {
this.envInjector = envInjector;
this.printWindowOpen = new BehaviorSubject(false);
/**
* @internal
*/
this._printItems = new BehaviorSubject([]);
this.$printItems = this._printItems.asObservable();
/**
* Wait time to render before open print dialog in ms
* Default is 200
*/
this.timeToWaitRender = 200;
/**
* Class used in component when printing to current window
*/
this.renderClass = "default";
/**
* Open new window to print or not
* Default is true
*/
this.printOpenWindow = true;
/**
* Name of root component
* Default is app-root
*/
this.appRootName = "app-root";
/**
* Do not fire print event - just show preview
* Default is false
*/
this.printPreviewOnly = false;
this.appRootDislaySetting = "";
this.$printWindowOpen = this.printWindowOpen.asObservable();
this.eventadded = [];
this.setRootConfigOptions(config);
}
/**
* Set global config from forRoot
* @param config
*/
setRootConfigOptions(config) {
if (config) {
config.timeToWaitRender &&
(this.timeToWaitRender = config.timeToWaitRender);
config.renderClass && (this.renderClass = config.renderClass);
config.appRootName && (this.appRootName = config.appRootName);
config.markerPosition && (this.markerPosition = config.markerPosition);
if (config.hasOwnProperty("printPreviewOnly")) {
this.printPreviewOnly = config.printPreviewOnly;
}
if (config.hasOwnProperty("printOpenWindow")) {
this.printOpenWindow = config.printOpenWindow;
}
}
}
/***
* Print a div identified by its id
* @example
* this.printerService.printDiv('printDiv');
*/
printDiv(divID) {
const divToPrint = document.getElementById(divID);
if (divToPrint) {
this.print(divToPrint, this.printOpenWindow);
}
else {
console.log(`div with id ${divID} not found..`);
}
}
/***
* Print an Element identified by its className using getElementsByClassName
* Prints the first one found
*/
printByClassName(className) {
const elementToPrint = document.getElementsByClassName(className);
if (elementToPrint && elementToPrint.length > 0) {
this.print(elementToPrint[0], this.printOpenWindow);
}
else {
console.log("element with id ${className} not found..");
}
}
/**
* Print Angular TemplateRef or a Component or String
* @param contentToPrint
* @example
* this.printerService.printAngular(this.PrintTemplateTpl);
*/
printAngular(contentToPrint, context) {
const nativeEl = this.createComponent(contentToPrint, null, context);
this.print(nativeEl.nativeElement, this.printOpenWindow);
}
/**
* Print single img
* @example
* this.printerService.printImg('assets/bratwurst.jpg');
*/
printImg(imgSrc) {
const compRef = this.createComponent(null, imgSrc);
const openNewWindow = this.printOpenWindow;
compRef.instance.completed.subscribe((val) => {
compRef.hostView.detectChanges();
console.log("completed:", val);
this.print(compRef.location.nativeElement, openNewWindow);
});
}
/**
* Print an native Element (HTML Element)
* @param nativeElement
* @example
* this.printerService.printHTMLElement(this.PrintComponent.nativeElement);
*/
printHTMLElement(nativeElement) {
this.print(nativeElement, this.printOpenWindow);
}
/**
* Create and render component
* @param contentToRender
*/
createComponent(contentToRender, imgSrc, context) {
let componentRef;
if (contentToRender) {
if (context === undefined) {
context = null;
}
const ngContent = this.resolveNgContent(contentToRender, context);
componentRef = createComponent(NgxPrinterComponent, {
environmentInjector: this.envInjector,
projectableNodes: ngContent
});
}
else {
componentRef = createComponent(NgxPrinterComponent, {
environmentInjector: this.envInjector,
});
}
componentRef.instance.renderClass = this.renderClass;
if (imgSrc) {
componentRef.instance.imgSrc = imgSrc;
return componentRef;
}
componentRef.hostView.detectChanges();
return componentRef.location; // location is native element
}
/**
* Main print function
* @param printContent
*/
print(printContent, printOpenWindow) {
if (printOpenWindow === true) {
const printContentClone = document.importNode(printContent, true); // printContent.cloneNode(true);
this.hideBeforePrint(printContentClone);
this.printInNewWindow(printContentClone);
}
if (printOpenWindow === false) {
const printContentClone = document.importNode(printContent, true); // printContent.cloneNode(true);
this.hideBeforePrint(printContentClone);
const nativeEl = this.createComponent(printContentClone).nativeElement;
this.openNgxPrinter = nativeEl;
document.body.appendChild(this.openNgxPrinter);
this.getAppRoot();
this.appRoot && (this.appRoot.style.display = "none");
this.printCurrentWindow();
}
}
/**
* Print using a new window / tab
* @param divToPrint
*/
printInNewWindow(divToPrint) {
const printWindow = window.open("", "PRINT");
const title = document.title;
printWindow.document.write("<HTML><HEAD><TITLE>" + title + "</TITLE></HEAD><BODY></BODY></HTML>");
// printWindow.document.write(document.documentElement.innerHTML);
const printWindowDoc = printWindow.document;
Helpers.copyCss(printWindowDoc);
printWindowDoc.body.style.margin = "0 0";
printWindowDoc.body.appendChild(divToPrint);
printWindow.document.close();
setTimeout(() => this.printTabWindow(printWindow, printWindowDoc), this.timeToWaitRender);
}
/**
* Print window in new tab
*/
printTabWindow(printWindow, printWindowDoc) {
if (this.printPreviewOnly) {
return;
}
this.registerPrintEvent(printWindow, true);
this.printWindowOpen.next(true);
printWindow.focus(); // necessary for IE >= 10*/
if (printWindowDoc.execCommand("print") === false) {
printWindow.print();
}
}
/**
* Print the whole current window
*/
printCurrentWindow() {
if (this.printPreviewOnly) {
return;
}
this.registerPrintEvent(window, false);
setTimeout(() => {
this.printWindowOpen.next(true);
if (document.execCommand("print") === false) {
window.print();
}
}, this.timeToWaitRender);
}
/**
* Listen to print event of window
* @param printWindow
*/
registerPrintEvent(printWindow, printWithOpenInNewWindow) {
const that = this;
printWindow.focus(); // necessary for IE >= 10*/
if (that.eventadded[printWindow.name]) {
return;
}
// hacky: see
// https://stackoverflow.com/questions/66110639/afterprint-event-not-firing-on-first-page-load-in-chrome
printWindow.addEventListener('beforeprint', () => { });
printWindow.addEventListener('afterprint', () => {
this.eventadded[printWindow.name] = true;
console.log('afterprint');
if (printWithOpenInNewWindow) {
that.eventadded[printWindow.name] = false;
}
that.cleanUp(printWindow, printWithOpenInNewWindow);
that.printWindowOpen.next(false);
});
}
/**
* Close tab or clean up dom
* @internal
*/
cleanUp(printWindow, printOpenWindow) {
if (printOpenWindow === true) {
console.log("close print window");
printWindow.close();
setTimeout(() => {
printWindow.close();
}, 20);
}
if (printOpenWindow === false) {
if (!this.openNgxPrinter) {
return;
}
if (document.body.getElementsByTagName("ngx-printer").length === 0) {
return;
}
if (this.appRoot) {
if (this.appRootDislaySetting !== "") {
this.appRoot.style.display = this.appRootDislaySetting;
}
else {
this.appRoot.style.display = "";
}
}
document.body.removeChild(this.openNgxPrinter);
this.openNgxPrinter = null;
}
}
/**
* Hide an element before printing
* @param parentDiv
*/
hideBeforePrint(parentDiv) {
const childrenOfDiv = parentDiv.querySelectorAll(".no_print_indicator");
for (let i = 0; i < childrenOfDiv.length; i++) {
const child = childrenOfDiv[i];
child.style.display = "none";
}
}
/**
* Search for Angular App Root
* @internal
*/
getAppRoot() {
const appRoot = document.body.getElementsByTagName(this.appRootName);
if (appRoot.length === 0) {
return null;
}
else {
this.appRoot = appRoot[0];
this.appRootDislaySetting = this.appRoot.style.display;
}
}
/**
* Add a new item to print
* Used by directive
* @internal
* @param newPrintItem HTML id
*/
addPrintItem(newPrintItem) {
const tmpItems = this._printItems.getValue();
tmpItems.push(newPrintItem);
this._printItems.next(tmpItems);
}
/**
* Delete a print item from service
* Used by directive
* @internal
* @param idOfItemToRemove
*/
removePrintItem(idOfItemToRemove) {
const tmpItems = this._printItems.getValue();
const newIitems = tmpItems.filter((item) => item.id !== idOfItemToRemove);
this._printItems.next(newIitems);
}
/**
* Gets a single print item from service
* Used by directive
* @internal
* @param idOfItemToFind
*/
getPrintItem(idOfItemToRemove) {
const tmpItems = this._printItems.getValue();
const foundItem = tmpItems.find((item) => item.id === idOfItemToRemove);
return foundItem;
}
/**
* Print a print Item
* @param printItemToPrint
*/
printPrintItem(printItemToPrint) {
this.printHTMLElement(printItemToPrint.nativeElement);
}
/**
* Print al list of print Items one after the other
* @param printItemToPrint
*/
printPrintItems(printItemsToPrint, className) {
const newDiv = document.createElement("div");
if (className) {
newDiv.classList.add(className);
}
else {
newDiv.style.display = "flex";
newDiv.style.flexDirection = "column";
}
printItemsToPrint.forEach((element) => {
newDiv.appendChild(element.nativeElement.cloneNode(true));
});
this.printHTMLElement(newDiv);
}
/**
* Create node or angular component and returns an array of nodes
* @param content
* @internal
*/
resolveNgContent(content, context) {
if (typeof content === "string") {
const element = document.createTextNode(content);
return [[element]];
}
if (content instanceof TemplateRef) {
const viewRef = content.createEmbeddedView(context);
viewRef.detectChanges();
return [viewRef.rootNodes];
}
if (content instanceof HTMLElement) {
return [[content]];
}
/** Otherwise it's a component */
let componentRef = createComponent(content, {
environmentInjector: this.envInjector,
});
componentRef.changeDetectorRef.detectChanges();
return [[componentRef.location.nativeElement]];
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: NgxPrinterService, deps: [{ token: PrintServiceConfig, optional: true }, { token: i0.EnvironmentInjector }], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: NgxPrinterService, providedIn: "root" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: NgxPrinterService, decorators: [{
type: Injectable,
args: [{
providedIn: "root",
}]
}], ctorParameters: () => [{ type: PrintServiceConfig, decorators: [{
type: Optional
}] }, { type: i0.EnvironmentInjector }] });
/**
* A class to store an item which can be printed
*/
class PrintItem {
constructor() { }
}
/**
* A directive to mark and store an HTML-Element as an item which
* can be printed
* An id has to be set
*/
class PrintItemDirective {
constructor(el, printerService) {
this.el = el;
this.printerService = printerService;
}
ngOnInit() {
if (this.el.nativeElement.id) {
const tmpPrintItem = new PrintItem();
tmpPrintItem.id = this.el.nativeElement.id;
tmpPrintItem.nativeElement = this.el.nativeElement;
this.printerService.addPrintItem(tmpPrintItem);
}
}
ngOnDestroy() {
if (this.el.nativeElement.id) {
this.printerService.removePrintItem(this.el.nativeElement.id);
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: PrintItemDirective, deps: [{ token: i0.ElementRef }, { token: NgxPrinterService }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.6", type: PrintItemDirective, isStandalone: false, selector: "[ngxPrintItem]", inputs: { printName: "printName" }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: PrintItemDirective, decorators: [{
type: Directive,
args: [{
selector: '[ngxPrintItem]',
standalone: false
}]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: NgxPrinterService }], propDecorators: { printName: [{
type: Input
}] } });
/**
* Directly add function to a button to print an item
*/
class PrintItemButtonDirective {
constructor(el, printerService) {
this.el = el;
this.printerService = printerService;
/**
* Id of print item to be printed
*/
this.printItemId = '';
/**
* html id of div to be printed
*/
this.divID = '';
/**
* print item by class name
*/
this.className = '';
/**
* print current window
*/
this.printWindow = 'false';
}
ngOnInit() {
if (this.el.nativeElement && this.checkInputs()) {
this.el.nativeElement.addEventListener('click', () => {
if (this.printItemId !== '') {
this.prinPrintItem();
}
if (this.divID !== '') {
this.printerService.printDiv(this.divID);
}
if (this.className !== '') {
this.printerService.printByClassName(this.className);
}
if (this.printWindow !== 'false') {
this.printerService.printCurrentWindow();
}
});
}
}
/**
* Check if at least one property is set
*/
checkInputs() {
const check = !(this.printWindow === 'false' && this.printItemId === '' && this.divID === '' && this.className === '');
return check;
}
/**
* print item from print items
*/
prinPrintItem() {
const itemToPrint = this.printerService.getPrintItem(this.printItemId);
if (itemToPrint) {
this.printerService.printPrintItem(itemToPrint);
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: PrintItemButtonDirective, deps: [{ token: i0.ElementRef }, { token: NgxPrinterService }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.6", type: PrintItemButtonDirective, isStandalone: false, selector: "[ngxPrintItemButton]", inputs: { printItemId: "printItemId", divID: "divID", className: "className", printWindow: "printWindow" }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: PrintItemButtonDirective, decorators: [{
type: Directive,
args: [{
selector: '[ngxPrintItemButton]',
standalone: false
}]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: NgxPrinterService }], propDecorators: { printItemId: [{
type: Input
}], divID: [{
type: Input
}], className: [{
type: Input
}], printWindow: [{
type: Input
}] } });
/**
* Mark an div as printable and provide direct print function
*/
class PrintItemMarkerDirective {
constructor(el, renderer2, printerService) {
this.el = el;
this.renderer2 = renderer2;
this.printerService = printerService;
this.customClass = '';
this.directPrint = false;
this.imgPosition = ngxPrintMarkerPosition.Topleft;
/**
* Data for an svg image used as background url
* @example
* backgroundImage = 'data:image/svg+xml;base64,PD9....'
*
*/
this.backgroundImage = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgNTAgNTAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUwIDUwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGQ9Ik0zOS4zODcsMjEuNDcxSDMyLjI5VjExLjE5OWMwLTAuNTUzLTAuNDQ3LTEtMS0xSDE3LjQ4NGMtMC41NTMsMC0xLDAuNDQ3LTEsMXYxMC4yNzFIOS4zODdjLTAuNTUzLDAtMSwwLjQ0Ny0xLDFWMzUuNDUNCgljMCwwLjU1MywwLjQ0NywxLDEsMWg2Ljg5NHYzLjU2NWMwLDAuNTUzLDAuNDQ3LDEsMSwxaDEzLjgwNmMwLjU1MywwLDEtMC40NDcsMS0xVjM2LjQ1aDcuMzAxYzAuNTUzLDAsMS0wLjQ0NywxLTFWMjIuNDcxDQoJQzQwLjM4NywyMS45MTgsMzkuOTM5LDIxLjQ3MSwzOS4zODcsMjEuNDcxeiBNMTguNDg0LDEyLjE5OUgzMC4yOXY5LjI3MUgxOC40ODRWMTIuMTk5eiBNMzAuMDg2LDM5LjAxNkgxOC4yOHYtNi4zMjloMTEuODA2VjM5LjAxNg0KCXogTTM4LjM4NywzNC40NWgtNi4zMDF2LTIuNzY0YzAtMC41NTMtMC40NDctMS0xLTFIMTcuMjhjLTAuNTUzLDAtMSwwLjQ0Ny0xLDF2Mi43NjRoLTUuODk0VjIzLjQ3MWg2Ljg5NA0KCWMwLjA2OCwwLjAxNCwwLjEzMSwwLjA0MSwwLjIwMywwLjA0MUgzMS4yOWMwLjA3MiwwLDAuMTM2LTAuMDI3LDAuMjAzLTAuMDQxaDYuODkzVjM0LjQ1eiIvPg0KPC9zdmc+DQo=';
this.imgMainStyles = {
'background-color': '#c3c3b6',
height: '16px',
width: '16px',
position: 'absolute',
cursor: 'pointer'
};
this.imgPositionTopLeft = {
left: '1px',
top: '1px',
};
this.imgPositionTopRight = {
right: '1px',
top: '1px',
};
this.imgPositionBottomLeft = {
left: '1px',
bottom: '1px',
};
this.imgPositionBottomRight = {
right: '1px',
bottom: '1px',
};
/**
* Event fired when marker clicked
* @emits
*/
this.printClicked = new EventEmitter();
}
ngOnInit() {
const newIndicator = document.createElement('div');
this.imgPosition = this.printerService.markerPosition;
this.addIndicatorDiv(this.el, newIndicator);
newIndicator.addEventListener('click', () => {
if (this.directPrint) {
const elementToPrint = this.el.nativeElement.getElementsByClassName('print_indicator');
if (elementToPrint && elementToPrint.length > 0) {
this.renderer2.setStyle(elementToPrint[0], 'visibility', 'hidden');
this.printerService.printHTMLElement(this.el.nativeElement);
this.renderer2.setStyle(elementToPrint[0], 'visibility', 'visible');
}
else {
console.log('element with indicator class not found..');
}
}
this.printClicked.emit(true);
});
}
/**
* Change and add div with Indicator
* @param el
* @param newIndicator
*/
addIndicatorDiv(el, newIndicator) {
const natElement = el.nativeElement;
this.renderer2.addClass(newIndicator, 'print_indicator');
this.renderer2.setStyle(natElement, 'position', 'relative');
this.renderer2.appendChild(el.nativeElement, newIndicator);
if (this.customClass === '') {
this.setCss(newIndicator);
}
else {
this.renderer2.addClass(newIndicator, this.customClass);
}
}
/**
* Set the default css properties
* @param newIndicator
*/
setCss(newIndicator) {
Object.keys(this.imgMainStyles).forEach((element) => {
newIndicator.style.setProperty(`${element}`, this.imgMainStyles[element]);
});
this.setPosition(newIndicator);
const imgUrl = 'url(' + this.backgroundImage + ')';
newIndicator.style.setProperty(`background-image`, imgUrl);
}
/**
* Set image position
* @internal
* @param newIndicator
*/
setPosition(newIndicator) {
switch (this.imgPosition) {
case ngxPrintMarkerPosition.Topleft: {
Object.keys(this.imgPositionTopLeft).forEach((element) => {
newIndicator.style.setProperty(`${element}`, this.imgPositionTopLeft[element]);
});
break;
}
case ngxPrintMarkerPosition.TopRight: {
Object.keys(this.imgPositionTopRight).forEach((element) => {
newIndicator.style.setProperty(`${element}`, this.imgPositionTopRight[element]);
});
break;
}
case ngxPrintMarkerPosition.BottomLeft: {
Object.keys(this.imgPositionBottomLeft).forEach((element) => {
newIndicator.style.setProperty(`${element}`, this.imgPositionBottomLeft[element]);
});
break;
}
case ngxPrintMarkerPosition.BottomRight: {
Object.keys(this.imgPositionBottomRight).forEach((element) => {
newIndicator.style.setProperty(`${element}`, this.imgPositionBottomRight[element]);
});
break;
}
default: {
Object.keys(this.imgPositionTopLeft).forEach((element) => {
newIndicator.style.setProperty(`${element}`, this.imgPositionTopLeft[element]);
});
break;
}
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: PrintItemMarkerDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: NgxPrinterService }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.6", type: PrintItemMarkerDirective, isStandalone: false, selector: "[ngxPrintItemMarker]", inputs: { customClass: "customClass", directPrint: "directPrint", imgPosition: "imgPosition", backgroundImage: "backgroundImage" }, outputs: { printClicked: "printClicked" }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: PrintItemMarkerDirective, decorators: [{
type: Directive,
args: [{
selector: '[ngxPrintItemMarker]',
standalone: false
}]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: NgxPrinterService }], propDecorators: { customClass: [{
type: Input
}], directPrint: [{
type: Input
}], imgPosition: [{
type: Input
}], backgroundImage: [{
type: Input
}], printClicked: [{
type: Output
}] } });
/**
* Directive to mark an element so that it should NOT be printed
*/
class NoPrintDirective {
constructor(el, renderer2) {
this.el = el;
this.renderer2 = renderer2;
if (this.el) {
this.renderer2.addClass(this.el.nativeElement, 'no_print_indicator');
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: NoPrintDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.6", type: NoPrintDirective, isStandalone: false, selector: "[ngxNoPrint]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: NoPrintDirective, decorators: [{
type: Directive,
args: [{
selector: '[ngxNoPrint]',
standalone: false
}]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
class NgxPrinterModule {
static forRoot(config) {
return {
ngModule: NgxPrinterModule,
providers: [{ provide: PrintServiceConfig, useValue: config }]
};
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: NgxPrinterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.6", ngImport: i0, type: NgxPrinterModule, declarations: [NgxPrinterComponent, PrintItemDirective, PrintItemButtonDirective, PrintItemMarkerDirective, NoPrintDirective], exports: [NgxPrinterComponent, PrintItemDirective, PrintItemButtonDirective, PrintItemMarkerDirective, NoPrintDirective] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: NgxPrinterModule }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: NgxPrinterModule, decorators: [{
type: NgModule,
args: [{
declarations: [NgxPrinterComponent, PrintItemDirective, PrintItemButtonDirective, PrintItemMarkerDirective, NoPrintDirective],
imports: [],
exports: [NgxPrinterComponent, PrintItemDirective, PrintItemButtonDirective, PrintItemMarkerDirective, NoPrintDirective]
}]
}] });
/*
* Public API Surface of ngx-printer
*/
/**
* Generated bundle index. Do not edit.
*/
export { NgxPrinterComponent, NgxPrinterModule, NgxPrinterService, NoPrintDirective, PrintItem, PrintItemButtonDirective, PrintItemDirective, PrintItemMarkerDirective, PrintServiceConfig, ngxPrintMarkerPosition };
//# sourceMappingURL=ngx-printer.mjs.map