import { AXBadgeModule } from '@acorex/components/badge';
import { AXBreadcrumbsModule } from '@acorex/components/breadcrumbs';
import { AXButtonModule } from '@acorex/components/button';
import { AXDecoratorModule } from '@acorex/components/decorators';
import { AXDropdownButtonModule } from '@acorex/components/dropdown-button';
import * as i3 from '@acorex/components/form';
import { AXFormComponent, AXFormModule } from '@acorex/components/form';
import { AXLoadingModule } from '@acorex/components/loading';
import { AXSearchBoxModule } from '@acorex/components/search-box';
import * as i5 from '@acorex/core/translation';
import { AXTranslationModule } from '@acorex/core/translation';
import { AXValidationModule } from '@acorex/core/validation';
import { AXPGridLayoutDirective } from '@acorex/platform/core';
import * as i4 from '@acorex/platform/layout/widget-core';
import { AXPWidgetContainerComponent, AXPWidgetCoreModule } from '@acorex/platform/layout/widget-core';
import { AXPThemeLayoutBlockComponent, AXPThemeLayoutHeaderComponent, AXPThemeLayoutSectionComponent } from '@acorex/platform/layout/components';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { inject, Injector, viewChild, computed, effect, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AXPSettingsViewModel } from './acorex-modules-settings-management.mjs';
import { AXPLayoutThemeService } from '@acorex/platform/themes/shared';

