@iapps/ng-dhis2-ui 1.0.4 → 1.0.7

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

@@ -1,7 +1,7 @@
+import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { NgModule, Directive, Input, ContentChild, Component, EventEmitter, Output } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { IconEdit16, spacers, colors, theme, Tooltip, Button as Button$1, IconDimensionData16, IconClock16, IconDimensionOrgUnit16, SingleSelectField, SingleSelectOption, InputField as InputField$1, TabBar, Tab, Transfer, Checkbox, OrganisationUnitTree, MultiSelect, MultiSelectOption, IconWarningFilled16 } from '@dhis2/ui';
+import { IconEdit16, spacers, colors, theme, Tooltip, Button as Button$1, IconDimensionData16, IconClock16, IconDimensionOrgUnit16, SingleSelectField, SingleSelectOption, InputField as InputField$1, TabBar, Tab, Transfer, Modal as Modal$1, ModalTitle as ModalTitle$1, ModalContent as ModalContent$1, ModalActions as ModalActions$1, ButtonStrip as ButtonStrip$1, Checkbox, OrganisationUnitTree, MultiSelect, MultiSelectOption, IconWarningFilled16 } from '@dhis2/ui';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import * as React from 'react';
@@ -28,18 +28,6 @@ import parse from 'html-react-parser';
 import { getNowInCalendar, generateFixedPeriods } from '@dhis2/multi-calendar-dates';
 import { isObject, isString } from 'lodash';
 
-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],
-                }]
-        }] });
-
 const TransferOption = ({ disabled, label, highlighted, selected, onClick, onDoubleClick, value, icon, active, tooltipText, dataTest, onEditClick, }) => {
     const renderContent = () => (React__default.createElement("div", { className: cx('chip', {
             highlighted,
@@ -172,11 +160,11 @@ TransferOption.propTypes = {
 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] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: SharedDhis2UiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.1", ngImport: i0, type: SharedDhis2UiModule, imports: [CommonModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: SharedDhis2UiModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SharedDhis2UiModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: SharedDhis2UiModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],
@@ -496,7 +484,7 @@ const LogoImage = () => {
     }
     let Logo;
     if (!error && pathExists(data)) {
-        Logo = (React__default.createElement("img", { alt: "Headerbar Logo", src: data.customLogo.images.png }));
+        Logo = React__default.createElement("img", { alt: "Headerbar Logo", src: data.customLogo.images.png });
     }
     else {
         Logo = React__default.createElement(LogoIconWhite, null);
@@ -504,29 +492,29 @@ const LogoImage = () => {
     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;
-                }
-            `)));
+        .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 }) => {
@@ -572,56 +560,56 @@ function icon(kind) {
 }
 const NotificationIcon = (params) => {
     const { count, href, kind, dataTestId } = params;
-    const notificationClassName = "headerbar-notification-icon " + kind;
+    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$1.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$1.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$1.secondary500};
-                color: ${colors$1.white};
-                font-size: 13px;
-                font-weight: 600;
-                line-height: 15px;
-                text-align: center;
-                cursor: inherit;
-                padding: 0 ${spacers$1.dp4};
-            }
-        `)));
+        .headerbar-notification-icon {
+          position: relative;
+          margin: 0;
+          cursor: pointer;
+          padding: 0 ${spacers$1.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$1.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$1.secondary500};
+          color: ${colors$1.white};
+          font-size: 13px;
+          font-weight: 600;
+          line-height: 15px;
+          text-align: center;
+          cursor: inherit;
+          padding: 0 ${spacers$1.dp4};
+        }
+      `)));
 };
 NotificationIcon.defaultProps = {
     count: 0,
@@ -643,20 +631,20 @@ NotificationIcon.propTypes = {
 const hasAuthority = (userAuthorities, authId) => Array.isArray(userAuthorities) &&
     userAuthorities.some((userAuthId) => userAuthId === 'ALL' || userAuthId === authId);
 const Notifications = (params) => {
-    const { interpretations, messages, userAuthorities, } = 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%;
-                }
-            `)));
+        .headerbar-notifications {
+          user-select: none;
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          height: 100%;
+        }
+      `)));
 };
 Notifications.propTypes = {
     interpretations: PropTypes.number,
@@ -695,20 +683,20 @@ function DebugInfoTable() {
             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$1.grey700};
-                    font-famile: Menlo, Courier, monospace !important;
-                }
-                td {
-                    padding: 3px 16px 3px 0;
-                }
-                .debug-info-key {
-                    font-weight: bold;
-                }
-            `)));
+        table {
+          white-space: pre-wrap;
+          font-size: 14px;
+          line-height: 1.2;
+          color: ${colors$1.grey700};
+          font-famile: Menlo, Courier, monospace !important;
+        }
+        td {
+          padding: 3px 16px 3px 0;
+        }
+        .debug-info-key {
+          font-weight: bold;
+        }
+      `)));
 }
 
 function DebugInfoModal(params) {
@@ -758,19 +746,19 @@ const DebugInfoMenuItem = (params) => {
                 })
                 : i18n.t('App version unknown')),
         React__default.createElement("style", { jsx: true }, `
