Updating Production from Staging

live-editing/configs/ButtonConfigGenerator.ts

@@ -1,48 +1,95 @@
-import { IgxButtonGroupModule } from 'igniteui-angular/button-group';
-import { IgxButtonModule, IgxRippleModule } from 'igniteui-angular/directives';
-import { IgxIconModule } from 'igniteui-angular/icon';
-import { AppModuleConfig, Config, IConfigGenerator } from 'igniteui-live-editing'
+import { Config, IConfigGenerator } from 'igniteui-live-editing'
 import { BaseAppConfig } from './BaseConfig';
-import { ButtonsRoundnessComponent } from '../../src/app/data-entries/buttons/buttons-roundness-sample/buttons-roundness-sample';
 export class ButtonConfigGenerator implements IConfigGenerator {
 
 
     public generateConfigs(): Config[] {
         const configs = new Array<Config>();
 
-        // buttons sample 1
+        // button overview
         configs.push(new Config({
-            component: 'ButtonsSample1Component',
+            component: 'ButtonOverviewComponent',
             appConfig: BaseAppConfig,
-            shortenComponentPathBy: "/data-entries/buttons/"
+            shortenComponentPathBy: "/data-entries/button/"
         }));
 
-        // buttons roundness
+        // flat button
         configs.push(new Config({
-            component: 'ButtonsDisabledComponent',
+            component: 'ButtonFlatComponent',
             appConfig: BaseAppConfig,
-            shortenComponentPathBy: "/data-entries/buttons/"
+            shortenComponentPathBy: "/data-entries/button/"
         }));
 
-        // buttons display density
+        // button interaction states
         configs.push(new Config({
-            component: 'ButtonsDisplayDensityComponent',
+            component: 'ButtonInteractionStatesComponent',
             appConfig: BaseAppConfig,
-            shortenComponentPathBy: "/data-entries/buttons/"
+            shortenComponentPathBy: "/data-entries/button/"
         }));
 
+        // button layout
         configs.push(new Config({
-            component: 'ButtonsRoundnessComponent',
+            component: 'ButtonLayoutComponent',
             appConfig: BaseAppConfig,
-            shortenComponentPathBy: "/data-entries/buttons/"
+            shortenComponentPathBy: "/data-entries/button/"
         }));
 
-        // button style
+        // contained button
         configs.push(new Config({
-            component: 'ButtonsStyleComponent',
-            additionalFiles: ["/src/app/data-entries/buttons/buttons-style/layout.scss"],
+            component: 'ButtonContainedComponent',
             appConfig: BaseAppConfig,
-            shortenComponentPathBy: "/data-entries/buttons/"
+            shortenComponentPathBy: "/data-entries/button/"
+        }));
+
+        // floating action button
+        configs.push(new Config({
+            component: 'ButtonFabComponent',
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/data-entries/button/"
+        }));
+
+        // outlined button
+        configs.push(new Config({
+            component: 'ButtonOutlinedComponent',
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/data-entries/button/"
+        }));
+
+        // button states
+        configs.push(new Config({
+            component: 'ButtonStatesComponent',
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/data-entries/button/"
+        }));
+
+        // button size
+        configs.push(new Config({
+            component: 'ButtonSizeComponent',
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/data-entries/button/"
+        }));
+
+        // download button
+        configs.push(new Config({
+            component: 'ButtonDownloadComponent',
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/data-entries/button/"
+        }));
+
+        // button styling
+        configs.push(new Config({
+            component: 'ButtonStylingComponent',
+            additionalFiles: ["/src/app/data-entries/button/button-styling/layout.scss"],
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/data-entries/button/"
+        }));
+
+        // button tailwind styling
+        configs.push(new Config({
+            component: 'ButtonTailwindStylingComponent',
+            additionalFiles: ["/src/app/data-entries/button/button-tailwind-styling/layout.scss"],
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/data-entries/button/"
         }));
 
         return configs;

live-editing/configs/GridConfigGenerator.ts

@@ -574,6 +574,11 @@ export class GridConfigGenerator implements IConfigGenerator {
             additionalFiles: ['/src/app/directives/prevent-scroll.directive.ts', '/src/app/data/customers.ts', '/src/app/grid/grid-sample-pinning-styling/layout.scss'],
             appConfig: BaseAppConfig
         }));
