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

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

@@ -0,0 +1,241 @@
+import { ElementIDUtils } from "@sankhyalabs/core";
+import { h } from "@stencil/core";
+export class EzButton {
+  constructor() {
+    this.label = undefined;
+    this.enabled = true;
+    this.mode = "regular";
+    this.image = undefined;
+    this.iconName = undefined;
+    this.size = undefined;
+  }
+  /**
+   * Aplica o foco no botão.
+   */
+  async setFocus() {
+    this._button.focus();
+  }
+  /**
+   * Remove o foco do botão.
+   */
+  async setBlur() {
+    this._button.blur();
+  }
+  clickListener(evt) {
+    if (!this.enabled) {
+      evt.stopImmediatePropagation();
+    }
+  }
+  componentDidLoad() {
+    if (this._element) {
+      ElementIDUtils.addIDInfo(this._element);
+    }
+    if (this._button) {
+      const dataInfo = { id: 'embedded' };
+      ElementIDUtils.addIDInfo(this._button, 'button', dataInfo);
+    }
+  }
+  getIconSize(sizeParam = "medium") {
+    const sizeList = ["small", "medium", "large"];
+    const sizeLowerCase = this.size && this.size.toLowerCase();
+    return sizeList.includes(sizeLowerCase) ? sizeLowerCase : sizeParam;
+  }
+  handleSlotChange(ev) {
+    const slot = ev.target;
+    const content = slot.assignedElements()[0];
+    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 {
+        content.style.setProperty("--ez-icon--color", "var(--ez-icon--color)");
+      }
+    }
+  }
+  render() {
+    if (this.mode == "icon") {
+      return (h("button", { class: "btn-icon " + ((this.getIconSize()) ? `btn-icon--${this.getIconSize()}` : ""), type: "button", disabled: !this.enabled, ref: (el) => this._button = el }, h("ez-icon", { class: "icon", href: this.image, iconName: this.iconName, size: this.getIconSize() })));
+    }
+    else if (this.mode == "label-icon") {
+      return (h("div", { class: "label-icon" }, h("button", { class: "btn-icon " + ((this.getIconSize()) ? `btn-icon--${this.getIconSize()}` : ""), type: "button", disabled: !this.enabled, ref: (el) => this._button = el }, h("ez-icon", { class: "icon", href: this.image, iconName: this.iconName, size: this.getIconSize() })), h("label", { title: this.label }, this.label)));
+    }
+    else if (this.mode == "link") {
+      return (h("a", { class: this.getIconSize(), ref: (el) => this._button = el }, h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label, h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } })));
+    }
+    else {
+      return (h("button", { class: this.getIconSize(""), type: "button", disabled: !this.enabled, ref: (el) => this._button = el }, h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label, h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } })));
+    }
+  }
+  static get is() { return "ez-button"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ez-button.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ez-button.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "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 bot\u00E3o."
+        },
+        "attribute": "label",
+        "reflect": true
+      },
+      "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 bot\u00E3o."
+        },
+        "attribute": "enabled",
+        "reflect": true,
+        "defaultValue": "true"
+      },
+      "mode": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"regular\" | \"icon\" | \"link\" | \"label-icon\"",
+          "resolved": "\"icon\" | \"label-icon\" | \"link\" | \"regular\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o modo de uso do bot\u00E3o."
+        },
+        "attribute": "mode",
+        "reflect": true,
+        "defaultValue": "\"regular\""
+      },
+      "image": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o caminho usado nos modos `icon` e `label-icon` para imagens n\u00E3o contempladas na biblioteca de \u00EDcones."
+        },
+        "attribute": "image",
+        "reflect": true
+      },
+      "iconName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o \u00EDcone a ser usado da biblioteca de \u00EDcones: [ez-icons](https://sankhyalabs-storybook.herokuapp.com/themes/default/icons/fonts/index.html)"
+        },
+        "attribute": "icon-name",
+        "reflect": true
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"small\" | \"medium\" | \"large\" | undefined",
+          "resolved": "\"large\" | \"medium\" | \"small\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o tamanho do ez-button."
+        },
+        "attribute": "size",
+        "reflect": true
+      }
+    };
+  }
+  static get methods() {
+    return {
+      "setFocus": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Aplica o foco no bot\u00E3o.",
+          "tags": []
+        }
+      },
+      "setBlur": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Remove o foco do bot\u00E3o.",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "_element"; }
+  static get listeners() {
+    return [{
+        "name": "click",
+        "method": "clickListener",
+        "target": undefined,
+        "capture": true,
+        "passive": false
+      }];
+  }
+}

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

