@sankhyalabs/sankhyablocks 1.1.28 → 1.2.0

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

@@ -1,201 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-682c98b2.js');
-const core = require('@sankhyalabs/core');
-
-const ezTextInputCss = ":host{--ez-text-input--height:42px;--ez-text-input--width:100%;--ez-text-input__icon--width:48px;--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, #000);--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__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;display:flex;flex-wrap:wrap;position:relative;width:var(--ez-text-input--width)}input{width:100%;box-sizing:border-box;padding:var(--space--medium, 6px);font-weight:var(--text-weight--large, 600);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)}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.text--right{text-align:right}.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}";
-
-const EzTextInput = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.ezChange = index.createEvent(this, "ezChange", 7);
-    /**
-     * Deixa o campo disponível ou não para digitação.
-     */
-    this.enabled = true;
-    /**
-     * Permite exibir a mensagem de erro.
-     */
-    this.canShowError = 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 core.MaskFormatter(this.mask);
-      }
-      else {
-        this._maskFormatter.mask = this.mask;
-      }
-    }
-  }
-  updateInputValue() {
-    if (this._inputElem) {
-      this._inputElem.value = this.value;
-    }
-    this.handleChange();
-    this.errorMessage = "";
-    this.ezChange.emit(this.value);
-    this.adjustFloatingLabel();
-  }
-  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;
-  }
-  //---------------------------------------------
-  // 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.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(--ez-text-input__icon--width)";
-      content.style.height = "var(--ez-text-input--height)";
-      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");
-        }
-      }
-      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");
-        }
-      }
-    }
-    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() {
-    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 (index.h(index.Host, null, index.h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label ?
-      index.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, index.h("input", { onFocus: () => this.doFocus(), ref: (el) => this._inputElem = el, type: "text", value: this.value, disabled: !this.enabled, onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); } }), index.h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.canShowError &&
-      index.h("span", { class: "message-box", ref: (el) => this._messageBoxElem = el, title: this.errorMessage }, this.errorMessage)));
-  }
-  get _hostElement() { return index.getElement(this); }
-  static get watchers() { return {
-    "errorMessage": ["showError"],
-    "mask": ["prepareMask"],
-    "value": ["updateInputValue"]
-  }; }
-};
-EzTextInput.style = ezTextInputCss;
-
-exports.ez_text_input = EzTextInput;

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

@@ -1,118 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-682c98b2.js');
-const core = require('@sankhyalabs/core');
-const CSSVarsUtils = require('./CSSVarsUtils-75ca9c64.js');
-const AssetsUtils = require('./AssetsUtils-7e3c38f9.js');
-
-const ezTimeInputCss = ":host{display:flex;flex-wrap:wrap;position:relative;width:100%}";
-
-const EzTimeInput = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /**
-     * Deixa o campo disponível ou não para digitação.
-     */
-    this.enabled = true;
-    /**
-    * Define se o componente irá ou não considerar os segundos
-    */
-    this.showSeconds = false;
-  }
-  prepareMask() {
-    if (this.showSeconds) {
-      if (this._maskFormatter == undefined) {
-        this._maskFormatter = new core.MaskFormatter("##:##:##");
-      }
-      else {
-        this._maskFormatter.mask = "##:##:##";
-      }
-    }
-    else {
-      if (this._maskFormatter == undefined) {
-        this._maskFormatter = new core.MaskFormatter("##:##");
-      }
-      else {
-        this._maskFormatter.mask = "##:##";
-      }
-    }
-  }
-  onValueChanged() {
-    if (this.value === NaN) {
-      this.value = undefined;
-      this.handleFocusout();
-    }
-  }
-  //---------------------------------------------
-  // 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.errorMessage = "";
-    this.prepareValue(this.viewValue);
-    if (!core.TimeFormatter.validateTime(this.viewValue, this.showSeconds)) {
-      this.clearField();
-      this.errorMessage = "Favor inserir um horário válido.";
-    }
-  }
-  prepareValue(value) {
-    try {
-      this.viewValue = core.TimeFormatter.prepareValue(value, this.showSeconds);
-    }
-    catch (e) {
-      this.clearField();
-      this.errorMessage = e.message;
-    }
-  }
-  clearField() {
-    this.viewValue = this.value = undefined;
-  }
-  handleChange() {
-    this.viewValue = this._inputElem.value;
-    this.value = core.NumberUtils.stringToNumber(this.viewValue.replace(/\D/g, ""));
-  }
-  //---------------------------------------------
-  // Lifecycle web component
-  //---------------------------------------------
-  componentDidLoad() {
-    this.onValueChanged();
-    CSSVarsUtils.CSSVarsUtils.applyVarsTextInput(this._elem, this._inputElem);
-  }
-  componentWillLoad() {
-    this.prepareMask();
-    if (this.value) {
-      this.prepareValue(this.value.toString());
-    }
-    else if (this.viewValue) {
-      this.prepareValue(this.viewValue);
-    }
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("ez-text-input", { ref: (el) => this._inputElem = el, value: this.viewValue, enabled: this.enabled, label: this.label, onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); }, errorMessage: this.errorMessage }, index.h("ez-icon", { slot: "leftIcon", href: AssetsUtils.getSpritePath("timer-outline") }))));
-  }
-  static get assetsDirs() { return ["../assets"]; }
-  get _elem() { return index.getElement(this); }
-  static get watchers() { return {
-    "showSeconds": ["prepareMask"],
-    "value": ["onValueChanged"]
-  }; }
-};
-EzTimeInput.style = ezTimeInputCss;
-
-exports.ez_time_input = EzTimeInput;

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

