@sankhyalabs/ezui 3.5.0 → 4.0.0

package/dist/esm/ez-actions-button.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-c27164d3.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-de655f48.js';
 import { FloatingManager, ElementIDUtils } from '@sankhyalabs/core';
 import './ApplicationUtils-79bf1d95.js';
 import { C as CSSVarsUtils } from './CSSVarsUtils-00f67f32.js';

package/dist/esm/ez-alert.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-c27164d3.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-de655f48.js';
 import { ElementIDUtils } from '@sankhyalabs/core';
 
 const ezAlertCss = ":host{--ez-alert-alert-container--padding-up-down:var(--space--small, 6px);--ez-alert-alert-container--padding-right-left:var(--space--medium, 12px);--ez-alert-alert-container--gap:var(--space--medium, 12px);--ez-alert-alert-container--border-radius:var(--border--radius-medium, 12px);--ez-alert-alert-container--font-color-warn:var(--color--alert-warning-900, #8C6B00);--ez-alert-alert-container--icon-warn:var(--color--alert-warning-900, #8C6B00);--ez-alert-alert-container--background-color-warn:var(--color--alert-warning-200, #FFF7D5);--ez-alert-alert-container--font-color-critical:var(--color--alert-error, #BD0025);--ez-alert-alert-container--icon-critical:var(--color--alert-error, #BD0025);--ez-alert-alert-container--background-color-critical:var(--color--alert-error-200, #F7E0E5);--ez-alert-alert-container--font-color-success:var(--color--alert-success, #157A00);--ez-alert-alert-container--icon-success:var(--color--alert-success, #157A00);--ez-alert-alert-container--background-color-success:var(--color--alert-success-200, #E7F6E0);font-size:var(--text--small, 12px);font-family:var(--font-pattern, \"Roboto\");width:100%;hyphens:auto;display:block}.alert-container{display:flex;align-items:center;gap:var(--ez-alert-alert-container--gap);padding:var(--ez-alert-alert-container--padding-up-down) var(--ez-alert-alert-container--padding-right-left);border-radius:var(--ez-alert-alert-container--border-radius)}.warn{background-color:var(--ez-alert-alert-container--background-color-warn);color:var(--ez-alert-alert-container--font-color-warn)}.critical{background-color:var(--ez-alert-alert-container--background-color-critical);color:var(--ez-alert-alert-container--font-color-critical)}.success{background-color:var(--ez-alert-alert-container--background-color-success);color:var(--ez-alert-alert-container--font-color-success)}ez-icon{--ez-icon--color:inherit}.alert-container__icon-warn{--ez-icon--color:var(--ez-alert-alert-container--icon-warn)}.alert-container__icon-critical{--ez-icon--color:var(--ez-alert-alert-container--icon-critical)}.alert-container__icon-success{--ez-icon--color:var(--ez-alert-alert-container--icon-success)}";

package/dist/esm/ez-application.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-c27164d3.js';
+import { r as registerInstance, c as createEvent, h } from './index-de655f48.js';
 
 const ezApplicationCss = "";
 

package/dist/esm/ez-breadcrumb.entry.js

