@genexus/genexus-ide-ui 0.0.58 → 0.0.59

package/dist/components/tree-view.js

@@ -5,7 +5,7 @@ import { d as defineCustomElement$1 } from './tree-x-list-item.js';
 
 const resolveImgPath = (img) => `/build/icon-assets/${img}.svg`;
 
-const treeViewCss = ":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}gxg-tree-view{font-family:var(--font-family-primary);font-size:var(--font-size-lg);font-weight:var(--font-weight-regular);color:var(--color-on-background);display:contents}ch-tree-x{}ch-tree-x::-webkit-scrollbar{width:6px;height:6px}ch-tree-x::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}ch-tree-x::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}ch-tree-x::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}ch-tree-x>div.ch-tree-x-container{position:relative;width:100%}ch-tree-x-list-item{--expandable-button-width:var(--spacing-comp-04)}ch-tree-x-list-item.tree-view-item--folder::part(action)::before,ch-tree-x-list-item.tree-view-item--module::part(action)::before{grid-area:left-img;content:\"\";width:14px;height:14px;margin-inline-end:4px;background-repeat:no-repeat}ch-tree-x-list-item.tree-view-item--folder::part(action)::before{background-image:url(\"/build/icon-assets/objects/folder.svg\")}ch-tree-x-list-item.tree-view-item--folder::part(action expanded)::before{background-image:url(\"/build/icon-assets/objects/folder-open.svg\")}ch-tree-x-list-item.tree-view-item--module::part(action)::before{background-image:url(\"/build/icon-assets/objects/module.svg\")}ch-tree-x-list-item.tree-view-item--module::part(action expanded)::before{background-image:url(\"/build/icon-assets/objects/module-open.svg\")}ch-tree-x-list-item .tree-view-item--pending-commit::part(action)::before{content:\"\";position:relative;z-index:1;grid-area:left-img;width:5px;height:5px;align-self:end;margin-block-end:3px;margin-inline-start:1px;background-color:#2c3b92;border-radius:50%}ch-tree-x-list-item::part(header){padding-inline-end:calc(var(--spacing-comp-02) * 0.65);border:1px solid transparent;height:var(--spacing-comp-05)}ch-tree-x-list-item::part(header):focus{outline-style:solid;outline-color:var(--gxg-border-color--focused);outline-width:var(--border-width-md);outline-offset:-2px}ch-tree-x-list-item[selected]::part(header){background-color:var(--gxg-background-color--selected)}ch-tree-x-list-item[selected]::part(header):hover{background-color:var(--gxg-background-color--selected-hover)}ch-tree-x-list-item::part(expandable-button){background-color:var(--color-hover);margin-inline-start:var(--spacing-comp-01)}ch-tree-x-list-item::part(expandable-button)::before{background-color:var(--gray-04);-webkit-mask-position:center;-webkit-mask-repeat:no-repeat}ch-tree-x-list-item::part(expandable-button):hover{background-color:var(--color-background)}ch-tree-x-list-item::part(expandable-button):focus{outline-style:solid;outline-color:var(--gxg-border-color--focused);outline-width:var(--border-width-md);outline-offset:0}ch-tree-x-list-item::part(action){text-transform:capitalize}ch-tree-x-list-item::part(left-img){width:var(--spacing-comp-04);height:var(--spacing-comp-04)}ch-tree-x-list-item::part(downloading){width:var(--spacing-comp-03);height:var(--spacing-comp-03);border:var(--border-width-md) solid var(--color-primary-enabled);border-inline-start-color:transparent}.ch-tree-x-drag-info{padding-inline:6px;padding-block:2px;background-color:#cfdee6;border:1px solid #0266a0;border-radius:10px;font-size:8px}";
+const treeViewCss = ":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:var(--gxg-scrollbar-width)}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb{background:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--gxg-scrollbar-track-thumb-hover-background)}gxg-tree-view{font-family:var(--font-family-primary);font-size:var(--font-size-lg);font-weight:var(--font-weight-regular);color:var(--color-on-background);display:contents}gxg-tree-view ch-tree-x .ch-tree-x-container{padding:var(--spacing-comp-01)}gxg-tree-view[position-relative] ch-tree-x .ch-tree-x-container{position:relative;width:100%}gxg-tree-view[no-padding] ch-tree-x .ch-tree-x-container{padding:0}ch-tree-x-list-item{--checkbox-size:var(--gxg-checkbox-size);--expandable-button-width:var(--spacing-comp-04)}ch-tree-x-list-item .tree-view-item::part(dashed-line){border-color:var(--gray-02)}ch-tree-x-list-item.tree-view-item--folder::part(action)::before,ch-tree-x-list-item.tree-view-item--module::part(action)::before{grid-area:left-img;content:\"\";width:14px;height:14px;margin-inline-end:4px;background-repeat:no-repeat}ch-tree-x-list-item.tree-view-item--folder::part(action)::before{background-image:url(\"/build/icon-assets/objects/folder.svg\")}ch-tree-x-list-item.tree-view-item--folder::part(action expanded)::before{background-image:url(\"/build/icon-assets/objects/folder-open.svg\")}ch-tree-x-list-item.tree-view-item--module::part(action)::before{background-image:url(\"/build/icon-assets/objects/module.svg\")}ch-tree-x-list-item.tree-view-item--module::part(action expanded)::before{background-image:url(\"/build/icon-assets/objects/module-open.svg\")}ch-tree-x-list-item .tree-view-item--pending-commit::part(action)::before{content:\"\";position:relative;z-index:1;grid-area:left-img;width:5px;height:5px;align-self:end;margin-block-end:3px;margin-inline-start:1px;background-color:#2c3b92;border-radius:50%}ch-tree-x-list-item::part(header):first-child{margin-inline-start:var(--spacing-comp-01)}ch-tree-x-list-item::part(header){padding-inline-end:calc(var(--spacing-comp-02) * 0.65);border:1px solid transparent;height:var(--spacing-comp-05);display:flex;gap:var(--spacing-comp-01)}ch-tree-x-list-item::part(header):hover{background-color:var(--gxg-background-color--hover);color:var(--gxg-color--hover)}ch-tree-x-list-item::part(header):focus{outline-style:solid;outline-color:var(--gxg-border-color--focused);outline-width:var(--border-width-md);outline-offset:-2px}ch-tree-x-list-item[selected]::part(header){background-color:var(--gxg-background-color--selected)}ch-tree-x-list-item[selected]::part(header):hover{background-color:var(--gxg-background-color--selected-hover)}ch-tree-x-list-item::part(expandable-button){background-color:var(--color-hover);margin-inline-end:0}ch-tree-x-list-item::part(expandable-button)::before{background-color:var(--gray-04);-webkit-mask-position:center;-webkit-mask-repeat:no-repeat}ch-tree-x-list-item::part(expandable-button):hover{background-color:var(--color-background)}ch-tree-x-list-item::part(expandable-button):focus{outline-style:solid;outline-color:var(--gxg-border-color--focused);outline-width:var(--border-width-md);outline-offset:0}ch-tree-x-list-item::part(checkbox){margin-inline-end:0}ch-tree-x-list-item::part(checkbox__container){display:block;width:var(--gxg-checkbox-size);height:var(--gxg-checkbox-size);border:none;position:relative;box-shadow:none !important}ch-tree-x-list-item::part(checkbox__input){position:absolute;opacity:0;cursor:pointer;height:100%;width:100%;z-index:1}ch-tree-x-list-item::part(checkbox__option){display:inline-block;position:absolute;height:100%;width:100%;border-width:var(--border-width-sm);border-style:var(--border-style-regular);border-radius:var(--border-radius-md);border-color:var(--gray-04);box-sizing:border-box;flex-shrink:0;background:var(--color-background);opacity:1;left:0;top:0;transform:none;-webkit-mask:none}ch-tree-x-list-item::part(checkbox__option):after{position:absolute;display:block;content:\"\";border:solid;border-color:transparent}ch-tree-x-list-item::part(checkbox__option checkbox__checked):after{left:5.5px;top:3px;width:4px;height:7px;border-width:0 2px 2px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);border-color:var(--color-primary-active);transition-property:border-color;transition-duration:var(--ui-animaton-speed);transition-timing-function:ease}ch-tree-x-list-item::part(checkbox__option checkbox__indeterminate):after{left:50%;top:50%;width:8px;height:1.5px;border:0;background-color:var(--color-primary-active);-webkit-transform:rotate(0) translateY(-50%) translateX(-50%);-ms-transform:rotate(0) translateY(-50%) translateX(-50%);transform:rotate(0) translateY(-50%) translateX(-50%)}ch-tree-x-list-item::part(action){text-transform:capitalize;display:flex;gap:var(--spacing-comp-01)}ch-tree-x-list-item::part(left-img){width:var(--spacing-comp-04);height:var(--spacing-comp-04);margin-inline-end:0}ch-tree-x-list-item::part(downloading){width:var(--spacing-comp-03);height:var(--spacing-comp-03);border:var(--border-width-md) solid var(--color-primary-enabled);border-inline-start-color:transparent}.ch-tree-x-drag-info{padding-inline:6px;padding-block:2px;background-color:#cfdee6;border:1px solid #0266a0;border-radius:10px;font-size:8px}";
 
 const DEFAULT_DRAG_DISABLED_VALUE = false;
 const DEFAULT_DROP_DISABLED_VALUE = false;
