@sankhyalabs/ezui 1.1.87 → 1.1.88

package/dist/cjs/ez-button_11.cjs.entry.js

@@ -45,13 +45,13 @@ let EzButton = class {
   }
   render() {
     if (this.mode == "icon") {
-      return (index.h("button", { class: "icon " + this.size, type: "button", disabled: !this.enabled }, index.h("ez-icon", { class: "icon", href: this.image, size: this.getIconSize(), onClick: evt => {
+      return (index.h("button", { class: "icon " + this.size, type: "button", disabled: !this.enabled }, index.h("ez-icon", { class: "icon", href: this.image, iconName: this.iconName, size: this.getIconSize(), onClick: evt => {
           if (!this.enabled)
             evt.stopPropagation();
         } })));
     }
     else if (this.mode == "label-icon") {
-      return (index.h("div", { class: "label-icon" }, index.h("button", { class: "icon", type: "button", disabled: !this.enabled }, index.h("ez-icon", { class: "icon", href: this.image, size: "large", onClick: evt => {
+      return (index.h("div", { class: "label-icon" }, index.h("button", { class: "icon", type: "button", disabled: !this.enabled }, index.h("ez-icon", { class: "icon", href: this.image, iconName: this.iconName, size: "large", onClick: evt => {
           if (!this.enabled)
             evt.stopPropagation();
         } })), index.h("label", { title: this.label }, this.label)));
@@ -110535,8 +110535,8 @@ let EzGrid = class {
     }
     return [
       index.h("div", { class: "text text--primary text--medium margin-right--medium" }, index.h("strong", { class: "text text--primary text--medium" }, `${this._navigationFirstRow}-${this._navigationLastRow}`), ` de ${this._navigationTotalRows}`),
-      index.h("ez-button", { size: "small", image: AssetsUtils.getSpritePath("chevron-left"), class: "button--secondary margin-right--medium", mode: "icon", enabled: this._navigationHasPrevious, onClick: () => this._gridController.previousPage(), label: "P\u00E1gina anterior" }),
-      index.h("ez-button", { size: "small", image: AssetsUtils.getSpritePath("chevron-right"), class: "button--secondary margin-right--medium", mode: "icon", enabled: this._navigationHasNext, onClick: () => this._gridController.nextPage(), label: "Pr\u00F3xima P\u00E1gina" })
+      index.h("ez-button", { size: "small", iconName: "chevron-left", class: "button--secondary margin-right--medium", mode: "icon", enabled: this._navigationHasPrevious, onClick: () => this._gridController.previousPage(), label: "P\u00E1gina anterior" }),
+      index.h("ez-button", { size: "small", iconName: "chevron-right", class: "button--secondary margin-right--medium", mode: "icon", enabled: this._navigationHasNext, onClick: () => this._gridController.nextPage(), label: "Pr\u00F3xima P\u00E1gina" })
     ];
   }
   applyConfig(cols) {
@@ -110552,13 +110552,13 @@ let EzGrid = class {
     this._popUpVisible = true;
   }
   render() {
-    return (index.h(index.Host, null, index.h("div", { class: "box box--shadow padding--medium grid__header margin-bottom--small" }, this.getPaginationControl(), index.h("ez-button", { size: "small", image: AssetsUtils.getSpritePath("settings"), class: "button--secondary", mode: "icon", onClick: () => { this.openConfig(); } })), index.h("div", { class: "grid__container ag-sankhya-theme", ref: elem => this._container = elem }), index.h("div", { class: "grid__footer" }), index.h("ez-modal", { modalSize: "small", closeEsc: true, closeOutsideClick: true, opened: this._popUpVisible, onEzCloseModal: () => this._popUpVisible = false }, index.h("grid-config", { ref: ref => this._gridConfig = ref, selectedTab: "Colunas", onConfigFinish: evt => this.applyConfig(evt.detail), onConfigCancel: _evt => this.closeConfig() }))));
+    return (index.h(index.Host, null, index.h("div", { class: "box box--shadow padding--medium grid__header margin-bottom--small" }, this.getPaginationControl(), index.h("ez-button", { size: "small", iconName: "settings", class: "button--secondary", mode: "icon", onClick: () => { this.openConfig(); } })), index.h("div", { class: "grid__container ag-sankhya-theme", ref: elem => this._container = elem }), index.h("div", { class: "grid__footer" }), index.h("ez-modal", { modalSize: "small", closeEsc: true, closeOutsideClick: true, opened: this._popUpVisible, onEzCloseModal: () => this._popUpVisible = false }, index.h("grid-config", { ref: ref => this._gridConfig = ref, selectedTab: "Colunas", onConfigFinish: evt => this.applyConfig(evt.detail), onConfigCancel: _evt => this.closeConfig() }))));
   }
   static get assetsDirs() { return ["../assets"]; }
 };
 EzGrid.style = ezGridCss;
 
-const ezIconCss = ":host{display:flex;overflow:hidden;position:relative;--ez-icon--color:var(--icon--color, #ffffff)}svg{display:flex;justify-content:center;align-items:center;fill:var(--ez-icon--color)}.x-small{width:12px;height:12px}.small{width:16px;height:16px}.medium{width:20px;height:20px}.large{width:24px;height:24px}.x-large{width:30px;height:30px}";
+const ezIconCss = ":host{display:flex;overflow:hidden;position:relative;--ez-icon--color:var(--icon--color, #ffffff)}svg{display:flex;justify-content:center;align-items:center;fill:var(--ez-icon--color)}.x-small{width:12px;height:12px}.small{width:16px;height:16px}.medium{width:20px;height:20px}.large{width:24px;height:24px}.x-large{width:30px;height:30px}[class^=\"ez-icon-\"],[class*=\" ez-icon-\"]{font-family:'ez-icons' !important;font-size:16px;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.ez-icon-account-outline:before{content:\"\\ea01\"}.ez-icon-account:before{content:\"\\ea02\"}.ez-icon-alert-circle-inverted:before{content:\"\\ea03\"}.ez-icon-alert-circle:before{content:\"\\ea04\"}.ez-icon-alert-mail:before{content:\"\\ea05\"}.ez-icon-alert-outline:before{content:\"\\ea06\"}.ez-icon-alert-popup:before{content:\"\\ea07\"}.ez-icon-apps:before{content:\"\\ea08\"}.ez-icon-arrow_back:before{content:\"\\ea09\"}.ez-icon-bell-inverted:before{content:\"\\ea0a\"}.ez-icon-bell:before{content:\"\\ea0b\"}.ez-icon-business-center:before{content:\"\\ea0c\"}.ez-icon-calendar-text:before{content:\"\\ea0d\"}.ez-icon-calendar:before{content:\"\\ea0e\"}.ez-icon-check-circle-inverted:before{content:\"\\ea0f\"}.ez-icon-check-circle:before{content:\"\\ea10\"}.ez-icon-check:before{content:\"\\ea11\"}.ez-icon-chevron-down:before{content:\"\\ea12\"}.ez-icon-chevron-left:before{content:\"\\ea13\"}.ez-icon-chevron-right:before{content:\"\\ea14\"}.ez-icon-chevron-up:before{content:\"\\ea15\"}.ez-icon-circle--medium:before{content:\"\\ea16\"}.ez-icon-circle:before{content:\"\\ea17\"}.ez-icon-clipboard:before{content:\"\\ea18\"}.ez-icon-close-circle-inverted:before{content:\"\\ea19\"}.ez-icon-close-circle:before{content:\"\\ea1a\"}.ez-icon-close:before{content:\"\\ea1b\"}.ez-icon-comment-inverted:before{content:\"\\ea1c\"}.ez-icon-comment:before{content:\"\\ea1d\"}.ez-icon-configuration:before{content:\"\\ea1e\"}.ez-icon-copy:before{content:\"\\ea1f\"}.ez-icon-crop:before{content:\"\\ea20\"}.ez-icon-delete:before{content:\"\\ea21\"}.ez-icon-description:before{content:\"\\ea22\"}.ez-icon-dot-notification:before{content:\"\\ea23\"}.ez-icon-dots-horizontal:before{content:\"\\ea24\"}.ez-icon-dots-vertical:before{content:\"\\ea25\"}.ez-icon-drag-indicator:before{content:\"\\ea26\"}.ez-icon-edit-file:before{content:\"\\ea27\"}.ez-icon-edit-table:before{content:\"\\ea28\"}.ez-icon-edit-time:before{content:\"\\ea29\"}.ez-icon-edit:before{content:\"\\ea2a\"}.ez-icon-email-inverted:before{content:\"\\ea2b\"}.ez-icon-email:before{content:\"\\ea2c\"}.ez-icon-error-octagon:before{content:\"\\ea2d\"}.ez-icon-expand:before{content:\"\\ea2e\"}.ez-icon-eye-off:before{content:\"\\ea2f\"}.ez-icon-eye:before{content:\"\\ea30\"}.ez-icon-favorite:before{content:\"\\ea31\"}.ez-icon-file-download:before{content:\"\\ea32\"}.ez-icon-file-upload:before{content:\"\\ea33\"}.ez-icon-filter:before{content:\"\\ea34\"}.ez-icon-find-file:before{content:\"\\ea35\"}.ez-icon-find-page:before{content:\"\\ea36\"}.ez-icon-format-color-fill:before{content:\"\\ea37\"}.ez-icon-help-circle-outline:before{content:\"\\ea38\"}.ez-icon-help-inverted:before{content:\"\\ea39\"}.ez-icon-help:before{content:\"\\ea3a\"}.ez-icon-home:before{content:\"\\ea3b\"}.ez-icon-language:before{content:\"\\ea3c\"}.ez-icon-launch:before{content:\"\\ea3d\"}.ez-icon-lightbulb:before{content:\"\\ea3e\"}.ez-icon-list:before{content:\"\\ea3f\"}.ez-icon-loading:before{content:\"\\ea40\"}.ez-icon-lock-outline:before{content:\"\\ea41\"}.ez-icon-lock:before{content:\"\\ea42\"}.ez-icon-menu:before{content:\"\\ea43\"}.ez-icon-minus-circle-inverted:before{content:\"\\ea44\"}.ez-icon-minus:before{content:\"\\ea45\"}.ez-icon-money-off:before{content:\"\\ea46\"}.ez-icon-money:before{content:\"\\ea47\"}.ez-icon-north-west:before{content:\"\\ea48\"}.ez-icon-pause:before{content:\"\\ea49\"}.ez-icon-payments:before{content:\"\\ea4a\"}.ez-icon-play:before{content:\"\\ea4b\"}.ez-icon-plus-circle-inverted:before{content:\"\\ea4c\"}.ez-icon-plus-circle:before{content:\"\\ea4d\"}.ez-icon-plus:before{content:\"\\ea4e\"}.ez-icon-power:before{content:\"\\ea4f\"}.ez-icon-push-pin:before{content:\"\\ea50\"}.ez-icon-restore:before{content:\"\\ea51\"}.ez-icon-return:before{content:\"\\ea52\"}.ez-icon-rotate:before{content:\"\\ea53\"}.ez-icon-save:before{content:\"\\ea54\"}.ez-icon-search:before{content:\"\\ea55\"}.ez-icon-settings-inverted:before{content:\"\\ea56\"}.ez-icon-settings:before{content:\"\\ea57\"}.ez-icon-share:before{content:\"\\ea58\"}.ez-icon-shield:before{content:\"\\ea59\"}.ez-icon-south-east:before{content:\"\\ea5a\"}.ez-icon-success-circle:before{content:\"\\ea5b\"}.ez-icon-sync:before{content:\"\\ea5c\"}.ez-icon-table:before{content:\"\\ea5d\"}.ez-icon-timer-outline:before{content:\"\\ea5e\"}.ez-icon-user-circle:before{content:\"\\ea5f\"}.ez-icon-warning-minus:before{content:\"\\ea60\"}.ez-icon-warning-triangle:before{content:\"\\ea61\"}.x-small--font{font-size:12px}.small--font{font-size:16px}.medium--font{font-size:20px}.large--font{font-size:24px}.x-large--font{font-size:30px}";
 
 let EzIcon = class {
   constructor(hostRef) {
@@ -110571,12 +110571,22 @@ let EzIcon = class {
   isSprite() {
     return this.href && this.href.indexOf('#') > -1;
   }
+  getIconClassName() {
+    return `ez-icon-${this.iconName}`;
+  }
+  getIconContent() {
+    if (this.isSprite()) {
+      return index.h("svg", { class: this.size, role: "img" }, index.h("use", { xlinkHref: this.href }));
+    }
+    else if (!StringUtils.isEmpty(this.iconName)) {
+      return index.h("span", { class: `icon-content ${this.getIconClassName()}  ${this.size}--font` });
+    }
+    else {
+      return index.h("img", { class: this.size, src: this.href });
+    }
+  }
   render() {
-    return (index.h(index.Host, null, this.isSprite()
-      ?
-        index.h("svg", { class: this.size, role: "img" }, index.h("use", { xlinkHref: this.href }))
-      :
-        index.h("img", { class: this.size, src: this.href })));
+    return (index.h(index.Host, null, this.getIconContent()));
   }
 };
 EzIcon.style = ezIconCss;

package/dist/cjs/ezui.cjs.js

@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["ez-form.cjs",[[0,"ez-form",{"dataUnit":[1040],"config":[16],"submit":[64],"cancel":[64],"validate":[64]}]]],["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-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]}]]],["ez-calendar.cjs",[[1,"ez-calendar",{"value":[1040],"floating":[516],"time":[516],"showSeconds":[516,"show-seconds"],"show":[64],"fitVertical":[64],"hide":[64]}]]],["ez-button_11.cjs",[[0,"test-du"],[2,"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]}],[2,"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-button",{"label":[513],"enabled":[516],"mode":[513],"image":[513],"size":[513]}],[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-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-collapsible-box_7.cjs",[[1,"ez-date-input",{"label":[513],"value":[1040],"enabled":[516],"errorMessage":[1537,"error-message"]}],[1,"ez-date-time-input",{"label":[513],"value":[1040],"enabled":[516],"errorMessage":[1537,"error-message"],"showSeconds":[516,"show-seconds"]}],[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-number-input",{"label":[1],"value":[1538],"enabled":[4],"errorMessage":[1537,"error-message"],"precision":[2],"prettyPrecision":[2,"pretty-precision"]}],[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]}]]]], options);
+  return index.bootstrapLazy([["ez-form.cjs",[[0,"ez-form",{"dataUnit":[1040],"config":[16],"submit":[64],"cancel":[64],"validate":[64]}]]],["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-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]}]]],["ez-calendar.cjs",[[1,"ez-calendar",{"value":[1040],"floating":[516],"time":[516],"showSeconds":[516,"show-seconds"],"show":[64],"fitVertical":[64],"hide":[64]}]]],["ez-button_11.cjs",[[0,"test-du"],[2,"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]}],[2,"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-button",{"label":[513],"enabled":[516],"mode":[513],"image":[513],"iconName":[513,"icon-name"],"size":[513]}],[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-icon",{"size":[513],"href":[513],"iconName":[513,"icon-name"]}],[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-collapsible-box_7.cjs",[[1,"ez-date-input",{"label":[513],"value":[1040],"enabled":[516],"errorMessage":[1537,"error-message"]}],[1,"ez-date-time-input",{"label":[513],"value":[1040],"enabled":[516],"errorMessage":[1537,"error-message"],"showSeconds":[516,"show-seconds"]}],[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-number-input",{"label":[1],"value":[1538],"enabled":[4],"errorMessage":[1537,"error-message"],"precision":[2],"prettyPrecision":[2,"pretty-precision"]}],[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]}]]]], options);
 });

package/dist/cjs/loader.cjs.js

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["ez-form.cjs",[[0,"ez-form",{"dataUnit":[1040],"config":[16],"submit":[64],"cancel":[64],"validate":[64]}]]],["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-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]}]]],["ez-calendar.cjs",[[1,"ez-calendar",{"value":[1040],"floating":[516],"time":[516],"showSeconds":[516,"show-seconds"],"show":[64],"fitVertical":[64],"hide":[64]}]]],["ez-button_11.cjs",[[0,"test-du"],[2,"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]}],[2,"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-button",{"label":[513],"enabled":[516],"mode":[513],"image":[513],"size":[513]}],[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-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-collapsible-box_7.cjs",[[1,"ez-date-input",{"label":[513],"value":[1040],"enabled":[516],"errorMessage":[1537,"error-message"]}],[1,"ez-date-time-input",{"label":[513],"value":[1040],"enabled":[516],"errorMessage":[1537,"error-message"],"showSeconds":[516,"show-seconds"]}],[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-number-input",{"label":[1],"value":[1538],"enabled":[4],"errorMessage":[1537,"error-message"],"precision":[2],"prettyPrecision":[2,"pretty-precision"]}],[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]}]]]], options);
+  return index.bootstrapLazy([["ez-form.cjs",[[0,"ez-form",{"dataUnit":[1040],"config":[16],"submit":[64],"cancel":[64],"validate":[64]}]]],["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-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]}]]],["ez-calendar.cjs",[[1,"ez-calendar",{"value":[1040],"floating":[516],"time":[516],"showSeconds":[516,"show-seconds"],"show":[64],"fitVertical":[64],"hide":[64]}]]],["ez-button_11.cjs",[[0,"test-du"],[2,"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]}],[2,"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-button",{"label":[513],"enabled":[516],"mode":[513],"image":[513],"iconName":[513,"icon-name"],"size":[513]}],[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-icon",{"size":[513],"href":[513],"iconName":[513,"icon-name"]}],[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-collapsible-box_7.cjs",[[1,"ez-date-input",{"label":[513],"value":[1040],"enabled":[516],"errorMessage":[1537,"error-message"]}],[1,"ez-date-time-input",{"label":[513],"value":[1040],"enabled":[516],"errorMessage":[1537,"error-message"],"showSeconds":[516,"show-seconds"]}],[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-number-input",{"label":[1],"value":[1538],"enabled":[4],"errorMessage":[1537,"error-message"],"precision":[2],"prettyPrecision":[2,"pretty-precision"]}],[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]}]]]], options);
   });
 };
 

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

