@angular-material-extensions/link-preview
Version:
Angular open source UI library to preview web links
3 lines (2 loc) • 5.26 kB
JavaScript
!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("@angular/core"),require("@angular/common/http"),require("rxjs/operators"),require("rxjs"),require("ngx-linkifyjs"),require("@angular/common"),require("@angular/material")):"function"==typeof define&&define.amd?define(["exports","@angular/core","@angular/common/http","rxjs/operators","rxjs","ngx-linkifyjs","@angular/common","@angular/material"],n):n(e.angularMaterialExtensionsLinkPreview={},e.ng.core,e.http,e.operators,e.rxjs,e.ngxLinkifyjs,e.ng.common,e.ng.material)}(this,function(e,n,t,i,r,o,s,a){"use strict";var c=function(){function e(e){var t=this;this.http=e,this._accessKey="5b54e80a65c77848ceaa4630331e8384950e09d392365",this._apiURL="https://api.linkpreview.net/",this.onLinkFound=new n.EventEmitter,this.links=[],this._subscription=this.onLinkFound.subscribe(function(e){return t.links=e})}return e.prototype.ngOnDestroy=function(){this._subscription&&this._subscription.unsubscribe()},e.prototype.fetchLink=function(e){console.log("fetching the following link: ",e);var n=(new t.HttpParams).append("key",this._accessKey).append("q",e);return this.http.get(this._apiURL,{params:n}).pipe(i.map(function(e){return e}))},e.decorators=[{type:n.Injectable}],e.ctorParameters=function(){return[{type:t.HttpClient}]},e}(),l=function(){function e(e,n){this.linkifyService=e,this.linkPreviewService=n}return e.prototype.ngOnInit=function(){this._init()},e.prototype._init=function(){var e=this;r.fromEvent(document,"input").pipe(i.debounceTime(2e3),i.distinctUntilChanged(),i.map(function(n){var t=n.target.value,i=e.linkifyService.find(t);return console.log("data: ",t),console.log("links: ",i),i})).subscribe(function(n){e.linkPreviewService.onLinkFound.emit(n)})},e.decorators=[{type:n.Directive,args:[{selector:"[matLinkPreview]"}]}],e.ctorParameters=function(){return[{type:o.NgxLinkifyjsService},{type:c}]},e}(),p=function(){function e(e){this.linkPreviewService=e,this.color="primary",this.showLoadingsProgress=!0}return e.prototype.ngOnInit=function(){var e=this;this.link&&!this.linkPreview&&(this.loaded=!1,this._subscription=this.linkPreviewService.fetchLink(this.link.href).subscribe(function(n){e.linkPreview=n,e.loaded=!0}))},e.prototype.ngOnDestroy=function(){this._subscription&&this._subscription.unsubscribe()},e.decorators=[{type:n.Component,args:[{selector:"mat-link-preview",template:'\n <div class="center-auto" *ngIf="!this.linkPreview && !this.loaded && this.showLoadingsProgress">\n <mat-spinner></mat-spinner>\n </div>\n <mat-card>\n <mat-card-content>\n <div class="img-container">\n <img mat-card-image [src]="linkPreview?.image">\n </div>\n <div>\n <mat-card-title>{{linkPreview?.title}}</mat-card-title>\n <mat-card-subtitle>{{linkPreview?.description}}</mat-card-subtitle>\n <a [href]="linkPreview?.url" mat-button [color]="color">{{linkPreview?.url}}</a>\n </div>\n </mat-card-content>\n </mat-card>\n ',styles:["\n :host{display:inline-block}mat-card-content{box-sizing:border-box;display:flex;flex-direction:row}mat-card-content a{padding-left:0;padding-right:0}.img-container{align-items:center;box-sizing:border-box;display:flex;flex:1 1 100%;flex-direction:row;margin-right:1rem;max-width:20%;padding:24px 16px;place-content:center}.center-auto{margin-left:auto!important;margin-right:auto!important}\n "]}]}],e.ctorParameters=function(){return[{type:c}]},e.propDecorators={link:[{type:n.Input}],linkPreview:[{type:n.Input}],color:[{type:n.Input}],showLoadingsProgress:[{type:n.Input}]},e}(),u=function(){function e(e){this.linkPreviewService=e,this.color="primary",this.showLoadingsProgress=!0}return e.prototype.trackLinks=function(e,n){return n?n.href:void 0},e.decorators=[{type:n.Component,args:[{selector:"mat-link-preview-container",template:'\n <ng-container *ngIf="!multiple && linkPreviewService.links.length > 0; then first else list"></ng-container>\n\n <ng-template #first>\n <mat-link-preview [link]="linkPreviewService?.links[0]"\n [showLoadingsProgress]="showLoadingsProgress">\n </mat-link-preview>\n </ng-template>\n <ng-template #list>\n <div *ngFor="let link of linkPreviewService.links; trackBy: trackLinks">\n <mat-link-preview [link]="link"\n [showLoadingsProgress]="showLoadingsProgress">\n </mat-link-preview>\n </div>\n </ng-template>\n ',styles:["\n :host{display:block}\n "]}]}],e.ctorParameters=function(){return[{type:c}]},e.propDecorators={color:[{type:n.Input}],multiple:[{type:n.Input}],showLoadingsProgress:[{type:n.Input}]},e}(),d=function(){function e(){}return e.forRoot=function(){return{ngModule:e,providers:[c,o.NgxLinkifyjsService]}},e.decorators=[{type:n.NgModule,args:[{imports:[s.CommonModule,t.HttpClientModule,o.NgxLinkifyjsModule,a.MatCardModule,a.MatButtonModule,a.MatProgressSpinnerModule],exports:[p,u,l],declarations:[p,u,l]}]}],e}();e.MatLinkPreviewComponent=p,e.MatLinkPreviewContainerComponent=u,e.MatLinkPreviewDirective=l,e.MatLinkPreviewService=c,e.MatLinkPreviewModule=d,Object.defineProperty(e,"__esModule",{value:!0})});
//# sourceMappingURL=link-preview.umd.min.js.map