@sankhyalabs/ezui 6.1.0 → 6.2.0

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

@@ -0,0 +1,183 @@
+:host {
+
+  /* dimensions */
+  /*@doc Define a largura do componente.*/
+  --ez-tile-medium--width: 446px;
+  /*@doc Define a altura do componente.*/
+  --ez-tile-medium--height: 257px;
+  /*@doc Define a margem do componente.*/
+  --ez-tile-medium--padding: var(--space--24, 24px);
+  /*@doc Define o raio da borda do componente.*/
+  --ez-tile-medium--border-radius: var(--border--radius-16, 16px);
+
+  /*general colors*/
+  /*@doc Define a cor do fundo.*/
+  --ez-tile-medium--background-color: var(--color--ocean-gray-70, #ffffff);
+  /*@doc Define a cor do title.*/
+  --ez-tile-medium--color: var(--color--ocean-green-900, #003D2D);
+  /*@doc Define a cor do ícone.*/
+  --ez-tile-medium--icon-color: var(--color--ocean-green-400, #42A58A);
+
+  /*typography*/
+  /*@doc Define a família da fonte do title.*/
+  --ez-tile-medium--font-family: var(--font-pattern, Arial);
+
+  /*header*/
+  /*@doc Define o gap entre a seção de imagem e tags.*/
+  --ez-tile-medium--header-gap: var(--space--16, 16px);
+  /*@doc Define a altura da linha do ícone.*/
+  --ez-tile-medium--icon-line-height: var(--line-height--30, 30px);
+
+  /*tag-group*/
+  /*@doc Define o gap entre uma tag e outra.*/
+  --ez-tile-medium--tag-group-gap: var(--space--4, 4px);
+
+  /*button*/
+  /*@doc Define a cor de fundo do botão.*/
+  --ez-tile-medium_button--background-color: var(--color--ocean-green-600, #1A9171);
+  /*@doc Define a cor do label do botão.*/
+  --ez-tile-medium_button--color: var(--color--gray-70, #ffffff);
+  /*@doc Define a cor de fundo quando o cursor está sobre o botão.*/
+  --ez-tile-medium_button--hover--background-color: var(--color--ocean-green-700, #00684C);
+  /*@doc Define a cor do texto e do ícone quando o cursor está sobre o botão.*/
+  --ez-tile-medium_button--hover-color: var(--color--gray-70, #ffffff);
+  /*@doc Define a cor do fundo ao ativar o botão.*/
+  --ez-tile-medium_button--active--background-color: var(--color--ocean-green-500, #1A9171);;
+   /*@doc Define a cor do texto e do ícone ao ativar o botão.*/
+  --ez-tile-medium_button--active-color: var(--color--gray-70, #ffffff);
+
+}
+
+
+
+.tile-medium_container {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-start;
+  overflow: hidden;
+  outline: none;
+  box-shadow: none;
+  width: var(--ez-tile-medium--custom-width, var(--ez-tile-medium--width));
+  height: var(--ez-tile-medium--custom-height, var(--ez-tile-medium--height));
+  border-radius: var(--ez-tile-medium--border-radius);
+  background-color: var(--ez-tile-medium--background-color);
+  color: var(--ez-tile-medium--color);
+
+  box-sizing: border-box;
+  padding: var(--ez-tile-medium--padding);
+}
+
+.tile-medium_header{
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  align-self: stretch;
+  width: 100%;
+  gap: var(--ez-tile-medium--header-gap);
+}
+
+.tile-medium_header-image{
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space--10, 10px);
+  flex: 1 0 0;
+}
+
+.tag_group{
+  display: flex;
+  flex-direction: row;
+  gap: var(--ez-tile-medium--tag-group-gap);
+  flex-wrap: wrap;
+  justify-content: flex-end;
+}
+
+.tile-medium_content{
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: flex-start;
+  gap: var(--space--14, 14px);
+  align-self: stretch;
+}
+
+span {
+  /*public*/
+  font-family: var(--ez-tile-medium--font-family);
+
+  /*private*/
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-align: left;
+  white-space: pre-wrap;
+  align-self: stretch;
+  font-style: normal;
+}
+
+.small_title{
+  color: var(--color--gray-400, #77777A);
+  font-size: var(--font-size--default, 14px);
+  font-weight: var(--font-weight--regular);
+  line-height: var(--line-height--20, 20px);
+
+  -webkit-line-clamp: var(--ez-tile-medium--small-title--maximum-lines, 1);
+  line-clamp: var(--ez-tile-medium--small-title--maximum-lines,1);
+}
+
+.main_title{
+  color: var(--color--ocean-green-900, #003D2D);
+  font-size: var(--font-size--xxlarge, 22px);
+  font-weight: var(--font-weight--bold);
+  line-height: var(--line-height--32, 32px);
+
+  -webkit-line-clamp: var(--ez-tile-medium--title--maximum-lines, 1);
+  line-clamp: var(--ez-tile-medium--title--maximum-lines,1);
+}
+
+.description{
+  color: var(--color--ocean-green-900, #003D2D);
+  font-size: var(--font-size--default, 14px);
+  font-weight: var(--font-weight--regular);
+  line-height: var(--line-height--24, 24px);
+
+  -webkit-line-clamp: var(--ez-tile-medium--description--maximum-lines, 3);
+  line-clamp: var(--ez-tile-medium--description--maximum-lines, 3);
+}
+
+.tile-medium_button{
+  --ez-button--background-color: var(--ez-tile-medium_button--background-color);
+  --ez-button--color: var(--ez-tile-medium_button--color);
+  --ez-button--hover--background-color: var(--ez-tile-medium_button--hover--background-color);
+  --ez-button--hover-color: var(--ez-tile-medium_button--hover-color);
+  --ez-button--active--background-color: var(--ez-tile-medium_button--active--background-color);
+  --ez-button--active-color: var(--ez-tile-medium_button--active-color);
+  
+}
+
+ez-icon {
+  --ez-icon--color: var(--ez-tile-medium--custom-icon-color, var(--ez-tile-medium--icon-color));
+  line-height: var(--ez-tile-medium--icon-line-height);
+}
+
+.green{
+  --ez-tile-medium--background-color: var(--color--ocean-green-90);
+  --ez-tile-medium--icon-color: var(--ez-tile-medium--custom-icon-color, var(--color--ocean-green-500));
+}
+
+.gray{
+  --ez-tile-medium--background-color: var(--color--gray-80);
+  --ez-tile-medium--icon-color: var(--ez-tile-medium--custom-icon-color, var(--color--ocean-green-400));
+}
+
+.red{
+  --ez-tile-medium--background-color: var(--color--red-100);
+  --ez-tile-medium--icon-color: var(--ez-tile-medium--custom-icon-color, var(--color--red-300));
+} 
+
+.yellow{
+  --ez-tile-medium--background-color: var(--color--yellow-100);
+  --ez-tile-medium--icon-color: var(--ez-tile-medium--custom-icon-color, var(--color--yellow-400));
+} 

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

@@ -0,0 +1,353 @@
+import { ElementIDUtils } from "@sankhyalabs/core";
+import { h, Host } from "@stencil/core";
+export class EzTileMedium {
+  constructor() {
+    this.color = "default";
+    this.iconName = undefined;
+    this.iconColor = undefined;
+    this.smallTitleText = undefined;
+    this.smallTitleMaximumLines = undefined;
+    this.titleText = undefined;
+    this.titleMaximumLines = undefined;
+    this.descriptionText = undefined;
+    this.descriptionMaximumLines = undefined;
+    this.height = undefined;
+    this.width = undefined;
+    this.avatarProps = undefined;
+    this.buttonProps = undefined;
+    this.tags = undefined;
+  }
+  /**
+   * Aplica o foco no botão.
+   */
+  async setButtonFocus() {
+    var _a;
+    if (!this._button)
+      return;
+    (_a = this._button) === null || _a === void 0 ? void 0 : _a.setFocus();
+  }
+  /**
+   * Remove o foco do botão.
+   */
+  async setButtonBlur() {
+    var _a;
+    if (!this._button)
+      return;
+    (_a = this._button) === null || _a === void 0 ? void 0 : _a.setBlur();
+  }
+  renderBadges() {
+    if (!this.tags || this.tags.length === 0)
+      return null;
+    return this.tags.slice(0, 3).map((tag, index) => (h("ez-badge", { id: `tag-${tag.label}`, key: `tag-${index}`, label: tag.label, size: 'medium', style: { "--ez-badge--background-color": `var(${tag.color}, #008561)` } })));
+  }
+  setCustomCSSProperties() {
+    var _a, _b;
+    const colors = (_b = (_a = this.buttonProps) === null || _a === void 0 ? void 0 : _a.colors) !== null && _b !== void 0 ? _b : {};
+    const { background, backgroundHover, backgroundActive, text, textHover, textActive } = colors;
+    const customCSSVars = Object.assign({}, this.height && { '--ez-tile-medium--custom-height': `${this.height}` }, this.width && { '--ez-tile-medium--custom-width': `${this.width}` }, this.smallTitleMaximumLines && { '--ez-tile-medium--small-title--maximum-lines': `${this.smallTitleMaximumLines}` }, this.titleMaximumLines && { '--ez-tile-medium--title--maximum-lines': `${this.titleMaximumLines}` }, this.descriptionMaximumLines && { '--ez-tile-medium--description--maximum-lines': `${this.descriptionMaximumLines}` }, this.iconColor && { '--ez-tile-medium--custom-icon-color': `var(${this.iconColor})` }, (background && { "--ez-tile-medium_button--background-color": `var(${background}, #008561)` }), (backgroundHover && { "--ez-tile-medium_button--hover--background-color": `var(${backgroundHover}, #00684C)` }), (backgroundActive && { "--ez-tile-medium_button--active--background-color": `var(${backgroundActive}, #1A9171)` }), (text && { "--ez-tile-medium_button--color": `var(${text}, #ffffff)` }), (textHover && { "--ez-tile-medium_button--hover-color": `var(${textHover}, #ffffff)` }), (textActive && { "--ez-tile-medium_button--active-color": `var(${textActive}, #ffffff)` }));
+    return customCSSVars;
+  }
+  componentDidLoad() {
+    this.setCustomCSSProperties();
+    if (this._element) {
+      ElementIDUtils.addIDInfo(this._element);
+    }
+    if (this._button) {
+      const dataInfo = { id: 'embedded' };
+      ElementIDUtils.addIDInfo(this._button, 'tile-medium_button', dataInfo);
+    }
+  }
+  render() {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    return (h(Host, { style: this.setCustomCSSProperties() }, h("div", { class: `tile-medium_container ${this.color}` }, h("div", { class: `tile-medium_header` }, h("div", { class: "tile-medium_header-image" }, this.avatarProps
+      ? h("ez-avatar", { size: "60", name: (_a = this.avatarProps) === null || _a === void 0 ? void 0 : _a.name, imageSrc: (_b = this.avatarProps) === null || _b === void 0 ? void 0 : _b.imageSrc, shape: ((_c = this.avatarProps) === null || _c === void 0 ? void 0 : _c.shape) || "square" })
+      : this.iconName && h("ez-icon", { size: "x-large", class: "icon", iconName: this.iconName })), h("div", { class: `tag_group` }, this.renderBadges())), h("div", { class: "tile-medium_content" }, h("div", null, this.smallTitleText && h("span", { class: "small_title", title: this.smallTitleText }, this.smallTitleText), this.titleText && h("span", { class: "main_title", title: this.titleText }, this.titleText), this.descriptionText && h("span", { class: "description", title: this.descriptionText }, this.descriptionText)), this.buttonProps &&
+      h("ez-button", { ref: el => this._button = el, class: "tile-medium_button", label: ((_d = this.buttonProps) === null || _d === void 0 ? void 0 : _d.label) || undefined, enabled: (_f = (_e = this.buttonProps) === null || _e === void 0 ? void 0 : _e.enabled) !== null && _f !== void 0 ? _f : true, mode: (_g = this.buttonProps) === null || _g === void 0 ? void 0 : _g.mode, iconName: (_h = this.buttonProps) === null || _h === void 0 ? void 0 : _h.iconName, size: (_j = this.buttonProps) === null || _j === void 0 ? void 0 : _j.size, onClick: (_k = this.buttonProps) === null || _k === void 0 ? void 0 : _k.onClick })))));
+  }
+  static get is() { return "ez-tile-medium"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ez-tile-medium.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ez-tile-medium.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "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": false,
+        "defaultValue": "\"default\""
+      },
+      "iconName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "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": false
+      },
+      "iconColor": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Define uma cor customizada para o \u00EDcone, dentro da paleta de cores do Design System.\nExemplo: \"--color--yellow-600\""
+        },
+        "attribute": "icon-color",
+        "reflect": false
+      },
+      "smallTitleText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Texto a ser apresentado como um t\u00EDtulo pequeno do componente."
+        },
+        "attribute": "small-title-text",
+        "reflect": false
+      },
+      "smallTitleMaximumLines": {
+        "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 no t\u00EDtulo pequeno.\nQuando a propriedade n\u00E3o \u00E9 passada, limita a 1 linha."
+        },
+        "attribute": "small-title-maximum-lines",
+        "reflect": false
+      },
+      "titleText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Texto a ser apresentado como t\u00EDtulo do componente."
+        },
+        "attribute": "title-text",
+        "reflect": false
+      },
+      "titleMaximumLines": {
+        "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 no t\u00EDtulo.\nQuando a propriedade n\u00E3o \u00E9 passada, limita a 1 linha."
+        },
+        "attribute": "title-maximum-lines",
+        "reflect": false
+      },
+      "descriptionText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Texto a ser apresentado como descri\u00E7\u00E3o do componente"
+        },
+        "attribute": "description-text",
+        "reflect": false
+      },
+      "descriptionMaximumLines": {
+        "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 na descri\u00E7\u00E3o.\nQuando a propriedade n\u00E3o \u00E9 passada, limita a 3 linhas."
+        },
+        "attribute": "description-maximum-lines",
+        "reflect": false
+      },
+      "height": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Define a altura do componente, sobrescrevendo o padr\u00E3o de 257px."
+        },
+        "attribute": "height",
+        "reflect": false
+      },
+      "width": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Define a largura do componente, sobrescrevendo o padr\u00E3o de 446px."
+        },
+        "attribute": "width",
+        "reflect": false
+      },
+      "avatarProps": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "{\n    name?: string;\n    imageSrc?: string;\n    shape?: 'circle' | 'square';\n  }",
+          "resolved": "{ name?: string; imageSrc?: string; shape?: \"circle\" | \"square\"; }",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Propriedade utilizada para configurar o avatar, se definida substitui o \u00EDcone por um ez-avatar"
+        }
+      },
+      "buttonProps": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "{\n    label: string;\n    enabled?: boolean;\n    mode?: 'regular' | 'icon' | 'link' | 'label-icon';\n    iconName?: string;\n    size?: 'x-small' | 'small' | 'medium' | 'large';\n    onClick: () => void;\n    colors?:{\n      background?: string;\n      backgroundHover?: string;\n      backgroundActive?: string;\n      text?: string;\n      textHover?: string;\n      textActive?: string;\n    }\n  }",
+          "resolved": "{ label: string; enabled?: boolean; mode?: \"link\" | \"regular\" | \"icon\" | \"label-icon\"; iconName?: string; size?: \"small\" | \"medium\" | \"large\" | \"x-small\"; onClick: () => void; colors?: { background?: string; backgroundHover?: string; backgroundActive?: string; text?: string; textHover?: string; textActive?: string; }; }",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Define as props que ser\u00E3o passadas para o bot\u00E3o, caso o objeto seja passado, o bot\u00E3o ser\u00E1 renderizado."
+        }
+      },
+      "tags": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "{\n    label: string;\n    color?: string;\n  }[]",
+          "resolved": "{ label: string; color?: string; }[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Define as props que ser\u00E3o passadas para as tags, caso um objeto seja passado, a(s) tag(s) ser\u00E1 renderizada(s), se limitando a 3 tags."
+        }
+      }
+    };
+  }
+  static get methods() {
+    return {
+      "setButtonFocus": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Aplica o foco no bot\u00E3o.",
+          "tags": []
+        }
+      },
+      "setButtonBlur": {
+        "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"; }
+}

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

