@sankhyalabs/ezui 1.1.8 → 1.1.9

package/dist/collection/components/ez-action-chip/ez-action-chip.js

@@ -1,109 +1,109 @@
-import { Component, Prop, h, Event } from '@stencil/core';
-export class EzLabelChip {
-  constructor() {
-    /**
-     * Deixa o componente disponível ou não para seleção.
-     */
-    this.enabled = true;
-  }
-  //---------------------------------------------
-  // Event handlers
-  //---------------------------------------------
-  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(--ac__icon--width)";
-      content.style.height = "var(--ac--height)";
-      if (slot.name == "leftIcon") {
-        content.style.left = "0px";
-        this._labelElem.classList.add('padding-left--small');
-      }
-      else if (slot.name == "rightIcon") {
-        content.style.right = "0px";
-        this._labelElem.classList.add('padding-right--small');
-      }
-    }
-  }
-  //---------------------------------------------
-  // Lifecycle web component
-  //---------------------------------------------
-  render() {
-    return (h("div", { onClick: () => this.actionClick.emit(), class: "label__container" },
-      h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }),
-      h("label", { ref: (el) => this._labelElem = el }, this.label),
-      h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } })));
-  }
-  static get is() { return "ez-action-chip"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["ez-action-chip.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["ez-action-chip.css"]
-  }; }
-  static get properties() { return {
-    "label": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Label \u00E9 o t\u00EDtulo exibido no componente."
-      },
-      "attribute": "label",
-      "reflect": true
-    },
-    "enabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Deixa o componente dispon\u00EDvel ou n\u00E3o para sele\u00E7\u00E3o."
-      },
-      "attribute": "enabled",
-      "reflect": true,
-      "defaultValue": "true"
-    }
-  }; }
-  static get events() { return [{
-      "method": "actionClick",
-      "name": "actionClick",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "ClickOptions",
-        "resolved": "ClickOptions",
-        "references": {
-          "ClickOptions": {
-            "location": "import",
-            "path": "puppeteer"
-          }
-        }
-      }
-    }]; }
-}
+import { Component, Prop, h, Event } from '@stencil/core';
+export class EzLabelChip {
+  constructor() {
+    /**
+     * Deixa o componente disponível ou não para seleção.
+     */
+    this.enabled = true;
+  }
+  //---------------------------------------------
+  // Event handlers
+  //---------------------------------------------
+  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(--ac__icon--width)";
+      content.style.height = "var(--ac--height)";
+      if (slot.name == "leftIcon") {
+        content.style.left = "0px";
+        this._labelElem.classList.add('padding-left--small');
+      }
+      else if (slot.name == "rightIcon") {
+        content.style.right = "0px";
+        this._labelElem.classList.add('padding-right--small');
+      }
+    }
+  }
+  //---------------------------------------------
+  // Lifecycle web component
+  //---------------------------------------------
+  render() {
+    return (h("div", { onClick: () => this.actionClick.emit(), class: "label__container" },
+      h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }),
+      h("label", { ref: (el) => this._labelElem = el }, this.label),
+      h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } })));
+  }
+  static get is() { return "ez-action-chip"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ez-action-chip.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ez-action-chip.css"]
+  }; }
+  static get properties() { return {
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Label \u00E9 o t\u00EDtulo exibido no componente."
+      },
+      "attribute": "label",
+      "reflect": true
+    },
+    "enabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Deixa o componente dispon\u00EDvel ou n\u00E3o para sele\u00E7\u00E3o."
+      },
+      "attribute": "enabled",
+      "reflect": true,
+      "defaultValue": "true"
+    }
+  }; }
+  static get events() { return [{
+      "method": "actionClick",
+      "name": "actionClick",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "ClickOptions",
+        "resolved": "ClickOptions",
+        "references": {
+          "ClickOptions": {
+            "location": "import",
+            "path": "puppeteer"
+          }
+        }
+      }
+    }]; }
+}

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