@@ -1,5 +1,5 @@
-import { h, r as registerInstance, c as createEvent, g as getElement } from './index-c27164d3.js';
-import { ElementIDUtils, JSUtils } from '@sankhyalabs/core';
+import { h, r as registerInstance, c as createEvent, g as getElement } from './index-de655f48.js';
+import { ElementIDUtils, ObjectUtils, JSUtils } from '@sankhyalabs/core';
 
 const BreadcrumbItem = (props) => {
   const { items, selectedItem, itemsHidden, showDropdown, handleShowDropdown, collapseConfigPosition, ellipsesPositionedEnd } = props;
@@ -63,7 +63,10 @@ const EzBreadcrumb = class {
     this.showDropdown = false;
     this.collapseConfigPosition = -1;
   }
-  watchPropHandler() {
+  watchPropHandler(newValue, oldValue) {
+    if (ObjectUtils.objectToString(newValue || []) !== ObjectUtils.objectToString(oldValue || [])) {
+      this.loadItems();
+    }
     this.fillMode === "auto" && this.handleResize();
   }
   watchPropHiddenItems() {
@@ -76,7 +79,11 @@ const EzBreadcrumb = class {
     this.setEvents();
   }
   componentWillLoad() {
+    this.loadItems();
+  }
+  loadItems() {
     this.visibleItems = [...this.items];
+    this.hiddenItems = [];
     if (this.fillMode === 'regular') {
       this.configModeRegular();
     }
@@ -121,6 +128,9 @@ const EzBreadcrumb = class {
       this._renderSecond = true;
       return;
     }
+    if (this._element.parentElement == undefined) {
+      return;
+    }
     let { offsetWidth } = this._element.parentElement;
     let sumVisibleItems = 0;
     this.visibleItems.forEach(item => sumVisibleItems += item.width);

package/dist/esm/ez-button.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, g as getElement } from './index-c27164d3.js';
+import { r as registerInstance, h, g as getElement } from './index-de655f48.js';
 import { ElementIDUtils } from '@sankhyalabs/core';
 
 const ezButtonCss = ":host{--ez-button--min-width:100px;--ez-button--width:'auto';--ez-button--height:42px;--ez-button__icon--width:18px;--ez-button__inline__icon--padding:12px;--ez-button--padding-top:0px;--ez-button--padding-bottom:0px;--ez-button--padding-right:var(--space--large, 24px);--ez-button--padding-left:var(--space--large, 24px);--ez-button--color:var(--title--primary, #FFF);--ez-button--font-size:var(--text--medium, 14px);--ez-button--font-family:var(--font-pattern, Arial);--ez-button--font-weight:var(--text-weight--large);--ez-button--background-color:var(--background--medium, #c0c0c0);--ez-button--border-radius:var(--border--radius-large, 12px);--ez-button--border:none;--ez-button--justify-content:center;--ez-button--hover-color:var(--color--primary-600);--ez-button--hover--background-color:var(--background--medium, var(--ez-button--background-color));--ez-button--disabled-color:var(--text--disable);--ez-button--disabled--background-color:var(--color--disable-secondary);--ez-button--focus--border:var(--border--xlarge, 4px solid) var(--color--primary-300);--ez-button--focus--box-shadow:none;--ez-button--active-color:var(--color--primary-700);--ez-button--active--background-color:var(--background--strong);--ez-button--link-color:var(--color--primary, '#008561');--ez-button--link--hover-color:var(--color--primary-700, '#1C1D22');--ez-button--link--small--font-size:var(--text--small, 12px);--ez-button--link--medium--font-size:var(--text--medium, 14px);--ez-button--link--large--font-size:var(--text--large, 16px)}ez-icon{--ez-icon--color:inherit}button{position:relative;display:flex;align-items:center;margin:0;cursor:pointer;transition:background-color 0.2s linear;white-space:nowrap;min-width:var(--ez-button--min-width);width:var(--ez-button--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);justify-content:var(--ez-button--justify-content)}button:focus{outline:var(--ez-button--focus--border);box-shadow:var(--ez-button--focus--box-shadow)}button:hover{outline:none;background-color:var(--ez-button--hover--background-color);color:var(--ez-button--hover-color);fill:var(--ez-button--hover-color);--ez-icon--color:var(--ez-button--hover-color)}button:active{outline:none;box-shadow:none;background-color:var(--ez-button--active--background-color);color:var(--ez-button--active-color);fill:var(--ez-button--active-color);--ez-icon--color:var(--ez-button--active-color)}button:disabled{background-color:var(--ez-button--disabled--background-color);color:var(--ez-button--disabled-color);fill:var(--ez-button--disabled-color);border:none;--ez-icon--color:var(--ez-button--disabled-color);cursor:no-drop}.small{height:32px;--ez-button--font-size:var(--text--small, 12px)}.medium{height:42px}.large{height:46px}.btn-icon{padding:0px}.btn-icon--medium{width:42px;min-width:42px;height:42px}.btn-icon--small{width:32px;min-width:32px;height:32px}.btn-icon--large{width:46px;min-width:46px;height:46px}.label-icon{display:flex;flex-direction:column;align-items:center;color:var(--ez-button--color)}.label-icon:hover{color:var(--ez-button--hover-color);fill:var(--ez-button--hover-color);--ez-icon--color:var(--ez-button--hover-color)}.label-icon:active{color:var(--ez-button--active-color);fill:var(--ez-button--active-color);--ez-icon--color:var(--ez-button--active-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);user-select:none}button:disabled+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);color:var(--ez-button--disabled-color);cursor:no-drop}div.label-icon{cursor:pointer}div.label-icon,button:disabled{cursor:no-drop}a{font-family:var(--ez-button--font-family);font-weight:var(--ez-button--font-weight);color:var(--ez-button--link-color);cursor:pointer;display:flex;align-items:center;justify-content:center;}a:hover{color:var(--ez-button--link--hover-color)}a.small{font-size:var(--ez-button--link--small--font-size);line-height:var(--ez-button--link--small--font-size)}a.medium{font-size:var(--ez-button--link--medium--font-size);line-height:var(--ez-button--link--medium--font-size)}a.large{font-size:var(--ez-button--link--large--font-size);line-height:var(--ez-button--link--large--font-size)}";

package/dist/esm/ez-calendar.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, f as forceUpdate, h } from './index-c27164d3.js';
+import { r as registerInstance, c as createEvent, f as forceUpdate, h } from './index-de655f48.js';
 import { FloatingManager } from '@sankhyalabs/core';
 
 const ezCalendarCss = ":host{--ez-calendar--font-family:var(--font-pattern, Arial);--ez-calendar--color:var(--title--primary, #626e82);--ez-calendar--text-shadow:var(--text-shadow, 0 0 0 #353535, 0 0 1px transparent);--ez-calendar__body--background-color:var(--background--xlight, #FFF);--ez-calendar__time--background-color:var(--background--xlight, #FAFAFA);--ez-calendar__body--padding:var(--space--medium, 12px) var(--space--small, 6px);--ez-calendar__body--border-radius:var(--border--radius-medium, 12px);--ez-calendar__body--shadow:var(--shadow, 0px 0px 16px 0px #000);--ez-container--z-index:var(--more-visible, 2);--ez-calendar__header-line--stroke:1px;--ez-calendar__header-line--color:var(--color--strokes, #C0C0C0);--ez-calendar__nav-btn--fill:var(--text--primary, #008561);--ez-calendar__nav-btn--hover--fill:var(--color--primary, #350404);--ez-calendar__nav-btn--width:10px;--ez-calendar__nav-btn--height:16px;--ez-calendar__nav-btn--previous-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"16px\" width=\"10px\"><path d=\"M 9.7808475,13.860393 3.9204526,8.0000004 9.7808475,2.0624965 7.9301965,0.28895552 0.21915255,8.0000004 7.9301965,15.711044 Z\"/></svg>');--ez-calendar__nav-btn--next-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"16px\" width=\"10px\"><path d=\"M 0.21915251,13.860393 6.0795475,8.0000007 0.21915251,2.0624968 2.0698036,0.28895588 9.7808475,8.0000007 2.0698036,15.711044 Z\"/></svg>');--ez-calendar__cell--margin:0px 1.5px;--ez-calendar__cell--width:var(--space--large, 24px);--ez-calendar__cell--padding:1.5px 0px;--ez-calendar__cell--border-radius:var(--border--radius-small, 6px);--ez-calendar__cell--over--background-color:var(--color--primary, #E2F4EF);--ez-calendar__cell--over--color:var(--color--primary-300, #008561);--ez-calendar__cell--outset--color:var(--color--disable-primary, #E5EAF0);--ez-calendar__cell--selected--background-color:var(--color--primary, #008561);--ez-calendar__cell--selected--color:var(--color--inverted, #FFF);--ez-calendar__btn-today--color:var(--color--primary);--ez-calendar__btn-today--hover--background-color:var(--color--primary-300, #E2F4EF);--ez-calendar__btn-today--border-radius:var(--border--radius-small, 6px);position:relative;display:flex;user-select:none}.calendar__container{display:flex;z-index:var(--more-visible, 2)}.calendar{display:flex;flex-direction:column;z-index:var(--more-visible, 2);background-color:var(--ez-calendar__body--background-color);padding:var(--ez-calendar__body--padding);border-radius:var(--ez-calendar__body--border-radius);box-shadow:var(--ez-calendar__body--shadow)}.calendar__header{display:flex;justify-content:space-between;padding-bottom:var(--space--small, 6px);margin:0px var(--space--, 12px) var(--space--small, 6px) var(--space--, 12px);font-family:var(--ez-calendar--font-family);color:var(--ez-calendar--color);text-shadow:var(--ez-calendar--text-shadow);border-bottom:solid var(--ez-calendar__header-line--stroke) var(--ez-calendar__header-line--color)}.calendar__btn-next,.calendar__btn-previous{outline:none;border:none;background-color:unset;cursor:pointer;padding:0px}.calendar__btn-next::after,.calendar__btn-previous::after{content:'';display:flex;background-color:var(--ez-calendar__nav-btn--fill);width:var(--ez-calendar__nav-btn--width);height:var(--ez-calendar__nav-btn--height)}.calendar__btn-previous::after{-webkit-mask-image:var(--ez-calendar__nav-btn--previous-image);mask-image:var(--ez-calendar__nav-btn--previous-image)}.calendar__btn-next::after{-webkit-mask-image:var(--ez-calendar__nav-btn--next-image);mask-image:var(--ez-calendar__nav-btn--next-image)}.calendar__btn-next:hover::after,.calendar__btn-previous:hover::after{background-color:var(--ez-calendar__nav-btn--hover--fill)}.calendar__lbl-month{font-weight:var(--text-weight--extra-large, 700);font-size:var(--title--small, 14px);font-family:var(--ez-calendar--font-family);color:var(--ez-calendar--color);text-shadow:var(--ez-calendar--text-shadow)}.calendar__line{display:flex;padding:0px;margin:0px}.calendar__cell{display:flex;justify-content:center;align-content:center;cursor:pointer;font-size:var(--text--extra-small, 10px);font-family:var(--ez-calendar--font-family);color:var(--ez-calendar--color);text-shadow:var(--ez-calendar--text-shadow);padding:var(--ez-calendar__cell--padding);margin:var(--ez-calendar__cell--margin);min-width:var(--ez-calendar__cell--width);border-radius:var(--ez-calendar__cell--border-radius)}.calendar__cell:hover{background-color:var(--ez-calendar__cell--over--background-color);color:var(--ez-calendar__cell--over--color)}.calendar__cell--secondary{color:var(--ez-calendar__cell--outset--color)}.calendar__cell--unselectable:hover{background-color:unset;border-radius:unset;cursor:unset;color:var(--ez-calendar--color)}.calendar__cell--unselectable{font-weight:var(--text-weight--large, 600);font-family:var(--ez-calendar--font-family);color:var(--ez-calendar--color);text-shadow:var(--ez-calendar--text-shadow)}.calendar__cell--selected,.calendar__cell--selected:hover{background-color:var(--ez-calendar__cell--selected--background-color);color:var(--ez-calendar__cell--selected--color)}.calendar__footer{display:flex;flex-direction:column}.calendar__btn-today{border:none;background-color:unset;cursor:pointer;padding:0px;font-weight:var(--text-weight--large, 600);font-size:var(--title--extra-small, 12px);font-family:var(--ez-calendar--font-family);text-shadow:var(--ez-calendar--text-shadow);color:var(--ez-calendar__btn-today--color);border-radius:var(--ez-calendar__btn-today--border-radius)}.calendar__btn-today:hover{background-color:var(--ez-calendar__btn-today--hover--background-color)}section{display:flex}.calendar-time{margin-left:-10px;display:flex;flex-direction:column;padding:12px 0px 0px 10px;background-color:var(--ez-calendar__time--background-color);border-top-right-radius:var(--ez-calendar__body--border-radius);border-bottom-right-radius:var(--ez-calendar__body--border-radius);box-shadow:var(--ez-calendar__body--shadow)}.calendar__column{height:136px;padding:0px;margin:0px;overflow:auto;scrollbar-width:none}.calendar__column::-webkit-scrollbar{width:0px;max-width:0px;min-width:0px}.calendar-time__header{display:flex;justify-content:space-between;padding-left:var(--space--small, 6px);padding-right:var(--space--small, 6px);padding-bottom:var(--space--small, 6px);margin:0px var(--space--, 12px) var(--space--small, 6px) var(--space--, 12px);font-weight:var(--text-weight--extra-large, 700);font-size:var(--title--small, 14px);text-shadow:var(--ez-calendar--text-shadow);border-bottom:solid var(--ez-calendar__header-line--stroke) var(--ez-calendar__header-line--color);font-family:var(--ez-calendar--font-family);color:var(--ez-calendar--color);text-shadow:var(--ez-calendar--text-shadow)}.separatorTime{color:#A2ABB9;padding:0px 1px;line-height:16px;font-size:17px;font-weight:normal}.endHidden{-webkit-mask-image:linear-gradient(180deg, #000 calc(100% - 48px), transparent 100%)}.calendar__column .calendar__cell{margin:0px;padding:1.5px 1.5px}";

package/dist/esm/ez-card-item.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-c27164d3.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-de655f48.js';
 import { StringUtils, ElementIDUtils } from '@sankhyalabs/core';
 
 const ezCardItemCss = ":host{--ez-card-item--font-size:var(--text--medium, 14px);--ez-card-item--font-family:var(--font-pattern, Arial);--ez-card-item--font-weight:var(--text-weight--medium, 400);--ez-card-item--font-weight-large:var(--text-weight--large, 600);--ez-card-item--color:var(--title--primary, #2B3A54);--ez-card-item__key--color:var(--text--primary, #626e82);--ez-card-item__detail-label--color:var(--text--secondary, #A2ABB9);--ez-card-item__detail--padding-bottom:var(--space--extra-small, 3px);--ez-card-item__title--padding-bottom:var(--space--extra-small, 3px);--ez-card-item__highlight--color:var(--color--primary-300, #E2F4EF);width:100%;display:flex;cursor:pointer}.card-item{display:flex;flex-direction:column;width:100%;cursor:pointer;padding:12px;z-index:0;position:relative}.card-item:hover{background:#F0F3F7;border-radius:12px}.card-item__title{display:flex;align-items:center;line-height:18px;cursor:pointer;font-size:var(--ez-card-item--font-size);font-family:var(--ez-card-item--font-family);font-weight:var(--ez-card-item--font-weight-large);color:var(--ez-card-item--color);padding-bottom:var(--ez-card-item__title--padding-bottom);gap:var(--space--small, 6px)}.card-item__key{color:var(--ez-card-item__key--color)}.card-item__details{display:flex;cursor:pointer;justify-content:space-between;gap:var(--space--small, 6px)}.card-item__details-left{cursor:pointer;width:50%}.card-item__details-right{width:50%;cursor:pointer}.card-item__detail:not(:last-child){cursor:pointer;padding-bottom:var(--ez-card-item__detail--padding-bottom)}.card-item__detail-label{cursor:pointer;font-size:var(--ez-card-item--font-size);font-family:var(--ez-card-item--font-family);font-weight:var(--ez-card-item--font-weight);color:var(--ez-card-item__detail-label--color)}.card-item__detail-value{cursor:pointer;font-size:var(--ez-card-item--font-size);font-family:var(--ez-card-item--font-family);font-weight:var(--ez-card-item--font-weight);color:var(--ez-card-item--color)}.card-item__highlight{position:relative;border-radius:8px;z-index:-1;background-color:var(--ez-card-item__highlight--color);outline:2px solid var(--ez-card-item__highlight--color);box-shadow:-4px 0px 0px 0px var(--ez-card-item__highlight--color), \n               4px 0px 0px 0px var(--ez-card-item__highlight--color)}";

package/dist/esm/ez-check.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-c27164d3.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-de655f48.js';
 import { ElementIDUtils } from '@sankhyalabs/core';
 import { C as CheckMode } from './CheckMode-bdb2ec19.js';
 

package/dist/esm/ez-chip.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-c27164d3.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-de655f48.js';
 import { ElementIDUtils } from '@sankhyalabs/core';
 
 const ezChipCss = ":host{--ez-label-chip--height:30px;--ez-label-chip__label--font-size:var(--text--medium, 14px);--ez-label-chip__label--font-family:var(--font-pattern, Arial);--ez-label-chip__label--font-weight:var(--text-weight--medium, 400);--ez-label-chip__label--space--medium:var(--space--medium, 12px);--ez-label-chip__label--title--primary:var(--title--primary, #2B3A54);--ez-label-chip__label--text--primary:var(--text--primary, #626e82);--ez-label-chip__label__container--border-radius:var(--border--radius-large, 24px);--ez-label-chip__label__container--border:1px solid;--ez-label-chip__label__container--border-color-strokes:var(--color--strokes, #DCE0E8);--ez-label-chip__label__container--color-primary:var(--color--primary, #008561);--ez-label-chip__label__container-color--disable-secondary:var(--color--disable-secondary, #F2F5F8);--ez-label-chip__label__container--background-color:var(--color--primary-300);--ez-label-chip__label__container--border-color:#0085610F;--ez-label-chip__label__container--default--border-color--active:var(--color--primary, #007a5a);--ez-label-chip__label__container--default--background-color--hover:var(--color--primary-300, #f2faf8);--ez-label-chip__label__container--default--color--hover:var(--color--primary, #f2faf8);--ez-label-chip__label__container--text--disabled:var(--text--disable, #AFB6C0);--ez-label-chip__label__container--default--border-color--active:var(--color--primary)}.lbl{display:flex;white-space:nowrap;align-items:center;cursor:pointer;user-select:none;color:var(--ez-label-chip__label--title--primary);height:var(--ez-label-chip--height);font-family:var(--ez-label-chip__label--font-family);font-size:var(--ez-label-chip__label--font-size);font-weight:var(--ez-label-chip__label--font-weight)}.lbl--active{color:var(--ez-label-chip__label__container--default--color--hover)}.lbl--disabled{color:var(--ez-label-chip__label__container--text--disabled)}.label__container{cursor:pointer;width:max-content;display:flex;flex-wrap:wrap;align-items:center;background-color:#FFFFFF;color:var(--ez-label-chip__label--text--primary);fill:var(--ez-label-chip__label--text--primary);--ez-icon--color:var(--ez-label-chip__label--text--primary);border:var(--ez-label-chip__label__container--border);border-radius:var(--ez-label-chip__label__container--border-radius);border-color:var(--ez-label-chip__label__container--border-color-strokes);padding-right:var(--ez-label-chip__label--space--medium);padding-left:var(--ez-label-chip__label--space--medium);outline-color:var(--ez-label-chip__label__container--default--border-color--active)}.label__content{display:flex;align-items:center;flex-wrap:wrap;--ez-icon--color:var(--ez-label-chip__label--text--primary)}.label__container--disabled{cursor:default;border-color:var(--ez-label-chip__label__container-color--disable-secondary);background-color:var(--ez-label-chip__label__container-color--disable-secondary);fill:var(--ez-label-chip__label__container--text--disabled);color:var(--ez-label-chip__label__container--text--disabled);--ez-icon--color:var(--ez-label-chip__label__container--text--disabled)}.label__container--active{border-color:var(--ez-label-chip__label__container--default--background-color--hover);background-color:var(--ez-label-chip__label__container--default--background-color--hover);color:var(--ez-label-chip__label__container--default--color--hover);fill:var(--ez-label-chip__label__container--default--color--hover);--ez-icon--color:var(--ez-label-chip__label__container--default--color--hover)}.label__container:hover{border-color:var(--ez-label-chip__label__container--default--border-color--active)}.label__container:focus{outline:var(--border--medium) var(--ez-label-chip__label__container--default--border-color--active)}.label__container--disabled:hover{cursor:default;border:var(--ez-label-chip__label__container--border);border-color:var(--ez-label-chip__label__container-color--disable-secondary);background-color:var(--ez-label-chip__label__container-color--disable-secondary);fill:var(--ez-label-chip__label__container--text--disabled);color:var(--ez-label-chip__label__container--text--disabled);--ez-icon--color:var(--ez-label-chip__label__container--text--disabled)}.label__content__icon{display:flex;cursor:pointer;color:var(--ez-label-chip__label--text--primary);fill:var(--ez-label-chip__label--text--primary);--ez-icon--color:var(--ez-label-chip__label--text--primary)}.label__container--row-reverse{flex-direction:row-reverse}.label__container .btn-close{padding:0px 0px 0px 8px}.label__container--row-reverse .btn-close{padding:0px 8px 0px 0px}.cursor-disable{cursor:default}ez-icon{--ez-icon--color:inherit}";

package/dist/esm/ez-collapsible-box.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-c27164d3.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-de655f48.js';
 import { ElementIDUtils } from '@sankhyalabs/core';
 import { A as ApplicationUtils } from './ApplicationUtils-79bf1d95.js';
 import './DialogType-54a62731.js';

package/dist/esm/ez-combo-box.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-c27164d3.js';
-import { ObjectUtils, FloatingManager, ElementIDUtils } from '@sankhyalabs/core';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-de655f48.js';
+import { ObjectUtils, FloatingManager, StringUtils, ElementIDUtils } from '@sankhyalabs/core';
 import { A as ApplicationUtils } from './ApplicationUtils-79bf1d95.js';
 import { C as CSSVarsUtils } from './CSSVarsUtils-00f67f32.js';
 import './DialogType-54a62731.js';
@@ -49,6 +49,10 @@ const EzComboBox = class {
   }
   observeValue(newValue, oldValue) {
     if (this._textInput && newValue != oldValue) {
+      if (this.searchMode && typeof newValue === "string") {
+        this.setInputValue();
+        return;
+      }
       const newValueSelected = this.getSelectedOption(newValue);
       const oldValueSelected = this.getSelectedOption(oldValue);
       const currentValue = this.getSelectedOption(this.value);
@@ -255,7 +259,7 @@ const EzComboBox = class {
     var _a, _b;
     const currentValue = this.getSelectedOption(this.value);
     if ((((_a = currentValue === null || currentValue === void 0 ? void 0 : currentValue.value) === null || _a === void 0 ? void 0 : _a.toString()) !== ((_b = newOption === null || newOption === void 0 ? void 0 : newOption.value) === null || _b === void 0 ? void 0 : _b.toString()))
-      || (currentValue == undefined && "value" in newOption)) {
+      || (currentValue == undefined && newOption != undefined && "value" in newOption)) {
       const adjustedOpt = !(newOption === null || newOption === void 0 ? void 0 : newOption.value) ? undefined : newOption;
       this.value = adjustedOpt;
     }
@@ -323,11 +327,17 @@ const EzComboBox = class {
     }
   }
   validateDescriptionValue() {
-    if (!this.searchMode || typeof this.value !== "object") {
+    if (!this.searchMode || StringUtils.isEmpty(this.value)) {
       return;
     }
-    const { label, value } = this.value || {};
-    if (label || value == undefined) {
+    let value = this.value;
+    if (typeof value === "object") {
+      if (!StringUtils.isEmpty(value.label)) {
+        return;
+      }
+      value = value.value;
+    }
+    if (StringUtils.isEmpty(value)) {
       return;
     }
     this.loadDescriptionValue(value);
@@ -427,16 +437,12 @@ const EzComboBox = class {
     (_a = this._optionsList) === null || _a === void 0 ? void 0 : _a.querySelectorAll(".item").forEach((elem) => {
       ElementIDUtils.addIDInfoIfNotExists(elem, "itemComboBox");
     });
+    this.validateDescriptionValue();
   }
   componentDidLoad() {
     CSSVarsUtils.applyVarsTextInput(this.el, this._textInput);
     this.setInputValue(false);
   }
-  componentShouldUpdate(newValue, oldValue) {
-    if (this.isDifferentValues(newValue, oldValue)) {
-      this.validateDescriptionValue();
-    }
-  }
   //---------------------------------------------
   // Event handlers
   //---------------------------------------------

package/dist/esm/ez-date-input.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-c27164d3.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-de655f48.js';
 import { DateUtils, ElementIDUtils } from '@sankhyalabs/core';
 import { C as CSSVarsUtils } from './CSSVarsUtils-00f67f32.js';
 
@@ -111,7 +111,7 @@ const EzDateInput = class {
     }
   }
   getTextValue(d) {
-    return d ? new Intl.DateTimeFormat("pt-BR").format(d) : undefined;
+    return d ? DateUtils.formatDate(d) : undefined;
   }
   handleInput(event) {
     const strValue = this._textInput.value;

package/dist/esm/ez-date-time-input.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-c27164d3.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-de655f48.js';
 import { DateUtils, TimeFormatter, ElementIDUtils } from '@sankhyalabs/core';
 import { C as CSSVarsUtils } from './CSSVarsUtils-00f67f32.js';
 
@@ -160,18 +160,10 @@ const EzDateTimeInput = class {
     }
   }
   getTextValue(date) {
-    const options = {
-      year: 'numeric', month: 'numeric', day: 'numeric',
-      hour: 'numeric', minute: 'numeric'
-    };
-    const optionsSecond = {
-      year: 'numeric', month: 'numeric', day: 'numeric',
-      hour: 'numeric', minute: 'numeric', second: 'numeric'
-    };
-    if (!date)
+    if (!date) {
       return;
-    let formattedDate = new Intl.DateTimeFormat('pt-BR', this.showSeconds ? optionsSecond : options).format(date);
-    return formattedDate.replace(",", "");
+    }
+    return DateUtils.formatDateTime(date, this.showSeconds);
   }
   handleInput(event) {
     const newValue = this.getParsedDateTime();

package/dist/esm/ez-dialog.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, f as forceUpdate, h, g as getElement } from './index-c27164d3.js';
+import { r as registerInstance, c as createEvent, f as forceUpdate, h, g as getElement } from './index-de655f48.js';
 import { D as DialogType } from './DialogType-54a62731.js';
 import { ElementIDUtils } from '@sankhyalabs/core';
 

package/dist/esm/ez-dropdown.entry.js

@@ -1,4 +1,4 @@
-import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-c27164d3.js';
+import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-de655f48.js';
 import { ElementIDUtils, ObjectUtils } from '@sankhyalabs/core';
 
 const DropdownItem = ({ item, hasIcon, hasChildren, isLockedLevels, onSubActionClick }) => {

package/dist/esm/ez-file-item.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-c27164d3.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-de655f48.js';
 import { StringUtils, ElementIDUtils } from '@sankhyalabs/core';
 
 const ezFileItemCss = ":host{display:flex;width:100%;--ez-file-item--height:42px;--ez-file-item--padding:9px;--ez-file-item--border-radius:var(--border--radius-medium, 12px);--ez-file-item--border-color:var(--color--strokes, #DCE0E8);--ez-file-item--border-style:var(--border--small, 1px solid);--ez-file-item--font-family:var(--font-pattern, Arial);--ez-file-item--font-size:var(--text--medium, 14px);--ez-file-item--font-weight:var(--text-weight--medium, 400);--ez-file-item--color:var(--title--primary, #2B3A54);--ez-file-item__file-size--font-weight:var(--text-weight--large, 600);--ez-file-item__file-size--color:var(--color--primary, #008561);--ez-file-item__background-progress--color:var(--color--primary-300, E2F4EF);--ez-file-item--icon-color:var(--title--primary, #2B3A54)}.box{display:flex;box-sizing:border-box;position:relative;align-items:center;justify-content:space-between;width:100%;padding:var(--ez-file-item--padding);border:var(--ez-file-item--border-color) var(--ez-file-item--border-style);border-radius:var(--ez-file-item--border-radius);height:var(--ez-file-item--height)}.box::before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;clip-path:inset(2px calc(var(--ez-file-item--upload-progress, 0%) + 2px) 2px 2px round calc(var(--ez-file-item--border-radius) - 4px));background-color:var(--ez-file-item__background-progress--color)}.content{display:flex;align-items:center;z-index:0;overflow:hidden}.file-name{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-family:var(--ez-file-item--font-family);font-size:var(--ez-file-item--font-size);font-weight:var(--ez-file-item--font-weight);color:var(--ez-file-item--color)}.file-type-icon{flex-shrink:0;--ez-icon--color:var(--ez-file-item--icon-color);padding-right:var(--ez-file-item--padding)}.file-size{padding-left:2px;overflow:hidden;flex-shrink:0;white-space:nowrap;font-family:var(--ez-file-item--font-family);font-size:var(--ez-file-item--font-size);font-weight:var(--ez-file-item__file-size--font-weight);color:var(--ez-file-item__file-size--color)}.btn-remove{cursor:pointer;flex-shrink:0;--ez-icon--color:var(--ez-file-item--icon-color)}";

package/dist/esm/ez-filter-input_4.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, g as getElement, H as Host, f as forceUpdate } from './index-c27164d3.js';
+import { r as registerInstance, c as createEvent, h, g as getElement, H as Host, f as forceUpdate } from './index-de655f48.js';
 import { ElementIDUtils, JSUtils, StringUtils, ObjectUtils } from '@sankhyalabs/core';
 import { C as CSSVarsUtils } from './CSSVarsUtils-00f67f32.js';
 import { E as EzScrollDirection } from './EzScrollDirection-2df26c93.js';
@@ -305,7 +305,7 @@ class ScrollCtrl {
 }
 EzScroller.style = ezScrollerCss;
 
-const ezSidebarButtonCss = ":host{--ez-sidebar-button--width:6px;--ez-sidebar-button--hover--width:12px;--ez-sidebar-button--height:96px;--ez-sidebar-button--background-color--xlight:var(--background--xlight, #fff);--ez-sidebar-button--background-color--primary:var(--color--primary);--ez-sidebar-button--space--small:var(--space--small, 6px);--ez-sidebar-button--space--medium:var(--space--medium, 12px);--ez-sidebar-button--box-shadow:var(--shadow--small, 0px 0px 16px rgba(0, 38, 111, 0.07));--ez-sidebar-button--hover--box-shadow:var(--shadow--hard, 0px 0px 16px rgba(43, 58, 84, 0.24));--ez-sidebar-button--border--radius-small:var(--border--radius-small);--ez-sidebar-button--border--radius-medium:var(--border--radius-medium)}button{display:flex;background:var(--ez-sidebar-button--background-color--xlight);border:0;border-radius:0 var(--ez-sidebar-button--border--radius-medium) var(--ez-sidebar-button--border--radius-medium) 0;box-shadow:var(--ez-sidebar-button--box-shadow);padding:0;cursor:pointer}span{width:var(--ez-sidebar-button--width);height:var(--ez-sidebar-button--height);margin:var(--ez-sidebar-button--space--medium) var(--ez-sidebar-button--space--small) var(--ez-sidebar-button--space--medium) 0;background:var(--ez-sidebar-button--background-color--primary);border-radius:0 var(--ez-sidebar-button--border--radius-small) var(--ez-sidebar-button--border--radius-small) 0}button:hover{box-shadow:var(--ez-sidebar-button--hover--box-shadow)}button:hover span{width:var(--ez-sidebar-button--hover--width);margin:var(--ez-sidebar-button--space--medium) var(--ez-sidebar-button--space--medium) var(--ez-sidebar-button--space--medium) 0}";
+const ezSidebarButtonCss = ":host{position:relative;--ez-sidebar-button--width:6px;--ez-sidebar-button--hover--width:12px;--ez-sidebar-button--height:96px;--ez-sidebar-button--background-color--xlight:var(--background--xlight, #fff);--ez-sidebar-button--background-color--primary:var(--color--primary);--ez-sidebar-button--space--small:var(--space--small, 6px);--ez-sidebar-button--space--medium:var(--space--medium, 12px);--ez-sidebar-button--box-shadow:var(--shadow--small, 0px 0px 16px rgba(0, 38, 111, 0.07));--ez-sidebar-button--hover--box-shadow:var(--shadow--hard, 0px 0px 16px rgba(43, 58, 84, 0.24));--ez-sidebar-button--border--radius-small:var(--border--radius-small);--ez-sidebar-button--border--radius-medium:var(--border--radius-medium)}button{position:absolute;display:flex;background:var(--ez-sidebar-button--background-color--xlight);border:0;border-radius:0 var(--ez-sidebar-button--border--radius-medium) var(--ez-sidebar-button--border--radius-medium) 0;box-shadow:var(--ez-sidebar-button--box-shadow);padding:0;cursor:pointer}span{width:var(--ez-sidebar-button--width);height:var(--ez-sidebar-button--height);margin:var(--ez-sidebar-button--space--medium) var(--ez-sidebar-button--space--small) var(--ez-sidebar-button--space--medium) 0;background:var(--ez-sidebar-button--background-color--primary);border-radius:0 var(--ez-sidebar-button--border--radius-small) var(--ez-sidebar-button--border--radius-small) 0}button:hover{box-shadow:var(--ez-sidebar-button--hover--box-shadow)}button:hover span{width:var(--ez-sidebar-button--hover--width);margin:var(--ez-sidebar-button--space--medium) var(--ez-sidebar-button--space--medium) var(--ez-sidebar-button--space--medium) 0}";
 
 const EzSidebarButton = class {
   constructor(hostRef) {
@@ -451,7 +451,13 @@ class Node {
     return this._isLazyLoad && !this._childrenLoaded;
   }
   isExpandable() {
-    return this._isLazyLoad || this.children.size > 0 || Array.isArray(this.item.children);
+    if (this._isLazyLoad) {
+      return true;
+    }
+    if (this.children.size > 0) {
+      return true;
+    }
+    return false;
   }
   getChildren() {
     if (this.isPlaceHolder) {
@@ -521,6 +527,12 @@ class Tree extends Node {
       return;
     }
     Object.keys(item).forEach(attrib => node.item[attrib] = item[attrib]);
+    if (item.children == undefined) {
+      node.children.clear();
+    }
+    else if (Array.isArray(item.children)) {
+      node.updateChildren(item.children);
+    }
     this._changeCallback();
   }
   async open(path) {
@@ -671,6 +683,55 @@ const EzTree = class {
   async applyFilter(pattern) {
     this._tree.setFilterPattern(pattern);
   }
+  /**
+   * Atualiza um item
+   */
+  async updateItem(item) {
+    this._tree.updateItem(item);
+  }
+  /**
+   * Obtem um item pelo id
+   */
+  async getItem(id) {
+    return new Promise(resolve => {
+      const node = this._tree.getNode(id);
+      resolve(node === null || node === void 0 ? void 0 : node.item);
+    });
+  }
+  /**
+   * Obtem um array do caminho de itens da seleção atual.
+   * @returns Retorna um array do caminho de itens da seleção atual.
+   */
+  async getCurrentPath() {
+    var _a, _b, _c;
+    const node = (_a = this._tree) === null || _a === void 0 ? void 0 : _a.getNode(this.selectedId);
+    if (node == undefined) {
+      return;
+    }
+    const currentPath = [];
+    let parentNode;
+    let parentItem = (_b = node.parent) === null || _b === void 0 ? void 0 : _b.item;
+    currentPath.push(this.getItemPathAttrs(node.item));
+    while (parentItem != undefined) {
+      currentPath.unshift(this.getItemPathAttrs(parentItem));
+      parentNode = this._tree.getNode(parentItem.id);
+      parentItem = (_c = parentNode === null || parentNode === void 0 ? void 0 : parentNode.parent) === null || _c === void 0 ? void 0 : _c.item;
+    }
+    return currentPath;
+  }
+  /**
+   * Obtem o item pai a partir de um id
+   */
+  async getParent(id) {
+    return new Promise(resolve => {
+      var _a;
+      const node = this._tree.getNode(id);
+      if (node) {
+        resolve((_a = node.parent) === null || _a === void 0 ? void 0 : _a.item);
+      }
+      resolve(undefined);
+    });
+  }
   observeItems(newValue, oldValue) {
     if (ObjectUtils.objectToString(newValue) !== ObjectUtils.objectToString(oldValue)) {
       this._tree.load(this.items || []);
@@ -713,6 +774,9 @@ const EzTree = class {
       event.preventDefault();
     }
   }
+  getItemPathAttrs({ id, label }) {
+    return { id, label };
+  }
   openClose(item) {
     if (item == undefined) {
       return;
@@ -796,9 +860,6 @@ const EzTree = class {
     if (node) {
       this.value = node.item;
     }
-    else {
-      this.selectedId = undefined;
-    }
   }
   render() {
     ElementIDUtils.addIDInfoIfNotExists(this._element, 'ezTree');

package/dist/esm/ez-form-view.entry.js

@@ -1,20 +1,20 @@
-import { h, r as registerInstance, H as Host, g as getElement } from './index-c27164d3.js';
+import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-de655f48.js';
 import { UserInterface, ElementIDUtils } from '@sankhyalabs/core';
 import { R as REQUIRED_INFO } from './constants-ca136201.js';
 import { C as CheckMode } from './CheckMode-bdb2ec19.js';
 
 const buildSwitch = (field) => {
-  return buildField(field.name, field.label, field.readOnly, true);
+  return buildField(field.name, field.label, field.readOnly, field.contextName, true);
 };
 const buildCheckBox = (field) => {
-  return buildField(field.name, field.label, field.readOnly, false);
+  return buildField(field.name, field.label, field.readOnly, field.contextName, false);
 };
-function buildField(fieldName, fieldLabel, readOnly, switchMode = false) {
+function buildField(fieldName, fieldLabel, readOnly, contextName, switchMode) {
   return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-align--middle ez-padding-horizontal--small ez-padding-bottom--large" },
-    h("ez-check", { enabled: !readOnly, label: fieldLabel, mode: switchMode ? CheckMode.SWITCH : CheckMode.REGULAR, "data-field-name": fieldName, key: fieldName })));
+    h("ez-check", { enabled: !readOnly, label: fieldLabel, mode: switchMode ? CheckMode.SWITCH : CheckMode.REGULAR, "data-field-name": fieldName, "data-context-name": contextName, key: fieldName })));
 }
 
-const buildComboBox = ({ name, label, readOnly, required, props }) => {
+const buildComboBox = ({ name, label, readOnly, required, props, contextName }) => {
   const prop = props === null || props === void 0 ? void 0 : props.options;
   let options;
   if (typeof prop === "string") {
@@ -25,7 +25,7 @@ const buildComboBox = ({ name, label, readOnly, required, props }) => {
     options = prop;
   }
   return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
-    h("ez-combo-box", { enabled: !readOnly, suppressEmptyOption: required, label: label, "data-field-name": name, key: name, options: options })));
+    h("ez-combo-box", { enabled: !readOnly, suppressEmptyOption: required, label: label, "data-field-name": name, "data-context-name": contextName, key: name, options: options })));
 };
 
 const buildDate = ({ name, label, readOnly }) => {
@@ -36,42 +36,42 @@ const buildTime = ({ name, label, readOnly }) => {
   return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
     h("ez-time-input", { enabled: !readOnly, label: label, "data-field-name": name, key: name })));
 };
-const buildDateTime = ({ name, label, readOnly }) => {
+const buildDateTime = ({ name, label, readOnly, contextName }) => {
   return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
-    h("ez-date-time-input", { enabled: !readOnly, label: label, "data-field-name": name, key: name })));
+    h("ez-date-time-input", { enabled: !readOnly, label: label, "data-field-name": name, "data-context-name": contextName, key: name })));
 };
 
-const buildFile = ({ name, label, readOnly }) => {
+const buildFile = ({ name, label, readOnly, contextName }) => {
   return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" },
-    h("ez-upload", { enabled: !readOnly, label: label, "data-field-name": name, key: name })));
+    h("ez-upload", { enabled: !readOnly, label: label, "data-field-name": name, "data-context-name": contextName, key: name })));
 };
 
-const buildDecimal = ({ name, label, readOnly, props }) => {
+const buildDecimal = ({ name, label, readOnly, props, contextName }) => {
   const precision = Number((props === null || props === void 0 ? void 0 : props.precision) || 2);
   const prettyPrecision = Number((props === null || props === void 0 ? void 0 : props.prettyPrecision) || precision);
-  return buildNumeric(name, label, readOnly, precision, prettyPrecision);
+  return buildNumeric(name, label, readOnly, precision, prettyPrecision, contextName);
 };
-const buildInteger = ({ name, label, readOnly }) => {
-  return buildNumeric(name, label, readOnly, 0, 0);
+const buildInteger = ({ name, label, readOnly, contextName }) => {
+  return buildNumeric(name, label, readOnly, 0, 0, contextName);
 };
-function buildNumeric(fieldName, fieldLabel, readOnly, precision, prettyPrecision) {
+function buildNumeric(fieldName, fieldLabel, readOnly, precision, prettyPrecision, contextName) {
   return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
-    h("ez-number-input", { enabled: !readOnly, label: fieldLabel, precision: precision, prettyPrecision: prettyPrecision, "data-field-name": fieldName, key: fieldName })));
+    h("ez-number-input", { enabled: !readOnly, label: fieldLabel, precision: precision, prettyPrecision: prettyPrecision, "data-field-name": fieldName, "data-context-name": contextName, key: fieldName })));
 }
 
-const buildSearch = ({ name, label, readOnly, required }) => {
+const buildSearch = ({ name, label, readOnly, required, contextName }) => {
   return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
-    h("ez-search", { enabled: !readOnly, suppressEmptyOption: required, label: label, "data-field-name": name, key: name })));
+    h("ez-search", { enabled: !readOnly, suppressEmptyOption: required, label: label, "data-field-name": name, "data-context-name": contextName, key: name })));
 };
 