@@ -20,17 +20,37 @@ const GxgTreeView = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
+    this.checkedItemsChange = createEvent(this, "checkedItemsChange", 7);
     this.itemContextmenu = createEvent(this, "itemContextmenu", 7);
     this.itemOpenReference = createEvent(this, "itemOpenReference", 7);
     this.selectedItemsChange = createEvent(this, "selectedItemsChange", 7);
     // UI Models
     this.flattenedTreeModel = new Map();
+    this.flattenedCheckboxTreeModel = new Map();
     this.selectedItems = new Set();
     /**
      * This property lets you specify if the tree is waiting to process the drop
      * of items.
      */
     this.waitDropProcessing = false;
+    /**
+     * Removes the default padding on '.ch-tree-x-container' (Added by Gemini)
+     */
+    this.noPadding = false;
+    /**
+     * A temporary fix to force the ch-tree-x tree-x-container to be visible without position:absolute (Added by Gemini)
+     */
+    this.positionRelative = false;
+    /**
+     * Set this attribute if you want display a checkbox in all items by default.
+     */
+    this.checkbox = false;
+    /**
+     * Set this attribute if you want the checkbox to be checked in all items by
+     * default.
+     * Only works if `checkbox = true`
+     */
+    this.checked = false;
     /**
      * This attribute lets you specify if the drag operation is disabled in all
      * items by default. If `true`, the items can't be dragged.
@@ -42,23 +62,30 @@ const GxgTreeView = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
      */
     this.dropDisabled = DEFAULT_DROP_DISABLED_VALUE;
     /**
-     * This property lets you define the model of the ch-tree-x control.
+     * This attribute lets you specify if the edit operation is enabled in all
+     * items by default. If `true`, the items can edit its caption in place.
      */
