@inera/ids-angular 9.3.0 → 9.4.0

package/fesm2022/inera-ids-angular-components-header-inera-general.mjs

@@ -1,21 +1,22 @@
 import * as i0 from '@angular/core';
-import { inject, booleanAttribute, Input, Component, viewChild, Directive, contentChildren, contentChild, EventEmitter, Output, NgModule } from '@angular/core';
+import { inject, booleanAttribute, Input, Component, EventEmitter, viewChild, Output, Directive, contentChildren, contentChild, computed, NgModule } from '@angular/core';
 import { NgTemplateOutlet } from '@angular/common';
-import { ID_HEADER_CONTEXT, IDUseIdService, useEscapeKey, IDClickOutsideDirective } from '@inera/ids-angular/common';
+import { ID_HEADER_CONTEXT, IDUseIdService, useFocusTrap, useEscapeKey, IDClickOutsideDirective } from '@inera/ids-angular/common';
 
 class IDHeaderIneraGeneralItemComponent {
     mobile = false;
+    separatorLeft = false;
     icon;
     header = inject(ID_HEADER_CONTEXT, { optional: true, host: true });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: IDHeaderIneraGeneralItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.20", type: IDHeaderIneraGeneralItemComponent, isStandalone: true, selector: "id-header-inera-general-item", inputs: { mobile: ["mobile", "mobile", booleanAttribute], icon: "icon" }, host: { properties: { "class.ids-header-inera-general-item--unresponsive": "header?.unresponsive", "class.ids-header-inera-general-item--mobile": "mobile" }, classAttribute: "ids-header-inera-general-item" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: IDHeaderIneraGeneralItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.25", type: IDHeaderIneraGeneralItemComponent, isStandalone: true, selector: "id-header-inera-general-item", inputs: { mobile: ["mobile", "mobile", booleanAttribute], separatorLeft: ["separatorLeft", "separatorLeft", booleanAttribute], icon: "icon" }, host: { properties: { "class.ids-header-inera-general-item--unresponsive": "header?.unresponsive", "class.ids-header-inera-general-item--mobile": "mobile", "class.ids-header-inera-general-item--separator": "separatorLeft" }, classAttribute: "ids-header-inera-general-item" }, ngImport: i0, template: `
     <div class="ids-header-inera-general-item__icon">
         <ng-content name=[icon]></ng-content>
         <span class="ids-icon-{{icon}}" aria-hidden="true"></span>
     </div>
     <ng-content></ng-content>`, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: IDHeaderIneraGeneralItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: IDHeaderIneraGeneralItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'id-header-inera-general-item',
@@ -29,34 +30,171 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                     host: {
                         class: 'ids-header-inera-general-item',
                         '[class.ids-header-inera-general-item--unresponsive]': 'header?.unresponsive',
-                        '[class.ids-header-inera-general-item--mobile]': 'mobile'
+                        '[class.ids-header-inera-general-item--mobile]': 'mobile',
+                        '[class.ids-header-inera-general-item--separator]': 'separatorLeft'
                     }
                 }]
         }], propDecorators: { mobile: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
+            }], separatorLeft: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], icon: [{
                 type: Input
             }] } });
 
