@sankhyalabs/ezui 6.1.0-dev.1 → 6.1.0-dev.10

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%;
+}