ngx-notion
Version:
An Notion page renderer for Angular
35 lines • 12.1 kB
JavaScript
import { Component, Input } from '@angular/core';
import { BlockType } from '../../../types/block.type';
import * as i0 from "@angular/core";
import * as i1 from "../table-of-contents/table-of-contents.component";
import * as i2 from "../heading/heading.component";
import * as i3 from "../rich-text/rich-text.component";
import * as i4 from "../asset/asset.component";
import * as i5 from "../table/table.component";
import * as i6 from "../list/list.component";
import * as i7 from "@angular/common";
export 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: i1.TableOfContentsComponent, selector: "table-of-contents", inputs: ["headings"] }, { type: i2.HeadingComponent, selector: "heading", inputs: ["id", "level", "text"] }, { type: i3.RichTextComponent, selector: "rich-text", inputs: ["richText"] }, { type: i4.AssetComponent, selector: "asset", inputs: ["id", "value", "type"] }, { type: i5.TableComponent, selector: "block-table", inputs: ["properties", "data"] }, { type: i6.ListComponent, selector: "list", inputs: ["index", "type", "value", "level"] }, { type: BlockComponent, selector: "block", inputs: ["block", "previousBlock", "headings", "level"] }], directives: [{ type: i7.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i7.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.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
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmxvY2suY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LW5vdGlvbi9zcmMvbGliL2NvbXBvbmVudHMvYmxvY2tzL2Jsb2NrL2Jsb2NrLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1ub3Rpb24vc3JjL2xpYi9jb21wb25lbnRzL2Jsb2Nrcy9ibG9jay9ibG9jay5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNqRCxPQUFPLEVBQVMsU0FBUyxFQUFFLE1BQU0sMkJBQTJCLENBQUM7Ozs7Ozs7OztBQU83RCxNQUFNLE9BQU8sY0FBYztJQUwzQjtRQWFJLGFBQVEsR0FBVSxFQUFFLENBQUM7UUFHckIsVUFBSyxHQUFXLENBQUMsQ0FBQztRQUVsQixjQUFTLEdBQUcsU0FBUyxDQUFDO0tBS3pCO0lBSEcsU0FBUyxDQUFDLEtBQWEsRUFBRSxLQUFZO1FBQ2pDLE9BQU8sS0FBSyxDQUFDLEVBQUUsQ0FBQztJQUNwQixDQUFDOzsyR0FqQlEsY0FBYzsrRkFBZCxjQUFjLCtJQ1IzQixvdUVBMkVBLHVsQkRuRWEsY0FBYzsyRkFBZCxjQUFjO2tCQUwxQixTQUFTOytCQUNJLE9BQU87OEJBTWpCLEtBQUs7c0JBREosS0FBSztnQkFJTixhQUFhO3NCQURaLEtBQUs7Z0JBSU4sUUFBUTtzQkFEUCxLQUFLO2dCQUlOLEtBQUs7c0JBREosS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEJsb2NrLCBCbG9ja1R5cGUgfSBmcm9tICcuLi8uLi8uLi90eXBlcy9ibG9jay50eXBlJztcblxuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICdibG9jaycsXG4gICAgdGVtcGxhdGVVcmw6ICcuL2Jsb2NrLmNvbXBvbmVudC5odG1sJyxcbiAgICBzdHlsZVVybHM6IFsnLi9ibG9jay5jb21wb25lbnQuc2NzcyddLFxufSlcbmV4cG9ydCBjbGFzcyBCbG9ja0NvbXBvbmVudCB7XG4gICAgQElucHV0KClcbiAgICBibG9jayE6IEJsb2NrO1xuXG4gICAgQElucHV0KClcbiAgICBwcmV2aW91c0Jsb2NrITogQmxvY2sgfCBudWxsO1xuXG4gICAgQElucHV0KClcbiAgICBoZWFkaW5nczogYW55W10gPSBbXTtcblxuICAgIEBJbnB1dCgpXG4gICAgbGV2ZWw6IG51bWJlciA9IDA7XG5cbiAgICBCbG9ja1R5cGUgPSBCbG9ja1R5cGU7XG5cbiAgICB0cmFja0J5Rm4oaW5kZXg6IG51bWJlciwgYmxvY2s6IEJsb2NrKTogc3RyaW5nIHtcbiAgICAgICAgcmV0dXJuIGJsb2NrLmlkO1xuICAgIH1cbn1cbiIsIjxuZy1jb250YWluZXIgW25nU3dpdGNoXT1cImJsb2NrLnR5cGVcIj5cbiAgICA8ZGl2ICpuZ1N3aXRjaENhc2U9XCJCbG9ja1R5cGUuVGFibGVPZkNvbnRlbnRzXCI+XG4gICAgICAgIDx0YWJsZS1vZi1jb250ZW50cyBcbiAgICAgICAgICAgIFtoZWFkaW5nc109XCJoZWFkaW5nc1wiXG4gICAgICAgID48L3RhYmxlLW9mLWNvbnRlbnRzPlxuICAgIDwvZGl2PlxuXG4gICAgPGRpdiAqbmdTd2l0Y2hDYXNlPVwiQmxvY2tUeXBlLkhlYWRpbmcxXCI+XG4gICAgICAgIDxoZWFkaW5nXG4gICAgICAgICAgICBbaWRdPVwiYmxvY2suaWRcIlxuICAgICAgICAgICAgW2xldmVsXT1cIjFcIlxuICAgICAgICAgICAgW3RleHRdPVwiYmxvY2tbYmxvY2sudHlwZV0/LnJpY2hfdGV4dFwiXG4gICAgICAgID48L2hlYWRpbmc+XG4gICAgPC9kaXY+XG5cbiAgICA8ZGl2ICpuZ1N3aXRjaENhc2U9XCJCbG9ja1R5cGUuSGVhZGluZzJcIj5cbiAgICAgICAgPGhlYWRpbmdcbiAgICAgICAgICAgIFtpZF09XCJibG9jay5pZFwiXG4gICAgICAgICAgICBbbGV2ZWxdPVwiMlwiXG4gICAgICAgICAgICBbdGV4dF09XCJibG9ja1tibG9jay50eXBlXT8ucmljaF90ZXh0XCJcbiAgICAgICAgPjwvaGVhZGluZz5cbiAgICA8L2Rpdj5cblxuICAgIDxkaXYgKm5nU3dpdGNoQ2FzZT1cIkJsb2NrVHlwZS5IZWFkaW5nM1wiPlxuICAgICAgICA8aGVhZGluZ1xuICAgICAgICAgICAgW2lkXT1cImJsb2NrLmlkXCJcbiAgICAgICAgICAgIFtsZXZlbF09XCIzXCJcbiAgICAgICAgICAgIFt0ZXh0XT1cImJsb2NrW2Jsb2NrLnR5cGVdPy5yaWNoX3RleHRcIlxuICAgICAgICA+PC9oZWFkaW5nPlxuICAgIDwvZGl2PlxuXG4gICAgPGRpdiAqbmdTd2l0Y2hDYXNlPVwiQmxvY2tUeXBlLlBhcmFncmFwaFwiPlxuICAgICAgICA8cmljaC10ZXh0IFtyaWNoVGV4dF09XCJibG9ja1tibG9jay50eXBlXT8ucmljaF90ZXh0XCI+PC9yaWNoLXRleHQ+XG4gICAgPC9kaXY+XG5cbiAgICA8ZGl2ICpuZ1N3aXRjaENhc2U9XCJCbG9ja1R5cGUuSW1hZ2VcIj5cbiAgICAgICAgPGFzc2V0IHR5cGU9XCJpbWFnZVwiIFtpZF09XCJibG9jay5pZFwiIFt2YWx1ZV09XCJibG9ja1tibG9jay50eXBlXVwiPjwvYXNzZXQ+XG4gICAgPC9kaXY+XG5cbiAgICA8ZGl2ICpuZ1N3aXRjaENhc2U9XCJCbG9ja1R5cGUuVGFibGVcIj5cbiAgICAgICAgPGJsb2NrLXRhYmxlXG4gICAgICAgICAgICBbcHJvcGVydGllc109XCJibG9ja1tibG9jay50eXBlXVwiXG4gICAgICAgICAgICBbZGF0YV09XCJibG9ja1snYmxvY2tzJ10gfHwgW11cIlxuICAgICAgICA+PC9ibG9jay10YWJsZT5cbiAgICA8L2Rpdj5cblxuICAgIDxkaXYgKm5nU3dpdGNoQ2FzZT1cIkJsb2NrVHlwZS5OdW1iZXJlZExpc3RJdGVtXCI+XG4gICAgICAgIDxsaXN0XG4gICAgICAgICAgICB0eXBlPVwibnVtYmVyZWRcIlxuICAgICAgICAgICAgW2luZGV4XT1cImJsb2NrLmluZGV4XCJcbiAgICAgICAgICAgIFtsZXZlbF09XCJsZXZlbFwiXG4gICAgICAgICAgICBbdmFsdWVdPVwiYmxvY2tbYmxvY2sudHlwZV1cIlxuICAgICAgICA+PC9saXN0PlxuICAgIDwvZGl2PlxuXG4gICAgPGRpdiAqbmdTd2l0Y2hDYXNlPVwiQmxvY2tUeXBlLkJ1bGxldGVkTGlzdEl0ZW1cIj5cbiAgICAgICAgPGxpc3RcbiAgICAgICAgICAgIHR5cGU9XCJidWxsZXRlZFwiXG4gICAgICAgICAgICBbaW5kZXhdPVwiYmxvY2suaW5kZXhcIlxuICAgICAgICAgICAgW2xldmVsXT1cImxldmVsXCJcbiAgICAgICAgICAgIFt2YWx1ZV09XCJibG9ja1tibG9jay50eXBlXVwiXG4gICAgICAgID48L2xpc3Q+XG4gICAgPC9kaXY+XG48L25nLWNvbnRhaW5lcj5cblxuPGRpdiAqbmdJZj1cImJsb2NrLmhhc19jaGlsZHJlbiAmJiBibG9jay5ibG9ja3MubGVuZ3RoXCIgY2xhc3M9XCJjaGlsZHJlbiBsZXZlbC17eyBsZXZlbCArIDEgfX1cIj5cbiAgICA8bmctY29udGFpbmVyICpuZ0Zvcj1cImxldCBjaGlsZCBvZiBibG9jay5ibG9ja3M7IGxldCBpID0gaW5kZXg7IHRyYWNrQnk6IHRyYWNrQnlGblwiPlxuICAgICAgICA8YmxvY2tcbiAgICAgICAgICAgIFtjbGFzc109XCIndHlwZS0nICsgY2hpbGQudHlwZVwiXG4gICAgICAgICAgICBbYmxvY2tdPVwiY2hpbGRcIlxuICAgICAgICAgICAgW2xldmVsXT1cImxldmVsICsgMVwiXG4gICAgICAgICAgICBbcHJldmlvdXNCbG9ja109XCJpID4gMCA/IGNoaWxkLmJsb2Nrc1tpIC0gMV0gOiBudWxsXCJcbiAgICAgICAgPjwvYmxvY2s+XG4gICAgPC9uZy1jb250YWluZXI+XG48L2Rpdj5cbiJdfQ==