import { AXButtonModule } from '@acorex/components/button';
import { AXDecoratorModule } from '@acorex/components/decorators';
import { AXPLayoutBaseWidgetComponent, AXPWidgetCoreModule } from '@acorex/platform/layout/widget-core';
import { AXPDesignerService, AXPWidgetDesignerRendererDirective, AXPDesignerAddWidgetLineButtonComponent } from '@acorex/platform/layout/designer';
import * as i0 from '@angular/core';
import { inject, computed, HostBinding, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';

class AXPPageWidgetDesignerComponent extends AXPLayoutBaseWidgetComponent {
    constructor() {
        super(...arguments);
        this.designerService = inject(AXPDesignerService);
        this.backgroundColor = computed(() => this.options()['backgroundColor'], ...(ngDevMode ? [{ debugName: "backgroundColor" }] : []));
        this.theme = computed(() => this.options()['theme']?.id ?? 'default', ...(ngDevMode ? [{ debugName: "theme" }] : []));
        this.hasHeader = computed(() => this.options()['hasHeader'], ...(ngDevMode ? [{ debugName: "hasHeader" }] : []));
        this.hasFooter = computed(() => this.options()['hasFooter'], ...(ngDevMode ? [{ debugName: "hasFooter" }] : []));
        this.direction = computed(() => this.options()['direction'], ...(ngDevMode ? [{ debugName: "direction" }] : []));
        this.onlyChildren = computed(() => this.children().filter((c) => !c.meta?.['footer'] && !c.meta?.['header']), ...(ngDevMode ? [{ debugName: "onlyChildren" }] : []));
        this.headerNodes = computed(() => this.children().filter((c) => c.meta?.['header']) ?? [], ...(ngDevMode ? [{ debugName: "headerNodes" }] : []));
        this.footerNodes = computed(() => this.children().filter((c) => c.meta?.['footer']) ?? [], ...(ngDevMode ? [{ debugName: "footerNodes" }] : []));
    }
    async handleAddHeader() {
        const widgets = await this.designerService.showPicker(this.node);
        widgets.forEach((c) => (c.meta = { header: true }));
    }
    async handleAddFooter() {
        const widgets = await this.designerService.showPicker(this.node);
        widgets.forEach((c) => (c.meta = { footer: true }));
    }
    async handleAddElement() {
        await this.designerService.showPicker(this.node);
    }
    get __style() {
        return {
            'background-color': this.backgroundColor(),
        };
    }
    get __class() {
        return {
            'ax-widget-container': true,
            'ax-dark': this.theme() == 'dark',
            'ax-light': this.theme() == 'light',
            'ax-block': true,
            'ax-w-full': true,
            'ax-overflow-auto': true,
            'ax-rtl': this.direction() == 'rtl',
        };
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPPageWidgetDesignerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AXPPageWidgetDesignerComponent, isStandalone: true, selector: "axp-page-widget-designer", host: { properties: { "style": "this.__style", "class": "this.__class" } }, providers: [
            {
                provide: AXPLayoutBaseWidgetComponent,
                useExisting: AXPPageWidgetDesignerComponent,
            },
        ], usesInheritance: true, ngImport: i0, template: `
    @if (hasHeader()) {
      @if (headerNodes().length) {
        <header class="axp-page-widget-header">
          @for (node of headerNodes(); track $index) {
            <ng-container
              axp-widget-designer-renderer
              [node]="node"
              [parentNode]="this"
              [mode]="mode"
              [locked]="this.locked"
            ></ng-container>
          }
        </header>
      } @else {
        <axp-designer-add-widget-line-button
          [text]="'Page Header'"
          (onClick)="handleAddHeader()"
        ></axp-designer-add-widget-line-button>
      }
    }
    @for (node of onlyChildren(); track $index) {
      <ng-container axp-widget-designer-renderer [node]="node" [parentNode]="this" [mode]="mode"></ng-container>
    }
    <!-- <axp-designer-add-widget-mini-button></axp-designer-add-widget-mini-button> -->
    <axp-designer-add-widget-line-button
      [text]="'Add Element'"
      (onClick)="handleAddElement()"
    ></axp-designer-add-widget-line-button>
    @if (hasFooter()) {
      @if (footerNodes().length) {
        <footer class="axp-page-widget-footer">
          @for (node of footerNodes(); track $index) {
            <ng-container axp-widget-designer-renderer [node]="node" [parentNode]="this" [mode]="mode"></ng-container>
          }
        </footer>
      } @else {
        <axp-designer-add-widget-line-button
          [text]="'Page Footer'"
          (onClick)="handleAddFooter()"
        ></axp-designer-add-widget-line-button>
      }
    }
  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "directive", type: AXPWidgetDesignerRendererDirective, selector: "[axp-widget-designer-renderer]", inputs: ["parentNode", "parentElement", "parentComponent", "index", "locked", "mode", "node"] }, { kind: "component", type: AXPDesignerAddWidgetLineButtonComponent, selector: "axp-designer-add-widget-line-button", inputs: ["text"], outputs: ["onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPPageWidgetDesignerComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'axp-page-widget-designer',
                    template: `
    @if (hasHeader()) {
      @if (headerNodes().length) {
        <header class="axp-page-widget-header">
          @for (node of headerNodes(); track $index) {
            <ng-container
              axp-widget-designer-renderer
              [node]="node"
              [parentNode]="this"
              [mode]="mode"
              [locked]="this.locked"
            ></ng-container>
          }
        </header>
      } @else {
        <axp-designer-add-widget-line-button
          [text]="'Page Header'"
          (onClick)="handleAddHeader()"
        ></axp-designer-add-widget-line-button>
      }
    }
    @for (node of onlyChildren(); track $index) {
      <ng-container axp-widget-designer-renderer [node]="node" [parentNode]="this" [mode]="mode"></ng-container>
    }
    <!-- <axp-designer-add-widget-mini-button></axp-designer-add-widget-mini-button> -->
    <axp-designer-add-widget-line-button
      [text]="'Add Element'"
      (onClick)="handleAddElement()"
    ></axp-designer-add-widget-line-button>
    @if (hasFooter()) {
      @if (footerNodes().length) {
        <footer class="axp-page-widget-footer">
          @for (node of footerNodes(); track $index) {
            <ng-container axp-widget-designer-renderer [node]="node" [parentNode]="this" [mode]="mode"></ng-container>
          }
        </footer>
      } @else {
        <axp-designer-add-widget-line-button
          [text]="'Page Footer'"
          (onClick)="handleAddFooter()"
        ></axp-designer-add-widget-line-button>
      }
    }
  `,
                    changeDetection: ChangeDetectionStrategy.OnPush,
                    encapsulation: ViewEncapsulation.None,
                    imports: [
                        AXPWidgetCoreModule,
                        AXButtonModule,
                        AXDecoratorModule,
                        AXPWidgetDesignerRendererDirective,
                        AXPDesignerAddWidgetLineButtonComponent,
                    ],
                    providers: [
                        {
                            provide: AXPLayoutBaseWidgetComponent,
                            useExisting: AXPPageWidgetDesignerComponent,
                        },
                    ],
                }]
        }], propDecorators: { __style: [{
                type: HostBinding,
                args: ['style']
            }], __class: [{
                type: HostBinding,
                args: ['class']
            }] } });

export { AXPPageWidgetDesignerComponent };
//# sourceMappingURL=acorex-platform-layout-widgets-page-widget-designer.component-q30grR3z.mjs.map
