@genexus/genexus-ide-ui 0.0.56 → 0.0.57

package/dist/cjs/ch-checkbox_4.cjs.entry.js

@@ -6,7 +6,7 @@ const index = require('./index-5a32426a.js');
 const reserverdNames = require('./reserverd-names-1b00889a.js');
 const helpers = require('./helpers-291cb1cb.js');
 
-const checkboxCss = "*,::before,::after{box-sizing:border-box}:host{display:flex;align-items:center;align-self:stretch;outline:unset;touch-action:manipulation;user-select:none}:host(.ch-checkbox--actionable) :is(.input,.label){cursor:pointer}.container{position:relative;width:min(1em, 20px);height:min(1em, 20px);border:1px solid var(--option-border-color, #000);border-radius:18.75%}.container--checked{background-color:var(--option-checked-color, #ffffff00)}.container:focus-within{box-shadow:0 0 1px 1px #00000040}.input{display:flex;width:100%;height:100%;opacity:0;margin:0;padding:0}.option{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);width:50%;height:50%;background-color:#000;opacity:0;pointer-events:none}.option--checked{opacity:1;-webkit-mask:url(\"data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' %3E%3Cpath fill='currentColor' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z' /%3E%3C/svg%3E\")}.option--indeterminate{opacity:1}.label{margin-inline-start:min(0.35em, 7px)}";
+const checkboxCss = "*,::before,::after{box-sizing:border-box}:host{display:flex;align-items:center;align-self:stretch;outline:unset;touch-action:manipulation;user-select:none}:host(.ch-checkbox--actionable) :is(.input,.label){cursor:pointer}.container{position:relative;width:min(1em, 20px);height:min(1em, 20px);border:1px solid var(--option-border-color, currentColor);border-radius:18.75%}.container--checked{background-color:var(--option-checked-color, #ffffff00)}.container:focus-within{box-shadow:0 0 1px 1px color-mix(in srgb, currentColor 25%, transparent)}.input{display:flex;width:100%;height:100%;opacity:0;margin:0;padding:0}.option{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);width:50%;height:50%;background-color:currentColor;opacity:0;pointer-events:none}.option--checked{opacity:1;-webkit-mask:url(\"data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' %3E%3Cpath fill='currentColor' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z' /%3E%3C/svg%3E\")}.option--indeterminate{opacity:1}.label{margin-inline-start:min(0.35em, 7px)}";
 
 const CHECKBOX_ID = "checkbox";
 const PARTS = (checked, indeterminate) => `${checked ? " checked" : ""}${indeterminate ? " indeterminate" : ""}`;
@@ -105,7 +105,7 @@ const scrollToEdge = (event, container, scrollSpeed, scrollThreshold) => {
   }
 };
 
-const treeXCss = "ch-tree-x{display:flex;position:relative;overflow:auto}ch-tree-x>ch-tree-x-list{position:absolute;inset:0;min-width:max-content}ch-tree-x.ch-tree-x-dragging-item ch-tree-x-list-item{pointer-events:var(--ch-tree-x-pointer-events, all)}ch-tree-x.ch-tree-x-dragging-item .ch-tree-x-list-item--deny-drop,ch-tree-x.ch-tree-x-dragging-item ch-tree-x-list{pointer-events:none}ch-tree-x.ch-tree-x--dragging-selected-items ch-tree-x-list-item[selected]{--ch-tree-x-pointer-events:none}ch-tree-x.ch-tree-x-waiting-drop-processing{cursor:wait}ch-tree-x.ch-tree-x-waiting-drop-processing>ch-tree-x-list{pointer-events:none}.ch-tree-x-drag-info{--rtl-offset:16px;position:fixed;left:0;top:0;transform:translate(calc(var(--ch-tree-x-dragging-item-x) + var(--rtl-offset)), calc(var(--ch-tree-x-dragging-item-y) + 8px));pointer-events:none;z-index:1;animation:ch-tree-x-drag-info-fade-in 10ms}@keyframes ch-tree-x-drag-info-fade-in{0%,100%{opacity:0}}html[dir=rtl] .ch-tree-x-drag-info{--rtl-offset:-100%}";
+const treeXCss = "ch-tree-x{display:flex;position:relative;width:100%;overflow:auto}ch-tree-x>.ch-tree-x-container{position:absolute;inset:0}ch-tree-x.ch-tree-x-dragging-item ch-tree-x-list-item{pointer-events:var(--ch-tree-x-pointer-events, all)}ch-tree-x.ch-tree-x-dragging-item .ch-tree-x-list-item--deny-drop,ch-tree-x.ch-tree-x-dragging-item ch-tree-x-list{pointer-events:none}ch-tree-x.ch-tree-x--dragging-selected-items ch-tree-x-list-item[selected]{--ch-tree-x-pointer-events:none}ch-tree-x.ch-tree-x-waiting-drop-processing{cursor:wait}ch-tree-x.ch-tree-x-waiting-drop-processing>ch-tree-x-list{pointer-events:none}.ch-tree-x-drag-info{--rtl-offset:16px;position:fixed;left:0;top:0;transform:translate(calc(var(--ch-tree-x-dragging-item-x) + var(--rtl-offset)), calc(var(--ch-tree-x-dragging-item-y) + 8px));pointer-events:none;z-index:1;animation:ch-tree-x-drag-info-fade-in 10ms}@keyframes ch-tree-x-drag-info-fade-in{0%,100%{opacity:0}}html[dir=rtl] .ch-tree-x-drag-info{--rtl-offset:-100%}";
 
 const TREE_ITEM_TAG_NAME$1 = "ch-tree-x-list-item";
 const TREE_TAG_NAME = "ch-tree-x";
@@ -115,8 +115,9 @@ const TEXT_FORMAT = "text/plain";
 const ARROW_DOWN_KEY = "ArrowDown";
 const ARROW_UP_KEY = "ArrowUp";
 const EDIT_KEY = "F2";
-const isExecutedInTree = (event, el) => event.composedPath().includes(el);
-const treeItemIsInEditMode = () => document.activeElement.editing;
+const isTreeItem = (element) => element.tagName.toLowerCase() === TREE_ITEM_TAG_NAME$1;
+const getFocusedTreeItem = () => helpers.focusComposedPath().find(isTreeItem);
+const canMoveTreeItemFocus = (treeItem) => treeItem && !treeItem.editing;
 const getDroppableZoneKey = (newContainerId, draggedItems) => `"newContainerId":"${newContainerId}","metadata":"${JSON.stringify(draggedItems)}"`;
 const POSITION_X_DRAG_CUSTOM_VAR = "--ch-tree-x-dragging-item-x";
 const POSITION_Y_DRAG_CUSTOM_VAR = "--ch-tree-x-dragging-item-y";
