@sankhyalabs/ezui 6.1.0 → 6.2.0

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

@@ -0,0 +1,105 @@
+:host {
+    /*background*/
+    /*@doc Define o padding horizontal do componentes.*/
+    --ez-tag--padding-x: var(--space--8, 8px);
+    /*@doc Define o padding vertical do componente.*/
+    --ez-tag--padding-y: var(--space--4, 4px);
+    /*@doc Define a largura minima do componente.*/
+    --ez-tag--min-width: var(--space--6, 6px);
+    /*@doc Define a largura minima do componente.*/
+    --ez-tag--min-height: var(--space--14, 14px);
+    /*@doc Define o raio da borda do componente.*/
+    --ez-tag--border-radius: var(--border--radius-24, 24px);
+    /*@doc Define a cor de fundo.*/
+    --ez-tag--background-color: var(--color--ocean-green-600, #008561);
+
+    /*label*/
+    /*@doc Define o peso da fonte do label.*/
+    --ez-tag_label--font-weight: var(--font-weight--regular, 400);
+    /*@doc Define o tamanho da fonte do label.*/
+    --ez-tag_label--font-size: var(--font-size--default, 14px);
+    /*@doc Define a cor da fonte do label.*/
+    --ez-tag_label--color: var(--color--gray-70, #FFFFFF);
+}
+
+.tag {
+    /*public*/
+    background-color: var(--ez-tag--custom-background-color, var(--ez-tag--background-color));
+    padding: var(--ez-tag--padding-y) var(--ez-tag--padding-x);
+    border-radius: var(--ez-tag--border-radius);
+    min-width: var(--ez-tag--min-width);
+    min-height: var(--ez-tag--min-height);
+
+    /*private*/
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+}
+
+label {
+    /*public*/
+    font-weight: var(--ez-tag_label--font-weight);
+    font-size: var(--ez-tag_label--font-size);
+    color: var(--ez-tag_label--custom-color, var(--ez-tag_label--color));
+
+    /*private*/
+    font-family: var(--font--pattern, Arial);
+    line-height: var(--ez-tag_label--font-size);
+    text-align: center;
+    line-height: normal;
+}
+
+.light-ocean-green {
+    --ez-tag--background-color: var(--ez-tag--custom-background-color, var(--color--ocean-green-100));
+    --ez-tag_label--color: var(--ez-tag_label--custom-color, var(--color--ocean-green-600));
+}
+
+.green {
+    --ez-tag--background-color: var(--ez-tag--custom-background-color, var(--color--green-600));
+    --ez-tag_label--color: var(--ez-tag_label--custom-color, var(--color--gray-70));
+}
+
+.light-green {
+    --ez-tag--background-color: var(--ez-tag--custom-background-color, var(--color--green-200));
+    --ez-tag_label--color: var(--ez-tag_label--custom-color, var(--color--green-600));
+}
+
+.yellow {
+    --ez-tag--background-color: var(--ez-tag--custom-background-color, var(--color--yellow-600));
+    --ez-tag_label--color: var(--ez-tag_label--custom-color, var(--color--yellow-900));
+}
+
+.light-yellow {
+    --ez-tag--background-color: var(--ez-tag--custom-background-color, var(--color--yellow-200));
+    --ez-tag_label--color: var(--ez-tag_label--custom-color, var(--color--yellow-800));
+}
+
+.red {
+    --ez-tag--background-color: var(--ez-tag--custom-background-color, var(--color--red-600));
+    --ez-tag_label--color: var(--ez-tag_label--custom-color, var(--color--gray-70));
+}
+
+.light-red {
+    --ez-tag--background-color: var(--ez-tag--custom-background-color, var(--color--red-200));
+    --ez-tag_label--color: var(--ez-tag_label--custom-color, var(--color--red-600));
+}
+
+.gray {
+    --ez-tag--background-color: var(--ez-tag--custom-background-color, var(--color--gray-500));
+    --ez-tag_label--color: var(--ez-tag_label--custom-color, var(--color--gray-100));
+}
+
+.light-gray {
+    --ez-tag--background-color: var(--ez-tag--custom-background-color, var(--color--gray-100));
+    --ez-tag_label--color: var(--ez-tag_label--custom-color, var(--color--gray-400));
+}
+
+.petroleum {
+    --ez-tag--background-color: var(--ez-tag--custom-background-color, var(--color--petroleum-600));
+    --ez-tag_label--color: var(--ez-tag_label--custom-color, var(--color--petroleum-200));
+}
+
+.light-petroleum {
+    --ez-tag--background-color: var(--ez-tag--custom-background-color, var(--color--petroleum-100));
+    --ez-tag_label--color: var(--ez-tag_label--custom-color, var(--color--petroleum-400));
+}

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

@@ -0,0 +1,112 @@
+import { ElementIDUtils } from "@sankhyalabs/core";
+import { h, Host } from "@stencil/core";
+export class EzTag {
+  constructor() {
+    this.label = undefined;
+    this.color = "ocean-green";
+    this.customBackgroundColor = undefined;
+    this.customLabelColor = undefined;
+  }
+  componentDidLoad() {
+    if (this._element) {
+      ElementIDUtils.addIDInfo(this._element);
+    }
+    if (this._tag) {
+      const dataInfo = { id: 'embedded' };
+      ElementIDUtils.addIDInfo(this._tag, 'EzTag', dataInfo);
+    }
+  }
+  validateLabel() {
+    return (this.label) && this.label.trim() !== "";
+  }
+  render() {
+    const customStyleVars = Object.assign({}, this.customBackgroundColor && { '--ez-tag--custom-background-color': `var(${this.customBackgroundColor})` }, this.customLabelColor && { '--ez-tag_label--custom-color': `var(${this.customLabelColor})` });
+    return (h(Host, { style: customStyleVars }, h("div", { ref: el => { this._tag = el; }, class: `tag ${this.color || ''}` }, this.validateLabel() && h("label", { title: this.label }, this.label))));
+  }
+  static get is() { return "ez-tag"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ez-tag.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ez-tag.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o conte\u00FAdo textual ou num\u00E9rico do componente."
+        },
+        "attribute": "label",
+        "reflect": true
+      },
+      "color": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"ocean-green\" | \"light-ocean-green\" | \"green\" | \"light-green\" | \"yellow\" | \"light-yellow\" | \"red\" | \"light-red\" | \"gray\" | \"light-gray\" | \"petroleum\" | \"light-petroleum\"",
+          "resolved": "\"gray\" | \"green\" | \"light-gray\" | \"light-green\" | \"light-ocean-green\" | \"light-petroleum\" | \"light-red\" | \"light-yellow\" | \"ocean-green\" | \"petroleum\" | \"red\" | \"yellow\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Define a cor de fundo do componente."
+        },
+        "attribute": "color",
+        "reflect": true,
+        "defaultValue": "\"ocean-green\""
+      },
+      "customBackgroundColor": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Define uma cor de fundo customizada, dentro da paleta de cores do Design System para o componente."
+        },
+        "attribute": "custom-background-color",
+        "reflect": false
+      },
+      "customLabelColor": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Define uma cor de texto customizada, dentro da paleta de cores do Design System para o componente."
+        },
+        "attribute": "custom-label-color",
+        "reflect": false
+      }
+    };
+  }
+  static get elementRef() { return "_element"; }
+}

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

