@sankhyalabs/ezui 6.4.4 → 6.5.0-dev.10

package/dist/collection/components/ez-split-panel/structure/item/ez-split-item.js

@@ -1,5 +1,6 @@
 import { Host, h } from '@stencil/core';
 import { CSSVarsUtils } from '../../../../utils';
+import initI18n from '../../../../utils/i18n';
 export class SplitItem {
   constructor() {
     this.label = undefined;
@@ -16,11 +17,14 @@ export class SplitItem {
     this._expanded = !this._expanded;
     (_b = (_a = this.expandButtonRef.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('button')) === null || _b === void 0 ? void 0 : _b.blur();
   }
+  async componentWillLoad() {
+    this.i18n = await initI18n();
+  }
   componentDidLoad() {
     CSSVarsUtils.applyVarsGrid(this._element, this._slot.children[0]);
   }
   render() {
-    return (h(Host, { class: `box_split-item ${this._expanded ? 'expanded__item' : ''} ${this.structural ? 'structural__item' : 'content__item'}`, ref: el => (this._element = el) }, h("div", { class: "ez-split-item--header" }, h("slot", { name: "leftButtons" }), h("div", { class: "ez-split-item--header-title" }, this.label && (h("h3", { class: "ez-text ez-text--primary ez-title ez-title--medium ez-margin--small", title: this.label }, this.label))), h("div", { class: "ez-split-item--header-buttons" }, h("slot", { name: "rightButtons" }), this.enableExpand && (h("ez-button", { ref: el => this.expandButtonRef = el, size: "small", mode: "icon", iconName: "expand", class: 'ez-button--tertiary', onClick: () => this.toggleExpandItem(), title: this._expanded ? 'Resumir' : 'Expandir' })))), h("div", { class: "ez-split-item--content grid_height-0", ref: el => (this._slot = el) }, h("slot", null))));
+    return (h(Host, { class: `box_split-item ${this._expanded ? 'expanded__item' : ''} ${this.structural ? 'structural__item' : 'content__item'}`, ref: el => (this._element = el) }, h("div", { class: "ez-split-item--header" }, h("slot", { name: "leftButtons" }), h("div", { class: "ez-split-item--header-title" }, this.label && (h("h3", { class: "ez-text ez-text--primary ez-title ez-title--medium ez-margin--small", title: this.label }, this.label))), h("div", { class: "ez-split-item--header-buttons" }, h("slot", { name: "rightButtons" }), this.enableExpand && (h("ez-button", { ref: el => this.expandButtonRef = el, size: "small", mode: "icon", iconName: "expand", class: 'ez-button--tertiary', onClick: () => this.toggleExpandItem(), title: this._expanded ? this.i18n('app.collapse') : this.i18n('app.expand') })))), h("div", { class: "ez-split-item--content grid_height-0", ref: el => (this._slot = el) }, h("slot", null))));
   }
   static get is() { return "ez-split-item"; }
   static get originalStyleUrls() {

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

@@ -56,6 +56,7 @@
   font-family: var(--font-pattern, "Roboto");
   font-size: var(--title--small, 14px);
   flex-shrink: 0;
+  margin-bottom: var(--space--extra-small, 3px);
 }
 
 .tab:focus, .forward-button, .backward-button {
@@ -67,6 +68,10 @@
   color: var(--color--primary, #008561);
 }
 
+.is-active ez-icon {
+  --ez-icon--color: var(--color--primary, #008561);
+}
+
 .is-active::after {
   content: "";
   position: absolute;
@@ -86,7 +91,6 @@
   white-space: nowrap;
   text-overflow: ellipsis;
   text-shadow: var(--text-shadow);
-  margin-bottom: var(--space--extra-small, 3px);
 }
 
 .forward-button, .backward-button {

package/dist/collection/components/ez-tag-input/ez-tag-input.css

@@ -0,0 +1,163 @@
+:host {
+  /*@doc Define a cor de fundo do container do input.*/
+  --ez-tag-input--background-color: var(--color--gray-70, #FFFFFF);
+
+  /*@doc Define a cor da borda no estado padrão.*/
+  --ez-tag-input--border-color-default: var(--color--gray-200, #D2D2D3);
+
+  /*@doc Define a cor da borda no estado focado.*/
+  --ez-tag-input--border-color-focused: var(--color--gray-300, #A4A5A7);
+
+  /*@doc Define a cor da borda no estado de erro.*/
+  --ez-tag-input--border-color-error: var(--color--red-600, #BD0025);
+
+  /*@doc Define a cor da borda no estado de sucesso.*/
+  --ez-tag-input--border-color-success: var(--color--green-600, #157A00);
+
+  /*@doc Define a cor da borda no estado de aviso.*/
+  --ez-tag-input--border-color-warning: var(--color--yellow-600, #EFB103);
+
+  /*@doc Define o raio da borda do container.*/
+  --ez-tag-input--border-radius: var(--border--radius-8, 8px);
+
+  /*@doc Define o espaçamento interno do container.*/
+  --ez-tag-input--padding: var(--space--12, 12px);
+
+  /*@doc Define o espaçamento entre tags e input.*/
+  --ez-tag-input--gap: var(--space--8, 8px);
+
+  /*@doc Define a cor do texto do label.*/
+  --ez-tag-input--label-color: var(--color--petroleum-900, #141B27);
+
+  /*@doc Define o peso da fonte do label.*/
+  --ez-tag-input--label-font-weight: var(--font-weight--regular, 400);
+
+  /*@doc Define a cor do texto do input.*/
+  --ez-tag-input--input-color: var(--color--petroleum-900, #141B27);
+
+  /*@doc Define o tamanho da fonte do input.*/
+  --ez-tag-input--input-font-size: var(--font-size--default, 14px);
+
+  /*@doc Define a cor do placeholder.*/
+  --ez-tag-input--placeholder-color: var(--color--gray-400, #77777A);
+
+  /*@doc Define a cor de fundo do input quando está desabilitado.*/
+  --ez-tag-input--background-color-disabled: var(--color--gray-90, #EAEAEA);
+
+  /*@doc Define a cor do texto de ajuda do input. */
+  --ez-tag-input--helptext-color: var(--color--ocean-green-1000, #00281D);
+
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  box-sizing: border-box;
+  font-family: var(--font--pattern, 'Roboto', Arial, sans-serif);
+  font-size: var(--font-size--default, 14px);
+  color: var(--color--ocean-green-1000, #00281D);
+  width: 100%;
+  border: none;
+  padding: 0;
+}
+
+label {
+  display: block;
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: var(--line-height--20, 20px);
+
+  color: var(--ez-tag-input--label-color);
+  font-weight: var(--ez-tag-input--label-font-weight);
+}
+
+.tag-input__container {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  width: 100%;
+  box-sizing: border-box;
+  gap: var(--ez-tag-input--gap);
+  padding: var(--ez-tag-input--padding);
+  margin: var(--space--4, 4px) 0;
+  background-color: var(--ez-tag-input--background-color);
+  border-radius: var(--ez-tag-input--border-radius);
+  transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.tag-input__container,
+.tag-input__container[data-state="default"] {
+  box-shadow: 0 0 0 1px var(--ez-tag-input--border-color-default);
+}
+
+.tag-input__container[data-state="error"] {
+  box-shadow: 0 0 0 var(--space--2, 2px) var(--ez-tag-input--border-color-error);
+}
+
+.tag-input__container[data-state="success"] {
+  box-shadow: 0 0 0 var(--space--2, 2px) var(--ez-tag-input--border-color-success);
+}
+
+.tag-input__container[data-state="warning"] {
+  box-shadow: 0 0 0 var(--space--2, 2px) var(--ez-tag-input--border-color-warning);
+}
+
+.tag-input__container:focus-within {
+  box-shadow: 0 0 0 var(--space--2, 2px) var(--ez-tag-input--border-color-focused);
+}
+
+input {
+  flex: 1;
+  height: var(--space--24, 24px);
+  background: transparent;
+  border: none;
+  outline: none;
+  color: var(--ez-tag-input--input-color);
+  font-family: var(--font--pattern, 'Roboto');
+  font-size: var(--ez-tag-input--input-font-size);
+  font-weight: var(--font-weight--regular, 400);
+  line-height: var(--line-height--20, 20px);
+}
+
+input::placeholder {
+  color: var(--ez-tag-input--placeholder-color);
+}
+
+.tag-input__container[data-disabled="true"] {
+  cursor: not-allowed;
+
+  /* public */
+  background: var(--ez-tag-input--background-color-disabled);
+  box-shadow: 0 0 0 1px var(--ez-tag-input--border-color-default);
+}
+
+.tag-input__container[data-disabled="true"]>* {
+  cursor: not-allowed;
+}
+
+input:read-only .tag-input__container>* {
+  cursor: default;
+}
+
+@keyframes ez-helptext-fadein {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+span {
+  font-size: var(--font-size--xsmall, 10px);
+  line-height: var(--line-height--16, 16px);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  animation: ez-helptext-fadein 0.3s ease;
+
+  /* public */
+  color: var(--ez-tag-input--helptext-color);
+}