@sankhyalabs/ezui 0.0.0-bugfix-dev-KB-08202.0

package/dist/esm/ez-text-input.entry.js

@@ -0,0 +1,243 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-296b8458.js';
+import { MaskFormatter, ElementIDUtils } from '@sankhyalabs/core';
+
+const ezTextInputCss = ":host{--ez-text-input--height:42px;--ez-text-input--width:100%;--ez-text-input__icon--width:48px;--ez-text-input--height--slim:32px;--ez-text-input--border-radius:var(--border--radius-medium, 12px);--ez-text-input--font-size:var(--text--medium, 14px);--ez-text-input--font-family:var(--font-pattern, Arial);--ez-text-input--font-weight:var(--text-weight--medium, 400);--ez-text-input--color:var(--title--primary, #2B3A54);--ez-text-input__input--background-color:var(--background--medium, #e0e0e0);--ez-text-input__input--border:var(--border--medium, 2px solid);--ez-text-input__input--border-color:var(--ez-text-input__input--background-color);--ez-text-input__input--focus--border-color:var(--color--primary, #008561);--ez-text-input__input--disabled--background-color:var(--color--disable-secondary, #F2F5F8);--ez-text-input__input--disabled--color:var(--text--disable, #AFB6C0);--ez-text-input__input--error--border-color:#CC2936;--ez-text-input__input--noborder-color:white;--ez-text-input__input--padding:var(--space--medium, 6px);--ez-text-input__message_box--font-size:var(--text--small, 12px);--ez-text-input__message_box--info--color:var(--color--success, #22085d);--ez-text-input__message_box--error--color:var(--color--error, #FF0000);--ez-text-input__label--floating--top:6px;--ez-text-input__label--padding-top:12px;--ez-text-input__label--padding-left:14px;--ez-text-input__label--padding-right:12px;--ez-text-input__input--focus--icon-color:var(--ez-text-input__input--focus--border-color);display:flex;flex-wrap:wrap;position:relative;width:var(--ez-text-input--width)}:host(.grid_editor){--ez-text-input--height--slim:25px}input{width:100%;box-sizing:border-box;height:var(--ez-text-input--height);border-radius:var(--ez-text-input--border-radius);font-family:var(--ez-text-input--font-family);font-size:var(--ez-text-input--font-size);border:var(--ez-text-input__input--border);border-color:var(--ez-text-input__input--border-color);background-color:var(--ez-text-input__input--background-color);color:var(--ez-text-input--color);font-weight:var(--ez-text-input--font-weight);padding:var(--ez-text-input__input--padding)}input:disabled{background-color:var(--ez-text-input__input--disabled--background-color);color:var(--ez-text-input__input--disabled--color)}input:focus{outline:none;border-color:var(--ez-text-input__input--focus--border-color)}input.icon--left{padding-left:var(--ez-text-input__icon--width)}input.icon--right{padding-right:var(--ez-text-input__icon--width)}input.hasError{color:var(--ez-text-input--color);border-color:var(--ez-text-input__input--error--border-color)}input:disabled.hasError{color:var(--ez-text-input__input--disabled--color)}input.text--right{text-align:right}input:read-only{cursor:default}.message-box{min-height:16px;min-width:100%;margin-top:3px;line-height:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--ez-text-input--font-family);font-size:var(--ez-text-input__message_box--font-size);color:var(--ez-text-input__message_box--info--color)}.hasError{color:var(--ez-text-input__message_box--error--color)}.input__label{box-sizing:border-box;position:absolute;z-index:var(--visible);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-transition:font-size .05s, top .05s;transition:font-size .05s, top .05s;width:calc(100% - var(--ez-text-input__label--padding-right));left:var(--ez-text-input--space--medium);font-family:var(--ez-text-input--font-family);font-size:var(--ez-text-input--font-size);font-weight:var(--ez-text-input--font-weight);color:var(--ez-text-input--color);top:var(--ez-text-input__label--padding-top);left:var(--ez-text-input__label--padding-left);padding-right:var(--ez-text-input__label--padding-right)}.input__label--floated{font-family:var(--ez-text-input--font-family);font-size:var(--text--extra-small);color:var(--text--primary);top:var(--ez-text-input__label--floating--top)}.input__label--disabled{color:var(--ez-text-input__input--disabled--color)}.input__label--left{text-align:left;left:calc(var(--ez-text-input__icon--width) + 2px);width:calc(100% - var(--ez-text-input__icon--width))}.input__label--right{right:var(--ez-text-input__icon--width);width:calc(100% - var(--ez-text-input__icon--width))}.input__label--left.input__label--right{left:calc(var(--ez-text-input__icon--width) + 2px);width:calc(100% - var(--ez-text-input__icon--width) * 2)}.input--with--label{padding-bottom:0}.input--slim{padding-top:var(--space--small, 3px);padding-bottom:var(--space--small, 3px);height:var(--ez-text-input--height--slim)}.input__slim--title{font-size:16px;font-weight:bold}.input--slim::-webkit-input-placeholder{font-family:var(--ez-text-input--font-family);font-size:var(--ez-text-input--font-size);font-weight:var(--ez-text-input--font-weight);color:var(--ez-text-input--color)}.input--slim:-moz-placeholder{font-family:var(--ez-text-input--font-family);font-size:var(--ez-text-input--font-size);font-weight:var(--ez-text-input--font-weight);color:var(--ez-text-input--color)}.input--slim::-moz-placeholder{font-family:var(--ez-text-input--font-family);font-size:var(--ez-text-input--font-size);font-weight:var(--ez-text-input--font-weight);color:var(--ez-text-input--color)}.input--slim:-ms-input-placeholder{font-family:var(--ez-text-input--font-family);font-size:var(--ez-text-input--font-size);font-weight:var(--ez-text-input--font-weight);color:var(--ez-text-input--color)}.input--slim::placeholder{font-family:var(--ez-text-input--font-family);font-size:var(--ez-text-input--font-size);font-weight:var(--ez-text-input--font-weight);color:var(--ez-text-input--color)}.input--slim:disabled::-webkit-input-placeholder{color:var(--ez-text-input__input--disabled--color)}.input--slim:disabled:-moz-placeholder{color:var(--ez-text-input__input--disabled--color)}.input--slim:disabled::-moz-placeholder{color:var(--ez-text-input__input--disabled--color)}.input--slim:disabled:-ms-input-placeholder{color:var(--ez-text-input__input--disabled--color)}.input--slim:disabled::placeholder{color:var(--ez-text-input__input--disabled--color)}input.input__slim--noborder{box-shadow:0 0 0 0;border:0 none;outline:0;background:var(--ez-text-input__input--noborder-color)}";
+
+const EzTextInput = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.ezChange = createEvent(this, "ezChange", 7);
+    this.label = undefined;
+    this.value = undefined;
+    this.enabled = true;
+    this.errorMessage = undefined;
+    this.mask = undefined;
+    this.canShowError = true;
+    this.restrict = undefined;
+    this.mode = "regular";
+    this.noBorder = false;
+  }
+  observeErrorMessage() {
+    if (this._inputElem) {
+      this.isInvalid().then((hasError) => {
+        var _a, _b;
+        if (hasError) {
+          this._inputElem.classList.add("hasError");
+          (_a = this._messageBoxElem) === null || _a === void 0 ? void 0 : _a.classList.add("hasError");
+        }
+        else {
+          this._inputElem.classList.remove("hasError");
+          (_b = this._messageBoxElem) === null || _b === void 0 ? void 0 : _b.classList.remove("hasError");
+        }
+      });
+    }
+  }
+  observeMask() {
+    if (this.mask) {
+      if (this._maskFormatter == undefined) {
+        this._maskFormatter = new MaskFormatter(this.mask);
+      }
+      else {
+        this._maskFormatter.mask = this.mask;
+      }
+    }
+  }
+  observeValue(newValue, oldValue) {
+    if (this._inputElem) {
+      if (newValue != oldValue) {
+        this._inputElem.value = this.value || "";
+        this.handleChange();
+        this.adjustFloatingLabel();
+        if (!this.isSlaveMode()) {
+          this.errorMessage = "";
+          this.ezChange.emit(this.value);
+        }
+      }
+    }
+  }
+  //---------------------------------------------
+  // Private methods
+  //---------------------------------------------
+  adjustFloatingLabel() {
+    if (this.label && this._labelElem) {
+      if (this._inputElem && !this._inputElem.classList.contains("input--with--label")) {
+        this._inputElem.classList.add("input--with--label");
+      }
+      const hasValue = this.value && this.value.toString().length > 0;
+      const containsFloatedClass = this._labelElem.classList.contains("input__label--floated");
+      if (hasValue || this.isFocused()) {
+        if (!containsFloatedClass) {
+          this._labelElem.classList.add("input__label--floated");
+        }
+      }
+      else {
+        if (containsFloatedClass) {
+          this._labelElem.classList.remove("input__label--floated");
+        }
+      }
+    }
+  }
+  isFocused() {
+    return this._hostElement.shadowRoot.activeElement !== null;
+  }
+  isSlaveMode() {
+    var _a, _b;
+    return ((_b = (_a = this._hostElement) === null || _a === void 0 ? void 0 : _a.dataset) === null || _b === void 0 ? void 0 : _b.slaveMode) === "true";
+  }
+  adjustColorContentSlot(color = "") {
+    if (this._contentLeftSlot) {
+      this._contentLeftSlot.style.color = color;
+    }
+  }
+  adjustBorderInput() {
+    if (this.noBorder) {
+      this._inputElem.classList.add("input__slim--noborder");
+    }
+  }
+  //---------------------------------------------
+  // Public methods
+  //---------------------------------------------
+  /**
+   * Aplica o foco no campo.
+   */
+  async setFocus(options) {
+    const { selectText } = options || {};
+    if (selectText)
+      this._inputElem.select();
+    this._inputElem.focus();
+  }
+  /**
+   * Remove o foco do campo.
+   */
+  async setBlur() {
+    this._inputElem.blur();
+  }
+  /**
+   * Retorna se o conteúdo é inválido.
+   */
+  async isInvalid() {
+    return typeof this.errorMessage === "string" && this.errorMessage.trim() !== "";
+  }
+  //---------------------------------------------
+  // Event handlers
+  //---------------------------------------------
+  handleFocusout() {
+    const value = this._inputElem.value;
+    if (value && this._maskFormatter) {
+      try {
+        this._inputElem.value = this._maskFormatter.format(value);
+      }
+      catch (e) {
+        this.errorMessage = e.message;
+      }
+    }
+    this.controlChangeValue();
+    this.adjustFloatingLabel();
+    this.adjustColorContentSlot();
+  }
+  isValidValue(value) {
+    if (this.restrict) {
+      return Array.from(value).reduce((valid, c) => valid && this.restrict.indexOf(c) > -1, true);
+    }
+    return true;
+  }
+  controlChangeValue() {
+    if (this._inputElem && (this.value || '') !== this._inputElem.value) {
+      this.value = this._inputElem.value;
+    }
+  }
+  handleChange() {
+    if (!this._inputElem) {
+      return;
+    }
+    const value = this._inputElem.value;
+    if (this.isValidValue(value)) {
+      this._lastValidValue = value;
+    }
+    else {
+      this._inputElem.value = this._lastValidValue == undefined ? "" : this._lastValidValue;
+    }
+    this.controlChangeValue();
+  }
+  handleSlotChange(ev) {
+    const slot = ev.target;
+    const content = slot.assignedElements()[0];
+    if (content) {
+      content.style.position = "absolute";
+      content.style.display = "flex";
+      content.style.alignItems = "center";
+      content.style.justifyContent = "center";
+      content.style.overflow = "hidden";
+      content.style.top = "0px";
+      content.style.width = "var(--ez-text-input__icon--width)";
+      content.style.height = this.mode != "slim" ? "var(--ez-text-input--height)" : "var(--ez-text-input--height--slim)";
+      if (slot.name == "leftIcon") {
+        content.style.left = "0px";
+        content.style.borderRadius = "var(--ez-text-input--border-radius) 0 0 var(--ez-text-input--border-radius)";
+        this._inputElem.classList.add("icon--left");
+        if (this._labelElem) {
+          this._labelElem.classList.add("input__label--left");
+        }
+        this._contentLeftSlot = content;
+      }
+      else if (slot.name == "rightIcon") {
+        content.style.right = "0px";
+        content.style.borderRadius = "0 var(--ez-text-input--border-radius) var(--ez-text-input--border-radius) 0";
+        this._inputElem.classList.add("icon--right");
+        if (this._labelElem) {
+          this._labelElem.classList.add("input__label--right");
+        }
+      }
+      slot.name && ElementIDUtils.addIDInfo(content, slot.name);
+    }
+    this.observeErrorMessage();
+  }
+  doFocus() {
+    if (this.label && this._labelElem && !this._labelElem.classList.contains("input__label--floated")) {
+      this._labelElem.classList.add("input__label--floated");
+    }
+    this.adjustColorContentSlot("var(--ez-text-input__input--focus--icon-color)");
+  }
+  //---------------------------------------------
+  // Lifecycle web component
+  //---------------------------------------------
+  componentDidLoad() {
+    this.observeErrorMessage();
+    this.observeMask();
+    this.adjustFloatingLabel();
+    this.adjustBorderInput();
+  }
+  componentWillLoad() {
+    this.observeMask();
+    if (this.value) {
+      if (this._maskFormatter) {
+        try {
+          this.value = this._maskFormatter.format(this.value);
+        }
+        catch (e) {
+          this.errorMessage = e.message;
+        }
+      }
+      if (!this.isValidValue(this.value)) {
+        this._lastValidValue = "";
+        this.value = "";
+      }
+    }
+  }
+  render() {
+    ElementIDUtils.addIDInfoIfNotExists(this._hostElement, 'input');
+    return (h(Host, { style: this._hostElement.classList.contains("grid_editor") ? { "height": "100%" } : null }, h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label && this.mode != "slim" ?
+      h("label", { ref: (el) => this._labelElem = el, class: this.enabled ? "input__label" : "input__label input__label--disabled", onClick: () => this._inputElem.focus(), title: this.label }, this.label)
+      : null, h("input", { "data-element-id": ElementIDUtils.getInternalIDInfo("input"), onFocus: () => this.doFocus(), ref: (el) => this._inputElem = el, type: "text", class: this.mode === "slim" ? "input--slim" : "", placeholder: this.mode === "slim" && this.label ? this.label : "", value: this.value, disabled: !this.enabled, onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); } }), h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.canShowError && this.mode != "slim" &&
+      h("span", { class: "message-box", ref: (el) => this._messageBoxElem = el, title: this.errorMessage, "data-element-id": ElementIDUtils.getInternalIDInfo("message_box") }, this.errorMessage)));
+  }
+  get _hostElement() { return getElement(this); }
+  static get watchers() { return {
+    "errorMessage": ["observeErrorMessage"],
+    "mask": ["observeMask"],
+    "value": ["observeValue"]
+  }; }
+};
+EzTextInput.style = ezTextInputCss;
+
+export { EzTextInput as ez_text_input };

