@sankhyalabs/ezui 0.0.0-bugfix-dev-KB-85772.0 → 0.0.0-bugfix-dev-KB-87769.0

package/dist/collection/components/ez-text-area/ez-text-area.js

@@ -14,6 +14,8 @@ export class EzTextArea {
     this.enableResize = true;
     this.autoRows = false;
     this.autoFocus = false;
+    this.alternativePlaceholder = undefined;
+    this.forceLabelFloat = false;
   }
   observeErrorMessage() {
     var _a, _b, _c, _d;
@@ -64,6 +66,9 @@ export class EzTextArea {
       (_b = this._resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
     }
   }
+  observeAlternativePlaceholder(newValue) {
+    this.forceLabelFloat = !!newValue;
+  }
   //---------------------------------------------
   // Public methods
   //---------------------------------------------
@@ -112,6 +117,8 @@ export class EzTextArea {
     return this._inputElem && (this.value || "") !== this._inputElem.value;
   }
   adjustFloatingLabel() {
+    if (this.forceLabelFloat)
+      return;
     if (this.label && this._labelElem) {
       const hasValue = this.value && this.value.toString().length > 0;
       const containsFloatedClass = this._labelElem.classList.contains("textarea__label--floated");
@@ -195,6 +202,19 @@ export class EzTextArea {
     var _a;
     (_a = this._resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
   }
+  buildPlaceholder() {
+    if (this.alternativePlaceholder)
+      return this.alternativePlaceholder;
+    return (this.mode === "slim" && this.label) ? this.label : '';
+  }
+  buildLabelClass() {
+    let classList = this.enabled ? 'textarea__label' : 'textarea__label textarea__label--disabled';
+    if (this.errorMessage)
+      classList = classList + ' hasError';
+    if (this.forceLabelFloat)
+      classList = classList + ' textarea__label--floated';
+    return classList;
+  }
   //---------------------------------------------
   // Lifecycle web component
   //---------------------------------------------
@@ -211,11 +231,11 @@ export class EzTextArea {
   render() {
     ElementIDUtils.addIDInfoIfNotExists(this._hostElement, 'input');
     return (h(Host, null, h("div", { class: `textarea ${this.enabled ? "" : "textarea--disabled"}`, ref: (el) => this._container = el }, this.label && this.mode != "slim" ?
-      h("label", { ref: (el) => this._labelElem = el, class: this.enabled ? "textarea__label" : "textarea__label textarea__label--disabled", onClick: () => this._inputElem.focus(), title: this.label }, this.label)
+      h("label", { ref: (el) => this._labelElem = el, class: this.buildLabelClass(), onClick: () => this._inputElem.focus(), title: this.label }, this.label)
       : null, h("textarea", { onFocus: () => this.handleFocus(), "data-element-id": ElementIDUtils.getInternalIDInfo("input"), ref: (el) => this._inputElem = el, value: this.value, disabled: !this.enabled, class: {
         "textarea--slim": this.mode === "slim",
         "textarea--resizable": this.enableResize
-      }, placeholder: this.mode === "slim" && this.label ? this.label : "", onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); }, rows: this.rows })), this.canShowError && this.mode != "slim" &&
+      }, placeholder: this.buildPlaceholder(), onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); }, rows: this.rows })), this.canShowError && this.mode != "slim" &&
       h("span", { class: "message-box", ref: (el) => this._messageBoxElem = el, title: this.errorMessage }, this.errorMessage)));
   }
   static get is() { return "ez-text-area"; }
@@ -408,9 +428,31 @@ export class EzTextArea {
         "attribute": "auto-focus",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "alternativePlaceholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Texto alternativo a ser apresentado como t\u00EDtulo do campo."
+        },
+        "attribute": "alternative-placeholder",
+        "reflect": true
       }
     };
   }
+  static get states() {
+    return {
+      "forceLabelFloat": {}
+    };
+  }
   static get events() {
     return [{
         "method": "ezChange",
@@ -523,6 +565,9 @@ export class EzTextArea {
       }, {
         "propName": "autoRows",
         "methodName": "observeAutoRows"
+      }, {
+        "propName": "alternativePlaceholder",
+        "methodName": "observeAlternativePlaceholder"
       }];
   }
 }

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

