@sankhyalabs/ezui 1.1.74 → 1.1.77

package/dist/cjs/{index-4d2896bb.js → index-4e4bae01.js}

@@ -1199,11 +1199,7 @@ const connectedCallback = (elm) => {
 };
 const disconnectedCallback = (elm) => {
     if ((plt.$flags$ & 1 /* isTmpDisconnected */) === 0) {
-        const hostRef = getHostRef(elm);
-        const instance = hostRef.$lazyInstance$ ;
-        {
-            safeCall(instance, 'disconnectedCallback');
-        }
+        getHostRef(elm);
     }
 };
 const bootstrapLazy = (lazyBundles, options = {}) => {
@@ -1305,6 +1301,7 @@ const getAssetPath = (path) => {
     const assetUrl = new URL(path, plt.$resourcesUrl$);
     return assetUrl.origin !== win.location.origin ? assetUrl.href : assetUrl.pathname;
 };
+const setAssetPath = (path) => (plt.$resourcesUrl$ = path);
 const hostRefs = new WeakMap();
 const getHostRef = (ref) => hostRefs.get(ref);
 const registerInstance = (lazyInstance, hostRef) => hostRefs.set((hostRef.$lazyInstance$ = lazyInstance), hostRef);
@@ -1400,3 +1397,4 @@ exports.getElement = getElement;
 exports.h = h;
 exports.promiseResolve = promiseResolve;
 exports.registerInstance = registerInstance;
+exports.setAssetPath = setAssetPath;

package/dist/cjs/loader.cjs.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-4d2896bb.js');
+const index = require('./index-4e4bae01.js');
 
 /*
- Stencil Client Patch Esm v2.10.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Esm v2.13.0 | MIT Licensed | https://stenciljs.com
  */
 const patchEsm = () => {
     return index.promiseResolve();
@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["ez-dialog.cjs",[[1,"ez-dialog",{"confirm":[1028],"critical":[1028],"message":[1025],"opened":[1540],"personalizedIconPath":[1025,"personalized-icon-path"],"ezTitle":[1025,"ez-title"],"handleButtonClick":[64],"show":[64]}]]],["ez-time-input.cjs",[[1,"ez-time-input",{"label":[513],"viewValue":[1537,"view-value"],"value":[1026],"enabled":[516],"errorMessage":[1537,"error-message"],"showSeconds":[516,"show-seconds"],"setFocus":[64],"setBlur":[64]}]]],["ez-action-chip.cjs",[[1,"ez-action-chip",{"label":[513],"enabled":[516]}]]],["ez-label-chip.cjs",[[1,"ez-label-chip",{"label":[513],"enabled":[516],"removable":[516],"value":[1540],"setFocus":[64],"setBlur":[64]}]]],["ez-list.cjs",[[1,"ez-list",{"initialList":[1040],"draggable":[4],"isMultipleSelection":[1540,"is-multiple-selection"],"getState":[64]}]]],["ez-modal.cjs",[[1,"ez-modal",{"modalSize":[1,"modal-size"],"align":[1],"opened":[4],"closeEsc":[4,"close-esc"],"closeOutsideClick":[4,"close-outside-click"]}]]],["ez-number-input.cjs",[[1,"ez-number-input",{"strvalue":[1025],"value":[1026],"label":[513],"enabled":[516],"errorMessage":[1537,"error-message"],"precision":[1538],"prettyprecision":[1538],"textleft":[516],"formatnumber":[513],"setFocus":[64],"setBlur":[64],"handleFocusout":[64]}]]],["ez-popover.cjs",[[1,"ez-popover",{"autoClose":[516,"auto-close"],"top":[1537],"left":[1537],"bottom":[1537],"right":[1537],"boxWidth":[513,"box-width"],"opened":[1540],"updatePosition":[64],"show":[64],"hide":[64]}]]],["ez-popup.cjs",[[1,"ez-popup",{"size":[1],"opened":[1540],"useHeader":[1540,"use-header"],"ezTitle":[1,"ez-title"]}]]],["ez-toast.cjs",[[1,"ez-toast",{"message":[1025],"fadeTime":[1026,"fade-time"],"useIcon":[1028,"use-icon"],"show":[64]}]]],["ez-button_16.cjs",[[0,"ez-form",{"metadataexecutor":[1],"loadexecutor":[1],"saveexecutor":[1],"removeexecutor":[1],"fieldsearchexecutor":[1],"ignoresavevalidation":[4],"metadata":[16],"slavemode":[4],"enabled":[4],"loading":[1540],"validate":[64],"getChanges":[64],"changeFieldValue":[64]}],[1,"form-metadata",{"name":[1],"label":[1],"dataunit":[1025],"many":[4],"autoload":[4],"metadata":[1040]}],[1,"ez-date-input",{"label":[513],"value":[1040],"enabled":[516],"errorMessage":[1537,"error-message"]}],[1,"ez-search",{"value":[1537],"label":[1537],"enabled":[1540],"errorMessage":[1537,"error-message"],"optionLoader":[16],"showSelectedValue":[4,"show-selected-value"],"showOptionValue":[4,"show-option-value"]}],[1,"ez-numeric-input",{"label":[513],"value":[1538],"enabled":[516],"errorMessage":[1537,"error-message"],"precision":[8],"prettyprecision":[8]}],[1,"ez-check",{"label":[513],"value":[1540],"enabled":[516],"mode":[513],"getMode":[64],"setFocus":[64]}],[1,"ez-collapsible-box",{"value":[1540],"label":[513],"headersize":[513],"iconplacement":[513],"showHide":[64]}],[1,"ez-tabselector",{"selectedIndex":[1537,"selected-index"],"selectedTab":[1537,"selected-tab"],"tabs":[1]}],[1,"ez-text-area",{"label":[513],"value":[1537],"enabled":[516],"loading":[516],"errorMessage":[1537,"error-message"],"rows":[1538],"setFocus":[64],"setBlur":[64]}],[1,"ez-upload",{"label":[1],"enabled":[4],"maxfilesize":[2],"maxfiles":[2],"requestheaders":[8],"urlupload":[1],"urldelete":[1],"value":[1040],"addFiles":[64]}],[1,"place-holder"],[1,"ez-button",{"label":[513],"enabled":[516],"mode":[513],"image":[513]}],[1,"ez-combo-box",{"value":[1537],"label":[513],"enabled":[516],"options":[1040],"errorMessage":[1537,"error-message"],"searchMode":[4,"search-mode"],"showSelectedValue":[4,"show-selected-value"],"showOptionValue":[4,"show-option-value"],"optionLoader":[16],"_preSelection":[32],"_visibleOptions":[32]}],[1,"ez-calendar",{"value":[1040],"floating":[516],"show":[64],"fitVertical":[64],"hide":[64]}],[1,"ez-icon",{"size":[513],"href":[513]}],[1,"ez-text-input",{"label":[513],"value":[1537],"enabled":[516],"loading":[516],"errorMessage":[1537,"error-message"],"mask":[1],"restrict":[1],"setFocus":[64],"setBlur":[64]}]]]], options);
+  return index.bootstrapLazy([["ez-form.cjs",[[0,"ez-form",{"metadataExecutor":[1,"metadata-executor"],"loadExecutor":[1,"load-executor"],"saveExecutor":[1,"save-executor"],"removeExecutor":[1,"remove-executor"],"fieldSearchExecutor":[1,"field-search-executor"],"ignoreSaveValidation":[4,"ignore-save-validation"],"metadata":[16],"slaveMode":[4,"slave-mode"],"enabled":[4],"loading":[1540],"validate":[64],"getChanges":[64],"changeFieldValue":[64]}]]],["ez-date-time-input.cjs",[[1,"ez-date-time-input",{"label":[513],"value":[1040],"enabled":[516],"errorMessage":[1537,"error-message"],"showSeconds":[516,"show-seconds"]}]]],["ez-dialog.cjs",[[1,"ez-dialog",{"confirm":[1028],"critical":[1028],"message":[1025],"opened":[1540],"personalizedIconPath":[1025,"personalized-icon-path"],"ezTitle":[1025,"ez-title"],"handleButtonClick":[64],"show":[64]}]]],["ez-time-input.cjs",[[1,"ez-time-input",{"label":[513],"viewValue":[1537,"view-value"],"value":[1026],"enabled":[516],"errorMessage":[1537,"error-message"],"showSeconds":[516,"show-seconds"],"setFocus":[64],"setBlur":[64]}]]],["ez-number-input.cjs",[[1,"ez-number-input",{"label":[513],"value":[1544],"enabled":[516],"errorMessage":[1537,"error-message"],"precision":[1538],"prettyPrecision":[1538,"pretty-precision"],"textleft":[516],"formatNumber":[513,"format-number"],"_leftSlotItem":[32],"_rightSlotItem":[32]}]]],["ez-action-chip.cjs",[[1,"ez-action-chip",{"label":[513],"enabled":[516]}]]],["ez-application.cjs",[[0,"ez-application"]]],["ez-label-chip.cjs",[[1,"ez-label-chip",{"label":[513],"enabled":[516],"removable":[516],"value":[1540],"setFocus":[64],"setBlur":[64]}]]],["ez-popover.cjs",[[1,"ez-popover",{"autoClose":[516,"auto-close"],"top":[1537],"left":[1537],"bottom":[1537],"right":[1537],"boxWidth":[513,"box-width"],"opened":[1540],"updatePosition":[64],"show":[64],"hide":[64]}]]],["ez-popup.cjs",[[1,"ez-popup",{"size":[1],"opened":[1540],"useHeader":[1540,"use-header"],"ezTitle":[1,"ez-title"]}]]],["ez-toast.cjs",[[1,"ez-toast",{"message":[1025],"fadeTime":[1026,"fade-time"],"useIcon":[1028,"use-icon"],"show":[64]}]]],["form-metadata.cjs",[[1,"form-metadata",{"name":[1],"label":[1],"dataunit":[1025],"many":[4],"autoload":[4],"metadata":[1040]}]]],["ez-button_11.cjs",[[0,"test-du"],[0,"ez-grid",{"multipleSelection":[4,"multiple-selection"],"pageSize":[2,"page-size"],"serverUrl":[1,"server-url"],"dataUnit":[16],"_navigationHasPrevious":[32],"_navigationHasNext":[32],"_navigationFirstRow":[32],"_navigationLastRow":[32],"_navigationTotalRows":[32],"_popUpVisible":[32],"setColumnsDef":[64],"addColumnMenuItem":[64],"setColumnsState":[64],"setData":[64],"getSelection":[64],"getColumnsState":[64],"getColumns":[64]}],[1,"grid-config",{"selectedTab":[1025,"selected-tab"],"columns":[1040]}],[1,"ez-modal",{"modalSize":[1,"modal-size"],"align":[1],"opened":[1028],"closeEsc":[4,"close-esc"],"closeOutsideClick":[4,"close-outside-click"]}],[1,"ez-list",{"dataSource":[1040],"useGroups":[1540,"use-groups"],"ezDraggable":[1028,"ez-draggable"],"ezSelectable":[1028,"ez-selectable"],"itemSlotBuilder":[1040],"_listItems":[32],"_listGroupItems":[32],"setSelection":[64],"getSelection":[64],"getList":[64]}],[1,"select-box",{"selectedOption":[1,"selected-option"]}],[1,"ez-check",{"label":[513],"value":[1540],"enabled":[516],"mode":[513],"getMode":[64],"setFocus":[64]}],[1,"ez-tabselector",{"selectedIndex":[1537,"selected-index"],"selectedTab":[1537,"selected-tab"],"tabs":[1]}],[1,"ez-button",{"label":[513],"enabled":[516],"mode":[513],"image":[513],"size":[513]}],[1,"ez-icon",{"size":[513],"href":[513]}],[1,"ez-text-input",{"label":[513],"value":[1537],"enabled":[516],"loading":[516],"errorMessage":[1537,"error-message"],"mask":[1],"restrict":[1],"setFocus":[64],"setBlur":[64]}]]],["ez-combo-box.cjs",[[1,"ez-combo-box",{"value":[1537],"label":[513],"enabled":[516],"options":[1040],"errorMessage":[1537,"error-message"],"searchMode":[4,"search-mode"],"showSelectedValue":[4,"show-selected-value"],"showOptionValue":[4,"show-option-value"],"optionLoader":[16],"_preSelection":[32],"_visibleOptions":[32]}]]],["ez-calendar.cjs",[[1,"ez-calendar",{"value":[1040],"floating":[516],"time":[516],"showSeconds":[516,"show-seconds"],"show":[64],"fitVertical":[64],"hide":[64]}]]],["ez-collapsible-box_6.cjs",[[1,"ez-date-input",{"label":[513],"value":[1040],"enabled":[516],"errorMessage":[1537,"error-message"]}],[1,"ez-search",{"value":[1537],"label":[1537],"enabled":[1540],"errorMessage":[1537,"error-message"],"optionLoader":[16],"showSelectedValue":[4,"show-selected-value"],"showOptionValue":[4,"show-option-value"]}],[1,"ez-collapsible-box",{"value":[1540],"label":[513],"headerSize":[513,"header-size"],"iconPlacement":[513,"icon-placement"],"showHide":[64]}],[1,"ez-text-area",{"label":[513],"value":[1537],"enabled":[516],"loading":[516],"errorMessage":[1537,"error-message"],"rows":[1538],"setFocus":[64],"setBlur":[64]}],[1,"ez-upload",{"label":[1],"enabled":[4],"maxFileSize":[2,"max-file-size"],"maxFiles":[2,"max-files"],"requestHeaders":[8,"request-headers"],"urlUpload":[1,"url-upload"],"urlDelete":[1,"url-delete"],"value":[1040],"addFiles":[64]}],[1,"place-holder"]]]], options);
   });
 };
 

