@eui/ecl 16.2.5 → 16.2.6-snapshot-1699526694806

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.
@@ -10592,12 +10592,13 @@ class EclMultiselectMainInputClickEvent {
10592
10592
  }
10593
10593
  class EclMultiselectInputComponent extends ECLBaseDirective {
10594
10594
  get cssClasses() {
10595
- return [super.getCssClasses('ecl-select__container'), 'ecl-select__container--m'].join(' ').trim();
10595
+ return [super.getCssClasses('ecl-select__container'), `ecl-select__container--${this.eclSize}`].join(' ').trim();
10596
10596
  }
10597
10597
  constructor() {
10598
10598
  super();
10599
10599
  this.mainInputClick = new EventEmitter();
10600
10600
  this.mainInputKeydown = new EventEmitter();
10601
+ this.eclSize = 'm';
10601
10602
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
10602
10603
  this.isDisabled = false;
10603
10604
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -10632,7 +10633,7 @@ class EclMultiselectInputComponent extends ECLBaseDirective {
10632
10633
  this.inputMultiselect.nativeElement.focus();
10633
10634
  }
10634
10635
  /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EclMultiselectInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
10635
- /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EclMultiselectInputComponent, selector: "div[eclMultiselectInput]", inputs: { isDisabled: "isDisabled", isInvalid: "isInvalid", inputPlaceholder: "inputPlaceholder", selectedItems: "selectedItems" }, outputs: { mainInputClick: "mainInputClick", mainInputKeydown: "mainInputKeydown" }, host: { properties: { "class.ecl-select__container--disabled": "this.isDisabled", "class.ecl-select__container--invalid": "this.isInvalid", "class": "this.cssClasses" } }, viewQueries: [{ propertyName: "inputMultiselect", first: true, predicate: ["inputMultiselect"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [class.ecl-select-multiple-selections-counter--visible]=\"isShowCounter\" class=\"ecl-select-multiple-selections-counter\">\n <span>{{ selectedItemsCount }}</span>\n</div>\n<input\n class=\"ecl-select ecl-select__multiple-toggle\"\n #inputMultiselect\n type=\"text\"\n [attr.placeholder]=\"inputPlaceholder\"\n readonly=\"true\"\n [value]=\"selectedItems\"\n [attr.disabled]=\"isDisabled ? true : undefined\"\n (keydown)=\"onKeydown($event)\"\n (click)=\"onClick($event)\" />\n<div class=\"ecl-select__icon\">\n <ecl-icon icon=\"corner-arrow\" size=\"s\" class=\"ecl-select__icon-shape\" transform=\"rotate-180\"></ecl-icon>\n</div>\n", dependencies: [{ kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "isInverted", "ariaHidden", "focusable"] }] }); }
10636
+ /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EclMultiselectInputComponent, selector: "div[eclMultiselectInput]", inputs: { eclSize: "eclSize", isDisabled: "isDisabled", isInvalid: "isInvalid", inputPlaceholder: "inputPlaceholder", selectedItems: "selectedItems" }, outputs: { mainInputClick: "mainInputClick", mainInputKeydown: "mainInputKeydown" }, host: { properties: { "class.ecl-select__container--disabled": "this.isDisabled", "class.ecl-select__container--invalid": "this.isInvalid", "class": "this.cssClasses" } }, viewQueries: [{ propertyName: "inputMultiselect", first: true, predicate: ["inputMultiselect"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [class.ecl-select-multiple-selections-counter--visible]=\"isShowCounter\" class=\"ecl-select-multiple-selections-counter\">\n <span>{{ selectedItemsCount }}</span>\n</div>\n<input\n class=\"ecl-select ecl-select__multiple-toggle\"\n #inputMultiselect\n type=\"text\"\n [attr.placeholder]=\"inputPlaceholder\"\n readonly=\"true\"\n [value]=\"selectedItems\"\n [attr.disabled]=\"isDisabled ? true : undefined\"\n (keydown)=\"onKeydown($event)\"\n (click)=\"onClick($event)\" />\n<div class=\"ecl-select__icon\">\n <ecl-icon icon=\"corner-arrow\" size=\"s\" class=\"ecl-select__icon-shape\" transform=\"rotate-180\"></ecl-icon>\n</div>\n", dependencies: [{ kind: "component", type: EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "isInverted", "ariaHidden", "focusable"] }] }); }
10636
10637
  }
