npm - @genexus/genexus-ide-ui - Versions diffs - 0.0.71 → 0.0.72 - Mend

@genexus/genexus-ide-ui 0.0.71 → 0.0.72

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (132) hide show

package/dist/components/index.d.ts CHANGED Viewed

@@ -1,4 +1,5 @@
 /* GenexusIdeUi custom elements */
+export { GxIdeTemplate as GxIdeAiAssistant } from '../types/components/ai-assistant/ai-assistant';
 export { GxIdeBpmAppDeclaration as GxIdeBpmAppDeclaration } from '../types/components/bpm-application-declaration/bpm-app-declaration';
 export { GxIdeContainer as GxIdeContainer } from '../types/components/_helpers/container/container';
 export { GxIdeCreateKbFromServer as GxIdeCreateKbFromServer } from '../types/components/create-kb-from-server/create-kb-from-server';

package/dist/components/index.js CHANGED Viewed

@@ -39,6 +39,7 @@ export { ChPaginatorPages, defineCustomElement as defineCustomElementChPaginator
 export { ChQr, defineCustomElement as defineCustomElementChQr } from './ch-qr.js';
 export { ChSelect, defineCustomElement as defineCustomElementChSelect } from './ch-select.js';
 export { ChSelectOption, defineCustomElement as defineCustomElementChSelectOption } from './ch-select-option.js';
+export { ChShortcuts, defineCustomElement as defineCustomElementChShortcuts } from './ch-shortcuts.js';
 export { ChSidebarMenu, defineCustomElement as defineCustomElementChSidebarMenu } from './ch-sidebar-menu.js';
 export { ChSidebarMenuList, defineCustomElement as defineCustomElementChSidebarMenuList } from './ch-sidebar-menu-list.js';
 export { ChSidebarMenuListItem, defineCustomElement as defineCustomElementChSidebarMenuListItem } from './ch-sidebar-menu-list-item.js';
@@ -64,6 +65,7 @@ export { ChWindow, defineCustomElement as defineCustomElementChWindow } from './
 export { ChWindowClose, defineCustomElement as defineCustomElementChWindowClose } from './ch-window-close.js';
 export { GxGridChameleon, defineCustomElement as defineCustomElementGxGridChameleon } from './gx-grid-chameleon.js';
 export { GxGridChameleonColumnFilter, defineCustomElement as defineCustomElementGxGridChameleonColumnFilter } from './gx-grid-chameleon-column-filter.js';
+export { GxIdeAiAssistant, defineCustomElement as defineCustomElementGxIdeAiAssistant } from './gx-ide-ai-assistant.js';
 export { GxIdeBpmAppDeclaration, defineCustomElement as defineCustomElementGxIdeBpmAppDeclaration } from './gx-ide-bpm-app-declaration.js';
 export { GxIdeContainer, defineCustomElement as defineCustomElementGxIdeContainer } from './gx-ide-container.js';
 export { GxIdeCreateKbFromServer, defineCustomElement as defineCustomElementGxIdeCreateKbFromServer } from './gx-ide-create-kb-from-server.js';

package/dist/components/text.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { s as state } from './store.js';
 import { d as defineCustomElement$2 } from './icon.js';
 import { d as defineCustomElement$1 } from './icon2.js';
-const textCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0;}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px;}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}: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, 6px);height:var(--gxg-scrollbar-width, 6px)}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background, --gray-02);border-radius:var(--gxg-scrollbar-track-border-radius, 10px)}.gxg-scrollbar::-webkit-scrollbar-thumb{background:var(--gxg-scrollbar-track-thumb-background, --gray-05);border-radius:var(--gxg-scrollbar-track-thumb-radius, 10px)}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--gxg-scrollbar-track-thumb-hover-background, --gray-04);cursor:pointer}:host{display:flex;font-size:14px}:host .wrapper{display:flex;flex-direction:row;gap:var(--spacing-comp-02)}:host p,:host q,:host a{display:block;margin:0;padding:0;line-height:1.6em}:host p.no-line,:host q.no-line,:host a.no-line{text-decoration:none}:host .disabled{pointer-events:none;color:var(--gxg-color--disabled) !important}:host([text-align=start]){justify-content:flex-start}:host([text-align=center]){justify-content:center}:host([text-align=center]) .wrapper *{text-align:center}:host([text-align=end]){justify-content:flex-end}:host([padding=s]){padding:var(--spacing-comp-01)}:host([padding=m]){padding:var(--spacing-comp-02)}:host([type=button-like]) button{background-color:transparent;border:none;font-family:var(--font-family-primary);font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-primary-enabled);letter-spacing:var(--letter-spacing-xs);cursor:pointer}:host([type=button-like]) button:hover{color:var(--color-primary-hover)}:host([type=button-like]) button:focus{outline:none;text-decoration:underline}:host(.icon){display:flex;flex-direction:row}:host(.icon--center) .wrapper{align-items:center}:host(.icon--top) .wrapper{align-items:flex-start}:host(.large) .gxg-text,:host(.large) .gxg-text--gray,:host(.large) .gxg-quote,:host(.large) .gxg-link,:host(.large) .gxg-link-gray,:host(.large) .gxg-alert-error,:host(.large) .gxg-alert-warning,:host(.large) .gxg-alert-success{font-size:var(--font-size-lg)}:host(.mercury) .gxg-text,:host(.mercury) .gxg-link{font-size:var(--mc-font-size-xs)}:host(.mercury) .gxg-text{color:var(--gray-02)}:host(.mercury[italic]){font-style:italic}";
+const textCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0;}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px;}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}: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, 6px);height:var(--gxg-scrollbar-width, 6px)}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background, --gray-02);border-radius:var(--gxg-scrollbar-track-border-radius, 10px)}.gxg-scrollbar::-webkit-scrollbar-thumb{background:var(--gxg-scrollbar-track-thumb-background, --gray-05);border-radius:var(--gxg-scrollbar-track-thumb-radius, 10px)}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--gxg-scrollbar-track-thumb-hover-background, --gray-04);cursor:pointer}:host{display:flex;font-size:14px}:host .wrapper{display:flex;flex-direction:row;gap:var(--spacing-comp-02)}:host p,:host q,:host a{display:block;margin:0;padding:0;line-height:1.6em}:host p.no-line,:host q.no-line,:host a.no-line{text-decoration:none}:host .disabled{pointer-events:none;color:var(--gxg-color--disabled) !important}:host([text-align=start]){justify-content:flex-start}:host([text-align=center]){justify-content:center}:host([text-align=center]) .wrapper *{text-align:center}:host([text-align=end]){justify-content:flex-end}:host([padding=s]){padding:var(--spacing-comp-01)}:host([padding=m]){padding:var(--spacing-comp-02)}:host([type=button-like]) button{background-color:transparent;border:none;font-family:var(--font-family-primary);font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-primary-enabled);letter-spacing:var(--letter-spacing-xs);cursor:pointer}:host([type=button-like]) button:hover{color:var(--color-primary-hover)}:host([type=button-like]) button:focus{outline:none;text-decoration:underline}:host(.icon){display:flex;flex-direction:row}:host(.icon--center) .wrapper{align-items:center}:host(.icon--top) .wrapper{align-items:flex-start}:host(.large) .gxg-text,:host(.large) .gxg-text--gray,:host(.large) .gxg-quote,:host(.large) .gxg-link,:host(.large) .gxg-link-gray,:host(.large) .gxg-alert-error,:host(.large) .gxg-alert-warning,:host(.large) .gxg-alert-success{font-size:var(--font-size-lg)}:host(.mercury){color:var(--gray-02)}:host(.mercury) .gxg-text,:host(.mercury) .gxg-link{font-size:var(--mc-font-size-xs)}:host(.mercury) .gxg-text{color:inherit}:host(.mercury[italic]){font-style:italic}";
 const GxgText = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/tree-view-item.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, writeTask, Host } from
 import { m as mouseEventModifierKey } from './helpers.js';
 import { d as defineCustomElement$1 } from './checkbox.js';
