refactor(*): bundle styles with components

.gitignore

@@ -48,6 +48,9 @@ src/**/*.js
 src/**/*.js.map
 src/**/*.css.map
 
+# Artefacts
+projects/igniteui-angular/**/*.component.css
+
 # Typedoc Theme
 extras/docs/themes/typedoc/bin
 extras/docs/themes/sassdoc/node_modules

package.json

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve --open --hmr",
+    "start": "concurrently -r \"npm run build:styles:components\" \"npm run watch:styles\" \"ng serve --open --hmr\"",
     "start:elements": "ng serve --project igniteui-angular-elements",
     "build": "ng build --configuration production",
     "test": "ng test igniteui-angular",
@@ -22,8 +22,10 @@
     "test:i18n": "ts-node --skip-project ./projects/igniteui-angular/src/lib/core/i18n/tests/tests.mjs",
     "test:elements": "ng test igniteui-angular-elements --watch=false --no-progress --code-coverage --source-map=false",
     "test:elements:watch": "ng test igniteui-angular-elements",
-    "build:lib": "ng build igniteui-angular --configuration production && npm run build:styles",
-    "build:styles": "node scripts/build-styles.mjs",
+    "build:lib": "ng build igniteui-angular --configuration production && npm run build:styles:all",
+    "build:styles:all": "node scripts/build-styles.mjs",
+    "build:styles:components": "node scripts/build-component-styles.mjs",
+    "watch:styles": "node scripts/watch-styles.mjs",
     "build:migrations": "gulp copyMigrations && tsc --listEmittedFiles --project ./projects/igniteui-angular/migrations/tsconfig.json",
     "build:schematics": "gulp copySchematics && tsc --listEmittedFiles --project ./projects/igniteui-angular/schematics/tsconfig.json",
     "build:docs": "sassdoc projects/igniteui-angular/src/lib/core/styles && gulp typedoc-build:theme",
@@ -105,6 +107,7 @@
     "@typescript-eslint/eslint-plugin": "^8.15.0",
     "@typescript-eslint/parser": "^8.15.0",
     "autoprefixer": "^10.4.16",
+    "concurrently": "^9.0.1",
     "del": "^6.0.0",
     "eslint": "^9.15.0",
     "fs-extra": "^11.3.0",
@@ -130,6 +133,7 @@
     "karma-junit-reporter": "^2.0.1",
     "karma-parallel": "^0.3.1",
     "karma-spec-reporter": "^0.0.36",
+    "node-watch": "^0.7.4",
     "lit-html": "^3.2.1",
     "ng-packagr": "^19.1.0",
     "postcss": "^8.5.1",

projects/igniteui-angular/src/lib/avatar/avatar.component.scss

@@ -0,0 +1,4 @@
+@use 'themes/base';
+@use 'themes/shared';
+@use 'themes/light';
+@use 'themes/dark';

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

@@ -6,7 +6,9 @@ import {
     Input,
     OnInit,
     TemplateRef,
-    ViewChild
+    ViewChild,
+    ViewEncapsulation,
+    inject
 } from '@angular/core';
 
 import { mkenum, normalizeURI } from '../core/utils';
