{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "enterprise-workspace-switcher", "title": "Enterprise Workspace Switcher", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/enterprise-workspace-switcher/enterprise-workspace-switcher.component.ts", "content": "// Multi-organization workspace switcher dropdown and creation modal: active organization display,\n// tier levels, team role badges, member counts, and an organization creation dialog with dynamic\n// slug preview, region selector, and tier plan radios. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, computed, signal } from '@angular/core'\nimport {\n Building2,\n Check,\n ChevronsUpDown,\n Globe,\n LogOut,\n LucideAngularModule,\n Plus,\n Settings,\n UserPlus,\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 {\n UiDialogComponent,\n UiDialogContentComponent,\n UiDialogDescriptionComponent,\n UiDialogFooterComponent,\n UiDialogHeaderComponent,\n UiDialogTitleComponent,\n} from '@/ui/dialog/dialog.component'\nimport {\n UiDropdownMenuComponent,\n UiDropdownMenuContentComponent,\n UiDropdownMenuItemComponent,\n UiDropdownMenuLabelComponent,\n UiDropdownMenuSeparatorComponent,\n UiDropdownMenuTriggerComponent,\n} from '@/ui/dropdown-menu/dropdown-menu.component'\nimport { UiInputComponent } from '@/ui/input/input.component'\nimport { UiRadioGroupComponent, UiRadioGroupItemComponent } from '@/ui/radio-group/radio-group.component'\nimport {\n UiSelectComponent,\n UiSelectContentComponent,\n UiSelectItemComponent,\n UiSelectTriggerComponent,\n UiSelectValueComponent,\n} from '@/ui/select/select.component'\n\nexport interface WorkspaceItem {\n id: string\n name: string\n slug?: string\n plan: string\n planTier: string\n members: number\n region: string\n regionCode: string\n role: 'Owner' | 'Admin' | 'Member' | 'Personal'\n color: string\n initials: string\n}\n\nexport interface WorkspaceUserInfo {\n name: string\n email: string\n avatar?: string\n}\n\nconst DEFAULT_WORKSPACES: WorkspaceItem[] = [\n {\n id: 'ws-1',\n name: 'UIPKGE Enterprise Inc.',\n slug: 'uipkge-enterprise',\n plan: 'Enterprise Scale',\n planTier: 'Enterprise Plan',\n members: 64,\n region: 'US East (N. Virginia)',\n regionCode: 'US-East',\n role: 'Owner',\n color: 'bg-primary/10 text-primary border border-primary/20',\n initials: 'UE',\n },\n {\n id: 'ws-2',\n name: 'Acme Design Systems Lab',\n slug: 'acme-design',\n plan: 'Pro Team',\n planTier: 'Pro Team',\n members: 18,\n region: 'EU Central (Frankfurt)',\n regionCode: 'EU-Central',\n role: 'Admin',\n color: 'bg-info/10 text-info border border-info/20',\n initials: 'AD',\n },\n {\n id: 'ws-3',\n name: 'Personal Sandbox',\n slug: 'personal-sandbox',\n plan: 'Developer Tier',\n planTier: 'Free Developer Tier',\n members: 1,\n region: 'Global Edge',\n regionCode: 'Global',\n role: 'Personal',\n color: 'bg-success/10 text-success border border-success/20',\n initials: 'PS',\n },\n]\n\nconst DEFAULT_USER: WorkspaceUserInfo = {\n name: 'Elena Rostova',\n email: 'elena@uipkge.dev',\n avatar: '',\n}\n\nconst FALLBACK_WORKSPACE: WorkspaceItem = {\n id: 'ws-fallback',\n name: 'Workspace',\n plan: 'Standard',\n planTier: 'Standard',\n members: 1,\n region: 'US-East',\n regionCode: 'US-East',\n role: 'Owner',\n color: 'bg-muted text-foreground border border-border',\n initials: 'WS',\n}\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-enterprise-workspace-switcher, [ui-enterprise-workspace-switcher]',\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 UiAvatarComponent,\n UiAvatarFallbackComponent,\n UiAvatarImageComponent,\n UiBadgeComponent,\n UiButtonComponent,\n UiDialogComponent,\n UiDialogContentComponent,\n UiDialogDescriptionComponent,\n UiDialogFooterComponent,\n UiDialogHeaderComponent,\n UiDialogTitleComponent,\n UiDropdownMenuComponent,\n UiDropdownMenuContentComponent,\n UiDropdownMenuItemComponent,\n UiDropdownMenuLabelComponent,\n UiDropdownMenuSeparatorComponent,\n UiDropdownMenuTriggerComponent,\n UiInputComponent,\n UiRadioGroupComponent,\n UiRadioGroupItemComponent,\n UiSelectComponent,\n UiSelectContentComponent,\n UiSelectItemComponent,\n UiSelectTriggerComponent,\n UiSelectValueComponent,\n ],\n template: `\n
\n \n \n \n
\n \n {{ activeWorkspace().initials }}\n
\n \n
\n\n \n
\n
\n \n {{ activeWorkspace().name }}\n \n \n {{ activeWorkspace().role }}\n \n
\n
\n Tier: {{ activeWorkspace().plan }}\n {{ activeWorkspace().regionCode }}\n
\n
\n\n \n \n\n \n \n \n
\n \n @if (userState().avatar) {\n \n }\n {{\n userInitials()\n }}\n \n
\n Signed in as\n {{ userState().email }}\n
\n
\n \n Ready\n
\n
\n \n\n \n\n \n
\n Workspaces\n {{ workspaces().length }} total\n
\n\n
\n @for (ws of workspaces(); track ws.id) {\n \n \n {{ ws.initials }}\n
\n\n
\n
\n \n {{ ws.name }}\n \n @if (ws.role === 'Owner') {\n Owner\n }\n @if (ws.role === 'Admin') {\n Admin\n }\n
\n

\n {{ ws.planTier }} · {{ ws.members }} Member{{ ws.members === 1 ? '' : 's' }} · {{ ws.regionCode }}\n

\n
\n\n @if (activeWorkspaceId() === ws.id) {\n \n }\n \n }\n
\n\n \n\n \n
\n \n \n \n
\n Create New Workspace\n \n\n \n
\n \n
\n Organization Settings & Billing\n \n\n \n
\n \n
\n Invite Team Members\n \n \n\n \n\n \n \n \n \n \n Log out\n \n \n \n\n \n \n \n
\n \n \n
\n

Create New Workspace

\n

\n Spin up a dedicated organization workspace with multi-region routing and isolated billing.\n

\n \n\n
\n \n
\n \n \n
\n\n \n
\n \n
\n \n uipkge.dev/\n {{ slugPreview() }}\n
\n
\n\n \n
\n \n \n \n \n US East (N. Virginia)\n EU Central (Frankfurt)\n AP South (Mumbai)\n \n \n

\n Primary cluster location for low-latency queries and database replication.\n

\n
\n\n \n
\n \n \n \n\n \n \n
\n\n
\n \n \n
\n
\n \n \n \n `,\n})\nexport class UiEnterpriseWorkspaceSwitcherComponent {\n protected readonly Building2 = Building2\n protected readonly Check = Check\n protected readonly ChevronsUpDown = ChevronsUpDown\n protected readonly Globe = Globe\n protected readonly LogOut = LogOut\n protected readonly Plus = Plus\n protected readonly Settings = Settings\n protected readonly UserPlus = UserPlus\n protected readonly cn = cn\n\n @Input() set initialWorkspaces(v: WorkspaceItem[] | undefined) {\n if (v) this.workspaces.set(v.map((w) => ({ ...w })))\n }\n @Input() set defaultActiveId(v: string | undefined) {\n if (v) this.activeWorkspaceId.set(v)\n }\n @Input() set user(v: WorkspaceUserInfo | undefined) {\n if (v) this.userState.set({ ...v })\n }\n @Input('class') className?: string\n @Output() workspaceChange = new EventEmitter()\n @Output() workspaceCreate = new EventEmitter()\n @Output() workspaceAction = new EventEmitter<'settings' | 'billing' | 'invite' | 'logout'>()\n\n readonly workspaces = signal(DEFAULT_WORKSPACES.map((w) => ({ ...w })))\n readonly activeWorkspaceId = signal('ws-1')\n readonly userState = signal({ ...DEFAULT_USER })\n readonly isCreateDialogOpen = signal(false)\n\n // Dialog form state\n readonly newOrgName = signal('Stripe Developer Platform')\n readonly newOrgRegion = signal('us-east')\n readonly newOrgPlan = signal('pro')\n\n readonly activeWorkspace = computed(() => {\n const list = this.workspaces()\n return list.find((w) => w.id === this.activeWorkspaceId()) ?? list[0] ?? { ...FALLBACK_WORKSPACE }\n })\n\n readonly slugPreview = computed(() => {\n const cleaned = this.newOrgName()\n .trim()\n .toLowerCase()\n .replace(/[^a-z0-9]+/g, '-')\n .replace(/^-+|-+$/g, '')\n return cleaned || 'stripe-dev'\n })\n\n readonly userInitials = computed(() => {\n return (\n this.userState()\n .name.split(' ')\n .map((p) => p[0])\n .join('')\n .toUpperCase() || 'U'\n )\n })\n\n get rootClass(): string {\n return cn('w-full', this.className)\n }\n\n planCardClass(plan: string): string {\n return cn(\n 'border-border/80 hover:border-primary/50 relative flex cursor-pointer flex-col justify-between rounded-xl border p-3.5 shadow-xs transition-colors',\n this.newOrgPlan() === plan && 'border-primary bg-primary/5 ring-primary/40 shadow-sm ring-1',\n )\n }\n\n handleSelectWorkspace(workspace: WorkspaceItem): void {\n this.activeWorkspaceId.set(workspace.id)\n this.workspaceChange.emit(workspace)\n }\n\n handleCreateWorkspace(event: Event): void {\n event.preventDefault()\n if (!this.newOrgName().trim()) return\n\n const regionMap: Record = {\n 'us-east': { full: 'US East (N. Virginia)', code: 'US-East' },\n 'eu-central': { full: 'EU Central (Frankfurt)', code: 'EU-Central' },\n 'ap-south': { full: 'AP South (Mumbai)', code: 'AP-South' },\n }\n const regionInfo = regionMap[this.newOrgRegion()] ?? { full: 'US East (N. Virginia)', code: 'US-East' }\n\n const parts = this.newOrgName().trim().split(/\\s+/)\n const initials =\n parts.length > 1\n ? `${parts[0]?.[0] ?? ''}${parts[1]?.[0] ?? ''}`.toUpperCase()\n : (parts[0]?.slice(0, 2) ?? 'WS').toUpperCase()\n\n const newWs: WorkspaceItem = {\n id: `ws-${Date.now()}`,\n name: this.newOrgName().trim(),\n slug: this.slugPreview(),\n plan: this.newOrgPlan() === 'enterprise' ? 'Enterprise Scale' : 'Pro Team',\n planTier: this.newOrgPlan() === 'enterprise' ? 'Enterprise Custom' : 'Pro Team',\n members: 1,\n region: regionInfo.full,\n regionCode: regionInfo.code,\n role: 'Owner',\n color:\n this.newOrgPlan() === 'enterprise'\n ? 'bg-primary/10 text-primary border border-primary/20'\n : 'bg-info/10 text-info border border-info/20',\n initials,\n }\n\n this.workspaces.update((prev) => [newWs, ...prev])\n this.activeWorkspaceId.set(newWs.id)\n this.workspaceCreate.emit(newWs)\n this.workspaceChange.emit(newWs)\n this.newOrgName.set('')\n this.isCreateDialogOpen.set(false)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/enterprise-workspace-switcher/enterprise-workspace-switcher.component.ts" }, { "path": "packages/registry-angular/blocks/enterprise-workspace-switcher/index.ts", "content": "export {\n UiEnterpriseWorkspaceSwitcherComponent,\n type WorkspaceItem,\n type WorkspaceUserInfo,\n} from './enterprise-workspace-switcher.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/enterprise-workspace-switcher/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/dialog.json", "https://uipkge.dev/r/angular/dropdown-menu.json", "https://uipkge.dev/r/angular/input.json", "https://uipkge.dev/r/angular/radio-group.json", "https://uipkge.dev/r/angular/select.json" ], "description": "Multi-organization workspace switcher dropdown and creation modal. Features active organization display, 3 tier levels (Enterprise Scale, Pro Team, Free Sandbox), team role badges, member counts, and an organization creation dialog with dynamic slug preview, region selector, and tier plan radios.", "categories": [ "layout", "dashboard", "navigation", "overlay" ] }