@sankhyalabs/ezui 5.22.0-dev.9 → 5.22.0-dev.90

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; }
 }

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--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", { 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"
       }
     };
   }