@sankhyalabs/ezui 1.2.0-beta.19 → 1.2.0-beta.20

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

@@ -1,5 +1,5 @@
 import { FloatingManager } from '@sankhyalabs/core';
-import { Component, Element, Event, h, Host, Prop } from '@stencil/core';
+import { Component, Element, Event, h, Host, Prop, State, Method } from '@stencil/core';
 import { CSSVarsUtils } from '../../utils';
 export class EzActionsButton {
   constructor() {
@@ -7,14 +7,31 @@ export class EzActionsButton {
      * Deixa o campo disponível ou não para interação com usuário.
      */
     this.enabled = true;
+    /**
+    * Define se o label será apresentado no display do componente.
+    */
+    this.showLabel = false;
+    /**
+    * Define se na opção selecionada apresentará um ícone de check.
+    */
+    this.checkOption = false;
+    /**
+    * Define se o background do botão será transparent.
+    */
+    this.isTransparent = false;
+    /**
+    * Define se o elemento contará com a seta de orientação
+    */
+    this.arrowActive = false;
     this.innerClickCheck = (floatingContainer, node) => {
+      var _a;
       if (node && floatingContainer) {
         if (node === floatingContainer) {
           return true;
         }
         const children = floatingContainer.children;
         for (let i = 0; i < children.length; i++) {
-          if (children[i].shadowRoot.contains(node)) {
+          if ((_a = children[i].shadowRoot) === null || _a === void 0 ? void 0 : _a.contains(node)) {
             return true;
           }
         }
@@ -22,25 +39,44 @@ export class EzActionsButton {
       return false;
     };
   }
+  /**
+   * Oculta a lista de ações
+   */
+  async hideActions() {
+    if (this._floatingID != undefined) {
+      FloatingManager.close(this._floatingID);
+    }
+    this._floatingID = undefined;
+  }
+  /**
+   * Verifica se a lista de ações está oculta
+   */
+  async isOpened() {
+    return this._floatingID != undefined;
+  }
   showActions() {
+    var _a, _b;
     if (!this.enabled) {
       return;
     }
-    this._floatingID = FloatingManager.float(this._actionsList, this._listContainer, { autoClose: true, innerClickTest: this.innerClickCheck });
+    const boundingHost = (_a = this._element) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+    let posLeft = boundingHost ? (boundingHost.x - (this.arrowActive ? 5 : 0)) + "px" : null;
+    let options = { autoClose: true, innerClickTest: this.innerClickCheck, isFixed: true, left: posLeft };
+    this._floatingID = FloatingManager.float(this._actionsList, this._listContainer, options);
     const docWidth = document.body.clientWidth;
-    const bounding = this._actionsList.getBoundingClientRect();
-    if (bounding.right > docWidth) {
-      FloatingManager.updateFloatPosition(this._actionsList, this._listContainer, { autoClose: true, innerClickTest: this.innerClickCheck, left: (docWidth - bounding.width) + "px" });
+    const boundingList = (_b = this._actionsList) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
+    if ((boundingList === null || boundingList === void 0 ? void 0 : boundingList.right) > docWidth) {
+      posLeft = (docWidth - boundingList.width) + "px";
+      options = { autoClose: true, innerClickTest: this.innerClickCheck, left: posLeft };
+      FloatingManager.updateFloatPosition(this._actionsList, this._listContainer, options);
     }
     window.requestAnimationFrame(() => {
       this._actionsList.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
     });
   }
-  hideActions() {
-    if (this._floatingID != undefined) {
-      FloatingManager.close(this._floatingID);
-    }
-    this._floatingID = undefined;
+  hasLabelOrCheckOption() {
+    var _a;
+    return (this.showLabel || this.checkOption) && ((_a = this.actions) === null || _a === void 0 ? void 0 : _a.length) > 0;
   }
   //---------------------------------------------
   // Event handlers
@@ -49,6 +85,7 @@ export class EzActionsButton {
     this.showActions();
   }
   actionClick(action) {
+    this._selectedAction = action;
     this.hideActions();
     this.ezAction.emit(action);
   }
@@ -79,12 +116,28 @@ export class EzActionsButton {
     if (this._floatingID == undefined) {
       this._actionsList.remove();
     }
+    if (this.hasLabelOrCheckOption()) {
+      if (!!this.value) {
+        this._selectedAction = this.actions.find((action) => action.value === this.value);
+      }
+      else if (!!!this._selectedAction) {
+        this._selectedAction = this.actions[0];
+      }
+    }
   }
   render() {
+    var _a;
     return (h(Host, null,
-      h("ez-button", { ref: elem => this._button = elem, enabled: this.enabled, mode: "icon", iconName: "dots-vertical", size: this.size, onClick: () => this.handlerButtonClick() }),
-      h("section", { class: "list-container", ref: elem => this._listContainer = elem },
-        h("div", { class: "actions-list", ref: elem => this._actionsList = elem }, this.actions.map(action => h("ez-button", { class: "btn-action", size: "small", label: action.label, onClick: () => this.actionClick(action) }))))));
+      h("ez-button", { ref: elem => this._button = elem, class: this.isTransparent ? "ez-actions-button__btn-transparent" : "", label: this.showLabel && ((_a = this._selectedAction) === null || _a === void 0 ? void 0 : _a.label), enabled: this.enabled, mode: this.showLabel ? "" : "icon", iconName: this.showLabel ? "" : this.iconName || "dots-vertical", size: this.size, onClick: () => this.handlerButtonClick() }, this.showLabel &&
+        h("ez-icon", { class: "ez-actions-button__icon-left", slot: "rightIcon", iconName: this.iconName || "dots-vertical" })),
+      h("section", { class: "ez-actions-button__list-container", ref: elem => this._listContainer = elem },
+        h("div", { class: "ez-actions-button__actions-list", ref: elem => this._actionsList = elem },
+          this.arrowActive && h("div", { class: "ez-actions-button__arrow" }),
+          this.actions.map(action => {
+            var _a;
+            return h("ez-button", { class: "ez-actions-button__btn-action", size: "small", label: action.label, onClick: () => this.actionClick(action) }, this.checkOption && ((_a = this._selectedAction) === null || _a === void 0 ? void 0 : _a.value) === action.value &&
+              h("ez-icon", { class: "ez-actions-button__icon-right", slot: "leftIcon", iconName: "check" }));
+          })))));
   }
   static get is() { return "ez-actions-button"; }
   static get encapsulation() { return "shadow"; }
@@ -117,13 +170,13 @@ export class EzActionsButton {
       "type": "unknown",
       "mutable": true,
       "complexType": {
-        "original": "Array<Action>",
-        "resolved": "Action[]",
+        "original": "Array<IAction>",
+        "resolved": "IAction[]",
         "references": {
           "Array": {
             "location": "global"
           },
-          "Action": {
+          "IAction": {
             "location": "local"
           }
         }
@@ -132,7 +185,7 @@ export class EzActionsButton {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Array no formato \"{value: string, label: string}\" que alimenta a lista de a\u00E7\u00F5es"
+        "text": ".\nArray no formato \"{value: string, label: string}\" que alimenta a lista de a\u00E7\u00F5es."
       }
     },
     "size": {
@@ -147,12 +200,121 @@ export class EzActionsButton {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "\u00C9 poss\u00EDvel escolher entre [small,medium,large]"
+        "text": "\u00C9 poss\u00EDvel escolher entre [small,medium,large]."
       },
       "attribute": "size",
       "reflect": true
+    },
+    "showLabel": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Define se o label ser\u00E1 apresentado no display do componente."
+      },
+      "attribute": "show-label",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "iconName": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Nome do \u00EDcone que ser\u00E1 apresentado no componente."
+      },
+      "attribute": "icon-name",
+      "reflect": true
+    },
+    "checkOption": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Define se na op\u00E7\u00E3o selecionada apresentar\u00E1 um \u00EDcone de check."
+      },
+      "attribute": "check-option",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "value": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Define qual o value que ser\u00E1 selecionado na lista."
+      },
+      "attribute": "value",
+      "reflect": true
+    },
+    "isTransparent": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Define se o background do bot\u00E3o ser\u00E1 transparent."
+      },
+      "attribute": "is-transparent",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "arrowActive": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Define se o elemento contar\u00E1 com a seta de orienta\u00E7\u00E3o"
+      },
+      "attribute": "arrow-active",
+      "reflect": true,
+      "defaultValue": "false"
     }
   }; }
