@nu-art/permissions-frontend 0.400.5

package/ui/ATS_ComponentPermissionKeys/permission-keys-editor.scss

@@ -0,0 +1,153 @@
+@use '@nu-art/ts-styles' as styles;
+
+.permissions-key-editor {
+  gap: 16px;
+  display: flex;
+
+  .item-list {
+    height: 100%;
+    width: 300px;
+    flex-shrink: 0;
+    border: 2px solid black;
+    border-radius: 10px;
+    overflow: hidden;
+
+    .item-list__header {
+      height: 40px;
+      width: 100%;
+      border-bottom: 2px solid black;
+      background: styles.gray(3);
+      color: styles.gray(7);
+      display: grid;
+      place-content: center;
+      font: {
+        size: 18px;
+        weight: bold;
+      }
+      flex-shrink: 0;
+    }
+
+    .item-list__list {
+      flex-grow: 1;
+      width: 100%;
+      gap: 2px;
+
+      .item-list__list-item {
+        width: 100%;
+        height: 30px;
+        padding: 0 8px;
+        display: flex;
+        align-items: center;
+        background: styles.gray(4);
+        cursor: pointer;
+        font: {
+          size: 14px;
+          weight: bold;
+        }
+        color: white;
+
+        &.selected {
+          background: white;
+          color: styles.gray(2);
+        }
+      }
+    }
+
+    .item-list__add-button {
+      width: 100%;
+      margin: 0;
+      padding: 8px 0;
+      font: {
+        size: 16px;
+        weight: bold;
+      }
+      border-radius: 0;
+    }
+  }
+
+  .item-editor {
+    height: 100%;
+    //flex-grow: 1;
+    border: 2px solid black;
+    border-radius: 10px;
+    overflow: hidden;
+
+    .access-levels-section {
+      width: 100%;
+
+      .access-levels {
+        width: 100%;
+
+        .access-levels-dropdown {
+          .ts-dropdown__header {
+            .ts-dropdown__placeholder {
+              width: 100%;
+            }
+          }
+        }
+      }
+    }
+
+    .item-editor__header {
+      height: 40px;
+      width: 100%;
+      border-bottom: 2px solid black;
+      background: styles.gray(3);
+      color: styles.gray(7);
+      display: flex;
+      align-items: center;
+      padding: 0 16px;
+      font: {
+        size: 18px;
+        weight: bold;
+      }
+      flex-shrink: 0;
+    }
+
+    .item-editor__main {
+      height: 0;
+      flex-grow: 1;
+      width: 100%;
+      padding: 16px;
+      gap: 16px;
+
+      .ts-table .ts-table__td {
+        padding: 0;
+      }
+
+      .action-button {
+        width: 50px;
+        margin: 0;
+        padding: 0;
+        background: transparent;
+        min-width: 50px;
+
+        &.delete .icon--wrapper {
+          width: 32px;
+          height: 32px;
+          @include styles.mouse-interactive-icon(styles.red(4), styles.red(3), styles.red(2));
+          @include styles.set-svg-color-transition();
+        }
+
+        &.save .icon--wrapper {
+          width: 24px;
+          height: 24px;
+          @include styles.mouse-interactive-icon(styles.green(4), styles.green(3), styles.green(2));
+        }
+      }
+    }
+
+    .item-editor__buttons {
+      height: 50px;
+      width: 100%;
+      justify-content: flex-end;
+      flex-shrink: 0;
+      padding: 0 16px;
+      gap: 16px;
+
+      .ts-button, .ts-busy-button {
+        margin: 0;
+      }
+    }
+  }
+}

package/ui/ATS_ComponentPermissionKeys/subEditors/Component_AccessLevelsEditor.d.ts

