@eui/eds 21.3.4-snapshot-1783677674979

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

@@ -0,0 +1,169 @@
+import * as i0 from '@angular/core';
+import { inject, Renderer2, ElementRef, booleanAttribute, Input, HostBinding, ChangeDetectionStrategy, Component } from '@angular/core';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import * as i1 from '@eui/eds/shared';
+import { EuiBaseSizeVariantsDirective, EuiBaseColorVariantsDirective } from '@eui/eds/shared';
+
+class EdsButton {
+    constructor() {
+        /**
+         * @description Data attribute for e2e testing
+         * @default eui-button
+         */
+        this.e2eAttr = 'eds-button';
+        /**
+         * @description When true, makes the button full-width
+         * @default false
+         */
+        this.euiBlockButton = false;
+        /**
+         * @description When true, styles the button for icon-only content
+         * @default false
+         */
+        this.euiIconButton = false;
+        /**
+         * @description When true, style the button when used in avatar trigger (for dropdown trigger f.e. see actionable avatar)
+         * @default false
+         */
+        this.euiAvatarButton = false;
+        /**
+         * @description When true, allows text content to wrap
+         * @default false
+         */
+        this.euiLineWrap = false;
+        this.euiButtonPrimary = true;
+        this.euiButtonSecondary = false;
+        this.euiButtonTertiary = false;
+        this.euiButtonRounded = false;
+        this.euiTypeVariant = 'primary';
+        this.sizeVariantsBase = inject(EuiBaseSizeVariantsDirective);
+        this.colorVariantsBase = inject(EuiBaseColorVariantsDirective);
+        this._renderer = inject(Renderer2);
+        this._elementRef = inject(ElementRef);
+        this._euiDisabled = false;
+    }
+    /**
+     * @description
+     * Computes and returns the CSS classes for the button based on its current state
+     *
+     * @returns {string} Space-separated string of CSS class names
+     */
+    get cssClasses() {
+        return [
+            'eds-button',
+            this.sizeVariantsBase.getCssClasses('eds-button'),
+            this.colorVariantsBase.getCssClasses('eds-button'),
+            (this.euiButtonPrimary || this.euiTypeVariant === 'primary') &&
+                !(this.euiButtonSecondary || this.euiTypeVariant === 'secondary') &&
+                !(this.euiButtonTertiary || this.euiTypeVariant === 'tertiary') ? 'eds-button--type-primary' : '',
+            (this.euiButtonSecondary || this.euiTypeVariant === 'secondary') ? 'eds-button--type-secondary' : '',
+            (this.euiButtonTertiary || this.euiTypeVariant === 'tertiary') ? 'eds-button--type-tertiary' : '',
+            this.euiButtonRounded ? 'eds-button--rounded' : '',
+        ]
+            .join(' ')
+            .trim();
+    }
+    /**
+     * @description
+     * Controls the disabled state of the button
+     * When true, adds the disabled attribute and prevents interaction
+     */
+    get euiDisabled() {
+        return this._euiDisabled;
+    }
+    set euiDisabled(value) {
+        this._euiDisabled = coerceBooleanProperty(value);
+        if (this._euiDisabled) {
+            this._renderer.setAttribute(this._elementRef.nativeElement, 'disabled', 'true');
+        }
+        else {
+            this._renderer.removeAttribute(this._elementRef.nativeElement, 'disabled');
+        }
+    }
+    ngOnInit() {
+        if (!this.sizeVariantsBase.euiSizeVariant) {
+            this.sizeVariantsBase.euiSizeM = true;
+        }
+        if (!this.colorVariantsBase.euiColorVariant) {
+            this.colorVariantsBase.euiPrimary = true;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: EdsButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.17", type: EdsButton, isStandalone: true, selector: "button[edsButton]", inputs: { e2eAttr: "e2eAttr", id: "id", euiBlockButton: ["euiBlockButton", "euiBlockButton", booleanAttribute], euiIconButton: ["euiIconButton", "euiIconButton", booleanAttribute], euiAvatarButton: ["euiAvatarButton", "euiAvatarButton", booleanAttribute], euiLineWrap: ["euiLineWrap", "euiLineWrap", booleanAttribute], euiButtonPrimary: ["euiButtonPrimary", "euiButtonPrimary", booleanAttribute], euiButtonSecondary: ["euiButtonSecondary", "euiButtonSecondary", booleanAttribute], euiButtonTertiary: ["euiButtonTertiary", "euiButtonTertiary", booleanAttribute], euiButtonRounded: ["euiButtonRounded", "euiButtonRounded", booleanAttribute], euiTypeVariant: "euiTypeVariant", euiDisabled: "euiDisabled" }, host: { properties: { "class": "this.cssClasses", "attr.data-e2e": "this.e2eAttr", "attr.id": "this.id" } }, hostDirectives: [{ directive: i1.EuiBaseSizeVariantsDirective, inputs: ["euiSizeS", "euiSizeS", "euiSizeM", "euiSizeM", "euiSizeL", "euiSizeL", "euiSizeVariant", "euiSizeVariant"] }, { directive: i1.EuiBaseColorVariantsDirective, inputs: ["euiPrimary", "euiPrimary", "euiNeutral", "euiNeutral", "euiHighlight", "euiHighlight", "euiCritical", "euiCritical", "euiColorVariant", "euiColorVariant"] }], ngImport: i0, template: "<span class=\"eds-button__container\">\r\n    <ng-content></ng-content>\r\n</span>\r\n", styles: [".eui-21 :host.eds-button.eds-button--type-primary{--_border-width: var(--eds-bw-none);--_border-color: transparent}.eui-21 :host.eds-button.eds-button--type-primary.eds-button--primary{--_surface: var(--eds-c-surface-primary);--_on-surface: var(--eds-c-on-surface-primary);--_surface-hover: var(--eds-c-surface-primary--hover);--_on-surface-hover: var(--eds-c-on-surface-primary--hover);--_surface-active: var(--eds-c-surface-primary--pressed);--_on-surface-active: var(--eds-c-on-surface-primary--pressed)}.eui-21 :host.eds-button.eds-button--type-primary.eds-button--highlight{--_surface: var(--eds-c-surface-highlight);--_on-surface: var(--eds-c-on-surface-highlight);--_surface-hover: var(--eds-c-surface-highlight--hover);--_on-surface-hover: var(--eds-c-on-surface-highlight--hover);--_surface-active: var(--eds-c-surface-highlight--pressed);--_on-surface-active: var(--eds-c-on-surface-highlight--pressed)}.eui-21 :host.eds-button.eds-button--type-primary.eds-button--critical{--_surface: var(--eds-c-surface-critical);--_on-surface: var(--eds-c-on-surface-critical);--_surface-hover: var(--eds-c-surface-critical--hover);--_on-surface-hover: var(--eds-c-on-surface-critical--hover);--_surface-active: var(--eds-c-surface-critical--pressed);--_on-surface-active: var(--eds-c-on-surface-critical--pressed)}.eui-21 :host.eds-button.eds-button--type-primary:disabled,.eui-21 :host.eds-button.eds-button--type-primary.disabled{--_surface: var(--eds-c-surface-disabled);--_on-surface: var(--eds-c-foreground-disabled);--_surface-hover: var(--eds-c-surface-disabled);--_on-surface-hover: var(--eds-c-foreground-disabled);--_surface-active: var(--eds-c-surface-disabled);--_on-surface-active: var(--eds-c-foreground-disabled)}.eui-21 :host.eds-button.eds-button--type-secondary{--_border-width: var(--eds-bw-xs);--_surface: transparent}.eui-21 :host.eds-button.eds-button--type-secondary.eds-button--primary{--_border-color: var(--eds-c-border-primary);--_on-surface: var(--eds-c-foreground-primary);--_surface-hover: var(--eds-c-surface-primary-subtle);--_on-surface-hover: var(--eds-c-on-surface-primary-subtle);--_surface-active: var(--eds-c-surface-primary-subtle);--_on-surface-active: var(--eds-c-on-surface-primary-subtle)}.eui-21 :host.eds-button.eds-button--type-secondary.eds-button--neutral{--_border-color: var(--eds-c-border-neutral);--_on-surface: var(--eds-c-foreground-neutral);--_surface-hover: var(--eds-c-surface-neutral-subtle);--_on-surface-hover: var(--eds-c-on-surface-neutral-subtle);--_surface-active: var(--eds-c-surface-neutral-subtle);--_on-surface-active: var(--eds-c-on-surface-neutral-subtle)}.eui-21 :host.eds-button.eds-button--type-secondary.eds-button--highlight{--_border-color: var(--eds-c-border-highlight);--_on-surface: var(--eds-c-foreground-highlight);--_surface-hover: var(--eds-c-surface-highlight-subtler);--_on-surface-hover: var(--eds-c-on-surface-highlight-subtler);--_surface-active: var(--eds-c-surface-highlight-subtler);--_on-surface-active: var(--eds-c-on-surface-highlight-subtler)}.eui-21 :host.eds-button.eds-button--type-secondary.eds-button--critical{--_border-color: var(--eds-c-border-critical);--_on-surface: var(--eds-c-foreground-critical);--_surface-hover: var(--eds-c-surface-critical-subtler);--_on-surface-hover: var(--eds-c-on-surface-critical-subtler);--_surface-active: var(--eds-c-surface-critical-subtler);--_on-surface-active: var(--eds-c-on-surface-critical-subtler)}.eui-21 :host.eds-button.eds-button--type-secondary:disabled,.eui-21 :host.eds-button.eds-button--type-secondary.disabled{--_border-width: var(--eds-bw-xs);--_border-color: var(--eds-c-border-disabled);--_surface: var(--eds-c-surface-elevation);--_on-surface: var(--eds-c-foreground-disabled);--_surface-hover: var(--eds-c-surface-elevation);--_on-surface-hover: var(--eds-c-foreground-disabled);--_surface-active: var(--eds-c-surface-elevation);--_on-surface-active: var(--eds-c-foreground-disabled)}.eui-21 :host.eds-button.eds-button--type-tertiary{--_border-width: var(--eds-bw-none);--_surface: transparent}.eui-21 :host.eds-button.eds-button--type-tertiary.eds-button--primary{--_on-surface: var(--eds-c-foreground-primary);--_surface-hover: var(--eds-c-surface-primary-subtle);--_on-surface-hover: var(--eds-c-on-surface-primary-subtle);--_surface-active: var(--eds-c-surface-primary-subtle);--_on-surface-active: var(--eds-c-on-surface-primary-subtle)}.eui-21 :host.eds-button.eds-button--type-tertiary.eds-button--neutral{--_on-surface: var(--eds-c-foreground-neutral);--_surface-hover: var(--eds-c-surface-neutral-subtle);--_on-surface-hover: var(--eds-c-on-surface-neutral-subtle);--_surface-active: var(--eds-c-surface-neutral-subtle);--_on-surface-active: var(--eds-c-on-surface-neutral-subtle)}.eui-21 :host.eds-button.eds-button--type-tertiary.eds-button--highlight{--_on-surface: var(--eds-c-foreground-highlight);--_surface-hover: var(--eds-c-surface-highlight-subtler);--_on-surface-hover: var(--eds-c-on-surface-highlight-subtler);--_surface-active: var(--eds-c-surface-highlight-subtler);--_on-surface-active: var(--eds-c-on-surface-highlight-subtler)}.eui-21 :host.eds-button.eds-button--type-tertiary.eds-button--critical{--_on-surface: var(--eds-c-foreground-critical);--_surface-hover: var(--eds-c-surface-critical-subtler);--_on-surface-hover: var(--eds-c-on-surface-critical-subtler);--_surface-active: var(--eds-c-surface-critical-subtler);--_on-surface-active: var(--eds-c-on-surface-critical-subtler)}.eui-21 :host.eds-button.eds-button--type-tertiary:disabled,.eui-21 :host.eds-button.eds-button--type-tertiary.disabled{--_surface: var(--eds-c-surface-elevation);--_on-surface: var(--eds-c-foreground-disabled);--_surface-hover: var(--eds-c-surface-elevation);--_on-surface-hover: var(--eds-c-foreground-disabled);--_surface-active: var(--eds-c-surface-elevation);--_on-surface-active: var(--eds-c-foreground-disabled)}.eui-21 :host.eds-button.eds-button--size-m{--_font-size: var(--eds-f-s-m);--_padding: 0 var(--eds-sp-xs);--_size: var(--eds-sp-5xl);--_icon-size: var(--eds-is-m)}.eui-21 :host.eds-button.eds-button--size-s{--_font-size: var(--eds-f-s-s);--_padding: 0 var(--eds-sp-2xs);--_size: var(--eds-sp-3xl);--_icon-size: var(--eds-is-s)}.eui-21 :host.eds-button.eds-button--size-l{--_font-size: var(--eds-f-s-l);--_padding: 0 var(--eds-sp-s);--_size: var(--eds-sp-8xl);--_icon-size: var(--eds-is-m)}.eui-21 :host.eds-button{align-items:center;background-image:none;border-radius:var(--eds-br-s);box-sizing:border-box;cursor:pointer;display:inline-flex;flex-shrink:0;justify-content:center;outline:none;text-transform:none;transition:none;vertical-align:middle;white-space:nowrap;border-style:solid}.eui-21 :host.eds-button:focus-visible:not([readonly]){outline:var(--eui-bw-s) solid var(--eui-c-primary-border)!important;outline-offset:1px!important;border-radius:var(--eui-br-xs)!important}.eui-21 :host.eds-button .eds-button__container{align-items:center;display:inline-flex;position:relative;gap:var(--eds-sp-2xs);justify-content:center;width:100%}.eui-21 :host.eds-button{background-color:var(--_surface);color:var(--_on-surface);border-width:var(--_border-width);border-color:var(--_border-color);font-size:var(--_font-size);min-height:var(--_size);min-width:var(--_size);padding:var(--_padding)}.eui-21 :host.eds-button:hover{background-color:var(--_surface-hover);color:var(--_on-surface-hover)}.eui-21 :host.eds-button:active{background-color:var(--_surface-active);color:var(--_on-surface-active)}.eui-21 :host.eds-button.eds-button--rounded{border-radius:var(--eds-br-full)}.eui-21 :host.eds-button.eds-button--rounded:focus-visible:not([readonly]){outline:var(--eui-bw-s) solid var(--eui-c-primary-border)!important;outline-offset:1px!important;border-radius:var(--eui-br-max)!important}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: EdsButton, decorators: [{
+            type: Component,
+            args: [{ selector: 'button[edsButton]', changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
+                        {
+                            directive: EuiBaseSizeVariantsDirective,
+                            inputs: [
+                                'euiSizeS',
+                                'euiSizeM',
+                                'euiSizeL',
+                                'euiSizeVariant',
+                            ],
+                        },
+                        {
+                            directive: EuiBaseColorVariantsDirective,
+                            inputs: [
+                                'euiPrimary',
+                                'euiNeutral',
+                                'euiHighlight',
+                                'euiCritical',
+                                'euiColorVariant',
+                            ],
+                        },
+                    ], template: "<span class=\"eds-button__container\">\r\n    <ng-content></ng-content>\r\n</span>\r\n", styles: [".eui-21 :host.eds-button.eds-button--type-primary{--_border-width: var(--eds-bw-none);--_border-color: transparent}.eui-21 :host.eds-button.eds-button--type-primary.eds-button--primary{--_surface: var(--eds-c-surface-primary);--_on-surface: var(--eds-c-on-surface-primary);--_surface-hover: var(--eds-c-surface-primary--hover);--_on-surface-hover: var(--eds-c-on-surface-primary--hover);--_surface-active: var(--eds-c-surface-primary--pressed);--_on-surface-active: var(--eds-c-on-surface-primary--pressed)}.eui-21 :host.eds-button.eds-button--type-primary.eds-button--highlight{--_surface: var(--eds-c-surface-highlight);--_on-surface: var(--eds-c-on-surface-highlight);--_surface-hover: var(--eds-c-surface-highlight--hover);--_on-surface-hover: var(--eds-c-on-surface-highlight--hover);--_surface-active: var(--eds-c-surface-highlight--pressed);--_on-surface-active: var(--eds-c-on-surface-highlight--pressed)}.eui-21 :host.eds-button.eds-button--type-primary.eds-button--critical{--_surface: var(--eds-c-surface-critical);--_on-surface: var(--eds-c-on-surface-critical);--_surface-hover: var(--eds-c-surface-critical--hover);--_on-surface-hover: var(--eds-c-on-surface-critical--hover);--_surface-active: var(--eds-c-surface-critical--pressed);--_on-surface-active: var(--eds-c-on-surface-critical--pressed)}.eui-21 :host.eds-button.eds-button--type-primary:disabled,.eui-21 :host.eds-button.eds-button--type-primary.disabled{--_surface: var(--eds-c-surface-disabled);--_on-surface: var(--eds-c-foreground-disabled);--_surface-hover: var(--eds-c-surface-disabled);--_on-surface-hover: var(--eds-c-foreground-disabled);--_surface-active: var(--eds-c-surface-disabled);--_on-surface-active: var(--eds-c-foreground-disabled)}.eui-21 :host.eds-button.eds-button--type-secondary{--_border-width: var(--eds-bw-xs);--_surface: transparent}.eui-21 :host.eds-button.eds-button--type-secondary.eds-button--primary{--_border-color: var(--eds-c-border-primary);--_on-surface: var(--eds-c-foreground-primary);--_surface-hover: var(--eds-c-surface-primary-subtle);--_on-surface-hover: var(--eds-c-on-surface-primary-subtle);--_surface-active: var(--eds-c-surface-primary-subtle);--_on-surface-active: var(--eds-c-on-surface-primary-subtle)}.eui-21 :host.eds-button.eds-button--type-secondary.eds-button--neutral{--_border-color: var(--eds-c-border-neutral);--_on-surface: var(--eds-c-foreground-neutral);--_surface-hover: var(--eds-c-surface-neutral-subtle);--_on-surface-hover: var(--eds-c-on-surface-neutral-subtle);--_surface-active: var(--eds-c-surface-neutral-subtle);--_on-surface-active: var(--eds-c-on-surface-neutral-subtle)}.eui-21 :host.eds-button.eds-button--type-secondary.eds-button--highlight{--_border-color: var(--eds-c-border-highlight);--_on-surface: var(--eds-c-foreground-highlight);--_surface-hover: var(--eds-c-surface-highlight-subtler);--_on-surface-hover: var(--eds-c-on-surface-highlight-subtler);--_surface-active: var(--eds-c-surface-highlight-subtler);--_on-surface-active: var(--eds-c-on-surface-highlight-subtler)}.eui-21 :host.eds-button.eds-button--type-secondary.eds-button--critical{--_border-color: var(--eds-c-border-critical);--_on-surface: var(--eds-c-foreground-critical);--_surface-hover: var(--eds-c-surface-critical-subtler);--_on-surface-hover: var(--eds-c-on-surface-critical-subtler);--_surface-active: var(--eds-c-surface-critical-subtler);--_on-surface-active: var(--eds-c-on-surface-critical-subtler)}.eui-21 :host.eds-button.eds-button--type-secondary:disabled,.eui-21 :host.eds-button.eds-button--type-secondary.disabled{--_border-width: var(--eds-bw-xs);--_border-color: var(--eds-c-border-disabled);--_surface: var(--eds-c-surface-elevation);--_on-surface: var(--eds-c-foreground-disabled);--_surface-hover: var(--eds-c-surface-elevation);--_on-surface-hover: var(--eds-c-foreground-disabled);--_surface-active: var(--eds-c-surface-elevation);--_on-surface-active: var(--eds-c-foreground-disabled)}.eui-21 :host.eds-button.eds-button--type-tertiary{--_border-width: var(--eds-bw-none);--_surface: transparent}.eui-21 :host.eds-button.eds-button--type-tertiary.eds-button--primary{--_on-surface: var(--eds-c-foreground-primary);--_surface-hover: var(--eds-c-surface-primary-subtle);--_on-surface-hover: var(--eds-c-on-surface-primary-subtle);--_surface-active: var(--eds-c-surface-primary-subtle);--_on-surface-active: var(--eds-c-on-surface-primary-subtle)}.eui-21 :host.eds-button.eds-button--type-tertiary.eds-button--neutral{--_on-surface: var(--eds-c-foreground-neutral);--_surface-hover: var(--eds-c-surface-neutral-subtle);--_on-surface-hover: var(--eds-c-on-surface-neutral-subtle);--_surface-active: var(--eds-c-surface-neutral-subtle);--_on-surface-active: var(--eds-c-on-surface-neutral-subtle)}.eui-21 :host.eds-button.eds-button--type-tertiary.eds-button--highlight{--_on-surface: var(--eds-c-foreground-highlight);--_surface-hover: var(--eds-c-surface-highlight-subtler);--_on-surface-hover: var(--eds-c-on-surface-highlight-subtler);--_surface-active: var(--eds-c-surface-highlight-subtler);--_on-surface-active: var(--eds-c-on-surface-highlight-subtler)}.eui-21 :host.eds-button.eds-button--type-tertiary.eds-button--critical{--_on-surface: var(--eds-c-foreground-critical);--_surface-hover: var(--eds-c-surface-critical-subtler);--_on-surface-hover: var(--eds-c-on-surface-critical-subtler);--_surface-active: var(--eds-c-surface-critical-subtler);--_on-surface-active: var(--eds-c-on-surface-critical-subtler)}.eui-21 :host.eds-button.eds-button--type-tertiary:disabled,.eui-21 :host.eds-button.eds-button--type-tertiary.disabled{--_surface: var(--eds-c-surface-elevation);--_on-surface: var(--eds-c-foreground-disabled);--_surface-hover: var(--eds-c-surface-elevation);--_on-surface-hover: var(--eds-c-foreground-disabled);--_surface-active: var(--eds-c-surface-elevation);--_on-surface-active: var(--eds-c-foreground-disabled)}.eui-21 :host.eds-button.eds-button--size-m{--_font-size: var(--eds-f-s-m);--_padding: 0 var(--eds-sp-xs);--_size: var(--eds-sp-5xl);--_icon-size: var(--eds-is-m)}.eui-21 :host.eds-button.eds-button--size-s{--_font-size: var(--eds-f-s-s);--_padding: 0 var(--eds-sp-2xs);--_size: var(--eds-sp-3xl);--_icon-size: var(--eds-is-s)}.eui-21 :host.eds-button.eds-button--size-l{--_font-size: var(--eds-f-s-l);--_padding: 0 var(--eds-sp-s);--_size: var(--eds-sp-8xl);--_icon-size: var(--eds-is-m)}.eui-21 :host.eds-button{align-items:center;background-image:none;border-radius:var(--eds-br-s);box-sizing:border-box;cursor:pointer;display:inline-flex;flex-shrink:0;justify-content:center;outline:none;text-transform:none;transition:none;vertical-align:middle;white-space:nowrap;border-style:solid}.eui-21 :host.eds-button:focus-visible:not([readonly]){outline:var(--eui-bw-s) solid var(--eui-c-primary-border)!important;outline-offset:1px!important;border-radius:var(--eui-br-xs)!important}.eui-21 :host.eds-button .eds-button__container{align-items:center;display:inline-flex;position:relative;gap:var(--eds-sp-2xs);justify-content:center;width:100%}.eui-21 :host.eds-button{background-color:var(--_surface);color:var(--_on-surface);border-width:var(--_border-width);border-color:var(--_border-color);font-size:var(--_font-size);min-height:var(--_size);min-width:var(--_size);padding:var(--_padding)}.eui-21 :host.eds-button:hover{background-color:var(--_surface-hover);color:var(--_on-surface-hover)}.eui-21 :host.eds-button:active{background-color:var(--_surface-active);color:var(--_on-surface-active)}.eui-21 :host.eds-button.eds-button--rounded{border-radius:var(--eds-br-full)}.eui-21 :host.eds-button.eds-button--rounded:focus-visible:not([readonly]){outline:var(--eui-bw-s) solid var(--eui-c-primary-border)!important;outline-offset:1px!important;border-radius:var(--eui-br-max)!important}\n"] }]
+        }], propDecorators: { cssClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }], e2eAttr: [{
+                type: HostBinding,
+                args: ['attr.data-e2e']
+            }, {
+                type: Input
+            }], id: [{
+                type: HostBinding,
+                args: ['attr.id']
+            }, {
+                type: Input
+            }], euiBlockButton: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], euiIconButton: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], euiAvatarButton: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], euiLineWrap: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], euiButtonPrimary: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], euiButtonSecondary: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], euiButtonTertiary: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], euiButtonRounded: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], euiTypeVariant: [{
+                type: Input
+            }], euiDisabled: [{
+                type: Input
+            }] } });
+
+const EDS_BUTTON = [
+    EdsButton,
+];
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { EDS_BUTTON, EdsButton };
+//# sourceMappingURL=eui-eds-eds-button.mjs.map