@@ -53,9 +55,13 @@ export type IgxAvatarType = (typeof IgxAvatarType)[keyof typeof IgxAvatarType];
 @Component({
     selector: 'igx-avatar',
     templateUrl: 'avatar.component.html',
+    styleUrl: 'avatar.component.css',
+    encapsulation: ViewEncapsulation.None,
     imports: [IgxIconComponent, NgTemplateOutlet]
 })
 export class IgxAvatarComponent implements OnInit {
+    public elementRef = inject(ElementRef);
+
     /**
      * Returns the `aria-label` attribute of the avatar.
      *
@@ -332,8 +338,6 @@ export class IgxAvatarComponent implements OnInit {
         }
     }
 
-    constructor(public elementRef: ElementRef) { }
-
     /**
      * Returns the css url of the image.
      *

projects/igniteui-angular/src/lib/avatar/themes/_base.scss

@@ -0,0 +1,61 @@
+@use 'igniteui-theming/sass/animations' as *;
+@use 'igniteui-theming/sass/bem' as *;
+@use 'igniteui-theming/sass/themes' as *;
+@use 'light/tokens' as *;
+
+$theme: $material;
+
+@layer base {
+    @include b(igx-avatar) {
+        @include sizable();
+
+        --component-size: var(--ig-size, #{var-get($theme, 'default-size')});
+
+        position: relative;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        user-select: none;
+        color: var-get($theme, 'color');
+        background: var-get($theme, 'background');
+        vertical-align: middle;
+        outline-style: none;
+        flex-shrink: 0;
+        width: var-get($theme, 'size');
+        height: var-get($theme, 'size');
+
+        igx-icon {
+            --ig-size: 3;
+
+            color: var-get($theme, 'icon-color');
+        }
+
+        &::after {
+            box-shadow: none;
+            transition: box-shadow 0.15s $ease-in-out-quad;
+        }
+
+        @include e(image) {
+            width: 100%;
+            height: 100%;
+            border-radius: inherit;
+            background-size: cover;
+            background-repeat: no-repeat;
+            background-position: center;
+        }
+
+        @include m(circle) {
+            border-radius: calc(#{var-get($theme, 'size')} / 2);
+        }
+
+        @include m(rounded) {
+            border-radius: var-get($theme, 'border-radius');
+        }
+
+        @include m(initials) {
+            text-transform: uppercase;
+            font-size: calc(#{var-get($theme, 'size')} / 2);
+            line-height: calc(#{var-get($theme, 'size')} / 2);
+        }
+    }
+}

projects/igniteui-angular/src/lib/avatar/themes/dark/_index.scss

@@ -0,0 +1,6 @@
+@use 'sass:meta';
+@use 'tokens';
+@use 'styles/themes/standalone' as *;
+
+$tokens: meta.module-variables(tokens);
+@include themes(igx-avatar, $tokens, dark);

projects/igniteui-angular/src/lib/avatar/themes/dark/_tokens.scss

@@ -0,0 +1,7 @@
+@use 'igniteui-theming/sass/themes' as *;
+@use 'igniteui-theming/sass/themes/schemas/components/dark/avatar' as *;
+
+$material: digest-schema($dark-material-avatar);
+$bootstrap: digest-schema($dark-bootstrap-avatar);
+$fluent: digest-schema($dark-fluent-avatar);
+$indigo: digest-schema($dark-indigo-avatar);

projects/igniteui-angular/src/lib/avatar/themes/light/_index.scss

@@ -0,0 +1,6 @@
+@use 'sass:meta';
+@use 'tokens';
+@use 'styles/themes/standalone' as *;
+
+$tokens: meta.module-variables(tokens);
+@include themes(igx-avatar, $tokens, light);

projects/igniteui-angular/src/lib/avatar/themes/light/_tokens.scss

@@ -0,0 +1,8 @@
+@use 'igniteui-theming/sass/themes' as *;
+@use 'igniteui-theming/sass/themes/schemas/components/light/avatar' as *;
+
+$base: digest-schema($light-avatar);
+$material: digest-schema($material-avatar);
+$bootstrap: digest-schema($bootstrap-avatar);
+$fluent: digest-schema($fluent-avatar);
+$indigo: digest-schema($indigo-avatar);

projects/igniteui-angular/src/lib/avatar/themes/shared/_index.scss

@@ -0,0 +1 @@
+@forward 'indigo';

projects/igniteui-angular/src/lib/avatar/themes/shared/indigo.scss

@@ -0,0 +1,11 @@
+@use 'igniteui-theming/sass/bem' as *;
+
+@layer indigo {
+    @container style(--theme: indigo) {
+        @include b(igx-avatar) {
+            igx-icon {
+                --ig-size: 1;
+            }
+        }
+    }
+}

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

@@ -1,5 +1,5 @@
 import { NgIf } from '@angular/common';
-import { booleanAttribute, Component, HostBinding, Input } from '@angular/core';
+import { booleanAttribute, Component, ElementRef, HostBinding, Input } from '@angular/core';
 import { mkenum } from '../core/utils';
 import { IgxIconComponent } from '../icon/icon.component';
 
@@ -140,6 +140,8 @@ export class IgxBadgeComponent {
     @HostBinding('class.igx-badge')
     public cssClass = 'igx-badge';
 
+    constructor(public elementRef: ElementRef) { }
+
     /**
      * Sets a square shape to the badge, if `shape` is set to `square`.
      * By default the shape of the badge is rounded.

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

@@ -15,7 +15,7 @@ import {
     booleanAttribute,
     inject,
     DestroyRef,
-    Inject
+    Inject,
 } from '@angular/core';
 import { ControlValueAccessor, NgControl, Validators } from '@angular/forms';
 import { IgxRippleDirective } from '../directives/ripple/ripple.directive';