@eui/components 18.0.0-next.6 → 18.0.0-next.7

package/fesm2022/eui-components-shared.mjs

@@ -1,49 +1,9 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
-
-// eui-components-shared.mjs
-var eui_components_shared_exports = {};
-__export(eui_components_shared_exports, {
-  EuiCommonHeaderComponent: () => EuiCommonHeaderComponent,
-  EuiCommonHeaderModule: () => EuiCommonHeaderModule,
-  EuiExpandContentComponent: () => EuiExpandContentComponent,
-  EuiExpandContentModule: () => EuiExpandContentModule,
-  InputDirective: () => InputDirective
-});
-
-// index.mjs
-var shared_exports = {};
-__export(shared_exports, {
-  EuiCommonHeaderComponent: () => EuiCommonHeaderComponent,
-  EuiCommonHeaderModule: () => EuiCommonHeaderModule,
-  EuiExpandContentComponent: () => EuiExpandContentComponent,
-  EuiExpandContentModule: () => EuiExpandContentModule,
-  InputDirective: () => InputDirective
-});
-
 // eui-expand-content/eui-expand-content.component.mjs
 import { coerceBooleanProperty } from "@angular/cdk/coercion";
 import { CommonModule } from "@angular/common";
 import { ChangeDetectionStrategy, Component, EventEmitter, HostBinding, Input, NgModule, Output, ViewEncapsulation } from "@angular/core";
