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

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

@@ -0,0 +1,440 @@
+import { FloatingManager, ElementIDUtils } from '@sankhyalabs/core';
+import { h, Host } from '@stencil/core';
+import { CSSVarsUtils } from '../../utils';
+export class EzActionsButton {
+  constructor() {
+    this._arrowOffset = 5;
+    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 ((_a = children[i].shadowRoot) === null || _a === void 0 ? void 0 : _a.contains(node)) {
+            return true;
+          }
+        }
+      }
+      return false;
+    };
+    this._selectedAction = undefined;
+    this.enabled = true;
+    this.actions = undefined;
+    this.size = "medium";
+    this.showLabel = false;
+    this.displayIcon = undefined;
+    this.checkOption = false;
+    this.value = undefined;
+    this.isTransparent = false;
+    this.arrowActive = 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á aberta.
+   */
+  async isOpened() {
+    return this._floatingID != undefined;
+  }
+  getFloatOptions() {
+    return {
+      autoClose: true,
+      innerClickTest: this.innerClickCheck,
+      isFixed: true,
+      top: this.getPositionTop(),
+      left: this.getPositionLeft()
+    };
+  }
+  getSideLimit() {
+    var _a;
+    const docWidth = document.body.clientWidth;
+    const boundingList = (_a = this._actionsList) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+    if ((boundingList === null || boundingList === void 0 ? void 0 : boundingList.right) > docWidth) {
+      return (docWidth - boundingList.width) + "px";
+    }
+    return;
+  }
+  showActions() {
+    if (!this.enabled) {
+      return;
+    }
+    const options = this.getFloatOptions();
+    this._floatingID = FloatingManager.float(this._actionsList, this._listContainer, options);
+    const sideLimit = this.getSideLimit();
+    if (sideLimit != undefined) {
+      options.left = sideLimit;
+      FloatingManager.updateFloatPosition(this._actionsList, this._listContainer, options);
+    }
+    window.requestAnimationFrame(() => {
+      this._actionsList.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
+    });
+  }
+  updatePosition() {
+    if (!this.enabled || this._floatingID == undefined) {
+      return;
+    }
+    const options = this.getFloatOptions();
+    const sideLimit = this.getSideLimit();
+    if (sideLimit != undefined) {
+      options.left = sideLimit;
+    }
+    FloatingManager.updateFloatPosition(this._actionsList, this._listContainer, options);
+  }
+  getPositionTop() {
+    var _a;
+    const boundingHost = (_a = this._element) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+    if (boundingHost == undefined) {
+      return null;
+    }
+    return (boundingHost.y + boundingHost.height) + "px";
+  }
+  getBoundingLeft() {
+    var _a;
+    const boundingHost = (_a = this._element) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+    if (boundingHost == undefined) {
+      return null;
+    }
+    const arrowOffset = this.arrowActive ? this._arrowOffset : 0;
+    return (boundingHost.x - arrowOffset) + "px";
+  }
+  getPositionLeft() {
+    const boundingLeft = this.getBoundingLeft();
+    if (boundingLeft) {
+      return boundingLeft;
+    }
+    else if (this.arrowActive) {
+      return `-${this._arrowOffset}px`;
+    }
+    return null;
+  }
+  hasLabelOrCheckOption() {
+    var _a;
+    return (this.showLabel || this.checkOption) && ((_a = this.actions) === null || _a === void 0 ? void 0 : _a.length) > 0;
+  }
+  hasIconName() {
+    var _a;
+    return (_a = this.actions) === null || _a === void 0 ? void 0 : _a.some(action => action.iconName != undefined);
+  }
+  controlScrollPage() {
+    window.removeEventListener("scroll", this.updatePosition.bind(this));
+    window.addEventListener("scroll", this.updatePosition.bind(this));
+  }
+  //---------------------------------------------
+  // Event handlers
+  //---------------------------------------------
+  handlerButtonClick() {
+    this.showActions();
+  }
+  actionClick(action) {
+    this._selectedAction = action;
+    this.hideActions();
+    this.ezAction.emit(action);
+  }
+  //---------------------------------------------
+  // Lifecycle web component
+  //---------------------------------------------
+  componentWillLoad() {
+    if (this.actions == undefined) {
+      this.actions = [];
+      const optionsTags = this._element.querySelectorAll("action");
+      if (optionsTags) {
+        optionsTags.forEach((e) => {
+          let label = e.innerText;
+          let value = e.getAttribute("value");
+          let enabled = !(e.getAttribute("enabled") === "false");
+          if (!value) {
+            value = label;
+          }
+          this.actions.push({ label, value, enabled });
+          e.hidden = true;
+        });
+      }
+    }
+  }
+  componentDidLoad() {
+    CSSVarsUtils.applyVarsButton(this._element, this._button);
+    ElementIDUtils.addIDInfo(this._element);
+    this.controlScrollPage();
+  }
+  componentDidRender() {
+    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, class: (this.isTransparent ? "ez-actions-button__btn-transparent" : "") +
+        (this.showLabel ? " ez-actions-button__btn-label" : ""), label: this.showLabel && ((_a = this._selectedAction) === null || _a === void 0 ? void 0 : _a.label), enabled: this.enabled, mode: this.showLabel ? undefined : "icon", iconName: this.showLabel ? "" : this.displayIcon || "dots-vertical", size: this.size, onClick: () => this.handlerButtonClick() }, this.showLabel &&
+      h("ez-icon", { class: "ez-actions-button__icon-right", slot: "rightIcon", iconName: this.displayIcon || "dots-vertical" })), h("section", { class: "ez-actions-button__list-container", ref: elem => this._listContainer = elem }, this.arrowActive &&
+      h("div", { class: "ez-actions-button__arrow ez-actions-button__arrow--" + (this.size || "small") +
+          (this.isTransparent ? " ez-actions-button__arrow--upped" : "") }), h("div", { ref: elem => this._actionsList = elem, class: "ez-actions-button__actions-list" +
+        (this.arrowActive && !this.isTransparent ? " ez-actions-button__actions-list--lowered" : "") }, this.actions.map(action => {
+      var _a;
+      return h("ez-button", { size: "small", label: action.label, onClick: () => this.actionClick(action), enabled: action.enabled, class: "ez-actions-button__btn-action" +
+          (this.checkOption || this.hasIconName() ? " ez-actions-button__btn-action--spaced" : "") }, this.checkOption && ((_a = this._selectedAction) === null || _a === void 0 ? void 0 : _a.value) === action.value &&
+        h("ez-icon", { class: "ez-actions-button__icon-check", slot: "leftIcon", size: "small", iconName: "check" }), !this.checkOption && action.iconName &&
+        h("ez-icon", { class: "ez-actions-button__icon-item", slot: "leftIcon", size: "small", iconName: action.iconName }));
+    })))));
+  }
+  static get is() { return "ez-actions-button"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ez-actions-button.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ez-actions-button.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "enabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Se false o usu\u00E1rio n\u00E3o pode interagir com o componente."
+        },
+        "attribute": "enabled",
+        "reflect": true,
+        "defaultValue": "true"
+      },
+      "actions": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "Array<IAction>",
+          "resolved": "IAction[]",
+          "references": {
+            "Array": {
+              "location": "global"
+            },
+            "IAction": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define a lista de a\u00E7\u00F5es. Os elementos devem obedecer\no formato: `{value: string, label: string}`."
+        }
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"small\" | \"medium\" | \"large\"",
+          "resolved": "\"large\" | \"medium\" | \"small\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Determina o tamanho do ez-action-button."
+        },
+        "attribute": "size",
+        "reflect": true,
+        "defaultValue": "\"medium\""
+      },
+      "showLabel": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Se true o label ser\u00E1 apresentado."
+        },
+        "attribute": "show-label",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "displayIcon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o \u00EDcone do componente."
+        },
+        "attribute": "display-icon",
+        "reflect": true
+      },
+      "checkOption": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Se true o check ser\u00E1 apresentado para os itens."
+        },
+        "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 o valor do componente."
+        },
+        "attribute": "value",
+        "reflect": true
+      },
+      "isTransparent": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Se true o background 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": "Se true a seta de ordena\u00E7\u00E3o ser\u00E1 apresentada."
+        },
+        "attribute": "arrow-active",
+        "reflect": true,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "_selectedAction": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "ezAction",
+        "name": "ezAction",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido ao acionar uma a\u00E7\u00E3o."
+        },
+        "complexType": {
+          "original": "IAction",
+          "resolved": "IAction",
+          "references": {
+            "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 aberta.",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "_element"; }
+}

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

