@sankhyalabs/ezui 5.22.0-dev.12 → 5.22.0-dev.120

package/dist/collection/components/ez-search-plus/subcomponent/ez-search-result-list/ez-search-result-list.css

@@ -0,0 +1,221 @@
+:host {
+  /* list */
+  /*@doc Define a cor do texto da lista de opções.*/
+  --ez-search__list-title--primary: var(--title--primary, #2B3A54);
+  /*@doc Define a cor do texto do value da lista de opções.*/
+  --ez-search__list-text--primary: var(--text--primary, #626e82);
+  /*@doc Define a altura do box da lista de opções.*/
+  --ez-search__list-height: calc(var(--ez-search--font-size) + var(--ez-search--space--medium) + 4px);
+  /*@doc Define a largura mínima da lista de opções.*/
+  --ez-search__list-min-width: 64px;
+
+  /* scrollbar */
+  /*@doc Define a cor da barra de rolagem do componente.*/
+  --ez-search__scrollbar--color-default: var(--scrollbar--default, #626e82);
+  /*@doc Define a cor de fundo da barra de rolagem do componente.*/
+  --ez-search__scrollbar--color-background: var(--scrollbar--background, #E5EAF0);
+  /*@doc Define a cor do hover na barra de rolagem do componente.*/
+  --ez-search__scrollbar--color-hover: var(--scrollbar--hover, #2B3A54);
+  /*@doc Define a cor do active na barra de rolagem do componente.*/
+  --ez-search__scrollbar--color-clicked: var(--scrollbar--clicked, #a2abb9);
+  /*@doc Define o raio da borda da barra de rolagem do componente.*/
+  --ez-search__scrollbar--border-radius: var(--border--radius-small, 6px);
+  /*@doc Define a largura da barra de rolagem do componente.*/
+  --ez-search__scrollbar--width: var(--space--small, 6px);
+
+    /* general */
+  /*@doc Define o raio da borda do input quando pequeno.*/
+  --ez-search--border-radius-small: var(--border--radius-small, 6px);
+  /*@doc Define o tamanho da fonte dentro do input.*/
+  --ez-search--font-size: var(--text--medium, 14px);
+  /*@doc Define a família da fonte dentro do input.*/
+  --ez-search--font-family: var(--font-pattern, Arial);
+  /*@doc Define o peso da fonte dentro do input quando pesada.*/
+  --ez-search--font-weight--large: var(--text-weight--large, 500);
+  /*@doc Define o peso da fonte dentro do input quando média.*/
+  --ez-search--font-weight--medium: var(--text-weight--medium, 400);
+  /*@doc Define a cor de fundo dos itens da lista de opções.*/
+  --ez-search--background-medium: var(--background--medium, #f0f3f7);
+  /*@doc Define a altura da linha do texto dentro do input.*/
+  --ez-search--line-height: calc(var(--text--medium, 14px) + 4px);
+}
+
+.list-options {
+  position: relative;
+  z-index: var(--more-visible, 2);
+  margin: var(--space--small) 0px;
+  padding: 0px;
+  padding-inline-start: 0px;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  max-height: 350px;
+  min-width: 150px;
+  display: flex;
+  flex-direction: column;
+  scroll-behavior: smooth;
+  overflow-y: auto;
+  overflow-x: hidden;
+  scrollbar-width: thin;
+
+  /*public*/
+  scrollbar-color: var(--ez-search__scrollbar--color-clicked) var(--ez-search__scrollbar--color-background);
+
+}
+
+.list-options::-webkit-scrollbar {
+  /*public*/
+  background-color: var(--scrollbar--background);
+  width: var(--space--small);
+  max-width: var(--space--small);
+  min-width: var(--space--small);
+  height: var(--space--small);
+  max-height: var(--space--small);
+  min-height: var(--space--small);
+}
+
+.list-options::-webkit-scrollbar-track {
+  /*public*/
+  background-color: var(--ez-search__scrollbar--color-background);
+  border-radius: var(--ez-search__scrollbar--border-radius);
+}
+
+.list-options::-webkit-scrollbar-thumb {
+  /*public*/
+  background-color: var(--ez-search__scrollbar--color-default);
+  border-radius: var(--ez-search__scrollbar--border-radius);
+}
+
+.list-options::-webkit-scrollbar-thumb:vertical:hover,
+.list-options::-webkit-scrollbar-thumb:horizontal:hover {
+  /*public*/
+  background-color: var(--ez-search__scrollbar--color-hover);
+}
+
+.list-options::-webkit-scrollbar-thumb:vertical:active,
+.list-options::-webkit-scrollbar-thumb:horizontal:active {
+  /*public*/
+  background-color: var(--ez-search__scrollbar--color-clicked);
+}
+
+.message {
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  list-style-type: none;
+  margin: var(--space--medium) 0px;
+
+  /*public*/
+  min-height: var(--ez-search__list-height);
+}
+
+.message__no-result {
+  /*public*/
+  color: var(--ez-search__list-title--primary);
+  font-family: var(--ez-search--font-family);
+  font-size: var(--ez-search--font-size);
+}
+
+.loading__container {
+  display: flex;
+  flex-direction: column;
+  margin: var(--space--small);
+}
+
+.item__value,
+.item__label {
+  flex-basis: auto;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  /*public*/
+  color: var(--ez-search__list-title--primary);
+  font-family: var(--ez-search--font-family);
+  font-size: var(--ez-search--font-size);
+  line-height: var(--ez-search--line-height);
+}
+
+.item__label {
+  /*public*/
+  font-weight: var(--ez-search--font-weight--medium);
+}
+
+.item__label--bold {
+  /*public*/
+  font-weight: var(--ez-search--font-weight--large);
+}
+
+.item__value {
+  text-align: center;
+
+  /*public*/
+  color: var(--ez-search__list-text--primary);
+  font-weight: var(--ez-search--font-weight--large);
+}
+
+.item__value--hidden {
+  visibility: hidden;
+  position: absolute;
+  white-space: nowrap;
+  z-index: -1;
+  top: 0;
+  left: 0;
+}
+
+.item__label {
+  text-align: left;
+}
+
+.item__list>li:hover {
+  /*public*/
+  background-color: var(--ez-search--background-medium);
+}
+
+.item {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  box-sizing: border-box;
+  list-style-type: none;
+  cursor: pointer;
+
+  /*public*/
+  border-radius: var(--ez-search--border-radius-small);
+  gap: var(--space--small, 6px);
+}
+
+.preselected {
+  /*public*/
+  background-color: var(--background--medium);
+}
+
+@-webkit-keyframes spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+  }
+
+  100% {
+    -webkit-transform: rotate(360deg);
+  }
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@supports not (scrollbar-width: thin) {
+
+  /* Estilos para navegadores que NÃO suportam scrollbar-width */
+  .item {
+    /* Estilos alternativos, por exemplo, para navegadores que não suportam scrollbar-width */
+    padding-right: 8px;
+  }
+}

package/dist/collection/components/ez-search-plus/subcomponent/ez-search-result-list/ez-search-result-list.js

@@ -0,0 +1,278 @@
+import { Host, h } from '@stencil/core';
+import { StringUtils } from '@sankhyalabs/core';
+export class EzSearchResultList {
+  constructor() {
+    this._textEmptyList = "Nenhum resultado encontrado";
+    this._startHighlightTag = "<span class='card-item__highlight'>";
+    this._endHighlightTag = "</span>";
+    this.showLoading = undefined;
+    this.visibleOptions = [];
+    this.value = undefined;
+    this.showOptionValue = true;
+    this._preSelection = undefined;
+  }
+  async nextOption() {
+    const newPreSelection = this._preSelection === undefined ? 0 : Math.min(this._preSelection + 1, this.visibleOptions.length - 1);
+    this.preSelectItemByIndex(newPreSelection);
+  }
+  async previousOption() {
+    const newPreSelection = this._preSelection === undefined ? 0 : Math.max(this._preSelection - 1, 0);
+    this.preSelectItemByIndex(newPreSelection);
+  }
+  preSelectItemByIndex(newIndex) {
+    this._preSelection = newIndex;
+    const option = this.visibleOptions[newIndex];
+    this.scrollToOption(option);
+  }
+  selectOption(newOption) {
+    const newOptionsReplaced = Object.assign(Object.assign({}, newOption), { value: newOption === null || newOption === void 0 ? void 0 : newOption.value, label: newOption === null || newOption === void 0 ? void 0 : newOption.label });
+    const newOptionsFormatted = Object.assign(Object.assign({}, newOptionsReplaced), { value: newOptionsReplaced === null || newOptionsReplaced === void 0 ? void 0 : newOptionsReplaced.value, label: newOptionsReplaced === null || newOptionsReplaced === void 0 ? void 0 : newOptionsReplaced.label });
+    this.changeValue.emit(newOptionsFormatted);
+  }
+  createAndSelectOption(detail) {
+    let { key, title } = detail;
+    key = String(key !== null && key !== void 0 ? key : "");
+    const startHighlight = new RegExp(this._startHighlightTag, 'g');
+    const endHighlight = new RegExp(this._endHighlightTag, 'g');
+    title = StringUtils.decodeHtmlEntities(title);
+    const option = {
+      value: key === null || key === void 0 ? void 0 : key.replace(startHighlight, '').replace(endHighlight, ''),
+      label: title === null || title === void 0 ? void 0 : title.replace(startHighlight, '').replace(endHighlight, '')
+    };
+    this.selectOption(option);
+  }
+  scrollToOption(opt) {
+    if (!(opt === null || opt === void 0 ? void 0 : opt.value) || !this._optionsList)
+      return;
+    window.requestAnimationFrame(() => {
+      var _a;
+      const currentValue = String((_a = opt === null || opt === void 0 ? void 0 : opt.value) !== null && _a !== void 0 ? _a : "");
+      const liElem = currentValue
+        ? this._optionsList.querySelector(`div#item_${currentValue.replace(/([ #;&,.+*~':"!^$[\]()=<>|/\\])/g, '\\$1')}`)
+        : undefined;
+      if (liElem) {
+        liElem.scrollIntoView({ behavior: "smooth", block: "nearest" });
+      }
+    });
+  }
+  buildItem(opt, index) {
+    var _a;
+    opt.label = opt.label || opt.value;
+    const card = {
+      key: String((_a = opt.presentationValue) !== null && _a !== void 0 ? _a : ""),
+      title: opt.presentationLabel,
+      details: opt.details
+    };
+    return h("div", { style: { "height": "100%" }, class: index === this._preSelection ? "item preselected" : "item", id: `item_${opt.value}`, onMouseDown: () => this.createAndSelectOption(card), onMouseOver: () => { this._preSelection = index; } }, h("ez-card-item", { item: card, compacted: true, enableKey: this.showOptionValue }));
+  }
+  async selectCurrentItem() {
+    this.selectOption(this.visibleOptions[this._preSelection]);
+  }
+  async cancelSelection() {
+    this.cancelPreselection();
+  }
+  cancelPreselection() {
+    this._preSelection = undefined;
+  }
+  canShowListOptions() {
+    return !this.showLoading && this.visibleOptions.length > 0;
+  }
+  render() {
+    return (h(Host, null, h("ul", { class: "list-options", ref: elem => this._optionsList = elem }, !this.showLoading
+      && this.visibleOptions.length === 0
+      && h("div", { class: "message" }, h("span", { class: "message__no-result" }, this._textEmptyList)), this.showLoading && (h("div", { class: "loading__container" }, h("ez-skeleton", { count: 4, height: '20px' }))), this.canShowListOptions() && this.visibleOptions.map((opt, index) => this.buildItem(opt, index)))));
+  }
+  static get is() { return "ez-search-result-list"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ez-search-result-list.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ez-search-result-list.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "showLoading": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "show-loading",
+        "reflect": false
+      },
+      "visibleOptions": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Array<IOption>",
+          "resolved": "IOption[]",
+          "references": {
+            "Array": {
+              "location": "global"
+            },
+            "IOption": {
+              "location": "import",
+              "path": "../../ez-search-plus"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "defaultValue": "[]"
+      },
+      "value": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "IOption | string",
+          "resolved": "IOption | string",
+          "references": {
+            "IOption": {
+              "location": "import",
+              "path": "../../ez-search-plus"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "value",
+        "reflect": false
+      },
+      "showOptionValue": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "show-option-value",
+        "reflect": false,
+        "defaultValue": "true"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "_preSelection": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "changeValue",
+        "name": "changeValue",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "IOption",
+          "resolved": "IOption",
+          "references": {
+            "IOption": {
+              "location": "import",
+              "path": "../../ez-search-plus"
+            }
+          }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "nextOption": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
+      "previousOption": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
+      "selectCurrentItem": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
+      "cancelSelection": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
+}

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

@@ -8,6 +8,8 @@
     --ez-sidebar-button--hover--width: 12px;
     /*@doc Define a altura do span do botão.*/
     --ez-sidebar-button--height: 96px;
+    /*@doc Define a camada em que o componente será exibido.*/
+	--ez-sidebar-navigator-button--z-index: var(--elevation--20, 20);
 
     /* cor */
     /*@doc Define a cor de fundo do botão.*/
@@ -35,6 +37,7 @@
 }
 
 button {
+    z-index: var(--ez-sidebar-navigator-button--z-index);
     position: absolute;
     display: flex;
     background: var(--ez-sidebar-button--background-color--xlight);

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), h("ez-icon", { iconName: "chevron-right" })));
+    return (h("button", { type: "button", onClick: () => { this.ezClick.emit(); }, ref: (el) => this._button = el }, h("span", null), h("ez-icon", { iconName: "chevron-right", size: "small" })));
   }
   static get is() { return "ez-sidebar-button"; }
   static get encapsulation() { return "shadow"; }

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

@@ -14,6 +14,8 @@
 	--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));
+	/*@doc Define a camada em que o componente será exibido.*/
+	--ez-sidebar-navigator--z-index: var(--elevation--20, 20);
 	
 	/*Labels Header */
 	/*@doc Define o espaçamento entre os componente do cabeçalho*/
@@ -53,6 +55,7 @@
 	height: var(--ez-sidebar-navigator--height);
 	padding-top: var(--space--xs, 12px);
 	padding-bottom: var(--space--xs, 12px);
+	outline: none;
 
 	/* public */
 	gap: var(--ez-sidebar-navigator--gap);
@@ -124,7 +127,7 @@
 
 .dynamic {
 	position: absolute;
-	z-index: var(--most-visible	, 4);
+	z-index: var(--ez-sidebar-navigator--z-index);
 }
 
 .fixed {

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

@@ -1,16 +1,17 @@
 .skeleton {
-	box-sizing: border-box;
-	outline: none;
-	overflow: hidden;
-	position: relative;
-
-	background:var(--skeleton-background,  #eff1f6) no-repeat;
+	background: var(--skeleton-background, #eff1f6) no-repeat;
 
 	border-radius: var(--skeleton-border-radius, 4px);
 	width: var(--skeleton-width, 100%);
 	height: var(--skeleton-height, 20px);
 	display: inline-block;
-	margin-bottom: var(--skeleton-margin-bottom, 0px);
+	margin-bottom: var(--skeleton-margin-bottom, 0px);	
+	box-sizing: border-box;
+	outline: none;
+	overflow: hidden;
+	position: relative;
+	-webkit-will-change: transform;
+  -moz-will-change: transform;
 	will-change: transform;
 
 	&:after,
@@ -31,29 +32,31 @@
 
 	&.progress,
 	&.progress-dark {
+		-webkit-animation: progress 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+    -moz-animation: progress 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+    -ms-animation: progress 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
 		animation: progress 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
 		background-size: 200px 100%;
 	}
 
 	&.progress {
-		background-image: linear-gradient(
-			90deg,
-			rgba(255, 255, 255, 0),
-			rgba(255, 255, 255, 0.6),
-			rgba(255, 255, 255, 0)
-		);
+		background-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
+    background-image: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
+    background-image: -ms-linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
+    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
 	}
 
 	&.progress-dark {
-		background-image: linear-gradient(
-			90deg,
-			transparent,
-			rgba(0, 0, 0, 0.2),
-			transparent
-		);
+		background-image: -webkit-linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.2), transparent);
+    background-image: -moz-linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.2), transparent);
+    background-image: -ms-linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.2), transparent);    
+		background-image: linear-gradient(90deg,transparent,rgba(0, 0, 0, 0.2),transparent);
 	}
 
 	&.pulse {
+		-webkit-animation: pulse 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+    -moz-animation: pulse 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+    -ms-animation: pulse 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
 		animation: pulse 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
 		animation-delay: 0.5s;
 	}
