@sankhyalabs/ezui 1.1.8 → 1.1.9

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

@@ -1,168 +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"
-    }]; }
-}
+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.\r\nSe esta propriedade for omitida, o componete assume o formato \"regular\";\r\nNo modo \"regular\" a visualiza\u00E7\u00E3o \u00E9 a tradicional de uma caixinha marcada/desmarcada.\r\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

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