-    this.treeModel = [];
+    this.editableItems = DEFAULT_EDITABLE_ITEMS_VALUE;
     /**
      * Set this attribute if you want to allow multi selection of the items.
      */
     this.multiSelection = false;
-    /**
-     * This attribute lets you specify if the edit operation is enabled in all
-     * items by default. If `true`, the items can edit its caption in place.
-     */
-    this.editableItems = DEFAULT_EDITABLE_ITEMS_VALUE;
     /**
      * `true` to display the relation between tree items and tree lists using
      * lines.
      */
     this.showLines = "all";
+    /**
+     * Set this attribute if you want all the children item's checkboxes to be
+     * checked when the parent item checkbox is checked, or to be unchecked when
+     * the parent item checkbox is unchecked.
+     * This attribute will be used in all items by default.
+     */
+    this.toggleCheckboxes = false;
+    /**
+     * This property lets you define the model of the ch-tree-x control.
+     */
+    this.treeModel = [];
     this.handleDroppableZoneEnter = (event) => {
       if (!this.checkDroppableZoneCallback) {
         return;
@@ -172,16 +199,24 @@ const GxgTreeView = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       itemUIModelExtended.parentItem = newParentUIModel;
     };
     this.renderSubModel = (treeSubModel, lastItem, level) => {
-      var _a, _b, _c;
-      return (h("ch-tree-x-list-item", { id: treeSubModel.id, caption: treeSubModel.caption, checkbox: treeSubModel.checkbox, checked: treeSubModel.checked, class: treeSubModel.class, disabled: treeSubModel.disabled, downloading: treeSubModel.downloading, dragDisabled: (_a = treeSubModel.dragDisabled) !== null && _a !== void 0 ? _a : this.dragDisabled, dropDisabled: (_b = treeSubModel.dropDisabled) !== null && _b !== void 0 ? _b : this.dropDisabled, editable: (_c = treeSubModel.editable) !== null && _c !== void 0 ? _c : this.editableItems, expanded: treeSubModel.expanded, indeterminate: treeSubModel.indeterminate, lastItem: lastItem, lazyLoad: treeSubModel.lazy, leaf: treeSubModel.leaf, leftImgSrc: treeSubModel.leftImgSrc, level: level, metadata: treeSubModel.metadata, rightImgSrc: treeSubModel.rightImgSrc, selected: treeSubModel.selected, showExpandableButton: treeSubModel.showExpandableButton, showLines: this.showLines, toggleCheckboxes: treeSubModel.toggleCheckboxes }, !treeSubModel.leaf &&
+      var _a, _b, _c, _d, _e, _f;
+      return (h("ch-tree-x-list-item", { id: treeSubModel.id, caption: treeSubModel.caption, checkbox: (_a = treeSubModel.checkbox) !== null && _a !== void 0 ? _a : this.checkbox, checked: (_b = treeSubModel.checked) !== null && _b !== void 0 ? _b : this.checked, class: treeSubModel.class, disabled: treeSubModel.disabled, downloading: treeSubModel.downloading, dragDisabled: (_c = treeSubModel.dragDisabled) !== null && _c !== void 0 ? _c : this.dragDisabled, dropDisabled: (_d = treeSubModel.dropDisabled) !== null && _d !== void 0 ? _d : this.dropDisabled, editable: (_e = treeSubModel.editable) !== null && _e !== void 0 ? _e : this.editableItems, expanded: treeSubModel.expanded, indeterminate: treeSubModel.indeterminate, lastItem: lastItem, lazyLoad: treeSubModel.lazy, leaf: treeSubModel.leaf, leftImgSrc: treeSubModel.leftImgSrc ? resolveImgPath(treeSubModel.leftImgSrc) : null, level: level, metadata: treeSubModel.metadata, rightImgSrc: treeSubModel.rightImgSrc, selected: treeSubModel.selected, showExpandableButton: treeSubModel.showExpandableButton, showLines: this.showLines, toggleCheckboxes: (_f = treeSubModel.toggleCheckboxes) !== null && _f !== void 0 ? _f : this.toggleCheckboxes }, !treeSubModel.leaf &&
         treeSubModel.items != null &&
         treeSubModel.items.map((subModel, index) => this.renderSubModel(subModel, this.showLines && index === treeSubModel.items.length - 1, level + 1))));
     };
     this.flattenItemUIModel = (parentModel) => (item) => {
+      var _a;
       this.flattenedTreeModel.set(item.id, {
         parentItem: parentModel,
         item: item,
       });
+      // Add the items that have a checkbox in a separate Map
+      if ((_a = item.checkbox) !== null && _a !== void 0 ? _a : this.checkbox) {
+        this.flattenedCheckboxTreeModel.set(item.id, {
+          parentItem: parentModel,
+          item: item,
+        });
+      }
       // Make sure the properties are with their default values to avoid issues
       // when reusing DOM nodes
       item.class = item.class == null ? DEFAULT_CLASS_VALUE : item.class;
@@ -195,9 +230,6 @@ const GxgTreeView = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       item.order = item.order == null ? DEFAULT_ORDER_VALUE : item.order;
       item.selected =
         item.selected == null ? DEFAULT_SELECTED_VALUE : item.selected;
-      if (item.leftImgSrc) {
-        item.leftImgSrc = resolveImgPath(item.leftImgSrc);
-      }
       if (item.selected) {
         this.selectedItems.add(item.id);
       }
@@ -224,6 +256,8 @@ const GxgTreeView = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     itemToLazyLoadContent.items = items;
     this.sortItems(itemToLazyLoadContent.items);
     this.flattenSubModel(itemToLazyLoadContent);
+    // Re-sync checked items
+    this.emitCheckedItemsChange();
     // Force re-render
     forceUpdate(this);
   }
@@ -321,6 +355,21 @@ const GxgTreeView = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       itemInfo[propertyName] = properties[propertyName];
     });
   }
