@sankhyalabs/ezui 1.1.4 → 1.1.5

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

@@ -0,0 +1,168 @@
+import { Component, Prop, h, Watch, Method, Event } from '@stencil/core';
+export class EzCheck {
+  constructor() {
+    /**
+     * Deixa o campo disponível ou não interagir com o usuário.
+     */
+    this.enabled = true;
+    /**
+     * Existem dois modos de visualização: regular e switch.
+     * Se esta propriedade for omitida, o componete assume o formato "regular";
+     * No modo "regular" a visualização é a tradicional de uma caixinha marcada/desmarcada.
+     * No modo "switch" o campo tem uma interface em formato de um pino liga/desliga.
+     */
+    this.mode = "regular";
+  }
+  adjustMode() {
+    if (this.mode === "switch") {
+      this._inputElem.classList.remove("regularMode");
+      this._inputElem.classList.add("switchMode");
+    }
+    else {
+      this._inputElem.classList.remove("switchMode");
+      this._inputElem.classList.add("regularMode");
+    }
+  }
+  //---------------------------------------------
+  // Public methods
+  //---------------------------------------------
+  /**
+   * Devolve o modo escolhido para o componente
+   */
+  async getMode() {
+    return this.mode;
+  }
+  /**
+   * Faz o foco no componente de input
+   */
+  async setFocus() {
+    this._inputElem.focus();
+  }
+  componentDidLoad() {
+    this.adjustMode();
+  }
+  changeValue() {
+    this.value = !this.value;
+    this.valueChange.emit();
+  }
+  render() {
+    return (h("input", { type: "checkbox", class: "regularMode", checked: this.value === true, onChange: () => { this.changeValue(); }, disabled: !this.enabled, ref: (el) => this._inputElem = el }));
+  }
+  static get is() { return "ez-check"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ez-check.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ez-check.css"]
+  }; }
+  static get properties() { return {
+    "value": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Como se trata de um componente bin\u00E1rio, o valor alterna entre true e false (marcado / desmarcado)"
+      },
+      "attribute": "value",
+      "reflect": true
+    },
+    "enabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Deixa o campo dispon\u00EDvel ou n\u00E3o interagir com o usu\u00E1rio."
+      },
+      "attribute": "enabled",
+      "reflect": true,
+      "defaultValue": "true"
+    },
+    "mode": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Existem dois modos de visualiza\u00E7\u00E3o: regular e switch.\nSe esta propriedade for omitida, o componete assume o formato \"regular\";\nNo modo \"regular\" a visualiza\u00E7\u00E3o \u00E9 a tradicional de uma caixinha marcada/desmarcada.\nNo modo \"switch\" o campo tem uma interface em formato de um pino liga/desliga."
+      },
+      "attribute": "mode",
+      "reflect": true,
+      "defaultValue": "\"regular\""
+    }
+  }; }
+  static get events() { return [{
+      "method": "valueChange",
+      "name": "valueChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }]; }
+  static get methods() { return {
+    "getMode": {
+      "complexType": {
+        "signature": "() => Promise<string>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<string>"
+      },
+      "docs": {
+        "text": "Devolve o modo escolhido para o componente",
+        "tags": []
+      }
+    },
+    "setFocus": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Faz o foco no componente de input",
+        "tags": []
+      }
+    }
+  }; }
+  static get watchers() { return [{
+      "propName": "mode",
+      "methodName": "adjustMode"
+    }]; }
+}

package/dist/collection/components/ez-collapsable-box/ez-collapsable-box.css

