fix: (core) stackblitz files for dropdown (#1596)

* fixed stackblitz files

* fix angular.json file

apps/docs/src/app/core/component-docs/dropdown/dropdown-docs.component.ts

@@ -1,13 +1,18 @@
 import { Component, OnInit, ViewChildren, ElementRef, QueryList } from '@angular/core';
 
 import * as dropdownContextualMenuHtml from '!raw-loader!./examples/dropdown-contextual-menu-example.component.html';
+import * as dropdownContextualMenuTs from '!raw-loader!./examples/dropdown-contextual-menu-example.component.ts';
 import * as dropdownDefaultMenuHtml from '!raw-loader!./examples/dropdown-default-example.component.html';
+import * as dropdownDefaultMenuTs from '!raw-loader!./examples/dropdown-default-example.component.ts';
 import * as dropdownIconsMenuHtml from '!raw-loader!./examples/dropdown-icons-example.component.html';
+import * as dropdownIconsMenuTs from '!raw-loader!./examples/dropdown-icons-example.component.ts';
 import * as dropdownCodeTs from '!raw-loader!./examples/dropdown-examples.component.ts';
 import * as dropdownStateMenuHtml from '!raw-loader!./examples/dropdown-state-example.component.html';
+import * as dropdownStateMenuTs from '!raw-loader!./examples/dropdown-state-example.component.ts';
 import * as dropdownInfiniteScrollHtml from '!raw-loader!./examples/dropdown-infinite-scroll-example.component.html';
 import * as dropdownInfiniteScrollTs from '!raw-loader!./examples/dropdown-infinite-scroll-example.component.ts';
 import * as dropdownToolbarHtml from '!raw-loader!./examples/dropdown-toolbar-example.component.html';
+import * as dropdownToolbarTs from '!raw-loader!./examples/dropdown-toolbar-example.component.ts';
 import { ExampleFile } from '../../../documentation/core-helpers/code-example/example-file';
 import { DocsSectionTitleComponent } from '../../../documentation/core-helpers/docs-section-title/docs-section-title.component';
 import { ActivatedRoute } from '@angular/router';
@@ -22,9 +27,8 @@ export class DropdownDocsComponent implements OnInit {
             language: 'html',
             code: dropdownDefaultMenuHtml,
             fileName: 'dropdown-default-example',
-            secondFile: 'dropdown-examples',
             component: 'DropdownDefaultExampleComponent',
-            typescriptFileCode: dropdownCodeTs
+            typescriptFileCode: dropdownDefaultMenuTs
         },
     ];
 
@@ -33,9 +37,8 @@ export class DropdownDocsComponent implements OnInit {
             language: 'html',
             code: dropdownStateMenuHtml,
             fileName: 'dropdown-state-example',
-            secondFile: 'dropdown-examples',
             component: 'DropdownStateExampleComponent',
-            typescriptFileCode: dropdownCodeTs
+            typescriptFileCode: dropdownStateMenuTs
         },
     ];
 
@@ -44,9 +47,8 @@ export class DropdownDocsComponent implements OnInit {
             language: 'html',
             code: dropdownIconsMenuHtml,
             fileName: 'dropdown-icons-example',
-            secondFile: 'dropdown-examples',
             component: 'DropdownIconsExampleComponent',
-            typescriptFileCode: dropdownCodeTs
+            typescriptFileCode: dropdownIconsMenuTs
         },
     ];
 
@@ -55,9 +57,8 @@ export class DropdownDocsComponent implements OnInit {
             language: 'html',
             code: dropdownContextualMenuHtml,
             fileName: 'dropdown-contextual-menu-example',
-            secondFile: 'dropdown-examples',
             component: 'DropdownContextualMenuExampleComponent',
-            typescriptFileCode: dropdownCodeTs
+            typescriptFileCode: dropdownContextualMenuTs
         },
     ];
 
@@ -80,9 +81,8 @@ export class DropdownDocsComponent implements OnInit {
             language: 'html',
             code: dropdownToolbarHtml,
             fileName: 'dropdown-toolbar-example',
-            secondFile: 'dropdown-examples',
             component: 'DropdownToolbarExampleComponent',
-            typescriptFileCode: dropdownCodeTs
+            typescriptFileCode: dropdownToolbarTs
         },
     ];
 

