Skip to content

Commit

Permalink
demo: routing configuration for component demos
Browse files Browse the repository at this point in the history
  • Loading branch information
@maxokorokov
maxokorokov committed Nov 10, 2023
1 parent 964abe2 commit 2fcf9e9
Show file tree
Hide file tree
Showing 49 changed files with 593 additions and 717 deletions.
43 changes: 24 additions & 19 deletions demo/src/app/components/accordion/accordion.routes.ts
View file
@@ -1,16 +1,14 @@
/* eslint-disable @typescript-eslint/no-var-requires */
import { ENVIRONMENT_INITIALIZER, inject } from '@angular/core';
import { ComponentWrapper } from '../../shared/component-wrapper/component-wrapper.component';
import { NgbdApiPage } from '../../shared/api-page/api-page.component';
import { NgbdExamplesPage } from '../../shared/examples-page/examples.component';
import { DemoListComponent } from '../../shared/examples-page/demo-list.component';
import { NgbdAccordionBasic } from './demos/basic/accordion-basic';
import { NgbdAccordionConfig } from './demos/config/accordion-config';
import { NgbdAccordionHeader } from './demos/header/accordion-header';
import { NgbdAccordionStatic } from './demos/static/accordion-static';
import { NgbdAccordionToggle } from './demos/toggle/accordion-toggle';
import { NgbdAccordionKeepContent } from './demos/keep-content/accordion-keep-content';
import { Routes } from '@angular/router';
import { NgbdDemoListService } from '../../services/demo-list.service';
import { NgbdAccordionOverviewComponent } from './overview/accordion-overview.component';
import { NgbdAcccordionDeprecationComponent } from './accordion-deprecation.component';

Expand All @@ -20,44 +18,50 @@ const OVERVIEW = {
customization: 'Customization',
};

