@eui/eds 23.0.0-alpha.6 → 23.0.0-alpha.8

package/docs/miscellaneous/variables.html

@@ -137,6 +137,9 @@
             <tr>
                 <td class="col-md-4">
                     <ul class="index-list">
+                        <li>
+                            <a href="#BREAKPOINT" title="packages/eds/eds-shell/eds-shell.ts" class="reference-link "><span class="reference-badge reference-badge--variable" aria-hidden="true">V</span><span class="reference-link-label"><b>BREAKPOINT</b>&nbsp;&nbsp;&nbsp;(packages/.../eds-shell.ts)</span></a>
+                        </li>
                         <li>
                             <a href="#EDS_ALERT" title="packages/eds/eds-alert/index.ts" class="reference-link "><span class="reference-badge reference-badge--variable" aria-hidden="true">V</span><span class="reference-link-label"><b>EDS_ALERT</b>&nbsp;&nbsp;&nbsp;(packages/.../index.ts)</span></a>
                         </li>
@@ -161,12 +164,33 @@
                         <li>
                             <a href="#EDS_ICON_STATE" title="packages/eds/eds-icon-state/index.ts" class="reference-link "><span class="reference-badge reference-badge--variable" aria-hidden="true">V</span><span class="reference-link-label"><b>EDS_ICON_STATE</b>&nbsp;&nbsp;&nbsp;(packages/.../index.ts)</span></a>
                         </li>
+                        <li>
+                            <a href="#EDS_LANGUAGE_SELECTOR" title="packages/eds/eds-language-selector/index.ts" class="reference-link "><span class="reference-badge reference-badge--variable" aria-hidden="true">V</span><span class="reference-link-label"><b>EDS_LANGUAGE_SELECTOR</b>&nbsp;&nbsp;&nbsp;(packages/.../index.ts)</span></a>
+                        </li>
+                        <li>
+                            <a href="#EDS_MENU" title="packages/eds/eds-menu/index.ts" class="reference-link "><span class="reference-badge reference-badge--variable" aria-hidden="true">V</span><span class="reference-link-label"><b>EDS_MENU</b>&nbsp;&nbsp;&nbsp;(packages/.../index.ts)</span></a>
+                        </li>
+                        <li>
+                            <a href="#EDS_OVERLAY" title="packages/eds/eds-overlay/index.ts" class="reference-link "><span class="reference-badge reference-badge--variable" aria-hidden="true">V</span><span class="reference-link-label"><b>EDS_OVERLAY</b>&nbsp;&nbsp;&nbsp;(packages/.../index.ts)</span></a>
+                        </li>
+                        <li>
+                            <a href="#EDS_PAGE" title="packages/eds/eds-page/index.ts" class="reference-link "><span class="reference-badge reference-badge--variable" aria-hidden="true">V</span><span class="reference-link-label"><b>EDS_PAGE</b>&nbsp;&nbsp;&nbsp;(packages/.../index.ts)</span></a>
+                        </li>
+                        <li>
+                            <a href="#EDS_SHELL" title="packages/eds/eds-shell/index.ts" class="reference-link "><span class="reference-badge reference-badge--variable" aria-hidden="true">V</span><span class="reference-link-label"><b>EDS_SHELL</b>&nbsp;&nbsp;&nbsp;(packages/.../index.ts)</span></a>
+                        </li>
                         <li>
                             <a href="#EDS_TABS" title="packages/eds/eds-tabs/index.ts" class="reference-link "><span class="reference-badge reference-badge--variable" aria-hidden="true">V</span><span class="reference-link-label"><b>EDS_TABS</b>&nbsp;&nbsp;&nbsp;(packages/.../index.ts)</span></a>
                         </li>
                         <li>
                             <a href="#EDS_TAG" title="packages/eds/eds-tag/index.ts" class="reference-link "><span class="reference-badge reference-badge--variable" aria-hidden="true">V</span><span class="reference-link-label"><b>EDS_TAG</b>&nbsp;&nbsp;&nbsp;(packages/.../index.ts)</span></a>
                         </li>
