@eui/components 18.0.0-rc.32 → 18.0.0-rc.33

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/docs/components/EuiChipComponent.html +25 -1
  2. package/docs/dependencies.html +1 -1
  3. package/docs/js/search/search_index.js +2 -2
  4. package/esm2022/eui-chip/eui-chip.component.mjs +9 -6
  5. package/esm2022/eui-chip-list/eui-chip-list.component.mjs +1 -1
  6. package/esm2022/eui-tree/eui-tree.component.mjs +1 -1
  7. package/eui-chip/eui-chip.component.d.ts +3 -1
  8. package/eui-chip/eui-chip.component.d.ts.map +1 -1
  9. package/fesm2022/eui-components-eui-chip-list.mjs +1 -1
  10. package/fesm2022/eui-components-eui-chip-list.mjs.map +1 -1
  11. package/fesm2022/eui-components-eui-chip.mjs +8 -5
  12. package/fesm2022/eui-components-eui-chip.mjs.map +1 -1
  13. package/fesm2022/eui-components-eui-tree.mjs +1 -1
  14. package/fesm2022/eui-components-eui-tree.mjs.map +1 -1
  15. package/package.json +3 -3
package/esm2022/eui-chip/eui-chip.component.mjs CHANGED
@@ -10,9 +10,8 @@ export class EuiChipComponent {
10
10
  return [
11
11
  this.baseStatesDirective.getCssClasses('eui-chip'),
12
12
  this.isChipRemovable ? 'eui-chip--removable' : '',
13
- ]
14
- .join(' ')
15
- .trim();
13
+ this.isFilled ? 'eui-chip--filled' : '',
14
+ ].join(' ').trim();
16
15
  }
17
16
  constructor(_elementRef, baseStatesDirective) {
18
17
  this._elementRef = _elementRef;
@@ -34,6 +33,7 @@ export class EuiChipComponent {
34
33
  };
35
34
  this.isChipRemovable = false;
36
35
  this.isSquared = false;
36
+ this.isFilled = false;
37
37
  this.remove = new EventEmitter();
38
38
  }
39
39
  ngAfterContentInit() {
@@ -53,7 +53,7 @@ export class EuiChipComponent {
53
53
  }
54
54
  }
55
55
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: EuiChipComponent, deps: [{ token: i0.ElementRef }, { token: i1.BaseStatesDirective }], target: i0.ɵɵFactoryTarget.Component }); }
56
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0", type: EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: { ariaLabel: "ariaLabel", e2eAttr: "e2eAttr", euiInternalId: "euiInternalId", tooltipMessage: "tooltipMessage", id: "id", data: "data", isChipRemovable: ["isChipRemovable", "isChipRemovable", booleanAttribute], isSquared: ["isSquared", "isSquared", booleanAttribute] }, outputs: { remove: "remove" }, host: { properties: { "class": "this.cssClasses", "attr.role": "this.role", "attr.aria-label": "this.ariaLabel", "attr.data-e2e": "this.e2eAttr" } }, queries: [{ propertyName: "euiIcons", predicate: i0.forwardRef(() => EuiIconSvgComponent) }], viewQueries: [{ propertyName: "chipLabel", first: true, predicate: ["chipLabel"], descendants: true }], hostDirectives: [{ directive: i1.BaseStatesDirective, inputs: ["euiPrimary", "euiPrimary", "euiSecondary", "euiSecondary", "euiSuccess", "euiSuccess", "euiInfo", "euiInfo", "euiWarning", "euiWarning", "euiDanger", "euiDanger", "euiAccent", "euiAccent", "euiVariant", "euiVariant", "euiOutline", "euiOutline", "euiDisabled", "euiDisabled"] }], ngImport: i0, template: "<div class=\"eui-chip-wrapper\">\n <div class=\"eui-chip__content-container\" #chipLabel>\n <ng-content></ng-content>\n </div>\n <eui-icon-button\n *ngIf=\"isChipRemovable\"\n class=\"eui-chip__close\"\n ariaLabel=\"Remove chip\"\n icon=\"close:outline\"\n fillColor=\"neutral-light\"\n euiRounded\n hasNoPadding\n (keydown.enter)=\"onRemove($event)\"\n (keydown.backspace)=\"onRemove($event)\"\n (buttonClick)=\"onRemove($event)\">\n </eui-icon-button>\n</div>\n", styles: [".eui-chip{--_color: var(--eui-chip-color, var(--eui-c-neutral));--_bg-color: var(--eui-chip-bg-color, var(--eui-c-neutral-bg));--_border-outline-color: var(--eui-chip-border-outline-color, var(--eui-c-neutral));--_close-hover-color: var(--eui-chip-close-hover-color, var(--eui-c-neutral-lightest))}.eui-chip{align-items:center;border-radius:var(--eui-br-max);display:inline-flex;position:relative;font:var(--eui-f);min-height:calc(var(--eui-s-m) / 16 * 30);padding:0 var(--eui-s-s)}.eui-chip .eui-chip-wrapper,.eui-chip .eui-chip__content-container{display:flex;align-items:center;gap:var(--eui-s-xs)}.eui-chip--outline{outline:var(--eui-bw-xs) solid var(--_border-outline-color);outline-offset:-1px}.eui-chip-group{align-items:center;display:inline-flex;flex-wrap:nowrap;position:relative}.eui-chip-group .eui-chip:first-child{border-bottom-right-radius:0;border-top-right-radius:0;margin-right:0}.eui-chip-group .eui-chip:last-child{border-bottom-left-radius:0;border-top-left-radius:0;margin-left:0}.eui-chip-group .eui-chip .eui-chip__content-container eui-icon-svg{margin-left:0;margin-right:0}.eui-chip--primary{--_bg-color: var(--eui-c-primary-lightest);--_color: var(--eui-c-primary-darker);--_border-color: transparent;--_border-outline-color: var(--eui-c-primary);--_close-hover-color: var(--eui-c-primary-lighter)}.eui-chip--secondary{--_bg-color: var(--eui-c-neutral-bg);--_color: var(--eui-c-neutral-darker);--_border-color: transparent;--_border-outline-color: var(--eui-c-neutral);--_close-hover-color: var(--eui-c-neutral-lightest)}.eui-chip--info{--_bg-color: var(--eui-c-info-lightest);--_color: var(--eui-c-info-darker);--_border-color: transparent;--_border-outline-color: var(--eui-c-info);--_close-hover-color: var(--eui-c-info-lighter)}.eui-chip--success{--_bg-color: var(--eui-c-success-lightest);--_color: var(--eui-c-success-darker);--_border-color: transparent;--_border-outline-color: var(--eui-c-success-dark);--_close-hover-color: var(--eui-c-success-lighter)}.eui-chip--warning{--_bg-color: var(--eui-c-warning-lightest);--_color: var(--eui-c-warning-darker);--_border-color: transparent;--_border-outline-color: var(--eui-c-warning);--_close-hover-color: var(--eui-c-warning-lighter)}.eui-chip--danger{--_bg-color: var(--eui-c-danger-lightest);--_color: var(--eui-c-danger-darker);--_border-color: transparent;--_border-outline-color: var(--eui-c-danger-dark);--_close-hover-color: var(--eui-c-danger-lighter)}.eui-chip--accent{--_bg-color: var(--eui-c-accent-lightest);--_color: var(--eui-c-neutral);--_border-color: transparent;--_border-outline-color: var(--eui-c-accent);--_close-hover-color: var(--eui-c-accent-lighter)}.eui-chip{background-color:var(--_bg-color)}.eui-chip .eui-label{color:var(--_color)}.eui-chip .eui-icon-svg:not(.eui-chip__close) svg{fill:var(--_color);color:var(--_color)}.eui-chip .eui-chip__close:not(.eui-chip--outline) .eui-icon-button__button:hover{background-color:var(--_close-hover-color)}.eui-chip--outline{background-color:var(--eui-c-white)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.EuiIconButtonComponent, selector: "eui-icon-button", inputs: ["icon", "fillColor", "size", "ariaLabel", "tabindex", "hasNoPadding", "hasFocusHoverColor", "hasFocusHoverBg", "euiRounded", "euiDisabled"], outputs: ["buttonClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
56
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0", type: EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: { ariaLabel: "ariaLabel", e2eAttr: "e2eAttr", euiInternalId: "euiInternalId", tooltipMessage: "tooltipMessage", id: "id", data: "data", isChipRemovable: ["isChipRemovable", "isChipRemovable", booleanAttribute], isSquared: ["isSquared", "isSquared", booleanAttribute], isFilled: ["isFilled", "isFilled", booleanAttribute] }, outputs: { remove: "remove" }, host: { properties: { "class": "this.cssClasses", "attr.role": "this.role", "attr.aria-label": "this.ariaLabel", "attr.data-e2e": "this.e2eAttr" } }, queries: [{ propertyName: "euiIcons", predicate: i0.forwardRef(() => EuiIconSvgComponent) }], viewQueries: [{ propertyName: "chipLabel", first: true, predicate: ["chipLabel"], descendants: true }], hostDirectives: [{ directive: i1.BaseStatesDirective, inputs: ["euiPrimary", "euiPrimary", "euiSecondary", "euiSecondary", "euiSuccess", "euiSuccess", "euiInfo", "euiInfo", "euiWarning", "euiWarning", "euiDanger", "euiDanger", "euiAccent", "euiAccent", "euiVariant", "euiVariant", "euiOutline", "euiOutline", "euiDisabled", "euiDisabled"] }], ngImport: i0, template: "<div class=\"eui-chip-wrapper\">\n <div class=\"eui-chip__content-container\" #chipLabel>\n <ng-content></ng-content>\n </div>\n <eui-icon-button\n *ngIf=\"isChipRemovable\"\n class=\"eui-chip__close\"\n ariaLabel=\"Remove chip\"\n icon=\"close:outline\"\n euiRounded\n hasNoPadding\n (keydown.enter)=\"onRemove($event)\"\n (keydown.backspace)=\"onRemove($event)\"\n (buttonClick)=\"onRemove($event)\">\n </eui-icon-button>\n</div>\n", styles: [".eui-chip{--_color: var(--eui-chip-color, var(--eui-c-neutral));--_bg-color: var(--eui-chip-bg-color, var(--eui-c-neutral-bg));--_border-outline-color: var(--eui-chip-border-outline-color, var(--eui-c-neutral));--_close-hover-color: var(--eui-chip-close-hover-color, var(--eui-c-neutral-lightest))}.eui-chip{align-items:center;border-radius:var(--eui-br-max);display:inline-flex;position:relative;font:var(--eui-f);min-height:calc(var(--eui-s-m) / 16 * 30);padding:0 var(--eui-s-s)}.eui-chip .eui-chip-wrapper,.eui-chip .eui-chip__content-container{display:flex;align-items:center;gap:var(--eui-s-xs)}.eui-chip--outline{outline:var(--eui-bw-xs) solid var(--_border-outline-color);outline-offset:-1px}.eui-chip-group{align-items:center;display:inline-flex;flex-wrap:nowrap;position:relative}.eui-chip-group .eui-chip:first-child{border-bottom-right-radius:0;border-top-right-radius:0;margin-right:0}.eui-chip-group .eui-chip:last-child{border-bottom-left-radius:0;border-top-left-radius:0;margin-left:0}.eui-chip-group .eui-chip .eui-chip__content-container eui-icon-svg{margin-left:0;margin-right:0}.eui-chip--primary{--_bg-color: var(--eui-c-primary-lightest);--_color: var(--eui-c-primary-darker);--_border-color: transparent;--_border-outline-color: var(--eui-c-primary);--_close-hover-color: var(--eui-c-primary-lighter)}.eui-chip--secondary{--_bg-color: var(--eui-c-neutral-bg);--_color: var(--eui-c-neutral-darker);--_border-color: transparent;--_border-outline-color: var(--eui-c-neutral);--_close-hover-color: var(--eui-c-neutral-lightest)}.eui-chip--info{--_bg-color: var(--eui-c-info-lightest);--_color: var(--eui-c-info-darker);--_border-color: transparent;--_border-outline-color: var(--eui-c-info);--_close-hover-color: var(--eui-c-info-lighter)}.eui-chip--success{--_bg-color: var(--eui-c-success-lightest);--_color: var(--eui-c-success-darker);--_border-color: transparent;--_border-outline-color: var(--eui-c-success-dark);--_close-hover-color: var(--eui-c-success-lighter)}.eui-chip--warning{--_bg-color: var(--eui-c-warning-lightest);--_color: var(--eui-c-warning-darker);--_border-color: transparent;--_border-outline-color: var(--eui-c-warning);--_close-hover-color: var(--eui-c-warning-lighter)}.eui-chip--danger{--_bg-color: var(--eui-c-danger-lightest);--_color: var(--eui-c-danger-darker);--_border-color: transparent;--_border-outline-color: var(--eui-c-danger-dark);--_close-hover-color: var(--eui-c-danger-lighter)}.eui-chip--accent{--_bg-color: var(--eui-c-accent-lightest);--_color: var(--eui-c-neutral);--_border-color: transparent;--_border-outline-color: var(--eui-c-accent);--_close-hover-color: var(--eui-c-accent-lighter)}.eui-chip--filled.eui-chip--primary{--_bg-color: var(--eui-c-primary);--_color: var(--eui-c-primary-contrast);--_border-color: transparent;--_close-hover-color: var(--eui-c-primary-light)}.eui-chip--filled.eui-chip--secondary{--_bg-color: var(--eui-c-neutral-lightest);--_color: var(--eui-c-neutral-lightest-contrast);--_border-color: transparent;--_close-hover-color: var(--eui-c-neutral-bg)}.eui-chip--filled.eui-chip--info{--_bg-color: var(--eui-c-info);--_color: var(--eui-c-info-contrast);--_border-color: transparent;--_close-hover-color: var(--eui-c-info-light)}.eui-chip--filled.eui-chip--success{--_bg-color: var(--eui-c-success-dark);--_color: var(--eui-c-success-dark-contrast);--_border-color: transparent;--_close-hover-color: var(--eui-c-success)}.eui-chip--filled.eui-chip--warning{--_bg-color: var(--eui-c-warning);--_color: var(--eui-c-warning-contrast);--_border-color: transparent;--_close-hover-color: var(--eui-c-warning-light)}.eui-chip--filled.eui-chip--danger{--_bg-color: var(--eui-c-danger-dark);--_color: var(--eui-c-danger-dark-contrast);--_border-color: transparent;--_close-hover-color: var(--eui-c-danger)}.eui-chip--filled.eui-chip--accent{--_bg-color: var(--eui-c-accent-light);--_color: var(--eui-c-accent-contrast);--_border-color: transparent;--_close-hover-color: var(--eui-c-accent-lighter)}.eui-chip{background-color:var(--_bg-color);color:var(--_color)}.eui-chip .eui-icon-svg:not(.eui-chip__close) svg{fill:var(--_color);color:var(--_color)}.eui-chip .eui-chip__close:not(.eui-chip--outline) .eui-icon-button__button:hover{background-color:var(--_close-hover-color)}.eui-chip--outline{background-color:var(--eui-c-white)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.EuiIconButtonComponent, selector: "eui-icon-button", inputs: ["icon", "fillColor", "size", "ariaLabel", "tabindex", "hasNoPadding", "hasFocusHoverColor", "hasFocusHoverBg", "euiRounded", "euiDisabled"], outputs: ["buttonClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
57
57
  }
58
58
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: EuiChipComponent, decorators: [{
59
59
  type: Component,
@@ -73,7 +73,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImpor
73
73
  'euiDisabled',
74
74
  ],
75
75
  },
76
- ], template: "<div class=\"eui-chip-wrapper\">\n <div class=\"eui-chip__content-container\" #chipLabel>\n <ng-content></ng-content>\n </div>\n <eui-icon-button\n *ngIf=\"isChipRemovable\"\n class=\"eui-chip__close\"\n ariaLabel=\"Remove chip\"\n icon=\"close:outline\"\n fillColor=\"neutral-light\"\n euiRounded\n hasNoPadding\n (keydown.enter)=\"onRemove($event)\"\n (keydown.backspace)=\"onRemove($event)\"\n (buttonClick)=\"onRemove($event)\">\n </eui-icon-button>\n</div>\n", styles: [".eui-chip{--_color: var(--eui-chip-color, var(--eui-c-neutral));--_bg-color: var(--eui-chip-bg-color, var(--eui-c-neutral-bg));--_border-outline-color: var(--eui-chip-border-outline-color, var(--eui-c-neutral));--_close-hover-color: var(--eui-chip-close-hover-color, var(--eui-c-neutral-lightest))}.eui-chip{align-items:center;border-radius:var(--eui-br-max);display:inline-flex;position:relative;font:var(--eui-f);min-height:calc(var(--eui-s-m) / 16 * 30);padding:0 var(--eui-s-s)}.eui-chip .eui-chip-wrapper,.eui-chip .eui-chip__content-container{display:flex;align-items:center;gap:var(--eui-s-xs)}.eui-chip--outline{outline:var(--eui-bw-xs) solid var(--_border-outline-color);outline-offset:-1px}.eui-chip-group{align-items:center;display:inline-flex;flex-wrap:nowrap;position:relative}.eui-chip-group .eui-chip:first-child{border-bottom-right-radius:0;border-top-right-radius:0;margin-right:0}.eui-chip-group .eui-chip:last-child{border-bottom-left-radius:0;border-top-left-radius:0;margin-left:0}.eui-chip-group .eui-chip .eui-chip__content-container eui-icon-svg{margin-left:0;margin-right:0}.eui-chip--primary{--_bg-color: var(--eui-c-primary-lightest);--_color: var(--eui-c-primary-darker);--_border-color: transparent;--_border-outline-color: var(--eui-c-primary);--_close-hover-color: var(--eui-c-primary-lighter)}.eui-chip--secondary{--_bg-color: var(--eui-c-neutral-bg);--_color: var(--eui-c-neutral-darker);--_border-color: transparent;--_border-outline-color: var(--eui-c-neutral);--_close-hover-color: var(--eui-c-neutral-lightest)}.eui-chip--info{--_bg-color: var(--eui-c-info-lightest);--_color: var(--eui-c-info-darker);--_border-color: transparent;--_border-outline-color: var(--eui-c-info);--_close-hover-color: var(--eui-c-info-lighter)}.eui-chip--success{--_bg-color: var(--eui-c-success-lightest);--_color: var(--eui-c-success-darker);--_border-color: transparent;--_border-outline-color: var(--eui-c-success-dark);--_close-hover-color: var(--eui-c-success-lighter)}.eui-chip--warning{--_bg-color: var(--eui-c-warning-lightest);--_color: var(--eui-c-warning-darker);--_border-color: transparent;--_border-outline-color: var(--eui-c-warning);--_close-hover-color: var(--eui-c-warning-lighter)}.eui-chip--danger{--_bg-color: var(--eui-c-danger-lightest);--_color: var(--eui-c-danger-darker);--_border-color: transparent;--_border-outline-color: var(--eui-c-danger-dark);--_close-hover-color: var(--eui-c-danger-lighter)}.eui-chip--accent{--_bg-color: var(--eui-c-accent-lightest);--_color: var(--eui-c-neutral);--_border-color: transparent;--_border-outline-color: var(--eui-c-accent);--_close-hover-color: var(--eui-c-accent-lighter)}.eui-chip{background-color:var(--_bg-color)}.eui-chip .eui-label{color:var(--_color)}.eui-chip .eui-icon-svg:not(.eui-chip__close) svg{fill:var(--_color);color:var(--_color)}.eui-chip .eui-chip__close:not(.eui-chip--outline) .eui-icon-button__button:hover{background-color:var(--_close-hover-color)}.eui-chip--outline{background-color:var(--eui-c-white)}\n"] }]
76
+ ], template: "<div class=\"eui-chip-wrapper\">\n <div class=\"eui-chip__content-container\" #chipLabel>\n <ng-content></ng-content>\n </div>\n <eui-icon-button\n *ngIf=\"isChipRemovable\"\n class=\"eui-chip__close\"\n ariaLabel=\"Remove chip\"\n icon=\"close:outline\"\n euiRounded\n hasNoPadding\n (keydown.enter)=\"onRemove($event)\"\n (keydown.backspace)=\"onRemove($event)\"\n (buttonClick)=\"onRemove($event)\">\n </eui-icon-button>\n</div>\n", styles: [".eui-chip{--_color: var(--eui-chip-color, var(--eui-c-neutral));--_bg-color: var(--eui-chip-bg-color, var(--eui-c-neutral-bg));--_border-outline-color: var(--eui-chip-border-outline-color, var(--eui-c-neutral));--_close-hover-color: var(--eui-chip-close-hover-color, var(--eui-c-neutral-lightest))}.eui-chip{align-items:center;border-radius:var(--eui-br-max);display:inline-flex;position:relative;font:var(--eui-f);min-height:calc(var(--eui-s-m) / 16 * 30);padding:0 var(--eui-s-s)}.eui-chip .eui-chip-wrapper,.eui-chip .eui-chip__content-container{display:flex;align-items:center;gap:var(--eui-s-xs)}.eui-chip--outline{outline:var(--eui-bw-xs) solid var(--_border-outline-color);outline-offset:-1px}.eui-chip-group{align-items:center;display:inline-flex;flex-wrap:nowrap;position:relative}.eui-chip-group .eui-chip:first-child{border-bottom-right-radius:0;border-top-right-radius:0;margin-right:0}.eui-chip-group .eui-chip:last-child{border-bottom-left-radius:0;border-top-left-radius:0;margin-left:0}.eui-chip-group .eui-chip .eui-chip__content-container eui-icon-svg{margin-left:0;margin-right:0}.eui-chip--primary{--_bg-color: var(--eui-c-primary-lightest);--_color: var(--eui-c-primary-darker);--_border-color: transparent;--_border-outline-color: var(--eui-c-primary);--_close-hover-color: var(--eui-c-primary-lighter)}.eui-chip--secondary{--_bg-color: var(--eui-c-neutral-bg);--_color: var(--eui-c-neutral-darker);--_border-color: transparent;--_border-outline-color: var(--eui-c-neutral);--_close-hover-color: var(--eui-c-neutral-lightest)}.eui-chip--info{--_bg-color: var(--eui-c-info-lightest);--_color: var(--eui-c-info-darker);--_border-color: transparent;--_border-outline-color: var(--eui-c-info);--_close-hover-color: var(--eui-c-info-lighter)}.eui-chip--success{--_bg-color: var(--eui-c-success-lightest);--_color: var(--eui-c-success-darker);--_border-color: transparent;--_border-outline-color: var(--eui-c-success-dark);--_close-hover-color: var(--eui-c-success-lighter)}.eui-chip--warning{--_bg-color: var(--eui-c-warning-lightest);--_color: var(--eui-c-warning-darker);--_border-color: transparent;--_border-outline-color: var(--eui-c-warning);--_close-hover-color: var(--eui-c-warning-lighter)}.eui-chip--danger{--_bg-color: var(--eui-c-danger-lightest);--_color: var(--eui-c-danger-darker);--_border-color: transparent;--_border-outline-color: var(--eui-c-danger-dark);--_close-hover-color: var(--eui-c-danger-lighter)}.eui-chip--accent{--_bg-color: var(--eui-c-accent-lightest);--_color: var(--eui-c-neutral);--_border-color: transparent;--_border-outline-color: var(--eui-c-accent);--_close-hover-color: var(--eui-c-accent-lighter)}.eui-chip--filled.eui-chip--primary{--_bg-color: var(--eui-c-primary);--_color: var(--eui-c-primary-contrast);--_border-color: transparent;--_close-hover-color: var(--eui-c-primary-light)}.eui-chip--filled.eui-chip--secondary{--_bg-color: var(--eui-c-neutral-lightest);--_color: var(--eui-c-neutral-lightest-contrast);--_border-color: transparent;--_close-hover-color: var(--eui-c-neutral-bg)}.eui-chip--filled.eui-chip--info{--_bg-color: var(--eui-c-info);--_color: var(--eui-c-info-contrast);--_border-color: transparent;--_close-hover-color: var(--eui-c-info-light)}.eui-chip--filled.eui-chip--success{--_bg-color: var(--eui-c-success-dark);--_color: var(--eui-c-success-dark-contrast);--_border-color: transparent;--_close-hover-color: var(--eui-c-success)}.eui-chip--filled.eui-chip--warning{--_bg-color: var(--eui-c-warning);--_color: var(--eui-c-warning-contrast);--_border-color: transparent;--_close-hover-color: var(--eui-c-warning-light)}.eui-chip--filled.eui-chip--danger{--_bg-color: var(--eui-c-danger-dark);--_color: var(--eui-c-danger-dark-contrast);--_border-color: transparent;--_close-hover-color: var(--eui-c-danger)}.eui-chip--filled.eui-chip--accent{--_bg-color: var(--eui-c-accent-light);--_color: var(--eui-c-accent-contrast);--_border-color: transparent;--_close-hover-color: var(--eui-c-accent-lighter)}.eui-chip{background-color:var(--_bg-color);color:var(--_color)}.eui-chip .eui-icon-svg:not(.eui-chip__close) svg{fill:var(--_color);color:var(--_color)}.eui-chip .eui-chip__close:not(.eui-chip--outline) .eui-icon-button__button:hover{background-color:var(--_close-hover-color)}.eui-chip--outline{background-color:var(--eui-c-white)}\n"] }]
77
77
  }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.BaseStatesDirective }], propDecorators: { cssClasses: [{
78
78
  type: HostBinding,
79
79
  args: ['class']
@@ -104,6 +104,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImpor
104
104
  }], isSquared: [{
105
105
  type: Input,
106
106
  args: [{ transform: booleanAttribute }]
107
+ }], isFilled: [{
108
+ type: Input,
109
+ args: [{ transform: booleanAttribute }]
107
110
  }], remove: [{
108
111
  type: Output
109
112
  }], euiIcons: [{
@@ -113,4 +116,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImpor
113
116
  type: ViewChild,
114
117
  args: ['chipLabel']
115
118
  }] } });