@@ -0,0 +1,68 @@
+:host {
+  --collapsable-box--height: 42px;
+    
+  --collapsable-box--font-size: var(--title--medium, 14px);
+  --collapsable-box--font-family: var(--font-pattern, Arial);
+  --collapsable-box--font-weight: var(--text-weight--large, 600);
+  --collapsable-box--color: var(--title--primary);
+
+  --collapsable-box__btn--path: path("M 0.21915251,13.860393 6.0795475,8.0000007 0.21915251,2.0624968 2.0698036,0.28895588 9.7808475,8.0000007 2.0698036,15.711044 Z");
+  --collapsable-box__btn--fill: var(--collapsable-box--color);
+  --collapsable-box__btn--width: 10px;
+  --collapsable-box__btn--height: 16px;
+ 
+  /***************
+     host style  
+  ***************/
+  /*private*/
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+}
+
+.collapsable-box__title{
+  /*private*/
+  width: 100%;
+  display: flex;
+  box-sizing: border-box;
+}
+
+.collapsable-box__label{
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
+
+  /*public*/
+  font-family: var(--collapsable-box--font-family);
+  font-size: var(--collapsable-box--font-size);
+  font-weight: var(--collapsable-box--font-weight);
+  color: var(--collapsable-box--color);
+}
+
+.collapsable-box__btn{
+  /*private*/
+  outline: none;
+  border: none;
+  background-color: unset;
+  cursor: pointer;
+  padding: 1px 6px;
+}
+
+.collapsable-box__btn::after{
+  /*private*/
+  content: '';
+  display: flex;
+
+  /*public*/
+  clip-path: var(--collapsable-box__btn--path);
+  background-color: var( --collapsable-box__btn--fill);/*parece estranho, mas o bg funciona como fill pq aplicaremos clip-path.*/
+  width: var(--collapsable-box__btn--width);
+  height: var(--collapsable-box__btn--height);
+  transition: transform var(--transition);
+  transform: rotate(90deg);
+}
+
+.collapsable-box__btn--collapsed::after{
+  transform: rotate(0deg);
+}

package/dist/collection/components/ez-collapsable-box/ez-collapsable-box.js

@@ -0,0 +1,108 @@
+import { Component, h, Host, Prop, Event, Watch, Method } from '@stencil/core';
+export class EzCollapsableBox {
+  constructor() {
+    /**
+     * Valor externalizado que garante a exibição ou não do componente
+     */
+    this.value = false;
+  }
+  observeValue() {
+    this.ezChange.emit();
+  }
+  /**
+   * Esconde ou revela o conteúdo do componente
+   */
+  async showHide() {
+    this.value = !this.value;
+  }
+  render() {
+    return (h(Host, null,
+      h("div", { class: "collapsable-box__title" },
+        h("button", { class: this.value ? "collapsable-box__btn collapsable-box__btn--collapsed" : "collapsable-box__btn", onClick: () => this.showHide() }),
+        h("label", { class: "collapsable-box__label", title: this.label }, this.label)),
+      !this.value ? h("slot", null) : null));
+  }
+  static get is() { return "ez-collapsable-box"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ez-collapsable-box.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ez-collapsable-box.css"]
+  }; }
+  static get properties() { return {
+    "value": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Valor externalizado que garante a exibi\u00E7\u00E3o ou n\u00E3o do componente"
+      },
+      "attribute": "value",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Label \u00E9 o t\u00EDtulo do campo"
+      },
+      "attribute": "label",
+      "reflect": true
+    }
+  }; }
+  static get events() { return [{
+      "method": "ezChange",
+      "name": "ezChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }]; }
+  static get methods() { return {
+    "showHide": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Esconde ou revela o conte\u00FAdo do componente",
+        "tags": []
+      }
+    }
+  }; }
+  static get watchers() { return [{
+      "propName": "value",
+      "methodName": "observeValue"
+    }]; }
+}

package/dist/collection/components/ez-combo-box/ez-combo-box-interfaces.js

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

package/dist/collection/components/ez-combo-box/ez-combo-box.css

