A sketch for a component library for Angular

wrangular.ts

// =====================================================================
// FILE: app/routes/index.route.ts

import { Component } from "@angular/core";
import { Paths } from "@remix-run/angular";
import { SidebarListStyle } from "pineappleui";

@Component({
    selector: "app-content-view",
    template: `
        <ui-navigation-view>
            <ui-list
                [selection]="selection"
                [listStyle]="listStyle"
                [frame]="{ minWidth: 100, idealWidth: 150, maxWidth: 200, maxHeight: 'infinity' }"
            >
                <a routeTo="/inbox" [tag]="0">
                    <ui-label icon="tray">Inbox</ui-label>
                </a>
                <a routeTo="/sent" [tag]="1">
                    <ui-label icon="paperplane">Sent</ui-label>
                </a>
                <a routeTo="/trash" [tag]="2">
                    <ui-label icon="trash">Trash</ui-label>
                </a>
            </ui-list>
        </ui-navigation-view>
        <ng-container *ngIf="paths[0]">
            <remix-outlet></remix-outlet>
        </ng-container>
    `
})
export class ContentView {
    @Paths() paths: string[];
    selection = new Set<number>(0);
    constructor(public listStyle: SidebarListStyle) {}
}

// =====================================================================
// FILE: app/routes/inbox.route.ts

import { Component } from "@angular/core";
import { Paths, LoaderData } from "@remix-run/angular";
import { json, LoaderArgs } from "remix";
import db from "~/data/db.server.ts";
import { InsetListStyle } from "pineappleui";

@Component({
    selector: "app-inbox",
    template: `
        <ui-navigation-view navigationTitle="Inbox">
            <ui-toolbar>
                <ui-toolbar-item [placement]="navigation">
                    <button><img icon="square.and.pencil" /></button>
                </ui-toolbar-item>
                <ui-toolbar-item [placement]="principal">
                    <button><img icon="arrowshape.turn.up.left" /></button>
                </ui-toolbar-item>
                <ui-toolbar-item [placement]="principal">
                    <button><img icon="trash" /></button>
                </ui-toolbar-item>
            </ui-toolbar>
            <ui-list [listStyle]="listStyle">
                <a
                    *ngFor="let message of data.messages"
                    routeTo="/messages/{{ message.id }}"
                    [tag]="0"
                >
                    <ui-column alignment="leading" [padding]="{ vertical: 8 }">
                        <ui-text font="headline">{{ message.from }}</ui-text>
                        <ui-text font="body">{{ message.body }}</ui-text>
                    </ui-column>
                </a>
            </ui-list>
        </ui-navigation-view>

        <ng-container *ngIf="paths[1]; then outlet; else selectAnEmail"></ng-container>

        <ng-template #outlet>
            <remix-outlet></remix-outlet>
        </ng-template>
        <ng-template #selectAnEmail>
            <ui-text [frame]="{ maxWidth: 'infinity', maxHeight: 'infinity' }">
                Select an email
            </ui-text>
        </ng-template>
    `
})
export class InboxView {
    @LoaderData<typeof loader>() data;
    @Paths() paths: string[];

    constructor(public listStyle: InsetListStyle) {}

    static async loader() {
        let messages = await db.messages.findMany();
        return json(messages);
    }
}

// =====================================================================
// FILE: app/routes/inbox/$id.route.ts

import { Component } from "@angular/core";
import { LoaderData } from "@remix-run/angular";
import { json, LoaderArgs } from "remix";
import db from "~/data/db.server.ts";
import { Theme } from "pineappleui";
import Marked from "marked";

@Component({
    selector: "app-message",
    template: `
        <ui-row
            padding
            [frame]="{ maxWidth: 'infinity', maxHeight: 'infinity' }"
            [background]="Theme.color.white"
        >
            <ui-column alignment="leading">
                <div [innerHTML]="data.message.body | sanatizeHTML"></div>
                <ui-spacer></ui-spacer>
            </ui-column>
        </ui-row>
    `
})
export class MessageView {
    @LoaderData<typeof loader>() data;

    static async loader({ params }: LoaderArgs) {
        let message = await db.messages.findUnique({
            where: { id: params.id }
        });
        message.body = Marked.parse(message.body);
        return json(message);
    }
}

// =====================================================================
// FILE: app/prisma-generated/message.d.ts

import { Identifiable } from "pineappleui";

export interface Message extends Identifiable {
    id: string;
    from: string;
    body: string;
}