@@ -1,44 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-682c98b2.js');
-
-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(--more-visible, 2);--ez-toast__container--background-color:var(--color--secondary, #383c45);--ez-toast__icon--padding-left:var(--space--small, 6px)}.toast__container{position:fixed;display:flex;bottom:100px;z-index:var(--ez-toast__container-z-index);left:100px;width:280px;box-sizing:border-box;background-color:var(--ez-toast__container--background-color);border-radius:6px;align-items:center;padding:12px;visibility:hidden}.message__container{font-family:\"Sora\", \"Algerian\";text-shadow:0 0 0 #353535, 0 0 1px transparent;color:#FFFFFF;font-size:14px;width:90%;overflow:hidden;word-break:break-all;height:auto;-webkit-box-orient:vertical;-webkit-line-clamp:4;display:-webkit-box;text-overflow:ellipsis}.message__conteiner--icon{padding-left:var(--ez-toast__icon--padding-left);width:80%}.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--oppened{animation:fadein 0.5s, fadeout 0.5s 3s;visibility:visible}@-webkit-keyframes fadein{from{left:-100px;opacity:0}to{left:100px;opacity:1}}@keyframes fadein{from{left:-100px;opacity:0}to{left:100px;opacity:1}}@-webkit-keyframes fadeout{from{left:100px;opacity:1}to{bottom:0;opacity:0}}@keyframes fadeout{from{left:100px;opacity:1}to{bottom:0;opacity:0}}";
-
-const EzToast = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /**
-    * Controla o tempo de exibição do componente em milissegundos.
-    */
-    this.fadeTime = 5000;
-    /**
-    * Adiciona ícone de check no componente.
-    */
-    this.useIcon = false;
-    /**
-    * Controla o uso do icone de fechar o toast.
-    */
-    this.canClose = true;
-  }
-  /**
-  * Exibe o componente na tela.
-  */
-  async show() {
-    this.container.classList.add("toast__container--oppened");
-    this.container.style.animation = `fadein 0.5s, fadeout 0.5s ${this.fadeTime / 1000}s`;
-    setTimeout(() => {
-      this.container.classList.remove("toast__container--oppened");
-      this.container.style.animation = `none`;
-    }, this.fadeTime + 400);
-  }
-  render() {
-    return (index.h("div", { ref: (el) => this.container = el, class: "toast__container" }, this.useIcon &&
-      index.h("slot", { name: "icon" }), index.h("div", { class: this.useIcon ? "message__container message__conteiner--icon" : "message__container", title: this.message, innerHTML: this.message }), this.canClose &&
-      index.h("button", { class: "btn-close", onClick: () => { this.container.classList.remove("toast__container--oppened"); this.container.style.animation = `none`; } })));
-  }
-};
-EzToast.style = ezToastCss;
-
-exports.ez_toast = EzToast;