10637
10638
  __decorate([
10638
10639
  coerceBoolean
@@ -10650,6 +10651,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
10650
10651
  type: Output
10651
10652
  }], mainInputKeydown: [{
10652
10653
  type: Output
10654
+ }], eclSize: [{
10655
+ type: Input
10653
10656
  }], isDisabled: [{
10654
10657
  type: Input
10655
10658
  }, {
@@ -11066,7 +11069,7 @@ class EclMultiselectDropdownComponent extends ECLBaseDirective {
11066
11069
  useExisting: forwardRef((() => EclMultiselectDropdownComponent)),
11067
11070
  multi: true,
11068
11071
  },
11069
- ], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "eclMultiselectInput", first: true, predicate: ["eclMultiselectInput"], descendants: true }, { propertyName: "selectAllCheckbox", first: true, predicate: ["selectAllCheckbox"], descendants: true }, { propertyName: "selectAll", first: true, predicate: ["selectAll"], descendants: true }, { propertyName: "closeBtn", first: true, predicate: ["closeBtn"], descendants: true, read: ElementRef }, { propertyName: "clearAllBtn", first: true, predicate: ["clearAllBtn"], descendants: true, read: ElementRef }, { propertyName: "multiOptionComponents", predicate: EclMultiselectOptionComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n eclMultiselectInput\n #eclMultiselectInput\n [inputPlaceholder]=\"mainInputPlaceholder\"\n [selectedItems]=\"selectedItems\"\n (mainInputClick)=\"onClickMainInput($event)\"\n (mainInputKeydown)=\"onKeydownMainInput($event)\"\n [isDisabled]=\"disabled\"\n [isInvalid]=\"isInvalid\"></div>\n<div\n [style.display]=\"isShowMultiselectDropdown ? 'block' : 'none'\"\n class=\"ecl-select__multiple-dropdown ecl-select__container ecl-select__container--m\">\n <input\n class=\"ecl-text-input\"\n type=\"search\"\n #searchInput\n [placeholder]=\"searchFieldPlaceholder\"\n (input)=\"onSearch($event.target)\"\n (keydown.enter)=\"onEnterSearch($event)\"\n (keydown.arrowup)=\"onArrowUpSearch($event)\"\n (keydown.arrowdown)=\"onArrowDownSearch($event)\" />\n <div eclCheckbox #selectAll class=\"ecl-select__multiple-all\">\n <input\n eclCheckboxInput\n #selectAllCheckbox\n [id]=\"selectAllId\"\n type=\"checkbox\"\n (click)=\"onSelectAll()\"\n (keydown.arrowup)=\"onArrowUpSelectAll($event)\"\n (keydown.arrowdown)=\"onArrowDownSelectAll($event)\" />\n <label [for]=\"selectAllId\" eclCheckboxLabel> {{ 'ecl.multiselect.SELECT-ALL' | translate }} ({{ optionsCount }}) </label>\n </div>\n <div class=\"ecl-select__multiple-options\">\n <ng-container *ngFor=\"let item of multiOptionDirectives\">\n <div eclMultiselectOptgroup *ngIf=\"item.isOptGroup()\" [label]=\"item.label\">\n <div\n eclMultiselectOption\n *ngFor=\"let elem of item.eclOptionItems\"\n [value]=\"elem.value\"\n [label]=\"elem.label\"\n [disabled]=\"elem.disabled\"\n [isChecked]=\"elem.selected\"\n [class]=\"elem.class\"\n (optionClick)=\"onOptionSelected($event)\"\n (optionKeydown)=\"onKeydownOption($event)\"></div>\n </div>\n <div\n eclMultiselectOption\n *ngIf=\"!item.isOptGroup()\"\n [value]=\"item.value\"\n [label]=\"item.label\"\n [disabled]=\"item.disabled\"\n [isChecked]=\"item.selected\"\n [class]=\"item.class\"\n (optionClick)=\"onOptionSelected($event)\"\n (optionKeydown)=\"onKeydownOption($event)\"></div>\n </ng-container>\n <div *ngIf=\"isShowNoResultsFound\" class=\"ecl-select__multiple-no-results\">\n <span>{{ 'ecl.multiselect.NO-RESULTS-FOUND' | translate }}</span>\n </div>\n </div>\n <div *ngIf=\"isShowToolbar\" class=\"ecl-select-multiple-toolbar\">\n <button\n eclButton\n variant=\"ghost\"\n #clearAllBtn\n (keydown.arrowup)=\"onArrowUpCloseClear($event)\"\n (keydown.arrowright)=\"onArrowRightClear($event)\"\n (click)=\"onClickClearAll($event)\">\n {{ 'ecl.multiselect.CLEAR-ALL' | translate }}\n </button>\n <button\n eclButton\n variant=\"primary\"\n #closeBtn\n (keydown.arrowup)=\"onArrowUpCloseClear($event)\"\n (keydown.arrowleft)=\"onArrowLeftClose($event)\"\n (keydown.tab)=\"onTabClose($event)\"\n (click)=\"onClickClose($event)\">\n {{ 'ecl.common.CLOSE' | translate }}\n </button>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: EclCheckboxDirective, selector: "[eclCheckbox]", inputs: ["isDisabled", "isInvalid"] }, { kind: "component", type: EclCheckboxLabelComponent, selector: "label[eclCheckboxLabel]", inputs: ["isInvalid", "isDisabled"] }, { kind: "directive", type: EclCheckboxInputDirective, selector: "input[eclCheckboxInput]" }, { kind: "component", type: EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["variant", "containerStyleClass"] }, { kind: "component", type: EclMultiselectOptionComponent, selector: "div[eclMultiselectOption]", inputs: ["value", "label", "disabled", "isChecked"], outputs: ["optionClick", "optionKeydown"] }, { kind: "component", type: EclMultiselectInputComponent, selector: "div[eclMultiselectInput]", inputs: ["isDisabled", "isInvalid", "inputPlaceholder", "selectedItems"], outputs: ["mainInputClick", "mainInputKeydown"] }, { kind: "component", type: EclMultiselectOptgroupComponent, selector: "div[eclMultiselectOptgroup]", inputs: ["label"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] }); }
11072
+ ], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "eclMultiselectInput", first: true, predicate: ["eclMultiselectInput"], descendants: true }, { propertyName: "selectAllCheckbox", first: true, predicate: ["selectAllCheckbox"], descendants: true }, { propertyName: "selectAll", first: true, predicate: ["selectAll"], descendants: true }, { propertyName: "closeBtn", first: true, predicate: ["closeBtn"], descendants: true, read: ElementRef }, { propertyName: "clearAllBtn", first: true, predicate: ["clearAllBtn"], descendants: true, read: ElementRef }, { propertyName: "multiOptionComponents", predicate: EclMultiselectOptionComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n eclMultiselectInput\n #eclMultiselectInput\n [inputPlaceholder]=\"mainInputPlaceholder\"\n [selectedItems]=\"selectedItems\"\n (mainInputClick)=\"onClickMainInput($event)\"\n (mainInputKeydown)=\"onKeydownMainInput($event)\"\n [isDisabled]=\"disabled\"\n [isInvalid]=\"isInvalid\"\n [eclSize]=\"eclSize\"></div>\n<div\n [style.display]=\"isShowMultiselectDropdown ? 'block' : 'none'\"\n class=\"ecl-select__multiple-dropdown ecl-select__container ecl-select__container--{{eclSize}}\">\n <input\n class=\"ecl-text-input\"\n type=\"search\"\n #searchInput\n [placeholder]=\"searchFieldPlaceholder\"\n (input)=\"onSearch($event.target)\"\n (keydown.enter)=\"onEnterSearch($event)\"\n (keydown.arrowup)=\"onArrowUpSearch($event)\"\n (keydown.arrowdown)=\"onArrowDownSearch($event)\" />\n <div eclCheckbox #selectAll class=\"ecl-select__multiple-all\">\n <input\n eclCheckboxInput\n #selectAllCheckbox\n [id]=\"selectAllId\"\n type=\"checkbox\"\n (click)=\"onSelectAll()\"\n (keydown.arrowup)=\"onArrowUpSelectAll($event)\"\n (keydown.arrowdown)=\"onArrowDownSelectAll($event)\" />\n <label [for]=\"selectAllId\" eclCheckboxLabel> {{ 'ecl.multiselect.SELECT-ALL' | translate }} ({{ optionsCount }}) </label>\n </div>\n <div class=\"ecl-select__multiple-options\">\n <ng-container *ngFor=\"let item of multiOptionDirectives\">\n <div eclMultiselectOptgroup *ngIf=\"item.isOptGroup()\" [label]=\"item.label\">\n <div\n eclMultiselectOption\n *ngFor=\"let elem of item.eclOptionItems\"\n [value]=\"elem.value\"\n [label]=\"elem.label\"\n [disabled]=\"elem.disabled\"\n [isChecked]=\"elem.selected\"\n [class]=\"elem.class\"\n (optionClick)=\"onOptionSelected($event)\"\n (optionKeydown)=\"onKeydownOption($event)\"></div>\n </div>\n <div\n eclMultiselectOption\n *ngIf=\"!item.isOptGroup()\"\n [value]=\"item.value\"\n [label]=\"item.label\"\n [disabled]=\"item.disabled\"\n [isChecked]=\"item.selected\"\n [class]=\"item.class\"\n (optionClick)=\"onOptionSelected($event)\"\n (optionKeydown)=\"onKeydownOption($event)\"></div>\n </ng-container>\n <div *ngIf=\"isShowNoResultsFound\" class=\"ecl-select__multiple-no-results\">\n <span>{{ 'ecl.multiselect.NO-RESULTS-FOUND' | translate }}</span>\n </div>\n </div>\n <div *ngIf=\"isShowToolbar\" class=\"ecl-select-multiple-toolbar\">\n <button\n eclButton\n variant=\"ghost\"\n #clearAllBtn\n (keydown.arrowup)=\"onArrowUpCloseClear($event)\"\n (keydown.arrowright)=\"onArrowRightClear($event)\"\n (click)=\"onClickClearAll($event)\">\n {{ 'ecl.multiselect.CLEAR-ALL' | translate }}\n </button>\n <button\n eclButton\n variant=\"primary\"\n #closeBtn\n (keydown.arrowup)=\"onArrowUpCloseClear($event)\"\n (keydown.arrowleft)=\"onArrowLeftClose($event)\"\n (keydown.tab)=\"onTabClose($event)\"\n (click)=\"onClickClose($event)\">\n {{ 'ecl.common.CLOSE' | translate }}\n </button>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: EclCheckboxDirective, selector: "[eclCheckbox]", inputs: ["isDisabled", "isInvalid"] }, { kind: "component", type: EclCheckboxLabelComponent, selector: "label[eclCheckboxLabel]", inputs: ["isInvalid", "isDisabled"] }, { kind: "directive", type: EclCheckboxInputDirective, selector: "input[eclCheckboxInput]" }, { kind: "component", type: EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["variant", "containerStyleClass"] }, { kind: "component", type: EclMultiselectOptionComponent, selector: "div[eclMultiselectOption]", inputs: ["value", "label", "disabled", "isChecked"], outputs: ["optionClick", "optionKeydown"] }, { kind: "component", type: EclMultiselectInputComponent, selector: "div[eclMultiselectInput]", inputs: ["eclSize", "isDisabled", "isInvalid", "inputPlaceholder", "selectedItems"], outputs: ["mainInputClick", "mainInputKeydown"] }, { kind: "component", type: EclMultiselectOptgroupComponent, selector: "div[eclMultiselectOptgroup]", inputs: ["label"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] }); }
11070
11073
  }
