ngx-notion
Version:
An Notion page renderer for Angular
84 lines • 11.8 kB
JavaScript
import { Component, Input } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "../rich-text/rich-text.component";
export 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: i1.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
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGlzdC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtbm90aW9uL3NyYy9saWIvY29tcG9uZW50cy9ibG9ja3MvbGlzdC9saXN0LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1ub3Rpb24vc3JjL2xpYi9jb21wb25lbnRzL2Jsb2Nrcy9saXN0L2xpc3QuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQVUsTUFBTSxlQUFlLENBQUM7OztBQU96RCxNQUFNLE9BQU8sYUFBYTtJQUwxQjtRQVFJLFVBQUssR0FBVyxDQUFDLENBQUM7UUFHbEIsU0FBSSxHQUE0QixVQUFVLENBQUM7UUFNM0MsVUFBSyxHQUFXLENBQUMsQ0FBQztLQXdFckI7SUFwRUcsUUFBUTtRQUNKLFFBQVEsSUFBSSxDQUFDLEtBQUssR0FBRyxDQUFDLEVBQUU7WUFDcEIsS0FBSyxDQUFDO2dCQUNGLElBQUksQ0FBQyxNQUFNLEdBQUcsSUFBSSxDQUFDLElBQUksS0FBSyxVQUFVLENBQUMsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLEtBQUssR0FBRyxDQUFDLENBQUMsR0FBRyxHQUFHLENBQUMsQ0FBQyxDQUFDLEdBQUcsQ0FBQztnQkFDdEUsTUFBTTtZQUNWLEtBQUssQ0FBQztnQkFDRixJQUFJLENBQUMsTUFBTSxHQUFHLElBQUksQ0FBQyxJQUFJLEtBQUssVUFBVSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsR0FBRyxHQUFHLENBQUMsQ0FBQyxDQUFDLEdBQUcsQ0FBQztnQkFDakYsTUFBTTtZQUNWLEtBQUssQ0FBQztnQkFDRixJQUFJLENBQUMsTUFBTSxHQUFHLElBQUksQ0FBQyxJQUFJLEtBQUssVUFBVSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxLQUFLLEdBQUcsQ0FBQyxDQUFDLEdBQUcsR0FBRyxDQUFDLENBQUMsQ0FBQyxHQUFHLENBQUM7Z0JBQ25GLE1BQU07U0FDYjtJQUNMLENBQUM7SUFFTyxVQUFVLENBQUMsTUFBYztRQUM3QixNQUFNLE9BQU8sR0FBRyw0QkFBNEIsQ0FBQyxLQUFLLENBQUMsRUFBRSxDQUFDLENBQUM7UUFDdkQsSUFBSSxVQUFVLEdBQUcsRUFBRSxDQUFDO1FBRXBCLEdBQUc7WUFDQywyQ0FBMkM7WUFDM0MsSUFBSSxNQUFNLEdBQUcsRUFBRSxFQUFFO2dCQUNiLFVBQVUsSUFBSSxPQUFPLENBQUMsTUFBTSxDQUFDLENBQUM7Z0JBQzlCLE1BQU07YUFDVDtZQUVELE1BQU0sTUFBTSxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsTUFBTSxHQUFHLEVBQUUsQ0FBQyxDQUFDO1lBRXZDLElBQUksTUFBTSxHQUFHLEVBQUUsRUFBRTtnQkFDYixVQUFVLElBQUksT0FBTyxDQUFDLE1BQU0sR0FBRyxDQUFDLENBQUMsQ0FBQztnQkFDbEMsTUFBTSxJQUFJLE1BQU0sR0FBRyxFQUFFLENBQUM7YUFDekI7aUJBQU07Z0JBQ0gsT0FBTyxHQUFHLENBQUM7YUFDZDtTQUNKLFFBQVEsSUFBSSxFQUFFO1FBRWYsT0FBTyxVQUFVLENBQUM7SUFDdEIsQ0FBQztJQUVPLFFBQVEsQ0FBQyxNQUFjO1FBQzNCLE1BQU0sTUFBTSxHQUFRO1lBQ2hCLEdBQUcsRUFBRSxJQUFJO1lBQ1QsSUFBSSxFQUFFLEdBQUc7WUFDVCxHQUFHLEVBQUUsR0FBRztZQUNSLElBQUksRUFBRSxHQUFHO1lBQ1QsR0FBRyxFQUFFLEdBQUc7WUFDUixJQUFJLEVBQUUsRUFBRTtZQUNSLEdBQUcsRUFBRSxFQUFFO1lBQ1AsSUFBSSxFQUFFLEVBQUU7WUFDUixHQUFHLEVBQUUsRUFBRTtZQUNQLElBQUksRUFBRSxDQUFDO1lBQ1AsR0FBRyxFQUFFLENBQUM7WUFDTixJQUFJLEVBQUUsQ0FBQztZQUNQLEdBQUcsRUFBRSxDQUFDO1NBQ1QsQ0FBQztRQUVGLElBQUksS0FBSyxHQUFHLEVBQUUsQ0FBQztRQUVmLEtBQUssSUFBSSxDQUFDLElBQUksTUFBTSxFQUFFO1lBQ2xCLE1BQU0sS0FBSyxHQUFXLE1BQU0sQ0FBQyxDQUFDLENBQUMsQ0FBQztZQUVoQyxPQUFPLE1BQU0sSUFBSSxLQUFLLEVBQUU7Z0JBQ3BCLEtBQUssSUFBSSxDQUFDLENBQUM7Z0JBQ1gsTUFBTSxJQUFJLEtBQUssQ0FBQzthQUNuQjtTQUNKO1FBRUQsT0FBTyxLQUFLLENBQUM7SUFDakIsQ0FBQzs7MEdBbkZRLGFBQWE7OEZBQWIsYUFBYSxzSENQMUIsc2NBZUE7MkZEUmEsYUFBYTtrQkFMekIsU0FBUzsrQkFDSSxNQUFNOzhCQU9oQixLQUFLO3NCQURKLEtBQUs7Z0JBSU4sSUFBSTtzQkFESCxLQUFLO2dCQUlOLEtBQUs7c0JBREosS0FBSztnQkFJTixLQUFLO3NCQURKLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBPbkluaXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICdsaXN0JyxcbiAgICB0ZW1wbGF0ZVVybDogJy4vbGlzdC5jb21wb25lbnQuaHRtbCcsXG4gICAgc3R5bGVVcmxzOiBbJy4vbGlzdC5jb21wb25lbnQuc2NzcyddLFxufSlcbmV4cG9ydCBjbGFzcyBMaXN0Q29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcblxuICAgIEBJbnB1dCgpXG4gICAgaW5kZXg6IG51bWJlciA9IDA7XG5cbiAgICBASW5wdXQoKVxuICAgIHR5cGU6ICdudW1iZXJlZCcgfCAnYnVsbGV0ZWQnID0gJ2J1bGxldGVkJztcblxuICAgIEBJbnB1dCgpXG4gICAgdmFsdWUhOiBhbnk7XG5cbiAgICBASW5wdXQoKVxuICAgIGxldmVsOiBudW1iZXIgPSAwO1xuXG4gICAgYnVsbGV0ITogc3RyaW5nO1xuXG4gICAgbmdPbkluaXQoKTogdm9pZCB7XG4gICAgICAgIHN3aXRjaCAodGhpcy5sZXZlbCAlIDMpIHtcbiAgICAgICAgICAgIGNhc2UgMDpcbiAgICAgICAgICAgICAgICB0aGlzLmJ1bGxldCA9IHRoaXMudHlwZSA9PT0gJ251bWJlcmVkJyA/ICh0aGlzLmluZGV4ICsgMSkgKyAnLicgOiAn4oCiJztcbiAgICAgICAgICAgICAgICBicmVhaztcbiAgICAgICAgICAgIGNhc2UgMTpcbiAgICAgICAgICAgICAgICB0aGlzLmJ1bGxldCA9IHRoaXMudHlwZSA9PT0gJ251bWJlcmVkJyA/IHRoaXMuYWxwaGFiZXRpYyh0aGlzLmluZGV4KSArICcuJyA6ICfil6YnO1xuICAgICAgICAgICAgICAgIGJyZWFrO1xuICAgICAgICAgICAgY2FzZSAyOlxuICAgICAgICAgICAgICAgIHRoaXMuYnVsbGV0ID0gdGhpcy50eXBlID09PSAnbnVtYmVyZWQnID8gdGhpcy5yb21hbml6ZSh0aGlzLmluZGV4ICsgMSkgKyAnLicgOiAn4paqJztcbiAgICAgICAgICAgICAgICBicmVhaztcbiAgICAgICAgfVxuICAgIH1cblxuICAgIHByaXZhdGUgYWxwaGFiZXRpYyhudW1iZXI6IG51bWJlcik6IHN0cmluZyB7XG4gICAgICAgIGNvbnN0IGxldHRlcnMgPSAnYWJjZGVmZ2hpamtsbW5vcHFyc3R1dnd4eXonLnNwbGl0KCcnKTtcbiAgICAgICAgbGV0IGFscGhhYmV0aWMgPSAnJztcbiAgICAgICAgXG4gICAgICAgIGRvIHtcbiAgICAgICAgICAgIC8vIGlmIGl0IGlzIGVuZCwgb3IgbnVtYmVyIGlzIGxvd2VyIHRoZW4gMjZcbiAgICAgICAgICAgIGlmIChudW1iZXIgPCAyNikge1xuICAgICAgICAgICAgICAgIGFscGhhYmV0aWMgKz0gbGV0dGVyc1tudW1iZXJdO1xuICAgICAgICAgICAgICAgIGJyZWFrO1xuICAgICAgICAgICAgfVxuXG4gICAgICAgICAgICBjb25zdCBsZXR0ZXIgPSBNYXRoLmZsb29yKG51bWJlciAvIDI2KTtcblxuICAgICAgICAgICAgaWYgKGxldHRlciA8IDI2KSB7XG4gICAgICAgICAgICAgICAgYWxwaGFiZXRpYyArPSBsZXR0ZXJzW2xldHRlciAtIDFdO1xuICAgICAgICAgICAgICAgIG51bWJlciAtPSBsZXR0ZXIgKiAyNjtcbiAgICAgICAgICAgIH0gZWxzZSB7XG4gICAgICAgICAgICAgICAgcmV0dXJuICdYJztcbiAgICAgICAgICAgIH1cbiAgICAgICAgfSB3aGlsZSAodHJ1ZSk7XG5cbiAgICAgICAgcmV0dXJuIGFscGhhYmV0aWM7XG4gICAgfVxuXG4gICAgcHJpdmF0ZSByb21hbml6ZShudW1iZXI6IG51bWJlcik6IHN0cmluZyB7XG4gICAgICAgIGNvbnN0IGxvb2t1cDogYW55ID0ge1xuICAgICAgICAgICAgJ20nOiAxMDAwLFxuICAgICAgICAgICAgJ2NtJzogOTAwLFxuICAgICAgICAgICAgJ2QnOiA1MDAsXG4gICAgICAgICAgICAnY2QnOiA0MDAsXG4gICAgICAgICAgICAnYyc6IDEwMCxcbiAgICAgICAgICAgICd4Yyc6IDkwLFxuICAgICAgICAgICAgJ2wnOiA1MCxcbiAgICAgICAgICAgICd4bCc6IDQwLFxuICAgICAgICAgICAgJ3gnOiAxMCxcbiAgICAgICAgICAgICdpeCc6IDksXG4gICAgICAgICAgICAndic6IDUsXG4gICAgICAgICAgICAnaXYnOiA0LFxuICAgICAgICAgICAgJ2knOiAxXG4gICAgICAgIH07XG5cbiAgICAgICAgbGV0IHJvbWFuID0gJyc7XG5cbiAgICAgICAgZm9yIChsZXQgaSBpbiBsb29rdXApIHtcbiAgICAgICAgICAgIGNvbnN0IHZhbHVlOiBudW1iZXIgPSBsb29rdXBbaV07XG4gICAgICAgICAgICBcbiAgICAgICAgICAgIHdoaWxlIChudW1iZXIgPj0gdmFsdWUpIHtcbiAgICAgICAgICAgICAgICByb21hbiArPSBpO1xuICAgICAgICAgICAgICAgIG51bWJlciAtPSB2YWx1ZTtcbiAgICAgICAgICAgIH1cbiAgICAgICAgfVxuXG4gICAgICAgIHJldHVybiByb21hbjtcbiAgICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwiYnVsbGV0ZWQtaXRlbVwiPlxuICAgIDxkaXYgY2xhc3M9XCJidWxsZXQtd3JhcHBlclwiPlxuICAgICAgICA8ZGl2XG4gICAgICAgICAgICBjbGFzcz1cImJ1bGxldCB7eyB0eXBlIH19XCJcbiAgICAgICAgICAgIHN0eWxlPVwiLS1idWxsZXQtLWNvbnRlbnQ6ICd7eyBidWxsZXQgfX0nXCJcbiAgICAgICAgPjwvZGl2PlxuICAgIDwvZGl2PlxuICAgIDxkaXYgY2xhc3M9XCJjb250ZW50LXdyYXBwZXJcIj5cbiAgICAgICAgPGRpdiBbc3R5bGUuZGlzcGxheV09XCInZmxleCdcIj5cbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJjb250ZW50XCI+XG4gICAgICAgICAgICAgICAgPHJpY2gtdGV4dCBbcmljaFRleHRdPVwidmFsdWUucmljaF90ZXh0XCI+PC9yaWNoLXRleHQ+XG4gICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG48L2Rpdj5cbiJdfQ==