@inera/ids-angular 9.2.1 → 9.4.0

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, inject, booleanAttribute, ViewChild, Output, Input, Component, Directive, ContentChild, TemplateRef, NgModule } from '@angular/core';
+import { EventEmitter, inject, viewChild, booleanAttribute, Output, Input, Component, Directive, contentChild, TemplateRef, NgModule } from '@angular/core';
 import { NgTemplateOutlet } from '@angular/common';
 import { IDUseIdService, ID_HEADER_CONTEXT, useFocusTrap, useEscapeKey, IDClickOutsideDirective } from '@inera/ids-angular/common';
 import { IDRegionIconComponent } from '@inera/ids-angular/components/region-icon';
@@ -15,8 +15,8 @@ class IDHeader1177ProAvatarComponent {
     idService = inject(IDUseIdService);
     contentId = this.idService.generateId('header-1177-pro-avatar');
     header = inject(ID_HEADER_CONTEXT, { optional: true, host: true });
-    menuContent;
-    focusTrap = useFocusTrap(() => this.menuContent, { disabled: () => !this.expanded });
+    menuContent = viewChild('menuContent');
+    focusTrap = useFocusTrap(() => this.menuContent(), { disabled: () => !this.expanded });
     constructor() {
         useEscapeKey(() => this.handleCloseEvent(), () => this.expanded);
     }
@@ -46,8 +46,8 @@ class IDHeader1177ProAvatarComponent {
     ngOnDestroy() {
         this.focusTrap.destroy();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: IDHeader1177ProAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", 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" }, viewQueries: [{ propertyName: "menuContent", first: true, predicate: ["menuContent"], descendants: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: IDHeader1177ProAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", 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" }, viewQueries: [{ propertyName: "menuContent", first: true, predicate: ["menuContent"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <div class="ids-header-1177-pro-avatar__avatar"
       idClickOutside
       (idClickOutside)="handleCloseEvent()">
@@ -78,7 +78,7 @@ class IDHeader1177ProAvatarComponent {
     </div>
   `, isInline: true, dependencies: [{ kind: "directive", type: IDClickOutsideDirective, selector: "[idClickOutside]", outputs: ["idClickOutside"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: IDHeader1177ProAvatarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: IDHeader1177ProAvatarComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "id-header-1177-pro-avatar",
@@ -135,16 +135,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 type: Output
             }], closed: [{
                 type: Output
-            }], menuContent: [{
-                type: ViewChild,
-                args: ['menuContent']
             }] } });
 
 class IDHeader1177ProNavComponent {
-    hideOnTablet = false;
-    template;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: IDHeader1177ProNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.20", 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: `
+    mobileOnly = false;
+    desktopOnly = false;
+    template = viewChild.required('nav');
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: IDHeader1177ProNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.25", type: IDHeader1177ProNavComponent, isStandalone: true, selector: "id-header-1177-pro-nav", inputs: { mobileOnly: ["mobileOnly", "mobileOnly", booleanAttribute], desktopOnly: ["desktopOnly", "desktopOnly", booleanAttribute] }, viewQueries: [{ propertyName: "template", first: true, predicate: ["nav"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <ng-template #nav>
       <div class="ids-header-1177-pro-nav__inner">
         <ng-content></ng-content>
@@ -152,7 +150,7 @@ class IDHeader1177ProNavComponent {
     </ng-template>
   `, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: IDHeader1177ProNavComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: IDHeader1177ProNavComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'id-header-1177-pro-nav',
@@ -165,19 +163,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
   `,
                     standalone: true,
                 }]
-        }], propDecorators: { hideOnTablet: [{
+        }], propDecorators: { mobileOnly: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], desktopOnly: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
-            }], template: [{
-                type: ViewChild,
-                args: ['nav']
             }] } });
 
 class IDHeader1177ProBrandLinkDirective {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: IDHeader1177ProBrandLinkDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.20", type: IDHeader1177ProBrandLinkDirective, isStandalone: true, selector: "a[idBrand1177ProLink]", host: { classAttribute: "ids-header-1177-pro__logo-link" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: IDHeader1177ProBrandLinkDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: IDHeader1177ProBrandLinkDirective, isStandalone: true, selector: "a[idBrand1177ProLink]", host: { classAttribute: "ids-header-1177-pro__logo-link" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: IDHeader1177ProBrandLinkDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: IDHeader1177ProBrandLinkDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: "a[idBrand1177ProLink]",
@@ -193,25 +191,25 @@ class IDHeader1177ProComponent {
     brandHref;
     srBrandLabel = 'Logotyp';
     unresponsive = false;
-    avatar;
-    nav;
-    brandLink;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: IDHeader1177ProComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: IDHeader1177ProComponent, isStandalone: true, selector: "id-header-1177-pro", inputs: { text: "text", brandHref: "brandHref", srBrandLabel: "srBrandLabel", unresponsive: ["unresponsive", "unresponsive", booleanAttribute] }, providers: [
+    avatar = contentChild(IDHeader1177ProAvatarComponent);
+    nav = contentChild(IDHeader1177ProNavComponent);
+    brandLink = contentChild(IDHeader1177ProBrandLinkDirective);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: IDHeader1177ProComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", 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\n  class=\"ids-header-1177-pro\"\n  [class.ids-header-1177-pro--unresponsive]=\"unresponsive\"\n>\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\n            [attr.href]=\"brandHref\"\n            class=\"ids-header-1177-pro__logo-link\"\n            [attr.aria-label]=\"srBrandLabel\"\n          ></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\n      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    >\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: "avatar", first: true, predicate: IDHeader1177ProAvatarComponent, descendants: true, isSignal: true }, { propertyName: "nav", first: true, predicate: IDHeader1177ProNavComponent, descendants: true, isSignal: true }, { propertyName: "brandLink", first: true, predicate: IDHeader1177ProBrandLinkDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<header\n  class=\"ids-header-1177-pro\"\n  [class.ids-header-1177-pro--unresponsive]=\"unresponsive\"\n>\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\n            [attr.href]=\"brandHref\"\n            class=\"ids-header-1177-pro__logo-link\"\n            [attr.aria-label]=\"srBrandLabel\"\n          ></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\n      class=\"ids-header-1177-pro-nav\"\n      [class.ids-header-1177-pro-nav--unresponsive]=\"unresponsive\"\n      [class.ids-header-1177-pro-nav--mobile-only]=\"nav()!.mobileOnly\"\n      [class.ids-header-1177-pro-nav--desktop-only]=\"nav()!.desktopOnly\"\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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: IDHeader1177ProComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: IDHeader1177ProComponent, decorators: [{
             type: Component,
             args: [{ selector: 'id-header-1177-pro', providers: [
                         {
                             provide: ID_HEADER_CONTEXT,
                             useExisting: IDHeader1177ProComponent,
                         },
-                    ], standalone: true, imports: [NgTemplateOutlet], template: "<header\n  class=\"ids-header-1177-pro\"\n  [class.ids-header-1177-pro--unresponsive]=\"unresponsive\"\n>\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\n            [attr.href]=\"brandHref\"\n            class=\"ids-header-1177-pro__logo-link\"\n            [attr.aria-label]=\"srBrandLabel\"\n          ></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\n      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    >\n      <ng-container *ngTemplateOutlet=\"nav.template\"></ng-container>\n    </nav>\n  }\n</header>\n" }]
+                    ], standalone: true, imports: [NgTemplateOutlet], template: "<header\n  class=\"ids-header-1177-pro\"\n  [class.ids-header-1177-pro--unresponsive]=\"unresponsive\"\n>\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\n            [attr.href]=\"brandHref\"\n            class=\"ids-header-1177-pro__logo-link\"\n            [attr.aria-label]=\"srBrandLabel\"\n          ></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\n      class=\"ids-header-1177-pro-nav\"\n      [class.ids-header-1177-pro-nav--unresponsive]=\"unresponsive\"\n      [class.ids-header-1177-pro-nav--mobile-only]=\"nav()!.mobileOnly\"\n      [class.ids-header-1177-pro-nav--desktop-only]=\"nav()!.desktopOnly\"\n    >\n      <ng-container *ngTemplateOutlet=\"nav()!.template()\"></ng-container>\n    </nav>\n  }\n</header>\n" }]
         }], propDecorators: { text: [{
                 type: Input
             }], brandHref: [{
@@ -221,22 +219,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             }], unresponsive: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
-            }], avatar: [{
-                type: ContentChild,
-                args: [IDHeader1177ProAvatarComponent]
-            }], nav: [{
-                type: ContentChild,
-                args: [IDHeader1177ProNavComponent]
-            }], brandLink: [{
-                type: ContentChild,
-                args: [IDHeader1177ProBrandLinkDirective]
             }] } });
 
 class IDHeader1177ProSkipToContent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: IDHeader1177ProSkipToContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: IDHeader1177ProSkipToContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", 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: "19.2.20", ngImport: i0, type: IDHeader1177ProSkipToContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: IDHeader1177ProSkipToContent, decorators: [{
             type: Component,
             args: [{
                     selector: "id-header-1177-pro-skip-to-content",
@@ -252,30 +241,38 @@ class IDHeader1177ProItemComponent {
     mobile = 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: IDHeader1177ProItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.20", 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>
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: IDHeader1177ProItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.25", 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 });
+    <ng-content></ng-content>
+  `, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: IDHeader1177ProItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: IDHeader1177ProItemComponent, decorators: [{
             type: Component,
             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 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>`,
+    <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'
-                    }
+                        '[class.ids-header-1177-pro-item--mobile]': 'mobile',
+                    },
                 }]
         }], propDecorators: { mobile: [{
                 type: Input,
@@ -290,8 +287,8 @@ class IDHeader1177ProMenuMobileComponent {
     toggleExpansion() {
         this.expanded = !this.expanded;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: IDHeader1177ProMenuMobileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", 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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: IDHeader1177ProMenuMobileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", 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"
@@ -312,7 +309,7 @@ class IDHeader1177ProMenuMobileComponent {
       }
   </div>`, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: IDHeader1177ProMenuMobileComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: IDHeader1177ProMenuMobileComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "id-header-1177-pro-menu-mobile",
@@ -357,8 +354,8 @@ class IDHeader1177ProAvatarMobileComponent {
     idService = inject(IDUseIdService);
     contentId = this.idService.generateId('header-1177-pro-avatar');
     header = inject(ID_HEADER_CONTEXT, { optional: true, host: true });
-    menuContent;
-    focusTrap = useFocusTrap(() => this.menuContent, { disabled: () => !this.expanded });
+    menuContent = viewChild('menuContent');
+    focusTrap = useFocusTrap(() => this.menuContent(), { disabled: () => !this.expanded });
     constructor() {
         useEscapeKey(() => this.handleCloseEvent(), () => this.expanded);
     }
@@ -388,8 +385,8 @@ class IDHeader1177ProAvatarMobileComponent {
     ngOnDestroy() {
         this.focusTrap.destroy();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: IDHeader1177ProAvatarMobileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", 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: { properties: { "class.ids-header-1177-pro-avatar-mobile--unresponsive": "header?.unresponsive" }, classAttribute: "ids-header-1177-pro-avatar-mobile" }, viewQueries: [{ propertyName: "menuContent", first: true, predicate: ["menuContent"], descendants: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: IDHeader1177ProAvatarMobileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", 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: { properties: { "class.ids-header-1177-pro-avatar-mobile--unresponsive": "header?.unresponsive" }, classAttribute: "ids-header-1177-pro-avatar-mobile" }, viewQueries: [{ propertyName: "menuContent", first: true, predicate: ["menuContent"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <div
       #menuContent
       class="ids-header-1177-pro-avatar-mobile__menu-wrapper"
@@ -425,7 +422,7 @@ class IDHeader1177ProAvatarMobileComponent {
     </div>
   `, isInline: true, dependencies: [{ kind: "directive", type: IDClickOutsideDirective, selector: "[idClickOutside]", outputs: ["idClickOutside"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: IDHeader1177ProAvatarMobileComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: IDHeader1177ProAvatarMobileComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'id-header-1177-pro-avatar-mobile',
@@ -487,9 +484,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 type: Output
             }], closed: [{
                 type: Output
-            }], menuContent: [{
-                type: ViewChild,
-                args: ['menuContent']
             }] } });
 
 class IDHeader1177ProNavItemComponent {
@@ -498,10 +492,10 @@ class IDHeader1177ProNavItemComponent {
     activeChange = new EventEmitter();
     expanded = false;
     expandedChange = new EventEmitter();
-    col1 = null;
-    col2 = null;
-    col3 = null;
-    col4 = null;
+    col1 = contentChild('col1');
+    col2 = contentChild('col2');
+    col3 = contentChild('col3');
+    col4 = contentChild('col4');
     idService = inject(IDUseIdService);
     contentId = this.idService.generateId('header-1177-pro-nav-item');
     header = inject(ID_HEADER_CONTEXT, { optional: true, host: true });
@@ -526,8 +520,8 @@ class IDHeader1177ProNavItemComponent {
         this.expandedChange.emit(false);
         this.activeChange.emit(false);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: IDHeader1177ProNavItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", 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 || expanded", "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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: IDHeader1177ProNavItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", 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 || expanded", "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, 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()">
@@ -549,22 +543,22 @@ class IDHeader1177ProNavItemComponent {
       [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>
+          <ng-container *ngTemplateOutlet="col1() ?? null"></ng-container>
         </div>
         <div class="ids-header-1177-pro-nav-item__menu-col-2">
-          <ng-container *ngTemplateOutlet="col2"></ng-container>
+          <ng-container *ngTemplateOutlet="col2() ?? null"></ng-container>
         </div>
         <div class="ids-header-1177-pro-nav-item__menu-col-3">
-          <ng-container *ngTemplateOutlet="col3"></ng-container>
+          <ng-container *ngTemplateOutlet="col3() ?? null"></ng-container>
         </div>
         <div class="ids-header-1177-pro-nav-item__menu-col-4">
-          <ng-container *ngTemplateOutlet="col4"></ng-container>
+          <ng-container *ngTemplateOutlet="col4() ?? null"></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: "19.2.20", ngImport: i0, type: IDHeader1177ProNavItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: IDHeader1177ProNavItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "id-header-1177-pro-nav-item",
@@ -590,16 +584,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
       [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>
+          <ng-container *ngTemplateOutlet="col1() ?? null"></ng-container>
         </div>
         <div class="ids-header-1177-pro-nav-item__menu-col-2">
-          <ng-container *ngTemplateOutlet="col2"></ng-container>
+          <ng-container *ngTemplateOutlet="col2() ?? null"></ng-container>
         </div>
         <div class="ids-header-1177-pro-nav-item__menu-col-3">
-          <ng-container *ngTemplateOutlet="col3"></ng-container>
+          <ng-container *ngTemplateOutlet="col3() ?? null"></ng-container>
         </div>
         <div class="ids-header-1177-pro-nav-item__menu-col-4">
-          <ng-container *ngTemplateOutlet="col4"></ng-container>
+          <ng-container *ngTemplateOutlet="col4() ?? null"></ng-container>
         </div>
       </div>
     </div>
@@ -626,25 +620,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 args: [{ transform: booleanAttribute }]
             }], expandedChange: [{
                 type: Output
-            }], col1: [{
-                type: ContentChild,
-                args: ['col1']
-            }], col2: [{
-                type: ContentChild,
-                args: ['col2']
-            }], col3: [{
-                type: ContentChild,
-                args: ['col3']
-            }], col4: [{
-                type: ContentChild,
-                args: ['col4']
             }] } });
 
 class IDHeader1177ProNavItemMenuLinkComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: IDHeader1177ProNavItemMenuLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: IDHeader1177ProNavItemMenuLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", 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: "19.2.20", ngImport: i0, type: IDHeader1177ProNavItemMenuLinkComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: IDHeader1177ProNavItemMenuLinkComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "id-header-1177-pro-nav-item-menu-link",
@@ -659,8 +641,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
 class IDHeader1177ProNavItemMobileComponent {
     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: IDHeader1177ProNavItemMobileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", 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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: IDHeader1177ProNavItemMobileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", 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>
@@ -668,7 +650,7 @@ class IDHeader1177ProNavItemMobileComponent {
     <ng-content></ng-content>
   `, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: IDHeader1177ProNavItemMobileComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: IDHeader1177ProNavItemMobileComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "id-header-1177-pro-nav-item-mobile",
@@ -690,14 +672,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             }] } });
 
 class IDHeader1177ProRegionPickerComponent {
-    text = "Välj region";
+    text = 'Välj region';
     expanded = false;
     regionSelected = false;
     expandedChange = new EventEmitter();
     opened = new EventEmitter();
     closed = new EventEmitter();
-    regionIcon;
-    template;
+    regionIcon = contentChild(IDRegionIconComponent);
+    template = viewChild.required(TemplateRef);
     toggleRegion() {
         this.expanded = !this.expanded;
         this.expandedChange.emit(this.expanded);
@@ -708,46 +690,56 @@ class IDHeader1177ProRegionPickerComponent {
             this.closed.emit();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: IDHeader1177ProRegionPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.20", 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">
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: IDHeader1177ProRegionPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.25", 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, isSignal: true }], viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, isSignal: 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 
+        <button
           (click)="toggleRegion()"
           class="ids-header-1177-pro-region-picker__button"
-          [class.ids-header-1177-pro-region-picker__button--expanded]="expanded">
-          {{text}}
+          [attr.aria-expanded]="expanded ? 'true' : 'false'"
+          [class.ids-header-1177-pro-region-picker__button--expanded]="expanded"
+        >
+          {{ text }}
         </button>
       </div>
-    </div>`, isInline: true });
+    </div>
+  `, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: IDHeader1177ProRegionPickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: IDHeader1177ProRegionPickerComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: "id-header-1177-pro-region-picker",
+                    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"
+      [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 
+        <button
           (click)="toggleRegion()"
           class="ids-header-1177-pro-region-picker__button"
-          [class.ids-header-1177-pro-region-picker__button--expanded]="expanded">
-          {{text}}
+          [attr.aria-expanded]="expanded ? 'true' : 'false'"
+          [class.ids-header-1177-pro-region-picker__button--expanded]="expanded"
+        >
+          {{ text }}
         </button>
       </div>
-    </div>`,
+    </div>
+  `,
                     standalone: true,
                     host: {
-                        class: 'ids-header-1177__region-picker'
-                    }
+                        class: 'ids-header-1177__region-picker',
+                    },
                 }]
         }], propDecorators: { text: [{
                 type: Input
@@ -763,12 +755,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 type: Output
             }], closed: [{
                 type: Output
-            }], regionIcon: [{
-                type: ContentChild,
-                args: [IDRegionIconComponent]
-            }], template: [{
-                type: ViewChild,
-                args: [TemplateRef]
             }] } });
 
 class IDHeader1177ProRegionPickerMobileComponent {
@@ -776,7 +762,7 @@ class IDHeader1177ProRegionPickerMobileComponent {
     expanded = false;
     regionSelected = false;
     header = inject(ID_HEADER_CONTEXT, { optional: true, host: true });
-    regionIcon;
+    regionIcon = contentChild(IDRegionIconComponent);
     expandedChange = new EventEmitter();
     opened = new EventEmitter();
     closed = new EventEmitter();
@@ -790,13 +776,13 @@ class IDHeader1177ProRegionPickerMobileComponent {
             this.closed.emit();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: IDHeader1177ProRegionPickerMobileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.20", 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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: IDHeader1177ProRegionPickerMobileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.25", 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, isSignal: true }], ngImport: i0, template: `
     <div
       class="ids-header-1177-pro-region-picker-mobile"
       [class.ids-header-1177-pro-region-picker-mobile--unresponsive]="header?.unresponsive"
       [class.ids-header-1177-pro-region-picker-mobile--selected-region]="
-        regionIcon || regionSelected
+        regionIcon() || regionSelected
       "
     >
       <button
@@ -804,6 +790,7 @@ class IDHeader1177ProRegionPickerMobileComponent {
         class="ids-header-1177-pro-region-picker-mobile__button"
         [class.ids-header-1177-pro-region-picker-mobile__button--expanded]="expanded"
         [attr.aria-label]="text"
+        [attr.aria-expanded]="expanded ? 'true' : 'false'"
       >
         <div class="ids-header-1177-pro-region-picker-mobile__region-icon">
           <ng-content></ng-content>
@@ -813,7 +800,7 @@ class IDHeader1177ProRegionPickerMobileComponent {
     </div>
   `, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: IDHeader1177ProRegionPickerMobileComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: IDHeader1177ProRegionPickerMobileComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'id-header-1177-pro-region-picker-mobile',
@@ -822,7 +809,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
       class="ids-header-1177-pro-region-picker-mobile"
       [class.ids-header-1177-pro-region-picker-mobile--unresponsive]="header?.unresponsive"
       [class.ids-header-1177-pro-region-picker-mobile--selected-region]="
-        regionIcon || regionSelected
+        regionIcon() || regionSelected
       "
     >
       <button
@@ -830,6 +817,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
         class="ids-header-1177-pro-region-picker-mobile__button"
         [class.ids-header-1177-pro-region-picker-mobile__button--expanded]="expanded"
         [attr.aria-label]="text"
+        [attr.aria-expanded]="expanded ? 'true' : 'false'"
       >
         <div class="ids-header-1177-pro-region-picker-mobile__region-icon">
           <ng-content></ng-content>
@@ -848,9 +836,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             }], regionSelected: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
-            }], regionIcon: [{
-                type: ContentChild,
-                args: [IDRegionIconComponent]
             }], expandedChange: [{
                 type: Output
             }], opened: [{
@@ -860,8 +845,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             }] } });
 
 class IDHeader1177ProModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: IDHeader1177ProModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.20", ngImport: i0, type: IDHeader1177ProModule, imports: [IDHeader1177ProComponent,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: IDHeader1177ProModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.25", ngImport: i0, type: IDHeader1177ProModule, imports: [IDHeader1177ProComponent,
             IDHeader1177ProAvatarComponent,
             IDHeader1177ProAvatarMobileComponent,
             IDHeader1177ProItemComponent,
@@ -886,9 +871,9 @@ class IDHeader1177ProModule {
             IDHeader1177ProBrandLinkDirective,
             IDHeader1177ProRegionPickerComponent,
             IDHeader1177ProRegionPickerMobileComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: IDHeader1177ProModule });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: IDHeader1177ProModule });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: IDHeader1177ProModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: IDHeader1177ProModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [