@genexus/genexus-ide-ui 0.0.108 → 0.0.109

package/dist/cjs/ch-tree-view_5.cjs.entry.js

@@ -725,7 +725,7 @@ const ChTreeViewDrop = class {
 };
 ChTreeViewDrop.style = treeViewDropCss;
 
-const treeViewItemCss = "*,::after,::before{box-sizing:border-box}:where(button){all:unset;display:flex;user-select:none;touch-action:manipulation;-webkit-user-drag:element}:host{display:grid;grid-template-rows:min-content}.header{display:flex;gap:var(--ch-tree-view-item-gap);align-items:center;min-block-size:calc(1em + 6px)}.header--disabled{opacity:0.5;pointer-events:none}.dashed-line{--inset-inline-start:calc(var(--ch-tree-tab-size) * (var(--level) - 1) - var(--parent-offset, 0px) + var(--ch-tree-view-item-custom-padding-inline-start) + var(--ch-tree-view-item__expandable-button-size) * 0.5 + var(--ch-tree-view-item__dashed-line--inset-inline-start));position:absolute;inset-inline-start:var(--inset-inline-start);inline-size:calc(var(--ch-tree-view-item-indentation) - var(--inset-inline-start) - var(--ch-tree-view-item__dashed-line--inset-inline-end));block-size:1px;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,.expandable-button-decorative::before{display:grid;place-items:center;inline-size:var(--ch-tree-view-item__expandable-button-size);block-size:var(--ch-tree-view-item__expandable-button-size);z-index:1;cursor:pointer;content-visibility:auto;contain-intrinsic-size:auto var(--ch-tree-view-item__expandable-button-size)}.expandable-button-decorative::before{content:\"\";background-color:currentColor;-webkit-mask:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 18 18\" fill=\"none\"><path d=\"M16.5 5L8.7 12.7L1 5\" stroke=\"%23000\" stroke-width=\"1.2\" stroke-linecap=\"round\"/></svg>') 50% 50%/calc(100% - 4px) calc(100% - 4px) no-repeat;cursor:unset}.expandable-button-decorative--collapsed::before{transform:rotate(-90deg)}.expandable-button::before{content:\"\";inline-size:calc(100% - 4px);block-size:calc(100% - 4px);background-color:currentColor;-webkit-mask-size:calc(var(--ch-tree-view-item__expandable-button-size) - 4px)}.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 currentColor}.checkbox{inline-size:var(--ch-tree-view-item__checkbox-size)}.checkbox::part(container){inline-size:var(--ch-tree-view-item__checkbox-size);block-size:var(--ch-tree-view-item__checkbox-size)}.action{display:grid;grid-template:\"start-img text\"/max-content 1fr;gap:var(--ch-tree-view-item-gap);align-items:center;block-size:100%;flex:1;cursor:pointer}.action--end-img{grid-template:\"start-img text end-img\"/max-content 1fr max-content}.readonly-mode{padding-block:0.75px}.edit-name{grid-area:text;inline-size:100%;block-size:100%;padding:0;margin:0;background-color:unset;border:unset;color:unset;font:unset;outline:unset}.pseudo-img--start::before,.pseudo-img--end::after,.img{display:block;inline-size:var(--ch-tree-view-item__image-size);block-size:var(--ch-tree-view-item__image-size);content-visibility:auto;contain-intrinsic-size:auto var(--ch-tree-view-item__image-size)}.pseudo-img--start::before,.start-img{content:\"\";grid-area:start-img}.pseudo-img--end::after,.end-img{content:\"\";grid-area:end-img}.start-img-type--background::before{background:no-repeat center/100% var(--ch-start-img)}.end-img-type--background::after{background:no-repeat center/100% var(--ch-end-img)}.start-img-type--mask::before{-webkit-mask:var(--ch-start-img) 50% 50%/100% 100% no-repeat;background-color:currentColor}.end-img-type--mask::after{-webkit-mask:var(--ch-end-img) 50% 50%/100% 100% no-repeat;background-color:currentColor}.downloading{inline-size:0.75em;block-size:0.75em;margin-inline:8px 2px;border:2px solid currentColor;border-inline-start-color:transparent;border-radius:50%;opacity:0.75;animation:spin 1s linear infinite, avoid-flickering 75ms}@keyframes avoid-flickering{0%,100%{display:none}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.expandable{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}";
+const treeViewItemCss = "*,::after,::before{box-sizing:border-box}:where(button){all:unset;display:flex;user-select:none;touch-action:manipulation;-webkit-user-drag:element}:host{display:grid;grid-template-rows:min-content}.header{display:flex;gap:var(--ch-tree-view-item-gap);align-items:center;min-block-size:calc(1em + 6px)}.header--disabled{opacity:0.5;pointer-events:none}.dashed-line{--inset-inline-start:calc(var(--ch-tree-tab-size) * (var(--level) - 1) - var(--parent-offset, 0px) + var(--ch-tree-view-item-custom-padding-inline-start) + var(--ch-tree-view-item__expandable-button-size) * 0.5 + var(--ch-tree-view-item__dashed-line--inset-inline-start));position:absolute;inset-inline-start:var(--inset-inline-start);inline-size:calc(var(--ch-tree-view-item-indentation) - var(--inset-inline-start) - var(--ch-tree-view-item__dashed-line--inset-inline-end));block-size:1px;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,.expandable-button-decorative::before{display:grid;place-items:center;inline-size:var(--ch-tree-view-item__expandable-button-size);block-size:var(--ch-tree-view-item__expandable-button-size);z-index:1;cursor:pointer}.expandable-button-decorative::before{content:\"\";background-color:currentColor;-webkit-mask:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 18 18\" fill=\"none\"><path d=\"M16.5 5L8.7 12.7L1 5\" stroke=\"%23000\" stroke-width=\"1.2\" stroke-linecap=\"round\"/></svg>') 50% 50%/calc(100% - 4px) calc(100% - 4px) no-repeat;cursor:unset}.expandable-button-decorative--collapsed::before{transform:rotate(-90deg)}.expandable-button::before{content:\"\";inline-size:calc(100% - 4px);block-size:calc(100% - 4px);background-color:currentColor;-webkit-mask-size:calc(var(--ch-tree-view-item__expandable-button-size) - 4px)}.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 currentColor}.checkbox{inline-size:var(--ch-tree-view-item__checkbox-size)}.checkbox::part(container){inline-size:var(--ch-tree-view-item__checkbox-size);block-size:var(--ch-tree-view-item__checkbox-size)}.action{display:grid;grid-template:\"start-img text\"/max-content 1fr;gap:var(--ch-tree-view-item-gap);align-items:center;block-size:100%;flex:1;cursor:pointer}.action--end-img{grid-template:\"start-img text end-img\"/max-content 1fr max-content}.readonly-mode{padding-block:0.75px}.edit-name{grid-area:text;inline-size:100%;block-size:100%;padding:0;margin:0;background-color:unset;border:unset;color:unset;font:unset;outline:unset}.pseudo-img--start::before,.pseudo-img--end::after,.img{display:block;inline-size:var(--ch-tree-view-item__image-size);block-size:var(--ch-tree-view-item__image-size);content-visibility:auto;contain-intrinsic-size:auto var(--ch-tree-view-item__image-size)}.pseudo-img--start::before,.start-img{content:\"\";grid-area:start-img}.pseudo-img--end::after,.end-img{content:\"\";grid-area:end-img}.start-img-type--background::before{background:no-repeat center/100% var(--ch-start-img)}.end-img-type--background::after{background:no-repeat center/100% var(--ch-end-img)}.start-img-type--mask::before{-webkit-mask:var(--ch-start-img) 50% 50%/100% 100% no-repeat;background-color:currentColor}.end-img-type--mask::after{-webkit-mask:var(--ch-end-img) 50% 50%/100% 100% no-repeat;background-color:currentColor}.downloading{inline-size:0.75em;block-size:0.75em;margin-inline:8px 2px;border:2px solid currentColor;border-inline-start-color:transparent;border-radius:50%;opacity:0.75;animation:spin 1s linear infinite, avoid-flickering 75ms}@keyframes avoid-flickering{0%,100%{display:none}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.expandable{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}";
 
 var __classPrivateFieldGet$1 = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
     if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
