@eui/mobile-core 18.0.0-next.1 → 18.0.0-next.11

package/fesm2022/eui-mobile-core.mjs

@@ -1,27 +1,29 @@
-import { EuiEuLanguages } from '@eui/base';
+import { getI18nServiceConfig } from '@eui/base';
 export * from '@eui/base';
 import * as i0 from '@angular/core';
-import { Injectable, booleanAttribute, Directive, Input, numberAttribute, Component, ViewEncapsulation, ChangeDetectionStrategy, HostBinding, NgModule, EventEmitter, Output, ContentChildren, ViewChild, HostListener, ContentChild } from '@angular/core';
+import { Injectable, booleanAttribute, Directive, Input, numberAttribute, Component, ViewEncapsulation, ChangeDetectionStrategy, HostBinding, NgModule, Inject, EventEmitter, Output, ViewChild, ContentChildren, ContentChild, HostListener } from '@angular/core';
 import { BehaviorSubject, Subject, throwError } from 'rxjs';
 import * as i2$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i1 from '@ionic/angular';
-import { IonicModule } from '@ionic/angular';
-import { EclLanguageService, EclDefaultLanguageService } from '@eui/ecl';
-import { takeUntil, distinctUntilKeyChanged, startWith, switchMap, map, catchError } from 'rxjs/operators';
-import * as i1$1 from '@ngx-translate/core';
+import * as i3 from '@ionic/angular';
+import { IonicModule, IonSearchbar } from '@ionic/angular';
+import * as i1 from '@eui/core';
+import { EuiEuLanguages, GLOBAL_CONFIG_TOKEN } from '@eui/core';
+import { takeUntil, startWith, switchMap, map, catchError } from 'rxjs/operators';
+import * as i2 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
-import * as i2 from '@eui/core';
-import * as i1$2 from '@angular/router';
+import * as i1$1 from '@angular/router';
 import { NavigationEnd, RouterModule } from '@angular/router';
 import * as i2$2 from '@angular/common/http';
 import { HttpClientModule } from '@angular/common/http';
-import * as i3 from '@mapaxe/ngx-pinch-zoom';
+import * as i3$1 from 'ng2-pdf-viewer';
+import { PdfViewerModule } from 'ng2-pdf-viewer';
+import * as i4 from '@mapaxe/ngx-pinch-zoom';
 import { PinchZoomModule } from '@mapaxe/ngx-pinch-zoom';
 import * as i2$3 from 'angularx-qrcode';
 import { QRCodeModule } from 'angularx-qrcode';
-import * as i1$3 from '@angular/platform-browser';
-import * as i6 from '@angular/forms';
+import * as i1$2 from '@angular/platform-browser';
+import * as i7 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 
 const initialState = {
@@ -48,10 +50,10 @@ class EuimAppService {
             ...nextState,
         });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimAppService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimAppService, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimAppService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimAppService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimAppService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimAppService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -130,10 +132,10 @@ class BaseStatesDirective {
             .join(' ')
             .trim();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BaseStatesDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.5", type: BaseStatesDirective, isStandalone: true, selector: "[euimBase]", inputs: { color: "color", euimDisabled: ["euimDisabled", "euimDisabled", booleanAttribute], euimPositionTopEnd: ["euimPositionTopEnd", "euimPositionTopEnd", booleanAttribute], euimFontBold: ["euimFontBold", "euimFontBold", booleanAttribute], euimFontRegular: ["euimFontRegular", "euimFontRegular", booleanAttribute], euimFontBoldItalic: ["euimFontBoldItalic", "euimFontBoldItalic", booleanAttribute], euimFontItalic: ["euimFontItalic", "euimFontItalic", booleanAttribute], euimFontLight: ["euimFontLight", "euimFontLight", booleanAttribute], euimSize2XS: ["euimSize2XS", "euimSize2XS", booleanAttribute], euimSizeXS: ["euimSizeXS", "euimSizeXS", booleanAttribute], euimSizeS: ["euimSizeS", "euimSizeS", booleanAttribute], euimSizeM: ["euimSizeM", "euimSizeM", booleanAttribute], euimSizeL: ["euimSizeL", "euimSizeL", booleanAttribute], euimSizeXL: ["euimSizeXL", "euimSizeXL", booleanAttribute], euimSize2XL: ["euimSize2XL", "euimSize2XL", booleanAttribute], euimSize3XL: ["euimSize3XL", "euimSize3XL", booleanAttribute], euimSize4XL: ["euimSize4XL", "euimSize4XL", booleanAttribute], euimSize5XL: ["euimSize5XL", "euimSize5XL", booleanAttribute], euimSizeVariant: "euimSizeVariant" }, host: { properties: { "attr.aria-disabled": "this.euimDisabled.toString()" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: BaseStatesDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.10", type: BaseStatesDirective, isStandalone: true, selector: "[euimBase]", inputs: { color: "color", euimDisabled: ["euimDisabled", "euimDisabled", booleanAttribute], euimPositionTopEnd: ["euimPositionTopEnd", "euimPositionTopEnd", booleanAttribute], euimFontBold: ["euimFontBold", "euimFontBold", booleanAttribute], euimFontRegular: ["euimFontRegular", "euimFontRegular", booleanAttribute], euimFontBoldItalic: ["euimFontBoldItalic", "euimFontBoldItalic", booleanAttribute], euimFontItalic: ["euimFontItalic", "euimFontItalic", booleanAttribute], euimFontLight: ["euimFontLight", "euimFontLight", booleanAttribute], euimSize2XS: ["euimSize2XS", "euimSize2XS", booleanAttribute], euimSizeXS: ["euimSizeXS", "euimSizeXS", booleanAttribute], euimSizeS: ["euimSizeS", "euimSizeS", booleanAttribute], euimSizeM: ["euimSizeM", "euimSizeM", booleanAttribute], euimSizeL: ["euimSizeL", "euimSizeL", booleanAttribute], euimSizeXL: ["euimSizeXL", "euimSizeXL", booleanAttribute], euimSize2XL: ["euimSize2XL", "euimSize2XL", booleanAttribute], euimSize3XL: ["euimSize3XL", "euimSize3XL", booleanAttribute], euimSize4XL: ["euimSize4XL", "euimSize4XL", booleanAttribute], euimSize5XL: ["euimSize5XL", "euimSize5XL", booleanAttribute], euimSizeVariant: "euimSizeVariant" }, host: { properties: { "attr.aria-disabled": "this.euimDisabled.toString()" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BaseStatesDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: BaseStatesDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -224,16 +226,15 @@ class EuimLabelComponent {
             this.euimLabelTruncateWithLines > 0 ? 'euim-label__euiTextTruncateWithLines euim-label__truncate' : '',
         ].join(' ');
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimLabelComponent, deps: [{ token: BaseStatesDirective }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.5", type: EuimLabelComponent, selector: "div[euimLabel], p[euimLabel], span[euimLabel], euim-label", inputs: { euimLabelTruncateWithLines: ["euimLabelTruncateWithLines", "euimLabelTruncateWithLines", numberAttribute], euimLabelTitle: ["euimLabelTitle", "euimLabelTitle", booleanAttribute], euimLabelSubTitle: ["euimLabelSubTitle", "euimLabelSubTitle", booleanAttribute], euimLabelMeta: ["euimLabelMeta", "euimLabelMeta", booleanAttribute], euimLabelTruncate: ["euimLabelTruncate", "euimLabelTruncate", booleanAttribute], euimLabelTextWrap: ["euimLabelTextWrap", "euimLabelTextWrap", booleanAttribute] }, host: { properties: { "style.--euimLabelTruncateWithLines": "this.euimLabelTruncateWithLines", "class": "this.cssClasses" } }, hostDirectives: [{ directive: BaseStatesDirective, inputs: ["euimSize2XS", "euimSize2XS", "euimSizeXS", "euimSizeXS", "euimSizeS", "euimSizeS", "euimSizeM", "euimSizeM", "euimSizeL", "euimSizeL", "euimSizeXL", "euimSizeXL", "euimSize2XL", "euimSize2XL", "euimSize3XL", "euimSize3XL", "euimSize4XL", "euimSize4XL", "color", "color"] }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".euim-label{display:block;align-items:center;margin:0;padding:0;color:var(--eui-bc-neutral-100);font:var(--eui-f-m)}.euim-label ion-icon{vertical-align:bottom;margin-right:var(--eui-s-2xs)}.euim-label :not(ion-icon:first-child){margin-left:var(--eui-s-2xs)}.euim-label__title{font:var(--eui-f-m-bold);color:var(--eui-c-text)}.euim-label__title ion-icon{font-size:var(--eui-f-size-m)}.euim-label__sub-title,.euim-label__meta{font:var(--eui-f-s);color:var(--eui-bc-neutral-80)}.euim-label__sub-title ion-icon,.euim-label__meta ion-icon{font-size:var(--eui-f-size-m)}.euim-label__title+.euim-label__sub-title,.euim-label__title+.euim-label__meta,.euim-label__sub-title+.euim-label__meta,.euim-label__sub-title+.euim-label__sub-title,.euim-label__meta+.euim-label__sub-title,.euim-label__meta+.euim-label__meta{margin-top:var(--eui-s-2xs)}.euim-label__euiTextTruncateWithLines{white-space:break-spaces;display:-webkit-box;-webkit-line-clamp:var(--euimLabelTruncateWithLines);-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.euim-label__truncate{white-space:break-spaces}.euim-label--primary{color:var(--eui-bc-primary-100)}.euim-label--secondary{color:var(--eui-bc-neutral-60)}.euim-label--default{color:var(--eui-bc-neutral-80)}.euim-label--dark{color:var(--eui-bc-neutral-100)}.euim-label--info{color:var(--eui-bc-info-100)}.euim-label--success{color:var(--eui-bc-success-100)}.euim-label--warning{color:var(--eui-bc-warning-140)}.euim-label--warning ion-icon{color:var(--eui-bc-warning-140)}.euim-label--danger{color:var(--eui-bc-danger-100)}.euim-label--accent{color:var(--eui-bc-accent-100)}.euim-label--white{color:var(--eui-bc-neutral-0)}.euim-label--size-2xs{font:var(--eui-f-2xs)}.euim-label--size-xs{font:var(--eui-f-xs)}.euim-label--size-s{font:var(--eui-f-s)}.euim-label--size-m{font:var(--eui-f-m)}.euim-label--size-l{font:var(--eui-f-l)}.euim-label--size-xl{font:var(--eui-f-xl)}.euim-label--size-2xl{font:var(--eui-f-2xl)}.euim-label--size-3xl{font:var(--eui-f-3xl)}.euim-label--size-4xl{font:var(--eui-f-4xl)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimLabelComponent, deps: [{ token: BaseStatesDirective }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.10", type: EuimLabelComponent, selector: "div[euimLabel], p[euimLabel], span[euimLabel], euim-label", inputs: { euimLabelTruncateWithLines: ["euimLabelTruncateWithLines", "euimLabelTruncateWithLines", numberAttribute], euimLabelTitle: ["euimLabelTitle", "euimLabelTitle", booleanAttribute], euimLabelSubTitle: ["euimLabelSubTitle", "euimLabelSubTitle", booleanAttribute], euimLabelMeta: ["euimLabelMeta", "euimLabelMeta", booleanAttribute], euimLabelTruncate: ["euimLabelTruncate", "euimLabelTruncate", booleanAttribute], euimLabelTextWrap: ["euimLabelTextWrap", "euimLabelTextWrap", booleanAttribute] }, host: { properties: { "style.--euimLabelTruncateWithLines": "this.euimLabelTruncateWithLines", "class": "this.cssClasses" } }, hostDirectives: [{ directive: BaseStatesDirective, inputs: ["euimSizeXS", "euimSizeXS", "euimSizeS", "euimSizeS", "euimSizeM", "euimSizeM", "euimSizeL", "euimSizeL", "euimSizeXL", "euimSizeXL", "euimSize2XL", "euimSize2XL", "euimSize3XL", "euimSize3XL", "euimSize4XL", "euimSize4XL", "color", "color"] }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".euim-label{display:block;align-items:center;margin:0;padding:0;color:var(--eui-c-neutral);font:var(--eui-f-m-compact)}.euim-label ion-icon{vertical-align:bottom;margin-right:var(--eui-s-2xs)}.euim-label :not(ion-icon:first-child){margin-left:var(--eui-s-2xs)}.euim-label__title{font:var(--eui-f-m-bold-compact);color:var(--eui-c-neutral)}.euim-label__title ion-icon{font-size:var(--eui-f-size-m);min-height:var(--eui-is-s);min-width:var(--eui-is-s)}.euim-label__sub-title,.euim-label__meta{font:var(--eui-f-s-compact);color:var(--eui-c-neutral-light)}.euim-label__sub-title ion-icon,.euim-label__meta ion-icon{font-size:var(--eui-f-size-m);min-height:var(--eui-is-xs);min-width:var(--eui-is-xs)}.euim-label__title+.euim-label__sub-title,.euim-label__title+.euim-label__meta,.euim-label__sub-title+.euim-label__meta,.euim-label__sub-title+.euim-label__sub-title,.euim-label__meta+.euim-label__sub-title,.euim-label__meta+.euim-label__meta{margin-top:var(--eui-s-2xs)}.euim-label__euiTextTruncateWithLines{white-space:break-spaces;display:-webkit-box;-webkit-line-clamp:var(--euimLabelTruncateWithLines);-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.euim-label__truncate{white-space:break-spaces}.euim-label--primary{color:var(--eui-c-primary)}.euim-label--secondary{color:var(--eui-c-neutral-lighter)}.euim-label--default{color:var(--eui-bc-neutral-light)}.euim-label--dark{color:var(--eui-c-neutral)}.euim-label--info{color:var(--eui-c-info)}.euim-label--success{color:var(--eui-c-success)}.euim-label--warning{color:var(--eui-c-warning)}.euim-label--warning ion-icon{color:var(--eui-c-warning)}.euim-label--danger{color:var(--eui-c-danger)}.euim-label--white{color:var(--eui-c-white)}.euim-label--size-xs{font:var(--eui-f-xs-compact)}.euim-label--size-s{font:var(--eui-f-s-compact)}.euim-label--size-m{font:var(--eui-f-m-compact)}.euim-label--size-l{font:var(--eui-f-l-compact)}.euim-label--size-xl{font:var(--eui-f-xl-compact)}.euim-label--size-2xl{font:var(--eui-f-2xl-compact)}.euim-label--size-3xl{font:var(--eui-f-3xl-compact)}.euim-label--size-4xl{font:var(--eui-f-4xl-compact)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimLabelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimLabelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'div[euimLabel], p[euimLabel], span[euimLabel], euim-label', template: '<ng-content></ng-content>', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
                         {
                             directive: BaseStatesDirective,
                             inputs: [
-                                'euimSize2XS',
                                 'euimSizeXS',
                                 'euimSizeS',
                                 'euimSizeM',
@@ -245,7 +246,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
                                 'color',
                             ],
                         },
-                    ], styles: [".euim-label{display:block;align-items:center;margin:0;padding:0;color:var(--eui-bc-neutral-100);font:var(--eui-f-m)}.euim-label ion-icon{vertical-align:bottom;margin-right:var(--eui-s-2xs)}.euim-label :not(ion-icon:first-child){margin-left:var(--eui-s-2xs)}.euim-label__title{font:var(--eui-f-m-bold);color:var(--eui-c-text)}.euim-label__title ion-icon{font-size:var(--eui-f-size-m)}.euim-label__sub-title,.euim-label__meta{font:var(--eui-f-s);color:var(--eui-bc-neutral-80)}.euim-label__sub-title ion-icon,.euim-label__meta ion-icon{font-size:var(--eui-f-size-m)}.euim-label__title+.euim-label__sub-title,.euim-label__title+.euim-label__meta,.euim-label__sub-title+.euim-label__meta,.euim-label__sub-title+.euim-label__sub-title,.euim-label__meta+.euim-label__sub-title,.euim-label__meta+.euim-label__meta{margin-top:var(--eui-s-2xs)}.euim-label__euiTextTruncateWithLines{white-space:break-spaces;display:-webkit-box;-webkit-line-clamp:var(--euimLabelTruncateWithLines);-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.euim-label__truncate{white-space:break-spaces}.euim-label--primary{color:var(--eui-bc-primary-100)}.euim-label--secondary{color:var(--eui-bc-neutral-60)}.euim-label--default{color:var(--eui-bc-neutral-80)}.euim-label--dark{color:var(--eui-bc-neutral-100)}.euim-label--info{color:var(--eui-bc-info-100)}.euim-label--success{color:var(--eui-bc-success-100)}.euim-label--warning{color:var(--eui-bc-warning-140)}.euim-label--warning ion-icon{color:var(--eui-bc-warning-140)}.euim-label--danger{color:var(--eui-bc-danger-100)}.euim-label--accent{color:var(--eui-bc-accent-100)}.euim-label--white{color:var(--eui-bc-neutral-0)}.euim-label--size-2xs{font:var(--eui-f-2xs)}.euim-label--size-xs{font:var(--eui-f-xs)}.euim-label--size-s{font:var(--eui-f-s)}.euim-label--size-m{font:var(--eui-f-m)}.euim-label--size-l{font:var(--eui-f-l)}.euim-label--size-xl{font:var(--eui-f-xl)}.euim-label--size-2xl{font:var(--eui-f-2xl)}.euim-label--size-3xl{font:var(--eui-f-3xl)}.euim-label--size-4xl{font:var(--eui-f-4xl)}\n"] }]
+                    ], styles: [".euim-label{display:block;align-items:center;margin:0;padding:0;color:var(--eui-c-neutral);font:var(--eui-f-m-compact)}.euim-label ion-icon{vertical-align:bottom;margin-right:var(--eui-s-2xs)}.euim-label :not(ion-icon:first-child){margin-left:var(--eui-s-2xs)}.euim-label__title{font:var(--eui-f-m-bold-compact);color:var(--eui-c-neutral)}.euim-label__title ion-icon{font-size:var(--eui-f-size-m);min-height:var(--eui-is-s);min-width:var(--eui-is-s)}.euim-label__sub-title,.euim-label__meta{font:var(--eui-f-s-compact);color:var(--eui-c-neutral-light)}.euim-label__sub-title ion-icon,.euim-label__meta ion-icon{font-size:var(--eui-f-size-m);min-height:var(--eui-is-xs);min-width:var(--eui-is-xs)}.euim-label__title+.euim-label__sub-title,.euim-label__title+.euim-label__meta,.euim-label__sub-title+.euim-label__meta,.euim-label__sub-title+.euim-label__sub-title,.euim-label__meta+.euim-label__sub-title,.euim-label__meta+.euim-label__meta{margin-top:var(--eui-s-2xs)}.euim-label__euiTextTruncateWithLines{white-space:break-spaces;display:-webkit-box;-webkit-line-clamp:var(--euimLabelTruncateWithLines);-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.euim-label__truncate{white-space:break-spaces}.euim-label--primary{color:var(--eui-c-primary)}.euim-label--secondary{color:var(--eui-c-neutral-lighter)}.euim-label--default{color:var(--eui-bc-neutral-light)}.euim-label--dark{color:var(--eui-c-neutral)}.euim-label--info{color:var(--eui-c-info)}.euim-label--success{color:var(--eui-c-success)}.euim-label--warning{color:var(--eui-c-warning)}.euim-label--warning ion-icon{color:var(--eui-c-warning)}.euim-label--danger{color:var(--eui-c-danger)}.euim-label--white{color:var(--eui-c-white)}.euim-label--size-xs{font:var(--eui-f-xs-compact)}.euim-label--size-s{font:var(--eui-f-s-compact)}.euim-label--size-m{font:var(--eui-f-m-compact)}.euim-label--size-l{font:var(--eui-f-l-compact)}.euim-label--size-xl{font:var(--eui-f-xl-compact)}.euim-label--size-2xl{font:var(--eui-f-2xl-compact)}.euim-label--size-3xl{font:var(--eui-f-3xl-compact)}.euim-label--size-4xl{font:var(--eui-f-4xl-compact)}\n"] }]
         }], ctorParameters: () => [{ type: BaseStatesDirective }], propDecorators: { euimLabelTruncateWithLines: [{
                 type: HostBinding,
                 args: ['style.--euimLabelTruncateWithLines']
@@ -273,13 +274,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
             }] } });
 
 class EuimLabelModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimLabelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.5", ngImport: i0, type: EuimLabelModule, declarations: [EuimLabelComponent], imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimLabelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.10", ngImport: i0, type: EuimLabelModule, declarations: [EuimLabelComponent], imports: [CommonModule,
             IonicModule], exports: [EuimLabelComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimLabelModule, imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimLabelModule, imports: [CommonModule,
             IonicModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimLabelModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimLabelModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -307,10 +308,10 @@ class EuimNotificationItemComponent {
             this.baseStatesDirective.getCssClasses('euim-notification-item'),
         ].join(' ');
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimNotificationItemComponent, deps: [{ token: BaseStatesDirective }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: EuimNotificationItemComponent, selector: "euim-notification-item", host: { properties: { "class": "this.cssClasses" } }, hostDirectives: [{ directive: BaseStatesDirective, inputs: ["color", "color"] }], ngImport: i0, template: "", styles: [".euim-notification-item{display:block;border-radius:50%;width:var(--eui-s-xs);height:var(--eui-s-xs)}.euim-notification-item--primary{background:var(--eui-bc-primary-100)}.euim-notification-item--secondary{background:var(--eui-bc-neutral-60)}.euim-notification-item--info{background:var(--eui-bc-info-100)}.euim-notification-item--success{background:var(--eui-bc-success-100)}.euim-notification-item--warning{background:var(--eui-bc-warning-100)}.euim-notification-item--danger{background:var(--eui-bc-danger-100)}.euim-notification-item--accent{background:var(--eui-bc-accent-100)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimNotificationItemComponent, deps: [{ token: BaseStatesDirective }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.10", type: EuimNotificationItemComponent, selector: "euim-notification-item", host: { properties: { "class": "this.cssClasses" } }, hostDirectives: [{ directive: BaseStatesDirective, inputs: ["color", "color"] }], ngImport: i0, template: "", styles: [".euim-notification-item{display:block;border-radius:50%;width:var(--eui-s-xs);height:var(--eui-s-xs)}.euim-notification-item--primary{background:var(--eui-c-primary)}.euim-notification-item--default{background:var(--eui-c-neutral)}.euim-notification-item--info{background:var(--eui-c-info)}.euim-notification-item--success{background:var(--eui-c-success)}.euim-notification-item--warning{background:var(--eui-c-warning)}.euim-notification-item--danger{background:var(--eui-c-danger)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimNotificationItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimNotificationItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'euim-notification-item', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
                         {
@@ -319,20 +320,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
                                 'color',
                             ],
                         },
-                    ], template: "", styles: [".euim-notification-item{display:block;border-radius:50%;width:var(--eui-s-xs);height:var(--eui-s-xs)}.euim-notification-item--primary{background:var(--eui-bc-primary-100)}.euim-notification-item--secondary{background:var(--eui-bc-neutral-60)}.euim-notification-item--info{background:var(--eui-bc-info-100)}.euim-notification-item--success{background:var(--eui-bc-success-100)}.euim-notification-item--warning{background:var(--eui-bc-warning-100)}.euim-notification-item--danger{background:var(--eui-bc-danger-100)}.euim-notification-item--accent{background:var(--eui-bc-accent-100)}\n"] }]
+                    ], template: "", styles: [".euim-notification-item{display:block;border-radius:50%;width:var(--eui-s-xs);height:var(--eui-s-xs)}.euim-notification-item--primary{background:var(--eui-c-primary)}.euim-notification-item--default{background:var(--eui-c-neutral)}.euim-notification-item--info{background:var(--eui-c-info)}.euim-notification-item--success{background:var(--eui-c-success)}.euim-notification-item--warning{background:var(--eui-c-warning)}.euim-notification-item--danger{background:var(--eui-c-danger)}\n"] }]
         }], ctorParameters: () => [{ type: BaseStatesDirective }], propDecorators: { cssClasses: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
 
 class EuimNotificationItemModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimNotificationItemModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.5", ngImport: i0, type: EuimNotificationItemModule, declarations: [EuimNotificationItemComponent], imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimNotificationItemModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.10", ngImport: i0, type: EuimNotificationItemModule, declarations: [EuimNotificationItemComponent], imports: [CommonModule,
             IonicModule], exports: [EuimNotificationItemComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimNotificationItemModule, imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimNotificationItemModule, imports: [CommonModule,
             IonicModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimNotificationItemModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimNotificationItemModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -353,17 +354,17 @@ class EuimAppComponent {
         this.asService = asService;
         this.ionMenuId = 'main';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimAppComponent, deps: [{ token: EuimAppService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: EuimAppComponent, selector: "euim-app", inputs: { ionMenuId: "ionMenuId" }, ngImport: i0, template: "<ion-app>\n    <ng-content></ng-content>\n    <ion-router-outlet id=\"{{ionMenuId}}\"></ion-router-outlet>\n</ion-app>\n", dependencies: [{ kind: "component", type: i1.IonApp, selector: "ion-app" }, { kind: "component", type: i1.IonRouterOutlet, selector: "ion-router-outlet" }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimAppComponent, deps: [{ token: EuimAppService }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.10", type: EuimAppComponent, selector: "euim-app", inputs: { ionMenuId: "ionMenuId" }, ngImport: i0, template: "<ion-app>\n    <ng-content></ng-content>\n    <ion-router-outlet id=\"{{ionMenuId}}\"></ion-router-outlet>\n</ion-app>\n", dependencies: [{ kind: "component", type: i3.IonApp, selector: "ion-app" }, { kind: "component", type: i3.IonRouterOutlet, selector: "ion-router-outlet" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimAppComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimAppComponent, decorators: [{
             type: Component,
             args: [{ selector: 'euim-app', template: "<ion-app>\n    <ng-content></ng-content>\n    <ion-router-outlet id=\"{{ionMenuId}}\"></ion-router-outlet>\n</ion-app>\n" }]
         }], ctorParameters: () => [{ type: EuimAppService }], propDecorators: { ionMenuId: [{
                 type: Input
             }] } });
 
-class EuimAvatarIconComponent {
+class EuimAvatarComponent {
     constructor() {
         this.color = 'default';
         this.size = 'default';
@@ -376,20 +377,20 @@ class EuimAvatarIconComponent {
     }
     getCssClasses() {
         return [
-            'euim-avatar-icon',
-            this.size ? `euim-avatar-icon--size-${this.size}` : '',
-            this.fill ? `euim-avatar-icon--fill-${this.fill}` : '',
-            this.color ? `euim-avatar-icon--color-${this.color}` : '',
-            this.variant ? `euim-avatar-icon--variant-${this.variant}` : '',
-            this.borderColor ? `euim-avatar-icon--border-color-${this.borderColor}` : '',
+            'euim-avatar',
+            this.size ? `euim-avatar--size-${this.size}` : '',
+            this.fill ? `euim-avatar--fill-${this.fill}` : '',
+            this.color ? `euim-avatar--color-${this.color}` : '',
+            this.variant ? `euim-avatar--variant-${this.variant}` : '',
+            this.borderColor ? `euim-avatar--border-color-${this.borderColor}` : '',
         ].join(' ');
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimAvatarIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: EuimAvatarIconComponent, selector: "euim-avatar-icon", inputs: { color: "color", size: "size", fill: "fill", variant: "variant", borderColor: "borderColor" }, host: { properties: { "class": "this.cssClasses" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [".euim-avatar-icon{display:flex;justify-content:center;align-items:center;overflow:hidden;color:var(--eui-bc-neutral-100);border:none;box-sizing:border-box}.euim-avatar-icon--variant-default,.euim-avatar-icon--variant-rounded{border-radius:50%}.euim-avatar-icon--variant-rectangle{border-radius:0}.euim-avatar-icon--color-white{background-color:var(--eui-c-white);border-color:var(--eui-c-white)}.euim-avatar-icon--color-default{background-color:var(--eui-bc-neutral-15);border-color:var(--eui-bc-neutral-15);color:var(--eui-bc-neutral-100)}.euim-avatar-icon--color-dark{background-color:var(--eui-bc-neutral-100);border-color:var(--eui-bc-neutral-100);color:var(--eui-c-white)}.euim-avatar-icon--color-primary{background-color:var(--eui-bc-primary-100);border-color:var(--eui-bc-primary-100);color:var(--eui-bc-primary-100-contrast)}.euim-avatar-icon--color-info{background-color:var(--eui-bc-info-100);border-color:var(--eui-bc-info-100);color:var(--eui-bc-info-100-contrast)}.euim-avatar-icon--color-success{background-color:var(--eui-bc-success-100);border-color:var(--eui-bc-success-100);color:var(--eui-bc-success-100-contrast)}.euim-avatar-icon--color-warning{background-color:var(--eui-bc-warning-100);border-color:var(--eui-bc-warning-100);color:var(--eui-bc-warning-100-contrast)}.euim-avatar-icon--color-danger{background-color:var(--eui-bc-danger-100);border-color:var(--eui-bc-danger-100);color:var(--eui-bc-danger-100-contrast)}.euim-avatar-icon--border-color-primary{border-color:var(--eui-bc-primary-100)}.euim-avatar-icon--border-color-info{border-color:var(--eui-bc-info-100)}.euim-avatar-icon--border-color-success{border-color:var(--eui-bc-success-100)}.euim-avatar-icon--border-color-warning{border-color:var(--eui-bc-warning-100)}.euim-avatar-icon--border-color-danger{border-color:var(--eui-bc-danger-100)}.euim-avatar-icon[slot=start]{margin-inline-end:var(--eui-s-m)}.euim-avatar-icon[slot=end]{margin-inline-start:var(--eui-s-m)}.euim-avatar-icon[slot=start] euim-avatar{margin-inline-end:0}.euim-avatar-icon[slot=end] euim-avatar{margin-inline-start:0}.euim-avatar-icon--size-default,.euim-avatar-icon--size-auto{width:var(--eui-s-2xl);height:var(--eui-s-2xl);font-size:var(--eui-f-size-l)}.euim-avatar-icon--size-default ion-icon,.euim-avatar-icon--size-auto ion-icon{width:var(--eui-s-l);height:var(--eui-s-l)}.euim-avatar-icon--size-m{width:var(--eui-s-2xl);height:var(--eui-s-2xl);font-size:var(--eui-f-size-l)}.euim-avatar-icon--size-m ion-icon{width:var(--eui-s-l);height:var(--eui-s-l)}.euim-avatar-icon--size-s{width:var(--eui-s-l);height:var(--eui-s-l);font-size:var(--eui-f-size-m)}.euim-avatar-icon--size-s ion-icon{width:var(--eui-s-m);height:var(--eui-s-m)}.euim-avatar-icon--size-l{width:var(--eui-s-4xl);height:var(--eui-s-4xl);font-size:var(--eui-f-size-2xl)}.euim-avatar-icon--size-l ion-icon{width:var(--eui-s-2xl);height:var(--eui-s-2xl)}.euim-avatar-icon--fill-default,.euim-avatar-icon--fill-solid{border:none}.euim-avatar-icon--fill-outline{background-color:transparent!important;border-width:2px;border-style:solid}.euim-avatar-icon--fill-clear{background-color:transparent!important;border:none}.euim-avatar-icon--fill-outline-solid{border-width:2px;border-style:solid}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.10", type: EuimAvatarComponent, selector: "euim-avatar", inputs: { color: "color", size: "size", fill: "fill", variant: "variant", borderColor: "borderColor" }, host: { properties: { "class": "this.cssClasses" } }, ngImport: i0, template: "<ng-content select=\"euim-avatar-icon\"></ng-content>\n<ng-content select=\"euim-avatar-text\"></ng-content>\n<ng-content select=\"euim-avatar-image\"></ng-content>\n<ng-content select=\"euim-avatar-badge\"></ng-content>\n<ng-content select=\"euim-avatar-icon-sub\"></ng-content>\n", styles: [".euim-avatar{position:relative;display:flex;justify-content:center;align-items:center;color:var(--eui-c-neutral-bg);border:none;box-sizing:border-box}.euim-avatar--variant-default,.euim-avatar--variant-rounded{border-radius:50%}.euim-avatar__sub-icon{position:absolute;z-index:99;display:inline-flex;bottom:-6px;right:-6px}.euim-avatar__sub-icon .euim-avatar-icon--fill-outline-solid{border-width:2px;border-style:solid;border-color:var(--eui-c-neutral-contrast)}.euim-avatar--color-white{background-color:var(--eui-c-white);border-color:var(--eui-c-white)}.euim-avatar--color-default{background-color:var(--eui-c-neutral-bg);border-color:var(--eui-c-neutral-bg);color:var(--eui-c-neutral)}.euim-avatar--color-dark{background-color:var(--eui-c-neutral);border-color:var(--eui-c-neutral);color:var(--eui-c-neutral-contrast)}.euim-avatar--color-branding{background-color:var(--eui-c-branding);border-color:var(--eui-c-branding);color:var(--eui-c-branding-contrast)}.euim-avatar--color-primary{background-color:var(--eui-c-primary);border-color:var(--eui-c-primary);color:var(--eui-c-primary-contrast)}.euim-avatar--color-info{background-color:var(--eui-c-info);border-color:var(--eui-c-info);color:var(--eui-c-info-contrast)}.euim-avatar--color-success{background-color:var(--eui-c-success);border-color:var(--eui-c-success);color:var(--eui-c-success-contrast)}.euim-avatar--color-warning{background-color:var(--eui-c-warning);border-color:var(--eui-c-warning);color:var(--eui-c-warning-contrast)}.euim-avatar--color-danger{background-color:var(--eui-c-danger);border-color:var(--eui-c-danger);color:var(--eui-c-danger-contrast)}.euim-avatar--border-color-primary{border-color:var(--eui-c-primary)}.euim-avatar--border-color-info{border-color:var(--eui-c-info)}.euim-avatar--border-color-success{border-color:var(--eui-c-success)}.euim-avatar--border-color-warning{border-color:var(--eui-c-warning)}.euim-avatar--border-color-danger{border-color:var(--eui-c-danger)}.euim-avatar--color-primary.euim-avatar--fill-outline,.euim-avatar--color-primary.euim-avatar--fill-clear,.euim-avatar--color-info.euim-avatar--fill-outline,.euim-avatar--color-info.euim-avatar--fill-clear{color:var(--eui-c-primary)}.euim-avatar--color-success.euim-avatar--fill-outline,.euim-avatar--color-success.euim-avatar--fill-clear{color:var(--eui-c-success)}.euim-avatar--color-warning.euim-avatar--fill-outline,.euim-avatar--color-warning.euim-avatar--fill-clear{color:var(--eui-c-warning)}.euim-avatar--color-danger.euim-avatar--fill-outline,.euim-avatar--color-danger.euim-avatar--fill-clear{color:var(--eui-c-danger)}.euim-avatar--color-default.euim-avatar--fill-outline,.euim-avatar--color-default.euim-avatar--fill-clear{color:var(--eui-c-neutral)}.euim-avatar[slot=start]{margin-inline-end:var(--eui-s-m)}.euim-avatar[slot=end]{margin-inline-start:var(--eui-s-m)}.euim-avatar[slot=start] euim-avatar{margin-inline-end:0}.euim-avatar[slot=end] euim-avatar{margin-inline-start:0}.euim-avatar--size-default,.euim-avatar--size-auto{width:var(--eui-s-3xl);height:var(--eui-s-3xl);font:var(--eui-f-m-compact)}.euim-avatar--size-default ion-icon,.euim-avatar--size-auto ion-icon{width:var(--eui-is-m);height:var(--eui-is-m)}.euim-avatar--size-m{width:var(--eui-s-3xl);height:var(--eui-s-3xl);font:var(--eui-f-m-compact)}.euim-avatar--size-m ion-icon{width:var(--eui-is-m);height:var(--eui-is-m)}.euim-avatar--size-s{width:var(--eui-is-m);height:var(--eui-is-m);font:var(--eui-f-xs-compact)}.euim-avatar--size-s ion-icon{width:var(--eui-is-xs);height:var(--eui-is-xs)}.euim-avatar--size-l{width:var(--eui-is-4xl);height:var(--eui-is-4xl);font:var(--eui-f-xl-compact)}.euim-avatar--size-l ion-icon{width:var(--eui-is-xl);height:var(--eui-is-xl)}.euim-avatar--fill-default,.euim-avatar--fill-solid{border:none}.euim-avatar--fill-outline{background-color:transparent!important;border-width:2px;border-style:solid}.euim-avatar--fill-clear{background-color:transparent!important;border:none}.euim-avatar--fill-outline-solid{border-width:2px;border-style:solid}.euim-avatar-icon-sub{position:absolute;z-index:99;display:inline-flex;bottom:-6px;right:-6px;align-items:center;justify-content:center}.euim-avatar-icon-sub--variant-default,.euim-avatar-icon-sub--variant-rounded{border-radius:50%}.euim-avatar-icon-sub--variant-rectangle{border-radius:0}.euim-avatar-icon-sub--size-default,.euim-avatar-icon-sub--size-auto{width:var(--eui-is-m);height:var(--eui-is-m);font:var(--eui-f-xs-compact)}.euim-avatar-icon-sub--size-default ion-icon,.euim-avatar-icon-sub--size-auto ion-icon{width:var(--eui-is-xs);height:var(--eui-is-xs)}.euim-avatar-icon-sub--size-m{width:var(--eui-is-m);height:var(--eui-is-m);font:var(--eui-f-xs-compact)}.euim-avatar-icon-sub--size-m ion-icon{width:var(--eui-is-xs);height:var(--eui-is-xs)}.euim-avatar-icon-sub--size-l{width:var(--eui-s-3xl);height:var(--eui-s-3xl);font:var(--eui-f-m-compact)}.euim-avatar-icon-sub--size-l ion-icon{width:var(--eui-is-m);height:var(--eui-is-m)}.euim-avatar-icon-sub--color-white{background-color:var(--eui-c-white);border-color:var(--eui-c-white)}.euim-avatar-icon-sub--color-default{background-color:var(--eui-c-neutral-bg);border-color:var(--eui-c-white);color:var(--eui-c-neutral)}.euim-avatar-icon-sub--color-dark{background-color:var(--eui-c-neutral);border-color:var(--eui-c-neutral);color:var(--eui-c-neutral-contrast)}.euim-avatar-icon-sub--color-branding{background-color:var(--eui-c-branding);border-color:var(--eui-c-branding);color:var(--eui-c-branding-contrast)}.euim-avatar-icon-sub--color-primary{background-color:var(--eui-c-primary);border-color:var(--eui-c-primary);color:var(--eui-c-primary-contrast)}.euim-avatar-icon-sub--color-info{background-color:var(--eui-c-info);border-color:var(--eui-c-info);color:var(--eui-c-info-contrast)}.euim-avatar-icon-sub--color-success{background-color:var(--eui-c-success);border-color:var(--eui-c-success);color:var(--eui-c-success-contrast)}.euim-avatar-icon-sub--color-warning{background-color:var(--eui-c-warning);border-color:var(--eui-c-warning);color:var(--eui-c-warning-contrast)}.euim-avatar-icon-sub--color-danger{background-color:var(--eui-c-danger);border-color:var(--eui-c-danger);color:var(--eui-c-danger-contrast)}.euim-avatar-icon-sub--border-color-primary{border-color:var(--eui-c-primary)}.euim-avatar-icon-sub--border-color-info{border-color:var(--eui-c-info)}.euim-avatar-icon-sub--border-color-success{border-color:var(--eui-c-success)}.euim-avatar-icon-sub--border-color-warning{border-color:var(--eui-c-warning)}.euim-avatar-icon-sub--border-color-danger{border-color:var(--eui-c-danger)}.euim-avatar-icon-sub--fill-default,.euim-avatar-icon-sub--fill-outline-solid{border-width:2px;border-style:solid}.euim-avatar-icon-sub--fill-outline{background-color:transparent!important;border-width:2px;border-style:solid}.euim-avatar-icon-sub--fill-clear{background-color:transparent!important;border:none}.euim-avatar-icon-sub--fill-outline-solid{border-width:2px;border-style:solid}.euim-avatar-icon{display:flex;align-items:center;justify-content:center}.euim-avatar-badge--position-top,.euim-avatar-badge--position-default{position:absolute;right:calc(-1 * var(--eui-s-s) / 2);top:calc(-1 * var(--eui-s-m) / 2)}.euim-avatar--variant-default .euim-avatar-image,.euim-avatar--variant-rounded .euim-avatar-image{background-size:cover;height:100%;width:100%}.euim-avatar--variant-default .euim-avatar-image img,.euim-avatar--variant-rounded .euim-avatar-image img{object-fit:cover;border-radius:50%;height:100%;width:100%}.euim-avatar-text--color-default{color:var(--eui-c-neutral)}.euim-avatar-text--color-primary{color:var(--eui-c-primary)}.euim-avatar-text--color-info{color:var(--eui-c-info)}.euim-avatar-text--color-success{color:var(--eui-c-success)}.euim-avatar-text--color-warning{color:var(--eui-c-warning)}.euim-avatar-text--color-danger{color:var(--eui-c-danger)}.euim-avatar--size-default .euim-avatar-text,.euim-avatar--size-l .euim-avatar-text{font:var(--eui-f-m-compact)}.euim-avatar--size-m .euim-avatar-text{font:var(--eui-f-xs-compact)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimAvatarIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimAvatarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'euim-avatar-icon', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n", styles: [".euim-avatar-icon{display:flex;justify-content:center;align-items:center;overflow:hidden;color:var(--eui-bc-neutral-100);border:none;box-sizing:border-box}.euim-avatar-icon--variant-default,.euim-avatar-icon--variant-rounded{border-radius:50%}.euim-avatar-icon--variant-rectangle{border-radius:0}.euim-avatar-icon--color-white{background-color:var(--eui-c-white);border-color:var(--eui-c-white)}.euim-avatar-icon--color-default{background-color:var(--eui-bc-neutral-15);border-color:var(--eui-bc-neutral-15);color:var(--eui-bc-neutral-100)}.euim-avatar-icon--color-dark{background-color:var(--eui-bc-neutral-100);border-color:var(--eui-bc-neutral-100);color:var(--eui-c-white)}.euim-avatar-icon--color-primary{background-color:var(--eui-bc-primary-100);border-color:var(--eui-bc-primary-100);color:var(--eui-bc-primary-100-contrast)}.euim-avatar-icon--color-info{background-color:var(--eui-bc-info-100);border-color:var(--eui-bc-info-100);color:var(--eui-bc-info-100-contrast)}.euim-avatar-icon--color-success{background-color:var(--eui-bc-success-100);border-color:var(--eui-bc-success-100);color:var(--eui-bc-success-100-contrast)}.euim-avatar-icon--color-warning{background-color:var(--eui-bc-warning-100);border-color:var(--eui-bc-warning-100);color:var(--eui-bc-warning-100-contrast)}.euim-avatar-icon--color-danger{background-color:var(--eui-bc-danger-100);border-color:var(--eui-bc-danger-100);color:var(--eui-bc-danger-100-contrast)}.euim-avatar-icon--border-color-primary{border-color:var(--eui-bc-primary-100)}.euim-avatar-icon--border-color-info{border-color:var(--eui-bc-info-100)}.euim-avatar-icon--border-color-success{border-color:var(--eui-bc-success-100)}.euim-avatar-icon--border-color-warning{border-color:var(--eui-bc-warning-100)}.euim-avatar-icon--border-color-danger{border-color:var(--eui-bc-danger-100)}.euim-avatar-icon[slot=start]{margin-inline-end:var(--eui-s-m)}.euim-avatar-icon[slot=end]{margin-inline-start:var(--eui-s-m)}.euim-avatar-icon[slot=start] euim-avatar{margin-inline-end:0}.euim-avatar-icon[slot=end] euim-avatar{margin-inline-start:0}.euim-avatar-icon--size-default,.euim-avatar-icon--size-auto{width:var(--eui-s-2xl);height:var(--eui-s-2xl);font-size:var(--eui-f-size-l)}.euim-avatar-icon--size-default ion-icon,.euim-avatar-icon--size-auto ion-icon{width:var(--eui-s-l);height:var(--eui-s-l)}.euim-avatar-icon--size-m{width:var(--eui-s-2xl);height:var(--eui-s-2xl);font-size:var(--eui-f-size-l)}.euim-avatar-icon--size-m ion-icon{width:var(--eui-s-l);height:var(--eui-s-l)}.euim-avatar-icon--size-s{width:var(--eui-s-l);height:var(--eui-s-l);font-size:var(--eui-f-size-m)}.euim-avatar-icon--size-s ion-icon{width:var(--eui-s-m);height:var(--eui-s-m)}.euim-avatar-icon--size-l{width:var(--eui-s-4xl);height:var(--eui-s-4xl);font-size:var(--eui-f-size-2xl)}.euim-avatar-icon--size-l ion-icon{width:var(--eui-s-2xl);height:var(--eui-s-2xl)}.euim-avatar-icon--fill-default,.euim-avatar-icon--fill-solid{border:none}.euim-avatar-icon--fill-outline{background-color:transparent!important;border-width:2px;border-style:solid}.euim-avatar-icon--fill-clear{background-color:transparent!important;border:none}.euim-avatar-icon--fill-outline-solid{border-width:2px;border-style:solid}\n"] }]
+            args: [{ selector: 'euim-avatar', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"euim-avatar-icon\"></ng-content>\n<ng-content select=\"euim-avatar-text\"></ng-content>\n<ng-content select=\"euim-avatar-image\"></ng-content>\n<ng-content select=\"euim-avatar-badge\"></ng-content>\n<ng-content select=\"euim-avatar-icon-sub\"></ng-content>\n", styles: [".euim-avatar{position:relative;display:flex;justify-content:center;align-items:center;color:var(--eui-c-neutral-bg);border:none;box-sizing:border-box}.euim-avatar--variant-default,.euim-avatar--variant-rounded{border-radius:50%}.euim-avatar__sub-icon{position:absolute;z-index:99;display:inline-flex;bottom:-6px;right:-6px}.euim-avatar__sub-icon .euim-avatar-icon--fill-outline-solid{border-width:2px;border-style:solid;border-color:var(--eui-c-neutral-contrast)}.euim-avatar--color-white{background-color:var(--eui-c-white);border-color:var(--eui-c-white)}.euim-avatar--color-default{background-color:var(--eui-c-neutral-bg);border-color:var(--eui-c-neutral-bg);color:var(--eui-c-neutral)}.euim-avatar--color-dark{background-color:var(--eui-c-neutral);border-color:var(--eui-c-neutral);color:var(--eui-c-neutral-contrast)}.euim-avatar--color-branding{background-color:var(--eui-c-branding);border-color:var(--eui-c-branding);color:var(--eui-c-branding-contrast)}.euim-avatar--color-primary{background-color:var(--eui-c-primary);border-color:var(--eui-c-primary);color:var(--eui-c-primary-contrast)}.euim-avatar--color-info{background-color:var(--eui-c-info);border-color:var(--eui-c-info);color:var(--eui-c-info-contrast)}.euim-avatar--color-success{background-color:var(--eui-c-success);border-color:var(--eui-c-success);color:var(--eui-c-success-contrast)}.euim-avatar--color-warning{background-color:var(--eui-c-warning);border-color:var(--eui-c-warning);color:var(--eui-c-warning-contrast)}.euim-avatar--color-danger{background-color:var(--eui-c-danger);border-color:var(--eui-c-danger);color:var(--eui-c-danger-contrast)}.euim-avatar--border-color-primary{border-color:var(--eui-c-primary)}.euim-avatar--border-color-info{border-color:var(--eui-c-info)}.euim-avatar--border-color-success{border-color:var(--eui-c-success)}.euim-avatar--border-color-warning{border-color:var(--eui-c-warning)}.euim-avatar--border-color-danger{border-color:var(--eui-c-danger)}.euim-avatar--color-primary.euim-avatar--fill-outline,.euim-avatar--color-primary.euim-avatar--fill-clear,.euim-avatar--color-info.euim-avatar--fill-outline,.euim-avatar--color-info.euim-avatar--fill-clear{color:var(--eui-c-primary)}.euim-avatar--color-success.euim-avatar--fill-outline,.euim-avatar--color-success.euim-avatar--fill-clear{color:var(--eui-c-success)}.euim-avatar--color-warning.euim-avatar--fill-outline,.euim-avatar--color-warning.euim-avatar--fill-clear{color:var(--eui-c-warning)}.euim-avatar--color-danger.euim-avatar--fill-outline,.euim-avatar--color-danger.euim-avatar--fill-clear{color:var(--eui-c-danger)}.euim-avatar--color-default.euim-avatar--fill-outline,.euim-avatar--color-default.euim-avatar--fill-clear{color:var(--eui-c-neutral)}.euim-avatar[slot=start]{margin-inline-end:var(--eui-s-m)}.euim-avatar[slot=end]{margin-inline-start:var(--eui-s-m)}.euim-avatar[slot=start] euim-avatar{margin-inline-end:0}.euim-avatar[slot=end] euim-avatar{margin-inline-start:0}.euim-avatar--size-default,.euim-avatar--size-auto{width:var(--eui-s-3xl);height:var(--eui-s-3xl);font:var(--eui-f-m-compact)}.euim-avatar--size-default ion-icon,.euim-avatar--size-auto ion-icon{width:var(--eui-is-m);height:var(--eui-is-m)}.euim-avatar--size-m{width:var(--eui-s-3xl);height:var(--eui-s-3xl);font:var(--eui-f-m-compact)}.euim-avatar--size-m ion-icon{width:var(--eui-is-m);height:var(--eui-is-m)}.euim-avatar--size-s{width:var(--eui-is-m);height:var(--eui-is-m);font:var(--eui-f-xs-compact)}.euim-avatar--size-s ion-icon{width:var(--eui-is-xs);height:var(--eui-is-xs)}.euim-avatar--size-l{width:var(--eui-is-4xl);height:var(--eui-is-4xl);font:var(--eui-f-xl-compact)}.euim-avatar--size-l ion-icon{width:var(--eui-is-xl);height:var(--eui-is-xl)}.euim-avatar--fill-default,.euim-avatar--fill-solid{border:none}.euim-avatar--fill-outline{background-color:transparent!important;border-width:2px;border-style:solid}.euim-avatar--fill-clear{background-color:transparent!important;border:none}.euim-avatar--fill-outline-solid{border-width:2px;border-style:solid}.euim-avatar-icon-sub{position:absolute;z-index:99;display:inline-flex;bottom:-6px;right:-6px;align-items:center;justify-content:center}.euim-avatar-icon-sub--variant-default,.euim-avatar-icon-sub--variant-rounded{border-radius:50%}.euim-avatar-icon-sub--variant-rectangle{border-radius:0}.euim-avatar-icon-sub--size-default,.euim-avatar-icon-sub--size-auto{width:var(--eui-is-m);height:var(--eui-is-m);font:var(--eui-f-xs-compact)}.euim-avatar-icon-sub--size-default ion-icon,.euim-avatar-icon-sub--size-auto ion-icon{width:var(--eui-is-xs);height:var(--eui-is-xs)}.euim-avatar-icon-sub--size-m{width:var(--eui-is-m);height:var(--eui-is-m);font:var(--eui-f-xs-compact)}.euim-avatar-icon-sub--size-m ion-icon{width:var(--eui-is-xs);height:var(--eui-is-xs)}.euim-avatar-icon-sub--size-l{width:var(--eui-s-3xl);height:var(--eui-s-3xl);font:var(--eui-f-m-compact)}.euim-avatar-icon-sub--size-l ion-icon{width:var(--eui-is-m);height:var(--eui-is-m)}.euim-avatar-icon-sub--color-white{background-color:var(--eui-c-white);border-color:var(--eui-c-white)}.euim-avatar-icon-sub--color-default{background-color:var(--eui-c-neutral-bg);border-color:var(--eui-c-white);color:var(--eui-c-neutral)}.euim-avatar-icon-sub--color-dark{background-color:var(--eui-c-neutral);border-color:var(--eui-c-neutral);color:var(--eui-c-neutral-contrast)}.euim-avatar-icon-sub--color-branding{background-color:var(--eui-c-branding);border-color:var(--eui-c-branding);color:var(--eui-c-branding-contrast)}.euim-avatar-icon-sub--color-primary{background-color:var(--eui-c-primary);border-color:var(--eui-c-primary);color:var(--eui-c-primary-contrast)}.euim-avatar-icon-sub--color-info{background-color:var(--eui-c-info);border-color:var(--eui-c-info);color:var(--eui-c-info-contrast)}.euim-avatar-icon-sub--color-success{background-color:var(--eui-c-success);border-color:var(--eui-c-success);color:var(--eui-c-success-contrast)}.euim-avatar-icon-sub--color-warning{background-color:var(--eui-c-warning);border-color:var(--eui-c-warning);color:var(--eui-c-warning-contrast)}.euim-avatar-icon-sub--color-danger{background-color:var(--eui-c-danger);border-color:var(--eui-c-danger);color:var(--eui-c-danger-contrast)}.euim-avatar-icon-sub--border-color-primary{border-color:var(--eui-c-primary)}.euim-avatar-icon-sub--border-color-info{border-color:var(--eui-c-info)}.euim-avatar-icon-sub--border-color-success{border-color:var(--eui-c-success)}.euim-avatar-icon-sub--border-color-warning{border-color:var(--eui-c-warning)}.euim-avatar-icon-sub--border-color-danger{border-color:var(--eui-c-danger)}.euim-avatar-icon-sub--fill-default,.euim-avatar-icon-sub--fill-outline-solid{border-width:2px;border-style:solid}.euim-avatar-icon-sub--fill-outline{background-color:transparent!important;border-width:2px;border-style:solid}.euim-avatar-icon-sub--fill-clear{background-color:transparent!important;border:none}.euim-avatar-icon-sub--fill-outline-solid{border-width:2px;border-style:solid}.euim-avatar-icon{display:flex;align-items:center;justify-content:center}.euim-avatar-badge--position-top,.euim-avatar-badge--position-default{position:absolute;right:calc(-1 * var(--eui-s-s) / 2);top:calc(-1 * var(--eui-s-m) / 2)}.euim-avatar--variant-default .euim-avatar-image,.euim-avatar--variant-rounded .euim-avatar-image{background-size:cover;height:100%;width:100%}.euim-avatar--variant-default .euim-avatar-image img,.euim-avatar--variant-rounded .euim-avatar-image img{object-fit:cover;border-radius:50%;height:100%;width:100%}.euim-avatar-text--color-default{color:var(--eui-c-neutral)}.euim-avatar-text--color-primary{color:var(--eui-c-primary)}.euim-avatar-text--color-info{color:var(--eui-c-info)}.euim-avatar-text--color-success{color:var(--eui-c-success)}.euim-avatar-text--color-warning{color:var(--eui-c-warning)}.euim-avatar-text--color-danger{color:var(--eui-c-danger)}.euim-avatar--size-default .euim-avatar-text,.euim-avatar--size-l .euim-avatar-text{font:var(--eui-f-m-compact)}.euim-avatar--size-m .euim-avatar-text{font:var(--eui-f-xs-compact)}\n"] }]
         }], propDecorators: { color: [{
                 type: Input
             }], size: [{
@@ -405,6 +406,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
                 args: ['class']
             }] } });
 
+class EuimAvatarIconComponent {
+    constructor() {
+        this.string = 'euim-avatar-icon';
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimAvatarIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.10", type: EuimAvatarIconComponent, selector: "euim-avatar-icon", host: { properties: { "class": "this.string" } }, ngImport: i0, template: "<ng-content></ng-content>\n" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimAvatarIconComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'euim-avatar-icon', template: "<ng-content></ng-content>\n" }]
+        }], propDecorators: { string: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
 class EuimEmptyListPlaceholderComponent {
     get cssClasses() {
         return this.getCssClasses();
@@ -417,12 +433,12 @@ class EuimEmptyListPlaceholderComponent {
             this.euimMarginBottomSmall ? 'euim-empty-list-placeholder--margin-bottom-small' : '',
         ].join(' ');
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimEmptyListPlaceholderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", type: EuimEmptyListPlaceholderComponent, selector: "euim-empty-list-placeholder", inputs: { message: "message", icon: "icon", description: "description", button: "button", euimMarginTopLarge: ["euimMarginTopLarge", "euimMarginTopLarge", booleanAttribute], euimMarginTopSmall: ["euimMarginTopSmall", "euimMarginTopSmall", booleanAttribute], euimMarginBottomSmall: ["euimMarginBottomSmall", "euimMarginBottomSmall", booleanAttribute] }, host: { properties: { "class": "this.cssClasses" } }, ngImport: i0, template: "@if (icon) {\n  <ion-icon [name]=\"icon\" size=\"large\" class=\"euim-empty-list-placeholder__icon\"></ion-icon>\n}\n@if ((!icon && !message && !description)) {\n  <ion-icon name=\"search-sharp\" size=\"large\"\n  class=\"euim-empty-list-placeholder__icon\"></ion-icon>\n}\n@if (message || (!icon && !message && !description)) {\n  <div class=\"euim-empty-list-placeholder__message\">\n    {{ message || 'euim.empty-list-placeholder.message' | translate }}\n  </div>\n}\n@if (description || (!icon && !message && !description)) {\n  <div class=\"euim-empty-list-placeholder__description\">\n    {{ description || 'euim.empty-list-placeholder.description' | translate }}\n  </div>\n}\n<ng-content></ng-content>", styles: [".euim-empty-list-placeholder{width:100%;display:grid;grid-template-columns:1fr;grid-template-rows:auto;grid-column-gap:0;grid-row-gap:var(--eui-s-2xs);justify-content:center;justify-items:center;align-items:center;margin:auto}.euim-empty-list-placeholder--margin-top-large{margin-top:calc(9 * var(--eui-s-m))}.euim-empty-list-placeholder--margin-top-small{margin-top:var(--eui-s-m)}.euim-empty-list-placeholder--margin-bottom-small{margin-bottom:var(--eui-s-m)}.euim-empty-list-placeholder__icon{color:var(--eui-bc-neutral-80)}.euim-empty-list-placeholder__message{font:var(--eui-f-m);font:var(--eui-f-bold);color:var(--eui-bc-neutral-80)}.euim-empty-list-placeholder__description{font:var(--eui-f-s);color:var(--eui-bc-neutral-80)}\n"], dependencies: [{ kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimEmptyListPlaceholderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.10", type: EuimEmptyListPlaceholderComponent, selector: "euim-empty-list-placeholder", inputs: { message: "message", icon: "icon", description: "description", button: "button", euimMarginTopLarge: ["euimMarginTopLarge", "euimMarginTopLarge", booleanAttribute], euimMarginTopSmall: ["euimMarginTopSmall", "euimMarginTopSmall", booleanAttribute], euimMarginBottomSmall: ["euimMarginBottomSmall", "euimMarginBottomSmall", booleanAttribute] }, host: { properties: { "class": "this.cssClasses" } }, ngImport: i0, template: "@if (icon) {\n  <ion-icon [name]=\"icon\" class=\"euim-empty-list-placeholder__icon\"></ion-icon>\n}\n@if ((!icon && !message && !description)) {\n  <ion-icon name=\"search-sharp\"\n  class=\"euim-empty-list-placeholder__icon\"></ion-icon>\n}\n@if (message || (!icon && !message && !description)) {\n  <div class=\"euim-empty-list-placeholder__message\">\n    {{ message || 'euim.empty-list-placeholder.message' | translate }}\n  </div>\n}\n@if (description || (!icon && !message && !description)) {\n  <div class=\"euim-empty-list-placeholder__description\">\n    {{ description || 'euim.empty-list-placeholder.description' | translate }}\n  </div>\n}\n<ng-content></ng-content>\n", styles: [".euim-empty-list-placeholder{width:100%;display:grid;grid-template-columns:1fr;grid-template-rows:auto;grid-column-gap:0;grid-row-gap:var(--eui-s-2xs);justify-content:center;justify-items:center;align-items:center;margin:auto}.euim-empty-list-placeholder--margin-top-large{margin-top:calc(9 * var(--eui-s-m))}.euim-empty-list-placeholder--margin-top-small{margin-top:var(--eui-s-m)}.euim-empty-list-placeholder--margin-bottom-small{margin-bottom:var(--eui-s-m)}.euim-empty-list-placeholder__icon{color:var(--eui-c-neutral-light);width:var(--eui-is-l);height:var(--eui-is-l)}.euim-empty-list-placeholder__message{font:var(--eui-f-m-bold-compact);color:var(--eui-c-neutral-light)}.euim-empty-list-placeholder__description{font:var(--eui-f-s-compact);color:var(--eui-c-neutral-light)}\n"], dependencies: [{ kind: "component", type: i3.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimEmptyListPlaceholderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimEmptyListPlaceholderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'euim-empty-list-placeholder', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (icon) {\n  <ion-icon [name]=\"icon\" size=\"large\" class=\"euim-empty-list-placeholder__icon\"></ion-icon>\n}\n@if ((!icon && !message && !description)) {\n  <ion-icon name=\"search-sharp\" size=\"large\"\n  class=\"euim-empty-list-placeholder__icon\"></ion-icon>\n}\n@if (message || (!icon && !message && !description)) {\n  <div class=\"euim-empty-list-placeholder__message\">\n    {{ message || 'euim.empty-list-placeholder.message' | translate }}\n  </div>\n}\n@if (description || (!icon && !message && !description)) {\n  <div class=\"euim-empty-list-placeholder__description\">\n    {{ description || 'euim.empty-list-placeholder.description' | translate }}\n  </div>\n}\n<ng-content></ng-content>", styles: [".euim-empty-list-placeholder{width:100%;display:grid;grid-template-columns:1fr;grid-template-rows:auto;grid-column-gap:0;grid-row-gap:var(--eui-s-2xs);justify-content:center;justify-items:center;align-items:center;margin:auto}.euim-empty-list-placeholder--margin-top-large{margin-top:calc(9 * var(--eui-s-m))}.euim-empty-list-placeholder--margin-top-small{margin-top:var(--eui-s-m)}.euim-empty-list-placeholder--margin-bottom-small{margin-bottom:var(--eui-s-m)}.euim-empty-list-placeholder__icon{color:var(--eui-bc-neutral-80)}.euim-empty-list-placeholder__message{font:var(--eui-f-m);font:var(--eui-f-bold);color:var(--eui-bc-neutral-80)}.euim-empty-list-placeholder__description{font:var(--eui-f-s);color:var(--eui-bc-neutral-80)}\n"] }]
+            args: [{ selector: 'euim-empty-list-placeholder', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (icon) {\n  <ion-icon [name]=\"icon\" class=\"euim-empty-list-placeholder__icon\"></ion-icon>\n}\n@if ((!icon && !message && !description)) {\n  <ion-icon name=\"search-sharp\"\n  class=\"euim-empty-list-placeholder__icon\"></ion-icon>\n}\n@if (message || (!icon && !message && !description)) {\n  <div class=\"euim-empty-list-placeholder__message\">\n    {{ message || 'euim.empty-list-placeholder.message' | translate }}\n  </div>\n}\n@if (description || (!icon && !message && !description)) {\n  <div class=\"euim-empty-list-placeholder__description\">\n    {{ description || 'euim.empty-list-placeholder.description' | translate }}\n  </div>\n}\n<ng-content></ng-content>\n", styles: [".euim-empty-list-placeholder{width:100%;display:grid;grid-template-columns:1fr;grid-template-rows:auto;grid-column-gap:0;grid-row-gap:var(--eui-s-2xs);justify-content:center;justify-items:center;align-items:center;margin:auto}.euim-empty-list-placeholder--margin-top-large{margin-top:calc(9 * var(--eui-s-m))}.euim-empty-list-placeholder--margin-top-small{margin-top:var(--eui-s-m)}.euim-empty-list-placeholder--margin-bottom-small{margin-bottom:var(--eui-s-m)}.euim-empty-list-placeholder__icon{color:var(--eui-c-neutral-light);width:var(--eui-is-l);height:var(--eui-is-l)}.euim-empty-list-placeholder__message{font:var(--eui-f-m-bold-compact);color:var(--eui-c-neutral-light)}.euim-empty-list-placeholder__description{font:var(--eui-f-s-compact);color:var(--eui-c-neutral-light)}\n"] }]
         }], propDecorators: { message: [{
                 type: Input
             }], icon: [{
@@ -446,68 +462,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
             }] } });
 
 class EuimLanguageListComponent {
-    constructor(cd, translateService, appShellService, appService, modalCtrl, platform) {
-        this.cd = cd;
-        this.translateService = translateService;
+    constructor(
+    /**
+     * @deprecated will be removed in eUI Mobile v19.
+     */
+    appShellService, 
+    /**
+     * @deprecated will be removed in eUI Mobile v19.
+     */
+    appService, modalCtrl, i18nService) {
         this.appShellService = appShellService;
         this.appService = appService;
         this.modalCtrl = modalCtrl;
-        this.platform = platform;
-        this.destroy$ = new Subject();
-        this.platform.keyboardDidShow.subscribe(() => {
-            this.isKeyboardShown = true;
-        });
-        this.platform.keyboardDidHide.subscribe(() => {
-            this.isKeyboardShown = false;
-        });
+        this.i18nService = i18nService;
     }
     ngOnInit() {
-        this.appShellService.state$.pipe(takeUntil(this.destroy$), distinctUntilKeyChanged('languages')).subscribe((state) => {
-            this.languages = (state.languages) ?
-                EuiEuLanguages.getOrderedLanguages(state.languages) :
-                EuiEuLanguages.getLanguages();
-            this.euLanguageList =
-                EuiEuLanguages.getOrderedLanguages(EuiEuLanguages.filterEULanguages(this.languages));
-            this.firstElementFromEUList = this.euLanguageList[0];
-            this.lastElementFromEUList = this.euLanguageList[this.euLanguageList?.length - 1];
-            this.nonEULanguageList =
-                [...EuiEuLanguages.getOrderedLanguages(EuiEuLanguages.filterNonEULanguages(this.languages))];
-            this.firstElementFromNonEUList = this.nonEULanguageList[0];
-            this.languagesSortedByEUAndNonEU = [...this.euLanguageList, ...this.nonEULanguageList];
-            this.results = [...this.languagesSortedByEUAndNonEU];
-            this.cd.detectChanges();
-        });
-        this.appShellService.state$.pipe(takeUntil(this.destroy$), distinctUntilKeyChanged('activeLanguage')).subscribe((state) => {
-            this.selectedLanguage = {
-                code: state.activeLanguage,
-                label: this.getLanguageLabel(state.activeLanguage),
-            };
-            this.cd.detectChanges();
-        });
-    }
-    ngOnDestroy() {
-        this.destroy$.next(true);
-        this.destroy$.unsubscribe();
+        this.setLanguages();
     }
     onLanguageSelected(language) {
-        this.translateService.use(language.code);
-        // this.appService.isLanguageListVisible = false;
-        this.appShellService.setState({
-            ...this.appShellService.state,
-            activeLanguage: language.code,
-        });
+        this.i18nService.updateState({ activeLang: language.code });
         this.modalCtrl.dismiss(null, 'cancel');
     }
-    onLanguageListClose() {
-        this.appService.isLanguageListVisible = false;
-    }
-    getLanguageLabel(languageCode) {
-        for (const language of this.languages) {
-            if (language.code === languageCode) {
-                return language.label;
-            }
+    isLastElementOfArray(array, element) {
+        if (array.length === 0) {
+            return false;
         }
-        return null;
+        return array[array.length - 1] === element;
+    }
+    setLanguages() {
+        this.euLanguageList =
+            EuiEuLanguages.getOrderedLanguages(EuiEuLanguages.filterEULanguages(this.languages));
+        this.nonEULanguageList =
+            [...EuiEuLanguages.getOrderedLanguages(EuiEuLanguages.filterNonEULanguages(this.languages))];
+        this.languagesSortedByEUAndNonEU = [...this.euLanguageList, ...this.nonEULanguageList];
+        this.results = [...this.languagesSortedByEUAndNonEU];
     }
     onClose() {
         return this.modalCtrl.dismiss(null, 'cancel');
@@ -519,39 +507,47 @@ class EuimLanguageListComponent {
                 d.label.toLowerCase().indexOf(query) > -1;
         });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimLanguageListComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.TranslateService }, { token: i2.EuiAppShellService }, { token: EuimAppService }, { token: i1.ModalController }, { token: i1.Platform }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", type: EuimLanguageListComponent, selector: "euim-language-list", ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-buttons slot=\"start\">\n      <ion-button (click)=\"onClose()\">\n        <ion-icon name=\"close-sharp\" slot=\"icon-only\"></ion-icon>\n      </ion-button>\n    </ion-buttons>\n    <ion-title> {{'euim.language-list.SELECT-LANGUAGE' | translate }}</ion-title>\n  </ion-toolbar>\n  <ion-toolbar color=\"primary\" class=\"euim-language-selector__search\">\n    <ion-searchbar (ionChange)=\"handleChange($event)\"></ion-searchbar>\n  </ion-toolbar>\n</ion-header>\n<ion-content>\n  @if (results.length > 0) {\n    <ion-list>\n      @for (item of results; track item) {\n        @if (firstElementFromEUList?.code === item.code\n          || firstElementFromNonEUList?.code === item.code) {\n          <ion-item-divider>\n            {{ (firstElementFromEUList?.code === item.code)\n            ? ('euim.language-list.EU-LANGUAGES' | translate)\n            : 'euim.language-list.NON-EU-LANGUAGES' | translate }}\n          </ion-item-divider>\n        }\n        <ion-item button (click)=\"onLanguageSelected(item)\" [lines]=\"lastElementFromEUList === item ? 'none' : 'inset'\">\n          <euim-avatar-icon  fill=\"solid\" slot=\"start\" variant=\"rounded\" class=\"euim-language-selector__avatar\">\n            <ion-icon name=\"language-sharp\" class=\"euim-language-selector__internal-icon\"></ion-icon>\n          </euim-avatar-icon>\n          <ion-label>\n            <div euimLabel euimLabelTitle>{{item.label}}</div>\n            <div euimLabel euimLabelMeta class=\"eui-u-text-uppercase\">\n              {{item.code}}\n            </div>\n          </ion-label>\n          @if (selectedLanguage?.code===item.code) {\n            <ion-buttons>\n              <ion-button  fill=\"clear\" >\n                <ion-icon name=\"checkmark-sharp\" slot=\"icon-only\" color=\"primary\"></ion-icon>\n              </ion-button>\n            </ion-buttons>\n          }\n        </ion-item>\n      }\n    </ion-list>\n  }\n  @if (results.length < 1) {\n    <euim-empty-list-placeholder euimMarginTopLarge\n      class=\"euim-language-selector__empty-placeholder\">\n    </euim-empty-list-placeholder>\n  }\n</ion-content>\n\n", dependencies: [{ kind: "component", type: i1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i1.IonItemDivider, selector: "ion-item-divider", inputs: ["color", "mode", "sticky"] }, { kind: "component", type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i1.IonSearchbar, selector: "ion-searchbar", inputs: ["animated", "autocapitalize", "autocomplete", "autocorrect", "cancelButtonIcon", "cancelButtonText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "maxlength", "minlength", "mode", "name", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value"] }, { kind: "component", type: i1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i1.TextValueAccessor, selector: "ion-input:not([type=number]),ion-textarea,ion-searchbar" }, { kind: "component", type: EuimAvatarIconComponent, selector: "euim-avatar-icon", inputs: ["color", "size", "fill", "variant", "borderColor"] }, { kind: "component", type: EuimLabelComponent, selector: "div[euimLabel], p[euimLabel], span[euimLabel], euim-label", inputs: ["euimLabelTruncateWithLines", "euimLabelTitle", "euimLabelSubTitle", "euimLabelMeta", "euimLabelTruncate", "euimLabelTextWrap"] }, { kind: "component", type: EuimEmptyListPlaceholderComponent, selector: "euim-empty-list-placeholder", inputs: ["message", "icon", "description", "button", "euimMarginTopLarge", "euimMarginTopSmall", "euimMarginBottomSmall"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimLanguageListComponent, deps: [{ token: i1.EuiAppShellService }, { token: EuimAppService }, { token: i3.ModalController }, { token: i1.I18nService }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.10", type: EuimLanguageListComponent, selector: "euim-language-list", ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"branding\">\n    <ion-buttons slot=\"start\">\n      <ion-button (click)=\"onClose()\">\n        <ion-icon name=\"close-sharp\" slot=\"icon-only\"></ion-icon>\n      </ion-button>\n    </ion-buttons>\n    <ion-title> {{'euim.language-list.SELECT-LANGUAGE' | translate }}</ion-title>\n  </ion-toolbar>\n  <ion-toolbar color=\"branding\" class=\"euim-language-selector__search\">\n    <ion-searchbar (ionChange)=\"handleChange($event)\"></ion-searchbar>\n  </ion-toolbar>\n</ion-header>\n<ion-content>\n  @if (results.length > 0) {\n    <ion-list>\n      @for (item of results; track item) {\n        @if (firstElementFromEUList?.code === item.code || firstElementFromNonEUList?.code === item.code || euLanguageList[0]?.code === item.code\n          || nonEULanguageList[0]?.code === item.code) {\n          <ion-item-divider>\n            {{ (firstElementFromEUList?.code === item.code || euLanguageList[0]?.code === item.code)\n            ? ('euim.language-list.EU-LANGUAGES' | translate)\n            : 'euim.language-list.NON-EU-LANGUAGES' | translate }}\n          </ion-item-divider>\n        }\n        <ion-item button (click)=\"onLanguageSelected(item)\" [lines]=\"lastElementFromEUList === item || isLastElementOfArray(euLanguageList, item) || isLastElementOfArray(nonEULanguageList, item) ? 'none' : 'inset'\">\n            <euim-avatar fill=\"solid\" slot=\"start\" variant=\"rounded\" class=\"euim-language-selector__avatar\">\n                <euim-avatar-icon>\n                    <ion-icon name=\"language-sharp\" class=\"euim-language-selector__internal-icon\"></ion-icon>\n                </euim-avatar-icon>\n            </euim-avatar>\n          <ion-label>\n            <div euimLabel euimLabelTitle>{{item.label}}</div>\n            <div euimLabel euimLabelMeta class=\"eui-u-text-uppercase\">\n              {{item.code}}\n            </div>\n          </ion-label>\n          @if (selectedLanguage?.code===item.code) {\n            <ion-buttons>\n              <ion-button  fill=\"clear\" >\n                <ion-icon name=\"checkmark-sharp\" slot=\"icon-only\" color=\"primary\"></ion-icon>\n              </ion-button>\n            </ion-buttons>\n          }\n        </ion-item>\n      }\n    </ion-list>\n  }\n  @if (results.length < 1) {\n    <euim-empty-list-placeholder euimMarginTopLarge\n      class=\"euim-language-selector__empty-placeholder\">\n    </euim-empty-list-placeholder>\n  }\n</ion-content>\n\n", dependencies: [{ kind: "component", type: i3.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i3.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i3.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i3.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i3.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i3.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i3.IonItemDivider, selector: "ion-item-divider", inputs: ["color", "mode", "sticky"] }, { kind: "component", type: i3.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i3.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i3.IonSearchbar, selector: "ion-searchbar", inputs: ["animated", "autocapitalize", "autocomplete", "autocorrect", "cancelButtonIcon", "cancelButtonText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "maxlength", "minlength", "mode", "name", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value"] }, { kind: "component", type: i3.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i3.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i3.TextValueAccessor, selector: "ion-input:not([type=number]),ion-textarea,ion-searchbar" }, { kind: "component", type: EuimAvatarComponent, selector: "euim-avatar", inputs: ["color", "size", "fill", "variant", "borderColor"] }, { kind: "component", type: EuimAvatarIconComponent, selector: "euim-avatar-icon" }, { kind: "component", type: EuimLabelComponent, selector: "div[euimLabel], p[euimLabel], span[euimLabel], euim-label", inputs: ["euimLabelTruncateWithLines", "euimLabelTitle", "euimLabelSubTitle", "euimLabelMeta", "euimLabelTruncate", "euimLabelTextWrap"] }, { kind: "component", type: EuimEmptyListPlaceholderComponent, selector: "euim-empty-list-placeholder", inputs: ["message", "icon", "description", "button", "euimMarginTopLarge", "euimMarginTopSmall", "euimMarginBottomSmall"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimLanguageListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimLanguageListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'euim-language-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-buttons slot=\"start\">\n      <ion-button (click)=\"onClose()\">\n        <ion-icon name=\"close-sharp\" slot=\"icon-only\"></ion-icon>\n      </ion-button>\n    </ion-buttons>\n    <ion-title> {{'euim.language-list.SELECT-LANGUAGE' | translate }}</ion-title>\n  </ion-toolbar>\n  <ion-toolbar color=\"primary\" class=\"euim-language-selector__search\">\n    <ion-searchbar (ionChange)=\"handleChange($event)\"></ion-searchbar>\n  </ion-toolbar>\n</ion-header>\n<ion-content>\n  @if (results.length > 0) {\n    <ion-list>\n      @for (item of results; track item) {\n        @if (firstElementFromEUList?.code === item.code\n          || firstElementFromNonEUList?.code === item.code) {\n          <ion-item-divider>\n            {{ (firstElementFromEUList?.code === item.code)\n            ? ('euim.language-list.EU-LANGUAGES' | translate)\n            : 'euim.language-list.NON-EU-LANGUAGES' | translate }}\n          </ion-item-divider>\n        }\n        <ion-item button (click)=\"onLanguageSelected(item)\" [lines]=\"lastElementFromEUList === item ? 'none' : 'inset'\">\n          <euim-avatar-icon  fill=\"solid\" slot=\"start\" variant=\"rounded\" class=\"euim-language-selector__avatar\">\n            <ion-icon name=\"language-sharp\" class=\"euim-language-selector__internal-icon\"></ion-icon>\n          </euim-avatar-icon>\n          <ion-label>\n            <div euimLabel euimLabelTitle>{{item.label}}</div>\n            <div euimLabel euimLabelMeta class=\"eui-u-text-uppercase\">\n              {{item.code}}\n            </div>\n          </ion-label>\n          @if (selectedLanguage?.code===item.code) {\n            <ion-buttons>\n              <ion-button  fill=\"clear\" >\n                <ion-icon name=\"checkmark-sharp\" slot=\"icon-only\" color=\"primary\"></ion-icon>\n              </ion-button>\n            </ion-buttons>\n          }\n        </ion-item>\n      }\n    </ion-list>\n  }\n  @if (results.length < 1) {\n    <euim-empty-list-placeholder euimMarginTopLarge\n      class=\"euim-language-selector__empty-placeholder\">\n    </euim-empty-list-placeholder>\n  }\n</ion-content>\n\n" }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.TranslateService }, { type: i2.EuiAppShellService }, { type: EuimAppService }, { type: i1.ModalController }, { type: i1.Platform }] });
+            args: [{ selector: 'euim-language-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-header>\n  <ion-toolbar color=\"branding\">\n    <ion-buttons slot=\"start\">\n      <ion-button (click)=\"onClose()\">\n        <ion-icon name=\"close-sharp\" slot=\"icon-only\"></ion-icon>\n      </ion-button>\n    </ion-buttons>\n    <ion-title> {{'euim.language-list.SELECT-LANGUAGE' | translate }}</ion-title>\n  </ion-toolbar>\n  <ion-toolbar color=\"branding\" class=\"euim-language-selector__search\">\n    <ion-searchbar (ionChange)=\"handleChange($event)\"></ion-searchbar>\n  </ion-toolbar>\n</ion-header>\n<ion-content>\n  @if (results.length > 0) {\n    <ion-list>\n      @for (item of results; track item) {\n        @if (firstElementFromEUList?.code === item.code || firstElementFromNonEUList?.code === item.code || euLanguageList[0]?.code === item.code\n          || nonEULanguageList[0]?.code === item.code) {\n          <ion-item-divider>\n            {{ (firstElementFromEUList?.code === item.code || euLanguageList[0]?.code === item.code)\n            ? ('euim.language-list.EU-LANGUAGES' | translate)\n            : 'euim.language-list.NON-EU-LANGUAGES' | translate }}\n          </ion-item-divider>\n        }\n        <ion-item button (click)=\"onLanguageSelected(item)\" [lines]=\"lastElementFromEUList === item || isLastElementOfArray(euLanguageList, item) || isLastElementOfArray(nonEULanguageList, item) ? 'none' : 'inset'\">\n            <euim-avatar fill=\"solid\" slot=\"start\" variant=\"rounded\" class=\"euim-language-selector__avatar\">\n                <euim-avatar-icon>\n                    <ion-icon name=\"language-sharp\" class=\"euim-language-selector__internal-icon\"></ion-icon>\n                </euim-avatar-icon>\n            </euim-avatar>\n          <ion-label>\n            <div euimLabel euimLabelTitle>{{item.label}}</div>\n            <div euimLabel euimLabelMeta class=\"eui-u-text-uppercase\">\n              {{item.code}}\n            </div>\n          </ion-label>\n          @if (selectedLanguage?.code===item.code) {\n            <ion-buttons>\n              <ion-button  fill=\"clear\" >\n                <ion-icon name=\"checkmark-sharp\" slot=\"icon-only\" color=\"primary\"></ion-icon>\n              </ion-button>\n            </ion-buttons>\n          }\n        </ion-item>\n      }\n    </ion-list>\n  }\n  @if (results.length < 1) {\n    <euim-empty-list-placeholder euimMarginTopLarge\n      class=\"euim-language-selector__empty-placeholder\">\n    </euim-empty-list-placeholder>\n  }\n</ion-content>\n\n" }]
+        }], ctorParameters: () => [{ type: i1.EuiAppShellService }, { type: EuimAppService }, { type: i3.ModalController }, { type: i1.I18nService }] });
 
 class EuimLanguageSelectorComponent {
-    constructor(cd, translateService, appShellService, appService, modalCtrl, baseStatesDirective) {
+    constructor(cd, 
+    /**
+     * @deprecated will be removed in eUI Mobile v19.
+     */
+    appShellService, 
+    /**
+     * @deprecated will be removed in eUI Mobile v19.
+     */
+    appService, i18nService, modalCtrl, baseStatesDirective, baseGlobalConfig) {
         this.cd = cd;
-        this.translateService = translateService;
         this.appShellService = appShellService;
         this.appService = appService;
+        this.i18nService = i18nService;
         this.modalCtrl = modalCtrl;
         this.baseStatesDirective = baseStatesDirective;
+        this.baseGlobalConfig = baseGlobalConfig;
         this._euimPrimary = this.baseStatesDirective.color === 'primary';
+        this._euimBranding = this.baseStatesDirective.color === 'branding';
         this.destroy$ = new Subject();
+        this.config = getI18nServiceConfig(this.baseGlobalConfig.i18n.i18nService);
     }
     get cssClasses() {
         return this.baseStatesDirective.getCssClasses('euim-language-selector');
     }
     ngOnInit() {
-        this.appShellService.state$.pipe(takeUntil(this.destroy$), distinctUntilKeyChanged('languages')).subscribe((state) => {
-            this.languages = (state.languages) ?
-                EuiEuLanguages.getOrderedLanguages(state.languages) :
-                EuiEuLanguages.getLanguages();
-            this.cd.detectChanges();
-        });
-        this.appShellService.state$.pipe(takeUntil(this.destroy$), distinctUntilKeyChanged('activeLanguage')).subscribe((state) => {
+        this.getAllLanguages();
+        this.i18nService.getState()
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((state) => {
             this.selectedLanguage = {
-                code: state.activeLanguage,
-                label: this.getLanguageLabel(state.activeLanguage),
+                code: state.activeLang,
+                label: this.getLanguageLabel(state.activeLang),
             };
             this.cd.detectChanges();
         });
@@ -563,9 +559,18 @@ class EuimLanguageSelectorComponent {
     async onShowLanguageList() {
         const modal = await this.modalCtrl.create({
             component: EuimLanguageListComponent,
+            componentProps: {
+                selectedLanguage: this.selectedLanguage,
+                languages: this.languages,
+            },
         });
         await modal.present();
     }
+    getAllLanguages() {
+        this.languages = (this.config.languages.length > 1) ?
+            EuiEuLanguages.getOrderedLanguages(this.config.languages) :
+            EuiEuLanguages.getLanguages();
+    }
     getLanguageLabel(languageCode) {
         for (const language of this.languages) {
             if (language.code === languageCode) {
@@ -574,10 +579,10 @@ class EuimLanguageSelectorComponent {
         }
         return null;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimLanguageSelectorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.TranslateService }, { token: i2.EuiAppShellService }, { token: EuimAppService }, { token: i1.ModalController }, { token: BaseStatesDirective }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: EuimLanguageSelectorComponent, selector: "euim-language-selector", host: { properties: { "class": "this.cssClasses" } }, hostDirectives: [{ directive: BaseStatesDirective, inputs: ["color", "color"] }], ngImport: i0, template: "<ion-button (click)=\"onShowLanguageList()\">\n    <ion-icon class=\"euim-language-selector__icon {{_euimPrimary ? 'euim-language-selector__icon--primary' : ''}}\"\n              slot=\"icon-only\"\n              src='data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\">\n                <path\n                    d=\"M 21.00,0.00\n                               C 22.66,-0.00 24.00,1.34 24.00,3.00\n                                 24.00,3.00 24.00,17.00 24.00,17.00\n                                 24.00,18.66 22.66,20.00 21.00,20.00\n                                 21.00,20.00 3.00,20.00 3.00,20.00\n                                 1.34,20.00 0.00,18.66 0.00,17.00\n                                 0.00,17.00 0.00,3.00 0.00,3.00\n                                 0.00,1.34 1.34,0.00 3.00,0.00\n                                 3.00,0.00 21.00,0.00 21.00,0.00 Z\n                               M 9.66,12.34\n                               C 9.66,12.34 15.31,18.00 15.31,18.00\n                                 15.31,18.00 9.66,23.66 9.66,23.66\n                                 9.66,23.66 4.00,18.00 4.00,18.00\n                                 4.00,18.00 9.66,12.34 9.66,12.34 Z\" />\n                </svg>'>\n    </ion-icon>\n\n    <span class=\"euim-language-selector__text {{_euimPrimary ? 'euim-language-selector__text--primary' : ''}}\">\n        {{ selectedLanguage?.code?.toUpperCase() }}\n    </span>\n</ion-button>\n", styles: [".euim-language-selector__text{font:var(--eui-f-xs-bold);margin-bottom:var(--eui-s-2xs);position:absolute;color:var(--eui-bc-primary-100)}.euim-language-selector__text--primary,.euim-language-selector__icon{color:#fff}.euim-language-selector__icon--primary{color:var(--eui-bc-primary-100)}.euim-language-selector__avatar{background-color:var(--eui-bc-neutral-15)}.euim-language-selector__internal-icon{color:var(--eui-bc-neutral-100)}.euim-language-selector__search{display:contents}.euim-language-selector__empty-placeholder{display:block;height:auto;margin-top:calc(9 * var(--eui-s-m))}\n"], dependencies: [{ kind: "component", type: i1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimLanguageSelectorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.EuiAppShellService }, { token: EuimAppService }, { token: i1.I18nService }, { token: i3.ModalController }, { token: BaseStatesDirective }, { token: GLOBAL_CONFIG_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.10", type: EuimLanguageSelectorComponent, selector: "euim-language-selector", host: { properties: { "class": "this.cssClasses" } }, hostDirectives: [{ directive: BaseStatesDirective, inputs: ["color", "color"] }], ngImport: i0, template: "<ion-button (click)=\"onShowLanguageList()\">\n    <ion-icon class=\"euim-language-selector__icon {{_euimBranding || _euimPrimary ? 'euim-language-selector__icon--branding' : ''}}\"\n              slot=\"icon-only\"\n              src='data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\">\n                <path\n                    d=\"M 21.00,0.00\n                               C 22.66,-0.00 24.00,1.34 24.00,3.00\n                                 24.00,3.00 24.00,17.00 24.00,17.00\n                                 24.00,18.66 22.66,20.00 21.00,20.00\n                                 21.00,20.00 3.00,20.00 3.00,20.00\n                                 1.34,20.00 0.00,18.66 0.00,17.00\n                                 0.00,17.00 0.00,3.00 0.00,3.00\n                                 0.00,1.34 1.34,0.00 3.00,0.00\n                                 3.00,0.00 21.00,0.00 21.00,0.00 Z\n                               M 9.66,12.34\n                               C 9.66,12.34 15.31,18.00 15.31,18.00\n                                 15.31,18.00 9.66,23.66 9.66,23.66\n                                 9.66,23.66 4.00,18.00 4.00,18.00\n                                 4.00,18.00 9.66,12.34 9.66,12.34 Z\" />\n                </svg>'>\n    </ion-icon>\n\n    <span class=\"euim-language-selector__text {{_euimBranding || _euimPrimary ? 'euim-language-selector__text--branding' : ''}}\">\n        {{ selectedLanguage?.code?.toUpperCase() }}\n    </span>\n</ion-button>\n", styles: [".euim-language-selector__text{font:var(--eui-f-xs-bold-compact);margin-bottom:var(--eui-s-2xs);position:absolute;color:var(--eui-c-branding)}.euim-language-selector__text--branding{color:var(--eui-c-white)}.euim-language-selector__icon{color:var(--eui-c-branding-contrast)}.euim-language-selector__icon--branding{color:var(--eui-c-branding)}.euim-language-selector__internal-icon{color:var(--eui-c-neutral)}.euim-language-selector__search{display:contents}.euim-language-selector__empty-placeholder{display:block;height:auto;margin-top:calc(9 * var(--eui-s-m))}\n"], dependencies: [{ kind: "component", type: i3.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i3.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimLanguageSelectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimLanguageSelectorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'euim-language-selector', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
                         {
@@ -586,20 +591,141 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
                                 'color',
                             ],
                         },
-                    ], template: "<ion-button (click)=\"onShowLanguageList()\">\n    <ion-icon class=\"euim-language-selector__icon {{_euimPrimary ? 'euim-language-selector__icon--primary' : ''}}\"\n              slot=\"icon-only\"\n              src='data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\">\n                <path\n                    d=\"M 21.00,0.00\n                               C 22.66,-0.00 24.00,1.34 24.00,3.00\n                                 24.00,3.00 24.00,17.00 24.00,17.00\n                                 24.00,18.66 22.66,20.00 21.00,20.00\n                                 21.00,20.00 3.00,20.00 3.00,20.00\n                                 1.34,20.00 0.00,18.66 0.00,17.00\n                                 0.00,17.00 0.00,3.00 0.00,3.00\n                                 0.00,1.34 1.34,0.00 3.00,0.00\n                                 3.00,0.00 21.00,0.00 21.00,0.00 Z\n                               M 9.66,12.34\n                               C 9.66,12.34 15.31,18.00 15.31,18.00\n                                 15.31,18.00 9.66,23.66 9.66,23.66\n                                 9.66,23.66 4.00,18.00 4.00,18.00\n                                 4.00,18.00 9.66,12.34 9.66,12.34 Z\" />\n                </svg>'>\n    </ion-icon>\n\n    <span class=\"euim-language-selector__text {{_euimPrimary ? 'euim-language-selector__text--primary' : ''}}\">\n        {{ selectedLanguage?.code?.toUpperCase() }}\n    </span>\n</ion-button>\n", styles: [".euim-language-selector__text{font:var(--eui-f-xs-bold);margin-bottom:var(--eui-s-2xs);position:absolute;color:var(--eui-bc-primary-100)}.euim-language-selector__text--primary,.euim-language-selector__icon{color:#fff}.euim-language-selector__icon--primary{color:var(--eui-bc-primary-100)}.euim-language-selector__avatar{background-color:var(--eui-bc-neutral-15)}.euim-language-selector__internal-icon{color:var(--eui-bc-neutral-100)}.euim-language-selector__search{display:contents}.euim-language-selector__empty-placeholder{display:block;height:auto;margin-top:calc(9 * var(--eui-s-m))}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.TranslateService }, { type: i2.EuiAppShellService }, { type: EuimAppService }, { type: i1.ModalController }, { type: BaseStatesDirective }], propDecorators: { cssClasses: [{
+                    ], template: "<ion-button (click)=\"onShowLanguageList()\">\n    <ion-icon class=\"euim-language-selector__icon {{_euimBranding || _euimPrimary ? 'euim-language-selector__icon--branding' : ''}}\"\n              slot=\"icon-only\"\n              src='data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\">\n                <path\n                    d=\"M 21.00,0.00\n                               C 22.66,-0.00 24.00,1.34 24.00,3.00\n                                 24.00,3.00 24.00,17.00 24.00,17.00\n                                 24.00,18.66 22.66,20.00 21.00,20.00\n                                 21.00,20.00 3.00,20.00 3.00,20.00\n                                 1.34,20.00 0.00,18.66 0.00,17.00\n                                 0.00,17.00 0.00,3.00 0.00,3.00\n                                 0.00,1.34 1.34,0.00 3.00,0.00\n                                 3.00,0.00 21.00,0.00 21.00,0.00 Z\n                               M 9.66,12.34\n                               C 9.66,12.34 15.31,18.00 15.31,18.00\n                                 15.31,18.00 9.66,23.66 9.66,23.66\n                                 9.66,23.66 4.00,18.00 4.00,18.00\n                                 4.00,18.00 9.66,12.34 9.66,12.34 Z\" />\n                </svg>'>\n    </ion-icon>\n\n    <span class=\"euim-language-selector__text {{_euimBranding || _euimPrimary ? 'euim-language-selector__text--branding' : ''}}\">\n        {{ selectedLanguage?.code?.toUpperCase() }}\n    </span>\n</ion-button>\n", styles: [".euim-language-selector__text{font:var(--eui-f-xs-bold-compact);margin-bottom:var(--eui-s-2xs);position:absolute;color:var(--eui-c-branding)}.euim-language-selector__text--branding{color:var(--eui-c-white)}.euim-language-selector__icon{color:var(--eui-c-branding-contrast)}.euim-language-selector__icon--branding{color:var(--eui-c-branding)}.euim-language-selector__internal-icon{color:var(--eui-c-neutral)}.euim-language-selector__search{display:contents}.euim-language-selector__empty-placeholder{display:block;height:auto;margin-top:calc(9 * var(--eui-s-m))}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.EuiAppShellService }, { type: EuimAppService }, { type: i1.I18nService }, { type: i3.ModalController }, { type: BaseStatesDirective }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [GLOBAL_CONFIG_TOKEN]
+                }] }], propDecorators: { cssClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class EuimAvatarIconSubComponent {
+    constructor() {
+        this.color = 'default';
+        this.size = 'default';
+        this.fill = 'default';
+        this.variant = 'default';
+        this.borderColor = 'default';
+    }
+    get cssClasses() {
+        return this.getCssClasses();
+    }
+    getCssClasses() {
+        return [
+            'euim-avatar-icon-sub',
+            this.size ? `euim-avatar-icon-sub--size-${this.size}` : '',
+            this.fill ? `euim-avatar-icon-sub--fill-${this.fill}` : '',
+            this.color ? `euim-avatar-icon-sub--color-${this.color}` : '',
+            this.variant ? `euim-avatar-icon-sub--variant-${this.variant}` : '',
+            this.borderColor ? `euim-avatar-icon-sub--border-color-${this.borderColor}` : '',
+        ].join(' ');
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimAvatarIconSubComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.10", type: EuimAvatarIconSubComponent, selector: "euim-avatar-icon-sub", inputs: { color: "color", size: "size", fill: "fill", variant: "variant", borderColor: "borderColor" }, host: { properties: { "class": "this.cssClasses" } }, ngImport: i0, template: "<ng-content></ng-content>\n" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimAvatarIconSubComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'euim-avatar-icon-sub', template: "<ng-content></ng-content>\n" }]
+        }], propDecorators: { color: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], fill: [{
+                type: Input
+            }], variant: [{
+                type: Input
+            }], borderColor: [{
+                type: Input
+            }], cssClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class EuimAvatarTextComponent {
+    constructor() {
+        this.color = 'default';
+    }
+    get cssClasses() {
+        return this.getCssClasses();
+    }
+    getCssClasses() {
+        return [
+            'euim-avatar-text',
+            this.color ? `euim-avatar-text--color-${this.color}` : '',
+        ].join(' ');
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimAvatarTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.10", type: EuimAvatarTextComponent, selector: "euim-avatar-text", inputs: { color: "color" }, host: { properties: { "class": "this.cssClasses" } }, ngImport: i0, template: "<ng-content></ng-content>\n" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimAvatarTextComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'euim-avatar-text', template: "<ng-content></ng-content>\n" }]
+        }], propDecorators: { color: [{
+                type: Input
+            }], cssClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class EuimAvatarImageComponent {
+    constructor() {
+        this.string = 'euim-avatar-image';
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimAvatarImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.10", type: EuimAvatarImageComponent, selector: "euim-avatar-image", inputs: { imageUrl: "imageUrl" }, host: { properties: { "class": "this.string" } }, ngImport: i0, template: "@if (imageUrl) {\n    <img [src]=\"imageUrl\" alt=\"Avatar\"/>\n} @else {\n    <ng-content></ng-content>\n}\n" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimAvatarImageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'euim-avatar-image', template: "@if (imageUrl) {\n    <img [src]=\"imageUrl\" alt=\"Avatar\"/>\n} @else {\n    <ng-content></ng-content>\n}\n" }]
+        }], propDecorators: { string: [{
+                type: HostBinding,
+                args: ['class']
+            }], imageUrl: [{
+                type: Input
+            }] } });
+
+class EuimAvatarBadgeComponent {
+    constructor() {
+        this.position = 'default';
+    }
+    get cssClasses() {
+        return [
+            'euim-avatar-badge',
+            `euim-avatar-badge--position-${this.position}`,
+        ].join(' ').trim();
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimAvatarBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.10", type: EuimAvatarBadgeComponent, selector: "euim-avatar-badge", inputs: { position: "position" }, host: { properties: { "class": "this.cssClasses" } }, ngImport: i0, template: "<ng-content></ng-content>\n" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimAvatarBadgeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'euim-avatar-badge', template: "<ng-content></ng-content>\n" }]
+        }], propDecorators: { cssClasses: [{
                 type: HostBinding,
                 args: ['class']
+            }], position: [{
+                type: Input
             }] } });
 
-class EuimAvatarIconModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimAvatarIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.5", ngImport: i0, type: EuimAvatarIconModule, declarations: [EuimAvatarIconComponent], imports: [CommonModule,
-            IonicModule], exports: [EuimAvatarIconComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimAvatarIconModule, imports: [CommonModule,
+class EuimAvatarModule {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimAvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.10", ngImport: i0, type: EuimAvatarModule, declarations: [EuimAvatarComponent,
+            EuimAvatarIconComponent,
+            EuimAvatarIconSubComponent,
+            EuimAvatarTextComponent,
+            EuimAvatarImageComponent,
+            EuimAvatarBadgeComponent], imports: [CommonModule,
+            IonicModule], exports: [EuimAvatarComponent,
+            EuimAvatarIconComponent,
+            EuimAvatarIconSubComponent,
+            EuimAvatarTextComponent,
+            EuimAvatarImageComponent,
+            EuimAvatarBadgeComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimAvatarModule, imports: [CommonModule,
             IonicModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimAvatarIconModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimAvatarModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -607,24 +733,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
                         IonicModule,
                     ],
                     exports: [
+                        EuimAvatarComponent,
                         EuimAvatarIconComponent,
+                        EuimAvatarIconSubComponent,
+                        EuimAvatarTextComponent,
+                        EuimAvatarImageComponent,
+                        EuimAvatarBadgeComponent,
                     ],
                     declarations: [
+                        EuimAvatarComponent,
                         EuimAvatarIconComponent,
+                        EuimAvatarIconSubComponent,
+                        EuimAvatarTextComponent,
+                        EuimAvatarImageComponent,
+                        EuimAvatarBadgeComponent,
                     ],
                 }]
         }] });
 
 class EuimEmptyListPlaceholderModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimEmptyListPlaceholderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.5", ngImport: i0, type: EuimEmptyListPlaceholderModule, declarations: [EuimEmptyListPlaceholderComponent], imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimEmptyListPlaceholderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.10", ngImport: i0, type: EuimEmptyListPlaceholderModule, declarations: [EuimEmptyListPlaceholderComponent], imports: [CommonModule,
             IonicModule,
             TranslateModule], exports: [EuimEmptyListPlaceholderComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimEmptyListPlaceholderModule, imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimEmptyListPlaceholderModule, imports: [CommonModule,
             IonicModule,
             TranslateModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimEmptyListPlaceholderModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimEmptyListPlaceholderModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -642,31 +778,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
         }] });
 
 class EuimLanguageSelectorModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimLanguageSelectorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.5", ngImport: i0, type: EuimLanguageSelectorModule, declarations: [EuimLanguageSelectorComponent,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimLanguageSelectorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.10", ngImport: i0, type: EuimLanguageSelectorModule, declarations: [EuimLanguageSelectorComponent,
             EuimLanguageListComponent], imports: [CommonModule,
             IonicModule,
-            EuimAvatarIconModule,
+            EuimAvatarModule,
             EuimLabelModule,
             EuimEmptyListPlaceholderModule,
             TranslateModule], exports: [EuimLanguageSelectorComponent,
             EuimLanguageListComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimLanguageSelectorModule, providers: [
-            { provide: EclLanguageService, useClass: EclDefaultLanguageService },
-        ], imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimLanguageSelectorModule, imports: [CommonModule,
             IonicModule,
-            EuimAvatarIconModule,
+            EuimAvatarModule,
             EuimLabelModule,
             EuimEmptyListPlaceholderModule,
             TranslateModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimLanguageSelectorModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimLanguageSelectorModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
                         CommonModule,
                         IonicModule,
-                        EuimAvatarIconModule,
+                        EuimAvatarModule,
                         EuimLabelModule,
                         EuimEmptyListPlaceholderModule,
                         TranslateModule,
@@ -679,22 +813,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
                         EuimLanguageSelectorComponent,
                         EuimLanguageListComponent,
                     ],
-                    providers: [
-                        { provide: EclLanguageService, useClass: EclDefaultLanguageService },
-                    ],
                 }]
         }] });
 
 class EuimAppModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimAppModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.5", ngImport: i0, type: EuimAppModule, declarations: [EuimAppComponent], imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimAppModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.10", ngImport: i0, type: EuimAppModule, declarations: [EuimAppComponent], imports: [CommonModule,
             IonicModule,
             EuimLanguageSelectorModule], exports: [EuimAppComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimAppModule, imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimAppModule, imports: [CommonModule,
             IonicModule,
             EuimLanguageSelectorModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimAppModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimAppModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -712,16 +843,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
         }] });
 
 class EuimUserProfileComponent {
-    constructor() {
-        this.className = 'euim-user-profile';
+    get cssClasses() {
+        return this.getCssClasses();
+    }
+    getCssClasses() {
+        return [
+            'euim-user-profile',
+            this.color ? `euim-user-profile__backgroundcolor-${this.color}` : '',
+        ].join(' ').trim();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimUserProfileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: EuimUserProfileComponent, selector: "euim-user-profile", host: { properties: { "class": "this.className" } }, ngImport: i0, template: "<ng-content select=\"euim-user-profile-avatar\"></ng-content>\n<ng-content select=\"euim-user-profile-infos\"></ng-content>\n<ng-content select=\"euim-user-profile-action\"></ng-content>\n", styles: [".euim-user-profile{display:flex;padding:var(--eui-s-m);background-color:var(--eui-bc-neutral-5)}.euim-user-profile-avatar{margin-right:var(--eui-s-m)}.euim-user-profile-action ion-buttons{margin-top:calc(-1 * var(--eui-s-s));margin-right:calc(-1 * var(--eui-s-s));margin-left:var(--eui-s-2xs);color:var(--eui-bc-primary-100)}.euim-user-profile-infos{width:calc(100% - (var(--eui-s-2xl) + var(--eui-s-l) + 2 * var(--eui-s-m)))}.euim-user-profile-infos [euimLabel]{color:var(--eui-bc-neutral-80)}.euim-user-profile-infos [euimLabelTitle]{color:var(--eui-bc-neutral-100)}.euim-user-profile-infos euim-user-profile-infos-item:not(:last-child){margin-bottom:var(--eui-s-2xs)}.euim-user-profile-infos-item{display:flex;margin-right:var(--eui-s-2xl);width:100%}.euim-user-profile-infos-item ion-icon{margin-right:var(--eui-s-2xs);min-width:var(--eui-s-m);min-height:var(--eui-s-m)}.euim-user-profile-infos-item p{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimUserProfileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.10", type: EuimUserProfileComponent, selector: "euim-user-profile", inputs: { color: "color" }, host: { properties: { "class": "this.cssClasses" } }, ngImport: i0, template: "<ng-content select=\"euim-user-profile-avatar\"></ng-content>\n<ng-content select=\"euim-user-profile-infos\"></ng-content>\n<ng-content select=\"euim-user-profile-action\"></ng-content>\n", styles: [".euim-user-profile{display:flex;padding:var(--eui-s-m);background-color:var(--eui-c-neutral-bg-light)}.euim-user-profile__backgroundcolor-primary{background-color:var(--eui-c-branding)}.euim-user-profile-avatar{margin-right:var(--eui-s-m)}.euim-user-profile-action ion-buttons{margin-top:calc(-1 * var(--eui-s-s));margin-right:calc(-1 * var(--eui-s-s));color:var(--eui-c-branding)}.euim-user-profile-infos{width:calc(100% - (var(--eui-s-2xl) + var(--eui-s-l) + 2 * var(--eui-s-m)))}.euim-user-profile-infos [euimLabel]{color:var(--eui-c-neutral-light)}.euim-user-profile-infos [euimLabelTitle]{color:var(--eui-c-neutral)}.euim-user-profile-infos__color-white [euimLabel]{color:var(--eui-c-branding-contrast)}.euim-user-profile-infos euim-user-profile-infos-item:not(:last-child){margin-bottom:var(--eui-s-2xs)}.euim-user-profile-infos-item{display:flex;margin-right:var(--eui-s-2xl);width:100%}.euim-user-profile-infos-item ion-icon{margin-right:var(--eui-s-2xs);min-width:var(--eui-s-m);min-height:var(--eui-s-m)}.euim-user-profile-infos-item p{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimUserProfileComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimUserProfileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'euim-user-profile', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-content select=\"euim-user-profile-avatar\"></ng-content>\n<ng-content select=\"euim-user-profile-infos\"></ng-content>\n<ng-content select=\"euim-user-profile-action\"></ng-content>\n", styles: [".euim-user-profile{display:flex;padding:var(--eui-s-m);background-color:var(--eui-bc-neutral-5)}.euim-user-profile-avatar{margin-right:var(--eui-s-m)}.euim-user-profile-action ion-buttons{margin-top:calc(-1 * var(--eui-s-s));margin-right:calc(-1 * var(--eui-s-s));margin-left:var(--eui-s-2xs);color:var(--eui-bc-primary-100)}.euim-user-profile-infos{width:calc(100% - (var(--eui-s-2xl) + var(--eui-s-l) + 2 * var(--eui-s-m)))}.euim-user-profile-infos [euimLabel]{color:var(--eui-bc-neutral-80)}.euim-user-profile-infos [euimLabelTitle]{color:var(--eui-bc-neutral-100)}.euim-user-profile-infos euim-user-profile-infos-item:not(:last-child){margin-bottom:var(--eui-s-2xs)}.euim-user-profile-infos-item{display:flex;margin-right:var(--eui-s-2xl);width:100%}.euim-user-profile-infos-item ion-icon{margin-right:var(--eui-s-2xs);min-width:var(--eui-s-m);min-height:var(--eui-s-m)}.euim-user-profile-infos-item p{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;display:block}\n"] }]
-        }], propDecorators: { className: [{
+            args: [{ selector: 'euim-user-profile', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-content select=\"euim-user-profile-avatar\"></ng-content>\n<ng-content select=\"euim-user-profile-infos\"></ng-content>\n<ng-content select=\"euim-user-profile-action\"></ng-content>\n", styles: [".euim-user-profile{display:flex;padding:var(--eui-s-m);background-color:var(--eui-c-neutral-bg-light)}.euim-user-profile__backgroundcolor-primary{background-color:var(--eui-c-branding)}.euim-user-profile-avatar{margin-right:var(--eui-s-m)}.euim-user-profile-action ion-buttons{margin-top:calc(-1 * var(--eui-s-s));margin-right:calc(-1 * var(--eui-s-s));color:var(--eui-c-branding)}.euim-user-profile-infos{width:calc(100% - (var(--eui-s-2xl) + var(--eui-s-l) + 2 * var(--eui-s-m)))}.euim-user-profile-infos [euimLabel]{color:var(--eui-c-neutral-light)}.euim-user-profile-infos [euimLabelTitle]{color:var(--eui-c-neutral)}.euim-user-profile-infos__color-white [euimLabel]{color:var(--eui-c-branding-contrast)}.euim-user-profile-infos euim-user-profile-infos-item:not(:last-child){margin-bottom:var(--eui-s-2xs)}.euim-user-profile-infos-item{display:flex;margin-right:var(--eui-s-2xl);width:100%}.euim-user-profile-infos-item ion-icon{margin-right:var(--eui-s-2xs);min-width:var(--eui-s-m);min-height:var(--eui-s-m)}.euim-user-profile-infos-item p{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;display:block}\n"] }]
+        }], propDecorators: { color: [{
+                type: Input
+            }], cssClasses: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
@@ -730,10 +869,10 @@ class EuiMUserProfileAvatarComponent {
     constructor() {
         this.class = 'euim-user-profile-avatar';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuiMUserProfileAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: EuiMUserProfileAvatarComponent, selector: "euim-user-profile-avatar", host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<ng-content></ng-content>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuiMUserProfileAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.10", type: EuiMUserProfileAvatarComponent, selector: "euim-user-profile-avatar", host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<ng-content></ng-content>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuiMUserProfileAvatarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuiMUserProfileAvatarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'euim-user-profile-avatar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n" }]
         }], propDecorators: { class: [{
@@ -741,27 +880,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
             }] } });
 
 class EuiMUserProfileInfosComponent {
-    constructor() {
-        this.className = 'euim-user-profile-infos';
+    get cssClasses() {
+        return this.getCssClasses();
+    }
+    getCssClasses() {
+        return [
+            'euim-user-profile-infos',
+            this.color ? `euim-user-profile-infos__color-${this.color}` : '',
+        ].join(' ').trim();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuiMUserProfileInfosComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: EuiMUserProfileInfosComponent, selector: "euim-user-profile-infos", host: { properties: { "className": "this.className" } }, ngImport: i0, template: "<ng-content></ng-content>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuiMUserProfileInfosComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.10", type: EuiMUserProfileInfosComponent, selector: "euim-user-profile-infos", inputs: { color: "color" }, host: { properties: { "class": "this.cssClasses" } }, ngImport: i0, template: "<ng-content></ng-content>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuiMUserProfileInfosComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuiMUserProfileInfosComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'euim-user-profile-infos', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n" }]
-        }], propDecorators: { className: [{
-                type: HostBinding
+            args: [{ selector: 'euim-user-profile-infos', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-content></ng-content>\n" }]
+        }], propDecorators: { color: [{
+                type: Input
+            }], cssClasses: [{
+                type: HostBinding,
+                args: ['class']
             }] } });
 
 class EuiMUserProfileInfosItemComponent {
     constructor() {
         this.class = 'euim-user-profile-infos-item';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuiMUserProfileInfosItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: EuiMUserProfileInfosItemComponent, selector: "euim-user-profile-infos-item", host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<ng-content></ng-content>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuiMUserProfileInfosItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.10", type: EuiMUserProfileInfosItemComponent, selector: "euim-user-profile-infos-item", host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<ng-content></ng-content>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuiMUserProfileInfosItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuiMUserProfileInfosItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'euim-user-profile-infos-item', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-content></ng-content>\n" }]
         }], propDecorators: { class: [{
@@ -772,17 +920,17 @@ class EuiMUserProfileActionComponent {
     constructor() {
         this.className = 'euim-user-profile-action';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuiMUserProfileActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: EuiMUserProfileActionComponent, selector: "euim-user-profile-action", host: { properties: { "className": "this.className" } }, ngImport: i0, template: "<ion-buttons>\n    <ng-content></ng-content>\n</ion-buttons>\n", dependencies: [{ kind: "component", type: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuiMUserProfileActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.10", type: EuiMUserProfileActionComponent, selector: "euim-user-profile-action", host: { properties: { "className": "this.className" } }, ngImport: i0, template: "<ion-buttons>\n    <ng-content></ng-content>\n</ion-buttons>\n", dependencies: [{ kind: "component", type: i3.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuiMUserProfileActionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuiMUserProfileActionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'euim-user-profile-action', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-buttons>\n    <ng-content></ng-content>\n</ion-buttons>\n" }]
         }], propDecorators: { className: [{
                 type: HostBinding
             }] } });
 
-const COMPONENTS$c = [
+const COMPONENTS$b = [
     EuimUserProfileComponent,
     EuiMUserProfileAvatarComponent,
     EuiMUserProfileInfosComponent,
@@ -790,8 +938,8 @@ const COMPONENTS$c = [
     EuiMUserProfileActionComponent,
 ];
 class EuimUserProfileModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimUserProfileModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.5", ngImport: i0, type: EuimUserProfileModule, declarations: [EuimUserProfileComponent,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimUserProfileModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.10", ngImport: i0, type: EuimUserProfileModule, declarations: [EuimUserProfileComponent,
             EuiMUserProfileAvatarComponent,
             EuiMUserProfileInfosComponent,
             EuiMUserProfileInfosItemComponent,
@@ -801,10 +949,10 @@ class EuimUserProfileModule {
             EuiMUserProfileInfosComponent,
             EuiMUserProfileInfosItemComponent,
             EuiMUserProfileActionComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimUserProfileModule, imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimUserProfileModule, imports: [CommonModule,
             IonicModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimUserProfileModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimUserProfileModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -812,10 +960,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
                         IonicModule,
                     ],
                     exports: [
-                        ...COMPONENTS$c,
+                        ...COMPONENTS$b,
                     ],
                     declarations: [
-                        ...COMPONENTS$c,
+                        ...COMPONENTS$b,
                     ],
                 }]
         }] });
@@ -837,12 +985,12 @@ class EuimToolbarComponent {
     onBackButtonClick(event) {
         this.backButtonClick.emit(event);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.5", type: EuimToolbarComponent, selector: "euim-toolbar", inputs: { hasBackButton: ["hasBackButton", "hasBackButton", booleanAttribute], backButtonDefaultHref: "backButtonDefaultHref", hasSidebarTrigger: ["hasSidebarTrigger", "hasSidebarTrigger", booleanAttribute], hasLanguageSelector: ["hasLanguageSelector", "hasLanguageSelector", booleanAttribute] }, outputs: { backButtonClick: "backButtonClick" }, host: { properties: { "className": "this.className" } }, ngImport: i0, template: "<ion-buttons slot=\"start\">\n    <ion-menu-button *ngIf=\"hasSidebarTrigger\"></ion-menu-button>\n    <ion-back-button (pointerdown)=\"onBackButtonClick($event)\"\n                     *ngIf=\"hasBackButton\"\n                     defaultHref=\"{{backButtonDefaultHref}}\"></ion-back-button>\n    <ng-content></ng-content>\n</ion-buttons>\n<ion-title class=\"euim-toolbar__title-container\">\n    <ng-content select=\"euim-toolbar-title\"></ng-content>\n</ion-title>\n<ion-buttons slot=\"end\">\n    <ng-content select=\"euim-toolbar-action-items\"></ng-content>\n    <ng-container *ngIf=\"hasLanguageSelector\">\n        <euim-language-selector></euim-language-selector>\n    </ng-container>\n</ion-buttons>\n", styles: [".euim-toolbar{display:flex;align-items:center}.euim-toolbar__title-container{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;display:flex;align-items:center}.euim-toolbar--transparent{position:absolute;box-shadow:none;--background: transparent;--color: white}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1.IonMenuButton, selector: "ion-menu-button", inputs: ["autoHide", "color", "disabled", "menu", "mode", "type"] }, { kind: "component", type: i1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i1.IonBackButton, selector: "ion-back-button" }, { kind: "component", type: EuimLanguageSelectorComponent, selector: "euim-language-selector" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.10", type: EuimToolbarComponent, selector: "euim-toolbar", inputs: { hasBackButton: ["hasBackButton", "hasBackButton", booleanAttribute], backButtonDefaultHref: "backButtonDefaultHref", hasSidebarTrigger: ["hasSidebarTrigger", "hasSidebarTrigger", booleanAttribute], hasLanguageSelector: ["hasLanguageSelector", "hasLanguageSelector", booleanAttribute] }, outputs: { backButtonClick: "backButtonClick" }, host: { properties: { "className": "this.className" } }, ngImport: i0, template: "<ion-buttons slot=\"start\">\n    <ion-menu-button *ngIf=\"hasSidebarTrigger\"></ion-menu-button>\n    <ion-back-button (pointerdown)=\"onBackButtonClick($event)\"\n                     *ngIf=\"hasBackButton\"\n                     defaultHref=\"{{backButtonDefaultHref}}\"></ion-back-button>\n    <ng-content></ng-content>\n</ion-buttons>\n<ion-title class=\"euim-toolbar__title-container\">\n    <ng-content select=\"euim-toolbar-title\"></ng-content>\n</ion-title>\n<ion-buttons slot=\"end\">\n    <ng-content select=\"euim-toolbar-action-items\"></ng-content>\n    <ng-container *ngIf=\"hasLanguageSelector\">\n        <euim-language-selector></euim-language-selector>\n    </ng-container>\n</ion-buttons>\n", styles: [".euim-toolbar{display:flex;align-items:center}.euim-toolbar__title-container{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;display:flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i3.IonMenuButton, selector: "ion-menu-button", inputs: ["autoHide", "color", "disabled", "menu", "mode", "type"] }, { kind: "component", type: i3.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i3.IonBackButton, selector: "ion-back-button" }, { kind: "component", type: EuimLanguageSelectorComponent, selector: "euim-language-selector" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimToolbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimToolbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'euim-toolbar', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-buttons slot=\"start\">\n    <ion-menu-button *ngIf=\"hasSidebarTrigger\"></ion-menu-button>\n    <ion-back-button (pointerdown)=\"onBackButtonClick($event)\"\n                     *ngIf=\"hasBackButton\"\n                     defaultHref=\"{{backButtonDefaultHref}}\"></ion-back-button>\n    <ng-content></ng-content>\n</ion-buttons>\n<ion-title class=\"euim-toolbar__title-container\">\n    <ng-content select=\"euim-toolbar-title\"></ng-content>\n</ion-title>\n<ion-buttons slot=\"end\">\n    <ng-content select=\"euim-toolbar-action-items\"></ng-content>\n    <ng-container *ngIf=\"hasLanguageSelector\">\n        <euim-language-selector></euim-language-selector>\n    </ng-container>\n</ion-buttons>\n", styles: [".euim-toolbar{display:flex;align-items:center}.euim-toolbar__title-container{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;display:flex;align-items:center}.euim-toolbar--transparent{position:absolute;box-shadow:none;--background: transparent;--color: white}\n"] }]
+            args: [{ selector: 'euim-toolbar', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-buttons slot=\"start\">\n    <ion-menu-button *ngIf=\"hasSidebarTrigger\"></ion-menu-button>\n    <ion-back-button (pointerdown)=\"onBackButtonClick($event)\"\n                     *ngIf=\"hasBackButton\"\n                     defaultHref=\"{{backButtonDefaultHref}}\"></ion-back-button>\n    <ng-content></ng-content>\n</ion-buttons>\n<ion-title class=\"euim-toolbar__title-container\">\n    <ng-content select=\"euim-toolbar-title\"></ng-content>\n</ion-title>\n<ion-buttons slot=\"end\">\n    <ng-content select=\"euim-toolbar-action-items\"></ng-content>\n    <ng-container *ngIf=\"hasLanguageSelector\">\n        <euim-language-selector></euim-language-selector>\n    </ng-container>\n</ion-buttons>\n", styles: [".euim-toolbar{display:flex;align-items:center}.euim-toolbar__title-container{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;display:flex;align-items:center}\n"] }]
         }], propDecorators: { hasBackButton: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
@@ -872,10 +1020,10 @@ class EuimToolbarTitleComponent {
             this.baseStatesDirective.getCssClasses('euim-toolbar__title'),
         ].join(' ');
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimToolbarTitleComponent, deps: [{ token: BaseStatesDirective }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: EuimToolbarTitleComponent, selector: "euim-toolbar-title", host: { properties: { "class": "this.cssClasses" } }, hostDirectives: [{ directive: BaseStatesDirective }], ngImport: i0, template: "<ng-content></ng-content>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimToolbarTitleComponent, deps: [{ token: BaseStatesDirective }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.10", type: EuimToolbarTitleComponent, selector: "euim-toolbar-title", host: { properties: { "class": "this.cssClasses" } }, hostDirectives: [{ directive: BaseStatesDirective }], ngImport: i0, template: "<ng-content></ng-content>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimToolbarTitleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimToolbarTitleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'euim-toolbar-title', changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
                         {
@@ -891,10 +1039,10 @@ class EuimToolbarActionItemsComponent {
     constructor() {
         this.className = 'euim-toolbar-action-items';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimToolbarActionItemsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: EuimToolbarActionItemsComponent, selector: "euim-toolbar-action-items", host: { properties: { "className": "this.className" } }, ngImport: i0, template: "<ng-content></ng-content>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimToolbarActionItemsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.10", type: EuimToolbarActionItemsComponent, selector: "euim-toolbar-action-items", host: { properties: { "className": "this.className" } }, ngImport: i0, template: "<ng-content></ng-content>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimToolbarActionItemsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimToolbarActionItemsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'euim-toolbar-action-items', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n" }]
         }], propDecorators: { className: [{
@@ -902,8 +1050,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
             }] } });
 
 class EuimToolbarComponentModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimToolbarComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.5", ngImport: i0, type: EuimToolbarComponentModule, declarations: [EuimToolbarComponent,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimToolbarComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.10", ngImport: i0, type: EuimToolbarComponentModule, declarations: [EuimToolbarComponent,
             EuimToolbarTitleComponent,
             EuimToolbarActionItemsComponent], imports: [CommonModule,
             IonicModule,
@@ -911,12 +1059,12 @@ class EuimToolbarComponentModule {
             EuimLanguageSelectorModule], exports: [EuimToolbarComponent,
             EuimToolbarTitleComponent,
             EuimToolbarActionItemsComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimToolbarComponentModule, imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimToolbarComponentModule, imports: [CommonModule,
             IonicModule,
             TranslateModule,
             EuimLanguageSelectorModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimToolbarComponentModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimToolbarComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -965,13 +1113,13 @@ class EuimSidebarComponent {
             }
         });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimSidebarComponent, deps: [{ token: i1$2.Router }, { token: i1.MenuController }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: EuimSidebarComponent, selector: "euim-sidebar", inputs: { ionMenuId: "ionMenuId", routerPath: "routerPath" }, host: { properties: { "className": "this.className" } }, ngImport: i0, template: "<ion-menu contentId=\"{{ionMenuId}}\" menuId=\"{{ionMenuId}}\" slot=\"start\">\n    <ng-content></ng-content>\n    <ion-content>\n        <ng-content select=\"euim-sidebar-content\"></ng-content>\n    </ion-content>\n</ion-menu>\n", styles: [".euim-sidebar-content{height:100%}.euim-sidebar-content__list{height:auto;padding:0}.euim-sidebar-content ion-item euim-avatar-icon:first-child{margin-inline-end:var(--eui-s-m)}.euim-sidebar-content ion-icon[slot=start]{margin-inline-end:var(--eui-s-m)}\n"], dependencies: [{ kind: "component", type: i1.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i1.IonMenu, selector: "ion-menu", inputs: ["contentId", "disabled", "maxEdgeStart", "menuId", "side", "swipeGesture", "type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimSidebarComponent, deps: [{ token: i1$1.Router }, { token: i3.MenuController }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.10", type: EuimSidebarComponent, selector: "euim-sidebar", inputs: { ionMenuId: "ionMenuId", routerPath: "routerPath" }, host: { properties: { "className": "this.className" } }, ngImport: i0, template: "<ion-menu contentId=\"{{ionMenuId}}\" menuId=\"{{ionMenuId}}\" slot=\"start\">\n    <ng-content></ng-content>\n    <ion-content>\n        <ng-content select=\"euim-sidebar-content\"></ng-content>\n    </ion-content>\n</ion-menu>\n", styles: [".euim-sidebar-footer--no-borders.footer-md:before{height:0}.euim-sidebar-content{height:100%}.euim-sidebar-content__list{height:auto;padding:0}.euim-sidebar-content ion-item euim-avatar:first-child{margin-inline-end:var(--eui-s-m)}.euim-sidebar-content ion-icon[slot=start]{margin-inline-end:var(--eui-s-m)}.euim-sidebar-content ion-note[slot=end]{padding:var(--eui-s-m) 0 var(--eui-s-m)}.euim-sidebar-content ion-item::part(detail-icon){width:var(--eui-s-m);height:var(--eui-s-m);opacity:1;color:var(--eui-c-neutral-lighter);margin-left:var(--eui-s-xs)}\n"], dependencies: [{ kind: "component", type: i3.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i3.IonMenu, selector: "ion-menu", inputs: ["contentId", "disabled", "maxEdgeStart", "menuId", "side", "swipeGesture", "type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimSidebarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimSidebarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'euim-sidebar', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ion-menu contentId=\"{{ionMenuId}}\" menuId=\"{{ionMenuId}}\" slot=\"start\">\n    <ng-content></ng-content>\n    <ion-content>\n        <ng-content select=\"euim-sidebar-content\"></ng-content>\n    </ion-content>\n</ion-menu>\n", styles: [".euim-sidebar-content{height:100%}.euim-sidebar-content__list{height:auto;padding:0}.euim-sidebar-content ion-item euim-avatar-icon:first-child{margin-inline-end:var(--eui-s-m)}.euim-sidebar-content ion-icon[slot=start]{margin-inline-end:var(--eui-s-m)}\n"] }]
-        }], ctorParameters: () => [{ type: i1$2.Router }, { type: i1.MenuController }], propDecorators: { className: [{
+            args: [{ selector: 'euim-sidebar', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ion-menu contentId=\"{{ionMenuId}}\" menuId=\"{{ionMenuId}}\" slot=\"start\">\n    <ng-content></ng-content>\n    <ion-content>\n        <ng-content select=\"euim-sidebar-content\"></ng-content>\n    </ion-content>\n</ion-menu>\n", styles: [".euim-sidebar-footer--no-borders.footer-md:before{height:0}.euim-sidebar-content{height:100%}.euim-sidebar-content__list{height:auto;padding:0}.euim-sidebar-content ion-item euim-avatar:first-child{margin-inline-end:var(--eui-s-m)}.euim-sidebar-content ion-icon[slot=start]{margin-inline-end:var(--eui-s-m)}.euim-sidebar-content ion-note[slot=end]{padding:var(--eui-s-m) 0 var(--eui-s-m)}.euim-sidebar-content ion-item::part(detail-icon){width:var(--eui-s-m);height:var(--eui-s-m);opacity:1;color:var(--eui-c-neutral-lighter);margin-left:var(--eui-s-xs)}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.Router }, { type: i3.MenuController }], propDecorators: { className: [{
                 type: HostBinding
             }], ionMenuId: [{
                 type: Input
@@ -980,16 +1128,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
             }] } });
 
 class EuimSidebarContentComponent {
-    constructor(i18nService, asService, navCtrl) {
+    constructor(i18nService, asService, menuCtrl, navCtrl) {
         this.i18nService = i18nService;
         this.asService = asService;
+        this.menuCtrl = menuCtrl;
         this.navCtrl = navCtrl;
         this.className = 'euim-sidebar-content';
         this.sidebarItems = [];
+        this.hasSearchbar = false;
+        this.sidebarItemsFilter = new EventEmitter();
+        this.filteredItems = [];
+        this.query = '';
         i18nService.init().subscribe();
     }
     ngOnInit() {
         this.sortSidebarItems();
+        if (this.hasSearchbar) {
+            this.filteredItems = [...this.sidebarItems];
+            this.sidebarItemsFilter.emit(this.filteredItems);
+        }
+    }
+    handleInput(event) {
+        this.query = event.detail.value.toLowerCase();
+        this.filteredItems = this.filterMenuItems(this.sidebarItems, this.query);
+        this.sidebarItemsFilter.emit(this.filteredItems);
+        if (this.query === '') {
+            this.sidebarItemsFilter.emit(this.sidebarItems);
+        }
+    }
+    closeMenu() {
+        if (!this.hasSearchbar)
+            return;
+        this.menuCtrl.close().then(() => {
+            this.sidebarItemsFilter.emit(this.sidebarItems);
+            this.query = '';
+            this.searchbar.value = '';
+        });
     }
     sortSidebarItems() {
         this.sidebarItems.sort((a, b) => {
@@ -999,43 +1173,56 @@ class EuimSidebarContentComponent {
             return a.group - b.group;
         });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimSidebarContentComponent, deps: [{ token: i2.I18nService }, { token: i2.EuiAppShellService }, { token: i1.NavController }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: EuimSidebarContentComponent, selector: "euim-sidebar-content", inputs: { sidebarItems: "sidebarItems" }, host: { properties: { "className": "this.className" } }, ngImport: i0, template: "<ion-list class=\"euim-sidebar-content__list\">\n    <ion-menu-toggle auto-hide=\"true\">\n        <ng-content></ng-content>\n    </ion-menu-toggle>\n</ion-list>\n", dependencies: [{ kind: "component", type: i1.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i1.IonMenuToggle, selector: "ion-menu-toggle", inputs: ["autoHide", "menu"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    filterMenuItems(items, searchPhrase) {
+        return items.filter(item => {
+            return !item.isSection && item.label.toLowerCase().includes(searchPhrase.toLowerCase());
+        });
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimSidebarContentComponent, deps: [{ token: i1.I18nService }, { token: i1.EuiAppShellService }, { token: i3.MenuController }, { token: i3.NavController }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.10", type: EuimSidebarContentComponent, selector: "euim-sidebar-content", inputs: { sidebarItems: "sidebarItems", hasSearchbar: ["hasSearchbar", "hasSearchbar", booleanAttribute] }, outputs: { sidebarItemsFilter: "sidebarItemsFilter" }, host: { properties: { "className": "this.className" } }, viewQueries: [{ propertyName: "searchbar", first: true, predicate: IonSearchbar, descendants: true }], ngImport: i0, template: "<ion-list class=\"euim-sidebar-content__list\">\n    @if (hasSearchbar) {\n    <ion-searchbar (ionInput)=\"handleInput($event)\"></ion-searchbar>\n    }\n    <ion-menu-toggle auto-hide=\"true\" (click)=\"closeMenu()\">\n        <ng-content></ng-content>\n    </ion-menu-toggle>\n</ion-list>\n\n", dependencies: [{ kind: "component", type: i3.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i3.IonMenuToggle, selector: "ion-menu-toggle", inputs: ["autoHide", "menu"] }, { kind: "component", type: i3.IonSearchbar, selector: "ion-searchbar", inputs: ["animated", "autocapitalize", "autocomplete", "autocorrect", "cancelButtonIcon", "cancelButtonText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "maxlength", "minlength", "mode", "name", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value"] }, { kind: "directive", type: i3.TextValueAccessor, selector: "ion-input:not([type=number]),ion-textarea,ion-searchbar" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimSidebarContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimSidebarContentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'euim-sidebar-content', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-list class=\"euim-sidebar-content__list\">\n    <ion-menu-toggle auto-hide=\"true\">\n        <ng-content></ng-content>\n    </ion-menu-toggle>\n</ion-list>\n" }]
-        }], ctorParameters: () => [{ type: i2.I18nService }, { type: i2.EuiAppShellService }, { type: i1.NavController }], propDecorators: { className: [{
+            args: [{ selector: 'euim-sidebar-content', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-list class=\"euim-sidebar-content__list\">\n    @if (hasSearchbar) {\n    <ion-searchbar (ionInput)=\"handleInput($event)\"></ion-searchbar>\n    }\n    <ion-menu-toggle auto-hide=\"true\" (click)=\"closeMenu()\">\n        <ng-content></ng-content>\n    </ion-menu-toggle>\n</ion-list>\n\n" }]
+        }], ctorParameters: () => [{ type: i1.I18nService }, { type: i1.EuiAppShellService }, { type: i3.MenuController }, { type: i3.NavController }], propDecorators: { className: [{
                 type: HostBinding
             }], sidebarItems: [{
                 type: Input
+            }], hasSearchbar: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], sidebarItemsFilter: [{
+                type: Output
+            }], searchbar: [{
+                type: ViewChild,
+                args: [IonSearchbar, { static: false }]
             }] } });
 
 class EuimSidebarModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimSidebarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.5", ngImport: i0, type: EuimSidebarModule, declarations: [EuimSidebarComponent,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimSidebarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.10", ngImport: i0, type: EuimSidebarModule, declarations: [EuimSidebarComponent,
             EuimSidebarContentComponent], imports: [CommonModule,
             RouterModule,
             IonicModule,
-            EuimAvatarIconModule,
+            EuimAvatarModule,
             EuimLabelModule,
             EuimNotificationItemModule], exports: [EuimSidebarComponent,
             EuimSidebarContentComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimSidebarModule, imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimSidebarModule, imports: [CommonModule,
             RouterModule,
             IonicModule,
-            EuimAvatarIconModule,
+            EuimAvatarModule,
             EuimLabelModule,
             EuimNotificationItemModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimSidebarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimSidebarModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
                         CommonModule,
                         RouterModule,
                         IonicModule,
-                        EuimAvatarIconModule,
+                        EuimAvatarModule,
                         EuimLabelModule,
                         EuimNotificationItemModule,
                     ],
@@ -1056,16 +1243,18 @@ class EuimHeaderDetailsComponent {
     }
     constructor(baseStatesDirective) {
         this.baseStatesDirective = baseStatesDirective;
+        this.hasBorderBottom = true;
     }
     getCssClasses() {
         return [
             this.baseStatesDirective.getCssClasses('euim-header-details'),
+            !this.hasBorderBottom ? 'euim-header-details--no-border-bottom' : '',
         ].join(' ');
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimHeaderDetailsComponent, deps: [{ token: BaseStatesDirective }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: EuimHeaderDetailsComponent, selector: "euim-header-details", host: { properties: { "class": "this.cssClasses" } }, hostDirectives: [{ directive: BaseStatesDirective, inputs: ["color", "color"] }], ngImport: i0, template: "<ng-content></ng-content>\n", styles: [".euim-header-details{padding:var(--eui-s-m);display:block;text-align:center;background-color:var(--eui-bc-neutral-5);border-bottom:1px solid var(--eui-bc-neutral-20)}.euim-header-details--primary{background-color:var(--eui-bc-primary-100);border-bottom:none}.euim-header-details--primary .euim-header-details__title,.euim-header-details--primary .euim-header-details__meta{color:var(--eui-c-white)}.euim-header-details__title{font:var(--eui-f-m);color:var(--eui-bc-neutral-100)}.euim-header-details__meta{color:var(--eui-bc-neutral-80);font:var(--eui-f-s)}.euim-header-details__icon{display:inline-block;margin-bottom:var(--eui-s-xs)}.euim-header-details__title+.euim-header-details__meta,.euim-header-details__meta+.euim-header-details__meta{margin-top:var(--eui-s-2xs)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimHeaderDetailsComponent, deps: [{ token: BaseStatesDirective }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.10", type: EuimHeaderDetailsComponent, selector: "euim-header-details", inputs: { hasBorderBottom: ["hasBorderBottom", "hasBorderBottom", booleanAttribute] }, host: { properties: { "class": "this.cssClasses" } }, hostDirectives: [{ directive: BaseStatesDirective, inputs: ["color", "color"] }], ngImport: i0, template: "<ng-content></ng-content>\n", styles: [".euim-header-details{padding:var(--eui-s-m);display:block;text-align:center;background-color:var(--eui-c-neutral-bg-light);border-bottom:1px solid var(--eui-c-neutral-lightest)}.euim-header-details--no-border-bottom{border-bottom:none}.euim-header-details--branding{background-color:var(--eui-c-branding);border-bottom:none}.euim-header-details--branding .euim-header-details__title,.euim-header-details--branding .euim-header-details__meta{color:var(--eui-c-branding-contrast)}.euim-header-details__title{font:var(--eui-f-m-compact);color:var(--eui-c-neutral)}.euim-header-details__meta{color:var(--eui-c-neutral-light);font:var(--eui-f-s-compact)}.euim-header-details__icon{display:inline-block;margin-bottom:var(--eui-s-xs)}.euim-header-details__title+.euim-header-details__meta,.euim-header-details__meta+.euim-header-details__meta{margin-top:var(--eui-s-2xs)}.euim-header-details p,.euim-header-details span{margin:0}.euim-header-details span[euimHeaderDetailsTitle],.euim-header-details span[euimHeaderDetailsMeta]{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimHeaderDetailsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimHeaderDetailsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'euim-header-details', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, hostDirectives: [
                         {
@@ -1074,8 +1263,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
                                 'color',
                             ],
                         },
-                    ], template: "<ng-content></ng-content>\n", styles: [".euim-header-details{padding:var(--eui-s-m);display:block;text-align:center;background-color:var(--eui-bc-neutral-5);border-bottom:1px solid var(--eui-bc-neutral-20)}.euim-header-details--primary{background-color:var(--eui-bc-primary-100);border-bottom:none}.euim-header-details--primary .euim-header-details__title,.euim-header-details--primary .euim-header-details__meta{color:var(--eui-c-white)}.euim-header-details__title{font:var(--eui-f-m);color:var(--eui-bc-neutral-100)}.euim-header-details__meta{color:var(--eui-bc-neutral-80);font:var(--eui-f-s)}.euim-header-details__icon{display:inline-block;margin-bottom:var(--eui-s-xs)}.euim-header-details__title+.euim-header-details__meta,.euim-header-details__meta+.euim-header-details__meta{margin-top:var(--eui-s-2xs)}\n"] }]
-        }], ctorParameters: () => [{ type: BaseStatesDirective }], propDecorators: { cssClasses: [{
+                    ], template: "<ng-content></ng-content>\n", styles: [".euim-header-details{padding:var(--eui-s-m);display:block;text-align:center;background-color:var(--eui-c-neutral-bg-light);border-bottom:1px solid var(--eui-c-neutral-lightest)}.euim-header-details--no-border-bottom{border-bottom:none}.euim-header-details--branding{background-color:var(--eui-c-branding);border-bottom:none}.euim-header-details--branding .euim-header-details__title,.euim-header-details--branding .euim-header-details__meta{color:var(--eui-c-branding-contrast)}.euim-header-details__title{font:var(--eui-f-m-compact);color:var(--eui-c-neutral)}.euim-header-details__meta{color:var(--eui-c-neutral-light);font:var(--eui-f-s-compact)}.euim-header-details__icon{display:inline-block;margin-bottom:var(--eui-s-xs)}.euim-header-details__title+.euim-header-details__meta,.euim-header-details__meta+.euim-header-details__meta{margin-top:var(--eui-s-2xs)}.euim-header-details p,.euim-header-details span{margin:0}.euim-header-details span[euimHeaderDetailsTitle],.euim-header-details span[euimHeaderDetailsMeta]{display:block}\n"] }]
+        }], ctorParameters: () => [{ type: BaseStatesDirective }], propDecorators: { hasBorderBottom: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], cssClasses: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
@@ -1084,10 +1276,10 @@ class EuimHeaderDetailsMetaDirective {
     constructor() {
         this.className = 'euim-header-details__meta';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimHeaderDetailsMetaDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.5", type: EuimHeaderDetailsMetaDirective, selector: "[euimHeaderDetailsMeta]", host: { properties: { "class": "this.className" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimHeaderDetailsMetaDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.10", type: EuimHeaderDetailsMetaDirective, selector: "[euimHeaderDetailsMeta]", host: { properties: { "class": "this.className" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimHeaderDetailsMetaDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimHeaderDetailsMetaDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[euimHeaderDetailsMeta]',
@@ -1101,10 +1293,10 @@ class EuimHeaderDetailsTitleDirective {
     constructor() {
         this.className = 'euim-header-details__title';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimHeaderDetailsTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.5", type: EuimHeaderDetailsTitleDirective, selector: "[euimHeaderDetailsTitle]", host: { properties: { "class": "this.className" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimHeaderDetailsTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.10", type: EuimHeaderDetailsTitleDirective, selector: "[euimHeaderDetailsTitle]", host: { properties: { "class": "this.className" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimHeaderDetailsTitleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimHeaderDetailsTitleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[euimHeaderDetailsTitle]',
@@ -1118,10 +1310,10 @@ class EuimHeaderDetailsIconDirective {
     constructor() {
         this.className = 'euim-header-details__icon';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimHeaderDetailsIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.5", type: EuimHeaderDetailsIconDirective, selector: "[euimHeaderDetailsIcon]", host: { properties: { "class": "this.className" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimHeaderDetailsIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.10", type: EuimHeaderDetailsIconDirective, selector: "[euimHeaderDetailsIcon]", host: { properties: { "class": "this.className" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimHeaderDetailsIconDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimHeaderDetailsIconDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[euimHeaderDetailsIcon]',
@@ -1131,15 +1323,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
                 args: ['class']
             }] } });
 
-const COMPONENTS$b = [
+const COMPONENTS$a = [
     EuimHeaderDetailsComponent,
     EuimHeaderDetailsTitleDirective,
     EuimHeaderDetailsMetaDirective,
     EuimHeaderDetailsIconDirective,
 ];
 class EuimHeaderDetailsModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimHeaderDetailsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.5", ngImport: i0, type: EuimHeaderDetailsModule, declarations: [EuimHeaderDetailsComponent,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimHeaderDetailsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.10", ngImport: i0, type: EuimHeaderDetailsModule, declarations: [EuimHeaderDetailsComponent,
             EuimHeaderDetailsTitleDirective,
             EuimHeaderDetailsMetaDirective,
             EuimHeaderDetailsIconDirective], imports: [CommonModule,
@@ -1147,10 +1339,10 @@ class EuimHeaderDetailsModule {
             EuimHeaderDetailsTitleDirective,
             EuimHeaderDetailsMetaDirective,
             EuimHeaderDetailsIconDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimHeaderDetailsModule, imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimHeaderDetailsModule, imports: [CommonModule,
             IonicModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimHeaderDetailsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimHeaderDetailsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -1158,149 +1350,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
                         IonicModule,
                     ],
                     exports: [
-                        ...COMPONENTS$b,
-                    ],
-                    declarations: [
-                        ...COMPONENTS$b,
-                    ],
-                }]
-        }] });
-
-class EuimCardComponent {
-    get cssClasses() {
-        return this.getCssClasses();
-    }
-    constructor(baseStatesDirective) {
-        this.baseStatesDirective = baseStatesDirective;
-    }
-    getCssClasses() {
-        return [
-            this.baseStatesDirective.getCssClasses('euim-card'),
-        ].join(' ').trim();
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimCardComponent, deps: [{ token: BaseStatesDirective }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: EuimCardComponent, selector: "euim-card", host: { properties: { "class": "this.cssClasses" } }, hostDirectives: [{ directive: BaseStatesDirective, inputs: ["euimSizeM", "euimSizeM", "euimSizeS", "euimSizeS", "euimSizeL", "euimSizeL"] }], ngImport: i0, template: "<ion-card>\n    <ng-content select=\"[euimCardImage]\"></ng-content>\n    <div class=\"euim-card__content\">\n        <ng-content></ng-content>\n    </div>\n</ion-card>\n", styles: [".euim-card{position:relative;display:flex}.euim-card ion-card{margin:0}.euim-card__header-image{width:100%}.euim-card__image{height:100%;width:100%;object-fit:cover}.euim-card__content ion-item>ion-button[slot=end]{margin:0}.euim-card__content ion-item>ion-button[slot=end]::part(native){padding:0}.euim-card{display:flex}.euim-card--size-s .euim-card__image{height:calc(var(--eui-base-spacing-m) * 6.25)}.euim-card--size-s .euim-card__content ion-item>:not([slot=start]):not([slot=end]){width:calc(var(--eui-base-spacing-m) * 6.875 + 1px)}.euim-card--size-m .euim-card__image{height:calc(var(--eui-base-spacing-m) * 8)}.euim-card--size-m .euim-card__content ion-item>:not([slot=start]):not([slot=end]){width:calc(var(--eui-base-spacing-m) * 9.625 + 1px)}\n"], dependencies: [{ kind: "component", type: i1.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimCardComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'euim-card', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, hostDirectives: [
-                        {
-                            directive: BaseStatesDirective,
-                            inputs: [
-                                'euimSizeM',
-                                'euimSizeS',
-                                'euimSizeL',
-                            ],
-                        },
-                    ], template: "<ion-card>\n    <ng-content select=\"[euimCardImage]\"></ng-content>\n    <div class=\"euim-card__content\">\n        <ng-content></ng-content>\n    </div>\n</ion-card>\n", styles: [".euim-card{position:relative;display:flex}.euim-card ion-card{margin:0}.euim-card__header-image{width:100%}.euim-card__image{height:100%;width:100%;object-fit:cover}.euim-card__content ion-item>ion-button[slot=end]{margin:0}.euim-card__content ion-item>ion-button[slot=end]::part(native){padding:0}.euim-card{display:flex}.euim-card--size-s .euim-card__image{height:calc(var(--eui-base-spacing-m) * 6.25)}.euim-card--size-s .euim-card__content ion-item>:not([slot=start]):not([slot=end]){width:calc(var(--eui-base-spacing-m) * 6.875 + 1px)}.euim-card--size-m .euim-card__image{height:calc(var(--eui-base-spacing-m) * 8)}.euim-card--size-m .euim-card__content ion-item>:not([slot=start]):not([slot=end]){width:calc(var(--eui-base-spacing-m) * 9.625 + 1px)}\n"] }]
-        }], ctorParameters: () => [{ type: BaseStatesDirective }], propDecorators: { cssClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
-class EuimCardImageDirective {
-    constructor() {
-        this.className = 'euim-card__image';
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimCardImageDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.5", type: EuimCardImageDirective, selector: "[euimCardImage]", host: { properties: { "class": "this.className" } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimCardImageDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[euimCardImage]',
-                }]
-        }], propDecorators: { className: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
-class EuimCardModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.5", ngImport: i0, type: EuimCardModule, declarations: [EuimCardComponent, EuimCardImageDirective], imports: [CommonModule, IonicModule], exports: [EuimCardComponent, EuimCardImageDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimCardModule, imports: [CommonModule, IonicModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimCardModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule, IonicModule],
-                    exports: [EuimCardComponent, EuimCardImageDirective],
-                    declarations: [EuimCardComponent, EuimCardImageDirective],
-                }]
-        }] });
-
-class EuimCardListComponent {
-    constructor() {
-        this.className = 'euim-card-list';
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimCardListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: EuimCardListComponent, selector: "euim-card-list", host: { properties: { "class": "this.className" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [".euim-card-list{padding:var(--eui-base-spacing-xs) 0 var(--eui-base-spacing-xs) 0;overflow-x:auto;display:flex;scrollbar-color:transparent transparent;scrollbar-width:none}.euim-card-list::-webkit-scrollbar{height:0}@media only screen and (min-width: 768px){.euim-card-list{flex-wrap:wrap}}.euim-card-list .euim-card{padding-right:var(--eui-base-spacing-m)}.euim-card-list .euim-card:first-child{padding-left:var(--eui-base-spacing-m)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimCardListComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'euim-card-list', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-content></ng-content>\n", styles: [".euim-card-list{padding:var(--eui-base-spacing-xs) 0 var(--eui-base-spacing-xs) 0;overflow-x:auto;display:flex;scrollbar-color:transparent transparent;scrollbar-width:none}.euim-card-list::-webkit-scrollbar{height:0}@media only screen and (min-width: 768px){.euim-card-list{flex-wrap:wrap}}.euim-card-list .euim-card{padding-right:var(--eui-base-spacing-m)}.euim-card-list .euim-card:first-child{padding-left:var(--eui-base-spacing-m)}\n"] }]
-        }], propDecorators: { className: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
-class EuimScrollerXComponent {
-    constructor() {
-        this.className = 'euim-scroller-x';
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimScrollerXComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: EuimScrollerXComponent, selector: "euim-scroller-x", host: { properties: { "class": "this.className" } }, ngImport: i0, template: "<ng-content></ng-content>\n\n", styles: [".euim-scroller-x{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-color:transparent transparent;scrollbar-width:none}.euim-scroller-x::-webkit-scrollbar{height:0}.euim-scroller-x>*{flex:0 0 auto}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimScrollerXComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'euim-scroller-x', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n\n", styles: [".euim-scroller-x{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-color:transparent transparent;scrollbar-width:none}.euim-scroller-x::-webkit-scrollbar{height:0}.euim-scroller-x>*{flex:0 0 auto}\n"] }]
-        }], propDecorators: { className: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
-class EuimScrollerXComponentModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimScrollerXComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.5", ngImport: i0, type: EuimScrollerXComponentModule, declarations: [EuimScrollerXComponent], imports: [CommonModule,
-            IonicModule], exports: [EuimScrollerXComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimScrollerXComponentModule, imports: [CommonModule,
-            IonicModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimScrollerXComponentModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        IonicModule,
-                    ],
-                    exports: [
-                        EuimScrollerXComponent,
+                        ...COMPONENTS$a,
                     ],
                     declarations: [
-                        EuimScrollerXComponent,
-                    ],
-                }]
-        }] });
-
-class EuimCardListModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimCardListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.5", ngImport: i0, type: EuimCardListModule, declarations: [EuimCardListComponent], imports: [CommonModule,
-            IonicModule,
-            EuimScrollerXComponentModule], exports: [EuimCardListComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimCardListModule, imports: [CommonModule,
-            IonicModule,
-            EuimScrollerXComponentModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimCardListModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        IonicModule,
-                        EuimScrollerXComponentModule,
+                        ...COMPONENTS$a,
                     ],
-                    exports: [EuimCardListComponent],
-                    declarations: [EuimCardListComponent],
                 }]
         }] });
 
@@ -1316,10 +1370,10 @@ class EuimBadgeComponent {
             this.baseStatesDirective.getCssClasses('euim-badge'),
         ].join(' ').trim();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimBadgeComponent, deps: [{ token: BaseStatesDirective }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: EuimBadgeComponent, selector: "euim-badge", host: { properties: { "class": "this.cssClasses" } }, hostDirectives: [{ directive: BaseStatesDirective, inputs: ["euimPositionTopEnd", "euimPositionTopEnd", "euimSizeM", "euimSizeM", "euimSizeS", "euimSizeS", "euimSizeL", "euimSizeL", "color", "color"] }], ngImport: i0, template: "<ng-content></ng-content>\n", styles: [".euim-badge{display:inline-flex;align-items:center;justify-content:center;border-radius:50px;height:var(--eui-s-l);min-width:var(--eui-s-l);padding:var(--eui-s-2xs) var(--eui-s-xs);color:var(--eui-c-white);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:var(--eui-f-s-bold);box-sizing:border-box;letter-spacing:normal}.euim-badge[slot=start]{margin-inline-end:var(--eui-base-spacing-m)}.euim-badge[slot=end]{margin-inline-start:var(--eui-base-spacing-m)}.euim-avatar-icon{position:relative;overflow:visible}.euim-avatar-icon .euim-badge--position-top-end{position:absolute;right:-6px;top:-6px}ion-button .euim-badge--position-top-end,ion-tab-button span .euim-badge--position-top-end{position:absolute;top:calc(-1 * var(--eui-s-s));left:var(--eui-s-s)}ion-button .euim-badge--size-l.euim-badge--position-top-end,ion-tab-button span .euim-badge--size-l.euim-badge--position-top-end{position:absolute;top:calc(-1 * var(--eui-s-s));left:var(--eui-s-s)}ion-button .euim-badge--size-m.euim-badge--position-top-end,ion-tab-button span .euim-badge--size-m.euim-badge--position-top-end{position:absolute;top:calc(-1 * var(--eui-s-xs));left:var(--eui-s-s)}ion-button .euim-badge--size-s.euim-badge--position-top-end,ion-tab-button span .euim-badge--size-s.euim-badge--position-top-end{position:absolute;top:calc(-1 * var(--eui-s-2xs));left:var(--eui-s-s)}ion-button::part(native){overflow:visible}ion-tab-button span{position:relative}ion-tab-button span ion-icon{font-size:var(--eui-f-size-2xl)}.euim-badge--info{background:var(--eui-bc-info-100)}.euim-badge--success{background:var(--eui-bc-success-100)}.euim-badge--warning{background:var(--eui-bc-warning-100)}.euim-badge--danger{background:var(--eui-bc-danger-100)}.euim-badge--default{background:var(--eui-bc-neutral-20);color:var(--eui-bc-neutral-100)}.euim-badge--size-s{min-width:var(--eui-s-m);height:var(--eui-s-m);padding:0 var(--eui-s-2xs);font:var(--eui-f-xs)!important}.euim-badge--size-m{min-width:calc(var(--eui-s-m) + var(--eui-s-2xs));height:calc(var(--eui-s-m) + var(--eui-s-2xs));padding:calc(var(--eui-s-2xs) / 2) calc(var(--eui-s-s) / 2);font:var(--eui-f-xs)!important}.euim-badge--size-l{height:var(--eui-s-l);min-width:var(--eui-s-l);padding:var(--eui-s-2xs) var(--eui-s-xs);font:var(--eui-f-s)!important}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimBadgeComponent, deps: [{ token: BaseStatesDirective }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.10", type: EuimBadgeComponent, selector: "euim-badge", host: { properties: { "class": "this.cssClasses" } }, hostDirectives: [{ directive: BaseStatesDirective, inputs: ["euimPositionTopEnd", "euimPositionTopEnd", "euimSizeM", "euimSizeM", "euimSizeS", "euimSizeS", "euimSizeL", "euimSizeL", "euimSizeXL", "euimSizeXL", "color", "color"] }], ngImport: i0, template: "<ng-content></ng-content>\n", styles: [".euim-badge{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--eui-br-max);height:var(--eui-is-m);min-width:var(--eui-is-m);padding:var(--eui-s-2xs) var(--eui-s-xs);color:var(--eui-c-white);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:var(--eui-f-s-bold-compact);box-sizing:border-box;letter-spacing:normal}.euim-avatar{position:relative;overflow:visible}ion-button .euim-badge--position-top-end,ion-tab-button span .euim-badge--position-top-end{position:absolute;top:calc(-1 * var(--eui-s-s));left:var(--eui-s-s)}ion-button .euim-badge--size-l.euim-badge--position-top-end,ion-tab-button span .euim-badge--size-l.euim-badge--position-top-end{position:absolute;top:calc(-1 * var(--eui-s-s));left:var(--eui-s-s)}ion-button .euim-badge--size-m.euim-badge--position-top-end,ion-tab-button span .euim-badge--size-m.euim-badge--position-top-end{position:absolute;top:calc(-1 * var(--eui-s-xs));left:var(--eui-s-s)}ion-button .euim-badge--size-s.euim-badge--position-top-end,ion-tab-button span .euim-badge--size-s.euim-badge--position-top-end{position:absolute;top:calc(-1 * var(--eui-s-2xs));left:var(--eui-s-m)}ion-button::part(native){overflow:visible}ion-tab-button span{position:relative}ion-tab-button span ion-icon{font-size:var(--eui-f-size-2xl)}.euim-badge--info{background:var(--eui-c-info)}.euim-badge--primary{background:var(--eui-c-primary)}.euim-badge--success{background:var(--eui-c-success)}.euim-badge--warning{background:var(--eui-c-warning)}.euim-badge--danger{background:var(--eui-c-danger)}.euim-badge--white{background:var(--eui-bc-white);color:var(--eui-c-primary)}.euim-badge--default{background:var(--eui-c-neutral-lightest);color:var(--eui-c-neutral-lightest-contrast)}.euim-badge--size-s{min-width:var(--eui-is-xs);height:var(--eui-is-xs);padding:var(--eui-s-2xs);font:var(--eui-f-xs-bold-compact)!important}.euim-badge--size-m{min-width:var(--eui-is-xs);height:var(--eui-is-xs);padding:var(--eui-s-2xs);font:var(--eui-f-s-bold-compact)!important}.euim-badge--size-l{height:var(--eui-is-m);min-width:var(--eui-is-m);font:var(--eui-f-s-bold-compact)!important}.euim-badge--size-xl{height:var(--eui-is-xl);min-width:var(--eui-is-xl);font:var(--eui-f-l-bold-compact)!important}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimBadgeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimBadgeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'euim-badge', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
                         {
@@ -1329,23 +1383,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
                                 'euimSizeM',
                                 'euimSizeS',
                                 'euimSizeL',
+                                'euimSizeXL',
                                 'color',
                             ],
                         },
-                    ], template: "<ng-content></ng-content>\n", styles: [".euim-badge{display:inline-flex;align-items:center;justify-content:center;border-radius:50px;height:var(--eui-s-l);min-width:var(--eui-s-l);padding:var(--eui-s-2xs) var(--eui-s-xs);color:var(--eui-c-white);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:var(--eui-f-s-bold);box-sizing:border-box;letter-spacing:normal}.euim-badge[slot=start]{margin-inline-end:var(--eui-base-spacing-m)}.euim-badge[slot=end]{margin-inline-start:var(--eui-base-spacing-m)}.euim-avatar-icon{position:relative;overflow:visible}.euim-avatar-icon .euim-badge--position-top-end{position:absolute;right:-6px;top:-6px}ion-button .euim-badge--position-top-end,ion-tab-button span .euim-badge--position-top-end{position:absolute;top:calc(-1 * var(--eui-s-s));left:var(--eui-s-s)}ion-button .euim-badge--size-l.euim-badge--position-top-end,ion-tab-button span .euim-badge--size-l.euim-badge--position-top-end{position:absolute;top:calc(-1 * var(--eui-s-s));left:var(--eui-s-s)}ion-button .euim-badge--size-m.euim-badge--position-top-end,ion-tab-button span .euim-badge--size-m.euim-badge--position-top-end{position:absolute;top:calc(-1 * var(--eui-s-xs));left:var(--eui-s-s)}ion-button .euim-badge--size-s.euim-badge--position-top-end,ion-tab-button span .euim-badge--size-s.euim-badge--position-top-end{position:absolute;top:calc(-1 * var(--eui-s-2xs));left:var(--eui-s-s)}ion-button::part(native){overflow:visible}ion-tab-button span{position:relative}ion-tab-button span ion-icon{font-size:var(--eui-f-size-2xl)}.euim-badge--info{background:var(--eui-bc-info-100)}.euim-badge--success{background:var(--eui-bc-success-100)}.euim-badge--warning{background:var(--eui-bc-warning-100)}.euim-badge--danger{background:var(--eui-bc-danger-100)}.euim-badge--default{background:var(--eui-bc-neutral-20);color:var(--eui-bc-neutral-100)}.euim-badge--size-s{min-width:var(--eui-s-m);height:var(--eui-s-m);padding:0 var(--eui-s-2xs);font:var(--eui-f-xs)!important}.euim-badge--size-m{min-width:calc(var(--eui-s-m) + var(--eui-s-2xs));height:calc(var(--eui-s-m) + var(--eui-s-2xs));padding:calc(var(--eui-s-2xs) / 2) calc(var(--eui-s-s) / 2);font:var(--eui-f-xs)!important}.euim-badge--size-l{height:var(--eui-s-l);min-width:var(--eui-s-l);padding:var(--eui-s-2xs) var(--eui-s-xs);font:var(--eui-f-s)!important}\n"] }]
+                    ], template: "<ng-content></ng-content>\n", styles: [".euim-badge{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--eui-br-max);height:var(--eui-is-m);min-width:var(--eui-is-m);padding:var(--eui-s-2xs) var(--eui-s-xs);color:var(--eui-c-white);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:var(--eui-f-s-bold-compact);box-sizing:border-box;letter-spacing:normal}.euim-avatar{position:relative;overflow:visible}ion-button .euim-badge--position-top-end,ion-tab-button span .euim-badge--position-top-end{position:absolute;top:calc(-1 * var(--eui-s-s));left:var(--eui-s-s)}ion-button .euim-badge--size-l.euim-badge--position-top-end,ion-tab-button span .euim-badge--size-l.euim-badge--position-top-end{position:absolute;top:calc(-1 * var(--eui-s-s));left:var(--eui-s-s)}ion-button .euim-badge--size-m.euim-badge--position-top-end,ion-tab-button span .euim-badge--size-m.euim-badge--position-top-end{position:absolute;top:calc(-1 * var(--eui-s-xs));left:var(--eui-s-s)}ion-button .euim-badge--size-s.euim-badge--position-top-end,ion-tab-button span .euim-badge--size-s.euim-badge--position-top-end{position:absolute;top:calc(-1 * var(--eui-s-2xs));left:var(--eui-s-m)}ion-button::part(native){overflow:visible}ion-tab-button span{position:relative}ion-tab-button span ion-icon{font-size:var(--eui-f-size-2xl)}.euim-badge--info{background:var(--eui-c-info)}.euim-badge--primary{background:var(--eui-c-primary)}.euim-badge--success{background:var(--eui-c-success)}.euim-badge--warning{background:var(--eui-c-warning)}.euim-badge--danger{background:var(--eui-c-danger)}.euim-badge--white{background:var(--eui-bc-white);color:var(--eui-c-primary)}.euim-badge--default{background:var(--eui-c-neutral-lightest);color:var(--eui-c-neutral-lightest-contrast)}.euim-badge--size-s{min-width:var(--eui-is-xs);height:var(--eui-is-xs);padding:var(--eui-s-2xs);font:var(--eui-f-xs-bold-compact)!important}.euim-badge--size-m{min-width:var(--eui-is-xs);height:var(--eui-is-xs);padding:var(--eui-s-2xs);font:var(--eui-f-s-bold-compact)!important}.euim-badge--size-l{height:var(--eui-is-m);min-width:var(--eui-is-m);font:var(--eui-f-s-bold-compact)!important}.euim-badge--size-xl{height:var(--eui-is-xl);min-width:var(--eui-is-xl);font:var(--eui-f-l-bold-compact)!important}\n"] }]
         }], ctorParameters: () => [{ type: BaseStatesDirective }], propDecorators: { cssClasses: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
 
 class EuimBadgeModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimBadgeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.5", ngImport: i0, type: EuimBadgeModule, declarations: [EuimBadgeComponent], imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimBadgeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.10", ngImport: i0, type: EuimBadgeModule, declarations: [EuimBadgeComponent], imports: [CommonModule,
             IonicModule], exports: [EuimBadgeComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimBadgeModule, imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimBadgeModule, imports: [CommonModule,
             IonicModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimBadgeModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimBadgeModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -1389,10 +1444,10 @@ class EuimMessageComponent {
                 this.baseStatesDirective.color !== 'info' ? 'euim-message--info' : '',
         ].join(' ');
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimMessageComponent, deps: [{ token: BaseStatesDirective }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: EuimMessageComponent, selector: "euim-message", host: { properties: { "class": "this.cssClasses" } }, hostDirectives: [{ directive: BaseStatesDirective, inputs: ["color", "color"] }], ngImport: i0, template: "<div class=\"euim-message__wrappericon\">\n    <ion-icon [name]=\"icon\" class=\"euim-message__icon\"></ion-icon>\n</div>\n<div class=\"euim-message__wrapper\">\n    <ng-content select=\"euim-message-title\"></ng-content>\n    <ng-content></ng-content>\n</div>\n", styles: [".euim-message{border-width:2px;border-style:solid;display:flex;padding:var(--eui-s-m)}.euim-message__wrappericon{width:var(--eui-s-l);height:var(--eui-s-l);padding:0;margin:0}.euim-message__icon{padding:0;margin:0;width:var(--eui-s-l);height:var(--eui-s-l)}.euim-message__wrapper{margin-left:var(--eui-s-xs)}.euim-message--danger{border-color:var(--eui-bc-danger-100)}.euim-message--danger ion-icon{color:var(--eui-bc-danger-100)}.euim-message--info{border-color:var(--eui-bc-info-100)}.euim-message--info ion-icon{color:var(--eui-bc-info-100)}.euim-message--success{border-color:var(--eui-bc-success-100)}.euim-message--success ion-icon{color:var(--eui-bc-success-100)}.euim-message--warning{border-color:var(--eui-bc-warning-100)}.euim-message--warning ion-icon{color:var(--eui-bc-warning-100)}.euim-message-title{display:flex;align-items:center;font:var(--eui-f-m);font:var(--eui-f-bold);padding:0;margin:0 0 var(--eui-s-xs)}\n"], dependencies: [{ kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimMessageComponent, deps: [{ token: BaseStatesDirective }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.10", type: EuimMessageComponent, selector: "euim-message", host: { properties: { "class": "this.cssClasses" } }, hostDirectives: [{ directive: BaseStatesDirective, inputs: ["color", "color"] }], ngImport: i0, template: "<div class=\"euim-message__wrappericon\">\n    <ion-icon [name]=\"icon\" class=\"euim-message__icon\"></ion-icon>\n</div>\n<div class=\"euim-message__wrapper\">\n    <ng-content select=\"euim-message-title\"></ng-content>\n    <ng-content></ng-content>\n</div>\n", styles: [".euim-message{border-width:2px;border-style:solid;display:flex;padding:var(--eui-s-m)}.euim-message__wrappericon{width:var(--eui-is-m);height:var(--eui-is-m);padding:0;margin:0}.euim-message__icon{padding:0;margin:0;width:var(--eui-is-m);height:var(--eui-is-m)}.euim-message__wrapper{margin-left:var(--eui-s-xs)}.euim-message--danger{border-color:var(--eui-c-danger)}.euim-message--danger ion-icon{color:var(--eui-c-danger)}.euim-message--info{border-color:var(--eui-c-info)}.euim-message--info ion-icon{color:var(--eui-c-info)}.euim-message--success{border-color:var(--eui-c-success)}.euim-message--success ion-icon{color:var(--eui-c-success)}.euim-message--warning{border-color:var(--eui-c-warning)}.euim-message--warning ion-icon{color:var(--eui-c-warning)}.euim-message-title{display:flex;align-items:center;font:var(--eui-f-m-bold-compact);padding:0;margin:0 0 var(--eui-s-xs)}\n"], dependencies: [{ kind: "component", type: i3.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimMessageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimMessageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'euim-message', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, hostDirectives: [
                         {
@@ -1401,7 +1456,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
                                 'color',
                             ],
                         },
-                    ], template: "<div class=\"euim-message__wrappericon\">\n    <ion-icon [name]=\"icon\" class=\"euim-message__icon\"></ion-icon>\n</div>\n<div class=\"euim-message__wrapper\">\n    <ng-content select=\"euim-message-title\"></ng-content>\n    <ng-content></ng-content>\n</div>\n", styles: [".euim-message{border-width:2px;border-style:solid;display:flex;padding:var(--eui-s-m)}.euim-message__wrappericon{width:var(--eui-s-l);height:var(--eui-s-l);padding:0;margin:0}.euim-message__icon{padding:0;margin:0;width:var(--eui-s-l);height:var(--eui-s-l)}.euim-message__wrapper{margin-left:var(--eui-s-xs)}.euim-message--danger{border-color:var(--eui-bc-danger-100)}.euim-message--danger ion-icon{color:var(--eui-bc-danger-100)}.euim-message--info{border-color:var(--eui-bc-info-100)}.euim-message--info ion-icon{color:var(--eui-bc-info-100)}.euim-message--success{border-color:var(--eui-bc-success-100)}.euim-message--success ion-icon{color:var(--eui-bc-success-100)}.euim-message--warning{border-color:var(--eui-bc-warning-100)}.euim-message--warning ion-icon{color:var(--eui-bc-warning-100)}.euim-message-title{display:flex;align-items:center;font:var(--eui-f-m);font:var(--eui-f-bold);padding:0;margin:0 0 var(--eui-s-xs)}\n"] }]
+                    ], template: "<div class=\"euim-message__wrappericon\">\n    <ion-icon [name]=\"icon\" class=\"euim-message__icon\"></ion-icon>\n</div>\n<div class=\"euim-message__wrapper\">\n    <ng-content select=\"euim-message-title\"></ng-content>\n    <ng-content></ng-content>\n</div>\n", styles: [".euim-message{border-width:2px;border-style:solid;display:flex;padding:var(--eui-s-m)}.euim-message__wrappericon{width:var(--eui-is-m);height:var(--eui-is-m);padding:0;margin:0}.euim-message__icon{padding:0;margin:0;width:var(--eui-is-m);height:var(--eui-is-m)}.euim-message__wrapper{margin-left:var(--eui-s-xs)}.euim-message--danger{border-color:var(--eui-c-danger)}.euim-message--danger ion-icon{color:var(--eui-c-danger)}.euim-message--info{border-color:var(--eui-c-info)}.euim-message--info ion-icon{color:var(--eui-c-info)}.euim-message--success{border-color:var(--eui-c-success)}.euim-message--success ion-icon{color:var(--eui-c-success)}.euim-message--warning{border-color:var(--eui-c-warning)}.euim-message--warning ion-icon{color:var(--eui-c-warning)}.euim-message-title{display:flex;align-items:center;font:var(--eui-f-m-bold-compact);padding:0;margin:0 0 var(--eui-s-xs)}\n"] }]
         }], ctorParameters: () => [{ type: BaseStatesDirective }], propDecorators: { cssClasses: [{
                 type: HostBinding,
                 args: ['class']
@@ -1411,30 +1466,30 @@ class EuimMessageTitleComponent {
     constructor() {
         this.className = 'euim-message-title';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimMessageTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: EuimMessageTitleComponent, selector: "euim-message-title", host: { properties: { "className": "this.className" } }, ngImport: i0, template: "<ng-content></ng-content>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimMessageTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.10", type: EuimMessageTitleComponent, selector: "euim-message-title", host: { properties: { "className": "this.className" } }, ngImport: i0, template: "<ng-content></ng-content>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimMessageTitleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimMessageTitleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'euim-message-title', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-content></ng-content>\n" }]
         }], propDecorators: { className: [{
                 type: HostBinding
             }] } });
 
-const COMPONENTS$a = [
+const COMPONENTS$9 = [
     EuimMessageComponent,
     EuimMessageTitleComponent,
 ];
 class EuimMessageModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimMessageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.5", ngImport: i0, type: EuimMessageModule, declarations: [EuimMessageComponent,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimMessageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.10", ngImport: i0, type: EuimMessageModule, declarations: [EuimMessageComponent,
             EuimMessageTitleComponent], imports: [CommonModule,
             IonicModule], exports: [EuimMessageComponent,
             EuimMessageTitleComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimMessageModule, imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimMessageModule, imports: [CommonModule,
             IonicModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimMessageModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimMessageModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -1442,10 +1497,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
                         IonicModule,
                     ],
                     exports: [
-                        ...COMPONENTS$a,
+                        ...COMPONENTS$9,
                     ],
                     declarations: [
-                        ...COMPONENTS$a,
+                        ...COMPONENTS$9,
                     ],
                 }]
         }] });
@@ -1454,12 +1509,12 @@ class EuimSpinnerComponent {
     constructor() {
         this.className = 'euim-spinner';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: EuimSpinnerComponent, selector: "euim-spinner", host: { properties: { "class": "this.className" } }, ngImport: i0, template: "<ion-spinner class=\"euim-spinner__icon\">\n</ion-spinner>\n<ng-content>\n</ng-content>\n\n\n", styles: [".euim-spinner{width:100%;margin:0;padding:0}.euim-spinner__icon{width:100%;height:var(--eui-s-2xl);color:var(--eui-bc-primary-100)}.euim-spinner--size-2xs{font-size:var(--eui-f-size-2xs)}.euim-spinner--size-xs{font-size:var(--eui-f-size-xs)}.euim-spinner--size-s{font-size:var(--eui-f-size-s)}.euim-spinner--size-m{font-size:var(--eui-f-size-m)}.euim-spinner--size-l{font-size:var(--eui-f-size-l)}.euim-spinner--size-xl{font-size:var(--eui-f-size-xl)}.euim-spinner--size-2xl{font-size:var(--eui-f-size-2xl)}.euim-spinner--size-3xl{font-size:var(--eui-f-size-3xl)}.euim-spinner--size-4xl{font-size:var(--eui-f-size-4xl)}.euim-spinner--primary{color:var(--eui-bc-primary-100)}.euim-spinner--secondary{color:var(--eui-bc-neutral-60)}.euim-spinner--info{color:var(--eui-bc-info-100)}.euim-spinner--success{color:var(--eui-bc-success-100)}.euim-spinner--warning{color:var(--eui-bc-warning-100)}.euim-spinner--danger{color:var(--eui-bc-danger-100)}.euim-spinner--accent{color:var(--eui-bc-accent-100)}.euim-spinner-message{font:var(--eui-f-m);font:var(--eui-f-bold);display:flex;justify-content:center;color:var(--eui-bc-neutral-80)}.euim-spinner-description{font:var(--eui-f-s);display:flex;justify-content:center;color:var(--eui-bc-neutral-80);margin-top:var(--eui-s-2xs)}\n"], dependencies: [{ kind: "component", type: i1.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.10", type: EuimSpinnerComponent, selector: "euim-spinner", host: { properties: { "class": "this.className" } }, ngImport: i0, template: "<ion-spinner class=\"euim-spinner__icon\">\n</ion-spinner>\n<ng-content>\n</ng-content>\n\n\n", styles: [".euim-spinner{width:100%;margin:0;padding:0}.euim-spinner__icon{width:100%;height:var(--eui-s-2xl);color:var(--eui-c-primary)}.euim-spinner--size-xs{font-size:var(--eui-f-xs-compact)}.euim-spinner--size-s{font-size:var(--eui-f-s-compact)}.euim-spinner--size-m{font-size:var(--eui-f-m-compact)}.euim-spinner--size-l{font-size:var(--eui-f-l-compact)}.euim-spinner--size-xl{font-size:var(--eui-f-xl-compact)}.euim-spinner--size-2xl{font-size:var(--eui-f-2xl-compact)}.euim-spinner--size-3xl{font-size:var(--eui-f-3xl-compact)}.euim-spinner--size-4xl{font-size:var(--eui-f-4xl-compact)}.euim-spinner--primary{color:var(--eui-c-primary)}.euim-spinner--secondary{color:var(--eui-c-neutral-light)}.euim-spinner--info{color:var(--eui-c-info)}.euim-spinner--success{color:var(--eui-c-success)}.euim-spinner--warning{color:var(--eui-c-warning)}.euim-spinner--danger{color:var(--eui-c-danger)}.euim-spinner-message{font:var(--eui-f-m-compact);display:flex;justify-content:center;color:var(--eui-c-neutral)}.euim-spinner-description{font:var(--eui-f-s-compact);display:flex;justify-content:center;color:var(--eui-c-neutral-light);margin-top:var(--eui-s-2xs)}\n"], dependencies: [{ kind: "component", type: i3.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimSpinnerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimSpinnerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'euim-spinner', encapsulation: ViewEncapsulation.None, template: "<ion-spinner class=\"euim-spinner__icon\">\n</ion-spinner>\n<ng-content>\n</ng-content>\n\n\n", styles: [".euim-spinner{width:100%;margin:0;padding:0}.euim-spinner__icon{width:100%;height:var(--eui-s-2xl);color:var(--eui-bc-primary-100)}.euim-spinner--size-2xs{font-size:var(--eui-f-size-2xs)}.euim-spinner--size-xs{font-size:var(--eui-f-size-xs)}.euim-spinner--size-s{font-size:var(--eui-f-size-s)}.euim-spinner--size-m{font-size:var(--eui-f-size-m)}.euim-spinner--size-l{font-size:var(--eui-f-size-l)}.euim-spinner--size-xl{font-size:var(--eui-f-size-xl)}.euim-spinner--size-2xl{font-size:var(--eui-f-size-2xl)}.euim-spinner--size-3xl{font-size:var(--eui-f-size-3xl)}.euim-spinner--size-4xl{font-size:var(--eui-f-size-4xl)}.euim-spinner--primary{color:var(--eui-bc-primary-100)}.euim-spinner--secondary{color:var(--eui-bc-neutral-60)}.euim-spinner--info{color:var(--eui-bc-info-100)}.euim-spinner--success{color:var(--eui-bc-success-100)}.euim-spinner--warning{color:var(--eui-bc-warning-100)}.euim-spinner--danger{color:var(--eui-bc-danger-100)}.euim-spinner--accent{color:var(--eui-bc-accent-100)}.euim-spinner-message{font:var(--eui-f-m);font:var(--eui-f-bold);display:flex;justify-content:center;color:var(--eui-bc-neutral-80)}.euim-spinner-description{font:var(--eui-f-s);display:flex;justify-content:center;color:var(--eui-bc-neutral-80);margin-top:var(--eui-s-2xs)}\n"] }]
+            args: [{ selector: 'euim-spinner', encapsulation: ViewEncapsulation.None, template: "<ion-spinner class=\"euim-spinner__icon\">\n</ion-spinner>\n<ng-content>\n</ng-content>\n\n\n", styles: [".euim-spinner{width:100%;margin:0;padding:0}.euim-spinner__icon{width:100%;height:var(--eui-s-2xl);color:var(--eui-c-primary)}.euim-spinner--size-xs{font-size:var(--eui-f-xs-compact)}.euim-spinner--size-s{font-size:var(--eui-f-s-compact)}.euim-spinner--size-m{font-size:var(--eui-f-m-compact)}.euim-spinner--size-l{font-size:var(--eui-f-l-compact)}.euim-spinner--size-xl{font-size:var(--eui-f-xl-compact)}.euim-spinner--size-2xl{font-size:var(--eui-f-2xl-compact)}.euim-spinner--size-3xl{font-size:var(--eui-f-3xl-compact)}.euim-spinner--size-4xl{font-size:var(--eui-f-4xl-compact)}.euim-spinner--primary{color:var(--eui-c-primary)}.euim-spinner--secondary{color:var(--eui-c-neutral-light)}.euim-spinner--info{color:var(--eui-c-info)}.euim-spinner--success{color:var(--eui-c-success)}.euim-spinner--warning{color:var(--eui-c-warning)}.euim-spinner--danger{color:var(--eui-c-danger)}.euim-spinner-message{font:var(--eui-f-m-compact);display:flex;justify-content:center;color:var(--eui-c-neutral)}.euim-spinner-description{font:var(--eui-f-s-compact);display:flex;justify-content:center;color:var(--eui-c-neutral-light);margin-top:var(--eui-s-2xs)}\n"] }]
         }], propDecorators: { className: [{
                 type: HostBinding,
                 args: ['class']
@@ -1470,12 +1525,12 @@ class EuimSpinnerMessageComponent {
     constructor() {
         this.className = 'euim-spinner-message';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimSpinnerMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: EuimSpinnerMessageComponent, selector: "[euimSpinnerMessage]", host: { properties: { "class": "this.className" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".euim-spinner-message{font:var(--eui-f-m);font:var(--eui-f-bold);display:flex;justify-content:center;color:var(--eui-bc-neutral-80)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimSpinnerMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.10", type: EuimSpinnerMessageComponent, selector: "[euimSpinnerMessage]", host: { properties: { "class": "this.className" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".euim-spinner-message{font:var(--eui-f-m-compact);display:flex;justify-content:center;color:var(--eui-c-neutral)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimSpinnerMessageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimSpinnerMessageComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[euimSpinnerMessage]', template: '<ng-content></ng-content>', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".euim-spinner-message{font:var(--eui-f-m);font:var(--eui-f-bold);display:flex;justify-content:center;color:var(--eui-bc-neutral-80)}\n"] }]
+            args: [{ selector: '[euimSpinnerMessage]', template: '<ng-content></ng-content>', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".euim-spinner-message{font:var(--eui-f-m-compact);display:flex;justify-content:center;color:var(--eui-c-neutral)}\n"] }]
         }], propDecorators: { className: [{
                 type: HostBinding,
                 args: ['class']
@@ -1486,31 +1541,31 @@ class EuimSpinnerDescriptionComponent {
     constructor() {
         this.className = 'euim-spinner-description';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimSpinnerDescriptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: EuimSpinnerDescriptionComponent, selector: "[euimSpinnerDescription]", host: { properties: { "class": "this.className" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".euim-spinner-description{font:var(--eui-f-s);display:flex;justify-content:center;color:var(--eui-bc-neutral-80);margin-top:var(--eui-s-2xs)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimSpinnerDescriptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.10", type: EuimSpinnerDescriptionComponent, selector: "[euimSpinnerDescription]", host: { properties: { "class": "this.className" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".euim-spinner-description{font:var(--eui-f-s-compact);display:flex;justify-content:center;color:var(--eui-c-neutral-light);margin-top:var(--eui-s-2xs)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimSpinnerDescriptionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimSpinnerDescriptionComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[euimSpinnerDescription]', template: '<ng-content></ng-content>', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".euim-spinner-description{font:var(--eui-f-s);display:flex;justify-content:center;color:var(--eui-bc-neutral-80);margin-top:var(--eui-s-2xs)}\n"] }]
+            args: [{ selector: '[euimSpinnerDescription]', template: '<ng-content></ng-content>', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".euim-spinner-description{font:var(--eui-f-s-compact);display:flex;justify-content:center;color:var(--eui-c-neutral-light);margin-top:var(--eui-s-2xs)}\n"] }]
         }], propDecorators: { className: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
 
 class EuimSpinnerComponentModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimSpinnerComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.5", ngImport: i0, type: EuimSpinnerComponentModule, declarations: [EuimSpinnerComponent,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimSpinnerComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.10", ngImport: i0, type: EuimSpinnerComponentModule, declarations: [EuimSpinnerComponent,
             EuimSpinnerMessageComponent,
             EuimSpinnerDescriptionComponent], imports: [CommonModule,
             IonicModule,
             TranslateModule], exports: [EuimSpinnerComponent,
             EuimSpinnerMessageComponent,
             EuimSpinnerDescriptionComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimSpinnerComponentModule, imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimSpinnerComponentModule, imports: [CommonModule,
             IonicModule,
             TranslateModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimSpinnerComponentModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimSpinnerComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -1539,6 +1594,7 @@ class EuimMediaHeaderComponent {
         this.baseStatesDirective = baseStatesDirective;
         this.euimNoGradient = false;
         this.euimTwoSidesGradient = false;
+        this.hasBlur = false;
     }
     getCssClasses() {
         let size;
@@ -1556,10 +1612,10 @@ class EuimMediaHeaderComponent {
             size ? `euim-media-header__size-${size}` : '',
         ].join(' ').trim();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimMediaHeaderComponent, deps: [{ token: BaseStatesDirective }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", type: EuimMediaHeaderComponent, selector: "euim-media-header", inputs: { euimNoGradient: ["euimNoGradient", "euimNoGradient", booleanAttribute], euimTwoSidesGradient: ["euimTwoSidesGradient", "euimTwoSidesGradient", booleanAttribute] }, host: { properties: { "class": "this.cssClasses" } }, hostDirectives: [{ directive: BaseStatesDirective, inputs: ["euimSizeM", "euimSizeM", "euimSizeS", "euimSizeS", "euimSizeL", "euimSizeL"] }], ngImport: i0, template: "<ng-content select=\"[euimMediaHeaderImage]\"></ng-content>\n@if (!euimNoGradient) {\n  <div [ngClass]=\"euimTwoSidesGradient ? 'euim-media-header__gradient euim-media-header__gradient--two-sides' : 'euim-media-header__gradient'\">\n  </div>\n}\n<div class=\"euim-media-header__text\">\n  <ng-content></ng-content>\n</div>\n", styles: [".euim-media-header{position:relative;display:flex}.euim-media-header__text{position:absolute;bottom:var(--eui-s-m);color:#fff;padding-left:var(--eui-s-m);padding-right:var(--eui-s-m)}.euim-media-header__text .euim-media-header__title{font:var(--eui-f-xl);font-weight:700;color:var(--eui-c-white)}.euim-media-header__text .euim-media-header__sub-title{color:var(--eui-c-white);font:var(--eui-f-m)}.euim-media-header__gradient{width:100%;height:100%;background:linear-gradient(to bottom,#fff0,#000);background-blend-mode:multiply;background-size:100%;position:absolute;inset:0}.euim-media-header__gradient--two-sides{background:linear-gradient(180deg,#000,#fff0 46.35%,#000 86.98%)!important}.euim-media-header__image{width:100%;height:100%;object-fit:cover}.euim-media-header__title{font:var(--eui-f-xl);font-weight:700;color:var(--eui-c-white)}.euim-media-header__sub-title{color:var(--eui-c-white);font:var(--eui-f-m)}.euim-media-header__title+.euim-media-header__sub-title{margin-top:var(--eui-s-2xs)}.euim-media-header__size-s{height:calc(var(--eui-s-m) * 8)}.euim-media-header__size-m{height:calc(var(--eui-s-m) * 16)}.euim-media-header__size-l{height:calc(var(--eui-s-m) * 25)}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimMediaHeaderComponent, deps: [{ token: BaseStatesDirective }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.10", type: EuimMediaHeaderComponent, selector: "euim-media-header", inputs: { euimNoGradient: ["euimNoGradient", "euimNoGradient", booleanAttribute], euimTwoSidesGradient: ["euimTwoSidesGradient", "euimTwoSidesGradient", booleanAttribute], hasBlur: ["hasBlur", "hasBlur", booleanAttribute] }, host: { properties: { "class": "this.cssClasses" } }, hostDirectives: [{ directive: BaseStatesDirective, inputs: ["euimSizeM", "euimSizeM", "euimSizeS", "euimSizeS", "euimSizeL", "euimSizeL"] }], ngImport: i0, template: "<ng-content select=\"[euimMediaHeaderImage]\"></ng-content>\n@if (!euimNoGradient) {\n  <div [ngClass]=\"euimTwoSidesGradient ? 'euim-media-header__gradient euim-media-header__gradient--two-sides' : 'euim-media-header__gradient'\">\n  </div>\n}\n@if (hasBlur) {\n    <div class=\"euim-media-header__blur\">\n    </div>\n}\n<div class=\"euim-media-header__content\">\n  <ng-content></ng-content>\n</div>\n", styles: [".euim-media-header{position:relative;display:flex}.euim-media-header__content{position:absolute;bottom:var(--eui-s-m);color:var(--eui-c-neutral-min);padding-left:var(--eui-s-m);padding-right:var(--eui-s-m)}.euim-media-header__content .euim-media-header__title{font:var(--eui-f-l-bold-compact);color:var(--eui-c-neutral-min)}.euim-media-header__content .euim-media-header__sub-title{color:var(--eui-c-neutral-min);font:var(--eui-f-m-compact)}.euim-media-header__content:has(.euim-media-header__custom-content){padding:0;top:0;right:0;width:100%;height:100%;overflow:auto}.euim-media-header__content:has(.euim-align-center){top:50%;right:50%;transform:translate(50%,-50%);width:100%;bottom:auto;text-align:center}.euim-media-header__blur{position:absolute;inset:0;background-color:#0003;-webkit-backdrop-filter:blur(25px);backdrop-filter:blur(25px)}.euim-media-header__gradient{width:100%;height:100%;background:linear-gradient(to bottom,#fff0,#000);background-blend-mode:multiply;background-size:100%;position:absolute;inset:0}.euim-media-header__gradient--two-sides{background:linear-gradient(180deg,#000,#fff0 46.35%,#000 86.98%)!important}.euim-media-header__image{width:100%;height:100%;object-fit:cover}.euim-media-header__title{font:var(--eui-f-xl-bold-compact);color:var(--eui-c-neutral-min)}.euim-media-header__sub-title{color:var(--eui-c-neutral-min);font:var(--eui-f-m-compact)}.euim-media-header__title+.euim-media-header__sub-title{margin-top:var(--eui-s-2xs)}.euim-media-header p,.euim-media-header span{margin:0}.euim-media-header span[euimMediaHeaderTitle],.euim-media-header span[euimMediaHeaderSubTitle]{display:block}.euim-media-header__size-s{height:calc(var(--eui-s-m) * 8)}.euim-media-header__size-m{height:calc(var(--eui-s-m) * 16)}.euim-media-header__size-l{height:calc(var(--eui-s-m) * 25)}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimMediaHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimMediaHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'euim-media-header', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, hostDirectives: [
                         {
@@ -1570,13 +1626,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
                                 'euimSizeL',
                             ],
                         },
-                    ], template: "<ng-content select=\"[euimMediaHeaderImage]\"></ng-content>\n@if (!euimNoGradient) {\n  <div [ngClass]=\"euimTwoSidesGradient ? 'euim-media-header__gradient euim-media-header__gradient--two-sides' : 'euim-media-header__gradient'\">\n  </div>\n}\n<div class=\"euim-media-header__text\">\n  <ng-content></ng-content>\n</div>\n", styles: [".euim-media-header{position:relative;display:flex}.euim-media-header__text{position:absolute;bottom:var(--eui-s-m);color:#fff;padding-left:var(--eui-s-m);padding-right:var(--eui-s-m)}.euim-media-header__text .euim-media-header__title{font:var(--eui-f-xl);font-weight:700;color:var(--eui-c-white)}.euim-media-header__text .euim-media-header__sub-title{color:var(--eui-c-white);font:var(--eui-f-m)}.euim-media-header__gradient{width:100%;height:100%;background:linear-gradient(to bottom,#fff0,#000);background-blend-mode:multiply;background-size:100%;position:absolute;inset:0}.euim-media-header__gradient--two-sides{background:linear-gradient(180deg,#000,#fff0 46.35%,#000 86.98%)!important}.euim-media-header__image{width:100%;height:100%;object-fit:cover}.euim-media-header__title{font:var(--eui-f-xl);font-weight:700;color:var(--eui-c-white)}.euim-media-header__sub-title{color:var(--eui-c-white);font:var(--eui-f-m)}.euim-media-header__title+.euim-media-header__sub-title{margin-top:var(--eui-s-2xs)}.euim-media-header__size-s{height:calc(var(--eui-s-m) * 8)}.euim-media-header__size-m{height:calc(var(--eui-s-m) * 16)}.euim-media-header__size-l{height:calc(var(--eui-s-m) * 25)}\n"] }]
+                    ], template: "<ng-content select=\"[euimMediaHeaderImage]\"></ng-content>\n@if (!euimNoGradient) {\n  <div [ngClass]=\"euimTwoSidesGradient ? 'euim-media-header__gradient euim-media-header__gradient--two-sides' : 'euim-media-header__gradient'\">\n  </div>\n}\n@if (hasBlur) {\n    <div class=\"euim-media-header__blur\">\n    </div>\n}\n<div class=\"euim-media-header__content\">\n  <ng-content></ng-content>\n</div>\n", styles: [".euim-media-header{position:relative;display:flex}.euim-media-header__content{position:absolute;bottom:var(--eui-s-m);color:var(--eui-c-neutral-min);padding-left:var(--eui-s-m);padding-right:var(--eui-s-m)}.euim-media-header__content .euim-media-header__title{font:var(--eui-f-l-bold-compact);color:var(--eui-c-neutral-min)}.euim-media-header__content .euim-media-header__sub-title{color:var(--eui-c-neutral-min);font:var(--eui-f-m-compact)}.euim-media-header__content:has(.euim-media-header__custom-content){padding:0;top:0;right:0;width:100%;height:100%;overflow:auto}.euim-media-header__content:has(.euim-align-center){top:50%;right:50%;transform:translate(50%,-50%);width:100%;bottom:auto;text-align:center}.euim-media-header__blur{position:absolute;inset:0;background-color:#0003;-webkit-backdrop-filter:blur(25px);backdrop-filter:blur(25px)}.euim-media-header__gradient{width:100%;height:100%;background:linear-gradient(to bottom,#fff0,#000);background-blend-mode:multiply;background-size:100%;position:absolute;inset:0}.euim-media-header__gradient--two-sides{background:linear-gradient(180deg,#000,#fff0 46.35%,#000 86.98%)!important}.euim-media-header__image{width:100%;height:100%;object-fit:cover}.euim-media-header__title{font:var(--eui-f-xl-bold-compact);color:var(--eui-c-neutral-min)}.euim-media-header__sub-title{color:var(--eui-c-neutral-min);font:var(--eui-f-m-compact)}.euim-media-header__title+.euim-media-header__sub-title{margin-top:var(--eui-s-2xs)}.euim-media-header p,.euim-media-header span{margin:0}.euim-media-header span[euimMediaHeaderTitle],.euim-media-header span[euimMediaHeaderSubTitle]{display:block}.euim-media-header__size-s{height:calc(var(--eui-s-m) * 8)}.euim-media-header__size-m{height:calc(var(--eui-s-m) * 16)}.euim-media-header__size-l{height:calc(var(--eui-s-m) * 25)}\n"] }]
         }], ctorParameters: () => [{ type: BaseStatesDirective }], propDecorators: { euimNoGradient: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
             }], euimTwoSidesGradient: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
+            }], hasBlur: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], cssClasses: [{
                 type: HostBinding,
                 args: ['class']
@@ -1586,10 +1645,10 @@ class EuimMediaHeaderSubTitleDirective {
     constructor() {
         this.className = 'euim-media-header__sub-title';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimMediaHeaderSubTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.5", type: EuimMediaHeaderSubTitleDirective, selector: "[euimMediaHeaderSubTitle]", host: { properties: { "class": "this.className" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimMediaHeaderSubTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.10", type: EuimMediaHeaderSubTitleDirective, selector: "[euimMediaHeaderSubTitle]", host: { properties: { "class": "this.className" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimMediaHeaderSubTitleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimMediaHeaderSubTitleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[euimMediaHeaderSubTitle]',
@@ -1603,10 +1662,10 @@ class EuimMediaHeaderTitleDirective {
     constructor() {
         this.className = 'euim-media-header__title';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimMediaHeaderTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.5", type: EuimMediaHeaderTitleDirective, selector: "[euimMediaHeaderTitle]", host: { properties: { "class": "this.className" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimMediaHeaderTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.10", type: EuimMediaHeaderTitleDirective, selector: "[euimMediaHeaderTitle]", host: { properties: { "class": "this.className" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimMediaHeaderTitleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimMediaHeaderTitleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[euimMediaHeaderTitle]',
@@ -1620,10 +1679,10 @@ class EuimMediaHeaderImageDirective {
     constructor() {
         this.className = 'euim-media-header__image';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimMediaHeaderImageDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.5", type: EuimMediaHeaderImageDirective, selector: "[euimMediaHeaderImage]", host: { properties: { "class": "this.className" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimMediaHeaderImageDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.10", type: EuimMediaHeaderImageDirective, selector: "[euimMediaHeaderImage]", host: { properties: { "class": "this.className" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimMediaHeaderImageDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimMediaHeaderImageDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[euimMediaHeaderImage]',
@@ -1633,37 +1692,58 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
                 args: ['class']
             }] } });
 
-const COMPONENTS$9 = [
+class EuimMediaHeaderCustomContentDirective {
+    constructor() {
+        this.className = 'euim-media-header__custom-content';
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimMediaHeaderCustomContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.10", type: EuimMediaHeaderCustomContentDirective, isStandalone: true, selector: "[euimMediaHeaderCustomContent]", host: { properties: { "class": "this.className" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimMediaHeaderCustomContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[euimMediaHeaderCustomContent]',
+                    standalone: true,
+                }]
+        }], propDecorators: { className: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+const COMPONENTS$8 = [
     EuimMediaHeaderComponent,
     EuimMediaHeaderTitleDirective,
     EuimMediaHeaderSubTitleDirective,
     EuimMediaHeaderImageDirective,
 ];
 class EuimMediaHeaderModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimMediaHeaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.5", ngImport: i0, type: EuimMediaHeaderModule, declarations: [EuimMediaHeaderComponent,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimMediaHeaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.10", ngImport: i0, type: EuimMediaHeaderModule, declarations: [EuimMediaHeaderComponent,
             EuimMediaHeaderTitleDirective,
             EuimMediaHeaderSubTitleDirective,
             EuimMediaHeaderImageDirective], imports: [CommonModule,
-            IonicModule], exports: [EuimMediaHeaderComponent,
+            IonicModule,
+            EuimMediaHeaderCustomContentDirective], exports: [EuimMediaHeaderComponent,
             EuimMediaHeaderTitleDirective,
             EuimMediaHeaderSubTitleDirective,
-            EuimMediaHeaderImageDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimMediaHeaderModule, imports: [CommonModule,
+            EuimMediaHeaderImageDirective, EuimMediaHeaderCustomContentDirective] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimMediaHeaderModule, imports: [CommonModule,
             IonicModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimMediaHeaderModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimMediaHeaderModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
                         CommonModule,
                         IonicModule,
+                        EuimMediaHeaderCustomContentDirective,
                     ],
                     exports: [
-                        ...COMPONENTS$9,
+                        ...COMPONENTS$8,
+                        EuimMediaHeaderCustomContentDirective,
                     ],
                     declarations: [
-                        ...COMPONENTS$9,
+                        ...COMPONENTS$8,
                     ],
                 }]
         }] });
@@ -1680,10 +1760,10 @@ class EuimDataSummaryColLabelDirective {
             this.baseStatesDirective.getCssClasses('euim-data-summary__col-label'),
         ].join(' ').trim();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimDataSummaryColLabelDirective, deps: [{ token: BaseStatesDirective }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.5", type: EuimDataSummaryColLabelDirective, selector: "[euimDataSummaryColLabel]", host: { properties: { "class": "this.cssClasses" } }, hostDirectives: [{ directive: BaseStatesDirective, inputs: ["color", "color"] }], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimDataSummaryColLabelDirective, deps: [{ token: BaseStatesDirective }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.10", type: EuimDataSummaryColLabelDirective, selector: "[euimDataSummaryColLabel]", host: { properties: { "class": "this.cssClasses" } }, hostDirectives: [{ directive: BaseStatesDirective, inputs: ["color", "color"] }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimDataSummaryColLabelDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimDataSummaryColLabelDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[euimDataSummaryColLabel]',
@@ -1713,10 +1793,10 @@ class EuimDataSummaryColValueDirective {
             this.baseStatesDirective.getCssClasses('euim-data-summary__col-value'),
         ].join(' ').trim();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimDataSummaryColValueDirective, deps: [{ token: BaseStatesDirective }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.5", type: EuimDataSummaryColValueDirective, selector: "[euimDataSummaryColValue]", host: { properties: { "class": "this.cssClasses" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimDataSummaryColValueDirective, deps: [{ token: BaseStatesDirective }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.10", type: EuimDataSummaryColValueDirective, selector: "[euimDataSummaryColValue]", host: { properties: { "class": "this.cssClasses" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimDataSummaryColValueDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimDataSummaryColValueDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[euimDataSummaryColValue]',
@@ -1743,18 +1823,18 @@ class EuimDataSummaryComponent {
             && this.euimDataSummaryColValueComponent) {
             if (this.baseStatesDirective.color) {
                 this.euimDataSummaryColLabelComponent.forEach(item => {
-                    item.baseStatesDirective.color = 'primary';
+                    item.baseStatesDirective.color = 'branding';
                 });
                 this.euimDataSummaryColValueComponent.forEach(item => {
-                    item.baseStatesDirective.color = 'primary';
+                    item.baseStatesDirective.color = 'branding';
                 });
             }
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimDataSummaryComponent, deps: [{ token: BaseStatesDirective }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: EuimDataSummaryComponent, selector: "euim-data-summary", host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "euimDataSummaryColLabelComponent", predicate: EuimDataSummaryColLabelDirective, descendants: true }, { propertyName: "euimDataSummaryColValueComponent", predicate: EuimDataSummaryColValueDirective, descendants: true }], hostDirectives: [{ directive: BaseStatesDirective, inputs: ["color", "color"] }], ngImport: i0, template: "<ng-content></ng-content>\n", styles: [".euim-data-summary{display:flex;width:100%;padding:var(--eui-s-s);border-bottom:1px solid var(--eui-bc-neutral-20);border-top:1px solid var(--eui-bc-neutral-20)}.euim-data-summary--primary{background-color:var(--eui-bc-primary-100);border-bottom:0;border-top:0}.euim-data-summary__col{width:100%;text-align:center}.euim-data-summary__col+.euim-data-summary__col{border-left:1px solid var(--eui-bc-neutral-20)}.euim-data-summary__col-label{color:var(--eui-bc-neutral-100);font:var(--eui-f-m);font:var(--eui-f-bold);margin-bottom:var(--eui-s-2xs)}.euim-data-summary__col-label--primary{color:var(--eui-c-white)}.euim-data-summary__col-value{color:var(--eui-bc-neutral-80);font:var(--eui-f-s)}.euim-data-summary__col-value--primary{color:var(--eui-c-white)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimDataSummaryComponent, deps: [{ token: BaseStatesDirective }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.10", type: EuimDataSummaryComponent, selector: "euim-data-summary", host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "euimDataSummaryColLabelComponent", predicate: EuimDataSummaryColLabelDirective, descendants: true }, { propertyName: "euimDataSummaryColValueComponent", predicate: EuimDataSummaryColValueDirective, descendants: true }], hostDirectives: [{ directive: BaseStatesDirective, inputs: ["color", "color"] }], ngImport: i0, template: "<ng-content></ng-content>\n", styles: [".euim-data-summary{display:flex;width:100%;padding:var(--eui-s-s);border-bottom:1px solid var(--eui-c-neutral-lightest);border-top:1px solid var(--eui-c-neutral-lightest)}.euim-data-summary--branding{background-color:var(--eui-c-branding);border-bottom:0;border-top:0}.euim-data-summary__col{width:100%;text-align:center}.euim-data-summary__col+.euim-data-summary__col{border-left:1px solid var(--eui-c-neutral-lightest)}.euim-data-summary--branding__col+.euim-data-summary--branding__col{border-left:1px solid var(--eui-c-branding-contrast)}.euim-data-summary__col-label{color:var(--eui-c-neutral);font:var(--eui-f-m-bold-compact);margin:0 0 var(--eui-s-2xs) 0}.euim-data-summary__col-label--branding{color:var(--eui-c-branding-contrast)}p:not(.euim-data-summary__col-label),span:not(.euim-data-summary__col-label){margin:0}.euim-data-summary span[euimDataSummaryColLabel]{display:block}.euim-data-summary__col-value{color:var(--eui-c-neutral);font:var(--eui-f-s-compact)}.euim-data-summary__col-value ion-icon{min-height:var(--eui-is-s);min-width:var(--eui-is-s);vertical-align:bottom;margin-right:var(--eui-s-2xs)}.euim-data-summary__col-value--branding{color:var(--eui-c-branding-contrast)}.euim-data-summary span[euimDataSummaryColValue]{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimDataSummaryComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimDataSummaryComponent, decorators: [{
             type: Component,
             args: [{ selector: 'euim-data-summary', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, hostDirectives: [
                         {
@@ -1763,7 +1843,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
                                 'color',
                             ],
                         },
-                    ], template: "<ng-content></ng-content>\n", styles: [".euim-data-summary{display:flex;width:100%;padding:var(--eui-s-s);border-bottom:1px solid var(--eui-bc-neutral-20);border-top:1px solid var(--eui-bc-neutral-20)}.euim-data-summary--primary{background-color:var(--eui-bc-primary-100);border-bottom:0;border-top:0}.euim-data-summary__col{width:100%;text-align:center}.euim-data-summary__col+.euim-data-summary__col{border-left:1px solid var(--eui-bc-neutral-20)}.euim-data-summary__col-label{color:var(--eui-bc-neutral-100);font:var(--eui-f-m);font:var(--eui-f-bold);margin-bottom:var(--eui-s-2xs)}.euim-data-summary__col-label--primary{color:var(--eui-c-white)}.euim-data-summary__col-value{color:var(--eui-bc-neutral-80);font:var(--eui-f-s)}.euim-data-summary__col-value--primary{color:var(--eui-c-white)}\n"] }]
+                    ], template: "<ng-content></ng-content>\n", styles: [".euim-data-summary{display:flex;width:100%;padding:var(--eui-s-s);border-bottom:1px solid var(--eui-c-neutral-lightest);border-top:1px solid var(--eui-c-neutral-lightest)}.euim-data-summary--branding{background-color:var(--eui-c-branding);border-bottom:0;border-top:0}.euim-data-summary__col{width:100%;text-align:center}.euim-data-summary__col+.euim-data-summary__col{border-left:1px solid var(--eui-c-neutral-lightest)}.euim-data-summary--branding__col+.euim-data-summary--branding__col{border-left:1px solid var(--eui-c-branding-contrast)}.euim-data-summary__col-label{color:var(--eui-c-neutral);font:var(--eui-f-m-bold-compact);margin:0 0 var(--eui-s-2xs) 0}.euim-data-summary__col-label--branding{color:var(--eui-c-branding-contrast)}p:not(.euim-data-summary__col-label),span:not(.euim-data-summary__col-label){margin:0}.euim-data-summary span[euimDataSummaryColLabel]{display:block}.euim-data-summary__col-value{color:var(--eui-c-neutral);font:var(--eui-f-s-compact)}.euim-data-summary__col-value ion-icon{min-height:var(--eui-is-s);min-width:var(--eui-is-s);vertical-align:bottom;margin-right:var(--eui-s-2xs)}.euim-data-summary__col-value--branding{color:var(--eui-c-branding-contrast)}.euim-data-summary span[euimDataSummaryColValue]{display:block}\n"] }]
         }], ctorParameters: () => [{ type: BaseStatesDirective }], propDecorators: { euimDataSummaryColLabelComponent: [{
                 type: ContentChildren,
                 args: [EuimDataSummaryColLabelDirective, { descendants: true }]
@@ -1779,10 +1859,10 @@ class EuimDataSummaryColComponent {
     constructor() {
         this.className = 'euim-data-summary__col';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimDataSummaryColComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: EuimDataSummaryColComponent, selector: "euim-data-summary-col", host: { properties: { "class": "this.className" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimDataSummaryColComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.10", type: EuimDataSummaryColComponent, selector: "euim-data-summary-col", host: { properties: { "class": "this.className" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimDataSummaryColComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimDataSummaryColComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'euim-data-summary-col',
@@ -1793,15 +1873,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
                 args: ['class']
             }] } });
 
-const COMPONENTS$8 = [
+const COMPONENTS$7 = [
     EuimDataSummaryComponent,
     EuimDataSummaryColComponent,
     EuimDataSummaryColLabelDirective,
     EuimDataSummaryColValueDirective,
 ];
 class EuimDataSummaryModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimDataSummaryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.5", ngImport: i0, type: EuimDataSummaryModule, declarations: [EuimDataSummaryComponent,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimDataSummaryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.10", ngImport: i0, type: EuimDataSummaryModule, declarations: [EuimDataSummaryComponent,
             EuimDataSummaryColComponent,
             EuimDataSummaryColLabelDirective,
             EuimDataSummaryColValueDirective], imports: [CommonModule,
@@ -1809,10 +1889,10 @@ class EuimDataSummaryModule {
             EuimDataSummaryColComponent,
             EuimDataSummaryColLabelDirective,
             EuimDataSummaryColValueDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimDataSummaryModule, imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimDataSummaryModule, imports: [CommonModule,
             IonicModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimDataSummaryModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimDataSummaryModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -1820,80 +1900,144 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
                         IonicModule,
                     ],
                     exports: [
-                        ...COMPONENTS$8,
+                        ...COMPONENTS$7,
                     ],
                     declarations: [
-                        ...COMPONENTS$8,
+                        ...COMPONENTS$7,
                     ],
                 }]
         }] });
 
-class EuimAvatarComponent {
+class EuimCardImageDirective {
     constructor() {
-        this.className = 'euim-avatar';
+        this.className = 'euim-card__image';
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimCardImageDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.10", type: EuimCardImageDirective, selector: "[euimCardImage]", inputs: { euimCardImageHeight: "euimCardImageHeight", euimCardImageWidth: "euimCardImageWidth" }, host: { properties: { "style.--euimImageHeight": "this.euimCardImageHeight", "style.--euimImageWidth": "this.euimCardImageWidth", "class": "this.className" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimCardImageDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[euimCardImage]',
+                }]
+        }], propDecorators: { euimCardImageHeight: [{
+                type: HostBinding,
+                args: ['style.--euimImageHeight']
+            }, {
+                type: Input
+            }], euimCardImageWidth: [{
+                type: HostBinding,
+                args: ['style.--euimImageWidth']
+            }, {
+                type: Input
+            }], className: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class EuimCardComponent {
+    get cssClasses() {
+        return this.getCssClasses();
+    }
+    constructor(baseStatesDirective) {
+        this.baseStatesDirective = baseStatesDirective;
+    }
+    getCssClasses() {
+        return [
+            this.baseStatesDirective.getCssClasses('euim-card'),
+        ].join(' ').trim();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: EuimAvatarComponent, selector: "euim-avatar", host: { properties: { "class": "this.className" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [".euim-avatar{display:inline-flex;position:relative}.euim-avatar[slot=start]{margin-inline-end:var(--eui-s-m)}.euim-avatar[slot=end]{margin-inline-start:var(--eui-s-m)}.euim-avatar__sub-icon{position:absolute;z-index:99;display:inline-flex;bottom:-6px;right:-6px}.euim-avatar__sub-icon .euim-avatar-icon--fill-outline-solid{border-width:2px;border-style:solid;border-color:var(--eui-c-white)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    ngAfterContentInit() {
+        if (this.cardImageDirective?.euimCardImageWidth) {
+            this.imageWidth = this.cardImageDirective.euimCardImageWidth;
+        }
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimCardComponent, deps: [{ token: BaseStatesDirective }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.10", type: EuimCardComponent, selector: "euim-card", host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "cardImageDirective", first: true, predicate: EuimCardImageDirective, descendants: true }], hostDirectives: [{ directive: BaseStatesDirective, inputs: ["euimSizeM", "euimSizeM", "euimSizeS", "euimSizeS", "euimSizeL", "euimSizeL"] }], ngImport: i0, template: "<ion-card [style.width]=\"imageWidth ? imageWidth : ''\">\n    <ng-content select=\"[euimCardImage]\"></ng-content>\n    <div class=\"euim-card__content\">\n        <ng-content></ng-content>\n    </div>\n</ion-card>\n", styles: [".euim-card{position:relative}.euim-card ion-card{margin:0;width:100%}.euim-card__header-image{width:100%}.euim-card__image{height:100%;width:100%;object-fit:cover}.euim-card__content ion-item>ion-button[slot=end]{margin:0}.euim-card__content ion-item>ion-button[slot=end]::part(native){padding:0}.euim-card--size-s .euim-card__image{height:calc(var(--eui-s-m) * 6.25)}.euim-card--size-s .euim-card__image[style*=--euimImageHeight]{height:var(--euimImageHeight)}.euim-card--size-s .euim-card__content ion-item{--inner-padding-end: 0;--padding-start: 0;padding:0 var(--eui-s-m);min-width:calc(var(--eui-s-m) * 6.875 + 1px)}.euim-card--size-s .euim-card__content ion-item::part(native){padding:0}.euim-card--size-m .euim-card__image{height:calc(var(--eui-s-m) * 8)}.euim-card--size-m .euim-card__image[style*=--euimImageHeight]{height:var(--euimImageHeight)}.euim-card--size-m .euim-card__content ion-item{--inner-padding-end: 0;--padding-start: 0;padding:0 var(--eui-s-m);min-width:calc(var(--eui-s-m) * 9.625 + 1px)}.euim-card--size-m .euim-card__content ion-item::part(native){padding:0}\n"], dependencies: [{ kind: "component", type: i3.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimAvatarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'euim-avatar', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n", styles: [".euim-avatar{display:inline-flex;position:relative}.euim-avatar[slot=start]{margin-inline-end:var(--eui-s-m)}.euim-avatar[slot=end]{margin-inline-start:var(--eui-s-m)}.euim-avatar__sub-icon{position:absolute;z-index:99;display:inline-flex;bottom:-6px;right:-6px}.euim-avatar__sub-icon .euim-avatar-icon--fill-outline-solid{border-width:2px;border-style:solid;border-color:var(--eui-c-white)}\n"] }]
-        }], propDecorators: { className: [{
+            args: [{ selector: 'euim-card', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, hostDirectives: [
+                        {
+                            directive: BaseStatesDirective,
+                            inputs: [
+                                'euimSizeM',
+                                'euimSizeS',
+                                'euimSizeL',
+                            ],
+                        },
+                    ], template: "<ion-card [style.width]=\"imageWidth ? imageWidth : ''\">\n    <ng-content select=\"[euimCardImage]\"></ng-content>\n    <div class=\"euim-card__content\">\n        <ng-content></ng-content>\n    </div>\n</ion-card>\n", styles: [".euim-card{position:relative}.euim-card ion-card{margin:0;width:100%}.euim-card__header-image{width:100%}.euim-card__image{height:100%;width:100%;object-fit:cover}.euim-card__content ion-item>ion-button[slot=end]{margin:0}.euim-card__content ion-item>ion-button[slot=end]::part(native){padding:0}.euim-card--size-s .euim-card__image{height:calc(var(--eui-s-m) * 6.25)}.euim-card--size-s .euim-card__image[style*=--euimImageHeight]{height:var(--euimImageHeight)}.euim-card--size-s .euim-card__content ion-item{--inner-padding-end: 0;--padding-start: 0;padding:0 var(--eui-s-m);min-width:calc(var(--eui-s-m) * 6.875 + 1px)}.euim-card--size-s .euim-card__content ion-item::part(native){padding:0}.euim-card--size-m .euim-card__image{height:calc(var(--eui-s-m) * 8)}.euim-card--size-m .euim-card__image[style*=--euimImageHeight]{height:var(--euimImageHeight)}.euim-card--size-m .euim-card__content ion-item{--inner-padding-end: 0;--padding-start: 0;padding:0 var(--eui-s-m);min-width:calc(var(--eui-s-m) * 9.625 + 1px)}.euim-card--size-m .euim-card__content ion-item::part(native){padding:0}\n"] }]
+        }], ctorParameters: () => [{ type: BaseStatesDirective }], propDecorators: { cardImageDirective: [{
+                type: ContentChild,
+                args: [EuimCardImageDirective]
+            }], cssClasses: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
 
-class EuimAvatarMainIconDirective {
+class EuimCardModule {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.10", ngImport: i0, type: EuimCardModule, declarations: [EuimCardComponent, EuimCardImageDirective], imports: [CommonModule, IonicModule], exports: [EuimCardComponent, EuimCardImageDirective] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimCardModule, imports: [CommonModule, IonicModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimCardModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, IonicModule],
+                    exports: [EuimCardComponent, EuimCardImageDirective],
+                    declarations: [EuimCardComponent, EuimCardImageDirective],
+                }]
+        }] });
+
+class EuimCardListComponent {
     constructor() {
-        this.className = 'euim-avatar__main-icon';
+        this.direction = '';
+    }
+    get cssClasses() {
+        return this.getCssClasses();
+    }
+    getCssClasses() {
+        return [
+            'euim-card-list',
+            this.direction ? `euim-card-list--direction-${this.direction}` : '',
+        ].join(' ').trim();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimAvatarMainIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.5", type: EuimAvatarMainIconDirective, selector: "[euimAvatarMainIcon]", host: { properties: { "class": "this.className" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimCardListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.10", type: EuimCardListComponent, selector: "euim-card-list", inputs: { direction: "direction" }, host: { properties: { "class": "this.cssClasses" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [".euim-card-list{padding:var(--eui-s-xs) 0 var(--eui-s-xs) var(--eui-s-m);overflow-x:auto;display:flex;scrollbar-color:transparent transparent;scrollbar-width:none}.euim-card-list::-webkit-scrollbar{height:0}.euim-card-list .euim-card{padding-right:var(--eui-s-m)}.euim-card-list--direction-column{flex-direction:column;padding:var(--eui-s-xs)}.euim-card-list--direction-column .euim-card{padding-right:0;margin-bottom:var(--eui-s-xs)}.euim-card-list--direction-column .euim-card:first-child{padding-left:0}@media only screen and (min-width: 768px){.euim-card-list{flex-wrap:wrap}.euim-card-list .euim-card{margin-bottom:var(--eui-s-xs)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimAvatarMainIconDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[euimAvatarMainIcon]',
-                }]
-        }], propDecorators: { className: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimCardListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'euim-card-list', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-content></ng-content>\n", styles: [".euim-card-list{padding:var(--eui-s-xs) 0 var(--eui-s-xs) var(--eui-s-m);overflow-x:auto;display:flex;scrollbar-color:transparent transparent;scrollbar-width:none}.euim-card-list::-webkit-scrollbar{height:0}.euim-card-list .euim-card{padding-right:var(--eui-s-m)}.euim-card-list--direction-column{flex-direction:column;padding:var(--eui-s-xs)}.euim-card-list--direction-column .euim-card{padding-right:0;margin-bottom:var(--eui-s-xs)}.euim-card-list--direction-column .euim-card:first-child{padding-left:0}@media only screen and (min-width: 768px){.euim-card-list{flex-wrap:wrap}.euim-card-list .euim-card{margin-bottom:var(--eui-s-xs)}}\n"] }]
+        }], propDecorators: { direction: [{
+                type: Input
+            }], cssClasses: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
 
-class EuimAvatarSubIconDirective {
+class EuimScrollerXComponent {
     constructor() {
-        this.className = 'euim-avatar__sub-icon';
+        this.className = 'euim-scroller-x';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimAvatarSubIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.5", type: EuimAvatarSubIconDirective, selector: "[euimAvatarSubIcon]", host: { properties: { "class": "this.className" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimScrollerXComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.10", type: EuimScrollerXComponent, selector: "euim-scroller-x", host: { properties: { "class": "this.className" } }, ngImport: i0, template: "<ng-content></ng-content>\n\n", styles: [".euim-scroller-x{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-color:transparent transparent;scrollbar-width:none}.euim-scroller-x::-webkit-scrollbar{height:0}.euim-scroller-x>*{flex:0 0 auto}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimAvatarSubIconDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[euimAvatarSubIcon]',
-                }]
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimScrollerXComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'euim-scroller-x', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n\n", styles: [".euim-scroller-x{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-color:transparent transparent;scrollbar-width:none}.euim-scroller-x::-webkit-scrollbar{height:0}.euim-scroller-x>*{flex:0 0 auto}\n"] }]
         }], propDecorators: { className: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
 
-const COMPONENTS$7 = [
-    EuimAvatarComponent,
-    EuimAvatarSubIconDirective,
-    EuimAvatarMainIconDirective,
-];
-class EuimAvatarModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimAvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.5", ngImport: i0, type: EuimAvatarModule, declarations: [EuimAvatarComponent,
-            EuimAvatarSubIconDirective,
-            EuimAvatarMainIconDirective], imports: [CommonModule,
-            IonicModule], exports: [EuimAvatarComponent,
-            EuimAvatarSubIconDirective,
-            EuimAvatarMainIconDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimAvatarModule, imports: [CommonModule,
+class EuimScrollerXComponentModule {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimScrollerXComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.10", ngImport: i0, type: EuimScrollerXComponentModule, declarations: [EuimScrollerXComponent], imports: [CommonModule,
+            IonicModule], exports: [EuimScrollerXComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimScrollerXComponentModule, imports: [CommonModule,
             IonicModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimAvatarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimScrollerXComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -1901,11 +2045,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
                         IonicModule,
                     ],
                     exports: [
-                        ...COMPONENTS$7,
+                        EuimScrollerXComponent,
                     ],
                     declarations: [
-                        ...COMPONENTS$7,
+                        EuimScrollerXComponent,
+                    ],
+                }]
+        }] });
+
+class EuimCardListModule {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimCardListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.10", ngImport: i0, type: EuimCardListModule, declarations: [EuimCardListComponent], imports: [CommonModule,
+            IonicModule,
+            EuimScrollerXComponentModule], exports: [EuimCardListComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimCardListModule, imports: [CommonModule,
+            IonicModule,
+            EuimScrollerXComponentModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimCardListModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        IonicModule,
+                        EuimScrollerXComponentModule,
                     ],
+                    exports: [EuimCardListComponent],
+                    declarations: [EuimCardListComponent],
                 }]
         }] });
 
@@ -1943,6 +2109,8 @@ class EuimAlertMessageComponent {
                 return 'search-sharp';
             case 'dark':
                 return 'search-sharp';
+            case 'branding':
+                return 'search-sharp';
             case 'light':
                 return 'search-sharp';
             case 'clear':
@@ -1968,10 +2136,10 @@ class EuimAlertMessageComponent {
         this.isVisible = false;
         this.euimClose.emit();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimAlertMessageComponent, deps: [{ token: BaseStatesDirective }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", type: EuimAlertMessageComponent, selector: "euim-alert-message", inputs: { euimLabelTruncate: ["euimLabelTruncate", "euimLabelTruncate", booleanAttribute], hasIcon: ["hasIcon", "hasIcon", booleanAttribute], isCloseable: ["isCloseable", "isCloseable", booleanAttribute] }, outputs: { euimClose: "euimClose" }, host: { properties: { "class": "this.cssClasses" } }, hostDirectives: [{ directive: BaseStatesDirective, inputs: ["color", "color"] }], ngImport: i0, template: "@if (hasIcon && isVisible) {\n  <div class=\"euim-alert-message__wrappericon\">\n    @if (hasIcon) {\n      <ion-icon [name]=\"icon\" class=\"euim-alert-message__icon\"></ion-icon>\n    }\n  </div>\n}\n@if (isVisible) {\n  <div class=\"euim-alert-message__wrapper\">\n    <div class=\"slotStart\">\n      <ng-content select=\"[slotStart]\"></ng-content>\n    </div>\n    <div euimLabel [euimLabelTruncate]=\"euimLabelTruncate\">\n      <ng-content></ng-content>\n    </div>\n    <div class=\"slotEnd\">\n      <ng-content select=\"[slotEnd]\"></ng-content>\n    </div>\n  </div>\n}\n\n@if (isCloseable && isVisible) {\n  <a role=\"button\" aria-label=\"Close Icon Button\" class=\"euim-alert-message__close\"\n    (click)=\"onClose($event)\">\n    <ion-icon name=\"close-sharp\" class=\"euim-alert-message__closeIcon\"></ion-icon>\n  </a>\n}\n", styles: [".euim-alert-message{display:flex;align-items:center;font:var(--eui-f-s);padding-left:var(--eui-s-m);padding-right:var(--eui-s-xs);padding-top:var(--eui-s-xs);padding-bottom:var(--eui-s-xs)}.euim-alert-message__wrapper{padding:0;margin:0;min-width:1px;display:flex;align-items:center;position:relative;flex-grow:1}.euim-alert-message .slotEnd{display:flex;align-items:center;margin-inline-start:auto;padding-left:var(--eui-s-xs)}.euim-alert-message .slotEnd ion-icon{width:var(--eui-s-m);height:var(--eui-s-m);display:flex}.euim-alert-message [slotStart]{display:flex;align-items:center;width:var(--eui-s-l);height:var(--eui-s-l);margin-inline-end:var(--eui-s-m)}.euim-alert-message__icon{align-items:center;width:var(--eui-s-l);height:var(--eui-s-l);margin-inline-end:var(--eui-s-m)}.euim-alert-message__closeIcon{align-items:center;width:var(--eui-s-m);height:var(--eui-s-m)}.euim-alert-message__wrappericon{align-items:center;width:var(--eui-s-l);height:var(--eui-s-l);margin-inline-end:var(--eui-s-m)}.euim-alert-message__close{padding:0;margin:0;width:var(--eui-s-m);height:var(--eui-s-m)}.euim-alert-message a{cursor:pointer}.euim-alert-message ion-badge[slotEnd]{display:flex}.euim-alert-message--danger{color:var(--eui-bc-danger-120);background:var(--eui-bc-danger-25)}.euim-alert-message--danger .euim-label{color:var(--eui-bc-danger-120)}.euim-alert-message--danger ion-icon{color:var(--eui-bc-danger-100)}.euim-alert-message--danger ion-badge[slotEnd],.euim-alert-message--danger ion-button[slotEnd],.euim-alert-message--danger ion-chip[slotEnd]{--background: var(--eui-bc-danger-100);color:var(--eui-c-white)}.euim-alert-message--danger ion-badge[slotEnd] ion-icon,.euim-alert-message--danger ion-button[slotEnd] ion-icon,.euim-alert-message--danger ion-chip[slotEnd] ion-icon{color:var(--eui-c-white)}.euim-alert-message--danger [slotEnd] ion-icon{color:var(--eui-bc-danger-100)}.euim-alert-message--info{color:var(--eui-bc-info-120);background:var(--eui-bc-info-25)}.euim-alert-message--info .euim-label{color:var(--eui-bc-info-120)}.euim-alert-message--info ion-icon{color:var(--eui-bc-info-100)}.euim-alert-message--info ion-badge[slotEnd],.euim-alert-message--info ion-button[slotEnd],.euim-alert-message--info ion-chip[slotEnd]{--background: var(--eui-bc-info-100);color:var(--eui-c-white)}.euim-alert-message--info ion-badge[slotEnd] ion-icon,.euim-alert-message--info ion-button[slotEnd] ion-icon,.euim-alert-message--info ion-chip[slotEnd] ion-icon{color:var(--eui-c-white)}.euim-alert-message--info [slotEnd] ion-icon{color:var(--eui-bc-info-100)}.euim-alert-message--success{color:var(--eui-bc-success-120);background:var(--eui-bc-success-25)}.euim-alert-message--success .euim-label{color:var(--eui-bc-success-120)}.euim-alert-message--success ion-icon{color:var(--eui-bc-success-100)}.euim-alert-message--success ion-badge[slotEnd],.euim-alert-message--success ion-button[slotEnd],.euim-alert-message--success ion-chip[slotEnd]{--background: var(--eui-bc-success-100);color:var(--eui-c-white)}.euim-alert-message--success ion-badge[slotEnd] ion-icon,.euim-alert-message--success ion-button[slotEnd] ion-icon,.euim-alert-message--success ion-chip[slotEnd] ion-icon{color:var(--eui-c-white)}.euim-alert-message--success [slotEnd] ion-icon{color:var(--eui-bc-success-100)}.euim-alert-message--warning{color:var(--eui-bc-warning-140);background:var(--eui-bc-warning-25)}.euim-alert-message--warning .euim-label{color:var(--eui-bc-warning-140)}.euim-alert-message--warning ion-icon{color:var(--eui-bc-warning-120)}.euim-alert-message--warning ion-badge[slotEnd],.euim-alert-message--warning ion-button[slotEnd],.euim-alert-message--warning ion-chip[slotEnd]{--background: var(--eui-bc-warning-120);color:var(--eui-c-white)}.euim-alert-message--warning ion-badge[slotEnd] ion-icon,.euim-alert-message--warning ion-button[slotEnd] ion-icon,.euim-alert-message--warning ion-chip[slotEnd] ion-icon{color:var(--eui-c-white)}.euim-alert-message--warning [slotEnd] ion-icon{color:var(--eui-bc-warning-120)}.euim-alert-message--dark{color:var(--eui-c-white);background:var(--eui-bc-neutral-100)}.euim-alert-message--dark ion-icon,.euim-alert-message--dark .euim-label{color:var(--eui-c-white)}.euim-alert-message--dark [slotEnd]{--background: var(--eui-bc-neutral-100);color:var(--eui-c-white)}.euim-alert-message--primary{color:var(--eui-c-white);background:var(--eui-bc-primary-100)}.euim-alert-message--primary ion-icon,.euim-alert-message--primary .euim-label{color:var(--eui-c-white)}.euim-alert-message--primary [slotEnd]{--background: none;--border-color: var(--eui-bc-neutral-5);color:var(--eui-bc-neutral-5)}.euim-alert-message--light{color:var(--eui-bc-neutral-100);background:var(--eui-bc-neutral-5)}.euim-alert-message--light ion-icon,.euim-alert-message--light .euim-label{color:var(--eui-bc-neutral-100)}.euim-alert-message--light [slotEnd]{--background: var(--eui-bc-neutral-5);color:var(--eui-bc-neutral-100)}.euim-alert-message--default{color:var(--eui-c-black);background:none}.euim-alert-message--default ion-icon,.euim-alert-message--default .euim-label{color:var(--eui-c-black)}.euim-alert-message--clear{color:var(--eui-bc-neutral-100);background:none}.euim-alert-message--clear ion-icon,.euim-alert-message--clear .euim-label{color:var(--eui-bc-neutral-100)}.euim-alert-message--hidden{display:none}.euim-alert-message [slotEnd]{font:var(--eui-f-s)}.euim-alert-message ion-badge[slotEnd]{padding-right:var(--eui-s-xs);padding-left:var(--eui-s-xs)}.euim-alert-message ion-badge[slotEnd] ion-icon{padding-left:var(--eui-s-2xs)}\n"], dependencies: [{ kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: EuimLabelComponent, selector: "div[euimLabel], p[euimLabel], span[euimLabel], euim-label", inputs: ["euimLabelTruncateWithLines", "euimLabelTitle", "euimLabelSubTitle", "euimLabelMeta", "euimLabelTruncate", "euimLabelTextWrap"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimAlertMessageComponent, deps: [{ token: BaseStatesDirective }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.10", type: EuimAlertMessageComponent, selector: "euim-alert-message", inputs: { euimLabelTruncate: ["euimLabelTruncate", "euimLabelTruncate", booleanAttribute], hasIcon: ["hasIcon", "hasIcon", booleanAttribute], isCloseable: ["isCloseable", "isCloseable", booleanAttribute] }, outputs: { euimClose: "euimClose" }, host: { properties: { "class": "this.cssClasses" } }, hostDirectives: [{ directive: BaseStatesDirective, inputs: ["color", "color"] }], ngImport: i0, template: "@if (hasIcon && isVisible) {\n  <div class=\"euim-alert-message__wrappericon\">\n    @if (hasIcon) {\n      <ion-icon [name]=\"icon\" class=\"euim-alert-message__icon\"></ion-icon>\n    }\n  </div>\n}\n@if (isVisible) {\n  <div class=\"euim-alert-message__wrapper\">\n    <div class=\"slotStart\">\n      <ng-content select=\"[slotStart]\"></ng-content>\n    </div>\n    <div euimLabel [euimLabelTruncate]=\"euimLabelTruncate\">\n      <ng-content></ng-content>\n    </div>\n    <div class=\"slotEnd\">\n      <ng-content select=\"[slotEnd]\"></ng-content>\n    </div>\n  </div>\n}\n\n@if (isCloseable && isVisible) {\n  <a role=\"button\" aria-label=\"Close Icon Button\" class=\"euim-alert-message__close\"\n    (click)=\"onClose($event)\">\n    <ion-icon name=\"close-sharp\" class=\"euim-alert-message__closeIcon\"></ion-icon>\n  </a>\n}\n", styles: [".euim-alert-message{display:flex;align-items:center;font:var(--eui-f-s-compact);padding:var(--eui-s-xs) var(--eui-s-xs) var(--eui-s-xs) var(--eui-s-m)}.euim-alert-message__wrapper{padding:0;margin:0;min-width:1px;display:flex;align-items:center;position:relative;flex-grow:1}.euim-alert-message__wrapper .euim-label span,.euim-alert-message__wrapper .euim-label p{margin:0}.euim-alert-message .slotEnd{display:flex;align-items:center;margin-inline-start:auto;padding-left:var(--eui-s-xs)}.euim-alert-message .slotEnd ion-icon{width:var(--eui-is-m);height:var(--eui-is-m);display:flex}.euim-alert-message [slotStart]{display:flex;align-items:center;width:var(--eui-is-m);height:var(--eui-is-m);margin-inline-end:var(--eui-s-m)}.euim-alert-message__icon{align-items:center;width:var(--eui-is-m);height:var(--eui-is-m);margin-inline-end:var(--eui-s-m)}.euim-alert-message__closeIcon{align-items:center;width:var(--eui-is-m);height:var(--eui-is-m)}.euim-alert-message__wrappericon{align-items:center;width:var(--eui-is-m);height:var(--eui-is-m);margin-inline-end:var(--eui-s-m)}.euim-alert-message__close{padding:0;margin:0;width:var(--eui-is-m);height:var(--eui-is-m)}.euim-alert-message a{cursor:pointer}.euim-alert-message ion-badge[slotEnd]{display:flex;align-items:center}.euim-alert-message--danger{color:var(--eui-c-danger);background:var(--eui-c-danger-bg)}.euim-alert-message--danger .euim-label{color:var(--eui-c-danger)}.euim-alert-message--danger ion-icon{color:var(--eui-c-danger-darker)}.euim-alert-message--danger ion-badge[slotEnd],.euim-alert-message--danger ion-button[slotEnd],.euim-alert-message--danger ion-chip[slotEnd]{--background: var(--eui-c-danger);color:var(--eui-c-danger-contrast)}.euim-alert-message--danger ion-badge[slotEnd] ion-icon,.euim-alert-message--danger ion-button[slotEnd] ion-icon,.euim-alert-message--danger ion-chip[slotEnd] ion-icon{color:var(--eui-c-white)}.euim-alert-message--danger [slotEnd] ion-icon{color:var(--eui-c-danger-contrast)}.euim-alert-message--info{color:var(--eui-c-info);background:var(--eui-c-info-bg)}.euim-alert-message--info .euim-label{color:var(--eui-c-info)}.euim-alert-message--info ion-icon{color:var(--eui-c-info-darker)}.euim-alert-message--info ion-badge[slotEnd],.euim-alert-message--info ion-button[slotEnd],.euim-alert-message--info ion-chip[slotEnd]{--background: var(--eui-c-info);color:var(--eui-c-info-contrast)}.euim-alert-message--info ion-badge[slotEnd] ion-icon,.euim-alert-message--info ion-button[slotEnd] ion-icon,.euim-alert-message--info ion-chip[slotEnd] ion-icon{color:var(--eui-c-info-contrast)}.euim-alert-message--info [slotEnd] ion-icon{color:var(--eui-c-info-contrast)}.euim-alert-message--success{color:var(--eui-c-success);background:var(--eui-c-success-bg)}.euim-alert-message--success .euim-label{color:var(--eui-c-success)}.euim-alert-message--success ion-icon{color:var(--eui-c-success-darker)}.euim-alert-message--success ion-badge[slotEnd],.euim-alert-message--success ion-button[slotEnd],.euim-alert-message--success ion-chip[slotEnd]{--background: var(--eui-c-success);color:var(--eui-c-white)}.euim-alert-message--success ion-badge[slotEnd] ion-icon,.euim-alert-message--success ion-button[slotEnd] ion-icon,.euim-alert-message--success ion-chip[slotEnd] ion-icon{color:var(--eui-c-white)}.euim-alert-message--success [slotEnd] ion-icon{color:var(--eui-c-success)}.euim-alert-message--warning{color:var(--eui-c-warning-darker);background:var(--eui-c-warning-bg)}.euim-alert-message--warning .euim-label{color:var(--eui-c-warning-darker)}.euim-alert-message--warning ion-icon{color:var(--eui-c-warning-darker)}.euim-alert-message--warning ion-badge[slotEnd],.euim-alert-message--warning ion-button[slotEnd],.euim-alert-message--warning ion-chip[slotEnd]{--background: var(--eui-c-warning);color:var(--eui-c-warning-contrast)}.euim-alert-message--warning ion-badge[slotEnd] ion-icon,.euim-alert-message--warning ion-button[slotEnd] ion-icon,.euim-alert-message--warning ion-chip[slotEnd] ion-icon{color:var(--eui-c-warning-darker-contrast)}.euim-alert-message--warning [slotEnd] ion-icon{color:var(--eui-c-neutral-min)}.euim-alert-message--dark{color:var(--eui-c-neutral-contrast);background:var(--eui-c-neutral)}.euim-alert-message--dark ion-icon,.euim-alert-message--dark .euim-label{color:var(--eui-c-neutral-contrast)}.euim-alert-message--dark [slotEnd]{--background: var(--eui-c-neutral);color:var(--eui-c-neutral-contrast)}.euim-alert-message--primary{color:var(--eui-c-primary);background:var(--eui-c-primary-bg)}.euim-alert-message--primary .euim-label{color:var(--eui-c-primary)}.euim-alert-message--primary ion-icon{color:var(--eui-c-primary-darker)}.euim-alert-message--primary ion-badge[slotEnd],.euim-alert-message--primary ion-button[slotEnd],.euim-alert-message--primary ion-chip[slotEnd]{--background: var(--eui-c-primary);color:var(--eui-c-primary-contrast)}.euim-alert-message--primary ion-badge[slotEnd] ion-icon,.euim-alert-message--primary ion-button[slotEnd] ion-icon,.euim-alert-message--primary ion-chip[slotEnd] ion-icon{color:var(--eui-c-primary-contrast)}.euim-alert-message--primary [slotEnd] ion-icon{color:var(--eui-c-primary-contrast)}.euim-alert-message--branding{color:var(--eui-c-branding-contrast);background:var(--eui-c-branding)}.euim-alert-message--branding ion-icon,.euim-alert-message--branding .euim-label{color:var(--eui-c-branding-contrast)}.euim-alert-message--branding [slotEnd]{--background: none;--border-color: var(--eui-c-neutral-min);color:var(--eui-c-neutral-min)}.euim-alert-message--light{color:var(--eui-c-neutral);background:var(--eui-c-neutral-bg-light)}.euim-alert-message--light ion-icon,.euim-alert-message--light .euim-label{color:var(--eui-c-neutral)}.euim-alert-message--light [slotEnd]{--background: var(--eui-bc-neutral-bg-light);color:var(--eui-c-neutral)}.euim-alert-message--default{color:var(--eui-c-black);background:none}.euim-alert-message--default ion-icon,.euim-alert-message--default .euim-label{color:var(--eui-c-black)}.euim-alert-message--clear{color:var(--eui-c-neutral);background:none}.euim-alert-message--clear ion-icon,.euim-alert-message--clear .euim-label{color:var(--eui-c-neutral)}.euim-alert-message--hidden{display:none}.euim-alert-message [slotEnd]{font:var(--eui-f-s-compact)}.euim-alert-message ion-badge[slotEnd]{padding-right:var(--eui-s-xs);padding-left:var(--eui-s-xs)}.euim-alert-message ion-badge[slotEnd] ion-icon{padding-left:var(--eui-s-2xs)}\n"], dependencies: [{ kind: "component", type: i3.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: EuimLabelComponent, selector: "div[euimLabel], p[euimLabel], span[euimLabel], euim-label", inputs: ["euimLabelTruncateWithLines", "euimLabelTitle", "euimLabelSubTitle", "euimLabelMeta", "euimLabelTruncate", "euimLabelTextWrap"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimAlertMessageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimAlertMessageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'euim-alert-message', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, hostDirectives: [
                         {
@@ -1980,7 +2148,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
                                 'color',
                             ],
                         },
-                    ], template: "@if (hasIcon && isVisible) {\n  <div class=\"euim-alert-message__wrappericon\">\n    @if (hasIcon) {\n      <ion-icon [name]=\"icon\" class=\"euim-alert-message__icon\"></ion-icon>\n    }\n  </div>\n}\n@if (isVisible) {\n  <div class=\"euim-alert-message__wrapper\">\n    <div class=\"slotStart\">\n      <ng-content select=\"[slotStart]\"></ng-content>\n    </div>\n    <div euimLabel [euimLabelTruncate]=\"euimLabelTruncate\">\n      <ng-content></ng-content>\n    </div>\n    <div class=\"slotEnd\">\n      <ng-content select=\"[slotEnd]\"></ng-content>\n    </div>\n  </div>\n}\n\n@if (isCloseable && isVisible) {\n  <a role=\"button\" aria-label=\"Close Icon Button\" class=\"euim-alert-message__close\"\n    (click)=\"onClose($event)\">\n    <ion-icon name=\"close-sharp\" class=\"euim-alert-message__closeIcon\"></ion-icon>\n  </a>\n}\n", styles: [".euim-alert-message{display:flex;align-items:center;font:var(--eui-f-s);padding-left:var(--eui-s-m);padding-right:var(--eui-s-xs);padding-top:var(--eui-s-xs);padding-bottom:var(--eui-s-xs)}.euim-alert-message__wrapper{padding:0;margin:0;min-width:1px;display:flex;align-items:center;position:relative;flex-grow:1}.euim-alert-message .slotEnd{display:flex;align-items:center;margin-inline-start:auto;padding-left:var(--eui-s-xs)}.euim-alert-message .slotEnd ion-icon{width:var(--eui-s-m);height:var(--eui-s-m);display:flex}.euim-alert-message [slotStart]{display:flex;align-items:center;width:var(--eui-s-l);height:var(--eui-s-l);margin-inline-end:var(--eui-s-m)}.euim-alert-message__icon{align-items:center;width:var(--eui-s-l);height:var(--eui-s-l);margin-inline-end:var(--eui-s-m)}.euim-alert-message__closeIcon{align-items:center;width:var(--eui-s-m);height:var(--eui-s-m)}.euim-alert-message__wrappericon{align-items:center;width:var(--eui-s-l);height:var(--eui-s-l);margin-inline-end:var(--eui-s-m)}.euim-alert-message__close{padding:0;margin:0;width:var(--eui-s-m);height:var(--eui-s-m)}.euim-alert-message a{cursor:pointer}.euim-alert-message ion-badge[slotEnd]{display:flex}.euim-alert-message--danger{color:var(--eui-bc-danger-120);background:var(--eui-bc-danger-25)}.euim-alert-message--danger .euim-label{color:var(--eui-bc-danger-120)}.euim-alert-message--danger ion-icon{color:var(--eui-bc-danger-100)}.euim-alert-message--danger ion-badge[slotEnd],.euim-alert-message--danger ion-button[slotEnd],.euim-alert-message--danger ion-chip[slotEnd]{--background: var(--eui-bc-danger-100);color:var(--eui-c-white)}.euim-alert-message--danger ion-badge[slotEnd] ion-icon,.euim-alert-message--danger ion-button[slotEnd] ion-icon,.euim-alert-message--danger ion-chip[slotEnd] ion-icon{color:var(--eui-c-white)}.euim-alert-message--danger [slotEnd] ion-icon{color:var(--eui-bc-danger-100)}.euim-alert-message--info{color:var(--eui-bc-info-120);background:var(--eui-bc-info-25)}.euim-alert-message--info .euim-label{color:var(--eui-bc-info-120)}.euim-alert-message--info ion-icon{color:var(--eui-bc-info-100)}.euim-alert-message--info ion-badge[slotEnd],.euim-alert-message--info ion-button[slotEnd],.euim-alert-message--info ion-chip[slotEnd]{--background: var(--eui-bc-info-100);color:var(--eui-c-white)}.euim-alert-message--info ion-badge[slotEnd] ion-icon,.euim-alert-message--info ion-button[slotEnd] ion-icon,.euim-alert-message--info ion-chip[slotEnd] ion-icon{color:var(--eui-c-white)}.euim-alert-message--info [slotEnd] ion-icon{color:var(--eui-bc-info-100)}.euim-alert-message--success{color:var(--eui-bc-success-120);background:var(--eui-bc-success-25)}.euim-alert-message--success .euim-label{color:var(--eui-bc-success-120)}.euim-alert-message--success ion-icon{color:var(--eui-bc-success-100)}.euim-alert-message--success ion-badge[slotEnd],.euim-alert-message--success ion-button[slotEnd],.euim-alert-message--success ion-chip[slotEnd]{--background: var(--eui-bc-success-100);color:var(--eui-c-white)}.euim-alert-message--success ion-badge[slotEnd] ion-icon,.euim-alert-message--success ion-button[slotEnd] ion-icon,.euim-alert-message--success ion-chip[slotEnd] ion-icon{color:var(--eui-c-white)}.euim-alert-message--success [slotEnd] ion-icon{color:var(--eui-bc-success-100)}.euim-alert-message--warning{color:var(--eui-bc-warning-140);background:var(--eui-bc-warning-25)}.euim-alert-message--warning .euim-label{color:var(--eui-bc-warning-140)}.euim-alert-message--warning ion-icon{color:var(--eui-bc-warning-120)}.euim-alert-message--warning ion-badge[slotEnd],.euim-alert-message--warning ion-button[slotEnd],.euim-alert-message--warning ion-chip[slotEnd]{--background: var(--eui-bc-warning-120);color:var(--eui-c-white)}.euim-alert-message--warning ion-badge[slotEnd] ion-icon,.euim-alert-message--warning ion-button[slotEnd] ion-icon,.euim-alert-message--warning ion-chip[slotEnd] ion-icon{color:var(--eui-c-white)}.euim-alert-message--warning [slotEnd] ion-icon{color:var(--eui-bc-warning-120)}.euim-alert-message--dark{color:var(--eui-c-white);background:var(--eui-bc-neutral-100)}.euim-alert-message--dark ion-icon,.euim-alert-message--dark .euim-label{color:var(--eui-c-white)}.euim-alert-message--dark [slotEnd]{--background: var(--eui-bc-neutral-100);color:var(--eui-c-white)}.euim-alert-message--primary{color:var(--eui-c-white);background:var(--eui-bc-primary-100)}.euim-alert-message--primary ion-icon,.euim-alert-message--primary .euim-label{color:var(--eui-c-white)}.euim-alert-message--primary [slotEnd]{--background: none;--border-color: var(--eui-bc-neutral-5);color:var(--eui-bc-neutral-5)}.euim-alert-message--light{color:var(--eui-bc-neutral-100);background:var(--eui-bc-neutral-5)}.euim-alert-message--light ion-icon,.euim-alert-message--light .euim-label{color:var(--eui-bc-neutral-100)}.euim-alert-message--light [slotEnd]{--background: var(--eui-bc-neutral-5);color:var(--eui-bc-neutral-100)}.euim-alert-message--default{color:var(--eui-c-black);background:none}.euim-alert-message--default ion-icon,.euim-alert-message--default .euim-label{color:var(--eui-c-black)}.euim-alert-message--clear{color:var(--eui-bc-neutral-100);background:none}.euim-alert-message--clear ion-icon,.euim-alert-message--clear .euim-label{color:var(--eui-bc-neutral-100)}.euim-alert-message--hidden{display:none}.euim-alert-message [slotEnd]{font:var(--eui-f-s)}.euim-alert-message ion-badge[slotEnd]{padding-right:var(--eui-s-xs);padding-left:var(--eui-s-xs)}.euim-alert-message ion-badge[slotEnd] ion-icon{padding-left:var(--eui-s-2xs)}\n"] }]
+                    ], template: "@if (hasIcon && isVisible) {\n  <div class=\"euim-alert-message__wrappericon\">\n    @if (hasIcon) {\n      <ion-icon [name]=\"icon\" class=\"euim-alert-message__icon\"></ion-icon>\n    }\n  </div>\n}\n@if (isVisible) {\n  <div class=\"euim-alert-message__wrapper\">\n    <div class=\"slotStart\">\n      <ng-content select=\"[slotStart]\"></ng-content>\n    </div>\n    <div euimLabel [euimLabelTruncate]=\"euimLabelTruncate\">\n      <ng-content></ng-content>\n    </div>\n    <div class=\"slotEnd\">\n      <ng-content select=\"[slotEnd]\"></ng-content>\n    </div>\n  </div>\n}\n\n@if (isCloseable && isVisible) {\n  <a role=\"button\" aria-label=\"Close Icon Button\" class=\"euim-alert-message__close\"\n    (click)=\"onClose($event)\">\n    <ion-icon name=\"close-sharp\" class=\"euim-alert-message__closeIcon\"></ion-icon>\n  </a>\n}\n", styles: [".euim-alert-message{display:flex;align-items:center;font:var(--eui-f-s-compact);padding:var(--eui-s-xs) var(--eui-s-xs) var(--eui-s-xs) var(--eui-s-m)}.euim-alert-message__wrapper{padding:0;margin:0;min-width:1px;display:flex;align-items:center;position:relative;flex-grow:1}.euim-alert-message__wrapper .euim-label span,.euim-alert-message__wrapper .euim-label p{margin:0}.euim-alert-message .slotEnd{display:flex;align-items:center;margin-inline-start:auto;padding-left:var(--eui-s-xs)}.euim-alert-message .slotEnd ion-icon{width:var(--eui-is-m);height:var(--eui-is-m);display:flex}.euim-alert-message [slotStart]{display:flex;align-items:center;width:var(--eui-is-m);height:var(--eui-is-m);margin-inline-end:var(--eui-s-m)}.euim-alert-message__icon{align-items:center;width:var(--eui-is-m);height:var(--eui-is-m);margin-inline-end:var(--eui-s-m)}.euim-alert-message__closeIcon{align-items:center;width:var(--eui-is-m);height:var(--eui-is-m)}.euim-alert-message__wrappericon{align-items:center;width:var(--eui-is-m);height:var(--eui-is-m);margin-inline-end:var(--eui-s-m)}.euim-alert-message__close{padding:0;margin:0;width:var(--eui-is-m);height:var(--eui-is-m)}.euim-alert-message a{cursor:pointer}.euim-alert-message ion-badge[slotEnd]{display:flex;align-items:center}.euim-alert-message--danger{color:var(--eui-c-danger);background:var(--eui-c-danger-bg)}.euim-alert-message--danger .euim-label{color:var(--eui-c-danger)}.euim-alert-message--danger ion-icon{color:var(--eui-c-danger-darker)}.euim-alert-message--danger ion-badge[slotEnd],.euim-alert-message--danger ion-button[slotEnd],.euim-alert-message--danger ion-chip[slotEnd]{--background: var(--eui-c-danger);color:var(--eui-c-danger-contrast)}.euim-alert-message--danger ion-badge[slotEnd] ion-icon,.euim-alert-message--danger ion-button[slotEnd] ion-icon,.euim-alert-message--danger ion-chip[slotEnd] ion-icon{color:var(--eui-c-white)}.euim-alert-message--danger [slotEnd] ion-icon{color:var(--eui-c-danger-contrast)}.euim-alert-message--info{color:var(--eui-c-info);background:var(--eui-c-info-bg)}.euim-alert-message--info .euim-label{color:var(--eui-c-info)}.euim-alert-message--info ion-icon{color:var(--eui-c-info-darker)}.euim-alert-message--info ion-badge[slotEnd],.euim-alert-message--info ion-button[slotEnd],.euim-alert-message--info ion-chip[slotEnd]{--background: var(--eui-c-info);color:var(--eui-c-info-contrast)}.euim-alert-message--info ion-badge[slotEnd] ion-icon,.euim-alert-message--info ion-button[slotEnd] ion-icon,.euim-alert-message--info ion-chip[slotEnd] ion-icon{color:var(--eui-c-info-contrast)}.euim-alert-message--info [slotEnd] ion-icon{color:var(--eui-c-info-contrast)}.euim-alert-message--success{color:var(--eui-c-success);background:var(--eui-c-success-bg)}.euim-alert-message--success .euim-label{color:var(--eui-c-success)}.euim-alert-message--success ion-icon{color:var(--eui-c-success-darker)}.euim-alert-message--success ion-badge[slotEnd],.euim-alert-message--success ion-button[slotEnd],.euim-alert-message--success ion-chip[slotEnd]{--background: var(--eui-c-success);color:var(--eui-c-white)}.euim-alert-message--success ion-badge[slotEnd] ion-icon,.euim-alert-message--success ion-button[slotEnd] ion-icon,.euim-alert-message--success ion-chip[slotEnd] ion-icon{color:var(--eui-c-white)}.euim-alert-message--success [slotEnd] ion-icon{color:var(--eui-c-success)}.euim-alert-message--warning{color:var(--eui-c-warning-darker);background:var(--eui-c-warning-bg)}.euim-alert-message--warning .euim-label{color:var(--eui-c-warning-darker)}.euim-alert-message--warning ion-icon{color:var(--eui-c-warning-darker)}.euim-alert-message--warning ion-badge[slotEnd],.euim-alert-message--warning ion-button[slotEnd],.euim-alert-message--warning ion-chip[slotEnd]{--background: var(--eui-c-warning);color:var(--eui-c-warning-contrast)}.euim-alert-message--warning ion-badge[slotEnd] ion-icon,.euim-alert-message--warning ion-button[slotEnd] ion-icon,.euim-alert-message--warning ion-chip[slotEnd] ion-icon{color:var(--eui-c-warning-darker-contrast)}.euim-alert-message--warning [slotEnd] ion-icon{color:var(--eui-c-neutral-min)}.euim-alert-message--dark{color:var(--eui-c-neutral-contrast);background:var(--eui-c-neutral)}.euim-alert-message--dark ion-icon,.euim-alert-message--dark .euim-label{color:var(--eui-c-neutral-contrast)}.euim-alert-message--dark [slotEnd]{--background: var(--eui-c-neutral);color:var(--eui-c-neutral-contrast)}.euim-alert-message--primary{color:var(--eui-c-primary);background:var(--eui-c-primary-bg)}.euim-alert-message--primary .euim-label{color:var(--eui-c-primary)}.euim-alert-message--primary ion-icon{color:var(--eui-c-primary-darker)}.euim-alert-message--primary ion-badge[slotEnd],.euim-alert-message--primary ion-button[slotEnd],.euim-alert-message--primary ion-chip[slotEnd]{--background: var(--eui-c-primary);color:var(--eui-c-primary-contrast)}.euim-alert-message--primary ion-badge[slotEnd] ion-icon,.euim-alert-message--primary ion-button[slotEnd] ion-icon,.euim-alert-message--primary ion-chip[slotEnd] ion-icon{color:var(--eui-c-primary-contrast)}.euim-alert-message--primary [slotEnd] ion-icon{color:var(--eui-c-primary-contrast)}.euim-alert-message--branding{color:var(--eui-c-branding-contrast);background:var(--eui-c-branding)}.euim-alert-message--branding ion-icon,.euim-alert-message--branding .euim-label{color:var(--eui-c-branding-contrast)}.euim-alert-message--branding [slotEnd]{--background: none;--border-color: var(--eui-c-neutral-min);color:var(--eui-c-neutral-min)}.euim-alert-message--light{color:var(--eui-c-neutral);background:var(--eui-c-neutral-bg-light)}.euim-alert-message--light ion-icon,.euim-alert-message--light .euim-label{color:var(--eui-c-neutral)}.euim-alert-message--light [slotEnd]{--background: var(--eui-bc-neutral-bg-light);color:var(--eui-c-neutral)}.euim-alert-message--default{color:var(--eui-c-black);background:none}.euim-alert-message--default ion-icon,.euim-alert-message--default .euim-label{color:var(--eui-c-black)}.euim-alert-message--clear{color:var(--eui-c-neutral);background:none}.euim-alert-message--clear ion-icon,.euim-alert-message--clear .euim-label{color:var(--eui-c-neutral)}.euim-alert-message--hidden{display:none}.euim-alert-message [slotEnd]{font:var(--eui-f-s-compact)}.euim-alert-message ion-badge[slotEnd]{padding-right:var(--eui-s-xs);padding-left:var(--eui-s-xs)}.euim-alert-message ion-badge[slotEnd] ion-icon{padding-left:var(--eui-s-2xs)}\n"] }]
         }], ctorParameters: () => [{ type: BaseStatesDirective }], propDecorators: { euimClose: [{
                 type: Output
             }], euimLabelTruncate: [{
@@ -2001,15 +2169,15 @@ const COMPONENTS$6 = [
     EuimAlertMessageComponent,
 ];
 class EuimAlertMessageModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimAlertMessageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.5", ngImport: i0, type: EuimAlertMessageModule, declarations: [EuimAlertMessageComponent], imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimAlertMessageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.10", ngImport: i0, type: EuimAlertMessageModule, declarations: [EuimAlertMessageComponent], imports: [CommonModule,
             IonicModule,
             EuimLabelModule], exports: [EuimAlertMessageComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimAlertMessageModule, imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimAlertMessageModule, imports: [CommonModule,
             IonicModule,
             EuimLabelModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimAlertMessageModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimAlertMessageModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -2046,8 +2214,12 @@ class EuimSliderInfoScreenComponent {
             lastStepActionBtnName: '',
             leftBtnName: '',
         };
+        this.actionBtnIconsNames = {
+            rightBtnIconName: '',
+            lastStepActionBtnIconName: '',
+            leftBtnIconName: '',
+        };
         this.showLeftBtnAsPrevious = false;
-        this.className = 'euim-slider-info-screen';
         this.slidesArray = [];
         this.currentSlide = 0;
         this.startX = 0;
@@ -2055,6 +2227,9 @@ class EuimSliderInfoScreenComponent {
     onResize(event) {
         this.setSliderStyles();
     }
+    get cssClasses() {
+        return this.getCssClasses();
+    }
     ngAfterViewInit() {
         this.setSliderStyles();
     }
@@ -2080,7 +2255,9 @@ class EuimSliderInfoScreenComponent {
         this.renderer.setStyle(this.slides.nativeElement, 'width', `${this.slidesArray.length * 100}%`);
         for (const slide of this.slidesArray) {
             this.renderer.setStyle(slide, 'width', `${100 / this.slidesArray.length}%`);
-            this.renderer.setStyle(slide, 'maxHeight', `${slideHeight}px`);
+            if (!this.isImageOnly()) {
+                this.renderer.setStyle(slide, 'maxHeight', `${slideHeight}px`);
+            }
             this.renderer.setStyle(slide, 'overflow', 'auto');
         }
         // to calculate the case when there is only one slide
@@ -2154,13 +2331,29 @@ class EuimSliderInfoScreenComponent {
         }
         this.leftActionClicked.emit(event);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimSliderInfoScreenComponent, deps: [{ token: i0.Renderer2 }, { token: i1.GestureController }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", type: EuimSliderInfoScreenComponent, selector: "euim-slider-info-screen", inputs: { isCarousel: ["isCarousel", "isCarousel", booleanAttribute], showLeftBtn: ["showLeftBtn", "showLeftBtn", booleanAttribute], showRightBtn: ["showRightBtn", "showRightBtn", booleanAttribute], isPreviousBtn: ["isPreviousBtn", "isPreviousBtn", booleanAttribute], isNextBtn: ["isNextBtn", "isNextBtn", booleanAttribute], actionBtnNames: "actionBtnNames" }, outputs: { rightActionClicked: "rightActionClicked", lastStepActionClicked: "lastStepActionClicked", leftActionClicked: "leftActionClicked" }, host: { listeners: { "window:resize": "onResize($event)" }, properties: { "class": "this.className" } }, viewQueries: [{ propertyName: "slides", first: true, predicate: ["slides"], descendants: true, static: true }], ngImport: i0, template: "<div #sliderElement class=\"euim-slider-info-screen__slider-container\">\n    <div #slides class=\"euim-slider-info-screen__slides\">\n        <ng-content></ng-content>\n    </div>\n    @if (showLeftBtn || showRightBtn || isCarousel || isLastItemReached){\n        <div class=\"euim-slider-info-screen__pagination-container\">\n            @if (showLeftBtn && !showLeftBtnAsPrevious && !isPreviousBtn) {\n                <ion-button (click)=\"onLeftBtnAction($event)\" class=\"euim-slider-info-screen__action-button euim-slider-info-screen__action-button--left\"\n                            fill=\"clear\">{{actionBtnNames.leftBtnName}}</ion-button>\n            }\n            @if (showLeftBtnAsPrevious) {\n                <ion-button (click)=\"onLeftBtnAction($event)\"  class=\"euim-slider-info-screen__action-button euim-slider-info-screen__action-button--left\"\n                            fill=\"clear\">{{actionBtnNames.leftBtnName || 'euim.slider-info-screen.LEFT-BTN-NAME' | translate}}</ion-button>\n            }\n            @if (isCarousel){\n                <div class=\"euim-slider-info-screen__pagination\">\n                <span (click)=\"goToSlide(i)\" *ngFor=\"let slide of slidesArray; let i = index\"\n                      [ngClass]=\"{ 'active': currentSlide === i }\"\n                      class=\"euim-slider-info-screen__span\"></span>\n                </div>\n            }\n            @if (!isLastItemReached && !isNextBtn || isNextBtn && showRightBtn) {\n                <ion-button (click)=\"onRightBtnAction($event)\" class=\"euim-slider-info-screen__action-button euim-slider-info-screen__action-button--right\"\n                            fill=\"clear\">{{actionBtnNames.rightBtnName || 'euim.slider-info-screen.RIGHT-BTN-NAME' | translate}}</ion-button>\n            }\n\n            @if (isLastItemReached) {\n                <ion-button (click)=\"onLastStepAction($event)\" class=\"euim-slider-info-screen__action-button euim-slider-info-screen__action-button--right\"\n                            fill=\"clear\">{{actionBtnNames.lastStepActionBtnName || 'euim.slider-info-screen.LAST-STEP-ACTION-BTN-NAME' | translate}}</ion-button>\n            }\n        </div>\n    }\n\n</div>\n", styles: [".euim-slider-info-screen__slider-container{overflow:hidden;position:relative;height:100vh}.euim-slider-info-screen__slides{display:flex;transition:all .5s ease;height:100%;width:100%}.euim-slider-info-screen__slide{width:100%;height:100%}.euim-slider-info-screen__pagination-container{position:fixed;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:center;height:60px}.euim-slider-info-screen__pagination{display:flex}.euim-slider-info-screen__span{width:calc(var(--eui-s-xs) + var(--eui-s-2xs) / 2);height:calc(var(--eui-s-xs) + var(--eui-s-2xs) / 2);border-radius:50%;cursor:pointer;border:1px solid var(--eui-bc-primary-100)}.euim-slider-info-screen__span:not(:last-child){margin-right:var(--eui-s-xs)}.euim-slider-info-screen__span.active{background-color:var(--eui-bc-primary-100)}.euim-slider-info-screen__action-button{position:absolute;color:var(--eui-bc-primary-100);font-weight:700;top:50%;transform:translateY(-50%)}.euim-slider-info-screen__action-button::part(native){padding:0 var(--eui-s-m)}.euim-slider-info-screen__action-button--right{right:0;margin:0 var(--eui-s-xs) 0 var(--eui-s-m)}.euim-slider-info-screen__action-button--left{margin:0 var(--eui-s-m) 0 var(--eui-s-xs);left:0}.euim-slider-info-screen__title{font:var(--eui-f-3xl-bold);color:var(--eui-bc-neutral-100);margin-top:var(--eui-s-l);padding-left:var(--eui-s-l);padding-right:var(--eui-s-l)}.euim-slider-info-screen__sub-title{color:var(--eui-bc-neutral-80);padding-left:var(--eui-s-l);padding-right:var(--eui-s-l);font:var(--eui-f-l)}.euim-slider-info-screen__content{color:var(--eui-bc-neutral-100);padding-left:var(--eui-s-l);padding-right:var(--eui-s-l);font:var(--eui-f-l)}.euim-slider-info-screen__content--centered{text-align:center}.euim-slider-info-screen__title+.euim-slider-info-screen__sub-title{margin-top:var(--eui-s-2xs)}.euim-slider-info-screen__sub-title+.euim-slider-info-screen__content,title+.euim-slider-info-screen__content{margin-top:var(--eui-s-m)}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    isImageOnly() {
+        return (this.slidesArray.length > 0 &&
+            !document.querySelector('.euim-slider-info-screen__title') &&
+            !document.querySelector('.euim-slider-info-screen__sub-title') &&
+            !document.querySelector('.euim-slider-info-screen__content'));
+    }
+    getCssClasses() {
+        const paginationClass = !this.paginationColor
+            ? 'pagination-color-primary'
+            : `pagination-color-${this.paginationColor}`;
+        return [
+            'euim-slider-info-screen',
+            this.isImageOnly() ? 'image-only' : '',
+            paginationClass,
+        ].join(' ').trim();
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimSliderInfoScreenComponent, deps: [{ token: i0.Renderer2 }, { token: i3.GestureController }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.10", type: EuimSliderInfoScreenComponent, selector: "euim-slider-info-screen", inputs: { isCarousel: ["isCarousel", "isCarousel", booleanAttribute], showLeftBtn: ["showLeftBtn", "showLeftBtn", booleanAttribute], showRightBtn: ["showRightBtn", "showRightBtn", booleanAttribute], isPreviousBtn: ["isPreviousBtn", "isPreviousBtn", booleanAttribute], isNextBtn: ["isNextBtn", "isNextBtn", booleanAttribute], paginationColor: "paginationColor", actionBtnNames: "actionBtnNames", actionBtnIconsNames: "actionBtnIconsNames" }, outputs: { rightActionClicked: "rightActionClicked", lastStepActionClicked: "lastStepActionClicked", leftActionClicked: "leftActionClicked" }, host: { listeners: { "window:resize": "onResize($event)" }, properties: { "class": "this.cssClasses" } }, viewQueries: [{ propertyName: "slides", first: true, predicate: ["slides"], descendants: true, static: true }], ngImport: i0, template: "<div #sliderElement class=\"euim-slider-info-screen__slider-container\" >\n    <div #slides class=\"euim-slider-info-screen__slides\">\n        <ng-content></ng-content>\n    </div>\n\n    @if (!isImageOnly()) {\n    <div class=\"euim-slider-info-screen__pagination-container\">\n        @if (showLeftBtn || showRightBtn || isCarousel || isLastItemReached){\n        <div class=\"euim-slider-info-screen__pagination-container\">\n            @if (showLeftBtn && !showLeftBtnAsPrevious && !isPreviousBtn) {\n            <ion-button (click)=\"onLeftBtnAction($event)\"\n                class=\"euim-slider-info-screen__action-button euim-slider-info-screen__action-button--left\"\n                fill=\"clear\">\n                @if (actionBtnIconsNames.leftBtnIconName !== '') {\n                    <ion-icon slot=\"start\" [name]=\"actionBtnIconsNames.leftBtnIconName\"></ion-icon>\n                }\n                {{actionBtnNames.leftBtnName}}\n            </ion-button>\n            }\n            @if (showLeftBtnAsPrevious) {\n            <ion-button (click)=\"onLeftBtnAction($event)\"\n                class=\"euim-slider-info-screen__action-button euim-slider-info-screen__action-button--left\"\n                fill=\"clear\">\n                @if (actionBtnIconsNames.leftBtnIconName !== '') {\n                    <ion-icon slot=\"start\" [name]=\"actionBtnIconsNames.leftBtnIconName\"></ion-icon>\n                }\n                {{actionBtnNames.leftBtnName || 'euim.slider-info-screen.LEFT-BTN-NAME' | translate}}</ion-button>\n            }\n            @if (isCarousel){\n            <div class=\"euim-slider-info-screen__pagination\">\n                <span (click)=\"goToSlide(i)\" *ngFor=\"let slide of slidesArray; let i = index\"\n                    [ngClass]=\"{ 'active': currentSlide === i }\" class=\"euim-slider-info-screen__span\"></span>\n            </div>\n            }\n            @if (!isLastItemReached && !isNextBtn || isNextBtn && showRightBtn) {\n            <ion-button (click)=\"onRightBtnAction($event)\"\n                class=\"euim-slider-info-screen__action-button euim-slider-info-screen__action-button--right\"\n                fill=\"clear\">\n                {{actionBtnNames.rightBtnName || 'euim.slider-info-screen.RIGHT-BTN-NAME' | translate}}\n\n                @if (actionBtnIconsNames.rightBtnIconName !== '') {\n                    <ion-icon slot=\"end\" [name]=\"actionBtnIconsNames.rightBtnIconName\"></ion-icon>\n                }\n            </ion-button>\n            }\n\n            @if (isLastItemReached) {\n            <ion-button (click)=\"onLastStepAction($event)\"\n                class=\"euim-slider-info-screen__action-button euim-slider-info-screen__action-button--right\"\n                fill=\"clear\">\n                {{actionBtnNames.lastStepActionBtnName || 'euim.slider-info-screen.LAST-STEP-ACTION-BTN-NAME' | translate}}\n\n                @if (actionBtnIconsNames.lastStepActionBtnIconName !== '') {\n                    <ion-icon slot=\"end\" [name]=\"actionBtnIconsNames.lastStepActionBtnIconName\"></ion-icon>\n                }\n            </ion-button>\n            }\n        </div>\n        }\n    </div>\n    }\n\n    @if (isImageOnly()) {\n    <div class=\"euim-slider-info-screen__pagination-container--over-image\">\n        <div class=\"euim-slider-info-screen__pagination\">\n            <span (click)=\"goToSlide(i)\" *ngFor=\"let slide of slidesArray; let i = index\"\n                [ngClass]=\"{ 'active': currentSlide === i }\"\n                class=\"euim-slider-info-screen__span\" ></span>\n        </div>\n    </div>\n    }\n\n</div>\n", styles: [".euim-slider-info-screen__slider-container{overflow:hidden;position:relative;height:100vh}.euim-slider-info-screen__slides{display:flex;transition:all .5s ease;height:100%;width:100%}.euim-slider-info-screen__slide{width:100%;height:100%}.euim-slider-info-screen__pagination-container--over-image{position:absolute;bottom:20px;left:50%;transform:translate(-50%);display:flex;align-items:center;justify-content:center;z-index:1}.euim-slider-info-screen__pagination-container{position:fixed;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:center;height:60px}.euim-slider-info-screen__pagination{display:flex}.euim-slider-info-screen__span{width:calc(var(--eui-s-xs) + var(--eui-s-2xs) / 2);height:calc(var(--eui-s-xs) + var(--eui-s-2xs) / 2);border-radius:50%;cursor:pointer;border:1px solid var(--eui-c-primary)}.euim-slider-info-screen__span:not(:last-child){margin-right:var(--eui-s-xs)}.euim-slider-info-screen.pagination-color-primary .euim-slider-info-screen__span{border:1px solid var(--eui-c-primary)!important;background-color:transparent}.euim-slider-info-screen.pagination-color-primary .euim-slider-info-screen__span.active{background-color:var(--eui-c-primary)!important}.euim-slider-info-screen.pagination-color-white .euim-slider-info-screen__span{border:1px solid var(--eui-c-white)!important;background-color:transparent}.euim-slider-info-screen.pagination-color-white .euim-slider-info-screen__span.active{background-color:var(--eui-c-white)!important}.euim-slider-info-screen.pagination-color-success .euim-slider-info-screen__span{border:1px solid var(--eui-c-success)!important;background-color:transparent}.euim-slider-info-screen.pagination-color-success .euim-slider-info-screen__span.active{background-color:var(--eui-c-success)!important}.euim-slider-info-screen.pagination-color-warning .euim-slider-info-screen__span{border:1px solid var(--eui-c-warning)!important;background-color:transparent}.euim-slider-info-screen.pagination-color-warning .euim-slider-info-screen__span.active{background-color:var(--eui-c-warning)!important}.euim-slider-info-screen.pagination-color-info .euim-slider-info-screen__span{border:1px solid var(--eui-c-info)!important;background-color:transparent}.euim-slider-info-screen.pagination-color-info .euim-slider-info-screen__span.active{background-color:var(--eui-c-info)!important}.euim-slider-info-screen.pagination-color-dark .euim-slider-info-screen__span{border:1px solid var(--eui-c-neutral)!important;background-color:transparent}.euim-slider-info-screen.pagination-color-dark .euim-slider-info-screen__span.active{background-color:var(--eui-c-neutral)!important}.euim-slider-info-screen.pagination-color-danger .euim-slider-info-screen__span{border:1px solid var(--eui-c-danger)!important;background-color:transparent}.euim-slider-info-screen.pagination-color-danger .euim-slider-info-screen__span.active{background-color:var(--eui-c-danger)!important}.euim-slider-info-screen__action-button{position:absolute;color:var(--eui-c-primary);font-weight:700;top:50%;transform:translateY(-50%)}.euim-slider-info-screen__action-button::part(native){padding:0 var(--eui-s-m)}.euim-slider-info-screen__action-button--right{right:0;margin:0 var(--eui-s-xs) 0 var(--eui-s-m)}.euim-slider-info-screen__action-button--left{margin:0 var(--eui-s-m) 0 var(--eui-s-xs);left:0}.euim-slider-info-screen__action-button ion-icon{color:var(--eui-c-primary)}.euim-slider-info-screen__title{font:var(--eui-f-2xl-bold-compact);color:var(--eui-c-neutral);margin-top:var(--eui-s-l);padding-left:var(--eui-s-l);padding-right:var(--eui-s-l)}.euim-slider-info-screen__sub-title{color:var(--eui-c-neutral-light);padding-left:var(--eui-s-l);padding-right:var(--eui-s-l);font:var(--eui-f-l-compact)}.euim-slider-info-screen__content{color:var(--eui-c-neutral);padding-left:var(--eui-s-l);padding-right:var(--eui-s-l);font:var(--eui-f-l-compact)}.euim-slider-info-screen__content--centered{text-align:center}.euim-slider-info-screen__title+.euim-slider-info-screen__sub-title{margin-top:var(--eui-s-2xs)}.euim-slider-info-screen__sub-title+.euim-slider-info-screen__content,title+.euim-slider-info-screen__content{margin-top:var(--eui-s-m)}.euim-slider-info-screen.image-only .euim-slider-info-screen__slider-container{height:auto}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i3.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i3.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimSliderInfoScreenComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimSliderInfoScreenComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'euim-slider-info-screen', encapsulation: ViewEncapsulation.None, template: "<div #sliderElement class=\"euim-slider-info-screen__slider-container\">\n    <div #slides class=\"euim-slider-info-screen__slides\">\n        <ng-content></ng-content>\n    </div>\n    @if (showLeftBtn || showRightBtn || isCarousel || isLastItemReached){\n        <div class=\"euim-slider-info-screen__pagination-container\">\n            @if (showLeftBtn && !showLeftBtnAsPrevious && !isPreviousBtn) {\n                <ion-button (click)=\"onLeftBtnAction($event)\" class=\"euim-slider-info-screen__action-button euim-slider-info-screen__action-button--left\"\n                            fill=\"clear\">{{actionBtnNames.leftBtnName}}</ion-button>\n            }\n            @if (showLeftBtnAsPrevious) {\n                <ion-button (click)=\"onLeftBtnAction($event)\"  class=\"euim-slider-info-screen__action-button euim-slider-info-screen__action-button--left\"\n                            fill=\"clear\">{{actionBtnNames.leftBtnName || 'euim.slider-info-screen.LEFT-BTN-NAME' | translate}}</ion-button>\n            }\n            @if (isCarousel){\n                <div class=\"euim-slider-info-screen__pagination\">\n                <span (click)=\"goToSlide(i)\" *ngFor=\"let slide of slidesArray; let i = index\"\n                      [ngClass]=\"{ 'active': currentSlide === i }\"\n                      class=\"euim-slider-info-screen__span\"></span>\n                </div>\n            }\n            @if (!isLastItemReached && !isNextBtn || isNextBtn && showRightBtn) {\n                <ion-button (click)=\"onRightBtnAction($event)\" class=\"euim-slider-info-screen__action-button euim-slider-info-screen__action-button--right\"\n                            fill=\"clear\">{{actionBtnNames.rightBtnName || 'euim.slider-info-screen.RIGHT-BTN-NAME' | translate}}</ion-button>\n            }\n\n            @if (isLastItemReached) {\n                <ion-button (click)=\"onLastStepAction($event)\" class=\"euim-slider-info-screen__action-button euim-slider-info-screen__action-button--right\"\n                            fill=\"clear\">{{actionBtnNames.lastStepActionBtnName || 'euim.slider-info-screen.LAST-STEP-ACTION-BTN-NAME' | translate}}</ion-button>\n            }\n        </div>\n    }\n\n</div>\n", styles: [".euim-slider-info-screen__slider-container{overflow:hidden;position:relative;height:100vh}.euim-slider-info-screen__slides{display:flex;transition:all .5s ease;height:100%;width:100%}.euim-slider-info-screen__slide{width:100%;height:100%}.euim-slider-info-screen__pagination-container{position:fixed;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:center;height:60px}.euim-slider-info-screen__pagination{display:flex}.euim-slider-info-screen__span{width:calc(var(--eui-s-xs) + var(--eui-s-2xs) / 2);height:calc(var(--eui-s-xs) + var(--eui-s-2xs) / 2);border-radius:50%;cursor:pointer;border:1px solid var(--eui-bc-primary-100)}.euim-slider-info-screen__span:not(:last-child){margin-right:var(--eui-s-xs)}.euim-slider-info-screen__span.active{background-color:var(--eui-bc-primary-100)}.euim-slider-info-screen__action-button{position:absolute;color:var(--eui-bc-primary-100);font-weight:700;top:50%;transform:translateY(-50%)}.euim-slider-info-screen__action-button::part(native){padding:0 var(--eui-s-m)}.euim-slider-info-screen__action-button--right{right:0;margin:0 var(--eui-s-xs) 0 var(--eui-s-m)}.euim-slider-info-screen__action-button--left{margin:0 var(--eui-s-m) 0 var(--eui-s-xs);left:0}.euim-slider-info-screen__title{font:var(--eui-f-3xl-bold);color:var(--eui-bc-neutral-100);margin-top:var(--eui-s-l);padding-left:var(--eui-s-l);padding-right:var(--eui-s-l)}.euim-slider-info-screen__sub-title{color:var(--eui-bc-neutral-80);padding-left:var(--eui-s-l);padding-right:var(--eui-s-l);font:var(--eui-f-l)}.euim-slider-info-screen__content{color:var(--eui-bc-neutral-100);padding-left:var(--eui-s-l);padding-right:var(--eui-s-l);font:var(--eui-f-l)}.euim-slider-info-screen__content--centered{text-align:center}.euim-slider-info-screen__title+.euim-slider-info-screen__sub-title{margin-top:var(--eui-s-2xs)}.euim-slider-info-screen__sub-title+.euim-slider-info-screen__content,title+.euim-slider-info-screen__content{margin-top:var(--eui-s-m)}\n"] }]
-        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i1.GestureController }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { slides: [{
+            args: [{ selector: 'euim-slider-info-screen', encapsulation: ViewEncapsulation.None, template: "<div #sliderElement class=\"euim-slider-info-screen__slider-container\" >\n    <div #slides class=\"euim-slider-info-screen__slides\">\n        <ng-content></ng-content>\n    </div>\n\n    @if (!isImageOnly()) {\n    <div class=\"euim-slider-info-screen__pagination-container\">\n        @if (showLeftBtn || showRightBtn || isCarousel || isLastItemReached){\n        <div class=\"euim-slider-info-screen__pagination-container\">\n            @if (showLeftBtn && !showLeftBtnAsPrevious && !isPreviousBtn) {\n            <ion-button (click)=\"onLeftBtnAction($event)\"\n                class=\"euim-slider-info-screen__action-button euim-slider-info-screen__action-button--left\"\n                fill=\"clear\">\n                @if (actionBtnIconsNames.leftBtnIconName !== '') {\n                    <ion-icon slot=\"start\" [name]=\"actionBtnIconsNames.leftBtnIconName\"></ion-icon>\n                }\n                {{actionBtnNames.leftBtnName}}\n            </ion-button>\n            }\n            @if (showLeftBtnAsPrevious) {\n            <ion-button (click)=\"onLeftBtnAction($event)\"\n                class=\"euim-slider-info-screen__action-button euim-slider-info-screen__action-button--left\"\n                fill=\"clear\">\n                @if (actionBtnIconsNames.leftBtnIconName !== '') {\n                    <ion-icon slot=\"start\" [name]=\"actionBtnIconsNames.leftBtnIconName\"></ion-icon>\n                }\n                {{actionBtnNames.leftBtnName || 'euim.slider-info-screen.LEFT-BTN-NAME' | translate}}</ion-button>\n            }\n            @if (isCarousel){\n            <div class=\"euim-slider-info-screen__pagination\">\n                <span (click)=\"goToSlide(i)\" *ngFor=\"let slide of slidesArray; let i = index\"\n                    [ngClass]=\"{ 'active': currentSlide === i }\" class=\"euim-slider-info-screen__span\"></span>\n            </div>\n            }\n            @if (!isLastItemReached && !isNextBtn || isNextBtn && showRightBtn) {\n            <ion-button (click)=\"onRightBtnAction($event)\"\n                class=\"euim-slider-info-screen__action-button euim-slider-info-screen__action-button--right\"\n                fill=\"clear\">\n                {{actionBtnNames.rightBtnName || 'euim.slider-info-screen.RIGHT-BTN-NAME' | translate}}\n\n                @if (actionBtnIconsNames.rightBtnIconName !== '') {\n                    <ion-icon slot=\"end\" [name]=\"actionBtnIconsNames.rightBtnIconName\"></ion-icon>\n                }\n            </ion-button>\n            }\n\n            @if (isLastItemReached) {\n            <ion-button (click)=\"onLastStepAction($event)\"\n                class=\"euim-slider-info-screen__action-button euim-slider-info-screen__action-button--right\"\n                fill=\"clear\">\n                {{actionBtnNames.lastStepActionBtnName || 'euim.slider-info-screen.LAST-STEP-ACTION-BTN-NAME' | translate}}\n\n                @if (actionBtnIconsNames.lastStepActionBtnIconName !== '') {\n                    <ion-icon slot=\"end\" [name]=\"actionBtnIconsNames.lastStepActionBtnIconName\"></ion-icon>\n                }\n            </ion-button>\n            }\n        </div>\n        }\n    </div>\n    }\n\n    @if (isImageOnly()) {\n    <div class=\"euim-slider-info-screen__pagination-container--over-image\">\n        <div class=\"euim-slider-info-screen__pagination\">\n            <span (click)=\"goToSlide(i)\" *ngFor=\"let slide of slidesArray; let i = index\"\n                [ngClass]=\"{ 'active': currentSlide === i }\"\n                class=\"euim-slider-info-screen__span\" ></span>\n        </div>\n    </div>\n    }\n\n</div>\n", styles: [".euim-slider-info-screen__slider-container{overflow:hidden;position:relative;height:100vh}.euim-slider-info-screen__slides{display:flex;transition:all .5s ease;height:100%;width:100%}.euim-slider-info-screen__slide{width:100%;height:100%}.euim-slider-info-screen__pagination-container--over-image{position:absolute;bottom:20px;left:50%;transform:translate(-50%);display:flex;align-items:center;justify-content:center;z-index:1}.euim-slider-info-screen__pagination-container{position:fixed;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:center;height:60px}.euim-slider-info-screen__pagination{display:flex}.euim-slider-info-screen__span{width:calc(var(--eui-s-xs) + var(--eui-s-2xs) / 2);height:calc(var(--eui-s-xs) + var(--eui-s-2xs) / 2);border-radius:50%;cursor:pointer;border:1px solid var(--eui-c-primary)}.euim-slider-info-screen__span:not(:last-child){margin-right:var(--eui-s-xs)}.euim-slider-info-screen.pagination-color-primary .euim-slider-info-screen__span{border:1px solid var(--eui-c-primary)!important;background-color:transparent}.euim-slider-info-screen.pagination-color-primary .euim-slider-info-screen__span.active{background-color:var(--eui-c-primary)!important}.euim-slider-info-screen.pagination-color-white .euim-slider-info-screen__span{border:1px solid var(--eui-c-white)!important;background-color:transparent}.euim-slider-info-screen.pagination-color-white .euim-slider-info-screen__span.active{background-color:var(--eui-c-white)!important}.euim-slider-info-screen.pagination-color-success .euim-slider-info-screen__span{border:1px solid var(--eui-c-success)!important;background-color:transparent}.euim-slider-info-screen.pagination-color-success .euim-slider-info-screen__span.active{background-color:var(--eui-c-success)!important}.euim-slider-info-screen.pagination-color-warning .euim-slider-info-screen__span{border:1px solid var(--eui-c-warning)!important;background-color:transparent}.euim-slider-info-screen.pagination-color-warning .euim-slider-info-screen__span.active{background-color:var(--eui-c-warning)!important}.euim-slider-info-screen.pagination-color-info .euim-slider-info-screen__span{border:1px solid var(--eui-c-info)!important;background-color:transparent}.euim-slider-info-screen.pagination-color-info .euim-slider-info-screen__span.active{background-color:var(--eui-c-info)!important}.euim-slider-info-screen.pagination-color-dark .euim-slider-info-screen__span{border:1px solid var(--eui-c-neutral)!important;background-color:transparent}.euim-slider-info-screen.pagination-color-dark .euim-slider-info-screen__span.active{background-color:var(--eui-c-neutral)!important}.euim-slider-info-screen.pagination-color-danger .euim-slider-info-screen__span{border:1px solid var(--eui-c-danger)!important;background-color:transparent}.euim-slider-info-screen.pagination-color-danger .euim-slider-info-screen__span.active{background-color:var(--eui-c-danger)!important}.euim-slider-info-screen__action-button{position:absolute;color:var(--eui-c-primary);font-weight:700;top:50%;transform:translateY(-50%)}.euim-slider-info-screen__action-button::part(native){padding:0 var(--eui-s-m)}.euim-slider-info-screen__action-button--right{right:0;margin:0 var(--eui-s-xs) 0 var(--eui-s-m)}.euim-slider-info-screen__action-button--left{margin:0 var(--eui-s-m) 0 var(--eui-s-xs);left:0}.euim-slider-info-screen__action-button ion-icon{color:var(--eui-c-primary)}.euim-slider-info-screen__title{font:var(--eui-f-2xl-bold-compact);color:var(--eui-c-neutral);margin-top:var(--eui-s-l);padding-left:var(--eui-s-l);padding-right:var(--eui-s-l)}.euim-slider-info-screen__sub-title{color:var(--eui-c-neutral-light);padding-left:var(--eui-s-l);padding-right:var(--eui-s-l);font:var(--eui-f-l-compact)}.euim-slider-info-screen__content{color:var(--eui-c-neutral);padding-left:var(--eui-s-l);padding-right:var(--eui-s-l);font:var(--eui-f-l-compact)}.euim-slider-info-screen__content--centered{text-align:center}.euim-slider-info-screen__title+.euim-slider-info-screen__sub-title{margin-top:var(--eui-s-2xs)}.euim-slider-info-screen__sub-title+.euim-slider-info-screen__content,title+.euim-slider-info-screen__content{margin-top:var(--eui-s-m)}.euim-slider-info-screen.image-only .euim-slider-info-screen__slider-container{height:auto}\n"] }]
+        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i3.GestureController }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { slides: [{
                 type: ViewChild,
                 args: ['slides', { static: true }]
             }], rightActionClicked: [{
@@ -2184,27 +2377,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
             }], isNextBtn: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
+            }], paginationColor: [{
+                type: Input
             }], actionBtnNames: [{
                 type: Input
-            }], className: [{
-                type: HostBinding,
-                args: ['class']
+            }], actionBtnIconsNames: [{
+                type: Input
             }], onResize: [{
                 type: HostListener,
                 args: ['window:resize', ['$event']]
+            }], cssClasses: [{
+                type: HostBinding,
+                args: ['class']
             }] } });
 
 class EuimSlideInfoScreenComponent {
     constructor() {
         this.className = 'euim-slider-info-screen__slide';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimSlideInfoScreenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: EuimSlideInfoScreenComponent, selector: "euim-slide-info-screen", host: { properties: { "class": "this.className" } }, ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimSlideInfoScreenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.10", type: EuimSlideInfoScreenComponent, selector: "euim-slide-info-screen", host: { properties: { "class": "this.className" } }, ngImport: i0, template: `
         <div #slide>
             <ng-content></ng-content>
         </div>`, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimSlideInfoScreenComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimSlideInfoScreenComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'euim-slide-info-screen',
@@ -2231,10 +2428,10 @@ class EuimSliderInfoScreenContentDirective {
             this.euimTextCenter ? 'euim-slider-info-screen__content--centered' : '',
         ].join(' ').trim();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimSliderInfoScreenContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.5", type: EuimSliderInfoScreenContentDirective, selector: "[euimSliderInfoScreenContent]", inputs: { euimTextCenter: ["euimTextCenter", "euimTextCenter", booleanAttribute] }, host: { properties: { "class": "this.cssClasses" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimSliderInfoScreenContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.10", type: EuimSliderInfoScreenContentDirective, selector: "[euimSliderInfoScreenContent]", inputs: { euimTextCenter: ["euimTextCenter", "euimTextCenter", booleanAttribute] }, host: { properties: { "class": "this.cssClasses" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimSliderInfoScreenContentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimSliderInfoScreenContentDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[euimSliderInfoScreenContent]',
@@ -2251,10 +2448,10 @@ class EuimSliderInfoScreenTitleDirective {
     constructor() {
         this.className = 'euim-slider-info-screen__title';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimSliderInfoScreenTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.5", type: EuimSliderInfoScreenTitleDirective, selector: "[euimSliderInfoScreenTitle]", host: { properties: { "class": "this.className" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimSliderInfoScreenTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.10", type: EuimSliderInfoScreenTitleDirective, selector: "[euimSliderInfoScreenTitle]", host: { properties: { "class": "this.className" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimSliderInfoScreenTitleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimSliderInfoScreenTitleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[euimSliderInfoScreenTitle]',
@@ -2268,10 +2465,10 @@ class EuimSliderInfoScreenSubTitleDirective {
     constructor() {
         this.className = 'euim-slider-info-screen__sub-title';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimSliderInfoScreenSubTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.5", type: EuimSliderInfoScreenSubTitleDirective, selector: "[euimSliderInfoScreenSubTitle]", host: { properties: { "class": "this.className" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimSliderInfoScreenSubTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.10", type: EuimSliderInfoScreenSubTitleDirective, selector: "[euimSliderInfoScreenSubTitle]", host: { properties: { "class": "this.className" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimSliderInfoScreenSubTitleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimSliderInfoScreenSubTitleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[euimSliderInfoScreenSubTitle]',
@@ -2289,8 +2486,8 @@ const COMPONENTS$5 = [
     EuimSliderInfoScreenSubTitleDirective,
 ];
 class EuimSliderInfoScreenModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimSliderInfoScreenModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.5", ngImport: i0, type: EuimSliderInfoScreenModule, declarations: [EuimSliderInfoScreenComponent,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimSliderInfoScreenModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.10", ngImport: i0, type: EuimSliderInfoScreenModule, declarations: [EuimSliderInfoScreenComponent,
             EuimSlideInfoScreenComponent,
             EuimSliderInfoScreenContentDirective,
             EuimSliderInfoScreenTitleDirective,
@@ -2301,11 +2498,11 @@ class EuimSliderInfoScreenModule {
             EuimSliderInfoScreenContentDirective,
             EuimSliderInfoScreenTitleDirective,
             EuimSliderInfoScreenSubTitleDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimSliderInfoScreenModule, imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimSliderInfoScreenModule, imports: [CommonModule,
             IonicModule,
             TranslateModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimSliderInfoScreenModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimSliderInfoScreenModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -2330,10 +2527,10 @@ class EuimChipSelectorItemDirective {
         this.euimChipSelectorAll = false;
         this.className = 'euim-chip-selector__item';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimChipSelectorItemDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.5", type: EuimChipSelectorItemDirective, selector: "[euimChipSelectorItem]", inputs: { id: ["id", "id", numberAttribute], euimChipSelectorAll: ["euimChipSelectorAll", "euimChipSelectorAll", booleanAttribute] }, host: { properties: { "class": "this.className" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimChipSelectorItemDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.10", type: EuimChipSelectorItemDirective, selector: "[euimChipSelectorItem]", inputs: { id: ["id", "id", numberAttribute], euimChipSelectorAll: ["euimChipSelectorAll", "euimChipSelectorAll", booleanAttribute] }, host: { properties: { "class": "this.className" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimChipSelectorItemDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimChipSelectorItemDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[euimChipSelectorItem]',
@@ -2351,11 +2548,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
 
 class EuimChipSelectorComponent {
     constructor() {
-        this.backgroundColor = 'primary';
+        this.backgroundColor = 'branding';
         this.color = 'white';
         this.chipSelectedColor = 'white';
         this.chipFill = 'default';
         this.sourceData = [];
+        this.hasBoxShadow = false;
+        this.hasNoScrollerX = false;
+        this.hasColorTransparency = false;
         this.selectedChips = [];
         this.isMultiSelectionMode = false;
         this.isCustomMode = false;
@@ -2363,6 +2563,7 @@ class EuimChipSelectorComponent {
         this.hasSearchbar = false;
         this.filterData = new EventEmitter();
         this.clickItems = new EventEmitter();
+        this.selectedChipsChange = new EventEmitter();
         this.filteredData = [...this.sourceData];
         this.filterConditions = [];
         this.searchInput = '';
@@ -2404,7 +2605,18 @@ class EuimChipSelectorComponent {
         }
         if (this.euimChipSelectorItemComponent && this.euimChipSelectorItemComponent.length > 0 &&
             changes['selectedChips']?.currentValue && !changes['selectedChips']?.currentValue.every((value) => value === '0')) {
-            this.updateChipsAndFilterDataAfterInit();
+            this.updateChipsAndFilterDataAfterInit(this.isEmitEvent = false);
+            this.selectedChipsChange.emit(this.selectedChips);
+            return;
+        }
+        if (this.euimChipSelectorItemComponent && this.euimChipSelectorItemComponent.length > 0 &&
+            changes['chipSelectedColor']?.currentValue) {
+            this.euimChipSelectorItemComponent.forEach(chip => {
+                chip.el.nativeElement.classList.remove(`euim-chip-selector__item-selected--color-${changes['chipSelectedColor']?.previousValue}`);
+                if (chip.el.nativeElement.getAttribute('selected') === 'true') {
+                    chip.el.nativeElement.classList.add(`euim-chip-selector__item-selected--color-${changes['chipSelectedColor']?.currentValue}`);
+                }
+            });
             return;
         }
     }
@@ -2412,6 +2624,7 @@ class EuimChipSelectorComponent {
         return [
             'euim-chip-selector',
             this.backgroundColor ? `euim-chip-selector--background-color-${this.backgroundColor}` : '',
+            this.hasNoScrollerX ? 'euim-chip-selector--has-no-scroller-x' : '',
         ].join(' ').trim();
     }
     setCssItemClasses() {
@@ -2426,7 +2639,11 @@ class EuimChipSelectorComponent {
         return [
             this.chipFill ? `euim-chip-selector__item--fill-${this.chipFill}` : '',
             this.color ? `euim-chip-selector__item--color-${this.color}` : '',
-        ].join(' ');
+            this.hasColorTransparency ? `euim-chip-selector__item--color-${this.color}-with-transparency` : '',
+            this.hasBoxShadow ? 'euim-chip-selector__item--has-box-shadow' : '',
+        ]
+            .filter(Boolean)
+            .join(' ');
     }
     updateChipsAndFilters() {
         this.euimChipSelectorItemComponent.forEach(chip => {
@@ -2443,6 +2660,7 @@ class EuimChipSelectorComponent {
                         this.onFilterChange(chip.id?.toString(), chip.euimChipSelectorAll, chip.el.nativeElement);
                         this.filterData.emit(this.filteredData);
                         this.clickItems.emit(this.selectedChips);
+                        this.selectedChipsChange.emit(this.selectedChips);
                         this.clickEventHandled = false;
                     }
                 });
@@ -2478,7 +2696,7 @@ class EuimChipSelectorComponent {
             }
         });
         this.filterData.emit(this.sourceData);
-        this.clickItems.emit(this.selectedChips);
+        this.selectedChipsChange.emit(this.selectedChips);
     }
     updateChipsAndFilterDataAfterInit(isEmitEvent) {
         this.euimChipSelectorItemComponent.forEach(chip => {
@@ -2600,12 +2818,12 @@ class EuimChipSelectorComponent {
             return data;
         return data.filter(item => multipleFilterConditions.includes(item.filterId));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimChipSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", type: EuimChipSelectorComponent, selector: "euim-chip-selector", inputs: { backgroundColor: "backgroundColor", color: "color", chipSelectedColor: "chipSelectedColor", chipFill: "chipFill", sourceData: "sourceData", selectedChips: "selectedChips", isMultiSelectionMode: ["isMultiSelectionMode", "isMultiSelectionMode", booleanAttribute], isCustomMode: ["isCustomMode", "isCustomMode", booleanAttribute], euimKeepSelection: ["euimKeepSelection", "euimKeepSelection", booleanAttribute], hasSearchbar: ["hasSearchbar", "hasSearchbar", booleanAttribute] }, outputs: { filterData: "filterData", clickItems: "clickItems" }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "euimChipSelectorItemComponent", predicate: EuimChipSelectorItemDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (hasSearchbar) {\n  <ion-searchbar (ionChange)=\"handleChange($event)\"\n  class=\"euim-chip-selector__searchbar\"></ion-searchbar>\n}\n<euim-scroller-x>\n  <ng-content></ng-content>\n</euim-scroller-x>\n\n", styles: [".euim-chip-selector{padding:var(--eui-s-xs) 0 var(--eui-s-xs) var(--eui-s-xs);display:flex;justify-content:center;flex-direction:column}.euim-chip-selector ion-chip{margin:0 var(--eui-s-xs) 0 0;padding:0 var(--eui-s-xs)}.euim-chip-selector ion-searchbar{padding-inline-start:0;padding-top:0;padding-bottom:var(--eui-s-s)}@media (min-width: 768px){.euim-chip-selector .euim-scroller-x{flex-wrap:wrap;gap:var(--eui-base-spacing-xs)}}.euim-chip-selector__item--fill-default,.euim-chip-selector--fill-solid{border:none}.euim-chip-selector__item--fill-outline{background-color:transparent!important;border-width:1px;border-style:solid}.euim-chip-selector__item--fill-clear{background-color:transparent!important;border:none}.euim-chip-selector__item--fill-outline-solid{border-width:1px;border-style:solid}.euim-chip-selector--background-color-primary{background-color:var(--eui-bc-primary-100)}.euim-chip-selector__item--color-success{background-color:var(--eui-bc-success-25);border-color:var(--eui-bc-success-25);color:var(--eui-bc-success-100)}.euim-chip-selector__item--color-success ion-icon{color:var(--eui-base-color-success-100)}.euim-chip-selector__item--color-success.euim-chip-selector__item--fill-outline{border-color:var(--eui-bc-success-50)}.euim-chip-selector__item--color-warning{background-color:var(--eui-bc-warning-25);border-color:var(--eui-bc-warning-25);color:var(--eui-bc-warning-140)}.euim-chip-selector__item--color-warning ion-icon{color:var(--eui-base-color-warning-140)}.euim-chip-selector__item--color-warning.euim-chip-selector__item--fill-outline{border-color:var(--eui-bc-warning-50)}.euim-chip-selector__item--color-danger{background-color:var(--eui-bc-danger-25);border-color:var(--eui-bc-danger-25);color:var(--eui-bc-danger-100)}.euim-chip-selector__item--color-danger ion-icon{color:var(--eui-base-color-danger-100)}.euim-chip-selector__item--color-danger.euim-chip-selector__item--fill-outline{border-color:var(--eui-bc-danger-50)}.euim-chip-selector__item--color-primary{background-color:var(--eui-bc-primary-25);border-color:var(--eui-bc-primary-25);color:var(--eui-bc-primary-100)}.euim-chip-selector__item--color-primary ion-icon{color:var(--eui-base-color-primary-100)}.euim-chip-selector__item--color-primary.euim-chip-selector__item--fill-outline{border-color:var(--eui-bc-primary-100)}.euim-chip-selector__item--color-info{background-color:var(--eui-bc-info-25);border-color:var(--eui-bc-info-25);color:var(--eui-bc-info-100)}.euim-chip-selector__item--color-info ion-icon{color:var(--eui-base-color-info-100)}.euim-chip-selector__item--color-info.euim-chip-selector__item--fill-outline{border-color:var(--eui-bc-info-50)}.euim-chip-selector__item--color-dark{background-color:var(--eui-bc-neutral-100);border-color:var(--eui-bc-neutral-100);color:var(--eui-c-white)}.euim-chip-selector__item--color-dark ion-icon{color:var(--eui-base-color-grey-100)}.euim-chip-selector__item--color-dark.euim-chip-selector__item--fill-outline{color:var(--eui-bc-neutral-100)}.euim-chip-selector__item--color-white{background-color:var(--eui-c-white);border-color:var(--eui-c-white);color:var(--eui-bc-neutral-100)}.euim-chip-selector__item--color-white ion-icon{color:var(--eui-base-color-white)}.euim-chip-selector__item--color-white.euim-chip-selector__item--fill-outline{color:var(--eui-c-white)}.euim-chip-selector__item--color-default{background-color:var(--eui-bc-neutral-15);border-color:var(--eui-bc-neutral-15);color:var(--eui-bc-neutral-100)}.euim-chip-selector__item--color-default.euim-chip-selector__item--fill-outline{border-color:var(--eui-bc-neutral-60)}ion-chip.euim-chip-selector__item-selected--color-white{background-color:var(--eui-c-white)!important;border-color:var(--eui-c-white)!important;color:var(--eui-bc-neutral-100)!important}ion-chip.euim-chip-selector__item-selected--color-white ion-icon{color:var(--eui-base-color-grey-100)!important}ion-chip.euim-chip-selector__item-selected--color-dark{background-color:var(--eui-bc-neutral-100)!important;border-color:var(--eui-bc-neutral-100)!important;color:var(--eui-c-white)!important}ion-chip.euim-chip-selector__item-selected--color-dark ion-icon{color:var(--eui-base-color-white)!important}ion-chip.euim-chip-selector__item-selected--color-primary{background-color:var(--eui-base-color-primary-100)!important;border-color:var(--eui-base-color-primary-100)!important;color:var(--eui-base-color-white)!important}ion-chip.euim-chip-selector__item-selected--color-primary ion-icon{color:var(--eui-base-color-white)!important}ion-chip.euim-chip-selector__item-selected--color-info{background-color:var(--eui-base-color-info-100)!important;border-color:var(--eui-base-color-info-100)!important;color:var(--eui-base-color-white)!important}ion-chip.euim-chip-selector__item-selected--color-info ion-icon{color:var(--eui-base-color-white)!important}ion-chip.euim-chip-selector__item-selected--color-success{background-color:var(--eui-base-color-success-100)!important;border-color:var(--eui-base-color-success-100)!important;color:var(--eui-base-color-white)!important}ion-chip.euim-chip-selector__item-selected--color-success ion-icon{color:var(--eui-base-color-white)!important}ion-chip.euim-chip-selector__item-selected--color-danger{background-color:var(--eui-base-color-danger-100)!important;border-color:var(--eui-base-color-danger-100)!important;color:var(--eui-base-color-white)!important}ion-chip.euim-chip-selector__item-selected--color-danger ion-icon{color:var(--eui-base-color-white)!important}ion-chip.euim-chip-selector__item-selected--color-warning{background-color:var(--eui-base-color-warning-100)!important;border-color:var(--eui-base-color-warning-100)!important;color:var(--eui-base-color-warning-100-contrast)!important}ion-chip.euim-chip-selector__item-selected--color-warning ion-icon{color:var(--eui-base-color-warning-100-contrast)!important}\n"], dependencies: [{ kind: "component", type: i1.IonSearchbar, selector: "ion-searchbar", inputs: ["animated", "autocapitalize", "autocomplete", "autocorrect", "cancelButtonIcon", "cancelButtonText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "maxlength", "minlength", "mode", "name", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value"] }, { kind: "directive", type: i1.TextValueAccessor, selector: "ion-input:not([type=number]),ion-textarea,ion-searchbar" }, { kind: "component", type: EuimScrollerXComponent, selector: "euim-scroller-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimChipSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.10", type: EuimChipSelectorComponent, selector: "euim-chip-selector", inputs: { backgroundColor: "backgroundColor", color: "color", chipSelectedColor: "chipSelectedColor", chipFill: "chipFill", sourceData: "sourceData", hasBoxShadow: ["hasBoxShadow", "hasBoxShadow", booleanAttribute], hasNoScrollerX: ["hasNoScrollerX", "hasNoScrollerX", booleanAttribute], hasColorTransparency: ["hasColorTransparency", "hasColorTransparency", booleanAttribute], selectedChips: "selectedChips", isMultiSelectionMode: ["isMultiSelectionMode", "isMultiSelectionMode", booleanAttribute], isCustomMode: ["isCustomMode", "isCustomMode", booleanAttribute], euimKeepSelection: ["euimKeepSelection", "euimKeepSelection", booleanAttribute], hasSearchbar: ["hasSearchbar", "hasSearchbar", booleanAttribute] }, outputs: { filterData: "filterData", clickItems: "clickItems", selectedChipsChange: "selectedChipsChange" }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "euimChipSelectorItemComponent", predicate: EuimChipSelectorItemDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (hasNoScrollerX) {\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n} @else {\n    <euim-scroller-x>\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </euim-scroller-x>\n}\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n\n", styles: [".euim-chip-selector{padding:var(--eui-s-xs) 0 var(--eui-s-xs) var(--eui-s-xs);display:flex;justify-content:center;flex-direction:column}.euim-chip-selector ion-chip{margin:calc(var(--eui-s-2xs) / 2) var(--eui-s-xs) calc(var(--eui-s-2xs) / 2) 0;padding:0 var(--eui-s-xs)}.euim-chip-selector ion-searchbar{padding-inline-start:0;padding-top:0;padding-bottom:var(--eui-s-s)}@media (min-width: 768px){.euim-chip-selector .euim-scroller-x{flex-wrap:wrap;gap:var(--eui-s-xs)}}ion-chip.euim-chip-selector__item--has-box-shadow{box-shadow:0 calc(var(--eui-s-2xs) / 2) var(--eui-s-2xs) #0003;margin-bottom:var(--eui-s-2xs)}.euim-chip-selector__item--fill-default,.euim-chip-selector--fill-solid{border:none}.euim-chip-selector__item--fill-outline{background-color:transparent!important;border-width:1px;border-style:solid}.euim-chip-selector__item--fill-clear{background-color:transparent!important;border:none}.euim-chip-selector__item--fill-outline-solid{border-width:1px;border-style:solid}.euim-chip-selector--background-color-branding{background-color:var(--eui-c-branding)}.euim-chip-selector--background-color-transparent{background-color:transparent}.euim-chip-selector__item--color-success{background-color:var(--eui-c-success);border-color:var(--eui-c-sucess-bg);color:var(--eui-c-success)}.euim-chip-selector__item--color-success ion-icon{color:var(--eui-c-success)}.euim-chip-selector__item--color-success.euim-chip-selector__item--fill-outline{border-color:var(--eui-c-success)}.euim-chip-selector__item--color-warning{background-color:var(--eui-bc-warning-25);border-color:var(--eui-bc-warning-25);color:var(--eui-bc-warning-140)}.euim-chip-selector__item--color-warning ion-icon{color:var(--eui-base-color-warning-140)}.euim-chip-selector__item--color-warning.euim-chip-selector__item--fill-outline{border-color:var(--eui-bc-warning-50)}.euim-chip-selector__item--color-danger{background-color:var(--eui-bc-danger-25);border-color:var(--eui-bc-danger-25);color:var(--eui-bc-danger-100)}.euim-chip-selector__item--color-danger ion-icon{color:var(--eui-base-color-danger-100)}.euim-chip-selector__item--color-danger.euim-chip-selector__item--fill-outline{border-color:var(--eui-bc-danger-50)}.euim-chip-selector__item--color-primary{background-color:var(--eui-bc-primary-25);border-color:var(--eui-bc-primary-25);color:var(--eui-bc-primary-100)}.euim-chip-selector__item--color-primary ion-icon{color:var(--eui-base-color-primary-100)}.euim-chip-selector__item--color-primary.euim-chip-selector__item--fill-outline{border-color:var(--eui-bc-primary-100)}.euim-chip-selector__item--color-info{background-color:var(--eui-bc-info-25);border-color:var(--eui-bc-info-25);color:var(--eui-bc-info-100)}.euim-chip-selector__item--color-info ion-icon{color:var(--eui-base-color-info-100)}.euim-chip-selector__item--color-info.euim-chip-selector__item--fill-outline{border-color:var(--eui-bc-info-50)}.euim-chip-selector__item--color-dark{background-color:var(--eui-bc-neutral-100);border-color:var(--eui-bc-neutral-100);color:var(--eui-c-white)}.euim-chip-selector__item--color-dark ion-icon{color:var(--eui-base-color-grey-100)}.euim-chip-selector__item--color-dark.euim-chip-selector__item--fill-outline{color:var(--eui-bc-neutral-100)}.euim-chip-selector__item--color-white{background-color:var(--eui-c-white);border-color:var(--eui-c-white);color:var(--eui-c-neutral)}.euim-chip-selector__item--color-white ion-icon{color:var(--eui-c-neutral)}.euim-chip-selector__item--color-white.euim-chip-selector__item--fill-outline{color:var(--eui-c-white)}.euim-chip-selector__item--color-white.euim-chip-selector__item--fill-outline ion-icon{color:var(--eui-c-white)}.euim-chip-selector__item--color-white.euim-chip-selector__item--color-white-with-transparency{background-color:#ffffff30;border-color:transparent;color:var(--eui-c-white)}.euim-chip-selector__item--color-default{background-color:var(--eui-bc-neutral-15);border-color:var(--eui-bc-neutral-15);color:var(--eui-bc-neutral-100)}.euim-chip-selector__item--color-default.euim-chip-selector__item--fill-outline{border-color:var(--eui-bc-neutral-60)}ion-chip.euim-chip-selector__item-selected--color-white{background-color:var(--eui-c-white)!important;border-color:var(--eui-c-white)!important;color:var(--eui-bc-neutral-100)!important}ion-chip.euim-chip-selector__item-selected--color-white ion-icon{color:var(--eui-base-color-grey-100)!important}ion-chip.euim-chip-selector__item-selected--color-dark{background-color:var(--eui-bc-neutral-100)!important;border-color:var(--eui-bc-neutral-100)!important;color:var(--eui-c-white)!important}ion-chip.euim-chip-selector__item-selected--color-dark ion-icon{color:var(--eui-base-color-white)!important}ion-chip.euim-chip-selector__item-selected--color-primary{background-color:var(--eui-base-color-primary-100)!important;border-color:var(--eui-base-color-primary-100)!important;color:var(--eui-base-color-white)!important}ion-chip.euim-chip-selector__item-selected--color-primary ion-icon{color:var(--eui-base-color-white)!important}ion-chip.euim-chip-selector__item-selected--color-info{background-color:var(--eui-base-color-info-100)!important;border-color:var(--eui-base-color-info-100)!important;color:var(--eui-base-color-white)!important}ion-chip.euim-chip-selector__item-selected--color-info ion-icon{color:var(--eui-base-color-white)!important}ion-chip.euim-chip-selector__item-selected--color-success{background-color:var(--eui-base-color-success-100)!important;border-color:var(--eui-base-color-success-100)!important;color:var(--eui-base-color-white)!important}ion-chip.euim-chip-selector__item-selected--color-success ion-icon{color:var(--eui-base-color-white)!important}ion-chip.euim-chip-selector__item-selected--color-danger{background-color:var(--eui-base-color-danger-100)!important;border-color:var(--eui-base-color-danger-100)!important;color:var(--eui-base-color-white)!important}ion-chip.euim-chip-selector__item-selected--color-danger ion-icon{color:var(--eui-base-color-white)!important}ion-chip.euim-chip-selector__item-selected--color-warning{background-color:var(--eui-base-color-warning-100)!important;border-color:var(--eui-base-color-warning-100)!important;color:var(--eui-base-color-warning-100-contrast)!important}ion-chip.euim-chip-selector__item-selected--color-warning ion-icon{color:var(--eui-base-color-warning-100-contrast)!important}\n"], dependencies: [{ kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: EuimScrollerXComponent, selector: "euim-scroller-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimChipSelectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimChipSelectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'euim-chip-selector', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (hasSearchbar) {\n  <ion-searchbar (ionChange)=\"handleChange($event)\"\n  class=\"euim-chip-selector__searchbar\"></ion-searchbar>\n}\n<euim-scroller-x>\n  <ng-content></ng-content>\n</euim-scroller-x>\n\n", styles: [".euim-chip-selector{padding:var(--eui-s-xs) 0 var(--eui-s-xs) var(--eui-s-xs);display:flex;justify-content:center;flex-direction:column}.euim-chip-selector ion-chip{margin:0 var(--eui-s-xs) 0 0;padding:0 var(--eui-s-xs)}.euim-chip-selector ion-searchbar{padding-inline-start:0;padding-top:0;padding-bottom:var(--eui-s-s)}@media (min-width: 768px){.euim-chip-selector .euim-scroller-x{flex-wrap:wrap;gap:var(--eui-base-spacing-xs)}}.euim-chip-selector__item--fill-default,.euim-chip-selector--fill-solid{border:none}.euim-chip-selector__item--fill-outline{background-color:transparent!important;border-width:1px;border-style:solid}.euim-chip-selector__item--fill-clear{background-color:transparent!important;border:none}.euim-chip-selector__item--fill-outline-solid{border-width:1px;border-style:solid}.euim-chip-selector--background-color-primary{background-color:var(--eui-bc-primary-100)}.euim-chip-selector__item--color-success{background-color:var(--eui-bc-success-25);border-color:var(--eui-bc-success-25);color:var(--eui-bc-success-100)}.euim-chip-selector__item--color-success ion-icon{color:var(--eui-base-color-success-100)}.euim-chip-selector__item--color-success.euim-chip-selector__item--fill-outline{border-color:var(--eui-bc-success-50)}.euim-chip-selector__item--color-warning{background-color:var(--eui-bc-warning-25);border-color:var(--eui-bc-warning-25);color:var(--eui-bc-warning-140)}.euim-chip-selector__item--color-warning ion-icon{color:var(--eui-base-color-warning-140)}.euim-chip-selector__item--color-warning.euim-chip-selector__item--fill-outline{border-color:var(--eui-bc-warning-50)}.euim-chip-selector__item--color-danger{background-color:var(--eui-bc-danger-25);border-color:var(--eui-bc-danger-25);color:var(--eui-bc-danger-100)}.euim-chip-selector__item--color-danger ion-icon{color:var(--eui-base-color-danger-100)}.euim-chip-selector__item--color-danger.euim-chip-selector__item--fill-outline{border-color:var(--eui-bc-danger-50)}.euim-chip-selector__item--color-primary{background-color:var(--eui-bc-primary-25);border-color:var(--eui-bc-primary-25);color:var(--eui-bc-primary-100)}.euim-chip-selector__item--color-primary ion-icon{color:var(--eui-base-color-primary-100)}.euim-chip-selector__item--color-primary.euim-chip-selector__item--fill-outline{border-color:var(--eui-bc-primary-100)}.euim-chip-selector__item--color-info{background-color:var(--eui-bc-info-25);border-color:var(--eui-bc-info-25);color:var(--eui-bc-info-100)}.euim-chip-selector__item--color-info ion-icon{color:var(--eui-base-color-info-100)}.euim-chip-selector__item--color-info.euim-chip-selector__item--fill-outline{border-color:var(--eui-bc-info-50)}.euim-chip-selector__item--color-dark{background-color:var(--eui-bc-neutral-100);border-color:var(--eui-bc-neutral-100);color:var(--eui-c-white)}.euim-chip-selector__item--color-dark ion-icon{color:var(--eui-base-color-grey-100)}.euim-chip-selector__item--color-dark.euim-chip-selector__item--fill-outline{color:var(--eui-bc-neutral-100)}.euim-chip-selector__item--color-white{background-color:var(--eui-c-white);border-color:var(--eui-c-white);color:var(--eui-bc-neutral-100)}.euim-chip-selector__item--color-white ion-icon{color:var(--eui-base-color-white)}.euim-chip-selector__item--color-white.euim-chip-selector__item--fill-outline{color:var(--eui-c-white)}.euim-chip-selector__item--color-default{background-color:var(--eui-bc-neutral-15);border-color:var(--eui-bc-neutral-15);color:var(--eui-bc-neutral-100)}.euim-chip-selector__item--color-default.euim-chip-selector__item--fill-outline{border-color:var(--eui-bc-neutral-60)}ion-chip.euim-chip-selector__item-selected--color-white{background-color:var(--eui-c-white)!important;border-color:var(--eui-c-white)!important;color:var(--eui-bc-neutral-100)!important}ion-chip.euim-chip-selector__item-selected--color-white ion-icon{color:var(--eui-base-color-grey-100)!important}ion-chip.euim-chip-selector__item-selected--color-dark{background-color:var(--eui-bc-neutral-100)!important;border-color:var(--eui-bc-neutral-100)!important;color:var(--eui-c-white)!important}ion-chip.euim-chip-selector__item-selected--color-dark ion-icon{color:var(--eui-base-color-white)!important}ion-chip.euim-chip-selector__item-selected--color-primary{background-color:var(--eui-base-color-primary-100)!important;border-color:var(--eui-base-color-primary-100)!important;color:var(--eui-base-color-white)!important}ion-chip.euim-chip-selector__item-selected--color-primary ion-icon{color:var(--eui-base-color-white)!important}ion-chip.euim-chip-selector__item-selected--color-info{background-color:var(--eui-base-color-info-100)!important;border-color:var(--eui-base-color-info-100)!important;color:var(--eui-base-color-white)!important}ion-chip.euim-chip-selector__item-selected--color-info ion-icon{color:var(--eui-base-color-white)!important}ion-chip.euim-chip-selector__item-selected--color-success{background-color:var(--eui-base-color-success-100)!important;border-color:var(--eui-base-color-success-100)!important;color:var(--eui-base-color-white)!important}ion-chip.euim-chip-selector__item-selected--color-success ion-icon{color:var(--eui-base-color-white)!important}ion-chip.euim-chip-selector__item-selected--color-danger{background-color:var(--eui-base-color-danger-100)!important;border-color:var(--eui-base-color-danger-100)!important;color:var(--eui-base-color-white)!important}ion-chip.euim-chip-selector__item-selected--color-danger ion-icon{color:var(--eui-base-color-white)!important}ion-chip.euim-chip-selector__item-selected--color-warning{background-color:var(--eui-base-color-warning-100)!important;border-color:var(--eui-base-color-warning-100)!important;color:var(--eui-base-color-warning-100-contrast)!important}ion-chip.euim-chip-selector__item-selected--color-warning ion-icon{color:var(--eui-base-color-warning-100-contrast)!important}\n"] }]
+            args: [{ selector: 'euim-chip-selector', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (hasNoScrollerX) {\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n} @else {\n    <euim-scroller-x>\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </euim-scroller-x>\n}\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n\n", styles: [".euim-chip-selector{padding:var(--eui-s-xs) 0 var(--eui-s-xs) var(--eui-s-xs);display:flex;justify-content:center;flex-direction:column}.euim-chip-selector ion-chip{margin:calc(var(--eui-s-2xs) / 2) var(--eui-s-xs) calc(var(--eui-s-2xs) / 2) 0;padding:0 var(--eui-s-xs)}.euim-chip-selector ion-searchbar{padding-inline-start:0;padding-top:0;padding-bottom:var(--eui-s-s)}@media (min-width: 768px){.euim-chip-selector .euim-scroller-x{flex-wrap:wrap;gap:var(--eui-s-xs)}}ion-chip.euim-chip-selector__item--has-box-shadow{box-shadow:0 calc(var(--eui-s-2xs) / 2) var(--eui-s-2xs) #0003;margin-bottom:var(--eui-s-2xs)}.euim-chip-selector__item--fill-default,.euim-chip-selector--fill-solid{border:none}.euim-chip-selector__item--fill-outline{background-color:transparent!important;border-width:1px;border-style:solid}.euim-chip-selector__item--fill-clear{background-color:transparent!important;border:none}.euim-chip-selector__item--fill-outline-solid{border-width:1px;border-style:solid}.euim-chip-selector--background-color-branding{background-color:var(--eui-c-branding)}.euim-chip-selector--background-color-transparent{background-color:transparent}.euim-chip-selector__item--color-success{background-color:var(--eui-c-success);border-color:var(--eui-c-sucess-bg);color:var(--eui-c-success)}.euim-chip-selector__item--color-success ion-icon{color:var(--eui-c-success)}.euim-chip-selector__item--color-success.euim-chip-selector__item--fill-outline{border-color:var(--eui-c-success)}.euim-chip-selector__item--color-warning{background-color:var(--eui-bc-warning-25);border-color:var(--eui-bc-warning-25);color:var(--eui-bc-warning-140)}.euim-chip-selector__item--color-warning ion-icon{color:var(--eui-base-color-warning-140)}.euim-chip-selector__item--color-warning.euim-chip-selector__item--fill-outline{border-color:var(--eui-bc-warning-50)}.euim-chip-selector__item--color-danger{background-color:var(--eui-bc-danger-25);border-color:var(--eui-bc-danger-25);color:var(--eui-bc-danger-100)}.euim-chip-selector__item--color-danger ion-icon{color:var(--eui-base-color-danger-100)}.euim-chip-selector__item--color-danger.euim-chip-selector__item--fill-outline{border-color:var(--eui-bc-danger-50)}.euim-chip-selector__item--color-primary{background-color:var(--eui-bc-primary-25);border-color:var(--eui-bc-primary-25);color:var(--eui-bc-primary-100)}.euim-chip-selector__item--color-primary ion-icon{color:var(--eui-base-color-primary-100)}.euim-chip-selector__item--color-primary.euim-chip-selector__item--fill-outline{border-color:var(--eui-bc-primary-100)}.euim-chip-selector__item--color-info{background-color:var(--eui-bc-info-25);border-color:var(--eui-bc-info-25);color:var(--eui-bc-info-100)}.euim-chip-selector__item--color-info ion-icon{color:var(--eui-base-color-info-100)}.euim-chip-selector__item--color-info.euim-chip-selector__item--fill-outline{border-color:var(--eui-bc-info-50)}.euim-chip-selector__item--color-dark{background-color:var(--eui-bc-neutral-100);border-color:var(--eui-bc-neutral-100);color:var(--eui-c-white)}.euim-chip-selector__item--color-dark ion-icon{color:var(--eui-base-color-grey-100)}.euim-chip-selector__item--color-dark.euim-chip-selector__item--fill-outline{color:var(--eui-bc-neutral-100)}.euim-chip-selector__item--color-white{background-color:var(--eui-c-white);border-color:var(--eui-c-white);color:var(--eui-c-neutral)}.euim-chip-selector__item--color-white ion-icon{color:var(--eui-c-neutral)}.euim-chip-selector__item--color-white.euim-chip-selector__item--fill-outline{color:var(--eui-c-white)}.euim-chip-selector__item--color-white.euim-chip-selector__item--fill-outline ion-icon{color:var(--eui-c-white)}.euim-chip-selector__item--color-white.euim-chip-selector__item--color-white-with-transparency{background-color:#ffffff30;border-color:transparent;color:var(--eui-c-white)}.euim-chip-selector__item--color-default{background-color:var(--eui-bc-neutral-15);border-color:var(--eui-bc-neutral-15);color:var(--eui-bc-neutral-100)}.euim-chip-selector__item--color-default.euim-chip-selector__item--fill-outline{border-color:var(--eui-bc-neutral-60)}ion-chip.euim-chip-selector__item-selected--color-white{background-color:var(--eui-c-white)!important;border-color:var(--eui-c-white)!important;color:var(--eui-bc-neutral-100)!important}ion-chip.euim-chip-selector__item-selected--color-white ion-icon{color:var(--eui-base-color-grey-100)!important}ion-chip.euim-chip-selector__item-selected--color-dark{background-color:var(--eui-bc-neutral-100)!important;border-color:var(--eui-bc-neutral-100)!important;color:var(--eui-c-white)!important}ion-chip.euim-chip-selector__item-selected--color-dark ion-icon{color:var(--eui-base-color-white)!important}ion-chip.euim-chip-selector__item-selected--color-primary{background-color:var(--eui-base-color-primary-100)!important;border-color:var(--eui-base-color-primary-100)!important;color:var(--eui-base-color-white)!important}ion-chip.euim-chip-selector__item-selected--color-primary ion-icon{color:var(--eui-base-color-white)!important}ion-chip.euim-chip-selector__item-selected--color-info{background-color:var(--eui-base-color-info-100)!important;border-color:var(--eui-base-color-info-100)!important;color:var(--eui-base-color-white)!important}ion-chip.euim-chip-selector__item-selected--color-info ion-icon{color:var(--eui-base-color-white)!important}ion-chip.euim-chip-selector__item-selected--color-success{background-color:var(--eui-base-color-success-100)!important;border-color:var(--eui-base-color-success-100)!important;color:var(--eui-base-color-white)!important}ion-chip.euim-chip-selector__item-selected--color-success ion-icon{color:var(--eui-base-color-white)!important}ion-chip.euim-chip-selector__item-selected--color-danger{background-color:var(--eui-base-color-danger-100)!important;border-color:var(--eui-base-color-danger-100)!important;color:var(--eui-base-color-white)!important}ion-chip.euim-chip-selector__item-selected--color-danger ion-icon{color:var(--eui-base-color-white)!important}ion-chip.euim-chip-selector__item-selected--color-warning{background-color:var(--eui-base-color-warning-100)!important;border-color:var(--eui-base-color-warning-100)!important;color:var(--eui-base-color-warning-100-contrast)!important}ion-chip.euim-chip-selector__item-selected--color-warning ion-icon{color:var(--eui-base-color-warning-100-contrast)!important}\n"] }]
         }], propDecorators: { backgroundColor: [{
                 type: Input
             }], color: [{
@@ -2616,6 +2834,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
                 type: Input
             }], sourceData: [{
                 type: Input
+            }], hasBoxShadow: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], hasNoScrollerX: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], hasColorTransparency: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], selectedChips: [{
                 type: Input
             }], isMultiSelectionMode: [{
@@ -2634,6 +2861,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
                 type: Output
             }], clickItems: [{
                 type: Output
+            }], selectedChipsChange: [{
+                type: Output
             }], cssClasses: [{
                 type: HostBinding,
                 args: ['class']
@@ -2643,17 +2872,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
             }] } });
 
 class EuimChipSelectorComponentModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimChipSelectorComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.5", ngImport: i0, type: EuimChipSelectorComponentModule, declarations: [EuimChipSelectorComponent,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimChipSelectorComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.10", ngImport: i0, type: EuimChipSelectorComponentModule, declarations: [EuimChipSelectorComponent,
             EuimChipSelectorItemDirective], imports: [CommonModule,
             IonicModule,
             EuimScrollerXComponentModule], exports: [EuimChipSelectorComponent,
             EuimChipSelectorItemDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimChipSelectorComponentModule, imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimChipSelectorComponentModule, imports: [CommonModule,
             IonicModule,
             EuimScrollerXComponentModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimChipSelectorComponentModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimChipSelectorComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -2695,10 +2924,10 @@ class EuimSkeletonListItemComponent {
             .join(' ')
             .trim();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimSkeletonListItemComponent, deps: [{ token: BaseStatesDirective }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", type: EuimSkeletonListItemComponent, selector: "euim-skeleton-list-item", inputs: { hasAvatar: ["hasAvatar", "hasAvatar", booleanAttribute], hasTitle: ["hasTitle", "hasTitle", booleanAttribute], hasSubtitle: ["hasSubtitle", "hasSubtitle", booleanAttribute], hasMetaLine: ["hasMetaLine", "hasMetaLine", booleanAttribute], isAnimated: ["isAnimated", "isAnimated", booleanAttribute], avatarType: "avatarType", separator: "separator", titleWidth: "titleWidth", subTitleWidth: "subTitleWidth", metaLineWidth: "metaLineWidth" }, host: { properties: { "class": "this.cssClasses" } }, hostDirectives: [{ directive: BaseStatesDirective, inputs: ["euimSize2XL", "euimSize2XL", "euimSizeL", "euimSizeL"] }], ngImport: i0, template: "<ion-item button [lines]=\"separator\">\n  @if (hasAvatar) {\n    <ion-thumbnail slot=\"start\">\n      <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n    </ion-thumbnail>\n  }\n  <ion-label>\n    @if (hasTitle) {\n      <ion-skeleton-text [animated]=\"isAnimated\"\n      [style.width]=\"titleWidth || '80%'\"></ion-skeleton-text>\n    }\n    @if (hasSubtitle) {\n      <ion-skeleton-text [animated]=\"isAnimated\"\n      [style.width]=\"subTitleWidth || '60%'\"></ion-skeleton-text>\n    }\n    @if (hasMetaLine) {\n      <ion-skeleton-text [animated]=\"isAnimated\"\n      [style.width]=\"metaLineWidth || '40%'\"></ion-skeleton-text>\n    }\n  </ion-label>\n</ion-item>\n", styles: [".euim-skeleton-list-item ion-label ion-skeleton-text{margin-bottom:var(--eui-s-xs)}.euim-skeleton-list-item ion-thumbnail{width:var(--eui-s-2xl);height:var(--eui-s-2xl)}.euim-skeleton-list-item--size-l ion-thumbnail{width:var(--eui-s-l);height:var(--eui-s-l)}.euim-skeleton-list-item--size-2xl ion-thumbnail{width:var(--eui-s-2xl);height:var(--eui-s-2xl)}.euim-skeleton-list-item ion-thumbnail{--border-radius: 50%}.euim-skeleton-list-item--square ion-thumbnail{--border-radius: 0}\n"], dependencies: [{ kind: "component", type: i1.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i1.IonThumbnail, selector: "ion-thumbnail" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimSkeletonListItemComponent, deps: [{ token: BaseStatesDirective }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.10", type: EuimSkeletonListItemComponent, selector: "euim-skeleton-list-item", inputs: { hasAvatar: ["hasAvatar", "hasAvatar", booleanAttribute], hasTitle: ["hasTitle", "hasTitle", booleanAttribute], hasSubtitle: ["hasSubtitle", "hasSubtitle", booleanAttribute], hasMetaLine: ["hasMetaLine", "hasMetaLine", booleanAttribute], isAnimated: ["isAnimated", "isAnimated", booleanAttribute], avatarType: "avatarType", separator: "separator", titleWidth: "titleWidth", subTitleWidth: "subTitleWidth", metaLineWidth: "metaLineWidth" }, host: { properties: { "class": "this.cssClasses" } }, hostDirectives: [{ directive: BaseStatesDirective, inputs: ["euimSize2XL", "euimSize2XL", "euimSizeL", "euimSizeL"] }], ngImport: i0, template: "<ion-item button [lines]=\"separator\">\n  @if (hasAvatar) {\n    <ion-thumbnail slot=\"start\">\n      <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n    </ion-thumbnail>\n  }\n  <ion-label>\n    @if (hasTitle) {\n      <ion-skeleton-text [animated]=\"isAnimated\"\n      [style.width]=\"titleWidth || '80%'\"></ion-skeleton-text>\n    }\n    @if (hasSubtitle) {\n      <ion-skeleton-text [animated]=\"isAnimated\"\n      [style.width]=\"subTitleWidth || '60%'\"></ion-skeleton-text>\n    }\n    @if (hasMetaLine) {\n      <ion-skeleton-text [animated]=\"isAnimated\"\n      [style.width]=\"metaLineWidth || '40%'\"></ion-skeleton-text>\n    }\n  </ion-label>\n</ion-item>\n", styles: [".euim-skeleton-list-item ion-label ion-skeleton-text{margin-bottom:var(--eui-s-xs)}.euim-skeleton-list-item ion-thumbnail{width:var(--eui-is-xl);height:var(--eui-is-xl)}.euim-skeleton-list-item--size-l ion-thumbnail{width:var(--eui-is-m);height:var(--eui-is-m)}.euim-skeleton-list-item--size-2xl ion-thumbnail{width:var(--eui-is-xl);height:var(--eui-is-xl)}.euim-skeleton-list-item ion-thumbnail{--border-radius: 50%}.euim-skeleton-list-item--square ion-thumbnail{--border-radius: 0}\n"], dependencies: [{ kind: "component", type: i3.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i3.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i3.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i3.IonThumbnail, selector: "ion-thumbnail" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimSkeletonListItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimSkeletonListItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'euim-skeleton-list-item', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
                         {
@@ -2708,7 +2937,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
                                 'euimSizeL',
                             ],
                         },
-                    ], template: "<ion-item button [lines]=\"separator\">\n  @if (hasAvatar) {\n    <ion-thumbnail slot=\"start\">\n      <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n    </ion-thumbnail>\n  }\n  <ion-label>\n    @if (hasTitle) {\n      <ion-skeleton-text [animated]=\"isAnimated\"\n      [style.width]=\"titleWidth || '80%'\"></ion-skeleton-text>\n    }\n    @if (hasSubtitle) {\n      <ion-skeleton-text [animated]=\"isAnimated\"\n      [style.width]=\"subTitleWidth || '60%'\"></ion-skeleton-text>\n    }\n    @if (hasMetaLine) {\n      <ion-skeleton-text [animated]=\"isAnimated\"\n      [style.width]=\"metaLineWidth || '40%'\"></ion-skeleton-text>\n    }\n  </ion-label>\n</ion-item>\n", styles: [".euim-skeleton-list-item ion-label ion-skeleton-text{margin-bottom:var(--eui-s-xs)}.euim-skeleton-list-item ion-thumbnail{width:var(--eui-s-2xl);height:var(--eui-s-2xl)}.euim-skeleton-list-item--size-l ion-thumbnail{width:var(--eui-s-l);height:var(--eui-s-l)}.euim-skeleton-list-item--size-2xl ion-thumbnail{width:var(--eui-s-2xl);height:var(--eui-s-2xl)}.euim-skeleton-list-item ion-thumbnail{--border-radius: 50%}.euim-skeleton-list-item--square ion-thumbnail{--border-radius: 0}\n"] }]
+                    ], template: "<ion-item button [lines]=\"separator\">\n  @if (hasAvatar) {\n    <ion-thumbnail slot=\"start\">\n      <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n    </ion-thumbnail>\n  }\n  <ion-label>\n    @if (hasTitle) {\n      <ion-skeleton-text [animated]=\"isAnimated\"\n      [style.width]=\"titleWidth || '80%'\"></ion-skeleton-text>\n    }\n    @if (hasSubtitle) {\n      <ion-skeleton-text [animated]=\"isAnimated\"\n      [style.width]=\"subTitleWidth || '60%'\"></ion-skeleton-text>\n    }\n    @if (hasMetaLine) {\n      <ion-skeleton-text [animated]=\"isAnimated\"\n      [style.width]=\"metaLineWidth || '40%'\"></ion-skeleton-text>\n    }\n  </ion-label>\n</ion-item>\n", styles: [".euim-skeleton-list-item ion-label ion-skeleton-text{margin-bottom:var(--eui-s-xs)}.euim-skeleton-list-item ion-thumbnail{width:var(--eui-is-xl);height:var(--eui-is-xl)}.euim-skeleton-list-item--size-l ion-thumbnail{width:var(--eui-is-m);height:var(--eui-is-m)}.euim-skeleton-list-item--size-2xl ion-thumbnail{width:var(--eui-is-xl);height:var(--eui-is-xl)}.euim-skeleton-list-item ion-thumbnail{--border-radius: 50%}.euim-skeleton-list-item--square ion-thumbnail{--border-radius: 0}\n"] }]
         }], ctorParameters: () => [{ type: BaseStatesDirective }], propDecorators: { cssClasses: [{
                 type: HostBinding,
                 args: ['class']
@@ -2743,13 +2972,13 @@ const COMPONENTS$4 = [
     EuimSkeletonListItemComponent,
 ];
 class EuimSkeletonListItemModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimSkeletonListItemModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.5", ngImport: i0, type: EuimSkeletonListItemModule, declarations: [EuimSkeletonListItemComponent], imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimSkeletonListItemModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.10", ngImport: i0, type: EuimSkeletonListItemModule, declarations: [EuimSkeletonListItemComponent], imports: [CommonModule,
             IonicModule], exports: [EuimSkeletonListItemComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimSkeletonListItemModule, imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimSkeletonListItemModule, imports: [CommonModule,
             IonicModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimSkeletonListItemModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimSkeletonListItemModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -2789,10 +3018,10 @@ class EuimSkeletonListComponent {
     get itemsArray() {
         return Array.from({ length: this.items });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimSkeletonListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", type: EuimSkeletonListComponent, selector: "euim-skeleton-list", inputs: { items: "items" }, queries: [{ propertyName: "skeletonListItem", first: true, predicate: EuimSkeletonListItemComponent, descendants: true }], ngImport: i0, template: "@for (item of itemsArray; track item) {\n  @if (!skeletonListItem) {\n    <euim-skeleton-list-item></euim-skeleton-list-item>\n  }\n  @if (skeletonListItem) {\n    <ng-container *ngComponentOutlet=\"skeletonItem; inputs: skeletonItemInputs\"></ng-container>\n  }\n}\n\n", dependencies: [{ kind: "directive", type: i2$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "component", type: EuimSkeletonListItemComponent, selector: "euim-skeleton-list-item", inputs: ["hasAvatar", "hasTitle", "hasSubtitle", "hasMetaLine", "isAnimated", "avatarType", "separator", "titleWidth", "subTitleWidth", "metaLineWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimSkeletonListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.10", type: EuimSkeletonListComponent, selector: "euim-skeleton-list", inputs: { items: "items" }, queries: [{ propertyName: "skeletonListItem", first: true, predicate: EuimSkeletonListItemComponent, descendants: true }], ngImport: i0, template: "@for (item of itemsArray; track item) {\n  @if (!skeletonListItem) {\n    <euim-skeleton-list-item></euim-skeleton-list-item>\n  }\n  @if (skeletonListItem) {\n    <ng-container *ngComponentOutlet=\"skeletonItem; inputs: skeletonItemInputs\"></ng-container>\n  }\n}\n\n", dependencies: [{ kind: "directive", type: i2$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "component", type: EuimSkeletonListItemComponent, selector: "euim-skeleton-list-item", inputs: ["hasAvatar", "hasTitle", "hasSubtitle", "hasMetaLine", "isAnimated", "avatarType", "separator", "titleWidth", "subTitleWidth", "metaLineWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimSkeletonListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimSkeletonListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'euim-skeleton-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "@for (item of itemsArray; track item) {\n  @if (!skeletonListItem) {\n    <euim-skeleton-list-item></euim-skeleton-list-item>\n  }\n  @if (skeletonListItem) {\n    <ng-container *ngComponentOutlet=\"skeletonItem; inputs: skeletonItemInputs\"></ng-container>\n  }\n}\n\n" }]
         }], propDecorators: { items: [{
@@ -2806,15 +3035,15 @@ const COMPONENTS$3 = [
     EuimSkeletonListComponent,
 ];
 class EuimSkeletonListModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimSkeletonListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.5", ngImport: i0, type: EuimSkeletonListModule, declarations: [EuimSkeletonListComponent], imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimSkeletonListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.10", ngImport: i0, type: EuimSkeletonListModule, declarations: [EuimSkeletonListComponent], imports: [CommonModule,
             IonicModule,
             EuimSkeletonListItemModule], exports: [EuimSkeletonListComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimSkeletonListModule, imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimSkeletonListModule, imports: [CommonModule,
             IonicModule,
             EuimSkeletonListItemModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimSkeletonListModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimSkeletonListModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -2888,12 +3117,12 @@ class EuimMultiselectComponent {
             this.initialDataProvider = changes['currentDataProvider']?.currentValue;
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimMultiselectComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", type: EuimMultiselectComponent, selector: "euim-multiselect", inputs: { currentDataProvider: "currentDataProvider", toolbarTitle: "toolbarTitle", euimKeepSelection: ["euimKeepSelection", "euimKeepSelection", booleanAttribute] }, host: { properties: { "class": "this.className" } }, exportAs: ["euimMultiselect"], usesOnChanges: true, ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"light\" class=\"euim-multiselect__toolbar\">\n    <ng-content select=\"euim-multiselect-toolbar\"></ng-content>\n    <ion-toolbar color=\"light\">\n      <ng-content select=\"euim-multiselect-filter\"></ng-content>\n    </ion-toolbar>\n  </ion-toolbar>\n</ion-header>\n\n@if (currentDataProvider?.length > 0) {\n  <ng-content select=\"euim-multiselect-list\">\n  </ng-content>\n}\n\n@if (currentDataProvider?.length === 0) {\n  <ng-content select=\"euim-empty-list-placeholder\">\n  </ng-content>\n}\n\n\n\n", styles: [".euim-multiselect__toolbar{color:var(--eui-bc-neutral-100)}.euim-multiselect__toolbar--title{font:var(--eui-f-xl-bold)}\n"], dependencies: [{ kind: "component", type: i1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimMultiselectComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.10", type: EuimMultiselectComponent, selector: "euim-multiselect", inputs: { currentDataProvider: "currentDataProvider", toolbarTitle: "toolbarTitle", euimKeepSelection: ["euimKeepSelection", "euimKeepSelection", booleanAttribute] }, host: { properties: { "class": "this.className" } }, exportAs: ["euimMultiselect"], usesOnChanges: true, ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"light\" class=\"euim-multiselect__toolbar\">\n    <ng-content select=\"euim-multiselect-toolbar\"></ng-content>\n    <ion-toolbar color=\"light\">\n      <ng-content select=\"euim-multiselect-filter\"></ng-content>\n    </ion-toolbar>\n  </ion-toolbar>\n</ion-header>\n\n@if (currentDataProvider?.length > 0) {\n  <ng-content select=\"euim-multiselect-list\">\n  </ng-content>\n}\n\n@if (currentDataProvider?.length === 0) {\n  <ng-content select=\"euim-empty-list-placeholder\">\n  </ng-content>\n}\n\n\n\n", styles: [".euim-multiselect__toolbar{color:var(--eui-bc-neutral-100)}.euim-multiselect__toolbar--title{font:var(--eui-f-xl-bold-compact)}\n"], dependencies: [{ kind: "component", type: i3.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i3.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimMultiselectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimMultiselectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'euim-multiselect', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, exportAs: 'euimMultiselect', template: "<ion-header>\n  <ion-toolbar color=\"light\" class=\"euim-multiselect__toolbar\">\n    <ng-content select=\"euim-multiselect-toolbar\"></ng-content>\n    <ion-toolbar color=\"light\">\n      <ng-content select=\"euim-multiselect-filter\"></ng-content>\n    </ion-toolbar>\n  </ion-toolbar>\n</ion-header>\n\n@if (currentDataProvider?.length > 0) {\n  <ng-content select=\"euim-multiselect-list\">\n  </ng-content>\n}\n\n@if (currentDataProvider?.length === 0) {\n  <ng-content select=\"euim-empty-list-placeholder\">\n  </ng-content>\n}\n\n\n\n", styles: [".euim-multiselect__toolbar{color:var(--eui-bc-neutral-100)}.euim-multiselect__toolbar--title{font:var(--eui-f-xl-bold)}\n"] }]
+            args: [{ selector: 'euim-multiselect', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, exportAs: 'euimMultiselect', template: "<ion-header>\n  <ion-toolbar color=\"light\" class=\"euim-multiselect__toolbar\">\n    <ng-content select=\"euim-multiselect-toolbar\"></ng-content>\n    <ion-toolbar color=\"light\">\n      <ng-content select=\"euim-multiselect-filter\"></ng-content>\n    </ion-toolbar>\n  </ion-toolbar>\n</ion-header>\n\n@if (currentDataProvider?.length > 0) {\n  <ng-content select=\"euim-multiselect-list\">\n  </ng-content>\n}\n\n@if (currentDataProvider?.length === 0) {\n  <ng-content select=\"euim-empty-list-placeholder\">\n  </ng-content>\n}\n\n\n\n", styles: [".euim-multiselect__toolbar{color:var(--eui-bc-neutral-100)}.euim-multiselect__toolbar--title{font:var(--eui-f-xl-bold-compact)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { className: [{
                 type: HostBinding,
                 args: ['class']
@@ -2954,10 +3183,10 @@ class EuimMultiselectFilterComponent {
             this.multiselect.numberOfSelected = this.multiselect.countSelectedItems();
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimMultiselectFilterComponent, deps: [{ token: EuimMultiselectComponent }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: EuimMultiselectFilterComponent, selector: "euim-multiselect-filter", inputs: { filterByFieldsNames: "filterByFieldsNames" }, host: { properties: { "class": "this.className" } }, ngImport: i0, template: "<ion-searchbar (ionChange)=\"handleChange($event)\"\n               class=\"euim-multiselect-filter__searchbar\"></ion-searchbar>\n", styles: [".euim-multiselect-filter__searchbar input::placeholder{opacity:1!important;color:var(--eui-bc-neutral-80)!important}\n"], dependencies: [{ kind: "component", type: i1.IonSearchbar, selector: "ion-searchbar", inputs: ["animated", "autocapitalize", "autocomplete", "autocorrect", "cancelButtonIcon", "cancelButtonText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "maxlength", "minlength", "mode", "name", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value"] }, { kind: "directive", type: i1.TextValueAccessor, selector: "ion-input:not([type=number]),ion-textarea,ion-searchbar" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimMultiselectFilterComponent, deps: [{ token: EuimMultiselectComponent }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.10", type: EuimMultiselectFilterComponent, selector: "euim-multiselect-filter", inputs: { filterByFieldsNames: "filterByFieldsNames" }, host: { properties: { "class": "this.className" } }, ngImport: i0, template: "<ion-searchbar (ionChange)=\"handleChange($event)\"\n               class=\"euim-multiselect-filter__searchbar\"></ion-searchbar>\n", styles: [".euim-multiselect-filter__searchbar input::placeholder{opacity:1!important;color:var(--eui-bc-neutral-80)!important}\n"], dependencies: [{ kind: "component", type: i3.IonSearchbar, selector: "ion-searchbar", inputs: ["animated", "autocapitalize", "autocomplete", "autocorrect", "cancelButtonIcon", "cancelButtonText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "maxlength", "minlength", "mode", "name", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value"] }, { kind: "directive", type: i3.TextValueAccessor, selector: "ion-input:not([type=number]),ion-textarea,ion-searchbar" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimMultiselectFilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimMultiselectFilterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'euim-multiselect-filter', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ion-searchbar (ionChange)=\"handleChange($event)\"\n               class=\"euim-multiselect-filter__searchbar\"></ion-searchbar>\n", styles: [".euim-multiselect-filter__searchbar input::placeholder{opacity:1!important;color:var(--eui-bc-neutral-80)!important}\n"] }]
         }], ctorParameters: () => [{ type: EuimMultiselectComponent }], propDecorators: { className: [{
@@ -2988,10 +3217,10 @@ class EuimMultiselectAllDirective {
     get checked() {
         return this.euimMulti.selectAll;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimMultiselectAllDirective, deps: [{ token: EuimMultiselectComponent }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.5", type: EuimMultiselectAllDirective, selector: "[euimMultiselectAll]", host: { listeners: { "ionChange": "onIonChange($event)" }, properties: { "class": "this.className", "indeterminate": "this.indeterminate", "checked": "this.checked" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimMultiselectAllDirective, deps: [{ token: EuimMultiselectComponent }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.10", type: EuimMultiselectAllDirective, selector: "[euimMultiselectAll]", host: { listeners: { "ionChange": "onIonChange($event)" }, properties: { "class": "this.className", "indeterminate": "this.indeterminate", "checked": "this.checked" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimMultiselectAllDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimMultiselectAllDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[euimMultiselectAll]',
@@ -3015,10 +3244,10 @@ class EuimMultiselectListComponent {
         this.multiselect = multiselect;
         this.className = 'euim-multiselect-list';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimMultiselectListComponent, deps: [{ token: EuimMultiselectComponent }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: EuimMultiselectListComponent, selector: "euim-multiselect-list", host: { properties: { "class": "this.className" } }, ngImport: i0, template: "<ion-list>\n    <ng-content></ng-content>\n</ion-list>\n", styles: [""], dependencies: [{ kind: "component", type: i1.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimMultiselectListComponent, deps: [{ token: EuimMultiselectComponent }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.10", type: EuimMultiselectListComponent, selector: "euim-multiselect-list", host: { properties: { "class": "this.className" } }, ngImport: i0, template: "<ion-list>\n    <ng-content></ng-content>\n</ion-list>\n", styles: [""], dependencies: [{ kind: "component", type: i3.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimMultiselectListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimMultiselectListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'euim-multiselect-list', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ion-list>\n    <ng-content></ng-content>\n</ion-list>\n" }]
         }], ctorParameters: () => [{ type: EuimMultiselectComponent }], propDecorators: { className: [{
@@ -3054,10 +3283,10 @@ class EuimMultiselectSelectFieldDirective {
             this.euimMulti.numberOfSelected = this.euimMulti.countSelectedItems();
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimMultiselectSelectFieldDirective, deps: [{ token: EuimMultiselectComponent }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.5", type: EuimMultiselectSelectFieldDirective, selector: "[euimMultiselectSelectField]", inputs: { item: "item" }, host: { listeners: { "ionChange": "onIonChange($event)" }, properties: { "class": "this.className", "item": "this.item" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimMultiselectSelectFieldDirective, deps: [{ token: EuimMultiselectComponent }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.10", type: EuimMultiselectSelectFieldDirective, selector: "[euimMultiselectSelectField]", inputs: { item: "item" }, host: { listeners: { "ionChange": "onIonChange($event)" }, properties: { "class": "this.className", "item": "this.item" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimMultiselectSelectFieldDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimMultiselectSelectFieldDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[euimMultiselectSelectField]',
@@ -3084,10 +3313,10 @@ class EuimMultiselectInfoComponent {
     ngAfterContentChecked() {
         this.ref.detectChanges();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimMultiselectInfoComponent, deps: [{ token: EuimMultiselectComponent }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: EuimMultiselectInfoComponent, selector: "euim-multiselect-info", host: { properties: { "class": "this.className" } }, ngImport: i0, template: "{{ \"euim.multiselect-info\" | translate:\n    { number: multiselect.countSelectedItems(),\n    arr: multiselect.currentDataProvider?.length } }}\n\n", styles: [".euim-multiselect-info{font:var(--eui-f-m);color:var(--eui-bc-neutral-80)}\n"], dependencies: [{ kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimMultiselectInfoComponent, deps: [{ token: EuimMultiselectComponent }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.10", type: EuimMultiselectInfoComponent, selector: "euim-multiselect-info", host: { properties: { "class": "this.className" } }, ngImport: i0, template: "{{ \"euim.multiselect-info\" | translate:\n    { number: multiselect.countSelectedItems(),\n    arr: multiselect.currentDataProvider?.length } }}\n\n", styles: [".euim-multiselect-info{font:var(--eui-f-m);color:var(--eui-bc-neutral-80)}\n"], dependencies: [{ kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimMultiselectInfoComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimMultiselectInfoComponent, decorators: [{
             type: Component,
             args: [{ selector: 'euim-multiselect-info', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "{{ \"euim.multiselect-info\" | translate:\n    { number: multiselect.countSelectedItems(),\n    arr: multiselect.currentDataProvider?.length } }}\n\n", styles: [".euim-multiselect-info{font:var(--eui-f-m);color:var(--eui-bc-neutral-80)}\n"] }]
         }], ctorParameters: () => [{ type: EuimMultiselectComponent }, { type: i0.ChangeDetectorRef }], propDecorators: { className: [{
@@ -3110,10 +3339,10 @@ class EuimMultiselectToolbarComponent {
     onCancelClick() {
         this.cancel.emit(true);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimMultiselectToolbarComponent, deps: [{ token: EuimMultiselectComponent }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", type: EuimMultiselectToolbarComponent, selector: "euim-multiselect-toolbar", inputs: { toolbarTitle: "toolbarTitle", euimCustomRender: ["euimCustomRender", "euimCustomRender", booleanAttribute] }, outputs: { cancel: "cancel", confirm: "confirm" }, host: { properties: { "class": "this.className" } }, ngImport: i0, template: "@if (!euimCustomRender) {\n  <euim-toolbar\n    [hasBackButton]=\"false\" [hasSidebarTrigger]=\"false\" >\n    <ion-button (click)=\"onCancelClick()\">\n      <ion-icon name=\"close-sharp\" slot=\"icon-only\"></ion-icon>\n    </ion-button>\n    <ng-content select=\"ion-button\"></ng-content>\n    <euim-toolbar-title class=\"euim-multiselect__toolbar--title\">\n      {{toolbarTitle}}\n    </euim-toolbar-title>\n    <euim-toolbar-action-items>\n      <ion-button (click)=\"onConfirm()\">\n        <ion-icon name=\"checkmark-sharp\" slot=\"icon-only\"></ion-icon>\n      </ion-button>\n    </euim-toolbar-action-items>\n  </euim-toolbar>\n}\n@if (euimCustomRender) {\n  <ng-content></ng-content>\n}\n\n", dependencies: [{ kind: "component", type: i1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: EuimToolbarComponent, selector: "euim-toolbar", inputs: ["hasBackButton", "backButtonDefaultHref", "hasSidebarTrigger", "hasLanguageSelector"], outputs: ["backButtonClick"] }, { kind: "component", type: EuimToolbarTitleComponent, selector: "euim-toolbar-title" }, { kind: "component", type: EuimToolbarActionItemsComponent, selector: "euim-toolbar-action-items" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimMultiselectToolbarComponent, deps: [{ token: EuimMultiselectComponent }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.10", type: EuimMultiselectToolbarComponent, selector: "euim-multiselect-toolbar", inputs: { toolbarTitle: "toolbarTitle", euimCustomRender: ["euimCustomRender", "euimCustomRender", booleanAttribute] }, outputs: { cancel: "cancel", confirm: "confirm" }, host: { properties: { "class": "this.className" } }, ngImport: i0, template: "@if (!euimCustomRender) {\n  <euim-toolbar\n    [hasBackButton]=\"false\" [hasSidebarTrigger]=\"false\" >\n    <ion-button (click)=\"onCancelClick()\">\n      <ion-icon name=\"close-sharp\" slot=\"icon-only\"></ion-icon>\n    </ion-button>\n    <ng-content select=\"ion-button\"></ng-content>\n    <euim-toolbar-title class=\"euim-multiselect__toolbar--title\">\n      {{toolbarTitle}}\n    </euim-toolbar-title>\n    <euim-toolbar-action-items>\n      <ion-button (click)=\"onConfirm()\">\n        <ion-icon name=\"checkmark-sharp\" slot=\"icon-only\"></ion-icon>\n      </ion-button>\n    </euim-toolbar-action-items>\n  </euim-toolbar>\n}\n@if (euimCustomRender) {\n  <ng-content></ng-content>\n}\n\n", dependencies: [{ kind: "component", type: i3.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i3.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: EuimToolbarComponent, selector: "euim-toolbar", inputs: ["hasBackButton", "backButtonDefaultHref", "hasSidebarTrigger", "hasLanguageSelector"], outputs: ["backButtonClick"] }, { kind: "component", type: EuimToolbarTitleComponent, selector: "euim-toolbar-title" }, { kind: "component", type: EuimToolbarActionItemsComponent, selector: "euim-toolbar-action-items" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimMultiselectToolbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimMultiselectToolbarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'euim-multiselect-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "@if (!euimCustomRender) {\n  <euim-toolbar\n    [hasBackButton]=\"false\" [hasSidebarTrigger]=\"false\" >\n    <ion-button (click)=\"onCancelClick()\">\n      <ion-icon name=\"close-sharp\" slot=\"icon-only\"></ion-icon>\n    </ion-button>\n    <ng-content select=\"ion-button\"></ng-content>\n    <euim-toolbar-title class=\"euim-multiselect__toolbar--title\">\n      {{toolbarTitle}}\n    </euim-toolbar-title>\n    <euim-toolbar-action-items>\n      <ion-button (click)=\"onConfirm()\">\n        <ion-icon name=\"checkmark-sharp\" slot=\"icon-only\"></ion-icon>\n      </ion-button>\n    </euim-toolbar-action-items>\n  </euim-toolbar>\n}\n@if (euimCustomRender) {\n  <ng-content></ng-content>\n}\n\n" }]
         }], ctorParameters: () => [{ type: EuimMultiselectComponent }], propDecorators: { className: [{
@@ -3140,8 +3369,8 @@ const COMPONENTS$2 = [
     EuimMultiselectToolbarComponent,
 ];
 class EuimMultiselectModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimMultiselectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.5", ngImport: i0, type: EuimMultiselectModule, declarations: [EuimMultiselectComponent,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimMultiselectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.10", ngImport: i0, type: EuimMultiselectModule, declarations: [EuimMultiselectComponent,
             EuimMultiselectFilterComponent,
             EuimMultiselectListComponent,
             EuimMultiselectInfoComponent,
@@ -3160,7 +3389,7 @@ class EuimMultiselectModule {
             EuimMultiselectSelectFieldDirective,
             EuimMultiselectAllDirective,
             EuimMultiselectToolbarComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimMultiselectModule, imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimMultiselectModule, imports: [CommonModule,
             IonicModule,
             EuimSkeletonListItemModule,
             EuimToolbarComponentModule,
@@ -3168,7 +3397,7 @@ class EuimMultiselectModule {
             EuimEmptyListPlaceholderModule,
             TranslateModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimMultiselectModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimMultiselectModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -3238,11 +3467,11 @@ class EuimPdfViewerComponent {
         this.eventResult = event;
         this.zoom = this.eventResult.scale;
     }
-    onLoaded() {
-        // this.showDefaultError = false;
-        // this.loading = false;
-        // this.pdf = pdf;
-        // this.pdfNumPages = this.pdf.numPages;
+    onLoaded(pdf) {
+        this.showDefaultError = false;
+        this.loading = false;
+        this.pdf = pdf;
+        this.pdfNumPages = this.pdf.numPages;
     }
     onError() {
         this.showDefaultError = false;
@@ -3250,9 +3479,9 @@ class EuimPdfViewerComponent {
         this.errorMessage = 'File could not be loaded.';
     }
     onDownload() {
-        // this.pdf?.getData().then((u8) => {
-        //     this.downloadFile(u8, 'file.pdf');
-        // });
+        this.pdf?.getData().then((u8) => {
+            this.downloadFile(u8, 'file.pdf');
+        });
     }
     onZoomIn() {
         this.pinch.zoomIn();
@@ -3266,9 +3495,9 @@ class EuimPdfViewerComponent {
         this.pinch.resetZoom();
     }
     nextPage() {
-        // if (this.page < this.pdf.numPages) {
-        //     this.page++;
-        // }
+        if (this.page < this.pdf.numPages) {
+            this.page++;
+        }
     }
     prevPage() {
         if (this.page > 1) {
@@ -3308,13 +3537,13 @@ class EuimPdfViewerComponent {
             return throwError(() => err);
         }));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimPdfViewerComponent, deps: [{ token: i1.AlertController }, { token: i2$2.HttpClient }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", type: EuimPdfViewerComponent, selector: "euim-pdf-viewer", inputs: { url: "url", page: "page" }, viewQueries: [{ propertyName: "pinch", first: true, predicate: ["pinch"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "@if (loading || errorMessage) {\n<div>\n  @if (loading) {\n    <euim-spinner>\n      <div euimSpinnerMessage>{{'euim.pdf-viewer.SPINNER-MESSAGE' | translate }}</div>\n    </euim-spinner>\n  }\n  @if (errorMessage) {\n    <div>{{'euim.pdf-viewer.LOADING-PDF-ERROR-MESSAGE' | translate }}</div>\n  }\n</div>\n}\n\n<pinch-zoom [limit-zoom]=\"4\" [transition-duration]=\"50\" [zoomControlScale]=\"0.5\" (onZoomChange)=\"zoomChange($event)\" [wheelZoomFactor]=\"0.5\" [stepZoomFactor]=\"0.5\" #pinch>\n    <div style=\"display: block;width: 100%; height: 500px\">\n\n    </div>\n</pinch-zoom>\n\n<ion-footer>\n  <ion-toolbar color=\"primary\" class=\"euim-pdf-viewer__footer\">\n    <ion-buttons slot=\"start\">\n      <ion-button (click)=\"onDownload()\" [disabled]=\"!data\">\n        <ion-icon name=\"download-outline\" slot=\"icon-only\"></ion-icon>\n      </ion-button>\n    </ion-buttons>\n    <ion-buttons class=\"euim-pdf-viewer__footer-zoom-container\">\n      <ion-button (click)=\"onZoomOut()\" [disabled]=\"zoom === 1 || !data\">\n        <ion-icon name=\"remove-circle-outline\" slot=\"icon-only\"></ion-icon>\n      </ion-button>\n      <ion-button (click)=\"onResetZoom()\" [disabled]=\"zoom === 1 || !data\">\n          {{'euim.pdf-viewer.RESET-ZOOM' | translate }}\n      </ion-button>\n      <ion-button (click)=\"onZoomIn()\" [disabled]=\"zoom === 4 || !data\">\n        <ion-icon name=\"add-circle-outline\" slot=\"icon-only\"></ion-icon>\n      </ion-button>\n\n\n      <ion-button (click)=\"prevPage()\" [disabled]=\"page === 1 || !data\">\n          {{'euim.stepper.previous' | translate }}\n      </ion-button>\n      {{page}}\n      <ion-button (click)=\"nextPage()\" [disabled]=\"page === pdfNumPages || !data\">\n          {{'euim.stepper.next' | translate }}\n      </ion-button>\n\n    </ion-buttons>\n  </ion-toolbar>\n</ion-footer>\n", styles: [".euim-pdf-viewer__footer-zoom-container{display:flex;align-items:center;justify-content:center;flex-wrap:wrap}\n"], dependencies: [{ kind: "component", type: i1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i3.PinchZoomComponent, selector: "pinch-zoom, [pinch-zoom]", inputs: ["properties", "transition-duration", "transitionDuration", "double-tap", "doubleTap", "double-tap-scale", "doubleTapScale", "auto-zoom-out", "autoZoomOut", "limit-zoom", "limitZoom", "disabled", "disablePan", "overflow", "zoomControlScale", "disableZoomControl", "backgroundColor", "limitPan", "minPanScale", "minScale", "listeners", "wheel", "autoHeight", "stepZoomFactor", "wheelZoomFactor", "draggableImage"], outputs: ["onZoomChange"], exportAs: ["pinchZoom"] }, { kind: "component", type: EuimSpinnerComponent, selector: "euim-spinner" }, { kind: "component", type: EuimSpinnerMessageComponent, selector: "[euimSpinnerMessage]" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimPdfViewerComponent, deps: [{ token: i3.AlertController }, { token: i2$2.HttpClient }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.10", type: EuimPdfViewerComponent, selector: "euim-pdf-viewer", inputs: { url: "url", page: "page" }, viewQueries: [{ propertyName: "pinch", first: true, predicate: ["pinch"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "@if (loading || errorMessage) {\n<div>\n  @if (loading) {\n    <euim-spinner>\n      <div euimSpinnerMessage>{{'euim.pdf-viewer.SPINNER-MESSAGE' | translate }}</div>\n    </euim-spinner>\n  }\n  @if (errorMessage) {\n    <div>{{'euim.pdf-viewer.LOADING-PDF-ERROR-MESSAGE' | translate }}</div>\n  }\n</div>\n}\n\n<pinch-zoom [limit-zoom]=\"4\"\n            [transition-duration]=\"50\"\n            [zoomControlScale]=\"0.5\"\n            (onZoomChange)=\"zoomChange($event)\" [wheelZoomFactor]=\"0.5\" [stepZoomFactor]=\"0.5\" #pinch>\n    <div style=\"display: block;width: 100%; height: 500px\">\n        <pdf-viewer [src]=\"data\"\n                    [original-size]=\"false\"\n                    [zoom-scale]=\"'page-height'\"\n                    (after-load-complete)=\"onLoaded($event)\"\n                    (error)=\"onError()\"\n                    [(page)]=\"page\"\n                    [stick-to-page]=\"false\"\n                    [show-all]=\"false\"\n                    [render-text]=\"true\"\n                    style=\"width: 100%; height: 100%\">\n        </pdf-viewer>\n    </div>\n</pinch-zoom>\n\n<ion-footer>\n  <ion-toolbar color=\"primary\" class=\"euim-pdf-viewer__footer\">\n    <ion-buttons slot=\"start\">\n      <ion-button (click)=\"onDownload()\" [disabled]=\"!pdf || !data\">\n        <ion-icon name=\"download-outline\" slot=\"icon-only\"></ion-icon>\n      </ion-button>\n    </ion-buttons>\n    <ion-buttons class=\"euim-pdf-viewer__footer-zoom-container\">\n      <ion-button (click)=\"onZoomOut()\" [disabled]=\"zoom === 1 || !pdf || !data\">\n        <ion-icon name=\"remove-circle-outline\" slot=\"icon-only\"></ion-icon>\n      </ion-button>\n      <ion-button (click)=\"onResetZoom()\" [disabled]=\"zoom === 1 || !pdf || !data\">\n          {{'euim.pdf-viewer.RESET-ZOOM' | translate }}\n      </ion-button>\n      <ion-button (click)=\"onZoomIn()\" [disabled]=\"zoom === 4 || !pdf || !data\">\n        <ion-icon name=\"add-circle-outline\" slot=\"icon-only\"></ion-icon>\n      </ion-button>\n\n\n      <ion-button (click)=\"prevPage()\" [disabled]=\"page === 1 || !pdf || !data\">\n          {{'euim.stepper.previous' | translate }}\n      </ion-button>\n      {{page}}\n      <ion-button (click)=\"nextPage()\" [disabled]=\"page === pdfNumPages || !pdf || !data\">\n          {{'euim.stepper.next' | translate }}\n      </ion-button>\n\n    </ion-buttons>\n  </ion-toolbar>\n</ion-footer>\n", styles: [".euim-pdf-viewer__footer-zoom-container{display:flex;align-items:center;justify-content:center;flex-wrap:wrap}\n"], dependencies: [{ kind: "component", type: i3.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i3.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i3.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i3.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i3.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i3$1.PdfViewerComponent, selector: "pdf-viewer", inputs: ["src", "c-maps-url", "page", "render-text", "render-text-mode", "original-size", "show-all", "stick-to-page", "zoom", "zoom-scale", "rotation", "external-link-target", "autoresize", "fit-to-page", "show-borders"], outputs: ["after-load-complete", "page-rendered", "pages-initialized", "text-layer-rendered", "error", "on-progress", "pageChange"] }, { kind: "component", type: i4.PinchZoomComponent, selector: "pinch-zoom, [pinch-zoom]", inputs: ["properties", "transition-duration", "transitionDuration", "double-tap", "doubleTap", "double-tap-scale", "doubleTapScale", "auto-zoom-out", "autoZoomOut", "limit-zoom", "limitZoom", "disabled", "disablePan", "overflow", "zoomControlScale", "disableZoomControl", "backgroundColor", "limitPan", "minPanScale", "minScale", "listeners", "wheel", "autoHeight", "stepZoomFactor", "wheelZoomFactor", "draggableImage"], outputs: ["onZoomChange"], exportAs: ["pinchZoom"] }, { kind: "component", type: EuimSpinnerComponent, selector: "euim-spinner" }, { kind: "component", type: EuimSpinnerMessageComponent, selector: "[euimSpinnerMessage]" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimPdfViewerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimPdfViewerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'euim-pdf-viewer', encapsulation: ViewEncapsulation.None, template: "@if (loading || errorMessage) {\n<div>\n  @if (loading) {\n    <euim-spinner>\n      <div euimSpinnerMessage>{{'euim.pdf-viewer.SPINNER-MESSAGE' | translate }}</div>\n    </euim-spinner>\n  }\n  @if (errorMessage) {\n    <div>{{'euim.pdf-viewer.LOADING-PDF-ERROR-MESSAGE' | translate }}</div>\n  }\n</div>\n}\n\n<pinch-zoom [limit-zoom]=\"4\" [transition-duration]=\"50\" [zoomControlScale]=\"0.5\" (onZoomChange)=\"zoomChange($event)\" [wheelZoomFactor]=\"0.5\" [stepZoomFactor]=\"0.5\" #pinch>\n    <div style=\"display: block;width: 100%; height: 500px\">\n\n    </div>\n</pinch-zoom>\n\n<ion-footer>\n  <ion-toolbar color=\"primary\" class=\"euim-pdf-viewer__footer\">\n    <ion-buttons slot=\"start\">\n      <ion-button (click)=\"onDownload()\" [disabled]=\"!data\">\n        <ion-icon name=\"download-outline\" slot=\"icon-only\"></ion-icon>\n      </ion-button>\n    </ion-buttons>\n    <ion-buttons class=\"euim-pdf-viewer__footer-zoom-container\">\n      <ion-button (click)=\"onZoomOut()\" [disabled]=\"zoom === 1 || !data\">\n        <ion-icon name=\"remove-circle-outline\" slot=\"icon-only\"></ion-icon>\n      </ion-button>\n      <ion-button (click)=\"onResetZoom()\" [disabled]=\"zoom === 1 || !data\">\n          {{'euim.pdf-viewer.RESET-ZOOM' | translate }}\n      </ion-button>\n      <ion-button (click)=\"onZoomIn()\" [disabled]=\"zoom === 4 || !data\">\n        <ion-icon name=\"add-circle-outline\" slot=\"icon-only\"></ion-icon>\n      </ion-button>\n\n\n      <ion-button (click)=\"prevPage()\" [disabled]=\"page === 1 || !data\">\n          {{'euim.stepper.previous' | translate }}\n      </ion-button>\n      {{page}}\n      <ion-button (click)=\"nextPage()\" [disabled]=\"page === pdfNumPages || !data\">\n          {{'euim.stepper.next' | translate }}\n      </ion-button>\n\n    </ion-buttons>\n  </ion-toolbar>\n</ion-footer>\n", styles: [".euim-pdf-viewer__footer-zoom-container{display:flex;align-items:center;justify-content:center;flex-wrap:wrap}\n"] }]
-        }], ctorParameters: () => [{ type: i1.AlertController }, { type: i2$2.HttpClient }], propDecorators: { url: [{
+            args: [{ selector: 'euim-pdf-viewer', encapsulation: ViewEncapsulation.None, template: "@if (loading || errorMessage) {\n<div>\n  @if (loading) {\n    <euim-spinner>\n      <div euimSpinnerMessage>{{'euim.pdf-viewer.SPINNER-MESSAGE' | translate }}</div>\n    </euim-spinner>\n  }\n  @if (errorMessage) {\n    <div>{{'euim.pdf-viewer.LOADING-PDF-ERROR-MESSAGE' | translate }}</div>\n  }\n</div>\n}\n\n<pinch-zoom [limit-zoom]=\"4\"\n            [transition-duration]=\"50\"\n            [zoomControlScale]=\"0.5\"\n            (onZoomChange)=\"zoomChange($event)\" [wheelZoomFactor]=\"0.5\" [stepZoomFactor]=\"0.5\" #pinch>\n    <div style=\"display: block;width: 100%; height: 500px\">\n        <pdf-viewer [src]=\"data\"\n                    [original-size]=\"false\"\n                    [zoom-scale]=\"'page-height'\"\n                    (after-load-complete)=\"onLoaded($event)\"\n                    (error)=\"onError()\"\n                    [(page)]=\"page\"\n                    [stick-to-page]=\"false\"\n                    [show-all]=\"false\"\n                    [render-text]=\"true\"\n                    style=\"width: 100%; height: 100%\">\n        </pdf-viewer>\n    </div>\n</pinch-zoom>\n\n<ion-footer>\n  <ion-toolbar color=\"primary\" class=\"euim-pdf-viewer__footer\">\n    <ion-buttons slot=\"start\">\n      <ion-button (click)=\"onDownload()\" [disabled]=\"!pdf || !data\">\n        <ion-icon name=\"download-outline\" slot=\"icon-only\"></ion-icon>\n      </ion-button>\n    </ion-buttons>\n    <ion-buttons class=\"euim-pdf-viewer__footer-zoom-container\">\n      <ion-button (click)=\"onZoomOut()\" [disabled]=\"zoom === 1 || !pdf || !data\">\n        <ion-icon name=\"remove-circle-outline\" slot=\"icon-only\"></ion-icon>\n      </ion-button>\n      <ion-button (click)=\"onResetZoom()\" [disabled]=\"zoom === 1 || !pdf || !data\">\n          {{'euim.pdf-viewer.RESET-ZOOM' | translate }}\n      </ion-button>\n      <ion-button (click)=\"onZoomIn()\" [disabled]=\"zoom === 4 || !pdf || !data\">\n        <ion-icon name=\"add-circle-outline\" slot=\"icon-only\"></ion-icon>\n      </ion-button>\n\n\n      <ion-button (click)=\"prevPage()\" [disabled]=\"page === 1 || !pdf || !data\">\n          {{'euim.stepper.previous' | translate }}\n      </ion-button>\n      {{page}}\n      <ion-button (click)=\"nextPage()\" [disabled]=\"page === pdfNumPages || !pdf || !data\">\n          {{'euim.stepper.next' | translate }}\n      </ion-button>\n\n    </ion-buttons>\n  </ion-toolbar>\n</ion-footer>\n", styles: [".euim-pdf-viewer__footer-zoom-container{display:flex;align-items:center;justify-content:center;flex-wrap:wrap}\n"] }]
+        }], ctorParameters: () => [{ type: i3.AlertController }, { type: i2$2.HttpClient }], propDecorators: { url: [{
                 type: Input
             }], page: [{
                 type: Input
@@ -3327,26 +3556,29 @@ const COMPONENTS$1 = [
     EuimPdfViewerComponent,
 ];
 class EuimPdfViewerModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimPdfViewerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.5", ngImport: i0, type: EuimPdfViewerModule, declarations: [EuimPdfViewerComponent], imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimPdfViewerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.10", ngImport: i0, type: EuimPdfViewerModule, declarations: [EuimPdfViewerComponent], imports: [CommonModule,
             IonicModule,
+            PdfViewerModule,
             PinchZoomModule,
             EuimSpinnerComponentModule,
             TranslateModule,
             HttpClientModule], exports: [EuimPdfViewerComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimPdfViewerModule, imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimPdfViewerModule, imports: [CommonModule,
             IonicModule,
+            PdfViewerModule,
             PinchZoomModule,
             EuimSpinnerComponentModule,
             TranslateModule,
             HttpClientModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimPdfViewerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimPdfViewerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
                         CommonModule,
                         IonicModule,
+                        PdfViewerModule,
                         PinchZoomModule,
                         EuimSpinnerComponentModule,
                         TranslateModule,
@@ -3378,12 +3610,12 @@ class EuimAboutComponent {
     toggleQRCode() {
         this.showCode = !this.showCode;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimAboutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", type: EuimAboutComponent, selector: "euim-about", inputs: { version: "version", releaseDate: "releaseDate", qrCodeUrl: "qrCodeUrl", logoUrl: "logoUrl", appName: "appName" }, ngImport: i0, template: "<div class=\"euim-about\">\r\n  <ion-header>\r\n    <ion-toolbar color=\"primary\">\r\n      <euim-toolbar>\r\n        <euim-toolbar-title><strong>{{'euim.about.text' | translate }}</strong></euim-toolbar-title>\r\n        @if (qrCodeUrl) {\r\n        <euim-toolbar-action-items>\r\n          <ion-label (click)=\"toggleQRCode()\">\r\n            <strong>{{ showCode ? ('euim.about.hide.qrcode' | translate) : ('euim.about.show.qrcode' | translate) }}</strong>\r\n          </ion-label>\r\n        </euim-toolbar-action-items> }\r\n      </euim-toolbar>\r\n    </ion-toolbar>\r\n\r\n    <euim-header-details color=\"primary\">\r\n      <div euimHeaderDetailsIcon>\r\n        @if (showCode) {\r\n        <qrcode [qrdata]=\"qrCodeUrl\" [allowEmptyString]=\"true\" [cssClass]=\"'center'\" [elementType]=\"'svg'\"\r\n          [errorCorrectionLevel]=\"'M'\" [margin]=\"4\" [scale]=\"1\" [width]=\"160\"></qrcode> }\r\n        @if (!showCode) {\r\n        @if (logoUrl) { <img [src]=\"logoUrl\" class=\"euim-about__app-img\" alt=\"Image\" /> } }\r\n      </div>\r\n      @if (appName) {\r\n      <div euimHeaderDetailsTitle><strong>{{appName}}</strong></div> }\r\n      @if (version) {\r\n      <div euimHeaderDetailsMeta>{{'euim.about.version' | translate }} {{version}}</div> }\r\n      @if (releaseDate) {\r\n      <div euimHeaderDetailsMeta>{{'euim.about.builton' | translate }} {{releaseDate}}</div> }\r\n    </euim-header-details>\r\n  </ion-header>\r\n  <ng-content></ng-content>\r\n</div>", styles: [".euim-about euim-toolbar-title{font:var(--eui-f-xl)}.euim-about euim-toolbar-action-items ion-label{font:var(--eui-f-s)}.euim-about ion-label{margin-inline-end:var(--eui-s-m);cursor:pointer}.euim-about ion-icon{color:var(--eui-bc-neutral-100);margin-inline-end:var(--eui-s-m)}.euim-about__app-img{width:var(--eui-s-4xl);height:var(--eui-s-4xl);border-radius:var(--eui-s-m);border:calc(var(--eui-s-2xs) / 2) solid var(--eui-c-white)}.euim-about[slot=start]{margin-inline-end:var(--eui-s-m)}\n"], dependencies: [{ kind: "component", type: i1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2$3.QRCodeComponent, selector: "qrcode", inputs: ["allowEmptyString", "colorDark", "colorLight", "cssClass", "elementType", "errorCorrectionLevel", "margin", "qrdata", "scale", "version", "width"] }, { kind: "component", type: EuimToolbarComponent, selector: "euim-toolbar", inputs: ["hasBackButton", "backButtonDefaultHref", "hasSidebarTrigger", "hasLanguageSelector"], outputs: ["backButtonClick"] }, { kind: "component", type: EuimToolbarTitleComponent, selector: "euim-toolbar-title" }, { kind: "component", type: EuimToolbarActionItemsComponent, selector: "euim-toolbar-action-items" }, { kind: "component", type: EuimHeaderDetailsComponent, selector: "euim-header-details" }, { kind: "directive", type: EuimHeaderDetailsTitleDirective, selector: "[euimHeaderDetailsTitle]" }, { kind: "directive", type: EuimHeaderDetailsMetaDirective, selector: "[euimHeaderDetailsMeta]" }, { kind: "directive", type: EuimHeaderDetailsIconDirective, selector: "[euimHeaderDetailsIcon]" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimAboutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.10", type: EuimAboutComponent, selector: "euim-about", inputs: { version: "version", releaseDate: "releaseDate", qrCodeUrl: "qrCodeUrl", logoUrl: "logoUrl", appName: "appName" }, ngImport: i0, template: "<div class=\"euim-about\">\r\n  <ion-header>\r\n    <ion-toolbar color=\"branding\">\r\n      <euim-toolbar>\r\n        <euim-toolbar-title>{{'euim.about.text' | translate }}</euim-toolbar-title>\r\n        @if (qrCodeUrl) {\r\n        <euim-toolbar-action-items>\r\n          <ion-label (click)=\"toggleQRCode()\">\r\n            <strong>{{ showCode ? ('euim.about.hide.qrcode' | translate) : ('euim.about.show.qrcode' | translate) }}</strong>\r\n          </ion-label>\r\n        </euim-toolbar-action-items> }\r\n      </euim-toolbar>\r\n    </ion-toolbar>\r\n\r\n    <euim-header-details color=\"branding\">\r\n      <div euimHeaderDetailsIcon>\r\n        @if (showCode) {\r\n        <qrcode [qrdata]=\"qrCodeUrl\" [allowEmptyString]=\"true\" [cssClass]=\"'center'\" [elementType]=\"'svg'\"\r\n          [errorCorrectionLevel]=\"'M'\" [margin]=\"4\" [scale]=\"1\" [width]=\"160\"></qrcode> }\r\n        @if (!showCode) {\r\n        @if (logoUrl) { <img [src]=\"logoUrl\" class=\"euim-about__app-img\" alt=\"Image\" /> } }\r\n      </div>\r\n      @if (appName) {\r\n      <div euimHeaderDetailsTitle><strong>{{appName}}</strong></div> }\r\n      @if (version) {\r\n      <div euimHeaderDetailsMeta>{{'euim.about.version' | translate }} {{version}}</div> }\r\n      @if (releaseDate) {\r\n      <div euimHeaderDetailsMeta>{{'euim.about.builton' | translate }} {{releaseDate}}</div> }\r\n    </euim-header-details>\r\n  </ion-header>\r\n  <ng-content></ng-content>\r\n</div>\r\n", styles: [".euim-about euim-toolbar-title{font:var(--eui-f-l-bold-compact)}.euim-about euim-toolbar-action-items ion-label{font:var(--eui-f-s-compact)}.euim-about ion-label{margin-inline-end:var(--eui-s-m);cursor:pointer}.euim-about ion-icon{color:var(--eui-c-neutral);margin-inline-end:var(--eui-s-m)}.euim-about__app-img{width:var(--eui-s-4xl);height:var(--eui-s-4xl);border-radius:var(--eui-s-m);border:calc(var(--eui-s-2xs) / 2) solid var(--eui-c-white)}.euim-about[slot=start]{margin-inline-end:var(--eui-s-m)}\n"], dependencies: [{ kind: "component", type: i3.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i3.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i3.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2$3.QRCodeComponent, selector: "qrcode", inputs: ["allowEmptyString", "colorDark", "colorLight", "cssClass", "elementType", "errorCorrectionLevel", "margin", "qrdata", "scale", "version", "width"] }, { kind: "component", type: EuimToolbarComponent, selector: "euim-toolbar", inputs: ["hasBackButton", "backButtonDefaultHref", "hasSidebarTrigger", "hasLanguageSelector"], outputs: ["backButtonClick"] }, { kind: "component", type: EuimToolbarTitleComponent, selector: "euim-toolbar-title" }, { kind: "component", type: EuimToolbarActionItemsComponent, selector: "euim-toolbar-action-items" }, { kind: "component", type: EuimHeaderDetailsComponent, selector: "euim-header-details", inputs: ["hasBorderBottom"] }, { kind: "directive", type: EuimHeaderDetailsTitleDirective, selector: "[euimHeaderDetailsTitle]" }, { kind: "directive", type: EuimHeaderDetailsMetaDirective, selector: "[euimHeaderDetailsMeta]" }, { kind: "directive", type: EuimHeaderDetailsIconDirective, selector: "[euimHeaderDetailsIcon]" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimAboutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimAboutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'euim-about', encapsulation: ViewEncapsulation.None, template: "<div class=\"euim-about\">\r\n  <ion-header>\r\n    <ion-toolbar color=\"primary\">\r\n      <euim-toolbar>\r\n        <euim-toolbar-title><strong>{{'euim.about.text' | translate }}</strong></euim-toolbar-title>\r\n        @if (qrCodeUrl) {\r\n        <euim-toolbar-action-items>\r\n          <ion-label (click)=\"toggleQRCode()\">\r\n            <strong>{{ showCode ? ('euim.about.hide.qrcode' | translate) : ('euim.about.show.qrcode' | translate) }}</strong>\r\n          </ion-label>\r\n        </euim-toolbar-action-items> }\r\n      </euim-toolbar>\r\n    </ion-toolbar>\r\n\r\n    <euim-header-details color=\"primary\">\r\n      <div euimHeaderDetailsIcon>\r\n        @if (showCode) {\r\n        <qrcode [qrdata]=\"qrCodeUrl\" [allowEmptyString]=\"true\" [cssClass]=\"'center'\" [elementType]=\"'svg'\"\r\n          [errorCorrectionLevel]=\"'M'\" [margin]=\"4\" [scale]=\"1\" [width]=\"160\"></qrcode> }\r\n        @if (!showCode) {\r\n        @if (logoUrl) { <img [src]=\"logoUrl\" class=\"euim-about__app-img\" alt=\"Image\" /> } }\r\n      </div>\r\n      @if (appName) {\r\n      <div euimHeaderDetailsTitle><strong>{{appName}}</strong></div> }\r\n      @if (version) {\r\n      <div euimHeaderDetailsMeta>{{'euim.about.version' | translate }} {{version}}</div> }\r\n      @if (releaseDate) {\r\n      <div euimHeaderDetailsMeta>{{'euim.about.builton' | translate }} {{releaseDate}}</div> }\r\n    </euim-header-details>\r\n  </ion-header>\r\n  <ng-content></ng-content>\r\n</div>", styles: [".euim-about euim-toolbar-title{font:var(--eui-f-xl)}.euim-about euim-toolbar-action-items ion-label{font:var(--eui-f-s)}.euim-about ion-label{margin-inline-end:var(--eui-s-m);cursor:pointer}.euim-about ion-icon{color:var(--eui-bc-neutral-100);margin-inline-end:var(--eui-s-m)}.euim-about__app-img{width:var(--eui-s-4xl);height:var(--eui-s-4xl);border-radius:var(--eui-s-m);border:calc(var(--eui-s-2xs) / 2) solid var(--eui-c-white)}.euim-about[slot=start]{margin-inline-end:var(--eui-s-m)}\n"] }]
+            args: [{ selector: 'euim-about', encapsulation: ViewEncapsulation.None, template: "<div class=\"euim-about\">\r\n  <ion-header>\r\n    <ion-toolbar color=\"branding\">\r\n      <euim-toolbar>\r\n        <euim-toolbar-title>{{'euim.about.text' | translate }}</euim-toolbar-title>\r\n        @if (qrCodeUrl) {\r\n        <euim-toolbar-action-items>\r\n          <ion-label (click)=\"toggleQRCode()\">\r\n            <strong>{{ showCode ? ('euim.about.hide.qrcode' | translate) : ('euim.about.show.qrcode' | translate) }}</strong>\r\n          </ion-label>\r\n        </euim-toolbar-action-items> }\r\n      </euim-toolbar>\r\n    </ion-toolbar>\r\n\r\n    <euim-header-details color=\"branding\">\r\n      <div euimHeaderDetailsIcon>\r\n        @if (showCode) {\r\n        <qrcode [qrdata]=\"qrCodeUrl\" [allowEmptyString]=\"true\" [cssClass]=\"'center'\" [elementType]=\"'svg'\"\r\n          [errorCorrectionLevel]=\"'M'\" [margin]=\"4\" [scale]=\"1\" [width]=\"160\"></qrcode> }\r\n        @if (!showCode) {\r\n        @if (logoUrl) { <img [src]=\"logoUrl\" class=\"euim-about__app-img\" alt=\"Image\" /> } }\r\n      </div>\r\n      @if (appName) {\r\n      <div euimHeaderDetailsTitle><strong>{{appName}}</strong></div> }\r\n      @if (version) {\r\n      <div euimHeaderDetailsMeta>{{'euim.about.version' | translate }} {{version}}</div> }\r\n      @if (releaseDate) {\r\n      <div euimHeaderDetailsMeta>{{'euim.about.builton' | translate }} {{releaseDate}}</div> }\r\n    </euim-header-details>\r\n  </ion-header>\r\n  <ng-content></ng-content>\r\n</div>\r\n", styles: [".euim-about euim-toolbar-title{font:var(--eui-f-l-bold-compact)}.euim-about euim-toolbar-action-items ion-label{font:var(--eui-f-s-compact)}.euim-about ion-label{margin-inline-end:var(--eui-s-m);cursor:pointer}.euim-about ion-icon{color:var(--eui-c-neutral);margin-inline-end:var(--eui-s-m)}.euim-about__app-img{width:var(--eui-s-4xl);height:var(--eui-s-4xl);border-radius:var(--eui-s-m);border:calc(var(--eui-s-2xs) / 2) solid var(--eui-c-white)}.euim-about[slot=start]{margin-inline-end:var(--eui-s-m)}\n"] }]
         }], propDecorators: { version: [{
                 type: Input
             }], releaseDate: [{
@@ -3400,12 +3632,12 @@ class EuimChangelogComponent {
     constructor() {
         this.changeLogs = [];
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimChangelogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", type: EuimChangelogComponent, selector: "euim-changelog", inputs: { changeLogs: "changeLogs" }, ngImport: i0, template: "<div class=\"euim-changelog\">\n    <ion-header>\n        <ion-toolbar color=\"primary\">\n            <euim-toolbar>\n                <euim-toolbar-title>{{ 'euim.about.changelog' | translate }}</euim-toolbar-title>\n            </euim-toolbar>\n        </ion-toolbar>\n    </ion-header>\n    <ion-content [fullscreen]=\"true\" scroll-y=\"false\">\n        <ion-list>\n            <ion-accordion-group [multiple]=\"true\" value=\"about\">\n                @for (logItem of changeLogs; track $index) {\n                    <ion-accordion [value]=\"$index === 0 ? 'about' : logItem.version\">\n                        <ion-item slot=\"header\">\n                            <ion-icon name=\"build-outline\" slot=\"start\"></ion-icon>\n                            <div class=\"euim-changelog__euimVersionTitle\" euimLabel euimLabelTitle>\n                                <strong>{{ logItem.version }}</strong>\n                            </div>\n                        </ion-item>\n                        <ion-list slot=\"content\">\n                            @for (section of logItem.sections; track section) {\n                                @if (section.items && section.items.length > 0) {\n                                    <ion-item-divider>\n                                        <ion-label>{{ section.name }}</ion-label>\n                                    </ion-item-divider>\n                                    <ion-item lines=\"none\">\n                                        <ul>\n                                            @for (item of section.items; track item) {\n                                                <li>{{ item }}</li>\n                                            }\n                                        </ul>\n                                    </ion-item>\n                                }\n                            }\n                        </ion-list>\n                    </ion-accordion>\n                }\n            </ion-accordion-group>\n        </ion-list>\n    </ion-content>\n</div>\n", styles: [".euim-changelog__euimVersionTitle{font:var(--eui-f-s);color:var(--eui-bc-neutral-100)}.euim-changelog ul{padding:var(--eui-s-xs) var(--eui-s-m);margin:0}.euim-changelog li{font:var(--eui-f-m);color:var(--eui-bc-neutral-100)}.euim-changelog ion-item ion-icon{color:var(--eui-bc-neutral-100)}.euim-changelog ion-item ion-icon[slot=start]{margin-inline-end:var(--eui-s-m)}.euim-changelog ion-item ion-icon[slot=end]{color:var(--eui-bc-neutral-80)}.euim-changelog ion-accordion.accordion-expanded ion-item[slot=header]{--border-width: 0 0 1px 0 !important}.euim-changelog ion-list{flex:1;display:flex;flex-direction:column}.euim-changelog ion-content ion-list{max-height:calc(100vh - var(--eui-base-spacing-4xl));overflow-y:auto;overflow-x:hidden}\n"], dependencies: [{ kind: "component", type: i1.IonAccordion, selector: "ion-accordion", inputs: ["disabled", "mode", "readonly", "toggleIcon", "toggleIconSlot", "value"] }, { kind: "component", type: i1.IonAccordionGroup, selector: "ion-accordion-group", inputs: ["animated", "disabled", "expand", "mode", "multiple", "readonly", "value"] }, { kind: "component", type: i1.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i1.IonItemDivider, selector: "ion-item-divider", inputs: ["color", "mode", "sticky"] }, { kind: "component", type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: EuimToolbarComponent, selector: "euim-toolbar", inputs: ["hasBackButton", "backButtonDefaultHref", "hasSidebarTrigger", "hasLanguageSelector"], outputs: ["backButtonClick"] }, { kind: "component", type: EuimToolbarTitleComponent, selector: "euim-toolbar-title" }, { kind: "component", type: EuimLabelComponent, selector: "div[euimLabel], p[euimLabel], span[euimLabel], euim-label", inputs: ["euimLabelTruncateWithLines", "euimLabelTitle", "euimLabelSubTitle", "euimLabelMeta", "euimLabelTruncate", "euimLabelTextWrap"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimChangelogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.10", type: EuimChangelogComponent, selector: "euim-changelog", inputs: { changeLogs: "changeLogs" }, ngImport: i0, template: "<div class=\"euim-changelog\">\n    <ion-header>\n        <ion-toolbar color=\"branding\">\n            <euim-toolbar>\n                <euim-toolbar-title>{{ 'euim.about.changelog' | translate }}</euim-toolbar-title>\n            </euim-toolbar>\n        </ion-toolbar>\n    </ion-header>\n    <ion-content [fullscreen]=\"true\" scroll-y=\"false\">\n        <ion-list>\n            <ion-accordion-group [multiple]=\"true\" value=\"about\">\n                @for (logItem of changeLogs; track $index) {\n                    <ion-accordion [value]=\"$index === 0 ? 'about' : logItem.version\">\n                        <ion-item slot=\"header\">\n                            <ion-icon name=\"build-outline\" slot=\"start\"></ion-icon>\n                            <div class=\"euim-changelog__euimVersionTitle\" euimLabel euimLabelTitle>\n                                <strong>{{ logItem.version }}</strong>\n                            </div>\n                        </ion-item>\n                        <ion-list slot=\"content\">\n                            @for (section of logItem.sections; track section) {\n                                @if (section.items && section.items.length > 0) {\n                                    <ion-item-divider>\n                                        <ion-label>{{ section.name }}</ion-label>\n                                    </ion-item-divider>\n                                    <ion-item lines=\"none\">\n                                        <ul>\n                                            @for (item of section.items; track item) {\n                                                <li>{{ item }}</li>\n                                            }\n                                        </ul>\n                                    </ion-item>\n                                }\n                            }\n                        </ion-list>\n                    </ion-accordion>\n                }\n            </ion-accordion-group>\n        </ion-list>\n    </ion-content>\n</div>\n", styles: [".euim-changelog__euimVersionTitle{font:var(--eui-f-s-compact);color:var(--eui-c-neutral)}.euim-changelog ul{padding:var(--eui-s-xs) var(--eui-s-m);margin:0}.euim-changelog li{font:var(--eui-f-m-compact);color:var(--eui-c-neutral)}.euim-changelog ion-item ion-icon{color:var(--eui-c-neutral)}.euim-changelog ion-item ion-icon[slot=start]{margin-inline-end:var(--eui-s-m)}.euim-changelog ion-item ion-icon[slot=end]{color:var(--eui-c-neutral-light)}.euim-changelog ion-list{flex:1;display:flex;flex-direction:column}.euim-changelog ion-content ion-list{max-height:calc(100vh - var(--eui-s-4xl));overflow-y:auto;overflow-x:hidden}.euim-changelog ion-accordion ion-item{--background: var(--eui-c-neutral-min)}\n"], dependencies: [{ kind: "component", type: i3.IonAccordion, selector: "ion-accordion", inputs: ["disabled", "mode", "readonly", "toggleIcon", "toggleIconSlot", "value"] }, { kind: "component", type: i3.IonAccordionGroup, selector: "ion-accordion-group", inputs: ["animated", "disabled", "expand", "mode", "multiple", "readonly", "value"] }, { kind: "component", type: i3.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i3.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i3.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i3.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i3.IonItemDivider, selector: "ion-item-divider", inputs: ["color", "mode", "sticky"] }, { kind: "component", type: i3.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i3.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i3.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: EuimToolbarComponent, selector: "euim-toolbar", inputs: ["hasBackButton", "backButtonDefaultHref", "hasSidebarTrigger", "hasLanguageSelector"], outputs: ["backButtonClick"] }, { kind: "component", type: EuimToolbarTitleComponent, selector: "euim-toolbar-title" }, { kind: "component", type: EuimLabelComponent, selector: "div[euimLabel], p[euimLabel], span[euimLabel], euim-label", inputs: ["euimLabelTruncateWithLines", "euimLabelTitle", "euimLabelSubTitle", "euimLabelMeta", "euimLabelTruncate", "euimLabelTextWrap"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimChangelogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimChangelogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'euim-changelog', encapsulation: ViewEncapsulation.None, template: "<div class=\"euim-changelog\">\n    <ion-header>\n        <ion-toolbar color=\"primary\">\n            <euim-toolbar>\n                <euim-toolbar-title>{{ 'euim.about.changelog' | translate }}</euim-toolbar-title>\n            </euim-toolbar>\n        </ion-toolbar>\n    </ion-header>\n    <ion-content [fullscreen]=\"true\" scroll-y=\"false\">\n        <ion-list>\n            <ion-accordion-group [multiple]=\"true\" value=\"about\">\n                @for (logItem of changeLogs; track $index) {\n                    <ion-accordion [value]=\"$index === 0 ? 'about' : logItem.version\">\n                        <ion-item slot=\"header\">\n                            <ion-icon name=\"build-outline\" slot=\"start\"></ion-icon>\n                            <div class=\"euim-changelog__euimVersionTitle\" euimLabel euimLabelTitle>\n                                <strong>{{ logItem.version }}</strong>\n                            </div>\n                        </ion-item>\n                        <ion-list slot=\"content\">\n                            @for (section of logItem.sections; track section) {\n                                @if (section.items && section.items.length > 0) {\n                                    <ion-item-divider>\n                                        <ion-label>{{ section.name }}</ion-label>\n                                    </ion-item-divider>\n                                    <ion-item lines=\"none\">\n                                        <ul>\n                                            @for (item of section.items; track item) {\n                                                <li>{{ item }}</li>\n                                            }\n                                        </ul>\n                                    </ion-item>\n                                }\n                            }\n                        </ion-list>\n                    </ion-accordion>\n                }\n            </ion-accordion-group>\n        </ion-list>\n    </ion-content>\n</div>\n", styles: [".euim-changelog__euimVersionTitle{font:var(--eui-f-s);color:var(--eui-bc-neutral-100)}.euim-changelog ul{padding:var(--eui-s-xs) var(--eui-s-m);margin:0}.euim-changelog li{font:var(--eui-f-m);color:var(--eui-bc-neutral-100)}.euim-changelog ion-item ion-icon{color:var(--eui-bc-neutral-100)}.euim-changelog ion-item ion-icon[slot=start]{margin-inline-end:var(--eui-s-m)}.euim-changelog ion-item ion-icon[slot=end]{color:var(--eui-bc-neutral-80)}.euim-changelog ion-accordion.accordion-expanded ion-item[slot=header]{--border-width: 0 0 1px 0 !important}.euim-changelog ion-list{flex:1;display:flex;flex-direction:column}.euim-changelog ion-content ion-list{max-height:calc(100vh - var(--eui-base-spacing-4xl));overflow-y:auto;overflow-x:hidden}\n"] }]
+            args: [{ selector: 'euim-changelog', encapsulation: ViewEncapsulation.None, template: "<div class=\"euim-changelog\">\n    <ion-header>\n        <ion-toolbar color=\"branding\">\n            <euim-toolbar>\n                <euim-toolbar-title>{{ 'euim.about.changelog' | translate }}</euim-toolbar-title>\n            </euim-toolbar>\n        </ion-toolbar>\n    </ion-header>\n    <ion-content [fullscreen]=\"true\" scroll-y=\"false\">\n        <ion-list>\n            <ion-accordion-group [multiple]=\"true\" value=\"about\">\n                @for (logItem of changeLogs; track $index) {\n                    <ion-accordion [value]=\"$index === 0 ? 'about' : logItem.version\">\n                        <ion-item slot=\"header\">\n                            <ion-icon name=\"build-outline\" slot=\"start\"></ion-icon>\n                            <div class=\"euim-changelog__euimVersionTitle\" euimLabel euimLabelTitle>\n                                <strong>{{ logItem.version }}</strong>\n                            </div>\n                        </ion-item>\n                        <ion-list slot=\"content\">\n                            @for (section of logItem.sections; track section) {\n                                @if (section.items && section.items.length > 0) {\n                                    <ion-item-divider>\n                                        <ion-label>{{ section.name }}</ion-label>\n                                    </ion-item-divider>\n                                    <ion-item lines=\"none\">\n                                        <ul>\n                                            @for (item of section.items; track item) {\n                                                <li>{{ item }}</li>\n                                            }\n                                        </ul>\n                                    </ion-item>\n                                }\n                            }\n                        </ion-list>\n                    </ion-accordion>\n                }\n            </ion-accordion-group>\n        </ion-list>\n    </ion-content>\n</div>\n", styles: [".euim-changelog__euimVersionTitle{font:var(--eui-f-s-compact);color:var(--eui-c-neutral)}.euim-changelog ul{padding:var(--eui-s-xs) var(--eui-s-m);margin:0}.euim-changelog li{font:var(--eui-f-m-compact);color:var(--eui-c-neutral)}.euim-changelog ion-item ion-icon{color:var(--eui-c-neutral)}.euim-changelog ion-item ion-icon[slot=start]{margin-inline-end:var(--eui-s-m)}.euim-changelog ion-item ion-icon[slot=end]{color:var(--eui-c-neutral-light)}.euim-changelog ion-list{flex:1;display:flex;flex-direction:column}.euim-changelog ion-content ion-list{max-height:calc(100vh - var(--eui-s-4xl));overflow-y:auto;overflow-x:hidden}.euim-changelog ion-accordion ion-item{--background: var(--eui-c-neutral-min)}\n"] }]
         }], propDecorators: { changeLogs: [{
                 type: Input
             }] } });
@@ -3413,18 +3645,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
 class EuimHelpSupportComponent {
     constructor(router) {
         this.router = router;
-        /**
-         * @deprecated will be removed in eUI Mobile v18. Please use {@link helpAndSupportItems} instead
-         */
-        this.helpContacts = { contacts: [] };
-        /**
-         * @deprecated will be removed in eUI Mobile v18. Please use {@link helpAndSupportItems} instead
-         */
-        this.supportMaterials = { materials: [] };
-        /**
-         * @deprecated will be removed in eUI Mobile v18
-         */
-        this.alertInfos = {};
         this.helpAndSupportItems = [];
         this.className = 'euim-help-support';
     }
@@ -3468,19 +3688,13 @@ class EuimHelpSupportComponent {
         }
         return '_blank';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimHelpSupportComponent, deps: [{ token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", type: EuimHelpSupportComponent, selector: "euim-help-support", inputs: { helpContacts: "helpContacts", supportMaterials: "supportMaterials", alertInfos: "alertInfos", helpAndSupportItems: "helpAndSupportItems" }, host: { properties: { "class": "this.className" } }, ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <euim-toolbar>\n      <euim-toolbar-title>{{'euim.about.help.support' | translate }}</euim-toolbar-title>\n    </euim-toolbar>\n  </ion-toolbar>\n    @if (alertInfos.title) {\n        <euim-alert-message color=\"primary\">\n            <ion-icon name=\"person-circle\" slotStart></ion-icon>\n            {{ alertInfos.title }}\n\n            @if (alertInfos.btnLink) {\n                <ion-button [href]=\"alertInfos.btnLink\" slotEnd size=\"small\" fill=\"outline\">\n                    <strong>{{ alertInfos.btnTitle }}</strong>\n                </ion-button>\n            }\n        </euim-alert-message>\n    }\n    <ng-content select=\"[headerSection]\"></ng-content>\n</ion-header>\n\n@if (helpAndSupportItems.length > 0 || helpContacts.contacts.length > 0 || supportMaterials.materials.length > 0) {\n  <ion-list>\n      @for (helpSupportItem of helpAndSupportItems; track $index;) {\n          @if (helpSupportItem.sectionTitle) {\n              <ion-item-divider>\n                <ion-label>{{ helpSupportItem.sectionTitle }}</ion-label>\n              </ion-item-divider>\n          }\n\n        @for (item of helpSupportItem.items; track item;) {\n\n            <ion-item [lines]=\"item.hasBottomLine ? 'insert' : 'none'\" (click)=\"onItemClick(item, undefined, undefined)\">\n                @if (item.startIcon) {\n                    <euim-avatar-icon fill=\"solid\" slot=\"start\">\n                        <ion-icon [name]=\"item.startIcon\"></ion-icon>\n                    </euim-avatar-icon>\n                }\n                @if (item.title || item.subtitle) {\n                    <ion-label>\n                        @if (item.title) {\n                            <a [ngClass]=\"getLinkClass(item)\">\n                                @if (!isLinkSharp(item)) {\n                                <div class=\"euim-help-support__title\">{{ item.title }}</div>\n                                }\n                                @if (isLinkSharp(item)) {\n                                <div euimLabel euimLabelTitle>{{ item.title }}</div>\n                                }\n                            </a>\n                        }\n                        @if (item.subtitle) {\n                            <div euimLabel euimLabelSubTitle>\n                                {{ item.subtitle }}\n                            </div>\n                        }\n                    </ion-label>\n                }\n                @if (item.endIcon) {\n                    <ion-buttons>\n                        <ion-button fill=\"clear\">\n                            <ion-icon [name]=\"item.endIcon\" slot=\"icon-only\"></ion-icon>\n                        </ion-button>\n                    </ion-buttons>\n                }\n            </ion-item>\n        }\n      }\n      @if (helpContacts.contacts.length > 0) {\n          @if (helpContacts.sectionTitle) {\n          <ion-item-divider>\n              <ion-label>{{ helpContacts.sectionTitle }}</ion-label>\n          </ion-item-divider>\n          }\n          @for (contact of helpContacts.contacts; track contact; let isLast = $last) {\n              <ion-item [lines]=\"isLast ? 'none' : ''\" (click)=\"onItemClick(undefined, contact.linkType, contact.linkTitle)\">\n                  @if (contact.icon) {\n                  <euim-avatar-icon  fill=\"solid\" slot=\"start\">\n                      <ion-icon [name]=\"contact.icon\"></ion-icon>\n                  </euim-avatar-icon>\n                  }\n                  @if (contact.linkTitle || contact.subtitle) {\n                  <ion-label>\n                      @if (contact.linkTitle) {\n                      <a class=\"euim-help-support__contact-link\">\n                          <div class=\"euim-help-support__title\">{{contact.linkTitle}}</div>\n                      </a>\n                      }\n                      @if (contact.subtitle) {\n                      <div euimLabel euimLabelSubTitle>{{contact.subtitle}}</div>\n                      }\n                  </ion-label>\n                  }\n              </ion-item>\n          }\n      }\n\n      @if (supportMaterials.materials.length > 0) {\n          @if (supportMaterials.sectionTitle) {\n          <ion-item-divider>\n              <ion-label>{{ supportMaterials.sectionTitle }}</ion-label>\n          </ion-item-divider>\n          }\n          @for (material of supportMaterials.materials; track material) {\n              <ion-item lines=\"none\" (click)=\"onItemClick(material, undefined, undefined)\">\n                  @if (material.icon) {\n                  <euim-avatar-icon  fill=\"solid\" slot=\"start\">\n                      <ion-icon [name]=\"material.icon\"></ion-icon>\n                  </euim-avatar-icon>\n                  }\n                  <ion-label>\n                      @if (material.title) {\n                      <div euimLabel euimLabelTitle>{{material.title}}</div>\n                      }\n                      @if (material.subtitle) {\n                      <div euimLabel euimLabelSubTitle>{{material.subtitle}}</div>\n                      }\n                  </ion-label>\n                  <ion-buttons>\n                      <ion-button fill=\"clear\" >\n                          <ion-icon name=\"link-sharp\" slot=\"icon-only\"></ion-icon>\n                      </ion-button>\n                  </ion-buttons>\n              </ion-item>\n          }\n      }\n  </ion-list>\n}\n<ng-content></ng-content>\n\n\n", styles: [".euim-help-support__title{font:var(--eui-f-m);color:var(--eui-bc-primary-100)}.euim-help-support__contact-link--no-underlined{text-decoration:none}.euim-help-support ion-item{position:relative;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i1.IonItemDivider, selector: "ion-item-divider", inputs: ["color", "mode", "sticky"] }, { kind: "component", type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: EuimToolbarComponent, selector: "euim-toolbar", inputs: ["hasBackButton", "backButtonDefaultHref", "hasSidebarTrigger", "hasLanguageSelector"], outputs: ["backButtonClick"] }, { kind: "component", type: EuimToolbarTitleComponent, selector: "euim-toolbar-title" }, { kind: "component", type: EuimLabelComponent, selector: "div[euimLabel], p[euimLabel], span[euimLabel], euim-label", inputs: ["euimLabelTruncateWithLines", "euimLabelTitle", "euimLabelSubTitle", "euimLabelMeta", "euimLabelTruncate", "euimLabelTextWrap"] }, { kind: "component", type: EuimAvatarIconComponent, selector: "euim-avatar-icon", inputs: ["color", "size", "fill", "variant", "borderColor"] }, { kind: "component", type: EuimAlertMessageComponent, selector: "euim-alert-message", inputs: ["euimLabelTruncate", "hasIcon", "isCloseable"], outputs: ["euimClose"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimHelpSupportComponent, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.10", type: EuimHelpSupportComponent, selector: "euim-help-support", inputs: { helpAndSupportItems: "helpAndSupportItems" }, host: { properties: { "class": "this.className" } }, ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"branding\">\n    <euim-toolbar>\n      <euim-toolbar-title>{{'euim.about.help.support' | translate }}</euim-toolbar-title>\n    </euim-toolbar>\n  </ion-toolbar>\n    <ng-content select=\"[headerSection]\"></ng-content>\n</ion-header>\n\n@if (helpAndSupportItems.length > 0) {\n  <ion-list>\n      @for (helpSupportItem of helpAndSupportItems; track $index;) {\n          @if (helpSupportItem.sectionTitle) {\n              <ion-item-divider>\n                <ion-label>{{ helpSupportItem.sectionTitle }}</ion-label>\n              </ion-item-divider>\n          }\n\n        @for (item of helpSupportItem.items; track item;) {\n\n            <ion-item [lines]=\"item.hasBottomLine ? 'insert' : 'none'\" (click)=\"onItemClick(item, undefined, undefined)\">\n                @if (item.startIcon) {\n                    <euim-avatar fill=\"solid\" slot=\"start\">\n                        <euim-avatar-icon>\n                            <ion-icon [name]=\"item.startIcon\"></ion-icon>\n                        </euim-avatar-icon>\n                    </euim-avatar>\n                }\n                @if (item.title || item.subtitle) {\n                    <ion-label>\n                        @if (item.title) {\n                            <a [ngClass]=\"getLinkClass(item)\">\n                                @if (!isLinkSharp(item)) {\n                                <div class=\"euim-help-support__title\">{{ item.title }}</div>\n                                }\n                                @if (isLinkSharp(item)) {\n                                <div euimLabel euimLabelTitle>{{ item.title }}</div>\n                                }\n                            </a>\n                        }\n                        @if (item.subtitle) {\n                            <div euimLabel euimLabelSubTitle>\n                                {{ item.subtitle }}\n                            </div>\n                        }\n                    </ion-label>\n                }\n                @if (item.endIcon) {\n                    <ion-buttons>\n                        <ion-button fill=\"clear\">\n                            <ion-icon [name]=\"item.endIcon\" slot=\"icon-only\"></ion-icon>\n                        </ion-button>\n                    </ion-buttons>\n                }\n            </ion-item>\n        }\n      }\n  </ion-list>\n}\n<ng-content></ng-content>\n\n\n", styles: [".euim-help-support__title{font:var(--eui-f-m-compact);color:var(--eui-c-primary)}.euim-help-support__contact-link--no-underlined{text-decoration:none}.euim-help-support ion-item{position:relative;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i3.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i3.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i3.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i3.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i3.IonItemDivider, selector: "ion-item-divider", inputs: ["color", "mode", "sticky"] }, { kind: "component", type: i3.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i3.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i3.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: EuimToolbarComponent, selector: "euim-toolbar", inputs: ["hasBackButton", "backButtonDefaultHref", "hasSidebarTrigger", "hasLanguageSelector"], outputs: ["backButtonClick"] }, { kind: "component", type: EuimToolbarTitleComponent, selector: "euim-toolbar-title" }, { kind: "component", type: EuimLabelComponent, selector: "div[euimLabel], p[euimLabel], span[euimLabel], euim-label", inputs: ["euimLabelTruncateWithLines", "euimLabelTitle", "euimLabelSubTitle", "euimLabelMeta", "euimLabelTruncate", "euimLabelTextWrap"] }, { kind: "component", type: EuimAvatarComponent, selector: "euim-avatar", inputs: ["color", "size", "fill", "variant", "borderColor"] }, { kind: "component", type: EuimAvatarIconComponent, selector: "euim-avatar-icon" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimHelpSupportComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimHelpSupportComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'euim-help-support', encapsulation: ViewEncapsulation.None, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <euim-toolbar>\n      <euim-toolbar-title>{{'euim.about.help.support' | translate }}</euim-toolbar-title>\n    </euim-toolbar>\n  </ion-toolbar>\n    @if (alertInfos.title) {\n        <euim-alert-message color=\"primary\">\n            <ion-icon name=\"person-circle\" slotStart></ion-icon>\n            {{ alertInfos.title }}\n\n            @if (alertInfos.btnLink) {\n                <ion-button [href]=\"alertInfos.btnLink\" slotEnd size=\"small\" fill=\"outline\">\n                    <strong>{{ alertInfos.btnTitle }}</strong>\n                </ion-button>\n            }\n        </euim-alert-message>\n    }\n    <ng-content select=\"[headerSection]\"></ng-content>\n</ion-header>\n\n@if (helpAndSupportItems.length > 0 || helpContacts.contacts.length > 0 || supportMaterials.materials.length > 0) {\n  <ion-list>\n      @for (helpSupportItem of helpAndSupportItems; track $index;) {\n          @if (helpSupportItem.sectionTitle) {\n              <ion-item-divider>\n                <ion-label>{{ helpSupportItem.sectionTitle }}</ion-label>\n              </ion-item-divider>\n          }\n\n        @for (item of helpSupportItem.items; track item;) {\n\n            <ion-item [lines]=\"item.hasBottomLine ? 'insert' : 'none'\" (click)=\"onItemClick(item, undefined, undefined)\">\n                @if (item.startIcon) {\n                    <euim-avatar-icon fill=\"solid\" slot=\"start\">\n                        <ion-icon [name]=\"item.startIcon\"></ion-icon>\n                    </euim-avatar-icon>\n                }\n                @if (item.title || item.subtitle) {\n                    <ion-label>\n                        @if (item.title) {\n                            <a [ngClass]=\"getLinkClass(item)\">\n                                @if (!isLinkSharp(item)) {\n                                <div class=\"euim-help-support__title\">{{ item.title }}</div>\n                                }\n                                @if (isLinkSharp(item)) {\n                                <div euimLabel euimLabelTitle>{{ item.title }}</div>\n                                }\n                            </a>\n                        }\n                        @if (item.subtitle) {\n                            <div euimLabel euimLabelSubTitle>\n                                {{ item.subtitle }}\n                            </div>\n                        }\n                    </ion-label>\n                }\n                @if (item.endIcon) {\n                    <ion-buttons>\n                        <ion-button fill=\"clear\">\n                            <ion-icon [name]=\"item.endIcon\" slot=\"icon-only\"></ion-icon>\n                        </ion-button>\n                    </ion-buttons>\n                }\n            </ion-item>\n        }\n      }\n      @if (helpContacts.contacts.length > 0) {\n          @if (helpContacts.sectionTitle) {\n          <ion-item-divider>\n              <ion-label>{{ helpContacts.sectionTitle }}</ion-label>\n          </ion-item-divider>\n          }\n          @for (contact of helpContacts.contacts; track contact; let isLast = $last) {\n              <ion-item [lines]=\"isLast ? 'none' : ''\" (click)=\"onItemClick(undefined, contact.linkType, contact.linkTitle)\">\n                  @if (contact.icon) {\n                  <euim-avatar-icon  fill=\"solid\" slot=\"start\">\n                      <ion-icon [name]=\"contact.icon\"></ion-icon>\n                  </euim-avatar-icon>\n                  }\n                  @if (contact.linkTitle || contact.subtitle) {\n                  <ion-label>\n                      @if (contact.linkTitle) {\n                      <a class=\"euim-help-support__contact-link\">\n                          <div class=\"euim-help-support__title\">{{contact.linkTitle}}</div>\n                      </a>\n                      }\n                      @if (contact.subtitle) {\n                      <div euimLabel euimLabelSubTitle>{{contact.subtitle}}</div>\n                      }\n                  </ion-label>\n                  }\n              </ion-item>\n          }\n      }\n\n      @if (supportMaterials.materials.length > 0) {\n          @if (supportMaterials.sectionTitle) {\n          <ion-item-divider>\n              <ion-label>{{ supportMaterials.sectionTitle }}</ion-label>\n          </ion-item-divider>\n          }\n          @for (material of supportMaterials.materials; track material) {\n              <ion-item lines=\"none\" (click)=\"onItemClick(material, undefined, undefined)\">\n                  @if (material.icon) {\n                  <euim-avatar-icon  fill=\"solid\" slot=\"start\">\n                      <ion-icon [name]=\"material.icon\"></ion-icon>\n                  </euim-avatar-icon>\n                  }\n                  <ion-label>\n                      @if (material.title) {\n                      <div euimLabel euimLabelTitle>{{material.title}}</div>\n                      }\n                      @if (material.subtitle) {\n                      <div euimLabel euimLabelSubTitle>{{material.subtitle}}</div>\n                      }\n                  </ion-label>\n                  <ion-buttons>\n                      <ion-button fill=\"clear\" >\n                          <ion-icon name=\"link-sharp\" slot=\"icon-only\"></ion-icon>\n                      </ion-button>\n                  </ion-buttons>\n              </ion-item>\n          }\n      }\n  </ion-list>\n}\n<ng-content></ng-content>\n\n\n", styles: [".euim-help-support__title{font:var(--eui-f-m);color:var(--eui-bc-primary-100)}.euim-help-support__contact-link--no-underlined{text-decoration:none}.euim-help-support ion-item{position:relative;cursor:pointer}\n"] }]
-        }], ctorParameters: () => [{ type: i1$2.Router }], propDecorators: { helpContacts: [{
-                type: Input
-            }], supportMaterials: [{
-                type: Input
-            }], alertInfos: [{
-                type: Input
-            }], helpAndSupportItems: [{
+            args: [{ selector: 'euim-help-support', encapsulation: ViewEncapsulation.None, template: "<ion-header>\n  <ion-toolbar color=\"branding\">\n    <euim-toolbar>\n      <euim-toolbar-title>{{'euim.about.help.support' | translate }}</euim-toolbar-title>\n    </euim-toolbar>\n  </ion-toolbar>\n    <ng-content select=\"[headerSection]\"></ng-content>\n</ion-header>\n\n@if (helpAndSupportItems.length > 0) {\n  <ion-list>\n      @for (helpSupportItem of helpAndSupportItems; track $index;) {\n          @if (helpSupportItem.sectionTitle) {\n              <ion-item-divider>\n                <ion-label>{{ helpSupportItem.sectionTitle }}</ion-label>\n              </ion-item-divider>\n          }\n\n        @for (item of helpSupportItem.items; track item;) {\n\n            <ion-item [lines]=\"item.hasBottomLine ? 'insert' : 'none'\" (click)=\"onItemClick(item, undefined, undefined)\">\n                @if (item.startIcon) {\n                    <euim-avatar fill=\"solid\" slot=\"start\">\n                        <euim-avatar-icon>\n                            <ion-icon [name]=\"item.startIcon\"></ion-icon>\n                        </euim-avatar-icon>\n                    </euim-avatar>\n                }\n                @if (item.title || item.subtitle) {\n                    <ion-label>\n                        @if (item.title) {\n                            <a [ngClass]=\"getLinkClass(item)\">\n                                @if (!isLinkSharp(item)) {\n                                <div class=\"euim-help-support__title\">{{ item.title }}</div>\n                                }\n                                @if (isLinkSharp(item)) {\n                                <div euimLabel euimLabelTitle>{{ item.title }}</div>\n                                }\n                            </a>\n                        }\n                        @if (item.subtitle) {\n                            <div euimLabel euimLabelSubTitle>\n                                {{ item.subtitle }}\n                            </div>\n                        }\n                    </ion-label>\n                }\n                @if (item.endIcon) {\n                    <ion-buttons>\n                        <ion-button fill=\"clear\">\n                            <ion-icon [name]=\"item.endIcon\" slot=\"icon-only\"></ion-icon>\n                        </ion-button>\n                    </ion-buttons>\n                }\n            </ion-item>\n        }\n      }\n  </ion-list>\n}\n<ng-content></ng-content>\n\n\n", styles: [".euim-help-support__title{font:var(--eui-f-m-compact);color:var(--eui-c-primary)}.euim-help-support__contact-link--no-underlined{text-decoration:none}.euim-help-support ion-item{position:relative;cursor:pointer}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.Router }], propDecorators: { helpAndSupportItems: [{
                 type: Input
             }], className: [{
                 type: HostBinding,
@@ -3495,12 +3709,12 @@ class EuimOpenSourceLicencesComponent {
     emitItemClick(itemName) {
         this.clickItem.emit([itemName]);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimOpenSourceLicencesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", type: EuimOpenSourceLicencesComponent, selector: "euim-opensource-licences", inputs: { items: "items" }, outputs: { clickItem: "clickItem" }, ngImport: i0, template: "<div class=\"euim-opensource-licences\">\r\n    <ion-header>\r\n        <ion-toolbar color=\"primary\">\r\n            <euim-toolbar>\r\n                <euim-toolbar-title>{{'euim.about.opensource.licences'  | translate}}</euim-toolbar-title>\r\n            </euim-toolbar>\r\n        </ion-toolbar>\r\n    </ion-header>\r\n    <ion-list>\r\n        @for (item of items; track item) {\r\n        <ion-item class=\"euim-about__item\" button [detail]=\"true\" (click)=\"emitItemClick(item.name)\">\r\n            <ion-icon name=\"ribbon-outline\" slot=\"start\"></ion-icon>\r\n            <div euimLabel class=\"euim-about__label\">{{ item.name }}</div>\r\n        </ion-item> }\r\n    </ion-list>\r\n</div>\r\n", styles: [".euim-opensource-licences ion-item ion-icon{margin-inline-end:var(--eui-s-m);color:var(--eui-bc-neutral-100)}.euim-opensource-licences ion-item ion-icon__item{cursor:pointer!important}\n"], dependencies: [{ kind: "component", type: i1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i1.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: EuimToolbarComponent, selector: "euim-toolbar", inputs: ["hasBackButton", "backButtonDefaultHref", "hasSidebarTrigger", "hasLanguageSelector"], outputs: ["backButtonClick"] }, { kind: "component", type: EuimToolbarTitleComponent, selector: "euim-toolbar-title" }, { kind: "component", type: EuimLabelComponent, selector: "div[euimLabel], p[euimLabel], span[euimLabel], euim-label", inputs: ["euimLabelTruncateWithLines", "euimLabelTitle", "euimLabelSubTitle", "euimLabelMeta", "euimLabelTruncate", "euimLabelTextWrap"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimOpenSourceLicencesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.10", type: EuimOpenSourceLicencesComponent, selector: "euim-opensource-licences", inputs: { items: "items" }, outputs: { clickItem: "clickItem" }, ngImport: i0, template: "<div class=\"euim-opensource-licences\">\r\n    <ion-header>\r\n        <ion-toolbar color=\"branding\">\r\n            <euim-toolbar>\r\n                <euim-toolbar-title>{{'euim.about.opensource.licences'  | translate}}</euim-toolbar-title>\r\n            </euim-toolbar>\r\n        </ion-toolbar>\r\n    </ion-header>\r\n    <ion-list>\r\n        @for (item of items; track item) {\r\n        <ion-item class=\"euim-about__item\" button [detail]=\"true\" (click)=\"emitItemClick(item.name)\">\r\n            <ion-icon name=\"ribbon-outline\" slot=\"start\"></ion-icon>\r\n            <div euimLabel class=\"euim-about__label\">{{ item.name }}</div>\r\n        </ion-item> }\r\n    </ion-list>\r\n</div>\r\n", styles: [".euim-opensource-licences ion-item ion-icon{margin-inline-end:var(--eui-s-m);color:var(--eui-c-neutral)}.euim-opensource-licences ion-item ion-icon__item{cursor:pointer!important}\n"], dependencies: [{ kind: "component", type: i3.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i3.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i3.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i3.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i3.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: EuimToolbarComponent, selector: "euim-toolbar", inputs: ["hasBackButton", "backButtonDefaultHref", "hasSidebarTrigger", "hasLanguageSelector"], outputs: ["backButtonClick"] }, { kind: "component", type: EuimToolbarTitleComponent, selector: "euim-toolbar-title" }, { kind: "component", type: EuimLabelComponent, selector: "div[euimLabel], p[euimLabel], span[euimLabel], euim-label", inputs: ["euimLabelTruncateWithLines", "euimLabelTitle", "euimLabelSubTitle", "euimLabelMeta", "euimLabelTruncate", "euimLabelTextWrap"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimOpenSourceLicencesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimOpenSourceLicencesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'euim-opensource-licences', encapsulation: ViewEncapsulation.None, template: "<div class=\"euim-opensource-licences\">\r\n    <ion-header>\r\n        <ion-toolbar color=\"primary\">\r\n            <euim-toolbar>\r\n                <euim-toolbar-title>{{'euim.about.opensource.licences'  | translate}}</euim-toolbar-title>\r\n            </euim-toolbar>\r\n        </ion-toolbar>\r\n    </ion-header>\r\n    <ion-list>\r\n        @for (item of items; track item) {\r\n        <ion-item class=\"euim-about__item\" button [detail]=\"true\" (click)=\"emitItemClick(item.name)\">\r\n            <ion-icon name=\"ribbon-outline\" slot=\"start\"></ion-icon>\r\n            <div euimLabel class=\"euim-about__label\">{{ item.name }}</div>\r\n        </ion-item> }\r\n    </ion-list>\r\n</div>\r\n", styles: [".euim-opensource-licences ion-item ion-icon{margin-inline-end:var(--eui-s-m);color:var(--eui-bc-neutral-100)}.euim-opensource-licences ion-item ion-icon__item{cursor:pointer!important}\n"] }]
+            args: [{ selector: 'euim-opensource-licences', encapsulation: ViewEncapsulation.None, template: "<div class=\"euim-opensource-licences\">\r\n    <ion-header>\r\n        <ion-toolbar color=\"branding\">\r\n            <euim-toolbar>\r\n                <euim-toolbar-title>{{'euim.about.opensource.licences'  | translate}}</euim-toolbar-title>\r\n            </euim-toolbar>\r\n        </ion-toolbar>\r\n    </ion-header>\r\n    <ion-list>\r\n        @for (item of items; track item) {\r\n        <ion-item class=\"euim-about__item\" button [detail]=\"true\" (click)=\"emitItemClick(item.name)\">\r\n            <ion-icon name=\"ribbon-outline\" slot=\"start\"></ion-icon>\r\n            <div euimLabel class=\"euim-about__label\">{{ item.name }}</div>\r\n        </ion-item> }\r\n    </ion-list>\r\n</div>\r\n", styles: [".euim-opensource-licences ion-item ion-icon{margin-inline-end:var(--eui-s-m);color:var(--eui-c-neutral)}.euim-opensource-licences ion-item ion-icon__item{cursor:pointer!important}\n"] }]
         }], propDecorators: { items: [{
                 type: Input
             }], clickItem: [{
@@ -3515,13 +3729,13 @@ class EuimAboutContentLoadingComponent {
     ngOnInit() {
         this.sanitizedUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.webUrl);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimAboutContentLoadingComponent, deps: [{ token: i1$3.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", type: EuimAboutContentLoadingComponent, selector: "euim-about-content-loading", inputs: { webUrl: "webUrl", toolbarTitle: "toolbarTitle" }, ngImport: i0, template: "<div class=\"euim-about-content-loading\">\r\n    <ion-header>\r\n        <ion-toolbar color=\"primary\">\r\n            <euim-toolbar>\r\n                <euim-toolbar-title>{{toolbarTitle}}</euim-toolbar-title>\r\n            </euim-toolbar>\r\n        </ion-toolbar>\r\n    </ion-header>\r\n    <div class=\"euim-about-content-loading__content\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n    @if(webUrl) {\r\n    <ion-content [fullscreen]=\"true\" scroll-y=\"false\">\r\n        <div class=\"euim-about-content-loading__iframe-container\">\r\n            <iframe [src]=\"sanitizedUrl\" class=\"euim-about-content-loading__iframe\" scrolling=\"no\" allowfullscreen></iframe>\r\n        </div>\r\n    </ion-content> }\r\n</div>", styles: [".euim-about-content-loading__iframe-container{position:relative;width:100%;height:calc(100vh - 56px)}.euim-about-content-loading__iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none}.euim-about-content-loading__content *{display:block;padding:var(--eui-s-2xs) var(--eui-s-m);font:var(--eui-f-s);color:var(--eui-bc-neutral-100)}\n"], dependencies: [{ kind: "component", type: i1.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: EuimToolbarComponent, selector: "euim-toolbar", inputs: ["hasBackButton", "backButtonDefaultHref", "hasSidebarTrigger", "hasLanguageSelector"], outputs: ["backButtonClick"] }, { kind: "component", type: EuimToolbarTitleComponent, selector: "euim-toolbar-title" }], encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimAboutContentLoadingComponent, deps: [{ token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.10", type: EuimAboutContentLoadingComponent, selector: "euim-about-content-loading", inputs: { webUrl: "webUrl", toolbarTitle: "toolbarTitle" }, ngImport: i0, template: "<div class=\"euim-about-content-loading\">\r\n    <ion-header>\r\n        <ion-toolbar color=\"branding\">\r\n            <euim-toolbar>\r\n                <euim-toolbar-title>{{toolbarTitle}}</euim-toolbar-title>\r\n            </euim-toolbar>\r\n        </ion-toolbar>\r\n    </ion-header>\r\n    <div class=\"euim-about-content-loading__content\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n    @if(webUrl) {\r\n    <ion-content [fullscreen]=\"true\" scroll-y=\"false\">\r\n        <div class=\"euim-about-content-loading__iframe-container\">\r\n            <iframe [src]=\"sanitizedUrl\" class=\"euim-about-content-loading__iframe\" scrolling=\"no\" allowfullscreen></iframe>\r\n        </div>\r\n    </ion-content> }\r\n</div>\r\n", styles: [".euim-about-content-loading__iframe-container{position:relative;width:100%;height:calc(100vh - 56px)}.euim-about-content-loading__iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none}.euim-about-content-loading__content *{display:block;padding:var(--eui-s-2xs) var(--eui-s-m);font:var(--eui-f-s-compact);color:var(--eui-c-neutral)}\n"], dependencies: [{ kind: "component", type: i3.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i3.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i3.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: EuimToolbarComponent, selector: "euim-toolbar", inputs: ["hasBackButton", "backButtonDefaultHref", "hasSidebarTrigger", "hasLanguageSelector"], outputs: ["backButtonClick"] }, { kind: "component", type: EuimToolbarTitleComponent, selector: "euim-toolbar-title" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimAboutContentLoadingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimAboutContentLoadingComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'euim-about-content-loading', encapsulation: ViewEncapsulation.None, template: "<div class=\"euim-about-content-loading\">\r\n    <ion-header>\r\n        <ion-toolbar color=\"primary\">\r\n            <euim-toolbar>\r\n                <euim-toolbar-title>{{toolbarTitle}}</euim-toolbar-title>\r\n            </euim-toolbar>\r\n        </ion-toolbar>\r\n    </ion-header>\r\n    <div class=\"euim-about-content-loading__content\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n    @if(webUrl) {\r\n    <ion-content [fullscreen]=\"true\" scroll-y=\"false\">\r\n        <div class=\"euim-about-content-loading__iframe-container\">\r\n            <iframe [src]=\"sanitizedUrl\" class=\"euim-about-content-loading__iframe\" scrolling=\"no\" allowfullscreen></iframe>\r\n        </div>\r\n    </ion-content> }\r\n</div>", styles: [".euim-about-content-loading__iframe-container{position:relative;width:100%;height:calc(100vh - 56px)}.euim-about-content-loading__iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none}.euim-about-content-loading__content *{display:block;padding:var(--eui-s-2xs) var(--eui-s-m);font:var(--eui-f-s);color:var(--eui-bc-neutral-100)}\n"] }]
-        }], ctorParameters: () => [{ type: i1$3.DomSanitizer }], propDecorators: { webUrl: [{
+            args: [{ selector: 'euim-about-content-loading', encapsulation: ViewEncapsulation.None, template: "<div class=\"euim-about-content-loading\">\r\n    <ion-header>\r\n        <ion-toolbar color=\"branding\">\r\n            <euim-toolbar>\r\n                <euim-toolbar-title>{{toolbarTitle}}</euim-toolbar-title>\r\n            </euim-toolbar>\r\n        </ion-toolbar>\r\n    </ion-header>\r\n    <div class=\"euim-about-content-loading__content\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n    @if(webUrl) {\r\n    <ion-content [fullscreen]=\"true\" scroll-y=\"false\">\r\n        <div class=\"euim-about-content-loading__iframe-container\">\r\n            <iframe [src]=\"sanitizedUrl\" class=\"euim-about-content-loading__iframe\" scrolling=\"no\" allowfullscreen></iframe>\r\n        </div>\r\n    </ion-content> }\r\n</div>\r\n", styles: [".euim-about-content-loading__iframe-container{position:relative;width:100%;height:calc(100vh - 56px)}.euim-about-content-loading__iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none}.euim-about-content-loading__content *{display:block;padding:var(--eui-s-2xs) var(--eui-s-m);font:var(--eui-f-s-compact);color:var(--eui-c-neutral)}\n"] }]
+        }], ctorParameters: () => [{ type: i1$2.DomSanitizer }], propDecorators: { webUrl: [{
                 type: Input
             }], toolbarTitle: [{
                 type: Input
@@ -3535,8 +3749,8 @@ const COMPONENTS = [
     EuimAboutContentLoadingComponent,
 ];
 class EuimAboutModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimAboutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.5", ngImport: i0, type: EuimAboutModule, declarations: [EuimAboutComponent,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimAboutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.10", ngImport: i0, type: EuimAboutModule, declarations: [EuimAboutComponent,
             EuimChangelogComponent,
             EuimOpenSourceLicencesComponent,
             EuimHelpSupportComponent,
@@ -3546,7 +3760,7 @@ class EuimAboutModule {
             EuimToolbarComponentModule,
             EuimHeaderDetailsModule,
             EuimLabelModule,
-            EuimAvatarIconModule,
+            EuimAvatarModule,
             EuimAlertMessageModule,
             PinchZoomModule,
             TranslateModule,
@@ -3555,19 +3769,19 @@ class EuimAboutModule {
             EuimOpenSourceLicencesComponent,
             EuimHelpSupportComponent,
             EuimAboutContentLoadingComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimAboutModule, imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimAboutModule, imports: [CommonModule,
             IonicModule,
             QRCodeModule,
             EuimToolbarComponentModule,
             EuimHeaderDetailsModule,
             EuimLabelModule,
-            EuimAvatarIconModule,
+            EuimAvatarModule,
             EuimAlertMessageModule,
             PinchZoomModule,
             TranslateModule,
             RouterModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimAboutModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimAboutModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -3577,7 +3791,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
                         EuimToolbarComponentModule,
                         EuimHeaderDetailsModule,
                         EuimLabelModule,
-                        EuimAvatarIconModule,
+                        EuimAvatarModule,
                         EuimAlertMessageModule,
                         PinchZoomModule,
                         TranslateModule,
@@ -3600,9 +3814,10 @@ class EuimToolbarDatepickerComponent {
     get cssClasses() {
         return this.getCssClasses();
     }
-    constructor(baseStatesDirective, translate) {
+    constructor(baseStatesDirective, translate, modalController) {
         this.baseStatesDirective = baseStatesDirective;
         this.translate = translate;
+        this.modalController = modalController;
         this.icon = 'calendar-clear-sharp';
         this.prevBtnClick = new EventEmitter();
         this.nextBtnClick = new EventEmitter();
@@ -3614,6 +3829,12 @@ class EuimToolbarDatepickerComponent {
         this.currentDate = new Date();
         this.formattedDate = this.currentDate.toLocaleDateString();
     }
+    async dismissModal() {
+        const topModal = await this.modalController.getTop();
+        if (topModal) {
+            await this.modalController.dismiss();
+        }
+    }
     get dateTimeId() {
         return this._dateTimeId;
     }
@@ -3658,14 +3879,24 @@ class EuimToolbarDatepickerComponent {
         }
     }
     selectPrevDate() {
-        this.currentDate.setDate(this.currentDate.getDate() - 1);
+        if (this.selectDateBy === 'week') {
+            this.currentDate.setDate(this.currentDate.getDate() - 7);
+        }
+        else {
+            this.currentDate.setDate(this.currentDate.getDate() - 1);
+        }
         this.formattedDate = this.currentDate.toLocaleDateString();
         this.formatDateAndWeekDay();
         this.selectedDate = this.currentDate.toISOString();
         this.prevBtnClick.emit(this.currentDate);
     }
     selectNextDate() {
-        this.currentDate.setDate(this.currentDate.getDate() + 1);
+        if (this.selectDateBy === 'week') {
+            this.currentDate.setDate(this.currentDate.getDate() + 7);
+        }
+        else {
+            this.currentDate.setDate(this.currentDate.getDate() + 1);
+        }
         this.formattedDate = this.currentDate.toLocaleDateString();
         this.formatDateAndWeekDay();
         this.selectedDate = this.currentDate.toISOString();
@@ -3679,10 +3910,10 @@ class EuimToolbarDatepickerComponent {
     formatDateAndWeekDay() {
         this.weekDayName = this.weekdays[this.currentDate.getDay()];
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimToolbarDatepickerComponent, deps: [{ token: BaseStatesDirective }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", type: EuimToolbarDatepickerComponent, selector: "euim-toolbar-datepicker", inputs: { icon: "icon", title: "title", subTitle: "subTitle", euimPrevBtnDisabled: ["euimPrevBtnDisabled", "euimPrevBtnDisabled", booleanAttribute], euimNextBtnDisabled: ["euimNextBtnDisabled", "euimNextBtnDisabled", booleanAttribute], euimReadOnly: ["euimReadOnly", "euimReadOnly", booleanAttribute] }, outputs: { prevBtnClick: "prevBtnClick", nextBtnClick: "nextBtnClick", dateChanged: "dateChanged" }, host: { properties: { "class": "this.cssClasses" } }, hostDirectives: [{ directive: BaseStatesDirective, inputs: ["color", "color"] }], ngImport: i0, template: "<ion-item class=\"euim-toolbar-datepicker__item\"\n           color=\"primary\">\n    <euim-avatar-icon  fill=\"clear\" slot=\"start\" >\n        <ion-icon [name]=\"icon\"\n                  class=\"euim-toolbar-datepicker__calendar\"></ion-icon>\n    </euim-avatar-icon>\n    @if (!euimReadOnly){\n    <ion-datetime-button class=\"euim-toolbar-datepicker__datetime-button--hidden\"\n                         [datetime]=\"dateTimeId\">\n    </ion-datetime-button>\n    }\n    <div class=\"euim-toolbar-datepicker__datetime-button\" [id]=\"modalId\" [style.cursor]=\"(!euimReadOnly) ? 'pointer' : 'auto'\">\n        <ion-label class=\"euim-toolbar-datepicker__date\"\n                   position=\"fixed\">\n            <div class=\"euim-toolbar-datepicker__title\"\n                 euimLabel\n                 euimLabelTitle\n                 disabled=\"euimReadOnly\">{{!title ? weekDayName : title}}</div>\n\n            <div euimLabel euimLabelSubTitle\n                 disabled=\"euimReadOnly\">{{!subTitle ? formattedDate : subTitle}}</div>\n        </ion-label>\n        @if (!euimReadOnly){\n            <ion-icon class=\"euim-toolbar-datepicker__datetime-caret\"\n                      name=\"caret-down-sharp\"\n                      color=\"light\"></ion-icon>\n        }\n    </div>\n\n    @if (!euimReadOnly) {\n        <ion-buttons slot=\"end\">\n            <ion-button (click)=\"selectPrevDate()\"\n                        [disabled] = \"euimPrevBtnDisabled\"\n                        shape=\"round\"\n                        class=\"euim-toolbar-datepicker__nav-button\">\n                <ion-icon name=\"chevron-back-circle-sharp\"\n                          color=\"light\">\n                </ion-icon>\n            </ion-button>\n            <ion-button\n                        (click)=\"selectNextDate()\"\n                        [disabled]=\"euimNextBtnDisabled\"\n                        shape=\"round\"\n                        class=\"euim-toolbar-datepicker__nav-button euim-toolbar-datepicker__nav-button--next\">\n                <ion-icon name=\"chevron-forward-circle-sharp\"\n                          color=\"light\"></ion-icon>\n            </ion-button>\n        </ion-buttons>\n    }\n</ion-item>\n\n@if (!euimReadOnly){\n<ion-modal [keepContentsMounted]=\"true\"\n           [trigger]=\"modalId\">\n    <ng-template>\n        <ion-datetime\n            [showDefaultButtons]=\"true\"\n            (ionChange)=\"calendarDateChanged($event)\"\n            size=\"cover\"\n            [id]=\"dateTimeId\"\n            [locale]=\"currentLang\"\n            [(ngModel)]=\"selectedDate\"\n            presentation=\"date\"></ion-datetime>\n    </ng-template>\n</ion-modal>\n}\n", styles: [".euim-toolbar-datepicker{--inner-padding-end: var(--eui-s-xs)}.euim-toolbar-datepicker ion-item:has(ion-buttons ion-button ion-icon){--inner-padding-end: var(--eui-s-2xs)}.euim-toolbar-datepicker__datetime_icon{margin-left:var(--eui-s-l);margin-right:var(--eui-s-l);width:var(--eui-s-l);height:var(--eui-s-l)}.euim-toolbar-datepicker__datetime-button{display:flex;align-items:center;height:100%;padding-top:var(--eui-s-s);padding-bottom:var(--eui-s-s)}.euim-toolbar-datepicker__datetime-button--hidden{display:none}.euim-toolbar-datepicker__datetime-caret{margin-left:var(--eui-s-xs)!important;margin-right:var(--eui-s-xs)!important;width:var(--eui-s-m);height:var(--eui-s-m)}.euim-toolbar-datepicker__nav-button{width:calc(var(--eui-s-2xl) + var(--eui-s-2xs))!important;height:calc(var(--eui-s-2xl) + var(--eui-s-2xs))!important}.euim-toolbar-datepicker__nav-button ion-icon{width:var(--eui-base-spacing-xl);height:var(--eui-base-spacing-xl)}.euim-toolbar-datepicker__date{display:inline-table!important;flex:0 0 0!important;min-width:0!important}.euim-toolbar-datepicker__title{width:fit-content}.euim-toolbar-datepicker--primary .euim-toolbar-datepicker__calendar,.euim-toolbar-datepicker--primary .euim-label{color:#fff}.euim-toolbar-datepicker--primary .euim-toolbar-datepicker__datetime-button::part(native){background:var(--eui-bc-primary);color:#fff}\n"], dependencies: [{ kind: "component", type: i1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1.IonDatetime, selector: "ion-datetime", inputs: ["cancelText", "clearText", "color", "dayValues", "disabled", "doneText", "firstDayOfWeek", "formatOptions", "highlightedDates", "hourCycle", "hourValues", "isDateEnabled", "locale", "max", "min", "minuteValues", "mode", "monthValues", "multiple", "name", "preferWheel", "presentation", "readonly", "showClearButton", "showDefaultButtons", "showDefaultTimeLabel", "showDefaultTitle", "size", "titleSelectedDatesFormatter", "value", "yearValues"] }, { kind: "component", type: i1.IonDatetimeButton, selector: "ion-datetime-button", inputs: ["color", "datetime", "disabled", "mode"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1.IonModal, selector: "ion-modal" }, { kind: "directive", type: i1.SelectValueAccessor, selector: "ion-select, ion-radio-group, ion-segment, ion-datetime" }, { kind: "component", type: EuimAvatarIconComponent, selector: "euim-avatar-icon", inputs: ["color", "size", "fill", "variant", "borderColor"] }, { kind: "component", type: EuimLabelComponent, selector: "div[euimLabel], p[euimLabel], span[euimLabel], euim-label", inputs: ["euimLabelTruncateWithLines", "euimLabelTitle", "euimLabelSubTitle", "euimLabelMeta", "euimLabelTruncate", "euimLabelTextWrap"] }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimToolbarDatepickerComponent, deps: [{ token: BaseStatesDirective }, { token: i2.TranslateService }, { token: i3.ModalController }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.10", type: EuimToolbarDatepickerComponent, selector: "euim-toolbar-datepicker", inputs: { icon: "icon", title: "title", subTitle: "subTitle", euimPrevBtnDisabled: ["euimPrevBtnDisabled", "euimPrevBtnDisabled", booleanAttribute], euimNextBtnDisabled: ["euimNextBtnDisabled", "euimNextBtnDisabled", booleanAttribute], euimReadOnly: ["euimReadOnly", "euimReadOnly", booleanAttribute], selectDateBy: "selectDateBy" }, outputs: { prevBtnClick: "prevBtnClick", nextBtnClick: "nextBtnClick", dateChanged: "dateChanged" }, host: { listeners: { "window:popstate": "dismissModal($event)" }, properties: { "class": "this.cssClasses" } }, hostDirectives: [{ directive: BaseStatesDirective, inputs: ["color", "color"] }], ngImport: i0, template: "<ion-item class=\"euim-toolbar-datepicker__item\" color=\"branding\">\n    <euim-avatar  fill=\"clear\" slot=\"start\" >\n        <euim-avatar-icon>\n            <ion-icon [name]=\"icon\"\n                      class=\"euim-toolbar-datepicker__calendar\"></ion-icon>\n        </euim-avatar-icon>\n    </euim-avatar>\n    @if (!euimReadOnly){\n    <ion-datetime-button class=\"euim-toolbar-datepicker__datetime-button--hidden\"\n                         [datetime]=\"dateTimeId\">\n    </ion-datetime-button>\n    }\n    <div class=\"euim-toolbar-datepicker__datetime-button\" [id]=\"modalId\" [style.cursor]=\"(!euimReadOnly) ? 'pointer' : 'auto'\">\n        <ion-label class=\"euim-toolbar-datepicker__date\">\n            <div class=\"euim-toolbar-datepicker__title\"\n                 euimLabel\n                 euimLabelTitle\n                 euimLabelTruncate\n                 disabled=\"euimReadOnly\">{{!title ? weekDayName : title}}</div>\n\n            <div euimLabel\n                 euimLabelSubTitle\n                 euimLabelTruncate\n                 disabled=\"euimReadOnly\">{{!subTitle ? formattedDate : subTitle}}</div>\n        </ion-label>\n        @if (!euimReadOnly){\n            <ion-icon class=\"euim-toolbar-datepicker__datetime-caret\"\n                      name=\"caret-down-sharp\"\n                      color=\"light\"></ion-icon>\n        }\n    </div>\n\n    @if (!euimReadOnly) {\n        <ion-buttons slot=\"end\">\n            <ion-button (click)=\"selectPrevDate()\"\n                        [disabled] = \"euimPrevBtnDisabled\"\n                        shape=\"round\"\n                        class=\"euim-toolbar-datepicker__nav-button\">\n                <ion-icon name=\"chevron-back-circle-sharp\"\n                          color=\"light\">\n                </ion-icon>\n            </ion-button>\n            <ion-button\n                        (click)=\"selectNextDate()\"\n                        [disabled]=\"euimNextBtnDisabled\"\n                        shape=\"round\"\n                        class=\"euim-toolbar-datepicker__nav-button euim-toolbar-datepicker__nav-button--next\">\n                <ion-icon name=\"chevron-forward-circle-sharp\"\n                          color=\"light\"></ion-icon>\n            </ion-button>\n        </ion-buttons>\n    }\n</ion-item>\n\n@if (!euimReadOnly){\n<ion-modal [keepContentsMounted]=\"true\"\n           [trigger]=\"modalId\">\n    <ng-template>\n        <ion-datetime\n            [showDefaultButtons]=\"true\"\n            (ionChange)=\"calendarDateChanged($event)\"\n            size=\"cover\"\n            [id]=\"dateTimeId\"\n            [locale]=\"currentLang\"\n            [(ngModel)]=\"selectedDate\"\n            presentation=\"year\"></ion-datetime>\n    </ng-template>\n</ion-modal>\n}\n", styles: [".euim-toolbar-datepicker{--inner-padding-end: var(--eui-s-xs)}.euim-toolbar-datepicker ion-item:has(ion-buttons ion-button ion-icon){--inner-padding-end: var(--eui-s-2xs)}.euim-toolbar-datepicker ion-item ion-buttons[slot=end]{margin-inline-start:0}.euim-toolbar-datepicker__datetime_icon{margin-left:var(--eui-s-l);margin-right:var(--eui-s-l);width:var(--eui-is-xl);height:var(--eui-is-xl)}.euim-toolbar-datepicker__datetime-button{display:flex;align-items:center;height:100%;width:100%;padding-top:var(--eui-s-s);padding-bottom:var(--eui-s-s)}.euim-toolbar-datepicker__datetime-button--hidden{display:none}.euim-toolbar-datepicker__datetime-caret{margin-left:var(--eui-s-xs)!important;margin-right:var(--eui-s-xs)!important;width:var(--eui-s-m);height:var(--eui-s-m);flex-shrink:0}.euim-toolbar-datepicker__nav-button ion-icon{width:var(--eui-is-l);height:var(--eui-is-l)}.euim-toolbar-datepicker__date{flex:0 1 auto}.euim-toolbar-datepicker--primary .euim-toolbar-datepicker__calendar,.euim-toolbar-datepicker--primary .euim-label{color:var(--eui-c-branding-contrast)}.euim-toolbar-datepicker--primary .euim-toolbar-datepicker__datetime-button::part(native){background:var(--eui-c-branding);color:var(--eui-c-branding-contrast)}\n"], dependencies: [{ kind: "component", type: i3.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i3.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i3.IonDatetime, selector: "ion-datetime", inputs: ["cancelText", "clearText", "color", "dayValues", "disabled", "doneText", "firstDayOfWeek", "formatOptions", "highlightedDates", "hourCycle", "hourValues", "isDateEnabled", "locale", "max", "min", "minuteValues", "mode", "monthValues", "multiple", "name", "preferWheel", "presentation", "readonly", "showClearButton", "showDefaultButtons", "showDefaultTimeLabel", "showDefaultTitle", "size", "titleSelectedDatesFormatter", "value", "yearValues"] }, { kind: "component", type: i3.IonDatetimeButton, selector: "ion-datetime-button", inputs: ["color", "datetime", "disabled", "mode"] }, { kind: "component", type: i3.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i3.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i3.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i3.IonModal, selector: "ion-modal" }, { kind: "directive", type: i3.SelectValueAccessor, selector: "ion-select, ion-radio-group, ion-segment, ion-datetime" }, { kind: "component", type: EuimAvatarComponent, selector: "euim-avatar", inputs: ["color", "size", "fill", "variant", "borderColor"] }, { kind: "component", type: EuimAvatarIconComponent, selector: "euim-avatar-icon" }, { kind: "component", type: EuimLabelComponent, selector: "div[euimLabel], p[euimLabel], span[euimLabel], euim-label", inputs: ["euimLabelTruncateWithLines", "euimLabelTitle", "euimLabelSubTitle", "euimLabelMeta", "euimLabelTruncate", "euimLabelTextWrap"] }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimToolbarDatepickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimToolbarDatepickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'euim-toolbar-datepicker', encapsulation: ViewEncapsulation.None, hostDirectives: [
                         {
@@ -3691,8 +3922,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
                                 'color',
                             ],
                         },
-                    ], template: "<ion-item class=\"euim-toolbar-datepicker__item\"\n           color=\"primary\">\n    <euim-avatar-icon  fill=\"clear\" slot=\"start\" >\n        <ion-icon [name]=\"icon\"\n                  class=\"euim-toolbar-datepicker__calendar\"></ion-icon>\n    </euim-avatar-icon>\n    @if (!euimReadOnly){\n    <ion-datetime-button class=\"euim-toolbar-datepicker__datetime-button--hidden\"\n                         [datetime]=\"dateTimeId\">\n    </ion-datetime-button>\n    }\n    <div class=\"euim-toolbar-datepicker__datetime-button\" [id]=\"modalId\" [style.cursor]=\"(!euimReadOnly) ? 'pointer' : 'auto'\">\n        <ion-label class=\"euim-toolbar-datepicker__date\"\n                   position=\"fixed\">\n            <div class=\"euim-toolbar-datepicker__title\"\n                 euimLabel\n                 euimLabelTitle\n                 disabled=\"euimReadOnly\">{{!title ? weekDayName : title}}</div>\n\n            <div euimLabel euimLabelSubTitle\n                 disabled=\"euimReadOnly\">{{!subTitle ? formattedDate : subTitle}}</div>\n        </ion-label>\n        @if (!euimReadOnly){\n            <ion-icon class=\"euim-toolbar-datepicker__datetime-caret\"\n                      name=\"caret-down-sharp\"\n                      color=\"light\"></ion-icon>\n        }\n    </div>\n\n    @if (!euimReadOnly) {\n        <ion-buttons slot=\"end\">\n            <ion-button (click)=\"selectPrevDate()\"\n                        [disabled] = \"euimPrevBtnDisabled\"\n                        shape=\"round\"\n                        class=\"euim-toolbar-datepicker__nav-button\">\n                <ion-icon name=\"chevron-back-circle-sharp\"\n                          color=\"light\">\n                </ion-icon>\n            </ion-button>\n            <ion-button\n                        (click)=\"selectNextDate()\"\n                        [disabled]=\"euimNextBtnDisabled\"\n                        shape=\"round\"\n                        class=\"euim-toolbar-datepicker__nav-button euim-toolbar-datepicker__nav-button--next\">\n                <ion-icon name=\"chevron-forward-circle-sharp\"\n                          color=\"light\"></ion-icon>\n            </ion-button>\n        </ion-buttons>\n    }\n</ion-item>\n\n@if (!euimReadOnly){\n<ion-modal [keepContentsMounted]=\"true\"\n           [trigger]=\"modalId\">\n    <ng-template>\n        <ion-datetime\n            [showDefaultButtons]=\"true\"\n            (ionChange)=\"calendarDateChanged($event)\"\n            size=\"cover\"\n            [id]=\"dateTimeId\"\n            [locale]=\"currentLang\"\n            [(ngModel)]=\"selectedDate\"\n            presentation=\"date\"></ion-datetime>\n    </ng-template>\n</ion-modal>\n}\n", styles: [".euim-toolbar-datepicker{--inner-padding-end: var(--eui-s-xs)}.euim-toolbar-datepicker ion-item:has(ion-buttons ion-button ion-icon){--inner-padding-end: var(--eui-s-2xs)}.euim-toolbar-datepicker__datetime_icon{margin-left:var(--eui-s-l);margin-right:var(--eui-s-l);width:var(--eui-s-l);height:var(--eui-s-l)}.euim-toolbar-datepicker__datetime-button{display:flex;align-items:center;height:100%;padding-top:var(--eui-s-s);padding-bottom:var(--eui-s-s)}.euim-toolbar-datepicker__datetime-button--hidden{display:none}.euim-toolbar-datepicker__datetime-caret{margin-left:var(--eui-s-xs)!important;margin-right:var(--eui-s-xs)!important;width:var(--eui-s-m);height:var(--eui-s-m)}.euim-toolbar-datepicker__nav-button{width:calc(var(--eui-s-2xl) + var(--eui-s-2xs))!important;height:calc(var(--eui-s-2xl) + var(--eui-s-2xs))!important}.euim-toolbar-datepicker__nav-button ion-icon{width:var(--eui-base-spacing-xl);height:var(--eui-base-spacing-xl)}.euim-toolbar-datepicker__date{display:inline-table!important;flex:0 0 0!important;min-width:0!important}.euim-toolbar-datepicker__title{width:fit-content}.euim-toolbar-datepicker--primary .euim-toolbar-datepicker__calendar,.euim-toolbar-datepicker--primary .euim-label{color:#fff}.euim-toolbar-datepicker--primary .euim-toolbar-datepicker__datetime-button::part(native){background:var(--eui-bc-primary);color:#fff}\n"] }]
-        }], ctorParameters: () => [{ type: BaseStatesDirective }, { type: i1$1.TranslateService }], propDecorators: { icon: [{
+                    ], template: "<ion-item class=\"euim-toolbar-datepicker__item\" color=\"branding\">\n    <euim-avatar  fill=\"clear\" slot=\"start\" >\n        <euim-avatar-icon>\n            <ion-icon [name]=\"icon\"\n                      class=\"euim-toolbar-datepicker__calendar\"></ion-icon>\n        </euim-avatar-icon>\n    </euim-avatar>\n    @if (!euimReadOnly){\n    <ion-datetime-button class=\"euim-toolbar-datepicker__datetime-button--hidden\"\n                         [datetime]=\"dateTimeId\">\n    </ion-datetime-button>\n    }\n    <div class=\"euim-toolbar-datepicker__datetime-button\" [id]=\"modalId\" [style.cursor]=\"(!euimReadOnly) ? 'pointer' : 'auto'\">\n        <ion-label class=\"euim-toolbar-datepicker__date\">\n            <div class=\"euim-toolbar-datepicker__title\"\n                 euimLabel\n                 euimLabelTitle\n                 euimLabelTruncate\n                 disabled=\"euimReadOnly\">{{!title ? weekDayName : title}}</div>\n\n            <div euimLabel\n                 euimLabelSubTitle\n                 euimLabelTruncate\n                 disabled=\"euimReadOnly\">{{!subTitle ? formattedDate : subTitle}}</div>\n        </ion-label>\n        @if (!euimReadOnly){\n            <ion-icon class=\"euim-toolbar-datepicker__datetime-caret\"\n                      name=\"caret-down-sharp\"\n                      color=\"light\"></ion-icon>\n        }\n    </div>\n\n    @if (!euimReadOnly) {\n        <ion-buttons slot=\"end\">\n            <ion-button (click)=\"selectPrevDate()\"\n                        [disabled] = \"euimPrevBtnDisabled\"\n                        shape=\"round\"\n                        class=\"euim-toolbar-datepicker__nav-button\">\n                <ion-icon name=\"chevron-back-circle-sharp\"\n                          color=\"light\">\n                </ion-icon>\n            </ion-button>\n            <ion-button\n                        (click)=\"selectNextDate()\"\n                        [disabled]=\"euimNextBtnDisabled\"\n                        shape=\"round\"\n                        class=\"euim-toolbar-datepicker__nav-button euim-toolbar-datepicker__nav-button--next\">\n                <ion-icon name=\"chevron-forward-circle-sharp\"\n                          color=\"light\"></ion-icon>\n            </ion-button>\n        </ion-buttons>\n    }\n</ion-item>\n\n@if (!euimReadOnly){\n<ion-modal [keepContentsMounted]=\"true\"\n           [trigger]=\"modalId\">\n    <ng-template>\n        <ion-datetime\n            [showDefaultButtons]=\"true\"\n            (ionChange)=\"calendarDateChanged($event)\"\n            size=\"cover\"\n            [id]=\"dateTimeId\"\n            [locale]=\"currentLang\"\n            [(ngModel)]=\"selectedDate\"\n            presentation=\"year\"></ion-datetime>\n    </ng-template>\n</ion-modal>\n}\n", styles: [".euim-toolbar-datepicker{--inner-padding-end: var(--eui-s-xs)}.euim-toolbar-datepicker ion-item:has(ion-buttons ion-button ion-icon){--inner-padding-end: var(--eui-s-2xs)}.euim-toolbar-datepicker ion-item ion-buttons[slot=end]{margin-inline-start:0}.euim-toolbar-datepicker__datetime_icon{margin-left:var(--eui-s-l);margin-right:var(--eui-s-l);width:var(--eui-is-xl);height:var(--eui-is-xl)}.euim-toolbar-datepicker__datetime-button{display:flex;align-items:center;height:100%;width:100%;padding-top:var(--eui-s-s);padding-bottom:var(--eui-s-s)}.euim-toolbar-datepicker__datetime-button--hidden{display:none}.euim-toolbar-datepicker__datetime-caret{margin-left:var(--eui-s-xs)!important;margin-right:var(--eui-s-xs)!important;width:var(--eui-s-m);height:var(--eui-s-m);flex-shrink:0}.euim-toolbar-datepicker__nav-button ion-icon{width:var(--eui-is-l);height:var(--eui-is-l)}.euim-toolbar-datepicker__date{flex:0 1 auto}.euim-toolbar-datepicker--primary .euim-toolbar-datepicker__calendar,.euim-toolbar-datepicker--primary .euim-label{color:var(--eui-c-branding-contrast)}.euim-toolbar-datepicker--primary .euim-toolbar-datepicker__datetime-button::part(native){background:var(--eui-c-branding);color:var(--eui-c-branding-contrast)}\n"] }]
+        }], ctorParameters: () => [{ type: BaseStatesDirective }, { type: i2.TranslateService }, { type: i3.ModalController }], propDecorators: { icon: [{
                 type: Input
             }], title: [{
                 type: Input
@@ -3707,6 +3938,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
             }], euimReadOnly: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
+            }], selectDateBy: [{
+                type: Input
             }], prevBtnClick: [{
                 type: Output
             }], nextBtnClick: [{
@@ -3716,6 +3949,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
             }], cssClasses: [{
                 type: HostBinding,
                 args: ['class']
+            }], dismissModal: [{
+                type: HostListener,
+                args: ['window:popstate', ['$event']]
             }] } });
 
 class EuimToolbarDatepickerDatetimeDirective {
@@ -3742,10 +3978,10 @@ class EuimToolbarDatepickerDatetimeDirective {
             this.value = item.toISOString();
         });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimToolbarDatepickerDatetimeDirective, deps: [{ token: EuimToolbarDatepickerComponent }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.5", type: EuimToolbarDatepickerDatetimeDirective, selector: "[euimToolbarDatepickerDatetime]", inputs: { value: "value", showDefaultButtons: "showDefaultButtons", id: "id", size: "size", presentation: "presentation", displayFormat: "displayFormat" }, host: { listeners: { "ionChange": "onIonChange($event)" }, properties: { "class": "this.className", "value": "this.value", "showDefaultButtons": "this.showDefaultButtons", "id": "this.id", "size": "this.size", "presentation": "this.presentation", "displayFormat": "this.displayFormat" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimToolbarDatepickerDatetimeDirective, deps: [{ token: EuimToolbarDatepickerComponent }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.10", type: EuimToolbarDatepickerDatetimeDirective, selector: "[euimToolbarDatepickerDatetime]", inputs: { value: "value", showDefaultButtons: "showDefaultButtons", id: "id", size: "size", presentation: "presentation", displayFormat: "displayFormat" }, host: { listeners: { "ionChange": "onIonChange($event)" }, properties: { "class": "this.className", "value": "this.value", "showDefaultButtons": "this.showDefaultButtons", "id": "this.id", "size": "this.size", "presentation": "this.presentation", "displayFormat": "this.displayFormat" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimToolbarDatepickerDatetimeDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimToolbarDatepickerDatetimeDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[euimToolbarDatepickerDatetime]',
@@ -3789,30 +4025,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
             }] } });
 
 class EuimToolbarDatepickerModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimToolbarDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.5", ngImport: i0, type: EuimToolbarDatepickerModule, declarations: [EuimToolbarDatepickerComponent,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimToolbarDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.10", ngImport: i0, type: EuimToolbarDatepickerModule, declarations: [EuimToolbarDatepickerComponent,
             EuimToolbarDatepickerDatetimeDirective], imports: [CommonModule,
             IonicModule,
             TranslateModule,
-            EuimAvatarIconModule,
+            EuimAvatarModule,
             EuimLabelModule,
             FormsModule], exports: [EuimToolbarDatepickerComponent,
             EuimToolbarDatepickerDatetimeDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimToolbarDatepickerModule, imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimToolbarDatepickerModule, imports: [CommonModule,
             IonicModule,
             TranslateModule,
-            EuimAvatarIconModule,
+            EuimAvatarModule,
             EuimLabelModule,
             FormsModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimToolbarDatepickerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimToolbarDatepickerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
                         CommonModule,
                         IonicModule,
                         TranslateModule,
-                        EuimAvatarIconModule,
+                        EuimAvatarModule,
                         EuimLabelModule,
                         FormsModule,
                     ],
@@ -3827,6 +4063,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
                 }]
         }] });
 
+class EuimReadOnlyFormLabelDirective {
+    constructor() {
+        this.className = 'euim-read-only-form__label';
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimReadOnlyFormLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.10", type: EuimReadOnlyFormLabelDirective, isStandalone: true, selector: "[euimReadOnlyFormLabel]", host: { properties: { "class": "this.className" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimReadOnlyFormLabelDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[euimReadOnlyFormLabel]',
+                    standalone: true,
+                }]
+        }], propDecorators: { className: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class EuimReadOnlyFormValueDirective {
+    constructor() {
+        this.className = 'euim-read-only-form__value';
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimReadOnlyFormValueDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.10", type: EuimReadOnlyFormValueDirective, isStandalone: true, selector: "[euimReadOnlyFormValue]", host: { properties: { "class": "this.className" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimReadOnlyFormValueDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[euimReadOnlyFormValue]',
+                    standalone: true,
+                }]
+        }], propDecorators: { className: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class EuimReadOnlyFormDirective {
+    constructor() {
+        this.className = 'euim-read-only-form';
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimReadOnlyFormDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.10", type: EuimReadOnlyFormDirective, isStandalone: true, selector: "[euimReadOnlyForm]", host: { properties: { "class": "this.className" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimReadOnlyFormDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[euimReadOnlyForm]',
+                    standalone: true,
+                }]
+        }], propDecorators: { className: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
 class EuimDividerDirective {
     get cssClasses() {
         return this.getCssClasses('euim-divider');
@@ -3837,10 +4127,10 @@ class EuimDividerDirective {
             this.lines ? `${rootClass}--lines-${this.lines}` : '',
         ].join(' ').trim();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimDividerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.5", type: EuimDividerDirective, selector: "[euimDivider]", inputs: { lines: "lines" }, host: { properties: { "class": "this.cssClasses" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimDividerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.10", type: EuimDividerDirective, selector: "[euimDivider]", inputs: { lines: "lines" }, host: { properties: { "class": "this.cssClasses" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimDividerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimDividerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[euimDivider]',
@@ -3853,13 +4143,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
             }] } });
 
 class EuimDividerModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimDividerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.5", ngImport: i0, type: EuimDividerModule, declarations: [EuimDividerDirective], imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimDividerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.10", ngImport: i0, type: EuimDividerModule, declarations: [EuimDividerDirective], imports: [CommonModule,
             IonicModule], exports: [EuimDividerDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimDividerModule, imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimDividerModule, imports: [CommonModule,
             IonicModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimDividerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimDividerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -3875,14 +4165,98 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
                 }]
         }] });
 
+class EuimListHeaderDirective {
+    get cssClasses() {
+        return this.getCssClasses('euim-list-header');
+    }
+    getCssClasses(rootClass) {
+        return [
+            rootClass,
+            this.border ? `${rootClass}--border-${this.border}` : '',
+        ].join(' ').trim();
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimListHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.10", type: EuimListHeaderDirective, selector: "[euimListHeader]", inputs: { border: "border" }, host: { properties: { "class": "this.cssClasses" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimListHeaderDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[euimListHeader]',
+                }]
+        }], propDecorators: { border: [{
+                type: Input
+            }], cssClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class EuimListHeaderModule {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimListHeaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.10", ngImport: i0, type: EuimListHeaderModule, declarations: [EuimListHeaderDirective], imports: [CommonModule,
+            IonicModule], exports: [EuimListHeaderDirective] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimListHeaderModule, imports: [CommonModule,
+            IonicModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimListHeaderModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        IonicModule,
+                    ],
+                    exports: [
+                        EuimListHeaderDirective,
+                    ],
+                    declarations: [
+                        EuimListHeaderDirective,
+                    ],
+                }]
+        }] });
+
+class EuimAlignCenterDirective {
+    constructor() {
+        this.className = 'euim-align-center';
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimAlignCenterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.10", type: EuimAlignCenterDirective, isStandalone: true, selector: "[euimAlignCenter]", host: { properties: { "class": "this.className" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimAlignCenterDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[euimAlignCenter]',
+                    standalone: true,
+                }]
+        }], propDecorators: { className: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class EuimAlignTopDirective {
+    constructor() {
+        this.className = 'euim-align-top';
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimAlignTopDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.10", type: EuimAlignTopDirective, isStandalone: true, selector: "[euimAlignTop]", host: { properties: { "class": "this.className" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimAlignTopDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[euimAlignTop]',
+                    standalone: true,
+                }]
+        }], propDecorators: { className: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
 class EuimToolbarTransparentDirective {
     constructor() {
         this.className = 'euim-toolbar--transparent';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimToolbarTransparentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.5", type: EuimToolbarTransparentDirective, isStandalone: true, selector: "[euimToolbarTransparent]", host: { properties: { "class": "this.className" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimToolbarTransparentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.10", type: EuimToolbarTransparentDirective, isStandalone: true, selector: "[euimToolbarTransparent]", host: { properties: { "class": "this.className" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimToolbarTransparentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimToolbarTransparentDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[euimToolbarTransparent]',
@@ -3893,14 +4267,73 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
                 args: ['class']
             }] } });
 
+class EuimMinWidthDirective {
+    constructor() {
+        this.minWidth = '20%';
+    }
+    ngOnInit() {
+        this.widthVar = this.minWidth;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimMinWidthDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.10", type: EuimMinWidthDirective, isStandalone: true, selector: "[euimMinWidth]", inputs: { minWidth: "minWidth" }, host: { properties: { "style.width": "this.widthVar" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimMinWidthDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[euimMinWidth]',
+                    standalone: true,
+                }]
+        }], propDecorators: { minWidth: [{
+                type: Input
+            }], widthVar: [{
+                type: HostBinding,
+                args: ['style.width']
+            }] } });
+
+class EuimListItemNoPaddingsDirective {
+    constructor() {
+        this.className = 'euim-list-item--no-paddings';
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimListItemNoPaddingsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.10", type: EuimListItemNoPaddingsDirective, isStandalone: true, selector: "[euimListItemNoPaddings]", host: { properties: { "class": "this.className" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimListItemNoPaddingsDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[euimListItemNoPaddings]',
+                    standalone: true,
+                }]
+        }], propDecorators: { className: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class EuimSidebarFooterNoBordersDirective {
+    constructor() {
+        this.className = 'euim-sidebar-footer--no-borders';
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimSidebarFooterNoBordersDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.10", type: EuimSidebarFooterNoBordersDirective, isStandalone: true, selector: "[euimSidebarFooterNoBorders]", host: { properties: { "class": "this.className" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimSidebarFooterNoBordersDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[euimSidebarFooterNoBorders]',
+                    standalone: true,
+                }]
+        }], propDecorators: { className: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
 class EuimSkeletonTextAvatarDirective {
     constructor() {
         this.className = 'euim-skeleton-text-avatar';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimSkeletonTextAvatarDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.5", type: EuimSkeletonTextAvatarDirective, selector: "[euimSkeletonTextAvatar]", host: { properties: { "class": "this.className" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimSkeletonTextAvatarDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.10", type: EuimSkeletonTextAvatarDirective, selector: "[euimSkeletonTextAvatar]", host: { properties: { "class": "this.className" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimSkeletonTextAvatarDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimSkeletonTextAvatarDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[euimSkeletonTextAvatar]',
@@ -3911,13 +4344,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
             }] } });
 
 class EuimSkeletonTextAvatarModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimSkeletonTextAvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.5", ngImport: i0, type: EuimSkeletonTextAvatarModule, declarations: [EuimSkeletonTextAvatarDirective], imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimSkeletonTextAvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.10", ngImport: i0, type: EuimSkeletonTextAvatarModule, declarations: [EuimSkeletonTextAvatarDirective], imports: [CommonModule,
             IonicModule], exports: [EuimSkeletonTextAvatarDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimSkeletonTextAvatarModule, imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimSkeletonTextAvatarModule, imports: [CommonModule,
             IonicModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimSkeletonTextAvatarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimSkeletonTextAvatarModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -3941,11 +4374,8 @@ const MODULES = [
     EuimLanguageSelectorModule,
     EuimUserProfileModule,
     EuimMessageModule,
-    EuimCardModule,
-    EuimCardListModule,
     EuimSkeletonListItemModule,
     EuimSkeletonListModule,
-    EuimAvatarIconModule,
     EuimLabelModule,
     EuimAlertMessageModule,
     EuimAboutModule,
@@ -3963,15 +4393,27 @@ const MODULES = [
     EuimPdfViewerModule,
     EuimMultiselectModule,
     EuimToolbarDatepickerModule,
+    EuimCardModule,
+    EuimCardListModule,
     // Directives
     EuimSpinnerComponentModule,
     EuimDividerModule,
+    EuimListHeaderModule,
+    EuimMinWidthDirective,
+    EuimAlignCenterDirective,
+    EuimAlignTopDirective,
     EuimToolbarTransparentDirective,
+    EuimSidebarFooterNoBordersDirective,
+    EuimListItemNoPaddingsDirective,
+    EuimReadOnlyFormDirective,
+    EuimReadOnlyFormValueDirective,
+    EuimReadOnlyFormLabelDirective,
+    EuimMediaHeaderCustomContentDirective,
     EuimSkeletonTextAvatarModule,
 ];
 class EuimAllModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimAllModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.5", ngImport: i0, type: EuimAllModule, imports: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimAllModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.10", ngImport: i0, type: EuimAllModule, imports: [
             // Layout
             EuimAppModule,
             // Components
@@ -3979,11 +4421,8 @@ class EuimAllModule {
             EuimLanguageSelectorModule,
             EuimUserProfileModule,
             EuimMessageModule,
-            EuimCardModule,
-            EuimCardListModule,
             EuimSkeletonListItemModule,
             EuimSkeletonListModule,
-            EuimAvatarIconModule,
             EuimLabelModule,
             EuimAlertMessageModule,
             EuimAboutModule,
@@ -4001,10 +4440,22 @@ class EuimAllModule {
             EuimPdfViewerModule,
             EuimMultiselectModule,
             EuimToolbarDatepickerModule,
+            EuimCardModule,
+            EuimCardListModule,
             // Directives
             EuimSpinnerComponentModule,
             EuimDividerModule,
+            EuimListHeaderModule,
+            EuimMinWidthDirective,
+            EuimAlignCenterDirective,
+            EuimAlignTopDirective,
             EuimToolbarTransparentDirective,
+            EuimSidebarFooterNoBordersDirective,
+            EuimListItemNoPaddingsDirective,
+            EuimReadOnlyFormDirective,
+            EuimReadOnlyFormValueDirective,
+            EuimReadOnlyFormLabelDirective,
+            EuimMediaHeaderCustomContentDirective,
             EuimSkeletonTextAvatarModule], exports: [
             // Layout
             EuimAppModule,
@@ -4013,11 +4464,8 @@ class EuimAllModule {
             EuimLanguageSelectorModule,
             EuimUserProfileModule,
             EuimMessageModule,
-            EuimCardModule,
-            EuimCardListModule,
             EuimSkeletonListItemModule,
             EuimSkeletonListModule,
-            EuimAvatarIconModule,
             EuimLabelModule,
             EuimAlertMessageModule,
             EuimAboutModule,
@@ -4035,12 +4483,24 @@ class EuimAllModule {
             EuimPdfViewerModule,
             EuimMultiselectModule,
             EuimToolbarDatepickerModule,
+            EuimCardModule,
+            EuimCardListModule,
             // Directives
             EuimSpinnerComponentModule,
             EuimDividerModule,
+            EuimListHeaderModule,
+            EuimMinWidthDirective,
+            EuimAlignCenterDirective,
+            EuimAlignTopDirective,
             EuimToolbarTransparentDirective,
+            EuimSidebarFooterNoBordersDirective,
+            EuimListItemNoPaddingsDirective,
+            EuimReadOnlyFormDirective,
+            EuimReadOnlyFormValueDirective,
+            EuimReadOnlyFormLabelDirective,
+            EuimMediaHeaderCustomContentDirective,
             EuimSkeletonTextAvatarModule] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimAllModule, imports: [
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimAllModule, imports: [
             // Layout
             EuimAppModule,
             // Components
@@ -4048,11 +4508,8 @@ class EuimAllModule {
             EuimLanguageSelectorModule,
             EuimUserProfileModule,
             EuimMessageModule,
-            EuimCardModule,
-            EuimCardListModule,
             EuimSkeletonListItemModule,
             EuimSkeletonListModule,
-            EuimAvatarIconModule,
             EuimLabelModule,
             EuimAlertMessageModule,
             EuimAboutModule,
@@ -4070,9 +4527,12 @@ class EuimAllModule {
             EuimPdfViewerModule,
             EuimMultiselectModule,
             EuimToolbarDatepickerModule,
+            EuimCardModule,
+            EuimCardListModule,
             // Directives
             EuimSpinnerComponentModule,
             EuimDividerModule,
+            EuimListHeaderModule,
             EuimSkeletonTextAvatarModule,
             // Layout
             EuimAppModule,
@@ -4081,11 +4541,8 @@ class EuimAllModule {
             EuimLanguageSelectorModule,
             EuimUserProfileModule,
             EuimMessageModule,
-            EuimCardModule,
-            EuimCardListModule,
             EuimSkeletonListItemModule,
             EuimSkeletonListModule,
-            EuimAvatarIconModule,
             EuimLabelModule,
             EuimAlertMessageModule,
             EuimAboutModule,
@@ -4103,12 +4560,15 @@ class EuimAllModule {
             EuimPdfViewerModule,
             EuimMultiselectModule,
             EuimToolbarDatepickerModule,
+            EuimCardModule,
+            EuimCardListModule,
             // Directives
             EuimSpinnerComponentModule,
             EuimDividerModule,
+            EuimListHeaderModule,
             EuimSkeletonTextAvatarModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: EuimAllModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: EuimAllModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -4126,5 +4586,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BaseStatesDirective, EuiMUserProfileActionComponent, EuiMUserProfileAvatarComponent, EuiMUserProfileInfosComponent, EuiMUserProfileInfosItemComponent, EuimAboutComponent, EuimAboutContentLoadingComponent, EuimAboutModule, EuimAlertMessageComponent, EuimAlertMessageModule, EuimAllModule, EuimAppComponent, EuimAppModule, EuimAppService, EuimAvatarComponent, EuimAvatarIconComponent, EuimAvatarIconModule, EuimAvatarMainIconDirective, EuimAvatarModule, EuimAvatarSubIconDirective, EuimBadgeComponent, EuimBadgeModule, EuimCardComponent, EuimCardImageDirective, EuimCardListComponent, EuimCardListModule, EuimCardModule, EuimChangelogComponent, EuimChipSelectorComponent, EuimChipSelectorComponentModule, EuimChipSelectorItemDirective, EuimDataSummaryColComponent, EuimDataSummaryColLabelDirective, EuimDataSummaryColValueDirective, EuimDataSummaryComponent, EuimDataSummaryModule, EuimDividerDirective, EuimDividerModule, EuimEmptyListPlaceholderComponent, EuimEmptyListPlaceholderModule, EuimHeaderDetailsComponent, EuimHeaderDetailsIconDirective, EuimHeaderDetailsMetaDirective, EuimHeaderDetailsModule, EuimHeaderDetailsTitleDirective, EuimHelpSupportComponent, EuimLabelComponent, EuimLabelModule, EuimLanguageListComponent, EuimLanguageSelectorComponent, EuimLanguageSelectorModule, EuimMediaHeaderComponent, EuimMediaHeaderImageDirective, EuimMediaHeaderModule, EuimMediaHeaderSubTitleDirective, EuimMediaHeaderTitleDirective, EuimMessageComponent, EuimMessageModule, EuimMessageTitleComponent, EuimMultiselectAllDirective, EuimMultiselectComponent, EuimMultiselectFilterComponent, EuimMultiselectInfoComponent, EuimMultiselectListComponent, EuimMultiselectModule, EuimMultiselectSelectFieldDirective, EuimMultiselectToolbarComponent, EuimNotificationItemComponent, EuimNotificationItemModule, EuimOpenSourceLicencesComponent, EuimPdfViewerComponent, EuimPdfViewerModule, EuimScrollerXComponent, EuimScrollerXComponentModule, EuimSidebarComponent, EuimSidebarContentComponent, EuimSidebarModule, EuimSkeletonListComponent, EuimSkeletonListItemComponent, EuimSkeletonListItemModule, EuimSkeletonListModule, EuimSkeletonTextAvatarDirective, EuimSkeletonTextAvatarModule, EuimSlideInfoScreenComponent, EuimSliderInfoScreenComponent, EuimSliderInfoScreenContentDirective, EuimSliderInfoScreenModule, EuimSliderInfoScreenSubTitleDirective, EuimSliderInfoScreenTitleDirective, EuimSpinnerComponent, EuimSpinnerComponentModule, EuimSpinnerDescriptionComponent, EuimSpinnerMessageComponent, EuimToolbarActionItemsComponent, EuimToolbarComponent, EuimToolbarComponentModule, EuimToolbarDatepickerComponent, EuimToolbarDatepickerDatetimeDirective, EuimToolbarDatepickerModule, EuimToolbarTitleComponent, EuimToolbarTransparentDirective, EuimUserProfileComponent, EuimUserProfileModule };
+export { BaseStatesDirective, EuiMUserProfileActionComponent, EuiMUserProfileAvatarComponent, EuiMUserProfileInfosComponent, EuiMUserProfileInfosItemComponent, EuimAboutComponent, EuimAboutContentLoadingComponent, EuimAboutModule, EuimAlertMessageComponent, EuimAlertMessageModule, EuimAlignCenterDirective, EuimAlignTopDirective, EuimAllModule, EuimAppComponent, EuimAppModule, EuimAppService, EuimAvatarBadgeComponent, EuimAvatarComponent, EuimAvatarIconComponent, EuimAvatarIconSubComponent, EuimAvatarImageComponent, EuimAvatarModule, EuimAvatarTextComponent, EuimBadgeComponent, EuimBadgeModule, EuimCardComponent, EuimCardImageDirective, EuimCardListComponent, EuimCardListModule, EuimCardModule, EuimChangelogComponent, EuimChipSelectorComponent, EuimChipSelectorComponentModule, EuimChipSelectorItemDirective, EuimDataSummaryColComponent, EuimDataSummaryColLabelDirective, EuimDataSummaryColValueDirective, EuimDataSummaryComponent, EuimDataSummaryModule, EuimDividerDirective, EuimDividerModule, EuimEmptyListPlaceholderComponent, EuimEmptyListPlaceholderModule, EuimHeaderDetailsComponent, EuimHeaderDetailsIconDirective, EuimHeaderDetailsMetaDirective, EuimHeaderDetailsModule, EuimHeaderDetailsTitleDirective, EuimHelpSupportComponent, EuimLabelComponent, EuimLabelModule, EuimLanguageListComponent, EuimLanguageSelectorComponent, EuimLanguageSelectorModule, EuimListHeaderDirective, EuimListHeaderModule, EuimListItemNoPaddingsDirective, EuimMediaHeaderComponent, EuimMediaHeaderCustomContentDirective, EuimMediaHeaderImageDirective, EuimMediaHeaderModule, EuimMediaHeaderSubTitleDirective, EuimMediaHeaderTitleDirective, EuimMessageComponent, EuimMessageModule, EuimMessageTitleComponent, EuimMinWidthDirective, EuimMultiselectAllDirective, EuimMultiselectComponent, EuimMultiselectFilterComponent, EuimMultiselectInfoComponent, EuimMultiselectListComponent, EuimMultiselectModule, EuimMultiselectSelectFieldDirective, EuimMultiselectToolbarComponent, EuimNotificationItemComponent, EuimNotificationItemModule, EuimOpenSourceLicencesComponent, EuimPdfViewerComponent, EuimPdfViewerModule, EuimReadOnlyFormDirective, EuimReadOnlyFormLabelDirective, EuimReadOnlyFormValueDirective, EuimScrollerXComponent, EuimScrollerXComponentModule, EuimSidebarComponent, EuimSidebarContentComponent, EuimSidebarFooterNoBordersDirective, EuimSidebarModule, EuimSkeletonListComponent, EuimSkeletonListItemComponent, EuimSkeletonListItemModule, EuimSkeletonListModule, EuimSkeletonTextAvatarDirective, EuimSkeletonTextAvatarModule, EuimSlideInfoScreenComponent, EuimSliderInfoScreenComponent, EuimSliderInfoScreenContentDirective, EuimSliderInfoScreenModule, EuimSliderInfoScreenSubTitleDirective, EuimSliderInfoScreenTitleDirective, EuimSpinnerComponent, EuimSpinnerComponentModule, EuimSpinnerDescriptionComponent, EuimSpinnerMessageComponent, EuimToolbarActionItemsComponent, EuimToolbarComponent, EuimToolbarComponentModule, EuimToolbarDatepickerComponent, EuimToolbarDatepickerDatetimeDirective, EuimToolbarDatepickerModule, EuimToolbarTitleComponent, EuimToolbarTransparentDirective, EuimUserProfileComponent, EuimUserProfileModule };
 //# sourceMappingURL=eui-mobile-core.mjs.map