@sankhyalabs/ezui 6.1.0-dev.3 → 6.1.0-dev.5

package/dist/collection/collection-manifest.json

@@ -48,6 +48,14 @@
     "./components/ez-popover-plus/ez-popover-plus.js",
     "./components/ez-popover-plus/subcomponent/ez-popover-core.js",
     "./components/ez-popup/ez-popup.js",
+    "./components/ez-rich-text/ez-rich-text.js",
+    "./components/ez-rich-text/ez-link-builder/ez-link-builder.js",
+    "./components/ez-rich-text/ez-rich-toolbar/ez-rich-toolbar.js",
+    "./components/ez-rich-text/ez-rich-toolbar/ez-rich-toolbar-arrows/ez-rich-toolbar-arrows.js",
+    "./components/ez-rich-text/ez-rich-toolbar/ez-rich-toolbar-configs/ez-rich-toolbar-configs.js",
+    "./components/ez-rich-text/ez-rich-toolbar/ez-rich-toolbar-item/ez-rich-toolbar-item.js",
+    "./components/ez-rich-text/ez-rich-toolbar/ez-rich-toolbar-letters/ez-rich-toolbar-letters.js",
+    "./components/ez-rich-text/ez-simple-image-uploader/ez-simple-image-uploader.js",
     "./components/ez-scroller/ez-scroller.js",
     "./components/ez-search/subcomponent/search-list/search-list.js",
     "./components/ez-search-plus/ez-search-plus.js",

package/dist/collection/components/ez-form-view/fieldbuilder/FieldBuilder.js

@@ -9,6 +9,7 @@ import { buildTextArea } from "./templates/TextArea.tpl";
 import { buildTextInput } from "./templates/TextInput.tpl";
 import { buildSearchPlus } from "./templates/SearchInputPlus.tpl";
 import { buildSearch } from "./templates/SearchInput.tpl";
+import { buildRichText } from "./templates/RichText.tpl";
 const uiBuilders = new Map();
 uiBuilders.set(UserInterface.CHECKBOX, buildCheckBox);
 uiBuilders.set(UserInterface.SWITCH, buildSwitch);
@@ -23,6 +24,7 @@ uiBuilders.set(UserInterface.INTEGERNUMBER, buildInteger);
 uiBuilders.set(UserInterface.SEARCH, buildSearch);
 uiBuilders.set(UserInterface.SEARCHPLUS, buildSearchPlus);
 uiBuilders.set(UserInterface.LONGTEXT, buildTextArea);
