@sankhyalabs/ezui 0.0.0-bugfix-dev-KB-08202.0

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

@@ -0,0 +1,462 @@
+import { h } from "@stencil/core";
+import CSSVarsUtils from "../../utils/CSSVarsUtils";
+import { ElementIDUtils } from "@sankhyalabs/core";
+export class EzSearch {
+  constructor() {
+    this.value = undefined;
+    this.label = undefined;
+    this.enabled = true;
+    this.errorMessage = undefined;
+    this.optionLoader = undefined;
+    this.showSelectedValue = true;
+    this.showOptionValue = true;
+    this.suppressEmptyOption = false;
+    this.mode = "regular";
+    this.canShowError = true;
+    this.hideErrorOnFocusOut = true;
+    this.listOptionsPosition = undefined;
+    this.isTextSearch = false;
+  }
+  observeErrorMessage() {
+    if (this._comboElement) {
+      this._comboElement.errorMessage = this.errorMessage;
+    }
+  }
+  observeValue() {
+    if (this._comboElement) {
+      this._comboElement.value = this.value;
+    }
+  }
+  /**
+    * Aplica o foco no campo.
+    */
+  async setFocus() {
+    this._comboElement.setFocus();
+  }
+  /**
+    * Remove o foco do campo.
+    */
+  async setBlur() {
+    this._comboElement.setBlur();
+  }
+  /**
+   * Retorna se o conteúdo é inválido.
+   */
+  async isInvalid() {
+    return typeof this.errorMessage === "string" && this.errorMessage.trim() !== "";
+  }
+  /**
+   * Limpa o valor do campo de pesquisa
+   */
+  async clearValue() {
+    var _a, _b;
+    (_b = (_a = this._comboElement) === null || _a === void 0 ? void 0 : _a['clearValue']) === null || _b === void 0 ? void 0 : _b.call(_a);
+  }
+  /*
+  * Retorna uma promise com o valor da opção selecionada,
+  * que será resolvida quando o backend devolver este dado.
+  */
+  async getValueAsync() {
+    var _a;
+    return (_a = this._comboElement) === null || _a === void 0 ? void 0 : _a.getValueAsync();
+  }
+  onComboChange(event) {
+    event.stopPropagation();
+    this.value = event.detail;
+    this.ezChange.emit(event.detail);
+    if (this.errorMessage !== this._comboElement.errorMessage) {
+      this.errorMessage = this._comboElement.errorMessage;
+    }
+  }
+  componentDidLoad() {
+    CSSVarsUtils.applyVarsTextInput(this._elem, this._comboElement);
+  }
+  render() {
+    ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
+    return (h("ez-combo-box", { "data-element-id": ElementIDUtils.getInternalIDInfo("combo"), ref: elem => this._comboElement = elem, value: this.value, label: this.label, enabled: this.enabled, errorMessage: this.errorMessage, hideErrorOnFocusOut: this.hideErrorOnFocusOut, optionLoader: this.optionLoader, searchMode: true, onEzChange: event => this.onComboChange(event), showSelectedValue: this.showSelectedValue, showOptionValue: this.showOptionValue, suppressEmptyOption: this.suppressEmptyOption, mode: this.mode, canShowError: this.canShowError, listOptionsPosition: this.listOptionsPosition, isTextSearch: this.isTextSearch }));
+  }
+  ;
+  static get is() { return "ez-search"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ez-search.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ez-search.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "value": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "IOption | string",
+          "resolved": "IOption | string",
+          "references": {
+            "IOption": {
+              "location": "import",
+              "path": "../ez-combo-box/ez-combo-box"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o valor do campo."
+        },
+        "attribute": "value",
+        "reflect": true
+      },
+      "label": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Texto a ser apresentado como t\u00EDtulo do campo."
+        },
+        "attribute": "label",
+        "reflect": true
+      },
+      "enabled": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Se false o usu\u00E1rio n\u00E3o pode interagir com o campo."
+        },
+        "attribute": "enabled",
+        "reflect": true,
+        "defaultValue": "true"
+      },
+      "errorMessage": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define uma mensagem de orienta\u00E7\u00E3o ao usu\u00E1rio, colocando o campo em modo inv\u00E1lido."
+        },
+        "attribute": "error-message",
+        "reflect": true
+      },
+      "optionLoader": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "(argument: ISearchArgument) => Promise<Array<IOption>> | Array<IOption> | IOption",
+          "resolved": "(argument: ISearchArgument) => IOption | IOption[] | Promise<IOption[]>",
+          "references": {
+            "ISearchArgument": {
+              "location": "import",
+              "path": "../ez-combo-box/ez-combo-box"
+            },
+            "Promise": {
+              "location": "global"
+            },
+            "Array": {
+              "location": "global"
+            },
+            "IOption": {
+              "location": "import",
+              "path": "../ez-combo-box/ez-combo-box"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Carrega as op\u00E7\u00F5es dinamicamente."
+        }
+      },
+      "showSelectedValue": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Se false a op\u00E7\u00E3o selecionada deve exibir somente o `label`."
+        },
+        "attribute": "show-selected-value",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "showOptionValue": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Se false cada op\u00E7\u00E3o na lista deve exibir somente o `label`."
+        },
+        "attribute": "show-option-value",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "suppressEmptyOption": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Se true remove a op\u00E7\u00E3o vazia da lista."
+        },
+        "attribute": "suppress-empty-option",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "mode": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"slim\" | \"regular\"",
+          "resolved": "\"regular\" | \"slim\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o tamanho do campo."
+        },
+        "attribute": "mode",
+        "reflect": true,
+        "defaultValue": "\"regular\""
+      },
+      "canShowError": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Se false deixa de exibir a mensagem de erro dentro do campo."
+        },
+        "attribute": "can-show-error",
+        "reflect": true,
+        "defaultValue": "true"
+      },
+      "hideErrorOnFocusOut": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Quando verdadeiro deixa de exibir a mensagem de erro (se existente) quando focar em um elemento diferente."
+        },
+        "attribute": "hide-error-on-focus-out",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "listOptionsPosition": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "IEzCheckBoxListPosition",
+          "resolved": "IEzCheckBoxListPosition",
+          "references": {
+            "IEzCheckBoxListPosition": {
+              "location": "import",
+              "path": "../ez-combo-box/ez-combo-box"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define um posicionamento fixo para a lista de op\u00E7\u00F5es do CheckBox."
+        }
+      },
+      "isTextSearch": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Informa se a pesquisa \u00E9 do tipo texto."
+        },
+        "attribute": "is-text-search",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "ezChange",
+        "name": "ezChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido quando acontece a altera\u00E7\u00E3o de valor do campo."
+        },
+        "complexType": {
+          "original": "IOption",
+          "resolved": "IOption",
+          "references": {
+            "IOption": {
+              "location": "import",
+              "path": "../ez-combo-box/ez-combo-box"
+            }
+          }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "setFocus": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Aplica o foco no campo.",
+          "tags": []
+        }
+      },
+      "setBlur": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Remove o foco do campo.",
+          "tags": []
+        }
+      },
+      "isInvalid": {
+        "complexType": {
+          "signature": "() => Promise<boolean>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<boolean>"
+        },
+        "docs": {
+          "text": "Retorna se o conte\u00FAdo \u00E9 inv\u00E1lido.",
+          "tags": []
+        }
+      },
+      "clearValue": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Limpa o valor do campo de pesquisa",
+          "tags": []
+        }
+      },
+      "getValueAsync": {
+        "complexType": {
+          "signature": "() => Promise<unknown>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<unknown>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "_elem"; }
+  static get watchers() {
+    return [{
+        "propName": "errorMessage",
+        "methodName": "observeErrorMessage"
+      }, {
+        "propName": "value",
+        "methodName": "observeValue"
+      }];
+  }
+}

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

@@ -0,0 +1,63 @@
+:host {
+    position: relative;
+
+    /* dimensão */
+    /*@doc Define a largura do span do botão.*/
+    --ez-sidebar-button--width: 6px;
+    /*@doc Define a largura do span do botão quando passar o mouse em cima.*/
+    --ez-sidebar-button--hover--width: 12px;
+    /*@doc Define a altura do span do botão.*/
+    --ez-sidebar-button--height: 96px;
+
+    /* cor */
+    /*@doc Define a cor de fundo do botão.*/
+    --ez-sidebar-button--background-color--xlight: var(--background--xlight, #fff);
+    /*@doc Define a cor de fundo do span do botão.*/
+    --ez-sidebar-button--background-color--primary: var(--color--primary);
+
+    /* espaçamento */
+    /*@doc Define um espaçamento pequeno entre elementos do componente.*/
+    --ez-sidebar-button--space--small: var(--space--small, 6px);
+    /*@doc Define um espaçamento mediano entre elementos do componente.*/
+    --ez-sidebar-button--space--medium: var(--space--medium, 12px);
+
+    /* sombra */
+    /*@doc Define a sombra default do botão.*/
+    --ez-sidebar-button--box-shadow: var(--shadow--small, 0px 0px 16px rgba(0, 38, 111, 0.07));
+    /*@doc Define a sombra do botão quando passar o mouse em cima.*/
+    --ez-sidebar-button--hover--box-shadow: var(--shadow--hard, 0px 0px 16px rgba(43, 58, 84, 0.24));
+
+    /* borda arrendondada */
+    /*@doc Define a borda arrendondada no valor de 6px.*/
+    --ez-sidebar-button--border--radius-small: var(--border--radius-small);
+    /*@doc Define a borda arrendondada no valor de 12px.*/
+    --ez-sidebar-button--border--radius-medium: var(--border--radius-medium);
+}
+
+button {
+    position: absolute;
+    display: flex;
+    background: var(--ez-sidebar-button--background-color--xlight);
+    border: 0;
+    border-radius: 0 var(--ez-sidebar-button--border--radius-medium) var(--ez-sidebar-button--border--radius-medium) 0;
+    box-shadow:  var(--ez-sidebar-button--box-shadow);
+    padding: 0;
+    cursor: pointer;
+}
+
+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;
+    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;
+}
+
+button:hover {
+    box-shadow: var(--ez-sidebar-button--hover--box-shadow);
+}
+
+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;
+}

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