-import { EuiIconModule } from "@eui/components/eui-icon";
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
-import * as i2 from "@eui/components/eui-icon";
 var EuiExpandContentComponent = class _EuiExpandContentComponent {
   constructor() {
     this.expandLabel = "";
@@ -68,12 +28,12 @@ var EuiExpandContentComponent = class _EuiExpandContentComponent {
     this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: _EuiExpandContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.2", type: _EuiExpandContentComponent, selector: "eui-expand-content", inputs: { isCollapsed: "isCollapsed", expandLabel: "expandLabel", collapseLabel: "collapseLabel" }, outputs: { collapsed: "collapsed" }, host: { properties: { "class": "this.cssClasses" } }, ngImport: i0, template: '<div *ngIf="!isCollapsed" class="eui-expand-content__body">\n    <ng-content></ng-content>\n</div>\n<div\n    class="eui-button__expand-trigger"\n    [class.eui-button__expand-trigger--collapsed]="isCollapsed"\n    role="document"\n    (click)="onToggle()"\n    aria-label="Expand / Collapse trigger">\n    <button type="button" *ngIf="isCollapsed" class="eui-button eui-button--expand-toggle" aria-label="Expand">\n        <span *ngIf="expandLabel" class="eui-label eui-u-color-grey-dark eui-u-mr-xs">{{ expandLabel }}</span>\n        <eui-icon-svg icon="eui-chevron-down"></eui-icon-svg>\n    </button>\n    <button type="button" *ngIf="!isCollapsed" class="eui-button eui-button--expand-toggle" aria-label="Collapse">\n        <span *ngIf="collapseLabel" class="eui-label eui-u-color-grey-dark eui-u-mr-xs">{{ collapseLabel }}</span>\n        <eui-icon-svg icon="eui-chevron-up"></eui-icon-svg>\n    </button>\n</div>\n', styles: [".eui-expand-content{display:flex;flex-direction:column;position:relative;width:100%}.eui-expand-content__body{display:flex;padding-top:var(--eui-base-spacing-m);width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "size", "fillColor", "set", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.2", type: _EuiExpandContentComponent, selector: "eui-expand-content", inputs: { isCollapsed: "isCollapsed", expandLabel: "expandLabel", collapseLabel: "collapseLabel" }, outputs: { collapsed: "collapsed" }, host: { properties: { "class": "this.cssClasses" } }, ngImport: i0, template: '<div *ngIf="!isCollapsed" class="eui-expand-content__body">\n    <ng-content></ng-content>\n</div>\n<div\n    class="eui-button__expand-trigger"\n    [class.eui-button__expand-trigger--collapsed]="isCollapsed"\n    role="document"\n    (click)="onToggle()"\n    aria-label="Expand / Collapse trigger">\n    <button type="button" *ngIf="isCollapsed" class="eui-button eui-button--expand-toggle" aria-label="Expand">\n        <span *ngIf="expandLabel" class="eui-label eui-u-color-grey-dark eui-u-mr-xs">{{ expandLabel }}</span>\n        <!-- <eui-icon-svg icon="eui-chevron-down"></eui-icon-svg> -->\n    </button>\n    <button type="button" *ngIf="!isCollapsed" class="eui-button eui-button--expand-toggle" aria-label="Collapse">\n        <span *ngIf="collapseLabel" class="eui-label eui-u-color-grey-dark eui-u-mr-xs">{{ collapseLabel }}</span>\n        <!-- <eui-icon-svg icon="eui-chevron-up"></eui-icon-svg> -->\n    </button>\n</div>\n', styles: [".eui-expand-content{display:flex;flex-direction:column;position:relative;width:100%}.eui-expand-content__body{display:flex;padding-top:var(--eui-base-spacing-m);width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
   }
 };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EuiExpandContentComponent, decorators: [{
   type: Component,
-  args: [{ selector: "eui-expand-content", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<div *ngIf="!isCollapsed" class="eui-expand-content__body">\n    <ng-content></ng-content>\n</div>\n<div\n    class="eui-button__expand-trigger"\n    [class.eui-button__expand-trigger--collapsed]="isCollapsed"\n    role="document"\n    (click)="onToggle()"\n    aria-label="Expand / Collapse trigger">\n    <button type="button" *ngIf="isCollapsed" class="eui-button eui-button--expand-toggle" aria-label="Expand">\n        <span *ngIf="expandLabel" class="eui-label eui-u-color-grey-dark eui-u-mr-xs">{{ expandLabel }}</span>\n        <eui-icon-svg icon="eui-chevron-down"></eui-icon-svg>\n    </button>\n    <button type="button" *ngIf="!isCollapsed" class="eui-button eui-button--expand-toggle" aria-label="Collapse">\n        <span *ngIf="collapseLabel" class="eui-label eui-u-color-grey-dark eui-u-mr-xs">{{ collapseLabel }}</span>\n        <eui-icon-svg icon="eui-chevron-up"></eui-icon-svg>\n    </button>\n</div>\n', styles: [".eui-expand-content{display:flex;flex-direction:column;position:relative;width:100%}.eui-expand-content__body{display:flex;padding-top:var(--eui-base-spacing-m);width:100%}\n"] }]
+  args: [{ selector: "eui-expand-content", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<div *ngIf="!isCollapsed" class="eui-expand-content__body">\n    <ng-content></ng-content>\n</div>\n<div\n    class="eui-button__expand-trigger"\n    [class.eui-button__expand-trigger--collapsed]="isCollapsed"\n    role="document"\n    (click)="onToggle()"\n    aria-label="Expand / Collapse trigger">\n    <button type="button" *ngIf="isCollapsed" class="eui-button eui-button--expand-toggle" aria-label="Expand">\n        <span *ngIf="expandLabel" class="eui-label eui-u-color-grey-dark eui-u-mr-xs">{{ expandLabel }}</span>\n        <!-- <eui-icon-svg icon="eui-chevron-down"></eui-icon-svg> -->\n    </button>\n    <button type="button" *ngIf="!isCollapsed" class="eui-button eui-button--expand-toggle" aria-label="Collapse">\n        <span *ngIf="collapseLabel" class="eui-label eui-u-color-grey-dark eui-u-mr-xs">{{ collapseLabel }}</span>\n        <!-- <eui-icon-svg icon="eui-chevron-up"></eui-icon-svg> -->\n    </button>\n</div>\n', styles: [".eui-expand-content{display:flex;flex-direction:column;position:relative;width:100%}.eui-expand-content__body{display:flex;padding-top:var(--eui-base-spacing-m);width:100%}\n"] }]
 }], propDecorators: { cssClasses: [{
   type: HostBinding,
   args: ["class"]
@@ -91,16 +51,18 @@ var EuiExpandContentModule = class _EuiExpandContentModule {
     this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: _EuiExpandContentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
   }
   static {
-    this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.0-next.2", ngImport: i0, type: _EuiExpandContentModule, declarations: [EuiExpandContentComponent], imports: [CommonModule, EuiIconModule], exports: [EuiExpandContentComponent] });
+    this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.0-next.2", ngImport: i0, type: _EuiExpandContentModule, declarations: [EuiExpandContentComponent], imports: [CommonModule], exports: [EuiExpandContentComponent] });
   }
   static {
-    this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: _EuiExpandContentModule, imports: [CommonModule, EuiIconModule] });
+    this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: _EuiExpandContentModule, imports: [CommonModule] });
   }
 };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i0, type: EuiExpandContentModule, decorators: [{
   type: NgModule,
   args: [{
-    imports: [CommonModule, EuiIconModule],
+    // TODO v18
+    // imports: [CommonModule, EuiIconModule],
+    imports: [CommonModule],
     declarations: [EuiExpandContentComponent],
     exports: [EuiExpandContentComponent]
   }]
@@ -110,10 +72,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.2",
 import { coerceBooleanProperty as coerceBooleanProperty2 } from "@angular/cdk/coercion";
 import { CommonModule as CommonModule2 } from "@angular/common";
 import { NgModule as NgModule2, Component as Component2, ChangeDetectionStrategy as ChangeDetectionStrategy3, HostBinding as HostBinding2, ViewEncapsulation as ViewEncapsulation3, Input as Input2 } from "@angular/core";
-import { EuiTooltipDirectiveModule } from "@eui/components/directives";
 import * as i02 from "@angular/core";
 import * as i12 from "@angular/common";
-import * as i22 from "@eui/components/directives";
 var EuiCommonHeaderComponent = class _EuiCommonHeaderComponent {
   constructor() {
     this._isHighlighted = false;
@@ -138,12 +98,12 @@ var EuiCommonHeaderComponent = class _EuiCommonHeaderComponent {
     this.ɵfac = i02.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i02, type: _EuiCommonHeaderComponent, deps: [], target: i02.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i02.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.2", type: _EuiCommonHeaderComponent, selector: "eui-common-header", inputs: { label: "label", subLabel: "subLabel", labelTooltip: "labelTooltip", subLabelTooltip: "subLabelTooltip", isHighlighted: "isHighlighted", isCollapsed: "isCollapsed" }, host: { properties: { "class": "this.cssClasses" } }, ngImport: i02, template: '<div class="eui-common-header__label">\n    <div class="eui-common-header__label-text" role="heading" aria-level="1" attr.aria-label="{{ label }}" [euiTooltip]="labelTooltip ? labelTooltip : null">{{ label }}</div>\n    <div class="eui-common-header__actions">\n        <ng-content></ng-content>\n    </div>\n</div>\n<div\n    *ngIf="subLabel"\n    class="eui-common-header__sub-label"\n    role="heading"\n    aria-level="2"\n    [class.eui-common-header__sub-label--collapsed]="isCollapsed"\n    attr.aria-label="{{ subLabel }}"\n    [euiTooltip]="subLabelTooltip ? subLabelTooltip : null">\n    <div class="eui-common-header__sub-label-text">{{ subLabel }}</div>\n</div>\n', styles: [".eui-common-header{display:flex;flex-direction:column;width:100%}.eui-common-header__label{align-items:center;display:flex;font-size:var(--eui-base-font-size-3xl);justify-content:space-between;width:100%}.eui-common-header__label-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-common-header__sub-label{align-items:center;color:var(--eui-base-color-grey-90);display:flex;justify-content:space-between;padding-top:var(--eui-base-spacing-2xs);width:100%;font:normal normal 400 1.25rem/1.5rem var(--eui-base-font-family)}.eui-common-header__sub-label-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-common-header__actions{display:flex;flex:1 0 auto;justify-content:flex-end;margin-left:var(--eui-base-spacing-s)}.eui-common-header__body{display:flex;padding:var(--eui-base-spacing-m);transition:all .5s;width:100%}.eui-common-header__expand-trigger{bottom:calc(-1 * var(--eui-base-spacing-xs));left:0;position:absolute;text-align:center;width:100%}.eui-common-header__expand-trigger-toggle{background:var(--eui-base-color-white);border-bottom:2px solid #9a9a9a;border-radius:50%;cursor:pointer;font-size:1.25rem;padding:.125rem .5rem}.eui-common-header__expand-trigger-toggle:hover,.eui-common-header__expand-trigger-toggle:focus{color:var(--eui-base-color-primary-100);box-shadow:var(--eui-base-shadow-2)}@media screen and (max-width: 767px){.eui-common-header__label-text,.eui-common-header__sub-label-text{white-space:normal!important}}@media screen and (min-width: 768px) and (max-width: 995px){.eui-common-header__label-text,.eui-common-header__sub-label-text{white-space:normal!important}}.eui-common-header--collapsed .eui-common-header__body{transition:all .5s}\n"], dependencies: [{ kind: "directive", type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i22.EuiTooltipDirective, selector: "[euiTooltip]", inputs: ["e2eAttr", "showDelay", "hideDelay", "contentAlignment", "position", "isDisabled", "euiTooltip", "euiTooltipPrimary", "euiTooltipSecondary", "euiTooltipInfo", "euiTooltipSuccess", "euiTooltipWarning", "euiTooltipDanger", "euiTooltipAccent"], exportAs: ["euiTooltip"] }], changeDetection: i02.ChangeDetectionStrategy.OnPush, encapsulation: i02.ViewEncapsulation.None });
+    this.ɵcmp = i02.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.2", type: _EuiCommonHeaderComponent, selector: "eui-common-header", inputs: { label: "label", subLabel: "subLabel", labelTooltip: "labelTooltip", subLabelTooltip: "subLabelTooltip", isHighlighted: "isHighlighted", isCollapsed: "isCollapsed" }, host: { properties: { "class": "this.cssClasses" } }, ngImport: i02, template: '<div class="eui-common-header__label">\n    <div class="eui-common-header__label-text" role="heading" aria-level="1" attr.aria-label="{{ label }}">{{ label }}</div>\n    <div class="eui-common-header__actions">\n        <ng-content></ng-content>\n    </div>\n</div>\n<div\n    *ngIf="subLabel"\n    class="eui-common-header__sub-label"\n    role="heading"\n    aria-level="2"\n    [class.eui-common-header__sub-label--collapsed]="isCollapsed"\n    attr.aria-label="{{ subLabel }}">\n    <div class="eui-common-header__sub-label-text">{{ subLabel }}</div>\n</div>\n<!-- TODO v18\n<div class="eui-common-header__label">\n    <div class="eui-common-header__label-text" role="heading" aria-level="1" attr.aria-label="{{ label }}" [euiTooltip]="labelTooltip ? labelTooltip : null">{{ label }}</div>\n    <div class="eui-common-header__actions">\n        <ng-content></ng-content>\n    </div>\n</div>\n<div\n    *ngIf="subLabel"\n    class="eui-common-header__sub-label"\n    role="heading"\n    aria-level="2"\n    [class.eui-common-header__sub-label--collapsed]="isCollapsed"\n    attr.aria-label="{{ subLabel }}"\n    [euiTooltip]="subLabelTooltip ? subLabelTooltip : null">\n    <div class="eui-common-header__sub-label-text">{{ subLabel }}</div>\n</div> -->\n', styles: [".eui-common-header{display:flex;flex-direction:column;width:100%}.eui-common-header__label{align-items:center;display:flex;font-size:var(--eui-base-font-size-3xl);justify-content:space-between;width:100%}.eui-common-header__label-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-common-header__sub-label{align-items:center;color:var(--eui-base-color-grey-90);display:flex;justify-content:space-between;padding-top:var(--eui-base-spacing-2xs);width:100%;font:normal normal 400 1.25rem/1.5rem var(--eui-base-font-family)}.eui-common-header__sub-label-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-common-header__actions{display:flex;flex:1 0 auto;justify-content:flex-end;margin-left:var(--eui-base-spacing-s)}.eui-common-header__body{display:flex;padding:var(--eui-base-spacing-m);transition:all .5s;width:100%}.eui-common-header__expand-trigger{bottom:calc(-1 * var(--eui-base-spacing-xs));left:0;position:absolute;text-align:center;width:100%}.eui-common-header__expand-trigger-toggle{background:var(--eui-base-color-white);border-bottom:2px solid #9a9a9a;border-radius:50%;cursor:pointer;font-size:1.25rem;padding:.125rem .5rem}.eui-common-header__expand-trigger-toggle:hover,.eui-common-header__expand-trigger-toggle:focus{color:var(--eui-base-color-primary-100);box-shadow:var(--eui-base-shadow-2)}@media screen and (max-width: 767px){.eui-common-header__label-text,.eui-common-header__sub-label-text{white-space:normal!important}}@media screen and (min-width: 768px) and (max-width: 995px){.eui-common-header__label-text,.eui-common-header__sub-label-text{white-space:normal!important}}.eui-common-header--collapsed .eui-common-header__body{transition:all .5s}\n"], dependencies: [{ kind: "directive", type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i02.ChangeDetectionStrategy.OnPush, encapsulation: i02.ViewEncapsulation.None });
   }
 };
 i02.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i02, type: EuiCommonHeaderComponent, decorators: [{
   type: Component2,
-  args: [{ selector: "eui-common-header", changeDetection: ChangeDetectionStrategy3.OnPush, encapsulation: ViewEncapsulation3.None, template: '<div class="eui-common-header__label">\n    <div class="eui-common-header__label-text" role="heading" aria-level="1" attr.aria-label="{{ label }}" [euiTooltip]="labelTooltip ? labelTooltip : null">{{ label }}</div>\n    <div class="eui-common-header__actions">\n        <ng-content></ng-content>\n    </div>\n</div>\n<div\n    *ngIf="subLabel"\n    class="eui-common-header__sub-label"\n    role="heading"\n    aria-level="2"\n    [class.eui-common-header__sub-label--collapsed]="isCollapsed"\n    attr.aria-label="{{ subLabel }}"\n    [euiTooltip]="subLabelTooltip ? subLabelTooltip : null">\n    <div class="eui-common-header__sub-label-text">{{ subLabel }}</div>\n</div>\n', styles: [".eui-common-header{display:flex;flex-direction:column;width:100%}.eui-common-header__label{align-items:center;display:flex;font-size:var(--eui-base-font-size-3xl);justify-content:space-between;width:100%}.eui-common-header__label-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-common-header__sub-label{align-items:center;color:var(--eui-base-color-grey-90);display:flex;justify-content:space-between;padding-top:var(--eui-base-spacing-2xs);width:100%;font:normal normal 400 1.25rem/1.5rem var(--eui-base-font-family)}.eui-common-header__sub-label-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-common-header__actions{display:flex;flex:1 0 auto;justify-content:flex-end;margin-left:var(--eui-base-spacing-s)}.eui-common-header__body{display:flex;padding:var(--eui-base-spacing-m);transition:all .5s;width:100%}.eui-common-header__expand-trigger{bottom:calc(-1 * var(--eui-base-spacing-xs));left:0;position:absolute;text-align:center;width:100%}.eui-common-header__expand-trigger-toggle{background:var(--eui-base-color-white);border-bottom:2px solid #9a9a9a;border-radius:50%;cursor:pointer;font-size:1.25rem;padding:.125rem .5rem}.eui-common-header__expand-trigger-toggle:hover,.eui-common-header__expand-trigger-toggle:focus{color:var(--eui-base-color-primary-100);box-shadow:var(--eui-base-shadow-2)}@media screen and (max-width: 767px){.eui-common-header__label-text,.eui-common-header__sub-label-text{white-space:normal!important}}@media screen and (min-width: 768px) and (max-width: 995px){.eui-common-header__label-text,.eui-common-header__sub-label-text{white-space:normal!important}}.eui-common-header--collapsed .eui-common-header__body{transition:all .5s}\n"] }]
+  args: [{ selector: "eui-common-header", changeDetection: ChangeDetectionStrategy3.OnPush, encapsulation: ViewEncapsulation3.None, template: '<div class="eui-common-header__label">\n    <div class="eui-common-header__label-text" role="heading" aria-level="1" attr.aria-label="{{ label }}">{{ label }}</div>\n    <div class="eui-common-header__actions">\n        <ng-content></ng-content>\n    </div>\n</div>\n<div\n    *ngIf="subLabel"\n    class="eui-common-header__sub-label"\n    role="heading"\n    aria-level="2"\n    [class.eui-common-header__sub-label--collapsed]="isCollapsed"\n    attr.aria-label="{{ subLabel }}">\n    <div class="eui-common-header__sub-label-text">{{ subLabel }}</div>\n</div>\n<!-- TODO v18\n<div class="eui-common-header__label">\n    <div class="eui-common-header__label-text" role="heading" aria-level="1" attr.aria-label="{{ label }}" [euiTooltip]="labelTooltip ? labelTooltip : null">{{ label }}</div>\n    <div class="eui-common-header__actions">\n        <ng-content></ng-content>\n    </div>\n</div>\n<div\n    *ngIf="subLabel"\n    class="eui-common-header__sub-label"\n    role="heading"\n    aria-level="2"\n    [class.eui-common-header__sub-label--collapsed]="isCollapsed"\n    attr.aria-label="{{ subLabel }}"\n    [euiTooltip]="subLabelTooltip ? subLabelTooltip : null">\n    <div class="eui-common-header__sub-label-text">{{ subLabel }}</div>\n</div> -->\n', styles: [".eui-common-header{display:flex;flex-direction:column;width:100%}.eui-common-header__label{align-items:center;display:flex;font-size:var(--eui-base-font-size-3xl);justify-content:space-between;width:100%}.eui-common-header__label-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-common-header__sub-label{align-items:center;color:var(--eui-base-color-grey-90);display:flex;justify-content:space-between;padding-top:var(--eui-base-spacing-2xs);width:100%;font:normal normal 400 1.25rem/1.5rem var(--eui-base-font-family)}.eui-common-header__sub-label-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-common-header__actions{display:flex;flex:1 0 auto;justify-content:flex-end;margin-left:var(--eui-base-spacing-s)}.eui-common-header__body{display:flex;padding:var(--eui-base-spacing-m);transition:all .5s;width:100%}.eui-common-header__expand-trigger{bottom:calc(-1 * var(--eui-base-spacing-xs));left:0;position:absolute;text-align:center;width:100%}.eui-common-header__expand-trigger-toggle{background:var(--eui-base-color-white);border-bottom:2px solid #9a9a9a;border-radius:50%;cursor:pointer;font-size:1.25rem;padding:.125rem .5rem}.eui-common-header__expand-trigger-toggle:hover,.eui-common-header__expand-trigger-toggle:focus{color:var(--eui-base-color-primary-100);box-shadow:var(--eui-base-shadow-2)}@media screen and (max-width: 767px){.eui-common-header__label-text,.eui-common-header__sub-label-text{white-space:normal!important}}@media screen and (min-width: 768px) and (max-width: 995px){.eui-common-header__label-text,.eui-common-header__sub-label-text{white-space:normal!important}}.eui-common-header--collapsed .eui-common-header__body{transition:all .5s}\n"] }]
 }], propDecorators: { cssClasses: [{
   type: HostBinding2,
   args: ["class"]
@@ -165,41 +125,1218 @@ var EuiCommonHeaderModule = class _EuiCommonHeaderModule {
     this.ɵfac = i02.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i02, type: _EuiCommonHeaderModule, deps: [], target: i02.ɵɵFactoryTarget.NgModule });
   }
   static {
-    this.ɵmod = i02.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.0-next.2", ngImport: i02, type: _EuiCommonHeaderModule, declarations: [EuiCommonHeaderComponent], imports: [CommonModule2, EuiTooltipDirectiveModule], exports: [EuiCommonHeaderComponent] });
+    this.ɵmod = i02.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.0-next.2", ngImport: i02, type: _EuiCommonHeaderModule, declarations: [EuiCommonHeaderComponent], imports: [CommonModule2], exports: [EuiCommonHeaderComponent] });
   }
   static {
-    this.ɵinj = i02.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i02, type: _EuiCommonHeaderModule, imports: [CommonModule2, EuiTooltipDirectiveModule] });
+    this.ɵinj = i02.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i02, type: _EuiCommonHeaderModule, imports: [CommonModule2] });
   }
 };
 i02.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i02, type: EuiCommonHeaderModule, decorators: [{
   type: NgModule2,
   args: [{
-    imports: [CommonModule2, EuiTooltipDirectiveModule],
+    // TODO v18
+    // imports: [CommonModule, EuiTooltipDirectiveModule],
+    imports: [CommonModule2],
     declarations: [EuiCommonHeaderComponent],
     exports: [EuiCommonHeaderComponent]
   }]
 }] });
 
-// input.directive.mjs
-import { Directive, HostBinding as HostBinding3, Input as Input3, ViewContainerRef } from "@angular/core";
-import { FormControlDirective, FormControlName, FormGroupDirective, NgControl } from "@angular/forms";
+// base/mixins/typeclass/eui-primary.mixin.mjs
 import { coerceBooleanProperty as coerceBooleanProperty3 } from "@angular/cdk/coercion";
-import { mixinEuiDisabled, mixinEuiDanger } from "@eui/components/shared/base";
+function mixinEuiPrimary(base = class {
+}) {
+  class Mixin extends base {
+    /** Whether the euiPrimary is disabled or not. */
+    get euiPrimary() {
+      return this._euiPrimary;
+    }
+    set euiPrimary(value) {
+      this._euiPrimary = coerceBooleanProperty3(value);
+    }
+    constructor(...args) {
+      super(...args);
+      this._euiPrimary = false;
+    }
+    getCssClasses(rootClass = "") {
+      return [super["getCssClasses"] ? super["getCssClasses"](rootClass) : rootClass, this._euiPrimary ? `${rootClass}--primary` : ""].join(" ").trim();
+    }
+  }
+  return Mixin;
+}
+
+// base/mixins/typeclass/eui-secondary.mixin.mjs
+import { coerceBooleanProperty as coerceBooleanProperty4 } from "@angular/cdk/coercion";
+var mixinEuiSecondary = (base = class {
+}) => {
+  class Mixin extends base {
+    /** Whether the EuiSecondary is disabled or not. */
+    get euiSecondary() {
+      return this._euiSecondary;
+    }
+    set euiSecondary(value) {
+      this._euiSecondary = coerceBooleanProperty4(value);
+    }
+    constructor(...args) {
+      super(...args);
+      this._euiSecondary = false;
+    }
+    getCssClasses(rootClass = "") {
+      return [
+        super["getCssClasses"] ? super["getCssClasses"](rootClass) : rootClass,
+        this._euiSecondary ? `${rootClass}--secondary` : ""
+      ].join(" ").trim();
+    }
+  }
+  return Mixin;
+};
+
+// base/mixins/typeclass/eui-info.mixin.mjs
+import { coerceBooleanProperty as coerceBooleanProperty5 } from "@angular/cdk/coercion";
+function mixinEuiInfo(base = class {
+}) {
+  class Mixin extends base {
+    /** Whether the EuiInfo is disabled or not. */
+    get euiInfo() {
+      return this._euiInfo;
+    }
+    set euiInfo(value) {
+      this._euiInfo = coerceBooleanProperty5(value);
+    }
+    constructor(...args) {
+      super(...args);
+      this._euiInfo = false;
+    }
+    getCssClasses(rootClass = "") {
+      return [super["getCssClasses"] ? super["getCssClasses"](rootClass) : rootClass, this._euiInfo ? `${rootClass}--info` : ""].join(" ").trim();
+    }
+  }
+  return Mixin;
+}
+
+// base/mixins/typeclass/eui-success.mixin.mjs
+import { coerceBooleanProperty as coerceBooleanProperty6 } from "@angular/cdk/coercion";
+var mixinEuiSuccess = (base = class {
+}) => {
+  class Mixin extends base {
+    /** Whether the EuiSuccess is disabled or not. */
+    get euiSuccess() {
+      return this._euiSuccess;
+    }
+    set euiSuccess(value) {
+      this._euiSuccess = coerceBooleanProperty6(value);
+    }
+    constructor(...args) {
+      super(...args);
+      this._euiSuccess = false;
+    }
+    getCssClasses(rootClass = "") {
+      return [super["getCssClasses"] ? super["getCssClasses"](rootClass) : rootClass, this._euiSuccess ? `${rootClass}--success` : ""].join(" ").trim();
+    }
+  }
+  return Mixin;
+};
+
+// base/mixins/typeclass/eui-warning.mixin.mjs
+import { coerceBooleanProperty as coerceBooleanProperty7 } from "@angular/cdk/coercion";
+var mixinEuiWarning = (base = class {
+}) => {
+  class Mixin extends base {
+    /** Whether the EuiWarning is disabled or not. */
+    get euiWarning() {
+      return this._euiWarning;
+    }
+    set euiWarning(value) {
+      this._euiWarning = coerceBooleanProperty7(value);
+    }
+    constructor(...args) {
+      super(...args);
+      this._euiWarning = false;
+    }
+    getCssClasses(rootClass = "") {
+      return [super["getCssClasses"] ? super["getCssClasses"](rootClass) : rootClass, this._euiWarning ? `${rootClass}--warning` : ""].join(" ").trim();
+    }
+  }
+  return Mixin;
+};
+
+// base/mixins/typeclass/eui-accent.mixin.mjs
+import { coerceBooleanProperty as coerceBooleanProperty8 } from "@angular/cdk/coercion";
+function mixinEuiAccent(base = class {
+}) {
+  class Mixin extends base {
+    /** Whether the EuiAccent is disabled or not. */
+    get euiAccent() {
+      return this._euiAccent;
+    }
+    set euiAccent(value) {
+      this._euiAccent = coerceBooleanProperty8(value);
+    }
+    constructor(...args) {
+      super(...args);
+      this._euiAccent = false;
+    }
+    getCssClasses(rootClass = "") {
+      return [super["getCssClasses"] ? super["getCssClasses"](rootClass) : rootClass, this._euiAccent ? `${rootClass}--accent` : ""].join(" ").trim();
+    }
+  }
+  return Mixin;
+}
+
+// base/mixins/typeclass/eui-danger.mixin.mjs
+import { coerceBooleanProperty as coerceBooleanProperty9 } from "@angular/cdk/coercion";
+function mixinEuiDanger(base = class {
+}) {
+  class Mixin extends base {
+    /** Whether the EuiDanger is disabled or not. */
+    get euiDanger() {
+      return this._euiDanger;
+    }
+    set euiDanger(value) {
+      this._euiDanger = coerceBooleanProperty9(value);
+    }
+    constructor(...args) {
+      super(...args);
+      this._euiDanger = false;
+    }
+    getCssClasses(rootClass = "") {
+      return [super["getCssClasses"] ? super["getCssClasses"](rootClass) : rootClass, this._euiDanger ? `${rootClass}--danger` : ""].join(" ").trim();
+    }
+  }
+  return Mixin;
+}
+
+// base/mixins/typeclass/eui-variant.mixin.mjs
+var mixinEuiVariant = (base = class {
+}) => {
+  class Mixin extends base {
+    /** Whether the EuiVariant is disabled or not. */
+    get euiVariant() {
+      return this._euiVariant;
+    }
+    set euiVariant(value) {
+      super.euiPrimary = value === "primary";
+      super.euiSecondary = value === "secondary";
+      super.euiWarning = value === "warning";
+      super.euiInfo = value === "info";
+      super.euiSuccess = value === "success";
+      super.euiDanger = value === "danger";
+      super.euiAccent = value === "accent";
+      this._euiVariant = value;
+    }
+    constructor(...args) {
+      super(...args);
+      this._euiVariant = "";
+    }
+  }
+  return Mixin;
+};
+
+// base/mixins/state/eui-disabled.mixin.mjs
+import { coerceBooleanProperty as coerceBooleanProperty10 } from "@angular/cdk/coercion";
+function mixinEuiDisabled(base = class {
+}) {
+  class Mixin extends base {
+    /** Whether the euiDisabled is disabled or not. */
+    get euiDisabled() {
+      return this._euiDisabled;
+    }
+    set euiDisabled(value) {
+      this._euiDisabled = coerceBooleanProperty10(value);
+    }
+    constructor(...args) {
+      super(...args);
+      this._euiDisabled = false;
+    }
+    getCssClasses(rootClass = "") {
+      return [
+        super["getCssClasses"] ? super["getCssClasses"](rootClass) : rootClass,
+        this._euiDisabled ? `${rootClass}--disabled disabled` : ""
+      ].join(" ").trim();
+    }
+  }
+  return Mixin;
+}
+
+// base/mixins/state/eui-clearable.mixin.mjs
+import { coerceBooleanProperty as coerceBooleanProperty11 } from "@angular/cdk/coercion";
+function mixinEuiClearable(base = class {
+}) {
+  class Mixin extends base {
+    /** Whether the euiClearable is disabled or not. */
+    get euiClearable() {
+      return this._euiClearable;
+    }
+    set euiClearable(value) {
+      this._euiClearable = coerceBooleanProperty11(value);
+    }
+    constructor(...args) {
+      super(...args);
+      this._euiClearable = false;
+    }
+    getCssClasses(rootClass = "") {
+      return [
+        super["getCssClasses"] ? super["getCssClasses"](rootClass) : rootClass,
+        this._euiClearable ? `${rootClass}--clearable` : ""
+      ].join(" ").trim();
+    }
+  }
+  return Mixin;
+}
+
+// base/mixins/state/eui-loading.mixin.mjs
+import { coerceBooleanProperty as coerceBooleanProperty12 } from "@angular/cdk/coercion";
+function mixinEuiLoading(base = class {
+}) {
+  class Mixin extends base {
+    /** Whether the euiLoading is disabled or not. */
+    get euiLoading() {
+      return this._euiLoading;
+    }
+    set euiLoading(value) {
+      this._euiLoading = coerceBooleanProperty12(value);
+    }
+    constructor(...args) {
+      super(...args);
+      this._euiLoading = false;
+    }
+    getCssClasses(rootClass = "") {
+      return [super["getCssClasses"] ? super["getCssClasses"](rootClass) : rootClass, this._euiLoading ? `${rootClass}--loading` : ""].join(" ").trim();
+    }
+  }
+  return Mixin;
+}
+
+// base/mixins/state/eui-rounded.mixin.mjs
+import { coerceBooleanProperty as coerceBooleanProperty13 } from "@angular/cdk/coercion";
+function mixinEuiRounded(base = class {
+}) {
+  class Mixin extends base {
+    /** Whether the euiRounded is disabled or not. */
+    get euiRounded() {
+      return this._euiRounded;
+    }
+    set euiRounded(value) {
+      this._euiRounded = coerceBooleanProperty13(value);
+    }
+    constructor(...args) {
+      super(...args);
+      this._euiRounded = false;
+    }
+    getCssClasses(rootClass = "") {
+      return [super["getCssClasses"] ? super["getCssClasses"](rootClass) : rootClass, this._euiRounded ? `${rootClass}--rounded` : ""].join(" ").trim();
+    }
+  }
+  return Mixin;
+}
+
+// base/mixins/state/eui-outline.mixin.mjs
+import { coerceBooleanProperty as coerceBooleanProperty14 } from "@angular/cdk/coercion";
+function mixinEuiOutline(base = class {
+}) {
+  class Mixin extends base {
+    /** Whether the euiOutline is disabled or not. */
+    get euiOutline() {
+      return this._euiOutline;
+    }
+    set euiOutline(value) {
+      this._euiOutline = coerceBooleanProperty14(value);
+    }
+    constructor(...args) {
+      super(...args);
+      this._euiOutline = false;
+    }
+    getCssClasses(rootClass = "") {
+      return [super["getCssClasses"] ? super["getCssClasses"](rootClass) : rootClass, this._euiOutline ? `${rootClass}--outline` : ""].join(" ").trim();
+    }
+  }
+  return Mixin;
+}
+
+// base/mixins/state/eui-compact.mixin.mjs
+import { coerceBooleanProperty as coerceBooleanProperty15 } from "@angular/cdk/coercion";
+function mixinEuiCompact(base = class {
+}) {
+  class Mixin extends base {
+    /** Whether the euiCompact is disabled or not. */
+    get euiCompact() {
+      return this._euiCompact;
+    }
+    set euiCompact(value) {
+      this._euiCompact = coerceBooleanProperty15(value);
+    }
+    constructor(...args) {
+      super(...args);
+      this._euiCompact = false;
+    }
+    getCssClasses(rootClass = "") {
+      return [super["getCssClasses"] ? super["getCssClasses"](rootClass) : rootClass, this._euiCompact ? `${rootClass}--compact` : ""].join(" ").trim();
+    }
+  }
+  return Mixin;
+}
+
+// base/mixins/state/eui-responsive.mixin.mjs
+import { coerceBooleanProperty as coerceBooleanProperty16 } from "@angular/cdk/coercion";
+function mixinEuiResponsive(base = class {
+}) {
+  class Mixin extends base {
+    /** Whether the euiResponsive is disabled or not. */
+    get euiResponsive() {
+      return this._euiResponsive;
+    }
+    set euiResponsive(value) {
+      this._euiResponsive = coerceBooleanProperty16(value);
+    }
+    constructor(...args) {
+      super(...args);
+      this._euiResponsive = false;
+    }
+    getCssClasses(rootClass = "") {
+      return [
+        super["getCssClasses"] ? super["getCssClasses"](rootClass) : rootClass,
+        this._euiResponsive ? `${rootClass}--responsive` : ""
+      ].join(" ").trim();
+    }
+  }
+  return Mixin;
+}
+
+// base/mixins/state/eui-highlighted.mixin.mjs
+import { coerceBooleanProperty as coerceBooleanProperty17 } from "@angular/cdk/coercion";
+function mixinEuiHighlighted(base = class {
+}) {
+  class Mixin extends base {
+    /** Whether the euiHighlighted is disabled or not. */
+    get euiHighlighted() {
+      return this._euiHighlighted;
+    }
+    set euiHighlighted(value) {
+      this._euiHighlighted = coerceBooleanProperty17(value);
+    }
+    constructor(...args) {
+      super(...args);
+      this._euiHighlighted = false;
+    }
+    getCssClasses(rootClass = "") {
+      return [
+        super["getCssClasses"] ? super["getCssClasses"](rootClass) : rootClass,
+        this._euiHighlighted ? `${rootClass}--highlighted` : ""
+      ].join(" ").trim();
+    }
+  }
+  return Mixin;
+}
+
+// base/mixins/size/eui-small.mixin.mjs
+import { coerceBooleanProperty as coerceBooleanProperty18 } from "@angular/cdk/coercion";
+function mixinEuiSmallSize(base = class {
+}) {
+  class Mixin extends base {
+    /** apply extremely small size */
+    get euiSize2XS() {
+      return this._euiSize2XS;
+    }
+    set euiSize2XS(value) {
+      this._euiSize2XS = coerceBooleanProperty18(value);
+    }
+    /** apply extra small size */
+    get euiSizeXS() {
+      return this._euiSizeXS;
+    }
+    set euiSizeXS(value) {
+      this._euiSizeXS = coerceBooleanProperty18(value);
+    }
+    /** apply small size */
+    get euiSizeS() {
+      return this._euiSizeS;
+    }
+    set euiSizeS(value) {
+      this._euiSizeS = coerceBooleanProperty18(value);
+    }
+    constructor(...args) {
+      super(...args);
+      this._euiSize2XS = false;
+      this._euiSizeXS = false;
+      this._euiSizeS = false;
+    }
+    getCssClasses(rootClass = "") {
+      return [
+        super["getCssClasses"] ? super["getCssClasses"](rootClass) : rootClass,
+        this._euiSize2XS ? `${rootClass}--size-2xs` : "",
+        this._euiSizeXS ? `${rootClass}--size-xs` : "",
+        this._euiSizeS ? `${rootClass}--size-s` : ""
+      ].join(" ").trim();
+    }
+  }
+  return Mixin;
+}
+
+// base/mixins/size/eui-medium.mixin.mjs
+import { coerceBooleanProperty as coerceBooleanProperty19 } from "@angular/cdk/coercion";
+function mixinEuiMediumSize(base = class {
+}) {
+  class Mixin extends base {
+    /** apply small size */
+    get euiSizeM() {
+      return this._euiSizeM;
+    }
+    set euiSizeM(value) {
+      this._euiSizeM = coerceBooleanProperty19(value);
+    }
+    constructor(...args) {
+      super(...args);
+      this._euiSizeM = false;
+    }
+    getCssClasses(rootClass = "") {
+      return [super["getCssClasses"] ? super["getCssClasses"](rootClass) : rootClass, this._euiSizeM ? `${rootClass}--size-m` : ""].join(" ").trim();
+    }
+  }
+  return Mixin;
+}
+
+// base/mixins/size/eui-large.mixin.mjs
+import { coerceBooleanProperty as coerceBooleanProperty20 } from "@angular/cdk/coercion";
+function mixinEuiLargeSize(base = class {
+}) {
+  class Mixin extends base {
+    /** apply large size */
+    get euiSizeL() {
+      return this._euiSizeL;
+    }
+    set euiSizeL(value) {
+      this._euiSizeL = coerceBooleanProperty20(value);
+    }
+    /** apply extra large size */
+    get euiSizeXL() {
+      return this._euiSizeXL;
+    }
+    set euiSizeXL(value) {
+      this._euiSizeXL = coerceBooleanProperty20(value);
+    }
+    /** apply extra extra large size */
+    get euiSize2XL() {
+      return this._euiSize2XL;
+    }
+    set euiSize2XL(value) {
+      this._euiSize2XL = coerceBooleanProperty20(value);
+    }
+    /** apply extra extra extra large size */
+    get euiSize3XL() {
+      return this._euiSize3XL;
+    }
+    set euiSize3XL(value) {
+      this._euiSize3XL = coerceBooleanProperty20(value);
+    }
+    /** apply extra extra extra extra large size */
+    get euiSize4XL() {
+      return this._euiSize4XL;
+    }
+    set euiSize4XL(value) {
+      this._euiSize4XL = coerceBooleanProperty20(value);
+    }
+    /** apply extra extra extra extra extra large size */
+    get euiSize5XL() {
+      return this._euiSize5XL;
+    }
+    set euiSize5XL(value) {
+      this._euiSize5XL = coerceBooleanProperty20(value);
+    }
+    constructor(...args) {
+      super(...args);
+      this._euiSizeL = false;
+      this._euiSizeXL = false;
+      this._euiSize2XL = false;
+      this._euiSize3XL = false;
+      this._euiSize4XL = false;
+      this._euiSize5XL = false;
+    }
+    getCssClasses(rootClass = "") {
+      return [
+        super["getCssClasses"] ? super["getCssClasses"](rootClass) : rootClass,
+        this._euiSizeXL ? `${rootClass}--size-xl` : "",
+        this._euiSize2XL ? `${rootClass}--size-2xl` : "",
+        this._euiSize3XL ? `${rootClass}--size-3xl` : "",
+        this._euiSize4XL ? `${rootClass}--size-4xl` : "",
+        this._euiSize5XL ? `${rootClass}--size-5xl` : ""
+      ].join(" ").trim();
+    }
+  }
+  return Mixin;
+}
+
+// base/mixins/index.mjs
+function applyMixins(derivedCtor, constructors) {
+  constructors.forEach((baseCtor) => {
+    Object.getOwnPropertyNames(baseCtor.prototype).forEach((name) => {
+      Object.defineProperty(derivedCtor.prototype, name, Object.getOwnPropertyDescriptor(baseCtor.prototype, name) || /* @__PURE__ */ Object.create(null));
+    });
+  });
+}
+
+// base/base.directive.mjs
+import { Directive, Input as Input3, HostBinding as HostBinding3 } from "@angular/core";
+import { coerceBooleanProperty as coerceBooleanProperty21 } from "@angular/cdk/coercion";
 import * as i03 from "@angular/core";
-var BaseComponentMixinBase = mixinEuiDisabled(mixinEuiDanger());
-var InputDirective = class _InputDirective extends BaseComponentMixinBase {
+var BaseComponentMixinBase = mixinEuiPrimary(mixinEuiSecondary(mixinEuiInfo(mixinEuiSuccess(mixinEuiWarning(mixinEuiDisabled())))));
+var BaseDirective = class _BaseDirective {
+  constructor() {
+    this._euiPrimary = false;
+    this._euiSecondary = false;
+    this._euiInfo = false;
+    this._euiSuccess = false;
+    this._euiWarning = false;
+    this._euiDanger = false;
+    this._euiAccent = false;
+    this._euiVariant = "";
+    this._euiSize2XS = false;
+    this._euiSizeXS = false;
+    this._euiSizeS = false;
+    this._euiSizeM = false;
+    this._euiSizeL = false;
+    this._euiSizeXL = false;
+    this._euiSize2XL = false;
+    this._euiSize3XL = false;
+    this._euiSize4XL = false;
+    this._euiSize5XL = false;
+    this._euiSizeVariant = "";
+    this._euiRounded = false;
+    this._euiOutline = false;
+    this._euiCompact = false;
+    this._euiDisabled = false;
+    this._euiResponsive = false;
+    this._euiHighlighted = false;
+    this._euiClearable = false;
+    this._euiLoading = false;
+  }
+  get ariaDisabled() {
+    return this._euiDisabled ? true : null;
+  }
+  // COLORS
+  get euiPrimary() {
+    return coerceBooleanProperty21(this._euiPrimary);
+  }
+  set euiPrimary(value) {
+    this._euiPrimary = coerceBooleanProperty21(value);
+  }
+  get euiSecondary() {
+    return this._euiSecondary;
+  }
+  set euiSecondary(value) {
+    this._euiSecondary = coerceBooleanProperty21(value);
+  }
+  get euiInfo() {
+    return this._euiInfo;
+  }
+  set euiInfo(value) {
+    this._euiInfo = coerceBooleanProperty21(value);
+  }
+  get euiSuccess() {
+    return this._euiSuccess;
+  }
+  set euiSuccess(value) {
+    this._euiSuccess = coerceBooleanProperty21(value);
+  }
+  get euiWarning() {
+    return this._euiWarning;
+  }
+  set euiWarning(value) {
+    this._euiWarning = coerceBooleanProperty21(value);
+  }
+  get euiDanger() {
+    return this._euiDanger;
+  }
+  set euiDanger(value) {
+    this._euiDanger = coerceBooleanProperty21(value);
+  }
+  get euiAccent() {
+    return this._euiAccent;
+  }
+  set euiAccent(value) {
+    this._euiAccent = coerceBooleanProperty21(value);
+  }
+  get euiVariant() {
+    return this._euiVariant;
+  }
+  set euiVariant(value) {
+    this._euiPrimary = value === "primary";
+    this._euiSecondary = value === "secondary";
+    this._euiWarning = value === "warning";
+    this._euiInfo = value === "info";
+    this._euiSuccess = value === "success";
+    this._euiDanger = value === "danger";
+    this._euiAccent = value === "accent";
+    this._euiVariant = value;
+  }
+  // SIZES
+  get euiSize2XS() {
+    return this._euiSize2XS;
+  }
+  set euiSize2XS(value) {
+    this._euiSize2XS = coerceBooleanProperty21(value);
+  }
+  get euiSizeXS() {
+    return this._euiSizeXS;
+  }
+  set euiSizeXS(value) {
+    this._euiSizeXS = coerceBooleanProperty21(value);
+  }
+  get euiSizeS() {
+    return this._euiSizeS;
+  }
+  set euiSizeS(value) {
+    this._euiSizeS = coerceBooleanProperty21(value);
+  }
+  get euiSizeM() {
+    return this._euiSizeM;
+  }
+  set euiSizeM(value) {
+    this._euiSizeM = coerceBooleanProperty21(value);
+  }
+  get euiSizeL() {
+    return this._euiSizeL;
+  }
+  set euiSizeL(value) {
+    this._euiSizeL = coerceBooleanProperty21(value);
+  }
+  get euiSizeXL() {
+    return this._euiSizeXL;
+  }
+  set euiSizeXL(value) {
+    this._euiSizeXL = coerceBooleanProperty21(value);
+  }
+  get euiSize2XL() {
+    return this._euiSize2XL;
+  }
+  set euiSize2XL(value) {
+    this._euiSize2XL = coerceBooleanProperty21(value);
+  }
+  get euiSize3XL() {
+    return this._euiSize3XL;
+  }
+  set euiSize3XL(value) {
+    this._euiSize3XL = coerceBooleanProperty21(value);
+  }
+  get euiSize4XL() {
+    return this._euiSize4XL;
+  }
+  set euiSize4XL(value) {
+    this._euiSize4XL = coerceBooleanProperty21(value);
+  }
+  get euiSize5XL() {
+    return this._euiSize5XL;
+  }
+  set euiSize5XL(value) {
+    this._euiSize5XL = coerceBooleanProperty21(value);
+  }
+  get euiSizeVariant() {
+    return this._euiSizeVariant;
+  }
+  set euiSizeVariant(value) {
+    this._euiSize2XS = value === "2xs";
+    this._euiSizeXS = value === "xs";
+    this._euiSizeS = value === "s";
+    this._euiSizeM = value === "m";
+    this._euiSizeL = value === "l";
+    this._euiSizeXL = value === "xl";
+    this._euiSize2XL = value === "2xl";
+    this._euiSize3XL = value === "3xl";
+    this._euiSize4XL = value === "4xl";
+    this._euiSize5XL = value === "5xl";
+    this._euiSizeVariant = value;
+  }
+  // EXTRA SHAPES
+  get euiRounded() {
+    return this._euiRounded;
+  }
+  set euiRounded(value) {
+    this._euiRounded = coerceBooleanProperty21(value);
+  }
+  get euiOutline() {
+    return this._euiOutline;
+  }
+  set euiOutline(value) {
+    this._euiOutline = coerceBooleanProperty21(value);
+  }
+  get euiCompact() {
+    return this._euiCompact;
+  }
+  set euiCompact(value) {
+    this._euiCompact = coerceBooleanProperty21(value);
+  }
+  // STATES
+  get euiDisabled() {
+    return this._euiDisabled;
+  }
+  set euiDisabled(value) {
+    this._euiDisabled = coerceBooleanProperty21(value);
+  }
+  get euiResponsive() {
+    return this._euiResponsive;
+  }
+  set euiResponsive(value) {
+    this._euiResponsive = coerceBooleanProperty21(value);
+  }
+  get euiHighlighted() {
+    return this._euiHighlighted;
+  }
+  set euiHighlighted(value) {
+    this._euiHighlighted = coerceBooleanProperty21(value);
+  }
+  get euiClearable() {
+    return this._euiClearable;
+  }
+  set euiClearable(value) {
+    this._euiClearable = coerceBooleanProperty21(value);
+  }
+  get euiLoading() {
+    return this._euiLoading;
+  }
+  set euiLoading(value) {
+    this._euiLoading = coerceBooleanProperty21(value);
+  }
+  getCssClasses(rootClass) {
+    return [
+      rootClass,
+      this._euiPrimary ? `${rootClass}--primary` : "",
+      this._euiSecondary ? `${rootClass}--secondary` : "",
+      this._euiInfo ? `${rootClass}--info` : "",
+      this._euiSuccess ? `${rootClass}--success` : "",
+      this._euiWarning ? `${rootClass}--warning` : "",
+      this._euiDanger ? `${rootClass}--danger` : "",
+      this._euiAccent ? `${rootClass}--accent` : "",
+      this._euiSize2XS ? `${rootClass}--size-2xs` : "",
+      this._euiSizeXS ? `${rootClass}--size-xs` : "",
+      this._euiSizeS ? `${rootClass}--size-s` : "",
+      this._euiSizeM ? `${rootClass}--size-m` : "",
+      this._euiSizeL ? `${rootClass}--size-l` : "",
+      this._euiSizeXL ? `${rootClass}--size-xl` : "",
+      this._euiSize2XL ? `${rootClass}--size-2xl` : "",
+      this._euiSize3XL ? `${rootClass}--size-3xl` : "",
+      this._euiSize4XL ? `${rootClass}--size-4xl` : "",
+      this._euiSize5XL ? `${rootClass}--size-5xl` : "",
+      this._euiRounded ? `${rootClass}--rounded` : "",
+      this._euiOutline ? `${rootClass}--outline` : "",
+      this._euiDisabled ? `${rootClass}--disabled disabled` : "",
+      this._euiCompact ? `${rootClass}--compact` : "",
+      this._euiResponsive ? `${rootClass}--responsive` : "",
+      this._euiHighlighted ? `${rootClass}--highlighted` : "",
+      this._euiClearable ? `${rootClass}--clearable` : "",
+      this._euiLoading ? `${rootClass}--loading` : "",
+      this.styleClass ? this.styleClass : ""
+    ].join(" ").trim();
+  }
+  static {
+    this.ɵfac = i03.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i03, type: _BaseDirective, deps: [], target: i03.ɵɵFactoryTarget.Directive });
+  }
+  static {
+    this.ɵdir = i03.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.2", type: _BaseDirective, selector: "[euiBase]", inputs: { e2eAttr: "e2eAttr", styleClass: "styleClass", euiPrimary: "euiPrimary", euiSecondary: "euiSecondary", euiInfo: "euiInfo", euiSuccess: "euiSuccess", euiWarning: "euiWarning", euiDanger: "euiDanger", euiAccent: "euiAccent", euiVariant: "euiVariant", euiSize2XS: "euiSize2XS", euiSizeXS: "euiSizeXS", euiSizeS: "euiSizeS", euiSizeM: "euiSizeM", euiSizeL: "euiSizeL", euiSizeXL: "euiSizeXL", euiSize2XL: "euiSize2XL", euiSize3XL: "euiSize3XL", euiSize4XL: "euiSize4XL", euiSize5XL: "euiSize5XL", euiSizeVariant: "euiSizeVariant", euiRounded: "euiRounded", euiOutline: "euiOutline", euiCompact: "euiCompact", euiDisabled: "euiDisabled", euiResponsive: "euiResponsive", euiHighlighted: "euiHighlighted", euiClearable: "euiClearable", euiLoading: "euiLoading" }, host: { properties: { "attr.aria-disabled": "this.ariaDisabled", "attr.data-e2e": "this.e2eAttr" } }, ngImport: i03 });
+  }
+};
+i03.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i03, type: BaseDirective, decorators: [{
+  type: Directive,
+  args: [{
+    selector: "[euiBase]"
+  }]
+}], propDecorators: { ariaDisabled: [{
+  type: HostBinding3,
+  args: ["attr.aria-disabled"]
+}], e2eAttr: [{
+  type: HostBinding3,
+  args: ["attr.data-e2e"]
+}, {
+  type: Input3
+}], styleClass: [{
+  type: Input3
+}], euiPrimary: [{
+  type: Input3
+}], euiSecondary: [{
+  type: Input3
+}], euiInfo: [{
+  type: Input3
+}], euiSuccess: [{
+  type: Input3
+}], euiWarning: [{
+  type: Input3
+}], euiDanger: [{
+  type: Input3
+}], euiAccent: [{
+  type: Input3
+}], euiVariant: [{
+  type: Input3
+}], euiSize2XS: [{
+  type: Input3
+}], euiSizeXS: [{
+  type: Input3
+}], euiSizeS: [{
+  type: Input3
+}], euiSizeM: [{
+  type: Input3
+}], euiSizeL: [{
+  type: Input3
+}], euiSizeXL: [{
+  type: Input3
+}], euiSize2XL: [{
+  type: Input3
+}], euiSize3XL: [{
+  type: Input3
+}], euiSize4XL: [{
+  type: Input3
+}], euiSize5XL: [{
+  type: Input3
+}], euiSizeVariant: [{
+  type: Input3
+}], euiRounded: [{
+  type: Input3
+}], euiOutline: [{
+  type: Input3
+}], euiCompact: [{
+  type: Input3
+}], euiDisabled: [{
+  type: Input3
+}], euiResponsive: [{
+  type: Input3
+}], euiHighlighted: [{
+  type: Input3
+}], euiClearable: [{
+  type: Input3
+}], euiLoading: [{
+  type: Input3
+}] } });
+
+// base/base-states.directive.mjs
+import { Directive as Directive2, HostBinding as HostBinding4, Input as Input4, booleanAttribute } from "@angular/core";
+import { coerceBooleanProperty as coerceBooleanProperty22 } from "@angular/cdk/coercion";
+import * as i04 from "@angular/core";
+var BaseStatesDirective = class _BaseStatesDirective {
+  constructor() {
+    this.euiRounded = false;
+    this.euiOutline = false;
+    this.euiCompact = false;
+    this.euiDisabled = false;
+    this.euiResponsive = false;
+    this.euiHighlighted = false;
+    this.euiClearable = false;
+    this.euiLoading = false;
+    this.euiInverted = false;
+    this._euiPrimary = false;
+    this._euiSecondary = false;
+    this._euiSecondaryLight = false;
+    this._euiInfo = false;
+    this._euiSuccess = false;
+    this._euiWarning = false;
+    this._euiDanger = false;
+    this._euiAccent = false;
+    this._euiSize2XS = false;
+    this._euiSizeXS = false;
+    this._euiSizeS = false;
+    this._euiSizeM = false;
+    this._euiSizeL = false;
+    this._euiSizeXL = false;
+    this._euiSize2XL = false;
+    this._euiSize3XL = false;
+    this._euiSize4XL = false;
+    this._euiSize5XL = false;
+    this._euiSizeVariant = "";
+    this._euiVariant = "";
+  }
+  get ariaDisabled() {
+    return this.euiDisabled ? true : null;
+  }
+  // COLORS
+  get euiPrimary() {
+    return this._euiPrimary;
+  }
+  set euiPrimary(value) {
+    this._euiPrimary = coerceBooleanProperty22(value);
+    this._euiVariant = "primary";
+  }
+  get euiSecondary() {
+    return this._euiSecondary;
+  }
+  set euiSecondary(value) {
+    this._euiSecondary = coerceBooleanProperty22(value);
+    this._euiVariant = "secondary";
+  }
+  get euiSecondaryLight() {
+    return this._euiSecondaryLight;
+  }
+  set euiSecondaryLight(value) {
+    this._euiSecondaryLight = coerceBooleanProperty22(value);
+    this._euiVariant = "secondaryLight";
+  }
+  get euiInfo() {
+    return this._euiInfo;
+  }
+  set euiInfo(value) {
+    this._euiInfo = coerceBooleanProperty22(value);
+    this._euiVariant = "info";
+  }
+  get euiSuccess() {
+    return this._euiSuccess;
+  }
+  set euiSuccess(value) {
+    this._euiSuccess = coerceBooleanProperty22(value);
+    this._euiVariant = "success";
+  }
+  get euiWarning() {
+    return this._euiWarning;
+  }
+  set euiWarning(value) {
+    this._euiWarning = coerceBooleanProperty22(value);
+    this._euiVariant = "warning";
+  }
+  get euiDanger() {
+    return this._euiDanger;
+  }
+  set euiDanger(value) {
+    this._euiDanger = coerceBooleanProperty22(value);
+    this._euiVariant = "danger";
+  }
+  get euiAccent() {
+    return this._euiAccent;
+  }
+  set euiAccent(value) {
+    this._euiAccent = coerceBooleanProperty22(value);
+    this._euiVariant = "accent";
+  }
+  get euiVariant() {
+    return this._euiVariant;
+  }
+  set euiVariant(value) {
+    this.euiPrimary = value === "primary";
+    this.euiSecondary = value === "secondary";
+    this.euiSecondaryLight = value === "secondaryLight";
+    this.euiWarning = value === "warning";
+    this.euiInfo = value === "info";
+    this.euiSuccess = value === "success";
+    this.euiDanger = value === "danger";
+    this.euiAccent = value === "accent";
+    this._euiVariant = value;
+  }
+  // SIZES
+  get euiSize2XS() {
+    return this._euiSize2XS;
+  }
+  set euiSize2XS(value) {
+    this._euiSize2XS = coerceBooleanProperty22(value);
+    this._euiSizeVariant = "2xs";
+  }
+  get euiSizeXS() {
+    return this._euiSizeXS;
+  }
+  set euiSizeXS(value) {
+    this._euiSizeXS = coerceBooleanProperty22(value);
+    this._euiSizeVariant = "xs";
+  }
+  get euiSizeS() {
+    return this._euiSizeS;
+  }
+  set euiSizeS(value) {
+    this._euiSizeS = coerceBooleanProperty22(value);
+    this._euiSizeVariant = "s";
+  }
+  get euiSizeM() {
+    return this._euiSizeM;
+  }
+  set euiSizeM(value) {
+    this._euiSizeM = coerceBooleanProperty22(value);
+    this._euiSizeVariant = "m";
+  }
+  get euiSizeL() {
+    return this._euiSizeL;
+  }
+  set euiSizeL(value) {
+    this._euiSizeL = coerceBooleanProperty22(value);
+    this._euiSizeVariant = "l";
+  }
+  get euiSizeXL() {
+    return this._euiSizeXL;
+  }
+  set euiSizeXL(value) {
+    this._euiSizeXL = coerceBooleanProperty22(value);
+    this._euiSizeVariant = "xl";
+  }
+  get euiSize2XL() {
+    return this._euiSize2XL;
+  }
+  set euiSize2XL(value) {
+    this._euiSize2XL = coerceBooleanProperty22(value);
+    this._euiSizeVariant = "2xl";
+  }
+  get euiSize3XL() {
+    return this._euiSize3XL;
+  }
+  set euiSize3XL(value) {
+    this._euiSize3XL = coerceBooleanProperty22(value);
+    this._euiSizeVariant = "3xl";
+  }
+  get euiSize4XL() {
+    return this._euiSize4XL;
+  }
+  set euiSize4XL(value) {
+    this._euiSize4XL = coerceBooleanProperty22(value);
+    this._euiSizeVariant = "4xl";
+  }
+  get euiSize5XL() {
+    return this._euiSize5XL;
+  }
+  set euiSize5XL(value) {
+    this._euiSize5XL = coerceBooleanProperty22(value);
+    this._euiSizeVariant = "5xl";
+  }
+  get euiSizeVariant() {
+    return this._euiSizeVariant;
+  }
+  set euiSizeVariant(value) {
+    this.euiSize2XS = value === "2xs";
+    this.euiSizeXS = value === "xs";
+    this.euiSizeS = value === "s";
+    this.euiSizeM = value === "m";
+    this.euiSizeL = value === "l";
+    this.euiSizeXL = value === "xl";
+    this.euiSize2XL = value === "2xl";
+    this.euiSize3XL = value === "3xl";
+    this.euiSize4XL = value === "4xl";
+    this.euiSize5XL = value === "5xl";
+    this._euiSizeVariant = value;
+  }
+  getCssClasses(rootClass) {
+    return [
+      rootClass,
+      this.euiPrimary ? `${rootClass}--primary` : "",
+      this.euiSecondary ? `${rootClass}--secondary` : "",
+      this.euiSecondaryLight ? `${rootClass}--secondary-light` : "",
+      this.euiInfo ? `${rootClass}--info` : "",
+      this.euiSuccess ? `${rootClass}--success` : "",
+      this.euiWarning ? `${rootClass}--warning` : "",
+      this.euiDanger ? `${rootClass}--danger` : "",
+      this.euiAccent ? `${rootClass}--accent` : "",
+      this.euiSize2XS ? `${rootClass}--size-2xs` : "",
+      this.euiSizeXS ? `${rootClass}--size-xs` : "",
+      this.euiSizeS ? `${rootClass}--size-s` : "",
+      this.euiSizeM ? `${rootClass}--size-m` : "",
+      this.euiSizeL ? `${rootClass}--size-l` : "",
+      this.euiSizeXL ? `${rootClass}--size-xl` : "",
+      this.euiSize2XL ? `${rootClass}--size-2xl` : "",
+      this.euiSize3XL ? `${rootClass}--size-3xl` : "",
+      this.euiSize4XL ? `${rootClass}--size-4xl` : "",
+      this.euiSize5XL ? `${rootClass}--size-5xl` : "",
+      this.euiRounded ? `${rootClass}--rounded` : "",
+      this.euiOutline ? `${rootClass}--outline` : "",
+      this.euiDisabled ? `${rootClass}--disabled disabled` : "",
+      this.euiCompact ? `${rootClass}--compact` : "",
+      this.euiResponsive ? `${rootClass}--responsive` : "",
+      this.euiHighlighted ? `${rootClass}--highlighted` : "",
+      this.euiClearable ? `${rootClass}--clearable` : "",
+      this.euiLoading ? `${rootClass}--loading` : "",
+      this.euiInverted ? `${rootClass}--inverted` : ""
+    ].join(" ").trim();
+  }
+  static {
+    this.ɵfac = i04.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i04, type: _BaseStatesDirective, deps: [], target: i04.ɵɵFactoryTarget.Directive });
+  }
+  static {
+    this.ɵdir = i04.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.0-next.2", type: _BaseStatesDirective, isStandalone: true, selector: "[euiBase]", inputs: { euiPrimary: "euiPrimary", euiSecondary: "euiSecondary", euiSecondaryLight: "euiSecondaryLight", euiInfo: "euiInfo", euiSuccess: "euiSuccess", euiWarning: "euiWarning", euiDanger: "euiDanger", euiAccent: "euiAccent", euiVariant: "euiVariant", euiSize2XS: "euiSize2XS", euiSizeXS: "euiSizeXS", euiSizeS: "euiSizeS", euiSizeM: "euiSizeM", euiSizeL: "euiSizeL", euiSizeXL: "euiSizeXL", euiSize2XL: "euiSize2XL", euiSize3XL: "euiSize3XL", euiSize4XL: "euiSize4XL", euiSize5XL: "euiSize5XL", euiSizeVariant: "euiSizeVariant", euiRounded: ["euiRounded", "euiRounded", booleanAttribute], euiOutline: ["euiOutline", "euiOutline", booleanAttribute], euiCompact: ["euiCompact", "euiCompact", booleanAttribute], euiDisabled: ["euiDisabled", "euiDisabled", booleanAttribute], euiResponsive: ["euiResponsive", "euiResponsive", booleanAttribute], euiHighlighted: ["euiHighlighted", "euiHighlighted", booleanAttribute], euiClearable: ["euiClearable", "euiClearable", booleanAttribute], euiLoading: ["euiLoading", "euiLoading", booleanAttribute], euiInverted: ["euiInverted", "euiInverted", booleanAttribute] }, host: { properties: { "attr.aria-disabled": "this.ariaDisabled" } }, ngImport: i04 });
+  }
+};
+i04.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i04, type: BaseStatesDirective, decorators: [{
+  type: Directive2,
+  args: [{
+    standalone: true,
+    selector: "[euiBase]"
+  }]
+}], propDecorators: { ariaDisabled: [{
+  type: HostBinding4,
+  args: ["attr.aria-disabled"]
+}], euiPrimary: [{
+  type: Input4
+}], euiSecondary: [{
+  type: Input4
+}], euiSecondaryLight: [{
+  type: Input4
+}], euiInfo: [{
+  type: Input4
+}], euiSuccess: [{
+  type: Input4
+}], euiWarning: [{
+  type: Input4
+}], euiDanger: [{
+  type: Input4
+}], euiAccent: [{
+  type: Input4
+}], euiVariant: [{
+  type: Input4
+}], euiSize2XS: [{
+  type: Input4
+}], euiSizeXS: [{
+  type: Input4
+}], euiSizeS: [{
+  type: Input4
+}], euiSizeM: [{
+  type: Input4
+}], euiSizeL: [{
+  type: Input4
+}], euiSizeXL: [{
+  type: Input4
+}], euiSize2XL: [{
+  type: Input4
+}], euiSize3XL: [{
+  type: Input4
+}], euiSize4XL: [{
+  type: Input4
+}], euiSize5XL: [{
+  type: Input4
+}], euiSizeVariant: [{
+  type: Input4
+}], euiRounded: [{
+  type: Input4,
+  args: [{ transform: booleanAttribute }]
+}], euiOutline: [{
+  type: Input4,
+  args: [{ transform: booleanAttribute }]
+}], euiCompact: [{
+  type: Input4,
+  args: [{ transform: booleanAttribute }]
+}], euiDisabled: [{
+  type: Input4,
+  args: [{ transform: booleanAttribute }]
+}], euiResponsive: [{
+  type: Input4,
+  args: [{ transform: booleanAttribute }]
+}], euiHighlighted: [{
+  type: Input4,
+  args: [{ transform: booleanAttribute }]
+}], euiClearable: [{
+  type: Input4,
+  args: [{ transform: booleanAttribute }]
+}], euiLoading: [{
+  type: Input4,
+  args: [{ transform: booleanAttribute }]
+}], euiInverted: [{
+  type: Input4,
+  args: [{ transform: booleanAttribute }]
+}] } });
+
+// input.directive.mjs
+import { Directive as Directive3, HostBinding as HostBinding5, Input as Input5, ViewContainerRef } from "@angular/core";
+import { FormControlDirective, FormControlName, FormGroupDirective, NgControl } from "@angular/forms";
+import { coerceBooleanProperty as coerceBooleanProperty23 } from "@angular/cdk/coercion";
+import * as i05 from "@angular/core";
+var BaseComponentMixinBase2 = mixinEuiDisabled(mixinEuiDanger());
+var InputDirective = class _InputDirective extends BaseComponentMixinBase2 {
   get disabled() {
     return this._disabled ? true : null;
   }
   set disabled(state) {
-    this._disabled = coerceBooleanProperty3(state);
+    this._disabled = coerceBooleanProperty23(state);
     super.euiDisabled = this._disabled;
   }
   get readonly() {
     return this._readonly ? "" : null;
   }
   set readonly(state) {
-    this._readonly = coerceBooleanProperty3(state);
+    this._readonly = coerceBooleanProperty23(state);
   }
   get placeholder() {
     return this.getPlaceholderAttribute();
@@ -272,53 +1409,76 @@ var InputDirective = class _InputDirective extends BaseComponentMixinBase {
     this._id = value ? value : `${this._elementRef.nativeElement.type}_${Math.floor(Math.random() * 1e6)}`;
   }
   static {
-    this.ɵfac = i03.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i03, type: _InputDirective, deps: [{ token: i03.ElementRef }, { token: i03.Renderer2 }, { token: i03.Injector }], target: i03.ɵɵFactoryTarget.Directive });
+    this.ɵfac = i05.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i05, type: _InputDirective, deps: [{ token: i05.ElementRef }, { token: i05.Renderer2 }, { token: i05.Injector }], target: i05.ɵɵFactoryTarget.Directive });
   }
   static {
-    this.ɵdir = i03.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.2", type: _InputDirective, selector: "input[euiInput]", inputs: { styleClass: "styleClass", disabled: "disabled", readonly: "readonly", placeholder: "placeholder", id: "id" }, host: { properties: { "attr.disabled": "this.disabled", "attr.readonly": "this.readonly", "attr.placeholder": "this.placeholder", "attr.id": "this.id" } }, usesInheritance: true, usesOnChanges: true, ngImport: i03 });
+    this.ɵdir = i05.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.2", type: _InputDirective, selector: "input[euiInput]", inputs: { styleClass: "styleClass", disabled: "disabled", readonly: "readonly", placeholder: "placeholder", id: "id" }, host: { properties: { "attr.disabled": "this.disabled", "attr.readonly": "this.readonly", "attr.placeholder": "this.placeholder", "attr.id": "this.id" } }, usesInheritance: true, usesOnChanges: true, ngImport: i05 });
   }
 };