+class IDHeaderIneraGeneralAvatarComponent {
+    username;
+    unit;
+    persistent = false;
+    expanded = false;
+    expandedChange = new EventEmitter();
+    opened = new EventEmitter();
+    closed = new EventEmitter();
+    idService = inject(IDUseIdService);
+    contentId = this.idService.generateId('header-inera-general-avatar');
+    header = inject(ID_HEADER_CONTEXT, { optional: true, host: true });
+    menuContent = viewChild('menuContent');
+    focusTrap = useFocusTrap(() => this.menuContent(), { disabled: () => !this.expanded });
+    constructor() {
+        useEscapeKey(() => this.handleCloseEvent(), () => this.expanded);
+    }
+    handleCloseEvent() {
+        if (!this.persistent) {
+            this.closeAvatar();
+        }
+    }
+    closeAvatar() {
+        this.focusTrap.destroy();
+        this.expanded = false;
+        this.expandedChange.emit(false);
+        this.closed.emit();
+    }
+    toggleAvatar() {
+        this.expanded = !this.expanded;
+        this.expandedChange.emit(this.expanded);
+        if (this.expanded) {
+            this.focusTrap.create();
+            this.opened.emit();
+        }
+        else {
+            this.focusTrap.destroy();
+            this.closed.emit();
+        }
+    }
+    ngOnDestroy() {
+        this.focusTrap.destroy();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: IDHeaderIneraGeneralAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: IDHeaderIneraGeneralAvatarComponent, isStandalone: true, selector: "id-header-inera-general-avatar", inputs: { username: "username", unit: "unit", persistent: ["persistent", "persistent", booleanAttribute], expanded: ["expanded", "expanded", booleanAttribute] }, outputs: { expandedChange: "expandedChange", opened: "opened", closed: "closed" }, host: { properties: { "class.ids-header-inera-general-avatar--unresponsive": "header?.unresponsive" }, classAttribute: "ids-header-inera-general-avatar" }, viewQueries: [{ propertyName: "menuContent", first: true, predicate: ["menuContent"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div class="ids-header-inera-general-avatar__avatar"
+      idClickOutside
+      (idClickOutside)="handleCloseEvent()">
+      <div #menuContent class="ids-header-inera-general-avatar__menu-wrapper">
+        <button 
+        (click)="toggleAvatar()"
+        [attr.aria-controls]="contentId"
+        class="ids-header-inera-general-avatar__button"
+        [class.ids-header-inera-general-avatar__button--expanded]="expanded"
+        [attr.aria-expanded]="expanded">
+          <div class="ids-header-inera-general-avatar__name" [attr.title]="username">
+            {{username}}
+          </div>
+            @if(unit) {
+              <div [attr.title]="unit" class="ids-header-inera-general-avatar__unit">{{unit}} </div>
+            }
+        </button>
+        @if(expanded){
+          <div [attr.id]="contentId"
+          class="ids-header-inera-general-avatar__menu ids-header-inera-general-avatar__menu--mobile-menu"
+          [class.ids-header-inera-general-avatar__menu--expanded]="expanded">
+          <ng-content select="id-header-inera-general-avatar-agent"></ng-content>
+          <div class="ids-header-inera-general-avatar__menu-links">
+            <ng-content></ng-content>
+          </div>
+        </div>
+        }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "directive", type: IDClickOutsideDirective, selector: "[idClickOutside]", outputs: ["idClickOutside"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: IDHeaderIneraGeneralAvatarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "id-header-inera-general-avatar",
+                    template: `
+    <div class="ids-header-inera-general-avatar__avatar"
+      idClickOutside
+      (idClickOutside)="handleCloseEvent()">
+      <div #menuContent class="ids-header-inera-general-avatar__menu-wrapper">
+        <button 
+        (click)="toggleAvatar()"
+        [attr.aria-controls]="contentId"
+        class="ids-header-inera-general-avatar__button"
+        [class.ids-header-inera-general-avatar__button--expanded]="expanded"
+        [attr.aria-expanded]="expanded">
+          <div class="ids-header-inera-general-avatar__name" [attr.title]="username">
+            {{username}}
+          </div>
+            @if(unit) {
+              <div [attr.title]="unit" class="ids-header-inera-general-avatar__unit">{{unit}} </div>
+            }
+        </button>
+        @if(expanded){
+          <div [attr.id]="contentId"
+          class="ids-header-inera-general-avatar__menu ids-header-inera-general-avatar__menu--mobile-menu"
+          [class.ids-header-inera-general-avatar__menu--expanded]="expanded">
+          <ng-content select="id-header-inera-general-avatar-agent"></ng-content>
+          <div class="ids-header-inera-general-avatar__menu-links">
+            <ng-content></ng-content>
+          </div>
+        </div>
+        }
+    </div>
+  `,
+                    standalone: true,
+                    imports: [IDClickOutsideDirective],
+                    host: {
+                        class: 'ids-header-inera-general-avatar',
+                        '[class.ids-header-inera-general-avatar--unresponsive]': 'header?.unresponsive'
+                    }
+                }]
+        }], ctorParameters: () => [], propDecorators: { username: [{
+                type: Input
+            }], unit: [{
+                type: Input
+            }], persistent: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], expanded: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], expandedChange: [{
+                type: Output
+            }], opened: [{
+                type: Output
+            }], closed: [{
+                type: Output
+            }] } });
+
 class IDHeaderIneraGeneralNavComponent {
     hideOnTablet = false;
     template = viewChild.required('nav');
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: IDHeaderIneraGeneralNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.20", type: IDHeaderIneraGeneralNavComponent, isStandalone: true, selector: "id-header-inera-general-nav", inputs: { hideOnTablet: ["hideOnTablet", "hideOnTablet", booleanAttribute] }, viewQueries: [{ propertyName: "template", first: true, predicate: ["nav"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: IDHeaderIneraGeneralNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.25", type: IDHeaderIneraGeneralNavComponent, isStandalone: true, selector: "id-header-inera-general-nav", inputs: { hideOnTablet: ["hideOnTablet", "hideOnTablet", booleanAttribute] }, viewQueries: [{ propertyName: "template", first: true, predicate: ["nav"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <ng-template #nav>
-      <div class="ids-header-inera-general-nav__nav-items">      
+      <div class="ids-header-inera-general-nav__inner">      
         <ng-content></ng-content>
       </div>
     </ng-template>`, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: IDHeaderIneraGeneralNavComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: IDHeaderIneraGeneralNavComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "id-header-inera-general-nav",
                     template: `
     <ng-template #nav>
-      <div class="ids-header-inera-general-nav__nav-items">      
+      <div class="ids-header-inera-general-nav__inner">      
         <ng-content></ng-content>
       </div>
     </ng-template>`,
@@ -67,11 +205,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 args: [{ transform: booleanAttribute }]
             }] } });
 
+class IDHeaderIneraGeneralNavMobileComponent {
+    template = viewChild.required('navMobile');
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: IDHeaderIneraGeneralNavMobileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.25", type: IDHeaderIneraGeneralNavMobileComponent, isStandalone: true, selector: "id-header-inera-general-nav-mobile", viewQueries: [{ propertyName: "template", first: true, predicate: ["navMobile"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <ng-template #navMobile>
+      <ng-content></ng-content>
+    </ng-template>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: IDHeaderIneraGeneralNavMobileComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'id-header-inera-general-nav-mobile',
+                    template: `
+    <ng-template #navMobile>
+      <ng-content></ng-content>
+    </ng-template>
+  `,
+                    standalone: true,
+                }]
+        }] });
+
 class IDHeaderIneraGeneralSkipToContent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: IDHeaderIneraGeneralSkipToContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: IDHeaderIneraGeneralSkipToContent, isStandalone: true, selector: "id-header-inera-general-skip-to-content", host: { classAttribute: "ids-header-inera-general__skip-to-content" }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: IDHeaderIneraGeneralSkipToContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: IDHeaderIneraGeneralSkipToContent, isStandalone: true, selector: "id-header-inera-general-skip-to-content", host: { classAttribute: "ids-header-inera-general__skip-to-content" }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: IDHeaderIneraGeneralSkipToContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: IDHeaderIneraGeneralSkipToContent, decorators: [{
             type: Component,
             args: [{
                     selector: "id-header-inera-general-skip-to-content",
@@ -84,10 +244,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
         }] });
 
 class IDHeaderIneraGeneralBrandLinkDirective {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: IDHeaderIneraGeneralBrandLinkDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.20", type: IDHeaderIneraGeneralBrandLinkDirective, isStandalone: true, selector: "a[idBrandIneraGeneralLink]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: IDHeaderIneraGeneralBrandLinkDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: IDHeaderIneraGeneralBrandLinkDirective, isStandalone: true, selector: "a[idBrandIneraGeneralLink]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: IDHeaderIneraGeneralBrandLinkDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: IDHeaderIneraGeneralBrandLinkDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: "a[idBrandIneraGeneralLink]",
@@ -100,24 +260,27 @@ class IDHeaderIneraGeneralComponent {
     brandText = '';
     items = contentChildren(IDHeaderIneraGeneralItemComponent);
     nav = contentChild(IDHeaderIneraGeneralNavComponent);
+    avatar = contentChild(IDHeaderIneraGeneralAvatarComponent);
+    navMobile = contentChild(IDHeaderIneraGeneralNavMobileComponent);
     brandLink = contentChild(IDHeaderIneraGeneralBrandLinkDirective);
     skipToContent = contentChild(IDHeaderIneraGeneralSkipToContent);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: IDHeaderIneraGeneralComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: IDHeaderIneraGeneralComponent, isStandalone: true, selector: "id-header-inera-general", inputs: { unresponsive: ["unresponsive", "unresponsive", booleanAttribute], brandText: "brandText" }, providers: [
+    hasHeaderItems = computed(() => this.items().length > 0 || !!this.avatar() || !!this.navMobile());
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: IDHeaderIneraGeneralComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: IDHeaderIneraGeneralComponent, isStandalone: true, selector: "id-header-inera-general", inputs: { unresponsive: ["unresponsive", "unresponsive", booleanAttribute], brandText: "brandText" }, providers: [
             {
                 provide: ID_HEADER_CONTEXT,
                 useExisting: IDHeaderIneraGeneralComponent,
             },
-        ], queries: [{ propertyName: "items", predicate: IDHeaderIneraGeneralItemComponent, isSignal: true }, { propertyName: "nav", first: true, predicate: IDHeaderIneraGeneralNavComponent, descendants: true, isSignal: true }, { propertyName: "brandLink", first: true, predicate: IDHeaderIneraGeneralBrandLinkDirective, descendants: true, isSignal: true }, { propertyName: "skipToContent", first: true, predicate: IDHeaderIneraGeneralSkipToContent, descendants: true, isSignal: true }], ngImport: i0, template: "<header\n  class=\"ids-header-inera-general\"\n  [class.ids-header-inera-general--unresponsive]=\"unresponsive\"\n>\n  <ng-content select=\"id-header-inera-general-skip-to-content\"></ng-content>\n  <div class=\"ids-header-inera-general__container\">\n    <div class=\"ids-header-inera-general__inner\">\n      <div class=\"ids-header-inera-general__main\">\n        <div class=\"ids-header-inera-general__brand\">\n          @if (brandLink()) {\n            <span class=\"ids-header-inera-general__brand-text\">{{ brandText }}</span>\n            <span class=\"ids-header-inera-general__brand-link\">\n              <ng-content select=\"[idBrandIneraGeneralLink]\"></ng-content>\n            </span>\n          } @else {\n            <h1 class=\"ids-header-inera-general__brand-text\">{{ brandText }}</h1>\n          }\n        </div>\n\n        @if (items()) {\n          <div class=\"ids-header-inera-general__items\">\n            <ng-content select=\"id-header-inera-general-item\"></ng-content>\n            <ng-content select=\"id-header-inera-general-menu-mobile\"></ng-content>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n  @if (nav()) {\n    <nav\n      class=\"ids-header-inera-general-nav\"\n      [class.ids-header-inera-general-nav--unresponsive]=\"unresponsive\"\n    >\n      <ng-container *ngTemplateOutlet=\"nav()!.template()\"></ng-container>\n    </nav>\n  }\n</header>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+        ], queries: [{ propertyName: "items", predicate: IDHeaderIneraGeneralItemComponent, isSignal: true }, { propertyName: "nav", first: true, predicate: IDHeaderIneraGeneralNavComponent, descendants: true, isSignal: true }, { propertyName: "avatar", first: true, predicate: IDHeaderIneraGeneralAvatarComponent, descendants: true, isSignal: true }, { propertyName: "navMobile", first: true, predicate: IDHeaderIneraGeneralNavMobileComponent, descendants: true, isSignal: true }, { propertyName: "brandLink", first: true, predicate: IDHeaderIneraGeneralBrandLinkDirective, descendants: true, isSignal: true }, { propertyName: "skipToContent", first: true, predicate: IDHeaderIneraGeneralSkipToContent, descendants: true, isSignal: true }], ngImport: i0, template: "<header\n  class=\"ids-header-inera-general\"\n  [class.ids-header-inera-general--unresponsive]=\"unresponsive\"\n>\n  <ng-content select=\"id-header-inera-general-skip-to-content\"></ng-content>\n  <div class=\"ids-header-inera-general__container\">\n    <div class=\"ids-header-inera-general__inner\">\n      <div class=\"ids-header-inera-general__main\">\n        <div class=\"ids-header-inera-general__brand\">\n          @if (brandLink()) {\n            <span class=\"ids-header-inera-general__brand-text\">{{ brandText }}</span>\n            <span class=\"ids-header-inera-general__brand-link\">\n              <ng-content select=\"[idBrandIneraGeneralLink]\"></ng-content>\n            </span>\n          } @else {\n            <h1 class=\"ids-header-inera-general__brand-text\">{{ brandText }}</h1>\n          }\n        </div>\n\n        @if (hasHeaderItems()) {\n          <div class=\"ids-header-inera-general__items\">\n            <ng-content select=\"id-header-inera-general-item\"></ng-content>\n            <ng-content select=\"id-header-inera-general-menu-mobile\"></ng-content>\n            <ng-content select=\"id-header-inera-general-avatar\"></ng-content>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n  @if (nav()) {\n    <nav\n      class=\"ids-header-inera-general-nav\"\n      aria-label=\"Huvudmeny\"\n      [class.ids-header-inera-general-nav--unresponsive]=\"unresponsive\">\n      <ng-container *ngTemplateOutlet=\"nav()!.template()\"></ng-container>\n    </nav>\n  }\n  @if (navMobile(); as navMobile) {\n    <nav\n      class=\"ids-header-inera-general-nav-mobile\"\n      aria-label=\"Huvudmeny\"\n    >\n      <ng-container *ngTemplateOutlet=\"navMobile.template()\"></ng-container>\n    </nav>\n  }\n</header>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: IDHeaderIneraGeneralComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: IDHeaderIneraGeneralComponent, decorators: [{
             type: Component,
             args: [{ selector: 'id-header-inera-general', standalone: true, providers: [
                         {
                             provide: ID_HEADER_CONTEXT,
                             useExisting: IDHeaderIneraGeneralComponent,
                         },
-                    ], imports: [NgTemplateOutlet], template: "<header\n  class=\"ids-header-inera-general\"\n  [class.ids-header-inera-general--unresponsive]=\"unresponsive\"\n>\n  <ng-content select=\"id-header-inera-general-skip-to-content\"></ng-content>\n  <div class=\"ids-header-inera-general__container\">\n    <div class=\"ids-header-inera-general__inner\">\n      <div class=\"ids-header-inera-general__main\">\n        <div class=\"ids-header-inera-general__brand\">\n          @if (brandLink()) {\n            <span class=\"ids-header-inera-general__brand-text\">{{ brandText }}</span>\n            <span class=\"ids-header-inera-general__brand-link\">\n              <ng-content select=\"[idBrandIneraGeneralLink]\"></ng-content>\n            </span>\n          } @else {\n            <h1 class=\"ids-header-inera-general__brand-text\">{{ brandText }}</h1>\n          }\n        </div>\n\n        @if (items()) {\n          <div class=\"ids-header-inera-general__items\">\n            <ng-content select=\"id-header-inera-general-item\"></ng-content>\n            <ng-content select=\"id-header-inera-general-menu-mobile\"></ng-content>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n  @if (nav()) {\n    <nav\n      class=\"ids-header-inera-general-nav\"\n      [class.ids-header-inera-general-nav--unresponsive]=\"unresponsive\"\n    >\n      <ng-container *ngTemplateOutlet=\"nav()!.template()\"></ng-container>\n    </nav>\n  }\n</header>\n" }]
+                    ], imports: [NgTemplateOutlet], template: "<header\n  class=\"ids-header-inera-general\"\n  [class.ids-header-inera-general--unresponsive]=\"unresponsive\"\n>\n  <ng-content select=\"id-header-inera-general-skip-to-content\"></ng-content>\n  <div class=\"ids-header-inera-general__container\">\n    <div class=\"ids-header-inera-general__inner\">\n      <div class=\"ids-header-inera-general__main\">\n        <div class=\"ids-header-inera-general__brand\">\n          @if (brandLink()) {\n            <span class=\"ids-header-inera-general__brand-text\">{{ brandText }}</span>\n            <span class=\"ids-header-inera-general__brand-link\">\n              <ng-content select=\"[idBrandIneraGeneralLink]\"></ng-content>\n            </span>\n          } @else {\n            <h1 class=\"ids-header-inera-general__brand-text\">{{ brandText }}</h1>\n          }\n        </div>\n\n        @if (hasHeaderItems()) {\n          <div class=\"ids-header-inera-general__items\">\n            <ng-content select=\"id-header-inera-general-item\"></ng-content>\n            <ng-content select=\"id-header-inera-general-menu-mobile\"></ng-content>\n            <ng-content select=\"id-header-inera-general-avatar\"></ng-content>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n  @if (nav()) {\n    <nav\n      class=\"ids-header-inera-general-nav\"\n      aria-label=\"Huvudmeny\"\n      [class.ids-header-inera-general-nav--unresponsive]=\"unresponsive\">\n      <ng-container *ngTemplateOutlet=\"nav()!.template()\"></ng-container>\n    </nav>\n  }\n  @if (navMobile(); as navMobile) {\n    <nav\n      class=\"ids-header-inera-general-nav-mobile\"\n      aria-label=\"Huvudmeny\"\n    >\n      <ng-container *ngTemplateOutlet=\"navMobile.template()\"></ng-container>\n    </nav>\n  }\n</header>\n" }]
         }], propDecorators: { unresponsive: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
@@ -125,6 +288,136 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 type: Input
             }] } });
 
+class IDHeaderIneraGeneralAvatarMobileComponent {
+    username;
+    unit;
+    expanded = false;
+    persistent = false;
+    expandedChange = new EventEmitter();
+    opened = new EventEmitter();
+    closed = new EventEmitter();
+    idService = inject(IDUseIdService);
+    contentId = this.idService.generateId('header-inera-general-avatar');
+    header = inject(ID_HEADER_CONTEXT, { optional: true, host: true });
+    menuContent = viewChild('menuContent');
+    focusTrap = useFocusTrap(() => this.menuContent(), { disabled: () => !this.expanded });
+    constructor() {
+        useEscapeKey(() => this.handleCloseEvent(), () => this.expanded);
+    }
+    handleCloseEvent() {
+        if (!this.persistent) {
+            this.closeAvatar();
+        }
+    }
+    closeAvatar() {
+        this.focusTrap.destroy();
+        this.expanded = false;
+        this.expandedChange.emit(false);
+        this.closed.emit();
+    }
+    toggleAvatar() {
+        this.expanded = !this.expanded;
+        this.expandedChange.emit(this.expanded);
+        if (this.expanded) {
+            this.focusTrap.create();
+            this.opened.emit();
+        }
+        else {
+            this.focusTrap.destroy();
+            this.closed.emit();
+        }
+    }
+    ngOnDestroy() {
+        this.focusTrap.destroy();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: IDHeaderIneraGeneralAvatarMobileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: IDHeaderIneraGeneralAvatarMobileComponent, isStandalone: true, selector: "id-header-inera-general-avatar-mobile", inputs: { username: "username", unit: "unit", expanded: ["expanded", "expanded", booleanAttribute], persistent: ["persistent", "persistent", booleanAttribute] }, outputs: { expandedChange: "expandedChange", opened: "opened", closed: "closed" }, host: { classAttribute: "ids-header-inera-general-avatar-mobile" }, viewQueries: [{ propertyName: "menuContent", first: true, predicate: ["menuContent"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div #menuContent class="ids-header-inera-general-avatar-mobile__menu-wrapper"
+    idClickOutside
+    (idClickOutside)="handleCloseEvent()">
+      <button
+        class="ids-header-inera-general-avatar-mobile__button"
+        (click)="toggleAvatar()"
+        [attr.aria-controls]="contentId"
+        [class.ids-header-inera-general-avatar-mobile__button--expanded]="expanded"
+        [attr.aria-expanded]="expanded">
+          <div 
+            class="ids-header-inera-general-avatar-mobile-content__name"
+            [attr.title]="username">
+            {{username}}
+          </div>
+      </button>
+      <div
+        class="ids-header-inera-general-avatar-mobile__menu"
+        [attr.id]="contentId"
+        [class.ids-header-inera-general-avatar-mobile__menu--expanded]="expanded">
+        @if(unit) {
+          <div class="ids-header-inera-general-avatar-mobile__unit">{{unit}}</div>
+        }
+          <div class="ids-header-inera-general-avatar-mobile__menu-links"> 
+            <ng-content></ng-content>
+        </div>
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "directive", type: IDClickOutsideDirective, selector: "[idClickOutside]", outputs: ["idClickOutside"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: IDHeaderIneraGeneralAvatarMobileComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "id-header-inera-general-avatar-mobile",
+                    template: `
+    <div #menuContent class="ids-header-inera-general-avatar-mobile__menu-wrapper"
+    idClickOutside
+    (idClickOutside)="handleCloseEvent()">
+      <button
+        class="ids-header-inera-general-avatar-mobile__button"
+        (click)="toggleAvatar()"
+        [attr.aria-controls]="contentId"
+        [class.ids-header-inera-general-avatar-mobile__button--expanded]="expanded"
+        [attr.aria-expanded]="expanded">
+          <div 
+            class="ids-header-inera-general-avatar-mobile-content__name"
+            [attr.title]="username">
+            {{username}}
+          </div>
+      </button>
+      <div
+        class="ids-header-inera-general-avatar-mobile__menu"
+        [attr.id]="contentId"
+        [class.ids-header-inera-general-avatar-mobile__menu--expanded]="expanded">
+        @if(unit) {
+          <div class="ids-header-inera-general-avatar-mobile__unit">{{unit}}</div>
+        }
+          <div class="ids-header-inera-general-avatar-mobile__menu-links"> 
+            <ng-content></ng-content>
+        </div>
+      </div>
+    </div>
+  `,
+                    standalone: true,
+                    imports: [IDClickOutsideDirective],
+                    host: {
+                        class: 'ids-header-inera-general-avatar-mobile'
+                    }
+                }]
+        }], ctorParameters: () => [], propDecorators: { username: [{
+                type: Input
+            }], unit: [{
+                type: Input
+            }], expanded: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], persistent: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], expandedChange: [{
+                type: Output
+            }], opened: [{
+                type: Output
+            }], closed: [{
+                type: Output
+            }] } });
+
 class IDHeaderIneraGeneralNavItemComponent {
     label;
     active = false;
@@ -159,8 +452,8 @@ class IDHeaderIneraGeneralNavItemComponent {
         this.expandedChange.emit(false);
         this.activeChange.emit(false);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: IDHeaderIneraGeneralNavItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: IDHeaderIneraGeneralNavItemComponent, isStandalone: true, selector: "id-header-inera-general-nav-item", inputs: { label: "label", active: ["active", "active", booleanAttribute], expanded: ["expanded", "expanded", booleanAttribute] }, outputs: { activeChange: "activeChange", expandedChange: "expandedChange" }, host: { properties: { "class.ids-header-inera-general-nav-item--unresponsive": "header?.unresponsive", "class.ids-header-inera-general-nav-item--active": "active || expanded", "attr.aria-current": "active", "class.ids-header-inera-general-nav-item--expanded": "expanded" }, classAttribute: "ids-header-inera-general-nav-item" }, queries: [{ propertyName: "col1", first: true, predicate: ["col1"], descendants: true, isSignal: true }, { propertyName: "col2", first: true, predicate: ["col2"], descendants: true, isSignal: true }, { propertyName: "col3", first: true, predicate: ["col3"], descendants: true, isSignal: true }, { propertyName: "col4", first: true, predicate: ["col4"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: IDHeaderIneraGeneralNavItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: IDHeaderIneraGeneralNavItemComponent, isStandalone: true, selector: "id-header-inera-general-nav-item", inputs: { label: "label", active: ["active", "active", booleanAttribute], expanded: ["expanded", "expanded", booleanAttribute] }, outputs: { activeChange: "activeChange", expandedChange: "expandedChange" }, host: { properties: { "class.ids-header-inera-general-nav-item--unresponsive": "header?.unresponsive", "class.ids-header-inera-general-nav-item--active": "active || expanded", "attr.aria-current": "active", "class.ids-header-inera-general-nav-item--expanded": "expanded" }, classAttribute: "ids-header-inera-general-nav-item" }, queries: [{ propertyName: "col1", first: true, predicate: ["col1"], descendants: true, isSignal: true }, { propertyName: "col2", first: true, predicate: ["col2"], descendants: true, isSignal: true }, { propertyName: "col3", first: true, predicate: ["col3"], descendants: true, isSignal: true }, { propertyName: "col4", first: true, predicate: ["col4"], descendants: true, isSignal: true }], ngImport: i0, template: `
   <div
     idClickOutside
     (idClickOutside)="closeItem()">
@@ -197,7 +490,7 @@ class IDHeaderIneraGeneralNavItemComponent {
     </div>
   </div>`, isInline: true, dependencies: [{ kind: "directive", type: IDClickOutsideDirective, selector: "[idClickOutside]", outputs: ["idClickOutside"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: IDHeaderIneraGeneralNavItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: IDHeaderIneraGeneralNavItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "id-header-inera-general-nav-item",
@@ -261,14 +554,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 type: Output
             }] } });
 
+class IDHeaderIneraGeneralNavItemMobileComponent {
+    icon;
+    header = inject(ID_HEADER_CONTEXT, { optional: true, host: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: IDHeaderIneraGeneralNavItemMobileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: IDHeaderIneraGeneralNavItemMobileComponent, isStandalone: true, selector: "id-header-inera-general-nav-item-mobile", inputs: { icon: "icon" }, host: { properties: { "class.ids-header-inera-general-nav-item-mobile--unresponsive": "header?.unresponsive" }, classAttribute: "ids-header-inera-general-nav-item-mobile" }, ngImport: i0, template: `
+    <span class="ids-header-inera-general-nav-item-mobile__icon">
+      <span class="ids-icon-{{icon}}"></span>
+      <ng-content select="[idNavItemMobileIcon]"></ng-content>
+    </span>
+    <ng-content></ng-content>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: IDHeaderIneraGeneralNavItemMobileComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "id-header-inera-general-nav-item-mobile",
+                    template: `
+    <span class="ids-header-inera-general-nav-item-mobile__icon">
+      <span class="ids-icon-{{icon}}"></span>
+      <ng-content select="[idNavItemMobileIcon]"></ng-content>
+    </span>
+    <ng-content></ng-content>
+  `,
+                    standalone: true,
+                    host: {
+                        class: 'ids-header-inera-general-nav-item-mobile',
+                        '[class.ids-header-inera-general-nav-item-mobile--unresponsive]': 'header?.unresponsive'
+                    }
+                }]
+        }], propDecorators: { icon: [{
+                type: Input
+            }] } });
+
 class IDHeaderIneraGeneralMenuMobileComponent {
     expanded = false;
     header = inject(ID_HEADER_CONTEXT, { optional: true, host: true });
     toggleExpansion() {
         this.expanded = !this.expanded;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: IDHeaderIneraGeneralMenuMobileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: IDHeaderIneraGeneralMenuMobileComponent, isStandalone: true, selector: "id-header-inera-general-menu-mobile", inputs: { expanded: ["expanded", "expanded", booleanAttribute] }, host: { classAttribute: "ids-header-inera-general__mobile-menu" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: IDHeaderIneraGeneralMenuMobileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: IDHeaderIneraGeneralMenuMobileComponent, isStandalone: true, selector: "id-header-inera-general-menu-mobile", inputs: { expanded: ["expanded", "expanded", booleanAttribute] }, host: { classAttribute: "ids-header-inera-general__mobile-menu" }, ngImport: i0, template: `
     <div
       class="ids-header-inera-general-menu-mobile"
       [class.ids-header-inera-general-menu-mobile--unresponsive]="header?.unresponsive"
@@ -292,7 +618,7 @@ class IDHeaderIneraGeneralMenuMobileComponent {
     </div>
   `, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: IDHeaderIneraGeneralMenuMobileComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: IDHeaderIneraGeneralMenuMobileComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'id-header-inera-general-menu-mobile',
@@ -330,10 +656,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             }] } });
 
 class IDHeaderIneraGeneralNavItemMenuLinkComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: IDHeaderIneraGeneralNavItemMenuLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: IDHeaderIneraGeneralNavItemMenuLinkComponent, isStandalone: true, selector: "id-header-inera-general-nav-item-menu-link", host: { classAttribute: "ids-header-inera-general-nav__menu-item-wrapper" }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: IDHeaderIneraGeneralNavItemMenuLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: IDHeaderIneraGeneralNavItemMenuLinkComponent, isStandalone: true, selector: "id-header-inera-general-nav-item-menu-link", host: { classAttribute: "ids-header-inera-general-nav__menu-item-wrapper" }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: IDHeaderIneraGeneralNavItemMenuLinkComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: IDHeaderIneraGeneralNavItemMenuLinkComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "id-header-inera-general-nav-item-menu-link",
