@inera/ids-angular 8.2.0 → 9.0.0

package/fesm2022/inera-ids-angular-components-header-1177-pro.mjs

@@ -1,278 +1,884 @@
-import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { TemplateRef, ViewChild, Input, CUSTOM_ELEMENTS_SCHEMA, Component, EventEmitter, Output, ContentChild, ContentChildren } from '@angular/core';
-import '@inera/ids-core/components/header-1177-pro/register';
-
-class IDHeader1177ProItemComponent {
-    mobile = false;
-    template;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IDHeader1177ProItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: IDHeader1177ProItemComponent, isStandalone: true, selector: "id-header-1177-pro-item", inputs: { mobile: "mobile" }, viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: "<ng-template>\n  <ng-content></ng-content>\n</ng-template>", styles: [":host{display:contents}\n"] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IDHeader1177ProItemComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'id-header-1177-pro-item', schemas: [CUSTOM_ELEMENTS_SCHEMA], standalone: true, template: "<ng-template>\n  <ng-content></ng-content>\n</ng-template>", styles: [":host{display:contents}\n"] }]
-        }], propDecorators: { mobile: [{
-                type: Input
-            }], template: [{
-                type: ViewChild,
-                args: [TemplateRef]
-            }] } });
+import { EventEmitter, inject, booleanAttribute, Output, Input, Component, ViewChild, Directive, ContentChild, TemplateRef, NgModule } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { IDUseIdService, ID_HEADER_CONTEXT, useEscapeKey, IDClickOutsideDirective } from '@inera/ids-angular/common';
+import { IDRegionIconComponent } from '@inera/ids-angular/components/region-icon';
 
 class IDHeader1177ProAvatarComponent {
-    username = "";
-    unit = "";
-    expanded = false;
+    username;
+    unit;
     persistent = false;
-    template;
+    expanded = false;
+    expandedChange = new EventEmitter();
+    opened = new EventEmitter();
+    closed = new EventEmitter();
+    idService = inject(IDUseIdService);
+    contentId = this.idService.generateId('header-1177-pro-avatar');
+    header = inject(ID_HEADER_CONTEXT, { optional: true, host: true });
+    constructor() {
+        useEscapeKey(() => this.handleCloseEvent(), () => this.expanded);
+    }
+    handleCloseEvent() {
+        if (!this.persistent) {
+            this.closeAvatar();
+        }
+    }
+    closeAvatar() {
+        this.expanded = false;
+        this.expandedChange.emit(false);
+        this.closed.emit();
+    }
+    toggleAvatar() {
+        this.expanded = !this.expanded;
+        this.expandedChange.emit(this.expanded);
+        if (this.expanded) {
+            this.opened.emit();
+        }
+        else {
+            this.closed.emit();
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IDHeader1177ProAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: IDHeader1177ProAvatarComponent, isStandalone: true, selector: "id-header-1177-pro-avatar", inputs: { username: "username", unit: "unit", expanded: "expanded", persistent: "persistent" }, viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: "<ng-template>\n  <ng-content></ng-content>\n</ng-template>", styles: [":host{display:contents}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: IDHeader1177ProAvatarComponent, isStandalone: true, selector: "id-header-1177-pro-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-1177-pro-avatar--unresponsive": "header?.unresponsive" }, classAttribute: "ids-header-1177-pro-avatar" }, ngImport: i0, template: `
+    <div class="ids-header-1177-pro-avatar__avatar"
+      idClickOutside
+      (idClickOutside)="handleCloseEvent()">
+      <div class="ids-header-1177-pro-avatar__menu-wrapper">
+        <button 
+        (click)="toggleAvatar()"
+        [attr.aria-controls]="contentId"
+        class="ids-header-1177-pro-avatar__button"
+        [class.ids-header-1177-pro-avatar__button--expanded]="expanded"
+        [attr.aria-expanded]="expanded">
+          <div class="ids-header-1177-pro-avatar__name" [attr.title]="username">
+            {{username}}
+            @if(unit) {
+              <span class="ids-header-1177-pro-avatar__unit-separator">|</span>
+              <span [attr.title]="unit" class="ids-header-1177-pro-avatar__unit">{{unit}} </span>
+            }
+          </div>
+        </button>
+        @if(expanded){
+          <div [attr.id]="contentId"
+          class="ids-header-1177-pro-avatar__menu ids-header-1177-pro-avatar__menu--mobile-menu"
+          [class.ids-header-1177-pro-avatar__menu--expanded]="expanded">
+          <ng-content select="id-header-1177-pro-avatar-agent"></ng-content>
+          <div class="ids-header-1177-pro-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: "18.2.14", ngImport: i0, type: IDHeader1177ProAvatarComponent, decorators: [{
             type: Component,
-            args: [{ selector: "id-header-1177-pro-avatar", schemas: [CUSTOM_ELEMENTS_SCHEMA], standalone: true, template: "<ng-template>\n  <ng-content></ng-content>\n</ng-template>", styles: [":host{display:contents}\n"] }]
-        }], propDecorators: { username: [{
+            args: [{
+                    selector: "id-header-1177-pro-avatar",
+                    template: `
+    <div class="ids-header-1177-pro-avatar__avatar"
+      idClickOutside
+      (idClickOutside)="handleCloseEvent()">
+      <div class="ids-header-1177-pro-avatar__menu-wrapper">
+        <button 
+        (click)="toggleAvatar()"
+        [attr.aria-controls]="contentId"
+        class="ids-header-1177-pro-avatar__button"
+        [class.ids-header-1177-pro-avatar__button--expanded]="expanded"
+        [attr.aria-expanded]="expanded">
+          <div class="ids-header-1177-pro-avatar__name" [attr.title]="username">
+            {{username}}
+            @if(unit) {
+              <span class="ids-header-1177-pro-avatar__unit-separator">|</span>
+              <span [attr.title]="unit" class="ids-header-1177-pro-avatar__unit">{{unit}} </span>
+            }
+          </div>
+        </button>
+        @if(expanded){
+          <div [attr.id]="contentId"
+          class="ids-header-1177-pro-avatar__menu ids-header-1177-pro-avatar__menu--mobile-menu"
+          [class.ids-header-1177-pro-avatar__menu--expanded]="expanded">
+          <ng-content select="id-header-1177-pro-avatar-agent"></ng-content>
+          <div class="ids-header-1177-pro-avatar__menu-links">
+            <ng-content></ng-content>
+          </div>
+        </div>
+        }
+    </div>
+  `,
+                    standalone: true,
+                    imports: [IDClickOutsideDirective],
+                    host: {
+                        class: 'ids-header-1177-pro-avatar',
+                        '[class.ids-header-1177-pro-avatar--unresponsive]': 'header?.unresponsive'
+                    }
+                }]
+        }], ctorParameters: () => [], propDecorators: { username: [{
                 type: Input
             }], unit: [{
                 type: Input
-            }], expanded: [{
-                type: Input
             }], persistent: [{
-                type: Input
-            }], template: [{
-                type: ViewChild,
-                args: [TemplateRef]
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], expanded: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], expandedChange: [{
+                type: Output
+            }], opened: [{
+                type: Output
+            }], closed: [{
+                type: Output
             }] } });
 
-class IDHeader1177ProNavItemComponent {
-    label = "";
-    notifications = "";
-    active = false;
-    expanded = false;
+class IDHeader1177ProNavComponent {
+    hideOnTablet = false;
     template;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IDHeader1177ProNavItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: IDHeader1177ProNavItemComponent, isStandalone: true, selector: "id-header-1177-pro-nav-item", inputs: { label: "label", notifications: "notifications", active: "active", expanded: "expanded" }, viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: "<ng-template>\n  <ng-content></ng-content>\n</ng-template>" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IDHeader1177ProNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.14", type: IDHeader1177ProNavComponent, isStandalone: true, selector: "id-header-1177-pro-nav", inputs: { hideOnTablet: ["hideOnTablet", "hideOnTablet", booleanAttribute] }, viewQueries: [{ propertyName: "template", first: true, predicate: ["nav"], descendants: true }], ngImport: i0, template: `
+    <ng-template #nav>
+      <div class="ids-header-1177-pro-nav__inner">      
+        <ng-content></ng-content>
+      </div>
+    </ng-template>`, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IDHeader1177ProNavItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IDHeader1177ProNavComponent, decorators: [{
             type: Component,
-            args: [{ selector: "id-header-1177-pro-nav-item", schemas: [CUSTOM_ELEMENTS_SCHEMA], standalone: true, template: "<ng-template>\n  <ng-content></ng-content>\n</ng-template>" }]
-        }], propDecorators: { label: [{
-                type: Input
-            }], notifications: [{
-                type: Input
-            }], active: [{
-                type: Input
-            }], expanded: [{
-                type: Input
+            args: [{
+                    selector: "id-header-1177-pro-nav",
+                    template: `
+    <ng-template #nav>
+      <div class="ids-header-1177-pro-nav__inner">      
+        <ng-content></ng-content>
+      </div>
+    </ng-template>`,
+                    standalone: true
+                }]
+        }], propDecorators: { hideOnTablet: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], template: [{
                 type: ViewChild,
-                args: [TemplateRef]
+                args: ['nav']
             }] } });
 
-class IDHeader1177ProRegionPickerMobileComponent {
-    text = null;
-    expanded = false;
-    onDidToggleRegion = new EventEmitter();
-    template;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IDHeader1177ProRegionPickerMobileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: IDHeader1177ProRegionPickerMobileComponent, isStandalone: true, selector: "id-header-1177-pro-region-picker-mobile", inputs: { text: "text", expanded: "expanded" }, outputs: { onDidToggleRegion: "onDidToggleRegion" }, viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: "<ng-template>\n  <ng-content></ng-content>\n</ng-template>\n", styles: [":host{display:contents}\n"] });
+class IDHeader1177ProBrandLinkDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IDHeader1177ProBrandLinkDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: IDHeader1177ProBrandLinkDirective, isStandalone: true, selector: "a[idBrand1177ProLink]", host: { classAttribute: "ids-header-1177-pro__logo-link" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IDHeader1177ProRegionPickerMobileComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IDHeader1177ProBrandLinkDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "a[idBrand1177ProLink]",
+                    standalone: true,
+                    host: {
+                        class: 'ids-header-1177-pro__logo-link'
+                    }
+                }]
+        }] });
+
+class IDHeader1177ProComponent {
+    text = 'för vårdpersonal';
+    brandHref;
+    srBrandLabel = 'Logotyp';
+    unresponsive = false;
+    avatar;
+    nav;
+    brandLink;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IDHeader1177ProComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: IDHeader1177ProComponent, isStandalone: true, selector: "id-header-1177-pro", inputs: { text: "text", brandHref: "brandHref", srBrandLabel: "srBrandLabel", unresponsive: ["unresponsive", "unresponsive", booleanAttribute] }, providers: [
+            {
+                provide: ID_HEADER_CONTEXT,
+                useExisting: IDHeader1177ProComponent,
+            },
+        ], queries: [{ propertyName: "avatar", first: true, predicate: IDHeader1177ProAvatarComponent, descendants: true }, { propertyName: "nav", first: true, predicate: IDHeader1177ProNavComponent, descendants: true }, { propertyName: "brandLink", first: true, predicate: IDHeader1177ProBrandLinkDirective, descendants: true }], ngImport: i0, template: "<header class=\"ids-header-1177-pro\">\n  <ng-content select=\"id-header-1177-pro-skip-to-content\"></ng-content>\n  <div class=\"ids-header-1177-pro__main\">\n    <div class=\"ids-header-1177-pro__main-left\">\n      <div class=\"ids-header-1177-pro__logo\"> \n        @if(brandLink) {\n          <ng-content select=\"[idBrand1177ProLink]\"></ng-content>\n        } @else {\n          <a [attr.href]=\"brandHref\" class=\"ids-header-1177-pro__logo-link\" [attr.aria-label]=\"srBrandLabel\"> </a>\n        }\n      </div>\n       <div class=\"ids-header-1177-pro__logo-text\">\n        {{text}}\n      </div>\n       <div class=\"ids-header-1177-pro__region-picker\">\n        <ng-content select=\"id-header-1177-pro-region-picker\"></ng-content>\n      </div>\n    </div>\n    <div class=\"ids-header-1177-pro__main-right\"> \n      <ng-content select=\"id-header-1177-pro-item\"></ng-content>\n      <ng-content select=\"id-header-1177-pro-avatar\"></ng-content>\n      <ng-content select=\"id-header-1177-pro-menu-mobile\"></ng-content>\n    </div>\n  </div>\n  @if(nav) {\n    <nav class=\"ids-header-1177-pro-nav\"\n      [class.ids-header-1177-pro__nav--unresponsive]=\"unresponsive\"\n      [class.ids-header-1177-pro__nav--hide-on-tablet]=\"nav.hideOnTablet\">\n      <ng-container *ngTemplateOutlet=\"nav.template\"></ng-container>\n    </nav>\n  }\n</header>", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IDHeader1177ProComponent, decorators: [{
             type: Component,
-            args: [{ selector: "id-header-1177-pro-region-picker-mobile", schemas: [CUSTOM_ELEMENTS_SCHEMA], standalone: true, template: "<ng-template>\n  <ng-content></ng-content>\n</ng-template>\n", styles: [":host{display:contents}\n"] }]
+            args: [{ selector: "id-header-1177-pro", providers: [
+                        {
+                            provide: ID_HEADER_CONTEXT,
+                            useExisting: IDHeader1177ProComponent,
+                        },
+                    ], standalone: true, imports: [NgTemplateOutlet], template: "<header class=\"ids-header-1177-pro\">\n  <ng-content select=\"id-header-1177-pro-skip-to-content\"></ng-content>\n  <div class=\"ids-header-1177-pro__main\">\n    <div class=\"ids-header-1177-pro__main-left\">\n      <div class=\"ids-header-1177-pro__logo\"> \n        @if(brandLink) {\n          <ng-content select=\"[idBrand1177ProLink]\"></ng-content>\n        } @else {\n          <a [attr.href]=\"brandHref\" class=\"ids-header-1177-pro__logo-link\" [attr.aria-label]=\"srBrandLabel\"> </a>\n        }\n      </div>\n       <div class=\"ids-header-1177-pro__logo-text\">\n        {{text}}\n      </div>\n       <div class=\"ids-header-1177-pro__region-picker\">\n        <ng-content select=\"id-header-1177-pro-region-picker\"></ng-content>\n      </div>\n    </div>\n    <div class=\"ids-header-1177-pro__main-right\"> \n      <ng-content select=\"id-header-1177-pro-item\"></ng-content>\n      <ng-content select=\"id-header-1177-pro-avatar\"></ng-content>\n      <ng-content select=\"id-header-1177-pro-menu-mobile\"></ng-content>\n    </div>\n  </div>\n  @if(nav) {\n    <nav class=\"ids-header-1177-pro-nav\"\n      [class.ids-header-1177-pro__nav--unresponsive]=\"unresponsive\"\n      [class.ids-header-1177-pro__nav--hide-on-tablet]=\"nav.hideOnTablet\">\n      <ng-container *ngTemplateOutlet=\"nav.template\"></ng-container>\n    </nav>\n  }\n</header>" }]
         }], propDecorators: { text: [{
                 type: Input
-            }], expanded: [{
+            }], brandHref: [{
                 type: Input
-            }], onDidToggleRegion: [{
-                type: Output
-            }], template: [{
-                type: ViewChild,
-                args: [TemplateRef]
+            }], srBrandLabel: [{
+                type: Input
+            }], unresponsive: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], avatar: [{
+                type: ContentChild,
+                args: [IDHeader1177ProAvatarComponent]
+            }], nav: [{
+                type: ContentChild,
+                args: [IDHeader1177ProNavComponent]
+            }], brandLink: [{
+                type: ContentChild,
+                args: [IDHeader1177ProBrandLinkDirective]
             }] } });
 
-class IDHeader1177ProAvatarMobileComponent {
-    username = "";
-    unit = "";
-    expanded = false;
-    template;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IDHeader1177ProAvatarMobileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: IDHeader1177ProAvatarMobileComponent, isStandalone: true, selector: "id-header-1177-pro-avatar-mobile", inputs: { username: "username", unit: "unit", expanded: "expanded" }, viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: "<ng-template>\n  <ng-content></ng-content>\n</ng-template>\n" });
+class IDHeader1177ProSkipToContent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IDHeader1177ProSkipToContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: IDHeader1177ProSkipToContent, isStandalone: true, selector: "id-header-1177-pro-skip-to-content", host: { classAttribute: "ids-header-1177-pro__skip-to-content" }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IDHeader1177ProAvatarMobileComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IDHeader1177ProSkipToContent, decorators: [{
             type: Component,
-            args: [{ selector: "id-header-1177-pro-avatar-mobile", schemas: [CUSTOM_ELEMENTS_SCHEMA], standalone: true, template: "<ng-template>\n  <ng-content></ng-content>\n</ng-template>\n" }]
-        }], propDecorators: { username: [{
-                type: Input
-            }], unit: [{
-                type: Input
-            }], expanded: [{
-                type: Input
-            }], template: [{
-                type: ViewChild,
-                args: [TemplateRef]
-            }] } });
+            args: [{
+                    selector: "id-header-1177-pro-skip-to-content",
+                    template: `<ng-content></ng-content>`,
+                    standalone: true,
+                    host: {
+                        class: 'ids-header-1177-pro__skip-to-content'
+                    }
+                }]
+        }] });
 
-class IDHeader1177ProNavComponent {
-    cdRef;
-    template;
-    text = null;
-    navItemList;
-    navItems;
-    navRegionPickerMobile;
-    navAvatarMobile;
-    constructor(cdRef) {
-        this.cdRef = cdRef;
-    }
-    itemsDone = false;
-    ngAfterContentInit() {
-        this.updateNavItemsArray();
-        this.navItemList.changes.subscribe(() => {
-            this.updateNavItemsArray();
-        });
-    }
-    updateNavItemsArray() {
-        setTimeout(() => {
-            this.navItems = this.navItemList.toArray();
-            this.cdRef.detectChanges();
-            this.itemsDone = true;
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IDHeader1177ProNavComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: IDHeader1177ProNavComponent, isStandalone: true, selector: "id-header-1177-pro-nav", inputs: { text: "text" }, queries: [{ propertyName: "navRegionPickerMobile", first: true, predicate: IDHeader1177ProRegionPickerMobileComponent, descendants: true }, { propertyName: "navAvatarMobile", first: true, predicate: IDHeader1177ProAvatarMobileComponent, descendants: true }, { propertyName: "navItemList", predicate: IDHeader1177ProNavItemComponent }], viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: "<ng-template>\n  <ids-header-1177-pro-nav-item\n    *ngFor=\"let navItem of navItems\"\n    [label]=\"navItem.label\"\n    [notifications]=\"navItem.notifications\"\n    [active]=\"navItem.active\"\n    [expanded]=\"navItem.expanded\">\n    <ng-container *ngTemplateOutlet=\"navItem.template\"></ng-container>\n  </ids-header-1177-pro-nav-item>\n\n  <ids-header-1177-pro-region-picker-mobile\n    *ngIf=\"itemsDone && navRegionPickerMobile\"\n    slot=\"mobile-nav\"\n    [attr.text]=\"navRegionPickerMobile.text\"\n    [attr.expanded]=\"navRegionPickerMobile.expanded ? 'true' : null\"\n    (didToggleRegion)=\"navRegionPickerMobile.onDidToggleRegion.emit(true)\">\n    <ng-container *ngTemplateOutlet=\"navRegionPickerMobile.template\"></ng-container>\n  </ids-header-1177-pro-region-picker-mobile>\n\n  <ids-header-1177-pro-avatar-mobile\n    *ngIf=\"itemsDone && navAvatarMobile\"\n    slot=\"mobile-nav\"\n    [attr.expanded]=\"navAvatarMobile.expanded ? 'true' : null\"\n    [attr.username]=\"navAvatarMobile.username\"\n    [attr.unit]=\"navAvatarMobile.unit\">\n    <ng-container *ngTemplateOutlet=\"navAvatarMobile.template\"></ng-container>\n  </ids-header-1177-pro-avatar-mobile>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+class IDHeader1177ProItemComponent {
+    mobile = false;
+    icon;
+    header = inject(ID_HEADER_CONTEXT, { optional: true, host: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IDHeader1177ProItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.14", type: IDHeader1177ProItemComponent, isStandalone: true, selector: "id-header-1177-pro-item", inputs: { mobile: ["mobile", "mobile", booleanAttribute], icon: "icon" }, host: { properties: { "class.ids-header-1177-pro-item--unresponsive": "header?.unresponsive", "class.ids-header-1177-pro-item--mobile": "mobile" }, classAttribute: "ids-header-1177-pro-item" }, ngImport: i0, template: `
+    <div class="ids-header-1177-pro-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: "18.2.14", ngImport: i0, type: IDHeader1177ProNavComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IDHeader1177ProItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: "id-header-1177-pro-nav", standalone: true, schemas: [CUSTOM_ELEMENTS_SCHEMA], imports: [CommonModule], template: "<ng-template>\n  <ids-header-1177-pro-nav-item\n    *ngFor=\"let navItem of navItems\"\n    [label]=\"navItem.label\"\n    [notifications]=\"navItem.notifications\"\n    [active]=\"navItem.active\"\n    [expanded]=\"navItem.expanded\">\n    <ng-container *ngTemplateOutlet=\"navItem.template\"></ng-container>\n  </ids-header-1177-pro-nav-item>\n\n  <ids-header-1177-pro-region-picker-mobile\n    *ngIf=\"itemsDone && navRegionPickerMobile\"\n    slot=\"mobile-nav\"\n    [attr.text]=\"navRegionPickerMobile.text\"\n    [attr.expanded]=\"navRegionPickerMobile.expanded ? 'true' : null\"\n    (didToggleRegion)=\"navRegionPickerMobile.onDidToggleRegion.emit(true)\">\n    <ng-container *ngTemplateOutlet=\"navRegionPickerMobile.template\"></ng-container>\n  </ids-header-1177-pro-region-picker-mobile>\n\n  <ids-header-1177-pro-avatar-mobile\n    *ngIf=\"itemsDone && navAvatarMobile\"\n    slot=\"mobile-nav\"\n    [attr.expanded]=\"navAvatarMobile.expanded ? 'true' : null\"\n    [attr.username]=\"navAvatarMobile.username\"\n    [attr.unit]=\"navAvatarMobile.unit\">\n    <ng-container *ngTemplateOutlet=\"navAvatarMobile.template\"></ng-container>\n  </ids-header-1177-pro-avatar-mobile>\n</ng-template>\n" }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { template: [{
-                type: ViewChild,
-                args: [TemplateRef]
-            }], text: [{
+            args: [{
+                    selector: 'id-header-1177-pro-item',
+                    template: `
+    <div class="ids-header-1177-pro-item-icon">
+      <ng-content name=[icon]></ng-content>
+      <span class="ids-icon-{{icon}}" aria-hidden="true"></span>
+    </div>
+    <ng-content></ng-content>`,
+                    standalone: true,
+                    host: {
+                        class: 'ids-header-1177-pro-item',
+                        '[class.ids-header-1177-pro-item--unresponsive]': 'header?.unresponsive',
+                        '[class.ids-header-1177-pro-item--mobile]': 'mobile'
+                    }
+                }]
+        }], propDecorators: { mobile: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], icon: [{
                 type: Input
-            }], navItemList: [{
-                type: ContentChildren,
-                args: [IDHeader1177ProNavItemComponent]
-            }], navRegionPickerMobile: [{
-                type: ContentChild,
-                args: [IDHeader1177ProRegionPickerMobileComponent]
-            }], navAvatarMobile: [{
-                type: ContentChild,
-                args: [IDHeader1177ProAvatarMobileComponent]
             }] } });
 
 class IDHeader1177ProMenuMobileComponent {
-    template;
+    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: "18.2.14", ngImport: i0, type: IDHeader1177ProMenuMobileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: IDHeader1177ProMenuMobileComponent, isStandalone: true, selector: "id-header-1177-pro-menu-mobile", viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: "<ng-template>\n  <ng-content></ng-content>\n</ng-template>" });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: IDHeader1177ProMenuMobileComponent, isStandalone: true, selector: "id-header-1177-pro-menu-mobile", inputs: { expanded: ["expanded", "expanded", booleanAttribute] }, host: { classAttribute: "ids-header-1177-pro__mobile-menu" }, ngImport: i0, template: `
+  <div 
+    class="ids-header-1177-pro-menu-mobile"
+    [class.ids-header-1177-pro-menu-mobile--unresponsive]="header?.unresponsive"
+    [class.ids-header-1177-pro-menu-mobile--expanded]="expanded">
+    <button 
+      (click)="toggleExpansion()"
+      aria-label="Meny"
+      [attr.aria-expanded]="expanded" 
+      class="ids-header-1177-pro-menu-mobile__button">
+      <div class="ids-hamburger">
+        <span class="ids-hamburger__lines"></span>
+      </div>
+    </button>
+    @if(expanded) {
+      <nav class="ids-header-1177-pro-menu-mobile__items">
+        <ng-content select="id-mobile-menu"></ng-content>
+      </nav>
+      }
+  </div>`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IDHeader1177ProMenuMobileComponent, decorators: [{
             type: Component,
-            args: [{ selector: "id-header-1177-pro-menu-mobile", schemas: [CUSTOM_ELEMENTS_SCHEMA], standalone: true, template: "<ng-template>\n  <ng-content></ng-content>\n</ng-template>" }]
-        }], propDecorators: { template: [{
-                type: ViewChild,
-                args: [TemplateRef]
+            args: [{
+                    selector: "id-header-1177-pro-menu-mobile",
+                    template: `
+  <div 
+    class="ids-header-1177-pro-menu-mobile"
+    [class.ids-header-1177-pro-menu-mobile--unresponsive]="header?.unresponsive"
+    [class.ids-header-1177-pro-menu-mobile--expanded]="expanded">
+    <button 
+      (click)="toggleExpansion()"
+      aria-label="Meny"
+      [attr.aria-expanded]="expanded" 
+      class="ids-header-1177-pro-menu-mobile__button">
+      <div class="ids-hamburger">
+        <span class="ids-hamburger__lines"></span>
+      </div>
+    </button>
+    @if(expanded) {
+      <nav class="ids-header-1177-pro-menu-mobile__items">
+        <ng-content select="id-mobile-menu"></ng-content>
+      </nav>
+      }
+  </div>`,
+                    standalone: true,
+                    host: {
+                        class: 'ids-header-1177-pro__mobile-menu',
+                    }
+                }]
+        }], propDecorators: { expanded: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }] } });
 
