fix: (Platform) fix combobox examples for stackblitz (#4469)

* fix: (platform) fix combobox examples for stackblitz * fix: (core) fix Combobox examples for stackblitz
SAP · Jan 26, 2021 · ecfc125 · ecfc125
1 parent f1251ce
commit ecfc125
Show file tree

Hide file tree

Showing 14 changed files with 66 additions and 52 deletions.
diff --git a/apps/docs/src/app/core/component-docs/combobox/combobox-docs.component.ts b/apps/docs/src/app/core/component-docs/combobox/combobox-docs.component.ts
@@ -229,7 +229,7 @@ export class ComboboxDocsComponent {
         },
         {
             language: 'typescript',
-            component: 'ComboboxincludesExampleComponent',
+            component: 'ComboboxIncludesExampleComponent',
             code: comboboxIncludesT,
             fileName: 'combobox-includes-example'
         }
@@ -243,7 +243,7 @@ export class ComboboxDocsComponent {
         },
         {
             language: 'typescript',
-            component: 'ComboboxExampleComponent',
+            component: 'ComboboxSearchFieldExampleComponent',
             code: comboboxSearchFieldTSSrc,
             fileName: 'combobox-search-field-example'
         }

diff --git a/.../docs/src/app/core/component-docs/combobox/examples/combobox-forms-example.component.scss b/.../docs/src/app/core/component-docs/combobox/examples/combobox-forms-example.component.scss
@@ -0,0 +1,5 @@
+.examples-column {
+    & > :not(:first-child) {
+        margin-top: 1rem;
+    }
+}
diff --git a/apps/docs/src/app/core/component-docs/combobox/examples/combobox-forms-example.component.ts b/apps/docs/src/app/core/component-docs/combobox/examples/combobox-forms-example.component.ts
@@ -9,7 +9,7 @@ interface ComboboxItem {
 @Component({
     selector: 'fd-combobox-forms-example',
     templateUrl: 'combobox-forms-example.component.html',
-    styleUrls: ['combobox-example.component.scss']
+    styleUrls: ['combobox-forms-example.component.scss']
 })
 export class ComboboxFormsExampleComponent {
     customForm = new FormGroup({

diff --git a/...nt-docs/platform-combobox/examples/combobox-columns/combobox-columns-example.component.ts b/...nt-docs/platform-combobox/examples/combobox-columns/combobox-columns-example.component.ts
@@ -1,10 +1,12 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { ComboboxSelectionChangeEvent } from '@fundamental-ngx/platform';
+
+import { ComboboxSelectionChangeEvent, DATA_PROVIDERS } from '@fundamental-ngx/platform';
 
 @Component({
     selector: 'fdp-combobox-columns-example',
     templateUrl: './combobox-columns-example.component.html',
-    changeDetection: ChangeDetectionStrategy.OnPush
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [{ provide: DATA_PROVIDERS, useValue: new Map() }]
 })
 export class ComboboxColumnsExampleComponent {
     dataSource = [

diff --git a/...s/platform-combobox/examples/combobox-datasource/combobox-datasource-example.component.ts b/...s/platform-combobox/examples/combobox-datasource/combobox-datasource-example.component.ts
@@ -1,12 +1,13 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { of } from 'rxjs';
 
-import { ArrayComboBoxDataSource, ComboboxSelectionChangeEvent } from '@fundamental-ngx/platform';
+import { ArrayComboBoxDataSource, ComboboxSelectionChangeEvent, DATA_PROVIDERS } from '@fundamental-ngx/platform';
 
 @Component({
     selector: 'fdp-combobox-datasource-example',
     templateUrl: './combobox-datasource-example.component.html',
-    changeDetection: ChangeDetectionStrategy.OnPush
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [{ provide: DATA_PROVIDERS, useValue: new Map() }]
 })
 export class ComboboxDatasourceExampleComponent {
     dataSourceStrings = [

diff --git a/...ponent-docs/platform-combobox/examples/combobox-forms/combobox-forms-example.component.ts b/...ponent-docs/platform-combobox/examples/combobox-forms/combobox-forms-example.component.ts
@@ -1,12 +1,13 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 
-import { ComboboxSelectionChangeEvent } from '@fundamental-ngx/platform';
+import { ComboboxSelectionChangeEvent, DATA_PROVIDERS } from '@fundamental-ngx/platform';
 import { FormControl, FormGroup } from '@angular/forms';
 
 @Component({
     selector: 'fdp-combobox-forms-example',
     templateUrl: './combobox-forms-example.component.html',
-    changeDetection: ChangeDetectionStrategy.OnPush
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [{ provide: DATA_PROVIDERS, useValue: new Map() }]
 })
 export class ComboboxFormsExampleComponent {
     dataSource = [

diff --git a/...ponent-docs/platform-combobox/examples/combobox-group/combobox-group-example.component.ts b/...ponent-docs/platform-combobox/examples/combobox-group/combobox-group-example.component.ts
@@ -1,11 +1,12 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 
-import { ComboboxSelectionChangeEvent } from '@fundamental-ngx/platform';
+import { ComboboxSelectionChangeEvent, DATA_PROVIDERS } from '@fundamental-ngx/platform';
 
 @Component({
     selector: 'fdp-combobox-group-example',
     templateUrl: './combobox-group-example.component.html',
-    changeDetection: ChangeDetectionStrategy.OnPush
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [{ provide: DATA_PROVIDERS, useValue: new Map() }]
 })
 export class ComboboxGroupExampleComponent {
     dataSource = [

diff --git a/...nent-docs/platform-combobox/examples/combobox-mobile/combobox-mobile-example.component.ts b/...nent-docs/platform-combobox/examples/combobox-mobile/combobox-mobile-example.component.ts
@@ -1,11 +1,12 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { MobileModeConfig } from '@fundamental-ngx/core';
-import { ComboboxSelectionChangeEvent } from '@fundamental-ngx/platform';
+import { ComboboxSelectionChangeEvent, DATA_PROVIDERS } from '@fundamental-ngx/platform';
 
 @Component({
     selector: 'fdp-combobox-mobile-example',
     templateUrl: './combobox-mobile-example.component.html',
-    changeDetection: ChangeDetectionStrategy.OnPush
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [{ provide: DATA_PROVIDERS, useValue: new Map() }]
 })
 export class ComboboxMobileExampleComponent {
     dataSource = [

diff --git a/...omponent-docs/platform-combobox/examples/combobox-standard/combobox-standard.component.ts b/...omponent-docs/platform-combobox/examples/combobox-standard/combobox-standard.component.ts
@@ -1,10 +1,11 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { ComboboxSelectionChangeEvent } from '@fundamental-ngx/platform';
+import { ComboboxSelectionChangeEvent, DATA_PROVIDERS } from '@fundamental-ngx/platform';
 
 @Component({
     selector: 'fdp-combobox-standard',
     templateUrl: './combobox-standard.component.html',
-    changeDetection: ChangeDetectionStrategy.OnPush
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [{ provide: DATA_PROVIDERS, useValue: new Map() }]
 })
 export class ComboboxStandardComponent {
     dataSource = [

diff --git a/...nent-docs/platform-combobox/examples/combobox-states/combobox-states-example.component.ts b/...nent-docs/platform-combobox/examples/combobox-states/combobox-states-example.component.ts
@@ -1,10 +1,11 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { ComboboxSelectionChangeEvent } from '@fundamental-ngx/platform';
+import { ComboboxSelectionChangeEvent, DATA_PROVIDERS } from '@fundamental-ngx/platform';
 
 @Component({
     selector: 'fdp-combobox-states-example',
     templateUrl: './combobox-states-example.component.html',
-    changeDetection: ChangeDetectionStrategy.OnPush
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [{ provide: DATA_PROVIDERS, useValue: new Map() }]
 })
 export class ComboboxStateComponent {
     dataSource = [

diff --git a/...ocs/platform-combobox/examples/combobox-templates/combobox-templates-example.component.ts b/...ocs/platform-combobox/examples/combobox-templates/combobox-templates-example.component.ts
@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 
-import { ComboboxSelectionChangeEvent } from '@fundamental-ngx/platform';
+import { ComboboxSelectionChangeEvent, DATA_PROVIDERS } from '@fundamental-ngx/platform';
 
 @Component({
     selector: 'fdp-combobox-templates-example',
@@ -9,7 +9,8 @@ import { ComboboxSelectionChangeEvent } from '@fundamental-ngx/platform';
     styles: [
         '.fd-template-container-div { display: flex; align-items: center; cursor: pointer;}',
         '.fd-template-text { margin-right: 12px; margin-left: 12px; }'
-    ]
+    ],
+    providers: [{ provide: DATA_PROVIDERS, useValue: new Map() }]
 })
 export class ComboboxTemplatesExampleComponent {
     dataSource = [

diff --git a/...ocs/src/app/platform/component-docs/platform-combobox/platform-combobox-docs.component.ts b/...ocs/src/app/platform/component-docs/platform-combobox/platform-combobox-docs.component.ts
@@ -38,69 +38,84 @@ export class PlatformComboboxDocsComponent {
     }, {
         language: 'typescript',
         fileName: 'combobox-standard',
-        code: comboboxStandardTs
+        code: comboboxStandardTs,
+        component: 'ComboboxStandardComponent'
     }];
+
     comboboxMobile: ExampleFile[] = [{
         language: 'html',
-        fileName: 'combobox-mobile',
+        fileName: 'combobox-mobile-example',
         code: comboboxMobileHtml
     }, {
         language: 'typescript',
-        fileName: 'combobox-mobile',
-        code: comboboxMobileTs
+        fileName: 'combobox-mobile-example',
+        code: comboboxMobileTs,
+        component: 'ComboboxMobileExampleComponent'
     }];
+
     comboboxDatasource: ExampleFile[] = [{
         language: 'html',
-        fileName: 'combobox-datasource',
+        fileName: 'combobox-datasource-example',
         code: comboboxDatasourceHtml
     }, {
         language: 'typescript',
-        fileName: 'combobox-datasource',
-        code: comboboxDatasourceTs
+        fileName: 'combobox-datasource-example',
+        code: comboboxDatasourceTs,
+        component: 'ComboboxDatasourceExampleComponent'
     }];
+
     comboboxColumns: ExampleFile[] = [{
         language: 'html',
         fileName: 'combobox-columns-example',
         code: comboboxColumnsHtml
     }, {
         language: 'typescript',
         fileName: 'combobox-columns-example',
-        code: comboboxColumnsTs
+        code: comboboxColumnsTs,
+        component: 'ComboboxColumnsExampleComponent'
     }];
+
     comboboxGroupExample: ExampleFile[] = [{
         language: 'html',
         fileName: 'combobox-group-example',
         code: comboboxGroupHtml
     }, {
         language: 'typescript',
         fileName: 'combobox-group-example',
-        code: comboboxGroupTs
+        code: comboboxGroupTs,
+        component: 'ComboboxGroupExampleComponent'
     }];
+
     comboboxTemplatesExample: ExampleFile[] = [{
         language: 'html',
         fileName: 'combobox-templates-example',
         code: comboboxTemplatesHtml
     }, {
         language: 'typescript',
         fileName: 'combobox-templates-example',
-        code: comboboxTemplatesTs
+        code: comboboxTemplatesTs,
+        component: 'ComboboxTemplatesExampleComponent'
     }];
+
     comboboxFormExample: ExampleFile[] = [{
         language: 'html',
         fileName: 'combobox-forms-example',
         code: comboboxFormHtml
     }, {
         language: 'typescript',
         fileName: 'combobox-forms-example',
-        code: comboboxFormTs
+        code: comboboxFormTs,
+        component: 'ComboboxFormsExampleComponent'
     }];
+
     comboboxStateExample: ExampleFile[] = [{
         language: 'html',
         fileName: 'combobox-states-example',
         code: comboboxStatesHtml
     }, {
         language: 'typescript',
         fileName: 'combobox-states-example',
-        code: comboboxStatesTs
+        code: comboboxStatesTs,
+        component: 'ComboboxStateComponent'
     }];
 }
diff --git a/apps/docs/src/app/platform/component-docs/platform-combobox/platform-combobox-docs.module.ts b/apps/docs/src/app/platform/component-docs/platform-combobox/platform-combobox-docs.module.ts
@@ -2,13 +2,7 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
 import { IconModule, MOBILE_MODE_CONFIG } from '@fundamental-ngx/core';
-import {
-    PlatformComboboxModule,
-    PlatformComboboxMobileModule,
-    DATA_PROVIDERS,
-    DataProvider,
-    FdpFormGroupModule
-} from '@fundamental-ngx/platform';
+import { PlatformComboboxModule, PlatformComboboxMobileModule, FdpFormGroupModule } from '@fundamental-ngx/platform';
 
 import { ApiComponent } from '../../../documentation/core-helpers/api/api.component';
 import { API_FILES } from '../../api-files';
@@ -46,10 +40,7 @@ const routes: Routes = [
         IconModule
     ],
     exports: [RouterModule],
-    providers: [
-        { provide: DATA_PROVIDERS, useClass: DataProvider as any },
-        { provide: MOBILE_MODE_CONFIG, useValue: COMBOBOX_MOBILE_CONFIG, multi: true }
-    ],
+    providers: [{ provide: MOBILE_MODE_CONFIG, useValue: COMBOBOX_MOBILE_CONFIG, multi: true }],
     declarations: [
         PlatformComboboxHeaderComponent,
         PlatformComboboxDocsComponent,
@@ -63,5 +54,4 @@ const routes: Routes = [
         ComboboxStateComponent
     ]
 })
-export class PlatformComboboxDocsModule {
-}
+export class PlatformComboboxDocsModule {}
diff --git a/libs/platform/src/lib/components/form/combobox/combobox/combobox.component.ts b/libs/platform/src/lib/components/form/combobox/combobox/combobox.component.ts
@@ -20,12 +20,7 @@ import { CdkConnectedOverlay } from '@angular/cdk/overlay';
 import { Direction } from '@angular/cdk/bidi';
 import { takeUntil } from 'rxjs/operators';
 
-import {
-    closestElement,
-    DialogConfig,
-    DynamicComponentService,
-    RtlService
-} from '@fundamental-ngx/core';
+import { closestElement, DialogConfig, DynamicComponentService, RtlService } from '@fundamental-ngx/core';
 import { ComboBoxDataSource, DATA_PROVIDERS, DataProvider } from '../../../../domain/data-source';
 import { FormFieldControl } from '../../form-control';
 import { BaseCombobox, ComboboxSelectionChangeEvent } from '../commons/base-combobox';
@@ -78,7 +73,7 @@ export class ComboboxComponent extends BaseCombobox implements OnInit, AfterView
         @Optional() @Self() readonly ngForm: NgForm,
         @Optional() readonly dialogConfig: DialogConfig,
         readonly _dynamicComponentService: DynamicComponentService,
-        @Inject(DATA_PROVIDERS) private providers: Map<string, DataProvider<any>>,
+        @Optional() @Inject(DATA_PROVIDERS) private providers: Map<string, DataProvider<any>>,
         readonly _comboboxConfig: ComboboxConfig,
         private _rtlService: RtlService,
         @Optional() @SkipSelf() @Host() formField: FormField,
@@ -89,7 +84,7 @@ export class ComboboxComponent extends BaseCombobox implements OnInit, AfterView
 
     /** @hidden */
     ngOnInit(): void {
-        const providers = this.providers.size === 0 ? this._comboboxConfig.providers : this.providers;
+        const providers = this.providers?.size === 0 ? this._comboboxConfig.providers : this.providers;
         // if we have both prefer dataSource
         if (!this.dataSource && this.entityClass && providers.has(this.entityClass)) {
             this.dataSource = new ComboBoxDataSource(providers.get(this.entityClass));