@sankhyalabs/ezui 1.1.8 → 1.1.9

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

@@ -1,108 +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"
-    }]; }
-}
+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

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

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

@@ -1,167 +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);
-}
-
-
-
+: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);
+}
+
+
+