11071
11074
  __decorate([
11072
11075
  coerceBoolean
@@ -11082,7 +11085,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
11082
11085
  useExisting: forwardRef((() => EclMultiselectDropdownComponent)),
11083
11086
  multi: true,
11084
11087
  },
11085
- ], template: "<div\n eclMultiselectInput\n #eclMultiselectInput\n [inputPlaceholder]=\"mainInputPlaceholder\"\n [selectedItems]=\"selectedItems\"\n (mainInputClick)=\"onClickMainInput($event)\"\n (mainInputKeydown)=\"onKeydownMainInput($event)\"\n [isDisabled]=\"disabled\"\n [isInvalid]=\"isInvalid\"></div>\n<div\n [style.display]=\"isShowMultiselectDropdown ? 'block' : 'none'\"\n class=\"ecl-select__multiple-dropdown ecl-select__container ecl-select__container--m\">\n <input\n class=\"ecl-text-input\"\n type=\"search\"\n #searchInput\n [placeholder]=\"searchFieldPlaceholder\"\n (input)=\"onSearch($event.target)\"\n (keydown.enter)=\"onEnterSearch($event)\"\n (keydown.arrowup)=\"onArrowUpSearch($event)\"\n (keydown.arrowdown)=\"onArrowDownSearch($event)\" />\n <div eclCheckbox #selectAll class=\"ecl-select__multiple-all\">\n <input\n eclCheckboxInput\n #selectAllCheckbox\n [id]=\"selectAllId\"\n type=\"checkbox\"\n (click)=\"onSelectAll()\"\n (keydown.arrowup)=\"onArrowUpSelectAll($event)\"\n (keydown.arrowdown)=\"onArrowDownSelectAll($event)\" />\n <label [for]=\"selectAllId\" eclCheckboxLabel> {{ 'ecl.multiselect.SELECT-ALL' | translate }} ({{ optionsCount }}) </label>\n </div>\n <div class=\"ecl-select__multiple-options\">\n <ng-container *ngFor=\"let item of multiOptionDirectives\">\n <div eclMultiselectOptgroup *ngIf=\"item.isOptGroup()\" [label]=\"item.label\">\n <div\n eclMultiselectOption\n *ngFor=\"let elem of item.eclOptionItems\"\n [value]=\"elem.value\"\n [label]=\"elem.label\"\n [disabled]=\"elem.disabled\"\n [isChecked]=\"elem.selected\"\n [class]=\"elem.class\"\n (optionClick)=\"onOptionSelected($event)\"\n (optionKeydown)=\"onKeydownOption($event)\"></div>\n </div>\n <div\n eclMultiselectOption\n *ngIf=\"!item.isOptGroup()\"\n [value]=\"item.value\"\n [label]=\"item.label\"\n [disabled]=\"item.disabled\"\n [isChecked]=\"item.selected\"\n [class]=\"item.class\"\n (optionClick)=\"onOptionSelected($event)\"\n (optionKeydown)=\"onKeydownOption($event)\"></div>\n </ng-container>\n <div *ngIf=\"isShowNoResultsFound\" class=\"ecl-select__multiple-no-results\">\n <span>{{ 'ecl.multiselect.NO-RESULTS-FOUND' | translate }}</span>\n </div>\n </div>\n <div *ngIf=\"isShowToolbar\" class=\"ecl-select-multiple-toolbar\">\n <button\n eclButton\n variant=\"ghost\"\n #clearAllBtn\n (keydown.arrowup)=\"onArrowUpCloseClear($event)\"\n (keydown.arrowright)=\"onArrowRightClear($event)\"\n (click)=\"onClickClearAll($event)\">\n {{ 'ecl.multiselect.CLEAR-ALL' | translate }}\n </button>\n <button\n eclButton\n variant=\"primary\"\n #closeBtn\n (keydown.arrowup)=\"onArrowUpCloseClear($event)\"\n (keydown.arrowleft)=\"onArrowLeftClose($event)\"\n (keydown.tab)=\"onTabClose($event)\"\n (click)=\"onClickClose($event)\">\n {{ 'ecl.common.CLOSE' | translate }}\n </button>\n </div>\n</div>\n" }]
11088
+ ], template: "<div\n eclMultiselectInput\n #eclMultiselectInput\n [inputPlaceholder]=\"mainInputPlaceholder\"\n [selectedItems]=\"selectedItems\"\n (mainInputClick)=\"onClickMainInput($event)\"\n (mainInputKeydown)=\"onKeydownMainInput($event)\"\n [isDisabled]=\"disabled\"\n [isInvalid]=\"isInvalid\"\n [eclSize]=\"eclSize\"></div>\n<div\n [style.display]=\"isShowMultiselectDropdown ? 'block' : 'none'\"\n class=\"ecl-select__multiple-dropdown ecl-select__container ecl-select__container--{{eclSize}}\">\n <input\n class=\"ecl-text-input\"\n type=\"search\"\n #searchInput\n [placeholder]=\"searchFieldPlaceholder\"\n (input)=\"onSearch($event.target)\"\n (keydown.enter)=\"onEnterSearch($event)\"\n (keydown.arrowup)=\"onArrowUpSearch($event)\"\n (keydown.arrowdown)=\"onArrowDownSearch($event)\" />\n <div eclCheckbox #selectAll class=\"ecl-select__multiple-all\">\n <input\n eclCheckboxInput\n #selectAllCheckbox\n [id]=\"selectAllId\"\n type=\"checkbox\"\n (click)=\"onSelectAll()\"\n (keydown.arrowup)=\"onArrowUpSelectAll($event)\"\n (keydown.arrowdown)=\"onArrowDownSelectAll($event)\" />\n <label [for]=\"selectAllId\" eclCheckboxLabel> {{ 'ecl.multiselect.SELECT-ALL' | translate }} ({{ optionsCount }}) </label>\n </div>\n <div class=\"ecl-select__multiple-options\">\n <ng-container *ngFor=\"let item of multiOptionDirectives\">\n <div eclMultiselectOptgroup *ngIf=\"item.isOptGroup()\" [label]=\"item.label\">\n <div\n eclMultiselectOption\n *ngFor=\"let elem of item.eclOptionItems\"\n [value]=\"elem.value\"\n [label]=\"elem.label\"\n [disabled]=\"elem.disabled\"\n [isChecked]=\"elem.selected\"\n [class]=\"elem.class\"\n (optionClick)=\"onOptionSelected($event)\"\n (optionKeydown)=\"onKeydownOption($event)\"></div>\n </div>\n <div\n eclMultiselectOption\n *ngIf=\"!item.isOptGroup()\"\n [value]=\"item.value\"\n [label]=\"item.label\"\n [disabled]=\"item.disabled\"\n [isChecked]=\"item.selected\"\n [class]=\"item.class\"\n (optionClick)=\"onOptionSelected($event)\"\n (optionKeydown)=\"onKeydownOption($event)\"></div>\n </ng-container>\n <div *ngIf=\"isShowNoResultsFound\" class=\"ecl-select__multiple-no-results\">\n <span>{{ 'ecl.multiselect.NO-RESULTS-FOUND' | translate }}</span>\n </div>\n </div>\n <div *ngIf=\"isShowToolbar\" class=\"ecl-select-multiple-toolbar\">\n <button\n eclButton\n variant=\"ghost\"\n #clearAllBtn\n (keydown.arrowup)=\"onArrowUpCloseClear($event)\"\n (keydown.arrowright)=\"onArrowRightClear($event)\"\n (click)=\"onClickClearAll($event)\">\n {{ 'ecl.multiselect.CLEAR-ALL' | translate }}\n </button>\n <button\n eclButton\n variant=\"primary\"\n #closeBtn\n (keydown.arrowup)=\"onArrowUpCloseClear($event)\"\n (keydown.arrowleft)=\"onArrowLeftClose($event)\"\n (keydown.tab)=\"onTabClose($event)\"\n (click)=\"onClickClose($event)\">\n {{ 'ecl.common.CLOSE' | translate }}\n </button>\n </div>\n</div>\n" }]
11086
11089
  }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.IterableDiffers }]; }, propDecorators: { searchInput: [{
11087
11090
  type: ViewChild,
11088
11091
  args: ['searchInput']
@@ -11227,6 +11230,7 @@ class EclMultiselectComponent extends ECLBaseDirective {
11227
11230
  this.viewContainerRef = viewContainerRef;
11228
11231
  this.differs = differs;
11229
11232
  this.eclChange = new EventEmitter();
11233
+ this.eclSize = 'm';
11230
11234
  this._disabled = false;
11231
11235
  this._isInvalid = false;
11232
11236
  this._eclPlaceholder = 'Select item';
@@ -11266,7 +11270,7 @@ class EclMultiselectComponent extends ECLBaseDirective {
11266
11270
  createHostWrapperContainer() {
11267
11271
  const wrapperContainer = document.createElement('div');
11268
11272
  wrapperContainer.classList.add('ecl-select__container');
11269
- wrapperContainer.classList.add('ecl-select__container--m');
11273
+ wrapperContainer.classList.add(`ecl-select__container--${this.eclSize}`);
11270
11274
  return wrapperContainer;
11271
11275
  }
11272
11276
  getHostElement() {
@@ -11283,6 +11287,7 @@ class EclMultiselectComponent extends ECLBaseDirective {
11283
11287
  this.eclChange.emit(evt);
11284
11288
  });
11285
11289
  this.multiselectComponent.mainInputPlaceholder = this.eclPlaceholder;
11290
+ this.multiselectComponent.eclSize = this.eclSize;
11286
11291
  if (ngControl) {
11287
11292
  ngControl.valueAccessor = this.multiselectComponent;
11288
11293
  }
@@ -11296,7 +11301,7 @@ class EclMultiselectComponent extends ECLBaseDirective {
11296
11301
  });
11297
11302
  }
11298
11303
  /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EclMultiselectComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i0.IterableDiffers }], target: i0.ɵɵFactoryTarget.Component }); }
11299
- /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EclMultiselectComponent, selector: "select[eclMultiselect]", inputs: { isInvalid: "isInvalid", disabled: "disabled", eclPlaceholder: "eclPlaceholder" }, outputs: { eclChange: "eclChange" }, host: { properties: { "attr.disabled": "this.disabled", "class": "this.cssClasses" } }, providers: [
11304
+ /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EclMultiselectComponent, selector: "select[eclMultiselect]", inputs: { isInvalid: "isInvalid", disabled: "disabled", eclPlaceholder: "eclPlaceholder", eclSize: "eclSize" }, outputs: { eclChange: "eclChange" }, host: { properties: { "attr.disabled": "this.disabled", "class": "this.cssClasses" } }, providers: [
11300
11305
  {
11301
11306
  provide: NG_VALUE_ACCESSOR,
11302
11307
  useExisting: forwardRef((() => EclMultiselectComponent)),
@@ -11333,6 +11338,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
11333
11338
  type: Output
11334
11339
  }], eclPlaceholder: [{
11335
11340
  type: Input
11341
+ }], eclSize: [{
11342
+ type: Input
11336
11343
  }] } });
11337
11344
 
11338
11345
  const COMPONENTS$b = [EclMultiselectComponent, EclMultiselectOptionDirective];