@inera/ids-angular 1.8.0 → 1.9.1

package/fesm2015/inera-ids-angular.js

@@ -144,7 +144,9 @@ class IDButtonComponent {
     constructor() {
         this.secondary = false;
         this.toggle = false;
-        this.responsive = false;
+        this.block = false;
+        this.sBlock = false;
+        this.mBlock = false;
         this.active = false;
         this.submit = false;
         this.search = false;
@@ -153,20 +155,24 @@ class IDButtonComponent {
     }
 }
 IDButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: IDButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-IDButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: IDButtonComponent, selector: "id-button", inputs: { secondary: "secondary", toggle: "toggle", responsive: "responsive", active: "active", submit: "submit", search: "search", disabled: "disabled", type: "type" }, ngImport: i0, template: "<ids-button \n  [secondary]=\"secondary\"\n  [toggle]=\"toggle\"\n  [toggle]=\"toggle\"\n  [active]=\"toggle\"\n  [submit]=\"submit\"\n  [search]=\"search\"\n  [disabled]=\"disabled\"\n  [responsive]=\"responsive\"\n  [type]=\"type\">\n  <ng-content></ng-content>\n</ids-button>", styles: ["id-button[ng-reflect-responsive=true] { display: contents; }"], encapsulation: i0.ViewEncapsulation.None });
+IDButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: IDButtonComponent, selector: "id-button", inputs: { secondary: "secondary", toggle: "toggle", block: "block", sBlock: "sBlock", mBlock: "mBlock", active: "active", submit: "submit", search: "search", disabled: "disabled", type: "type" }, ngImport: i0, template: "<ids-button \r\n  [secondary]=\"secondary ? 'true' : null\"\r\n  [toggle]=\"toggle ? 'true' : null\"\r\n  [active]=\"active ? 'true' : null\"\r\n  [submit]=\"submit ? 'true' : null\"\r\n  [search]=\"search ? 'true' : null\"\r\n  [disabled]=\"disabled ? 'true' : null\"\r\n  [block]=\"block ? 'true' : null\"\r\n  [s-block]=\"sBlock ? 'true' : null\"\r\n  [m-block]=\"mBlock ? 'true' : null\"\r\n  [type]=\"type\">\r\n  <ng-content></ng-content>\r\n</ids-button>", styles: ["id-button[ng-reflect-block=true], id-button[ng-reflect-m-block=true], id-button[ng-reflect-s-block=true] { display: contents; }"], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: IDButtonComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'id-button',
                     templateUrl: './button.component.html',
-                    styles: ['id-button[ng-reflect-responsive=true] { display: contents; }'],
+                    styles: ['id-button[ng-reflect-block=true], id-button[ng-reflect-m-block=true], id-button[ng-reflect-s-block=true] { display: contents; }'],
                     encapsulation: ViewEncapsulation.None,
                 }]
         }], ctorParameters: function () { return []; }, propDecorators: { secondary: [{
                 type: Input
             }], toggle: [{
                 type: Input
-            }], responsive: [{
+            }], block: [{
+                type: Input
+            }], sBlock: [{
+                type: Input
+            }], mBlock: [{
                 type: Input
             }], active: [{
                 type: Input
@@ -477,7 +483,7 @@ class IDCardComponent {
     }
 }
 IDCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: IDCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-IDCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: IDCardComponent, selector: "id-card", inputs: { fill: "fill" }, ngImport: i0, template: "<ids-card \n  [fill]=\"fill\">\n  <ng-content></ng-content>\n</ids-card>", encapsulation: i0.ViewEncapsulation.None });
+IDCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: IDCardComponent, selector: "id-card", inputs: { fill: "fill" }, ngImport: i0, template: "<ids-card \r\n  [fill]=\"fill\">\r\n  <ng-content></ng-content>\r\n</ids-card>", encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: IDCardComponent, decorators: [{
             type: Component,
             args: [{
@@ -566,7 +572,7 @@ class IDDialogComponent {
     }
 }
 IDDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: IDDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-IDDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: IDDialogComponent, selector: "id-dialog", inputs: { dismissible: "dismissible", headline: "headline", overlay: "overlay", persistent: "persistent", show: "show", width: "width" }, ngImport: i0, template: "<ids-dialog \n  [dismissible]=\"dismissible\"\n  [headline]=\"headline\"\n  [overlay]=\"overlay\"\n  [persistent]=\"persistent\"\n  [show]=\"show\"\n  [width]=\"width\">\n  <ng-content></ng-content>\n</ids-dialog>", encapsulation: i0.ViewEncapsulation.None });
+IDDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: IDDialogComponent, selector: "id-dialog", inputs: { dismissible: "dismissible", headline: "headline", overlay: "overlay", persistent: "persistent", show: "show", width: "width" }, ngImport: i0, template: "<ids-dialog \r\n  [dismissible]=\"dismissible\"\r\n  [headline]=\"headline\"\r\n  [overlay]=\"overlay\"\r\n  [persistent]=\"persistent\"\r\n  [show]=\"show\"\r\n  [width]=\"width\">\r\n  <ng-content></ng-content>\r\n</ids-dialog>", encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: IDDialogComponent, decorators: [{
             type: Component,
             args: [{
@@ -592,7 +598,7 @@ class IDDialogActionsComponent {
     constructor() { }
 }
 IDDialogActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: IDDialogActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-IDDialogActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: IDDialogActionsComponent, selector: "id-dialog-actions", ngImport: i0, template: "<ids-dialog-actions>\n  <ng-content></ng-content>\n</ids-dialog-actions>", encapsulation: i0.ViewEncapsulation.None });
+IDDialogActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: IDDialogActionsComponent, selector: "id-dialog-actions", ngImport: i0, template: "<ids-dialog-actions>\r\n  <ng-content></ng-content>\r\n</ids-dialog-actions>", encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: IDDialogActionsComponent, decorators: [{
             type: Component,
             args: [{
@@ -1148,17 +1154,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         }] });
 
 class IDRowComponent {
-    constructor() { }
+    constructor(_elementRef) {
+        this._elementRef = _elementRef;
+        this.align = null;
+        this.justify = null;
+        this.style = null;
+        this._elementRef.nativeElement.removeAttribute('style');
+    }
 }
-IDRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: IDRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-IDRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: IDRowComponent, selector: "id-row", ngImport: i0, template: "<ids-row>\r\n  <ng-content></ng-content>\r\n</ids-row>" });
+IDRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: IDRowComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+IDRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: IDRowComponent, selector: "id-row", inputs: { align: "align", justify: "justify", style: "style" }, ngImport: i0, template: "<ids-row [style]=\"style\" [justify]=\"justify\" [align]=\"align\">\r\n  <ng-content></ng-content>\r\n</ids-row>" });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: IDRowComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'id-row',
                     templateUrl: './row.component.html',
                 }]
-        }], ctorParameters: function () { return []; } });
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { align: [{
+                type: Input
+            }], justify: [{
+                type: Input
+            }], style: [{
+                type: Input
+            }] } });
 
 class IDRowModule {
 }
@@ -1179,14 +1197,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         }] });
 
 class IDColumnComponent {
-    constructor() {
+    constructor(_elementRef) {
+        this._elementRef = _elementRef;
         this.cols = "";
-        this.mobile = "";
+        this.offset = null;
+        this.m = "";
+        this.mOffset = null;
+        this.s = "";
+        this.sOffset = null;
         this.align = "";
+        this.style = null;
+        this._elementRef.nativeElement.removeAttribute('style');
     }
 }
-IDColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: IDColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-IDColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: IDColumnComponent, selector: "id-col", inputs: { cols: "cols", mobile: "mobile", align: "align" }, ngImport: i0, template: "<ids-col \r\n  [attr.cols]=\"cols\"\r\n  [attr.mobile]=\"mobile\" \r\n  [attr.align]=\"align\">\r\n  <ng-content></ng-content>\r\n</ids-col>", styles: ["id-col { display: contents; }"], encapsulation: i0.ViewEncapsulation.None });
+IDColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: IDColumnComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+IDColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: IDColumnComponent, selector: "id-col", inputs: { cols: "cols", offset: "offset", m: "m", mOffset: "mOffset", s: "s", sOffset: "sOffset", align: "align", style: "style" }, ngImport: i0, template: "<ids-col \r\n  [attr.cols]=\"cols\"\r\n  [attr.offset]=\"offset\"\r\n  [attr.m]=\"m\" \r\n  [attr.m-offset]=\"[mOffset]\"\r\n  [attr.s]=\"s\" \r\n  [attr.s-offset]=\"[sOffset]\"\r\n  [attr.align]=\"align\"\r\n  [attr.style]=\"style\">\r\n  <ng-content></ng-content>\r\n</ids-col>", styles: ["id-col { display: contents; }"], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: IDColumnComponent, decorators: [{
             type: Component,
             args: [{
@@ -1195,12 +1220,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     encapsulation: ViewEncapsulation.None,
                     styles: ['id-col { display: contents; }']
                 }]
-        }], ctorParameters: function () { return []; }, propDecorators: { cols: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { cols: [{
+                type: Input
+            }], offset: [{
+                type: Input
+            }], m: [{
                 type: Input
-            }], mobile: [{
+            }], mOffset: [{
+                type: Input
+            }], s: [{
+                type: Input
+            }], sOffset: [{
                 type: Input
             }], align: [{
                 type: Input
+            }], style: [{
+                type: Input
             }] } });
 
 class IDColumnModule {
@@ -1224,10 +1259,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
 class IDContainerComponent {
     constructor() {
         this.fluid = false;
+        this.gutterless = false;
     }
 }
 IDContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: IDContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-IDContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: IDContainerComponent, selector: "id-container", inputs: { fluid: "fluid" }, ngImport: i0, template: "<ids-container [attr.fluid]=\"fluid\">\r\n  <ng-content></ng-content>\r\n</ids-container>", encapsulation: i0.ViewEncapsulation.None });
+IDContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: IDContainerComponent, selector: "id-container", inputs: { fluid: "fluid", gutterless: "gutterless" }, ngImport: i0, template: "<ids-container \r\n  [attr.gutterless]=\"gutterless ? true : null\" \r\n  [attr.fluid]=\"fluid ? true : null\">\r\n  <ng-content></ng-content>\r\n</ids-container>", encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: IDContainerComponent, decorators: [{
             type: Component,
             args: [{
@@ -1237,6 +1273,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 }]
         }], ctorParameters: function () { return []; }, propDecorators: { fluid: [{
                 type: Input
+            }], gutterless: [{
+                type: Input
             }] } });
 
 class IDContainerModule {
@@ -1642,7 +1680,7 @@ class IDHeaderComponent {
     }
 }
 IDHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: IDHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-IDHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: IDHeaderComponent, selector: "id-header", inputs: { type: "type", brandText: "brandText", brandTextTop: "brandTextTop", brandTextBottom: "brandTextBottom", hideRegionPicker: "hideRegionPicker", hideBrand: "hideBrand", pickRegionText: "pickRegionText", regionIcon: "regionIcon", width: "width", srLogoLabel: "srLogoLabel", items: "items", avatar: "avatar", navItems: "navItems", mobileItems: "mobileItems", mobileMenuItems: "mobileMenuItems" }, outputs: { didToggleRegion: "didToggleRegion" }, ngImport: i0, template: "<ids-header \r\n  [attr.type]=\"type\"\r\n  [attr.brandtext]=\"brandText\"\r\n  [attr.brandtexttop]=\"brandTextTop\"\r\n  [attr.brandtextbottom]=\"brandTextBottom\"\r\n  [hideregionpicker]=\"hideRegionPicker\"\r\n  [hidebrand]=\"hideBrand\"\r\n  [pickregiontext]=\"pickRegionText\"\r\n  [regionicon]=\"regionIcon\"\r\n  [width]=\"width\"\r\n  [srlogolabel]=\"srLogoLabel\"\r\n  (didToggleRegion)=\"didToggleRegion.emit(true)\">\r\n\r\n  <ids-header-item *ngFor=\"let item of items\" \r\n    [icon]=\"item.iconName\" \r\n    [mobile]=\"item.mobile\">\r\n    <id-anchor [link]=\"item.link\"></id-anchor>\r\n  </ids-header-item>\r\n\r\n  <ids-header-nav *ngIf=\"navItems || mobileItems\">\r\n    <ids-header-nav-item *ngFor=\"let navItem of navItems; let i = index\" [label]=\"navItem.label\" [link]=\"navItem.link\">\r\n      <id-anchor *ngIf=\"navItem.link\" [link]=\"navItem.link\"></id-anchor>\r\n      <ids-link slot=\"col-1\" [block]=\"true\" *ngFor=\"let link of navItem.col1\">\r\n        <ids-icon *ngIf=\"type.indexOf('1177')\" name=\"arrow\"></ids-icon>\r\n        <ids-icon *ngIf=\"type.indexOf('inera')\" color=\"var(--color-main)\" name=\"arrow\"></ids-icon>\r\n        <id-anchor [link]=\"link\"></id-anchor>\r\n      </ids-link> \r\n      <ids-link slot=\"col-2\" [block]=\"true\" *ngFor=\"let link of navItem.col2\">\r\n        <ids-icon *ngIf=\"type.indexOf('1177')\" name=\"arrow\"></ids-icon>\r\n        <ids-icon *ngIf=\"type.indexOf('inera')\" color=\"var(--color-main)\" name=\"arrow\"></ids-icon>\r\n        <id-anchor [link]=\"link\"></id-anchor>\r\n      </ids-link>\r\n      <ids-link slot=\"col-3\" [block]=\"true\" *ngFor=\"let link of navItem.col3\">\r\n        <ids-icon *ngIf=\"type.indexOf('1177')\" name=\"arrow\"></ids-icon>\r\n        <ids-icon *ngIf=\"type.indexOf('inera')\" color=\"var(--color-main)\" name=\"arrow\"></ids-icon>\r\n        <id-anchor [link]=\"link\"></id-anchor>\r\n      </ids-link>\r\n      <div slot=\"col-4\">\r\n        <h2 style=\"margin-bottom: 15px; color: var(--header-nav-item-heading_color);\" class=\"h2\">{{navItem.headline}}</h2>\r\n        <p class=\"body\">{{navItem.paragraph}}</p>\r\n        <id-anchor>{{navItem.paragraphLink}}</id-anchor>\r\n      </div>\r\n    </ids-header-nav-item>\r\n    <ids-header-mobile-item *ngFor=\"let mobileItem of mobileItems\" [icon]=\"mobileItem.iconName\">\r\n      <id-anchor [link]=\"mobileItem.link\"></id-anchor>\r\n    </ids-header-mobile-item>\r\n    \r\n    <ids-header-mobile-menu *ngIf=\"mobileMenuItems\">\r\n      Menu\r\n      <ids-mobile-menu-item *ngFor=\"let item of mobileMenuItems\"\r\n        [attr.type]=\"type\"\r\n        [headline]=\"item?.headline\"\r\n        [expanded]=\"item?.expanded\"\r\n        [secondary]=\"item?.secondary\"\r\n        [active]=\"item?.active\"\r\n        (didToggleExpansion)=\"item.togleExpansion()\">\r\n          <id-anchor *ngIf=\"item.link\" [link]=\"item.link\"></id-anchor>\r\n          <ids-mobile-menu-item *ngFor=\"let item of item.items\"\r\n          [attr.type]=\"type\"\r\n          [headline]=\"item?.headline\"\r\n          [expanded]=\"item?.expanded\"\r\n          [secondary]=\"item?.secondary\"\r\n          [active]=\"item?.active\"\r\n          (didToggleExpansion)=\"item.togleExpansion()\">\r\n            <id-anchor *ngIf=\"item.link\" [link]=\"item.link\"></id-anchor>\r\n            <ids-mobile-menu-item *ngFor=\"let item of item.items\"\r\n            [attr.type]=\"type\"\r\n            [headline]=\"item?.headline\"\r\n            [expanded]=\"item?.expanded\"\r\n            [secondary]=\"item?.secondary\"\r\n            [active]=\"item?.active\"\r\n            (didToggleExpansion)=\"item.togleExpansion()\">\r\n              <id-anchor *ngIf=\"item.link\" [link]=\"item.link\"></id-anchor>\r\n                <ids-mobile-menu-item *ngFor=\"let item of item.items\"\r\n                [attr.type]=\"type\"\r\n                [headline]=\"item?.headline\"\r\n                [expanded]=\"item?.expanded\"\r\n                [secondary]=\"item?.secondary\"\r\n                [active]=\"item?.active\"\r\n                (didToggleExpansion)=\"item.togleExpansion()\">\r\n                  <id-anchor *ngIf=\"item.link\" [link]=\"item.link\"></id-anchor>\r\n                </ids-mobile-menu-item>\r\n            </ids-mobile-menu-item>\r\n          </ids-mobile-menu-item>\r\n      </ids-mobile-menu-item>\r\n    </ids-header-mobile-menu>\r\n  </ids-header-nav>\r\n\r\n  <ids-header-avatar *ngIf=\"avatar\" [username]=\"avatar.username\">\r\n    <ng-content select=\"[avatar]\"></ng-content>\r\n    <span slot=\"avatar-text\">{{avatar.serviceName}}</span>\r\n    <id-anchor [link]=\"avatar.linkLeft\" slot=\"avatar-left\"></id-anchor>\r\n    <id-anchor [link]=\"avatar.linkRight\" slot=\"avatar-right\"></id-anchor>\r\n  </ids-header-avatar>\r\n\r\n  <ng-content></ng-content>\r\n\r\n  <ids-header-mobile-menu \r\n    *ngIf=\"type !== '1177' && (mobileMenuItems || avatar)\"\r\n    [type]=\"type\">\r\n    <ids-mobile-menu-avatar *ngIf=\"avatar\" [username]=\"avatar.username\">\r\n      <ng-content select=\"[avatarMobile]\"></ng-content>\r\n    </ids-mobile-menu-avatar>\r\n    <ids-mobile-menu-item *ngFor=\"let item of mobileMenuItems\"\r\n      [attr.type]=\"type\"\r\n      [headline]=\"item?.headline\"\r\n      [expanded]=\"item?.expanded\"\r\n      (didToggleExpansion)=\"item.togleExpansion()\">\r\n        <id-anchor *ngIf=\"item.link\" [link]=\"item.link\"></id-anchor>\r\n        <ids-mobile-menu-item *ngFor=\"let item of item.items\"\r\n        [attr.type]=\"type\"\r\n        [headline]=\"item?.headline\"\r\n        [expanded]=\"item?.expanded\"\r\n        (didToggleExpansion)=\"item.togleExpansion()\">\r\n          <id-anchor *ngIf=\"item.link\" [link]=\"item.link\"></id-anchor>\r\n          <ids-mobile-menu-item *ngFor=\"let item of item.items\"\r\n          [attr.type]=\"type\"\r\n          [headline]=\"item?.headline\"\r\n          [expanded]=\"item?.expanded\"\r\n          (didToggleExpansion)=\"item.togleExpansion()\">\r\n            <id-anchor *ngIf=\"item.link\" [link]=\"item.link\"></id-anchor>\r\n              <ids-mobile-menu-item *ngFor=\"let item of item.items\"\r\n              [attr.type]=\"type\"\r\n              [headline]=\"item?.headline\"\r\n              [expanded]=\"item?.expanded\"\r\n              (didToggleExpansion)=\"item.togleExpansion()\">\r\n                <id-anchor *ngIf=\"item.link\" [link]=\"item.link\"></id-anchor>\r\n              </ids-mobile-menu-item>\r\n          </ids-mobile-menu-item>\r\n        </ids-mobile-menu-item>\r\n    </ids-mobile-menu-item>\r\n  </ids-header-mobile-menu>\r\n</ids-header>", components: [{ type: IDAnchorComponent, selector: "id-anchor", inputs: ["link", "contextClasses"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+IDHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: IDHeaderComponent, selector: "id-header", inputs: { type: "type", brandText: "brandText", brandTextTop: "brandTextTop", brandTextBottom: "brandTextBottom", hideRegionPicker: "hideRegionPicker", hideBrand: "hideBrand", pickRegionText: "pickRegionText", regionIcon: "regionIcon", width: "width", srLogoLabel: "srLogoLabel", items: "items", avatar: "avatar", navItems: "navItems", mobileItems: "mobileItems", mobileMenuItems: "mobileMenuItems" }, outputs: { didToggleRegion: "didToggleRegion" }, ngImport: i0, template: "<ids-header \r\n  [attr.type]=\"type\"\r\n  [attr.brandtext]=\"brandText\"\r\n  [attr.brandtexttop]=\"brandTextTop\"\r\n  [attr.brandtextbottom]=\"brandTextBottom\"\r\n  [hideregionpicker]=\"hideRegionPicker\"\r\n  [hidebrand]=\"hideBrand\"\r\n  [pickregiontext]=\"pickRegionText\"\r\n  [regionicon]=\"regionIcon\"\r\n  [width]=\"width\"\r\n  [srlogolabel]=\"srLogoLabel\"\r\n  (didToggleRegion)=\"didToggleRegion.emit(true)\">\r\n\r\n  <ids-header-item *ngFor=\"let item of items\" \r\n    [icon]=\"item.iconName\" \r\n    [mobile]=\"item.mobile\">\r\n    <id-anchor [link]=\"item.link\"></id-anchor>\r\n  </ids-header-item>\r\n\r\n  <ids-header-nav *ngIf=\"navItems || mobileItems\">\r\n    <ids-header-nav-item *ngFor=\"let navItem of navItems; let i = index\" [label]=\"navItem.label\" [link]=\"navItem.link\" [active]=\"navItem.active\">\r\n      <id-anchor *ngIf=\"navItem.link\" [link]=\"navItem.link\"></id-anchor>\r\n      <ids-link slot=\"col-1\" [block]=\"true\" *ngFor=\"let link of navItem.col1\">\r\n        <ids-icon *ngIf=\"type.indexOf('1177')\" name=\"arrow\"></ids-icon>\r\n        <ids-icon *ngIf=\"type.indexOf('inera')\" color=\"var(--color-main)\" name=\"arrow\"></ids-icon>\r\n        <id-anchor [link]=\"link\"></id-anchor>\r\n      </ids-link> \r\n      <ids-link slot=\"col-2\" [block]=\"true\" *ngFor=\"let link of navItem.col2\">\r\n        <ids-icon *ngIf=\"type.indexOf('1177')\" name=\"arrow\"></ids-icon>\r\n        <ids-icon *ngIf=\"type.indexOf('inera')\" color=\"var(--color-main)\" name=\"arrow\"></ids-icon>\r\n        <id-anchor [link]=\"link\"></id-anchor>\r\n      </ids-link>\r\n      <ids-link slot=\"col-3\" [block]=\"true\" *ngFor=\"let link of navItem.col3\">\r\n        <ids-icon *ngIf=\"type.indexOf('1177')\" name=\"arrow\"></ids-icon>\r\n        <ids-icon *ngIf=\"type.indexOf('inera')\" color=\"var(--color-main)\" name=\"arrow\"></ids-icon>\r\n        <id-anchor [link]=\"link\"></id-anchor>\r\n      </ids-link>\r\n      <div slot=\"col-4\">\r\n        <h2 style=\"margin-bottom: 15px; color: var(--header-nav-item-heading_color);\" class=\"h2\">{{navItem.headline}}</h2>\r\n        <p class=\"body\">{{navItem.paragraph}}</p>\r\n        <id-anchor>{{navItem.paragraphLink}}</id-anchor>\r\n      </div>\r\n    </ids-header-nav-item>\r\n    <ids-header-mobile-item *ngFor=\"let mobileItem of mobileItems\" [icon]=\"mobileItem.iconName\">\r\n      <id-anchor [link]=\"mobileItem.link\"></id-anchor>\r\n    </ids-header-mobile-item>\r\n    \r\n    <ids-header-mobile-menu *ngIf=\"mobileMenuItems\">\r\n      Menu\r\n      <ids-mobile-menu-item *ngFor=\"let item of mobileMenuItems\"\r\n        [attr.type]=\"type\"\r\n        [headline]=\"item?.headline\"\r\n        [expanded]=\"item?.expanded\"\r\n        [secondary]=\"item?.secondary\"\r\n        [active]=\"item?.active\"\r\n        (didToggleExpansion)=\"item.togleExpansion()\">\r\n          <id-anchor *ngIf=\"item.link\" [link]=\"item.link\"></id-anchor>\r\n          <ids-mobile-menu-item *ngFor=\"let item of item.items\"\r\n          [attr.type]=\"type\"\r\n          [headline]=\"item?.headline\"\r\n          [expanded]=\"item?.expanded\"\r\n          [secondary]=\"item?.secondary\"\r\n          [active]=\"item?.active\"\r\n          (didToggleExpansion)=\"item.togleExpansion()\">\r\n            <id-anchor *ngIf=\"item.link\" [link]=\"item.link\"></id-anchor>\r\n            <ids-mobile-menu-item *ngFor=\"let item of item.items\"\r\n            [attr.type]=\"type\"\r\n            [headline]=\"item?.headline\"\r\n            [expanded]=\"item?.expanded\"\r\n            [secondary]=\"item?.secondary\"\r\n            [active]=\"item?.active\"\r\n            (didToggleExpansion)=\"item.togleExpansion()\">\r\n              <id-anchor *ngIf=\"item.link\" [link]=\"item.link\"></id-anchor>\r\n                <ids-mobile-menu-item *ngFor=\"let item of item.items\"\r\n                [attr.type]=\"type\"\r\n                [headline]=\"item?.headline\"\r\n                [expanded]=\"item?.expanded\"\r\n                [secondary]=\"item?.secondary\"\r\n                [active]=\"item?.active\"\r\n                (didToggleExpansion)=\"item.togleExpansion()\">\r\n                  <id-anchor *ngIf=\"item.link\" [link]=\"item.link\"></id-anchor>\r\n                </ids-mobile-menu-item>\r\n            </ids-mobile-menu-item>\r\n          </ids-mobile-menu-item>\r\n      </ids-mobile-menu-item>\r\n    </ids-header-mobile-menu>\r\n  </ids-header-nav>\r\n\r\n  <ids-header-avatar *ngIf=\"avatar\" [username]=\"avatar.username\">\r\n    <ng-content select=\"[avatar]\"></ng-content>\r\n    <span slot=\"avatar-text\">{{avatar.serviceName}}</span>\r\n    <id-anchor [link]=\"avatar.linkLeft\" slot=\"avatar-left\"></id-anchor>\r\n    <id-anchor [link]=\"avatar.linkRight\" slot=\"avatar-right\"></id-anchor>\r\n  </ids-header-avatar>\r\n\r\n  <ng-content></ng-content>\r\n\r\n  <ids-header-mobile-menu \r\n    *ngIf=\"type !== '1177' && (mobileMenuItems || avatar)\"\r\n    [type]=\"type\">\r\n    <ids-mobile-menu-avatar *ngIf=\"avatar\" [username]=\"avatar.username\">\r\n      <ng-content select=\"[avatarMobile]\"></ng-content>\r\n      <id-anchor style=\"color: var(--mobile-menu-avatar-link)\" *ngIf=\"avatar.linkMobile\" [link]=\"avatar.linkMobile\"></id-anchor>\r\n    </ids-mobile-menu-avatar>\r\n    <ids-mobile-menu-item *ngFor=\"let item of mobileMenuItems\"\r\n      [attr.type]=\"type\"\r\n      [headline]=\"item?.headline\"\r\n      [expanded]=\"item?.expanded\"\r\n      (didToggleExpansion)=\"item.togleExpansion()\">\r\n        <id-anchor *ngIf=\"item.link\" [link]=\"item.link\"></id-anchor>\r\n        <ids-mobile-menu-item *ngFor=\"let item of item.items\"\r\n        [attr.type]=\"type\"\r\n        [headline]=\"item?.headline\"\r\n        [expanded]=\"item?.expanded\"\r\n        (didToggleExpansion)=\"item.togleExpansion()\">\r\n          <id-anchor *ngIf=\"item.link\" [link]=\"item.link\"></id-anchor>\r\n          <ids-mobile-menu-item *ngFor=\"let item of item.items\"\r\n          [attr.type]=\"type\"\r\n          [headline]=\"item?.headline\"\r\n          [expanded]=\"item?.expanded\"\r\n          (didToggleExpansion)=\"item.togleExpansion()\">\r\n            <id-anchor *ngIf=\"item.link\" [link]=\"item.link\"></id-anchor>\r\n              <ids-mobile-menu-item *ngFor=\"let item of item.items\"\r\n              [attr.type]=\"type\"\r\n              [headline]=\"item?.headline\"\r\n              [expanded]=\"item?.expanded\"\r\n              (didToggleExpansion)=\"item.togleExpansion()\">\r\n                <id-anchor *ngIf=\"item.link\" [link]=\"item.link\"></id-anchor>\r\n              </ids-mobile-menu-item>\r\n          </ids-mobile-menu-item>\r\n        </ids-mobile-menu-item>\r\n    </ids-mobile-menu-item>\r\n  </ids-header-mobile-menu>\r\n</ids-header>", components: [{ type: IDAnchorComponent, selector: "id-anchor", inputs: ["link", "contextClasses"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: IDHeaderComponent, decorators: [{
             type: Component,
             args: [{
@@ -1733,6 +1771,9 @@ class IDHeaderAvatar {
     get serviceName() {
         return this._props.serviceName;
     }
+    get linkMobile() {
+        return this._props.linkMobile;
+    }
 }
 
 class IDHeaderNavItem {
@@ -1763,6 +1804,9 @@ class IDHeaderNavItem {
     get paragraphLink() {
         return this._props.pragraphLink;
     }
+    get active() {
+        return this._props.active;
+    }
 }
 
 class IDTabsComponent {