@@ -0,0 +1,16 @@
+import { ComponentSync } from '@nu-art/thunderstorm-frontend/index';
+import { PermissionKey_FE } from '../../../PermissionKey_FE.js';
+import { DB_PermissionAccessLevel } from '@nu-art/permissions-shared';
+type Props = {
+    permissionKey: PermissionKey_FE;
+};
+type State = {
+    levels: DB_PermissionAccessLevel[];
+};
+export declare class Component_AccessLevelsEditor extends ComponentSync<Props, State> {
+    protected deriveStateFromProps(nextProps: Props, state: State): State;
+    private renderTag;
+    private renderLevelDropDown;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export {};

package/ui/ATS_ComponentPermissionKeys/subEditors/Component_AccessLevelsEditor.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, ComponentSync, LL_V_L } from '@nu-art/thunderstorm-frontend/index';
+import { dbObjectToId } from '@nu-art/ts-common';
+import { Permissions_DropDown } from '../../ui-props.js';
+import { TS_Icons } from '@nu-art/ts-styles';
+import { ModuleFE_PermissionAccessLevel, ModuleFE_PermissionDomain } from '../../../_entity.js';
+export class Component_AccessLevelsEditor extends ComponentSync {
+    deriveStateFromProps(nextProps, state) {
+        const levelIds = nextProps.permissionKey.get().accessLevelIds ?? [];
+        state.levels = ModuleFE_PermissionAccessLevel.cache.filter(i => levelIds.includes(i._id));
+        return state;
+    }
+    renderTag(level) {
+        return _jsxs("div", { className: 'level', children: [_jsx(Button, { variant: 'dangerous', onClick: async () => {
+                        const levels = this.state.levels.filter(i => i._id !== level._id);
+                        await this.props.permissionKey.set({ accessLevelIds: levels.map(dbObjectToId) });
+                        this.reDeriveState();
+                    }, children: _jsx(TS_Icons.x.component, {}) }), _jsx("span", { children: level.name })] }, level._id);
+    }
+    renderLevelDropDown = () => {
+        return _jsx(Permissions_DropDown.AccessLevel, { queryFilter: (item) => {
+                return !this.state.levels.map(i => i._id).includes(item._id);
+            }, mapper: level => {
+                const domain = ModuleFE_PermissionDomain.cache.unique(level.domainId);
+                return [domain.namespace, level.name, String(level.value)];
+            }, className: 'access-levels-dropdown', selected: undefined, onSelected: async (level) => {
+                const levels = [...this.state.levels, level];
+                await this.props.permissionKey.set({ accessLevelIds: levels.map(dbObjectToId) });
+                this.reDeriveState();
+            }, placeholder: 'New Access Level', caret: {
+                open: _jsx("div", { className: 'caret open', children: _jsx(TS_Icons.treeCollapse.component, { style: { rotate: '90' } }) }),
+                close: _jsx("div", { className: 'caret close', children: _jsx(TS_Icons.treeCollapse.component, { style: { rotate: '-90' } }) }),
+            }, boundingParentSelector: '.ts-tabs__content' });
+    };
+    render() {
+        return (_jsx(LL_V_L, { className: 'access-levels-section', children: _jsxs(LL_V_L, { className: 'access-levels', children: [this.state.levels.map(level => this.renderTag(level)), this.renderLevelDropDown()] }) }));
+    }
+}

package/ui/ATS_ComponentPermissionKeys/subEditors/permission-keys-editor.d.ts