+  static get states() { return {
+    "_selectedAction": {}
+  }; }
   static get events() { return [{
       "method": "ezAction",
       "name": "ezAction",
@@ -161,17 +323,51 @@ export class EzActionsButton {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Evento que \u00E9 disparado ao acionar uma a\u00E7\u00E3o"
+        "text": "Evento que \u00E9 disparado ao acionar uma a\u00E7\u00E3o."
       },
       "complexType": {
-        "original": "Action",
-        "resolved": "Action",
+        "original": "IAction",
+        "resolved": "IAction",
         "references": {
-          "Action": {
+          "IAction": {
             "location": "local"
           }
         }
       }
     }]; }
+  static get methods() { return {
+    "hideActions": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Oculta a lista de a\u00E7\u00F5es",
+        "tags": []
+      }
+    },
+    "isOpened": {
+      "complexType": {
+        "signature": "() => Promise<boolean>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<boolean>"
+      },
+      "docs": {
+        "text": "Verifica se a lista de a\u00E7\u00F5es est\u00E1 oculta",
+        "tags": []
+      }
+    }
+  }; }
   static get elementRef() { return "_element"; }
 }

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

@@ -108,12 +108,6 @@ button:hover {
   --ez-icon--color: var(--ez-button--hover-color);
 }
 
