dropdown overview component update.

src/app/feature/data-table/data-table-overview/components/docs/module-import.md

@@ -4,6 +4,8 @@ import { FormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
 
 import { DataTableModule } from 'ornamentum';
+
+import { AppComponent } from './app.component';
 
 @NgModule({
   bootstrap: [AppComponent],
@@ -17,4 +19,3 @@ import { DataTableModule } from 'ornamentum';
 })
 export class AppModule {
 }
-

src/app/feature/data-table/data-table-overview/components/example/basic-usage/basic-usage.component.html

@@ -24,7 +24,7 @@
     [sortable]="true"
     [filterable]="true"
     [filterPlaceholder]="'Search'"
-    [width]="70"
+    [width]="80"
   >
     <ng-template #ngDataTableCell let-row="row">
       <td>
@@ -86,7 +86,7 @@
     [sortable]="true"
     [filterable]="true"
     [filterPlaceholder]="'Search'"
-    [width]="100"
+    [width]="95"
   >
   </ng-data-table-column>
 </ng-data-table>

src/app/feature/data-table/data-table-styling-and-themes/components/data-table-styling-and-themes.component.html

@@ -8,8 +8,8 @@ <h1>Data Table Styling & Themes</h1>
   <h2 id="themeSupport">Including Theme Support</h2>
 
   <p>
-    Currently ornamentum has different scss files to represent the available themes. Therefore, in order to include these themes into your project you
-    have to import its SCSS source references into your style files.
+    Currently ornamentum has different CSS/SCSS files to represent the available themes. Therefore, in order to include these themes into your project
+    you have to import its CSS/SCSS source references into your style files.
   </p>
 
   <p>
@@ -27,44 +27,84 @@ <h4 id="baseTheme">Base Theme</h4>
 
   <div class="dt-theme-common dt-base-theme"></div>
 
-  <p>In order to apply above Base theme you have to import following code snippet to your styles.</p>
-  <pre class="prettyprint lang-css">{{ demoSnippet.baseTheme }}</pre>
+  <p>
+    <b>CSS</b>: Include Ornamentum prebuilt CSS <b>Base</b> theme style sheets in
+    <a rel="noopener" target="_blank" href="https://cli.angular.io">Angular CLI</a> config "<b>styles</b>".
+  </p>
+  <pre class="prettyprint linenums lang-json">{{ demoSnippet.baseCssThemeImport }}</pre>
+  <p>
+    <b>SCSS</b>: Include Ornamentum theme <b>Base</b> SCSS style sheets in
+    <a rel="noopener" target="_blank" href="https://cli.angular.io">Angular CLI</a> config "<b>styles</b>".
+  </p>
+  <pre class="prettyprint linenums lang-json">{{ demoSnippet.baseScssThemeImport }}</pre>
 
   <h4 id="darkTheme">Dark Theme</h4>
 
   <p>The following image shows how Ornamentum Data Table looks like with the Dark theme.</p>
 
   <div class="dt-theme-common dt-dark-theme"></div>
 
-  <p>In order to apply above Dark theme you have to import following code snippet to your styles.</p>
-  <pre class="prettyprint lang-css">{{ demoSnippet.darkTheme }}</pre>
+  <p>
+    <b>CSS</b>: Include Ornamentum prebuilt CSS <b>Dark</b> theme style sheets in
+    <a rel="noopener" target="_blank" href="https://cli.angular.io">Angular CLI</a> config "<b>styles</b>".
+  </p>
+  <pre class="prettyprint linenums lang-json">{{ demoSnippet.darkThemeCssThemeImport }}</pre>
+  <p>
+    <b>SCSS</b>: Include Ornamentum theme <b>Dark</b> SCSS style sheets in
+    <a rel="noopener" target="_blank" href="https://cli.angular.io">Angular CLI</a> config "<b>styles</b>".
+  </p>
+  <pre class="prettyprint linenums lang-json">{{ demoSnippet.darkThemeScssThemeImport }}</pre>
 
   <h4 id="flatTheme">Flat Theme</h4>
 
   <p>The following image shows how Ornamentum Data Table looks like with the Flat theme.</p>
 
   <div class="dt-theme-common dt-flat-theme"></div>
 
-  <p>In order to apply above Flat theme you have to import following code snippet to your styles.</p>
-  <pre class="prettyprint lang-css">{{ demoSnippet.flatTheme }}</pre>
+  <p>
+    <b>CSS</b>: Include Ornamentum prebuilt CSS <b>Flat</b> theme style sheets in
+    <a rel="noopener" target="_blank" href="https://cli.angular.io">Angular CLI</a> config "<b>styles</b>".
+  </p>
+  <pre class="prettyprint linenums lang-json">{{ demoSnippet.flatThemeCssThemeImport }}</pre>
+  <p>
+    <b>SCSS</b>: Include Ornamentum theme <b>Flat</b> SCSS style sheets in
+    <a rel="noopener" target="_blank" href="https://cli.angular.io">Angular CLI</a> config "<b>styles</b>".
+  </p>
+  <pre class="prettyprint linenums lang-json">{{ demoSnippet.flatThemeScssThemeImport }}</pre>
 
   <h4 id="ornamentumTheme">Ornamentum Theme</h4>
 
   <p>The following image shows how Ornamentum Data Table looks like with the Ornamentum theme.</p>
 
   <div class="dt-theme-common dt-ornamentum-theme"></div>
 
-  <p>In order to apply above Ornamentum theme you have to import following code snippet to your styles.</p>
-  <pre class="prettyprint lang-css">{{ demoSnippet.ornamentumTheme }}</pre>
+  <p>
+    <b>CSS</b>: Include Ornamentum prebuilt CSS <b>Ornamentum</b> theme style sheets in
+    <a rel="noopener" target="_blank" href="https://cli.angular.io">Angular CLI</a> config "<b>styles</b>".
+  </p>
+  <pre class="prettyprint linenums lang-json">{{ demoSnippet.ornamentumThemeCssThemeImport }}</pre>
+  <p>
+    <b>SCSS</b>: Include Ornamentum theme <b>Ornamentum</b> SCSS style sheets in
+    <a rel="noopener" target="_blank" href="https://cli.angular.io">Angular CLI</a> config "<b>styles</b>".
+  </p>
+  <pre class="prettyprint linenums lang-json">{{ demoSnippet.ornamentumThemeScssThemeImport }}</pre>
 
   <h4 id="aegeanTheme">Aegean Theme</h4>
 
   <p>The following image shows how Ornamentum Data Table looks like with the Aegean theme.</p>
 
   <div class="dt-theme-common dt-aegean-theme"></div>
 
-  <p>In order to apply above Aegean theme you have to import following code snippet to your styles.</p>
-  <pre class="prettyprint lang-css">{{ demoSnippet.aegeanTheme }}</pre>
+  <p>
+    <b>CSS</b>: Include Ornamentum prebuilt CSS <b>Aegean</b> theme style sheets in
+    <a rel="noopener" target="_blank" href="https://cli.angular.io">Angular CLI</a> config "<b>styles</b>".
+  </p>
+  <pre class="prettyprint linenums lang-json">{{ demoSnippet.aegeanThemeCssThemeImport }}</pre>
+  <p>
+    <b>SCSS</b>: Include Ornamentum theme <b>Aegean</b> SCSS style sheets in
+    <a rel="noopener" target="_blank" href="https://cli.angular.io">Angular CLI</a> config "<b>styles</b>".
+  </p>
+  <pre class="prettyprint linenums lang-json">{{ demoSnippet.aegeanThemeScssThemeImport }}</pre>
 
   <h2 id="suggestedLinks">Suggested Links</h2>
   <a rel="noopener" target="_blank" href="api-docs/modules/DataTableModule.html">API Doc for DataTable Styling & Themes</a>

src/app/feature/data-table/data-table-styling-and-themes/components/data-table-styling-and-themes.list.ts

@@ -1,7 +1,12 @@
 export const demoSnippet: any = {
-  baseTheme: require('!!raw-loader?lang=typescript!./docs/base-theme.md'),
-  darkTheme: require('!!raw-loader?lang=typescript!./docs/dark-theme.md'),
-  flatTheme: require('!!raw-loader?lang=typescript!./docs/flat-theme.md'),
-  ornamentumTheme: require('!!raw-loader?lang=typescript!./docs/ornamentum-theme.md'),
-  aegeanTheme: require('!!raw-loader?lang=typescript!./docs/aegean-theme.md')
+  baseCssThemeImport: require('!!raw-loader?lang=typescript!./docs/base-style-css-import.json.md'),
+  darkThemeCssThemeImport: require('!!raw-loader?lang=typescript!./docs/dark-style-css-import.json.md'),
+  flatThemeCssThemeImport: require('!!raw-loader?lang=typescript!./docs/flat-style-css-import.json.md'),
+  ornamentumThemeCssThemeImport: require('!!raw-loader?lang=typescript!./docs/ornamentum-style-css-import.json.md'),
+  aegeanThemeCssThemeImport: require('!!raw-loader?lang=typescript!./docs/aegean-style-css-import.json.md'),
+  baseScssThemeImport: require('!!raw-loader?lang=typescript!./docs/base-style-scss-import.json.md'),
+  darkThemeScssThemeImport: require('!!raw-loader?lang=typescript!./docs/dark-style-scss-import.json.md'),
+  flatThemeScssThemeImport: require('!!raw-loader?lang=typescript!./docs/flat-style-scss-import.json.md'),
+  ornamentumThemeScssThemeImport: require('!!raw-loader?lang=typescript!./docs/ornamentum-style-scss-import.json.md'),
+  aegeanThemeScssThemeImport: require('!!raw-loader?lang=typescript!./docs/aegean-style-scss-import.json.md')
 };

src/app/feature/data-table/data-table-styling-and-themes/components/docs/aegean-style-css-import.json.md

@@ -0,0 +1,5 @@
+"styles": [
+  "node_modules/ornamentum/prebuilt-themes/aegean.theme.css",
+  "node_modules/ornamentum/prebuilt-themes/addon.aegean.theme.css",
+  "styles.css"
+]

src/app/feature/data-table/data-table-styling-and-themes/components/docs/aegean-style-scss-import.json.md

@@ -0,0 +1,5 @@
+"styles": [
+  "node_modules/ornamentum/themes/aegean.theme.scss",
+  "node_modules/ornamentum/themes/addon.aegean.theme.scss",
+  "styles.scss"
+]

src/app/feature/data-table/data-table-styling-and-themes/components/docs/base-style-css-import.json.md

@@ -0,0 +1,5 @@
+"styles": [
+  "node_modules/ornamentum/prebuilt-themes/base.theme.css",
+  "node_modules/ornamentum/prebuilt-themes/addon.base.theme.css",
+  "styles.css"
+]

src/app/feature/data-table/data-table-styling-and-themes/components/docs/base-style-scss-import.json.md

@@ -0,0 +1,5 @@
+"styles": [
+  "node_modules/ornamentum/themes/base.theme.scss",
+  "node_modules/ornamentum/themes/addon.base.theme.scss",
+  "styles.scss"
+]

src/app/feature/data-table/data-table-styling-and-themes/components/docs/dark-style-css-import.json.md

@@ -0,0 +1,5 @@
+"styles": [
+  "node_modules/ornamentum/prebuilt-themes/dark.theme.css",
+  "node_modules/ornamentum/prebuilt-themes/addon.dark.theme.css",
+  "styles.css"
+]

src/app/feature/data-table/data-table-styling-and-themes/components/docs/dark-style-scss-import.json.md

@@ -0,0 +1,5 @@
+"styles": [
+  "node_modules/ornamentum/themes/dark.theme.scss",
+  "node_modules/ornamentum/themes/addon.dark.theme.scss",
+  "styles.scss"
+]

src/app/feature/data-table/data-table-styling-and-themes/components/docs/flat-style-css-import.json.md

@@ -0,0 +1,5 @@
+"styles": [
+  "node_modules/ornamentum/prebuilt-themes/flat.theme.css",
+  "node_modules/ornamentum/prebuilt-themes/addon.flat.theme.css",
+  "styles.css"
+]

src/app/feature/data-table/data-table-styling-and-themes/components/docs/flat-style-scss-import.json.md

@@ -0,0 +1,5 @@
+"styles": [
+  "node_modules/ornamentum/prebuilt-themes/flat.theme.css",
+  "node_modules/ornamentum/prebuilt-themes/addon.flat.theme.css",
+  "styles.css"
+]

src/app/feature/data-table/data-table-styling-and-themes/components/docs/ornamentum-style-css-import.json.md

@@ -0,0 +1,5 @@
+"styles": [
+  "node_modules/ornamentum/prebuilt-themes/ornamentum.theme.css",
+  "node_modules/ornamentum/prebuilt-themes/addon.ornamentum.theme.css",
+  "styles.css"
+]

src/app/feature/data-table/data-table-styling-and-themes/components/docs/ornamentum-style-scss-import.json.md

@@ -0,0 +1,5 @@
+"styles": [
+  "node_modules/ornamentum/themes/ornamentum.theme.scss",
+  "node_modules/ornamentum/themes/addon.ornamentum.theme.scss",
+  "styles.scss"
+]

src/app/feature/dropdown/dropdown-overview/components/docs/basic-usage.component.html.md

@@ -0,0 +1,10 @@
+<ng-dropdown
+  [selectTrackBy]="'id'"
+  [displayTrackBy]="'productType'"
+  [items]="items"
+  [filterable]="true"
+  [showClearSelectionButton]="true"
+  [showSelectedOptionRemoveButton]="true"
+  [closeMenuOnSelect]="true"
+  [limit]="50">
+</ng-dropdown>

src/app/feature/dropdown/dropdown-overview/components/docs/basic-usage.component.ts.md

@@ -0,0 +1,53 @@
+import { Component } from '@angular/core';
+
+/**
+ * Basic usage example component controller.
+ */
+@Component({
+  selector: 'app-basic-usage',
+  templateUrl: './basic-usage.component.html'
+})
+export class BasicUsageComponent {
+  public data: any[] = [
+    {
+      productType: 'Cooking Gear',
+      id: 10
+    },
+    {
+      productType: 'Tents',
+      id: 15
+    },
+    {
+      productType: 'Sleeping Bags',
+      id: 20
+    },
+    {
+      productType: 'Lanterns',
+      id: 25
+    },
+    {
+      productType: 'Rope',
+      id: 30
+    },
+    {
+      productType: 'Tents',
+      id: 35
+    },
+    {
+      productType: 'Lanterns',
+      id: 40
+    },
+    {
+      productType: 'Climbing Accessories',
+      id: 45
+    },
+    {
+      productType: 'Tents',
+      id: 50
+    },
+    {
+      productType: 'Safety',
+      id: 55
+    }
+  ];
+}

src/app/feature/dropdown/dropdown-overview/components/docs/import.md

@@ -1,16 +1,21 @@
-
-  import { NgModule } from '@angular/core';
-  import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { BrowserModule } from '@angular/platform-browser';
 
-  import { DropdownModule } from 'ornamentum';
+import { DropdownModule } from 'ornamentum';
 
-  import { AppComponent } from './app.component';
-
-  @NgModule({
-    bootstrap: [AppComponent],
-    declarations: [AppComponent],
-    imports: [BrowserModule, DropdownModule.forRoot()]
-  })
-  export class AppModule {
-  }
-
+import { AppComponent } from './app.component';
+
+@NgModule({
+  bootstrap: [AppComponent],
+  declarations: [AppComponent],
+  imports: [
+    BrowserModule,
+    CommonModule,
+    FormsModule,
+    DropdownModule.forRoot() // Import dropdown module
+  ]
+})
+export class AppModule {
+}

src/app/feature/dropdown/dropdown-overview/components/docs/style-css-import.json.md

@@ -0,0 +1,5 @@
+"styles": [
+  "node_modules/ornamentum/prebuilt-themes/dark.theme.css",
+  "node_modules/ornamentum/prebuilt-themes/addon.dark.theme.css",
+  "styles.css"
+]

src/app/feature/dropdown/dropdown-overview/components/docs/style-scss-import.json.md

@@ -0,0 +1,5 @@
+"styles": [
+  "node_modules/ornamentum/themes/dark.theme.scss",
+  "node_modules/ornamentum/themes/addon.dark.theme.scss",
+  "styles.scss"
+]