docs(dialog/sheet): add close dialog/sheet example

spartan-ng · Dec 21, 2024 · e68cf54 · e68cf54
1 parent 29a1046
commit e68cf54
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 35 deletions.
diff --git a/apps/app/src/app/pages/(components)/components/(dialog)/dialog-close.preview.ts b/apps/app/src/app/pages/(components)/components/(dialog)/dialog-close.preview.ts
@@ -56,7 +56,7 @@ import { HlmLabelDirective } from '@spartan-ng/ui-label-helm';
 	`,
 })
 export class DialogClosePreviewComponent {
-	viewchildDialogRef = viewChild(BrnDialogComponent);
+	public viewchildDialogRef = viewChild(BrnDialogComponent);
 
 	closeDialog() {
 		this.viewchildDialogRef()?.close({});
@@ -122,7 +122,7 @@ import { HlmLabelDirective } from '@spartan-ng/ui-label-helm';
 	\`,
 })
 export class DialogClosePreviewComponent {
-	viewchildDialogRef = viewChild(BrnDialogComponent);
+	public viewchildDialogRef = viewChild(BrnDialogComponent);
 
 	closeDialog() {
 		this.viewchildDialogRef()?.close({});

diff --git a/apps/app/src/app/pages/(components)/components/(sheet)/sheet-close.preview.ts b/apps/app/src/app/pages/(components)/components/(sheet)/sheet-close.preview.ts
@@ -1,7 +1,12 @@
 import { Component, viewChild } from '@angular/core';
 import { provideIcons } from '@ng-icons/core';
 import { lucideCross } from '@ng-icons/lucide';
-import { BrnSheetCloseDirective, BrnSheetComponent, BrnSheetContentDirective, BrnSheetTriggerDirective } from '@spartan-ng/brain/sheet';
+import {
+	BrnSheetCloseDirective,
+	BrnSheetComponent,
+	BrnSheetContentDirective,
+	BrnSheetTriggerDirective,
+} from '@spartan-ng/brain/sheet';
 import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
 import { HlmLabelDirective } from '@spartan-ng/ui-label-helm';
 import {
@@ -15,16 +20,16 @@ import {
 	selector: 'spartan-sheet-close-preview',
 	standalone: true,
 	imports: [
-    BrnSheetTriggerDirective,
-    BrnSheetContentDirective,
-    BrnSheetCloseDirective,
-    HlmSheetComponent,
-    HlmSheetContentComponent,
-    HlmSheetHeaderComponent,
-    HlmSheetTitleDirective,
-    HlmButtonDirective,
-    HlmLabelDirective
-],
+		BrnSheetTriggerDirective,
+		BrnSheetContentDirective,
+		BrnSheetCloseDirective,
+		HlmSheetComponent,
+		HlmSheetContentComponent,
+		HlmSheetHeaderComponent,
+		HlmSheetTitleDirective,
+		HlmButtonDirective,
+		HlmLabelDirective,
+	],
 	providers: [provideIcons({ lucideCross })],
 	template: `
 		<hlm-sheet #sheetRef side="right">
@@ -33,30 +38,30 @@ import {
 				<hlm-sheet-header>
 					<h3 hlmSheetTitle>Sheet</h3>
 				</hlm-sheet-header>
-					<div class="grid gap-4 py-4">
-						<div class="flex items-center justify-between gap-4">
-							<label hlmLabel>Close sheet by directive</label>
-							<button hlmBtn brnSheetClose>Close</button>
-						</div>
-						<div class="flex items-center justify-between gap-4">
-							<label hlmLabel>Close sheet by reference</label>
-							<button hlmBtn (click)="sheetRef.close({})">Close</button>
-						</div>
-						<div class="flex items-center justify-between gap-4">
-							<label hlmLabel>Close sheet by viewchild reference</label>
-							<button hlmBtn (click)="closeSheet()">Close</button>
-						</div>
+				<div class="grid gap-4 py-4">
+					<div class="flex items-center justify-between gap-4">
+						<label hlmLabel>Close sheet by directive</label>
+						<button hlmBtn brnSheetClose>Close</button>
+					</div>
+					<div class="flex items-center justify-between gap-4">
+						<label hlmLabel>Close sheet by reference</label>
+						<button hlmBtn (click)="sheetRef.close({})">Close</button>
 					</div>
+					<div class="flex items-center justify-between gap-4">
+						<label hlmLabel>Close sheet by viewchild reference</label>
+						<button hlmBtn (click)="closeSheet()">Close</button>
+					</div>
+				</div>
 			</hlm-sheet-content>
 		</hlm-sheet>
 	`,
 })
 export class SheetClosePreviewComponent {
-    viewchildSheetRef = viewChild(BrnSheetComponent);
-  
-    closeSheet() {
-      this.viewchildSheetRef()?.close({});
-    }
+	public viewchildSheetRef = viewChild(BrnSheetComponent);
+
+	closeSheet() {
+		this.viewchildSheetRef()?.close({});
+	}
 }
 
 export const defaultCloseCode = `
@@ -114,7 +119,7 @@ import {
 	\`,
 })
 export class SheetClosePreviewComponent {
-    viewchildSheetRef = viewChild(BrnSheetComponent);
+    public viewchildSheetRef = viewChild(BrnSheetComponent);
   
     closeSheet() {
       this.viewchildSheetRef()?.close({});

diff --git a/apps/app/src/app/pages/(components)/components/(sheet)/sheet.page.ts b/apps/app/src/app/pages/(components)/components/(sheet)/sheet.page.ts
@@ -12,8 +12,8 @@ import { SectionSubHeadingComponent } from '../../../../shared/layout/section-su
 import { TabsCliComponent } from '../../../../shared/layout/tabs-cli.component';
 import { TabsComponent } from '../../../../shared/layout/tabs.component';
 import { metaWith } from '../../../../shared/meta/meta.util';
-import { SheetClosePreviewComponent, defaultCloseCode } from './sheet-close.preview';
 import { SheetSidePreviewComponent, sideCode } from './sheet--side.preview';
+import { SheetClosePreviewComponent, defaultCloseCode } from './sheet-close.preview';
 import { SheetPreviewComponent, defaultCode, defaultImports, defaultSkeleton } from './sheet.preview';
 
 export const routeMeta: RouteMeta = {
@@ -40,7 +40,7 @@ export const routeMeta: RouteMeta = {
 		PageBottomNavLinkComponent,
 		SheetPreviewComponent,
 		SheetSidePreviewComponent,
-		SheetClosePreviewComponent
+		SheetClosePreviewComponent,
 	],
 	template: `
 		<section spartanMainSection>
@@ -83,7 +83,7 @@ export const routeMeta: RouteMeta = {
 				<div spartanCodePreview firstTab>
 					<spartan-sheet-close-preview />
 				</div>
-			<spartan-code secondTab [code]="defaultCloseCode" />
+				<spartan-code secondTab [code]="defaultCloseCode" />
 			</spartan-tabs>
 
 			<spartan-page-bottom-nav>