@eui/ecl 19.3.1 → 19.3.2-snapshot-1752652198707

package/fesm2022/eui-ecl-components-ecl-multiselect.mjs

@@ -63,6 +63,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 }]
         }] });
 
+/**
+ * Component representing a single selectable option in the multiselect dropdown.
+ */
 class EclMultiselectOptionComponent extends ECLBaseDirective {
     set value(value) {
         this._value = value;
@@ -73,6 +76,9 @@ class EclMultiselectOptionComponent extends ECLBaseDirective {
     get cssClasses() {
         return [super.getCssClasses('ecl-checkbox')].join(' ').trim();
     }
+    /**
+     * Indicates whether the option is selected.
+     */
     get isChecked() {
         return this._checked;
     }
@@ -84,17 +90,32 @@ class EclMultiselectOptionComponent extends ECLBaseDirective {
         this.renderer = renderer;
         this.keyword = '';
         this.changes = new Subject();
+        /**
+         * Disables the option when true.
+         */
         this.disabled = false;
+        /**
+         * Emits when the option is clicked.
+         */
         this.optionClick = new EventEmitter();
+        /**
+         * Emits when a key is pressed while focused on the option.
+         */
         this.optionKeydown = new EventEmitter();
         this.display = 'flex';
         this._id = '';
         this._checked = false;
         this._value = '';
     }
+    /**
+     * Returns the unique identifier for the option.
+     */
     get id() {
         return this._id;
     }
+    /**
+     * Indicates whether the option is active (visible and not disabled).
+     */
     get isActive() {
         return this.display === 'flex' && !this.disabled;
     }
@@ -107,22 +128,40 @@ class EclMultiselectOptionComponent extends ECLBaseDirective {
     ngOnDestroy() {
         this.changes.complete();
     }
+    /**
+     * Toggles the selected state and emits the optionClick event.
+     */
     onOptionClick() {
         this.isChecked = !this.isChecked;
         this.optionClick.emit(new EclMultiselectOptionClickEvent(this));
     }
+    /**
+     * Emits the optionKeydown event when a key is pressed.
+     */
     onOptionKeydown(evt) {
         this.optionKeydown.emit(new EclMultiselectOptionKeydownEvent(this, evt));
     }
+    /**
+     * Focuses the checkbox input.
+     */
     onFocus() {
         this.renderer.selectRootElement(this.eclCheckboxInput.nativeElement, true).focus();
     }
+    /**
+     * Makes the option visible.
+     */
     show() {
         this.display = 'flex';
     }
+    /**
+     * Hides the option from view.
+     */
     hide() {
         this.display = 'none';
     }
+    /**
+     * Sets the keyword for search highlighting.
+     */
     highlightSearchText(keyword) {
         this.keyword = keyword;
         const re = new RegExp(keyword, 'gi');
@@ -173,40 +212,98 @@ class EclMultiselectMainInputClickEvent {
     }
 }
 
+/**
+ * Component representing the main input of a multiselect component.
+ * Handles displaying selected items, opening the dropdown, and managing accessibility.
+ */
 class EclMultiselectInputComponent extends ECLBaseDirective {
+    /**
+     * CSS classes for the component, including size and inherited classes.
+     */
     get cssClasses() {
-        return [super.getCssClasses('ecl-select__container'), `ecl-select__container--${this.eclSize}`].join(' ').trim();
+        return [
+            super.getCssClasses('ecl-select__container'),
+            `ecl-select__container--${this.eclSize}`,
+        ].join(' ').trim();
     }
     constructor(eclThemeService, renderer) {
         super();
         this.eclThemeService = eclThemeService;
         this.renderer = renderer;
+        /**
+         * Size modifier for the multiselect input (e.g., 's', 'm', 'l').
+         */
         this.eclSize = 'm';
+        /**
+         * Label for the toggle button (optional).
+         */
         this.toggleLabel = undefined;
+        /**
+         * Marks the component as disabled.
+         */
         this.isDisabled = false;
+        /**
+         * Marks the component as being in an invalid state.
+         */
         this.isInvalid = false;
+        /**
+         * Array of currently selected item labels.
+         */
         this.selectedItems = [];
+        /**
+         * Indicates that the dropdown is currently expanded.
+         */
         this.isDropdownExpanded = false;
+        /**
+         * ARIA controls attribute for accessibility.
+         */
         this.ariaControls = undefined;
+        /**
+         * ARIA describedby attribute for accessibility.
+         */
         this.ariaDescribedby = undefined;
+        /**
+         * ARIA labelledby attribute for accessibility.
+         */
         this.ariaLabeledby = undefined;
+        /**
+         * Event emitted when the input is clicked.
+         */
         this.mainInputClick = new EventEmitter();
+        /**
+         * Event emitted when a key is pressed on the input.
+         */
         this.mainInputKeydown = new EventEmitter();
         this.ICON_SIZE_FOR_EC_THEME_ON = 'xs';
         this.ICON_SIZE_FOR_EU_THEME_ON = 's';
     }
+    /**
+     * Returns the label text shown inside the button.
+     */
     get buttonText() {
         return this.selectedItems.length === 0 ? this.inputPlaceholder : this.selectedItems.join(',');
     }
+    /**
+     * Returns the count of selected items.
+     */
     get selectedItemsCount() {
         return this.selectedItems.length;
     }
+    /**
+     * Displays a count badge when items are selected.
+     */
     get isShowCounter() {
         return this.selectedItems && this.selectedItems.length > 0;
     }
+    /**
+     * Indicates that the dropdown is expanded (active).
+     */
     get isActive() {
         return this.isDropdownExpanded;
     }
+    /**
+     * Returns icon size depending on the theme.
+     */
     get sizeIcon() {
         if (this.eclThemeService.isECTheme()) {
             return this.ICON_SIZE_FOR_EC_THEME_ON;
@@ -215,9 +312,16 @@ class EclMultiselectInputComponent extends ECLBaseDirective {
             return this.ICON_SIZE_FOR_EU_THEME_ON;
         }
     }
+    /**
+     * Handles click on the input container. Emits custom event with original DOM event.
+     */
     onClick(evt) {
         this.mainInputClick.emit(new EclMultiselectMainInputClickEvent(evt));
     }
+    /**
+     * Handles keydown events on the input.
+     * Only emits event on ArrowDown, Enter, or Space keys.
+     */
     onKeydown(evt) {
         switch (evt.key) {
             case KeyCode.ARROW_DOWN:
@@ -232,6 +336,9 @@ class EclMultiselectInputComponent extends ECLBaseDirective {
             }
         }
     }
+    /**
+     * Focuses the multiselect input element.
+     */
     onFocus() {
         this.renderer.selectRootElement(this.inputMultiselect.nativeElement, true).focus();
     }
@@ -283,7 +390,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Output
             }] } });
 
+/**
+ * Component representing an option group (fieldset) in a multiselect component.
+ * Used to group related options under a common label.
+ */
 class EclMultiselectOptgroupComponent extends ECLBaseDirective {
+    /**
+     * Returns the computed CSS classes for the optgroup container.
+     */
     get cssClasses() {
         return [super.getCssClasses('ecl-select__multiple-group')].join(' ').trim();
     }
@@ -300,16 +414,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 args: ['class']
             }] } });
 
