@sankhyalabs/ezui 1.1.4 → 1.1.8

package/dist/ezui/ez-icon.entry.js

@@ -1,17 +0,0 @@
-import { r as registerInstance, h } from './index-39044be2.js';
-
-const ezIconCss = ":host{display:block;overflow:hidden;position:relative}svg{display:flex;justify-content:center;align-items:center;fill:var(--color--icon)}.x-small{width:12px;height:12px}.small{width:16px;height:16px}.medium{width:20px;height:20px}.large{width:24px;height:24px}.x-large{width:30px;height:30px}";
-
-const EzIcon = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    /*Tamanho do icone*/
-    this.size = 'medium';
-  }
-  render() {
-    return (h("svg", { class: this.size, role: "img" }, h("use", { xlinkHref: this.href })));
-  }
-};
-EzIcon.style = ezIconCss;
-
-export { EzIcon as ez_icon };

package/dist/ezui/ez-popover.entry.js

@@ -1,112 +0,0 @@
-import { r as registerInstance, h, i as Host, g as getElement } from './index-39044be2.js';
-import { F as FloatingManager } from './index-919090de.js';
-
-const ezPopoverCss = ":host{--pop__box--border-radius:var(--border--radius-medium, 12px);--pop__box--box-shadow:var(--shadow, 0px 0px 16px 0px #000);position:relative;display:flex;user-select:none;width:100%}.box{z-index:var(--more-visible, 1);display:flex;flex-direction:column;height:fit-content;background-color:transparent;border-radius:var(--pop__box--border-radius);box-shadow:var(--pop__box--box-shadow)}.box--fit-content{width:fit-content}.box--full-width{width:100%}";
-
-const EzPopover = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this._firstRender = true;
-    /**
-     * No modo floating = false o popover só se tornará visível
-     * quando o método show() for acionado.
-     */
-    this.autoclose = true;
-    /**
-     * Offset top do popover em relação ao componente pai
-     */
-    this.top = '0px';
-    /**
-     * Offset left do popover em relação ao componente pai
-     */
-    this.left = '0px';
-    /**
-     * Offset bottom do popover em relação ao componente pai
-     */
-    this.bottom = '0px';
-    /**
-     * Offset right do popover em relação ao componente pai
-     */
-    this.right = '0px';
-    /**
-     * Ajusta o comportamento da largura do popover.
-     * Opções: "100% e "fit-content" (default)
-     */
-    this.boxwidth = 'fit-content';
-  }
-  /**
-   * Atualiza a posição do popover em relação ao componente pai.
-   */
-  async updatePosition(top = this.top, left = this.left, bottom = this.bottom, right = this.right) {
-    const floatingOptions = {
-      autoClose: this.autoclose,
-      top,
-      left,
-      bottom,
-      right,
-      innerClickTest: (_container, node) => {
-        if (_container.contains(node)) {
-          return true;
-        }
-        if (_container.shadowRoot && _container.shadowRoot.contains(node)) {
-          return true;
-        }
-        //Here: we pass this._box as parameter but we need to change to _host 
-        //because we need to get the lasChild (inner content to put in slot)
-        _container = this._host;
-        return !_container.lastElementChild.shadowRoot ? _container.contains(node) : _container.lastElementChild.shadowRoot.contains(node);
-      }
-    };
-    FloatingManager.updateFloatPosition(this._box, this._container, floatingOptions);
-  }
-  /**
-   * Faz com que o popover seja renderizado na DOM.
-   *
-   */
-  async show(top = this.top, left = this.left, bottom = this.bottom, right = this.right) {
-    const floatingOptions = {
-      autoClose: this.autoclose,
-      top,
-      left,
-      bottom,
-      right,
-      innerClickTest: (_container, node) => {
-        if (_container.contains(node)) {
-          return true;
-        }
-        if (_container.shadowRoot && _container.shadowRoot.contains(node)) {
-          return true;
-        }
-        // Here: we pass this._box as parameter but we need to change to _host 
-        // because we need to get the lasChild (inner content to put in slot)
-        _container = this._host;
-        return !_container.lastElementChild.shadowRoot ? _container.contains(node) : _container.lastElementChild.shadowRoot.contains(node);
-      }
-    };
-    this._floatingID = FloatingManager.float(this._box, this._container, floatingOptions);
-    this.isOpened = true;
-  }
-  /**
-   * Usado no modo floating. Faz com que o componente seja ocultado.
-   */
-  async hide() {
-    if (this._floatingID !== undefined) {
-      FloatingManager.close(this._floatingID);
-      this._floatingID = undefined;
-      this.isOpened = false;
-    }
-  }
-  componentDidRender() {
-    if (this._firstRender) {
-      this._box.remove();
-      this._firstRender = false;
-    }
-  }
-  render() {
-    return (h(Host, null, h("section", { ref: el => this._container = el }, h("div", { class: `box ${this.boxwidth === 'fit-content' ? 'box--fit-content' : 'box--full-width'}`, ref: el => this._box = el }, h("slot", null)))));
-  }
-  get _host() { return getElement(this); }
-};
-EzPopover.style = ezPopoverCss;
-
-export { EzPopover as ez_popover };

