{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "employee-org-chart-tree", "title": "Employee Org Chart Tree", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/employee-org-chart-tree/employee-org-chart-tree.component.ts", "content": "// Interactive organizational hierarchy tree with manager reporting lines, team counts, multi-level\n// expandable branches, department filter pills, employee search, and an employee profile quick info\n// drawer. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, computed, signal } from '@angular/core'\nimport {\n ArrowRight,\n Briefcase,\n Building2,\n Calendar,\n Check,\n ChevronDown,\n ChevronRight,\n Copy,\n Mail,\n MapPin,\n Minus,\n Plus,\n RotateCcw,\n Search,\n User,\n Users,\n X,\n ZoomIn,\n ZoomOut,\n LucideAngularModule,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiAvatarComponent, UiAvatarFallbackComponent, UiAvatarImageComponent } from '@/ui/avatar/avatar.component'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiInputComponent } from '@/ui/input/input.component'\nimport { DEFAULT_ORG_DATA } from './org-chart-data'\nimport { getDeptBadgeClasses, getDeptTopStripClasses, type EmployeeNode } from './org-chart-types'\n\nexport type { EmployeeNode }\n\nfunction flatten(node: EmployeeNode): EmployeeNode[] {\n const result: EmployeeNode[] = [node]\n if (node.children) {\n for (const child of node.children) result.push(...flatten(child))\n }\n return result\n}\n\nexport interface DepartmentCount {\n label: string\n value: string\n count: number\n}\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-org-chart-node-card',\n standalone: true,\n imports: [\n LucideAngularModule,\n UiAvatarComponent,\n UiAvatarFallbackComponent,\n UiAvatarImageComponent,\n UiBadgeComponent,\n UiButtonComponent,\n ],\n template: `\n \n \n
\n\n
\n \n
\n
\n
\n \n \n {{ node.initials }}\n \n \n
\n
\n

{{ node.name }}

\n

{{ node.role }}

\n
\n
\n \n {{ node.department }}\n \n
\n\n \n
\n
\n \n {{ node.location }}\n
\n
\n \n {{ node.email }}\n
\n
\n\n \n
\n
\n \n {{ reportsLabel || 'Direct reports: ' + node.reportsCount }}\n
\n {{ headcountLabel || node.teamHeadcount + ' staff' }}\n
\n\n \n @if (node.children && node.children.length > 0 && toggleExpand.observed) {\n \n \n @if (isExpanded) {\n \n } @else {\n \n }\n {{\n isExpanded\n ? collapseLabel || 'Collapse Branch'\n : expandLabel || 'Expand (' + node.children!.length + ')'\n }}\n \n {{ node.children!.length }}\n \n }\n
\n \n `,\n})\nexport class UiOrgChartNodeCardComponent {\n protected readonly ChevronDown = ChevronDown\n protected readonly ChevronRight = ChevronRight\n protected readonly Mail = Mail\n protected readonly MapPin = MapPin\n protected readonly Users = Users\n protected readonly cn = cn\n\n @Input() node!: EmployeeNode\n @Input() isSelected = false\n @Input() isHighlighted = false\n @Input() isDimmed = false\n @Input() isExpanded = false\n @Input() reportsLabel?: string\n @Input() headcountLabel?: string\n @Input() expandLabel?: string\n @Input() collapseLabel?: string\n @Output() select = new EventEmitter()\n @Output() toggleExpand = new EventEmitter()\n\n badgeClass(): string {\n return getDeptBadgeClasses(this.node.department)\n }\n\n stripClass(): string {\n return getDeptTopStripClasses(this.node.department)\n }\n\n get cardClass(): string {\n return cn(\n 'bg-card border-border hover:border-primary/50 focus-visible:ring-ring relative w-72 cursor-pointer rounded-xl border text-left shadow-xs transition-colors duration-200 outline-none hover:shadow-md focus-visible:ring-2',\n this.isSelected && 'ring-primary border-primary bg-primary/[0.02] ring-2',\n this.isHighlighted && 'border-success bg-success/10/20 ring-success dark:bg-success/10 ring-2',\n this.isDimmed && 'opacity-35 grayscale-[25%]',\n )\n }\n\n onToggle(event: Event): void {\n event.stopPropagation()\n this.toggleExpand.emit(this.node.id)\n }\n}\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-org-chart-toolbar',\n standalone: true,\n imports: [LucideAngularModule, UiButtonComponent, UiInputComponent],\n template: `\n
\n \n
\n
\n
\n
\n \n
\n

{{ title }}

\n
\n

{{ subtitle }}

\n
\n\n \n
\n
\n \n \n @if (searchQuery) {\n \n \n \n }\n
\n\n \n\n \n\n \n\n \n \n {{ isDrawerOpen ? 'Hide Profile' : 'View Profile' }}\n \n
\n
\n\n \n
\n \n
\n Department:\n @for (dept of departmentCounts; track dept.value) {\n \n }\n
\n\n \n
\n @if (searchQuery.trim()) {\n
\n Found {{ matchingCount }} matching member{{ matchingCount === 1 ? '' : 's' }}\n
\n }\n\n
\n \n \n \n {{ zoomLevel }}%\n = 130\"\n aria-label=\"Zoom in\"\n (click)=\"adjustZoom.emit(10)\"\n >\n \n \n
\n \n \n \n
\n
\n
\n
\n `,\n})\nexport class UiOrgChartToolbarComponent {\n protected readonly Building2 = Building2\n protected readonly Minus = Minus\n protected readonly Plus = Plus\n protected readonly RotateCcw = RotateCcw\n protected readonly Search = Search\n protected readonly User = User\n protected readonly X = X\n protected readonly ZoomIn = ZoomIn\n protected readonly ZoomOut = ZoomOut\n protected readonly cn = cn\n\n @Input() title = ''\n @Input() subtitle = ''\n @Input() searchQuery = ''\n @Input() isDrawerOpen = false\n @Input() departmentCounts: DepartmentCount[] = []\n @Input() selectedDepartment = 'All'\n @Input() matchingCount = 0\n @Input() zoomLevel = 100\n @Output() searchChange = new EventEmitter()\n @Output() toggleDrawer = new EventEmitter()\n @Output() departmentSelect = new EventEmitter()\n @Output() expandAll = new EventEmitter()\n @Output() collapseAll = new EventEmitter()\n @Output() adjustZoom = new EventEmitter()\n @Output() resetZoom = new EventEmitter()\n\n pillClass(value: string): string {\n return cn(\n 'focus-visible:ring-ring inline-flex h-7 items-center gap-1.5 rounded-full px-2.5 text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none',\n this.selectedDepartment === value\n ? 'bg-primary text-primary-foreground shadow-xs'\n : 'bg-background hover:bg-muted text-muted-foreground border-border border',\n )\n }\n\n pillCountClass(value: string): string {\n return cn(\n 'py-0.2 rounded-full px-1.5 text-xs',\n this.selectedDepartment === value\n ? 'bg-primary-foreground/20 text-primary-foreground'\n : 'bg-muted text-muted-foreground',\n )\n }\n}\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-employee-profile-drawer',\n standalone: true,\n imports: [\n LucideAngularModule,\n UiAvatarComponent,\n UiAvatarFallbackComponent,\n UiAvatarImageComponent,\n UiBadgeComponent,\n UiButtonComponent,\n ],\n template: `\n
\n \n
\n
\n \n

Employee Profile

\n
\n \n \n \n
\n\n \n
\n \n
\n
\n \n \n {{ employee.initials }}\n \n \n
\n
\n

{{ employee.name }}

\n

{{ employee.role }}

\n
\n {{\n employee.department\n }}\n Active ยท Full-time\n
\n
\n
\n\n \n
\n \n \n Send Email\n \n \n @if (emailCopied) {\n \n } @else {\n \n }\n {{ emailCopied ? 'Copied!' : 'Copy Email' }}\n \n
\n\n
\n\n \n
\n
About & Focus
\n

{{ employee.bio }}

\n
\n\n \n
\n
Overview Details
\n
\n
\n
\n \n Team Scope\n
\n

{{ employee.teamHeadcount }} Members

\n
\n
\n
\n \n Location\n
\n

{{ employee.location }}

\n
\n
\n
\n \n Tenure\n
\n

{{ employee.tenure }}

\n
\n
\n
\n \n Phone\n
\n

{{ employee.phone }}

\n
\n
\n
\n\n \n @if (employee.managerName) {\n
\n
Reports To
\n
\n
\n

{{ employee.managerName }}

\n

{{ employee.managerRole }}

\n
\n \n View\n \n \n
\n
\n }\n\n \n @if (employee.children && employee.children.length > 0) {\n
\n
\n
\n Direct Reports ({{ employee.children!.length }})\n
\n {{ employee.reportsCount }} reporting teams\n
\n\n
\n @for (sub of employee.children; track sub.id) {\n \n
\n \n \n {{ sub.initials }}\n \n
\n

{{ sub.name }}

\n

{{ sub.role }}

\n
\n
\n \n {{ sub.teamHeadcount }} staff\n \n
\n }\n
\n
\n }\n\n \n
\n
Core Competencies
\n
\n @for (skill of employee.skills; track skill) {\n {{ skill }}\n }\n
\n
\n
\n \n `,\n})\nexport class UiEmployeeProfileDrawerComponent {\n protected readonly ArrowRight = ArrowRight\n protected readonly Briefcase = Briefcase\n protected readonly Calendar = Calendar\n protected readonly Check = Check\n protected readonly Copy = Copy\n protected readonly Mail = Mail\n protected readonly MapPin = MapPin\n protected readonly User = User\n protected readonly Users = Users\n protected readonly X = X\n protected readonly cn = cn\n\n @Input() employee!: EmployeeNode\n @Input() emailCopied = false\n @Output() copyEmail = new EventEmitter()\n @Output() close = new EventEmitter()\n @Output() selectEmployee = new EventEmitter()\n @Output() viewManager = new EventEmitter()\n\n deptClass(): string {\n return getDeptBadgeClasses(this.employee.department)\n }\n\n deptClassFor(dept: string): string {\n return getDeptBadgeClasses(dept)\n }\n}\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-employee-org-chart-tree, [ui-employee-org-chart-tree]',\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: [UiOrgChartNodeCardComponent, UiOrgChartToolbarComponent, UiEmployeeProfileDrawerComponent],\n template: `\n
\n \n \n\n \n
\n \n
\n \n \n
\n \n\n @if (isExpanded(org().id) && org().children?.length) {\n
\n\n \n
\n @if ((org().children?.length ?? 0) > 1) {\n
\n }\n\n @for (vp of org().children; track vp.id) {\n
\n
\n\n \n\n @if (isExpanded(vp.id) && vp.children?.length) {\n
\n\n \n
\n @if (vp.children?.length === 3) {\n
\n }\n @if (vp.children?.length === 2) {\n
\n }\n\n @for (lead of vp.children; track lead.id) {\n
\n
\n\n \n\n @if (isExpanded(lead.id) && lead.children?.length) {\n
\n\n \n
\n @if (lead.children?.length === 2) {\n
\n }\n\n @for (ic of lead.children; track ic.id) {\n
\n
\n\n \n
\n }\n
\n }\n
\n }\n
\n }\n
\n }\n
\n }\n
\n
\n
\n\n \n @if (isDrawerOpen()) {\n \n }\n
\n
\n `,\n})\nexport class UiEmployeeOrgChartTreeComponent {\n @Input() set title(v: string | undefined) {\n if (v !== undefined) this.titleState.set(v)\n }\n @Input() set subtitle(v: string | undefined) {\n if (v !== undefined) this.subtitleState.set(v)\n }\n @Input() set orgData(v: EmployeeNode | undefined) {\n if (v) this.orgState.set(v)\n }\n @Input() set initialSelectedId(v: string | undefined) {\n if (v !== undefined) this.selectedEmployeeId.set(v)\n }\n @Input() set initialDepartment(v: string | undefined) {\n if (v !== undefined) this.selectedDepartment.set(v)\n }\n @Input() set initialSearch(v: string | undefined) {\n if (v !== undefined) this.searchQuery.set(v)\n }\n @Input() set initialExpandedIds(v: string[] | undefined) {\n if (v) this.expandedIds.set([...v])\n }\n @Input() set initialDrawerOpen(v: boolean | undefined) {\n if (v !== undefined) this.isDrawerOpen.set(v)\n }\n @Input('class') className?: string\n\n readonly titleState = signal('Company Organizational Chart')\n readonly subtitleState = signal('148 Employees across 5 Departments')\n readonly orgState = signal(DEFAULT_ORG_DATA)\n\n readonly selectedEmployeeId = signal('emp-ceo')\n readonly selectedDepartment = signal('All')\n readonly searchQuery = signal('')\n readonly isDrawerOpen = signal(true)\n readonly zoomLevel = signal(100)\n readonly emailCopied = signal(false)\n readonly expandedIds = signal(['emp-ceo', 'emp-eng-vp', 'emp-prod-vp', 'emp-ops-vp'])\n\n private copyTimer: ReturnType | undefined\n\n org(): EmployeeNode {\n return this.orgState()\n }\n\n readonly allEmployees = computed(() => flatten(this.orgState()))\n\n readonly departmentCounts = computed(() => {\n const all = this.allEmployees()\n const count = (dept: string) => all.filter((e) => e.department === dept).length\n return [\n { label: 'All', value: 'All', count: all.length },\n { label: 'Executive', value: 'Executive', count: count('Executive') },\n { label: 'Engineering', value: 'Engineering', count: count('Engineering') },\n { label: 'Design', value: 'Design', count: count('Design') },\n { label: 'Product', value: 'Product', count: count('Product') },\n { label: 'Operations', value: 'Operations', count: count('Operations') },\n ]\n })\n\n readonly selectedEmployee = computed(() => {\n return this.allEmployees().find((e) => e.id === this.selectedEmployeeId()) ?? this.orgState()\n })\n\n readonly matchingIds = computed(() => {\n const q = this.searchQuery().trim().toLowerCase()\n if (!q) return []\n return this.allEmployees()\n .filter(\n (emp) =>\n emp.name.toLowerCase().includes(q) ||\n emp.role.toLowerCase().includes(q) ||\n emp.department.toLowerCase().includes(q) ||\n emp.location.toLowerCase().includes(q) ||\n emp.skills.some((s) => s.toLowerCase().includes(q)),\n )\n .map((e) => e.id)\n })\n\n get rootClass(): string {\n return cn('bg-background border-border flex flex-col rounded-xl border shadow-xs', this.className)\n }\n\n isExpanded(id: string): boolean {\n return this.expandedIds().includes(id)\n }\n\n toggleExpand(id: string): void {\n this.expandedIds.update((prev) => (prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]))\n }\n\n expandAll(): void {\n this.expandedIds.set(\n this.allEmployees()\n .filter((e) => e.children?.length)\n .map((e) => e.id),\n )\n }\n\n onSearchChange(value: string): void {\n this.searchQuery.set(value)\n if (value.trim()) this.expandAll()\n }\n\n selectEmployee(emp: EmployeeNode): void {\n this.selectedEmployeeId.set(emp.id)\n this.isDrawerOpen.set(true)\n }\n\n viewManager(managerId: string | undefined): void {\n if (!managerId) return\n const manager = this.allEmployees().find((e) => e.id === managerId)\n if (manager) this.selectEmployee(manager)\n }\n\n copyEmail(email: string): void {\n try {\n void navigator.clipboard?.writeText(email)\n } catch {\n // Clipboard fallback\n }\n this.emailCopied.set(true)\n clearTimeout(this.copyTimer)\n this.copyTimer = setTimeout(() => this.emailCopied.set(false), 2000)\n }\n\n adjustZoom(delta: number): void {\n this.zoomLevel.update((prev) => Math.min(130, Math.max(70, prev + delta)))\n }\n\n isDimmed(node: EmployeeNode): boolean {\n const dept = this.selectedDepartment()\n if (dept !== 'All') {\n if (dept === 'Executive' && node.department !== 'Executive') return true\n if (dept === 'Engineering' && node.department !== 'Engineering' && node.department !== 'Executive') return true\n if (dept === 'Design' && node.department !== 'Design' && node.department !== 'Executive') return true\n if (dept === 'Product' && node.department !== 'Product' && node.department !== 'Executive') return true\n if (dept === 'Operations' && node.department !== 'Operations' && node.department !== 'Executive') return true\n }\n if (this.searchQuery().trim().length > 0) {\n const matches = new Set(this.matchingIds())\n const isDirectMatch = matches.has(node.id)\n const hasMatchingDescendant = flatten(node).some((n) => matches.has(n.id))\n return !isDirectMatch && !hasMatchingDescendant\n }\n return false\n }\n\n isHighlighted(node: EmployeeNode): boolean {\n if (this.searchQuery().trim().length > 0) return this.matchingIds().includes(node.id)\n return false\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/employee-org-chart-tree/employee-org-chart-tree.component.ts" }, { "path": "packages/registry-angular/blocks/employee-org-chart-tree/org-chart-types.ts", "content": "export interface EmployeeNode {\n id: string\n name: string\n role: string\n department: 'Executive' | 'Engineering' | 'Design' | 'Product' | 'Operations'\n email: string\n phone: string\n location: string\n avatar: string\n initials: string\n reportsCount: number\n teamHeadcount: number\n managerId?: string\n managerName?: string\n managerRole?: string\n startDate: string\n tenure: string\n bio: string\n skills: string[]\n status: 'active' | 'on-leave'\n children?: EmployeeNode[]\n}\n\nexport function getDeptBadgeClasses(dept: string): string {\n switch (dept) {\n case 'Executive':\n return 'border-chart-1/30 bg-chart-1/10 text-chart-1'\n case 'Engineering':\n return 'border-chart-2/30 bg-chart-2/10 text-chart-2'\n case 'Design':\n return 'border-chart-3/30 bg-chart-3/10 text-chart-3'\n case 'Product':\n return 'border-chart-4/30 bg-chart-4/10 text-chart-4'\n case 'Operations':\n return 'border-chart-5/30 bg-chart-5/10 text-chart-5'\n default:\n return 'border-border bg-muted text-muted-foreground'\n }\n}\n\nexport function getDeptTopStripClasses(dept: string): string {\n switch (dept) {\n case 'Executive':\n return 'bg-chart-1'\n case 'Engineering':\n return 'bg-chart-2'\n case 'Design':\n return 'bg-chart-3'\n case 'Product':\n return 'bg-chart-4'\n case 'Operations':\n return 'bg-chart-5'\n default:\n return 'bg-muted-foreground'\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/employee-org-chart-tree/org-chart-types.ts" }, { "path": "packages/registry-angular/blocks/employee-org-chart-tree/org-chart-data.ts", "content": "import type { EmployeeNode } from './org-chart-types'\n\nexport const DEFAULT_ORG_DATA: EmployeeNode = {\n id: 'emp-ceo',\n name: 'Sarah Jenkins',\n role: 'Chief Executive Officer',\n department: 'Executive',\n email: 'sarah.jenkins@acme.corp',\n phone: '+1 (415) 890-1200',\n location: 'San Francisco, CA (HQ)',\n avatar: 'https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=160&auto=format&fit=crop&q=80',\n initials: 'SJ',\n reportsCount: 3,\n teamHeadcount: 148,\n startDate: 'January 2019',\n tenure: '5 yrs 8 mos',\n bio: 'Directs company-wide vision, long-range enterprise roadmap, capital allocation, and executive leadership across 5 global divisions.',\n skills: ['Executive Leadership', 'Corporate Strategy', 'Enterprise SaaS', 'M&A', 'Culture'],\n status: 'active',\n children: [\n {\n id: 'emp-eng-vp',\n name: 'Marcus Vance',\n role: 'VP of Engineering',\n department: 'Engineering',\n email: 'marcus.vance@acme.corp',\n phone: '+1 (212) 745-9921',\n location: 'New York, NY',\n avatar: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=160&auto=format&fit=crop&q=80',\n initials: 'MV',\n reportsCount: 3,\n teamHeadcount: 64,\n managerId: 'emp-ceo',\n managerName: 'Sarah Jenkins',\n managerRole: 'Chief Executive Officer',\n startDate: 'March 2020',\n tenure: '4 yrs 6 mos',\n bio: 'Leads 64 engineers across platform architecture, frontend infrastructure, and Site Reliability Engineering with 99.99% uptime SLA.',\n skills: ['Distributed Systems', 'Cloud Architecture', 'Tech Strategy', 'Kubernetes', 'Scalability'],\n status: 'active',\n children: [\n {\n id: 'emp-eng-lead-1',\n name: 'Alex Rivera',\n role: 'Principal Architect',\n department: 'Engineering',\n email: 'alex.rivera@acme.corp',\n phone: '+1 (512) 634-1109',\n location: 'Austin, TX',\n avatar: 'https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=160&auto=format&fit=crop&q=80',\n initials: 'AR',\n reportsCount: 2,\n teamHeadcount: 18,\n managerId: 'emp-eng-vp',\n managerName: 'Marcus Vance',\n managerRole: 'VP of Engineering',\n startDate: 'September 2020',\n tenure: '4 yrs',\n bio: 'Designs core distributed event pipelines, data mesh architecture, and multi-tenant database infrastructure.',\n skills: ['Go', 'Kafka', 'PostgreSQL', 'System Architecture', 'Event Streaming'],\n status: 'active',\n children: [\n {\n id: 'emp-eng-ic-1',\n name: 'Kai Zhang',\n role: 'Senior Backend Engineer',\n department: 'Engineering',\n email: 'kai.zhang@acme.corp',\n phone: '+1 (512) 634-1188',\n location: 'Austin, TX',\n avatar: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=160&auto=format&fit=crop&q=80',\n initials: 'KZ',\n reportsCount: 0,\n teamHeadcount: 1,\n managerId: 'emp-eng-lead-1',\n managerName: 'Alex Rivera',\n managerRole: 'Principal Architect',\n startDate: 'January 2022',\n tenure: '2 yrs 8 mos',\n bio: 'Builds low-latency gRPC services, consensus layers, and distributed caching protocols.',\n skills: ['Rust', 'gRPC', 'Raft', 'Redis', 'High Throughput'],\n status: 'active',\n },\n {\n id: 'emp-eng-ic-2',\n name: 'Hannah Schmidt',\n role: 'Staff Database Architect',\n department: 'Engineering',\n email: 'hannah.schmidt@acme.corp',\n phone: '+1 (512) 634-1192',\n location: 'Remote, US',\n avatar: 'https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=160&auto=format&fit=crop&q=80',\n initials: 'HS',\n reportsCount: 0,\n teamHeadcount: 1,\n managerId: 'emp-eng-lead-1',\n managerName: 'Alex Rivera',\n managerRole: 'Principal Architect',\n startDate: 'May 2021',\n tenure: '3 yrs 4 mos',\n bio: 'Specializes in multi-master replication, query optimization, and automated sharding migrations.',\n skills: ['PostgreSQL', 'CockroachDB', 'Data Warehousing', 'Query Tuning'],\n status: 'active',\n },\n ],\n },\n {\n id: 'emp-eng-lead-2',\n name: 'Sofia Rossi',\n role: 'Staff Frontend Lead',\n department: 'Engineering',\n email: 'sofia.rossi@acme.corp',\n phone: '+49 30 2219 4481',\n location: 'Berlin, Germany',\n avatar: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=160&auto=format&fit=crop&q=80',\n initials: 'SR',\n reportsCount: 2,\n teamHeadcount: 24,\n managerId: 'emp-eng-vp',\n managerName: 'Marcus Vance',\n managerRole: 'VP of Engineering',\n startDate: 'November 2020',\n tenure: '3 yrs 10 mos',\n bio: 'Leads the unified component design system, micro-frontend architecture, and web accessibility standards.',\n skills: ['Vue 3', 'React', 'Design Systems', 'Web Performance', 'WCAG AA'],\n status: 'active',\n children: [\n {\n id: 'emp-eng-ic-3',\n name: 'Leo Garcia',\n role: 'Senior UI Engineer',\n department: 'Engineering',\n email: 'leo.garcia@acme.corp',\n phone: '+49 30 2219 4490',\n location: 'Berlin, Germany',\n avatar: 'https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?w=160&auto=format&fit=crop&q=80',\n initials: 'LG',\n reportsCount: 0,\n teamHeadcount: 1,\n managerId: 'emp-eng-lead-2',\n managerName: 'Sofia Rossi',\n managerRole: 'Staff Frontend Lead',\n startDate: 'February 2022',\n tenure: '2 yrs 7 mos',\n bio: 'Focuses on complex interactive data visualization canvases, charts, and keyboard shortcuts engine.',\n skills: ['TypeScript', 'Tailwind CSS', 'D3.js', 'Canvas API'],\n status: 'active',\n },\n {\n id: 'emp-eng-ic-4',\n name: 'Nina Patel',\n role: 'Frontend Platform Engineer',\n department: 'Engineering',\n email: 'nina.patel@acme.corp',\n phone: '+44 20 8123 9940',\n location: 'London, UK',\n avatar: 'https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?w=160&auto=format&fit=crop&q=80',\n initials: 'NP',\n reportsCount: 0,\n teamHeadcount: 1,\n managerId: 'emp-eng-lead-2',\n managerName: 'Sofia Rossi',\n managerRole: 'Staff Frontend Lead',\n startDate: 'October 2022',\n tenure: '1 yr 11 mos',\n bio: 'Manages automated bundle size budgets, CI build plugins, and island rendering hydration pipelines.',\n skills: ['Vite', 'Turborepo', 'Playwright', 'ESBuild'],\n status: 'active',\n },\n ],\n },\n {\n id: 'emp-eng-lead-3',\n name: 'Tariq Mansour',\n role: 'DevOps & SRE Lead',\n department: 'Engineering',\n email: 'tariq.mansour@acme.corp',\n phone: '+1 (415) 555-8910',\n location: 'San Francisco, CA',\n avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=160&auto=format&fit=crop&q=80',\n initials: 'TM',\n reportsCount: 2,\n teamHeadcount: 22,\n managerId: 'emp-eng-vp',\n managerName: 'Marcus Vance',\n managerRole: 'VP of Engineering',\n startDate: 'January 2021',\n tenure: '3 yrs 8 mos',\n bio: 'Directs cloud infrastructure resilience, multi-region Kubernetes clusters, and automated zero-downtime rollouts.',\n skills: ['AWS', 'Terraform', 'Kubernetes', 'CI/CD', 'Observability'],\n status: 'active',\n children: [\n {\n id: 'emp-eng-ic-5',\n name: 'Kiran Rao',\n role: 'Senior SRE Engineer',\n department: 'Engineering',\n email: 'kiran.rao@acme.corp',\n phone: '+1 (415) 555-8933',\n location: 'San Francisco, CA',\n avatar: 'https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?w=160&auto=format&fit=crop&q=80',\n initials: 'KR',\n reportsCount: 0,\n teamHeadcount: 1,\n managerId: 'emp-eng-lead-3',\n managerName: 'Tariq Mansour',\n managerRole: 'DevOps & SRE Lead',\n startDate: 'August 2022',\n tenure: '2 yrs 1 mo',\n bio: 'Maintains Prometheus/Grafana telemetry stacks, SLO/SLI tracking dashboards, and disaster drills.',\n skills: ['Prometheus', 'Grafana', 'OpenTelemetry', 'Chaos Engineering'],\n status: 'active',\n },\n {\n id: 'emp-eng-ic-6',\n name: 'Elena Dubois',\n role: 'Cloud Security Specialist',\n department: 'Engineering',\n email: 'elena.dubois@acme.corp',\n phone: '+33 1 42 68 55 00',\n location: 'Paris, France',\n avatar: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=160&auto=format&fit=crop&q=80',\n initials: 'ED',\n reportsCount: 0,\n teamHeadcount: 1,\n managerId: 'emp-eng-lead-3',\n managerName: 'Tariq Mansour',\n managerRole: 'DevOps & SRE Lead',\n startDate: 'March 2023',\n tenure: '1 yr 6 mos',\n bio: 'Owns zero-trust cloud network topology, HashiCorp Vault key rotation, and automated CVE vulnerability audits.',\n skills: ['Vault', 'OIDC', 'IAM Hardening', 'SOC 2 Type II'],\n status: 'active',\n },\n ],\n },\n ],\n },\n {\n id: 'emp-prod-vp',\n name: 'Elena Rostova',\n role: 'VP of Product & Design',\n department: 'Product',\n email: 'elena.rostova@acme.corp',\n phone: '+44 20 7946 0912',\n location: 'London, UK',\n avatar: 'https://images.unsplash.com/photo-1580489944761-15a19d654956?w=160&auto=format&fit=crop&q=80',\n initials: 'ER',\n reportsCount: 2,\n teamHeadcount: 40,\n managerId: 'emp-ceo',\n managerName: 'Sarah Jenkins',\n managerRole: 'Chief Executive Officer',\n startDate: 'June 2020',\n tenure: '4 yrs 3 mos',\n bio: 'Guides end-to-end product vision, quarterly roadmap discovery cycles, and customer experience excellence across enterprise tools.',\n skills: ['Product Strategy', 'Design Leadership', 'User Research', 'PLG', 'Enterprise UX'],\n status: 'active',\n children: [\n {\n id: 'emp-prod-lead-1',\n name: 'Maya Patel',\n role: 'Head of Product Design',\n department: 'Design',\n email: 'maya.patel@acme.corp',\n phone: '+44 20 7946 0988',\n location: 'London, UK',\n avatar: 'https://images.unsplash.com/photo-1567532939604-b6b5b0db2604?w=160&auto=format&fit=crop&q=80',\n initials: 'MP',\n reportsCount: 2,\n teamHeadcount: 18,\n managerId: 'emp-prod-vp',\n managerName: 'Elena Rostova',\n managerRole: 'VP of Product & Design',\n startDate: 'February 2021',\n tenure: '3 yrs 7 mos',\n bio: 'Leads our 18-member UI/UX and design research studio, creating intuitive interfaces for data-intensive enterprise users.',\n skills: ['Figma', 'UX Research', 'Design Systems', 'Design Operations'],\n status: 'active',\n children: [\n {\n id: 'emp-des-ic-1',\n name: 'Aria Thorne',\n role: 'Lead UX Researcher',\n department: 'Design',\n email: 'aria.thorne@acme.corp',\n phone: '+1 (415) 321-7789',\n location: 'San Francisco, CA',\n avatar: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=160&auto=format&fit=crop&q=80',\n initials: 'AT',\n reportsCount: 0,\n teamHeadcount: 1,\n managerId: 'emp-prod-lead-1',\n managerName: 'Maya Patel',\n managerRole: 'Head of Product Design',\n startDate: 'July 2022',\n tenure: '2 yrs 2 mos',\n bio: 'Conducts qualitative enterprise customer interview loops, card sorting, and workflow pain-point mapping.',\n skills: ['Qualitative Analysis', 'Usability Testing', 'Personas', 'Journey Mapping'],\n status: 'active',\n },\n {\n id: 'emp-des-ic-2',\n name: 'Lucas Silva',\n role: 'Senior Interaction Designer',\n department: 'Design',\n email: 'lucas.silva@acme.corp',\n phone: '+351 21 098 7654',\n location: 'Lisbon, Portugal',\n avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=160&auto=format&fit=crop&q=80',\n initials: 'LS',\n reportsCount: 0,\n teamHeadcount: 1,\n managerId: 'emp-prod-lead-1',\n managerName: 'Maya Patel',\n managerRole: 'Head of Product Design',\n startDate: 'November 2022',\n tenure: '1 yr 10 mos',\n bio: 'Architects micro-interactions, spring animation specs, and tactile feedback patterns across web and desktop.',\n skills: ['Framer', 'Prototyping', 'Micro-interactions', 'Token Systems'],\n status: 'active',\n },\n ],\n },\n {\n id: 'emp-prod-lead-2',\n name: 'Liam Tanaka',\n role: 'Principal Product Manager',\n department: 'Product',\n email: 'liam.tanaka@acme.corp',\n phone: '+81 3 5555 0142',\n location: 'Tokyo, Japan',\n avatar: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=160&auto=format&fit=crop&q=80',\n initials: 'LT',\n reportsCount: 2,\n teamHeadcount: 22,\n managerId: 'emp-prod-vp',\n managerName: 'Elena Rostova',\n managerRole: 'VP of Product & Design',\n startDate: 'August 2021',\n tenure: '3 yrs 1 mo',\n bio: 'Spearheads core enterprise workflow automation, AI copilots, and monetization experiments across global markets.',\n skills: ['Product Roadmapping', 'AI Integration', 'Data Analytics', 'Enterprise Growth'],\n status: 'active',\n children: [\n {\n id: 'emp-prod-ic-1',\n name: 'Devon Vance',\n role: 'Senior Technical PM',\n department: 'Product',\n email: 'devon.vance@acme.corp',\n phone: '+1 (212) 745-3390',\n location: 'New York, NY',\n avatar: 'https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?w=160&auto=format&fit=crop&q=80',\n initials: 'DV',\n reportsCount: 0,\n teamHeadcount: 1,\n managerId: 'emp-prod-lead-2',\n managerName: 'Liam Tanaka',\n managerRole: 'Principal Product Manager',\n startDate: 'April 2023',\n tenure: '1 yr 5 mos',\n bio: 'Defines developer API contracts, webhook architectures, and 3rd party integration partner specifications.',\n skills: ['API Specs', 'OpenAPI', 'Webhooks', 'Partner Integrations'],\n status: 'active',\n },\n {\n id: 'emp-prod-ic-2',\n name: 'Sarah Lin',\n role: 'Product Analytics Lead',\n department: 'Product',\n email: 'sarah.lin@acme.corp',\n phone: '+81 3 5555 0199',\n location: 'Tokyo, Japan',\n avatar: 'https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?w=160&auto=format&fit=crop&q=80',\n initials: 'SL',\n reportsCount: 0,\n teamHeadcount: 1,\n managerId: 'emp-prod-lead-2',\n managerName: 'Liam Tanaka',\n managerRole: 'Principal Product Manager',\n startDate: 'January 2023',\n tenure: '1 yr 8 mos',\n bio: 'Models customer retention cohorts, feature usage drop-off rates, and self-service conversion funnels.',\n skills: ['SQL', 'Mixpanel', 'Cohort Retention', 'A/B Testing'],\n status: 'active',\n },\n ],\n },\n ],\n },\n {\n id: 'emp-ops-vp',\n name: 'David Chen',\n role: 'VP of Operations & Finance',\n department: 'Operations',\n email: 'david.chen@acme.corp',\n phone: '+65 6789 0123',\n location: 'Singapore',\n avatar: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=160&auto=format&fit=crop&q=80',\n initials: 'DC',\n reportsCount: 2,\n teamHeadcount: 44,\n managerId: 'emp-ceo',\n managerName: 'Sarah Jenkins',\n managerRole: 'Chief Executive Officer',\n startDate: 'August 2021',\n tenure: '3 yrs 1 mo',\n bio: 'Manages worldwide financial planning, global entity setup, real estate facilities, and international compliance operations.',\n skills: ['Financial Modeling', 'Corporate Finance', 'Global Compliance', 'Treasury', 'Operations'],\n status: 'active',\n children: [\n {\n id: 'emp-ops-lead-1',\n name: 'Chloe Dupont',\n role: 'Director of Finance',\n department: 'Operations',\n email: 'chloe.dupont@acme.corp',\n phone: '+33 1 42 68 90 12',\n location: 'Paris, France',\n avatar: 'https://images.unsplash.com/photo-1580489944761-15a19d654956?w=160&auto=format&fit=crop&q=80',\n initials: 'CD',\n reportsCount: 2,\n teamHeadcount: 20,\n managerId: 'emp-ops-vp',\n managerName: 'David Chen',\n managerRole: 'VP of Operations & Finance',\n startDate: 'March 2022',\n tenure: '2 yrs 6 mos',\n bio: 'Leads FP&A, annual budgeting models, GAAP audits, and international cross-border tax compliance.',\n skills: ['FP&A', 'GAAP Audits', 'Treasury Management', 'Tax Modeling'],\n status: 'active',\n children: [\n {\n id: 'emp-ops-ic-1',\n name: 'Arthur Leclerc',\n role: 'Senior Financial Analyst',\n department: 'Operations',\n email: 'arthur.leclerc@acme.corp',\n phone: '+33 1 42 68 90 33',\n location: 'Paris, France',\n avatar: 'https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=160&auto=format&fit=crop&q=80',\n initials: 'AL',\n reportsCount: 0,\n teamHeadcount: 1,\n managerId: 'emp-ops-lead-1',\n managerName: 'Chloe Dupont',\n managerRole: 'Director of Finance',\n startDate: 'November 2022',\n tenure: '1 yr 10 mos',\n bio: 'Analyzes recurring SaaS revenue trends, customer lifetime values, and department OPEX burn rates.',\n skills: ['Financial Forecasting', 'Excel Modeling', 'ARR Accounting'],\n status: 'active',\n },\n {\n id: 'emp-ops-ic-2',\n name: 'Zoe Martinez',\n role: 'Global Payroll & Benefits Lead',\n department: 'Operations',\n email: 'zoe.martinez@acme.corp',\n phone: '+34 91 555 0177',\n location: 'Madrid, Spain',\n avatar: 'https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=160&auto=format&fit=crop&q=80',\n initials: 'ZM',\n reportsCount: 0,\n teamHeadcount: 1,\n managerId: 'emp-ops-lead-1',\n managerName: 'Chloe Dupont',\n managerRole: 'Director of Finance',\n startDate: 'June 2023',\n tenure: '1 yr 3 mos',\n bio: 'Oversees payroll runs across 12 countries, international equity plans, and local pension schemes.',\n skills: ['Global Payroll', 'Equity Schemes', 'Statutory Benefits'],\n status: 'active',\n },\n ],\n },\n {\n id: 'emp-ops-lead-2',\n name: 'James Wilson',\n role: 'Director of Global Operations',\n department: 'Operations',\n email: 'james.wilson@acme.corp',\n phone: '+1 (212) 745-8812',\n location: 'New York, NY',\n avatar: 'https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?w=160&auto=format&fit=crop&q=80',\n initials: 'JW',\n reportsCount: 2,\n teamHeadcount: 24,\n managerId: 'emp-ops-vp',\n managerName: 'David Chen',\n managerRole: 'VP of Operations & Finance',\n startDate: 'May 2022',\n tenure: '2 yrs 4 mos',\n bio: 'Oversees global facilities, vendor procurement relationships, workplace experience, and corporate IT hardware fleets.',\n skills: ['Vendor Negotiations', 'Facilities Management', 'Asset Tracking', 'Workplace Ops'],\n status: 'active',\n children: [\n {\n id: 'emp-ops-ic-3',\n name: 'Rachel Green',\n role: 'Workplace Experience Manager',\n department: 'Operations',\n email: 'rachel.green@acme.corp',\n phone: '+1 (212) 745-8833',\n location: 'New York, NY',\n avatar: 'https://images.unsplash.com/photo-1567532939604-b6b5b0db2604?w=160&auto=format&fit=crop&q=80',\n initials: 'RG',\n reportsCount: 0,\n teamHeadcount: 1,\n managerId: 'emp-ops-lead-2',\n managerName: 'James Wilson',\n managerRole: 'Director of Global Operations',\n startDate: 'January 2023',\n tenure: '1 yr 8 mos',\n bio: 'Coordinates global office events, collaborative space design, catering vendors, and team onsites.',\n skills: ['Event Planning', 'Space Management', 'Culture Initiatives'],\n status: 'active',\n },\n {\n id: 'emp-ops-ic-4',\n name: 'Vikram Seth',\n role: 'IT Systems & Security Lead',\n department: 'Operations',\n email: 'vikram.seth@acme.corp',\n phone: '+65 6789 0188',\n location: 'Singapore',\n avatar: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=160&auto=format&fit=crop&q=80',\n initials: 'VS',\n reportsCount: 0,\n teamHeadcount: 1,\n managerId: 'emp-ops-lead-2',\n managerName: 'James Wilson',\n managerRole: 'Director of Global Operations',\n startDate: 'October 2022',\n tenure: '1 yr 11 mos',\n bio: 'Manages enterprise MDM configurations, Okta SSO provisioning, and hardware lifecycle deployment.',\n skills: ['Okta SSO', 'Jamf MDM', 'Endpoint Security', 'Hardware Logistics'],\n status: 'active',\n },\n ],\n },\n ],\n },\n ],\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/employee-org-chart-tree/org-chart-data.ts" }, { "path": "packages/registry-angular/blocks/employee-org-chart-tree/index.ts", "content": "export {\n UiEmployeeOrgChartTreeComponent,\n UiEmployeeProfileDrawerComponent,\n UiOrgChartNodeCardComponent,\n UiOrgChartToolbarComponent,\n type DepartmentCount,\n type EmployeeNode,\n} from './employee-org-chart-tree.component'\nexport { getDeptBadgeClasses, getDeptTopStripClasses } from './org-chart-types'\nexport { DEFAULT_ORG_DATA } from './org-chart-data'\n", "type": "registry:block", "target": "~/src/app/components/blocks/employee-org-chart-tree/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/avatar.json", "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/input.json" ], "description": "Interactive organizational hierarchy tree with manager reporting lines, team counts, multi-level expandable branches, department filter pills, employee search, and an employee profile quick info drawer.", "categories": [ "hr", "app" ] }