@sankhyalabs/ezui 5.21.4 → 5.22.0-dev.10

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

@@ -1,4 +1,4 @@
-import { ElementIDUtils, NumberUtils } from "@sankhyalabs/core";
+import { ElementIDUtils, NumberUtils, StringUtils } from "@sankhyalabs/core";
 import { h } from "@stencil/core";
 import CSSVarsUtils from "../../utils/CSSVarsUtils";
 export class EzNumberInput {
@@ -6,6 +6,7 @@ export class EzNumberInput {
     this._focused = false;
     this._changePending = false;
     this._valuePromiseCallbacks = [];
+    this._value = undefined;
     this.label = undefined;
     this.value = undefined;
     this.enabled = true;
@@ -61,35 +62,42 @@ export class EzNumberInput {
   }
   observeValue(newValue, oldValue) {
     if (this._textInput && newValue != oldValue) {
-      const newValueValidated = this.validateValue(newValue);
-      const oldValueValidated = this.validateValue(oldValue);
-      if (newValueValidated === null) {
-        this._textInput.value = '';
-      }
-      if (newValueValidated != oldValueValidated) {
-        const textValue = this.getTextValue(newValueValidated) || '';
-        if ((this._textInput.value || '') !== textValue) {
-          const parsedNumber = this.getParsedNumber(textValue);
-          if (parsedNumber !== undefined || !this._focused) {
-            this._textInput.value = textValue;
-            this._focused = false;
-            this.errorMessage = "";
-          }
-        }
-        const valueEmitted = newValueValidated === null ? undefined : newValueValidated;
-        this.ezChange.emit(valueEmitted);
-      }
+      this.handleNewValue(newValue, oldValue);
     }
     this._changePending = false;
   }
+  observePrecision() {
+    if (this._textInput) {
+      this.setInputValue();
+    }
+  }
+  handleNewValue(newValue, oldValue) {
+    const newValueValidated = this.validateValue(newValue);
+    const oldValueValidated = this.validateValue(oldValue);
+    if (newValueValidated === null) {
+      this._value = '';
+    }
+    if (newValueValidated === oldValueValidated) {
+      return;
+    }
+    const textValue = this.getTextValue(newValueValidated) || '';
+    const parsedNumber = this.getParsedNumber(textValue);
+    if ((this._value || '') !== textValue && (parsedNumber !== undefined || !this._focused)) {
+      this._value = textValue;
+      this._focused = false;
+      this.errorMessage = "";
+    }
+    const valueEmitted = newValueValidated === null ? undefined : newValueValidated;
+    this.ezChange.emit(valueEmitted);
+  }
   validateValue(value) {
     return isNaN(value) || value === undefined ? null : value;
   }
   getTextValue(value) {
-    if (value != undefined) {
-      return this.precision > 0 ? NumberUtils.format(value.toString(), Number(this.precision), Number(this.prettyPrecision)) : value.toString();
-    }
-    return undefined;
+    if (value == undefined)
+      return undefined;
+    let textValue = this.precision >= 0 ? NumberUtils.format(value.toString(), Number(this.precision), Number(this.prettyPrecision)) : value.toString();
+    return (this.precision === 0) ? StringUtils.replaceAll(textValue, ".", "") : textValue;
   }
   changeValue(newValue) {
     this.errorMessage = "";
@@ -140,17 +148,13 @@ export class EzNumberInput {
       this.ezStartChange.emit({ waitmessage: "", blocking: false });
     }
   }
-  getParsedNumber(value) {
-    var _a;
-    if (value === void 0) {
-      value = (_a = this._textInput) === null || _a === void 0 ? void 0 : _a.value;
-    }
+  getParsedNumber(value = this._textInput.value) {
     return (value === null || value === void 0 ? void 0 : value.trim()) ? NumberUtils.stringToNumber(value) : undefined;
   }
   setInputValue() {
     const textValue = this.getTextValue(this.value) || '';
-    if ((this._textInput.value || '') !== textValue) {
-      this._textInput.value = textValue;
+    if ((this._value || '') !== textValue) {
+      this._value = textValue;
     }
   }
   componentDidLoad() {
@@ -159,7 +163,7 @@ export class EzNumberInput {
   }
   render() {
     ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
-    return (h("ez-text-input", { class: "number__input", "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), ref: elem => this._textInput = elem, "data-slave-mode": "true", label: this.label, onBlur: () => this.handleBlur(), onInput: () => this.handleInput(), restrict: this.precision > 0 ? "0123456789-,." : "0123456789-", enabled: this.enabled, errorMessage: this.errorMessage, mode: this.mode, canShowError: this.canShowError }));
+    return (h("ez-text-input", { class: "number__input", "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), ref: elem => this._textInput = elem, "data-slave-mode": "true", label: this.label, onBlur: () => this.handleBlur(), onInput: () => this.handleInput(), restrict: this.precision > 0 ? "0123456789-,." : "0123456789-", enabled: this.enabled, errorMessage: this.errorMessage, mode: this.mode, canShowError: this.canShowError, value: this._value }));
   }
   static get is() { return "ez-number-input"; }
   static get encapsulation() { return "shadow"; }
@@ -316,6 +320,11 @@ export class EzNumberInput {
       }
     };
   }
+  static get states() {
+    return {
+      "_value": {}
+    };
+  }
   static get events() {
     return [{
         "method": "ezChange",
@@ -455,6 +464,12 @@ export class EzNumberInput {
       }, {
         "propName": "value",
         "methodName": "observeValue"
+      }, {
+        "propName": "precision",
+        "methodName": "observePrecision"
+      }, {
+        "propName": "prettyPrecision",
+        "methodName": "observePrecision"
       }];
   }
 }

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

@@ -12,7 +12,6 @@ export class EzSearch {
     this._tabPressed = false;
     this._textEmptyList = "Nenhum resultado encontrado";
     this._textEmptySearch = "Nenhum resultado de {0} encontrado";
-    this._lookupMode = false;
     this._startHighlightTag = "<span class='card-item__highlight'>";
     this._endHighlightTag = "</span>";
     this._preSelection = undefined;
@@ -42,36 +41,30 @@ export class EzSearch {
     var _a;
     if (this._textInput) {
       this._textInput.errorMessage = this.errorMessage;
-      if (!((_a = this.errorMessage) === null || _a === void 0 ? void 0 : _a.trim())) {
+      if (!((_a = this.errorMessage) === null || _a === void 0 ? void 0 : _a.trim()) && this.errorMessage) {
         this.setInputValue();
       }
     }
   }
-  observeValue(newValue, oldValue) {
-    if (this._textInput && newValue != oldValue) {
-      try {
-        if (newValue === "string") {
-          this.setInputValue();
-          return;
-        }
-        const newValueSelected = this.getSelectedOption(newValue);
-        const oldValueSelected = this.getSelectedOption(oldValue);
-        const currentValue = this.getSelectedOption(this.value);
-        if (this.isDifferentValues(currentValue, newValueSelected)) {
-          this.value = newValueSelected;
-        }
-        if (this.isDifferentValues(newValueSelected, oldValueSelected)) {
-          this.setInputValue();
-          const valueEmitted = newValueSelected === null ? undefined : newValueSelected;
-          if (!this._lookupMode) {
-            this.ezChange.emit(valueEmitted);
-          }
-        }
-        this.resetOptions();
+  validateNewValue(newValue, oldValue) {
+    const getValue = (val) => typeof val === 'object' ? val === null || val === void 0 ? void 0 : val.value : val;
+    return (getValue(newValue) !== getValue(oldValue));
+  }
+  async observeValue(newValue, oldValue) {
+    if (this._textInput && newValue !== oldValue && this.validateNewValue(newValue, oldValue)) {
+      if (typeof newValue === "string") {
+        await this.handleValueAsString(newValue);
+        return;
       }
-      finally {
-        this._lookupMode = false;
+      const newValueSelected = this.getSelectedOption(newValue);
+      const currentValue = this.getSelectedOption(this._currentValue);
+      if (this.isDifferentValues(currentValue, newValueSelected)) {
+        this._currentValue = newValueSelected;
+        this.setInputValue();
+        const valueEmitted = newValueSelected !== null && newValueSelected !== void 0 ? newValueSelected : undefined;
+        this.ezChange.emit(valueEmitted);
       }
+      this.resetOptions();
     }
   }
   observeOptions(newOptions, oldOptions) {
@@ -140,6 +133,16 @@ export class EzSearch {
       });
     }
   }
+  async handleValueAsString(value) {
+    if (this.getSelectedOption(value)) {
+      this.setInputValue();
+      return;
+    }
+    await this.loadDescriptionValue(value);
+    this.setInputValue();
+    this.ezChange.emit(this.value);
+    this._currentValue = this.value;
+  }
   updateListPosition() {
     let { verticalPosition, horizontalPosition, fromBottom, fromRight, bottomLimit, hardPosition } = this.getListPosition();
     const elementRect = this._listWrapper.getBoundingClientRect();
@@ -195,7 +198,7 @@ export class EzSearch {
     return text;
   }
   getText() {
-    const currentValue = this.getSelectedOption(this.value);
+    const currentValue = this.getSelectedOption(this._currentValue);
     const text = this.getFormattedText(currentValue);
     if (text == undefined) {
       return;
@@ -370,6 +373,7 @@ export class EzSearch {
       || (currentValue == undefined && newOptionsReplaced != undefined && "value" in newOptionsReplaced)) {
       const adjustedOpt = !(newOptionsReplaced === null || newOptionsReplaced === void 0 ? void 0 : newOptionsReplaced.value) ? undefined : newOptionsReplaced;
       this.value = adjustedOpt;
+      this._currentValue = adjustedOpt;
     }
     else {
       this.setInputValue();
@@ -390,7 +394,7 @@ export class EzSearch {
     }
   }
   cancelPreselection() {
-    if (!this._textInput.value && this.value) {
+    if (!this._textInput.value && this._currentValue) {
       this.selectOption(undefined);
     }
     else {
@@ -411,6 +415,7 @@ export class EzSearch {
   }
   clearSearch() {
     this.value = null;
+    this._currentValue = null;
   }
   controlListWithOnlyOne() {
     var _a, _b;
@@ -440,11 +445,11 @@ export class EzSearch {
     if (StringUtils.isEmpty(this.value)) {
       return;
     }
-    let value = this.value;
-    if (typeof value === "object") {
+    if (!this.validateNewValue(this.value, this._currentValue)) {
       return;
     }
-    if (StringUtils.isEmpty(value)) {
+    let value = this.value;
+    if (typeof value === "object") {
       return;
     }
     this.loadDescriptionValue(value);
@@ -481,8 +486,8 @@ export class EzSearch {
       this.showNoResultMessage();
       return;
     }
-    this._lookupMode = true;
-    this.value = value ? Object.assign(Object.assign({}, value), { value: this.replaceHighlight(value.value), label: this.replaceHighlight(value.label) }) : value;
+    this._currentValue = value ? Object.assign(Object.assign({}, value), { value: this.replaceHighlight(value.value), label: this.replaceHighlight(value.label) }) : value;
+    this.value = this._currentValue;
   }
   loadOptionValue(argument) {
     var _a;
@@ -541,6 +546,7 @@ export class EzSearch {
     this.validateDescriptionValue();
   }
   componentDidLoad() {
+    this._currentValue = this.value;
     CSSVarsUtils.applyVarsTextInput(this.el, this._textInput);
     this.setInputValue(false);
     this._resizeObserver = new ResizeObserver((entries) => {
@@ -584,7 +590,7 @@ export class EzSearch {
     if (argument) {
       this._showLoading = false;
       this.clearSource();
-      if (!isNaN(argumentNumber) || argument.length >= this._limitCharsToSearch) {
+      if (this.ignoreLimitCharsToSearch || !isNaN(argumentNumber) || argument.length >= this._limitCharsToSearch) {
         this._showLoading = true;
         this._changeDeboucingTimeout = window.setTimeout(() => {
           this.loadOptions(SearchMode.PREDICTIVE, isNaN(argumentNumber) ? argument : argumentNumber.toString());

package/dist/collection/components/ez-sidebar-button/ez-sidebar-button.css

@@ -43,15 +43,19 @@ button {
     box-shadow:  var(--ez-sidebar-button--box-shadow);
     padding: 0;
     cursor: pointer;
+    align-items: center;
 }
 
 span {
     width: var(--ez-sidebar-button--width);
     height: var(--ez-sidebar-button--height);
-    margin: var(--ez-sidebar-button--space--medium) var(--ez-sidebar-button--space--small) var(--ez-sidebar-button--space--medium) 0;
+    margin: var(--ez-sidebar-button--space--medium) 0 var(--ez-sidebar-button--space--medium) 0;
     background: var(--ez-sidebar-button--background-color--primary);
     border-radius: 0 var(--ez-sidebar-button--border--radius-small) var(--ez-sidebar-button--border--radius-small) 0;
 }
+ez-icon {
+    --ez-icon--color: var(--ez-sidebar-button--background-color--primary);
+}
 
 button:hover {
     box-shadow: var(--ez-sidebar-button--hover--box-shadow);
@@ -59,5 +63,5 @@ button:hover {
 
 button:hover span {
     width: var(--ez-sidebar-button--hover--width);
-    margin: var(--ez-sidebar-button--space--medium) var(--ez-sidebar-button--space--medium) var(--ez-sidebar-button--space--medium) 0;
+    margin: var(--ez-sidebar-button--space--medium) 0 var(--ez-sidebar-button--space--medium) 0;
 }

package/dist/collection/components/ez-sidebar-button/ez-sidebar-button.js

@@ -11,7 +11,7 @@ export class EzSidebarButton {
     }
   }
   render() {
-    return (h("button", { type: "button", onClick: () => { this.ezClick.emit(); }, ref: (el) => this._button = el }, h("span", null)));
+    return (h("button", { type: "button", onClick: () => { this.ezClick.emit(); }, ref: (el) => this._button = el }, h("span", null), h("ez-icon", { iconName: "chevron-right" })));
   }
   static get is() { return "ez-sidebar-button"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/ez-sidebar-navigator/ez-sidebar-navigator.css

@@ -0,0 +1,180 @@
+:host {
+	/* Label Container */
+	/*@doc Define o espaçamento da esquerda do container*/
+	--ez-sidebar-navigator--padding-left: var(--space--xs, 12px);
+	/*@doc Define o espaçamento da direita do container*/
+	--ez-sidebar-navigator--padding-right: var(--space--xs, 12px);
+	/*@doc Define o espaçamento entre o cabeçalho conteúdo e rodapé*/
+	--ez-sidebar-navigator--gap: var(--space--xs, 12px);
+	/*@doc Define a cor de shadow box do container de label*/
+	--ez-sidebar-navigator--box-shadow: var(--shadow, 0px 0px 24px 0px #000);
+	/*@doc Define a cor de fundo do container de label*/
+	--ez-sidebar-navigator--background-color: var(--color--inverted);
+	/*@doc Define o border radius do container de label*/
+	--ez-sidebar-navigator--border-radius: 0px var(--border--radius-medium) var(--border--radius-medium) 0px;
+	/*@doc Força uma altura especifica para o sidebar, o padrão é 100% da tela*/
+	--ez-sidebar-navigator--height: calc(100vh - var(--space--lg, 24px));
+	
+	/*Labels Header */
+	/*@doc Define o espaçamento entre os componente do cabeçalho*/
+	--ez-sidebar-navigator--header-gap: var(--space--xs, 12px);
+
+	/*Labels Footer */
+	/*@doc Define o espaçamento entre os componente do rodadé*/
+	--ez-sidebar-navigator--footer-gap: var(--space--xs, 12px);
+
+
+	 /* Title */
+	/*@doc Define a fonte do título do componente */
+	--ez-ez-sidebar-navigator__title--font-family: var(--font-pattern, "Roboto");
+	/*@doc Define o tamanho da fonte do título do componente.*/
+	--ez-ez-sidebar-navigator__title--font-size: var(--title--medium, 16px);
+	/*@doc Define a cor da fonte do título do componente.*/
+	--ez-ez-sidebar-navigator__title--color: var(--title--primary, #2b3a54);
+	/*@doc Define o peso da fonte do título do componente.*/
+	--ez-ez-sidebar-navigator__title--font-weight: var(--text-weight--extra-large, 700);
+
+}
+
+.inverted {
+	/* private */
+	transform: rotate(180deg);
+}
+
+.ez-sidebar-navigator {
+	/* private */
+	display: -webkit-box;
+	display: -ms-flexbox;
+	display: flex;
+	-webkit-box-orient: vertical;
+	-webkit-box-direction: normal;
+	-ms-flex-direction: column;
+	flex-direction: column;
+	height: var(--ez-sidebar-navigator--height);
+	padding-top: var(--space--xs, 12px);
+	padding-bottom: var(--space--xs, 12px);
+
+	/* public */
+	gap: var(--ez-sidebar-navigator--gap);
+	padding-left: var(--ez-sidebar-navigator--padding-left);
+	padding-right: var(--ez-sidebar-navigator--padding-right);
+	background-color: var(--ez-sidebar-navigator--background-color);
+	-webkit-box-shadow: var(--ez-sidebar-navigator--box-shadow);
+	box-shadow: var(--ez-sidebar-navigator--box-shadow);
+	border-radius: var(--ez-sidebar-navigator--border-radius);
+}
+
+.ez-sidebar-navigator__header {
+	/* private */
+	display: -webkit-box;
+	display: -ms-flexbox;
+	display: flex;
+	-webkit-box-align: center;
+	-ms-flex-align: center;
+	align-items: center;
+	justify-content: space-between;
+	
+	/* public */
+	gap: var(--ez-sidebar-navigator--header-gap);
+}
+
+.ez-sidebar-navigator__content {
+	height: 100%;
+}
+
+.ez-sidebar-navigator__footer {
+	/* private */
+	display: -webkit-box;
+	display: -ms-flexbox;
+	display: flex;
+	-webkit-box-align: center;
+	-ms-flex-align: center;
+	align-items: center;
+	
+	/* public */
+	gap: var(--ez-sidebar-navigator--footer-gap);
+}
+
+.ez-sidebar-navigator__title {
+	/* private */
+	white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+
+	/* public */
+	font-family: var(--ez-ez-sidebar-navigator__title--font-family);
+	font-size: var(--ez-ez-sidebar-navigator__title--font-size);
+	font-weight: var(--ez-ez-sidebar-navigator__title--font-weight);
+	color: var(--ez-ez-sidebar-navigator__title--color);
+
+}
+
+.ez-sidebar-navigator__end {
+	/* private */
+	display: -webkit-box;
+	display: -ms-flexbox;
+	display: flex;
+	-webkit-box-align: center;
+	-ms-flex-align: center;
+	align-items: center;
+	margin-left: auto;
+	/* public */
+	gap: var(--ez-sidebar-navigator--gap);
+}
+
+.dynamic {
+	position: absolute;
+	z-index: var(--most-visible	, 4);
+}
+
+.fixed {
+	position: relative;
+}
+
+.hidden {
+	display: none;
+}
+
+.show {
+	animation: fadeIn .1s ease-in-out 1;
+}
+
+@keyframes fadeIn {
+	from {
+		transform: translate(-100%);
+	  }
+}
+
+.sm {
+	/* private */
+	width: 240px;
+}
+
+.md {
+	/* private */
+	width: 280px;
+}
+
+.lg {
+	/* private */
+	width: 320px;
+}
+
+@media screen and (max-width: 991px) {
+	.responsive {
+		/* private */
+		width: 240px;
+	}
+}
+@media screen and (min-width: 992px) {
+	.responsive {
+		/* private */
+		width: 280px;
+	}
+}
+@media screen and (min-width: 1200px) {
+	.responsive {
+		/* private */
+		width: 320px;
+	}
+}