@@ -0,0 +1,318 @@
+:host {
+  /*@doc Define a família da fonte do componente.*/
+  --ez-calendar--font-family: var(--font-pattern, Arial);
+  /*@doc Define a cor dos textos dentro do componente.*/
+  --ez-calendar--color: var(--title--primary, #626e82);
+  /*@doc Define a sombra dos textos dentro do componente.*/
+  --ez-calendar--text-shadow: var(--text-shadow, 0 0 0 #353535, 0 0 1px transparent);
+
+  /* cal__body */
+  /*@doc Define a cor de fundo do corpo do calendário.*/
+  --ez-calendar__body--background-color: var(--background--xlight, #FFF);
+  /*@doc Define a cor de fundo do corpo da hora do calendário.*/
+  --ez-calendar__time--background-color: var(--background--xlight, #FAFAFA);
+  /*@doc Define o espaçamento do corpo do calendário.*/
+  --ez-calendar__body--padding: var(--space--medium, 12px) var(--space--small, 6px) ;
+  /*@doc Define o raio da borda do corpo do calendário.*/
+  --ez-calendar__body--border-radius: var(--border--radius-medium, 12px);
+  /*@doc Define a sombra do corpo do calendário.*/
+  --ez-calendar__body--shadow: var(--shadow, 0px 0px 16px 0px #000);
+
+  /* cal__container*/
+  /*@doc Define a posição do container de calendario nas camadas da página .*/
+  --ez-container--z-index: var(--more-visible, 2);
+
+  /* cal__header */
+  /*@doc Define a espessura da borda inferior do header.*/
+  --ez-calendar__header-line--stroke: 1px;
+  /*@doc Define a cor da borda inferior do header.*/
+  --ez-calendar__header-line--color: var(--color--strokes, #C0C0C0);
+
+  /* nav buttons */
+  /*@doc Define a cor do ícone de navegação.*/
+  --ez-calendar__nav-btn--fill: var(--text--primary, #008561);
+  /*@doc Define a cor do ícone de navegação quando o cursor está sobre ele.*/
+  --ez-calendar__nav-btn--hover--fill: var(--color--primary, #350404);
+  /*@doc Define a largura do ícone de navegação.*/
+  --ez-calendar__nav-btn--width: 10px;
+  /*@doc Define a altura do ícone de navegação.*/
+  --ez-calendar__nav-btn--height: 16px;
+  /*@doc Contém a imagem do ícone de navegação à esquerda.*/
+  --ez-calendar__nav-btn--previous-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="16px" width="10px"><path d="M 9.7808475,13.860393 3.9204526,8.0000004 9.7808475,2.0624965 7.9301965,0.28895552 0.21915255,8.0000004 7.9301965,15.711044 Z"/></svg>');
+  /*@doc Contém a imagem do ícone de navegação à direita.*/
+  --ez-calendar__nav-btn--next-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="16px" width="10px"><path d="M 0.21915251,13.860393 6.0795475,8.0000007 0.21915251,2.0624968 2.0698036,0.28895588 9.7808475,8.0000007 2.0698036,15.711044 Z"/></svg>');
+
+  /* cell */
+  /*@doc Define o espaçamento vertical entre as células.*/
+  --ez-calendar__cell--margin: 0px 1.5px;
+  /*@doc Define a largura das células.*/
+  --ez-calendar__cell--width: var(--space--large, 24px);
+  /*@doc Define o espaçamento horizontal entre as células.*/
+  --ez-calendar__cell--padding: 1.5px 0px;
+  /*@doc Define o raio da borda das células.*/
+  --ez-calendar__cell--border-radius: var(--border--radius-small, 6px);
+  /*@doc Define a cor de fundo das células.*/
+  --ez-calendar__cell--over--background-color: var(--color--primary, #E2F4EF);
+  /*@doc Define a cor de do texto das células.*/
+  --ez-calendar__cell--over--color: var(--color--primary-300, #008561);
+  /*@doc Define a cor do texto para células secundárias (fora do mês selecionado).*/
+  --ez-calendar__cell--outset--color: var(--color--disable-primary, #E5EAF0);
+  /*@doc Define a cor de fundo das células selecionadas.*/
+  --ez-calendar__cell--selected--background-color: var(--color--primary, #008561);
+  /*@doc Define a cor do texto da célula selecionada.*/
+  --ez-calendar__cell--selected--color: var(--color--inverted, #FFF);
+
+  /* btn today */
+  /*@doc Define a cor do texto do botão "Hoje".*/
+  --ez-calendar__btn-today--color: var(--color--primary);
+  /*@doc Define a cor de fundo do botão "Hoje" quando o cursor está sobre ele.*/
+  --ez-calendar__btn-today--hover--background-color: var(--color--primary-300, #E2F4EF);
+  /*@doc Define o raio da borda do botão "Hoje".*/
+  --ez-calendar__btn-today--border-radius: var(--border--radius-small, 6px);
+
+  /***************
+     host style  
+  ***************/
+  /*private*/
+  position: relative;
+  display: flex;
+  user-select: none;
+}
+
+.calendar__container{
+  display: flex;
+
+  /*public*/
+  z-index: var(--more-visible, 2);;
+}
+
+.calendar {
+  /*private*/
+  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);
+  box-shadow: var(--ez-calendar__body--shadow);
+}
+
+.calendar__header {
+  /*private*/
+  display: flex;
+  justify-content: space-between;
+
+  /*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);
+  border-bottom: solid var(--ez-calendar__header-line--stroke) var(--ez-calendar__header-line--color);
+}
+
+.calendar__btn-next, .calendar__btn-previous {
+  /*private*/
+  outline: none;
+  border: none;
+  background-color: unset;
+  cursor: pointer;
+  padding: 0px;
+}
+
+.calendar__btn-next::after, .calendar__btn-previous::after {
+  /*private*/
+  content: '';
+  display: flex;
+
+  /*public*/
+  background-color: var(--ez-calendar__nav-btn--fill);
+  /*parece estranho, mas o bg funciona como fill pq aplicaremos a mascara.*/
+  width: var(--ez-calendar__nav-btn--width);
+  height: var(--ez-calendar__nav-btn--height);
+}
+
+.calendar__btn-previous::after {
+  /*public*/
+  -webkit-mask-image: var(--ez-calendar__nav-btn--previous-image);
+  mask-image: var(--ez-calendar__nav-btn--previous-image);
+}
+
+.calendar__btn-next::after {
+  /*public*/
+  -webkit-mask-image: var(--ez-calendar__nav-btn--next-image);
+  mask-image: var(--ez-calendar__nav-btn--next-image);
+}
+
+.calendar__btn-next:hover::after, .calendar__btn-previous:hover::after {
+  /*public*/
+  background-color: var(--ez-calendar__nav-btn--hover--fill);
+}
+
+.calendar__lbl-month {
+  /*public*/
+  font-weight: var(--text-weight--extra-large, 700);
+  font-size: var(--title--small, 14px);
+  font-family: var(--ez-calendar--font-family);
+  color: var(--ez-calendar--color);
+  text-shadow: var(--ez-calendar--text-shadow);
+}
+
+.calendar__line {
+  /*private*/
+  display: flex;
+  padding: 0px;
+  margin: 0px;
+}
+
+.calendar__cell {
+  /*private*/
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  cursor: pointer;
+
+  /*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);
+  padding: var(--ez-calendar__cell--padding);
+  margin: var(--ez-calendar__cell--margin);
+  min-width: var(--ez-calendar__cell--width);
+  border-radius: var(--ez-calendar__cell--border-radius);
+}
+
+
+.calendar__cell:hover {
+  /*public*/
+  background-color: var(--ez-calendar__cell--over--background-color);
+  color: var(--ez-calendar__cell--over--color);
+}
+
+.calendar__cell--secondary {
+  /*public*/
+  color: var(--ez-calendar__cell--outset--color);
+}
+
+.calendar__cell--unselectable:hover {
+  /* private */
+  background-color: unset;
+  border-radius: unset;
+  cursor: unset;
+
+  /*public*/
+  color: var(--ez-calendar--color);
+}
+
+.calendar__cell--unselectable {
+  /*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);
+}
+
+.calendar__cell--selected, .calendar__cell--selected:hover {
+  /*public*/
+  background-color: var(--ez-calendar__cell--selected--background-color);
+  color: var(--ez-calendar__cell--selected--color);
+}
+
+.calendar__footer {
+  /*private*/
+  display: flex;
+  flex-direction: column;
+}
+
+.calendar__btn-today {
+  /*private*/
+  border: none;
+  background-color: unset;
+  cursor: pointer;
+  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);
+  border-radius: var(--ez-calendar__btn-today--border-radius);
+}
+
+.calendar__btn-today:hover {
+  /*public*/
+  background-color: var(--ez-calendar__btn-today--hover--background-color);
+}
+
+section{
+  display: flex;
+}
+
+.calendar-time {
+  /*private*/
+  margin-left: -10px;
+  display: flex;
+  flex-direction: column;
+  padding: 12px 0px 0px 10px;
+
+  /*public*/
+  /*TODO Criar variavel para color o calendar_time var(--ez-calendar__body-time--background-color)*/
+  background-color: var(--ez-calendar__time--background-color);
+  border-top-right-radius: var(--ez-calendar__body--border-radius);
+  border-bottom-right-radius: var(--ez-calendar__body--border-radius);
+  box-shadow: var(--ez-calendar__body--shadow);
+}
+.calendar__column {
+  height: 136px;
+  padding: 0px;
+  margin: 0px;
+  overflow: auto;
+  scrollbar-width: none;
+}
+
+/* Scrollbar definido como 0 para não exibir o scroll mas permitir a rolagem */
+.calendar__column::-webkit-scrollbar {
+  width: 0px;
+  max-width: 0px;
+  min-width: 0px;
+}
+
+.calendar-time__header {
+  /*private*/
+  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);
+  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);
+  color: var(--ez-calendar--color);
+  text-shadow: var(--ez-calendar--text-shadow);
+}
+
+.separatorTime{
+  color: #A2ABB9;
+  padding: 0px 1px;
+  line-height: 16px;
+  font-size: 17px;
+  font-weight: normal;
+}
+
+.endHidden {
+  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 48px), transparent 100%);
+}
+
+.calendar__column .calendar__cell{
+  margin: 0px;
+  padding: 1.5px 1.5px;
+}