-i03.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i03, type: InputDirective, decorators: [{
-  type: Directive,
+i05.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.2", ngImport: i05, type: InputDirective, decorators: [{
+  type: Directive3,
   args: [{
     // eslint-disable-next-line @angular-eslint/directive-selector
     selector: "input[euiInput]"
   }]
-}], ctorParameters: () => [{ type: i03.ElementRef }, { type: i03.Renderer2 }, { type: i03.Injector }], propDecorators: { styleClass: [{
-  type: Input3
+}], ctorParameters: () => [{ type: i05.ElementRef }, { type: i05.Renderer2 }, { type: i05.Injector }], propDecorators: { styleClass: [{
+  type: Input5
 }], disabled: [{
-  type: HostBinding3,
+  type: HostBinding5,
   args: ["attr.disabled"]
 }, {
-  type: Input3
+  type: Input5
 }], readonly: [{
-  type: HostBinding3,
+  type: HostBinding5,
   args: ["attr.readonly"]
 }, {
-  type: Input3
+  type: Input5
 }], placeholder: [{
-  type: HostBinding3,
+  type: HostBinding5,
   args: ["attr.placeholder"]
 }, {
-  type: Input3
+  type: Input5
 }], id: [{
-  type: HostBinding3,
+  type: HostBinding5,
   args: ["attr.id"]
 }, {
-  type: Input3
+  type: Input5
 }] } });
