@iapps/ng-dhis2-ui 1.0.0 → 1.0.2

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

@@ -1,17 +1,18 @@
 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 { 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 cx from 'classnames';
+import PropTypes from 'prop-types';
+import { useDataQuery, useConfig, useAlert, clearSensitiveCaches, DataProvider, useDataEngine } from '@dhis2/app-runtime';
 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 { colors as colors$1, theme as theme$1, spacers as spacers$1 } from '@dhis2/ui-constants';
 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';
@@ -24,8 +25,8 @@ 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';
+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 }); }
@@ -87,6 +88,132 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['ngDhis2UiContent']
             }] } });
 
+const TransferOption = ({ disabled, label, highlighted, selected, onClick, onDoubleClick, value, icon, active, tooltipText, dataTest, onEditClick, }) => {
+    const renderContent = () => (React__default.createElement("div", { className: cx('chip', {
+            highlighted,
+            disabled,
+            selected,
+            inactive: active !== undefined && !active,
+        }), "data-test": `${dataTest}-content`, onClick: (event) => {
+            if (disabled) {
+                return;
+            }
+            onClick({ label, value }, event);
+        }, onDoubleClick: (event) => {
+            if (disabled) {
+                return;
+            }
+            onDoubleClick({ label, value }, event);
+        } },
+        React__default.createElement("span", { className: "icon" }, icon),
+        React__default.createElement("span", { className: "label" }, label),
+        onEditClick && (React__default.createElement("span", { className: "edit", onClick: (e) => {
+                e.stopPropagation();
+                onEditClick();
+            }, "data-test": `${dataTest}-edit-button` },
+            React__default.createElement(IconEdit16, null))),
+        React__default.createElement("style", { jsx: true }, `
+        .wrapper:last-child {
+          margin-bottom: ${spacers.dp4};
+        }
+        .chip {
+          display: inline-flex;
+          background: ${colors.grey200};
+          font-size: 14px;
+          line-height: 16px;
+          padding: 2px ${spacers.dp8} 2px ${spacers.dp4};
+          margin: ${spacers.dp4} ${spacers.dp8} 0 ${spacers.dp8};
+          border-radius: 3px;
+          user-select: none;
+        }
+
+        .chip:hover {
+          background: ${colors.grey300};
+        }
+
+        .selected {
+          background: ${theme.secondary100};
+          color: ${theme.secondary900};
+        }
+
+        .selected :global(.icon path) {
+          fill: ${theme.secondary700};
+        }
+
+        .selected:hover {
+          background: #c9edeb;
+        }
+
+        .highlighted,
+        .highlighted:hover {
+          background: ${theme.secondary800};
+          color: ${colors.white};
+        }
+
+        .highlighted :global(.icon path) {
+          fill: ${colors.white};
+        }
+
+        .disabled {
+          opacity: 0.3;
+          cursor: not-allowed;
+        }
+
+        .inactive {
+          opacity: 0.3;
+        }
+
+        .icon,
+        .label {
+          line-height: 18px;
+        }
+
+        .icon {
+          margin-right: ${spacers.dp4};
+          display: inline-flex;
+          vertical-align: text-bottom;
+          padding-top: 1px;
+        }
+
+        .label {
+          font-size: 14px;
+        }
+
+        .edit {
+          height: 16px;
+          margin-top: 1px;
+          margin-left: ${spacers.dp8};
+          cursor: pointer;
+        }
+
+        .edit:hover {
+          background-color: rgba(0, 0, 0, 0.12);
+          outline: 1px solid rgba(0, 0, 0, 0.12);
+          border-radius: 3px;
+        }
+
+        .highlighted .edit:hover {
+          background-color: rgba(255, 255, 255, 0.12);
+          outline: 1px solid rgba(255, 255, 255, 0.12);
+        }
+      `)));
+    return (React__default.createElement("div", { "data-value": value, "data-test": dataTest, className: "wrapper" }, tooltipText ? (React__default.createElement(Tooltip, { key: `${value}`, content: tooltipText, placement: 'top', openDelay: 750, closeDelay: 150 }, renderContent())) : (renderContent())));
+};
+TransferOption.propTypes = {
+    label: PropTypes.string.isRequired,
+    value: PropTypes.string.isRequired,
+    active: PropTypes.bool,
+    dataTest: PropTypes.string,
+    disabled: PropTypes.bool,
+    highlighted: PropTypes.bool,
+    icon: PropTypes.node,
+    selected: PropTypes.bool,
+    tooltipText: PropTypes.string,
+    onClick: PropTypes.func,
+    onDoubleClick: PropTypes.func,
+    onEditClick: PropTypes.func,
+};
+
 // 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.
@@ -202,7 +329,7 @@ function Search({ value, onChange, baseUrl }) {
             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(IconSettings24, { color: colors$1.grey700 }))),
         React__default.createElement("style", { jsx: true }, `
         .headerbar-apps-search {
           display: flex;
@@ -260,7 +387,7 @@ function Item({ name, path, img }) {
 
         .headerbar-app-item-logo:hover,
         .headerbar-app-item-logo:focus {
-          background-color: ${theme.primary050};
+          background-color: ${theme$1.primary050};
           cursor: pointer;
         }
 
@@ -365,13 +492,13 @@ const Apps = ({ apps, baseUrl }) => {
     }, [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 })),
+            React__default.createElement(IconApps24, { color: colors$1.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;
+          padding: ${spacers$1.dp4} ${spacers$1.dp12} 0;
           border: 0;
           cursor: pointer;
           height: 100%;
@@ -485,10 +612,10 @@ const Logo = ({ baseUrl }) => {
 
 function icon(kind) {
     if (kind === 'message') {
-        return React__default.createElement(IconMessages24, { color: colors.white });
+        return React__default.createElement(IconMessages24, { color: colors$1.white });
     }
     else {
-        return React__default.createElement(IconMail24, { color: colors.white });
+        return React__default.createElement(IconMail24, { color: colors$1.white });
     }
 }
 const NotificationIcon = (params) => {
@@ -502,7 +629,7 @@ const NotificationIcon = (params) => {
                 position: relative;
                 margin: 0;
                 cursor: pointer;
-                padding: 0 ${spacers.dp12};
+                padding: 0 ${spacers$1.dp12};
                 height: 100%;
                 display: flex;
                 align-items: center;
@@ -530,17 +657,17 @@ const NotificationIcon = (params) => {
                 right: 2px;
                 min-width: 18px;
                 min-height: 18px;
-                border-radius: ${spacers.dp12};
+                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.secondary500};
-                color: ${colors.white};
+                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.dp4};
+                padding: 0 ${spacers$1.dp4};
             }
         `)));
 };
@@ -620,7 +747,7 @@ function DebugInfoTable() {
                     white-space: pre-wrap;
                     font-size: 14px;
                     line-height: 1.2;
-                    color: ${colors.grey700};
+                    color: ${colors$1.grey700};
                     font-famile: Menlo, Courier, monospace !important;
                 }
                 td {
@@ -680,7 +807,7 @@ const DebugInfoMenuItem = (params) => {
                 : i18n.t('App version unknown')),
         React__default.createElement("style", { jsx: true }, `
                 .root {
-                    color: ${colors.grey700};
+                    color: ${colors$1.grey700};
                     font-style: italic;
                     font-size: 14px;
                     line-height: 17px;
@@ -834,7 +961,7 @@ function UpdateNotification(params) {
                     height: 12px;
                     margin: 0 8px;
                     border-radius: 6px;
-                    background-color: ${colors.blue600};
+                    background-color: ${colors$1.blue600};
                 }
                 .spacer {
                     display: inline-block;
@@ -862,10 +989,10 @@ const ProfileContents = (params) => {
             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-user-profile/#/settings'), label: i18n.t('Settings'), value: "settings", icon: React__default.createElement(IconSettings24, { color: colors$1.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$1.grey700 }) }),
+                helpUrl && (React__default.createElement(MenuItem, { href: helpUrl, label: i18n.t('Help'), value: "help", icon: React__default.createElement(IconQuestion24, { color: colors$1.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$1.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
@@ -875,7 +1002,7 @@ const ProfileContents = (params) => {
                         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 }) }),
+                    }, label: i18n.t('Logout'), value: "logout", icon: React__default.createElement(IconLogOut24, { color: colors$1.grey700 }) }),
                 React__default.createElement(MenuDivider, { dense: true }),
                 React__default.createElement(DebugInfoMenuItem, { hideProfileMenu: hideProfileMenu, showDebugInfoModal: showDebugInfoModal }),
                 React__default.createElement(UpdateNotification, { hideProfileMenu: hideProfileMenu }))),
@@ -1056,7 +1183,7 @@ const HeaderBar = ({ appName, data, className }) => {
           align-items: center;
           justify-content: space-between;
           background-color: #2c6693;
-          color: ${colors.white};
+          color: ${colors$1.white};
           height: 48px;
         }
         .right-control-spacer {
@@ -1089,13 +1216,13 @@ class HeaderBarComponent extends ReactWrapperComponent {
         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" }] }); }
+    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 }); }
 }
 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>`,
+                    template: `<ng-container></ng-container>`,
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.NgxDhis2HttpClientService }]; } });
 
