ngx-serp-preview
Version:
SERP (Search Engine Result Page) Preview Component for Angular
68 lines • 12.5 kB
JavaScript
import { ChangeDetectionStrategy, Component, ViewEncapsulation, HostBinding, Input, } from '@angular/core';
import { NgxMdIconModule } from 'ngx-md-icon';
import { mdiChevronDown } from '@mdi/js';
import * as i0 from "@angular/core";
import * as i1 from "ngx-md-icon";
export class NgxSerpYahooComponent {
constructor(cdRef) {
this.cdRef = cdRef;
this.class = 'ngx-serp-yahoo';
this.url = 'example.com';
this.formattedUrl = '';
this.formattedDescription = '';
this.formattedTitle = '';
this.downIcon = mdiChevronDown;
}
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) {
url = url.replace(/https?:\/\//, '');
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;
}
}
NgxSerpYahooComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NgxSerpYahooComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
NgxSerpYahooComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: NgxSerpYahooComponent, isStandalone: true, selector: "ngx-serp-yahoo", inputs: { title: "title", description: "description", url: "url" }, host: { properties: { "class": "this.class" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"ngx-serp-yahoo__url\">\n {{ formattedUrl }}\n <md-icon class=\"ngx-serp-yahoo__url-icon\" [icon]=\"downIcon\" middle></md-icon>\n</div>\n<div class=\"ngx-serp-yahoo__title\">{{ formattedTitle }}</div>\n<div class=\"ngx-serp-yahoo__description\">\n {{ formattedDescription }}\n</div>\n", styles: ["body.dark .ngx-serp-yahoo{--ngx-serp-yahoo-url: #bec4d5;--ngx-serp-yahoo-title: #c58af9;--ngx-serp-yahoo-description: #bdc1c6}.ngx-serp-yahoo{--ngx-serp-yahoo-url: #202124;--ngx-serp-yahoo-title: #1a0dab;--ngx-serp-yahoo-description: #4d5156;display:block;font-family:Roboto,Helvetica,sans-serif;letter-spacing:normal;font-weight:400}.ngx-serp-yahoo__title{color:var(--ngx-serp-yahoo-title);max-width:600px;font-size:20px;line-height:1.3;font-weight:400;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px}.ngx-serp-yahoo__description{color:var(--ngx-serp-yahoo-description);display:block;font-size:14px;line-height:22px;word-wrap:break-word;max-width:600px}.ngx-serp-yahoo__url{font-size:14px;line-height:20px;padding-bottom:4px;color:var(--ngx-serp-yahoo-url);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:330px}.ngx-serp-yahoo__url-icon.md-icon{width:16px;height:16px;font-size:16px;margin-left:-2px}\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: NgxSerpYahooComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-serp-yahoo', standalone: true, imports: [NgxMdIconModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"ngx-serp-yahoo__url\">\n {{ formattedUrl }}\n <md-icon class=\"ngx-serp-yahoo__url-icon\" [icon]=\"downIcon\" middle></md-icon>\n</div>\n<div class=\"ngx-serp-yahoo__title\">{{ formattedTitle }}</div>\n<div class=\"ngx-serp-yahoo__description\">\n {{ formattedDescription }}\n</div>\n", styles: ["body.dark .ngx-serp-yahoo{--ngx-serp-yahoo-url: #bec4d5;--ngx-serp-yahoo-title: #c58af9;--ngx-serp-yahoo-description: #bdc1c6}.ngx-serp-yahoo{--ngx-serp-yahoo-url: #202124;--ngx-serp-yahoo-title: #1a0dab;--ngx-serp-yahoo-description: #4d5156;display:block;font-family:Roboto,Helvetica,sans-serif;letter-spacing:normal;font-weight:400}.ngx-serp-yahoo__title{color:var(--ngx-serp-yahoo-title);max-width:600px;font-size:20px;line-height:1.3;font-weight:400;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px}.ngx-serp-yahoo__description{color:var(--ngx-serp-yahoo-description);display:block;font-size:14px;line-height:22px;word-wrap:break-word;max-width:600px}.ngx-serp-yahoo__url{font-size:14px;line-height:20px;padding-bottom:4px;color:var(--ngx-serp-yahoo-url);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:330px}.ngx-serp-yahoo__url-icon.md-icon{width:16px;height:16px;font-size:16px;margin-left:-2px}\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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LXNlcnAteWFob28uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXNlcnAtcHJldmlldy9zcmMvbGliL2NvbXBvbmVudHMvbmd4LXNlcnAteWFob28vbmd4LXNlcnAteWFob28uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXNlcnAtcHJldmlldy9zcmMvbGliL2NvbXBvbmVudHMvbmd4LXNlcnAteWFob28vbmd4LXNlcnAteWFob28uY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNKLHVCQUF1QixFQUN2QixTQUFTLEVBTVQsaUJBQWlCLEVBQ2pCLFdBQVcsRUFDWCxLQUFLLEdBQ1AsTUFBTSxlQUFlLENBQUM7QUFFdkIsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLGFBQWEsQ0FBQztBQUM5QyxPQUFPLEVBQUUsY0FBYyxFQUFlLE1BQU0sU0FBUyxDQUFDOzs7QUFXdEQsTUFBTSxPQUFPLHFCQUFxQjtJQW1CL0IsWUFBb0IsS0FBd0I7UUFBeEIsVUFBSyxHQUFMLEtBQUssQ0FBbUI7UUFqQnJDLFVBQUssR0FBRyxnQkFBZ0IsQ0FBQztRQVN6QixRQUFHLEdBQVcsYUFBYSxDQUFDO1FBRTVCLGlCQUFZLEdBQVcsRUFBRSxDQUFDO1FBQzFCLHlCQUFvQixHQUFXLEVBQUUsQ0FBQztRQUNsQyxtQkFBYyxHQUFXLEVBQUUsQ0FBQztRQUU1QixhQUFRLEdBQUcsY0FBYyxDQUFDO0lBRWMsQ0FBQztJQUVoRCxRQUFRLEtBQVUsQ0FBQztJQUVuQixXQUFXLENBQUMsT0FBc0I7UUFDL0IsSUFBSSxPQUFPLENBQUMsS0FBSyxDQUFDLEVBQUU7WUFDakIsSUFBSSxDQUFDLFlBQVksR0FBRyxJQUFJLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQztTQUMvQztRQUNELElBQUksT0FBTyxDQUFDLGFBQWEsQ0FBQyxJQUFJLElBQUksQ0FBQyxXQUFXLEVBQUUsTUFBTSxFQUFFO1lBQ3JELElBQUksQ0FBQyxvQkFBb0IsR0FBRyxJQUFJLENBQUMsY0FBYyxDQUFDLElBQUksQ0FBQyxXQUFXLEVBQUUsR0FBRyxDQUFDLENBQUM7U0FDekU7UUFDRCxJQUFJLE9BQU8sQ0FBQyxPQUFPLENBQUMsSUFBSSxJQUFJLENBQUMsS0FBSyxFQUFFLE1BQU0sRUFBRTtZQUN6QyxJQUFJLENBQUMsY0FBYyxHQUFHLElBQUksQ0FBQyxjQUFjLENBQUMsSUFBSSxDQUFDLEtBQUssRUFBRSxFQUFFLENBQUMsQ0FBQztTQUM1RDtJQUNKLENBQUM7SUFFRCxXQUFXLEtBQVUsQ0FBQztJQUVkLFNBQVMsQ0FBQyxHQUFXO1FBQzFCLEdBQUcsR0FBRyxHQUFHLENBQUMsT0FBTyxDQUFDLGFBQWEsRUFBRSxFQUFFLENBQUMsQ0FBQztRQUNyQyxNQUFNLEtBQUssR0FBRyxHQUFHLENBQUMsS0FBSyxDQUFDLHdEQUF3RCxDQUFDLENBQUM7UUFDbEYsT0FBTyxLQUFLLENBQUMsQ0FBQyxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsR0FBRyxDQUFDO0lBQ2pDLENBQUM7SUFFRDs7T0FFRztJQUNLLGNBQWMsQ0FBQyxRQUFnQixFQUFFLFNBQWlCO1FBQ3ZELE1BQU0sS0FBSyxHQUFHLFFBQVEsQ0FBQyxLQUFLLENBQUMsR0FBRyxDQUFDLENBQUM7UUFDbEMsSUFBSSxHQUFHLEdBQUcsRUFBRSxDQUFDO1FBQ2IsS0FBSyxJQUFJLENBQUMsR0FBRyxDQUFDLEVBQUUsQ0FBQyxHQUFHLEtBQUssQ0FBQyxNQUFNLEVBQUUsQ0FBQyxFQUFFLEVBQUU7WUFDcEMsTUFBTSxJQUFJLEdBQUcsS0FBSyxDQUFDLENBQUMsQ0FBQyxDQUFDO1lBQ3RCLElBQUksR0FBRyxDQUFDLE1BQU0sR0FBRyxJQUFJLENBQUMsTUFBTSxHQUFHLFNBQVMsRUFBRTtnQkFDdkMsR0FBRyxJQUFJLEdBQUcsQ0FBQztnQkFDWCxNQUFNO2FBQ1I7aUJBQU07Z0JBQ0osR0FBRyxJQUFJLEdBQUcsR0FBRyxJQUFJLENBQUM7YUFDcEI7U0FDSDtRQUNELEdBQUcsR0FBRyxHQUFHLENBQUMsSUFBSSxFQUFFLENBQUM7UUFFakIsT0FBTyxHQUFHLENBQUM7SUFDZCxDQUFDOztrSEE3RFMscUJBQXFCO3NHQUFyQixxQkFBcUIsb05DekJsQyxpVEFRQSw4L0JEV2EsZUFBZTsyRkFNZixxQkFBcUI7a0JBVGpDLFNBQVM7K0JBQ0csZ0JBQWdCLGNBQ2QsSUFBSSxXQUNQLENBQUMsZUFBZSxDQUFDLG1CQUdULHVCQUF1QixDQUFDLE1BQU0saUJBQ2hDLGlCQUFpQixDQUFDLElBQUk7d0dBSTlCLEtBQUs7c0JBRFgsV0FBVztnQkFJTCxLQUFLO3NCQURYLEtBQUs7Z0JBSUMsV0FBVztzQkFEakIsS0FBSztnQkFJQyxHQUFHO3NCQURULEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gICBDb21wb25lbnQsXG4gICBPbkluaXQsXG4gICBPbkRlc3Ryb3ksXG4gICBDaGFuZ2VEZXRlY3RvclJlZixcbiAgIE9uQ2hhbmdlcyxcbiAgIFNpbXBsZUNoYW5nZXMsXG4gICBWaWV3RW5jYXBzdWxhdGlvbixcbiAgIEhvc3RCaW5kaW5nLFxuICAgSW5wdXQsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgU3Vic2NyaXB0aW9uIH0gZnJvbSAncnhqcyc7XG5pbXBvcnQgeyBOZ3hNZEljb25Nb2R1bGUgfSBmcm9tICduZ3gtbWQtaWNvbic7XG5pbXBvcnQgeyBtZGlDaGV2cm9uRG93biwgbWRpTWVudURvd24gfSBmcm9tICdAbWRpL2pzJztcblxuQENvbXBvbmVudCh7XG4gICBzZWxlY3RvcjogJ25neC1zZXJwLXlhaG9vJyxcbiAgIHN0YW5kYWxvbmU6IHRydWUsXG4gICBpbXBvcnRzOiBbTmd4TWRJY29uTW9kdWxlXSxcbiAgIHRlbXBsYXRlVXJsOiAnLi9uZ3gtc2VycC15YWhvby5jb21wb25lbnQuaHRtbCcsXG4gICBzdHlsZVVybHM6IFsnLi9uZ3gtc2VycC15YWhvby5jb21wb25lbnQuc2NzcyddLFxuICAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxufSlcbmV4cG9ydCBjbGFzcyBOZ3hTZXJwWWFob29Db21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQsIE9uQ2hhbmdlcywgT25EZXN0cm95IHtcbiAgIEBIb3N0QmluZGluZygpXG4gICBwdWJsaWMgY2xhc3MgPSAnbmd4LXNlcnAteWFob28nO1xuXG4gICBASW5wdXQoKVxuICAgcHVibGljIHRpdGxlPzogc3RyaW5nO1xuXG4gICBASW5wdXQoKVxuICAgcHVibGljIGRlc2NyaXB0aW9uPzogc3RyaW5nO1xuXG4gICBASW5wdXQoKVxuICAgcHVibGljIHVybDogc3RyaW5nID0gJ2V4YW1wbGUuY29tJztcblxuICAgcHVibGljIGZvcm1hdHRlZFVybDogc3RyaW5nID0gJyc7XG4gICBwdWJsaWMgZm9ybWF0dGVkRGVzY3JpcHRpb246IHN0cmluZyA9ICcnO1xuICAgcHVibGljIGZvcm1hdHRlZFRpdGxlOiBzdHJpbmcgPSAnJztcblxuICAgcHVibGljIGRvd25JY29uID0gbWRpQ2hldnJvbkRvd247XG5cbiAgIGNvbnN0cnVjdG9yKHByaXZhdGUgY2RSZWY6IENoYW5nZURldGVjdG9yUmVmKSB7fVxuXG4gICBuZ09uSW5pdCgpOiB2b2lkIHt9XG5cbiAgIG5nT25DaGFuZ2VzKGNoYW5nZXM6IFNpbXBsZUNoYW5nZXMpOiB2b2lkIHtcbiAgICAgIGlmIChjaGFuZ2VzWyd1cmwnXSkge1xuICAgICAgICAgdGhpcy5mb3JtYXR0ZWRVcmwgPSB0aGlzLmZvcm1hdFVybCh0aGlzLnVybCk7XG4gICAgICB9XG4gICAgICBpZiAoY2hhbmdlc1snZGVzY3JpcHRpb24nXSAmJiB0aGlzLmRlc2NyaXB0aW9uPy5sZW5ndGgpIHtcbiAgICAgICAgIHRoaXMuZm9ybWF0dGVkRGVzY3JpcHRpb24gPSB0aGlzLnRydW5jYXRlU3RyaW5nKHRoaXMuZGVzY3JpcHRpb24sIDE3Nik7XG4gICAgICB9XG4gICAgICBpZiAoY2hhbmdlc1sndGl0bGUnXSAmJiB0aGlzLnRpdGxlPy5sZW5ndGgpIHtcbiAgICAgICAgIHRoaXMuZm9ybWF0dGVkVGl0bGUgPSB0aGlzLnRydW5jYXRlU3RyaW5nKHRoaXMudGl0bGUsIDYwKTtcbiAgICAgIH1cbiAgIH1cblxuICAgbmdPbkRlc3Ryb3koKTogdm9pZCB7fVxuXG4gICBwcml2YXRlIGZvcm1hdFVybCh1cmw6IHN0cmluZyk6IHN0cmluZyB7XG4gICAgICB1cmwgPSB1cmwucmVwbGFjZSgvaHR0cHM/OlxcL1xcLy8sICcnKTtcbiAgICAgIGNvbnN0IG1hdGNoID0gdXJsLm1hdGNoKC9eKD86aHR0cHM/OlxcL1xcLyk/KD86W15AXFwvXFxuXStAKT8oPzp3d3dcXC4pPyhbXjpcXC8/XFxuXSspLyk7XG4gICAgICByZXR1cm4gbWF0Y2ggPyBtYXRjaFswXSA6IHVybDtcbiAgIH1cblxuICAgLyoqXG4gICAgKiBUcnVuY2F0ZSBTdHJpbmdcbiAgICAqL1xuICAgcHJpdmF0ZSB0cnVuY2F0ZVN0cmluZyhpbnB1dFN0cjogc3RyaW5nLCBtYXhMZW5ndGg6IG51bWJlcik6IHN0cmluZyB7XG4gICAgICBjb25zdCB3b3JkcyA9IGlucHV0U3RyLnNwbGl0KCcgJyk7XG4gICAgICBsZXQgc3RyID0gJyc7XG4gICAgICBmb3IgKGxldCBpID0gMDsgaSA8IHdvcmRzLmxlbmd0aDsgaSsrKSB7XG4gICAgICAgICBjb25zdCB3b3JkID0gd29yZHNbaV07XG4gICAgICAgICBpZiAoc3RyLmxlbmd0aCArIHdvcmQubGVuZ3RoID4gbWF4TGVuZ3RoKSB7XG4gICAgICAgICAgICBzdHIgKz0gJ+KApic7XG4gICAgICAgICAgICBicmVhaztcbiAgICAgICAgIH0gZWxzZSB7XG4gICAgICAgICAgICBzdHIgKz0gJyAnICsgd29yZDtcbiAgICAgICAgIH1cbiAgICAgIH1cbiAgICAgIHN0ciA9IHN0ci50cmltKCk7XG5cbiAgICAgIHJldHVybiBzdHI7XG4gICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwibmd4LXNlcnAteWFob29fX3VybFwiPlxuICAge3sgZm9ybWF0dGVkVXJsIH19XG4gICA8bWQtaWNvbiBjbGFzcz1cIm5neC1zZXJwLXlhaG9vX191cmwtaWNvblwiIFtpY29uXT1cImRvd25JY29uXCIgbWlkZGxlPjwvbWQtaWNvbj5cbjwvZGl2PlxuPGRpdiBjbGFzcz1cIm5neC1zZXJwLXlhaG9vX190aXRsZVwiPnt7IGZvcm1hdHRlZFRpdGxlIH19PC9kaXY+XG48ZGl2IGNsYXNzPVwibmd4LXNlcnAteWFob29fX2Rlc2NyaXB0aW9uXCI+XG4gICB7eyBmb3JtYXR0ZWREZXNjcmlwdGlvbiB9fVxuPC9kaXY+XG4iXX0=