docs: fix opening examples in stackblitz (#1299)

allianz · Aug 26, 2024 · ea96a78 · ea96a78
1 parent 5595eaf
commit ea96a78
Show file tree

Hide file tree

Showing 25 changed files with 70 additions and 68 deletions.
diff --git a/...tation/examples/comparison-table/comparison-table-error/comparison-table-error-example.ts b/...tation/examples/comparison-table/comparison-table-error/comparison-table-error-example.ts
@@ -36,7 +36,7 @@ import {
         NxErrorComponent,
     ],
 })
-export class ComparisonTableErrorExample {
+export class ComparisonTableErrorExampleComponent {
     constructor() {}
     control = new FormControl(null);
 

diff --git a/...cts/ng-aquila/documentation/examples/comparison-table/comparison-table-examples.module.ts b/...cts/ng-aquila/documentation/examples/comparison-table/comparison-table-examples.module.ts
@@ -20,7 +20,7 @@ import { BreakdownTableExpertExampleComponent } from './breakdown-table-expert/b
 import { ComparisonTableExampleComponent } from './comparison-table/comparison-table-example';
 import { ComparisonTableDisabledColumnsExampleComponent } from './comparison-table-disabled-columns/comparison-table-disabled-columns-example';
 import { ComparisonTableDynamicExampleComponent } from './comparison-table-dynamic/comparison-table-dynamic-example';
-import { ComparisonTableErrorExample } from './comparison-table-error/comparison-table-error-example';
+import { ComparisonTableErrorExampleComponent } from './comparison-table-error/comparison-table-error-example';
 import { ComparisonTableExpandableAreaExampleComponent } from './comparison-table-expandable-area/comparison-table-expandable-area-example';
 import { ComparisonTableFormElementsExampleComponent } from './comparison-table-form-elements/comparison-table-form-elements-example';
 import { ComparisonTableHiddenColumnsExampleComponent } from './comparison-table-hidden-columns/comparison-table-hidden-columns-example';
@@ -33,7 +33,7 @@ import { RecommendationTableExampleComponent } from './recommendation-table/reco
 import { RecommendationTableExpertExampleComponent } from './recommendation-table-expert/recommendation-table-expert-example';
 
 const EXAMPLES = [
-    ComparisonTableErrorExample,
+    ComparisonTableErrorExampleComponent,
     ComparisonTableExampleComponent,
     ComparisonTableStaticExampleComponent,
     ComparisonTableDisabledColumnsExampleComponent,
@@ -75,7 +75,7 @@ const EXAMPLES = [
 export class ComparisonExamplesModule {
     static components() {
         return {
-            'comparison-table-error': ComparisonTableErrorExample,
+            'comparison-table-error': ComparisonTableErrorExampleComponent,
             'comparison-table': ComparisonTableExampleComponent,
             'comparison-table-static': ComparisonTableStaticExampleComponent,
             'comparison-table-disabled-columns':

diff --git a/projects/ng-aquila/documentation/examples/datefield/datefield-examples.module.ts b/projects/ng-aquila/documentation/examples/datefield/datefield-examples.module.ts
@@ -20,7 +20,7 @@ import { DatefieldMinMaxExampleComponent } from './datefield-min-max/datefield-m
 import { DatefieldParsingExampleComponent } from './datefield-parsing/datefield-parsing-example';
 import { DatefieldRangeExampleComponent } from './datefield-range/datefield-range-example';
 import { DatefieldReactiveExampleComponent } from './datefield-reactive/datefield-reactive-example';
-import { DatefieldReadonlyExample } from './datefield-readonly/datefield-readonly-example';
+import { DatefieldReadonlyExampleComponent } from './datefield-readonly/datefield-readonly-example';
 import { DatefieldScrollStrategyProviderExampleComponent } from './datefield-scroll-strategy-provider/datefield-scroll-strategy-provider-example';
 import { DatefieldStartviewExampleComponent } from './datefield-startview/datefield-startview-example';
 import { DatefieldToggleFocusExampleComponent } from './datefield-toggle-focus/datefield-toggle-focus-example';
@@ -43,7 +43,7 @@ const EXAMPLES = [
     DatefieldStartviewExampleComponent,
     DatefieldToggleFocusExampleComponent,
     DatefieldScrollStrategyProviderExampleComponent,
-    DatefieldReadonlyExample,
+    DatefieldReadonlyExampleComponent,
 ];
 
 @NgModule({
@@ -81,7 +81,7 @@ export class DatefieldExamplesModule {
             'datefield-toggle-focus': DatefieldToggleFocusExampleComponent,
             'datefield-scroll-strategy-provider':
                 DatefieldScrollStrategyProviderExampleComponent,
-            'datefield-readonly': DatefieldReadonlyExample,
+            'datefield-readonly': DatefieldReadonlyExampleComponent,
         };
     }
 }
diff --git a/...-aquila/documentation/examples/datefield/datefield-readonly/datefield-readonly-example.ts b/...-aquila/documentation/examples/datefield/datefield-readonly/datefield-readonly-example.ts
@@ -26,7 +26,7 @@ import { NxInputModule } from '@aposin/ng-aquila/input';
         NxInputModule,
     ],
 })
-export class DatefieldReadonlyExample {
+export class DatefieldReadonlyExampleComponent {
     adapter = inject(NxDateAdapter);
     currentDate = this.adapter.today();
 }
diff --git a/...mentation/examples/licence-plate/licence-plate-disabled/licence-plate-disabled-example.ts b/...mentation/examples/licence-plate/licence-plate-disabled/licence-plate-disabled-example.ts
@@ -47,7 +47,7 @@ import {
         NxCheckboxComponent,
     ],
 })
-export class LicencePlateDisabledExample {
+export class LicencePlateDisabledExampleComponent {
     disabled = true;
     value = '';
 }
diff --git a/projects/ng-aquila/documentation/examples/licence-plate/licence-plate-examples.module.ts b/projects/ng-aquila/documentation/examples/licence-plate/licence-plate-examples.module.ts
@@ -8,13 +8,13 @@ import { NxInputModule } from '@aposin/ng-aquila/input';
 import { NxLicencePlateModule } from '@aposin/ng-aquila/licence-plate';
 
 import { ExamplesSharedModule } from '../examples-shared.module';
-import { LicencePlateDisabledExample } from './licence-plate-disabled/licence-plate-disabled-example';
+import { LicencePlateDisabledExampleComponent } from './licence-plate-disabled/licence-plate-disabled-example';
 import { LicencePlateEuroExampleComponent } from './licence-plate-euro/licence-plate-euro-example';
-import { LicencePlateExpertExample } from './licence-plate-expert/licence-plate-expert-example';
-import { LicencePlateExpertStatesExample } from './licence-plate-expert-states/licence-plate-expert-states-example';
-import { LicencePlateNgmodelExample } from './licence-plate-ngmodel/licence-plate-ngmodel-example';
+import { LicencePlateExpertExampleComponent } from './licence-plate-expert/licence-plate-expert-example';
+import { LicencePlateExpertStatesExampleComponent } from './licence-plate-expert-states/licence-plate-expert-states-example';
+import { LicencePlateNgmodelExampleComponent } from './licence-plate-ngmodel/licence-plate-ngmodel-example';
 import { LicencePlateOtherExampleComponent } from './licence-plate-other/licence-plate-other-example';
-import { LicencePlateReactiveExample } from './licence-plate-reactive/licence-plate-reactive-example';
+import { LicencePlateReactiveExampleComponent } from './licence-plate-reactive/licence-plate-reactive-example';
 import { LicencePlateSeasonalExampleComponent } from './licence-plate-seasonal/licence-plate-seasonal-example';
 import { LicencePlateSpecialExampleComponent } from './licence-plate-special/licence-plate-special-example';
 import { LicencePlateStandardExampleComponent } from './licence-plate-standard/licence-plate-standard-example';
@@ -25,11 +25,11 @@ const EXAMPLES = [
     LicencePlateSpecialExampleComponent,
     LicencePlateOtherExampleComponent,
     LicencePlateEuroExampleComponent,
-    LicencePlateNgmodelExample,
-    LicencePlateReactiveExample,
-    LicencePlateExpertStatesExample,
-    LicencePlateDisabledExample,
-    LicencePlateExpertExample,
+    LicencePlateNgmodelExampleComponent,
+    LicencePlateReactiveExampleComponent,
+    LicencePlateExpertStatesExampleComponent,
+    LicencePlateDisabledExampleComponent,
+    LicencePlateExpertExampleComponent,
 ];
 
 @NgModule({
@@ -55,11 +55,12 @@ export class LicencePlateExamplesModule {
             'licence-plate-special': LicencePlateSpecialExampleComponent,
             'licence-plate-other': LicencePlateOtherExampleComponent,
             'licence-plate-euro': LicencePlateEuroExampleComponent,
-            'licence-plate-ngmodel': LicencePlateNgmodelExample,
-            'licence-plate-reactive': LicencePlateReactiveExample,
-            'licence-plate-expert': LicencePlateExpertExample,
-            'licence-plate-expert-states': LicencePlateExpertStatesExample,
-            'licence-plate-disabled': LicencePlateDisabledExample,
+            'licence-plate-ngmodel': LicencePlateNgmodelExampleComponent,
+            'licence-plate-reactive': LicencePlateReactiveExampleComponent,
+            'licence-plate-expert': LicencePlateExpertExampleComponent,
+            'licence-plate-expert-states':
+                LicencePlateExpertStatesExampleComponent,
+            'licence-plate-disabled': LicencePlateDisabledExampleComponent,
         };
     }
 }
diff --git a/...examples/licence-plate/licence-plate-expert-states/licence-plate-expert-states-example.ts b/...examples/licence-plate/licence-plate-expert-states/licence-plate-expert-states-example.ts
@@ -47,7 +47,7 @@ import {
         NxCheckboxComponent,
     ],
 })
-export class LicencePlateExpertStatesExample {
+export class LicencePlateExpertStatesExampleComponent {
     disabled = false;
     readonly = false;
     value = '';

diff --git a/...documentation/examples/licence-plate/licence-plate-expert/licence-plate-expert-example.ts b/...documentation/examples/licence-plate/licence-plate-expert/licence-plate-expert-example.ts
@@ -54,7 +54,7 @@ import {
         JsonPipe,
     ],
 })
-export class LicencePlateExpertExample {
+export class LicencePlateExpertExampleComponent {
     licencePlateModel: {
         type: NxLicencePlateType;
         country: string;

diff --git a/...cumentation/examples/licence-plate/licence-plate-ngmodel/licence-plate-ngmodel-example.ts b/...cumentation/examples/licence-plate/licence-plate-ngmodel/licence-plate-ngmodel-example.ts
@@ -45,6 +45,6 @@ import {
         NxFormfieldErrorDirective,
     ],
 })
-export class LicencePlateNgmodelExample {
+export class LicencePlateNgmodelExampleComponent {
     model = '';
 }
diff --git a/...mentation/examples/licence-plate/licence-plate-reactive/licence-plate-reactive-example.ts b/...mentation/examples/licence-plate/licence-plate-reactive/licence-plate-reactive-example.ts
@@ -50,7 +50,7 @@ import {
         JsonPipe,
     ],
 })
-export class LicencePlateReactiveExample {
+export class LicencePlateReactiveExampleComponent {
     licencePlateForm: FormGroup;
 
     constructor() {

diff --git a/projects/ng-aquila/documentation/examples/modal/modal-examples.module.ts b/projects/ng-aquila/documentation/examples/modal/modal-examples.module.ts
@@ -18,12 +18,12 @@ import { ModalDataInjectionExampleComponent } from './modal-data-injection/modal
 import { ModalFixedWidthExampleComponent } from './modal-fixed-width/modal-fixed-width-example';
 import { ModalFullscreenExampleComponent } from './modal-fullscreen/modal-fullscreen-example';
 import { ModalOpeningExampleComponent } from './modal-opening/modal-opening-example';
-import { ModalStatusExample } from './modal-status/modal-status-example';
+import { ModalStatusExampleComponent } from './modal-status/modal-status-example';
 import { ModalUnsavedExampleComponent } from './modal-unsaved/modal-unsaved-example';
 import { ModalWithDirectionExampleComponent } from './modal-with-direction/modal-with-direction-example';
 
 const EXAMPLES = [
-    ModalStatusExample,
+    ModalStatusExampleComponent,
     ModalUnsavedExampleComponent,
     ModalBasicExampleComponent,
     ModalClosingExampleComponent,
@@ -55,7 +55,7 @@ const EXAMPLES = [
 export class ModalExamplesModule {
     static components() {
         return {
-            'modal-status': ModalStatusExample,
+            'modal-status': ModalStatusExampleComponent,
             'modal-unsaved': ModalUnsavedExampleComponent,
             'modal-basic': ModalBasicExampleComponent,
             'modal-closing': ModalClosingExampleComponent,

diff --git a/projects/ng-aquila/documentation/examples/modal/modal-status/modal-status-example.ts b/projects/ng-aquila/documentation/examples/modal/modal-status/modal-status-example.ts
@@ -28,7 +28,7 @@ import {
         NxModalActionsDirective,
     ],
 })
-export class ModalStatusExample {
+export class ModalStatusExampleComponent {
     dialogRef?: NxModalRef<any>;
 
     status!: NxStatusIconType;

diff --git a/projects/ng-aquila/documentation/examples/number-stepper/number-stepper-examples.module.ts b/projects/ng-aquila/documentation/examples/number-stepper/number-stepper-examples.module.ts
@@ -17,15 +17,15 @@ import { NumberStepperFormattingExampleComponent } from './number-stepper-format
 import { NumberStepperLocalizeExampleComponent } from './number-stepper-localize/number-stepper-localize-example';
 import { NumberStepperNegativeExampleComponent } from './number-stepper-negative/number-stepper-negative-example';
 import { NumberStepperReactiveExampleComponent } from './number-stepper-reactive/number-stepper-reactive-example';
-import { NumberStepperReadonlyInputExample } from './number-stepper-readonly-input/number-stepper-readonly-input-example';
+import { NumberStepperReadonlyInputExampleComponent } from './number-stepper-readonly-input/number-stepper-readonly-input-example';
 import { NumberStepperSimpleBindingExampleComponent } from './number-stepper-simple-binding/number-stepper-simple-binding-example';
 import { NumberStepperSizesExampleComponent } from './number-stepper-sizes/number-stepper-sizes-example';
 import { NumberStepperStandaloneExampleComponent } from './number-stepper-standalone/number-stepper-standalone-example';
 import { NumberStepperTemplateDrivenExampleComponent } from './number-stepper-template-driven/number-stepper-template-driven-example';
 import { NumberStepperValidationExampleComponent } from './number-stepper-validation/number-stepper-validation-example';
 
 const EXAMPLES = [
-    NumberStepperReadonlyInputExample,
+    NumberStepperReadonlyInputExampleComponent,
     NumberStepperAccessibilityExampleComponent,
     NumberStepperAdditionsExampleComponent,
     NumberStepperAutoResizingExampleComponent,
@@ -59,7 +59,8 @@ const EXAMPLES = [
 export class NumberExamplesModule {
     static components() {
         return {
-            'number-stepper-readonly-input': NumberStepperReadonlyInputExample,
+            'number-stepper-readonly-input':
+                NumberStepperReadonlyInputExampleComponent,
             'number-stepper-a11y': NumberStepperAccessibilityExampleComponent,
             'number-stepper-additions': NumberStepperAdditionsExampleComponent,
             'number-stepper-auto-resizing':

diff --git a/...les/number-stepper/number-stepper-readonly-input/number-stepper-readonly-input-example.ts b/...les/number-stepper/number-stepper-readonly-input/number-stepper-readonly-input-example.ts
@@ -8,4 +8,4 @@ import { NxNumberStepperComponent } from '@aposin/ng-aquila/number-stepper';
     standalone: true,
     imports: [NxNumberStepperComponent],
 })
-export class NumberStepperReadonlyInputExample {}
+export class NumberStepperReadonlyInputExampleComponent {}
diff --git a/...ntation/examples/progressbar/progressbar-custom-range/progressbar-custom-range-example.ts b/...ntation/examples/progressbar/progressbar-custom-range/progressbar-custom-range-example.ts
@@ -11,7 +11,7 @@ import { NxProgressbarComponent } from '@aposin/ng-aquila/progressbar';
     imports: [NxProgressbarComponent],
     standalone: true,
 })
-export class ProgressbarCustomRangeExample implements OnInit {
+export class ProgressbarCustomRangeExampleComponent implements OnInit {
     value = 15;
     min = 5;
     max = 80;

diff --git a/projects/ng-aquila/documentation/examples/progressbar/progressbar-examples.module.ts b/projects/ng-aquila/documentation/examples/progressbar/progressbar-examples.module.ts
@@ -3,12 +3,12 @@ import { NxProgressbarModule } from '@aposin/ng-aquila/progressbar';
 
 import { ProgressbarExampleComponent } from './progressbar/progressbar-example';
 import { ProgressbarBasicExampleComponent } from './progressbar-basic/progressbar-basic-example';
-import { ProgressbarCustomRangeExample } from './progressbar-custom-range/progressbar-custom-range-example';
+import { ProgressbarCustomRangeExampleComponent } from './progressbar-custom-range/progressbar-custom-range-example';
 
 const EXAMPLES = [
     ProgressbarExampleComponent,
     ProgressbarBasicExampleComponent,
-    ProgressbarCustomRangeExample,
+    ProgressbarCustomRangeExampleComponent,
 ];
 
 @NgModule({
@@ -20,7 +20,7 @@ export class ProgressbarExamplesModule {
         return {
             progressbar: ProgressbarExampleComponent,
             'progressbar-basic': ProgressbarBasicExampleComponent,
-            'progressbar-custom-range': ProgressbarCustomRangeExample,
+            'progressbar-custom-range': ProgressbarCustomRangeExampleComponent,
         };
     }
 }
diff --git a/...tion/examples/radio-button/radio-button-error-retail/radio-button-error-retail-example.ts b/...tion/examples/radio-button/radio-button-error-retail/radio-button-error-retail-example.ts
@@ -21,7 +21,7 @@ import { NxRadioModule } from '@aposin/ng-aquila/radio-button';
         NxButtonComponent,
     ],
 })
-export class RadioButtonErrorRetailExample {
+export class RadioButtonErrorRetailExampleComponent {
     readonly testForm = this.fb.group({
         radioTestReactive: [null, Validators.required],
     });

diff --git a/projects/ng-aquila/documentation/examples/radio-button/radio-button-examples.module.ts b/projects/ng-aquila/documentation/examples/radio-button/radio-button-examples.module.ts
@@ -5,7 +5,7 @@ import { NxRadioModule } from '@aposin/ng-aquila/radio-button';
 import { ExamplesSharedModule } from '../examples-shared.module';
 import { RadioButtonExampleComponent } from './radio-button/radio-button-example';
 import { RadioButtonDisabledExampleComponent } from './radio-button-disabled/radio-button-disabled-example';
-import { RadioButtonErrorRetailExample } from './radio-button-error-retail/radio-button-error-retail-example';
+import { RadioButtonErrorRetailExampleComponent } from './radio-button-error-retail/radio-button-error-retail-example';
 import { RadioButtonEventExampleComponent } from './radio-button-event/radio-button-event-example';
 import { RadioButtonFormExampleComponent } from './radio-button-form/radio-button-form-example';
 import { RadioButtonGroupExampleComponent } from './radio-button-group/radio-button-group-example';
@@ -18,7 +18,7 @@ import { RadioButtonSampleExampleComponent } from './radio-button-sample/radio-b
 import { RadioButtonSizesExampleComponent } from './radio-button-sizes/radio-button-sizes-example';
 
 const EXAMPLES = [
-    RadioButtonErrorRetailExample,
+    RadioButtonErrorRetailExampleComponent,
     RadioButtonExampleComponent,
     RadioButtonDisabledExampleComponent,
     RadioButtonEventExampleComponent,
@@ -40,7 +40,7 @@ const EXAMPLES = [
 export class RadioExamplesModule {
     static components() {
         return {
-            'radio-button-error-retail': RadioButtonErrorRetailExample,
+            'radio-button-error-retail': RadioButtonErrorRetailExampleComponent,
             'radio-button': RadioButtonExampleComponent,
             'radio-button-disabled': RadioButtonDisabledExampleComponent,
             'radio-button-event': RadioButtonEventExampleComponent,

diff --git a/...-aquila/documentation/examples/table/table-column-hiding/table-column-hiding-example.html b/...-aquila/documentation/examples/table/table-column-hiding/table-column-hiding-example.html
@@ -32,7 +32,7 @@
         <thead>
             <tr nxTableRow>
                 @for (option of options; track option) { @if
-                (selected?.includes(option.value)) {
+                (selected.includes(option.value)) {
                 <th nxHeaderCell>{{option.label}}</th>
                 } }
                 <!-- <th
@@ -47,27 +47,27 @@
         <tbody>
             @for (item of tableElements; track item) {
             <tr nxTableRow>
-                @if (selected?.includes('product')) {
+                @if (selected.includes('product')) {
                 <td nxTableCell>{{item.product}}</td>
-                } @if (selected?.includes('contractNumber')) {
+                } @if (selected.includes('contractNumber')) {
                 <td nxTableCell>{{item.contractNumber}}</td>
-                } @if (selected?.includes('desc')) {
+                } @if (selected.includes('desc')) {
                 <td nxTableCell>{{item.desc}}</td>
-                } @if (selected?.includes('website')) {
+                } @if (selected.includes('website')) {
                 <td nxTableCell>
                     <nx-link><a routerLink="#">{{item.website}}</a></nx-link>
                 </td>
-                } @if (selected?.includes('endingAt')) {
+                } @if (selected.includes('endingAt')) {
                 <td nxTableCell>{{item.endingAt}}</td>
-                } @if (selected?.includes('statusText')) {
+                } @if (selected.includes('statusText')) {
                 <td nxTableCell>
                     <nx-badge [type]="item.status">
                         {{item.statusText}}
                     </nx-badge>
                 </td>
                 }
             </tr>
-            } @if (!selected?.length) {
+            } @if (!selected.length) {
             <tr nxTableRow>
                 <td nxTableCell style="text-align: center">
                     All table columns are currently hidden.

diff --git a/...ng-aquila/documentation/examples/table/table-column-hiding/table-column-hiding-example.ts b/...ng-aquila/documentation/examples/table/table-column-hiding/table-column-hiding-example.ts
@@ -31,7 +31,7 @@ import { NxTableModule } from '@aposin/ng-aquila/table';
         NxContextMenuModule,
     ],
 })
-export class TableCoumnHidingExampleComponent {
+export class TableColumnHidingExampleComponent {
     constructor(private readonly _cdr: ChangeDetectorRef) {}
     tableElements = [
         {

diff --git a/...-aquila/documentation/examples/table/table-column-reorder/table-column-reorder-example.ts b/...-aquila/documentation/examples/table/table-column-reorder/table-column-reorder-example.ts
@@ -31,7 +31,7 @@ import {
         NxTableCellComponent,
     ],
 })
-export class TableColumnReorderExample {
+export class TableColumnReorderExampleComponent {
     header = [
         { title: 'ID', field: 'id' },
         { title: 'Product', field: 'product' },

diff --git a/...ng-aquila/documentation/examples/table/table-column-resize/table-column-resize-example.ts b/...ng-aquila/documentation/examples/table/table-column-resize/table-column-resize-example.ts
@@ -29,7 +29,7 @@ import {
         NxBadgeComponent,
     ],
 })
-export class TableColumnResizeExample {
+export class TableColumnResizeExampleComponent {
     tableElements = [
         {
             product: 'Car',