-                .root {
-                    color: ${colors$1.grey700};
-                    font-style: italic;
-                    font-size: 14px;
-                    line-height: 17px;
-                }
-                .instance-info {
-                    margin-bottom: 4px;
-                }
-                .version {
-                    white-space: no-wrap;
-                }
-            `)));
+        .root {
+          color: ${colors$1.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 = {
@@ -783,12 +771,12 @@ const ProfileName = (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;
-            }
-        `)));
+        .headerbar-profile-username {
+          margin-bottom: 3px;
+          font-size: 16px;
+          line-height: 19px;
+        }
+      `)));
 };
 ProfileName.propTypes = {
     children: PropTypes.string,
@@ -798,12 +786,12 @@ const ProfileEmail = (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;
-                }
-            `)));
+        .headerbar-profile-user-email {
+          margin-bottom: 6px;
+          font-size: 14px;
+          line-height: 16px;
+        }
+      `)));
 };
 ProfileEmail.propTypes = {
     children: PropTypes.string,
@@ -814,14 +802,14 @@ const ProfileEdit = (params) => {
     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;
-                }
-            `)));
+        .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,
@@ -833,15 +821,15 @@ const ProfileDetails = (params) => {
         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;
-                }
-            `)));
+        .headerbar-profile-details {
+          display: flex;
+          flex-direction: column;
+          margin-left: 20px;
+          color: #000;
+          font-size: 14px;
+          font-weight: 400;
+        }
+      `)));
 };
 ProfileDetails.propTypes = {
     email: PropTypes.string,
@@ -853,13 +841,13 @@ const ProfileHeader = (params) => {
         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;
-            }
-        `)));
+        .headerbar-profile-header {
+          display: flex;
+          flex-direction: row;
+          margin-left: 24px;
+          padding-top: 20px;
+        }
+      `)));
 };
 ProfileHeader.propTypes = {
     avatarId: PropTypes.string,
@@ -872,7 +860,7 @@ const headerBarContext = createContext({
     onApplyAvailableUpdate: () => { },
 });
 const HeaderBarContextProvider = (params) => {
-    const { updateAvailable, onApplyAvailableUpdate, children, } = params;
+    const { updateAvailable, onApplyAvailableUpdate, children } = params;
     return (React__default.createElement(headerBarContext.Provider, { value: { updateAvailable, onApplyAvailableUpdate } }, children));
 };
 HeaderBarContextProvider.propTypes = {
@@ -900,29 +888,29 @@ function UpdateNotification(params) {
             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$1.blue600};
-                }
-                .spacer {
-                    display: inline-block;
-                    width: 8px;
-                }
-                .message {
-                    display: inline-block;
-                }
-            `)));
+        .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$1.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 = {
@@ -960,29 +948,29 @@ const ProfileContents = (params) => {
                 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;
-                }
-            `)));
+        .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,
@@ -997,13 +985,13 @@ const ProfileMenu = (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;
-                }
-            `)));
+        .headerbar-profile-menu {
+          z-index: 10000;
+          position: absolute;
+          right: 4px;
+          width: 320px;
+        }
+      `)));
 };
 ProfileMenu.propTypes = {
     hideProfileMenu: PropTypes.func.isRequired,
@@ -1052,31 +1040,31 @@ const Profile = (params) => {
                 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;
-                }
-            `)));
+        .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,
@@ -1163,8 +1151,7 @@ class ReactWrapperComponent {
         this.render();
     }
     ngOnChanges() {
-        if (this.elementRef)
-            this.render();
+        // if (this.elementRef) this.render();
     }
     ngOnDestroy() {
         this.reactDomRoot?.unmount();
@@ -1172,27 +1159,28 @@ class ReactWrapperComponent {
     render() {
         if (!this.component) {
             console.warn('React component must be supplied');
-            return;
-        }
-        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 }); }
+        }
+        else {
+            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: "18.1.1", ngImport: i0, type: ReactWrapperComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.1", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: ReactWrapperComponent, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ng-dhis2-ui-wrapper',
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { props: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { props: [{
                 type: Input
             }], component: [{
                 type: Input
@@ -1202,11 +1190,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 class ReactWrapperModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ReactWrapperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: ReactWrapperModule, declarations: [ReactWrapperComponent], imports: [CommonModule], exports: [ReactWrapperComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ReactWrapperModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: ReactWrapperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.1", ngImport: i0, type: ReactWrapperModule, declarations: [ReactWrapperComponent], imports: [CommonModule], exports: [ReactWrapperComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: ReactWrapperModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ReactWrapperModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: ReactWrapperModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],
@@ -1235,23 +1223,23 @@ class HeaderBarComponent extends ReactWrapperComponent {
             : () => 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></ng-container>`, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", 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: "18.1.1", type: HeaderBarComponent, selector: "ng-dhis2-ui-header-bar", usesInheritance: true, ngImport: i0, template: `<ng-container></ng-container>`, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HeaderBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: HeaderBarComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ng-dhis2-ui-header-bar',
                     template: `<ng-container></ng-container>`,
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.NgxDhis2HttpClientService }]; } });
+        }], ctorParameters: () => [{ 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] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: HeaderBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.1", ngImport: i0, type: HeaderBarModule, declarations: [HeaderBarComponent], imports: [CommonModule, SharedDhis2UiModule], exports: [HeaderBarComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: HeaderBarModule, imports: [CommonModule, SharedDhis2UiModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HeaderBarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: HeaderBarModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, SharedDhis2UiModule],
@@ -1268,12 +1256,15 @@ class ButtonComponent extends ReactWrapperComponent {
     constructor() {
         super(...arguments);
         this.buttonClick = new EventEmitter();
-        this.props = {
-            onClick: (e) => {
+    }
+    async ngAfterViewInit() {
+        if (!this.elementRef)
+            throw new Error('No element ref');
+        this.reactDomRoot = ReactDOM.createRoot(this.elementRef.nativeElement);
+        this.component = () => (React__default.createElement(Button$1, { onClick: (e) => {
                 this.onButtonClick(e);
-            },
-        };
-        this.component = Button$1;
+            }, primary: this.primary, secondary: this.secondary, destructive: this.destructive, disabled: this.disabled, small: this.small, large: this.large, ...this.props }, this.label));
+        this.render();
     }
     ngOnInit() {
         this.props = {
@@ -1288,10 +1279,10 @@ class ButtonComponent extends ReactWrapperComponent {
     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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: ButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.1", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ng-dhis2-ui-button',
@@ -1316,11 +1307,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 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] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: ButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.1", ngImport: i0, type: ButtonModule, declarations: [ButtonComponent], imports: [CommonModule, SharedDhis2UiModule], exports: [ButtonComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: ButtonModule, imports: [CommonModule, SharedDhis2UiModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: ButtonModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ButtonComponent],
@@ -1347,6 +1338,8 @@ const AssignedCategoriesIcon = () => {
 const DIMENSION_ID_DATA = 'dx';
 const DIMENSION_ID_PERIOD = 'pe';
 const DIMENSION_ID_ORGUNIT = 'ou';
+const DIMENSION_ID_ORGUNIT_LEVEL = 'ouLevel';
+const DIMENSION_ID_ORGUNIT_GROUP = 'ouGroup';
 const DIMENSION_ID_ASSIGNED_CATEGORIES = 'co';
 const DIMENSION_PROP_NO_ITEMS = 'noItems';
 const getFixedDimensions = () => ({
@@ -1525,7 +1518,8 @@ const dimensionIsValid = (dimension, { requireItems } = {}) => {
     if (!requiredProps.every((prop) => prop.isValid(dimension[prop.name]))) {
         return false;
     }
-    if (requireItems === true && dimensionIsEmpty(dimension)) {
+    if (requireItems === true &&
+        dimensionIsEmpty(dimension)) {
         return false;
     }
     return true;
@@ -1746,23 +1740,23 @@ const getRelativePeriodIds = () => Object.values(getOptions$1())
     .flat();
 
 const PERIOD_TYPE_REGEX = {
-    [DAILY]: /^([0-9]{4})([0-9]{2})([0-9]{2})$/,
-    [WEEKLY]: /^([0-9]{4})()W([0-9]{1,2})$/,
-    [BIWEEKLY]: /^([0-9]{4})BiW([0-9]{1,2})$/,
-    [WEEKLYWED]: /^([0-9]{4})(Wed)W([0-9]{1,2})$/,
-    [WEEKLYTHU]: /^([0-9]{4})(Thu)W([0-9]{1,2})$/,
-    [WEEKLYSAT]: /^([0-9]{4})(Sat)W([0-9]{1,2})$/,
-    [WEEKLYSUN]: /^([0-9]{4})(Sun)W([0-9]{1,2})$/,
-    [MONTHLY]: /^([0-9]{4})([0-9]{2})$/,
-    [BIMONTHLY]: /^([0-9]{4})([0-9]{2})B$/,
-    [QUARTERLY]: /^([0-9]{4})Q([1234])$/,
-    [SIXMONTHLY]: /^([0-9]{4})S([12])$/,
-    [SIXMONTHLYAPR]: /^([0-9]{4})AprilS([12])$/,
+    [DAILY]: /^([0-9]{4})([0-9]{2})([0-9]{2})$/, // YYYYMMDD
+    [WEEKLY]: /^([0-9]{4})()W([0-9]{1,2})$/, // YYYY"W"[1-53]
+    [BIWEEKLY]: /^([0-9]{4})BiW([0-9]{1,2})$/, // YYYY"BiW"[1-27]
+    [WEEKLYWED]: /^([0-9]{4})(Wed)W([0-9]{1,2})$/, // YYYY"WedW"[1-53]
+    [WEEKLYTHU]: /^([0-9]{4})(Thu)W([0-9]{1,2})$/, // YYYY"ThuW"[1-53]
+    [WEEKLYSAT]: /^([0-9]{4})(Sat)W([0-9]{1,2})$/, // YYYY"SatW"[1-53]
+    [WEEKLYSUN]: /^([0-9]{4})(Sun)W([0-9]{1,2})$/, // YYYY"SunW"[1-53]
+    [MONTHLY]: /^([0-9]{4})([0-9]{2})$/, // YYYYMM
+    [BIMONTHLY]: /^([0-9]{4})([0-9]{2})B$/, // YYYY0[1-6]"B"
+    [QUARTERLY]: /^([0-9]{4})Q([1234])$/, // YYYY"Q"[1-4]
+    [SIXMONTHLY]: /^([0-9]{4})S([12])$/, // YYYY"S"[1/2]
+    [SIXMONTHLYAPR]: /^([0-9]{4})AprilS([12])$/, // YYYY"AprilS"[1/2]
     // [SIXMONTHLYNOV]: /^([0-9]{4})NovS([12])$/, // YYYY"NovS"[1/2] Not supported?
-    [YEARLY]: /^([0-9]{4})$/,
-    [FYNOV]: /^([0-9]{4})Nov$/,
-    [FYOCT]: /^([0-9]{4})Oct$/,
-    [FYJUL]: /^([0-9]{4})July$/,
+    [YEARLY]: /^([0-9]{4})$/, // YYYY
+    [FYNOV]: /^([0-9]{4})Nov$/, // YYYY"Nov"
+    [FYOCT]: /^([0-9]{4})Oct$/, // YYYY"Oct"
+    [FYJUL]: /^([0-9]{4})July$/, // YYYY"July"
     [FYAPR]: /^([0-9]{4})April$/, // YYYY"April"
 };
 const getPeriods = ({ periodType, config, fnFilter, periodSettings = {}, }) => {
@@ -2249,11 +2243,82 @@ PeriodDimension.defaultProps = {
     selectedPeriods: [],
 };
 
-class PeriodSelectorComponent extends ReactWrapperComponent {
+class PeriodSelectorModalComponent extends ReactWrapperComponent {
     constructor(elementRef, httpClient) {
         super(elementRef);
         this.httpClient = httpClient;
         this.selectedPeriods = [];
+        this.cancel = new EventEmitter();
+        this.confirm = new EventEmitter();
+        this.getExcludedPeriodTypes = (systemSettings = {}) => {
+            const types = [];
+            if (systemSettings['hideDailyPeriods']) {
+                types.push(DAILY);
+            }
+            if (systemSettings['hideWeeklyPeriods']) {
+                types.push(WEEKLY, WEEKLYWED, WEEKLYTHU, WEEKLYSAT, WEEKLYSUN);
+            }
+            if (systemSettings['hideBiWeeklyPeriods']) {
+                types.push(BIWEEKLY);
+            }
+            if (systemSettings['hideMonthlyPeriods']) {
+                types.push(MONTHLY);
+            }
+            if (systemSettings['hideBiMonthlyPeriods']) {
+                types.push(BIMONTHLY);
+            }
+            return types;
+        };
+    }
+    async ngAfterViewInit() {
+        if (!this.elementRef)
+            throw new Error('No element ref');
+        this.reactDomRoot = ReactDOM.createRoot(this.elementRef.nativeElement);
+        const systemInfo = await firstValueFrom(this.httpClient.systemInfo());
+        const excludedPeriodTypes = this.getExcludedPeriodTypes(systemInfo);
+        this.component = () => {
+            const [selected, setSelected] = useState(this.selectedPeriods);
+            return (React__default.createElement(DataProvider, null, React__default.createElement(Modal$1, { position: "middle", large: true },
+                React__default.createElement(ModalTitle$1, null, "Period"),
+                React__default.createElement(ModalContent$1, null,
+                    React__default.createElement(PeriodDimension, { selectedPeriods: selected, onSelect: (selectionEvent) => setSelected(selectionEvent.items), excludedPeriodTypes: excludedPeriodTypes, systemInfo: systemInfo })),
+                React__default.createElement(ModalActions$1, null,
+                    React__default.createElement(ButtonStrip$1, { end: true },
+                        React__default.createElement(Button$1, { onClick: () => {
+                                this.onCancel();
+                            } }, "Cancel"),
+                        React__default.createElement(Button$1, { primary: true, disabled: selected.length === 0, onClick: () => {
+                                this.onConfirm(selected);
+                            } }, "Confirm"))))));
+        };
+        this.render();
+    }
+    onCancel() {
+        this.cancel.emit();
+    }
+    onConfirm(selectedItems) {
+        this.confirm.emit(selectedItems);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: PeriodSelectorModalComponent, deps: [{ token: i0.ElementRef }, { token: i1.NgxDhis2HttpClientService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.1", type: PeriodSelectorModalComponent, selector: "ng-dhis2-ui-period-selector-modal", inputs: { selectedPeriods: "selectedPeriods" }, outputs: { cancel: "cancel", confirm: "confirm" }, usesInheritance: true, ngImport: i0, template: `<ng-container></ng-container>`, isInline: true, styles: ["::ng-deep .layer{z-index:2!important}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: PeriodSelectorModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ng-dhis2-ui-period-selector-modal', template: `<ng-container></ng-container>`, styles: ["::ng-deep .layer{z-index:2!important}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.NgxDhis2HttpClientService }], propDecorators: { selectedPeriods: [{
+                type: Input
+            }], cancel: [{
+                type: Output
+            }], confirm: [{
+                type: Output
+            }] } });
+
+class PeriodSelectorComponent extends ReactWrapperComponent {
+    constructor(elementRef, httpClient, ngZone) {
+        super(elementRef);
+        this.httpClient = httpClient;
+        this.ngZone = ngZone;
+        this.selectedPeriods = [];
         this.selectPeriods = new EventEmitter();
         this.props = {
             onSelect: (e) => {
@@ -2286,35 +2351,37 @@ class PeriodSelectorComponent extends ReactWrapperComponent {
         this.reactDomRoot = ReactDOM.createRoot(this.elementRef.nativeElement);
         const systemInfo = await firstValueFrom(this.httpClient.systemInfo());
         const excludedPeriodTypes = this.getExcludedPeriodTypes(systemInfo);
-        this.component = () => (React__default.createElement(DataProvider, null, React__default.createElement(PeriodDimension, { selectedPeriods: this.selectedPeriods, onSelect: (selectionEvent) => this.onSelectItems(selectionEvent), excludedPeriodTypes: excludedPeriodTypes, systemInfo: systemInfo })));
+        this.component = () => (React__default.createElement(DataProvider, null, React__default.createElement(PeriodDimension, { selectedPeriods: this.selectedPeriods, onSelect: (selectionEvent) => this.ngZone.run(() => {
+                this.onSelectItems(selectionEvent);
+            }), excludedPeriodTypes: excludedPeriodTypes, systemInfo: systemInfo })));
         this.render();
     }
     onSelectItems(selectionEvent) {
         this.selectPeriods.emit(selectionEvent.items);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PeriodSelectorComponent, 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: PeriodSelectorComponent, selector: "ng-dhis2-ui-period-selector", inputs: { selectedPeriods: "selectedPeriods" }, outputs: { selectPeriods: "selectPeriods" }, usesInheritance: true, ngImport: i0, template: `<ng-container></ng-container>`, isInline: true, styles: ["::ng-deep .content-container{z-index:0!important}\n"] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: PeriodSelectorComponent, deps: [{ token: i0.ElementRef }, { token: i1.NgxDhis2HttpClientService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.1", type: PeriodSelectorComponent, selector: "ng-dhis2-ui-period-selector", inputs: { selectedPeriods: "selectedPeriods" }, outputs: { selectPeriods: "selectPeriods" }, usesInheritance: true, ngImport: i0, template: `<ng-container></ng-container>`, isInline: true, styles: ["::ng-deep .content-container{z-index:0!important}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PeriodSelectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: PeriodSelectorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ng-dhis2-ui-period-selector', template: `<ng-container></ng-container>`, styles: ["::ng-deep .content-container{z-index:0!important}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.NgxDhis2HttpClientService }]; }, propDecorators: { selectedPeriods: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.NgxDhis2HttpClientService }, { type: i0.NgZone }], propDecorators: { selectedPeriods: [{
                 type: Input
             }], selectPeriods: [{
                 type: Output
             }] } });
 
 class PeriodSelectorModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PeriodSelectorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: PeriodSelectorModule, declarations: [PeriodSelectorComponent], imports: [CommonModule, SharedDhis2UiModule], exports: [PeriodSelectorComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PeriodSelectorModule, imports: [CommonModule, SharedDhis2UiModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: PeriodSelectorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.1", ngImport: i0, type: PeriodSelectorModule, declarations: [PeriodSelectorComponent, PeriodSelectorModalComponent], imports: [CommonModule, SharedDhis2UiModule], exports: [PeriodSelectorComponent, PeriodSelectorModalComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: PeriodSelectorModule, imports: [CommonModule, SharedDhis2UiModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PeriodSelectorModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: PeriodSelectorModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, SharedDhis2UiModule],
-                    declarations: [PeriodSelectorComponent],
-                    exports: [PeriodSelectorComponent],
+                    declarations: [PeriodSelectorComponent, PeriodSelectorModalComponent],
+                    exports: [PeriodSelectorComponent, PeriodSelectorModalComponent],
                 }]
         }] });
 
@@ -2328,7 +2395,7 @@ const USER_ORG_UNIT = 'USER_ORGUNIT';
 const USER_ORG_UNIT_CHILDREN = 'USER_ORGUNIT_CHILDREN';
 const USER_ORG_UNIT_GRANDCHILDREN = 'USER_ORGUNIT_GRANDCHILDREN';
 const hasGroupPrefix = (id) => id.substr(0, GROUP_ID_PREFIX.length) === GROUP_ID_PREFIX;
-const hasLevelPrefix = (id) => id.substr(0, LEVEL_ID_PREFIX.length) === LEVEL_ID_PREFIX;
+const hasLevelPrefix = (id) => id.includes(LEVEL_ID_PREFIX);
 const stripLevelPrefix = (id) => hasLevelPrefix(id) ? id.substr(LEVEL_ID_PREFIX.length + 1) : id;
 const stripGroupPrefix = (id) => hasGroupPrefix(id) ? id.substr(GROUP_ID_PREFIX.length + 1) : id;
 const removePrefix = (id) => stripGroupPrefix(stripLevelPrefix(id));
@@ -2471,11 +2538,11 @@ const OrgUnitDimension = ({ roots, selected, onSelect, hideGroupSelect, hideLeve
         if (checked && DYNAMIC_ORG_UNITS.includes(id)) {
             result = [
                 ...result.filter((item) => DYNAMIC_ORG_UNITS.includes(item.id)),
-                { id, displayName },
+                { id, displayName, type: 'USER_ORGUNIT' },
             ];
         }
         else if (checked) {
-            result.push({ id, path, name: displayName });
+            result.push({ id, path, name: displayName, type: 'ORGUNIT' });
         }
         else {
             result = [...result.filter((item) => item.id !== id)];
@@ -2511,14 +2578,16 @@ const OrgUnitDimension = ({ roots, selected, onSelect, hideGroupSelect, hideLeve
             id: ouIdHelper.addLevelPrefix(id),
             name: ouLevels?.find((level) => level.id === id)
                 ?.displayName,
+            type: 'ORGUNIT_LEVEL',
         }));
-        setSelectedItems([
+        const updatedSelectedItems = [
             ...selectedItems.filter((ou) => !ouIdHelper.hasLevelPrefix(ou.id)),
             ...items,
-        ]);
+        ];
+        setSelectedItems(updatedSelectedItems);
         onSelect({
             dimensionId: DIMENSION_ID_ORGUNIT,
-            items: selectedItems,
+            items: updatedSelectedItems,
         });
     };
     const onGroupChange = (ids) => {
@@ -2526,14 +2595,16 @@ const OrgUnitDimension = ({ roots, selected, onSelect, hideGroupSelect, hideLeve
             id: ouIdHelper.addGroupPrefix(id),
             name: (ouGroups?.find((group) => group.id === id) || {})
                 .displayName,
+            type: 'ORGUNIT_GROUP',
         }));
-        setSelectedItems([
+        const updatedSelectedItems = [
             ...selectedItems.filter((ou) => !ouIdHelper.hasGroupPrefix(ou.id)),
             ...items,
-        ]);
+        ];
+        setSelectedItems(updatedSelectedItems);
         onSelect({
             dimensionId: DIMENSION_ID_ORGUNIT,
-            items: selectedItems,
+            items: updatedSelectedItems,
         });
     };
     const getSummary = () => {
@@ -2678,9 +2749,10 @@ class OrganisationUnitSelectionConfig {
 // license that can be found in the LICENSE file.
 
 class OrganisationUnitSelectorComponent extends ReactWrapperComponent {
-    constructor(elementRef, httpClient) {
+    constructor(elementRef, httpClient, ngZone) {
         super(elementRef);
         this.httpClient = httpClient;
+        this.ngZone = ngZone;
         this.selectedOrgUnits = [];
         this.orgUnitSelectionConfig = new OrganisationUnitSelectionConfig();
         this.selectOrgUnits = new EventEmitter();
@@ -2696,7 +2768,9 @@ class OrganisationUnitSelectorComponent extends ReactWrapperComponent {
         this.reactDomRoot = ReactDOM.createRoot(this.elementRef.nativeElement);
         const rootOrgUnits = await this.getRootOrgUnits();
         const config = await this.getAppConfig();
-        this.component = () => (React__default.createElement(Provider, { config: config }, React__default.createElement(OrgUnitDimension, { selected: this.selectedOrgUnits, hideGroupSelect: this.orgUnitSelectionConfig.hideGroupSelect, hideLevelSelect: this.orgUnitSelectionConfig.hideLevelSelect, hideUserOrgUnits: this.orgUnitSelectionConfig.hideUserOrgUnits, onSelect: (selectionEvent) => this.onSelectItems(selectionEvent), orgUnitGroupPromise: this.getOrgUnitGroups(), orgUnitLevelPromise: this.getOrgUnitLevels(), roots: rootOrgUnits })));
+        this.component = () => (React__default.createElement(Provider, { config: config }, React__default.createElement(OrgUnitDimension, { selected: this.selectedOrgUnits, hideGroupSelect: this.orgUnitSelectionConfig.hideGroupSelect, hideLevelSelect: this.orgUnitSelectionConfig.hideLevelSelect, hideUserOrgUnits: this.orgUnitSelectionConfig.hideUserOrgUnits, onSelect: (selectionEvent) => this.ngZone.run(() => {
+                this.onSelectItems(selectionEvent);
+            }), orgUnitGroupPromise: this.getOrgUnitGroups(), orgUnitLevelPromise: this.getOrgUnitLevels(), roots: rootOrgUnits })));
         this.render();
     }
     async getAppConfig() {
@@ -2737,34 +2811,144 @@ class OrganisationUnitSelectorComponent extends ReactWrapperComponent {
     onSelectItems(selectionEvent) {
         this.selectOrgUnits.emit(selectionEvent.items);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OrganisationUnitSelectorComponent, 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: OrganisationUnitSelectorComponent, selector: "ng-dhis2-ui-org-unit-selector", inputs: { selectedOrgUnits: "selectedOrgUnits", orgUnitSelectionConfig: "orgUnitSelectionConfig" }, outputs: { selectOrgUnits: "selectOrgUnits" }, usesInheritance: true, ngImport: i0, template: '<ng-container><ng-container>', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: OrganisationUnitSelectorComponent, deps: [{ token: i0.ElementRef }, { token: i1.NgxDhis2HttpClientService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.1", type: OrganisationUnitSelectorComponent, selector: "ng-dhis2-ui-org-unit-selector", inputs: { selectedOrgUnits: "selectedOrgUnits", orgUnitSelectionConfig: "orgUnitSelectionConfig" }, outputs: { selectOrgUnits: "selectOrgUnits" }, usesInheritance: true, ngImport: i0, template: '<ng-container><ng-container>', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OrganisationUnitSelectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: OrganisationUnitSelectorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ng-dhis2-ui-org-unit-selector',
                     template: '<ng-container><ng-container>',
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.NgxDhis2HttpClientService }]; }, propDecorators: { selectedOrgUnits: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.NgxDhis2HttpClientService }, { type: i0.NgZone }], propDecorators: { selectedOrgUnits: [{
+                type: Input
+            }], orgUnitSelectionConfig: [{
+                type: Input
+            }], selectOrgUnits: [{
+                type: Output
+            }] } });
+
+class OrganisationUnitSelectorModalComponent extends ReactWrapperComponent {
+    constructor(elementRef, httpClient) {
+        super(elementRef);
+        this.httpClient = httpClient;
+        this.selectedOrgUnits = [];
+        this.orgUnitSelectionConfig = new OrganisationUnitSelectionConfig();
+        this.selectOrgUnits = new EventEmitter();
+        this.cancel = new EventEmitter();
+        this.confirm = new EventEmitter();
+        this.props = {
+            onSelect: (e) => {
+                this.onSelectItems(e);
+            },
+        };
+    }
+    async ngAfterViewInit() {
+        if (!this.elementRef)
+            throw new Error('No element ref');
+        this.reactDomRoot = ReactDOM.createRoot(this.elementRef.nativeElement);
+        const rootOrgUnits = await this.getRootOrgUnits();
+        const config = await this.getAppConfig();
+        this.component = () => {
+            const [selected, setSelected] = useState(this.selectedOrgUnits);
+            return (React__default.createElement(Provider, { config: config }, React__default.createElement(Modal$1, { position: "middle", large: true },
+                React__default.createElement(ModalTitle$1, null, "Organisation unit"),
+                React__default.createElement(ModalContent$1, null,
+                    React__default.createElement(OrgUnitDimension, { selected: selected, hideGroupSelect: this.orgUnitSelectionConfig.hideGroupSelect, hideLevelSelect: this.orgUnitSelectionConfig.hideLevelSelect, hideUserOrgUnits: this.orgUnitSelectionConfig.hideUserOrgUnits, onSelect: (selectionEvent) => {
+                            setSelected(selectionEvent.items);
+                        }, orgUnitGroupPromise: this.getOrgUnitGroups(), orgUnitLevelPromise: this.getOrgUnitLevels(), roots: rootOrgUnits })),
+                React__default.createElement(ModalActions$1, null,
+                    React__default.createElement(ButtonStrip$1, { end: true },
+                        React__default.createElement(Button$1, { onClick: () => {
+                                this.onCancel();
+                            } }, "Cancel"),
+                        React__default.createElement(Button$1, { primary: true, disabled: selected.length === 0, onClick: () => {
+                                this.onConfirm(selected);
+                            } }, "Confirm"))))));
+        };
+        this.render();
+    }
+    onCancel() {
+        this.cancel.emit();
+    }
+    onConfirm(selectedItems) {
+        this.confirm.emit(selectedItems);
+    }
+    async getAppConfig() {
+        const systemInfo = (await firstValueFrom(this.httpClient.systemInfo()));
+        return {
+            baseUrl: (document?.location?.host?.includes('localhost')
+                ? `${document.location.protocol}//${document.location.host}`
+                : systemInfo['contextPath']),
+            apiVersion: Number(((systemInfo['version'] || '')?.split('.') || [])[1]),
+        };
+    }
+    getOrgUnitAttributeByUsage(usageType) {
+        switch (usageType) {
+            case 'DATA_ENTRY':
+                return 'organisationUnits';
+            case 'DATA_VIEW':
+                return 'dataViewOrganisationUnits';
+            default:
+                return 'organisationUnits';
+        }
+    }
+    getRootOrgUnits() {
+        const orgUnitAttribute = this.getOrgUnitAttributeByUsage(this.orgUnitSelectionConfig.usageType);
+        return firstValueFrom(this.httpClient
+            .me()
+            .pipe(map((user) => (user ? user[orgUnitAttribute] : []).map((orgUnit) => orgUnit.id))));
+    }
+    getOrgUnitGroups() {
+        return firstValueFrom(this.httpClient
+            .get('organisationUnitGroups.json?fields=id,displayName,name&paging=false')
+            .pipe(map((res) => res?.['organisationUnitGroups'])));
+    }
+    getOrgUnitLevels() {
+        return firstValueFrom(this.httpClient
+            .get('organisationUnitLevels.json?fields=id,level,displayName,name&paging=false')
+            .pipe(map((res) => res?.['organisationUnitLevels'])));
+    }
+    onSelectItems(selectionEvent) {
+        this.selectOrgUnits.emit(selectionEvent.items);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: OrganisationUnitSelectorModalComponent, deps: [{ token: i0.ElementRef }, { token: i1.NgxDhis2HttpClientService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.1", type: OrganisationUnitSelectorModalComponent, selector: "ng-dhis2-ui-org-unit-selector-modal", inputs: { selectedOrgUnits: "selectedOrgUnits", orgUnitSelectionConfig: "orgUnitSelectionConfig" }, outputs: { selectOrgUnits: "selectOrgUnits", cancel: "cancel", confirm: "confirm" }, usesInheritance: true, ngImport: i0, template: '<ng-container><ng-container>', isInline: true, styles: ["::ng-deep .layer{z-index:2!important}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: OrganisationUnitSelectorModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ng-dhis2-ui-org-unit-selector-modal', template: '<ng-container><ng-container>', styles: ["::ng-deep .layer{z-index:2!important}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.NgxDhis2HttpClientService }], propDecorators: { selectedOrgUnits: [{
                 type: Input
             }], orgUnitSelectionConfig: [{
                 type: Input
             }], selectOrgUnits: [{
                 type: Output
+            }], cancel: [{
+                type: Output
+            }], confirm: [{
+                type: Output
             }] } });
 
 class OrganisationUnitSelectorModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OrganisationUnitSelectorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: OrganisationUnitSelectorModule, declarations: [OrganisationUnitSelectorComponent], imports: [CommonModule, SharedDhis2UiModule], exports: [OrganisationUnitSelectorComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OrganisationUnitSelectorModule, imports: [CommonModule, SharedDhis2UiModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: OrganisationUnitSelectorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.1", ngImport: i0, type: OrganisationUnitSelectorModule, declarations: [OrganisationUnitSelectorComponent,
+            OrganisationUnitSelectorModalComponent], imports: [CommonModule, SharedDhis2UiModule], exports: [OrganisationUnitSelectorComponent,
+            OrganisationUnitSelectorModalComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: OrganisationUnitSelectorModule, imports: [CommonModule, SharedDhis2UiModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OrganisationUnitSelectorModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: OrganisationUnitSelectorModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, SharedDhis2UiModule],
-                    declarations: [OrganisationUnitSelectorComponent],
-                    exports: [OrganisationUnitSelectorComponent],
+                    declarations: [
+                        OrganisationUnitSelectorComponent,
+                        OrganisationUnitSelectorModalComponent,
+                    ],
+                    exports: [
+                        OrganisationUnitSelectorComponent,
+                        OrganisationUnitSelectorModalComponent,
+                    ],
                 }]
         }] });
 
@@ -2776,5 +2960,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ButtonComponent, ButtonModule, HeaderBarComponent, HeaderBarModule, NgDhis2UiModule, OrganisationUnitSelectorComponent, OrganisationUnitSelectorModule, PeriodSelectorComponent, PeriodSelectorModule, ReactWrapperComponent, ReactWrapperModule };
+export { ButtonComponent, ButtonModule, HeaderBarComponent, HeaderBarModule, OrganisationUnitSelectorComponent, OrganisationUnitSelectorModalComponent, OrganisationUnitSelectorModule, PeriodSelectorComponent, PeriodSelectorModalComponent, PeriodSelectorModule, ReactWrapperComponent, ReactWrapperModule };
 //# sourceMappingURL=iapps-ng-dhis2-ui.mjs.map