import { AXBadgeModule } from '@acorex/components/badge';
import { AXBreadcrumbsModule } from '@acorex/components/breadcrumbs';
import * as i6 from '@acorex/components/button';
import { AXButtonModule } from '@acorex/components/button';
import * as i4 from '@acorex/components/decorators';
import { AXDecoratorModule } from '@acorex/components/decorators';
import { AXDropdownButtonModule } from '@acorex/components/dropdown-button';
import * as i8 from '@acorex/components/loading';
import { AXLoadingModule } from '@acorex/components/loading';
import * as i3 from '@acorex/components/search-box';
import { AXSearchBoxModule } from '@acorex/components/search-box';
import * as i7 from '@acorex/components/tabs';
import { AXTabsModule } from '@acorex/components/tabs';
import * as i5 from '@acorex/core/translation';
import { AXTranslationModule } from '@acorex/core/translation';
import { AXPThemeLayoutBlockComponent, AXPThemeLayoutListComponent, AXPThemeLayoutListItemComponent, AXPThemeLayoutToolbarComponent, AXPThemeLayoutHeaderComponent, AXPThemeLayoutStartSideComponent } from '@acorex/platform/layout/components';
import * as i1$1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { inject, effect, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
import * as i1 from '@angular/forms';
import { FormsModule } from '@angular/forms';
import * as i2 from '@angular/router';
import { ActivatedRoute, Router, NavigationEnd, RouterModule } from '@angular/router';
import { AXHighlightService, AXPHookService, resolvePlatformScopeName, resolvePlatformScopeKey } from '@acorex/platform/core';
import { AXPCommandService } from '@acorex/platform/runtime';
import { filter, startWith, firstValueFrom, take } from 'rxjs';
import { AXUnsubscriber } from '@acorex/core/utils';
import { AXPPageLayoutBaseComponent, AXPPageLayoutComponent, AXPPageLayoutBase } from '@acorex/platform/layout/views';
import { AXPSettingsViewModel } from './acorex-modules-settings-management.mjs';

class AXPSettingPageComponent extends AXPPageLayoutBaseComponent {
    constructor() {
        super(...arguments);
        this.vm = inject(AXPSettingsViewModel);
        this.activatedRoute = inject(ActivatedRoute);
        this.unsubscribe = inject(AXUnsubscriber);
        this.highlightService = inject(AXHighlightService);
        this.hooks = inject(AXPHookService);
        this.commandService = inject(AXPCommandService);
        this.router = inject(Router);
        this.#effect = effect(() => {
            if (!this.vm.isLoaded()) {
                return;
            }
            const expression = this.vm.searchExpression();
            const app = this.sessionService.application?.name;
            const scope = resolvePlatformScopeName(this.vm.scope());
            const group = this.vm.activateGroup()?.name;
            //
            if (this.vm.isSearching()) {
                this.router.navigate([app, 'settings', scope, group ?? ''], {
                    queryParams: { q: expression },
                });
                setTimeout(() => {
                    this.highlightService.highlight('#ax-settings', expression);
                }, 100);
                return;
            }
            this.router.navigate([app, 'settings', scope, group ?? '']);
            this.highlightService.clear();
        }, ...(ngDevMode ? [{ debugName: "#effect" }] : []));
    }
    #effect;
    async ngOnInit() {
        await super.ngOnInit();
        //
        this.router.events
            .pipe(this.unsubscribe.takeUntilDestroy, filter((event) => event instanceof NavigationEnd), startWith(null))
            .subscribe(async () => {
            await this.loadFromRoute();
        });
    }
    async loadFromRoute() {
        const snapshot = this.activatedRoute.snapshot;
        const routerScope = resolvePlatformScopeKey(snapshot.paramMap.get('scope')?.trim().toLowerCase());
        const vmScope = this.vm.scope();
        const query = snapshot.queryParamMap.get('q');
        //
        //
        if (vmScope != routerScope || !this.vm.isLoaded()) {
            await this.vm.load(routerScope);
        }
        this.vm.unloadActivateGroup();
        this.vm.clearSearch();
        //
        let group = await this.getGroupFromRoute();
        //
        if (!group && this.layoutService.isLarge() && !this.vm.isSearching()) {
            group = this.vm.groups()?.[0]?.name;
            if (group) {
                await this.router.navigate([group], { relativeTo: this.activatedRoute, replaceUrl: true });
            }
        }
        else if (group) {
            await this.vm.setActivateGroupByName(group);
            this.recompute();
        }
        if (query) {
            await this.vm.search(query);
            this.recompute();
        }
    }
    async getGroupFromRoute() {
        const snapshot = this.activatedRoute.snapshot;
        let group = snapshot.paramMap.get('group');
        //
        if (!group) {
            for (const childRoute of this.activatedRoute.children) {
                const params = await firstValueFrom(childRoute.paramMap.pipe(take(1)));
                group = params?.get('group');
                if (group) {
                    break;
                }
            }
        }
        return group ?? undefined;
    }
    async handleSelectGroup(item) {
        await this.router.navigate([`${item.name}`], { relativeTo: this.activatedRoute });
    }
    //#region ----------------   Page Configuration Overrides   ----------------
    async getSecondaryMenuItems() {
        if (!this.vm.activateGroup()) {
            return [];
        }
        const items = [
            {
                title: await this.translateService.translateAsync('@settings:actions.restore-defaults.title'),
                icon: 'fa-light fa-rotate-left',
                color: 'danger',
                command: { name: 'restore-defaults' }
            }
        ];
        const payload = await this.hooks.runAsync('settings-page.secondary-actions', { items });
        return payload.items ?? items;
    }
    async getPageTitle() {
        const groupTitle = this.vm.activateGroup()?.title;
        const scopeTitle = await this.translateService.translateAsync('@settings:' + this.vm.scopeTitle());
        if (!this.vm.isSearching()) {
            return groupTitle ?? scopeTitle;
        }
        else {
            return this.translateService.translateAsync('@settings:search.title', { params: { q: this.vm.searchExpression() } });
        }
    }
    async getPageDescription() {
        const groupDescription = this.vm.activateGroup()?.description;
        const scopeDescription = await this.translateService.translateAsync('@settings:' + this.vm.scopeDescription());
        if (!this.vm.isSearching()) {
            return groupDescription ?? scopeDescription;
        }
        else {
            return this.translateService.translateAsync('@settings:search.description');
        }
    }
    async getPageBadge() {
        if (this.vm.isDirty()) {
            return {
                title: await this.translateService.translateAsync('@general:terms.interface.save-status.not-saved.title'),
                color: 'warning',
                description: await this.translateService.translateAsync('@general:terms.interface.save-status.not-saved.description'),
            };
        }
        return null;
    }
    async getBackButton() {
        if (this.vm.activateGroup()) {
            return {
                title: await this.translateService.translateAsync('@settings:' + this.vm.scopeTitle()),
            };
        }
        return null;
    }
    onBackButtonClick() {
        const app = this.sessionService.application?.name;
        const scope = resolvePlatformScopeName(this.vm.scope());
        //
        this.router.navigate([app, 'settings', scope]);
    }
    async execute(command) {
        switch (command.name) {
            case 'restore-defaults':
                await this.vm.resetToDefault();
                break;
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPSettingPageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: AXPSettingPageComponent, isStandalone: true, selector: "ng-component", host: { classAttribute: "axp-setting-page" }, providers: [
            AXUnsubscriber,
            AXPSettingsViewModel,
            {
                provide: AXPPageLayoutBase,
                useExisting: AXPSettingPageComponent
            }
        ], usesInheritance: true, ngImport: i0, template: "<axp-page-layout *translate=\"let t\">\n  @if (vm.showGroups()) {\n    <axp-layout-start-side>\n      <axp-layout-header>\n        <axp-layout-title>{{ '@settings:' + vm.scopeTitle() | translate | async }}</axp-layout-title>\n        <axp-layout-toolbar>\n          <ax-search-box\n            [delayTime]=\"300\"\n            [ngModel]=\"vm.searchExpression()\"\n            (onValueChanged)=\"vm.search($event.value)\"\n            [placeholder]=\"'@settings:search.placeholder' | translate | async\"\n          >\n            <ax-clear-button></ax-clear-button>\n          </ax-search-box>\n        </axp-layout-toolbar>\n      </axp-layout-header>\n      <axp-layout-content>\n        <ax-tabs [look]=\"'with-line-color'\" [location]=\"'end'\" [fitParent]=\"true\">\n          @for (item of vm.groups(); track $index) {\n            <ax-tab-item\n              [text]=\"item.title\"\n              (onClick)=\"handleSelectGroup(item)\"\n              [active]=\"vm.activateGroup() == item && !vm.isSearching()\"\n            >\n              <ax-prefix>\n                <ax-icon icon=\"far ${{ item.icon }}\"></ax-icon>\n              </ax-prefix>\n            </ax-tab-item>\n          }\n        </ax-tabs>\n      </axp-layout-content>\n    </axp-layout-start-side>\n  }\n\n  <axp-page-content id=\"ax-settings\">\n    @if (vm.hasActivateGroup() || vm.isSearching()) {\n      <router-outlet></router-outlet>\n    } @else {\n      <axp-layout-list>\n        @for (item of vm.groups(); track $index) {\n          <axp-layout-list-item (click)=\"handleSelectGroup(item)\">\n            <axp-layout-prefix>\n              <ax-icon icon=\"far ${{ item.icon }}\" class=\"ax-text-gray-500\"></ax-icon>\n            </axp-layout-prefix>\n            <axp-layout-content>\n              <a class=\"ax-font-semibold\">{{ item.title | translate | async }}</a>\n            </axp-layout-content>\n            <axp-layout-suffix>\n              <ax-icon icon=\" far fa-chevron-right\" class=\"ax-text-gray-400\"></ax-icon>\n            </axp-layout-suffix>\n          </axp-layout-list-item>\n        }\n      </axp-layout-list>\n    }\n  </axp-page-content>\n\n  @if (vm.isDirty()) {\n    <axp-page-footer class=\"--animated\">\n      <axp-layout-suffix>\n        <ax-button\n          [class.ax-sm]=\"layoutService.isSmall()\"\n          [disabled]=\"vm.isBusy() || vm.isSaving()\"\n          [text]=\"'@general:actions.discard.title' | translate | async\"\n          (onClick)=\"vm.discard()\"\n        >\n        </ax-button>\n        <ax-button\n          [class.ax-sm]=\"layoutService.isSmall()\"\n          [disabled]=\"vm.isBusy() || vm.isSaving()\"\n          [text]=\"'@general:actions.apply.title' | translate | async\"\n          (onClick)=\"vm.apply()\"\n          [color]=\"'secondary'\"\n        >\n          @if (vm.isSaving()) {\n            <ax-loading></ax-loading>\n          }\n        </ax-button>\n      </axp-layout-suffix>\n    </axp-page-footer>\n  }\n</axp-page-layout>\n", styles: [".axp-setting-page ax-tabs{--ax-comp-tabs-default-border-radius: 0}.axp-setting-page ax-tabs ax-tab-item{margin-top:0!important;margin-bottom:0!important;padding-top:.75rem!important;padding-bottom:.75rem!important;font-weight:600!important}.axp-setting-page axp-layout-section axp-layout-content{display:flex;width:100%;flex-direction:column}.axp-setting-page axp-layout-section axp-layout-content>:not([hidden])~:not([hidden]){--tw-divide-y-reverse: 0;border-top-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px * var(--tw-divide-y-reverse));border-style:dashed;--tw-divide-opacity: 1;border-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-divide-opacity, 1))}.axp-setting-page axp-layout-section axp-layout-content .--item-container{align-items:center;gap:1rem;padding:1rem}@media (min-width: 1024px){.axp-setting-page axp-layout-section axp-layout-content .--item-container{padding-left:1.5rem;padding-right:1.5rem}}@media (min-width: 1280px){.axp-setting-page axp-layout-section axp-layout-content .--item-container{padding-left:2rem;padding-right:2rem}}@media (min-width: 1536px){.axp-setting-page axp-layout-section axp-layout-content .--item-container{padding-left:2.5rem;padding-right:2.5rem}}.axp-setting-page axp-layout-section axp-layout-content .--item-container{display:grid;grid-template-columns:repeat(12,minmax(0,1fr))}.axp-setting-page axp-layout-section axp-layout-content .--item-container axp-layout-description{margin-top:.5rem!important;font-size:.75rem!important;line-height:1rem!important}.axp-setting-page axp-layout-start-side{border-inline-end-width:1px;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.axp-setting-page #ax-settings{padding:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "ngmodule", type: 
                //
                AXSearchBoxModule }, { kind: "component", type: i3.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i4.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i4.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i4.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXBreadcrumbsModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i5.AXTranslatorDirective, selector: "[translate]" }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i6.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXTabsModule }, { kind: "component", type: i7.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i7.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i8.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "component", type: 
                //
                AXPPageLayoutComponent, selector: "axp-page-layout" }, { kind: "component", type: AXPThemeLayoutBlockComponent, selector: "    axp-page-content,     axp-page-footer-container,    axp-page-footer,    axp-page-header,    axp-page-header-container,    axp-page-toolbar,    axp-layout-content,     axp-layout-page-content,     axp-layout-sections,    axp-layout-body,    axp-layout-page-body,    axp-layout-prefix,    axp-layout-suffix,    axp-layout-title-bar,    axp-layout-title,     axp-layout-title-actions,     axp-layout-nav-button,     axp-layout-description,     axp-layout-breadcrumbs,    axp-layout-list-action,    " }, { kind: "component", type: AXPThemeLayoutListComponent, selector: "axp-layout-list" }, { kind: "component", type: AXPThemeLayoutListItemComponent, selector: "axp-layout-list-item" }, { kind: "component", type: AXPThemeLayoutToolbarComponent, selector: "axp-layout-toolbar" }, { kind: "component", type: AXPThemeLayoutHeaderComponent, selector: "axp-layout-header" }, { kind: "component", type: AXPThemeLayoutStartSideComponent, selector: "axp-layout-page-start-side, axp-layout-start-side" }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPSettingPageComponent, decorators: [{
            type: Component,
            args: [{ standalone: true, imports: [
                        CommonModule,
                        FormsModule,
                        RouterModule,
                        //
                        AXSearchBoxModule,
                        AXDecoratorModule,
                        AXBreadcrumbsModule,
                        AXTranslationModule,
                        AXButtonModule,
                        AXTabsModule,
                        AXBadgeModule,
                        AXLoadingModule,
                        AXDropdownButtonModule,
                        //
                        AXPPageLayoutComponent,
                        AXPThemeLayoutBlockComponent,
                        AXPThemeLayoutListComponent,
                        AXPThemeLayoutListItemComponent,
                        AXPThemeLayoutToolbarComponent,
                        AXPThemeLayoutHeaderComponent,
                        AXPThemeLayoutStartSideComponent
                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
                        AXUnsubscriber,
                        AXPSettingsViewModel,
                        {
                            provide: AXPPageLayoutBase,
                            useExisting: AXPSettingPageComponent
                        }
                    ], host: { class: 'axp-setting-page' }, template: "<axp-page-layout *translate=\"let t\">\n  @if (vm.showGroups()) {\n    <axp-layout-start-side>\n      <axp-layout-header>\n        <axp-layout-title>{{ '@settings:' + vm.scopeTitle() | translate | async }}</axp-layout-title>\n        <axp-layout-toolbar>\n          <ax-search-box\n            [delayTime]=\"300\"\n            [ngModel]=\"vm.searchExpression()\"\n            (onValueChanged)=\"vm.search($event.value)\"\n            [placeholder]=\"'@settings:search.placeholder' | translate | async\"\n          >\n            <ax-clear-button></ax-clear-button>\n          </ax-search-box>\n        </axp-layout-toolbar>\n      </axp-layout-header>\n      <axp-layout-content>\n        <ax-tabs [look]=\"'with-line-color'\" [location]=\"'end'\" [fitParent]=\"true\">\n          @for (item of vm.groups(); track $index) {\n            <ax-tab-item\n              [text]=\"item.title\"\n              (onClick)=\"handleSelectGroup(item)\"\n              [active]=\"vm.activateGroup() == item && !vm.isSearching()\"\n            >\n              <ax-prefix>\n                <ax-icon icon=\"far ${{ item.icon }}\"></ax-icon>\n              </ax-prefix>\n            </ax-tab-item>\n          }\n        </ax-tabs>\n      </axp-layout-content>\n    </axp-layout-start-side>\n  }\n\n  <axp-page-content id=\"ax-settings\">\n    @if (vm.hasActivateGroup() || vm.isSearching()) {\n      <router-outlet></router-outlet>\n    } @else {\n      <axp-layout-list>\n        @for (item of vm.groups(); track $index) {\n          <axp-layout-list-item (click)=\"handleSelectGroup(item)\">\n            <axp-layout-prefix>\n              <ax-icon icon=\"far ${{ item.icon }}\" class=\"ax-text-gray-500\"></ax-icon>\n            </axp-layout-prefix>\n            <axp-layout-content>\n              <a class=\"ax-font-semibold\">{{ item.title | translate | async }}</a>\n            </axp-layout-content>\n            <axp-layout-suffix>\n              <ax-icon icon=\" far fa-chevron-right\" class=\"ax-text-gray-400\"></ax-icon>\n            </axp-layout-suffix>\n          </axp-layout-list-item>\n        }\n      </axp-layout-list>\n    }\n  </axp-page-content>\n\n  @if (vm.isDirty()) {\n    <axp-page-footer class=\"--animated\">\n      <axp-layout-suffix>\n        <ax-button\n          [class.ax-sm]=\"layoutService.isSmall()\"\n          [disabled]=\"vm.isBusy() || vm.isSaving()\"\n          [text]=\"'@general:actions.discard.title' | translate | async\"\n          (onClick)=\"vm.discard()\"\n        >\n        </ax-button>\n        <ax-button\n          [class.ax-sm]=\"layoutService.isSmall()\"\n          [disabled]=\"vm.isBusy() || vm.isSaving()\"\n          [text]=\"'@general:actions.apply.title' | translate | async\"\n          (onClick)=\"vm.apply()\"\n          [color]=\"'secondary'\"\n        >\n          @if (vm.isSaving()) {\n            <ax-loading></ax-loading>\n          }\n        </ax-button>\n      </axp-layout-suffix>\n    </axp-page-footer>\n  }\n</axp-page-layout>\n", styles: [".axp-setting-page ax-tabs{--ax-comp-tabs-default-border-radius: 0}.axp-setting-page ax-tabs ax-tab-item{margin-top:0!important;margin-bottom:0!important;padding-top:.75rem!important;padding-bottom:.75rem!important;font-weight:600!important}.axp-setting-page axp-layout-section axp-layout-content{display:flex;width:100%;flex-direction:column}.axp-setting-page axp-layout-section axp-layout-content>:not([hidden])~:not([hidden]){--tw-divide-y-reverse: 0;border-top-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px * var(--tw-divide-y-reverse));border-style:dashed;--tw-divide-opacity: 1;border-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-divide-opacity, 1))}.axp-setting-page axp-layout-section axp-layout-content .--item-container{align-items:center;gap:1rem;padding:1rem}@media (min-width: 1024px){.axp-setting-page axp-layout-section axp-layout-content .--item-container{padding-left:1.5rem;padding-right:1.5rem}}@media (min-width: 1280px){.axp-setting-page axp-layout-section axp-layout-content .--item-container{padding-left:2rem;padding-right:2rem}}@media (min-width: 1536px){.axp-setting-page axp-layout-section axp-layout-content .--item-container{padding-left:2.5rem;padding-right:2.5rem}}.axp-setting-page axp-layout-section axp-layout-content .--item-container{display:grid;grid-template-columns:repeat(12,minmax(0,1fr))}.axp-setting-page axp-layout-section axp-layout-content .--item-container axp-layout-description{margin-top:.5rem!important;font-size:.75rem!important;line-height:1rem!important}.axp-setting-page axp-layout-start-side{border-inline-end-width:1px;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.axp-setting-page #ax-settings{padding:1rem}\n"] }]
        }] });

export { AXPSettingPageComponent };
//# sourceMappingURL=acorex-modules-settings-management-setting-page.component-7k6J8wut.mjs.map
