@sankhyalabs/ezui 7.2.0-rc.12 → 7.2.0-rc.13

package/dist/cjs/ez-search-plus.cjs.entry.js

@@ -4,11 +4,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a7b0c73d.js');
 const core = require('@sankhyalabs/core');
-const ApplicationUtils = require('./ApplicationUtils-dc653b57.js');
+const ApplicationUtils = require('./ApplicationUtils-88dfe345.js');
 const CSSVarsUtils = require('./CSSVarsUtils-f20973d1.js');
 require('./DialogType-2114c337.js');
 require('./CheckMode-ecb90b87.js');
-const index$1 = require('./index-a8537087.js');
+const index$1 = require('./index-9739c242.js');
 const types = require('./types-6a5df0c7.js');
 require('./FormLayout-fe8da83c.js');
 
@@ -67,6 +67,7 @@ const EzSearchPlus = class {
     if (newNormalizedValue === undefined) {
       this.codeValue = undefined;
       this.descriptionValue = undefined;
+      this.cleanFieldsRef();
       this.ezChange.emit(undefined);
       return;
     }
@@ -397,6 +398,14 @@ const EzSearchPlus = class {
   handleDescriptionInputFocus() {
     this.setLatestFocusedInputElement(this._textInputDescriptionValue);
   }
+  cleanFieldsRef() {
+    if (this._textInputCodeValue) {
+      this._textInputCodeValue.value = null;
+    }
+    if (this._textInputDescriptionValue) {
+      this._textInputDescriptionValue.value = null;
+    }
+  }
   getRightIconElement() {
     var _a, _b;
     if (!this.ensureClearButtonVisible && (!this.value && !((_a = this._textInputCodeValue) === null || _a === void 0 ? void 0 : _a.value) && !((_b = this._textInputDescriptionValue) === null || _b === void 0 ? void 0 : _b.value))) {

package/dist/cjs/ez-search-result-list.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a7b0c73d.js');
 const core = require('@sankhyalabs/core');
-const index$1 = require('./index-a8537087.js');
+const index$1 = require('./index-9739c242.js');
 
 const ezSearchResultListCss = ":host{--ez-search__list-title--primary:var(--title--primary, #2B3A54);--ez-search__list-text--primary:var(--text--primary, #626e82);--ez-search__list-height:calc(var(--ez-search--font-size) + var(--ez-search--space--medium) + 4px);--ez-search__list-min-width:64px;--ez-search__scrollbar--color-default:var(--scrollbar--default, #626e82);--ez-search__scrollbar--color-background:var(--scrollbar--background, #E5EAF0);--ez-search__scrollbar--color-hover:var(--scrollbar--hover, #2B3A54);--ez-search__scrollbar--color-clicked:var(--scrollbar--clicked, #a2abb9);--ez-search__scrollbar--border-radius:var(--border--radius-small, 6px);--ez-search__scrollbar--width:var(--space--small, 6px);--ez-search--border-radius-small:var(--border--radius-small, 6px);--ez-search--font-size:var(--text--medium, 14px);--ez-search--font-family:var(--font-pattern, Arial);--ez-search--font-weight--large:var(--text-weight--large, 500);--ez-search--font-weight--medium:var(--text-weight--medium, 400);--ez-search--background-medium:var(--background--medium, #f0f3f7);--ez-search--line-height:calc(var(--text--medium, 14px) + 4px)}.list-options{position:relative;z-index:var(--more-visible, 2);margin:var(--space--small) 0px;padding:0px;padding-inline-start:0px;box-sizing:border-box;width:100%;height:100%;max-height:350px;min-width:150px;display:flex;flex-direction:column;scroll-behavior:smooth;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--ez-search__scrollbar--color-clicked) var(--ez-search__scrollbar--color-background)}.list-options::-webkit-scrollbar{background-color:var(--scrollbar--background);width:var(--space--small);max-width:var(--space--small);min-width:var(--space--small);height:var(--space--small);max-height:var(--space--small);min-height:var(--space--small)}.list-options::-webkit-scrollbar-track{background-color:var(--ez-search__scrollbar--color-background);border-radius:var(--ez-search__scrollbar--border-radius)}.list-options::-webkit-scrollbar-thumb{background-color:var(--ez-search__scrollbar--color-default);border-radius:var(--ez-search__scrollbar--border-radius)}.list-options::-webkit-scrollbar-thumb:vertical:hover,.list-options::-webkit-scrollbar-thumb:horizontal:hover{background-color:var(--ez-search__scrollbar--color-hover)}.list-options::-webkit-scrollbar-thumb:vertical:active,.list-options::-webkit-scrollbar-thumb:horizontal:active{background-color:var(--ez-search__scrollbar--color-clicked)}.message{text-align:center;display:flex;justify-content:center;align-items:center;list-style-type:none;margin:var(--space--medium) 0px;min-height:var(--ez-search__list-height)}.message__no-result{color:var(--ez-search__list-title--primary);font-family:var(--ez-search--font-family);font-size:var(--ez-search--font-size)}.loading__container{display:flex;flex-direction:column;margin:var(--space--small)}.item__value,.item__label{flex-basis:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ez-search__list-title--primary);font-family:var(--ez-search--font-family);font-size:var(--ez-search--font-size);line-height:var(--ez-search--line-height)}.item__label{font-weight:var(--ez-search--font-weight--medium)}.item__label--bold{font-weight:var(--ez-search--font-weight--large)}.item__value{text-align:center;color:var(--ez-search__list-text--primary);font-weight:var(--ez-search--font-weight--large)}.item__value--hidden{visibility:hidden;position:absolute;white-space:nowrap;z-index:-1;top:0;left:0}.item__label{text-align:left}.item__list>li:hover{background-color:var(--ez-search--background-medium)}.item{display:flex;align-items:center;width:100%;box-sizing:border-box;list-style-type:none;cursor:pointer;border-radius:var(--ez-search--border-radius-small);gap:var(--space--small, 6px)}.preselected{background-color:var(--background--medium)}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@supports not (scrollbar-width: thin){.item{padding-right:8px}}";
 

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

@@ -5,10 +5,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-a7b0c73d.js');
 const CSSVarsUtils = require('./CSSVarsUtils-f20973d1.js');
 const core = require('@sankhyalabs/core');
-const ApplicationUtils = require('./ApplicationUtils-dc653b57.js');
+const ApplicationUtils = require('./ApplicationUtils-88dfe345.js');
 require('./DialogType-2114c337.js');
 require('./CheckMode-ecb90b87.js');
-const index$1 = require('./index-a8537087.js');
+const index$1 = require('./index-9739c242.js');
 const types = require('./types-6a5df0c7.js');
 require('./FormLayout-fe8da83c.js');
 const searchFormatters = require('./searchFormatters-b7e1ed1e.js');

package/dist/cjs/ez-sidebar-navigator.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-a7b0c73d.js');
 const core = require('@sankhyalabs/core');
 const EzScrollDirection = require('./EzScrollDirection-b2c99895.js');
-const index$1 = require('./index-a8537087.js');
+const index$1 = require('./index-9739c242.js');
 
 var ModeMenuEnum;
 (function (ModeMenuEnum) {

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a7b0c73d.js');
-const index$1 = require('./index-a8537087.js');
+const index$1 = require('./index-9739c242.js');
 require('@sankhyalabs/core');
 
 const ALLOWED_ANIMATIONS = ['progress', 'pulse', 'false'];

package/dist/cjs/ez-sortable-list.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index$1 = require('./index-a7b0c73d.js');
 const core = require('@sankhyalabs/core');
-const index$2 = require('./index-a8537087.js');
+const index$2 = require('./index-9739c242.js');
 
 /**!
  * Sortable 1.15.7

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a7b0c73d.js');
 const core = require('@sankhyalabs/core');
-const index$1 = require('./index-a8537087.js');
+const index$1 = require('./index-9739c242.js');
 
 const ezSpinnerCss = ":host{--ez-spinner--color:var(--color--ocean-green-600, #008561);--ez-spinner--size-default:24px;--ez-spinner--size-medium:32px;--ez-spinner--size-large:42px;--ez-spinner--animation-duration:1.4s;display:inline-flex;align-items:center;justify-content:center}.spinner__container{display:inline-flex;align-items:center;justify-content:center}.spinner__svg{color:var(--ez-spinner--color);width:var(--ez-spinner--size-default);height:var(--ez-spinner--size-default)}.spinner__container[data-size=\"medium\"] .spinner__svg{width:var(--ez-spinner--size-medium);height:var(--ez-spinner--size-medium)}.spinner__container[data-size=\"large\"] .spinner__svg{width:var(--ez-spinner--size-large);height:var(--ez-spinner--size-large)}.spinner__path{animation:spinner-dash var(--ez-spinner--animation-duration) ease-in-out infinite,\n    spinner-rotate var(--ez-spinner--animation-duration) linear infinite;transform-origin:center;will-change:stroke-dasharray, stroke-dashoffset}@keyframes spinner-rotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes spinner-dash{0%{stroke-dasharray:1, 63;stroke-dashoffset:0}50%{stroke-dasharray:32, 63;stroke-dashoffset:-16}100%{stroke-dasharray:1, 63;stroke-dashoffset:-63}}";
 

package/dist/cjs/ez-split-button.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a7b0c73d.js');
 const core = require('@sankhyalabs/core');
-const index$1 = require('./index-a8537087.js');
+const index$1 = require('./index-9739c242.js');
 
 const ezSplitButtonCss = ":host{--ez-split-button--min-width:var(--space--40, 40px);--ez-split-button--width:auto;--ez-split-button--height:var(--space--32, 32px);--ez-split-button__medium-icon--width:var(--space--40, 40px);--ez-split-button__large-icon--width:var(--space--44, 44px);--ez-split-button__label--padding-top:var(--space--0, 0px);--ez-split-button__label--padding-bottom:var(--space--0, 0px);--ez-split-button__right-button--padding-left:var(--space--8, 8px);--ez-split-button__right-button--padding-right:var(--space--12, 12px);--ez-split-button--color:var(--color--ocean-green-600, #008561);--ez-split-button__left-icon--color:var(--color--ocean-green-600, #008561);--ez-split-button__right-icon--color:var(--color--ocean-green-600, #008561);--ez-split-button--background-color:var(--color--gray-70, #FFFFFF);--ez-split-button--border:1px solid var(--color--gray-90, #EAEAEA);--ez-split-button--font-size:var(--font-size--default, 14px);--ez-split-button--line-height:var(--line-height--28, 28px);--ez-split-button--font-family:var(--font-pattern, Arial);--ez-split-button--font-weight:var(--font-weight--medium, 500);--ez-split-button--border-radius:var(--border--radius-24, 24px);--ez-split-button--hover-color:var(--color--primary-600, #007a5a);--ez-split-button--hover--background-color:var(--color--gray-80, #F9F9F9);--ez-split-button--disabled-color:var(--color--gray-400, #77777A);--ez-split-button--disabled--background-color:var(--color--gray-80, #F9F9F9);--ez-split-button--focus--border:var(--border--medium, 2px) var(--color--primary-300);--ez-split-button--focus--box-shadow:none;display:flex;width:fit-content}:host(.ez-split-button--primary){--ez-split-button--color:var(--color--gray-70);--ez-split-button--background-color:var(--color--ocean-green-500);--ez-split-button--font-weight:var(--font-weight--regular);--ez-split-button--border:none;--ez-split-button__left-icon--color:var(--color--gray-70);--ez-split-button__right-icon--color:var(--color--gray-70);--ez-split-button--hover-color:var(--color--gray-70);--ez-split-button--hover--background-color:var(--color--ocean-green-700);--ez-split-button--hover--border:none;--ez-split-button--left-icon--hover-color:var(--color--gray-70);--ez-split-button--right-icon--hover-color:var(--color--gray-70);--ez-split-button--disabled-color:var(--color--gray-70);--ez-split-button--disabled--background-color:var(--color--gray-400);--ez-split-button--disabled--border:none;--ez-split-button--disabled-icon-color:var(--color--gray-200);--ez-split-button__left-icon--disabled-color:var(--color--gray-200);--ez-split-button__right-icon--disabled-color:var(--color--gray-200)}:host(.ez-split-button--secondary){--ez-split-button--color:var(--color--ocean-green-600);--ez-split-button--background-color:var(--color--gray-70);--ez-split-button--border:1px solid var(--color--gray-90);--ez-split-button--left-icon--color:var(--color--ocean-green-600);--ez-split-button--right-icon--color:var(--color--ocean-green-600);--ez-split-button--hover-color:var(--color--ocean-green-600);--ez-split-button--hover--background-color:var(--color--gray-80);--ez-split-button--hover--border:1px solid var(--color--gray-90);--ez-split-button--left-icon--hover-color:var(--color--ocean-green-600);--ez-split-button--right-icon--hover-color:var(--color--ocean-green-600);--ez-split-button--disabled-color:var(--color--gray-400);--ez-split-button--disabled--background-color:var(--color--gray-80);--ez-split-button--disabled--border:1px solid var(--color--gray-200);--ez-split-button--disabled-icon-color:var(--color--gray-400);--ez-split-button__left-icon--disabled-color:var(--color--gray-300);--ez-split-button__right-icon--disabled-color:var(--color--gray-300)}:host(.ez-split-button--tertiary){--ez-split-button--color:var(--color--ocean-green-600);--ez-split-button--background-color:transparent;--ez-split-button--font-weight:var(--font-weight--regular);--ez-split-button--border:none;--ez-split-button--left-icon--color:var(--color--ocean-green-600);--ez-split-button--right-icon--color:var(--color--ocean-green-600);--ez-split-button--hover-color:var(--color--ocean-green-800);--ez-split-button--hover--background-color:transparent;--ez-split-button--hover--border:none;--ez-split-button--left-icon--hover-color:var(--color--ocean-green-800);--ez-split-button--right-icon--hover-color:var(--color--ocean-green-800);--ez-split-button--disabled-color:var(--color--gray-400);--ez-split-button--disabled--background-color:transparent;--ez-split-button--disabled--border:transparent;--ez-split-button--disabled-icon-color:var(--color--gray-200);--ez-split-button__left-icon--disabled-color:var(--color--gray-200);--ez-split-button__right-icon--disabled-color:var(--color--gray-200)}.ez-split-button.large{--ez-split-button--height:var(--space--42, 42px)}.ez-split-button.medium{--ez-split-button--height:var(--space--32, 32px)}.ez-split-button.small{--ez-split-button--height:var(--space--32, 32px);--ez-split-button--font-size:var(--text--small, 12px)}ez-icon{--ez-icon--color:inherit}button{position:relative;display:flex;align-items:center;margin:0;cursor:pointer;transition:background-color 0.2s linear, transform 0.15s ease;white-space:nowrap;overflow:hidden;transform:scale(1);min-width:var(--ez-split-button--min-width);width:var(--ez-split-button--width);height:var(--ez-split-button--height);font-family:var(--ez-split-button--font-family);font-size:var(--ez-split-button--font-size);font-weight:var(--ez-split-button--font-weight);padding:var(--ez-split-button__label--padding-top) 0 var(--ez-split-button__label--padding-bottom) 0;border-top-left-radius:var(--ez-split-button--border-radius);border-bottom-left-radius:var(--ez-split-button--border-radius);background-color:var(--ez-split-button--background-color);color:var(--ez-split-button--color);fill:var(--ez-split-button--color);border:none}label{cursor:pointer;line-height:var(--ez-split-button--line-height)}.ez-split-button__left-button{border:var(--ez-split-button--border);border-right:none;outline:none;gap:var(--space--8, 8px);padding-left:var(--space--12, 12px);padding-right:var(--space--8, 8px)}.ez-split-button__right-button{border:var(--ez-split-button--border);border-left:none;outline:none}.ez-split-button__left-button.force-focus-visible,.ez-split-button__left-button:focus-visible{box-shadow:-1px 1px 0px 1px var(--color--gray-70), \n    -1px -1px 0px 1px var(--color--gray-70), \n    -2px -2px 0px 2px var(--color--ocean-green-200), \n    -2px 2px 0px 2px var(--color--ocean-green-200), \n    0px -2px 0px 2px var(--color--ocean-green-200), \n    0px 2px 0px 2px var(--color--ocean-green-200)}.ez-split-button__right-button.force-focus-visible,.ez-split-button__right-button:focus-visible{box-shadow:1px 1px 0px 1px var(--color--gray-70), \n    1px -1px 0px 1px var(--color--gray-70), \n    2px -2px 0px 2px var(--color--ocean-green-200), \n    2px 2px 0px 2px var(--color--ocean-green-200), \n    0px -2px 0px 2px var(--color--ocean-green-200), \n    0px 2px 0px 2px var(--color--ocean-green-200)}.ez-split-button__left-button[aria-disabled].force-focus-visible,.ez-split-button__left-button[aria-disabled]:focus-visible{box-shadow:-1px 1px 0px 1px var(--color--gray-70), \n    -1px -1px 0px 1px var(--color--gray-70), \n    -2px -2px 0px 2px var(--color--petroleum-100), \n    -2px 2px 0px 2px var(--color--petroleum-100), \n    0px -2px 0px 2px var(--color--petroleum-100), \n    0px 2px 0px 2px var(--color--petroleum-100)}.ez-split-button__right-button[aria-disabled].force-focus-visible,.ez-split-button__right-button[aria-disabled]:focus-visible{box-shadow:1px 1px 0px 1px var(--color--gray-70), \n    1px -1px 0px 1px var(--color--gray-70), \n    2px -2px 0px 2px var(--color--petroleum-100), \n    2px 2px 0px 2px var(--color--petroleum-100), \n    0px -2px 0px 2px var(--color--petroleum-100), \n    0px 2px 0px 2px var(--color--petroleum-100)}.ez-split-button__left-button:hover,.ez-split-button__right-button:hover{outline:none;background-color:var(--ez-split-button--hover--background-color);color:var(--ez-split-button--hover-color);fill:var(--ez-split-button--hover-color);--ez-icon--color:var(--ez-split-button--hover-color)}.ez-split-button__left-button:disabled,.ez-split-button__left-button[aria-disabled],.ez-split-button__left-button:disabled label,.ez-split-button__left-button[aria-disabled] label,.ez-split-button__right-button:disabled,.ez-split-button__right-button[aria-disabled]{background-color:var(--ez-split-button--disabled--background-color);color:var(--ez-split-button--disabled-color);fill:var(--ez-split-button--disabled-color);border:none;--ez-icon--color:var(--ez-split-button__left-icon--disabled-color);cursor:not-allowed}.ez-split-button__left-button:disabled,.ez-split-button__left-button[aria-disabled]{--ez-icon--color:var(--ez-split-button__left-icon--disabled-color);border:var(--ez-split-button--disabled-border);border-right:none}.ez-split-button__right-button:disabled,.ez-split-button__right-button[aria-disabled]{--ez-icon--color:var(--ez-split-button__right-icon--disabled-color);border:var(--ez-split-button--disabled-border);border-left:none}.ez-split-button__right-button{border-top-right-radius:var(--ez-split-button--border-radius);border-bottom-right-radius:var(--ez-split-button--border-radius);border-top-left-radius:0;border-bottom-left-radius:0;border-right:var(--ez-split-button--border)}.ez-split-button__divider{width:1px;box-sizing:border-box;position:relative;background-color:var(--ez-split-button--background-color);height:var(--ez-split-button--height);border-top:var(--ez-split-button--border);border-bottom:var(--ez-split-button--border)}.ez-split-button__divider[aria-disabled],.ez-split-button__divider.disabled{cursor:not-allowed;background-color:var(--ez-split-button--disabled--background-color);border-top:var(--ez-split-button--disabled--border);border-bottom:var(--ez-split-button--disabled--border)}.ez-split-button__divider:before{content:\"\";position:absolute;left:0;border-left:1px solid rgba(0, 0, 0, 10%);border-radius:2px;height:75%;top:10%;bottom:10%}.btn-icon--medium{min-width:--ez-split-button__medium-icon--width}.btn-icon--large{min-width:--ez-split-button__large-icon--width}.ez-split-button__right-button-container{position:absolute;left:0;padding-left:var(--ez-split-button__right-button--padding-left);padding-right:var(--ez-split-button__right-button--padding-right)}.ez-split-button{display:flex;flex-direction:row;align-items:center;color:var(--ez-split-button--color)}.dropdown{display:flex}.dropdown-content{display:block;position:absolute;background-color:#f1f1f1;min-width:160px;z-index:var(--elevation--8);border-radius:var(--ez-split-button--border-radius)}.dropdown-content>ez-dropdown{position:relative}.ripple{position:absolute;width:20px;height:20px;border-radius:50%;background:rgba(255, 255, 255, 0.3);pointer-events:none;transform:scale(0);animation:ripple-animation 0.6s linear;z-index:0}@keyframes ripple-animation{to{transform:scale(4);opacity:0}}:host .ripple,:host(.ez-split-button--secondary) .ripple{background:rgba(0, 133, 97, 0.2)}:host(.ez-split-button--primary) .ripple{background:rgba(255, 255, 255, 0.3)}:host(.ez-split-button--tertiary) .ripple{background:rgba(0, 133, 97, 0.15)}.ez-split-button__left-button.pressed,.ez-split-button__right-button.pressed{transform:scale(0.98)}.ez-split-button__left-button>*:not(.ripple),.ez-split-button__right-button>*:not(.ripple){position:relative;z-index:1}.ez-split-button__left-button:disabled .ripple,.ez-split-button__left-button[aria-disabled] .ripple,.ez-split-button__right-button:disabled .ripple,.ez-split-button__right-button[aria-disabled] .ripple{display:none}.ez-split-button__left-button:disabled,.ez-split-button__left-button[aria-disabled],.ez-split-button__right-button:disabled,.ez-split-button__right-button[aria-disabled]{transform:scale(1) !important}";
 

package/dist/cjs/ez-split-item.cjs.entry.js

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a7b0c73d.js');
-require('./ApplicationUtils-dc653b57.js');
+require('./ApplicationUtils-88dfe345.js');
 const CSSVarsUtils = require('./CSSVarsUtils-f20973d1.js');
 require('./DialogType-2114c337.js');
 require('./CheckMode-ecb90b87.js');
 require('@sankhyalabs/core');
-const index$1 = require('./index-a8537087.js');
+const index$1 = require('./index-9739c242.js');
 require('./types-6a5df0c7.js');
 require('./FormLayout-fe8da83c.js');
 

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

@@ -5,15 +5,23 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-a7b0c73d.js');
 const core = require('@sankhyalabs/core');
 
-const ezTabselectorCss = "@keyframes activate{0%{clip-path:inset(calc(100% - 3px) 50% 0px 50%)}100%{clip-path:inset(calc(100% - 3px) 0px 0px 0px)}}:host{display:flex;position:relative;width:100%;overflow:hidden;--tabselector--backward-icon: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>');--tabselector--forward-icon: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>')}.scroll{display:flex;width:100%;scroll-behavior:smooth;overflow-x:auto;scrollbar-width:none}.scroll.startHidden{-webkit-mask-image:linear-gradient(90deg, transparent 20px, #000 48px)}.scroll.middle{-webkit-mask-image:linear-gradient(90deg, transparent 20px, #000 48px, #000 calc(100% - 48px), transparent calc(100% - 20px))}.scroll.endHidden{-webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 48px), transparent calc(100% - 20px))}.tab{display:flex;border:none;background-color:unset;min-width:100px;max-width:260px;cursor:pointer;padding:6px 12px;align-items:center;justify-content:center;color:var(--text--primary, #626e82);font-family:var(--font-pattern, \"Roboto\");font-size:var(--title--small, 14px);flex-shrink:0;margin-bottom:var(--space--extra-small, 3px)}.tab:focus,.forward-button,.backward-button{outline:none}.is-active{position:relative;color:var(--color--primary, #008561)}.is-active ez-icon{--ez-icon--color:var(--color--primary, #008561)}.is-active::after{content:\"\";position:absolute;width:100%;height:100%;background-color:var(--color--primary, #008561);clip-path:inset(calc(100% - 3px) 0px 0px 0px);animation:activate 0.25s ease-in-out}.is-focused{border:1px dashed var(--color--primary, #000000c5)}.tab-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-shadow:var(--text-shadow)}.forward-button,.backward-button{position:absolute;z-index:1;display:flex;box-sizing:border-box;padding:0px;top:0px;right:0px;width:16px;height:100%;border:none;background-color:unset;cursor:pointer;justify-content:center;align-items:center}.backward-button{left:0px}.forward-button::after,.backward-button::after{content:'';display:flex;background-color:var(--text--primary, #008561);width:10px;height:16px}.forward-button::after{-webkit-mask-image:var(--tabselector--forward-icon);mask-image:var(--tabselector--forward-icon)}.backward-button::after{-webkit-mask-image:var(--tabselector--backward-icon);mask-image:var(--tabselector--backward-icon)}.forward-button:hover::after,.backward-button:hover::after{background-color:var(--color--primary, #4e4e4e)}.hidden{display:none}.scroll::-webkit-scrollbar{display:none}.left-icon{padding-right:var(--space--small)}.right-icon{padding-left:var(--space--small)}";
+const ezTabselectorCss = "@keyframes activate{0%{clip-path:inset(calc(100% - 3px) 50% 0px 50%)}100%{clip-path:inset(calc(100% - 3px) 0px 0px 0px)}}:host{display:flex;position:relative;width:100%;overflow:hidden;--tabselector--backward-icon: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>');--tabselector--forward-icon: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>')}.scroll{display:flex;width:100%;scroll-behavior:smooth;overflow-x:auto;scrollbar-width:none}.scroll.startHidden{-webkit-mask-image:linear-gradient(90deg, transparent 20px, #000 48px)}.scroll.middle{-webkit-mask-image:linear-gradient(90deg, transparent 20px, #000 48px, #000 calc(100% - 48px), transparent calc(100% - 20px))}.scroll.endHidden{-webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 48px), transparent calc(100% - 20px))}.tab{display:flex;border:none;background-color:unset;min-width:100px;max-width:260px;cursor:pointer;padding:6px 12px;align-items:center;justify-content:center;color:var(--text--primary, #626e82);font-family:var(--font-pattern, \"Roboto\");font-size:var(--title--small, 14px);flex-shrink:0;margin-bottom:var(--space--extra-small, 3px)}.tab:focus,.forward-button,.backward-button{outline:none}.is-active{position:relative;color:var(--color--primary, #008561)}.is-active ez-icon{--ez-icon--color:var(--color--primary, #008561)}.is-active::after{content:\"\";position:absolute;width:100%;height:100%;background-color:var(--color--primary, #008561);clip-path:inset(calc(100% - 3px) 0px 0px 0px);animation:activate 0.25s ease-in-out}.is-focused{border:1px dashed var(--color--primary, #000000c5)}.is-disabled,.tab:disabled{cursor:not-allowed;opacity:0.5;color:var(--text--disabled, #a0a7b4);pointer-events:none}.is-disabled ez-icon{--ez-icon--color:var(--text--disabled, #a0a7b4)}.is-reorderable:not(.is-disabled){cursor:grab}.is-reorderable:not(.is-disabled):active{cursor:grabbing}.is-dragging{opacity:0.4}.is-drag-over{box-shadow:inset 2px 0 0 0 var(--color--primary, #008561)}.tab-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-shadow:var(--text-shadow)}.forward-button,.backward-button{position:absolute;z-index:1;display:flex;box-sizing:border-box;padding:0px;top:-2px;right:0px;width:16px;height:100%;border:none;background-color:unset;cursor:pointer;justify-content:center;align-items:center}.backward-button{left:0px}.forward-button::after,.backward-button::after{content:'';display:flex;background-color:var(--text--primary, #008561);width:10px;height:16px}.forward-button::after{-webkit-mask-image:var(--tabselector--forward-icon);mask-image:var(--tabselector--forward-icon)}.backward-button::after{-webkit-mask-image:var(--tabselector--backward-icon);mask-image:var(--tabselector--backward-icon)}.forward-button:hover::after,.backward-button:hover::after{background-color:var(--color--primary, #4e4e4e)}.hidden{display:none}.scroll::-webkit-scrollbar{display:none}.left-icon{padding-right:var(--space--small)}.right-icon{padding-left:var(--space--small)}";
 
 const EzTabselector = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.ezChange = index.createEvent(this, "ezChange", 7);
+    this.ezReorder = index.createEvent(this, "ezReorder", 7);
     this.setFocusedParam = (ev) => {
       if (ev.key === "Enter") {
+        if (!this._processedTabs || this._focusedIndex === undefined) {
+          return;
+        }
         const selectedTab = this._processedTabs[this._focusedIndex];
+        if (selectedTab.disabled) {
+          ev.preventDefault();
+          return;
+        }
         this.handleTabClick(selectedTab);
         ev.preventDefault();
         this.setFocusedTab(selectedTab.index);
@@ -29,32 +37,19 @@ const EzTabselector = class {
         else {
           return;
         }
+        const step = operator ? 1 : -1;
+        const baseIndex = this._focusedIndex !== undefined ? this._focusedIndex : this.selectedIndex;
+        this._focusedIndex = this.findNextEnabledIndex(baseIndex, step);
         if (this._focusedIndex === undefined) {
-          if (operator === false) {
-            this._focusedIndex = this.selectedIndex !== undefined ? this.selectedIndex - 1 : undefined;
-          }
-          else {
-            this._focusedIndex = this.selectedIndex !== undefined ? this.selectedIndex + 1 : undefined;
-          }
-        }
-        else {
-          if (operator === false) {
-            this._focusedIndex = this._focusedIndex - 1;
-          }
-          else {
-            this._focusedIndex = this._focusedIndex + 1;
-          }
-        }
-        if (this._focusedIndex < 0) {
-          this._focusedIndex = 0;
-        }
-        else if (this._focusedIndex > this._processedTabs.length - 1) {
-          this._focusedIndex = this._processedTabs.length - 1;
+          return;
         }
         this.setFocusedBtn(true, this._focusedIndex);
         this.setFocusedTab(this._focusedIndex);
       }
       else if (ev.key === "Tab" || ev.key === "Escape") {
+        if (!this._processedTabs || this.selectedIndex === undefined) {
+          return;
+        }
         const currentTab = this._processedTabs[this.selectedIndex];
         this._focusedIndex = undefined;
         this.handleTabClick(currentTab);
@@ -62,10 +57,12 @@ const EzTabselector = class {
         this.setFocusedTab(this.selectedIndex);
       }
     };
+    this._dragOverIndex = undefined;
     this._processedTabs = undefined;
     this.selectedIndex = undefined;
     this.selectedTab = undefined;
     this.tabs = undefined;
+    this.reorderable = false;
   }
   observeTabs(newValue, oldValue) {
     if (newValue && typeof newValue !== "string") {
@@ -76,23 +73,72 @@ const EzTabselector = class {
       this.processesTabs();
     }
   }
+  observeSelectedIndex(newValue, oldValue) {
+    if (newValue !== oldValue && newValue !== undefined) {
+      this.scrollActiveTabIntoView(newValue);
+    }
+  }
+  observeSelectedTab(newValue, oldValue) {
+    if (newValue !== oldValue && newValue !== undefined && this._processedTabs) {
+      const idx = this._processedTabs.findIndex(t => t.tabKey === newValue);
+      if (idx >= 0) {
+        this.scrollActiveTabIntoView(idx);
+      }
+    }
+  }
   async goToTab(tabIndex, silent = false) {
-    const tab = this._processedTabs.find(tab => tab.index === tabIndex);
-    this.handleTabClick(tab, !silent);
+    var _a;
+    const tab = (_a = this._processedTabs) === null || _a === void 0 ? void 0 : _a.find(tab => tab.index === tabIndex);
+    if (tab) {
+      this.handleTabClick(tab, !silent);
+    }
   }
   handleTabClick(tab, emitChange = true) {
+    var _a;
+    if (tab.disabled) {
+      return;
+    }
     this.selectedIndex = tab.index;
     this._focusedIndex = undefined;
     this.selectedTab = tab.tabKey;
     if (emitChange) {
-      this.ezChange.emit(tab);
+      (_a = this.ezChange) === null || _a === void 0 ? void 0 : _a.emit(tab);
     }
     this.setFocusedBtn(false, tab.index);
+    this.scrollActiveTabIntoView(tab.index);
   }
-  componentWillLoad() {
-    this.processesTabs();
+  scrollActiveTabIntoView(index) {
+    if (index === undefined) {
+      return;
+    }
+    requestAnimationFrame(() => {
+      const container = this._scrollContainer;
+      if (!container) {
+        return;
+      }
+      const tabEl = container.querySelector(`#tab${index}`);
+      if (!tabEl) {
+        return;
+      }
+      const containerRect = container.getBoundingClientRect();
+      const tabRect = tabEl.getBoundingClientRect();
+      const buttonOffset = 48;
+      const visibleLeft = containerRect.left + (this._startHidden ? buttonOffset : 0);
+      const visibleRight = containerRect.right - (this._endHidden ? buttonOffset : 0);
+      let delta = 0;
+      if (tabRect.left < visibleLeft) {
+        delta = tabRect.left - visibleLeft;
+      }
+      else if (tabRect.right > visibleRight) {
+        delta = tabRect.right - visibleRight;
+      }
+      if (delta !== 0) {
+        container.scrollBy({ left: delta, behavior: "smooth" });
+      }
+    });
   }
   processesTabs() {
+    var _a;
     if (this.tabs) {
       if (Array.isArray(this.tabs)) {
         this._processedTabs = [...this.tabs];
@@ -100,39 +146,30 @@ const EzTabselector = class {
       else {
         this._processedTabs = [];
         this.tabs.split(",").forEach((label) => {
+          var _a;
           label = label.trim();
-          this._processedTabs.push({ label, tabKey: label, index: this._processedTabs.length });
+          (_a = this._processedTabs) === null || _a === void 0 ? void 0 : _a.push({ label, tabKey: label, index: this._processedTabs.length });
           this.buildElementIdTab(this._processedTabs);
         });
       }
     }
-    this._hostElem.querySelectorAll("ez-tab").forEach((elem) => {
-      const tabKey = elem.getAttribute("tabKey");
-      const label = elem.getAttribute("label");
-      const leftIcon = elem.getAttribute("leftIcon");
-      const rightIcon = elem.getAttribute("rightIcon");
-      const tab = { label, tabKey, leftIcon, rightIcon, index: this._processedTabs.length };
+    (_a = this._hostElem) === null || _a === void 0 ? void 0 : _a.querySelectorAll("ez-tab").forEach((elem) => {
+      var _a, _b, _c, _d, _e, _f, _g, _h;
+      const tabKey = (_a = elem.getAttribute("tabKey")) !== null && _a !== void 0 ? _a : 'tab';
+      const label = (_b = elem.getAttribute("label")) !== null && _b !== void 0 ? _b : 'tab';
+      const leftIcon = (_c = elem.getAttribute("leftIcon")) !== null && _c !== void 0 ? _c : undefined;
+      const rightIcon = (_d = elem.getAttribute("rightIcon")) !== null && _d !== void 0 ? _d : undefined;
+      const disabled = elem.hasAttribute("disabled");
+      const tab = { label, tabKey, leftIcon, rightIcon, disabled, index: (_f = (_e = this._processedTabs) === null || _e === void 0 ? void 0 : _e.length) !== null && _f !== void 0 ? _f : 0 };
       const content = elem.firstChild;
       if (content) {
         content.setAttribute("slot", "tab" + tab.index);
-        this._hostElem.appendChild(content);
+        (_g = this._hostElem) === null || _g === void 0 ? void 0 : _g.appendChild(content);
       }
-      this._processedTabs.push(tab);
+      (_h = this._processedTabs) === null || _h === void 0 ? void 0 : _h.push(tab);
       this.buildElementIdTab(this._processedTabs);
     });
   }
-  componentDidRender() {
-    this.updateScroll();
-  }
-  componentDidLoad() {
-    core.ElementIDUtils.addIDInfo(this._hostElem, "itemsSelector");
-    this._hostElem.shadowRoot.querySelectorAll('button[name="tab-button"]').forEach((elem) => {
-      var _a;
-      const label = (_a = elem.querySelector('span.tab-label')) === null || _a === void 0 ? void 0 : _a.innerText;
-      const dataInfo = { id: `${core.StringUtils.toCamelCase(label)}` };
-      core.ElementIDUtils.addIDInfo(elem, "itemSelector", dataInfo);
-    });
-  }
   handleSlotChange(ev) {
     const slot = ev.target;
     const content = slot.assignedElements()[0];
@@ -155,10 +192,13 @@ const EzTabselector = class {
           lastTab = tab;
         }
       });
-      container.scrollLeft = lastTab.offsetLeft + lastTab.offsetWidth;
+      if (lastTab) {
+        container.scrollLeft = lastTab.offsetLeft + lastTab.offsetWidth;
+      }
     }
   }
   updateScroll() {
+    var _a, _b, _c, _d;
     const container = this._scrollContainer;
     if (container) {
       const { scrollWidth, clientWidth, scrollLeft } = container;
@@ -166,16 +206,16 @@ const EzTabselector = class {
       this._startHidden = container.scrollLeft > 0;
       this._endHidden = remainingScroll > 0;
       if (this._startHidden) {
-        this._backwardButton.classList.remove("hidden");
+        (_a = this._backwardButton) === null || _a === void 0 ? void 0 : _a.classList.remove("hidden");
       }
       else {
-        this._backwardButton.classList.add("hidden");
+        (_b = this._backwardButton) === null || _b === void 0 ? void 0 : _b.classList.add("hidden");
       }
       if (this._endHidden) {
-        this._forwardButton.classList.remove("hidden");
+        (_c = this._forwardButton) === null || _c === void 0 ? void 0 : _c.classList.remove("hidden");
       }
       else {
-        this._forwardButton.classList.add("hidden");
+        (_d = this._forwardButton) === null || _d === void 0 ? void 0 : _d.classList.add("hidden");
       }
       const classNames = ["", "startHidden", "endHidden", "middle"];
       const currentClass = classNames[Number(this._startHidden) | Number(this._endHidden) << 1];
@@ -194,44 +234,152 @@ const EzTabselector = class {
     this._scrollCallBack = window.setTimeout(() => { this.updateScroll(); }, 200);
   }
   setFocusedTab(index) {
+    if (index === undefined) {
+      return;
+    }
     window.clearTimeout(this._scrollCallBackTest);
     this._scrollCallBackTest = window.setTimeout(() => {
-      const tabtoscroll = this._scrollContainer.querySelector(`#tab${index}`);
-      tabtoscroll.scrollIntoView();
+      var _a;
+      const tabtoscroll = (_a = this._scrollContainer) === null || _a === void 0 ? void 0 : _a.querySelector(`#tab${index}`);
+      tabtoscroll === null || tabtoscroll === void 0 ? void 0 : tabtoscroll.scrollIntoView();
     }, 200);
   }
+  handleDragStart(ev, index) {
+    if (!this.reorderable) {
+      return;
+    }
+    this._dragSourceIndex = index;
+    if (ev.dataTransfer) {
+      ev.dataTransfer.effectAllowed = "move";
+      ev.dataTransfer.setData("text/plain", String(index));
+    }
+  }
+  handleDragOver(ev, index) {
+    if (!this.reorderable || this._dragSourceIndex === undefined) {
+      return;
+    }
+    ev.preventDefault();
+    if (ev.dataTransfer) {
+      ev.dataTransfer.dropEffect = "move";
+    }
+    if (this._dragOverIndex !== index) {
+      this._dragOverIndex = index;
+    }
+  }
+  handleDragLeave(index) {
+    if (this._dragOverIndex === index) {
+      this._dragOverIndex = undefined;
+    }
+  }
+  handleDrop(ev, targetIndex) {
+    var _a;
+    if (!this.reorderable || this._dragSourceIndex === undefined || !this._processedTabs) {
+      return;
+    }
+    ev.preventDefault();
+    const sourceIndex = this._dragSourceIndex;
+    this._dragSourceIndex = undefined;
+    this._dragOverIndex = undefined;
+    if (sourceIndex === targetIndex) {
+      return;
+    }
+    const previouslySelectedKey = this.selectedTab;
+    const reordered = [...this._processedTabs];
+    const [moved] = reordered.splice(sourceIndex, 1);
+    reordered.splice(targetIndex, 0, moved);
+    reordered.forEach((tab, idx) => { tab.index = idx; });
+    this._processedTabs = reordered;
+    if (previouslySelectedKey !== undefined) {
+      const newSelected = reordered.findIndex(t => t.tabKey === previouslySelectedKey);
+      if (newSelected >= 0) {
+        this.selectedIndex = newSelected;
+      }
+    }
+    (_a = this.ezReorder) === null || _a === void 0 ? void 0 : _a.emit(reordered);
+  }
+  handleDragEnd() {
+    this._dragSourceIndex = undefined;
+    this._dragOverIndex = undefined;
+  }
+  findNextEnabledIndex(from, step) {
+    if (!this._processedTabs || this._processedTabs.length === 0) {
+      return undefined;
+    }
+    const total = this._processedTabs.length;
+    let index = from === undefined ? (step > 0 ? -1 : total) : from;
+    for (let i = 0; i < total; i++) {
+      index += step;
+      if (index < 0 || index > total - 1) {
+        return from;
+      }
+      if (!this._processedTabs[index].disabled) {
+        return index;
+      }
+    }
+    return from;
+  }
   setFocusedBtn(visible, parameter) {
-    const tabsButtons = this._scrollContainer.querySelectorAll(".tab");
-    tabsButtons.forEach((el) => {
+    var _a;
+    if (parameter === undefined) {
+      return;
+    }
+    const tabsButtons = (_a = this._scrollContainer) === null || _a === void 0 ? void 0 : _a.querySelectorAll(".tab");
+    tabsButtons === null || tabsButtons === void 0 ? void 0 : tabsButtons.forEach((el) => {
       el.classList.remove("is-focused");
       if (el.id === "tab" + parameter && visible) {
         el.classList.add("is-focused");
       }
     });
   }
-  buildElementIdTab(tabs) {
+  buildElementIdTab(tabs = []) {
     tabs.forEach(tab => {
+      var _a;
       if (!tab.hasOwnProperty(core.ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME)) {
-        const elemIdTabSelector = this._hostElem.getAttribute(core.ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME);
+        const elemIdTabSelector = (_a = this._hostElem) === null || _a === void 0 ? void 0 : _a.getAttribute(core.ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME);
         const dataElementID = `${elemIdTabSelector}_${core.StringUtils.toCamelCase(tab.tabKey)}`;
         tab[core.ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME] = dataElementID;
       }
     });
   }
+  componentWillLoad() {
+    this.processesTabs();
+  }
+  componentDidRender() {
+    this.updateScroll();
+  }
+  componentDidLoad() {
+    var _a;
+    if (this._hostElem) {
+      core.ElementIDUtils.addIDInfo(this._hostElem, "itemsSelector");
+      (_a = this._hostElem.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('button[name="tab-button"]').forEach((elem) => {
+        var _a;
+        const label = (_a = elem.querySelector('span.tab-label')) === null || _a === void 0 ? void 0 : _a.innerText;
+        const dataInfo = { id: `${core.StringUtils.toCamelCase(label)}` };
+        core.ElementIDUtils.addIDInfo(elem, "itemSelector", dataInfo);
+      });
+    }
+    this.scrollActiveTabIntoView(this.selectedIndex);
+  }
   render() {
-    return (index.h(index.Host, null, index.h("button", { class: "backward-button", ref: (el) => this._backwardButton = el, onClick: () => this.scrollBackward() }), index.h("div", { class: "scroll", ref: (el) => this._scrollContainer = el, onScroll: () => this.domScrollHandler(), onKeyDown: (ev) => this.setFocusedParam(ev) }, this._processedTabs.map((tab, index$1) => {
+    var _a;
+    return (index.h(index.Host, null, index.h("button", { class: "backward-button", ref: (el) => this._backwardButton = el, onClick: () => this.scrollBackward() }), index.h("div", { class: "scroll", ref: (el) => this._scrollContainer = el, onScroll: () => this.domScrollHandler(), onKeyDown: (ev) => this.setFocusedParam(ev) }, (_a = this._processedTabs) === null || _a === void 0 ? void 0 : _a.map((tab, index$1) => {
       const tabId = "tab" + index$1;
       const isSelected = index$1 === this.selectedIndex || (this.selectedTab && tab.tabKey === this.selectedTab);
       if (isSelected) {
         this.selectedTab = tab.tabKey;
         this.selectedIndex = index$1;
       }
-      return index.h("button", { id: tabId, name: "tab-button", class: `tab${isSelected ? " is-active" : ""}`, onClick: () => this.handleTabClick(tab) }, tab.leftIcon && index.h("ez-icon", { iconName: tab.leftIcon, class: "left-icon" }), index.h("span", { class: "tab-label", title: tab.label }, tab.label), tab.rightIcon && index.h("ez-icon", { iconName: tab.rightIcon, class: "right-icon" }), index.h("slot", { name: tabId, onSlotchange: (ev) => { this.handleSlotChange(ev); } }));
+      const isDraggable = this.reorderable && !tab.disabled;
+      const isDragOver = this.reorderable && this._dragOverIndex === index$1 && this._dragSourceIndex !== index$1;
+      const isDragging = this._dragSourceIndex === index$1;
+      return index.h("button", { id: tabId, name: "tab-button", class: `tab${isSelected ? " is-active" : ""}${tab.disabled ? " is-disabled" : ""}${this.reorderable ? " is-reorderable" : ""}${isDragOver ? " is-drag-over" : ""}${isDragging ? " is-dragging" : ""}`, disabled: tab.disabled, "aria-disabled": tab.disabled ? "true" : "false", draggable: isDraggable, onClick: () => this.handleTabClick(tab), onDragStart: (ev) => this.handleDragStart(ev, index$1), onDragOver: (ev) => this.handleDragOver(ev, index$1), onDragLeave: () => this.handleDragLeave(index$1), onDrop: (ev) => this.handleDrop(ev, index$1), onDragEnd: () => this.handleDragEnd() }, tab.leftIcon && index.h("ez-icon", { iconName: tab.leftIcon, class: "left-icon" }), index.h("span", { class: "tab-label", title: tab.label }, tab.label), tab.rightIcon && index.h("ez-icon", { iconName: tab.rightIcon, class: "right-icon" }), index.h("slot", { name: tabId, onSlotchange: (ev) => { this.handleSlotChange(ev); } }));
     })), index.h("button", { class: "forward-button", ref: (el) => this._forwardButton = el, onClick: () => this.scrollFoward() })));
   }
   get _hostElem() { return index.getElement(this); }
   static get watchers() { return {
-    "tabs": ["observeTabs"]
+    "tabs": ["observeTabs"],
+    "selectedIndex": ["observeSelectedIndex"],
+    "selectedTab": ["observeSelectedTab"]
   }; }
 };
 EzTabselector.style = ezTabselectorCss;

package/dist/cjs/ez-time-input.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-a7b0c73d.js');
 const core = require('@sankhyalabs/core');
 const CSSVarsUtils = require('./CSSVarsUtils-f20973d1.js');
-const index$1 = require('./index-a8537087.js');
+const index$1 = require('./index-9739c242.js');
 
 const ezTimeInputCss = ":host{display:flex;flex-wrap:wrap;position:relative;width:100%}.time__input{height:100%}";