@acorex-platform/module-application-management-client 0.0.18 → 0.0.21

package/fesm2022/acorex-platform-module-application-management-client-features-editor.component-B5yrn7eX.mjs

@@ -0,0 +1,584 @@
+import * as i0 from '@angular/core';
+import { inject, input, output, signal, computed, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i2 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { AXFormModule } from '@acorex/components/form';
+import * as i2$1 from '@acorex/components/check-box';
+import { AXCheckBoxModule } from '@acorex/components/check-box';
+import { AXLabelModule } from '@acorex/components/label';
+import * as i6 from '@acorex/core/translation';
+import { AXTranslationService, AXTranslationModule } from '@acorex/core/translation';
+import { AXTooltipModule } from '@acorex/components/tooltip';
+import * as i4 from '@acorex/components/search-box';
+import { AXSearchBoxModule } from '@acorex/components/search-box';
+import * as i5 from '@acorex/components/button-group';
+import { AXButtonGroupModule } from '@acorex/components/button-group';
+import { AXButtonModule } from '@acorex/components/button';
+import * as i3 from '@acorex/components/decorators';
+import { AXDecoratorModule } from '@acorex/components/decorators';
+import { AXP_MODULE_TYPE, AXP_MODULE_DOMAIN, AXPModuleManifestRegistry, resolveModuleType, resolveModuleDomain } from '@acorex-platform/framework-client/core';
+import { AXPSettingsService } from '@acorex-platform/framework-client/common';
+import { AXPPlatformScope } from '@acorex-platform/framework-shared/core';
+import * as i7 from '@acorex-platform/framework-client/layout/widget-core';
+import { AXPWidgetCoreModule } from '@acorex-platform/framework-client/layout/widget-core';
+import { AXPApplicationInfoSettings } from '@acorex-platform/module-application-management-client/contracts';
+
+//#endregion
+//#region ----- Constants -----
+const I18N = '@application-management:editions.modules-editor';
+const TYPE_ORDER = [
+    AXP_MODULE_TYPE.platform,
+    AXP_MODULE_TYPE.domain,
+    AXP_MODULE_TYPE.integration,
+];
+const DOMAIN_ORDER = [
+    AXP_MODULE_DOMAIN.platform,
+    AXP_MODULE_DOMAIN.humanCapital,
+    AXP_MODULE_DOMAIN.projectManagement,
+    AXP_MODULE_DOMAIN.assetMaintenance,
+    AXP_MODULE_DOMAIN.workplaceSafety,
+    AXP_MODULE_DOMAIN.assessmentLearning,
+    AXP_MODULE_DOMAIN.financeCommerce,
+    AXP_MODULE_DOMAIN.customerSupplier,
+    AXP_MODULE_DOMAIN.communication,
+    AXP_MODULE_DOMAIN.ai,
+    AXP_MODULE_DOMAIN.contentDocuments,
+    AXP_MODULE_DOMAIN.data,
+    AXP_MODULE_DOMAIN.operations,
+    AXP_MODULE_DOMAIN.weather,
+    AXP_MODULE_DOMAIN.sourceControl,
+    AXP_MODULE_DOMAIN.general,
+];
+//#endregion
+//#region ----- Features Editor Component -----
+class AXPFeaturesEditorComponent {
+    constructor() {
+        //#region ----- Services & Dependencies -----
+        this.manifestRegistry = inject(AXPModuleManifestRegistry);
+        this.translationService = inject(AXTranslationService);
+        this.settingsService = inject(AXPSettingsService);
+        //#endregion
+        //#region ----- Inputs / Outputs -----
+        /** Initial value: { modules: string[], features: Record<string, any> } */
+        this.initialValue = input({}, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "initialValue" }] : /* istanbul ignore next */ []));
+        /** Whether the editor is in read-only mode */
+        this.readOnly = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "readOnly" }] : /* istanbul ignore next */ []));
+        /** Event emitted when modules/features selection/values change */
+        this.valueChanged = output();
+        //#endregion
+        //#region ----- State Signals -----
+        this.i18n = I18N;
+        this.searchTerm = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []));
+        this.viewMode = signal('type', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "viewMode" }] : /* istanbul ignore next */ []));
+        /** All available module manifests with translated titles */
+        this.allModules = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "allModules" }] : /* istanbul ignore next */ []));
+        /** Selected module names */
+        this.selectedModules = signal(new Set(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedModules" }] : /* istanbul ignore next */ []));
+        /** Expanded module names */
+        this.expandedModules = signal(new Set(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "expandedModules" }] : /* istanbul ignore next */ []));
+        /** Expanded feature full names */
+        this.expandedFeatures = signal(new Set(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "expandedFeatures" }] : /* istanbul ignore next */ []));
+        /** Map of feature values: Record<featureName, featureValue> */
+        this.featureValues = signal({}, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "featureValues" }] : /* istanbul ignore next */ []));
+        /** Cache for widget nodes to prevent re-creation and blinking */
+        this.widgetNodeCache = new Map();
+        /** Cache for feature data to prevent re-computation */
+        this.moduleFeaturesCache = new Map();
+        /** Set of modules that are currently loading features */
+        this.loadingFeatures = signal(new Set(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "loadingFeatures" }] : /* istanbul ignore next */ []));
+        /** Signal to trigger change detection when features are loaded */
+        this.featuresLoaded = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "featuresLoaded" }] : /* istanbul ignore next */ []));
+        //#endregion
+        //#region ----- Computed Properties -----
+        /** Required module names (always enabled, cannot be disabled) */
+        this.requiredModules = computed(() => {
+            return new Set(this.allModules().filter((m) => m.required === true).map((m) => m.name));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "requiredModules" }] : /* istanbul ignore next */ []));
+        /** Modules that are dependencies of selected modules (auto-selected and disabled) */
+        this.dependencyModules = computed(() => {
+            const selected = this.selectedModules();
+            const allManifests = this.manifestRegistry.getAll();
+            const dependencySet = new Set();
+            for (const manifest of allManifests) {
+                if (selected.has(manifest.name) && manifest.dependencies) {
+                    for (const dep of manifest.dependencies) {
+                        if (!dep.includes('.')) {
+                            dependencySet.add(dep);
+                        }
+                    }
+                }
+            }
+            return dependencySet;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dependencyModules" }] : /* istanbul ignore next */ []));
+        /** Always-available (required) modules matching the current search */
+        this.alwaysAvailableModules = computed(() => {
+            return this.sortModules(this.allModules().filter((m) => m.required === true && this.matchesSearch(m)));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "alwaysAvailableModules" }] : /* istanbul ignore next */ []));
+        /** Grouped non-required modules for the active view mode */
+        this.moduleGroups = computed(() => {
+            const modules = this.sortModules(this.allModules().filter((m) => m.required !== true && this.matchesSearch(m)));
+            if (this.viewMode() === 'type') {
+                return this.groupByType(modules);
+            }
+            return this.groupByDomain(modules);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "moduleGroups" }] : /* istanbul ignore next */ []));
+        this.hasVisibleModules = computed(() => {
+            return this.alwaysAvailableModules().length > 0 || this.moduleGroups().some((g) => g.modules.length > 0);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasVisibleModules" }] : /* istanbul ignore next */ []));
+    }
+    //#endregion
+    //#region ----- Lifecycle -----
+    ngOnInit() {
+        // Sync paint only — never await settings/i18n/initialize on the critical path
+        // (settings.get can hang on session ready and previously left the UI stuck).
+        const manifests = this.manifestRegistry.getAll();
+        this.allModules.set(manifests.map((manifest) => ({
+            ...manifest,
+            translatedTitle: manifest.title,
+            translatedDescription: manifest.description || '',
+            featureSearchText: '',
+        })));
+        const initialValue = this.initialValue();
+        const initialModules = new Set(initialValue.modules || []);
+        if (initialValue.features) {
+            for (const featureKey of Object.keys(initialValue.features)) {
+                const [moduleName] = featureKey.split(':');
+                if (moduleName) {
+                    initialModules.add(moduleName);
+                }
+            }
+        }
+        this.requiredModules().forEach((moduleName) => {
+            initialModules.add(moduleName);
+        });
+        this.ensureDependencies(initialModules);
+        this.selectedModules.set(initialModules);
+        if (initialValue.features) {
+            this.featureValues.set(initialValue.features);
+        }
+        this.widgetNodeCache.clear();
+        this.moduleFeaturesCache.clear();
+        // Prefer sync cache — scoped get() can block on session/scope load.
+        const cachedViewMode = this.settingsService.peekCached(AXPApplicationInfoSettings.EditionModulesViewMode);
+        if (cachedViewMode === 'type' || cachedViewMode === 'domain') {
+            this.viewMode.set(cachedViewMode);
+        }
+        void this.hydrateAsync();
+    }
+    async hydrateAsync() {
+        try {
+            if (this.allModules().length === 0) {
+                await this.manifestRegistry.initialize();
+                const manifests = this.manifestRegistry.getAll();
+                this.allModules.set(manifests.map((manifest) => ({
+                    ...manifest,
+                    translatedTitle: manifest.title,
+                    translatedDescription: manifest.description || '',
+                    featureSearchText: '',
+                })));
+                this.requiredModules().forEach((moduleName) => {
+                    const selected = new Set(this.selectedModules());
+                    selected.add(moduleName);
+                    this.ensureDependencies(selected);
+                    this.selectedModules.set(selected);
+                });
+            }
+            const modules = this.allModules();
+            const enriched = await Promise.all(modules.map(async (module) => {
+                let translatedTitle = module.title;
+                try {
+                    translatedTitle =
+                        (await this.translationService.translateAsync(module.title)) || module.title;
+                }
+                catch {
+                    // keep raw title
+                }
+                return {
+                    ...module,
+                    translatedTitle,
+                };
+            }));
+            this.allModules.set(enriched);
+        }
+        catch (error) {
+            console.warn('Features editor background hydrate failed', error);
+        }
+    }
+    //#endregion
+    //#region ----- Grouping & Search -----
+    matchesSearch(module) {
+        const term = String(this.searchTerm() ?? '')
+            .trim()
+            .toLowerCase();
+        if (!term) {
+            return true;
+        }
+        const haystack = [
+            module.translatedTitle,
+            module.translatedDescription,
+            module.title,
+            module.description,
+            module.name,
+            module.featureSearchText,
+        ]
+            .filter(Boolean)
+            .join(' ')
+            .toLowerCase();
+        return haystack.includes(term);
+    }
+    sortModules(modules) {
+        return [...modules].sort((a, b) => {
+            const titleA = a.translatedTitle || a.title || '';
+            const titleB = b.translatedTitle || b.title || '';
+            return titleA.localeCompare(titleB, undefined, { sensitivity: 'base' });
+        });
+    }
+    groupByType(modules) {
+        const buckets = new Map();
+        for (const type of TYPE_ORDER) {
+            buckets.set(type, []);
+        }
+        for (const module of modules) {
+            const type = resolveModuleType(module);
+            const list = buckets.get(type) ?? [];
+            list.push(module);
+            buckets.set(type, list);
+        }
+        return TYPE_ORDER.filter((type) => (buckets.get(type)?.length ?? 0) > 0).map((type) => ({
+            id: `type:${type}`,
+            titleKey: `${I18N}.types.${type}`,
+            modules: buckets.get(type) ?? [],
+        }));
+    }
+    groupByDomain(modules) {
+        const buckets = new Map();
+        for (const module of modules) {
+            const domain = resolveModuleDomain(module);
+            const list = buckets.get(domain) ?? [];
+            list.push(module);
+            buckets.set(domain, list);
+        }
+        const known = DOMAIN_ORDER.filter((domain) => (buckets.get(domain)?.length ?? 0) > 0);
+        const extra = [...buckets.keys()]
+            .filter((domain) => !DOMAIN_ORDER.includes(domain))
+            .sort((a, b) => a.localeCompare(b));
+        return [...known, ...extra].map((domain) => ({
+            id: `domain:${domain}`,
+            titleKey: `${I18N}.domains.${domain}`,
+            modules: buckets.get(domain) ?? [],
+        }));
+    }
+    //#endregion
+    //#region ----- Public API -----
+    getValue() {
+        return {
+            modules: Array.from(this.selectedModules()),
+            features: this.featureValues(),
+        };
+    }
+    setValue(value) {
+        if (value.modules) {
+            this.selectedModules.set(new Set(value.modules));
+        }
+        if (value.features) {
+            this.featureValues.set(value.features);
+        }
+        this.emitValueChanged();
+    }
+    //#endregion
+    //#region ----- Data Loading -----
+    createWidgetNode(definition, fullName) {
+        if (!definition.interface) {
+            return null;
+        }
+        const currentValue = this.featureValues()[fullName];
+        const defaultValue = currentValue !== undefined && currentValue !== null ? currentValue : definition.defaultValue;
+        let widgetNode = this.widgetNodeCache.get(fullName);
+        if (!widgetNode) {
+            widgetNode = {
+                type: definition.interface.type,
+                name: fullName,
+                defaultValue: defaultValue,
+                options: definition.interface.options || {},
+            };
+            this.widgetNodeCache.set(fullName, widgetNode);
+        }
+        else if (widgetNode.defaultValue !== defaultValue) {
+            widgetNode.defaultValue = defaultValue;
+        }
+        return widgetNode;
+    }
+    emitValueChanged() {
+        this.valueChanged.emit(this.getValue());
+    }
+    ensureDependencies(modules) {
+        const allManifests = this.manifestRegistry.getAll();
+        let changed = true;
+        while (changed) {
+            changed = false;
+            for (const manifest of allManifests) {
+                if (modules.has(manifest.name) && manifest.dependencies) {
+                    for (const dep of manifest.dependencies) {
+                        if (!dep.includes('.') && !modules.has(dep)) {
+                            modules.add(dep);
+                            changed = true;
+                        }
+                    }
+                }
+            }
+        }
+    }
+    getModuleFeatures(module) {
+        this.featuresLoaded();
+        const moduleFeatures = this.manifestRegistry.getModuleFeatures(module.name);
+        if (moduleFeatures.length === 0) {
+            return [];
+        }
+        const cacheKey = module.name;
+        const currentValues = this.featureValues();
+        const cached = this.moduleFeaturesCache.get(cacheKey);
+        if (cached) {
+            cached.forEach((feature) => {
+                const currentValue = currentValues[feature.fullName];
+                feature.isEnabled = currentValue !== undefined && currentValue !== null;
+                if (feature.widgetNode) {
+                    const newDefaultValue = currentValue !== undefined && currentValue !== null
+                        ? currentValue
+                        : feature.definition.defaultValue;
+                    if (feature.widgetNode.defaultValue !== newDefaultValue) {
+                        feature.widgetNode.defaultValue = newDefaultValue;
+                    }
+                }
+            });
+            return cached;
+        }
+        const features = moduleFeatures.map((featureDef) => {
+            const fullName = featureDef.name;
+            const shortKey = featureDef.key;
+            const currentValue = currentValues[fullName];
+            const isEnabled = currentValue !== undefined && currentValue !== null;
+            const widgetNode = this.createWidgetNode(featureDef, fullName);
+            return {
+                key: shortKey,
+                fullName,
+                definition: featureDef,
+                isEnabled,
+                widgetNode,
+            };
+        });
+        this.moduleFeaturesCache.set(cacheKey, features);
+        return features;
+    }
+    async loadModuleFeatures(module) {
+        try {
+            this.moduleFeaturesCache.delete(module.name);
+            this.featuresLoaded.update((v) => v + 1);
+        }
+        finally {
+            this.loadingFeatures.update((set) => {
+                const newSet = new Set(set);
+                newSet.delete(module.name);
+                return newSet;
+            });
+        }
+    }
+    //#endregion
+    //#region ----- Event Handlers -----
+    onSearchTermChange(value) {
+        this.searchTerm.set(String(value ?? ''));
+    }
+    onViewModeChange(mode) {
+        if (this.viewMode() === mode) {
+            return;
+        }
+        this.viewMode.set(mode);
+        // Fire-and-forget; do not block UI if scope load is slow.
+        void this.settingsService
+            .scope(AXPPlatformScope.User)
+            .set(AXPApplicationInfoSettings.EditionModulesViewMode, mode)
+            .catch((error) => {
+            console.warn('Failed to persist edition modules view mode', error);
+        });
+    }
+    toggleModule(module) {
+        const moduleName = module.name;
+        const expanded = new Set(this.expandedModules());
+        if (expanded.has(moduleName)) {
+            expanded.delete(moduleName);
+        }
+        else {
+            expanded.add(moduleName);
+            if (!this.loadingFeatures().has(moduleName)) {
+                this.loadingFeatures.update((set) => new Set(set).add(moduleName));
+                this.loadModuleFeatures(module).catch((error) => {
+                    console.error(`Failed to refresh features for module ${moduleName}:`, error);
+                });
+            }
+        }
+        this.expandedModules.set(expanded);
+    }
+    toggleFeature(fullName) {
+        const expanded = new Set(this.expandedFeatures());
+        if (expanded.has(fullName)) {
+            expanded.delete(fullName);
+        }
+        else {
+            expanded.add(fullName);
+        }
+        this.expandedFeatures.set(expanded);
+    }
+    isModuleExpanded(moduleName) {
+        return this.expandedModules().has(moduleName);
+    }
+    isFeatureExpanded(fullName) {
+        return this.expandedFeatures().has(fullName);
+    }
+    isModuleSelected(moduleName) {
+        if (this.selectedModules().has(moduleName)) {
+            return true;
+        }
+        const featureValue = this.featureValues()[moduleName];
+        return featureValue !== undefined && featureValue !== null;
+    }
+    isModuleRequired(moduleName) {
+        return this.requiredModules().has(moduleName);
+    }
+    isModuleDependency(moduleName) {
+        return this.dependencyModules().has(moduleName);
+    }
+    isModuleDisabled(moduleName) {
+        return this.isModuleRequired(moduleName) || this.isModuleDependency(moduleName);
+    }
+    canEnableModule(moduleName) {
+        const manifest = this.manifestRegistry.get(moduleName);
+        if (!manifest?.dependencies || manifest.dependencies.length === 0) {
+            return true;
+        }
+        const selected = this.selectedModules();
+        const moduleDeps = manifest.dependencies.filter((dep) => !dep.includes('.'));
+        return moduleDeps.every((dep) => selected.has(dep));
+    }
+    getMissingDependencies(moduleName) {
+        const manifest = this.manifestRegistry.get(moduleName);
+        if (!manifest?.dependencies || manifest.dependencies.length === 0) {
+            return [];
+        }
+        const selected = this.selectedModules();
+        const moduleDeps = manifest.dependencies.filter((dep) => !dep.includes('.'));
+        return moduleDeps.filter((dep) => !selected.has(dep));
+    }
+    getDependentModules(moduleName) {
+        const allManifests = this.manifestRegistry.getAll();
+        return allManifests.filter((m) => m.dependencies?.includes(moduleName)).map((m) => m.name);
+    }
+    getModuleIcon(module) {
+        return module.icon || 'fa-light fa-cube';
+    }
+    hasModuleFeatures(module) {
+        return this.manifestRegistry.getModuleFeatures(module.name).length > 0;
+    }
+    onModuleToggle(module, event) {
+        if (this.readOnly() || this.isModuleDisabled(module.name)) {
+            return;
+        }
+        const selectedModules = new Set(this.selectedModules());
+        const currentValues = { ...this.featureValues() };
+        if (event.value) {
+            selectedModules.add(module.name);
+            currentValues[module.name] = true;
+            this.ensureDependencies(selectedModules);
+            if (!this.loadingFeatures().has(module.name)) {
+                setTimeout(() => {
+                    this.loadingFeatures.update((set) => new Set(set).add(module.name));
+                    this.loadModuleFeatures(module).catch((error) => {
+                        console.error(`Failed to refresh features for module ${module.name}:`, error);
+                        this.loadingFeatures.update((set) => {
+                            const newSet = new Set(set);
+                            newSet.delete(module.name);
+                            return newSet;
+                        });
+                    });
+                }, 0);
+            }
+        }
+        else {
+            const dependentModules = this.getDependentModules(module.name);
+            const hasSelectedDependents = dependentModules.some((dep) => selectedModules.has(dep));
+            if (hasSelectedDependents) {
+                return;
+            }
+            selectedModules.delete(module.name);
+            delete currentValues[module.name];
+        }
+        this.selectedModules.set(selectedModules);
+        this.featureValues.set(currentValues);
+        this.emitValueChanged();
+    }
+    onFeatureToggle(feature, event) {
+        if (this.readOnly()) {
+            return;
+        }
+        const currentValues = { ...this.featureValues() };
+        if (event.value) {
+            if (currentValues[feature.fullName] === undefined || currentValues[feature.fullName] === null) {
+                currentValues[feature.fullName] = feature.definition.defaultValue;
+            }
+        }
+        else {
+            delete currentValues[feature.fullName];
+        }
+        this.featureValues.set(currentValues);
+        this.emitValueChanged();
+    }
+    onFeatureValueChange(featureFullName, value) {
+        if (this.readOnly()) {
+            return;
+        }
+        const currentValues = { ...this.featureValues() };
+        currentValues[featureFullName] = value;
+        this.featureValues.set(currentValues);
+        this.emitValueChanged();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPFeaturesEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPFeaturesEditorComponent, isStandalone: true, selector: "axm-features-editor", inputs: { initialValue: { classPropertyName: "initialValue", publicName: "initialValue", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChanged: "valueChanged" }, host: { classAttribute: "axm-features-editor flex flex-col w-full min-h-0" }, ngImport: i0, template: "<!-- ----- Toolbar: search + view mode ----- -->\n<div class=\"axm-features-editor__toolbar\">\n  <ax-search-box\n    class=\"flex-1 min-w-[12rem]\"\n    look=\"outline\"\n    [placeholder]=\"(i18n + '.search-placeholder' | translate | async) || ''\"\n    [ngModel]=\"searchTerm()\"\n    [delayTime]=\"300\"\n    (ngModelChange)=\"onSearchTermChange($event)\">\n    <ax-clear-button></ax-clear-button>\n  </ax-search-box>\n\n  <ax-button-group selection=\"single\" look=\"outline\" class=\"shrink-0\">\n    <ax-button-group-item\n      [text]=\"(i18n + '.view-mode.type' | translate | async) ?? ''\"\n      [selected]=\"viewMode() === 'type'\"\n      [data]=\"'type'\"\n      (onClick)=\"onViewModeChange('type')\">\n    </ax-button-group-item>\n    <ax-button-group-item\n      [text]=\"(i18n + '.view-mode.domain' | translate | async) ?? ''\"\n      [selected]=\"viewMode() === 'domain'\"\n      [data]=\"'domain'\"\n      (onClick)=\"onViewModeChange('domain')\">\n    </ax-button-group-item>\n  </ax-button-group>\n</div>\n\n<!-- ----- Module groups list ----- -->\n<div class=\"axm-features-editor__list overflow-auto\">\n  <!--->\n  <!-- ----- Empty search / filter result ----- -->\n  @if (!hasVisibleModules()) {\n    <div class=\"text-sm text-muted py-6 text-center\">\n      {{ i18n + '.empty' | translate | async }}\n    </div>\n  }\n  <!-- ----- Grouped modules with Always Available pinned first ----- -->\n  @else {\n    <!--->\n    <!-- ----- Always available (required) modules ----- -->\n    @if (alwaysAvailableModules().length > 0) {\n      <section class=\"axm-features-editor__group\">\n        <div class=\"axm-features-editor__group-title\">\n          {{ i18n + '.always-available' | translate | async }}\n        </div>\n        <div class=\"flex flex-col gap-2\">\n          @for (module of alwaysAvailableModules(); track module.name) {\n            <ng-container *ngTemplateOutlet=\"moduleTemplate; context: { $implicit: module, level: 0 }\">\n            </ng-container>\n          }\n        </div>\n      </section>\n    }\n\n    @for (group of moduleGroups(); track group.id) {\n      <section class=\"axm-features-editor__group\">\n        <div class=\"axm-features-editor__group-title\">\n          {{ group.titleKey | translate | async }}\n        </div>\n        <div class=\"flex flex-col gap-2\">\n          @for (module of group.modules; track module.name) {\n            <ng-container *ngTemplateOutlet=\"moduleTemplate; context: { $implicit: module, level: 0 }\">\n            </ng-container>\n          }\n        </div>\n      </section>\n    }\n  }\n</div>\n\n<!-- ----- Module row template ----- -->\n<ng-template #moduleTemplate let-module let-level=\"level\">\n  <div class=\"flex flex-col\">\n    <!-- ----- Module checkbox row ----- -->\n    <div class=\"flex items-center gap-3 rounded hover:bg-surface-lowest\" [style.padding-left.px]=\"level * 32\">\n      <span class=\"w-4\"></span>\n\n      <ax-check-box\n        [ngModel]=\"isModuleSelected(module.name)\"\n        [readonly]=\"readOnly() || isModuleDisabled(module.name)\"\n        [class.opacity-50]=\"isModuleDependency(module.name) && !isModuleRequired(module.name)\"\n        (onValueChanged)=\"onModuleToggle(module, $event)\"\n        (click)=\"$event.stopPropagation()\">\n      </ax-check-box>\n\n      <i [class]=\"getModuleIcon(module) + ' text-primary fa-fw'\"></i>\n\n      <span class=\"flex-1 font-semibold\">{{ module.title | translate | async }}</span>\n\n      <!--->\n      <!-- ----- Required badge ----- -->\n      @if (isModuleRequired(module.name)) {\n        <span class=\"text-xs text-primary font-medium\">\n          ({{ i18n + '.badges.required' | translate | async }})\n        </span>\n      }\n\n      <!--->\n      <!-- ----- Dependency badge ----- -->\n      @if (isModuleDependency(module.name) && !isModuleRequired(module.name)) {\n        <span class=\"text-xs text-secondary font-medium\">\n          ({{ i18n + '.badges.dependency' | translate | async }})\n        </span>\n      }\n    </div>\n\n    <!--->\n    <!-- ----- Nested features when module selected ----- -->\n    @if (isModuleSelected(module.name) && hasModuleFeatures(module)) {\n      <div class=\"flex flex-col gap-3 py-4 px-3\">\n        @for (feature of getModuleFeatures(module); track feature.fullName) {\n          <ng-container\n            *ngTemplateOutlet=\"featureTemplate; context: { $implicit: feature, module: module, level: level + 1 }\">\n          </ng-container>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n\n<!-- ----- Feature row template ----- -->\n<ng-template #featureTemplate let-feature let-module=\"module\" let-level=\"level\">\n  <div class=\"flex flex-col\">\n    <div class=\"flex items-start gap-3 rounded hover:bg-surface-lowest\" [style.padding-left.px]=\"level * 32\">\n      <span class=\"w-4\"></span>\n\n      <ax-check-box\n        [ngModel]=\"feature.isEnabled\"\n        [readonly]=\"readOnly()\"\n        (onValueChanged)=\"onFeatureToggle(feature, $event)\"\n        (click)=\"$event.stopPropagation()\">\n      </ax-check-box>\n\n      <div class=\"flex flex-col flex-1 gap-1.5\">\n        <div class=\"flex items-center gap-2\">\n          <i class=\"fa-light fa-toggle-on text-secondary\"></i>\n          <span class=\"font-semibold\">{{ feature.definition.title | translate | async }}</span>\n        </div>\n\n        <!--->\n        <!-- ----- Feature description ----- -->\n        @if (feature.definition.description) {\n          <div class=\"text-sm text-muted ms-6 leading-relaxed\">\n            {{ feature.definition.description | translate | async }}\n          </div>\n        }\n\n        <!--->\n        <!-- ----- Feature config widget ----- -->\n        @if (feature.isEnabled && feature.widgetNode) {\n          <div class=\"mt-3 ms-6 ax-sm\">\n            <ng-container\n              axp-widget-renderer\n              [node]=\"feature.widgetNode\"\n              [mode]=\"readOnly() ? 'view' : 'edit'\"\n              (onValueChanged)=\"onFeatureValueChange(feature.fullName, $event.widget.getValue())\">\n            </ng-container>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: ["@layer properties;.axm-features-editor{display:flex;min-height:0px;width:100%;flex-direction:column;background-color:transparent}.axm-features-editor .axm-features-editor__toolbar{position:sticky;top:0;z-index:1;display:flex;flex-wrap:wrap;align-items:center;gap:calc(var(--spacing, .25rem) * 3);background-color:transparent;padding-inline:0px;padding-top:0;padding-bottom:calc(var(--spacing, .25rem) * 3)}.axm-features-editor .axm-features-editor__list{display:flex;min-height:0px;flex-direction:column;gap:calc(var(--spacing, .25rem) * 5);background-color:transparent;padding-inline:0px;padding-block:var(--spacing, .25rem)}.axm-features-editor .axm-features-editor__group{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2)}.axm-features-editor .axm-features-editor__group+.axm-features-editor__group{border-top-style:var(--tw-border-style);border-top-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));padding-top:calc(var(--spacing, .25rem) * 4)}.axm-features-editor .axm-features-editor__group-title{padding-inline:var(--spacing, .25rem);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);color:rgba(var(--ax-sys-color-text-default));text-transform:uppercase}@supports (color: color-mix(in lab,red,red)){.axm-features-editor .axm-features-editor__group-title{color:color-mix(in oklab,rgba(var(--ax-sys-color-text-default)) 80%,transparent)}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-tracking{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-font-weight: initial;--tw-tracking: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "component", type: i2$1.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "isLoading", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i4.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXButtonGroupModule }, { kind: "component", type: i5.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "fitParent", "color", "look", "class", "selection"], outputs: ["onBlur", "onFocus", "disabledChange", "colorChange", "lookChange", "onClick", "selectionChange", "selectedButtonChange"] }, { kind: "component", type: i5.AXButtonGroupItemComponent, selector: "ax-button-group-item", inputs: ["disabled", "color", "text", "class", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange", "classChange"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "directive", type: i7.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPFeaturesEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axm-features-editor', imports: [
+                        CommonModule,
+                        FormsModule,
+                        AXFormModule,
+                        AXCheckBoxModule,
+                        AXLabelModule,
+                        AXTranslationModule,
+                        AXTooltipModule,
+                        AXSearchBoxModule,
+                        AXButtonGroupModule,
+                        AXButtonModule,
+                        AXDecoratorModule,
+                        AXPWidgetCoreModule,
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Eager, host: {
+                        class: 'axm-features-editor flex flex-col w-full min-h-0',
+                    }, template: "<!-- ----- Toolbar: search + view mode ----- -->\n<div class=\"axm-features-editor__toolbar\">\n  <ax-search-box\n    class=\"flex-1 min-w-[12rem]\"\n    look=\"outline\"\n    [placeholder]=\"(i18n + '.search-placeholder' | translate | async) || ''\"\n    [ngModel]=\"searchTerm()\"\n    [delayTime]=\"300\"\n    (ngModelChange)=\"onSearchTermChange($event)\">\n    <ax-clear-button></ax-clear-button>\n  </ax-search-box>\n\n  <ax-button-group selection=\"single\" look=\"outline\" class=\"shrink-0\">\n    <ax-button-group-item\n      [text]=\"(i18n + '.view-mode.type' | translate | async) ?? ''\"\n      [selected]=\"viewMode() === 'type'\"\n      [data]=\"'type'\"\n      (onClick)=\"onViewModeChange('type')\">\n    </ax-button-group-item>\n    <ax-button-group-item\n      [text]=\"(i18n + '.view-mode.domain' | translate | async) ?? ''\"\n      [selected]=\"viewMode() === 'domain'\"\n      [data]=\"'domain'\"\n      (onClick)=\"onViewModeChange('domain')\">\n    </ax-button-group-item>\n  </ax-button-group>\n</div>\n\n<!-- ----- Module groups list ----- -->\n<div class=\"axm-features-editor__list overflow-auto\">\n  <!--->\n  <!-- ----- Empty search / filter result ----- -->\n  @if (!hasVisibleModules()) {\n    <div class=\"text-sm text-muted py-6 text-center\">\n      {{ i18n + '.empty' | translate | async }}\n    </div>\n  }\n  <!-- ----- Grouped modules with Always Available pinned first ----- -->\n  @else {\n    <!--->\n    <!-- ----- Always available (required) modules ----- -->\n    @if (alwaysAvailableModules().length > 0) {\n      <section class=\"axm-features-editor__group\">\n        <div class=\"axm-features-editor__group-title\">\n          {{ i18n + '.always-available' | translate | async }}\n        </div>\n        <div class=\"flex flex-col gap-2\">\n          @for (module of alwaysAvailableModules(); track module.name) {\n            <ng-container *ngTemplateOutlet=\"moduleTemplate; context: { $implicit: module, level: 0 }\">\n            </ng-container>\n          }\n        </div>\n      </section>\n    }\n\n    @for (group of moduleGroups(); track group.id) {\n      <section class=\"axm-features-editor__group\">\n        <div class=\"axm-features-editor__group-title\">\n          {{ group.titleKey | translate | async }}\n        </div>\n        <div class=\"flex flex-col gap-2\">\n          @for (module of group.modules; track module.name) {\n            <ng-container *ngTemplateOutlet=\"moduleTemplate; context: { $implicit: module, level: 0 }\">\n            </ng-container>\n          }\n        </div>\n      </section>\n    }\n  }\n</div>\n\n<!-- ----- Module row template ----- -->\n<ng-template #moduleTemplate let-module let-level=\"level\">\n  <div class=\"flex flex-col\">\n    <!-- ----- Module checkbox row ----- -->\n    <div class=\"flex items-center gap-3 rounded hover:bg-surface-lowest\" [style.padding-left.px]=\"level * 32\">\n      <span class=\"w-4\"></span>\n\n      <ax-check-box\n        [ngModel]=\"isModuleSelected(module.name)\"\n        [readonly]=\"readOnly() || isModuleDisabled(module.name)\"\n        [class.opacity-50]=\"isModuleDependency(module.name) && !isModuleRequired(module.name)\"\n        (onValueChanged)=\"onModuleToggle(module, $event)\"\n        (click)=\"$event.stopPropagation()\">\n      </ax-check-box>\n\n      <i [class]=\"getModuleIcon(module) + ' text-primary fa-fw'\"></i>\n\n      <span class=\"flex-1 font-semibold\">{{ module.title | translate | async }}</span>\n\n      <!--->\n      <!-- ----- Required badge ----- -->\n      @if (isModuleRequired(module.name)) {\n        <span class=\"text-xs text-primary font-medium\">\n          ({{ i18n + '.badges.required' | translate | async }})\n        </span>\n      }\n\n      <!--->\n      <!-- ----- Dependency badge ----- -->\n      @if (isModuleDependency(module.name) && !isModuleRequired(module.name)) {\n        <span class=\"text-xs text-secondary font-medium\">\n          ({{ i18n + '.badges.dependency' | translate | async }})\n        </span>\n      }\n    </div>\n\n    <!--->\n    <!-- ----- Nested features when module selected ----- -->\n    @if (isModuleSelected(module.name) && hasModuleFeatures(module)) {\n      <div class=\"flex flex-col gap-3 py-4 px-3\">\n        @for (feature of getModuleFeatures(module); track feature.fullName) {\n          <ng-container\n            *ngTemplateOutlet=\"featureTemplate; context: { $implicit: feature, module: module, level: level + 1 }\">\n          </ng-container>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n\n<!-- ----- Feature row template ----- -->\n<ng-template #featureTemplate let-feature let-module=\"module\" let-level=\"level\">\n  <div class=\"flex flex-col\">\n    <div class=\"flex items-start gap-3 rounded hover:bg-surface-lowest\" [style.padding-left.px]=\"level * 32\">\n      <span class=\"w-4\"></span>\n\n      <ax-check-box\n        [ngModel]=\"feature.isEnabled\"\n        [readonly]=\"readOnly()\"\n        (onValueChanged)=\"onFeatureToggle(feature, $event)\"\n        (click)=\"$event.stopPropagation()\">\n      </ax-check-box>\n\n      <div class=\"flex flex-col flex-1 gap-1.5\">\n        <div class=\"flex items-center gap-2\">\n          <i class=\"fa-light fa-toggle-on text-secondary\"></i>\n          <span class=\"font-semibold\">{{ feature.definition.title | translate | async }}</span>\n        </div>\n\n        <!--->\n        <!-- ----- Feature description ----- -->\n        @if (feature.definition.description) {\n          <div class=\"text-sm text-muted ms-6 leading-relaxed\">\n            {{ feature.definition.description | translate | async }}\n          </div>\n        }\n\n        <!--->\n        <!-- ----- Feature config widget ----- -->\n        @if (feature.isEnabled && feature.widgetNode) {\n          <div class=\"mt-3 ms-6 ax-sm\">\n            <ng-container\n              axp-widget-renderer\n              [node]=\"feature.widgetNode\"\n              [mode]=\"readOnly() ? 'view' : 'edit'\"\n              (onValueChanged)=\"onFeatureValueChange(feature.fullName, $event.widget.getValue())\">\n            </ng-container>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: ["@layer properties;.axm-features-editor{display:flex;min-height:0px;width:100%;flex-direction:column;background-color:transparent}.axm-features-editor .axm-features-editor__toolbar{position:sticky;top:0;z-index:1;display:flex;flex-wrap:wrap;align-items:center;gap:calc(var(--spacing, .25rem) * 3);background-color:transparent;padding-inline:0px;padding-top:0;padding-bottom:calc(var(--spacing, .25rem) * 3)}.axm-features-editor .axm-features-editor__list{display:flex;min-height:0px;flex-direction:column;gap:calc(var(--spacing, .25rem) * 5);background-color:transparent;padding-inline:0px;padding-block:var(--spacing, .25rem)}.axm-features-editor .axm-features-editor__group{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2)}.axm-features-editor .axm-features-editor__group+.axm-features-editor__group{border-top-style:var(--tw-border-style);border-top-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));padding-top:calc(var(--spacing, .25rem) * 4)}.axm-features-editor .axm-features-editor__group-title{padding-inline:var(--spacing, .25rem);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);color:rgba(var(--ax-sys-color-text-default));text-transform:uppercase}@supports (color: color-mix(in lab,red,red)){.axm-features-editor .axm-features-editor__group-title{color:color-mix(in oklab,rgba(var(--ax-sys-color-text-default)) 80%,transparent)}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-tracking{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-font-weight: initial;--tw-tracking: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { initialValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialValue", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], valueChanged: [{ type: i0.Output, args: ["valueChanged"] }] } });
+
+export { AXPFeaturesEditorComponent as A };
+//# sourceMappingURL=acorex-platform-module-application-management-client-features-editor.component-B5yrn7eX.mjs.map