@sankhyalabs/ezui 5.22.0-dev.7 → 5.22.0-dev.71

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,6 +6,7 @@ export class SplitItem {
     this.enableExpand = true;
     this._expanded = false;
     this.size = undefined;
+    this.structural = false;
   }
   /**
    * Alterna a visibilidade do painel.
@@ -17,7 +18,7 @@ export class SplitItem {
     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--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))));
   }
   static get is() { return "ez-split-item"; }
   static get originalStyleUrls() {
@@ -86,6 +87,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--medium, 12px);
+
   /***************
   host style  
   ***************/
@@ -76,6 +91,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,6 +105,40 @@ 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 {
@@ -102,6 +154,13 @@ 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;
@@ -169,6 +228,7 @@ textarea:disabled {
 
 .textarea__label--disabled {
   color: var(--text-area__input--disabled--color);
+  cursor: not-allowed;
 }
 
 .textarea--slim {
@@ -216,27 +276,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
 }

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

@@ -2,6 +2,8 @@ import { ElementIDUtils } from '@sankhyalabs/core';
 import { h, Host } from '@stencil/core';
 export class EzTextArea {
   constructor() {
+    this.LINE_HEIGHT = 24;
+    this.HEIGHT_RATIO = 1.4;
     this.label = undefined;
     this.value = undefined;
     this.enabled = true;
@@ -10,6 +12,8 @@ export class EzTextArea {
     this.canShowError = true;
     this.mode = "regular";
     this.enableResize = false;
+    this.autoRows = false;
+    this.autoFocus = false;
   }
   observeErrorMessage() {
     var _a, _b, _c, _d;
@@ -47,8 +51,17 @@ export class EzTextArea {
   observeRows() {
     const rows = this.rows > 0 ? this.rows : this.mode != "slim" ? 4 : 2;
     if (rows !== this.rows) {
-      this.rows = rows;
-      this._initialRows = rows;
+      this.updateRows(rows);
+    }
+  }
+  observeAutoRows() {
+    var _a, _b;
+    if (this.autoRows) {
+      (_a = this._resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+      this.initializeResizeObserver();
+    }
+    else {
+      (_b = this._resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
     }
   }
   //---------------------------------------------
@@ -117,6 +130,42 @@ export class EzTextArea {
   isFocused() {
     return this._hostElement.shadowRoot.activeElement !== null;
   }
+  updateRows(newRows) {
+    this.rows = newRows;
+    this._initialRows = newRows;
+  }
+  calculateMaxRows() {
+    const parentElement = this._hostElement.parentElement;
+    if (!parentElement) {
+      return;
+    }
+    const height = Math.max((parentElement === null || parentElement === void 0 ? void 0 : parentElement.clientHeight) || 0, this.LINE_HEIGHT);
+    if (height > 0) {
+      const maxRows = Math.floor(height / this.LINE_HEIGHT * this.HEIGHT_RATIO);
+      if (maxRows !== this.rows) {
+        this.updateRows(maxRows);
+      }
+    }
+  }
+  initializeResizeObserver() {
+    if (!this.autoRows) {
+      return;
+    }
+    const parentElement = this._hostElement.parentElement;
+    if (parentElement) {
+      try {
+        if (this._resizeObserver != undefined) {
+          this._resizeObserver.unobserve(parentElement);
+        }
+        this._resizeObserver = new ResizeObserver(this.calculateMaxRows.bind(this));
+        this._resizeObserver.observe(parentElement);
+      }
+      catch (e) {
+        console.warn(e);
+      }
+      this.calculateMaxRows();
+    }
+  }
   //---------------------------------------------
   // Event handlers
   //---------------------------------------------
@@ -139,6 +188,13 @@ export class EzTextArea {
       this._container.classList.add("textarea--focus");
     }
   }
+  connectedCallback() {
+    this.initializeResizeObserver();
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this._resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+  }
   //---------------------------------------------
   // Lifecycle web component
   //---------------------------------------------
@@ -146,10 +202,15 @@ export class EzTextArea {
     this.observeErrorMessage();
     this.adjustFloatingLabel();
     this.observeMode();
+    if (this.autoFocus) {
+      requestAnimationFrame(() => {
+        this.setFocus();
+      });
+    }
   }
   render() {
     ElementIDUtils.addIDInfoIfNotExists(this._hostElement, 'input');
-    return (h(Host, null, h("div", { class: "textarea", ref: (el) => this._container = el }, this.label && this.mode != "slim" ?
+    return (h(Host, null, h("div", { class: `textarea ${this.enabled ? "" : "textarea--disabled"}`, ref: (el) => this._container = el }, this.label && this.mode != "slim" ?
       h("label", { ref: (el) => this._labelElem = el, class: this.enabled ? "textarea__label" : "textarea__label textarea__label--disabled", onClick: () => this._inputElem.focus(), title: this.label }, this.label)
       : null, h("textarea", { onFocus: () => this.handleFocus(), "data-element-id": ElementIDUtils.getInternalIDInfo("input"), ref: (el) => this._inputElem = el, value: this.value, disabled: !this.enabled, class: {
         "textarea--slim": this.mode === "slim",
@@ -311,6 +372,42 @@ export class EzTextArea {
         "attribute": "enable-resize",
         "reflect": true,
         "defaultValue": "false"
+      },
+      "autoRows": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Ativa a op\u00E7\u00E3o de fazer as linhas do componente serem baseados na altura m\u00E1xima."
+        },
+        "attribute": "auto-rows",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "autoFocus": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Se true o campo de texto receber\u00E1 o foco ao ser renderizado."
+        },
+        "attribute": "auto-focus",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }
@@ -423,6 +520,9 @@ export class EzTextArea {
       }, {
         "propName": "rows",
         "methodName": "observeRows"
+      }, {
+        "propName": "autoRows",
+        "methodName": "observeAutoRows"
       }];
   }
 }