+                        <li>
+                            <a href="#EDS_USER_PROFILE" title="packages/eds/eds-user-profile/index.ts" class="reference-link "><span class="reference-badge reference-badge--variable" aria-hidden="true">V</span><span class="reference-link-label"><b>EDS_USER_PROFILE</b>&nbsp;&nbsp;&nbsp;(packages/.../index.ts)</span></a>
+                        </li>
+                        <li>
+                            <a href="#pixelTransform" title="packages/eds/eds-resizable/eds-resizable.directive.ts" class="reference-link "><span class="reference-badge reference-badge--variable" aria-hidden="true">V</span><span class="reference-link-label"><b>pixelTransform</b>&nbsp;&nbsp;&nbsp;(packages/.../eds-resizable.directive.ts)</span></a>
+                        </li>
                         <li>
                             <a href="#showHide" title="packages/eds/eds-tooltip/eds-tooltip-animations.ts" class="reference-link "><span class="reference-badge reference-badge--variable" aria-hidden="true">V</span><span class="reference-link-label"><b>showHide</b>&nbsp;&nbsp;&nbsp;(packages/.../eds-tooltip-animations.ts)</span></a>
                         </li>
@@ -180,6 +204,35 @@
     </table>
 </section>
 
+    <h3>packages/eds/eds-shell/eds-shell.ts</h3>
+    <section data-compodoc="block-properties">
+    <h3></h3>    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="BREAKPOINT"></a>
+                    <span class="name">
+                        <span ><b>BREAKPOINT</b></span>
+                        <a href="#BREAKPOINT"><span class="icon ion-ios-link"></span></a>
+                    </span>
+                </td>
+            </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Type : </i>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank" >number</a></code>
+
+                    </td>
+                </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Default value : </i><code>1024</code>
+                    </td>
+                </tr>
+
+
+        </tbody>
+    </table>
+</section>
     <h3>packages/eds/eds-alert/index.ts</h3>
     <section data-compodoc="block-properties">
     <h3></h3>    <table class="table table-sm table-bordered">
@@ -438,6 +491,221 @@
         </tbody>
     </table>
 </section>
