Merge branch 'simeonoff/fix-13693' of https://github.com/IgniteUI/igniteui-angular into simeonoff/fix-13693

Author: kdinev

projects/igniteui-angular/src/lib/core/density.ts

@@ -85,22 +85,18 @@ export class DisplayDensityBase implements DoCheck, OnInit {
      */
     @Input()
     public get displayDensity(): DisplayDensity {
-        if (!this.size) {
-            return (
-                this._displayDensity ??
-                this.displayDensityOptions?.displayDensity ??
-                DisplayDensity.comfortable
-            );
-        }
-
         switch (this.size) {
             case '1':
                 return DisplayDensity.compact;
             case '2':
                 return DisplayDensity.cosy;
             case '3':
             default:
-                return DisplayDensity.comfortable;
+                return (
+                    this._displayDensity ??
+                    this.displayDensityOptions?.displayDensity ??
+                    DisplayDensity.comfortable
+                );
         }
     }
 
@@ -122,7 +118,7 @@ export class DisplayDensityBase implements DoCheck, OnInit {
     }
 
     public get size() {
-        return this._document.defaultView
+        return globalThis.document?.defaultView
             .getComputedStyle(this._host.nativeElement)
             .getPropertyValue('--ig-size')
             .trim();
@@ -135,7 +131,8 @@ export class DisplayDensityBase implements DoCheck, OnInit {
 
     protected oldDisplayDensityOptions: IDisplayDensityOptions = {
         displayDensity: DisplayDensity.comfortable,
-    };
+    }
+
     protected _displayDensity: DisplayDensity;
 
     constructor(

projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss

@@ -376,7 +376,6 @@
         align-items: center;
         justify-content: center;
         text-align: center;
-        flex: 1 1 auto;
         height: var-get($theme, 'size');
         padding-inline: sizable(
             map.get($chip-padding, 'compact'),
@@ -411,9 +410,9 @@
 
         igx-avatar,
         igx-circular-bar {
-            max-width: 100%;
             max-height: 100%;
             width: sizable(rem(14px), rem(18px), rem(24px));
+            max-width: sizable(rem(14px), rem(18px), rem(24px));
             height: sizable(rem(14px), rem(18px), rem(24px));
         }
 
@@ -655,21 +654,41 @@
     }
 
     %igx-chip__start {
-        igx-avatar,
-        igx-circular-bar {
+        > igx-avatar,
+        > igx-circular-bar {
             &:first-child {
                 margin-inline-start: calc(#{sizable(rem(0), rem(4px), rem(8px))} * -1);
             }
         }
+
+        [igxPrefix],
+        igx-prefix {
+            &:first-of-type {
+                igx-avatar,
+                igx-circular-bar {
+                    margin-inline-start: calc(#{sizable(rem(0), rem(4px), rem(8px))} * -1);
+                }
+            }
+        }
     }
 
     %igx-chip__end {
-        igx-avatar,
-        igx-circular-bar {
+        > igx-avatar,
+        > igx-circular-bar {
             &:last-child {
                 margin-inline-end: calc(#{sizable(rem(0), rem(4px), rem(8px))} * -1);
             }
         }
+
+        [igxPrefix],
+        igx-prefix {
+            &:first-of-type {
+                igx-avatar,
+                igx-circular-bar {
+                    margin-inline-end: calc(#{sizable(rem(0), rem(4px), rem(8px))} * -1);
+                }
+            }
+        }
     }
 
     %igx-chip__start,
@@ -694,8 +713,7 @@
 
     %igx-chip__prefix,
     %igx-chip__suffix {
-        @include ellipsis();
-        display: inline-block;
+        display: inline-flex;
         vertical-align: middle;
         max-width: $chip-max-width;
 

projects/igniteui-angular/src/lib/core/utils.ts

@@ -573,11 +573,11 @@ export const formatCurrency = new CurrencyPipe(undefined).transform;
 
 /** Converts pixel values to their rem counterparts for a base value */
 export const rem = (value: number | string) => {
-    const base = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--ig-base-font-size'))
+    const base = parseFloat(getComputedStyle(globalThis.document?.documentElement).getPropertyValue('--ig-base-font-size'))
     return Number(value) / base;
 }
 
 /** Get the size of the component as derived from the CSS size variable */
 export function getComponentSize(el: Element) {
-    return window.getComputedStyle(el).getPropertyValue('--component-size');
+    return globalThis.window?.getComputedStyle(el).getPropertyValue('--component-size');
 }