@sankhyalabs/ezui 7.2.0-dev.9 → 7.2.0-rc.10

package/dist/collection/components/ez-classic-search-plus/ez-classic-search-plus.js

@@ -38,8 +38,6 @@ export class EzClassicSearchPlus {
     this.searchDescriptionIsOpen = false;
     this.visibleOptions = undefined;
     this.showLoading = true;
-    this.canShowClearButton = false;
-    this.isHoveringDescription = false;
   }
   async observeValue(newValue, oldValue) {
     var _a;
@@ -53,11 +51,11 @@ export class EzClassicSearchPlus {
       return;
     }
     if (newNormalizedValue === undefined) {
-      this.clearSearch();
+      this.codeValue = undefined;
+      this.descriptionValue = undefined;
       this.ezChange.emit(undefined);
       return;
     }
-    this.canShowClearButton = this.getClearButtonStatus();
     this.codeValue = newNormalizedValue;
     try {
       this.descriptionValue = await this.normalizeCodeToDescriptionValue(newValue);
@@ -151,14 +149,12 @@ export class EzClassicSearchPlus {
     }
   }
   clearSearch() {
-    this._textInputCodeValue.value = null;
-    if (!this.hideDescriptionInput) {
-      this._textInputDescriptionValue.value = null;
-    }
     this.value = null;
     this.codeValue = null;
     this.descriptionValue = null;
-    this.canShowClearButton = false;
+    if (!this.hideDescriptionInput) {
+      this._textInputDescriptionValue.value = null;
+    }
   }
   async normalizeCodeToDescriptionValue(valueToNormalize) {
     if (!valueToNormalize) {
@@ -202,7 +198,7 @@ export class EzClassicSearchPlus {
   }
   async loadDescriptionValueByCode(codeValue) {
     if (!this.optionLoader) {
-      console.warn(this.i18n("ez-classic-search-plus.optionLoaderNotDefined"));
+      console.warn(this.i18n("ez-search-plus.optionLoaderNotDefined"));
       return "";
     }
     try {
@@ -232,7 +228,7 @@ export class EzClassicSearchPlus {
   }
   async loadAdvancedSearch() {
     if (!this.optionLoader) {
-      console.warn(this.i18n("ez-classic-search-plus.optionLoaderNotDefined"));
+      console.warn(this.i18n("ez-search-plus.optionLoaderNotDefined"));
       return;
     }
     const searchArgument = { mode: SearchMode.ADVANCED, argument: "" };
@@ -259,7 +255,6 @@ export class EzClassicSearchPlus {
       this._popover.showUnder(this.el);
     }
     const argument = event.target.value;
-    this.canShowClearButton = this.getClearButtonStatus();
     await this.debounceLoaderOptions(argument);
   }
   async debounceLoaderOptions(argument) {
@@ -378,23 +373,15 @@ export class EzClassicSearchPlus {
     event.stopPropagation();
     this.searchDescriptionIsOpen = event.detail;
   }
-  getClearButtonStatus() {
-    var _a, _b;
-    if (this.ensureClearButtonVisible) {
-      return true;
-    }
-    if (((_a = this._textInputCodeValue) === null || _a === void 0 ? void 0 : _a.value) || ((_b = this._textInputDescriptionValue) === null || _b === void 0 ? void 0 : _b.value)) {
-      return true;
-    }
-    return !!this.value;
-  }
   render() {
+    var _a, _b;
     ElementIDUtils.addIDInfoIfNotExists(this.el, 'input');
+    const canShowClearButton = !this.ensureClearButtonVisible && (!this.value && !((_a = this._textInputCodeValue) === null || _a === void 0 ? void 0 : _a.value) && !((_b = this._textInputDescriptionValue) === null || _b === void 0 ? void 0 : _b.value));
     return (h(Host, null, h("div", { class: "ez-classic-search-plus__wrapper" }, h("div", { class: "ez-classic-search-plus__label-container" }, h("label", { title: this.label }, this.label), this.required && h("span", { class: "required-indicator" }, "*")), h("div", { class: "ez-classic-search-plus__container" }, h("ez-classic-input", { ref: (elem) => this._textInputCodeValue = elem, class: {
         "ez-classic-search-plus__code-input": !this.hideDescriptionInput,
         "ez-classic-search-plus__code-input-no-border": !this.hideDescriptionInput,
         "ez-classic-search-plus__code-input-full": this.hideDescriptionInput
-      }, "data-element-id": ElementIDUtils.getInternalIDInfo("codeInput"), "data-slave-mode": "true", enabled: !this.disableCodeInput && this.enabled, size: this.size, label: null, errorMessage: this.hideDescriptionInput ? this.errorMessage : "", value: this.codeValue, onFocusout: () => this.handleCodeInputFocusOut(), onFocus: () => this.handleCodeInputFocus(), leftIconName: "search", leftIconClickable: this.enabled, onIconClick: () => this.handleSearchClick(), onEzChange: (event) => event.stopPropagation(), state: this.errorMessage && this.canShowError ? "error" : "default" }), !this.hideDescriptionInput && (h("div", { class: "description-input-container", onMouseEnter: () => this.isHoveringDescription = true, onMouseLeave: () => this.isHoveringDescription = false }, h("ez-classic-input", { ref: (elem) => this._textInputDescriptionValue = elem, tabIndex: -1, class: { "ez-classic-search-plus__text-input": true }, "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), "data-slave-mode": "true", enabled: !this.disableDescriptionInput && this.enabled, label: null, size: this.size, value: this.descriptionValue, onInput: (event) => this.handleTextInputChangeHandler(event), onFocus: () => this.handleDescriptionInputFocus(), rightIconName: this.canShowClearButton && this.isHoveringDescription ? "close" : null, rightIconClickable: this.enabled, onIconClick: () => this.clearSearch(), onEzChange: (event) => event.stopPropagation(), rightIconTooltip: this.i18n("ez-classic-search-plus.clearValue"), state: this.errorMessage && this.canShowError ? "error" : "default" }), h("ez-popover-plus", { ref: elem => this._popover = elem, anchorElement: this.el, autoClose: true, boxWidth: 'fit-content', overlayType: 'none', useAnchorSize: true, onEzVisibilityChange: (event) => this.handleOnEzVisibilityChange(event), "data-element-id": this.el.getAttribute("data-element-id") }, h("ez-classic-search-result-list", { ref: (ref) => this._classicSearchList = ref, showLoading: this.showLoading, visibleOptions: this.visibleOptions, value: this.value, showOptionValue: this.showOptionValue, onChangeValue: (evt) => this.handleSelectItem(evt) }))))), h("div", { class: "ez-classic-search-plus__error-container" }, h("span", null, this.errorMessage)))));
+      }, "data-element-id": ElementIDUtils.getInternalIDInfo("codeInput"), "data-slave-mode": "true", enabled: !this.disableCodeInput && this.enabled, size: this.size, label: null, errorMessage: this.hideDescriptionInput ? this.errorMessage : "", value: this.codeValue, onFocusout: () => this.handleCodeInputFocusOut(), onFocus: () => this.handleCodeInputFocus(), leftIconName: "search", leftIconClickable: this.enabled, onIconClick: () => this.handleSearchClick(), onEzChange: (event) => event.stopPropagation(), state: this.errorMessage && this.canShowError ? "error" : "default" }), !this.hideDescriptionInput && (h("div", { class: "description-input-container" }, h("ez-classic-input", { ref: (elem) => this._textInputDescriptionValue = elem, tabIndex: -1, class: { "ez-classic-search-plus__text-input": true }, "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), "data-slave-mode": "true", enabled: !this.disableDescriptionInput && this.enabled, label: null, size: this.size, value: this.descriptionValue, onInput: (event) => this.handleTextInputChangeHandler(event), onFocus: () => this.handleDescriptionInputFocus(), rightIconName: canShowClearButton ? "close" : null, rightIconClickable: this.enabled, onIconClick: () => this.clearSearch(), onEzChange: (event) => event.stopPropagation(), state: this.errorMessage && this.canShowError ? "error" : "default" }), h("ez-popover-plus", { ref: elem => this._popover = elem, anchorElement: this.el, autoClose: true, boxWidth: 'fit-content', overlayType: 'none', useAnchorSize: true, onEzVisibilityChange: (event) => this.handleOnEzVisibilityChange(event), "data-element-id": this.el.getAttribute("data-element-id") }, h("ez-classic-search-result-list", { ref: (ref) => this._classicSearchList = ref, showLoading: this.showLoading, visibleOptions: this.visibleOptions, value: this.value, showOptionValue: this.showOptionValue, onChangeValue: (evt) => this.handleSelectItem(evt) }))))), h("div", { class: "ez-classic-search-plus__error-container" }, h("span", null, this.errorMessage)))));
   }
   static get is() { return "ez-classic-search-plus"; }
   static get encapsulation() { return "shadow"; }
@@ -872,9 +859,7 @@ export class EzClassicSearchPlus {
       "isLoadingDescription": {},
       "searchDescriptionIsOpen": {},
       "visibleOptions": {},
-      "showLoading": {},
-      "canShowClearButton": {},
-      "isHoveringDescription": {}
+      "showLoading": {}
     };
   }
   static get events() {

package/dist/collection/components/ez-grid/controller/ag-grid/AgGridController.js

@@ -48,6 +48,7 @@ export default class AgGridController {
     this.DEFAULT_FONT_SIZE_HTML5 = 32;
     this.DEFAULT_ICON_SIZE = 40;
     this.DEFAULT_MAX_SIZE = 300;
+    this.MULTI_VALUES_PROP = '__multiValues';
     this._menuItems = [];
     this._idAttribName = '__record__id__';
     this._gridConfig = [];
@@ -126,21 +127,24 @@ export default class AgGridController {
         const params = [];
         let isNullIncluded;
         checkedOptions.forEach(option => {
-          const paramName = `PARAM_${column}_${params.length + 1}`;
-          params.push({
-            dataType: dataType === DataType.OBJECT ? DataType.TEXT : dataType,
-            name: paramName,
-            value: option.value,
-          });
-          if (option.value == undefined) {
-            isNullIncluded = true;
-          }
-          else {
-            if (placeholders.length > 0) {
-              placeholders = placeholders + ',';
+          const optionValues = this.resolveColumnFilterValues(option);
+          optionValues.forEach(value => {
+            const paramName = `PARAM_${column}_${params.length + 1}`;
+            params.push({
+              dataType: dataType === DataType.OBJECT ? DataType.TEXT : dataType,
+              name: paramName,
+              value,
+            });
+            if (value == undefined) {
+              isNullIncluded = true;
             }
-            placeholders = `${placeholders}:${paramName}`;
-          }
+            else {
+              if (placeholders.length > 0) {
+                placeholders = placeholders + ',';
+              }
+              placeholders = `${placeholders}:${paramName}`;
+            }
+          });
         });
         return {
           name: `${DISTINCT_FILTER_NAME_PREFIX}${column}`,
@@ -162,6 +166,13 @@ export default class AgGridController {
     }
     return `${columnExpression} in (${placeholders})`;
   }
+  resolveColumnFilterValues(option) {
+    const multiValues = option === null || option === void 0 ? void 0 : option[this.MULTI_VALUES_PROP];
+    if (Array.isArray(multiValues) && multiValues.length > 0) {
+      return multiValues;
+    }
+    return [option.value];
+  }
   initDatagrid(container, options) {
     var _a;
     this._options = options;

package/dist/collection/components/ez-image-input/ez-image-input.css

@@ -123,22 +123,7 @@
   border-radius: calc(var(--ez-image-input--border-radius) - var(--ez-image-input--border-width));
 }
 
-.image-input__actions {
-  position: absolute;
-  top: var(--space--8);
-  right: var(--space--8);
-  display: flex;
-  flex-direction: column;
-  gap: var(--space--4);
-  opacity: 0;
-  transition: opacity 0.2s ease;
-}
-
-.image-input__container:hover .image-input__actions {
-  opacity: 1;
-}
-
-.image-input__remove-button {
+ez-button {
   --ez-button--background-color: var(--ez-image-input--remove-button-bg);
   --ez-button--hover--background-color: var(--ez-image-input--remove-button-bg-hover);
   --ez-button--color: var(--ez-image-input--remove-button-color);
@@ -146,14 +131,13 @@
   --ez-button--hover--border: var(--ez-image-input--remove-button-border);
 }
 
-.image-input__edit-button {
-  --ez-button--background-color: var(--ez-image-input--edit-button-bg);
-  --ez-button--hover--background-color: var(--ez-image-input--edit-button-bg-hover);
-  --ez-button--color: var(--ez-image-input--edit-button-color);
-  --ez-button--border: var(--ez-image-input--edit-button-border);
-  --ez-button--hover--border: var(--ez-image-input--edit-button-border);
-  --ez-button--left-icon--color: var(--ez-image-input--edit-button-color);
-  --ez-button--right-icon--color: var(--ez-image-input--edit-button-color);
+.image-input__remove-button {
+  position: absolute;
+  top: var(--space--8);
+  right: var(--space--8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .image-input__popup-content {

package/dist/collection/components/ez-image-input/ez-image-input.js

@@ -42,11 +42,6 @@ export class EzImageInput {
       }
       this.ezChange.emit('');
     };
-    this.handleEditImage = (event) => {
-      var _a;
-      event.stopPropagation();
-      (_a = this._inputElem) === null || _a === void 0 ? void 0 : _a.click();
-    };
     this.handleClickDropZone = () => {
       var _a;
       if (this.enabled && !this._hasImage) {
@@ -138,7 +133,7 @@ export class EzImageInput {
         'image-input__container--disabled': !this.enabled,
         'image-input__container--dragging': this._isDragging,
         'image-input__container--has-image': this._hasImage
-      }, "data-enabled": this.enabled.toString(), "data-has-image": this._hasImage.toString(), onClick: this.handleClickDropZone, onDrop: this.handleDrop, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, role: "button", "aria-label": dropZoneLabel, tabindex: this.enabled ? 0 : -1 }, h("input", { ref: (el) => (this._inputElem = el), type: "file", accept: this.accept, name: this.name, disabled: !this.enabled, onChange: this.handleFileSelect, class: "image-input__file-input", "aria-hidden": "true" }), this._hasImage && this.value ? (h("div", { class: "image-input__preview" }, h("img", { src: this.value, alt: this.i18n('ez-image-input.imageAlt'), class: "image-input__image", onClick: this.handleImageClick }), this.enabled && (h("div", { class: "image-input__actions" }, h("ez-button", { class: "image-input__remove-button", variant: "primary", type: "button", mode: "icon", size: "small", iconName: "trash-alt", onClick: this.handleRemoveImage, "aria-label": this.i18n('ez-image-input.removeImage'), title: this.i18n('ez-image-input.removeImage') }), h("ez-button", { class: "image-input__edit-button", variant: "secondary", type: "button", mode: "icon", size: "small", iconName: "edit", onClick: this.handleEditImage, "aria-label": this.i18n('ez-image-input.editImage'), title: this.i18n('ez-image-input.editImage') }))))) : (h("div", { class: "image-input__dropzone" }, h("ez-icon", { iconName: "image", size: "x-large" }), h("span", { class: "image-input__label" }, dropZoneLabel)))), h("ez-popup", { opened: this._showImagePopup, ezTitle: this.i18n('ez-image-input.imagePreview'), size: "large", heightMode: "auto", onEzPopupAction: this.handlePopupAction, onEzClosePopup: this.handleClosePopup }, h("div", { class: "image-input__popup-content" }, h("img", { src: this.value, alt: this.i18n('ez-image-input.imageAlt'), class: "image-input__popup-image" })))));
+      }, "data-enabled": this.enabled.toString(), "data-has-image": this._hasImage.toString(), onClick: this.handleClickDropZone, onDrop: this.handleDrop, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, role: "button", "aria-label": dropZoneLabel, tabindex: this.enabled ? 0 : -1 }, h("input", { ref: (el) => (this._inputElem = el), type: "file", accept: this.accept, name: this.name, disabled: !this.enabled, onChange: this.handleFileSelect, class: "image-input__file-input", "aria-hidden": "true" }), this._hasImage && this.value ? (h("div", { class: "image-input__preview" }, h("img", { src: this.value, alt: this.i18n('ez-image-input.imageAlt'), class: "image-input__image", onClick: this.handleImageClick }), this.enabled && (h("ez-button", { class: "image-input__remove-button", variant: "primary", type: "button", mode: "icon", size: "small", iconName: "trash-alt", onClick: this.handleRemoveImage, "aria-label": this.i18n('ez-image-input.removeImage'), title: this.i18n('ez-image-input.removeImage') })))) : (h("div", { class: "image-input__dropzone" }, h("ez-icon", { iconName: "image", size: "x-large" }), h("span", { class: "image-input__label" }, dropZoneLabel)))), h("ez-popup", { opened: this._showImagePopup, ezTitle: this.i18n('ez-image-input.imagePreview'), size: "large", heightMode: "auto", onEzPopupAction: this.handlePopupAction, onEzClosePopup: this.handleClosePopup }, h("div", { class: "image-input__popup-content" }, h("img", { src: this.value, alt: this.i18n('ez-image-input.imageAlt'), class: "image-input__popup-image" })))));
   }
   static get is() { return "ez-image-input"; }
   static get encapsulation() { return "shadow"; }