+  updateCheckboxValue(event) {
+    event.stopPropagation();
+    const detail = event.detail;
+    const treeItemId = detail.id;
+    const itemUIModel = this.flattenedCheckboxTreeModel.get(treeItemId);
+    // In some cases, when the `treeModel` and `checked` properties are updated
+    // outside of the tree control, some events are fired with undefined references
+    if (!itemUIModel) {
+      return;
+    }
+    const itemInfo = itemUIModel.item;
+    itemInfo.checked = detail.checked;
+    itemInfo.indeterminate = detail.indeterminate;
+    this.emitCheckedItemsChange();
+  }
   loadLazyChildrenHandler(event) {
     if (!this.lazyLoadTreeItemsCallback) {
       return;
@@ -368,6 +417,17 @@ const GxgTreeView = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     event.stopPropagation();
     this.itemOpenReference.emit(event.detail);
   }
+  emitCheckedItemsChange() {
+    // New copy of the checked items
+    const allItemsWithCheckbox = new Map(this.flattenedCheckboxTreeModel);
+    // Update the checked value if not defined
+    allItemsWithCheckbox.forEach((itemUIModel) => {
+      if (itemUIModel.item.checked == null) {
+        itemUIModel.item.checked = this.checked;
+      }
+    });
+    this.checkedItemsChange.emit(allItemsWithCheckbox);
+  }
   flattenSubModel(model) {
     const items = model.items;
     if (!items) {
@@ -388,7 +448,15 @@ const GxgTreeView = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   flattenModel() {
     this.flattenedTreeModel.clear();
+    this.flattenedCheckboxTreeModel.clear();
+    this.selectedItems.clear();
+    // The model was updated at runtime, so we need to clear the references
+    if (this.treeRef) {
+      this.treeRef.clearSelectedItemsInfo();
+    }
     this.flattenSubModel({ id: null, caption: null, items: this.treeModel });
+    // Re-sync checked items
+    this.emitCheckedItemsChange();
   }
   componentWillLoad() {
     this.flattenModel();
@@ -401,18 +469,23 @@ const GxgTreeView = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }; }
   static get style() { return treeViewCss; }
 }, [0, "gxg-tree-view", {
+    "noPadding": [516, "no-padding"],
+    "positionRelative": [516, "position-relative"],
+    "checkbox": [4],
+    "checked": [4],
     "checkDroppableZoneCallback": [16],
     "cssClass": [1, "css-class"],
     "dragDisabled": [4, "drag-disabled"],
     "dropDisabled": [4, "drop-disabled"],
     "dropItemsCallback": [16],
-    "treeModel": [16],
+    "editableItems": [4, "editable-items"],
     "lazyLoadTreeItemsCallback": [16],
     "modifyItemCaptionCallback": [16],
     "multiSelection": [4, "multi-selection"],
-    "editableItems": [4, "editable-items"],
     "showLines": [1, "show-lines"],
     "sortItemsCallback": [16],
+    "toggleCheckboxes": [4, "toggle-checkboxes"],
+    "treeModel": [16],
     "waitDropProcessing": [32],
     "loadLazyContent": [64],
     "scrollIntoVisible": [64],
@@ -420,7 +493,7 @@ const GxgTreeView = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "updateAllItemsProperties": [64],
     "updateItemsProperties": [64],
     "updateValidDropZone": [64]
-  }, [[0, "loadLazyContent", "loadLazyChildrenHandler"], [0, "modifyCaption", "handleCaptionModification"], [2, "openReference", "handleOpenReference"]]]);
+  }, [[0, "checkboxChange", "updateCheckboxValue"], [0, "checkboxToggleChange", "updateCheckboxValue"], [0, "loadLazyContent", "loadLazyChildrenHandler"], [0, "modifyCaption", "handleCaptionModification"], [2, "openReference", "handleOpenReference"]]]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;