@@ -0,0 +1,16 @@
+import { ComponentSync } from '@nu-art/thunderstorm-frontend/index';
+import '../permission-keys-editor.scss';
+import { PermissionKey_FE } from '../../../PermissionKey_FE.js';
+type Props = {};
+type State = {
+    editedItem?: PermissionKey_FE;
+};
+export declare class PermissionKeysEditor extends ComponentSync<Props, State> {
+    protected deriveStateFromProps(nextProps: Props, state: State): State;
+    private renderKey;
+    private renderKeyList;
+    private renderAccessLevels;
+    private renderKeyEditor;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export {};

package/ui/ATS_ComponentPermissionKeys/subEditors/permission-keys-editor.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { _className, ComponentSync, LL_H_C, LL_V_L } from '@nu-art/thunderstorm-frontend/index';
+import { _values } from '@nu-art/ts-common';
+import '../permission-keys-editor.scss';
+import { Component_AccessLevelsEditor } from './Component_AccessLevelsEditor.js';
+import { ModuleFE_PermissionsAssert } from '../../../modules/ModuleFE_PermissionsAssert.js';
+export class PermissionKeysEditor extends ComponentSync {
+    deriveStateFromProps(nextProps, state) {
+        state ??= this.state ? { ...this.state } : {};
+        return state;
+    }
+    renderKey = (item) => {
+        const className = _className('item-list__list-item', item.key === this.state.editedItem?.key ? 'selected' : undefined);
+        return _jsx("div", { className: className, onClick: () => this.setState({ editedItem: item }), children: item.key }, item.key);
+    };
+    renderKeyList = () => {
+        const allKeys = ModuleFE_PermissionsAssert.getAllPermissionKeys();
+        return _jsxs(LL_V_L, { className: 'item-list', children: [_jsx("div", { className: 'item-list__header', children: "Permission Keys" }), _jsx(LL_V_L, { className: 'item-list__list', children: _values(allKeys).map(this.renderKey) })] });
+    };
+    renderAccessLevels() {
+        if (!this.state.editedItem)
+            return null;
+        return _jsx(Component_AccessLevelsEditor, { permissionKey: this.state.editedItem });
+    }
+    renderKeyEditor = () => {
+        if (!this.state.editedItem)
+            return '';
+        return _jsxs(LL_V_L, { className: 'item-editor', children: [_jsx("div", { className: 'item-list__header', children: this.state.editedItem.key }), this.renderAccessLevels()] });
+    };
+    render() {
+        return _jsxs(LL_H_C, { className: 'permissions-key-editor match_parent', children: [this.renderKeyList(), this.renderKeyEditor()] });
+    }
+}

package/ui/ATS_Permissions/ATS_Permissions.d.ts

@@ -0,0 +1,8 @@
+import { AppToolsScreen, ComponentSync } from '@nu-art/thunderstorm-frontend/index';
+import './ATS_Permissions.scss';
+export declare class ATS_Permissions extends ComponentSync {
+    static screen: AppToolsScreen;
+    componentDidMount(): void;
+    private toggleStrictMode;
+    render(): import("react/jsx-runtime").JSX.Element;
+}

package/ui/ATS_Permissions/ATS_Permissions.js

@@ -0,0 +1,63 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { _className, Button, ComponentSync, genericNotificationAction, LL_H_C, LL_V_L, ModuleFE_RoutingV2, TS_AppTools, TS_NavLink } from '@nu-art/thunderstorm-frontend/index';
+import './ATS_Permissions.scss';
+import { ModuleFE_PermissionsAssert } from '../../modules/ModuleFE_PermissionsAssert.js';
+import { ModuleFE_Account } from '@nu-art/user-account-frontend/index';
+import { arrayIncludesAny, timeout } from '@nu-art/ts-common';
+import { SessionKey_StrictMode_FE } from '../../consts.js';
+import { ModuleFE_PermissionAccessLevel } from '../../_entity/permission-access-level/index.js';
+import { ModuleFE_PermissionAPI } from '../../_entity/permission-api/index.js';
+import { ModuleFE_PermissionProject } from '../../_entity/permission-project/index.js';
+import { ModuleFE_PermissionDomain } from '../../_entity/permission-domain/index.js';
+import { ModuleFE_PermissionGroup } from '../../_entity/permission-group/index.js';
+import { ModuleFE_PermissionUser } from '../../_entity/permission-user/index.js';
+import { Outlet } from 'react-router-dom';
+import { PermissionUsersEditor } from '../permission-editors/permission-users-editor.js';
+import { PermissionProjectsEditor } from '../permission-editors/permission-project-editor/permission-projects-editor.js';
+import { PermissionDomainsEditor } from '../permission-editors/permission-domains-editor.js';
+import { PermissionGroupsEditor } from '../permission-editors/permission-groups-editor.js';
+export class ATS_Permissions extends ComponentSync {
+    static screen = {
+        key: 'permissions-dev-page',
+        name: 'Permissions',
+        renderer: this,
+        group: 'Permissions',
+        modulesToAwait: [
+            ModuleFE_PermissionAccessLevel,
+            ModuleFE_PermissionAPI,
+            ModuleFE_PermissionProject,
+            ModuleFE_PermissionDomain,
+            ModuleFE_PermissionGroup,
+            ModuleFE_PermissionUser,
+        ],
+        children: [
+            PermissionProjectsEditor.Route,
+            PermissionDomainsEditor.Route,
+            PermissionGroupsEditor.Route,
+            PermissionUsersEditor.Route,
+        ]
+    };
+    componentDidMount() {
+        const routeKeys = [PermissionProjectsEditor.Route.key,
+            PermissionDomainsEditor.Route.key,
+            PermissionGroupsEditor.Route.key,
+            PermissionUsersEditor.Route.key,
+        ];
+        if (!arrayIncludesAny(window.location.pathname.split('/'), routeKeys))
+            ModuleFE_RoutingV2.goToRoute(PermissionProjectsEditor.Route);
+    }
+    //######################### Logic #########################
+    toggleStrictMode = async () => {
+        await genericNotificationAction(async (notification) => {
+            this.setState({ creatingPermissions: true });
+            await ModuleFE_PermissionsAssert.v1.toggleStrictMode({}).executeSync();
+            await timeout(3000);
+            await ModuleFE_Account._v1.refreshSession({}).executeSync();
+        }, 'Toggling Strict Mode');
+        this.setState({ creatingPermissions: false });
+    };
+    //######################### Render #########################
+    render() {
+        return _jsxs(LL_V_L, { id: 'dev-page__permissions', children: [_jsxs(LL_H_C, { className: "match_width flex__space-between", children: [TS_AppTools.renderPageHeader('Permissions Editor'), _jsx(LL_H_C, { children: _jsxs(Button, { variant: 'secondary', disabled: this.state.creatingPermissions, className: 'item-list__add-button', onClick: this.toggleStrictMode, children: [SessionKey_StrictMode_FE.get() ? 'Disable' : 'Enable', " Strict Mode"] }) })] }), _jsxs(LL_H_C, { className: 'links-container', children: [_jsx(TS_NavLink, { route: PermissionProjectsEditor.Route, ignoreClickOnSameRoute: true, className: ({ isActive }) => _className('link-button', isActive && 'selected'), children: "Project" }, PermissionProjectsEditor.Route.key), _jsx(TS_NavLink, { route: PermissionDomainsEditor.Route, ignoreClickOnSameRoute: true, className: ({ isActive }) => _className('link-button', isActive && 'selected'), children: "Domains" }, PermissionDomainsEditor.Route.key), _jsx(TS_NavLink, { route: PermissionGroupsEditor.Route, ignoreClickOnSameRoute: true, className: ({ isActive }) => _className('link-button', isActive && 'selected'), children: "Groups" }, PermissionGroupsEditor.Route.key), _jsx(TS_NavLink, { route: PermissionUsersEditor.Route, ignoreClickOnSameRoute: true, className: ({ isActive }) => _className('link-button', isActive && 'selected'), children: "Users" }, PermissionUsersEditor.Route.key)] }), _jsx(Outlet, {})] });
+    }
+}

package/ui/ATS_Permissions/ATS_Permissions.scss

@@ -0,0 +1,172 @@
+@use '@nu-art/ts-styles' as styles;
+
+#dev-page__permissions {
+  width: 100%;
+  height: 100%;
+  padding: 0 16px 16px;
+
+  .ts-dev-page__page-header {
+    width: 100%;
+    margin: 0 0 16px;
+    padding: 8px 0;
+    flex-shrink: 0;
+  }
+
+  .links-container {
+    flex-grow: 1;
+    gap: 8px;
+    padding-bottom: 10px;
+
+    .link-button {
+      display: flex;
+      background: transparent;
+      border: 2px solid black;
+      border-radius: 8px;
+      text-decoration: none;
+      padding-inline: 12px;
+      flex-shrink: 0;
+      min-width: 100px;
+      min-height: 50px;
+      justify-content: center;
+      align-items: center;
+
+      font: {
+        size: 18px;
+        weight: bold;
+      }
+      color: black;
+
+      &.selected {
+        background: white;
+      }
+    }
+  }
+
+  .domain-level-renderer {
+    border: 1px solid black;
+    border-radius: 4px;
+    height: 50px;
+    width: 150px;
+    overflow: hidden;
+
+    .ts-dropdown {
+      width: 100%;
+      height: 50%;
+
+      .ts-dropdown__header {
+        border: none;
+        border-radius: 0;
+        border-bottom: 1px solid black;
+      }
+
+      .ts-dropdown__items-container {
+        border: 1px solid black;
+        padding-top: 0;
+        transform: none
+      }
+
+      .ts-tree__node {
+        font: {
+          size: 12px;
+        }
+        white-space: break-spaces;
+      }
+
+      &:last-child {
+        .ts-dropdown__header {
+          border: none;
+        }
+      }
+    }
+  }
+
+  .domain-level-list {
+    width: 100%;
+    flex-wrap: wrap;
+    gap: 8px;
+
+    .ts-multi-select__list-value {
+      position: relative;
+      height: 50px;
+      max-width: 150px;
+      padding: 8px;
+      white-space: break-spaces;
+      text-align: center;
+      display: flex;
+      align-items: center;
+      font: {
+        size: 11px;
+        weight: bold;
+      }
+      overflow: hidden;
+
+      .icon--wrapper {
+        background: styles.red(4);
+        position: absolute;
+        top: 0;
+        right: 0;
+        height: 50px;
+        width: 30px;
+        padding: 8px;
+        transform: translateX(100%);
+        transition: transform 200ms ease-out;
+        cursor: pointer;
+        @include styles.mouse-interactive-icon(white);
+      }
+
+      &:hover {
+        .icon--wrapper {
+          transform: translateX(0);
+        }
+      }
+    }
+  }
+
+  .db-def-button {
+    width: unset;
+    padding: 4px 8px;
+  }
+}
+
+#db-def-list {
+  display: flex;
+  flex-direction: column;
+  max-height: 200px;
+  @include styles.customScrollbar('vertical');
+
+  .db-def-list__item {
+    height: 30px;
+    padding: 0 8px;
+    display: flex;
+    align-items: center;
+
+    &:hover {
+      background: styles.gray(7);
+    }
+  }
+}
+
+#save-initial-domain {
+  padding: 10px;
+  border: 2px solid black;
+  border-radius: 8px;
+  height: 80px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  .save-initial-domain__title {
+    font: {
+      size: 14px;
+      weight: bold;
+    }
+  }
+
+  .save-initial-domain__buttons {
+    justify-content: space-between;
+
+    .ts-button {
+      margin: 0;
+    }
+  }
+}