@@ -862,9 +862,14 @@ const ChTreeViewItem = (_a$1 = class {
                 // Ctrl key
                 if (helpers.mouseEventModifierKey(event)) {
                     __classPrivateFieldGet$1(this, _toggleSelected, "f").call(this);
+                    return;
+                }
+                // Double click was triggered, don't update the selection or expand
+                if (event.detail >= 2) {
+                    return;
                 }
                 // Expand on click interaction
-                else if (this.expandOnClick) {
+                if (this.expandOnClick) {
                     __classPrivateFieldGet$1(this, _toggleExpand, "f").call(this, event);
                 }
                 // Click only selects the item
@@ -915,6 +920,7 @@ const ChTreeViewItem = (_a$1 = class {
                     __classPrivateFieldGet$1(this, _toggleOrSelect, "f").call(this, event);
                     return;
                 }
+                // The action was provoked by the keyboard, emit openReference event
                 __classPrivateFieldGet$1(this, _emitOpenReference, "f").call(this);
                 // Enter or space
                 __classPrivateFieldGet$1(this, _toggleExpand, "f").call(this, event);
@@ -1472,11 +1478,11 @@ const isItemDisabled = (itemModel, treeState, useGxRender) => {
         ? gxDropDisabled(itemModel, treeState)
         : (_b = itemModel.dropDisabled) !== null && _b !== void 0 ? _b : treeState.dropDisabled;
 };
-const treeDropId = (treeItemId) => `ch-tree-view-drop__${treeItemId}`;
+const treeDropId$1 = (treeItemId) => `ch-tree-view-drop__${treeItemId}`;
 const defaultRenderItem$1 = (itemModel, treeState, treeHasFilter, lastItem, level, dropBeforeAndAfterEnabled, useGxRender = false) => {
     var _b, _c, _d, _e, _f, _g, _h;
     return (treeState.filterType === "none" || itemModel.render !== false) && [
-        dropBeforeAndAfterEnabled && (index.h("ch-tree-view-drop", { id: treeDropId(itemModel.id), level: level, treeItemId: itemModel.id, type: "before" })),
+        dropBeforeAndAfterEnabled && (index.h("ch-tree-view-drop", { id: treeDropId$1(itemModel.id), level: level, treeItemId: itemModel.id, type: "before" })),
         index.h("ch-tree-view-item", { key: itemModel.id, id: itemModel.id, caption: itemModel.caption, checkbox: (_b = itemModel.checkbox) !== null && _b !== void 0 ? _b : treeState.checkbox, checked: (_c = itemModel.checked) !== null && _c !== void 0 ? _c : treeState.checked, class: itemModel.class || treeState.treeViewItemCssClass, disabled: useGxRender
                 ? itemModel.enabled === false
                 : itemModel.disabled, downloading: itemModel.downloading, dragDisabled: useGxRender
@@ -1497,7 +1503,7 @@ const defaultRenderItem$1 = (itemModel, treeState, treeHasFilter, lastItem, leve
             // has drops disabled, don't render the ch-tree-view-drop elements.
             treeState.dropMode !== "above" &&
                 isItemDisabled(itemModel, treeState, useGxRender) !== true, useGxRender))),
-        dropBeforeAndAfterEnabled && lastItem && (index.h("ch-tree-view-drop", { id: treeDropId(itemModel.id) + "-after", level: level, treeItemId: itemModel.id, type: "after" }))
+        dropBeforeAndAfterEnabled && lastItem && (index.h("ch-tree-view-drop", { id: treeDropId$1(itemModel.id) + "-after", level: level, treeItemId: itemModel.id, type: "after" }))
     ];
 };
 const defaultSortItemsCallback = (subModel) => {
@@ -2335,24 +2341,36 @@ ChTreeViewRender.style = treeViewRenderCss;
 
 const resolveImgPath = (iconAssetsPath, img) => `${iconAssetsPath}/${img}.svg`;
 
-const treeViewCss = ":root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-01-font-weight);font-size:var(--ds-title-01-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-01--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-01-font-weight);font-size:var(--ds-title-01-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-02{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-02-font-weight);font-size:var(--ds-title-02-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-02--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-02-font-weight);font-size:var(--ds-title-02-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable);color:var(--color-on-primary)}.gxg-title-03{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-03-font-weight);font-size:var(--ds-title-03-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-03--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-03-font-weight);font-size:var(--ds-title-03-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-04{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-04-font-weight);font-size:var(--ds-title-04-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-04--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-04-font-weight);font-size:var(--ds-title-04-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-05{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-05-font-weight);font-size:var(--ds-title-05-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-05--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-05-font-weight);font-size:var(--ds-title-05-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-text{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable)}.gxg-text--negative{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-text--gray{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--dimmed)}.gxg-quote{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);font-style:italic}.gxg-quote--negative{color:var(--ds-base-font-color--negative)}.gxg-link{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--ds-base-font-color--link-hover)}.gxg-link:active{color:var(--ds-base-font-color--link-active)}.gxg-link-gray{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--ds-base-font-color--dimmed)}.gxg-link-gray:hover{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--ds-base-font-color--dimmed);filter:brightness(1.4)}.gxg-alert-error{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--error);display:inline-block}.gxg-alert-warning{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--warning);display:inline-block}.gxg-alert-success{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--success);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(--ds-base-font-family-primary);font-weight:var(--gxg-label-font-weight);font-size:var(--gxg-label-font-size);color:var(--gxg-label-color);text-align:center;line-height:1.455em;display:flex;align-items:center}.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-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height: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-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gxg-scrollbar::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}gxg-tree-view{display:contents}.tree-view{font-family:var(--ds-base-font-family-primary);font-size:var(--gxg-tree-view-item__font-size);font-weight:var(--ds-base-font-weight);color:var(--ds-base-font-color)}.tree-view::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.tree-view::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.tree-view::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.tree-view::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.tree-view::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}.tree-view .ch-tree-view-container{min-inline-size:max-content;padding:var(--gxg-tree-view-container__padding)}.tree-view-item{--ch-tree-view-view__checkbox-size:var(--ds-checkbox-size);--ch-tree-view-item-gap:var(--gxg-tree-view-item__gap);--ch-tree-view-item-custom-padding-inline-start:var(\n    --gxg-tree-view-item__custom-padding-inline-start\n  );--ch-tree-view-item-custom-padding-inline-end:var(\n    --gxg-tree-view-item__custom-padding-inline-end\n  );}.tree-view-item::part(dashed-line){border-color:var(--gxg-tree-view-item-dashed-line__border-color)}.tree-view-item::part(header){border-radius:var(--gxg-tree-view-item-header__border-radius);padding-block-start:var(--gxg-tree-view-item-header__padding-top);padding-block-end:var(--gxg-tree-view-item-header__padding-bottom);padding-inline-end:var(--gxg-tree-view-item-header__padding-inline-end)}.tree-view-item::part(header):hover{color:var(--gxg-tree-view-item__color--hover)}.tree-view-item::part(header):before{content:\"\";display:block}.tree-view-item::part(header):hover{background-color:var(--ds-item-background-color--hover);background-color:var(--ds-item-background-color--hover)}.tree-view-item::part(header):focus{outline:var(--ds-focus-border-width) solid var(--ds-border-color-control--focused);outline-offset:-1px;outline-offset:0;outline-offset:var(--gxg-tree-view-item-header__outline-offset--focus)}.tree-view-item[selected]::part(header){color:var(--gxg-grid-row-cell__color--selected);background-color:var(--ds-item-background-color--selected)}.tree-view-item[selected]::part(header):hover{background-color:var(--ds-item-background-color--selected-hover)}.tree-view-item::part(expandable-button){background-color:var(--gxg-tree-view-item-expandable-button__background-color)}.tree-view-item::part(expandable-button)::before{background-color:var(--gxg-tree-view-item-expandable-button__background-color--before);-webkit-mask-position:center;-webkit-mask-repeat:no-repeat}.tree-view-item::part(expandable-button):hover{background-color:var(--gxg-tree-view-item-expandable-button__background-color--hover)}.tree-view-item::part(expandable-button):focus{outline:var(--ds-focus-border-width) solid var(--ds-border-color-control--focused);outline-offset:-1px;outline-offset:0}.tree-view-item::part(action)::before,.tree-view-item::part(action)::after{inline-size:var(--mer-font__size--sm);block-size:var(--mer-font__size--sm)}.tree-view-item::part(downloading){width:var(--gxg-tree-view-item-downloading__size);height:var(--gxg-tree-view-item-downloading__size);border:var(--gxg-tree-view-item-downloading__border);border-inline-start-color:transparent}.tree-view-item::part(checkbox__container){border-color:var(--gxg-checkbox-border-color);background-color:var(--gxg-checkbox-background-color);width:var(--gxg-checkbox-size);height:var(--gxg-checkbox-size);position:relative;border-width:var(--gxg-checkbox-border-width);border-style:solid;border-color:var(--gxg-checkbox-border-color);border-radius:var(--gxg-checkbox-border-radius)}.tree-view-item::part(checkbox__container):after{content:\"\";position:absolute;display:block;border:solid;border-color:transparent;z-index:0}.tree-view-item::part(checkbox__container):focus-within{box-shadow:none;outline:var(--ds-focus-border-width) solid var(--ds-border-color-control--focused);outline-offset:-1px;outline-offset:0}.tree-view-item::part(checkbox__option){display:none}.tree-view-item::part(checkbox__container 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(--gxg-checkbox-indicator-color)}.tree-view-item::part(checkbox__container checkbox__indeterminate):after{left:50%;top:50%;width:8px;height:1.5px;border:0;background-color:var(--gxg-checkbox-indicator-color);-webkit-transform:rotate(0) translateY(-50%) translateX(-50%);-ms-transform:rotate(0) translateY(-50%) translateX(-50%);transform:rotate(0) translateY(-50%) translateX(-50%)}.tree-view-item::part(checkbox__input){position:relative;z-index:1;display:flex;width:100%;height:100%;opacity:0;margin:0;padding:0;cursor:pointer}.tree-view-item--folder::part(action)::before,.tree-view-item--module::part(action)::before{content:\"\";width:var(--gxg-tree-view-icon__size);height:var(--gxg-tree-view-icon__size);margin-inline-end:var(--ch-tree-view-item-gap);background-repeat:no-repeat}.tree-view-item--folder::part(action)::before{background-image:url(\"/build/icon-assets/objects/folder.svg\")}.tree-view-item--folder::part(action expanded)::before{background-image:url(\"/build/icon-assets/objects/folder-open.svg\")}.tree-view-item--module::part(action)::before{background-image:url(\"/build/icon-assets/objects/module.svg\")}.tree-view-item--module::part(action expanded)::before{background-image:url(\"/build/icon-assets/objects/module-open.svg\")}.tree-view-item--pending-commit::part(action)::before{content:\"\";position:relative;z-index:1;width:5px;height:5px;align-self:end;margin-block-end:3px;margin-inline-start:1px;background-color:var(--color-primary-enabled);border-radius:50%}.tree-view-item--editing::part(header){border:2px solid transparent}.tree-view .ch-tree-view-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(--ds-base-font-family-primary);font-weight:var(--ds-title-01-font-weight);font-size:var(--ds-title-01-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-01--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-01-font-weight);font-size:var(--ds-title-01-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-02{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-02-font-weight);font-size:var(--ds-title-02-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-02--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-02-font-weight);font-size:var(--ds-title-02-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable);color:var(--color-on-primary)}.gxg-title-03{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-03-font-weight);font-size:var(--ds-title-03-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-03--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-03-font-weight);font-size:var(--ds-title-03-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-04{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-04-font-weight);font-size:var(--ds-title-04-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-04--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-04-font-weight);font-size:var(--ds-title-04-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-05{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-05-font-weight);font-size:var(--ds-title-05-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-05--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-05-font-weight);font-size:var(--ds-title-05-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-text{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable)}.gxg-text--negative{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-text--gray{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--dimmed)}.gxg-quote{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);font-style:italic}.gxg-quote--negative{color:var(--ds-base-font-color--negative)}.gxg-link{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--ds-base-font-color--link-hover)}.gxg-link:active{color:var(--ds-base-font-color--link-active)}.gxg-link-gray{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--ds-base-font-color--dimmed)}.gxg-link-gray:hover{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--ds-base-font-color--dimmed);filter:brightness(1.4)}.gxg-alert-error{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--error);display:inline-block}.gxg-alert-warning{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--warning);display:inline-block}.gxg-alert-success{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--success);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(--ds-base-font-family-primary);font-weight:var(--gxg-label-font-weight);font-size:var(--gxg-label-font-size);color:var(--gxg-label-color);text-align:center;line-height:1.455em;display:flex;align-items:center}.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-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height: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-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gxg-scrollbar::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}gxg-tree-view{display:contents}.tree-view{--ch-tree-view-item-gap:var(--gxg-tree-view-item__gap);--ch-tree-view-item__checkbox-size:var(--ds-checkbox-size);--ch-tree-view-item__expandable-button-size:var(--mer-font__size--sm);--ch-tree-view-item__image-size:var(--mer-font__size--sm);--ch-tree-view-item-custom-padding-inline-start:var(\n    --gxg-tree-view-item__custom-padding-inline-start\n  );--ch-tree-view-item-custom-padding-inline-end:var(\n    --gxg-tree-view-item__custom-padding-inline-end\n  );font-family:var(--ds-base-font-family-primary);font-size:var(--gxg-tree-view-item__font-size);font-weight:var(--ds-base-font-weight);color:var(--ds-base-font-color)}.tree-view::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.tree-view::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.tree-view::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.tree-view::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.tree-view::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}.tree-view .ch-tree-view-container{min-inline-size:max-content;padding:var(--gxg-tree-view-container__padding)}.tree-view-item{line-height:1.5em;}.tree-view-item::part(dashed-line){border-color:var(--ds-base-font-color);opacity:0.3}.tree-view-item::part(header){border-radius:var(--gxg-tree-view-item-header__border-radius);padding-inline-end:var(--gxg-tree-view-item-header__padding-inline-end)}.tree-view-item::part(header):focus{outline:var(--ds-focus-border-width) solid var(--ds-border-color-control--focused);outline-offset:-1px;outline-offset:0;outline-offset:var(--gxg-tree-view-item-header__outline-offset--focus)}.ch-tree-view-not-dragging-item .tree-view-item:not([selected])::part(header):hover{color:var(--gxg-tree-view-item__color--hover);background-color:var(--ds-item-background-color--hover)}.tree-view-item[selected]::part(header){color:var(--gxg-grid-row-cell__color--selected);background-color:var(--ds-item-background-color--selected)}.tree-view-item[selected]::part(header):hover{background-color:var(--ds-item-background-color--selected-hover)}.tree-view-item::part(action){padding-block:var(--gxg-tree-view-item-header__padding-top) var(--gxg-tree-view-item-header__padding-bottom)}.tree-view-item::part(downloading){inline-size:var(--gxg-tree-view-item-downloading__size);block-size:var(--gxg-tree-view-item-downloading__size);border:var(--gxg-tree-view-item-downloading__border);border-inline-start-color:transparent}.tree-view-item::part(checkbox__container){border-color:var(--gxg-checkbox-border-color);background-color:var(--gxg-checkbox-background-color);width:var(--gxg-checkbox-size);height:var(--gxg-checkbox-size);position:relative;border-width:var(--gxg-checkbox-border-width);border-style:solid;border-color:var(--gxg-checkbox-border-color);border-radius:var(--gxg-checkbox-border-radius)}.tree-view-item::part(checkbox__container):after{content:\"\";position:absolute;display:block;border:solid;border-color:transparent;z-index:0}.tree-view-item::part(checkbox__container):focus-within{box-shadow:none;outline:var(--ds-focus-border-width) solid var(--ds-border-color-control--focused);outline-offset:-1px;outline-offset:0}.tree-view-item::part(checkbox__option){display:none}.tree-view-item::part(checkbox__container 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(--gxg-checkbox-indicator-color)}.tree-view-item::part(checkbox__container checkbox__indeterminate):after{left:50%;top:50%;width:8px;height:1.5px;border:0;background-color:var(--gxg-checkbox-indicator-color);-webkit-transform:rotate(0) translateY(-50%) translateX(-50%);-ms-transform:rotate(0) translateY(-50%) translateX(-50%);transform:rotate(0) translateY(-50%) translateX(-50%)}.tree-view-item::part(checkbox__input){position:relative;z-index:1;display:flex;width:100%;height:100%;opacity:0;margin:0;padding:0;cursor:pointer}.tree-view-item--folder::part(action)::before,.tree-view-item--module::part(action)::before{content:\"\";inline-size:var(--gxg-tree-view-icon__size);block-size:var(--gxg-tree-view-icon__size);background-repeat:no-repeat}.tree-view-item--folder::part(action)::before{background-image:url(\"/build/icon-assets/objects/folder.svg\")}.tree-view-item--folder::part(action expanded)::before{background-image:url(\"/build/icon-assets/objects/folder-open.svg\")}.tree-view-item--module::part(action)::before{background-image:url(\"/build/icon-assets/objects/module.svg\")}.tree-view-item--module::part(action expanded)::before{background-image:url(\"/build/icon-assets/objects/module-open.svg\")}.tree-view-item--pending-commit::part(action)::before{content:\"\";position:relative;z-index:1;width:5px;height:5px;align-self:end;margin-block-end:3px;margin-inline-start:1px;background-color:var(--color-primary-enabled);border-radius:50%}.ch-tree-view-item--drag-enter{background-color:var(--ds-item-background-color--hover);outline:var(--ds-focus-border-width) solid var(--ds-border-color-control--focused);outline-offset:-1px;outline-offset:0;outline-offset:var(--gxg-tree-view-item-header__outline-offset--focus)}.tree-view .ch-tree-view-drag-info{padding-inline:6px;padding-block:2px;background-color:var(--mer-color__elevation--04);border:1px solid var(--ds-border-color--regular);border-radius:10px;box-shadow:var(--gxg-grid-row__box-shadow--dragging);font-size:8px}ch-tree-view-drop::after{background-color:var(--ds-border-color-control--focused)}";
 
 const DEFAULT_DRAG_DISABLED_VALUE = false;
 const DEFAULT_DROP_DISABLED_VALUE = false;
 const DEFAULT_EDITABLE_ITEMS_VALUE = true;
 const iconAssetsPath = index.getAssetPath(`./icon-assets`);
-const defaultRenderItem = (itemModel, treeState, treeHasFilter, lastItem, level) => {
-    var _a, _b, _c, _d, _e, _f;
-    return (treeState.filterType === "none" || itemModel.render !== false) && (index.h("ch-tree-view-item", { key: itemModel.id, id: itemModel.id, caption: itemModel.caption, checkbox: (_a = itemModel.checkbox) !== null && _a !== void 0 ? _a : treeState.checkbox, checked: (_b = itemModel.checked) !== null && _b !== void 0 ? _b : treeState.checked, class: `tree-view-item ${itemModel.class}`, disabled: itemModel.disabled, downloading: itemModel.downloading, dragDisabled: (_c = itemModel.dragDisabled) !== null && _c !== void 0 ? _c : treeState.dragDisabled, dropDisabled: (_d = itemModel.dropDisabled) !== null && _d !== void 0 ? _d : treeState.dropDisabled, editable: (_e = itemModel.editable) !== null && _e !== void 0 ? _e : treeState.editableItems, expanded: itemModel.expanded, expandableButton: "action", expandOnClick: treeState.expandOnClick, indeterminate: itemModel.indeterminate, lastItem: lastItem, lazyLoad: itemModel.lazy, leaf: itemModel.leaf, startImgSrc: itemModel.startImgSrc
-            ? resolveImgPath(iconAssetsPath, itemModel.startImgSrc)
-            : null, level: level, metadata: itemModel.metadata, endImgSrc: itemModel.endImgSrc, selected: itemModel.selected, showLines: treeState.showLines, toggleCheckboxes: (_f = itemModel.toggleCheckboxes) !== null && _f !== void 0 ? _f : treeState.toggleCheckboxes }, !itemModel.leaf &&
-        itemModel.items != null &&
-        itemModel.items.map((subModel, index) => defaultRenderItem(subModel, treeState, treeHasFilter, treeState.showLines !== "none" &&
-            // If there is a filter applied in the current list, use the
-            // lastItemId value to calculate the last item
-            (treeHasFilter && itemModel.lastItemId !== ""
-                ? subModel.id === itemModel.lastItemId
-                : index === itemModel.items.length - 1), level + 1))));
+const isDropDisabled = (itemModel, treeState) => { var _a; return (_a = itemModel.dropDisabled) !== null && _a !== void 0 ? _a : treeState.dropDisabled; };
+const treeDropId = (treeItemId) => `ch-tree-view-drop__${treeItemId}`;
+const defaultRenderItem = (itemModel, treeState, treeHasFilter, lastItem, level, dropBeforeAndAfterEnabled) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    return (treeState.filterType === "none" || itemModel.render !== false) && [
+        dropBeforeAndAfterEnabled && (index.h("ch-tree-view-drop", { id: treeDropId(itemModel.id), level: level, treeItemId: itemModel.id, type: "before" })),
+        index.h("ch-tree-view-item", { key: itemModel.id, id: itemModel.id, caption: itemModel.caption, checkbox: (_a = itemModel.checkbox) !== null && _a !== void 0 ? _a : treeState.checkbox, checked: (_b = itemModel.checked) !== null && _b !== void 0 ? _b : treeState.checked, class: itemModel.class || treeState.treeViewItemCssClass, disabled: itemModel.disabled, downloading: itemModel.downloading, dragDisabled: (_c = itemModel.dragDisabled) !== null && _c !== void 0 ? _c : treeState.dragDisabled, dropDisabled: isDropDisabled(itemModel, treeState), editable: (_d = itemModel.editable) !== null && _d !== void 0 ? _d : treeState.editableItems, endImgSrc: itemModel.endImgSrc
+                ? resolveImgPath(iconAssetsPath, itemModel.endImgSrc)
+                : null, endImgType: (_e = itemModel.endImgType) !== null && _e !== void 0 ? _e : "background", expanded: itemModel.expanded, expandableButton: treeState.expandableButton, expandOnClick: treeState.expandOnClick, indeterminate: itemModel.indeterminate, lastItem: lastItem, lazyLoad: itemModel.lazy, leaf: itemModel.leaf, level: level, metadata: itemModel.metadata, selected: itemModel.selected, showLines: treeState.showLines, toggleCheckboxes: (_f = itemModel.toggleCheckboxes) !== null && _f !== void 0 ? _f : treeState.toggleCheckboxes, startImgSrc: itemModel.startImgSrc
+                ? resolveImgPath(iconAssetsPath, itemModel.startImgSrc)
+                : null, startImgType: (_g = itemModel.startImgType) !== null && _g !== void 0 ? _g : "background" }, !itemModel.leaf &&
+            itemModel.items != null &&
+            itemModel.items.map((subModel, index) => defaultRenderItem(subModel, treeState, treeHasFilter, treeState.showLines !== "none" &&
+                // If there is a filter applied in the current list, use the
+                // lastItemId value to calculate the last item
+                (treeHasFilter && itemModel.lastItemId !== undefined
+                    ? subModel.id === itemModel.lastItemId
+                    : index === itemModel.items.length - 1), level + 1, 
+            // When dragging "before" and "after" an item and the direct parent
+            // has drops disabled, don't render the ch-tree-view-drop elements.
+            treeState.dropMode !== "above" &&
+                isDropDisabled(itemModel, treeState) !== true))),
+        dropBeforeAndAfterEnabled && lastItem && (index.h("ch-tree-view-drop", { id: treeDropId(itemModel.id) + "-after", level: level, treeItemId: itemModel.id, type: "after" }))
+    ];
 };
 const ChTreeViewRenderWrapper = class {
     constructor(hostRef) {
@@ -2368,6 +2386,7 @@ const ChTreeViewRenderWrapper = class {
         this.dragDisabled = DEFAULT_DRAG_DISABLED_VALUE;
         this.dropDisabled = DEFAULT_DROP_DISABLED_VALUE;
         this.dropItemsCallback = undefined;
+        this.dropMode = "above";
         this.editableItems = DEFAULT_EDITABLE_ITEMS_VALUE;
         this.expandableButton = "decorative";
         this.expandOnClick = true;
@@ -2380,10 +2399,11 @@ const ChTreeViewRenderWrapper = class {
         this.modifyItemCaptionCallback = undefined;
         this.multiSelection = false;
         this.renderItem = defaultRenderItem;
-        this.showLines = "all";
+        this.showLines = "last";
         this.sortItemsCallback = undefined;
         this.toggleCheckboxes = false;
         this.treeModel = [];
+        this.treeViewItemCssClass = "tree-view-item";
     }
     /**
      * Given an item id, an array of items to add, the download status and the
@@ -2454,12 +2474,13 @@ const ChTreeViewRenderWrapper = class {
      * @param newContainerId ID of the container where the drag is trying to be made.
      * @param draggedItems Information about the dragged items.
      * @param validDrop Current state of the droppable zone.
+     * @param dropType Type of drop that wants to be effected
      */
     async updateValidDropZone(requestTimestamp, newContainerId, draggedItems, dropType, validDrop) {
         this.treeRef.updateValidDropZone(requestTimestamp, newContainerId, draggedItems, dropType, validDrop);
     }
     render() {
-        return (index.h("ch-tree-view-render", { checkbox: this.checkbox, checked: this.checked, checkDroppableZoneCallback: this.checkDroppableZoneCallback, cssClass: this.cssClass, dragDisabled: this.dragDisabled, dropDisabled: this.dropDisabled, dropItemsCallback: this.dropItemsCallback, editableItems: this.editableItems, expandOnClick: this.expandOnClick, filter: this.filter, filterList: this.filterList, filterOptions: this.filterOptions, filterDebounce: this.filterDebounce, filterType: this.filterType, lazyLoadTreeItemsCallback: this.lazyLoadTreeItemsCallback, modifyItemCaptionCallback: this.modifyItemCaptionCallback, multiSelection: this.multiSelection, renderItem: this.renderItem, showLines: this.showLines, sortItemsCallback: this.sortItemsCallback, toggleCheckboxes: this.toggleCheckboxes, treeModel: this.treeModel, ref: el => (this.treeRef = el) }));
+        return (index.h("ch-tree-view-render", { checkbox: this.checkbox, checked: this.checked, checkDroppableZoneCallback: this.checkDroppableZoneCallback, cssClass: this.cssClass, dragDisabled: this.dragDisabled, dropDisabled: this.dropDisabled, dropItemsCallback: this.dropItemsCallback, dropMode: this.dropMode, editableItems: this.editableItems, expandOnClick: this.expandOnClick, filter: this.filter, filterList: this.filterList, filterOptions: this.filterOptions, filterDebounce: this.filterDebounce, filterType: this.filterType, lazyLoadTreeItemsCallback: this.lazyLoadTreeItemsCallback, modifyItemCaptionCallback: this.modifyItemCaptionCallback, multiSelection: this.multiSelection, renderItem: this.renderItem, showLines: this.showLines, sortItemsCallback: this.sortItemsCallback, toggleCheckboxes: this.toggleCheckboxes, treeModel: this.treeModel, treeViewItemCssClass: this.treeViewItemCssClass, ref: el => (this.treeRef = el) }));
     }
 };
 ChTreeViewRenderWrapper.style = treeViewCss;