@sankhyalabs/ezui 0.0.0-bugfix-dev-KB-08202.0

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

@@ -0,0 +1,254 @@
+:host {
+  /*@doc Define o tamanho da fonte do header.*/
+  --ez-collapsible-box--font-size: var(--title--medium, 14px);
+  /*@doc Define a família da fonte do header.*/
+  --ez-collapsible-box--font-family: var(--font-pattern, Arial);
+  /*@doc Define o peso da fonte do header.*/
+  --ez-collapsible-box--font-weight: var(--text-weight--large, 600);
+  /*@doc Define a cor da fonte do header.*/
+  --ez-collapsible-box--color: var(--title--primary);
+  /*@doc Define o tamanho da fonte do header.*/
+  --ez-collapsible-box--subtitle--font-size: var(--text--medium, 14px);
+  /*@doc Define a família da fonte do header.*/
+  --ez-collapsible-box--subtitle--font-family: var(--font-pattern, 'Roboto');
+  /*@doc Define o peso da fonte do header.*/
+  --ez-collapsible-box--subtitle--font-weight: var(--text-weight--medium, 400);
+  /*@doc Define a cor da fonte do header.*/
+  --ez-collapsible-box--subtitle--color: var(--text--primary);
+  /*@doc Define a cor da fonte do header.*/
+  --ez-collapsible-box--subtitle--margin-bottom: var(--space--medium, 12px);
+   /*@doc Define a cor do texto e do ícone quando o componente está focado.*/
+   --ez-collapsible-box--focus--color: var(--color--primary-600);
+  /*@doc Define a cor do chevron.*/
+  --ez-collapsible-box__icon--color: var(--ez-collapsible-box--color);
+  /*@doc Define o espaçamento superior ao header.*/
+  --ez-collapsible-box__header--padding-top: 0px;
+  /*@doc Define o espaçamento inferior ao header.*/
+  --ez-collapsible-box__header--padding-bottom: 0px;
+  /*@doc Define o espaçamento à direita do header.*/
+  --ez-collapsible-box__header--padding-right: 0px;
+  /*@doc Define o espaçamento à esquerda do header.*/
+  --ez-collapsible-box__header--padding-left: 0px;
+
+  /***************
+     host style  
+  ***************/
+  /*private*/
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+}
+
+ez-icon {
+  --ez-icon--color: inherit;
+}
+
+.collapsible-box {
+  /*private*/
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+
+.collapsable-box--bordered {
+  border: var(--border--small);
+  border-color: var(--color--strokes);
+  border-radius: var(--border--radius-medium);
+  padding: var(--space--xs);
+}
+
+.collapsible-box__header {
+  /*private*/
+  display: flex;
+  box-sizing: border-box;
+  
+  /*public*/
+  padding-top: var(--ez-collapsible-box__header--padding-top);
+  padding-bottom: var(--ez-collapsible-box__header--padding-bottom);
+  padding-right: var(--ez-collapsible-box__header--padding-right);
+  padding-left: var(--ez-collapsible-box__header--padding-left);
+}
+
+.collapsible-box__title {
+  /*private*/
+  position: relative;
+  width: auto;
+  display: flex;
+  box-sizing: border-box;
+  align-items: center;
+  outline: none;
+  border: none;
+  background-color: unset;
+  cursor: pointer;
+  padding: 0px;
+  text-align: left;
+
+  /*public*/
+  color: var(--ez-collapsible-box--color);
+  --ez-icon--color: var(--ez-collapsible-box__icon--color);
+  margin-bottom: var(--space--medium, 12px);
+}
+
+.collapsible-box__title:focus {
+  /*public*/
+  color: var(--ez-collapsible-box--focus--color);
+  --ez-icon--color: var(--ez-collapsible-box--focus--color);
+}
+
+.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);
+  font-size: var(--ez-collapsible-box--font-size);
+  font-weight: var(--ez-collapsible-box--font-weight);
+}
+
+.subtitle-box__label {
+  /*private*/
+  display: flex;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  box-sizing: border-box;
+
+  /*public*/
+  font-family: var(--ez-collapsible-box--subtitle--font-family);
+  font-size: var(--ez-collapsible-box--subtitle--font-size);
+  font-weight: var(--ez-collapsible-box--subtitle--font-weight);
+  color: var(--ez-collapsible-box--subtitle--color);
+  margin-bottom: var(--ez-collapsible-box--subtitle--margin-bottom);
+}
+
+.subtitle-box__content{
+  /*private*/
+  width: 100%;
+}
+
+.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%);
+
+  /*public*/
+  transition: transform var(--transition);
+}
+
+.collapsible-box__icon--collapsed {
+  /*private*/
+  transform: rotate(0deg) translate(-14%, 0px);
+}
+
+.collapsible-box__title--icon-right {
+  /*private*/
+  flex-direction: row-reverse;
+}
+
+.collapsible-box__title--icon-right .collapsible-box__icon {
+  /*private*/
+  transform: rotate(90deg) translate(0px, -14%);
+}
+
+.collapsible-box__title--icon-right .collapsible-box__icon--collapsed {
+  /*private*/
+  transform: rotate(0deg) translate(14%, 0px);
+}
+
+.collapsible-box__title--icon-right .collapsible-box__label {
+  /*private*/
+  margin-left: 0px;
+  margin-right: 6px;
+}
+
+.collapsible-box__title--left {
+  margin-right: auto;
+}
+
+.collapsible-box__title--right {
+  margin-left: auto;
+}
+
+.collapsible-box__title--center {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.collapsible-box__title--stretch {
+  justify-content: space-between;
+  width: 100%;
+}
+
+.collapsible-box__title--no-margin {
+  margin-bottom: 0;
+}
+
+.collapsible-box__content {
+  /*private*/
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  height: 0px;
+  max-height: 0px;
+  opacity: 0;
+  overflow: hidden;
+
+  /*public*/
+  transition: all var(--transition, 0.5s);
+}
+
+.collapsible-box__content--show {
+  /*private*/
+  height: 100%;
+  max-height: none;
+  opacity: 1;
+  overflow: visible;
+
+  /*public*/
+  transition: all var(--transition, 0.5s);
+}
+
+.font--x-small {
+  /*private*/
+  font-size: 10px;
+}
+
+.font--small {
+  /*private*/
+  font-size: 12px;
+}
+
+.font--medium {
+  /*private*/
+  font-size: 14px;
+}
+
+.font--large {
+  /*private*/
+  font-size: 16px;
+}
+
+.font--x-large {
+  /*private*/
+  font-size: 20px;
+}

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

@@ -0,0 +1,442 @@
+import { h } from "@stencil/core";
+import { ElementIDUtils } from "@sankhyalabs/core";
+import { ApplicationUtils } from "../../utils";
+export class EzCollapsibleBox {
+  constructor() {
+    this._activeEditText = false;
+    this.value = false;
+    this.boxBordered = false;
+    this.label = undefined;
+    this.subtitle = undefined;
+    this.headerSize = "small";
+    this.iconPlacement = "left";
+    this.headerAlign = "left";
+    this.removable = false;
+    this.editable = false;
+    this.conditionalSave = undefined;
+  }
+  /**
+   * Oculta/mostra o conteúdo do ez-collapsible-box.
+   */
+  async showHide() {
+    this.value = !this.value;
+  }
+  /**
+   * Aplica o foco no campo de edição de título.
+   */
+  async applyFocusTextEdit() {
+    var _a;
+    (_a = this._refTextEdit) === null || _a === void 0 ? void 0 : _a.applyFocusSelect();
+  }
+  /**
+   * Cancela a edição de título.
+   */
+  async cancelEdition() {
+    this._activeEditText = false;
+    this.ezEditLabelMode.emit(this._activeEditText);
+  }
+  observeCollapsedValue() {
+    this.ezChange.emit(this.value);
+  }
+  /**
+   * Retorna o tamanho configurado do texto e do ícone.
+   */
+  getHeaderSize() {
+    const sizeAlias = ["xsmall", "xlarge"];
+    const sizeList = ["x-small", "small", "medium", "large", "x-large"];
+    const sizeLowerCase = this.headerSize && this.headerSize.toLowerCase();
+    const sizeCustom = sizeAlias.includes(sizeLowerCase) ? sizeLowerCase.replace('x', 'x-') : sizeLowerCase;
+    return sizeList.includes(sizeCustom) ? sizeCustom : "small";
+  }
+  removeElement() {
+    this._hostElement && this._hostElement.remove();
+    this.ezRemove.emit(this);
+  }
+  editLabel(evt) {
+    evt.preventDefault();
+    evt.stopPropagation();
+    this._activeEditText = true;
+    this.ezEditLabelMode.emit(this._activeEditText);
+  }
+  confirmRemove(evt) {
+    evt.preventDefault();
+    evt.stopPropagation();
+    ApplicationUtils.confirm("Aviso", `Deseja realmente remover o grupo <b>${this.label}</b>?`)
+      .then((canRemove) => {
+      if (canRemove) {
+        this.removeElement();
+      }
+    });
+  }
+  saveEditionText(editDetails) {
+    const { value, newValue } = editDetails.detail;
+    if (value === newValue) {
+      this.cancelEdition();
+      return;
+    }
+    let canSave = true;
+    if (this.conditionalSave) {
+      canSave = this.conditionalSave(newValue);
+    }
+    if (this.label !== newValue && canSave) {
+      this.label = newValue;
+      this._activeEditText = false;
+      this.ezSaveEditLabel.emit(editDetails.detail);
+      this.ezEditLabelMode.emit(this._activeEditText);
+    }
+  }
+  getStyledLabel() {
+    if (this._refLabel == undefined) {
+      return;
+    }
+    let styledLabel = {
+      fontSize: window.getComputedStyle(this._refLabel).getPropertyValue('font-size'),
+      fontWeight: window.getComputedStyle(this._refLabel).getPropertyValue('font-weight'),
+      fontFamily: window.getComputedStyle(this._refLabel).getPropertyValue('font-family')
+    };
+    return styledLabel;
+  }
+  componentDidLoad() {
+    ElementIDUtils.addIDInfo(this._hostElement);
+  }
+  render() {
+    return (h("div", { class: `collapsible-box ${this.boxBordered && 'collapsable-box--bordered'}` }, h("div", { class: "collapsible-box__header" }, h("button", Object.assign({}, (!this._activeEditText ? { onClick: () => { this.showHide(); } } : null), { class: "collapsible-box__title collapsible-box__title--" + (this.headerAlign || "left") +
+        (this.iconPlacement === "right" ? " collapsible-box__title--icon-right" : "") +
+        (this.value ? " collapsible-box__title--no-margin" : "") }), h("ez-icon", { slot: "icon", "icon-name": "chevron-right", size: this.getHeaderSize(), class: "collapsible-box__icon collapsible-box__icon--" + this.getHeaderSize() + (this.value ? " collapsible-box__icon--collapsed" : ""), id: "toggleCollapsible" }), !this._activeEditText ?
+      h("label", { class: "collapsible-box__label font--" + this.getHeaderSize(), title: this.label, ref: elem => this._refLabel = elem }, h("span", null, this.label), this.editable &&
+        h("ez-icon", { slot: "icon", "icon-name": "edit", onClick: (evt) => this.editLabel(evt), title: "Editar" }), this.removable &&
+        h("ez-icon", { slot: "icon", "icon-name": "delete", onClick: (evt) => this.confirmRemove(evt), title: "Remover" })) :
+      h("ez-text-edit", { class: "collapsible-box__text-edit", ref: ref => this._refTextEdit = ref, value: this.label, styled: this.getStyledLabel(), onSaveEdition: (ev) => this.saveEditionText(ev), onCancelEdition: () => this.cancelEdition() })), h("slot", { name: "rightSlot" })), h("div", { class: "collapsible-box__content" + (this.value ? "" : " collapsible-box__content--show") }, this.subtitle &&
+      h("div", { class: "subtitle-box__content" }, h("label", { class: "subtitle-box__label", title: this.subtitle }, h("span", null, this.subtitle))), h("slot", null))));
+  }
+  static get is() { return "ez-collapsible-box"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ez-collapsible-box.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ez-collapsible-box.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "value": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o valor do componente."
+        },
+        "attribute": "value",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "boxBordered": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define seu o componente deve ter borda"
+        },
+        "attribute": "box-bordered",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Texto a ser apresentado como t\u00EDtulo do componente."
+        },
+        "attribute": "label",
+        "reflect": true
+      },
+      "subtitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Texto a ser apresentado como subt\u00EDtulo do componente."
+        },
+        "attribute": "subtitle",
+        "reflect": true
+      },
+      "headerSize": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"x-small\" | \"small\" | \"medium\" | \"large\" | \"x-large\" | undefined",
+          "resolved": "\"large\" | \"medium\" | \"small\" | \"x-large\" | \"x-small\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o tamanho do texto e do \u00EDcone."
+        },
+        "attribute": "header-size",
+        "reflect": true,
+        "defaultValue": "\"small\""
+      },
+      "iconPlacement": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"left\" | \"right\"",
+          "resolved": "\"left\" | \"right\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o posicionamento do \u00EDcone."
+        },
+        "attribute": "icon-placement",
+        "reflect": true,
+        "defaultValue": "\"left\""
+      },
+      "headerAlign": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"center\" | \"left\" | \"right\" | \"stretch\" | undefined",
+          "resolved": "\"center\" | \"left\" | \"right\" | \"stretch\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define a posi\u00E7\u00E3o do conte\u00FAdo do cabe\u00E7alho do componente."
+        },
+        "attribute": "header-align",
+        "reflect": true,
+        "defaultValue": "\"left\""
+      },
+      "removable": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Se true mostra o \u00EDcone para remo\u00E7\u00E3o do componente."
+        },
+        "attribute": "removable",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "editable": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Se true mostra o \u00EDcone para edi\u00E7\u00E3o do componente."
+        },
+        "attribute": "editable",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "conditionalSave": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Function",
+          "resolved": "Function",
+          "references": {
+            "Function": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define uma condi\u00E7\u00E3o para salvar ou n\u00E3o uma altera\u00E7\u00E3o."
+        }
+      }
+    };
+  }
+  static get states() {
+    return {
+      "_activeEditText": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "ezChange",
+        "name": "ezChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido quando acontece a altera\u00E7\u00E3o de valor do componente."
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }, {
+        "method": "ezRemove",
+        "name": "ezRemove",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido ao remover o componente (onEzRemove)."
+        },
+        "complexType": {
+          "original": "EzCollapsibleBox",
+          "resolved": "EzCollapsibleBox",
+          "references": {
+            "EzCollapsibleBox": {
+              "location": "global"
+            }
+          }
+        }
+      }, {
+        "method": "ezSaveEditLabel",
+        "name": "ezSaveEditLabel",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido ao concluir edi\u00E7\u00E3o da label (onEzSaveEditLabel)."
+        },
+        "complexType": {
+          "original": "CustomEvent",
+          "resolved": "CustomEvent<any>",
+          "references": {
+            "CustomEvent": {
+              "location": "global"
+            }
+          }
+        }
+      }, {
+        "method": "ezEditLabelMode",
+        "name": "ezEditLabelMode",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido quando o modo de edi\u00E7\u00E3o da label for aberto e fechado (onEzEditLabelMode)."
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "showHide": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Oculta/mostra o conte\u00FAdo do ez-collapsible-box.",
+          "tags": []
+        }
+      },
+      "applyFocusTextEdit": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Aplica o foco no campo de edi\u00E7\u00E3o de t\u00EDtulo.",
+          "tags": []
+        }
+      },
+      "cancelEdition": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Cancela a edi\u00E7\u00E3o de t\u00EDtulo.",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "_hostElement"; }
+  static get watchers() {
+    return [{
+        "propName": "value",
+        "methodName": "observeCollapsedValue"
+      }];
+  }
+}