const DEMOS = {
basic: {
const DEMOS = [
{
fragment: 'basic',
title: 'Accordion',
code: 'accordion/demos/basic/accordion-basic.ts',
markup: 'accordion/demos/basic/accordion-basic.html',
type: NgbdAccordionBasic,
},
static: {
{
fragment: 'static',
title: 'One open panel at a time',
code: 'accordion/demos/static/accordion-static.ts',
markup: 'accordion/demos/static/accordion-static.html',
type: NgbdAccordionStatic,
},
toggle: {
{
fragment: 'toggle',
title: 'Toggle panels',
code: 'accordion/demos/toggle/accordion-toggle.ts',
markup: 'accordion/demos/toggle/accordion-toggle.html',
type: NgbdAccordionToggle,
},
header: {
{
fragment: 'header',
title: 'Custom header',
code: 'accordion/demos/header/accordion-header.ts',
markup: 'accordion/demos/header/accordion-header.html',
type: NgbdAccordionHeader,
},
'keep-content': {
{
fragment: 'keep-content',
title: 'Keep content',
code: 'accordion/demos/keep-content/accordion-keep-content.ts',
markup: 'accordion/demos/keep-content/accordion-keep-content.html',
type: NgbdAccordionKeepContent,
},
config: {
{
fragment: 'config',
title: 'Global configuration of accordions',
code: 'accordion/demos/config/accordion-config.ts',
markup: 'accordion/demos/config/accordion-config.html',
type: NgbdAccordionConfig,
},
};
];

export const ROUTES: Routes = [
{ path: '', pathMatch: 'full', redirectTo: 'overview' },
Expand All @@ -69,16 +73,17 @@ export const ROUTES: Routes = [
bootstrap: 'https://getbootstrap.com/docs/%version%/components/accordion/',
header: NgbdAcccordionDeprecationComponent,
},
providers: [
children: [
{
provide: ENVIRONMENT_INITIALIZER,
multi: true,
useValue: () => inject(NgbdDemoListService).register('accordion', DEMOS, OVERVIEW),
path: 'overview',
component: NgbdAccordionOverviewComponent,
data: { overview: OVERVIEW },
},
{
path: 'examples',
component: DemoListComponent,
data: { demos: DEMOS },
},
],
children: [
{ path: 'overview', component: NgbdAccordionOverviewComponent },
{ path: 'examples', component: NgbdExamplesPage },
{ path: 'api', component: NgbdApiPage },
],
},
Expand Down
12 changes: 6 additions & 6 deletions demo/src/app/components/accordion/overview/accordion-overview.component.html
View file
Expand Up @@ -2,7 +2,7 @@ <h4>
<span class="badge bg-info text-dark">Since 14.1.0</span>
</h4>

<ngbd-overview-section [section]="sections['basic-usage']">
<ngbd-page-header fragment="basic-usage" [title]="overview['basic-usage']">
<p>
We're using a set of accordion directives and matching exactly the markup of the
<a href="https://getbootstrap.com/docs/{{ bootstrapVersion }}/components/accordion/#example"
Expand Down Expand Up @@ -31,9 +31,9 @@ <h4>
</p>

<p>For more details please refer to the <a routerLink="../api">complete API</a></p>
</ngbd-overview-section>
</ngbd-page-header>

<ngbd-overview-section [section]="sections['features']">
<ngbd-page-header fragment="features" [title]="overview['features']">
<h4>One panel at a time</h4>

<p>
Expand Down Expand Up @@ -61,9 +61,9 @@ <h4>Events</h4>
</p>

<ngbd-code [snippet]="EVENTS"></ngbd-code>
</ngbd-overview-section>
</ngbd-page-header>

<ngbd-overview-section [section]="sections['customization']">
<ngbd-page-header fragment="customization" [title]="overview['customization']">
<p>
You can provide a different template for accordion headers. In this case we would recommend changing the
<code>ngbAccordionHeader</code> markup and using <code>ngbAccordionToggle</code> on the element that toggles a
Expand All @@ -79,4 +79,4 @@ <h4>Events</h4>
<ngbd-code [snippet]="CUSTOM_HEADER"></ngbd-code>

<p>Please see a <a routerLink="../examples" fragment="header">working example</a> for more details</p>
</ngbd-overview-section>
</ngbd-page-header>
18 changes: 6 additions & 12 deletions demo/src/app/components/accordion/overview/accordion-overview.component.ts
View file
@@ -1,32 +1,33 @@
import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
import { ChangeDetectionStrategy, Component, inject, Input } from '@angular/core';

import { Snippet } from '../../../services/snippet';
import { NgbdDemoListService } from '../../../services/demo-list.service';
import { CodeComponent } from '../../../shared/code.component';
import { NgbAlertModule } from '@ng-bootstrap/ng-bootstrap';
import { NgbdApiDocsBadge } from '../../../shared/api-docs';
import { RouterLink } from '@angular/router';
import { NgbdOverviewSectionComponent } from '../../../shared/overview/overview-section.component';
import { NgbdOverview } from '../../../shared/overview/overview';
import { NgbdAccordionDemoComponent } from './demo/accordion-overview-demo.component';
import { PageHeaderComponent } from '../../../shared/page-header.component';
import { LIB_VERSIONS } from '../../../tokens';

@Component({
selector: 'ngbd-accordion-overview',
standalone: true,
imports: [
NgbdOverviewSectionComponent,
CodeComponent,
NgbAlertModule,
NgbdApiDocsBadge,
RouterLink,
NgbdAccordionDemoComponent,
PageHeaderComponent,
],
templateUrl: './accordion-overview.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
host: { '[class.overview]': 'true' },
})
export class NgbdAccordionOverviewComponent {
bootstrapVersion = inject(LIB_VERSIONS).bootstrap;
@Input() overview: { fragment: string; title: string };

BASIC_ACCORDION = Snippet({
lang: 'html',
code: `
Expand Down Expand Up @@ -108,11 +109,4 @@ export class NgbdAccordionOverviewComponent {
</div>
`,
});

bootstrapVersion = inject(LIB_VERSIONS).bootstrap;
sections: NgbdOverview = {};

constructor(demoList: NgbdDemoListService) {
this.sections = demoList.getOverviewSections('accordion');
}
}
32 changes: 14 additions & 18 deletions demo/src/app/components/alert/alert.routes.ts
View file
Expand Up @@ -2,48 +2,51 @@

import { Routes } from '@angular/router';
import { ComponentWrapper } from '../../shared/component-wrapper/component-wrapper.component';
import { NgbdExamplesPage } from '../../shared/examples-page/examples.component';
import { DemoListComponent } from '../../shared/examples-page/demo-list.component';
import { NgbdApiPage } from '../../shared/api-page/api-page.component';
import { ENVIRONMENT_INITIALIZER, inject } from '@angular/core';
import { NgbdDemoListService } from '../../services/demo-list.service';
import { NgbdAlertBasic } from './demos/basic/alert-basic';
import { NgbdAlertCloseable } from './demos/closeable/alert-closeable';
import { NgbdAlertSelfclosing } from './demos/selfclosing/alert-selfclosing';
import { NgbdAlertCustom } from './demos/custom/alert-custom';
import { NgbdAlertConfig } from './demos/config/alert-config';

const DEMOS = {
basic: {
const DEMOS = [
{
fragment: 'basic',
title: 'Basic Alert',
type: NgbdAlertBasic,
code: 'alert/demos/basic/alert-basic.ts',
markup: 'alert/demos/basic/alert-basic.html',
},
closeable: {
{
fragment: 'closeable',
title: 'Closable Alert',
type: NgbdAlertCloseable,
code: 'alert/demos/closeable/alert-closeable.ts',
markup: 'alert/demos/closeable/alert-closeable.html',
},
selfclosing: {
{
fragment: 'selfclosing',
title: 'Self closing alert',
type: NgbdAlertSelfclosing,
code: 'alert/demos/selfclosing/alert-selfclosing.ts',
markup: 'alert/demos/selfclosing/alert-selfclosing.html',
},
custom: {
{
fragment: 'custom',
title: 'Custom alert',
type: NgbdAlertCustom,
code: 'alert/demos/custom/alert-custom.ts',
markup: 'alert/demos/custom/alert-custom.html',
},
config: {
{
fragment: 'config',
title: 'Global configuration of alerts',
type: NgbdAlertConfig,
code: 'alert/demos/config/alert-config.ts',
markup: 'alert/demos/config/alert-config.html',
},
};
];

export const ROUTES: Routes = [
{ path: '', pathMatch: 'full', redirectTo: 'examples' },
Expand All @@ -54,15 +57,8 @@ export const ROUTES: Routes = [
name: 'Alert',
bootstrap: 'https://getbootstrap.com/docs/%version%/components/alerts/',
},
providers: [
{
provide: ENVIRONMENT_INITIALIZER,
multi: true,
useValue: () => inject(NgbdDemoListService).register('alert', DEMOS),
},
],
children: [
{ path: 'examples', component: NgbdExamplesPage },
{ path: 'examples', component: DemoListComponent, data: { demos: DEMOS } },
{ path: 'api', component: NgbdApiPage },
],
},
Expand Down
29 changes: 12 additions & 17 deletions demo/src/app/components/carousel/carousel.routes.ts
View file
@@ -1,41 +1,43 @@
/* eslint-disable @typescript-eslint/no-var-requires */
import { ENVIRONMENT_INITIALIZER, inject } from '@angular/core';
import { ComponentWrapper } from '../../shared/component-wrapper/component-wrapper.component';
import { NgbdDemoListService } from '../../services/demo-list.service';
import { NgbdApiPage } from '../../shared/api-page/api-page.component';
import { NgbdExamplesPage } from '../../shared/examples-page/examples.component';
import { DemoListComponent } from '../../shared/examples-page/demo-list.component';
import { NgbdCarouselBasic } from './demos/basic/carousel-basic';
import { NgbdCarouselConfig } from './demos/config/carousel-config';
import { NgbdCarouselNavigation } from './demos/navigation/carousel-navigation';
import { NgbdCarouselPause } from './demos/pause/carousel-pause';
import { Routes } from '@angular/router';

const DEMOS = {
basic: {
const DEMOS = [
{
fragment: 'basic',
title: 'Carousel',
type: NgbdCarouselBasic,
code: 'carousel/demos/basic/carousel-basic.ts',
markup: 'carousel/demos/basic/carousel-basic.html',
},
navigation: {
{
fragment: 'navigation',
title: 'Navigation arrows and indicators',
type: NgbdCarouselNavigation,
code: 'carousel/demos/navigation/carousel-navigation.ts',
markup: 'carousel/demos/navigation/carousel-navigation.html',
},
pause: {
{
fragment: 'pause',
title: 'Pause/cycle',
type: NgbdCarouselPause,
code: 'carousel/demos/pause/carousel-pause.ts',
markup: 'carousel/demos/pause/carousel-pause.html',
},
config: {
{
fragment: 'config',
title: 'Global configuration of carousels',
type: NgbdCarouselConfig,
code: 'carousel/demos/config/carousel-config.ts',
markup: 'carousel/demos/config/carousel-config.html',
},
};
];

export const ROUTES: Routes = [
{ path: '', pathMatch: 'full', redirectTo: 'examples' },
Expand All @@ -46,15 +48,8 @@ export const ROUTES: Routes = [
name: 'Carousel',
bootstrap: 'https://getbootstrap.com/docs/%version%/components/carousel/',
},
providers: [
{
provide: ENVIRONMENT_INITIALIZER,
multi: true,
useValue: () => inject(NgbdDemoListService).register('carousel', DEMOS),
},
],
children: [
{ path: 'examples', component: NgbdExamplesPage },
{ path: 'examples', component: DemoListComponent, data: { demos: DEMOS } },
{ path: 'api', component: NgbdApiPage },
],
},
Expand Down

0 comments on commit 2fcf9e9

Please sign in to comment.