import { AXBadgeModule } from '@acorex/components/badge';
import * as i1 from '@acorex/platform/layout/widget-core';
import { AXPColumnWidgetComponent, AXPWidgetCoreModule, AXPWidgetCoreService, AXPWidgetCoreContextStore } from '@acorex/platform/layout/widget-core';
import { AXButtonModule } from '@acorex/components/button';
import * as i3 from '@acorex/components/popover';
import { AXPopoverModule } from '@acorex/components/popover';
import * as i0 from '@angular/core';
import { viewChild, signal, computed, ChangeDetectionStrategy, Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { isNil } from 'lodash-es';

class AXPRepeaterWidgetColumnComponent extends AXPColumnWidgetComponent {
    constructor() {
        super(...arguments);
        //#region ----   View Children   ----
        this.moreButton = viewChild('moreButton', ...(ngDevMode ? [{ debugName: "moreButton" }] : []));
        this.morePopover = viewChild('morePopover', ...(ngDevMode ? [{ debugName: "morePopover" }] : []));
        //#endregion
        //#region ----   Properties   ----
        this.maxVisible = this.options['maxVisible'] ?? 2;
        this.childWidgetNode = this.options['children']?.[0];
        //#endregion
        //#region ----   Signals   ----
        this.isMorePopoverOpen = signal(false, ...(ngDevMode ? [{ debugName: "isMorePopoverOpen" }] : []));
        //#endregion
        //#region ----   Node Cache   ----
        // Cache nodes by index to prevent recreation on every change detection
        this.nodeCache = new Map();
        this.lastItems = [];
        //#endregion
        //#region ----   Computed Properties   ----
        this.displayItems = computed(() => {
            if (isNil(this.rawValue)) {
                return [];
            }
            const items = Array.isArray(this.rawValue) ? this.rawValue : [this.rawValue];
            return items.filter((item) => item != null);
        }, ...(ngDevMode ? [{ debugName: "displayItems" }] : []));
        this.allItems = computed(() => this.displayItems(), ...(ngDevMode ? [{ debugName: "allItems" }] : []));
        this.visibleItems = computed(() => {
            const items = this.allItems();
            return items.slice(0, this.maxVisible);
        }, ...(ngDevMode ? [{ debugName: "visibleItems" }] : []));
        this.hasMoreItems = computed(() => {
            return this.allItems().length > this.maxVisible;
        }, ...(ngDevMode ? [{ debugName: "hasMoreItems" }] : []));
        this.remainingItemsCount = computed(() => {
            return this.allItems().length - this.maxVisible;
        }, ...(ngDevMode ? [{ debugName: "remainingItemsCount" }] : []));
    }
    // Clear cache when items change
    clearCacheIfNeeded() {
        const currentItems = this.allItems();
        if (currentItems.length !== this.lastItems.length ||
            currentItems.some((item, idx) => item !== this.lastItems[idx])) {
            this.nodeCache.clear();
            this.lastItems = [...currentItems];
        }
    }
    //#endregion
    //#region ----   Public Methods   ----
    showMoreItems() {
        this.openMorePopover();
    }
    onMorePopoverOpenChange(event) {
        this.isMorePopoverOpen.set(event);
    }
    getItemNode(item, index) {
        if (!this.childWidgetNode) {
            return undefined;
        }
        // Clear cache if items changed
        this.clearCacheIfNeeded();
        // Return cached node if exists
        const cachedNode = this.nodeCache.get(index);
        if (cachedNode) {
            return cachedNode;
        }
        // Create new node and cache it
        const node = {
            ...this.childWidgetNode,
            path: `${this.path}[${index}]`,
            defaultValue: item,
            options: {
                ...this.childWidgetNode.options,
                rawValue: item,
                rowData: this.rowData,
            },
        };
        this.nodeCache.set(index, node);
        return node;
    }
    //#endregion
    //#region ----   Private Methods   ----
    openMorePopover() {
        if (this.morePopover() && this.moreButton()) {
            this.morePopover().target = this.moreButton().nativeElement;
            this.morePopover().open();
            this.isMorePopoverOpen.set(true);
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPRepeaterWidgetColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AXPRepeaterWidgetColumnComponent, isStandalone: true, selector: "axp-repeater-widget-column", inputs: { rawValue: "rawValue", rowData: "rowData" }, providers: [AXPWidgetCoreService, AXPWidgetCoreContextStore], viewQueries: [{ propertyName: "moreButton", first: true, predicate: ["moreButton"], descendants: true, isSignal: true }, { propertyName: "morePopover", first: true, predicate: ["morePopover"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-flex ax-gap-1 ax-items-center \">\n\n    @for (item of visibleItems(); track $index) {\n    @if (childWidgetNode) {\n    <ng-container axp-widget-renderer [node]=\"getItemNode(item, $index)!\" [mode]=\"'view'\" [parentNode]=\"null\"\n        [index]=\"$index\"></ng-container>\n    }\n    }@empty {\n    <span class=\"ax-text-muted\">---</span>\n    }\n\n\n    @if (hasMoreItems()) {\n    <span\n        class=\"ax-absolute ax-flex ax-items-center ax-end-0 ax-px-1 ax-cursor-pointer ax-h-full hover:ax-primary-lighter\"\n        (click)=\"showMoreItems()\" #moreButton>\n        <i class=\"fa-light fa-ellipsis-vertical\"></i>\n    </span>\n    }\n</div>\n\n<!-- More Items Popover -->\n<ax-popover [openOn]=\"'manual'\" #morePopover (openChange)=\"onMorePopoverOpenChange($event)\">\n    <div class=\"ax-lightest-surface ax-border ax-rounded-lg ax-shadow-lg ax-p-4 ax-min-w-[280px]\">\n        <div class=\"ax-mb-4 ax-border-b ax-pb-2\">\n            <h3 class=\"ax-text-base ax-font-semibold\">All {{ allItems().length }} Items</h3>\n        </div>\n        <div class=\"ax-max-h-64 ax-flex ax-flex-col ax-gap-3 ax-overflow-auto\" style=\"max-height: max(30dvh,10rem)\">\n            @for (item of allItems(); track $index) {\n            <div>\n                @if (childWidgetNode) {\n                <ng-container axp-widget-renderer [node]=\"getItemNode(item, $index)!\" [mode]=\"'view'\"\n                    [parentNode]=\"null\" [index]=\"$index\"></ng-container>\n                }\n            </div>\n            }\n        </div>\n    </div>\n</ax-popover>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i3.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "repositionOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "directive", type: i1.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPRepeaterWidgetColumnComponent, decorators: [{
            type: Component,
            args: [{ selector: 'axp-repeater-widget-column', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, AXBadgeModule, AXButtonModule, AXPopoverModule, AXPWidgetCoreModule], providers: [AXPWidgetCoreService, AXPWidgetCoreContextStore], inputs: ['rawValue', 'rowData'], template: "<div class=\"ax-flex ax-gap-1 ax-items-center \">\n\n    @for (item of visibleItems(); track $index) {\n    @if (childWidgetNode) {\n    <ng-container axp-widget-renderer [node]=\"getItemNode(item, $index)!\" [mode]=\"'view'\" [parentNode]=\"null\"\n        [index]=\"$index\"></ng-container>\n    }\n    }@empty {\n    <span class=\"ax-text-muted\">---</span>\n    }\n\n\n    @if (hasMoreItems()) {\n    <span\n        class=\"ax-absolute ax-flex ax-items-center ax-end-0 ax-px-1 ax-cursor-pointer ax-h-full hover:ax-primary-lighter\"\n        (click)=\"showMoreItems()\" #moreButton>\n        <i class=\"fa-light fa-ellipsis-vertical\"></i>\n    </span>\n    }\n</div>\n\n<!-- More Items Popover -->\n<ax-popover [openOn]=\"'manual'\" #morePopover (openChange)=\"onMorePopoverOpenChange($event)\">\n    <div class=\"ax-lightest-surface ax-border ax-rounded-lg ax-shadow-lg ax-p-4 ax-min-w-[280px]\">\n        <div class=\"ax-mb-4 ax-border-b ax-pb-2\">\n            <h3 class=\"ax-text-base ax-font-semibold\">All {{ allItems().length }} Items</h3>\n        </div>\n        <div class=\"ax-max-h-64 ax-flex ax-flex-col ax-gap-3 ax-overflow-auto\" style=\"max-height: max(30dvh,10rem)\">\n            @for (item of allItems(); track $index) {\n            <div>\n                @if (childWidgetNode) {\n                <ng-container axp-widget-renderer [node]=\"getItemNode(item, $index)!\" [mode]=\"'view'\"\n                    [parentNode]=\"null\" [index]=\"$index\"></ng-container>\n                }\n            </div>\n            }\n        </div>\n    </div>\n</ax-popover>" }]
        }], propDecorators: { moreButton: [{ type: i0.ViewChild, args: ['moreButton', { isSignal: true }] }], morePopover: [{ type: i0.ViewChild, args: ['morePopover', { isSignal: true }] }] } });

export { AXPRepeaterWidgetColumnComponent };
//# sourceMappingURL=acorex-platform-layout-widgets-repeater-widget-column.component-fcCirNxz.mjs.map