apps/docs/src/app/core/component-docs/dropdown/examples/dropdown-contextual-menu-example.component.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'fd-dropdown-contextual-menu-example',
+    templateUrl: './dropdown-contextual-menu-example.component.html'
+})
+export class DropdownContextualMenuExampleComponent {
+
+    menu1 = [
+        { text: 'Option 1', url: '#' },
+        { text: 'Option 2', url: '#' },
+        { text: 'Option 3', url: '#' }
+    ];
+
+}

apps/docs/src/app/core/component-docs/dropdown/examples/dropdown-default-example.component.ts

@@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'fd-dropdown-default-example',
+    templateUrl: './dropdown-default-example.component.html'
+})
+export class DropdownDefaultExampleComponent {
+
+    menu1 = [
+        { text: 'Option 1', url: '#' },
+        { text: 'Option 2', url: '#' },
+        { text: 'Option 3', url: '#' }
+    ];
+
+    menu2 = [
+        { text: 'Option 3', url: '#' },
+        { text: 'Option 4', url: '#' },
+        { text: 'Option 5', url: '#' }
+    ];
+
+}

apps/docs/src/app/core/component-docs/dropdown/examples/dropdown-icons-example.component.ts

@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'fd-dropdown-icons-example',
+    templateUrl: './dropdown-icons-example.component.html'
+})
+export class DropdownIconsExampleComponent {
+
+    values = [
+        { name: 'Photo Voltaic', icon: 'photo-voltaic' },
+        { name: 'Settings', icon: 'settings' },
+        { name: 'Database', icon: 'database' },
+        { name: 'Passenger Train', icon: 'passenger-train' },
+        { name: 'World', icon: 'world' },
+        { name: 'Shield', icon: 'shield' }
+    ];
+
+}

apps/docs/src/app/core/component-docs/dropdown/examples/dropdown-state-example.component.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'fd-dropdown-state-example',
+    templateUrl: './dropdown-state-example.component.html'
+})
+export class DropdownStateExampleComponent {
+
+    menu1 = [
+        { text: 'Option 1', url: '#' },
+        { text: 'Option 2', url: '#' },
+        { text: 'Option 3', url: '#' }
+    ];
+
+}

apps/docs/src/app/core/component-docs/dropdown/examples/dropdown-toolbar-example.component.ts

@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'fd-dropdown-toolbar-example',
+    templateUrl: './dropdown-toolbar-example.component.html'
+})
+export class DropdownToolbarExampleComponent {
+
+    menu1 = [
+        { text: 'Option 1', url: '#' },
+        { text: 'Option 2', url: '#' },
+        { text: 'Option 3', url: '#' }
+    ];
+
+    menu2 = [
+        { text: 'Option 3', url: '#' },
+        { text: 'Option 4', url: '#' },
+        { text: 'Option 5', url: '#' }
+    ];
+}

apps/docs/src/app/core/core-documentation.module.ts

@@ -79,13 +79,12 @@ import { CalendarMondayStartExampleComponent } from '../core/component-docs/cale
 import { ComboboxExampleComponent } from '../core/component-docs/combobox/examples/combobox-example.component';
 import { DatePickerRangeExampleComponent } from '../core/component-docs/date-picker/examples/date-picker-range-example.component';
 import { DatePickerSingleExampleComponent } from '../core/component-docs/date-picker/examples/date-picker-single-example.component';
-import {
-    DropdownContextualMenuExampleComponent,
-    DropdownDefaultExampleComponent,
-    DropdownIconsExampleComponent,
-    DropdownStateExampleComponent,
-    DropdownToolbarExampleComponent
-} from '../core/component-docs/dropdown/examples/dropdown-examples.component';
+
+import { DropdownContextualMenuExampleComponent } from '../core/component-docs/dropdown/examples/dropdown-contextual-menu-example.component';
+import { DropdownDefaultExampleComponent } from '../core/component-docs/dropdown/examples/dropdown-default-example.component';
+import { DropdownIconsExampleComponent } from '../core/component-docs/dropdown/examples/dropdown-icons-example.component';
+import { DropdownStateExampleComponent } from '../core/component-docs/dropdown/examples/dropdown-state-example.component';
+import { DropdownToolbarExampleComponent } from '../core/component-docs/dropdown/examples/dropdown-toolbar-example.component';
 import { IconExampleComponent } from '../core/component-docs/icon/examples/icon-example.component';
 import {
     CircleIdentifierExampleComponent,