13519 fixed steps example broken (#13527)

* Fixed routing module * Added ButtonModule and Fragment in navigate to go to the anchor * formatted file * formatted files
primefaces · Aug 26, 2023 · 8f60f39 · 8f60f39
1 parent 83e7e7e
commit 8f60f39
Show file tree

Hide file tree

Showing 15 changed files with 30 additions and 24 deletions.
diff --git a/src/app/components/calendar/calendar.ts b/src/app/components/calendar/calendar.ts
@@ -197,8 +197,14 @@ export const CALENDAR_VALUE_ACCESSOR: any = {
                         </span>
                     </div>
                     <div class="p-yearpicker" *ngIf="currentView === 'year'">
-                        <span *ngFor="let y of yearPickerValues()" (click)="onYearSelect($event, y)" (keydown)="onYearCellKeydown($event, y)"
-                              class="p-yearpicker-year" [ngClass]="{ 'p-highlight': isYearSelected(y), 'p-disabled': isYearDisabled(y) }" pRipple>
+                        <span
+                            *ngFor="let y of yearPickerValues()"
+                            (click)="onYearSelect($event, y)"
+                            (keydown)="onYearCellKeydown($event, y)"
+                            class="p-yearpicker-year"
+                            [ngClass]="{ 'p-highlight': isYearSelected(y), 'p-disabled': isYearDisabled(y) }"
+                            pRipple
+                        >
                             {{ y }}
                         </span>
                     </div>

diff --git a/src/app/components/paginator/paginator.ts b/src/app/components/paginator/paginator.ts
@@ -217,7 +217,7 @@ export class Paginator implements OnInit, AfterContentInit, OnChanges {
     @Output() onPageChange: EventEmitter<PaginatorState> = new EventEmitter<PaginatorState>();
 
     @ContentChildren(PrimeTemplate) templates: Nullable<QueryList<any>>;
-    
+
     firstPageLinkIconTemplate: Nullable<TemplateRef<any>>;
 
     previousPageLinkIconTemplate: Nullable<TemplateRef<any>>;

diff --git a/src/app/components/table/table.ts b/src/app/components/table/table.ts
@@ -684,7 +684,7 @@ export class Table implements OnInit, AfterViewInit, AfterContentInit, Blockable
      * The breakpoint to define the maximum width boundary when using stack responsive layout.
      * @group Props
      */
-    @Input() breakpoint: string = '960px';  
+    @Input() breakpoint: string = '960px';
     /**
      * Locale to be used in paginator formatting.
      * @group Props

diff --git a/src/app/components/tooltip/tooltip.ts b/src/app/components/tooltip/tooltip.ts
@@ -440,7 +440,7 @@ export class Tooltip implements AfterViewInit, OnDestroy {
         if (content instanceof TemplateRef) {
             const embeddedViewRef = this.viewContainer.createEmbeddedView(content);
             embeddedViewRef.detectChanges();
-            embeddedViewRef.rootNodes.forEach(node => this.tooltipText.appendChild(node));
+            embeddedViewRef.rootNodes.forEach((node) => this.tooltipText.appendChild(node));
         } else if (this.getOption('escape')) {
             this.tooltipText.innerHTML = '';
             this.tooltipText.appendChild(document.createTextNode(content));

diff --git a/src/app/showcase/doc/paginator/localedoc.ts b/src/app/showcase/doc/paginator/localedoc.ts
@@ -95,4 +95,4 @@ export class PaginatorLocaleDemo {
     }
 }`
     };
-}
+}
diff --git a/src/app/showcase/doc/steps/basicdoc.ts b/src/app/showcase/doc/steps/basicdoc.ts
@@ -25,7 +25,7 @@ export class BasicDoc implements OnInit {
         this.items = [
             {
                 label: 'Personal',
-                routerLink: ''
+                routerLink: 'personal'
             },
             {
                 label: 'Seat',

diff --git a/src/app/showcase/doc/steps/confirmationdemo.ts b/src/app/showcase/doc/steps/confirmationdemo.ts
@@ -70,6 +70,6 @@ export class ConfirmationDemo implements OnInit {
     }
 
     prevPage() {
-        this.router.navigate(['steps/payment']);
+        this.router.navigate(['steps/payment'], { fragment: 'routing' });
     }
 }
diff --git a/src/app/showcase/doc/steps/paymentdemo.ts b/src/app/showcase/doc/steps/paymentdemo.ts
@@ -53,10 +53,10 @@ export class PaymentDemo implements OnInit {
 
     nextPage() {
         this.ticketService.ticketInformation.paymentInformation = this.paymentInformation;
-        this.router.navigate(['steps/confirmation']);
+        this.router.navigate(['steps/confirmation'], { fragment: 'routing' });
     }
 
     prevPage() {
-        this.router.navigate(['steps/seat']);
+        this.router.navigate(['steps/seat'], { fragment: 'routing' });
     }
 }
diff --git a/src/app/showcase/doc/steps/personaldemo.ts b/src/app/showcase/doc/steps/personaldemo.ts
@@ -58,7 +58,7 @@ export class PersonalDemo implements OnInit {
     nextPage() {
         if (this.personalInformation.firstname && this.personalInformation.lastname && this.personalInformation.age) {
             this.ticketService.ticketInformation.personalInformation = this.personalInformation;
-            this.router.navigate(['steps/seat']);
+            this.router.navigate(['steps/seat'], { fragment: 'routing' });
 
             return;
         }

diff --git a/src/app/showcase/doc/steps/routingdoc.ts b/src/app/showcase/doc/steps/routingdoc.ts
@@ -129,11 +129,11 @@ export class StepsRoutingDemo implements OnInit {
         {
             path: '',
             children: [
-                { path: '', redirectTo: 'personal', pathMatch: 'full' },
                 { path: 'personal', component: PersonalDemo },
-                { path: 'confirmation', component: ConfirmationDemo },
                 { path: 'seat', component: SeatDemo },
                 { path: 'payment', component: PaymentDemo }
+                { path: 'confirmation', component: ConfirmationDemo },
+                { path: '', redirectTo: 'personal', pathMatch: 'full' },
             ]
         }
     ])`,

diff --git a/src/app/showcase/doc/steps/seatdemo.ts b/src/app/showcase/doc/steps/seatdemo.ts
@@ -76,10 +76,10 @@ export class SeatDemo implements OnInit {
 
     nextPage() {
         this.ticketService.ticketInformation.seatInformation = this.seatInformation;
-        this.router.navigate(['steps/payment']);
+        this.router.navigate(['steps/payment'], { fragment: 'routing' });
     }
 
     prevPage() {
-        this.router.navigate(['steps/personal']);
+        this.router.navigate(['steps/personal'], { fragment: 'routing' });
     }
 }
diff --git a/src/app/showcase/doc/steps/stepsdoc.module.ts b/src/app/showcase/doc/steps/stepsdoc.module.ts
@@ -21,9 +21,10 @@ import { SeatDemo } from './seatdemo';
 import { StyleDoc } from './styledoc';
 import { TicketService } from '../../service/ticketservice';
 import { AccessibilityDoc } from './accessibilitydoc';
+import { ButtonModule } from 'primeng/button';
 
 @NgModule({
-    imports: [CommonModule, AppCodeModule, StepsModule, ToastModule, AppDocModule, FormsModule, DropdownModule, InputTextModule, InputMaskModule, CheckboxModule, CardModule],
+    imports: [CommonModule, AppCodeModule, StepsModule, ToastModule, AppDocModule, FormsModule, DropdownModule, InputTextModule, InputMaskModule, CheckboxModule, CardModule, ButtonModule],
     declarations: [BasicDoc, ImportDoc, StyleDoc, InteractiveDoc, ConfirmationDemo, PaymentDemo, PersonalDemo, SeatDemo, RoutingDoc, AccessibilityDoc],
     exports: [AppDocModule],
     providers: [TicketService]

diff --git a/src/app/showcase/doc/tooltip/templatedoc.ts b/src/app/showcase/doc/tooltip/templatedoc.ts
@@ -12,9 +12,7 @@ import { Code } from '../../domain/code';
             <ng-template #tooltipContent>
                 <div class="flex align-items-center">
                     <img src="https://primefaces.org/cdn/primeng/images/primeng.svg" height="20" class="mr-2" />
-                    <span>
-                        <b>PrimeNG</b> rocks!
-                    </span>
+                    <span> <b>PrimeNG</b> rocks! </span>
                 </div>
             </ng-template>
         </div>
@@ -51,4 +49,4 @@ export class TemplateDoc {
     </div>
 </ng-template>`
     };
-}
+}
diff --git a/src/app/showcase/doc/treetable/paginatorlocaledoc.ts b/src/app/showcase/doc/treetable/paginatorlocaledoc.ts
@@ -12,7 +12,7 @@ interface Column {
     selector: 'paginator-locale-doc',
     template: ` <section>
         <app-docsectiontext [title]="title" [id]="id" [level]="3" #docsectiontext>
-        <p>paginator localization information such as page numbers and rows per page options are defined with the <i>paginatorLocale</i> property which defaults to the user locale.</p>
+            <p>paginator localization information such as page numbers and rows per page options are defined with the <i>paginatorLocale</i> property which defaults to the user locale.</p>
         </app-docsectiontext>
         <div class="card">
             <p-treeTable paginatorLocale="fa-IR" [value]="files" [columns]="cols" [paginator]="true" [rows]="10" [scrollable]="true" [tableStyle]="{ 'min-width': '50rem' }">

diff --git a/src/app/showcase/pages/steps/stepsdemo-routing.module.ts b/src/app/showcase/pages/steps/stepsdemo-routing.module.ts
@@ -13,10 +13,11 @@ import { StepsDemo } from './stepsdemo';
                 path: '',
                 component: StepsDemo,
                 children: [
-                    { path: '', component: PersonalDemo },
-                    { path: 'confirmation', component: ConfirmationDemo },
+                    { path: 'personal', component: PersonalDemo },
                     { path: 'seat', component: SeatDemo },
-                    { path: 'payment', component: PaymentDemo }
+                    { path: 'payment', component: PaymentDemo },
+                    { path: 'confirmation', component: ConfirmationDemo },
+                    { path: '', redirectTo: 'personal', pathMatch: 'full' }
                 ]
             }
         ])