@@ -0,0 +1,151 @@
+:host {
+
+  /* dimensions */
+  /*@doc Define a largura do componente.*/
+  --ez-tile--width: 120px;
+  /*@doc Define a altura do componente.*/
+  --ez-tile--height: 80px;
+  /*@doc Define a margem do componente.*/
+  --ez-tile--padding: var(--space--12, 12px);
+  /*@doc Define o espaçamento entre o ícone e o title.*/
+  --ez-tile--icon--margin-bottom: var(--space--8);
+  /*@doc Define o raio da borda do componente.*/
+  --ez-tile--border-radius: var(--border--radius-16, 16px);
+
+  /*general colors*/
+  /*@doc Define a cor de fundo do componente.*/
+  --ez-tile--background-color: var(--color--gray-70, #ffffff);
+  /*@doc Define a cor do title.*/
+  --ez-tile--color: var(--color--ocean-green-900, #003D2D);
+  /*@doc Define a cor do ícone.*/
+  --ez-tile--icon-color: var(--color--ocean-green-400, #42A58A);
+
+  /*action colors*/
+  /*@doc Define a cor de fundo do componente no hover.*/
+  --ez-tile--hover-background-color: var(--color--gray-80, #F9F9F9);
+  /*@doc Define a cor do title no hover.*/
+  --ez-tile--hover-color: var(--color--ocean-green-900, #003D2D);
+  /*@doc Define a cor do ícone no hover.*/
+  --ez-tile--hover-icon-color: var(--color--ocean-green-400, #42A58A);
+  /*@doc Define a cor do ícone no hover.*/
+  --ez-tile--focus-visible-border: 2px solid var(--color--petroleum-400, #626D80);
+
+  /*typography*/
+  /*@doc Define a família da fonte do title.*/
+  --ez-tile--font-family: var(--font-pattern, Arial);
+  /*@doc Define o peso da fonte do title.*/
+  --ez-tile--font-weight: var(--font-weight--regular, 400);
+  /*@doc Define o tamanho do title.*/
+  --ez-tile--font-size: var(--font-size--default, 14px);
+  /*@doc Define a altura da linha do title.*/
+  --ez-tile--title-line-height: var(--line-height--20, 20px);
+  /*@doc Define a altura da linha do ícone.*/
+  --ez-tile--icon-line-height: var(--line-height--24, 24px);
+}
+
+
+
+button {
+  display: flex;
+  flex-wrap: wrap;
+  align-content: space-between;
+  overflow: hidden;
+  outline: none;
+  box-shadow: none;
+  width: var(--ez-tile--custom-width, var(--ez-tile--width));
+  height: var(--ez-tile--custom-height, var(--ez-tile--height));
+  border-radius: var(--ez-tile--border-radius);
+  background-color: var(--ez-tile--background-color);
+  color: var(--ez-tile--color);
+
+  box-sizing: border-box;
+  padding: var(--ez-tile--padding);
+  border: 2px solid var(--ez-tile--background-color);
+}
+button:focus-visible {
+  border: var(--ez-tile--focus-visible-border);
+}
+
+.medium {
+  --ez-tile--width: var(--ez-tile--custom-width, 120px);
+  --ez-tile--height: var(--ez-tile--custom-height, 170px);
+}
+
+.isInteractive:hover,
+.isInteractive:focus {
+  --ez-icon--color: var(--ez-tile--hover-icon-color);
+  --ez-tile--background-color: var(--ez-tile--hover-background-color);
+  --ez-tile--color: var(--ez-tile--hover-color);
+  cursor: pointer;
+}
+
+
+span {
+  /*public*/
+  -webkit-line-clamp: var(--ez-tile--custom-maximum-lines, 1);
+  line-clamp: var(--ez-tile--custom-maximum-lines,1);
+  font-family: var(--ez-tile--font-family);
+  font-weight: var(--ez-tile--font-weight);
+  font-size: var(--ez-tile--font-size);
+  line-height: var(--ez-tile--title-line-height);
+
+  /*private*/
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-align: left;
+  white-space: pre-wrap;
+}
+
+ez-icon {
+  --ez-icon--color: var(--ez-tile--icon-color);
+  margin-bottom: var(--ez-tile--icon--margin-bottom);
+  line-height: var(--ez-tile--icon-line-height);
+}
+.isInteractive:hover,
+.isInteractive:focus {
+  outline: none;
+}
+
+.green{
+  --ez-tile--background-color: var(--color--ocean-green-90);
+  --ez-tile--icon-color: var(--color--ocean-green-500);
+}
+.isInteractive.green:hover,
+.isInteractive.green:focus {
+  --ez-tile--hover-background-color: var(--color--ocean-green-100);
+  --ez-tile--icon-color: var(--color--ocean-green-500);
+  outline: none;
+}
+
+.gray{
+  --ez-tile--background-color: var(--color--gray-80);
+  --ez-tile--icon-color: var(--color--ocean-green-400);
+}
+.isInteractive.gray:hover,
+.isInteractive.gray:focus {
+  --ez-tile--hover-background-color: var(--color--gray-90);
+  --ez-tile--hover-icon-color: var(--color--ocean-green-400);
+}
+
+.red{
+  --ez-tile--background-color: var(--color--red-100);
+  --ez-tile--icon-color: var(--color--red-300);
+} 
+.isInteractive.red:hover,
+.isInteractive.red:focus {
+  --ez-tile--hover-background-color: var(--color--red-200);
+  --ez-tile--hover-icon-color: var(--color--red-300);
+}
+
+.yellow{
+  --ez-tile--background-color: var(--color--yellow-100);
+  --ez-tile--icon-color: var(--color--yellow-400);
+} 
+.isInteractive.yellow:hover,
+.isInteractive.yellow:focus {
+  --ez-tile--hover-background-color: var(--color--yellow-200);
+  --ez-tile--hover-icon-color: var(--color--yellow-400);
+}

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

@@ -0,0 +1,269 @@
+import { ElementIDUtils } from "@sankhyalabs/core";
+import { h, Host } from "@stencil/core";
+export class EzTile {
+  constructor() {
+    this.text = undefined;
+    this.size = "small";
+    this.height = undefined;
+    this.width = undefined;
+    this.color = "default";
+    this.iconName = "home";
+    this.maximumLines = undefined;
+    this.isInteractive = false;
+  }
+  /**
+   * Aplica o foco no componente.
+   */
+  async setFocus() {
+    this._container.focus();
+  }
+  /**
+   * Remove o foco do componente.
+   */
+  async setBlur() {
+    this._container.blur();
+  }
+  clickListener(evt) {
+    if (!this.isInteractive) {
+      evt.stopImmediatePropagation();
+    }
+  }
+  handleClick() {
+    if (this.isInteractive) {
+      this.tileClick.emit();
+    }
+  }
+  componentDidRender() {
+    if (this._element) {
+      ElementIDUtils.addIDInfo(this._element);
+    }
+    if (this._container) {
+      const dataInfo = { id: 'embedded' };
+      ElementIDUtils.addIDInfo(this._container, 'tile-button', dataInfo);
+    }
+  }
+  render() {
+    const customStyleVars = Object.assign(Object.assign(Object.assign({}, (this.height ? { '--ez-tile--custom-height': `${this.height}px` } : {})), (this.width ? { '--ez-tile--custom-width': `${this.width}px` } : {})), (this.maximumLines ? { '--ez-tile--custom-maximum-lines': `${this.maximumLines}` } : {}));
+    return (h(Host, { style: customStyleVars }, h("button", { ref: element => this._container = element, class: `${this.color} ${this.size} ${this.isInteractive ? "isInteractive" : ""}`, onClick: () => this.handleClick() }, h("ez-icon", { class: "icon", iconName: this.iconName, size: "large" }), h("span", { title: this.text }, this.text))));
+  }
+  static get is() { return "ez-tile"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ez-tile.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ez-tile.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "text": {
+        "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": "text",
+        "reflect": true
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"small\" | \"medium\"",
+          "resolved": "\"medium\" | \"small\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define qual o tamanho do componente.\n- `\"default\"`: 120x80px\n- `\"medium\"`: 120x170px"
+        },
+        "attribute": "size",
+        "reflect": true,
+        "defaultValue": "\"small\""
+      },
+      "height": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Define o tamanho do componente, sobrescrevendo o padr\u00E3o da propriedade size."
+        },
+        "attribute": "height",
+        "reflect": true
+      },
+      "width": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Define a largura do componente, sobrescrevendo o padr\u00E3o da propriedade size."
+        },
+        "attribute": "width",
+        "reflect": true
+      },
+      "color": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"default\" | \"green\" | \"gray\" | \"red\" | \"yellow\"",
+          "resolved": "\"default\" | \"gray\" | \"green\" | \"red\" | \"yellow\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define a cor tema do componente."
+        },
+        "attribute": "color",
+        "reflect": true,
+        "defaultValue": "\"default\""
+      },
+      "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://gilded-nasturtium-6b64dd.netlify.app/docs/components/layout-doc/icons/)"
+        },
+        "attribute": "icon-name",
+        "reflect": true,
+        "defaultValue": "\"home\""
+      },
+      "maximumLines": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Define a quantidade m\u00E1xima de linhas de texto a serem apresentadas.\nQuando a propriedade n\u00E3o \u00E9 passada, limita a 1 linha."
+        },
+        "attribute": "maximum-lines",
+        "reflect": true
+      },
+      "isInteractive": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define se o componente ser\u00E1 interativo. Caso contr\u00E1rio, ser\u00E1 est\u00E1tico. \nSe true, permite permite clique.\nSe false, n\u00E3o permite clique"
+        },
+        "attribute": "is-interactive",
+        "reflect": true,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "tileClick",
+        "name": "tileClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido quando o elemento principal \u00E9 clicado"
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "setFocus": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Aplica o foco no componente.",
+          "tags": []
+        }
+      },
+      "setBlur": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Remove o foco do componente.",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "_element"; }
+  static get listeners() {
+    return [{
+        "name": "click",
+        "method": "clickListener",
+        "target": undefined,
+        "capture": true,
+        "passive": false
+      }];
+  }
+}