@fundamental-ngx/ui5-webcomponents 0.61.0-rc.8 → 0.61.0

package/fesm2022/fundamental-ngx-ui5-webcomponents-avatar-badge.mjs

@@ -1,6 +1,7 @@
 import * as i0 from '@angular/core';
 import { input, inject, ElementRef, Injector, runInInjectionContext, effect, ChangeDetectionStrategy, Component } from '@angular/core';
 import '@ui5/webcomponents/dist/AvatarBadge.js';
+import { ContentDensityObserver, contentDensityObserverProviders, ContentDensityMode } from '@fundamental-ngx/core/content-density';
 
 class AvatarBadge {
     constructor() {
@@ -25,6 +26,12 @@ class AvatarBadge {
         this.state = input("None", ...(ngDevMode ? [{ debugName: "state" }] : [])); // className is now passed
         this.elementRef = inject(ElementRef);
         this.injector = inject(Injector);
+        /**
+         * Content density observer is injected to activate automatic CSS class and
+         * UI5 attribute application. The observer self-initializes, no explicit subscribe() needed.
+         * @private
+         */
+        this._contentDensityObserver = inject(ContentDensityObserver);
     }
     get element() {
         return this.elementRef.nativeElement;
@@ -55,7 +62,11 @@ class AvatarBadge {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: AvatarBadge, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: AvatarBadge, isStandalone: true, selector: "ui5-avatar-badge, [ui5-avatar-badge]", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["ui5AvatarBadge"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: AvatarBadge, isStandalone: true, selector: "ui5-avatar-badge, [ui5-avatar-badge]", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            contentDensityObserverProviders({
+                supportedContentDensity: [ContentDensityMode.COMPACT, ContentDensityMode.COZY]
+            })
+        ], exportAs: ["ui5AvatarBadge"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: AvatarBadge, decorators: [{
             type: Component,
@@ -64,6 +75,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                     selector: 'ui5-avatar-badge, [ui5-avatar-badge]',
                     template: '<ng-content></ng-content>',
                     exportAs: 'ui5AvatarBadge',
+                    providers: [
+                        contentDensityObserverProviders({
+                            supportedContentDensity: [ContentDensityMode.COMPACT, ContentDensityMode.COZY]
+                        })
+                    ],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
         }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }] } });

package/fesm2022/fundamental-ngx-ui5-webcomponents-avatar-badge.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"fundamental-ngx-ui5-webcomponents-avatar-badge.mjs","sources":["../../../../libs/ui5-webcomponents/avatar-badge/index.ts","../../../../libs/ui5-webcomponents/avatar-badge/fundamental-ngx-ui5-webcomponents-avatar-badge.ts"],"sourcesContent":["\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  input,\n  output,\n  AfterViewInit,\n  effect,\n  runInInjectionContext,\n  inject,\n  Injector,\n  booleanAttribute,\n  computed,\n  signal\n} from '@angular/core';\nimport '@ui5/webcomponents/dist/AvatarBadge.js';\nimport { default as _AvatarBadge } from '@ui5/webcomponents/dist/AvatarBadge.js';\nimport { UI5CustomEvent } from '@ui5/webcomponents-base';\n\nimport { default as ValueState } from '@ui5/webcomponents-base/dist/types/ValueState.js';\n\n@Component({\n  standalone: true,\n  selector: 'ui5-avatar-badge, [ui5-avatar-badge]',\n  template: '<ng-content></ng-content>',\n  exportAs: 'ui5AvatarBadge',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class AvatarBadge implements AfterViewInit {\n\n  /**\n   * Defines the icon name to be displayed inside the badge.\n\n**Note:** You should import the desired icon first, then use its name as \"icon\".\n\n`import \"@ui5/webcomponents-icons/dist/{icon_name}.js\"`\n   */\n  icon = input<typeof _AvatarBadge.prototype.icon | undefined>();\n\n  /**\n   * Defines the state of the badge, which determines its styling.\n\nAvailable options:\n- `None` (default) - Standard appearance\n- `Positive` - Green, used for success/approved states\n- `Critical` - Orange, used for warning states\n- `Negative` - Red, used for error/rejected states\n- `Information` - Blue, used for informational states\n   */\n  state = input<typeof _AvatarBadge.prototype.state | undefined>(\"None\"); // className is now passed\n\n\n\n\n\n  public elementRef: ElementRef<_AvatarBadge> = inject(ElementRef);\n  public injector = inject(Injector);\n\n  get element(): _AvatarBadge {\n    return this.elementRef.nativeElement;\n  }\n\n  ngAfterViewInit(): void {\n    const wcElement = this.element;\n    \n    const inputsToSync = [\n      'icon',\n      'state',\n    ];\n    \n    // Synchronize inputs (properties)\n    for (const inputName of inputsToSync) {\n      // Find the corresponding camelCase signal property on the Angular component\n      const signalName = inputName.replace(/-./g, (x: string) => x[1].toUpperCase());\n\n      // Use the Injector to run the effect in the correct context\n      if (this[signalName] && typeof this[signalName] === 'function') {\n        runInInjectionContext(this.injector, () => {\n          effect(() => {\n            // Read the signal value\n            const value = this[signalName]();\n            if (wcElement) {\n              // Write the value to the Web Component's property\n              wcElement[inputName] = value;\n            }\n          });\n        });\n      }\n    }\n  \n    \n    \n\n  }\n}\n\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MA6Ba,WAAW,CAAA;AAPxB,IAAA,WAAA,GAAA;AASE;;;;;;AAMG;QACH,IAAA,CAAA,IAAI,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAkD;AAE9D;;;;;;;;;AASG;AACH,QAAA,IAAA,CAAA,KAAK,GAAG,KAAK,CAAkD,MAAM,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,OAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAC,CAAC;AAMhE,QAAA,IAAA,CAAA,UAAU,GAA6B,MAAM,CAAC,UAAU,CAAC;AACzD,QAAA,IAAA,CAAA,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAC;AAsCnC,IAAA;AApCC,IAAA,IAAI,OAAO,GAAA;AACT,QAAA,OAAO,IAAI,CAAC,UAAU,CAAC,aAAa;IACtC;IAEA,eAAe,GAAA;AACb,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO;AAE9B,QAAA,MAAM,YAAY,GAAG;YACnB,MAAM;YACN,OAAO;SACR;;AAGD,QAAA,KAAK,MAAM,SAAS,IAAI,YAAY,EAAE;;YAEpC,MAAM,UAAU,GAAG,SAAS,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC,CAAS,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;;AAG9E,YAAA,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,OAAO,IAAI,CAAC,UAAU,CAAC,KAAK,UAAU,EAAE;AAC9D,gBAAA,qBAAqB,CAAC,IAAI,CAAC,QAAQ,EAAE,MAAK;oBACxC,MAAM,CAAC,MAAK;;AAEV,wBAAA,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,EAAE;wBAChC,IAAI,SAAS,EAAE;;AAEb,4BAAA,SAAS,CAAC,SAAS,CAAC,GAAG,KAAK;wBAC9B;AACF,oBAAA,CAAC,CAAC;AACJ,gBAAA,CAAC,CAAC;YACJ;QACF;IAKF;8GAjEW,WAAW,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAX,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,WAAW,uXAJZ,2BAA2B,EAAA,QAAA,EAAA,IAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAI1B,WAAW,EAAA,UAAA,EAAA,CAAA;kBAPvB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,UAAU,EAAE,IAAI;AAChB,oBAAA,QAAQ,EAAE,sCAAsC;AAChD,oBAAA,QAAQ,EAAE,2BAA2B;AACrC,oBAAA,QAAQ,EAAE,gBAAgB;oBAC1B,eAAe,EAAE,uBAAuB,CAAC,MAAM;AAChD,iBAAA;;;AC5BD;;AAEG;;;;"}
+{"version":3,"file":"fundamental-ngx-ui5-webcomponents-avatar-badge.mjs","sources":["../../../../libs/ui5-webcomponents/avatar-badge/index.ts","../../../../libs/ui5-webcomponents/avatar-badge/fundamental-ngx-ui5-webcomponents-avatar-badge.ts"],"sourcesContent":["\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  input,\n  output,\n  AfterViewInit,\n  effect,\n  runInInjectionContext,\n  inject,\n  Injector,\n  booleanAttribute,\n  computed,\n  signal\n} from '@angular/core';\nimport '@ui5/webcomponents/dist/AvatarBadge.js';\nimport { default as _AvatarBadge } from '@ui5/webcomponents/dist/AvatarBadge.js';\nimport { UI5CustomEvent } from '@ui5/webcomponents-base';\nimport {\n  ContentDensityObserver,\n  contentDensityObserverProviders,\n  ContentDensityMode\n} from '@fundamental-ngx/core/content-density';\n\nimport { default as ValueState } from '@ui5/webcomponents-base/dist/types/ValueState.js';\n\n@Component({\n  standalone: true,\n  selector: 'ui5-avatar-badge, [ui5-avatar-badge]',\n  template: '<ng-content></ng-content>',\n  exportAs: 'ui5AvatarBadge',\n  providers: [\n    contentDensityObserverProviders({\n      supportedContentDensity: [ContentDensityMode.COMPACT, ContentDensityMode.COZY]\n    })\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class AvatarBadge implements AfterViewInit {\n\n  /**\n   * Defines the icon name to be displayed inside the badge.\n\n**Note:** You should import the desired icon first, then use its name as \"icon\".\n\n`import \"@ui5/webcomponents-icons/dist/{icon_name}.js\"`\n   */\n  icon = input<typeof _AvatarBadge.prototype.icon | undefined>();\n\n  /**\n   * Defines the state of the badge, which determines its styling.\n\nAvailable options:\n- `None` (default) - Standard appearance\n- `Positive` - Green, used for success/approved states\n- `Critical` - Orange, used for warning states\n- `Negative` - Red, used for error/rejected states\n- `Information` - Blue, used for informational states\n   */\n  state = input<typeof _AvatarBadge.prototype.state | undefined>(\"None\"); // className is now passed\n\n\n\n\n\n  public elementRef: ElementRef<_AvatarBadge> = inject(ElementRef);\n  public injector = inject(Injector);\n\n  /**\n   * Content density observer is injected to activate automatic CSS class and\n   * UI5 attribute application. The observer self-initializes, no explicit subscribe() needed.\n   * @private\n   */\n  private readonly _contentDensityObserver = inject(ContentDensityObserver);\n\n  get element(): _AvatarBadge {\n    return this.elementRef.nativeElement;\n  }\n\n  ngAfterViewInit(): void {\n    const wcElement = this.element;\n    \n    const inputsToSync = [\n      'icon',\n      'state',\n    ];\n    \n    // Synchronize inputs (properties)\n    for (const inputName of inputsToSync) {\n      // Find the corresponding camelCase signal property on the Angular component\n      const signalName = inputName.replace(/-./g, (x: string) => x[1].toUpperCase());\n\n      // Use the Injector to run the effect in the correct context\n      if (this[signalName] && typeof this[signalName] === 'function') {\n        runInInjectionContext(this.injector, () => {\n          effect(() => {\n            // Read the signal value\n            const value = this[signalName]();\n            if (wcElement) {\n              // Write the value to the Web Component's property\n              wcElement[inputName] = value;\n            }\n          });\n        });\n      }\n    }\n  \n    \n    \n\n  }\n}\n\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/fundamental-ngx-ui5-webcomponents-avatar-group.mjs

@@ -1,13 +1,10 @@
 import * as i0 from '@angular/core';
 import { input, output, inject, ElementRef, Injector, runInInjectionContext, effect, ChangeDetectionStrategy, Component } from '@angular/core';
 import '@ui5/webcomponents/dist/AvatarGroup.js';
+import { ContentDensityObserver, contentDensityObserverProviders, ContentDensityMode } from '@fundamental-ngx/core/content-density';
 
 class AvatarGroup {
     constructor() {
-        /**
-         * Defines the mode of the `AvatarGroup`.
-         */
-        this.type = input("Group", ...(ngDevMode ? [{ debugName: "type" }] : []));
         /**
          * Defines the additional accessibility attributes that will be applied to the component.
       The following field is supported:
@@ -25,7 +22,11 @@ class AvatarGroup {
          * Receives id(s) of the elements that describe the AvatarGroup.
       When provided, this will be used as aria-labelledby instead of aria-label.
          */
-        this.accessibleNameRef = input(...(ngDevMode ? [undefined, { debugName: "accessibleNameRef" }] : [])); // className is now passed
+        this.accessibleNameRef = input(...(ngDevMode ? [undefined, { debugName: "accessibleNameRef" }] : []));
+        /**
+         * Defines the mode of the `AvatarGroup`.
+         */
+        this.type = input("Group", ...(ngDevMode ? [{ debugName: "type" }] : [])); // className is now passed
         /**
          * Fired when the component is activated either with a
       click/tap or by using the Enter or Space key.
@@ -78,20 +79,26 @@ class AvatarGroup {
         ];
         this.elementRef = inject(ElementRef);
         this.injector = inject(Injector);
+        /**
+         * Content density observer is injected to activate automatic CSS class and
+         * UI5 attribute application. The observer self-initializes, no explicit subscribe() needed.
+         * @private
+         */
+        this._contentDensityObserver = inject(ContentDensityObserver);
     }
     /**
-     * Returns an array containing the `ui5-avatar` instances that are currently not displayed due to lack of space.
+     * Returns an array containing the `AvatarColorScheme` values that correspond to the avatars in the component.
      * @readonly This property is managed by the web component.
      */
-    get hiddenItems() {
-        return this.element?.hiddenItems ?? [];
+    get colorScheme() {
+        return this.element?.colorScheme ?? [];
     }
     /**
-     * Returns an array containing the `AvatarColorScheme` values that correspond to the avatars in the component.
+     * Returns an array containing the `ui5-avatar` instances that are currently not displayed due to lack of space.
      * @readonly This property is managed by the web component.
      */
-    get colorScheme() {
-        return this.element?.colorScheme ?? [];
+    get hiddenItems() {
+        return this.element?.hiddenItems ?? [];
     }
     get element() {
         return this.elementRef.nativeElement;
@@ -99,10 +106,10 @@ class AvatarGroup {
     ngAfterViewInit() {
         const wcElement = this.element;
         const inputsToSync = [
-            'type',
             'accessibilityAttributes',
             'accessibleName',
             'accessibleNameRef',
+            'type',
         ];
         // Synchronize inputs (properties)
         for (const inputName of inputsToSync) {
@@ -140,7 +147,11 @@ class AvatarGroup {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: AvatarGroup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: AvatarGroup, isStandalone: true, selector: "ui5-avatar-group, [ui5-avatar-group]", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, accessibilityAttributes: { classPropertyName: "accessibilityAttributes", publicName: "accessibilityAttributes", isSignal: true, isRequired: false, transformFunction: null }, accessibleName: { classPropertyName: "accessibleName", publicName: "accessibleName", isSignal: true, isRequired: false, transformFunction: null }, accessibleNameRef: { classPropertyName: "accessibleNameRef", publicName: "accessibleNameRef", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ui5Click: "ui5Click", ui5Overflow: "ui5Overflow" }, exportAs: ["ui5AvatarGroup"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: AvatarGroup, isStandalone: true, selector: "ui5-avatar-group, [ui5-avatar-group]", inputs: { accessibilityAttributes: { classPropertyName: "accessibilityAttributes", publicName: "accessibilityAttributes", isSignal: true, isRequired: false, transformFunction: null }, accessibleName: { classPropertyName: "accessibleName", publicName: "accessibleName", isSignal: true, isRequired: false, transformFunction: null }, accessibleNameRef: { classPropertyName: "accessibleNameRef", publicName: "accessibleNameRef", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ui5Click: "ui5Click", ui5Overflow: "ui5Overflow" }, providers: [
+            contentDensityObserverProviders({
+                supportedContentDensity: [ContentDensityMode.COMPACT, ContentDensityMode.COZY]
+            })
+        ], exportAs: ["ui5AvatarGroup"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: AvatarGroup, decorators: [{
             type: Component,
@@ -149,9 +160,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                     selector: 'ui5-avatar-group, [ui5-avatar-group]',
                     template: '<ng-content></ng-content>',
                     exportAs: 'ui5AvatarGroup',
+                    providers: [
+                        contentDensityObserverProviders({
+                            supportedContentDensity: [ContentDensityMode.COMPACT, ContentDensityMode.COZY]
+                        })
+                    ],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], accessibilityAttributes: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessibilityAttributes", required: false }] }], accessibleName: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessibleName", required: false }] }], accessibleNameRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessibleNameRef", required: false }] }], ui5Click: [{ type: i0.Output, args: ["ui5Click"] }], ui5Overflow: [{ type: i0.Output, args: ["ui5Overflow"] }] } });
+        }], propDecorators: { accessibilityAttributes: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessibilityAttributes", required: false }] }], accessibleName: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessibleName", required: false }] }], accessibleNameRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessibleNameRef", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], ui5Click: [{ type: i0.Output, args: ["ui5Click"] }], ui5Overflow: [{ type: i0.Output, args: ["ui5Overflow"] }] } });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/fundamental-ngx-ui5-webcomponents-avatar-group.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"fundamental-ngx-ui5-webcomponents-avatar-group.mjs","sources":["../../../../libs/ui5-webcomponents/avatar-group/index.ts","../../../../libs/ui5-webcomponents/avatar-group/fundamental-ngx-ui5-webcomponents-avatar-group.ts"],"sourcesContent":["\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  input,\n  output,\n  AfterViewInit,\n  effect,\n  runInInjectionContext,\n  inject,\n  Injector,\n  booleanAttribute,\n  computed,\n  signal\n} from '@angular/core';\nimport '@ui5/webcomponents/dist/AvatarGroup.js';\nimport { default as _AvatarGroup } from '@ui5/webcomponents/dist/AvatarGroup.js';\nimport { UI5CustomEvent } from '@ui5/webcomponents-base';\n\nimport { default as AvatarGroupType } from '@ui5/webcomponents/dist/types/AvatarGroupType.js';\nimport { AvatarGroupAccessibilityAttributes } from '@ui5/webcomponents/dist/AvatarGroup.js';\nimport { IAvatarGroupItem } from '@ui5/webcomponents/dist/AvatarGroup.js';\nimport { default as AvatarColorScheme } from '@ui5/webcomponents/dist/types/AvatarColorScheme.js';\n\n@Component({\n  standalone: true,\n  selector: 'ui5-avatar-group, [ui5-avatar-group]',\n  template: '<ng-content></ng-content>',\n  exportAs: 'ui5AvatarGroup',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class AvatarGroup implements AfterViewInit {\n\n  /**\n   * Defines the mode of the `AvatarGroup`.\n   */\n  type = input<typeof _AvatarGroup.prototype.type | undefined>(\"Group\");\n\n  /**\n   * Defines the additional accessibility attributes that will be applied to the component.\nThe following field is supported:\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n   */\n  accessibilityAttributes = input<typeof _AvatarGroup.prototype.accessibilityAttributes | undefined>({});\n\n  /**\n   * Defines the accessible name of the AvatarGroup.\nWhen provided, this will override the default aria-label text.\n   */\n  accessibleName = input<typeof _AvatarGroup.prototype.accessibleName | undefined>();\n\n  /**\n   * Receives id(s) of the elements that describe the AvatarGroup.\nWhen provided, this will be used as aria-labelledby instead of aria-label.\n   */\n  accessibleNameRef = input<typeof _AvatarGroup.prototype.accessibleNameRef | undefined>(); // className is now passed\n\n  /**\n   * Returns an array containing the `ui5-avatar` instances that are currently not displayed due to lack of space.\n   * @readonly This property is managed by the web component.\n   */\n  get hiddenItems(): Array<IAvatarGroupItem> {\n    return this.element?.hiddenItems ?? [];\n  }\n\n  /**\n   * Returns an array containing the `AvatarColorScheme` values that correspond to the avatars in the component.\n   * @readonly This property is managed by the web component.\n   */\n  get colorScheme(): Array<AvatarColorScheme> {\n    return this.element?.colorScheme ?? [];\n  }\n\n\n  /**\n   * Fired when the component is activated either with a\nclick/tap or by using the Enter or Space key.\n   */\n  ui5Click = output<UI5CustomEvent<_AvatarGroup, 'click'>>();\n\n  /**\n   * Fired when the count of visible `ui5-avatar` elements in the\ncomponent has changed\n   */\n  ui5Overflow = output<UI5CustomEvent<_AvatarGroup, 'overflow'>>();\n\n  /**\n   * Available slots for content projection in this component.\n   *\n   * Slots allow you to insert custom content into predefined areas of the web component.\n   * Use the `slot` attribute on child elements to target specific slots.\n   *\n   * - **(default)**: Defines the items of the component. Use the `ui5-avatar` component as an item.\n\n**Note:** The UX guidelines recommends using avatars with \"Circle\" shape.\n\nMoreover, if you use avatars with \"Square\" shape, there will be visual inconsistency\nas the built-in overflow action has \"Circle\" shape.\n   * - **overflowButton**: Defines the overflow button of the component.\n\n**Note:** We recommend using the `ui5-button` component.\n\n**Note:** If this slot is not used, the component will display the built-in overflow button.\n   *\n   * @example\n   * ```html\n   * <ui5-avatar-group>\n   *   <div slot=\"header\">Custom header content</div>\n   *   <p>Default slot content</p>\n   * </ui5-avatar-group>\n   * ```\n   *\n   * @readonly\n   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}\n   */\n  readonly slots = [\n      {\n          \"name\": \"default\",\n          \"description\": \"Defines the items of the component. Use the `ui5-avatar` component as an item.\\n\\n**Note:** The UX guidelines recommends using avatars with \\\"Circle\\\" shape.\\n\\nMoreover, if you use avatars with \\\"Square\\\" shape, there will be visual inconsistency\\nas the built-in overflow action has \\\"Circle\\\" shape.\"\n      },\n      {\n          \"name\": \"overflowButton\",\n          \"description\": \"Defines the overflow button of the component.\\n\\n**Note:** We recommend using the `ui5-button` component.\\n\\n**Note:** If this slot is not used, the component will display the built-in overflow button.\",\n          \"since\": \"1.0.0-rc.13\"\n      }\n  ];\n\n\n  public elementRef: ElementRef<_AvatarGroup> = inject(ElementRef);\n  public injector = inject(Injector);\n\n  get element(): _AvatarGroup {\n    return this.elementRef.nativeElement;\n  }\n\n  ngAfterViewInit(): void {\n    const wcElement = this.element;\n    \n    const inputsToSync = [\n      'type',\n      'accessibilityAttributes',\n      'accessibleName',\n      'accessibleNameRef',\n    ];\n    \n    // Synchronize inputs (properties)\n    for (const inputName of inputsToSync) {\n      // Find the corresponding camelCase signal property on the Angular component\n      const signalName = inputName.replace(/-./g, (x: string) => x[1].toUpperCase());\n\n      // Use the Injector to run the effect in the correct context\n      if (this[signalName] && typeof this[signalName] === 'function') {\n        runInInjectionContext(this.injector, () => {\n          effect(() => {\n            // Read the signal value\n            const value = this[signalName]();\n            if (wcElement) {\n              // Write the value to the Web Component's property\n              wcElement[inputName] = value;\n            }\n          });\n        });\n      }\n    }\n  \n    \n    const outputsToSync = [\n      'ui5Click',\n      'ui5Overflow',\n    ];\n    \n    // Synchronize outputs (events)\n    for (const outputName of outputsToSync) {\n      // Map Angular output name to UI5 web component event name\n      const eventName = outputName.replace('ui5', '').replace(/([A-Z])/g, '-$1').toLowerCase().substring(1);\n      // Ensure the output property exists and has an emit function before adding listener\n      if (this[outputName] && typeof this[outputName].emit === 'function' && wcElement.addEventListener) {\n        // Cast the listener to the correct type to satisfy TypeScript\n        wcElement.addEventListener(eventName, (e) => {\n\n          this[outputName].emit(e as CustomEvent<any>);\n        });\n      }\n    }\n  \n\n  }\n}\n\n// Re-export types for convenience\nexport { AvatarGroupAccessibilityAttributes } from '@ui5/webcomponents/dist/AvatarGroup.js';\nexport { IAvatarGroupItem } from '@ui5/webcomponents/dist/AvatarGroup.js';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"fundamental-ngx-ui5-webcomponents-avatar-group.mjs","sources":["../../../../libs/ui5-webcomponents/avatar-group/index.ts","../../../../libs/ui5-webcomponents/avatar-group/fundamental-ngx-ui5-webcomponents-avatar-group.ts"],"sourcesContent":["\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  input,\n  output,\n  AfterViewInit,\n  effect,\n  runInInjectionContext,\n  inject,\n  Injector,\n  booleanAttribute,\n  computed,\n  signal\n} from '@angular/core';\nimport '@ui5/webcomponents/dist/AvatarGroup.js';\nimport { default as _AvatarGroup } from '@ui5/webcomponents/dist/AvatarGroup.js';\nimport { UI5CustomEvent } from '@ui5/webcomponents-base';\nimport {\n  ContentDensityObserver,\n  contentDensityObserverProviders,\n  ContentDensityMode\n} from '@fundamental-ngx/core/content-density';\n\nimport { AvatarGroupAccessibilityAttributes } from '@ui5/webcomponents/dist/AvatarGroup.js';\nimport { default as AvatarColorScheme } from '@ui5/webcomponents/dist/types/AvatarColorScheme.js';\nimport { IAvatarGroupItem } from '@ui5/webcomponents/dist/AvatarGroup.js';\nimport { default as AvatarGroupType } from '@ui5/webcomponents/dist/types/AvatarGroupType.js';\n\n@Component({\n  standalone: true,\n  selector: 'ui5-avatar-group, [ui5-avatar-group]',\n  template: '<ng-content></ng-content>',\n  exportAs: 'ui5AvatarGroup',\n  providers: [\n    contentDensityObserverProviders({\n      supportedContentDensity: [ContentDensityMode.COMPACT, ContentDensityMode.COZY]\n    })\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class AvatarGroup implements AfterViewInit {\n\n  /**\n   * Defines the additional accessibility attributes that will be applied to the component.\nThe following field is supported:\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n   */\n  accessibilityAttributes = input<typeof _AvatarGroup.prototype.accessibilityAttributes | undefined>({});\n\n  /**\n   * Defines the accessible name of the AvatarGroup.\nWhen provided, this will override the default aria-label text.\n   */\n  accessibleName = input<typeof _AvatarGroup.prototype.accessibleName | undefined>();\n\n  /**\n   * Receives id(s) of the elements that describe the AvatarGroup.\nWhen provided, this will be used as aria-labelledby instead of aria-label.\n   */\n  accessibleNameRef = input<typeof _AvatarGroup.prototype.accessibleNameRef | undefined>();\n\n  /**\n   * Defines the mode of the `AvatarGroup`.\n   */\n  type = input<typeof _AvatarGroup.prototype.type | undefined>(\"Group\"); // className is now passed\n\n  /**\n   * Returns an array containing the `AvatarColorScheme` values that correspond to the avatars in the component.\n   * @readonly This property is managed by the web component.\n   */\n  get colorScheme(): Array<AvatarColorScheme> {\n    return this.element?.colorScheme ?? [];\n  }\n\n  /**\n   * Returns an array containing the `ui5-avatar` instances that are currently not displayed due to lack of space.\n   * @readonly This property is managed by the web component.\n   */\n  get hiddenItems(): Array<IAvatarGroupItem> {\n    return this.element?.hiddenItems ?? [];\n  }\n\n\n  /**\n   * Fired when the component is activated either with a\nclick/tap or by using the Enter or Space key.\n   */\n  ui5Click = output<UI5CustomEvent<_AvatarGroup, 'click'>>();\n\n  /**\n   * Fired when the count of visible `ui5-avatar` elements in the\ncomponent has changed\n   */\n  ui5Overflow = output<UI5CustomEvent<_AvatarGroup, 'overflow'>>();\n\n  /**\n   * Available slots for content projection in this component.\n   *\n   * Slots allow you to insert custom content into predefined areas of the web component.\n   * Use the `slot` attribute on child elements to target specific slots.\n   *\n   * - **(default)**: Defines the items of the component. Use the `ui5-avatar` component as an item.\n\n**Note:** The UX guidelines recommends using avatars with \"Circle\" shape.\n\nMoreover, if you use avatars with \"Square\" shape, there will be visual inconsistency\nas the built-in overflow action has \"Circle\" shape.\n   * - **overflowButton**: Defines the overflow button of the component.\n\n**Note:** We recommend using the `ui5-button` component.\n\n**Note:** If this slot is not used, the component will display the built-in overflow button.\n   *\n   * @example\n   * ```html\n   * <ui5-avatar-group>\n   *   <div slot=\"header\">Custom header content</div>\n   *   <p>Default slot content</p>\n   * </ui5-avatar-group>\n   * ```\n   *\n   * @readonly\n   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}\n   */\n  readonly slots = [\n      {\n          \"name\": \"default\",\n          \"description\": \"Defines the items of the component. Use the `ui5-avatar` component as an item.\\n\\n**Note:** The UX guidelines recommends using avatars with \\\"Circle\\\" shape.\\n\\nMoreover, if you use avatars with \\\"Square\\\" shape, there will be visual inconsistency\\nas the built-in overflow action has \\\"Circle\\\" shape.\"\n      },\n      {\n          \"name\": \"overflowButton\",\n          \"description\": \"Defines the overflow button of the component.\\n\\n**Note:** We recommend using the `ui5-button` component.\\n\\n**Note:** If this slot is not used, the component will display the built-in overflow button.\",\n          \"since\": \"1.0.0-rc.13\"\n      }\n  ];\n\n\n  public elementRef: ElementRef<_AvatarGroup> = inject(ElementRef);\n  public injector = inject(Injector);\n\n  /**\n   * Content density observer is injected to activate automatic CSS class and\n   * UI5 attribute application. The observer self-initializes, no explicit subscribe() needed.\n   * @private\n   */\n  private readonly _contentDensityObserver = inject(ContentDensityObserver);\n\n  get element(): _AvatarGroup {\n    return this.elementRef.nativeElement;\n  }\n\n  ngAfterViewInit(): void {\n    const wcElement = this.element;\n    \n    const inputsToSync = [\n      'accessibilityAttributes',\n      'accessibleName',\n      'accessibleNameRef',\n      'type',\n    ];\n    \n    // Synchronize inputs (properties)\n    for (const inputName of inputsToSync) {\n      // Find the corresponding camelCase signal property on the Angular component\n      const signalName = inputName.replace(/-./g, (x: string) => x[1].toUpperCase());\n\n      // Use the Injector to run the effect in the correct context\n      if (this[signalName] && typeof this[signalName] === 'function') {\n        runInInjectionContext(this.injector, () => {\n          effect(() => {\n            // Read the signal value\n            const value = this[signalName]();\n            if (wcElement) {\n              // Write the value to the Web Component's property\n              wcElement[inputName] = value;\n            }\n          });\n        });\n      }\n    }\n  \n    \n    const outputsToSync = [\n      'ui5Click',\n      'ui5Overflow',\n    ];\n    \n    // Synchronize outputs (events)\n    for (const outputName of outputsToSync) {\n      // Map Angular output name to UI5 web component event name\n      const eventName = outputName.replace('ui5', '').replace(/([A-Z])/g, '-$1').toLowerCase().substring(1);\n      // Ensure the output property exists and has an emit function before adding listener\n      if (this[outputName] && typeof this[outputName].emit === 'function' && wcElement.addEventListener) {\n        // Cast the listener to the correct type to satisfy TypeScript\n        wcElement.addEventListener(eventName, (e) => {\n\n          this[outputName].emit(e as CustomEvent<any>);\n        });\n      }\n    }\n  \n\n  }\n}\n\n// Re-export types for convenience\nexport { AvatarGroupAccessibilityAttributes } from '@ui5/webcomponents/dist/AvatarGroup.js';\nexport { IAvatarGroupItem } from '@ui5/webcomponents/dist/AvatarGroup.js';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/fundamental-ngx-ui5-webcomponents-avatar.mjs

@@ -1,9 +1,28 @@
 import * as i0 from '@angular/core';
 import { input, booleanAttribute, output, inject, ElementRef, Injector, runInInjectionContext, effect, ChangeDetectionStrategy, Component } from '@angular/core';
 import '@ui5/webcomponents/dist/Avatar.js';
+import { ContentDensityObserver, contentDensityObserverProviders, ContentDensityMode } from '@fundamental-ngx/core/content-density';
 
 class Avatar {
     constructor() {
+        /**
+         * Defines the additional accessibility attributes that will be applied to the component.
+      The following field is supported:
+      
+      - **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.
+      Accepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.
+         */
+        this.accessibilityAttributes = input({}, ...(ngDevMode ? [{ debugName: "accessibilityAttributes" }] : []));
+        /**
+         * Defines the text alternative of the component.
+      If not provided a default text alternative will be set, if present.
+         */
+        this.accessibleName = input(...(ngDevMode ? [undefined, { debugName: "accessibleName" }] : []));
+        /**
+         * Defines the background color of the desired image.
+      If `colorScheme` is set to `Auto`, the avatar will be displayed with the `Accent6` color.
+         */
+        this.colorScheme = input("Auto", ...(ngDevMode ? [{ debugName: "colorScheme" }] : []));
         /**
          * Defines whether the component is disabled.
       A disabled component can't be pressed or
@@ -11,12 +30,23 @@ class Avatar {
          */
         this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
         /**
-         * Defines if the avatar is interactive (focusable and pressable).
+         * Defines the name of the fallback icon, which should be displayed in the following cases:
       
-      **Note:** This property won't have effect if the `disabled`
-      property is set to `true`.
+          - If the initials are not valid (more than 3 letters, unsupported languages or empty initials).
+          - If there are three initials and they do not fit in the shape (e.g. WWW for some of the sizes).
+          - If the image src is wrong.
+      
+      **Note:** If not set, a default fallback icon "employee" is displayed.
+      
+      **Note:** You should import the desired icon first, then use its name as "fallback-icon".
+      
+      `import "@ui5/webcomponents-icons/dist/{icon_name}.js"`
+      
+      `<ui5-avatar fallback-icon="alert">`
+      
+      See all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).
          */
-        this.interactive = input(false, { ...(ngDevMode ? { debugName: "interactive" } : {}), transform: booleanAttribute });
+        this.fallbackIcon = input("employee", ...(ngDevMode ? [{ debugName: "fallbackIcon" }] : []));
         /**
          * Defines the name of the UI5 Icon, that will be displayed.
       
@@ -34,29 +64,33 @@ class Avatar {
          */
         this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
         /**
-         * Defines the name of the fallback icon, which should be displayed in the following cases:
-      
-          - If the initials are not valid (more than 3 letters, unsupported languages or empty initials).
-          - If there are three initials and they do not fit in the shape (e.g. WWW for some of the sizes).
-          - If the image src is wrong.
-      
-      **Note:** If not set, a default fallback icon "employee" is displayed.
-      
-      **Note:** You should import the desired icon first, then use its name as "fallback-icon".
+         * Defines the displayed initials.
       
-      `import "@ui5/webcomponents-icons/dist/{icon_name}.js"`
+      Up to three Latin letters can be displayed as initials.
+         */
+        this.initials = input(...(ngDevMode ? [undefined, { debugName: "initials" }] : []));
+        /**
+         * Defines if the avatar is interactive (focusable and pressable).
       
-      `<ui5-avatar fallback-icon="alert">`
+      **Note:** When set to `true`, this property takes precedence over the `mode` property,
+      and the avatar will be rendered as interactive (role="button", focusable) regardless of the `mode` value.
       
-      See all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).
+      **Note:** This property won't have effect if the `disabled`
+      property is set to `true`.
          */
-        this.fallbackIcon = input("employee", ...(ngDevMode ? [{ debugName: "fallbackIcon" }] : []));
+        this.interactive = input(false, { ...(ngDevMode ? { debugName: "interactive" } : {}), transform: booleanAttribute });
         /**
-         * Defines the displayed initials.
+         * Defines the mode of the component.
       
-      Up to three Latin letters can be displayed as initials.
+      **Note:**
+      - `Image` (default) - renders with role="img"
+      - `Decorative` - renders with role="presentation" and aria-hidden="true", making it purely decorative
+      - `Interactive` - renders with role="button", focusable (tabindex="0"), and supports keyboard interaction
+      
+      **Note:** This property is ignored when the `interactive` property is set to `true`.
+      In that case, the avatar will always be rendered as interactive.
          */
-        this.initials = input(...(ngDevMode ? [undefined, { debugName: "initials" }] : []));
+        this.mode = input("Image", ...(ngDevMode ? [{ debugName: "mode" }] : []));
         /**
          * Defines the shape of the component.
          */
@@ -64,25 +98,7 @@ class Avatar {
         /**
          * Defines predefined size of the component.
          */
-        this.size = input("S", ...(ngDevMode ? [{ debugName: "size" }] : []));
-        /**
-         * Defines the background color of the desired image.
-      If `colorScheme` is set to `Auto`, the avatar will be displayed with the `Accent6` color.
-         */
-        this.colorScheme = input("Auto", ...(ngDevMode ? [{ debugName: "colorScheme" }] : []));
-        /**
-         * Defines the text alternative of the component.
-      If not provided a default text alternative will be set, if present.
-         */
-        this.accessibleName = input(...(ngDevMode ? [undefined, { debugName: "accessibleName" }] : []));
-        /**
-         * Defines the additional accessibility attributes that will be applied to the component.
-      The following field is supported:
-      
-      - **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.
-      Accepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.
-         */
-        this.accessibilityAttributes = input({}, ...(ngDevMode ? [{ debugName: "accessibilityAttributes" }] : [])); // className is now passed
+        this.size = input("S", ...(ngDevMode ? [{ debugName: "size" }] : [])); // className is now passed
         /**
          * Fired on mouseup, space and enter if avatar is interactive
       
@@ -96,16 +112,20 @@ class Avatar {
          * Slots allow you to insert custom content into predefined areas of the web component.
          * Use the `slot` attribute on child elements to target specific slots.
          *
+         * - **badge**: Defines the optional badge that will be used for visual affordance.
+      
+      **Recommendation:** While badges are supported on all avatars, it is recommended
+      to use them with interactive avatars (via `mode="Interactive"` or `interactive` attribute)
+      to provide better user experience and accessibility.
+      
+      **Note:** While the slot allows for custom badges, to achieve
+      the Fiori design, use the `ui5-avatar-badge` component.
          * - **(default)**: Receives the desired `<img>` tag
       
       **Note:** If you experience flickering of the provided image, you can hide the component until it is defined with the following CSS:<br/>
       `ui5-avatar:not(:defined) {`<br/>
       &nbsp;&nbsp;&nbsp;&nbsp;`visibility: hidden;`<br/>
       `}`
-         * - **badge**: Defines the optional badge that will be used for visual affordance.
-      
-      **Note:** While the slot allows for custom badges, to achieve
-      the Fiori design, use the `ui5-avatar-badge` component.
          *
          * @example
          * ```html
@@ -119,19 +139,25 @@ class Avatar {
          * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
          */
         this.slots = [
+            {
+                "name": "badge",
+                "description": "Defines the optional badge that will be used for visual affordance.\n\n**Recommendation:** While badges are supported on all avatars, it is recommended\nto use them with interactive avatars (via `mode=\"Interactive\"` or `interactive` attribute)\nto provide better user experience and accessibility.\n\n**Note:** While the slot allows for custom badges, to achieve\nthe Fiori design, use the `ui5-avatar-badge` component.",
+                "since": "1.7.0"
+            },
             {
                 "name": "default",
                 "description": "Receives the desired `<img>` tag\n\n**Note:** If you experience flickering of the provided image, you can hide the component until it is defined with the following CSS:<br/>\n`ui5-avatar:not(:defined) {`<br/>\n&nbsp;&nbsp;&nbsp;&nbsp;`visibility: hidden;`<br/>\n`}`",
                 "since": "1.0.0-rc.15"
-            },
-            {
-                "name": "badge",
-                "description": "Defines the optional badge that will be used for visual affordance.\n\n**Note:** While the slot allows for custom badges, to achieve\nthe Fiori design, use the `ui5-avatar-badge` component.",
-                "since": "1.7.0"
             }
         ];
         this.elementRef = inject(ElementRef);
         this.injector = inject(Injector);
+        /**
+         * Content density observer is injected to activate automatic CSS class and
+         * UI5 attribute application. The observer self-initializes, no explicit subscribe() needed.
+         * @private
+         */
+        this._contentDensityObserver = inject(ContentDensityObserver);
     }
     get element() {
         return this.elementRef.nativeElement;
@@ -139,16 +165,17 @@ class Avatar {
     ngAfterViewInit() {
         const wcElement = this.element;
         const inputsToSync = [
+            'accessibilityAttributes',
+            'accessibleName',
+            'colorScheme',
             'disabled',
-            'interactive',
-            'icon',
             'fallbackIcon',
+            'icon',
             'initials',
+            'interactive',
+            'mode',
             'shape',
             'size',
-            'colorScheme',
-            'accessibleName',
-            'accessibilityAttributes',
         ];
         // Synchronize inputs (properties)
         for (const inputName of inputsToSync) {
@@ -185,7 +212,11 @@ class Avatar {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: Avatar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: Avatar, isStandalone: true, selector: "ui5-avatar, [ui5-avatar]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, fallbackIcon: { classPropertyName: "fallbackIcon", publicName: "fallbackIcon", isSignal: true, isRequired: false, transformFunction: null }, initials: { classPropertyName: "initials", publicName: "initials", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, colorScheme: { classPropertyName: "colorScheme", publicName: "colorScheme", isSignal: true, isRequired: false, transformFunction: null }, accessibleName: { classPropertyName: "accessibleName", publicName: "accessibleName", isSignal: true, isRequired: false, transformFunction: null }, accessibilityAttributes: { classPropertyName: "accessibilityAttributes", publicName: "accessibilityAttributes", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ui5Click: "ui5Click" }, exportAs: ["ui5Avatar"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: Avatar, isStandalone: true, selector: "ui5-avatar, [ui5-avatar]", inputs: { accessibilityAttributes: { classPropertyName: "accessibilityAttributes", publicName: "accessibilityAttributes", isSignal: true, isRequired: false, transformFunction: null }, accessibleName: { classPropertyName: "accessibleName", publicName: "accessibleName", isSignal: true, isRequired: false, transformFunction: null }, colorScheme: { classPropertyName: "colorScheme", publicName: "colorScheme", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, fallbackIcon: { classPropertyName: "fallbackIcon", publicName: "fallbackIcon", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, initials: { classPropertyName: "initials", publicName: "initials", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ui5Click: "ui5Click" }, providers: [
+            contentDensityObserverProviders({
+                supportedContentDensity: [ContentDensityMode.COMPACT, ContentDensityMode.COZY]
+            })
+        ], exportAs: ["ui5Avatar"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: Avatar, decorators: [{
             type: Component,
@@ -194,9 +225,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                     selector: 'ui5-avatar, [ui5-avatar]',
                     template: '<ng-content></ng-content>',
                     exportAs: 'ui5Avatar',
+                    providers: [
+                        contentDensityObserverProviders({
+                            supportedContentDensity: [ContentDensityMode.COMPACT, ContentDensityMode.COZY]
+                        })
+                    ],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], fallbackIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "fallbackIcon", required: false }] }], initials: [{ type: i0.Input, args: [{ isSignal: true, alias: "initials", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], colorScheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorScheme", required: false }] }], accessibleName: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessibleName", required: false }] }], accessibilityAttributes: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessibilityAttributes", required: false }] }], ui5Click: [{ type: i0.Output, args: ["ui5Click"] }] } });
+        }], propDecorators: { accessibilityAttributes: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessibilityAttributes", required: false }] }], accessibleName: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessibleName", required: false }] }], colorScheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorScheme", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], fallbackIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "fallbackIcon", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], initials: [{ type: i0.Input, args: [{ isSignal: true, alias: "initials", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], ui5Click: [{ type: i0.Output, args: ["ui5Click"] }] } });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/fundamental-ngx-ui5-webcomponents-avatar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"fundamental-ngx-ui5-webcomponents-avatar.mjs","sources":["../../../../libs/ui5-webcomponents/avatar/index.ts","../../../../libs/ui5-webcomponents/avatar/fundamental-ngx-ui5-webcomponents-avatar.ts"],"sourcesContent":["\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  input,\n  output,\n  AfterViewInit,\n  effect,\n  runInInjectionContext,\n  inject,\n  Injector,\n  booleanAttribute,\n  computed,\n  signal\n} from '@angular/core';\nimport '@ui5/webcomponents/dist/Avatar.js';\nimport { default as _Avatar } from '@ui5/webcomponents/dist/Avatar.js';\nimport { UI5CustomEvent } from '@ui5/webcomponents-base';\n\nimport { default as AvatarShape } from '@ui5/webcomponents/dist/types/AvatarShape.js';\nimport { default as AvatarSize } from '@ui5/webcomponents/dist/types/AvatarSize.js';\nimport { default as AvatarColorScheme } from '@ui5/webcomponents/dist/types/AvatarColorScheme.js';\nimport { AvatarAccessibilityAttributes } from '@ui5/webcomponents/dist/Avatar.js';\n\n@Component({\n  standalone: true,\n  selector: 'ui5-avatar, [ui5-avatar]',\n  template: '<ng-content></ng-content>',\n  exportAs: 'ui5Avatar',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class Avatar implements AfterViewInit {\n\n  /**\n   * Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.\n   */\n  disabled = input(false, { transform: booleanAttribute });\n\n  /**\n   * Defines if the avatar is interactive (focusable and pressable).\n\n**Note:** This property won't have effect if the `disabled`\nproperty is set to `true`.\n   */\n  interactive = input(false, { transform: booleanAttribute });\n\n  /**\n   * Defines the name of the UI5 Icon, that will be displayed.\n\n**Note:** If `image` slot is provided, the property will be ignored.\n\n**Note:** You should import the desired icon first, then use its name as \"icon\".\n\n`import \"@ui5/webcomponents-icons/dist/{icon_name}.js\"`\n\n`<ui5-avatar icon=\"employee\">`\n\n**Note:** If no icon or an empty one is provided, by default the \"employee\" icon should be displayed.\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).\n   */\n  icon = input<typeof _Avatar.prototype.icon | undefined>();\n\n  /**\n   * Defines the name of the fallback icon, which should be displayed in the following cases:\n\n\t- If the initials are not valid (more than 3 letters, unsupported languages or empty initials).\n\t- If there are three initials and they do not fit in the shape (e.g. WWW for some of the sizes).\n\t- If the image src is wrong.\n\n**Note:** If not set, a default fallback icon \"employee\" is displayed.\n\n**Note:** You should import the desired icon first, then use its name as \"fallback-icon\".\n\n`import \"@ui5/webcomponents-icons/dist/{icon_name}.js\"`\n\n`<ui5-avatar fallback-icon=\"alert\">`\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).\n   */\n  fallbackIcon = input<typeof _Avatar.prototype.fallbackIcon | undefined>(\"employee\");\n\n  /**\n   * Defines the displayed initials.\n\nUp to three Latin letters can be displayed as initials.\n   */\n  initials = input<typeof _Avatar.prototype.initials | undefined>();\n\n  /**\n   * Defines the shape of the component.\n   */\n  shape = input<typeof _Avatar.prototype.shape | undefined>(\"Circle\");\n\n  /**\n   * Defines predefined size of the component.\n   */\n  size = input<typeof _Avatar.prototype.size | undefined>(\"S\");\n\n  /**\n   * Defines the background color of the desired image.\nIf `colorScheme` is set to `Auto`, the avatar will be displayed with the `Accent6` color.\n   */\n  colorScheme = input<typeof _Avatar.prototype.colorScheme | undefined>(\"Auto\");\n\n  /**\n   * Defines the text alternative of the component.\nIf not provided a default text alternative will be set, if present.\n   */\n  accessibleName = input<typeof _Avatar.prototype.accessibleName | undefined>();\n\n  /**\n   * Defines the additional accessibility attributes that will be applied to the component.\nThe following field is supported:\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n   */\n  accessibilityAttributes = input<typeof _Avatar.prototype.accessibilityAttributes | undefined>({}); // className is now passed\n\n\n\n  /**\n   * Fired on mouseup, space and enter if avatar is interactive\n\n**Note:** The event will not be fired if the `disabled`\nproperty is set to `true`.\n   */\n  ui5Click = output<UI5CustomEvent<_Avatar, 'click'>>();\n\n  /**\n   * Available slots for content projection in this component.\n   *\n   * Slots allow you to insert custom content into predefined areas of the web component.\n   * Use the `slot` attribute on child elements to target specific slots.\n   *\n   * - **(default)**: Receives the desired `<img>` tag\n\n**Note:** If you experience flickering of the provided image, you can hide the component until it is defined with the following CSS:<br/>\n`ui5-avatar:not(:defined) {`<br/>\n&nbsp;&nbsp;&nbsp;&nbsp;`visibility: hidden;`<br/>\n`}`\n   * - **badge**: Defines the optional badge that will be used for visual affordance.\n\n**Note:** While the slot allows for custom badges, to achieve\nthe Fiori design, use the `ui5-avatar-badge` component.\n   *\n   * @example\n   * ```html\n   * <ui5-avatar>\n   *   <div slot=\"header\">Custom header content</div>\n   *   <p>Default slot content</p>\n   * </ui5-avatar>\n   * ```\n   *\n   * @readonly\n   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}\n   */\n  readonly slots = [\n      {\n          \"name\": \"default\",\n          \"description\": \"Receives the desired `<img>` tag\\n\\n**Note:** If you experience flickering of the provided image, you can hide the component until it is defined with the following CSS:<br/>\\n`ui5-avatar:not(:defined) {`<br/>\\n&nbsp;&nbsp;&nbsp;&nbsp;`visibility: hidden;`<br/>\\n`}`\",\n          \"since\": \"1.0.0-rc.15\"\n      },\n      {\n          \"name\": \"badge\",\n          \"description\": \"Defines the optional badge that will be used for visual affordance.\\n\\n**Note:** While the slot allows for custom badges, to achieve\\nthe Fiori design, use the `ui5-avatar-badge` component.\",\n          \"since\": \"1.7.0\"\n      }\n  ];\n\n\n  public elementRef: ElementRef<_Avatar> = inject(ElementRef);\n  public injector = inject(Injector);\n\n  get element(): _Avatar {\n    return this.elementRef.nativeElement;\n  }\n\n  ngAfterViewInit(): void {\n    const wcElement = this.element;\n    \n    const inputsToSync = [\n      'disabled',\n      'interactive',\n      'icon',\n      'fallbackIcon',\n      'initials',\n      'shape',\n      'size',\n      'colorScheme',\n      'accessibleName',\n      'accessibilityAttributes',\n    ];\n    \n    // Synchronize inputs (properties)\n    for (const inputName of inputsToSync) {\n      // Find the corresponding camelCase signal property on the Angular component\n      const signalName = inputName.replace(/-./g, (x: string) => x[1].toUpperCase());\n\n      // Use the Injector to run the effect in the correct context\n      if (this[signalName] && typeof this[signalName] === 'function') {\n        runInInjectionContext(this.injector, () => {\n          effect(() => {\n            // Read the signal value\n            const value = this[signalName]();\n            if (wcElement) {\n              // Write the value to the Web Component's property\n              wcElement[inputName] = value;\n            }\n          });\n        });\n      }\n    }\n  \n    \n    const outputsToSync = [\n      'ui5Click',\n    ];\n    \n    // Synchronize outputs (events)\n    for (const outputName of outputsToSync) {\n      // Map Angular output name to UI5 web component event name\n      const eventName = outputName.replace('ui5', '').replace(/([A-Z])/g, '-$1').toLowerCase().substring(1);\n      // Ensure the output property exists and has an emit function before adding listener\n      if (this[outputName] && typeof this[outputName].emit === 'function' && wcElement.addEventListener) {\n        // Cast the listener to the correct type to satisfy TypeScript\n        wcElement.addEventListener(eventName, (e) => {\n\n          this[outputName].emit(e as CustomEvent<any>);\n        });\n      }\n    }\n  \n\n  }\n}\n\n// Re-export types for convenience\nexport { AvatarAccessibilityAttributes } from '@ui5/webcomponents/dist/Avatar.js';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"fundamental-ngx-ui5-webcomponents-avatar.mjs","sources":["../../../../libs/ui5-webcomponents/avatar/index.ts","../../../../libs/ui5-webcomponents/avatar/fundamental-ngx-ui5-webcomponents-avatar.ts"],"sourcesContent":["\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  input,\n  output,\n  AfterViewInit,\n  effect,\n  runInInjectionContext,\n  inject,\n  Injector,\n  booleanAttribute,\n  computed,\n  signal\n} from '@angular/core';\nimport '@ui5/webcomponents/dist/Avatar.js';\nimport { default as _Avatar } from '@ui5/webcomponents/dist/Avatar.js';\nimport { UI5CustomEvent } from '@ui5/webcomponents-base';\nimport {\n  ContentDensityObserver,\n  contentDensityObserverProviders,\n  ContentDensityMode\n} from '@fundamental-ngx/core/content-density';\n\nimport { AvatarAccessibilityAttributes } from '@ui5/webcomponents/dist/Avatar.js';\nimport { default as AvatarColorScheme } from '@ui5/webcomponents/dist/types/AvatarColorScheme.js';\nimport { default as AvatarMode } from '@ui5/webcomponents/dist/types/AvatarMode.js';\nimport { default as AvatarShape } from '@ui5/webcomponents/dist/types/AvatarShape.js';\nimport { default as AvatarSize } from '@ui5/webcomponents/dist/types/AvatarSize.js';\n\n@Component({\n  standalone: true,\n  selector: 'ui5-avatar, [ui5-avatar]',\n  template: '<ng-content></ng-content>',\n  exportAs: 'ui5Avatar',\n  providers: [\n    contentDensityObserverProviders({\n      supportedContentDensity: [ContentDensityMode.COMPACT, ContentDensityMode.COZY]\n    })\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class Avatar implements AfterViewInit {\n\n  /**\n   * Defines the additional accessibility attributes that will be applied to the component.\nThe following field is supported:\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n   */\n  accessibilityAttributes = input<typeof _Avatar.prototype.accessibilityAttributes | undefined>({});\n\n  /**\n   * Defines the text alternative of the component.\nIf not provided a default text alternative will be set, if present.\n   */\n  accessibleName = input<typeof _Avatar.prototype.accessibleName | undefined>();\n\n  /**\n   * Defines the background color of the desired image.\nIf `colorScheme` is set to `Auto`, the avatar will be displayed with the `Accent6` color.\n   */\n  colorScheme = input<typeof _Avatar.prototype.colorScheme | undefined>(\"Auto\");\n\n  /**\n   * Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.\n   */\n  disabled = input(false, { transform: booleanAttribute });\n\n  /**\n   * Defines the name of the fallback icon, which should be displayed in the following cases:\n\n\t- If the initials are not valid (more than 3 letters, unsupported languages or empty initials).\n\t- If there are three initials and they do not fit in the shape (e.g. WWW for some of the sizes).\n\t- If the image src is wrong.\n\n**Note:** If not set, a default fallback icon \"employee\" is displayed.\n\n**Note:** You should import the desired icon first, then use its name as \"fallback-icon\".\n\n`import \"@ui5/webcomponents-icons/dist/{icon_name}.js\"`\n\n`<ui5-avatar fallback-icon=\"alert\">`\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).\n   */\n  fallbackIcon = input<typeof _Avatar.prototype.fallbackIcon | undefined>(\"employee\");\n\n  /**\n   * Defines the name of the UI5 Icon, that will be displayed.\n\n**Note:** If `image` slot is provided, the property will be ignored.\n\n**Note:** You should import the desired icon first, then use its name as \"icon\".\n\n`import \"@ui5/webcomponents-icons/dist/{icon_name}.js\"`\n\n`<ui5-avatar icon=\"employee\">`\n\n**Note:** If no icon or an empty one is provided, by default the \"employee\" icon should be displayed.\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).\n   */\n  icon = input<typeof _Avatar.prototype.icon | undefined>();\n\n  /**\n   * Defines the displayed initials.\n\nUp to three Latin letters can be displayed as initials.\n   */\n  initials = input<typeof _Avatar.prototype.initials | undefined>();\n\n  /**\n   * Defines if the avatar is interactive (focusable and pressable).\n\n**Note:** When set to `true`, this property takes precedence over the `mode` property,\nand the avatar will be rendered as interactive (role=\"button\", focusable) regardless of the `mode` value.\n\n**Note:** This property won't have effect if the `disabled`\nproperty is set to `true`.\n   */\n  interactive = input(false, { transform: booleanAttribute });\n\n  /**\n   * Defines the mode of the component.\n\n**Note:**\n- `Image` (default) - renders with role=\"img\"\n- `Decorative` - renders with role=\"presentation\" and aria-hidden=\"true\", making it purely decorative\n- `Interactive` - renders with role=\"button\", focusable (tabindex=\"0\"), and supports keyboard interaction\n\n**Note:** This property is ignored when the `interactive` property is set to `true`.\nIn that case, the avatar will always be rendered as interactive.\n   */\n  mode = input<typeof _Avatar.prototype.mode | undefined>(\"Image\");\n\n  /**\n   * Defines the shape of the component.\n   */\n  shape = input<typeof _Avatar.prototype.shape | undefined>(\"Circle\");\n\n  /**\n   * Defines predefined size of the component.\n   */\n  size = input<typeof _Avatar.prototype.size | undefined>(\"S\"); // className is now passed\n\n\n\n  /**\n   * Fired on mouseup, space and enter if avatar is interactive\n\n**Note:** The event will not be fired if the `disabled`\nproperty is set to `true`.\n   */\n  ui5Click = output<UI5CustomEvent<_Avatar, 'click'>>();\n\n  /**\n   * Available slots for content projection in this component.\n   *\n   * Slots allow you to insert custom content into predefined areas of the web component.\n   * Use the `slot` attribute on child elements to target specific slots.\n   *\n   * - **badge**: Defines the optional badge that will be used for visual affordance.\n\n**Recommendation:** While badges are supported on all avatars, it is recommended\nto use them with interactive avatars (via `mode=\"Interactive\"` or `interactive` attribute)\nto provide better user experience and accessibility.\n\n**Note:** While the slot allows for custom badges, to achieve\nthe Fiori design, use the `ui5-avatar-badge` component.\n   * - **(default)**: Receives the desired `<img>` tag\n\n**Note:** If you experience flickering of the provided image, you can hide the component until it is defined with the following CSS:<br/>\n`ui5-avatar:not(:defined) {`<br/>\n&nbsp;&nbsp;&nbsp;&nbsp;`visibility: hidden;`<br/>\n`}`\n   *\n   * @example\n   * ```html\n   * <ui5-avatar>\n   *   <div slot=\"header\">Custom header content</div>\n   *   <p>Default slot content</p>\n   * </ui5-avatar>\n   * ```\n   *\n   * @readonly\n   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}\n   */\n  readonly slots = [\n      {\n          \"name\": \"badge\",\n          \"description\": \"Defines the optional badge that will be used for visual affordance.\\n\\n**Recommendation:** While badges are supported on all avatars, it is recommended\\nto use them with interactive avatars (via `mode=\\\"Interactive\\\"` or `interactive` attribute)\\nto provide better user experience and accessibility.\\n\\n**Note:** While the slot allows for custom badges, to achieve\\nthe Fiori design, use the `ui5-avatar-badge` component.\",\n          \"since\": \"1.7.0\"\n      },\n      {\n          \"name\": \"default\",\n          \"description\": \"Receives the desired `<img>` tag\\n\\n**Note:** If you experience flickering of the provided image, you can hide the component until it is defined with the following CSS:<br/>\\n`ui5-avatar:not(:defined) {`<br/>\\n&nbsp;&nbsp;&nbsp;&nbsp;`visibility: hidden;`<br/>\\n`}`\",\n          \"since\": \"1.0.0-rc.15\"\n      }\n  ];\n\n\n  public elementRef: ElementRef<_Avatar> = inject(ElementRef);\n  public injector = inject(Injector);\n\n  /**\n   * Content density observer is injected to activate automatic CSS class and\n   * UI5 attribute application. The observer self-initializes, no explicit subscribe() needed.\n   * @private\n   */\n  private readonly _contentDensityObserver = inject(ContentDensityObserver);\n\n  get element(): _Avatar {\n    return this.elementRef.nativeElement;\n  }\n\n  ngAfterViewInit(): void {\n    const wcElement = this.element;\n    \n    const inputsToSync = [\n      'accessibilityAttributes',\n      'accessibleName',\n      'colorScheme',\n      'disabled',\n      'fallbackIcon',\n      'icon',\n      'initials',\n      'interactive',\n      'mode',\n      'shape',\n      'size',\n    ];\n    \n    // Synchronize inputs (properties)\n    for (const inputName of inputsToSync) {\n      // Find the corresponding camelCase signal property on the Angular component\n      const signalName = inputName.replace(/-./g, (x: string) => x[1].toUpperCase());\n\n      // Use the Injector to run the effect in the correct context\n      if (this[signalName] && typeof this[signalName] === 'function') {\n        runInInjectionContext(this.injector, () => {\n          effect(() => {\n            // Read the signal value\n            const value = this[signalName]();\n            if (wcElement) {\n              // Write the value to the Web Component's property\n              wcElement[inputName] = value;\n            }\n          });\n        });\n      }\n    }\n  \n    \n    const outputsToSync = [\n      'ui5Click',\n    ];\n    \n    // Synchronize outputs (events)\n    for (const outputName of outputsToSync) {\n      // Map Angular output name to UI5 web component event name\n      const eventName = outputName.replace('ui5', '').replace(/([A-Z])/g, '-$1').toLowerCase().substring(1);\n      // Ensure the output property exists and has an emit function before adding listener\n      if (this[outputName] && typeof this[outputName].emit === 'function' && wcElement.addEventListener) {\n        // Cast the listener to the correct type to satisfy TypeScript\n        wcElement.addEventListener(eventName, (e) => {\n\n          this[outputName].emit(e as CustomEvent<any>);\n        });\n      }\n    }\n  \n\n  }\n}\n\n// Re-export types for convenience\nexport { AvatarAccessibilityAttributes } from '@ui5/webcomponents/dist/Avatar.js';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}