package/dist/collection/collection-manifest.json

@@ -5,19 +5,23 @@
     "./components/ez-list/ez-list.js",
     "./components/ez-upload/ez-upload.js",
     "./components/ez-action-chip/ez-action-chip.js",
+    "./components/ez-application/ez-application.js",
     "./components/ez-button/ez-button.js",
     "./components/ez-calendar/ez-calendar.js",
     "./components/ez-check/ez-check.js",
     "./components/ez-collapsible-box/ez-collapsible-box.js",
     "./components/ez-date-input/ez-date-input.js",
+    "./components/ez-date-time-input/ez-date-time-input.js",
     "./components/ez-dialog/ez-dialog.js",
     "./components/ez-form/subcomponents/form-metadata.js",
     "./components/ez-form/subcomponents/place-holder.js",
+    "./components/ez-grid/ez-grid.js",
+    "./components/ez-grid/subcomponents/gridconfig/grid-config.js",
+    "./components/ez-grid/subcomponents/select-box/select-box.js",
     "./components/ez-icon/ez-icon.js",
     "./components/ez-label-chip/ez-label-chip.js",
     "./components/ez-modal/ez-modal.js",
     "./components/ez-number-input/ez-number-input.js",
-    "./components/ez-numeric-input/ez-numeric-input.js",
     "./components/ez-popover/ez-popover.js",
     "./components/ez-popup/ez-popup.js",
     "./components/ez-search/ez-search.js",