+        configs.push(new Config({
+            component: 'GridThemingComponent',
+            additionalFiles: ['/src/app/directives/prevent-scroll.directive.ts', '/src/app/data/invoiceData.ts'],
+            appConfig: BaseAppConfig
+        }));
         configs.push(new Config({
             component: 'GridGroupByStylingComponent',
             additionalFiles: ['/src/app/directives/prevent-scroll.directive.ts', '/src/app/data/invoiceData.ts', '/src/app/grid/grid-groupby-styling/layout.scss'],

live-editing/configs/PivotGridConfigGenerator.ts

@@ -83,7 +83,7 @@ export class PivotGridConfigGenerator implements IConfigGenerator {
         }));
 
         configs.push(new Config({
-            additionalFiles: ['/src/app/directives/prevent-scroll.directive.ts', '/src/app/data/dataToAnalyze.ts'],
+            additionalFiles: ['/src/app/data/pivot-data.ts', '/src/app/pivot-grid/pivot-styling/layout.scss'],
             appConfig: BaseAppConfig,
             component: 'PivotStylingComponent'
         }));

live-editing/configs/SwitchConfigGenerator.ts

@@ -7,24 +7,44 @@ export class SwitchConfigGenerator implements IConfigGenerator {
     public generateConfigs(): Config[] {
         const configs = new Array<Config>();
 
-        // switch sample 1
+        // switch overview
         configs.push(new Config({
-            component: 'SwitchSample1Component',
+            component: 'SwitchOverviewComponent',
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-entries/switch/"
         }));
 
-        // switch sample 2
+        // switch enabled
         configs.push(new Config({
-            component: 'SwitchSample2Component',
+            component: 'SwitchEnabledComponent',
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/data-entries/switch/"
+        }));
+
+        // switch disabled
+        configs.push(new Config({
+            component: 'SwitchDisabledComponent',
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/data-entries/switch/"
+        }));
+
+        // switch selected
+        configs.push(new Config({
+            component: 'SwitchSelectedComponent',
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/data-entries/switch/"
+        }));
+
+        // switch layout
+        configs.push(new Config({
+            component: 'SwitchLayoutComponent',
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-entries/switch/"
         }));
 
         // switch styling
         configs.push(new Config({
             component: 'SwitchStylingComponent',
-            additionalFiles: ["/src/app/data-entries/switch/switch-styling/layout.scss"],
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-entries/switch/"
         }));

live-editing/configs/ThemingConfigGenerator.ts

@@ -72,6 +72,22 @@ export class ThemingConfigGenerator implements IConfigGenerator {
             shortenComponentPathBy: '/theming/angular/'
         }));
 
+        configs.push(new Config({
+            component: 'GridThemePlaygroundComponent',
+            additionalFiles: [
+                '/src/app/theming/grid-theme-playground/theme-color-field.component.ts',
+                '/src/app/theming/grid-theme-playground/theme-color-field.component.html',
+                '/src/app/theming/grid-theme-playground/theme-color-field.component.scss',
+                '/src/app/theming/grid-theme-playground/color-utils.ts',
+                '/src/app/data/invoiceData.ts',
+                '/src/app/data/pivot-data.ts',
+                '/src/app/data/singersData.ts',
+                '/src/app/tree-grid/data/employees-flat-avatars.ts'
+            ],
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: '/theming/grid-theme-playground/'
+        }));
+
         configs.push(new Config({
             component: 'TailwindSampleComponent',
             appConfig: BaseAppConfig,

src/app/app.routes.server.ts

@@ -49,6 +49,16 @@ export const serverRoutes: ServerRoute[] = [
         path: 'samples/lists/**',
         renderMode: RenderMode.Client // TODO: Fails with Prerender
     },
+    {
+        // Hosts grid previews, and grids fail under Prerender like every other
+        // grid route below. Must precede the theming/** globs.
+        path: 'theming/grid-theme-playground',
+        renderMode: RenderMode.Client
+    },
+    {
+        path: 'samples/theming/grid-theme-playground',
+        renderMode: RenderMode.Client
+    },
     {
         path: 'theming/**',
         renderMode: RenderMode.Prerender

src/app/data-entries/button/_bootstrap-button-theme.scss

@@ -0,0 +1,61 @@
+@use 'igniteui-angular/theming' as *;
+@use 'igniteui-angular/lib/core/styles/components/button/button-component' as button;
+@use 'igniteui-angular/lib/core/styles/themes/presets/igniteui-bootstrap-light';
+@use 'igniteui-theming/sass/typography/presets' as typography-presets;
+
+:host ::ng-deep {
+    @include typography(
+        $font-family: typography-presets.$bootstrap-typeface,
+        $type-scale: typography-presets.$bootstrap-type-scale
+    );
+
+    @include button(
+        $flat: flat-button-theme(
+            $schema: $light-bootstrap-schema,
+            $foreground: color($light-bootstrap-palette, 'primary'),
+            $hover-foreground: color($light-bootstrap-palette, 'primary'),
+            $disabled-foreground: color($light-bootstrap-palette, 'primary', 200)
+        ),
+        $contained: contained-button-theme(
+            $schema: $light-bootstrap-schema,
+            $background: color($light-bootstrap-palette, 'primary'),
+            $foreground: var(--ig-gray-50),
+            $hover-background: color($light-bootstrap-palette, 'primary', 600),
+            $hover-foreground: var(--ig-gray-50),
+            $focus-background: color($light-bootstrap-palette, 'primary', 800),
+            $focus-foreground: var(--ig-gray-50),
+            $focus-hover-background: color($light-bootstrap-palette, 'primary', 600),
+            $focus-hover-foreground: var(--ig-gray-50),
+            $disabled-background: color($light-bootstrap-palette, 'primary', 50),
+            $disabled-foreground: color($light-bootstrap-palette, 'primary', 200)
+        ),
+        $outlined: outlined-button-theme(
+            $schema: $light-bootstrap-schema,
+            $foreground: color($light-bootstrap-palette, 'primary'),
+            $hover-background: color($light-bootstrap-palette, 'primary'),
+            $hover-foreground: var(--ig-gray-50),
+            $disabled-foreground: color($light-bootstrap-palette, 'primary', 200),
+            $disabled-border-color: color($light-bootstrap-palette, 'primary', 50)
+        ),
+        $fab: fab-button-theme(
+            $schema: $light-bootstrap-schema,
+            $background: color($light-bootstrap-palette, 'secondary'),
+            $foreground: var(--ig-gray-50),
+            $hover-background: color($light-bootstrap-palette, 'primary'),
+            $hover-foreground: var(--ig-gray-50),
+            $disabled-background: color($light-bootstrap-palette, 'gray', 300),
+            $disabled-foreground: color($light-bootstrap-palette, 'gray', 500),
+            $resting-shadow: none,
+            $hover-shadow: none
+        )
+    );
+    @include button.component();
+
+    [igxButton] {
+        --ig-size: var(--ig-size-medium);
+    }
+
+    button[igxButton='fab'] {
+        --ig-size: var(--ig-size-large);
+    }
+}

src/app/data-entries/button/button-contained/button-contained.component.html

@@ -0,0 +1,7 @@
+<div class="button-sample">
+    <button igxButton="contained">
+        <igx-icon family="material">notifications</igx-icon>
+        Contained
+        <igx-icon family="material">notifications</igx-icon>
+    </button>
+</div>

src/app/data-entries/button/button-contained/button-contained.component.scss

@@ -0,0 +1,11 @@
+@use '../_bootstrap-button-theme';
+
+.button-sample {
+    display: flex;
+    padding: 2.5rem;
+}
+
+.button-sample button {
+    width: 46%;
+    margin: auto;
+}

src/app/data-entries/button/button-contained/button-contained.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { IgxButtonDirective } from 'igniteui-angular/directives';
+import { IgxIconComponent } from 'igniteui-angular/icon';
+
+@Component({
+    selector: 'app-button-contained',
+    styleUrls: ['./button-contained.component.scss'],
+    templateUrl: './button-contained.component.html',
+    imports: [IgxButtonDirective, IgxIconComponent]
+})
+export class ButtonContainedComponent { }

src/app/data-entries/button/button-download/button-download.component.html

@@ -0,0 +1,3 @@
+<div class="button-sample">
+    <a igxButton="contained" href="" download="url" target="_blank">Download</a>
+</div>

src/app/data-entries/button/button-download/button-download.component.scss

@@ -0,0 +1,11 @@
+@use '../_bootstrap-button-theme';
+
+.button-sample {
+    display: flex;
+    padding: 2.5rem;
+}
+
+.button-sample a {
+    width: 46%;
+    margin: auto;
+}

src/app/data-entries/button/button-download/button-download.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { IgxButtonDirective } from 'igniteui-angular/directives';
+
+@Component({
+    selector: 'app-button-download',
+    styleUrls: ['./button-download.component.scss'],
+    templateUrl: './button-download.component.html',
+    imports: [IgxButtonDirective]
+})
+export class ButtonDownloadComponent { }

src/app/data-entries/button/button-fab/button-fab.component.html

@@ -0,0 +1,7 @@
+<div class="button-sample">
+    <button igxButton="fab">
+        <igx-icon family="material">add</igx-icon>
+        Floating Action
+        <igx-icon family="material">add</igx-icon>
+    </button>
+</div>

src/app/data-entries/button/button-fab/button-fab.component.scss

@@ -0,0 +1,11 @@
+@use '../_bootstrap-button-theme';
+
+.button-sample {
+    display: flex;
+    padding: 2rem;
+}
+
+.button-sample button {
+    width: 45%;
+    margin: auto;
+}

src/app/data-entries/buttons/buttons-sample-6/buttons-sample-6.component.ts → src/app/data-entries/button/button-fab/button-fab.component.ts

@@ -3,9 +3,9 @@ import { IgxButtonDirective } from 'igniteui-angular/directives';
 import { IgxIconComponent } from 'igniteui-angular/icon';
 
 @Component({
-    selector: 'app-buttons-sample-6',
-    styleUrls: ['./buttons-sample-6.component.scss'],
-    templateUrl: './buttons-sample-6.component.html',
+    selector: 'app-button-fab',
+    styleUrls: ['./button-fab.component.scss'],
+    templateUrl: './button-fab.component.html',
     imports: [IgxButtonDirective, IgxIconComponent]
 })
-export class ButtonsSample6Component { }
+export class ButtonFabComponent { }

src/app/data-entries/button/button-flat/button-flat.component.html

@@ -0,0 +1,7 @@
+<div class="button-sample">
+    <button igxButton="flat">
+        <igx-icon family="material">notifications</igx-icon>
+        Flat
+        <igx-icon family="material">notifications</igx-icon>
+    </button>
+</div>