@@ -72,23 +75,40 @@
 	}
 }
 
+@-webkit-keyframes progress {
+  0% { background-position: -200px 0; }
+  100% { background-position: calc(200px + 100%) 0; }
+}
+@-moz-keyframes progress {
+  0% { background-position: -200px 0; }
+  100% { background-position: calc(200px + 100%) 0; }
+}
+@-ms-keyframes progress {
+  0% { background-position: -200px 0; }
+  100% { background-position: calc(200px + 100%) 0; }
+}
 @keyframes progress {
-	0% {
-		background-position: -200px 0;
-	}
-	100% {
-		background-position: calc(200px + 100%) 0;
-	}
+	0% { background-position: -200px 0; }
+	100% { background-position: calc(200px + 100%) 0; }
 }
 
+@-webkit-keyframes pulse {
+  0% { opacity: 1; }
+  50% { opacity: 0.4; }
+  100% { opacity: 1; }
+}
+@-moz-keyframes pulse {
+  0% { opacity: 1; }
+  50% { opacity: 0.4; }
+  100% { opacity: 1; }
+}
+@-ms-keyframes pulse {
+  0% { opacity: 1; }
+  50% { opacity: 0.4; }
+  100% { opacity: 1; }
+}
 @keyframes pulse {
-	0% {
-		opacity: 1;
-	}
-	50% {
-		opacity: 0.4;
-	}
-	100% {
-		opacity: 1;
-	}
+	0% { opacity: 1; }
+	50% { opacity: 0.4; }
+	100% { opacity: 1; }
 }