@@ -4,6 +4,7 @@ export class EzTextInput {
   constructor() {
     this._isOverflowing = false;
     this.label = undefined;
+    this.alternativePlaceholder = undefined;
     this.value = undefined;
     this.enabled = true;
     this.errorMessage = undefined;
@@ -17,6 +18,7 @@ export class EzTextInput {
     this.password = false;
     this.autoFocus = false;
     this.hasRightSlotContent = false;
+    this.forceLabelFloat = false;
   }
   observeHasInvalid(newValue, oldValue) {
     if (newValue === oldValue) {
@@ -48,6 +50,9 @@ export class EzTextInput {
       }
     }
   }
+  observeAlternativePlaceholder(newValue) {
+    this.forceLabelFloat = !!newValue;
+  }
   //---------------------------------------------
   // Private methods
   //---------------------------------------------
@@ -75,6 +80,8 @@ export class EzTextInput {
       if (this._inputElem && !this._inputElem.classList.contains("input--with--label")) {
         this._inputElem.classList.add("input--with--label");
       }
+      if (this.forceLabelFloat)
+        return;
       const hasValue = this.value && this.value.toString().length > 0;
       const containsFloatedClass = this._labelElem.classList.contains("input__label--floated");
       if (hasValue || this.isFocused()) {
@@ -250,6 +257,19 @@ export class EzTextInput {
   getValue() {
     return this.mask && this.cleanValueMask ? this.applyMask(this.value) : this.value;
   }
+  buildLabelClass() {
+    let classList = this.enabled ? 'input__label' : 'input__label input__label--disabled';
+    if (this.errorMessage)
+      classList = classList + ' hasError';
+    if (this.forceLabelFloat)
+      classList = classList + ' input__label--floated';
+    return classList;
+  }
+  buildPlaceholder() {
+    if (this.alternativePlaceholder)
+      return this.alternativePlaceholder;
+    return (this.mode === "slim" && this.label) ? this.label : '';
+  }
   checkIsOverflowing() {
     if (this._inputElem) {
       this._isOverflowing = this._inputElem.offsetWidth < this._inputElem.scrollWidth;
@@ -299,11 +319,14 @@ export class EzTextInput {
       this._inputElem.setSelectionRange(0, (_a = this._inputElem) === null || _a === void 0 ? void 0 : _a.value.length);
     });
   }
+  componentDidRender() {
+    this.adjustFloatingLabel();
+  }
   render() {
     ElementIDUtils.addIDInfoIfNotExists(this._hostElement, 'input');
     return (h(Host, { style: this._hostElement.classList.contains("grid_editor") ? { "height": "100%" } : null }, h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label && this.mode != "slim" ?
-      h("label", { ref: (el) => this._labelElem = el, class: `${this.enabled ? "input__label" : "input__label input__label--disabled"} ${this.errorMessage ? "hasError" : ""}`, onClick: () => this._inputElem.focus(), title: this.label }, this.label)
-      : null, h("input", { "data-element-id": ElementIDUtils.getInternalIDInfo("input"), onFocus: () => this.doFocus(), ref: (el) => this._inputElem = el, type: this.password ? "password" : "text", class: `${this.mode === "slim" ? "input--slim" : ""}`, placeholder: this.mode === "slim" && this.label ? this.label : "", value: this.getValue(), disabled: !this.enabled, onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); } }), h("ez-tooltip", { anchoringElement: this._hostElement, message: this.getValue(), active: this._isOverflowing, useAnchorSize: true }), this.canShowError && this.mode != "slim" && this.errorMessage &&
+      h("label", { ref: (el) => this._labelElem = el, class: this.buildLabelClass(), onClick: () => this._inputElem.focus(), title: this.label }, this.label)
+      : null, h("input", { "data-element-id": ElementIDUtils.getInternalIDInfo("input"), onFocus: () => this.doFocus(), ref: (el) => this._inputElem = el, type: this.password ? "password" : "text", class: `${this.mode === "slim" ? "input--slim" : ""}`, placeholder: this.buildPlaceholder(), value: this.getValue(), disabled: !this.enabled, onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); } }), h("ez-tooltip", { anchoringElement: this._hostElement, message: this.getValue(), active: this._isOverflowing, useAnchorSize: true }), this.canShowError && this.mode != "slim" && this.errorMessage &&
       h("ez-tooltip", { type: "error", message: this.errorMessage }, h("ez-icon", { class: `tooltip-icon ${this.errorMessage ? "hasError" : ""} ${this.hasRightSlotContent ? "rightIconSlot" : ""}`, "data-element-id": ElementIDUtils.getInternalIDInfo("tooltip-icon"), ref: (el) => this._tooltipIconElem = el, iconName: "alert-circle" })), h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }, " ")));
   }
   static get is() { return "ez-text-input"; }
@@ -337,6 +360,23 @@ export class EzTextInput {
         "attribute": "label",
         "reflect": true
       },