+    <h3>packages/eds/eds-language-selector/index.ts</h3>
+    <section data-compodoc="block-properties">
+    <h3></h3>    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="EDS_LANGUAGE_SELECTOR"></a>
+                    <span class="name">
+                        <span ><b>EDS_LANGUAGE_SELECTOR</b></span>
+                        <a href="#EDS_LANGUAGE_SELECTOR"><span class="icon ion-ios-link"></span></a>
+                    </span>
+                </td>
+            </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Type : </i>    <code>unknown</code>
+
+                    </td>
+                </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Default value : </i><code>[EdsLanguageSelector] as const</code>
+                    </td>
+                </tr>
+
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Convenience array for importing eds-language-selector.</p>
+</div>
+                </td>
+            </tr>
+
+        </tbody>
+    </table>
+</section>
+    <h3>packages/eds/eds-menu/index.ts</h3>
+    <section data-compodoc="block-properties">
+    <h3></h3>    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="EDS_MENU"></a>
+                    <span class="name">
+                        <span ><b>EDS_MENU</b></span>
+                        <a href="#EDS_MENU"><span class="icon ion-ios-link"></span></a>
+                    </span>
+                </td>
+            </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Type : </i>    <code>unknown</code>
+
+                    </td>
+                </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Default value : </i><code>[EdsMenu, EdsMenuItemComponent] as const</code>
+                    </td>
+                </tr>
+
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Convenience array for importing eds-menu components.</p>
+</div>
+                </td>
+            </tr>
+
+        </tbody>
+    </table>
+</section>
+    <h3>packages/eds/eds-overlay/index.ts</h3>
+    <section data-compodoc="block-properties">
+    <h3></h3>    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="EDS_OVERLAY"></a>
+                    <span class="name">
+                        <span ><b>EDS_OVERLAY</b></span>
+                        <a href="#EDS_OVERLAY"><span class="icon ion-ios-link"></span></a>
+                    </span>
+                </td>
+            </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Type : </i>    <code>unknown</code>
+
+                    </td>
+                </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Default value : </i><code>[
+  EdsOverlay,
+  EdsOverlayHeader,
+  EdsOverlayHeaderLabel,
+  EdsOverlayHeaderSublabel,
+  EdsOverlayHeaderActionItems,
+  EdsOverlayContent,
+  EdsOverlayFooter,
+] as const</code>
+                    </td>
+                </tr>
+
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Convenience array for importing all eds-overlay components.</p>
+</div>
+                </td>
+            </tr>
+
+        </tbody>
+    </table>
+</section>
+    <h3>packages/eds/eds-page/index.ts</h3>
+    <section data-compodoc="block-properties">
+    <h3></h3>    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="EDS_PAGE"></a>
+                    <span class="name">
+                        <span ><b>EDS_PAGE</b></span>
+                        <a href="#EDS_PAGE"><span class="icon ion-ios-link"></span></a>
+                    </span>
+                </td>
+            </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Type : </i>    <code>unknown</code>
+
+                    </td>
+                </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Default value : </i><code>[
+  EdsPage,
+  EdsPageHeader,
+  EdsPageHeaderLabel,
+  EdsPageHeaderSublabel,
+  EdsPageHeaderActionItems,
+  EdsPageHeaderBody,
+  EdsPageContent,
+  EdsPageFooter,
+] as const</code>
+                    </td>
+                </tr>
+
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Convenience array for importing all eds-page components.</p>
+</div>
+                </td>
+            </tr>
+
+        </tbody>
+    </table>
+</section>
+    <h3>packages/eds/eds-shell/index.ts</h3>
+    <section data-compodoc="block-properties">
+    <h3></h3>    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="EDS_SHELL"></a>
+                    <span class="name">
+                        <span ><b>EDS_SHELL</b></span>
+                        <a href="#EDS_SHELL"><span class="icon ion-ios-link"></span></a>
+                    </span>
+                </td>
+            </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Type : </i>    <code>unknown</code>
+
+                    </td>
+                </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Default value : </i><code>[
+  EdsShell,
+  EdsShellHeader,
+  EdsShellHeaderLogo,
+  EdsShellHeaderEnvironment,
+  EdsShellHeaderApp,
+  EdsShellHeaderStart,
+  EdsShellHeaderEnd,
+  EdsShellToolbar,
+  EdsShellToolbarStart,
+  EdsShellToolbarEnd,
+  EdsShellToolbarLogo,
+  EdsShellToolbarEnvironment,
+  EdsShellToolbarApp,
+  EdsShellSidebar,
+  EdsShellSidebarHeader,
+  EdsShellSidebarNav,
+  EdsShellSidebarBottomNav,
+  EdsShellSidebarFooter,
+  EdsShellContent,
+  EdsShellFooter,
+  EdsShellMenuToggle,
+  EdsShellTopMessage,
+] as const</code>
+                    </td>
+                </tr>
+
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Convenience array for importing all eds-shell components.</p>
+</div>
+                </td>
+            </tr>
+
+        </tbody>
+    </table>
+</section>
     <h3>packages/eds/eds-tabs/index.ts</h3>
     <section data-compodoc="block-properties">
     <h3></h3>    <table class="table table-sm table-bordered">
@@ -508,6 +776,80 @@
         </tbody>
     </table>
 </section>