@@ -0,0 +1,167 @@
+:host {
+  /* dimensions */
+  --cx--height: 42px;
+  --cx--width: 100%;
+  --cx__icon--width: 48px;
+  /* general */
+  --cx--border-radius: var(--border--radius-medium, 12px);
+  --cx--border-radius-small: var(--border--radius-small, 6px);
+  --cx--font-size: var(--text--medium, 14px);
+  --cx--font-family: var(--font-pattern, Arial);
+  --cx--font-weight--large: var(--text-weight--large, 500);
+  --cx--font-weight--medium: var(--text-weight--medium, 400);
+  --cx--space--medium: var(--space--medium, 12px);
+  --cx--space--small: var(--space--small, 6px);
+  --cx--shadow: var(--shadow, 0px 0px 16px 0px rgba(0, 38, 111, .12));
+  --cx--background-color--xlight: var(--background--xlight,#fff);
+
+  /* input */
+  --cx__input--background-color: var(--background--medium, #e0e0e0);
+  --cx__input--border: var(--border--medium, 2px solid);
+  --cx__input--border-color: var(--cx__input--background-color);
+  /*no modo normal usamos a borda com a mesma cor do bg*/
+  --cx__input--focus--border-color: var(--color--primary, #008561);
+  --cx__input--disabled--background-color: var(--color--disable-secondary, #F2F5F8);
+  --cx__input--disabled--color: var(--text--disable, #AFB6C0);
+  --cx__input--error--border-color: #CC2936;
+  /* label */
+  --cx__label--color: var(--title--primary, #919191);
+  /* message box */
+  --cx__message_box--font-size: var(--text--small, 12px);
+  --cx__message_box--info--color: var(--color--success, #22085d);
+  --cx__message_box--error--color: var(--color--error, #FF0000);
+
+  /* list */
+  --cx__list-text--primary:var(--text--primary,#626e82);
+  --cx__list-text--secondary:var(--text--secondary,#a2abb9);
+  --cx__list-height:calc(var(--cx--font-size) + var(--cx--space--medium));
+
+  /***************
+     host style  
+  ***************/
+  /*private*/
+  display: flex;
+  flex-wrap: wrap;
+  position: relative;
+  /*public*/
+  width: var(--cx--width);
+}
+
+ez-text-input{
+  --it__input--background-color: var(--cx__input--background-color, #FFFFFF);
+  --it__input--border-color: var(--cx__input--border-color, #DCE0E8);
+}
+
+.invisible {
+  visibility: hidden;
+}
+
+.list-container{
+  scroll-behavior: smooth;
+  z-index: var(--cx__list-z-index);
+  padding: var(--cx--space--small);
+  background: var(--cx--background-color--xlight);
+  border-radius: var(--cx--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(--cx__list-height) + 2*var(--cx--space--small));
+}
+
+li{
+
+  list-style-type: none; 
+  border-radius: var(--cx--border-radius-small);
+  padding: 0 var(--cx--space--small);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+}
+
+li:hover{
+  background-color: var(--background--medium); 
+}
+
+.--li--preselected{
+  background-color: var(--background--strong); 
+}
+
+.--li__spanlabel{
+  color: var(--cx__list-text--primary);
+  border-radius: var(--cx--border-radius-small);
+  padding: 0 var(--cx--space--small);
+  height: var(--cx__list-height);
+  font-weight: var(--cx--font-weight--large);
+  font-family: var(--cx--font-family);
+  line-height: var(--cx__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(--cx__list-text--primary);
+  border-radius: var(--cx--border-radius-small);
+  padding: 0 var(--cx--space--small);
+  height: var(--cx__list-height);
+  font-weight: var(--cx--font-weight--large);
+  font-family: var(--cx--font-family);
+  line-height: var(--cx__list-height);
+  vertical-align: middle;
+  text-overflow: ellipsis;
+  width: 100%;
+  min-width: 30px;
+  overflow-x: hidden;
+  text-align: left;
+}
+
+.--li__spanvalue{
+  color: var(--cx__list-text--secondary);
+  border-radius: var(--cx--border-radius-small);
+  padding: 0 var(--cx--space--small);
+  height: var(--cx__list-height);
+  font-weight: var(--cx--font-weight--medium);
+  font-family: var(--cx--font-family);
+  line-height: var(--cx__list-height);
+  vertical-align: middle;
+  text-overflow: ellipsis;
+  width: 20%;
+  min-width: 20px;
+  overflow-x: hidden;
+  text-align: left;
+}
+
+.btn-open-options{
+  outline: none;
+  border: none;
+  background-color: unset;
+  cursor: pointer;
+}
+
+.btn-open-options:disabled{
+  cursor: unset;
+}
+
+.btn-open-options::after{
+  content: '';
+  display: flex;
+  background-color: var(--text--primary, #008561);
+  width: 16px;
+  height: 16px;
+  clip-path: path("M 1.8585859,3.0707069 7.9999998,9.2121212 14.141414,3.0707069 16,5.0101006 7.9999998,12.929293 0,4.9292932 Z");
+}
+.btn-open-options:disabled:after{
+  background-color: var(--text--disable, #AFB6C0);
+}
+
+.btn-open-options:enabled:hover::after{
+  background-color: var(--color--primary, #4e4e4e);
+}
+
+
+