@@ -0,0 +1,51 @@
+:host {
+
+  /* dimensions */
+  /*@doc Define a largura do componente.*/
+  --ez-underface--width: 693px;
+  /*@doc Define a altura do componente.*/
+  --ez-underface--height: 247px;
+  /*@doc Define o padding do componente.*/
+  --ez-underface--padding: var(--space--24, 24px);
+  /*@doc Define o raio da borda do componente.*/
+  --ez-underface--border-radius: var(--border--radius-26, 26px);
+}
+
+
+
+div {
+  /*public*/
+  width: var(--ez-underface--custom-width, var(--ez-underface--width));
+  height: var(--ez-underface--custom-height, var(--ez-underface--height));
+  border-radius: var(--ez-underface--border-radius);
+  padding: var(--ez-underface--padding);
+
+  /*private*/
+  display: block;
+  overflow: hidden;
+  outline: none;
+  box-shadow: none;
+  border: none;
+  box-sizing: border-box;
+  background-color: var(--ez-underface--custom-background-color, var(--color--petroleum-700, #222D42));
+}
+
+.light-green{
+  background-color: var(--ez-underface--custom-background-color, var(--color--ocean-green-90));
+}
+
+.green{
+  background-color: var(--ez-underface--custom-background-color, var(--color--green-600));
+}
+
+.light-gray{
+  background-color: var(--ez-underface--custom-background-color, var(--color--gray-80));
+}
+
+.dark-petroleum{
+  background-color: var(--ez-underface--custom-background-color, var(--color--petroleum-900));
+}
+
+.ocean-green{
+  background-color: var(--ez-underface--custom-background-color, var(--color--ocean-green-600));
+}