{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "matrix-swot-analysis", "title": "Matrix Swot Analysis", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/matrix-swot-analysis/matrix-swot-analysis.component.ts", "content": "// Strategic planning 2x2 SWOT analysis matrix (Strengths, Weaknesses, Opportunities,\n// Threats) with dynamic card management, quadrant counters, TOWS strategic initiatives,\n// and PDF/share toolbar. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, computed, signal } from '@angular/core'\nimport {\n AlertTriangle,\n Calendar,\n Check,\n Clock,\n Download,\n Layers,\n LucideAngularModule,\n Plus,\n Share2,\n ShieldAlert,\n ShieldCheck,\n Trash2,\n TrendingUp,\n Zap,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardFooterComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport { UiInputComponent } from '@/ui/input/input.component'\n\nexport interface SwotItem {\n id: string\n title: string\n description: string\n impact: 'high' | 'medium' | 'low'\n tag: string\n}\n\nexport interface StrategicInitiative {\n id: string\n title: string\n description: string\n strategyType: 'SO' | 'WO' | 'ST' | 'WT'\n strategyLabel: string\n priority: 'Critical' | 'High' | 'Strategic'\n timeframe: string\n targetMetric: string\n}\n\nconst defaultStrengths: SwotItem[] = [\n {\n id: 's-1',\n title: 'Zero npm dependency overhead',\n description:\n 'Components are copied directly into consumer project codebases, eliminating semver dependency locks, version skew, and transitive package bloat.',\n impact: 'high',\n tag: 'Core Architecture',\n },\n {\n id: 's-2',\n title: '100% code ownership for consumers',\n description:\n 'Engineering teams retain complete control over markup, styles, accessibility props, and internal behaviors with zero upstream constraints.',\n impact: 'high',\n tag: 'Developer Autonomy',\n },\n {\n id: 's-3',\n title: 'Dual-framework Vue & React parity',\n description:\n 'Strict visual, token, and functional symmetry between Vue 3 (Reka UI) and React (Radix UI) enables cross-stack design system alignment.',\n impact: 'high',\n tag: 'Market Breadth',\n },\n {\n id: 's-4',\n title: 'Tailwind v4 OKLCH token architecture',\n description:\n 'CSS-first theme configuration using semantic surface variables, calibrated dark-mode layering, and WCAG AA compliant contrast ratios.',\n impact: 'medium',\n tag: 'Design System',\n },\n]\n\nconst defaultWeaknesses: SwotItem[] = [\n {\n id: 'w-1',\n title: 'Manual upgrade path without semver',\n description:\n 'Consuming codebases must manually pull code diffs or re-execute CLI add commands when library enhancements or bug fixes are published.',\n impact: 'high',\n tag: 'Maintenance Model',\n },\n {\n id: 'w-2',\n title: 'Initial learning curve for monorepos',\n description:\n 'Junior developers accustomed to single-command npm package installs may face an initial cognitive hurdle managing raw unbundled components.',\n impact: 'medium',\n tag: 'Developer DX',\n },\n {\n id: 'w-3',\n title: 'Build time for 1,300+ SSG pages',\n description:\n 'Synthesizing static island previews, AST code extraction, and multi-format LLM documentation across dual registries requires high memory in CI.',\n impact: 'medium',\n tag: 'Tooling Scale',\n },\n]\n\nconst defaultOpportunities: SwotItem[] = [\n {\n id: 'o-1',\n title: 'AI Copilot workflows demanding raw source code',\n description:\n 'LLM coding assistants (Claude, Cursor, Copilot) perform substantially better when refactoring transparent local SFCs than navigating opaque compiled dependencies.',\n impact: 'high',\n tag: 'AI Ergonomics',\n },\n {\n id: 'o-2',\n title: 'Enterprise design system white-labeling',\n description:\n 'B2B organizations seeking unbranded, custom-styled design systems can adopt UIPKGE as their modular, open-source architectural baseline.',\n impact: 'high',\n tag: 'Enterprise B2B',\n },\n {\n id: 'o-3',\n title: 'E-Commerce and Healthcare template verticals',\n description:\n 'Surging industry appetite for pre-built reference architectures (HRMS, Hospital Management, Logistics tracking) powered by composable blocks.',\n impact: 'high',\n tag: 'Vertical Growth',\n },\n {\n id: 'o-4',\n title: 'Community contributions of domain blocks',\n description:\n 'Open-source contributors can rapidly publish specialized workflow blocks (radar charts, KYC wizards, audit logs) without semver packaging bottlenecks.',\n impact: 'medium',\n tag: 'Community',\n },\n]\n\nconst defaultThreats: SwotItem[] = [\n {\n id: 't-1',\n title: 'Official shadcn expanding into Vue ecosystem',\n description:\n 'Potential first-party Vue support by upstream shadcn could consolidate developer attention away from independent unbundled registries.',\n impact: 'high',\n tag: 'Competitive Risk',\n },\n {\n id: 't-2',\n title: 'Upstream Reka UI headless breaking changes',\n description:\n 'Substantial architectural shifts or breaking release cycles in upstream headless libraries require immediate parity synchronization.',\n impact: 'high',\n tag: 'Upstream Drift',\n },\n {\n id: 't-3',\n title: 'Browser CSS specification shifts',\n description:\n 'Rapid evolution in CSS @scope, anchor positioning, and native light-dark() CSS functions may require recurring baseline refactoring.',\n impact: 'medium',\n tag: 'Web Standards',\n },\n]\n\nconst defaultInitiatives: StrategicInitiative[] = [\n {\n id: 'init-1',\n title: 'Automate Upstream Sync & Breaking Change Detection',\n description:\n 'Implement automated CI regression monitoring against Reka UI and upstream shadcn tokens to maintain 100% runtime compatibility without breaking consumer projects.',\n strategyType: 'SO',\n strategyLabel: 'SO Strategy (Strengths × Opportunities)',\n priority: 'Critical',\n timeframe: 'Q4 2026',\n targetMetric: '< 24h Upstream Parity Turnaround',\n },\n {\n id: 'init-2',\n title: 'AI-Native Context & CLI Smart Upgrade Engine',\n description:\n 'Ship an intelligent CLI diff command and fine-tuned llms.txt vector context to let AI coding agents auto-patch and upgrade local consumer components directly.',\n strategyType: 'WO',\n strategyLabel: 'WO Strategy (Weaknesses × Opportunities)',\n priority: 'High',\n timeframe: 'Q4 2026',\n targetMetric: 'Zero-Friction AST Upgrade Patches',\n },\n {\n id: 'init-3',\n title: 'Curated Vertical Template Packs & Enterprise Baseline',\n description:\n 'Deliver production-grade Nuxt 4 and Next.js vertical boilerplate templates (HRMS, HMS, Logistics) to eliminate monorepo onboarding friction for enterprise builders.',\n strategyType: 'ST',\n strategyLabel: 'ST Strategy (Strengths × Threats)',\n priority: 'Strategic',\n timeframe: 'Q1 2027',\n targetMetric: '4 Turnkey Vertical Reference Apps',\n },\n]\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-matrix-swot-analysis, [ui-matrix-swot-analysis]',\n standalone: true,\n // React renders the root
itself: the host stays out of layout and `class` goes to the root.\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardFooterComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiInputComponent,\n ],\n template: `\n
\n \n \n
\n
\n

{{ titleText() }}

\n \n 2×2 TOWS Matrix\n \n {{ totalCards() }} Strategic Factors \n
\n\n
\n
\n \n {{ projectText() }}\n
\n ·\n
\n \n Updated {{ lastUpdatedText() }}\n
\n
\n
\n\n \n
\n \n @if (!isExporting()) {\n \n } @else {\n \n }\n {{ isExporting() ? 'Generating PDF...' : 'Export Canvas PDF' }}\n \n\n \n
\n
\n\n \n
\n \n
\n \n Internal Attributes\n
\n Helpful (+)\n
\n\n \n
\n \n Internal Attributes\n
\n Harmful (−)\n
\n\n \n
\n \n External Dynamics\n
\n Helpful (+)\n \n\n \n
\n \n External Dynamics\n
\n \n Harmful (−)\n \n \n \n\n \n
\n \n
\n
\n
\n
\n \n \n
\n
\n
\n

Strengths

\n \n {{ strengths().length }}\n \n
\n

Internal attributes & distinct technical capabilities

\n
\n
\n
\n \n Positive \n
\n
\n
\n\n
\n @for (item of strengths(); track item.id) {\n \n
\n
\n
\n

{{ item.title }}

\n \n {{ item.tag }}\n \n
\n

{{ item.description }}

\n
\n @if (!isReadonly()) {\n \n \n \n }\n
\n
\n }\n @if (strengths().length === 0) {\n
\n No strength items listed. Add a core advantage below.\n
\n }\n
\n\n @if (!isReadonly()) {\n
\n
\n \n \n \n Add\n \n \n
\n }\n \n\n \n
\n
\n
\n
\n \n \n
\n
\n
\n

Weaknesses

\n \n {{ weaknesses().length }}\n \n
\n

Internal limitations & operational friction points

\n
\n
\n
\n
\n
\n
\n\n
\n @for (item of weaknesses(); track item.id) {\n \n
\n
\n
\n

{{ item.title }}

\n \n {{ item.tag }}\n \n
\n

{{ item.description }}

\n
\n @if (!isReadonly()) {\n \n \n \n }\n
\n
\n }\n @if (weaknesses().length === 0) {\n
\n No weakness items listed. Add an area for improvement below.\n
\n }\n \n\n @if (!isReadonly()) {\n
\n
\n \n \n \n Add\n \n \n
\n }\n \n\n \n
\n
\n
\n
\n \n \n
\n
\n
\n

Opportunities

\n \n {{ opportunities().length }}\n \n
\n

External tailwinds & strategic expansion opportunities

\n
\n
\n
\n \n Positive \n
\n
\n
\n\n
\n @for (item of opportunities(); track item.id) {\n \n
\n
\n
\n

{{ item.title }}

\n \n {{ item.tag }}\n \n
\n

{{ item.description }}

\n
\n @if (!isReadonly()) {\n \n \n \n }\n
\n
\n }\n @if (opportunities().length === 0) {\n
\n No opportunity items listed. Add a market growth vector below.\n
\n }\n \n\n @if (!isReadonly()) {\n
\n
\n \n \n \n Add\n \n \n
\n }\n \n\n \n
\n
\n
\n
\n \n \n
\n
\n
\n

Threats

\n \n {{ threats().length }}\n \n
\n

External risks, competitive forces & ecosystem shifts

\n
\n
\n
\n \n Negative \n
\n
\n
\n\n
\n @for (item of threats(); track item.id) {\n \n
\n
\n
\n

{{ item.title }}

\n \n {{ item.tag }}\n \n
\n

{{ item.description }}

\n
\n @if (!isReadonly()) {\n \n \n \n }\n
\n
\n }\n @if (threats().length === 0) {\n
\n No threat items listed. Add an external risk factor below.\n
\n }\n \n\n @if (!isReadonly()) {\n
\n
\n \n \n \n Add\n \n \n
\n }\n \n \n\n \n
\n
\n
\n
\n
\n \n

Strategic Synthesis & Key Next Actions

\n
\n

\n Actionable strategic initiatives bridging internal capabilities with external market dynamics (TOWS\n matrix formulation).\n

\n
\n \n {{ strategicInitiatives().length }} Active Initiatives\n \n
\n
\n\n
\n
\n @for (initiative of strategicInitiatives(); track initiative.id) {\n \n
\n
\n \n {{ initiative.strategyType }} Strategy\n \n \n {{ initiative.priority }}\n \n
\n
\n

{{ initiative.title }}

\n

{{ initiative.description }}

\n
\n
\n
\n
\n \n {{ initiative.timeframe }}\n
\n \n {{ initiative.targetMetric }}\n \n
\n
\n }\n
\n
\n \n \n `,\n})\nexport class UiMatrixSwotAnalysisComponent {\n protected readonly AlertTriangle = AlertTriangle\n protected readonly Calendar = Calendar\n protected readonly Check = Check\n protected readonly Clock = Clock\n protected readonly Download = Download\n protected readonly Layers = Layers\n protected readonly Plus = Plus\n protected readonly Share2 = Share2\n protected readonly ShieldAlert = ShieldAlert\n protected readonly ShieldCheck = ShieldCheck\n protected readonly Trash2 = Trash2\n protected readonly TrendingUp = TrendingUp\n protected readonly Zap = Zap\n\n @Input() set title(v: string | undefined) {\n this.titleText.set(v ?? 'SWOT Strategic Analysis Canvas')\n }\n @Input() set project(v: string | undefined) {\n this.projectText.set(v ?? 'UIPKGE Unbundled UI Registry Strategy · Q3 2026')\n }\n @Input() set lastUpdated(v: string | undefined) {\n this.lastUpdatedText.set(v ?? 'Aug 21, 2026')\n }\n @Input() set initialStrengths(v: SwotItem[] | undefined) {\n if (v) this.strengths.set([...v])\n }\n @Input() set initialWeaknesses(v: SwotItem[] | undefined) {\n if (v) this.weaknesses.set([...v])\n }\n @Input() set initialOpportunities(v: SwotItem[] | undefined) {\n if (v) this.opportunities.set([...v])\n }\n @Input() set initialThreats(v: SwotItem[] | undefined) {\n if (v) this.threats.set([...v])\n }\n @Input() set initiatives(v: StrategicInitiative[] | undefined) {\n if (v) this.strategicInitiatives.set([...v])\n }\n @Input() set readonly(v: boolean) {\n this.isReadonly.set(!!v)\n }\n @Input('class') className?: string\n\n readonly titleText = signal('SWOT Strategic Analysis Canvas')\n readonly projectText = signal('UIPKGE Unbundled UI Registry Strategy · Q3 2026')\n readonly lastUpdatedText = signal('Aug 21, 2026')\n readonly isReadonly = signal(false)\n\n readonly strengths = signal([...defaultStrengths])\n readonly weaknesses = signal([...defaultWeaknesses])\n readonly opportunities = signal([...defaultOpportunities])\n readonly threats = signal([...defaultThreats])\n readonly strategicInitiatives = signal([...defaultInitiatives])\n\n readonly inputStrength = signal('')\n readonly inputWeakness = signal('')\n readonly inputOpportunity = signal('')\n readonly inputThreat = signal('')\n\n readonly isCopied = signal(false)\n readonly isExporting = signal(false)\n\n readonly totalCards = computed(\n () => this.strengths().length + this.weaknesses().length + this.opportunities().length + this.threats().length,\n )\n\n get rootClass(): string {\n return cn('w-full space-y-6', this.className)\n }\n\n strategyBadgeClass(t: StrategicInitiative['strategyType']): string {\n return cn(\n 'text-xs font-semibold',\n t === 'SO' && 'border-success/20 bg-success/10 text-success',\n t === 'WO' && 'border-info/20 bg-info/10 text-info',\n t === 'ST' && 'border-warning/20 bg-warning/10 text-warning',\n t === 'WT' && 'border-destructive/20 bg-destructive/10 text-destructive',\n )\n }\n\n addStrength(e?: Event): void {\n e?.preventDefault()\n const text = this.inputStrength().trim()\n if (!text) return\n this.strengths.update((prev) => [\n ...prev,\n {\n id: `s-${Date.now()}`,\n title: text,\n description: 'Custom strategic strength added during canvas session.',\n impact: 'high',\n tag: 'Internal Strategic Advantage',\n },\n ])\n this.inputStrength.set('')\n }\n\n removeStrength(id: string): void {\n this.strengths.update((prev) => prev.filter((item) => item.id !== id))\n }\n\n addWeakness(e?: Event): void {\n e?.preventDefault()\n const text = this.inputWeakness().trim()\n if (!text) return\n this.weaknesses.update((prev) => [\n ...prev,\n {\n id: `w-${Date.now()}`,\n title: text,\n description: 'Custom strategic vulnerability identified for remediation.',\n impact: 'medium',\n tag: 'Internal Remediation',\n },\n ])\n this.inputWeakness.set('')\n }\n\n removeWeakness(id: string): void {\n this.weaknesses.update((prev) => prev.filter((item) => item.id !== id))\n }\n\n addOpportunity(e?: Event): void {\n e?.preventDefault()\n const text = this.inputOpportunity().trim()\n if (!text) return\n this.opportunities.update((prev) => [\n ...prev,\n {\n id: `o-${Date.now()}`,\n title: text,\n description: 'External market dynamic or technological growth tailwind.',\n impact: 'high',\n tag: 'External Opportunity',\n },\n ])\n this.inputOpportunity.set('')\n }\n\n removeOpportunity(id: string): void {\n this.opportunities.update((prev) => prev.filter((item) => item.id !== id))\n }\n\n addThreat(e?: Event): void {\n e?.preventDefault()\n const text = this.inputThreat().trim()\n if (!text) return\n this.threats.update((prev) => [\n ...prev,\n {\n id: `t-${Date.now()}`,\n title: text,\n description: 'External industry risk factor requiring proactive defensive mitigation.',\n impact: 'high',\n tag: 'External Threat',\n },\n ])\n this.inputThreat.set('')\n }\n\n removeThreat(id: string): void {\n this.threats.update((prev) => prev.filter((item) => item.id !== id))\n }\n\n handleShare(): void {\n if (typeof navigator !== 'undefined' && navigator.clipboard) {\n navigator.clipboard.writeText(window.location.href)\n this.isCopied.set(true)\n setTimeout(() => this.isCopied.set(false), 2000)\n }\n }\n\n handleExportPdf(): void {\n this.isExporting.set(true)\n setTimeout(() => this.isExporting.set(false), 1500)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/matrix-swot-analysis/matrix-swot-analysis.component.ts" }, { "path": "packages/registry-angular/blocks/matrix-swot-analysis/index.ts", "content": "export {\n UiMatrixSwotAnalysisComponent,\n type SwotItem,\n type StrategicInitiative,\n} from './matrix-swot-analysis.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/matrix-swot-analysis/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json", "https://uipkge.dev/r/angular/input.json" ], "description": "Strategic planning 2x2 SWOT analysis matrix (Strengths, Weaknesses, Opportunities, Threats) with dynamic card management, quadrant counters, TOWS strategic initiatives, and PDF/share toolbar.", "categories": [ "productivity", "dashboard", "app", "data" ] }