@sankhyalabs/ezui 1.1.4 → 1.1.8

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

@@ -0,0 +1,323 @@
+import { Component, h, Method, Element, Host, Prop } from '@stencil/core';
+import { FloatingManager } from '@sankhyalabs/core';
+export class EzPopover {
+  constructor() {
+    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)))));
+  }
+  static get is() { return "ez-popover"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ez-popover.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ez-popover.css"]
+  }; }
+  static get properties() { return {
+    "autoclose": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "No modo floating = false o popover s\u00F3 se tornar\u00E1 vis\u00EDvel\nquando o m\u00E9todo show() for acionado."
+      },
+      "attribute": "autoclose",
+      "reflect": true,
+      "defaultValue": "true"
+    },
+    "top": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Offset top do popover em rela\u00E7\u00E3o ao componente pai"
+      },
+      "attribute": "top",
+      "reflect": true,
+      "defaultValue": "'0px'"
+    },
+    "left": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Offset left do popover em rela\u00E7\u00E3o ao componente pai"
+      },
+      "attribute": "left",
+      "reflect": true,
+      "defaultValue": "'0px'"
+    },
+    "bottom": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Offset bottom do popover em rela\u00E7\u00E3o ao componente pai"
+      },
+      "attribute": "bottom",
+      "reflect": true,
+      "defaultValue": "'0px'"
+    },
+    "right": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Offset right do popover em rela\u00E7\u00E3o ao componente pai"
+      },
+      "attribute": "right",
+      "reflect": true,
+      "defaultValue": "'0px'"
+    },
+    "boxwidth": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Ajusta o comportamento da largura do popover.\nOp\u00E7\u00F5es: \"100% e \"fit-content\" (default)"
+      },
+      "attribute": "boxwidth",
+      "reflect": true,
+      "defaultValue": "'fit-content'"
+    },
+    "isOpened": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Externaliza estado atual do componente."
+      },
+      "attribute": "is-opened",
+      "reflect": true
+    }
+  }; }
+  static get methods() { return {
+    "updatePosition": {
+      "complexType": {
+        "signature": "(top?: string, left?: string, bottom?: string, right?: string) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }, {
+            "tags": [],
+            "text": ""
+          }, {
+            "tags": [],
+            "text": ""
+          }, {
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "HTMLElement": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Atualiza a posi\u00E7\u00E3o do popover em rela\u00E7\u00E3o ao componente pai.",
+        "tags": []
+      }
+    },
+    "show": {
+      "complexType": {
+        "signature": "(top?: string, left?: string, bottom?: string, right?: string) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }, {
+            "tags": [],
+            "text": ""
+          }, {
+            "tags": [],
+            "text": ""
+          }, {
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "HTMLElement": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Faz com que o popover seja renderizado na DOM.",
+        "tags": []
+      }
+    },
+    "hide": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Usado no modo floating. Faz com que o componente seja ocultado.",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "_host"; }
+}

package/dist/collection/components/ez-search/ez-search.css

@@ -0,0 +1,296 @@
+:host {
+  /* dimensions */
+  --srch--height: 42px;
+  --srch--width: 100%;
+  --srch__icon--width: 48px;
+  /* general */
+  --srch--border-radius: var(--border--radius-medium, 12px);
+  --srch--border-radius-small: var(--border--radius-small, 6px);
+  --srch--font-size: var(--text--medium, 14px);
+  --srch--font-family: var(--font-pattern, Arial);
+  --srch--font-weight--large: var(--text-weight--large, 500);
+  --srch--font-weight--medium: var(--text-weight--medium, 400);
+  --srch--space--medium: var(--space--medium, 12px);
+  --srch--space--small: var(--space--small, 6px);
+  --srch--shadow: var(--shadow, 0px 0px 16px 0px rgba(0, 38, 111, .12));
+  --srch--background-color--xlight: var(--background--xlight,#fff);
+  --srch__list-z-index: var(--more-visible, 1);
+
+  /* input */
+  --srch__input--background-color: var(--background--medium, #e0e0e0);
+  --srch__input--border: var(--border--medium, 2px solid);
+  --srch__input--border-color: var(--srch__input--background-color);
+  /*no modo normal usamos a borda com a mesma cor do bg*/
+  --srch__input--focus--border-color: var(--color--primary, #008561);
+  --srch__input--disabled--background-color: var(--color--disable-secondary, #F2F5F8);
+  --srch__input--disabled--color: var(--text--disable, #AFB6C0);
+  --srch__input--error--border-color: #CC2936;
+  /* label */
+  --srch__label--color: var(--title--primary, #919191);
+  /* message box */
+  --srch__message_box--font-size: var(--text--small, 12px);
+  --srch__message_box--info--color: var(--color--success, #22085d);
+  --srch__message_box--error--color: var(--color--error, #FF0000);
+
+  /* list */
+  --srch__list-text--primary:var(--text--primary,#626e82);
+  --srch__list-text--secondary:var(--text--secondary,#a2abb9);
+  --srch__list-height:calc(4px + var(--srch--font-size) + var(--srch--space--medium));
+
+  /***************
+     host style  
+  ***************/
+  /*private*/
+  display: flex;
+  flex-wrap: wrap;
+  position: relative;
+  /*public*/
+  width: var(--srch--width);
+}
+
+/* ////// */
+
+ez-text-input{
+  --it__input--background-color: var(--srch__input--background-color, #FFFFFF);
+  --it__input--border-color: var(--srch__input--border-color, #DCE0E8);
+}
+
+input {
+  /*private*/
+  width: 100%;
+  box-sizing: border-box;
+  padding: var(--space--medium);
+  /*public*/
+  height: var(--srch--height);
+  border-radius: var(--srch--border-radius);
+  font-family: var(--srch--font-family);
+  font-size: var(--srch--font-size);
+  border: var(--srch__input--border);
+  border-color: var(--srch__input--border-color);
+  background-color: var(--srch__input--background-color);
+  font-weight: var(--text-weight--large);
+}
+
+input:disabled {
+  /*public*/
+  background-color: var(--srch__input--disabled--background-color);
+  color: var(--srch__input--disabled--color);
+}
+
+input:focus {
+  /*private*/
+  outline: none;
+  /*public*/
+  border-color: var(--srch__input--focus--border-color);
+}
+
+input.icon--left {
+  padding-left: var(--srch__icon--width);
+}
+
+input.icon--right {
+  padding-right: var(--srch__icon--width);
+}
+
+input::placeholder {
+  color: var(--srch__placeholder--color);
+  font-weight: var(--srch__placeholder--font-weight);
+}
+
+input:disabled::placeholder {
+  color: var(--srch__placeholder--disabled--color);
+}
+
+input.hasError {
+  color: inherit;
+  border-color: var(--srch__input--error--border-color);
+}
+
+input.text--right {
+  text-align: right;
+}
+
+ez-text-input {
+  --it__input--background-color: var(--srch__input--background-color, #FFFFFF);
+  --it__input--border-color: var(--srch__input--border-color, #DCE0E8);
+}
+
+
+.message-box {
+  /*private*/
+  min-height: 0;
+  min-width: 100%;
+  margin-top: 2px;
+  line-height: 12px;
+  /*public*/
+  font-family: var(--srch--font-family);
+  font-size: var(--srch__message_box--font-size);
+  color: var(--srch__message_box--info--color);
+}
+
+.hasError {
+  /*public*/
+  min-height: 16px;
+  color: var(--srch__message_box--error--color);
+}
+
+.input__label {
+  /*public*/
+  font-size: var(--text--medium);
+  font-weight: var(--text-weight--large);
+  left: var(--space--medium);
+  position: absolute;
+  color: var(--title--primary);
+  top: var(--space--medium);
+  font-family: var(--srch--font-family);
+  -webkit-transition: font-size .3s, top .3s;
+  transition: font-size .3s, top .3s;
+  z-index: var(--visible);
+}
+
+.input__label--floated {
+  font-family: var(--srch--font-family);
+  font-size: var(--text--extra-small);
+  top: var(--space--small);
+  color: var(--text--primary);
+}
+
+.input__label--left {
+  /*public*/
+  left: var(--srch__icon--width);
+}
+
+.input--with--label {
+  /*public*/
+  padding-bottom: 0;
+} 
+
+/* ////// */
+
+
+.message-box {
+  /*private*/
+  min-height: 16px;
+  min-width: 100%;
+  margin-top: 2px;
+  line-height: 12px;
+  /*public*/
+  font-family: var(--srch--font-family);
+  font-size: var(--srch__message_box--font-size);
+  color: var(--srch__message_box--info--color);
+}
+
+.hasError {
+  /*public*/
+  color: var(--srch__message_box--error--color);
+}
+
+
+
+
+.list-container{
+  z-index: var(--srch__list-z-index);
+  padding: var(--srch--space--small);
+  background: var(--srch--background-color--xlight);
+  border-radius: var(--srch--border-radius);
+  width: 100%;
+  overflow: auto;
+  box-sizing: border-box;
+  /* height of 4 internal elements plus upper and down padding */
+  max-height: calc(4*var(--srch__list-height) + 2*var(--srch--space--small));
+}
+
+li{
+
+  list-style-type: none; 
+  border-radius: var(--srch--border-radius-small);
+  padding: 0 var(--srch--space--small);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+}
+
+li:hover{
+  background-color: var(--background--medium); 
+}
+
+.--li__spanlabel{
+  color: var(--srch__list-text--primary);
+  border-radius: var(--srch--border-radius-small);
+  padding: 0 var(--srch--space--small);
+  height: var(--srch__list-height);
+  font-weight: var(--srch--font-weight--large);
+  font-family: var(--srch--font-family);
+  line-height: var(--srch__list-height);
+  vertical-align: middle;
+  text-overflow: ellipsis;
+  width: 80%;
+  min-width: 30px;
+  overflow-x: hidden;
+  text-align: left;
+}
+
+.--li__spanlabel--full-width{
+  color: var(--srch__list-text--primary);
+  border-radius: var(--srch--border-radius-small);
+  padding: 0 var(--srch--space--small);
+  height: var(--srch__list-height);
+  font-weight: var(--srch--font-weight--large);
+  font-family: var(--srch--font-family);
+  line-height: var(--srch__list-height);
+  vertical-align: middle;
+  text-overflow: ellipsis;
+  width: 100%;
+  min-width: 30px;
+  overflow-x: hidden;
+  text-align: left;
+}
+
+.--li__spanvalue{
+  color: var(--srch__list-text--secondary);
+  border-radius: var(--srch--border-radius-small);
+  padding: 0 var(--srch--space--small);
+  height: var(--srch__list-height);
+  font-weight: var(--srch--font-weight--medium);
+  font-family: var(--srch--font-family);
+  line-height: var(--srch__list-height);
+  vertical-align: middle;
+  text-overflow: ellipsis;
+  width: 20%;
+  min-width: 20px;
+  overflow-x: hidden;
+  text-align: right;
+}
+
+
+.btn-open-search{
+  outline: none;
+  border: none;
+  background-color: unset;
+  cursor: pointer;
+}
+
+.btn-open-search:disabled{
+  cursor: unset;
+}
+
+.btn-open-search::after{
+  content: '';
+  display: flex;
+  background-color: var(--text--primary, #008561);
+  width: 22px;
+  height: 22px;
+  clip-path: path("m 9.4,2.3 c 4.1,0 7.4,3.2 7.4,7.2 0,1.8 -0.7,3.4 -1.8,4.7 l 0.3,0.3 h 0.9 l 5.7,5.6 -1.7,1.7 -5.7,-5.6 V 15.3 L 14.3,15 C 13,16.1 11.3,16.7 9.5,16.7 5.3,16.7 2,13.5 2,9.5 2,5.5 5.3,2.3 9.4,2.3 m 0,2.2 c -2.9,0 -5.1,2.2 -5.1,5 0,2.8 2.3,5 5.1,5 2.8,0 5.1,-2.2 5.1,-5 0,-2.8 -2.2,-5 -5.1,-5 z");
+}
+.btn-open-search:disabled:after{
+  background-color: var(--text--disable, #AFB6C0);
+}
+
+.btn-open-search:enabled:hover::after{
+  background-color: var(--color--primary, #4e4e4e);
+}
+
+.--li--preselected{
+  background-color: var(--background--strong); 
+}