Merge pull request #13948 from IgniteUI/simeonoff/indigo-theme

feat(themes): implement updated Indigo UI theme

Author: kdinev

package-lock.json

@@ -70,7 +70,7 @@
     "@types/source-map": "0.5.2",
     "express": "^4.18.2",
     "fflate": "^0.8.1",
-    "igniteui-theming": "^4.4.0",
+    "igniteui-theming": "^5.0.1",
     "igniteui-trial-watermark": "^3.0.2",
     "lodash-es": "^4.17.21",
     "rxjs": "^7.8.0",

package.json

@@ -0,0 +1,11 @@
+{
+    "$schema": "../../common/schema/theme-changes.schema.json",
+    "changes": [
+        {
+            "name": "$disabled-color",
+            "replaceWith": "$disabled-text-color",
+            "owner": "expansion-panel-theme",
+            "type": "property"
+        }
+    ]
+}

projects/igniteui-angular/migrations/update-17_1_0/changes/theme-changes.json

@@ -153,4 +153,17 @@ describe(`Update to ${version}`, () => {
         `
         );
     });
+
+    it('should rename the expansion-panel $disabled-color property to $disabled-text-color', async () => {
+        appTree.create(
+            `/testSrc/appPrefix/component/test.component.scss`,
+            `$custom-expansion-panel: expansion-panel-theme($disabled-color: color($default-palette, 'gray', 200));`
+        );
+
+        const tree = await schematicRunner.runSchematic(migrationName, { shouldInvokeLS: false }, appTree);
+
+        expect(tree.readContent('/testSrc/appPrefix/component/test.component.scss')).toEqual(
+            `$custom-expansion-panel: expansion-panel-theme($disabled-text-color: color($default-palette, 'gray', 200));`
+        );
+    });
 });

projects/igniteui-angular/migrations/update-17_1_0/index.spec.ts

@@ -74,7 +74,7 @@
         "igniteui-trial-watermark": "^3.0.2",
         "lodash-es": "^4.17.21",
         "uuid": "^9.0.0",
-        "igniteui-theming": "^4.4.0",
+        "igniteui-theming": "^5.0.1",
         "@igniteui/material-icons-extended": "^3.0.0"
     },
     "peerDependencies": {

projects/igniteui-angular/package.json

@@ -551,10 +551,8 @@ export class IgxBannerSampleComponent {
                         <igx-avatar
                             src="https://www.infragistics.com/angular-demos/assets/images/card/avatars/brad_stanley.jpg">
                         </igx-avatar>
-                        <div class="igx-card-header__tgroup">
-                            <h3 class="igx-card-header__title--small">Brad Stanley</h3>
-                            <h5 class="igx-card-header__subtitle">Audi AG</h5>
-                        </div>
+                        <h3 class="igx-card-header__title--small">Brad Stanley</h3>
+                        <h5 class="igx-card-header__subtitle">Audi AG</h5>
                     </igx-card-header>
                     <igx-card-content>
                         <p class="igx-card-content__text">Brad Stanley has requested to follow you.</p>

projects/igniteui-angular/src/lib/banner/banner.component.spec.ts

@@ -7,6 +7,7 @@
         [igxCardHeaderTitle],
         [igxCardHeaderSubtitle],
         .igx-card-header__title,
+        .igx-card-header__title--small,
         .igx-card-header__subtitle">
     </ng-content>
 </div>

projects/igniteui-angular/src/lib/card/card-header.component.html

@@ -18,6 +18,20 @@
     </span>
 </ng-template>
 
+<ng-template #indigoPrevButton let-disabled>
+    <span class="igx-nav-arrow"
+        [class.igx-nav-arrow--disabled]="disabled">
+        <igx-icon>chevron_left</igx-icon>
+    </span>
+</ng-template>
+
+<ng-template #indigoNextButton let-disabled>
+    <span class="igx-nav-arrow"
+        [class.igx-nav-arrow--disabled]="disabled">
+        <igx-icon>chevron_right</igx-icon>
+    </span>
+</ng-template>
+
 <div *ngIf="showIndicators" [ngClass]="indicatorsOrientationClass" [attr.role]="'tablist'">
     <div *ngFor="let slide of slides"
         class="igx-carousel-indicators__indicator"
@@ -46,6 +60,3 @@
 <div *ngIf="navigation && slides.length" role="button" tabindex="0" class="igx-carousel__arrow--next" [attr.aria-label]="resourceStrings.igx_carousel_next_slide" (keydown.enter)="next()" (click)="next()">
     <ng-container *ngTemplateOutlet="getNextButtonTemplate; context: {$implicit: nextButtonDisabled};"></ng-container>
 </div>
-
-
-

projects/igniteui-angular/src/lib/carousel/carousel.component.html

@@ -1,6 +1,7 @@
 import { NgIf, NgClass, NgFor, NgTemplateOutlet } from '@angular/common';
 import {
     AfterContentInit,
+    AfterViewChecked,
     ChangeDetectorRef,
     Component,
     ContentChild,
@@ -27,7 +28,6 @@ import { merge, Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { CarouselResourceStringsEN, ICarouselResourceStrings } from '../core/i18n/carousel-resources';
 import { IBaseEventArgs, PlatformUtil } from '../core/utils';
-
 import { IgxAngularAnimationService } from '../services/animation/angular-animation-service';
 import { AnimationService } from '../services/animation/animation';
 import { Direction, IgxCarouselComponentBase } from './carousel-base';
@@ -37,9 +37,11 @@ import { IgxIconComponent } from '../icon/icon.component';
 import { getCurrentResourceStrings } from '../core/i18n/resources';
 import { HammerGesturesManager } from '../core/touch';
 import { CarouselIndicatorsOrientation, HorizontalAnimationType } from './enums';
+import { ThemeService } from '../services/theme/theme.service';
 
 let NEXT_ID = 0;
 
+
 @Injectable()
 export class CarouselHammerConfig extends HammerGestureConfig {
     public override overrides = {
@@ -84,7 +86,8 @@ export class CarouselHammerConfig extends HammerGestureConfig {
     standalone: true,
     imports: [IgxIconComponent, NgIf, NgClass, NgFor, NgTemplateOutlet]
 })
-export class IgxCarouselComponent extends IgxCarouselComponentBase implements OnDestroy, AfterContentInit {
+
+export class IgxCarouselComponent extends IgxCarouselComponentBase implements OnDestroy, AfterContentInit, AfterViewChecked {
 
     /**
      * Sets the `id` of the carousel.
@@ -140,6 +143,12 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
         return this.gesturesSupport ? 'pan-y' : 'auto';
     }
 
+    /**
+     * Sets the theme of the carousel component.
+     */
+    @Input('theme')
+    public theme: string;
+
     /**
      * Sets whether the carousel should `loop` back to the first slide after reaching the last slide.
      * Default value is `true`.
@@ -373,6 +382,12 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
     @ViewChild('defaultPrevButton', { read: TemplateRef, static: true })
     private defaultPrevButton: TemplateRef<any>;
 
+    @ViewChild('indigoNextButton', { read: TemplateRef, static: true })
+    private indigoNextButton: TemplateRef<any>;
+
+    @ViewChild('indigoPrevButton', { read: TemplateRef, static: true })
+    private indigoPrevButton: TemplateRef<any>;
+
     /**
      * @hidden
      * @internal
@@ -418,15 +433,17 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
         if (this.nextButtonTemplate) {
             return this.nextButtonTemplate;
         }
-        return this.defaultNextButton;
+
+        return this.isTypeIndigo ? this.indigoNextButton : this.defaultNextButton
     }
 
     /** @hidden */
     public get getPrevButtonTemplate(): TemplateRef<any> {
         if (this.prevButtonTemplate) {
             return this.prevButtonTemplate;
         }
-        return this.defaultPrevButton;
+
+        return this.isTypeIndigo ? this.indigoPrevButton : this.defaultPrevButton
     }
 
     /** @hidden */
@@ -540,9 +557,12 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
         private element: ElementRef,
         private iterableDiffers: IterableDiffers,
         @Inject(IgxAngularAnimationService) animationService: AnimationService,
-        private platformUtil: PlatformUtil) {
+        private platformUtil: PlatformUtil,
+        private themeService: ThemeService
+    ) {
         super(animationService, cdr);
         this.differ = this.iterableDiffers.find([]).create(null);
+        this.theme = this.themeService.theme;
     }
 
 
@@ -674,6 +694,23 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
         }
     }
 
+    /**
+    * Returns true if the `IgxCarouselComponent` theme is Indigo.
+    * 
+    * ```typescript
+    * @ViewChild("carousel")
+    * public carousel: IgxCarouselComponent;
+    * 
+    * ngAfterViewInit(){
+    *    let isTypeIndigo = this.carousel.isTypeIndigo;
+    * }
+    * ```
+    */
+    @HostBinding('class.igx-carousel--indigo')
+    public get isTypeIndigo() {
+        return this.theme ? this.theme === 'indigo-design' : this.themeService.theme === 'indigo-design';
+    }
+
     /** @hidden */
     public ngAfterContentInit() {
         this.slides.changes
@@ -683,6 +720,11 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
         this.initSlides(this.slides);
     }
 
+    /** @hidden @internal */
+    public ngAfterViewChecked() {
+        this.themeService.getCssProp(this.element);
+    }
+
     /** @hidden */
     public ngOnDestroy() {
         this.destroy$.next(true);

projects/igniteui-angular/src/lib/carousel/carousel.component.ts

@@ -87,8 +87,9 @@
 @mixin gen-color-class($name, $variant, $prefix, $suffix) {
     $prefix: if($prefix, '#{$prefix}-', '');
     $suffix: if($suffix, '-#{$suffix}', '');
+    $_name: '' + $name;
 
-    .#{$prefix}#{$name}-#{$variant}#{$suffix} {
+    .#{$prefix}#{$_name}-#{$variant}#{$suffix} {
         @content;
     }
 }