-const buildTextArea = ({ name, label, readOnly }) => {
+const buildTextArea = ({ name, label, readOnly, contextName }) => {
   return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small", key: name },
-    h("ez-text-area", { enabled: !readOnly, label: label, "data-field-name": name })));
+    h("ez-text-area", { enabled: !readOnly, label: label, "data-field-name": name, "data-context-name": contextName })));
 };
 
-const buildTextInput = ({ name, label, readOnly }) => {
+const buildTextInput = ({ name, label, readOnly, contextName }) => {
   return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
-    h("ez-text-input", { label: label, "data-field-name": name, key: name, enabled: !readOnly })));
+    h("ez-text-input", { label: label, "data-field-name": name, "data-context-name": contextName, key: name, enabled: !readOnly })));
 };
 
 const uiBuilders = new Map();
@@ -97,8 +97,12 @@ const ezFormViewCss = ".sc-ez-form-view-h{display:flex;flex-direction:row;flex-w
 const EzFormView = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.ezContentReady = createEvent(this, "ezContentReady", 7);
     this.fields = undefined;
   }
+  async showUp() {
+    this._element.scrollIntoView({ behavior: "smooth", block: "start" });
+  }
   groupFields(fields) {
     const result = new Map();
     fields.forEach(item => {
@@ -117,6 +121,9 @@ const EzFormView = class {
     });
     return result;
   }
+  componentDidRender() {
+    this.ezContentReady.emit(Array.from(this._element.querySelectorAll("[data-field-name]")));
+  }
   render() {
     ElementIDUtils.addIDInfoIfNotExists(this._element, 'ezFormView');
     if (this.fields == undefined) {