@sankhyalabs/ezui 6.5.0-dev.7 → 6.5.0-dev.9

package/dist/collection/components/ez-text-input/ez-text-input.css

@@ -208,7 +208,6 @@ input:read-only {
   /*private*/
   box-sizing: border-box;
   position: absolute;
-  z-index: var(--visible);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -327,10 +326,7 @@ ez-icon.tooltip-icon {
   margin: var(--ez-text-input__tooltip-icon---vertical-margin) var(--ez-text-input__tooltip-icon---horizontal-margin);
   top: 0;
   right: 0;
-  z-index: var(--elevation--4);
   border-radius: var(--ez-text-input--border-radius);
-
-  
 }
 ez-icon.tooltip-icon.rightIconSlot{
   right: var(--ez-text-input__tooltip-icon--spacing);

package/dist/custom-elements/index.d.ts

@@ -416,6 +416,12 @@ export const EzTag: {
   new (): EzTag;
 };
 
+interface EzTagInput extends Components.EzTagInput, HTMLElement {}
+export const EzTagInput: {
+  prototype: EzTagInput;
+  new (): EzTagInput;
+};
+
 interface EzTextArea extends Components.EzTextArea, HTMLElement {}
 export const EzTextArea: {
   prototype: EzTextArea;

package/dist/custom-elements/index.js

@@ -6612,7 +6612,7 @@ const EzCheck$1 = class extends HTMLElement$1 {
   static get style() { return ezCheckCss; }
 };
 
-const ezChipCss = ":host{--ez-label-chip--height:32px;--ez-label-chip__label--font-size:var(--font-size--default, 14px);--ez-label-chip__label--font-family:var(--font-pattern, Arial);--ez-label-chip__label--font-weight:var(--font-weight--regular, 400);--ez-label-chip__horizontal-padding:var(--space--8, 8px);--ez-label-chip__label--text--primary:var(--color--gray-70, #FFFFFF);--ez-label-chip__label--icon--primary:var(--color--gray-70, #FFFFFF);--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:transparent;--ez-label-chip__label__container--color-primary:var(--color--primary, #008561);--ez-label-chip__label__container-color--disable-secondary:var(--color--gray-80, #F9F9F9);--ez-label-chip__label__container--background-color:var(--color--ocean-green-600, #008561);--ez-label-chip__label__container--border-color:#0085610F;--ez-label-chip__label__container--border-color-active:transparent;--ez-label-chip__label__container--default--background-color--active:var(--color--ocean-green-700, #00684C);--ez-label-chip__label__container--default--color--active:var(--color--gray-70, #FFFFFF);--ez-label-chip__label__container--text--disabled:var(--color--gray-300, #A4A5A7);--ez-label-chip__label__container--default--border-color--active:transparent;--ez-label-chip__label__container--default--margin-top:var(--space-extra-small, 0px)}.label__text{cursor:pointer;white-space:nowrap;user-select:none;text-overflow:ellipsis;overflow:hidden;max-width:100%;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)}.label__text--disabled{cursor:not-allowed}.label__container{cursor:pointer;width:max-content;display:flex;flex-wrap:wrap;align-items:center;gap:var(--space--4);height:var(--ez-label-chip--height);border:var(--ez-label-chip__label__container--border);border-radius:var(--ez-label-chip__label__container--border-radius);padding:0 var(--ez-label-chip__horizontal-padding);outline-color:var(--ez-label-chip__label__container--default--border-color--active);margin-top:var(--ez-label-chip__label__container--default--margin-top)}.label__container[data-size=\"default\"]{height:var(--ez-label-chip--height, 32px)}.label__container[data-size=\"medium\"]{height:42px}.label__container[data-size=\"large\"]{height:50px}.label__container--row-reverse{flex-direction:row-reverse}.label__container--disabled{cursor:not-allowed}.label__container:hover{-webkit-transition:150ms -webkit-filter linear;transition:150ms filter linear, 150ms -webkit-filter linear;filter:brightness(90%)}.label__container:focus{outline:none;box-shadow:0 0 0 2px var(--ez-label-chip__label__container--default--border-color--active)}.label__container:active{-webkit-transition:150ms -webkit-filter linear;transition:150ms filter linear, 150ms -webkit-filter linear;filter:brightness(85%)}.label__container[data-color-type=\"primary\"] ez-icon{--ez-icon--color:var(--ez-label-chip__label--icon--primary)}:host .label__container[data-color-type=\"primary\"] ::slotted(ez-icon){--ez-icon--color:var(--ez-label-chip__label--icon--primary)}.label__container[data-color-type=\"primary\"][data-color-state=\"default\"]{border-color:var(--ez-label-chip__label__container--border-color-strokes);background-color:var(--ez-label-chip__label__container--background-color);color:var(--ez-label-chip__label--text--primary)}.label__container[data-color-type=\"primary\"][data-color-state=\"active\"]{border-color:var(--ez-label-chip__label__container--border-color-active);background-color:var(--ez-label-chip__label__container--default--background-color--active);color:var(--ez-label-chip__label__container--default--color--active)}.label__container[data-color-type=\"primary\"]:focus{border-color:var(--ez-label-chip__label__container--default--border-color--active)}.label__container[data-color-type=\"secondary\"] ez-icon{--ez-icon--color:var(--color--gray-300, #A4A5A7)}:host .label__container[data-color-type=\"secondary\"] ::slotted(ez-icon){--ez-icon--color:var(--color--gray-300, #A4A5A7)}.label__container[data-color-type=\"secondary\"][data-color-state=\"default\"]{border-color:var(--color--gray-200, #D2D2D3);background-color:var(--color--gray-70);color:var(--color--ocean-green-1000, #00281D)}.label__container[data-color-type=\"secondary\"][data-color-state=\"active\"]{border-color:var(--color--gray-200, #D2D2D3);background-color:var(--color--primary-300, #f2faf8);color:var(--color--primary, #f2faf8)}.label__container[data-color-type=\"secondary\"]:focus{color:var(--color--primary, #007a5a)}.label__container[data-color-state=\"disabled\"]{border-color:var(--ez-label-chip__label__container-color--disable-secondary);background-color:var(--ez-label-chip__label__container-color--disable-secondary);color:var(--ez-label-chip__label__container--text--disabled);cursor:not-allowed;filter:none}.label__container[data-color-state=\"disabled\"] ez-icon{--ez-icon--color:var(--ez-label-chip__label__container--text--disabled)}";
+const ezChipCss = ":host{--ez-label-chip--height:32px;--ez-label-chip__label--font-size:var(--font-size--default, 14px);--ez-label-chip__label--font-family:var(--font-pattern, Arial);--ez-label-chip__label--font-weight:var(--font-weight--regular, 400);--ez-label-chip__horizontal-padding:var(--space--8, 8px);--ez-label-chip__label--text--primary:var(--color--gray-70, #FFFFFF);--ez-label-chip__label--icon--primary:var(--color--gray-70, #FFFFFF);--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:transparent;--ez-label-chip__label__container--color-primary:var(--color--primary, #008561);--ez-label-chip__label__container-color--disable-secondary:var(--color--gray-80, #F9F9F9);--ez-label-chip__label__container--background-color:var(--color--ocean-green-600, #008561);--ez-label-chip__label__container--border-color:#0085610F;--ez-label-chip__label__container--border-color-active:transparent;--ez-label-chip__label__container--default--background-color--active:var(--color--ocean-green-700, #00684C);--ez-label-chip__label__container--default--color--active:var(--color--gray-70, #FFFFFF);--ez-label-chip__label__container--text--disabled:var(--color--gray-300, #A4A5A7);--ez-label-chip__label__container--default--border-color--active:var(--color--ocean-green-200);--ez-label-chip__label__container--secondary--border-color--active:var(--color--gray-200);--ez-label-chip__label__container--default--margin-top:var(--space-extra-small, 0px)}.label__text{cursor:pointer;white-space:nowrap;user-select:none;text-overflow:ellipsis;overflow:hidden;max-width:100%;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)}.label__text--disabled{cursor:not-allowed}.label__container{cursor:pointer;width:max-content;display:flex;flex-wrap:wrap;align-items:center;gap:var(--space--4);outline:none;height:var(--ez-label-chip--height);border:var(--ez-label-chip__label__container--border);border-radius:var(--ez-label-chip__label__container--border-radius);padding:0 var(--ez-label-chip__horizontal-padding);outline-color:var(--ez-label-chip__label__container--default--border-color--active);margin-top:var(--ez-label-chip__label__container--default--margin-top)}.label__container[data-size=\"default\"]{height:var(--ez-label-chip--height, 32px)}.label__container[data-size=\"medium\"]{height:42px}.label__container[data-size=\"large\"]{height:50px}.label__container--row-reverse{flex-direction:row-reverse}.label__container--disabled{cursor:not-allowed}.label__container:hover{-webkit-transition:150ms -webkit-filter linear;transition:150ms filter linear, 150ms -webkit-filter linear;filter:brightness(90%)}.label__container:focus{box-shadow:0 0 0 2px var(--color--gray-70), 0 0 0 4px var(--ez-label-chip__label__container--default--border-color--active)}.label__container:active{-webkit-transition:150ms -webkit-filter linear;transition:150ms filter linear, 150ms -webkit-filter linear;filter:brightness(85%)}.label__container[data-color-type=\"primary\"] ez-icon{--ez-icon--color:var(--ez-label-chip__label--icon--primary)}:host .label__container[data-color-type=\"primary\"] ::slotted(ez-icon){--ez-icon--color:var(--ez-label-chip__label--icon--primary)}.label__container[data-color-type=\"primary\"][data-color-state=\"default\"]{border-color:var(--ez-label-chip__label__container--border-color-strokes);background-color:var(--ez-label-chip__label__container--background-color);color:var(--ez-label-chip__label--text--primary)}.label__container[data-color-type=\"primary\"][data-color-state=\"active\"]{border-color:var(--ez-label-chip__label__container--border-color-active);background-color:var(--ez-label-chip__label__container--default--background-color--active);color:var(--ez-label-chip__label__container--default--color--active)}.label__container[data-color-type=\"primary\"]:focus{box-shadow:0 0 0 2px var(--color--gray-70), 0 0 0 4px var(--ez-label-chip__label__container--default--border-color--active)}.label__container[data-color-type=\"secondary\"] ez-icon{--ez-icon--color:var(--color--gray-300, #A4A5A7)}:host .label__container[data-color-type=\"secondary\"] ::slotted(ez-icon){--ez-icon--color:var(--color--gray-300, #A4A5A7)}.label__container[data-color-type=\"secondary\"][data-color-state=\"default\"]{border-color:var(--color--gray-200, #D2D2D3);background-color:var(--color--gray-70);color:var(--color--ocean-green-1000, #00281D)}.label__container[data-color-type=\"secondary\"][data-color-state=\"active\"]{border-color:var(--color--gray-200, #D2D2D3);background-color:var(--color--primary-300, #f2faf8);color:var(--color--primary, #f2faf8)}.label__container[data-color-type=\"secondary\"]:focus{color:var(--color--primary, #007a5a);box-shadow:0 0 0 2px var(--color--gray-70), 0 0 0 4px var(--ez-label-chip__label__container--secondary--border-color--active)}.label__container[data-color-state=\"disabled\"]{border-color:var(--ez-label-chip__label__container-color--disable-secondary);background-color:var(--ez-label-chip__label__container-color--disable-secondary);color:var(--ez-label-chip__label__container--text--disabled);cursor:not-allowed;filter:none}.label__container[data-color-state=\"disabled\"] ez-icon{--ez-icon--color:var(--ez-label-chip__label__container--text--disabled)}";
 
 const EzChip$1 = class extends HTMLElement$1 {
   constructor() {
@@ -6635,6 +6635,8 @@ const EzChip$1 = class extends HTMLElement$1 {
     this.iconNameLeft = undefined;
     this.iconNameRight = undefined;
     this.type = 'primary';
+    this.tabIndex = 0;
+    this.removeWithKeyboard = false;
     this._isOverflowing = false;
   }
   //---------------------------------------------
@@ -6656,10 +6658,11 @@ const EzChip$1 = class extends HTMLElement$1 {
     this.swichState();
     this.valueChange.emit(this.value);
   }
-  handleClick() {
+  handleClick(event) {
     if (!this.enabled) {
       return;
     }
+    event.stopPropagation();
     if (this.mode === "action") {
       return this.actionClick.emit();
     }
@@ -6693,6 +6696,25 @@ const EzChip$1 = class extends HTMLElement$1 {
     }
     this._isOverflowing = false;
   }
+  handleDeleteKey() {
+    if (this.removeWithKeyboard) {
+      this.removeChip.emit();
+      return;
+    }
+    if (this.mode === "action") {
+      this.actionClick.emit();
+    }
+    else {
+      this.swichState();
+      this.valueChange.emit(this.value);
+    }
+  }
+  handleKeyDown(event) {
+    if (event.key === 'Enter' || event.key === 'Backspace' || event.key === 'Delete') {
+      event.preventDefault();
+      this.handleDeleteKey();
+    }
+  }
   //---------------------------------------------
   // Lifecycle web component
   //---------------------------------------------
@@ -6716,9 +6738,9 @@ const EzChip$1 = class extends HTMLElement$1 {
     return (h("ez-tooltip", { active: this.showNativeTooltip || this._isOverflowing, message: this.label }, h("button", { ref: (el) => this._containerElem = el, class: {
         "label__container--row-reverse": this.removePosition === "left",
         "label__container": true,
-      }, "data-color-state": colorState, "data-color-type": this.type, "data-size": this.size, onClick: () => this.handleClick(), style: {
+      }, "data-color-state": colorState, "data-color-type": this.type, "data-size": this.size, onClick: this.handleClick.bind(this), tabIndex: this.tabIndex, style: {
         maxWidth: this.maxWidth
-      } }, this.iconNameLeft && (h("ez-icon", { size: "medium", "icon-name": this.iconNameLeft, onClick: (event) => this.handleIconClick(event, 'left') })), h("slot", { name: "leftIcon" }), h("label", { ref: (el) => this._labelElem = el, class: {
+      }, onKeyDown: this.handleKeyDown.bind(this) }, this.iconNameLeft && (h("ez-icon", { size: "medium", "icon-name": this.iconNameLeft, onClick: (event) => this.handleIconClick(event, 'left') })), h("slot", { name: "leftIcon" }), h("label", { ref: (el) => this._labelElem = el, class: {
         "label__text--disabled": !this.enabled,
         "label__text": true,
       } }, this.label), h("slot", { name: "rightIcon" }), this.iconNameRight && (h("ez-icon", { size: "medium", "icon-name": this.iconNameRight, onClick: (event) => this.handleIconClick(event, 'right') })), (this.mode !== 'action' && this.removePosition) && (h("ez-icon", { class: "btn-close", size: "medium", "icon-name": "close", onClick: (event) => this.handleClickRemoveButton(event) })))));
@@ -89967,7 +89989,7 @@ const SplitPanel = class extends HTMLElement$1 {
   static get style() { return ezSplitPanelCss; }
 };
 
-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}.tab:focus,.forward-button,.backward-button{outline:none}.is-active{position:relative;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);margin-bottom:var(--space--extra-small, 3px)}.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)}.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 EzTabselector$1 = class extends HTMLElement$1 {
   constructor() {
@@ -90232,6 +90254,245 @@ const EzTag$1 = class extends HTMLElement$1 {
   static get style() { return ezTagCss; }
 };
 
+const ezTagInputCss = ":host{--ez-tag-input--background-color:var(--color--gray-70, #FFFFFF);--ez-tag-input--border-color-default:var(--color--gray-200, #D2D2D3);--ez-tag-input--border-color-focused:var(--color--gray-300, #A4A5A7);--ez-tag-input--border-color-error:var(--color--red-600, #BD0025);--ez-tag-input--border-color-success:var(--color--green-600, #157A00);--ez-tag-input--border-color-warning:var(--color--yellow-600, #EFB103);--ez-tag-input--border-radius:var(--border--radius-8, 8px);--ez-tag-input--padding:var(--space--12, 12px);--ez-tag-input--gap:var(--space--8, 8px);--ez-tag-input--label-color:var(--color--petroleum-900, #141B27);--ez-tag-input--label-font-weight:var(--font-weight--regular, 400);--ez-tag-input--input-color:var(--color--petroleum-900, #141B27);--ez-tag-input--input-font-size:var(--font-size--default, 14px);--ez-tag-input--placeholder-color:var(--color--gray-400, #77777A);--ez-tag-input--background-color-disabled:var(--color--gray-90, #EAEAEA);--ez-tag-input--helptext-color:var(--color--ocean-green-1000, #00281D);display:flex;flex-direction:column;align-items:flex-start;box-sizing:border-box;font-family:var(--font--pattern, 'Roboto', Arial, sans-serif);font-size:var(--font-size--default, 14px);color:var(--color--ocean-green-1000, #00281D);width:100%;border:none;padding:0}label{display:block;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:var(--line-height--20, 20px);color:var(--ez-tag-input--label-color);font-weight:var(--ez-tag-input--label-font-weight)}.tag-input__container{display:flex;flex-wrap:wrap;align-items:center;width:100%;box-sizing:border-box;gap:var(--ez-tag-input--gap);padding:var(--ez-tag-input--padding);margin:var(--space--4, 4px) 0;background-color:var(--ez-tag-input--background-color);border-radius:var(--ez-tag-input--border-radius);transition:box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1)}.tag-input__container,.tag-input__container[data-state=\"default\"]{box-shadow:0 0 0 1px var(--ez-tag-input--border-color-default)}.tag-input__container[data-state=\"error\"]{box-shadow:0 0 0 var(--space--2, 2px) var(--ez-tag-input--border-color-error)}.tag-input__container[data-state=\"success\"]{box-shadow:0 0 0 var(--space--2, 2px) var(--ez-tag-input--border-color-success)}.tag-input__container[data-state=\"warning\"]{box-shadow:0 0 0 var(--space--2, 2px) var(--ez-tag-input--border-color-warning)}.tag-input__container:focus-within{box-shadow:0 0 0 var(--space--2, 2px) var(--ez-tag-input--border-color-focused)}input{flex:1;height:var(--space--24, 24px);background:transparent;border:none;outline:none;color:var(--ez-tag-input--input-color);font-family:var(--font--pattern, 'Roboto');font-size:var(--ez-tag-input--input-font-size);font-weight:var(--font-weight--regular, 400);line-height:var(--line-height--20, 20px)}input::placeholder{color:var(--ez-tag-input--placeholder-color)}.tag-input__container[data-disabled=\"true\"]{cursor:not-allowed;background:var(--ez-tag-input--background-color-disabled);box-shadow:0 0 0 1px var(--ez-tag-input--border-color-default)}.tag-input__container[data-disabled=\"true\"]>*{cursor:not-allowed}input:read-only .tag-input__container>*{cursor:default}@keyframes ez-helptext-fadein{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}span{font-size:var(--font-size--xsmall, 10px);line-height:var(--line-height--16, 16px);overflow:hidden;text-overflow:ellipsis;animation:ez-helptext-fadein 0.3s ease;color:var(--ez-tag-input--helptext-color)}";
+
+const EzTagInput$1 = class extends HTMLElement$1 {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.ezChange = createEvent(this, "ezChange", 7);
+    this.ezTagAdded = createEvent(this, "ezTagAdded", 7);
+    this.ezTagRemoved = createEvent(this, "ezTagRemoved", 7);
+    this.ezFocus = createEvent(this, "ezFocus", 7);
+    this.ezBlur = createEvent(this, "ezBlur", 7);
+    this.ezValidationError = createEvent(this, "ezValidationError", 7);
+    this.ezType = createEvent(this, "ezType", 7);
+    this.handleInputChange = (event) => {
+      const target = event.target;
+      this._inputElement.value = target.value;
+      this.ezType.emit(this._inputElement.value);
+    };
+    this.handleInputKeyDown = (event) => {
+      if (event.key === 'Backspace' && this._inputElement.value === '' && this.tags.length > 0 && !this.suppressBackspaceToRemove) {
+        this.handleRemoveTag(this.tags[this.tags.length - 1]);
+      }
+    };
+    this.handleInputFocus = () => {
+      this.ezFocus.emit();
+    };
+    this.handleInputBlur = () => {
+      this.ezBlur.emit();
+    };
+    this.handleTagClick = (tag, index) => {
+      if (this.enabled && !this.readonly) {
+        this.handleRemoveTag(tag);
+        this.updateTagFocus(index);
+      }
+    };
+    this.handleClearInput = () => {
+      this._inputElement.value = '';
+    };
+    this.label = '';
+    this.placeholder = '';
+    this.helpText = undefined;
+    this.enabled = true;
+    this.readonly = false;
+    this.name = undefined;
+    this.tags = [];
+    this.maxTagLength = undefined;
+    this.maxTags = undefined;
+    this.allowDuplicates = false;
+    this.state = "default";
+    this.validator = undefined;
+    this.suppressTagsKeyboardNavigation = false;
+    this.suppressBackspaceToRemove = false;
+  }
+  /** Aplica o foco no campo */
+  async setFocus(option) {
+    if (option === null || option === void 0 ? void 0 : option.selectText) {
+      this._inputElement.select();
+    }
+    if (!(option === null || option === void 0 ? void 0 : option.preventScroll)) {
+      this._inputElement.scrollIntoView({ behavior: "smooth", block: "center" });
+    }
+    this._inputElement.focus({ preventScroll: true });
+  }
+  /** Remove o foco do campo */
+  async setBlur() {
+    this._inputElement.blur();
+  }
+  /** Adiciona uma tag programaticamente */
+  async addTag(tag) {
+    return this.handleAddTag(tag);
+  }
+  /** Remove uma tag programaticamente */
+  async removeTag(tag) {
+    return this.handleRemoveTag(tag);
+  }
+  /** Limpa todas as tags */
+  async clearTags() {
+    this.tags = [];
+    this.ezChange.emit([...this.tags]);
+  }
+  addInfoId() {
+    if (this._element) {
+      ElementIDUtils.addIDInfo(this._element);
+    }
+    if (this._inputElement) {
+      const dataInfo = { id: 'embedded' };
+      ElementIDUtils.addIDInfo(this._inputElement, 'tag-input', dataInfo);
+    }
+  }
+  initializeKeyboardManager() {
+    this._keyboardManager = new KeyboardManager({
+      propagate: true,
+      element: this._element,
+    })
+      .bind("Enter", () => this.handleAddCurrentTag())
+      .bind("Tab", () => this.handleAddCurrentTag())
+      .bind("Escape", () => this.handleClearInput())
+      .bind("ArrowLeft", () => this.handlePreviousTagFocus())
+      .bind("ArrowRight", () => this.handleNextTagFocus());
+  }
+  handleAddCurrentTag() {
+    if (this._inputElement.value.trim()) {
+      const success = this.handleAddTag(this._inputElement.value);
+      if (success) {
+        this._inputElement.value = '';
+      }
+      return success;
+    }
+    return false;
+  }
+  handleAddTag(tag) {
+    const parsedTag = tag.trim();
+    if (!this.enabled || this.readonly) {
+      return false;
+    }
+    if (!parsedTag || parsedTag.length === 0) {
+      return false;
+    }
+    if (this.maxTagLength && parsedTag.length > this.maxTagLength) {
+      return false;
+    }
+    if (this.maxTags && this.tags.length >= this.maxTags) {
+      return false;
+    }
+    if (!this.allowDuplicates && this.tags.includes(parsedTag)) {
+      return false;
+    }
+    if (this.validator) {
+      const validationResult = this.validator(parsedTag, [...this.tags]);
+      if (validationResult === false) {
+        this.ezValidationError.emit({ tag: parsedTag, error: undefined });
+        return false;
+      }
+      if (typeof validationResult === 'string') {
+        this.ezValidationError.emit({ tag: parsedTag, error: validationResult });
+        return false;
+      }
+    }
+    this.tags = [...this.tags, parsedTag];
+    this.ezChange.emit([...this.tags]);
+    this.ezTagAdded.emit(parsedTag);
+    return true;
+  }
+  async updateTagFocus(lastIndex) {
+    var _a;
+    if (!((_a = this.tags) === null || _a === void 0 ? void 0 : _a.length) || this.suppressTagsKeyboardNavigation) {
+      await this.setFocus();
+      return;
+    }
+    if (!lastIndex) {
+      return;
+    }
+    const nextIndex = lastIndex - 1;
+    const tagElement = this._element.shadowRoot.querySelector(`#tag-${nextIndex}`);
+    if (tagElement) {
+      await tagElement.setFocus();
+    }
+  }
+  getCurrentActiveTagIndex() {
+    var _a;
+    const currentActiveTag = this._element.shadowRoot.activeElement;
+    if (!((_a = this.tags) === null || _a === void 0 ? void 0 : _a.length) || currentActiveTag.tagName.toLowerCase() !== 'ez-chip') {
+      return null;
+    }
+    const currentIndex = parseInt(currentActiveTag.id.split('-')[1], 10);
+    if (Number.isNaN(currentIndex) || currentIndex < 0 || currentIndex >= this.tags.length) {
+      return null;
+    }
+    return currentIndex;
+  }
+  async setTagFocus(tagIndex) {
+    const tagElement = this._element.shadowRoot.querySelector(`#tag-${tagIndex}`);
+    if (tagElement) {
+      await tagElement.setFocus();
+    }
+  }
+  async handlePreviousTagFocus() {
+    if (this.suppressTagsKeyboardNavigation || !this.enabled || this.readonly) {
+      return;
+    }
+    if (this._element.shadowRoot.activeElement === this._inputElement) {
+      await this.setTagFocus(this.tags.length - 1);
+      return;
+    }
+    const currentIndex = this.getCurrentActiveTagIndex();
+    if (currentIndex === null) {
+      await this.setFocus();
+      return;
+    }
+    if (currentIndex === 0) {
+      return;
+    }
+    await this.setTagFocus(currentIndex - 1);
+  }
+  async handleNextTagFocus() {
+    if (this.suppressTagsKeyboardNavigation || !this.enabled || this.readonly) {
+      return;
+    }
+    const currentIndex = this.getCurrentActiveTagIndex();
+    if (currentIndex === null || currentIndex >= this.tags.length - 1) {
+      await this.setFocus();
+      return;
+    }
+    await this.setTagFocus(currentIndex + 1);
+  }
+  handleRemoveTag(tagToRemove) {
+    if (!this.enabled || this.readonly) {
+      return false;
+    }
+    const tagIndex = this.tags.indexOf(tagToRemove);
+    if (tagIndex === -1) {
+      return false;
+    }
+    this.tags = this.tags.filter(tag => tag !== tagToRemove);
+    this.ezChange.emit([...this.tags]);
+    this.ezTagRemoved.emit(tagToRemove);
+    return true;
+  }
+  async componentWillLoad() {
+    if (!this.tags) {
+      this.tags = [];
+    }
+  }
+  componentDidLoad() {
+    this.addInfoId();
+    this.initializeKeyboardManager();
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this._keyboardManager) === null || _a === void 0 ? void 0 : _a.unbindAllShortcutKeys();
+  }
+  render() {
+    return (h(Host, null, h("label", { htmlFor: this.name }, this.label), h("div", { class: "tag-input__container", "data-state": this.state, "data-disabled": (!this.enabled).toString(), onClick: () => this.setFocus({ preventScroll: true }) }, this.tags.map((tag, index) => (h("ez-chip", { key: `tag-${index}`, id: `tag-${index}`, label: tag, enabled: this.enabled && !this.readonly, removePosition: this.enabled && !this.readonly ? "right" : undefined, mode: "label", onRemoveChip: () => this.handleTagClick(tag, index), tabIndex: (this.suppressTagsKeyboardNavigation || !this.enabled || this.readonly) ? -1 : 0, disableAutoUpdateValue: true, removeWithKeyboard: true }))), h("input", { ref: (el) => this._inputElement = el, id: this.name, type: "text", placeholder: this.placeholder, disabled: !this.enabled, readonly: this.readonly, maxlength: this.maxTagLength, onInput: this.handleInputChange, onKeyDown: this.handleInputKeyDown, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur })), this.helpText && (h("span", { title: this.helpText }, this.helpText))));
+  }
+  get _element() { return this; }
+  static get style() { return ezTagInputCss; }
+};
+
 const ezTextAreaCss = ":host{--text-area--width:100%;--text-area--border-radius:var(--border--radius-medium, 12px);--text-area--font-size:var(--text--medium, 14px);--text-area--font-family:var(--font-pattern, Arial);--text-area--font-weight:var(--text-weight--medium, 400);--text-area--color:var(--title--primary, #2B3A54);--text-area__input--background-color:var(--background--light, #FFFFFF);--text-area__input--border:var(--border--medium, 2px solid);--text-area__input--border-color:var(--color--strokes, #DCE0E8);--text-area__input--focus--border-color:var(--color--primary, #008561);--text-area__input--disabled--background-color:var(--background--medium, #F0F3F7);--text-area__input--disabled--color:var(--text--primary, #626E82);--text-area__input--disabled--border--color:var(--color--strokes, #DCE0E8);--text-area__input--error--border-color:var(--color-alert--error-800, #BD0025);--text-area__message_box--font-size:var(--text--small, 12px);--text-area__message_box--info--color:var(--color--success, #22085d);--text-area__message_box--error--color:var(--color-alert--error-800, #BD0025);--text-area__label--floating--top:6px;--text-area__label--padding-top:12px;--text-area__label--padding-left:14px;--text-area__label--padding-right:12px;--text-area__scrollbar--color-default:var(--scrollbar--default, #626e82);--text-area__scrollbar--color-background:var(--scrollbar--background, #E5EAF0);--text-area__scrollbar--color-hover:var(--scrollbar--hover, #2B3A54);--text-area__scrollbar--color-clicked:var(--scrollbar--clicked, #a2abb9);--text-area__scrollbar--border-radius:var(--border--radius-small, 6px);--text-area__scrollbar--width:var(--space--small, 6px);--ez-text-area__tooltip-icon--spacing:var(--space--large);--ez-text-area__tooltip-icon---width:var(--space--large);--ez-text-area__tooltip-icon---horizontal-margin:var(--space--medium, 12px);--ez-text-area__tooltip-icon---vertical-margin:10px;--ez-text-area__tooltip_icon--error--color:var(--color-alert--error-800, #BD0025);display:flex;flex-wrap:wrap;position:relative;width:var(--text-area--width)}textarea{display:flex;flex-direction:column;height:calc(100% - 16px);box-sizing:border-box;border:none;resize:none;width:100%;padding:0;background:none;min-height:42px;font-weight:var(--text-area--font-weight);font-family:var(--text-area--font-family);font-size:var(--text-area--font-size);color:var(--text-area--color);margin-top:calc(var(--space--medium, 12px) + 4px);scrollbar-width:thin;scrollbar-color:var(--text-area__scrollbar--color-clicked) var(--text-area__scrollbar--color-background)}textarea:focus{outline:none}textarea:disabled{background-color:transparent;color:var(--text-area__input--disabled--color);border:var(--text-area__input--disabled--border);cursor:not-allowed}textarea::-webkit-scrollbar{background-color:var(--text-area__scrollbar--color-background);width:var(--text-area__scrollbar--width);max-width:var(--text-area__scrollbar--width);min-width:var(--text-area__scrollbar--width)}textarea::-webkit-scrollbar-thumb{background-color:var(--text-area__scrollbar--color-default);border-radius:var(--text-area__scrollbar--border-radius)}textarea::-webkit-scrollbar-track{background-color:var(--text-area__scrollbar--color-background);border-radius:var(--text-area__scrollbar--border-radius)}textarea::-webkit-scrollbar-thumb:vertical:hover,textarea::-webkit-scrollbar-thumb:horizontal:hover{background-color:var(--text-area__scrollbar--color-hover)}textarea::-webkit-scrollbar-thumb:vertical:active,textarea::-webkit-scrollbar-thumb:horizontal:active{background-color:var(--text-area__scrollbar--color-clicked)}.textarea{width:100%;min-height:42px;max-width:100%;box-sizing:border-box;padding-left:var(--space--medium);padding-right:var(--space--extra-small);border-radius:var(--text-area--border-radius);border:var(--text-area__input--border);border-color:var(--text-area__input--border-color);background-color:var(--text-area__input--background-color)}.textarea--disabled{border-radius:var(--text-area--border-radius);border:var(--text-area__input--border);border-color:var(--text-area__input--disabled--border--color);background-color:var(--text-area__input--disabled--background-color);cursor:not-allowed}.textarea--focus{border-color:var(--text-area__input--focus--border-color)}.textarea.hasError{color:var(--text-area--color);border-color:var(--text-area__input--error--border-color)}.message-box{min-height:16px;min-width:100%;margin-top:3px;line-height:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--text-area--font-family);font-size:var(--text-area__message_box--font-size);color:var(--text-area__message_box--info--color)}.hasError{color:var(--text-area__message_box--error--color)}.textarea__label{box-sizing:border-box;position:absolute;z-index:var(--visible);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-transition:font-size .05s, top .05s;transition:font-size .05s, top .05s;width:calc(100% - var(--text-area__label--padding-right));left:var(--text-area--space--medium);font-family:var(--text-area--font-family);font-size:var(--text-area--font-size);font-weight:var(--text-area--font-weight);color:var(--text-area--color);top:var(--text-area__label--padding-top);left:var(--text-area__label--padding-left);padding-right:var(--text-area__label--padding-right)}.textarea__label--floated{font-family:var(--text-area--font-family);font-size:var(--text--extra-small);color:var(--text--primary);top:var(--text-area__label--floating--top)}.textarea__label--disabled{color:var(--text-area__input--disabled--color);cursor:not-allowed}.textarea--slim{margin-top:var(--space--small, 6px)}.textarea--slim::-webkit-input-placeholder{font-family:var(--text-area--font-family);font-size:var(--text-area--font-size);font-weight:var(--text-area--font-weight);color:var(--text-area--color)}.textarea--slim:-moz-placeholder{font-family:var(--text-area--font-family);font-size:var(--text-area--font-size);font-weight:var(--text-area--font-weight);color:var(--text-area--color)}.textarea--slim::-moz-placeholder{font-family:var(--text-area--font-family);font-size:var(--text-area--font-size);font-weight:var(--text-area--font-weight);color:var(--text-area--color)}.textarea--slim:-ms-input-placeholder{font-family:var(--text-area--font-family);font-size:var(--text-area--font-size);font-weight:var(--text-area--font-weight);color:var(--text-area--color)}.textarea--slim::placeholder{font-family:var(--text-area--font-family);font-size:var(--text-area--font-size);font-weight:var(--text-area--font-weight);color:var(--text-area--color)}.textarea--slim:disabled::-webkit-input-placeholder,.textarea--slim:disabled:-moz-placeholder,.textarea--slim:disabled::-moz-placeholder,.textarea--slim:disabled:-ms-input-placeholder,.textarea--slim:disabled::placeholder{color:var(--text-area__input--disabled--color);cursor:not-allowed}ez-icon.tooltip-icon.hasError{--ez-icon--color:var(--ez-text-area__tooltip_icon--error--color)}.input-container{display:flex;align-items:center}.textarea--resizable{resize:vertical;overflow:auto;min-height:42px}";
 
 const EzTextArea$1 = class extends HTMLElement$1 {
@@ -90596,7 +90857,7 @@ const EzTextEdit$1 = class extends HTMLElement$1 {
   static get style() { return ezTextEditCss; }
 };
 
-const ezTextInputCss = ":host{--ez-text-input--height:42px;--ez-text-input--width:100%;--ez-text-input__icon--width:30px;--ez-text-input--height--slim:32px;--ez-text-input__min-width:0px;--ez-text-input__max-width:100%;--ez-text-input--border-radius:var(--border--radius-medium, 12px);--ez-text-input--border-top-left-radius:var(--ez-text-input--border-radius);--ez-text-input--border-bottom-left-radius:var(--ez-text-input--border-radius);--ez-text-input--border-top-right-radius:var(--ez-text-input--border-radius);--ez-text-input--border-bottom-right-radius:var(--ez-text-input--border-radius);--ez-text-input--font-size:var(--text--medium, 14px);--ez-text-input--font-family:var(--font-pattern, Arial);--ez-text-input--font-weight:var(--text-weight--medium, 400);--ez-text-input--color:var(--title--primary, #2B3A54);--ez-text-input__margin-bottom:var(--space--small);--ez-text-input__input--background-color:var(--background--light, #ffffff);--ez-text-input__input--border:var(--border--small, 1px solid);--ez-text-input__input--border-color:var(--color--strokes,#DCE0E8);--ez-text-input__input--focus--border-color:var(--color--primary, #008561);--ez-text-input__input--disabled--background-color:var(--background--medium, #F0F3F7);--ez-text-input__input--disabled--color:var(--text--primary, #626E82);--ez-text-input__input--error--border-color:var(--color-alert--error-800,#BD0025);--ez-text-input__input--noborder-color:white;--ez-text-input__input--padding:var(--space--medium, 6px);--ez-text-input__placeholder--color:var(--text--secondary, #a2abb9);--ez-text-input__tooltip_icon--error--color:var(--color-alert--error-800,#BD0025);--ez-text-input__label--floating--top:6px;--ez-text-input__label--padding-top:12px;--ez-text-input__label--padding-left:14px;--ez-text-input__label--padding-right:12px;--ez-text-input__input--focus--icon-color:var(--title--primary, #2B3A54);--ez-text-input__input--disabled--focus--icon-color:var(--text--primary, #626E82);--ez-text-input__tooltip-icon--spacing:var(--space--large);--ez-text-input__tooltip-icon---width:var(--space--large);--ez-text-input__tooltip-icon---horizontal-margin:var(--space--medium, 12px);--ez-text-input__tooltip-icon---vertical-margin:10px;display:flex;flex-wrap:wrap;position:relative;width:var(--ez-text-input--width);min-width:var(--ez-text-input__min-width);max-width:var(--ez-text-input__max-width)}:host(.grid_editor){--ez-text-input--height--slim:25px}input{width:100%;box-sizing:border-box;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;height:var(--ez-text-input--height);border-top-left-radius:var(--ez-text-input--border-top-left-radius);border-bottom-left-radius:var(--ez-text-input--border-bottom-left-radius);border-top-right-radius:var(--ez-text-input--border-top-right-radius);border-bottom-right-radius:var(--ez-text-input--border-bottom-right-radius);font-family:var(--ez-text-input--font-family);font-size:var(--ez-text-input--font-size);border:var(--ez-text-input__input--border);border-color:var(--ez-text-input__input--border-color);background-color:var(--ez-text-input__input--background-color);color:var(--ez-text-input--color);font-weight:var(--ez-text-input--font-weight);padding:var(--ez-text-input__input--padding);margin-bottom:var(--ez-text-input__margin-bottom)}input.no--margin{--ez-text-input__margin-bottom:0}input:disabled{background-color:var(--ez-text-input__input--disabled--background-color);color:var(--ez-text-input__input--disabled--color);cursor:not-allowed}input:focus{outline:none;border:var(--border--medium, 2px solid);border-color:var(--ez-text-input__input--focus--border-color)}input.focused{border:var(--border--medium, 2px solid);border-color:var(--ez-text-input__input--focus--border-color)}input.icon--left{padding-left:var(--ez-text-input__icon--width)}input.icon--left.hasError{padding-right:var(--ez-text-input__icon--width)}input.icon--right{padding-right:var(--ez-text-input__icon--width)}input.icon--right.hasError{padding-right:calc(var(--ez-text-input__icon--width) + var(--ez-text-input__tooltip-icon--spacing))}input.hasError{color:var(--ez-text-input--color);border:var(--border--medium, 2px solid);border-color:var(--ez-text-input__input--error--border-color);padding-right:calc(var(--ez-text-input__tooltip-icon---width) + (2*var(--ez-text-input__tooltip-icon---horizontal-margin)))}input:disabled.hasError{color:var(--ez-text-input__input--disabled--color)}input.text--right{text-align:right}input:disabled,input:read-only{cursor:not-allowed}.hasError{color:var(--ez-text-input__tooltip_icon--error--color)}.input__label{box-sizing:border-box;position:absolute;z-index:var(--visible);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-transition:font-size .05s, top .05s;transition:font-size .05s, top .05s;width:calc(100% - var(--ez-text-input__label--padding-right));left:var(--ez-text-input--space--medium);font-family:var(--ez-text-input--font-family);font-size:var(--ez-text-input--font-size);font-weight:var(--ez-text-input--font-weight);color:var(--ez-text-input--color);top:var(--ez-text-input__label--padding-top);left:var(--ez-text-input__label--padding-left);padding-right:var(--ez-text-input__label--padding-right)}.input__label.hasError{width:calc(100% - 2*(var(--ez-text-input__tooltip-icon--spacing)))}.input__label--floated{font-family:var(--ez-text-input--font-family);font-size:var(--text--extra-small);color:var(--text--primary);top:var(--ez-text-input__label--floating--top)}.input__label--disabled{color:var(--ez-text-input__input--disabled--color);cursor:not-allowed}.input__label--left{text-align:left;left:calc(var(--ez-text-input__icon--width) + 2px);width:calc(100% - var(--ez-text-input__icon--width))}.input__label--left.hasError{width:calc(100% - var(--ez-text-input__icon--width) - var(--ez-text-input__tooltip-icon--spacing))}.input__label--right{right:var(--ez-text-input__icon--width);width:calc(100% - var(--ez-text-input__icon--width))}.input__label--right.hasError{width:calc(100% - var(--ez-text-input__icon--width) - var(--ez-text-input__tooltip-icon--spacing))}.input__label--left.input__label--right{left:calc(var(--ez-text-input__icon--width) + 2px);width:calc(100% - var(--ez-text-input__icon--width) * 2)}.input--with--label{padding-bottom:0}.input--slim{padding-top:var(--space--small, 3px);padding-bottom:var(--space--small, 3px);height:var(--ez-text-input--height--slim)}.input__slim--title{font-size:16px;font-weight:bold}.input--slim::-webkit-input-placeholder,.input--slim:-moz-placeholder,.input--slim::-moz-placeholder,.input--slim:-ms-input-placeholder,.input--slim::placeholder{font-family:var(--ez-text-input--font-family);font-size:var(--ez-text-input--font-size);font-weight:var(--ez-text-input--font-weight);color:var(--ez-text-input__placeholder--color)}.input--slim:disabled::-webkit-input-placeholder,.input--slim:disabled:-moz-placeholder,.input--slim:disabled::-moz-placeholder,.input--slim:disabled:-ms-input-placeholder,.input--slim:disabled::placeholder{color:var(--ez-text-input__input--disabled--color)}input.input__slim--noborder{box-shadow:0 0 0 0;border:0 none;outline:0;background:var(--ez-text-input__input--noborder-color)}ez-icon.tooltip-icon{position:absolute;display:flex;align-items:center;justify-content:center;overflow:hidden;width:var(--ez-text-input__tooltip-icon---width);height:22px;margin:var(--ez-text-input__tooltip-icon---vertical-margin) var(--ez-text-input__tooltip-icon---horizontal-margin);top:0;right:0;z-index:var(--elevation--4);border-radius:var(--ez-text-input--border-radius)}ez-icon.tooltip-icon.rightIconSlot{right:var(--ez-text-input__tooltip-icon--spacing)}ez-icon.tooltip-icon.hasError{--ez-icon--color:var(--ez-text-input__tooltip_icon--error--color)}";
+const ezTextInputCss = ":host{--ez-text-input--height:42px;--ez-text-input--width:100%;--ez-text-input__icon--width:30px;--ez-text-input--height--slim:32px;--ez-text-input__min-width:0px;--ez-text-input__max-width:100%;--ez-text-input--border-radius:var(--border--radius-medium, 12px);--ez-text-input--border-top-left-radius:var(--ez-text-input--border-radius);--ez-text-input--border-bottom-left-radius:var(--ez-text-input--border-radius);--ez-text-input--border-top-right-radius:var(--ez-text-input--border-radius);--ez-text-input--border-bottom-right-radius:var(--ez-text-input--border-radius);--ez-text-input--font-size:var(--text--medium, 14px);--ez-text-input--font-family:var(--font-pattern, Arial);--ez-text-input--font-weight:var(--text-weight--medium, 400);--ez-text-input--color:var(--title--primary, #2B3A54);--ez-text-input__margin-bottom:var(--space--small);--ez-text-input__input--background-color:var(--background--light, #ffffff);--ez-text-input__input--border:var(--border--small, 1px solid);--ez-text-input__input--border-color:var(--color--strokes,#DCE0E8);--ez-text-input__input--focus--border-color:var(--color--primary, #008561);--ez-text-input__input--disabled--background-color:var(--background--medium, #F0F3F7);--ez-text-input__input--disabled--color:var(--text--primary, #626E82);--ez-text-input__input--error--border-color:var(--color-alert--error-800,#BD0025);--ez-text-input__input--noborder-color:white;--ez-text-input__input--padding:var(--space--medium, 6px);--ez-text-input__placeholder--color:var(--text--secondary, #a2abb9);--ez-text-input__tooltip_icon--error--color:var(--color-alert--error-800,#BD0025);--ez-text-input__label--floating--top:6px;--ez-text-input__label--padding-top:12px;--ez-text-input__label--padding-left:14px;--ez-text-input__label--padding-right:12px;--ez-text-input__input--focus--icon-color:var(--title--primary, #2B3A54);--ez-text-input__input--disabled--focus--icon-color:var(--text--primary, #626E82);--ez-text-input__tooltip-icon--spacing:var(--space--large);--ez-text-input__tooltip-icon---width:var(--space--large);--ez-text-input__tooltip-icon---horizontal-margin:var(--space--medium, 12px);--ez-text-input__tooltip-icon---vertical-margin:10px;display:flex;flex-wrap:wrap;position:relative;width:var(--ez-text-input--width);min-width:var(--ez-text-input__min-width);max-width:var(--ez-text-input__max-width)}:host(.grid_editor){--ez-text-input--height--slim:25px}input{width:100%;box-sizing:border-box;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;height:var(--ez-text-input--height);border-top-left-radius:var(--ez-text-input--border-top-left-radius);border-bottom-left-radius:var(--ez-text-input--border-bottom-left-radius);border-top-right-radius:var(--ez-text-input--border-top-right-radius);border-bottom-right-radius:var(--ez-text-input--border-bottom-right-radius);font-family:var(--ez-text-input--font-family);font-size:var(--ez-text-input--font-size);border:var(--ez-text-input__input--border);border-color:var(--ez-text-input__input--border-color);background-color:var(--ez-text-input__input--background-color);color:var(--ez-text-input--color);font-weight:var(--ez-text-input--font-weight);padding:var(--ez-text-input__input--padding);margin-bottom:var(--ez-text-input__margin-bottom)}input.no--margin{--ez-text-input__margin-bottom:0}input:disabled{background-color:var(--ez-text-input__input--disabled--background-color);color:var(--ez-text-input__input--disabled--color);cursor:not-allowed}input:focus{outline:none;border:var(--border--medium, 2px solid);border-color:var(--ez-text-input__input--focus--border-color)}input.focused{border:var(--border--medium, 2px solid);border-color:var(--ez-text-input__input--focus--border-color)}input.icon--left{padding-left:var(--ez-text-input__icon--width)}input.icon--left.hasError{padding-right:var(--ez-text-input__icon--width)}input.icon--right{padding-right:var(--ez-text-input__icon--width)}input.icon--right.hasError{padding-right:calc(var(--ez-text-input__icon--width) + var(--ez-text-input__tooltip-icon--spacing))}input.hasError{color:var(--ez-text-input--color);border:var(--border--medium, 2px solid);border-color:var(--ez-text-input__input--error--border-color);padding-right:calc(var(--ez-text-input__tooltip-icon---width) + (2*var(--ez-text-input__tooltip-icon---horizontal-margin)))}input:disabled.hasError{color:var(--ez-text-input__input--disabled--color)}input.text--right{text-align:right}input:disabled,input:read-only{cursor:not-allowed}.hasError{color:var(--ez-text-input__tooltip_icon--error--color)}.input__label{box-sizing:border-box;position:absolute;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-transition:font-size .05s, top .05s;transition:font-size .05s, top .05s;width:calc(100% - var(--ez-text-input__label--padding-right));left:var(--ez-text-input--space--medium);font-family:var(--ez-text-input--font-family);font-size:var(--ez-text-input--font-size);font-weight:var(--ez-text-input--font-weight);color:var(--ez-text-input--color);top:var(--ez-text-input__label--padding-top);left:var(--ez-text-input__label--padding-left);padding-right:var(--ez-text-input__label--padding-right)}.input__label.hasError{width:calc(100% - 2*(var(--ez-text-input__tooltip-icon--spacing)))}.input__label--floated{font-family:var(--ez-text-input--font-family);font-size:var(--text--extra-small);color:var(--text--primary);top:var(--ez-text-input__label--floating--top)}.input__label--disabled{color:var(--ez-text-input__input--disabled--color);cursor:not-allowed}.input__label--left{text-align:left;left:calc(var(--ez-text-input__icon--width) + 2px);width:calc(100% - var(--ez-text-input__icon--width))}.input__label--left.hasError{width:calc(100% - var(--ez-text-input__icon--width) - var(--ez-text-input__tooltip-icon--spacing))}.input__label--right{right:var(--ez-text-input__icon--width);width:calc(100% - var(--ez-text-input__icon--width))}.input__label--right.hasError{width:calc(100% - var(--ez-text-input__icon--width) - var(--ez-text-input__tooltip-icon--spacing))}.input__label--left.input__label--right{left:calc(var(--ez-text-input__icon--width) + 2px);width:calc(100% - var(--ez-text-input__icon--width) * 2)}.input--with--label{padding-bottom:0}.input--slim{padding-top:var(--space--small, 3px);padding-bottom:var(--space--small, 3px);height:var(--ez-text-input--height--slim)}.input__slim--title{font-size:16px;font-weight:bold}.input--slim::-webkit-input-placeholder,.input--slim:-moz-placeholder,.input--slim::-moz-placeholder,.input--slim:-ms-input-placeholder,.input--slim::placeholder{font-family:var(--ez-text-input--font-family);font-size:var(--ez-text-input--font-size);font-weight:var(--ez-text-input--font-weight);color:var(--ez-text-input__placeholder--color)}.input--slim:disabled::-webkit-input-placeholder,.input--slim:disabled:-moz-placeholder,.input--slim:disabled::-moz-placeholder,.input--slim:disabled:-ms-input-placeholder,.input--slim:disabled::placeholder{color:var(--ez-text-input__input--disabled--color)}input.input__slim--noborder{box-shadow:0 0 0 0;border:0 none;outline:0;background:var(--ez-text-input__input--noborder-color)}ez-icon.tooltip-icon{position:absolute;display:flex;align-items:center;justify-content:center;overflow:hidden;width:var(--ez-text-input__tooltip-icon---width);height:22px;margin:var(--ez-text-input__tooltip-icon---vertical-margin) var(--ez-text-input__tooltip-icon---horizontal-margin);top:0;right:0;border-radius:var(--ez-text-input--border-radius)}ez-icon.tooltip-icon.rightIconSlot{right:var(--ez-text-input__tooltip-icon--spacing)}ez-icon.tooltip-icon.hasError{--ez-icon--color:var(--ez-text-input__tooltip_icon--error--color)}";
 
 const EzTextInput$1 = class extends HTMLElement$1 {
   constructor() {
@@ -92923,7 +93184,7 @@ const EzCalendar = /*@__PURE__*/proxyCustomElement(EzCalendar$1, [1,"ez-calendar
 const EzCardItem = /*@__PURE__*/proxyCustomElement(EzCardItem$1, [1,"ez-card-item",{"item":[16],"enableKey":[4,"enable-key"],"compacted":[4]}]);
 const EzChart = /*@__PURE__*/proxyCustomElement(EzChart$1, [1,"ez-chart",{"type":[1],"xAxis":[16],"yAxis":[16],"chartTitle":[1,"chart-title"],"chartSubTitle":[1,"chart-sub-title"],"legendEnabled":[4,"legend-enabled"],"series":[16],"width":[2],"height":[2]}]);
 const EzCheck = /*@__PURE__*/proxyCustomElement(EzCheck$1, [1,"ez-check",{"label":[513],"alternativePlaceholder":[513,"alternative-placeholder"],"value":[1540],"enabled":[1540],"indeterminate":[1540],"mode":[513],"compact":[4]}]);
-const EzChip = /*@__PURE__*/proxyCustomElement(EzChip$1, [1,"ez-chip",{"label":[513],"enabled":[516],"removePosition":[513,"remove-position"],"mode":[513],"value":[1540],"showNativeTooltip":[4,"show-native-tooltip"],"disableAutoUpdateValue":[4,"disable-auto-update-value"],"maxWidth":[1,"max-width"],"size":[1],"iconNameLeft":[1,"icon-name-left"],"iconNameRight":[1,"icon-name-right"],"type":[1],"_isOverflowing":[32]}]);
+const EzChip = /*@__PURE__*/proxyCustomElement(EzChip$1, [1,"ez-chip",{"label":[513],"enabled":[516],"removePosition":[513,"remove-position"],"mode":[513],"value":[1540],"showNativeTooltip":[4,"show-native-tooltip"],"disableAutoUpdateValue":[4,"disable-auto-update-value"],"maxWidth":[1,"max-width"],"size":[1],"iconNameLeft":[1,"icon-name-left"],"iconNameRight":[1,"icon-name-right"],"type":[1],"tabIndex":[2,"tab-index"],"removeWithKeyboard":[4,"remove-with-keyboard"],"_isOverflowing":[32]}]);
 const EzClassicComboBox = /*@__PURE__*/proxyCustomElement(EzClassicComboBox$1, [1,"ez-classic-combo-box",{"value":[1040],"label":[1],"placeholder":[1025],"enabled":[4],"readonly":[4],"name":[1],"state":[1],"helpText":[1,"help-text"],"iconName":[1,"icon-name"],"titleIcon":[1,"title-icon"],"iconClickable":[4,"icon-clickable"],"suppressSearch":[4,"suppress-search"],"options":[16],"textEmptyOption":[1,"text-empty-option"],"suppressEmptyOption":[4,"suppress-empty-option"],"popoverVisible":[32],"hasSlotContent":[32],"highlightedIndex":[32],"filteredOptions":[32],"inputValue":[32]}]);
 const EzClassicInput = /*@__PURE__*/proxyCustomElement(EzClassicInput$1, [1,"ez-classic-input",{"type":[1],"value":[1025],"label":[1],"helpText":[1,"help-text"],"placeholder":[1025],"enabled":[4],"readonly":[4],"name":[1],"minlength":[2],"maxlength":[2],"leftIconName":[1,"left-icon-name"],"rightIconName":[1,"right-icon-name"],"rightIconTooltip":[1,"right-icon-tooltip"],"leftIconTooltip":[1,"left-icon-tooltip"],"state":[1],"leftIconClickable":[4,"left-icon-clickable"],"rightIconClickable":[4,"right-icon-clickable"],"mask":[1],"emitMaskedValue":[4,"emit-masked-value"]}]);
 const EzClassicTextArea = /*@__PURE__*/proxyCustomElement(EzClassicTextArea$1, [1,"ez-classic-text-area",{"name":[1],"label":[1],"placeholder":[1],"value":[1],"helpText":[1,"help-text"],"state":[1],"enabled":[4],"readonly":[4],"maxlength":[2],"resize":[1],"leftIconName":[1,"left-icon-name"],"rightIconName":[1,"right-icon-name"],"rightIconTooltip":[1,"right-icon-tooltip"],"leftIconTooltip":[1,"left-icon-tooltip"],"leftIconClickable":[4,"left-icon-clickable"],"rightIconClickable":[4,"right-icon-clickable"],"rows":[2]}]);
@@ -92980,6 +93241,7 @@ const EzSplitItem = /*@__PURE__*/proxyCustomElement(SplitItem, [4,"ez-split-item
 const EzSplitPanel = /*@__PURE__*/proxyCustomElement(SplitPanel, [0,"ez-split-panel",{"direction":[1],"anchorToExpand":[4,"anchor-to-expand"],"structural":[4]}]);
 const EzTabselector = /*@__PURE__*/proxyCustomElement(EzTabselector$1, [1,"ez-tabselector",{"selectedIndex":[1538,"selected-index"],"selectedTab":[1537,"selected-tab"],"tabs":[1],"_processedTabs":[32]}]);
 const EzTag = /*@__PURE__*/proxyCustomElement(EzTag$1, [1,"ez-tag",{"label":[513],"color":[513],"customBackgroundColor":[1,"custom-background-color"],"customLabelColor":[1,"custom-label-color"]}]);
+const EzTagInput = /*@__PURE__*/proxyCustomElement(EzTagInput$1, [1,"ez-tag-input",{"label":[1],"placeholder":[1],"helpText":[1025,"help-text"],"enabled":[4],"readonly":[4],"name":[1],"tags":[1040],"maxTagLength":[2,"max-tag-length"],"maxTags":[2,"max-tags"],"allowDuplicates":[4,"allow-duplicates"],"state":[1537],"validator":[16],"suppressTagsKeyboardNavigation":[4,"suppress-tags-keyboard-navigation"],"suppressBackspaceToRemove":[4,"suppress-backspace-to-remove"]}]);
 const EzTextArea = /*@__PURE__*/proxyCustomElement(EzTextArea$1, [1,"ez-text-area",{"label":[513],"value":[1537],"enabled":[516],"errorMessage":[1537,"error-message"],"rows":[1538],"canShowError":[516,"can-show-error"],"mode":[513],"enableResize":[516,"enable-resize"],"autoRows":[516,"auto-rows"],"autoFocus":[4,"auto-focus"],"alternativePlaceholder":[513,"alternative-placeholder"],"forceLabelFloat":[32]}]);
 const EzTextEdit = /*@__PURE__*/proxyCustomElement(EzTextEdit$1, [1,"ez-text-edit",{"value":[1],"styled":[16],"_newValue":[32]}]);
 const EzTextInput = /*@__PURE__*/proxyCustomElement(EzTextInput$1, [1,"ez-text-input",{"label":[513],"alternativePlaceholder":[513,"alternative-placeholder"],"value":[1537],"enabled":[516],"errorMessage":[1537,"error-message"],"hasInvalid":[1540,"has-invalid"],"mask":[1],"cleanValueMask":[4,"clean-value-mask"],"canShowError":[516,"can-show-error"],"restrict":[1],"mode":[513],"noBorder":[516,"no-border"],"password":[4],"autoFocus":[4,"auto-focus"],"hasRightSlotContent":[32],"forceLabelFloat":[32]}]);
@@ -93067,6 +93329,7 @@ const defineCustomElements = (opts) => {
   EzSplitPanel,
   EzTabselector,
   EzTag,
+  EzTagInput,
   EzTextArea,
   EzTextEdit,
   EzTextInput,
@@ -93090,4 +93353,4 @@ const defineCustomElements = (opts) => {
   }
 };
 
-export { EzActionsButton, EzAlert, EzAlertList, EzApplication, EzAvatar, EzBadge, EzBreadcrumb, EzButton, EzCalendar, EzCardItem, EzChart, EzCheck, EzChip, EzClassicComboBox, EzClassicInput, EzClassicTextArea, EzCollapsibleBox, EzComboBox, EzComboBoxList, EzCustomFormInput, EzDateInput, EzDateTimeInput, EzDialog, EzDoubleList, EzDropdown, EzEmptyCard, EzFileItem, EzFilterInput, EzForm, EzFormView, EzGrid, EzGuideNavigator, EzIcon, EzLinkBuilder, EzList, EzListItem, EzLoadingBar, EzModal, EzModalContainer, EzMultiSelectionList, EzNumberInput, EzPagination, EzPopover, EzPopoverCore, EzPopoverPlus, EzPopup, EzProgressBar, EzRadioButton, EzRichText, EzRichToolbar, EzRichToolbarArrows, EzRichToolbarConfigs, EzRichToolbarItem, EzRichToolbarLetters, EzScroller, EzSearch, EzSearchPlus, EzSearchResultList, EzSidebarButton, EzSidebarNavigator, EzSimpleImageUploader, EzSkeleton, EzSortableList, EzSpinner, EzSplitButton, EzSplitItem, EzSplitPanel, EzTabselector, EzTag, EzTextArea, EzTextEdit, EzTextInput, EzTile, EzTileMedium, EzTimeInput, EzToast, EzTooltip, EzTree, EzUnderface, EzUpload, EzViewStack, FilterColumn, MultiSelectionBoxMessage, SearchList, defineCustomElements };
+export { EzActionsButton, EzAlert, EzAlertList, EzApplication, EzAvatar, EzBadge, EzBreadcrumb, EzButton, EzCalendar, EzCardItem, EzChart, EzCheck, EzChip, EzClassicComboBox, EzClassicInput, EzClassicTextArea, EzCollapsibleBox, EzComboBox, EzComboBoxList, EzCustomFormInput, EzDateInput, EzDateTimeInput, EzDialog, EzDoubleList, EzDropdown, EzEmptyCard, EzFileItem, EzFilterInput, EzForm, EzFormView, EzGrid, EzGuideNavigator, EzIcon, EzLinkBuilder, EzList, EzListItem, EzLoadingBar, EzModal, EzModalContainer, EzMultiSelectionList, EzNumberInput, EzPagination, EzPopover, EzPopoverCore, EzPopoverPlus, EzPopup, EzProgressBar, EzRadioButton, EzRichText, EzRichToolbar, EzRichToolbarArrows, EzRichToolbarConfigs, EzRichToolbarItem, EzRichToolbarLetters, EzScroller, EzSearch, EzSearchPlus, EzSearchResultList, EzSidebarButton, EzSidebarNavigator, EzSimpleImageUploader, EzSkeleton, EzSortableList, EzSpinner, EzSplitButton, EzSplitItem, EzSplitPanel, EzTabselector, EzTag, EzTagInput, EzTextArea, EzTextEdit, EzTextInput, EzTile, EzTileMedium, EzTimeInput, EzToast, EzTooltip, EzTree, EzUnderface, EzUpload, EzViewStack, FilterColumn, MultiSelectionBoxMessage, SearchList, defineCustomElements };

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

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-baa5e267.js';
 import { ElementIDUtils } from '@sankhyalabs/core';
 
-const ezChipCss = ":host{--ez-label-chip--height:32px;--ez-label-chip__label--font-size:var(--font-size--default, 14px);--ez-label-chip__label--font-family:var(--font-pattern, Arial);--ez-label-chip__label--font-weight:var(--font-weight--regular, 400);--ez-label-chip__horizontal-padding:var(--space--8, 8px);--ez-label-chip__label--text--primary:var(--color--gray-70, #FFFFFF);--ez-label-chip__label--icon--primary:var(--color--gray-70, #FFFFFF);--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:transparent;--ez-label-chip__label__container--color-primary:var(--color--primary, #008561);--ez-label-chip__label__container-color--disable-secondary:var(--color--gray-80, #F9F9F9);--ez-label-chip__label__container--background-color:var(--color--ocean-green-600, #008561);--ez-label-chip__label__container--border-color:#0085610F;--ez-label-chip__label__container--border-color-active:transparent;--ez-label-chip__label__container--default--background-color--active:var(--color--ocean-green-700, #00684C);--ez-label-chip__label__container--default--color--active:var(--color--gray-70, #FFFFFF);--ez-label-chip__label__container--text--disabled:var(--color--gray-300, #A4A5A7);--ez-label-chip__label__container--default--border-color--active:transparent;--ez-label-chip__label__container--default--margin-top:var(--space-extra-small, 0px)}.label__text{cursor:pointer;white-space:nowrap;user-select:none;text-overflow:ellipsis;overflow:hidden;max-width:100%;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)}.label__text--disabled{cursor:not-allowed}.label__container{cursor:pointer;width:max-content;display:flex;flex-wrap:wrap;align-items:center;gap:var(--space--4);height:var(--ez-label-chip--height);border:var(--ez-label-chip__label__container--border);border-radius:var(--ez-label-chip__label__container--border-radius);padding:0 var(--ez-label-chip__horizontal-padding);outline-color:var(--ez-label-chip__label__container--default--border-color--active);margin-top:var(--ez-label-chip__label__container--default--margin-top)}.label__container[data-size=\"default\"]{height:var(--ez-label-chip--height, 32px)}.label__container[data-size=\"medium\"]{height:42px}.label__container[data-size=\"large\"]{height:50px}.label__container--row-reverse{flex-direction:row-reverse}.label__container--disabled{cursor:not-allowed}.label__container:hover{-webkit-transition:150ms -webkit-filter linear;transition:150ms filter linear, 150ms -webkit-filter linear;filter:brightness(90%)}.label__container:focus{outline:none;box-shadow:0 0 0 2px var(--ez-label-chip__label__container--default--border-color--active)}.label__container:active{-webkit-transition:150ms -webkit-filter linear;transition:150ms filter linear, 150ms -webkit-filter linear;filter:brightness(85%)}.label__container[data-color-type=\"primary\"] ez-icon{--ez-icon--color:var(--ez-label-chip__label--icon--primary)}:host .label__container[data-color-type=\"primary\"] ::slotted(ez-icon){--ez-icon--color:var(--ez-label-chip__label--icon--primary)}.label__container[data-color-type=\"primary\"][data-color-state=\"default\"]{border-color:var(--ez-label-chip__label__container--border-color-strokes);background-color:var(--ez-label-chip__label__container--background-color);color:var(--ez-label-chip__label--text--primary)}.label__container[data-color-type=\"primary\"][data-color-state=\"active\"]{border-color:var(--ez-label-chip__label__container--border-color-active);background-color:var(--ez-label-chip__label__container--default--background-color--active);color:var(--ez-label-chip__label__container--default--color--active)}.label__container[data-color-type=\"primary\"]:focus{border-color:var(--ez-label-chip__label__container--default--border-color--active)}.label__container[data-color-type=\"secondary\"] ez-icon{--ez-icon--color:var(--color--gray-300, #A4A5A7)}:host .label__container[data-color-type=\"secondary\"] ::slotted(ez-icon){--ez-icon--color:var(--color--gray-300, #A4A5A7)}.label__container[data-color-type=\"secondary\"][data-color-state=\"default\"]{border-color:var(--color--gray-200, #D2D2D3);background-color:var(--color--gray-70);color:var(--color--ocean-green-1000, #00281D)}.label__container[data-color-type=\"secondary\"][data-color-state=\"active\"]{border-color:var(--color--gray-200, #D2D2D3);background-color:var(--color--primary-300, #f2faf8);color:var(--color--primary, #f2faf8)}.label__container[data-color-type=\"secondary\"]:focus{color:var(--color--primary, #007a5a)}.label__container[data-color-state=\"disabled\"]{border-color:var(--ez-label-chip__label__container-color--disable-secondary);background-color:var(--ez-label-chip__label__container-color--disable-secondary);color:var(--ez-label-chip__label__container--text--disabled);cursor:not-allowed;filter:none}.label__container[data-color-state=\"disabled\"] ez-icon{--ez-icon--color:var(--ez-label-chip__label__container--text--disabled)}";
+const ezChipCss = ":host{--ez-label-chip--height:32px;--ez-label-chip__label--font-size:var(--font-size--default, 14px);--ez-label-chip__label--font-family:var(--font-pattern, Arial);--ez-label-chip__label--font-weight:var(--font-weight--regular, 400);--ez-label-chip__horizontal-padding:var(--space--8, 8px);--ez-label-chip__label--text--primary:var(--color--gray-70, #FFFFFF);--ez-label-chip__label--icon--primary:var(--color--gray-70, #FFFFFF);--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:transparent;--ez-label-chip__label__container--color-primary:var(--color--primary, #008561);--ez-label-chip__label__container-color--disable-secondary:var(--color--gray-80, #F9F9F9);--ez-label-chip__label__container--background-color:var(--color--ocean-green-600, #008561);--ez-label-chip__label__container--border-color:#0085610F;--ez-label-chip__label__container--border-color-active:transparent;--ez-label-chip__label__container--default--background-color--active:var(--color--ocean-green-700, #00684C);--ez-label-chip__label__container--default--color--active:var(--color--gray-70, #FFFFFF);--ez-label-chip__label__container--text--disabled:var(--color--gray-300, #A4A5A7);--ez-label-chip__label__container--default--border-color--active:var(--color--ocean-green-200);--ez-label-chip__label__container--secondary--border-color--active:var(--color--gray-200);--ez-label-chip__label__container--default--margin-top:var(--space-extra-small, 0px)}.label__text{cursor:pointer;white-space:nowrap;user-select:none;text-overflow:ellipsis;overflow:hidden;max-width:100%;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)}.label__text--disabled{cursor:not-allowed}.label__container{cursor:pointer;width:max-content;display:flex;flex-wrap:wrap;align-items:center;gap:var(--space--4);outline:none;height:var(--ez-label-chip--height);border:var(--ez-label-chip__label__container--border);border-radius:var(--ez-label-chip__label__container--border-radius);padding:0 var(--ez-label-chip__horizontal-padding);outline-color:var(--ez-label-chip__label__container--default--border-color--active);margin-top:var(--ez-label-chip__label__container--default--margin-top)}.label__container[data-size=\"default\"]{height:var(--ez-label-chip--height, 32px)}.label__container[data-size=\"medium\"]{height:42px}.label__container[data-size=\"large\"]{height:50px}.label__container--row-reverse{flex-direction:row-reverse}.label__container--disabled{cursor:not-allowed}.label__container:hover{-webkit-transition:150ms -webkit-filter linear;transition:150ms filter linear, 150ms -webkit-filter linear;filter:brightness(90%)}.label__container:focus{box-shadow:0 0 0 2px var(--color--gray-70), 0 0 0 4px var(--ez-label-chip__label__container--default--border-color--active)}.label__container:active{-webkit-transition:150ms -webkit-filter linear;transition:150ms filter linear, 150ms -webkit-filter linear;filter:brightness(85%)}.label__container[data-color-type=\"primary\"] ez-icon{--ez-icon--color:var(--ez-label-chip__label--icon--primary)}:host .label__container[data-color-type=\"primary\"] ::slotted(ez-icon){--ez-icon--color:var(--ez-label-chip__label--icon--primary)}.label__container[data-color-type=\"primary\"][data-color-state=\"default\"]{border-color:var(--ez-label-chip__label__container--border-color-strokes);background-color:var(--ez-label-chip__label__container--background-color);color:var(--ez-label-chip__label--text--primary)}.label__container[data-color-type=\"primary\"][data-color-state=\"active\"]{border-color:var(--ez-label-chip__label__container--border-color-active);background-color:var(--ez-label-chip__label__container--default--background-color--active);color:var(--ez-label-chip__label__container--default--color--active)}.label__container[data-color-type=\"primary\"]:focus{box-shadow:0 0 0 2px var(--color--gray-70), 0 0 0 4px var(--ez-label-chip__label__container--default--border-color--active)}.label__container[data-color-type=\"secondary\"] ez-icon{--ez-icon--color:var(--color--gray-300, #A4A5A7)}:host .label__container[data-color-type=\"secondary\"] ::slotted(ez-icon){--ez-icon--color:var(--color--gray-300, #A4A5A7)}.label__container[data-color-type=\"secondary\"][data-color-state=\"default\"]{border-color:var(--color--gray-200, #D2D2D3);background-color:var(--color--gray-70);color:var(--color--ocean-green-1000, #00281D)}.label__container[data-color-type=\"secondary\"][data-color-state=\"active\"]{border-color:var(--color--gray-200, #D2D2D3);background-color:var(--color--primary-300, #f2faf8);color:var(--color--primary, #f2faf8)}.label__container[data-color-type=\"secondary\"]:focus{color:var(--color--primary, #007a5a);box-shadow:0 0 0 2px var(--color--gray-70), 0 0 0 4px var(--ez-label-chip__label__container--secondary--border-color--active)}.label__container[data-color-state=\"disabled\"]{border-color:var(--ez-label-chip__label__container-color--disable-secondary);background-color:var(--ez-label-chip__label__container-color--disable-secondary);color:var(--ez-label-chip__label__container--text--disabled);cursor:not-allowed;filter:none}.label__container[data-color-state=\"disabled\"] ez-icon{--ez-icon--color:var(--ez-label-chip__label__container--text--disabled)}";
 
 const EzChip = class {
   constructor(hostRef) {
@@ -22,6 +22,8 @@ const EzChip = class {
     this.iconNameLeft = undefined;
     this.iconNameRight = undefined;
     this.type = 'primary';
+    this.tabIndex = 0;
+    this.removeWithKeyboard = false;
     this._isOverflowing = false;
   }
   //---------------------------------------------
@@ -43,10 +45,11 @@ const EzChip = class {
     this.swichState();
     this.valueChange.emit(this.value);
   }
-  handleClick() {
+  handleClick(event) {
     if (!this.enabled) {
       return;
     }
+    event.stopPropagation();
     if (this.mode === "action") {
       return this.actionClick.emit();
     }
@@ -80,6 +83,25 @@ const EzChip = class {
     }
     this._isOverflowing = false;
   }
+  handleDeleteKey() {
+    if (this.removeWithKeyboard) {
+      this.removeChip.emit();
+      return;
+    }
+    if (this.mode === "action") {
+      this.actionClick.emit();
+    }
+    else {
+      this.swichState();
+      this.valueChange.emit(this.value);
+    }
+  }
+  handleKeyDown(event) {
+    if (event.key === 'Enter' || event.key === 'Backspace' || event.key === 'Delete') {
+      event.preventDefault();
+      this.handleDeleteKey();
+    }
+  }
   //---------------------------------------------
   // Lifecycle web component
   //---------------------------------------------
@@ -103,9 +125,9 @@ const EzChip = class {
     return (h("ez-tooltip", { active: this.showNativeTooltip || this._isOverflowing, message: this.label }, h("button", { ref: (el) => this._containerElem = el, class: {
         "label__container--row-reverse": this.removePosition === "left",
         "label__container": true,
-      }, "data-color-state": colorState, "data-color-type": this.type, "data-size": this.size, onClick: () => this.handleClick(), style: {
+      }, "data-color-state": colorState, "data-color-type": this.type, "data-size": this.size, onClick: this.handleClick.bind(this), tabIndex: this.tabIndex, style: {
         maxWidth: this.maxWidth
-      } }, this.iconNameLeft && (h("ez-icon", { size: "medium", "icon-name": this.iconNameLeft, onClick: (event) => this.handleIconClick(event, 'left') })), h("slot", { name: "leftIcon" }), h("label", { ref: (el) => this._labelElem = el, class: {
+      }, onKeyDown: this.handleKeyDown.bind(this) }, this.iconNameLeft && (h("ez-icon", { size: "medium", "icon-name": this.iconNameLeft, onClick: (event) => this.handleIconClick(event, 'left') })), h("slot", { name: "leftIcon" }), h("label", { ref: (el) => this._labelElem = el, class: {
         "label__text--disabled": !this.enabled,
         "label__text": true,
       } }, this.label), h("slot", { name: "rightIcon" }), this.iconNameRight && (h("ez-icon", { size: "medium", "icon-name": this.iconNameRight, onClick: (event) => this.handleIconClick(event, 'right') })), (this.mode !== 'action' && this.removePosition) && (h("ez-icon", { class: "btn-close", size: "medium", "icon-name": "close", onClick: (event) => this.handleClickRemoveButton(event) })))));

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

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-baa5e267.js';
 import { ElementIDUtils, StringUtils } from '@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}.tab:focus,.forward-button,.backward-button{outline:none}.is-active{position:relative;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);margin-bottom:var(--space--extra-small, 3px)}.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)}.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 EzTabselector = class {
   constructor(hostRef) {