-const treeViewItemCss = ":where(button){all:unset;display:flex;user-select:none;touch-action:manipulation;-webkit-user-drag:element}*,::before,::after{box-sizing:border-box}:host{--ch-tree-view-view__checkbox-size:1em;--ch-tree-view-view__expandable-button-width:0.75em;--ch-tree-view-item__dashed-line--inset-inline-start:0px;--ch-tree-view-item__dashed-line--inset-inline-end:4px;--ch-tree-view-item-gap:5px;--ch-tree-view-item-custom-padding-inline-start:0px;--ch-tree-tab-width:calc(\n    var(--ch-tree-view-view__checkbox-size) +\n      var(--ch-tree-view-view__expandable-button-width) +\n      (var(--ch-tree-view-item-gap) * 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:calc( var(--padding-inline-start) + var(--ch-tree-view-item-custom-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(--ch-tree-tab-width)\n  )}.header--even+.expandable{--parent-padding-inline-start--even:calc(\n    var(--parent-padding-inline-start--odd, 0px) + var(--ch-tree-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(--ch-tree-tab-width) -\n          calc(\n    var(--ch-tree-view-view__expandable-button-width) +\n      var(--ch-tree-view-item-gap)\n  )\n      )}.header--even-expandable+.expandable{--parent-padding-inline-start--even:calc(\n        var(--parent-padding-inline-start--odd, 0px) + var(--ch-tree-tab-width) -\n          calc(\n    var(--ch-tree-view-view__expandable-button-width) +\n      var(--ch-tree-view-item-gap)\n  )\n      )}.header--odd{--padding-inline-start:calc(\n    var(--parent-padding-inline-start--even, 0px) + var(--ch-tree-tab-width)\n  )}.header--odd+.expandable{--parent-padding-inline-start--odd:calc(\n    var(--parent-padding-inline-start--even, 0px) + var(--ch-tree-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(--ch-tree-tab-width) -\n          calc(\n    var(--ch-tree-view-view__expandable-button-width) +\n      var(--ch-tree-view-item-gap)\n  )\n      )}.header--odd-expandable+.expandable{--parent-padding-inline-start--odd:calc(\n        var(--parent-padding-inline-start--even, 0px) + var(--ch-tree-tab-width) -\n          calc(\n    var(--ch-tree-view-view__expandable-button-width) +\n      var(--ch-tree-view-item-gap)\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(--ch-tree-view-view__expandable-button-width) +\n      var(--ch-tree-view-item-gap)\n  )}.header--expandable-offset+.expandable{--parent-expandable-offset:calc(\n    var(--ch-tree-view-view__expandable-button-width) / 2\n  )}.header--checkbox-offset+.expandable{--parent-checkbox-offset:calc(\n    var(--ch-tree-view-view__checkbox-size) / 2\n  );--parent-negative-checkbox-offset:calc(\n    var(--ch-tree-view-view__checkbox-size) / 2\n  )}.dashed-line{position:absolute;inset-inline-start:calc( var(--inset-inline-start) + var(--ch-tree-view-item__dashed-line--inset-inline-start) + var(--ch-tree-view-item-custom-padding-inline-start) );height:1px;width:calc( var(--ch-tree-tab-width) - var(--parent-checkbox-offset) - var(--parent-expandable-offset) - var(--own-offset) - var(--ch-tree-view-item__dashed-line--inset-inline-start) - var(--ch-tree-view-item__dashed-line--inset-inline-end) );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(--ch-tree-view-item-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(--ch-tree-view-view__expandable-button-width);height:var(--ch-tree-view-view__expandable-button-width);margin-inline-end:var(--ch-tree-view-item-gap);z-index:1;cursor:pointer;content-visibility:auto;contain-intrinsic-size:auto var(--ch-tree-view-view__expandable-button-width)}.expandable-button::before{content:\"\";width:calc(100% - 2px);height:calc(100% - 2px);background-color:currentColor;-webkit-mask-size:calc( var(--ch-tree-view-view__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{width:var(--ch-tree-view-view__checkbox-size);margin-inline-end:var(--ch-tree-view-item-gap)}.checkbox::part(container){width:var(--ch-tree-view-view__checkbox-size);height:var(--ch-tree-view-view__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:var(--ch-tree-view-item-gap)}.right-img{grid-area:right-img;margin-inline-start:var(--ch-tree-view-item-gap)}.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-auto-rows:min-content;position:relative}.expandable--lazy-loaded{content-visibility:auto;contain-intrinsic-size:auto 100px}.expandable--collapsed{display:none;overflow:hidden;content-visibility:hidden}";
+const treeViewItemCss = ":where(button){all:unset;display:flex;user-select:none;touch-action:manipulation;-webkit-user-drag:element}*,::before,::after{box-sizing:border-box}:host{--ch-tree-view-view__checkbox-size:1em;--ch-tree-view-view__expandable-button-width:0.75em;--ch-tree-view-item__dashed-line--inset-inline-start:0px;--ch-tree-view-item__dashed-line--inset-inline-end:4px;--ch-tree-view-item-gap:5px;--ch-tree-view-item-custom-padding-inline-start:0px;--ch-tree-tab-width:calc(\n    var(--ch-tree-view-view__checkbox-size) +\n      var(--ch-tree-view-view__expandable-button-width) +\n      (var(--ch-tree-view-item-gap) * 2)\n  );display:grid;grid-template-rows:min-content}.header{--own-offset:0px;display:flex;align-items:center;min-height:calc(1em + 6px);padding-inline-start:calc( var(--padding-inline-start) + var(--ch-tree-view-item-custom-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(--ch-tree-tab-width)\n  )}.header--even+.expandable{--parent-padding-inline-start--even:calc(\n    var(--parent-padding-inline-start--odd, 0px) + var(--ch-tree-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(--ch-tree-tab-width) -\n          calc(\n    var(--ch-tree-view-view__expandable-button-width) +\n      var(--ch-tree-view-item-gap)\n  )\n      )}.header--even-expandable+.expandable{--parent-padding-inline-start--even:calc(\n        var(--parent-padding-inline-start--odd, 0px) + var(--ch-tree-tab-width) -\n          calc(\n    var(--ch-tree-view-view__expandable-button-width) +\n      var(--ch-tree-view-item-gap)\n  )\n      )}.header--odd{--padding-inline-start:calc(\n    var(--parent-padding-inline-start--even, 0px) + var(--ch-tree-tab-width)\n  )}.header--odd+.expandable{--parent-padding-inline-start--odd:calc(\n    var(--parent-padding-inline-start--even, 0px) + var(--ch-tree-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(--ch-tree-tab-width) -\n          calc(\n    var(--ch-tree-view-view__expandable-button-width) +\n      var(--ch-tree-view-item-gap)\n  )\n      )}.header--odd-expandable+.expandable{--parent-padding-inline-start--odd:calc(\n        var(--parent-padding-inline-start--even, 0px) + var(--ch-tree-tab-width) -\n          calc(\n    var(--ch-tree-view-view__expandable-button-width) +\n      var(--ch-tree-view-item-gap)\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(--ch-tree-view-view__expandable-button-width) +\n      var(--ch-tree-view-item-gap)\n  )}.header--expandable-offset+.expandable{--parent-expandable-offset:calc(\n    var(--ch-tree-view-view__expandable-button-width) / 2\n  )}.header--checkbox-offset+.expandable{--parent-checkbox-offset:calc(\n    var(--ch-tree-view-view__checkbox-size) / 2\n  );--parent-negative-checkbox-offset:calc(\n    var(--ch-tree-view-view__checkbox-size) / 2\n  )}.dashed-line{position:absolute;inset-inline-start:calc( var(--inset-inline-start) + var(--ch-tree-view-item__dashed-line--inset-inline-start) + var(--ch-tree-view-item-custom-padding-inline-start) );height:1px;width:calc( var(--ch-tree-tab-width) - var(--parent-checkbox-offset) - var(--parent-expandable-offset) - var(--own-offset) - var(--ch-tree-view-item__dashed-line--inset-inline-start) - var(--ch-tree-view-item__dashed-line--inset-inline-end) );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(--ch-tree-view-item-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(--ch-tree-view-view__expandable-button-width);height:var(--ch-tree-view-view__expandable-button-width);margin-inline-end:var(--ch-tree-view-item-gap);z-index:1;cursor:pointer;content-visibility:auto;contain-intrinsic-size:auto var(--ch-tree-view-view__expandable-button-width)}.expandable-button::before{content:\"\";width:calc(100% - 2px);height:calc(100% - 2px);background-color:currentColor;-webkit-mask-size:calc( var(--ch-tree-view-view__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{width:var(--ch-tree-view-view__checkbox-size);margin-inline-end:var(--ch-tree-view-item-gap)}.checkbox::part(container){width:var(--ch-tree-view-view__checkbox-size);height:var(--ch-tree-view-view__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:var(--ch-tree-view-item-gap)}.right-img{grid-area:right-img;margin-inline-start:var(--ch-tree-view-item-gap)}.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-auto-rows:min-content;position:relative}.expandable--lazy-loaded{content-visibility:auto;contain-intrinsic-size:auto 100px}.expandable--collapsed{display:none;overflow:hidden;content-visibility:hidden}";
 const resetDragImage = new Image();
 const DISTANCE_TO_CHECKBOX_CUSTOM_VAR = "--ch-tree-view-item-distance-to-checkbox";

