ngx-serp-preview
Version:
SERP (Search Engine Result Page) Preview Component for Angular
321 lines (312 loc) • 41.1 kB
JavaScript
import * as i0 from '@angular/core';
import { Component, ChangeDetectionStrategy, ViewEncapsulation, HostBinding, Input } from '@angular/core';
import { NgIf, NgOptimizedImage, NgSwitchCase, NgSwitch } from '@angular/common';
import * as i1 from 'ngx-md-icon';
import { NgxMdIconModule } from 'ngx-md-icon';
import { mdiEarth, mdiDotsVertical, mdiMenuDown, mdiChevronDown, mdiGoogle, mdiCellphone, mdiMicrosoftBing, mdiYahoo } from '@mdi/js';
class NgxSerpGoogleComponent {
constructor(cdRef) {
this.cdRef = cdRef;
this.class = 'ngx-serp-google';
this.url = 'example.com';
this.formattedUrl = '';
this.formattedDescription = '';
this.formattedTitle = '';
this.siteIcon = mdiEarth;
this.menuIcon = mdiDotsVertical;
}
ngOnInit() { }
ngOnChanges(changes) {
if (changes['url']) {
this.formattedUrl = this.formatUrl(this.url);
}
if (changes['description'] && this.description?.length) {
this.formattedDescription = this.truncateString(this.description, 155);
}
if (changes['title'] && this.title?.length) {
this.formattedTitle = this.truncateString(this.title, 60);
}
}
ngOnDestroy() { }
formatUrl(url) {
return 'https://' + url.replace(/https?:\/\//, '').replace(/\//g, ' › ');
}
/**
* 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;
}
}
NgxSerpGoogleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NgxSerpGoogleComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
NgxSerpGoogleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: NgxSerpGoogleComponent, isStandalone: true, selector: "ngx-serp-google", inputs: { siteName: "siteName", title: "title", description: "description", url: "url", faviconUrl: "faviconUrl" }, host: { properties: { "class": "this.class" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"ngx-serp-google__header\">\n <div class=\"\">\n <div class=\"ngx-serp-google__header-icon\">\n <ng-container *ngIf=\"faviconUrl; else mdIcon\">\n <img [src]=\"faviconUrl\" fill>\n </ng-container>\n <ng-template #mdIcon>\n <md-icon [icon]=\"siteIcon\"></md-icon>\n </ng-template>\n </div>\n </div>\n <div class=\"\">\n <div class=\"ngx-serp-google__header-title\">{{ siteName }}</div>\n <div class=\"ngx-serp-google__header-url\">\n {{ formattedUrl }}\n </div>\n </div>\n <div class=\"ngx-serp-google__header-menu\">\n <md-icon [icon]=\"menuIcon\" middle></md-icon>\n </div>\n</div>\n<div class=\"ngx-serp-google__title\">{{ formattedTitle }}</div>\n<div class=\"ngx-serp-google__description\">{{ formattedDescription }}</div>\n", styles: ["body.dark .ngx-serp-google{--ngx-serp-google-site: #dadce0;--ngx-serp-google-url: #bdc1c6;--ngx-serp-google-title: #8ab4f8;--ngx-serp-google-description: #bdc1c6}.ngx-serp-google{--ngx-serp-google-site: #202124;--ngx-serp-google-url: #4d5156;--ngx-serp-google-title: #1a0dab;--ngx-serp-google-description: #4d5156;display:block;font-family:arial,sans-serif;letter-spacing:normal;font-weight:400}.ngx-serp-google__header{display:flex;align-items:center;justify-content:flex-start}.ngx-serp-google__header-icon{margin-right:12px;background-color:#e2eeff;height:28px;width:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center}.ngx-serp-google__header-icon .md-icon{width:18px;height:18px;font-size:18px}.ngx-serp-google__header-icon .md-icon path{color:#0060f0}.ngx-serp-google__header-icon img{width:18px;height:auto}.ngx-serp-google__header-title{color:var(--ngx-serp-google-site);font-size:14px;max-width:300px;display:block;line-height:20px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.ngx-serp-google__header-url{font-size:12px;line-height:18px;color:var(--ngx-serp-google-url);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:330px}.ngx-serp-google__header-menu{align-self:flex-end}.ngx-serp-google__header-menu .md-icon{width:18px;height:18px;font-size:18px;position:relative;top:4px;left:4px}.ngx-serp-google__header-menu .md-icon path{color:var(--ngx-serp-google-url)}.ngx-serp-google__title{color:var(--ngx-serp-google-title);max-width:600px;font-size:20px;font-weight:400;display:block;line-height:1.3;margin-top:6px;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ngx-serp-google__description{color:var(--ngx-serp-google-description);display:block;font-size:14px;line-height:1.58;word-wrap:break-word;max-width:600px}\n"], dependencies: [{ kind: "ngmodule", type: NgxMdIconModule }, { kind: "component", type: i1.NgxMdIconComponent, selector: "md-icon", inputs: ["icon", "icons", "texts", "middle", "xViewBox", "yViewBox", "xTextPos", "yTextPos"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NgxSerpGoogleComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-serp-google', standalone: true, imports: [NgxMdIconModule, NgOptimizedImage, NgIf], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"ngx-serp-google__header\">\n <div class=\"\">\n <div class=\"ngx-serp-google__header-icon\">\n <ng-container *ngIf=\"faviconUrl; else mdIcon\">\n <img [src]=\"faviconUrl\" fill>\n </ng-container>\n <ng-template #mdIcon>\n <md-icon [icon]=\"siteIcon\"></md-icon>\n </ng-template>\n </div>\n </div>\n <div class=\"\">\n <div class=\"ngx-serp-google__header-title\">{{ siteName }}</div>\n <div class=\"ngx-serp-google__header-url\">\n {{ formattedUrl }}\n </div>\n </div>\n <div class=\"ngx-serp-google__header-menu\">\n <md-icon [icon]=\"menuIcon\" middle></md-icon>\n </div>\n</div>\n<div class=\"ngx-serp-google__title\">{{ formattedTitle }}</div>\n<div class=\"ngx-serp-google__description\">{{ formattedDescription }}</div>\n", styles: ["body.dark .ngx-serp-google{--ngx-serp-google-site: #dadce0;--ngx-serp-google-url: #bdc1c6;--ngx-serp-google-title: #8ab4f8;--ngx-serp-google-description: #bdc1c6}.ngx-serp-google{--ngx-serp-google-site: #202124;--ngx-serp-google-url: #4d5156;--ngx-serp-google-title: #1a0dab;--ngx-serp-google-description: #4d5156;display:block;font-family:arial,sans-serif;letter-spacing:normal;font-weight:400}.ngx-serp-google__header{display:flex;align-items:center;justify-content:flex-start}.ngx-serp-google__header-icon{margin-right:12px;background-color:#e2eeff;height:28px;width:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center}.ngx-serp-google__header-icon .md-icon{width:18px;height:18px;font-size:18px}.ngx-serp-google__header-icon .md-icon path{color:#0060f0}.ngx-serp-google__header-icon img{width:18px;height:auto}.ngx-serp-google__header-title{color:var(--ngx-serp-google-site);font-size:14px;max-width:300px;display:block;line-height:20px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.ngx-serp-google__header-url{font-size:12px;line-height:18px;color:var(--ngx-serp-google-url);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:330px}.ngx-serp-google__header-menu{align-self:flex-end}.ngx-serp-google__header-menu .md-icon{width:18px;height:18px;font-size:18px;position:relative;top:4px;left:4px}.ngx-serp-google__header-menu .md-icon path{color:var(--ngx-serp-google-url)}.ngx-serp-google__title{color:var(--ngx-serp-google-title);max-width:600px;font-size:20px;font-weight:400;display:block;line-height:1.3;margin-top:6px;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ngx-serp-google__description{color:var(--ngx-serp-google-description);display:block;font-size:14px;line-height:1.58;word-wrap:break-word;max-width:600px}\n"] }]
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { class: [{
type: HostBinding
}], siteName: [{
type: Input
}], title: [{
type: Input
}], description: [{
type: Input
}], url: [{
type: Input
}], faviconUrl: [{
type: Input
}] } });
class NgxSerpGoogleMobileComponent {
constructor(cdRef) {
this.cdRef = cdRef;
this.class = 'ngx-serp-google-mobile';
this.url = 'example.com';
this.formattedUrl = '';
this.formattedDescription = '';
this.formattedTitle = '';
this.siteIcon = mdiEarth;
this.menuIcon = mdiDotsVertical;
}
ngOnInit() { }
ngOnChanges(changes) {
if (changes['url']) {
this.formattedUrl = this.formatUrl(this.url);
}
if (changes['description'] && this.description?.length) {
this.formattedDescription = this.truncateString(this.description, 155);
}
if (changes['title'] && this.title?.length) {
this.formattedTitle = this.truncateString(this.title, 82);
}
}
ngOnDestroy() { }
formatUrl(url) {
return 'https://' + url.replace(/https?:\/\//, '').replace(/\//g, ' › ');
}
/**
* 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;
}
}
NgxSerpGoogleMobileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NgxSerpGoogleMobileComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
NgxSerpGoogleMobileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: NgxSerpGoogleMobileComponent, isStandalone: true, selector: "ngx-serp-google-mobile", inputs: { siteName: "siteName", title: "title", description: "description", url: "url", faviconUrl: "faviconUrl" }, host: { properties: { "class": "this.class" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"ngx-serp-google-mobile__container\">\n <div class=\"ngx-serp-google-mobile__card\">\n\n <div class=\"ngx-serp-google-mobile__header\">\n <div class=\"\">\n <div class=\"ngx-serp-google-mobile__header-icon\">\n <ng-container *ngIf=\"faviconUrl; else mdIcon\">\n <img [src]=\"faviconUrl\" fill>\n </ng-container>\n <ng-template #mdIcon>\n <md-icon [icon]=\"siteIcon\"></md-icon>\n </ng-template>\n </div>\n </div>\n <div class=\"\">\n <div class=\"ngx-serp-google-mobile__header-title\">{{ siteName }}</div>\n <div class=\"ngx-serp-google-mobile__header-url\">\n {{ formattedUrl }}\n </div>\n </div>\n <div class=\"ngx-serp-google-mobile__header-menu\">\n <md-icon [icon]=\"menuIcon\" middle></md-icon>\n </div>\n </div>\n <div class=\"ngx-serp-google-mobile__title\">{{ formattedTitle }}</div>\n <div class=\"ngx-serp-google-mobile__description\">{{ formattedDescription }}</div>\n\n </div>\n</div>\n", styles: ["body.dark .ngx-serp-google-mobile{--ngx-serp-google-mobile-site: #dadce0;--ngx-serp-google-mobile-url: #bdc1c6;--ngx-serp-google-mobile-title: #8ab4f8;--ngx-serp-google-mobile-description: #bdc1c6;--ngx-serp-google-mobile-card-gap: #34373c;--ngx-serp-google-mobile-card-border: #26282b}.ngx-serp-google-mobile{--ngx-serp-google-mobile-site: #202124;--ngx-serp-google-mobile-url: #4d5156;--ngx-serp-google-mobile-title: #1558d6;--ngx-serp-google-mobile-description: #4d5156;--ngx-serp-google-mobile-card-gap: #f1f3f4;--ngx-serp-google-mobile-card-border: #ebedef;display:block;font-family:Roboto,Helvetica Neue,Arial,sans-serif;letter-spacing:normal;font-weight:400}.ngx-serp-google-mobile__container{max-width:414px;border-top:7px solid var(--ngx-serp-google-mobile-card-gap);border-bottom:7px solid var(--ngx-serp-google-mobile-card-gap)}.ngx-serp-google-mobile__card{border-top:1px solid var(--ngx-serp-google-mobile-card-border);border-bottom:1px solid var(--ngx-serp-google-mobile-card-border);padding:15px 16px 12px}.ngx-serp-google-mobile__header{display:flex;align-items:center;justify-content:flex-start;position:relative;margin-bottom:11px}.ngx-serp-google-mobile__header-icon{margin-right:12px;background-color:#e2eeff;height:28px;width:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center}.ngx-serp-google-mobile__header-icon .md-icon{width:18px;height:18px;font-size:18px}.ngx-serp-google-mobile__header-icon .md-icon path{color:#0060f0}.ngx-serp-google-mobile__header-icon img{width:18px;height:auto}.ngx-serp-google-mobile__header-title{font-family:Google Sans,Roboto,Helvetica Neue,Arial,sans-serif;color:var(--ngx-serp-google-mobile-site);font-size:14px;max-width:280px;display:block;line-height:20px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.ngx-serp-google-mobile__header-url{font-size:12px;line-height:18px;color:var(--ngx-serp-google-mobile-url);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px}.ngx-serp-google-mobile__header-menu{position:absolute;right:8px;top:0}.ngx-serp-google-mobile__header-menu .md-icon{width:18px;height:18px;font-size:18px;position:relative;top:4px;left:4px}.ngx-serp-google-mobile__header-menu .md-icon path{color:var(--ngx-serp-google-mobile-url)}.ngx-serp-google-mobile__title{font-family:Google Sans,Roboto,Helvetica Neue,Arial,sans-serif;color:var(--ngx-serp-google-mobile-title);font-size:20px;font-weight:400;display:block;line-height:1.3;margin-top:5px;margin-bottom:8px}.ngx-serp-google-mobile__description{color:var(--ngx-serp-google-mobile-description);display:block;font-size:14px;line-height:1.58;word-wrap:break-word;max-width:600px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: NgxSerpGoogleMobileComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-serp-google-mobile', standalone: true, imports: [NgIf, NgxMdIconModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"ngx-serp-google-mobile__container\">\n <div class=\"ngx-serp-google-mobile__card\">\n\n <div class=\"ngx-serp-google-mobile__header\">\n <div class=\"\">\n <div class=\"ngx-serp-google-mobile__header-icon\">\n <ng-container *ngIf=\"faviconUrl; else mdIcon\">\n <img [src]=\"faviconUrl\" fill>\n </ng-container>\n <ng-template #mdIcon>\n <md-icon [icon]=\"siteIcon\"></md-icon>\n </ng-template>\n </div>\n </div>\n <div class=\"\">\n <div class=\"ngx-serp-google-mobile__header-title\">{{ siteName }}</div>\n <div class=\"ngx-serp-google-mobile__header-url\">\n {{ formattedUrl }}\n </div>\n </div>\n <div class=\"ngx-serp-google-mobile__header-menu\">\n <md-icon [icon]=\"menuIcon\" middle></md-icon>\n </div>\n </div>\n <div class=\"ngx-serp-google-mobile__title\">{{ formattedTitle }}</div>\n <div class=\"ngx-serp-google-mobile__description\">{{ formattedDescription }}</div>\n\n </div>\n</div>\n", styles: ["body.dark .ngx-serp-google-mobile{--ngx-serp-google-mobile-site: #dadce0;--ngx-serp-google-mobile-url: #bdc1c6;--ngx-serp-google-mobile-title: #8ab4f8;--ngx-serp-google-mobile-description: #bdc1c6;--ngx-serp-google-mobile-card-gap: #34373c;--ngx-serp-google-mobile-card-border: #26282b}.ngx-serp-google-mobile{--ngx-serp-google-mobile-site: #202124;--ngx-serp-google-mobile-url: #4d5156;--ngx-serp-google-mobile-title: #1558d6;--ngx-serp-google-mobile-description: #4d5156;--ngx-serp-google-mobile-card-gap: #f1f3f4;--ngx-serp-google-mobile-card-border: #ebedef;display:block;font-family:Roboto,Helvetica Neue,Arial,sans-serif;letter-spacing:normal;font-weight:400}.ngx-serp-google-mobile__container{max-width:414px;border-top:7px solid var(--ngx-serp-google-mobile-card-gap);border-bottom:7px solid var(--ngx-serp-google-mobile-card-gap)}.ngx-serp-google-mobile__card{border-top:1px solid var(--ngx-serp-google-mobile-card-border);border-bottom:1px solid var(--ngx-serp-google-mobile-card-border);padding:15px 16px 12px}.ngx-serp-google-mobile__header{display:flex;align-items:center;justify-content:flex-start;position:relative;margin-bottom:11px}.ngx-serp-google-mobile__header-icon{margin-right:12px;background-color:#e2eeff;height:28px;width:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center}.ngx-serp-google-mobile__header-icon .md-icon{width:18px;height:18px;font-size:18px}.ngx-serp-google-mobile__header-icon .md-icon path{color:#0060f0}.ngx-serp-google-mobile__header-icon img{width:18px;height:auto}.ngx-serp-google-mobile__header-title{font-family:Google Sans,Roboto,Helvetica Neue,Arial,sans-serif;color:var(--ngx-serp-google-mobile-site);font-size:14px;max-width:280px;display:block;line-height:20px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.ngx-serp-google-mobile__header-url{font-size:12px;line-height:18px;color:var(--ngx-serp-google-mobile-url);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px}.ngx-serp-google-mobile__header-menu{position:absolute;right:8px;top:0}.ngx-serp-google-mobile__header-menu .md-icon{width:18px;height:18px;font-size:18px;position:relative;top:4px;left:4px}.ngx-serp-google-mobile__header-menu .md-icon path{color:var(--ngx-serp-google-mobile-url)}.ngx-serp-google-mobile__title{font-family:Google Sans,Roboto,Helvetica Neue,Arial,sans-serif;color:var(--ngx-serp-google-mobile-title);font-size:20px;font-weight:400;display:block;line-height:1.3;margin-top:5px;margin-bottom:8px}.ngx-serp-google-mobile__description{color:var(--ngx-serp-google-mobile-description);display:block;font-size:14px;line-height:1.58;word-wrap:break-word;max-width:600px}\n"] }]
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { class: [{
type: HostBinding
}], siteName: [{
type: Input
}], title: [{
type: Input
}], description: [{
type: Input
}], url: [{
type: Input
}], faviconUrl: [{
type: Input
}] } });
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
}] } });
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
}] } });
class NgxSerpTabsComponent {
constructor(cdRef) {
this.cdRef = cdRef;
this.class = 'ngx-serp-tabs';
this.url = 'example.com';
this.activeTabIndex = 0;
this.icons = {
google: mdiGoogle,
mobile: mdiCellphone,
bing: mdiMicrosoftBing,
yahoo: mdiYahoo,
};
}
ngOnInit() { }
ngOnChanges(changes) { }
ngOnDestroy() { }
}
NgxSerpTabsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NgxSerpTabsComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
NgxSerpTabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: NgxSerpTabsComponent, isStandalone: true, selector: "ngx-serp-tabs", inputs: { siteName: "siteName", title: "title", description: "description", url: "url", faviconUrl: "faviconUrl", activeTabIndex: "activeTabIndex" }, host: { properties: { "class": "this.class" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"ngx-serp-tabs__panel\">\n <div class=\"ngx-serp-tabs__panel-btn\" [class.active]=\"activeTabIndex === 0\" (click)=\"activeTabIndex = 0\">\n <md-icon [icon]=\"icons.google\"></md-icon>\n <span class=\"ngx-serp-tabs__panel-label\">Google</span>\n </div>\n <div class=\"ngx-serp-tabs__panel-btn\" [class.active]=\"activeTabIndex === 1\" (click)=\"activeTabIndex = 1\">\n <md-icon [icon]=\"icons.mobile\"></md-icon>\n <span class=\"ngx-serp-tabs__panel-label\">Mobile</span>\n </div>\n <div class=\"ngx-serp-tabs__panel-btn\" [class.active]=\"activeTabIndex === 2\" (click)=\"activeTabIndex = 2\">\n <md-icon [icon]=\"icons.bing\"></md-icon>\n <span class=\"ngx-serp-tabs__panel-label\">Bing</span>\n </div>\n <div class=\"ngx-serp-tabs__panel-btn\" [class.active]=\"activeTabIndex === 3\" (click)=\"activeTabIndex = 3\">\n <md-icon [icon]=\"icons.yahoo\"></md-icon>\n <span class=\"ngx-serp-tabs__panel-label\">Yahoo</span>\n </div>\n</div>\n\n<div class=\"ngx-serp-tabs__content\">\n <ng-container [ngSwitch]=\"activeTabIndex\">\n <ngx-serp-google *ngSwitchCase=\"0\" [siteName]=\"siteName\" [title]=\"title\" [description]=\"description\" [url]=\"url\"\n [faviconUrl]=\"faviconUrl\"></ngx-serp-google>\n\n <ngx-serp-google-mobile *ngSwitchCase=\"1\" [siteName]=\"siteName\" [title]=\"title\" [description]=\"description\" [url]=\"url\"\n [faviconUrl]=\"faviconUrl\"></ngx-serp-google-mobile>\n\n <ngx-serp-bing *ngSwitchCase=\"2\" [title]=\"title\" [description]=\"description\" [url]=\"url\"></ngx-serp-bing>\n\n <ngx-serp-yahoo *ngSwitchCase=\"3\" [title]=\"title\" [description]=\"description\" [url]=\"url\"></ngx-serp-yahoo>\n </ng-container>\n</div>\n", styles: ["body.dark .ngx-serp-tabs{--ngx-serp-tabs-border: #3c4043;--ngx-serp-tabs-label: #969ba1;--ngx-serp-tabs-label-active: #8ab4f8}.ngx-serp-tabs{--ngx-serp-tabs-border: #ebebeb;--ngx-serp-tabs-label: #5f6368;--ngx-serp-tabs-label-active: #4285f4;width:100%;display:block;font-weight:400}.ngx-serp-tabs__panel{display:flex;align-items:stretch;border-bottom:1px solid var(--ngx-serp-tabs-border)}.ngx-serp-tabs__panel-btn{display:inline-flex;align-items:center;justify-content:center;height:37px;padding:0 16px;text-align:center;text-decoration:none;white-space:nowrap;cursor:pointer;box-sizing:border-box;margin-right:3px;font-family:Google Sans,arial,sans-serif;font-size:14px;letter-spacing:normal;color:var(--ngx-serp-tabs-label);border-bottom:3px solid transparent}.ngx-serp-tabs__panel-btn.active{color:var(--ngx-serp-tabs-label-active);border-bottom:3px solid var(--ngx-serp-tabs-label-active)}.ngx-serp-tabs__panel-btn .md-icon{width:16px;height:16px;font-size:16px;margin-right:6px}.ngx-serp-tabs__content{padding:20px 0}\n"], dependencies: [{ kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: NgxSerpGoogleComponent, selector: "ngx-serp-google", inputs: ["siteName", "title", "description", "url", "faviconUrl"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "component", type: NgxSerpGoogleMobileComponent, selector: "ngx-serp-google-mobile", inputs: ["siteName", "title", "description", "url", "faviconUrl"] }, { kind: "component", type: NgxSerpBingComponent, selector: "ngx-serp-bing", inputs: ["title", "description", "url"] }, { kind: "component", type: NgxSerpYahooComponent, selector: "ngx-serp-yahoo", inputs: ["title", "description", "url"] }, { 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: NgxSerpTabsComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-serp-tabs', standalone: true, imports: [
NgSwitchCase,
NgxSerpGoogleComponent,
NgSwitch,
NgxSerpGoogleMobileComponent,
NgxSerpBingComponent,
NgxSerpYahooComponent,
NgxMdIconModule,
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"ngx-serp-tabs__panel\">\n <div class=\"ngx-serp-tabs__panel-btn\" [class.active]=\"activeTabIndex === 0\" (click)=\"activeTabIndex = 0\">\n <md-icon [icon]=\"icons.google\"></md-icon>\n <span class=\"ngx-serp-tabs__panel-label\">Google</span>\n </div>\n <div class=\"ngx-serp-tabs__panel-btn\" [class.active]=\"activeTabIndex === 1\" (click)=\"activeTabIndex = 1\">\n <md-icon [icon]=\"icons.mobile\"></md-icon>\n <span class=\"ngx-serp-tabs__panel-label\">Mobile</span>\n </div>\n <div class=\"ngx-serp-tabs__panel-btn\" [class.active]=\"activeTabIndex === 2\" (click)=\"activeTabIndex = 2\">\n <md-icon [icon]=\"icons.bing\"></md-icon>\n <span class=\"ngx-serp-tabs__panel-label\">Bing</span>\n </div>\n <div class=\"ngx-serp-tabs__panel-btn\" [class.active]=\"activeTabIndex === 3\" (click)=\"activeTabIndex = 3\">\n <md-icon [icon]=\"icons.yahoo\"></md-icon>\n <span class=\"ngx-serp-tabs__panel-label\">Yahoo</span>\n </div>\n</div>\n\n<div class=\"ngx-serp-tabs__content\">\n <ng-container [ngSwitch]=\"activeTabIndex\">\n <ngx-serp-google *ngSwitchCase=\"0\" [siteName]=\"siteName\" [title]=\"title\" [description]=\"description\" [url]=\"url\"\n [faviconUrl]=\"faviconUrl\"></ngx-serp-google>\n\n <ngx-serp-google-mobile *ngSwitchCase=\"1\" [siteName]=\"siteName\" [title]=\"title\" [description]=\"description\" [url]=\"url\"\n [faviconUrl]=\"faviconUrl\"></ngx-serp-google-mobile>\n\n <ngx-serp-bing *ngSwitchCase=\"2\" [title]=\"title\" [description]=\"description\" [url]=\"url\"></ngx-serp-bing>\n\n <ngx-serp-yahoo *ngSwitchCase=\"3\" [title]=\"title\" [description]=\"description\" [url]=\"url\"></ngx-serp-yahoo>\n </ng-container>\n</div>\n", styles: ["body.dark .ngx-serp-tabs{--ngx-serp-tabs-border: #3c4043;--ngx-serp-tabs-label: #969ba1;--ngx-serp-tabs-label-active: #8ab4f8}.ngx-serp-tabs{--ngx-serp-tabs-border: #ebebeb;--ngx-serp-tabs-label: #5f6368;--ngx-serp-tabs-label-active: #4285f4;width:100%;display:block;font-weight:400}.ngx-serp-tabs__panel{display:flex;align-items:stretch;border-bottom:1px solid var(--ngx-serp-tabs-border)}.ngx-serp-tabs__panel-btn{display:inline-flex;align-items:center;justify-content:center;height:37px;padding:0 16px;text-align:center;text-decoration:none;white-space:nowrap;cursor:pointer;box-sizing:border-box;margin-right:3px;font-family:Google Sans,arial,sans-serif;font-size:14px;letter-spacing:normal;color:var(--ngx-serp-tabs-label);border-bottom:3px solid transparent}.ngx-serp-tabs__panel-btn.active{color:var(--ngx-serp-tabs-label-active);border-bottom:3px solid var(--ngx-serp-tabs-label-active)}.ngx-serp-tabs__panel-btn .md-icon{width:16px;height:16px;font-size:16px;margin-right:6px}.ngx-serp-tabs__content{padding:20px 0}\n"] }]
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { class: [{
type: HostBinding
}], siteName: [{
type: Input
}], title: [{
type: Input
}], description: [{
type: Input
}], url: [{
type: Input
}], faviconUrl: [{
type: Input
}], activeTabIndex: [{
type: Input
}] } });
/*
* Public API Surface of ngx-serp-preview
*/
/**
* Generated bundle index. Do not edit.
*/
export { NgxSerpBingComponent, NgxSerpGoogleComponent, NgxSerpGoogleMobileComponent, NgxSerpTabsComponent, NgxSerpYahooComponent };
//# sourceMappingURL=ngx-serp-preview.mjs.map