@genexus/genexus-ide-ui 0.0.56 → 0.0.57

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 (135) hide show
  1. package/dist/cjs/ch-checkbox_4.cjs.entry.js +41 -27
  2. package/dist/cjs/{ch-grid-action-refresh_6.cjs.entry.js → ch-grid-action-refresh_7.cjs.entry.js} +168 -4
  3. package/dist/cjs/ch-icon_2.cjs.entry.js +1 -0
  4. package/dist/cjs/ch-suggest_4.cjs.entry.js +6 -2
  5. package/dist/cjs/ch-test-tree-x.cjs.entry.js +57 -32
  6. package/dist/cjs/config-082c7c76.js +9 -0
  7. package/dist/cjs/{form-a22de8f3.js → form-a2de5b1c.js} +14 -0
  8. package/dist/cjs/genexus-ide-ui.cjs.js +1 -1
  9. package/dist/cjs/gx-grid-chameleon.cjs.entry.js +21 -3
  10. package/dist/cjs/gx-ide-new-kb.cjs.entry.js +10 -9
  11. package/dist/cjs/gx-ide-new-object.cjs.entry.js +2 -1
  12. package/dist/cjs/gx-ide-share-kb.cjs.entry.js +3 -2
  13. package/dist/cjs/gxg-combo-box_2.cjs.entry.js +9 -4
  14. package/dist/cjs/gxg-form-checkbox-group.cjs.entry.js +1 -1
  15. package/dist/cjs/gxg-form-checkbox.cjs.entry.js +2 -2
  16. package/dist/cjs/gxg-form-radio-group.cjs.entry.js +1 -1
  17. package/dist/cjs/gxg-form-text.cjs.entry.js +19 -4
  18. package/dist/cjs/gxg-form-textarea.cjs.entry.js +8 -4
  19. package/dist/cjs/gxg-label_2.cjs.entry.js +27 -2
  20. package/dist/cjs/gxg-list-box_2.cjs.entry.js +2 -2
  21. package/dist/cjs/gxg-select.cjs.entry.js +1 -1
  22. package/dist/cjs/gxg-test.cjs.entry.js +1 -16
  23. package/dist/cjs/gxg-tree-view.cjs.entry.js +81 -40
  24. package/dist/cjs/loader.cjs.js +1 -1
  25. package/dist/collection/common/config.js +5 -0
  26. package/dist/collection/components/new-kb/new-kb.js +10 -9
  27. package/dist/collection/components/new-object/new-object.js +2 -1
  28. package/dist/collection/components/share-kb/share-kb.js +3 -2
  29. package/dist/components/ch-paginator-pages.js +1 -171
  30. package/dist/{esm/ch-paginator-pages.entry.js → components/ch-paginator-pages2.js} +29 -8
  31. package/dist/components/ch-paginator2.js +18 -4
  32. package/dist/components/ch-suggest2.js +5 -1
  33. package/dist/components/ch-test-tree-x.js +63 -35
  34. package/dist/components/checkbox.js +1 -1
  35. package/dist/components/combo-box.js +10 -4
  36. package/dist/components/config.js +7 -0
  37. package/dist/components/form-checkbox.js +1 -1
  38. package/dist/components/form-text.js +20 -4
  39. package/dist/components/form-textarea.js +9 -4
  40. package/dist/components/form.js +14 -1
  41. package/dist/components/gx-grid-chameleon.js +52 -28
  42. package/dist/components/gx-ide-new-kb.js +10 -9
  43. package/dist/components/gx-ide-new-object.js +2 -1
  44. package/dist/components/gx-ide-share-kb.js +3 -2
  45. package/dist/components/gxg-test.js +25 -22
  46. package/dist/components/gxg-tree-view.js +90 -44
  47. package/dist/components/icon2.js +1 -0
  48. package/dist/components/list-box.js +1 -1
  49. package/dist/components/suggest.js +1 -1
  50. package/dist/components/tooltip.js +30 -2
  51. package/dist/components/tree-x-list-item.js +25 -10
  52. package/dist/components/tree-x-list.js +2 -8
  53. package/dist/components/tree-x.js +16 -13
  54. package/dist/esm/ch-checkbox_4.entry.js +42 -28
  55. package/dist/esm/{ch-grid-action-refresh_6.entry.js → ch-grid-action-refresh_7.entry.js} +168 -5
  56. package/dist/esm/ch-icon_2.entry.js +1 -0
  57. package/dist/esm/ch-suggest_4.entry.js +6 -2
  58. package/dist/esm/ch-test-tree-x.entry.js +57 -32
  59. package/dist/esm/config-94445cc2.js +7 -0
  60. package/dist/esm/{form-5e68671c.js → form-9c41f579.js} +14 -1
  61. package/dist/esm/genexus-ide-ui.js +1 -1
  62. package/dist/esm/gx-grid-chameleon.entry.js +21 -3
  63. package/dist/esm/gx-ide-new-kb.entry.js +10 -9
  64. package/dist/esm/gx-ide-new-object.entry.js +2 -1
  65. package/dist/esm/gx-ide-share-kb.entry.js +3 -2
  66. package/dist/esm/gxg-combo-box_2.entry.js +9 -4
  67. package/dist/esm/gxg-form-checkbox-group.entry.js +1 -1
  68. package/dist/esm/gxg-form-checkbox.entry.js +2 -2
  69. package/dist/esm/gxg-form-radio-group.entry.js +1 -1
  70. package/dist/esm/gxg-form-text.entry.js +19 -4
  71. package/dist/esm/gxg-form-textarea.entry.js +8 -4
  72. package/dist/esm/gxg-label_2.entry.js +28 -3
  73. package/dist/esm/gxg-list-box_2.entry.js +2 -2
  74. package/dist/esm/gxg-select.entry.js +1 -1
  75. package/dist/esm/gxg-test.entry.js +1 -16
  76. package/dist/esm/gxg-tree-view.entry.js +81 -40
  77. package/dist/esm/loader.js +1 -1
  78. package/dist/genexus-ide-ui/genexus-ide-ui.css +4 -2
  79. package/dist/genexus-ide-ui/genexus-ide-ui.esm.js +1 -1
  80. package/dist/genexus-ide-ui/icon-assets/gemini-tools/error.svg +1 -1
  81. package/dist/genexus-ide-ui/icon-assets/gemini-tools/success.svg +1 -1
  82. package/dist/genexus-ide-ui/icon-assets/gemini-tools/warning.svg +1 -1
  83. package/dist/genexus-ide-ui/{p-afe9515e.entry.js → p-0268cc45.entry.js} +1 -1
  84. package/dist/genexus-ide-ui/p-0aa11d6f.entry.js +1 -0
  85. package/dist/genexus-ide-ui/p-0f4fe7ad.js +1 -0
  86. package/dist/genexus-ide-ui/{p-a440a73f.entry.js → p-1294d220.entry.js} +1 -1
  87. package/dist/genexus-ide-ui/p-1f3a81e3.entry.js +1 -0
  88. package/dist/genexus-ide-ui/{p-4eaffd02.entry.js → p-2096031c.entry.js} +1 -1
  89. package/dist/genexus-ide-ui/{p-f3a1dc7c.entry.js → p-2537b4d6.entry.js} +1 -1
  90. package/dist/genexus-ide-ui/p-3657924a.entry.js +1 -0
  91. package/dist/genexus-ide-ui/p-3ec2f036.entry.js +1 -0
  92. package/dist/genexus-ide-ui/p-4923cffa.entry.js +1 -0
  93. package/dist/genexus-ide-ui/p-4e81926d.entry.js +1 -0
  94. package/dist/genexus-ide-ui/p-5669baf5.entry.js +1 -0
  95. package/dist/genexus-ide-ui/p-60b2bd2f.entry.js +1 -0
  96. package/dist/genexus-ide-ui/{p-e586d05e.entry.js → p-875e5979.entry.js} +1 -1
  97. package/dist/genexus-ide-ui/p-9e428123.entry.js +1 -0
  98. package/dist/genexus-ide-ui/p-a8b8baf9.entry.js +1 -0
  99. package/dist/genexus-ide-ui/p-dd2e0590.entry.js +1 -0
  100. package/dist/genexus-ide-ui/{p-5cb871e3.entry.js → p-ebcdef37.entry.js} +1 -1
  101. package/dist/genexus-ide-ui/p-ed5cf480.entry.js +1 -0
  102. package/dist/genexus-ide-ui/p-f1ff6b48.entry.js +1 -0
  103. package/dist/genexus-ide-ui/p-f82f25e2.js +1 -0
  104. package/dist/genexus-ide-ui/p-f9f1d95d.entry.js +1 -0
  105. package/dist/node_modules/@genexus/chameleon-controls-library/dist/collection/components/checkbox/checkbox.css +3 -3
  106. package/dist/node_modules/@genexus/chameleon-controls-library/dist/collection/components/test/test-tree-x.css +1 -47
  107. package/dist/node_modules/@genexus/chameleon-controls-library/dist/collection/components/tree-x/tree-x.css +2 -2
  108. package/dist/node_modules/@genexus/chameleon-controls-library/dist/collection/components/tree-x-list-item/tree-x-list-item.css +5 -3
  109. package/dist/node_modules/@genexus/gemini/dist/collection/components/combo-box/combo-box.css +5 -0
  110. package/dist/node_modules/@genexus/gemini/dist/collection/components/form-checkbox/form-checkbox.css +18 -0
  111. package/dist/node_modules/@genexus/gemini/dist/collection/components/form-text/form-text.css +37 -0
  112. package/dist/node_modules/@genexus/gemini/dist/collection/components/form-textarea/form-textarea.css +22 -0
  113. package/dist/node_modules/@genexus/gemini/dist/collection/components/list-box/list-box.css +18 -0
  114. package/dist/node_modules/@genexus/gemini/dist/collection/components/suggest/styles.css +18 -0
  115. package/dist/node_modules/@genexus/gemini/dist/collection/components/tooltip/tooltip.css +47 -3
  116. package/dist/node_modules/@genexus/gemini/dist/collection/components/tree-view/tree-view.css +10 -1
  117. package/dist/types/common/config.d.ts +3 -0
  118. package/package.json +3 -3
  119. package/dist/cjs/ch-paginator-pages.cjs.entry.js +0 -156
  120. package/dist/genexus-ide-ui/p-01406cbc.js +0 -1
  121. package/dist/genexus-ide-ui/p-03efca69.entry.js +0 -1
  122. package/dist/genexus-ide-ui/p-1d7c22d5.entry.js +0 -1
  123. package/dist/genexus-ide-ui/p-395a65de.entry.js +0 -1
  124. package/dist/genexus-ide-ui/p-3b4fca51.entry.js +0 -1
  125. package/dist/genexus-ide-ui/p-447c3a31.entry.js +0 -1
  126. package/dist/genexus-ide-ui/p-58f882c6.entry.js +0 -1
  127. package/dist/genexus-ide-ui/p-60bea19c.entry.js +0 -1
  128. package/dist/genexus-ide-ui/p-64cbe277.entry.js +0 -1
  129. package/dist/genexus-ide-ui/p-9a6cb543.entry.js +0 -1
  130. package/dist/genexus-ide-ui/p-a2fa3132.entry.js +0 -1
  131. package/dist/genexus-ide-ui/p-a708db45.entry.js +0 -1
  132. package/dist/genexus-ide-ui/p-c0edbeb5.entry.js +0 -1
  133. package/dist/genexus-ide-ui/p-cd5482fa.entry.js +0 -1
  134. package/dist/genexus-ide-ui/p-d312fe25.entry.js +0 -1
  135. package/dist/genexus-ide-ui/p-e6ae0460.entry.js +0 -1
