@geogirafe/lib-geoportal 1.2.0-dev.2816732111 → 1.2.0-dev.2829479244

package/assets/i18n/de.json

@@ -52,6 +52,7 @@
     "color_option_intensity": "Intensität",
     "color_option_natural": "Natürlich",
     "color_option_uniform": "Einheitliche Farbe",
+    "Complete the theme": "Das Thema vervollständigen",
     "Connecting to the print server, please wait.": "Verbindung zum Druckserver wird hergestellt, bitte warten.",
     "contact-panel": "Kontaktformular",
     "Control opacity": "Deckkraft steuern",

package/assets/i18n/en.json

@@ -52,6 +52,7 @@
     "color_option_intensity": "Intensity",
     "color_option_natural": "Natural",
     "color_option_uniform": "Unique color",
+    "Complete the theme": "Complete the theme",
     "Connecting to the print server, please wait.": "Connecting to the print server, please wait.",
     "contact-panel": "Contact us",
     "contains": "contains",

package/assets/i18n/fr.json

@@ -52,6 +52,7 @@
     "color_option_intensity": "Intensité",
     "color_option_natural": "Naturelle",
     "color_option_uniform": "Couleur unique",
+    "Complete the theme": "Compléter le thème",
     "Connecting to the print server, please wait.": "Connexion au serveur d'impression, veuillez patienter.",
     "contact-panel": "Nous contacter",
     "Control opacity": "Contrôler l'opacité",

package/assets/i18n/it.json

@@ -52,6 +52,7 @@
     "color_option_intensity": "Intensità",
     "color_option_natural": "Naturale",
     "color_option_uniform": "Colore unico",
+    "Complete the theme": "Completare il tema",
     "Connecting to the print server, please wait.": "Connessione al server di stampa, attendere prego.",
     "contact-panel": "Contattaci",
     "Control opacity": "Controlla opacità",

package/assets/icons/theme-checked.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M553.2 88.012a23.9 23.9 0 0 0-11.8 2.488l-124.9 61.6L244 93.4c-13.7-4.7-28.7-3.8-41.9 2.3L77.8 154.3C69.4 158.2 64 166.7 64 176v352c0 8.2 4.2 15.9 11.1 20.3s15.6 4.9 23.1 1.4l87.314-41.085a26391 26391 0 0 0-36.004-35.976L112 490.3v-55.36c-8.583-8.635-17.184-17.181-25.738-25.904l-.67-.683-.639-.715C46.7 364.883 63.898 298.923 112 276.36v-85.06l96-45.201v145.748c6.27 5.447 11.381 10.818 15.57 15.345l32.43 32.43V148.301l128 43.5v34.976c17.223-17.184 34.406-34.387 51.719-51.527l.75-.742.787-.705c15.335-13.721 33.667-20.314 51.914-20.908 9.15-.299 18.257.98 26.97 3.56L528 150.6v10.34c23.753 11.01 42.627 32.744 47.318 61.912.273 1.384.48 2.758.682 4.13V112c0-8.3-4.3-16-11.3-20.4-3.5-2.2-7.476-3.4-11.5-3.588M576 250.746c-2.544 17.889-10.825 34.037-23.193 46.914l-.31.324-.321.319c-8.063 8.041-16.117 16.13-24.176 24.183v126.315L432 494v-75.496c-15.956 15.97-32.01 31.895-48 47.853V492.1l-19.346-6.454c-12.67 12.624-25.285 25.275-37.992 37.875L396.2 546.7c13.7 4.6 28.502 3.7 41.602-2.5l124.398-58.5C570.6 481.7 576 473.3 576 464z" style="display:inline;fill:gray"/><path d="M522.628 268.675c-77.356 77.15-154.308 154.724-231.92 231.606-18.749 16.296-48.36 10.581-62.826-8.485-37.197-37.402-74.815-74.403-111.745-112.059-20.803-23.25-5.73-64.519 25.111-69.02 21.933-5.55 38.705 10.957 52.233 25.562l70.124 70.125c67.235-67.086 134.06-134.602 201.552-201.417 23.25-20.803 64.519-5.73 69.021 25.111 2.986 13.83-2.138 28.778-11.55 38.577" style="color:#000;display:inline;fill:#000;stroke-width:83.6876;-inkscape-stroke:none;paint-order:stroke fill markers"/></svg>

package/components/print/component.d.ts