+    <h3>packages/eds/eds-user-profile/index.ts</h3>
+    <section data-compodoc="block-properties">
+    <h3></h3>    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="EDS_USER_PROFILE"></a>
+                    <span class="name">
+                        <span ><b>EDS_USER_PROFILE</b></span>
+                        <a href="#EDS_USER_PROFILE"><span class="icon ion-ios-link"></span></a>
+                    </span>
+                </td>
+            </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Type : </i>    <code>unknown</code>
+
+                    </td>
+                </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Default value : </i><code>[
+  EdsUserProfile,
+  EdsUserProfileMenu,
+  EdsUserProfileMenuItem,
+] as const</code>
+                    </td>
+                </tr>
+
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Convenience array for importing all eds-user-profile components.</p>
+</div>
+                </td>
+            </tr>
+
+        </tbody>
+    </table>
+</section>
+    <h3>packages/eds/eds-resizable/eds-resizable.directive.ts</h3>
+    <section data-compodoc="block-properties">
+    <h3></h3>    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="pixelTransform"></a>
+                    <span class="name">
+                        <span ><b>pixelTransform</b></span>
+                        <a href="#pixelTransform"><span class="icon ion-ios-link"></span></a>
+                    </span>
+                </td>
+            </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Type : </i>    <code>unknown</code>
+
+                    </td>
+                </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Default value : </i><code>(value: string | number): number &#x3D;&gt; Math.max(0, numberAttribute(value, 0))</code>
+                    </td>
+                </tr>
+
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Ensures value is a non-negative pixel number.</p>
+</div>
+                </td>
+            </tr>
+
+        </tbody>
+    </table>
+</section>
     <h3>packages/eds/eds-tooltip/eds-tooltip-animations.ts</h3>
     <section data-compodoc="block-properties">
     <h3></h3>    <table class="table table-sm table-bordered">

package/docs/overview.html

@@ -119,7 +119,7 @@
             <div class="card text-center">
                 <div class="card-block">
                     <h4 class="card-title"><span class="icon ion-md-cog"></span></h4>
-                    <p class="card-text">29 Components</p>
+                    <p class="card-text">72 Components</p>
                 </div>
             </div>
         </div>
@@ -127,7 +127,7 @@
             <div class="card text-center">
                 <div class="card-block">
                     <h4 class="card-title"><span class="icon ion-md-code-working"></span></h4>
-                    <p class="card-text">3 Directives</p>
+                    <p class="card-text">4 Directives</p>
                 </div>
             </div>
         </div>
@@ -143,7 +143,7 @@
             <div class="card text-center">
                 <div class="card-block">
                     <h4 class="card-title"><span class="icon ion-md-information-circle-outline"></span></h4>
-                    <p class="card-text">1 Interface</p>
+                    <p class="card-text">3 Interfaces</p>
                 </div>
             </div>
         </div>

package/docs/properties.html

@@ -128,7 +128,7 @@
     </ol>
     <ul class="properties-list">
         <li>
-            <b>Version</b> : 23.0.0-alpha.6</li>
+            <b>Version</b> : 23.0.0-alpha.8</li>
     </ul>
 
 

package/eds-language-selector/package.json

@@ -0,0 +1,4 @@
+{
+  "module": "../fesm2022/eui-eds-eds-language-selector.mjs",
+  "typings": "../types/eui-eds-eds-language-selector.d.ts"
+}

package/eds-menu/package.json

@@ -0,0 +1,4 @@
+{
+  "module": "../fesm2022/eui-eds-eds-menu.mjs",
+  "typings": "../types/eui-eds-eds-menu.d.ts"
+}

package/eds-overlay/package.json

@@ -0,0 +1,4 @@
+{
+  "module": "../fesm2022/eui-eds-eds-overlay.mjs",
+  "typings": "../types/eui-eds-eds-overlay.d.ts"
+}

package/eds-page/package.json

@@ -0,0 +1,4 @@
+{
+  "module": "../fesm2022/eui-eds-eds-page.mjs",
+  "typings": "../types/eui-eds-eds-page.d.ts"
+}

package/eds-resizable/package.json

@@ -0,0 +1,4 @@
+{
+  "module": "../fesm2022/eui-eds-eds-resizable.mjs",
+  "typings": "../types/eui-eds-eds-resizable.d.ts"
+}

package/eds-shell/package.json

@@ -0,0 +1,4 @@
+{
+  "module": "../fesm2022/eui-eds-eds-shell.mjs",
+  "typings": "../types/eui-eds-eds-shell.d.ts"
+}

package/eds-user-profile/package.json

@@ -0,0 +1,4 @@
+{
+  "module": "../fesm2022/eui-eds-eds-user-profile.mjs",
+  "typings": "../types/eui-eds-eds-user-profile.d.ts"
+}