package/ui/Component_SwitchView.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { ComponentSync } from '@nu-art/thunderstorm-frontend/index';
+import { ResolvableContent } from '@nu-art/ts-common';
+import { PermissionKey_FE } from '../PermissionKey_FE.js';
+type Mode = {
+    key: string;
+    renderer: ResolvableContent<React.ReactNode>;
+    permissionKey?: PermissionKey_FE;
+};
+type Props = {
+    mode: string;
+    modes: Mode[];
+};
+type State = {
+    mode: string;
+    modes: Mode[];
+};
+export declare class Component_SwitchView extends ComponentSync<Props, State> {
+    protected deriveStateFromProps(nextProps: Props, state: State): State;
+    private getModeForKey;
+    render(): React.ReactNode;
+}
+export {};

package/ui/Component_SwitchView.js

@@ -0,0 +1,32 @@
+import { ComponentSync } from '@nu-art/thunderstorm-frontend/index';
+import { BadImplementationException, resolveContent } from '@nu-art/ts-common';
+import { AccessLevel } from '../modules/ModuleFE_PermissionsAssert.js';
+export class Component_SwitchView extends ComponentSync {
+    // ######################## Lifecycle ########################
+    deriveStateFromProps(nextProps, state) {
+        state.mode = nextProps.mode;
+        state.modes = nextProps.modes;
+        return state;
+    }
+    // ######################## Logic ########################
+    getModeForKey = (key) => {
+        const mode = this.state.modes.find(mode => mode.key === key);
+        if (!mode)
+            throw new BadImplementationException(`No mode found for given key ${key}`);
+        return mode;
+    };
+    // ######################## Render ########################
+    render() {
+        const mode = this.getModeForKey(this.state.mode);
+        if (!mode.permissionKey)
+            return resolveContent(mode.renderer);
+        const accessLevel = mode.permissionKey.getAccessLevel();
+        if (accessLevel === AccessLevel.Undefined) {
+            this.logError(`Data for permission key ${mode.permissionKey.key} does not exist`);
+            return;
+        }
+        if (accessLevel < AccessLevel.HasAccess)
+            return;
+        return resolveContent(mode.renderer);
+    }
+}

