@sankhyalabs/ezui 6.1.0-dev.2 → 6.1.0-dev.21

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

@@ -1,6 +1,7 @@
 import { ElementIDUtils, StringUtils } from '@sankhyalabs/core';
 import { Fragment, Host, h } from '@stencil/core';
 import { processListOnDrop } from './ezListHelper';
+import initI18n from '../../utils/i18n';
 export class EzList {
   constructor() {
     this._listItemsHistory = [];
@@ -205,7 +206,8 @@ export class EzList {
       ElementIDUtils.addIDInfoIfNotExists(item, 'selectable');
     });
   }
-  componentWillLoad() {
+  async componentWillLoad() {
+    this.i18n = await initI18n();
     this._listItemsHistory = [];
   }
   componentWillRender() {
@@ -582,7 +584,7 @@ export class EzList {
           'hover-feedback': this.hoverFeedback,
         }, key: 'item_' + item.id }, {
         [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`ezListItem__${StringUtils.replaceAccentuatedChars(item.label)}`),
-      }), h("div", { class: 'draggable' + (item.selected == true ? ' selected-item ' : '') + (this.ezSelectable == true ? ' selectable ' : ''), onDblClick: () => this.doubleClickItem(item), onClick: () => this.setSelection(item), onDragLeave: () => group.sort ? undefined : this.removeOverClass(), onDragEnd: () => this.onDragEnd(), onDragStart: () => this.onDragStart(item, group, index), onDragOver: event => group.sort ? undefined : this.onDragOverItem(event), onDrop: event => this.onDrop(event, { groupName: group.group, item: item, index: index }), draggable: this.ezDraggable }, h("div", { class: 'item-content' }, this.ezDraggable ? h("span", { class: 'draggable-icon' }) : undefined, this.listMode === 'regular' ? (h(Fragment, null, !!this.itemLeftSlotBuilder && this.getContainerItemBuilder('left', item, group), h("p", { title: item.label, class: 'person-name text--ellipsis' }, item.label))) : (h("ez-check", { label: item.label, value: item.check, onEzChange: evt => this.ezCheckChange.emit(this.buildItem(item, evt)) }))), !!this.itemSlotBuilder && this.getContainerItemBuilder('right', item, group, 'slot-item')))))), h("div", { class: 'last-droppable-space', onDragLeave: () => this.removeOverClass(), onDragOver: event => this.onDragOverLastIndex(event), onDragEnd: () => this.onDragEnd(), onDrop: event => this.onDropLastIndex(event, group) })), group.sort ? (h("div", { id: this.getGroupOverlayId(group.group), class: 'group-overlay' }, "Mover para ", group.group)) : undefined)));
+      }), h("div", { class: 'draggable' + (item.selected == true ? ' selected-item ' : '') + (this.ezSelectable == true ? ' selectable ' : ''), onDblClick: () => this.doubleClickItem(item), onClick: () => this.setSelection(item), onDragLeave: () => group.sort ? undefined : this.removeOverClass(), onDragEnd: () => this.onDragEnd(), onDragStart: () => this.onDragStart(item, group, index), onDragOver: event => group.sort ? undefined : this.onDragOverItem(event), onDrop: event => this.onDrop(event, { groupName: group.group, item: item, index: index }), draggable: this.ezDraggable }, h("div", { class: 'item-content' }, this.ezDraggable ? h("span", { class: 'draggable-icon' }) : undefined, this.listMode === 'regular' ? (h(Fragment, null, !!this.itemLeftSlotBuilder && this.getContainerItemBuilder('left', item, group), h("p", { title: item.label, class: 'person-name text--ellipsis' }, item.label))) : (h("ez-check", { label: item.label, value: item.check, onEzChange: evt => this.ezCheckChange.emit(this.buildItem(item, evt)) }))), !!this.itemSlotBuilder && this.getContainerItemBuilder('right', item, group, 'slot-item')))))), h("div", { class: 'last-droppable-space', onDragLeave: () => this.removeOverClass(), onDragOver: event => this.onDragOverLastIndex(event), onDragEnd: () => this.onDragEnd(), onDrop: event => this.onDropLastIndex(event, group) })), group.sort ? (h("div", { id: this.getGroupOverlayId(group.group), class: 'group-overlay' }, this.i18n("ez-list.moveToGroup", { groupName: group.group }))) : undefined)));
     }));
   }
   renderList() {

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

@@ -1,5 +1,6 @@
 import { Host, h } from "@stencil/core";
 import { FloatingManager, KeyboardManager } from '@sankhyalabs/core';
+import initI18n from '../../utils/i18n';
 export class EzModal {
   constructor() {
     this.modalSize = undefined;
@@ -23,6 +24,9 @@ export class EzModal {
     this.opened = false;
     this.ezCloseModal.emit(this.opened);
   }
+  async componentWillLoad() {
+    this.i18n = await initI18n();
+  }
   componentDidLoad() {
     this.observeOpened();
     this._keyboardManager = new KeyboardManager({ propagate: false, element: this._element, enableShadowDom: true })
@@ -65,7 +69,7 @@ export class EzModal {
     const scrimType = `modal__screen-${this.scrim}`;
     return (h(Host, null, this.opened
       ?
-        h("div", { ref: ref => this._modalRef = ref, class: `modal ${scrimType} ${regularVerticalPaddingClass}`, onMouseDown: evt => this.onMouseDownHandler(evt), tabIndex: -1 }, h("div", { class: `modal__container modal__container--${positionSufix}`, ref: ref => this._overlay = ref }, h("div", { onMouseLeave: () => this.onMouseLeaveHandler(), class: `modal__content ${modalContentHeightMode} ${this.modalSize}` }, h("slot", null))))
+        h("div", { ref: ref => this._modalRef = ref, class: `modal ${scrimType} ${regularVerticalPaddingClass}`, onMouseDown: evt => this.onMouseDownHandler(evt), tabIndex: -1, "aria-label": this.i18n("ez-modal.close") }, h("div", { class: `modal__container modal__container--${positionSufix}`, ref: ref => this._overlay = ref }, h("div", { onMouseLeave: () => this.onMouseLeaveHandler(), class: `modal__content ${modalContentHeightMode} ${this.modalSize}` }, h("slot", null))))
       :
         undefined));
   }

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-modal-container/ez-modal-container.js

@@ -2,6 +2,7 @@ import { h, Host } from "@stencil/core";
 import { KeyboardManager } from "@sankhyalabs/core";
 import ModalAction from "./modal-action";
 import ModalButtonStatus from "./modal-button-status";
+import initI18n from '../../utils/i18n';
 export class EzModalContainer {
   constructor() {
     this.modalTitle = undefined;
@@ -25,6 +26,9 @@ export class EzModalContainer {
   okIsVisible() {
     return (this.okButtonStatus !== ModalButtonStatus.HIDDEN && this.okButtonLabel != undefined);
   }
+  async componentWillLoad() {
+    this.i18n = await initI18n();
+  }
   componentDidLoad() {
     window.requestAnimationFrame(() => {
       this.ezModalAction.emit(ModalAction.LOAD);
@@ -52,7 +56,7 @@ export class EzModalContainer {
     this._closeButton.focus();
   }
   render() {
-    return (h(Host, null, h("button", { class: "ez-modal-container__focus-ctrl", onFocusin: () => this.focusLast() }), h("div", { ref: ref => this._modalRef = ref, tabIndex: -1, class: "ez-modal-container__header-container" }, this.showTitleBar && (h("div", { class: "ez-modal-container__header ez-margin-bottom--medium" }, h("div", { class: "ez-col ez-align--middle ez-modal-container__title" }, h("h2", { class: "ez-text ez-title--large ez-title--primary ez-text--bold ez-margin-vertical--extra-small" }, this.modalTitle), this.modalSubTitle && (h("div", { class: "ez-text ez-text--medium ez-text--primary ez-margin-vertical--extra-small" }, this.modalSubTitle))), (this.showCloseButton && h("button", { ref: ref => this._closeButton = ref, class: "ez-modal-container__close-button", onClick: () => this.ezModalAction.emit(ModalAction.CLOSE) }, h("ez-icon", { class: "ez-modal-container__close-icon", size: "medium", iconName: "close" })))))), h("div", { tabIndex: -1, class: "ez-modal-container__content" }, h("slot", null)), h("div", { tabIndex: -1, class: "ez-modal-container__footer" }, this.cancelIsVisible() && (h("ez-button", { label: this.cancelButtonLabel, enabled: this.cancelButtonStatus !== ModalButtonStatus.DISABLED, onClick: () => this.ezModalAction.emit(ModalAction.CANCEL) })), this.okIsVisible() && (h("ez-button", { ref: ref => this._okButton = ref, class: "ez-button--primary", label: this.okButtonLabel, enabled: this.okButtonStatus !== ModalButtonStatus.DISABLED, onClick: () => this.ezModalAction.emit(ModalAction.OK) }))), h("button", { class: "ez-modal-container__focus-ctrl", onFocusin: () => this.focusFirst() })));
+    return (h(Host, null, h("button", { class: "ez-modal-container__focus-ctrl", onFocusin: () => this.focusLast() }), h("div", { ref: ref => this._modalRef = ref, tabIndex: -1, class: "ez-modal-container__header-container" }, this.showTitleBar && (h("div", { class: "ez-modal-container__header ez-margin-bottom--medium" }, h("div", { class: "ez-col ez-align--middle ez-modal-container__title" }, h("h2", { class: "ez-text ez-title--large ez-title--primary ez-text--bold ez-margin-vertical--extra-small" }, this.modalTitle), this.modalSubTitle && (h("div", { class: "ez-text ez-text--medium ez-text--primary ez-margin-vertical--extra-small" }, this.modalSubTitle))), (this.showCloseButton && h("button", { ref: ref => this._closeButton = ref, class: "ez-modal-container__close-button", onClick: () => this.ezModalAction.emit(ModalAction.CLOSE), "aria-label": this.i18n("app.close") }, h("ez-icon", { class: "ez-modal-container__close-icon", size: "medium", iconName: "close" })))))), h("div", { tabIndex: -1, class: "ez-modal-container__content" }, h("slot", null)), h("div", { tabIndex: -1, class: "ez-modal-container__footer" }, this.cancelIsVisible() && (h("ez-button", { label: this.cancelButtonLabel || this.i18n("app.cancel"), enabled: this.cancelButtonStatus !== ModalButtonStatus.DISABLED, onClick: () => this.ezModalAction.emit(ModalAction.CANCEL) })), this.okIsVisible() && (h("ez-button", { ref: ref => this._okButton = ref, class: "ez-button--primary", label: this.okButtonLabel || this.i18n("app.ok"), enabled: this.okButtonStatus !== ModalButtonStatus.DISABLED, onClick: () => this.ezModalAction.emit(ModalAction.OK) }))), h("button", { class: "ez-modal-container__focus-ctrl", onFocusin: () => this.focusFirst() })));
   }
   static get is() { return "ez-modal-container"; }
   static get encapsulation() { return "scoped"; }

package/dist/collection/components/ez-multi-selection-list/ez-multi-selection-list.js

@@ -1,3 +1,4 @@
+import initI18n from '../../utils/i18n';
 import { ArrayUtils } from '@sankhyalabs/core';
 import { Fragment, h, Host } from '@stencil/core';
 var ViewScenarios;
@@ -20,6 +21,9 @@ export class EzMuiltiSelectionList {
     this.viewScenario = undefined;
     this.displayOptionToCheckAllItems = true;
   }
+  async componentWillLoad() {
+    this.i18n = await initI18n();
+  }
   async clearFilteredOptions() {
     this.setInitialScenario();
     this.filteredOptions = [];
@@ -55,7 +59,7 @@ export class EzMuiltiSelectionList {
     let emptyElement;
     filteredOptions.forEach(item => {
       if (item.value == undefined || item.label === "") {
-        emptyElement = Object.assign(Object.assign({}, item), { label: "(Vazio)" });
+        emptyElement = Object.assign(Object.assign({}, item), { label: this.i18n("ez-multi-selection-list.empty") });
       }
       else {
         (item.check ? listWithSelectChecked.push(item) : listWithNotSelectChecked.push(item));
@@ -141,16 +145,16 @@ export class EzMuiltiSelectionList {
     itemSelected.check = itemCheckSelected.check;
   }
   buildViewList(hasDelete) {
-    return (h(Fragment, null, this.displayOptionToCheckAllItems && (h("ez-check", { ref: (element) => (this.checkInput = element), label: "Selecionar todos", class: "multi-selection__select-all", onEzChange: this.handleChangeSelectAllItems.bind(this) })), h("ez-list", { class: "multi-selection__list", dataSource: this.displayOptions, listMode: "check", hoverFeedback: true, onEzCheckChange: this.handleChangeSelectedItem.bind(this), itemSlotBuilder: hasDelete ? this.buildDeleteIconSlot.bind(this) : null })));
+    return (h(Fragment, null, this.displayOptionToCheckAllItems && (h("ez-check", { ref: (element) => (this.checkInput = element), label: this.i18n("ez-multi-selection-list.selectAll"), class: "multi-selection__select-all", onEzChange: this.handleChangeSelectAllItems.bind(this) })), h("ez-list", { class: "multi-selection__list", dataSource: this.displayOptions, listMode: "check", hoverFeedback: true, onEzCheckChange: this.handleChangeSelectedItem.bind(this), itemSlotBuilder: hasDelete ? this.buildDeleteIconSlot.bind(this) : null })));
   }
   buildDeleteIconSlot(item) {
     return h("ez-icon", { style: { cursor: 'pointer' }, iconName: "delete", onClick: () => this.handleRemoveItemFromOptions(item) });
   }
   buildInitViewWithDataSource() {
-    return h("multi-selection-box-message", { message: "Selecione os valores a serem filtrados atrav\u00E9s do campo de busca." });
+    return h("multi-selection-box-message", { message: this.i18n("ez-multi-selection-list.initMessage") });
   }
   buildViewEmptyResults() {
-    return h("multi-selection-box-message", { message: "Nenhum resultado encontrado." });
+    return h("multi-selection-box-message", { message: this.i18n("ez-multi-selection-list.emptyResults") });
   }
   scenarioToDisplay(view) {
     const scenarios = {
@@ -164,7 +168,7 @@ export class EzMuiltiSelectionList {
     return scenarioBuilder ? scenarioBuilder() : undefined;
   }
   render() {
-    return (h(Host, null, h("div", { class: "multi-selection" }, this.useOptions ? (h("ez-filter-input", { ref: (element) => (this.filterInput = element), label: `Buscar..`, onEzChange: this.handleSearchOnOption.bind(this) })) : (h("ez-search", { class: "multi-selection__input", label: `Buscar...`, ref: (element) => (this.searchInput = element), suppressEmptyOption: true, showOptionValue: false, showSelectedValue: false, optionLoader: (search) => this.searchWithDataSource(search, this.columnName), onEzChange: this.handleSearchOnDataSource.bind(this), isTextSearch: this.isTextSearch })), h("ez-scroll", { class: "multi-selection__content-options" }, this.scenarioToDisplay(this.viewScenario)))));
+    return (h(Host, null, h("div", { class: "multi-selection" }, this.useOptions ? (h("ez-filter-input", { ref: (element) => (this.filterInput = element), label: this.i18n("ez-multi-selection-list.search"), onEzChange: this.handleSearchOnOption.bind(this) })) : (h("ez-search", { class: "multi-selection__input", label: this.i18n("ez-multi-selection-list.search"), ref: (element) => (this.searchInput = element), suppressEmptyOption: true, showOptionValue: false, showSelectedValue: false, optionLoader: (search) => this.searchWithDataSource(search, this.columnName), onEzChange: this.handleSearchOnDataSource.bind(this), isTextSearch: this.isTextSearch })), h("ez-scroll", { class: "multi-selection__content-options" }, this.scenarioToDisplay(this.viewScenario)))));
   }
   static get is() { return "ez-multi-selection-list"; }
   static get encapsulation() { return "scoped"; }

package/dist/collection/components/ez-number-input/ez-number-input.js

@@ -1,6 +1,7 @@
 import { ElementIDUtils, NumberUtils, StringUtils } from "@sankhyalabs/core";
 import { h } from "@stencil/core";
 import CSSVarsUtils from "../../utils/CSSVarsUtils";
+import initI18n from '../../utils/i18n';
 export class EzNumberInput {
   constructor() {
     this._focused = false;
@@ -124,7 +125,7 @@ export class EzNumberInput {
     try {
       const parsedNumber = this.getParsedNumber();
       if (parsedNumber !== undefined && isNaN(parsedNumber)) {
-        this.setError("O valor digitado não é um número válido");
+        this.setError(this.i18n("ez-number-input.invalidNumber"));
       }
       else {
         try {
@@ -161,6 +162,9 @@ export class EzNumberInput {
       this._textInput.value = this._value;
     }
   }
+  async componentWillLoad() {
+    this.i18n = await initI18n();
+  }
   componentDidLoad() {
     CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
     this.setInputValue();

package/dist/collection/components/ez-popover-plus/subcomponent/ez-popover-core.css

@@ -9,7 +9,8 @@
   --ez-popover__box--background-color: var(--background--xlight, #fff);
   /*@doc Define a camada de visibilidade do popover.*/
   --ez-popover__box--z-index: var(--elevation--100, 100);
-
+  /*@doc Define a camada de visibilidade do popover overlay.*/
+  --ez-popover__box--overlay-z-index: var(--elevation--24, 24);
   /***************
      host style  
   ***************/
@@ -28,7 +29,7 @@
   width: 100%;
   height: 100vh;
   box-sizing: border-box;
-  z-index: var(--elevation--24, 24);
+  z-index: var(--ez-popover__box--overlay-z-index);
 }
 
 .popover__overlay--light {

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