@genexus/genexus-ide-ui 0.0.61 → 0.0.63

package/dist/{esm/gxg-title.entry.js → components/title2.js}

@@ -1,11 +1,13 @@
-import { r as registerInstance, h, H as Host } from './index-0da01575.js';
-import { s as state } from './store-c2650ca5.js';
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { s as state } from './store.js';
 
 const titleCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0;}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px;}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-01--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-02{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-02--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-03{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-03--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-04{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-04--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-05{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em}.gxg-title-05--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em;color:var(--color-on-primary)}.gxg-text{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-text--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-text--gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--gray-05)}.gxg-quote{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;font-style:italic}.gxg-quote--negative{color:var(--color-on-primary)}.gxg-link{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--color-primary-hover)}.gxg-link:active{color:var(--color-primary-active)}.gxg-link-gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04)}.gxg-link-gray:hover{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04);color:var(--gray-06)}.gxg-alert-error{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-error-dark);display:inline-block}.gxg-alert-warning{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-warning-dark);display:inline-block}.gxg-alert-success{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-success-dark);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-button-styles{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:var(--gxg-scrollbar-width, 6px)}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background, --gray-02);border-radius:var(--gxg-scrollbar-track-border-radius, 10px)}.gxg-scrollbar::-webkit-scrollbar-thumb{background:var(--gxg-scrollbar-track-thumb-background, --gray-05);border-radius:var(--gxg-scrollbar-track-thumb-radius, 10px)}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--gxg-scrollbar-track-thumb-hover-background, --gray-04);cursor:pointer}:host h1,:host h2,:host h3,:host h4,:host h5{margin:0;color:inherit;background-color:transparent}:host([alignment=start]) h1,:host([alignment=start]) h2,:host([alignment=start]) h3,:host([alignment=start]) h4,:host([alignment=start]) h5{text-align:start}:host([alignment=center]) h1,:host([alignment=center]) h2,:host([alignment=center]) h3,:host([alignment=center]) h4,:host([alignment=center]) h5{text-align:center}:host([alignment=end]) h1,:host([alignment=end]) h2,:host([alignment=end]) h3,:host([alignment=end]) h4,:host([alignment=end]) h5{text-align:end}:host(.large) .gxg-title-01{font-size:var(--font-size-xl)}:host(.large) .gxg-title-02{font-size:var(--font-size-lg)}:host(.large) .gxg-title-03{font-size:var(--font-size-lg)}:host(.large) .gxg-title-04{font-size:var(--font-size-xl)}:host(.large) .gxg-title-05{font-size:var(--font-size-lg)}";
 
-const GxgTitle = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
+const GxgTitle = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
     /**
      * Title type
      */
@@ -41,7 +43,23 @@ const GxgTitle = class {
   render() {
     return h(Host, { class: { large: state.large } }, this.titleType(), " ");
   }
-};
-GxgTitle.style = titleCss;
+  static get style() { return titleCss; }
+}, [1, "gxg-title", {
+    "type": [1],
+    "alignment": [513]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["gxg-title"];
+  components.forEach(tagName => { switch (tagName) {
+    case "gxg-title":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, GxgTitle);
+      }
+      break;
+  } });
+}
 
-export { GxgTitle as gxg_title };
+export { GxgTitle as G, defineCustomElement as d };

package/dist/components/{tree-x-list-item.js → tree-view-item.js}

@@ -2,12 +2,12 @@ import { proxyCustomElement, HTMLElement, createEvent, h, writeTask, Host } from
 import { m as mouseEventModifierKey } from './helpers.js';
 import { d as defineCustomElement$1 } from './checkbox.js';
 
-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-auto-rows:min-content;position:relative;content-visibility:auto;contain-intrinsic-size:auto 100px}.expandable--collapsed{display:none;overflow:hidden;content-visibility:hidden}";
+const treeViewItemCss = ":where(button){all:unset;display:flex;user-select:none;touch-action:manipulation;-webkit-user-drag:element}*,::before,::after{box-sizing:border-box}:host{--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-auto-rows:min-content;position:relative;content-visibility:auto;contain-intrinsic-size:auto 100px}.expandable--collapsed{display:none;overflow:hidden;content-visibility:hidden}";
 
 const resetDragImage = new Image();
 const INITIAL_LEVEL = 0;
 // Selectors