package/ui/Component_SwitchViewV2.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { ComponentSync } from '@nu-art/thunderstorm-frontend/index';
+import { ResolvableContent } from '@nu-art/ts-common';
+import { PermissionKey_FE } from '../PermissionKey_FE.js';
+type Modes<T extends string = 'view' | 'edit'> = {
+    [key in T]: ResolvableContent<React.ReactNode | undefined>;
+};
+type Props<T extends string = 'view' | 'edit'> = {
+    mode: T;
+    modes: Modes<T>;
+};
+type State<T extends string = 'view' | 'edit'> = {
+    mode: T;
+    modes: Modes<T>;
+};
+export declare const permissionsGuardedRenderer: (permissionKey: PermissionKey_FE, renderer: ResolvableContent<React.ReactNode>) => React.ReactNode;
+export declare class Component_SwitchViewV2 extends ComponentSync<Props, State> {
+    protected deriveStateFromProps(nextProps: Props, state: State): State<"view" | "edit">;
+    render(): React.ReactNode;
+}
+export {};

package/ui/Component_SwitchViewV2.js

@@ -0,0 +1,25 @@
+import { ComponentSync } from '@nu-art/thunderstorm-frontend/index';
+import { resolveContent } from '@nu-art/ts-common';
+import { AccessLevel } from '../modules/ModuleFE_PermissionsAssert.js';
+export const permissionsGuardedRenderer = (permissionKey, renderer) => {
+    const accessLevel = permissionKey.getAccessLevel();
+    if (accessLevel === AccessLevel.Undefined) {
+        console.log(`Data for permission key ${permissionKey.key} does not exist`);
+        return;
+    }
+    if (accessLevel < AccessLevel.HasAccess)
+        return;
+    return resolveContent(renderer);
+};
+export class Component_SwitchViewV2 extends ComponentSync {
+    // ######################## Lifecycle ########################
+    deriveStateFromProps(nextProps, state) {
+        state.mode = nextProps.mode;
+        state.modes = nextProps.modes;
+        return state;
+    }
+    // ######################## Render ########################
+    render() {
+        return resolveContent(this.state.modes[this.state.mode]);
+    }
+}

