@softheon/armature 10.35.0 → 10.36.0

package/README.md

@@ -1775,3 +1775,75 @@ The selector indicates how the dom will be searched for html elements
 | -------- | -------- | ----------------- | ------------------------------------------------------------------- |
 | name     | `string` | any css attribute | The name of the css attribute to modify on returned elements styles |
 | value    | `string` | any string        | The value to set for the css attribute                              |
+
+## Saving/Printing a specified component
+
+This section will describe how any component for an application can be saved/printed
+
+### Setup
+
+There are few steps that must be done in order to use this functionality
+
+__First__: In the module that will be using this functionality include the following import
+
+```javascript
+import { SofArComponentSavePrintModule } from '@softheon/armature';
+
+@ngModule({
+  declarations: [...],
+  imports: [
+    ...
+    SofArComponentSavePrintModule
+    ...
+  ]
+})
+
+```
+
+__Last__: Include the following component in a component that will be on the page at the time the user will select to save/print. This can be done in the app.component.ts or in a specific route in the application.
+
+```html
+<sof-ar-component-save-print></sof-ar-component-save-print>
+```
+
+### Usage
+
+In this example, the print command will be executed by an application defined button in a component. The save/print functionality is not limited to a component, it can be executed from a service/directive/pipe etc.
+
+```javascript
+import { Component, OnInit } from '@angular/core';
+import { ComponentSavePrintService } from '@softheon/armature';
+import { SomeOtherComponent } from './some/local/component/location';
+
+/** The save print component */
+@Component({
+  selector: 'app-save-print',
+  templateUrl: './save-print.component.html',
+  styleUrls: ['./save-print.component.scss']
+})
+export class SavePrintComponent implements OnInit {
+
+  /**
+   * The constructor
+   * @param componentSavePrintService The save/print component service
+   */
+  constructor(
+    private readonly componentSavePrintService: ComponentSavePrintService
+  ) { }
+
+  /** Angular life cycle hook for component initialization */
+  public ngOnInit(): void {
+  }
+
+  /** Downloads the pdf of the page */
+  public downloadPdf(): void {
+    this.componentSavePrintService.savePrintComponent(SomeOtherComponent);
+  }
+}
+```
+
+The `savePrintComponent` function takes the type of component that will be saved/printed as the only argument. This component does not have to be the same as the component executing the save/print function, it can be any component in the application including routes.
+
+### Limitations
+
+There is currently no way to pass in custom inputs to the component being save/printed. This can be prevented by having a component host the component in question with the correct default inputs and providing the host component to the function rather the desired component.

package/bundles/softheon-armature.umd.js

@@ -6481,6 +6481,152 @@
 
     /** Public API surface for the forms */
 
