ngx-serp-preview
Version:
SERP (Search Engine Result Page) Preview Component for Angular
68 lines • 13.1 kB
JavaScript
import { ChangeDetectionStrategy, Component, ViewEncapsulation, HostBinding, Input, } from '@angular/core';
import { NgIf } from '@angular/common';
import { NgxMdIconModule } from 'ngx-md-icon';
import { mdiMenuDown } from '@mdi/js';
import * as i0 from "@angular/core";
import * as i1 from "ngx-md-icon";
export class NgxSerpBingComponent {
constructor(cdRef) {
this.cdRef = cdRef;
this.class = 'ngx-serp-bing';
this.url = 'example.com';
this.formattedUrl = '';
this.formattedDescription = '';
this.formattedTitle = '';
this.downIcon = mdiMenuDown;
}
ngOnInit() { }
ngOnChanges(changes) {
if (changes['url']) {
this.formattedUrl = this.formatUrl(this.url);
}
if (changes['description'] && this.description?.length) {
this.formattedDescription = this.truncateString(this.description, 176);
}
if (changes['title'] && this.title?.length) {
this.formattedTitle = this.truncateString(this.title, 60);
}
}
ngOnDestroy() { }
formatUrl(url) {
const match = url.match(/^(?:https?:\/\/)?(?:[^@\/\n]+@)?(?:www\.)?([^:\/?\n]+)/);
return match ? match[0] + '…' : url;
}
/**
* Truncate String
*/
truncateString(inputStr, maxLength) {
const words = inputStr.split(' ');
let str = '';
for (let i = 0; i < words.length; i++) {
const word = words[i];
if (str.length + word.length > maxLength) {
str += '…';
break;
}
else {
str += ' ' + word;
}
}
str = str.trim();
return str;
}
}
NgxSerpBingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NgxSerpBingComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
NgxSerpBingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: NgxSerpBingComponent, isStandalone: true, selector: "ngx-serp-bing", inputs: { title: "title", description: "description", url: "url" }, host: { properties: { "class": "this.class" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"ngx-serp-bing__title\">{{ formattedTitle }}</div>\n<div class=\"ngx-serp-bing__url\">\n {{ formattedUrl }}\n <md-icon class=\"ngx-serp-bing__url-icon\" [icon]=\"downIcon\" middle></md-icon>\n</div>\n<div class=\"ngx-serp-bing__description\">\n <span class=\"ngx-serp-bing__description-web\">Web</span>\n {{ formattedDescription }}\n</div>\n", styles: ["body.dark .ngx-serp-bing{--ngx-serp-bing-url: #6fc088;--ngx-serp-bing-title: #c58af9;--ngx-serp-bing-description: #bdc1c6}.ngx-serp-bing{--ngx-serp-bing-url: #006d21;--ngx-serp-bing-title: #1a0dab;--ngx-serp-bing-description: #71777d;display:block;font-family:Roboto,Helvetica,sans-serif;letter-spacing:normal;font-weight:400}.ngx-serp-bing__title{color:var(--ngx-serp-bing-title);max-width:600px;font-size:20px;font-weight:400;display:block;line-height:28px;margin-top:5px;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ngx-serp-bing__description{color:var(--ngx-serp-bing-description);display:block;font-size:14px;line-height:22px;word-wrap:break-word;max-width:600px}.ngx-serp-bing__description-web{margin-right:2px;border:1px solid #ececec;color:var(--ngx-serp-bing-description);padding:0 2px;font-size:11px;vertical-align:middle;line-height:11px;border-radius:6px;display:inline-block;margin-bottom:3px}.ngx-serp-bing__url{font-size:16px;line-height:22px;color:var(--ngx-serp-bing-url);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:330px}.ngx-serp-bing__url-icon.md-icon{width:20px;height:20px;font-size:20px}\n"], dependencies: [{ kind: "ngmodule", type: NgxMdIconModule }, { kind: "component", type: i1.NgxMdIconComponent, selector: "md-icon", inputs: ["icon", "icons", "texts", "middle", "xViewBox", "yViewBox", "xTextPos", "yTextPos"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NgxSerpBingComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-serp-bing', standalone: true, imports: [NgIf, NgxMdIconModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"ngx-serp-bing__title\">{{ formattedTitle }}</div>\n<div class=\"ngx-serp-bing__url\">\n {{ formattedUrl }}\n <md-icon class=\"ngx-serp-bing__url-icon\" [icon]=\"downIcon\" middle></md-icon>\n</div>\n<div class=\"ngx-serp-bing__description\">\n <span class=\"ngx-serp-bing__description-web\">Web</span>\n {{ formattedDescription }}\n</div>\n", styles: ["body.dark .ngx-serp-bing{--ngx-serp-bing-url: #6fc088;--ngx-serp-bing-title: #c58af9;--ngx-serp-bing-description: #bdc1c6}.ngx-serp-bing{--ngx-serp-bing-url: #006d21;--ngx-serp-bing-title: #1a0dab;--ngx-serp-bing-description: #71777d;display:block;font-family:Roboto,Helvetica,sans-serif;letter-spacing:normal;font-weight:400}.ngx-serp-bing__title{color:var(--ngx-serp-bing-title);max-width:600px;font-size:20px;font-weight:400;display:block;line-height:28px;margin-top:5px;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ngx-serp-bing__description{color:var(--ngx-serp-bing-description);display:block;font-size:14px;line-height:22px;word-wrap:break-word;max-width:600px}.ngx-serp-bing__description-web{margin-right:2px;border:1px solid #ececec;color:var(--ngx-serp-bing-description);padding:0 2px;font-size:11px;vertical-align:middle;line-height:11px;border-radius:6px;display:inline-block;margin-bottom:3px}.ngx-serp-bing__url{font-size:16px;line-height:22px;color:var(--ngx-serp-bing-url);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:330px}.ngx-serp-bing__url-icon.md-icon{width:20px;height:20px;font-size:20px}\n"] }]
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { class: [{
type: HostBinding
}], title: [{
type: Input
}], description: [{
type: Input
}], url: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LXNlcnAtYmluZy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtc2VycC1wcmV2aWV3L3NyYy9saWIvY29tcG9uZW50cy9uZ3gtc2VycC1iaW5nL25neC1zZXJwLWJpbmcuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXNlcnAtcHJldmlldy9zcmMvbGliL2NvbXBvbmVudHMvbmd4LXNlcnAtYmluZy9uZ3gtc2VycC1iaW5nLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDSix1QkFBdUIsRUFDdkIsU0FBUyxFQU1ULGlCQUFpQixFQUNqQixXQUFXLEVBQ1gsS0FBSyxHQUNQLE1BQU0sZUFBZSxDQUFDO0FBRXZCLE9BQU8sRUFBRSxJQUFJLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUN2QyxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sYUFBYSxDQUFDO0FBQzlDLE9BQU8sRUFBNkIsV0FBVyxFQUFFLE1BQU0sU0FBUyxDQUFDOzs7QUFXakUsTUFBTSxPQUFPLG9CQUFvQjtJQW1COUIsWUFBb0IsS0FBd0I7UUFBeEIsVUFBSyxHQUFMLEtBQUssQ0FBbUI7UUFqQnJDLFVBQUssR0FBRyxlQUFlLENBQUM7UUFTeEIsUUFBRyxHQUFXLGFBQWEsQ0FBQztRQUU1QixpQkFBWSxHQUFXLEVBQUUsQ0FBQztRQUMxQix5QkFBb0IsR0FBVyxFQUFFLENBQUM7UUFDbEMsbUJBQWMsR0FBVyxFQUFFLENBQUM7UUFFNUIsYUFBUSxHQUFHLFdBQVcsQ0FBQztJQUVpQixDQUFDO0lBRWhELFFBQVEsS0FBVSxDQUFDO0lBRW5CLFdBQVcsQ0FBQyxPQUFzQjtRQUMvQixJQUFJLE9BQU8sQ0FBQyxLQUFLLENBQUMsRUFBRTtZQUNqQixJQUFJLENBQUMsWUFBWSxHQUFHLElBQUksQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDO1NBQy9DO1FBQ0QsSUFBSSxPQUFPLENBQUMsYUFBYSxDQUFDLElBQUksSUFBSSxDQUFDLFdBQVcsRUFBRSxNQUFNLEVBQUU7WUFDckQsSUFBSSxDQUFDLG9CQUFvQixHQUFHLElBQUksQ0FBQyxjQUFjLENBQUMsSUFBSSxDQUFDLFdBQVcsRUFBRSxHQUFHLENBQUMsQ0FBQztTQUN6RTtRQUNELElBQUksT0FBTyxDQUFDLE9BQU8sQ0FBQyxJQUFJLElBQUksQ0FBQyxLQUFLLEVBQUUsTUFBTSxFQUFFO1lBQ3pDLElBQUksQ0FBQyxjQUFjLEdBQUcsSUFBSSxDQUFDLGNBQWMsQ0FBQyxJQUFJLENBQUMsS0FBSyxFQUFFLEVBQUUsQ0FBQyxDQUFDO1NBQzVEO0lBQ0osQ0FBQztJQUVELFdBQVcsS0FBVSxDQUFDO0lBRWQsU0FBUyxDQUFDLEdBQVc7UUFDMUIsTUFBTSxLQUFLLEdBQUcsR0FBRyxDQUFDLEtBQUssQ0FBQyx3REFBd0QsQ0FBQyxDQUFDO1FBQ2xGLE9BQU8sS0FBSyxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLEdBQUcsR0FBRyxDQUFDLENBQUMsQ0FBQyxHQUFHLENBQUM7SUFDdkMsQ0FBQztJQUVEOztPQUVHO0lBQ0ssY0FBYyxDQUFDLFFBQWdCLEVBQUUsU0FBaUI7UUFDdkQsTUFBTSxLQUFLLEdBQUcsUUFBUSxDQUFDLEtBQUssQ0FBQyxHQUFHLENBQUMsQ0FBQztRQUNsQyxJQUFJLEdBQUcsR0FBRyxFQUFFLENBQUM7UUFDYixLQUFLLElBQUksQ0FBQyxHQUFHLENBQUMsRUFBRSxDQUFDLEdBQUcsS0FBSyxDQUFDLE1BQU0sRUFBRSxDQUFDLEVBQUUsRUFBRTtZQUNwQyxNQUFNLElBQUksR0FBRyxLQUFLLENBQUMsQ0FBQyxDQUFDLENBQUM7WUFDdEIsSUFBSSxHQUFHLENBQUMsTUFBTSxHQUFHLElBQUksQ0FBQyxNQUFNLEdBQUcsU0FBUyxFQUFFO2dCQUN2QyxHQUFHLElBQUksR0FBRyxDQUFDO2dCQUNYLE1BQU07YUFDUjtpQkFBTTtnQkFDSixHQUFHLElBQUksR0FBRyxHQUFHLElBQUksQ0FBQzthQUNwQjtTQUNIO1FBQ0QsR0FBRyxHQUFHLEdBQUcsQ0FBQyxJQUFJLEVBQUUsQ0FBQztRQUVqQixPQUFPLEdBQUcsQ0FBQztJQUNkLENBQUM7O2lIQTVEUyxvQkFBb0I7cUdBQXBCLG9CQUFvQixtTkMxQmpDLDJXQVNBLHlzQ0RXbUIsZUFBZTsyRkFNckIsb0JBQW9CO2tCQVRoQyxTQUFTOytCQUNHLGVBQWUsY0FDYixJQUFJLFdBQ1AsQ0FBQyxJQUFJLEVBQUUsZUFBZSxDQUFDLG1CQUdmLHVCQUF1QixDQUFDLE1BQU0saUJBQ2hDLGlCQUFpQixDQUFDLElBQUk7d0dBSTlCLEtBQUs7c0JBRFgsV0FBVztnQkFJTCxLQUFLO3NCQURYLEtBQUs7Z0JBSUMsV0FBVztzQkFEakIsS0FBSztnQkFJQyxHQUFHO3NCQURULEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gICBDb21wb25lbnQsXG4gICBPbkluaXQsXG4gICBPbkRlc3Ryb3ksXG4gICBDaGFuZ2VEZXRlY3RvclJlZixcbiAgIE9uQ2hhbmdlcyxcbiAgIFNpbXBsZUNoYW5nZXMsXG4gICBWaWV3RW5jYXBzdWxhdGlvbixcbiAgIEhvc3RCaW5kaW5nLFxuICAgSW5wdXQsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgU3Vic2NyaXB0aW9uIH0gZnJvbSAncnhqcyc7XG5pbXBvcnQgeyBOZ0lmIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IE5neE1kSWNvbk1vZHVsZSB9IGZyb20gJ25neC1tZC1pY29uJztcbmltcG9ydCB7IG1kaURvdHNWZXJ0aWNhbCwgbWRpRWFydGgsIG1kaU1lbnVEb3duIH0gZnJvbSAnQG1kaS9qcyc7XG5cbkBDb21wb25lbnQoe1xuICAgc2VsZWN0b3I6ICduZ3gtc2VycC1iaW5nJyxcbiAgIHN0YW5kYWxvbmU6IHRydWUsXG4gICBpbXBvcnRzOiBbTmdJZiwgTmd4TWRJY29uTW9kdWxlXSxcbiAgIHRlbXBsYXRlVXJsOiAnLi9uZ3gtc2VycC1iaW5nLmNvbXBvbmVudC5odG1sJyxcbiAgIHN0eWxlVXJsczogWycuL25neC1zZXJwLWJpbmcuY29tcG9uZW50LnNjc3MnXSxcbiAgIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbn0pXG5leHBvcnQgY2xhc3MgTmd4U2VycEJpbmdDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQsIE9uQ2hhbmdlcywgT25EZXN0cm95IHtcbiAgIEBIb3N0QmluZGluZygpXG4gICBwdWJsaWMgY2xhc3MgPSAnbmd4LXNlcnAtYmluZyc7XG5cbiAgIEBJbnB1dCgpXG4gICBwdWJsaWMgdGl0bGU/OiBzdHJpbmc7XG5cbiAgIEBJbnB1dCgpXG4gICBwdWJsaWMgZGVzY3JpcHRpb24/OiBzdHJpbmc7XG5cbiAgIEBJbnB1dCgpXG4gICBwdWJsaWMgdXJsOiBzdHJpbmcgPSAnZXhhbXBsZS5jb20nO1xuXG4gICBwdWJsaWMgZm9ybWF0dGVkVXJsOiBzdHJpbmcgPSAnJztcbiAgIHB1YmxpYyBmb3JtYXR0ZWREZXNjcmlwdGlvbjogc3RyaW5nID0gJyc7XG4gICBwdWJsaWMgZm9ybWF0dGVkVGl0bGU6IHN0cmluZyA9ICcnO1xuXG4gICBwdWJsaWMgZG93bkljb24gPSBtZGlNZW51RG93bjtcblxuICAgY29uc3RydWN0b3IocHJpdmF0ZSBjZFJlZjogQ2hhbmdlRGV0ZWN0b3JSZWYpIHt9XG5cbiAgIG5nT25Jbml0KCk6IHZvaWQge31cblxuICAgbmdPbkNoYW5nZXMoY2hhbmdlczogU2ltcGxlQ2hhbmdlcyk6IHZvaWQge1xuICAgICAgaWYgKGNoYW5nZXNbJ3VybCddKSB7XG4gICAgICAgICB0aGlzLmZvcm1hdHRlZFVybCA9IHRoaXMuZm9ybWF0VXJsKHRoaXMudXJsKTtcbiAgICAgIH1cbiAgICAgIGlmIChjaGFuZ2VzWydkZXNjcmlwdGlvbiddICYmIHRoaXMuZGVzY3JpcHRpb24/Lmxlbmd0aCkge1xuICAgICAgICAgdGhpcy5mb3JtYXR0ZWREZXNjcmlwdGlvbiA9IHRoaXMudHJ1bmNhdGVTdHJpbmcodGhpcy5kZXNjcmlwdGlvbiwgMTc2KTtcbiAgICAgIH1cbiAgICAgIGlmIChjaGFuZ2VzWyd0aXRsZSddICYmIHRoaXMudGl0bGU/Lmxlbmd0aCkge1xuICAgICAgICAgdGhpcy5mb3JtYXR0ZWRUaXRsZSA9IHRoaXMudHJ1bmNhdGVTdHJpbmcodGhpcy50aXRsZSwgNjApO1xuICAgICAgfVxuICAgfVxuXG4gICBuZ09uRGVzdHJveSgpOiB2b2lkIHt9XG5cbiAgIHByaXZhdGUgZm9ybWF0VXJsKHVybDogc3RyaW5nKTogc3RyaW5nIHtcbiAgICAgIGNvbnN0IG1hdGNoID0gdXJsLm1hdGNoKC9eKD86aHR0cHM/OlxcL1xcLyk/KD86W15AXFwvXFxuXStAKT8oPzp3d3dcXC4pPyhbXjpcXC8/XFxuXSspLyk7XG4gICAgICByZXR1cm4gbWF0Y2ggPyBtYXRjaFswXSArICfigKYnIDogdXJsO1xuICAgfVxuXG4gICAvKipcbiAgICAqIFRydW5jYXRlIFN0cmluZ1xuICAgICovXG4gICBwcml2YXRlIHRydW5jYXRlU3RyaW5nKGlucHV0U3RyOiBzdHJpbmcsIG1heExlbmd0aDogbnVtYmVyKTogc3RyaW5nIHtcbiAgICAgIGNvbnN0IHdvcmRzID0gaW5wdXRTdHIuc3BsaXQoJyAnKTtcbiAgICAgIGxldCBzdHIgPSAnJztcbiAgICAgIGZvciAobGV0IGkgPSAwOyBpIDwgd29yZHMubGVuZ3RoOyBpKyspIHtcbiAgICAgICAgIGNvbnN0IHdvcmQgPSB3b3Jkc1tpXTtcbiAgICAgICAgIGlmIChzdHIubGVuZ3RoICsgd29yZC5sZW5ndGggPiBtYXhMZW5ndGgpIHtcbiAgICAgICAgICAgIHN0ciArPSAn4oCmJztcbiAgICAgICAgICAgIGJyZWFrO1xuICAgICAgICAgfSBlbHNlIHtcbiAgICAgICAgICAgIHN0ciArPSAnICcgKyB3b3JkO1xuICAgICAgICAgfVxuICAgICAgfVxuICAgICAgc3RyID0gc3RyLnRyaW0oKTtcblxuICAgICAgcmV0dXJuIHN0cjtcbiAgIH1cbn1cbiIsIjxkaXYgY2xhc3M9XCJuZ3gtc2VycC1iaW5nX190aXRsZVwiPnt7IGZvcm1hdHRlZFRpdGxlIH19PC9kaXY+XG48ZGl2IGNsYXNzPVwibmd4LXNlcnAtYmluZ19fdXJsXCI+XG4gICB7eyBmb3JtYXR0ZWRVcmwgfX1cbiAgIDxtZC1pY29uIGNsYXNzPVwibmd4LXNlcnAtYmluZ19fdXJsLWljb25cIiBbaWNvbl09XCJkb3duSWNvblwiIG1pZGRsZT48L21kLWljb24+XG48L2Rpdj5cbjxkaXYgY2xhc3M9XCJuZ3gtc2VycC1iaW5nX19kZXNjcmlwdGlvblwiPlxuICAgPHNwYW4gY2xhc3M9XCJuZ3gtc2VycC1iaW5nX19kZXNjcmlwdGlvbi13ZWJcIj5XZWI8L3NwYW4+XG4gICB7eyBmb3JtYXR0ZWREZXNjcmlwdGlvbiB9fVxuPC9kaXY+XG4iXX0=