@@ -36,13 +36,13 @@ export class EzButton {
   render() {
     if (this.mode == "icon") {
       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)
+        h("ez-icon", { class: "icon", href: this.image, iconName: this.iconName, 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)
+          h("ez-icon", { class: "icon", href: this.image, iconName: this.iconName, size: "large", onClick: evt => { if (!this.enabled)
               evt.stopPropagation(); } })),
         h("label", { title: this.label }, this.label)));
     }
@@ -138,6 +138,23 @@ export class EzButton {
       "attribute": "image",
       "reflect": true
     },
+    "iconName": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Nome do icone dispon\u00EDvel no pacote de fontes [ez-icons](https://sankhyalabs-storybook.herokuapp.com/themes/default/icons/fonts/index.html)"
+      },
+      "attribute": "icon-name",
+      "reflect": true
+    },
     "size": {
       "type": "string",
       "mutable": false,

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

@@ -1,6 +1,5 @@
 import { Component, h, Host, Prop, Method, Event, State } from "@stencil/core";
 import AgGridController from "./controller/ag-grid/AgGridController";
-import { getSpritePath } from "../../utils/AssetsUtils";
 import DataUnitBridge from "./controller/DataUnitBridge";
 export class EzGrid {
   constructor() {
@@ -89,8 +88,8 @@ export class EzGrid {
       h("div", { class: "text text--primary text--medium margin-right--medium" },
         h("strong", { class: "text text--primary text--medium" }, `${this._navigationFirstRow}-${this._navigationLastRow}`),
         ` de ${this._navigationTotalRows}`),
-      h("ez-button", { size: "small", image: getSpritePath("chevron-left"), class: "button--secondary margin-right--medium", mode: "icon", enabled: this._navigationHasPrevious, onClick: () => this._gridController.previousPage(), label: "P\u00E1gina anterior" }),
-      h("ez-button", { size: "small", image: getSpritePath("chevron-right"), class: "button--secondary margin-right--medium", mode: "icon", enabled: this._navigationHasNext, onClick: () => this._gridController.nextPage(), label: "Pr\u00F3xima P\u00E1gina" })
+      h("ez-button", { size: "small", iconName: "chevron-left", class: "button--secondary margin-right--medium", mode: "icon", enabled: this._navigationHasPrevious, onClick: () => this._gridController.previousPage(), label: "P\u00E1gina anterior" }),
+      h("ez-button", { size: "small", iconName: "chevron-right", class: "button--secondary margin-right--medium", mode: "icon", enabled: this._navigationHasNext, onClick: () => this._gridController.nextPage(), label: "Pr\u00F3xima P\u00E1gina" })
     ];
   }
   applyConfig(cols) {
@@ -109,7 +108,7 @@ export class EzGrid {
     return (h(Host, null,
       h("div", { class: "box box--shadow padding--medium grid__header margin-bottom--small" },
         this.getPaginationControl(),
-        h("ez-button", { size: "small", image: getSpritePath("settings"), class: "button--secondary", mode: "icon", onClick: () => { this.openConfig(); } })),
+        h("ez-button", { size: "small", iconName: "settings", class: "button--secondary", mode: "icon", onClick: () => { this.openConfig(); } })),
       h("div", { class: "grid__container ag-sankhya-theme", ref: elem => this._container = elem }),
       h("div", { class: "grid__footer" }),
       h("ez-modal", { modalSize: "small", closeEsc: true, closeOutsideClick: true, opened: this._popUpVisible, onEzCloseModal: () => this._popUpVisible = false },

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

@@ -36,4 +36,136 @@ svg {
 .x-large {
   width: 30px;
   height: 30px;
-}
+}
+/*
+  START CSS GENERATED BY EZ-DESIGN ICONS, SEE MORE AT ez-design\scripts\fontsGenerator.js.
+  WHEN ADD NEW ICONS THIS CSS NEED TO BE UPDATED
+*/
+[class^="ez-icon-"], [class*=" ez-icon-"] {
+  font-family: 'ez-icons' !important;
+  font-size: 16px;
+  font-style:normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.ez-icon-account-outline:before { content: "\ea01"; }
+.ez-icon-account:before { content: "\ea02"; }
+.ez-icon-alert-circle-inverted:before { content: "\ea03"; }
+.ez-icon-alert-circle:before { content: "\ea04"; }
+.ez-icon-alert-mail:before { content: "\ea05"; }
+.ez-icon-alert-outline:before { content: "\ea06"; }
+.ez-icon-alert-popup:before { content: "\ea07"; }
+.ez-icon-apps:before { content: "\ea08"; }
+.ez-icon-arrow_back:before { content: "\ea09"; }
+.ez-icon-bell-inverted:before { content: "\ea0a"; }
+.ez-icon-bell:before { content: "\ea0b"; }
+.ez-icon-business-center:before { content: "\ea0c"; }
+.ez-icon-calendar-text:before { content: "\ea0d"; }
+.ez-icon-calendar:before { content: "\ea0e"; }
+.ez-icon-check-circle-inverted:before { content: "\ea0f"; }
+.ez-icon-check-circle:before { content: "\ea10"; }
+.ez-icon-check:before { content: "\ea11"; }
+.ez-icon-chevron-down:before { content: "\ea12"; }
+.ez-icon-chevron-left:before { content: "\ea13"; }
+.ez-icon-chevron-right:before { content: "\ea14"; }
+.ez-icon-chevron-up:before { content: "\ea15"; }
+.ez-icon-circle--medium:before { content: "\ea16"; }
+.ez-icon-circle:before { content: "\ea17"; }
+.ez-icon-clipboard:before { content: "\ea18"; }
+.ez-icon-close-circle-inverted:before { content: "\ea19"; }
+.ez-icon-close-circle:before { content: "\ea1a"; }
+.ez-icon-close:before { content: "\ea1b"; }
+.ez-icon-comment-inverted:before { content: "\ea1c"; }
+.ez-icon-comment:before { content: "\ea1d"; }
+.ez-icon-configuration:before { content: "\ea1e"; }
+.ez-icon-copy:before { content: "\ea1f"; }
+.ez-icon-crop:before { content: "\ea20"; }
+.ez-icon-delete:before { content: "\ea21"; }
+.ez-icon-description:before { content: "\ea22"; }
+.ez-icon-dot-notification:before { content: "\ea23"; }
+.ez-icon-dots-horizontal:before { content: "\ea24"; }
+.ez-icon-dots-vertical:before { content: "\ea25"; }
+.ez-icon-drag-indicator:before { content: "\ea26"; }
+.ez-icon-edit-file:before { content: "\ea27"; }
+.ez-icon-edit-table:before { content: "\ea28"; }
+.ez-icon-edit-time:before { content: "\ea29"; }
+.ez-icon-edit:before { content: "\ea2a"; }
+.ez-icon-email-inverted:before { content: "\ea2b"; }
+.ez-icon-email:before { content: "\ea2c"; }
+.ez-icon-error-octagon:before { content: "\ea2d"; }
+.ez-icon-expand:before { content: "\ea2e"; }
+.ez-icon-eye-off:before { content: "\ea2f"; }
+.ez-icon-eye:before { content: "\ea30"; }
+.ez-icon-favorite:before { content: "\ea31"; }
+.ez-icon-file-download:before { content: "\ea32"; }
+.ez-icon-file-upload:before { content: "\ea33"; }
+.ez-icon-filter:before { content: "\ea34"; }
+.ez-icon-find-file:before { content: "\ea35"; }
+.ez-icon-find-page:before { content: "\ea36"; }
+.ez-icon-format-color-fill:before { content: "\ea37"; }
+.ez-icon-help-circle-outline:before { content: "\ea38"; }
+.ez-icon-help-inverted:before { content: "\ea39"; }
+.ez-icon-help:before { content: "\ea3a"; }
+.ez-icon-home:before { content: "\ea3b"; }
+.ez-icon-language:before { content: "\ea3c"; }
+.ez-icon-launch:before { content: "\ea3d"; }
+.ez-icon-lightbulb:before { content: "\ea3e"; }
+.ez-icon-list:before { content: "\ea3f"; }
+.ez-icon-loading:before { content: "\ea40"; }
+.ez-icon-lock-outline:before { content: "\ea41"; }
+.ez-icon-lock:before { content: "\ea42"; }
+.ez-icon-menu:before { content: "\ea43"; }
+.ez-icon-minus-circle-inverted:before { content: "\ea44"; }
+.ez-icon-minus:before { content: "\ea45"; }
+.ez-icon-money-off:before { content: "\ea46"; }
+.ez-icon-money:before { content: "\ea47"; }
+.ez-icon-north-west:before { content: "\ea48"; }
+.ez-icon-pause:before { content: "\ea49"; }
+.ez-icon-payments:before { content: "\ea4a"; }
+.ez-icon-play:before { content: "\ea4b"; }
+.ez-icon-plus-circle-inverted:before { content: "\ea4c"; }
+.ez-icon-plus-circle:before { content: "\ea4d"; }
+.ez-icon-plus:before { content: "\ea4e"; }
+.ez-icon-power:before { content: "\ea4f"; }
+.ez-icon-push-pin:before { content: "\ea50"; }
+.ez-icon-restore:before { content: "\ea51"; }
+.ez-icon-return:before { content: "\ea52"; }
+.ez-icon-rotate:before { content: "\ea53"; }
+.ez-icon-save:before { content: "\ea54"; }
+.ez-icon-search:before { content: "\ea55"; }
+.ez-icon-settings-inverted:before { content: "\ea56"; }
+.ez-icon-settings:before { content: "\ea57"; }
+.ez-icon-share:before { content: "\ea58"; }
+.ez-icon-shield:before { content: "\ea59"; }
+.ez-icon-south-east:before { content: "\ea5a"; }
+.ez-icon-success-circle:before { content: "\ea5b"; }
+.ez-icon-sync:before { content: "\ea5c"; }
+.ez-icon-table:before { content: "\ea5d"; }
+.ez-icon-timer-outline:before { content: "\ea5e"; }
+.ez-icon-user-circle:before { content: "\ea5f"; }
+.ez-icon-warning-minus:before { content: "\ea60"; }
+.ez-icon-warning-triangle:before { content: "\ea61"; }
+/*
+  END CSS GENERATED BY EZ-DESIGN ICONS
+*/
+
+.x-small--font {
+  font-size: 12px;
+}
+
+.small--font {
+  font-size: 16px;
+}
+
+.medium--font {
+  font-size: 20px;
+}
+
+.large--font {
+  font-size: 24px;
+}
+
+.x-large--font {
+  font-size: 30px;
+}

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

@@ -1,3 +1,4 @@
+import { StringUtils } from '@sankhyalabs/core';
 import { Component, h, Host, Prop } from '@stencil/core';
 export class EzIcon {
   constructor() {
@@ -9,13 +10,23 @@ export class EzIcon {
   isSprite() {
     return this.href && this.href.indexOf('#') > -1;
   }
+  getIconClassName() {
+    return `ez-icon-${this.iconName}`;
+  }
+  getIconContent() {
+    if (this.isSprite()) {
+      return h("svg", { class: this.size, role: "img" },
+        h("use", { xlinkHref: this.href }));
+    }
+    else if (!StringUtils.isEmpty(this.iconName)) {
+      return h("span", { class: `icon-content ${this.getIconClassName()}  ${this.size}--font` });
+    }
+    else {
+      return h("img", { class: this.size, src: this.href });
+    }
+  }
   render() {
-    return (h(Host, null, this.isSprite()
-      ?
-        h("svg", { class: this.size, role: "img" },
-          h("use", { xlinkHref: this.href }))
-      :
-        h("img", { class: this.size, src: this.href })));
+    return (h(Host, null, this.getIconContent()));
   }
   static get is() { return "ez-icon"; }
   static get encapsulation() { return "shadow"; }
@@ -60,6 +71,23 @@ export class EzIcon {
       },
       "attribute": "href",
       "reflect": true
+    },
+    "iconName": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Nome do icone dispon\u00EDvel no pacote de fontes [ez-icons](https://sankhyalabs-storybook.herokuapp.com/themes/default/icons/fonts/index.html)"
+      },
+      "attribute": "icon-name",
+      "reflect": true
     }
   }; }
 }

package/dist/custom-elements/index.js

@@ -84,13 +84,13 @@ let EzButton$1 = class extends HTMLElement$1 {
   }
   render() {
     if (this.mode == "icon") {
-      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 => {
+      return (h("button", { class: "icon " + this.size, type: "button", disabled: !this.enabled }, h("ez-icon", { class: "icon", href: this.image, iconName: this.iconName, 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 => {
+      return (h("div", { class: "label-icon" }, h("button", { class: "icon", type: "button", disabled: !this.enabled }, h("ez-icon", { class: "icon", href: this.image, iconName: this.iconName, size: "large", onClick: evt => {
           if (!this.enabled)
             evt.stopPropagation();
         } })), h("label", { title: this.label }, this.label)));
@@ -119659,25 +119659,6 @@ class AgGridController {
   }
 }
 
-const getSpritePath = (sprite) => `${getContextAssetsPath("../assets/actions-sprite.svg")}#${sprite}`;
-let ctxLoaded = false;
-function getContextAssetsPath(resource) {
-  if (!ctxLoaded) {
-    const scriptElem = document.querySelector("script[data-ezui-assets-url]");
-    if (scriptElem) {
-      let assetsPath = scriptElem.dataset.ezuiAssetsUrl;
-      if (assetsPath) {
-        if (assetsPath.startsWith('/')) {
-          assetsPath = window.location.origin + assetsPath;
-        }
-        setAssetPath(assetsPath);
-      }
-    }
-    ctxLoaded = true;
-  }
-  return getAssetPath(resource);
-}
-
 class DataUnitBridge {
   constructor(gridController, dataUnit) {
     this._gridController = gridController;
@@ -119793,8 +119774,8 @@ let EzGrid$1 = class extends HTMLElement$1 {
     }
     return [
       h("div", { class: "text text--primary text--medium margin-right--medium" }, h("strong", { class: "text text--primary text--medium" }, `${this._navigationFirstRow}-${this._navigationLastRow}`), ` de ${this._navigationTotalRows}`),
-      h("ez-button", { size: "small", image: getSpritePath("chevron-left"), class: "button--secondary margin-right--medium", mode: "icon", enabled: this._navigationHasPrevious, onClick: () => this._gridController.previousPage(), label: "P\u00E1gina anterior" }),
-      h("ez-button", { size: "small", image: getSpritePath("chevron-right"), class: "button--secondary margin-right--medium", mode: "icon", enabled: this._navigationHasNext, onClick: () => this._gridController.nextPage(), label: "Pr\u00F3xima P\u00E1gina" })
+      h("ez-button", { size: "small", iconName: "chevron-left", class: "button--secondary margin-right--medium", mode: "icon", enabled: this._navigationHasPrevious, onClick: () => this._gridController.previousPage(), label: "P\u00E1gina anterior" }),
+      h("ez-button", { size: "small", iconName: "chevron-right", class: "button--secondary margin-right--medium", mode: "icon", enabled: this._navigationHasNext, onClick: () => this._gridController.nextPage(), label: "Pr\u00F3xima P\u00E1gina" })
     ];
   }
   applyConfig(cols) {
@@ -119810,13 +119791,13 @@ let EzGrid$1 = class extends HTMLElement$1 {
     this._popUpVisible = true;
   }
   render() {
-    return (h(Host, null, h("div", { class: "box box--shadow padding--medium grid__header margin-bottom--small" }, this.getPaginationControl(), h("ez-button", { size: "small", image: getSpritePath("settings"), class: "button--secondary", mode: "icon", onClick: () => { this.openConfig(); } })), h("div", { class: "grid__container ag-sankhya-theme", ref: elem => this._container = elem }), h("div", { class: "grid__footer" }), h("ez-modal", { modalSize: "small", closeEsc: true, closeOutsideClick: true, opened: this._popUpVisible, onEzCloseModal: () => this._popUpVisible = false }, h("grid-config", { ref: ref => this._gridConfig = ref, selectedTab: "Colunas", onConfigFinish: evt => this.applyConfig(evt.detail), onConfigCancel: _evt => this.closeConfig() }))));
+    return (h(Host, null, h("div", { class: "box box--shadow padding--medium grid__header margin-bottom--small" }, this.getPaginationControl(), h("ez-button", { size: "small", iconName: "settings", class: "button--secondary", mode: "icon", onClick: () => { this.openConfig(); } })), h("div", { class: "grid__container ag-sankhya-theme", ref: elem => this._container = elem }), h("div", { class: "grid__footer" }), h("ez-modal", { modalSize: "small", closeEsc: true, closeOutsideClick: true, opened: this._popUpVisible, onEzCloseModal: () => this._popUpVisible = false }, h("grid-config", { ref: ref => this._gridConfig = ref, selectedTab: "Colunas", onConfigFinish: evt => this.applyConfig(evt.detail), onConfigCancel: _evt => this.closeConfig() }))));
   }
   static get assetsDirs() { return ["../assets"]; }
   static get style() { return ezGridCss; }
 };
 
-const ezIconCss = ":host{display:flex;overflow:hidden;position:relative;--ez-icon--color:var(--icon--color, #ffffff)}svg{display:flex;justify-content:center;align-items:center;fill:var(--ez-icon--color)}.x-small{width:12px;height:12px}.small{width:16px;height:16px}.medium{width:20px;height:20px}.large{width:24px;height:24px}.x-large{width:30px;height:30px}";
+const ezIconCss = ":host{display:flex;overflow:hidden;position:relative;--ez-icon--color:var(--icon--color, #ffffff)}svg{display:flex;justify-content:center;align-items:center;fill:var(--ez-icon--color)}.x-small{width:12px;height:12px}.small{width:16px;height:16px}.medium{width:20px;height:20px}.large{width:24px;height:24px}.x-large{width:30px;height:30px}[class^=\"ez-icon-\"],[class*=\" ez-icon-\"]{font-family:'ez-icons' !important;font-size:16px;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.ez-icon-account-outline:before{content:\"\\ea01\"}.ez-icon-account:before{content:\"\\ea02\"}.ez-icon-alert-circle-inverted:before{content:\"\\ea03\"}.ez-icon-alert-circle:before{content:\"\\ea04\"}.ez-icon-alert-mail:before{content:\"\\ea05\"}.ez-icon-alert-outline:before{content:\"\\ea06\"}.ez-icon-alert-popup:before{content:\"\\ea07\"}.ez-icon-apps:before{content:\"\\ea08\"}.ez-icon-arrow_back:before{content:\"\\ea09\"}.ez-icon-bell-inverted:before{content:\"\\ea0a\"}.ez-icon-bell:before{content:\"\\ea0b\"}.ez-icon-business-center:before{content:\"\\ea0c\"}.ez-icon-calendar-text:before{content:\"\\ea0d\"}.ez-icon-calendar:before{content:\"\\ea0e\"}.ez-icon-check-circle-inverted:before{content:\"\\ea0f\"}.ez-icon-check-circle:before{content:\"\\ea10\"}.ez-icon-check:before{content:\"\\ea11\"}.ez-icon-chevron-down:before{content:\"\\ea12\"}.ez-icon-chevron-left:before{content:\"\\ea13\"}.ez-icon-chevron-right:before{content:\"\\ea14\"}.ez-icon-chevron-up:before{content:\"\\ea15\"}.ez-icon-circle--medium:before{content:\"\\ea16\"}.ez-icon-circle:before{content:\"\\ea17\"}.ez-icon-clipboard:before{content:\"\\ea18\"}.ez-icon-close-circle-inverted:before{content:\"\\ea19\"}.ez-icon-close-circle:before{content:\"\\ea1a\"}.ez-icon-close:before{content:\"\\ea1b\"}.ez-icon-comment-inverted:before{content:\"\\ea1c\"}.ez-icon-comment:before{content:\"\\ea1d\"}.ez-icon-configuration:before{content:\"\\ea1e\"}.ez-icon-copy:before{content:\"\\ea1f\"}.ez-icon-crop:before{content:\"\\ea20\"}.ez-icon-delete:before{content:\"\\ea21\"}.ez-icon-description:before{content:\"\\ea22\"}.ez-icon-dot-notification:before{content:\"\\ea23\"}.ez-icon-dots-horizontal:before{content:\"\\ea24\"}.ez-icon-dots-vertical:before{content:\"\\ea25\"}.ez-icon-drag-indicator:before{content:\"\\ea26\"}.ez-icon-edit-file:before{content:\"\\ea27\"}.ez-icon-edit-table:before{content:\"\\ea28\"}.ez-icon-edit-time:before{content:\"\\ea29\"}.ez-icon-edit:before{content:\"\\ea2a\"}.ez-icon-email-inverted:before{content:\"\\ea2b\"}.ez-icon-email:before{content:\"\\ea2c\"}.ez-icon-error-octagon:before{content:\"\\ea2d\"}.ez-icon-expand:before{content:\"\\ea2e\"}.ez-icon-eye-off:before{content:\"\\ea2f\"}.ez-icon-eye:before{content:\"\\ea30\"}.ez-icon-favorite:before{content:\"\\ea31\"}.ez-icon-file-download:before{content:\"\\ea32\"}.ez-icon-file-upload:before{content:\"\\ea33\"}.ez-icon-filter:before{content:\"\\ea34\"}.ez-icon-find-file:before{content:\"\\ea35\"}.ez-icon-find-page:before{content:\"\\ea36\"}.ez-icon-format-color-fill:before{content:\"\\ea37\"}.ez-icon-help-circle-outline:before{content:\"\\ea38\"}.ez-icon-help-inverted:before{content:\"\\ea39\"}.ez-icon-help:before{content:\"\\ea3a\"}.ez-icon-home:before{content:\"\\ea3b\"}.ez-icon-language:before{content:\"\\ea3c\"}.ez-icon-launch:before{content:\"\\ea3d\"}.ez-icon-lightbulb:before{content:\"\\ea3e\"}.ez-icon-list:before{content:\"\\ea3f\"}.ez-icon-loading:before{content:\"\\ea40\"}.ez-icon-lock-outline:before{content:\"\\ea41\"}.ez-icon-lock:before{content:\"\\ea42\"}.ez-icon-menu:before{content:\"\\ea43\"}.ez-icon-minus-circle-inverted:before{content:\"\\ea44\"}.ez-icon-minus:before{content:\"\\ea45\"}.ez-icon-money-off:before{content:\"\\ea46\"}.ez-icon-money:before{content:\"\\ea47\"}.ez-icon-north-west:before{content:\"\\ea48\"}.ez-icon-pause:before{content:\"\\ea49\"}.ez-icon-payments:before{content:\"\\ea4a\"}.ez-icon-play:before{content:\"\\ea4b\"}.ez-icon-plus-circle-inverted:before{content:\"\\ea4c\"}.ez-icon-plus-circle:before{content:\"\\ea4d\"}.ez-icon-plus:before{content:\"\\ea4e\"}.ez-icon-power:before{content:\"\\ea4f\"}.ez-icon-push-pin:before{content:\"\\ea50\"}.ez-icon-restore:before{content:\"\\ea51\"}.ez-icon-return:before{content:\"\\ea52\"}.ez-icon-rotate:before{content:\"\\ea53\"}.ez-icon-save:before{content:\"\\ea54\"}.ez-icon-search:before{content:\"\\ea55\"}.ez-icon-settings-inverted:before{content:\"\\ea56\"}.ez-icon-settings:before{content:\"\\ea57\"}.ez-icon-share:before{content:\"\\ea58\"}.ez-icon-shield:before{content:\"\\ea59\"}.ez-icon-south-east:before{content:\"\\ea5a\"}.ez-icon-success-circle:before{content:\"\\ea5b\"}.ez-icon-sync:before{content:\"\\ea5c\"}.ez-icon-table:before{content:\"\\ea5d\"}.ez-icon-timer-outline:before{content:\"\\ea5e\"}.ez-icon-user-circle:before{content:\"\\ea5f\"}.ez-icon-warning-minus:before{content:\"\\ea60\"}.ez-icon-warning-triangle:before{content:\"\\ea61\"}.x-small--font{font-size:12px}.small--font{font-size:16px}.medium--font{font-size:20px}.large--font{font-size:24px}.x-large--font{font-size:30px}";
 
 let EzIcon$1 = class extends HTMLElement$1 {
   constructor() {
@@ -119831,12 +119812,22 @@ let EzIcon$1 = class extends HTMLElement$1 {
   isSprite() {
     return this.href && this.href.indexOf('#') > -1;
   }
+  getIconClassName() {
+    return `ez-icon-${this.iconName}`;
+  }
+  getIconContent() {
+    if (this.isSprite()) {
+      return h("svg", { class: this.size, role: "img" }, h("use", { xlinkHref: this.href }));
+    }
+    else if (!StringUtils.isEmpty(this.iconName)) {
+      return h("span", { class: `icon-content ${this.getIconClassName()}  ${this.size}--font` });
+    }
+    else {
+      return h("img", { class: this.size, src: this.href });
+    }
+  }
   render() {
-    return (h(Host, null, this.isSprite()
-      ?
-        h("svg", { class: this.size, role: "img" }, h("use", { xlinkHref: this.href }))
-      :
-        h("img", { class: this.size, src: this.href })));
+    return (h(Host, null, this.getIconContent()));
   }
   static get style() { return ezIconCss; }
 };
@@ -121198,6 +121189,25 @@ let EzTextInput$1 = class extends HTMLElement$1 {
   static get style() { return ezTextInputCss; }
 };
 
+const getSpritePath = (sprite) => `${getContextAssetsPath("../assets/actions-sprite.svg")}#${sprite}`;
+let ctxLoaded = false;
+function getContextAssetsPath(resource) {
+  if (!ctxLoaded) {
+    const scriptElem = document.querySelector("script[data-ezui-assets-url]");
+    if (scriptElem) {
+      let assetsPath = scriptElem.dataset.ezuiAssetsUrl;
+      if (assetsPath) {
+        if (assetsPath.startsWith('/')) {
+          assetsPath = window.location.origin + assetsPath;
+        }
+        setAssetPath(assetsPath);
+      }
+    }
+    ctxLoaded = true;
+  }
+  return getAssetPath(resource);
+}
+
 const ezTimeInputCss = ":host{display:flex;flex-wrap:wrap;position:relative;width:100%}";
 
 let EzTimeInput$1 = class extends HTMLElement$1 {
@@ -122023,7 +122033,7 @@ let TestDu$1 = class extends HTMLElement$1 {
 
 const EzActionChip = /*@__PURE__*/proxyCustomElement(EzLabelChip$2, [1,"ez-action-chip",{"label":[513],"enabled":[516]}]);
 const EzApplication = /*@__PURE__*/proxyCustomElement(EzApplication$1, [0,"ez-application"]);
-const EzButton = /*@__PURE__*/proxyCustomElement(EzButton$1, [1,"ez-button",{"label":[513],"enabled":[516],"mode":[513],"image":[513],"size":[513]}]);
+const EzButton = /*@__PURE__*/proxyCustomElement(EzButton$1, [1,"ez-button",{"label":[513],"enabled":[516],"mode":[513],"image":[513],"iconName":[513,"icon-name"],"size":[513]}]);
 const EzCalendar = /*@__PURE__*/proxyCustomElement(EzCalendar$1, [1,"ez-calendar",{"value":[1040],"floating":[516],"time":[516],"showSeconds":[516,"show-seconds"]}]);
 const EzCheck = /*@__PURE__*/proxyCustomElement(EzCheck$1, [1,"ez-check",{"label":[513],"value":[1540],"enabled":[516],"mode":[513]}]);
 const EzCollapsibleBox = /*@__PURE__*/proxyCustomElement(EzCollapsibleBox$1, [1,"ez-collapsible-box",{"value":[1540],"label":[513],"headerSize":[513,"header-size"],"iconPlacement":[513,"icon-placement"]}]);
@@ -122033,7 +122043,7 @@ const EzDateTimeInput = /*@__PURE__*/proxyCustomElement(EzDateTimeInput$1, [1,"e
 const EzDialog = /*@__PURE__*/proxyCustomElement(EzDialog$1, [1,"ez-dialog",{"confirm":[1028],"critical":[1028],"message":[1025],"opened":[1540],"personalizedIconPath":[1025,"personalized-icon-path"],"ezTitle":[1025,"ez-title"]}]);
 const EzForm = /*@__PURE__*/proxyCustomElement(EzForm$1, [0,"ez-form",{"dataUnit":[1040],"config":[16]}]);
 const EzGrid = /*@__PURE__*/proxyCustomElement(EzGrid$1, [2,"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]}]);
-const EzIcon = /*@__PURE__*/proxyCustomElement(EzIcon$1, [1,"ez-icon",{"size":[513],"href":[513]}]);
+const EzIcon = /*@__PURE__*/proxyCustomElement(EzIcon$1, [1,"ez-icon",{"size":[513],"href":[513],"iconName":[513,"icon-name"]}]);
 const EzLabelChip = /*@__PURE__*/proxyCustomElement(EzLabelChip$1, [1,"ez-label-chip",{"label":[513],"enabled":[516],"removable":[516],"value":[1540]}]);
 const EzList = /*@__PURE__*/proxyCustomElement(EzList$1, [1,"ez-list",{"dataSource":[1040],"useGroups":[1540,"use-groups"],"ezDraggable":[1028,"ez-draggable"],"ezSelectable":[1028,"ez-selectable"],"itemSlotBuilder":[1040],"_listItems":[32],"_listGroupItems":[32]}]);
 const EzModal = /*@__PURE__*/proxyCustomElement(EzModal$1, [1,"ez-modal",{"modalSize":[1,"modal-size"],"align":[1],"opened":[1028],"closeEsc":[4,"close-esc"],"closeOutsideClick":[4,"close-outside-click"]}]);