-
-// index.mjs
-__reExport(shared_exports, base_star);
-import * as base_star from "@eui/components/shared/base";
-
-// eui-components-shared.mjs
-__reExport(eui_components_shared_exports, shared_exports);
 export {
+  BaseComponentMixinBase,
+  BaseDirective,
+  BaseStatesDirective,
   EuiCommonHeaderComponent,
   EuiCommonHeaderModule,
   EuiExpandContentComponent,
   EuiExpandContentModule,
-  InputDirective
+  InputDirective,
+  applyMixins,
+  mixinEuiAccent,
+  mixinEuiClearable,
+  mixinEuiCompact,
+  mixinEuiDanger,
+  mixinEuiDisabled,
+  mixinEuiHighlighted,
+  mixinEuiInfo,
+  mixinEuiLargeSize,
+  mixinEuiLoading,
+  mixinEuiMediumSize,
+  mixinEuiOutline,
+  mixinEuiPrimary,
+  mixinEuiResponsive,
+  mixinEuiRounded,
+  mixinEuiSecondary,
+  mixinEuiSmallSize,
+  mixinEuiSuccess,
+  mixinEuiVariant,
+  mixinEuiWarning
 };
+/**
+ * @license
+ * Copyright European Commission All Rights Reserved.
+ *
+ * Use of this source code is governed by an EUPL-style license that can be
+ * found in the LICENSE file at https://ec.europa.eu/info/european-union-public-licence_en
+ */
 //# sourceMappingURL=eui-components-shared.mjs.map