{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "lease-agreement-sign", "title": "Lease Agreement Sign", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/lease-agreement-sign/lease-agreement-sign.component.ts", "content": "// DocuSign-style digital residential lease agreement signature and review workflow with\n// terms summary, interactive initial checkpoints, sticky signature action sidebar, and\n// cryptographic audit execution. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, computed, signal } from '@angular/core'\nimport {\n AlertCircle,\n BadgeCheck,\n Building2,\n Check,\n CheckCircle2,\n Download,\n Lock,\n LucideAngularModule,\n Pen,\n PenTool,\n Printer,\n RotateCcw,\n ShieldCheck,\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 UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\n\nexport type SignatureFont = 'serif' | 'script' | 'sans'\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-lease-agreement-sign, [ui-lease-agreement-sign]',\n standalone: true,\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiSeparatorComponent,\n ],\n template: `\n
\n
\n \n
\n
\n
\n
\n Agreement Ref:\n #LSA-2026-44B\n •\n @if (isSigned()) {\n \n \n Fully Executed & Legally Binding\n \n } @else if (initial1Completed() && initial2Completed()) {\n \n \n Ready for Tenant Signature\n \n } @else {\n \n \n Action Required • {{ pendingCount() }} Signatures Needed\n \n }\n
\n

\n Residential Lease Agreement • 12-Month Term\n

\n

\n \n Unit 4B • 742 Evergreen Terrace, Springfield, OR 97477\n

\n
\n\n
\n \n \n \n {{ downloadSuccess() ? 'Downloading PDF...' : 'Download Draft PDF' }}\n \n @if (isSigned()) {\n \n \n Reset Demo\n \n }\n
\n
\n
\n\n \n
\n \n
\n
\n \n
\n \n Official Real Estate Contract\n \n

\n Standard Residential Lease Agreement\n

\n

\n State of Oregon • Multnomah County • Governing Statute: ORS Chapter 90\n

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

\n Key Financial & Term Summary\n

\n Fixed-Term\n
\n
\n
\n

Monthly Rent

\n

$3,450.00

\n

Due 1st of month

\n
\n
\n

Lease Duration

\n

12 Months

\n

\n Sep 01, 2026 – Aug 31, 2027\n

\n
\n
\n

Security Deposit

\n

$3,450.00

\n

Escrow Trust Acct

\n
\n
\n

Pet Policy

\n

Approved - 1 Dog

\n

$50/mo pet rent

\n
\n
\n
\n
\n\n \n
\n \n
\n
\n 01\n

Parties, Premises & Occupancy

\n
\n

\n This Residential Lease Agreement (the “Agreement”) is entered into on this 21st day of August, 2026,\n by and between:\n

\n
\n
\n

Landlord / Lessor

\n

Evergreen Heritage Holdings LLC

\n

Managing Agent: Marcus Vance, CPM

\n

Lic #OR-994201 • info@evergreenhh.com

\n
\n
\n

Tenant / Lessee

\n

Elena Rostova

\n

Primary Occupant

\n

elena.rostova@example.com • (555) 234-5678

\n
\n
\n

\n Premises Description: Landlord hereby leases to Tenant the residential real\n property situated at Unit 4B, 742 Evergreen Terrace, Springfield, OR 97477,\n comprising 2 Bedrooms, 2 Full Bathrooms (approx. 1,120 sq ft), together with designated covered\n parking stall #42 and storage locker #S-14.\n

\n
\n\n
\n\n \n
\n
\n 02\n

\n Rent Payment Schedule & Late Fees\n

\n
\n

\n Tenant agrees to pay Landlord the base monthly rent of\n $3,450.00 USD plus\n $50.00 USD monthly pet rent, for an\n aggregate monthly payment of\n $3,500.00 USD, due on or before the\n first (1st) day of each calendar month.\n

\n

\n Grace Period & Penalties: A grace period is provided through 11:59 PM PST on\n the fifth (5th) day of the month. If rent is not received in full by 12:00 AM on the sixth (6th)\n calendar day, a statutory late fee of\n $75.00 USD shall immediately apply,\n plus an additional charge of\n $10.00 USD per day until the\n delinquent balance is satisfied in full.\n

\n\n
\n
\n
\n
\n \n Tenant Initial Requirement • Section 2\n \n @if (initial1Completed()) {\n \n Initialed\n \n } @else {\n \n Action Required\n \n }\n
\n

\n Acknowledge and agree to the $3,450.00 rent schedule, ACH delivery, and $75.00 late assessment\n clauses.\n

\n
\n \n @if (initial1Completed()) {\n ER\n • Elena Rostova [Initialed]\n } @else {\n \n Click to Initial [ER]\n }\n \n
\n
\n
\n\n
\n\n \n
\n
\n 03\n

\n Maintenance, Utilities & Occupancy Rules\n

\n
\n
    \n
  • \n \n \n Quiet Hours: Community quiet hours are strictly\n enforced between 10:00 PM and 7:00 AM daily.\n \n
    • \n
  • \n \n \n HVAC Maintenance: Tenant shall replace HVAC air filters\n every 90 calendar days. Replacement filters are provided free of charge at property management.\n \n
    • \n
  • \n \n \n Guest Policy: Guests staying exceeding 14 consecutive\n calendar days require written authorization from property management.\n \n
    • \n
  • \n \n \n Utilities Allocation: Landlord pays municipal water,\n sewer, and storm drainage. Tenant is responsible for electricity (PGE), gas (NW Natural), and\n high-speed internet.\n \n
    • \n
\n
\n\n
\n\n \n
\n
\n 04\n

\n Termination, Renewal & Move-Out Notice\n

\n
\n

\n Either party may terminate or request non-renewal of this lease by delivering a formal written\n notice at least sixty (60) calendar days prior to the lease expiration date of\n August 31, 2027.\n

\n

\n Move-Out & Carpet Certification: Upon vacating the premises, Tenant shall\n return all building keys (2 unit keys, 1 mailbox key, 1 garage fob) and furnish a paid receipt from\n a licensed professional carpet cleaning service.\n

\n\n
\n
\n
\n
\n \n Tenant Initial Requirement • Section 4\n \n @if (initial2Completed()) {\n \n Initialed\n \n } @else {\n \n Action Required\n \n }\n
\n

\n Acknowledge the 60-day written move-out notice requirement and professional carpet cleaning\n obligation.\n

\n
\n \n @if (initial2Completed()) {\n ER\n • Elena Rostova [Initialed]\n } @else {\n \n Click to Initial [ER]\n }\n \n
\n
\n
\n\n
\n\n \n
\n
\n

Execution & Legal Signatures

\n 2 of 2 Parties\n
\n\n
\n
\n
\n

Landlord Signature

\n \n Signed\n \n
\n
\n

Marcus Vance

\n

Agent for Evergreen Holdings LLC

\n
\n
\n

\n Date Signed:\n Aug 20, 2026 • 09:15 PDT\n

\n

\n Certificate ID:\n DS-EHG-8842-MV\n

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

Tenant Signature

\n @if (isSigned()) {\n \n Signed\n \n } @else {\n \n Pending Signature\n \n }\n
\n
\n @if (isSigned()) {\n

{{ signerName() }}

\n

\n e-Signed via DocuSign / UIPKGE Registry\n

\n } @else {\n

\n Awaiting signature execution via right sidebar\n

\n

\n Complete 2 initials above to enable signing\n

\n }\n
\n
\n

\n Date Signed:\n \n {{ isSigned() ? 'Aug 21, 2026 • 10:44 PDT' : 'Pending' }}\n \n

\n

\n Digital Audit Hash:\n \n {{ isSigned() ? 'SHA256:7f83b1...9069' : 'Unsigned' }}\n \n

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

Required Action Checklist

\n \n {{ completedCount() }} / 3 Done\n \n
\n

All initial markers must be completed prior to signing

\n
\n
\n \n
\n
\n @if (initial1Completed()) {\n \n } @else {\n 1\n }\n
\n
\n

Initial Section 2 (Rent & Fees)

\n

Acknowledges $3,450 rent & late charges

\n
\n
\n \n {{ initial1Completed() ? 'Done' : 'Click to jump' }}\n \n \n\n \n
\n
\n @if (initial2Completed()) {\n \n } @else {\n 2\n }\n
\n
\n

Initial Section 4 (Move-Out)

\n

Acknowledges 60-day notice & cleaning

\n
\n
\n \n {{ initial2Completed() ? 'Done' : 'Click to jump' }}\n \n \n\n
\n
\n
\n @if (isSigned()) {\n \n } @else {\n 3\n }\n
\n
\n

Sign Full Agreement

\n

Execute legal lease contract

\n
\n
\n \n {{ isSigned() ? 'Executed' : 'Pending' }}\n \n
\n
\n
\n\n
\n
\n

Electronic Signature Preview

\n

Adopt your legal signature typography

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

Adopted Signature

\n
\n {{ signerName() }}\n
\n
\n \n 256-Bit eIDAS / ESIGN Certified\n
\n
\n\n \n\n
\n @if (!isSigned()) {\n \n \n Sign & Finalize Agreement\n \n } @else {\n
\n
\n \n Lease Executed Successfully!\n
\n

\n A copy of the countersigned PDF has been securely dispatched to your verified email.\n

\n \n \n Download Signed PDF\n \n
\n }\n @if (!isSigned() && !canSign()) {\n

{{ signHint() }}

\n }\n
\n
\n
\n\n
\n
\n \n Cryptographic Tamper-Proof Audit Trail\n
\n

\n Every initial and signature event is stamped with SHA-256 integrity hash, RFC 3161 trusted timestamp,\n and logged in the immutable lease registry ledger.\n

\n
\n \n
\n
\n \n `,\n})\nexport class UiLeaseAgreementSignComponent {\n protected readonly AlertCircle = AlertCircle\n protected readonly BadgeCheck = BadgeCheck\n protected readonly Building2 = Building2\n protected readonly Check = Check\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly Download = Download\n protected readonly Lock = Lock\n protected readonly Pen = Pen\n protected readonly PenTool = PenTool\n protected readonly Printer = Printer\n protected readonly RotateCcw = RotateCcw\n protected readonly ShieldCheck = ShieldCheck\n\n @Input() set initialSigned(v: boolean) {\n if (v) {\n this.isSigned.set(true)\n this.initial1Completed.set(true)\n this.initial2Completed.set(true)\n }\n }\n @Input() set initialInitialsCompleted(v: boolean) {\n if (v) {\n this.initial1Completed.set(true)\n this.initial2Completed.set(true)\n }\n }\n @Input('class') className?: string\n\n readonly initial1Completed = signal(false)\n readonly initial2Completed = signal(false)\n readonly isSigned = signal(false)\n readonly signerName = signal('Elena Rostova')\n readonly signatureFont = signal('serif')\n readonly eConsentAgreed = signal(true)\n readonly downloadSuccess = signal(false)\n private downloadTimer: ReturnType | undefined\n\n readonly completedCount = computed(\n () => (this.initial1Completed() ? 1 : 0) + (this.initial2Completed() ? 1 : 0) + (this.isSigned() ? 1 : 0),\n )\n readonly pendingCount = computed(() => (this.initial1Completed() ? 0 : 1) + (this.initial2Completed() ? 0 : 1))\n readonly canSign = computed(\n () => this.initial1Completed() && this.initial2Completed() && this.eConsentAgreed() && !this.isSigned(),\n )\n readonly signHint = computed(() =>\n !this.initial1Completed() || !this.initial2Completed()\n ? 'Please complete all initial checkpoints above before signing.'\n : 'Please check the electronic consent box.',\n )\n\n get rootClass(): string {\n return cn('bg-background text-foreground w-full', this.className)\n }\n\n get initial1BoxClass(): string {\n return cn(\n 'rounded-lg border p-4 transition-colors duration-200',\n this.initial1Completed()\n ? 'border-success/40 bg-success/5'\n : 'border-warning/50 bg-warning/5 ring-warning/20 dark:bg-warning/10 ring-1',\n )\n }\n\n get initial2BoxClass(): string {\n return cn(\n 'rounded-lg border p-4 transition-colors duration-200',\n this.initial2Completed()\n ? 'border-success/40 bg-success/5'\n : 'border-warning/50 bg-warning/5 ring-warning/20 dark:bg-warning/10 ring-1',\n )\n }\n\n get initial1BtnClass(): string {\n return cn(\n 'shrink-0 gap-2 text-xs font-medium',\n this.initial1Completed()\n ? 'border-success/40 text-success hover:bg-success/10 text-success'\n : 'bg-warning hover:bg-warning/90 bg-warning dark:hover:bg-warning text-white',\n )\n }\n\n get initial2BtnClass(): string {\n return cn(\n 'shrink-0 gap-2 text-xs font-medium',\n this.initial2Completed()\n ? 'border-success/40 text-success hover:bg-success/10 text-success'\n : 'bg-warning hover:bg-warning/90 bg-warning dark:hover:bg-warning text-white',\n )\n }\n\n get tenantBoxClass(): string {\n return cn(\n 'rounded-lg border p-4 transition-colors duration-200',\n this.isSigned() ? 'border-success/40 bg-success/5' : 'border-border bg-muted/10 border-dashed',\n )\n }\n\n get tenantPreviewClass(): string {\n return cn(\n 'my-3 rounded-md border p-3 text-center transition-colors',\n this.isSigned() ? 'bg-card border-success/40' : 'border-muted-foreground/30 bg-muted/20 border-dashed',\n )\n }\n\n get signaturePreviewClass(): string {\n return cn(\n 'text-foreground text-2xl select-none',\n this.signatureFont() === 'serif' && 'font-medium tracking-wide italic',\n this.signatureFont() === 'script' && 'font-medium tracking-widest italic',\n this.signatureFont() === 'sans' && 'font-semibold tracking-tight',\n )\n }\n\n get signRowClass(): string {\n return cn(\n 'flex items-center justify-between rounded-lg border p-2.5 text-xs',\n this.isSigned() ? 'border-success/40 bg-success/5' : 'border-border/80 bg-card',\n )\n }\n\n get signBadgeClass(): string {\n return cn('text-xs', this.isSigned() ? 'border-success/30 text-success' : 'text-muted-foreground')\n }\n\n checkDotClass(done: boolean, muted = false): string {\n return cn(\n 'flex size-5 items-center justify-center rounded-full text-xs font-semibold',\n done\n ? 'bg-success bg-success text-white'\n : muted\n ? 'bg-muted text-muted-foreground'\n : 'bg-warning/20 text-warning',\n )\n }\n\n checkBadgeClass(done: boolean): string {\n return cn('text-xs', done ? 'border-success/30 text-success' : 'text-warning')\n }\n\n fontTabClass(font: SignatureFont): string {\n return cn(\n 'rounded-md py-1 text-center text-xs font-medium transition-colors',\n this.signatureFont() === font\n ? 'bg-card text-foreground shadow-xs'\n : 'text-muted-foreground hover:text-foreground',\n )\n }\n\n toggleInitial1(): void {\n if (this.isSigned()) return\n this.initial1Completed.update((v) => !v)\n }\n\n toggleInitial2(): void {\n if (this.isSigned()) return\n this.initial2Completed.update((v) => !v)\n }\n\n signAgreement(): void {\n if (!this.canSign()) return\n this.isSigned.set(true)\n }\n\n resetWorkflow(): void {\n this.initial1Completed.set(false)\n this.initial2Completed.set(false)\n this.isSigned.set(false)\n this.downloadSuccess.set(false)\n }\n\n handleDownload(): void {\n this.downloadSuccess.set(true)\n clearTimeout(this.downloadTimer)\n this.downloadTimer = setTimeout(() => this.downloadSuccess.set(false), 2500)\n }\n\n handlePrint(): void {\n if (typeof window !== 'undefined') window.print()\n }\n\n scrollToInitial1(): void {\n const el = document.getElementById('initial-marker-1') as HTMLElement | null\n el?.scrollIntoView?.({ behavior: 'smooth', block: 'center' })\n }\n\n scrollToInitial2(): void {\n const el = document.getElementById('initial-marker-2') as HTMLElement | null\n el?.scrollIntoView?.({ behavior: 'smooth', block: 'center' })\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/lease-agreement-sign/lease-agreement-sign.component.ts" }, { "path": "packages/registry-angular/blocks/lease-agreement-sign/index.ts", "content": "export { UiLeaseAgreementSignComponent, type SignatureFont } from './lease-agreement-sign.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/lease-agreement-sign/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/separator.json" ], "description": "DocuSign-style digital residential lease agreement signature and review workflow with terms summary, interactive initial checkpoints, sticky signature action sidebar, and cryptographic audit execution.", "categories": [ "real-estate", "hospitality", "app" ] }