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

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

@@ -21,29 +21,29 @@
     --ez-split-button__right-button--padding-left: 8px;
     /* general */
     /*@doc Define a cor do label.*/
-    --ez-split-button--color: var(--title--primary, #FFF);
+    --ez-split-button--color: var(--title--primary, #2B3A54);
     /*@doc Define o tamanho do label.*/
-    --ez-split-button--font-size: var(--text--medium, 14px);
+    --ez-split-button--font-size: var(--text--small, 12px);
     /*@doc Define a família da fonte do label.*/
     --ez-split-button--font-family: var(--font-pattern, Arial);
     /*@doc Define o peso da fonte do label.*/
     --ez-split-button--font-weight: var(--text-weight--large);
     /*@doc Define a cor de fundo do botão.*/
-    --ez-split-button--background-color: var(--background--medium, #008561);
+    --ez-split-button--background-color: var(--background--light, #ffffff);
     /*@doc Define o raio da borda do botão.*/
-    --ez-split-button--border-radius: var(--border--radius-large, 12px);
+    --ez-split-button--border-radius: var(--border--radius-large, 24px);
     /*@doc Define o estilo da borda do botão.*/
-    --ez-split-button--border: none;
+    --ez-split-button--border: 1px solid var(--color--strokes);
     /*@doc Define o alinhamento horizontal do conteúdo do botão.*/
     --ez-split-button--justify-content: center;
     /*@doc Define a cor do texto e do ícone quando o cursor está sobre o botão.*/
-    --ez-split-button--hover-color: var(--color--primary-600);
+    --ez-split-button--hover-color: var(--color--primary-600, #007a5a);
     /*@doc Define a cor de fundo quando o cursor está sobre o botão.*/
-    --ez-split-button--hover--background-color: var(--background--medium, var(--ez-split-button--background-color));
+    --ez-split-button--hover--background-color: var(--background--light, #ffffff);
     /*@doc Define a cor do texto quando o botão está desabilitado.*/
-    --ez-split-button--disabled-color: var(--text--disable);
+    --ez-split-button--disabled-color: var(--text--primary);
     /*@doc Define a cor de fundo quando o botão está desabilitado.*/
-    --ez-split-button--disabled--background-color: var(--color--disable-secondary);
+    --ez-split-button--disabled--background-color: var(--background--medium);
     /*@doc Define o estido da borda quando o botão está selecionado.*/
     --ez-split-button--focus--border: var(--border--medium, 2px) var(--color--primary-300);
     /*@doc Define a sombra do botão quando selecionado.*/
@@ -81,7 +81,7 @@
     background-color: var(--ez-split-button--background-color);
     color: var(--ez-split-button--color);
     fill: var(--ez-split-button--color);
-    border: var(--ez-split-button--border);
+    border: none;
     justify-content: var(--ez-split-button--justify-content);
   }
 
@@ -97,11 +97,30 @@
     fill: var(--ez-split-button--active-color);
     --ez-icon--color: var(--ez-split-button--active-color);
   }
+  .ez-split-button__left-button{
+    border: var(--ez-split-button--border);
+    border-right: none;
+    outline: none;
+  }
+  .ez-split-button__right-button{
+    border: var(--ez-split-button--border);
+    border-left: none;
+    outline: none;
+  }
+
+  .ez-split-button__left-button:focus{
+    box-shadow: 
+    0 0 0 2px var(--color--primary-300), /* right */
+    0 2px 0 0 var(--color--primary-300), /* bottom */
+    0 -2px 0 0 var(--color--primary-300); /* top */
 
-  .ez-split-button__left-button:focus,
+  }
   .ez-split-button__right-button:focus {
-    outline: var(--ez-split-button--focus--border);
-    box-shadow: var(--ez-split-button--focus--box-shadow);
+  box-shadow: 
+    2px 0 0 0 var(--color--primary-300), /* right */
+    0 2px 0 0 var(--color--primary-300), /* bottom */
+    0 -2px 0 0 var(--color--primary-300); /* top */
+
   }
 
   .ez-split-button__left-button:hover,
@@ -113,6 +132,16 @@
     --ez-icon--color: var(--ez-split-button--hover-color);
   }
 
+  .ez-split-button__left-button:active,
+  .ez-split-button__right-button:active {
+    outline: none;
+    box-shadow: none;
+    background-color: var(--ez-split-button--active--background-color);
+    color: var(--ez-split-button--active-color);
+    fill: var(--ez-split-button--active-color);
+    --ez-icon--color: var(--ez-split-button--active-color);
+  }
+
   .ez-split-button__left-button:disabled,
   .ez-split-button__left-button:disabled label,
   .ez-split-button__right-button:disabled{
@@ -123,7 +152,15 @@
     --ez-icon--color: var(--ez-split-button--disabled-color);
     cursor: not-allowed;
   }
-
+  .ez-split-button__left-button:disabled{
+    border: var(--ez-split-button--disabled-border);
+    border-right: none;
+  }
+  .ez-split-button__right-button:disabled{
+    border: var(--ez-split-button--disabled-border);
+    border-left: none;
+  }
+  
   button.large {
     height: var(--ez-split-button__large--height);
   }
@@ -161,6 +198,7 @@
     border-bottom-right-radius: var(--ez-split-button--border-radius);
     border-top-left-radius: 0;
     border-bottom-left-radius:0;
+    border-right: var(--ez-split-button--border);
   }
   
   .ez-split-button__right-button--medium {

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

@@ -42,7 +42,7 @@ export class EzSplitButton {
   }
   getIconSize(sizeParam = 'medium') {
     var _a;
-    const sizeList = ['medium', 'large'];
+    const sizeList = ['small', 'medium', 'large'];
     const sizeLowerCase = (_a = this.size) === null || _a === void 0 ? void 0 : _a.toLowerCase();
     return sizeList.includes(sizeLowerCase) ? sizeLowerCase : sizeParam;
   }
@@ -311,8 +311,8 @@ export class EzSplitButton {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'medium' | 'large'",
-          "resolved": "\"large\" | \"medium\"",
+          "original": "'small' | 'medium' | 'large'",
+          "resolved": "\"large\" | \"medium\" | \"small\"",
           "references": {}
         },
         "required": false,

package/dist/collection/components/ez-split-panel/ez-split-panel.css

@@ -6,3 +6,18 @@
   background-color: transparent;
   max-width: 100%;
 }
+.ez-split-gutter__row {
+  cursor: ns-resize;
+}
+.ez-split-gutter__column {
+  cursor: ew-resize;
+}
+
+.structural__panel {
+  background: none;
+  box-shadow: none;
+  outline: none;
+  padding: 0;
+  margin: 0;
+  border: 0;
+}

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

@@ -7,6 +7,7 @@ export class SplitPanel {
     this._buildInProgress = false;
     this.direction = 'column';
     this.anchorToExpand = false;
+    this.structural = false;
   }
   rebuildLayout() {
     Array.from(this._element.querySelectorAll(".ez-split-gutter")).reverse().forEach(el => {
@@ -38,7 +39,7 @@ export class SplitPanel {
     this.initSplit();
     this._mutationObserver = new MutationObserver((mutationsList) => {
       for (const mutation of mutationsList) {
-        if (mutation.type === 'childList' && this._buildInProgress === false) {
+        if (mutation.type === 'childList' && !this._buildInProgress) {
           this._buildInProgress = true;
           window.requestAnimationFrame(() => {
             this.rebuildLayout();
@@ -61,20 +62,30 @@ export class SplitPanel {
     if (!this._items.length) {
       return;
     }
-    this._element.style[this.direction == 'row' ? 'grid-template-rows' : 'grid-template-columns'] = this.getGridTemplate();
+    this._element.style[this.direction === 'row' ? 'grid-template-rows' : 'grid-template-columns'] = this.getGridTemplate();
+    this.removeGuttersMargin();
     Split(this.getGutters());
   }
+  handlePanelDragEnd() {
+    const items = this._items.map(item => ({
+      id: item.id,
+      height: item.clientHeight,
+      width: item.clientWidth,
+    }));
+    this.resizeEnd.emit({ panelId: this._element.id, items });
+  }
   getGutters() {
     const gutters = {
       columnGutters: [],
       rowGutters: [],
+      onDragEnd: () => this.handlePanelDragEnd()
     };
     if (!this._items.length) {
       return gutters;
     }
-    const proToChange = this.direction == 'row' ? 'rowGutters' : 'columnGutters';
+    const proToChange = this.direction === 'row' ? 'rowGutters' : 'columnGutters';
     this._items.forEach((item, index) => {
-      if (index == this._items.length - 1)
+      if (index === this._items.length - 1)
         return;
       let gutterTrack = item.dataset.trackNumber;
       if (index === this._items.length - 1) {
@@ -91,6 +102,12 @@ export class SplitPanel {
     const gutter = document.createElement('div');
     gutter.classList.add('ez-split-gutter');
     gutter.classList.add(this.direction);
+    if (this.direction === 'row') {
+      gutter.classList.add('ez-split-gutter__row');
+    }
+    else {
+      gutter.classList.add('ez-split-gutter__column');
+    }
     gutter.dataset.itemTrack = `${item.dataset.trackNumber}`;
     gutter.dataset.trackNumber = (Number(item.dataset.trackNumber) + 1).toString();
     item.parentNode.insertBefore(gutter, item.nextSibling);
@@ -136,8 +153,52 @@ export class SplitPanel {
     });
     return template;
   }
+  removeGuttersMargin() {
+    if (this._items.length <= 1)
+      return;
+    if (this.direction == "column") {
+      this.removeGuttersMarginColumn();
+      return;
+    }
+    if (this.direction == "row") {
+      this.removeGuttersMarginRow();
+      return;
+    }
+  }
+  removeGuttersMarginColumn() {
+    this._items.forEach((item, index) => {
+      if (index == 0) {
+        item.style.marginRight = "0";
+        return;
+      }
+      if (index === this._items.length - 1) {
+        item.style.marginLeft = "0";
+        return;
+      }
+      item.style.marginRight = "0";
+      item.style.marginLeft = "0";
+      return;
+    });
+  }
+  removeGuttersMarginRow() {
+    if (this._items.length <= 1)
+      return;
+    this._items.forEach((item, index) => {
+      if (index == 0) {
+        item.style.marginBottom = "0";
+        return;
+      }
+      if (index === this._items.length - 1) {
+        item.style.marginTop = "0";
+        return;
+      }
+      item.style.marginBottom = "0";
+      item.style.marginTop = "0";
+      return;
+    });
+  }
   render() {
-    return h(Host, { style: this.getElementStyle() });
+    return h(Host, { class: `${this.structural ? 'structural__panel' : 'content__panel'}`, style: this.getElementStyle() });
   }
   static get is() { return "ez-split-panel"; }
   static get originalStyleUrls() {
@@ -187,9 +248,49 @@ export class SplitPanel {
         "attribute": "anchor-to-expand",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "structural": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define se o painel est\u00E1 sendo utilizado como estrutura para apresenta\u00E7\u00E3o de outro item"
+        },
+        "attribute": "structural",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }
+  static get events() {
+    return [{
+        "method": "resizeEnd",
+        "name": "resizeEnd",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "IPanelSizeInfo",
+          "resolved": "IPanelSizeInfo",
+          "references": {
+            "IPanelSizeInfo": {
+              "location": "global"
+            }
+          }
+        }
+      }];
+  }
   static get methods() {
     return {
       "rebuildLayout": {

package/dist/collection/components/ez-split-panel/interfaces/IPanelSizeInfo.js

@@ -0,0 +1 @@
+export {};

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

@@ -3,7 +3,7 @@
   width: 100%;
   height: 100%;
   border-radius: var(--border--radius-medium);
-  box-shadow: var(--shadow);
+  box-shadow: var(--shadow--xsmall);
   flex-direction: column;
   overflow: hidden;
   display: flex;
@@ -45,6 +45,7 @@
 .ez-split-item--header-buttons {
   display: flex;
   align-items: center;
+  max-height: 20px;
 }
 
 .ez-split-item--content {
@@ -56,4 +57,15 @@ h3.ez-margin--small {
   margin-left: var(--space--small);
 }
 
-
+.structural__item {
+  background: none;
+  box-shadow: none;
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+.content__item {
+  margin: var(--space--extra-small);
+  width: calc(100% - 2*(var(--space--extra-small)));
+  height: calc(100% - 2*(var(--space--extra-small)));
+}

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

@@ -6,18 +6,21 @@ export class SplitItem {
     this.enableExpand = true;
     this._expanded = false;
     this.size = undefined;
+    this.structural = false;
   }
   /**
    * Alterna a visibilidade do painel.
    */
   toggleExpandItem() {
+    var _a, _b;
     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();
   }
   componentDidLoad() {
     CSSVarsUtils.applyVarsGrid(this._element, this._slot.children[0]);
   }
   render() {
-    return (h(Host, { class: `box_split-item ${this._expanded ? 'expanded__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--small 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", { 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 ? 'Resumir' : 'Expandir' })))), 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() {
@@ -86,6 +89,24 @@ export class SplitItem {
         },
         "attribute": "size",
         "reflect": false
+      },
+      "structural": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define se o painel est\u00E1 sendo utilizado como estrutura para apresenta\u00E7\u00E3o de outro item"
+        },
+        "attribute": "structural",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }

package/dist/collection/components/ez-text-area/ez-text-area.css

@@ -13,24 +13,25 @@
   /*@doc Define o peso da fonte do label do componente.*/
   --text-area--font-weight: var(--text-weight--medium, 400);
   /*@doc Define a cor da fonte do input e label do componente.*/
-  --text-area--color: var(--title--primary, #000);
+  --text-area--color: var(--title--primary, #2B3A54);
 
   /* input */
   /*@doc Define a cor de fundo do input.*/
-  --text-area__input--background-color: var(--background--medium, #e0e0e0);
+  --text-area__input--background-color: var(--background--light, #FFFFFF);
   /*@doc Define o estilo da borda do input.*/
   --text-area__input--border: var(--border--medium, 2px solid);
   /*@doc Define a cor da borda do input.*/
-  --text-area__input--border-color: var(--text-area__input--background-color);
-  /*no modo normal usamos a borda com a mesma cor do bg*/
+  --text-area__input--border-color: var(--color--strokes,#DCE0E8);
   /*@doc Define a cor da borda do input quando focado.*/
   --text-area__input--focus--border-color: var(--color--primary, #008561);
   /*@doc Define a cor de fundo do input quando desabilitado.*/
-  --text-area__input--disabled--background-color: var(--color--disable-secondary, #F2F5F8);
+  --text-area__input--disabled--background-color: var(--background--medium, #F0F3F7);
   /*@doc Define a cor do texto do input.*/
-  --text-area__input--disabled--color: var(--text--disable, #AFB6C0);
+  --text-area__input--disabled--color: var(--text--primary, #626E82);
+  /*@doc Define a borda do texto do input quando desabilitado.*/
+  --text-area__input--disabled--border--color: var(--color--strokes,#DCE0E8);
   /*@doc Define a cor da borda do input quando com erro.*/
-  --text-area__input--error--border-color: #CC2936;
+  --text-area__input--error--border-color: var(--color-alert--error-800,#BD0025);
 
   /* message box */
   /*@doc Define o tamanho da fonte da mensagem abaixo do input.*/
@@ -38,7 +39,7 @@
   /*@doc Define a cor da fonte da mensagem quando info.*/
   --text-area__message_box--info--color: var(--color--success, #22085d);
   /*@doc Define a cor da fonte da mensagem quando erro.*/
-  --text-area__message_box--error--color: var(--color--error, #FF0000);
+  --text-area__message_box--error--color: var(--color-alert--error-800,#BD0025);
 
   /* label */
   /*@doc Define o posicionamento do label.*/
@@ -50,6 +51,20 @@
   /*@doc Define o espaçamento direito do label.*/
   --text-area__label--padding-right: 12px;
 
+  /* scrollbar */
+  /*@doc Define a cor da barra de rolagem do componente.*/
+  --text-area__scrollbar--color-default: var(--scrollbar--default, #626e82);
+  /*@doc Define a cor de fundo da barra de rolagem do componente.*/
+  --text-area__scrollbar--color-background: var(--scrollbar--background, #E5EAF0);
+  /*@doc Define a cor do hover na barra de rolagem do componente.*/
+  --text-area__scrollbar--color-hover: var(--scrollbar--hover, #2B3A54);
+  /*@doc Define a cor do active na barra de rolagem do componente.*/
+  --text-area__scrollbar--color-clicked: var(--scrollbar--clicked, #a2abb9);
+  /*@doc Define o raio da borda da barra de rolagem do componente.*/
+  --text-area__scrollbar--border-radius: var(--border--radius-small, 6px);
+  /*@doc Define a largura da barra de rolagem do componente.*/
+  --text-area__scrollbar--width: var(--space--small, 6px);
+
   /***************
   host style  
   ***************/
@@ -69,6 +84,7 @@ textarea {
   width: 100%;
   padding: 0;
   background: none;
+  min-height: 42px;
 
   /*public*/
   font-weight: var(--text-area--font-weight);
@@ -76,6 +92,9 @@ textarea {
   font-size: var(--text-area--font-size);
   color: var(--text-area--color);
   margin-top: calc(var(--space--medium, 12px) + 4px);
+
+  scrollbar-width: thin;
+  scrollbar-color: var(--text-area__scrollbar--color-clicked) var(--text-area__scrollbar--color-background);
 }
 
 textarea:focus {
@@ -87,11 +106,48 @@ textarea:disabled {
   /*public*/
   background-color: transparent;
   color: var(--text-area__input--disabled--color);
+  border: var(--text-area__input--disabled--border);
+  cursor: not-allowed;
+}
+
+textarea::-webkit-scrollbar {
+  background-color: var(--text-area__scrollbar--color-background);
+
+  width: var(--text-area__scrollbar--width);
+  max-width: var(--text-area__scrollbar--width);
+  min-width: var(--text-area__scrollbar--width);
+}
+
+textarea::-webkit-scrollbar-thumb {
+  /*public*/
+  background-color: var(--text-area__scrollbar--color-default);
+  border-radius: var(--text-area__scrollbar--border-radius);
+}
+
+textarea::-webkit-scrollbar-track {
+  /*public*/
+  background-color: var(--text-area__scrollbar--color-background);
+  border-radius: var(--text-area__scrollbar--border-radius);
+}
+
+textarea::-webkit-scrollbar-thumb:vertical:hover,
+textarea::-webkit-scrollbar-thumb:horizontal:hover {
+  /*public*/
+  background-color: var(--text-area__scrollbar--color-hover);
+}
+
+textarea::-webkit-scrollbar-thumb:vertical:active,
+textarea::-webkit-scrollbar-thumb:horizontal:active {
+  /*public*/
+  background-color: var(--text-area__scrollbar--color-clicked);
 }
 
 .textarea {
   /*private*/
   width: 100%;
+  min-height: 42px;
+  max-width: 100%;
+
   box-sizing: border-box;
   padding-left: var(--space--medium);
   padding-right: var(--space--extra-small);
@@ -102,9 +158,16 @@ textarea:disabled {
   border-color: var(--text-area__input--border-color);
   background-color: var(--text-area__input--background-color);
 }
+.textarea--disabled{
+  border-radius: var(--text-area--border-radius);
+  border: var(--text-area__input--border);
+  border-color: var(--text-area__input--disabled--border--color);
+  background-color: var(--text-area__input--disabled--background-color);
+  cursor: not-allowed;
+}
 
 .textarea--resizable {
-  resize: both;
+  resize: vertical;
 }
 
 .textarea--focus {
@@ -169,6 +232,7 @@ textarea:disabled {
 
 .textarea__label--disabled {
   color: var(--text-area__input--disabled--color);
+  cursor: not-allowed;
 }
 
 .textarea--slim {
@@ -216,27 +280,12 @@ textarea:disabled {
   color: var(--text-area--color);
 }
 
-.textarea--slim:disabled::-webkit-input-placeholder { /* WebKit browsers */
-  /*public*/
-  color: var(--text-area__input--disabled--color);
-}
-
-.textarea--slim:disabled:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
-  /*public*/
-  color: var(--text-area__input--disabled--color);
-}
-
-.textarea--slim:disabled::-moz-placeholder { /* Mozilla Firefox 19+ */
-  /*public*/
-  color: var(--text-area__input--disabled--color);
-}
-
-.textarea--slim:disabled:-ms-input-placeholder { /* Internet Explorer 10+ */
-  /*public*/
-  color: var(--text-area__input--disabled--color);
-}
-
+.textarea--slim:disabled::-webkit-input-placeholder, /* WebKit browsers */
+.textarea--slim:disabled:-moz-placeholder, /* Mozilla Firefox 4 to 18 */
+.textarea--slim:disabled::-moz-placeholder, /* Mozilla Firefox 19+ */
+.textarea--slim:disabled:-ms-input-placeholder, /* Internet Explorer 10+ */
 .textarea--slim:disabled::placeholder {
   /*public*/
   color: var(--text-area__input--disabled--color);
+  cursor: not-allowed
 }