+/**
+ * Component that renders a dropdown-style multiselect UI element.
+ * Used internally by the `EclMultiselectComponent`.
+ */
 class EclMultiselectDropdownComponent extends ECLBaseDirective {
+    /**
+     * Marks the component as visually invalid.
+     */
     get isInvalid() {
         return this._isInvalid;
     }
     set isInvalid(value) {
         this._isInvalid = value;
     }
+    /**
+     * Adds the ECL base CSS class for multiselect dropdowns.
+     */
     get cssClasses() {
         return [super.getCssClasses('ecl-select__multiple')].join(' ').trim();
     }
+    /**
+     * Disables the component when true.
+     */
     get disabled() {
         return this._disabled || undefined;
     }
@@ -321,19 +448,61 @@ class EclMultiselectDropdownComponent extends ECLBaseDirective {
         this.elRef = elRef;
         this.differs = differs;
         this.renderer = renderer;
+        /**
+         * Emits the list of selected values whenever the selection changes.
+         */
         this.eclChange = new EventEmitter();
+        /**
+         * Placeholder for the main multiselect input.
+         */
         this.mainInputPlaceholder = 'Select an item';
+        /**
+         * Placeholder for the search field input.
+         */
         this.searchFieldPlaceholder = 'Enter filter keyword';
+        /**
+         * Size of the multiselect dropdown (e.g., 'm', 'l').
+         */
         this.eclSize = 'm';
+        /**
+         * Optional ARIA description used for accessibility purposes.
+         */
         this.ariaDescribedby = undefined;
+        /**
+         * Optional ARIA label reference for screen readers.
+         */
         this.ariaLabeledby = undefined;
+        /**
+         * Label displayed for the toggle button to assist screen readers.
+         */
         this.toggleLabel = undefined;
+        /**
+         * Enables the search box in the dropdown interface.
+         */
         this.hasSearchBox = true;
+        /**
+         * Displays the "Select all" checkbox above the list of options.
+         */
         this.hasSelectAll = true;
+        /**
+         * Optional identifier used for the dropdown element.
+         */
         this.id = '';
+        /**
+         * Indicates that the "no results found" message should be displayed.
+         */
         this.isShowNoResultsFound = false;
+        /**
+         * Controls the visibility of the multiselect dropdown.
+         */
         this.isShowMultiselectDropdown = false;
+        /**
+         * List of option directives currently rendered in the dropdown.
+         */
         this.multiOptionDirectives = [];
+        /**
+         * Total number of options available in the dropdown list.
+         */
         this.optionsCount = 0;
         this.dropdownId = '';
         this.isSelectAllDisabled = null;
@@ -380,6 +549,10 @@ class EclMultiselectDropdownComponent extends ECLBaseDirective {
         this.destroy$.next(true);
         this.destroy$.unsubscribe();
     }
+    /**
+     * Writes a new value to the component from the outside (e.g., form model).
+     * Required by ControlValueAccessor.
+     */
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     writeValue(values) {
         if (this.multiOptionComponents && this.multiOptionComponents.length > 0) {
@@ -391,14 +564,26 @@ class EclMultiselectDropdownComponent extends ECLBaseDirective {
             this.isWriteValueCalled = true;
         }
     }
+    /**
+     * Registers a callback function to be called when the value changes.
+     * Required by ControlValueAccessor.
+     */
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     registerOnChange(fn) {
         this.propagateChange = fn;
     }
+    /**
+     * Registers a callback function to be called when the component is touched.
+     * Required by ControlValueAccessor.
+     */
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     registerOnTouched(fn) {
         this.propagateTouched = fn;
     }
+    /**
+     * Enables or disables the component.
+     * Required by ControlValueAccessor.
+     */
     setDisabledState(isDisabled) {
         this._disabled = isDisabled;
     }
@@ -410,12 +595,21 @@ class EclMultiselectDropdownComponent extends ECLBaseDirective {
             this.hideMultiselectDropdown();
         }
     }
+    /**
+     * Gets labels of currently selected options.
+     */
     get selectedItems() {
         return this._selectedItems.map((item) => item.label);
     }
+    /**
+     * Indicates if any options are currently selected.
+     */
     get isItemsSelected() {
         return this._selectedItems.length > 0;
     }
+    /**
+     * Controls the visibility of the multiselect toolbar.
+     */
     get isShowToolbar() {
         return this._selectedItems.length > 0;
     }
@@ -523,6 +717,9 @@ class EclMultiselectDropdownComponent extends ECLBaseDirective {
         evt.preventDefault();
         evt.target.click();
     }
+    /**
+     * Handles search input, filters options, and updates their visibility.
+     */
     onSearch(input) {
         const keyword = input.value;
         let isMatchFound = false;
@@ -554,6 +751,9 @@ class EclMultiselectDropdownComponent extends ECLBaseDirective {
             this.hideNoResultsFound();
         }
     }
+    /**
+     * Toggles all visible options based on the "Select All" checkbox.
+     */
     onSelectAll() {
         if (this.selectAllCheckbox.nativeElement.checked) {
             this.selectAllActiveOptions();
@@ -565,6 +765,10 @@ class EclMultiselectDropdownComponent extends ECLBaseDirective {
         this.eclChange.emit(this._selectedItems.map((item) => item.value));
         this.propagateChange(this._selectedItems.map((item) => item.value));
     }
+    /**
+     * Handles keyboard interaction on option items.
+     * Supports arrow keys, tab, escape, and enter.
+     */
     onKeydownOption(evt) {
         switch (evt.keyboardEvent.key) {
             case KeyCode.ARROW_DOWN: {
@@ -594,6 +798,10 @@ class EclMultiselectDropdownComponent extends ECLBaseDirective {
             }
         }
     }
+    /**
+     * Triggered when a single option is clicked/selected.
+     * Updates selected items, emits changes.
+     */
     onOptionSelected(evt) {
         if (this.selectAllCheckbox && this.selectAllCheckbox.nativeElement.checked) {
             this.renderer.setProperty(this.selectAllCheckbox.nativeElement, 'checked', false);
@@ -791,29 +999,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 args: ['document:click', ['$event']]
             }] } });
 
+/**
+ * Directive used to decorate <option> and <optgroup> elements within a multiselect.
+ * Adds support for value, label, disabled, selected states and styling.
+ */
 class EclMultiselectOptionDirective extends ECLBaseDirective {
+    /**
+     * Indicates that the option is disabled.
+     */
     get disabled() {
         return this._disabled || null;
     }
     set disabled(value) {
         this._disabled = coerceBooleanProperty(value);
     }
+    /**
+     * Indicates that the option is selected.
+     */
     get selected() {
         return this._selected || null;
     }
     set selected(value) {
         this._selected = coerceBooleanProperty(value);
     }
+    /**
+     * Applies ECL checkbox styling class to the option.
+     */
     get cssClasses() {
         return [super.getCssClasses('ecl-checkbox')].join(' ').trim();
     }
     constructor(elRef) {
         super();
         this.elRef = elRef;
+        /**
+         * Emits whenever the option's state changes (used internally).
+         */
         this.changes = new Subject();
         this._disabled = false;
         this._selected = false;
     }
+    /**
+     * Returns true if this directive is applied to an <optgroup> element.
+     */
     isOptGroup() {
         return this.elRef.nativeElement.nodeName === 'OPTGROUP';
     }
@@ -848,7 +1075,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 args: ['class']
             }] } });
 