@@ -346,32 +672,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
         }] });
 
 class IDHeaderIneraGeneralModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: IDHeaderIneraGeneralModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.20", ngImport: i0, type: IDHeaderIneraGeneralModule, imports: [IDHeaderIneraGeneralComponent,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: IDHeaderIneraGeneralModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.25", ngImport: i0, type: IDHeaderIneraGeneralModule, imports: [IDHeaderIneraGeneralComponent,
+            IDHeaderIneraGeneralAvatarComponent,
+            IDHeaderIneraGeneralAvatarMobileComponent,
             IDHeaderIneraGeneralItemComponent,
             IDHeaderIneraGeneralNavComponent,
             IDHeaderIneraGeneralNavItemComponent,
+            IDHeaderIneraGeneralNavItemMobileComponent,
             IDHeaderIneraGeneralMenuMobileComponent,
             IDHeaderIneraGeneralSkipToContent,
             IDHeaderIneraGeneralNavItemMenuLinkComponent,
             IDHeaderIneraGeneralBrandLinkDirective], exports: [IDHeaderIneraGeneralComponent,
+            IDHeaderIneraGeneralAvatarComponent,
+            IDHeaderIneraGeneralAvatarMobileComponent,
             IDHeaderIneraGeneralItemComponent,
             IDHeaderIneraGeneralNavComponent,
             IDHeaderIneraGeneralNavItemComponent,
+            IDHeaderIneraGeneralNavItemMobileComponent,
             IDHeaderIneraGeneralMenuMobileComponent,
             IDHeaderIneraGeneralSkipToContent,
             IDHeaderIneraGeneralNavItemMenuLinkComponent,
             IDHeaderIneraGeneralBrandLinkDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: IDHeaderIneraGeneralModule });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: IDHeaderIneraGeneralModule });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: IDHeaderIneraGeneralModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: IDHeaderIneraGeneralModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
                         IDHeaderIneraGeneralComponent,