-const TREE_ITEM_TAG_NAME = "ch-tree-x-list-item";
+const TREE_ITEM_TAG_NAME = "ch-tree-view-item";
 const DIRECT_TREE_ITEM_CHILDREN = `:scope>${TREE_ITEM_TAG_NAME}`;
 const FIRST_ENABLED_SUB_ITEM = `${TREE_ITEM_TAG_NAME}:not([disabled])`;
 const LAST_SUB_ITEM = `:scope>${TREE_ITEM_TAG_NAME}:last-child`;
@@ -26,7 +26,7 @@ const CHECKBOX_EXPORT_PARTS = [
 ]
   .map(getCheckboxExportPart)
   .join(",");
-const ChTreeXListItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const ChTreeViewItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -586,8 +586,8 @@ const ChTreeXListItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     "selected": ["handleSelectedChange"],
     "showLines": ["handleShowLinesChange"]
   }; }
-  static get style() { return treeXListItemCss; }
-}, [1, "ch-tree-x-list-item", {
+  static get style() { return treeViewItemCss; }
+}, [1, "ch-tree-view-item", {
     "caption": [1],
     "checkbox": [4],
     "checked": [1540],
@@ -623,11 +623,11 @@ function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["ch-tree-x-list-item", "ch-checkbox"];
+  const components = ["ch-tree-view-item", "ch-checkbox"];
   components.forEach(tagName => { switch (tagName) {
-    case "ch-tree-x-list-item":
+    case "ch-tree-view-item":
       if (!customElements.get(tagName)) {
-        customElements.define(tagName, ChTreeXListItem);
+        customElements.define(tagName, ChTreeViewItem);
       }
       break;
     case "ch-checkbox":
@@ -638,4 +638,4 @@ function defineCustomElement() {
   } });
 }
 
-export { ChTreeXListItem as C, defineCustomElement as d };
+export { ChTreeViewItem as C, defineCustomElement as d };

package/dist/components/{ch-test-tree-x.js → tree-view-render.js}

@@ -1,9 +1,44 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, forceUpdate } from '@stencil/core/internal/client';
-import { d as defineCustomElement$4 } from './checkbox.js';
-import { d as defineCustomElement$3 } from './tree-x.js';
-import { d as defineCustomElement$2 } from './tree-x-list-item.js';
+import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$3 } from './checkbox.js';
+import { d as defineCustomElement$2 } from './tree-view.js';
+import { d as defineCustomElement$1 } from './tree-view-item.js';
 
-const testTreeXCss = "ch-test-tree-x{display:contents}";
+const filterWithCamelCase = (stringToFilter, filter, camelCase) => camelCase
+  ? stringToFilter.includes(filter)
+  : stringToFilter.toLowerCase().includes(filter.toLowerCase());
+const filterWithString = (stringToFilter, filter, filterOptions) => filterOptions.regularExpression
+  ? stringToFilter.match(filter) !== null
+  : filterWithCamelCase(stringToFilter, filter, filterOptions.camelCase);
+const filterDictionary = {
+  caption: (item, filterInfo) => {
+    var _a;
+    return filterInfo.filter
+      ? filterWithString((_a = item.caption) !== null && _a !== void 0 ? _a : "", filterInfo.filter, filterInfo.filterOptions)
+      : true;
+  },
+  checked: (item, filterInfo) => {
+    var _a, _b;
+    return ((_a = item.checkbox) !== null && _a !== void 0 ? _a : filterInfo.defaultCheckbox) &&
+      !item.indeterminate &&
+      ((_b = item.checked) !== null && _b !== void 0 ? _b : filterInfo.defaultChecked);
+  },
+  "id-list": (item, filterInfo) => filterInfo.filterList.includes(item.id),
+  metadata: (item, filterInfo) => {
+    var _a;
+    return filterInfo.filter
+      ? filterWithString((_a = item.metadata) !== null && _a !== void 0 ? _a : "", filterInfo.filter, filterInfo.filterOptions)
+      : true;
+  },
+  none: () => true,
+  unchecked: (item, filterInfo) => {
+    var _a, _b;
+    return ((_a = item.checkbox) !== null && _a !== void 0 ? _a : filterInfo.defaultCheckbox) &&
+      !item.indeterminate &&
+      !((_b = item.checked) !== null && _b !== void 0 ? _b : filterInfo.defaultChecked);
+  }
+};
+
+const treeViewRenderCss = "ch-tree-view-render{display:contents}";
 
 const DEFAULT_DRAG_DISABLED_VALUE = false;
 const DEFAULT_DROP_DISABLED_VALUE = false;
@@ -14,7 +49,13 @@ const DEFAULT_INDETERMINATE_VALUE = false;
 const DEFAULT_LAZY_VALUE = false;
 const DEFAULT_ORDER_VALUE = 0;
 const DEFAULT_SELECTED_VALUE = false;
-const ChTestTreeX$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const defaultRenderItem = (itemModel, treeState, lastItem, level) => {
+  var _a, _b, _c, _d, _e, _f;
+  return (treeState.filterType === "none" || itemModel.render !== false) && (h("ch-tree-view-item", { 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, 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, indeterminate: itemModel.indeterminate, lastItem: lastItem, lazyLoad: itemModel.lazy, leaf: itemModel.leaf, leftImgSrc: itemModel.leftImgSrc, level: level, metadata: itemModel.metadata, rightImgSrc: itemModel.rightImgSrc, selected: itemModel.selected, showExpandableButton: itemModel.showExpandableButton, 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, treeState.showLines && index === itemModel.items.length - 1, level + 1))));
+};
+const ChTreeViewRender = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -56,10 +97,39 @@ const ChTestTreeX$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
      * items by default. If `true`, the items can edit its caption in place.
      */
     this.editableItems = DEFAULT_EDITABLE_ITEMS_VALUE;