package/dist/components/tooltip.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
2
2
 
3
- const tooltipCss = "/*! 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:6px;height:6px}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gxg-scrollbar::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}:host .tooltip{cursor:pointer;position:relative;display:inline-block;border-bottom:1px dotted black;text-decoration:none}:host .tooltip .tooltiptext{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-size:var(--font-size-xs);visibility:hidden;opacity:0;transition-property:opacity;transition-duration:var(--ui-animaton-speed);transition-timing-function:ease;position:absolute;z-index:1;width:250px;text-align:center}:host .tooltip .tooltiptext__content{width:fit-content;background-color:var(--gray-07);padding:var(--spacing-comp-01) var(--spacing-comp-02);border-radius:var(--border-width-md);color:var(--color-on-primary);display:inline-block;text-align:left}:host .tooltip .tooltiptext:after{content:\"\";width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:5px solid var(--gray-07);position:absolute}:host .tooltip:hover .tooltiptext{visibility:visible;opacity:1}:host([position=top]) .tooltip .tooltiptext{bottom:20px;left:50%;transform:translateX(-50%)}:host([position=top]) .tooltip .tooltiptext:after{left:50%;transform:translateX(-50%) rotate(180deg);bottom:-4px}:host([position=right]) .tooltip .tooltiptext{top:0;left:111%;text-align:left}:host([position=right]) .tooltip .tooltiptext:after{left:-7px;transform:rotate(-90deg);top:8px}:host([position=bottom]) .tooltip .tooltiptext{top:25px;left:50%;transform:translateX(-50%)}:host([position=bottom]) .tooltip .tooltiptext:after{left:50%;transform:translateX(-50%);top:-4px}:host([position=left]) .tooltip .tooltiptext{text-align:right;top:0;right:105%}:host([position=left]) .tooltip .tooltiptext:after{right:-7px;transform:rotate(90deg);top:8px}:host([width-auto]) .tooltip .tooltiptext{width:auto;white-space:nowrap}:host([no-border]) .tooltip{border-bottom:none}";
3
+ const tooltipCss = "/*! 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:6px;height:6px}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gxg-scrollbar::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}:host{display:inline-flex}:host .tooltip{cursor:pointer;position:relative;border-bottom:1px dotted var(--color-on-secondary);text-decoration:none}:host .tooltip .tooltiptext{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-size:var(--font-size-xs);visibility:hidden;opacity:0;transition-property:opacity;transition-duration:var(--ui-animaton-speed);transition-timing-function:ease;position:absolute;z-index:1;width:250px;text-align:center}:host .tooltip .tooltiptext__content{width:fit-content;background-color:var(--gray-07);padding:var(--spacing-comp-01) var(--spacing-comp-02);border-radius:var(--border-width-md);color:var(--color-on-primary);display:inline-block;text-align:left}:host .tooltip .tooltiptext:after{content:\"\";width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:5px solid var(--gray-07);position:absolute}:host .tooltip:hover .tooltiptext{visibility:visible;opacity:1}:host([position=top]) .tooltip .tooltiptext{bottom:27px;left:50%;transform:translateX(-50%)}:host([position=top]) .tooltip .tooltiptext:after{left:50%;transform:translateX(-50%) rotate(180deg);bottom:-4px}:host([position=right]) .tooltip .tooltiptext{top:0;left:111%;text-align:left}:host([position=right]) .tooltip .tooltiptext:after{left:-7px;transform:rotate(-90deg);top:8px}:host([position=bottom]) .tooltip .tooltiptext{top:25px;left:50%;transform:translateX(-50%)}:host([position=bottom]) .tooltip .tooltiptext:after{left:50%;transform:translateX(-50%);top:-4px}:host([position=left]) .tooltip .tooltiptext{text-align:right;top:0;right:105%}:host([position=left]) .tooltip .tooltiptext:after{right:-7px;transform:rotate(90deg);top:8px}:host([width-auto]) .tooltip .tooltiptext{width:auto;white-space:nowrap}:host([no-border]) .tooltip{border-bottom:none}:host([align-end]) .tooltiptext{transform:none !important;inset-inline-end:0;left:auto !important;max-width:180px;width:max-content}:host([align-end]) .tooltiptext:after{inset-inline-end:-1px;left:auto !important}:host([flex]){display:flex}:host([flex]) .tooltip{display:flex}:host([fixed]) .tooltip .tooltiptext{position:fixed;height:0}:host([fixed]) .tooltip .tooltiptext__content{transform:translateY(calc(-100% - 5px))}:host([fixed]) .tooltip .tooltiptext__content:after{content:\"\";width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:5px solid var(--gray-07);position:absolute;right:0;transform:translateX(-3px) rotate(180deg);bottom:-3px}:host([fixed]) .tooltip .tooltiptext:after{display:none}";
4
4
 
5
5
  const GxgTooltip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
6
6
  constructor() {
@@ -11,18 +11,46 @@ const GxgTooltip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
11
11
  the tooltip position
12
12
  */
13
13
  this.position = "top";
14
+ /**
15
+ * The alignment
16
+ */
17
+ this.alignEnd = false;
18
+ /**
19
+ * Fixed positioned
20
+ */
21
+ this.fixed = false;
22
+ /**
23
+ * Displays the tool-tip as flex
24
+ */
25
+ this.flex = false;
14
26
  /**
15
27
  * This presence of this property removes the border under the text
16
28
  */
17
29
  this.noBorder = false;
30
+ this.mouseEnterHandler = () => {
31
+ const tooltipBC = this.el.getBoundingClientRect();
32
+ const top = tooltipBC.top;
33
+ const rightPosition = window.innerWidth - tooltipBC.right;
34
+ this.tooltipTextEl.style.top = `${top}px`;
35
+ this.tooltipTextEl.style.right = `${rightPosition}px`;
36
+ };
37
+ }
38
+ componentWillLoad() {
39
+ if (this.fixed) {
40
+ this.el.addEventListener("mouseenter", this.mouseEnterHandler);
41
+ }
18
42
  }
19
43
  render() {
20
- return (h(Host, { role: "tooltip" }, h("span", { class: "tooltip" }, h("slot", null), h("div", { class: "tooltiptext" }, h("span", { class: "tooltiptext__content" }, this.label)))));
44
+ return (h(Host, { role: "tooltip" }, h("span", { class: "tooltip" }, h("slot", null), h("div", { class: "tooltiptext", ref: (el) => (this.tooltipTextEl = el) }, h("span", { class: "tooltiptext__content" }, this.label)))));
21
45
  }
46
+ get el() { return this; }
22
47
  static get style() { return tooltipCss; }
23
48
  }, [1, "gxg-tooltip", {
24
49
  "position": [513],
25
50
  "label": [1],
51
+ "alignEnd": [516, "align-end"],
52
+ "fixed": [516],
53
+ "flex": [516],
26
54
  "noBorder": [516, "no-border"]
27
55
  }]);