package/dist/components/tree-view-render.js CHANGED Viewed

@@ -3,12 +3,12 @@ import { d as defineCustomElement$3 } from './checkbox.js';
 import { d as defineCustomElement$2 } from './tree-view.js';
 import { d as defineCustomElement$1 } from './tree-view-item.js';
-const filterWithCamelCase = (stringToFilter, filter, camelCase) => camelCase
+const filterWithCase = (stringToFilter, filter, matchCase) => matchCase
   ? stringToFilter.includes(filter)
   : stringToFilter.toLowerCase().includes(filter.toLowerCase());
-const filterWithString = (stringToFilter, filter, filterOptions) => filterOptions.regularExpression
+const filterWithString = (stringToFilter, filter, filterOptions) => (filterOptions === null || filterOptions === void 0 ? void 0 : filterOptions.regularExpression)
   ? stringToFilter.match(filter) !== null
-  : filterWithCamelCase(stringToFilter, filter, filterOptions.camelCase);
+  : filterWithCase(stringToFilter, filter, filterOptions === null || filterOptions === void 0 ? void 0 : filterOptions.matchCase);
 const filterDictionary = {
   caption: (item, filterInfo) => {
     var _a;
@@ -74,13 +74,16 @@ function getImage(name, gxImageConstructor) {
     return gximage;
   }
 }
-const fromGxImageToURL = (image, Settings, gxImageConstructor) => {
+const fromGxImageToURL = (gxImage, Settings, gxImageConstructor) => {
+  if (!gxImage) {
+    return;
+  }
   let url = "";
-  if (image.id) {
-    url = getImage(image.id, gxImageConstructor).uri;
+  if (gxImage.id) {
+    url = getImage(gxImage.id, gxImageConstructor).uri;
   }
   else {
-    url = image.uri;
+    url = gxImage.uri;
   }
   if (!url) {
     return "";
@@ -145,6 +148,17 @@ const GXRenderItem = (itemModel, treeState, treeHasFilter, lastItem, level) => {
         ? subModel.id === itemModel.lastItemId
         : index === itemModel.items.length - 1), level + 1))));
 };
