@geogirafe/lib-geoportal 1.1.0-dev.2273214250 → 1.1.0-dev.2273215791
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -8,9 +8,11 @@ class InfoWindowComponent extends GirafeDraggableElement {
|
|
|
8
8
|
</style><style>
|
|
9
9
|
.girafe-resizer{--resize-size:6px;--negative-resize-size:-6px}button.girafe-resizer{background-color:#0000;border:none;position:absolute}.girafe-resizer.corner{width:var(--resize-size);height:var(--resize-size)}.girafe-resizer.top-bottom{width:calc(100% - (2*var(--resize-size)));height:var(--resize-size)}.girafe-resizer.left-right{width:var(--resize-size);height:calc(100% - (2*var(--resize-size)))}.girafe-resizer.tl:hover,.girafe-resizer.br:hover{cursor:nw-resize}.girafe-resizer.tr:hover,.girafe-resizer.bl:hover{cursor:ne-resize}.girafe-resizer.top-bottom:hover{cursor:n-resize}.girafe-resizer.left-right:hover{cursor:e-resize}.girafe-resizer.tl{top:var(--negative-resize-size);left:var(--negative-resize-size)}.girafe-resizer.t{top:var(--negative-resize-size);left:var(--resize-size)}.girafe-resizer.tr{top:var(--negative-resize-size);right:var(--negative-resize-size)}.girafe-resizer.r{top:var(--resize-size);right:var(--negative-resize-size)}.girafe-resizer.br{bottom:var(--negative-resize-size);right:var(--negative-resize-size)}.girafe-resizer.b{bottom:var(--negative-resize-size);left:var(--resize-size)}.girafe-resizer.bl{bottom:var(--negative-resize-size);left:var(--negative-resize-size)}.girafe-resizer.l{top:var(--resize-size);left:var(--negative-resize-size)}.girafe-draggable-window{--window-header-height:2rem;--window-footer-height:2rem;border:solid 1px var(--text-color-grad1);box-shadow:var(--bx-shdw);background:var(--bkg-color);border-radius:3px;width:100%;height:100%}.girafe-draggable-window #header{height:var(--window-header-height);line-height:var(--window-header-height);cursor:move;z-index:10;background-color:var(--bkg-color-grad2);color:var(--text-color);text-align:center;padding:0 .5rem}.girafe-draggable-window #close{color:var(--text-color);cursor:pointer;background-color:#0000;border:none;width:1rem;height:1rem;margin:.5rem;padding:0;line-height:1rem;position:absolute;top:0;right:0}.girafe-draggable-window #close i:before{content:"uf00d"}.girafe-draggable-window #close:hover{color:#000;border-color:#000}.girafe-draggable-window #content{width:100%;height:calc(100% - (var(--window-header-height) + var(--window-footer-height)));color:var(--text-color);overflow-y:auto}.girafe-draggable-window #footer{height:var(--window-footer-height);color:var(--text-color-grad1);border-top:solid 1px var(--text-color-grad1);justify-content:space-around;display:flex}
|
|
10
10
|
</style><style>
|
|
11
|
-
#
|
|
11
|
+
:host{--selection-window-header-height:2.5rem;--selection-window-footer-height:2.5rem;--selection-window-content-padding:.5rem}#header{flex-direction:row;display:flex;background-color:var(--bkg-color)!important;height:var(--selection-window-header-height)!important;& .title{text-align:start;flex-grow:1;padding:.25rem 0;font-weight:600}& button{flex-grow:0}}.hr{background-color:var(--bkg-color-grad1);height:2px;margin:.125rem .5rem}#content{height:calc(100% - var(--selection-window-header-height) - var(--selection-window-footer-height) - 2*var(--selection-window-content-padding))!important;&>:first-child{padding:var(--selection-window-content-padding);height:calc(100% - var(--selection-window-footer-height) - 2*var(--selection-window-content-padding))!important;width:calc(100% - 2*var(--selection-window-content-padding))!important}}#footer{height:var(--selection-window-footer-height)!important;border-top:none!important}
|
|
12
|
+
</style><style>
|
|
13
|
+
:host{--selection-window-footer-height:0rem}#content{background-color:var(--bkg-color)!important;overflow-y:hidden!important;& iframe{border:none;background-color:var(--bkg-color)!important}}
|
|
12
14
|
</style>
|
|
13
|
-
<div id="draggable" class="girafe-draggable-window"><button tabindex="-1" class="girafe-resizer tl corner"></button> <button tabindex="-1" class="girafe-resizer t top-bottom"></button> <button tabindex="-1" class="girafe-resizer tr corner"></button> <button tabindex="-1" class="girafe-resizer r left-right"></button> <button tabindex="-1" class="girafe-resizer br corner"></button> <button tabindex="-1" class="girafe-resizer b top-bottom"></button> <button tabindex="-1" class="girafe-resizer bl corner"></button> <button tabindex="-1" class="girafe-resizer l left-right"></button><div id="header"><span i18n="${this.state.infoWindow.title}"></span> <
|
|
15
|
+
<div id="draggable" class="girafe-draggable-window"><button tabindex="-1" class="girafe-resizer tl corner"></button> <button tabindex="-1" class="girafe-resizer t top-bottom"></button> <button tabindex="-1" class="girafe-resizer tr corner"></button> <button tabindex="-1" class="girafe-resizer r left-right"></button> <button tabindex="-1" class="girafe-resizer br corner"></button> <button tabindex="-1" class="girafe-resizer b top-bottom"></button> <button tabindex="-1" class="girafe-resizer bl corner"></button> <button tabindex="-1" class="girafe-resizer l left-right"></button><div id="header"><span i18n="${this.state.infoWindow.title}" class="title"></span> <button class="gg-icon-button gg-medium" onclick="${() => this.closeWindow()}" tip="Clear results and close Panel"><img alt="close-icon" src="icons/close.svg"></button></div><div class="hr"></div><div id="content"><iframe title="iframe content" src="${this.state.infoWindow.url}"></iframe></div></div>`;
|
|
14
16
|
};
|
|
15
17
|
visible = false;
|
|
16
18
|
resizeWindow = null;
|
|
@@ -87,7 +89,7 @@ class InfoWindowComponent extends GirafeDraggableElement {
|
|
|
87
89
|
return value + 'px';
|
|
88
90
|
// Check for a valid CSS
|
|
89
91
|
const matches = value.match(/^\d.*(px|em|rem|%)$/g);
|
|
90
|
-
return matches
|
|
92
|
+
return matches?.length === 1 ? value : null;
|
|
91
93
|
}
|
|
92
94
|
return null;
|
|
93
95
|
}
|
|
@@ -21,7 +21,9 @@ class SelectionWindowComponent extends GirafeDraggableElement {
|
|
|
21
21
|
</style><style>
|
|
22
22
|
.girafe-resizer{--resize-size:6px;--negative-resize-size:-6px}button.girafe-resizer{background-color:#0000;border:none;position:absolute}.girafe-resizer.corner{width:var(--resize-size);height:var(--resize-size)}.girafe-resizer.top-bottom{width:calc(100% - (2*var(--resize-size)));height:var(--resize-size)}.girafe-resizer.left-right{width:var(--resize-size);height:calc(100% - (2*var(--resize-size)))}.girafe-resizer.tl:hover,.girafe-resizer.br:hover{cursor:nw-resize}.girafe-resizer.tr:hover,.girafe-resizer.bl:hover{cursor:ne-resize}.girafe-resizer.top-bottom:hover{cursor:n-resize}.girafe-resizer.left-right:hover{cursor:e-resize}.girafe-resizer.tl{top:var(--negative-resize-size);left:var(--negative-resize-size)}.girafe-resizer.t{top:var(--negative-resize-size);left:var(--resize-size)}.girafe-resizer.tr{top:var(--negative-resize-size);right:var(--negative-resize-size)}.girafe-resizer.r{top:var(--resize-size);right:var(--negative-resize-size)}.girafe-resizer.br{bottom:var(--negative-resize-size);right:var(--negative-resize-size)}.girafe-resizer.b{bottom:var(--negative-resize-size);left:var(--resize-size)}.girafe-resizer.bl{bottom:var(--negative-resize-size);left:var(--negative-resize-size)}.girafe-resizer.l{top:var(--resize-size);left:var(--negative-resize-size)}.girafe-draggable-window{--window-header-height:2rem;--window-footer-height:2rem;border:solid 1px var(--text-color-grad1);box-shadow:var(--bx-shdw);background:var(--bkg-color);border-radius:3px;width:100%;height:100%}.girafe-draggable-window #header{height:var(--window-header-height);line-height:var(--window-header-height);cursor:move;z-index:10;background-color:var(--bkg-color-grad2);color:var(--text-color);text-align:center;padding:0 .5rem}.girafe-draggable-window #close{color:var(--text-color);cursor:pointer;background-color:#0000;border:none;width:1rem;height:1rem;margin:.5rem;padding:0;line-height:1rem;position:absolute;top:0;right:0}.girafe-draggable-window #close i:before{content:"uf00d"}.girafe-draggable-window #close:hover{color:#000;border-color:#000}.girafe-draggable-window #content{width:100%;height:calc(100% - (var(--window-header-height) + var(--window-footer-height)));color:var(--text-color);overflow-y:auto}.girafe-draggable-window #footer{height:var(--window-footer-height);color:var(--text-color-grad1);border-top:solid 1px var(--text-color-grad1);justify-content:space-around;display:flex}
|
|
23
23
|
</style><style>
|
|
24
|
-
:host{--selection-window-header-height:2.5rem;--selection-window-footer-height:2.5rem;--selection-window-content-padding:.5rem}#header{flex-direction:row;display:flex;background-color:var(--bkg-color)!important;height:var(--selection-window-header-height)!important;& .title{text-align:start;flex-grow:1;padding:.25rem 0;font-weight:600}& button{flex-grow:0}}.hr{background-color:var(--bkg-color-grad1);height:2px;margin:.125rem .5rem}#content{height:calc(100% - var(--selection-window-header-height) - var(--selection-window-footer-height) - 2*var(--selection-window-content-padding))!important
|
|
24
|
+
:host{--selection-window-header-height:2.5rem;--selection-window-footer-height:2.5rem;--selection-window-content-padding:.5rem}#header{flex-direction:row;display:flex;background-color:var(--bkg-color)!important;height:var(--selection-window-header-height)!important;& .title{text-align:start;flex-grow:1;padding:.25rem 0;font-weight:600}& button{flex-grow:0}}.hr{background-color:var(--bkg-color-grad1);height:2px;margin:.125rem .5rem}#content{height:calc(100% - var(--selection-window-header-height) - var(--selection-window-footer-height) - 2*var(--selection-window-content-padding))!important;&>:first-child{padding:var(--selection-window-content-padding);height:calc(100% - var(--selection-window-footer-height) - 2*var(--selection-window-content-padding))!important;width:calc(100% - 2*var(--selection-window-content-padding))!important}}#footer{height:var(--selection-window-footer-height)!important;border-top:none!important}
|
|
25
|
+
</style><style>
|
|
26
|
+
table{border-collapse:collapse;table-layout:auto;width:100%}td.feature-id{text-align:left;color:var(--text-color);font-weight:600;line-height:2rem}td.label{text-align:left;color:var(--text-color);padding-left:.25rem;padding-right:.5rem;font-weight:600}tr.key-value{line-height:2rem}tr.key-value:nth-child(odd){background-color:var(--bkg-color-grad1)}tr.key-value:nth-child(2n){background-color:var(--bkg-color)}button{background-color:unset;color:var(--text-color-grad1);cursor:pointer;border:none;flex-grow:.25;padding:.5rem}button.showing-dropdown{background-color:var(--bkg-color-grad1)}button:disabled:hover{background-color:var(--bkg-color);cursor:default}button>img{max-height:calc(var(--selection-window-header-height)/2)}#previous i{float:left}#next i{float:right}#tools{justify-content:space-around;display:flex}#counter{line-height:var(--selection-window-footer-height);height:var(--selection-window-footer-height);text-align:center;flex-grow:1;margin-top:0}#layers-dropdown{background-color:var(--bkg-color);border:solid 1px var(--bkg-color-grad2);top:var(--selection-window-header-height);flex-direction:column;padding:.5rem 0;display:flex;position:absolute}option.layers-dropdown-item{cursor:pointer;flex-grow:1;padding:.1rem .5rem;display:flex}option.layers-dropdown-item:hover{background-color:var(--bkg-color-grad1)}
|
|
25
27
|
</style>
|
|
26
28
|
<div id="draggable" class="${this.visible ? 'girafe-draggable-window' : 'hidden'}"><button tabindex="-1" class="girafe-resizer tl corner"></button> <button tabindex="-1" class="girafe-resizer t top-bottom"></button> <button tabindex="-1" class="girafe-resizer tr corner"></button> <button tabindex="-1" class="girafe-resizer r left-right"></button> <button tabindex="-1" class="girafe-resizer br corner"></button> <button tabindex="-1" class="girafe-resizer b top-bottom"></button> <button tabindex="-1" class="girafe-resizer bl corner"></button> <button tabindex="-1" class="girafe-resizer l left-right"></button><div id="header"><span i18n="Results" class="title"></span><div id="layers-download-wrapper"><button class="${this.showDropdown ? 'gg-icon-button gg-medium showing-dropdown' : 'gg-icon-button gg-medium'}" onclick="${() => this.openDropdown()}" tip="Generate CSV"><img alt="download csv icon" src="icons/arrow-download.svg"></button><div ?hidden="${!this.showDropdown}"><div id="layers-dropdown">${this.getLayersList().map((layer) => uHtml `<option class="layers-dropdown-item" value="${layer.id}" onclick="${() => this.generateCSV(layer.id)}" onkeydown="${() => this.generateCSV(layer.id)}" tabindex="0" i18n="${layer.label}"></option>`)}</div></div></div><button class="gg-icon-button gg-medium" onclick="${() => this.recenter()}" tip="Zoom to"><img alt="zoom to selection icon" src="icons/zoom-to-selection.svg"></button> <button class="gg-icon-button gg-medium" onclick="${() => this.closeWindow()}" tip="Clear results and close Panel"><img alt="close-icon" src="icons/close.svg"></button></div><div class="hr"></div><div id="content"><div><table><tr class="hidden"><th i18n="Label">Label<th i18n="Value">Value<tr><td class="feature-id" colspan="2" i18n="${this.getWindowFeature()?.id}"></tr>${this.displayedProperties.map((keyValue) => uHtml `<tr class="key-value"><td class="label" i18n="${keyValue[0]}"><td class="value">${this.htmlUnsafe(keyValue[1])}</tr>`)}</table></div></div><div class="hr"></div><div id="footer"><button id="beginning" class="gg-icon-button gg-medium" ?disabled="${this.maxIndex == 0 || this.focusedIndex == 0}" onclick="${() => this.onFocusWindowFeature(0)}"><img alt="beginning-icon" src="icons/skip-to-beginning.svg"></button> <button id="previous" class="gg-icon-button gg-medium" ?disabled="${this.maxIndex == 0 || this.focusedIndex == 0}" onclick="${() => this.onFocusWindowFeature(this.focusedIndex - 1)}"><img alt="previous-icon" src="icons/to-previous.svg"></button><div id="counter" class="${this.maxIndex > 0 ? '' : 'hidden'}"><span class="${this.maxIndex > 0 ? '' : 'hidden'}"><input class="gg-input" type="number" min="1" max="${this.maxIndex + 1}" value="${this.focusedIndex + 1}" onchange="${(e) => this.onFocusWindowFeatureChecked(e)}"> <span>/</span> <span>${this.maxIndex + 1}</span></span></div><button id="next" class="gg-icon-button gg-medium" ?disabled="${this.maxIndex == 0 || this.focusedIndex == this.maxIndex}" onclick="${() => this.onFocusWindowFeature(this.focusedIndex + 1)}"><img alt="next-icon" src="icons/to-next.svg"></button> <button id="end" class="gg-icon-button gg-medium" ?disabled="${this.maxIndex == 0 || this.focusedIndex == this.maxIndex}" onclick="${() => this.onFocusWindowFeature(this.maxIndex)}"><img alt="end-icon" src="icons/skip-to-end.svg"></button></div></div>`;
|
|
27
29
|
};
|
package/package.json
CHANGED
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
:host {
|
|
2
|
+
/*
|
|
3
|
+
* Can be overridden in custom Stylesheet.
|
|
4
|
+
* Don't set it to '0' but to '0rem'. Otherwise it will mess up the calc-Function
|
|
5
|
+
*/
|
|
6
|
+
--selection-window-header-height: 2.5rem;
|
|
7
|
+
--selection-window-footer-height: 2.5rem;
|
|
8
|
+
--selection-window-content-padding: 0.5rem;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
#header {
|
|
12
|
+
display: flex;
|
|
13
|
+
flex-direction: row;
|
|
14
|
+
background-color: var(--bkg-color) !important;
|
|
15
|
+
height: var(--selection-window-header-height) !important;
|
|
16
|
+
|
|
17
|
+
.title {
|
|
18
|
+
flex-grow: 1;
|
|
19
|
+
text-align: start;
|
|
20
|
+
padding: 0.25rem 0;
|
|
21
|
+
font-weight: 600;
|
|
22
|
+
}
|
|
23
|
+
button {
|
|
24
|
+
flex-grow: 0;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.hr {
|
|
29
|
+
background-color: var(--bkg-color-grad1);
|
|
30
|
+
height: 2px;
|
|
31
|
+
margin: 0.125rem 0.5rem;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
#content {
|
|
35
|
+
height: calc(
|
|
36
|
+
100% - var(--selection-window-header-height)
|
|
37
|
+
- var(--selection-window-footer-height)
|
|
38
|
+
- 2 * var(--selection-window-content-padding)
|
|
39
|
+
) !important;
|
|
40
|
+
>:first-child {
|
|
41
|
+
height: calc(
|
|
42
|
+
100% - var(--selection-window-footer-height)
|
|
43
|
+
- 2 * var(--selection-window-content-padding)
|
|
44
|
+
) !important;
|
|
45
|
+
width: calc(100% - 2 * var(--selection-window-content-padding)) !important;
|
|
46
|
+
padding: var(--selection-window-content-padding);
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
#footer {
|
|
51
|
+
height: var(--selection-window-footer-height) !important;
|
|
52
|
+
border-top: none !important;
|
|
53
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":"1.1.0-dev.
|
|
1
|
+
{"version":"1.1.0-dev.2273215791", "build":"2273215791", "date":"20/01/2026"}
|