🎨 Pattern: What is the correct file structure and separation of concern...

Date: 2026-03-26
Time: 15:29:52 UTC
Session: gspace1-271.8
Agent: angular
Confidence: 95%
Status: ✅ Documented

📋 Decision Context

Question:

What is the correct file structure and separation of concerns for Angular Element widgets following the global engineering standard?

Task: Not specified

🎯 Decision Made

Chosen:

Each widget: component.ts (template inline, under 200 lines), styles.ts (extracted CSS string constant), models in shared models/ directory, utilities in shared utils/. Sub-components for complex widgets (kanban-board-view, kanban-list-view). Inline templates required because esbuild cannot resolve Angular templateUrl. Styles extracted to .styles.ts files (not inline in @Component) for readability while still being importable by esbuild.

Options Considered:

• No alternatives documented

💭 Reasoning

The global engineering standard requires files under 200 lines, separated concerns, models in models/ directory. Angular Elements compiled by esbuild cannot use templateUrl/styleUrl (esbuild doesn't understand Angular's resource inlining). So templates must be inline, but styles can be extracted to .styles.ts files exporting string constants — esbuild bundles these normally. Sub-components (kanban-board-view, kanban-list-view) are internal Angular components, NOT registered as Custom Elements — they help keep the main widget under 200 lines while using Angular's imports[] for composition.

📁 Files Involved

• libs/libs-structural/platform-elements-angular/src/lib/components/kanban-widget/kanban-widget.styles.ts
• libs/libs-structural/platform-elements-angular/src/lib/components/kanban-widget/kanban-board-view.component.ts
• libs/libs-structural/platform-elements-angular/src/lib/models/kanban.models.ts

🔗 Related

• Decision ID: dev_1774538992584_tu6qxwf
• Session: 271
• Workspace: gspace1

Auto-generated by MCP Smart Consolidation