+/**
+ * Component representing a custom multiselect input using the ECL design system.
+ *
+ * Should be used on a native <select> element to enhance it with ECL multiselect behavior.
+ * Replaces the original element with a custom dropdown rendered dynamically.
+ */
 class EclMultiselectComponent extends ECLBaseDirective {
+    /**
+     * Marks the multiselect as invalid.
+     */
     get isInvalid() {
         return this._isInvalid;
     }
@@ -858,6 +1094,9 @@ class EclMultiselectComponent extends ECLBaseDirective {
             this.multiselectComponent.isInvalid = value;
         }
     }
+    /**
+     * Disables the multiselect component when set to true.
+     */
     set disabled(value) {
         if (this.multiselectComponent) {
             this.multiselectComponent.disabled = coerceBooleanProperty(value);
@@ -867,21 +1106,33 @@ class EclMultiselectComponent extends ECLBaseDirective {
     get disabled() {
         return this._disabled || undefined;
     }
+    /**
+     * CSS classes applied to the host element.
+     */
     get cssClasses() {
         return [super.getCssClasses('ecl-select')].join(' ').trim();
     }
+    /**
+     * Enables the search box within the dropdown.
+     */
     set hasSearchBox(value) {
         if (this.multiselectComponent) {
             this.multiselectComponent.hasSearchBox = coerceBooleanProperty(value);
         }
         this._hasSearchBox = coerceBooleanProperty(value);
     }
+    /**
+     * Displays the "Select all" option in the dropdown.
+     */
     set hasSelectAll(value) {
         if (this.multiselectComponent) {
             this.multiselectComponent.hasSelectAll = coerceBooleanProperty(value);
         }
         this._hasSelectAll = coerceBooleanProperty(value);
     }
+    /**
+     * Placeholder text to show in the multiselect input field when no options are selected.
+     */
     set eclPlaceholder(value) {
         this._eclPlaceholder = value;
         if (this.multiselectComponent) {
@@ -899,11 +1150,29 @@ class EclMultiselectComponent extends ECLBaseDirective {
         this.differs = differs;
         this.renderer = renderer;
         this.platformId = platformId;
+        /**
+         * Defines the `aria-describedby` attribute for accessibility.
+         */
         this.ariaDescribedby = undefined;
+        /**
+         * Defines the `aria-labelledby` attribute for accessibility.
+         */
         this.ariaLabeledby = undefined;
+        /**
+         * Sets the `id` attribute of the multiselect component.
+         */
         this.id = undefined;
+        /**
+         * Label used for the toggle button that expands or collapses the dropdown.
+         */
         this.toggleLabel = undefined;
+        /**
+         * Emits an array of selected option values when the selection changes.
+         */
         this.eclChange = new EventEmitter();
+        /**
+         * Multiselect size: 's' | 'm' | 'l'. Default is 'm'.
+         */
         this.eclSize = 'm';
         this.SELECT_CONTAINER_CLASS = 'ecl-select__container';
         this.SELECT_CONTAINER_HIDDEN_CLASS = 'ecl-select__container--hidden';