class AXPSettingsViewComponent {
    constructor() {
        this.vm = inject(AXPSettingsViewModel);
        this.injector = inject(Injector);
        this.layoutService = inject(AXPLayoutThemeService);
        this.form = viewChild(AXFormComponent, ...(ngDevMode ? [{ debugName: "form" }] : []));
        this.container = viewChild(AXPWidgetContainerComponent, ...(ngDevMode ? [{ debugName: "container" }] : []));
        this.defaultLayout = computed(() => {
            return {
                positions: {
                    default: {
                        colSpan: 12,
                    },
                    md: {
                        colSpan: 8,
                    },
                    lg: {
                        colSpan: 6,
                    },
                    xl: {
                        colSpan: this.layoutService.isSideMenuOpen() ? 5 : 4,
                    },
                    xxl: {
                        colSpan: 4,
                    },
                },
            };
        }, ...(ngDevMode ? [{ debugName: "defaultLayout" }] : []));
        this.#effect1 = effect(() => {
            this.container()?.builderService.setStatus(this.vm.status());
        }, ...(ngDevMode ? [{ debugName: "#effect1" }] : []));
    }
    ngOnInit() {
        this.vm.registerForm(this.form());
    }
    #effect1;
    handleContextChanged(e) {
        if (e.state == 'initiated') {
            this.vm.updatePreviousContext(e.data);
        }
        else {
            this.vm.updateContext(e.data);
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPSettingsViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: AXPSettingsViewComponent, isStandalone: true, selector: "ng-component", host: { classAttribute: "ax-w-full" }, viewQueries: [{ propertyName: "form", first: true, predicate: AXFormComponent, descendants: true, isSignal: true }, { propertyName: "container", first: true, predicate: AXPWidgetContainerComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ax-form>\n  <axp-widgets-container [context]=\"vm.context()\" (onContextChanged)=\"handleContextChanged($event)\" *translate=\"let t\">\n    @if (vm.isSearching() && vm.searchResults()!.length > 0) {\n      <!-- Search Result -->\n      @for (group of vm.searchResults(); track group.name; let first = $first) {\n        <p class=\"ax-text-lg md:ax-text-xl ax-font-semibold ax-py-3 ax-text-neutral-500\" [class.ax-pt-0]=\"first\">\n          {{ group.title | translate | async }}\n        </p>\n        <axp-layout-sections>\n          @for (section of group.sections; track section.name) {\n            <ng-container\n              [ngTemplateOutlet]=\"sectionTpl\"\n              [ngTemplateOutletContext]=\"{ section }\"\n              [ngTemplateOutletInjector]=\"injector\"\n            ></ng-container>\n          }\n        </axp-layout-sections>\n      }\n    }\n    <!-- Not Found -->\n    @else if (vm.isSearching() && vm.searchResults()!.length === 0) {\n      <div class=\"ax-p-2\">\n        <div\n          class=\"ax-mt-3 ax-flex ax-flex-col ax-justify-center ax-h-[calc(100vh-236px)] ax-items-center ax-p-10 ax-gap-10\"\n        >\n          <p class=\"ax-text-xl md:ax-text-2xl ax-font-bold\">\n            {{ '@settings:search.not-found' | translate | async }}\n          </p>\n        </div>\n      </div>\n    }\n    <!-- Group -->\n    @else if (vm.activateGroup()?.sections) {\n      <axp-layout-sections>\n        @for (section of vm.activateGroup()?.sections; track section.name) {\n          <ng-container\n            [ngTemplateOutlet]=\"sectionTpl\"\n            [ngTemplateOutletContext]=\"{ section }\"\n            [ngTemplateOutletInjector]=\"injector\"\n          ></ng-container>\n        }\n      </axp-layout-sections>\n    }\n    <ng-template #sectionTpl let-section=\"section\">\n      <axp-layout-section>\n        <axp-layout-header>\n          <axp-layout-title>\n            {{ section.title | translate | async }}\n          </axp-layout-title>\n          @if (section.description) {\n            <axp-layout-description>\n              {{ section.description | translate | async }}\n            </axp-layout-description>\n          }\n        </axp-layout-header>\n        <axp-layout-content>\n          <!-- Settings Item -->\n          @for (j of section.settings; track j.name) {\n            <div class=\"--item-container\" [class.!ax-hidden]=\"widget.options()['visibility'] == false\">\n              <!-- Title and Description Section -->\n              <div class=\"ax-col-span-12 md:ax-col-span-4 lg:ax-col-span-4 2xl:ax-col-span-3\">\n                @if (j.title) {\n                  <axp-layout-title>{{ j.title | translate | async }}</axp-layout-title>\n                }\n                @if (j.description) {\n                  <axp-layout-description>{{ j.description | translate | async }}</axp-layout-description>\n                }\n              </div>\n              <ax-form-field class=\"ax-flex ax-w-full\" [axp-grid-layout]=\"j.layout ?? defaultLayout()\">\n                <ng-container axp-widget-renderer [node]=\"j.widget\" [mode]=\"'edit'\" #widget=\"widgetRenderer\">\n                </ng-container>\n              </ax-form-field>\n            </div>\n          }\n        </axp-layout-content>\n      </axp-layout-section>\n    </ng-template>\n  </axp-widgets-container>\n</ax-form>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: 
                //
                AXDecoratorModule }, { kind: "ngmodule", type: AXBreadcrumbsModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i5.AXTranslatorDirective, selector: "[translate]" }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i3.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "component", type: i3.AXFormComponent, selector: "ax-form", inputs: ["labelMode", "look", "messageStyle", "updateOn"], outputs: ["onValidate", "updateOnChange"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: 
                //
                AXPWidgetCoreModule }, { kind: "component", type: i4.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i4.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { 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: AXPThemeLayoutHeaderComponent, selector: "axp-layout-header" }, { kind: "component", type: AXPThemeLayoutSectionComponent, selector: "axp-layout-section" }, { kind: "directive", type: AXPGridLayoutDirective, selector: "[axp-grid-layout]", inputs: ["axp-grid-layout"] }, { kind: "pipe", type: i1.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: AXPSettingsViewComponent, decorators: [{
            type: Component,
            args: [{ imports: [
                        CommonModule,
                        FormsModule,
                        //
                        AXDecoratorModule,
                        AXBreadcrumbsModule,
                        AXButtonModule,
                        AXBadgeModule,
                        AXTranslationModule,
                        AXSearchBoxModule,
                        AXDropdownButtonModule,
                        AXLoadingModule,
                        AXFormModule,
                        AXValidationModule,
                        //
                        AXPWidgetCoreModule,
                        AXPThemeLayoutBlockComponent,
                        AXPThemeLayoutHeaderComponent,
                        AXPThemeLayoutSectionComponent,
                        AXPGridLayoutDirective
                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                        class: 'ax-w-full',
                    }, template: "<ax-form>\n  <axp-widgets-container [context]=\"vm.context()\" (onContextChanged)=\"handleContextChanged($event)\" *translate=\"let t\">\n    @if (vm.isSearching() && vm.searchResults()!.length > 0) {\n      <!-- Search Result -->\n      @for (group of vm.searchResults(); track group.name; let first = $first) {\n        <p class=\"ax-text-lg md:ax-text-xl ax-font-semibold ax-py-3 ax-text-neutral-500\" [class.ax-pt-0]=\"first\">\n          {{ group.title | translate | async }}\n        </p>\n        <axp-layout-sections>\n          @for (section of group.sections; track section.name) {\n            <ng-container\n              [ngTemplateOutlet]=\"sectionTpl\"\n              [ngTemplateOutletContext]=\"{ section }\"\n              [ngTemplateOutletInjector]=\"injector\"\n            ></ng-container>\n          }\n        </axp-layout-sections>\n      }\n    }\n    <!-- Not Found -->\n    @else if (vm.isSearching() && vm.searchResults()!.length === 0) {\n      <div class=\"ax-p-2\">\n        <div\n          class=\"ax-mt-3 ax-flex ax-flex-col ax-justify-center ax-h-[calc(100vh-236px)] ax-items-center ax-p-10 ax-gap-10\"\n        >\n          <p class=\"ax-text-xl md:ax-text-2xl ax-font-bold\">\n            {{ '@settings:search.not-found' | translate | async }}\n          </p>\n        </div>\n      </div>\n    }\n    <!-- Group -->\n    @else if (vm.activateGroup()?.sections) {\n      <axp-layout-sections>\n        @for (section of vm.activateGroup()?.sections; track section.name) {\n          <ng-container\n            [ngTemplateOutlet]=\"sectionTpl\"\n            [ngTemplateOutletContext]=\"{ section }\"\n            [ngTemplateOutletInjector]=\"injector\"\n          ></ng-container>\n        }\n      </axp-layout-sections>\n    }\n    <ng-template #sectionTpl let-section=\"section\">\n      <axp-layout-section>\n        <axp-layout-header>\n          <axp-layout-title>\n            {{ section.title | translate | async }}\n          </axp-layout-title>\n          @if (section.description) {\n            <axp-layout-description>\n              {{ section.description | translate | async }}\n            </axp-layout-description>\n          }\n        </axp-layout-header>\n        <axp-layout-content>\n          <!-- Settings Item -->\n          @for (j of section.settings; track j.name) {\n            <div class=\"--item-container\" [class.!ax-hidden]=\"widget.options()['visibility'] == false\">\n              <!-- Title and Description Section -->\n              <div class=\"ax-col-span-12 md:ax-col-span-4 lg:ax-col-span-4 2xl:ax-col-span-3\">\n                @if (j.title) {\n                  <axp-layout-title>{{ j.title | translate | async }}</axp-layout-title>\n                }\n                @if (j.description) {\n                  <axp-layout-description>{{ j.description | translate | async }}</axp-layout-description>\n                }\n              </div>\n              <ax-form-field class=\"ax-flex ax-w-full\" [axp-grid-layout]=\"j.layout ?? defaultLayout()\">\n                <ng-container axp-widget-renderer [node]=\"j.widget\" [mode]=\"'edit'\" #widget=\"widgetRenderer\">\n                </ng-container>\n              </ax-form-field>\n            </div>\n          }\n        </axp-layout-content>\n      </axp-layout-section>\n    </ng-template>\n  </axp-widgets-container>\n</ax-form>\n" }]
        }] });

export { AXPSettingsViewComponent };
//# sourceMappingURL=acorex-modules-settings-management-setting-view.component-Cpny-0pe.mjs.map