@@ -61,10 +61,10 @@ declare class PrintComponent extends GirafeHTMLElement implements IGirafePanel {
      */
     onScaleChanged(event: KeyboardEvent): void;
     /**
-     * On pressing enter take the value from the event target (input)
-     * and set the selected scale in the state and update the mask.
+     * Take the value from the input and set the selected scale
+     * in the state and update the mask.
      */
-    onCustomScaleTyped(evt: KeyboardEvent): void;
+    onCustomScaleTyped(evt: Event): void;
     /**
      * @Returns the current print scale.
      */

package/components/print/component.js

@@ -29,7 +29,7 @@ class PrintComponent extends GirafeHTMLElement {
 #panel{min-width:20rem;height:100%;overflow:auto}#content{background:var(--bkg-color);color:var(--text-color);margin:0;padding:1.5rem}#content .message{text-align:center;width:100%}#content .message *{margin:.25rem}.option{margin-top:.5rem;display:flex}.option label{width:40%}.option label:after{content:" :"}.option input,.option select,.option textarea{flex-grow:1}.option input.gg-checkbox{flex-grow:0}.rotation{flex-grow:1;gap:.5rem;display:flex}#rotationSlider{width:0}#rotationNumber{flex-grow:0;width:4rem}#content #export-pdf{float:right;margin-top:1rem}#content button{background-color:var(--bkg-color);color:var(--text-color);border:solid 1px var(--text-color);cursor:pointer;border-radius:3px;outline:0}#content button:hover{background-color:var(--bkg-color-grad2)}#content #print-list{margin-top:5rem}#print-list .print-item{border:solid 1px var(--text-color);color:var(--text-color);margin-top:.5rem;padding:.5rem;position:relative}#print-list .print-item .container{text-align:unset;border:none;width:100%;display:inline}#print-list .print-item .cancel{cursor:pointer;color:var(--text-color-grad1);background-color:#0000;border:none;position:absolute;top:.5rem;right:.5rem}.print-item .cancel i:before{content:"uf00d"}.print-item .cancel:hover{border-color:var(--text-color);color:var(--text-color)}.print-item i.status{float:left;text-align:center;width:3rem;margin-right:1rem}.print-item:has(.success):hover{background-color:var(--bkg-color-grad2);cursor:pointer}.print-item i.status:before{line-height:3rem;display:block}.print-item p{line-height:1.3rem}.print-item p.time{margin-right:.5rem;position:absolute;bottom:0;right:0}#custom-scale{color:var(--text-color);flex-flow:wrap;justify-content:flex-start;align-items:center;display:flex}#custom-scale .svg-info{margin-left:.5rem}#custom-scale>div{align-items:center;width:100%;display:flex}.gg-custom-scale{justify-content:flex-end}.warning{border-top:1px solid #333;border-bottom:1px solid #333;margin-top:1rem;margin-bottom:1rem;padding:.5rem}.warning h3{margin:0 0 1rem;font-size:1rem}.warning span{display:block}
 </style>
 <style>${this.customStyle}</style>
-<div id="panel"><div id="content"><div class="${this.getRenderState() === 'loading' ? '' : 'hidden'}"><div class="message"><div i18n="Connecting to the print server, please wait."></div><img alt="loading-icon" src="icons/loading.svg" class="gg-spin"></div></div><div class="${this.getRenderState() === 'error' ? '' : 'hidden'}"><div class="message" i18n="The print server is unavailable. Please, try later."></div></div><div class="${this.getRenderState() === 'setup' ? '' : 'hidden'}"><div class="option"><label for="layout" i18n="Layout" class="gg-label">Layout</label> <select id="layout" class="gg-select" onchange="${(evt) => this.onLayoutChanged(evt)}">${this.layouts.map((layout) => uHtml `<option i18n="${layout.name}" ?selected="${this.selectedLayout?.name === layout.name}" value="${layout.name}">${layout.name}</option>`)}</select></div><div class="option gg-custom-scale"><label for="scale" i18n="Scale" class="gg-label">Scale</label> <select id="scale" class="gg-select" onchange="${(evt) => this.onScaleChanged(evt)}">${this.scales.map((scale) => uHtml `<option ?selected="${this.getSelectedScale() === scale}" value="${scale}"><span>1&nbsp;:&nbsp;</span><span i18n="${scale}" i18nfn="formatNumber">${scale}</span></option>`)}<option i18n="Manual entry" class="${this.context.configManager.Config.print?.customScale === true ? '' : 'hidden'}" value="custom">Manual entry</select></div><div class="${this.showCustomScale === true ? 'option' : 'hidden'}"><div id="custom-scale"><label for="scale" i18n="Custom scale" class="gg-label">Custom scale</label><div><span>1&nbsp;:&nbsp;</span><input class="gg-input" type="number" min="10" onkeypress="${(evt) => this.onCustomScaleTyped(evt)}"> <span class="svg-info" tip="Press 'Enter' to apply"><img alt="Info" src="icons/info.svg"></span></div></div></div><div class="option"><label for="format" i18n="Format" class="gg-label">Format</label> <select id="format" class="gg-select" onchange="${(evt) => this.onFormatChanged(evt)}">${this.printFormats.map((format) => uHtml `<option ?selected="${this.getSelectedFormat() === format}" value="${format}">${format.toUpperCase()}</option>`)}</select></div>${uHtml `<div class="option"><label for="dpi" class="gg-label">DPI</label> <select id="dpi" class="gg-select" onchange="${(evt) => this.onDpiChanged(evt)}">${this.dpis.map((dpi) => uHtml `<option ?selected="${this.getSelectedDpi() === dpi}" value="${dpi}">${dpi}</option>`)}</select></div>`}<div class="option"><label for="rotationSlider" i18n="Rotation" class="gg-label">Rotation</label><div class="rotation"><input id="rotationSlider" class="gg-range" type="range" min="-180" max="180" step="1" value="${this.getRotation()}" oninput="${(evt) => this.onInputRotationChanged(evt)}"> <input id="rotationNumber" class="gg-input" type="number" min="-180" max="180" step="1" value="${this.getRotation()}" oninput="${(evt) => this.onInputRotationChanged(evt)}"></div></div>${this.attributeNames.map((attrName) => { if (this.getAttributeInputType(attrName) === 'number') {
+<div id="panel"><div id="content"><div class="${this.getRenderState() === 'loading' ? '' : 'hidden'}"><div class="message"><div i18n="Connecting to the print server, please wait."></div><img alt="loading-icon" src="icons/loading.svg" class="gg-spin"></div></div><div class="${this.getRenderState() === 'error' ? '' : 'hidden'}"><div class="message" i18n="The print server is unavailable. Please, try later."></div></div><div class="${this.getRenderState() === 'setup' ? '' : 'hidden'}"><div class="option"><label for="layout" i18n="Layout" class="gg-label">Layout</label> <select id="layout" class="gg-select" onchange="${(evt) => this.onLayoutChanged(evt)}">${this.layouts.map((layout) => uHtml `<option i18n="${layout.name}" ?selected="${this.selectedLayout?.name === layout.name}" value="${layout.name}">${layout.name}</option>`)}</select></div><div class="option gg-custom-scale"><label for="scale" i18n="Scale" class="gg-label">Scale</label> <select id="scale" class="gg-select" onchange="${(evt) => this.onScaleChanged(evt)}">${this.scales.map((scale) => uHtml `<option ?selected="${this.getSelectedScale() === scale}" value="${scale}"><span>1&nbsp;:&nbsp;</span><span i18n="${scale}" i18nfn="formatNumber">${scale}</span></option>`)}<option i18n="Manual entry" class="${this.context.configManager.Config.print?.customScale === true ? '' : 'hidden'}" value="custom">Manual entry</select></div><div class="${this.showCustomScale === true ? 'option' : 'hidden'}"><div id="custom-scale"><label for="scale" i18n="Custom scale" class="gg-label">Custom scale</label><div><span>1&nbsp;:&nbsp;</span><input class="gg-input" type="number" min="10" oninput="${(evt) => this.onCustomScaleTyped(evt)}"></div></div></div><div class="option"><label for="format" i18n="Format" class="gg-label">Format</label> <select id="format" class="gg-select" onchange="${(evt) => this.onFormatChanged(evt)}">${this.printFormats.map((format) => uHtml `<option ?selected="${this.getSelectedFormat() === format}" value="${format}">${format.toUpperCase()}</option>`)}</select></div>${uHtml `<div class="option"><label for="dpi" class="gg-label">DPI</label> <select id="dpi" class="gg-select" onchange="${(evt) => this.onDpiChanged(evt)}">${this.dpis.map((dpi) => uHtml `<option ?selected="${this.getSelectedDpi() === dpi}" value="${dpi}">${dpi}</option>`)}</select></div>`}<div class="option"><label for="rotationSlider" i18n="Rotation" class="gg-label">Rotation</label><div class="rotation"><input id="rotationSlider" class="gg-range" type="range" min="-180" max="180" step="1" value="${this.getRotation()}" oninput="${(evt) => this.onInputRotationChanged(evt)}"> <input id="rotationNumber" class="gg-input" type="number" min="-180" max="180" step="1" value="${this.getRotation()}" oninput="${(evt) => this.onInputRotationChanged(evt)}"></div></div>${this.attributeNames.map((attrName) => { if (this.getAttributeInputType(attrName) === 'number') {
             return uHtml `<div class="option"><label for="${attrName}" i18n="${this.attrNameForI18n(attrName)}" class="gg-label">${attrName}</label> <input id="${attrName}" type="number" class="gg-input" value="${this.getCapabilitiesAttribute(attrName)?.default}"></div>`;
         } if (this.getAttributeInputType(attrName) === 'checkbox') {
             return uHtml `<div class="option"><label for="${attrName}" i18n="${this.attrNameForI18n(attrName)}" class="gg-label">${attrName}</label> <input id="${attrName}" type="checkbox" class="gg-checkbox" ?checked="${this.getCapabilitiesAttribute(attrName)?.default}"></div>`;
@@ -129,12 +129,12 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
         this.printMaskManager?.zoomToScale(this.state.print.scale);
     }
     /**
-     * On pressing enter take the value from the event target (input)
-     * and set the selected scale in the state and update the mask.
+     * Take the value from the input and set the selected scale
+     * in the state and update the mask.
      */
     onCustomScaleTyped(evt) {
         const value = parseInt(evt.target?.value);
-        if (evt.key !== 'Enter' || !value) {
+        if (!value) {
             return;
         }
         this.state.print.scale = value;

package/components/search/component.d.ts

@@ -44,10 +44,12 @@ declare class SearchComponent extends GirafeHTMLElement {
      * @param e
      */
     doSearchDebounced(e: Event): Promise<void>;
+    addFullThemeIfNotPresent(feature: Feature): void;
     getGroupIcon(searchGroup: string): any;
     getProviderClass(provider: string): "hidden" | "provider entry";
     getGroupClass(group: string): "hidden" | "group entry";
     getLabel(result: Feature): unknown;
+    isFeatureActionThemeRelated(feature: Feature): boolean;
     onMouseOver(result: Feature): void;
     onMouseLeave(): void;
     private focusResultFromIndex;
@@ -56,6 +58,9 @@ declare class SearchComponent extends GirafeHTMLElement {
     private addFeatureToPreview;
     clearPreview(): void;
     onSelect(feature: Feature): void;
+    private closeDropdown;
+    private updateSearchboxWithResult;
+    private getFeatureFirstAction;
     private addResultToTreeView;
     private zoomTo;
     onMouseMove(): void;

package/components/search/component.js

@@ -28,10 +28,10 @@ class SearchComponent extends GirafeHTMLElement {
         return uHtml `<style>
 .hidden{display:none!important}.gg-rotate90{transform:rotate(90deg)}.gg-rotate180{transform:rotate(180deg)}.gg-rotate270{transform:rotate(270deg)}img{filter:var(--svg-filter)}img.legend-image{filter:var(--svg-map-filter);background:var(--svg-legend-bkg)}div{scrollbar-width:thin}a,a:visited{color:var(--link-color)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spin-wait{0%{transform:rotate(0)}7%{transform:rotate(360deg)}to{transform:rotate(360deg)}}.gg-spin{animation-name:spin;animation-duration:2s;animation-timing-function:linear;animation-iteration-count:infinite}.gg-spin-wait{animation-name:spin-wait;animation-duration:10s;animation-timing-function:linear;animation-iteration-count:infinite}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-thumb{background:#999}button,input,select,textarea{font:inherit}.gg-button,.gg-select,.gg-input,.gg-textarea{background-color:var(--bkg-color);color:var(--text-color);border:var(--app-standard-border);box-sizing:border-box;cursor:pointer;border-radius:3px;outline:0;margin:0;padding:0 0 0 .5rem;display:inline-block}.gg-label{background-color:var(--bkg-color);color:var(--text-color);border:none;align-items:center;margin:0;padding:0;display:flex}.gg-button,.gg-select,.gg-input,.gg-label{min-height:calc(var(--app-standard-height) / 1.5)}.gg-textarea{max-height:initial;resize:vertical;height:6rem;padding:.5rem;line-height:1.3rem}.gg-input{cursor:text}.gg-checkbox{accent-color:var(--text-color);width:1.2rem}.gg-range{accent-color:var(--text-color)}.gg-button{padding:0 .5rem}.gg-button.active{border:solid 1px var(--text-color-grad1);background-color:var(--bkg-color-grad2)}.gg-button:disabled{background-color:var(--bkg-color-grad1);color:var(--text-color-grad2);cursor:not-allowed;border:none}.gg-button:disabled img{filter:opacity(.6)}.gg-input:disabled,.gg-select:disabled,.gg-textarea:disabled{background-color:var(--bkg-color-grad1);color:var(--text-color-grad2);cursor:not-allowed}.gg-button>img{vertical-align:middle}.gg-icon-button{color:var(--text-color);cursor:pointer;background-color:#0000;border:none;flex-direction:column;justify-content:center;align-items:center;padding:0;display:flex}.gg-icon{justify-content:center;align-items:center;display:flex}.gg-big,.gg-big-withtext{min-width:var(--app-standard-height);min-height:var(--app-standard-height);max-height:var(--app-standard-height)}.gg-big img,.gg-big-withtext img{width:calc(var(--app-standard-height) - 1.5rem);margin:0}.gg-big-withtext span{font-variant:small-caps;padding:0 1rem;font-size:.9rem}.gg-medium,.gg-medium-withtext{min-width:calc(var(--app-standard-height) / 1.2);min-height:calc(var(--app-standard-height) / 1.2);max-height:calc(var(--app-standard-height) / 1.2);flex-direction:row}.gg-medium img{width:calc(var(--app-standard-height) / 2.4);margin:0}.gg-medium-withtext img{width:calc(var(--app-standard-height) / 2.4);margin-left:.5rem}.gg-medium-withtext span{padding:0 1rem 0 .5rem;font-size:.9rem}.gg-small,.gg-small-withtext{min-width:calc(var(--app-standard-height) / 2);min-height:calc(var(--app-standard-height) / 2);max-height:calc(var(--app-standard-height) / 2);flex-direction:row}.gg-small img{width:calc(var(--app-standard-height) / 3);margin:0}.gg-small-withtext img{width:calc(var(--app-standard-height) / 3);margin-left:.5rem}.gg-small-withtext span{padding:0 .5rem 0 .3rem;font-size:.9rem}.gg-button:hover:not(:disabled),.gg-select:hover:not(:disabled),.gg-input:hover:not(:disabled),.gg-textarea:hover:not(:disabled),.gg-icon-button:hover:not(:disabled){background-color:var(--bkg-color-grad1)}.gg-opacity{opacity:.5}.gg-opacity:hover{opacity:1;background-color:#0000}.gg-tabs{cursor:pointer;grid-auto-flow:column;padding-bottom:1rem;font-size:1rem;display:grid}.gg-tab{border:none;border-bottom:var(--app-standard-border);cursor:pointer;color:var(--text-color);background:0 0;padding:.5rem}.gg-tab.active{border-bottom:solid 1px var(--text-color)}.girafe-button-big,.girafe-button-large,.girafe-button-small,.girafe-button-tiny{color:var(--text-color);background-color:#0000;border:none;flex-direction:column;display:flex}.girafe-button-big:hover,.girafe-button-large:hover,.girafe-button-small:hover,.girafe-button-tiny:hover{background-color:var(--bkg-color-grad1);cursor:pointer}.girafe-button-big.dark,.girafe-button-large.dark,.girafe-button-small.dark,.girafe-button-tiny.dark{background-color:var(--bkg-color);filter:invert()}.girafe-button-big{width:var(--app-standard-height);height:var(--app-standard-height);align-items:center;padding:1rem}.girafe-button-big img{overflow:hidden}.girafe-button-large{flex-direction:row}.girafe-button-large img{height:2rem;margin:.3rem}.girafe-button-large span{height:2rem;margin:.3rem;line-height:2rem}.girafe-button-small{min-width:calc(var(--app-standard-height) / 2);height:calc(var(--app-standard-height) / 2);align-items:center;padding:.5rem}.girafe-button-small img{overflow:hidden}.girafe-button-small span{text-align:left;text-overflow:ellipsis;width:100%;overflow:hidden}.girafe-button-tiny{align-items:center;width:1rem;height:1rem;padding:0}.girafe-button-tiny img{overflow:hidden}.girafe-onboarding-theme{background-color:var(--bkg-color)!important;color:var(--text-color)!important}.girafe-onboarding-theme button{background-color:var(--bkg-color)!important;color:var(--text-color)!important;text-shadow:none!important}.girafe-onboarding-theme button.driver-popover-close-btn{z-index:10000}.tippy-box{background-color:var(--bkg-color)!important;border:var(--app-standard-border)!important}.tippy-content{color:var(--text-color)!important}.tippy-arrow{color:var(--bkg-color)!important}.tippy-box[data-theme~=error]{background-color:var(--error-color);white-space:pre-line}div.tippy-box[data-theme=image-popup]{border:var(--app-standard-border)!important;& div.tippy-content{background-color:var(--bkg-color)!important;& img{max-width:20rem;max-height:20rem}}& div.tippy-arrow{color:var(--bkg-color)!important}}
 </style><style>
-.hidden{display:none}#searchbox{background-color:var(--bkg-color);border:1px solid #cfd6dd;border-radius:4px;flex-direction:row;width:100%;height:2.25rem;display:flex;& slot[name=search-tooltip]{display:none}}#search{-webkit-appearance:none;width:auto;height:2.25rem;color:var(--text-color);background:0 0;border:0;outline:none;-webkit-flex:auto;-ms-flex:auto;flex:auto;margin:0 0 0 .5rem;padding-left:.8rem;font-size:1rem}.search-icon,.close-icon,.select-color-icon{width:14px;color:var(--text-color);padding:0 1rem}.close-button,.select-color-button{cursor:pointer;background-color:#0000;border:none;padding:0}#results{z-index:1000;background-color:var(--bkg-color);scrollbar-width:thin;width:36rem;max-height:31rem;margin-top:.1rem;margin-bottom:.5rem;position:absolute;top:3.5rem;overflow-x:hidden}.entry{width:34rem;color:var(--text-color);padding:.3rem 1rem;line-height:1.3rem;display:inline-block}.provider,.group{font-size:1.2rem;font-weight:600;line-height:3rem}.provider{background-color:color-mix(in srgb, var(--bkg-color-grad1) 75%, transparent);margin-top:1rem;font-size:1.5rem}#results>.provider:first-child{margin-top:0}.result{cursor:pointer;text-align:left;background:0 0;border:none;border-top:1px solid #ccc;width:100%}.entry img{width:.8em;margin-right:1rem}.entry span{text-transform:uppercase}.result.selected{color:var(--text-color);background-color:var(--bkg-color-grad2)!important}#no-result{background:var(--warning-color);opacity:.75;visibility:hidden;pointer-events:none;border-radius:6px;width:fit-content;margin:auto;padding:.5rem 0;font-size:1rem;position:absolute;top:3.5rem;left:0;right:0}#no-result>span{padding:1.3rem}@keyframes fadeOut{0%{opacity:1}80%{opacity:1}to{opacity:0}}.shown-then-fadeout{animation:2s ease-in-out forwards fadeOut;visibility:visible!important}
+.hidden{display:none}#searchbox{background-color:var(--bkg-color);border:1px solid #cfd6dd;border-radius:4px;flex-direction:row;width:100%;height:2.25rem;display:flex;& slot[name=search-tooltip]{display:none}}#search{-webkit-appearance:none;width:auto;height:2.25rem;color:var(--text-color);background:0 0;border:0;outline:none;-webkit-flex:auto;-ms-flex:auto;flex:auto;margin:0 0 0 .5rem;padding-left:.8rem;font-size:1rem}.search-icon,.close-icon,.theme-icon,.select-color-icon{width:14px;color:var(--text-color);padding:0 1rem}.close-button,.select-color-button{cursor:pointer;background-color:#0000;border:none;padding:0}#results{z-index:1000;background-color:var(--bkg-color);scrollbar-width:thin;width:36rem;max-height:31rem;margin-top:.1rem;margin-bottom:.5rem;position:absolute;top:3.5rem;overflow-x:hidden}.entry{width:34rem;color:var(--text-color);padding:.3rem 1rem;line-height:1.3rem;display:inline-block}.entry img{width:.8em;margin-right:1rem}.entry span{text-transform:uppercase}.provider,.group{font-size:1.2rem;font-weight:600;line-height:3rem}.provider{background-color:color-mix(in srgb, var(--bkg-color-grad1) 75%, transparent);margin-top:1rem;font-size:1.5rem}#results>.provider:first-child{margin-top:0}.result{background:0 0;border-top:1px solid #ccc;align-items:stretch;width:100%;padding:0;display:flex}.result button{cursor:pointer;text-align:left;width:100%;color:var(--text-color);background:0 0;border:none;padding:.3rem 1rem}.result button:hover{color:var(--text-color);background-color:var(--bkg-color-grad2)!important}.result .tools{width:1.3rem;margin:0}.result .tools button{height:-webkit-fill-available;margin:0;padding:0 .3rem}.result .tools button img{margin:0;padding:0}#no-result{background:var(--warning-color);opacity:.75;visibility:hidden;pointer-events:none;border-radius:6px;width:fit-content;margin:auto;padding:.5rem 0;font-size:1rem;position:absolute;top:3.5rem;left:0;right:0}#no-result>span{padding:1.3rem}@keyframes fadeOut{0%{opacity:1}80%{opacity:1}to{opacity:0}}.shown-then-fadeout{animation:2s ease-in-out forwards fadeOut;visibility:visible!important}
 </style>
 <style>${this.customStyle}</style>
-<link rel="stylesheet" href="lib/vanilla-picker/vanilla-picker.csp.css"><link rel="stylesheet" href="styles/girafecolorpicker.css"><div id="searchbox"><slot name="search-tooltip"></slot><input id="search" class="gg-input" length="20" maxlength="1000" autocomplete="off" autocorrect="off" i18n="Search..." placeholder="Search..." aria-label="Search" oninput="${(e) => this.doSearchDebounced(e)}" onfocusin="${() => this.onFocusIn()}" onfocusout="${() => this.onFocusOut()}" onkeydown="${(e) => this.onKeyDown(e)}"> <img class="${this.allResults.length > 0 ? 'hidden' : 'search-icon'}" alt="search-icon" src="${this.searchIcon}"> <button class="${this.allResults.length > 0 ? 'close-button' : 'hidden'}" onclick="${() => this.clearSearch(true)}"><img class="close-icon" alt="close-icon" src="icons/close.svg"></button> <button tip="change_search_result_color" id="colorPickerBtn" class="${this.paintSearchResults ? 'select-color-button' : 'hidden'}"><img class="select-color-icon" alt="select-color-icon" src="${this.paintbrushIcon}"></button><div id="results" class="${!this.allResults.length || this.forceHide ? 'hidden' : ''}" onmousemove="${() => this.onMouseMove()}">${(Object.keys(this.groupedResults) ?? []).map(provider => uHtml `<div class="${this.getProviderClass(provider)}"><img alt="provider icon" src="${this.searchIcon}"> <span i18n="${provider}">${provider}</span></div>${(Object.keys(this.groupedResults[provider]) ?? []).map(group => uHtml `<div class="${this.getGroupClass(group)}"><img alt="result icon" src="${this.getGroupIcon(group)}"> <span i18n="${group}">${group}</span></div>${(this.groupedResults[provider][group] ?? []).map(result => uHtml ` <button class="${result.get('selected') ? 'result entry selected' : 'result entry'}" onmousedown="${() => this.onMouseDown()}" onclick="${() => this.onSelect(result)}" onmouseover="${() => this.onMouseOver(result)}" onmouseleave="${() => this.onMouseLeave()}">${this.getLabel(result)}</button> `)} `)} `)}</div><div id="no-result" class="${this.showNoResultWarning ? 'shown-then-fadeout' : ''}"><span i18n="${'No match found'}"></span></div></div>
+<link rel="stylesheet" href="lib/vanilla-picker/vanilla-picker.csp.css"><link rel="stylesheet" href="styles/girafecolorpicker.css"><div id="searchbox"><slot name="search-tooltip"></slot><input id="search" class="gg-input" length="20" maxlength="1000" autocomplete="off" autocorrect="off" i18n="Search..." placeholder="Search..." aria-label="Search" oninput="${(e) => this.doSearchDebounced(e)}" onfocusin="${() => this.onFocusIn()}" onfocusout="${() => this.onFocusOut()}" onkeydown="${(e) => this.onKeyDown(e)}"> <img class="${this.allResults.length > 0 ? 'hidden' : 'search-icon'}" alt="search-icon" src="${this.searchIcon}"> <button class="${this.allResults.length > 0 ? 'close-button' : 'hidden'}" onclick="${() => this.clearSearch(true)}"><img class="close-icon" alt="close-icon" src="icons/close.svg"></button> <button tip="change_search_result_color" id="colorPickerBtn" class="${this.paintSearchResults ? 'select-color-button' : 'hidden'}"><img class="select-color-icon" alt="select-color-icon" src="${this.paintbrushIcon}"></button><div id="results" class="${!this.allResults.length || this.forceHide ? 'hidden' : ''}" onmousemove="${() => this.onMouseMove()}">${(Object.keys(this.groupedResults) ?? []).map(provider => uHtml `<div class="${this.getProviderClass(provider)}"><img alt="provider icon" src="${this.searchIcon}"> <span i18n="${provider}">${provider}</span></div>${(Object.keys(this.groupedResults[provider]) ?? []).map(group => uHtml `<div class="${this.getGroupClass(group)}"><img alt="result icon" src="${this.getGroupIcon(group)}"> <span i18n="${group}">${group}</span></div>${(this.groupedResults[provider][group] ?? []).map(result => uHtml `<div class="${result.get('selected') ? 'result entry selected' : 'result entry'}"><button onmouseover="${() => this.onMouseOver(result)}" onmouseleave="${() => this.onMouseLeave()}" onmousedown="${() => this.onMouseDown()}" onclick="${() => this.onSelect(result)}">${this.getLabel(result)}</button><div class="${this.isFeatureActionThemeRelated(result) ? 'tools' : 'hidden'}"><button class="addFullTree" onclick="${() => this.addFullThemeIfNotPresent(result)}"><img class="theme-icon" alt="theme-icon" src="icons/theme-checked.svg" tip="Complete the theme"></button></div></div>`)} `)} `)}</div><div id="no-result" class="${this.showNoResultWarning ? 'shown-then-fadeout' : ''}"><span i18n="${'No match found'}"></span></div></div>
 ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
     };
     searchIcon = SearchIcon;
@@ -205,6 +205,33 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
             this.doSearch(syntheticEvent);
         }, 300);
     }
+    addFullThemeIfNotPresent(feature) {
+        this.clearPreview();
+        const action = this.getFeatureFirstAction(feature);
+        if (!action) {
+            return;
+        }
+        const layer = this.context.themesHelper.findLayerByName(action.data);
+        if (!layer) {
+            return;
+        }
+        const theme = this.context.themesHelper.getOriginalTheme(layer);
+        if (!theme) {
+            return;
+        }
+        const added = this.context.themesHelper.addThemeIfNotPresent(theme);
+        if (!added) {
+            // If it's not added because it's already in the tree, complete the theme.
+            this.context.themesHelper.completeTheme(theme);
+        }
+        const insertedLayer = this.context.themesHelper.findBaseLayerRecursiveById(this.state.layers.layersList, layer.id);
+        if (insertedLayer) {
+            insertedLayer.activeState = 'on';
+        }
+        this.closeDropdown(feature);
+        this.onFocusOut();
+        this.updateSearchboxWithResult(feature);
+    }
     getGroupIcon(searchGroup) {
         switch (searchGroup) {
             case 'Group':
@@ -230,6 +257,16 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
     getLabel(result) {
         return result.get('label_html') ? this.htmlUnsafe(result.get('label_html')) : result.get('label');
     }
+    isFeatureActionThemeRelated(feature) {
+        const action = this.getFeatureFirstAction(feature);
+        const kind = action?.action;
+        const hasThemeRelatedAction = kind?.startsWith('add_layer') || kind?.startsWith('add_group') || kind?.startsWith('add_theme') || false;
+        if (!hasThemeRelatedAction || !action) {
+            return false;
+        }
+        const layer = this.context.themesHelper.findLayerByName(action.data);
+        return !!layer;
+    }
     onMouseOver(result) {
         this.focusResult(result);
     }
@@ -249,7 +286,7 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
         if (this.focusedResult) {
             this.focusedResult.set('selected', false);
         }
-        // Set new selected object, and activate preview
+        // Set the newly selected object and activate a preview.
         this.focusedResultIndex = this.allResults.indexOf(result);
         this.focusedResult = this.allResults[this.focusedResultIndex];
         this.focusedResult.set('selected', true);
@@ -265,7 +302,7 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
             this.addFeatureToPreview(result);
             this.updatePreviewLayerStyle();
         }
-        const firstAction = result.get('actions')?.[0];
+        const firstAction = this.getFeatureFirstAction(result);
         if (firstAction?.action.startsWith('add_layer') && this.context.configManager.Config.search?.layerPreview) {
             const layer = this.context.themesHelper.findLayerByName(firstAction.data);
             if (layer) {
@@ -294,11 +331,7 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
         }
     }
     onSelect(feature) {
-        this.selectedResult = feature;
-        this.ignoreBlur = false;
-        this.forceHide = true;
-        this.previewLayers = undefined;
-        super.render();
+        this.closeDropdown(feature);
         // If the result has a specific zoom-to extent defined or contains a geometry, zoom to it
         const zoomBbox = this.context.searchManager.getZoomToBbox(feature);
         if (zoomBbox) {
@@ -308,33 +341,46 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
             this.addResultToTreeView(feature);
         }
         this.onFocusOut();
-        // Update searchbox with result
+        this.updateSearchboxWithResult(feature);
+    }
+    closeDropdown(feature) {
+        this.selectedResult = feature;
+        this.ignoreBlur = false;
+        this.forceHide = true;
+        this.previewLayers = undefined;
+        super.render();
+    }
+    updateSearchboxWithResult(feature) {
         if (this.searchInput && feature.get('label')) {
             this.searchInput.value = feature.get('label');
         }
     }
-    addResultToTreeView(feature) {
-        let clonedTheme;
+    getFeatureFirstAction(feature) {
         const actions = feature.get('actions');
-        if (!actions || actions.length === 0) {
+        return actions?.length ? actions[0] : undefined;
+    }
+    addResultToTreeView(feature) {
+        const action = this.getFeatureFirstAction(feature);
+        if (!action) {
             // Nothing to add
             return;
         }
+        let clonedTheme;
         let activate = false;
-        if (actions[0].action.startsWith('add_theme')) {
-            const theme = this.context.themesHelper.findThemeByName(actions[0].data);
+        if (action.action.startsWith('add_theme')) {
+            const theme = this.context.themesHelper.findThemeByName(action.data);
             if (theme) {
                 clonedTheme = theme.clone();
             }
         }
-        else if (actions[0].action.startsWith('add_group')) {
-            const group = this.context.themesHelper.findGroupByName(actions[0].data);
+        else if (action.action.startsWith('add_group')) {
+            const group = this.context.themesHelper.findGroupByName(action.data);
             if (group) {
                 clonedTheme = this.context.themesHelper.getMinimalClonedThemeForLayer(group);
             }
         }
-        else if (actions[0].action.startsWith('add_layer')) {
-            const layer = this.context.themesHelper.findLayerByName(actions[0].data);
+        else if (action.action.startsWith('add_layer')) {
+            const layer = this.context.themesHelper.findLayerByName(action.data);
             if (layer) {
                 clonedTheme = this.context.themesHelper.getMinimalClonedThemeForLayer(layer);
                 activate = true;
@@ -516,6 +562,9 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
         return `data:image/svg+xml;utf8,${encodeURIComponent(pin)}`;
     }
 }
+__decorate([
+    UsedInTemplateOnly()
+], SearchComponent.prototype, "addFullThemeIfNotPresent", null);
 __decorate([
     UsedInTemplateOnly()
 ], SearchComponent.prototype, "getGroupIcon", null);
@@ -528,4 +577,7 @@ __decorate([
 __decorate([
     UsedInTemplateOnly()
 ], SearchComponent.prototype, "getLabel", null);
+__decorate([
+    UsedInTemplateOnly()
+], SearchComponent.prototype, "isFeatureActionThemeRelated", null);
 export default SearchComponent;

package/components/search/style.css

@@ -35,6 +35,7 @@
 
 .search-icon,
 .close-icon,
+.theme-icon,
 .select-color-icon {
   width: 14px;
   color: var(--text-color);
@@ -70,6 +71,15 @@
   color: var(--text-color);
 }
 
+.entry img {
+  margin-right: 1rem;
+  width: 0.8em;
+}
+
+.entry span {
+  text-transform: uppercase;
+}
+
 .provider,
 .group {
   font-weight: 600;
@@ -88,26 +98,43 @@
 }
 
 .result {
+  border-top: solid 1px #ccc;
+  background: transparent;
+  width: 100%;
+  display: flex;
+  align-items: stretch;
+  padding: 0;
+}
+
+.result button {
+  padding: 0.3rem 1rem;
   cursor: pointer;
   border: none;
-  border-top: solid 1px #ccc;
   background: transparent;
   text-align: left;
   width: 100%;
+  color: var(--text-color);
 }
 
-.entry img {
-  margin-right: 1rem;
-  width: 0.8em;
+.result button:hover {
+  background-color: var(--bkg-color-grad2) !important;
+  color: var(--text-color);
 }
 
-.entry span {
-  text-transform: uppercase;
+.result .tools {
+  width: 1.3rem;
+  margin: 0;
 }
 
-.result.selected {
-  background-color: var(--bkg-color-grad2) !important;
-  color: var(--text-color);
+.result .tools button {
+  margin: 0;
+  padding: 0 0.3rem;
+  height: -webkit-fill-available;
+}
+
+.result .tools button img {
+  margin: 0;
+  padding: 0;
 }
 
 #no-result {

package/components/treeview/style.css

@@ -10,6 +10,10 @@ header {
   display: none !important;
 }
 
+.tool.visible {
+  display: flex !important;
+}
+
 header:hover .tool {
   display: flex !important;
 }

package/components/treeview/treeviewgroup/component.js

@@ -8,7 +8,7 @@ class TreeViewGroupComponent extends TreeViewGroupElement {
     styleUrls = null;
     template = () => {
         return uHtml `<style>
-header{border-top:1px solid #ddd;align-items:center;height:2rem;display:flex}.tool{display:none!important}header:hover .tool{display:flex!important}.tool.active{order:100;opacity:1!important;display:flex!important}.label-container{flex-grow:1;align-items:center;display:flex;overflow:auto}.label-out-resolution span{font-style:italic}.resolution-tool{margin-left:.5rem}.legend{display:flex}.legend img{background:var(--svg-legend-bkg);height:fit-content;filter:var(--svg-map-filter)}.legend-icon{background:var(--svg-legend-bkg);max-height:1.5rem;filter:var(--svg-map-filter);margin-left:.5rem}.children{flex-basis:100%;order:10;padding-left:1.3rem}.dragAfter{border-bottom:1rem dashed #ccc}.dragBefore{border-top:1rem dashed #ccc}.gg-checkbox{width:1.2rem}.gg-caret,.gg-spacer{text-align:center;width:1.5rem;padding:0}.gg-caret{transform:scale(1.3)}.gg-caret.gg-rotate90{transform:scale(1.3)rotate(90deg)}.gg-small.gg-lock{min-width:1rem}.gg-opacity.gg-lock:hover{opacity:.5!important}.gg-tree-label{text-align:left;white-space:nowrap;text-overflow:ellipsis;padding-left:0;overflow:hidden}.gg-grab:hover{cursor:grab}.gg-selected{opacity:1}.legend-file{color:var(--text-color);font-style:italic;display:flex}@keyframes headerFade{0%{background-color:var(--highlight-color)}to{background-color:#0000}}.highlight{animation:3s ease-in-out forwards headerFade}
+header{border-top:1px solid #ddd;align-items:center;height:2rem;display:flex}.tool{display:none!important}.tool.visible,header:hover .tool{display:flex!important}.tool.active{order:100;opacity:1!important;display:flex!important}.label-container{flex-grow:1;align-items:center;display:flex;overflow:auto}.label-out-resolution span{font-style:italic}.resolution-tool{margin-left:.5rem}.legend{display:flex}.legend img{background:var(--svg-legend-bkg);height:fit-content;filter:var(--svg-map-filter)}.legend-icon{background:var(--svg-legend-bkg);max-height:1.5rem;filter:var(--svg-map-filter);margin-left:.5rem}.children{flex-basis:100%;order:10;padding-left:1.3rem}.dragAfter{border-bottom:1rem dashed #ccc}.dragBefore{border-top:1rem dashed #ccc}.gg-checkbox{width:1.2rem}.gg-caret,.gg-spacer{text-align:center;width:1.5rem;padding:0}.gg-caret{transform:scale(1.3)}.gg-caret.gg-rotate90{transform:scale(1.3)rotate(90deg)}.gg-small.gg-lock{min-width:1rem}.gg-opacity.gg-lock:hover{opacity:.5!important}.gg-tree-label{text-align:left;white-space:nowrap;text-overflow:ellipsis;padding-left:0;overflow:hidden}.gg-grab:hover{cursor:grab}.gg-selected{opacity:1}.legend-file{color:var(--text-color);font-style:italic;display:flex}@keyframes headerFade{0%{background-color:var(--highlight-color)}to{background-color:#0000}}.highlight{animation:3s ease-in-out forwards headerFade}
 </style><style>
 .hidden{display:none!important}.gg-rotate90{transform:rotate(90deg)}.gg-rotate180{transform:rotate(180deg)}.gg-rotate270{transform:rotate(270deg)}img{filter:var(--svg-filter)}img.legend-image{filter:var(--svg-map-filter);background:var(--svg-legend-bkg)}div{scrollbar-width:thin}a,a:visited{color:var(--link-color)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spin-wait{0%{transform:rotate(0)}7%{transform:rotate(360deg)}to{transform:rotate(360deg)}}.gg-spin{animation-name:spin;animation-duration:2s;animation-timing-function:linear;animation-iteration-count:infinite}.gg-spin-wait{animation-name:spin-wait;animation-duration:10s;animation-timing-function:linear;animation-iteration-count:infinite}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-thumb{background:#999}button,input,select,textarea{font:inherit}.gg-button,.gg-select,.gg-input,.gg-textarea{background-color:var(--bkg-color);color:var(--text-color);border:var(--app-standard-border);box-sizing:border-box;cursor:pointer;border-radius:3px;outline:0;margin:0;padding:0 0 0 .5rem;display:inline-block}.gg-label{background-color:var(--bkg-color);color:var(--text-color);border:none;align-items:center;margin:0;padding:0;display:flex}.gg-button,.gg-select,.gg-input,.gg-label{min-height:calc(var(--app-standard-height) / 1.5)}.gg-textarea{max-height:initial;resize:vertical;height:6rem;padding:.5rem;line-height:1.3rem}.gg-input{cursor:text}.gg-checkbox{accent-color:var(--text-color);width:1.2rem}.gg-range{accent-color:var(--text-color)}.gg-button{padding:0 .5rem}.gg-button.active{border:solid 1px var(--text-color-grad1);background-color:var(--bkg-color-grad2)}.gg-button:disabled{background-color:var(--bkg-color-grad1);color:var(--text-color-grad2);cursor:not-allowed;border:none}.gg-button:disabled img{filter:opacity(.6)}.gg-input:disabled,.gg-select:disabled,.gg-textarea:disabled{background-color:var(--bkg-color-grad1);color:var(--text-color-grad2);cursor:not-allowed}.gg-button>img{vertical-align:middle}.gg-icon-button{color:var(--text-color);cursor:pointer;background-color:#0000;border:none;flex-direction:column;justify-content:center;align-items:center;padding:0;display:flex}.gg-icon{justify-content:center;align-items:center;display:flex}.gg-big,.gg-big-withtext{min-width:var(--app-standard-height);min-height:var(--app-standard-height);max-height:var(--app-standard-height)}.gg-big img,.gg-big-withtext img{width:calc(var(--app-standard-height) - 1.5rem);margin:0}.gg-big-withtext span{font-variant:small-caps;padding:0 1rem;font-size:.9rem}.gg-medium,.gg-medium-withtext{min-width:calc(var(--app-standard-height) / 1.2);min-height:calc(var(--app-standard-height) / 1.2);max-height:calc(var(--app-standard-height) / 1.2);flex-direction:row}.gg-medium img{width:calc(var(--app-standard-height) / 2.4);margin:0}.gg-medium-withtext img{width:calc(var(--app-standard-height) / 2.4);margin-left:.5rem}.gg-medium-withtext span{padding:0 1rem 0 .5rem;font-size:.9rem}.gg-small,.gg-small-withtext{min-width:calc(var(--app-standard-height) / 2);min-height:calc(var(--app-standard-height) / 2);max-height:calc(var(--app-standard-height) / 2);flex-direction:row}.gg-small img{width:calc(var(--app-standard-height) / 3);margin:0}.gg-small-withtext img{width:calc(var(--app-standard-height) / 3);margin-left:.5rem}.gg-small-withtext span{padding:0 .5rem 0 .3rem;font-size:.9rem}.gg-button:hover:not(:disabled),.gg-select:hover:not(:disabled),.gg-input:hover:not(:disabled),.gg-textarea:hover:not(:disabled),.gg-icon-button:hover:not(:disabled){background-color:var(--bkg-color-grad1)}.gg-opacity{opacity:.5}.gg-opacity:hover{opacity:1;background-color:#0000}.gg-tabs{cursor:pointer;grid-auto-flow:column;padding-bottom:1rem;font-size:1rem;display:grid}.gg-tab{border:none;border-bottom:var(--app-standard-border);cursor:pointer;color:var(--text-color);background:0 0;padding:.5rem}.gg-tab.active{border-bottom:solid 1px var(--text-color)}.girafe-button-big,.girafe-button-large,.girafe-button-small,.girafe-button-tiny{color:var(--text-color);background-color:#0000;border:none;flex-direction:column;display:flex}.girafe-button-big:hover,.girafe-button-large:hover,.girafe-button-small:hover,.girafe-button-tiny:hover{background-color:var(--bkg-color-grad1);cursor:pointer}.girafe-button-big.dark,.girafe-button-large.dark,.girafe-button-small.dark,.girafe-button-tiny.dark{background-color:var(--bkg-color);filter:invert()}.girafe-button-big{width:var(--app-standard-height);height:var(--app-standard-height);align-items:center;padding:1rem}.girafe-button-big img{overflow:hidden}.girafe-button-large{flex-direction:row}.girafe-button-large img{height:2rem;margin:.3rem}.girafe-button-large span{height:2rem;margin:.3rem;line-height:2rem}.girafe-button-small{min-width:calc(var(--app-standard-height) / 2);height:calc(var(--app-standard-height) / 2);align-items:center;padding:.5rem}.girafe-button-small img{overflow:hidden}.girafe-button-small span{text-align:left;text-overflow:ellipsis;width:100%;overflow:hidden}.girafe-button-tiny{align-items:center;width:1rem;height:1rem;padding:0}.girafe-button-tiny img{overflow:hidden}.girafe-onboarding-theme{background-color:var(--bkg-color)!important;color:var(--text-color)!important}.girafe-onboarding-theme button{background-color:var(--bkg-color)!important;color:var(--text-color)!important;text-shadow:none!important}.girafe-onboarding-theme button.driver-popover-close-btn{z-index:10000}.tippy-box{background-color:var(--bkg-color)!important;border:var(--app-standard-border)!important}.tippy-content{color:var(--text-color)!important}.tippy-arrow{color:var(--bkg-color)!important}.tippy-box[data-theme~=error]{background-color:var(--error-color);white-space:pre-line}div.tippy-box[data-theme=image-popup]{border:var(--app-standard-border)!important;& div.tippy-content{background-color:var(--bkg-color)!important;& img{max-width:20rem;max-height:20rem}}& div.tippy-arrow{color:var(--bkg-color)!important}}
 </style>

package/components/treeview/treeviewitem/component.js

@@ -14,7 +14,7 @@ class TreeViewItemComponent extends TreeViewElement {
     styleUrls = null;
     template = () => {
         return uHtml `<style>
-header{border-top:1px solid #ddd;align-items:center;height:2rem;display:flex}.tool{display:none!important}header:hover .tool{display:flex!important}.tool.active{order:100;opacity:1!important;display:flex!important}.label-container{flex-grow:1;align-items:center;display:flex;overflow:auto}.label-out-resolution span{font-style:italic}.resolution-tool{margin-left:.5rem}.legend{display:flex}.legend img{background:var(--svg-legend-bkg);height:fit-content;filter:var(--svg-map-filter)}.legend-icon{background:var(--svg-legend-bkg);max-height:1.5rem;filter:var(--svg-map-filter);margin-left:.5rem}.children{flex-basis:100%;order:10;padding-left:1.3rem}.dragAfter{border-bottom:1rem dashed #ccc}.dragBefore{border-top:1rem dashed #ccc}.gg-checkbox{width:1.2rem}.gg-caret,.gg-spacer{text-align:center;width:1.5rem;padding:0}.gg-caret{transform:scale(1.3)}.gg-caret.gg-rotate90{transform:scale(1.3)rotate(90deg)}.gg-small.gg-lock{min-width:1rem}.gg-opacity.gg-lock:hover{opacity:.5!important}.gg-tree-label{text-align:left;white-space:nowrap;text-overflow:ellipsis;padding-left:0;overflow:hidden}.gg-grab:hover{cursor:grab}.gg-selected{opacity:1}.legend-file{color:var(--text-color);font-style:italic;display:flex}@keyframes headerFade{0%{background-color:var(--highlight-color)}to{background-color:#0000}}.highlight{animation:3s ease-in-out forwards headerFade}
+header{border-top:1px solid #ddd;align-items:center;height:2rem;display:flex}.tool{display:none!important}.tool.visible,header:hover .tool{display:flex!important}.tool.active{order:100;opacity:1!important;display:flex!important}.label-container{flex-grow:1;align-items:center;display:flex;overflow:auto}.label-out-resolution span{font-style:italic}.resolution-tool{margin-left:.5rem}.legend{display:flex}.legend img{background:var(--svg-legend-bkg);height:fit-content;filter:var(--svg-map-filter)}.legend-icon{background:var(--svg-legend-bkg);max-height:1.5rem;filter:var(--svg-map-filter);margin-left:.5rem}.children{flex-basis:100%;order:10;padding-left:1.3rem}.dragAfter{border-bottom:1rem dashed #ccc}.dragBefore{border-top:1rem dashed #ccc}.gg-checkbox{width:1.2rem}.gg-caret,.gg-spacer{text-align:center;width:1.5rem;padding:0}.gg-caret{transform:scale(1.3)}.gg-caret.gg-rotate90{transform:scale(1.3)rotate(90deg)}.gg-small.gg-lock{min-width:1rem}.gg-opacity.gg-lock:hover{opacity:.5!important}.gg-tree-label{text-align:left;white-space:nowrap;text-overflow:ellipsis;padding-left:0;overflow:hidden}.gg-grab:hover{cursor:grab}.gg-selected{opacity:1}.legend-file{color:var(--text-color);font-style:italic;display:flex}@keyframes headerFade{0%{background-color:var(--highlight-color)}to{background-color:#0000}}.highlight{animation:3s ease-in-out forwards headerFade}
 </style><style>
 .hidden{display:none!important}.gg-rotate90{transform:rotate(90deg)}.gg-rotate180{transform:rotate(180deg)}.gg-rotate270{transform:rotate(270deg)}img{filter:var(--svg-filter)}img.legend-image{filter:var(--svg-map-filter);background:var(--svg-legend-bkg)}div{scrollbar-width:thin}a,a:visited{color:var(--link-color)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spin-wait{0%{transform:rotate(0)}7%{transform:rotate(360deg)}to{transform:rotate(360deg)}}.gg-spin{animation-name:spin;animation-duration:2s;animation-timing-function:linear;animation-iteration-count:infinite}.gg-spin-wait{animation-name:spin-wait;animation-duration:10s;animation-timing-function:linear;animation-iteration-count:infinite}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-thumb{background:#999}button,input,select,textarea{font:inherit}.gg-button,.gg-select,.gg-input,.gg-textarea{background-color:var(--bkg-color);color:var(--text-color);border:var(--app-standard-border);box-sizing:border-box;cursor:pointer;border-radius:3px;outline:0;margin:0;padding:0 0 0 .5rem;display:inline-block}.gg-label{background-color:var(--bkg-color);color:var(--text-color);border:none;align-items:center;margin:0;padding:0;display:flex}.gg-button,.gg-select,.gg-input,.gg-label{min-height:calc(var(--app-standard-height) / 1.5)}.gg-textarea{max-height:initial;resize:vertical;height:6rem;padding:.5rem;line-height:1.3rem}.gg-input{cursor:text}.gg-checkbox{accent-color:var(--text-color);width:1.2rem}.gg-range{accent-color:var(--text-color)}.gg-button{padding:0 .5rem}.gg-button.active{border:solid 1px var(--text-color-grad1);background-color:var(--bkg-color-grad2)}.gg-button:disabled{background-color:var(--bkg-color-grad1);color:var(--text-color-grad2);cursor:not-allowed;border:none}.gg-button:disabled img{filter:opacity(.6)}.gg-input:disabled,.gg-select:disabled,.gg-textarea:disabled{background-color:var(--bkg-color-grad1);color:var(--text-color-grad2);cursor:not-allowed}.gg-button>img{vertical-align:middle}.gg-icon-button{color:var(--text-color);cursor:pointer;background-color:#0000;border:none;flex-direction:column;justify-content:center;align-items:center;padding:0;display:flex}.gg-icon{justify-content:center;align-items:center;display:flex}.gg-big,.gg-big-withtext{min-width:var(--app-standard-height);min-height:var(--app-standard-height);max-height:var(--app-standard-height)}.gg-big img,.gg-big-withtext img{width:calc(var(--app-standard-height) - 1.5rem);margin:0}.gg-big-withtext span{font-variant:small-caps;padding:0 1rem;font-size:.9rem}.gg-medium,.gg-medium-withtext{min-width:calc(var(--app-standard-height) / 1.2);min-height:calc(var(--app-standard-height) / 1.2);max-height:calc(var(--app-standard-height) / 1.2);flex-direction:row}.gg-medium img{width:calc(var(--app-standard-height) / 2.4);margin:0}.gg-medium-withtext img{width:calc(var(--app-standard-height) / 2.4);margin-left:.5rem}.gg-medium-withtext span{padding:0 1rem 0 .5rem;font-size:.9rem}.gg-small,.gg-small-withtext{min-width:calc(var(--app-standard-height) / 2);min-height:calc(var(--app-standard-height) / 2);max-height:calc(var(--app-standard-height) / 2);flex-direction:row}.gg-small img{width:calc(var(--app-standard-height) / 3);margin:0}.gg-small-withtext img{width:calc(var(--app-standard-height) / 3);margin-left:.5rem}.gg-small-withtext span{padding:0 .5rem 0 .3rem;font-size:.9rem}.gg-button:hover:not(:disabled),.gg-select:hover:not(:disabled),.gg-input:hover:not(:disabled),.gg-textarea:hover:not(:disabled),.gg-icon-button:hover:not(:disabled){background-color:var(--bkg-color-grad1)}.gg-opacity{opacity:.5}.gg-opacity:hover{opacity:1;background-color:#0000}.gg-tabs{cursor:pointer;grid-auto-flow:column;padding-bottom:1rem;font-size:1rem;display:grid}.gg-tab{border:none;border-bottom:var(--app-standard-border);cursor:pointer;color:var(--text-color);background:0 0;padding:.5rem}.gg-tab.active{border-bottom:solid 1px var(--text-color)}.girafe-button-big,.girafe-button-large,.girafe-button-small,.girafe-button-tiny{color:var(--text-color);background-color:#0000;border:none;flex-direction:column;display:flex}.girafe-button-big:hover,.girafe-button-large:hover,.girafe-button-small:hover,.girafe-button-tiny:hover{background-color:var(--bkg-color-grad1);cursor:pointer}.girafe-button-big.dark,.girafe-button-large.dark,.girafe-button-small.dark,.girafe-button-tiny.dark{background-color:var(--bkg-color);filter:invert()}.girafe-button-big{width:var(--app-standard-height);height:var(--app-standard-height);align-items:center;padding:1rem}.girafe-button-big img{overflow:hidden}.girafe-button-large{flex-direction:row}.girafe-button-large img{height:2rem;margin:.3rem}.girafe-button-large span{height:2rem;margin:.3rem;line-height:2rem}.girafe-button-small{min-width:calc(var(--app-standard-height) / 2);height:calc(var(--app-standard-height) / 2);align-items:center;padding:.5rem}.girafe-button-small img{overflow:hidden}.girafe-button-small span{text-align:left;text-overflow:ellipsis;width:100%;overflow:hidden}.girafe-button-tiny{align-items:center;width:1rem;height:1rem;padding:0}.girafe-button-tiny img{overflow:hidden}.girafe-onboarding-theme{background-color:var(--bkg-color)!important;color:var(--text-color)!important}.girafe-onboarding-theme button{background-color:var(--bkg-color)!important;color:var(--text-color)!important;text-shadow:none!important}.girafe-onboarding-theme button.driver-popover-close-btn{z-index:10000}.tippy-box{background-color:var(--bkg-color)!important;border:var(--app-standard-border)!important}.tippy-content{color:var(--text-color)!important}.tippy-arrow{color:var(--bkg-color)!important}.tippy-box[data-theme~=error]{background-color:var(--error-color);white-space:pre-line}div.tippy-box[data-theme=image-popup]{border:var(--app-standard-border)!important;& div.tippy-content{background-color:var(--bkg-color)!important;& img{max-width:20rem;max-height:20rem}}& div.tippy-arrow{color:var(--bkg-color)!important}}
 </style>

package/components/treeview/treeviewtheme/component.d.ts

@@ -10,5 +10,7 @@ declare class TreeViewThemeComponent extends TreeViewGroupElement {
     registerEvents(): void;
     protected connectedCallback(): void;
     deleteTheme(): void;
+    isThemeComplete(): boolean;
+    completeTheme(): void;
 }
 export default TreeViewThemeComponent;

package/components/treeview/treeviewtheme/component.js

@@ -12,12 +12,12 @@ class TreeViewThemeComponent extends TreeViewGroupElement {
         return uHtml `<style>
 .hidden{display:none!important}.gg-rotate90{transform:rotate(90deg)}.gg-rotate180{transform:rotate(180deg)}.gg-rotate270{transform:rotate(270deg)}img{filter:var(--svg-filter)}img.legend-image{filter:var(--svg-map-filter);background:var(--svg-legend-bkg)}div{scrollbar-width:thin}a,a:visited{color:var(--link-color)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spin-wait{0%{transform:rotate(0)}7%{transform:rotate(360deg)}to{transform:rotate(360deg)}}.gg-spin{animation-name:spin;animation-duration:2s;animation-timing-function:linear;animation-iteration-count:infinite}.gg-spin-wait{animation-name:spin-wait;animation-duration:10s;animation-timing-function:linear;animation-iteration-count:infinite}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-thumb{background:#999}button,input,select,textarea{font:inherit}.gg-button,.gg-select,.gg-input,.gg-textarea{background-color:var(--bkg-color);color:var(--text-color);border:var(--app-standard-border);box-sizing:border-box;cursor:pointer;border-radius:3px;outline:0;margin:0;padding:0 0 0 .5rem;display:inline-block}.gg-label{background-color:var(--bkg-color);color:var(--text-color);border:none;align-items:center;margin:0;padding:0;display:flex}.gg-button,.gg-select,.gg-input,.gg-label{min-height:calc(var(--app-standard-height) / 1.5)}.gg-textarea{max-height:initial;resize:vertical;height:6rem;padding:.5rem;line-height:1.3rem}.gg-input{cursor:text}.gg-checkbox{accent-color:var(--text-color);width:1.2rem}.gg-range{accent-color:var(--text-color)}.gg-button{padding:0 .5rem}.gg-button.active{border:solid 1px var(--text-color-grad1);background-color:var(--bkg-color-grad2)}.gg-button:disabled{background-color:var(--bkg-color-grad1);color:var(--text-color-grad2);cursor:not-allowed;border:none}.gg-button:disabled img{filter:opacity(.6)}.gg-input:disabled,.gg-select:disabled,.gg-textarea:disabled{background-color:var(--bkg-color-grad1);color:var(--text-color-grad2);cursor:not-allowed}.gg-button>img{vertical-align:middle}.gg-icon-button{color:var(--text-color);cursor:pointer;background-color:#0000;border:none;flex-direction:column;justify-content:center;align-items:center;padding:0;display:flex}.gg-icon{justify-content:center;align-items:center;display:flex}.gg-big,.gg-big-withtext{min-width:var(--app-standard-height);min-height:var(--app-standard-height);max-height:var(--app-standard-height)}.gg-big img,.gg-big-withtext img{width:calc(var(--app-standard-height) - 1.5rem);margin:0}.gg-big-withtext span{font-variant:small-caps;padding:0 1rem;font-size:.9rem}.gg-medium,.gg-medium-withtext{min-width:calc(var(--app-standard-height) / 1.2);min-height:calc(var(--app-standard-height) / 1.2);max-height:calc(var(--app-standard-height) / 1.2);flex-direction:row}.gg-medium img{width:calc(var(--app-standard-height) / 2.4);margin:0}.gg-medium-withtext img{width:calc(var(--app-standard-height) / 2.4);margin-left:.5rem}.gg-medium-withtext span{padding:0 1rem 0 .5rem;font-size:.9rem}.gg-small,.gg-small-withtext{min-width:calc(var(--app-standard-height) / 2);min-height:calc(var(--app-standard-height) / 2);max-height:calc(var(--app-standard-height) / 2);flex-direction:row}.gg-small img{width:calc(var(--app-standard-height) / 3);margin:0}.gg-small-withtext img{width:calc(var(--app-standard-height) / 3);margin-left:.5rem}.gg-small-withtext span{padding:0 .5rem 0 .3rem;font-size:.9rem}.gg-button:hover:not(:disabled),.gg-select:hover:not(:disabled),.gg-input:hover:not(:disabled),.gg-textarea:hover:not(:disabled),.gg-icon-button:hover:not(:disabled){background-color:var(--bkg-color-grad1)}.gg-opacity{opacity:.5}.gg-opacity:hover{opacity:1;background-color:#0000}.gg-tabs{cursor:pointer;grid-auto-flow:column;padding-bottom:1rem;font-size:1rem;display:grid}.gg-tab{border:none;border-bottom:var(--app-standard-border);cursor:pointer;color:var(--text-color);background:0 0;padding:.5rem}.gg-tab.active{border-bottom:solid 1px var(--text-color)}.girafe-button-big,.girafe-button-large,.girafe-button-small,.girafe-button-tiny{color:var(--text-color);background-color:#0000;border:none;flex-direction:column;display:flex}.girafe-button-big:hover,.girafe-button-large:hover,.girafe-button-small:hover,.girafe-button-tiny:hover{background-color:var(--bkg-color-grad1);cursor:pointer}.girafe-button-big.dark,.girafe-button-large.dark,.girafe-button-small.dark,.girafe-button-tiny.dark{background-color:var(--bkg-color);filter:invert()}.girafe-button-big{width:var(--app-standard-height);height:var(--app-standard-height);align-items:center;padding:1rem}.girafe-button-big img{overflow:hidden}.girafe-button-large{flex-direction:row}.girafe-button-large img{height:2rem;margin:.3rem}.girafe-button-large span{height:2rem;margin:.3rem;line-height:2rem}.girafe-button-small{min-width:calc(var(--app-standard-height) / 2);height:calc(var(--app-standard-height) / 2);align-items:center;padding:.5rem}.girafe-button-small img{overflow:hidden}.girafe-button-small span{text-align:left;text-overflow:ellipsis;width:100%;overflow:hidden}.girafe-button-tiny{align-items:center;width:1rem;height:1rem;padding:0}.girafe-button-tiny img{overflow:hidden}.girafe-onboarding-theme{background-color:var(--bkg-color)!important;color:var(--text-color)!important}.girafe-onboarding-theme button{background-color:var(--bkg-color)!important;color:var(--text-color)!important;text-shadow:none!important}.girafe-onboarding-theme button.driver-popover-close-btn{z-index:10000}.tippy-box{background-color:var(--bkg-color)!important;border:var(--app-standard-border)!important}.tippy-content{color:var(--text-color)!important}.tippy-arrow{color:var(--bkg-color)!important}.tippy-box[data-theme~=error]{background-color:var(--error-color);white-space:pre-line}div.tippy-box[data-theme=image-popup]{border:var(--app-standard-border)!important;& div.tippy-content{background-color:var(--bkg-color)!important;& img{max-width:20rem;max-height:20rem}}& div.tippy-arrow{color:var(--bkg-color)!important}}
 </style><style>
-header{border-top:1px solid #ddd;align-items:center;height:2rem;display:flex}.tool{display:none!important}header:hover .tool{display:flex!important}.tool.active{order:100;opacity:1!important;display:flex!important}.label-container{flex-grow:1;align-items:center;display:flex;overflow:auto}.label-out-resolution span{font-style:italic}.resolution-tool{margin-left:.5rem}.legend{display:flex}.legend img{background:var(--svg-legend-bkg);height:fit-content;filter:var(--svg-map-filter)}.legend-icon{background:var(--svg-legend-bkg);max-height:1.5rem;filter:var(--svg-map-filter);margin-left:.5rem}.children{flex-basis:100%;order:10;padding-left:1.3rem}.dragAfter{border-bottom:1rem dashed #ccc}.dragBefore{border-top:1rem dashed #ccc}.gg-checkbox{width:1.2rem}.gg-caret,.gg-spacer{text-align:center;width:1.5rem;padding:0}.gg-caret{transform:scale(1.3)}.gg-caret.gg-rotate90{transform:scale(1.3)rotate(90deg)}.gg-small.gg-lock{min-width:1rem}.gg-opacity.gg-lock:hover{opacity:.5!important}.gg-tree-label{text-align:left;white-space:nowrap;text-overflow:ellipsis;padding-left:0;overflow:hidden}.gg-grab:hover{cursor:grab}.gg-selected{opacity:1}.legend-file{color:var(--text-color);font-style:italic;display:flex}@keyframes headerFade{0%{background-color:var(--highlight-color)}to{background-color:#0000}}.highlight{animation:3s ease-in-out forwards headerFade}
+header{border-top:1px solid #ddd;align-items:center;height:2rem;display:flex}.tool{display:none!important}.tool.visible,header:hover .tool{display:flex!important}.tool.active{order:100;opacity:1!important;display:flex!important}.label-container{flex-grow:1;align-items:center;display:flex;overflow:auto}.label-out-resolution span{font-style:italic}.resolution-tool{margin-left:.5rem}.legend{display:flex}.legend img{background:var(--svg-legend-bkg);height:fit-content;filter:var(--svg-map-filter)}.legend-icon{background:var(--svg-legend-bkg);max-height:1.5rem;filter:var(--svg-map-filter);margin-left:.5rem}.children{flex-basis:100%;order:10;padding-left:1.3rem}.dragAfter{border-bottom:1rem dashed #ccc}.dragBefore{border-top:1rem dashed #ccc}.gg-checkbox{width:1.2rem}.gg-caret,.gg-spacer{text-align:center;width:1.5rem;padding:0}.gg-caret{transform:scale(1.3)}.gg-caret.gg-rotate90{transform:scale(1.3)rotate(90deg)}.gg-small.gg-lock{min-width:1rem}.gg-opacity.gg-lock:hover{opacity:.5!important}.gg-tree-label{text-align:left;white-space:nowrap;text-overflow:ellipsis;padding-left:0;overflow:hidden}.gg-grab:hover{cursor:grab}.gg-selected{opacity:1}.legend-file{color:var(--text-color);font-style:italic;display:flex}@keyframes headerFade{0%{background-color:var(--highlight-color)}to{background-color:#0000}}.highlight{animation:3s ease-in-out forwards headerFade}
 </style><style>
 header{border:none;flex-direction:row-reverse;margin-top:.5rem;margin-bottom:.5rem;position:relative}.theme-button{font-size:1.2rem;font-weight:600}.theme-button span{margin-left:.5rem}.theme-button:hover{cursor:default;background-color:#0000;border:none}.children{padding-left:.5rem}.children:first-child{border:none}.label-container{position:absolute;inset:0}.label-container button{text-align:center;flex-grow:1}.tool{z-index:1}
 </style>
 <style>${this.customStyle}</style>
-<link rel="stylesheet" href="lib/tippy.js/tippy.css"><link rel="stylesheet" href="lib/tippy.js/backdrop.css"><link rel="stylesheet" href="lib/tippy.js/border.css"><link rel="stylesheet" href="lib/tippy.js/svg-arrow.css"><div id="container"><header><div class="label-container"><button class="gg-icon-button gg-small theme-button" onclick="${() => this.layer.isExpanded = !this.layer.isExpanded}"><img alt="theme-icon" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NDAgNjQwIj48IS0tIUZvbnQgQXdlc29tZSBGcmVlIHY3LjAuMSBieSBAZm9udGF3ZXNvbWUgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbSBMaWNlbnNlIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20vbGljZW5zZS9mcmVlIENvcHlyaWdodCAyMDI1IEZvbnRpY29ucywgSW5jLi0tPjxwYXRoIGQ9Ik01NzYgMTEyQzU3NiAxMDMuNyA1NzEuNyA5NiA1NjQuNyA5MS42QzU1Ny43IDg3LjIgNTQ4LjggODYuOCA1NDEuNCA5MC41TDQxNi41IDE1Mi4xTDI0NCA5My40QzIzMC4zIDg4LjcgMjE1LjMgODkuNiAyMDIuMSA5NS43TDc3LjggMTU0LjNDNjkuNCAxNTguMiA2NCAxNjYuNyA2NCAxNzZMNjQgNTI4QzY0IDUzNi4yIDY4LjIgNTQzLjkgNzUuMSA1NDguM0M4MiA1NTIuNyA5MC43IDU1My4yIDk4LjIgNTQ5LjdMMjI1LjUgNDg5LjhMMzk2LjIgNTQ2LjdDNDA5LjkgNTUxLjMgNDI0LjcgNTUwLjQgNDM3LjggNTQ0LjJMNTYyLjIgNDg1LjdDNTcwLjYgNDgxLjcgNTc2IDQ3My4zIDU3NiA0NjRMNTc2IDExMnpNMjA4IDE0Ni4xTDIwOCA0NDUuMUwxMTIgNDkwLjNMMTEyIDE5MS4zTDIwOCAxNDYuMXpNMjU2IDQ0OS40TDI1NiAxNDguM0wzODQgMTkxLjhMMzg0IDQ5Mi4xTDI1NiA0NDkuNHpNNDMyIDE5OEw1MjggMTUwLjZMNTI4IDQ0OC44TDQzMiA0OTRMNDMyIDE5OHoiLz48L3N2Zz4="> <span i18n="${this.layer.name}" class="gg-tree-label">${this.layer.name}</span></button></div><button class="${this.getButtonClass('removable')}" tip="Remove theme" onclick="${() => this.deleteTheme()}"><img alt="Remove theme" src="icons/trash.svg"></button> <button id="drag-button" class="${this.getButtonClass('draggable')}" tip="Move"><img alt="Move layer" src="icons/drag.svg"></button></header><div class="${((this.layer.isExpanded && this.layer.isVisible) ? 'children' : 'hidden')}">${this.sortedChildren().filter(layer => layer.isVisible).map(layer => (layer instanceof GroupLayer) ? uHtmlFor(layer, layer.treeItemId) `<girafe-tree-view-group groupid="${layer.treeItemId}"></girafe-tree-view-group>` : uHtmlFor(layer, layer.treeItemId) `<girafe-tree-view-item layerid="${layer.treeItemId}"></girafe-tree-view-item>`)}</div></div>
+<link rel="stylesheet" href="lib/tippy.js/tippy.css"><link rel="stylesheet" href="lib/tippy.js/backdrop.css"><link rel="stylesheet" href="lib/tippy.js/border.css"><link rel="stylesheet" href="lib/tippy.js/svg-arrow.css"><div id="container"><header><div class="label-container"><button class="gg-icon-button gg-small theme-button" onclick="${() => this.layer.isExpanded = !this.layer.isExpanded}"><img alt="theme-icon" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NDAgNjQwIj48IS0tIUZvbnQgQXdlc29tZSBGcmVlIHY3LjAuMSBieSBAZm9udGF3ZXNvbWUgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbSBMaWNlbnNlIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20vbGljZW5zZS9mcmVlIENvcHlyaWdodCAyMDI1IEZvbnRpY29ucywgSW5jLi0tPjxwYXRoIGQ9Ik01NzYgMTEyQzU3NiAxMDMuNyA1NzEuNyA5NiA1NjQuNyA5MS42QzU1Ny43IDg3LjIgNTQ4LjggODYuOCA1NDEuNCA5MC41TDQxNi41IDE1Mi4xTDI0NCA5My40QzIzMC4zIDg4LjcgMjE1LjMgODkuNiAyMDIuMSA5NS43TDc3LjggMTU0LjNDNjkuNCAxNTguMiA2NCAxNjYuNyA2NCAxNzZMNjQgNTI4QzY0IDUzNi4yIDY4LjIgNTQzLjkgNzUuMSA1NDguM0M4MiA1NTIuNyA5MC43IDU1My4yIDk4LjIgNTQ5LjdMMjI1LjUgNDg5LjhMMzk2LjIgNTQ2LjdDNDA5LjkgNTUxLjMgNDI0LjcgNTUwLjQgNDM3LjggNTQ0LjJMNTYyLjIgNDg1LjdDNTcwLjYgNDgxLjcgNTc2IDQ3My4zIDU3NiA0NjRMNTc2IDExMnpNMjA4IDE0Ni4xTDIwOCA0NDUuMUwxMTIgNDkwLjNMMTEyIDE5MS4zTDIwOCAxNDYuMXpNMjU2IDQ0OS40TDI1NiAxNDguM0wzODQgMTkxLjhMMzg0IDQ5Mi4xTDI1NiA0NDkuNHpNNDMyIDE5OEw1MjggMTUwLjZMNTI4IDQ0OC44TDQzMiA0OTRMNDMyIDE5OHoiLz48L3N2Zz4="> <span i18n="${this.layer.name}" class="gg-tree-label">${this.layer.name}</span></button></div>${this.isThemeComplete() ? '' : uHtml ` <button class="gg-icon-button gg-small tool visible theme-button" tip="Complete the theme" onclick="${() => this.completeTheme()}"><img alt="Complete the theme" src="icons/theme-checked.svg"></button> `} <button class="${this.getButtonClass('removable')}" tip="Remove theme" onclick="${() => this.deleteTheme()}"><img alt="Remove theme" src="icons/trash.svg"></button> <button id="drag-button" class="${this.getButtonClass('draggable')}" tip="Move"><img alt="Move layer" src="icons/drag.svg"></button></header><div class="${((this.layer.isExpanded && this.layer.isVisible) ? 'children' : 'hidden')}">${this.sortedChildren().filter(layer => layer.isVisible).map(layer => (layer instanceof GroupLayer) ? uHtmlFor(layer, layer.treeItemId) `<girafe-tree-view-group groupid="${layer.treeItemId}"></girafe-tree-view-group>` : uHtmlFor(layer, layer.treeItemId) `<girafe-tree-view-item layerid="${layer.treeItemId}"></girafe-tree-view-item>`)}</div></div>
 ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
     };
     layer;
@@ -37,7 +37,10 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
     registerEvents() {
         this.subscribe(/layers\.layersList\..*\.isExpanded/, (_oldValue, _newValue, theme) => this.refreshRender(theme));
         this.subscribe(/layers\.layersList\..*\.activeState/, (_oldValue, _newValue, theme) => this.refreshRender(theme));
-        this.subscribe(/layers\.layersList\..*\.children/, (_oldValue, _newValue, group) => this.refreshRender(group));
+        this.subscribe(/layers\.layersList\..*\.children/, (_oldValue, _newValue, group) => {
+            this.refreshRender(group);
+            this.refreshRender(group.parent);
+        });
         this.subscribe(/layers\.layersList\..*\.filter/, (_oldValue, _newValue, layer) => this.refreshRender(layer));
         this.subscribe(/layers\.layersList\..*\.order/, (_oldValue, _newValue, layer) => {
             this.refreshRender(layer);
@@ -58,5 +61,17 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
         this.removeFromParent();
         this.state.themes.lastSelectedTheme = null;
     }
+    isThemeComplete() {
+        return this.context.themesHelper.isThemeComplete(this.layer);
+    }
+    completeTheme() {
+        const originalTheme = this.context.themesHelper.getOriginalTheme(this.layer);
+        if (originalTheme) {
+            this.context.themesHelper.completeTheme(originalTheme);
+        }
+        else {
+            console.error('Cannot complete theme, original theme not found.');
+        }
+    }
 }
 export default TreeViewThemeComponent;

package/package.json

@@ -5,7 +5,7 @@
     "name": "GeoGirafe PSC",
     "url": "https://doc.geogirafe.org"
   },
-  "version": "1.2.0-dev.2816732111",
+  "version": "1.2.0-dev.2829479244",
   "type": "module",
   "engines": {
     "node": ">=20.19.0"

package/templates/public/about.json

@@ -1 +1 @@
-{"version":"1.2.0-dev.2816732111", "build":"2816732111", "date":"03/09/2026"}
+{"version":"1.2.0-dev.2829479244", "build":"2829479244", "date":"08/09/2026"}

package/tools/themes/themeshelper.d.ts

@@ -11,13 +11,48 @@ export default class ThemesHelper extends GirafeSingleton {
     initializeSingleton(): void;
     private get state();
     findBaseLayerById(layerId: number): BaseLayer;
-    private findBaseLayerRecursiveById;
+    findBaseLayerRecursiveById(layers: BaseLayer[], layerId: number): BaseLayer | null;
     findThemeByName(themename: string): ThemeLayer | null;
     findGroupByName(groupname: string): GroupLayer | null;
     findLayerByName(layername: string): Layer | null;
     private findBaseLayerByName;
     private findLayerRecursive;
+    /**
+     * @param layer any layer or layer group (or theme) to find the related theme.
+     * @returns The original theme configuration.
+     */
+    getOriginalTheme(layer: BaseLayer): ThemeLayer | null;
+    /**
+     * Count the layer in both the given theme and the matching original theme.
+     * @param theme the theme to check.
+     * @returns true if the count is the same. False otherwise.
+     */
+    isThemeComplete(theme: ThemeLayer): boolean;
+    /**
+     * @return the number of all sublayers (recursively) of the given layer.
+     * @private
+     */
+    private countLayer;
+    /**
+     * Add the related theme if it's not already (even partially) in the layertree. If it's
+     * already in it, don't add it, warn the user, and highlight it.
+     * @returns true if the related theme is added to the layertree, false otherwise.
+     */
+    addThemeIfNotPresent(theme: ThemeLayer): boolean;
+    /**
+     * Add the missing layers of an in-use theme, from an original theme description.
+     * The added layers are deactivated.
+     * @param originalTheme a Theme object, or model, as initially defined.
+     */
+    completeTheme(originalTheme: ThemeLayer): void;
+    /**
+     * Deactivate all layers and sublayer recursively.
+     * Meaning state="off" and isDefaultChecked=false.
+     * @private
+     */
+    private deactivateAllLayers;
     private onSelectedThemeChanged;
+    private getThemeInLayersList;
     private onThemeChanged;
     getMinimalClonedThemeForLayer(layer: BaseLayer): ThemeLayer;
     private removeOthers;
@@ -50,6 +85,14 @@ export default class ThemesHelper extends GirafeSingleton {
     private addLayerToLayerTree;
     removeLayersFromLayerTree(layersToRemove: BaseLayer[]): void;
     private removeLayersFromExistingLayerTree;
+    /**
+     * Find the initial position of the layer (relative to its sibling layers) by looking
+     * at the original theme object and insert the layer following this original order.
+     * (The "layer.order" value is incremented with the user operations, that's why we can
+     * rely on it for new layers and must adapt it to the existing sibling layers.)
+     * @private
+     */
+    private insertLayerToLayerTreeAtInitialPosition;
     /**
      * Removes all layers from the layer tree except themes that are pinned.
      */

package/tools/themes/themeshelper.js

@@ -93,6 +93,97 @@ export default class ThemesHelper extends GirafeSingleton {
         }
         return null;
     }
+    /**
+     * @param layer any layer or layer group (or theme) to find the related theme.
+     * @returns The original theme configuration.
+     */
+    getOriginalTheme(layer) {
+        const hierarchy = this.getHierarchyFromLayer(layer);
+        const theme = hierarchy?.length ? hierarchy[0] : undefined;
+        return theme ? this.findThemeByName(theme.name) : null;
+    }
+    /**
+     * Count the layer in both the given theme and the matching original theme.
+     * @param theme the theme to check.
+     * @returns true if the count is the same. False otherwise.
+     */
+    isThemeComplete(theme) {
+        const originalTheme = this.getOriginalTheme(theme);
+        if (!originalTheme) {
+            return false;
+        }
+        const themeCount = this.countLayer(theme);
+        const originalThemeCount = this.countLayer(originalTheme);
+        return themeCount === originalThemeCount;
+    }
+    /**
+     * @return the number of all sublayers (recursively) of the given layer.
+     * @private
+     */
+    countLayer(layer) {
+        let count = 1;
+        const layerAsUnknownGroup = layer;
+        if (layerAsUnknownGroup.children) {
+            layerAsUnknownGroup.children.forEach((child) => {
+                count += this.countLayer(child);
+            });
+        }
+        return count;
+    }
+    /**
+     * Add the related theme if it's not already (even partially) in the layertree. If it's
+     * already in it, don't add it, warn the user, and highlight it.
+     * @returns true if the related theme is added to the layertree, false otherwise.
+     */
+    addThemeIfNotPresent(theme) {
+        const themeInLayersList = this.getThemeInLayersList(theme);
+        // The theme is not yet added, add it!
+        if (themeInLayersList === undefined) {
+            if (this.state.themes.lastSelectedTheme?.id === theme.id) {
+                this.state.themes.lastSelectedTheme = null;
+            }
+            this.state.themes.lastSelectedTheme = theme;
+            return true;
+        }
+        // The theme is in the layer tree, then warn the user.
+        themeInLayersList.isHighlighted = true;
+        const layerName = this.context.i18nManager.getTranslation(theme.name);
+        const msg = this.context.i18nManager
+            .getTranslation('The theme {name} is already present in the treeview.')
+            .replace('{name}', layerName);
+        this.state.infobox.elements.push({
+            id: theme.treeItemId,
+            text: msg,
+            type: 'info',
+            duration: 5000
+        });
+        return false;
+    }
+    /**
+     * Add the missing layers of an in-use theme, from an original theme description.
+     * The added layers are deactivated.
+     * @param originalTheme a Theme object, or model, as initially defined.
+     */
+    completeTheme(originalTheme) {
+        const clonedTheme = originalTheme.clone();
+        this.deactivateAllLayers(clonedTheme);
+        this.mergeLayerWithExistingLayerTree(clonedTheme, this.state.layers.layersList, false);
+    }
+    /**
+     * Deactivate all layers and sublayer recursively.
+     * Meaning state="off" and isDefaultChecked=false.
+     * @private
+     */
+    deactivateAllLayers(layer) {
+        layer.activeState = 'off';
+        layer.isDefaultChecked = false;
+        const layerAsUnknownGroup = layer;
+        if (layerAsUnknownGroup.children) {
+            layerAsUnknownGroup.children.forEach((child) => {
+                this.deactivateAllLayers(child);
+            });
+        }
+    }
     onSelectedThemeChanged(theme) {
         if (!theme) {
             // Theme is null, nothing to do here
@@ -108,7 +199,11 @@ export default class ThemesHelper extends GirafeSingleton {
             this.onThemeChanged(theme);
         }
     }
+    getThemeInLayersList(theme) {
+        return this.state.layers.layersList.find((l) => l.id == theme.id);
+    }
     onThemeChanged(theme) {
+        const themeInLayersList = this.getThemeInLayersList(theme);
         // Create a clone of the theme object to use it in the treeview.
         // This is essential, otherwise all changes are done in the layers
         // (For example, when expanding legend, expanding a group, or activating the layer).
@@ -116,20 +211,10 @@ export default class ThemesHelper extends GirafeSingleton {
         // And when a theme is selected aging from the themes-selector
         // The default configuration will have been overwritten.
         const clonedTheme = theme.clone();
-        const themeAlreadyInLayersList = this.state.layers.layersList.find((l) => l.id == clonedTheme.id);
-        if (themeAlreadyInLayersList) {
-            themeAlreadyInLayersList.isHighlighted = true;
-            const layername = this.context.i18nManager.getTranslation(clonedTheme.name);
-            const msg = this.context.i18nManager
-                .getTranslation('The theme {name} is already present in the treeview.')
-                .replace('{name}', layername);
-            this.state.infobox.elements.push({
-                id: theme.treeItemId,
-                text: msg,
-                type: 'info',
-                duration: 5000
-            });
-            return;
+        // Delete (replace) this theme if it already exists.
+        if (themeInLayersList !== undefined) {
+            this.context.stateManager.batchChanges(() => this.removeLayersFromLayerTree([themeInLayersList]));
+            clonedTheme.order = themeInLayersList.order;
         }
         if (this.context.configManager.Config.themes.selectionMode === 'replace') {
             // Mode is <replace>
@@ -138,7 +223,6 @@ export default class ThemesHelper extends GirafeSingleton {
         }
         else {
             // Mode is <add>
-            clonedTheme.order = this.getInitialOrderForNewTheme();
             this.state.layers.layersList.push(clonedTheme);
         }
         const themeFunctionalities = this.state.themes._allFunctionalities[theme.id];
@@ -384,7 +468,7 @@ export default class ThemesHelper extends GirafeSingleton {
         if (parent) {
             newLayer.parent = parent;
         }
-        existingList.push(newLayer);
+        this.insertLayerToLayerTreeAtInitialPosition(newLayer, existingList);
         if (activate) {
             this.context.layerManager.toggle(newLayer, 'on');
         }
@@ -411,6 +495,55 @@ export default class ThemesHelper extends GirafeSingleton {
             }
         }
     }
+    /**
+     * Find the initial position of the layer (relative to its sibling layers) by looking
+     * at the original theme object and insert the layer following this original order.
+     * (The "layer.order" value is incremented with the user operations, that's why we can
+     * rely on it for new layers and must adapt it to the existing sibling layers.)
+     * @private
+     */
+    insertLayerToLayerTreeAtInitialPosition(newLayer, existingList) {
+        const originalLayer = this.findBaseLayerById(newLayer.id);
+        const originalParent = originalLayer.parent;
+        if (!originalParent || existingList.length === 0) {
+            existingList.push(newLayer);
+            return;
+        }
+        // Following the original order, find the nearest previous or next sibling layer in the existingList.
+        const originalSiblings = originalParent.children;
+        const existingListIds = new Set(existingList.map((layer) => layer.id));
+        let previousOriginalSibling;
+        let nextOriginalSibling;
+        let originalLayerEncountered = false;
+        originalSiblings.some((oLayer) => {
+            if (originalLayerEncountered && (previousOriginalSibling || nextOriginalSibling)) {
+                return true;
+            }
+            if (oLayer.id === newLayer.id) {
+                originalLayerEncountered = true;
+            }
+            else if (existingListIds.has(oLayer.id)) {
+                if (originalLayerEncountered) {
+                    nextOriginalSibling = oLayer;
+                }
+                else {
+                    previousOriginalSibling = oLayer;
+                }
+            }
+        });
+        // Find back the matching sibling layer in the ExistingList and update the "newLayer.order"
+        // to be just before or just after the sibling layer.
+        if (previousOriginalSibling) {
+            const previousSibling = existingList.find((layer) => layer.id === previousOriginalSibling?.id);
+            newLayer.order = previousSibling?.order ? previousSibling.order : newLayer.order;
+        }
+        else if (nextOriginalSibling) {
+            const nextSibling = existingList.find((layer) => layer.id === nextOriginalSibling?.id);
+            newLayer.order = nextSibling?.order ? nextSibling.order - 1 : newLayer.order;
+        }
+        // Push the layer in the list. The orderManager will move the layer regarding the order values.
+        existingList.push(newLayer);
+    }
     /**
      * Removes all layers from the layer tree except themes that are pinned.
      */