+const defaultSortItemsCallback = (subModel) => {
+  subModel.sort((a, b) => {
+    if (a.order < b.order) {
+      return -1;
+    }
+    if (a.order > b.order) {
+      return 0;
+    }
+    return a.caption <= b.caption ? -1 : 0;
+  });
+};
 const ChTreeViewRender = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
@@ -239,6 +253,10 @@ const ChTreeViewRender = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
      * lines.
      */
     this.showLines = "none";
+    /**
+     * Callback that is executed when the treeModel is changed to order its items.
+     */
+    this.sortItemsCallback = defaultSortItemsCallback;
     /**
      * 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
@@ -304,10 +322,6 @@ const ChTreeViewRender = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
       this.itemContextmenu.emit(event.detail);
     };
     this.handleItemsDropped = (event) => {
-      if (!this.dropItemsCallback) {
-        return;
-      }
-      event.stopPropagation();
       const dataTransferInfo = event.detail;
       const newContainer = dataTransferInfo.newContainer;
       const newParentId = newContainer.id;
@@ -316,55 +330,24 @@ const ChTreeViewRender = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
         return;
       }
       const draggedItems = dataTransferInfo.draggedItems;
-      if (draggedItems.length === 0) {
+      if (draggedItems.length === 0 || !this.dropItemsCallback) {
         return;
       }
+      event.stopPropagation();
       const promise = this.dropItemsCallback(dataTransferInfo);
       this.waitDropProcessing = true;
       promise.then(async (response) => {
+        this.dropItems(response.acceptDrop, dataTransferInfo, response.items);
         this.waitDropProcessing = false;
-        if (!response.acceptDrop) {
-          return;
-        }
-        const newParentUIModel = this.flattenedTreeModel.get(newParentId).item;
-        // Only move the items to the new parent, keeping the state
-        if (dataTransferInfo.dropInTheSameTree) {
-          // Add the UI models to the new container and remove the UI models from
-          // the old containers
-          draggedItems.forEach(this.moveItemToNewParent(newParentUIModel));
-          // When the selected items are moved, the tree must remove its internal
-          // state to not have undefined references
-          if (dataTransferInfo.draggingSelectedItems) {
-            await this.treeRef.clearSelectedItemsInfo();
-          }
-        }
-        // Add the new items
-        else {
-          if (response.items == null) {
-            return;
-          }
-          // Add new items to the parent
-          newParentUIModel.items.push(...response.items);
-          // Flatten the new UI models
-          response.items.forEach(this.flattenItemUIModel(newParentUIModel));
-        }
-        this.sortItems(newParentUIModel.items);
-        // Open the item to visualize the new subitems
-        newParentUIModel.expanded = true;
-        // Re-sync checked items
-        this.emitCheckedItemsChange();
-        // Update filters
-        this.processFilters();
-        // There is no need to force and update, since the waitDropProcessing
-        // prop was modified
       });
     };
     this.moveItemToNewParent = (newParentUIModel) => (dataTransferInfo) => {
       const itemUIModelExtended = this.flattenedTreeModel.get(dataTransferInfo.id);
       const item = itemUIModelExtended.item;
       const oldParentItem = itemUIModelExtended.parentItem;
-      // Remove the UI model from the previous parent
-      oldParentItem.items.splice(oldParentItem.items.indexOf(item), 1);
+      // Remove the UI model from the previous parent. The equality function
+      // must be by index, not by object reference
+      oldParentItem.items.splice(oldParentItem.items.findIndex(el => el.id === item.id), 1);
       // Add the UI Model to the new parent
       newParentUIModel.items.push(item);
       // Reference the new parent in the item
@@ -423,6 +406,47 @@ const ChTreeViewRender = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
   handleTreeModelChange() {
     this.flattenModel();
   }
+  /**
+   * Given the drop accepting, the data transfer info and the external items,
+   * it process the drops of the items in the tree.
+   */
+  async dropItems(acceptDrop, dataTransferInfo, items) {
+    if (!acceptDrop) {
+      return;
+    }
+    const newParentId = dataTransferInfo.newContainer.id;
+    const newParentUIModel = this.flattenedTreeModel.get(newParentId).item;
+    // Only move the items to the new parent, keeping the state
+    if (dataTransferInfo.dropInTheSameTree) {
+      // Add the UI models to the new container and remove the UI models from
+      // the old containers
+      dataTransferInfo.draggedItems.forEach(this.moveItemToNewParent(newParentUIModel));
+      // When the selected items are moved, the tree must remove its internal
+      // state to not have undefined references
+      if (dataTransferInfo.draggingSelectedItems) {
+        await this.treeRef.clearSelectedItemsInfo();
+      }
+    }
+    // Add the new items
+    else {
+      if (items == null) {
+        return;
+      }
+      // Add new items to the parent
+      newParentUIModel.items.push(...items);
+      // Flatten the new UI models
+      items.forEach(this.flattenItemUIModel(newParentUIModel));
+    }
+    this.sortItems(newParentUIModel.items);
+    // Open the item to visualize the new subitems
+    newParentUIModel.expanded = true;
+    // Re-sync checked items
+    this.emitCheckedItemsChange();
+    // Update filters
+    this.processFilters();
+    // Force re-render
+    forceUpdate(this);
+  }
   /**
    * Given an item id, an array of items to add, the download status and the
    * lazy state, updates the item's UI Model.
@@ -771,6 +795,7 @@ const ChTreeViewRender = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     "treeModel": [16],
     "useGxRender": [4, "use-gx-render"],
     "waitDropProcessing": [32],
+    "dropItems": [64],
     "loadLazyContent": [64],
     "scrollIntoVisible": [64],
     "toggleItems": [64],

package/dist/components/tree-view.js CHANGED Viewed

@@ -108,8 +108,8 @@ const ChTreeView = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       this.needForRAF = false; // No need to call RAF up until next frame
       requestAnimationFrame(() => {
         this.needForRAF = true; // RAF now consumes the movement instruction so a new one can come
-        this.el.style.setProperty(POSITION_X_DRAG_CUSTOM_VAR, `${this.lastDragEvent.pageX}px`);
-        this.el.style.setProperty(POSITION_Y_DRAG_CUSTOM_VAR, `${this.lastDragEvent.pageY}px`);
+        this.el.style.setProperty(POSITION_X_DRAG_CUSTOM_VAR, `${this.lastDragEvent.clientX}px`);
+        this.el.style.setProperty(POSITION_Y_DRAG_CUSTOM_VAR, `${this.lastDragEvent.clientY}px`);
       });
     };
     this.fixScrollPositionOnDrag = () => {

package/dist/esm/ch-checkbox_4.entry.js CHANGED Viewed

@@ -193,8 +193,8 @@ const ChTreeView = class {
       this.needForRAF = false; // No need to call RAF up until next frame
       requestAnimationFrame(() => {
         this.needForRAF = true; // RAF now consumes the movement instruction so a new one can come
-        this.el.style.setProperty(POSITION_X_DRAG_CUSTOM_VAR, `${this.lastDragEvent.pageX}px`);
-        this.el.style.setProperty(POSITION_Y_DRAG_CUSTOM_VAR, `${this.lastDragEvent.pageY}px`);
+        this.el.style.setProperty(POSITION_X_DRAG_CUSTOM_VAR, `${this.lastDragEvent.clientX}px`);
+        this.el.style.setProperty(POSITION_Y_DRAG_CUSTOM_VAR, `${this.lastDragEvent.clientY}px`);
       });
     };
     this.fixScrollPositionOnDrag = () => {
@@ -563,7 +563,7 @@ const ChTreeView = class {
 };
 ChTreeView.style = treeViewCss;
-const treeViewItemCss = ":where(button){all:unset;display:flex;user-select:none;touch-action:manipulation;-webkit-user-drag:element}*,::before,::after{box-sizing:border-box}:host{--ch-tree-view-view__checkbox-size:1em;--ch-tree-view-view__expandable-button-width:0.75em;--ch-tree-view-item__dashed-line--inset-inline-start:0px;--ch-tree-view-item__dashed-line--inset-inline-end:4px;--ch-tree-view-item-gap:5px;--ch-tree-view-item-custom-padding-inline-start:0px;--ch-tree-tab-width:calc(\n    var(--ch-tree-view-view__checkbox-size) +\n      var(--ch-tree-view-view__expandable-button-width) +\n      (var(--ch-tree-view-item-gap) * 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:calc( var(--padding-inline-start) + var(--ch-tree-view-item-custom-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(--ch-tree-tab-width)\n  )}.header--even+.expandable{--parent-padding-inline-start--even:calc(\n    var(--parent-padding-inline-start--odd, 0px) + var(--ch-tree-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(--ch-tree-tab-width) -\n          calc(\n    var(--ch-tree-view-view__expandable-button-width) +\n      var(--ch-tree-view-item-gap)\n  )\n      )}.header--even-expandable+.expandable{--parent-padding-inline-start--even:calc(\n        var(--parent-padding-inline-start--odd, 0px) + var(--ch-tree-tab-width) -\n          calc(\n    var(--ch-tree-view-view__expandable-button-width) +\n      var(--ch-tree-view-item-gap)\n  )\n      )}.header--odd{--padding-inline-start:calc(\n    var(--parent-padding-inline-start--even, 0px) + var(--ch-tree-tab-width)\n  )}.header--odd+.expandable{--parent-padding-inline-start--odd:calc(\n    var(--parent-padding-inline-start--even, 0px) + var(--ch-tree-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(--ch-tree-tab-width) -\n          calc(\n    var(--ch-tree-view-view__expandable-button-width) +\n      var(--ch-tree-view-item-gap)\n  )\n      )}.header--odd-expandable+.expandable{--parent-padding-inline-start--odd:calc(\n        var(--parent-padding-inline-start--even, 0px) + var(--ch-tree-tab-width) -\n          calc(\n    var(--ch-tree-view-view__expandable-button-width) +\n      var(--ch-tree-view-item-gap)\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(--ch-tree-view-view__expandable-button-width) +\n      var(--ch-tree-view-item-gap)\n  )}.header--expandable-offset+.expandable{--parent-expandable-offset:calc(\n    var(--ch-tree-view-view__expandable-button-width) / 2\n  )}.header--checkbox-offset+.expandable{--parent-checkbox-offset:calc(\n    var(--ch-tree-view-view__checkbox-size) / 2\n  );--parent-negative-checkbox-offset:calc(\n    var(--ch-tree-view-view__checkbox-size) / 2\n  )}.dashed-line{position:absolute;inset-inline-start:calc( var(--inset-inline-start) + var(--ch-tree-view-item__dashed-line--inset-inline-start) + var(--ch-tree-view-item-custom-padding-inline-start) );height:1px;width:calc( var(--ch-tree-tab-width) - var(--parent-checkbox-offset) - var(--parent-expandable-offset) - var(--own-offset) - var(--ch-tree-view-item__dashed-line--inset-inline-start) - var(--ch-tree-view-item__dashed-line--inset-inline-end) );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(--ch-tree-view-item-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(--ch-tree-view-view__expandable-button-width);height:var(--ch-tree-view-view__expandable-button-width);margin-inline-end:var(--ch-tree-view-item-gap);z-index:1;cursor:pointer;content-visibility:auto;contain-intrinsic-size:auto var(--ch-tree-view-view__expandable-button-width)}.expandable-button::before{content:\"\";width:calc(100% - 2px);height:calc(100% - 2px);background-color:currentColor;-webkit-mask-size:calc( var(--ch-tree-view-view__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{width:var(--ch-tree-view-view__checkbox-size);margin-inline-end:var(--ch-tree-view-item-gap)}.checkbox::part(container){width:var(--ch-tree-view-view__checkbox-size);height:var(--ch-tree-view-view__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:var(--ch-tree-view-item-gap)}.right-img{grid-area:right-img;margin-inline-start:var(--ch-tree-view-item-gap)}.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-auto-rows:min-content;position:relative}.expandable--lazy-loaded{content-visibility:auto;contain-intrinsic-size:auto 100px}.expandable--collapsed{display:none;overflow:hidden;content-visibility:hidden}";
+const treeViewItemCss = ":where(button){all:unset;display:flex;user-select:none;touch-action:manipulation;-webkit-user-drag:element}*,::before,::after{box-sizing:border-box}:host{--ch-tree-view-view__checkbox-size:1em;--ch-tree-view-view__expandable-button-width:0.75em;--ch-tree-view-item__dashed-line--inset-inline-start:0px;--ch-tree-view-item__dashed-line--inset-inline-end:4px;--ch-tree-view-item-gap:5px;--ch-tree-view-item-custom-padding-inline-start:0px;--ch-tree-tab-width:calc(\n    var(--ch-tree-view-view__checkbox-size) +\n      var(--ch-tree-view-view__expandable-button-width) +\n      (var(--ch-tree-view-item-gap) * 2)\n  );display:grid;grid-template-rows:min-content}.header{--own-offset:0px;display:flex;align-items:center;min-height:calc(1em + 6px);padding-inline-start:calc( var(--padding-inline-start) + var(--ch-tree-view-item-custom-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(--ch-tree-tab-width)\n  )}.header--even+.expandable{--parent-padding-inline-start--even:calc(\n    var(--parent-padding-inline-start--odd, 0px) + var(--ch-tree-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(--ch-tree-tab-width) -\n          calc(\n    var(--ch-tree-view-view__expandable-button-width) +\n      var(--ch-tree-view-item-gap)\n  )\n      )}.header--even-expandable+.expandable{--parent-padding-inline-start--even:calc(\n        var(--parent-padding-inline-start--odd, 0px) + var(--ch-tree-tab-width) -\n          calc(\n    var(--ch-tree-view-view__expandable-button-width) +\n      var(--ch-tree-view-item-gap)\n  )\n      )}.header--odd{--padding-inline-start:calc(\n    var(--parent-padding-inline-start--even, 0px) + var(--ch-tree-tab-width)\n  )}.header--odd+.expandable{--parent-padding-inline-start--odd:calc(\n    var(--parent-padding-inline-start--even, 0px) + var(--ch-tree-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(--ch-tree-tab-width) -\n          calc(\n    var(--ch-tree-view-view__expandable-button-width) +\n      var(--ch-tree-view-item-gap)\n  )\n      )}.header--odd-expandable+.expandable{--parent-padding-inline-start--odd:calc(\n        var(--parent-padding-inline-start--even, 0px) + var(--ch-tree-tab-width) -\n          calc(\n    var(--ch-tree-view-view__expandable-button-width) +\n      var(--ch-tree-view-item-gap)\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(--ch-tree-view-view__expandable-button-width) +\n      var(--ch-tree-view-item-gap)\n  )}.header--expandable-offset+.expandable{--parent-expandable-offset:calc(\n    var(--ch-tree-view-view__expandable-button-width) / 2\n  )}.header--checkbox-offset+.expandable{--parent-checkbox-offset:calc(\n    var(--ch-tree-view-view__checkbox-size) / 2\n  );--parent-negative-checkbox-offset:calc(\n    var(--ch-tree-view-view__checkbox-size) / 2\n  )}.dashed-line{position:absolute;inset-inline-start:calc( var(--inset-inline-start) + var(--ch-tree-view-item__dashed-line--inset-inline-start) + var(--ch-tree-view-item-custom-padding-inline-start) );height:1px;width:calc( var(--ch-tree-tab-width) - var(--parent-checkbox-offset) - var(--parent-expandable-offset) - var(--own-offset) - var(--ch-tree-view-item__dashed-line--inset-inline-start) - var(--ch-tree-view-item__dashed-line--inset-inline-end) );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(--ch-tree-view-item-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(--ch-tree-view-view__expandable-button-width);height:var(--ch-tree-view-view__expandable-button-width);margin-inline-end:var(--ch-tree-view-item-gap);z-index:1;cursor:pointer;content-visibility:auto;contain-intrinsic-size:auto var(--ch-tree-view-view__expandable-button-width)}.expandable-button::before{content:\"\";width:calc(100% - 2px);height:calc(100% - 2px);background-color:currentColor;-webkit-mask-size:calc( var(--ch-tree-view-view__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{width:var(--ch-tree-view-view__checkbox-size);margin-inline-end:var(--ch-tree-view-item-gap)}.checkbox::part(container){width:var(--ch-tree-view-view__checkbox-size);height:var(--ch-tree-view-view__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:var(--ch-tree-view-item-gap)}.right-img{grid-area:right-img;margin-inline-start:var(--ch-tree-view-item-gap)}.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-auto-rows:min-content;position:relative}.expandable--lazy-loaded{content-visibility:auto;contain-intrinsic-size:auto 100px}.expandable--collapsed{display:none;overflow:hidden;content-visibility:hidden}";
 const resetDragImage = new Image();
 const DISTANCE_TO_CHECKBOX_CUSTOM_VAR = "--ch-tree-view-item-distance-to-checkbox";
@@ -1162,12 +1162,12 @@ const ChTreeViewItem = class {
 };
 ChTreeViewItem.style = treeViewItemCss;
-const filterWithCamelCase = (stringToFilter, filter, camelCase) => camelCase
+const filterWithCase = (stringToFilter, filter, matchCase) => matchCase
   ? stringToFilter.includes(filter)
   : stringToFilter.toLowerCase().includes(filter.toLowerCase());
-const filterWithString = (stringToFilter, filter, filterOptions) => filterOptions.regularExpression
+const filterWithString = (stringToFilter, filter, filterOptions) => (filterOptions === null || filterOptions === void 0 ? void 0 : filterOptions.regularExpression)
   ? stringToFilter.match(filter) !== null
-  : filterWithCamelCase(stringToFilter, filter, filterOptions.camelCase);
+  : filterWithCase(stringToFilter, filter, filterOptions === null || filterOptions === void 0 ? void 0 : filterOptions.matchCase);
 const filterDictionary = {
   caption: (item, filterInfo) => {
     var _a;
@@ -1233,13 +1233,16 @@ function getImage(name, gxImageConstructor) {
     return gximage;
   }
 }
-const fromGxImageToURL = (image, Settings, gxImageConstructor) => {
+const fromGxImageToURL = (gxImage, Settings, gxImageConstructor) => {
+  if (!gxImage) {
+    return;
+  }
   let url = "";
-  if (image.id) {
-    url = getImage(image.id, gxImageConstructor).uri;
+  if (gxImage.id) {
+    url = getImage(gxImage.id, gxImageConstructor).uri;
   }
   else {
-    url = image.uri;
+    url = gxImage.uri;
   }
   if (!url) {
     return "";
@@ -1304,6 +1307,17 @@ const GXRenderItem = (itemModel, treeState, treeHasFilter, lastItem, level) => {
         ? subModel.id === itemModel.lastItemId
         : index === itemModel.items.length - 1), level + 1))));
 };
+const defaultSortItemsCallback = (subModel) => {
+  subModel.sort((a, b) => {
+    if (a.order < b.order) {
+      return -1;
+    }
+    if (a.order > b.order) {
+      return 0;
+    }
+    return a.caption <= b.caption ? -1 : 0;
+  });
+};
 const ChTreeViewRender = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -1397,6 +1411,10 @@ const ChTreeViewRender = class {
      * lines.
      */
     this.showLines = "none";