@@ -1,94 +1,94 @@
-:host {
-  
-  /* dimensions */
-  --bt--min-width: 100px;
-  
-  /* dimensions */
-  --bt--height: 42px;
-  --bt__icon--width: 18px;
-  --bt__inline__icon--padding: 12px;
-
-  --bt--padding-top: var(--space--medium, 12px);
-  --bt--padding-bottom: var(--space--medium, 12px);
-  --bt--padding-right: var(--space--large, 24px);
-  --bt--padding-left: var(--space--large, 24px);
-  
-  /* general */
-  --bt--color: var(--text--inverted, #FFF);
-  --bt--font-size: var(--text--medium, 14px);
-  --bt--font-family: var(--font-pattern, Arial);
-  --bt--font-weight: var(--text-weight--large);
-  --bt--background-color: var(--color--primary, #c0c0c0);
-  --bt--border-radius: var(--border--radius-large, 12px);
-  --bt--border: none;
-
-  --bt--hover--background-color: var(--color--primary-700, var(--bt--background-color));
-  
-  --bt--disabled--color: var(--color--disable-primary, var(--bt--color));
-  --bt--disabled--background-color: var(--color--disabled, var(--bt--background-color));
-
-  --bt--focus--border: var(--bt--border);
-  --bt--focus--box-shadow: none;
-}
-
-button {
-  /*private*/
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: 0;
-  cursor: pointer;
-  transition: background-color 0.2s linear;
-  
-  /*public*/
-  min-width: var(--bt--min-width);
-  height: var(--bt--height);
-  font-family: var(--bt--font-family);
-  font-size: var(--bt--font-size);
-  font-weight: var(--bt--font-weight);
-  padding: var(--bt--padding-top) var(--bt--padding-right) var(--bt--padding-bottom) var(--bt--padding-left);
-  border-radius: var(--bt--border-radius);
-  
-  background-color: var(--bt--background-color);
-  color: var(--bt--color);
-  fill: var(--bt--color);
-  border: var(--bt--border);
-}
-
-button:hover{
-  background-color: var(--bt--hover--background-color);
-}
-
-button:focus{
-  /*FIXME: Estranho o botão não dar nenhuma indicação de que recebeu foco*/
-  outline: none;
-  border: var(--bt--focus--border);
-  box-shadow: var(--bt--focus--box-shadow);
-}
-
-button:disabled{
-  background-color: var(--bt--disabled--background-color);
-  color: var(--bt--disabled--color);
-  fill: var(--bt--disabled--color);
-  border: none;
-  cursor: no-drop;
-}
-
-button.icon{
-  width: 42px;
-  min-width: 42px;
-  height: 42px;
-  padding: 0px;
-}
-
-a {
-  /*private*/
-  font-family: var(--bt--font-family);
-  font-size: var(--bt--font-size);
-  font-weight: var(--bt--font-weight);
-  cursor: pointer;  
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
+:host {
+  
+  /* dimensions */
+  --bt--min-width: 100px;
+  
+  /* dimensions */
+  --bt--height: 42px;
+  --bt__icon--width: 18px;
+  --bt__inline__icon--padding: 12px;
+
+  --bt--padding-top: var(--space--medium, 12px);
+  --bt--padding-bottom: var(--space--medium, 12px);
+  --bt--padding-right: var(--space--large, 24px);
+  --bt--padding-left: var(--space--large, 24px);
+  
+  /* general */
+  --bt--color: var(--text--inverted, #FFF);
+  --bt--font-size: var(--text--medium, 14px);
+  --bt--font-family: var(--font-pattern, Arial);
+  --bt--font-weight: var(--text-weight--large);
+  --bt--background-color: var(--color--primary, #c0c0c0);
+  --bt--border-radius: var(--border--radius-large, 12px);
+  --bt--border: none;
+
+  --bt--hover--background-color: var(--color--primary-700, var(--bt--background-color));
+  
+  --bt--disabled--color: var(--color--disable-primary, var(--bt--color));
+  --bt--disabled--background-color: var(--color--disabled, var(--bt--background-color));
+
+  --bt--focus--border: var(--bt--border);
+  --bt--focus--box-shadow: none;
+}
+
+button {
+  /*private*/
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  cursor: pointer;
+  transition: background-color 0.2s linear;
+  
+  /*public*/
+  min-width: var(--bt--min-width);
+  height: var(--bt--height);
+  font-family: var(--bt--font-family);
+  font-size: var(--bt--font-size);
+  font-weight: var(--bt--font-weight);
+  padding: var(--bt--padding-top) var(--bt--padding-right) var(--bt--padding-bottom) var(--bt--padding-left);
+  border-radius: var(--bt--border-radius);
+  
+  background-color: var(--bt--background-color);
+  color: var(--bt--color);
+  fill: var(--bt--color);
+  border: var(--bt--border);
+}
+
+button:hover{
+  background-color: var(--bt--hover--background-color);
+}
+
+button:focus{
+  /*FIXME: Estranho o botão não dar nenhuma indicação de que recebeu foco*/
+  outline: none;
+  border: var(--bt--focus--border);
+  box-shadow: var(--bt--focus--box-shadow);
+}
+
+button:disabled{
+  background-color: var(--bt--disabled--background-color);
+  color: var(--bt--disabled--color);
+  fill: var(--bt--disabled--color);
+  border: none;
+  cursor: no-drop;
+}
+
+button.icon{
+  width: 42px;
+  min-width: 42px;
+  height: 42px;
+  padding: 0px;
+}
+
+a {
+  /*private*/
+  font-family: var(--bt--font-family);
+  font-size: var(--bt--font-size);
+  font-weight: var(--bt--font-weight);
+  cursor: pointer;  
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+

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

@@ -1,125 +1,125 @@
-import { Component, h, Prop } from '@stencil/core';
-export class EzButton {
-  constructor() {
-    /**
-     * Deixa o botão disponível ou não para interação com o usuário.
-     */
-    this.enabled = true;
-    /**
-       * Define o modo de uso do botão; opções: icon, link e regular
-       */
-    this.mode = "regular";
-  }
-  handleSlotChange(ev) {
-    const slot = ev.target;
-    const content = slot.assignedElements()[0];
-    if (this.mode == "link") {
-      content.style.display = "inline";
-      if (slot.name == "leftIcon") {
-        content.style.paddingRight = "var(--bt__inline__icon--padding)";
-      }
-      else if (slot.name == "rightIcon") {
-        content.style.paddingLeft = "var(--bt__inline__icon--padding)";
-      }
-    }
-  }
-  render() {
-    if (this.mode == "icon") {
-      return (h("button", { class: "icon", type: "button", disabled: !this.enabled },
-        h("ez-icon", { class: "icon", href: this.image, size: "large", onClick: evt => { if (!this.enabled)
-            evt.stopPropagation(); } })));
-    }
-    else if (this.mode == "link") {
-      return (h("a", null,
-        h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }),
-        this.label,
-        h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } })));
-    }
-    else {
-      return (h("button", { type: "button", disabled: !this.enabled },
-        h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }),
-        this.label,
-        h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } })));
-    }
-  }
-  static get is() { return "ez-button"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["ez-button.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["ez-button.css"]
-  }; }
-  static get properties() { return {
-    "label": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Texto indicativo da a\u00E7\u00E3o do bot\u00E3o."
-      },
-      "attribute": "label",
-      "reflect": true
-    },
-    "enabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Deixa o bot\u00E3o dispon\u00EDvel ou n\u00E3o para intera\u00E7\u00E3o 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": "Define o modo de uso do bot\u00E3o; op\u00E7\u00F5es: icon, link e regular"
-      },
-      "attribute": "mode",
-      "reflect": true,
-      "defaultValue": "\"regular\""
-    },
-    "image": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Define o icone svg que ser\u00E1 utilizado no bot\u00E3o, est\u00E1 propriedade s\u00F3 \u00E9 utilizada caso o componente esteja no modo 'icon'"
-      },
-      "attribute": "image",
-      "reflect": true
-    }
-  }; }
-}
+import { Component, h, Prop } from '@stencil/core';
+export class EzButton {
+  constructor() {
+    /**
+     * Deixa o botão disponível ou não para interação com o usuário.
+     */
+    this.enabled = true;
+    /**
+       * Define o modo de uso do botão; opções: icon, link e regular
+       */
+    this.mode = "regular";
+  }
+  handleSlotChange(ev) {
+    const slot = ev.target;
+    const content = slot.assignedElements()[0];
+    if (this.mode == "link") {
+      content.style.display = "inline";
+      if (slot.name == "leftIcon") {
+        content.style.paddingRight = "var(--bt__inline__icon--padding)";
+      }
+      else if (slot.name == "rightIcon") {
+        content.style.paddingLeft = "var(--bt__inline__icon--padding)";
+      }
+    }
+  }
+  render() {
+    if (this.mode == "icon") {
+      return (h("button", { class: "icon", type: "button", disabled: !this.enabled },
+        h("ez-icon", { class: "icon", href: this.image, size: "large", onClick: evt => { if (!this.enabled)
+            evt.stopPropagation(); } })));
+    }
+    else if (this.mode == "link") {
+      return (h("a", null,
+        h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }),
+        this.label,
+        h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } })));
+    }
+    else {
+      return (h("button", { type: "button", disabled: !this.enabled },
+        h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }),
+        this.label,
+        h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } })));
+    }
+  }
+  static get is() { return "ez-button"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ez-button.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ez-button.css"]
+  }; }
+  static get properties() { return {
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Texto indicativo da a\u00E7\u00E3o do bot\u00E3o."
+      },
+      "attribute": "label",
+      "reflect": true
+    },
+    "enabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Deixa o bot\u00E3o dispon\u00EDvel ou n\u00E3o para intera\u00E7\u00E3o 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": "Define o modo de uso do bot\u00E3o; op\u00E7\u00F5es: icon, link e regular"
+      },
+      "attribute": "mode",
+      "reflect": true,
+      "defaultValue": "\"regular\""
+    },
+    "image": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Define o icone svg que ser\u00E1 utilizado no bot\u00E3o, est\u00E1 propriedade s\u00F3 \u00E9 utilizada caso o componente esteja no modo 'icon'"
+      },
+      "attribute": "image",
+      "reflect": true
+    }
+  }; }
+}