@@ -0,0 +1,47 @@
+import { ElementIDUtils } from "@sankhyalabs/core";
+import { h } from "@stencil/core";
+export class EzSidebarButton {
+  componentDidLoad() {
+    if (this._element) {
+      ElementIDUtils.addIDInfo(this._element);
+    }
+    if (this._button) {
+      const dataInfo = { id: 'embedded' };
+      ElementIDUtils.addIDInfo(this._button, 'button', dataInfo);
+    }
+  }
+  render() {
+    return (h("button", { type: "button", onClick: () => { this.ezClick.emit(); }, ref: (el) => this._button = el }, h("span", null)));
+  }
+  static get is() { return "ez-sidebar-button"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ez-sidebar-button.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ez-sidebar-button.css"]
+    };
+  }
+  static get events() {
+    return [{
+        "method": "ezClick",
+        "name": "ezClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido sempre que o ez-sidebar-button \u00E9 clicado."
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "_element"; }
+}

package/dist/collection/components/ez-skeleton/ez-skeleton.constants.js

@@ -0,0 +1 @@
+export const ALLOWED_ANIMATIONS = ['progress', 'progress-dark', 'pulse', 'false'];

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

@@ -0,0 +1,94 @@
+.skeleton {
+	box-sizing: border-box;
+	outline: none;
+	overflow: hidden;
+	position: relative;
+
+	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);
+	will-change: transform;
+
+	&:after,
+	&:before {
+		box-sizing: border-box;
+	}
+
+	&.circle {
+		width: var(--skeleton-width, 40px);
+		height: var(--skeleton-height, 40px);
+		margin-bottom: var(--skeleton-margin-bottom, 5px);
+		border-radius: var(--skeleton-border-radius, 50%);
+	}
+
+	&.rect {
+		border-radius: var(--skeleton-border-radius, 0px);
+	}
+
+	&.progress,
+	&.progress-dark {
+		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)
+		);
+	}
+
+	&.progress-dark {
+		background-image: linear-gradient(
+			90deg,
+			transparent,
+			rgba(0, 0, 0, 0.2),
+			transparent
+		);
+	}
+
+	&.pulse {
+		animation: pulse 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+		animation-delay: 0.5s;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		&.pulse,
+		&.progress-dark,
+		&.progress {
+			animation: none;
+		}
+
+		&.progress,
+		&.progress-dark {
+			background-image: none;
+		}
+	}
+}
+
+@keyframes progress {
+	0% {
+		background-position: -200px 0;
+	}
+	100% {
+		background-position: calc(200px + 100%) 0;
+	}
+}
+
+@keyframes pulse {
+	0% {
+		opacity: 1;
+	}
+	50% {
+		opacity: 0.4;
+	}
+	100% {
+		opacity: 1;
+	}
+}