package/fesm2022/eui-eds-eds-button.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"eui-eds-eds-button.mjs","sources":["../../eds-button/eds-button.ts","../../eds-button/eds-button.html","../../eds-button/index.ts","../../eds-button/eui-eds-eds-button.ts"],"sourcesContent":["import {\r\n    Component,\r\n    HostBinding,\r\n    Input,\r\n    ChangeDetectionStrategy,\r\n    Renderer2,\r\n    ElementRef,\r\n    booleanAttribute,\r\n    inject,\r\n    OnInit,\r\n} from '@angular/core';\r\n\r\nimport { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';\r\nimport { EuiBaseColorVariantsDirective, EuiBaseSizeVariantsDirective } from '@eui/eds/shared';\r\n\r\n@Component({\r\n    templateUrl: './eds-button.html',\r\n    // eslint-disable-next-line\r\n    selector: 'button[edsButton]',\r\n    styleUrl: './eds-button.scss',\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    hostDirectives: [\r\n        {\r\n            directive: EuiBaseSizeVariantsDirective,\r\n            inputs: [\r\n                'euiSizeS',\r\n                'euiSizeM',\r\n                'euiSizeL',\r\n                'euiSizeVariant',\r\n            ],\r\n        },\r\n        {\r\n            directive: EuiBaseColorVariantsDirective,\r\n            inputs: [\r\n                'euiPrimary',\r\n                'euiNeutral',\r\n                'euiHighlight',\r\n                'euiCritical',\r\n                'euiColorVariant',\r\n            ],\r\n        },        \r\n    ],     \r\n})\r\nexport class EdsButton implements OnInit {\r\n    /**\r\n     * @description\r\n     * Computes and returns the CSS classes for the button based on its current state\r\n     *\r\n     * @returns {string} Space-separated string of CSS class names\r\n     */\r\n    @HostBinding('class')\r\n    get cssClasses(): string {\r\n        return [\r\n            'eds-button',\r\n            this.sizeVariantsBase.getCssClasses('eds-button'),\r\n            this.colorVariantsBase.getCssClasses('eds-button'),\r\n            (this.euiButtonPrimary || this.euiTypeVariant === 'primary') && \r\n                !(this.euiButtonSecondary || this.euiTypeVariant === 'secondary') && \r\n                !(this.euiButtonTertiary || this.euiTypeVariant === 'tertiary') ? 'eds-button--type-primary': '',\r\n            (this.euiButtonSecondary || this.euiTypeVariant === 'secondary') ? 'eds-button--type-secondary': '',\r\n            (this.euiButtonTertiary || this.euiTypeVariant === 'tertiary') ? 'eds-button--type-tertiary': '',\r\n\r\n            this.euiButtonRounded ? 'eds-button--rounded': '',\r\n        ]\r\n            .join(' ')\r\n            .trim();\r\n    }\r\n\r\n    /**\r\n     * @description Data attribute for e2e testing\r\n     * @default eui-button\r\n     */\r\n    @HostBinding('attr.data-e2e') @Input() e2eAttr = 'eds-button';\r\n\r\n    /** @description ID attribute for the button element */\r\n    @HostBinding('attr.id')\r\n    @Input() id?: string;\r\n\r\n    /**\r\n     * @description When true, makes the button full-width\r\n     * @default false\r\n     */\r\n    @Input({ transform: booleanAttribute }) euiBlockButton = false;\r\n\r\n    /**\r\n     * @description When true, styles the button for icon-only content\r\n     * @default false\r\n     */\r\n    @Input({ transform: booleanAttribute }) euiIconButton = false;\r\n\r\n    /**\r\n     * @description When true, style the button when used in avatar trigger (for dropdown trigger f.e. see actionable avatar)\r\n     * @default false\r\n     */\r\n    @Input({ transform: booleanAttribute }) euiAvatarButton = false;\r\n\r\n    /**\r\n     * @description When true, allows text content to wrap\r\n     * @default false\r\n     */\r\n    @Input({ transform: booleanAttribute }) euiLineWrap = false;\r\n\r\n    @Input({ transform: booleanAttribute }) euiButtonPrimary = true;\r\n    @Input({ transform: booleanAttribute }) euiButtonSecondary = false;\r\n    @Input({ transform: booleanAttribute }) euiButtonTertiary = false;\r\n    @Input({ transform: booleanAttribute }) euiButtonRounded = false;\r\n    \r\n    @Input() euiTypeVariant: 'primary' | 'secondary' | 'tertiary' = 'primary';\r\n\r\n    /**\r\n     * @description\r\n     * Controls the disabled state of the button\r\n     * When true, adds the disabled attribute and prevents interaction\r\n     */\r\n    @Input()\r\n    public get euiDisabled(): boolean {\r\n        return this._euiDisabled;\r\n    }\r\n    public set euiDisabled(value: BooleanInput) {\r\n        this._euiDisabled = coerceBooleanProperty(value);\r\n        if (this._euiDisabled) {\r\n            this._renderer.setAttribute(this._elementRef.nativeElement, 'disabled', 'true');\r\n        } else {\r\n            this._renderer.removeAttribute(this._elementRef.nativeElement, 'disabled');\r\n        }\r\n    }\r\n    protected sizeVariantsBase: EuiBaseSizeVariantsDirective = inject(EuiBaseSizeVariantsDirective);\r\n    protected colorVariantsBase: EuiBaseColorVariantsDirective = inject(EuiBaseColorVariantsDirective);\r\n    protected _renderer: Renderer2 = inject(Renderer2);\r\n    protected _elementRef: ElementRef<HTMLButtonElement> = inject(ElementRef);\r\n    private _euiDisabled = false;\r\n\r\n    ngOnInit(): void {\r\n        if (!this.sizeVariantsBase.euiSizeVariant) {\r\n            this.sizeVariantsBase.euiSizeM = true;\r\n        }\r\n        if (!this.colorVariantsBase.euiColorVariant) {\r\n            this.colorVariantsBase.euiPrimary = true;\r\n        }\r\n    }\r\n}\r\n","<span class=\"eds-button__container\">\r\n    <ng-content></ng-content>\r\n</span>\r\n","import { EdsButton } from './eds-button';\r\n\r\nexport * from './eds-button';\r\n\r\nexport const EDS_BUTTON = [\r\n    EdsButton,\r\n] as const;\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,196 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, inject, ElementRef, booleanAttribute, ViewChild, Output, Input, HostBinding, ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i1 from '@eui/eds/shared';
+import { EuiBaseSizeVariantsDirective, EuiBaseColorVariantsDirective } from '@eui/eds/shared';
+import * as i2 from '@eui/eds/eds-icon';
+import { EDS_ICON } from '@eui/eds/eds-icon';
+import * as i3 from '@eui/eds/eds-button';
+import { EDS_BUTTON } from '@eui/eds/eds-button';
+
+class EdsChip {
+    constructor() {
+        /**
+         * Sets the `role` attribute for the host element.
+         *
+         * @default 'status'
+         */
+        this.role = 'status';
+        /**
+         * Sets the `aria-label` attribute for the host element.
+         *
+         * @default 'Chip content'
+         */
+        this.ariaLabel = 'Chip content';
+        /**
+         * Sets the `data-e2e` attribute for the host element.
+         *
+         * @default 'eui-chip'
+         */
+        this.e2eAttr = 'eui-chip';
+        /**
+         * Sets the data of the chip like tooltip configuration.
+         */
+        // TODO: type should be specific
+        // TODO: find the correct type or turn into a generic, https://www.typescriptlang.org/docs/handbook/2/generics.html
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.data = {
+            id: crypto.randomUUID(),
+            tooltip: {
+                color: 'euiTooltipPrimary',
+                contentAlignment: null,
+                position: 'above',
+            },
+        };
+        /**
+         * Wether the chip can be removed.
+         *
+         * @default false
+         */
+        this.isChipRemovable = false;
+        /**
+         * Event emitted when the chip is removed.
+         */
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.remove = new EventEmitter();
+        this.sizeVariantsBase = inject(EuiBaseSizeVariantsDirective);
+        this.colorVariantsBase = inject(EuiBaseColorVariantsDirective);
+        this._elementRef = inject(ElementRef);
+    }
+    /**
+     * @description
+     * Computes and returns the CSS classes for the component based on its current state.
+     *
+     * @returns {string} Space-separated string of CSS class names
+     */
+    get cssClasses() {
+        return [
+            'eds-chip',
+            this.sizeVariantsBase.getCssClasses('eds-chip'),
+            this.colorVariantsBase.getCssClasses('eds-chip'),
+            this.isChipRemovable ? 'eui-chip--removable' : '',
+        ].join(' ').trim();
+    }
+    ngOnInit() {
+        if (!this.sizeVariantsBase.euiSizeVariant) {
+            this.sizeVariantsBase.euiSizeM = true;
+        }
+        if (!this.colorVariantsBase.euiColorVariant) {
+            this.colorVariantsBase.euiNeutral = true;
+        }
+    }
+    ngAfterContentInit() {
+        if (!this.data.id && this.id) {
+            this.data = Object.assign(this.data, { id: this.id });
+        }
+        // checks if the parent element is an eui-chip-list to set role listitem or if a parent above in case cdkdroplist interferes
+        if (this._elementRef.nativeElement.parentElement?.classList.contains('eui-chip-list__chip-container') || this._elementRef.nativeElement.parentElement?.parentElement?.classList.contains('eui-chip-list__chip-container')) {
+            this.role = 'listitem';
+        }
+    }
+    /**
+     * Remove chip handler
+     *
+     * @param event Click event
+     */
+    onRemove(event) {
+        if (event instanceof KeyboardEvent && event.code === 'Backspace') {
+            this.remove.emit({ chip: this.data, event });
+        }
+        else {
+            this.remove.emit(this.data);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: EdsChip, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: EdsChip, isStandalone: true, selector: "eds-chip, span[edsChip], li[edsChip]", inputs: { ariaLabel: "ariaLabel", e2eAttr: "e2eAttr", euiInternalId: "euiInternalId", tooltipMessage: "tooltipMessage", id: "id", data: "data", isChipRemovable: ["isChipRemovable", "isChipRemovable", booleanAttribute] }, outputs: { remove: "remove" }, host: { properties: { "class": "this.cssClasses", "attr.role": "this.role", "attr.aria-label": "this.ariaLabel", "attr.data-e2e": "this.e2eAttr" } }, viewQueries: [{ propertyName: "chipLabel", first: true, predicate: ["chipLabel"], descendants: true }], hostDirectives: [{ directive: i1.EuiBaseSizeVariantsDirective, inputs: ["euiSizeXS", "euiSizeXS", "euiSizeS", "euiSizeS", "euiSizeM", "euiSizeM", "euiSizeVariant", "euiSizeVariant"] }, { directive: i1.EuiBaseColorVariantsDirective, inputs: ["euiNeutral", "euiNeutral", "euiSuccess", "euiSuccess", "euiInfo", "euiInfo", "euiWarning", "euiWarning", "euiCritical", "euiCritical", "euiColorVariant", "euiColorVariant"] }], ngImport: i0, template: "<div class=\"eds-chip__content\" #chipLabel>\r\n    <ng-content></ng-content>\r\n</div>\r\n@if (isChipRemovable) {\r\n    <button edsButton \r\n        class=\"eds-chip__close\"\r\n        ariaLabel=\"Remove {{ chipLabel.textContent }} chip\"\r\n        [euiColorVariant]=\"colorVariantsBase.euiColorVariant\"\r\n        (click)=\"onRemove($event)\"\r\n        euiSizeS\r\n        euiRounded\r\n        euiButtonTertiary>\r\n        <eds-icon icon=\"x\" euiSizeXS/>\r\n    </button>\r\n}\r\n", styles: [".eui-21 :host.eds-chip.eds-chip--size-s{--_font: var(--eds-f-label-s);--_padding: var(--eds-sp-4xs) var(--eds-sp-2xs);--_icon-size: var(--eds-is-s)}.eui-21 :host.eds-chip.eds-chip--size-m{--_font: var(--eds-f-label-s);--_padding: var(--eds-sp-4xs) var(--eds-sp-2xs);--_icon-size: var(--eds-is-s)}.eui-21 :host.eds-chip.eds-chip--size-l{--_font: var(--eds-f-label-s);--_padding: var(--eds-sp-3xs) var(--eds-sp-2xs);--_icon-size: var(--eds-is-m)}.eui-21 :host.eds-chip.eds-chip--neutral{--_surface: var(--eds-c-surface-elevation-sunken);--_on-surface: var(--eds-c-foreground-subtle);--_border-color: var(--eds-c-border-divider)}.eui-21 :host.eds-chip.eds-chip--info{--_surface: var(--eds-c-surface-info-subtler);--_on-surface: var(--eds-c-on-surface-info-subtler);--_border-color: var(--eds-c-border-info-subtle)}.eui-21 :host.eds-chip.eds-chip--success{--_surface: var(--eds-c-surface-success-subtler);--_on-surface: var(--eds-c-on-surface-success-subtler);--_border-color: var(--eds-c-border-success-subtle)}.eui-21 :host.eds-chip.eds-chip--warning{--_surface: var(--eds-c-surface-warning-subtler);--_on-surface: var(--eds-c-on-surface-warning-subtler);--_border-color: var(--eds-c-border-warning-subtle)}.eui-21 :host.eds-chip.eds-chip--critical{--_surface: var(--eds-c-surface-critical-subtler);--_on-surface: var(--eds-c-on-surface-critical-subtler);--_border-color: var(--eds-c-border-critical-subtle)}.eui-21 :host.eds-chip{align-items:center;border-radius:var(--eds-br-full);display:inline-flex;border:var(--eds-bw-xs) solid var(--_border-color);padding:var(--_padding);font:var(--_font);background-color:var(--_surface);color:var(--_on-surface)}.eui-21 :host.eds-chip .eds-chip__content{display:flex;align-items:center;background:transparent;gap:var(--eds-sp-3xs)}.eui-21 :host.eds-chip .eds-chip__close{--_size: auto}\n"], dependencies: [{ kind: "component", type: i2.EdsIcon, selector: "eds-icon, span[edsIcon]", inputs: ["icon", "set", "ariaLabel", "ariaHidden"] }, { kind: "component", type: i3.EdsButton, selector: "button[edsButton]", inputs: ["e2eAttr", "id", "euiBlockButton", "euiIconButton", "euiAvatarButton", "euiLineWrap", "euiButtonPrimary", "euiButtonSecondary", "euiButtonTertiary", "euiButtonRounded", "euiTypeVariant", "euiDisabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: EdsChip, decorators: [{
+            type: Component,
+            args: [{ selector: 'eds-chip, span[edsChip], li[edsChip]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        ...EDS_ICON,
+                        ...EDS_BUTTON,
+                    ], hostDirectives: [
+                        {
+                            directive: EuiBaseSizeVariantsDirective,
+                            inputs: [
+                                'euiSizeXS',
+                                'euiSizeS',
+                                'euiSizeM',
+                                'euiSizeVariant',
+                            ],
+                        },
+                        {
+                            directive: EuiBaseColorVariantsDirective,
+                            inputs: [
+                                'euiNeutral',
+                                'euiSuccess',
+                                'euiInfo',
+                                'euiWarning',
+                                'euiCritical',
+                                'euiColorVariant',
+                            ],
+                        },
+                    ], template: "<div class=\"eds-chip__content\" #chipLabel>\r\n    <ng-content></ng-content>\r\n</div>\r\n@if (isChipRemovable) {\r\n    <button edsButton \r\n        class=\"eds-chip__close\"\r\n        ariaLabel=\"Remove {{ chipLabel.textContent }} chip\"\r\n        [euiColorVariant]=\"colorVariantsBase.euiColorVariant\"\r\n        (click)=\"onRemove($event)\"\r\n        euiSizeS\r\n        euiRounded\r\n        euiButtonTertiary>\r\n        <eds-icon icon=\"x\" euiSizeXS/>\r\n    </button>\r\n}\r\n", styles: [".eui-21 :host.eds-chip.eds-chip--size-s{--_font: var(--eds-f-label-s);--_padding: var(--eds-sp-4xs) var(--eds-sp-2xs);--_icon-size: var(--eds-is-s)}.eui-21 :host.eds-chip.eds-chip--size-m{--_font: var(--eds-f-label-s);--_padding: var(--eds-sp-4xs) var(--eds-sp-2xs);--_icon-size: var(--eds-is-s)}.eui-21 :host.eds-chip.eds-chip--size-l{--_font: var(--eds-f-label-s);--_padding: var(--eds-sp-3xs) var(--eds-sp-2xs);--_icon-size: var(--eds-is-m)}.eui-21 :host.eds-chip.eds-chip--neutral{--_surface: var(--eds-c-surface-elevation-sunken);--_on-surface: var(--eds-c-foreground-subtle);--_border-color: var(--eds-c-border-divider)}.eui-21 :host.eds-chip.eds-chip--info{--_surface: var(--eds-c-surface-info-subtler);--_on-surface: var(--eds-c-on-surface-info-subtler);--_border-color: var(--eds-c-border-info-subtle)}.eui-21 :host.eds-chip.eds-chip--success{--_surface: var(--eds-c-surface-success-subtler);--_on-surface: var(--eds-c-on-surface-success-subtler);--_border-color: var(--eds-c-border-success-subtle)}.eui-21 :host.eds-chip.eds-chip--warning{--_surface: var(--eds-c-surface-warning-subtler);--_on-surface: var(--eds-c-on-surface-warning-subtler);--_border-color: var(--eds-c-border-warning-subtle)}.eui-21 :host.eds-chip.eds-chip--critical{--_surface: var(--eds-c-surface-critical-subtler);--_on-surface: var(--eds-c-on-surface-critical-subtler);--_border-color: var(--eds-c-border-critical-subtle)}.eui-21 :host.eds-chip{align-items:center;border-radius:var(--eds-br-full);display:inline-flex;border:var(--eds-bw-xs) solid var(--_border-color);padding:var(--_padding);font:var(--_font);background-color:var(--_surface);color:var(--_on-surface)}.eui-21 :host.eds-chip .eds-chip__content{display:flex;align-items:center;background:transparent;gap:var(--eds-sp-3xs)}.eui-21 :host.eds-chip .eds-chip__close{--_size: auto}\n"] }]
+        }], propDecorators: { cssClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], ariaLabel: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['attr.aria-label']
+            }], e2eAttr: [{
+                type: HostBinding,
+                args: ['attr.data-e2e']
+            }, {
+                type: Input
+            }], euiInternalId: [{
+                type: Input
+            }], tooltipMessage: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], isChipRemovable: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], remove: [{
+                type: Output
+            }], chipLabel: [{
+                type: ViewChild,
+                args: ['chipLabel']
+            }] } });
+
+class EdsChipModel {
+    constructor(values = {}) {
+        this.isRemovable = false;
+        this.isOutline = false;
+        this.isRounded = false;
+        this.isDisabled = false;
+        this.variant = 'primary';
+        this.tooltip = new EuiChipTooltip();
+        Object.assign(this, values);
+    }
+}
+class EuiChipTooltip {
+    constructor(values = {}) {
+        this.position = 'above';
+        this.contentAlignment = 'center';
+        this.delay = 0;
+        Object.assign(this, values);
+    }
+}
+
+const EDS_CHIP = [
+    EdsChip,
+];
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { EDS_CHIP, EdsChip, EdsChipModel, EuiChipTooltip };
+//# sourceMappingURL=eui-eds-eds-chip.mjs.map