28
56
  function defineCustomElement() {
package/dist/components/tree-x-list-item.js CHANGED
@@ -2,9 +2,10 @@ import { proxyCustomElement, HTMLElement, createEvent, h, writeTask, Host } from
2
2
  import { m as mouseEventModifierKey } from './helpers.js';
3
3
  import { d as defineCustomElement$1 } from './checkbox.js';
4
4
 
5
- const treeXListItemCss = ":where(button){all:unset;display:flex;cursor:pointer;user-select:none;touch-action:manipulation;-webkit-user-drag:element}*,::before,::after{box-sizing:border-box}:host{--checkbox-size:1em;--expandable-button-width:0.75em;--ch-tree-x-list-item-dashed-line--offset:0px;--tab-width:calc(\n var(--checkbox-size) + var(--expandable-button-width) +\n (5px * 2)\n );display:grid;grid-template-rows:min-content;overflow:hidden}.header{--own-offset:0px;display:flex;align-items:center;min-height:calc(1em + 6px);padding-inline-start:var(--padding-inline-start)}.header--disabled{opacity:0.5;pointer-events:none}.header--even{--padding-inline-start:calc(\n var(--parent-padding-inline-start--odd, 0px) + var(--tab-width)\n )}.header--even+.expandable{--parent-padding-inline-start--even:calc(\n var(--parent-padding-inline-start--odd, 0px) + var(--tab-width)\n )}.header--even .dashed-line{--inset-inline-start:calc(\n var(--parent-padding-inline-start--odd, 0px) +\n var(--parent-checkbox-offset) + var(--parent-expandable-offset)\n )}.header--even-expandable{--padding-inline-start:calc(\n var(--parent-padding-inline-start--odd, 0px) + var(--tab-width) - calc(\n var(--expandable-button-width) + 5px\n )\n )}.header--even-expandable+.expandable{--parent-padding-inline-start--even:calc(\n var(--parent-padding-inline-start--odd, 0px) + var(--tab-width) - calc(\n var(--expandable-button-width) + 5px\n )\n )}.header--odd{--padding-inline-start:calc(\n var(--parent-padding-inline-start--even, 0px) + var(--tab-width)\n )}.header--odd+.expandable{--parent-padding-inline-start--odd:calc(\n var(--parent-padding-inline-start--even, 0px) + var(--tab-width)\n )}.header--odd .dashed-line{--inset-inline-start:calc(\n var(--parent-padding-inline-start--even, 0px) +\n var(--parent-checkbox-offset) + var(--parent-expandable-offset)\n )}.header--odd-expandable{--padding-inline-start:calc(\n var(--parent-padding-inline-start--even, 0px) + var(--tab-width) - calc(\n var(--expandable-button-width) + 5px\n )\n )}.header--odd-expandable+.expandable{--parent-padding-inline-start--odd:calc(\n var(--parent-padding-inline-start--even, 0px) + var(--tab-width) - calc(\n var(--expandable-button-width) + 5px\n )\n )}.header--level-0{--padding-inline-start:0px}.header--level-0+.expandable{--parent-padding-inline-start--even:0px}.header--expandable-offset{--own-offset:calc(\n var(--expandable-button-width) + 5px\n )}.header--expandable-offset+.expandable{--parent-expandable-offset:calc(var(--expandable-button-width) / 2)}.header--checkbox-offset+.expandable{--parent-checkbox-offset:calc(var(--checkbox-size) / 2);--parent-negative-checkbox-offset:calc(var(--checkbox-size) / 2)}.dashed-line{position:absolute;inset-inline-start:calc( var(--inset-inline-start) + var(--ch-tree-x-list-item-dashed-line--offset) );height:1px;width:calc( var(--tab-width) - var(--parent-checkbox-offset) - var(--parent-expandable-offset) - var(--own-offset) - var(--ch-tree-x-list-item-dashed-line--offset) - 4px );border:0 dashed #a9a9a9;border-block-end-width:1px;pointer-events:none;content-visibility:hidden;z-index:1}.last-all-line{inset-block-start:0;height:calc(100% - var(--distance-to-checkbox));border-inline-start-width:1px;border-end-start-radius:2px}.last-line{inset-block-start:0;height:100%;border-inline-start-width:1px;border-style:solid;border-block-end:unset}.expandable-button{display:grid;place-items:center;width:var(--expandable-button-width);height:var(--expandable-button-width);margin-inline-end:5px;z-index:1;content-visibility:auto;contain-intrinsic-size:auto var(--expandable-button-width)}.expandable-button::before{content:\"\";width:calc(100% - 2px);height:calc(100% - 2px);background-color:currentColor;-webkit-mask-size:calc(var(--expandable-button-width) - 2px)}.expandable-button--collapsed::before{-webkit-mask-image:url('data:image/svg+xml,<svg viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M14.15,8.5H8.54v5.61h-1V8.5H1.93v-1H7.54V1.89h1V7.5h5.61Z\"/></svg>')}.expandable-button--expanded::before{-webkit-mask-image:url('data:image/svg+xml,<svg viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M14.15,8.5H1.93v-1H14.15Z\"/></svg>')}.expandable-button:focus-visible{outline:1px solid #000}.checkbox{margin-inline-end:5px}.checkbox::part(container){width:var(--checkbox-size);height:var(--checkbox-size)}.action{display:grid;grid-template:\"left-img text right-img\"/max-content 1fr max-content;align-items:center;height:100%;flex:1}.readonly-mode{padding-block:0.75px}.left-img,.right-img{display:block;width:0.875em;height:0.875em;content-visibility:auto;contain-intrinsic-size:auto 0.875em}.left-img{grid-area:left-img;margin-inline-end:5px}.right-img{grid-area:right-img;margin-inline-start:5px}.edit-name{grid-area:text;width:100%;height:100%;background-color:unset;padding:0;margin:0;border:1px solid currentColor;font:unset;outline:unset}.downloading{width:0.75em;height:0.75em;margin-inline-start:8px;border:2px solid currentColor;border-inline-start-color:transparent;border-radius:50%;opacity:0.75;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.expandable{--parent-expandable-offset:0px;--parent-negative-checkbox-offset:0px;--parent-checkbox-offset:0px;display:grid;grid-template-rows:0fr;content-visibility:auto;contain-intrinsic-size:auto 100px}.expanded{grid-template-rows:1fr}:not(.expanded) ::slotted([slot=tree]){display:none;overflow:hidden;content-visibility:hidden}";
5
+ const treeXListItemCss = ":where(button){all:unset;display:flex;user-select:none;touch-action:manipulation;-webkit-user-drag:element}*,::before,::after{box-sizing:border-box}:host{--checkbox-size:1em;--expandable-button-width:0.75em;--ch-tree-x-list-item-dashed-line--offset:0px;--tab-width:calc(\n var(--checkbox-size) + var(--expandable-button-width) +\n (5px * 2)\n );display:grid;grid-template-rows:min-content;overflow:hidden}.header{--own-offset:0px;display:flex;align-items:center;min-height:calc(1em + 6px);padding-inline-start:var(--padding-inline-start)}.header--disabled{opacity:0.5;pointer-events:none}.header--even{--padding-inline-start:calc(\n var(--parent-padding-inline-start--odd, 0px) + var(--tab-width)\n )}.header--even+.expandable{--parent-padding-inline-start--even:calc(\n var(--parent-padding-inline-start--odd, 0px) + var(--tab-width)\n )}.header--even .dashed-line{--inset-inline-start:calc(\n var(--parent-padding-inline-start--odd, 0px) +\n var(--parent-checkbox-offset) + var(--parent-expandable-offset)\n )}.header--even-expandable{--padding-inline-start:calc(\n var(--parent-padding-inline-start--odd, 0px) + var(--tab-width) - calc(\n var(--expandable-button-width) + 5px\n )\n )}.header--even-expandable+.expandable{--parent-padding-inline-start--even:calc(\n var(--parent-padding-inline-start--odd, 0px) + var(--tab-width) - calc(\n var(--expandable-button-width) + 5px\n )\n )}.header--odd{--padding-inline-start:calc(\n var(--parent-padding-inline-start--even, 0px) + var(--tab-width)\n )}.header--odd+.expandable{--parent-padding-inline-start--odd:calc(\n var(--parent-padding-inline-start--even, 0px) + var(--tab-width)\n )}.header--odd .dashed-line{--inset-inline-start:calc(\n var(--parent-padding-inline-start--even, 0px) +\n var(--parent-checkbox-offset) + var(--parent-expandable-offset)\n )}.header--odd-expandable{--padding-inline-start:calc(\n var(--parent-padding-inline-start--even, 0px) + var(--tab-width) - calc(\n var(--expandable-button-width) + 5px\n )\n )}.header--odd-expandable+.expandable{--parent-padding-inline-start--odd:calc(\n var(--parent-padding-inline-start--even, 0px) + var(--tab-width) - calc(\n var(--expandable-button-width) + 5px\n )\n )}.header--level-0{--padding-inline-start:0px}.header--level-0+.expandable{--parent-padding-inline-start--even:0px}.header--expandable-offset{--own-offset:calc(\n var(--expandable-button-width) + 5px\n )}.header--expandable-offset+.expandable{--parent-expandable-offset:calc(var(--expandable-button-width) / 2)}.header--checkbox-offset+.expandable{--parent-checkbox-offset:calc(var(--checkbox-size) / 2);--parent-negative-checkbox-offset:calc(var(--checkbox-size) / 2)}.dashed-line{position:absolute;inset-inline-start:calc( var(--inset-inline-start) + var(--ch-tree-x-list-item-dashed-line--offset) );height:1px;width:calc( var(--tab-width) - var(--parent-checkbox-offset) - var(--parent-expandable-offset) - var(--own-offset) - var(--ch-tree-x-list-item-dashed-line--offset) - 4px );border:0 dashed color-mix(in srgb, currentColor 65%, transparent);border-block-end-width:1px;pointer-events:none;content-visibility:hidden;z-index:1}.last-all-line{inset-block-start:0;height:calc(100% - var(--distance-to-checkbox));border-inline-start-width:1px;border-end-start-radius:2px}.last-line{inset-block-start:0;height:100%;border-inline-start-width:1px;border-style:solid;border-block-end:unset}.expandable-button{display:grid;place-items:center;width:var(--expandable-button-width);height:var(--expandable-button-width);margin-inline-end:5px;z-index:1;cursor:pointer;content-visibility:auto;contain-intrinsic-size:auto var(--expandable-button-width)}.expandable-button::before{content:\"\";width:calc(100% - 2px);height:calc(100% - 2px);background-color:currentColor;-webkit-mask-size:calc(var(--expandable-button-width) - 2px)}.expandable-button--collapsed::before{-webkit-mask-image:url('data:image/svg+xml,<svg viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M14.15,8.5H8.54v5.61h-1V8.5H1.93v-1H7.54V1.89h1V7.5h5.61Z\"/></svg>')}.expandable-button--expanded::before{-webkit-mask-image:url('data:image/svg+xml,<svg viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M14.15,8.5H1.93v-1H14.15Z\"/></svg>')}.expandable-button:focus-visible{outline:1px solid #000}.checkbox{margin-inline-end:5px}.checkbox::part(container){width:var(--checkbox-size);height:var(--checkbox-size)}.action{display:grid;grid-template:\"left-img text right-img\"/max-content 1fr max-content;align-items:center;height:100%;flex:1;cursor:pointer}.readonly-mode{padding-block:0.75px}.left-img,.right-img{display:block;width:0.875em;height:0.875em;content-visibility:auto;contain-intrinsic-size:auto 0.875em}.left-img{grid-area:left-img;margin-inline-end:5px}.right-img{grid-area:right-img;margin-inline-start:5px}.edit-name{grid-area:text;width:100%;height:100%;padding:0;margin:0;background-color:unset;color:unset;border:1px solid currentColor;font:unset;outline:unset}.downloading{width:0.75em;height:0.75em;margin-inline-start:8px;border:2px solid currentColor;border-inline-start-color:transparent;border-radius:50%;opacity:0.75;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.expandable{--parent-expandable-offset:0px;--parent-negative-checkbox-offset:0px;--parent-checkbox-offset:0px;display:grid;grid-template-rows:0fr;content-visibility:auto;contain-intrinsic-size:auto 100px}.expanded{grid-template-rows:1fr}:not(.expanded) ::slotted([slot=tree]){display:none;overflow:hidden;content-visibility:hidden}";
6
6
 
7
7
  const resetDragImage = new Image();
8
+ const INITIAL_LEVEL = 0;
8
9
  // Selectors
9
10
  const TREE_ITEM_TAG_NAME = "ch-tree-x-list-item";
10
11
  const DIRECT_TREE_ITEM_CHILDREN = `:scope>*>${TREE_ITEM_TAG_NAME}`;
@@ -14,6 +15,17 @@ const LAST_SUB_ITEM = `:scope>*>${TREE_ITEM_TAG_NAME}:last-child`;
14
15
  const EXPANDABLE_ID = "expandable";
15
16
  const ENTER_KEY = "Enter";
16
17
  const ESCAPE_KEY = "Escape";
18
+ // Export Parts
19
+ const getCheckboxExportPart = (part) => `${part}:checkbox__${part}`;
20
+ const CHECKBOX_EXPORT_PARTS = [
21
+ "container",
22
+ "input",
23
+ "option",
24
+ "checked",
25
+ "indeterminate"
26
+ ]
27
+ .map(getCheckboxExportPart)
28
+ .join(",");
17
29
  const ChTreeXListItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
18
30
  constructor() {
19
31
  super();
@@ -96,7 +108,7 @@ const ChTreeXListItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
96
108
  /**
97
109
  * Level in the tree at which the item is placed.
98
110
  */
99
- this.level = 0;
111
+ this.level = INITIAL_LEVEL;
100
112
  /**
101
113
  * `true` if the checkbox's value is indeterminate.
102
114
  */
@@ -354,7 +366,7 @@ const ChTreeXListItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
354
366
  return;
355
367
  }
356
368
  // The item is the last one of the tree at the first level
357
- if (this.level === 0) {
369
+ if (this.level === INITIAL_LEVEL) {
358
370
  return;
359
371
  }
360
372
  // Otherwise, ask the parent to focus the next sibling
@@ -375,7 +387,7 @@ const ChTreeXListItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
375
387
  return;
376
388
  }
377
389
  // The item is the first one of the tree at the first level
378
- if (this.level === 0) {
390
+ if (this.level === INITIAL_LEVEL) {
379
391
  return;
380
392
  }
381
393
  // Otherwise, set focus in the parent element
@@ -474,7 +486,7 @@ const ChTreeXListItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
474
486
  this.selectedItemChange.emit(this.getSelectedInfo(true, false, true));
475
487
  }
476
488
  // No need to update more the status
477
- if (this.level === 0) {
489
+ if (this.level === INITIAL_LEVEL) {
478
490
  return;
479
491
  }
480
492
  // Update checkbox status
@@ -501,11 +513,14 @@ const ChTreeXListItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
501
513
  const expandableButtonNotVisible = !this.leaf && !this.showExpandableButton;
502
514
  const acceptDrop = !this.dropDisabled && !this.leaf && this.dragState !== "start";
503
515
  const hasContent = !this.leaf && !this.lazyLoad;
504
- const showAllLines = this.showLines === "all" && this.level !== 0;
505
- const showLastLine = this.showLines === "last" && this.level !== 0 && this.lastItem;
506
- return (h(Host, { role: "treeitem", "aria-selected": this.selected ? "true" : null, class: {
516
+ const showAllLines = this.showLines === "all" && this.level !== INITIAL_LEVEL;
517
+ const showLastLine = this.showLines === "last" &&
518
+ this.level !== INITIAL_LEVEL &&
519
+ this.lastItem;
520
+ return (h(Host, { role: "treeitem", "aria-level": this.level + 1, "aria-selected": this.selected ? "true" : null, class: {
507
521
  [TREE_ITEM_TAG_NAME + "--downloading"]: this.downloading,
508
522
  [TREE_ITEM_TAG_NAME + "--editing"]: this.editing,
523
+ [TREE_ITEM_TAG_NAME + "--not-editing"]: !this.editing,
509
524
  [TREE_ITEM_TAG_NAME + "--drag-" + this.dragState]: this.dragState !== "none" && this.dragState !== "start",
510
525
  [TREE_ITEM_TAG_NAME + "--deny-drop"]: this.leaf
511
526
  }, style: { "--level": `${this.level}` },
@@ -520,14 +535,14 @@ const ChTreeXListItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
520
535
  "header--odd": !evenLevel,
521
536
  "header--even-expandable": evenLevel && expandableButtonVisible,
522
537
  "header--odd-expandable": !evenLevel && expandableButtonVisible,
523
- "header--level-0": this.level === 0
538
+ "header--level-0": this.level === INITIAL_LEVEL
524
539
  }, part: `header${this.disabled ? " disabled" : ""}${this.selected ? " selected" : ""}`, type: "button", disabled: this.disabled, onClick: this.handleActionClick, onKeyDown: !this.editing ? this.handleActionKeyDown : null,
525
540
  // Drag and drop
526
541
  draggable: !this.dragDisabled, onDragStart: this.handleDragStart, onDragEnd: !this.dragDisabled ? this.handleDragEnd : null, ref: el => (this.headerRef = el) }, !this.leaf && this.showExpandableButton && (h("button", { type: "button", class: {
527
542
  "expandable-button": true,
528
543
  "expandable-button--expanded": this.expanded,
529
544
  "expandable-button--collapsed": !this.expanded
530
- }, part: `expandable-button${this.disabled ? " disabled" : ""}${this.expanded ? " expanded" : " collapsed"}`, disabled: this.disabled, onClick: this.toggleExpand })), this.checkbox && (h("ch-checkbox", { accessibleName: this.caption, class: "checkbox", part: `checkbox${this.disabled ? " disabled" : ""}${this.checked ? " checked" : ""}${this.indeterminate ? " indeterminate" : ""}`, checkedValue: "true", disabled: this.disabled, indeterminate: this.indeterminate, unCheckedValue: "false", value: `${this.checked}`, onInput: this.handleCheckedChange })), this.customRender ? (h("slot", { name: "custom-content" })) : ([
545
+ }, part: `expandable-button${this.disabled ? " disabled" : ""}${this.expanded ? " expanded" : " collapsed"}`, disabled: this.disabled, onClick: this.toggleExpand })), this.checkbox && (h("ch-checkbox", { accessibleName: this.caption, class: "checkbox", exportparts: CHECKBOX_EXPORT_PARTS, part: `checkbox${this.disabled ? " disabled" : ""}${this.checked ? " checked" : ""}${this.indeterminate ? " indeterminate" : ""}`, checkedValue: "true", disabled: this.disabled, indeterminate: this.indeterminate, unCheckedValue: "false", value: `${this.checked}`, onInput: this.handleCheckedChange })), this.customRender ? (h("slot", { name: "custom-content" })) : ([
531
546
  h("div", { class: {
532
547
  action: true,
533
548
  "readonly-mode": !this.editing
package/dist/components/tree-x-list.js CHANGED
@@ -7,19 +7,13 @@ const ChTreeListX = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
7
7
  super();
8
8
  this.__registerHost();
9
9
  this.__attachShadow();
10
- /**
11
- * Level in the tree at which the control is placed.
12
- */
13
- this.level = 0;
14
10
  }
15
11
  render() {
16
- return (h(Host, { role: this.level === 0 ? "tree" : "group" }, h("slot", null)));
12
+ return (h(Host, { role: "group" }, h("slot", null)));
17
13
  }
18
14
  get el() { return this; }
19
15
  static get style() { return treeXListCss; }
20
- }, [1, "ch-tree-x-list", {
21
- "level": [2]
22
- }]);
16
+ }, [1, "ch-tree-x-list"]);
23
17
  function defineCustomElement() {
24
18
  if (typeof customElements === "undefined") {
25
19
  return;
package/dist/components/tree-x.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
2
- import { m as mouseEventModifierKey } from './helpers.js';
2
+ import { f as focusComposedPath, m as mouseEventModifierKey } from './helpers.js';
3
3
 
4
4
  const scrollToEdge = (event, container, scrollSpeed, scrollThreshold) => {
5
5
  const mousePositionY = event.clientY - container.getBoundingClientRect().top;
@@ -15,7 +15,7 @@ const scrollToEdge = (event, container, scrollSpeed, scrollThreshold) => {
15
15
  }
16
16
  };
17
17
 
18
- const treeXCss = "ch-tree-x{display:flex;position:relative;overflow:auto}ch-tree-x>ch-tree-x-list{position:absolute;inset:0;min-width:max-content}ch-tree-x.ch-tree-x-dragging-item ch-tree-x-list-item{pointer-events:var(--ch-tree-x-pointer-events, all)}ch-tree-x.ch-tree-x-dragging-item .ch-tree-x-list-item--deny-drop,ch-tree-x.ch-tree-x-dragging-item ch-tree-x-list{pointer-events:none}ch-tree-x.ch-tree-x--dragging-selected-items ch-tree-x-list-item[selected]{--ch-tree-x-pointer-events:none}ch-tree-x.ch-tree-x-waiting-drop-processing{cursor:wait}ch-tree-x.ch-tree-x-waiting-drop-processing>ch-tree-x-list{pointer-events:none}.ch-tree-x-drag-info{--rtl-offset:16px;position:fixed;left:0;top:0;transform:translate(calc(var(--ch-tree-x-dragging-item-x) + var(--rtl-offset)), calc(var(--ch-tree-x-dragging-item-y) + 8px));pointer-events:none;z-index:1;animation:ch-tree-x-drag-info-fade-in 10ms}@keyframes ch-tree-x-drag-info-fade-in{0%,100%{opacity:0}}html[dir=rtl] .ch-tree-x-drag-info{--rtl-offset:-100%}";
18
+ const treeXCss = "ch-tree-x{display:flex;position:relative;width:100%;overflow:auto}ch-tree-x>.ch-tree-x-container{position:absolute;inset:0}ch-tree-x.ch-tree-x-dragging-item ch-tree-x-list-item{pointer-events:var(--ch-tree-x-pointer-events, all)}ch-tree-x.ch-tree-x-dragging-item .ch-tree-x-list-item--deny-drop,ch-tree-x.ch-tree-x-dragging-item ch-tree-x-list{pointer-events:none}ch-tree-x.ch-tree-x--dragging-selected-items ch-tree-x-list-item[selected]{--ch-tree-x-pointer-events:none}ch-tree-x.ch-tree-x-waiting-drop-processing{cursor:wait}ch-tree-x.ch-tree-x-waiting-drop-processing>ch-tree-x-list{pointer-events:none}.ch-tree-x-drag-info{--rtl-offset:16px;position:fixed;left:0;top:0;transform:translate(calc(var(--ch-tree-x-dragging-item-x) + var(--rtl-offset)), calc(var(--ch-tree-x-dragging-item-y) + 8px));pointer-events:none;z-index:1;animation:ch-tree-x-drag-info-fade-in 10ms}@keyframes ch-tree-x-drag-info-fade-in{0%,100%{opacity:0}}html[dir=rtl] .ch-tree-x-drag-info{--rtl-offset:-100%}";
19
19
 
20
20
  const TREE_ITEM_TAG_NAME = "ch-tree-x-list-item";
21
21
  const TREE_TAG_NAME = "ch-tree-x";
@@ -25,8 +25,9 @@ const TEXT_FORMAT = "text/plain";
25
25
  const ARROW_DOWN_KEY = "ArrowDown";
26
26
  const ARROW_UP_KEY = "ArrowUp";
27
27
  const EDIT_KEY = "F2";
28
- const isExecutedInTree = (event, el) => event.composedPath().includes(el);
29
- const treeItemIsInEditMode = () => document.activeElement.editing;
28
+ const isTreeItem = (element) => element.tagName.toLowerCase() === TREE_ITEM_TAG_NAME;
29
+ const getFocusedTreeItem = () => focusComposedPath().find(isTreeItem);
30
+ const canMoveTreeItemFocus = (treeItem) => treeItem && !treeItem.editing;
30
31
  const getDroppableZoneKey = (newContainerId, draggedItems) => `"newContainerId":"${newContainerId}","metadata":"${JSON.stringify(draggedItems)}"`;
31
32
  const POSITION_X_DRAG_CUSTOM_VAR = "--ch-tree-x-dragging-item-x";
32
33
  const POSITION_Y_DRAG_CUSTOM_VAR = "--ch-tree-x-dragging-item-y";
@@ -41,27 +42,28 @@ const ChTreeX = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
41
42
  // @todo TODO: Check if key codes works in Safari
42
43
  this.keyDownEvents = {
43
44
  [ARROW_DOWN_KEY]: event => {
44
- if (!isExecutedInTree(event, this.el) || treeItemIsInEditMode()) {
45
+ const treeItem = getFocusedTreeItem();
46
+ if (!canMoveTreeItemFocus(treeItem)) {
45
47
  return;
46
48
  }
47
49
  event.preventDefault();
48
- const treeItem = document.activeElement;
49
50
  treeItem.focusNextItem(mouseEventModifierKey(event));
50
51
  },
51
52
  [ARROW_UP_KEY]: event => {
52
- if (!isExecutedInTree(event, this.el) || treeItemIsInEditMode()) {
53
+ const treeItem = getFocusedTreeItem();
54
+ if (!canMoveTreeItemFocus(treeItem)) {
53
55
  return;
54
56
  }
55
57
  event.preventDefault();
56
- const treeItem = document.activeElement;
57
58
  treeItem.focusPreviousItem(mouseEventModifierKey(event));
58
59
  },
59
60
  [EDIT_KEY]: event => {
60
- if (document.activeElement.tagName.toLowerCase() !== TREE_ITEM_TAG_NAME) {
61
+ const treeItem = getFocusedTreeItem();
62
+ if (!treeItem) {
61
63
  return;
62
64
  }
63
65
  event.preventDefault();
64
- document.activeElement.editing = true;
66
+ treeItem.editing = true;
65
67
  }
66
68
  };
67
69
  this.draggingSelectedItems = false;
@@ -280,7 +282,7 @@ const ChTreeX = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
280
282
  * @param draggedItems Information about the dragged items.
281
283
  * @param validDrop Current state of the droppable zone.
282
284
  */
283
- async updateValidDroppableZone(requestTimestamp, newContainerId, draggedItems, validDrop) {
285
+ async updateValidDropZone(requestTimestamp, newContainerId, draggedItems, validDrop) {
284
286
  var _a;
285
287
  if (!this.draggingInTheDocument ||
286
288
  requestTimestamp <= this.dragStartTimestamp) {
@@ -442,9 +444,10 @@ const ChTreeX = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
442
444
  render() {
443
445
  return (h(Host, { class: {
444
446
  "ch-tree-x-dragging-item": this.draggingInTheDocument,
447
+ "ch-tree-x-not-dragging-item": !this.draggingInTheDocument,
445
448
  "ch-tree-x--dragging-selected-items": this.draggingInTree && this.draggingSelectedItems,
446
449
  "ch-tree-x-waiting-drop-processing": this.waitDropProcessing
447
- } }, h("slot", null), this.draggingInTree && (h("span", { "aria-hidden": "true", class: "ch-tree-x-drag-info" }, this.dragInfo))));
450
+ } }, h("div", { role: "tree", "aria-multiselectable": this.multiSelection.toString(), class: "ch-tree-x-container" }, h("slot", null)), this.draggingInTree && (h("span", { "aria-hidden": "true", class: "ch-tree-x-drag-info" }, this.dragInfo))));
448
451
  }
449
452
  get el() { return this; }
450
453
  static get style() { return treeXCss; }
@@ -457,7 +460,7 @@ const ChTreeX = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
457
460
  "draggingInTree": [32],
458
461
  "clearSelectedItemsInfo": [64],
459
462
  "scrollIntoVisible": [64],
460
- "updateValidDroppableZone": [64]
463
+ "updateValidDropZone": [64]
461
464
  }, [[2, "keydown", "handleKeyDownEvents"], [9, "dragstart", "handleDragStart"], [11, "dragend", "handleDragEnd"], [3, "dragenter", "handleDragEnter"], [3, "dragleave", "handleDragLeave"], [1, "drop", "handleItemDrop"], [0, "itemDragStart", "handleItemDragStart"], [0, "itemDragEnd", "handleItemDragEnd"], [0, "selectedItemSync", "handleSelectedItemSync"], [0, "selectedItemChange", "handleSelectedItemChange"]]]);
462
465
  function defineCustomElement() {
463
466
  if (typeof customElements === "undefined") {
package/dist/esm/ch-checkbox_4.entry.js CHANGED
@@ -1,8 +1,8 @@
1
1
  import { r as registerInstance, c as createEvent, h, H as Host, g as getElement, w as writeTask } from './index-0da01575.js';
2
2
  import { D as DISABLED_CLASS } from './reserverd-names-2a2d0fb3.js';
3
- import { m as mouseEventModifierKey } from './helpers-1ecd5e26.js';
3
+ import { f as focusComposedPath, m as mouseEventModifierKey } from './helpers-1ecd5e26.js';
4
4
 
5
- const checkboxCss = "*,::before,::after{box-sizing:border-box}:host{display:flex;align-items:center;align-self:stretch;outline:unset;touch-action:manipulation;user-select:none}:host(.ch-checkbox--actionable) :is(.input,.label){cursor:pointer}.container{position:relative;width:min(1em, 20px);height:min(1em, 20px);border:1px solid var(--option-border-color, #000);border-radius:18.75%}.container--checked{background-color:var(--option-checked-color, #ffffff00)}.container:focus-within{box-shadow:0 0 1px 1px #00000040}.input{display:flex;width:100%;height:100%;opacity:0;margin:0;padding:0}.option{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);width:50%;height:50%;background-color:#000;opacity:0;pointer-events:none}.option--checked{opacity:1;-webkit-mask:url(\"data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' %3E%3Cpath fill='currentColor' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z' /%3E%3C/svg%3E\")}.option--indeterminate{opacity:1}.label{margin-inline-start:min(0.35em, 7px)}";
5
+ const checkboxCss = "*,::before,::after{box-sizing:border-box}:host{display:flex;align-items:center;align-self:stretch;outline:unset;touch-action:manipulation;user-select:none}:host(.ch-checkbox--actionable) :is(.input,.label){cursor:pointer}.container{position:relative;width:min(1em, 20px);height:min(1em, 20px);border:1px solid var(--option-border-color, currentColor);border-radius:18.75%}.container--checked{background-color:var(--option-checked-color, #ffffff00)}.container:focus-within{box-shadow:0 0 1px 1px color-mix(in srgb, currentColor 25%, transparent)}.input{display:flex;width:100%;height:100%;opacity:0;margin:0;padding:0}.option{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);width:50%;height:50%;background-color:currentColor;opacity:0;pointer-events:none}.option--checked{opacity:1;-webkit-mask:url(\"data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' %3E%3Cpath fill='currentColor' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z' /%3E%3C/svg%3E\")}.option--indeterminate{opacity:1}.label{margin-inline-start:min(0.35em, 7px)}";
6
6
 
7
7
  const CHECKBOX_ID = "checkbox";
8
8
  const PARTS = (checked, indeterminate) => `${checked ? " checked" : ""}${indeterminate ? " indeterminate" : ""}`;
@@ -101,7 +101,7 @@ const scrollToEdge = (event, container, scrollSpeed, scrollThreshold) => {
101
101
  }
102
102
  };
103
103
 
104
- const treeXCss = "ch-tree-x{display:flex;position:relative;overflow:auto}ch-tree-x>ch-tree-x-list{position:absolute;inset:0;min-width:max-content}ch-tree-x.ch-tree-x-dragging-item ch-tree-x-list-item{pointer-events:var(--ch-tree-x-pointer-events, all)}ch-tree-x.ch-tree-x-dragging-item .ch-tree-x-list-item--deny-drop,ch-tree-x.ch-tree-x-dragging-item ch-tree-x-list{pointer-events:none}ch-tree-x.ch-tree-x--dragging-selected-items ch-tree-x-list-item[selected]{--ch-tree-x-pointer-events:none}ch-tree-x.ch-tree-x-waiting-drop-processing{cursor:wait}ch-tree-x.ch-tree-x-waiting-drop-processing>ch-tree-x-list{pointer-events:none}.ch-tree-x-drag-info{--rtl-offset:16px;position:fixed;left:0;top:0;transform:translate(calc(var(--ch-tree-x-dragging-item-x) + var(--rtl-offset)), calc(var(--ch-tree-x-dragging-item-y) + 8px));pointer-events:none;z-index:1;animation:ch-tree-x-drag-info-fade-in 10ms}@keyframes ch-tree-x-drag-info-fade-in{0%,100%{opacity:0}}html[dir=rtl] .ch-tree-x-drag-info{--rtl-offset:-100%}";
104
+ const treeXCss = "ch-tree-x{display:flex;position:relative;width:100%;overflow:auto}ch-tree-x>.ch-tree-x-container{position:absolute;inset:0}ch-tree-x.ch-tree-x-dragging-item ch-tree-x-list-item{pointer-events:var(--ch-tree-x-pointer-events, all)}ch-tree-x.ch-tree-x-dragging-item .ch-tree-x-list-item--deny-drop,ch-tree-x.ch-tree-x-dragging-item ch-tree-x-list{pointer-events:none}ch-tree-x.ch-tree-x--dragging-selected-items ch-tree-x-list-item[selected]{--ch-tree-x-pointer-events:none}ch-tree-x.ch-tree-x-waiting-drop-processing{cursor:wait}ch-tree-x.ch-tree-x-waiting-drop-processing>ch-tree-x-list{pointer-events:none}.ch-tree-x-drag-info{--rtl-offset:16px;position:fixed;left:0;top:0;transform:translate(calc(var(--ch-tree-x-dragging-item-x) + var(--rtl-offset)), calc(var(--ch-tree-x-dragging-item-y) + 8px));pointer-events:none;z-index:1;animation:ch-tree-x-drag-info-fade-in 10ms}@keyframes ch-tree-x-drag-info-fade-in{0%,100%{opacity:0}}html[dir=rtl] .ch-tree-x-drag-info{--rtl-offset:-100%}";
105
105
 
106
106
  const TREE_ITEM_TAG_NAME$1 = "ch-tree-x-list-item";
107
107
  const TREE_TAG_NAME = "ch-tree-x";
@@ -111,8 +111,9 @@ const TEXT_FORMAT = "text/plain";
111
111
  const ARROW_DOWN_KEY = "ArrowDown";
112
112
  const ARROW_UP_KEY = "ArrowUp";
113
113
  const EDIT_KEY = "F2";
114
- const isExecutedInTree = (event, el) => event.composedPath().includes(el);
115
- const treeItemIsInEditMode = () => document.activeElement.editing;
114
+ const isTreeItem = (element) => element.tagName.toLowerCase() === TREE_ITEM_TAG_NAME$1;
115
+ const getFocusedTreeItem = () => focusComposedPath().find(isTreeItem);
116
+ const canMoveTreeItemFocus = (treeItem) => treeItem && !treeItem.editing;
116
117
  const getDroppableZoneKey = (newContainerId, draggedItems) => `"newContainerId":"${newContainerId}","metadata":"${JSON.stringify(draggedItems)}"`;
117
118
  const POSITION_X_DRAG_CUSTOM_VAR = "--ch-tree-x-dragging-item-x";
118
119
  const POSITION_Y_DRAG_CUSTOM_VAR = "--ch-tree-x-dragging-item-y";
@@ -126,27 +127,28 @@ const ChTreeX = class {
126
127
  // @todo TODO: Check if key codes works in Safari
127
128
  this.keyDownEvents = {
128
129
  [ARROW_DOWN_KEY]: event => {
129
- if (!isExecutedInTree(event, this.el) || treeItemIsInEditMode()) {
130
+ const treeItem = getFocusedTreeItem();
131
+ if (!canMoveTreeItemFocus(treeItem)) {
130
132
  return;
131
133
  }
132
134
  event.preventDefault();
133
- const treeItem = document.activeElement;
134
135
  treeItem.focusNextItem(mouseEventModifierKey(event));
135
136
  },
136
137
  [ARROW_UP_KEY]: event => {
137
- if (!isExecutedInTree(event, this.el) || treeItemIsInEditMode()) {
138
+ const treeItem = getFocusedTreeItem();
139
+ if (!canMoveTreeItemFocus(treeItem)) {
138
140
  return;
139
141
  }
140
142
  event.preventDefault();
141
- const treeItem = document.activeElement;
142
143
  treeItem.focusPreviousItem(mouseEventModifierKey(event));
143
144
  },
144
145
  [EDIT_KEY]: event => {
145
- if (document.activeElement.tagName.toLowerCase() !== TREE_ITEM_TAG_NAME$1) {
146
+ const treeItem = getFocusedTreeItem();
147
+ if (!treeItem) {
146
148
  return;
147
149
  }
148
150
  event.preventDefault();
149
- document.activeElement.editing = true;
151
+ treeItem.editing = true;
150
152
  }
151
153
  };
152
154
  this.draggingSelectedItems = false;
@@ -365,7 +367,7 @@ const ChTreeX = class {
365
367
  * @param draggedItems Information about the dragged items.
366
368
  * @param validDrop Current state of the droppable zone.
367
369
  */
368
- async updateValidDroppableZone(requestTimestamp, newContainerId, draggedItems, validDrop) {
370
+ async updateValidDropZone(requestTimestamp, newContainerId, draggedItems, validDrop) {
369
371
  var _a;
370
372
  if (!this.draggingInTheDocument ||
371
373
  requestTimestamp <= this.dragStartTimestamp) {
@@ -527,9 +529,10 @@ const ChTreeX = class {
527
529
  render() {
528
530
  return (h(Host, { class: {
529
531
  "ch-tree-x-dragging-item": this.draggingInTheDocument,
532
+ "ch-tree-x-not-dragging-item": !this.draggingInTheDocument,
530
533
  "ch-tree-x--dragging-selected-items": this.draggingInTree && this.draggingSelectedItems,
531
534
  "ch-tree-x-waiting-drop-processing": this.waitDropProcessing
532
- } }, h("slot", null), this.draggingInTree && (h("span", { "aria-hidden": "true", class: "ch-tree-x-drag-info" }, this.dragInfo))));
535
+ } }, h("div", { role: "tree", "aria-multiselectable": this.multiSelection.toString(), class: "ch-tree-x-container" }, h("slot", null)), this.draggingInTree && (h("span", { "aria-hidden": "true", class: "ch-tree-x-drag-info" }, this.dragInfo))));
533
536
  }
534
537
  get el() { return getElement(this); }
535
538
  };
@@ -540,21 +543,18 @@ const treeXListCss = ":host{display:grid;grid-auto-rows:min-content;position:rel
540
543
  const ChTreeListX = class {
541
544
  constructor(hostRef) {
542
545
  registerInstance(this, hostRef);
543
- /**
544
- * Level in the tree at which the control is placed.
545
- */
546
- this.level = 0;
547
546
  }
548
547
  render() {
549
- return (h(Host, { role: this.level === 0 ? "tree" : "group" }, h("slot", null)));
548
+ return (h(Host, { role: "group" }, h("slot", null)));
550
549
  }
551
550
  get el() { return getElement(this); }
552
551
  };
553
552
  ChTreeListX.style = treeXListCss;
554
553
 
555
- const treeXListItemCss = ":where(button){all:unset;display:flex;cursor:pointer;user-select:none;touch-action:manipulation;-webkit-user-drag:element}*,::before,::after{box-sizing:border-box}:host{--checkbox-size:1em;--expandable-button-width:0.75em;--ch-tree-x-list-item-dashed-line--offset:0px;--tab-width:calc(\n var(--checkbox-size) + var(--expandable-button-width) +\n (5px * 2)\n );display:grid;grid-template-rows:min-content;overflow:hidden}.header{--own-offset:0px;display:flex;align-items:center;min-height:calc(1em + 6px);padding-inline-start:var(--padding-inline-start)}.header--disabled{opacity:0.5;pointer-events:none}.header--even{--padding-inline-start:calc(\n var(--parent-padding-inline-start--odd, 0px) + var(--tab-width)\n )}.header--even+.expandable{--parent-padding-inline-start--even:calc(\n var(--parent-padding-inline-start--odd, 0px) + var(--tab-width)\n )}.header--even .dashed-line{--inset-inline-start:calc(\n var(--parent-padding-inline-start--odd, 0px) +\n var(--parent-checkbox-offset) + var(--parent-expandable-offset)\n )}.header--even-expandable{--padding-inline-start:calc(\n var(--parent-padding-inline-start--odd, 0px) + var(--tab-width) - calc(\n var(--expandable-button-width) + 5px\n )\n )}.header--even-expandable+.expandable{--parent-padding-inline-start--even:calc(\n var(--parent-padding-inline-start--odd, 0px) + var(--tab-width) - calc(\n var(--expandable-button-width) + 5px\n )\n )}.header--odd{--padding-inline-start:calc(\n var(--parent-padding-inline-start--even, 0px) + var(--tab-width)\n )}.header--odd+.expandable{--parent-padding-inline-start--odd:calc(\n var(--parent-padding-inline-start--even, 0px) + var(--tab-width)\n )}.header--odd .dashed-line{--inset-inline-start:calc(\n var(--parent-padding-inline-start--even, 0px) +\n var(--parent-checkbox-offset) + var(--parent-expandable-offset)\n )}.header--odd-expandable{--padding-inline-start:calc(\n var(--parent-padding-inline-start--even, 0px) + var(--tab-width) - calc(\n var(--expandable-button-width) + 5px\n )\n )}.header--odd-expandable+.expandable{--parent-padding-inline-start--odd:calc(\n var(--parent-padding-inline-start--even, 0px) + var(--tab-width) - calc(\n var(--expandable-button-width) + 5px\n )\n )}.header--level-0{--padding-inline-start:0px}.header--level-0+.expandable{--parent-padding-inline-start--even:0px}.header--expandable-offset{--own-offset:calc(\n var(--expandable-button-width) + 5px\n )}.header--expandable-offset+.expandable{--parent-expandable-offset:calc(var(--expandable-button-width) / 2)}.header--checkbox-offset+.expandable{--parent-checkbox-offset:calc(var(--checkbox-size) / 2);--parent-negative-checkbox-offset:calc(var(--checkbox-size) / 2)}.dashed-line{position:absolute;inset-inline-start:calc( var(--inset-inline-start) + var(--ch-tree-x-list-item-dashed-line--offset) );height:1px;width:calc( var(--tab-width) - var(--parent-checkbox-offset) - var(--parent-expandable-offset) - var(--own-offset) - var(--ch-tree-x-list-item-dashed-line--offset) - 4px );border:0 dashed #a9a9a9;border-block-end-width:1px;pointer-events:none;content-visibility:hidden;z-index:1}.last-all-line{inset-block-start:0;height:calc(100% - var(--distance-to-checkbox));border-inline-start-width:1px;border-end-start-radius:2px}.last-line{inset-block-start:0;height:100%;border-inline-start-width:1px;border-style:solid;border-block-end:unset}.expandable-button{display:grid;place-items:center;width:var(--expandable-button-width);height:var(--expandable-button-width);margin-inline-end:5px;z-index:1;content-visibility:auto;contain-intrinsic-size:auto var(--expandable-button-width)}.expandable-button::before{content:\"\";width:calc(100% - 2px);height:calc(100% - 2px);background-color:currentColor;-webkit-mask-size:calc(var(--expandable-button-width) - 2px)}.expandable-button--collapsed::before{-webkit-mask-image:url('data:image/svg+xml,<svg viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M14.15,8.5H8.54v5.61h-1V8.5H1.93v-1H7.54V1.89h1V7.5h5.61Z\"/></svg>')}.expandable-button--expanded::before{-webkit-mask-image:url('data:image/svg+xml,<svg viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M14.15,8.5H1.93v-1H14.15Z\"/></svg>')}.expandable-button:focus-visible{outline:1px solid #000}.checkbox{margin-inline-end:5px}.checkbox::part(container){width:var(--checkbox-size);height:var(--checkbox-size)}.action{display:grid;grid-template:\"left-img text right-img\"/max-content 1fr max-content;align-items:center;height:100%;flex:1}.readonly-mode{padding-block:0.75px}.left-img,.right-img{display:block;width:0.875em;height:0.875em;content-visibility:auto;contain-intrinsic-size:auto 0.875em}.left-img{grid-area:left-img;margin-inline-end:5px}.right-img{grid-area:right-img;margin-inline-start:5px}.edit-name{grid-area:text;width:100%;height:100%;background-color:unset;padding:0;margin:0;border:1px solid currentColor;font:unset;outline:unset}.downloading{width:0.75em;height:0.75em;margin-inline-start:8px;border:2px solid currentColor;border-inline-start-color:transparent;border-radius:50%;opacity:0.75;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.expandable{--parent-expandable-offset:0px;--parent-negative-checkbox-offset:0px;--parent-checkbox-offset:0px;display:grid;grid-template-rows:0fr;content-visibility:auto;contain-intrinsic-size:auto 100px}.expanded{grid-template-rows:1fr}:not(.expanded) ::slotted([slot=tree]){display:none;overflow:hidden;content-visibility:hidden}";
554
+ const treeXListItemCss = ":where(button){all:unset;display:flex;user-select:none;touch-action:manipulation;-webkit-user-drag:element}*,::before,::after{box-sizing:border-box}:host{--checkbox-size:1em;--expandable-button-width:0.75em;--ch-tree-x-list-item-dashed-line--offset:0px;--tab-width:calc(\n var(--checkbox-size) + var(--expandable-button-width) +\n (5px * 2)\n );display:grid;grid-template-rows:min-content;overflow:hidden}.header{--own-offset:0px;display:flex;align-items:center;min-height:calc(1em + 6px);padding-inline-start:var(--padding-inline-start)}.header--disabled{opacity:0.5;pointer-events:none}.header--even{--padding-inline-start:calc(\n var(--parent-padding-inline-start--odd, 0px) + var(--tab-width)\n )}.header--even+.expandable{--parent-padding-inline-start--even:calc(\n var(--parent-padding-inline-start--odd, 0px) + var(--tab-width)\n )}.header--even .dashed-line{--inset-inline-start:calc(\n var(--parent-padding-inline-start--odd, 0px) +\n var(--parent-checkbox-offset) + var(--parent-expandable-offset)\n )}.header--even-expandable{--padding-inline-start:calc(\n var(--parent-padding-inline-start--odd, 0px) + var(--tab-width) - calc(\n var(--expandable-button-width) + 5px\n )\n )}.header--even-expandable+.expandable{--parent-padding-inline-start--even:calc(\n var(--parent-padding-inline-start--odd, 0px) + var(--tab-width) - calc(\n var(--expandable-button-width) + 5px\n )\n )}.header--odd{--padding-inline-start:calc(\n var(--parent-padding-inline-start--even, 0px) + var(--tab-width)\n )}.header--odd+.expandable{--parent-padding-inline-start--odd:calc(\n var(--parent-padding-inline-start--even, 0px) + var(--tab-width)\n )}.header--odd .dashed-line{--inset-inline-start:calc(\n var(--parent-padding-inline-start--even, 0px) +\n var(--parent-checkbox-offset) + var(--parent-expandable-offset)\n )}.header--odd-expandable{--padding-inline-start:calc(\n var(--parent-padding-inline-start--even, 0px) + var(--tab-width) - calc(\n var(--expandable-button-width) + 5px\n )\n )}.header--odd-expandable+.expandable{--parent-padding-inline-start--odd:calc(\n var(--parent-padding-inline-start--even, 0px) + var(--tab-width) - calc(\n var(--expandable-button-width) + 5px\n )\n )}.header--level-0{--padding-inline-start:0px}.header--level-0+.expandable{--parent-padding-inline-start--even:0px}.header--expandable-offset{--own-offset:calc(\n var(--expandable-button-width) + 5px\n )}.header--expandable-offset+.expandable{--parent-expandable-offset:calc(var(--expandable-button-width) / 2)}.header--checkbox-offset+.expandable{--parent-checkbox-offset:calc(var(--checkbox-size) / 2);--parent-negative-checkbox-offset:calc(var(--checkbox-size) / 2)}.dashed-line{position:absolute;inset-inline-start:calc( var(--inset-inline-start) + var(--ch-tree-x-list-item-dashed-line--offset) );height:1px;width:calc( var(--tab-width) - var(--parent-checkbox-offset) - var(--parent-expandable-offset) - var(--own-offset) - var(--ch-tree-x-list-item-dashed-line--offset) - 4px );border:0 dashed color-mix(in srgb, currentColor 65%, transparent);border-block-end-width:1px;pointer-events:none;content-visibility:hidden;z-index:1}.last-all-line{inset-block-start:0;height:calc(100% - var(--distance-to-checkbox));border-inline-start-width:1px;border-end-start-radius:2px}.last-line{inset-block-start:0;height:100%;border-inline-start-width:1px;border-style:solid;border-block-end:unset}.expandable-button{display:grid;place-items:center;width:var(--expandable-button-width);height:var(--expandable-button-width);margin-inline-end:5px;z-index:1;cursor:pointer;content-visibility:auto;contain-intrinsic-size:auto var(--expandable-button-width)}.expandable-button::before{content:\"\";width:calc(100% - 2px);height:calc(100% - 2px);background-color:currentColor;-webkit-mask-size:calc(var(--expandable-button-width) - 2px)}.expandable-button--collapsed::before{-webkit-mask-image:url('data:image/svg+xml,<svg viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M14.15,8.5H8.54v5.61h-1V8.5H1.93v-1H7.54V1.89h1V7.5h5.61Z\"/></svg>')}.expandable-button--expanded::before{-webkit-mask-image:url('data:image/svg+xml,<svg viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M14.15,8.5H1.93v-1H14.15Z\"/></svg>')}.expandable-button:focus-visible{outline:1px solid #000}.checkbox{margin-inline-end:5px}.checkbox::part(container){width:var(--checkbox-size);height:var(--checkbox-size)}.action{display:grid;grid-template:\"left-img text right-img\"/max-content 1fr max-content;align-items:center;height:100%;flex:1;cursor:pointer}.readonly-mode{padding-block:0.75px}.left-img,.right-img{display:block;width:0.875em;height:0.875em;content-visibility:auto;contain-intrinsic-size:auto 0.875em}.left-img{grid-area:left-img;margin-inline-end:5px}.right-img{grid-area:right-img;margin-inline-start:5px}.edit-name{grid-area:text;width:100%;height:100%;padding:0;margin:0;background-color:unset;color:unset;border:1px solid currentColor;font:unset;outline:unset}.downloading{width:0.75em;height:0.75em;margin-inline-start:8px;border:2px solid currentColor;border-inline-start-color:transparent;border-radius:50%;opacity:0.75;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.expandable{--parent-expandable-offset:0px;--parent-negative-checkbox-offset:0px;--parent-checkbox-offset:0px;display:grid;grid-template-rows:0fr;content-visibility:auto;contain-intrinsic-size:auto 100px}.expanded{grid-template-rows:1fr}:not(.expanded) ::slotted([slot=tree]){display:none;overflow:hidden;content-visibility:hidden}";
556
555
 
557
556
  const resetDragImage = new Image();
557
+ const INITIAL_LEVEL = 0;
558
558
  // Selectors
559
559
  const TREE_ITEM_TAG_NAME = "ch-tree-x-list-item";
560
560
  const DIRECT_TREE_ITEM_CHILDREN = `:scope>*>${TREE_ITEM_TAG_NAME}`;
@@ -564,6 +564,17 @@ const LAST_SUB_ITEM = `:scope>*>${TREE_ITEM_TAG_NAME}:last-child`;
564
564
  const EXPANDABLE_ID = "expandable";
565
565
  const ENTER_KEY = "Enter";
566
566
  const ESCAPE_KEY = "Escape";
567
+ // Export Parts
568
+ const getCheckboxExportPart = (part) => `${part}:checkbox__${part}`;
569
+ const CHECKBOX_EXPORT_PARTS = [
570
+ "container",
571
+ "input",
572
+ "option",
573
+ "checked",
574
+ "indeterminate"
575
+ ]
576
+ .map(getCheckboxExportPart)
577
+ .join(",");
567
578
  const ChTreeXListItem = class {
568
579
  constructor(hostRef) {
569
580
  registerInstance(this, hostRef);
@@ -644,7 +655,7 @@ const ChTreeXListItem = class {
644
655
  /**
645
656
  * Level in the tree at which the item is placed.
646
657
  */
647
- this.level = 0;
658
+ this.level = INITIAL_LEVEL;
648
659
  /**
649
660
  * `true` if the checkbox's value is indeterminate.
650
661
  */
@@ -902,7 +913,7 @@ const ChTreeXListItem = class {
902
913
  return;
903
914
  }
904
915
  // The item is the last one of the tree at the first level
905
- if (this.level === 0) {
916
+ if (this.level === INITIAL_LEVEL) {
906
917
  return;
907
918
  }
908
919
  // Otherwise, ask the parent to focus the next sibling
@@ -923,7 +934,7 @@ const ChTreeXListItem = class {
923
934
  return;
924
935
  }
925
936
  // The item is the first one of the tree at the first level
926
- if (this.level === 0) {
937
+ if (this.level === INITIAL_LEVEL) {
927
938
  return;
928
939
  }
929
940
  // Otherwise, set focus in the parent element
@@ -1022,7 +1033,7 @@ const ChTreeXListItem = class {
1022
1033
  this.selectedItemChange.emit(this.getSelectedInfo(true, false, true));
1023
1034
  }
1024
1035
  // No need to update more the status
1025
- if (this.level === 0) {
1036
+ if (this.level === INITIAL_LEVEL) {
1026
1037
  return;
1027
1038
  }
1028
1039
  // Update checkbox status
@@ -1049,11 +1060,14 @@ const ChTreeXListItem = class {
1049
1060
  const expandableButtonNotVisible = !this.leaf && !this.showExpandableButton;
1050
1061
  const acceptDrop = !this.dropDisabled && !this.leaf && this.dragState !== "start";
1051
1062
  const hasContent = !this.leaf && !this.lazyLoad;
1052
- const showAllLines = this.showLines === "all" && this.level !== 0;
1053
- const showLastLine = this.showLines === "last" && this.level !== 0 && this.lastItem;
1054
- return (h(Host, { role: "treeitem", "aria-selected": this.selected ? "true" : null, class: {
1063
+ const showAllLines = this.showLines === "all" && this.level !== INITIAL_LEVEL;
1064
+ const showLastLine = this.showLines === "last" &&
1065
+ this.level !== INITIAL_LEVEL &&
1066
+ this.lastItem;
1067
+ return (h(Host, { role: "treeitem", "aria-level": this.level + 1, "aria-selected": this.selected ? "true" : null, class: {
1055
1068
  [TREE_ITEM_TAG_NAME + "--downloading"]: this.downloading,
1056
1069
  [TREE_ITEM_TAG_NAME + "--editing"]: this.editing,
1070
+ [TREE_ITEM_TAG_NAME + "--not-editing"]: !this.editing,
1057
1071
  [TREE_ITEM_TAG_NAME + "--drag-" + this.dragState]: this.dragState !== "none" && this.dragState !== "start",
1058
1072
  [TREE_ITEM_TAG_NAME + "--deny-drop"]: this.leaf
1059
1073
  }, style: { "--level": `${this.level}` },
@@ -1068,14 +1082,14 @@ const ChTreeXListItem = class {
1068
1082
  "header--odd": !evenLevel,
1069
1083
  "header--even-expandable": evenLevel && expandableButtonVisible,
1070
1084
  "header--odd-expandable": !evenLevel && expandableButtonVisible,
1071
- "header--level-0": this.level === 0
1085
+ "header--level-0": this.level === INITIAL_LEVEL
1072
1086
  }, part: `header${this.disabled ? " disabled" : ""}${this.selected ? " selected" : ""}`, type: "button", disabled: this.disabled, onClick: this.handleActionClick, onKeyDown: !this.editing ? this.handleActionKeyDown : null,
1073
1087
  // Drag and drop
1074
1088
  draggable: !this.dragDisabled, onDragStart: this.handleDragStart, onDragEnd: !this.dragDisabled ? this.handleDragEnd : null, ref: el => (this.headerRef = el) }, !this.leaf && this.showExpandableButton && (h("button", { type: "button", class: {
1075
1089
  "expandable-button": true,
1076
1090
  "expandable-button--expanded": this.expanded,
1077
1091
  "expandable-button--collapsed": !this.expanded
1078
- }, part: `expandable-button${this.disabled ? " disabled" : ""}${this.expanded ? " expanded" : " collapsed"}`, disabled: this.disabled, onClick: this.toggleExpand })), this.checkbox && (h("ch-checkbox", { accessibleName: this.caption, class: "checkbox", part: `checkbox${this.disabled ? " disabled" : ""}${this.checked ? " checked" : ""}${this.indeterminate ? " indeterminate" : ""}`, checkedValue: "true", disabled: this.disabled, indeterminate: this.indeterminate, unCheckedValue: "false", value: `${this.checked}`, onInput: this.handleCheckedChange })), this.customRender ? (h("slot", { name: "custom-content" })) : ([
1092
+ }, part: `expandable-button${this.disabled ? " disabled" : ""}${this.expanded ? " expanded" : " collapsed"}`, disabled: this.disabled, onClick: this.toggleExpand })), this.checkbox && (h("ch-checkbox", { accessibleName: this.caption, class: "checkbox", exportparts: CHECKBOX_EXPORT_PARTS, part: `checkbox${this.disabled ? " disabled" : ""}${this.checked ? " checked" : ""}${this.indeterminate ? " indeterminate" : ""}`, checkedValue: "true", disabled: this.disabled, indeterminate: this.indeterminate, unCheckedValue: "false", value: `${this.checked}`, onInput: this.handleCheckedChange })), this.customRender ? (h("slot", { name: "custom-content" })) : ([
1079
1093
  h("div", { class: {
1080
1094
  action: true,
1081
1095
  "readonly-mode": !this.editing