@@ -0,0 +1,76 @@
+:host {
+  /*@doc Define o raio do padding interno para cima e para baixo.*/
+  --ez-alert-alert-container--padding-up-down: var(--space--small, 6px); 
+  /*@doc Define o raio do padding interno para a esquerda e para a direita.*/
+  --ez-alert-alert-container--padding-right-left: var(--space--medium, 12px);
+  /*@doc Define o espaçamento entre os elementos internos*/
+  --ez-alert-alert-container--gap: var(--space--medium, 12px);
+  /*@doc Define o raio da borda do corpo do Alert.*/
+  --ez-alert-alert-container--border-radius: var(--border--radius-medium, 12px);
+
+  /*@doc Define a cor da fonte no estilo Warn.*/
+  --ez-alert-alert-container--font-color-warn: var(--color--alert-warning-900, #8C6B00);
+  /*@doc Define a cor do ícone no estilo Warn.*/
+  --ez-alert-alert-container--icon-warn: var(--color--alert-warning-900, #8C6B00); 
+  /*@doc Define a cor do background no estilo Warn.*/
+  --ez-alert-alert-container--background-color-warn: var(--color--alert-warning-200, #FFF7D5); 
+
+  /*@doc Define a cor da fonte no estilo Critical.*/
+  --ez-alert-alert-container--font-color-critical: var(--color--alert-error, #BD0025);
+  /*@doc Define a cor do ícone no estilo Critical.*/
+  --ez-alert-alert-container--icon-critical: var(--color--alert-error, #BD0025);
+  /*@doc Define a cor do background no estilo Critical.*/
+  --ez-alert-alert-container--background-color-critical: var(--color--alert-error-200, #F7E0E5);
+
+  /*@doc Define a cor da fonte no estilo Success.*/
+  --ez-alert-alert-container--font-color-success: var(--color--alert-success, #157A00);
+  /*@doc Define a cor do ícone no estilo Success.*/
+  --ez-alert-alert-container--icon-success: var(--color--alert-success, #157A00);
+  /*@doc Define a cor do background no estilo Success.*/
+  --ez-alert-alert-container--background-color-success: var(--color--alert-success-200, #E7F6E0); 
+
+  font-size: var(--text--small, 12px);
+  font-family: var(--font-pattern, "Roboto"); 
+  width: 100%;
+  hyphens: auto;
+  display: block;
+}
+
+.alert-container {
+  display: flex;
+  align-items: center;
+  gap: var(--ez-alert-alert-container--gap);
+  padding: var(--ez-alert-alert-container--padding-up-down) var(--ez-alert-alert-container--padding-right-left);
+  border-radius: var(--ez-alert-alert-container--border-radius);
+}
+
+.warn{ 
+  background-color: var(--ez-alert-alert-container--background-color-warn);
+  color: var(--ez-alert-alert-container--font-color-warn);
+}
+
+.critical{
+  background-color: var(--ez-alert-alert-container--background-color-critical);
+  color: var(--ez-alert-alert-container--font-color-critical);
+}
+
+.success{
+  background-color: var(--ez-alert-alert-container--background-color-success);
+  color: var(--ez-alert-alert-container--font-color-success);
+}
+
+ez-icon {
+  --ez-icon--color: inherit;
+}
+
+.alert-container__icon-warn{
+  --ez-icon--color: var(--ez-alert-alert-container--icon-warn);
+}
+
+.alert-container__icon-critical{
+  --ez-icon--color: var(--ez-alert-alert-container--icon-critical);
+}
+
+.alert-container__icon-success{
+  --ez-icon--color: var(--ez-alert-alert-container--icon-success);
+}

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

@@ -0,0 +1,53 @@
+import { Host, h } from '@stencil/core';
+import { ElementIDUtils } from '@sankhyalabs/core';
+const iconMap = {
+  warn: "warning_triangle",
+  critical: "close",
+  success: "check"
+};
+export class EzAlert {
+  constructor() {
+    this.alertType = 'success';
+  }
+  componentWillRender() {
+    this.dataElementId = ElementIDUtils.addIDInfo(this._element);
+  }
+  render() {
+    return (h(Host, null, h("div", { class: `alert-container ${this.alertType}` }, h("div", null, h("ez-icon", Object.assign({}, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: this.dataElementId }, { class: `alert-container__icon-${this.alertType}`, size: "large", iconName: iconMap[this.alertType] }))), h("div", Object.assign({}, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: `${this.dataElementId}_text` }), h("slot", null)))));
+  }
+  static get is() { return "ez-alert"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ez-alert.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ez-alert.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "alertType": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'warn' | 'critical' | 'success'",
+          "resolved": "\"critical\" | \"success\" | \"warn\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define a cor e o \u00EDcone a serem exibidos no componente."
+        },
+        "attribute": "alert-type",
+        "reflect": true,
+        "defaultValue": "'success'"
+      }
+    };
+  }
+  static get elementRef() { return "_element"; }
+}

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

@@ -0,0 +1,3 @@
+:host {
+  
+}

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

@@ -0,0 +1,41 @@
+import { h } from "@stencil/core";
+export class EzApplication {
+  componentWillLoad() {
+    //Initizalize application
+  }
+  componentDidLoad() {
+    this.applicationLoaded.emit(true);
+  }
+  render() {
+    return (h("div", null));
+  }
+  static get is() { return "ez-application"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ez-application.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ez-application.css"]
+    };
+  }
+  static get events() {
+    return [{
+        "method": "applicationLoaded",
+        "name": "applicationLoaded",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Evento disparado quando a aplica\u00E7\u00E3o for carregada."
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }];
+  }
+}

package/dist/collection/components/ez-badge/enum/sizes.js

@@ -0,0 +1,9 @@
+export var Sizes;
+(function (Sizes) {
+  Sizes["EXTRA_LARGE"] = "extra-large";
+  Sizes["LARGE"] = "large";
+  Sizes["MEDIUM"] = "medium";
+  Sizes["SMALL_MEDIUM"] = "small-medium";
+  Sizes["SMALL"] = "small";
+  Sizes["EXTRA_SMALL"] = "extra-small";
+})(Sizes || (Sizes = {}));