+    /** The component print service */
+    var ComponentSavePrintService = /** @class */ (function () {
+        /** Constructs the service */
+        function ComponentSavePrintService() {
+            /** The component to print behavior subject */
+            this.componentSavePrintBs = new rxjs.BehaviorSubject(undefined);
+            this.savePrintComponent$ = this.componentSavePrintBs.asObservable()
+                .pipe(operators.filter(function (c) { return !!c; }));
+        }
+        /**
+         * Save/Print the provided component
+         * @param component The component to save/print
+         */
+        ComponentSavePrintService.prototype.savePrintComponent = function (component) {
+            this.componentSavePrintBs.next(component);
+        };
+        return ComponentSavePrintService;
+    }());
+    ComponentSavePrintService.ɵprov = i0.ɵɵdefineInjectable({ factory: function ComponentSavePrintService_Factory() { return new ComponentSavePrintService(); }, token: ComponentSavePrintService, providedIn: "root" });
+    ComponentSavePrintService.decorators = [
+        { type: i0.Injectable, args: [{
+                    providedIn: 'root'
+                },] }
+    ];
+    ComponentSavePrintService.ctorParameters = function () { return []; };
+
+    /** The component save and print component */
+    var ComponentSavePrintComponent = /** @class */ (function () {
+        /**
+         * Constructs the component
+         * @param cfr The component factory resolver
+         * @param vcr The view container reference
+         * @param componentSavePrintService The component save print service
+         */
+        function ComponentSavePrintComponent(cfr, vcr, componentSavePrintService) {
+            this.cfr = cfr;
+            this.vcr = vcr;
+            this.componentSavePrintService = componentSavePrintService;
+            /** The component subscription */
+            this.componentSub = new rxjs.Subscription();
+        }
+        /** Life cycle hook for component initialization */
+        ComponentSavePrintComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.componentSub.add(this.componentSavePrintService.savePrintComponent$.subscribe(function (c) {
+                _this.print(c);
+            }));
+        };
+        /** Life cycle hook for component destruction */
+        ComponentSavePrintComponent.prototype.ngOnDestroy = function () {
+            this.componentSub.unsubscribe();
+        };
+        /**
+         * Prints the component
+         * @param component The component type to print
+         */
+        ComponentSavePrintComponent.prototype.print = function (component) {
+            var _a;
+            this.attachStyles(this.iframeRef.nativeElement.contentWindow);
+            this.doc = ((_a = this.iframeRef) === null || _a === void 0 ? void 0 : _a.nativeElement.contentDocument) || this.iframeRef.nativeElement.iFrameRef.contentWindow;
+            var compFactory = this.cfr.resolveComponentFactory(component);
+            this.componentRef = this.vcr.createComponent(compFactory);
+            this.componentRef.location.nativeElement.id = 'sofArComponentSavePrintContainer';
+            this.doc.body.appendChild(this.componentRef.location.nativeElement);
+            var iframe = this.iframeRef.nativeElement;
+            iframe.contentWindow.onafterprint = function () {
+                iframe.contentDocument.body.innerHTML = '';
+            };
+            this.waitForImageToLoad(iframe, function () { iframe.contentWindow.print(); });
+        };
+        /**
+         * Helper function to execute print function on hold until images finish loading
+         * @param iframe The iframe to load images on
+         * @param done The function to wait execution
+         */
+        ComponentSavePrintComponent.prototype.waitForImageToLoad = function (iframe, done) {
+            var interval = setInterval(function () {
+                var allImages = iframe.contentDocument.body.querySelectorAll('img');
+                var loaded = Array.from({ length: allImages.length }).fill(false);
+                allImages.forEach(function (img, idx) {
+                    loaded[idx] = img.complete;
+                });
+                if (loaded.every(function (c) { return !!c; })) {
+                    clearInterval(interval);
+                    done();
+                }
+            }, 500);
+        };
+        /**
+         * Helper function to append all the styles to targe window
+         * @param targetWindow The target window
+         */
+        ComponentSavePrintComponent.prototype.attachStyles = function (targetWindow) {
+            // Copy styles from parent window
+            document.querySelectorAll('style')
+                .forEach(function (htmlElement) {
+                targetWindow.document.head.appendChild(htmlElement.cloneNode(true));
+            });
+            // Copy stylesheet link from parent window
+            document.querySelectorAll('link')
+                .forEach(function (htmlElement) {
+                targetWindow.document.head.appendChild(htmlElement.cloneNode(true));
+            });
+        };
+        return ComponentSavePrintComponent;
+    }());
+    ComponentSavePrintComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'sof-ar-component-save-print',
+                    template: "<div class=\"save-print-container\">\r\n    <iframe #iframe class=\"save-print\">\r\n    </iframe>\r\n</div>\r\n",
+                    styles: ["iframe.save-print{height:1px;opacity:0;width:1000px}.save-print-container{height:1px;overflow-x:hidden;overflow-y:hidden;width:100%}"]
+                },] }
+    ];
+    ComponentSavePrintComponent.ctorParameters = function () { return [
+        { type: i0.ComponentFactoryResolver },
+        { type: i0.ViewContainerRef },
+        { type: ComponentSavePrintService }
+    ]; };
+    ComponentSavePrintComponent.propDecorators = {
+        iframeRef: [{ type: i0.ViewChild, args: ['iframe', { static: false },] }]
+    };
+
+    /** The component save print module */
+    var SofArComponentSavePrintModule = /** @class */ (function () {
+        function SofArComponentSavePrintModule() {
+        }
+        return SofArComponentSavePrintModule;
+    }());
+    SofArComponentSavePrintModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    declarations: [ComponentSavePrintComponent],
+                    imports: [
+                        common.CommonModule
+                    ],
+                    providers: [
+                        ComponentSavePrintService
+                    ],
+                    exports: [
+                        ComponentSavePrintComponent
+                    ],
+                    entryComponents: [
+                        ComponentSavePrintComponent
+                    ]
+                },] }
+    ];
+
     /** Public API Surface of armature */
 
     /**
@@ -6512,6 +6658,8 @@
     exports.BaseComponentModule = BaseComponentModule;
     exports.BaseConfigService = BaseConfigService;
     exports.CacheExpirationType = CacheExpirationType;
+    exports.ComponentSavePrintComponent = ComponentSavePrintComponent;
+    exports.ComponentSavePrintService = ComponentSavePrintService;
     exports.Configuration = Configuration$1;
     exports.CssOverride = CssOverride;
     exports.CssOverrideDirective = CssOverrideDirective;
@@ -6568,6 +6716,7 @@
     exports.SiteMapComponent = SiteMapComponent;
     exports.SofAddressComponent = SofAddressComponent;
     exports.SofAlertComponent = SofAlertComponent;
+    exports.SofArComponentSavePrintModule = SofArComponentSavePrintModule;
     exports.SofBannerComponent = SofBannerComponent;
     exports.SofBlankPipe = SofBlankPipe;
     exports.SofDatePipe = SofDatePipe;