package/fesm2022/eui-eds-eds-alert.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { input, booleanAttribute, model, output, inject, HostBinding, ChangeDetectionStrategy, Component } from '@angular/core';
+import { input, booleanAttribute, model, output, inject, computed, ChangeDetectionStrategy, Component } from '@angular/core';
 import * as i1 from '@eui/eds/shared';
-import { EuiBaseColorVariantsDirective } from '@eui/eds/shared';
+import { EdsBaseColorVariantsDirective } from '@eui/eds/shared';
 import * as i2 from '@eui/eds/eds-icon-button';
 import { EDS_ICON_BUTTON } from '@eui/eds/eds-icon-button';
 import * as i3 from '@eui/eds/eds-icon-state';
@@ -9,18 +9,12 @@ import { EDS_ICON_STATE } from '@eui/eds/eds-icon-state';
 
 class EdsAlert {
     constructor() {
-        /**
-         * Sets the `role` attribute for the host element.
-         *
-         * @default 'alert'
-         */
-        this.role = 'alert';
         /**
          * Data attribute value for end-to-end testing identification.
          * Applied as data-e2e attribute on the host element.
-         * @default 'eui-alert'
+         * @default 'eds-alert'
          */
-        this.e2eAttr = input('eui-alert', /* @ts-ignore */
+        this.e2eAttr = input('eds-alert', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "e2eAttr" }] : /* istanbul ignore next */ []));
         /**
          * Enables a close button allowing users to dismiss the alert.
@@ -41,44 +35,27 @@ class EdsAlert {
          * Triggered when user clicks the close button (when isCloseable is true).
          */
         this.closeAlert = output();
-        this.colorVariantsBase = inject(EuiBaseColorVariantsDirective);
+        this.colorVariantsBase = inject(EdsBaseColorVariantsDirective);
         /**
-         * @description
-         * Unique identifier for the alert component.
-         * This ID is used to associate the alert with its content for accessibility purposes.
-         * It is generated using the `crypto` API to ensure uniqueness.
+         * Computed host CSS classes based on current state.
          */
