@sankhyalabs/ezui 5.22.0-dev.3 → 5.22.0-dev.30

package/dist/collection/components/ez-card-item/ez-card-item.css

@@ -1,7 +1,10 @@
-:host {
+:host {  
   /*@doc Define o tamanho da fonte do componente.*/
   --ez-card-item--font-size: var(--text--medium, 14px);
 
+  /*@doc Define o tamanho da fonte do componente no modo compacto.*/
+  --ez-card-item--font-size-compacted: var(--text--extra-small, 10px);
+
   /*@doc Define a família da fonte do componente.*/
   --ez-card-item--font-family: var(--font-pattern, Arial);
 
@@ -12,7 +15,7 @@
   --ez-card-item--font-weight-large: var(--text-weight--large, 600);
 
   /*@doc Define a cor da fonte do componente.*/
-  --ez-card-item--color: var(--title--primary, #2B3A54);
+  --ez-card-item--color: var(--text--primary, #626e82);
 
   /*@doc Define a cor da fonte da key do componente.*/
   --ez-card-item__key--color: var(--text--primary, #626e82);
@@ -29,6 +32,9 @@
   /*@doc Define a cor do highlight / marcação nos textos do componente.*/
   --ez-card-item__highlight--color: var(--color--primary-300, #E2F4EF);
 
+   /*@doc Define o peso da fonte do componente.*/
+   --ez-card-item--detail-label--font-weight: var(--text-weight--large, 400);
+
   width: 100%;
   display: flex;
   cursor: pointer;
@@ -39,7 +45,6 @@
   flex-direction: column;
   width: 100%;
   cursor: pointer;
-  padding: 12px;
   z-index: 0;
   position: relative;
   container-type: inline-size;
@@ -47,6 +52,21 @@
   white-space: pre-line;
 }
 
+.card-item__detail{
+  display: inline-block;
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  opacity: var(--opacity--soft);
+}
+
+
+
+.card-item__expanded {
+  padding: var(--space--medium);
+}
+
 .card-item:hover {
   background: #F0F3F7;
   border-radius: 12px;
@@ -81,22 +101,26 @@
 }
 
 .card-item__details-container__left {
+  display: flex;
+  flex-direction: column;
   white-space: pre-line;
   cursor: pointer;
   width: 50%;
 }
 
 .card-item__details-container__right {
+  display: flex;
+  flex-direction: column;
   white-space: pre-line;
   width: 50%;
   cursor: pointer;
 }
 
-.card-item__detail:not(:last-child) {
+.card-item__detail{
   cursor: pointer;
-  white-space: pre-line;
+}
 
-  /*public*/
+.card-item__detail-default:not(:last-child) {
   padding-bottom: var(--ez-card-item__detail--padding-bottom);
 }
 
@@ -106,8 +130,7 @@
   /*public*/
   font-size: var(--ez-card-item--font-size);
   font-family: var(--ez-card-item--font-family);
-  font-weight: var(--ez-card-item--font-weight);
-  color: var(--ez-card-item__detail-label--color);
+  font-weight: var(--ez-card-item--detail-label--font-weight);
 }
 
 .card-item__detail-value {
@@ -118,7 +141,6 @@
   font-size: var(--ez-card-item--font-size);
   font-family: var(--ez-card-item--font-family);
   font-weight: var(--ez-card-item--font-weight);
-  color: var(--ez-card-item--color);
 }
 
 .card-item__highlight {
@@ -138,7 +160,7 @@
   align-items: center;
 }
 
-.card-item__details-container{
+.card-item__details-container_default{
   display: flex;
 }
 
@@ -146,6 +168,34 @@
   margin-left: auto;
 }
 
+/* Modo compacto */
+.card-item__compacted {
+  padding: var(--space--medium);
+  padding-bottom: 0px;
+  padding-right: 0px;
+}
+
+.card-item__detail-label-compacted {
+  font-size: var(--ez-card-item--font-size-compacted);
+}
+
+.card-item__detail-value-compacted {
+  font-size: var(--ez-card-item--font-size-compacted);
+}
+
+.card-item__title-compacted {
+  font-size: var(--ez-card-item--font-size-compacted);
+}
+
+.card-item__details-container__left-compacted{
+  width: 100%;
+}
+
+.card-item__details-container__right-compacted {
+  width: 100%;
+}
+
+
 @container box (max-width: 550px) {
   .card-item__details {
     flex-direction: column;

package/dist/collection/components/ez-card-item/ez-card-item.js

@@ -4,6 +4,7 @@ export class EzCardItem {
   constructor() {
     this.item = undefined;
     this.enableKey = true;
+    this.compacted = false;
   }
   componentWillRender() {
     this.createDetailList();
@@ -26,14 +27,22 @@ export class EzCardItem {
       }
     }
   }
+  buildDetailContentTitle(detail) {
+    var _a, _b;
+    if ((detail === null || detail === void 0 ? void 0 : detail.label) == undefined && (detail === null || detail === void 0 ? void 0 : detail.value) == undefined)
+      return;
+    const cleanLabel = (_a = StringUtils.replaceAccentuatedCharsHtmlEntities(detail === null || detail === void 0 ? void 0 : detail.label)) === null || _a === void 0 ? void 0 : _a.replace(/<[^>]*>/g, '');
+    const cleanValue = (_b = StringUtils.replaceAccentuatedCharsHtmlEntities(detail === null || detail === void 0 ? void 0 : detail.value)) === null || _b === void 0 ? void 0 : _b.replace(/<[^>]*>/g, '');
+    return `${cleanLabel}: ${cleanValue}`;
+  }
   buildDetailContent(detail) {
-    return h("div", { class: "card-item__detail" }, h("label", { class: "card-item__detail-label" }, detail.label), ": ", h("label", { class: "card-item__detail-value", innerHTML: detail.value }));
+    return h("div", { class: `card-item__detail ${this.compacted ? "" : "card-item__detail-default"}`, title: this.buildDetailContentTitle(detail) }, h("label", { class: `card-item__detail-label ${this.compacted ? "card-item__detail-label-compacted" : ""}` }, `${detail.label}: `), " ", h("label", { class: `card-item__detail-value ${this.compacted ? "card-item__detail-value-compacted" : ""}`, innerHTML: detail.value }));
   }
   render() {
     return (h(Host, null, this.item &&
-      h("div", { class: "card-item", onClick: () => { this.ezClick.emit(this.item); } }, h("div", { class: "ez-row card-item__content" }, h("div", { class: "ez-col ez-col--sd-11 card-item__details" }, h("label", { class: "card-item__title" }, this.enableKey && (h("span", { class: "card-item__key", innerHTML: this.item.key })), h("span", { innerHTML: this.item.title })), h("div", { class: "card-item__details-container" }, h("div", { class: "card-item__details-container__left" }, this._details.detailsLeft.map(detail => {
+      h("div", { class: `card-item ${this.compacted ? "card-item__compacted" : "card-item__expanded"} `, onClick: () => { this.ezClick.emit(this.item); } }, h("div", { class: "ez-row card-item__content" }, h("div", { class: "ez-col ez-col--sd-11 card-item__details" }, h("label", { class: `card-item__title ${this.compacted ? "card-item__title-compacted" : ""}` }, this.enableKey && (h("span", { class: "card-item__key", innerHTML: this.item.key })), h("span", { innerHTML: this.item.title })), h("div", { class: `${this.compacted ? "card-item__details-container_compacted" : "card-item__details-container_default"}` }, h("div", { class: `card-item__details-container__left ${this.compacted ? "card-item__details-container__left-compacted" : ""}` }, this._details.detailsLeft.map(detail => {
         return this.buildDetailContent(detail);
-      })), h("div", { class: "card-item__details-container__right" }, this._details.detailsRight.map(detail => {
+      })), h("div", { class: `card-item__details-container__right ${this.compacted ? "card-item__details-container__right-compacted" : ""}` }, this._details.detailsRight.map(detail => {
         return this.buildDetailContent(detail);
       })))), h("div", { class: "ez-col ez-col--sd-1 card-item__details-slot" }, h("slot", { name: "rightSlot" }))))));
   }
@@ -87,6 +96,24 @@ export class EzCardItem {
         "attribute": "enable-key",
         "reflect": false,
         "defaultValue": "true"
+      },
+      "compacted": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Determina se o componente ser\u00E1 apresentado no modo compacto."
+        },
+        "attribute": "compacted",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }

package/dist/collection/components/ez-check/ez-check.css

@@ -129,11 +129,6 @@ input.regular-mode {
   cursor: pointer;
   border-radius: 50%;
   position: relative;
-
-
-  /*public*/
-  width: var(--ez-check--width);
-  height: var(--ez-check--height);
 }
 
 input.compact{
@@ -363,5 +358,5 @@ input.switch-mode:checked:disabled::after {
 }
 
 .label--padding {
-  padding-left: var(--space--small);
+  padding-left: var(--space--extra-small);
 }

package/dist/collection/components/ez-collapsible-box/ez-collapsible-box.css

@@ -73,7 +73,7 @@ ez-icon {
 .collapsible-box__title {
   /*private*/
   position: relative;
-  width: auto;
+  width: 100%;
   display: flex;
   box-sizing: border-box;
   align-items: center;
@@ -98,7 +98,7 @@ ez-icon {
 
 .collapsible-box__label {
   /*private*/
-  display: flex;
+  display: block;
   white-space: nowrap;
   overflow: hidden;
   cursor: pointer;

package/dist/collection/components/ez-combo-box/ez-combo-box.js

@@ -25,6 +25,7 @@ export class EzComboBox {
     this.suppressSearch = false;
     this.optionLoader = undefined;
     this.suppressEmptyOption = false;
+    this.stopPropagateEnterKeyEvent = false;
     this.canShowError = true;
     this.mode = "regular";
     this.hideErrorOnFocusOut = true;
@@ -487,6 +488,7 @@ export class EzComboBox {
         event.stopPropagation();
         break;
       case "Enter":
+        this.handleEventPropagation(event);
         this.selectCurrentOption();
         break;
       case "Escape":
@@ -502,6 +504,12 @@ export class EzComboBox {
     //e o contexto pode reagir (fechar um popup por exemplo).
     //event.stopPropagation();
   }
+  //O evento deve ter sua propagação interrompida, apenas se a lista de opções estiver sendo exibida.
+  handleEventPropagation(event) {
+    if (this._listContainer.hasChildNodes() && this.stopPropagateEnterKeyEvent) {
+      event.stopPropagation();
+    }
+  }
   onTextInputFocusOutHandler() {
     if (this.hideErrorOnFocusOut)
       this.cancelPreselection();
@@ -745,6 +753,24 @@ export class EzComboBox {
         "reflect": false,
         "defaultValue": "false"
       },
+      "stopPropagateEnterKeyEvent": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Se true, ineterrompe a propaga\u00E7\u00E3o do evento de KeyDown da tecla enter"
+        },
+        "attribute": "stop-propagate-enter-key-event",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "canShowError": {
         "type": "boolean",
         "mutable": false,

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

@@ -81,6 +81,9 @@ export class EzDateInput {
     if ((currentValue === null || currentValue === void 0 ? void 0 : currentValue.getTime()) !== (newValueValidated === null || newValueValidated === void 0 ? void 0 : newValueValidated.getTime())) {
       this.value = newValueValidated;
     }
+    else {
+      this._changePending = false;
+    }
   }
   showCalendar() {
     this.handleBlur();

package/dist/collection/components/ez-date-input/test/ez-date-input.test.js

@@ -0,0 +1,15 @@
+import { EzDateInput } from "../ez-date-input";
+describe("ez-date-input", () => {
+  let ezDateInput;
+  describe("changeValue", () => {
+    beforeEach(() => {
+      ezDateInput = new EzDateInput();
+    });
+    it('should set _changePending to false when there was no changes when changeValue was called', () => {
+      ezDateInput.value = undefined;
+      ezDateInput['_changePending'] = true;
+      ezDateInput['changeValue'](undefined);
+      expect(ezDateInput['_changePending']).toBeFalsy();
+    });
+  });
+});

package/dist/collection/components/ez-form-view/custom-input/ez-custom-form-input.js

@@ -1,6 +1,6 @@
 import { h, Host } from '@stencil/core';
 import { CustomEditorSource } from '../../../utils/customEditor/interfaces/ICustomEditor';
-import { HTMLBuilder, StringUtils } from '@sankhyalabs/core';
+import { HTMLBuilder, ObjectUtils, StringUtils } from '@sankhyalabs/core';
 export class EzCustomFormInput {
   constructor() {
     this.gui = undefined;
@@ -32,6 +32,29 @@ export class EzCustomFormInput {
     var _a, _b;
     return ((_b = (_a = this.gui) === null || _a === void 0 ? void 0 : _a["isInvalid"]) === null || _b === void 0 ? void 0 : _b.call(_a)) || false;
   }
+  watchValue() {
+    this.handleValue(this.gui);
+  }
+  watchCustomEditor() {
+    this.getContent();
+  }
+  watchFormViewField(newValue, oldValue) {
+    if (!ObjectUtils.equals(newValue, oldValue))
+      this.getContent();
+  }
+  watchDetailContext() {
+    this.getContent();
+  }
+  watchBuilderFallback() {
+    this.getContent();
+  }
+  watchSelectedRecord(newValue, oldValue) {
+    const newRecordId = newValue === null || newValue === void 0 ? void 0 : newValue['__record__id__'];
+    const oldRecordId = oldValue === null || oldValue === void 0 ? void 0 : oldValue['__record__id__'];
+    if (newRecordId !== oldRecordId) {
+      this.getContent();
+    }
+  }
   getContent() {
     var _a, _b;
     const fieldProps = new Map();
@@ -71,9 +94,7 @@ export class EzCustomFormInput {
     if (typeof gui === 'string') {
       gui = HTMLBuilder.parseElement(gui);
     }
-    if (this.value) {
-      gui.setAttribute('value', typeof this.value === 'object' ? this.value.value : this.value);
-    }
+    gui.setAttribute('value', this.value);
     this.gui = h("div", { key: StringUtils.generateUUID(), ref: el => el && el.appendChild(gui) });
   }
   setValue(value) {
@@ -89,7 +110,7 @@ export class EzCustomFormInput {
       child.$attrs$.value = this.value;
     });
   }
-  componentWillRender() {
+  componentWillLoad() {
     this.getContent();
   }
   render() {
@@ -275,4 +296,25 @@ export class EzCustomFormInput {
       }
     };
   }
+  static get watchers() {
+    return [{
+        "propName": "value",
+        "methodName": "watchValue"
+      }, {
+        "propName": "customEditor",
+        "methodName": "watchCustomEditor"
+      }, {
+        "propName": "formViewField",
+        "methodName": "watchFormViewField"
+      }, {
+        "propName": "detailContext",
+        "methodName": "watchDetailContext"
+      }, {
+        "propName": "builderFallback",
+        "methodName": "watchBuilderFallback"
+      }, {
+        "propName": "selectedRecord",
+        "methodName": "watchSelectedRecord"
+      }];
+  }
 }

package/dist/collection/components/ez-form-view/fieldbuilder/templates/SearchInput.tpl.js

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
-export const buildSearch = ({ name, label, readOnly, required, contextName, canShowError, optionLoader }) => {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" }, h("ez-search", { enabled: !readOnly, suppressEmptyOption: required, label: label, "data-field-name": name, "data-context-name": contextName, key: name, canShowError: canShowError, optionLoader: optionLoader })));
+export const buildSearch = ({ name, label, readOnly, required, contextName, canShowError, optionLoader, props }) => {
+  var _a;
+  return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" }, h("ez-search", { enabled: !readOnly, suppressEmptyOption: required, label: label, "data-field-name": name, "data-context-name": contextName, key: name, canShowError: canShowError, optionLoader: optionLoader, ignoreLimitCharsToSearch: (_a = props.ignoreLimitCharsToSearch) !== null && _a !== void 0 ? _a : false })));
 };