import * as i0 from '@angular/core';
import { InjectionToken, input, booleanAttribute, signal, forwardRef, Component } from '@angular/core';
import { NgComponentOutlet, NgTemplateOutlet, AsyncPipe } from '@angular/common';

const GRID = new InjectionToken('GRID');

class Grid {
    _skeletonMap = new Map();
    _componentsMap = new Map();
    configs = input([], ...(ngDevMode ? [{ debugName: "configs" }] : /* istanbul ignore next */ []));
    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
    plain = input(false, { ...(ngDevMode ? { debugName: "plain" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    waitWhenAllItemsLoaded = input(false, { ...(ngDevMode ? { debugName: "waitWhenAllItemsLoaded" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    _allLoaded = signal(false, ...(ngDevMode ? [{ debugName: "_allLoaded" }] : /* istanbul ignore next */ []));
    _loadedItemsCount = signal(0, ...(ngDevMode ? [{ debugName: "_loadedItemsCount" }] : /* istanbul ignore next */ []));
    ngOnInit() {
        if (this.configs().length === 0) {
            return;
        }
        if (!this.waitWhenAllItemsLoaded()) {
            this._allLoaded.set(true);
        }
        this.configs().forEach(config => {
            this._skeletonMap.set(config.type, config.skeleton);
        });
        this.configs().forEach(async (config, index) => {
            this._componentsMap.set(config.type, config.component());
        });
    }
    markItemAsLoaded(id) {
        this._loadedItemsCount.set(this._loadedItemsCount() + 1);
        this._allLoaded.set(this._loadedItemsCount() === this.items().length);
    }
    getItemConfig(type) {
        return this.configs().find(config => config.type === type);
    }
    getSkeletonComponent(type) {
        return this._skeletonMap.get(type);
    }
    getItemComponent(type) {
        return this._componentsMap.get(type);
    }
    getItemInputs(gridItem) {
        return {
            id: gridItem.id,
            content: gridItem.content,
        };
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Grid, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: Grid, isStandalone: true, selector: "ngs-grid", inputs: { configs: { classPropertyName: "configs", publicName: "configs", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, plain: { classPropertyName: "plain", publicName: "plain", isSignal: true, isRequired: false, transformFunction: null }, waitWhenAllItemsLoaded: { classPropertyName: "waitWhenAllItemsLoaded", publicName: "waitWhenAllItemsLoaded", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ngs-grid" }, providers: [
            {
                provide: GRID,
                useExisting: forwardRef(() => Grid),
            }
        ], exportAs: ["ngsGrid"], ngImport: i0, template: "<div class=\"ngs-grid-container\">\n  <ng-container *ngTemplateOutlet=\"itemsTpl; context: { $implicit: items() }\"/>\n</div>\n\n<ng-template #itemsTpl let-items>\n  @for (item of items; track $index) {\n    <div class=\"ngs-grid-item\"\n         [style.--ngs-grid-item-colspan]=\"item.columns || 12\">\n      @if (item.children?.length > 0) {\n        <div class=\"ngs-grid-container\">\n          <ng-container *ngTemplateOutlet=\"itemsTpl; context: { $implicit: item.children }\"/>\n        </div>\n      } @else {\n        <div class=\"ngs-grid-item-content\"\n             [style.--ngs-grid-item-height]=\"item.height\"\n             [class.plain]=\"getItemConfig(item.type).plain || plain()\"\n             [class.hidden]=\"!_allLoaded()\">\n          <ng-container [ngComponentOutlet]=\"getItemComponent(item.type) | async\"\n                        [ngComponentOutletInputs]=\"getItemInputs(item)\"/>\n        </div>\n\n        @if (!_allLoaded()) {\n          <div class=\"ngs-grid-item-content skeleton\"\n               [style.--ngs-grid-item-skeleton-min-height]=\"item.skeletonHeight || item.height\">\n            @let skeletonComponent = getSkeletonComponent(item.type);\n\n            @if (skeletonComponent) {\n              <ng-container [ngComponentOutlet]=\"skeletonComponent\"/>\n            } @else {\n            }\n          </div>\n        }\n      }\n    </div>\n  }\n</ng-template>\n", styles: [":host{--ngs-grid-gap: calc(var(--spacing, .25rem) * 6);display:block}:host .ngs-grid-container{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--ngs-grid-gap)}:host .ngs-grid-item{--ngs-grid-item-colspan: 12;grid-column:span var(--ngs-grid-item-colspan)/span var(--ngs-grid-item-colspan)}:host .ngs-grid-item-content{--ngs-grid-item-height: 100%;height:var(--ngs-grid-item-height)}:host .ngs-grid-item-content:not(.plain){border:1px solid var(--ngs-color-border);border-radius:var(--ngs-radius-xl)}:host .skeleton{--ngs-grid-item-skeleton-min-height: 100px;padding:calc(var(--spacing, .25rem) * 5);min-height:var(--ngs-grid-item-skeleton-min-height)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Grid, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-grid', exportAs: 'ngsGrid', imports: [
                        NgComponentOutlet,
                        AsyncPipe,
                        NgTemplateOutlet
                    ], providers: [
                        {
                            provide: GRID,
                            useExisting: forwardRef(() => Grid),
                        }
                    ], host: {
                        'class': 'ngs-grid'
                    }, template: "<div class=\"ngs-grid-container\">\n  <ng-container *ngTemplateOutlet=\"itemsTpl; context: { $implicit: items() }\"/>\n</div>\n\n<ng-template #itemsTpl let-items>\n  @for (item of items; track $index) {\n    <div class=\"ngs-grid-item\"\n         [style.--ngs-grid-item-colspan]=\"item.columns || 12\">\n      @if (item.children?.length > 0) {\n        <div class=\"ngs-grid-container\">\n          <ng-container *ngTemplateOutlet=\"itemsTpl; context: { $implicit: item.children }\"/>\n        </div>\n      } @else {\n        <div class=\"ngs-grid-item-content\"\n             [style.--ngs-grid-item-height]=\"item.height\"\n             [class.plain]=\"getItemConfig(item.type).plain || plain()\"\n             [class.hidden]=\"!_allLoaded()\">\n          <ng-container [ngComponentOutlet]=\"getItemComponent(item.type) | async\"\n                        [ngComponentOutletInputs]=\"getItemInputs(item)\"/>\n        </div>\n\n        @if (!_allLoaded()) {\n          <div class=\"ngs-grid-item-content skeleton\"\n               [style.--ngs-grid-item-skeleton-min-height]=\"item.skeletonHeight || item.height\">\n            @let skeletonComponent = getSkeletonComponent(item.type);\n\n            @if (skeletonComponent) {\n              <ng-container [ngComponentOutlet]=\"skeletonComponent\"/>\n            } @else {\n            }\n          </div>\n        }\n      }\n    </div>\n  }\n</ng-template>\n", styles: [":host{--ngs-grid-gap: calc(var(--spacing, .25rem) * 6);display:block}:host .ngs-grid-container{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--ngs-grid-gap)}:host .ngs-grid-item{--ngs-grid-item-colspan: 12;grid-column:span var(--ngs-grid-item-colspan)/span var(--ngs-grid-item-colspan)}:host .ngs-grid-item-content{--ngs-grid-item-height: 100%;height:var(--ngs-grid-item-height)}:host .ngs-grid-item-content:not(.plain){border:1px solid var(--ngs-color-border);border-radius:var(--ngs-radius-xl)}:host .skeleton{--ngs-grid-item-skeleton-min-height: 100px;padding:calc(var(--spacing, .25rem) * 5);min-height:var(--ngs-grid-item-skeleton-min-height)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }], propDecorators: { configs: [{ type: i0.Input, args: [{ isSignal: true, alias: "configs", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], plain: [{ type: i0.Input, args: [{ isSignal: true, alias: "plain", required: false }] }], waitWhenAllItemsLoaded: [{ type: i0.Input, args: [{ isSignal: true, alias: "waitWhenAllItemsLoaded", required: false }] }] } });

/**
 * Generated bundle index. Do not edit.
 */

export { GRID, Grid };
//# sourceMappingURL=ngstarter-ui-components-grid.mjs.map