116
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZXVpLWNoaXAuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vZXVpLWNoaXAvZXVpLWNoaXAuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vZXVpLWNoaXAvZXVpLWNoaXAuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNILFNBQVMsRUFDVCxXQUFXLEVBQ1gsS0FBSyxFQUNMLHVCQUF1QixFQUN2QixpQkFBaUIsRUFDakIsVUFBVSxFQUNWLGVBQWUsRUFHZixNQUFNLEVBQ04sWUFBWSxFQUNaLFNBQVMsRUFFVCxnQkFBZ0IsR0FDbkIsTUFBTSxlQUFlLENBQUM7QUFFdkIsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sd0JBQXdCLENBQUM7QUFDN0QsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sMEJBQTBCLENBQUM7Ozs7O0FBNkIvRCxNQUFNLE9BQU8sZ0JBQWdCO0lBQ3pCLElBQ0ksVUFBVTtRQUNWLE9BQU87WUFDSCxJQUFJLENBQUMsbUJBQW1CLENBQUMsYUFBYSxDQUFDLFVBQVUsQ0FBQztZQUNsRCxJQUFJLENBQUMsZUFBZSxDQUFDLENBQUMsQ0FBQyxxQkFBcUIsQ0FBQyxDQUFDLENBQUMsRUFBRTtTQUNwRDthQUNJLElBQUksQ0FBQyxHQUFHLENBQUM7YUFDVCxJQUFJLEVBQUUsQ0FBQztJQUNoQixDQUFDO0lBZ0NELFlBQ1ksV0FBdUIsRUFDeEIsbUJBQXdDO1FBRHZDLGdCQUFXLEdBQVgsV0FBVyxDQUFZO1FBQ3hCLHdCQUFtQixHQUFuQixtQkFBbUIsQ0FBcUI7UUFoQ3pCLFNBQUksR0FBRyxRQUFRLENBQUM7UUFDRCxjQUFTLEdBQUcsY0FBYyxDQUFDO1FBSXBFLFlBQU8sR0FBRyxVQUFVLENBQUM7UUFFWixrQkFBYSxHQUFXLElBQUksQ0FBQztRQUd0QyxnQ0FBZ0M7UUFDaEMsbUhBQW1IO1FBQ25ILDhEQUE4RDtRQUNyRCxTQUFJLEdBQVE7WUFDakIsRUFBRSxFQUFFLE1BQU0sQ0FBQyxVQUFVLEVBQUU7WUFDdkIsT0FBTyxFQUFFO2dCQUNMLEtBQUssRUFBRSxtQkFBbUI7Z0JBQzFCLGdCQUFnQixFQUFFLElBQUk7Z0JBQ3RCLFFBQVEsRUFBRSxPQUFPO2FBQ3BCO1NBQ0osQ0FBQztRQUVzQyxvQkFBZSxHQUFHLEtBQUssQ0FBQztRQUN4QixjQUFTLEdBQUcsS0FBSyxDQUFDO1FBRWhELFdBQU0sR0FBRyxJQUFJLFlBQVksRUFBb0YsQ0FBQztJQVN4SCxDQUFDO0lBRUQsa0JBQWtCO1FBQ2QsSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsRUFBRSxJQUFJLElBQUksQ0FBQyxFQUFFLEVBQUUsQ0FBQztZQUMzQixJQUFJLENBQUMsSUFBSSxHQUFHLE1BQU0sQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLElBQUksRUFBRSxFQUFFLEVBQUUsRUFBRSxJQUFJLENBQUMsRUFBRSxFQUFFLENBQUMsQ0FBQztRQUMxRCxDQUFDO1FBRUQsSUFBSSxJQUFJLENBQUMsV0FBVyxDQUFDLGFBQWEsQ0FBQyxhQUFhLEVBQUUsU0FBUyxDQUFDLFFBQVEsQ0FBQywrQkFBK0IsQ0FBQyxFQUFFLENBQUM7WUFDcEcsSUFBSSxDQUFDLElBQUksR0FBRyxVQUFVLENBQUE7UUFDMUIsQ0FBQztJQUNMLENBQUM7SUFFTSxRQUFRLENBQUMsS0FBYTtRQUN6QixJQUFJLEtBQUssWUFBWSxhQUFhLElBQUssS0FBdUIsQ0FBQyxJQUFJLEtBQUssV0FBVyxFQUFFLENBQUM7WUFDbEYsSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsRUFBRSxJQUFJLEVBQUUsSUFBSSxDQUFDLElBQUksRUFBRSxLQUFLLEVBQUUsQ0FBQyxDQUFDO1FBQ2pELENBQUM7YUFBTSxDQUFDO1lBQ0osSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO1FBQ2hDLENBQUM7SUFDTCxDQUFDOzhHQS9EUSxnQkFBZ0I7a0dBQWhCLGdCQUFnQiw0UEFpQ0wsZ0JBQWdCLHlDQUNoQixnQkFBZ0IsK1BBSUYsbUJBQW1CLDZkQ3JGekQsMGlCQWlCQTs7MkZEOEJhLGdCQUFnQjtrQkF6QjVCLFNBQVM7K0JBRUksc0NBQXNDLG1CQUUvQix1QkFBdUIsQ0FBQyxNQUFNLGlCQUNoQyxpQkFBaUIsQ0FBQyxJQUFJLGtCQUNyQjt3QkFDWjs0QkFDSSxTQUFTLEVBQUUsbUJBQW1COzRCQUM5QixNQUFNLEVBQUU7Z0NBQ0osWUFBWTtnQ0FDWixjQUFjO2dDQUNkLFlBQVk7Z0NBQ1osU0FBUztnQ0FDVCxZQUFZO2dDQUNaLFdBQVc7Z0NBQ1gsV0FBVztnQ0FDWCxZQUFZO2dDQUVaLFlBQVk7Z0NBQ1osYUFBYTs2QkFDaEI7eUJBQ0o7cUJBQ0o7aUhBSUcsVUFBVTtzQkFEYixXQUFXO3VCQUFDLE9BQU87Z0JBVU0sSUFBSTtzQkFBN0IsV0FBVzt1QkFBQyxXQUFXO2dCQUNpQixTQUFTO3NCQUFqRCxLQUFLOztzQkFBSSxXQUFXO3VCQUFDLGlCQUFpQjtnQkFJdkMsT0FBTztzQkFGTixXQUFXO3VCQUFDLGVBQWU7O3NCQUMzQixLQUFLO2dCQUdHLGFBQWE7c0JBQXJCLEtBQUs7Z0JBQ0csY0FBYztzQkFBdEIsS0FBSztnQkFDRyxFQUFFO3NCQUFWLEtBQUs7Z0JBSUcsSUFBSTtzQkFBWixLQUFLO2dCQVNrQyxlQUFlO3NCQUF0RCxLQUFLO3VCQUFDLEVBQUUsU0FBUyxFQUFFLGdCQUFnQixFQUFFO2dCQUNFLFNBQVM7c0JBQWhELEtBQUs7dUJBQUMsRUFBRSxTQUFTLEVBQUUsZ0JBQWdCLEVBQUU7Z0JBRTVCLE1BQU07c0JBQWYsTUFBTTtnQkFFaUQsUUFBUTtzQkFBL0QsZUFBZTt1QkFBQyxVQUFVLENBQUMsR0FBRyxFQUFFLENBQUMsbUJBQW1CLENBQUM7Z0JBQzlCLFNBQVM7c0JBQWhDLFNBQVM7dUJBQUMsV0FBVyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gICAgQ29tcG9uZW50LFxuICAgIEhvc3RCaW5kaW5nLFxuICAgIElucHV0LFxuICAgIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICAgIFZpZXdFbmNhcHN1bGF0aW9uLFxuICAgIGZvcndhcmRSZWYsXG4gICAgQ29udGVudENoaWxkcmVuLFxuICAgIFF1ZXJ5TGlzdCxcbiAgICBBZnRlckNvbnRlbnRJbml0LFxuICAgIE91dHB1dCxcbiAgICBFdmVudEVtaXR0ZXIsXG4gICAgVmlld0NoaWxkLFxuICAgIEVsZW1lbnRSZWYsXG4gICAgYm9vbGVhbkF0dHJpYnV0ZSxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbmltcG9ydCB7IEJhc2VTdGF0ZXNEaXJlY3RpdmUgfSBmcm9tICdAZXVpL2NvbXBvbmVudHMvc2hhcmVkJztcbmltcG9ydCB7IEV1aUljb25TdmdDb21wb25lbnQgfSBmcm9tICdAZXVpL2NvbXBvbmVudHMvZXVpLWljb24nO1xuXG5pbXBvcnQgeyBFdWlDaGlwIH0gZnJvbSAnLi9tb2RlbHMvZXVpLWNoaXAubW9kZWwnO1xuXG5AQ29tcG9uZW50KHtcbiAgICB0ZW1wbGF0ZVVybDogJy4vZXVpLWNoaXAuY29tcG9uZW50Lmh0bWwnLFxuICAgIHNlbGVjdG9yOiAnZXVpLWNoaXAsIHNwYW5bZXVpQ2hpcF0sIGxpW2V1aUNoaXBdJyxcbiAgICBzdHlsZVVybHM6IFsnLi9zdHlsZXMvX2luZGV4LnNjc3MnXSxcbiAgICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxuICAgIGhvc3REaXJlY3RpdmVzOiBbXG4gICAgICAgIHtcbiAgICAgICAgICAgIGRpcmVjdGl2ZTogQmFzZVN0YXRlc0RpcmVjdGl2ZSxcbiAgICAgICAgICAgIGlucHV0czogW1xuICAgICAgICAgICAgICAgICdldWlQcmltYXJ5JyxcbiAgICAgICAgICAgICAgICAnZXVpU2Vjb25kYXJ5JyxcbiAgICAgICAgICAgICAgICAnZXVpU3VjY2VzcycsXG4gICAgICAgICAgICAgICAgJ2V1aUluZm8nLFxuICAgICAgICAgICAgICAgICdldWlXYXJuaW5nJyxcbiAgICAgICAgICAgICAgICAnZXVpRGFuZ2VyJyxcbiAgICAgICAgICAgICAgICAnZXVpQWNjZW50JyxcbiAgICAgICAgICAgICAgICAnZXVpVmFyaWFudCcsXG5cbiAgICAgICAgICAgICAgICAnZXVpT3V0bGluZScsXG4gICAgICAgICAgICAgICAgJ2V1aURpc2FibGVkJyxcbiAgICAgICAgICAgIF0sXG4gICAgICAgIH0sXG4gICAgXSxcbn0pXG5leHBvcnQgY2xhc3MgRXVpQ2hpcENvbXBvbmVudCBpbXBsZW1lbnRzIEFmdGVyQ29udGVudEluaXQge1xuICAgIEBIb3N0QmluZGluZygnY2xhc3MnKVxuICAgIGdldCBjc3NDbGFzc2VzKCk6IHN0cmluZyB7XG4gICAgICAgIHJldHVybiBbXG4gICAgICAgICAgICB0aGlzLmJhc2VTdGF0ZXNEaXJlY3RpdmUuZ2V0Q3NzQ2xhc3NlcygnZXVpLWNoaXAnKSxcbiAgICAgICAgICAgIHRoaXMuaXNDaGlwUmVtb3ZhYmxlID8gJ2V1aS1jaGlwLS1yZW1vdmFibGUnIDogJycsXG4gICAgICAgIF1cbiAgICAgICAgICAgIC5qb2luKCcgJylcbiAgICAgICAgICAgIC50cmltKCk7XG4gICAgfVxuXG4gICAgQEhvc3RCaW5kaW5nKCdhdHRyLnJvbGUnKSByb2xlID0gJ3N0YXR1cyc7XG4gICAgQElucHV0KCkgQEhvc3RCaW5kaW5nKCdhdHRyLmFyaWEtbGFiZWwnKSBhcmlhTGFiZWwgPSAnQ2hpcCBjb250ZW50JztcblxuICAgIEBIb3N0QmluZGluZygnYXR0ci5kYXRhLWUyZScpXG4gICAgQElucHV0KClcbiAgICBlMmVBdHRyID0gJ2V1aS1jaGlwJztcblxuICAgIEBJbnB1dCgpIGV1aUludGVybmFsSWQ6IHN0cmluZyA9IG51bGw7XG4gICAgQElucHV0KCkgdG9vbHRpcE1lc3NhZ2U6IHN0cmluZztcbiAgICBASW5wdXQoKSBpZDogc3RyaW5nIHwgbnVtYmVyO1xuICAgIC8vIFRPRE86IHR5cGUgc2hvdWxkIGJlIHNwZWNpZmljXG4gICAgLy8gVE9ETzogZmluZCB0aGUgY29ycmVjdCB0eXBlIG9yIHR1cm4gaW50byBhIGdlbmVyaWMsIGh0dHBzOi8vd3d3LnR5cGVzY3JpcHRsYW5nLm9yZy9kb2NzL2hhbmRib29rLzIvZ2VuZXJpY3MuaHRtbFxuICAgIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBAdHlwZXNjcmlwdC1lc2xpbnQvbm8tZXhwbGljaXQtYW55XG4gICAgQElucHV0KCkgZGF0YTogYW55ID0ge1xuICAgICAgICBpZDogY3J5cHRvLnJhbmRvbVVVSUQoKSxcbiAgICAgICAgdG9vbHRpcDoge1xuICAgICAgICAgICAgY29sb3I6ICdldWlUb29sdGlwUHJpbWFyeScsXG4gICAgICAgICAgICBjb250ZW50QWxpZ25tZW50OiBudWxsLFxuICAgICAgICAgICAgcG9zaXRpb246ICdhYm92ZScsXG4gICAgICAgIH0sXG4gICAgfTtcblxuICAgIEBJbnB1dCh7IHRyYW5zZm9ybTogYm9vbGVhbkF0dHJpYnV0ZSB9KSBpc0NoaXBSZW1vdmFibGUgPSBmYWxzZTtcbiAgICBASW5wdXQoeyB0cmFuc2Zvcm06IGJvb2xlYW5BdHRyaWJ1dGUgfSkgaXNTcXVhcmVkID0gZmFsc2U7XG5cbiAgICBAT3V0cHV0KCkgcmVtb3ZlID0gbmV3IEV2ZW50RW1pdHRlcjxFdWlDaGlwQ29tcG9uZW50IHwgRXVpQ2hpcCB8IHsgY2hpcDogRXVpQ2hpcENvbXBvbmVudCB8IEV1aUNoaXA7IGV2ZW50PzogRXZlbnQgfT4oKTtcblxuICAgIEBDb250ZW50Q2hpbGRyZW4oZm9yd2FyZFJlZigoKSA9PiBFdWlJY29uU3ZnQ29tcG9uZW50KSkgZXVpSWNvbnM6IFF1ZXJ5TGlzdDxFdWlJY29uU3ZnQ29tcG9uZW50PjtcbiAgICBAVmlld0NoaWxkKCdjaGlwTGFiZWwnKSBjaGlwTGFiZWw6IEVsZW1lbnRSZWY8SFRNTElucHV0RWxlbWVudD47XG5cbiAgICBjb25zdHJ1Y3RvcihcbiAgICAgICAgcHJpdmF0ZSBfZWxlbWVudFJlZjogRWxlbWVudFJlZixcbiAgICAgICAgcHVibGljIGJhc2VTdGF0ZXNEaXJlY3RpdmU6IEJhc2VTdGF0ZXNEaXJlY3RpdmUsXG4gICAgKSB7XG4gICAgfVxuXG4gICAgbmdBZnRlckNvbnRlbnRJbml0KCk6IHZvaWQge1xuICAgICAgICBpZiAoIXRoaXMuZGF0YS5pZCAmJiB0aGlzLmlkKSB7XG4gICAgICAgICAgICB0aGlzLmRhdGEgPSBPYmplY3QuYXNzaWduKHRoaXMuZGF0YSwgeyBpZDogdGhpcy5pZCB9KTtcbiAgICAgICAgfVxuXG4gICAgICAgIGlmICh0aGlzLl9lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQucGFyZW50RWxlbWVudD8uY2xhc3NMaXN0LmNvbnRhaW5zKCdldWktY2hpcC1saXN0X19jaGlwLWNvbnRhaW5lcicpKSB7XG4gICAgICAgICAgICB0aGlzLnJvbGUgPSAnbGlzdGl0ZW0nXG4gICAgICAgIH1cbiAgICB9XG5cbiAgICBwdWJsaWMgb25SZW1vdmUoZXZlbnQ/OiBFdmVudCk6IHZvaWQge1xuICAgICAgICBpZiAoZXZlbnQgaW5zdGFuY2VvZiBLZXlib2FyZEV2ZW50ICYmIChldmVudCBhcyBLZXlib2FyZEV2ZW50KS5jb2RlID09PSAnQmFja3NwYWNlJykge1xuICAgICAgICAgICAgdGhpcy5yZW1vdmUuZW1pdCh7IGNoaXA6IHRoaXMuZGF0YSwgZXZlbnQgfSk7XG4gICAgICAgIH0gZWxzZSB7XG4gICAgICAgICAgICB0aGlzLnJlbW92ZS5lbWl0KHRoaXMuZGF0YSk7XG4gICAgICAgIH1cbiAgICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwiZXVpLWNoaXAtd3JhcHBlclwiPlxuICAgIDxkaXYgY2xhc3M9XCJldWktY2hpcF9fY29udGVudC1jb250YWluZXJcIiAjY2hpcExhYmVsPlxuICAgICAgICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG4gICAgPC9kaXY+XG4gICAgPGV1aS1pY29uLWJ1dHRvblxuICAgICAgICAqbmdJZj1cImlzQ2hpcFJlbW92YWJsZVwiXG4gICAgICAgIGNsYXNzPVwiZXVpLWNoaXBfX2Nsb3NlXCJcbiAgICAgICAgYXJpYUxhYmVsPVwiUmVtb3ZlIGNoaXBcIlxuICAgICAgICBpY29uPVwiY2xvc2U6b3V0bGluZVwiXG4gICAgICAgIGZpbGxDb2xvcj1cIm5ldXRyYWwtbGlnaHRcIlxuICAgICAgICBldWlSb3VuZGVkXG4gICAgICAgIGhhc05vUGFkZGluZ1xuICAgICAgICAoa2V5ZG93bi5lbnRlcik9XCJvblJlbW92ZSgkZXZlbnQpXCJcbiAgICAgICAgKGtleWRvd24uYmFja3NwYWNlKT1cIm9uUmVtb3ZlKCRldmVudClcIlxuICAgICAgICAoYnV0dG9uQ2xpY2spPVwib25SZW1vdmUoJGV2ZW50KVwiPlxuICAgIDwvZXVpLWljb24tYnV0dG9uPlxuPC9kaXY+XG4iXX0=
119
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZXVpLWNoaXAuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vZXVpLWNoaXAvZXVpLWNoaXAuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vZXVpLWNoaXAvZXVpLWNoaXAuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNILFNBQVMsRUFDVCxXQUFXLEVBQ1gsS0FBSyxFQUNMLHVCQUF1QixFQUN2QixpQkFBaUIsRUFDakIsVUFBVSxFQUNWLGVBQWUsRUFHZixNQUFNLEVBQ04sWUFBWSxFQUNaLFNBQVMsRUFFVCxnQkFBZ0IsR0FDbkIsTUFBTSxlQUFlLENBQUM7QUFFdkIsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sd0JBQXdCLENBQUM7QUFDN0QsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sMEJBQTBCLENBQUM7Ozs7O0FBNkIvRCxNQUFNLE9BQU8sZ0JBQWdCO0lBQ3pCLElBQ0ksVUFBVTtRQUNWLE9BQU87WUFDSCxJQUFJLENBQUMsbUJBQW1CLENBQUMsYUFBYSxDQUFDLFVBQVUsQ0FBQztZQUNsRCxJQUFJLENBQUMsZUFBZSxDQUFDLENBQUMsQ0FBQyxxQkFBcUIsQ0FBQyxDQUFDLENBQUMsRUFBRTtZQUNqRCxJQUFJLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQyxrQkFBa0IsQ0FBQSxDQUFDLENBQUMsRUFBRTtTQUN6QyxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQyxJQUFJLEVBQUUsQ0FBQztJQUN2QixDQUFDO0lBaUNELFlBQ1ksV0FBdUIsRUFDeEIsbUJBQXdDO1FBRHZDLGdCQUFXLEdBQVgsV0FBVyxDQUFZO1FBQ3hCLHdCQUFtQixHQUFuQixtQkFBbUIsQ0FBcUI7UUFqQ3pCLFNBQUksR0FBRyxRQUFRLENBQUM7UUFDRCxjQUFTLEdBQUcsY0FBYyxDQUFDO1FBSXBFLFlBQU8sR0FBRyxVQUFVLENBQUM7UUFFWixrQkFBYSxHQUFXLElBQUksQ0FBQztRQUd0QyxnQ0FBZ0M7UUFDaEMsbUhBQW1IO1FBQ25ILDhEQUE4RDtRQUNyRCxTQUFJLEdBQVE7WUFDakIsRUFBRSxFQUFFLE1BQU0sQ0FBQyxVQUFVLEVBQUU7WUFDdkIsT0FBTyxFQUFFO2dCQUNMLEtBQUssRUFBRSxtQkFBbUI7Z0JBQzFCLGdCQUFnQixFQUFFLElBQUk7Z0JBQ3RCLFFBQVEsRUFBRSxPQUFPO2FBQ3BCO1NBQ0osQ0FBQztRQUVzQyxvQkFBZSxHQUFHLEtBQUssQ0FBQztRQUN4QixjQUFTLEdBQUcsS0FBSyxDQUFDO1FBQ2xCLGFBQVEsR0FBRyxLQUFLLENBQUM7UUFFL0MsV0FBTSxHQUFHLElBQUksWUFBWSxFQUFvRixDQUFDO0lBU3hILENBQUM7SUFFRCxrQkFBa0I7UUFDZCxJQUFJLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxFQUFFLElBQUksSUFBSSxDQUFDLEVBQUUsRUFBRSxDQUFDO1lBQzNCLElBQUksQ0FBQyxJQUFJLEdBQUcsTUFBTSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsSUFBSSxFQUFFLEVBQUUsRUFBRSxFQUFFLElBQUksQ0FBQyxFQUFFLEVBQUUsQ0FBQyxDQUFDO1FBQzFELENBQUM7UUFFRCxJQUFJLElBQUksQ0FBQyxXQUFXLENBQUMsYUFBYSxDQUFDLGFBQWEsRUFBRSxTQUFTLENBQUMsUUFBUSxDQUFDLCtCQUErQixDQUFDLEVBQUUsQ0FBQztZQUNwRyxJQUFJLENBQUMsSUFBSSxHQUFHLFVBQVUsQ0FBQTtRQUMxQixDQUFDO0lBQ0wsQ0FBQztJQUVNLFFBQVEsQ0FBQyxLQUFhO1FBQ3pCLElBQUksS0FBSyxZQUFZLGFBQWEsSUFBSyxLQUF1QixDQUFDLElBQUksS0FBSyxXQUFXLEVBQUUsQ0FBQztZQUNsRixJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxFQUFFLElBQUksRUFBRSxJQUFJLENBQUMsSUFBSSxFQUFFLEtBQUssRUFBRSxDQUFDLENBQUM7UUFDakQsQ0FBQzthQUFNLENBQUM7WUFDSixJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDaEMsQ0FBQztJQUNMLENBQUM7OEdBL0RRLGdCQUFnQjtrR0FBaEIsZ0JBQWdCLDRQQWdDTCxnQkFBZ0IseUNBQ2hCLGdCQUFnQixzQ0FDaEIsZ0JBQWdCLCtQQUlGLG1CQUFtQiw2ZENyRnpELHFnQkFnQkE7OzJGRCtCYSxnQkFBZ0I7a0JBekI1QixTQUFTOytCQUVJLHNDQUFzQyxtQkFFL0IsdUJBQXVCLENBQUMsTUFBTSxpQkFDaEMsaUJBQWlCLENBQUMsSUFBSSxrQkFDckI7d0JBQ1o7NEJBQ0ksU0FBUyxFQUFFLG1CQUFtQjs0QkFDOUIsTUFBTSxFQUFFO2dDQUNKLFlBQVk7Z0NBQ1osY0FBYztnQ0FDZCxZQUFZO2dDQUNaLFNBQVM7Z0NBQ1QsWUFBWTtnQ0FDWixXQUFXO2dDQUNYLFdBQVc7Z0NBQ1gsWUFBWTtnQ0FFWixZQUFZO2dDQUNaLGFBQWE7NkJBQ2hCO3lCQUNKO3FCQUNKO2lIQUlHLFVBQVU7c0JBRGIsV0FBVzt1QkFBQyxPQUFPO2dCQVNNLElBQUk7c0JBQTdCLFdBQVc7dUJBQUMsV0FBVztnQkFDaUIsU0FBUztzQkFBakQsS0FBSzs7c0JBQUksV0FBVzt1QkFBQyxpQkFBaUI7Z0JBSXZDLE9BQU87c0JBRk4sV0FBVzt1QkFBQyxlQUFlOztzQkFDM0IsS0FBSztnQkFHRyxhQUFhO3NCQUFyQixLQUFLO2dCQUNHLGNBQWM7c0JBQXRCLEtBQUs7Z0JBQ0csRUFBRTtzQkFBVixLQUFLO2dCQUlHLElBQUk7c0JBQVosS0FBSztnQkFTa0MsZUFBZTtzQkFBdEQsS0FBSzt1QkFBQyxFQUFFLFNBQVMsRUFBRSxnQkFBZ0IsRUFBRTtnQkFDRSxTQUFTO3NCQUFoRCxLQUFLO3VCQUFDLEVBQUUsU0FBUyxFQUFFLGdCQUFnQixFQUFFO2dCQUNFLFFBQVE7c0JBQS9DLEtBQUs7dUJBQUMsRUFBRSxTQUFTLEVBQUUsZ0JBQWdCLEVBQUU7Z0JBRTVCLE1BQU07c0JBQWYsTUFBTTtnQkFFaUQsUUFBUTtzQkFBL0QsZUFBZTt1QkFBQyxVQUFVLENBQUMsR0FBRyxFQUFFLENBQUMsbUJBQW1CLENBQUM7Z0JBQzlCLFNBQVM7c0JBQWhDLFNBQVM7dUJBQUMsV0FBVyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gICAgQ29tcG9uZW50LFxuICAgIEhvc3RCaW5kaW5nLFxuICAgIElucHV0LFxuICAgIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICAgIFZpZXdFbmNhcHN1bGF0aW9uLFxuICAgIGZvcndhcmRSZWYsXG4gICAgQ29udGVudENoaWxkcmVuLFxuICAgIFF1ZXJ5TGlzdCxcbiAgICBBZnRlckNvbnRlbnRJbml0LFxuICAgIE91dHB1dCxcbiAgICBFdmVudEVtaXR0ZXIsXG4gICAgVmlld0NoaWxkLFxuICAgIEVsZW1lbnRSZWYsXG4gICAgYm9vbGVhbkF0dHJpYnV0ZSxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbmltcG9ydCB7IEJhc2VTdGF0ZXNEaXJlY3RpdmUgfSBmcm9tICdAZXVpL2NvbXBvbmVudHMvc2hhcmVkJztcbmltcG9ydCB7IEV1aUljb25TdmdDb21wb25lbnQgfSBmcm9tICdAZXVpL2NvbXBvbmVudHMvZXVpLWljb24nO1xuXG5pbXBvcnQgeyBFdWlDaGlwIH0gZnJvbSAnLi9tb2RlbHMvZXVpLWNoaXAubW9kZWwnO1xuXG5AQ29tcG9uZW50KHtcbiAgICB0ZW1wbGF0ZVVybDogJy4vZXVpLWNoaXAuY29tcG9uZW50Lmh0bWwnLFxuICAgIHNlbGVjdG9yOiAnZXVpLWNoaXAsIHNwYW5bZXVpQ2hpcF0sIGxpW2V1aUNoaXBdJyxcbiAgICBzdHlsZVVybHM6IFsnLi9zdHlsZXMvX2luZGV4LnNjc3MnXSxcbiAgICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxuICAgIGhvc3REaXJlY3RpdmVzOiBbXG4gICAgICAgIHtcbiAgICAgICAgICAgIGRpcmVjdGl2ZTogQmFzZVN0YXRlc0RpcmVjdGl2ZSxcbiAgICAgICAgICAgIGlucHV0czogW1xuICAgICAgICAgICAgICAgICdldWlQcmltYXJ5JyxcbiAgICAgICAgICAgICAgICAnZXVpU2Vjb25kYXJ5JyxcbiAgICAgICAgICAgICAgICAnZXVpU3VjY2VzcycsXG4gICAgICAgICAgICAgICAgJ2V1aUluZm8nLFxuICAgICAgICAgICAgICAgICdldWlXYXJuaW5nJyxcbiAgICAgICAgICAgICAgICAnZXVpRGFuZ2VyJyxcbiAgICAgICAgICAgICAgICAnZXVpQWNjZW50JyxcbiAgICAgICAgICAgICAgICAnZXVpVmFyaWFudCcsXG5cbiAgICAgICAgICAgICAgICAnZXVpT3V0bGluZScsXG4gICAgICAgICAgICAgICAgJ2V1aURpc2FibGVkJyxcbiAgICAgICAgICAgIF0sXG4gICAgICAgIH0sXG4gICAgXSxcbn0pXG5leHBvcnQgY2xhc3MgRXVpQ2hpcENvbXBvbmVudCBpbXBsZW1lbnRzIEFmdGVyQ29udGVudEluaXQge1xuICAgIEBIb3N0QmluZGluZygnY2xhc3MnKVxuICAgIGdldCBjc3NDbGFzc2VzKCk6IHN0cmluZyB7XG4gICAgICAgIHJldHVybiBbXG4gICAgICAgICAgICB0aGlzLmJhc2VTdGF0ZXNEaXJlY3RpdmUuZ2V0Q3NzQ2xhc3NlcygnZXVpLWNoaXAnKSxcbiAgICAgICAgICAgIHRoaXMuaXNDaGlwUmVtb3ZhYmxlID8gJ2V1aS1jaGlwLS1yZW1vdmFibGUnIDogJycsXG4gICAgICAgICAgICB0aGlzLmlzRmlsbGVkID8gJ2V1aS1jaGlwLS1maWxsZWQnOiAnJyxcbiAgICAgICAgXS5qb2luKCcgJykudHJpbSgpO1xuICAgIH1cblxuICAgIEBIb3N0QmluZGluZygnYXR0ci5yb2xlJykgcm9sZSA9ICdzdGF0dXMnO1xuICAgIEBJbnB1dCgpIEBIb3N0QmluZGluZygnYXR0ci5hcmlhLWxhYmVsJykgYXJpYUxhYmVsID0gJ0NoaXAgY29udGVudCc7XG5cbiAgICBASG9zdEJpbmRpbmcoJ2F0dHIuZGF0YS1lMmUnKVxuICAgIEBJbnB1dCgpXG4gICAgZTJlQXR0ciA9ICdldWktY2hpcCc7XG5cbiAgICBASW5wdXQoKSBldWlJbnRlcm5hbElkOiBzdHJpbmcgPSBudWxsO1xuICAgIEBJbnB1dCgpIHRvb2x0aXBNZXNzYWdlOiBzdHJpbmc7XG4gICAgQElucHV0KCkgaWQ6IHN0cmluZyB8IG51bWJlcjtcbiAgICAvLyBUT0RPOiB0eXBlIHNob3VsZCBiZSBzcGVjaWZpY1xuICAgIC8vIFRPRE86IGZpbmQgdGhlIGNvcnJlY3QgdHlwZSBvciB0dXJuIGludG8gYSBnZW5lcmljLCBodHRwczovL3d3dy50eXBlc2NyaXB0bGFuZy5vcmcvZG9jcy9oYW5kYm9vay8yL2dlbmVyaWNzLmh0bWxcbiAgICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgQHR5cGVzY3JpcHQtZXNsaW50L25vLWV4cGxpY2l0LWFueVxuICAgIEBJbnB1dCgpIGRhdGE6IGFueSA9IHtcbiAgICAgICAgaWQ6IGNyeXB0by5yYW5kb21VVUlEKCksXG4gICAgICAgIHRvb2x0aXA6IHtcbiAgICAgICAgICAgIGNvbG9yOiAnZXVpVG9vbHRpcFByaW1hcnknLFxuICAgICAgICAgICAgY29udGVudEFsaWdubWVudDogbnVsbCxcbiAgICAgICAgICAgIHBvc2l0aW9uOiAnYWJvdmUnLFxuICAgICAgICB9LFxuICAgIH07XG5cbiAgICBASW5wdXQoeyB0cmFuc2Zvcm06IGJvb2xlYW5BdHRyaWJ1dGUgfSkgaXNDaGlwUmVtb3ZhYmxlID0gZmFsc2U7XG4gICAgQElucHV0KHsgdHJhbnNmb3JtOiBib29sZWFuQXR0cmlidXRlIH0pIGlzU3F1YXJlZCA9IGZhbHNlO1xuICAgIEBJbnB1dCh7IHRyYW5zZm9ybTogYm9vbGVhbkF0dHJpYnV0ZSB9KSBpc0ZpbGxlZCA9IGZhbHNlO1xuXG4gICAgQE91dHB1dCgpIHJlbW92ZSA9IG5ldyBFdmVudEVtaXR0ZXI8RXVpQ2hpcENvbXBvbmVudCB8IEV1aUNoaXAgfCB7IGNoaXA6IEV1aUNoaXBDb21wb25lbnQgfCBFdWlDaGlwOyBldmVudD86IEV2ZW50IH0+KCk7XG5cbiAgICBAQ29udGVudENoaWxkcmVuKGZvcndhcmRSZWYoKCkgPT4gRXVpSWNvblN2Z0NvbXBvbmVudCkpIGV1aUljb25zOiBRdWVyeUxpc3Q8RXVpSWNvblN2Z0NvbXBvbmVudD47XG4gICAgQFZpZXdDaGlsZCgnY2hpcExhYmVsJykgY2hpcExhYmVsOiBFbGVtZW50UmVmPEhUTUxJbnB1dEVsZW1lbnQ+O1xuXG4gICAgY29uc3RydWN0b3IoXG4gICAgICAgIHByaXZhdGUgX2VsZW1lbnRSZWY6IEVsZW1lbnRSZWYsXG4gICAgICAgIHB1YmxpYyBiYXNlU3RhdGVzRGlyZWN0aXZlOiBCYXNlU3RhdGVzRGlyZWN0aXZlLFxuICAgICkge1xuICAgIH1cblxuICAgIG5nQWZ0ZXJDb250ZW50SW5pdCgpOiB2b2lkIHtcbiAgICAgICAgaWYgKCF0aGlzLmRhdGEuaWQgJiYgdGhpcy5pZCkge1xuICAgICAgICAgICAgdGhpcy5kYXRhID0gT2JqZWN0LmFzc2lnbih0aGlzLmRhdGEsIHsgaWQ6IHRoaXMuaWQgfSk7XG4gICAgICAgIH1cblxuICAgICAgICBpZiAodGhpcy5fZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50LnBhcmVudEVsZW1lbnQ/LmNsYXNzTGlzdC5jb250YWlucygnZXVpLWNoaXAtbGlzdF9fY2hpcC1jb250YWluZXInKSkge1xuICAgICAgICAgICAgdGhpcy5yb2xlID0gJ2xpc3RpdGVtJ1xuICAgICAgICB9XG4gICAgfVxuXG4gICAgcHVibGljIG9uUmVtb3ZlKGV2ZW50PzogRXZlbnQpOiB2b2lkIHtcbiAgICAgICAgaWYgKGV2ZW50IGluc3RhbmNlb2YgS2V5Ym9hcmRFdmVudCAmJiAoZXZlbnQgYXMgS2V5Ym9hcmRFdmVudCkuY29kZSA9PT0gJ0JhY2tzcGFjZScpIHtcbiAgICAgICAgICAgIHRoaXMucmVtb3ZlLmVtaXQoeyBjaGlwOiB0aGlzLmRhdGEsIGV2ZW50IH0pO1xuICAgICAgICB9IGVsc2Uge1xuICAgICAgICAgICAgdGhpcy5yZW1vdmUuZW1pdCh0aGlzLmRhdGEpO1xuICAgICAgICB9XG4gICAgfVxufVxuIiwiPGRpdiBjbGFzcz1cImV1aS1jaGlwLXdyYXBwZXJcIj5cbiAgICA8ZGl2IGNsYXNzPVwiZXVpLWNoaXBfX2NvbnRlbnQtY29udGFpbmVyXCIgI2NoaXBMYWJlbD5cbiAgICAgICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuICAgIDwvZGl2PlxuICAgIDxldWktaWNvbi1idXR0b25cbiAgICAgICAgKm5nSWY9XCJpc0NoaXBSZW1vdmFibGVcIlxuICAgICAgICBjbGFzcz1cImV1aS1jaGlwX19jbG9zZVwiXG4gICAgICAgIGFyaWFMYWJlbD1cIlJlbW92ZSBjaGlwXCJcbiAgICAgICAgaWNvbj1cImNsb3NlOm91dGxpbmVcIlxuICAgICAgICBldWlSb3VuZGVkXG4gICAgICAgIGhhc05vUGFkZGluZ1xuICAgICAgICAoa2V5ZG93bi5lbnRlcik9XCJvblJlbW92ZSgkZXZlbnQpXCJcbiAgICAgICAgKGtleWRvd24uYmFja3NwYWNlKT1cIm9uUmVtb3ZlKCRldmVudClcIlxuICAgICAgICAoYnV0dG9uQ2xpY2spPVwib25SZW1vdmUoJGV2ZW50KVwiPlxuICAgIDwvZXVpLWljb24tYnV0dG9uPlxuPC9kaXY+XG4iXX0=
package/esm2022/eui-chip-list/eui-chip-list.component.mjs CHANGED
@@ -230,7 +230,7 @@ export class EuiChipListComponent {
230
230
  return tab;
231
231
  }
