Merge pull request #23 from bci-oss/feature/set-encapsulation-default

Add question to ask for view encapsulation strategy

Author: michelu89

README.md

@@ -27,6 +27,8 @@
     -   [Pre-load config file](#pre-load-config-file)
     -   [Skip Installation](#skip-install)
     -   [Overwrite](#overwrite)
+    -   [Add material css theme](#Add material css theme)
+    -   [Set View Encapsulation strategy](#Set View Encapsulation strategy)
 -   [Documentation](#documentation)
 -   [License](#license)
 
@@ -616,10 +618,14 @@ ng generate @esmf/semantic-ui-schematics:table --overwrite
 
 If you want to add the indigo pink material theme, you may use the '--getOptionalMaterialTheme' flag
 
+when the wizard will prompt the question:
+
 ```bash
-ng generate @esmf/semantic-ui-schematics:table --getOptionalMaterialTheme
+Do you want to add the Angular Material theme? (Indigo Pink Theme)
 ```
 
+User may choose Yes or No.
+
 if user did not set --getOptionalMaterialTheme to true but wants to add a material theme to the project,
 in angular.json in styles section the following code can be added:
 
@@ -635,6 +641,22 @@ in angular.json in styles section the following code can be added:
 
 ---
 
+### Set View Encapsulation strategy
+
+By default the view encapsulation for the generated table component is set to None.
+If you want to change the View Encapsulation strategy, you may use the '--viewEncapsulation' flag
+where user can choose one of the following options: None, Emulated, ShadowDom.
+
+when the wizard will prompt the question:
+
+```bash
+Do you want to specify view encapsulation strategy?
+```
+
+User may choose one of the values: None, Emulated, ShadowDom.
+
+---
+
 ## Documentation
 
 Further documentation and howto's are provided in the

documentation/js-sdk-guide/modules/tooling-guide/images/angular-json-example.png

@@ -208,6 +208,22 @@ shared
         │    │   │   <component-name>-datasource.ts
 ----
 
+=== _Material theme(Indigo pink)_
+
+User can add to angular.json Indigo pink material theme. These action will appear in the actions column of the table. In the following prompt you can choose to add the Indigo pink material theme.
+
+image::material-theme-prompt.png[width=100%]
+
+In the generated angular.json table if user selected yes we can observe the change in styles array.
+
+image::angular-json-example.png[width=100%]
+
+=== _Set view encapsulation strategy for the generated table component_
+
+User can set the View Encapsulation strategy by default the ViewEncapsulation will be set to None on the generated table component. In the following prompt you can choose to add another View Encapsulation value.
+
+image::view-encapsulation-prompt.png[width=100%]
+
 === _Flags for generating the table_
 
 By using

documentation/js-sdk-guide/modules/tooling-guide/images/material-theme-prompt.png

@@ -33,6 +33,7 @@ import {Observable, Subject, Subscriber} from 'rxjs';
 import {TemplateHelper} from '../../utils/template-helper';
 import {Schema} from '../table/schema';
 import * as locale from 'locale-codes';
+import {ViewEncapsulation} from '@schematics/angular/component/schema';
 
 inquirer.registerPrompt('fuzzypath', require('inquirer-fuzzy-path'));
 inquirer.registerPrompt('suggest', require('inquirer-prompt-suggest'));
@@ -743,6 +744,14 @@ function getUserConfigQuestions(allAnswers: any, tree: Tree, options: Schema): Q
         default: true,
     };
 
+    const requestSetViewEncapsulation = {
+        type: 'list',
+        name: 'viewEncapsulation',
+        message: 'Do you want to specify view encapsulation strategy?',
+        choices: [ViewEncapsulation.None, ViewEncapsulation.Emulated, ViewEncapsulation.ShadowDom],
+        default: ViewEncapsulation.None,
+    };
+
     return [
         requestJSONPathSelectedModelElement,
         requestExcludedProperties,
@@ -760,6 +769,7 @@ function getUserConfigQuestions(allAnswers: any, tree: Tree, options: Schema): Q
         requestAspectModelVersionSupport,
         requestOptionalMaterialTheme,
         requestCustomStyleImports,
+        requestSetViewEncapsulation,
         requestOverwriteFiles,
     ];
 }