refactor(samples): updating components styling samples

Author: adrianptrv

live-editing/configs/AccordionConfigGenerator.ts

@@ -33,6 +33,17 @@ export class AccordionConfigGenerator implements IConfigGenerator {
             shortenComponentPathBy: '/layouts/accordion/'
         }));
 
+        configs.push(new Config({
+            component: 'AccordionStyleComponent',
+            additionalFiles: ["/src/app/layouts/accordion/accordion-style/layout.scss"],
+            appModuleConfig: new AppModuleConfig({
+                imports: ['AccordionStyleComponent', 'IgxAccordionModule', 'IgxSwitchModule'],
+                ngDeclarations: ['AccordionStyleComponent'],
+                ngImports: ['IgxAccordionModule', 'IgxSwitchModule']
+            }),
+            shortenComponentPathBy: '/layouts/accordion/'
+        }));
+
         return configs;
     }
 }

live-editing/configs/ActionStripConfigGenerator.ts

@@ -28,7 +28,12 @@ export class ActionStripConfigGenerator implements IConfigGenerator {
 
         configs.push(new Config({
             component: 'ActionStripStylingComponent',
-            appConfig: BaseAppConfig,
+            additionalFiles: ["/src/app/menus/action-strip/action-strip-paragraph-styling/layout.scss"],
+            appModuleConfig: new AppModuleConfig({
+                imports: ['IgxActionStripModule', 'ActionStripStylingComponent', 'IgxRippleModule', 'IgxButtonModule', 'IgxIconModule'],
+                ngDeclarations: ['ActionStripStylingComponent'],
+                ngImports: ['IgxActionStripModule', 'IgxRippleModule', 'IgxButtonModule', 'IgxIconModule']
+            }),
             shortenComponentPathBy: '/menus/action-strip/'
         }));
 

live-editing/configs/AvatarConfigGenerator.ts

@@ -15,7 +15,12 @@ export class AvatarConfigGenerator implements IConfigGenerator {
 
         configs.push(new Config({
             component: 'AvatarStylingSampleComponent',
-            appConfig: BaseAppConfig,
+            additionalFiles: ["/src/app/layouts/avatar/avatar-styling/layout.scss"],
+            appModuleConfig: new AppModuleConfig({
+                imports: ['IgxAvatarModule', 'AvatarStylingSampleComponent'],
+                ngDeclarations: ['AvatarStylingSampleComponent'],
+                ngImports: ['IgxAvatarModule']
+            }),
             shortenComponentPathBy: "/layouts/avatar/"
         }));
 

live-editing/configs/BadgeConfigGenerator.ts

@@ -37,8 +37,12 @@ export class BadgeConfigGenerator implements IConfigGenerator {
 
         configs.push(new Config({
             component: 'BadgeStylingSampleComponent',
-            additionalFiles: ["src/app/data-display/badge/model/member.model.ts"],
-            appConfig: BaseAppConfig,
+            additionalFiles: ["src/app/data-display/badge/model/member.model.ts", "src/app/data-display/badge/badge-styling-sample/layout.scss"],
+            appModuleConfig: new AppModuleConfig({
+                imports: ['IgxBadgeModule', 'IgxListModule', 'IgxAvatarModule', 'BadgeStylingSampleComponent'],
+                ngDeclarations: ['BadgeStylingSampleComponent'],
+                ngImports: ['IgxBadgeModule', 'IgxListModule', 'IgxAvatarModule']
+            }),
             shortenComponentPathBy: "/data-display/badge/"
         }));
 

live-editing/configs/ButtonConfigGenerator.ts

@@ -43,7 +43,13 @@ export class ButtonConfigGenerator implements IConfigGenerator {
         // button style
         configs.push(new Config({
             component: 'ButtonsStyleComponent',
-            appConfig: BaseAppConfig,
+            additionalFiles: ["/src/app/data-entries/buttons/buttons-style/layout.scss"],
+            appModuleConfig: new AppModuleConfig({
+                imports: ['IgxButtonModule', 'IgxIconModule', 'IgxRippleModule', 'IgxButtonGroupModule',
+                    'ButtonsStyleComponent'],
+                ngDeclarations: ['ButtonsStyleComponent'],
+                ngImports: ['IgxButtonModule', 'IgxIconModule', 'IgxRippleModule', 'IgxButtonGroupModule']
+            }),
             shortenComponentPathBy: "/data-entries/buttons/"
         }));
 

live-editing/configs/ButtonGroupConfigGenerator.ts

@@ -49,7 +49,12 @@ export class ButtonGroupConfigGenerator implements IConfigGenerator {
         // button group style
         configs.push(new Config({
             component: 'ButtonGroupStyleComponent',
-            appConfig: BaseAppConfig,
+            additionalFiles: ["/src/app/data-entries/buttonGroup/button-group-style/layout.scss"],
+            appModuleConfig: new AppModuleConfig({
+                imports: ['IgxButtonGroupModule', 'ButtonGroupStyleComponent', 'IgxRippleModule', 'IgxIconModule', 'IgxButtonModule'],
+                ngDeclarations: ['ButtonGroupStyleComponent'],
+                ngImports: ['IgxButtonGroupModule', 'IgxRippleModule', 'IgxIconModule', 'IgxButtonModule']
+            }),
             shortenComponentPathBy: "/data-entries/buttonGroup/"
         }));
 

live-editing/configs/CalendarConfigGenerator.ts

@@ -77,7 +77,12 @@ export class CalendarConfigGenerator implements IConfigGenerator {
 
         configs.push(new Config({
             component: 'CalendarStylingSampleComponent',
-            appConfig: BaseAppConfig,
+            additionalFiles: ["/src/app/scheduling/calendar/calendar-styling-sample/layout.scss"],
+            appModuleConfig: new AppModuleConfig({
+                imports: ['IgxCalendarModule', 'CalendarStylingSampleComponent'],
+                ngDeclarations: ['CalendarStylingSampleComponent'],
+                ngImports: ['IgxCalendarModule']
+            }),
             shortenComponentPathBy: "/scheduling/calendar/"
         }));
 

live-editing/configs/CardConfigGenerator.ts

@@ -74,7 +74,8 @@ export class CardConfigGenerator implements IConfigGenerator {
             component: 'CardStylingSampleComponent',
             appConfig: BaseAppConfig,
             additionalFiles: [
-                "/src/app/layouts/card/card.blueprint.ts"
+                "/src/app/layouts/card/card.blueprint.ts",
+                "/src/app/layouts/card/card-styling-sample/layout.scss"
             ],
             shortenComponentPathBy: "/layouts/card/"
         }));

live-editing/configs/CheckboxConfigGenerator.ts

@@ -30,7 +30,12 @@ export class CheckboxConfigGenerator implements IConfigGenerator {
         // checkbox styling
         configs.push(new Config({
             component: 'CheckboxStylingComponent',
-            appConfig: BaseAppConfig,
+            additionalFiles: ["/src/app/data-entries/checkbox/checkbox-styling/layout.scss"],
+            appModuleConfig: new AppModuleConfig({
+                imports: ['IgxCheckboxModule', 'CheckboxStylingComponent'],
+                ngDeclarations: ['CheckboxStylingComponent'],
+                ngImports: ['IgxCheckboxModule']
+            }),
             shortenComponentPathBy: "/data-entries/checkbox/"
         }));
 

live-editing/configs/ChipConfigGenerator.ts

@@ -25,7 +25,12 @@ export class ChipConfigGenerator implements IConfigGenerator {
 
         configs.push(new Config({
             component: 'ChipStylingSampleComponent',
-            appConfig: BaseAppConfig,
+            additionalFiles: ["/src/app/data-display/chip/chip-styling/layout.scss"],
+            appModuleConfig: new AppModuleConfig({
+                imports: ['IgxChipsModule', 'IgxIconModule', 'ChipStylingSampleComponent'],
+                ngDeclarations: ['ChipStylingSampleComponent'],
+                ngImports: ['IgxChipsModule', 'IgxIconModule']
+            }),
             shortenComponentPathBy: "/data-display/"
         }));