@@ -25,11 +29,12 @@
     "./components/ez-text-area/ez-text-area.js",
     "./components/ez-text-input/ez-text-input.js",
     "./components/ez-time-input/ez-time-input.js",
-    "./components/ez-toast/ez-toast.js"
+    "./components/ez-toast/ez-toast.js",
+    "./components/test-du/test-du.js"
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "2.10.0",
+    "version": "2.13.0",
     "typescriptVersion": "4.3.5"
   },
   "collections": [],

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

@@ -0,0 +1,3 @@
+:host {
+  
+}

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

@@ -0,0 +1,37 @@
+import { Component, h, Event } from "@stencil/core";
+import { Application } from "@sankhyalabs/core";
+export class EzApplication {
+  componentWillLoad() {
+    //Initizalize application
+    this.application = Application.get();
+  }
+  componentDidLoad() {
+    this.applicationLoaded.emit(true);
+  }
+  render() {
+    return (h("div", null));
+  }
+  static get is() { return "ez-application"; }
+  static get originalStyleUrls() { return {
+    "$": ["ez-application.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ez-application.css"]
+  }; }
+  static get events() { return [{
+      "method": "applicationLoaded",
+      "name": "applicationLoaded",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Evento disparado quando a aplica\u00E7\u00E3o for carregada."
+      },
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      }
+    }]; }
+}

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

