@eui/components 18.0.0-next.37 → 18.0.0-next.38

package/fesm2022/eui-components-eui-growl.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../eui-growl/eui-growl.component.ts", "../../eui-growl/eui-growl.component.html", "../../eui-growl/eui-growl.module.ts"],
-  "sourcesContent": ["import { coerceBooleanProperty, BooleanInput } from '@angular/cdk/coercion';\nimport {\n    Component,\n    DoCheck,\n    ElementRef,\n    EventEmitter,\n    Input,\n    IterableDiffer,\n    IterableDiffers,\n    OnDestroy,\n    Output,\n    ViewChild,\n    ViewEncapsulation,\n} from '@angular/core';\nimport { EuiGrowlMessage } from '@eui/base';\n@Component({\n    selector: 'eui-growl',\n    templateUrl: './eui-growl.component.html',\n    styleUrls: ['./styles/_index.scss'],\n    encapsulation: ViewEncapsulation.None,\n})\nexport class EuiGrowlComponent implements DoCheck, OnDestroy {\n    @Input()\n    get sticky(): boolean {\n        return this._sticky;\n    }\n    set sticky(value: BooleanInput) {\n        this._sticky = coerceBooleanProperty(value);\n    }\n    @Input() life = 3000;\n    @Input() value: EuiGrowlMessage[] = [];\n    // TODO: find the correct type or turn into a generic, https://www.typescriptlang.org/docs/handbook/2/generics.html\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    @Input() style: any;\n    @Input() styleClass: string;\n    @Input() position: string;\n    @Input() e2eAttr = 'eui-growl';\n    @Output() growlClick: EventEmitter<void> = new EventEmitter<void>();\n    @Input() closeAllSticky = false;\n\n    @ViewChild('container') containerViewChild: ElementRef<HTMLDivElement>;\n\n    private differ: IterableDiffer<EuiGrowlMessage>;\n    private _sticky = false;\n\n    constructor(\n        public el: ElementRef,\n        differs: IterableDiffers,\n    ) {\n        this.differ = differs.find([]).create(undefined);\n    }\n\n    ngDoCheck(): void {\n        const changes = this.differ.diff(this.value);\n\n        if (changes) {\n            // clear timeout in queue to avoid memory leak\n            changes.forEachRemovedItem(({ item }) => clearTimeout(item?.timeout));\n            // for newly added items create timeout if they are not sticky\n            changes.forEachAddedItem(({ item }) => this.createRemovalTimeout(item));\n        }\n    }\n\n    /**\n     * @param msg The text message to appear in the container\n     */\n    remove(msg: EuiGrowlMessage): void;\n    /**\n     * @deprecated This is DEPRECATED please use it like remove(msg: UxMessage);\n     * @param msg\n     * @param msgel @deprecated\n     */\n    // TODO: find the correct type or turn into a generic, https://www.typescriptlang.org/docs/handbook/2/generics.html\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    remove(msg: EuiGrowlMessage, msgel?: any): void {\n        if (msgel) {\n            console.warn(\n                'This is DEPRECATED please use it like remove(msg: UxMessage);\\n' + 'This will be a breaking change in the eUI release.',\n            );\n        }\n        this.value.splice(this.findMessageIndex(msg), 1);\n    }\n\n    /**\n     * Removes all growl messages from the stack\n     */\n    removeAll(): void {\n        if (this.value?.length) {\n            this.value.splice(0, this.value.length);\n        }\n    }\n\n    ngOnDestroy(): void {\n        if (!this.sticky) {\n            // make sure to clear any leftover async Timeout for messages\n            this.value.forEach((v) => clearTimeout(v?.timeout));\n        }\n    }\n\n    onClick(): void {\n        this.growlClick.emit();\n    }\n\n    /**\n     * check whether sticky growls are greater than two\n     */\n    isGrowlMoreThanTwo(): boolean {\n        return this.value.filter((m) => m.sticky).length > 2;\n    }\n\n    /**\n     * Removes all growl messages from the stack\n     *\n     * @param msg UxMessage\n     */\n    private createRemovalTimeout(value: EuiGrowlMessage): void {\n        // if message it's NOT sticky and there's not any async running timeout\n        if (!value.sticky && !value.timeout) {\n            // set Timeout callback for each message based on the given life value\n            value.timeout = setTimeout(() => this.remove(value), value.life || this.life);\n        }\n    }\n\n    /**\n     * Finds UxMessage index of the array otherwise returns -1\n     *\n     * @param msg UxMessage\n     */\n    private findMessageIndex(msg: EuiGrowlMessage): number {\n        return this.value?.length ? this.value.findIndex((value) => value === msg) : -1;\n    }\n}\n", "<!-- TODO v18 use host type declaration / remove styleClass -->\n<div\n    #container\n    role=\"region\"\n    aria-live=\"polite\"\n    class=\"eui-growl {{ styleClass }} eui-growl--{{ position }}\"\n    (click)=\"onClick()\"\n    attr.data-e2e=\"{{ e2eAttr }}\">\n    <div\n        #msgel\n        *ngFor=\"let msg of value\"\n        class=\"eui-growl-item-container eui-u-anim eui-u-anim--fast\"\n        [ngClass]=\"{\n            'eui-growl-item-container--info': msg.severity === 'info',\n            'eui-growl-item-container--warning': msg.severity === 'warning',\n            'eui-growl-item-container--danger': msg.severity === 'danger',\n            'eui-growl-item-container--success': msg.severity === 'success',\n            'eui-growl--sticky': sticky\n        }\"\n        [class.eui-u-anim--slideInUp]=\"position === 'bottom-left' || position === 'bottom-center' || position === 'bottom-right'\"\n        [class.eui-u-anim--slideInDown]=\"position === 'top-left' || position === 'top-center' || position === 'top-right'\">\n        <div class=\"eui-growl-item\">\n            <eui-icon-svg *ngIf=\"msg.severity === 'info'\" icon=\"eui-ecl-information\"></eui-icon-svg>\n            <eui-icon-svg *ngIf=\"msg.severity === 'warning'\" icon=\"eui-ecl-warning\"></eui-icon-svg>\n            <eui-icon-svg *ngIf=\"msg.severity === 'danger'\" icon=\"eui-ecl-error\"></eui-icon-svg>\n            <eui-icon-svg *ngIf=\"msg.severity === 'success'\" icon=\"eui-ecl-check-filled\"></eui-icon-svg>\n\n            <div class=\"eui-growl-item-message\">\n                <span class=\"eui-growl-item-message-title\">{{ msg.summary }}</span>\n                <p class=\"eui-growl-item-message-detail\" [innerHTML]=\"msg.detail\"></p>\n            </div>\n            <eui-icon-button\n                (click)=\"remove(msg)\"\n                iconSvgName=\"eui-close\"\n                ariaLabel=\"Close growl icon\"\n                class=\"eui-growl-item-close\">\n            </eui-icon-button>\n        </div>\n    </div>\n    <div\n        class=\"eui-growl-item-container eui-u-anim eui-u-anim--fast eui-growl-item-container--info\"\n        *ngIf=\"closeAllSticky && isGrowlMoreThanTwo()\">\n        <div class=\"eui-growl-item\">\n            <div class=\"eui-growl-item-message\">\n                <span class=\"eui-growl-item-message-title\">{{ 'eui.growl.dismiss-all' | translate }}</span>\n            </div>\n            <div class=\"eui-growl-item-close eui-icon eui-icon-close-m\" (click)=\"removeAll()\"></div>\n        </div>\n    </div>\n</div>\n", "import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { EuiGrowlComponent } from './eui-growl.component';\nimport { EuiIconModule } from '@eui/components/eui-icon';\nimport { TranslateModule } from '@ngx-translate/core';\n\n@NgModule({\n    imports: [CommonModule, EuiIconModule, TranslateModule],\n    exports: [EuiGrowlComponent],\n    declarations: [EuiGrowlComponent],\n})\nexport class EuiGrowlModule {}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { coerceBooleanProperty, BooleanInput } from '@angular/cdk/coercion';\nimport {\n    Component,\n    DoCheck,\n    ElementRef,\n    EventEmitter,\n    Input,\n    IterableDiffer,\n    IterableDiffers,\n    OnDestroy,\n    Output,\n    ViewChild,\n    ViewEncapsulation,\n} from '@angular/core';\nimport { EuiGrowlMessage } from '@eui/base';\n@Component({\n    selector: 'eui-growl',\n    templateUrl: './eui-growl.component.html',\n    styleUrls: ['./styles/_index.scss'],\n    encapsulation: ViewEncapsulation.None,\n})\nexport class EuiGrowlComponent implements DoCheck, OnDestroy {\n    @Input()\n    get sticky(): boolean {\n        return this._sticky;\n    }\n    set sticky(value: BooleanInput) {\n        this._sticky = coerceBooleanProperty(value);\n    }\n    @Input() life = 3000;\n    @Input() value: EuiGrowlMessage[] = [];\n    // TODO: find the correct type or turn into a generic, https://www.typescriptlang.org/docs/handbook/2/generics.html\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    @Input() style: any;\n    @Input() styleClass: string;\n    @Input() position: string;\n    @Input() e2eAttr = 'eui-growl';\n    @Output() growlClick: EventEmitter<void> = new EventEmitter<void>();\n    @Input() closeAllSticky = false;\n\n    @ViewChild('container') containerViewChild: ElementRef<HTMLDivElement>;\n\n    private differ: IterableDiffer<EuiGrowlMessage>;\n    private _sticky = false;\n\n    constructor(\n        public el: ElementRef,\n        differs: IterableDiffers,\n    ) {\n        this.differ = differs.find([]).create(undefined);\n    }\n\n    ngDoCheck(): void {\n        const changes = this.differ.diff(this.value);\n\n        if (changes) {\n            // clear timeout in queue to avoid memory leak\n            changes.forEachRemovedItem(({ item }) => clearTimeout(item?.timeout));\n            // for newly added items create timeout if they are not sticky\n            changes.forEachAddedItem(({ item }) => this.createRemovalTimeout(item));\n        }\n    }\n\n    /**\n     * @param msg The text message to appear in the container\n     */\n    remove(msg: EuiGrowlMessage): void;\n    /**\n     * @deprecated This is DEPRECATED please use it like remove(msg: UxMessage);\n     * @param msg\n     * @param msgel @deprecated\n     */\n    // TODO: find the correct type or turn into a generic, https://www.typescriptlang.org/docs/handbook/2/generics.html\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    remove(msg: EuiGrowlMessage, msgel?: any): void {\n        if (msgel) {\n            console.warn(\n                'This is DEPRECATED please use it like remove(msg: UxMessage);\\n' + 'This will be a breaking change in the eUI release.',\n            );\n        }\n        this.value.splice(this.findMessageIndex(msg), 1);\n    }\n\n    /**\n     * Removes all growl messages from the stack\n     */\n    removeAll(): void {\n        if (this.value?.length) {\n            this.value.splice(0, this.value.length);\n        }\n    }\n\n    ngOnDestroy(): void {\n        if (!this.sticky) {\n            // make sure to clear any leftover async Timeout for messages\n            this.value.forEach((v) => clearTimeout(v?.timeout));\n        }\n    }\n\n    onClick(): void {\n        this.growlClick.emit();\n    }\n\n    /**\n     * check whether sticky growls are greater than two\n     */\n    isGrowlMoreThanTwo(): boolean {\n        return this.value.filter((m) => m.sticky).length > 2;\n    }\n\n    /**\n     * Removes all growl messages from the stack\n     *\n     * @param msg UxMessage\n     */\n    private createRemovalTimeout(value: EuiGrowlMessage): void {\n        // if message it's NOT sticky and there's not any async running timeout\n        if (!value.sticky && !value.timeout) {\n            // set Timeout callback for each message based on the given life value\n            value.timeout = setTimeout(() => this.remove(value), value.life || this.life);\n        }\n    }\n\n    /**\n     * Finds UxMessage index of the array otherwise returns -1\n     *\n     * @param msg UxMessage\n     */\n    private findMessageIndex(msg: EuiGrowlMessage): number {\n        return this.value?.length ? this.value.findIndex((value) => value === msg) : -1;\n    }\n}\n", "<!-- TODO v18 use host type declaration / remove styleClass -->\n<div\n    #container\n    role=\"region\"\n    aria-live=\"polite\"\n    class=\"eui-growl {{ styleClass }} eui-growl--{{ position }}\"\n    (click)=\"onClick()\"\n    attr.data-e2e=\"{{ e2eAttr }}\">\n    <div\n        #msgel\n        *ngFor=\"let msg of value\"\n        class=\"eui-growl-item-container eui-u-anim eui-u-anim--fast\"\n        [ngClass]=\"{\n            'eui-growl-item-container--info': msg.severity === 'info',\n            'eui-growl-item-container--warning': msg.severity === 'warning',\n            'eui-growl-item-container--danger': msg.severity === 'danger',\n            'eui-growl-item-container--success': msg.severity === 'success',\n            'eui-growl--sticky': sticky\n        }\"\n        [class.eui-u-anim--slideInUp]=\"position === 'bottom-left' || position === 'bottom-center' || position === 'bottom-right'\"\n        [class.eui-u-anim--slideInDown]=\"position === 'top-left' || position === 'top-center' || position === 'top-right'\">\n        <div class=\"eui-growl-item\">\n            <eui-icon-svg *ngIf=\"msg.severity === 'info'\" icon=\"eui-ecl-information\"></eui-icon-svg>\n            <eui-icon-svg *ngIf=\"msg.severity === 'warning'\" icon=\"eui-ecl-warning\"></eui-icon-svg>\n            <eui-icon-svg *ngIf=\"msg.severity === 'danger'\" icon=\"eui-ecl-error\"></eui-icon-svg>\n            <eui-icon-svg *ngIf=\"msg.severity === 'success'\" icon=\"eui-ecl-check-filled\"></eui-icon-svg>\n\n            <div class=\"eui-growl-item-message\">\n                <span class=\"eui-growl-item-message-title\">{{ msg.summary }}</span>\n                <p class=\"eui-growl-item-message-detail\" [innerHTML]=\"msg.detail\"></p>\n            </div>\n            <eui-icon-button\n                (click)=\"remove(msg)\"\n                icon=\"eui-close\"\n                ariaLabel=\"Close growl icon\"\n                class=\"eui-growl-item-close\">\n            </eui-icon-button>\n        </div>\n    </div>\n    <div\n        class=\"eui-growl-item-container eui-u-anim eui-u-anim--fast eui-growl-item-container--info\"\n        *ngIf=\"closeAllSticky && isGrowlMoreThanTwo()\">\n        <div class=\"eui-growl-item\">\n            <div class=\"eui-growl-item-message\">\n                <span class=\"eui-growl-item-message-title\">{{ 'eui.growl.dismiss-all' | translate }}</span>\n            </div>\n            <div class=\"eui-growl-item-close eui-icon eui-icon-close-m\" (click)=\"removeAll()\"></div>\n        </div>\n    </div>\n</div>\n", "import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { EuiGrowlComponent } from './eui-growl.component';\nimport { EuiIconModule } from '@eui/components/eui-icon';\nimport { TranslateModule } from '@ngx-translate/core';\n\n@NgModule({\n    imports: [CommonModule, EuiIconModule, TranslateModule],\n    exports: [EuiGrowlComponent],\n    declarations: [EuiGrowlComponent],\n})\nexport class EuiGrowlModule {}\n"],
+  "mappings": "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",
   "names": []
 }

