{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "form-layouts", "title": "Form Layouts", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/form-layouts/form-layouts.component.ts", "content": "// Structured create/edit entity form (\"New project\"): stacked SectionCards for project\n// details (name with live slug preview, description with char counter), configuration\n// (visibility Select, start date, budget), and access (link vs restricted RadioGroup,\n// notification/comment Switch rows) with a sticky-feel footer bar. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, computed, signal } from '@angular/core'\nimport { Globe, Link2, Lock, LucideAngularModule } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiInputComponent } from '@/ui/input/input.component'\nimport { UiLabelComponent } from '@/ui/label/label.component'\nimport { UiRadioGroupComponent, UiRadioGroupItemComponent } from '@/ui/radio-group/radio-group.component'\nimport { UiSectionCardComponent } from '@/ui/section-card/section-card.component'\nimport {\n UiSelectComponent,\n UiSelectContentComponent,\n UiSelectItemComponent,\n UiSelectTriggerComponent,\n UiSelectValueComponent,\n} from '@/ui/select/select.component'\nimport { UiSwitchComponent } from '@/ui/switch/switch.component'\nimport { UiTextareaComponent } from '@/ui/textarea/textarea.component'\n\nconst DESCRIPTION_LIMIT = 280\n\nexport type FormLayoutsAccess = 'link' | 'restricted'\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-form-layouts, [ui-form-layouts]',\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 UiButtonComponent,\n UiInputComponent,\n UiLabelComponent,\n UiRadioGroupComponent,\n UiRadioGroupItemComponent,\n UiSectionCardComponent,\n UiSelectComponent,\n UiSelectContentComponent,\n UiSelectItemComponent,\n UiSelectTriggerComponent,\n UiSelectValueComponent,\n UiSwitchComponent,\n UiTextareaComponent,\n ],\n template: `\n
\n
\n
\n
\n
\n \n \n @if (showNameError()) {\n

Project name is required.

\n }\n
\n
\n \n

\n acme.uipkge.app/\n {{ slug() }}\n

\n
\n
\n \n \n limit ? 'text-destructive' : 'text-muted-foreground'\"\n >\n {{ description().length }}/{{ limit }}\n

\n
\n
\n
\n\n
\n
\n
\n \n \n \n \n Public\n Internal\n Private\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n\n
\n
\n \n \n \n \n
\n \n \n \n
\n \n\n
\n
\n
\n

Notifications

\n

Email the team on status changes and mentions.

\n
\n \n
\n
\n
\n

Comments

\n

Let viewers comment on tasks and updates.

\n
\n \n
\n
\n
\n
\n\n \n \n \n \n \n \n `,\n})\nexport class UiFormLayoutsComponent {\n protected readonly Globe = Globe\n protected readonly Link2 = Link2\n protected readonly Lock = Lock\n\n protected readonly limit = DESCRIPTION_LIMIT\n\n readonly name = signal('')\n readonly description = signal('')\n readonly visibility = signal('internal')\n readonly startDate = signal('')\n readonly budget = signal('')\n readonly access = signal('link')\n readonly notifications = signal(true)\n readonly comments = signal(true)\n readonly submitted = signal(false)\n\n @Input('class') className?: string\n\n readonly slug = computed(() => {\n const cleaned = this.name()\n .trim()\n .toLowerCase()\n .replace(/[^a-z0-9]+/g, '-')\n .replace(/^-+|-+$/g, '')\n return cleaned || 'your-project'\n })\n\n readonly showNameError = computed(() => this.submitted() && this.name().trim() === '')\n\n get rootClass(): string {\n return cn('max-w-2xl', this.className)\n }\n\n setAccess(value: string): void {\n this.access.set(value as FormLayoutsAccess)\n }\n\n handleSubmit(event?: Event): void {\n event?.preventDefault()\n this.submitted.set(true)\n if (this.name().trim() === '') return\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/form-layouts/form-layouts.component.ts" }, { "path": "packages/registry-angular/blocks/form-layouts/index.ts", "content": "export { UiFormLayoutsComponent, type FormLayoutsAccess } from './form-layouts.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/form-layouts/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/input.json", "https://uipkge.dev/r/angular/label.json", "https://uipkge.dev/r/angular/radio-group.json", "https://uipkge.dev/r/angular/section-card.json", "https://uipkge.dev/r/angular/select.json", "https://uipkge.dev/r/angular/switch.json", "https://uipkge.dev/r/angular/textarea.json" ], "description": "Structured create/edit entity form (\"New project\"): stacked SectionCards for project details (name with live slug preview, description with char counter), configuration (visibility Select, start date, budget), and access (link vs restricted RadioGroup, notification/comment Switch rows) with a sticky-feel footer bar. Create stays disabled until the name is filled; validation hints appear under empty required fields after the first submit attempt.", "categories": [ "layout", "app", "forms" ] }