@@ -2,56 +2,56 @@
 
   /* dimensions */
   /*@doc Define a largura do componente.*/
-  --button--min-width: 100px;
+  --ez-button--min-width: 100px;
 
   /* dimensions */
   /*@doc Define a altura do componente.*/
-  --button--height: 42px;
+  --ez-button--height: 42px;
   /*@doc Define a largura do slot que contém o ícone.*/
-  --button__icon--width: 18px;
+  --ez-button__icon--width: 18px;
   /*@doc Define o espaçamento entre o ícone e o label.*/
-  --button__inline__icon--padding: 12px;
+  --ez-button__inline__icon--padding: 12px;
 
   /*@doc Define o espaçamento superior ao label.*/
-  --button--padding-top: var(--space--medium, 12px);
+  --ez-button--padding-top: var(--space--medium, 12px);
   /*@doc Define o espaçamento inferior ao label.*/
-  --button--padding-bottom: var(--space--medium, 12px);
+  --ez-button--padding-bottom: var(--space--medium, 12px);
   /*@doc Define o espaçamento à direita do label.*/
-  --button--padding-right: var(--space--large, 24px);
+  --ez-button--padding-right: var(--space--large, 24px);
   /*@doc Define o espaçamento à esquerda do label.*/
-  --button--padding-left: var(--space--large, 24px);
+  --ez-button--padding-left: var(--space--large, 24px);
 
   /* general */
   /*@doc Define a cor do label.*/
