@deviceinsight/ng-ui-components 7.1.0 → 7.3.0

package/dist/index.cjs

@@ -1,2 +1,3903 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),L=require("react-toastify"),nt=require("nanoid"),p=require("react"),P=require("classnames"),A=require("@deviceinsight/ng-ui-basic-components"),ue=require("pure-color"),te=require("react-colorful"),Te=require("dayjs/plugin/timezone"),Oe=require("dayjs/plugin/utc"),J=require("react-datepicker"),T=require("lodash"),S=require("dayjs"),it=require("dayjs/plugin/localeData"),rt=require("dayjs/plugin/localizedFormat"),at=require("dayjs/plugin/customParseFormat"),z=require("i18next"),ot=require("date-fns/locale");require("dayjs/locale/en");require("dayjs/locale/en-gb");require("dayjs/locale/en-ca");require("dayjs/locale/de");require("dayjs/locale/de-at");require("dayjs/locale/de-ch");require("dayjs/locale/it");require("dayjs/locale/ja");const O=require("react-router-dom"),xe=require("@dnd-kit/core"),K=require("@dnd-kit/sortable"),lt=require("@dnd-kit/modifiers"),ve=require("@deviceinsight/ng-ui-api-client"),ct=require("react-select"),dt=require("react-dropzone"),ut=require("react-select-async-paginate"),De=require("@svgdotjs/svg.js"),ht=require("highcharts"),pt=require("highcharts-react-official"),Pe=require("@rc-component/slider"),ft=require("@rc-component/tooltip");function Le(t){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const s in t)if(s!=="default"){const n=Object.getOwnPropertyDescriptor(t,s);Object.defineProperty(e,s,n.get?n:{enumerable:!0,get:()=>t[s]})}}return e.default=t,Object.freeze(e)}const Z=Le(p),se=Le(ot);let G={},Ve={autoClose:!1};const gt=t=>{Ve=t},ee=(t,e)=>{t&&(G[t]?G[t]=[...G[t],e]:G[t]=[e])},mt=(t,e,s)=>{const n=L.toast.success(t,e);s&&ee(s,n)},xt=(t,e,s)=>{const n=L.toast.info(t,e);s&&ee(s,n)},vt=(t,e,s)=>{const n=L.toast.warn(t,e);s&&ee(s,n)},St=(t,e,s)=>{const n=L.toast.error(t,{...Ve,...e});s&&ee(s,n)},bt=t=>{L.toast.dismiss(t)},yt=t=>{G[t]&&(G[t].forEach(e=>L.toast.dismiss(e)),delete G[t])},jt=()=>{G={},L.toast.dismiss()},Ct=()=>i.jsx(L.ToastContainer,{position:"top-center",theme:"colored",autoClose:3e4,hideProgressBar:!0,transition:L.Slide}),Be=(t=32)=>{let e="";for(let s=0;s<t;s++){const n=Math.random()*16|0;(s===8||s===12||s===16||s===20)&&(e+="-"),e+=(s===12?4:s===16?n&3|8:n).toString(16)}return e},wt="0123456789abcdefghijklmnopqrstuvwxyz",At=nt.customAlphabet(wt,10);let C,V;function Nt(t,e){C=t,V=e}function It(t){return t.filter((e,s,n)=>n.indexOf(e)===s)}function Rt(t,e){return t.filter(s=>!e.includes(s))}function kt(t,e){return It([...t,...e])}function Et(t,e){return t.filter(s=>e.includes(s))}function ae(t){return t.children?t.children.length+t.children.reduce((s,n)=>s+ae(n),0):0}function X(t){return t.children?t.children.reduce((e,s)=>[...e,...X(s)],[]):[t]}function Mt(t){return X(t).map(e=>e.id)}function Tt({childNodeKey:t,idKey:e,displayNameKey:s,typeKey:n,lazyLoadableKey:r,nodeMetaData:a,leafMetaData:o}){const{typeValue:l,image:c,resolver:u}=o,{typeValue:d,expandedImage:h,closedImage:g,resolver:f}=a;return function m(x,y=""){return x.map(v=>{const j=v[e],w=v[s],I=v[t],N=v[r],R=f?f(v):v[n]===d,M=u?u(v):v[n]===l,b=`${y}/${w}`,k=v;if(R)return{id:j,name:w,children:m(I||[],b),lazyLoadable:N,expandedImage:h,closedImage:g,path:b,originalNode:k};if(M)return{id:j,name:w,image:c,path:b,originalNode:k};throw new Error("unknown node or leaf type provided")})}}function Ot(t,e){let s;return e.children!==void 0&&(t.children!==void 0?s=[...t.children,...e.children]:s=[...e.children]),{...t,...e,children:s||void 0}}function Fe(t,e,s){return t.children===void 0?t:t.id===e?Ot(t,s):{...t,children:t.children.map(n=>Fe(n,e,s))}}function Ge(t,e,s,n,r){if(t[s]===e)return[t[r]];if(t[n])for(let a=0;a<t[n].length;a++){const o=Ge(t[n][a],e,s,n,r);if(o)return o.unshift(t[r]),o}return null}function Dt(t,e,s,n,r){const a=Ge(t,e,s,n,r);return a?a.join("."):null}function He({isOpen:t,onOpenChange:e,className:s,style:n,value:r,placement:a,children:o}){return i.jsx(A.Popup,{handler:i.jsx("div",{className:`di color-picker-popper ${s||""}`,style:n,children:i.jsx("div",{className:"trigger",style:{...n,backgroundColor:r}})}),open:t,onOpenChange:e,placement:a,children:i.jsx("div",{className:"color-picker-box",children:i.jsx("div",{className:"content",children:o})})})}function Ye({value:t,isOpen:e,onOpenStateChange:s,direction:n,colors:r,onPick:a,pickerStyle:o,pickerClassName:l,inline:c=!0,className:u,style:d}){const[h,g]=p.useState(!1),f=i.jsx("div",{className:P("di color-picker grid-color-picker clearfix",l),style:o,children:r.map(m=>i.jsx("div",{onClick:()=>{a(m)},className:`color ${m===t?"selected":""}`,style:{background:m}},m))});return c?f:i.jsx(He,{className:u,style:d,value:t,isOpen:e??h,onOpenChange:s??g,placement:n,children:f})}const Se=(t,e,s)=>t.length?e.test(t):!s,me=class me extends Z.Component{constructor(){super(...arguments),this.handleChange=e=>{const{value:s}=e.target,{pattern:n,required:r,onChange:a}=this.props,o=Se(s,n,r);a(s,o)}}render(){const{style:e,invalidStyle:s,value:n,...r}=this.props,{pattern:a,required:o,...l}=r;return i.jsx("input",{...l,value:n,onChange:this.handleChange,style:Se(n,a,o)?e:{...e,...s},type:"text"})}};me.defaultProps={required:!1};let Q=me;function be({value:t,pattern:e,onChange:s,placeholder:n,style:r}){const[a,o]=p.useState(t);function l(c,u){o(c),u&&s(c)}return p.useEffect(()=>{o(t)},[t]),i.jsx(Q,{value:a,onChange:l,pattern:e,invalidStyle:{borderColor:"red"},placeholder:n,required:!0,style:r})}const Pt=/^#([A-Fa-f0-9]{6})$/,Lt=/^rgb\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/,Ue=t=>ue.parse(t).splice(0,3),Vt=t=>t&&t.length>6?ue.convert.rgb.hex(Ue(t)):"",Bt=t=>t?ue.convert.rgb.string(Ue(t)):"";function Ft({onOpenStateChange:t,onPick:e,allowTextInput:s,className:n,direction:r,inline:a=!0,isOpen:o,opacitySlider:l,pickerClassName:c,pickerStyle:u,style:d,value:h}){const[g,f]=p.useState(!1),m=Vt(h),x=Bt(h),y=h===m?te.HexColorPicker:l&&!s?te.RgbaStringColorPicker:te.RgbStringColorPicker,v=i.jsxs("div",{className:P("di gradient-color-picker",{"with-textfield":s},c),style:u,children:[i.jsx(y,{color:h,onChange:e}),s&&i.jsxs("div",{className:"inputs",children:[i.jsx(be,{value:m,onChange:e,pattern:Pt,placeholder:"#FF00FF",style:{width:60}}),i.jsx(be,{value:x,onChange:e,pattern:Lt,placeholder:"rgb(255,0,255)",style:{width:115}})]})]});return a?v:i.jsx(He,{className:n,style:d,value:h,isOpen:o??g,onOpenChange:t??f,placement:r,children:v})}const Gt=["en","en-gb","en-ca","de","de-at","de-ch","it","ja"];function ye(t){return Gt.includes(t)}S.extend(Oe);S.extend(Te);S.extend(it);S.extend(rt);S.extend(at);function Ht(t){const[e,s]=t.split("-");let n;e&&s?n=se[`${e}${s}`]??se[e]:e?n=se[e]:n=null,n&&J.registerLocale(t,n)}async function Yt(t){let e=null;const[s]=t.split("-");ye(t.toLowerCase())?e=t.toLowerCase():ye(s.toLowerCase())&&(e=s.toLowerCase()),e&&S.locale(e)}function je(t,e){return t==null||t===""?!0:typeof t=="number"?!isNaN(t):typeof t=="string"?S(t,e,!0).isValid():!1}function ne(t,e,s){return typeof t=="number"&&!Number.isNaN(t)?new Date(t):typeof t=="string"&&S(t,e,!0).isValid()?S.tz(t,e,s).toDate():null}function Ut(t,e,s){return typeof t=="number"?S.tz(t,s):typeof t=="string"&&S(t,e,!0).isValid()?S.tz(t,e,s):null}const he=p.forwardRef(({value:t,clearable:e,inline:s,readOnly:n,wrapperClassName:r,onChange:a,locale:o,timezone:l,...c},u)=>{const[d,h]=p.useState(S.localeData().longDateFormat("L")),{t:g}=V(),[f,m]=p.useState(!1),[x,y]=p.useState(!1),[v,j]=p.useState(""),w=p.useMemo(()=>T.debounce(y,30),[]);p.useEffect(()=>{const b=o??z.language;b&&(Ht(b),Yt(b).then(()=>h(S.localeData().longDateFormat("L"))))},[o]);const I=p.useCallback(b=>b==null||b==""?"":je(b,d)?typeof b=="number"?S.tz(b,l).format(d):b:g("dateInput.invalidDate",{defaultValue:"invalid date"}),[d,g,l]);p.useEffect(()=>{t==null?j(""):j(I(t))},[I,t]),p.useEffect(()=>{m(je(t,d))},[d,t]),p.useEffect(()=>{S.locale(o??z.language),h(S.localeData().longDateFormat("L"))},[o]);const N=b=>{if(j(b),b){const k=S(b,d,!0).isValid();if(k){const H=Ut(t,d,l),Y=S.tz(b,d,l??S.tz.guess());H&&(Y.set("hour",H.hour()),Y.set("minute",H.minute()),Y.set("second",H.second()),Y.set("millisecond",H.millisecond())),a(Y.valueOf(),!0)}m(k)}else a(null,!0),m(!0)},R=b=>{a(b?b.valueOf():null),j(I(b?b.getTime():null)),y(!1)},M=()=>N("");return s?i.jsx(J,{...c,onChange:R,selected:ne(t,d,l),locale:o??z.language,isClearable:e,placeholderText:d,className:P("date",{invalid:!f}),inline:!0}):n?i.jsx(J,{...c,onChange:()=>{},selected:ne(t,d,l),locale:o??z.language,customInput:i.jsx("span",{children:i.jsx("input",{type:"text",value:I(t),readOnly:!0})}),placeholderText:d,readOnly:!0}):i.jsx(A.Popup,{handler:i.jsxs("span",{className:"di date-input-wrapper",children:[i.jsx("input",{ref:u,"data-testid":"date-input",className:P("date",{invalid:!f}),onChange:b=>N(b.target.value),value:v,placeholder:d,onBlur:()=>{N(I(t)),w(!1)}}),e&&i.jsx(A.Button,{naked:!0,small:!0,onClick:M,children:i.jsx(A.Icon,{del:!0})})]}),mode:["click","focus"],className:"date-input",handlerWrapperClassName:r,open:x,onOpenChange:y,children:i.jsx("div",{className:"di date-picker-popup-wrapper",tabIndex:0,onFocus:()=>{w(!0)},children:i.jsx(J,{...c,selected:ne(t,d,l),onChange:R,locale:o??z.language,isClearable:e,placeholderText:d,className:P("date",{invalid:!f}),inline:!0})})})});class Wt extends Z.Component{constructor(){super(...arguments),this.state={editMode:!1},this.handleEdit=()=>this.setState({editMode:!0}),this.handleChangeValue=e=>this.props.onChange(e.target.value)}render(){const{editMode:e}=this.state,{value:s}=this.props;return e?i.jsx("input",{value:s,onChange:this.handleChangeValue,autoCorrect:"off",spellCheck:"false",autoComplete:"off"}):i.jsxs("span",{children:[i.jsx("span",{style:{marginRight:10},children:s}),i.jsx(A.Button,{small:!0,onClick:this.handleEdit,children:i.jsx(A.Icon,{edit:!0})})]})}}function Zt({title:t,message:e,onAccept:s,onCancel:n,inputPlaceholder:r,cancelButtonLabel:a,acceptButtonLabel:o}){const{t:l}=V(),c=p.useRef(null),[u,d]=p.useState("");return p.useEffect(()=>{c.current?.focus()}),i.jsx(A.Modal,{header:l(t.id,{defaultValue:t.defaultValue}),content:i.jsx("div",{className:"di form",children:i.jsxs("div",{className:"field",children:[i.jsx("label",{children:i.jsx(C,{i18nKey:e.id,children:e.defaultValue})}),i.jsx("input",{type:"text",style:{width:250},ref:c,placeholder:r?l(r.id,{defaultValue:r.defaultValue}):void 0,onChange:h=>d(h.target.value)})]})}),footer:i.jsxs("div",{children:[i.jsx(A.Button,{primary:!0,onClick:()=>{s(u)},disabled:!u.length,children:o?i.jsx(C,{i18nKey:o.id,children:o.defaultValue}):i.jsx(C,{i18nKey:"form.accept",children:"Accept"})}),i.jsx(A.Button,{onClick:n,children:a?i.jsx(C,{i18nKey:a.id,children:a.defaultValue}):i.jsx(C,{i18nKey:"form.cancel",children:"Cancel"})})]}),width:600})}function zt(t){return class extends Z.Component{constructor(){super(...arguments),this.state={show:!1},this.prompt=(s,n,r,a,o)=>new Promise(l=>{this.setState({show:!0,promptElement:i.jsx(Zt,{title:s,message:n,onAccept:c=>{this.setState({show:!1}),l(c)},onCancel:()=>{this.setState({show:!1})},inputPlaceholder:r,acceptButtonLabel:a,cancelButtonLabel:o},"1")})})}render(){return[p.createElement(t,{...this.props,prompt:this.prompt,key:"0"}),this.state.show?this.state.promptElement:null]}}}const Ce=t=>!!(t.metaKey||t.altKey||t.ctrlKey||t.shiftKey);function qt({to:t,confirm:e,className:s,title:n,children:r,keyboardShortcut:a,...o}){const l=O.useHistory(),{t:c}=V(),u=p.useCallback(()=>{e?e().then(f=>l.push(f||t)).catch(()=>{}):l.push(t)},[e,l,t]),d=p.useCallback(f=>{a&&f.key===a&&!Ce(f)&&f.target.tagName&&!["INPUT","SELECT","TEXTAREA"].includes(f.target.tagName)&&(f.preventDefault(),u())},[a,u]);p.useEffect(()=>{if(a)return window.addEventListener("keydown",d),()=>{window.removeEventListener("keydown",d)}},[a,d]);const h=f=>{f.button===0&&!Ce(f)&&(f.preventDefault(),u())},g=l.createHref(typeof t=="string"?{pathname:t}:t);return i.jsx("a",{href:g,onClick:h,className:`di route-link ${s||""}`,title:n?c(n.id,{defaultValue:n.defaultValue}):void 0,...o,children:r})}const Qt={info:"#ffffff",success:"#cce0cc",warning:"#fed254",error:"#d66961"};function $t({type:t="info",hideable:e=!1,className:s,icon:n,message:r,children:a}){const[o,l]=p.useState(!0),{t:c}=V();function u(){if(typeof r!="string"){const{id:h,defaultValue:g,...f}=r;return c(h,{...f,defaultValue:g})}return r}const d=u();return o?i.jsxs("div",{className:`infobox ${s||""}`,children:[i.jsxs("div",{className:"infobox-header",style:{backgroundColor:Qt[t]},children:[i.jsxs("div",{className:"infobox-header-content",children:[n&&i.jsx("div",{className:"infobox-iconcontainer",children:i.jsx("img",{src:n,alt:"info-icon",style:{width:16,height:16}})}),i.jsx("div",{className:"infobox-message",children:d})]}),e&&i.jsx("button",{className:"infobox-closebutton",onClick:()=>l(!1),children:i.jsx(A.Icon,{del:!0,large:!0})})]}),a]}):null}const oe=Object.freeze({Translate:{toString(t){if(!t)return;const{x:e,y:s}=t;return"translate3d("+(e?Math.round(e):0)+"px, "+(s?Math.round(s):0)+"px, 0)"}},Scale:{toString(t){if(!t)return;const{scaleX:e,scaleY:s}=t;return"scaleX("+e+") scaleY("+s+")"}},Transform:{toString(t){if(t)return[oe.Translate.toString(t),oe.Scale.toString(t)].join(" ")}},Transition:{toString(t){let{property:e,duration:s,easing:n}=t;return e+" "+s+"ms "+n}}});function ie(t,e){const s=t.endsWith("/")?"":"/";return`${t}${s}${e}`}const Jt=({id:t,to:e,className:s,title:n,children:r,draggingDisabled:a})=>{const{attributes:o,listeners:l,setNodeRef:c,transform:u,transition:d}=K.useSortable({id:t,disabled:a,strategy:K.horizontalListSortingStrategy}),h={transform:u?oe.Transform.toString({...u,scaleX:1}):void 0,transition:d},{pathname:g}=O.useLocation();return g.endsWith(e.toString())?i.jsx("button",{"data-testid":"tab-button",className:P("tab-header item active",s),title:n,ref:c,style:h,type:"button",...o,...l,children:r}):i.jsx(O.Link,{"data-testid":"tab-button",to:e,title:n,className:P("tab-header item",s),ref:c,style:h,...o,...l,children:r})};function Kt({pages:t,onOrderChange:e,basePath:s,...n}){const[r,a]=p.useState(!1),{pathname:o,state:l}=O.useLocation();function c(){const d=o.split("/").reverse()[0];return t.some(h=>h.path===d)?o.substring(0,o.lastIndexOf("/")):o}function u(d){a(!1);const{active:h,over:g}=d;if(h.id!==g?.id&&e){const f=t.findIndex(x=>x.path===h.id),m=t.findIndex(x=>x.path===g?.id);e(f,m)}}return i.jsxs("div",{className:r?"draggable-area":"",children:[i.jsx(xe.DndContext,{collisionDetection:xe.closestCenter,onDragEnd:u,onDragStart:()=>a(!0),modifiers:[lt.restrictToHorizontalAxis],children:i.jsx("div",{className:"di tabs",children:i.jsx(K.SortableContext,{items:t.map(d=>({...d,id:d.path})),strategy:K.horizontalListSortingStrategy,children:t.map(({path:d,renderHeading:h,headingTitle:g,draggingDisabled:f,disabled:m})=>i.jsx(Jt,{id:d,to:ie(s||c(),d),title:g,draggingDisabled:m||f||!e||!r&&!o.endsWith(d),children:h(n)},d))})})}),i.jsxs(O.Switch,{children:[t.map(({renderBody:d,path:h})=>i.jsx(O.Route,{path:ie(s||c(),h),render:()=>d(n)},h)),i.jsx(O.Route,{children:i.jsx(O.Redirect,{to:{pathname:ie(s||c(),t[0].path),state:l}})})]})]})}const Xt="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAMZJREFUeNpi/P//PwMtARMDjcHQt4ABGgchQPwKxMWBzwKxKFlmQy14g8dwGL5MqiXIFvynEgb5VJmWFoDwImQLWNB8pQ/EjyiM1j/IHHQLPgHxB3ok00dUCKpnuCzQAmJZKjh+Jy4L3KkUOjgtcKNG/gXi3cg5GRZuGkD8jQrhfwpmNroPbIGYkwo+2IErFXlQKfx3oRd2MK99oELwfIDlL+Qgegul+ang+u0ouRnqg0ACxTWx+CIQKyGbzThaJw+4BQABBgBH38BkTQm7ZwAAAABJRU5ErkJggg==",_t="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAGpJREFUeNpi/P//PwMtARMDjcHQt4ABFAfQeAgH4jcgIRy4gyxzkSzAZzjJlmCz4D+VMMih4TBzGWHJlJGRkZrp9S3QXBGwuTSyAOR6xtF8MGrBqAUDYMFbahYV5BTXlBV2o5E8YBYABBgAxQJ9mxTaZMQAAAAASUVORK5CYII=",es="data:image/svg+xml,%3csvg%20version='1.1'%20id='Layer_1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20x='0px'%20y='0px'%20width='24px'%20height='24px'%20viewBox='0%200%2024%2024'%20style='enable-background:new%200%200%2050%2050;'%20xml:space='preserve'%3e%3crect%20x='0'%20y='0'%20width='5'%20height='10'%20fill='%23000'%3e%3canimateTransform%20attributeType='xml'%20attributeName='transform'%20type='translate'%20values='0%200;%200%2014;%200%200'%20begin='0'%20dur='0.6s'%20repeatCount='indefinite'%20/%3e%3c/rect%3e%3crect%20x='9'%20y='0'%20width='5'%20height='10'%20fill='%23000'%3e%3canimateTransform%20attributeType='xml'%20attributeName='transform'%20type='translate'%20values='0%200;%200%2014;%200%200'%20begin='0.2s'%20dur='0.6s'%20repeatCount='indefinite'%20/%3e%3c/rect%3e%3crect%20x='19'%20y='0'%20width='5'%20height='10'%20fill='%23000'%3e%3canimateTransform%20attributeType='xml'%20attributeName='transform'%20type='translate'%20values='0%200;%200%2014;%200%200'%20begin='0.4s'%20dur='0.6s'%20repeatCount='indefinite'%20/%3e%3c/rect%3e%3c/svg%3e",ts="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjIwNDI3RTg2NEQxQjExRTc4OEM3RTkwQjYwNjA2OTk5IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjIwNDI3RTg3NEQxQjExRTc4OEM3RTkwQjYwNjA2OTk5Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MjA0MjdFODQ0RDFCMTFFNzg4QzdFOTBCNjA2MDY5OTkiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MjA0MjdFODU0RDFCMTFFNzg4QzdFOTBCNjA2MDY5OTkiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5FrZPxAAAA5UlEQVR42qzTvQ7BUBTA8UpEYraJWAwSNVgMHsDIZvUEngWDisTiBTyA4A3EJEiMYrBJGBBf/yO3UlVNq07y63Cbc3rvuaea9hkZ1LHAUZmrtYzmEhG0cMX9C3nXQdQpeeiSaDdSOa8wfCSbWmayjssPBSRHD/EoqzMtscEeN8SQQwVVhB361pRHDX1VYGf5whZjlJDHymEXclPaycN2e4hjYFs/eS0gJkiibVmT4z634bVxaxRQxBQzKdDw2X0Zpi7SSEiBbIBrTAUZJOOvoxz4Z7KGriZMBuuMg+p2U/XrLR4CDACHu7RW+98pzwAAAABJRU5ErkJggg==";var D=(t=>(t.ALL="all",t.SOME="some",t.NONE="none",t))(D||{});const ss=({lastChild:t})=>i.jsxs("div",{className:"skeleton",children:[i.jsx("div",{className:"skeleton-cell top"}),i.jsx("div",{className:"skeleton-cell bottom",style:{visibility:t?"hidden":"initial"}})]}),ns=({node:t,leafNode:e,expanded:s,isLoading:n,onExpand:r})=>{let a;return e?a=t.image||ts:n?a=es:s?a=t.expandedImage||Xt:a=t.closedImage||_t,i.jsx("div",{className:"icon-container",children:i.jsx("img",{src:a,alt:"node",onClick:r})})};class is extends Z.PureComponent{constructor(){super(...arguments),this.onSelect=e=>{const{onSelect:s,selectionState:n}=this.props;s(n===D.SOME?!1:e.currentTarget.checked)},this.onLabelClick=()=>{const{onSelect:e,selectionState:s}=this.props;e(s===D.SOME?!1:this.inputRef?!this.inputRef.checked:!1)}}componentDidMount(){this.updateSelectionState()}componentDidUpdate(){this.updateSelectionState()}updateSelectionState(){const{selectionState:e}=this.props;this.inputRef&&(this.inputRef.indeterminate=e===D.SOME)}render(){const{node:e,node:{name:s},leafNode:n,expanded:r,isLastChild:a,onExpand:o,selectionState:l,isLoading:c}=this.props,u=l===D.ALL;return i.jsxs("div",{className:`node-info ${u?"selected":""}`,children:[a!==void 0&&i.jsx(ss,{lastChild:a}),i.jsx(ns,{node:e,leafNode:n,expanded:r,isLoading:c,onExpand:o}),i.jsx("input",{ref:d=>{this.inputRef=d},type:"checkbox",checked:l===D.ALL,onChange:this.onSelect}),i.jsx("div",{className:"name",onClick:this.onLabelClick,children:s})]})}}class pe extends p.Component{constructor(){super(...arguments),this.state={expanded:!1,selectionState:this.getSelectionState(),isLoading:!1},this.toggleExpand=()=>{const{node:e,lazyLoadingFunction:s}=this.props;e.lazyLoadable?this.setState({isLoading:!0},()=>{s(e).then(()=>this.setState({expanded:!0,isLoading:!1}))}):this.setState({expanded:!this.state.expanded})},this.onSelect=e=>{const{node:s,selectNodes:n,deselectNodes:r,selectedNodes:a}=this.props;if(e){const o=X(s).filter(l=>!a.includes(l.id));n(o)}else{const o=X(s).filter(l=>a.includes(l.id));r(o)}}}shouldComponentUpdate(e,s){const{selectedNodes:n,treeSize:r}=e,{expanded:a,selectionState:o,isLoading:l}=s,{selectedNodes:c,node:u,treeSize:d}=this.props,{expanded:h,selectionState:g,isLoading:f}=this.state;return l!==f||r!==d?!0:this.isLeaf()?n.includes(u.id)&&!c.includes(u.id)||!n.includes(u.id)&&c.includes(u.id)||o!==g:n.length!==c.length||a!==h||o!==g}componentDidMount(){this.setState({selectionState:this.getSelectionState()})}componentDidUpdate(){this.setState({selectionState:this.getSelectionState()})}isLeaf(){const{node:e}=this.props;return e.children===void 0}getSelectionState(){const{node:e,selectedNodes:s}=this.props;if(this.isLeaf())return s.includes(e.id)?D.ALL:D.NONE;{const n=Mt(e),r=Et(n,s);return r.length===n.length&&n.length!==0?D.ALL:r.length===0?D.NONE:D.SOME}}render(){const{node:e,isLastChild:s,...n}=this.props,{expanded:r,selectionState:a,isLoading:o}=this.state;return i.jsxs("div",{className:"node",children:[i.jsx(is,{node:e,displayName:e.name,leafNode:this.isLeaf(),expanded:r,isLastChild:s,onExpand:this.toggleExpand,onSelect:this.onSelect,isLoading:o,selectionState:a}),r&&e.children&&e.children.map((l,c)=>p.createElement(pe,{...n,key:c,node:l,isLastChild:c===(e.children||[]).length-1}))]})}}class rs extends p.Component{constructor(){super(...arguments),this.state={treeData:this.props.treeData,tree:{id:"virtualRootNode",name:"",children:[],path:"/",originalNode:{}},treeSize:0,selectedNodes:this.props.selectedNodes||[]},this.convert=Tt(this.props.dataSetConfig),this.selectNodes=e=>{const{onSelect:s}=this.props,{selectedNodes:n}=this.state;this.setState({selectedNodes:kt(n,e.map(({id:r})=>r))}),s(e.map(({originalNode:r,path:a})=>({...r,$$path:a})))},this.deselectNodes=e=>{const{onDeselect:s}=this.props,{selectedNodes:n}=this.state;this.setState({selectedNodes:Rt(n,e.map(({id:r})=>r))}),s(e.map(({originalNode:r,path:a})=>({...r,$$path:a})))},this.addTreeData=(e,s)=>{const{tree:n}=this.state,r=this.convert(e,s.path),a={id:"virtualRootNode",name:"",children:(n.children||[]).map(l=>Fe(l,s.id,{lazyLoadable:!1,children:r})),path:"/",originalNode:{}},o=ae(a);this.setState({tree:a,treeSize:o})},this.lazyLoadingFunction=e=>{const{lazyLoadingFunction:s}=this.props;return s?s(e.originalNode).then(n=>{this.addTreeData(n,e)}).catch(()=>Promise.resolve()):Promise.resolve()}}componentDidMount(){const{treeData:e}=this.props,s=this.initTree(e),n=ae(s);this.setState({tree:s,treeSize:n})}componentDidUpdate(e){const{selectedNodes:s}=e,{selectedNodes:n}=this.props;n&&s&&s.length!==n.length&&this.setState({selectedNodes:n})}initTree(e){return{id:"virtualRootNode",name:"",children:this.convert(e),path:"/",originalNode:{}}}render(){const{tree:e,selectedNodes:s,treeSize:n}=this.state;return i.jsx("div",{className:"treeview",children:e.children&&e.children.map((r,a)=>i.jsx(pe,{node:r,selectedNodes:s,selectNodes:this.selectNodes,deselectNodes:this.deselectNodes,treeSize:n,lazyLoadingFunction:this.lazyLoadingFunction},a))})}}const as="data:image/svg+xml,%3csvg%20id='Layer_1'%20data-name='Layer%201'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3e%3ccircle%20cx='7.5'%20cy='3.5'%20r='1.5'/%3e%3ccircle%20cx='7.5'%20cy='7.5'%20r='1.5'/%3e%3ccircle%20cx='7.5'%20cy='11.5'%20r='1.5'/%3e%3c/svg%3e",We=Z.createContext({toggleMenu:()=>{}});function Ze({menuButton:t,children:e,direction:s,className:n,open:r,onOpenChange:a}){const[o,l]=p.useState(!1),c=()=>{l(!o)};return i.jsx("span",{children:i.jsx(A.Popup,{open:r??o,onOpenChange:a??l,handler:t,placement:s,className:n,children:i.jsx("div",{className:"di multimenu",children:i.jsx("div",{className:`drop ${s||"bottom"} ${o?"show":""}`,children:i.jsx(We.Provider,{value:{toggleMenu:c},children:e})})})})})}const os=[5,10,15,20,50];function ze({onChangePage:t,page:e,totalPages:s,onChangeSize:n,size:r}){const a=p.useRef(null),{current:o}=a,[l,c]=p.useState(`${e+1}`),[u,d]=p.useState(!1);p.useEffect(()=>{a.current=T.debounce(t,500)},[t]),p.useEffect(()=>{c(`${e+1}`)},[e]);function h(){t(0)}function g(){e>0&&t(e-1)}function f(){e<s-1&&t(e+1)}function m(){t(s-1)}function x(w){if(n){const I=parseInt(w.target.value,10);n(I),d(!1)}}function y(w){const I=w.target.value;if(I.trim()===""){c(I);return}const N=Number(w.target.value);!Number.isNaN(N)&&N>=1&&N<=s&&(o?.(N-1),c(I))}function v(){c(`${e+1}`)}const j=e>=s-1;return i.jsx("div",{className:"di pagination-holder",children:i.jsxs("div",{className:"di pagination",children:[i.jsx("span",{className:`prev ${e===0?"disabled":""}`,onClick:h,children:"«"}),i.jsx("span",{className:`prev ${e===0?"disabled":""}`,onClick:g,children:"‹"}),i.jsxs("span",{className:"info",children:[i.jsx(C,{i18nKey:"reactable.pagination.page",children:"Page"}),i.jsx("input",{value:l,onChange:y,onBlur:v}),typeof process<"u"&&process?.env?.STORYBOOK_MODE?i.jsxs(i.Fragment,{children:["of   ",s]}):i.jsxs(C,{i18nKey:"reactable.pagination.ofTotal",children:[" of   ",{totalPages:s}]})]}),i.jsx("span",{className:`next ${j?"disabled":""}`,onClick:f,children:"›"}),i.jsx("span",{className:`next ${j?"disabled":""}`,onClick:m,children:"»"}),n&&i.jsx("div",{className:"options",children:i.jsx(Ze,{direction:"left",open:u,onOpenChange:d,menuButton:i.jsx(A.Button,{naked:!0,title:{id:"trend.settings.buttonTitle",defaultValue:"Settings"},children:i.jsx("img",{src:as,alt:"settings icon",style:{width:16,height:16}})}),children:i.jsxs("div",{className:"di form",style:{width:200,padding:10},children:[i.jsxs("div",{className:"field",children:[i.jsx("label",{children:i.jsx(C,{i18nKey:"reactable.pagination.entriesPerPage",children:"Entries per page"})}),i.jsx("select",{onChange:x,value:r,children:os.map(w=>i.jsx("option",{value:w,children:w},w))})]}),i.jsx("p",{children:i.jsx(C,{i18nKey:"reactable.pagination.changePageWillBeStored",children:"Your changes will be stored for view."})})]})})})]})})}const ls=t=>t.filterable?.initialValue??"",cs=({columnDef:t,changeFilter:e})=>{const{t:s}=V(),[n,r]=p.useState(ls(t)),a=o=>{const l=o.target.value;r(l),e(t.name,l)};return i.jsx("input",{type:"text",placeholder:s(`${t.filterable?.placeholder??"reactable.filter.placeholder"}`,{defaultValue:"Filter..."}),onChange:a,value:n})};function ds(t,e,s){if(!t)return null;const{page:n,size:r,sort:a}=e;return{content:(s?s(t,a,Ae):Ae(t,a)).slice(n*r,(n+1)*r),totalElements:t.length,totalPages:Math.ceil(t.length/r),number:n,size:r,sort:[a]}}const us=(t,e)=>t==="text"?(s,n)=>s[e]&&s[e].toString().toLowerCase().includes(n.toLowerCase()):(s,n)=>s[e]===n;function we(t,e,s){return t?t.filter(n=>Object.keys(s).every(r=>{const a=s[r];if(a&&a.length>0){const o=hs(r,e);return o.filterable?(o.filterable.filterFn||us(o.filterable.filterType,o.name))(n,a):!1}return!0})):null}function hs(t,e){const s=e.find(n=>n.name===t);if(!s)throw Error(`column definition not found for ${t}`);return s}function Ae(t,e){return t.sort((s,n)=>{const r=typeof s=="object"&&s?.[e.property]||0,a=typeof n=="object"&&n?.[e.property]||0,o=e.direction==="ASC"?1:-1;return r===a?0:typeof r=="string"&&typeof a=="string"?r.localeCompare(a)*o:typeof r=="number"&&typeof a=="number"?(r-a)*o:r.toString().localeCompare(a.toString())*o})}function ps(t,e,s,n,r,a){return[{name:"checkbox",label:i.jsx(A.Checkbox,{value:n,onChange:s,title:{id:"components.filtertable.selectAllItems",defaultValue:"Select/deselect all items in search result"}}),sortable:!1,render:o=>i.jsx(A.Checkbox,{value:r.includes(a(o)),onChange:l=>e(l,o)}),width:"1%"},...t]}function fe(t,e){return`${t||"unnamedTable"}-${e}`}function fs(t,e){if(!e)return T.orderBy(t,"label","asc");if(t.every(s=>!s.options))return[...t].sort(e);if(t.every(s=>s.options))return t.map(n=>({...n,options:[...n.options].sort(e)}));throw new Error("Mixing groups with single options not allowed")}class qe extends p.Component{constructor(){super(...arguments),this.state={options:[],inputValue:null},this.selectRef=p.createRef(),this.portalRoot=null,this.updateOptions=()=>{const{options:e,specialOptions:s,compareOptions:n}=this.props,r=fs(e,n);s?this.setState({options:[...r,...s]}):this.setState({options:r})},this.filterOption=(e,s)=>e.label.toString().toLowerCase().startsWith(s.toLowerCase()),this.getContainerClasses=()=>{const{specialOptions:e}=this.props;return e?["select-search-container","special"]:["select-search-container"]}}componentDidMount(){if(this.updateOptions(),this.props["data-testid"]&&this.selectRef&&this.selectRef.current&&this.selectRef.current.controlRef.setAttribute("data-testid",this.props["data-testid"]),this.props.menuPortalTarget){this.portalRoot=document.createElement("div");const e=this.getContainerClasses();this.portalRoot.classList.add(...e),this.props.menuPortalTarget.appendChild(this.portalRoot)}}componentDidUpdate(e){(!T.isEqual(e.options,this.props.options)||e.freeForm!==this.props.freeForm)&&this.updateOptions()}componentWillUnmount(){this.props.menuPortalTarget&&this.portalRoot&&this.props.menuPortalTarget.removeChild(this.portalRoot)}render(){const{noResultsMessage:e,placeholder:s,value:n,onChange:r,clearable:a,loading:o,disabled:l}=this.props,{options:c}=this.state;return i.jsx(ct,{ref:this.selectRef,joinValues:!0,name:"form-field-name",className:this.getContainerClasses().join(" "),classNamePrefix:"select-search",isClearable:a,noOptionsMessage:e?()=>e:void 0,options:c,value:n||null,onChange:r,onInputChange:u=>{this.props.freeForm&&u&&this.setState({inputValue:u})},placeholder:s,filterOption:this.filterOption,isLoading:o,menuPortalTarget:this.portalRoot,isDisabled:l,onBlur:()=>{this.props.freeForm&&this.state.inputValue!==null&&(this.setState({options:this.props.options}),this.setState({inputValue:this.state.inputValue},()=>{const u={type:"item",value:this.state.inputValue,label:this.state.inputValue};this.setState(d=>({options:[u,...d.options]})),this.state.inputValue=null,r(u)}))}})}}const gs=({columnDefs:t,onFilter:e,tableName:s})=>{const{t:n}=V(),[r,a]=p.useState({}),o=p.useRef(e);p.useEffect(()=>{o.current=e},[e]),p.useEffect(()=>{a(h=>{const g={};for(const v of t)g[v.name]=h[v.name]!==void 0?h[v.name]:v.filterable?.initialValue??"";const f=Object.keys(h),m=Object.keys(g),x=m.length===f.length&&m.every(v=>f.includes(v)),y=x&&m.every(v=>g[v]===h[v]);return x&&y?h:(Object.values(g).some(v=>v)&&o.current(g),g)})},[t]);const l=(h,g)=>{const f={...r,[h]:g};a(f),e(f)},c=h=>{if(h.filterable)switch(h.filterable.filterType){case"text":return u(h);case"options":return d(h);default:throw new Error(`Filter type ${h.filterable.filterType} not supported`)}return null},u=h=>i.jsx(cs,{columnDef:h,changeFilter:l}),d=h=>{if(!h.filterable?.filterOptions)throw new Error(`No filterOptions found for column type: options on columnDef: ${h.name}`);const g=h.filterable.filterOptions;if(h.filterable.searchableOptions){const f=g.map(x=>({type:"item",label:typeof x.label=="string"?x.label:n(x.label.id,{defaultValue:x.label.defaultValue}),value:x.value})),m=r[h.name];return i.jsx(qe,{options:f,onChange:x=>{l(h.name,x?.value)},value:m?f.find(x=>x.value===m.toString()):null,clearable:!0})}else return i.jsxs("select",{onChange:f=>{l(h.name,f.target.value)},value:r[h.name],children:[i.jsx("option",{value:"",children:n("reactable.filter.all",{defaultValue:"- All -"})},""),g.map(f=>i.jsx("option",{className:fe(s,h.name),value:f.value,children:typeof f.label=="string"?f.label:n(f.label.id,{defaultValue:f.label.defaultValue})},f.value))]})};return i.jsx("tr",{className:"di filterrow form",children:t.map(h=>i.jsx("td",{style:{textAlign:h.align||"left"},children:c(h)},h.name))})},ms=t=>t==="ASC"?"DESC":"ASC";class xs extends p.Component{constructor(){super(...arguments),this.handleSort=e=>{const{paginationSettings:s,onSort:n}=this.props,r=e.name===s.sort.property?ms(s.sort.direction):e.defaultSortDirection||"ASC";n(e.name,r)},this.getClassName=e=>{const{paginationSettings:s,tableName:n}=this.props,r=fe(n,e.name);return e.sortable?e.name===s.sort.property?s.sort.direction==="ASC"?`${r} sortable sortAsc`:`${r} sortable sortDes`:`${r} sortable`:`${r}`},this.printLabel=e=>vs(e)?i.jsx(C,{i18nKey:e.id,children:e.defaultValue}):e}render(){return i.jsx("tr",{children:this.props.columnDefs.map(e=>i.jsx("th",{style:{width:e.width||"auto",textAlign:e.align||"left"},className:this.getClassName(e),onClick:()=>{e.sortable&&this.handleSort(e)},children:this.printLabel(e.label)},e.name))})}}function vs(t){return typeof t=="object"&&t!=null&&"id"in t&&t.id!==void 0}class Ss extends p.Component{constructor(){super(...arguments),this.getRowClass=()=>{const{rowDef:e,item:s}=this.props;return e&&typeof e.getRowClass=="function"?e.getRowClass(s):""},this.handleClick=()=>{const{rowDef:e,item:s}=this.props;e&&typeof e.onClick=="function"&&e.onClick(s)},this.getTooltip=()=>{const{rowDef:e,item:s}=this.props;return e&&typeof e.getTooltip=="function"?e.getTooltip(s):""},this.getRowStyle=()=>{const{rowDef:e,item:s}=this.props;if(e&&e.getRowStyle)return e.getRowStyle(s)}}render(){const{columnDefs:e,item:s,tableName:n}=this.props;return i.jsx("tr",{className:this.getRowClass(),onClick:this.handleClick,title:this.getTooltip(),style:this.getRowStyle(),children:e.map(r=>{const a=r.align||"left",o=r.onClick?"pointer":"inherit",l=r.whiteSpace||void 0,c=r.onClick?()=>r.onClick?r.onClick(s):void 0:void 0;return i.jsx("td",{style:{textAlign:a,cursor:o,whiteSpace:l},onClick:c,className:fe(n,r.name),children:r.render(s)},`${s.id}_${r.name}`)})})}}function bs({columnDefs:t,uniqueItemKey:e,paginationSettings:s,onSort:n,onFilter:r,tableName:a,pageable:o,isLoading:l,rowDef:c,clickable:u,messageWhenEmpty:d,"data-testid":h}){const g=p.useRef(null),f=p.useRef(null),[m,x]=p.useState(!1),[y,v]=p.useState(!0),[j,w]=p.useState(!1),I="uiConfigurations/nevershowscrollingadvice",N="reactable.neverShowScrollingAdvice",R=p.useRef(y);p.useEffect(()=>{R.current=y},[y]);const M=()=>{g.current&&f.current&&x(!R.current&&f.current.scrollWidth>g.current.offsetWidth)};p.useEffect(()=>{setTimeout(()=>{(async()=>{const k=localStorage.getItem(N),H=k!==null;try{const B=await ve.readAccountObject(I)===!0;v(B),R.current=B,localStorage.setItem(N,String(B)),B||M()}catch{if(H){const B=k==="true";v(B),R.current=B,B||M()}else v(!1),R.current=!1,M()}w(!0)})()},0)},[]),p.useEffect(()=>(M(),window.addEventListener("resize",M),()=>window.removeEventListener("resize",M)),[o,t]);const b=t.some(k=>k.filterable);return i.jsx(A.SpinnerContainer,{show:l,children:i.jsxs("div",{ref:g,className:"di reactable scroll-x",children:[j&&m&&!l&&i.jsx(A.Modal,{className:"scroll-horizontally-advice",content:i.jsxs("div",{children:[i.jsx(C,{i18nKey:"reactable.scrollHorizontally.advice",children:"SHIFT + mouse wheel to scroll horizontally"}),i.jsxs("div",{className:"scroll-horizontally-advice-buttons",children:[i.jsx(A.Button,{primary:!0,onClick:async()=>{await ve.writeAccountObject(I,!0),localStorage.setItem(N,"true"),v(!0),R.current=!0,x(!1)},children:i.jsx(C,{i18nKey:"reactable.scrollHorizontally.neverShowAgain",children:"Never show again"})}),i.jsx(A.Button,{onClick:()=>x(!1),children:i.jsx(C,{i18nKey:"reactable.scrollHorizontally.ok",children:"OK"})})]})]}),width:"40%"}),i.jsxs("table",{ref:f,className:P("di reactable sortable hoverable",{selectable:u}),"data-testid":h,children:[i.jsx("thead",{children:i.jsx(xs,{columnDefs:t,paginationSettings:s,onSort:n,tableName:a})}),i.jsxs("tbody",{children:[r&&b&&i.jsx(gs,{columnDefs:t,onFilter:r,tableName:a}),o?.content.length?o.content.slice(0,s.size).map(k=>i.jsx(Ss,{columnDefs:t,item:k,rowDef:c,tableName:a},e(k))):!l&&i.jsx("tr",{children:i.jsx("td",{colSpan:t.length,children:i.jsx(C,{i18nKey:d??"reactable.noEntriesFound",children:"No entries found"})})})]})]})]})})}class Qe extends p.Component{componentDidUpdate(){const{pageable:e,paginationSettings:s,onChangePage:n}=this.props;if(!e)return;const r=e.totalPages||0,a=s.page,o=r>0?Math.min(a,r-1):0;a!==o&&n(o)}render(){const{paginationSettings:e,pageable:s,onChangePage:n,onChangeSize:r}=this.props,a=r?s&&s.totalElements>0:s&&s.totalPages>1;return i.jsxs("div",{children:[i.jsx(bs,{...this.props}),s&&a&&i.jsx(ze,{page:e.page,totalPages:s.totalPages,onChangePage:n,onChangeSize:r,size:e.size})]})}}const Ne={page:0,size:15,sort:{property:"name",direction:"DESC"}};class ys extends p.Component{constructor(e){super(e),this.content=[],this.calculatePageNumber=(n,r)=>{const{forceResetPaginationOnItemsChange:a}=this.props;if(a)this.handleChangePage(0);else{const o=Math.floor((n.length-1)/r.size);o<=0?this.handleChangePage(0):o<r.page&&this.handleChangePage(o)}},this.handleChangePage=n=>{this.setState({paginationSettings:{...this.state.paginationSettings,page:n}})},this.handleSort=(n,r)=>{this.setState({paginationSettings:{...this.state.paginationSettings,sort:{property:n,direction:r}}})},this.handleFilter=n=>{const{items:r,onFilter:a,columnDefs:o,onFilteredItemsChanged:l}=this.props;this.setState({paginationSettings:{...this.state.paginationSettings,page:0},filterSettings:n},()=>{a&&a(n);const c=we(r,o,n);this.setState({filteredItems:c}),c&&l?.(c)})},this.getPageable=()=>{const{customSortFunction:n,items:r,columnDefs:a,onContentChange:o}=this.props,{filterSettings:l,paginationSettings:c}=this.state,u=we(r,a,l),d=ds(u,c,n);return d&&d.content&&!T.isEqual(d.content,this.content)&&(this.content=d.content,o&&o(this.content)),d},this.handleSelectChange=(n,r)=>{const{onSelectedItemsChange:a,selectedItems:o=[],uniqueItemKey:l}=this.props;if(a)if(n){const c=o.concat(l(r));a(c)}else a(o.filter(c=>c!==l(r)));else console.warn("ReactableWithClientSidePagination: onSelectedItemsChange property is missing")},this.handleSelectAllChange=n=>{const{onSelectedItemsChange:r,items:a,selectedItems:o=[],uniqueItemKey:l}=this.props,{filteredItems:c}=this.state,u=(c||a||[]).map(l);r?r(n?T.uniqWith([...o,...u],T.isEqual).sort():T.difference(o,u)):console.warn("ReactableWithClientSidePagination: onSelectedItemsChange property is missing")},this.areSelectedAll=()=>{const{items:n,selectedItems:r,uniqueItemKey:a}=this.props,{filteredItems:o}=this.state;return!!r&&(o||n||[]).every(c=>r.some(u=>u===a(c)))};let s=Ne;e.paginationSettings?s=e.paginationSettings:e.initialPaginationSettings?(console.warn('initialPaginationSettings is deprecated! Please use "paginationSettings" instead'),s=e.initialPaginationSettings):console.error("Missing pagination settings!"),this.state={paginationSettings:s||Ne,filterSettings:{},filteredItems:null}}componentDidUpdate(e){const{items:s}=this.props,{items:n}=e,r=this.props.paginationSettings||this.props.initialPaginationSettings,a=e.paginationSettings||e.initialPaginationSettings;s&&n&&s.length!==n.length&&this.calculatePageNumber(s,this.state.paginationSettings),r&&!T.isEqual(r,a)&&this.setState({paginationSettings:r},()=>this.handleChangePage(0))}render(){const{uniqueItemKey:e,isLoading:s,columnDefs:n,rowDef:r,tableName:a,clickable:o,selectable:l,selectedItems:c,onChangeSize:u}=this.props,d=l?ps(n,this.handleSelectChange,this.handleSelectAllChange,this.areSelectedAll(),c||[],e):n;return i.jsx(Qe,{columnDefs:d,rowDef:r,uniqueItemKey:e,paginationSettings:this.state.paginationSettings,onChangePage:this.handleChangePage,onChangeSize:u,onSort:this.handleSort,onFilter:this.handleFilter,tableName:a,pageable:this.getPageable(),isLoading:s,clickable:o,"data-testid":this.props["data-testid"]})}}const W=class W extends Z.Component{constructor(){super(...arguments),this.state={files:[]},this.handleDrop=(e,s)=>{!this.props.multiple&&e.length>1||s.length>0||setTimeout(()=>this.selectFile(e),100)},this.selectFile=e=>{const{onSelectFile:s,onChange:n}=this.props;e.forEach(a=>{a.preview=URL.createObjectURL(a)});const r=[...this.state.files,...e];this.setState({files:r}),n?.(r),s&&e.forEach(a=>{s(a)})},this.handleRemoveFile=e=>{const{files:s}=this.state;if(e){e.preview&&window.URL.revokeObjectURL(e.preview);const n=s.filter(r=>r!==e);this.setState({files:n}),this.props.onChange?.(n),this.props.onRemoveFile?.(e)}}}render(){const{files:e}=this.state,{accept:s,previewComponent:n,dropHint:r,hoverHint:a,acceptHint:o,rejectHint:l,onChange:c,onRemoveFile:u,onDownloadFile:d,onSelectFile:h,onDropRejected:g,onDropAccepted:f,maxSize:m,multiple:x,...y}=this.props,v=r||W.defaultProps.dropHint,j=a||W.defaultProps.hoverHint,w=o||W.defaultProps.acceptHint,I=l||W.defaultProps.rejectHint;return i.jsxs("div",{...y,className:P("di upload",{clickable:!e.length,hasContent:!!e.length}),children:[!!n&&e.map((N,R)=>i.jsx(n,{file:N,onRemoveFile:()=>this.handleRemoveFile(N),onDownloadFile:d?()=>d(N):void 0},R)),(x||!e.length)&&i.jsx(dt,{accept:s,multiple:x??!1,onDrop:this.handleDrop,onDropRejected:g,onDropAccepted:f,maxSize:m||1/0,children:({getRootProps:N,getInputProps:R,isDragAccept:M,isDragReject:b,isDragActive:k})=>i.jsxs("div",{className:P("drag-drop-text-container",{active:k,accept:M,reject:b}),...N(),children:[i.jsx("input",{...R()}),i.jsx("p",{className:"drag-drop-hint",children:i.jsx(C,{i18nKey:v.id,children:v.defaultValue})}),i.jsx("p",{className:"drag-drop-hover-hint",children:i.jsx(C,{i18nKey:j.id,children:j.defaultValue})}),i.jsx("p",{className:"drag-drop-accept",children:i.jsx(C,{i18nKey:w.id,children:w.defaultValue})}),i.jsx("p",{className:"drag-drop-reject",children:i.jsx(C,{i18nKey:I.id,children:I.defaultValue})})]})})]})}};W.defaultProps={dropHint:{id:"fileUpload.dropHint",defaultValue:"Drop file here, or click to browse ..."},hoverHint:{id:"fileUpload.hoverHint",defaultValue:"Drop file here, or click to browse ..."},acceptHint:{id:"fileUpload.acceptHint",defaultValue:"This file type can be uploaded"},rejectHint:{id:"fileUpload.rejectHint",defaultValue:"This file type cannot be uploaded"}};let _=W;const js=({url:t,imageSize:e,onRemoveFile:s,onDragOver:n,onDownloadFile:r})=>i.jsx("div",{className:"di upload preview-container",onDragOver:n,children:i.jsxs("div",{className:"preview",style:{backgroundImage:`url(${t})`,...e&&{backgroundSize:e}},children:[i.jsx("button",{className:"action-button",onClick:s,"data-testid":"delete-button",children:i.jsx(C,{i18nKey:"imageUpload.remove",children:"Remove"})}),r&&i.jsx("button",{className:"action-button",onClick:r,"data-testid":"download-button",children:i.jsx(C,{i18nKey:"imageUpload.download",children:"Download"})})]})});class Cs extends p.Component{constructor(){super(...arguments),this.state={dragOverPreview:!1,file:null},this.handleDragOver=()=>{this.setState({dragOverPreview:!0})}}componentDidUpdate(e){e.imageUrl!==this.props.imageUrl&&this.setState({dragOverPreview:!1})}render(){const{accept:e,imageUrl:s,imageSize:n,onSelectFile:r,onRemoveFile:a,onDownloadFile:o,...l}=this.props,{dragOverPreview:c,file:u}=this.state;return s&&!c&&u?i.jsx(js,{url:s,imageSize:n,onRemoveFile:()=>a?.(u),onDownloadFile:o?()=>o(u):void 0,onDragOver:this.handleDragOver}):i.jsx(_,{...l,onRemoveFile:d=>{this.setState({file:null}),a?.(d)},onSelectFile:d=>{this.setState({file:d}),r?.(d)},accept:e||{"image/*":[".jpeg",".jpg",".png",".webp"]}})}}const ws="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3NpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDYuMC1jMDAyIDc5LjE2NDQ2MCwgMjAyMC8wNS8xMi0xNjowNDoxNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDplMjI2NGVmOC0xY2Q1LTgyNDQtOWQ5NS0yZDBjNGMxMmZkM2UiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MDhENjczMThERTNEMTFFQUIwNjJCODBDQ0RGM0I4QkEiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MDhENjczMTdERTNEMTFFQUIwNjJCODBDQ0RGM0I4QkEiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjIgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NTcyODQ4NjktNjA0NC0xZjQ2LTg2OWMtMjBlYzMwMTA0MWE2IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOmUyMjY0ZWY4LTFjZDUtODI0NC05ZDk1LTJkMGM0YzEyZmQzZSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PnOjy94AAABySURBVHjapFMJDsAgCFvJ/v/lbkvYEQ4naGIiShtaASS3lSWjRwA8d4/gAutxSLJrsr3/6kKUc0uPKnDgioQS2BKUwY8HBhzFoc+/31ipAF0JkoDY7cQyiWTmzJLADZN2HIwn2dD5Ct5EzBiK1XE+BBgAvZQfJzDjL2UAAAAASUVORK5CYII=",As=({parentPageLink:t,title:e,subPagePathPrefixArray:s,subPagePathPrefix:n,subtitle:r,children:a})=>{const{push:o}=O.useHistory(),{pathname:l}=O.useLocation(),{t:c}=V(),u=()=>{n?o(l.substring(0,l.lastIndexOf(n))):s?s.forEach(h=>{l.includes(h)&&o(l.substring(0,l.lastIndexOf(h)))}):o(l.substring(0,l.lastIndexOf("/")))},d=h=>{if(typeof h=="string")return h;{const{id:g,defaultValue:f}=h;return c(g,{defaultValue:f})}};return i.jsxs("h1",{className:"di header",children:[t&&i.jsx(A.Button,{onClick:u,style:{marginRight:"15px"},children:i.jsx("img",{src:ws,alt:c("general.navigation.goBack",{defaultValue:"Go Back"})})}),i.jsx("span",{children:d(e)}),r&&i.jsx("span",{className:"search-result-count",children:d(r)}),a]})},re=(t,e)=>{try{return S.tz(e,t).format("HH:mm")}catch(s){return console.error("DateTimeInput: Error while extracting time from date",s),"00:00"}},le=p.forwardRef(({timestamp:t,timezone:e,warning:s,readOnly:n=!1,onChange:r,...a},o)=>{const[l,c]=p.useState(re(e,t)),u=l??re(e,t);p.useEffect(()=>{c(re(e,t))},[e,t]);function d(f,m){const x=S.tz(t,e),y=S.tz(f,e).set("hour",x.hour()).set("minute",x.minute()).set("second",x.second()).set("millisecond",x.millisecond());r(y.valueOf(),m)}function h(f,m){if(m){const[x,y]=f.split(":").map(Number),v=S.tz(t,e).set("hours",x).set("minutes",y);r(v.valueOf(),!0)}c(f)}function g(){l&&/^[0-9]:[0-5][0-9]$/.test(l)&&h(l.padStart(5,"0"),!0)}return i.jsxs("span",{className:`di date-time-input ${s?"with-warning":""}`,children:[i.jsx(he,{...a,ref:o,value:t,timezone:e,onChange:d,readOnly:n}),i.jsx(Q,{"data-testid":"time-input",value:u,onChange:h,pattern:/^(([01][0-9])|2[0-3]):[0-5][0-9]$/,required:!0,invalidStyle:{borderColor:"red"},placeholder:"00:00",className:"time",onBlur:g,disabled:n})]})});class Ns extends p.Component{constructor(){super(...arguments),this.state={cache:{},currentItem:null},this.selectRef=p.createRef(),this.transformBackendItemToSelectItem=e=>{const{labelKey:s,valueKey:n}=this.props;return{value:e[n],label:e[s]}},this.reloadItemFromCache=()=>{const{value:e}=this.props,{currentItem:s,cache:n}=this.state;return e&&(!s||s.value!==e)&&n[e]?(this.setState({currentItem:n[e]}),!0):!1},this.addBackendItemToCache=e=>{if(e){const s=this.transformBackendItemToSelectItem(e),n=s.value;this.setState(({cache:r})=>({cache:{...r,[n]:s}}))}},this.fetchOptions=async(e,s)=>{const{searchByQuery:n}=this.props;try{const{content:r,number:a,totalPages:o}=await n(e,s.length);return{options:r.map(this.transformBackendItemToSelectItem),hasMore:a<o-1}}catch(r){return console.error("Error fetching options:",r),{hasMore:!1,options:[]}}},this.handleChange=e=>{const{onChange:s}=this.props;if(e){const n=e.value;this.setState(({cache:r})=>({cache:{...r,[n]:e}}),()=>{s(n)})}else s(null)}}componentDidMount(){const{value:e,searchById:s}=this.props;e&&s(e).then(this.addBackendItemToCache),this.props["data-testid"]&&setTimeout(()=>{this.selectRef?.current?.controlRef&&this.selectRef.current.controlRef.setAttribute("data-testid",this.props["data-testid"])},0)}componentDidUpdate(){const{value:e,searchById:s}=this.props,{currentItem:n}=this.state;e&&(!n||n.value!==e)?this.reloadItemFromCache()||s(e).then(this.addBackendItemToCache):!e&&n&&this.setState({currentItem:null})}render(){const{clearable:e,noResultsMessage:s,disabled:n,menuPortalTarget:r}=this.props,{currentItem:a}=this.state;return i.jsx(ut.AsyncPaginate,{selectRef:this.selectRef,className:"select-search-container",classNamePrefix:"select-search",isClearable:e,noResultsText:s,value:a,onChange:this.handleChange,loadOptions:this.fetchOptions,isDisabled:n,menuPortalTarget:r,placeholder:this.props.placeholder})}}class Is extends Z.PureComponent{constructor(){super(...arguments),this.createClickHandler=e=>()=>{const{onClick:s}=this.props;s&&s(),e()}}render(){const{disabled:e,icon:s,children:n,linkTo:r}=this.props,a=this.props["data-testid"];return i.jsx(We.Consumer,{children:({toggleMenu:o})=>r?i.jsxs(O.Link,{"data-testid":a,to:r,className:`item ${e?"disabled":""}`,onClick:this.createClickHandler(o),children:[s&&i.jsx("span",{className:"item-icon",children:s}),i.jsx("span",{className:"item-text",children:n})]}):i.jsxs("div",{"data-testid":a,className:`item ${e?"disabled":""}`,onClick:this.createClickHandler(o),children:[s&&i.jsx("span",{className:"item-icon",children:s}),i.jsx("span",{className:"item-text",children:n})]})})}}const Ie=3600*1e3;function Rs({period:t,onChange:e,readOnly:s,locale:n,timezone:r}){const[a,o]=p.useState(""),l=p.useRef(void 0),c=p.useRef(null),u=new Date(t.tsStart),d=new Date(t.tsEnd);function h(m){l.current&&clearTimeout(l.current),o(m),l.current=setTimeout(()=>o(""),1e3)}function g(m,x){if(m){const y=t.tsEnd&&m>t.tsEnd,v=y?m+Ie:t.tsEnd,j={tsStart:m,tsEnd:v};T.isEqual(j,t)||e(j),!x&&c.current&&c.current.focus(),y&&h("date-to")}}function f(m){if(m){const x=t.tsStart&&m<t.tsStart,v={tsStart:x?m-Ie:t.tsStart,tsEnd:m};T.isEqual(v,t)||e(v),x&&h("date-from")}}return i.jsxs("span",{className:"inputs",children:[i.jsx("span",{"data-testid":"from-wrapper",children:i.jsx(le,{timestamp:t.tsStart,onChange:g,warning:a==="date-from",selectsStart:!0,startDate:u,endDate:d,readOnly:s,locale:n,timezone:r})}),"  -  ",i.jsx("span",{"data-testid":"to-wrapper",children:i.jsx(le,{ref:c,timestamp:t.tsEnd,onChange:f,warning:a==="date-to",selectsEnd:!0,startDate:u,endDate:d,readOnly:s,locale:n,timezone:r})})]})}class ks extends p.Component{constructor(e){super(e),this.tdMonth=r=>{const{selectedMonth:a,selectedYear:o,displayedYear:l}=this.state;return i.jsx("td",{"data-testid":`month-${r}-button`,onClick:()=>{this.props.onChange(r,l),this.setState({selectedMonth:r,selectedYear:l})},className:P({selected:r===a&&l===o}),children:S(`${o}/${r.toString().padStart(2,"0")}/01`,"YYYY/MM/DD").format("MMM")})};const s=e.month!==null&&e.month!==void 0?e.month:S().month()+1,n=e.year!==null&&e.year!==void 0?e.year:S().year();this.state={selectedMonth:s,selectedYear:n,displayedYear:n}}render(){const{displayedYear:e}=this.state;return i.jsxs("div",{className:"di monthpicker",children:[i.jsxs("div",{className:"pager",children:[i.jsx("span",{className:"page-nav prev",onClick:()=>{this.setState({displayedYear:e-1})}}),i.jsx("span",{className:"page-nav info",children:e}),i.jsx("span",{className:"page-nav next",onClick:()=>{this.setState({displayedYear:e+1})}})]}),i.jsx("div",{className:"months",children:i.jsx("table",{style:{margin:"auto"},children:i.jsxs("tbody",{children:[i.jsxs("tr",{children:[this.tdMonth(1),this.tdMonth(2),this.tdMonth(3)]}),i.jsxs("tr",{children:[this.tdMonth(4),this.tdMonth(5),this.tdMonth(6)]}),i.jsxs("tr",{children:[this.tdMonth(7),this.tdMonth(8),this.tdMonth(9)]}),i.jsxs("tr",{children:[this.tdMonth(10),this.tdMonth(11),this.tdMonth(12)]})]})})})]})}}const Es="data:image/svg+xml,%3csvg%20id='Layer_1'%20data-name='Layer%201'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3e%3cdefs%3e%3cstyle%3e%20.cls-1%20{%20fill:%20%23fff;%20}%20%3c/style%3e%3c/defs%3e%3cg%3e%3cg%3e%3crect%20class='cls-1'%20x='3.5'%20y='7.5'%20width='2'%20height='2'/%3e%3cpath%20d='M5,8V9H4V8H5M6,7H3v3H6V7Z'/%3e%3c/g%3e%3cg%3e%3crect%20class='cls-1'%20x='8'%20y='7'%20width='1'%20height='1'/%3e%3cpolygon%20points='9%207%208%207%208%208%209%208%209%207%209%207'/%3e%3c/g%3e%3cg%3e%3crect%20class='cls-1'%20x='10'%20y='7'%20width='1'%20height='1'/%3e%3cpolygon%20points='11%207%2010%207%2010%208%2011%208%2011%207%2011%207'/%3e%3c/g%3e%3cg%3e%3crect%20class='cls-1'%20x='12'%20y='7'%20width='1'%20height='1'/%3e%3cpolygon%20points='13%207%2012%207%2012%208%2013%208%2013%207%2013%207'/%3e%3c/g%3e%3cg%3e%3crect%20class='cls-1'%20x='8'%20y='9'%20width='1'%20height='1'/%3e%3cpolygon%20points='9%209%208%209%208%2010%209%2010%209%209%209%209'/%3e%3c/g%3e%3cg%3e%3crect%20class='cls-1'%20x='8'%20y='11'%20width='1'%20height='1'/%3e%3cpolygon%20points='9%2011%208%2011%208%2012%209%2012%209%2011%209%2011'/%3e%3c/g%3e%3cg%3e%3crect%20class='cls-1'%20x='6'%20y='11'%20width='1'%20height='1'/%3e%3cpolygon%20points='7%2011%206%2011%206%2012%207%2012%207%2011%207%2011'/%3e%3c/g%3e%3cg%3e%3crect%20class='cls-1'%20x='4'%20y='11'%20width='1'%20height='1'/%3e%3cpolygon%20points='5%2011%204%2011%204%2012%205%2012%205%2011%205%2011'/%3e%3c/g%3e%3cg%3e%3crect%20class='cls-1'%20x='10.5'%20y='9.5'%20width='2'%20height='2'/%3e%3cpath%20d='M12,10v1H11V10h1m1-1H10v3h3V9Z'/%3e%3c/g%3e%3cpath%20d='M15.31,2H.69A.69.69,0,0,0,0,2.69V14.31A.69.69,0,0,0,.69,15H15.31a.69.69,0,0,0,.69-.69V2.69A.69.69,0,0,0,15.31,2ZM14,13H2V6H14Z'/%3e%3c/g%3e%3crect%20x='3'%20width='3'%20height='2'/%3e%3crect%20x='10'%20width='3'%20height='2'/%3e%3c/svg%3e",Ms="data:image/svg+xml,%3csvg%20id='Layer_1'%20data-name='Layer%201'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3e%3cpolygon%20points='7.5%2010%204%206%2011%206%207.5%2010'/%3e%3c/svg%3e";S.extend(Te);S.extend(Oe);function E(t,e){return t?S.tz(e,t):S(e)}function $e(t){return{tsStart:E(t).startOf("day").valueOf(),tsEnd:E(t).endOf("day").valueOf()}}function Je(t){return{tsStart:E(t).subtract(1,"day").startOf("day").valueOf(),tsEnd:E(t).subtract(1,"day").endOf("day").valueOf()}}function Ke(t){return{tsStart:E(t).startOf("week").valueOf(),tsEnd:E(t).endOf("week").valueOf()}}function Xe(t){return{tsStart:E(t).startOf("month").valueOf(),tsEnd:E(t).endOf("month").valueOf()}}function _e(t,e){return{tsStart:E(e,t).startOf("day").valueOf(),tsEnd:E(e,t).endOf("day").valueOf()}}function et(t,e){return{tsStart:E(e,t).startOf("month").valueOf(),tsEnd:E(e,t).endOf("month").valueOf()}}function ce(t,e){const s=E(e).subtract(t-1,"days").startOf("day").valueOf(),n=S().endOf("day").valueOf();return{tsStart:s,tsEnd:n}}const Ts=1e3*60*60*24;function Os({tsStart:t,tsEnd:e}){return Math.round((e-t+1)/Ts)}function Ds({onChange:t,onShowCustomPeriod:e,periodName:s,timezone:n}){const[r,a]=p.useState(!1),[o,l]=p.useState(!1),[c,u]=p.useState(!1),[d,h]=p.useState(Date.now());function g(j){t(j),a(!1),e&&e(!1)}function f(j){g(_e(j??Date.now(),n)),l(!1),h(j??void 0)}function m(j,w){g(et(S().year(w).month(j-1).valueOf(),n)),u(!1)}function x(){l(!o),u(!1)}function y(){u(!c),l(!1)}function v(){a(!1),e&&e(!0)}return i.jsx("div",{children:i.jsx(A.Popup,{open:r,onOpenChange:a,handler:i.jsx(A.Button,{"data-testid":"time-period-menu-button",title:{id:"trend.calendarMenu.calendar.timePeriod",defaultValue:"Time Period"},children:i.jsxs(i.Fragment,{children:[i.jsx("img",{src:Es,alt:"calendar icon",style:{width:16,height:16}})," ",!!s&&i.jsxs("span",{children:[" ",s," "]}),i.jsx("img",{src:Ms,alt:"triangle down",style:{width:16,height:16}})]})}),children:i.jsx("div",{className:"di multimenu period-picker-multimenu",children:i.jsxs("div",{className:`drop bottom ${r?"show":""}`,children:[i.jsx("div",{className:`left-box ${o?"show":""}`,children:i.jsx(he,{inline:!0,value:d,onChange:f})}),i.jsx("div",{className:`left-box ${c?"show":""}`,children:i.jsx(ks,{onChange:m})}),i.jsxs("div",{className:"right-box",children:[i.jsx("div",{className:"item","data-testid":"today-button",onClick:()=>g($e(n)),children:i.jsx("div",{className:"item-text",children:i.jsx(C,{i18nKey:"trend.calendarMenu.timePeriod.today",children:"Today"})})}),i.jsx("div",{className:"item","data-testid":"yesterday-button",onClick:()=>g(Je(n)),children:i.jsx("div",{className:"item-text",children:i.jsx(C,{i18nKey:"trend.calendarMenu.timePeriod.yesterday",children:"Yesterday"})})}),i.jsxs("div",{className:"item",children:[i.jsx("div",{"data-testid":"last-7-days-button",className:"item-text",onClick:()=>g(ce(7,n)),children:i.jsx(C,{i18nKey:"trend.calendarMenu.timePeriod.lastSevenDays",children:"Last 7 days"})}),i.jsx("div",{className:"item-more icon triangle",children:i.jsx("div",{className:"item-more-submenu",children:[2,3,5,10,14,30].map(j=>i.jsx("div",{className:"subitem",onClick:()=>g(ce(j,n)),children:j},j))})})]}),i.jsx("div",{className:"item","data-testid":"current-week-button",onClick:()=>g(Ke(n)),children:i.jsx("div",{className:"item-text",children:i.jsx(C,{i18nKey:"trend.calendarMenu.timePeriod.currentWeek",children:"Curr. Week"})})}),i.jsx("div",{className:"item","data-testid":"current-month-button",onClick:()=>g(Xe(n)),children:i.jsx("div",{className:"item-text",children:i.jsx(C,{i18nKey:"trend.calendarMenu.timePeriod.currentMonth",children:"Curr. Month"})})}),i.jsx("div",{className:"item","data-testid":"day-button",onClick:x,children:i.jsxs("div",{className:"item-text",children:[i.jsx(C,{i18nKey:"trend.calendarMenu.timePeriod.day",children:"Day"}),i.jsx("div",{className:"item-more icon dots"})]})}),i.jsx("div",{className:"item","data-testid":"month-button",onClick:y,children:i.jsxs("div",{className:"item-text",children:[i.jsx(C,{i18nKey:"trend.calendarMenu.timePeriod.month",children:"Month"}),i.jsx("div",{className:"item-more icon dots"})]})}),e!==void 0&&i.jsx("div",{className:"item","data-testid":"from-to-button",onClick:v,children:i.jsx("div",{className:"item-text",children:i.jsx(C,{i18nKey:"trend.calendarMenu.timePeriod.fromto",children:"From/to"})})})]})]})})})})}function U(t,e){return t.tsStart===e.tsStart&&t.tsEnd===e.tsEnd}function Ps(t,e){const{t:s}=V();if(U(t,$e(e)))return s("trend.calendarMenu.timePeriod.today",{defaultValue:"Today"});if(U(t,Je(e)))return s("trend.calendarMenu.timePeriod.yesterday",{defaultValue:"Yesterday"});if(U(t,Ke(e)))return s("trend.calendarMenu.timePeriod.currentWeek",{defaultValue:"Curr. Week"});if(U(t,Xe(e)))return s("trend.calendarMenu.timePeriod.currentMonth",{defaultValue:"Curr. Month"});if(U(t,_e((t.tsStart+t.tsEnd)/2,e)))return s("trend.calendarMenu.timePeriod.day",{defaultValue:"Day"});if(U(t,et((t.tsStart+t.tsEnd)/2,e)))return s("trend.calendarMenu.timePeriod.month",{defaultValue:"Month"});const n=Os(t);if(U(t,ce(n,e)))return s("trend.calendarMenu.timePeriod.lastDays",{defaultValue:`Last ${n} days`,days:n})}function Ls({period:t,onChange:e,inputsHiddenByDefault:s,menuHidden:n,readOnly:r,locale:a,defaultPeriodName:o,timezone:l,...c}){const[u,d]=p.useState(!s),h=Ps(t,l)??o;return i.jsxs("div",{className:"di period-picker","data-testid":c["data-testid"],children:[(!s||u)&&i.jsx(Rs,{period:t,onChange:e,locale:a,readOnly:r,timezone:l}),n||r||i.jsx(Ds,{periodName:h,onShowCustomPeriod:s?d:void 0,onChange:e,timezone:l})]})}const Vs=500,Re=t=>Array.from(t.querySelectorAll("[id]")).map(e=>e.getAttribute("id")).reduce((e,s)=>(s&&(e[s]=e[s]+1||1),e),{}),Bs=t=>{const e=Re(document),s=Re(t);return Object.keys(s).filter(n=>s[n]<e[n])};function Fs(t,e){const s=setTimeout(()=>{e&&e(Bs(t))},Vs);return()=>clearTimeout(s)}const tt="http://www.w3.org/2000/svg";function Gs(t,{hoverColor:e,internalLink:s,link:n},r,a){const o=Hs(t);if(!o)return;const l=`a${Be(8)}`;t.classList.add("anchor",l),e&&r?.sheet&&r.sheet.insertRule(`.di.svg-image .anchor.${l}:hover, .di.svg-image .anchor.${l}:hover * { stroke: ${e} !important; }`),o.setAttributeNS(tt,"xlink:href","#"),o.addEventListener("click",()=>s&&a?a(n):window.open(n,"_newtab"))}function Hs(t){const e=t.parentNode;if(!e)return null;const s=e.childNodes;if(!s)return null;const n=Array.from(s).findIndex(o=>o===t),r=document.createElementNS(tt,"a");r.appendChild(t);const a=s[n]||null;return a?e.insertBefore(r,a):e.appendChild(r),r}const Ys=t=>t.replace(/<svg:svg/g,"<svg").replace(/<\/svg:svg/g,"</svg"),ge=t=>{const e=new DOMParser,s=Ys(atob(t.replace("data:image/svg+xml;base64,","")));return e.parseFromString(s,"image/svg+xml")};function Us(t,e){return ge(t).querySelectorAll(`[id^="${e}"]`)}const Ws=t=>{const e=t.filter(({type:r})=>r==="positionX"||r==="positionY"),s=t.filter(({type:r})=>r!=="positionX"&&r!=="positionY"),n=e.reduce((r,a)=>a.type==="positionX"?{...r,x:a}:a.type==="positionY"?{...r,y:a}:r,{x:null,y:null});return n.x&&n.y?s.concat([{type:"positionXY",target:n.x.target,positionX:n.x.position,positionY:n.y.position}]):n.x?s.concat([n.x]):n.y?s.concat([n.y]):s},Zs=t=>{const e=t.reduce((s,n)=>({...s,[n.target]:[...s[n.target]||[],n]}),{});return Object.keys(e).reduce((s,n)=>s.concat(Ws(e[n])),[])},$=t=>Math.max(0,Math.min(100,t));function zs(t,e,s){const n=De.SVG(s),r=t.getAttribute("id")||"",a=n.findOne(`#${r}`),o=n.findOne(`#${r}-boundaries`),l=o?o.bbox():n.viewbox();e.type==="positionX"?a.x(l.x+$(e.position)*l.width/100):e.type==="positionY"?a.y(l.y+$(e.position)*l.height/100):(a.x(l.x+$(e.positionX)*l.width/100),a.y(l.y+$(e.positionY)*l.height/100))}function qs(t,e,s,n,r){const o=ge(e).querySelector("svg");return o?(t.style.height="100%",t.innerHTML="",o.style.height="100%",o.style.width="100%",o.classList.add("di","svg-image"),o.getAttribute("viewBox")||o.setAttribute("viewBox",""),o.getAttribute("preserveAspectRatio")||o.setAttribute("preserveAspectRatio","xMidYMid"),t.appendChild(o),Qs(o,s,n,r),o):null}function Qs(t,e,s,n){if(!(!e||!e.length))for(const r of Js(Zs(e))){const a=t.querySelector(`[id=${r.target}]`);a&&$s(a,r,t,s,n)}}function $s(t,e,s,n,r){switch(e.type){case"visibility":t.setAttribute("visibility",e.visible?"visible":"hidden");break;case"text":{const a=t.querySelector("tspan");a?a.textContent=e.text:t.textContent=e.text;break}case"color":{const{color:a}=e,o=l=>{l.setAttribute("fill",a),l.style.fill=a};o(t),t.querySelectorAll("g, path").forEach(o);break}case"hyperlink":Gs(t,e,n,r);break;case"eventListener":t.addEventListener(e.eventType,e.listener,e.options);break;case"classNames":t.classList.add(...e.classNames);break;case"positionX":case"positionY":case"positionXY":zs(t,e,s);break;case"rotation":{De.SVG(t).rotate(e.degrees);break}default:throw new Error("Unknown modification")}}function Js(t){return t.sort(({type:e},{type:s})=>e!==s&&s==="rotation"?-1:1)}function Ks(){const t=p.useRef(null);return p.useEffect(()=>{const e=document.createElement("style");return e.appendChild(document.createTextNode("")),document&&document.head&&document.head.appendChild(e),t.current=e,()=>{document&&document.head&&e&&document.head.removeChild(e)}},[]),t.current}function Xs({imageData:t,modifications:e,onConflict:s}){const n=p.useRef(null),r=Ks(),{push:a}=O.useHistory();return p.useEffect(()=>{const{current:o}=n;if(o&&t){const l=qs(o,t,e,r,a);if(l&&s)return Fs(l,s)}},[t,e,s,a,r]),i.jsx("div",{ref:n})}const st=t=>{try{return ge(t).querySelector("svg")}catch{return null}},_s=t=>{const e=st(t);return!!e&&!!e.style};function de(t,e,s){return`<div>${t}</div><div>${e}: <strong>${s}</strong></div>`}const F={global:{useUTC:!1},chart:{style:{fontFamily:"arial"},plotBackgroundColor:null,plotBorderWidth:0,plotShadow:!1},credits:{enabled:!1},legend:{align:"right",verticalAlign:"center",layout:"vertical"},title:{useHTML:!0},plotOptions:{pie:{dataLabels:{enabled:!1},showInLegend:!0,startAngle:-90,endAngle:270}},tooltip:{useHTML:!0,formatter(){return de("",this.point.name,this.point.y)}},xAxis:{type:"category"},yAxis:{min:0,title:{text:""}},options:{lgo:123}},ke=t=>t?{series:{cursor:"pointer",point:{events:{click:function(){t(this.index)}}}}}:{};class en extends p.Component{constructor(){super(...arguments),this.state={},this.chart=null,this.ro=null,this.handleChart=e=>{this.chart=e,this.ro=new ResizeObserver(()=>{this.chart?.reflow()}),this.ro.observe(this.chart.renderTo)}}componentDidMount(){const{type:e,title:s,items:n,tooltipTitle:r,valueFormatter:a,onClick:o}=this.props;this.setState({...F,plotOptions:{...F.plotOptions,...ke(o)},tooltip:{...F.tooltip,formatter(){const l=a||(c=>c);return de(r||"",this.point.name,l(this.point.y))}},legend:{...F.legend,enabled:e==="pie"},yAxis:{...F.yAxis,enabled:e==="column",title:{text:s||""}},series:[{type:e,innerSize:"50%",data:n.map(({label:l,value:c})=>[l,c])}]}),setTimeout(()=>{this.setState({title:{...F.title,text:e==="column"?"":s||""}})},0)}componentDidUpdate(e){const{type:s,title:n,items:r,tooltipTitle:a,valueFormatter:o,onClick:l}=this.props;n!==e.title&&this.setState({title:{...this.state.title,text:s==="column"?"":n||""},yAxis:{...this.state.yAxis,title:{text:n||""}}}),s!==e.type&&this.setState({legend:{...this.state.legend,enabled:s==="pie"},title:{text:s==="column"?"":n||""},yAxis:{...this.state.yAxis,enabled:s==="column",title:{text:s==="column"&&n||""}},series:[{type:s,innerSize:"50%",data:r.map(({label:c,value:u})=>[c,u])}]}),T.isEqual(r,e.items)||this.setState({series:[{type:s,innerSize:"50%",data:r.map(({label:c,value:u})=>[c,u])}]}),(a!==e.tooltipTitle||o!==e.valueFormatter||l!==e.onClick)&&this.setState({tooltip:{...F.tooltip,formatter(){const c=o||(u=>u);return de(a||"",this.point.name,c(this.point.y))}},plotOptions:{...F.plotOptions,...ke(l)}})}componentWillUnmount(){this.ro&&this.chart?.renderTo&&this.ro.unobserve(this.chart.renderTo),this.chart=null,this.ro=null}render(){const e=this.props.updateOptions?this.props.updateOptions(this.state):this.state;return i.jsx(pt,{highcharts:ht,options:e,containerProps:{className:this.props.className},callback:this.handleChart})}}function tn(t){return t&&t.__esModule&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t}var q={},Ee;function sn(){if(Ee)return q;Ee=1,Object.defineProperty(q,"__esModule",{value:!0}),q.default=void 0;let t=o=>+setTimeout(o,16),e=o=>clearTimeout(o);typeof window<"u"&&"requestAnimationFrame"in window&&(t=o=>window.requestAnimationFrame(o),e=o=>window.cancelAnimationFrame(o));let s=0;const n=new Map;function r(o){n.delete(o)}const a=(o,l=1)=>{s+=1;const c=s;function u(d){if(d===0)r(c),o();else{const h=t(()=>{u(d-1)});n.set(c,h)}}return u(l),c};return a.cancel=o=>{const l=n.get(o);return r(o),e(l)},process.env.NODE_ENV!=="production"&&(a.ids=()=>n),q.default=a,q}var nn=sn();const Me=tn(nn),rn=t=>{const{value:e,children:s,visible:n,tipFormatter:r=d=>`${d}`,...a}=t,o=p.useRef(null),l=p.useRef(null);function c(){l.current&&Me.cancel(l.current)}function u(){l.current=Me(()=>{o.current?.forceAlign()})}return p.useEffect(()=>(n?u():c(),c),[e,n]),i.jsx(ft,{placement:"top",overlay:r(e),ref:o,align:{offset:[0,-10]},visible:n,...a,children:s})},an=({tipFormatter:t,tipProps:e,...s})=>{const n=(r,a)=>i.jsx(rn,{value:a.value,visible:a.dragging,tipFormatter:t,...e,children:r});return i.jsx(Pe,{...s,handleRender:n})};function on(t,e,s){const[n,r]=p.useState(null);p.useEffect(()=>{if(n){const o=n.querySelector(".rc-slider-rail");if(!o)throw new Error(".rc-slider-rail element missing");const l=o?.querySelector(".disabled-area-element"),c=o.getBoundingClientRect().width;if(l)if(t==null)l.remove();else{const u=Math.round((s-t)/(s-e)*c);l.style.width=`${u}px`}else if(t!=null){const u=Math.round((s-t)/(s-e)*c),d=document.createElement("div");d.classList.add("disabled-area-element"),d.style.width=`${u}px`,o.appendChild(d)}}},[t,n,e,s]);const a=p.useCallback(()=>{if(n&&t!=null){const o=n.querySelector(".rc-slider-rail");if(!o)throw new Error(".rc-slider-rail element missing");const l=o?.querySelector(".disabled-area-element"),c=o.getBoundingClientRect().width;if(l){const u=Math.round((s-t)/(s-e)*c);l.style.width=`${u}px`}}},[t,s,e,n]);return p.useEffect(()=>{n&&new ResizeObserver(()=>a()).observe(n)},[n,a]),r}const ln=({min:t,max:e,step:s,value:n,tooltip:r=!0,labels:a,format:o,onChange:l,onChangeComplete:c,limit:u})=>{const d=on(u,t,e),f={min:t,max:e,step:s,value:n,onChange:m=>{if(!l)return;const x=typeof m=="number"?m:m[0],y=u!=null?Math.min(x,u):x;l(y)},onChangeComplete:()=>{c&&c(n)},marks:a};return i.jsx("div",{className:"di slider",ref:d,children:r?i.jsx(an,{...f,className:"di slider with-tooltip",tipFormatter:o}):i.jsx(Pe,{...f,className:"di slider"})})};exports.Chart=en;exports.ColorPicker=Ye;exports.ContentHeader=As;exports.DateInput=he;exports.DateTimeInput=le;exports.FileUpload=_;exports.GradientColorPicker=Ft;exports.GridColorPicker=Ye;exports.ImageUpload=Cs;exports.InfoBox=$t;exports.MessageBoxContainer=Ct;exports.MultiMenu=Ze;exports.MultiMenuItem=Is;exports.Pagination=ze;exports.PeriodPicker=Ls;exports.Reactable=Qe;exports.ReactableWithClientSidePagination=ys;exports.RouteLink=qt;exports.RouteTabs=Kt;exports.SelectWithSearch=qe;exports.SelectWithSearchAsync=Ns;exports.Slider=ln;exports.SvgImage=Xs;exports.TreeView=rs;exports.UrnInput=Wt;exports.ValidatedTextInput=Q;exports.getMutableNodeList=Us;exports.getSvgElement=st;exports.getTreeNodePathById=Dt;exports.initializeTranslation=Nt;exports.messageBoxDismissAll=jt;exports.messageBoxDismissGroup=yt;exports.messageBoxDismissSingle=bt;exports.messageBoxError=St;exports.messageBoxInfo=xt;exports.messageBoxSuccess=mt;exports.messageBoxWarn=vt;exports.nanoid10=At;exports.setGlobalErrorMessageBoxOptions=gt;exports.uuidV4=Be;exports.validateSvg=_s;exports.withPrompt=zt;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const reactToastify = require("react-toastify");
+const nanoid = require("nanoid");
+const React = require("react");
+const cx = require("classnames");
+const ngUiBasicComponents = require("@deviceinsight/ng-ui-basic-components");
+const pureColor = require("pure-color");
+const reactColorful = require("react-colorful");
+const timezone = require("dayjs/plugin/timezone");
+const utc = require("dayjs/plugin/utc");
+const DatePicker = require("react-datepicker");
+const lodash = require("lodash");
+const dayjs = require("dayjs");
+const localeData = require("dayjs/plugin/localeData");
+const localizedFormat = require("dayjs/plugin/localizedFormat");
+const customParseFormat = require("dayjs/plugin/customParseFormat");
+const i18n = require("i18next");
+const Locales = require("date-fns/locale");
+require("dayjs/locale/en");
+require("dayjs/locale/en-gb");
+require("dayjs/locale/en-ca");
+require("dayjs/locale/de");
+require("dayjs/locale/de-at");
+require("dayjs/locale/de-ch");
+require("dayjs/locale/it");
+require("dayjs/locale/ja");
+const reactRouterDom = require("react-router-dom");
+const core = require("@dnd-kit/core");
+const sortable = require("@dnd-kit/sortable");
+const modifiers = require("@dnd-kit/modifiers");
+const ngUiApiClient = require("@deviceinsight/ng-ui-api-client");
+const Select = require("react-select");
+const Dropzone = require("react-dropzone");
+const reactSelectAsyncPaginate = require("react-select-async-paginate");
+const svg_js = require("@svgdotjs/svg.js");
+const Highcharts = require("highcharts");
+const HighchartsReact = require("highcharts-react-official");
+const Slider$1 = require("@rc-component/slider");
+const Tooltip = require("@rc-component/tooltip");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const Locales__namespace = /* @__PURE__ */ _interopNamespaceDefault(Locales);
+let groupNamesToToastIds = {};
+let globalErrorMessageBoxOptions = {
+  autoClose: false
+};
+const setGlobalErrorMessageBoxOptions = (options) => {
+  globalErrorMessageBoxOptions = options;
+};
+const storeGroupName = (groupName, toastId) => {
+  if (groupName) {
+    if (groupNamesToToastIds[groupName]) {
+      groupNamesToToastIds[groupName] = [...groupNamesToToastIds[groupName], toastId];
+    } else {
+      groupNamesToToastIds[groupName] = [toastId];
+    }
+  }
+};
+const messageBoxSuccess = (content, options, groupName) => {
+  const toastId = reactToastify.toast.success(content, options);
+  if (groupName) storeGroupName(groupName, toastId);
+};
+const messageBoxInfo = (content, options, groupName) => {
+  const toastId = reactToastify.toast.info(content, options);
+  if (groupName) storeGroupName(groupName, toastId);
+};
+const messageBoxWarn = (content, options, groupName) => {
+  const toastId = reactToastify.toast.warn(content, options);
+  if (groupName) storeGroupName(groupName, toastId);
+};
+const messageBoxError = (content, options, groupName) => {
+  const toastId = reactToastify.toast.error(content, { ...globalErrorMessageBoxOptions, ...options });
+  if (groupName) storeGroupName(groupName, toastId);
+};
+const messageBoxDismissSingle = (id) => {
+  reactToastify.toast.dismiss(id);
+};
+const messageBoxDismissGroup = (groupName) => {
+  if (groupNamesToToastIds[groupName]) {
+    groupNamesToToastIds[groupName].forEach((toastId) => reactToastify.toast.dismiss(toastId));
+    delete groupNamesToToastIds[groupName];
+  }
+};
+const messageBoxDismissAll = () => {
+  groupNamesToToastIds = {};
+  reactToastify.toast.dismiss();
+};
+const MessageBoxContainer = () => /* @__PURE__ */ jsxRuntime.jsx(reactToastify.ToastContainer, { position: "top-center", theme: "colored", autoClose: 3e4, hideProgressBar: true, transition: reactToastify.Slide });
+const uuidV4 = (length = 32) => {
+  let uuid = "";
+  for (let i = 0; i < length; i++) {
+    const random = Math.random() * 16 | 0;
+    if (i === 8 || i === 12 || i === 16 || i === 20) {
+      uuid += "-";
+    }
+    uuid += (i === 12 ? 4 : i === 16 ? random & 3 | 8 : random).toString(16);
+  }
+  return uuid;
+};
+const alphabet = "0123456789abcdefghijklmnopqrstuvwxyz";
+const nanoid10 = nanoid.customAlphabet(alphabet, 10);
+let Trans;
+let useTranslation;
+function initializeTranslation(transComponent, useTranslationHook) {
+  Trans = transComponent;
+  useTranslation = useTranslationHook;
+}
+function removeDuplicatesFromArray(arr) {
+  return arr.filter((id, index, arr2) => arr2.indexOf(id) === index);
+}
+function removeNodeIds(nodeIds, nodeIdsToRemove) {
+  return nodeIds.filter((id) => !nodeIdsToRemove.includes(id));
+}
+function mergeNodeIdArrays(nodeIds1, nodeIds2) {
+  return removeDuplicatesFromArray([...nodeIds1, ...nodeIds2]);
+}
+function intersectArrays(array1, array2) {
+  return array1.filter((value) => array2.includes(value));
+}
+function getTreeSize(node) {
+  if (node.children) {
+    const numberOfChildren = node.children.length;
+    return numberOfChildren + node.children.reduce((l, child) => l + getTreeSize(child), 0);
+  }
+  return 0;
+}
+function getAllLeaves(node) {
+  if (node.children) {
+    return node.children.reduce((childNodes, child) => [...childNodes, ...getAllLeaves(child)], []);
+  }
+  return [node];
+}
+function getAllLeafIds(node) {
+  return getAllLeaves(node).map((node2) => node2.id);
+}
+function convertToTree({
+  childNodeKey,
+  idKey,
+  displayNameKey,
+  typeKey,
+  lazyLoadableKey,
+  nodeMetaData,
+  leafMetaData
+}) {
+  const { typeValue: leafTypeValue, image, resolver: leafResolver } = leafMetaData;
+  const { typeValue: nodeTypeValue, expandedImage, closedImage, resolver: nodeResolver } = nodeMetaData;
+  return function convert(hierarchicalData, nodePath = "") {
+    return hierarchicalData.map((rootNode) => {
+      const id = rootNode[idKey];
+      const name = rootNode[displayNameKey];
+      const children = rootNode[childNodeKey];
+      const lazyLoadable = rootNode[lazyLoadableKey];
+      const isNode = nodeResolver ? nodeResolver(rootNode) : rootNode[typeKey] === nodeTypeValue;
+      const isLeaf = leafResolver ? leafResolver(rootNode) : rootNode[typeKey] === leafTypeValue;
+      const path = `${nodePath}/${name}`;
+      const originalNode = rootNode;
+      if (isNode) {
+        return {
+          id,
+          name,
+          children: convert(children || [], path),
+          lazyLoadable,
+          expandedImage,
+          closedImage,
+          path,
+          originalNode
+        };
+      } else if (isLeaf) {
+        return {
+          id,
+          name,
+          image,
+          path,
+          originalNode
+        };
+      }
+      throw new Error("unknown node or leaf type provided");
+    });
+  };
+}
+function patchNode(node, patch) {
+  let patchedChildren;
+  if (patch.children !== void 0) {
+    if (node.children !== void 0) {
+      patchedChildren = [...node.children, ...patch.children];
+    } else {
+      patchedChildren = [...patch.children];
+    }
+  }
+  return { ...node, ...patch, children: patchedChildren || void 0 };
+}
+function findNodeAndApplyPatch(node, nodeId, patch) {
+  if (node.children === void 0) {
+    return node;
+  }
+  if (node.id === nodeId) {
+    return patchNode(node, patch);
+  }
+  return { ...node, children: node.children.map((childNode) => findNodeAndApplyPatch(childNode, nodeId, patch)) };
+}
+function getTreeNodePathByIdArray(currentNode, idToFind, idKey, childNodeKey, displayNameKey) {
+  if (currentNode[idKey] === idToFind) {
+    return [currentNode[displayNameKey]];
+  } else if (currentNode[childNodeKey]) {
+    for (let i = 0; i < currentNode[childNodeKey].length; i++) {
+      const path = getTreeNodePathByIdArray(
+        currentNode[childNodeKey][i],
+        idToFind,
+        idKey,
+        childNodeKey,
+        displayNameKey
+      );
+      if (path) {
+        path.unshift(currentNode[displayNameKey]);
+        return path;
+      }
+    }
+  }
+  return null;
+}
+function getTreeNodePathById(currentNode, idToFind, idKey, childNodeKey, displayNameKey) {
+  const nodePathArray = getTreeNodePathByIdArray(currentNode, idToFind, idKey, childNodeKey, displayNameKey);
+  return nodePathArray ? nodePathArray.join(".") : null;
+}
+function ColorPickerPopper({
+  isOpen,
+  onOpenChange,
+  className,
+  style,
+  value,
+  placement,
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ngUiBasicComponents.Popup,
+    {
+      handler: /* @__PURE__ */ jsxRuntime.jsx("div", { className: `di color-picker-popper ${className || ""}`, style, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "trigger", style: { ...style, backgroundColor: value } }) }),
+      open: isOpen,
+      onOpenChange,
+      placement,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "color-picker-box", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "content", children }) })
+    }
+  );
+}
+function GridColorPicker({
+  value,
+  isOpen,
+  onOpenStateChange,
+  direction,
+  colors: colors2,
+  onPick,
+  pickerStyle,
+  pickerClassName,
+  inline = true,
+  className,
+  style
+}) {
+  const [open, setOpen] = React.useState(false);
+  const picker = /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx("di color-picker grid-color-picker clearfix", pickerClassName), style: pickerStyle, children: colors2.map((color) => /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      onClick: () => {
+        onPick(color);
+      },
+      className: `color ${color === value ? "selected" : ""}`,
+      style: {
+        background: color
+      }
+    },
+    color
+  )) });
+  if (inline) {
+    return picker;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ColorPickerPopper,
+    {
+      className,
+      style,
+      value,
+      isOpen: isOpen ?? open,
+      onOpenChange: onOpenStateChange ?? setOpen,
+      placement: direction,
+      children: picker
+    }
+  );
+}
+const isValid = (value, pattern, required) => {
+  if (!value.length) {
+    return !required;
+  }
+  return pattern.test(value);
+};
+const _ValidatedTextInput = class _ValidatedTextInput extends React__namespace.Component {
+  constructor() {
+    super(...arguments);
+    this.handleChange = (e) => {
+      const { value } = e.target;
+      const { pattern, required, onChange } = this.props;
+      const valid = isValid(value, pattern, required);
+      onChange(value, valid);
+    };
+  }
+  render() {
+    const { style, invalidStyle, value, ...props } = this.props;
+    const { pattern, required, ...otherProps } = props;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        ...otherProps,
+        value,
+        onChange: this.handleChange,
+        style: isValid(value, pattern, required) ? style : { ...style, ...invalidStyle },
+        type: "text"
+      }
+    );
+  }
+};
+_ValidatedTextInput.defaultProps = {
+  required: false
+};
+let ValidatedTextInput = _ValidatedTextInput;
+function ColorTextInput({ value, pattern, onChange, placeholder, style }) {
+  const [text, setText] = React.useState(value);
+  function handleChange(value2, valid) {
+    setText(value2);
+    if (valid) {
+      onChange(value2);
+    }
+  }
+  React.useEffect(() => {
+    setText(value);
+  }, [value]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ValidatedTextInput,
+    {
+      value: text,
+      onChange: handleChange,
+      pattern,
+      invalidStyle: {
+        borderColor: "red"
+      },
+      placeholder,
+      required: true,
+      style
+    }
+  );
+}
+const VALIDATE_HEX_COLOR_REGEX = /^#([A-Fa-f0-9]{6})$/;
+const VALIDATE_RGB_COLOR_REGEX = /^rgb\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/;
+const convertRgbaToRgb = (color) => {
+  return pureColor.parse(color).splice(0, 3);
+};
+const convertToHex = (color) => {
+  return color && color.length > 6 ? pureColor.convert.rgb.hex(convertRgbaToRgb(color)) : "";
+};
+const convertToRgb = (color) => {
+  return color ? pureColor.convert.rgb.string(convertRgbaToRgb(color)) : "";
+};
+function GradientColorPicker({
+  onOpenStateChange,
+  onPick,
+  allowTextInput,
+  className,
+  direction,
+  inline = true,
+  isOpen,
+  opacitySlider,
+  pickerClassName,
+  pickerStyle,
+  style,
+  value
+}) {
+  const [open, setOpen] = React.useState(false);
+  const hexValue = convertToHex(value);
+  const rgbValue = convertToRgb(value);
+  const ColorPicker = value === hexValue ? reactColorful.HexColorPicker : opacitySlider && !allowTextInput ? reactColorful.RgbaStringColorPicker : reactColorful.RgbStringColorPicker;
+  const picker = /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cx(
+        "di gradient-color-picker",
+        {
+          "with-textfield": allowTextInput
+        },
+        pickerClassName
+      ),
+      style: pickerStyle,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ColorPicker, { color: value, onChange: onPick }),
+        allowTextInput && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inputs", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ColorTextInput,
+            {
+              value: hexValue,
+              onChange: onPick,
+              pattern: VALIDATE_HEX_COLOR_REGEX,
+              placeholder: "#FF00FF",
+              style: { width: 60 }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ColorTextInput,
+            {
+              value: rgbValue,
+              onChange: onPick,
+              pattern: VALIDATE_RGB_COLOR_REGEX,
+              placeholder: "rgb(255,0,255)",
+              style: { width: 115 }
+            }
+          )
+        ] })
+      ]
+    }
+  );
+  if (inline) {
+    return picker;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ColorPickerPopper,
+    {
+      className,
+      style,
+      value,
+      isOpen: isOpen ?? open,
+      onOpenChange: onOpenStateChange ?? setOpen,
+      placement: direction,
+      children: picker
+    }
+  );
+}
+const supportedLocales = ["en", "en-gb", "en-ca", "de", "de-at", "de-ch", "it", "ja"];
+function isLocaleSupported(locale) {
+  return supportedLocales.includes(locale);
+}
+dayjs.extend(utc);
+dayjs.extend(timezone);
+dayjs.extend(localeData);
+dayjs.extend(localizedFormat);
+dayjs.extend(customParseFormat);
+function registerLanguage(locale) {
+  const [localeSegment1, localeSegment2] = locale.split("-");
+  let module2;
+  if (localeSegment1 && localeSegment2) {
+    module2 = Locales__namespace[`${localeSegment1}${localeSegment2}`] ?? Locales__namespace[localeSegment1];
+  } else if (localeSegment1) {
+    module2 = Locales__namespace[localeSegment1];
+  } else {
+    module2 = null;
+  }
+  if (module2) {
+    DatePicker.registerLocale(locale, module2);
+  }
+}
+async function changeDayjsLocale(locale) {
+  let dayjsLocale = null;
+  const [localeSegment1] = locale.split("-");
+  if (isLocaleSupported(locale.toLowerCase())) {
+    dayjsLocale = locale.toLowerCase();
+  } else if (isLocaleSupported(localeSegment1.toLowerCase())) {
+    dayjsLocale = localeSegment1.toLowerCase();
+  }
+  if (dayjsLocale) {
+    dayjs.locale(dayjsLocale);
+  }
+}
+function isInputValid(value, pattern) {
+  if (value == null || value === "") {
+    return true;
+  }
+  if (typeof value === "number") {
+    return !isNaN(value);
+  }
+  if (typeof value === "string") {
+    return dayjs(value, pattern, true).isValid();
+  }
+  return false;
+}
+function inputToDate(value, pattern, timezone2) {
+  if (typeof value === "number" && !Number.isNaN(value)) {
+    return new Date(value);
+  }
+  if (typeof value === "string" && dayjs(value, pattern, true).isValid()) {
+    return dayjs.tz(value, pattern, timezone2).toDate();
+  }
+  return null;
+}
+function inputToTzDate(value, pattern, timezone2) {
+  if (typeof value === "number") {
+    return dayjs.tz(value, timezone2);
+  }
+  if (typeof value === "string" && dayjs(value, pattern, true).isValid()) {
+    return dayjs.tz(value, pattern, timezone2);
+  }
+  return null;
+}
+const DateInput = React.forwardRef(
+  ({ value, clearable, inline, readOnly, wrapperClassName, onChange, locale, timezone: timezone2, ...otherProps }, ref) => {
+    const [pattern, setPattern] = React.useState(dayjs.localeData().longDateFormat("L"));
+    const { t } = useTranslation();
+    const [valid, setValid] = React.useState(false);
+    const [popupOpen, setPopupOpen] = React.useState(false);
+    const [inputText, setInputText] = React.useState("");
+    const debouncedSetPopupActive = React.useMemo(() => lodash.debounce(setPopupOpen, 30), []);
+    React.useEffect(() => {
+      const language = locale ?? i18n.language;
+      if (language) {
+        registerLanguage(language);
+        changeDayjsLocale(language).then(() => setPattern(dayjs.localeData().longDateFormat("L")));
+      }
+    }, [locale]);
+    const formattedDate = React.useCallback(
+      (value2) => {
+        if (value2 == null || value2 == "") {
+          return "";
+        } else if (!isInputValid(value2, pattern)) {
+          return t("dateInput.invalidDate", {
+            defaultValue: "invalid date"
+          });
+        } else {
+          return typeof value2 === "number" ? dayjs.tz(value2, timezone2).format(pattern) : value2;
+        }
+      },
+      [pattern, t, timezone2]
+    );
+    React.useEffect(() => {
+      if (value == null) {
+        setInputText("");
+      } else {
+        setInputText(formattedDate(value));
+      }
+    }, [formattedDate, value]);
+    React.useEffect(() => {
+      setValid(isInputValid(value, pattern));
+    }, [pattern, value]);
+    React.useEffect(() => {
+      dayjs.locale(locale ?? i18n.language);
+      setPattern(dayjs.localeData().longDateFormat("L"));
+    }, [locale]);
+    const handleInputTextChange = (text) => {
+      setInputText(text);
+      if (text) {
+        const valid2 = dayjs(text, pattern, true).isValid();
+        if (valid2) {
+          const prevDate = inputToTzDate(value, pattern, timezone2);
+          const newDate = dayjs.tz(text, pattern, timezone2 ?? dayjs.tz.guess());
+          if (prevDate) {
+            newDate.set("hour", prevDate.hour());
+            newDate.set("minute", prevDate.minute());
+            newDate.set("second", prevDate.second());
+            newDate.set("millisecond", prevDate.millisecond());
+          }
+          onChange(newDate.valueOf(), true);
+        }
+        setValid(valid2);
+      } else {
+        onChange(null, true);
+        setValid(true);
+      }
+    };
+    const handlePickerChange = (date) => {
+      onChange(date ? date.valueOf() : null);
+      setInputText(formattedDate(date ? date.getTime() : null));
+      setPopupOpen(false);
+    };
+    const handleClear = () => handleInputTextChange("");
+    if (inline) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        DatePicker,
+        {
+          ...otherProps,
+          onChange: handlePickerChange,
+          selected: inputToDate(value, pattern, timezone2),
+          locale: locale ?? i18n.language,
+          isClearable: clearable,
+          placeholderText: pattern,
+          className: cx("date", { invalid: !valid }),
+          inline: true
+        }
+      );
+    }
+    if (readOnly) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        DatePicker,
+        {
+          ...otherProps,
+          onChange: () => {
+          },
+          selected: inputToDate(value, pattern, timezone2),
+          locale: locale ?? i18n.language,
+          customInput: /* @__PURE__ */ jsxRuntime.jsx("span", { children: /* @__PURE__ */ jsxRuntime.jsx("input", { type: "text", value: formattedDate(value), readOnly: true }) }),
+          placeholderText: pattern,
+          readOnly: true
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      ngUiBasicComponents.Popup,
+      {
+        handler: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "di date-input-wrapper", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              ref,
+              "data-testid": "date-input",
+              className: cx("date", { invalid: !valid }),
+              onChange: (e) => handleInputTextChange(e.target.value),
+              value: inputText,
+              placeholder: pattern,
+              onBlur: () => {
+                handleInputTextChange(formattedDate(value));
+                debouncedSetPopupActive(false);
+              }
+            }
+          ),
+          clearable && /* @__PURE__ */ jsxRuntime.jsx(ngUiBasicComponents.Button, { naked: true, small: true, onClick: handleClear, children: /* @__PURE__ */ jsxRuntime.jsx(ngUiBasicComponents.Icon, { del: true }) })
+        ] }),
+        mode: ["click", "focus"],
+        className: "date-input",
+        handlerWrapperClassName: wrapperClassName,
+        open: popupOpen,
+        onOpenChange: setPopupOpen,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "di date-picker-popup-wrapper",
+            tabIndex: 0,
+            onFocus: () => {
+              debouncedSetPopupActive(true);
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              DatePicker,
+              {
+                ...otherProps,
+                selected: inputToDate(value, pattern, timezone2),
+                onChange: handlePickerChange,
+                locale: locale ?? i18n.language,
+                isClearable: clearable,
+                placeholderText: pattern,
+                className: cx("date", { invalid: !valid }),
+                inline: true
+              }
+            )
+          }
+        )
+      }
+    );
+  }
+);
+class UrnInput extends React__namespace.Component {
+  constructor() {
+    super(...arguments);
+    this.state = {
+      editMode: false
+    };
+    this.handleEdit = () => this.setState({
+      editMode: true
+    });
+    this.handleChangeValue = (event) => this.props.onChange(event.target.value);
+  }
+  render() {
+    const { editMode } = this.state;
+    const { value } = this.props;
+    if (editMode) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          value,
+          onChange: this.handleChangeValue,
+          autoCorrect: "off",
+          spellCheck: "false",
+          autoComplete: "off"
+        }
+      );
+    } else {
+      return /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            style: {
+              marginRight: 10
+            },
+            children: value
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(ngUiBasicComponents.Button, { small: true, onClick: this.handleEdit, children: /* @__PURE__ */ jsxRuntime.jsx(ngUiBasicComponents.Icon, { edit: true }) })
+      ] });
+    }
+  }
+}
+function Prompt({
+  title,
+  message,
+  onAccept,
+  onCancel,
+  inputPlaceholder,
+  cancelButtonLabel,
+  acceptButtonLabel
+}) {
+  const { t } = useTranslation();
+  const inputRef = React.useRef(null);
+  const [value, setValue] = React.useState("");
+  React.useEffect(() => {
+    inputRef.current?.focus();
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ngUiBasicComponents.Modal,
+    {
+      header: t(title.id, {
+        defaultValue: title.defaultValue
+      }),
+      content: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "di form", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "field", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { children: /* @__PURE__ */ jsxRuntime.jsx(Trans, { i18nKey: message.id, children: message.defaultValue }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "text",
+            style: {
+              width: 250
+            },
+            ref: inputRef,
+            placeholder: inputPlaceholder ? t(inputPlaceholder.id, {
+              defaultValue: inputPlaceholder.defaultValue
+            }) : void 0,
+            onChange: (event) => setValue(event.target.value)
+          }
+        )
+      ] }) }),
+      footer: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ngUiBasicComponents.Button,
+          {
+            primary: true,
+            onClick: () => {
+              onAccept(value);
+            },
+            disabled: !value.length,
+            children: acceptButtonLabel ? /* @__PURE__ */ jsxRuntime.jsx(Trans, { i18nKey: acceptButtonLabel.id, children: acceptButtonLabel.defaultValue }) : /* @__PURE__ */ jsxRuntime.jsx(Trans, { i18nKey: "form.accept", children: "Accept" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(ngUiBasicComponents.Button, { onClick: onCancel, children: cancelButtonLabel ? /* @__PURE__ */ jsxRuntime.jsx(Trans, { i18nKey: cancelButtonLabel.id, children: cancelButtonLabel.defaultValue }) : /* @__PURE__ */ jsxRuntime.jsx(Trans, { i18nKey: "form.cancel", children: "Cancel" }) })
+      ] }),
+      width: 600
+    }
+  );
+}
+function withPrompt(WrappedComponent) {
+  return class WithPromptWrapper extends React__namespace.Component {
+    constructor() {
+      super(...arguments);
+      this.state = {
+        show: false
+      };
+      this.prompt = (title, message, inputPlaceholder, acceptButtonLabel, cancelButtonLabel) => new Promise((resolve) => {
+        this.setState({
+          show: true,
+          promptElement: /* @__PURE__ */ jsxRuntime.jsx(
+            Prompt,
+            {
+              title,
+              message,
+              onAccept: (value) => {
+                this.setState({
+                  show: false
+                });
+                resolve(value);
+              },
+              onCancel: () => {
+                this.setState({
+                  show: false
+                });
+              },
+              inputPlaceholder,
+              acceptButtonLabel,
+              cancelButtonLabel
+            },
+            "1"
+          )
+        });
+      });
+    }
+    render() {
+      return [
+        /* @__PURE__ */ React.createElement(WrappedComponent, { ...this.props, prompt: this.prompt, key: "0" }),
+        this.state.show ? this.state.promptElement : null
+      ];
+    }
+  };
+}
+const isModifiedEvent = (event) => !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey);
+function RouteLink({ to, confirm, className, title, children, keyboardShortcut, ...otherProps }) {
+  const history = reactRouterDom.useHistory();
+  const { t } = useTranslation();
+  const pushRoute = React.useCallback(() => {
+    if (confirm) {
+      confirm().then((location) => history.push(location || to)).catch(() => {
+      });
+    } else {
+      history.push(to);
+    }
+  }, [confirm, history, to]);
+  const handleKeyEvent = React.useCallback(
+    (event) => {
+      if (keyboardShortcut && event.key === keyboardShortcut && !isModifiedEvent(event) && // @ts-ignore EventTarget is a Node and has a tagName
+      event.target.tagName && // @ts-ignore EventTarget is a Node and has a tagName
+      !["INPUT", "SELECT", "TEXTAREA"].includes(event.target.tagName)) {
+        event.preventDefault();
+        pushRoute();
+      }
+    },
+    [keyboardShortcut, pushRoute]
+  );
+  React.useEffect(() => {
+    if (keyboardShortcut) {
+      window.addEventListener("keydown", handleKeyEvent);
+      return () => {
+        window.removeEventListener("keydown", handleKeyEvent);
+      };
+    }
+  }, [keyboardShortcut, handleKeyEvent]);
+  const handleClickEvent = (event) => {
+    if (event.button === 0 && !isModifiedEvent(event)) {
+      event.preventDefault();
+      pushRoute();
+    }
+  };
+  const href = history.createHref(typeof to === "string" ? { pathname: to } : to);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "a",
+    {
+      href,
+      onClick: handleClickEvent,
+      className: `di route-link ${className || ""}`,
+      title: title ? t(title.id, {
+        defaultValue: title.defaultValue
+      }) : void 0,
+      ...otherProps,
+      children
+    }
+  );
+}
+const colors = {
+  info: "#ffffff",
+  success: "#cce0cc",
+  warning: "#fed254",
+  error: "#d66961"
+};
+function InfoBox({ type = "info", hideable = false, className, icon, message: inputMessage, children }) {
+  const [visible, setVisible] = React.useState(true);
+  const { t } = useTranslation();
+  function getMessage() {
+    if (typeof inputMessage !== "string") {
+      const { id, defaultValue, ...rest } = inputMessage;
+      return t(id, { ...rest, defaultValue });
+    }
+    return inputMessage;
+  }
+  const message = getMessage();
+  return visible ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `infobox ${className ? className : ""}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: "infobox-header",
+        style: {
+          backgroundColor: colors[type]
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "infobox-header-content", children: [
+            icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "infobox-iconcontainer", children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: icon, alt: "info-icon", style: { width: 16, height: 16 } }) }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "infobox-message", children: message })
+          ] }),
+          hideable && /* @__PURE__ */ jsxRuntime.jsx("button", { className: "infobox-closebutton", onClick: () => setVisible(false), children: /* @__PURE__ */ jsxRuntime.jsx(ngUiBasicComponents.Icon, { del: true, large: true }) })
+        ]
+      }
+    ),
+    children
+  ] }) : null;
+}
+const CSS = /* @__PURE__ */ Object.freeze({
+  Translate: {
+    toString(transform) {
+      if (!transform) {
+        return;
+      }
+      const {
+        x,
+        y
+      } = transform;
+      return "translate3d(" + (x ? Math.round(x) : 0) + "px, " + (y ? Math.round(y) : 0) + "px, 0)";
+    }
+  },
+  Scale: {
+    toString(transform) {
+      if (!transform) {
+        return;
+      }
+      const {
+        scaleX,
+        scaleY
+      } = transform;
+      return "scaleX(" + scaleX + ") scaleY(" + scaleY + ")";
+    }
+  },
+  Transform: {
+    toString(transform) {
+      if (!transform) {
+        return;
+      }
+      return [CSS.Translate.toString(transform), CSS.Scale.toString(transform)].join(" ");
+    }
+  },
+  Transition: {
+    toString(_ref) {
+      let {
+        property,
+        duration,
+        easing
+      } = _ref;
+      return property + " " + duration + "ms " + easing;
+    }
+  }
+});
+function resolvePath(basePath, match) {
+  const divider = basePath.endsWith("/") ? "" : "/";
+  return `${basePath}${divider}${match}`;
+}
+const TabHeader = ({
+  id,
+  to,
+  className,
+  title,
+  children,
+  draggingDisabled
+}) => {
+  const { attributes, listeners, setNodeRef, transform, transition } = sortable.useSortable({
+    id,
+    disabled: draggingDisabled,
+    strategy: sortable.horizontalListSortingStrategy
+  });
+  const style = {
+    transform: transform ? CSS.Transform.toString({ ...transform, scaleX: 1 }) : void 0,
+    transition
+  };
+  const { pathname } = reactRouterDom.useLocation();
+  const isActive = pathname.endsWith(to.toString());
+  if (isActive) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        "data-testid": "tab-button",
+        className: cx("tab-header item active", className),
+        title,
+        ref: setNodeRef,
+        style,
+        type: "button",
+        ...attributes,
+        ...listeners,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactRouterDom.Link,
+    {
+      "data-testid": "tab-button",
+      to,
+      title,
+      className: cx("tab-header item", className),
+      ref: setNodeRef,
+      style,
+      ...attributes,
+      ...listeners,
+      children
+    }
+  );
+};
+function RouteTabs({ pages, onOrderChange, basePath, ...otherProps }) {
+  const [dragging, setDragging] = React.useState(false);
+  const { pathname, state } = reactRouterDom.useLocation();
+  function determineBasePath() {
+    const lastPathSegment = pathname.split("/").reverse()[0];
+    if (pages.some((page) => page.path === lastPathSegment)) {
+      return pathname.substring(0, pathname.lastIndexOf("/"));
+    } else {
+      return pathname;
+    }
+  }
+  function handleDragEnd(event) {
+    setDragging(false);
+    const { active, over } = event;
+    if (active.id !== over?.id && onOrderChange) {
+      const oldIndex = pages.findIndex((page) => page.path === active.id);
+      const newIndex = pages.findIndex((page) => page.path === over?.id);
+      onOrderChange(oldIndex, newIndex);
+    }
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: dragging ? "draggable-area" : "", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      core.DndContext,
+      {
+        collisionDetection: core.closestCenter,
+        onDragEnd: handleDragEnd,
+        onDragStart: () => setDragging(true),
+        modifiers: [modifiers.restrictToHorizontalAxis],
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "di tabs", children: /* @__PURE__ */ jsxRuntime.jsx(
+          sortable.SortableContext,
+          {
+            items: pages.map((page) => ({ ...page, id: page.path })),
+            strategy: sortable.horizontalListSortingStrategy,
+            children: pages.map(({ path, renderHeading, headingTitle, draggingDisabled, disabled: pageDisabled }) => {
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                TabHeader,
+                {
+                  id: path,
+                  to: resolvePath(basePath || determineBasePath(), path),
+                  title: headingTitle,
+                  draggingDisabled: pageDisabled || draggingDisabled || !onOrderChange || !dragging && !pathname.endsWith(path),
+                  children: renderHeading(otherProps)
+                },
+                path
+              );
+            })
+          }
+        ) })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(reactRouterDom.Switch, { children: [
+      pages.map(({ renderBody, path }) => /* @__PURE__ */ jsxRuntime.jsx(
+        reactRouterDom.Route,
+        {
+          path: resolvePath(basePath || determineBasePath(), path),
+          render: () => renderBody(otherProps)
+        },
+        path
+      )),
+      /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Route, { children: /* @__PURE__ */ jsxRuntime.jsx(
+        reactRouterDom.Redirect,
+        {
+          to: {
+            pathname: resolvePath(basePath || determineBasePath(), pages[0].path),
+            state
+          }
+        }
+      ) })
+    ] })
+  ] });
+}
+const defaultIconFolderOpen = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAMZJREFUeNpi/P//PwMtARMDjcHQt4ABGgchQPwKxMWBzwKxKFlmQy14g8dwGL5MqiXIFvynEgb5VJmWFoDwImQLWNB8pQ/EjyiM1j/IHHQLPgHxB3ok00dUCKpnuCzQAmJZKjh+Jy4L3KkUOjgtcKNG/gXi3cg5GRZuGkD8jQrhfwpmNroPbIGYkwo+2IErFXlQKfx3oRd2MK99oELwfIDlL+Qgegul+ang+u0ouRnqg0ACxTWx+CIQKyGbzThaJw+4BQABBgBH38BkTQm7ZwAAAABJRU5ErkJggg==";
+const defaultIconFolderClosed = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAGpJREFUeNpi/P//PwMtARMDjcHQt4ABFAfQeAgH4jcgIRy4gyxzkSzAZzjJlmCz4D+VMMih4TBzGWHJlJGRkZrp9S3QXBGwuTSyAOR6xtF8MGrBqAUDYMFbahYV5BTXlBV2o5E8YBYABBgAxQJ9mxTaZMQAAAAASUVORK5CYII=";
+const defaultIconFolderLoading = "data:image/svg+xml,%3csvg%20version='1.1'%20id='Layer_1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20x='0px'%20y='0px'%20width='24px'%20height='24px'%20viewBox='0%200%2024%2024'%20style='enable-background:new%200%200%2050%2050;'%20xml:space='preserve'%3e%3crect%20x='0'%20y='0'%20width='5'%20height='10'%20fill='%23000'%3e%3canimateTransform%20attributeType='xml'%20attributeName='transform'%20type='translate'%20values='0%200;%200%2014;%200%200'%20begin='0'%20dur='0.6s'%20repeatCount='indefinite'%20/%3e%3c/rect%3e%3crect%20x='9'%20y='0'%20width='5'%20height='10'%20fill='%23000'%3e%3canimateTransform%20attributeType='xml'%20attributeName='transform'%20type='translate'%20values='0%200;%200%2014;%200%200'%20begin='0.2s'%20dur='0.6s'%20repeatCount='indefinite'%20/%3e%3c/rect%3e%3crect%20x='19'%20y='0'%20width='5'%20height='10'%20fill='%23000'%3e%3canimateTransform%20attributeType='xml'%20attributeName='transform'%20type='translate'%20values='0%200;%200%2014;%200%200'%20begin='0.4s'%20dur='0.6s'%20repeatCount='indefinite'%20/%3e%3c/rect%3e%3c/svg%3e";
+const defaultIconLeafNode = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjIwNDI3RTg2NEQxQjExRTc4OEM3RTkwQjYwNjA2OTk5IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjIwNDI3RTg3NEQxQjExRTc4OEM3RTkwQjYwNjA2OTk5Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MjA0MjdFODQ0RDFCMTFFNzg4QzdFOTBCNjA2MDY5OTkiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MjA0MjdFODU0RDFCMTFFNzg4QzdFOTBCNjA2MDY5OTkiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5FrZPxAAAA5UlEQVR42qzTvQ7BUBTA8UpEYraJWAwSNVgMHsDIZvUEngWDisTiBTyA4A3EJEiMYrBJGBBf/yO3UlVNq07y63Cbc3rvuaea9hkZ1LHAUZmrtYzmEhG0cMX9C3nXQdQpeeiSaDdSOa8wfCSbWmayjssPBSRHD/EoqzMtscEeN8SQQwVVhB361pRHDX1VYGf5whZjlJDHymEXclPaycN2e4hjYFs/eS0gJkiibVmT4z634bVxaxRQxBQzKdDw2X0Zpi7SSEiBbIBrTAUZJOOvoxz4Z7KGriZMBuuMg+p2U/XrLR4CDACHu7RW+98pzwAAAABJRU5ErkJggg==";
+var SelectionState = /* @__PURE__ */ ((SelectionState2) => {
+  SelectionState2["ALL"] = "all";
+  SelectionState2["SOME"] = "some";
+  SelectionState2["NONE"] = "none";
+  return SelectionState2;
+})(SelectionState || {});
+const Skeleton = ({ lastChild }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "skeleton", children: [
+  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "skeleton-cell top" }),
+  /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: "skeleton-cell bottom",
+      style: {
+        visibility: lastChild ? "hidden" : "initial"
+      }
+    }
+  )
+] });
+const NodeImage = ({ node, leafNode, expanded, isLoading, onExpand }) => {
+  let imageSrc;
+  if (leafNode) {
+    imageSrc = node.image || defaultIconLeafNode;
+  } else {
+    if (isLoading) {
+      imageSrc = defaultIconFolderLoading;
+    } else if (expanded) {
+      imageSrc = node.expandedImage || defaultIconFolderOpen;
+    } else {
+      imageSrc = node.closedImage || defaultIconFolderClosed;
+    }
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "icon-container", children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: imageSrc, alt: "node", onClick: onExpand }) });
+};
+class NodeInfo extends React__namespace.PureComponent {
+  constructor() {
+    super(...arguments);
+    this.onSelect = (event) => {
+      const { onSelect, selectionState } = this.props;
+      onSelect(selectionState === SelectionState.SOME ? false : event.currentTarget.checked);
+    };
+    this.onLabelClick = () => {
+      const { onSelect, selectionState } = this.props;
+      onSelect(selectionState === SelectionState.SOME ? false : this.inputRef ? !this.inputRef.checked : false);
+    };
+  }
+  componentDidMount() {
+    this.updateSelectionState();
+  }
+  componentDidUpdate() {
+    this.updateSelectionState();
+  }
+  updateSelectionState() {
+    const { selectionState } = this.props;
+    if (this.inputRef) {
+      this.inputRef.indeterminate = selectionState === SelectionState.SOME;
+    }
+  }
+  render() {
+    const {
+      node,
+      node: { name },
+      leafNode,
+      expanded,
+      isLastChild,
+      onExpand,
+      selectionState,
+      isLoading
+    } = this.props;
+    const selected = selectionState === SelectionState.ALL;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `node-info ${selected ? "selected" : ""}`, children: [
+      isLastChild !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { lastChild: isLastChild }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        NodeImage,
+        {
+          node,
+          leafNode,
+          expanded,
+          isLoading,
+          onExpand
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          ref: (ref) => {
+            this.inputRef = ref;
+          },
+          type: "checkbox",
+          checked: selectionState === SelectionState.ALL,
+          onChange: this.onSelect
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "name", onClick: this.onLabelClick, children: name })
+    ] });
+  }
+}
+class Node extends React.Component {
+  constructor() {
+    super(...arguments);
+    this.state = {
+      expanded: false,
+      selectionState: this.getSelectionState(),
+      isLoading: false
+    };
+    this.toggleExpand = () => {
+      const { node, lazyLoadingFunction } = this.props;
+      if (node.lazyLoadable) {
+        this.setState(
+          {
+            isLoading: true
+          },
+          () => {
+            lazyLoadingFunction(node).then(
+              () => this.setState({
+                expanded: true,
+                isLoading: false
+              })
+            );
+          }
+        );
+      } else {
+        this.setState({
+          expanded: !this.state.expanded
+        });
+      }
+    };
+    this.onSelect = (toggled) => {
+      const { node, selectNodes, deselectNodes, selectedNodes } = this.props;
+      if (toggled) {
+        const childNodes = getAllLeaves(node).filter((node2) => !selectedNodes.includes(node2.id));
+        selectNodes(childNodes);
+      } else {
+        const childNodes = getAllLeaves(node).filter((node2) => selectedNodes.includes(node2.id));
+        deselectNodes(childNodes);
+      }
+    };
+  }
+  /**
+   * Update folder nodes only if the selection changed, or expanded changed
+   * Update leaf nodes only if the previously selected nodes include this leaf and the currently
+   * selected nodes do not include this leaf, and vice versa.
+   * @param {Props} prevProps
+   * @param {State} prevState
+   */
+  shouldComponentUpdate(prevProps, prevState) {
+    const { selectedNodes: prevSelectedNodes, treeSize: prevTreeSize } = prevProps;
+    const { expanded: prevExpanded, selectionState: prevSelectionState, isLoading: prevIsLoading } = prevState;
+    const { selectedNodes, node, treeSize } = this.props;
+    const { expanded, selectionState, isLoading } = this.state;
+    if (prevIsLoading !== isLoading) return true;
+    if (prevTreeSize !== treeSize) return true;
+    if (this.isLeaf()) {
+      const selectionChangedForLeaf = prevSelectedNodes.includes(node.id) && !selectedNodes.includes(node.id) || !prevSelectedNodes.includes(node.id) && selectedNodes.includes(node.id);
+      return selectionChangedForLeaf || prevSelectionState !== selectionState;
+    } else {
+      return prevSelectedNodes.length !== selectedNodes.length || prevExpanded !== expanded || prevSelectionState !== selectionState;
+    }
+  }
+  componentDidMount() {
+    this.setState({
+      selectionState: this.getSelectionState()
+    });
+  }
+  componentDidUpdate() {
+    this.setState({
+      selectionState: this.getSelectionState()
+    });
+  }
+  isLeaf() {
+    const { node } = this.props;
+    return node.children === void 0;
+  }
+  getSelectionState() {
+    const { node, selectedNodes } = this.props;
+    if (this.isLeaf()) {
+      return selectedNodes.includes(node.id) ? SelectionState.ALL : SelectionState.NONE;
+    } else {
+      const leafIds = getAllLeafIds(node);
+      const intersection = intersectArrays(leafIds, selectedNodes);
+      if (intersection.length === leafIds.length && leafIds.length !== 0) {
+        return SelectionState.ALL;
+      } else if (intersection.length === 0) {
+        return SelectionState.NONE;
+      }
+      return SelectionState.SOME;
+    }
+  }
+  render() {
+    const { node, isLastChild, ...commonNodeProps } = this.props;
+    const { expanded, selectionState, isLoading } = this.state;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "node", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        NodeInfo,
+        {
+          node,
+          displayName: node.name,
+          leafNode: this.isLeaf(),
+          expanded,
+          isLastChild,
+          onExpand: this.toggleExpand,
+          onSelect: this.onSelect,
+          isLoading,
+          selectionState
+        }
+      ),
+      expanded && node.children && node.children.map((childNode, i) => /* @__PURE__ */ React.createElement(
+        Node,
+        {
+          ...commonNodeProps,
+          key: i,
+          node: childNode,
+          isLastChild: i === (node.children || []).length - 1
+        }
+      ))
+    ] });
+  }
+}
+class TreeView extends React.Component {
+  constructor() {
+    super(...arguments);
+    this.state = {
+      treeData: this.props.treeData,
+      tree: {
+        id: "virtualRootNode",
+        name: "",
+        children: [],
+        path: "/",
+        originalNode: {}
+      },
+      treeSize: 0,
+      selectedNodes: this.props.selectedNodes || []
+    };
+    this.convert = convertToTree(this.props.dataSetConfig);
+    this.selectNodes = (nodes) => {
+      const { onSelect } = this.props;
+      const { selectedNodes } = this.state;
+      this.setState({
+        selectedNodes: mergeNodeIdArrays(
+          selectedNodes,
+          nodes.map(({ id }) => id)
+        )
+      });
+      onSelect(nodes.map(({ originalNode, path }) => ({ ...originalNode, $$path: path })));
+    };
+    this.deselectNodes = (nodes) => {
+      const { onDeselect } = this.props;
+      const { selectedNodes } = this.state;
+      this.setState({
+        selectedNodes: removeNodeIds(
+          selectedNodes,
+          nodes.map(({ id }) => id)
+        )
+      });
+      onDeselect(nodes.map(({ originalNode, path }) => ({ ...originalNode, $$path: path })));
+    };
+    this.addTreeData = (dataSet, underNode) => {
+      const { tree } = this.state;
+      const subTree = this.convert(dataSet, underNode.path);
+      const newTree = {
+        id: "virtualRootNode",
+        name: "",
+        children: (tree.children || []).map(
+          (rootNode) => findNodeAndApplyPatch(rootNode, underNode.id, {
+            lazyLoadable: false,
+            children: subTree
+          })
+        ),
+        path: "/",
+        originalNode: {}
+      };
+      const newTreeSize = getTreeSize(newTree);
+      this.setState({
+        tree: newTree,
+        treeSize: newTreeSize
+      });
+    };
+    this.lazyLoadingFunction = (node) => {
+      const { lazyLoadingFunction } = this.props;
+      if (!lazyLoadingFunction) return Promise.resolve();
+      return lazyLoadingFunction(node.originalNode).then((dataSet) => {
+        this.addTreeData(dataSet, node);
+      }).catch(() => {
+        return Promise.resolve();
+      });
+    };
+  }
+  componentDidMount() {
+    const { treeData } = this.props;
+    const tree = this.initTree(treeData);
+    const treeSize = getTreeSize(tree);
+    this.setState({
+      tree,
+      treeSize
+    });
+  }
+  componentDidUpdate(prevProps) {
+    const { selectedNodes: prevNodes } = prevProps;
+    const { selectedNodes } = this.props;
+    if (selectedNodes && prevNodes && prevNodes.length !== selectedNodes.length) {
+      this.setState({
+        selectedNodes
+      });
+    }
+  }
+  initTree(treeData) {
+    return {
+      id: "virtualRootNode",
+      name: "",
+      children: this.convert(treeData),
+      path: "/",
+      originalNode: {}
+    };
+  }
+  render() {
+    const { tree, selectedNodes, treeSize } = this.state;
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "treeview", children: tree.children && tree.children.map((item, i) => /* @__PURE__ */ jsxRuntime.jsx(
+      Node,
+      {
+        node: item,
+        selectedNodes,
+        selectNodes: this.selectNodes,
+        deselectNodes: this.deselectNodes,
+        treeSize,
+        lazyLoadingFunction: this.lazyLoadingFunction
+      },
+      i
+    )) });
+  }
+}
+const iconSettings = "data:image/svg+xml,%3csvg%20id='Layer_1'%20data-name='Layer%201'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3e%3ccircle%20cx='7.5'%20cy='3.5'%20r='1.5'/%3e%3ccircle%20cx='7.5'%20cy='7.5'%20r='1.5'/%3e%3ccircle%20cx='7.5'%20cy='11.5'%20r='1.5'/%3e%3c/svg%3e";
+const MultiMenuContext = React__namespace.createContext({
+  toggleMenu: () => {
+  }
+});
+function MultiMenuFunctional({ menuButton, children, direction, className, open, onOpenChange }) {
+  const [contentVisible, setContentVisible] = React.useState(false);
+  const toggleMenu = () => {
+    setContentVisible(!contentVisible);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { children: /* @__PURE__ */ jsxRuntime.jsx(
+    ngUiBasicComponents.Popup,
+    {
+      open: open ?? contentVisible,
+      onOpenChange: onOpenChange ?? setContentVisible,
+      handler: menuButton,
+      placement: direction,
+      className,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "di multimenu", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: `drop ${direction ? direction : "bottom"} ${contentVisible ? "show" : ""}`, children: /* @__PURE__ */ jsxRuntime.jsx(MultiMenuContext.Provider, { value: { toggleMenu }, children }) }) })
+    }
+  ) });
+}
+const sizeOptions = [5, 10, 15, 20, 50];
+function Pagination({ onChangePage, page, totalPages, onChangeSize, size }) {
+  const changePageDebouncedRef = React.useRef(null);
+  const { current: changePageDebounced } = changePageDebouncedRef;
+  const [pageRaw, setPageRaw] = React.useState(`${page + 1}`);
+  const [menuOpen, setMenuOpen] = React.useState(false);
+  React.useEffect(() => {
+    changePageDebouncedRef.current = lodash.debounce(onChangePage, 500);
+  }, [onChangePage]);
+  React.useEffect(() => {
+    setPageRaw(`${page + 1}`);
+  }, [page]);
+  function goToFirstPage() {
+    onChangePage(0);
+  }
+  function goToPrevPage() {
+    if (page > 0) {
+      onChangePage(page - 1);
+    }
+  }
+  function goToNextPage() {
+    if (page < totalPages - 1) {
+      onChangePage(page + 1);
+    }
+  }
+  function goToLastPage() {
+    onChangePage(totalPages - 1);
+  }
+  function handleChangeSize(event) {
+    if (onChangeSize) {
+      const newSize = parseInt(event.target.value, 10);
+      onChangeSize(newSize);
+      setMenuOpen(false);
+    }
+  }
+  function handlePageInputChange(event) {
+    const rawValue = event.target.value;
+    if (rawValue.trim() === "") {
+      setPageRaw(rawValue);
+      return;
+    }
+    const parsedPage = Number(event.target.value);
+    if (!Number.isNaN(parsedPage) && parsedPage >= 1 && parsedPage <= totalPages) {
+      changePageDebounced?.(parsedPage - 1);
+      setPageRaw(rawValue);
+    }
+  }
+  function handlePageInputBlur() {
+    setPageRaw(`${page + 1}`);
+  }
+  const isLastPage = page >= totalPages - 1;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "di pagination-holder", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "di pagination", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: `prev ${page === 0 ? "disabled" : ""}`, onClick: goToFirstPage, children: "«" }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: `prev ${page === 0 ? "disabled" : ""}`, onClick: goToPrevPage, children: "‹" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "info", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Trans, { i18nKey: "reactable.pagination.page", children: "Page" }),
+      /* @__PURE__ */ jsxRuntime.jsx("input", { value: pageRaw, onChange: handlePageInputChange, onBlur: handlePageInputBlur }),
+      typeof process !== "undefined" && process?.env?.STORYBOOK_MODE ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        "of   ",
+        totalPages
+      ] }) : /* @__PURE__ */ jsxRuntime.jsxs(Trans, { i18nKey: "reactable.pagination.ofTotal", children: [
+        " of   ",
+        { totalPages }
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: `next ${isLastPage ? "disabled" : ""}`, onClick: goToNextPage, children: "›" }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: `next ${isLastPage ? "disabled" : ""}`, onClick: goToLastPage, children: "»" }),
+    onChangeSize && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "options", children: /* @__PURE__ */ jsxRuntime.jsx(
+      MultiMenuFunctional,
+      {
+        direction: "left",
+        open: menuOpen,
+        onOpenChange: setMenuOpen,
+        menuButton: /* @__PURE__ */ jsxRuntime.jsx(
+          ngUiBasicComponents.Button,
+          {
+            naked: true,
+            title: {
+              id: "trend.settings.buttonTitle",
+              defaultValue: "Settings"
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: iconSettings, alt: "settings icon", style: { width: 16, height: 16 } })
+          }
+        ),
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: "di form",
+            style: {
+              width: 200,
+              padding: 10
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "field", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("label", { children: /* @__PURE__ */ jsxRuntime.jsx(Trans, { i18nKey: "reactable.pagination.entriesPerPage", children: "Entries per page" }) }),
+                /* @__PURE__ */ jsxRuntime.jsx("select", { onChange: handleChangeSize, value: size, children: sizeOptions.map((sizeOption) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: sizeOption, children: sizeOption }, sizeOption)) })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { children: /* @__PURE__ */ jsxRuntime.jsx(Trans, { i18nKey: "reactable.pagination.changePageWillBeStored", children: "Your changes will be stored for view." }) })
+            ]
+          }
+        )
+      }
+    ) })
+  ] }) });
+}
+const getInitialValueFromColumnDef = (columnDef) => {
+  return columnDef.filterable?.initialValue ?? "";
+};
+const ReactableTextFilter = ({ columnDef, changeFilter }) => {
+  const { t } = useTranslation();
+  const [value, setValue] = React.useState(getInitialValueFromColumnDef(columnDef));
+  const handleChange = (event) => {
+    const newValue = event.target.value;
+    setValue(newValue);
+    changeFilter(columnDef.name, newValue);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "input",
+    {
+      type: "text",
+      placeholder: t(`${columnDef.filterable?.placeholder ?? "reactable.filter.placeholder"}`, {
+        defaultValue: "Filter..."
+      }),
+      onChange: handleChange,
+      value
+    }
+  );
+};
+function makePageable(items, paginationSettings, customSortFunction) {
+  if (!items) {
+    return null;
+  }
+  const { page, size, sort } = paginationSettings;
+  const sortedItems = customSortFunction ? customSortFunction(items, sort, sortItems) : sortItems(items, sort);
+  return {
+    content: sortedItems.slice(page * size, (page + 1) * size),
+    totalElements: items.length,
+    totalPages: Math.ceil(items.length / size),
+    number: page,
+    size,
+    sort: [sort]
+  };
+}
+const getDefaultFilterFn = (filterType, fieldName) => {
+  if (filterType === "text") {
+    return (item, filterValue) => item[fieldName] && item[fieldName].toString().toLowerCase().includes(filterValue.toLowerCase());
+  } else {
+    return (item, filterValue) => item[fieldName] === filterValue;
+  }
+};
+function filterItems(items, columnDefs, filterSettings) {
+  if (items) {
+    return items.filter((item) => {
+      return Object.keys(filterSettings).every((columnName) => {
+        const filterValue = filterSettings[columnName];
+        if (filterValue && filterValue.length > 0) {
+          const columnDef = findColumnDefByName(columnName, columnDefs);
+          if (columnDef.filterable) {
+            const filterFn = columnDef.filterable.filterFn || getDefaultFilterFn(columnDef.filterable.filterType, columnDef.name);
+            return filterFn(item, filterValue);
+          }
+          return false;
+        }
+        return true;
+      });
+    });
+  }
+  return null;
+}
+function findColumnDefByName(columnName, columnDefs) {
+  const columnDef = columnDefs.find((cd) => cd.name === columnName);
+  if (!columnDef) {
+    throw Error(`column definition not found for ${columnName}`);
+  }
+  return columnDef;
+}
+function sortItems(items, sort) {
+  return items.sort((itemA, itemB) => {
+    const a = typeof itemA === "object" && itemA?.[sort.property] || 0;
+    const b = typeof itemB === "object" && itemB?.[sort.property] || 0;
+    const reverseFactor = sort.direction === "ASC" ? 1 : -1;
+    if (a === b) {
+      return 0;
+    } else if (typeof a === "string" && typeof b === "string") {
+      return a.localeCompare(b) * reverseFactor;
+    } else if (typeof a === "number" && typeof b === "number") {
+      return (a - b) * reverseFactor;
+    } else {
+      return a.toString().localeCompare(b.toString()) * reverseFactor;
+    }
+  });
+}
+function extendColumnDefsWithCheckboxes(columnDefs, onSelectChange, onSelectAllChange, selectedAll, selectedItems, uniqueItemKey) {
+  return [
+    {
+      name: "checkbox",
+      label: /* @__PURE__ */ jsxRuntime.jsx(
+        ngUiBasicComponents.Checkbox,
+        {
+          value: selectedAll,
+          onChange: onSelectAllChange,
+          title: {
+            id: "components.filtertable.selectAllItems",
+            defaultValue: "Select/deselect all items in search result"
+          }
+        }
+      ),
+      sortable: false,
+      render: (item) => {
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          ngUiBasicComponents.Checkbox,
+          {
+            value: selectedItems.includes(uniqueItemKey(item)),
+            onChange: (selected) => onSelectChange(selected, item)
+          }
+        );
+      },
+      width: "1%"
+    },
+    ...columnDefs
+  ];
+}
+function getClassName(tableName, columnName) {
+  return `${tableName || "unnamedTable"}-${columnName}`;
+}
+function getSortedOptions(options, compareOptions) {
+  if (!compareOptions) {
+    return lodash.orderBy(options, "label", "asc");
+  }
+  if (options.every((option) => !option.options)) {
+    const singleOptions = options;
+    return [...singleOptions].sort(compareOptions);
+  }
+  if (options.every((option) => option.options)) {
+    const groupOptions = options;
+    return groupOptions.map((option) => ({ ...option, options: [...option.options].sort(compareOptions) }));
+  }
+  throw new Error("Mixing groups with single options not allowed");
+}
+class SelectWithSearch extends React.Component {
+  constructor() {
+    super(...arguments);
+    this.state = {
+      options: [],
+      inputValue: null
+    };
+    this.selectRef = React.createRef();
+    this.portalRoot = null;
+    this.updateOptions = () => {
+      const { options, specialOptions, compareOptions } = this.props;
+      const sortedOptions = getSortedOptions(options, compareOptions);
+      if (specialOptions) {
+        this.setState({
+          // @ts-ignore
+          options: [...sortedOptions, ...specialOptions]
+        });
+      } else {
+        this.setState({
+          options: sortedOptions
+        });
+      }
+    };
+    this.filterOption = (option, inputValue) => {
+      return option.label.toString().toLowerCase().startsWith(inputValue.toLowerCase());
+    };
+    this.getContainerClasses = () => {
+      const { specialOptions } = this.props;
+      if (specialOptions) {
+        return ["select-search-container", "special"];
+      }
+      return ["select-search-container"];
+    };
+  }
+  componentDidMount() {
+    this.updateOptions();
+    if (this.props["data-testid"] && this.selectRef && this.selectRef.current) {
+      this.selectRef.current.controlRef.setAttribute("data-testid", this.props["data-testid"]);
+    }
+    if (this.props.menuPortalTarget) {
+      this.portalRoot = document.createElement("div");
+      const classes = this.getContainerClasses();
+      this.portalRoot.classList.add(...classes);
+      this.props.menuPortalTarget.appendChild(this.portalRoot);
+    }
+  }
+  componentDidUpdate(prevProps) {
+    if (!lodash.isEqual(prevProps.options, this.props.options) || prevProps.freeForm !== this.props.freeForm) {
+      this.updateOptions();
+    }
+  }
+  componentWillUnmount() {
+    if (this.props.menuPortalTarget && this.portalRoot) {
+      this.props.menuPortalTarget.removeChild(this.portalRoot);
+    }
+  }
+  render() {
+    const { noResultsMessage, placeholder, value, onChange, clearable, loading, disabled } = this.props;
+    const { options } = this.state;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Select,
+      {
+        ref: this.selectRef,
+        joinValues: true,
+        name: "form-field-name",
+        className: this.getContainerClasses().join(" "),
+        classNamePrefix: "select-search",
+        isClearable: clearable,
+        noOptionsMessage: noResultsMessage ? () => noResultsMessage : void 0,
+        options,
+        value: value || null,
+        onChange,
+        onInputChange: (newValue) => {
+          if (this.props.freeForm && newValue) {
+            this.setState({ inputValue: newValue });
+          }
+        },
+        placeholder,
+        filterOption: this.filterOption,
+        isLoading: loading,
+        menuPortalTarget: this.portalRoot,
+        isDisabled: disabled,
+        onBlur: () => {
+          if (this.props.freeForm && this.state.inputValue !== null) {
+            this.setState({ options: this.props.options });
+            this.setState({ inputValue: this.state.inputValue }, () => {
+              const newItem = {
+                type: "item",
+                value: this.state.inputValue,
+                label: this.state.inputValue
+              };
+              this.setState(
+                (prevState) => ({
+                  options: [newItem, ...prevState.options]
+                })
+              );
+              this.state.inputValue = null;
+              onChange(newItem);
+            });
+          }
+        }
+      }
+    );
+  }
+}
+const ReactableTableFilterRow = ({ columnDefs, onFilter, tableName }) => {
+  const { t } = useTranslation();
+  const [state, setState] = React.useState({});
+  const onFilterRef = React.useRef(onFilter);
+  React.useEffect(() => {
+    onFilterRef.current = onFilter;
+  }, [onFilter]);
+  React.useEffect(() => {
+    setState((prev) => {
+      const merged = {};
+      for (const cd of columnDefs) {
+        merged[cd.name] = prev[cd.name] !== void 0 ? prev[cd.name] : cd.filterable?.initialValue ?? "";
+      }
+      const prevKeys = Object.keys(prev);
+      const mergedKeys = Object.keys(merged);
+      const sameKeys = mergedKeys.length === prevKeys.length && mergedKeys.every((k) => prevKeys.includes(k));
+      const sameValues = sameKeys && mergedKeys.every((k) => merged[k] === prev[k]);
+      if (sameKeys && sameValues) {
+        return prev;
+      }
+      if (Object.values(merged).some((v) => v)) {
+        onFilterRef.current(merged);
+      }
+      return merged;
+    });
+  }, [columnDefs]);
+  const changeFilter = (columnName, value) => {
+    const newState = { ...state, [columnName]: value };
+    setState(newState);
+    onFilter(newState);
+  };
+  const getFilterByColumnDef = (columnDef) => {
+    if (columnDef.filterable) {
+      switch (columnDef.filterable.filterType) {
+        case "text":
+          return textFilter(columnDef);
+        case "options":
+          return optionsFilter(columnDef);
+        default:
+          throw new Error(`Filter type ${columnDef.filterable.filterType} not supported`);
+      }
+    }
+    return null;
+  };
+  const textFilter = (columnDef) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(ReactableTextFilter, { columnDef, changeFilter });
+  };
+  const optionsFilter = (columnDef) => {
+    if (!columnDef.filterable?.filterOptions) {
+      throw new Error(`No filterOptions found for column type: options on columnDef: ${columnDef.name}`);
+    }
+    const filterOptions = columnDef.filterable.filterOptions;
+    if (columnDef.filterable.searchableOptions) {
+      const searchableOptions = filterOptions.map((option) => ({
+        type: "item",
+        label: typeof option.label === "string" ? option.label : t(option.label.id, { defaultValue: option.label.defaultValue }),
+        value: option.value
+      }));
+      const value = state[columnDef.name];
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        SelectWithSearch,
+        {
+          options: searchableOptions,
+          onChange: (item) => {
+            changeFilter(columnDef.name, item?.value);
+          },
+          value: value ? searchableOptions.find((opt) => opt.value === value.toString()) : null,
+          clearable: true
+        }
+      );
+    } else {
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "select",
+        {
+          onChange: (event) => {
+            changeFilter(columnDef.name, event.target.value);
+          },
+          value: state[columnDef.name],
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: t("reactable.filter.all", {
+              defaultValue: "- All -"
+            }) }, ""),
+            filterOptions.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
+              "option",
+              {
+                className: getClassName(tableName, columnDef.name),
+                value: option.value,
+                children: typeof option.label === "string" ? option.label : t(option.label.id, { defaultValue: option.label.defaultValue })
+              },
+              option.value
+            ))
+          ]
+        }
+      );
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "di filterrow form", children: columnDefs.map((columnDef) => /* @__PURE__ */ jsxRuntime.jsx("td", { style: { textAlign: columnDef.align || "left" }, children: getFilterByColumnDef(columnDef) }, columnDef.name)) });
+};
+const toggleSortDirection = (direction) => direction === "ASC" ? "DESC" : "ASC";
+class ReactableTableHeader extends React.Component {
+  constructor() {
+    super(...arguments);
+    this.handleSort = (columnDef) => {
+      const { paginationSettings, onSort } = this.props;
+      const direction = columnDef.name === paginationSettings.sort.property ? toggleSortDirection(paginationSettings.sort.direction) : columnDef.defaultSortDirection || "ASC";
+      onSort(columnDef.name, direction);
+    };
+    this.getClassName = (columnDef) => {
+      const { paginationSettings, tableName } = this.props;
+      const className = getClassName(tableName, columnDef.name);
+      if (columnDef.sortable) {
+        if (columnDef.name === paginationSettings.sort.property) {
+          if (paginationSettings.sort.direction === "ASC") {
+            return `${className} sortable sortAsc`;
+          } else {
+            return `${className} sortable sortDes`;
+          }
+        } else {
+          return `${className} sortable`;
+        }
+      } else {
+        return `${className}`;
+      }
+    };
+    this.printLabel = (label) => {
+      if (isTranslationDescriptor(label)) {
+        return /* @__PURE__ */ jsxRuntime.jsx(Trans, { i18nKey: label.id, children: label.defaultValue });
+      }
+      return label;
+    };
+  }
+  render() {
+    return /* @__PURE__ */ jsxRuntime.jsx("tr", { children: this.props.columnDefs.map((columnDef) => /* @__PURE__ */ jsxRuntime.jsx(
+      "th",
+      {
+        style: {
+          width: columnDef.width || "auto",
+          textAlign: columnDef.align || "left"
+        },
+        className: this.getClassName(columnDef),
+        onClick: () => {
+          if (columnDef.sortable) {
+            this.handleSort(columnDef);
+          }
+        },
+        children: this.printLabel(columnDef.label)
+      },
+      columnDef.name
+    )) });
+  }
+}
+function isTranslationDescriptor(label) {
+  return typeof label === "object" && label != null && "id" in label && label.id !== void 0;
+}
+class ReactableTableRow extends React.Component {
+  constructor() {
+    super(...arguments);
+    this.getRowClass = () => {
+      const { rowDef, item } = this.props;
+      if (rowDef && typeof rowDef.getRowClass === "function") {
+        return rowDef.getRowClass(item);
+      } else {
+        return "";
+      }
+    };
+    this.handleClick = () => {
+      const { rowDef, item } = this.props;
+      if (rowDef && typeof rowDef.onClick === "function") {
+        rowDef.onClick(item);
+      }
+    };
+    this.getTooltip = () => {
+      const { rowDef, item } = this.props;
+      if (rowDef && typeof rowDef.getTooltip === "function") {
+        return rowDef.getTooltip(item);
+      } else {
+        return "";
+      }
+    };
+    this.getRowStyle = () => {
+      const { rowDef, item } = this.props;
+      if (rowDef && rowDef.getRowStyle) {
+        return rowDef.getRowStyle(item);
+      } else {
+        return void 0;
+      }
+    };
+  }
+  render() {
+    const { columnDefs, item, tableName } = this.props;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "tr",
+      {
+        className: this.getRowClass(),
+        onClick: this.handleClick,
+        title: this.getTooltip(),
+        style: this.getRowStyle(),
+        children: columnDefs.map((columnDef) => {
+          const textAlign = columnDef.align || "left";
+          const cursor = columnDef.onClick ? "pointer" : "inherit";
+          const whiteSpace = columnDef.whiteSpace || void 0;
+          const onClick = columnDef.onClick ? () => columnDef.onClick ? columnDef.onClick(item) : void 0 : void 0;
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            "td",
+            {
+              style: {
+                textAlign,
+                cursor,
+                // @ts-ignore
+                whiteSpace
+              },
+              onClick,
+              className: getClassName(tableName, columnDef.name),
+              children: columnDef.render(item)
+            },
+            `${item.id}_${columnDef.name}`
+          );
+        })
+      }
+    );
+  }
+}
+function ReactableTable({
+  columnDefs,
+  uniqueItemKey,
+  paginationSettings,
+  onSort,
+  onFilter,
+  tableName,
+  pageable,
+  isLoading,
+  rowDef,
+  clickable,
+  messageWhenEmpty,
+  "data-testid": testId
+}) {
+  const containerRef = React.useRef(null);
+  const tableRef = React.useRef(null);
+  const [showScrollingAdvice, setShowScrollingAdvice] = React.useState(false);
+  const [neverShowScrollingAdvice, setNeverShowScrollingAdvice] = React.useState(true);
+  const [hasInitialized, setHasInitialized] = React.useState(false);
+  const HIDE_SCROLLING_ADVICE_PATH = "uiConfigurations/nevershowscrollingadvice";
+  const LOCALSTORAGE_KEY = "reactable.neverShowScrollingAdvice";
+  const neverShowScrollingAdviceRef = React.useRef(neverShowScrollingAdvice);
+  React.useEffect(() => {
+    neverShowScrollingAdviceRef.current = neverShowScrollingAdvice;
+  }, [neverShowScrollingAdvice]);
+  const updateScrollingAdvice = () => {
+    if (containerRef.current && tableRef.current) {
+      setShowScrollingAdvice(
+        !neverShowScrollingAdviceRef.current && tableRef.current.scrollWidth > containerRef.current.offsetWidth
+      );
+    }
+  };
+  React.useEffect(() => {
+    setTimeout(() => {
+      (async () => {
+        const localValue = localStorage.getItem(LOCALSTORAGE_KEY);
+        const hasLocalValue = localValue !== null;
+        try {
+          const value = await ngUiApiClient.readAccountObject(HIDE_SCROLLING_ADVICE_PATH);
+          const neverShow = value === true;
+          setNeverShowScrollingAdvice(neverShow);
+          neverShowScrollingAdviceRef.current = neverShow;
+          localStorage.setItem(LOCALSTORAGE_KEY, String(neverShow));
+          if (!neverShow) {
+            updateScrollingAdvice();
+          }
+        } catch (error) {
+          if (hasLocalValue) {
+            const neverShow = localValue === "true";
+            setNeverShowScrollingAdvice(neverShow);
+            neverShowScrollingAdviceRef.current = neverShow;
+            if (!neverShow) {
+              updateScrollingAdvice();
+            }
+          } else {
+            setNeverShowScrollingAdvice(false);
+            neverShowScrollingAdviceRef.current = false;
+            updateScrollingAdvice();
+          }
+        }
+        setHasInitialized(true);
+      })();
+    }, 0);
+  }, []);
+  React.useEffect(() => {
+    updateScrollingAdvice();
+    window.addEventListener("resize", updateScrollingAdvice);
+    return () => window.removeEventListener("resize", updateScrollingAdvice);
+  }, [pageable, columnDefs]);
+  const showFilterRow = columnDefs.some((col) => col.filterable);
+  return /* @__PURE__ */ jsxRuntime.jsx(ngUiBasicComponents.SpinnerContainer, { show: isLoading, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, className: "di reactable scroll-x", children: [
+    hasInitialized && showScrollingAdvice && !isLoading && /* @__PURE__ */ jsxRuntime.jsx(
+      ngUiBasicComponents.Modal,
+      {
+        className: "scroll-horizontally-advice",
+        content: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Trans, { i18nKey: "reactable.scrollHorizontally.advice", children: "SHIFT + mouse wheel to scroll horizontally" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "scroll-horizontally-advice-buttons", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ngUiBasicComponents.Button,
+              {
+                primary: true,
+                onClick: async () => {
+                  await ngUiApiClient.writeAccountObject(HIDE_SCROLLING_ADVICE_PATH, true);
+                  localStorage.setItem(LOCALSTORAGE_KEY, "true");
+                  setNeverShowScrollingAdvice(true);
+                  neverShowScrollingAdviceRef.current = true;
+                  setShowScrollingAdvice(false);
+                },
+                children: /* @__PURE__ */ jsxRuntime.jsx(Trans, { i18nKey: "reactable.scrollHorizontally.neverShowAgain", children: "Never show again" })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(ngUiBasicComponents.Button, { onClick: () => setShowScrollingAdvice(false), children: /* @__PURE__ */ jsxRuntime.jsx(Trans, { i18nKey: "reactable.scrollHorizontally.ok", children: "OK" }) })
+          ] })
+        ] }),
+        width: "40%"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "table",
+      {
+        ref: tableRef,
+        className: cx("di reactable sortable hoverable", { selectable: clickable }),
+        "data-testid": testId,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsx(
+            ReactableTableHeader,
+            {
+              columnDefs,
+              paginationSettings,
+              onSort,
+              tableName
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("tbody", { children: [
+            onFilter && showFilterRow && /* @__PURE__ */ jsxRuntime.jsx(
+              ReactableTableFilterRow,
+              {
+                columnDefs,
+                onFilter,
+                tableName
+              }
+            ),
+            pageable?.content.length ? pageable.content.slice(0, paginationSettings.size).map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+              ReactableTableRow,
+              {
+                columnDefs,
+                item,
+                rowDef,
+                tableName
+              },
+              uniqueItemKey(item)
+            )) : !isLoading && /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: columnDefs.length, children: /* @__PURE__ */ jsxRuntime.jsx(Trans, { i18nKey: messageWhenEmpty ?? "reactable.noEntriesFound", children: "No entries found" }) }) })
+          ] })
+        ]
+      }
+    )
+  ] }) });
+}
+class Reactable extends React.Component {
+  componentDidUpdate() {
+    const { pageable, paginationSettings, onChangePage } = this.props;
+    if (!pageable) {
+      return;
+    }
+    const totalPages = pageable.totalPages || 0;
+    const currentPage = paginationSettings.page;
+    const clampedPage = totalPages > 0 ? Math.min(currentPage, totalPages - 1) : 0;
+    if (currentPage !== clampedPage) {
+      onChangePage(clampedPage);
+    }
+  }
+  render() {
+    const { paginationSettings, pageable, onChangePage, onChangeSize } = this.props;
+    const showPagination = onChangeSize ? pageable && pageable.totalElements > 0 : pageable && pageable.totalPages > 1;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ReactableTable, { ...this.props }),
+      pageable && showPagination && /* @__PURE__ */ jsxRuntime.jsx(
+        Pagination,
+        {
+          page: paginationSettings.page,
+          totalPages: pageable.totalPages,
+          onChangePage,
+          onChangeSize,
+          size: paginationSettings.size
+        }
+      )
+    ] });
+  }
+}
+const DEFAULT_PAGINATION_SETTINGS = {
+  page: 0,
+  size: 15,
+  sort: {
+    property: "name",
+    direction: "DESC"
+  }
+};
+class ReactableWithClientSidePagination extends React.Component {
+  constructor(props) {
+    super(props);
+    this.content = [];
+    this.calculatePageNumber = (items, paginationSettings2) => {
+      const { forceResetPaginationOnItemsChange } = this.props;
+      if (!forceResetPaginationOnItemsChange) {
+        const maxPageNumber = Math.floor((items.length - 1) / paginationSettings2.size);
+        if (maxPageNumber <= 0) {
+          this.handleChangePage(0);
+        } else if (maxPageNumber < paginationSettings2.page) {
+          this.handleChangePage(maxPageNumber);
+        }
+      } else {
+        this.handleChangePage(0);
+      }
+    };
+    this.handleChangePage = (page) => {
+      this.setState({
+        paginationSettings: { ...this.state.paginationSettings, page }
+      });
+    };
+    this.handleSort = (property, direction) => {
+      this.setState({
+        paginationSettings: {
+          ...this.state.paginationSettings,
+          sort: {
+            property,
+            direction
+          }
+        }
+      });
+    };
+    this.handleFilter = (filterSettings) => {
+      const { items, onFilter, columnDefs, onFilteredItemsChanged } = this.props;
+      this.setState(
+        {
+          paginationSettings: { ...this.state.paginationSettings, page: 0 },
+          filterSettings
+        },
+        () => {
+          if (onFilter) {
+            onFilter(filterSettings);
+          }
+          const filteredItems = filterItems(items, columnDefs, filterSettings);
+          this.setState({
+            filteredItems
+          });
+          if (filteredItems) {
+            onFilteredItemsChanged?.(filteredItems);
+          }
+        }
+      );
+    };
+    this.getPageable = () => {
+      const { customSortFunction, items, columnDefs, onContentChange } = this.props;
+      const { filterSettings, paginationSettings: paginationSettings2 } = this.state;
+      const filteredItems = filterItems(items, columnDefs, filterSettings);
+      const pageable = makePageable(filteredItems, paginationSettings2, customSortFunction);
+      if (pageable && pageable.content && !lodash.isEqual(pageable.content, this.content)) {
+        this.content = pageable.content;
+        if (onContentChange) {
+          onContentChange(this.content);
+        }
+      }
+      return pageable;
+    };
+    this.handleSelectChange = (selected, item) => {
+      const { onSelectedItemsChange, selectedItems = [], uniqueItemKey } = this.props;
+      if (onSelectedItemsChange) {
+        if (selected) {
+          const newSelectedItems = selectedItems.concat(uniqueItemKey(item));
+          onSelectedItemsChange(newSelectedItems);
+        } else {
+          onSelectedItemsChange(selectedItems.filter((key) => key !== uniqueItemKey(item)));
+        }
+      } else {
+        console.warn("ReactableWithClientSidePagination: onSelectedItemsChange property is missing");
+      }
+    };
+    this.handleSelectAllChange = (selectedAll) => {
+      const { onSelectedItemsChange, items, selectedItems = [], uniqueItemKey } = this.props;
+      const { filteredItems } = this.state;
+      const visibleItems = (filteredItems || items || []).map(uniqueItemKey);
+      if (onSelectedItemsChange) {
+        if (selectedAll) {
+          onSelectedItemsChange(lodash.uniqWith([...selectedItems, ...visibleItems], lodash.isEqual).sort());
+        } else {
+          onSelectedItemsChange(lodash.difference(selectedItems, visibleItems));
+        }
+      } else {
+        console.warn("ReactableWithClientSidePagination: onSelectedItemsChange property is missing");
+      }
+    };
+    this.areSelectedAll = () => {
+      const { items, selectedItems, uniqueItemKey } = this.props;
+      const { filteredItems } = this.state;
+      const visibleItems = filteredItems || items || [];
+      return !!selectedItems && visibleItems.every((item) => selectedItems.some((key) => key === uniqueItemKey(item)));
+    };
+    let paginationSettings = DEFAULT_PAGINATION_SETTINGS;
+    if (props.paginationSettings) {
+      paginationSettings = props.paginationSettings;
+    } else if (props.initialPaginationSettings) {
+      console.warn('initialPaginationSettings is deprecated! Please use "paginationSettings" instead');
+      paginationSettings = props.initialPaginationSettings;
+    } else {
+      console.error("Missing pagination settings!");
+    }
+    this.state = {
+      paginationSettings: paginationSettings || DEFAULT_PAGINATION_SETTINGS,
+      filterSettings: {},
+      filteredItems: null
+    };
+  }
+  componentDidUpdate(prevProps) {
+    const { items } = this.props;
+    const { items: prevItems } = prevProps;
+    const settings = this.props.paginationSettings || this.props.initialPaginationSettings;
+    const prevSettings = prevProps.paginationSettings || prevProps.initialPaginationSettings;
+    if (items && prevItems && items.length !== prevItems.length) {
+      this.calculatePageNumber(items, this.state.paginationSettings);
+    }
+    if (settings && !lodash.isEqual(settings, prevSettings)) {
+      this.setState(
+        {
+          paginationSettings: settings
+        },
+        () => this.handleChangePage(0)
+      );
+    }
+  }
+  render() {
+    const {
+      uniqueItemKey,
+      isLoading,
+      columnDefs,
+      rowDef,
+      tableName,
+      clickable,
+      selectable,
+      selectedItems,
+      onChangeSize
+    } = this.props;
+    const finalColumnDefs = selectable ? extendColumnDefsWithCheckboxes(
+      columnDefs,
+      this.handleSelectChange,
+      this.handleSelectAllChange,
+      this.areSelectedAll(),
+      selectedItems || [],
+      uniqueItemKey
+    ) : columnDefs;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Reactable,
+      {
+        columnDefs: finalColumnDefs,
+        rowDef,
+        uniqueItemKey,
+        paginationSettings: this.state.paginationSettings,
+        onChangePage: this.handleChangePage,
+        onChangeSize,
+        onSort: this.handleSort,
+        onFilter: this.handleFilter,
+        tableName,
+        pageable: this.getPageable(),
+        isLoading,
+        clickable,
+        "data-testid": this.props["data-testid"]
+      }
+    );
+  }
+}
+const _FileUpload = class _FileUpload extends React__namespace.Component {
+  constructor() {
+    super(...arguments);
+    this.state = {
+      files: []
+    };
+    this.handleDrop = (accepted, rejected) => {
+      if (!this.props.multiple && accepted.length > 1) {
+        return;
+      }
+      if (rejected.length > 0) {
+        return;
+      }
+      setTimeout(() => this.selectFile(accepted), 100);
+    };
+    this.selectFile = (files) => {
+      const { onSelectFile, onChange } = this.props;
+      files.forEach((file) => {
+        file.preview = URL.createObjectURL(file);
+      });
+      const newFiles = [...this.state.files, ...files];
+      this.setState({ files: newFiles });
+      onChange?.(newFiles);
+      if (onSelectFile) {
+        files.forEach((file) => {
+          onSelectFile(file);
+        });
+      }
+    };
+    this.handleRemoveFile = (file) => {
+      const { files } = this.state;
+      if (file) {
+        if (file.preview) window.URL.revokeObjectURL(file.preview);
+        const newFiles = files.filter((f) => f !== file);
+        this.setState({ files: newFiles });
+        this.props.onChange?.(newFiles);
+        this.props.onRemoveFile?.(file);
+      }
+    };
+  }
+  render() {
+    const { files } = this.state;
+    const {
+      accept,
+      previewComponent: Preview,
+      dropHint,
+      hoverHint,
+      acceptHint,
+      rejectHint,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      onChange,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      onRemoveFile,
+      onDownloadFile,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      onSelectFile,
+      onDropRejected,
+      onDropAccepted,
+      maxSize,
+      multiple,
+      ...otherProps
+    } = this.props;
+    const dropHintOrDefault = dropHint || _FileUpload.defaultProps.dropHint;
+    const hoverHintOrDefault = hoverHint || _FileUpload.defaultProps.hoverHint;
+    const acceptHintOrDefault = acceptHint || _FileUpload.defaultProps.acceptHint;
+    const rejectHintOrDefault = rejectHint || _FileUpload.defaultProps.rejectHint;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ...otherProps,
+        className: cx("di upload", {
+          clickable: !files.length,
+          hasContent: !!files.length
+        }),
+        children: [
+          !!Preview && files.map((file, i) => /* @__PURE__ */ jsxRuntime.jsx(
+            Preview,
+            {
+              file,
+              onRemoveFile: () => this.handleRemoveFile(file),
+              onDownloadFile: onDownloadFile ? () => onDownloadFile(file) : void 0
+            },
+            i
+          )),
+          (multiple || !files.length) && /* @__PURE__ */ jsxRuntime.jsx(
+            Dropzone,
+            {
+              accept,
+              multiple: multiple ?? false,
+              onDrop: this.handleDrop,
+              onDropRejected,
+              onDropAccepted,
+              maxSize: maxSize || Infinity,
+              children: ({ getRootProps, getInputProps, isDragAccept, isDragReject, isDragActive }) => /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  className: cx("drag-drop-text-container", {
+                    active: isDragActive,
+                    accept: isDragAccept,
+                    reject: isDragReject
+                  }),
+                  ...getRootProps(),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("input", { ...getInputProps() }),
+                    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "drag-drop-hint", children: /* @__PURE__ */ jsxRuntime.jsx(Trans, { i18nKey: dropHintOrDefault.id, children: dropHintOrDefault.defaultValue }) }),
+                    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "drag-drop-hover-hint", children: /* @__PURE__ */ jsxRuntime.jsx(Trans, { i18nKey: hoverHintOrDefault.id, children: hoverHintOrDefault.defaultValue }) }),
+                    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "drag-drop-accept", children: /* @__PURE__ */ jsxRuntime.jsx(Trans, { i18nKey: acceptHintOrDefault.id, children: acceptHintOrDefault.defaultValue }) }),
+                    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "drag-drop-reject", children: /* @__PURE__ */ jsxRuntime.jsx(Trans, { i18nKey: rejectHintOrDefault.id, children: rejectHintOrDefault.defaultValue }) })
+                  ]
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+};
+_FileUpload.defaultProps = {
+  dropHint: {
+    id: "fileUpload.dropHint",
+    defaultValue: "Drop file here, or click to browse ..."
+  },
+  hoverHint: {
+    id: "fileUpload.hoverHint",
+    defaultValue: "Drop file here, or click to browse ..."
+  },
+  acceptHint: {
+    id: "fileUpload.acceptHint",
+    defaultValue: "This file type can be uploaded"
+  },
+  rejectHint: {
+    id: "fileUpload.rejectHint",
+    defaultValue: "This file type cannot be uploaded"
+  }
+};
+let FileUpload = _FileUpload;
+const PreviewImage = ({ url, imageSize, onRemoveFile, onDragOver, onDownloadFile }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "di upload preview-container", onDragOver, children: /* @__PURE__ */ jsxRuntime.jsxs(
+  "div",
+  {
+    className: "preview",
+    style: {
+      backgroundImage: `url(${url})`,
+      ...imageSize && { backgroundSize: imageSize }
+    },
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("button", { className: "action-button", onClick: onRemoveFile, "data-testid": "delete-button", children: /* @__PURE__ */ jsxRuntime.jsx(Trans, { i18nKey: "imageUpload.remove", children: "Remove" }) }),
+      onDownloadFile && /* @__PURE__ */ jsxRuntime.jsx("button", { className: "action-button", onClick: onDownloadFile, "data-testid": "download-button", children: /* @__PURE__ */ jsxRuntime.jsx(Trans, { i18nKey: "imageUpload.download", children: "Download" }) })
+    ]
+  }
+) });
+class ImageUpload extends React.Component {
+  constructor() {
+    super(...arguments);
+    this.state = {
+      dragOverPreview: false,
+      file: null
+    };
+    this.handleDragOver = () => {
+      this.setState({
+        dragOverPreview: true
+      });
+    };
+  }
+  componentDidUpdate(prevProps) {
+    if (prevProps.imageUrl !== this.props.imageUrl) {
+      this.setState({
+        dragOverPreview: false
+      });
+    }
+  }
+  render() {
+    const { accept, imageUrl, imageSize, onSelectFile, onRemoveFile, onDownloadFile, ...otherProps } = this.props;
+    const { dragOverPreview, file } = this.state;
+    if (imageUrl && !dragOverPreview && file) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        PreviewImage,
+        {
+          url: imageUrl,
+          imageSize,
+          onRemoveFile: () => onRemoveFile?.(file),
+          onDownloadFile: onDownloadFile ? () => onDownloadFile(file) : void 0,
+          onDragOver: this.handleDragOver
+        }
+      );
+    } else {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        FileUpload,
+        {
+          ...otherProps,
+          onRemoveFile: (file2) => {
+            this.setState({ file: null });
+            onRemoveFile?.(file2);
+          },
+          onSelectFile: (file2) => {
+            this.setState({ file: file2 });
+            onSelectFile?.(file2);
+          },
+          accept: accept || {
+            "image/*": [".jpeg", ".jpg", ".png", ".webp"]
+          }
+        }
+      );
+    }
+  }
+}
+const arrowBackIcon = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3NpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDYuMC1jMDAyIDc5LjE2NDQ2MCwgMjAyMC8wNS8xMi0xNjowNDoxNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDplMjI2NGVmOC0xY2Q1LTgyNDQtOWQ5NS0yZDBjNGMxMmZkM2UiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MDhENjczMThERTNEMTFFQUIwNjJCODBDQ0RGM0I4QkEiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MDhENjczMTdERTNEMTFFQUIwNjJCODBDQ0RGM0I4QkEiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjIgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NTcyODQ4NjktNjA0NC0xZjQ2LTg2OWMtMjBlYzMwMTA0MWE2IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOmUyMjY0ZWY4LTFjZDUtODI0NC05ZDk1LTJkMGM0YzEyZmQzZSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PnOjy94AAABySURBVHjapFMJDsAgCFvJ/v/lbkvYEQ4naGIiShtaASS3lSWjRwA8d4/gAutxSLJrsr3/6kKUc0uPKnDgioQS2BKUwY8HBhzFoc+/31ipAF0JkoDY7cQyiWTmzJLADZN2HIwn2dD5Ct5EzBiK1XE+BBgAvZQfJzDjL2UAAAAASUVORK5CYII=";
+const ContentHeader = ({
+  parentPageLink,
+  title,
+  subPagePathPrefixArray,
+  subPagePathPrefix,
+  subtitle,
+  children
+}) => {
+  const { push } = reactRouterDom.useHistory();
+  const { pathname } = reactRouterDom.useLocation();
+  const { t } = useTranslation();
+  const goToParentPage = () => {
+    if (subPagePathPrefix) {
+      push(pathname.substring(0, pathname.lastIndexOf(subPagePathPrefix)));
+    } else if (subPagePathPrefixArray) {
+      subPagePathPrefixArray.forEach((pathPrefix) => {
+        if (pathname.includes(pathPrefix)) {
+          push(pathname.substring(0, pathname.lastIndexOf(pathPrefix)));
+        }
+      });
+    } else {
+      push(pathname.substring(0, pathname.lastIndexOf("/")));
+    }
+  };
+  const printStringOrMessage = (stringOrMessage) => {
+    if (typeof stringOrMessage === "string") {
+      return stringOrMessage;
+    } else {
+      const { id, defaultValue } = stringOrMessage;
+      return t(id, {
+        defaultValue
+      });
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("h1", { className: "di header", children: [
+    parentPageLink && /* @__PURE__ */ jsxRuntime.jsx(
+      ngUiBasicComponents.Button,
+      {
+        onClick: goToParentPage,
+        style: {
+          marginRight: "15px"
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src: arrowBackIcon,
+            alt: t("general.navigation.goBack", {
+              defaultValue: "Go Back"
+            })
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { children: printStringOrMessage(title) }),
+    subtitle && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "search-result-count", children: printStringOrMessage(subtitle) }),
+    children
+  ] });
+};
+const formatTime = (timezone2, date) => {
+  try {
+    return dayjs.tz(date, timezone2).format("HH:mm");
+  } catch (error) {
+    console.error("DateTimeInput: Error while extracting time from date", error);
+    return "00:00";
+  }
+};
+const DateTimeInput = React.forwardRef(
+  ({ timestamp, timezone: timezone2, warning, readOnly = false, onChange, ...otherProps }, ref) => {
+    const [time, setTime] = React.useState(formatTime(timezone2, timestamp));
+    const timeValue = time == null ? formatTime(timezone2, timestamp) : time;
+    React.useEffect(() => {
+      setTime(formatTime(timezone2, timestamp));
+    }, [timezone2, timestamp]);
+    function handleChangeDate(date, fromTextField) {
+      const currentDate = dayjs.tz(timestamp, timezone2);
+      const newDate = dayjs.tz(date, timezone2).set("hour", currentDate.hour()).set("minute", currentDate.minute()).set("second", currentDate.second()).set("millisecond", currentDate.millisecond());
+      onChange(newDate.valueOf(), fromTextField);
+    }
+    function handleChangeTime(time2, valid) {
+      if (valid) {
+        const [hours, minutes] = time2.split(":").map(Number);
+        const newDate = dayjs.tz(timestamp, timezone2).set("hours", hours).set("minutes", minutes);
+        onChange(newDate.valueOf(), true);
+      }
+      setTime(time2);
+    }
+    function tryFixTime() {
+      if (time && /^[0-9]:[0-5][0-9]$/.test(time)) {
+        handleChangeTime(time.padStart(5, "0"), true);
+      }
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `di date-time-input ${warning ? "with-warning" : ""}`, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        DateInput,
+        {
+          ...otherProps,
+          ref,
+          value: timestamp,
+          timezone: timezone2,
+          onChange: handleChangeDate,
+          readOnly
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ValidatedTextInput,
+        {
+          "data-testid": "time-input",
+          value: timeValue,
+          onChange: handleChangeTime,
+          pattern: /^(([01][0-9])|2[0-3]):[0-5][0-9]$/,
+          required: true,
+          invalidStyle: {
+            borderColor: "red"
+          },
+          placeholder: "00:00",
+          className: "time",
+          onBlur: tryFixTime,
+          disabled: readOnly
+        }
+      )
+    ] });
+  }
+);
+class SelectWithSearchAsync extends React.Component {
+  constructor() {
+    super(...arguments);
+    this.state = {
+      cache: {},
+      currentItem: null
+    };
+    this.selectRef = React.createRef();
+    this.transformBackendItemToSelectItem = (backendItem) => {
+      const { labelKey, valueKey } = this.props;
+      return {
+        value: backendItem[valueKey],
+        label: backendItem[labelKey]
+      };
+    };
+    this.reloadItemFromCache = () => {
+      const { value } = this.props;
+      const { currentItem, cache } = this.state;
+      if (value && (!currentItem || currentItem.value !== value) && cache[value]) {
+        this.setState({
+          currentItem: cache[value]
+        });
+        return true;
+      }
+      return false;
+    };
+    this.addBackendItemToCache = (item) => {
+      if (item) {
+        const selectItem = this.transformBackendItemToSelectItem(item);
+        const id = selectItem.value;
+        this.setState(({ cache }) => ({
+          cache: { ...cache, [id]: selectItem }
+        }));
+      }
+    };
+    this.fetchOptions = async (input, options) => {
+      const { searchByQuery } = this.props;
+      try {
+        const { content, number, totalPages } = await searchByQuery(input, options.length);
+        return {
+          options: content.map(this.transformBackendItemToSelectItem),
+          hasMore: number < totalPages - 1
+        };
+      } catch (error) {
+        console.error("Error fetching options:", error);
+        return { hasMore: false, options: [] };
+      }
+    };
+    this.handleChange = (item) => {
+      const { onChange } = this.props;
+      if (item) {
+        const id = item.value;
+        this.setState(
+          ({ cache }) => ({
+            cache: { ...cache, [id]: item }
+          }),
+          () => {
+            onChange(id);
+          }
+        );
+      } else {
+        onChange(null);
+      }
+    };
+  }
+  componentDidMount() {
+    const { value, searchById } = this.props;
+    if (value) {
+      searchById(value).then(this.addBackendItemToCache);
+    }
+    if (this.props["data-testid"]) {
+      setTimeout(() => {
+        if (this.selectRef?.current?.controlRef) {
+          this.selectRef.current.controlRef.setAttribute("data-testid", this.props["data-testid"]);
+        }
+      }, 0);
+    }
+  }
+  componentDidUpdate() {
+    const { value, searchById } = this.props;
+    const { currentItem } = this.state;
+    if (value && (!currentItem || currentItem.value !== value)) {
+      const foundInCache = this.reloadItemFromCache();
+      if (!foundInCache) {
+        searchById(value).then(this.addBackendItemToCache);
+      }
+    } else if (!value && currentItem) {
+      this.setState({
+        currentItem: null
+      });
+    }
+  }
+  render() {
+    const { clearable, noResultsMessage, disabled, menuPortalTarget } = this.props;
+    const { currentItem } = this.state;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      reactSelectAsyncPaginate.AsyncPaginate,
+      {
+        selectRef: this.selectRef,
+        className: "select-search-container",
+        classNamePrefix: "select-search",
+        isClearable: clearable,
+        noResultsText: noResultsMessage,
+        value: currentItem,
+        onChange: this.handleChange,
+        loadOptions: this.fetchOptions,
+        isDisabled: disabled,
+        menuPortalTarget,
+        placeholder: this.props.placeholder
+      }
+    );
+  }
+}
+class MultiMenuItem extends React__namespace.PureComponent {
+  constructor() {
+    super(...arguments);
+    this.createClickHandler = (toggleMenu) => () => {
+      const { onClick } = this.props;
+      if (onClick) {
+        onClick();
+      }
+      toggleMenu();
+    };
+  }
+  render() {
+    const { disabled, icon, children, linkTo } = this.props;
+    const dataTestId = this.props["data-testid"];
+    return /* @__PURE__ */ jsxRuntime.jsx(MultiMenuContext.Consumer, { children: ({ toggleMenu }) => linkTo ? /* @__PURE__ */ jsxRuntime.jsxs(
+      reactRouterDom.Link,
+      {
+        "data-testid": dataTestId,
+        to: linkTo,
+        className: `item ${disabled ? "disabled" : ""}`,
+        onClick: this.createClickHandler(toggleMenu),
+        children: [
+          icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "item-icon", children: icon }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "item-text", children })
+        ]
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        "data-testid": dataTestId,
+        className: `item ${disabled ? "disabled" : ""}`,
+        onClick: this.createClickHandler(toggleMenu),
+        children: [
+          icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "item-icon", children: icon }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "item-text", children })
+        ]
+      }
+    ) });
+  }
+}
+const ONE_HOUR = 60 * 60 * 1e3;
+function Inputs({ period, onChange, readOnly, locale, timezone: timezone2 }) {
+  const [showWarningTarget, setShowWarningTarget] = React.useState("");
+  const warningTimeoutRef = React.useRef(void 0);
+  const endDateRef = React.useRef(null);
+  const startDate = new Date(period.tsStart);
+  const endDate = new Date(period.tsEnd);
+  function showWarning(target) {
+    if (warningTimeoutRef.current) {
+      clearTimeout(warningTimeoutRef.current);
+    }
+    setShowWarningTarget(target);
+    warningTimeoutRef.current = setTimeout(() => setShowWarningTarget(""), 1e3);
+  }
+  function handleChangeStartDate(timestamp, fromTextField) {
+    if (timestamp) {
+      const incorrect = period.tsEnd && timestamp > period.tsEnd;
+      const tsEnd = incorrect ? timestamp + ONE_HOUR : period.tsEnd;
+      const newPeriod = {
+        tsStart: timestamp,
+        tsEnd
+      };
+      if (!lodash.isEqual(newPeriod, period)) {
+        onChange(newPeriod);
+      }
+      if (!fromTextField && endDateRef.current) {
+        endDateRef.current.focus();
+      }
+      if (incorrect) {
+        showWarning("date-to");
+      }
+    }
+  }
+  function handleChangeEndDate(timestamp) {
+    if (timestamp) {
+      const incorrect = period.tsStart && timestamp < period.tsStart;
+      const tsStart = incorrect ? timestamp - ONE_HOUR : period.tsStart;
+      const newPeriod = {
+        tsStart,
+        tsEnd: timestamp
+      };
+      if (!lodash.isEqual(newPeriod, period)) {
+        onChange(newPeriod);
+      }
+      if (incorrect) {
+        showWarning("date-from");
+      }
+    }
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inputs", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { "data-testid": "from-wrapper", children: /* @__PURE__ */ jsxRuntime.jsx(
+      DateTimeInput,
+      {
+        timestamp: period.tsStart,
+        onChange: handleChangeStartDate,
+        warning: showWarningTarget === "date-from",
+        selectsStart: true,
+        startDate,
+        endDate,
+        readOnly,
+        locale,
+        timezone: timezone2
+      }
+    ) }),
+    "  -  ",
+    /* @__PURE__ */ jsxRuntime.jsx("span", { "data-testid": "to-wrapper", children: /* @__PURE__ */ jsxRuntime.jsx(
+      DateTimeInput,
+      {
+        ref: endDateRef,
+        timestamp: period.tsEnd,
+        onChange: handleChangeEndDate,
+        warning: showWarningTarget === "date-to",
+        selectsEnd: true,
+        startDate,
+        endDate,
+        readOnly,
+        locale,
+        timezone: timezone2
+      }
+    ) })
+  ] });
+}
+class MonthPicker extends React.Component {
+  constructor(props) {
+    super(props);
+    this.tdMonth = (month2) => {
+      const { selectedMonth, selectedYear, displayedYear } = this.state;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "td",
+        {
+          "data-testid": `month-${month2}-button`,
+          onClick: () => {
+            this.props.onChange(month2, displayedYear);
+            this.setState({
+              selectedMonth: month2,
+              selectedYear: displayedYear
+            });
+          },
+          className: cx({ selected: month2 === selectedMonth && displayedYear === selectedYear }),
+          children: dayjs(`${selectedYear}/${month2.toString().padStart(2, "0")}/01`, "YYYY/MM/DD").format("MMM")
+        }
+      );
+    };
+    const month = props.month !== null && props.month !== void 0 ? props.month : dayjs().month() + 1;
+    const year = props.year !== null && props.year !== void 0 ? props.year : dayjs().year();
+    this.state = {
+      selectedMonth: month,
+      selectedYear: year,
+      displayedYear: year
+    };
+  }
+  render() {
+    const { displayedYear } = this.state;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "di monthpicker", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pager", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: "page-nav prev",
+            onClick: () => {
+              this.setState({
+                displayedYear: displayedYear - 1
+              });
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "page-nav info", children: displayedYear }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: "page-nav next",
+            onClick: () => {
+              this.setState({
+                displayedYear: displayedYear + 1
+              });
+            }
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "months", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "table",
+        {
+          style: {
+            margin: "auto"
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsxs("tbody", { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+              this.tdMonth(1),
+              this.tdMonth(2),
+              this.tdMonth(3)
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+              this.tdMonth(4),
+              this.tdMonth(5),
+              this.tdMonth(6)
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+              this.tdMonth(7),
+              this.tdMonth(8),
+              this.tdMonth(9)
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+              this.tdMonth(10),
+              this.tdMonth(11),
+              this.tdMonth(12)
+            ] })
+          ] })
+        }
+      ) })
+    ] });
+  }
+}
+const imgIconCalendar = "data:image/svg+xml,%3csvg%20id='Layer_1'%20data-name='Layer%201'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3e%3cdefs%3e%3cstyle%3e%20.cls-1%20{%20fill:%20%23fff;%20}%20%3c/style%3e%3c/defs%3e%3cg%3e%3cg%3e%3crect%20class='cls-1'%20x='3.5'%20y='7.5'%20width='2'%20height='2'/%3e%3cpath%20d='M5,8V9H4V8H5M6,7H3v3H6V7Z'/%3e%3c/g%3e%3cg%3e%3crect%20class='cls-1'%20x='8'%20y='7'%20width='1'%20height='1'/%3e%3cpolygon%20points='9%207%208%207%208%208%209%208%209%207%209%207'/%3e%3c/g%3e%3cg%3e%3crect%20class='cls-1'%20x='10'%20y='7'%20width='1'%20height='1'/%3e%3cpolygon%20points='11%207%2010%207%2010%208%2011%208%2011%207%2011%207'/%3e%3c/g%3e%3cg%3e%3crect%20class='cls-1'%20x='12'%20y='7'%20width='1'%20height='1'/%3e%3cpolygon%20points='13%207%2012%207%2012%208%2013%208%2013%207%2013%207'/%3e%3c/g%3e%3cg%3e%3crect%20class='cls-1'%20x='8'%20y='9'%20width='1'%20height='1'/%3e%3cpolygon%20points='9%209%208%209%208%2010%209%2010%209%209%209%209'/%3e%3c/g%3e%3cg%3e%3crect%20class='cls-1'%20x='8'%20y='11'%20width='1'%20height='1'/%3e%3cpolygon%20points='9%2011%208%2011%208%2012%209%2012%209%2011%209%2011'/%3e%3c/g%3e%3cg%3e%3crect%20class='cls-1'%20x='6'%20y='11'%20width='1'%20height='1'/%3e%3cpolygon%20points='7%2011%206%2011%206%2012%207%2012%207%2011%207%2011'/%3e%3c/g%3e%3cg%3e%3crect%20class='cls-1'%20x='4'%20y='11'%20width='1'%20height='1'/%3e%3cpolygon%20points='5%2011%204%2011%204%2012%205%2012%205%2011%205%2011'/%3e%3c/g%3e%3cg%3e%3crect%20class='cls-1'%20x='10.5'%20y='9.5'%20width='2'%20height='2'/%3e%3cpath%20d='M12,10v1H11V10h1m1-1H10v3h3V9Z'/%3e%3c/g%3e%3cpath%20d='M15.31,2H.69A.69.69,0,0,0,0,2.69V14.31A.69.69,0,0,0,.69,15H15.31a.69.69,0,0,0,.69-.69V2.69A.69.69,0,0,0,15.31,2ZM14,13H2V6H14Z'/%3e%3c/g%3e%3crect%20x='3'%20width='3'%20height='2'/%3e%3crect%20x='10'%20width='3'%20height='2'/%3e%3c/svg%3e";
+const imgTriangleDown = "data:image/svg+xml,%3csvg%20id='Layer_1'%20data-name='Layer%201'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3e%3cpolygon%20points='7.5%2010%204%206%2011%206%207.5%2010'/%3e%3c/svg%3e";
+dayjs.extend(timezone);
+dayjs.extend(utc);
+function dayjsTz(timezone2, ts) {
+  return timezone2 ? dayjs.tz(ts, timezone2) : dayjs(ts);
+}
+function createToday(timezone2) {
+  return {
+    tsStart: dayjsTz(timezone2).startOf("day").valueOf(),
+    tsEnd: dayjsTz(timezone2).endOf("day").valueOf()
+  };
+}
+function createYesterday(timezone2) {
+  return {
+    tsStart: dayjsTz(timezone2).subtract(1, "day").startOf("day").valueOf(),
+    tsEnd: dayjsTz(timezone2).subtract(1, "day").endOf("day").valueOf()
+  };
+}
+function createCurrentWeek(timezone2) {
+  return {
+    tsStart: dayjsTz(timezone2).startOf("week").valueOf(),
+    tsEnd: dayjsTz(timezone2).endOf("week").valueOf()
+  };
+}
+function createCurrentMonth(timezone2) {
+  return {
+    tsStart: dayjsTz(timezone2).startOf("month").valueOf(),
+    tsEnd: dayjsTz(timezone2).endOf("month").valueOf()
+  };
+}
+function createWholeDay(tsMiddle, timezone2) {
+  return {
+    tsStart: dayjsTz(timezone2, tsMiddle).startOf("day").valueOf(),
+    tsEnd: dayjsTz(timezone2, tsMiddle).endOf("day").valueOf()
+  };
+}
+function createWholeMonth(tsMiddle, timezone2) {
+  return {
+    tsStart: dayjsTz(timezone2, tsMiddle).startOf("month").valueOf(),
+    tsEnd: dayjsTz(timezone2, tsMiddle).endOf("month").valueOf()
+  };
+}
+function createLastXDays(days, timezone2) {
+  const tsStart = dayjsTz(timezone2).subtract(days - 1, "days").startOf("day").valueOf();
+  const tsEnd = dayjs().endOf("day").valueOf();
+  return { tsStart, tsEnd };
+}
+const DAY_TO_MILLIS = 1e3 * 60 * 60 * 24;
+function periodToDays({ tsStart, tsEnd }) {
+  return Math.round((tsEnd - tsStart + 1) / DAY_TO_MILLIS);
+}
+function Menu({ onChange, onShowCustomPeriod, periodName, timezone: timezone2 }) {
+  const [visible, setVisible] = React.useState(false);
+  const [showDatePicker, setShowDatePicker] = React.useState(false);
+  const [showMonthPicker, setShowMonthPicker] = React.useState(false);
+  const [datePickerDate, setDatePickerDate] = React.useState(Date.now());
+  function setPeriod(period) {
+    onChange(period);
+    setVisible(false);
+    if (onShowCustomPeriod) {
+      onShowCustomPeriod(false);
+    }
+  }
+  function setPeriodSpecificDate(date) {
+    setPeriod(createWholeDay(date ?? Date.now(), timezone2));
+    setShowDatePicker(false);
+    setDatePickerDate(date ?? void 0);
+  }
+  function setPeriodSpecificMonth(month, year) {
+    setPeriod(
+      createWholeMonth(
+        dayjs().year(year).month(month - 1).valueOf(),
+        timezone2
+      )
+    );
+    setShowMonthPicker(false);
+  }
+  function toggleDatePicker() {
+    setShowDatePicker(!showDatePicker);
+    setShowMonthPicker(false);
+  }
+  function toggleMonthPicker() {
+    setShowMonthPicker(!showMonthPicker);
+    setShowDatePicker(false);
+  }
+  function handleCustomPeriodSelect() {
+    setVisible(false);
+    if (onShowCustomPeriod) {
+      onShowCustomPeriod(true);
+    }
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
+    ngUiBasicComponents.Popup,
+    {
+      open: visible,
+      onOpenChange: setVisible,
+      handler: /* @__PURE__ */ jsxRuntime.jsx(
+        ngUiBasicComponents.Button,
+        {
+          "data-testid": "time-period-menu-button",
+          title: {
+            id: "trend.calendarMenu.calendar.timePeriod",
+            defaultValue: "Time Period"
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("img", { src: imgIconCalendar, alt: "calendar icon", style: { width: 16, height: 16 } }),
+            " ",
+            !!periodName && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+              " ",
+              periodName,
+              " "
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("img", { src: imgTriangleDown, alt: "triangle down", style: { width: 16, height: 16 } })
+          ] })
+        }
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "di multimenu period-picker-multimenu", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `drop bottom ${visible ? "show" : ""}`, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: `left-box ${showDatePicker ? "show" : ""}`, children: /* @__PURE__ */ jsxRuntime.jsx(DateInput, { inline: true, value: datePickerDate, onChange: setPeriodSpecificDate }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: `left-box ${showMonthPicker ? "show" : ""}`, children: /* @__PURE__ */ jsxRuntime.jsx(MonthPicker, { onChange: setPeriodSpecificMonth }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "right-box", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "item",
+              "data-testid": "today-button",
+              onClick: () => setPeriod(createToday(timezone2)),
+              children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "item-text", children: /* @__PURE__ */ jsxRuntime.jsx(Trans, { i18nKey: "trend.calendarMenu.timePeriod.today", children: "Today" }) })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "item",
+              "data-testid": "yesterday-button",
+              onClick: () => setPeriod(createYesterday(timezone2)),
+              children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "item-text", children: /* @__PURE__ */ jsxRuntime.jsx(Trans, { i18nKey: "trend.calendarMenu.timePeriod.yesterday", children: "Yesterday" }) })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "item", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                "data-testid": "last-7-days-button",
+                className: "item-text",
+                onClick: () => setPeriod(createLastXDays(7, timezone2)),
+                children: /* @__PURE__ */ jsxRuntime.jsx(Trans, { i18nKey: "trend.calendarMenu.timePeriod.lastSevenDays", children: "Last 7 days" })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "item-more icon triangle", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "item-more-submenu", children: [2, 3, 5, 10, 14, 30].map((days) => /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: "subitem",
+                onClick: () => setPeriod(createLastXDays(days, timezone2)),
+                children: days
+              },
+              days
+            )) }) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "item",
+              "data-testid": "current-week-button",
+              onClick: () => setPeriod(createCurrentWeek(timezone2)),
+              children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "item-text", children: /* @__PURE__ */ jsxRuntime.jsx(Trans, { i18nKey: "trend.calendarMenu.timePeriod.currentWeek", children: "Curr. Week" }) })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "item",
+              "data-testid": "current-month-button",
+              onClick: () => setPeriod(createCurrentMonth(timezone2)),
+              children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "item-text", children: /* @__PURE__ */ jsxRuntime.jsx(Trans, { i18nKey: "trend.calendarMenu.timePeriod.currentMonth", children: "Curr. Month" }) })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "item", "data-testid": "day-button", onClick: toggleDatePicker, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "item-text", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Trans, { i18nKey: "trend.calendarMenu.timePeriod.day", children: "Day" }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "item-more icon dots" })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "item", "data-testid": "month-button", onClick: toggleMonthPicker, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "item-text", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Trans, { i18nKey: "trend.calendarMenu.timePeriod.month", children: "Month" }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "item-more icon dots" })
+          ] }) }),
+          onShowCustomPeriod !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "item", "data-testid": "from-to-button", onClick: handleCustomPeriodSelect, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "item-text", children: /* @__PURE__ */ jsxRuntime.jsx(Trans, { i18nKey: "trend.calendarMenu.timePeriod.fromto", children: "From/to" }) }) })
+        ] })
+      ] }) })
+    }
+  ) });
+}
+function compare(period1, period2) {
+  return period1.tsStart === period2.tsStart && period1.tsEnd === period2.tsEnd;
+}
+function usePeriodName(period, timezone2) {
+  const { t } = useTranslation();
+  if (compare(period, createToday(timezone2))) {
+    return t("trend.calendarMenu.timePeriod.today", { defaultValue: "Today" });
+  }
+  if (compare(period, createYesterday(timezone2))) {
+    return t("trend.calendarMenu.timePeriod.yesterday", { defaultValue: "Yesterday" });
+  }
+  if (compare(period, createCurrentWeek(timezone2))) {
+    return t("trend.calendarMenu.timePeriod.currentWeek", { defaultValue: "Curr. Week" });
+  }
+  if (compare(period, createCurrentMonth(timezone2))) {
+    return t("trend.calendarMenu.timePeriod.currentMonth", { defaultValue: "Curr. Month" });
+  }
+  if (compare(period, createWholeDay((period.tsStart + period.tsEnd) / 2, timezone2))) {
+    return t("trend.calendarMenu.timePeriod.day", { defaultValue: "Day" });
+  }
+  if (compare(period, createWholeMonth((period.tsStart + period.tsEnd) / 2, timezone2))) {
+    return t("trend.calendarMenu.timePeriod.month", { defaultValue: "Month" });
+  }
+  const days = periodToDays(period);
+  if (compare(period, createLastXDays(days, timezone2))) {
+    return t("trend.calendarMenu.timePeriod.lastDays", {
+      defaultValue: `Last ${days} days`,
+      days
+    });
+  }
+  return void 0;
+}
+function PeriodPicker({
+  period,
+  onChange,
+  inputsHiddenByDefault,
+  menuHidden,
+  readOnly,
+  locale,
+  defaultPeriodName,
+  timezone: timezone2,
+  ...props
+}) {
+  const [showInputs, setShowInputs] = React.useState(!inputsHiddenByDefault);
+  const periodName = usePeriodName(period, timezone2) ?? defaultPeriodName;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "di period-picker", "data-testid": props["data-testid"], children: [
+    (!inputsHiddenByDefault || showInputs) && /* @__PURE__ */ jsxRuntime.jsx(Inputs, { period, onChange, locale, readOnly, timezone: timezone2 }),
+    menuHidden || readOnly || /* @__PURE__ */ jsxRuntime.jsx(
+      Menu,
+      {
+        periodName,
+        onShowCustomPeriod: inputsHiddenByDefault ? setShowInputs : void 0,
+        onChange,
+        timezone: timezone2
+      }
+    )
+  ] });
+}
+const CONFLICTING_IDS_DETECTION_DELAY = 500;
+const calculateIdCountsInElement = (element) => {
+  return Array.from(element.querySelectorAll("[id]")).map((element2) => element2.getAttribute("id")).reduce((acc, id) => {
+    if (id) acc[id] = acc[id] + 1 || 1;
+    return acc;
+  }, {});
+};
+const findAllDuplicatedIdsInSvgElement = (svgElement) => {
+  const idCountsInDocument = calculateIdCountsInElement(document);
+  const idCountsInSvg = calculateIdCountsInElement(svgElement);
+  return Object.keys(idCountsInSvg).filter((key) => idCountsInSvg[key] < idCountsInDocument[key]);
+};
+function findConflicts(svgElement, onConflict) {
+  const timeoutId = setTimeout(() => {
+    if (onConflict) {
+      onConflict(findAllDuplicatedIdsInSvgElement(svgElement));
+    }
+  }, CONFLICTING_IDS_DETECTION_DELAY);
+  return () => clearTimeout(timeoutId);
+}
+const SVG_NS = "http://www.w3.org/2000/svg";
+function createHyperlinkModification(element, { hoverColor, internalLink, link }, globalStyleElement, onInternalLinkChange) {
+  const anchor = wrapIntoAnchor(element);
+  if (!anchor) return;
+  const uniqueClassName = `a${uuidV4(8)}`;
+  element.classList.add("anchor", uniqueClassName);
+  if (hoverColor && globalStyleElement?.sheet) {
+    globalStyleElement.sheet.insertRule(
+      `.di.svg-image .anchor.${uniqueClassName}:hover, .di.svg-image .anchor.${uniqueClassName}:hover * { stroke: ${hoverColor} !important; }`
+    );
+  }
+  anchor.setAttributeNS(SVG_NS, "xlink:href", "#");
+  anchor.addEventListener(
+    "click",
+    () => internalLink && onInternalLinkChange ? onInternalLinkChange(link) : window.open(link, "_newtab")
+  );
+}
+function wrapIntoAnchor(wrappedElement) {
+  const parentNode = wrappedElement.parentNode;
+  if (!parentNode) {
+    return null;
+  }
+  const siblings = parentNode.childNodes;
+  if (!siblings) {
+    return null;
+  }
+  const index = Array.from(siblings).findIndex((el) => el === wrappedElement);
+  const wrapperElement = document.createElementNS(SVG_NS, "a");
+  wrapperElement.appendChild(wrappedElement);
+  const siblingNode = siblings[index] || null;
+  if (siblingNode) {
+    parentNode.insertBefore(wrapperElement, siblingNode);
+  } else {
+    parentNode.appendChild(wrapperElement);
+  }
+  return wrapperElement;
+}
+const removeSvgNamespace = (xml) => xml.replace(/<svg:svg/g, "<svg").replace(/<\/svg:svg/g, "</svg");
+const parseFromString = (imageData) => {
+  const parser = new DOMParser();
+  const xml = removeSvgNamespace(atob(imageData.replace("data:image/svg+xml;base64,", "")));
+  return parser.parseFromString(xml, "image/svg+xml");
+};
+function getMutableNodeList(imageData, diFieldId) {
+  const doc = parseFromString(imageData);
+  return doc.querySelectorAll(`[id^="${diFieldId}"]`);
+}
+const mergePositionChanges = (modifications) => {
+  const positionModifications = modifications.filter(({ type }) => type === "positionX" || type === "positionY");
+  const restModifications = modifications.filter(({ type }) => type !== "positionX" && type !== "positionY");
+  const positionByAxisModifications = positionModifications.reduce(
+    (acc, modification) => {
+      if (modification.type === "positionX") {
+        return { ...acc, x: modification };
+      } else if (modification.type === "positionY") {
+        return { ...acc, y: modification };
+      }
+      return acc;
+    },
+    {
+      x: null,
+      y: null
+    }
+  );
+  if (positionByAxisModifications.x && positionByAxisModifications.y) {
+    return restModifications.concat([
+      {
+        type: "positionXY",
+        target: positionByAxisModifications.x.target,
+        positionX: positionByAxisModifications.x.position,
+        positionY: positionByAxisModifications.y.position
+      }
+    ]);
+  } else if (positionByAxisModifications.x) {
+    return restModifications.concat([positionByAxisModifications.x]);
+  } else if (positionByAxisModifications.y) {
+    return restModifications.concat([positionByAxisModifications.y]);
+  } else {
+    return restModifications;
+  }
+};
+const transformPositionModifications = (modifications) => {
+  const modificationsByTarget = modifications.reduce(
+    (acc, modification) => ({
+      ...acc,
+      [modification.target]: [...acc[modification.target] || [], modification]
+    }),
+    {}
+  );
+  return Object.keys(modificationsByTarget).reduce(
+    (acc, target) => acc.concat(mergePositionChanges(modificationsByTarget[target])),
+    []
+  );
+};
+const limitPercentagePosition = (position) => Math.max(0, Math.min(100, position));
+function createPositionModification(element, modification, svgElement) {
+  const svg = svg_js.SVG(svgElement);
+  const targetId = element.getAttribute("id") || "";
+  const targetEl = svg.findOne(`#${targetId}`);
+  const boundariesEl = svg.findOne(`#${targetId}-boundaries`);
+  const bbox = boundariesEl ? boundariesEl.bbox() : svg.viewbox();
+  if (modification.type === "positionX") {
+    targetEl.x(bbox.x + limitPercentagePosition(modification.position) * bbox.width / 100);
+  } else if (modification.type === "positionY") {
+    targetEl.y(bbox.y + limitPercentagePosition(modification.position) * bbox.height / 100);
+  } else {
+    targetEl.x(bbox.x + limitPercentagePosition(modification.positionX) * bbox.width / 100);
+    targetEl.y(bbox.y + limitPercentagePosition(modification.positionY) * bbox.height / 100);
+  }
+}
+function renderSvg(svgWrapper, imageData, modifications, globalStyleElement, onInternalLinkChange) {
+  const imageDocument = parseFromString(imageData);
+  const svgElement = imageDocument.querySelector("svg");
+  if (svgElement) {
+    svgWrapper.style.height = "100%";
+    svgWrapper.innerHTML = "";
+    svgElement.style.height = "100%";
+    svgElement.style.width = "100%";
+    svgElement.classList.add("di", "svg-image");
+    if (!svgElement.getAttribute("viewBox")) {
+      svgElement.setAttribute("viewBox", "");
+    }
+    if (!svgElement.getAttribute("preserveAspectRatio")) {
+      svgElement.setAttribute("preserveAspectRatio", "xMidYMid");
+    }
+    svgWrapper.appendChild(svgElement);
+    applyModifications(svgElement, modifications, globalStyleElement, onInternalLinkChange);
+    return svgElement;
+  }
+  return null;
+}
+function applyModifications(svgElement, modifications, globalStyleElement, onInternalLinkChange) {
+  if (!modifications || !modifications.length) return;
+  for (const modification of sortModifications(transformPositionModifications(modifications))) {
+    const element = svgElement.querySelector(`[id=${modification.target}]`);
+    if (element) {
+      applyModification(element, modification, svgElement, globalStyleElement, onInternalLinkChange);
+    }
+  }
+}
+function applyModification(element, modification, svgElement, globalStyleElement, onInternalLinkChange) {
+  switch (modification.type) {
+    case "visibility":
+      element.setAttribute("visibility", modification.visible ? "visible" : "hidden");
+      break;
+    case "text": {
+      const tspan = element.querySelector("tspan");
+      if (tspan) {
+        tspan.textContent = modification.text;
+      } else {
+        element.textContent = modification.text;
+      }
+      break;
+    }
+    case "color": {
+      const { color } = modification;
+      const changeColor = (el) => {
+        el.setAttribute("fill", color);
+        el.style.fill = color;
+      };
+      changeColor(element);
+      element.querySelectorAll("g, path").forEach(changeColor);
+      break;
+    }
+    case "hyperlink":
+      createHyperlinkModification(element, modification, globalStyleElement, onInternalLinkChange);
+      break;
+    case "eventListener":
+      element.addEventListener(modification.eventType, modification.listener, modification.options);
+      break;
+    case "classNames":
+      element.classList.add(...modification.classNames);
+      break;
+    case "positionX":
+    case "positionY":
+    case "positionXY":
+      createPositionModification(element, modification, svgElement);
+      break;
+    case "rotation": {
+      svg_js.SVG(element).rotate(modification.degrees);
+      break;
+    }
+    default:
+      throw new Error("Unknown modification");
+  }
+}
+function sortModifications(modifications) {
+  return modifications.sort(({ type: type1 }, { type: type2 }) => type1 !== type2 && type2 === "rotation" ? -1 : 1);
+}
+function useGlobalStyleElement() {
+  const styleElementRef = React.useRef(null);
+  React.useEffect(() => {
+    const styleElement = document.createElement("style");
+    styleElement.appendChild(document.createTextNode(""));
+    if (document && document.head) {
+      document.head.appendChild(styleElement);
+    }
+    styleElementRef.current = styleElement;
+    return () => {
+      if (document && document.head && styleElement) {
+        document.head.removeChild(styleElement);
+      }
+    };
+  }, []);
+  return styleElementRef.current;
+}
+function SvgImage({ imageData, modifications, onConflict }) {
+  const svgWrapperRef = React.useRef(null);
+  const styleElement = useGlobalStyleElement();
+  const { push } = reactRouterDom.useHistory();
+  React.useEffect(() => {
+    const { current: wrapper } = svgWrapperRef;
+    if (wrapper && imageData) {
+      const svgElement = renderSvg(wrapper, imageData, modifications, styleElement, push);
+      if (svgElement && onConflict) {
+        return findConflicts(svgElement, onConflict);
+      }
+    }
+  }, [imageData, modifications, onConflict, push, styleElement]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: svgWrapperRef });
+}
+const getSvgElement = (imageData) => {
+  try {
+    const imageDoc = parseFromString(imageData);
+    return imageDoc.querySelector("svg");
+  } catch (e) {
+    return null;
+  }
+};
+const validateSvg = (imageData) => {
+  const svgElement = getSvgElement(imageData);
+  return !!svgElement && !!svgElement.style;
+};
+function createTooltip(header, name, value) {
+  return `<div>${header}</div><div>${name}: <strong>${value}</strong></div>`;
+}
+const initialOptions = {
+  global: {
+    useUTC: false
+  },
+  chart: {
+    style: {
+      fontFamily: "arial"
+    },
+    plotBackgroundColor: null,
+    plotBorderWidth: 0,
+    plotShadow: false
+  },
+  credits: {
+    enabled: false
+  },
+  legend: {
+    align: "right",
+    verticalAlign: "center",
+    layout: "vertical"
+  },
+  title: {
+    useHTML: true
+  },
+  plotOptions: {
+    pie: {
+      dataLabels: {
+        enabled: false
+      },
+      showInLegend: true,
+      startAngle: -90,
+      endAngle: 270
+    }
+  },
+  tooltip: {
+    useHTML: true,
+    formatter() {
+      return createTooltip("", this.point.name, this.point.y);
+    }
+  },
+  xAxis: {
+    type: "category"
+  },
+  yAxis: {
+    min: 0,
+    title: {
+      text: ""
+    }
+  },
+  options: {
+    lgo: 123
+  }
+};
+const getClickConfiguration = (onClick) => {
+  return onClick ? {
+    series: {
+      cursor: "pointer",
+      point: {
+        events: {
+          click: function() {
+            onClick(this.index);
+          }
+        }
+      }
+    }
+  } : {};
+};
+class Chart extends React.Component {
+  constructor() {
+    super(...arguments);
+    this.state = {};
+    this.chart = null;
+    this.ro = null;
+    this.handleChart = (chart) => {
+      this.chart = chart;
+      this.ro = new ResizeObserver(() => {
+        this.chart?.reflow();
+      });
+      this.ro.observe(this.chart.renderTo);
+    };
+  }
+  componentDidMount() {
+    const { type, title, items, tooltipTitle, valueFormatter, onClick } = this.props;
+    this.setState({
+      ...initialOptions,
+      plotOptions: { ...initialOptions.plotOptions, ...getClickConfiguration(onClick) },
+      tooltip: {
+        ...initialOptions.tooltip,
+        formatter() {
+          const format = valueFormatter || ((value) => value);
+          return createTooltip(tooltipTitle || "", this.point.name, format(this.point.y));
+        }
+      },
+      legend: { ...initialOptions.legend, enabled: type === "pie" },
+      yAxis: {
+        ...initialOptions.yAxis,
+        enabled: type === "column",
+        title: {
+          text: title || ""
+        }
+      },
+      series: [
+        {
+          type,
+          innerSize: "50%",
+          data: items.map(({ label, value }) => [label, value])
+        }
+      ]
+    });
+    setTimeout(() => {
+      this.setState({
+        title: { ...initialOptions.title, text: type === "column" ? "" : title || "" }
+      });
+    }, 0);
+  }
+  componentDidUpdate(prevProps) {
+    const { type, title, items, tooltipTitle, valueFormatter, onClick } = this.props;
+    if (title !== prevProps.title) {
+      this.setState({
+        title: { ...this.state.title, text: type === "column" ? "" : title || "" },
+        yAxis: {
+          ...this.state.yAxis,
+          title: {
+            text: title || ""
+          }
+        }
+      });
+    }
+    if (type !== prevProps.type) {
+      this.setState({
+        legend: { ...this.state.legend, enabled: type === "pie" },
+        title: {
+          text: type === "column" ? "" : title || ""
+        },
+        yAxis: {
+          ...this.state.yAxis,
+          enabled: type === "column",
+          title: {
+            text: type === "column" ? title || "" : ""
+          }
+        },
+        series: [
+          {
+            type,
+            innerSize: "50%",
+            data: items.map(({ label, value }) => [label, value])
+          }
+        ]
+      });
+    }
+    if (!lodash.isEqual(items, prevProps.items)) {
+      this.setState({
+        series: [
+          {
+            type,
+            innerSize: "50%",
+            data: items.map(({ label, value }) => [label, value])
+          }
+        ]
+      });
+    }
+    if (tooltipTitle !== prevProps.tooltipTitle || valueFormatter !== prevProps.valueFormatter || onClick !== prevProps.onClick) {
+      this.setState({
+        tooltip: {
+          ...initialOptions.tooltip,
+          formatter() {
+            const format = valueFormatter || ((value) => value);
+            return createTooltip(tooltipTitle || "", this.point.name, format(this.point.y));
+          }
+        },
+        plotOptions: { ...initialOptions.plotOptions, ...getClickConfiguration(onClick) }
+      });
+    }
+  }
+  componentWillUnmount() {
+    if (this.ro && this.chart?.renderTo) {
+      this.ro.unobserve(this.chart.renderTo);
+    }
+    this.chart = null;
+    this.ro = null;
+  }
+  render() {
+    const options = this.props.updateOptions ? this.props.updateOptions(this.state) : this.state;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      HighchartsReact,
+      {
+        highcharts: Highcharts,
+        options,
+        containerProps: {
+          className: this.props.className
+        },
+        callback: this.handleChart
+      }
+    );
+  }
+}
+function getDefaultExportFromCjs(x) {
+  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
+}
+var raf$1 = {};
+var hasRequiredRaf;
+function requireRaf() {
+  if (hasRequiredRaf) return raf$1;
+  hasRequiredRaf = 1;
+  Object.defineProperty(raf$1, "__esModule", {
+    value: true
+  });
+  raf$1.default = void 0;
+  let raf2 = (callback) => +setTimeout(callback, 16);
+  let caf = (num) => clearTimeout(num);
+  if (typeof window !== "undefined" && "requestAnimationFrame" in window) {
+    raf2 = (callback) => window.requestAnimationFrame(callback);
+    caf = (handle) => window.cancelAnimationFrame(handle);
+  }
+  let rafUUID = 0;
+  const rafIds = /* @__PURE__ */ new Map();
+  function cleanup(id) {
+    rafIds.delete(id);
+  }
+  const wrapperRaf = (callback, times = 1) => {
+    rafUUID += 1;
+    const id = rafUUID;
+    function callRef(leftTimes) {
+      if (leftTimes === 0) {
+        cleanup(id);
+        callback();
+      } else {
+        const realId = raf2(() => {
+          callRef(leftTimes - 1);
+        });
+        rafIds.set(id, realId);
+      }
+    }
+    callRef(times);
+    return id;
+  };
+  wrapperRaf.cancel = (id) => {
+    const realId = rafIds.get(id);
+    cleanup(id);
+    return caf(realId);
+  };
+  if (process.env.NODE_ENV !== "production") {
+    wrapperRaf.ids = () => rafIds;
+  }
+  raf$1.default = wrapperRaf;
+  return raf$1;
+}
+var rafExports = requireRaf();
+const raf = /* @__PURE__ */ getDefaultExportFromCjs(rafExports);
+const HandleTooltip = (props) => {
+  const { value, children, visible, tipFormatter = (val) => `${val}`, ...restProps } = props;
+  const tooltipRef = React.useRef(null);
+  const rafRef = React.useRef(null);
+  function cancelKeepAlign() {
+    if (rafRef.current) {
+      raf.cancel(rafRef.current);
+    }
+  }
+  function keepAlign() {
+    rafRef.current = raf(() => {
+      tooltipRef.current?.forceAlign();
+    });
+  }
+  React.useEffect(() => {
+    if (visible) {
+      keepAlign();
+    } else {
+      cancelKeepAlign();
+    }
+    return cancelKeepAlign;
+  }, [value, visible]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Tooltip,
+    {
+      placement: "top",
+      overlay: tipFormatter(value),
+      ref: tooltipRef,
+      align: { offset: [0, -10] },
+      visible,
+      ...restProps,
+      children
+    }
+  );
+};
+const TooltipSlider = ({ tipFormatter, tipProps, ...props }) => {
+  const tipHandleRender = (node, handleProps) => /* @__PURE__ */ jsxRuntime.jsx(
+    HandleTooltip,
+    {
+      value: handleProps.value,
+      visible: handleProps.dragging,
+      tipFormatter,
+      ...tipProps,
+      children: node
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(Slider$1, { ...props, handleRender: tipHandleRender });
+};
+function useLimitStyling(limit, min, max) {
+  const [slider, setSlider] = React.useState(null);
+  React.useEffect(() => {
+    if (slider) {
+      const containerEl = slider.querySelector(".rc-slider-rail");
+      if (!containerEl) throw new Error(".rc-slider-rail element missing");
+      const disabledAreaEl = containerEl?.querySelector(`.disabled-area-element`);
+      const sliderWidth = containerEl.getBoundingClientRect().width;
+      if (disabledAreaEl) {
+        if (limit == null) {
+          disabledAreaEl.remove();
+        } else {
+          const width = Math.round((max - limit) / (max - min) * sliderWidth);
+          disabledAreaEl.style.width = `${width}px`;
+        }
+      } else if (limit != null) {
+        const width = Math.round((max - limit) / (max - min) * sliderWidth);
+        const disabledAreaEl2 = document.createElement("div");
+        disabledAreaEl2.classList.add("disabled-area-element");
+        disabledAreaEl2.style.width = `${width}px`;
+        containerEl.appendChild(disabledAreaEl2);
+      }
+    }
+  }, [limit, slider, min, max]);
+  const updateLimitAreaSize = React.useCallback(() => {
+    if (slider && limit != null) {
+      const containerEl = slider.querySelector(".rc-slider-rail");
+      if (!containerEl) throw new Error(".rc-slider-rail element missing");
+      const disabledAreaEl = containerEl?.querySelector(`.disabled-area-element`);
+      const sliderWidth = containerEl.getBoundingClientRect().width;
+      if (disabledAreaEl) {
+        const width = Math.round((max - limit) / (max - min) * sliderWidth);
+        disabledAreaEl.style.width = `${width}px`;
+      }
+    }
+  }, [limit, max, min, slider]);
+  React.useEffect(() => {
+    if (slider) {
+      const resizeObserver = new ResizeObserver(() => updateLimitAreaSize());
+      resizeObserver.observe(slider);
+    }
+  }, [slider, updateLimitAreaSize]);
+  return setSlider;
+}
+const Slider = ({ min, max, step, value, tooltip = true, labels, format, onChange, onChangeComplete, limit }) => {
+  const setSliderRef = useLimitStyling(limit, min, max);
+  const handleChange = (value2) => {
+    if (!onChange) return;
+    const numericValue = typeof value2 === "number" ? value2 : value2[0];
+    const allowedValue = limit != null ? Math.min(numericValue, limit) : numericValue;
+    onChange(allowedValue);
+  };
+  const handleChangeComplete = () => {
+    if (!onChangeComplete) {
+      return;
+    }
+    onChangeComplete(value);
+  };
+  const basicProps = {
+    min,
+    max,
+    step,
+    value,
+    onChange: handleChange,
+    onChangeComplete: handleChangeComplete,
+    marks: labels
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "di slider", ref: setSliderRef, children: tooltip ? /* @__PURE__ */ jsxRuntime.jsx(TooltipSlider, { ...basicProps, className: "di slider with-tooltip", tipFormatter: format }) : /* @__PURE__ */ jsxRuntime.jsx(Slider$1, { ...basicProps, className: "di slider" }) });
+};
+exports.Chart = Chart;
+exports.ColorPicker = GridColorPicker;
+exports.ContentHeader = ContentHeader;
+exports.DateInput = DateInput;
+exports.DateTimeInput = DateTimeInput;
+exports.FileUpload = FileUpload;
+exports.GradientColorPicker = GradientColorPicker;
+exports.GridColorPicker = GridColorPicker;
+exports.ImageUpload = ImageUpload;
+exports.InfoBox = InfoBox;
+exports.MessageBoxContainer = MessageBoxContainer;
+exports.MultiMenu = MultiMenuFunctional;
+exports.MultiMenuItem = MultiMenuItem;
+exports.Pagination = Pagination;
+exports.PeriodPicker = PeriodPicker;
+exports.Reactable = Reactable;
+exports.ReactableWithClientSidePagination = ReactableWithClientSidePagination;
+exports.RouteLink = RouteLink;
+exports.RouteTabs = RouteTabs;
+exports.SelectWithSearch = SelectWithSearch;
+exports.SelectWithSearchAsync = SelectWithSearchAsync;
+exports.Slider = Slider;
+exports.SvgImage = SvgImage;
+exports.TreeView = TreeView;
+exports.UrnInput = UrnInput;
+exports.ValidatedTextInput = ValidatedTextInput;
+exports.getMutableNodeList = getMutableNodeList;
+exports.getSvgElement = getSvgElement;
+exports.getTreeNodePathById = getTreeNodePathById;
+exports.initializeTranslation = initializeTranslation;
+exports.messageBoxDismissAll = messageBoxDismissAll;
+exports.messageBoxDismissGroup = messageBoxDismissGroup;
+exports.messageBoxDismissSingle = messageBoxDismissSingle;
+exports.messageBoxError = messageBoxError;
+exports.messageBoxInfo = messageBoxInfo;
+exports.messageBoxSuccess = messageBoxSuccess;
+exports.messageBoxWarn = messageBoxWarn;
+exports.nanoid10 = nanoid10;
+exports.setGlobalErrorMessageBoxOptions = setGlobalErrorMessageBoxOptions;
+exports.uuidV4 = uuidV4;
+exports.validateSvg = validateSvg;
+exports.withPrompt = withPrompt;
 //# sourceMappingURL=index.cjs.map