package/fesm2022/eui-components-eui-icon-toggle.mjs

@@ -1,67 +1,61 @@
 // eui-icon-toggle.component.mjs
-import { ChangeDetectionStrategy, Component, EventEmitter, HostBinding, Input, Output, ViewChild, ViewEncapsulation } from "@angular/core";
+import { ChangeDetectionStrategy, Component, EventEmitter, HostBinding, HostListener, Input, Output, ViewEncapsulation, booleanAttribute } from "@angular/core";
 import { uniqueId } from "@eui/core";
-import { coerceBooleanProperty } from "@angular/cdk/coercion";
 import * as i0 from "@angular/core";
-import * as i1 from "@angular/common";
-import * as i2 from "@eui/components/eui-icon";
+import * as i1 from "@eui/components/eui-icon";
 var EuiIconToggleComponent = class _EuiIconToggleComponent {
   constructor() {
+    this.role = "switch";
+    this.accessKey = "keyboardAccessKey";
+    this.isChecked = false;
+    this.isReadOnly = false;
+    this.e2eAttr = "eui-icon-toggle";
     this.id = `eui-icon-toggle-${uniqueId()}`;
+    this.tabindex = this.isReadOnly ? "-1" : "0";
+    this.ariaLabel = "Toggle icon";
+    this.iconSvgSize = "m";
     this.iconSvgFillColorOn = "accent-100";
     this.iconSvgFillColorOff = "grey-100";
-    this.tabindex = 0;
-    this.ariaLabel = "Toggle icon";
-    this.e2eAttr = "eui-icon-toggle";
     this.toggle = new EventEmitter();
-    this._isChecked = false;
-    this._isReadOnly = false;
-  }
-  get isChecked() {
-    return this._isChecked;
-  }
-  set isChecked(value) {
-    this._isChecked = coerceBooleanProperty(value);
-  }
-  get isReadOnly() {
-    return this._isReadOnly;
   }
-  set isReadOnly(value) {
-    this._isReadOnly = coerceBooleanProperty(value);
+  get cssClasses() {
+    return [
+      "eui-icon-toggle",
+      this.isChecked ? "eui-icon-toggle--default-on" : "eui-icon-toggle--default-off",
+      this.isReadOnly ? "eui-icon-toggle--readonly" : ""
+    ].join(" ").trim();
   }
   ngAfterContentInit() {
-    this.setIconClass();
+    this._setIconClass();
     if (!this.ariaLabel || this.ariaLabel === "") {
-      this.ariaLabel = this.iconClass ? this.iconClass : "";
+      this.ariaLabel = this.iconSvgName ? this.iconSvgName : "";
     }
   }
-  onToggle() {
-    if (!this.isReadOnly) {
-      this.isChecked = !this.isChecked;
-      this.setIconClass();
-      this.toggle.emit(this.isChecked);
-    }
-    this.focusElement?.nativeElement.focus();
+  onClick() {
+    this._toggle();
   }
-  onKeyDown(event) {
+  onKeydown(event) {
     switch (event.code) {
       case "Enter":
       case "Space":
         event.preventDefault();
         event.stopPropagation();
-        this.onToggle();
+        this._toggle();
         break;
     }
   }
-  setIconClass() {
+  _toggle() {
+    if (!this.isReadOnly) {
+      this.isChecked = !this.isChecked;
+      this._setIconClass();
+      this.toggle.emit(this.isChecked);
+    }
+  }
+  _setIconClass() {
     if (this.isChecked) {
-      this.iconClass = this.iconClassOn;
-      this.stateClass = this.styleClassOn;
       this.iconSvgName = this.iconSvgNameOn;
       this.iconSvgFillColor = this.iconSvgFillColorOn;
     } else {
-      this.iconClass = this.iconClassOff;
-      this.stateClass = this.styleClassOff;
       this.iconSvgName = this.iconSvgNameOff;
       this.iconSvgFillColor = this.iconSvgFillColorOff;
     }
@@ -70,61 +64,54 @@ var EuiIconToggleComponent = class _EuiIconToggleComponent {
     this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0, type: _EuiIconToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.4", type: _EuiIconToggleComponent, selector: "eui-icon-toggle", inputs: { id: "id", styleClass: "styleClass", styleClassOn: "styleClassOn", styleClassOff: "styleClassOff", iconClassOff: "iconClassOff", iconClassOn: "iconClassOn", iconSvgNameOn: "iconSvgNameOn", iconSvgNameOff: "iconSvgNameOff", iconSvgFillColorOn: "iconSvgFillColorOn", iconSvgFillColorOff: "iconSvgFillColorOff", tabindex: "tabindex", ariaLabel: "ariaLabel", keyboardAccessKey: "keyboardAccessKey", e2eAttr: "e2eAttr", isChecked: "isChecked", isReadOnly: "isReadOnly" }, outputs: { toggle: "toggle" }, host: { properties: { "attr.data-e2e": "this.e2eAttr" } }, viewQueries: [{ propertyName: "focusElement", first: true, predicate: ["focusElement"], descendants: true }], ngImport: i0, template: `<!-- TODO v18 use host binding declaration / remove styleClass -->
-
-<div
-    #focusElement
-    [id]="id"
-    class="eui-icon-toggle {{ styleClass }}"
-    [ngClass]="isChecked ? 'eui-icon-toggle--default-on' : 'eui-icon-toggle--default-off'"
-    tabindex="{{ !isReadOnly ? tabindex : '-1' }}"
-    role="switch"
-    [attr.aria-label]="ariaLabel"
-    [attr.aria-checked]="isChecked"
-    [attr.accesskey]="keyboardAccessKey"
-    (click)="onToggle()"
-    (keydown)="onKeyDown($event)">
-
-    <ng-container *ngIf="iconSvgNameOn && iconSvgNameOff">
-        <eui-icon-svg [icon]="iconSvgName" [fillColor]="iconSvgFillColor"></eui-icon-svg>
-    </ng-container>
-</div>
-`, styles: ['.eui-icon-toggle{display:inline-block;position:relative;cursor:pointer}.eui-icon-toggle:focus:not([readonly]){outline:2px solid var(--eui-c-focus)!important;outline-offset:-2px!important;transition:none}.eui-icon-toggle:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-icon-toggle [tabindex="0"]:focus:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-icon-toggle--default-on{color:var(--eui-c-accent)}.eui-icon-toggle--default-off{color:var(--eui-c-secondary-bg-light)}.eui-icon-toggle--checked{color:var(--eui-c-accent)}.eui-icon-toggle--readonly{cursor:auto}\n'], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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", "fillColor", "set", "size", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-next.4", type: _EuiIconToggleComponent, selector: "eui-icon-toggle", inputs: { isChecked: ["isChecked", "isChecked", booleanAttribute], isReadOnly: ["isReadOnly", "isReadOnly", booleanAttribute], e2eAttr: "e2eAttr", id: "id", tabindex: "tabindex", ariaLabel: "ariaLabel", iconSvgSize: "iconSvgSize", iconSvgNameOn: "iconSvgNameOn", iconSvgNameOff: "iconSvgNameOff", iconSvgFillColorOn: "iconSvgFillColorOn", iconSvgFillColorOff: "iconSvgFillColorOff", keyboardAccessKey: "keyboardAccessKey" }, outputs: { toggle: "toggle" }, host: { listeners: { "click": "onClick()", "keydown": "onKeydown($event)" }, properties: { "class": "this.cssClasses", "attr.role": "this.role", "attr.accesskey": "this.accessKey", "attr.aria-checked": "this.isChecked", "attr.readonly": "this.isReadOnly", "attr.data-e2e": "this.e2eAttr", "attr.id": "this.id", "attr.tabindex": "this.tabindex", "attr.aria-label": "this.ariaLabel" } }, ngImport: i0, template: '<eui-icon-svg [icon]="iconSvgName" [fillColor]="iconSvgFillColor" [size]="iconSvgSize"></eui-icon-svg>\n', styles: ['.eui-icon-toggle{display:inline-block;position:relative;cursor:pointer}.eui-icon-toggle:focus:not([readonly]){outline:2px solid var(--eui-c-focus)!important;outline-offset:-2px!important;transition:none}.eui-icon-toggle:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-icon-toggle [tabindex="0"]:focus:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-icon-toggle--default-on{color:var(--eui-c-accent)}.eui-icon-toggle--default-off{color:var(--eui-c-secondary-bg-light)}.eui-icon-toggle--checked{color:var(--eui-c-accent)}.eui-icon-toggle--readonly{cursor:auto}\n'], dependencies: [{ kind: "component", type: i1.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
   }
 };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0, type: EuiIconToggleComponent, decorators: [{
   type: Component,
-  args: [{ selector: "eui-icon-toggle", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `<!-- TODO v18 use host binding declaration / remove styleClass -->
-
-<div
-    #focusElement
-    [id]="id"
-    class="eui-icon-toggle {{ styleClass }}"
-    [ngClass]="isChecked ? 'eui-icon-toggle--default-on' : 'eui-icon-toggle--default-off'"
-    tabindex="{{ !isReadOnly ? tabindex : '-1' }}"
-    role="switch"
-    [attr.aria-label]="ariaLabel"
-    [attr.aria-checked]="isChecked"
-    [attr.accesskey]="keyboardAccessKey"
-    (click)="onToggle()"
-    (keydown)="onKeyDown($event)">
-
-    <ng-container *ngIf="iconSvgNameOn && iconSvgNameOff">
-        <eui-icon-svg [icon]="iconSvgName" [fillColor]="iconSvgFillColor"></eui-icon-svg>
-    </ng-container>
-</div>
-`, styles: ['.eui-icon-toggle{display:inline-block;position:relative;cursor:pointer}.eui-icon-toggle:focus:not([readonly]){outline:2px solid var(--eui-c-focus)!important;outline-offset:-2px!important;transition:none}.eui-icon-toggle:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-icon-toggle [tabindex="0"]:focus:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-icon-toggle--default-on{color:var(--eui-c-accent)}.eui-icon-toggle--default-off{color:var(--eui-c-secondary-bg-light)}.eui-icon-toggle--checked{color:var(--eui-c-accent)}.eui-icon-toggle--readonly{cursor:auto}\n'] }]
-}], propDecorators: { id: [{
-  type: Input
-}], styleClass: [{
+  args: [{ selector: "eui-icon-toggle", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<eui-icon-svg [icon]="iconSvgName" [fillColor]="iconSvgFillColor" [size]="iconSvgSize"></eui-icon-svg>\n', styles: ['.eui-icon-toggle{display:inline-block;position:relative;cursor:pointer}.eui-icon-toggle:focus:not([readonly]){outline:2px solid var(--eui-c-focus)!important;outline-offset:-2px!important;transition:none}.eui-icon-toggle:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-icon-toggle [tabindex="0"]:focus:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-icon-toggle--default-on{color:var(--eui-c-accent)}.eui-icon-toggle--default-off{color:var(--eui-c-secondary-bg-light)}.eui-icon-toggle--checked{color:var(--eui-c-accent)}.eui-icon-toggle--readonly{cursor:auto}\n'] }]
+}], propDecorators: { cssClasses: [{
+  type: HostBinding,
+  args: ["class"]
+}], role: [{
+  type: HostBinding,
+  args: ["attr.role"]
+}], accessKey: [{
+  type: HostBinding,
+  args: ["attr.accesskey"]
+}], isChecked: [{
+  type: HostBinding,
+  args: ["attr.aria-checked"]
+}, {
+  type: Input,
+  args: [{ transform: booleanAttribute }]
+}], isReadOnly: [{
+  type: HostBinding,
+  args: ["attr.readonly"]
+}, {
+  type: Input,
+  args: [{ transform: booleanAttribute }]
+}], e2eAttr: [{
+  type: HostBinding,
+  args: ["attr.data-e2e"]
+}, {
   type: Input
-}], styleClassOn: [{
+}], id: [{
+  type: HostBinding,
+  args: ["attr.id"]
+}, {
   type: Input
-}], styleClassOff: [{
+}], tabindex: [{
+  type: HostBinding,
+  args: ["attr.tabindex"]
+}, {
   type: Input
-}], iconClassOff: [{
+}], ariaLabel: [{
+  type: HostBinding,
+  args: ["attr.aria-label"]
+}, {
   type: Input
-}], iconClassOn: [{
+}], iconSvgSize: [{
   type: Input
 }], iconSvgNameOn: [{
   type: Input
@@ -134,26 +121,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4",
   type: Input
 }], iconSvgFillColorOff: [{
   type: Input
-}], tabindex: [{
-  type: Input
-}], ariaLabel: [{
-  type: Input
 }], keyboardAccessKey: [{
   type: Input
-}], e2eAttr: [{
-  type: HostBinding,
-  args: ["attr.data-e2e"]
-}, {
-  type: Input
 }], toggle: [{
   type: Output
-}], focusElement: [{
-  type: ViewChild,
-  args: ["focusElement"]
-}], isChecked: [{
-  type: Input
-}], isReadOnly: [{
-  type: Input
+}], onClick: [{
+  type: HostListener,
+  args: ["click"]
+}], onKeydown: [{
+  type: HostListener,
+  args: ["keydown", ["$event"]]
 }] } });
 
 // eui-icon-toggle.module.mjs

package/fesm2022/eui-components-eui-icon-toggle.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../eui-icon-toggle/eui-icon-toggle.component.ts", "../../eui-icon-toggle/eui-icon-toggle.component.html", "../../eui-icon-toggle/eui-icon-toggle.module.ts"],
-  "sourcesContent": ["// TODO v18 - refactor this cmp for host declaration (no sub content...)\n\nimport type { ElementRef } from '@angular/core';\nimport {\n    AfterContentInit,\n    ChangeDetectionStrategy,\n    Component,\n    EventEmitter,\n    HostBinding,\n    Input,\n    Output,\n    ViewChild,\n    ViewEncapsulation,\n} from '@angular/core';\nimport { uniqueId } from '@eui/core';\nimport { coerceBooleanProperty, BooleanInput } from '@angular/cdk/coercion';\n\n@Component({\n    selector: 'eui-icon-toggle',\n    templateUrl: './eui-icon-toggle.component.html',\n    styleUrls: ['./styles/_index.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n})\nexport class EuiIconToggleComponent implements AfterContentInit {\n    // TODO v18 : remove all inputs related to old eui-icon usage\n    @Input() id = `eui-icon-toggle-${uniqueId()}`;\n    @Input() styleClass: string;\n    @Input() styleClassOn: string;\n    @Input() styleClassOff: string;\n    @Input() iconClassOff: string;\n    @Input() iconClassOn: string;\n    @Input() iconSvgNameOn: string;\n    @Input() iconSvgNameOff: string;\n    @Input() iconSvgFillColorOn = 'accent-100';\n    @Input() iconSvgFillColorOff = 'grey-100';\n    @Input() tabindex = 0;\n    @Input() ariaLabel = 'Toggle icon';\n    @Input() keyboardAccessKey: string;\n\n    @HostBinding('attr.data-e2e') @Input() e2eAttr = 'eui-icon-toggle';\n\n    @Output() toggle: EventEmitter<boolean> = new EventEmitter();\n\n    @ViewChild('focusElement') focusElement: ElementRef<HTMLSpanElement>;\n    public iconClass: string;\n    public stateClass: string;\n\n    public iconSvgName: string;\n    public iconSvgFillColor: string;\n    public iconSvgSet: string;\n\n    @Input()\n    get isChecked(): boolean {\n        return this._isChecked;\n    }\n    set isChecked(value: BooleanInput) {\n        this._isChecked = coerceBooleanProperty(value);\n    }\n    private _isChecked = false;\n    @Input()\n    get isReadOnly(): boolean {\n        return this._isReadOnly;\n    }\n    set isReadOnly(value: BooleanInput) {\n        this._isReadOnly = coerceBooleanProperty(value);\n    }\n    private _isReadOnly = false;\n\n    ngAfterContentInit(): void {\n        this.setIconClass();\n        if (!this.ariaLabel || this.ariaLabel === '') {\n            this.ariaLabel = this.iconClass ? this.iconClass : '';\n        }\n    }\n\n    onToggle(): void {\n        if (!this.isReadOnly) {\n            this.isChecked = !this.isChecked;\n            this.setIconClass();\n            this.toggle.emit(this.isChecked);\n        }\n            this.focusElement?.nativeElement.focus();\n    }\n\n    onKeyDown(event: KeyboardEvent): void {\n        switch (event.code) {\n            case 'Enter':\n            case 'Space':\n                event.preventDefault();\n                event.stopPropagation();\n                this.onToggle();\n                break;\n        }\n    }\n\n    private setIconClass(): void {\n        if (this.isChecked) {\n            this.iconClass = this.iconClassOn;\n            this.stateClass = this.styleClassOn;\n            this.iconSvgName = this.iconSvgNameOn;\n            this.iconSvgFillColor = this.iconSvgFillColorOn;\n        } else {\n            this.iconClass = this.iconClassOff;\n            this.stateClass = this.styleClassOff;\n            this.iconSvgName = this.iconSvgNameOff;\n            this.iconSvgFillColor = this.iconSvgFillColorOff;\n        }\n    }\n}\n", "<!-- TODO v18 use host binding declaration / remove styleClass -->\n\n<div\n    #focusElement\n    [id]=\"id\"\n    class=\"eui-icon-toggle {{ styleClass }}\"\n    [ngClass]=\"isChecked ? 'eui-icon-toggle--default-on' : 'eui-icon-toggle--default-off'\"\n    tabindex=\"{{ !isReadOnly ? tabindex : '-1' }}\"\n    role=\"switch\"\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-checked]=\"isChecked\"\n    [attr.accesskey]=\"keyboardAccessKey\"\n    (click)=\"onToggle()\"\n    (keydown)=\"onKeyDown($event)\">\n\n    <ng-container *ngIf=\"iconSvgNameOn && iconSvgNameOff\">\n        <eui-icon-svg [icon]=\"iconSvgName\" [fillColor]=\"iconSvgFillColor\"></eui-icon-svg>\n    </ng-container>\n</div>\n", "import { EuiIconToggleComponent } from './eui-icon-toggle.component';\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\n\nimport { EuiIconModule } from '@eui/components/eui-icon';\n\n@NgModule({\n    imports: [CommonModule, EuiIconModule],\n    exports: [EuiIconToggleComponent],\n    declarations: [EuiIconToggleComponent],\n})\nexport class EuiIconToggleModule {}\n"],
-  "mappings": ";AAGA,SAEI,yBACA,WACA,cACA,aACA,OACA,QACA,WACA,yBACG;AACP,SAAS,gBAAgB;AACzB,SAAS,6BAA2C;;;;AAS9C,IAAO,yBAAP,MAAO,wBAAsB;EAPnC,cAAA;AASa,SAAA,KAAK,mBAAmB,SAAQ,CAAE;AAQlC,SAAA,qBAAqB;AACrB,SAAA,sBAAsB;AACtB,SAAA,WAAW;AACX,SAAA,YAAY;AAGkB,SAAA,UAAU;AAEvC,SAAA,SAAgC,IAAI,aAAY;AAiBlD,SAAA,aAAa;AAQb,SAAA,cAAc;;EAftB,IACI,YAAS;AACT,WAAO,KAAK;EAChB;EACA,IAAI,UAAU,OAAmB;AAC7B,SAAK,aAAa,sBAAsB,KAAK;EACjD;EAEA,IACI,aAAU;AACV,WAAO,KAAK;EAChB;EACA,IAAI,WAAW,OAAmB;AAC9B,SAAK,cAAc,sBAAsB,KAAK;EAClD;EAGA,qBAAkB;AACd,SAAK,aAAY;AACjB,QAAI,CAAC,KAAK,aAAa,KAAK,cAAc,IAAI;AAC1C,WAAK,YAAY,KAAK,YAAY,KAAK,YAAY;IACvD;EACJ;EAEA,WAAQ;AACJ,QAAI,CAAC,KAAK,YAAY;AAClB,WAAK,YAAY,CAAC,KAAK;AACvB,WAAK,aAAY;AACjB,WAAK,OAAO,KAAK,KAAK,SAAS;IACnC;AACI,SAAK,cAAc,cAAc,MAAK;EAC9C;EAEA,UAAU,OAAoB;AAC1B,YAAQ,MAAM,MAAM;MAChB,KAAK;MACL,KAAK;AACD,cAAM,eAAc;AACpB,cAAM,gBAAe;AACrB,aAAK,SAAQ;AACb;IACR;EACJ;EAEQ,eAAY;AAChB,QAAI,KAAK,WAAW;AAChB,WAAK,YAAY,KAAK;AACtB,WAAK,aAAa,KAAK;AACvB,WAAK,cAAc,KAAK;AACxB,WAAK,mBAAmB,KAAK;IACjC,OAAO;AACH,WAAK,YAAY,KAAK;AACtB,WAAK,aAAa,KAAK;AACvB,WAAK,cAAc,KAAK;AACxB,WAAK,mBAAmB,KAAK;IACjC;EACJ;;4GApFS,yBAAsB,MAAA,CAAA,GAAA,QAAA,mBAAA,UAAA,CAAA;EAAA;;gGAAtB,yBAAsB,UAAA,mBAAA,QAAA,EAAA,IAAA,MAAA,YAAA,cAAA,cAAA,gBAAA,eAAA,iBAAA,cAAA,gBAAA,aAAA,eAAA,eAAA,iBAAA,gBAAA,kBAAA,oBAAA,sBAAA,qBAAA,uBAAA,UAAA,YAAA,WAAA,aAAA,mBAAA,qBAAA,SAAA,WAAA,WAAA,aAAA,YAAA,aAAA,GAAA,SAAA,EAAA,QAAA,SAAA,GAAA,MAAA,EAAA,YAAA,EAAA,iBAAA,eAAA,EAAA,GAAA,aAAA,CAAA,EAAA,cAAA,gBAAA,OAAA,MAAA,WAAA,CAAA,cAAA,GAAA,aAAA,KAAA,CAAA,GAAA,UAAA,IAAA,UCxBnC;;;;;;;;;;;;;;;;;;;GAmBA,QAAA,CAAA,otBAAA,GAAA,cAAA,CAAA,EAAA,MAAA,aAAA,MAAA,YAAA,UAAA,aAAA,QAAA,CAAA,SAAA,SAAA,EAAA,GAAA,EAAA,MAAA,aAAA,MAAA,SAAA,UAAA,UAAA,QAAA,CAAA,QAAA,YAAA,UAAA,EAAA,GAAA,EAAA,MAAA,aAAA,MAAA,wBAAA,UAAA,iDAAA,QAAA,CAAA,QAAA,aAAA,OAAA,QAAA,kBAAA,QAAA,SAAA,WAAA,aAAA,cAAA,cAAA,aAAA,aAAA,eAAA,YAAA,QAAA,EAAA,CAAA,GAAA,iBAAA,2BAAA,QAAA,eAAA,qBAAA,KAAA,CAAA;EAAA;;kGDKa,wBAAsB,YAAA,CAAA;QAPlC;qBACa,mBAAiB,iBAGV,wBAAwB,QAAM,eAChC,kBAAkB,MAAI,UAAA;;;;;;;;;;;;;;;;;;;GAAA,QAAA,CAAA,otBAAA,EAAA,CAAA;sBAI5B,IAAE,CAAA;QAAV;IACQ,YAAU,CAAA;QAAlB;IACQ,cAAY,CAAA;QAApB;IACQ,eAAa,CAAA;QAArB;IACQ,cAAY,CAAA;QAApB;IACQ,aAAW,CAAA;QAAnB;IACQ,eAAa,CAAA;QAArB;IACQ,gBAAc,CAAA;QAAtB;IACQ,oBAAkB,CAAA;QAA1B;IACQ,qBAAmB,CAAA;QAA3B;IACQ,UAAQ,CAAA;QAAhB;IACQ,WAAS,CAAA;QAAjB;IACQ,mBAAiB,CAAA;QAAzB;IAEsC,SAAO,CAAA;QAA7C;SAAY,eAAe;;QAAG;IAErB,QAAM,CAAA;QAAf;IAE0B,cAAY,CAAA;QAAtC;SAAU,cAAc;IASrB,WAAS,CAAA;QADZ;IASG,YAAU,CAAA;QADb;;;;AE3DL,SAAS,oBAAoB;AAC7B,SAAS,gBAAgB;AAEzB,SAAS,qBAAqB;;AAOxB,IAAO,sBAAP,MAAO,qBAAmB;;8GAAnB,sBAAmB,MAAA,CAAA,GAAA,QAAA,oBAAA,SAAA,CAAA;EAAA;;+GAAnB,sBAAmB,cAAA,CAFb,sBAAsB,GAAA,SAAA,CAF3B,cAAc,aAAa,GAAA,SAAA,CAC3B,sBAAsB,EAAA,CAAA;EAAA;;+GAGvB,sBAAmB,SAAA,CAJlB,cAAc,aAAa,EAAA,CAAA;EAAA;;oGAI5B,qBAAmB,YAAA,CAAA;QAL/B;SAAS;IACN,SAAS,CAAC,cAAc,aAAa;IACrC,SAAS,CAAC,sBAAsB;IAChC,cAAc,CAAC,sBAAsB;GACxC;;",
+  "sourcesContent": ["import {\n    AfterContentInit,\n    ChangeDetectionStrategy,\n    Component,\n    EventEmitter,\n    HostBinding,\n    HostListener,\n    Input,\n    Output,\n    ViewEncapsulation,\n    booleanAttribute,\n} from '@angular/core';\nimport { uniqueId } from '@eui/core';\n\n@Component({\n    selector: 'eui-icon-toggle',\n    templateUrl: './eui-icon-toggle.component.html',\n    styleUrls: ['./styles/_index.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n})\nexport class EuiIconToggleComponent implements AfterContentInit {\n    @HostBinding('class')\n    public get cssClasses(): string {\n        return ['eui-icon-toggle',\n            this.isChecked ? 'eui-icon-toggle--default-on' : 'eui-icon-toggle--default-off',\n            this.isReadOnly ? 'eui-icon-toggle--readonly': '',\n        ].join(' ').trim();\n    }\n    @HostBinding('attr.role') role = 'switch';\n    @HostBinding('attr.accesskey') accessKey = 'keyboardAccessKey'\n\n    @HostBinding('attr.aria-checked')\n    @Input({ transform: booleanAttribute }) isChecked = false;\n\n    @HostBinding('attr.readonly')\n    @Input({ transform: booleanAttribute }) isReadOnly = false;\n\n    @HostBinding('attr.data-e2e')\n    @Input() e2eAttr = 'eui-icon-toggle';\n\n    @HostBinding('attr.id')\n    @Input() id = `eui-icon-toggle-${uniqueId()}`;\n\n    @HostBinding('attr.tabindex')\n    @Input() tabindex = this.isReadOnly ? '-1' : '0';\n\n    @HostBinding('attr.aria-label')\n    @Input() ariaLabel = 'Toggle icon';\n\n    @Input() iconSvgSize = 'm';\n    @Input() iconSvgNameOn: string;\n    @Input() iconSvgNameOff: string;\n    @Input() iconSvgFillColorOn = 'accent-100';\n    @Input() iconSvgFillColorOff = 'grey-100';\n    @Input() keyboardAccessKey: string;\n\n    @Output() toggle: EventEmitter<boolean> = new EventEmitter();\n\n    protected iconSvgName: string;\n    protected iconSvgFillColor: string;\n    protected iconSvgSet: string;\n\n    ngAfterContentInit(): void {\n        this._setIconClass();\n        if (!this.ariaLabel || this.ariaLabel === '') {\n            this.ariaLabel = this.iconSvgName ? this.iconSvgName : '';\n        }\n    }\n\n    @HostListener('click')\n    protected onClick(): void {\n        this._toggle();\n    }\n\n    @HostListener('keydown', ['$event'])\n    protected onKeydown(event: KeyboardEvent): void {\n        switch (event.code) {\n            case 'Enter':\n            case 'Space':\n                event.preventDefault();\n                event.stopPropagation();\n                this._toggle();\n                break;\n        }\n    }\n\n    private _toggle(): void {\n        if (!this.isReadOnly) {\n            this.isChecked = !this.isChecked;\n            this._setIconClass();\n            this.toggle.emit(this.isChecked);\n        }\n    }\n\n    private _setIconClass(): void {\n        if (this.isChecked) {\n            this.iconSvgName = this.iconSvgNameOn;\n            this.iconSvgFillColor = this.iconSvgFillColorOn;\n        } else {\n            this.iconSvgName = this.iconSvgNameOff;\n            this.iconSvgFillColor = this.iconSvgFillColorOff;\n        }\n    }\n}\n", "<eui-icon-svg [icon]=\"iconSvgName\" [fillColor]=\"iconSvgFillColor\" [size]=\"iconSvgSize\"></eui-icon-svg>\n", "import { EuiIconToggleComponent } from './eui-icon-toggle.component';\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\n\nimport { EuiIconModule } from '@eui/components/eui-icon';\n\n@NgModule({\n    imports: [CommonModule, EuiIconModule],\n    exports: [EuiIconToggleComponent],\n    declarations: [EuiIconToggleComponent],\n})\nexport class EuiIconToggleModule {}\n"],
+  "mappings": "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",
   "names": []
 }

package/fesm2022/eui-components-eui-input-group.mjs

@@ -13,12 +13,12 @@ var EuiInputGroupComponent = class _EuiInputGroupComponent {
     this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0, type: _EuiInputGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.4", type: _EuiInputGroupComponent, selector: "div[euiInputGroup]", inputs: { e2eAttr: "e2eAttr" }, host: { properties: { "attr.data-e2e": "this.e2eAttr", "class": "this.cssClasses", "attr.type": "this.type" } }, ngImport: i0, template: "<ng-content></ng-content>", isInline: true, styles: [".eui-input-group{align-items:flex-start;display:flex;flex-direction:column;margin-bottom:var(--eui-base-spacing-m);position:relative;width:100%}.eui-input-group>.eui-label{align-items:center;display:inline-flex}.eui-input-group>.eui-label:first-child{font:normal normal 400 1rem/1.75rem var(--eui-base-font-family);font-weight:700;margin-bottom:var(--eui-base-spacing-xs);min-height:var(--eui-base-spacing-l)}.eui-input-group:not(.row) .eui-input-radio+label,.eui-input-group:not(.row) .eui-input-checkbox+label{left:calc(var(--eui-base-spacing-xl) - 2px);margin-bottom:calc(-1 * var(--eui-base-spacing-2xs));position:relative;top:calc(-1 * (var(--eui-base-spacing-m) + var(--eui-base-spacing-2xs)));vertical-align:middle;white-space:inherit}.eui-input-group:not(.row) div{align-items:center!important}.eui-input-group:not(.row) div .eui-input-checkbox+label{margin-bottom:0;padding-right:0;top:0;left:0}.eui-input-group:not(.row) div .eui-input-radio+label{padding-right:0;top:0;left:0}.eui-input-group.row{align-items:center;flex-direction:row}.eui-input-group.row .eui-label{align-items:center;display:flex;justify-content:flex-end;margin-bottom:0!important;margin-top:0;padding-right:0;text-align:right;font:normal normal 400 1rem/1.75rem var(--eui-base-font-family);white-space:normal}.eui-input-group.row .eui-label:first-child{font:normal normal 400 1rem/1.75rem var(--eui-base-font-family);font-weight:700}@media screen and (max-width: 767px){.eui-input-group.row{flex-direction:column}.eui-input-group.row label,.eui-input-group.row .eui-label{justify-content:flex-start;text-align:left}}.eui-input-group-addon{align-items:stretch;display:flex;position:relative;width:100%}.eui-input-group-addon-item{align-items:center;align-self:stretch;background-color:var(--eui-c-secondary-bg-light);border:1px solid var(--eui-c-secondary-lighter);border-radius:0;box-shadow:var(--eui-app-box-shadow);color:var(--eui-c-secondary-bg-light);display:flex;flex-shrink:0;height:auto;justify-content:center;min-width:calc(var(--eui-base-spacing-2xl) + var(--eui-base-spacing-2xs));padding:var(--eui-base-spacing-xs)}.eui-input-group-addon>:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.eui-input-group-addon>:not(:last-child){border-bottom-left-radius:var(--eui-base-border-radius);border-top-left-radius:var(--eui-base-border-radius);border-bottom-right-radius:0;border-top-right-radius:0}.eui-input-group-addon>:not(:first-child):not(:last-child){border-radius:0}.eui-input-group-addon>:last-child:not(:first-child){border-radius:0 var(--eui-base-border-radius) var(--eui-base-border-radius) 0}.eui-input-group-addon .eui-input-group-addon-item+.eui-textarea,.eui-input-group-addon .eui-input-group-addon-item+.eui-input-text,.eui-input-group-addon .eui-input-group-addon-item+.eui-input-number,.eui-input-group-addon .eui-input-group-addon-item+.eui-select{border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-1px}.eui-input-group-addon .eui-input-group-addon-item+.eui-autocomplete__wrapper .eui-textarea,.eui-input-group-addon .eui-input-group-addon-item+.eui-autocomplete__wrapper .eui-input-text,.eui-input-group-addon .eui-input-group-addon-item+.eui-autocomplete__wrapper .eui-input-number,.eui-input-group-addon .eui-input-group-addon-item+.eui-autocomplete__wrapper .eui-select,.eui-input-group-addon .eui-input-group-addon-item+.eui-textarea__wrapper .eui-textarea,.eui-input-group-addon .eui-input-group-addon-item+.eui-textarea__wrapper .eui-input-text,.eui-input-group-addon .eui-input-group-addon-item+.eui-textarea__wrapper .eui-input-number,.eui-input-group-addon .eui-input-group-addon-item+.eui-textarea__wrapper .eui-select,.eui-input-group-addon .eui-input-group-addon-item+.eui-input-maxlength-wrapper .eui-textarea,.eui-input-group-addon .eui-input-group-addon-item+.eui-input-maxlength-wrapper .eui-input-text,.eui-input-group-addon .eui-input-group-addon-item+.eui-input-maxlength-wrapper .eui-input-number,.eui-input-group-addon .eui-input-group-addon-item+.eui-input-maxlength-wrapper .eui-select{border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-1px}.eui-input-group-addon .eui-select,.eui-input-group-addon .eui-button,.eui-input-group-addon eui-dropdown{margin-left:-2px}.eui-input-group-addon .eui-input-text+.eui-input-group-addon-item,.eui-input-group-addon .eui-input-number+.eui-input-group-addon-item{border-left-color:transparent}.eui-input-group-addon .eui-button,.eui-input-group-addon .eui-textarea{margin-left:-1px}\n"], encapsulation: i0.ViewEncapsulation.None });
+    this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.4", type: _EuiInputGroupComponent, selector: "div[euiInputGroup]", inputs: { e2eAttr: "e2eAttr" }, host: { properties: { "attr.data-e2e": "this.e2eAttr", "class": "this.cssClasses", "attr.type": "this.type" } }, ngImport: i0, template: "<ng-content></ng-content>", isInline: true, styles: [".eui-input-group{align-items:flex-start;display:flex;flex-direction:column;margin-bottom:var(--eui-base-spacing-m);position:relative;width:100%}.eui-input-group>.eui-label{align-items:center;display:inline-flex}.eui-input-group>.eui-label:first-child{font:normal normal 400 1rem/1.75rem var(--eui-base-font-family);font-weight:700;margin-bottom:var(--eui-base-spacing-xs);min-height:var(--eui-base-spacing-l)}.eui-input-group:not(.row) .eui-input-radio+label,.eui-input-group:not(.row) .eui-input-checkbox+label{left:calc(var(--eui-base-spacing-xl) - 2px);margin-bottom:calc(-1 * var(--eui-base-spacing-2xs));position:relative;top:calc(-1 * (var(--eui-base-spacing-m) + var(--eui-base-spacing-2xs)));vertical-align:middle;white-space:inherit}.eui-input-group:not(.row) div{align-items:center!important}.eui-input-group:not(.row) div .eui-input-checkbox+label{margin-bottom:0;padding-right:0;top:0;left:0}.eui-input-group:not(.row) div .eui-input-radio+label{padding-right:0;top:0;left:0}.eui-input-group.row{align-items:center;flex-direction:row}.eui-input-group.row .eui-label{align-items:center;display:flex;justify-content:flex-end;margin-bottom:0!important;margin-top:0;padding-right:0;text-align:right;font:normal normal 400 1rem/1.75rem var(--eui-base-font-family);white-space:normal}.eui-input-group.row .eui-label:first-child{font:normal normal 400 1rem/1.75rem var(--eui-base-font-family);font-weight:700}@media screen and (max-width: 767px){.eui-input-group.row{flex-direction:column}.eui-input-group.row label,.eui-input-group.row .eui-label{justify-content:flex-start;text-align:left}}.eui-input-group-addon{align-items:stretch;display:flex;position:relative;width:100%}.eui-input-group-addon-item{align-items:center;align-self:stretch;background-color:var(--eui-c-secondary-bg-light);border:1px solid var(--eui-c-secondary-lighter);border-radius:0;box-shadow:var(--eui-app-box-shadow);color:var(--eui-c-secondary);display:flex;flex-shrink:0;height:auto;justify-content:center;min-width:calc(var(--eui-base-spacing-2xl) + var(--eui-base-spacing-2xs));padding:var(--eui-base-spacing-xs)}.eui-input-group-addon>:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.eui-input-group-addon>:not(:last-child){border-bottom-left-radius:var(--eui-base-border-radius);border-top-left-radius:var(--eui-base-border-radius);border-bottom-right-radius:0;border-top-right-radius:0}.eui-input-group-addon>:not(:first-child):not(:last-child){border-radius:0}.eui-input-group-addon>:last-child:not(:first-child){border-radius:0 var(--eui-base-border-radius) var(--eui-base-border-radius) 0}.eui-input-group-addon .eui-input-group-addon-item+.eui-textarea,.eui-input-group-addon .eui-input-group-addon-item+.eui-input-text,.eui-input-group-addon .eui-input-group-addon-item+.eui-input-number,.eui-input-group-addon .eui-input-group-addon-item+.eui-select{border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-1px}.eui-input-group-addon .eui-input-group-addon-item+.eui-autocomplete__wrapper .eui-textarea,.eui-input-group-addon .eui-input-group-addon-item+.eui-autocomplete__wrapper .eui-input-text,.eui-input-group-addon .eui-input-group-addon-item+.eui-autocomplete__wrapper .eui-input-number,.eui-input-group-addon .eui-input-group-addon-item+.eui-autocomplete__wrapper .eui-select,.eui-input-group-addon .eui-input-group-addon-item+.eui-textarea__wrapper .eui-textarea,.eui-input-group-addon .eui-input-group-addon-item+.eui-textarea__wrapper .eui-input-text,.eui-input-group-addon .eui-input-group-addon-item+.eui-textarea__wrapper .eui-input-number,.eui-input-group-addon .eui-input-group-addon-item+.eui-textarea__wrapper .eui-select,.eui-input-group-addon .eui-input-group-addon-item+.eui-input-maxlength-wrapper .eui-textarea,.eui-input-group-addon .eui-input-group-addon-item+.eui-input-maxlength-wrapper .eui-input-text,.eui-input-group-addon .eui-input-group-addon-item+.eui-input-maxlength-wrapper .eui-input-number,.eui-input-group-addon .eui-input-group-addon-item+.eui-input-maxlength-wrapper .eui-select{border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-1px}.eui-input-group-addon .eui-select,.eui-input-group-addon .eui-button,.eui-input-group-addon eui-dropdown{margin-left:-2px}.eui-input-group-addon .eui-input-text+.eui-input-group-addon-item,.eui-input-group-addon .eui-input-number+.eui-input-group-addon-item{border-left-color:transparent}.eui-input-group-addon .eui-button,.eui-input-group-addon .eui-textarea{margin-left:-1px}\n"], encapsulation: i0.ViewEncapsulation.None });
   }
 };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0, type: EuiInputGroupComponent, decorators: [{
   type: Component,
-  args: [{ selector: "div[euiInputGroup]", template: "<ng-content></ng-content>", encapsulation: ViewEncapsulation.None, styles: [".eui-input-group{align-items:flex-start;display:flex;flex-direction:column;margin-bottom:var(--eui-base-spacing-m);position:relative;width:100%}.eui-input-group>.eui-label{align-items:center;display:inline-flex}.eui-input-group>.eui-label:first-child{font:normal normal 400 1rem/1.75rem var(--eui-base-font-family);font-weight:700;margin-bottom:var(--eui-base-spacing-xs);min-height:var(--eui-base-spacing-l)}.eui-input-group:not(.row) .eui-input-radio+label,.eui-input-group:not(.row) .eui-input-checkbox+label{left:calc(var(--eui-base-spacing-xl) - 2px);margin-bottom:calc(-1 * var(--eui-base-spacing-2xs));position:relative;top:calc(-1 * (var(--eui-base-spacing-m) + var(--eui-base-spacing-2xs)));vertical-align:middle;white-space:inherit}.eui-input-group:not(.row) div{align-items:center!important}.eui-input-group:not(.row) div .eui-input-checkbox+label{margin-bottom:0;padding-right:0;top:0;left:0}.eui-input-group:not(.row) div .eui-input-radio+label{padding-right:0;top:0;left:0}.eui-input-group.row{align-items:center;flex-direction:row}.eui-input-group.row .eui-label{align-items:center;display:flex;justify-content:flex-end;margin-bottom:0!important;margin-top:0;padding-right:0;text-align:right;font:normal normal 400 1rem/1.75rem var(--eui-base-font-family);white-space:normal}.eui-input-group.row .eui-label:first-child{font:normal normal 400 1rem/1.75rem var(--eui-base-font-family);font-weight:700}@media screen and (max-width: 767px){.eui-input-group.row{flex-direction:column}.eui-input-group.row label,.eui-input-group.row .eui-label{justify-content:flex-start;text-align:left}}.eui-input-group-addon{align-items:stretch;display:flex;position:relative;width:100%}.eui-input-group-addon-item{align-items:center;align-self:stretch;background-color:var(--eui-c-secondary-bg-light);border:1px solid var(--eui-c-secondary-lighter);border-radius:0;box-shadow:var(--eui-app-box-shadow);color:var(--eui-c-secondary-bg-light);display:flex;flex-shrink:0;height:auto;justify-content:center;min-width:calc(var(--eui-base-spacing-2xl) + var(--eui-base-spacing-2xs));padding:var(--eui-base-spacing-xs)}.eui-input-group-addon>:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.eui-input-group-addon>:not(:last-child){border-bottom-left-radius:var(--eui-base-border-radius);border-top-left-radius:var(--eui-base-border-radius);border-bottom-right-radius:0;border-top-right-radius:0}.eui-input-group-addon>:not(:first-child):not(:last-child){border-radius:0}.eui-input-group-addon>:last-child:not(:first-child){border-radius:0 var(--eui-base-border-radius) var(--eui-base-border-radius) 0}.eui-input-group-addon .eui-input-group-addon-item+.eui-textarea,.eui-input-group-addon .eui-input-group-addon-item+.eui-input-text,.eui-input-group-addon .eui-input-group-addon-item+.eui-input-number,.eui-input-group-addon .eui-input-group-addon-item+.eui-select{border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-1px}.eui-input-group-addon .eui-input-group-addon-item+.eui-autocomplete__wrapper .eui-textarea,.eui-input-group-addon .eui-input-group-addon-item+.eui-autocomplete__wrapper .eui-input-text,.eui-input-group-addon .eui-input-group-addon-item+.eui-autocomplete__wrapper .eui-input-number,.eui-input-group-addon .eui-input-group-addon-item+.eui-autocomplete__wrapper .eui-select,.eui-input-group-addon .eui-input-group-addon-item+.eui-textarea__wrapper .eui-textarea,.eui-input-group-addon .eui-input-group-addon-item+.eui-textarea__wrapper .eui-input-text,.eui-input-group-addon .eui-input-group-addon-item+.eui-textarea__wrapper .eui-input-number,.eui-input-group-addon .eui-input-group-addon-item+.eui-textarea__wrapper .eui-select,.eui-input-group-addon .eui-input-group-addon-item+.eui-input-maxlength-wrapper .eui-textarea,.eui-input-group-addon .eui-input-group-addon-item+.eui-input-maxlength-wrapper .eui-input-text,.eui-input-group-addon .eui-input-group-addon-item+.eui-input-maxlength-wrapper .eui-input-number,.eui-input-group-addon .eui-input-group-addon-item+.eui-input-maxlength-wrapper .eui-select{border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-1px}.eui-input-group-addon .eui-select,.eui-input-group-addon .eui-button,.eui-input-group-addon eui-dropdown{margin-left:-2px}.eui-input-group-addon .eui-input-text+.eui-input-group-addon-item,.eui-input-group-addon .eui-input-number+.eui-input-group-addon-item{border-left-color:transparent}.eui-input-group-addon .eui-button,.eui-input-group-addon .eui-textarea{margin-left:-1px}\n"] }]
+  args: [{ selector: "div[euiInputGroup]", template: "<ng-content></ng-content>", encapsulation: ViewEncapsulation.None, styles: [".eui-input-group{align-items:flex-start;display:flex;flex-direction:column;margin-bottom:var(--eui-base-spacing-m);position:relative;width:100%}.eui-input-group>.eui-label{align-items:center;display:inline-flex}.eui-input-group>.eui-label:first-child{font:normal normal 400 1rem/1.75rem var(--eui-base-font-family);font-weight:700;margin-bottom:var(--eui-base-spacing-xs);min-height:var(--eui-base-spacing-l)}.eui-input-group:not(.row) .eui-input-radio+label,.eui-input-group:not(.row) .eui-input-checkbox+label{left:calc(var(--eui-base-spacing-xl) - 2px);margin-bottom:calc(-1 * var(--eui-base-spacing-2xs));position:relative;top:calc(-1 * (var(--eui-base-spacing-m) + var(--eui-base-spacing-2xs)));vertical-align:middle;white-space:inherit}.eui-input-group:not(.row) div{align-items:center!important}.eui-input-group:not(.row) div .eui-input-checkbox+label{margin-bottom:0;padding-right:0;top:0;left:0}.eui-input-group:not(.row) div .eui-input-radio+label{padding-right:0;top:0;left:0}.eui-input-group.row{align-items:center;flex-direction:row}.eui-input-group.row .eui-label{align-items:center;display:flex;justify-content:flex-end;margin-bottom:0!important;margin-top:0;padding-right:0;text-align:right;font:normal normal 400 1rem/1.75rem var(--eui-base-font-family);white-space:normal}.eui-input-group.row .eui-label:first-child{font:normal normal 400 1rem/1.75rem var(--eui-base-font-family);font-weight:700}@media screen and (max-width: 767px){.eui-input-group.row{flex-direction:column}.eui-input-group.row label,.eui-input-group.row .eui-label{justify-content:flex-start;text-align:left}}.eui-input-group-addon{align-items:stretch;display:flex;position:relative;width:100%}.eui-input-group-addon-item{align-items:center;align-self:stretch;background-color:var(--eui-c-secondary-bg-light);border:1px solid var(--eui-c-secondary-lighter);border-radius:0;box-shadow:var(--eui-app-box-shadow);color:var(--eui-c-secondary);display:flex;flex-shrink:0;height:auto;justify-content:center;min-width:calc(var(--eui-base-spacing-2xl) + var(--eui-base-spacing-2xs));padding:var(--eui-base-spacing-xs)}.eui-input-group-addon>:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.eui-input-group-addon>:not(:last-child){border-bottom-left-radius:var(--eui-base-border-radius);border-top-left-radius:var(--eui-base-border-radius);border-bottom-right-radius:0;border-top-right-radius:0}.eui-input-group-addon>:not(:first-child):not(:last-child){border-radius:0}.eui-input-group-addon>:last-child:not(:first-child){border-radius:0 var(--eui-base-border-radius) var(--eui-base-border-radius) 0}.eui-input-group-addon .eui-input-group-addon-item+.eui-textarea,.eui-input-group-addon .eui-input-group-addon-item+.eui-input-text,.eui-input-group-addon .eui-input-group-addon-item+.eui-input-number,.eui-input-group-addon .eui-input-group-addon-item+.eui-select{border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-1px}.eui-input-group-addon .eui-input-group-addon-item+.eui-autocomplete__wrapper .eui-textarea,.eui-input-group-addon .eui-input-group-addon-item+.eui-autocomplete__wrapper .eui-input-text,.eui-input-group-addon .eui-input-group-addon-item+.eui-autocomplete__wrapper .eui-input-number,.eui-input-group-addon .eui-input-group-addon-item+.eui-autocomplete__wrapper .eui-select,.eui-input-group-addon .eui-input-group-addon-item+.eui-textarea__wrapper .eui-textarea,.eui-input-group-addon .eui-input-group-addon-item+.eui-textarea__wrapper .eui-input-text,.eui-input-group-addon .eui-input-group-addon-item+.eui-textarea__wrapper .eui-input-number,.eui-input-group-addon .eui-input-group-addon-item+.eui-textarea__wrapper .eui-select,.eui-input-group-addon .eui-input-group-addon-item+.eui-input-maxlength-wrapper .eui-textarea,.eui-input-group-addon .eui-input-group-addon-item+.eui-input-maxlength-wrapper .eui-input-text,.eui-input-group-addon .eui-input-group-addon-item+.eui-input-maxlength-wrapper .eui-input-number,.eui-input-group-addon .eui-input-group-addon-item+.eui-input-maxlength-wrapper .eui-select{border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-1px}.eui-input-group-addon .eui-select,.eui-input-group-addon .eui-button,.eui-input-group-addon eui-dropdown{margin-left:-2px}.eui-input-group-addon .eui-input-text+.eui-input-group-addon-item,.eui-input-group-addon .eui-input-number+.eui-input-group-addon-item{border-left-color:transparent}.eui-input-group-addon .eui-button,.eui-input-group-addon .eui-textarea{margin-left:-1px}\n"] }]
 }], propDecorators: { e2eAttr: [{
   type: HostBinding,
   args: ["attr.data-e2e"]

package/fesm2022/eui-components-eui-input-group.mjs.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../eui-input-group/eui-input-group.component.ts", "../../eui-input-group/eui-input-group.module.ts"],
   "sourcesContent": ["import { Component, HostBinding, Input, ViewEncapsulation } from '@angular/core';\n\n@Component({\n    // eslint-disable-next-line @angular-eslint/component-selector\n    selector: 'div[euiInputGroup]',\n    styleUrls: ['./styles/_index.scss'],\n    template: '<ng-content></ng-content>',\n    encapsulation: ViewEncapsulation.None,\n})\nexport class EuiInputGroupComponent {\n    @HostBinding('attr.data-e2e') @Input() e2eAttr = 'eui-input-group';\n    @HostBinding('class')\n    public get cssClasses(): string {\n        return 'eui-input-group';\n    }\n\n    @HostBinding('attr.type') protected type = 'inputGroup';\n}\n", "import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { EuiInputGroupComponent } from './eui-input-group.component';\n\n@NgModule({\n    imports: [CommonModule],\n    declarations: [EuiInputGroupComponent],\n    exports: [EuiInputGroupComponent],\n})\nexport class EuiInputGroupModule {}\n"],
-  "mappings": ";AAAA,SAAS,WAAW,aAAa,OAAO,yBAAyB;;AAS3D,IAAO,yBAAP,MAAO,wBAAsB;EAPnC,cAAA;AAQ2C,SAAA,UAAU;AAMb,SAAA,OAAO;;EAL3C,IACW,aAAU;AACjB,WAAO;EACX;;4GALS,yBAAsB,MAAA,CAAA,GAAA,QAAA,mBAAA,UAAA,CAAA;EAAA;;gGAAtB,yBAAsB,UAAA,sBAAA,QAAA,EAAA,SAAA,UAAA,GAAA,MAAA,EAAA,YAAA,EAAA,iBAAA,gBAAA,SAAA,mBAAA,aAAA,YAAA,EAAA,GAAA,UAAA,IAAA,UAHrB,6BAA2B,UAAA,MAAA,QAAA,CAAA,25IAAA,GAAA,eAAA,qBAAA,KAAA,CAAA;EAAA;;kGAG5B,wBAAsB,YAAA,CAAA;QAPlC;qBAEa,sBAAoB,UAEpB,6BAA2B,eACtB,kBAAkB,MAAI,QAAA,CAAA,25IAAA,EAAA,CAAA;sBAGE,SAAO,CAAA;QAA7C;SAAY,eAAe;;QAAG;IAEpB,YAAU,CAAA;QADpB;SAAY,OAAO;IAKgB,MAAI,CAAA;QAAvC;SAAY,WAAW;;;;AChB5B,SAAS,gBAAgB;AACzB,SAAS,oBAAoB;;AAQvB,IAAO,sBAAP,MAAO,qBAAmB;;8GAAnB,sBAAmB,MAAA,CAAA,GAAA,QAAA,oBAAA,SAAA,CAAA;EAAA;;+GAAnB,sBAAmB,cAAA,CAHb,sBAAsB,GAAA,SAAA,CAD3B,YAAY,GAAA,SAAA,CAEZ,sBAAsB,EAAA,CAAA;EAAA;;+GAEvB,sBAAmB,SAAA,CAJlB,YAAY,EAAA,CAAA;EAAA;;oGAIb,qBAAmB,YAAA,CAAA;QAL/B;SAAS;IACN,SAAS,CAAC,YAAY;IACtB,cAAc,CAAC,sBAAsB;IACrC,SAAS,CAAC,sBAAsB;GACnC;;",
+  "mappings": ";AAAA,SAAS,WAAW,aAAa,OAAO,yBAAyB;;AAS3D,IAAO,yBAAP,MAAO,wBAAsB;EAPnC,cAAA;AAQ2C,SAAA,UAAU;AAMb,SAAA,OAAO;;EAL3C,IACW,aAAU;AACjB,WAAO;EACX;;4GALS,yBAAsB,MAAA,CAAA,GAAA,QAAA,mBAAA,UAAA,CAAA;EAAA;;gGAAtB,yBAAsB,UAAA,sBAAA,QAAA,EAAA,SAAA,UAAA,GAAA,MAAA,EAAA,YAAA,EAAA,iBAAA,gBAAA,SAAA,mBAAA,aAAA,YAAA,EAAA,GAAA,UAAA,IAAA,UAHrB,6BAA2B,UAAA,MAAA,QAAA,CAAA,k5IAAA,GAAA,eAAA,qBAAA,KAAA,CAAA;EAAA;;kGAG5B,wBAAsB,YAAA,CAAA;QAPlC;qBAEa,sBAAoB,UAEpB,6BAA2B,eACtB,kBAAkB,MAAI,QAAA,CAAA,k5IAAA,EAAA,CAAA;sBAGE,SAAO,CAAA;QAA7C;SAAY,eAAe;;QAAG;IAEpB,YAAU,CAAA;QADpB;SAAY,OAAO;IAKgB,MAAI,CAAA;QAAvC;SAAY,WAAW;;;;AChB5B,SAAS,gBAAgB;AACzB,SAAS,oBAAoB;;AAQvB,IAAO,sBAAP,MAAO,qBAAmB;;8GAAnB,sBAAmB,MAAA,CAAA,GAAA,QAAA,oBAAA,SAAA,CAAA;EAAA;;+GAAnB,sBAAmB,cAAA,CAHb,sBAAsB,GAAA,SAAA,CAD3B,YAAY,GAAA,SAAA,CAEZ,sBAAsB,EAAA,CAAA;EAAA;;+GAEvB,sBAAmB,SAAA,CAJlB,YAAY,EAAA,CAAA;EAAA;;oGAIb,qBAAmB,YAAA,CAAA;QAL/B;SAAS;IACN,SAAS,CAAC,YAAY;IACtB,cAAc,CAAC,sBAAsB;IACrC,SAAS,CAAC,sBAAsB;GACnC;;",
   "names": []
 }

package/fesm2022/eui-components-eui-input-number.mjs

@@ -472,7 +472,7 @@ var EuiInputNumberComponent = class _EuiInputNumberComponent extends InputDirect
     this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0, type: _EuiInputNumberComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.LocaleService, optional: true }, { token: LOCALE_ID }, { token: i0.Injector }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
   }
   static {
-    this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.4", type: _EuiInputNumberComponent, selector: "input[euiInputNumber]", inputs: { min: "min", max: "max", leadingZero: "leadingZero", isInvalid: "isInvalid", fractionDigits: "fractionDigits", digits: "digits", fillFraction: "fillFraction", roundUp: "roundUp", noFormat: "noFormat", value: "value" }, host: { listeners: { "blur": "onTouched()", "paste": "onPaste($event)", "keydown": "onKeyDown($event)", "focusout": "onFocusout()" }, properties: { "class": "this.cssClasses", "attr.type": "this.type" } }, usesInheritance: true, usesOnChanges: true, hostDirectives: [{ directive: i2.EuiClearableDirective, inputs: ["euiClearable", "euiClearable", "readonly", "readonly", "disabled", "disabled"] }, { directive: i2.EuiLoadingDirective, inputs: ["euiLoading", "euiLoading", "readonly", "readonly"] }], ngImport: i0, template: "", isInline: true, styles: ['.eui-input-number{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:normal normal 400 1rem/1.75rem var(--eui-base-font-family);appearance:none;background-color:var(--eui-c-white);border:1px solid var(--eui-c-secondary-lighter);border-radius:var(--eui-base-border-radius);box-shadow:var(--eui-app-box-shadow);color:var(--eui-c-text);display:block;padding:calc(var(--eui-base-spacing-xs) - 1px) calc(var(--eui-base-spacing-m) - 1px);width:100%}.eui-input-number:focus:not([readonly]){outline:2px solid var(--eui-c-focus)!important;outline-offset:-2px!important;transition:none}.eui-input-number:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-input-number [tabindex="0"]:focus:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-input-number::placeholder{color:var(--eui-c-secondary-lighter)!important;opacity:1}.eui-input-number[readonly]{background-color:transparent;border-color:transparent!important;box-shadow:none;height:inherit;pointer-events:none}.eui-input-number[readonly]+.eui-feedback-message,.eui-input-number[readonly]+.eui-input-maxlength{appearance:none;display:none}.eui-input-number[disabled]:not([readonly]),.eui-input-number--disabled:not([readonly]){background-color:var(--eui-c-secondary-bg-light)!important;border:1px solid var(--eui-c-secondary-lighter)!important;color:var(--eui-c-secondary-light);pointer-events:none}.eui-input-number--invalid,.eui-input-number--danger{border:1px solid var(--eui-c-danger)}.eui-input-number--clearable{padding-right:var(--eui-base-spacing-2xl)}.eui-input-number--clearable-icon{cursor:pointer;position:absolute;right:var(--eui-base-spacing-s);-webkit-user-select:none;user-select:none;visibility:visible}.eui-input-number--clearable-icon:focus:not([readonly]){outline:2px solid var(--eui-c-focus)!important;outline-offset:-2px!important;transition:none}.eui-input-number--clearable-icon:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-input-number--clearable-icon [tabindex="0"]:focus:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-input-number--clearable-icon>svg{fill:var(--eui-c-secondary-lighter)}.eui-input-number--clearable-icon>svg:hover{fill:var(--eui-c-danger)}.eui-input-number--loading{padding-right:var(--eui-base-spacing-2xl)}.eui-input-number--loading-icon{align-items:center;display:flex}.eui-input-number--loading-icon:after,.eui-input-number--loading-icon:before{content:"";height:var(--eui-base-spacing-l);position:absolute;right:var(--eui-base-spacing-s);width:var(--eui-base-spacing-l)}.eui-input-number--loading-icon:before{border:var(--eui-base-spacing-2xs) solid rgba(0,0,0,.35);border-radius:100%}.eui-input-number--loading-icon:after{animation:eui-loading .6s linear;animation-iteration-count:infinite;border-color:var(--eui-c-white) transparent transparent;border-radius:100%;border-style:solid;border-width:var(--eui-base-spacing-2xs);box-shadow:0 0 0 1px transparent}.eui-input-number--loading-icon--sm:after,.eui-input-number--loading-icon--sm:before{height:var(--eui-base-spacing-m);width:var(--eui-base-spacing-m)}@keyframes eui-loading{to{transform:rotate(360deg)}}.eui-input-number[readonly]{pointer-events:auto}\n'], encapsulation: i0.ViewEncapsulation.None });
+    this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.4", type: _EuiInputNumberComponent, selector: "input[euiInputNumber]", inputs: { min: "min", max: "max", leadingZero: "leadingZero", isInvalid: "isInvalid", fractionDigits: "fractionDigits", digits: "digits", fillFraction: "fillFraction", roundUp: "roundUp", noFormat: "noFormat", value: "value" }, host: { listeners: { "blur": "onTouched()", "paste": "onPaste($event)", "keydown": "onKeyDown($event)", "focusout": "onFocusout()" }, properties: { "class": "this.cssClasses", "attr.type": "this.type" } }, usesInheritance: true, usesOnChanges: true, hostDirectives: [{ directive: i2.EuiClearableDirective, inputs: ["euiClearable", "euiClearable", "readonly", "readonly", "disabled", "disabled"] }, { directive: i2.EuiLoadingDirective, inputs: ["euiLoading", "euiLoading", "readonly", "readonly"] }], ngImport: i0, template: "", isInline: true, styles: ['.eui-input-number{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:normal normal 400 1rem/1.75rem var(--eui-base-font-family);appearance:none;background-color:var(--eui-c-white);border:1px solid var(--eui-c-secondary-lighter);border-radius:var(--eui-base-border-radius);box-shadow:var(--eui-app-box-shadow);color:var(--eui-c-text);display:block;padding:calc(var(--eui-base-spacing-xs) - 1px) calc(var(--eui-base-spacing-m) - 1px);width:100%}.eui-input-number:focus:not([readonly]){outline:2px solid var(--eui-c-focus)!important;outline-offset:-2px!important;transition:none}.eui-input-number:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-input-number [tabindex="0"]:focus:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-input-number::placeholder{color:var(--eui-c-secondary-lighter)!important;opacity:1}.eui-input-number[readonly]{background-color:transparent;border-color:transparent!important;box-shadow:none;height:inherit;pointer-events:none}.eui-input-number[readonly]+.eui-feedback-message,.eui-input-number[readonly]+.eui-input-maxlength{appearance:none;display:none}.eui-input-number[disabled]:not([readonly]),.eui-input-number--disabled:not([readonly]){background-color:var(--eui-c-secondary-bg-light)!important;border:1px solid var(--eui-c-secondary-lighter)!important;color:var(--eui-c-secondary-light);pointer-events:none}.eui-input-number--invalid,.eui-input-number--danger{border:1px solid var(--eui-c-danger)}.eui-input-number--clearable{padding-right:var(--eui-base-spacing-2xl)}.eui-input-number--clearable-icon{cursor:pointer;position:absolute;right:var(--eui-base-spacing-s);-webkit-user-select:none;user-select:none;visibility:visible}.eui-input-number--clearable-icon:focus:not([readonly]){outline:2px solid var(--eui-c-focus)!important;outline-offset:-2px!important;transition:none}.eui-input-number--clearable-icon:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-input-number--clearable-icon [tabindex="0"]:focus:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-input-number--clearable-icon>svg{fill:var(--eui-c-secondary-lighter)}.eui-input-number--clearable-icon>svg:hover{fill:var(--eui-c-danger)}.eui-input-number--loading{padding-right:var(--eui-base-spacing-2xl)}.eui-input-number--loading-icon{align-items:center;display:flex}.eui-input-number--loading-icon:after,.eui-input-number--loading-icon:before{content:"";height:var(--eui-base-spacing-l);position:absolute;right:var(--eui-base-spacing-s);width:var(--eui-base-spacing-l)}.eui-input-number--loading-icon:before{border:var(--eui-base-spacing-2xs) solid rgba(0,0,0,.35);border-radius:100%}.eui-input-number--loading-icon:after{animation:eui-loading .6s linear;animation-iteration-count:infinite;border-color:var(--eui-c-white) transparent transparent;border-radius:100%;border-style:solid;border-width:var(--eui-base-spacing-2xs);box-shadow:0 0 0 1px transparent}.eui-input-number--loading-icon--sm:after,.eui-input-number--loading-icon--sm:before{height:var(--eui-base-spacing-m);width:var(--eui-base-spacing-m)}@keyframes eui-loading{to{transform:rotate(360deg)}}.eui-icon-input--start .eui-input-number{padding-left:var(--eui-base-spacing-3xl)}.eui-icon-input--end .eui-input-number{padding-right:var(--eui-base-spacing-3xl)}.eui-input-number[readonly]{pointer-events:auto}\n'], encapsulation: i0.ViewEncapsulation.None });
   }
 };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0, type: EuiInputNumberComponent, decorators: [{
@@ -488,7 +488,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4",
     }
   ], host: {
     "(blur)": "onTouched()"
-  }, styles: ['.eui-input-number{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:normal normal 400 1rem/1.75rem var(--eui-base-font-family);appearance:none;background-color:var(--eui-c-white);border:1px solid var(--eui-c-secondary-lighter);border-radius:var(--eui-base-border-radius);box-shadow:var(--eui-app-box-shadow);color:var(--eui-c-text);display:block;padding:calc(var(--eui-base-spacing-xs) - 1px) calc(var(--eui-base-spacing-m) - 1px);width:100%}.eui-input-number:focus:not([readonly]){outline:2px solid var(--eui-c-focus)!important;outline-offset:-2px!important;transition:none}.eui-input-number:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-input-number [tabindex="0"]:focus:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-input-number::placeholder{color:var(--eui-c-secondary-lighter)!important;opacity:1}.eui-input-number[readonly]{background-color:transparent;border-color:transparent!important;box-shadow:none;height:inherit;pointer-events:none}.eui-input-number[readonly]+.eui-feedback-message,.eui-input-number[readonly]+.eui-input-maxlength{appearance:none;display:none}.eui-input-number[disabled]:not([readonly]),.eui-input-number--disabled:not([readonly]){background-color:var(--eui-c-secondary-bg-light)!important;border:1px solid var(--eui-c-secondary-lighter)!important;color:var(--eui-c-secondary-light);pointer-events:none}.eui-input-number--invalid,.eui-input-number--danger{border:1px solid var(--eui-c-danger)}.eui-input-number--clearable{padding-right:var(--eui-base-spacing-2xl)}.eui-input-number--clearable-icon{cursor:pointer;position:absolute;right:var(--eui-base-spacing-s);-webkit-user-select:none;user-select:none;visibility:visible}.eui-input-number--clearable-icon:focus:not([readonly]){outline:2px solid var(--eui-c-focus)!important;outline-offset:-2px!important;transition:none}.eui-input-number--clearable-icon:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-input-number--clearable-icon [tabindex="0"]:focus:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-input-number--clearable-icon>svg{fill:var(--eui-c-secondary-lighter)}.eui-input-number--clearable-icon>svg:hover{fill:var(--eui-c-danger)}.eui-input-number--loading{padding-right:var(--eui-base-spacing-2xl)}.eui-input-number--loading-icon{align-items:center;display:flex}.eui-input-number--loading-icon:after,.eui-input-number--loading-icon:before{content:"";height:var(--eui-base-spacing-l);position:absolute;right:var(--eui-base-spacing-s);width:var(--eui-base-spacing-l)}.eui-input-number--loading-icon:before{border:var(--eui-base-spacing-2xs) solid rgba(0,0,0,.35);border-radius:100%}.eui-input-number--loading-icon:after{animation:eui-loading .6s linear;animation-iteration-count:infinite;border-color:var(--eui-c-white) transparent transparent;border-radius:100%;border-style:solid;border-width:var(--eui-base-spacing-2xs);box-shadow:0 0 0 1px transparent}.eui-input-number--loading-icon--sm:after,.eui-input-number--loading-icon--sm:before{height:var(--eui-base-spacing-m);width:var(--eui-base-spacing-m)}@keyframes eui-loading{to{transform:rotate(360deg)}}.eui-input-number[readonly]{pointer-events:auto}\n'] }]
+  }, styles: ['.eui-input-number{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:normal normal 400 1rem/1.75rem var(--eui-base-font-family);appearance:none;background-color:var(--eui-c-white);border:1px solid var(--eui-c-secondary-lighter);border-radius:var(--eui-base-border-radius);box-shadow:var(--eui-app-box-shadow);color:var(--eui-c-text);display:block;padding:calc(var(--eui-base-spacing-xs) - 1px) calc(var(--eui-base-spacing-m) - 1px);width:100%}.eui-input-number:focus:not([readonly]){outline:2px solid var(--eui-c-focus)!important;outline-offset:-2px!important;transition:none}.eui-input-number:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-input-number [tabindex="0"]:focus:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-input-number::placeholder{color:var(--eui-c-secondary-lighter)!important;opacity:1}.eui-input-number[readonly]{background-color:transparent;border-color:transparent!important;box-shadow:none;height:inherit;pointer-events:none}.eui-input-number[readonly]+.eui-feedback-message,.eui-input-number[readonly]+.eui-input-maxlength{appearance:none;display:none}.eui-input-number[disabled]:not([readonly]),.eui-input-number--disabled:not([readonly]){background-color:var(--eui-c-secondary-bg-light)!important;border:1px solid var(--eui-c-secondary-lighter)!important;color:var(--eui-c-secondary-light);pointer-events:none}.eui-input-number--invalid,.eui-input-number--danger{border:1px solid var(--eui-c-danger)}.eui-input-number--clearable{padding-right:var(--eui-base-spacing-2xl)}.eui-input-number--clearable-icon{cursor:pointer;position:absolute;right:var(--eui-base-spacing-s);-webkit-user-select:none;user-select:none;visibility:visible}.eui-input-number--clearable-icon:focus:not([readonly]){outline:2px solid var(--eui-c-focus)!important;outline-offset:-2px!important;transition:none}.eui-input-number--clearable-icon:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-input-number--clearable-icon [tabindex="0"]:focus:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-input-number--clearable-icon>svg{fill:var(--eui-c-secondary-lighter)}.eui-input-number--clearable-icon>svg:hover{fill:var(--eui-c-danger)}.eui-input-number--loading{padding-right:var(--eui-base-spacing-2xl)}.eui-input-number--loading-icon{align-items:center;display:flex}.eui-input-number--loading-icon:after,.eui-input-number--loading-icon:before{content:"";height:var(--eui-base-spacing-l);position:absolute;right:var(--eui-base-spacing-s);width:var(--eui-base-spacing-l)}.eui-input-number--loading-icon:before{border:var(--eui-base-spacing-2xs) solid rgba(0,0,0,.35);border-radius:100%}.eui-input-number--loading-icon:after{animation:eui-loading .6s linear;animation-iteration-count:infinite;border-color:var(--eui-c-white) transparent transparent;border-radius:100%;border-style:solid;border-width:var(--eui-base-spacing-2xs);box-shadow:0 0 0 1px transparent}.eui-input-number--loading-icon--sm:after,.eui-input-number--loading-icon--sm:before{height:var(--eui-base-spacing-m);width:var(--eui-base-spacing-m)}@keyframes eui-loading{to{transform:rotate(360deg)}}.eui-icon-input--start .eui-input-number{padding-left:var(--eui-base-spacing-3xl)}.eui-icon-input--end .eui-input-number{padding-right:var(--eui-base-spacing-3xl)}.eui-input-number[readonly]{pointer-events:auto}\n'] }]
 }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i1.LocaleService, decorators: [{
   type: Optional
 }] }, { type: void 0, decorators: [{