package/fesm2022/eui-eds-eds-chip.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"eui-eds-eds-chip.mjs","sources":["../../eds-chip/eds-chip.ts","../../eds-chip/eds-chip.html","../../eds-chip/models/eui-chip.model.ts","../../eds-chip/index.ts","../../eds-chip/eui-eds-eds-chip.ts"],"sourcesContent":["import {\r\n    Component,\r\n    HostBinding,\r\n    Input,\r\n    ChangeDetectionStrategy,\r\n    AfterContentInit,\r\n    Output,\r\n    EventEmitter,\r\n    ViewChild,\r\n    ElementRef,\r\n    booleanAttribute,\r\n    inject,\r\n    OnInit,\r\n} from '@angular/core';\r\n\r\nimport { EuiBaseColorVariantsDirective, EuiBaseSizeVariantsDirective } from '@eui/eds/shared';\r\nimport { EDS_ICON } from '@eui/eds/eds-icon';\r\nimport { EDS_BUTTON } from '@eui/eds/eds-button';\r\n\r\n@Component({\r\n    templateUrl: './eds-chip.html',\r\n    selector: 'eds-chip, span[edsChip], li[edsChip]',\r\n    styleUrl: './eds-chip.scss',\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    imports: [\r\n        ...EDS_ICON,\r\n        ...EDS_BUTTON,\r\n    ],\r\n    hostDirectives: [\r\n        {\r\n            directive: EuiBaseSizeVariantsDirective,\r\n            inputs: [\r\n                'euiSizeXS',\r\n                'euiSizeS',\r\n                'euiSizeM',\r\n                'euiSizeVariant',\r\n            ],\r\n        },        \r\n        {\r\n            directive: EuiBaseColorVariantsDirective,\r\n            inputs: [\r\n                'euiNeutral',\r\n                'euiSuccess',\r\n                'euiInfo',\r\n                'euiWarning',\r\n                'euiCritical',\r\n                'euiColorVariant',\r\n            ],\r\n        },\r\n    ],\r\n})\r\nexport class EdsChip implements OnInit, AfterContentInit {\r\n    /**\r\n     * @description\r\n     * Computes and returns the CSS classes for the component based on its current state.\r\n     *\r\n     * @returns {string} Space-separated string of CSS class names\r\n     */\r\n    @HostBinding('class')\r\n    get cssClasses(): string {\r\n        return [\r\n            'eds-chip',\r\n            this.sizeVariantsBase.getCssClasses('eds-chip'),\r\n            this.colorVariantsBase.getCssClasses('eds-chip'),\r\n            this.isChipRemovable ? 'eui-chip--removable' : '',\r\n        ].join(' ').trim();\r\n    }\r\n\r\n    /**\r\n     * Sets the `role` attribute for the host element.\r\n     *\r\n     * @default 'status'\r\n     */\r\n    @HostBinding('attr.role') role = 'status';\r\n    /**\r\n     * Sets the `aria-label` attribute for the host element.\r\n     *\r\n     * @default 'Chip content'\r\n     */\r\n    @Input() @HostBinding('attr.aria-label') ariaLabel = 'Chip content';\r\n\r\n    /**\r\n     * Sets the `data-e2e` attribute for the host element.\r\n     *\r\n     * @default 'eui-chip'\r\n     */\r\n    @HostBinding('attr.data-e2e')\r\n    @Input()\r\n    e2eAttr = 'eui-chip';\r\n\r\n    /**\r\n     * Sets the euiInternalId of the chip.\r\n     *\r\n     * @default null\r\n     */\r\n    @Input() euiInternalId!: string;\r\n    /**\r\n     * Sets the label of the tooltip to diaply on hover.\r\n     */\r\n    @Input() tooltipMessage!: string;\r\n    /**\r\n     * Sets the id of the chip.\r\n     */\r\n    @Input() id!: string | number;\r\n    /**\r\n     * Sets the data of the chip like tooltip configuration.\r\n     */\r\n    // TODO: type should be specific\r\n    // TODO: find the correct type or turn into a generic, https://www.typescriptlang.org/docs/handbook/2/generics.html\r\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n    @Input() data: any = {\r\n        id: crypto.randomUUID(),\r\n        tooltip: {\r\n            color: 'euiTooltipPrimary',\r\n            contentAlignment: null,\r\n            position: 'above',\r\n        },\r\n    };\r\n\r\n    /**\r\n     * Wether the chip can be removed.\r\n     *\r\n     * @default false\r\n     */\r\n    @Input({ transform: booleanAttribute }) isChipRemovable = false;\r\n    /**\r\n     * Event emitted when the chip is removed.\r\n     */\r\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n    @Output() remove = new EventEmitter<any>();\r\n\r\n    /**\r\n     * Icon declares by user in the chip\r\n     */\r\n    @ViewChild('chipLabel') chipLabel!: ElementRef<HTMLInputElement>;\r\n    \r\n    protected sizeVariantsBase: EuiBaseSizeVariantsDirective = inject(EuiBaseSizeVariantsDirective);\r\n    protected colorVariantsBase: EuiBaseColorVariantsDirective = inject(EuiBaseColorVariantsDirective);\r\n\r\n    private _elementRef = inject(ElementRef);\r\n\r\n    ngOnInit(): void {\r\n        if (!this.sizeVariantsBase.euiSizeVariant) {\r\n            this.sizeVariantsBase.euiSizeM = true;\r\n        }\r\n        if (!this.colorVariantsBase.euiColorVariant) {\r\n            this.colorVariantsBase.euiNeutral = true;\r\n        }        \r\n    }\r\n\r\n    ngAfterContentInit(): void {\r\n        if (!this.data.id && this.id) {\r\n            this.data = Object.assign(this.data, { id: this.id });\r\n        }\r\n        // checks if the parent element is an eui-chip-list to set role listitem or if a parent above in case cdkdroplist interferes\r\n        if (this._elementRef.nativeElement.parentElement?.classList.contains('eui-chip-list__chip-container') || this._elementRef.nativeElement.parentElement?.parentElement?.classList.contains('eui-chip-list__chip-container')) {\r\n            this.role = 'listitem'\r\n        }\r\n    }\r\n\r\n    /**\r\n     * Remove chip handler\r\n     *\r\n     * @param event Click event\r\n     */\r\n    public onRemove(event?: Event): void {\r\n        if (event instanceof KeyboardEvent && (event as KeyboardEvent).code === 'Backspace') {\r\n            this.remove.emit({ chip: this.data, event });\r\n        } else {\r\n            this.remove.emit(this.data);\r\n        }\r\n    }\r\n}\r\n","<div class=\"eds-chip__content\" #chipLabel>\r\n    <ng-content></ng-content>\r\n</div>\r\n@if (isChipRemovable) {\r\n    <button edsButton \r\n        class=\"eds-chip__close\"\r\n        ariaLabel=\"Remove {{ chipLabel.textContent }} chip\"\r\n        [euiColorVariant]=\"colorVariantsBase.euiColorVariant\"\r\n        (click)=\"onRemove($event)\"\r\n        euiSizeS\r\n        euiRounded\r\n        euiButtonTertiary>\r\n        <eds-icon icon=\"x\" euiSizeXS/>\r\n    </button>\r\n}\r\n","export class EdsChipModel {\r\n    id!: string | number;\r\n    euiInternalId!: string;\r\n    label!: string;\r\n    isRemovable = false;\r\n    isOutline = false;\r\n    isRounded = false;\r\n    isDisabled = false;\r\n    variant: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger' | 'accent' = 'primary';\r\n    tooltip: EuiChipTooltip = new EuiChipTooltip();\r\n    iconClass?: string;\r\n    iconSvgName?: string;\r\n\r\n    constructor(values = {}) {\r\n        Object.assign(this, values);\r\n    }\r\n}\r\n\r\nexport class EuiChipTooltip {\r\n    tooltipMessage!: string;\r\n    position?: 'above' | 'below' | 'left' | 'right' | 'before' | 'after' = 'above';\r\n    contentAlignment?: 'center' | 'left' | 'right' | 'justify' = 'center';\r\n    delay? = 0;\r\n\r\n    constructor(values = {}) {\r\n        Object.assign(this, values);\r\n    }\r\n}\r\n","import { EdsChip } from './eds-chip';\r\n\r\nexport * from './models/eui-chip.model';\r\nexport * from './eds-chip';\r\n\r\nexport const EDS_CHIP = [\r\n    EdsChip,\r\n] as const;\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/eui-eds-eds-icon-image.mjs

@@ -0,0 +1,65 @@
+import * as i0 from '@angular/core';
+import { inject, booleanAttribute, HostBinding, Input, ChangeDetectionStrategy, Component } from '@angular/core';
+import { EUI_CONFIG_TOKEN } from '@eui/core';
+
+class EdsIconImage {
+    constructor() {
+        this.ariaRole = 'img';
+        this.assetsBaseUrl = 'assets';
+        /**
+         * Hides the icon from assistive technologies when purely decorative.
+         * Set to false when icon conveys meaningful information requiring announcement.
+         * @default true
+         */
+        this.ariaHidden = true;
+        this.config = inject(EUI_CONFIG_TOKEN, { optional: true });
+    }
+    get cssClasses() {
+        return [
+            'eds-icon-image',
+        ]
+            .join(' ')
+            .trim();
+    }
+    ngOnInit() {
+        const assetsBaseUrl = this.config?.appConfig?.global?.eui?.assetsBaseUrl;
+        if (assetsBaseUrl) {
+            this.assetsBaseUrl = this.config?.appConfig?.global?.eui?.assetsBaseUrl || 'assets';
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: EdsIconImage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.17", type: EdsIconImage, isStandalone: true, selector: "eds-icon, span[edsIcon]", inputs: { iconUrl: "iconUrl", ariaLabel: "ariaLabel", ariaHidden: ["ariaHidden", "ariaHidden", booleanAttribute] }, host: { properties: { "attr.role": "this.ariaRole", "class": "this.cssClasses", "attr.aria-label": "this.ariaLabel", "ariaHidden": "this.ariaHidden" } }, ngImport: i0, template: "<svg class=\"eds-icon-svg-image\"\r\n        [attr.aria-hidden]=\"ariaHidden\"\r\n        [attr.role]=\"'img'\">\r\n    <image [attr.href]=\"iconUrl\" [class]=\"'eds-icon-svg-image'\"></image>\r\n</svg>\r\n", styles: [".eui-21 :host.eds-icon-image{--_height: var(--_icon-size);--_width: var(--_icon-size)}.eui-21 :host.eds-icon-image{display:inline-flex;position:relative}.eui-21 :host.eds-icon-image .eds-icon-svg-image{height:var(--_height);width:var(--_width)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: EdsIconImage, decorators: [{
+            type: Component,
+            args: [{ selector: 'eds-icon, span[edsIcon]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg class=\"eds-icon-svg-image\"\r\n        [attr.aria-hidden]=\"ariaHidden\"\r\n        [attr.role]=\"'img'\">\r\n    <image [attr.href]=\"iconUrl\" [class]=\"'eds-icon-svg-image'\"></image>\r\n</svg>\r\n", styles: [".eui-21 :host.eds-icon-image{--_height: var(--_icon-size);--_width: var(--_icon-size)}.eui-21 :host.eds-icon-image{display:inline-flex;position:relative}.eui-21 :host.eds-icon-image .eds-icon-svg-image{height:var(--_height);width:var(--_width)}\n"] }]
+        }], propDecorators: { ariaRole: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], iconUrl: [{
+                type: Input
+            }], cssClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }], ariaLabel: [{
+                type: HostBinding,
+                args: ['attr.aria-label']
+            }, {
+                type: Input
+            }], ariaHidden: [{
+                type: HostBinding
+            }, {
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }] } });
+
+const EDS_ICON_IMAGE = [
+    EdsIconImage,
+];
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { EDS_ICON_IMAGE, EdsIconImage };
+//# sourceMappingURL=eui-eds-eds-icon-image.mjs.map