-        this.uniqueId = crypto.randomUUID();
-    }
-    /**
-     * @description
-     * Computes and returns the CSS classes for the component based on its current state.
-     *
-     * @returns {string} Space-separated string of CSS class names
-     */
-    get cssClasses() {
-        return [
-            'eds-alert',
-            this.colorVariantsBase.getCssClasses('eds-alert'),
-            !this.isVisible() ? 'eds-alert--hidden' : '',
-        ]
-            .join(' ')
-            .trim();
-    }
-    /**
-     * Sets the `data-e2e` attribute for the host element. It is used for end-to-end testing.
-     *
-     * @default 'eui-alert'
-     */
-    get e2eAttribute() {
-        return this.e2eAttr();
+        this.hostClasses = computed(() => {
+            return [
+                'eds-alert',
+                this.colorVariantsBase.getCssClasses('eds-alert'),
+                !this.isVisible() ? 'eds-alert--hidden' : '',
+            ]
+                .join(' ')
+                .trim();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
     }
     /**
-     * Initializes the component.
+     * Initializes the component with default color variant if none set.
      */
     ngOnInit() {
-        if (!this.colorVariantsBase.euiColorVariant) {
-            this.colorVariantsBase.euiInfo = true;
+        if (!this.colorVariantsBase.edsColorVariant) {
+            this.colorVariantsBase.edsInfo = true;
         }
     }
     /**
@@ -89,7 +66,7 @@ class EdsAlert {
         this.closeAlert.emit(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsAlert, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: EdsAlert, isStandalone: true, selector: "div[edsAlert], eds-alert", inputs: { e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null }, isCloseable: { classPropertyName: "isCloseable", publicName: "isCloseable", isSignal: true, isRequired: false, transformFunction: null }, isVisible: { classPropertyName: "isVisible", publicName: "isVisible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isVisible: "isVisibleChange", closeAlert: "closeAlert" }, host: { properties: { "class": "this.cssClasses", "attr.role": "this.role", "attr.data-e2e": "this.e2eAttribute" } }, hostDirectives: [{ directive: i1.EuiBaseColorVariantsDirective, inputs: ["euiNeutral", "euiNeutral", "euiSuccess", "euiSuccess", "euiInfo", "euiInfo", "euiWarning", "euiWarning", "euiCritical", "euiCritical", "euiColorVariant", "euiColorVariant"] }], ngImport: i0, template: "<eds-icon-state class=\"eds-alert__icon\" [euiColorVariant]=\"colorVariantsBase.euiColorVariant\"/>\n\n<div class=\"eds-alert__content\">\n    <ng-content select=\"eds-alert-title\"/>\n    <ng-content />\n</div>\n\n@if (isCloseable()) {\n    <button edsIconButton class=\"eds-alert__close\" \n        ariaLabel=\"Close alert icon\"\n        icon=\"x\" euiRounded euiSizeS euiNeutral\n        (buttonClick)=\"onCloseClick()\">\n    </button>\n}\n", styles: [".eui-21 :host.eds-alert.eds-alert--info{--_surface: var(--eds-c-surface-info-subtler);--_on-surface: var(--eds-c-on-surface-info-subtler);--_border-color: var(--eds-c-border-info)}.eui-21 :host.eds-alert.eds-alert--success{--_surface: var(--eds-c-surface-success-subtler);--_on-surface: var(--eds-c-on-surface-success-subtler);--_border-color: var(--eds-c-border-success)}.eui-21 :host.eds-alert.eds-alert--warning{--_surface: var(--eds-c-surface-warning-subtler);--_on-surface: var(--eds-c-on-surface-warning-subtler);--_border-color: var(--eds-c-border-warning)}.eui-21 :host.eds-alert.eds-alert--critical{--_surface: var(--eds-c-surface-critical-subtler);--_on-surface: var(--eds-c-on-surface-critical-subtler);--_border-color: var(--eds-c-border-critical)}.eui-21 :host.eds-alert{display:flex;width:100%;background-color:var(--_surface);padding:var(--eds-sp-s);border-radius:var(--eds-br-s);border-left:var(--eds-bw-m) solid var(--_border-color)}.eui-21 :host.eds-alert .eds-alert__content{display:flex;width:100%;flex-direction:column;padding:0 var(--eds-sp-xs);font:var(--eds-f-paragraph-s)}.eui-21 :host.eds-alert .eds-alert__close{margin-left:auto;display:flex;align-self:baseline;--_button-padding: var(--eds-sp-3xs)}\n"], dependencies: [{ kind: "component", type: i2.EdsIconButton, selector: "button[edsIconButton]", inputs: ["icon", "ariaLabel", "euiRounded", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i3.EdsIconState, selector: "eds-icon-state", inputs: ["ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: EdsAlert, isStandalone: true, selector: "div[edsAlert], eds-alert", inputs: { e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null }, isCloseable: { classPropertyName: "isCloseable", publicName: "isCloseable", isSignal: true, isRequired: false, transformFunction: null }, isVisible: { classPropertyName: "isVisible", publicName: "isVisible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isVisible: "isVisibleChange", closeAlert: "closeAlert" }, host: { attributes: { "role": "alert" }, properties: { "class": "hostClasses()", "attr.data-e2e": "e2eAttr()" } }, hostDirectives: [{ directive: i1.EdsBaseColorVariantsDirective, inputs: ["edsNeutral", "edsNeutral", "edsSuccess", "edsSuccess", "edsInfo", "edsInfo", "edsWarning", "edsWarning", "edsCritical", "edsCritical", "edsColorVariant", "edsColorVariant"] }], ngImport: i0, template: "<eds-icon-state class=\"eds-alert__icon\" [edsColorVariant]=\"colorVariantsBase.edsColorVariant\"/>\n\n<div class=\"eds-alert__content\">\n    <ng-content select=\"eds-alert-title\"/>\n    <ng-content />\n</div>\n\n@if (isCloseable()) {\n    <button edsIconButton class=\"eds-alert__close\" \n        ariaLabel=\"Close alert icon\"\n        icon=\"x\" edsRounded edsSizeS edsNeutral\n        (buttonClick)=\"onCloseClick()\">\n    </button>\n}\n", styles: [".eui-21 :host.eds-alert.eds-alert--info{--_surface: var(--eds-c-surface-info-subtler);--_on-surface: var(--eds-c-on-surface-info-subtler);--_border-color: var(--eds-c-border-info)}.eui-21 :host.eds-alert.eds-alert--success{--_surface: var(--eds-c-surface-success-subtler);--_on-surface: var(--eds-c-on-surface-success-subtler);--_border-color: var(--eds-c-border-success)}.eui-21 :host.eds-alert.eds-alert--warning{--_surface: var(--eds-c-surface-warning-subtler);--_on-surface: var(--eds-c-on-surface-warning-subtler);--_border-color: var(--eds-c-border-warning)}.eui-21 :host.eds-alert.eds-alert--critical{--_surface: var(--eds-c-surface-critical-subtler);--_on-surface: var(--eds-c-on-surface-critical-subtler);--_border-color: var(--eds-c-border-critical)}.eui-21 :host.eds-alert{display:flex;width:100%;background-color:var(--_surface);padding:var(--eds-sp-s);border-radius:var(--eds-br-s);border-left:var(--eds-bw-m) solid var(--_border-color)}.eui-21 :host.eds-alert .eds-alert__content{display:flex;width:100%;flex-direction:column;padding:0 var(--eds-sp-xs);font:var(--eds-f-paragraph-m)}.eui-21 :host.eds-alert .eds-alert__close{margin-left:auto;display:flex;align-self:baseline;--_button-padding: var(--eds-sp-3xs)}@media screen and (max-width:767px){.eui-21 :host.eds-alert .eds-alert__content{font:var(--eds-f-paragraph-s)}}\n"], dependencies: [{ kind: "component", type: i2.EdsIconButton, selector: "button[edsIconButton]", inputs: ["icon", "ariaLabel", "edsRounded", "edsDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i3.EdsIconState, selector: "eds-icon-state", inputs: ["ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsAlert, decorators: [{
             type: Component,
@@ -98,27 +75,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         ...EDS_ICON_STATE,
                     ], hostDirectives: [
                         {
-                            directive: EuiBaseColorVariantsDirective,
+                            directive: EdsBaseColorVariantsDirective,
                             inputs: [
-                                'euiNeutral',
-                                'euiSuccess',
-                                'euiInfo',
-                                'euiWarning',
-                                'euiCritical',
-                                'euiColorVariant',
+                                'edsNeutral',
+                                'edsSuccess',
+                                'edsInfo',
+                                'edsWarning',
+                                'edsCritical',
+                                'edsColorVariant',
                             ],
                         },
-                    ], template: "<eds-icon-state class=\"eds-alert__icon\" [euiColorVariant]=\"colorVariantsBase.euiColorVariant\"/>\n\n<div class=\"eds-alert__content\">\n    <ng-content select=\"eds-alert-title\"/>\n    <ng-content />\n</div>\n\n@if (isCloseable()) {\n    <button edsIconButton class=\"eds-alert__close\" \n        ariaLabel=\"Close alert icon\"\n        icon=\"x\" euiRounded euiSizeS euiNeutral\n        (buttonClick)=\"onCloseClick()\">\n    </button>\n}\n", styles: [".eui-21 :host.eds-alert.eds-alert--info{--_surface: var(--eds-c-surface-info-subtler);--_on-surface: var(--eds-c-on-surface-info-subtler);--_border-color: var(--eds-c-border-info)}.eui-21 :host.eds-alert.eds-alert--success{--_surface: var(--eds-c-surface-success-subtler);--_on-surface: var(--eds-c-on-surface-success-subtler);--_border-color: var(--eds-c-border-success)}.eui-21 :host.eds-alert.eds-alert--warning{--_surface: var(--eds-c-surface-warning-subtler);--_on-surface: var(--eds-c-on-surface-warning-subtler);--_border-color: var(--eds-c-border-warning)}.eui-21 :host.eds-alert.eds-alert--critical{--_surface: var(--eds-c-surface-critical-subtler);--_on-surface: var(--eds-c-on-surface-critical-subtler);--_border-color: var(--eds-c-border-critical)}.eui-21 :host.eds-alert{display:flex;width:100%;background-color:var(--_surface);padding:var(--eds-sp-s);border-radius:var(--eds-br-s);border-left:var(--eds-bw-m) solid var(--_border-color)}.eui-21 :host.eds-alert .eds-alert__content{display:flex;width:100%;flex-direction:column;padding:0 var(--eds-sp-xs);font:var(--eds-f-paragraph-s)}.eui-21 :host.eds-alert .eds-alert__close{margin-left:auto;display:flex;align-self:baseline;--_button-padding: var(--eds-sp-3xs)}\n"] }]
-        }], propDecorators: { cssClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }], role: [{
-                type: HostBinding,
-                args: ['attr.role']
-            }], e2eAttribute: [{
-                type: HostBinding,
-                args: ['attr.data-e2e']
-            }], e2eAttr: [{ type: i0.Input, args: [{ isSignal: true, alias: "e2eAttr", required: false }] }], isCloseable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCloseable", required: false }] }], isVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "isVisible", required: false }] }, { type: i0.Output, args: ["isVisibleChange"] }], closeAlert: [{ type: i0.Output, args: ["closeAlert"] }] } });
+                    ], host: {
+                        '[class]': 'hostClasses()',
+                        role: 'alert',
+                        '[attr.data-e2e]': 'e2eAttr()',
+                    }, template: "<eds-icon-state class=\"eds-alert__icon\" [edsColorVariant]=\"colorVariantsBase.edsColorVariant\"/>\n\n<div class=\"eds-alert__content\">\n    <ng-content select=\"eds-alert-title\"/>\n    <ng-content />\n</div>\n\n@if (isCloseable()) {\n    <button edsIconButton class=\"eds-alert__close\" \n        ariaLabel=\"Close alert icon\"\n        icon=\"x\" edsRounded edsSizeS edsNeutral\n        (buttonClick)=\"onCloseClick()\">\n    </button>\n}\n", styles: [".eui-21 :host.eds-alert.eds-alert--info{--_surface: var(--eds-c-surface-info-subtler);--_on-surface: var(--eds-c-on-surface-info-subtler);--_border-color: var(--eds-c-border-info)}.eui-21 :host.eds-alert.eds-alert--success{--_surface: var(--eds-c-surface-success-subtler);--_on-surface: var(--eds-c-on-surface-success-subtler);--_border-color: var(--eds-c-border-success)}.eui-21 :host.eds-alert.eds-alert--warning{--_surface: var(--eds-c-surface-warning-subtler);--_on-surface: var(--eds-c-on-surface-warning-subtler);--_border-color: var(--eds-c-border-warning)}.eui-21 :host.eds-alert.eds-alert--critical{--_surface: var(--eds-c-surface-critical-subtler);--_on-surface: var(--eds-c-on-surface-critical-subtler);--_border-color: var(--eds-c-border-critical)}.eui-21 :host.eds-alert{display:flex;width:100%;background-color:var(--_surface);padding:var(--eds-sp-s);border-radius:var(--eds-br-s);border-left:var(--eds-bw-m) solid var(--_border-color)}.eui-21 :host.eds-alert .eds-alert__content{display:flex;width:100%;flex-direction:column;padding:0 var(--eds-sp-xs);font:var(--eds-f-paragraph-m)}.eui-21 :host.eds-alert .eds-alert__close{margin-left:auto;display:flex;align-self:baseline;--_button-padding: var(--eds-sp-3xs)}@media screen and (max-width:767px){.eui-21 :host.eds-alert .eds-alert__content{font:var(--eds-f-paragraph-s)}}\n"] }]
+        }], propDecorators: { e2eAttr: [{ type: i0.Input, args: [{ isSignal: true, alias: "e2eAttr", required: false }] }], isCloseable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCloseable", required: false }] }], isVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "isVisible", required: false }] }, { type: i0.Output, args: ["isVisibleChange"] }], closeAlert: [{ type: i0.Output, args: ["closeAlert"] }] } });
 
 class EdsAlertTitle {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EdsAlertTitle, deps: [], target: i0.ɵɵFactoryTarget.Component }); }