ng-inline-svg - npm Package Compare versions

Comparing version 6.1.0 to 6.2.0

lib/inline-svg.directive.d.ts

@@ -21,2 +21,3 @@ import { ComponentFactoryResolver, ElementRef, EventEmitter, OnChanges, OnDestroy, OnInit, Renderer2, SimpleChanges, ViewContainerRef } from '@angular/core';
     fallbackImgUrl: string;
+    onSVGLoaded: (svg: SVGElement) => SVGElement;
     onSVGInserted: EventEmitter<SVGElement>;
@@ -23,0 +24,0 @@ onSVGFailed: EventEmitter<any>;

lib/inline-svg.directive.js

@@ -79,2 +79,5 @@ "use strict";
                 }
+                if (_this.onSVGLoaded) {
+                    svg = _this.onSVGLoaded(svg);
+                }
                 _this._insertEl(svg);
@@ -181,2 +184,3 @@ _this._evalScripts(svg, _this.inlineSVG);
         "fallbackImgUrl": [{ type: core_1.Input },],
+        "onSVGLoaded": [{ type: core_1.Input },],
         "onSVGInserted": [{ type: core_1.Output },],
@@ -183,0 +187,0 @@ "onSVGFailed": [{ type: core_1.Output },],

lib/inline-svg.directive.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":4,"metadata":{"InlineSVGDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":24,"character":1},"arguments":[{"selector":"[inlineSVG]","providers":[{"__symbolic":"reference","module":"./svg-cache.service","name":"SVGCacheService","line":26,"character":14}]}]}],"members":{"inlineSVG":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":3}}]}],"replaceContents":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":3}}]}],"prepend":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":3}}]}],"injectComponent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":3}}]}],"cacheSVG":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":3}}]}],"removeSVGAttributes":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":3}}]}],"forceEvalStyles":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":3}}]}],"evalScripts":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":3}}]}],"fallbackImgUrl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":3}}]}],"onSVGInserted":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":39,"character":3}}]}],"onSVGFailed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":40,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,null,null,null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":62,"character":5},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"PLATFORM_ID","line":62,"character":12}]}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":56,"character":17},{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":57,"character":31},{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver","line":58,"character":23},{"__symbolic":"reference","module":"./svg-cache.service","name":"SVGCacheService","line":59,"character":23},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":60,"character":23},{"__symbolic":"reference","module":"./inline-svg.service","name":"InlineSVGService","line":61,"character":31},{"__symbolic":"reference","name":"Object"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"_insertSVG":[{"__symbolic":"method"}],"_insertEl":[{"__symbolic":"method"}],"_removeAttributes":[{"__symbolic":"method"}],"_evalScripts":[{"__symbolic":"method"}],"_fail":[{"__symbolic":"method"}],"_checkSVGSupport":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"InlineSVGDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":24,"character":1},"arguments":[{"selector":"[inlineSVG]","providers":[{"__symbolic":"reference","module":"./svg-cache.service","name":"SVGCacheService","line":26,"character":14}]}]}],"members":{"inlineSVG":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":3}}]}],"replaceContents":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":3}}]}],"prepend":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":3}}]}],"injectComponent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":3}}]}],"cacheSVG":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":3}}]}],"removeSVGAttributes":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":3}}]}],"forceEvalStyles":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":3}}]}],"evalScripts":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":3}}]}],"fallbackImgUrl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":3}}]}],"onSVGLoaded":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":3}}]}],"onSVGInserted":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":40,"character":3}}]}],"onSVGFailed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":41,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,null,null,null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":63,"character":5},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"PLATFORM_ID","line":63,"character":12}]}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":57,"character":17},{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":58,"character":31},{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver","line":59,"character":23},{"__symbolic":"reference","module":"./svg-cache.service","name":"SVGCacheService","line":60,"character":23},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":61,"character":23},{"__symbolic":"reference","module":"./inline-svg.service","name":"InlineSVGService","line":62,"character":31},{"__symbolic":"reference","name":"Object"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"_insertSVG":[{"__symbolic":"method"}],"_insertEl":[{"__symbolic":"method"}],"_removeAttributes":[{"__symbolic":"method"}],"_evalScripts":[{"__symbolic":"method"}],"_fail":[{"__symbolic":"method"}],"_checkSVGSupport":[{"__symbolic":"method"}]}}}}]

package.json

 {
   "name": "ng-inline-svg",
-  "version": "6.1.0",
+  "version": "6.2.0",
   "description": "Angular directive for inserting an SVG inline within an element.",
@@ -5,0 +5,0 @@ "repository": {

README.md

@@ -87,2 +87,3 @@ # ng-inline-svg
 | fallbackImgUrl | string | | URL for a regular image to be displayed as a fallback if the SVG fails to load. |
+| onSVGLoaded | `(svg: SVGElement) => SVGElement` | | Lifecycle hook that allows the loaded SVG to be manipulated prior to insertion. |
 
@@ -89,0 +90,0 @@ #### Outputs

src/inline-svg.directive.ts

@@ -39,2 +39,3 @@ import {
   @Input() fallbackImgUrl: string;
+  @Input() onSVGLoaded: (svg: SVGElement) => SVGElement;
 
@@ -75,2 +76,3 @@ @Output() onSVGInserted: EventEmitter<SVGElement> = new EventEmitter<SVGElement>();
     if (!isPlatformBrowser(this.platformId) && !isPlatformServer(this.platformId)) { return; }
+
     this._insertSVG();
@@ -81,2 +83,3 @@ }
     if (!isPlatformBrowser(this.platformId) && !isPlatformServer(this.platformId)) { return; }
+
     if (changes['inlineSVG']) {
@@ -130,2 +133,6 @@ this._insertSVG();
 
+            if (this.onSVGLoaded) {
+              svg = this.onSVGLoaded(svg);
+            }
+
             this._insertEl(svg);
@@ -176,2 +183,3 @@
     if (!isPlatformBrowser(this.platformId)) { return; }
+
     const innerEls = svg.getElementsByTagName('*');
@@ -193,2 +201,3 @@
     if (!isPlatformBrowser(this.platformId)) { return; }
+
     const scripts = svg.querySelectorAll('script');
@@ -235,2 +244,3 @@ const scriptsToEval = [];
   }
+
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

53927

increased by1.28%

Lines of code

931

increased by0.98%

Number of lines in readme file

144

increased by0.7%

No dependency changes