package/dist/esm/ez-time-input.entry.js

@@ -0,0 +1,164 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-296b8458.js';
+import { TimeFormatter, MaskFormatter, NumberUtils, ElementIDUtils } from '@sankhyalabs/core';
+import { C as CSSVarsUtils } from './CSSVarsUtils-a97cfa29.js';
+
+const ezTimeInputCss = ":host{display:flex;flex-wrap:wrap;position:relative;width:100%}.time__input{height:100%}";
+
+const EzTimeInput = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.ezChange = createEvent(this, "ezChange", 7);
+    this.ezStartChange = createEvent(this, "ezStartChange", 7);
+    this.ezCancelWaitingChange = createEvent(this, "ezCancelWaitingChange", 7);
+    this.label = undefined;
+    this.value = undefined;
+    this.enabled = true;
+    this.errorMessage = undefined;
+    this.showSeconds = false;
+    this.mode = "regular";
+    this.canShowError = true;
+  }
+  observeErrorMessage() {
+    var _a;
+    if (this._textInput) {
+      this._textInput.errorMessage = this.errorMessage;
+      if (!((_a = this.errorMessage) === null || _a === void 0 ? void 0 : _a.trim())) {
+        this.prepareValue(this._viewValue);
+        if ((this._textInput.value || '') !== this._viewValue) {
+          this._textInput.value = this._viewValue;
+        }
+      }
+    }
+  }
+  observeShowSeconds() {
+    if (this.showSeconds) {
+      this.prepareMask("##:##:##");
+    }
+    else {
+      this.prepareMask("##:##");
+    }
+  }
+  observeValue(newValue, oldValue) {
+    if (this._textInput && newValue != oldValue) {
+      let newValueValidated = this.validateValue(newValue);
+      const oldValueValidated = this.validateValue(oldValue);
+      if (newValueValidated != oldValueValidated) {
+        this._viewValue = newValueValidated == undefined ? "" : newValueValidated.toString();
+        this.prepareValue(this._viewValue);
+        if (this._viewValue && !TimeFormatter.validateTime(this._viewValue, this.showSeconds)) {
+          this.setError("Favor inserir um horário válido.");
+          newValueValidated = undefined;
+        }
+        else {
+          this.setError("");
+        }
+        const valueEmitted = newValueValidated === null ? undefined : newValueValidated;
+        this.ezChange.emit(valueEmitted);
+      }
+    }
+  }
+  //---------------------------------------------
+  // Private methods
+  //---------------------------------------------
+  prepareMask(mask) {
+    if (this._maskFormatter == undefined) {
+      this._maskFormatter = new MaskFormatter(mask);
+    }
+    else {
+      this._maskFormatter.mask = mask;
+    }
+  }
+  validateValue(value) {
+    return isNaN(value) || value === undefined ? null : value;
+  }
+  setError(msg) {
+    this.errorMessage = msg;
+    if (this._textInput && (msg === null || msg === void 0 ? void 0 : msg.trim())) {
+      this.ezCancelWaitingChange.emit();
+    }
+  }
+  //---------------------------------------------
+  // Public methods
+  //---------------------------------------------
+  getViewValue() {
+    return this._viewValue;
+  }
+  prepareValue(value) {
+    try {
+      this._viewValue = TimeFormatter.prepareValue(value, this.showSeconds);
+      if (this._textInput && this._textInput.value !== this._viewValue) {
+        this._textInput.value = this._viewValue;
+      }
+    }
+    catch (e) {
+      this.setError(e.message);
+    }
+  }
+  /**
+   * Aplica o foco no campo.
+   */
+  async setFocus({ selectText }) {
+    this._textInput.setFocus({ selectText });
+  }
+  /**
+   * Remove o foco do campo.
+   */
+  async setBlur() {
+    this._textInput.setBlur();
+  }
+  /**
+   * Retorna se o conteúdo é inválido.
+   */
+  async isInvalid() {
+    return typeof this.errorMessage === "string" && this.errorMessage.trim() !== "";
+  }
+  //---------------------------------------------
+  // Event handlers
+  //---------------------------------------------
+  handleBlur() {
+    if (this._textInput) {
+      this._viewValue = this._textInput.value;
+      this.prepareValue(this._viewValue);
+      const value = NumberUtils.stringToNumber(this._viewValue.replace(/\D/g, ""));
+      this.value = ['string', 'number'].includes(typeof value) ? value : null;
+    }
+  }
+  handleInput() {
+    const textInputValue = this._textInput.value;
+    if (!['string', 'number'].includes(typeof textInputValue))
+      return;
+    const parsedNumber = NumberUtils.stringToNumber(textInputValue.replace(/\D/g, ""));
+    if (parsedNumber !== this.value) {
+      this.ezStartChange.emit({ waitmessage: "", blocking: false });
+    }
+  }
+  //---------------------------------------------
+  // Lifecycle web component
+  //---------------------------------------------
+  componentDidLoad() {
+    CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
+  }
+  componentWillLoad() {
+    this.observeShowSeconds();
+    if (this.value) {
+      this.prepareValue(this.value.toString());
+    }
+    else if (this._viewValue) {
+      this.prepareValue(this._viewValue);
+    }
+  }
+  render() {
+    ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
+    return (h(Host, null, h("ez-text-input", { class: "time__input", "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), ref: (el) => this._textInput = el, "data-slave-mode": "true", value: this._viewValue, enabled: this.enabled, label: this.label, restrict: "0123456789:", onBlur: () => this.handleBlur(), onInput: () => this.handleInput(), errorMessage: this.errorMessage, mode: this.mode, canShowError: this.canShowError }, h("ez-icon", { slot: "leftIcon", iconName: "timer-outline" }))));
+  }
+  static get assetsDirs() { return ["../assets"]; }
+  get _elem() { return getElement(this); }
+  static get watchers() { return {
+    "errorMessage": ["observeErrorMessage"],
+    "showSeconds": ["observeShowSeconds"],
+    "value": ["observeValue"]
+  }; }
+};
+EzTimeInput.style = ezTimeInputCss;
+
+export { EzTimeInput as ez_time_input };

package/dist/esm/ez-toast.entry.js

@@ -0,0 +1,97 @@
+import { r as registerInstance, f as forceUpdate, h, H as Host, g as getElement } from './index-296b8458.js';
+import { ElementIDUtils } from '@sankhyalabs/core';
+
+const ezToastCss = ":host{--ez-toast__btn__close__image:url('data:image/svg+xml;utf8,<svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" xmlns=\"http://www.w3.org/2000/svg%22%3E<path d=\"M 7.0060773,5.995511 11.461972,1.5397722 c 0.132856,-0.1328413 0.207547,-0.3130253 0.207547,-0.5009046 0,-0.18786999 -0.07469,-0.3680541 -0.207547,-0.5009048 -0.132857,-0.13284126 -0.31302,-0.20748126 -0.500927,-0.20748126 -0.187812,0 -0.36807,0.07464 -0.500926,0.20748126 L 6.0042244,4.9937015 1.5482921,0.5379628 C 1.4154357,0.40512154 1.2352533,0.33048154 1.0473657,0.33048154 c -0.18787813,0 -0.36807,0.07464 -0.50092647,0.20748126 -0.13285646,0.1328507 -0.20749026,0.31303481 -0.20749026,0.5009048 0,0.1878793 0.0746338,0.3680633 0.20749026,0.5009046 L 5.0023715,5.995511 0.54643923,10.452213 c -0.0676086,0.06534 -0.12151598,0.14352 -0.15859681,0.229916 -0.0370714,0.08639 -0.0565645,0.1794 -0.0573369,0.27335 -7.724e-4,0.09404 0.0171873,0.187331 0.0528423,0.274293 0.0356455,0.08705 0.0882688,0.166087 0.15479148,0.23256 0.0665321,0.06648 0.14562277,0.11897 0.2326735,0.154567 0.0870507,0.0356 0.18031463,0.05344 0.2743433,0.05259 0.094029,-8.5e-4 0.1869528,-0.02049 0.2733331,-0.0576 0.08639,-0.0372 0.1645078,-0.09121 0.2298029,-0.158817 L 6.0042244,6.9973204 10.460119,11.453078 c 0.132856,0.132851 0.313114,0.207444 0.500926,0.207444 0.187907,0 0.36807,-0.07459 0.500927,-0.207444 0.132856,-0.13285 0.207547,-0.313006 0.207547,-0.500904 0,-0.187898 -0.07469,-0.368054 -0.207547,-0.500905 z\"/></svg>');--ez-toast__container--z-index:var(--most-visible, 3);--ez-toast__container--background-color:var(--color--secondary, #383c45);--ez-toast__container--left:var(--space--large, 24px);--ez-toast__container--bottom:var(--space--large, 24px);--ez-toast__container--width:400px;--ez-toast__icon--padding-left:var(--space--small, 6px)}.toast__container{position:fixed;display:flex;box-sizing:border-box;border-radius:6px;align-items:center;padding:12px;visibility:hidden;width:var(--ez-toast__container--width);left:var(--ez-toast__container--left);bottom:var(--ez-toast__container--bottom);z-index:var(--ez-toast__container--z-index);background-color:var(--ez-toast__container--background-color)}.message__container{text-shadow:0 0 0 #353535, 0 0 1px transparent;color:#FFFFFF;font-size:14px;width:90%;overflow:hidden;hyphens:auto;height:auto;-webkit-box-orient:vertical;-webkit-line-clamp:4;display:-webkit-box;text-overflow:ellipsis;font-family:var(--font-pattern, \"Roboto\")}.message__container--icon{width:80%;padding-left:var(--ez-toast__icon--padding-left)}.btn-close{margin-top:3px;display:flex;justify-content:flex-end;align-self:flex-start;padding:0;outline:none;width:10%;border:none;background-color:unset;cursor:pointer}.btn-close::after{content:'';display:flex;background-color:#FFFFFF;width:12px;height:12px;-webkit-mask-image:var(--ez-toast__btn__close__image);mask-image:var(--ez-toast__btn__close__image)}.toast__container--opened{animation:fadein 0.5s, fadeout 0.5s 3s;visibility:visible}@-webkit-keyframes fadein{from{opacity:0;left:calc(var(--ez-toast__container--left) * -1)}to{opacity:1;left:var(--ez-toast__container--left)}}@keyframes fadein{from{opacity:0;left:calc(var(--ez-toast__container--left) * -1)}to{opacity:1;left:var(--ez-toast__container--left)}}@-webkit-keyframes fadeout{from{opacity:1;left:var(--ez-toast__container--left)}to{bottom:0;opacity:0}}@keyframes fadeout{from{opacity:1;left:var(--ez-toast__container--left)}to{bottom:0;opacity:0}}";
+
+const EzToast = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this._nextMessages = [];
+    this._currentMessageInfo = { message: "", fadeTime: undefined, useIcon: undefined };
+    this._toastOpenedClass = "toast__container--opened";
+    this._lastTimeOut = undefined;
+    this._lang = "pt"; // Controla qual idioma será usado para definir a regras de hifenização.
+    this.message = undefined;
+    this.fadeTime = 5000;
+    this.useIcon = false;
+    this.canClose = true;
+  }
+  /**
+   * Exibe o ez-toast.
+   */
+  async show(message, fadeTime, useIcon, canClose) {
+    const isClosable = (canClose !== undefined) ? canClose : this.canClose;
+    return new Promise(resolve => {
+      var _a;
+      if ((_a = this.container) === null || _a === void 0 ? void 0 : _a.classList.contains(this._toastOpenedClass)) {
+        if (this.isRepeatedMessage(message)) {
+          return;
+        }
+        this._nextMessages.push({ message, fadeTime, useIcon, canClose: isClosable, callBack: resolve });
+      }
+      else {
+        this._currentMessageInfo.message = message || this.message;
+        this._currentMessageInfo.fadeTime = fadeTime || this.fadeTime;
+        this._currentMessageInfo.useIcon = useIcon || this.useIcon;
+        this._currentMessageInfo.callBack = resolve;
+        if (isClosable) {
+          this._currentMessageInfo.canClose = isClosable;
+        }
+        forceUpdate(this);
+        this.displayToast();
+        this._lastTimeOut = setTimeout(() => {
+          this.hideToast();
+        }, this._currentMessageInfo.fadeTime + 400);
+      }
+    });
+  }
+  hideToast() {
+    this.makeToastInvisible();
+    if (this._nextMessages.length > 0) {
+      if (this._currentMessageInfo.callBack) {
+        this._currentMessageInfo.callBack(true);
+      }
+      setTimeout(() => {
+        let newMessageInfo = this._nextMessages.shift();
+        this.show(newMessageInfo.message, newMessageInfo.fadeTime, newMessageInfo.useIcon);
+      });
+    }
+    if (this._currentMessageInfo.callBack) {
+      this._currentMessageInfo.callBack(true);
+    }
+  }
+  isRepeatedMessage(message) {
+    var _a, _b;
+    return ((_a = this._nextMessages) === null || _a === void 0 ? void 0 : _a.some((info) => info.message === message))
+      || ((_b = this._currentMessageInfo) === null || _b === void 0 ? void 0 : _b.message) === message;
+  }
+  makeToastInvisible() {
+    this.container.classList.remove(this._toastOpenedClass);
+    this.container.style.animation = `none`;
+    if (this._lastTimeOut)
+      clearTimeout(this._lastTimeOut);
+  }
+  displayToast() {
+    this.container.classList.add(this._toastOpenedClass);
+    this.container.style.animation = `fadein 0.5s, fadeout 0.5s ${this.fadeTime / 1000}s`;
+  }
+  buildDataElementId() {
+    var _a, _b;
+    const dataElementId = ElementIDUtils.addIDInfo(this._element);
+    const attribute = ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME;
+    (_a = this._elemBtnClose) === null || _a === void 0 ? void 0 : _a.setAttribute(attribute, `${dataElementId}_buttonClose`);
+    (_b = this._elemText) === null || _b === void 0 ? void 0 : _b.setAttribute(attribute, `${dataElementId}_title`);
+  }
+  componentDidLoad() {
+    this.buildDataElementId();
+  }
+  render() {
+    return (h(Host, null, h("div", { ref: (el) => this.container = el, class: "toast__container" }, this._currentMessageInfo.useIcon &&
+      h("slot", { name: "icon" }), h("div", { lang: this._lang, ref: (el) => this._elemText = el, class: this._currentMessageInfo.useIcon ? "message__container message__container--icon" : "message__container", title: this._currentMessageInfo.message, innerHTML: this._currentMessageInfo.message }), this._currentMessageInfo.canClose &&
+      h("button", { class: "btn-close", onClick: () => { this.hideToast(); }, ref: (el) => this._elemBtnClose = el }))));
+  }
+  get _element() { return getElement(this); }
+};
+EzToast.style = ezToastCss;
+
+export { EzToast as ez_toast };