@@ -130,27 +131,28 @@ const ChTreeX = class {
     // @todo TODO: Check if key codes works in Safari
     this.keyDownEvents = {
       [ARROW_DOWN_KEY]: event => {
-        if (!isExecutedInTree(event, this.el) || treeItemIsInEditMode()) {
+        const treeItem = getFocusedTreeItem();
+        if (!canMoveTreeItemFocus(treeItem)) {
           return;
         }
         event.preventDefault();
-        const treeItem = document.activeElement;
         treeItem.focusNextItem(helpers.mouseEventModifierKey(event));
       },
       [ARROW_UP_KEY]: event => {
-        if (!isExecutedInTree(event, this.el) || treeItemIsInEditMode()) {
+        const treeItem = getFocusedTreeItem();
+        if (!canMoveTreeItemFocus(treeItem)) {
           return;
         }
         event.preventDefault();
-        const treeItem = document.activeElement;
         treeItem.focusPreviousItem(helpers.mouseEventModifierKey(event));
       },
       [EDIT_KEY]: event => {
-        if (document.activeElement.tagName.toLowerCase() !== TREE_ITEM_TAG_NAME$1) {
+        const treeItem = getFocusedTreeItem();
+        if (!treeItem) {
           return;
         }
         event.preventDefault();
-        document.activeElement.editing = true;
+        treeItem.editing = true;
       }
     };
     this.draggingSelectedItems = false;
@@ -369,7 +371,7 @@ const ChTreeX = class {
    * @param draggedItems Information about the dragged items.
    * @param validDrop Current state of the droppable zone.
    */
-  async updateValidDroppableZone(requestTimestamp, newContainerId, draggedItems, validDrop) {
+  async updateValidDropZone(requestTimestamp, newContainerId, draggedItems, validDrop) {
     var _a;
     if (!this.draggingInTheDocument ||
       requestTimestamp <= this.dragStartTimestamp) {
@@ -531,9 +533,10 @@ const ChTreeX = class {
   render() {
     return (index.h(index.Host, { class: {
         "ch-tree-x-dragging-item": this.draggingInTheDocument,
+        "ch-tree-x-not-dragging-item": !this.draggingInTheDocument,
         "ch-tree-x--dragging-selected-items": this.draggingInTree && this.draggingSelectedItems,
         "ch-tree-x-waiting-drop-processing": this.waitDropProcessing
-      } }, index.h("slot", null), this.draggingInTree && (index.h("span", { "aria-hidden": "true", class: "ch-tree-x-drag-info" }, this.dragInfo))));
+      } }, index.h("div", { role: "tree", "aria-multiselectable": this.multiSelection.toString(), class: "ch-tree-x-container" }, index.h("slot", null)), this.draggingInTree && (index.h("span", { "aria-hidden": "true", class: "ch-tree-x-drag-info" }, this.dragInfo))));
   }
   get el() { return index.getElement(this); }
 };
@@ -544,21 +547,18 @@ const treeXListCss = ":host{display:grid;grid-auto-rows:min-content;position:rel
 const ChTreeListX = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    /**
-     * Level in the tree at which the control is placed.
-     */
-    this.level = 0;
   }
   render() {
-    return (index.h(index.Host, { role: this.level === 0 ? "tree" : "group" }, index.h("slot", null)));
+    return (index.h(index.Host, { role: "group" }, index.h("slot", null)));
   }
   get el() { return index.getElement(this); }
 };
 ChTreeListX.style = treeXListCss;
 
-const treeXListItemCss = ":where(button){all:unset;display:flex;cursor:pointer;user-select:none;touch-action:manipulation;-webkit-user-drag:element}*,::before,::after{box-sizing:border-box}:host{--checkbox-size:1em;--expandable-button-width:0.75em;--ch-tree-x-list-item-dashed-line--offset:0px;--tab-width:calc(\n    var(--checkbox-size) + var(--expandable-button-width) +\n      (5px * 2)\n  );display:grid;grid-template-rows:min-content;overflow:hidden}.header{--own-offset:0px;display:flex;align-items:center;min-height:calc(1em + 6px);padding-inline-start:var(--padding-inline-start)}.header--disabled{opacity:0.5;pointer-events:none}.header--even{--padding-inline-start:calc(\n    var(--parent-padding-inline-start--odd, 0px) + var(--tab-width)\n  )}.header--even+.expandable{--parent-padding-inline-start--even:calc(\n    var(--parent-padding-inline-start--odd, 0px) + var(--tab-width)\n  )}.header--even .dashed-line{--inset-inline-start:calc(\n    var(--parent-padding-inline-start--odd, 0px) +\n      var(--parent-checkbox-offset) + var(--parent-expandable-offset)\n  )}.header--even-expandable{--padding-inline-start:calc(\n        var(--parent-padding-inline-start--odd, 0px) + var(--tab-width) - calc(\n    var(--expandable-button-width) + 5px\n  )\n      )}.header--even-expandable+.expandable{--parent-padding-inline-start--even:calc(\n        var(--parent-padding-inline-start--odd, 0px) + var(--tab-width) - calc(\n    var(--expandable-button-width) + 5px\n  )\n      )}.header--odd{--padding-inline-start:calc(\n    var(--parent-padding-inline-start--even, 0px) + var(--tab-width)\n  )}.header--odd+.expandable{--parent-padding-inline-start--odd:calc(\n    var(--parent-padding-inline-start--even, 0px) + var(--tab-width)\n  )}.header--odd .dashed-line{--inset-inline-start:calc(\n    var(--parent-padding-inline-start--even, 0px) +\n      var(--parent-checkbox-offset) + var(--parent-expandable-offset)\n  )}.header--odd-expandable{--padding-inline-start:calc(\n        var(--parent-padding-inline-start--even, 0px) + var(--tab-width) - calc(\n    var(--expandable-button-width) + 5px\n  )\n      )}.header--odd-expandable+.expandable{--parent-padding-inline-start--odd:calc(\n        var(--parent-padding-inline-start--even, 0px) + var(--tab-width) - calc(\n    var(--expandable-button-width) + 5px\n  )\n      )}.header--level-0{--padding-inline-start:0px}.header--level-0+.expandable{--parent-padding-inline-start--even:0px}.header--expandable-offset{--own-offset:calc(\n    var(--expandable-button-width) + 5px\n  )}.header--expandable-offset+.expandable{--parent-expandable-offset:calc(var(--expandable-button-width) / 2)}.header--checkbox-offset+.expandable{--parent-checkbox-offset:calc(var(--checkbox-size) / 2);--parent-negative-checkbox-offset:calc(var(--checkbox-size) / 2)}.dashed-line{position:absolute;inset-inline-start:calc( var(--inset-inline-start) + var(--ch-tree-x-list-item-dashed-line--offset) );height:1px;width:calc( var(--tab-width) - var(--parent-checkbox-offset) - var(--parent-expandable-offset) - var(--own-offset) - var(--ch-tree-x-list-item-dashed-line--offset) - 4px );border:0 dashed #a9a9a9;border-block-end-width:1px;pointer-events:none;content-visibility:hidden;z-index:1}.last-all-line{inset-block-start:0;height:calc(100% - var(--distance-to-checkbox));border-inline-start-width:1px;border-end-start-radius:2px}.last-line{inset-block-start:0;height:100%;border-inline-start-width:1px;border-style:solid;border-block-end:unset}.expandable-button{display:grid;place-items:center;width:var(--expandable-button-width);height:var(--expandable-button-width);margin-inline-end:5px;z-index:1;content-visibility:auto;contain-intrinsic-size:auto var(--expandable-button-width)}.expandable-button::before{content:\"\";width:calc(100% - 2px);height:calc(100% - 2px);background-color:currentColor;-webkit-mask-size:calc(var(--expandable-button-width) - 2px)}.expandable-button--collapsed::before{-webkit-mask-image:url('data:image/svg+xml,<svg viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M14.15,8.5H8.54v5.61h-1V8.5H1.93v-1H7.54V1.89h1V7.5h5.61Z\"/></svg>')}.expandable-button--expanded::before{-webkit-mask-image:url('data:image/svg+xml,<svg viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M14.15,8.5H1.93v-1H14.15Z\"/></svg>')}.expandable-button:focus-visible{outline:1px solid #000}.checkbox{margin-inline-end:5px}.checkbox::part(container){width:var(--checkbox-size);height:var(--checkbox-size)}.action{display:grid;grid-template:\"left-img text right-img\"/max-content 1fr max-content;align-items:center;height:100%;flex:1}.readonly-mode{padding-block:0.75px}.left-img,.right-img{display:block;width:0.875em;height:0.875em;content-visibility:auto;contain-intrinsic-size:auto 0.875em}.left-img{grid-area:left-img;margin-inline-end:5px}.right-img{grid-area:right-img;margin-inline-start:5px}.edit-name{grid-area:text;width:100%;height:100%;background-color:unset;padding:0;margin:0;border:1px solid currentColor;font:unset;outline:unset}.downloading{width:0.75em;height:0.75em;margin-inline-start:8px;border:2px solid currentColor;border-inline-start-color:transparent;border-radius:50%;opacity:0.75;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.expandable{--parent-expandable-offset:0px;--parent-negative-checkbox-offset:0px;--parent-checkbox-offset:0px;display:grid;grid-template-rows:0fr;content-visibility:auto;contain-intrinsic-size:auto 100px}.expanded{grid-template-rows:1fr}:not(.expanded) ::slotted([slot=tree]){display:none;overflow:hidden;content-visibility:hidden}";
+const treeXListItemCss = ":where(button){all:unset;display:flex;user-select:none;touch-action:manipulation;-webkit-user-drag:element}*,::before,::after{box-sizing:border-box}:host{--checkbox-size:1em;--expandable-button-width:0.75em;--ch-tree-x-list-item-dashed-line--offset:0px;--tab-width:calc(\n    var(--checkbox-size) + var(--expandable-button-width) +\n      (5px * 2)\n  );display:grid;grid-template-rows:min-content;overflow:hidden}.header{--own-offset:0px;display:flex;align-items:center;min-height:calc(1em + 6px);padding-inline-start:var(--padding-inline-start)}.header--disabled{opacity:0.5;pointer-events:none}.header--even{--padding-inline-start:calc(\n    var(--parent-padding-inline-start--odd, 0px) + var(--tab-width)\n  )}.header--even+.expandable{--parent-padding-inline-start--even:calc(\n    var(--parent-padding-inline-start--odd, 0px) + var(--tab-width)\n  )}.header--even .dashed-line{--inset-inline-start:calc(\n    var(--parent-padding-inline-start--odd, 0px) +\n      var(--parent-checkbox-offset) + var(--parent-expandable-offset)\n  )}.header--even-expandable{--padding-inline-start:calc(\n        var(--parent-padding-inline-start--odd, 0px) + var(--tab-width) - calc(\n    var(--expandable-button-width) + 5px\n  )\n      )}.header--even-expandable+.expandable{--parent-padding-inline-start--even:calc(\n        var(--parent-padding-inline-start--odd, 0px) + var(--tab-width) - calc(\n    var(--expandable-button-width) + 5px\n  )\n      )}.header--odd{--padding-inline-start:calc(\n    var(--parent-padding-inline-start--even, 0px) + var(--tab-width)\n  )}.header--odd+.expandable{--parent-padding-inline-start--odd:calc(\n    var(--parent-padding-inline-start--even, 0px) + var(--tab-width)\n  )}.header--odd .dashed-line{--inset-inline-start:calc(\n    var(--parent-padding-inline-start--even, 0px) +\n      var(--parent-checkbox-offset) + var(--parent-expandable-offset)\n  )}.header--odd-expandable{--padding-inline-start:calc(\n        var(--parent-padding-inline-start--even, 0px) + var(--tab-width) - calc(\n    var(--expandable-button-width) + 5px\n  )\n      )}.header--odd-expandable+.expandable{--parent-padding-inline-start--odd:calc(\n        var(--parent-padding-inline-start--even, 0px) + var(--tab-width) - calc(\n    var(--expandable-button-width) + 5px\n  )\n      )}.header--level-0{--padding-inline-start:0px}.header--level-0+.expandable{--parent-padding-inline-start--even:0px}.header--expandable-offset{--own-offset:calc(\n    var(--expandable-button-width) + 5px\n  )}.header--expandable-offset+.expandable{--parent-expandable-offset:calc(var(--expandable-button-width) / 2)}.header--checkbox-offset+.expandable{--parent-checkbox-offset:calc(var(--checkbox-size) / 2);--parent-negative-checkbox-offset:calc(var(--checkbox-size) / 2)}.dashed-line{position:absolute;inset-inline-start:calc( var(--inset-inline-start) + var(--ch-tree-x-list-item-dashed-line--offset) );height:1px;width:calc( var(--tab-width) - var(--parent-checkbox-offset) - var(--parent-expandable-offset) - var(--own-offset) - var(--ch-tree-x-list-item-dashed-line--offset) - 4px );border:0 dashed color-mix(in srgb, currentColor 65%, transparent);border-block-end-width:1px;pointer-events:none;content-visibility:hidden;z-index:1}.last-all-line{inset-block-start:0;height:calc(100% - var(--distance-to-checkbox));border-inline-start-width:1px;border-end-start-radius:2px}.last-line{inset-block-start:0;height:100%;border-inline-start-width:1px;border-style:solid;border-block-end:unset}.expandable-button{display:grid;place-items:center;width:var(--expandable-button-width);height:var(--expandable-button-width);margin-inline-end:5px;z-index:1;cursor:pointer;content-visibility:auto;contain-intrinsic-size:auto var(--expandable-button-width)}.expandable-button::before{content:\"\";width:calc(100% - 2px);height:calc(100% - 2px);background-color:currentColor;-webkit-mask-size:calc(var(--expandable-button-width) - 2px)}.expandable-button--collapsed::before{-webkit-mask-image:url('data:image/svg+xml,<svg viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M14.15,8.5H8.54v5.61h-1V8.5H1.93v-1H7.54V1.89h1V7.5h5.61Z\"/></svg>')}.expandable-button--expanded::before{-webkit-mask-image:url('data:image/svg+xml,<svg viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M14.15,8.5H1.93v-1H14.15Z\"/></svg>')}.expandable-button:focus-visible{outline:1px solid #000}.checkbox{margin-inline-end:5px}.checkbox::part(container){width:var(--checkbox-size);height:var(--checkbox-size)}.action{display:grid;grid-template:\"left-img text right-img\"/max-content 1fr max-content;align-items:center;height:100%;flex:1;cursor:pointer}.readonly-mode{padding-block:0.75px}.left-img,.right-img{display:block;width:0.875em;height:0.875em;content-visibility:auto;contain-intrinsic-size:auto 0.875em}.left-img{grid-area:left-img;margin-inline-end:5px}.right-img{grid-area:right-img;margin-inline-start:5px}.edit-name{grid-area:text;width:100%;height:100%;padding:0;margin:0;background-color:unset;color:unset;border:1px solid currentColor;font:unset;outline:unset}.downloading{width:0.75em;height:0.75em;margin-inline-start:8px;border:2px solid currentColor;border-inline-start-color:transparent;border-radius:50%;opacity:0.75;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.expandable{--parent-expandable-offset:0px;--parent-negative-checkbox-offset:0px;--parent-checkbox-offset:0px;display:grid;grid-template-rows:0fr;content-visibility:auto;contain-intrinsic-size:auto 100px}.expanded{grid-template-rows:1fr}:not(.expanded) ::slotted([slot=tree]){display:none;overflow:hidden;content-visibility:hidden}";
 
 const resetDragImage = new Image();
+const INITIAL_LEVEL = 0;
 // Selectors
 const TREE_ITEM_TAG_NAME = "ch-tree-x-list-item";
 const DIRECT_TREE_ITEM_CHILDREN = `:scope>*>${TREE_ITEM_TAG_NAME}`;
@@ -568,6 +568,17 @@ const LAST_SUB_ITEM = `:scope>*>${TREE_ITEM_TAG_NAME}:last-child`;
 const EXPANDABLE_ID = "expandable";
 const ENTER_KEY = "Enter";
 const ESCAPE_KEY = "Escape";
+// Export Parts
+const getCheckboxExportPart = (part) => `${part}:checkbox__${part}`;
+const CHECKBOX_EXPORT_PARTS = [
+  "container",
+  "input",
+  "option",
+  "checked",
+  "indeterminate"
+]
+  .map(getCheckboxExportPart)
+  .join(",");
 const ChTreeXListItem = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
@@ -648,7 +659,7 @@ const ChTreeXListItem = class {
     /**
      * Level in the tree at which the item is placed.
      */
-    this.level = 0;
+    this.level = INITIAL_LEVEL;
     /**
      * `true` if the checkbox's value is indeterminate.
      */
@@ -906,7 +917,7 @@ const ChTreeXListItem = class {
       return;
     }
     // The item is the last one of the tree at the first level
-    if (this.level === 0) {
+    if (this.level === INITIAL_LEVEL) {
       return;
     }
     // Otherwise, ask the parent to focus the next sibling
@@ -927,7 +938,7 @@ const ChTreeXListItem = class {
       return;
     }
     // The item is the first one of the tree at the first level
-    if (this.level === 0) {
+    if (this.level === INITIAL_LEVEL) {
       return;
     }
     // Otherwise, set focus in the parent element
@@ -1026,7 +1037,7 @@ const ChTreeXListItem = class {
       this.selectedItemChange.emit(this.getSelectedInfo(true, false, true));
     }
     // No need to update more the status
-    if (this.level === 0) {
+    if (this.level === INITIAL_LEVEL) {
       return;
     }
     // Update checkbox status
@@ -1053,11 +1064,14 @@ const ChTreeXListItem = class {
     const expandableButtonNotVisible = !this.leaf && !this.showExpandableButton;
     const acceptDrop = !this.dropDisabled && !this.leaf && this.dragState !== "start";
     const hasContent = !this.leaf && !this.lazyLoad;
-    const showAllLines = this.showLines === "all" && this.level !== 0;
-    const showLastLine = this.showLines === "last" && this.level !== 0 && this.lastItem;
-    return (index.h(index.Host, { role: "treeitem", "aria-selected": this.selected ? "true" : null, class: {
+    const showAllLines = this.showLines === "all" && this.level !== INITIAL_LEVEL;
+    const showLastLine = this.showLines === "last" &&
+      this.level !== INITIAL_LEVEL &&
+      this.lastItem;
+    return (index.h(index.Host, { role: "treeitem", "aria-level": this.level + 1, "aria-selected": this.selected ? "true" : null, class: {
         [TREE_ITEM_TAG_NAME + "--downloading"]: this.downloading,
         [TREE_ITEM_TAG_NAME + "--editing"]: this.editing,
+        [TREE_ITEM_TAG_NAME + "--not-editing"]: !this.editing,
         [TREE_ITEM_TAG_NAME + "--drag-" + this.dragState]: this.dragState !== "none" && this.dragState !== "start",
         [TREE_ITEM_TAG_NAME + "--deny-drop"]: this.leaf
       }, style: { "--level": `${this.level}` },
@@ -1072,14 +1086,14 @@ const ChTreeXListItem = class {
         "header--odd": !evenLevel,
         "header--even-expandable": evenLevel && expandableButtonVisible,
         "header--odd-expandable": !evenLevel && expandableButtonVisible,
-        "header--level-0": this.level === 0
+        "header--level-0": this.level === INITIAL_LEVEL
       }, part: `header${this.disabled ? " disabled" : ""}${this.selected ? " selected" : ""}`, type: "button", disabled: this.disabled, onClick: this.handleActionClick, onKeyDown: !this.editing ? this.handleActionKeyDown : null,
       // Drag and drop
       draggable: !this.dragDisabled, onDragStart: this.handleDragStart, onDragEnd: !this.dragDisabled ? this.handleDragEnd : null, ref: el => (this.headerRef = el) }, !this.leaf && this.showExpandableButton && (index.h("button", { type: "button", class: {
         "expandable-button": true,
         "expandable-button--expanded": this.expanded,
         "expandable-button--collapsed": !this.expanded
-      }, part: `expandable-button${this.disabled ? " disabled" : ""}${this.expanded ? " expanded" : " collapsed"}`, disabled: this.disabled, onClick: this.toggleExpand })), this.checkbox && (index.h("ch-checkbox", { accessibleName: this.caption, class: "checkbox", part: `checkbox${this.disabled ? " disabled" : ""}${this.checked ? " checked" : ""}${this.indeterminate ? " indeterminate" : ""}`, checkedValue: "true", disabled: this.disabled, indeterminate: this.indeterminate, unCheckedValue: "false", value: `${this.checked}`, onInput: this.handleCheckedChange })), this.customRender ? (index.h("slot", { name: "custom-content" })) : ([
+      }, part: `expandable-button${this.disabled ? " disabled" : ""}${this.expanded ? " expanded" : " collapsed"}`, disabled: this.disabled, onClick: this.toggleExpand })), this.checkbox && (index.h("ch-checkbox", { accessibleName: this.caption, class: "checkbox", exportparts: CHECKBOX_EXPORT_PARTS, part: `checkbox${this.disabled ? " disabled" : ""}${this.checked ? " checked" : ""}${this.indeterminate ? " indeterminate" : ""}`, checkedValue: "true", disabled: this.disabled, indeterminate: this.indeterminate, unCheckedValue: "false", value: `${this.checked}`, onInput: this.handleCheckedChange })), this.customRender ? (index.h("slot", { name: "custom-content" })) : ([
       index.h("div", { class: {
           action: true,
           "readonly-mode": !this.editing

package/dist/cjs/{ch-grid-action-refresh_6.cjs.entry.js → ch-grid-action-refresh_7.cjs.entry.js}

@@ -153,10 +153,24 @@ const ChPaginator = class {
   }
   loadElements() {
     this.elPages = this.el.querySelector("ch-paginator-pages");
-    this.elFirst = this.el.querySelector("ch-paginator-navigate[type='first']");
-    this.elPrevious = this.el.querySelector("ch-paginator-navigate[type='previous']");
-    this.elNext = this.el.querySelector("ch-paginator-navigate[type='next']");
-    this.elLast = this.el.querySelector("ch-paginator-navigate[type='last']");
+    this.el
+      .querySelectorAll("ch-paginator-navigate")
+      .forEach((el) => {
+      switch (el.type) {
+        case "first":
+          this.elFirst = el;
+          break;
+        case "previous":
+          this.elPrevious = el;
+          break;
+        case "next":
+          this.elNext = el;
+          break;
+        case "last":
+          this.elLast = el;
+          break;
+      }
+    });
   }
   render() {
     if (this.elPages) {
@@ -206,6 +220,155 @@ const ChPaginatorNavigate = class {
 };
 ChPaginatorNavigate.style = chPaginatorNavigateCss;
 
+const chPaginatorPagesCss = "button{all:unset}.pages{display:flex;align-items:center;list-style-type:none;margin:0;padding:0}";
+
+const ChPaginatorPages = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.pageChanged = index.createEvent(this, "pageChanged", 7);
+    /**
+     * The active page number.
+     */
+    this.page = 1;
+    /**
+     * The total number of pages.
+     */
+    this.totalPages = 1;
+    /**
+     * The maximum number of items to display in the pagination.
+     */
+    this.maxSize = 9;
+    /**
+     * Flag to render the first and last pages.
+     */
+    this.renderFirstLastPages = true;
+    /**
+     * The text to display for the dots.
+     */
+    this.textDots = "...";
+    this.clickHandler = (eventInfo) => {
+      const button = eventInfo.target;
+      this.page = parseInt(button.value);
+    };
+  }
+  pageHandler() {
+    this.pageChanged.emit({ page: this.page });
+  }
+  maxSizeHandler() {
+    this.validateMaxSize();
+  }
+  renderFirstLastPagesHandler() {
+    this.validateMaxSize();
+  }
+  componentDidUpdate() {
+    if (document.activeElement === this.el) {
+      this.buttonActive.focus();
+    }
+  }
+  keyDownHandler(eventInfo) {
+    switch (eventInfo.key) {
+      case "ArrowLeft":
+        this.page = Math.max(this.page - 1, 1);
+        break;
+      case "ArrowRight":
+        this.page = Math.min(this.page + 1, this.totalPages);
+        break;
+    }
+  }
+  focusHandler() {
+    this.buttonActive.focus();
+  }
+  getItems() {
+    const padLeft = Math.ceil((this.maxSize - 1) / 2);
+    const padRight = Math.floor((this.maxSize - 1) / 2);
+    let fillLeft, fillStart;
+    let fillRight, fillEnd;
+    if (this.maxSize === 0 || this.maxSize >= this.totalPages) {
+      fillStart = this.fillStart(false);
+      fillLeft = this.page - 1;
+      fillRight = this.totalPages - this.page;
+      fillEnd = this.fillEnd(false);
+    }
+    else if (this.page <= padLeft && this.page < this.totalPages - padRight) {
+      fillStart = this.fillStart(false);
+      fillLeft = this.page - 1;
+      fillEnd = this.fillEnd(true);
+      fillRight = padRight - fillEnd.length + (padLeft - fillLeft);
+    }
+    else if (this.page > padLeft && this.page < this.totalPages - padRight) {
+      fillStart = this.fillStart(true);
+      fillLeft = padLeft - fillStart.length;
+      fillEnd = this.fillEnd(true);
+      fillRight = padRight - fillEnd.length;
+    }
+    else if (this.page > padLeft && this.page >= this.totalPages - padRight) {
+      fillEnd = this.fillEnd(false);
+      fillRight = this.totalPages - this.page;
+      fillStart = this.fillStart(true);
+      fillLeft = padLeft - fillStart.length + padRight - fillRight;
+    }
+    const items = fillStart
+      .concat(this.getRangeItems(this.page - fillLeft, this.page - 1))
+      .concat([this.page])
+      .concat(this.getRangeItems(this.page + 1, this.page + fillRight))
+      .concat(fillEnd);
+    return {
+      items,
+      activeIndex: fillStart.length + fillLeft
+    };
+  }
+  fillStart(render) {
+    if (render) {
+      return this.renderFirstLastPages ? [1, this.textDots] : [this.textDots];
+    }
+    else {
+      return [];
+    }
+  }
+  fillEnd(render) {
+    if (render) {
+      return this.renderFirstLastPages
+        ? [this.textDots, this.totalPages]
+        : [this.textDots];
+    }
+    else {
+      return [];
+    }
+  }
+  getRangeItems(start, end) {
+    return Array.from({ length: end - start + 1 }, (_, i) => start + i);
+  }
+  validateMaxSize() {
+    if (this.maxSize > 0) {
+      if (!this.renderFirstLastPages && this.maxSize < 3) {
+        this.maxSize = 3;
+      }
+      else if (this.renderFirstLastPages && this.maxSize < 5) {
+        this.maxSize = 5;
+      }
+    }
+  }
+  render() {
+    const { items, activeIndex } = this.getItems();
+    return (index.h("ol", { part: "pages", class: "pages" }, items.map((item, i) => {
+      if (typeof item === "number") {
+        return (index.h("li", null, index.h("button", { part: `page button ${i === activeIndex ? "active" : ""}`, value: item, onClick: this.clickHandler, ref: el => (this.buttonActive =
+            i === activeIndex ? el : this.buttonActive) }, item)));
+      }
+      else {
+        return (index.h("li", null, index.h("button", { part: "page button dots", disabled: true }, item)));
+      }
+    })));
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "page": ["pageHandler"],
+    "maxSize": ["maxSizeHandler"],
+    "renderFirstLastPages": ["renderFirstLastPagesHandler"]
+  }; }
+};
+ChPaginatorPages.style = chPaginatorPagesCss;
+
 var GxControlType;
 (function (GxControlType) {
   GxControlType[GxControlType["EDIT"] = 1] = "EDIT";
@@ -362,4 +525,5 @@ exports.ch_grid_action_settings = ChGridActionSettings;
 exports.ch_grid_actionbar = ChGridActionbar;
 exports.ch_paginator = ChPaginator;
 exports.ch_paginator_navigate = ChPaginatorNavigate;
+exports.ch_paginator_pages = ChPaginatorPages;
 exports.gx_grid_chameleon_column_filter = GridChameleonColumnFilter;

package/dist/cjs/ch-icon_2.cjs.entry.js

@@ -125,6 +125,7 @@ const COLOR_MAPPINGS = {
   error: "color-error-dark",
   negative: "color-on-primary",
   onbackground: "color-on-background",
+  indeterminate: "color-primary-active",
   "primary-enabled": "color-primary-enabled",
   "primary-active": "color-primary-active",
   "primary-hover": "color-primary-hover",

package/dist/cjs/ch-suggest_4.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-5a32426a.js');
 const store = require('./store-0866de9f.js');
-const form = require('./form-a22de8f3.js');
+const form = require('./form-a2de5b1c.js');
 const classesNames = require('./classesNames-5b7c6ad4.js');
 
 const chSuggestCss = "*,::after,::before{box-sizing:border-box}:host{--window-max-height:none;--window-gap:50px}.main-wrapper{display:block}.label-input-wrapper{display:flex}.label-input-wrapper .input{flex:1}:host([label-position=start]) .label-input-wrapper{flex-direction:row}:host([label-position=above]) .label-input-wrapper{flex-direction:column}.input{background-color:unset;border:none;color:inherit;font:inherit;margin:0;padding:0;outline:0}.ch-window-container{position:relative}ch-window::part(window){width:100%;max-height:calc(var(--window-max-height) - var(--window-gap));overflow-y:auto}";
@@ -15,6 +15,7 @@ const ChSuggest = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.valueChanged = index.createEvent(this, "valueChanged", 7);
+    this.selectionChanged = index.createEvent(this, "selectionChanged", 7);
     this.keyEventsDictionary = {
       ArrowDown: (e) => {
         const newFocusedItem = this.getNewFocusedItem(e.currentFocusedItem, ARROW_DOWN$1);
@@ -175,8 +176,10 @@ const ChSuggest = class {
   // 6.COMPONENT LIFECYCLE EVENTS //
   // 7.LISTENERS //
   itemSelectedHandler(event) {
+    event.stopPropagation();
     this.value = event.detail.value;
     this.closeWindow();
+    this.selectionChanged.emit(event.detail);
   }
   focusChangeAttemptHandler(event) {
     const keyEventHandler = this.keyEventsDictionary[event.detail.code];
@@ -199,6 +202,7 @@ const ChSuggest = class {
   windowClosedHandler() {
     this.textInput.focus();
     this.windowHidden = true;
+    this.el.innerHTML = "";
   }
   // 9.PUBLIC METHODS API //
   /**
@@ -315,7 +319,7 @@ const ChSuggestListItem = class {
 };
 ChSuggestListItem.style = chSuggestListItemCss;
 
-const stylesCss = "@charset \"UTF-8\";:root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-01--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-02{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-02--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-03{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-03--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-04{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-04--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-05{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em}.gxg-title-05--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em;color:var(--color-on-primary)}.gxg-text{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-text--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-text--gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--gray-05)}.gxg-quote{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;font-style:italic}.gxg-quote--negative{color:var(--color-on-primary)}.gxg-link{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--color-primary-hover)}.gxg-link:active{color:var(--color-primary-active)}.gxg-link-gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04)}.gxg-link-gray:hover{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04);color:var(--gray-06)}.gxg-alert-error{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-error-dark);display:inline-block}.gxg-alert-warning{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-warning-dark);display:inline-block}.gxg-alert-success{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-success-dark);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-button-styles{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:6px;height:6px}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gxg-scrollbar::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}:host(.gxg-validation--warning) .form-element{border-color:var(--color-warning-dark)}:host(.gxg-validation--warning) .form-element:focus{outline-color:var(--color-warning-dark);border-color:var(--color-warning-dark)}:host(.gxg-validation--warning) .form-element:focus+.checkmark{--checkmark-border-color:var(--color-warning-dark)}:host(.gxg-validation--error) .form-element{border-color:var(--color-error-dark)}:host(.gxg-validation--error) .form-element:focus{outline-color:var(--color-error-dark);border-color:var(--color-error-dark)}:host(.gxg-validation--error) .form-element:focus+.checkmark{--checkmark-border-color:var(--color-error-dark)}:host(.gxg-validation--success) .form-element{border-color:var(--color-success-dark)}:host(.gxg-validation--success) .form-element:focus{outline-color:var(--color-success-dark);border-color:var(--color-success-dark)}:host(.gxg-validation--success) .form-element:focus+.checkmark{--checkmark-border-color:var(--color-success-dark)}ch-suggest{font-family:var(--font-family-primary);font-size:var(--font-size-lg);color:var(--color-on-background);}ch-suggest::-webkit-scrollbar{width:6px;height:6px}ch-suggest::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}ch-suggest::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}ch-suggest::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}ch-suggest ::-webkit-scrollbar{width:6px;height:6px}ch-suggest ::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}ch-suggest ::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}ch-suggest ::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}ch-suggest::part(label){font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;display:flex;align-items:center;cursor:default;font-size:inherit}ch-suggest[label-position=start]::part(label){margin-inline-end:var(--gxg-label-margin-horizontal)}ch-suggest[label-position=above]::part(label){margin-block-end:var(--gxg-label-margin-vertical)}ch-suggest::part(input){height:var(--spacing-comp-05);border:var(--border-width-sm) solid var(--gxg-border-color--regular);padding:var(--spacing-comp-01) var(--spacing-comp-02);box-sizing:border-box;background-color:var(--color-background)}ch-suggest::part(input):focus{outline-style:solid;outline-color:var(--gxg-border-color--focused);outline-width:var(--border-width-md);outline-offset:-2px}ch-suggest::part(input):focus{outline-style:solid;outline-color:var(--gxg-border-color--focused);outline-width:var(--border-width-md);outline-offset:-2px}ch-suggest::part(header){display:block;padding-block-end:var(--spacing-comp-02);display:flex;justify-content:flex-end}ch-suggest::part(close-button){height:var(--spacing-comp-05);width:var(--spacing-comp-05);background-color:var(--color-background);color:var(--color-primary-hover);border:1px solid var(--color-primary-hover);box-sizing:border-box;cursor:pointer;display:block}ch-suggest::part(close-button):hover{background-color:var(--color-primary-hover-opacity-01)}ch-suggest::part(close-button)::after{content:\"✖\";width:100%;display:block;line-height:24px;text-align:center}ch-suggest::part(close-button):focus{outline-style:solid;outline-color:var(--gxg-border-color--focused);outline-width:var(--border-width-md);outline-offset:-2px}ch-suggest::part(dropdown){background-color:var(--color-background);margin-top:var(--spacing-comp-01);padding:var(--spacing-comp-02);box-shadow:var(--box-shadow-02);}ch-suggest::part(dropdown)::-webkit-scrollbar{width:6px;height:6px}ch-suggest::part(dropdown)::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}ch-suggest::part(dropdown)::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}ch-suggest::part(dropdown)::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}ch-suggest::part(dropdown) ::-webkit-scrollbar{width:6px;height:6px}ch-suggest::part(dropdown) ::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}ch-suggest::part(dropdown) ::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}ch-suggest::part(dropdown) ::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.messages-wrapper{margin-top:var(--spacing-comp-02);display:flex;gap:var(--spacing-comp-01);flex-direction:column}gxg-suggest.gxg-validation--success ch-suggest::part(input){outline-color:var(--color-success-dark);border-color:var(--color-success-dark)}gxg-suggest.gxg-validation--success ch-suggest::part(input)+.checkmark{--checkmark-border-color:var(--color-success-dark)}gxg-suggest.gxg-validation--warning ch-suggest::part(input){outline-color:var(--color-warning-dark);border-color:var(--color-warning-dark)}gxg-suggest.gxg-validation--warning ch-suggest::part(input)+.checkmark{--checkmark-border-color:var(--color-warning-dark)}gxg-suggest.gxg-validation--error ch-suggest::part(input){outline-color:var(--color-error-dark);border-color:var(--color-error-dark)}gxg-suggest.gxg-validation--error ch-suggest::part(input)+.checkmark{--checkmark-border-color:var(--color-error-dark)}gxg-suggest.gxg--disabled ch-suggest{pointer-events:none}gxg-suggest.gxg--disabled ch-suggest::part(input){background-color:var(--gray-01);color:var(--color-on-disabled)}gxg-suggest[ellipsis]:not([ellipsis=false]) ch-suggest-list-item::part(content-wrapper){white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}ch-suggest-list{margin-block-start:var(--spacing-comp-02);font-family:inherit;border:var(--border-width-sm) solid var(--gxg-border-color--regular)}ch-suggest-list:first-child{margin-block-start:0}ch-suggest-list:last-child{margin-block-end:0}ch-suggest-list::part(title){text-transform:uppercase;font-weight:var(--font-weight-semibold);margin:var(--spacing-comp-01) 0 0 0;padding:var(--spacing-comp-01) var(--spacing-comp-02)}ch-suggest-list:first-child{margin-block-start:0}ch-suggest-list+ch-suggest-list{margin-block-start:0;border-block-start:0}ch-suggest-list+ch-suggest-list::part(title){margin-block-start:0}ch-suggest-list-item{}ch-suggest-list-item::part(button){padding:var(--spacing-comp-01) var(--spacing-comp-02);align-items:center;gap:var(--spacing-comp-01);box-sizing:border-box}ch-suggest-list-item::part(button):focus{outline-style:solid;outline-color:var(--gxg-border-color--focused);outline-width:var(--border-width-md);outline-offset:-2px}ch-suggest-list-item::part(description)::before{content:\" - \"}ch-suggest-list-item gxg-icon::part(ch-icon){--icon-size:16px;margin-right:2px}ch-suggest-list-item:hover{background-color:var(--gxg-background-color--hover)}";
+const stylesCss = "@charset \"UTF-8\";:root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-01--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-02{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-02--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-03{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-03--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-04{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-04--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-05{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em}.gxg-title-05--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em;color:var(--color-on-primary)}.gxg-text{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-text--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-text--gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--gray-05)}.gxg-quote{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;font-style:italic}.gxg-quote--negative{color:var(--color-on-primary)}.gxg-link{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--color-primary-hover)}.gxg-link:active{color:var(--color-primary-active)}.gxg-link-gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04)}.gxg-link-gray:hover{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04);color:var(--gray-06)}.gxg-alert-error{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-error-dark);display:inline-block}.gxg-alert-warning{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-warning-dark);display:inline-block}.gxg-alert-success{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-success-dark);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-button-styles{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:6px;height:6px}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gxg-scrollbar::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}:host(.gxg-validation--warning) .form-element{border-color:var(--color-warning-dark)}:host(.gxg-validation--warning) .form-element:focus{outline-color:var(--color-warning-dark);border-color:var(--color-warning-dark)}:host(.gxg-validation--warning) .form-element:focus+.checkmark{--checkmark-border-color:var(--color-warning-dark)}:host(.gxg-validation--error) .form-element{border-color:var(--color-error-dark)}:host(.gxg-validation--error) .form-element:focus{outline-color:var(--color-error-dark);border-color:var(--color-error-dark)}:host(.gxg-validation--error) .form-element:focus+.checkmark{--checkmark-border-color:var(--color-error-dark)}:host(.gxg-validation--success) .form-element{border-color:var(--color-success-dark)}:host(.gxg-validation--success) .form-element:focus{outline-color:var(--color-success-dark);border-color:var(--color-success-dark)}:host(.gxg-validation--success) .form-element:focus+.checkmark{--checkmark-border-color:var(--color-success-dark)}.tooltip-outer-wrapper{display:grid;grid-template-columns:0fr;transition:grid-template-columns var(--timing-02)}:host(.tooltip--visible) .tooltip-outer-wrapper{grid-template-columns:1fr}.tooltip-inner-wrapper gxg-icon{display:flex;position:relative !important;top:0 !important;transform:none !important}ch-suggest{font-family:var(--font-family-primary);font-size:var(--font-size-lg);color:var(--color-on-background);}ch-suggest::-webkit-scrollbar{width:6px;height:6px}ch-suggest::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}ch-suggest::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}ch-suggest::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}ch-suggest ::-webkit-scrollbar{width:6px;height:6px}ch-suggest ::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}ch-suggest ::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}ch-suggest ::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}ch-suggest::part(label){font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;display:flex;align-items:center;cursor:default;font-size:inherit}ch-suggest[label-position=start]::part(label){margin-inline-end:var(--gxg-label-margin-horizontal)}ch-suggest[label-position=above]::part(label){margin-block-end:var(--gxg-label-margin-vertical)}ch-suggest::part(input){height:var(--spacing-comp-05);border:var(--border-width-sm) solid var(--gxg-border-color--regular);padding:var(--spacing-comp-01) var(--spacing-comp-02);box-sizing:border-box;background-color:var(--color-background)}ch-suggest::part(input):focus{outline-style:solid;outline-color:var(--gxg-border-color--focused);outline-width:var(--border-width-md);outline-offset:-2px}ch-suggest::part(input):focus{outline-style:solid;outline-color:var(--gxg-border-color--focused);outline-width:var(--border-width-md);outline-offset:-2px}ch-suggest::part(header){display:block;padding-block-end:var(--spacing-comp-02);display:flex;justify-content:flex-end}ch-suggest::part(close-button){height:var(--spacing-comp-05);width:var(--spacing-comp-05);background-color:var(--color-background);color:var(--color-primary-hover);border:1px solid var(--color-primary-hover);box-sizing:border-box;cursor:pointer;display:block}ch-suggest::part(close-button):hover{background-color:var(--color-primary-hover-opacity-01)}ch-suggest::part(close-button)::after{content:\"✖\";width:100%;display:block;line-height:24px;text-align:center}ch-suggest::part(close-button):focus{outline-style:solid;outline-color:var(--gxg-border-color--focused);outline-width:var(--border-width-md);outline-offset:-2px}ch-suggest::part(dropdown){background-color:var(--color-background);margin-top:var(--spacing-comp-01);padding:var(--spacing-comp-02);box-shadow:var(--box-shadow-02);}ch-suggest::part(dropdown)::-webkit-scrollbar{width:6px;height:6px}ch-suggest::part(dropdown)::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}ch-suggest::part(dropdown)::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}ch-suggest::part(dropdown)::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}ch-suggest::part(dropdown) ::-webkit-scrollbar{width:6px;height:6px}ch-suggest::part(dropdown) ::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}ch-suggest::part(dropdown) ::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}ch-suggest::part(dropdown) ::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.messages-wrapper{margin-top:var(--spacing-comp-02);display:flex;gap:var(--spacing-comp-01);flex-direction:column}gxg-suggest.gxg-validation--success ch-suggest::part(input){outline-color:var(--color-success-dark);border-color:var(--color-success-dark)}gxg-suggest.gxg-validation--success ch-suggest::part(input)+.checkmark{--checkmark-border-color:var(--color-success-dark)}gxg-suggest.gxg-validation--warning ch-suggest::part(input){outline-color:var(--color-warning-dark);border-color:var(--color-warning-dark)}gxg-suggest.gxg-validation--warning ch-suggest::part(input)+.checkmark{--checkmark-border-color:var(--color-warning-dark)}gxg-suggest.gxg-validation--error ch-suggest::part(input){outline-color:var(--color-error-dark);border-color:var(--color-error-dark)}gxg-suggest.gxg-validation--error ch-suggest::part(input)+.checkmark{--checkmark-border-color:var(--color-error-dark)}gxg-suggest.gxg--disabled ch-suggest{pointer-events:none}gxg-suggest.gxg--disabled ch-suggest::part(input){background-color:var(--gray-01);color:var(--color-on-disabled)}gxg-suggest[ellipsis]:not([ellipsis=false]) ch-suggest-list-item::part(content-wrapper){white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}ch-suggest-list{margin-block-start:var(--spacing-comp-02);font-family:inherit;border:var(--border-width-sm) solid var(--gxg-border-color--regular)}ch-suggest-list:first-child{margin-block-start:0}ch-suggest-list:last-child{margin-block-end:0}ch-suggest-list::part(title){text-transform:uppercase;font-weight:var(--font-weight-semibold);margin:var(--spacing-comp-01) 0 0 0;padding:var(--spacing-comp-01) var(--spacing-comp-02)}ch-suggest-list:first-child{margin-block-start:0}ch-suggest-list+ch-suggest-list{margin-block-start:0;border-block-start:0}ch-suggest-list+ch-suggest-list::part(title){margin-block-start:0}ch-suggest-list-item{}ch-suggest-list-item::part(button){padding:var(--spacing-comp-01) var(--spacing-comp-02);align-items:center;gap:var(--spacing-comp-01);box-sizing:border-box}ch-suggest-list-item::part(button):focus{outline-style:solid;outline-color:var(--gxg-border-color--focused);outline-width:var(--border-width-md);outline-offset:-2px}ch-suggest-list-item::part(description)::before{content:\" - \"}ch-suggest-list-item gxg-icon::part(ch-icon){--icon-size:16px;margin-right:2px}ch-suggest-list-item:hover{background-color:var(--gxg-background-color--hover)}";
 
 const GxgSuggest = class {
   constructor(hostRef) {