angular-svg-icon
Version:
Angular 8 component for inlining SVGs allowing them to be easily styled with CSS.
2 lines • 6.71 kB
JavaScript
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("@angular/common"),require("rxjs"),require("rxjs/operators"),require("@angular/common/http")):"function"==typeof define&&define.amd?define("angular-svg-icon",["exports","@angular/core","@angular/common","rxjs","rxjs/operators","@angular/common/http"],e):e((t=t||self)["angular-svg-icon"]={},t.ng.core,t.ng.common,t.rxjs,t.rxjs.operators,t.ng.common.http)}(this,function(t,e,r,n,i,o){"use strict";var s,c=this&&this.__extends||(s=function(t,e){return(s=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var r in e)e.hasOwnProperty(r)&&(t[r]=e[r])})(t,e)},function(t,e){function r(){this.constructor=t}s(t,e),t.prototype=null===e?Object.create(e):(r.prototype=e.prototype,new r)}),a=function(){},u=function(t){function r(e){var r=t.call(this)||this;return r.http=e,r}return c(r,t),r.prototype.getSvg=function(t){return this.http.get(t,{responseType:"text"})},r.decorators=[{type:e.Injectable}],r.ctorParameters=function(){return[{type:o.HttpClient}]},r}(a),p=new e.InjectionToken("SERVER_URL"),h=function(){function t(t,e,r,n){this.loader=t,this.platformId=e,this.serverUrl=r,this._document=n,this.iconsByUrl=new Map,this.iconsLoadingByUrl=new Map,this.document=this._document}return t.prototype.addSvg=function(t,e){if(!this.iconsByUrl.has(t)){var r=this.document.createElement("DIV");r.innerHTML=e;var n=r.querySelector("svg");this.iconsByUrl.set(t,n)}},t.prototype.loadSvg=function(t,e){var r=this;if(void 0===e&&(e=t),this.serverUrl&&null===t.match(/^(http(s)?):/)&&(t=this.serverUrl+t,e=t),this.iconsByUrl.has(e))return n.of(this.iconsByUrl.get(e));if(this.iconsLoadingByUrl.has(e))return this.iconsLoadingByUrl.get(e);var o=this.loader.getSvg(t).pipe(i.map(function(t){var e=r.document.createElement("DIV");return e.innerHTML=t,e.querySelector("svg")}),i.tap(function(t){return r.iconsByUrl.set(e,t)}),i.catchError(function(t){return console.error(t),n.throwError(t)}),i.finalize(function(){return r.iconsLoadingByUrl.delete(e)}),i.share());return this.iconsLoadingByUrl.set(e,o),o},t.prototype.getSvgByName=function(t){return this.iconsByUrl.has(t)?n.of(this.iconsByUrl.get(t)):this.iconsLoadingByUrl.has(t)?this.iconsLoadingByUrl.get(t):n.throwError("No svg with name '"+t+"' has been loaded")},t.prototype.unloadSvg=function(t){this.iconsByUrl.has(t)&&this.iconsByUrl.delete(t)},t.decorators=[{type:e.Injectable}],t.ctorParameters=function(){return[{type:a},{type:Object,decorators:[{type:e.Inject,args:[e.PLATFORM_ID]}]},{type:String,decorators:[{type:e.Optional},{type:e.Inject,args:[p]}]},{type:void 0,decorators:[{type:e.Optional},{type:e.Inject,args:[r.DOCUMENT]}]}]},t}();function l(t,e,r,n,i){return t||new h(e,r,n,i)}var f={provide:h,deps:[[new e.Optional,new e.SkipSelf,h],a,[e.PLATFORM_ID],[new e.Optional,p],[new e.Optional,r.DOCUMENT]],useFactory:l},y=this&&this.__read||function(t,e){var r="function"==typeof Symbol&&t[Symbol.iterator];if(!r)return t;var n,i,o=r.call(t),s=[];try{for(;(void 0===e||e-- >0)&&!(n=o.next()).done;)s.push(n.value)}catch(t){i={error:t}}finally{try{n&&!n.done&&(r=o.return)&&r.call(o)}finally{if(i)throw i.error}}return s},d=function(){function t(t,e,r,n,i){this.element=t,this.differs=e,this.renderer=r,this.iconReg=n,this.cdr=i,this.stretch=!1,this.applyCss=!1}return Object.defineProperty(t.prototype,"svgStyle",{set:function(t){this._svgStyle=t,!this.differ&&t&&(this.differ=this.differs.find(t).create())},enumerable:!0,configurable:!0}),t.prototype.ngOnInit=function(){this.init()},t.prototype.ngOnDestroy=function(){this.destroy()},t.prototype.ngOnChanges=function(t){(t.src||t.name)&&(this.svg&&this.destroy(),this.init()),t.stretch&&this.stylize()},t.prototype.ngDoCheck=function(){if(this.svg&&this.differ){var t=this.differ.diff(this._svgStyle);t&&this.applyChanges(t)}},t.prototype.init=function(){this.name?this.icnSub=this.iconReg.getSvgByName(this.name).subscribe(this.initSvg.bind(this)):this.src&&(this.icnSub=this.iconReg.loadSvg(this.src).subscribe(this.initSvg.bind(this)))},t.prototype.initSvg=function(t){this.setSvg(t),this.resetDiffer()},t.prototype.destroy=function(){this.svg=void 0,this.differ=void 0,this.icnSub&&this.icnSub.unsubscribe()},t.prototype.resetDiffer=function(){this._svgStyle&&!this.differ&&(this.differ=this.differs.find(this._svgStyle).create())},t.prototype.setSvg=function(t){if(t){this.svg=t;var e=t.cloneNode(!0),r=this.element.nativeElement;this.applyCss&&this.copyNgContentAttribute(r,e),r.innerHTML="",this.renderer.appendChild(r,e),this.stylize(),this.cdr.markForCheck()}},t.prototype.copyNgContentAttribute=function(t,e){for(var r=t.attributes,n=r.length,i=0;i<n;i+=1){var o=r.item(i);if(o.name.startsWith("_ngcontent")){this.setNgContentAttribute(e,o.name);break}}},t.prototype.setNgContentAttribute=function(t,e){this.renderer.setAttribute(t,e,"");for(var r=t.childNodes.length,n=0;n<r;n+=1){var i=t.childNodes[n];i instanceof Element&&this.setNgContentAttribute(i,e)}},t.prototype.stylize=function(){if(this.svg){var t=this.element.nativeElement.firstChild;!0===this.stretch?this.renderer.setAttribute(t,"preserveAspectRatio","none"):!1===this.stretch&&this.renderer.removeAttribute(t,"preserveAspectRatio")}},t.prototype.applyChanges=function(t){var e=this;t.forEachRemovedItem(function(t){return e.setStyle(t.key,null)}),t.forEachAddedItem(function(t){return e.setStyle(t.key,t.currentValue)}),t.forEachChangedItem(function(t){return e.setStyle(t.key,t.currentValue)})},t.prototype.setStyle=function(t,e){var r=y(t.split("."),2),n=r[0],i=r[1];e=null!==e&&i?""+e+i:e;var o=this.element.nativeElement.firstChild;null!==e?this.renderer.setStyle(o,n,e):this.renderer.removeStyle(o,n)},t.decorators=[{type:e.Component,args:[{selector:"svg-icon",template:"<ng-content></ng-content>"}]}],t.ctorParameters=function(){return[{type:e.ElementRef},{type:e.KeyValueDiffers},{type:e.Renderer2},{type:h},{type:e.ChangeDetectorRef}]},t.propDecorators={src:[{type:e.Input}],name:[{type:e.Input}],stretch:[{type:e.Input}],applyCss:[{type:e.Input}],svgStyle:[{type:e.Input}]},t}(),g=function(){function t(){}return t.forRoot=function(e){return void 0===e&&(e={}),{ngModule:t,providers:[e.loader||{provide:a,useClass:u},f]}},t.decorators=[{type:e.NgModule,args:[{imports:[r.CommonModule],declarations:[d],providers:[f,{provide:a,useClass:u}],exports:[d]}]}],t}();t.AngularSvgIconModule=g,t.SERVER_URL=p,t.SVG_ICON_REGISTRY_PROVIDER=f,t.SVG_ICON_REGISTRY_PROVIDER_FACTORY=l,t.SvgHttpLoader=u,t.SvgIconComponent=d,t.SvgIconRegistryService=h,t.SvgLoader=a,Object.defineProperty(t,"__esModule",{value:!0})});
//# sourceMappingURL=angular-svg-icon.umd.min.js.map