+      "alternativePlaceholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Texto alternativo a ser apresentado como t\u00EDtulo do campo."
+        },
+        "attribute": "alternative-placeholder",
+        "reflect": true
+      },
       "value": {
         "type": "string",
         "mutable": true,
@@ -553,7 +593,8 @@ export class EzTextInput {
   }
   static get states() {
     return {
-      "hasRightSlotContent": {}
+      "hasRightSlotContent": {},
+      "forceLabelFloat": {}
     };
   }
   static get events() {
@@ -649,6 +690,9 @@ export class EzTextInput {
       }, {
         "propName": "value",
         "methodName": "observeValue"
+      }, {
+        "propName": "alternativePlaceholder",
+        "methodName": "observeAlternativePlaceholder"
       }];
   }
 }

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

@@ -11,6 +11,7 @@ export class EzTimeInput {
     this.mode = "regular";
     this.canShowError = true;
     this.autoFocus = false;
+    this.alternativePlaceholder = undefined;
   }
   observeErrorMessage() {
     var _a;
@@ -148,7 +149,7 @@ export class EzTimeInput {
   }
   render() {
     ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
-    return (h(Host, null, h("ez-text-input", { class: "time__input", "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), ref: (el) => this._textInput = el, "data-slave-mode": "true", value: this._viewValue, enabled: this.enabled, label: this.label, restrict: "0123456789:", onBlur: () => this.handleBlur(), onInput: () => this.handleInput(), errorMessage: this.errorMessage, mode: this.mode, canShowError: this.canShowError }, h("ez-icon", { slot: "leftIcon", iconName: "timer-outline" }))));
+    return (h(Host, null, h("ez-text-input", { class: "time__input", "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), ref: (el) => this._textInput = el, "data-slave-mode": "true", value: this._viewValue, enabled: this.enabled, label: this.label, restrict: "0123456789:", onBlur: () => this.handleBlur(), onInput: () => this.handleInput(), errorMessage: this.errorMessage, mode: this.mode, canShowError: this.canShowError, alternativePlaceholder: this.alternativePlaceholder }, h("ez-icon", { slot: "leftIcon", iconName: "timer-outline" }))));
   }
   static get is() { return "ez-time-input"; }
   static get encapsulation() { return "shadow"; }
@@ -305,6 +306,23 @@ export class EzTimeInput {
         "attribute": "auto-focus",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "alternativePlaceholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Texto alternativo ser apresentado como t\u00EDtulo do campo."
+        },
+        "attribute": "alternative-placeholder",
+        "reflect": false
       }
     };
   }

package/dist/collection/utils/form/DataBinder.js

@@ -1,10 +1,14 @@
-import { ApplicationContext, Action, WaitingChangeException, DataUnitAction, StringUtils } from "@sankhyalabs/core";
+import { ApplicationContext, Action, WaitingChangeException, DataUnitAction, StringUtils, ObjectUtils, } from '@sankhyalabs/core';
 import { RecordValidationProcessor } from "../validators/recordvalidator/RecordValidationProcessor";
 export default class DataBinder {
   constructor(dataUnit) {
     this.onDataUnitEvent = (action) => {
-      var _a, _b;
+      var _a;
       switch (action.type) {
+        case Action.MULTIPLE_EDITION_CHANGED:
+          this.clearInvalid();
+          this.updateAllFieldsValues();
+          break;
         case Action.DATA_LOADED:
         case Action.DATA_SAVED:
         case Action.RECORDS_REMOVED:
@@ -19,13 +23,11 @@ export default class DataBinder {
         case Action.CHANGE_UNDONE:
         case Action.CHANGE_REDONE:
         case Action.RECORD_LOADED:
-          (_a = this._fields) === null || _a === void 0 ? void 0 : _a.forEach(field => {
-            this.updateValue(field.fieldName, field.field);
-          });
+          this.updateAllFieldsValues();
           this.clearFieldError(Object.keys(action.payload)[0]);
           break;
         case Action.FIELD_INVALIDATED:
-          (_b = this._fields) === null || _b === void 0 ? void 0 : _b.forEach(field => {
+          (_a = this._fields) === null || _a === void 0 ? void 0 : _a.forEach(field => {
             this.updateErrorMessage(field.fieldName, field.field);
           });
           break;
@@ -123,13 +125,19 @@ export default class DataBinder {
       this._dataUnit.clearInvalid(this.getCurrentRecordId(), fieldName);
     }
   }
-  updateValue(fieldName, field) {
+  updateFieldValue(fieldName, field) {
     const bind = this._fields.get(fieldName);
     try {
-      if (bind) {
+      if (bind)
         bind.listen = false;
+      if (this._dataUnit.isMultipleEdition && this.hasMultipleValuesBetweenRecords(fieldName)) {
+        field['value'] = undefined;
+        field['alternativePlaceholder'] = 'Múltiplos Valores';
+      }
+      else {
+        field["value"] = this._dataUnit.getFieldValue(fieldName);
+        field['alternativePlaceholder'] = undefined;
       }
-      field["value"] = this._dataUnit.getFieldValue(fieldName);
       this.updateErrorMessage(fieldName, field);
     }
     finally {
@@ -138,6 +146,14 @@ export default class DataBinder {
       }
     }
   }
+  hasMultipleValuesBetweenRecords(key) {
+    var _a, _b;
+    const selectedRecords = (_b = (_a = this._dataUnit.getSelectionInfo()) === null || _a === void 0 ? void 0 : _a.records) !== null && _b !== void 0 ? _b : [];
+    if (selectedRecords.length <= 1)
+      return false;
+    const firstValue = selectedRecords[0][key];
+    return !selectedRecords.every(record => ObjectUtils.equals(record[key], firstValue));
+  }
   validate() {
     return this._recordValidatorProcessor.validate();
   }
@@ -176,7 +192,7 @@ export default class DataBinder {
       oldBind.destroy();
     }
     this.bindSearchOptionsLoader(fieldName, field);
-    field["value"] = this._dataUnit.getFieldValue(fieldName);
+    this.updateFieldValue(fieldName, field);
     this.updateErrorMessage(fieldName, field);
     this._fields.set(fieldName, Bind.create(fieldName, field, (fieldName, waitingChange) => this.changeStarted(fieldName, waitingChange), (fieldName) => this.cancelWaitingChange(fieldName), (fieldName, newValue) => this.setFieldValue(fieldName, newValue)));
     this.applyEzUploadContext(fieldName, field);
@@ -218,8 +234,14 @@ export default class DataBinder {
       this._dataUnit.addRecord();
     }
     this._dataUnit.clearInvalid(this.getCurrentRecordId(), fieldName);
-    const record = this._dataUnit.getSelectedRecord();
-    this._dataUnit.setFieldValue(fieldName, newValue, record ? [record.__record__id__] : undefined);
+    if (this._dataUnit.isMultipleEdition) {
+      const selectionInfo = this._dataUnit.getSelectionInfo();
+      this._dataUnit.setFieldValue(fieldName, newValue, selectionInfo.recordIds);
+    }
+    else {
+      const record = this._dataUnit.getSelectedRecord();
+      this._dataUnit.setFieldValue(fieldName, newValue, record ? [record.__record__id__] : undefined);
+    }
     if (this._dataUnit.waitingForChange(fieldName)) {
       const bind = this._fields.get(fieldName);
       if (bind) {
@@ -251,6 +273,12 @@ export default class DataBinder {
       field["maxFiles"] = ((_b = descriptor.properties) === null || _b === void 0 ? void 0 : _b.MAX_FILES) || 0;
     }
   }
+  updateAllFieldsValues() {
+    var _a;
+    (_a = this._fields) === null || _a === void 0 ? void 0 : _a.forEach(field => {
+      this.updateFieldValue(field.fieldName, field.field);
+    });
+  }
   interceptAction(action) {
     if (action.type === Action.RECORDS_COPIED) {
       const cleanFields = this._formMetadata.getCleanOnCopyFields();

package/dist/collection/utils/form/test/DataBinder.test.js

@@ -43,4 +43,18 @@ describe('DataBinder', () => {
     const dataBindersByDataUnit = ApplicationContext.getContextValue("__DATABINDER_BY_DATAUNIT__") || new Map();
     expect(dataBindersByDataUnit.get(dataUnit.dataUnitId).length).toBe(0);
   });
+  it('Should tell if has multiple values between fields', () => {
+    dataBinder['_dataUnit'].getSelectionInfo = jest.fn().mockReturnValue({ records: mockRecords() });
+    const hasMultiplesLabels = dataBinder['hasMultipleValuesBetweenRecords']('label');
+    const hasMultiplesValues = dataBinder['hasMultipleValuesBetweenRecords']('value');
+    expect(hasMultiplesLabels).toBe(false);
+    expect(hasMultiplesValues).toBe(true);
+  });
 });
+function mockRecords() {
+  return [
+    { label: 'label mocked', value: 'value mocked 1' },
+    { label: 'label mocked', value: 'value mocked 2' },
+    { label: 'label mocked', value: 'value mocked 3' },
+  ];
+}