package/dist/ezui/ez-text-area.entry.js

@@ -1,105 +0,0 @@
-import { r as registerInstance, e as createEvent, h, i as Host, g as getElement } from './index-39044be2.js';
-
-const ezTextAreaCss = ":host{--ta--width:100%;--ta--border-radius:var(--border--radius-medium, 12px);--ta--font-size:var(--text--medium, 14px);--ta--font-family:var(--font-pattern, Arial);--ta--font-weight:var(--text-weight--large, 500);--ta--color:var(--title--primary, #000);--ta__input--background-color:var(--background--medium, #e0e0e0);--ta__input--border:var(--border--medium, 2px solid);--ta__input--border-color:var(--ta__input--background-color);--ta__input--focus--border-color:var(--color--primary, #008561);--ta__input--disabled--background-color:var(--color--disable-secondary, #F2F5F8);--ta__input--disabled--color:var(--text--disable, #AFB6C0);--ta__input--error--border-color:#CC2936;--ta__input--floating--padding-top:16px;--ta__message_box--font-size:var(--text--small, 12px);--ta__message_box--info--color:var(--color--success, #22085d);--ta__message_box--error--color:var(--color--error, #FF0000);--ta__label--floating--top:6px;--ta__label--padding-top:12px;--ta__label--padding-left:14px;--ta__label--padding-right:12px;display:flex;flex-wrap:wrap;position:relative;width:var(--ta--width)}textarea{width:100%;box-sizing:border-box;padding:var(--space--medium, 6px);font-weight:var(--text-weight--large, 600);resize:none;border-radius:var(--ta--border-radius);font-family:var(--ta--font-family);font-size:var(--ta--font-size);border:var(--ta__input--border);border-color:var(--ta__input--border-color);background-color:var(--ta__input--background-color);color:var(--ta--color)}textarea:disabled{background-color:var(--ta__input--disabled--background-color);color:var(--ta__input--disabled--color)}textarea:focus{outline:none;border-color:var(--ta__input--focus--border-color)}textarea.hasError{color:var(--ta--color);border-color:var(--ta__input--error--border-color)}.message-box{min-height:16px;min-width:100%;margin-top:2px;line-height:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--ta--font-family);font-size:var(--ta__message_box--font-size);color:var(--ta__message_box--info--color)}.hasError{color:var(--ta__message_box--error--color)}.textarea__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(--ta__label--padding-right));left:var(--ta--space--medium);font-family:var(--ta--font-family);font-size:var(--ta--font-size);font-weight:var(--ta--font-weight);color:var(--ta--color);top:var(--ta__label--padding-top);left:var(--ta__label--padding-left);padding-right:var(--ta__label--padding-right)}.textarea__label--floated{font-family:var(--ta--font-family);font-size:var(--text--extra-small);color:var(--text--primary);top:var(--ta__label--floating--top)}.textarea__label--disabled{color:var(--ta__input--disabled--color)}.input--with--label{padding-bottom:0;padding-top:var(--ta__input--floating--padding-top)}";
-
-const EzTextArea = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.ezChange = createEvent(this, "ezChange", 7);
-    /**
-     * Deixa o campo disponível ou não para digitação.
-     */
-    this.enabled = true;
-    /**
-     * Ajusta o numero de linhas e consequentemente o height do textarea. Valor default: 4
-     */
-    this.rows = 4;
-  }
-  showError() {
-    const hasError = typeof this.errormessage === 'string' && this.errormessage !== '';
-    if (hasError) {
-      this._inputElem.classList.add('hasError');
-      this._messageBoxElem.classList.add('hasError');
-    }
-    else {
-      this._inputElem.classList.remove('hasError');
-      this._messageBoxElem.classList.remove('hasError');
-    }
-  }
-  updateInputValue() {
-    this._inputElem.value = this.value;
-    this.handleChange();
-    this.adjustFloatingLabel();
-  }
-  adjustFloatingLabel() {
-    if (this.label) {
-      if (!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("textarea__label--floated");
-      if (hasValue || this.isFocused()) {
-        if (!containsFloatedClass) {
-          this._labelElem.classList.add("textarea__label--floated");
-        }
-      }
-      else {
-        if (containsFloatedClass) {
-          this._labelElem.classList.remove("textarea__label--floated");
-        }
-      }
-    }
-  }
-  isFocused() {
-    return this._hostElement.shadowRoot.activeElement !== null;
-  }
-  //---------------------------------------------
-  // Public methods
-  //---------------------------------------------
-  /**
-   * Faz o foco no componente de input
-   */
-  async setFocus() {
-    this._inputElem.focus();
-  }
-  /**
-   * Remove o foco no componente de input
-   */
-  async setBlur() {
-    this._inputElem.blur();
-  }
-  //---------------------------------------------
-  // Event handlers
-  //---------------------------------------------
-  handleFocusout() {
-    this.adjustFloatingLabel();
-  }
-  handleChange() {
-    this.value = this._inputElem.value;
-  }
-  handleFocus() {
-    if (this.label && this._labelElem && !this._labelElem.classList.contains("textarea__label--floated")) {
-      this._labelElem.classList.add("textarea__label--floated");
-    }
-  }
-  //---------------------------------------------
-  // Lifecycle web component
-  //---------------------------------------------
-  componentDidLoad() {
-    this.showError();
-    this.adjustFloatingLabel();
-  }
-  render() {
-    return (h(Host, null, this.label ?
-      h("label", { ref: (el) => this._labelElem = el, class: this.enabled ? "textarea__label" : "textarea__label textarea__label--disabled", onClick: () => this._inputElem.focus(), title: this.label }, this.label)
-      : null, h("textarea", { onFocus: () => this.handleFocus(), ref: (el) => this._inputElem = el, value: this.value, disabled: !this.enabled, onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); }, onKeyDown: event => event.stopPropagation(), rows: this.rows }), h("span", { class: "message-box", ref: (el) => this._messageBoxElem = el, title: this.errormessage }, this.errormessage)));
-  }
-  get _hostElement() { return getElement(this); }
-  static get watchers() { return {
-    "errormessage": ["showError"],
-    "value": ["updateInputValue"]
-  }; }
-};
-EzTextArea.style = ezTextAreaCss;
-
-export { EzTextArea as ez_text_area };

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