package/ui/PermissionsComponent.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { ComponentSync } from '@nu-art/thunderstorm-frontend/index';
+import { PermissionKey_FE } from '../PermissionKey_FE.js';
+export declare const RoutePermissions: (permissionKey: PermissionKey_FE<any>) => () => boolean;
+export type Props_PermissionComponent = React.PropsWithChildren<{
+    permissionKey: PermissionKey_FE;
+    loadingComponent?: React.ComponentType;
+    fallback?: React.ComponentType;
+}>;
+export declare class PermissionsComponent<P extends Props_PermissionComponent = Props_PermissionComponent, S extends {} = {}> extends ComponentSync<P, S> {
+    static defaultProps: {
+        modules: import("@nu-art/thunderstorm-frontend/index").ModuleFE_AppConfig_Class[];
+    };
+    shouldComponentUpdate(nextProps: Readonly<P>, nextState: Readonly<S>, nextContext: any): boolean;
+    protected renderLoader: () => import("react/jsx-runtime").JSX.Element;
+    protected renderWaitingOnPermissions: () => import("react/jsx-runtime").JSX.Element | null;
+    protected renderPermitted: () => import("react/jsx-runtime").JSX.Element;
+    protected renderFallback: () => import("react/jsx-runtime").JSX.Element | null;
+    private renderImpl;
+    render(): import("react/jsx-runtime").JSX.Element;
+}

package/ui/PermissionsComponent.js

@@ -0,0 +1,42 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { AwaitModules, ComponentSync, ModuleFE_AppConfig } from '@nu-art/thunderstorm-frontend/index';
+import { AccessLevel } from '../modules/ModuleFE_PermissionsAssert.js';
+export const RoutePermissions = (permissionKey) => () => permissionKey.getAccessLevel() === AccessLevel.HasAccess;
+export class PermissionsComponent extends ComponentSync {
+    // ######################## Static ########################
+    static defaultProps = {
+        modules: [ModuleFE_AppConfig]
+    };
+    // ######################## Lifecycle ########################
+    shouldComponentUpdate(nextProps, nextState, nextContext) {
+        return true;
+    }
+    // ######################## Render ########################
+    renderLoader = () => {
+        return _jsx(_Fragment, {});
+    };
+    renderWaitingOnPermissions = () => {
+        const Loader = this.props.loadingComponent;
+        return Loader ? _jsx(Loader, {}) : null;
+    };
+    renderPermitted = () => {
+        return _jsx(_Fragment, { children: this.props.children });
+    };
+    renderFallback = () => {
+        const Fallback = this.props.fallback;
+        if (Fallback)
+            return _jsx(Fallback, {});
+        return null;
+    };
+    renderImpl = () => {
+        const permitted = this.props.permissionKey.getAccessLevel();
+        if (permitted === AccessLevel.Undefined)
+            return this.renderWaitingOnPermissions();
+        if (permitted === AccessLevel.HasAccess)
+            return this.renderPermitted();
+        return this.renderFallback();
+    };
+    render() {
+        return _jsx(AwaitModules, { modules: [ModuleFE_AppConfig], children: this.renderImpl() });
+    }
+}