package/dist/components/tree-x-list-item.js

@@ -32,6 +32,7 @@ const ChTreeXListItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     this.__registerHost();
     this.__attachShadow();
     this.checkboxChange = createEvent(this, "checkboxChange", 7);
+    this.checkboxToggleChange = createEvent(this, "checkboxToggleChange", 7);
     this.itemDragStart = createEvent(this, "itemDragStart", 7);
     this.itemDragEnd = createEvent(this, "itemDragEnd", 7);
     this.loadLazyContent = createEvent(this, "loadLazyContent", 7);
@@ -242,7 +243,11 @@ const ChTreeXListItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
       event.stopPropagation();
       const checked = event.target.checked;
       this.checked = checked;
-      this.checkboxChange.emit(checked);
+      this.checkboxChange.emit({
+        id: this.el.id,
+        checked: this.checked,
+        indeterminate: this.indeterminate
+      });
     };
     this.renderImg = (cssClass, src) => (h("img", { "aria-hidden": "true", class: cssClass, part: cssClass, alt: "", src: src, loading: "lazy" }));
     this.handleDragStart = (event) => {
@@ -278,7 +283,17 @@ const ChTreeXListItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     }
     const treeItems = this.getDirectTreeItems();
     treeItems.forEach(treeItem => {
-      treeItem.checked = newValue;
+      if (treeItem.checked !== newValue || treeItem.indeterminate !== false) {
+        treeItem.checked = newValue;
+        treeItem.indeterminate = false;
+        // Emit the event to sync with the UI model, even if the item does not
+        // have toggleCheckboxes property
+        this.checkboxToggleChange.emit({
+          id: treeItem.id,
+          checked: newValue,
+          indeterminate: false
+        });
+      }
     });
   }
   handleEditingChange(isEditing) {
@@ -325,13 +340,19 @@ const ChTreeXListItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     if (!this.toggleCheckboxes) {
       return;
     }
-    const updatedCheck = event.detail;
+    const updatedCheck = event.detail.checked;
     const treeItems = this.getDirectTreeItems();
     // Check if all the items have the same value as the updated item
     const allItemsHaveTheSameCheckedValue = treeItems.every(treeItem => treeItem.checked === updatedCheck);
     this.ignoreCheckboxChange = this.checked !== updatedCheck;
     this.checked = updatedCheck;
     this.indeterminate = !allItemsHaveTheSameCheckedValue;
+    // Sync with the UI Model
+    this.checkboxToggleChange.emit({
+      id: this.el.id,
+      checked: updatedCheck,
+      indeterminate: !allItemsHaveTheSameCheckedValue
+    });
   }
   /**
    * Focus the next item in the tree. If the control is expanded, it focuses
@@ -486,22 +507,12 @@ const ChTreeXListItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     });
   }
   componentWillLoad() {
-    const parentElementItem = this.el
-      .parentElement;
     // Check if must lazy load
     this.lazyLoadItems(this.expanded);
     // Sync selected state with the main tree
     if (this.selected) {
       this.selectedItemChange.emit(this.getSelectedInfo(true, true));
     }
-    // No need to update more the status
-    if (this.level === INITIAL_LEVEL) {
-      return;
-    }
-    // Update checkbox status
-    if (parentElementItem.checkbox) {
-      this.checked = parentElementItem.checked;
-    }
   }
   componentDidLoad() {
     if (this.lastItem && this.showLines) {

package/dist/components/tree-x.js

@@ -38,8 +38,8 @@ const ChTreeX = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.droppableZoneEnter = createEvent(this, "droppableZoneEnter", 7);
     this.expandedItemChange = createEvent(this, "expandedItemChange", 7);
     this.itemContextmenu = createEvent(this, "itemContextmenu", 7);
-    this.selectedItemsChange = createEvent(this, "selectedItemsChange", 7);
     this.itemsDropped = createEvent(this, "itemsDropped", 7);
+    this.selectedItemsChange = createEvent(this, "selectedItemsChange", 7);
     // @todo TODO: Check if key codes works in Safari
     this.keyDownEvents = {
       [ARROW_DOWN_KEY]: event => {
@@ -312,7 +312,13 @@ const ChTreeX = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   validDroppableZone(event) {
     const containerTarget = event.target;
     const cacheKey = getDroppableZoneKey(containerTarget.id, this.draggedItems);
-    const droppableZoneState = this.validDroppableZoneCache.get(cacheKey);
+    let droppableZoneState = this.validDroppableZoneCache.get(cacheKey);
+    // Invalidate the cache, because the item is no longer waiting for its content to be downloaded
+    if (droppableZoneState === "temporal-invalid" &&
+      !containerTarget.lazyLoad &&
+      !containerTarget.downloading) {
+      droppableZoneState = null;
+    }
     if (droppableZoneState != null) {
       return droppableZoneState;
     }
@@ -329,6 +335,11 @@ const ChTreeX = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       this.validDroppableZoneCache.set(cacheKey, "invalid");
       return "invalid";
     }
+    // Disable drops when items need to lazy load their content first
+    if (containerTarget.lazyLoad || containerTarget.downloading) {
+      this.validDroppableZoneCache.set(cacheKey, "temporal-invalid");
+      return "temporal-invalid";
+    }
     this.validDroppableZoneCache.set(cacheKey, "checking");
     this.droppableZoneEnter.emit({
       newContainer: {
@@ -355,9 +366,9 @@ const ChTreeX = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       itemTarget.closest(TREE_TAG_NAME) !== this.el) {
       return;
     }
-    const cacheKey = getDroppableZoneKey(itemTarget.id, this.draggedItems);
-    const droppableZoneState = this.validDroppableZoneCache.get(cacheKey);
-    if (droppableZoneState === "invalid") {
+    const droppableZoneState = this.validDroppableZone(event);
+    if (droppableZoneState === "invalid" ||
+      droppableZoneState === "temporal-invalid") {
       event.dataTransfer.dropEffect = "none";
     }
   }

package/dist/esm/ch-checkbox_3.entry.js

@@ -123,8 +123,8 @@ const ChTreeX = class {
     this.droppableZoneEnter = createEvent(this, "droppableZoneEnter", 7);
     this.expandedItemChange = createEvent(this, "expandedItemChange", 7);
     this.itemContextmenu = createEvent(this, "itemContextmenu", 7);
-    this.selectedItemsChange = createEvent(this, "selectedItemsChange", 7);
     this.itemsDropped = createEvent(this, "itemsDropped", 7);
+    this.selectedItemsChange = createEvent(this, "selectedItemsChange", 7);
     // @todo TODO: Check if key codes works in Safari
     this.keyDownEvents = {
       [ARROW_DOWN_KEY]: event => {
@@ -397,7 +397,13 @@ const ChTreeX = class {
   validDroppableZone(event) {
     const containerTarget = event.target;
     const cacheKey = getDroppableZoneKey(containerTarget.id, this.draggedItems);
-    const droppableZoneState = this.validDroppableZoneCache.get(cacheKey);
+    let droppableZoneState = this.validDroppableZoneCache.get(cacheKey);
+    // Invalidate the cache, because the item is no longer waiting for its content to be downloaded
+    if (droppableZoneState === "temporal-invalid" &&
+      !containerTarget.lazyLoad &&
+      !containerTarget.downloading) {
+      droppableZoneState = null;
+    }
     if (droppableZoneState != null) {
       return droppableZoneState;
     }
@@ -414,6 +420,11 @@ const ChTreeX = class {
       this.validDroppableZoneCache.set(cacheKey, "invalid");
       return "invalid";
     }
+    // Disable drops when items need to lazy load their content first
+    if (containerTarget.lazyLoad || containerTarget.downloading) {
+      this.validDroppableZoneCache.set(cacheKey, "temporal-invalid");
+      return "temporal-invalid";
+    }
     this.validDroppableZoneCache.set(cacheKey, "checking");
     this.droppableZoneEnter.emit({
       newContainer: {
@@ -440,9 +451,9 @@ const ChTreeX = class {
       itemTarget.closest(TREE_TAG_NAME) !== this.el) {
       return;
     }
-    const cacheKey = getDroppableZoneKey(itemTarget.id, this.draggedItems);
-    const droppableZoneState = this.validDroppableZoneCache.get(cacheKey);
-    if (droppableZoneState === "invalid") {
+    const droppableZoneState = this.validDroppableZone(event);
+    if (droppableZoneState === "invalid" ||
+      droppableZoneState === "temporal-invalid") {
       event.dataTransfer.dropEffect = "none";
     }
   }
@@ -580,6 +591,7 @@ const ChTreeXListItem = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.checkboxChange = createEvent(this, "checkboxChange", 7);
+    this.checkboxToggleChange = createEvent(this, "checkboxToggleChange", 7);
     this.itemDragStart = createEvent(this, "itemDragStart", 7);
     this.itemDragEnd = createEvent(this, "itemDragEnd", 7);
     this.loadLazyContent = createEvent(this, "loadLazyContent", 7);
@@ -790,7 +802,11 @@ const ChTreeXListItem = class {
       event.stopPropagation();
       const checked = event.target.checked;
       this.checked = checked;
-      this.checkboxChange.emit(checked);
+      this.checkboxChange.emit({
+        id: this.el.id,
+        checked: this.checked,
+        indeterminate: this.indeterminate
+      });
     };
     this.renderImg = (cssClass, src) => (h("img", { "aria-hidden": "true", class: cssClass, part: cssClass, alt: "", src: src, loading: "lazy" }));
     this.handleDragStart = (event) => {
@@ -826,7 +842,17 @@ const ChTreeXListItem = class {
     }
     const treeItems = this.getDirectTreeItems();
     treeItems.forEach(treeItem => {
-      treeItem.checked = newValue;
+      if (treeItem.checked !== newValue || treeItem.indeterminate !== false) {
+        treeItem.checked = newValue;
+        treeItem.indeterminate = false;
+        // Emit the event to sync with the UI model, even if the item does not
+        // have toggleCheckboxes property
+        this.checkboxToggleChange.emit({
+          id: treeItem.id,
+          checked: newValue,
+          indeterminate: false
+        });
+      }
     });
   }
   handleEditingChange(isEditing) {
@@ -873,13 +899,19 @@ const ChTreeXListItem = class {
     if (!this.toggleCheckboxes) {
       return;
     }
-    const updatedCheck = event.detail;
+    const updatedCheck = event.detail.checked;
     const treeItems = this.getDirectTreeItems();
     // Check if all the items have the same value as the updated item
     const allItemsHaveTheSameCheckedValue = treeItems.every(treeItem => treeItem.checked === updatedCheck);
     this.ignoreCheckboxChange = this.checked !== updatedCheck;
     this.checked = updatedCheck;
     this.indeterminate = !allItemsHaveTheSameCheckedValue;
+    // Sync with the UI Model
+    this.checkboxToggleChange.emit({
+      id: this.el.id,
+      checked: updatedCheck,
+      indeterminate: !allItemsHaveTheSameCheckedValue
+    });
   }
   /**
    * Focus the next item in the tree. If the control is expanded, it focuses
@@ -1034,22 +1066,12 @@ const ChTreeXListItem = class {
     });
   }
   componentWillLoad() {
-    const parentElementItem = this.el
-      .parentElement;
     // Check if must lazy load
     this.lazyLoadItems(this.expanded);
     // Sync selected state with the main tree
     if (this.selected) {
       this.selectedItemChange.emit(this.getSelectedInfo(true, true));
     }
-    // No need to update more the status
-    if (this.level === INITIAL_LEVEL) {
-      return;
-    }
-    // Update checkbox status
-    if (parentElementItem.checkbox) {
-      this.checked = parentElementItem.checked;
-    }
   }
   componentDidLoad() {
     if (this.lastItem && this.showLines) {