ngx-notion
Version:
An Notion page renderer for Angular
477 lines (461 loc) • 44.8 kB
JavaScript
import * as i0 from '@angular/core';
import { Component, Input, Inject, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import { DOCUMENT, CommonModule } from '@angular/common';
import * as i1$1 from '@angular/router';
import { RouterModule } from '@angular/router';
class AssetIframeComponent {
}
AssetIframeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AssetIframeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
AssetIframeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AssetIframeComponent, selector: "asset-iframe", inputs: { value: "value" }, ngImport: i0, template: "<iframe class=\"notion-image-inset\" [src]=\"value\" frameborder=\"0\"></iframe>", styles: [""] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AssetIframeComponent, decorators: [{
type: Component,
args: [{ selector: 'asset-iframe', template: "<iframe class=\"notion-image-inset\" [src]=\"value\" frameborder=\"0\"></iframe>", styles: [""] }]
}], propDecorators: { value: [{
type: Input
}] } });
class AssetImageComponent {
constructor(documentRef, renderer) {
this.documentRef = documentRef;
this.renderer = renderer;
this.id = '';
this.caption = '';
}
ngAfterViewInit() {
const modal = this.documentRef.getElementById(`imgModal_${this.id}`);
const img = this.documentRef.getElementById(`image_${this.id}`);
const modalImg = this.documentRef.getElementById(`img_${this.id}`);
const captionText = this.documentRef.getElementById(`caption_${this.id}`);
this.renderer.listen(img, 'click', () => {
this.renderer.setStyle(this.documentRef.body, 'overflow', 'hidden');
modal.style.display = 'block';
modalImg.src = this.value;
captionText.innerHTML = this.caption;
});
var span = this.documentRef.getElementById(`closeImgDialogBtn_${this.id}`);
this.renderer.listen(span, 'click', () => {
this.renderer.removeStyle(this.documentRef.body, 'overflow');
modal.style.display = 'none';
});
}
}
AssetImageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AssetImageComponent, deps: [{ token: DOCUMENT }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
AssetImageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AssetImageComponent, selector: "asset-image", inputs: { id: "id", value: "value", caption: "caption" }, ngImport: i0, template: "<img id=\"image_{{ id }}\" class=\"asset-image\" [alt]=\"caption\" [src]=\"value\" />\n\n<div id=\"imgModal_{{ id }}\" class=\"modal\">\n <span id=\"closeImgDialogBtn_{{ id }}\" class=\"close-img-dialog-btn\">×</span>\n <img id=\"img_{{ id }}\" class=\"modal-content\">\n <div id=\"caption_{{ id }}\" class=\"caption\"></div>\n</div>\n", styles: ["img{display:block;object-fit:cover;border-radius:1px;pointer-events:auto;width:100%}.asset-image{border-radius:5px;cursor:pointer;transition:.3s}.asset-image:hover{opacity:.9}.modal{display:none;position:fixed;z-index:1;padding-top:100px;left:0;top:0;width:100%;height:100%;background-color:#000000e6}.modal-content{margin:auto;display:block;width:80%;max-width:700px}.caption{margin:auto;display:block;width:80%;max-width:700px;text-align:center;color:#ccc;padding:10px 0;height:150px}.modal-content,.caption{animation-name:zoom;animation-duration:.6s}@keyframes zoom{0%{transform:scale(0)}to{transform:scale(1)}}.close-img-dialog-btn{position:absolute;top:15px;right:35px;color:#f1f1f1;font-size:40px;font-weight:700;transition:.3s}.close-img-dialog-btn:hover,.close-img-dialog-btn:focus{color:#bbb;text-decoration:none;cursor:pointer}@media only screen and (max-width: 700px){.modal-content{width:100%}}\n"] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AssetImageComponent, decorators: [{
type: Component,
args: [{ selector: 'asset-image', template: "<img id=\"image_{{ id }}\" class=\"asset-image\" [alt]=\"caption\" [src]=\"value\" />\n\n<div id=\"imgModal_{{ id }}\" class=\"modal\">\n <span id=\"closeImgDialogBtn_{{ id }}\" class=\"close-img-dialog-btn\">×</span>\n <img id=\"img_{{ id }}\" class=\"modal-content\">\n <div id=\"caption_{{ id }}\" class=\"caption\"></div>\n</div>\n", styles: ["img{display:block;object-fit:cover;border-radius:1px;pointer-events:auto;width:100%}.asset-image{border-radius:5px;cursor:pointer;transition:.3s}.asset-image:hover{opacity:.9}.modal{display:none;position:fixed;z-index:1;padding-top:100px;left:0;top:0;width:100%;height:100%;background-color:#000000e6}.modal-content{margin:auto;display:block;width:80%;max-width:700px}.caption{margin:auto;display:block;width:80%;max-width:700px;text-align:center;color:#ccc;padding:10px 0;height:150px}.modal-content,.caption{animation-name:zoom;animation-duration:.6s}@keyframes zoom{0%{transform:scale(0)}to{transform:scale(1)}}.close-img-dialog-btn{position:absolute;top:15px;right:35px;color:#f1f1f1;font-size:40px;font-weight:700;transition:.3s}.close-img-dialog-btn:hover,.close-img-dialog-btn:focus{color:#bbb;text-decoration:none;cursor:pointer}@media only screen and (max-width: 700px){.modal-content{width:100%}}\n"] }]
}], ctorParameters: function () {
return [{ type: Document, decorators: [{
type: Inject,
args: [DOCUMENT]
}] }, { type: i0.Renderer2 }];
}, propDecorators: { id: [{
type: Input
}], value: [{
type: Input
}], caption: [{
type: Input
}] } });
class AssetComponent {
constructor() {
this.id = '';
}
}
AssetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AssetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
AssetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AssetComponent, selector: "asset", inputs: { id: "id", value: "value", type: "type" }, ngImport: i0, template: "<asset-image\n *ngIf=\"type === 'image'\"\n [id]=\"id\"\n [value]=\"value.file?.url\"\n></asset-image>\n", components: [{ type: AssetImageComponent, selector: "asset-image", inputs: ["id", "value", "caption"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AssetComponent, decorators: [{
type: Component,
args: [{ selector: 'asset', template: "<asset-image\n *ngIf=\"type === 'image'\"\n [id]=\"id\"\n [value]=\"value.file?.url\"\n></asset-image>\n" }]
}], propDecorators: { id: [{
type: Input
}], value: [{
type: Input
}], type: [{
type: Input
}] } });
var BlockType;
(function (BlockType) {
BlockType["Paragraph"] = "paragraph";
BlockType["Heading1"] = "heading_1";
BlockType["Heading2"] = "heading_2";
BlockType["Heading3"] = "heading_3";
BlockType["BulletedListItem"] = "bulleted_list_item";
BlockType["NumberedListItem"] = "numbered_list_item";
BlockType["ToDo"] = "to_do";
BlockType["Toggle"] = "toggle";
BlockType["ChildPage"] = "child_page";
BlockType["ChildDatabase"] = "child_database";
BlockType["Embed"] = "embed";
BlockType["Image"] = "image";
BlockType["Video"] = "video";
BlockType["File"] = "file";
BlockType["Pdf"] = "pdf";
BlockType["Bookmark"] = "bookmark";
BlockType["Callout"] = "callout";
BlockType["Quote"] = "quote";
BlockType["Equation"] = "equation";
BlockType["Divider"] = "divider";
BlockType["TableOfContents"] = "table_of_contents";
BlockType["Column"] = "column";
BlockType["ColumnList"] = "column_list";
BlockType["LinkPreview"] = "link_preview";
BlockType["SyncedBlock"] = "synced_block";
BlockType["Template"] = "template";
BlockType["LinkToPage"] = "link_to_page";
BlockType["Table"] = "table";
BlockType["TableRow"] = "table_row";
BlockType["Unsupported"] = "unsupported";
})(BlockType || (BlockType = {}));
var ColorType;
(function (ColorType) {
ColorType[ColorType["default"] = 0] = "default";
ColorType[ColorType["gray"] = 1] = "gray";
ColorType[ColorType["brown"] = 2] = "brown";
ColorType[ColorType["orange"] = 3] = "orange";
ColorType[ColorType["yellow"] = 4] = "yellow";
ColorType[ColorType["green"] = 5] = "green";
ColorType[ColorType["blue"] = 6] = "blue";
ColorType[ColorType["purple"] = 7] = "purple";
ColorType[ColorType["pink"] = 8] = "pink";
ColorType[ColorType["red"] = 9] = "red";
ColorType[ColorType["gray_background"] = 10] = "gray_background";
ColorType[ColorType["brown_background"] = 11] = "brown_background";
ColorType[ColorType["orange_background"] = 12] = "orange_background";
ColorType[ColorType["yellow_background"] = 13] = "yellow_background";
ColorType[ColorType["green_background"] = 14] = "green_background";
ColorType[ColorType["blue_background"] = 15] = "blue_background";
ColorType[ColorType["purple_background"] = 16] = "purple_background";
ColorType[ColorType["pink_background"] = 17] = "pink_background";
ColorType[ColorType["red_background"] = 18] = "red_background";
})(ColorType || (ColorType = {}));
class TableOfContentsComponent {
constructor() {
this.headings = [];
this.items = [];
}
ngOnInit() {
this.items = [];
this.headings.forEach((heading, index) => {
const prevElement = this.items[index - 1];
let level = 0;
if (prevElement) {
level = prevElement.level;
if (this.getHeaderLevel(prevElement.type) > this.getHeaderLevel(heading.type)) {
level = level > 0 ? level - 1 : level;
}
else if (this.getHeaderLevel(prevElement.type) < this.getHeaderLevel(heading.type)) {
level += 1;
}
}
this.items.push({
id: heading.id,
type: heading.type,
text: heading[heading.type].rich_text.reduce((text, item) => text + item.plain_text, ''),
level,
});
});
}
getHeaderLevel(type) {
const headings = {
heading_1: 0,
heading_2: 1,
heading_3: 2,
};
return headings[type] || 0;
}
}
TableOfContentsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: TableOfContentsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
TableOfContentsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: TableOfContentsComponent, selector: "table-of-contents", inputs: { headings: "headings" }, ngImport: i0, template: "<div class=\"table-of-contents\">\n <div [style.position]=\"'relative'\">\n <div\n *ngFor=\"let item of items\"\n class=\"content-item\"\n >\n <a class=\"content-link\" [routerLink]=\"[]\" [fragment]=\"item.id\">\n <div class=\"content-link-item\">\n <div\n class=\"content-text-wrapper\"\n [style.margin-left.px]=\"item.level * 24\"\n >\n <div class=\"content-text\">\n {{ item.text }}\n </div>\n </div>\n </div>\n </a>\n </div>\n </div>\n</div>\n", styles: [".table-of-contents{width:100%;margin-top:4px;margin-bottom:4px}.table-of-contents .content-item{color:#787774;fill:#787774}.table-of-contents .content-link{display:block;color:inherit;text-decoration:none}.table-of-contents .content-link-item{width:100%;-webkit-user-select:none;user-select:none;cursor:pointer;transition:background 20ms ease-in 0s}.table-of-contents .content-link-item:hover{background:rgba(55,53,47,.08)}.table-of-contents .content-text{background-image:linear-gradient(to right,rgba(55,53,47,.16) 0%,rgba(55,53,47,.16) 100%);background-repeat:repeat-x;background-position:0 100%;background-size:100% 1px}.table-of-contents .content-text-wrapper{padding:6px 2px;font-size:14px;line-height:1.3;display:flex;align-items:center;margin-left:0}\n"], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: TableOfContentsComponent, decorators: [{
type: Component,
args: [{ selector: 'table-of-contents', template: "<div class=\"table-of-contents\">\n <div [style.position]=\"'relative'\">\n <div\n *ngFor=\"let item of items\"\n class=\"content-item\"\n >\n <a class=\"content-link\" [routerLink]=\"[]\" [fragment]=\"item.id\">\n <div class=\"content-link-item\">\n <div\n class=\"content-text-wrapper\"\n [style.margin-left.px]=\"item.level * 24\"\n >\n <div class=\"content-text\">\n {{ item.text }}\n </div>\n </div>\n </div>\n </a>\n </div>\n </div>\n</div>\n", styles: [".table-of-contents{width:100%;margin-top:4px;margin-bottom:4px}.table-of-contents .content-item{color:#787774;fill:#787774}.table-of-contents .content-link{display:block;color:inherit;text-decoration:none}.table-of-contents .content-link-item{width:100%;-webkit-user-select:none;user-select:none;cursor:pointer;transition:background 20ms ease-in 0s}.table-of-contents .content-link-item:hover{background:rgba(55,53,47,.08)}.table-of-contents .content-text{background-image:linear-gradient(to right,rgba(55,53,47,.16) 0%,rgba(55,53,47,.16) 100%);background-repeat:repeat-x;background-position:0 100%;background-size:100% 1px}.table-of-contents .content-text-wrapper{padding:6px 2px;font-size:14px;line-height:1.3;display:flex;align-items:center;margin-left:0}\n"] }]
}], propDecorators: { headings: [{
type: Input
}] } });
class RichTextComponent {
}
RichTextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: RichTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
RichTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: RichTextComponent, selector: "rich-text", inputs: { richText: "richText" }, ngImport: i0, template: "<span\n *ngFor=\"let item of richText\"\n class=\"text-color-{{ item.annotations.color }}\"\n [ngClass]=\"{\n 'text-bold': item.annotations.bold,\n 'text-italic': item.annotations.italic,\n 'text-strikethrough': item.annotations.strikethrough,\n 'text-underline': item.annotations.underline,\n 'text-code': item.annotations.code\n }\"\n>\n <ng-container *ngIf=\"item.href; else simpleText\">\n <a class=\"text-link\" [href]=\"item.href\" target=\"_blank\">{{ item.text.content }}</a>\n </ng-container>\n <ng-template #simpleText>{{ item.text.content }}</ng-template>\n</span>\n", styles: [".text-bold{font-weight:600}.text-italic{font-style:italic}.text-underline{text-decoration:underline}.text-strikethrough{text-decoration:line-through}.text-link{background-image:linear-gradient(to right,rgba(55,53,47,.16) 0%,rgba(55,53,47,.16) 100%);background-repeat:repeat-x;background-position:0 100%;background-size:100% 1px;text-decoration:none;color:#787774;fill:#787774}.text-color-red{color:#e03e3e}.text-color-red_background{background-color:#fbe4e4}.text-color-red_background_co{background-color:#fbe4e44d}.text-color-pink{color:#ad1a72}.text-color-pink_background{background-color:#f4dfeb}.text-color-pink_background_co{background-color:#f4dfeb4d}.text-color-blue{color:#0b6e99}.text-color-blue_background{background-color:#ddebf1}.text-color-blue_background_co{background-color:#ddebf14d}.text-color-purple{color:#6940a5}.text-color-purple_background{background-color:#eae4f2}.text-color-purple_background_co{background-color:#eae4f24d}.text-color-green{color:#0f7b6c}.text-color-green_background{background-color:#ddedea}.text-color-green_background_co{background-color:#ddedea4d}.text-color-yellow{color:#dfab01}.text-color-yellow_background{background-color:#fbf3db}.text-color-yellow_background_co{background-color:#fbf3db4d}.text-color-orange{color:#d9730d}.text-color-orange_background{background-color:#faebdd}.text-color-orange_background_co{background-color:#faebdd4d}.text-color-brown{color:#64473a}.text-color-brown_background{background-color:#e9e5e3}.text-color-brown_background_co{background-color:#e9e5e34d}.text-color-gray{color:#9b9a97}.text-color-gray_background{background-color:#ebeced}.text-color-gray_background_co{background-color:#ebeced4d}\n"], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: RichTextComponent, decorators: [{
type: Component,
args: [{ selector: 'rich-text', template: "<span\n *ngFor=\"let item of richText\"\n class=\"text-color-{{ item.annotations.color }}\"\n [ngClass]=\"{\n 'text-bold': item.annotations.bold,\n 'text-italic': item.annotations.italic,\n 'text-strikethrough': item.annotations.strikethrough,\n 'text-underline': item.annotations.underline,\n 'text-code': item.annotations.code\n }\"\n>\n <ng-container *ngIf=\"item.href; else simpleText\">\n <a class=\"text-link\" [href]=\"item.href\" target=\"_blank\">{{ item.text.content }}</a>\n </ng-container>\n <ng-template #simpleText>{{ item.text.content }}</ng-template>\n</span>\n", styles: [".text-bold{font-weight:600}.text-italic{font-style:italic}.text-underline{text-decoration:underline}.text-strikethrough{text-decoration:line-through}.text-link{background-image:linear-gradient(to right,rgba(55,53,47,.16) 0%,rgba(55,53,47,.16) 100%);background-repeat:repeat-x;background-position:0 100%;background-size:100% 1px;text-decoration:none;color:#787774;fill:#787774}.text-color-red{color:#e03e3e}.text-color-red_background{background-color:#fbe4e4}.text-color-red_background_co{background-color:#fbe4e44d}.text-color-pink{color:#ad1a72}.text-color-pink_background{background-color:#f4dfeb}.text-color-pink_background_co{background-color:#f4dfeb4d}.text-color-blue{color:#0b6e99}.text-color-blue_background{background-color:#ddebf1}.text-color-blue_background_co{background-color:#ddebf14d}.text-color-purple{color:#6940a5}.text-color-purple_background{background-color:#eae4f2}.text-color-purple_background_co{background-color:#eae4f24d}.text-color-green{color:#0f7b6c}.text-color-green_background{background-color:#ddedea}.text-color-green_background_co{background-color:#ddedea4d}.text-color-yellow{color:#dfab01}.text-color-yellow_background{background-color:#fbf3db}.text-color-yellow_background_co{background-color:#fbf3db4d}.text-color-orange{color:#d9730d}.text-color-orange_background{background-color:#faebdd}.text-color-orange_background_co{background-color:#faebdd4d}.text-color-brown{color:#64473a}.text-color-brown_background{background-color:#e9e5e3}.text-color-brown_background_co{background-color:#e9e5e34d}.text-color-gray{color:#9b9a97}.text-color-gray_background{background-color:#ebeced}.text-color-gray_background_co{background-color:#ebeced4d}\n"] }]
}], propDecorators: { richText: [{
type: Input
}] } });
class HeadingComponent {
constructor() {
this.level = 1;
}
}
HeadingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: HeadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
HeadingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: HeadingComponent, selector: "heading", inputs: { id: "id", level: "level", text: "text" }, ngImport: i0, template: "<h1\n *ngIf=\"level === 1\"\n [id]=\"id\"\n class=\"heading_1\"\n>\n <rich-text [richText]=\"text\"></rich-text>\n</h1>\n\n<h2\n *ngIf=\"level === 2\"\n [id]=\"id\"\n class=\"heading_2\">\n <rich-text [richText]=\"text\"></rich-text>\n</h2>\n\n<h3\n *ngIf=\"level === 3\"\n [id]=\"id\"\n class=\"heading_3\"\n>\n <rich-text [richText]=\"text\"></rich-text>\n</h3>\n", styles: ["h1,h2,h3{font-weight:600;line-height:1.3}h1{font-size:1.875em;margin-top:1.4em}h1:first-child{margin-top:0}h2{font-size:1.5em;margin-top:1.1em}h3{font-size:1.25em;margin-top:1em}\n"], components: [{ type: RichTextComponent, selector: "rich-text", inputs: ["richText"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: HeadingComponent, decorators: [{
type: Component,
args: [{ selector: 'heading', template: "<h1\n *ngIf=\"level === 1\"\n [id]=\"id\"\n class=\"heading_1\"\n>\n <rich-text [richText]=\"text\"></rich-text>\n</h1>\n\n<h2\n *ngIf=\"level === 2\"\n [id]=\"id\"\n class=\"heading_2\">\n <rich-text [richText]=\"text\"></rich-text>\n</h2>\n\n<h3\n *ngIf=\"level === 3\"\n [id]=\"id\"\n class=\"heading_3\"\n>\n <rich-text [richText]=\"text\"></rich-text>\n</h3>\n", styles: ["h1,h2,h3{font-weight:600;line-height:1.3}h1{font-size:1.875em;margin-top:1.4em}h1:first-child{margin-top:0}h2{font-size:1.5em;margin-top:1.1em}h3{font-size:1.25em;margin-top:1em}\n"] }]
}], propDecorators: { id: [{
type: Input
}], level: [{
type: Input
}], text: [{
type: Input
}] } });
class TableComponent {
constructor() {
this.data = [];
}
}
TableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: TableComponent, selector: "block-table", inputs: { properties: "properties", data: "data" }, ngImport: i0, template: "<table [ngClass]=\"{\n 'row-header': properties?.has_row_header,\n 'column-header': properties?.has_column_header\n}\">\n <tbody>\n <tr *ngFor=\"let row of data; let i = index\">\n <td *ngFor=\"let item of row.table_row?.cells || []\">\n <div class=\"table-cell-text\">\n <rich-text [richText]=\"item\"></rich-text>\n </div>\n </td>\n </tr>\n </tbody>\n</table>\n", styles: ["table{font-size:14px;border-collapse:collapse;border-spacing:0;width:100%}table.column-header tr:first-child,table.row-header tr td:first-child{background:#f7f6f3;font-weight:500}table tr td{color:inherit;fill:inherit;border:1px solid #e9e9e7;position:relative;vertical-align:top;min-width:120px;max-width:240px;min-height:32px}table tr td .table-cell-text{max-width:100%;width:100%;white-space:pre-wrap;word-break:break-word;caret-color:#37352f;padding:7px 9px;background-color:transparent;font-size:14px;line-height:20px}\n"], components: [{ type: RichTextComponent, selector: "rich-text", inputs: ["richText"] }], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: TableComponent, decorators: [{
type: Component,
args: [{ selector: 'block-table', template: "<table [ngClass]=\"{\n 'row-header': properties?.has_row_header,\n 'column-header': properties?.has_column_header\n}\">\n <tbody>\n <tr *ngFor=\"let row of data; let i = index\">\n <td *ngFor=\"let item of row.table_row?.cells || []\">\n <div class=\"table-cell-text\">\n <rich-text [richText]=\"item\"></rich-text>\n </div>\n </td>\n </tr>\n </tbody>\n</table>\n", styles: ["table{font-size:14px;border-collapse:collapse;border-spacing:0;width:100%}table.column-header tr:first-child,table.row-header tr td:first-child{background:#f7f6f3;font-weight:500}table tr td{color:inherit;fill:inherit;border:1px solid #e9e9e7;position:relative;vertical-align:top;min-width:120px;max-width:240px;min-height:32px}table tr td .table-cell-text{max-width:100%;width:100%;white-space:pre-wrap;word-break:break-word;caret-color:#37352f;padding:7px 9px;background-color:transparent;font-size:14px;line-height:20px}\n"] }]
}], propDecorators: { properties: [{
type: Input
}], data: [{
type: Input
}] } });
class ListComponent {
constructor() {
this.index = 0;
this.type = 'bulleted';
this.level = 0;
}
ngOnInit() {
switch (this.level % 3) {
case 0:
this.bullet = this.type === 'numbered' ? (this.index + 1) + '.' : '•';
break;
case 1:
this.bullet = this.type === 'numbered' ? this.alphabetic(this.index) + '.' : '◦';
break;
case 2:
this.bullet = this.type === 'numbered' ? this.romanize(this.index + 1) + '.' : '▪';
break;
}
}
alphabetic(number) {
const letters = 'abcdefghijklmnopqrstuvwxyz'.split('');
let alphabetic = '';
do {
// if it is end, or number is lower then 26
if (number < 26) {
alphabetic += letters[number];
break;
}
const letter = Math.floor(number / 26);
if (letter < 26) {
alphabetic += letters[letter - 1];
number -= letter * 26;
}
else {
return 'X';
}
} while (true);
return alphabetic;
}
romanize(number) {
const lookup = {
'm': 1000,
'cm': 900,
'd': 500,
'cd': 400,
'c': 100,
'xc': 90,
'l': 50,
'xl': 40,
'x': 10,
'ix': 9,
'v': 5,
'iv': 4,
'i': 1
};
let roman = '';
for (let i in lookup) {
const value = lookup[i];
while (number >= value) {
roman += i;
number -= value;
}
}
return roman;
}
}
ListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: ListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: ListComponent, selector: "list", inputs: { index: "index", type: "type", value: "value", level: "level" }, ngImport: i0, template: "<div class=\"bulleted-item\">\n <div class=\"bullet-wrapper\">\n <div\n class=\"bullet {{ type }}\"\n style=\"--bullet--content: '{{ bullet }}'\"\n ></div>\n </div>\n <div class=\"content-wrapper\">\n <div [style.display]=\"'flex'\">\n <div class=\"content\">\n <rich-text [richText]=\"value.rich_text\"></rich-text>\n </div>\n </div>\n </div>\n</div>\n", styles: [".bulleted-item{display:flex;align-items:flex-start;width:100%;padding-left:2px;color:inherit;fill:inherit}.bullet-wrapper{-webkit-user-select:none;user-select:none;margin-right:2px;width:24px;display:flex;align-items:center;justify-content:center;flex-grow:0;flex-shrink:0;min-height:calc(1.5em + 6px)}.bullet.bulleted{font-family:Arial;line-height:1;font-size:1.5em}.bullet:before{content:var(--bullet--content);background:transparent}.content-wrapper{flex:1 1 0px;min-width:1px;display:flex;flex-direction:column}.content{max-width:100%;width:100%;white-space:pre-wrap;word-break:break-word;caret-color:#37352f;padding:3px 2px;text-align:left}\n"], components: [{ type: RichTextComponent, selector: "rich-text", inputs: ["richText"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: ListComponent, decorators: [{
type: Component,
args: [{ selector: 'list', template: "<div class=\"bulleted-item\">\n <div class=\"bullet-wrapper\">\n <div\n class=\"bullet {{ type }}\"\n style=\"--bullet--content: '{{ bullet }}'\"\n ></div>\n </div>\n <div class=\"content-wrapper\">\n <div [style.display]=\"'flex'\">\n <div class=\"content\">\n <rich-text [richText]=\"value.rich_text\"></rich-text>\n </div>\n </div>\n </div>\n</div>\n", styles: [".bulleted-item{display:flex;align-items:flex-start;width:100%;padding-left:2px;color:inherit;fill:inherit}.bullet-wrapper{-webkit-user-select:none;user-select:none;margin-right:2px;width:24px;display:flex;align-items:center;justify-content:center;flex-grow:0;flex-shrink:0;min-height:calc(1.5em + 6px)}.bullet.bulleted{font-family:Arial;line-height:1;font-size:1.5em}.bullet:before{content:var(--bullet--content);background:transparent}.content-wrapper{flex:1 1 0px;min-width:1px;display:flex;flex-direction:column}.content{max-width:100%;width:100%;white-space:pre-wrap;word-break:break-word;caret-color:#37352f;padding:3px 2px;text-align:left}\n"] }]
}], propDecorators: { index: [{
type: Input
}], type: [{
type: Input
}], value: [{
type: Input
}], level: [{
type: Input
}] } });
class BlockComponent {
constructor() {
this.headings = [];
this.level = 0;
this.BlockType = BlockType;
}
trackByFn(index, block) {
return block.id;
}
}
BlockComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: BlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
BlockComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: BlockComponent, selector: "block", inputs: { block: "block", previousBlock: "previousBlock", headings: "headings", level: "level" }, ngImport: i0, template: "<ng-container [ngSwitch]=\"block.type\">\n <div *ngSwitchCase=\"BlockType.TableOfContents\">\n <table-of-contents \n [headings]=\"headings\"\n ></table-of-contents>\n </div>\n\n <div *ngSwitchCase=\"BlockType.Heading1\">\n <heading\n [id]=\"block.id\"\n [level]=\"1\"\n [text]=\"block[block.type]?.rich_text\"\n ></heading>\n </div>\n\n <div *ngSwitchCase=\"BlockType.Heading2\">\n <heading\n [id]=\"block.id\"\n [level]=\"2\"\n [text]=\"block[block.type]?.rich_text\"\n ></heading>\n </div>\n\n <div *ngSwitchCase=\"BlockType.Heading3\">\n <heading\n [id]=\"block.id\"\n [level]=\"3\"\n [text]=\"block[block.type]?.rich_text\"\n ></heading>\n </div>\n\n <div *ngSwitchCase=\"BlockType.Paragraph\">\n <rich-text [richText]=\"block[block.type]?.rich_text\"></rich-text>\n </div>\n\n <div *ngSwitchCase=\"BlockType.Image\">\n <asset type=\"image\" [id]=\"block.id\" [value]=\"block[block.type]\"></asset>\n </div>\n\n <div *ngSwitchCase=\"BlockType.Table\">\n <block-table\n [properties]=\"block[block.type]\"\n [data]=\"block['blocks'] || []\"\n ></block-table>\n </div>\n\n <div *ngSwitchCase=\"BlockType.NumberedListItem\">\n <list\n type=\"numbered\"\n [index]=\"block.index\"\n [level]=\"level\"\n [value]=\"block[block.type]\"\n ></list>\n </div>\n\n <div *ngSwitchCase=\"BlockType.BulletedListItem\">\n <list\n type=\"bulleted\"\n [index]=\"block.index\"\n [level]=\"level\"\n [value]=\"block[block.type]\"\n ></list>\n </div>\n</ng-container>\n\n<div *ngIf=\"block.has_children && block.blocks.length\" class=\"children level-{{ level + 1 }}\">\n <ng-container *ngFor=\"let child of block.blocks; let i = index; trackBy: trackByFn\">\n <block\n [class]=\"'type-' + child.type\"\n [block]=\"child\"\n [level]=\"level + 1\"\n [previousBlock]=\"i > 0 ? child.blocks[i - 1] : null\"\n ></block>\n </ng-container>\n</div>\n", styles: ["div{padding:3px 2px}.children{padding-left:24px}\n"], components: [{ type: TableOfContentsComponent, selector: "table-of-contents", inputs: ["headings"] }, { type: HeadingComponent, selector: "heading", inputs: ["id", "level", "text"] }, { type: RichTextComponent, selector: "rich-text", inputs: ["richText"] }, { type: AssetComponent, selector: "asset", inputs: ["id", "value", "type"] }, { type: TableComponent, selector: "block-table", inputs: ["properties", "data"] }, { type: ListComponent, selector: "list", inputs: ["index", "type", "value", "level"] }, { type: BlockComponent, selector: "block", inputs: ["block", "previousBlock", "headings", "level"] }], directives: [{ type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: BlockComponent, decorators: [{
type: Component,
args: [{ selector: 'block', template: "<ng-container [ngSwitch]=\"block.type\">\n <div *ngSwitchCase=\"BlockType.TableOfContents\">\n <table-of-contents \n [headings]=\"headings\"\n ></table-of-contents>\n </div>\n\n <div *ngSwitchCase=\"BlockType.Heading1\">\n <heading\n [id]=\"block.id\"\n [level]=\"1\"\n [text]=\"block[block.type]?.rich_text\"\n ></heading>\n </div>\n\n <div *ngSwitchCase=\"BlockType.Heading2\">\n <heading\n [id]=\"block.id\"\n [level]=\"2\"\n [text]=\"block[block.type]?.rich_text\"\n ></heading>\n </div>\n\n <div *ngSwitchCase=\"BlockType.Heading3\">\n <heading\n [id]=\"block.id\"\n [level]=\"3\"\n [text]=\"block[block.type]?.rich_text\"\n ></heading>\n </div>\n\n <div *ngSwitchCase=\"BlockType.Paragraph\">\n <rich-text [richText]=\"block[block.type]?.rich_text\"></rich-text>\n </div>\n\n <div *ngSwitchCase=\"BlockType.Image\">\n <asset type=\"image\" [id]=\"block.id\" [value]=\"block[block.type]\"></asset>\n </div>\n\n <div *ngSwitchCase=\"BlockType.Table\">\n <block-table\n [properties]=\"block[block.type]\"\n [data]=\"block['blocks'] || []\"\n ></block-table>\n </div>\n\n <div *ngSwitchCase=\"BlockType.NumberedListItem\">\n <list\n type=\"numbered\"\n [index]=\"block.index\"\n [level]=\"level\"\n [value]=\"block[block.type]\"\n ></list>\n </div>\n\n <div *ngSwitchCase=\"BlockType.BulletedListItem\">\n <list\n type=\"bulleted\"\n [index]=\"block.index\"\n [level]=\"level\"\n [value]=\"block[block.type]\"\n ></list>\n </div>\n</ng-container>\n\n<div *ngIf=\"block.has_children && block.blocks.length\" class=\"children level-{{ level + 1 }}\">\n <ng-container *ngFor=\"let child of block.blocks; let i = index; trackBy: trackByFn\">\n <block\n [class]=\"'type-' + child.type\"\n [block]=\"child\"\n [level]=\"level + 1\"\n [previousBlock]=\"i > 0 ? child.blocks[i - 1] : null\"\n ></block>\n </ng-container>\n</div>\n", styles: ["div{padding:3px 2px}.children{padding-left:24px}\n"] }]
}], propDecorators: { block: [{
type: Input
}], previousBlock: [{
type: Input
}], headings: [{
type: Input
}], level: [{
type: Input
}] } });
class RendererComponent {
constructor(route) {
this.route = route;
this.fullPage = false;
this.hideHeader = false;
}
set page(page) {
if (page.blocks) {
page.blocks = this.normalizeBlocks(page.blocks);
}
this._page = page;
}
get page() {
return this._page;
}
ngOnInit() {
this.route.fragment.subscribe(fragment => {
this.fragment = fragment;
if (this.fragment) {
this.scrollToFragment();
}
});
}
ngAfterViewInit() {
if (this.fragment) {
this.scrollToFragment();
}
}
getHeadings() {
const headings = [];
this.page.blocks.forEach((block) => {
if (block.type === BlockType.Heading1 ||
block.type === BlockType.Heading2 ||
block.type === BlockType.Heading3) {
headings.push(block);
}
});
return headings;
}
trackByFn(index, block) {
return block.id;
}
normalizeBlocks(blocks) {
let index = 0;
for (let i = 0; i < blocks.length; i++) {
if (i > 0) {
if (blocks[i].type === blocks[i - 1].type) {
index++;
}
else {
index = 0;
}
}
blocks[i]['index'] = index;
if (blocks[i].blocks.length) {
blocks[i].blocks = this.normalizeBlocks(blocks[i].blocks);
}
}
return blocks;
}
scrollToFragment() {
try {
document.getElementById(this.fragment).scrollIntoView();
}
catch (e) { }
}
}
RendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: RendererComponent, deps: [{ token: i1$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
RendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: RendererComponent, selector: "notion-renderer", inputs: { page: "page", fullPage: "fullPage", hideHeader: "hideHeader" }, ngImport: i0, template: "<div class=\"notion\">\n <ng-container *ngFor=\"let block of page.blocks; let i = index; trackBy: trackByFn\">\n <block\n [class]=\"'type-' + block.type\"\n [block]=\"block\"\n [previousBlock]=\"i > 0 ? page.blocks[i - 1] : null\"\n [headings]=\"getHeadings()\"\n ></block>\n </ng-container>\n</div>\n", styles: [".notion{font-size:16px;line-height:1.5;color:#37352f;caret-color:#37352f;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,\"Apple Color Emoji\",Arial,sans-serif,\"Segoe UI Emoji\",Segoe UI Symbol}.notion ::ng-deep *{box-sizing:border-box;margin-block-start:0px;margin-block-end:0px}.notion ::ng-deep h1{margin-top:1.4em}.notion ::ng-deep h1:first-child{margin-top:0}.notion ::ng-deep h2{margin-top:1.1em}.notion ::ng-deep h3{margin-top:1em}.notion ::ng-deep table{margin-top:8px;margin-bottom:18px}\n"], components: [{ type: BlockComponent, selector: "block", inputs: ["block", "previousBlock", "headings", "level"] }], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: RendererComponent, decorators: [{
type: Component,
args: [{ selector: 'notion-renderer', template: "<div class=\"notion\">\n <ng-container *ngFor=\"let block of page.blocks; let i = index; trackBy: trackByFn\">\n <block\n [class]=\"'type-' + block.type\"\n [block]=\"block\"\n [previousBlock]=\"i > 0 ? page.blocks[i - 1] : null\"\n [headings]=\"getHeadings()\"\n ></block>\n </ng-container>\n</div>\n", styles: [".notion{font-size:16px;line-height:1.5;color:#37352f;caret-color:#37352f;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,\"Apple Color Emoji\",Arial,sans-serif,\"Segoe UI Emoji\",Segoe UI Symbol}.notion ::ng-deep *{box-sizing:border-box;margin-block-start:0px;margin-block-end:0px}.notion ::ng-deep h1{margin-top:1.4em}.notion ::ng-deep h1:first-child{margin-top:0}.notion ::ng-deep h2{margin-top:1.1em}.notion ::ng-deep h3{margin-top:1em}.notion ::ng-deep table{margin-top:8px;margin-bottom:18px}\n"] }]
}], ctorParameters: function () { return [{ type: i1$1.ActivatedRoute }]; }, propDecorators: { page: [{
type: Input
}], fullPage: [{
type: Input
}], hideHeader: [{
type: Input
}] } });
const components = [
AssetComponent,
AssetImageComponent,
AssetIframeComponent,
BlockComponent,
HeadingComponent,
RendererComponent,
RichTextComponent,
TableOfContentsComponent,
TableComponent,
ListComponent,
];
class NgxNotionModule {
}
NgxNotionModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: NgxNotionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
NgxNotionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: NgxNotionModule, declarations: [AssetComponent,
AssetImageComponent,
AssetIframeComponent,
BlockComponent,
HeadingComponent,
RendererComponent,
RichTextComponent,
TableOfContentsComponent,
TableComponent,
ListComponent], imports: [CommonModule,
RouterModule], exports: [AssetComponent,
AssetImageComponent,
AssetIframeComponent,
BlockComponent,
HeadingComponent,
RendererComponent,
RichTextComponent,
TableOfContentsComponent,
TableComponent,
ListComponent] });
NgxNotionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: NgxNotionModule, imports: [[
CommonModule,
RouterModule
]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: NgxNotionModule, decorators: [{
type: NgModule,
args: [{
declarations: [
...components,
],
imports: [
CommonModule,
RouterModule
],
exports: [
...components,
]
}]
}] });
/*
* Public API Surface of ngx-notion
*/
/**
* Generated bundle index. Do not edit.
*/
export { AssetComponent, AssetIframeComponent, AssetImageComponent, BlockComponent, BlockType, ColorType, HeadingComponent, ListComponent, NgxNotionModule, RendererComponent, RichTextComponent, TableComponent, TableOfContentsComponent };
//# sourceMappingURL=ngx-notion.mjs.map