@@ -1,202 +0,0 @@
-import { r as registerInstance, e as createEvent, h, i as Host, g as getElement } from './index-39044be2.js';
-import { M as MaskFormatter } from './index-919090de.js';
-
-function format(first, middle, last) {
-  return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
-}
-function isValidNumber(strValue) {
-  return strValue && /^-?\d*[.,]?\d*$/.test(strValue);
-}
-
-const ezTextInputCss = ":host{--it--height:42px;--it--width:100%;--it__icon--width:48px;--it--border-radius:var(--border--radius-medium, 12px);--it--font-size:var(--text--medium, 14px);--it--font-family:var(--font-pattern, Arial);--it--font-weight:var(--text-weight--large, 500);--it--color:var(--title--primary, #000);--it__input--background-color:var(--background--medium, #e0e0e0);--it__input--border:var(--border--medium, 2px solid);--it__input--border-color:var(--it__input--background-color);--it__input--focus--border-color:var(--color--primary, #008561);--it__input--disabled--background-color:var(--color--disable-secondary, #F2F5F8);--it__input--disabled--color:var(--text--disable, #AFB6C0);--it__input--error--border-color:#CC2936;--it__message_box--font-size:var(--text--small, 12px);--it__message_box--info--color:var(--color--success, #22085d);--it__message_box--error--color:var(--color--error, #FF0000);--it__label--floating--top:6px;--it__label--padding-top:12px;--it__label--padding-left:14px;--it__label--padding-right:12px;display:flex;flex-wrap:wrap;position:relative;width:var(--it--width)}input{width:100%;box-sizing:border-box;padding:var(--space--medium, 6px);font-weight:var(--text-weight--large, 600);height:var(--it--height);border-radius:var(--it--border-radius);font-family:var(--it--font-family);font-size:var(--it--font-size);border:var(--it__input--border);border-color:var(--it__input--border-color);background-color:var(--it__input--background-color);color:var(--it--color)}input:disabled{background-color:var(--it__input--disabled--background-color);color:var(--it__input--disabled--color)}input:focus{outline:none;border-color:var(--it__input--focus--border-color)}input.icon--left{padding-left:var(--it__icon--width)}input.icon--right{padding-right:var(--it__icon--width)}input.hasError{color:var(--it--color);border-color:var(--it__input--error--border-color)}input.text--right{text-align:right}.message-box{min-height:16px;min-width:100%;margin-top:2px;line-height:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--it--font-family);font-size:var(--it__message_box--font-size);color:var(--it__message_box--info--color)}.hasError{color:var(--it__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(--it__label--padding-right));left:var(--it--space--medium);font-family:var(--it--font-family);font-size:var(--it--font-size);font-weight:var(--it--font-weight);color:var(--it--color);top:var(--it__label--padding-top);left:var(--it__label--padding-left);padding-right:var(--it__label--padding-right)}.input__label--floated{font-family:var(--it--font-family);font-size:var(--text--extra-small);color:var(--text--primary);top:var(--it__label--floating--top)}.input__label--disabled{color:var(--it__input--disabled--color)}.input__label--left{left:calc(var(--it__icon--width) + 2px);width:calc(100% - var(--it__icon--width))}.input__label--right{right:var(--it__icon--width);width:calc(100% - var(--it__icon--width))}.input__label--left.input__label--right{left:calc(var(--it__icon--width) + 2px);width:calc(100% - var(--it__icon--width) * 2)}.input--with--label{padding-bottom:0}";
-
-const EzTextInput = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.ezChange = createEvent(this, "ezChange", 7);
-    /**
-     * Deixa o campo disponível ou não para digitação.
-     */
-    this.enabled = true;
-  }
-  showError() {
-    const hasError = typeof this.errormessage === 'string' && this.errormessage !== '';
-    if (hasError) {
-      this._inputElem.classList.add('hasError');
-      this._messageBoxElem.classList.add('hasError');
-    }
-    else {
-      this._inputElem.classList.remove('hasError');
-      this._messageBoxElem.classList.remove('hasError');
-    }
-  }
-  prepareMask() {
-    if (this.mask) {
-      if (this._maskFormatter == undefined) {
-        this._maskFormatter = new MaskFormatter(this.mask);
-      }
-      else {
-        this._maskFormatter.mask = this.mask;
-      }
-    }
-  }
-  updateInputValue() {
-    this._inputElem.value = this.value;
-    this.handleChange();
-    this.ezChange.emit();
-    this.adjustFloatingLabel();
-  }
-  adjustFloatingLabel() {
-    if (this.label) {
-      if (!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;
-  }
-  //---------------------------------------------
-  // Public methods
-  //---------------------------------------------
-  /**
-   * Faz o foco no componente de input
-   */
-  async setFocus() {
-    this._inputElem.focus();
-  }
-  /**
-   * Remove o foco no componente de input
-   */
-  async setBlur() {
-    this._inputElem.blur();
-  }
-  //---------------------------------------------
-  // 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.value = this._inputElem.value;
-    this.adjustFloatingLabel();
-  }
-  isValidValue(value) {
-    if (this.onlynumber) {
-      return value == "" || isValidNumber(value);
-    }
-    if (this.restrict) {
-      return Array.from(value).reduce((valid, c) => valid && this.restrict.indexOf(c) > -1, true);
-    }
-    return true;
-  }
-  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.value = this._inputElem.value;
-  }
-  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(--it__icon--width)";
-      content.style.height = "var(--it--height)";
-      if (slot.name == "leftIcon") {
-        content.style.left = "0px";
-        content.style.borderRadius = "var(--it--border-radius) 0 0 var(--it--border-radius)";
-        this._inputElem.classList.add('icon--left');
-        if (this._labelElem) {
-          this._labelElem.classList.add('input__label--left');
-        }
-      }
-      else if (slot.name == "rightIcon") {
-        content.style.right = "0px";
-        content.style.borderRadius = "0 var(--it--border-radius) var(--it--border-radius) 0";
-        this._inputElem.classList.add('icon--right');
-        if (this._labelElem) {
-          this._labelElem.classList.add('input__label--right');
-        }
-      }
-    }
-    this.showError();
-  }
-  doFocus() {
-    if (this.label && this._labelElem && !this._labelElem.classList.contains("input__label--floated")) {
-      this._labelElem.classList.add("input__label--floated");
-    }
-  }
-  //---------------------------------------------
-  // Lifecycle web component
-  //---------------------------------------------
-  componentDidLoad() {
-    if (this.onlynumber) {
-      this._inputElem.classList.add('text--right');
-    }
-    this.showError();
-    this.prepareMask();
-    this.adjustFloatingLabel();
-  }
-  componentWillLoad() {
-    this.prepareMask();
-    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() {
-    return (h(Host, null, h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label ?
-      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", { onFocus: () => this.doFocus(), ref: (el) => this._inputElem = el, type: "text", value: this.value, disabled: !this.enabled, onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); } }), h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), h("span", { class: "message-box", ref: (el) => this._messageBoxElem = el, title: this.errormessage }, this.errormessage)));
-  }
-  get _hostElement() { return getElement(this); }
-  static get watchers() { return {
-    "errormessage": ["showError"],
-    "mask": ["prepareMask"],
-    "value": ["updateInputValue"]
-  }; }
-};
-EzTextInput.style = ezTextInputCss;
-
-export { EzTextInput as ez_text_input };