+uiBuilders.set(UserInterface.HTML, buildRichText);
 export const fieldBuilder = (field) => {
   const builder = uiBuilders.get(field.userInterface) || buildTextInput;
   const label = field.required ? `${field.label}${REQUIRED_INFO}` : field.label;

package/dist/collection/components/ez-form-view/fieldbuilder/templates/RichText.tpl.js

@@ -0,0 +1,4 @@
+import { h } from "@stencil/core";
+export const buildRichText = ({ name, label, readOnly, contextName, rows, canShowError }) => {
+  return (h("div", { class: "ez-col ez-col--sd-12", key: name }, h("ez-rich-text", null)));
+};

package/dist/collection/components/ez-grid/controller/ag-grid/AgGridController.js

@@ -1,5 +1,5 @@
 import { ApplicationContext, DataType, LockManager, LockManagerOperation, MaskFormatter, NumberUtils, SortMode, StringUtils, UserInterface, } from '@sankhyalabs/core';
-import { Grid } from "@ag-grid-community/core";
+import { Grid, } from "@ag-grid-community/core";
 import { LicenseManager } from '@ag-grid-enterprise/core';
 import DataSource from './DataSource';
 import { EzGridCustomHeader } from './components/EzGridCustomHeader';
@@ -14,6 +14,7 @@ import { RangeSelectionModule } from '@ag-grid-enterprise/range-selection';
 import { ServerSideRowModelModule } from '@ag-grid-enterprise/server-side-row-model';
 import { ClipboardModule } from '@ag-grid-enterprise/clipboard';
 import { MenuModule } from '@ag-grid-enterprise/menu';
+import DOMPurify from 'dompurify';
 export default class AgGridController {
   configFilterColumn(filterColumn) {
     this._filterColumn = filterColumn;
@@ -959,6 +960,10 @@ export default class AgGridController {
         if (params.value instanceof Promise) {
           return "Carregando...";
         }
+        if (source.userInterface === UserInterface.HTML) {
+          this.setHTMLRender(params, source);
+          return "";
+        }
         const customFormatter = this._customFormatters.get(source.name);
         if (customFormatter) {
           const formattedValue = customFormatter.format(params.value, source, params.data.__record__id__);
@@ -975,6 +980,24 @@ export default class AgGridController {
       editable: !((_e = source.props) === null || _e === void 0 ? void 0 : _e.has(PRESENTATION_FROM_COL_PROP_NAME))
     });
   }
+  setHTMLRender(params, source) {
+    const htmlSanitized = DOMPurify.sanitize(params.value);
+    params.colDef.cellRenderer = (cellParams) => {
+      if (cellParams.node.rowIndex === params.node.rowIndex) {
+        const element = document.createElement('span');
+        element.innerHTML = htmlSanitized;
+        return element.firstChild;
+      }
+      return cellParams.value;
+    };
+    params.colDef.cellStyle = (cellParams) => {
+      const defaultStyle = this.getStyleByColumn(source);
+      if (cellParams.node.rowIndex === params.node.rowIndex) {
+        return Object.assign(defaultStyle, { padding: 0 });
+      }
+      return defaultStyle;
+    };
+  }
   setCustomFormatters(customFormatters) {
     this._customFormatters = customFormatters;
   }

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

@@ -76,146 +76,153 @@ svg {
 .ez-icon-balance:before { content: "\ea13"; }
 .ez-icon-bell-inverted:before { content: "\ea14"; }
 .ez-icon-bell:before { content: "\ea15"; }
-.ez-icon-boleto:before { content: "\ea16"; }
-.ez-icon-boolean:before { content: "\ea17"; }
-.ez-icon-business-center:before { content: "\ea18"; }
-.ez-icon-calendar-clock:before { content: "\ea19"; }
-.ez-icon-calendar:before { content: "\ea1a"; }
-.ez-icon-cart-history:before { content: "\ea1b"; }
-.ez-icon-cash-remove:before { content: "\ea1c"; }
-.ez-icon-check-circle-inverted:before { content: "\ea1d"; }
-.ez-icon-check-circle:before { content: "\ea1e"; }
-.ez-icon-check:before { content: "\ea1f"; }
-.ez-icon-chevron-down:before { content: "\ea20"; }
-.ez-icon-chevron-left:before { content: "\ea21"; }
-.ez-icon-chevron-right:before { content: "\ea22"; }
-.ez-icon-chevron-up:before { content: "\ea23"; }
-.ez-icon-circle--medium:before { content: "\ea24"; }
-.ez-icon-circle:before { content: "\ea25"; }
-.ez-icon-clean-cart:before { content: "\ea26"; }
-.ez-icon-cleaning:before { content: "\ea27"; }
-.ez-icon-clipboard:before { content: "\ea28"; }
-.ez-icon-clock-rotate-left:before { content: "\ea29"; }
-.ez-icon-close:before { content: "\ea2a"; }
-.ez-icon-cobrar:before { content: "\ea2b"; }
-.ez-icon-code:before { content: "\ea2c"; }
-.ez-icon-configuration:before { content: "\ea2d"; }
-.ez-icon-content-cut:before { content: "\ea2e"; }
-.ez-icon-copy:before { content: "\ea2f"; }
-.ez-icon-credit_card:before { content: "\ea30"; }
-.ez-icon-crop:before { content: "\ea31"; }
-.ez-icon-custom:before { content: "\ea32"; }
-.ez-icon-delete-file:before { content: "\ea33"; }
-.ez-icon-delete:before { content: "\ea34"; }
-.ez-icon-description:before { content: "\ea35"; }
-.ez-icon-dividir:before { content: "\ea36"; }
-.ez-icon-docx:before { content: "\ea37"; }
-.ez-icon-dot-notification:before { content: "\ea38"; }
-.ez-icon-dots-horizontal:before { content: "\ea39"; }
-.ez-icon-dots-vertical:before { content: "\ea3a"; }
-.ez-icon-drag-indicator:before { content: "\ea3b"; }
-.ez-icon-dual-chevron-down:before { content: "\ea3c"; }
-.ez-icon-dual-chevron-left:before { content: "\ea3d"; }
-.ez-icon-dual-chevron-right:before { content: "\ea3e"; }
-.ez-icon-dual-chevron-up:before { content: "\ea3f"; }
-.ez-icon-edit-file:before { content: "\ea40"; }
-.ez-icon-edit-table:before { content: "\ea41"; }
-.ez-icon-edit-time:before { content: "\ea42"; }
-.ez-icon-edit-value:before { content: "\ea43"; }
-.ez-icon-edit:before { content: "\ea44"; }
-.ez-icon-email:before { content: "\ea45"; }
-.ez-icon-estorno:before { content: "\ea46"; }
-.ez-icon-exe:before { content: "\ea47"; }
-.ez-icon-expand:before { content: "\ea48"; }
-.ez-icon-expandir_card:before { content: "\ea49"; }
-.ez-icon-extrato:before { content: "\ea4a"; }
-.ez-icon-eye-off:before { content: "\ea4b"; }
-.ez-icon-eye:before { content: "\ea4c"; }
-.ez-icon-favorite:before { content: "\ea4d"; }
-.ez-icon-figma:before { content: "\ea4e"; }
-.ez-icon-file-download:before { content: "\ea4f"; }
-.ez-icon-file-upload:before { content: "\ea50"; }
-.ez-icon-filter:before { content: "\ea51"; }
-.ez-icon-find-file:before { content: "\ea52"; }
-.ez-icon-find-page:before { content: "\ea53"; }
-.ez-icon-format-color-fill:before { content: "\ea54"; }
-.ez-icon-generic:before { content: "\ea55"; }
-.ez-icon-gif:before { content: "\ea56"; }
-.ez-icon-graph_bar:before { content: "\ea57"; }
-.ez-icon-handshake:before { content: "\ea58"; }
-.ez-icon-help-inverted:before { content: "\ea59"; }
-.ez-icon-help:before { content: "\ea5a"; }
-.ez-icon-hide-list:before { content: "\ea5b"; }
-.ez-icon-hide_menu:before { content: "\ea5c"; }
-.ez-icon-hierarchical-tree:before { content: "\ea5d"; }
-.ez-icon-home:before { content: "\ea5e"; }
-.ez-icon-icons104:before { content: "\ea5f"; }
-.ez-icon-language:before { content: "\ea60"; }
-.ez-icon-launch:before { content: "\ea61"; }
-.ez-icon-lightbulb:before { content: "\ea62"; }
-.ez-icon-list:before { content: "\ea63"; }
-.ez-icon-location:before { content: "\ea64"; }
-.ez-icon-lock-outline:before { content: "\ea65"; }
-.ez-icon-lock:before { content: "\ea66"; }
-.ez-icon-menu:before { content: "\ea67"; }
-.ez-icon-mid:before { content: "\ea68"; }
-.ez-icon-minus:before { content: "\ea69"; }
-.ez-icon-money-off:before { content: "\ea6a"; }
-.ez-icon-money:before { content: "\ea6b"; }
-.ez-icon-more:before { content: "\ea6c"; }
-.ez-icon-mp3:before { content: "\ea6d"; }
-.ez-icon-mp4:before { content: "\ea6e"; }
-.ez-icon-multiple-files:before { content: "\ea6f"; }
-.ez-icon-north-west:before { content: "\ea70"; }
-.ez-icon-number:before { content: "\ea71"; }
-.ez-icon-ordem-ascendente:before { content: "\ea72"; }
-.ez-icon-ordem-descendente:before { content: "\ea73"; }
-.ez-icon-parcelar:before { content: "\ea74"; }
-.ez-icon-pause:before { content: "\ea75"; }
-.ez-icon-payments:before { content: "\ea76"; }
-.ez-icon-pdf:before { content: "\ea77"; }
-.ez-icon-play:before { content: "\ea78"; }
-.ez-icon-plus:before { content: "\ea79"; }
-.ez-icon-png:before { content: "\ea7a"; }
-.ez-icon-power:before { content: "\ea7b"; }
-.ez-icon-pptx:before { content: "\ea7c"; }
-.ez-icon-preview:before { content: "\ea7d"; }
-.ez-icon-print:before { content: "\ea7e"; }
-.ez-icon-push-pin:before { content: "\ea7f"; }
-.ez-icon-rateio:before { content: "\ea80"; }
-.ez-icon-receipt:before { content: "\ea81"; }
-.ez-icon-recolher_card:before { content: "\ea82"; }
-.ez-icon-remove-from-cart:before { content: "\ea83"; }
-.ez-icon-restore:before { content: "\ea84"; }
-.ez-icon-return:before { content: "\ea85"; }
-.ez-icon-sankhya-place:before { content: "\ea86"; }
-.ez-icon-save:before { content: "\ea87"; }
-.ez-icon-search:before { content: "\ea88"; }
-.ez-icon-settings-inverted:before { content: "\ea89"; }
-.ez-icon-settings:before { content: "\ea8a"; }
-.ez-icon-share:before { content: "\ea8b"; }
-.ez-icon-shield:before { content: "\ea8c"; }
-.ez-icon-show-list:before { content: "\ea8d"; }
-.ez-icon-show_menu:before { content: "\ea8e"; }
-.ez-icon-south-east:before { content: "\ea8f"; }
-.ez-icon-sync:before { content: "\ea90"; }
-.ez-icon-table:before { content: "\ea91"; }
-.ez-icon-tag_code:before { content: "\ea92"; }
-.ez-icon-text:before { content: "\ea93"; }
-.ez-icon-timeline:before { content: "\ea94"; }
-.ez-icon-timer-outline:before { content: "\ea95"; }
-.ez-icon-trending-up:before { content: "\ea96"; }
-.ez-icon-tune:before { content: "\ea97"; }
-.ez-icon-txt:before { content: "\ea98"; }
-.ez-icon-un-pin:before { content: "\ea99"; }
-.ez-icon-unfold_less:before { content: "\ea9a"; }
-.ez-icon-unfold_more:before { content: "\ea9b"; }
-.ez-icon-user-circle:before { content: "\ea9c"; }
-.ez-icon-warning-outline:before { content: "\ea9d"; }
-.ez-icon-warning_triangle:before { content: "\ea9e"; }
-.ez-icon-whatshot:before { content: "\ea9f"; }
-.ez-icon-xlsx:before { content: "\eaa0"; }
-.ez-icon-zip:before { content: "\eaa1"; }
+.ez-icon-bold:before { content: "\ea16"; }
+.ez-icon-boleto:before { content: "\ea17"; }
+.ez-icon-boolean:before { content: "\ea18"; }
+.ez-icon-business-center:before { content: "\ea19"; }
+.ez-icon-calendar-clock:before { content: "\ea1a"; }
+.ez-icon-calendar:before { content: "\ea1b"; }
+.ez-icon-cart-history:before { content: "\ea1c"; }
+.ez-icon-cash-remove:before { content: "\ea1d"; }
+.ez-icon-check-circle-inverted:before { content: "\ea1e"; }
+.ez-icon-check-circle:before { content: "\ea1f"; }
+.ez-icon-check:before { content: "\ea20"; }
+.ez-icon-chevron-down:before { content: "\ea21"; }
+.ez-icon-chevron-left:before { content: "\ea22"; }
+.ez-icon-chevron-right:before { content: "\ea23"; }
+.ez-icon-chevron-up:before { content: "\ea24"; }
+.ez-icon-circle--medium:before { content: "\ea25"; }
+.ez-icon-circle:before { content: "\ea26"; }
+.ez-icon-clean-cart:before { content: "\ea27"; }
+.ez-icon-cleaning:before { content: "\ea28"; }
+.ez-icon-clipboard:before { content: "\ea29"; }
+.ez-icon-clock-rotate-left:before { content: "\ea2a"; }
+.ez-icon-close:before { content: "\ea2b"; }
+.ez-icon-cobrar:before { content: "\ea2c"; }
+.ez-icon-code:before { content: "\ea2d"; }
+.ez-icon-configuration:before { content: "\ea2e"; }
+.ez-icon-content-cut:before { content: "\ea2f"; }
+.ez-icon-copy:before { content: "\ea30"; }
+.ez-icon-credit_card:before { content: "\ea31"; }
+.ez-icon-crop:before { content: "\ea32"; }
+.ez-icon-custom:before { content: "\ea33"; }
+.ez-icon-delete-file:before { content: "\ea34"; }
+.ez-icon-delete:before { content: "\ea35"; }
+.ez-icon-description:before { content: "\ea36"; }
+.ez-icon-dividir:before { content: "\ea37"; }
+.ez-icon-docx:before { content: "\ea38"; }
+.ez-icon-dot-notification:before { content: "\ea39"; }
+.ez-icon-dots-horizontal:before { content: "\ea3a"; }
+.ez-icon-dots-vertical:before { content: "\ea3b"; }
+.ez-icon-drag-indicator:before { content: "\ea3c"; }
+.ez-icon-dual-chevron-down:before { content: "\ea3d"; }
+.ez-icon-dual-chevron-left:before { content: "\ea3e"; }
+.ez-icon-dual-chevron-right:before { content: "\ea3f"; }
+.ez-icon-dual-chevron-up:before { content: "\ea40"; }
+.ez-icon-edit-file:before { content: "\ea41"; }
+.ez-icon-edit-table:before { content: "\ea42"; }
+.ez-icon-edit-time:before { content: "\ea43"; }
+.ez-icon-edit-value:before { content: "\ea44"; }
+.ez-icon-edit:before { content: "\ea45"; }
+.ez-icon-email:before { content: "\ea46"; }
+.ez-icon-estorno:before { content: "\ea47"; }
+.ez-icon-exe:before { content: "\ea48"; }
+.ez-icon-expand:before { content: "\ea49"; }
+.ez-icon-expandir_card:before { content: "\ea4a"; }
+.ez-icon-extrato:before { content: "\ea4b"; }
+.ez-icon-eye-off:before { content: "\ea4c"; }
+.ez-icon-eye:before { content: "\ea4d"; }
+.ez-icon-favorite:before { content: "\ea4e"; }
+.ez-icon-figma:before { content: "\ea4f"; }
+.ez-icon-file-download:before { content: "\ea50"; }
+.ez-icon-file-upload:before { content: "\ea51"; }
+.ez-icon-filter:before { content: "\ea52"; }
+.ez-icon-find-file:before { content: "\ea53"; }
+.ez-icon-find-page:before { content: "\ea54"; }
+.ez-icon-format-color-fill:before { content: "\ea55"; }
+.ez-icon-generic:before { content: "\ea56"; }
+.ez-icon-gif:before { content: "\ea57"; }
+.ez-icon-graph_bar:before { content: "\ea58"; }
+.ez-icon-handshake:before { content: "\ea59"; }
+.ez-icon-help-inverted:before { content: "\ea5a"; }
+.ez-icon-help:before { content: "\ea5b"; }
+.ez-icon-hide-list:before { content: "\ea5c"; }
+.ez-icon-hide_menu:before { content: "\ea5d"; }
+.ez-icon-hierarchical-tree:before { content: "\ea5e"; }
+.ez-icon-home:before { content: "\ea5f"; }
+.ez-icon-icons104:before { content: "\ea60"; }
+.ez-icon-image-plus:before { content: "\ea61"; }
+.ez-icon-italic:before { content: "\ea62"; }
+.ez-icon-language:before { content: "\ea63"; }
+.ez-icon-launch:before { content: "\ea64"; }
+.ez-icon-lightbulb:before { content: "\ea65"; }
+.ez-icon-link:before { content: "\ea66"; }
+.ez-icon-list:before { content: "\ea67"; }
+.ez-icon-location:before { content: "\ea68"; }
+.ez-icon-lock-outline:before { content: "\ea69"; }
+.ez-icon-lock:before { content: "\ea6a"; }
+.ez-icon-menu:before { content: "\ea6b"; }
+.ez-icon-mid:before { content: "\ea6c"; }
+.ez-icon-minus:before { content: "\ea6d"; }
+.ez-icon-money-off:before { content: "\ea6e"; }
+.ez-icon-money:before { content: "\ea6f"; }
+.ez-icon-more:before { content: "\ea70"; }
+.ez-icon-mp3:before { content: "\ea71"; }
+.ez-icon-mp4:before { content: "\ea72"; }
+.ez-icon-multiple-files:before { content: "\ea73"; }
+.ez-icon-north-west:before { content: "\ea74"; }
+.ez-icon-number:before { content: "\ea75"; }
+.ez-icon-ordem-ascendente:before { content: "\ea76"; }
+.ez-icon-ordem-descendente:before { content: "\ea77"; }
+.ez-icon-parcelar:before { content: "\ea78"; }
+.ez-icon-pause:before { content: "\ea79"; }
+.ez-icon-payments:before { content: "\ea7a"; }
+.ez-icon-pdf:before { content: "\ea7b"; }
+.ez-icon-play:before { content: "\ea7c"; }
+.ez-icon-plus:before { content: "\ea7d"; }
+.ez-icon-png:before { content: "\ea7e"; }
+.ez-icon-power:before { content: "\ea7f"; }
+.ez-icon-pptx:before { content: "\ea80"; }
+.ez-icon-preview:before { content: "\ea81"; }
+.ez-icon-print:before { content: "\ea82"; }
+.ez-icon-push-pin:before { content: "\ea83"; }
+.ez-icon-rateio:before { content: "\ea84"; }
+.ez-icon-receipt:before { content: "\ea85"; }
+.ez-icon-recolher_card:before { content: "\ea86"; }
+.ez-icon-redo:before { content: "\ea87"; }
+.ez-icon-remove-from-cart:before { content: "\ea88"; }
+.ez-icon-restore:before { content: "\ea89"; }
+.ez-icon-return:before { content: "\ea8a"; }
+.ez-icon-sankhya-place:before { content: "\ea8b"; }
+.ez-icon-save:before { content: "\ea8c"; }
+.ez-icon-search:before { content: "\ea8d"; }
+.ez-icon-settings-inverted:before { content: "\ea8e"; }
+.ez-icon-settings:before { content: "\ea8f"; }
+.ez-icon-share:before { content: "\ea90"; }
+.ez-icon-shield:before { content: "\ea91"; }
+.ez-icon-show-list:before { content: "\ea92"; }
+.ez-icon-show_menu:before { content: "\ea93"; }
+.ez-icon-south-east:before { content: "\ea94"; }
+.ez-icon-sync:before { content: "\ea95"; }
+.ez-icon-table:before { content: "\ea96"; }
+.ez-icon-tag_code:before { content: "\ea97"; }
+.ez-icon-text:before { content: "\ea98"; }
+.ez-icon-timeline:before { content: "\ea99"; }
+.ez-icon-timer-outline:before { content: "\ea9a"; }
+.ez-icon-trending-up:before { content: "\ea9b"; }
+.ez-icon-tune:before { content: "\ea9c"; }
+.ez-icon-txt:before { content: "\ea9d"; }
+.ez-icon-un-pin:before { content: "\ea9e"; }
+.ez-icon-underline:before { content: "\ea9f"; }
+.ez-icon-undo:before { content: "\eaa0"; }
+.ez-icon-unfold_less:before { content: "\eaa1"; }
+.ez-icon-unfold_more:before { content: "\eaa2"; }
+.ez-icon-user-circle:before { content: "\eaa3"; }
+.ez-icon-warning-outline:before { content: "\eaa4"; }
+.ez-icon-warning_triangle:before { content: "\eaa5"; }
+.ez-icon-whatshot:before { content: "\eaa6"; }
+.ez-icon-xlsx:before { content: "\eaa7"; }
+.ez-icon-zip:before { content: "\eaa8"; }
 /*
   END CSS GENERATED BY EZ-DESIGN ICONS
 */

package/dist/collection/components/ez-modal-container/ez-modal-container.css

@@ -16,6 +16,7 @@
   flex-wrap: nowrap;
   flex-direction: row;
   justify-content: space-between;
+  align-items: start;
 }
 
 .ez-modal-container__content {
@@ -48,6 +49,7 @@
   background-color: transparent;
   border: none;
   outline: none;
+  padding: var(--space--6, 6px) 0px;
 }
 
 .ez-modal-container__close-icon {

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,131 @@
+import { h } from '@stencil/core';
+import { RICH_TOOLBAR_COMMANDS } from '../ez-rich-toolbar/RichToolbarHelper';
+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 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: "Adicionar link", modalSubTitle: "Insira um link no texto para abrir novas p\u00E1ginas.", okButtonLabel: "Enviar", cancelButtonLabel: "Cancelar", onEzModalAction: this.handleActionPopup.bind(this), okButtonStatus: this.getOkButtonStatus() }, h("div", { class: 'link-builder-container' }, h("ez-text-input", { id: 'link_url_input', label: 'Insira a URL destino', value: this.link, onEzChange: (e) => this.link = e.detail }), h("ez-text-input", { id: 'link_text_input', label: 'Insira o texto a ser exibido', value: this.textToShow, onEzChange: (e) => this.textToShow = e.detail }), h("ez-check", { label: 'Abrir em uma nova página.', 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,35 @@
+: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.bordered {
+  border-radius: 12px;
+  border: 1px solid #DCE0E8;
+}
+
+
+.editor-container {
+  width: 100%;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+ez-text-area{
+  --text-area__input--border: 1px solid;
+}
+
+.preview{
+  min-height: 20px;
+  padding: 12px;
+  resize: both;
+  overflow: auto;
+  max-width: 100%;
+}