232
232
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: EuiChipListComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.EuiChipListDragService }, { token: i2.DomSanitizer }, { token: i3.BaseStatesDirective }], target: i0.ɵɵFactoryTarget.Component }); }
233
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0", type: EuiChipListComponent, selector: "eui-chip-list, div[euiChipList], ul[euiChipList]", inputs: { chips: "chips", toggleLinkMoreLabel: "toggleLinkMoreLabel", toggleLinkLessLabel: "toggleLinkLessLabel", chipsSortOrder: "chipsSortOrder", dragAndDropSourceName: "dragAndDropSourceName", dragAndDropConnectedTo: "dragAndDropConnectedTo", ariaLabel: "ariaLabel", dropListOrientation: "dropListOrientation", isSquared: ["isSquared", "isSquared", booleanAttribute], isChipsRemovable: ["isChipsRemovable", "isChipsRemovable", booleanAttribute], isMaxVisibleChipsOpened: ["isMaxVisibleChipsOpened", "isMaxVisibleChipsOpened", booleanAttribute], isChipsSorted: ["isChipsSorted", "isChipsSorted", booleanAttribute], isChipsDragAndDrop: ["isChipsDragAndDrop", "isChipsDragAndDrop", booleanAttribute], isGrid: ["isGrid", "isGrid", booleanAttribute], maxVisibleChipsCount: ["maxVisibleChipsCount", "maxVisibleChipsCount", numberAttribute], chipsLabelTruncateCount: ["chipsLabelTruncateCount", "chipsLabelTruncateCount", numberAttribute] }, outputs: { chipsInit: "chipsInit", chipRemove: "chipRemove", chipDragStart: "chipDragStart", chipDragRelease: "chipDragRelease", chipDrop: "chipDrop", chiplistFocus: "chiplistFocus" }, host: { properties: { "attr.aria-label": "this.ariaLabel", "class": "this.cssClasses" } }, queries: [{ propertyName: "euiChipsContent", predicate: i0.forwardRef(() => EuiChipComponent) }], viewQueries: [{ propertyName: "chipListDropList", first: true, predicate: ["chipListDropList"], descendants: true, read: CdkDropList }, { propertyName: "chipListDragAndDropItems", first: true, predicate: ["chipListDragAndDropItems"], descendants: true, read: CdkDropList }, { propertyName: "euiChipItems", predicate: ["euiChipItem"], descendants: true, read: ElementRef }], usesOnChanges: true, hostDirectives: [{ directive: i3.BaseStatesDirective, inputs: ["euiPrimary", "euiPrimary", "euiSecondary", "euiSecondary", "euiSuccess", "euiSuccess", "euiInfo", "euiInfo", "euiWarning", "euiWarning", "euiDanger", "euiDanger", "euiAccent", "euiAccent", "euiVariant", "euiVariant", "euiOutline", "euiOutline", "euiDisabled", "euiDisabled"] }], ngImport: i0, template: "<div *ngIf=\"!isGrid\" class=\"eui-chip-list-container\">\n <div class=\"eui-chip-list-wrapper\">\n <div\n role=\"list\"\n #chipList\n #chipListDropList\n #chipListDragAndDropItems\n cdkDropList\n [cdkDropListOrientation]=\"dropListOrientation\"\n [cdkDropListDisabled]=\"!isChipsDragAndDrop\"\n [cdkDropListData]=\"{ chips }\"\n [cdkDropListConnectedTo]=\"droppableArea\"\n (cdkDropListDropped)=\"drop($event)\"\n (focus)=\"onFocus()\"\n class=\"eui-chip-list__list\">\n <div\n class=\"eui-chip-list__chip-container\"\n *ngFor=\"let chip of chips; let i = index; trackBy: trackByFn\"\n cdkDrag\n [cdkDragData]=\"chip\"\n (cdkDragStarted)=\"onDragStarted($event)\"\n (cdkDragReleased)=\"onDragReleased($event)\">\n <eui-chip\n #euiChipItem\n *ngIf=\"\n (maxVisibleChipsCount && isMaxVisibleChipsOpened) ||\n (maxVisibleChipsCount && maxVisibleChipsCount > i) ||\n !maxVisibleChipsCount\n \"\n [data]=\"chip.data ? chip.data : chip\"\n [attr.role]=\"'listitem'\"\n ariaLabel=\"{{ getChipLabel(chip) }}\"\n [euiInternalId]=\"chip.euiInternalId\"\n [isChipRemovable]=\"chip.isChipRemovable || (isChipsRemovable && chip.isRemovable) !== false\"\n [euiOutline]=\"chip.euiOutline || this.baseStatesDirective?.euiOutline || chip.isOutline\"\n [euiVariant]=\"chip.typeClass || this.baseStatesDirective?.euiVariant || chip.baseStatesDirective?.euiVariant\"\n [euiDisabled]=\"chip.euiDisabled || this.baseStatesDirective?.euiDisabled || chip.isDisabled\"\n [euiTooltip]=\"chip.tooltipMessage\"\n [position]=\"chip.tooltip?.position\"\n [contentAlignment]=\"chip.tooltip?.contentAlignment\"\n (remove)=\"onRemove($event)\">\n <eui-icon-svg *ngIf=\"chip.iconSvgName\" [icon]=\"chip.iconSvgName\"></eui-icon-svg>\n <span *ngIf=\"chip.iconClass\" class=\"{{ chip.iconClass }}\"></span>\n <span class=\"eui-chip-list__chip-content\" *ngIf=\"!chipsLabelTruncateCount\" [innerHTML]=\"getChipContent(chip)\"></span>\n <span *ngIf=\"chipsLabelTruncateCount\" title=\"{{ getChipLabel(chip) }}\">{{\n getChipLabel(chip) | euiTruncate: chipsLabelTruncateCount\n }}</span>\n </eui-chip>\n </div>\n <ng-container *ngTemplateOutlet=\"euiChipListAppendContent\"></ng-container>\n </div>\n </div>\n <ng-container *ngTemplateOutlet=\"additionalContent\"></ng-container>\n</div>\n\n<div *ngIf=\"isGrid\" class=\"eui-chip-list-container\">\n <div class=\"eui-chip-list-wrapper\">\n <div class=\"eui-chip-list__group\" cdkDropListGroup>\n <div\n role=\"list\"\n #chipList\n #chipListDropList\n #chipListDragAndDropItems\n cdkDropList\n *ngFor=\"let chip of chips; let i = index\"\n [cdkDropListDisabled]=\"!isChipsDragAndDrop\"\n [cdkDropListData]=\"{ chip: chip, index: i }\"\n (focus)=\"onFocus()\"\n (cdkDropListDropped)=\"onDropGrid($event)\"\n class=\"eui-chip-list__custom\">\n <div\n class=\"eui-chip-list__chip-container\"\n cdkDrag\n [cdkDragData]=\"{ chip: chip, index: i }\"\n (cdkDragStarted)=\"onDragStarted($event)\"\n (cdkDragReleased)=\"onDragReleased($event)\"\n (cdkDragEntered)=\"onDragEnter($event)\">\n <eui-chip\n #euiChipItem\n *ngIf=\"\n (maxVisibleChipsCount && isMaxVisibleChipsOpened) ||\n (maxVisibleChipsCount && maxVisibleChipsCount > i) ||\n !maxVisibleChipsCount\n \"\n [data]=\"chip.data ? chip.data : chip\"\n [id]=\"chip.id\"\n [attr.role]=\"'listitem'\"\n ariaLabel=\"{{ getChipLabel(chip) }}\"\n [euiInternalId]=\"chip.euiInternalId\"\n [isChipRemovable]=\"chip.isChipRemovable || (isChipsRemovable && chip.isRemovable) !== false\"\n [euiOutline]=\"chip.euiOutline || this.baseStatesDirective?.euiOutline || chip.isOutline\"\n [euiVariant]=\"chip.typeClass || this.baseStatesDirective?.euiVariant || chip.baseStatesDirective?.euiVariant\"\n [euiDisabled]=\"chip.euiDisabled || this.baseStatesDirective?.euiDisabled || chip.isDisabled\"\n [euiTooltip]=\"chip.tooltipMessage\"\n [position]=\"chip.tooltip?.position\"\n [contentAlignment]=\"chip.tooltip?.contentAlignment\"\n (remove)=\"onRemove($event)\">\n <eui-icon-svg *ngIf=\"chip.iconSvgName\" [icon]=\"chip.iconSvgName\"></eui-icon-svg>\n <span *ngIf=\"!chipsLabelTruncateCount\" [innerHTML]=\"getChipContent(chip)\"></span>\n <span *ngIf=\"chipsLabelTruncateCount\" title=\"{{ getChipLabel(chip) }}\">{{\n getChipLabel(chip) | euiTruncate: chipsLabelTruncateCount\n }}</span>\n </eui-chip>\n </div>\n </div>\n <ng-container *ngTemplateOutlet=\"euiChipListAppendContent\"></ng-container>\n </div>\n </div>\n <ng-container *ngTemplateOutlet=\"additionalContent\"></ng-container>\n</div>\n\n<ng-template #euiChipListAppendContent>\n <ng-content select=\"euiChipListAppendContent\"></ng-content>\n</ng-template>\n\n<ng-template #additionalContent>\n <ng-container *ngIf=\"maxVisibleChipsCount && chips && chips.length > maxVisibleChipsCount\">\n <div class=\"eui-chip-list__expand-button-wrapper\">\n <button\n euiButton\n euiBasicButton\n euiButtonSecondary\n euiSizeS\n type=\"button\"\n class=\"eui-chip-list__expand-button\"\n (click)=\"toggleTags()\"\n *ngIf=\"isMaxVisibleChipsOpened\">\n <eui-icon-svg icon=\"chevron-back:sharp\" aria-label=\"Collapse icon\"></eui-icon-svg>\n <span euiLabel *ngIf=\"toggleLinkLessLabel\">{{ toggleLinkLessLabel | translate }}</span>\n </button>\n <button\n euiButton\n euiBasicButton\n euiButtonSecondary\n euiSizeS\n type=\"button\"\n aria-haspopup=\"true\"\n class=\"eui-chip-list__expand-button\"\n (click)=\"toggleTags()\"\n *ngIf=\"!isMaxVisibleChipsOpened\">\n <span euiLabel *ngIf=\"toggleLinkMoreLabel\">{{ toggleLinkMoreLabel | translate }}</span>\n <eui-icon-svg icon=\"chevron-forward:sharp\" aria-label=\"Expand icon\"></eui-icon-svg>\n </button>\n </div>\n </ng-container>\n</ng-template>\n", styles: [".eui-chip-list{align-items:center;display:flex;margin:0;padding:0}.eui-chip-list .eui-chip-list-container{align-items:center;display:flex;width:100%}.eui-chip-list .eui-chip-list-container .eui-chip-list-wrapper{align-items:center;display:flex;width:100%;flex-wrap:wrap}.eui-chip-list .eui-chip-list-container .eui-chip-list-wrapper .eui-chip-list__list{flex-wrap:wrap}.eui-chip-list .eui-chip-list-container .eui-chip-list-wrapper .eui-chip-list__chip-container{align-items:center;display:inline-flex}.eui-chip-list .eui-chip-list-container .eui-chip-list-wrapper .eui-chip-list__chip-container .eui-chip{margin-bottom:var(--eui-s-2xs);margin-right:var(--eui-s-2xs)}.eui-chip-list[ischipsdraganddrop] .eui-chip-list-container{width:100%}.eui-chip-list__group{display:flex;flex-wrap:wrap}.eui-chip-list__chip-container.cdk-drag:not(.cdk-drag-disabled){cursor:move!important}.eui-chip-list__custom{min-width:auto!important;width:auto!important}.eui-chip-list__chip-content{display:flex;align-items:center;gap:var(--eui-s-xs)}@media screen and (max-width: 767px){.eui-chip-list .eui-chip-list-container{flex-wrap:wrap}}@media screen and (min-width: 768px) and (max-width: 995px){.eui-chip-list .eui-chip-list-container{flex-wrap:wrap}}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["ariaLabel", "e2eAttr", "euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isSquared"], outputs: ["remove"] }, { kind: "component", type: i6.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "euiIconButton", "euiLineWrap", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i7.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "euiVariant", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i8.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label, label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }, { kind: "directive", type: i9.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i9.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i9.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i10.EuiTooltipDirective, selector: "[euiTooltip]", inputs: ["e2eAttr", "showDelay", "hideDelay", "contentAlignment", "position", "isDisabled", "euiTooltip", "euiTooltipPrimary", "euiTooltipSecondary", "euiTooltipInfo", "euiTooltipSuccess", "euiTooltipWarning", "euiTooltipDanger", "euiTooltipAccent"], exportAs: ["euiTooltip"] }, { kind: "pipe", type: i11.TranslatePipe, name: "translate" }, { kind: "pipe", type: i12.EuiTruncatePipe, name: "euiTruncate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
233
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0", type: EuiChipListComponent, selector: "eui-chip-list, div[euiChipList], ul[euiChipList]", inputs: { chips: "chips", toggleLinkMoreLabel: "toggleLinkMoreLabel", toggleLinkLessLabel: "toggleLinkLessLabel", chipsSortOrder: "chipsSortOrder", dragAndDropSourceName: "dragAndDropSourceName", dragAndDropConnectedTo: "dragAndDropConnectedTo", ariaLabel: "ariaLabel", dropListOrientation: "dropListOrientation", isSquared: ["isSquared", "isSquared", booleanAttribute], isChipsRemovable: ["isChipsRemovable", "isChipsRemovable", booleanAttribute], isMaxVisibleChipsOpened: ["isMaxVisibleChipsOpened", "isMaxVisibleChipsOpened", booleanAttribute], isChipsSorted: ["isChipsSorted", "isChipsSorted", booleanAttribute], isChipsDragAndDrop: ["isChipsDragAndDrop", "isChipsDragAndDrop", booleanAttribute], isGrid: ["isGrid", "isGrid", booleanAttribute], maxVisibleChipsCount: ["maxVisibleChipsCount", "maxVisibleChipsCount", numberAttribute], chipsLabelTruncateCount: ["chipsLabelTruncateCount", "chipsLabelTruncateCount", numberAttribute] }, outputs: { chipsInit: "chipsInit", chipRemove: "chipRemove", chipDragStart: "chipDragStart", chipDragRelease: "chipDragRelease", chipDrop: "chipDrop", chiplistFocus: "chiplistFocus" }, host: { properties: { "attr.aria-label": "this.ariaLabel", "class": "this.cssClasses" } }, queries: [{ propertyName: "euiChipsContent", predicate: i0.forwardRef(() => EuiChipComponent) }], viewQueries: [{ propertyName: "chipListDropList", first: true, predicate: ["chipListDropList"], descendants: true, read: CdkDropList }, { propertyName: "chipListDragAndDropItems", first: true, predicate: ["chipListDragAndDropItems"], descendants: true, read: CdkDropList }, { propertyName: "euiChipItems", predicate: ["euiChipItem"], descendants: true, read: ElementRef }], usesOnChanges: true, hostDirectives: [{ directive: i3.BaseStatesDirective, inputs: ["euiPrimary", "euiPrimary", "euiSecondary", "euiSecondary", "euiSuccess", "euiSuccess", "euiInfo", "euiInfo", "euiWarning", "euiWarning", "euiDanger", "euiDanger", "euiAccent", "euiAccent", "euiVariant", "euiVariant", "euiOutline", "euiOutline", "euiDisabled", "euiDisabled"] }], ngImport: i0, template: "<div *ngIf=\"!isGrid\" class=\"eui-chip-list-container\">\n <div class=\"eui-chip-list-wrapper\">\n <div\n role=\"list\"\n #chipList\n #chipListDropList\n #chipListDragAndDropItems\n cdkDropList\n [cdkDropListOrientation]=\"dropListOrientation\"\n [cdkDropListDisabled]=\"!isChipsDragAndDrop\"\n [cdkDropListData]=\"{ chips }\"\n [cdkDropListConnectedTo]=\"droppableArea\"\n (cdkDropListDropped)=\"drop($event)\"\n (focus)=\"onFocus()\"\n class=\"eui-chip-list__list\">\n <div\n class=\"eui-chip-list__chip-container\"\n *ngFor=\"let chip of chips; let i = index; trackBy: trackByFn\"\n cdkDrag\n [cdkDragData]=\"chip\"\n (cdkDragStarted)=\"onDragStarted($event)\"\n (cdkDragReleased)=\"onDragReleased($event)\">\n <eui-chip\n #euiChipItem\n *ngIf=\"\n (maxVisibleChipsCount && isMaxVisibleChipsOpened) ||\n (maxVisibleChipsCount && maxVisibleChipsCount > i) ||\n !maxVisibleChipsCount\n \"\n [data]=\"chip.data ? chip.data : chip\"\n [attr.role]=\"'listitem'\"\n ariaLabel=\"{{ getChipLabel(chip) }}\"\n [euiInternalId]=\"chip.euiInternalId\"\n [isChipRemovable]=\"chip.isChipRemovable || (isChipsRemovable && chip.isRemovable) !== false\"\n [euiOutline]=\"chip.euiOutline || this.baseStatesDirective?.euiOutline || chip.isOutline\"\n [euiVariant]=\"chip.typeClass || this.baseStatesDirective?.euiVariant || chip.baseStatesDirective?.euiVariant\"\n [euiDisabled]=\"chip.euiDisabled || this.baseStatesDirective?.euiDisabled || chip.isDisabled\"\n [euiTooltip]=\"chip.tooltipMessage\"\n [position]=\"chip.tooltip?.position\"\n [contentAlignment]=\"chip.tooltip?.contentAlignment\"\n (remove)=\"onRemove($event)\">\n <eui-icon-svg *ngIf=\"chip.iconSvgName\" [icon]=\"chip.iconSvgName\"></eui-icon-svg>\n <span *ngIf=\"chip.iconClass\" class=\"{{ chip.iconClass }}\"></span>\n <span class=\"eui-chip-list__chip-content\" *ngIf=\"!chipsLabelTruncateCount\" [innerHTML]=\"getChipContent(chip)\"></span>\n <span *ngIf=\"chipsLabelTruncateCount\" title=\"{{ getChipLabel(chip) }}\">{{\n getChipLabel(chip) | euiTruncate: chipsLabelTruncateCount\n }}</span>\n </eui-chip>\n </div>\n <ng-container *ngTemplateOutlet=\"euiChipListAppendContent\"></ng-container>\n </div>\n </div>\n <ng-container *ngTemplateOutlet=\"additionalContent\"></ng-container>\n</div>\n\n<div *ngIf=\"isGrid\" class=\"eui-chip-list-container\">\n <div class=\"eui-chip-list-wrapper\">\n <div class=\"eui-chip-list__group\" cdkDropListGroup>\n <div\n role=\"list\"\n #chipList\n #chipListDropList\n #chipListDragAndDropItems\n cdkDropList\n *ngFor=\"let chip of chips; let i = index\"\n [cdkDropListDisabled]=\"!isChipsDragAndDrop\"\n [cdkDropListData]=\"{ chip: chip, index: i }\"\n (focus)=\"onFocus()\"\n (cdkDropListDropped)=\"onDropGrid($event)\"\n class=\"eui-chip-list__custom\">\n <div\n class=\"eui-chip-list__chip-container\"\n cdkDrag\n [cdkDragData]=\"{ chip: chip, index: i }\"\n (cdkDragStarted)=\"onDragStarted($event)\"\n (cdkDragReleased)=\"onDragReleased($event)\"\n (cdkDragEntered)=\"onDragEnter($event)\">\n <eui-chip\n #euiChipItem\n *ngIf=\"\n (maxVisibleChipsCount && isMaxVisibleChipsOpened) ||\n (maxVisibleChipsCount && maxVisibleChipsCount > i) ||\n !maxVisibleChipsCount\n \"\n [data]=\"chip.data ? chip.data : chip\"\n [id]=\"chip.id\"\n [attr.role]=\"'listitem'\"\n ariaLabel=\"{{ getChipLabel(chip) }}\"\n [euiInternalId]=\"chip.euiInternalId\"\n [isChipRemovable]=\"chip.isChipRemovable || (isChipsRemovable && chip.isRemovable) !== false\"\n [euiOutline]=\"chip.euiOutline || this.baseStatesDirective?.euiOutline || chip.isOutline\"\n [euiVariant]=\"chip.typeClass || this.baseStatesDirective?.euiVariant || chip.baseStatesDirective?.euiVariant\"\n [euiDisabled]=\"chip.euiDisabled || this.baseStatesDirective?.euiDisabled || chip.isDisabled\"\n [euiTooltip]=\"chip.tooltipMessage\"\n [position]=\"chip.tooltip?.position\"\n [contentAlignment]=\"chip.tooltip?.contentAlignment\"\n (remove)=\"onRemove($event)\">\n <eui-icon-svg *ngIf=\"chip.iconSvgName\" [icon]=\"chip.iconSvgName\"></eui-icon-svg>\n <span *ngIf=\"!chipsLabelTruncateCount\" [innerHTML]=\"getChipContent(chip)\"></span>\n <span *ngIf=\"chipsLabelTruncateCount\" title=\"{{ getChipLabel(chip) }}\">{{\n getChipLabel(chip) | euiTruncate: chipsLabelTruncateCount\n }}</span>\n </eui-chip>\n </div>\n </div>\n <ng-container *ngTemplateOutlet=\"euiChipListAppendContent\"></ng-container>\n </div>\n </div>\n <ng-container *ngTemplateOutlet=\"additionalContent\"></ng-container>\n</div>\n\n<ng-template #euiChipListAppendContent>\n <ng-content select=\"euiChipListAppendContent\"></ng-content>\n</ng-template>\n\n<ng-template #additionalContent>\n <ng-container *ngIf=\"maxVisibleChipsCount && chips && chips.length > maxVisibleChipsCount\">\n <div class=\"eui-chip-list__expand-button-wrapper\">\n <button\n euiButton\n euiBasicButton\n euiButtonSecondary\n euiSizeS\n type=\"button\"\n class=\"eui-chip-list__expand-button\"\n (click)=\"toggleTags()\"\n *ngIf=\"isMaxVisibleChipsOpened\">\n <eui-icon-svg icon=\"chevron-back:sharp\" aria-label=\"Collapse icon\"></eui-icon-svg>\n <span euiLabel *ngIf=\"toggleLinkLessLabel\">{{ toggleLinkLessLabel | translate }}</span>\n </button>\n <button\n euiButton\n euiBasicButton\n euiButtonSecondary\n euiSizeS\n type=\"button\"\n aria-haspopup=\"true\"\n class=\"eui-chip-list__expand-button\"\n (click)=\"toggleTags()\"\n *ngIf=\"!isMaxVisibleChipsOpened\">\n <span euiLabel *ngIf=\"toggleLinkMoreLabel\">{{ toggleLinkMoreLabel | translate }}</span>\n <eui-icon-svg icon=\"chevron-forward:sharp\" aria-label=\"Expand icon\"></eui-icon-svg>\n </button>\n </div>\n </ng-container>\n</ng-template>\n", styles: [".eui-chip-list{align-items:center;display:flex;margin:0;padding:0}.eui-chip-list .eui-chip-list-container{align-items:center;display:flex;width:100%}.eui-chip-list .eui-chip-list-container .eui-chip-list-wrapper{align-items:center;display:flex;width:100%;flex-wrap:wrap}.eui-chip-list .eui-chip-list-container .eui-chip-list-wrapper .eui-chip-list__list{flex-wrap:wrap}.eui-chip-list .eui-chip-list-container .eui-chip-list-wrapper .eui-chip-list__chip-container{align-items:center;display:inline-flex}.eui-chip-list .eui-chip-list-container .eui-chip-list-wrapper .eui-chip-list__chip-container .eui-chip{margin-bottom:var(--eui-s-2xs);margin-right:var(--eui-s-2xs)}.eui-chip-list[ischipsdraganddrop] .eui-chip-list-container{width:100%}.eui-chip-list__group{display:flex;flex-wrap:wrap}.eui-chip-list__chip-container.cdk-drag:not(.cdk-drag-disabled){cursor:move!important}.eui-chip-list__custom{min-width:auto!important;width:auto!important}.eui-chip-list__chip-content{display:flex;align-items:center;gap:var(--eui-s-xs)}@media screen and (max-width: 767px){.eui-chip-list .eui-chip-list-container{flex-wrap:wrap}}@media screen and (min-width: 768px) and (max-width: 995px){.eui-chip-list .eui-chip-list-container{flex-wrap:wrap}}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["ariaLabel", "e2eAttr", "euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isSquared", "isFilled"], outputs: ["remove"] }, { kind: "component", type: i6.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "euiIconButton", "euiLineWrap", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i7.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "euiVariant", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i8.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label, label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }, { kind: "directive", type: i9.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i9.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i9.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i10.EuiTooltipDirective, selector: "[euiTooltip]", inputs: ["e2eAttr", "showDelay", "hideDelay", "contentAlignment", "position", "isDisabled", "euiTooltip", "euiTooltipPrimary", "euiTooltipSecondary", "euiTooltipInfo", "euiTooltipSuccess", "euiTooltipWarning", "euiTooltipDanger", "euiTooltipAccent"], exportAs: ["euiTooltip"] }, { kind: "pipe", type: i11.TranslatePipe, name: "translate" }, { kind: "pipe", type: i12.EuiTruncatePipe, name: "euiTruncate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
234
234
  }
235
235
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: EuiChipListComponent, decorators: [{
236
236
  type: Component,
package/esm2022/eui-tree/eui-tree.component.mjs CHANGED
@@ -827,7 +827,7 @@ export class EuiTreeComponent {
827
827
  return scrolled.getElementRef().nativeElement === this.cdkScrollableRef.getElementRef().nativeElement;
828
828
  }
829
829
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: EuiTreeComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.ScrollDispatcher }], target: i0.ɵɵFactoryTarget.Component }); }
830
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0", type: EuiTreeComponent, selector: "eui-tree", inputs: { e2eAttr: "e2eAttr", nodes: "nodes", nodeTemplateRef: "nodeTemplateRef", nodeContentMetadataTemplateRef: "nodeContentMetadataTemplateRef", rightContextMenuTemplateRef: "rightContextMenuTemplateRef", expandedIconClass: "expandedIconClass", collapsedIconClass: "collapsedIconClass", expandedSvgIconClass: "expandedSvgIconClass", collapsedSvgIconClass: "collapsedSvgIconClass", isClickTogglingNode: ["isClickTogglingNode", "isClickTogglingNode", booleanAttribute], isMultiselect: ["isMultiselect", "isMultiselect", booleanAttribute], isSingleSelect: ["isSingleSelect", "isSingleSelect", booleanAttribute], isRecursiveSelection: ["isRecursiveSelection", "isRecursiveSelection", booleanAttribute], isRecursiveParentSelection: ["isRecursiveParentSelection", "isRecursiveParentSelection", booleanAttribute], showUnderlinedLinks: ["showUnderlinedLinks", "showUnderlinedLinks", booleanAttribute], showLines: ["showLines", "showLines", booleanAttribute], autoTranslate: ["autoTranslate", "autoTranslate", booleanAttribute], highlightPath: ["highlightPath", "highlightPath", booleanAttribute] }, outputs: { selectionChange: "selectionChange", nodeClick: "nodeClick", nodeToggle: "nodeToggle" }, host: { properties: { "class": "this.cssClasses", "attr.data-e2e": "this.e2eAttr" } }, viewQueries: [{ propertyName: "cdkScrollableRef", first: true, predicate: ["cdkScrollableRef"], descendants: true, read: CdkScrollable }, { propertyName: "treeComponentInstance", first: true, predicate: ["treeComponentInstance"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"eui-ul-rep eui-tree__wrapper\" cdkScrollable #cdkScrollableRef>\n <cdk-tree\n #treeComponentInstance\n [dataSource]=\"cdkArrayDataSource\"\n [treeControl]=\"cdkTreeControl\"\n [trackBy]=\"trackBy\"\n *ngIf=\"renderTree\"\n class=\"eui-cdk-tree\">\n <!-- There are two states of generic cdk-nested-tree-node declarations.\n First one is without child. No sub rendering.\n -->\n <cdk-nested-tree-node *cdkTreeNodeDef=\"let treeRunTimeItemModel\" class=\"eui-cdk-nested-tree-node\">\n <div *ngIf=\"treeRunTimeItemModel\"\n class=\"eui-li-rep eui-tree-node\"\n [class.eui-tree-node--first]=\"treeRunTimeItemModel?.path === '0'\"\n [class.eui-tree-node--last]=\"treeRunTimeItemModel.last\"\n title=\"{{\n getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.tooltipLabel ||\n getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.label\n }}\">\n <div class=\"eui-tree-node-wrapper\"\n (click)=\"onNodeClick(treeRunTimeItemModel)\">\n <div class=\"eui-tree-node-wrapper__container\">\n <!--\n Renders node in default or provided template's context.\n Generates onSelect with onSelectFn for developers to send the events from their custom check events.\n Provides id to be used on generic template\n -->\n <ng-container\n [ngTemplateOutlet]=\"nodeTemplateRef || nodeTemplateDefault\"\n [ngTemplateOutletContext]=\"{\n $implicit: getTreeItem(treeRunTimeItemModel?.path)?.node,\n onSelect: onSelectFn(treeRunTimeItemModel.path),\n id: uid + treeRunTimeItemModel.path,\n path: treeRunTimeItemModel.path\n }\">\n </ng-container>\n </div>\n </div>\n </div>\n </cdk-nested-tree-node>\n <!-- This is the tree node template for expandable nodes -->\n <cdk-nested-tree-node\n *cdkTreeNodeDef=\"let treeRunTimeItemModel; when: hasChild\"\n class=\"eui-cdk-nested-tree-node eui-cdk-nested-tree-node--with-child\">\n <div\n class=\"eui-li-rep eui-tree-node eui-tree-node--with-child\"\n [class.eui-tree-node--first]=\"treeRunTimeItemModel?.path === '0'\"\n [class.eui-tree-node--last]=\"treeRunTimeItemModel.last\"\n *ngIf=\"treeRunTimeItemModel\"\n title=\"{{\n getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.tooltipLabel ||\n getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.label\n }}\">\n <div\n class=\"eui-tree-node-wrapper\">\n <!--Here wraps the node, and listen for node clicks.-->\n <div (click)=\"onNodeClick(treeRunTimeItemModel)\" class=\"eui-tree-node-wrapper__container\">\n <!-- Expand/collapse action button -->\n <button\n euiButton\n euiIconButton\n euiBasicButton\n euiRounded\n euiSizeS\n type=\"button\"\n [attr.aria-label]=\"'Toggle ' + getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.label\"\n (click)=\"onNodeToggle(treeRunTimeItemModel)\"\n cdkTreeNodeToggle\n class=\"eui-tree-node__button\">\n <eui-icon-svg\n *ngIf=\"!cdkTreeControl.isExpanded(treeRunTimeItemModel) && !collapsedIconClass\"\n [icon]=\"expandedSvgIconClass\"></eui-icon-svg>\n <eui-icon-svg\n *ngIf=\"cdkTreeControl.isExpanded(treeRunTimeItemModel) && !expandedIconClass\"\n [icon]=\"collapsedSvgIconClass\"></eui-icon-svg>\n </button>\n <!--\n Renders node in default or provided template's context.\n Generates onSelect with onSelectFn for developers to send the events from their custom check events.\n Provides id to be used on generic template\n -->\n <ng-container\n [ngTemplateOutlet]=\"nodeTemplateRef || nodeTemplateDefault\"\n [ngTemplateOutletContext]=\"{\n $implicit: getTreeItem(treeRunTimeItemModel.path)?.node,\n onSelect: onSelectFn(treeRunTimeItemModel.path),\n id: uid + treeRunTimeItemModel.path,\n path: treeRunTimeItemModel.path,\n children: getTreeItem(treeRunTimeItemModel?.path)?.children\n }\">\n </ng-container>\n </div>\n </div>\n <!--uses cdkTreeNodeOutlet to render children nodes, CdkTreeControl is used to control isExpanded state.-->\n <div class=\"eui-ul-rep eui-tree-node\" role=\"group\" *ngIf=\"cdkTreeControl.isExpanded(treeRunTimeItemModel)\">\n <ng-container cdkTreeNodeOutlet></ng-container>\n </div>\n </div>\n </cdk-nested-tree-node>\n </cdk-tree>\n</div>\n\n<ng-template #nodeTemplateDefault let-node let-onSelect=\"onSelect\" let-id=\"id\" let-path=\"path\">\n <ng-container *ngIf=\"node\">\n <div class=\"eui-tree-node-wrapper__container-left\" [class.eui-tree-node-wrapper__container-left--selected]=\"node?.isSelected\">\n <!--input checkbox area-->\n <input\n euiInputCheckBox\n *ngIf=\"node && node.selectable\"\n type=\"checkbox\"\n id=\"{{ id }}\"\n [checked]=\"!!node?.isSelected\"\n [indeterminate]=\"!!node?.isIndeterminate\"\n (change)=\"onSelect($event)\"\n class=\"eui-u-mr-m\" />\n\n <!--icon area-->\n <ng-container *ngIf=\"node?.treeContentBlock?.iconSvgName\">\n <eui-icon-svg\n icon=\"{{ node?.treeContentBlock?.iconSvgName }}\"\n fillColor=\"{{ node?.treeContentBlock?.iconTypeClass || 'neutral' }}\"\n size=\"s\"\n class=\"eui-u-mr-xs\">\n </eui-icon-svg>\n </ng-container>\n\n <!--chips area-->\n <ng-container *ngIf=\"node?.treeContentBlock?.chips\">\n <eui-chip\n *ngFor=\"let chip of node.treeContentBlock.chips\"\n euiSizeS\n [euiVariant]=\"chip.typeClass || 'secondary'\"\n [euiOutline]=\"chip.isOutline\"\n class=\"eui-chip--rounded eui-u-mb-none eui-u-mr-xs\">\n <span euiLabel>{{ chip.label }}</span>\n </eui-chip>\n </ng-container>\n\n <!--badge (typeLabel & typeClass) area-->\n <ng-container *ngIf=\"node?.treeContentBlock?.typeLabel\" [ngSwitch]=\"node?.treeContentBlock?.typeClass\">\n <eui-badge euiSizeM [euiVariant]=\"node?.treeContentBlock?.typeClass || 'primary'\" class=\"eui-u-flex-no-shrink eui-u-mr-xs\">\n {{ node?.treeContentBlock?.typeLabel }}\n </eui-badge>\n </ng-container>\n </div>\n\n <!--label area-->\n <div class=\"eui-tree-node-wrapper__container-middle\">\n <label\n *ngIf=\"!node?.treeContentBlock?.url && !node?.treeContentBlock?.urlExternal\"\n euiLabel\n for=\"{{ id }}\"\n class=\"eui-u-text-truncate eui-u-p-2xs\"\n [class.eui-label--selected]=\"\n highlightPath\n ? getRunTimeSelectionRecursiveState(path)?.selectionRecursiveState === 'indeterminate' || node?.isSelected\n : node?.isSelected\n \"\n [class.eui-u-cursor-pointer]=\"node?.selectable\">\n {{ autoTranslate ? (node?.treeContentBlock?.label | translate) : node?.treeContentBlock?.label }}\n </label>\n <label *ngIf=\"node?.treeContentBlock?.url\" euiLabel for=\"{{ id }}\" class=\"eui-u-text-truncate eui-u-p-2xs\">\n <a\n class=\"eui-u-text-link\"\n [class.eui-u-text-link-standalone]=\"!showUnderlinedLinks\"\n [routerLink]=\"node?.treeContentBlock?.url\">\n {{ autoTranslate ? (node?.treeContentBlock?.label | translate) : node?.treeContentBlock?.label }}\n </a>\n </label>\n <label *ngIf=\"node?.treeContentBlock?.urlExternal\" euiLabel for=\"{{ id }}\" class=\"eui-u-text-truncate eui-u-p-2xs\">\n <a\n class=\"eui-u-text-link-external\"\n [class.eui-u-text-link-external-standalone]=\"!showUnderlinedLinks\"\n href=\"{{ node?.treeContentBlock?.urlExternal }}\"\n target=\"{{ node?.treeContentBlock?.urlExternalTarget || 'blank' }}\">\n {{ autoTranslate ? (node?.treeContentBlock?.label | translate) : node?.treeContentBlock?.label }}\n </a>\n </label>\n </div>\n\n <div *ngIf=\"node?.treeContentBlock?.rightContent\" class=\"eui-tree-node-wrapper__container-right\">\n <!--badges area-->\n <ng-container *ngFor=\"let badge of node.treeContentBlock.rightContent?.badges\">\n <eui-badge euiOutline [euiVariant]=\"badge.typeClass || 'secondary'\" class=\"eui-u-ml-xs\">\n <span euiLabel>{{ badge.label }}</span>\n </eui-badge>\n </ng-container>\n\n <!--chips area-->\n <ng-container *ngFor=\"let chip of node.treeContentBlock.rightContent?.chips\">\n <eui-chip\n euiSizeS\n [euiVariant]=\"chip.typeClass || 'secondary'\"\n [euiOutline]=\"chip.isOutline\"\n class=\"eui-chip--rounded eui-u-mb-none eui-u-ml-xs\">\n <span euiLabel>{{ chip.label }}</span>\n </eui-chip>\n </ng-container>\n\n <!--Context menu-->\n <ng-container *ngIf=\"node.treeContentBlock.rightContent?.contextMenuMetaData && rightContextMenuTemplateRef\">\n <eui-dropdown class=\"eui-u-ml-xs\">\n <button euiButton euiSizeS euiRounded euiIconButton euiBasicButton euiSecondary [attr.aria-label]=\"'Options menu'\">\n <eui-icon-svg icon=\"ellipsis-vertical:sharp\"></eui-icon-svg>\n </button>\n <eui-dropdown-content>\n <ng-template\n [ngTemplateOutlet]=\"rightContextMenuTemplateRef\"\n [ngTemplateOutletContext]=\"{\n $implicit: node?.treeContentBlock?.rightContent?.contextMenuMetaData,\n metadata: node?.treeContentBlock?.rightContent?.contextMenuMetaData\n }\">\n </ng-template>\n </eui-dropdown-content>\n </eui-dropdown>\n </ng-container>\n </div>\n\n <!--metadata, uses the help of ng template to generate dynamic expand variable without handling state -->\n <ng-container\n *ngIf=\"node.treeContentBlock?.metadata && nodeContentMetadataTemplateRef\"\n [ngTemplateOutlet]=\"nodeContentMetadataContainer\"\n [ngTemplateOutletContext]=\"{\n $implicit: { expanded: false }\n }\">\n </ng-container>\n <ng-template #nodeContentMetadataContainer let-metaDataContainer>\n <button\n euiButton\n euiBasicButton\n euiIconButton\n euiRounded\n euiSizeS\n type=\"button\"\n aria-label=\"expand collapse tree item\"\n (click)=\"metaDataContainer.expanded = !metaDataContainer.expanded\">\n <eui-icon-svg [icon]=\"metaDataContainer.expanded ? 'chevron-down:sharp' : 'chevron-forward:sharp'\"></eui-icon-svg>\n </button>\n <div *ngIf=\"metaDataContainer.expanded\" class=\"eui-tree-node__metacontent\">\n <!--passing metadata of the node content to provided template-ref:nodeContentMetadataTemplateRef-->\n <ng-template\n [ngTemplateOutlet]=\"nodeContentMetadataTemplateRef\"\n [ngTemplateOutletContext]=\"{\n $implicit: node?.treeContentBlock?.metadata,\n metadata: node?.treeContentBlock?.metadata\n }\">\n </ng-template>\n </div>\n </ng-template>\n </ng-container>\n</ng-template>\n", styles: [".eui-tree{display:flex;overflow-x:hidden;overflow-y:auto;position:relative;width:100%}.eui-tree .eui-tree__wrapper{display:flex;list-style:none;margin:0;overflow-y:auto;padding:var(--eui-s-2xs);position:relative;width:100%}.eui-tree .eui-tree__wrapper::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-c-neutral-bg-light)}.eui-tree .eui-tree__wrapper::-webkit-scrollbar-thumb{background-color:var(--eui-c-neutral-lightest);border-radius:5rem}.eui-tree .eui-tree__wrapper::-webkit-scrollbar-thumb:hover{background-color:var(--eui-c-neutral-lighter)}.eui-tree .eui-tree__wrapper::-webkit-scrollbar-track{background-color:var(--eui-c-neutral-bg-light);border-radius:0}.eui-tree .eui-tree__wrapper .eui-cdk-tree{display:flex;flex-direction:column;width:100%}.eui-tree .eui-tree__wrapper .eui-cdk-tree .eui-cdk-nested-tree-node{display:flex;width:auto}.eui-tree .eui-tree__wrapper .eui-cdk-tree .eui-cdk-nested-tree-node:not(.eui-cdk-nested-tree-node--with-child){padding-inline-start:var(--eui-s-xl)}.eui-tree .eui-tree__wrapper .eui-cdk-tree .eui-cdk-nested-tree-node--with-child{display:flex;width:100%}.eui-tree .eui-tree__wrapper .eui-tree-node{display:flex;flex-direction:column;width:100%}.eui-tree .eui-tree__wrapper .eui-tree-node__metacontent{display:flex}.eui-tree .eui-tree__wrapper .eui-tree-node__button{margin-left:calc(-3 * var(--eui-s-2xs));margin-right:var(--eui-s-2xs)}.eui-tree .eui-tree__wrapper .eui-tree-node-wrapper{align-items:center;display:flex;min-height:var(--eui-s-xl);width:100%}.eui-tree .eui-tree__wrapper .eui-tree-node-wrapper:hover{background-color:var(--eui-c-neutral-bg-light)}.eui-tree .eui-tree__wrapper .eui-tree-node-wrapper__container{align-items:center;display:flex;width:100%}.eui-tree .eui-tree__wrapper .eui-tree-node-wrapper__container-left{align-items:center;display:flex;justify-content:flex-start}.eui-tree .eui-tree__wrapper .eui-tree-node-wrapper__container-middle{align-items:center;display:flex;justify-content:flex-start;overflow:hidden;width:100%}.eui-tree .eui-tree__wrapper .eui-tree-node-wrapper__container-right{align-items:center;display:flex;justify-content:flex-end;margin-left:auto}.eui-tree:not(.eui-tree--with-children) .eui-tree__wrapper .eui-cdk-tree .eui-cdk-nested-tree-node{padding-inline-start:2px}.eui-tree.eui-tree--show-lines.eui-tree--with-children div.eui-ul-rep{padding-inline-start:var(--eui-s-s)}.eui-tree.eui-tree--show-lines.eui-tree--with-children div.eui-ul-rep:before{border-left:1px solid var(--eui-c-neutral-lightest);content:\"\";height:calc(100% - var(--eui-s-m) - var(--eui-s-xl));position:absolute;top:var(--eui-s-xl)}.eui-tree.eui-tree--show-lines.eui-tree--with-children div.eui-ul-rep:first-child:before{height:calc(100% - var(--eui-s-m) - var(--eui-s-2xs));top:0}.eui-tree.eui-tree--show-lines.eui-tree--with-children div.eui-li-rep{padding-inline-start:var(--eui-s-s);position:relative}.eui-tree.eui-tree--show-lines.eui-tree--with-children div.eui-li-rep:before:not(.eui-tree-node--first){border-top:1px solid var(--eui-c-neutral-lightest);content:\"\";display:block;height:0;left:0;position:absolute;top:var(--eui-s-m);width:var(--eui-s-xl)}.eui-tree.eui-tree--show-lines.eui-tree--with-children div.eui-li-rep.eui-tree-node:not(.eui-tree-node--with-child):before{position:relative;left:0;display:inline-flex;width:var(--eui-s-2xl);border-bottom:1px solid var(--eui-c-neutral-lightest);content:\"\";margin-left:calc(-2 * var(--eui-s-l) + var(--eui-s-2xs));top:var(--eui-s-m)}.eui-tree.eui-tree--show-lines.eui-tree--with-children div.eui-li-rep.eui-tree-node.eui-tree-node--with-child:before{position:absolute;left:calc(1 * var(--eui-s-2xl) + var(--eui-s-2xs));display:inline-flex;width:var(--eui-s-s);border-bottom:1px solid var(--eui-c-neutral-lightest);border-left:1px solid var(--eui-c-neutral-lightest);content:\"\";margin-left:calc(-2 * var(--eui-s-l) + var(--eui-s-2xs));top:var(--eui-s-m)}.eui-tree.eui-tree--show-lines.eui-tree--with-children div.eui-li-rep.eui-tree-node--last:before{height:auto;top:var(--eui-s-m)}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i4.EuiInputCheckboxComponent, selector: "input[euiInputCheckBox]", inputs: ["indeterminate", "isInvalid", "checked"], outputs: ["indeterminateChange"] }, { kind: "directive", type: i5.CdkNestedTreeNode, selector: "cdk-nested-tree-node", exportAs: ["cdkNestedTreeNode"] }, { kind: "directive", type: i5.CdkTreeNodeDef, selector: "[cdkTreeNodeDef]", inputs: ["cdkTreeNodeDefWhen"] }, { kind: "directive", type: i5.CdkTreeNodeToggle, selector: "[cdkTreeNodeToggle]", inputs: ["cdkTreeNodeToggleRecursive"] }, { kind: "component", type: i5.CdkTree, selector: "cdk-tree", inputs: ["dataSource", "treeControl", "trackBy"], exportAs: ["cdkTree"] }, { kind: "directive", type: i5.CdkTreeNodeOutlet, selector: "[cdkTreeNodeOutlet]" }, { kind: "component", type: i6.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "euiIconButton", "euiLineWrap", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i7.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "euiVariant", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i8.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label, label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }, { kind: "component", type: i9.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["e2eAttr", "aria-label", "maxCharCount", "charReplacement", "euiIconBadge", "euiDottedBadge"] }, { kind: "component", type: i10.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["ariaLabel", "e2eAttr", "euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isSquared"], outputs: ["remove"] }, { kind: "component", type: i11.EuiDropdownComponent, selector: "eui-dropdown", inputs: ["e2eAttr", "tabIndex", "width", "position", "isBlock", "isDropDownRightAligned", "hasClosedOnClickInside", "isLabelUpdatedFromSelectedItem", "isExpandOnHover", "hasTabNavigation", "isRightClickEnabled", "euiDisabled"], outputs: ["expand"] }, { kind: "directive", type: i11.EuiDropdownContentDirective, selector: "eui-dropdown-content" }, { kind: "directive", type: i1.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "pipe", type: i12.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
830
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0", type: EuiTreeComponent, selector: "eui-tree", inputs: { e2eAttr: "e2eAttr", nodes: "nodes", nodeTemplateRef: "nodeTemplateRef", nodeContentMetadataTemplateRef: "nodeContentMetadataTemplateRef", rightContextMenuTemplateRef: "rightContextMenuTemplateRef", expandedIconClass: "expandedIconClass", collapsedIconClass: "collapsedIconClass", expandedSvgIconClass: "expandedSvgIconClass", collapsedSvgIconClass: "collapsedSvgIconClass", isClickTogglingNode: ["isClickTogglingNode", "isClickTogglingNode", booleanAttribute], isMultiselect: ["isMultiselect", "isMultiselect", booleanAttribute], isSingleSelect: ["isSingleSelect", "isSingleSelect", booleanAttribute], isRecursiveSelection: ["isRecursiveSelection", "isRecursiveSelection", booleanAttribute], isRecursiveParentSelection: ["isRecursiveParentSelection", "isRecursiveParentSelection", booleanAttribute], showUnderlinedLinks: ["showUnderlinedLinks", "showUnderlinedLinks", booleanAttribute], showLines: ["showLines", "showLines", booleanAttribute], autoTranslate: ["autoTranslate", "autoTranslate", booleanAttribute], highlightPath: ["highlightPath", "highlightPath", booleanAttribute] }, outputs: { selectionChange: "selectionChange", nodeClick: "nodeClick", nodeToggle: "nodeToggle" }, host: { properties: { "class": "this.cssClasses", "attr.data-e2e": "this.e2eAttr" } }, viewQueries: [{ propertyName: "cdkScrollableRef", first: true, predicate: ["cdkScrollableRef"], descendants: true, read: CdkScrollable }, { propertyName: "treeComponentInstance", first: true, predicate: ["treeComponentInstance"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"eui-ul-rep eui-tree__wrapper\" cdkScrollable #cdkScrollableRef>\n <cdk-tree\n #treeComponentInstance\n [dataSource]=\"cdkArrayDataSource\"\n [treeControl]=\"cdkTreeControl\"\n [trackBy]=\"trackBy\"\n *ngIf=\"renderTree\"\n class=\"eui-cdk-tree\">\n <!-- There are two states of generic cdk-nested-tree-node declarations.\n First one is without child. No sub rendering.\n -->\n <cdk-nested-tree-node *cdkTreeNodeDef=\"let treeRunTimeItemModel\" class=\"eui-cdk-nested-tree-node\">\n <div *ngIf=\"treeRunTimeItemModel\"\n class=\"eui-li-rep eui-tree-node\"\n [class.eui-tree-node--first]=\"treeRunTimeItemModel?.path === '0'\"\n [class.eui-tree-node--last]=\"treeRunTimeItemModel.last\"\n title=\"{{\n getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.tooltipLabel ||\n getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.label\n }}\">\n <div class=\"eui-tree-node-wrapper\"\n (click)=\"onNodeClick(treeRunTimeItemModel)\">\n <div class=\"eui-tree-node-wrapper__container\">\n <!--\n Renders node in default or provided template's context.\n Generates onSelect with onSelectFn for developers to send the events from their custom check events.\n Provides id to be used on generic template\n -->\n <ng-container\n [ngTemplateOutlet]=\"nodeTemplateRef || nodeTemplateDefault\"\n [ngTemplateOutletContext]=\"{\n $implicit: getTreeItem(treeRunTimeItemModel?.path)?.node,\n onSelect: onSelectFn(treeRunTimeItemModel.path),\n id: uid + treeRunTimeItemModel.path,\n path: treeRunTimeItemModel.path\n }\">\n </ng-container>\n </div>\n </div>\n </div>\n </cdk-nested-tree-node>\n <!-- This is the tree node template for expandable nodes -->\n <cdk-nested-tree-node\n *cdkTreeNodeDef=\"let treeRunTimeItemModel; when: hasChild\"\n class=\"eui-cdk-nested-tree-node eui-cdk-nested-tree-node--with-child\">\n <div\n class=\"eui-li-rep eui-tree-node eui-tree-node--with-child\"\n [class.eui-tree-node--first]=\"treeRunTimeItemModel?.path === '0'\"\n [class.eui-tree-node--last]=\"treeRunTimeItemModel.last\"\n *ngIf=\"treeRunTimeItemModel\"\n title=\"{{\n getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.tooltipLabel ||\n getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.label\n }}\">\n <div\n class=\"eui-tree-node-wrapper\">\n <!--Here wraps the node, and listen for node clicks.-->\n <div (click)=\"onNodeClick(treeRunTimeItemModel)\" class=\"eui-tree-node-wrapper__container\">\n <!-- Expand/collapse action button -->\n <button\n euiButton\n euiIconButton\n euiBasicButton\n euiRounded\n euiSizeS\n type=\"button\"\n [attr.aria-label]=\"'Toggle ' + getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.label\"\n (click)=\"onNodeToggle(treeRunTimeItemModel)\"\n cdkTreeNodeToggle\n class=\"eui-tree-node__button\">\n <eui-icon-svg\n *ngIf=\"!cdkTreeControl.isExpanded(treeRunTimeItemModel) && !collapsedIconClass\"\n [icon]=\"expandedSvgIconClass\"></eui-icon-svg>\n <eui-icon-svg\n *ngIf=\"cdkTreeControl.isExpanded(treeRunTimeItemModel) && !expandedIconClass\"\n [icon]=\"collapsedSvgIconClass\"></eui-icon-svg>\n </button>\n <!--\n Renders node in default or provided template's context.\n Generates onSelect with onSelectFn for developers to send the events from their custom check events.\n Provides id to be used on generic template\n -->\n <ng-container\n [ngTemplateOutlet]=\"nodeTemplateRef || nodeTemplateDefault\"\n [ngTemplateOutletContext]=\"{\n $implicit: getTreeItem(treeRunTimeItemModel.path)?.node,\n onSelect: onSelectFn(treeRunTimeItemModel.path),\n id: uid + treeRunTimeItemModel.path,\n path: treeRunTimeItemModel.path,\n children: getTreeItem(treeRunTimeItemModel?.path)?.children\n }\">\n </ng-container>\n </div>\n </div>\n <!--uses cdkTreeNodeOutlet to render children nodes, CdkTreeControl is used to control isExpanded state.-->\n <div class=\"eui-ul-rep eui-tree-node\" role=\"group\" *ngIf=\"cdkTreeControl.isExpanded(treeRunTimeItemModel)\">\n <ng-container cdkTreeNodeOutlet></ng-container>\n </div>\n </div>\n </cdk-nested-tree-node>\n </cdk-tree>\n</div>\n\n<ng-template #nodeTemplateDefault let-node let-onSelect=\"onSelect\" let-id=\"id\" let-path=\"path\">\n <ng-container *ngIf=\"node\">\n <div class=\"eui-tree-node-wrapper__container-left\" [class.eui-tree-node-wrapper__container-left--selected]=\"node?.isSelected\">\n <!--input checkbox area-->\n <input\n euiInputCheckBox\n *ngIf=\"node && node.selectable\"\n type=\"checkbox\"\n id=\"{{ id }}\"\n [checked]=\"!!node?.isSelected\"\n [indeterminate]=\"!!node?.isIndeterminate\"\n (change)=\"onSelect($event)\"\n class=\"eui-u-mr-m\" />\n\n <!--icon area-->\n <ng-container *ngIf=\"node?.treeContentBlock?.iconSvgName\">\n <eui-icon-svg\n icon=\"{{ node?.treeContentBlock?.iconSvgName }}\"\n fillColor=\"{{ node?.treeContentBlock?.iconTypeClass || 'neutral' }}\"\n size=\"s\"\n class=\"eui-u-mr-xs\">\n </eui-icon-svg>\n </ng-container>\n\n <!--chips area-->\n <ng-container *ngIf=\"node?.treeContentBlock?.chips\">\n <eui-chip\n *ngFor=\"let chip of node.treeContentBlock.chips\"\n euiSizeS\n [euiVariant]=\"chip.typeClass || 'secondary'\"\n [euiOutline]=\"chip.isOutline\"\n class=\"eui-chip--rounded eui-u-mb-none eui-u-mr-xs\">\n <span euiLabel>{{ chip.label }}</span>\n </eui-chip>\n </ng-container>\n\n <!--badge (typeLabel & typeClass) area-->\n <ng-container *ngIf=\"node?.treeContentBlock?.typeLabel\" [ngSwitch]=\"node?.treeContentBlock?.typeClass\">\n <eui-badge euiSizeM [euiVariant]=\"node?.treeContentBlock?.typeClass || 'primary'\" class=\"eui-u-flex-no-shrink eui-u-mr-xs\">\n {{ node?.treeContentBlock?.typeLabel }}\n </eui-badge>\n </ng-container>\n </div>\n\n <!--label area-->\n <div class=\"eui-tree-node-wrapper__container-middle\">\n <label\n *ngIf=\"!node?.treeContentBlock?.url && !node?.treeContentBlock?.urlExternal\"\n euiLabel\n for=\"{{ id }}\"\n class=\"eui-u-text-truncate eui-u-p-2xs\"\n [class.eui-label--selected]=\"\n highlightPath\n ? getRunTimeSelectionRecursiveState(path)?.selectionRecursiveState === 'indeterminate' || node?.isSelected\n : node?.isSelected\n \"\n [class.eui-u-cursor-pointer]=\"node?.selectable\">\n {{ autoTranslate ? (node?.treeContentBlock?.label | translate) : node?.treeContentBlock?.label }}\n </label>\n <label *ngIf=\"node?.treeContentBlock?.url\" euiLabel for=\"{{ id }}\" class=\"eui-u-text-truncate eui-u-p-2xs\">\n <a\n class=\"eui-u-text-link\"\n [class.eui-u-text-link-standalone]=\"!showUnderlinedLinks\"\n [routerLink]=\"node?.treeContentBlock?.url\">\n {{ autoTranslate ? (node?.treeContentBlock?.label | translate) : node?.treeContentBlock?.label }}\n </a>\n </label>\n <label *ngIf=\"node?.treeContentBlock?.urlExternal\" euiLabel for=\"{{ id }}\" class=\"eui-u-text-truncate eui-u-p-2xs\">\n <a\n class=\"eui-u-text-link-external\"\n [class.eui-u-text-link-external-standalone]=\"!showUnderlinedLinks\"\n href=\"{{ node?.treeContentBlock?.urlExternal }}\"\n target=\"{{ node?.treeContentBlock?.urlExternalTarget || 'blank' }}\">\n {{ autoTranslate ? (node?.treeContentBlock?.label | translate) : node?.treeContentBlock?.label }}\n </a>\n </label>\n </div>\n\n <div *ngIf=\"node?.treeContentBlock?.rightContent\" class=\"eui-tree-node-wrapper__container-right\">\n <!--badges area-->\n <ng-container *ngFor=\"let badge of node.treeContentBlock.rightContent?.badges\">\n <eui-badge euiOutline [euiVariant]=\"badge.typeClass || 'secondary'\" class=\"eui-u-ml-xs\">\n <span euiLabel>{{ badge.label }}</span>\n </eui-badge>\n </ng-container>\n\n <!--chips area-->\n <ng-container *ngFor=\"let chip of node.treeContentBlock.rightContent?.chips\">\n <eui-chip\n euiSizeS\n [euiVariant]=\"chip.typeClass || 'secondary'\"\n [euiOutline]=\"chip.isOutline\"\n class=\"eui-chip--rounded eui-u-mb-none eui-u-ml-xs\">\n <span euiLabel>{{ chip.label }}</span>\n </eui-chip>\n </ng-container>\n\n <!--Context menu-->\n <ng-container *ngIf=\"node.treeContentBlock.rightContent?.contextMenuMetaData && rightContextMenuTemplateRef\">\n <eui-dropdown class=\"eui-u-ml-xs\">\n <button euiButton euiSizeS euiRounded euiIconButton euiBasicButton euiSecondary [attr.aria-label]=\"'Options menu'\">\n <eui-icon-svg icon=\"ellipsis-vertical:sharp\"></eui-icon-svg>\n </button>\n <eui-dropdown-content>\n <ng-template\n [ngTemplateOutlet]=\"rightContextMenuTemplateRef\"\n [ngTemplateOutletContext]=\"{\n $implicit: node?.treeContentBlock?.rightContent?.contextMenuMetaData,\n metadata: node?.treeContentBlock?.rightContent?.contextMenuMetaData\n }\">\n </ng-template>\n </eui-dropdown-content>\n </eui-dropdown>\n </ng-container>\n </div>\n\n <!--metadata, uses the help of ng template to generate dynamic expand variable without handling state -->\n <ng-container\n *ngIf=\"node.treeContentBlock?.metadata && nodeContentMetadataTemplateRef\"\n [ngTemplateOutlet]=\"nodeContentMetadataContainer\"\n [ngTemplateOutletContext]=\"{\n $implicit: { expanded: false }\n }\">\n </ng-container>\n <ng-template #nodeContentMetadataContainer let-metaDataContainer>\n <button\n euiButton\n euiBasicButton\n euiIconButton\n euiRounded\n euiSizeS\n type=\"button\"\n aria-label=\"expand collapse tree item\"\n (click)=\"metaDataContainer.expanded = !metaDataContainer.expanded\">\n <eui-icon-svg [icon]=\"metaDataContainer.expanded ? 'chevron-down:sharp' : 'chevron-forward:sharp'\"></eui-icon-svg>\n </button>\n <div *ngIf=\"metaDataContainer.expanded\" class=\"eui-tree-node__metacontent\">\n <!--passing metadata of the node content to provided template-ref:nodeContentMetadataTemplateRef-->\n <ng-template\n [ngTemplateOutlet]=\"nodeContentMetadataTemplateRef\"\n [ngTemplateOutletContext]=\"{\n $implicit: node?.treeContentBlock?.metadata,\n metadata: node?.treeContentBlock?.metadata\n }\">\n </ng-template>\n </div>\n </ng-template>\n </ng-container>\n</ng-template>\n", styles: [".eui-tree{display:flex;overflow-x:hidden;overflow-y:auto;position:relative;width:100%}.eui-tree .eui-tree__wrapper{display:flex;list-style:none;margin:0;overflow-y:auto;padding:var(--eui-s-2xs);position:relative;width:100%}.eui-tree .eui-tree__wrapper::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-c-neutral-bg-light)}.eui-tree .eui-tree__wrapper::-webkit-scrollbar-thumb{background-color:var(--eui-c-neutral-lightest);border-radius:5rem}.eui-tree .eui-tree__wrapper::-webkit-scrollbar-thumb:hover{background-color:var(--eui-c-neutral-lighter)}.eui-tree .eui-tree__wrapper::-webkit-scrollbar-track{background-color:var(--eui-c-neutral-bg-light);border-radius:0}.eui-tree .eui-tree__wrapper .eui-cdk-tree{display:flex;flex-direction:column;width:100%}.eui-tree .eui-tree__wrapper .eui-cdk-tree .eui-cdk-nested-tree-node{display:flex;width:auto}.eui-tree .eui-tree__wrapper .eui-cdk-tree .eui-cdk-nested-tree-node:not(.eui-cdk-nested-tree-node--with-child){padding-inline-start:var(--eui-s-xl)}.eui-tree .eui-tree__wrapper .eui-cdk-tree .eui-cdk-nested-tree-node--with-child{display:flex;width:100%}.eui-tree .eui-tree__wrapper .eui-tree-node{display:flex;flex-direction:column;width:100%}.eui-tree .eui-tree__wrapper .eui-tree-node__metacontent{display:flex}.eui-tree .eui-tree__wrapper .eui-tree-node__button{margin-left:calc(-3 * var(--eui-s-2xs));margin-right:var(--eui-s-2xs)}.eui-tree .eui-tree__wrapper .eui-tree-node-wrapper{align-items:center;display:flex;min-height:var(--eui-s-xl);width:100%}.eui-tree .eui-tree__wrapper .eui-tree-node-wrapper:hover{background-color:var(--eui-c-neutral-bg-light)}.eui-tree .eui-tree__wrapper .eui-tree-node-wrapper__container{align-items:center;display:flex;width:100%}.eui-tree .eui-tree__wrapper .eui-tree-node-wrapper__container-left{align-items:center;display:flex;justify-content:flex-start}.eui-tree .eui-tree__wrapper .eui-tree-node-wrapper__container-middle{align-items:center;display:flex;justify-content:flex-start;overflow:hidden;width:100%}.eui-tree .eui-tree__wrapper .eui-tree-node-wrapper__container-right{align-items:center;display:flex;justify-content:flex-end;margin-left:auto}.eui-tree:not(.eui-tree--with-children) .eui-tree__wrapper .eui-cdk-tree .eui-cdk-nested-tree-node{padding-inline-start:2px}.eui-tree.eui-tree--show-lines.eui-tree--with-children div.eui-ul-rep{padding-inline-start:var(--eui-s-s)}.eui-tree.eui-tree--show-lines.eui-tree--with-children div.eui-ul-rep:before{border-left:1px solid var(--eui-c-neutral-lightest);content:\"\";height:calc(100% - var(--eui-s-m) - var(--eui-s-xl));position:absolute;top:var(--eui-s-xl)}.eui-tree.eui-tree--show-lines.eui-tree--with-children div.eui-ul-rep:first-child:before{height:calc(100% - var(--eui-s-m) - var(--eui-s-2xs));top:0}.eui-tree.eui-tree--show-lines.eui-tree--with-children div.eui-li-rep{padding-inline-start:var(--eui-s-s);position:relative}.eui-tree.eui-tree--show-lines.eui-tree--with-children div.eui-li-rep:before:not(.eui-tree-node--first){border-top:1px solid var(--eui-c-neutral-lightest);content:\"\";display:block;height:0;left:0;position:absolute;top:var(--eui-s-m);width:var(--eui-s-xl)}.eui-tree.eui-tree--show-lines.eui-tree--with-children div.eui-li-rep.eui-tree-node:not(.eui-tree-node--with-child):before{position:relative;left:0;display:inline-flex;width:var(--eui-s-2xl);border-bottom:1px solid var(--eui-c-neutral-lightest);content:\"\";margin-left:calc(-2 * var(--eui-s-l) + var(--eui-s-2xs));top:var(--eui-s-m)}.eui-tree.eui-tree--show-lines.eui-tree--with-children div.eui-li-rep.eui-tree-node.eui-tree-node--with-child:before{position:absolute;left:calc(1 * var(--eui-s-2xl) + var(--eui-s-2xs));display:inline-flex;width:var(--eui-s-s);border-bottom:1px solid var(--eui-c-neutral-lightest);border-left:1px solid var(--eui-c-neutral-lightest);content:\"\";margin-left:calc(-2 * var(--eui-s-l) + var(--eui-s-2xs));top:var(--eui-s-m)}.eui-tree.eui-tree--show-lines.eui-tree--with-children div.eui-li-rep.eui-tree-node--last:before{height:auto;top:var(--eui-s-m)}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i4.EuiInputCheckboxComponent, selector: "input[euiInputCheckBox]", inputs: ["indeterminate", "isInvalid", "checked"], outputs: ["indeterminateChange"] }, { kind: "directive", type: i5.CdkNestedTreeNode, selector: "cdk-nested-tree-node", exportAs: ["cdkNestedTreeNode"] }, { kind: "directive", type: i5.CdkTreeNodeDef, selector: "[cdkTreeNodeDef]", inputs: ["cdkTreeNodeDefWhen"] }, { kind: "directive", type: i5.CdkTreeNodeToggle, selector: "[cdkTreeNodeToggle]", inputs: ["cdkTreeNodeToggleRecursive"] }, { kind: "component", type: i5.CdkTree, selector: "cdk-tree", inputs: ["dataSource", "treeControl", "trackBy"], exportAs: ["cdkTree"] }, { kind: "directive", type: i5.CdkTreeNodeOutlet, selector: "[cdkTreeNodeOutlet]" }, { kind: "component", type: i6.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "euiIconButton", "euiLineWrap", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i7.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "euiVariant", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i8.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label, label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }, { kind: "component", type: i9.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["e2eAttr", "aria-label", "maxCharCount", "charReplacement", "euiIconBadge", "euiDottedBadge"] }, { kind: "component", type: i10.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["ariaLabel", "e2eAttr", "euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isSquared", "isFilled"], outputs: ["remove"] }, { kind: "component", type: i11.EuiDropdownComponent, selector: "eui-dropdown", inputs: ["e2eAttr", "tabIndex", "width", "position", "isBlock", "isDropDownRightAligned", "hasClosedOnClickInside", "isLabelUpdatedFromSelectedItem", "isExpandOnHover", "hasTabNavigation", "isRightClickEnabled", "euiDisabled"], outputs: ["expand"] }, { kind: "directive", type: i11.EuiDropdownContentDirective, selector: "eui-dropdown-content" }, { kind: "directive", type: i1.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "pipe", type: i12.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
831
831
  }
832
832
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: EuiTreeComponent, decorators: [{
833
833
  type: Component,
package/eui-chip/eui-chip.component.d.ts CHANGED
@@ -17,6 +17,7 @@ export declare class EuiChipComponent implements AfterContentInit {
17
17
  data: any;
18
18
  isChipRemovable: boolean;
19
19
  isSquared: boolean;
20
+ isFilled: boolean;
20
21
  remove: EventEmitter<EuiChip | EuiChipComponent | {
21
22
  chip: EuiChipComponent | EuiChip;
22
23
  event?: Event;
@@ -27,8 +28,9 @@ export declare class EuiChipComponent implements AfterContentInit {
27
28
  ngAfterContentInit(): void;
28
29
  onRemove(event?: Event): void;
29
30
  static ɵfac: i0.ɵɵFactoryDeclaration<EuiChipComponent, never>;
30
- static ɵcmp: i0.ɵɵComponentDeclaration<EuiChipComponent, "eui-chip, span[euiChip], li[euiChip]", never, { "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "e2eAttr": { "alias": "e2eAttr"; "required": false; }; "euiInternalId": { "alias": "euiInternalId"; "required": false; }; "tooltipMessage": { "alias": "tooltipMessage"; "required": false; }; "id": { "alias": "id"; "required": false; }; "data": { "alias": "data"; "required": false; }; "isChipRemovable": { "alias": "isChipRemovable"; "required": false; }; "isSquared": { "alias": "isSquared"; "required": false; }; }, { "remove": "remove"; }, ["euiIcons"], ["*"], false, [{ directive: typeof i1.BaseStatesDirective; inputs: { "euiPrimary": "euiPrimary"; "euiSecondary": "euiSecondary"; "euiSuccess": "euiSuccess"; "euiInfo": "euiInfo"; "euiWarning": "euiWarning"; "euiDanger": "euiDanger"; "euiAccent": "euiAccent"; "euiVariant": "euiVariant"; "euiOutline": "euiOutline"; "euiDisabled": "euiDisabled"; }; outputs: {}; }]>;
31
+ static ɵcmp: i0.ɵɵComponentDeclaration<EuiChipComponent, "eui-chip, span[euiChip], li[euiChip]", never, { "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "e2eAttr": { "alias": "e2eAttr"; "required": false; }; "euiInternalId": { "alias": "euiInternalId"; "required": false; }; "tooltipMessage": { "alias": "tooltipMessage"; "required": false; }; "id": { "alias": "id"; "required": false; }; "data": { "alias": "data"; "required": false; }; "isChipRemovable": { "alias": "isChipRemovable"; "required": false; }; "isSquared": { "alias": "isSquared"; "required": false; }; "isFilled": { "alias": "isFilled"; "required": false; }; }, { "remove": "remove"; }, ["euiIcons"], ["*"], false, [{ directive: typeof i1.BaseStatesDirective; inputs: { "euiPrimary": "euiPrimary"; "euiSecondary": "euiSecondary"; "euiSuccess": "euiSuccess"; "euiInfo": "euiInfo"; "euiWarning": "euiWarning"; "euiDanger": "euiDanger"; "euiAccent": "euiAccent"; "euiVariant": "euiVariant"; "euiOutline": "euiOutline"; "euiDisabled": "euiDisabled"; }; outputs: {}; }]>;
31
32
  static ngAcceptInputType_isChipRemovable: unknown;
32
33
  static ngAcceptInputType_isSquared: unknown;
34
+ static ngAcceptInputType_isFilled: unknown;
33
35
  }
34
36
  //# sourceMappingURL=eui-chip.component.d.ts.map
package/eui-chip/eui-chip.component.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"eui-chip.component.d.ts","sourceRoot":"","sources":["../../eui-chip/eui-chip.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAQH,SAAS,EACT,gBAAgB,EAEhB,YAAY,EAEZ,UAAU,EAEb,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAE/D,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;;;AAElD,qBAyBa,gBAAiB,YAAW,gBAAgB;IA0CjD,OAAO,CAAC,WAAW;IACZ,mBAAmB,EAAE,mBAAmB;IA1CnD,IACI,UAAU,IAAI,MAAM,CAOvB;IAEyB,IAAI,SAAY;IACD,SAAS,SAAkB;IAIpE,OAAO,SAAc;IAEZ,aAAa,EAAE,MAAM,CAAQ;IAC7B,cAAc,EAAE,MAAM,CAAC;IACvB,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IAIpB,IAAI,EAAE,GAAG,CAOhB;IAEsC,eAAe,UAAS;IACxB,SAAS,UAAS;IAEhD,MAAM;cAAyD,gBAAgB,GAAG,OAAO;gBAAU,KAAK;OAAM;IAEhE,QAAQ,EAAE,SAAS,CAAC,mBAAmB,CAAC,CAAC;IACzE,SAAS,EAAE,UAAU,CAAC,gBAAgB,CAAC,CAAC;gBAGpD,WAAW,EAAE,UAAU,EACxB,mBAAmB,EAAE,mBAAmB;IAInD,kBAAkB,IAAI,IAAI;IAUnB,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,GAAG,IAAI;yCAzD3B,gBAAgB;2CAAhB,gBAAgB;8CAiE4wxB,OAAQ;wCAAR,OAAQ;CADhzxB"}
1
+ {"version":3,"file":"eui-chip.component.d.ts","sourceRoot":"","sources":["../../eui-chip/eui-chip.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAQH,SAAS,EACT,gBAAgB,EAEhB,YAAY,EAEZ,UAAU,EAEb,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAE/D,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;;;AAElD,qBAyBa,gBAAiB,YAAW,gBAAgB;IA0CjD,OAAO,CAAC,WAAW;IACZ,mBAAmB,EAAE,mBAAmB;IA1CnD,IACI,UAAU,IAAI,MAAM,CAMvB;IAEyB,IAAI,SAAY;IACD,SAAS,SAAkB;IAIpE,OAAO,SAAc;IAEZ,aAAa,EAAE,MAAM,CAAQ;IAC7B,cAAc,EAAE,MAAM,CAAC;IACvB,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IAIpB,IAAI,EAAE,GAAG,CAOhB;IAEsC,eAAe,UAAS;IACxB,SAAS,UAAS;IAClB,QAAQ,UAAS;IAE/C,MAAM;cAAyD,gBAAgB,GAAG,OAAO;gBAAU,KAAK;OAAM;IAEhE,QAAQ,EAAE,SAAS,CAAC,mBAAmB,CAAC,CAAC;IACzE,SAAS,EAAE,UAAU,CAAC,gBAAgB,CAAC,CAAC;gBAGpD,WAAW,EAAE,UAAU,EACxB,mBAAmB,EAAE,mBAAmB;IAInD,kBAAkB,IAAI,IAAI;IAUnB,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,GAAG,IAAI;yCAzD3B,gBAAgB;2CAAhB,gBAAgB;8CAiEorxB,OAAQ;wCAAR,OAAQ;uCAAR,OAAQ;CADxtxB"}
package/fesm2022/eui-components-eui-chip-list.mjs CHANGED
@@ -276,7 +276,7 @@ class EuiChipListComponent {
276
276
  return tab;
277
277
  }
278
278
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: EuiChipListComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: EuiChipListDragService }, { token: i2.DomSanitizer }, { token: i3.BaseStatesDirective }], target: i0.ɵɵFactoryTarget.Component }); }
279
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0", type: EuiChipListComponent, selector: "eui-chip-list, div[euiChipList], ul[euiChipList]", inputs: { chips: "chips", toggleLinkMoreLabel: "toggleLinkMoreLabel", toggleLinkLessLabel: "toggleLinkLessLabel", chipsSortOrder: "chipsSortOrder", dragAndDropSourceName: "dragAndDropSourceName", dragAndDropConnectedTo: "dragAndDropConnectedTo", ariaLabel: "ariaLabel", dropListOrientation: "dropListOrientation", isSquared: ["isSquared", "isSquared", booleanAttribute], isChipsRemovable: ["isChipsRemovable", "isChipsRemovable", booleanAttribute], isMaxVisibleChipsOpened: ["isMaxVisibleChipsOpened", "isMaxVisibleChipsOpened", booleanAttribute], isChipsSorted: ["isChipsSorted", "isChipsSorted", booleanAttribute], isChipsDragAndDrop: ["isChipsDragAndDrop", "isChipsDragAndDrop", booleanAttribute], isGrid: ["isGrid", "isGrid", booleanAttribute], maxVisibleChipsCount: ["maxVisibleChipsCount", "maxVisibleChipsCount", numberAttribute], chipsLabelTruncateCount: ["chipsLabelTruncateCount", "chipsLabelTruncateCount", numberAttribute] }, outputs: { chipsInit: "chipsInit", chipRemove: "chipRemove", chipDragStart: "chipDragStart", chipDragRelease: "chipDragRelease", chipDrop: "chipDrop", chiplistFocus: "chiplistFocus" }, host: { properties: { "attr.aria-label": "this.ariaLabel", "class": "this.cssClasses" } }, queries: [{ propertyName: "euiChipsContent", predicate: i0.forwardRef(() => EuiChipComponent) }], viewQueries: [{ propertyName: "chipListDropList", first: true, predicate: ["chipListDropList"], descendants: true, read: CdkDropList }, { propertyName: "chipListDragAndDropItems", first: true, predicate: ["chipListDragAndDropItems"], descendants: true, read: CdkDropList }, { propertyName: "euiChipItems", predicate: ["euiChipItem"], descendants: true, read: ElementRef }], usesOnChanges: true, hostDirectives: [{ directive: i3.BaseStatesDirective, inputs: ["euiPrimary", "euiPrimary", "euiSecondary", "euiSecondary", "euiSuccess", "euiSuccess", "euiInfo", "euiInfo", "euiWarning", "euiWarning", "euiDanger", "euiDanger", "euiAccent", "euiAccent", "euiVariant", "euiVariant", "euiOutline", "euiOutline", "euiDisabled", "euiDisabled"] }], ngImport: i0, template: "<div *ngIf=\"!isGrid\" class=\"eui-chip-list-container\">\n <div class=\"eui-chip-list-wrapper\">\n <div\n role=\"list\"\n #chipList\n #chipListDropList\n #chipListDragAndDropItems\n cdkDropList\n [cdkDropListOrientation]=\"dropListOrientation\"\n [cdkDropListDisabled]=\"!isChipsDragAndDrop\"\n [cdkDropListData]=\"{ chips }\"\n [cdkDropListConnectedTo]=\"droppableArea\"\n (cdkDropListDropped)=\"drop($event)\"\n (focus)=\"onFocus()\"\n class=\"eui-chip-list__list\">\n <div\n class=\"eui-chip-list__chip-container\"\n *ngFor=\"let chip of chips; let i = index; trackBy: trackByFn\"\n cdkDrag\n [cdkDragData]=\"chip\"\n (cdkDragStarted)=\"onDragStarted($event)\"\n (cdkDragReleased)=\"onDragReleased($event)\">\n <eui-chip\n #euiChipItem\n *ngIf=\"\n (maxVisibleChipsCount && isMaxVisibleChipsOpened) ||\n (maxVisibleChipsCount && maxVisibleChipsCount > i) ||\n !maxVisibleChipsCount\n \"\n [data]=\"chip.data ? chip.data : chip\"\n [attr.role]=\"'listitem'\"\n ariaLabel=\"{{ getChipLabel(chip) }}\"\n [euiInternalId]=\"chip.euiInternalId\"\n [isChipRemovable]=\"chip.isChipRemovable || (isChipsRemovable && chip.isRemovable) !== false\"\n [euiOutline]=\"chip.euiOutline || this.baseStatesDirective?.euiOutline || chip.isOutline\"\n [euiVariant]=\"chip.typeClass || this.baseStatesDirective?.euiVariant || chip.baseStatesDirective?.euiVariant\"\n [euiDisabled]=\"chip.euiDisabled || this.baseStatesDirective?.euiDisabled || chip.isDisabled\"\n [euiTooltip]=\"chip.tooltipMessage\"\n [position]=\"chip.tooltip?.position\"\n [contentAlignment]=\"chip.tooltip?.contentAlignment\"\n (remove)=\"onRemove($event)\">\n <eui-icon-svg *ngIf=\"chip.iconSvgName\" [icon]=\"chip.iconSvgName\"></eui-icon-svg>\n <span *ngIf=\"chip.iconClass\" class=\"{{ chip.iconClass }}\"></span>\n <span class=\"eui-chip-list__chip-content\" *ngIf=\"!chipsLabelTruncateCount\" [innerHTML]=\"getChipContent(chip)\"></span>\n <span *ngIf=\"chipsLabelTruncateCount\" title=\"{{ getChipLabel(chip) }}\">{{\n getChipLabel(chip) | euiTruncate: chipsLabelTruncateCount\n }}</span>\n </eui-chip>\n </div>\n <ng-container *ngTemplateOutlet=\"euiChipListAppendContent\"></ng-container>\n </div>\n </div>\n <ng-container *ngTemplateOutlet=\"additionalContent\"></ng-container>\n</div>\n\n<div *ngIf=\"isGrid\" class=\"eui-chip-list-container\">\n <div class=\"eui-chip-list-wrapper\">\n <div class=\"eui-chip-list__group\" cdkDropListGroup>\n <div\n role=\"list\"\n #chipList\n #chipListDropList\n #chipListDragAndDropItems\n cdkDropList\n *ngFor=\"let chip of chips; let i = index\"\n [cdkDropListDisabled]=\"!isChipsDragAndDrop\"\n [cdkDropListData]=\"{ chip: chip, index: i }\"\n (focus)=\"onFocus()\"\n (cdkDropListDropped)=\"onDropGrid($event)\"\n class=\"eui-chip-list__custom\">\n <div\n class=\"eui-chip-list__chip-container\"\n cdkDrag\n [cdkDragData]=\"{ chip: chip, index: i }\"\n (cdkDragStarted)=\"onDragStarted($event)\"\n (cdkDragReleased)=\"onDragReleased($event)\"\n (cdkDragEntered)=\"onDragEnter($event)\">\n <eui-chip\n #euiChipItem\n *ngIf=\"\n (maxVisibleChipsCount && isMaxVisibleChipsOpened) ||\n (maxVisibleChipsCount && maxVisibleChipsCount > i) ||\n !maxVisibleChipsCount\n \"\n [data]=\"chip.data ? chip.data : chip\"\n [id]=\"chip.id\"\n [attr.role]=\"'listitem'\"\n ariaLabel=\"{{ getChipLabel(chip) }}\"\n [euiInternalId]=\"chip.euiInternalId\"\n [isChipRemovable]=\"chip.isChipRemovable || (isChipsRemovable && chip.isRemovable) !== false\"\n [euiOutline]=\"chip.euiOutline || this.baseStatesDirective?.euiOutline || chip.isOutline\"\n [euiVariant]=\"chip.typeClass || this.baseStatesDirective?.euiVariant || chip.baseStatesDirective?.euiVariant\"\n [euiDisabled]=\"chip.euiDisabled || this.baseStatesDirective?.euiDisabled || chip.isDisabled\"\n [euiTooltip]=\"chip.tooltipMessage\"\n [position]=\"chip.tooltip?.position\"\n [contentAlignment]=\"chip.tooltip?.contentAlignment\"\n (remove)=\"onRemove($event)\">\n <eui-icon-svg *ngIf=\"chip.iconSvgName\" [icon]=\"chip.iconSvgName\"></eui-icon-svg>\n <span *ngIf=\"!chipsLabelTruncateCount\" [innerHTML]=\"getChipContent(chip)\"></span>\n <span *ngIf=\"chipsLabelTruncateCount\" title=\"{{ getChipLabel(chip) }}\">{{\n getChipLabel(chip) | euiTruncate: chipsLabelTruncateCount\n }}</span>\n </eui-chip>\n </div>\n </div>\n <ng-container *ngTemplateOutlet=\"euiChipListAppendContent\"></ng-container>\n </div>\n </div>\n <ng-container *ngTemplateOutlet=\"additionalContent\"></ng-container>\n</div>\n\n<ng-template #euiChipListAppendContent>\n <ng-content select=\"euiChipListAppendContent\"></ng-content>\n</ng-template>\n\n<ng-template #additionalContent>\n <ng-container *ngIf=\"maxVisibleChipsCount && chips && chips.length > maxVisibleChipsCount\">\n <div class=\"eui-chip-list__expand-button-wrapper\">\n <button\n euiButton\n euiBasicButton\n euiButtonSecondary\n euiSizeS\n type=\"button\"\n class=\"eui-chip-list__expand-button\"\n (click)=\"toggleTags()\"\n *ngIf=\"isMaxVisibleChipsOpened\">\n <eui-icon-svg icon=\"chevron-back:sharp\" aria-label=\"Collapse icon\"></eui-icon-svg>\n <span euiLabel *ngIf=\"toggleLinkLessLabel\">{{ toggleLinkLessLabel | translate }}</span>\n </button>\n <button\n euiButton\n euiBasicButton\n euiButtonSecondary\n euiSizeS\n type=\"button\"\n aria-haspopup=\"true\"\n class=\"eui-chip-list__expand-button\"\n (click)=\"toggleTags()\"\n *ngIf=\"!isMaxVisibleChipsOpened\">\n <span euiLabel *ngIf=\"toggleLinkMoreLabel\">{{ toggleLinkMoreLabel | translate }}</span>\n <eui-icon-svg icon=\"chevron-forward:sharp\" aria-label=\"Expand icon\"></eui-icon-svg>\n </button>\n </div>\n </ng-container>\n</ng-template>\n", styles: [".eui-chip-list{align-items:center;display:flex;margin:0;padding:0}.eui-chip-list .eui-chip-list-container{align-items:center;display:flex;width:100%}.eui-chip-list .eui-chip-list-container .eui-chip-list-wrapper{align-items:center;display:flex;width:100%;flex-wrap:wrap}.eui-chip-list .eui-chip-list-container .eui-chip-list-wrapper .eui-chip-list__list{flex-wrap:wrap}.eui-chip-list .eui-chip-list-container .eui-chip-list-wrapper .eui-chip-list__chip-container{align-items:center;display:inline-flex}.eui-chip-list .eui-chip-list-container .eui-chip-list-wrapper .eui-chip-list__chip-container .eui-chip{margin-bottom:var(--eui-s-2xs);margin-right:var(--eui-s-2xs)}.eui-chip-list[ischipsdraganddrop] .eui-chip-list-container{width:100%}.eui-chip-list__group{display:flex;flex-wrap:wrap}.eui-chip-list__chip-container.cdk-drag:not(.cdk-drag-disabled){cursor:move!important}.eui-chip-list__custom{min-width:auto!important;width:auto!important}.eui-chip-list__chip-content{display:flex;align-items:center;gap:var(--eui-s-xs)}@media screen and (max-width: 767px){.eui-chip-list .eui-chip-list-container{flex-wrap:wrap}}@media screen and (min-width: 768px) and (max-width: 995px){.eui-chip-list .eui-chip-list-container{flex-wrap:wrap}}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["ariaLabel", "e2eAttr", "euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isSquared"], outputs: ["remove"] }, { kind: "component", type: i6.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "euiIconButton", "euiLineWrap", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i7.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "euiVariant", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i8.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label, label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }, { kind: "directive", type: i9.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i9.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i9.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i10.EuiTooltipDirective, selector: "[euiTooltip]", inputs: ["e2eAttr", "showDelay", "hideDelay", "contentAlignment", "position", "isDisabled", "euiTooltip", "euiTooltipPrimary", "euiTooltipSecondary", "euiTooltipInfo", "euiTooltipSuccess", "euiTooltipWarning", "euiTooltipDanger", "euiTooltipAccent"], exportAs: ["euiTooltip"] }, { kind: "pipe", type: i11.TranslatePipe, name: "translate" }, { kind: "pipe", type: i12.EuiTruncatePipe, name: "euiTruncate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
279
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0", type: EuiChipListComponent, selector: "eui-chip-list, div[euiChipList], ul[euiChipList]", inputs: { chips: "chips", toggleLinkMoreLabel: "toggleLinkMoreLabel", toggleLinkLessLabel: "toggleLinkLessLabel", chipsSortOrder: "chipsSortOrder", dragAndDropSourceName: "dragAndDropSourceName", dragAndDropConnectedTo: "dragAndDropConnectedTo", ariaLabel: "ariaLabel", dropListOrientation: "dropListOrientation", isSquared: ["isSquared", "isSquared", booleanAttribute], isChipsRemovable: ["isChipsRemovable", "isChipsRemovable", booleanAttribute], isMaxVisibleChipsOpened: ["isMaxVisibleChipsOpened", "isMaxVisibleChipsOpened", booleanAttribute], isChipsSorted: ["isChipsSorted", "isChipsSorted", booleanAttribute], isChipsDragAndDrop: ["isChipsDragAndDrop", "isChipsDragAndDrop", booleanAttribute], isGrid: ["isGrid", "isGrid", booleanAttribute], maxVisibleChipsCount: ["maxVisibleChipsCount", "maxVisibleChipsCount", numberAttribute], chipsLabelTruncateCount: ["chipsLabelTruncateCount", "chipsLabelTruncateCount", numberAttribute] }, outputs: { chipsInit: "chipsInit", chipRemove: "chipRemove", chipDragStart: "chipDragStart", chipDragRelease: "chipDragRelease", chipDrop: "chipDrop", chiplistFocus: "chiplistFocus" }, host: { properties: { "attr.aria-label": "this.ariaLabel", "class": "this.cssClasses" } }, queries: [{ propertyName: "euiChipsContent", predicate: i0.forwardRef(() => EuiChipComponent) }], viewQueries: [{ propertyName: "chipListDropList", first: true, predicate: ["chipListDropList"], descendants: true, read: CdkDropList }, { propertyName: "chipListDragAndDropItems", first: true, predicate: ["chipListDragAndDropItems"], descendants: true, read: CdkDropList }, { propertyName: "euiChipItems", predicate: ["euiChipItem"], descendants: true, read: ElementRef }], usesOnChanges: true, hostDirectives: [{ directive: i3.BaseStatesDirective, inputs: ["euiPrimary", "euiPrimary", "euiSecondary", "euiSecondary", "euiSuccess", "euiSuccess", "euiInfo", "euiInfo", "euiWarning", "euiWarning", "euiDanger", "euiDanger", "euiAccent", "euiAccent", "euiVariant", "euiVariant", "euiOutline", "euiOutline", "euiDisabled", "euiDisabled"] }], ngImport: i0, template: "<div *ngIf=\"!isGrid\" class=\"eui-chip-list-container\">\n <div class=\"eui-chip-list-wrapper\">\n <div\n role=\"list\"\n #chipList\n #chipListDropList\n #chipListDragAndDropItems\n cdkDropList\n [cdkDropListOrientation]=\"dropListOrientation\"\n [cdkDropListDisabled]=\"!isChipsDragAndDrop\"\n [cdkDropListData]=\"{ chips }\"\n [cdkDropListConnectedTo]=\"droppableArea\"\n (cdkDropListDropped)=\"drop($event)\"\n (focus)=\"onFocus()\"\n class=\"eui-chip-list__list\">\n <div\n class=\"eui-chip-list__chip-container\"\n *ngFor=\"let chip of chips; let i = index; trackBy: trackByFn\"\n cdkDrag\n [cdkDragData]=\"chip\"\n (cdkDragStarted)=\"onDragStarted($event)\"\n (cdkDragReleased)=\"onDragReleased($event)\">\n <eui-chip\n #euiChipItem\n *ngIf=\"\n (maxVisibleChipsCount && isMaxVisibleChipsOpened) ||\n (maxVisibleChipsCount && maxVisibleChipsCount > i) ||\n !maxVisibleChipsCount\n \"\n [data]=\"chip.data ? chip.data : chip\"\n [attr.role]=\"'listitem'\"\n ariaLabel=\"{{ getChipLabel(chip) }}\"\n [euiInternalId]=\"chip.euiInternalId\"\n [isChipRemovable]=\"chip.isChipRemovable || (isChipsRemovable && chip.isRemovable) !== false\"\n [euiOutline]=\"chip.euiOutline || this.baseStatesDirective?.euiOutline || chip.isOutline\"\n [euiVariant]=\"chip.typeClass || this.baseStatesDirective?.euiVariant || chip.baseStatesDirective?.euiVariant\"\n [euiDisabled]=\"chip.euiDisabled || this.baseStatesDirective?.euiDisabled || chip.isDisabled\"\n [euiTooltip]=\"chip.tooltipMessage\"\n [position]=\"chip.tooltip?.position\"\n [contentAlignment]=\"chip.tooltip?.contentAlignment\"\n (remove)=\"onRemove($event)\">\n <eui-icon-svg *ngIf=\"chip.iconSvgName\" [icon]=\"chip.iconSvgName\"></eui-icon-svg>\n <span *ngIf=\"chip.iconClass\" class=\"{{ chip.iconClass }}\"></span>\n <span class=\"eui-chip-list__chip-content\" *ngIf=\"!chipsLabelTruncateCount\" [innerHTML]=\"getChipContent(chip)\"></span>\n <span *ngIf=\"chipsLabelTruncateCount\" title=\"{{ getChipLabel(chip) }}\">{{\n getChipLabel(chip) | euiTruncate: chipsLabelTruncateCount\n }}</span>\n </eui-chip>\n </div>\n <ng-container *ngTemplateOutlet=\"euiChipListAppendContent\"></ng-container>\n </div>\n </div>\n <ng-container *ngTemplateOutlet=\"additionalContent\"></ng-container>\n</div>\n\n<div *ngIf=\"isGrid\" class=\"eui-chip-list-container\">\n <div class=\"eui-chip-list-wrapper\">\n <div class=\"eui-chip-list__group\" cdkDropListGroup>\n <div\n role=\"list\"\n #chipList\n #chipListDropList\n #chipListDragAndDropItems\n cdkDropList\n *ngFor=\"let chip of chips; let i = index\"\n [cdkDropListDisabled]=\"!isChipsDragAndDrop\"\n [cdkDropListData]=\"{ chip: chip, index: i }\"\n (focus)=\"onFocus()\"\n (cdkDropListDropped)=\"onDropGrid($event)\"\n class=\"eui-chip-list__custom\">\n <div\n class=\"eui-chip-list__chip-container\"\n cdkDrag\n [cdkDragData]=\"{ chip: chip, index: i }\"\n (cdkDragStarted)=\"onDragStarted($event)\"\n (cdkDragReleased)=\"onDragReleased($event)\"\n (cdkDragEntered)=\"onDragEnter($event)\">\n <eui-chip\n #euiChipItem\n *ngIf=\"\n (maxVisibleChipsCount && isMaxVisibleChipsOpened) ||\n (maxVisibleChipsCount && maxVisibleChipsCount > i) ||\n !maxVisibleChipsCount\n \"\n [data]=\"chip.data ? chip.data : chip\"\n [id]=\"chip.id\"\n [attr.role]=\"'listitem'\"\n ariaLabel=\"{{ getChipLabel(chip) }}\"\n [euiInternalId]=\"chip.euiInternalId\"\n [isChipRemovable]=\"chip.isChipRemovable || (isChipsRemovable && chip.isRemovable) !== false\"\n [euiOutline]=\"chip.euiOutline || this.baseStatesDirective?.euiOutline || chip.isOutline\"\n [euiVariant]=\"chip.typeClass || this.baseStatesDirective?.euiVariant || chip.baseStatesDirective?.euiVariant\"\n [euiDisabled]=\"chip.euiDisabled || this.baseStatesDirective?.euiDisabled || chip.isDisabled\"\n [euiTooltip]=\"chip.tooltipMessage\"\n [position]=\"chip.tooltip?.position\"\n [contentAlignment]=\"chip.tooltip?.contentAlignment\"\n (remove)=\"onRemove($event)\">\n <eui-icon-svg *ngIf=\"chip.iconSvgName\" [icon]=\"chip.iconSvgName\"></eui-icon-svg>\n <span *ngIf=\"!chipsLabelTruncateCount\" [innerHTML]=\"getChipContent(chip)\"></span>\n <span *ngIf=\"chipsLabelTruncateCount\" title=\"{{ getChipLabel(chip) }}\">{{\n getChipLabel(chip) | euiTruncate: chipsLabelTruncateCount\n }}</span>\n </eui-chip>\n </div>\n </div>\n <ng-container *ngTemplateOutlet=\"euiChipListAppendContent\"></ng-container>\n </div>\n </div>\n <ng-container *ngTemplateOutlet=\"additionalContent\"></ng-container>\n</div>\n\n<ng-template #euiChipListAppendContent>\n <ng-content select=\"euiChipListAppendContent\"></ng-content>\n</ng-template>\n\n<ng-template #additionalContent>\n <ng-container *ngIf=\"maxVisibleChipsCount && chips && chips.length > maxVisibleChipsCount\">\n <div class=\"eui-chip-list__expand-button-wrapper\">\n <button\n euiButton\n euiBasicButton\n euiButtonSecondary\n euiSizeS\n type=\"button\"\n class=\"eui-chip-list__expand-button\"\n (click)=\"toggleTags()\"\n *ngIf=\"isMaxVisibleChipsOpened\">\n <eui-icon-svg icon=\"chevron-back:sharp\" aria-label=\"Collapse icon\"></eui-icon-svg>\n <span euiLabel *ngIf=\"toggleLinkLessLabel\">{{ toggleLinkLessLabel | translate }}</span>\n </button>\n <button\n euiButton\n euiBasicButton\n euiButtonSecondary\n euiSizeS\n type=\"button\"\n aria-haspopup=\"true\"\n class=\"eui-chip-list__expand-button\"\n (click)=\"toggleTags()\"\n *ngIf=\"!isMaxVisibleChipsOpened\">\n <span euiLabel *ngIf=\"toggleLinkMoreLabel\">{{ toggleLinkMoreLabel | translate }}</span>\n <eui-icon-svg icon=\"chevron-forward:sharp\" aria-label=\"Expand icon\"></eui-icon-svg>\n </button>\n </div>\n </ng-container>\n</ng-template>\n", styles: [".eui-chip-list{align-items:center;display:flex;margin:0;padding:0}.eui-chip-list .eui-chip-list-container{align-items:center;display:flex;width:100%}.eui-chip-list .eui-chip-list-container .eui-chip-list-wrapper{align-items:center;display:flex;width:100%;flex-wrap:wrap}.eui-chip-list .eui-chip-list-container .eui-chip-list-wrapper .eui-chip-list__list{flex-wrap:wrap}.eui-chip-list .eui-chip-list-container .eui-chip-list-wrapper .eui-chip-list__chip-container{align-items:center;display:inline-flex}.eui-chip-list .eui-chip-list-container .eui-chip-list-wrapper .eui-chip-list__chip-container .eui-chip{margin-bottom:var(--eui-s-2xs);margin-right:var(--eui-s-2xs)}.eui-chip-list[ischipsdraganddrop] .eui-chip-list-container{width:100%}.eui-chip-list__group{display:flex;flex-wrap:wrap}.eui-chip-list__chip-container.cdk-drag:not(.cdk-drag-disabled){cursor:move!important}.eui-chip-list__custom{min-width:auto!important;width:auto!important}.eui-chip-list__chip-content{display:flex;align-items:center;gap:var(--eui-s-xs)}@media screen and (max-width: 767px){.eui-chip-list .eui-chip-list-container{flex-wrap:wrap}}@media screen and (min-width: 768px) and (max-width: 995px){.eui-chip-list .eui-chip-list-container{flex-wrap:wrap}}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["ariaLabel", "e2eAttr", "euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isSquared", "isFilled"], outputs: ["remove"] }, { kind: "component", type: i6.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "euiIconButton", "euiLineWrap", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i7.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "euiVariant", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i8.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label, label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }, { kind: "directive", type: i9.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i9.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i9.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i10.EuiTooltipDirective, selector: "[euiTooltip]", inputs: ["e2eAttr", "showDelay", "hideDelay", "contentAlignment", "position", "isDisabled", "euiTooltip", "euiTooltipPrimary", "euiTooltipSecondary", "euiTooltipInfo", "euiTooltipSuccess", "euiTooltipWarning", "euiTooltipDanger", "euiTooltipAccent"], exportAs: ["euiTooltip"] }, { kind: "pipe", type: i11.TranslatePipe, name: "translate" }, { kind: "pipe", type: i12.EuiTruncatePipe, name: "euiTruncate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
280
280
  }
281
281
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: EuiChipListComponent, decorators: [{
282
282
  type: Component,