-  --button--color: var(--text--primary, #FFF);
+  --ez-button--color: var(--text--primary, #FFF);
   /*@doc Define o tamanho do label.*/
-  --button--font-size: var(--text--medium, 14px);
+  --ez-button--font-size: var(--text--medium, 14px);
   /*@doc Define a família da fonte do label.*/
-  --button--font-family: var(--font-pattern, Arial);
+  --ez-button--font-family: var(--font-pattern, Arial);
   /*@doc Define o peso da fonte do label.*/
-  --button--font-weight: var(--text-weight--large);
+  --ez-button--font-weight: var(--text-weight--large);
   /*@doc Define a cor de fundo do botão.*/
-  --button--background-color: var(--background--medium, #c0c0c0);
+  --ez-button--background-color: var(--background--medium, #c0c0c0);
   /*@doc Define o raio da borda do botão.*/
-  --button--border-radius: var(--border--radius-large, 12px);
+  --ez-button--border-radius: var(--border--radius-large, 12px);
   /*@doc Define o estilo da borda do botão.*/
-  --button--border: none;
+  --ez-button--border: none;
 
   /*@doc Define a cor de fundo quando o cursor está sobre o botão.*/
-  --button--hover--background-color: var(--background--strong, var(--button--background-color));
+  --ez-button--hover--background-color: var(--background--strong, var(--ez-button--background-color));
 
   /*@doc Define a cor do texto quando o botão está desabilitado.*/
-  --button--disabled-color: var(--text--disable);
+  --ez-button--disabled-color: var(--text--disable);
   /*@doc Define a cor de fundo quando o botão está desabilitado.*/
-  --button--disabled--background-color: var(--color--disable-secondary);
+  --ez-button--disabled--background-color: var(--color--disable-secondary);
 
   /*@doc Define o estido da borda quando o botão está selecionado.*/
-  --button--focus--border: var(--button--border);
+  --ez-button--focus--border: var(--ez-button--border);
   /*@doc Define a sombra do botão quando selecionado.*/
-  --button--focus--box-shadow: none;
+  --ez-button--focus--box-shadow: none;
 
   /*@doc Define a cor do texto do botão no modo link.*/
-  --button--link-color: var(--title--primary, '#C0C0C0');
+  --ez-button--link-color: var(--title--primary, '#C0C0C0');
 }
 
 ez-icon {
@@ -68,52 +68,86 @@ button {
   transition: background-color 0.2s linear;
 
   /*public*/
-  min-width: var(--button--min-width);
-  height: var(--button--height);
-  font-family: var(--button--font-family);
-  font-size: var(--button--font-size);
-  font-weight: var(--button--font-weight);
-  padding: var(--button--padding-top) var(--button--padding-right) var(--button--padding-bottom) var(--button--padding-left);
-  border-radius: var(--button--border-radius);
-
-  background-color: var(--button--background-color);
-  color: var(--button--color);
-  fill: var(--button--color);
-  border: var(--button--border);
+  min-width: var(--ez-button--min-width);
+  height: var(--ez-button--height);
+  font-family: var(--ez-button--font-family);
+  font-size: var(--ez-button--font-size);
+  font-weight: var(--ez-button--font-weight);
+  padding: var(--ez-button--padding-top) var(--ez-button--padding-right) var(--ez-button--padding-bottom) var(--ez-button--padding-left);
+  border-radius: var(--ez-button--border-radius);
+
+  background-color: var(--ez-button--background-color);
+  color: var(--ez-button--color);
+  fill: var(--ez-button--color);
+  border: var(--ez-button--border);
 }
 
 button:hover {
-  background-color: var(--button--hover--background-color);
+  background-color: var(--ez-button--hover--background-color);
 }
 
 button:focus {
   /*FIXME: Estranho o botão não dar nenhuma indicação de que recebeu foco*/
   outline: none;
-  border: var(--button--focus--border);
-  box-shadow: var(--button--focus--box-shadow);
+  border: var(--ez-button--focus--border);
+  box-shadow: var(--ez-button--focus--box-shadow);
 }
 
 button:disabled {
-  background-color: var(--button--disabled--background-color);
-  color: var(--button--disabled-color);
-  fill: var(--button--disabled-color);
+  background-color: var(--ez-button--disabled--background-color);
+  color: var(--ez-button--disabled-color);
+  fill: var(--ez-button--disabled-color);
   border: none;
   cursor: no-drop;
 }
 
 button.icon {
+  padding: 0px;
+}
+
+button.small {
+  width: 32px;
+  min-width: 32px;
+  height: 32px;
+}
+
+button.medium {
   width: 42px;
   min-width: 42px;
   height: 42px;
-  padding: 0px;
 }
 
+button.large {
+  width: 52px;
+  min-width: 52px;
+  height: 52px;
+}
+
+.label-icon {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: var(--ez-button--color);
+}
+
+.label-icon label {
+  max-width: 150px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: pointer;
+  font-family: var(--ez-button--font-family);
+  font-size: var(--ez-button--font-size);
+  font-weight: var(--ez-button--font-weight);
+}
+
+
 a {
   /*private*/
-  font-family: var(--button--font-family);
-  font-size: var(--button--font-size);
-  font-weight: var(--button--font-weight);
-  color: var(--button--link-color);
+  font-family: var(--ez-button--font-family);
+  font-size: var(--ez-button--font-size);
+  font-weight: var(--ez-button--font-weight);
+  color: var(--ez-button--link-color);
   cursor: pointer;
   display: flex;
   align-items: center;

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

@@ -9,6 +9,13 @@ export class EzButton {
        * Define o modo de uso do botão; opções: icon, link e regular
        */
     this.mode = "regular";
+    /**
+     * Quando em modo "icon" pode-se escolher entre [small,medium,large] (somente para o modo "icon")
+     */
+    this.size = "medium";
+  }
+  getIconSize() {
+    return this.size;
   }
   handleSlotChange(ev) {
     const slot = ev.target;
@@ -16,10 +23,10 @@ export class EzButton {
     if (this.mode == "link") {
       content.style.display = "inline";
       if (slot.name == "leftIcon") {
-        content.style.paddingRight = "var(--button__inline__icon--padding)";
+        content.style.paddingRight = "var(--ez-button__inline__icon--padding)";
       }
       else if (slot.name == "rightIcon") {
-        content.style.paddingLeft = "var(--button__inline__icon--padding)";
+        content.style.paddingLeft = "var(--ez-button__inline__icon--padding)";
       }
     }
     else {
@@ -28,10 +35,17 @@ export class EzButton {
   }
   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)
+      return (h("button", { class: "icon " + this.size, type: "button", disabled: !this.enabled },
+        h("ez-icon", { class: "icon", href: this.image, size: this.getIconSize(), onClick: evt => { if (!this.enabled)
             evt.stopPropagation(); } })));
     }
+    else if (this.mode == "label-icon") {
+      return (h("div", { class: "label-icon" },
+        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(); } })),
+        h("label", { title: this.label }, this.label)));
+    }
     else if (this.mode == "link") {
       return (h("a", null,
         h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }),
@@ -123,6 +137,24 @@ export class EzButton {
       },
       "attribute": "image",
       "reflect": true
+    },
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Quando em modo \"icon\" pode-se escolher entre [small,medium,large] (somente para o modo \"icon\")"
+      },
+      "attribute": "size",
+      "reflect": true,
+      "defaultValue": "\"medium\""
     }
   }; }
 }