package/fesm2022/eui-eds-eds-icon-image.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"eui-eds-eds-icon-image.mjs","sources":["../../eds-icon-image/eds-icon-image.ts","../../eds-icon-image/eds-icon-image.html","../../eds-icon-image/index.ts","../../eds-icon-image/eui-eds-eds-icon-image.ts"],"sourcesContent":["import {\r\n    ChangeDetectionStrategy,\r\n    Component,\r\n    Input,\r\n    HostBinding,\r\n    OnInit,\r\n    inject,\r\n    booleanAttribute,\r\n} from '@angular/core';\r\nimport { EUI_CONFIG_TOKEN } from '@eui/core';\r\nimport { EuiConfig } from '@eui/core';\r\n\r\n@Component({\r\n    selector: 'eds-icon, span[edsIcon]',\r\n    templateUrl: './eds-icon-image.html',\r\n    styleUrls: ['./eds-icon-image.scss'],\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class EdsIconImage implements OnInit {\r\n    @HostBinding('attr.role') ariaRole = 'img';\r\n\r\n    /**\r\n     * Direct URL to an SVG icon file, bypassing the icon set resolution.\r\n     * Useful for loading custom or external icons not in configured icon sets.\r\n     */\r\n    @Input() iconUrl!: string;\r\n\r\n    @HostBinding('class')\r\n    public get cssClasses(): string {\r\n        return [\r\n            'eds-icon-image',\r\n        ]\r\n            .join(' ')\r\n            .trim();\r\n    }\r\n\r\n    /**\r\n     * Accessible label for screen readers describing the icon's purpose.\r\n     * Provides semantic meaning when icon conveys information beyond decoration.\r\n     */\r\n    @HostBinding('attr.aria-label')\r\n    @Input() ariaLabel!: string;\r\n\r\n    public assetsBaseUrl = 'assets';\r\n\r\n    /**\r\n     * Hides the icon from assistive technologies when purely decorative.\r\n     * Set to false when icon conveys meaningful information requiring announcement.\r\n     * @default true\r\n     */\r\n    @HostBinding() @Input({ transform: booleanAttribute }) ariaHidden = true;\r\n    \r\n    private config = inject<EuiConfig>(EUI_CONFIG_TOKEN, { optional: true })!;\r\n\r\n    ngOnInit(): void {\r\n        const assetsBaseUrl = this.config?.appConfig?.global?.eui?.assetsBaseUrl;\r\n        if (assetsBaseUrl) {\r\n            this.assetsBaseUrl = this.config?.appConfig?.global?.eui?.assetsBaseUrl || 'assets';\r\n        }\r\n    }\r\n}\r\n","<svg class=\"eds-icon-svg-image\"\r\n        [attr.aria-hidden]=\"ariaHidden\"\r\n        [attr.role]=\"'img'\">\r\n    <image [attr.href]=\"iconUrl\" [class]=\"'eds-icon-svg-image'\"></image>\r\n</svg>\r\n","import { EdsIconImage } from './eds-icon-image';\r\n\r\nexport * from './eds-icon-image';\r\n\r\nexport const EDS_ICON_IMAGE = [\r\n    EdsIconImage,\r\n] as const;\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MAkBa,YAAY,CAAA;AANzB,IAAA,WAAA,GAAA;QAO8B,IAAA,CAAA,QAAQ,GAAG,KAAK;QAwBnC,IAAA,CAAA,aAAa,GAAG,QAAQ;AAE/B;;;;AAIG;QACoD,IAAA,CAAA,UAAU,GAAG,IAAI;QAEhE,IAAA,CAAA,MAAM,GAAG,MAAM,CAAY,gBAAgB,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAE;AAQ5E,IAAA;AAjCG,IAAA,IACW,UAAU,GAAA;QACjB,OAAO;YACH,gBAAgB;AACnB;aACI,IAAI,CAAC,GAAG;AACR,aAAA,IAAI,EAAE;IACf;IAoBA,QAAQ,GAAA;AACJ,QAAA,MAAM,aAAa,GAAG,IAAI,CAAC,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,EAAE,aAAa;QACxE,IAAI,aAAa,EAAE;AACf,YAAA,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,EAAE,aAAa,IAAI,QAAQ;QACvF;IACJ;+GAzCS,YAAY,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;mGAAZ,YAAY,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,yBAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,SAAA,EAAA,WAAA,EAAA,UAAA,EAAA,CAAA,YAAA,EAAA,YAAA,EAgCc,gBAAgB,CAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,WAAA,EAAA,eAAA,EAAA,OAAA,EAAA,iBAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,YAAA,EAAA,iBAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EClDvD,gNAKA,EAAA,MAAA,EAAA,CAAA,wPAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FDaa,YAAY,EAAA,UAAA,EAAA,CAAA;kBANxB,SAAS;+BACI,yBAAyB,EAAA,eAAA,EAGlB,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,gNAAA,EAAA,MAAA,EAAA,CAAA,wPAAA,CAAA,EAAA;;sBAG9C,WAAW;uBAAC,WAAW;;sBAMvB;;sBAEA,WAAW;uBAAC,OAAO;;sBAanB,WAAW;uBAAC,iBAAiB;;sBAC7B;;sBASA;;sBAAe,KAAK;uBAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE;;;AE9ClD,MAAM,cAAc,GAAG;IAC1B,YAAY;;;ACLhB;;AAEG;;;;"}