-button:focus {
-  outline: none;
-  outline: var(--ez-button--focus--border);
-  box-shadow: var(--ez-button--focus--box-shadow);
-}
-
 button:active {
   outline: none;
   box-shadow: none;

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

@@ -30,18 +30,20 @@ export class EzButton {
   handleSlotChange(ev) {
     const slot = ev.target;
     const content = slot.assignedElements()[0];
-    if (this.mode == "link") {
-      content.style.display = "inline";
-      if (slot.name == "leftIcon") {
-        content.style.paddingRight = "var(--ez-button__inline__icon--padding)";
+    if (!!content) {
+      if (this.mode == "link") {
+        content.style.display = "inline";
+        if (slot.name == "leftIcon") {
+          content.style.paddingRight = "var(--ez-button__inline__icon--padding)";
+        }
+        else if (slot.name == "rightIcon") {
+          content.style.paddingLeft = "var(--ez-button__inline__icon--padding)";
+        }
       }
-      else if (slot.name == "rightIcon") {
-        content.style.paddingLeft = "var(--ez-button__inline__icon--padding)";
+      else {
+        content.style.setProperty("--ez-icon--color", "var(--ez-icon--color)");
       }
     }
-    else {
-      content.style.setProperty("--ez-icon--color", "var(--ez-icon--color)");
-    }
   }
   render() {
     if (this.mode == "icon") {

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

@@ -81,16 +81,18 @@
 
 .calendar__container{
   display: flex;
+
+  /*public*/
   z-index: var(--more-visible, 2);;
 }
 
 .calendar {
   /*private*/
-  z-index: var(--more-visible, 2);
   display: flex;
   flex-direction: column;
 
   /*public*/
+  z-index: var(--more-visible, 2);
   background-color: var(--ez-calendar__body--background-color);
   padding: var(--ez-calendar__body--padding);
   border-radius: var(--ez-calendar__body--border-radius);
@@ -101,10 +103,10 @@
   /*private*/
   display: flex;
   justify-content: space-between;
-  padding-bottom: var(--space--small, 6px);
-  margin: 0px var(--space--, 12px) var(--space--small, 6px) var(--space--, 12px);
 
   /*public*/
+  padding-bottom: var(--space--small, 6px);
+  margin: 0px var(--space--, 12px) var(--space--small, 6px) var(--space--, 12px);
   font-family: var(--ez-calendar--font-family);
   color: var(--ez-calendar--color);
   text-shadow: var(--ez-calendar--text-shadow);
@@ -150,11 +152,9 @@
 }
 
 .calendar__lbl-month {
-  /*private*/
+  /*public*/
   font-weight: var(--text-weight--extra-large, 700);
   font-size: var(--title--small, 14px);
-
-  /*public*/
   font-family: var(--ez-calendar--font-family);
   color: var(--ez-calendar--color);
   text-shadow: var(--ez-calendar--text-shadow);
@@ -173,9 +173,9 @@
   justify-content: center;
   align-content: center;
   cursor: pointer;
-  font-size: var(--text--extra-small, 10px);
 
   /*public*/
+  font-size: var(--text--extra-small, 10px);
   font-family: var(--ez-calendar--font-family);
   color: var(--ez-calendar--color);
   text-shadow: var(--ez-calendar--text-shadow);
@@ -202,14 +202,14 @@
   background-color: unset;
   border-radius: unset;
   cursor: unset;
+
+  /*public*/
   color: var(--ez-calendar--color);
 }
 
 .calendar__cell--unselectable {
-  /*private*/
-  font-weight: var(--text-weight--large, 600);
-
   /*public*/
+  font-weight: var(--text-weight--large, 600);
   font-family: var(--ez-calendar--font-family);
   color: var(--ez-calendar--color);
   text-shadow: var(--ez-calendar--text-shadow);
@@ -232,11 +232,11 @@
   border: none;
   background-color: unset;
   cursor: pointer;
-  font-weight: var(--text-weight--large, 600);
-  font-size: var(--title--extra-small, 12px);
   padding: 0px;
 
   /*public*/
+  font-weight: var(--text-weight--large, 600);
+  font-size: var(--title--extra-small, 12px);
   font-family: var(--ez-calendar--font-family);
   text-shadow: var(--ez-calendar--text-shadow);
   color: var(--ez-calendar__btn-today--color);
@@ -280,21 +280,18 @@ section{
   min-width: 0px;
 }
 
-.calendar-time__header{
+.calendar-time__header {
   /*private*/
-  padding-left: var(--space--small, 6px);
-  padding-right: var(--space--small, 6px);
   display: flex;
   justify-content: space-between;
+
+  /*public*/
+  padding-left: var(--space--small, 6px);
+  padding-right: var(--space--small, 6px);
   padding-bottom: var(--space--small, 6px);
   margin: 0px var(--space--, 12px) var(--space--small, 6px) var(--space--, 12px);
   font-weight: var(--text-weight--extra-large, 700);
   font-size: var(--title--small, 14px);
-
-  
-  /*public*/
-  font-family: var(--ez-calendar--font-family);
-  color: var(--ez-calendar--color);
   text-shadow: var(--ez-calendar--text-shadow);
   border-bottom: solid var(--ez-calendar__header-line--stroke) var(--ez-calendar__header-line--color);
   font-family: var(--ez-calendar--font-family);

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

@@ -49,14 +49,15 @@
   display: flex;
   white-space: nowrap;
   align-items: center;
-  font-weight: var(--ez-label-chip__label--font-weight);
   cursor: pointer;
+  user-select: none;
+
   /*public*/
   color: var(--ez-label-chip__label--title--primary);
-  user-select: none;
   height: var(--ez-label-chip--height);
   font-family: var(--ez-label-chip__label--font-family);
   font-size: var(--ez-label-chip__label--font-size);
+  font-weight: var(--ez-label-chip__label--font-weight);
 }
 
 .lbl--active {

package/dist/collection/components/ez-collapsible-box/ez-collapsible-box.css

@@ -80,12 +80,14 @@ ez-icon {
 
 .collapsible-box__label {
   /*private*/
+  display: flex;
   white-space: nowrap;
   overflow: hidden;
   cursor: pointer;
   text-overflow: ellipsis;
   box-sizing: border-box;
   margin-left: 6px;
+  gap: 6px;
 
   /*public*/
   font-family: var(--ez-collapsible-box--font-family);
@@ -93,6 +95,20 @@ ez-icon {
   font-weight: var(--ez-collapsible-box--font-weight);
 }
 
+.collapsible-box__label ez-icon {
+  visibility: hidden;
+  transition: 0.25s linear;
+}
+
+.collapsible-box__label:hover ez-icon {
+  visibility: visible;
+}
+
+.collapsible-box__text-edit {
+  /*private*/
+  margin-left: 6px;
+}
+
 .collapsible-box__icon {
   /*private*/
   transform: rotate(90deg) translate(0px, 14%);