+                        IDHeaderIneraGeneralAvatarComponent,
+                        IDHeaderIneraGeneralAvatarMobileComponent,
                         IDHeaderIneraGeneralItemComponent,
                         IDHeaderIneraGeneralNavComponent,
                         IDHeaderIneraGeneralNavItemComponent,
+                        IDHeaderIneraGeneralNavItemMobileComponent,
                         IDHeaderIneraGeneralMenuMobileComponent,
                         IDHeaderIneraGeneralSkipToContent,
                         IDHeaderIneraGeneralNavItemMenuLinkComponent,
@@ -379,9 +714,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                     ],
                     exports: [
                         IDHeaderIneraGeneralComponent,
+                        IDHeaderIneraGeneralAvatarComponent,
+                        IDHeaderIneraGeneralAvatarMobileComponent,
                         IDHeaderIneraGeneralItemComponent,
                         IDHeaderIneraGeneralNavComponent,
                         IDHeaderIneraGeneralNavItemComponent,
+                        IDHeaderIneraGeneralNavItemMobileComponent,
                         IDHeaderIneraGeneralMenuMobileComponent,
                         IDHeaderIneraGeneralSkipToContent,
                         IDHeaderIneraGeneralNavItemMenuLinkComponent,
@@ -394,5 +732,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { IDHeaderIneraGeneralBrandLinkDirective, IDHeaderIneraGeneralComponent, IDHeaderIneraGeneralItemComponent, IDHeaderIneraGeneralMenuMobileComponent, IDHeaderIneraGeneralModule, IDHeaderIneraGeneralNavComponent, IDHeaderIneraGeneralNavItemComponent, IDHeaderIneraGeneralNavItemMenuLinkComponent, IDHeaderIneraGeneralSkipToContent };
+export { IDHeaderIneraGeneralAvatarComponent, IDHeaderIneraGeneralAvatarMobileComponent, IDHeaderIneraGeneralBrandLinkDirective, IDHeaderIneraGeneralComponent, IDHeaderIneraGeneralItemComponent, IDHeaderIneraGeneralMenuMobileComponent, IDHeaderIneraGeneralModule, IDHeaderIneraGeneralNavComponent, IDHeaderIneraGeneralNavItemComponent, IDHeaderIneraGeneralNavItemMenuLinkComponent, IDHeaderIneraGeneralNavItemMobileComponent, IDHeaderIneraGeneralNavMobileComponent, IDHeaderIneraGeneralSkipToContent };
 //# sourceMappingURL=inera-ids-angular-components-header-inera-general.mjs.map