-class IDHeader1177ProComponent {
-    cdRef;
-    text = null;
-    hideregionpicker = false;
+class IDHeader1177ProAvatarMobileComponent {
+    username;
+    unit;
     expanded = false;
-    logohref = null;
-    logotext = null;
-    onDidToggleRegion = new EventEmitter();
-    constructor(cdRef) {
-        this.cdRef = cdRef;
+    persistent = false;
+    expandedChange = new EventEmitter();
+    opened = new EventEmitter();
+    closed = new EventEmitter();
+    idService = inject(IDUseIdService);
+    contentId = this.idService.generateId('header-1177-pro-avatar');
+    header = inject(ID_HEADER_CONTEXT, { optional: true, host: true });
+    constructor() {
+        useEscapeKey(() => this.handleCloseEvent(), () => this.expanded);
     }
-    // Header items
-    itemList;
-    items;
-    // Header mobile menu
-    menuMobile;
-    // Header Avatar
-    avatar;
-    // Header Avatar
-    avatarMobile;
-    // Header nav
-    nav;
-    itemsDone = false;
-    ngAfterContentInit() {
-        this.updateItemsArray();
-        this.itemList.changes.subscribe(() => {
-            this.updateItemsArray();
-        });
+    handleCloseEvent() {
+        if (!this.persistent) {
+            this.closeAvatar();
+        }
+    }
+    closeAvatar() {
+        this.expanded = false;
+        this.expandedChange.emit(false);
+        this.closed.emit();
     }
-    updateItemsArray() {
-        setTimeout(() => {
-            this.items = this.itemList.toArray();
-            this.cdRef.detectChanges();
-            this.itemsDone = true;
-        });
+    toggleAvatar() {
+        this.expanded = !this.expanded;
+        this.expandedChange.emit(this.expanded);
+        if (this.expanded) {
+            this.opened.emit();
+        }
+        else {
+            this.closed.emit();
+        }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IDHeader1177ProComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: IDHeader1177ProComponent, isStandalone: true, selector: "id-header-1177-pro", inputs: { text: "text", hideregionpicker: "hideregionpicker", expanded: "expanded", logohref: "logohref", logotext: "logotext" }, outputs: { onDidToggleRegion: "onDidToggleRegion" }, queries: [{ propertyName: "menuMobile", first: true, predicate: IDHeader1177ProMenuMobileComponent, descendants: true }, { propertyName: "avatar", first: true, predicate: IDHeader1177ProAvatarComponent, descendants: true }, { propertyName: "avatarMobile", first: true, predicate: IDHeader1177ProAvatarMobileComponent, descendants: true }, { propertyName: "nav", first: true, predicate: IDHeader1177ProNavComponent, descendants: true }, { propertyName: "itemList", predicate: IDHeader1177ProItemComponent }], ngImport: i0, template: "<ids-header-1177-pro\n  [attr.text]=\"text\"\n  [attr.expanded]=\"expanded ? 'true' : null\"\n  [attr.logohref]=\"logohref\"\n  [attr.logotext]=\"logotext\"\n  (didToggleRegion)=\"onDidToggleRegion.emit(true)\">\n  <ids-header-1177-pro-avatar\n    *ngIf=\"itemsDone && avatar\"\n    [username]=\"avatar.username\"\n    [unit]=\"avatar.unit\"\n    [expanded]=\"avatar.expanded\"\n    [persistent]=\"avatar.persistent\">\n    <ng-container *ngTemplateOutlet=\"avatar.template\"></ng-container>\n  </ids-header-1177-pro-avatar>\n\n  <ids-header-1177-pro-item *ngFor=\"let item of items\" [mobile]=\"item.mobile ? true : null\">\n    <ng-container *ngTemplateOutlet=\"item.template\"></ng-container>\n  </ids-header-1177-pro-item>\n\n  <ids-header-1177-pro-menu-mobile *ngIf=\"itemsDone && menuMobile\" slot=\"mobile-menu\">\n    <ng-container *ngTemplateOutlet=\"menuMobile.template\"></ng-container>\n  </ids-header-1177-pro-menu-mobile>\n\n  <ids-header-1177-pro-nav *ngIf=\"itemsDone && nav\" [attr.text]=\"text\">\n    <ng-container *ngTemplateOutlet=\"nav.template\"></ng-container>\n  </ids-header-1177-pro-nav>\n\n  <ng-content></ng-content>\n</ids-header-1177-pro>\n", styles: ["::ng-deep [slot=region],::ng-deep [slot=region-desktop]{display:flex!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IDHeader1177ProAvatarMobileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: IDHeader1177ProAvatarMobileComponent, isStandalone: true, selector: "id-header-1177-pro-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-1177-pro-avatar-mobile" }, ngImport: i0, template: `
+    <div class="ids-header-1177-pro-avatar-mobile__menu-wrapper"
+    idClickOutside
+    (idClickOutside)="handleCloseEvent()">
+      <button
+        class="ids-header-1177-pro-avatar-mobile__button"
+        (click)="toggleAvatar()"
+        [attr.aria-controls]="contentId"
+        [class.ids-header-1177-pro-avatar-mobile__button--expanded]="expanded"
+        [attr.aria-expanded]="expanded">
+          <div 
+            class="ids-header-1177-pro-avatar-mobile-content__name"
+            [attr.title]="username">
+            {{username}}
+          </div>
+      </button>
+      <div 
+        class="ids-header-1177-pro-avatar-mobile__menu"
+        [attr.id]="contentId"
+        [class.ids-header-1177-pro-avatar-mobile__menu--expanded]="expanded">
+        @if(unit) {
+          <div class="ids-header-1177-pro-avatar-mobile__unit">{{unit}}</div>
+        }
+          <div class="ids-header-1177-pro-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: "18.2.14", ngImport: i0, type: IDHeader1177ProComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IDHeader1177ProAvatarMobileComponent, decorators: [{
             type: Component,
-            args: [{ selector: "id-header-1177-pro", standalone: true, schemas: [CUSTOM_ELEMENTS_SCHEMA], imports: [CommonModule], template: "<ids-header-1177-pro\n  [attr.text]=\"text\"\n  [attr.expanded]=\"expanded ? 'true' : null\"\n  [attr.logohref]=\"logohref\"\n  [attr.logotext]=\"logotext\"\n  (didToggleRegion)=\"onDidToggleRegion.emit(true)\">\n  <ids-header-1177-pro-avatar\n    *ngIf=\"itemsDone && avatar\"\n    [username]=\"avatar.username\"\n    [unit]=\"avatar.unit\"\n    [expanded]=\"avatar.expanded\"\n    [persistent]=\"avatar.persistent\">\n    <ng-container *ngTemplateOutlet=\"avatar.template\"></ng-container>\n  </ids-header-1177-pro-avatar>\n\n  <ids-header-1177-pro-item *ngFor=\"let item of items\" [mobile]=\"item.mobile ? true : null\">\n    <ng-container *ngTemplateOutlet=\"item.template\"></ng-container>\n  </ids-header-1177-pro-item>\n\n  <ids-header-1177-pro-menu-mobile *ngIf=\"itemsDone && menuMobile\" slot=\"mobile-menu\">\n    <ng-container *ngTemplateOutlet=\"menuMobile.template\"></ng-container>\n  </ids-header-1177-pro-menu-mobile>\n\n  <ids-header-1177-pro-nav *ngIf=\"itemsDone && nav\" [attr.text]=\"text\">\n    <ng-container *ngTemplateOutlet=\"nav.template\"></ng-container>\n  </ids-header-1177-pro-nav>\n\n  <ng-content></ng-content>\n</ids-header-1177-pro>\n", styles: ["::ng-deep [slot=region],::ng-deep [slot=region-desktop]{display:flex!important}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { text: [{
+            args: [{
+                    selector: "id-header-1177-pro-avatar-mobile",
+                    template: `
+    <div class="ids-header-1177-pro-avatar-mobile__menu-wrapper"
+    idClickOutside
+    (idClickOutside)="handleCloseEvent()">
+      <button
+        class="ids-header-1177-pro-avatar-mobile__button"
+        (click)="toggleAvatar()"
+        [attr.aria-controls]="contentId"
+        [class.ids-header-1177-pro-avatar-mobile__button--expanded]="expanded"
+        [attr.aria-expanded]="expanded">
+          <div 
+            class="ids-header-1177-pro-avatar-mobile-content__name"
+            [attr.title]="username">
+            {{username}}
+          </div>
+      </button>
+      <div 
+        class="ids-header-1177-pro-avatar-mobile__menu"
+        [attr.id]="contentId"
+        [class.ids-header-1177-pro-avatar-mobile__menu--expanded]="expanded">
+        @if(unit) {
+          <div class="ids-header-1177-pro-avatar-mobile__unit">{{unit}}</div>
+        }
+          <div class="ids-header-1177-pro-avatar-mobile__menu-links"> 
+            <ng-content></ng-content>
+        </div>
+      </div>
+    </div>
+  `,
+                    standalone: true,
+                    imports: [IDClickOutsideDirective],
+                    host: {
+                        class: 'ids-header-1177-pro-avatar-mobile'
+                    }
+                }]
+        }], ctorParameters: () => [], propDecorators: { username: [{
                 type: Input
-            }], hideregionpicker: [{
+            }], 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 IDHeader1177ProNavItemComponent {
+    label;
+    active = false;
+    activeChange = new EventEmitter();
+    expanded = false;
+    expandedChange = new EventEmitter();
+    col1 = null;
+    col2 = null;
+    col3 = null;
+    col4 = null;
+    idService = inject(IDUseIdService);
+    contentId = this.idService.generateId('header-1177-pro-nav-item');
+    header = inject(ID_HEADER_CONTEXT, { optional: true, host: true });
+    constructor() {
+        useEscapeKey(() => this.closeItem(), () => this.expanded);
+    }
+    toggleExpansion() {
+        if (this.expanded) {
+            this.closeItem();
+        }
+        else {
+            this.expandItem();
+        }
+    }
+    expandItem() {
+        this.active = true;
+        this.expanded = true;
+        this.expandedChange.emit(true);
+        this.activeChange.emit(true);
+    }
+    closeItem() {
+        this.active = false;
+        this.expanded = false;
+        this.expandedChange.emit(false);
+        this.activeChange.emit(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IDHeader1177ProNavItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: IDHeader1177ProNavItemComponent, isStandalone: true, selector: "id-header-1177-pro-nav-item", inputs: { label: "label", active: ["active", "active", booleanAttribute], expanded: ["expanded", "expanded", booleanAttribute] }, outputs: { activeChange: "activeChange", expandedChange: "expandedChange" }, host: { properties: { "class.ids-header-1177-pro-nav-item--unresponsive": "header?.unresponsive", "class.ids-header-1177-pro-nav-item--active": "active", "attr.aria-current": "active", "class.ids-header-1177-pro-nav-item--expanded": "expanded" }, classAttribute: "ids-header-1177-pro-nav-item" }, queries: [{ propertyName: "col1", first: true, predicate: ["col1"], descendants: true }, { propertyName: "col2", first: true, predicate: ["col2"], descendants: true }, { propertyName: "col3", first: true, predicate: ["col3"], descendants: true }, { propertyName: "col4", first: true, predicate: ["col4"], descendants: true }], ngImport: i0, template: `
+  <div
+    idClickOutside
+    (idClickOutside)="closeItem()">
+    @if (this.label) {
+      <button
+        [attr.aria-controls]="contentId"
+        [attr.aria-expanded]="expanded"
+        class="ids-header-1177-pro-nav-item__button"
+        (click)="toggleExpansion()">
+        {{label}}
+      </button>
+    } @else {
+      <span class="ids-header-1177-pro-nav-item__link">
+        <ng-content select="[link]"></ng-content>
+      </span>
+    }
+    <div [attr.id]="contentId" 
+      class="ids-header-1177-pro-nav-item__menu"
+      [class.ids-header-1177-pro-nav-item__menu--expanded]="expanded">
+      <div class="ids-header-1177-pro-nav-item__menu-content">
+        <div class="ids-header-1177-pro-nav-item__menu-col-1">
+          <ng-container *ngTemplateOutlet="col1"></ng-container>
+        </div>
+        <div class="ids-header-1177-pro-nav-item__menu-col-2">
+          <ng-container *ngTemplateOutlet="col2"></ng-container>
+        </div>
+        <div class="ids-header-1177-pro-nav-item__menu-col-3">
+          <ng-container *ngTemplateOutlet="col3"></ng-container>
+        </div>
+        <div class="ids-header-1177-pro-nav-item__menu-col-4">
+          <ng-container *ngTemplateOutlet="col4"></ng-container>
+        </div>
+      </div>
+    </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: "18.2.14", ngImport: i0, type: IDHeader1177ProNavItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "id-header-1177-pro-nav-item",
+                    template: `
+  <div
+    idClickOutside
+    (idClickOutside)="closeItem()">
+    @if (this.label) {
+      <button
+        [attr.aria-controls]="contentId"
+        [attr.aria-expanded]="expanded"
+        class="ids-header-1177-pro-nav-item__button"
+        (click)="toggleExpansion()">
+        {{label}}
+      </button>
+    } @else {
+      <span class="ids-header-1177-pro-nav-item__link">
+        <ng-content select="[link]"></ng-content>
+      </span>
+    }
+    <div [attr.id]="contentId" 
+      class="ids-header-1177-pro-nav-item__menu"
+      [class.ids-header-1177-pro-nav-item__menu--expanded]="expanded">
+      <div class="ids-header-1177-pro-nav-item__menu-content">
+        <div class="ids-header-1177-pro-nav-item__menu-col-1">
+          <ng-container *ngTemplateOutlet="col1"></ng-container>
+        </div>
+        <div class="ids-header-1177-pro-nav-item__menu-col-2">
+          <ng-container *ngTemplateOutlet="col2"></ng-container>
+        </div>
+        <div class="ids-header-1177-pro-nav-item__menu-col-3">
+          <ng-container *ngTemplateOutlet="col3"></ng-container>
+        </div>
+        <div class="ids-header-1177-pro-nav-item__menu-col-4">
+          <ng-container *ngTemplateOutlet="col4"></ng-container>
+        </div>
+      </div>
+    </div>
+  </div>`,
+                    imports: [IDClickOutsideDirective, NgTemplateOutlet],
+                    standalone: true,
+                    host: {
+                        class: 'ids-header-1177-pro-nav-item',
+                        '[class.ids-header-1177-pro-nav-item--unresponsive]': 'header?.unresponsive',
+                        '[class.ids-header-1177-pro-nav-item--active]': 'active',
+                        '[attr.aria-current]': 'active',
+                        '[class.ids-header-1177-pro-nav-item--expanded]': 'expanded'
+                    }
+                }]
+        }], ctorParameters: () => [], propDecorators: { label: [{
                 type: Input
-            }], logohref: [{
-                type: Input
-            }], logotext: [{
-                type: Input
-            }], onDidToggleRegion: [{
+            }], active: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], activeChange: [{
+                type: Output
+            }], expanded: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], expandedChange: [{
                 type: Output
-            }], itemList: [{
-                type: ContentChildren,
-                args: [IDHeader1177ProItemComponent]
-            }], menuMobile: [{
+            }], col1: [{
                 type: ContentChild,
-                args: [IDHeader1177ProMenuMobileComponent]
-            }], avatar: [{
+                args: ['col1']
+            }], col2: [{
                 type: ContentChild,
-                args: [IDHeader1177ProAvatarComponent]
-            }], avatarMobile: [{
+                args: ['col2']
+            }], col3: [{
                 type: ContentChild,
-                args: [IDHeader1177ProAvatarMobileComponent]
-            }], nav: [{
+                args: ['col3']
+            }], col4: [{
                 type: ContentChild,
-                args: [IDHeader1177ProNavComponent]
+                args: ['col4']
+            }] } });
+
+class IDHeader1177ProNavItemMenuLinkComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IDHeader1177ProNavItemMenuLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: IDHeader1177ProNavItemMenuLinkComponent, isStandalone: true, selector: "id-header-1177-pro-nav-item-menu-link", host: { classAttribute: "ids-header-1177-pro-nav__menu-item-wrapper" }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IDHeader1177ProNavItemMenuLinkComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "id-header-1177-pro-nav-item-menu-link",
+                    template: `<ng-content></ng-content>`,
+                    standalone: true,
+                    host: {
+                        class: 'ids-header-1177-pro-nav__menu-item-wrapper'
+                    }
+                }]
+        }] });
+
+class IDHeader1177ProNavItemMobileComponent {
+    icon;
+    header = inject(ID_HEADER_CONTEXT, { optional: true, host: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IDHeader1177ProNavItemMobileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: IDHeader1177ProNavItemMobileComponent, isStandalone: true, selector: "id-header-1177-pro-nav-item-mobile", inputs: { icon: "icon" }, host: { properties: { "class.ids-header-1177-pro-nav-item-mobile--unresponsive": "header?.unresponsive" }, classAttribute: "ids-header-1177-pro-nav-item-mobile" }, ngImport: i0, template: `
+    <span class="ids-header-1177-pro-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: "18.2.14", ngImport: i0, type: IDHeader1177ProNavItemMobileComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "id-header-1177-pro-nav-item-mobile",
+                    template: `
+    <span class="ids-header-1177-pro-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-1177-pro-nav-item-mobile',
+                        '[class.ids-header-1177-pro-nav-item-mobile--unresponsive]': 'header?.unresponsive'
+                    }
+                }]
+        }], propDecorators: { icon: [{
+                type: Input
             }] } });
 
 class IDHeader1177ProRegionPickerComponent {
-    text = null;
-    mobile = false;
+    text = "Välj region";
     expanded = false;
-    onDidToggleRegion = new EventEmitter();
+    regionSelected = false;
+    expandedChange = new EventEmitter();
+    opened = new EventEmitter();
+    closed = new EventEmitter();
+    regionIcon;
     template;
+    toggleRegion() {
+        this.expanded = !this.expanded;
+        this.expandedChange.emit(this.expanded);
+        if (this.expanded) {
+            this.opened.emit();
+        }
+        else {
+            this.closed.emit();
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IDHeader1177ProRegionPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: IDHeader1177ProRegionPickerComponent, isStandalone: true, selector: "id-header-1177-pro-region-picker", inputs: { text: "text", mobile: "mobile", expanded: "expanded" }, outputs: { onDidToggleRegion: "onDidToggleRegion" }, viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: "<ids-header-1177-pro-region-picker\n  [attr.mobile]=\"mobile ? 'true' : null\"\n  [attr.text]=\"text\"\n  [attr.expanded]=\"expanded ? 'true' : null\"\n  (didToggleRegion)=\"onDidToggleRegion.emit(true)\">\n  <ng-content></ng-content>\n</ids-header-1177-pro-region-picker>\n", styles: [":host{display:contents}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.14", type: IDHeader1177ProRegionPickerComponent, isStandalone: true, selector: "id-header-1177-pro-region-picker", inputs: { text: "text", expanded: ["expanded", "expanded", booleanAttribute], regionSelected: ["regionSelected", "regionSelected", booleanAttribute] }, outputs: { expandedChange: "expandedChange", opened: "opened", closed: "closed" }, host: { classAttribute: "ids-header-1177__region-picker" }, queries: [{ propertyName: "regionIcon", first: true, predicate: IDRegionIconComponent, descendants: true }], viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: `
+    <div class="ids-header-1177-pro-region-picker"
+      [class.ids-header-1177-pro-region-picker--selected-region]="regionIcon || regionSelected">
+      <div class="ids-header-1177-pro-region-picker__region-icon">
+        <ng-content></ng-content>
+      </div>
+      <div class="ids-header-1177-pro-region-picker__selector">
+        <button 
+          (click)="toggleRegion()"
+          class="ids-header-1177-pro-region-picker__button"
+          [class.ids-header-1177-pro-region-picker__button--expanded]="expanded">
+          {{text}}
+        </button>
+      </div>
+    </div>`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IDHeader1177ProRegionPickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: "id-header-1177-pro-region-picker", schemas: [CUSTOM_ELEMENTS_SCHEMA], standalone: true, template: "<ids-header-1177-pro-region-picker\n  [attr.mobile]=\"mobile ? 'true' : null\"\n  [attr.text]=\"text\"\n  [attr.expanded]=\"expanded ? 'true' : null\"\n  (didToggleRegion)=\"onDidToggleRegion.emit(true)\">\n  <ng-content></ng-content>\n</ids-header-1177-pro-region-picker>\n", styles: [":host{display:contents}\n"] }]
+            args: [{
+                    selector: "id-header-1177-pro-region-picker",
+                    template: `
+    <div class="ids-header-1177-pro-region-picker"
+      [class.ids-header-1177-pro-region-picker--selected-region]="regionIcon || regionSelected">
+      <div class="ids-header-1177-pro-region-picker__region-icon">
+        <ng-content></ng-content>
+      </div>
+      <div class="ids-header-1177-pro-region-picker__selector">
+        <button 
+          (click)="toggleRegion()"
+          class="ids-header-1177-pro-region-picker__button"
+          [class.ids-header-1177-pro-region-picker__button--expanded]="expanded">
+          {{text}}
+        </button>
+      </div>
+    </div>`,
+                    standalone: true,
+                    host: {
+                        class: 'ids-header-1177__region-picker'
+                    }
+                }]
         }], propDecorators: { text: [{
                 type: Input
-            }], mobile: [{
-                type: Input
             }], expanded: [{
-                type: Input
-            }], onDidToggleRegion: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], regionSelected: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], expandedChange: [{
                 type: Output
+            }], opened: [{
+                type: Output
+            }], closed: [{
+                type: Output
+            }], regionIcon: [{
+                type: ContentChild,
+                args: [IDRegionIconComponent]
             }], template: [{
                 type: ViewChild,
                 args: [TemplateRef]
             }] } });
 
+class IDHeader1177ProRegionPickerMobileComponent {
+    text = "Välj region";
+    expanded = false;
+    regionSelected = false;
+    regionIcon;
+    expandedChange = new EventEmitter();
+    opened = new EventEmitter();
+    closed = new EventEmitter();
+    toggleExpansion() {
+        this.expanded = !this.expanded;
+        this.expandedChange.emit(this.expanded);
+        if (this.expanded) {
+            this.opened.emit();
+        }
+        else {
+            this.closed.emit();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IDHeader1177ProRegionPickerMobileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.14", type: IDHeader1177ProRegionPickerMobileComponent, isStandalone: true, selector: "id-header-1177-pro-region-picker-mobile", inputs: { text: "text", expanded: ["expanded", "expanded", booleanAttribute], regionSelected: ["regionSelected", "regionSelected", booleanAttribute] }, outputs: { expandedChange: "expandedChange", opened: "opened", closed: "closed" }, queries: [{ propertyName: "regionIcon", first: true, predicate: IDRegionIconComponent, descendants: true }], ngImport: i0, template: `
+  <div class="ids-header-1177-pro-region-picker-mobile"
+    [class.ids-header-1177-pro-region-picker-mobile--selected-region]="regionIcon || regionSelected">
+    <button 
+      (click)="toggleExpansion()"
+      class="ids-header-1177-pro-region-picker-mobile__button"
+      [class.ids-header-1177-pro-region-picker-mobile__button--expanded]="expanded"
+      [attr.aria-label]="text">
+      <div class="ids-header-1177-pro-region-picker-mobile__region-icon">
+        <ng-content></ng-content>
+      </div>
+      <span class="ids-header-1177-pro-region-picker-mobile__button-text"> {{text}}</span>
+    </button>
+  </div>`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IDHeader1177ProRegionPickerMobileComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "id-header-1177-pro-region-picker-mobile",
+                    template: `
+  <div class="ids-header-1177-pro-region-picker-mobile"
+    [class.ids-header-1177-pro-region-picker-mobile--selected-region]="regionIcon || regionSelected">
+    <button 
+      (click)="toggleExpansion()"
+      class="ids-header-1177-pro-region-picker-mobile__button"
+      [class.ids-header-1177-pro-region-picker-mobile__button--expanded]="expanded"
+      [attr.aria-label]="text">
+      <div class="ids-header-1177-pro-region-picker-mobile__region-icon">
+        <ng-content></ng-content>
+      </div>
+      <span class="ids-header-1177-pro-region-picker-mobile__button-text"> {{text}}</span>
+    </button>
+  </div>`,
+                    standalone: true
+                }]
+        }], propDecorators: { text: [{
+                type: Input
+            }], expanded: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], regionSelected: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], regionIcon: [{
+                type: ContentChild,
+                args: [IDRegionIconComponent]
+            }], expandedChange: [{
+                type: Output
+            }], opened: [{
+                type: Output
+            }], closed: [{
+                type: Output
+            }] } });
+
+class IDHeader1177ProModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IDHeader1177ProModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: IDHeader1177ProModule, imports: [IDHeader1177ProComponent,
+            IDHeader1177ProAvatarComponent,
+            IDHeader1177ProAvatarMobileComponent,
+            IDHeader1177ProItemComponent,
+            IDHeader1177ProNavComponent,
+            IDHeader1177ProNavItemComponent,
+            IDHeader1177ProNavItemMobileComponent,
+            IDHeader1177ProMenuMobileComponent,
+            IDHeader1177ProSkipToContent,
+            IDHeader1177ProNavItemMenuLinkComponent,
+            IDHeader1177ProBrandLinkDirective,
+            IDHeader1177ProRegionPickerComponent,
+            IDHeader1177ProRegionPickerMobileComponent], exports: [IDHeader1177ProComponent,
+            IDHeader1177ProAvatarComponent,
+            IDHeader1177ProAvatarMobileComponent,
+            IDHeader1177ProItemComponent,
+            IDHeader1177ProNavComponent,
+            IDHeader1177ProNavItemComponent,
+            IDHeader1177ProNavItemMobileComponent,
+            IDHeader1177ProMenuMobileComponent,
+            IDHeader1177ProSkipToContent,
+            IDHeader1177ProNavItemMenuLinkComponent,
+            IDHeader1177ProBrandLinkDirective,
+            IDHeader1177ProRegionPickerComponent,
+            IDHeader1177ProRegionPickerMobileComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IDHeader1177ProModule });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IDHeader1177ProModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        IDHeader1177ProComponent,
+                        IDHeader1177ProAvatarComponent,
+                        IDHeader1177ProAvatarMobileComponent,
+                        IDHeader1177ProItemComponent,
+                        IDHeader1177ProNavComponent,
+                        IDHeader1177ProNavItemComponent,
+                        IDHeader1177ProNavItemMobileComponent,
+                        IDHeader1177ProMenuMobileComponent,
+                        IDHeader1177ProSkipToContent,
+                        IDHeader1177ProNavItemMenuLinkComponent,
+                        IDHeader1177ProBrandLinkDirective,
+                        IDHeader1177ProRegionPickerComponent,
+                        IDHeader1177ProRegionPickerMobileComponent
+                    ],
+                    exports: [
+                        IDHeader1177ProComponent,
+                        IDHeader1177ProAvatarComponent,
+                        IDHeader1177ProAvatarMobileComponent,
+                        IDHeader1177ProItemComponent,
+                        IDHeader1177ProNavComponent,
+                        IDHeader1177ProNavItemComponent,
+                        IDHeader1177ProNavItemMobileComponent,
+                        IDHeader1177ProMenuMobileComponent,
+                        IDHeader1177ProSkipToContent,
+                        IDHeader1177ProNavItemMenuLinkComponent,
+                        IDHeader1177ProBrandLinkDirective,
+                        IDHeader1177ProRegionPickerComponent,
+                        IDHeader1177ProRegionPickerMobileComponent
+                    ],
+                }]
+        }] });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { IDHeader1177ProAvatarComponent, IDHeader1177ProAvatarMobileComponent, IDHeader1177ProComponent, IDHeader1177ProItemComponent, IDHeader1177ProMenuMobileComponent, IDHeader1177ProNavComponent, IDHeader1177ProNavItemComponent, IDHeader1177ProRegionPickerComponent, IDHeader1177ProRegionPickerMobileComponent };
+export { IDHeader1177ProAvatarComponent, IDHeader1177ProAvatarMobileComponent, IDHeader1177ProBrandLinkDirective, IDHeader1177ProComponent, IDHeader1177ProItemComponent, IDHeader1177ProMenuMobileComponent, IDHeader1177ProModule, IDHeader1177ProNavComponent, IDHeader1177ProNavItemComponent, IDHeader1177ProNavItemMenuLinkComponent, IDHeader1177ProNavItemMobileComponent, IDHeader1177ProRegionPickerComponent, IDHeader1177ProRegionPickerMobileComponent, IDHeader1177ProSkipToContent };
 //# sourceMappingURL=inera-ids-angular-components-header-1177-pro.mjs.map