+    /**
+     * This property lets you determine the list of items that will be filtered.
+     * Only works if `filterType = "id-list"`.
+     */
+    this.filterList = [];
+    /**
+     * This property lets you determine the options that will be applied to the
+     * filter.
+     * Only works if `filterType = "caption" | "metadata"`.
+     */
+    this.filterOptions = {};
+    /**
+     * This attribute lets you define what kind of filter is applied to items.
+     * Only items that satisfy the filter predicate will be displayed.
+     *
+     * | Value       | Details                                                                                        |
+     * | ----------- | ---------------------------------------------------------------------------------------------- |
+     * | `checked`   | Show only the items that have a checkbox and are checked.                                      |
+     * | `unchecked` | Show only the items that have a checkbox and are not checked.                                  |
+     * | `caption`   | Show only the items whose `caption` satisfies the regex determinate by the `filter` property.  |
+     * | `metadata`  | Show only the items whose `metadata` satisfies the regex determinate by the `filter` property. |
+     * | `id-list`   | Show only the items that are contained in the array determinate by the `filterList` property.  |
+     * | `none`      | Show all items.                                                                                |
+     */
+    this.filterType = "none";
     /**
      * Set this attribute if you want to allow multi selection of the items.
      */
     this.multiSelection = false;
+    /**
+     * This property allows us to implement custom rendering of tree items.
+     */
+    this.renderItem = defaultRenderItem;
     /**
      * `true` to display the relation between tree items and tree lists using
      * lines.
@@ -173,6 +243,10 @@ const ChTestTreeX$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         this.sortItems(newParentUIModel.items);
         // Open the item to visualize the new subitems
         newParentUIModel.expanded = true;
+        // Re-sync checked items
+        this.emitCheckedItemsChange();
+        // Update filters
+        this.processFilters();
         // There is no need to force and update, since the waitDropProcessing
         // prop was modified
       });
@@ -188,12 +262,6 @@ const ChTestTreeX$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       // Reference the new parent in the item
       itemUIModelExtended.parentItem = newParentUIModel;
     };
-    this.renderSubModel = (treeSubModel, lastItem, level) => {
-      var _a, _b, _c, _d, _e, _f;
-      return (h("ch-tree-x-list-item", { id: treeSubModel.id, caption: treeSubModel.caption, checkbox: (_a = treeSubModel.checkbox) !== null && _a !== void 0 ? _a : this.checkbox, checked: (_b = treeSubModel.checked) !== null && _b !== void 0 ? _b : this.checked, class: treeSubModel.class, disabled: treeSubModel.disabled, downloading: treeSubModel.downloading, dragDisabled: (_c = treeSubModel.dragDisabled) !== null && _c !== void 0 ? _c : this.dragDisabled, dropDisabled: (_d = treeSubModel.dropDisabled) !== null && _d !== void 0 ? _d : this.dropDisabled, editable: (_e = treeSubModel.editable) !== null && _e !== void 0 ? _e : this.editableItems, expanded: treeSubModel.expanded, indeterminate: treeSubModel.indeterminate, lastItem: lastItem, lazyLoad: treeSubModel.lazy, leaf: treeSubModel.leaf, leftImgSrc: treeSubModel.leftImgSrc, level: level, metadata: treeSubModel.metadata, rightImgSrc: treeSubModel.rightImgSrc, selected: treeSubModel.selected, showExpandableButton: treeSubModel.showExpandableButton, showLines: this.showLines, toggleCheckboxes: (_f = treeSubModel.toggleCheckboxes) !== null && _f !== void 0 ? _f : this.toggleCheckboxes }, !treeSubModel.leaf &&
-        treeSubModel.items != null &&
-        treeSubModel.items.map((subModel, index) => this.renderSubModel(subModel, this.showLines && index === treeSubModel.items.length - 1, level + 1))));
-    };
     this.flattenItemUIModel = (parentModel) => (item) => {
       var _a, _b, _c, _d, _e, _f;
       this.flattenedTreeModel.set(item.id, {
@@ -221,6 +289,24 @@ const ChTestTreeX$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       this.flattenSubModel(item);
     };
   }
+  handleFilterChange() {
+    if (this.filterType === "caption" || this.filterType === "metadata") {
+      this.processFilters();
+    }
+  }
+  handleFilterListChange() {
+    if (this.filterType === "id-list") {
+      this.processFilters();
+    }
+  }
+  handleFilterOptionsChange() {
+    if (this.filterType === "caption" || this.filterType === "metadata") {
+      this.processFilters();
+    }
+  }
+  handleFilterTypeChange() {
+    this.processFilters();
+  }
   handleTreeModelChange() {
     this.flattenModel();
   }
@@ -243,6 +329,8 @@ const ChTestTreeX$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.flattenSubModel(itemToLazyLoadContent);
     // Re-sync checked items
     this.emitCheckedItemsChange();
+    // Update filters
+    this.processFilters();
     // Force re-render
     forceUpdate(this);
   }
@@ -308,6 +396,10 @@ const ChTestTreeX$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         itemUIModel.item.indeterminate = false;
       }
     });
+    // Update filters
+    if (properties.checked != null) {
+      this.processFilters();
+    }
     forceUpdate(this);
   }
   /**
@@ -319,6 +411,8 @@ const ChTestTreeX$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       const itemUIModel = this.flattenedTreeModel.get(item);
       this.updateItemProperty(itemUIModel, properties);
     });
+    // Update filters
+    this.processFilters();
     forceUpdate(this);
   }
   /**
@@ -354,6 +448,12 @@ const ChTestTreeX$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     itemInfo.checked = detail.checked;
     itemInfo.indeterminate = detail.indeterminate;
     this.emitCheckedItemsChange();
+    // Update filters
+    if (this.filterType === "checked" || this.filterType === "unchecked") {
+      this.processFilters();
+      // Force re-render
+      forceUpdate(this);
+    }
   }
   loadLazyChildrenHandler(event) {
     if (!this.lazyLoadTreeItemsCallback) {
@@ -388,6 +488,8 @@ const ChTestTreeX$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     promise.then(status => {
       if (status.success) {
         this.sortItems(itemUIModel.parentItem.items);
+        // Update filters
+        this.processFilters();
         // Force re-render
         forceUpdate(this);
       }
@@ -443,17 +545,53 @@ const ChTestTreeX$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     // Re-sync checked items
     this.emitCheckedItemsChange();
   }
+  filterSubModel(item, filterInfo) {
+    let aSubItemIsRendered = false;
+    // Check if a subitem is rendered
+    if (item.leaf !== true && item.items != null) {
+      item.items.forEach(subItem => {
+        const itemSatisfiesFilter = this.filterSubModel(subItem, filterInfo);
+        aSubItemIsRendered || (aSubItemIsRendered = itemSatisfiesFilter);
+      });
+    }
+    // The current item is rendered if it satisfies the filter condition or a
+    // subitem exists that needs to be rendered
+    const satisfiesFilter = filterDictionary[this.filterType](item, filterInfo) || aSubItemIsRendered;
+    item.render = satisfiesFilter; // Update item render
+    return satisfiesFilter;
+  }
+  processFilters() {
+    if (this.filterType === "none") {
+      return;
+    }
+    this.filterSubModel({
+      id: null,
+      caption: null,
+      items: this.treeModel
+    }, {
+      defaultCheckbox: this.checkbox,
+      defaultChecked: this.checked,
+      filter: this.filter,
+      filterList: this.filterList,
+      filterOptions: this.filterOptions
+    });
+  }
   componentWillLoad() {
     this.flattenModel();
+    this.processFilters();
   }
   render() {
-    return (h("ch-tree-x", { class: this.cssClass || null, multiSelection: this.multiSelection, waitDropProcessing: this.waitDropProcessing, onDroppableZoneEnter: this.handleDroppableZoneEnter, onExpandedItemChange: this.handleExpandedItemChange, onItemContextmenu: this.handleItemContextmenu, onItemsDropped: this.handleItemsDropped, onSelectedItemsChange: this.handleSelectedItemsChange, ref: el => (this.treeRef = el) }, this.treeModel.map((subModel, index) => this.renderSubModel(subModel, this.showLines && index === this.treeModel.length - 1, 0))));
+    return (h("ch-tree-view", { class: this.cssClass || null, multiSelection: this.multiSelection, waitDropProcessing: this.waitDropProcessing, onDroppableZoneEnter: this.handleDroppableZoneEnter, onExpandedItemChange: this.handleExpandedItemChange, onItemContextmenu: this.handleItemContextmenu, onItemsDropped: this.handleItemsDropped, onSelectedItemsChange: this.handleSelectedItemsChange, ref: el => (this.treeRef = el) }, this.treeModel.map((itemModel, index) => this.renderItem(itemModel, this, this.showLines && index === this.treeModel.length - 1, 0))));
   }
   static get watchers() { return {
+    "filter": ["handleFilterChange"],
+    "filterList": ["handleFilterListChange"],
+    "filterOptions": ["handleFilterOptionsChange"],
+    "filterType": ["handleFilterTypeChange"],
     "treeModel": ["handleTreeModelChange"]
   }; }
-  static get style() { return testTreeXCss; }
-}, [0, "ch-test-tree-x", {
+  static get style() { return treeViewRenderCss; }
+}, [0, "ch-tree-view-render", {
     "checkbox": [4],
     "checked": [4],
     "checkDroppableZoneCallback": [16],
@@ -462,9 +600,14 @@ const ChTestTreeX$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     "dropDisabled": [4, "drop-disabled"],
     "dropItemsCallback": [16],
     "editableItems": [4, "editable-items"],
+    "filter": [1],
+    "filterList": [16],
+    "filterOptions": [16],
+    "filterType": [1, "filter-type"],
     "lazyLoadTreeItemsCallback": [16],
     "modifyItemCaptionCallback": [16],
     "multiSelection": [4, "multi-selection"],
+    "renderItem": [16],
     "showLines": [1, "show-lines"],
     "sortItemsCallback": [16],
     "toggleCheckboxes": [4, "toggle-checkboxes"],
@@ -477,36 +620,33 @@ const ChTestTreeX$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     "updateItemsProperties": [64],
     "updateValidDropZone": [64]
   }, [[0, "checkboxChange", "updateCheckboxValue"], [0, "checkboxToggleChange", "updateCheckboxValue"], [0, "loadLazyContent", "loadLazyChildrenHandler"], [0, "modifyCaption", "handleCaptionModification"], [2, "openReference", "handleOpenReference"]]]);
-function defineCustomElement$1() {
+function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["ch-test-tree-x", "ch-checkbox", "ch-tree-x", "ch-tree-x-list-item"];
+  const components = ["ch-tree-view-render", "ch-checkbox", "ch-tree-view", "ch-tree-view-item"];
   components.forEach(tagName => { switch (tagName) {
-    case "ch-test-tree-x":
+    case "ch-tree-view-render":
       if (!customElements.get(tagName)) {
-        customElements.define(tagName, ChTestTreeX$1);
+        customElements.define(tagName, ChTreeViewRender);
       }
       break;
     case "ch-checkbox":
       if (!customElements.get(tagName)) {
-        defineCustomElement$4();
+        defineCustomElement$3();
       }
       break;
-    case "ch-tree-x":
+    case "ch-tree-view":
       if (!customElements.get(tagName)) {
-        defineCustomElement$3();
+        defineCustomElement$2();
       }
       break;
-    case "ch-tree-x-list-item":
+    case "ch-tree-view-item":
       if (!customElements.get(tagName)) {
-        defineCustomElement$2();
+        defineCustomElement$1();
       }
       break;
   } });
 }
 
-const ChTestTreeX = ChTestTreeX$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { ChTestTreeX, defineCustomElement };
+export { ChTreeViewRender as C, defineCustomElement as d };