@@ -1186,44 +1313,1428 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 // 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',
+const AssignedCategoriesIcon = () => {
+    return (React__default.createElement("svg", { height: "16", viewBox: "0 0 16 16", width: "16" },
+        React__default.createElement("g", { fill: "#212934", fillRule: "evenodd" },
+            React__default.createElement("path", { d: "m2 7h11v1h-11z" }),
+            React__default.createElement("path", { d: "m2 13h11v1h-11z" }),
+            React__default.createElement("path", { d: "m2 2h11v1h-11z" }),
+            React__default.createElement("path", { d: "m7 8h1v5h-1z" }),
+            React__default.createElement("path", { d: "m12 3h1v10h-1z" }),
+            React__default.createElement("path", { d: "m2 3h1v10h-1z" }))));
+};
+
+const DIMENSION_ID_DATA = 'dx';
+const DIMENSION_ID_PERIOD = 'pe';
+const DIMENSION_ID_ORGUNIT = 'ou';
+const DIMENSION_ID_ASSIGNED_CATEGORIES = 'co';
+const DIMENSION_PROP_NO_ITEMS = 'noItems';
+const getFixedDimensions = () => ({
+    [DIMENSION_ID_DATA]: {
+        id: DIMENSION_ID_DATA,
+        name: i18n.t('Data'),
+        iconName: 'DataIcon',
+        icon: IconDimensionData16,
+    },
+    [DIMENSION_ID_PERIOD]: {
+        id: DIMENSION_ID_PERIOD,
+        name: i18n.t('Period'),
+        iconName: 'PeriodIcon',
+        icon: IconClock16,
+    },
+    [DIMENSION_ID_ORGUNIT]: {
+        id: DIMENSION_ID_ORGUNIT,
+        name: i18n.t('Organisation unit'),
+        iconName: 'OrgUnitIcon',
+        icon: IconDimensionOrgUnit16,
+    },
+});
+const getDynamicDimensions = () => ({
+    [DIMENSION_ID_ASSIGNED_CATEGORIES]: {
+        id: DIMENSION_ID_ASSIGNED_CATEGORIES,
+        name: i18n.t('Assigned Categories'),
+        iconName: 'AssignedCategoriesIcon',
+        icon: AssignedCategoriesIcon,
+        [DIMENSION_PROP_NO_ITEMS]: true,
+    },
+});
+const getPredefinedDimensions = () => ({
+    ...getFixedDimensions(),
+    ...getDynamicDimensions(),
+});
+const filterOutPredefinedDimensions = (dimensionIds) => dimensionIds.filter((dimensionId) => !Object.keys(getPredefinedDimensions()).includes(dimensionId));
+const getPredefinedDimensionProp = (dimensionId, propName) => (getPredefinedDimensions()[dimensionId] || {})[propName];
+const getDimensionById = (dimensionId) => getPredefinedDimensions()[dimensionId];
+
+const TRANSFER_OPTIONS_WIDTH = '420px';
+const TRANSFER_SELECTED_WIDTH = '298px';
+const TRANSFER_HEIGHT = '512px';
+
+const formatList = (items) => {
+    // Wrap Intl.ListFormat in try/catch as DHIS2 locales are not always ISO 639 compliant
+    try {
+        const formatter = new Intl.ListFormat(i18n.language, {
+            style: 'long',
+            type: 'conjunction',
+        });
+        return formatter.format(items);
+    }
+    catch (error) {
+        return items.join(', ');
+    }
+};
+
+// Axis
+const AXIS = {
+    defaultValue: [],
+    isValid: (axis) => Array.isArray(axis),
+};
+// Axis ids
+const AXIS_ID_COLUMNS = 'columns';
+const AXIS_ID_ROWS = 'rows';
+const AXIS_ID_FILTERS = 'filters';
+const AXIS_ID_YEAR_OVER_YEAR_SERIES = 'yearOverYearSeries';
+const AXIS_ID_YEAR_OVER_YEAR_CATEGORY = 'yearOverYearCategory';
+//export const AXIS_ID_POINTS_CATEGORY = 'pointsCategory'
+const DEFAULT_AXIS_IDS = [
+    AXIS_ID_COLUMNS,
+    AXIS_ID_ROWS,
+    AXIS_ID_FILTERS,
+];
+const ALL_AXIS_IDS = [
+    AXIS_ID_COLUMNS,
+    AXIS_ID_ROWS,
+    AXIS_ID_FILTERS,
+    AXIS_ID_YEAR_OVER_YEAR_SERIES,
+    AXIS_ID_YEAR_OVER_YEAR_CATEGORY,
+];
+
+// Dimension
+const DIMENSION = {
+    isValid: (dimension) => isObject(dimension),
+};
+// Props
+const DIMENSION_PROP_ID = {
+    name: 'dimension',
+    defaultValue: '',
+    required: true,
+    isValid: (prop) => isString(prop),
+};
+const DIMENSION_PROP_ITEMS = {
+    name: 'items',
+    defaultValue: [],
+    required: false,
+    isValid: (prop) => Array.isArray(prop),
+};
+const DIMENSION_PROP_FILTER = {
+    name: 'filter',
+    defaultValue: [],
+    required: false,
+    isValid: (prop) => isString(prop),
+};
+const DIMENSION_PROP_LEGEND_SET = {
+    name: 'legendSet',
+    defaultValue: [],
+    required: false,
+    isValid: (prop) => isString(prop),
+};
+const DIMENSION_PROP_PROGRAM_STAGE = {
+    name: 'programStage',
+    defaultValue: {},
+    required: false,
+    isValid: (prop) => isObject(prop),
+};
+const DIMENSION_PROP_REPETITION = {
+    name: 'repetition',
+    defaultValue: [],
+    required: false,
+    isValid: (prop) => Array.isArray(prop),
+};
+const DIMENSION_PROPS = [
+    DIMENSION_PROP_ID,
+    DIMENSION_PROP_ITEMS,
+    DIMENSION_PROP_FILTER,
+    DIMENSION_PROP_LEGEND_SET,
+    DIMENSION_PROP_PROGRAM_STAGE,
+    DIMENSION_PROP_REPETITION,
+];
+
+const dimensionIs = (dimension, dimensionId) => dimension[DIMENSION_PROP_ID.name] === dimensionId;
+
+const axisGetDimension = (axis, dimensionId) => AXIS.isValid(axis) &&
+    axis.find((dimension) => dimensionIs(dimension, dimensionId));
+
+const axisHasDimension = (axis, dimensionId) => Boolean(axisGetDimension(axis, dimensionId));
+
+const layoutReplaceDimension = (layout, dimensionId, items) => {
+    const axisId = DEFAULT_AXIS_IDS.find((a) => axisHasDimension(layout[a], dimensionId));
+    if (!axisId) {
+        return Object.assign({}, layout);
+    }
+    const newAxisDimensions = layout[axisId].map((dimension) => {
+        if (dimensionIs(dimension, dimensionId)) {
+            return Object.assign({}, dimension, { items });
+        }
+        return dimension;
+    });
+    return Object.assign({}, layout, { [axisId]: newAxisDimensions });
+};
+
+const layoutGetAllAxes = (layout) => [
+    layout[AXIS_ID_COLUMNS],
+    layout[AXIS_ID_ROWS],
+    layout[AXIS_ID_FILTERS],
+];
+
+const layoutGetAllDimensions = (layout) => layoutGetAllAxes(layout).reduce((allDimensions, axis) => {
+    allDimensions.push(...axis);
+    return allDimensions;
+}, []);
+
+const layoutGetDimension = (layout, dimensionId) => layoutGetAllDimensions(layout).find((dimension) => dimensionIs(dimension, dimensionId));
+
+const dimensionIsEmpty = (dimension) => !(DIMENSION.isValid(dimension) &&
+    DIMENSION_PROP_ITEMS.isValid(dimension[DIMENSION_PROP_ITEMS.name]) &&
+    dimension[DIMENSION_PROP_ITEMS.name].length);
+
+const dimensionIsValid = (dimension, { requireItems } = {}) => {
+    if (!DIMENSION.isValid(dimension)) {
+        return false;
+    }
+    const requiredProps = DIMENSION_PROPS.filter((prop) => prop.required);
+    if (!requiredProps.every((prop) => prop.isValid(dimension[prop.name]))) {
+        return false;
+    }
+    if (requireItems === true && dimensionIsEmpty(dimension)) {
+        return false;
+    }
+    return true;
+};
+
+const dimensionGetItems = (dimension) => dimensionIsValid(dimension, { requireItems: true })
+    ? dimension[DIMENSION_PROP_ITEMS.name]
+    : DIMENSION_PROP_ITEMS.defaultValue;
+
+// 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.
+
+var styles$1 = `
+    .filterContainer {
+        display: flex;
+        margin-bottom: ${spacers.dp12};
+        margin-top: ${spacers.dp8};
+    }
+    .emptyList {
+        text-align: center;
+        font-size: 14px;
+        line-height: 16px;
+        margin: ${spacers.dp24} 0 0;
+        color: ${colors.grey700};
+    }
+    .rightHeader {
+        font-size: 14px;
+        font-weight: 400;
+    }
+    .leftHeader {
+        padding: ${spacers.dp12} ${spacers.dp4};
+    }
+    .info-container {
+        display: flex;
+        margin-bottom: ${spacers.dp8};
+        padding: ${spacers.dp8};
+        background-color: ${colors.grey200};
+        border-radius: 3px;
+    }
+    .info-text {
+        padding-left: ${spacers.dp8};
+        color: ${colors.grey900};
+        font-size: 12px;
+        line-height: 16px;
+    }
+    .calculation-button {
+        margin: ${spacers.dp8} 0;
+    }
+`;
+
+// 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.
+
+// 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.
+
+// 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 DAILY = 'DAILY';
+const WEEKLY = 'WEEKLY';
+const WEEKLYWED = 'WEEKLYWED';
+const WEEKLYTHU = 'WEEKLYTHU';
+const WEEKLYSAT = 'WEEKLYSAT';
+const WEEKLYSUN = 'WEEKLYSUN';
+const WEEKS_THIS_YEAR = 'WEEKS_THIS_YEAR';
+const BIWEEKLY = 'BIWEEKLY';
+const MONTHLY = 'MONTHLY';
+const BIMONTHLY = 'BIMONTHLY';
+const QUARTERLY = 'QUARTERLY';
+const SIXMONTHLY = 'SIXMONTHLY';
+const SIXMONTHLYAPR = 'SIXMONTHLYAPR';
+const YEARLY = 'YEARLY';
+const FINANCIAL = 'FINANCIAL';
+const FYNOV = 'FYNOV';
+const FYOCT = 'FYOCT';
+const FYJUL = 'FYJUL';
+const FYAPR = 'FYAPR';
+
+const getDaysPeriodType = () => [
+    { id: 'TODAY', name: i18n.t('Today') },
+    { id: 'YESTERDAY', name: i18n.t('Yesterday') },
+    { id: 'LAST_3_DAYS', name: i18n.t('Last 3 days') },
+    { id: 'LAST_7_DAYS', name: i18n.t('Last 7 days') },
+    { id: 'LAST_14_DAYS', name: i18n.t('Last 14 days') },
+    { id: 'LAST_30_DAYS', name: i18n.t('Last 30 days') },
+    { id: 'LAST_60_DAYS', name: i18n.t('Last 60 days') },
+    { id: 'LAST_90_DAYS', name: i18n.t('Last 90 days') },
+    { id: 'LAST_180_DAYS', name: i18n.t('Last 180 days') },
+];
+const getWeeksPeriodType = () => [
+    { id: 'THIS_WEEK', name: i18n.t('This week') },
+    { id: 'LAST_WEEK', name: i18n.t('Last week') },
+    { id: 'LAST_4_WEEKS', name: i18n.t('Last 4 weeks') },
+    { id: 'LAST_12_WEEKS', name: i18n.t('Last 12 weeks') },
+    { id: 'LAST_52_WEEKS', name: i18n.t('Last 52 weeks') },
+    { id: WEEKS_THIS_YEAR, name: i18n.t('Weeks this year') },
+];
+const getBiWeeksPeriodType = () => [
+    { id: 'THIS_BIWEEK', name: i18n.t('This bi-week') },
+    { id: 'LAST_BIWEEK', name: i18n.t('Last bi-week') },
+    { id: 'LAST_4_BIWEEKS', name: i18n.t('Last 4 bi-weeks') },
+];
+const getMonthsPeriodType = () => [
+    { id: 'THIS_MONTH', name: i18n.t('This month') },
+    { id: 'LAST_MONTH', name: i18n.t('Last month') },
+    { id: 'LAST_3_MONTHS', name: i18n.t('Last 3 months') },
+    { id: 'LAST_6_MONTHS', name: i18n.t('Last 6 months') },
+    { id: 'LAST_12_MONTHS', name: i18n.t('Last 12 months') },
+    {
+        id: 'MONTHS_THIS_YEAR',
+        name: i18n.t('Months this year'),
+    },
+];
+const getBiMonthsPeriodType = () => [
+    { id: 'THIS_BIMONTH', name: i18n.t('This bi-month') },
+    { id: 'LAST_BIMONTH', name: i18n.t('Last bi-month') },
+    {
+        id: 'LAST_6_BIMONTHS',
+        name: i18n.t('Last 6 bi-months'),
+    },
+    {
+        id: 'BIMONTHS_THIS_YEAR',
+        name: i18n.t('Bi-months this year'),
+    },
+];
+const getQuartersPeriodType = () => [
+    { id: 'THIS_QUARTER', name: i18n.t('This quarter') },
+    { id: 'LAST_QUARTER', name: i18n.t('Last quarter') },
+    { id: 'LAST_4_QUARTERS', name: i18n.t('Last 4 quarters') },
+    {
+        id: 'QUARTERS_THIS_YEAR',
+        name: i18n.t('Quarters this year'),
+    },
+];
+const getSixMonthsPeriodType = () => [
+    { id: 'THIS_SIX_MONTH', name: i18n.t('This six-month') },
+    { id: 'LAST_SIX_MONTH', name: i18n.t('Last six-month') },
+    {
+        id: 'LAST_2_SIXMONTHS',
+        name: i18n.t('Last 2 six-month'),
+    },
+];
+const getFinancialYearsPeriodType = () => [
+    {
+        id: 'THIS_FINANCIAL_YEAR',
+        name: i18n.t('This financial year'),
+    },
+    {
+        id: 'LAST_FINANCIAL_YEAR',
+        name: i18n.t('Last financial year'),
+    },
+    {
+        id: 'LAST_5_FINANCIAL_YEARS',
+        name: i18n.t('Last 5 financial years'),
+    },
+];
+const getYearsPeriodType = () => [
+    { id: 'THIS_YEAR', name: i18n.t('This year') },
+    { id: 'LAST_YEAR', name: i18n.t('Last year') },
+    { id: 'LAST_5_YEARS', name: i18n.t('Last 5 years') },
+    { id: 'LAST_10_YEARS', name: i18n.t('Last 10 years') },
+];
+const getOptions$1 = () => [
+    {
+        id: DAILY,
+        getPeriods: () => getDaysPeriodType(),
+        name: i18n.t('Days'),
+    },
+    {
+        id: WEEKLY,
+        getPeriods: () => getWeeksPeriodType(),
+        name: i18n.t('Weeks'),
+    },
+    {
+        id: BIWEEKLY,
+        getPeriods: () => getBiWeeksPeriodType(),
+        name: i18n.t('Bi-weeks'),
+    },
+    {
+        id: MONTHLY,
+        getPeriods: () => getMonthsPeriodType(),
+        name: i18n.t('Months'),
+    },
+    {
+        id: BIMONTHLY,
+        getPeriods: () => getBiMonthsPeriodType(),
+        name: i18n.t('Bi-months'),
+    },
+    {
+        id: QUARTERLY,
+        getPeriods: () => getQuartersPeriodType(),
+        name: i18n.t('Quarters'),
+    },
+    {
+        id: SIXMONTHLY,
+        getPeriods: () => getSixMonthsPeriodType(),
+        name: i18n.t('Six-months'),
+    },
+    {
+        id: FINANCIAL,
+        getPeriods: () => getFinancialYearsPeriodType(),
+        name: i18n.t('Financial Years'),
+    },
+    {
+        id: YEARLY,
+        getPeriods: () => getYearsPeriodType(),
+        name: i18n.t('Years'),
+    },
+];
+const getRelativePeriodsOptionsById = (id) => getOptions$1().find((option) => option.id === id);
+const getRelativePeriodsOptions = () => getOptions$1();
+const getRelativePeriodIds = () => Object.values(getOptions$1())
+    .map((option) => option.getPeriods().map((period) => period.id))
+    .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])$/,
+    // [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$/,
+    [FYAPR]: /^([0-9]{4})April$/, // YYYY"April"
+};
+const getPeriods = ({ periodType, config, fnFilter, periodSettings = {}, }) => {
+    const offset = parseInt(config.offset, 10);
+    const isFilter = config.filterFuturePeriods;
+    const isReverse = periodType.match(/^FY|YEARLY/)
+        ? true
+        : config.reversePeriods;
+    const { calendar = 'gregory', locale = 'en' } = periodSettings;
+    const now = getNowInCalendar(calendar);
+    const year = (now.eraYear || now.year) + offset;
+    const params = {
+        periodType,
+        year,
+        calendar,
+        locale,
+        startingDay: config.startDay,
+    };
+    let periods = generateFixedPeriods(params);
+    periods = isFilter ? fnFilter(periods) : periods;
+    periods = !isReverse ? periods : periods.reverse();
+    return periods;
+};
+const getDailyPeriodType = (fnFilter, periodSettings) => {
+    return (config) => {
+        return getPeriods({
+            periodType: 'DAILY',
+            config,
+            fnFilter,
+            periodSettings,
+        });
+    };
+};
+const getWeeklyPeriodType = (weekObj, fnFilter, periodSettings) => {
+    return (config) => {
+        return getPeriods({
+            periodType: 'WEEKLY',
+            config: {
+                ...config,
+                startDay: weekObj.startDay,
+            },
+            fnFilter,
+            periodSettings,
+        });
+    };
+};
+const getBiWeeklyPeriodType = (fnFilter, periodSettings) => {
+    return (config) => {
+        return getPeriods({
+            periodType: 'BIWEEKLY',
+            config,
+            fnFilter,
+            periodSettings,
+        });
+    };
+};
+const getMonthlyPeriodType = (fnFilter, periodSettings) => {
+    return (config) => {
+        return getPeriods({
+            periodType: 'MONTHLY',
+            config,
+            fnFilter,
+            periodSettings,
+        });
+    };
+};
+const getBiMonthlyPeriodType = (fnFilter, periodSettings) => {
+    return (config) => {
+        return getPeriods({
+            periodType: 'BIMONTHLY',
+            config,
+            fnFilter,
+            periodSettings,
+        });
+    };
+};
+const getQuarterlyPeriodType = (fnFilter, periodSettings) => {
+    return (config) => {
+        return getPeriods({
+            periodType: 'QUARTERLY',
+            config,
+            fnFilter,
+            periodSettings,
+        });
+    };
+};
+const getSixMonthlyPeriodType = (fnFilter, periodSettings) => {
+    return (config) => {
+        return getPeriods({
+            periodType: 'SIXMONTHLY',
+            config,
+            fnFilter,
+            periodSettings,
+        });
+    };
+};
+const getSixMonthlyAprilPeriodType = (fnFilter, periodSettings) => {
+    return (config) => {
+        return getPeriods({
+            periodType: 'SIXMONTHLYAPR',
+            config,
+            fnFilter,
+            periodSettings,
+        });
+    };
+};
+const getYearlyPeriodType = (fnFilter, periodSettings) => {
+    return (config) => {
+        return getPeriods({
+            periodType: 'YEARLY',
+            config,
+            fnFilter,
+            periodSettings,
+        });
+    };
+};
+const getFinancialOctoberPeriodType = (fnFilter, periodSettings) => {
+    return (config) => {
+        return getPeriods({
+            periodType: 'FYOCT',
+            config,
+            fnFilter,
+            periodSettings,
+        });
+    };
+};
+const getFinancialNovemberPeriodType = (fnFilter, periodSettings) => {
+    return (config) => {
+        return getPeriods({
+            periodType: 'FYNOV',
+            config,
+            fnFilter,
+            periodSettings,
+        });
+    };
+};
+const getFinancialJulyPeriodType = (fnFilter, periodSettings) => {
+    return (config) => {
+        return getPeriods({
+            periodType: 'FYJUL',
+            config,
+            fnFilter,
+            periodSettings,
+        });
+    };
+};
+const getFinancialAprilPeriodType = (fnFilter, periodSettings) => {
+    return (config) => {
+        return getPeriods({
+            periodType: 'FYAPR',
+            config,
+            fnFilter,
+            periodSettings,
+        });
+    };
+};
+const filterFuturePeriods = (periods) => {
+    const array = [];
+    const now = new Date(Date.now());
+    for (let i = 0; i < periods.length; i++) {
+        if (new Date(periods[i].startDate) <= now) {
+            array.push(periods[i]);
+        }
+    }
+    return array;
+};
+const getOptions = (periodSettings) => {
+    return [
+        {
+            id: DAILY,
+            getPeriods: getDailyPeriodType(filterFuturePeriods, periodSettings),
+            name: i18n.t('Daily'),
+        },
+        {
+            id: WEEKLY,
+            getPeriods: getWeeklyPeriodType({ startDay: 1 }, filterFuturePeriods, periodSettings),
+            name: i18n.t('Weekly'),
+        },
+        {
+            id: WEEKLYWED,
+            getPeriods: getWeeklyPeriodType({ startDay: 3 }, filterFuturePeriods, periodSettings),
+            name: i18n.t('Weekly (Start Wednesday)'),
+        },
+        {
+            id: WEEKLYTHU,
+            getPeriods: getWeeklyPeriodType({ startDay: 4 }, filterFuturePeriods, periodSettings),
+            name: i18n.t('Weekly (Start Thursday)'),
+        },
+        {
+            id: WEEKLYSAT,
+            getPeriods: getWeeklyPeriodType({ startDay: 6 }, filterFuturePeriods, periodSettings),
+            name: i18n.t('Weekly (Start Saturday)'),
+        },
+        {
+            id: WEEKLYSUN,
+            getPeriods: getWeeklyPeriodType({ startDay: 7 }, filterFuturePeriods, periodSettings),
+            name: i18n.t('Weekly (Start Sunday)'),
+        },
+        {
+            id: BIWEEKLY,
+            getPeriods: getBiWeeklyPeriodType(filterFuturePeriods, periodSettings),
+            name: i18n.t('Bi-weekly'),
+        },
+        {
+            id: MONTHLY,
+            getPeriods: getMonthlyPeriodType(filterFuturePeriods, periodSettings),
+            name: i18n.t('Monthly'),
+        },
+        {
+            id: BIMONTHLY,
+            getPeriods: getBiMonthlyPeriodType(filterFuturePeriods, periodSettings),
+            name: i18n.t('Bi-monthly'),
+        },
+        {
+            id: QUARTERLY,
+            getPeriods: getQuarterlyPeriodType(filterFuturePeriods, periodSettings),
+            name: i18n.t('Quarterly'),
+        },
+        {
+            id: SIXMONTHLY,
+            getPeriods: getSixMonthlyPeriodType(filterFuturePeriods, periodSettings),
+            name: i18n.t('Six-monthly'),
+        },
+        {
+            id: SIXMONTHLYAPR,
+            getPeriods: getSixMonthlyAprilPeriodType(filterFuturePeriods, periodSettings),
+            name: i18n.t('Six-monthly April'),
+        },
+        {
+            id: YEARLY,
+            getPeriods: getYearlyPeriodType(filterFuturePeriods, periodSettings),
+            name: i18n.t('Yearly'),
+        },
+        {
+            id: FYNOV,
+            getPeriods: getFinancialNovemberPeriodType(filterFuturePeriods, periodSettings),
+            name: i18n.t('Financial year (Start November)'),
+        },
+        {
+            id: FYOCT,
+            getPeriods: getFinancialOctoberPeriodType(filterFuturePeriods, periodSettings),
+            name: i18n.t('Financial year (Start October)'),
+        },
+        {
+            id: FYJUL,
+            getPeriods: getFinancialJulyPeriodType(filterFuturePeriods, periodSettings),
+            name: i18n.t('Financial year (Start July)'),
+        },
+        {
+            id: FYAPR,
+            getPeriods: getFinancialAprilPeriodType(filterFuturePeriods, periodSettings),
+            name: i18n.t('Financial year (Start April)'),
+        },
+    ];
+};
+const getFixedPeriodsOptionsById = (id, periodSettings) => {
+    return getOptions(periodSettings).find((option) => option.id === id);
+};
+const getFixedPeriodsOptions = () => getOptions();
+const getYearOffsetFromNow = (yearStr) => parseInt(yearStr) - new Date(Date.now()).getFullYear();
+const parsePeriodCode = (code, allowedTypes) => {
+    const periodTypes = Object.keys(PERIOD_TYPE_REGEX);
+    let i = 0;
+    let type = '';
+    let match = undefined;
+    while (i < periodTypes.length && !match) {
+        type = periodTypes[i];
+        match = code.match(PERIOD_TYPE_REGEX[type]);
+        i++;
+    }
+    if (!match ||
+        (Array.isArray(allowedTypes) && !allowedTypes.some((t) => t === type))) {
+        return undefined;
+    }
+    const period = getFixedPeriodsOptionsById(type);
+    const offset = getYearOffsetFromNow(match[1]);
+    const options = period?.getPeriods({ offset });
+    return period
+        ? {
+            id: period.id,
+            name: period.name,
+            year: match[1],
+            options,
+        }
+        : null;
+};
+
+const filterPeriodTypesById = (allPeriodTypes = [], excludedPeriodTypes = []) => allPeriodTypes.filter((period) => !excludedPeriodTypes.includes(period['id']));
+
+const FixedPeriodFilter = ({ allowedPeriodTypes, excludedPeriodTypes, currentPeriodType, currentYear, onSelectPeriodType, onSelectYear, dataTest, }) => {
+    const onlyAllowedTypeIsSelected = Array.isArray(allowedPeriodTypes) &&
+        allowedPeriodTypes.length === 1 &&
+        allowedPeriodTypes[0] === currentPeriodType;
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("div", { className: "leftSection" },
+            React__default.createElement(SingleSelectField, { label: i18n.t('Period type'), onChange: ({ selected }) => onSelectPeriodType(selected), dense: true, selected: currentPeriodType, disabled: onlyAllowedTypeIsSelected, className: "filterElement", dataTest: `${dataTest}-period-type` }, (allowedPeriodTypes
+                ? getFixedPeriodsOptions().filter((option) => allowedPeriodTypes.some((type) => type === option.id))
+                : filterPeriodTypesById(getFixedPeriodsOptions(), excludedPeriodTypes)).map((option) => (React__default.createElement(SingleSelectOption, { key: option.id, value: option.id, label: option.name, dataTest: `${dataTest}-period-type-option-${option.id}` }))))),
+        React__default.createElement("div", { className: "rightSection" },
+            React__default.createElement(InputField$1, { label: i18n.t('Year'), className: "filterElement", type: "number", placeholder: i18n.t('Select year'), value: currentYear, onChange: ({ value }) => onSelectYear(value), dense: true, dataTest: `${dataTest}-year` })),
+        React__default.createElement("style", { jsx: true }, `
+        .leftSection {
+          flex-grow: 1;
+        }
+        .leftSection > :global(.filterElement),
+        .rightSection > :global(.filterElement) {
+          margin: 0;
+        }
+        .rightSection {
+          width: 120px;
+          margin-left: ${spacers.dp8};
+        }
+      `)));
+};
+FixedPeriodFilter.defaultProps = {
+    excludedPeriodTypes: [],
+};
+FixedPeriodFilter.propTypes = {
+    currentPeriodType: PropTypes.string.isRequired,
+    currentYear: PropTypes.string.isRequired,
+    onSelectPeriodType: PropTypes.func.isRequired,
+    onSelectYear: PropTypes.func.isRequired,
+    allowedPeriodTypes: PropTypes.arrayOf(PropTypes.string),
+    dataTest: PropTypes.string,
+    excludedPeriodTypes: PropTypes.arrayOf(PropTypes.string),
+};
+
+const RelativePeriodFilter = ({ currentFilter, onSelectFilter, dataTest, excludedPeriodTypes, }) => (React__default.createElement("div", { className: "leftSection" },
+    React__default.createElement(SingleSelectField, { label: i18n.t('Period type'), onChange: ({ selected }) => onSelectFilter(selected), dense: true, selected: currentFilter, className: "filterElement", dataTest: dataTest }, filterPeriodTypesById(getRelativePeriodsOptions(), excludedPeriodTypes).map((option) => (React__default.createElement(SingleSelectOption, { key: option.id, value: option.id, label: option.name, dataTest: `${dataTest}-option-${option.id}` })))),
+    React__default.createElement("style", { jsx: true }, `
+      .leftSection {
+        flex-grow: 1;
+      }
+      .leftSection > :global(.filterElement),
+      .rightSection > :global(.filterElement) {
+        margin: 0;
+      }
+      .rightSection {
+        width: 120px;
+        margin-left: ${spacers.dp8};
+      }
+    `)));
+RelativePeriodFilter.propTypes = {
+    currentFilter: PropTypes.string.isRequired,
+    onSelectFilter: PropTypes.func.isRequired,
+    dataTest: PropTypes.string,
+    excludedPeriodTypes: PropTypes.arrayOf(PropTypes.string),
+};
+
+var PeriodIcon = (React__default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16" },
+    React__default.createElement("path", { fill: "#6E7A8A", d: "M8,4 C10.209139,4 12,5.790861 12,8 C12,10.209139 10.209139,12 8,12 C5.790861,12 4,10.209139 4,8 C4,5.790861 5.790861,4 8,4 Z M8,5 C6.34314575,5 5,6.34314575 5,8 C5,9.65685425 6.34314575,11 8,11 C9.65685425,11 11,9.65685425 11,8 C11,6.34314575 9.65685425,5 8,5 Z M8.5,6 L8.5,7.5 L9.5,7.5 L9.5,8.5 L7.5,8.5 L7.5,6 L8.5,6 Z" })));
+
+const PeriodTransfer = ({ onSelect, dataTest, initialSelectedPeriods, rightFooter, excludedPeriodTypes, periodsSettings, }) => {
+    const defaultRelativePeriodType = excludedPeriodTypes.includes(MONTHLY)
+        ? getRelativePeriodsOptionsById(QUARTERLY)
+        : getRelativePeriodsOptionsById(MONTHLY);
+    const defaultFixedPeriodType = excludedPeriodTypes.includes(MONTHLY)
+        ? getFixedPeriodsOptionsById(QUARTERLY, periodsSettings)
+        : getFixedPeriodsOptionsById(MONTHLY, periodsSettings);
+    const now = getNowInCalendar(periodsSettings.calendar);
+    // use ".eraYear" rather than ".year" because in Ethiopian calendar, eraYear is what our users expect to see (for other calendars, it doesn't matter)
+    // there is still a pending decision in Temporal regarding which era to use by default: https://github.com/js-temporal/temporal-polyfill/blob/9350ee7dd0d29f329fc097debf923a517c32f813/lib/calendar.ts#L1964
+    const defaultFixedPeriodYear = now.eraYear || now.year;
+    const fixedPeriodConfig = (year) => ({
+        offset: year - defaultFixedPeriodYear,
+        filterFuturePeriods: false,
+        reversePeriods: false,
+    });
+    const [allPeriods, setAllPeriods] = useState(defaultRelativePeriodType?.getPeriods() || []);
+    const [selectedPeriods, setSelectedPeriods] = useState(initialSelectedPeriods);
+    const [isRelative, setIsRelative] = useState(true);
+    const [relativeFilter, setRelativeFilter] = useState({
+        periodType: defaultRelativePeriodType?.id || '',
+    });
+    const [fixedFilter, setFixedFilter] = useState({
+        periodType: defaultFixedPeriodType?.id || '',
+        year: defaultFixedPeriodYear.toString(),
+    });
+    const onIsRelativeClick = (state) => {
+        if (state !== isRelative) {
+            setIsRelative(state);
+            setAllPeriods(state
+                ? getRelativePeriodsOptionsById(relativeFilter.periodType)?.getPeriods() || []
+                : getFixedPeriodsOptionsById(fixedFilter.periodType, periodsSettings)?.getPeriods(fixedPeriodConfig(Number(fixedFilter.year))) || []);
+        }
+    };
+    const renderLeftHeader = () => (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(TabBar, null,
+            React__default.createElement(Tab, { selected: isRelative, onClick: () => onIsRelativeClick(true), dataTest: `${dataTest}-relative-periods-button` }, i18n.t('Relative periods')),
+            React__default.createElement(Tab, { selected: !isRelative, onClick: () => onIsRelativeClick(false), dataTest: `${dataTest}-fixed-periods-button` }, i18n.t('Fixed periods'))),
+        React__default.createElement("div", { className: "filterContainer" }, isRelative ? (React__default.createElement(RelativePeriodFilter, { currentFilter: relativeFilter.periodType, onSelectFilter: (filter) => {
+                setRelativeFilter({ periodType: filter });
+                setAllPeriods(getRelativePeriodsOptionsById(filter)?.getPeriods() || []);
+            }, dataTest: `${dataTest}-relative-period-filter`, excludedPeriodTypes: excludedPeriodTypes })) : (React__default.createElement(FixedPeriodFilter, { currentPeriodType: fixedFilter.periodType, currentYear: fixedFilter.year, onSelectPeriodType: (periodType) => {
+                onSelectFixedPeriods({
+                    periodType,
+                    year: fixedFilter.year,
+                });
+            }, onSelectYear: (year) => {
+                onSelectFixedPeriods({
+                    periodType: fixedFilter.periodType,
+                    year,
+                });
+            }, dataTest: `${dataTest}-fixed-period-filter`, excludedPeriodTypes: excludedPeriodTypes }))),
+        React__default.createElement("style", { jsx: true }, styles$1)));
+    const renderRightHeader = () => (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("p", { className: "rightHeader" }, i18n.t('Selected Periods')),
+        React__default.createElement("style", { jsx: true }, styles$1)));
+    const onSelectFixedPeriods = (filter) => {
+        setFixedFilter(filter);
+        setAllPeriods((getFixedPeriodsOptionsById(filter.periodType, periodsSettings)?.getPeriods(fixedPeriodConfig(Number(filter.year))) || []));
+    };
+    const renderEmptySelection = () => (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("p", { className: "emptyList" }, i18n.t('No periods selected')),
+        React__default.createElement("style", { jsx: true }, styles$1)));
+    return (React__default.createElement(Transfer, { onChange: ({ selected }) => {
+            const formattedItems = selected.map((id) => ({
+                id,
+                name: [...allPeriods, ...selectedPeriods].find((item) => item.id === id).name,
+            }));
+            setSelectedPeriods(formattedItems);
+            onSelect(formattedItems);
+        }, selected: selectedPeriods.map((period) => period.id), leftHeader: renderLeftHeader(), enableOrderChange: true, height: TRANSFER_HEIGHT, optionsWidth: TRANSFER_OPTIONS_WIDTH, selectedWidth: TRANSFER_SELECTED_WIDTH, selectedEmptyComponent: renderEmptySelection(), rightHeader: renderRightHeader(), rightFooter: rightFooter, options: [...allPeriods, ...selectedPeriods].map(({ id, name }) => ({
+            label: name,
+            value: id,
+        })), renderOption: (props) => (React__default.createElement(TransferOption, { ...props, icon: PeriodIcon, dataTest: `${dataTest}-transfer-option` })), dataTest: `${dataTest}-transfer` }));
+};
+PeriodTransfer.defaultProps = {
+    initialSelectedPeriods: [],
+    excludedPeriodTypes: [],
+    periodsSettings: {
+        calendar: 'gregory',
+        locale: 'en',
+    },
+};
+PeriodTransfer.propTypes = {
+    onSelect: PropTypes.func.isRequired,
+    dataTest: PropTypes.string,
+    excludedPeriodTypes: PropTypes.arrayOf(PropTypes.string),
+    initialSelectedPeriods: PropTypes.arrayOf(PropTypes.shape({
+        id: PropTypes.string,
+        name: PropTypes.string,
+    })),
+    periodsSettings: PropTypes.shape({
+        calendar: PropTypes.string,
+        locale: PropTypes.string,
+    }),
+    rightFooter: PropTypes.node,
+};
+
+const userSettingsQuery = {
+    userSettings: {
+        resource: 'userSettings',
+        params: {
+            key: ['keyUiLocale'],
+        },
+    },
+};
+const PeriodDimension = ({ onSelect, selectedPeriods, rightFooter, excludedPeriodTypes, systemInfo, }) => {
+    const result = useDataQuery(userSettingsQuery);
+    const { calendar = 'gregory' } = systemInfo;
+    // const { data: { userSettings: { keyUiLocale: locale } = {} } = {} } =
+    //   result as any;
+    const locale = result.data && result.data['userSettings']
+        ? result.data['userSettings']['keyUiLocale']
+        : '';
+    const periodsSettings = { calendar, locale };
+    const selectPeriods = (periods) => {
+        onSelect({
+            dimensionId: DIMENSION_ID_PERIOD,
+            items: periods,
+        });
+    };
+    return (React__default.createElement(PeriodTransfer, { onSelect: selectPeriods, initialSelectedPeriods: selectedPeriods, rightFooter: rightFooter, dataTest: 'period-dimension', excludedPeriodTypes: excludedPeriodTypes, periodsSettings: periodsSettings }));
+};
+PeriodDimension.propTypes = {
+    onSelect: PropTypes.func.isRequired,
+    excludedPeriodTypes: PropTypes.arrayOf(PropTypes.string),
+    rightFooter: PropTypes.node,
+    selectedPeriods: PropTypes.array,
+    systemInfo: PropTypes.object,
+};
+PeriodDimension.defaultProps = {
+    selectedPeriods: [],
+};
+
+class PeriodSelectorComponent extends ReactWrapperComponent {
+    constructor(elementRef, httpClient) {
+        super(elementRef);
+        this.httpClient = httpClient;
+        this.selectedPeriods = [];
+        this.selectPeriods = new EventEmitter();
+        this.props = {
+            onSelect: (e) => {
+                this.onSelectItems(e);
+            },
+        };
+        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;
         };
-        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 }); }
+    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 = () => (React__default.createElement(DataProvider, null, React__default.createElement(PeriodDimension, { selectedPeriods: this.selectedPeriods, onSelect: (selectionEvent) => 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"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppShellComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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: [{
+                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] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PeriodSelectorModule, decorators: [{
+            type: NgModule,
             args: [{
-                    selector: 'ng-dhis2-ui-app-shell',
-                    template: '<ng-content></ng-content>',
+                    imports: [CommonModule, SharedDhis2UiModule],
+                    declarations: [PeriodSelectorComponent],
+                    exports: [PeriodSelectorComponent],
                 }]
         }] });
 
-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] }); }
+// 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 LEVEL_ID_PREFIX = 'LEVEL';
+const GROUP_ID_PREFIX = 'OU_GROUP';
+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 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));
+const ouIdHelper = Object.freeze({
+    addLevelPrefix: (id) => `${LEVEL_ID_PREFIX}-${removePrefix(id)}`,
+    addGroupPrefix: (id) => `${GROUP_ID_PREFIX}-${removePrefix(id)}`,
+    removePrefix,
+    hasGroupPrefix,
+    hasLevelPrefix,
+});
+
+const isOuLevelIntId = (id) => ouIdHelper.hasLevelPrefix(id)
+    ? Number.isInteger(parseInt(ouIdHelper.removePrefix(id), 10))
+    : false;
+const replaceNumericOuLevelWithUid = (ouLevels) => (item) => {
+    if (!isOuLevelIntId(item.id)) {
+        return item;
+    }
+    const ouIntId = parseInt(ouIdHelper.removePrefix(item.id), 10);
+    const ouUid = ouLevels.find((l) => parseInt(l.level, 10) === ouIntId)?.id;
+    return ouUid
+        ? Object.assign({}, item, { id: ouIdHelper.addLevelPrefix(ouUid) })
+        : item;
+};
+const convertOuLevelsToUids = (ouLevels, layout) => {
+    const ouDimension = layoutGetDimension(layout, DIMENSION_ID_ORGUNIT);
+    const hasNumericOuLevels = ouDimension &&
+        dimensionGetItems(ouDimension).some((item) => isOuLevelIntId(item.id));
+    if (hasNumericOuLevels) {
+        const replaceNumericOuLevel = replaceNumericOuLevelWithUid(ouLevels);
+        const updatedOuItems = dimensionGetItems(ouDimension).map(replaceNumericOuLevel);
+        return layoutReplaceDimension(layout, DIMENSION_ID_ORGUNIT, updatedOuItems);
+    }
+    return layout;
+};
+
+// 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.
+
+// 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 styles = `
+    .container {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .orgUnitTreeWrapper {
+        height: 382px;
+        flex-grow: 1;
+        overflow: auto;
+    }
+
+    .orgUnitTreeWrapper > :global(*) {
+        flex-grow: 1;
+    }
+
+    .disabled {
+        cursor: not-allowed;
+        opacity: 0.5;
+    }
+
+    .disabled > :global(*) {
+        pointer-events: none;
+    }
+
+    .userOrgUnitsWrapper {
+        display: flex;
+        background: ${colors.grey200};
+        padding: ${spacers.dp8} ${spacers.dp8} ${spacers.dp8} ${spacers.dp24};
+        margin-bottom: ${spacers.dp12};
+    }
+
+    .userOrgUnitsWrapper > :global(*) {
+        margin-right: ${spacers.dp48};
+    }
+
+    .selectsWrapper {
+        display: flex;
+        align-items: flex-start;
+        gap: ${spacers.dp8};
+        margin-top: ${spacers.dp12};
+    }
+
+    .selectsWrapper.hidden {
+        display: none;
+    }
+
+    .selectsWrapper > :global(*) {
+        width: 50%;
+    }
+
+    .summaryWrapper {
+        display: inline-flex;
+        align-items: center;
+        margin-top: ${spacers.dp8};
+    }
+
+    .warningWrapper {
+        display: inline-flex;
+        align-items: center;
+    }
+
+    .warningText {
+        margin-left: ${spacers.dp8};
+        font-size: 14px;
+        line-height: 18px;
+        color: ${colors.red600};
+    }
+
+    .summaryText {
+        font-size: 14px;
+        line-height: 18px;
+        color: ${colors.grey700};
+    }
+
+    .deselectButton {
+        display: inline-block;
+        margin-left: ${spacers.dp8};
+    }
+`;
+
+const DYNAMIC_ORG_UNITS = [
+    USER_ORG_UNIT,
+    USER_ORG_UNIT_CHILDREN,
+    USER_ORG_UNIT_GRANDCHILDREN,
+];
+const OrgUnitDimension = ({ roots, selected, onSelect, hideGroupSelect, hideLevelSelect, hideUserOrgUnits, warning, orgUnitGroupPromise, orgUnitLevelPromise, }) => {
+    const [ouLevels, setOuLevels] = useState([]);
+    const [ouGroups, setOuGroups] = useState([]);
+    const [selectedItems, setSelectedItems] = useState(selected);
+    const dataEngine = useDataEngine();
+    const onSelectItems = (selectedItem) => {
+        const { id, checked, displayName, path } = selectedItem;
+        let result = [...selectedItems];
+        if (checked && DYNAMIC_ORG_UNITS.includes(id)) {
+            result = [
+                ...result.filter((item) => DYNAMIC_ORG_UNITS.includes(item.id)),
+                { id, displayName },
+            ];
+        }
+        else if (checked) {
+            result.push({ id, path, name: displayName });
+        }
+        else {
+            result = [...result.filter((item) => item.id !== id)];
+        }
+        setSelectedItems(result);
+        onSelect({
+            dimensionId: DIMENSION_ID_ORGUNIT,
+            items: result,
+        });
+    };
+    const clearSelection = () => {
+        setSelectedItems([]);
+        onSelect({
+            dimensionId: DIMENSION_ID_ORGUNIT,
+            items: [],
+        });
+    };
+    useEffect(() => {
+        const doFetchOuLevels = async () => {
+            const result = await orgUnitLevelPromise;
+            result.sort((a, b) => (a.level > b.level ? 1 : -1));
+            setOuLevels(result);
+        };
+        const doFetchOuGroups = async () => {
+            const result = await orgUnitGroupPromise;
+            setOuGroups(result);
+        };
+        !hideLevelSelect && doFetchOuLevels();
+        !hideGroupSelect && doFetchOuGroups();
+    }, [dataEngine, hideLevelSelect, hideGroupSelect]);
+    const onLevelChange = (ids) => {
+        const items = ids.map((id) => ({
+            id: ouIdHelper.addLevelPrefix(id),
+            name: ouLevels?.find((level) => level.id === id)
+                ?.displayName,
+        }));
+        setSelectedItems([
+            ...selectedItems.filter((ou) => !ouIdHelper.hasLevelPrefix(ou.id)),
+            ...items,
+        ]);
+        onSelect({
+            dimensionId: DIMENSION_ID_ORGUNIT,
+            items: selectedItems,
+        });
+    };
+    const onGroupChange = (ids) => {
+        const items = ids.map((id) => ({
+            id: ouIdHelper.addGroupPrefix(id),
+            name: (ouGroups?.find((group) => group.id === id) || {})
+                .displayName,
+        }));
+        setSelectedItems([
+            ...selectedItems.filter((ou) => !ouIdHelper.hasGroupPrefix(ou.id)),
+            ...items,
+        ]);
+        onSelect({
+            dimensionId: DIMENSION_ID_ORGUNIT,
+            items: selectedItems,
+        });
+    };
+    const getSummary = () => {
+        let summary;
+        if (selectedItems.length) {
+            const numberOfOrgUnits = selectedItems.filter((item) => !DYNAMIC_ORG_UNITS.includes(item.id) &&
+                !ouIdHelper.hasLevelPrefix(item.id) &&
+                !ouIdHelper.hasGroupPrefix(item.id)).length;
+            const numberOfLevels = selectedItems.filter((item) => ouIdHelper.hasLevelPrefix(item.id)).length;
+            const numberOfGroups = selectedItems.filter((item) => ouIdHelper.hasGroupPrefix(item.id)).length;
+            const userOrgUnits = selectedItems.filter((item) => DYNAMIC_ORG_UNITS.includes(item.id));
+            const parts = [];
+            if (numberOfOrgUnits) {
+                parts.push(i18n.t('{{count}} org units', {
+                    count: numberOfOrgUnits,
+                    defaultValue: '{{count}} org unit',
+                    defaultValue_plural: '{{count}} org units',
+                }));
+            }
+            if (numberOfLevels) {
+                parts.push(i18n.t('{{count}} levels', {
+                    count: numberOfLevels,
+                    defaultValue: '{{count}} level',
+                    defaultValue_plural: '{{count}} levels',
+                }));
+            }
+            if (numberOfGroups) {
+                parts.push(i18n.t('{{count}} groups', {
+                    count: numberOfGroups,
+                    defaultValue: '{{count}} group',
+                    defaultValue_plural: '{{count}} groups',
+                }));
+            }
+            userOrgUnits.forEach((orgUnit) => {
+                parts.push(orgUnit.name || orgUnit.displayName);
+            });
+            summary = i18n.t('Selected: {{commaSeparatedListOfOrganisationUnits}}', {
+                keySeparator: '>',
+                nsSeparator: '|',
+                commaSeparatedListOfOrganisationUnits: formatList(parts),
+            });
+        }
+        else {
+            summary = i18n.t('Nothing selected');
+        }
+        return summary;
+    };
+    return (React__default.createElement("div", { className: "container" },
+        !hideUserOrgUnits && (React__default.createElement("div", { className: "userOrgUnitsWrapper" },
+            React__default.createElement(Checkbox, { label: i18n.t('User organisation unit'), checked: selectedItems.some((item) => item.id === USER_ORG_UNIT), onChange: ({ checked }) => onSelectItems({
+                    id: USER_ORG_UNIT,
+                    checked,
+                    displayName: i18n.t('User organisation unit'),
+                }), dense: true }),
+            React__default.createElement(Checkbox, { label: i18n.t('User sub-units'), checked: selectedItems.some((item) => item.id === USER_ORG_UNIT_CHILDREN), onChange: ({ checked }) => onSelectItems({
+                    id: USER_ORG_UNIT_CHILDREN,
+                    checked,
+                    displayName: i18n.t('User sub-units'),
+                }), dense: true }),
+            React__default.createElement(Checkbox, { label: i18n.t('User sub-x2-units'), checked: selectedItems.some((item) => item.id === USER_ORG_UNIT_GRANDCHILDREN), onChange: ({ checked }) => onSelectItems({
+                    id: USER_ORG_UNIT_GRANDCHILDREN,
+                    checked,
+                    displayName: i18n.t('User sub-x2-units'),
+                }), dense: true }))),
+        React__default.createElement("div", { className: cx('orgUnitTreeWrapper', {
+                disabled: selectedItems.some((item) => DYNAMIC_ORG_UNITS.includes(item.id)),
+            }) },
+            React__default.createElement(OrganisationUnitTree, { roots: roots, initiallyExpanded: [
+                    ...(roots.length === 1 ? [`/${roots[0]}`] : []),
+                    ...selectedItems
+                        .filter((item) => !DYNAMIC_ORG_UNITS.includes(item.id) &&
+                        !ouIdHelper.hasLevelPrefix(item.id) &&
+                        !ouIdHelper.hasGroupPrefix(item.id))
+                        .map((item) => item.path.substring(0, item.path.lastIndexOf('/')))
+                        .filter((path) => path),
+                ], selected: selectedItems
+                    .filter((item) => !DYNAMIC_ORG_UNITS.includes(item.id) &&
+                    !ouIdHelper.hasLevelPrefix(item.id) &&
+                    !ouIdHelper.hasGroupPrefix(item.id))
+                    .map((item) => item.path), onChange: onSelectItems, dataTest: 'org-unit-tree' })),
+        React__default.createElement("div", { className: cx('selectsWrapper', {
+                disabled: selectedItems.some((item) => DYNAMIC_ORG_UNITS.includes(item.id)),
+                hidden: hideLevelSelect && hideGroupSelect,
+            }) },
+            !hideLevelSelect && (React__default.createElement(MultiSelect, { selected: ouLevels.length
+                    ? selectedItems
+                        .filter((item) => ouIdHelper.hasLevelPrefix(item.id))
+                        .map((item) => ouIdHelper.removePrefix(item.id))
+                    : [], onChange: ({ selected }) => onLevelChange(selected), placeholder: i18n.t('Select a level'), loading: !ouLevels.length, dense: true, dataTest: 'org-unit-level-select' }, ouLevels.map((level) => (React__default.createElement(MultiSelectOption, { key: level.id, value: level.id, label: level.displayName, dataTest: `org-unit-level-select-option-${level.id}` }))))),
+            !hideGroupSelect && (React__default.createElement(MultiSelect, { selected: ouGroups.length
+                    ? selectedItems
+                        .filter((item) => ouIdHelper.hasGroupPrefix(item.id))
+                        .map((item) => ouIdHelper.removePrefix(item.id))
+                    : [], onChange: ({ selected }) => onGroupChange(selected), placeholder: i18n.t('Select a group'), loading: !ouGroups.length, dense: true, dataTest: 'org-unit-group-select' }, ouGroups.map((group) => (React__default.createElement(MultiSelectOption, { key: group.id, value: group.id, label: group.displayName, dataTest: `org-unit-group-select-option-${group.id}` })))))),
+        React__default.createElement("div", { className: "summaryWrapper" },
+            warning ? (React__default.createElement("div", { className: "warningWrapper" },
+                React__default.createElement(IconWarningFilled16, { color: colors.red500 }),
+                React__default.createElement("span", { className: "warningText" }, warning))) : (React__default.createElement("span", { className: "summaryText" }, getSummary())),
+            React__default.createElement("div", { className: "deselectButton" },
+                React__default.createElement(Button$1, { secondary: true, small: true, onClick: clearSelection, disabled: !selectedItems.length }, i18n.t('Deselect all')))),
+        React__default.createElement("style", { jsx: true }, styles)));
+};
+OrgUnitDimension.defaultProps = {
+    hideGroupSelect: false,
+    hideLevelSelect: false,
+    hideUserOrgUnits: false,
+};
+OrgUnitDimension.propTypes = {
+    hideGroupSelect: PropTypes.bool,
+    hideLevelSelect: PropTypes.bool,
+    hideUserOrgUnits: PropTypes.bool,
+    roots: PropTypes.arrayOf(PropTypes.string),
+    selected: PropTypes.arrayOf(PropTypes.shape({
+        id: PropTypes.string.isRequired,
+        name: PropTypes.string.isRequired,
+        path: PropTypes.string,
+    })),
+    warning: PropTypes.string,
+    onSelect: PropTypes.func,
+    orgUnitGroupPromise: PropTypes.any,
+    orgUnitLevelPromise: PropTypes.any,
+};
+
+// 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 OrganisationUnitSelectionConfig {
+    constructor(params) {
+        this.hideGroupSelect = params?.hideGroupSelect || false;
+        this.hideLevelSelect = params?.hideLevelSelect || false;
+        this.hideUserOrgUnits = params?.hideUserOrgUnits || false;
+        this.usageType = params?.usageType || 'DATA_ENTRY';
+        this.minLevel = params?.minLevel;
+        this.allowSingleSelection = params?.allowSingleSelection || false;
+        this.batchSize = params?.batchSize;
+        this.additionalQueryFields = params?.additionalQueryFields;
+    }
+}
+
+// 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 OrganisationUnitSelectorComponent extends ReactWrapperComponent {
+    constructor(elementRef, httpClient) {
+        super(elementRef);
+        this.httpClient = httpClient;
+        this.selectedOrgUnits = [];
+        this.orgUnitSelectionConfig = new OrganisationUnitSelectionConfig();
+        this.selectOrgUnits = 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();
+        this.component = () => (React__default.createElement(DataProvider, null, 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.render();
+    }
+    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: "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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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: [{
+                type: Input
+            }], orgUnitSelectionConfig: [{
+                type: Input
+            }], selectOrgUnits: [{
+                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] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppShellModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OrganisationUnitSelectorModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [AppShellComponent],
                     imports: [CommonModule, SharedDhis2UiModule],
-                    exports: [AppShellComponent],
+                    declarations: [OrganisationUnitSelectorComponent],
+                    exports: [OrganisationUnitSelectorComponent],
                 }]
         }] });
 
@@ -1235,5 +2746,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AppShellComponent, AppShellModule, ButtonComponent, ButtonModule, HeaderBarComponent, HeaderBarModule, NgDhis2UiModule };
+export { ButtonComponent, ButtonModule, HeaderBarComponent, HeaderBarModule, NgDhis2UiModule, OrganisationUnitSelectorComponent, OrganisationUnitSelectorModule, PeriodSelectorComponent, PeriodSelectorModule, ReactWrapperComponent };
 //# sourceMappingURL=iapps-ng-dhis2-ui.mjs.map