@sankhyalabs/ezui 6.4.4 → 6.5.0-dev.10

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

@@ -9,28 +9,17 @@
   /*@doc Define a cor do texto do container do popup.*/
   --ez-popup__container--color: var(--title--primary, #2b3a54);
   /*@doc Define o espaçamento do container do popup.*/
-  --ez-popup__container--padding: var(--space--md, 20px);
-
-  /* Popup Header */
-  /*@doc Define o espaçamento inferior do cabeçalho do popup.*/
-  --ez-popup__header--padding-bottom: var(--space--medium, 12px);
+  --ez-popup__container--padding: var(--space--24, 24px);
 
   /* Title */
   /*@doc Define a família da fonte do título do popup.*/
-  --ez-popup__title--font-family: var(--font-pattern, "Roboto");
+  --ez-popup__title--font-family: var(--font--pattern, "Roboto");
   /*@doc Define o tamanho da fonte do título do popup.*/
-  --ez-popup__title--font-size: var(--title--large, 20px);
+  --ez-popup__title--font-size: var(--font-size--xxlarge, 22px);
   /*@doc Define a cor da fonte do título do popup.*/
-  --ez-popup__title--color: var(--title--primary, #2b3a54);
+  --ez-popup__title--color: var(--title--primary, #00281D);
   /*@doc Define o peso da fonte do título do popup.*/
-  --ez-popup__title--font-weight: var(--text-weight--large, 600);
-
-  /* Buttons */
-  /* @doc Define a cor do ícone do botão de fechamento. */
-  --ez-popup__btn__close--icon-color: var(--title--primary, #2b3a54);
-  /* @doc Contém o ícone do botão de fechamento. */
-  --ez-popup__btn__close--icon: url('data:image/svg+xml;utf8,<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><path d="M 8.2421753,6.9944578 13.743748,1.4930784 C 13.907781,1.3290628 14,1.1065946 14,0.87462511 14,0.64266712 13.907782,0.42019873 13.743748,0.25617155 13.579712,0.09215597 13.35727,6.48e-8 13.125266,6.48e-8 12.89338,6.48e-8 12.670821,0.09215634 12.506787,0.25617155 L 7.005215,5.7575508 1.5035972,0.25617155 C 1.3395631,0.09215597 1.1170968,6.48e-8 0.88511716,6.48e-8 0.65314917,6.48e-8 0.4306712,0.09215597 0.26663695,0.25617155 0.10260271,0.42019873 0.01045441,0.64266712 0.01045441,0.87462511 c 0,0.23196949 0.0921483,0.45443769 0.25618254,0.61845329 L 5.7682546,6.9944578 0.26663695,12.497027 c -0.0834745,0.08067 -0.15003245,0.1772 -0.19581514,0.283871 C 0.02505077,12.887561 9.831648e-4,13.002399 2.950369e-5,13.118395 -9.2415746e-4,13.234504 0.02125019,13.349689 0.06527245,13.457057 c 0.04401053,0.107479 0.10898307,0.205064 0.1911168,0.287137 0.0821454,0.08208 0.17979645,0.146888 0.28727561,0.190839 0.10747906,0.04395 0.22262954,0.06598 0.33872417,0.06493 0.116095,-10e-4 0.23082547,-0.0253 0.33747687,-0.07112 0.1066637,-0.04593 0.2031133,-0.112615 0.2837313,-0.196086 L 7.005215,8.2313646 12.506787,13.732768 c 0.164034,0.164027 0.386593,0.256125 0.618479,0.256125 0.232004,0 0.454446,-0.09209 0.618482,-0.256125 C 13.907781,13.568741 14,13.346308 14,13.114315 14,12.882323 13.90779,12.659888 13.743748,12.495861 Z"/></svg>');
-
+  --ez-popup__title--font-weight: var(--font-weight--regular, 400);
 }
 
 .overlay {
@@ -48,20 +37,12 @@
   background: rgba(0, 4, 12, 0.4);
 }
 
-.popup {
-  display: flex;
-  height: 100%;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-}
-
 .popup__container {
   width: 100%;
   max-height: 90%;
   height: 100%;
   display: flex;
-  flex-wrap: wrap;
+  flex-direction: column;
   overflow: hidden;
   outline: none;
   background: #FFFF;
@@ -70,6 +51,10 @@
   box-shadow: 0px 0px 16px rgba(0, 38, 111, 0.122);
   box-sizing: border-box;
   padding: var(--ez-popup__container--padding);
+  margin: 0;
+  border: none;
+  position: unset;
+  gap: var(--space--16, 16px);
 }
 
 .popup__container--auto {
@@ -89,16 +74,18 @@
 .popup__expandable-content {
   box-sizing: border-box;
   width: 100%;
-  height: calc(100% - 44px);
+  flex: 1;
+  font-family: var(--font--pattern, "Roboto");
+  font-size: var(--font-size--default, 14px);
+  color: var(--title--primary, #00281D);
+  font-weight: var(--font-weight--regular, 400);
+  line-height: var(--line-height--24, 24px);
 }
 
 .popup__header {
   width: 100%;
   display: flex;
-}
-
-.popup__header--padding{
-  padding-bottom: var(--ez-popup__header--padding-bottom);
+  align-items: center;
 }
 
 .popup__title {
@@ -109,7 +96,7 @@
   font-size: var(--ez-popup__title--font-size);
   font-weight: var(--ez-popup__title--font-weight);
   color: var(--ez-popup__title--color);
-  line-height: 1.3;
+  line-height: var(--line-height--32, 32px);
 }
 
 .btn-close {
@@ -123,18 +110,15 @@
   cursor: pointer;
 }
 
-.btn-close::after {
-  content: '';
-  display: flex;
-  background-color: var(--ez-popup__btn__close--icon-color);
-  width: 14px;
-  height: 14px;
-  -webkit-mask-image: var(--ez-popup__btn__close--icon);
-  mask-image: var(--ez-popup__btn__close--icon);
+.btn-close--solo {
+  width: 100%;
 }
 
-.btn-close--solo {
+.popup__footer {
+  display: flex;
   width: 100%;
+  flex-direction: row-reverse;
+  gap: var(--space--8, 8px);
 }
 
 /* //////// GRID SYSTEM //////// */

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

@@ -1,30 +1,25 @@
-import { Host, h, Fragment } from "@stencil/core";
 import { FloatingManager, KeyboardManager } from '@sankhyalabs/core';
+import { h, Host } from "@stencil/core";
+import initI18n from '../../utils/i18n';
 export class EzPopup {
   constructor() {
-    this._sizeClasses = {
-      "x-small": "col--sd-3 ez-popup__size-limit--x-small",
-      "small": "col--sd-5",
-      "medium": "col--sd-6",
-      "large": "col--sd-9",
-      "x-large": "col--sd-11",
-      "default": "ez-popup__size-limit--x-small",
-      "auto": "",
-    };
     this.size = "medium";
     this.opened = false;
     this.useHeader = true;
     this.heightMode = "full";
     this.ezTitle = undefined;
     this.enabledScroll = false;
+    this.autoClose = true;
+    this.footerButtons = [];
   }
   observeConfig() {
     this.manageOverflow();
   }
+  async componentWillLoad() {
+    this.i18n = await initI18n();
+  }
   componentDidLoad() {
-    if (this.opened && this._popupRef) {
-      this._popupRef.focus();
-    }
+    this.popUpFocus();
     this._keyboardManager = new KeyboardManager({ propagate: false, element: this._element, enableShadowDom: true })
       .bind("Enter", this.ezPopupAction.emit.bind("OK"))
       .bind("Escape", () => this.closePopup())
@@ -59,31 +54,96 @@ export class EzPopup {
     if (!this.opened) {
       return;
     }
-    requestAnimationFrame(() => {
-      const slot = this._element.shadowRoot.querySelector("ez-modal-container");
-      if (this._popupRef && slot === null) {
-        this._popupRef.focus();
-      }
-    });
+    if (this._popupRef) {
+      this._popupRef.focus();
+    }
   }
   getGridSize() {
-    if (this.size === "auto")
-      return "";
-    return this._sizeClasses[this.size] || this._sizeClasses["medium"];
-  }
-  handlePopupHeight() {
-    return this.heightMode === 'auto' ? 'popup__container--auto' : '';
+    const _sizeClasses = {
+      "x-small": "col--sd-3 ez-popup__size-limit--x-small",
+      "small": "col--sd-5",
+      "medium": "col--sd-6",
+      "large": "col--sd-9",
+      "x-large": "col--sd-11",
+      "default": "ez-popup__size-limit--x-small",
+      "auto": "",
+    };
+    if (!this.size || !_sizeClasses.hasOwnProperty(this.size)) {
+      return _sizeClasses["medium"];
+    }
+    return _sizeClasses[this.size] || _sizeClasses["medium"];
   }
-  handlePopupOverflowY() {
-    return this.enabledScroll ? 'popup__overflow-y--auto' : '';
+  getDialogClass() {
+    let className = 'popup__container';
+    if (this.heightMode === 'auto') {
+      className += ' popup__container--auto';
+    }
+    if (this.enabledScroll) {
+      className += ' popup__overflow-y--auto';
+    }
+    className += ` ${this.getGridSize()}`;
+    return className;
   }
   componentDidRender() {
     this.manageOverlay();
     this.popUpFocus();
   }
+  handleAutoClose(event) {
+    if (!this.opened || !this._popupRef || !this.autoClose) {
+      return;
+    }
+    if (this._popupRef.contains(event.target)) {
+      return;
+    }
+    const slot = this._popupRef.querySelector('slot');
+    if (slot && slot.assignedElements().length > 0) {
+      const assignedElements = slot.assignedElements();
+      for (const element of assignedElements) {
+        if (element.contains(event.target)) {
+          return;
+        }
+      }
+    }
+    if (this._popupRef.shadowRoot && this._popupRef.shadowRoot.contains(event.target)) {
+      return;
+    }
+    this.closePopup();
+  }
+  handleDefaultPropsButtonsByIndex(index) {
+    switch (index) {
+      case 0:
+        return {
+          label: this.i18n ? this.i18n('app.confirm') : 'Confirmar',
+          variant: "primary",
+          size: "small",
+          onClick: () => {
+            this.closePopup();
+            this.ezPopupAction.emit("OK");
+          }
+        };
+      case 1:
+        return {
+          label: this.i18n ? this.i18n('app.cancel') : 'Cancelar',
+          variant: "secondary",
+          size: "small",
+          onClick: () => {
+            this.closePopup();
+          }
+        };
+      case 2:
+        return {
+          label: this.i18n ? this.i18n('app.close') : 'Fechar',
+          variant: "tertiary",
+          size: "small",
+          onClick: () => {
+            this.closePopup();
+          }
+        };
+    }
+  }
   render() {
-    return (h(Host, null, this.opened ? (h("div", { class: "overlay", ref: ref => this._popupRef = ref, tabIndex: -1 }, h("div", { class: "popup col " + this.getGridSize() }, h("div", { class: `popup__container ${(this.handlePopupHeight())} ${this.handlePopupOverflowY()}` }, h("div", { class: "popup__content" }, h("div", { class: "popup__header " + (this.useHeader ? "popup__header--padding" : "") }, this.useHeader &&
-      h(Fragment, null, !!this.ezTitle && h("div", { class: "popup__title" }, this.ezTitle), h("button", { class: this.ezTitle ? "btn-close" : "btn-close btn-close--solo", onClick: () => { this.opened = false; this.ezClosePopup.emit(); } }))), h("div", { class: "popup__expandable-content" }, h("slot", null))))))) : undefined));
+    return (h(Host, null, this.opened && (h("div", { class: "overlay", tabIndex: -1, onClick: this.handleAutoClose.bind(this) }, h("dialog", { ref: ref => this._popupRef = ref, class: this.getDialogClass() }, this.useHeader &&
+      h("header", { class: "popup__header" }, !!this.ezTitle && h("h1", { class: "popup__title" }, this.ezTitle), h("ez-button", { class: this.ezTitle ? "btn-close" : "btn-close btn-close--solo", variant: "tertiary", mode: "icon", iconName: "close", size: "small", onClick: this.closePopup.bind(this) })), h("main", { class: "popup__expandable-content" }, h("slot", null)), this.footerButtons.length > 0 && (h("footer", { class: "popup__footer" }, this.footerButtons.slice(0, 3).map((buttonProps, index) => (h("ez-button", Object.assign({ key: index }, this.handleDefaultPropsButtonsByIndex(index), buttonProps)))))))))));
   }
   static get is() { return "ez-popup"; }
   static get encapsulation() { return "shadow"; }
@@ -205,6 +265,51 @@ export class EzPopup {
         "attribute": "enabled-scroll",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "autoClose": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "true"
+            }],
+          "text": "Define se o popup deve fechar automaticamente ao clicar fora dele."
+        },
+        "attribute": "auto-close",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "footerButtons": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Partial<EzButtonProps>[]",
+          "resolved": "Partial<EzButtonProps>[]",
+          "references": {
+            "Partial": {
+              "location": "global"
+            },
+            "EzButtonProps": {
+              "location": "import",
+              "path": "./interfaces/EzButtonProps"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Bot\u00F5es do rodap\u00E9 do popup. Aceita todas as propriedades do ez-button.\nLimitado a at\u00E9 3 bot\u00F5es."
+        },
+        "defaultValue": "[]"
       }
     };
   }

package/dist/collection/components/ez-popup/interfaces/EzButtonProps.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/ez-rich-text/ez-link-builder/ez-link-builder.css

@@ -0,0 +1,22 @@
+.link-builder-container {
+    font-family: 'Roboto';
+    color: #2b3a54;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    justify-content: space-between;
+}
+
+.header {
+    display: flex;
+    font-weight: 500;
+    font-size: 16px;
+}
+
+.actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 12px;
+    margin-top: 12px;
+    width: 100%;
+}

package/dist/collection/components/ez-rich-text/ez-link-builder/ez-link-builder.js

@@ -0,0 +1,135 @@
+import { h } from '@stencil/core';
+import { RICH_TOOLBAR_COMMANDS } from '../ez-rich-toolbar/RichToolbarHelper';
+import initI18n from '../../../utils/i18n';
+export class EzLinkBuilder {
+  constructor() {
+    this.textToShow = undefined;
+    this.link = undefined;
+    this.openInNewGuide = false;
+  }
+  async show(text) {
+    this._popupElement.opened = true;
+    if (text) {
+      this.textToShow = text;
+    }
+  }
+  async hide() {
+    this._popupElement.opened = false;
+  }
+  async componentWillLoad() {
+    this.i18n = await initI18n();
+  }
+  async handleCancel() {
+    this.clearValues();
+    this.executeToolbarCommand.emit({ command: RICH_TOOLBAR_COMMANDS.FOCUS });
+    await this.hide();
+  }
+  clearValues() {
+    this.link = '';
+    this.textToShow = '';
+    this.openInNewGuide = false;
+  }
+  async handleCreateLink() {
+    const tag = `<a href="${this.link}" ${this.openInNewGuide ? 'target="_blank" rel="noopener noreferrer"' : ''}>${this.textToShow ? this.textToShow : this.link}</a>`;
+    this.executeToolbarCommand.emit({ command: RICH_TOOLBAR_COMMANDS.FORMAT, value: tag });
+    this.clearValues();
+    await this.hide();
+  }
+  async handleActionPopup(event) {
+    if (event.detail === 'OK') {
+      await this.handleCreateLink();
+      return;
+    }
+    if (event.detail === 'CANCEL' || event.detail === 'CLOSE') {
+      await this.handleCancel();
+    }
+  }
+  getOkButtonStatus() {
+    var _a;
+    return ((_a = this.link) === null || _a === void 0 ? void 0 : _a.trim()) ? 'ENABLED' : 'DISABLED';
+  }
+  render() {
+    return (h("ez-popup", { heightMode: 'auto', size: 'small', useHeader: false, ref: ref => this._popupElement = ref, onEzClosePopup: () => this.clearValues() }, h("div", null, h("ez-modal-container", { modalTitle: this.i18n("ez-link-builder.addLinkTitle"), modalSubTitle: this.i18n("ez-link-builder.addLinkSubtitle"), okButtonLabel: this.i18n("ez-link-builder.submit"), cancelButtonLabel: this.i18n("app.cancel"), onEzModalAction: this.handleActionPopup.bind(this), okButtonStatus: this.getOkButtonStatus() }, h("div", { class: 'link-builder-container' }, h("ez-text-input", { id: 'link_url_input', label: this.i18n("ez-link-builder.urlInputLabel"), value: this.link, onEzChange: (e) => this.link = e.detail }), h("ez-text-input", { id: 'link_text_input', label: this.i18n("ez-link-builder.textInputLabel"), value: this.textToShow, onEzChange: (e) => this.textToShow = e.detail }), h("ez-check", { label: this.i18n("ez-link-builder.openInNewPage"), value: this.openInNewGuide, onEzChange: (e) => this.openInNewGuide = e.detail }))))));
+  }
+  static get is() { return "ez-link-builder"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ez-link-builder.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ez-link-builder.css"]
+    };
+  }
+  static get states() {
+    return {
+      "textToShow": {},
+      "link": {},
+      "openInNewGuide": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "executeToolbarCommand",
+        "name": "executeToolbarCommand",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "RichToolbarCommand",
+          "resolved": "RichToolbarCommand",
+          "references": {
+            "RichToolbarCommand": {
+              "location": "import",
+              "path": "../ez-rich-toolbar/RichToolbarHelper"
+            }
+          }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "show": {
+        "complexType": {
+          "signature": "(text?: string) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
+      "hide": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
+}

package/dist/collection/components/ez-rich-text/ez-rich-text.css

@@ -0,0 +1,30 @@
+:host {
+  display: block;
+  width: 100%;
+  font-family: Roboto;
+
+  /*@doc Define a sombra do header.*/
+  --ez-rich-text--box-shadow: 0 0 3px 0 #DCE0E8;
+  /*@doc Define o outline usado como borda do header.*/
+  --ez-rich-text--shadow--outline: var(--shadow--outline) var(--color--strokes);
+}
+
+.editor-container {
+  width: 100%;
+  overflow: hidden;
+  border-radius: 12px;
+  border: 1px solid #DCE0E8;
+}
+
+ez-text-area{
+  --text-area__input--border: 1px solid;
+}
+
+.preview{
+  min-height: 20px;
+  padding: 12px;
+  resize: both;
+  overflow: auto;
+  max-width: 100%;
+  border-top: 1px solid #DCE0E8;
+}