@sankhyalabs/ezui 6.0.2 → 6.1.0-dev.10

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

@@ -3,6 +3,7 @@ import { h, Host } from "@stencil/core";
 export class EzIcon {
   constructor() {
     this.size = "medium";
+    this.fontSize = undefined;
     this.href = undefined;
     this.iconName = undefined;
   }
@@ -16,12 +17,17 @@ export class EzIcon {
     if (this.isSprite()) {
       return h("svg", { class: this.size, role: "img" }, h("use", { xlinkHref: this.href }));
     }
-    else if (!StringUtils.isEmpty(this.iconName)) {
-      return h("span", { class: `icon-content ${this.getIconClassName()}  ${this.size}--font` });
-    }
-    else {
-      return h("img", { class: this.size, src: this.href });
+    if (!StringUtils.isEmpty(this.iconName)) {
+      return h("span", { style: this.getStyle(), class: `icon-content ${this.getIconClassName()}  ${this.size}--font` });
     }
+    return h("img", { class: this.size, src: this.href });
+  }
+  getStyle() {
+    if (!this.fontSize)
+      return undefined;
+    return {
+      fontSize: `${this.fontSize}px`,
+    };
   }
   componentDidLoad() {
     ElementIDUtils.addIDInfo(this._hostElement, "icon");
@@ -61,6 +67,23 @@ export class EzIcon {
         "reflect": true,
         "defaultValue": "\"medium\""
       },
+      "fontSize": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "number | string",
+          "resolved": "number | string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Define o tamanho da fonte."
+        },
+        "attribute": "font-size",
+        "reflect": true
+      },
       "href": {
         "type": "string",
         "mutable": false,

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

@@ -576,7 +576,7 @@ export class EzList {
     return { id: item.id, label: item.label, check: evt.detail };
   }
   renderListWithGroups() {
-    return h("div", { class: 'group-container', ref: el => (this._groupContainer = el), tabIndex: 0, onKeyDown: event => this.keyDownHandler(event) }, this._listGroupItems.map(group => {
+    return h("div", { class: 'group-container', ref: el => (this._groupContainer = el), tabIndex: this.ezSelectable ? 0 : undefined, onKeyDown: event => this.keyDownHandler(event) }, this._listGroupItems.map(group => {
       return (h("div", { id: this.getDivGroupId(group.group), class: 'group', key: group.group + group.items.length, onDrop: () => this.onDropGroup(group) }, h("label", { draggable: false, class: 'group-name', title: group.group }, group.group), h("section", { class: 'section-container', onDragOver: ev => ev.preventDefault() }, h("div", { class: 'group-items-container' }, h("div", { class: 'draggable-list' }, group.items.map((item, index) => (h("li", Object.assign({ id: 'item_' + item.id, class: {
           'selectable-container': this.ezSelectable,
           'hover-feedback': this.hoverFeedback,
@@ -586,7 +586,7 @@ export class EzList {
     }));
   }
   renderList() {
-    return h("div", { class: 'items-container', ref: el => (this._itemContainer = el), tabIndex: 0, onKeyDown: event => {
+    return h("div", { class: 'items-container', ref: el => (this._itemContainer = el), tabIndex: this.ezSelectable ? 0 : undefined, onKeyDown: event => {
         this.keyDownHandler(event);
       } }, h("div", { class: 'draggable-list' }, this._listItems.map((item, index) => (h("li", Object.assign({ id: 'item_' + item.id, class: {
         'selectable-container': this.ezSelectable,

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

@@ -25,7 +25,7 @@ export class EzModal {
   }
   componentDidLoad() {
     this.observeOpened();
-    new KeyboardManager({ propagate: false, element: this._element })
+    this._keyboardManager = new KeyboardManager({ propagate: false, element: this._element, enableShadowDom: true })
       .bind("Enter", this.ezModalAction.emit.bind("OK"))
       .bind("Escape", () => this.closeModal())
       .bind("Esc", () => this.closeModal());
@@ -33,6 +33,10 @@ export class EzModal {
   componentDidRender() {
     this.modalFocus();
   }
+  disconnectedCallback() {
+    var _a;
+    (_a = this._keyboardManager) === null || _a === void 0 ? void 0 : _a.unbindAllShortcutKeys();
+  }
   modalFocus() {
     if (!this.opened) {
       return;

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

@@ -16,11 +16,13 @@
   flex-wrap: nowrap;
   flex-direction: row;
   justify-content: space-between;
+  align-items: start;
 }
 
 .ez-modal-container__content {
   overflow-y: var(--ez-modal-container-overflow-y);
   overflow-x: var(--ez-modal-container-overflow-x);
+  outline: none;
 }
 
 .ez-modal-container__content::-webkit-scrollbar {
@@ -47,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

@@ -30,11 +30,15 @@ export class EzModalContainer {
       this.ezModalAction.emit(ModalAction.LOAD);
       this._modalRef.focus();
     });
-    new KeyboardManager({ propagate: false, element: this._element })
+    this._keyboardManager = new KeyboardManager({ propagate: false, element: this._element })
       .bind("Enter", this.ezModalAction.emit.bind(ModalAction.OK))
       .bind("Escape", () => this.closeModal())
       .bind("Esc", () => this.closeModal());
   }
+  disconnectedCallback() {
+    var _a;
+    (_a = this._keyboardManager) === null || _a === void 0 ? void 0 : _a.unbindAllShortcutKeys();
+  }
   closeModal() {
     this.ezModalAction.emit("CLOSE");
   }
@@ -48,7 +52,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", { class: "ez-modal-container__content" }, h("slot", null)), h("div", { 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) }, 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() })));
   }
   static get is() { return "ez-modal-container"; }
   static get encapsulation() { return "scoped"; }

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

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

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

@@ -17,6 +17,7 @@ export class EzNumberInput {
     this.prettyPrecision = undefined;
     this.mode = "regular";
     this.autoFocus = false;
+    this.alternativePlaceholder = undefined;
   }
   /**
    * Aplica o foco no campo.
@@ -175,7 +176,7 @@ export class EzNumberInput {
     if (this.allowNegative) {
       restrict += '-';
     }
-    return (h("ez-text-input", { class: "number__input", "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), ref: elem => this._textInput = elem, "data-slave-mode": "true", label: this.label, onBlur: () => this.handleBlur(), onInput: () => this.handleInput(), restrict: restrict, enabled: this.enabled, errorMessage: this.errorMessage, mode: this.mode, canShowError: this.canShowError, value: this._value }));
+    return (h("ez-text-input", { class: "number__input", "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), ref: elem => this._textInput = elem, "data-slave-mode": "true", label: this.label, onBlur: () => this.handleBlur(), onInput: () => this.handleInput(), restrict: restrict, enabled: this.enabled, errorMessage: this.errorMessage, mode: this.mode, canShowError: this.canShowError, value: this._value, alternativePlaceholder: this.alternativePlaceholder }));
   }
   static get is() { return "ez-number-input"; }
   static get encapsulation() { return "shadow"; }
@@ -365,6 +366,23 @@ export class EzNumberInput {
         "attribute": "auto-focus",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "alternativePlaceholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Texto alternativo a ser apresentado como t\u00EDtulo do campo."
+        },
+        "attribute": "alternative-placeholder",
+        "reflect": false
       }
     };
   }

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

@@ -25,11 +25,15 @@ export class EzPopup {
     if (this.opened && this._popupRef) {
       this._popupRef.focus();
     }
-    new KeyboardManager({ propagate: false, element: this._element })
+    this._keyboardManager = new KeyboardManager({ propagate: false, element: this._element, enableShadowDom: true })
       .bind("Enter", this.ezPopupAction.emit.bind("OK"))
       .bind("Escape", () => this.closePopup())
       .bind("Esc", () => this.closePopup());
   }
+  disconnectedCallback() {
+    var _a;
+    (_a = this._keyboardManager) === null || _a === void 0 ? void 0 : _a.unbindAllShortcutKeys();
+  }
   closePopup() {
     this.opened = false;
     this.manageOverflow();

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