@iapps/ng-dhis2-ui 1.0.0

package/fesm2022/iapps-ng-dhis2-ui.mjs

@@ -0,0 +1,1239 @@
+import * as i0 from '@angular/core';
+import { NgModule, Directive, Input, ContentChild, Component, EventEmitter, Output } from '@angular/core';
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import parse from 'html-react-parser';
+import * as React from 'react';
+import React__default, { useState, useCallback, useRef, useEffect, createContext, useContext, useMemo } from 'react';
+import * as ReactDOM from 'react-dom/client';
+import * as i1 from '@iapps/ngx-dhis2-http-client';
+import { catchError, of, map, zip, firstValueFrom } from 'rxjs';
+import { useDataQuery, useConfig, useAlert, clearSensitiveCaches, DataProvider } from '@dhis2/app-runtime';
+import i18n from '@dhis2/d2-i18n';
+import { colors, theme, spacers } from '@dhis2/ui-constants';
+import PropTypes from 'prop-types';
+import { Card } from '@dhis2-ui/card';
+import { InputField } from '@dhis2-ui/input';
+import { IconSettings24, IconApps24, IconMessages24, IconMail24, IconUser24, IconQuestion24, IconInfo24, IconLogOut24 } from '@dhis2/ui-icons';
+import { LogoIconWhite } from '@dhis2-ui/logo';
+import { UserAvatar } from '@dhis2-ui/user-avatar';
+import { ButtonStrip, Button } from '@dhis2-ui/button';
+import { Modal, ModalTitle, ModalContent, ModalActions } from '@dhis2-ui/modal';
+import { Center } from '@dhis2-ui/center';
+import { Divider } from '@dhis2-ui/divider';
+import { Layer } from '@dhis2-ui/layer';
+import { CircularLoader } from '@dhis2-ui/loader';
+import { MenuItem, MenuDivider } from '@dhis2-ui/menu';
+import { Button as Button$1, Layer as Layer$1, layers, CenteredContent, CircularLoader as CircularLoader$1 } from '@dhis2/ui';
+import AppAdapter from '@dhis2/app-adapter';
+
+class NgDhis2UiModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgDhis2UiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: NgDhis2UiModule, imports: [CommonModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgDhis2UiModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgDhis2UiModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                }]
+        }] });
+
+window.React = React;
+class ReactWrapperComponent {
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+    }
+    ngAfterViewInit() {
+        if (!this.elementRef)
+            throw new Error('No element ref');
+        this.reactDomRoot = ReactDOM.createRoot(this.elementRef.nativeElement);
+        this.render();
+    }
+    ngOnChanges() {
+        if (this.elementRef)
+            this.render();
+    }
+    ngOnDestroy() {
+        this.reactDomRoot?.unmount();
+    }
+    render() {
+        if (!this.component)
+            throw new Error('React component must be supplied');
+        if (!this.reactDomRoot)
+            return;
+        const jsxContent = this.content?.nativeElement?.outerHTML
+            ? parse(this.content?.nativeElement?.outerHTML)
+            : undefined;
+        this.reactDomRoot.render(React.createElement(this.component, { ...this.props },
+            " ",
+            jsxContent || '',
+            " "));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ReactWrapperComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ReactWrapperComponent, selector: "ng-dhis2-ui-wrapper", inputs: { props: "props", component: "component" }, queries: [{ propertyName: "content", first: true, predicate: ["ngDhis2UiContent"], descendants: true }], usesOnChanges: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ReactWrapperComponent, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-dhis2-ui-wrapper',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { props: [{
+                type: Input
+            }], component: [{
+                type: Input
+            }], content: [{
+                type: ContentChild,
+                args: ['ngDhis2UiContent']
+            }] } });
+
+// Copyright 2023 UDSM DHIS2 Lab. All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+const sharedComponents = [];
+
+class SharedDhis2UiModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SharedDhis2UiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: SharedDhis2UiModule, imports: [CommonModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SharedDhis2UiModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SharedDhis2UiModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                    declarations: [...sharedComponents],
+                    exports: [...sharedComponents],
+                }]
+        }] });
+
+// Copyright 2023 UDSM DHIS2 Lab. All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+class HeaderBarApp {
+    constructor(module) {
+        this.name = module['name'];
+        this.namespace = module['namespace'];
+        this.defaultAction = this.getPath(module['defaultAction']);
+        this.icon = this.getPath(module['icon']);
+        this.displayName = module['displayName'];
+        this.description = module['description'];
+    }
+    getPath(item) {
+        if (item?.startsWith('../')) {
+            return '../../' + item;
+        }
+        return item;
+    }
+}
+
+// Copyright 2023 UDSM DHIS2 Lab. All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+class HeaderBarNotification {
+    constructor(notification) {
+        this.unreadInterpretations = notification['unreadInterpretations'];
+        this.unreadMessageConversations =
+            notification['unreadMessageConversations'];
+    }
+}
+
+// Copyright 2023 UDSM DHIS2 Lab. All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+class HeaderBarData {
+    constructor(httpClient) {
+        this.httpClient = httpClient;
+    }
+    getApps() {
+        return this.httpClient
+            .get('dhis-web-commons/menu/getModules.action', {
+            useRootUrl: true,
+        })
+            .pipe(catchError(() => of({
+            modules: [],
+        })), map((result) => {
+            return (result?.modules || [])
+                .map((module) => new HeaderBarApp(module))
+                .filter((headerBarApp) => headerBarApp);
+        }));
+    }
+    getNotifications() {
+        return this.httpClient
+            .get('me/dashboard')
+            .pipe(map((notifications) => notifications ? new HeaderBarNotification(notifications) : null));
+    }
+    get() {
+        return zip(this.getApps(), this.httpClient.get('systemSettings/helpPageLink'), this.httpClient.get('me/dashboard'), this.httpClient.get('systemSettings/applicationTitle'), this.httpClient.get('me.json?fields=authorities,avatar,email,name,settings')).pipe(map((response) => {
+            if (response) {
+                const [apps, help, notifications, title, user] = response;
+                this.apps = apps;
+                this.help = help;
+                this.notifications = notifications;
+                this.title = title;
+                this.user = user;
+                return this;
+            }
+            return null;
+        }), catchError(() => {
+            return of(null);
+        }));
+    }
+}
+
+// Copyright 2023 UDSM DHIS2 Lab. All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+
+const joinPath = (...parts) => {
+    const realParts = parts.filter((part) => !!part);
+    return realParts.map((part) => part.replace(/^\/+|\/+$/g, '')).join('/');
+};
+
+/**
+ * Copied from here:
+ * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#Escaping
+ */
+function escapeRegExpCharacters(text) {
+    return text.replace(/[/.*+?^${}()|[\]\\]/g, '\\$&');
+}
+function Search({ value, onChange, baseUrl }) {
+    return (React__default.createElement("div", { className: "headerbar-apps-search" },
+        React__default.createElement("span", { className: "headerbar-apps-search-input" },
+            React__default.createElement(InputField, { value: value, name: "filter", placeholder: i18n.t('Search apps'), onChange: onChange, initialFocus: true })),
+        React__default.createElement("span", { className: "headerbar-apps-search-icon" },
+            React__default.createElement("a", { href: joinPath(baseUrl, 'dhis-web-menu-management') },
+                React__default.createElement(IconSettings24, { color: colors.grey700 }))),
+        React__default.createElement("style", { jsx: true }, `
+        .headerbar-apps-search {
+          display: flex;
+          flex-direction: row;
+          flex-wrap: nowrap;
+          height: 52px;
+          margin: 8px;
+        }
+
+        .headerbar-apps-search-input {
+          flex: 1 100%;
+        }
+
+        .headerbar-apps-search-icon {
+          flex: 1 auto;
+          margin: 8px;
+        }
+      `)));
+}
+Search.propTypes = {
+    value: PropTypes.string.isRequired,
+    onChange: PropTypes.func.isRequired,
+    baseUrl: PropTypes.string,
+};
+function Item({ name, path, img }) {
+    return (React__default.createElement("a", { className: "headerbar-app-item", href: path },
+        React__default.createElement("img", { className: "headerbar-app-item-logo", src: img, alt: "app logo" }),
+        React__default.createElement("div", { className: "headerbar-app-item-title" }, name),
+        React__default.createElement("style", { jsx: true }, `
+        .headerbar-app-item {
+          display: flex;
+          flex-direction: column;
+          -webkit-box-align: center;
+          align-items: center;
+          -webkit-box-pack: center;
+          justify-content: center;
+          width: 96px;
+          margin: 8px;
+          border-radius: 12px;
+          text-decoration: none;
+          cursor: pointer;
+        }
+        .headerbar-app-item-logo {
+          display: inline-block;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          width: 96px;
+          margin: 8px;
+          border-radius: 12px;
+          text-decoration: none;
+          cursor: pointer;
+        }
+
+        .headerbar-app-item-logo:hover,
+        .headerbar-app-item-logo:focus {
+          background-color: ${theme.primary050};
+          cursor: pointer;
+        }
+
+        .headerbar-app-item-logo:hover > div {
+          font-weight: 500;
+          cursor: pointer;
+        }
+
+        .headerbar-app-item-logo {
+          width: 48px;
+          height: 48px;
+          margin: 8px;
+          cursor: pointer;
+        }
+
+        .headerbar-app-item-title {
+          overflow-wrap: anywhere;
+          margin-top: 14px;
+          color: rgba(0, 0, 0, 0.87);
+          font-size: 12px;
+          letter-spacing: 0.01em;
+          line-height: 14px;
+          text-align: center;
+          cursor: pointer;
+        }
+      `)));
+}
+Item.propTypes = {
+    img: PropTypes.string,
+    name: PropTypes.string,
+    path: PropTypes.string,
+};
+function List({ apps, filter }) {
+    return (React__default.createElement("div", { className: "headerbar-apps-menu-list", "data-test": "headerbar-apps-menu-list" },
+        apps
+            .filter(({ displayName, name }) => {
+            const appName = displayName || name;
+            const formattedAppName = appName.toLowerCase();
+            const formattedFilter = escapeRegExpCharacters(filter).toLowerCase();
+            return filter.length > 0
+                ? formattedAppName.match(formattedFilter)
+                : true;
+        })
+            .map(({ displayName, name, defaultAction, icon }, idx) => (React__default.createElement(Item, { key: `app-${name}-${idx}`, name: displayName || name, path: defaultAction, img: icon }))),
+        React__default.createElement("style", { jsx: true }, `
+        .headerbar-apps-menu-list {
+          display: flex;
+          flex-direction: row;
+          flex-wrap: wrap;
+          align-content: flex-start;
+          align-items: flex-start;
+          justify-content: flex-start;
+          width: 30vw;
+          min-width: 300px;
+          max-width: 560px;
+
+          min-height: 200px;
+          max-height: 465px;
+          margin: 0 8px 8px 8px;
+
+          overflow: auto;
+          overflow-x: hidden;
+        }
+      `)));
+}
+List.propTypes = {
+    apps: PropTypes.array,
+    filter: PropTypes.string,
+};
+const AppMenu = ({ apps, filter, onFilterChange, baseUrl }) => (React__default.createElement("div", { className: "headerbar-apps-menu", "data-test": "headerbar-apps-menu" },
+    React__default.createElement(Card, null,
+        React__default.createElement(Search, { value: filter, onChange: onFilterChange, baseUrl: baseUrl }),
+        React__default.createElement(List, { apps: apps, filter: filter })),
+    React__default.createElement("style", { jsx: true }, `
+      .headerbar-apps-menu {
+        z-index: 10000;
+        position: absolute;
+        right: -4px;
+      }
+    `)));
+AppMenu.propTypes = {
+    apps: PropTypes.array.isRequired,
+    onFilterChange: PropTypes.func.isRequired,
+    filter: PropTypes.string,
+    baseUrl: PropTypes.string,
+};
+const Apps = ({ apps, baseUrl }) => {
+    const [show, setShow] = useState(false);
+    const [filter, setFilter] = useState('');
+    const handleVisibilityToggle = useCallback(() => setShow(!show), [show]);
+    const handleFilterChange = useCallback(({ value }) => setFilter(value), []);
+    const containerEl = useRef(null);
+    const onDocClick = useCallback((evt) => {
+        if (containerEl.current &&
+            !containerEl.current.contains(evt.target)) {
+            setShow(false);
+        }
+    }, []);
+    useEffect(() => {
+        document.addEventListener('click', onDocClick);
+        return () => document.removeEventListener('click', onDocClick);
+    }, [onDocClick]);
+    return (React__default.createElement("div", { className: "headerbar-apps", ref: containerEl, "data-test": "headerbar-apps" },
+        React__default.createElement("button", { onClick: handleVisibilityToggle, "data-test": "headerbar-apps-icon" },
+            React__default.createElement(IconApps24, { color: colors.white })),
+        show ? (React__default.createElement(AppMenu, { apps: apps, filter: filter, baseUrl: baseUrl, onFilterChange: handleFilterChange })) : null,
+        React__default.createElement("style", { jsx: true }, `
+        .headerbar-apps button {
+          display: block;
+          background: transparent;
+          padding: ${spacers.dp4} ${spacers.dp12} 0;
+          border: 0;
+          cursor: pointer;
+          height: 100%;
+        }
+        .headerbar-apps button:focus {
+          outline: 2px solid white;
+          outline-offset: -2px;
+        }
+        .headerbar-apps button:focus:not(:focus-visible) {
+          outline: none;
+        }
+        .headerbar-apps button:hover {
+          background: #1a557f;
+        }
+        .headerbar-apps button:active {
+          background: #104067;
+        }
+
+        .headerbar-apps {
+          position: relative;
+          height: 100%;
+        }
+      `)));
+};
+Apps.propTypes = {
+    apps: PropTypes.array.isRequired,
+    baseUrl: PropTypes.string,
+};
+
+const query = {
+    customLogo: {
+        resource: 'staticContent/logo_banner',
+    },
+};
+const pathExists = (data) => data &&
+    data.customLogo &&
+    data.customLogo.images &&
+    data.customLogo.images.png;
+const LogoImage = () => {
+    const { loading, error, data } = useDataQuery(query);
+    if (loading) {
+        return null;
+    }
+    let Logo;
+    if (!error && pathExists(data)) {
+        Logo = (React__default.createElement("img", { alt: "Headerbar Logo", src: data.customLogo.images.png }));
+    }
+    else {
+        Logo = React__default.createElement(LogoIconWhite, null);
+    }
+    return (React__default.createElement("div", { className: "header-bar-logo" },
+        Logo,
+        React__default.createElement("style", { jsx: true }, `
+                .header-bar-logo {
+                    min-width: 48px;
+                    max-width: 250px;
+                    height: 48px;
+                    display: flex;
+                    -webkit-box-pack: center;
+                    justify-content: center;
+                    -webkit-box-align: center;
+                    align-items: center;
+                    overflow: hidden;
+                }
+
+                 .header-bar-logo svg {
+                    height: 25px;
+                    width: 27px;
+                }
+                
+               .header-bar-logo img {
+                    max-height: 100%;
+                    min-height: auto;
+                    width: auto;
+                }
+            `)));
+};
+
+const Logo = ({ baseUrl }) => {
+    return (React__default.createElement("div", { className: "headerbar-logo", "data-test": "headerbar-logo" },
+        React__default.createElement("a", { href: baseUrl },
+            React__default.createElement(LogoImage, null)),
+        React__default.createElement("style", { jsx: true }, `
+        .headerbar-logo {
+          box-sizing: border-box;
+          min-width: 49px;
+          max-height: 48px;
+          margin: 0 12px 0 0;
+          border-right: 1px solid rgba(32, 32, 32, 0.15);
+        }
+        .headerbar-logo:hover {
+          background-color: #1a557f;
+        }
+
+        .headerbar-logo a,
+        .headerbar-logo a:hover,
+        .headerbar-logo a:focus,
+        .headerbar-logo a:active,
+        .headerbar-logo a:visited {
+          user-select: none;
+        }
+        .headerbar-logo a:focus {
+          outline: 2px solid white;
+          outline-offset: -2px;
+        }
+        .headerbar-logo a:focus:not(:focus-visible) {
+          outline: none;
+        }
+      `)));
+};
+
+function icon(kind) {
+    if (kind === 'message') {
+        return React__default.createElement(IconMessages24, { color: colors.white });
+    }
+    else {
+        return React__default.createElement(IconMail24, { color: colors.white });
+    }
+}
+const NotificationIcon = (params) => {
+    const { count, href, kind, dataTestId } = params;
+    const notificationClassName = "headerbar-notification-icon " + kind;
+    return (React__default.createElement("a", { href: href, className: notificationClassName, "data-test": dataTestId },
+        icon(kind),
+        count > 0 && React__default.createElement("span", { "data-test": `${dataTestId}-count` }, count),
+        React__default.createElement("style", { jsx: true }, `
+            .headerbar-notification-icon {
+                position: relative;
+                margin: 0;
+                cursor: pointer;
+                padding: 0 ${spacers.dp12};
+                height: 100%;
+                display: flex;
+                align-items: center;
+            }
+            .headerbar-notification-icon:focus {
+                outline: 2px solid white;
+                outline-offset: -2px;
+            }
+            .headerbar-notification-icon:focus:not(:focus-visible) {
+                outline: none;
+            }
+            .headerbar-notification-icon:hover {
+                background: #1a557f;
+            }
+            .headerbar-notification-icon:active {
+                background: #104067;
+            }
+            .headerbar-notification-icon span {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                z-index: 1;
+                position: absolute;
+                top: 3px;
+                right: 2px;
+                min-width: 18px;
+                min-height: 18px;
+                border-radius: ${spacers.dp12};
+                box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1),
+                    0 1px 2px 0 rgba(0, 0, 0, 0.06);
+                background-color: ${theme.secondary500};
+                color: ${colors.white};
+                font-size: 13px;
+                font-weight: 600;
+                line-height: 15px;
+                text-align: center;
+                cursor: inherit;
+                padding: 0 ${spacers.dp4};
+            }
+        `)));
+};
+NotificationIcon.defaultProps = {
+    count: 0,
+};
+NotificationIcon.propTypes = {
+    href: PropTypes.string.isRequired,
+    count: PropTypes.number,
+    dataTestId: PropTypes.string,
+    message: PropTypes.string,
+    kind: PropTypes.oneOf(['interpretation', 'message']),
+};
+
+/*
+ AUTHORITIES:
+ - ALL: superuser
+ - M_dhis-web-interpretation: access to interpretations app
+ - M_dhis-web-messaging: access to messaging app
+ */
+const hasAuthority = (userAuthorities, authId) => Array.isArray(userAuthorities) &&
+    userAuthorities.some((userAuthId) => userAuthId === 'ALL' || userAuthId === authId);
+const Notifications = (params) => {
+    const { interpretations, messages, userAuthorities, } = params;
+    const { baseUrl } = useConfig();
+    return (React__default.createElement("div", { className: "headerbar-notifications", "data-test": "headerbar-notifications" },
+        hasAuthority(userAuthorities, 'M_dhis-web-interpretation') && (React__default.createElement(NotificationIcon, { count: interpretations, href: joinPath(baseUrl, 'dhis-web-interpretation'), kind: "message", dataTestId: "headerbar-interpretations" })),
+        hasAuthority(userAuthorities, 'M_dhis-web-messaging') && (React__default.createElement(NotificationIcon, { message: "email", count: messages, href: joinPath(baseUrl, 'dhis-web-messaging'), kind: "interpretation", dataTestId: "headerbar-messages" })),
+        React__default.createElement("style", { jsx: true }, `
+                .headerbar-notifications {
+                    user-select: none;
+                    display: flex;
+                    flex-direction: row;
+                    align-items: center;
+                    height: 100%;
+                }
+            `)));
+};
+Notifications.propTypes = {
+    interpretations: PropTypes.number,
+    messages: PropTypes.number,
+    userAuthorities: PropTypes.arrayOf(PropTypes.string),
+};
+
+const useDebugInfo = () => {
+    const { appName, appVersion, systemInfo } = useConfig();
+    return {
+        app_name: appName || null,
+        app_version: appVersion?.full || null,
+        dhis2_version: systemInfo?.version || null,
+        dhis2_revision: systemInfo?.revision || null,
+    };
+};
+const useFormattedDebugInfo = () => JSON.stringify(useDebugInfo(), undefined, 2);
+
+const formatDebugInfoKey = (key) => {
+    const tokens = key.split('_');
+    return tokens
+        .map((token) => {
+        if (token.toLowerCase() === 'dhis2') {
+            return 'DHIS2';
+        }
+        else {
+            return token[0].toUpperCase() + token.substr(1).toLowerCase();
+        }
+    })
+        .join(' ');
+};
+function DebugInfoTable() {
+    const debugInfo = useDebugInfo();
+    return (React__default.createElement("table", { 'data-test': 'dhis2-ui-headerbar-debuginfotable' },
+        React__default.createElement("tbody", null, Object.keys(debugInfo).map((key) => (React__default.createElement("tr", { key: key },
+            React__default.createElement("td", { className: "debug-info-key" }, formatDebugInfoKey(key)),
+            React__default.createElement("td", null, debugInfo[key]))))),
+        React__default.createElement("style", { jsx: true }, `
+                table {
+                    white-space: pre-wrap;
+                    font-size: 14px;
+                    line-height: 1.2;
+                    color: ${colors.grey700};
+                    font-famile: Menlo, Courier, monospace !important;
+                }
+                td {
+                    padding: 3px 16px 3px 0;
+                }
+                .debug-info-key {
+                    font-weight: bold;
+                }
+            `)));
+}
+
+function DebugInfoModal(params) {
+    const { onClose } = params;
+    const debugInfo = useFormattedDebugInfo();
+    const { show: showClipboardAlert } = useAlert('Debug information copied to clipboard', { duration: 3000 });
+    const copyDebugInfo = () => {
+        navigator.clipboard.writeText(debugInfo);
+        onClose();
+        showClipboardAlert();
+    };
+    return (React__default.createElement(Modal, { position: "middle", dataTest: "dhis2-ui-headerbar-debuginfomodal" },
+        React__default.createElement(ModalTitle, null, i18n.t('Debug info')),
+        React__default.createElement(ModalContent, null,
+            React__default.createElement(DebugInfoTable, null)),
+        React__default.createElement(ModalActions, null,
+            React__default.createElement(ButtonStrip, { end: true },
+                React__default.createElement(Button, { onClick: () => onClose() }, i18n.t('Close')),
+                React__default.createElement(Button, { primary: true, onClick: copyDebugInfo, dataTest: "dhis2-ui-headerbar-debuginfomodal-copybutton" }, i18n.t('Copy debug info'))))));
+}
+DebugInfoModal.propTypes = {
+    onClose: PropTypes.func.isRequired,
+};
+
+const DebugInfoMenuItem = (params) => {
+    const { hideProfileMenu, showDebugInfoModal } = params;
+    const debugInfo = useDebugInfo();
+    const openDebugModal = () => {
+        hideProfileMenu();
+        showDebugInfoModal();
+    };
+    const debugInfoLabel = (React__default.createElement("div", { className: "root" },
+        React__default.createElement("div", { className: "instance-info version", "data-test": "dhis2-ui-headerbar-instanceinfo" }, debugInfo.dhis2_version
+            ? i18n.t('DHIS2 {{dhis2Version}}', {
+                dhis2Version: debugInfo.dhis2_version,
+            })
+            : i18n.t('DHIS2 version unknown')),
+        React__default.createElement("div", { className: "version", "data-test": "dhis2-ui-headerbar-appinfo" }, debugInfo.app_name
+            ? debugInfo.app_version
+                ? `${debugInfo.app_name} ${debugInfo.app_version}`
+                : i18n.t('{{appName}} version unknown', {
+                    appName: debugInfo.app_name,
+                })
+            : debugInfo.app_version
+                ? i18n.t('App {{appVersion}}', {
+                    appVersion: debugInfo.app_version,
+                })
+                : i18n.t('App version unknown')),
+        React__default.createElement("style", { jsx: true }, `
+                .root {
+                    color: ${colors.grey700};
+                    font-style: italic;
+                    font-size: 14px;
+                    line-height: 17px;
+                }
+                .instance-info {
+                    margin-bottom: 4px;
+                }
+                .version {
+                    white-space: no-wrap;
+                }
+            `)));
+    return (React__default.createElement(MenuItem, { dense: true, onClick: openDebugModal, label: debugInfoLabel, dataTest: "dhis2-ui-headerbar-debuginfo" }));
+};
+DebugInfoMenuItem.propTypes = {
+    hideProfileMenu: PropTypes.func.isRequired,
+    showDebugInfoModal: PropTypes.func.isRequired,
+};
+
+const ProfileName = (params) => {
+    const { children } = params;
+    return (React__default.createElement("div", { className: "headerbar-profile-username", "data-test": "headerbar-profile-username" },
+        children,
+        React__default.createElement("style", { jsx: true }, `
+            .headerbar-profile-username {
+                margin-bottom: 3px;
+                font-size: 16px;
+                line-height: 19px;
+            }
+        `)));
+};
+ProfileName.propTypes = {
+    children: PropTypes.string,
+};
+const ProfileEmail = (params) => {
+    const { children } = params;
+    return (React__default.createElement("div", { className: "headerbar-profile-user-email", "data-test": "headerbar-profile-user-email" },
+        children,
+        React__default.createElement("style", { jsx: true }, `
+                .headerbar-profile-user-email {
+                    margin-bottom: 6px;
+                    font-size: 14px;
+                    line-height: 16px;
+                }
+            `)));
+};
+ProfileEmail.propTypes = {
+    children: PropTypes.string,
+};
+const ProfileEdit = (params) => {
+    const { children } = params;
+    const { baseUrl } = useConfig();
+    return (React__default.createElement("a", { className: "headerbar-profile-edit-profile-link", href: joinPath(baseUrl, 'dhis-web-user-profile/#/profile'), "data-test": "headerbar-profile-edit-profile-link" },
+        children,
+        React__default.createElement("style", { jsx: true }, `
+                .headerbar-profile-edit-profile-link {
+                    color: rgba(0, 0, 0, 0.87);
+                    font-size: 12px;
+                    line-height: 14px;
+                    text-decoration: underline !important;
+                    cursor: pointer;
+                }
+            `)));
+};
+ProfileEdit.propTypes = {
+    children: PropTypes.string,
+};
+const ProfileDetails = (params) => {
+    const { name, email } = params;
+    return (React__default.createElement("div", { className: "headerbar-profile-details" },
+        React__default.createElement(ProfileName, null, name),
+        React__default.createElement(ProfileEmail, null, email),
+        React__default.createElement(ProfileEdit, null, i18n.t('Edit profile')),
+        React__default.createElement("style", { jsx: true }, `
+                .headerbar-profile-details {
+                    display: flex;
+                    flex-direction: column;
+                    margin-left: 20px;
+                    color: #000;
+                    font-size: 14px;
+                    font-weight: 400;
+                }
+            `)));
+};
+ProfileDetails.propTypes = {
+    email: PropTypes.string,
+    name: PropTypes.string,
+};
+const ProfileHeader = (params) => {
+    const { name, email, avatarId } = params;
+    return (React__default.createElement("div", { className: "headerbar-profile-header" },
+        React__default.createElement(UserAvatar, { avatarId: avatarId, name: name, dataTest: "headerbar-profile-menu-icon", large: true }),
+        React__default.createElement(ProfileDetails, { name: name, email: email }),
+        React__default.createElement("style", { jsx: true }, `
+            .headerbar-profile-header {
+                display: flex;
+                flex-direction: row;
+                margin-left: 24px;
+                padding-top: 20px;
+            }
+        `)));
+};
+ProfileHeader.propTypes = {
+    avatarId: PropTypes.string,
+    email: PropTypes.string,
+    name: PropTypes.string,
+};
+
+const headerBarContext = createContext({
+    updateAvailable: false,
+    onApplyAvailableUpdate: () => { },
+});
+const HeaderBarContextProvider = (params) => {
+    const { updateAvailable, onApplyAvailableUpdate, children, } = params;
+    return (React__default.createElement(headerBarContext.Provider, { value: { updateAvailable, onApplyAvailableUpdate } }, children));
+};
+HeaderBarContextProvider.propTypes = {
+    children: PropTypes.node,
+    updateAvailable: PropTypes.bool,
+    onApplyAvailableUpdate: PropTypes.func,
+};
+const useHeaderBarContext = () => useContext(headerBarContext);
+
+function UpdateNotification(params) {
+    const { hideProfileMenu } = params;
+    const { appName } = useConfig();
+    const { updateAvailable, onApplyAvailableUpdate } = useHeaderBarContext();
+    const onClick = () => {
+        hideProfileMenu();
+        onApplyAvailableUpdate?.();
+    };
+    const updateNotificationLabel = (React__default.createElement("div", { className: "root" },
+        React__default.createElement("div", { className: "badge" }),
+        React__default.createElement("div", { className: "spacer" }),
+        React__default.createElement("div", { className: "message" },
+            appName
+                ? i18n.t('New {{appName}} version available', { appName })
+                : i18n.t('New app version available'),
+            React__default.createElement("br", null),
+            i18n.t('Click to reload')),
+        React__default.createElement("style", { jsx: true }, `
+                .root {
+                    display: flex;
+                    flex-direction: row;
+                    align-items: center;
+                    font-size: 14px;
+                    line-height: 17px;
+                }
+                .badge {
+                    display: inline-block;
+                    width: 12px;
+                    height: 12px;
+                    margin: 0 8px;
+                    border-radius: 6px;
+                    background-color: ${colors.blue600};
+                }
+                .spacer {
+                    display: inline-block;
+                    width: 8px;
+                }
+                .message {
+                    display: inline-block;
+                }
+            `)));
+    return updateAvailable ? (React__default.createElement(MenuItem, { dense: true, onClick: onClick, label: updateNotificationLabel, dataTest: "dhis2-ui-headerbar-updatenotification" })) : null;
+}
+UpdateNotification.propTypes = {
+    hideProfileMenu: PropTypes.func.isRequired,
+};
+
+const LoadingMask = () => (React__default.createElement(Layer, { translucent: true, disablePortal: true, dataTest: "headerbar-profile-menu-loading-mask" },
+    React__default.createElement(Center, null,
+        React__default.createElement(CircularLoader, null))));
+const ProfileContents = (params) => {
+    const { name, email, avatarId, helpUrl, hideProfileMenu, showDebugInfoModal, } = params;
+    const { baseUrl } = useConfig();
+    const [loading, setLoading] = useState(false);
+    return (React__default.createElement(Card, null,
+        React__default.createElement("div", { className: "headerbar-profile-contents" },
+            React__default.createElement(ProfileHeader, { name: name, email: email, avatarId: avatarId }),
+            React__default.createElement(Divider, { margin: "13px 0 7px 0" }),
+            React__default.createElement("ul", { "data-test": "headerbar-profile-menu" },
+                React__default.createElement(MenuItem, { href: joinPath(baseUrl, 'dhis-web-user-profile/#/settings'), label: i18n.t('Settings'), value: "settings", icon: React__default.createElement(IconSettings24, { color: colors.grey700 }) }),
+                React__default.createElement(MenuItem, { href: joinPath(baseUrl, 'dhis-web-user-profile/#/account'), label: i18n.t('Account'), value: "account", icon: React__default.createElement(IconUser24, { color: colors.grey700 }) }),
+                helpUrl && (React__default.createElement(MenuItem, { href: helpUrl, label: i18n.t('Help'), value: "help", icon: React__default.createElement(IconQuestion24, { color: colors.grey700 }) })),
+                React__default.createElement(MenuItem, { href: joinPath(baseUrl, 'dhis-web-user-profile/#/aboutPage'), label: i18n.t('About DHIS2'), value: "about", icon: React__default.createElement(IconInfo24, { color: colors.grey700 }) }),
+                React__default.createElement(MenuItem, { href: joinPath(baseUrl, 'dhis-web-commons-security/logout.action'), 
+                    // NB: By MenuItem implementation, this callback
+                    // overwrites default navigation behavior but maintains
+                    // the href attribute
+                    onClick: async () => {
+                        setLoading(true);
+                        await clearSensitiveCaches();
+                        setLoading(false);
+                        window.location.assign(joinPath(baseUrl, 'dhis-web-commons-security/logout.action'));
+                    }, label: i18n.t('Logout'), value: "logout", icon: React__default.createElement(IconLogOut24, { color: colors.grey700 }) }),
+                React__default.createElement(MenuDivider, { dense: true }),
+                React__default.createElement(DebugInfoMenuItem, { hideProfileMenu: hideProfileMenu, showDebugInfoModal: showDebugInfoModal }),
+                React__default.createElement(UpdateNotification, { hideProfileMenu: hideProfileMenu }))),
+        loading && React__default.createElement(LoadingMask, null),
+        React__default.createElement("style", { jsx: true }, `
+                .headerbar-profile-contents {
+                    width: 100%;
+                    padding: 0;
+                }
+
+                .headerbar-profile-contents ul {
+                    padding: 0;
+                    margin: 0;
+                }
+
+                .headerbar-profile-contents a {
+                    display: inline-flex !important;
+                }
+
+               .headerbar-profile-contents a,
+               .headerbar-profile-contents a:hover,
+               .headerbar-profile-contents a:focus,
+               .headerbar-profile-contents a:active,
+               .headerbar-profile-contents a:visited {
+                    text-decoration: none;
+                    display: block;
+                }
+            `)));
+};
+ProfileContents.propTypes = {
+    hideProfileMenu: PropTypes.func.isRequired,
+    showDebugInfoModal: PropTypes.func.isRequired,
+    avatarId: PropTypes.string,
+    email: PropTypes.string,
+    helpUrl: PropTypes.string,
+    name: PropTypes.string,
+};
+const ProfileMenu = (params) => {
+    const { ...props } = params;
+    return (React__default.createElement("div", { className: "headerbar-profile-menu", "data-test": "headerbar-profile-menu" },
+        React__default.createElement(ProfileContents, { ...props }),
+        React__default.createElement("style", { jsx: true }, `
+                .headerbar-profile-menu {
+                    z-index: 10000;
+                    position: absolute;
+                    right: 4px;
+                    width: 320px;
+                }
+            `)));
+};
+ProfileMenu.propTypes = {
+    hideProfileMenu: PropTypes.func.isRequired,
+    showDebugInfoModal: PropTypes.func.isRequired,
+    avatarId: PropTypes.string,
+    email: PropTypes.string,
+    helpUrl: PropTypes.string,
+    name: PropTypes.string,
+};
+
+const useOnDocClick = (containerRef, hide) => {
+    const onDocClick = useMemo(() => {
+        return (evt) => {
+            if (!containerRef.current) {
+                return null;
+            }
+            if (!containerRef.current.contains(evt.target)) {
+                hide();
+            }
+            return null;
+        };
+    }, [containerRef, hide]);
+    useEffect(() => {
+        document.addEventListener('click', onDocClick);
+        return () => {
+            document.removeEventListener('click', onDocClick);
+        };
+    }, [onDocClick]);
+};
+
+const Profile = (params) => {
+    const { name, email, avatarId, helpUrl } = params;
+    const [showProfileMenu, setShowProfileMenu] = useState(false);
+    const [showDebugInfoModal, setShowDebugInfoModal] = useState(false);
+    const hideProfileMenu = useCallback(() => setShowProfileMenu(false), [setShowProfileMenu]);
+    const toggleProfileMenu = useCallback(() => setShowProfileMenu((show) => !show), [setShowProfileMenu]);
+    const containerRef = useRef(null);
+    useOnDocClick(containerRef, hideProfileMenu);
+    return (React__default.createElement("div", { ref: containerRef, "data-test": "headerbar-profile", className: "headerbar-profile" },
+        React__default.createElement("button", { className: "headerbar-profile-btn", onClick: toggleProfileMenu },
+            React__default.createElement(UserAvatar, { avatarId: avatarId, name: name, dataTest: "headerbar-profile-icon", medium: true })),
+        showProfileMenu && (React__default.createElement(ProfileMenu, { avatarId: avatarId, name: name, email: email, helpUrl: helpUrl, hideProfileMenu: hideProfileMenu, showDebugInfoModal: () => {
+                setShowDebugInfoModal(true);
+            } })),
+        showDebugInfoModal && (React__default.createElement(DebugInfoModal, { onClose: () => {
+                setShowDebugInfoModal(false);
+            } })),
+        React__default.createElement("style", { jsx: true }, `
+                .headerbar-profile {
+                    position: relative;
+                    height: 100%;
+                }
+
+                .headerbar-profile-btn {
+                    background: transparent;
+                    padding: 6px;
+                    border: 0;
+                    cursor: pointer;
+                }
+                .headerbar-profile-btn:focus {
+                    outline: 2px solid white;
+                    outline-offset: -2px;
+                }
+                .headerbar-profile-btn:focus:not(:focus-visible) {
+                    outline: none;
+                }
+                .headerbar-profile-btn:hover {
+                    background: #1a557f;
+                }
+                .headerbar-profile-btn:active {
+                    background: #104067;
+                }
+            `)));
+};
+Profile.propTypes = {
+    name: PropTypes.string.isRequired,
+    avatarId: PropTypes.string,
+    email: PropTypes.string,
+    helpUrl: PropTypes.string,
+};
+
+const Title = (params) => {
+    const { app, instance } = params;
+    return (React__default.createElement("div", { className: "headerbar-title", "data-test": "headerbar-title" },
+        app ? `${instance} - ${app}` : `${instance}`,
+        React__default.createElement("style", { jsx: true }, `
+        .headerbar-title {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          font-size: 14px;
+          font-weight: 500;
+          letter-spacing: 0.01em;
+          white-space: nowrap;
+        }
+      `)));
+};
+Title.propTypes = {
+    app: PropTypes.string,
+    instance: PropTypes.string,
+};
+
+const HeaderBar = ({ appName, data, className }) => {
+    const loading = false;
+    const error = null;
+    // See https://jira.dhis2.org/browse/LIBS-180
+    if (!loading && !error) {
+        // TODO: This will run every render which is probably wrong!
+        // Also, setting the global locale shouldn't be done in the headerbar
+        const locale = data.user['settings']['keyUiLocale'] || 'en';
+        i18n.setDefaultNamespace('default');
+        i18n.changeLanguage(locale);
+    }
+    {
+        /* TODO: Find better way to attach base URL */
+    }
+    const baseUrl = '../../../';
+    return (React__default.createElement("header", { className: className },
+        React__default.createElement("div", { className: "main" }, !loading && !error && (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement(Logo, { baseUrl: baseUrl }),
+            React__default.createElement(Title, { app: appName, instance: data.title['applicationTitle'] }),
+            React__default.createElement("div", { className: "right-control-spacer" }),
+            React__default.createElement(Notifications, { interpretations: data.notifications.unreadInterpretations, messages: data.notifications.unreadMessageConversations, userAuthorities: data.user['authorities'] }),
+            React__default.createElement(Apps, { apps: data.apps, baseUrl: baseUrl }),
+            React__default.createElement(Profile, { name: data.user['name'], email: data.user['email'], avatarId: (data.user['avatar'] || {})['id'], helpUrl: data.help.helpPageLink })))),
+        React__default.createElement("style", { jsx: true }, `
+        .main {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          justify-content: space-between;
+          background-color: #2c6693;
+          color: ${colors.white};
+          height: 48px;
+        }
+        .right-control-spacer {
+          margin-left: auto;
+        }
+      `)));
+};
+HeaderBar.propTypes = {
+    appName: PropTypes.string,
+    data: HeaderBarData,
+    className: PropTypes.string,
+    updateAvailable: PropTypes.bool,
+    onApplyAvailableUpdate: PropTypes.func,
+};
+
+class HeaderBarComponent extends ReactWrapperComponent {
+    constructor(elementRef, httpClient) {
+        super(elementRef);
+        this.httpClient = httpClient;
+    }
+    async ngAfterViewInit() {
+        if (!this.elementRef)
+            throw new Error('No element ref');
+        this.reactDomRoot = ReactDOM.createRoot(this.elementRef.nativeElement);
+        const manifest = await firstValueFrom(this.httpClient.manifest());
+        const data = await firstValueFrom(new HeaderBarData(this.httpClient).get());
+        this.component = data
+            ? () => (React__default.createElement(DataProvider, null, React__default.createElement(HeaderBar, { appName: manifest?.name, data: data })))
+            : () => React__default.createElement("div", null, "Something went wrong");
+        this.render();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HeaderBarComponent, deps: [{ token: i0.ElementRef }, { token: i1.NgxDhis2HttpClientService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: HeaderBarComponent, selector: "ng-dhis2-ui-header-bar", usesInheritance: true, ngImport: i0, template: `<ng-container *ngIf="data$ | async as data"> </ng-container>`, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HeaderBarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ng-dhis2-ui-header-bar',
+                    template: `<ng-container *ngIf="data$ | async as data"> </ng-container>`,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.NgxDhis2HttpClientService }]; } });
+
+class HeaderBarModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HeaderBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: HeaderBarModule, declarations: [HeaderBarComponent], imports: [CommonModule, SharedDhis2UiModule], exports: [HeaderBarComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HeaderBarModule, imports: [CommonModule, SharedDhis2UiModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HeaderBarModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, SharedDhis2UiModule],
+                    declarations: [HeaderBarComponent],
+                    exports: [HeaderBarComponent],
+                }]
+        }] });
+
+// Copyright 2023 UDSM DHIS2 Lab. All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+
+class ButtonComponent extends ReactWrapperComponent {
+    constructor() {
+        super(...arguments);
+        this.buttonClick = new EventEmitter();
+        this.props = {
+            onClick: (e) => {
+                this.onButtonClick(e);
+            },
+        };
+        this.component = Button$1;
+    }
+    ngOnInit() {
+        this.props = {
+            ...this.props,
+            primary: this.primary,
+            secondary: this.secondary,
+            destructive: this.destructive,
+            small: this.small,
+            large: this.large,
+        };
+    }
+    onButtonClick(event) {
+        this.buttonClick.emit(event);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ButtonComponent, selector: "ng-dhis2-ui-button", inputs: { label: "label", primary: "primary", secondary: "secondary", destructive: "destructive", disabled: "disabled", small: "small", large: "large" }, outputs: { buttonClick: "buttonClick" }, usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ng-dhis2-ui-button',
+                    template: '<ng-content></ng-content>',
+                }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], primary: [{
+                type: Input
+            }], secondary: [{
+                type: Input
+            }], destructive: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], small: [{
+                type: Input
+            }], large: [{
+                type: Input
+            }], buttonClick: [{
+                type: Output
+            }] } });
+
+class ButtonModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: ButtonModule, declarations: [ButtonComponent], imports: [CommonModule, SharedDhis2UiModule], exports: [ButtonComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonModule, imports: [CommonModule, SharedDhis2UiModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ButtonComponent],
+                    exports: [ButtonComponent],
+                    imports: [CommonModule, SharedDhis2UiModule],
+                }]
+        }] });
+
+// Copyright 2023 UDSM DHIS2 Lab. All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+
+class AppShellComponent extends ReactWrapperComponent {
+    constructor() {
+        super(...arguments);
+        this.appConfig = {
+        // url: process.env.REACT_APP_DHIS2_BASE_URL,
+        // appName: process.env.REACT_APP_DHIS2_APP_NAME || '',
+        // appVersion: process.env.REACT_APP_DHIS2_APP_VERSION || '',
+        // apiVersion: parseInt(process.env.REACT_APP_DHIS2_API_VERSION),
+        // pwaEnabled: process.env.REACT_APP_DHIS2_APP_PWA_ENABLED === 'true',
+        // plugin: process.env.REACT_APP_DHIS2_APP_PLUGIN === 'true',
+        };
+        this.component = React__default.createElement(AppAdapter, { ...this.appConfig },
+            React__default.createElement(React__default.Suspense, { fallback: React__default.createElement(Layer$1, { level: layers.alert },
+                    React__default.createElement(CenteredContent, null,
+                        React__default.createElement(CircularLoader$1, null))) }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppShellComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppShellComponent, selector: "ng-dhis2-ui-app-shell", usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppShellComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ng-dhis2-ui-app-shell',
+                    template: '<ng-content></ng-content>',
+                }]
+        }] });
+
+class AppShellModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppShellModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: AppShellModule, declarations: [AppShellComponent], imports: [CommonModule, SharedDhis2UiModule], exports: [AppShellComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppShellModule, imports: [CommonModule, SharedDhis2UiModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppShellModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [AppShellComponent],
+                    imports: [CommonModule, SharedDhis2UiModule],
+                    exports: [AppShellComponent],
+                }]
+        }] });
+
+// Copyright 2023 UDSM DHIS2 Lab. All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AppShellComponent, AppShellModule, ButtonComponent, ButtonModule, HeaderBarComponent, HeaderBarModule, NgDhis2UiModule };
+//# sourceMappingURL=iapps-ng-dhis2-ui.mjs.map