+    /**
+     * Callback that is executed when the treeModel is changed to order its items.
+     */
+    this.sortItemsCallback = defaultSortItemsCallback;
     /**
      * 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
@@ -1462,10 +1480,6 @@ const ChTreeViewRender = class {
       this.itemContextmenu.emit(event.detail);
     };
     this.handleItemsDropped = (event) => {
-      if (!this.dropItemsCallback) {
-        return;
-      }
-      event.stopPropagation();
       const dataTransferInfo = event.detail;
       const newContainer = dataTransferInfo.newContainer;
       const newParentId = newContainer.id;
@@ -1474,55 +1488,24 @@ const ChTreeViewRender = class {
         return;
       }
       const draggedItems = dataTransferInfo.draggedItems;
-      if (draggedItems.length === 0) {
+      if (draggedItems.length === 0 || !this.dropItemsCallback) {
         return;
       }
+      event.stopPropagation();
       const promise = this.dropItemsCallback(dataTransferInfo);
       this.waitDropProcessing = true;
       promise.then(async (response) => {
+        this.dropItems(response.acceptDrop, dataTransferInfo, response.items);
         this.waitDropProcessing = false;
-        if (!response.acceptDrop) {
-          return;
-        }
-        const newParentUIModel = this.flattenedTreeModel.get(newParentId).item;
-        // Only move the items to the new parent, keeping the state
-        if (dataTransferInfo.dropInTheSameTree) {
-          // Add the UI models to the new container and remove the UI models from
-          // the old containers
-          draggedItems.forEach(this.moveItemToNewParent(newParentUIModel));
-          // When the selected items are moved, the tree must remove its internal
-          // state to not have undefined references
-          if (dataTransferInfo.draggingSelectedItems) {
-            await this.treeRef.clearSelectedItemsInfo();
-          }
-        }
-        // Add the new items
-        else {
-          if (response.items == null) {
-            return;
-          }
-          // Add new items to the parent
-          newParentUIModel.items.push(...response.items);
-          // Flatten the new UI models
-          response.items.forEach(this.flattenItemUIModel(newParentUIModel));
-        }
-        this.sortItems(newParentUIModel.items);
-        // Open the item to visualize the new subitems
-        newParentUIModel.expanded = true;
-        // Re-sync checked items
-        this.emitCheckedItemsChange();
-        // Update filters
-        this.processFilters();
-        // There is no need to force and update, since the waitDropProcessing
-        // prop was modified
       });
     };
     this.moveItemToNewParent = (newParentUIModel) => (dataTransferInfo) => {
       const itemUIModelExtended = this.flattenedTreeModel.get(dataTransferInfo.id);
       const item = itemUIModelExtended.item;
       const oldParentItem = itemUIModelExtended.parentItem;
-      // Remove the UI model from the previous parent
-      oldParentItem.items.splice(oldParentItem.items.indexOf(item), 1);
+      // Remove the UI model from the previous parent. The equality function
+      // must be by index, not by object reference
+      oldParentItem.items.splice(oldParentItem.items.findIndex(el => el.id === item.id), 1);
       // Add the UI Model to the new parent
       newParentUIModel.items.push(item);
       // Reference the new parent in the item
@@ -1581,6 +1564,47 @@ const ChTreeViewRender = class {
   handleTreeModelChange() {
     this.flattenModel();
   }
+  /**
+   * Given the drop accepting, the data transfer info and the external items,
+   * it process the drops of the items in the tree.
+   */
+  async dropItems(acceptDrop, dataTransferInfo, items) {
+    if (!acceptDrop) {
+      return;
+    }
+    const newParentId = dataTransferInfo.newContainer.id;
+    const newParentUIModel = this.flattenedTreeModel.get(newParentId).item;
+    // Only move the items to the new parent, keeping the state
+    if (dataTransferInfo.dropInTheSameTree) {
+      // Add the UI models to the new container and remove the UI models from
+      // the old containers
+      dataTransferInfo.draggedItems.forEach(this.moveItemToNewParent(newParentUIModel));
+      // When the selected items are moved, the tree must remove its internal
+      // state to not have undefined references
+      if (dataTransferInfo.draggingSelectedItems) {
+        await this.treeRef.clearSelectedItemsInfo();
+      }
+    }
+    // Add the new items
+    else {
+      if (items == null) {
+        return;
+      }
+      // Add new items to the parent
+      newParentUIModel.items.push(...items);
+      // Flatten the new UI models
+      items.forEach(this.flattenItemUIModel(newParentUIModel));
+    }
+    this.sortItems(newParentUIModel.items);
+    // Open the item to visualize the new subitems
+    newParentUIModel.expanded = true;
+    // Re-sync checked items
+    this.emitCheckedItemsChange();
+    // Update filters
+    this.processFilters();
+    // Force re-render
+    forceUpdate(this);
+  }
   /**
    * Given an item id, an array of items to add, the download status and the
    * lazy state, updates the item's UI Model.