import { ChangeDetectionStrategy, Component, ContentChildren, Input, ViewChild, ViewEncapsulation } from '@angular/core';
import { isEmpty } from 'lodash-es';
import { PrimeTemplate } from 'primeng/api';
import { DataView } from 'primeng/dataview';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "primeng/api";
import * as i3 from "primeng/dataview";
import * as i4 from "primeng/inputtext";
import * as i5 from "primeng/dropdown";
import * as i6 from "@angular/forms";
import * as i7 from "../../../../common/directives/ng-var/ng-var.directive";
import * as i8 from "../../components/list-item/list-item.component";
import * as i9 from "../../components/grid-item/grid-item.component";
import * as i10 from "../../directives/inject-component.directive";
import * as i11 from "../../../../common/data-pipes/pipes/safe-html.pipe";
import * as i12 from "../../pipes/reset-context.pipe";
export class SmzCardsComponent {
    constructor(cdr, renderer) {
        this.cdr = cdr;
        this.renderer = renderer;
        this.contentTemplates = [];
    }
    ngOnInit() {
        if (this.state?.isDebug) {
            console.log('state', this.state);
        }
    }
    ngAfterContentInit() {
        this.templates.forEach((item) => {
            const templateName = item.getType();
            if (templateName.includes('type')) {
                const type = templateName.split(':')[1];
                this.contentTemplates.push({
                    type,
                    template: item.template
                });
            }
            else {
                switch (templateName) {
                    case 'header':
                        this.headerTemplate = item.template;
                        break;
                }
            }
        });
    }
    ngAfterViewInit() {
        if (!isEmpty(this.state.view.dataViewContentStyles)) {
            if (this.dataView != null) {
                const element = this.dataView.el.nativeElement;
                const container = element.getElementsByClassName('p-dataview-content')[0];
                const styles = this.state.view.dataViewContentStyles.split(' ');
                styles
                    .filter(x => !isEmpty(x))
                    .forEach(style => { this.renderer.addClass(container.firstChild, style); });
            }
        }
    }
    updateMainSource(event) {
        this.state.items$ = event.value.items$;
        this.cdr.markForCheck();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: SmzCardsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", type: SmzCardsComponent, selector: "smz-ui-cards", inputs: { state: "state" }, queries: [{ propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "dataView", first: true, predicate: DataView, descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"state != null\">\r\n<ng-container *ngVar=\"state.items$ | async as items\">\r\n<ng-container *ngVar=\"items | resetContext : state.template._context\">\r\n\r\n<p-dataView #dataView [styleClass]=\"state.view.dataViewStyleClass\" [gridStyleClass]=\"state.view.gridStyleClass\" [value]=\"items ?? []\" [paginator]=\"state.view.paginator\" [rows]=\"state.view.rowsPerPage\" [filterBy]=\"state.view.filterBy\" [layout]=\"state.view.layout\">\r\n\r\n  <ng-container *ngIf=\"state.view.showHeader\">\r\n    <ng-template pTemplate=\"header\">\r\n        <div class=\"grid grid-nogutter lg:flex-row xl:flex-row md:flex-col sm:flex-col items-center justify-between gap-2\">\r\n            <div class=\"grid grid-nogutter items-center justify-start gap-2\">\r\n              <div *ngIf=\"state.title.isVisible\" class=\"text-lg\" [innerHtml]=\"state.title.getText() | safeHtml\"></div>\r\n            </div>\r\n\r\n            <div class=\"grid grid-nogutter items-center justify-end gap-3\">\r\n              <ng-container *ngIf=\"headerTemplate != null\">\r\n                <ng-container *ngTemplateOutlet=\"headerTemplate; context: { $implicit: state }\"></ng-container>\r\n              </ng-container>\r\n\r\n              <span *ngIf=\"state.view.showGlobalFilter\" class=\"p-input-icon-left mb-2 md:mb-0\">\r\n                <i class=\"pi pi-search\"></i>\r\n                <input type=\"search\" pInputText [placeholder]=\"state.locale.globalSearch.placeholder\" (input)=\"dataView.filter($any($event.target).value)\">\r\n              </span>\r\n\r\n              <ng-container *ngIf=\"state.sources.length > 0\">\r\n                <p-dropdown [options]=\"state.sources\" dataKey=\"key\" [(ngModel)]=\"state.selectedSource\" optionLabel=\"label\" (onChange)=\"updateMainSource($event)\"></p-dropdown>\r\n              </ng-container>\r\n\r\n              <p-dataViewLayoutOptions *ngIf=\"state.view.showLayoutOptions\"></p-dataViewLayoutOptions>\r\n\r\n            </div>\r\n        </div>\r\n    </ng-template>\r\n  </ng-container>\r\n\r\n  <ng-template let-items pTemplate=\"list\">\r\n    <div *ngIf=\"state.template != null\" class=\"grid grid-nogutter\" [ngClass]=\"state.view.gridStyleClass\">\r\n        <ng-container *ngFor=\"let item of items\">\r\n          <smz-list-item [isDebug]=\"state.isDebug\" [template]=\"state.template\" [data]=\"item\" [menu]=\"state.menu\" [buttons]=\"state.buttons\" [ngClass]=\"state.list.styleClass.all\"></smz-list-item>\r\n        </ng-container>\r\n    </div>\r\n  </ng-template>\r\n\r\n  <ng-template let-items pTemplate=\"grid\">\r\n    <div *ngIf=\"state.template != null\" class=\"grid grid-nogutter\" [ngClass]=\"state.view.gridStyleClass\">\r\n      <ng-container *ngFor=\"let item of items\">\r\n        <smz-grid-item *ngIf=\"state.template != null\" [isDebug]=\"state.isDebug\" [template]=\"state.template\" [data]=\"item\" [menu]=\"state.menu\" [buttons]=\"state.buttons\" [ngClass]=\"state.grid.styleClass.all\"></smz-grid-item>\r\n      </ng-container>\r\n    </div>\r\n  </ng-template>\r\n\r\n  <ng-template pTemplate=\"empty\">\r\n\r\n    <ng-container *ngIf=\"state.view.emptyMessageType === 'html'\">\r\n      <div [innerHTML]=\"state.locale.emptyMessage | safeHtml\" class=\"w-full h-full\"></div>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"state.view.emptyMessageType === 'component'\">\r\n      <ng-template [smzInjectDataPathComponent]=\"state.view.emptyMessageComponent\" [data]=\"items\" [state]=\"state\"></ng-template>\r\n    </ng-container>\r\n  </ng-template>\r\n\r\n</p-dataView>\r\n\r\n</ng-container>\r\n</ng-container>\r\n</ng-container>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i3.DataView, selector: "p-dataView", inputs: ["paginator", "rows", "totalRecords", "pageLinks", "rowsPerPageOptions", "paginatorPosition", "paginatorStyleClass", "alwaysShowPaginator", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showFirstLastIcon", "showPageLinks", "lazy", "lazyLoadOnInit", "emptyMessage", "style", "styleClass", "gridStyleClass", "trackBy", "filterBy", "filterLocale", "loading", "loadingIcon", "first", "sortField", "sortOrder", "value", "layout"], outputs: ["onLazyLoad", "onPage", "onSort", "onChangeLayout"] }, { kind: "component", type: i3.DataViewLayoutOptions, selector: "p-dataViewLayoutOptions", inputs: ["style", "styleClass"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]" }, { kind: "component", type: i5.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i7.NgVar, selector: "[ngVar]", inputs: ["ngVar"] }, { kind: "component", type: i8.SmzListItemComponent, selector: "smz-list-item", inputs: ["isDebug", "template", "buttons", "menu", "data"] }, { kind: "component", type: i9.SmzGridItemComponent, selector: "smz-grid-item", inputs: ["isDebug", "template", "buttons", "menu", "data"] }, { kind: "directive", type: i10.SmzInjectDataPathComponent, selector: "[smzInjectDataPathComponent]", inputs: ["smzInjectDataPathComponent", "data", "state"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i11.SafeHtmlPipe, name: "safeHtml" }, { kind: "pipe", type: i12.SmzCardsResetContextPipe, name: "resetContext" }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: SmzCardsComponent, decorators: [{
            type: Component,
            args: [{ selector: 'smz-ui-cards', changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"state != null\">\r\n<ng-container *ngVar=\"state.items$ | async as items\">\r\n<ng-container *ngVar=\"items | resetContext : state.template._context\">\r\n\r\n<p-dataView #dataView [styleClass]=\"state.view.dataViewStyleClass\" [gridStyleClass]=\"state.view.gridStyleClass\" [value]=\"items ?? []\" [paginator]=\"state.view.paginator\" [rows]=\"state.view.rowsPerPage\" [filterBy]=\"state.view.filterBy\" [layout]=\"state.view.layout\">\r\n\r\n  <ng-container *ngIf=\"state.view.showHeader\">\r\n    <ng-template pTemplate=\"header\">\r\n        <div class=\"grid grid-nogutter lg:flex-row xl:flex-row md:flex-col sm:flex-col items-center justify-between gap-2\">\r\n            <div class=\"grid grid-nogutter items-center justify-start gap-2\">\r\n              <div *ngIf=\"state.title.isVisible\" class=\"text-lg\" [innerHtml]=\"state.title.getText() | safeHtml\"></div>\r\n            </div>\r\n\r\n            <div class=\"grid grid-nogutter items-center justify-end gap-3\">\r\n              <ng-container *ngIf=\"headerTemplate != null\">\r\n                <ng-container *ngTemplateOutlet=\"headerTemplate; context: { $implicit: state }\"></ng-container>\r\n              </ng-container>\r\n\r\n              <span *ngIf=\"state.view.showGlobalFilter\" class=\"p-input-icon-left mb-2 md:mb-0\">\r\n                <i class=\"pi pi-search\"></i>\r\n                <input type=\"search\" pInputText [placeholder]=\"state.locale.globalSearch.placeholder\" (input)=\"dataView.filter($any($event.target).value)\">\r\n              </span>\r\n\r\n              <ng-container *ngIf=\"state.sources.length > 0\">\r\n                <p-dropdown [options]=\"state.sources\" dataKey=\"key\" [(ngModel)]=\"state.selectedSource\" optionLabel=\"label\" (onChange)=\"updateMainSource($event)\"></p-dropdown>\r\n              </ng-container>\r\n\r\n              <p-dataViewLayoutOptions *ngIf=\"state.view.showLayoutOptions\"></p-dataViewLayoutOptions>\r\n\r\n            </div>\r\n        </div>\r\n    </ng-template>\r\n  </ng-container>\r\n\r\n  <ng-template let-items pTemplate=\"list\">\r\n    <div *ngIf=\"state.template != null\" class=\"grid grid-nogutter\" [ngClass]=\"state.view.gridStyleClass\">\r\n        <ng-container *ngFor=\"let item of items\">\r\n          <smz-list-item [isDebug]=\"state.isDebug\" [template]=\"state.template\" [data]=\"item\" [menu]=\"state.menu\" [buttons]=\"state.buttons\" [ngClass]=\"state.list.styleClass.all\"></smz-list-item>\r\n        </ng-container>\r\n    </div>\r\n  </ng-template>\r\n\r\n  <ng-template let-items pTemplate=\"grid\">\r\n    <div *ngIf=\"state.template != null\" class=\"grid grid-nogutter\" [ngClass]=\"state.view.gridStyleClass\">\r\n      <ng-container *ngFor=\"let item of items\">\r\n        <smz-grid-item *ngIf=\"state.template != null\" [isDebug]=\"state.isDebug\" [template]=\"state.template\" [data]=\"item\" [menu]=\"state.menu\" [buttons]=\"state.buttons\" [ngClass]=\"state.grid.styleClass.all\"></smz-grid-item>\r\n      </ng-container>\r\n    </div>\r\n  </ng-template>\r\n\r\n  <ng-template pTemplate=\"empty\">\r\n\r\n    <ng-container *ngIf=\"state.view.emptyMessageType === 'html'\">\r\n      <div [innerHTML]=\"state.locale.emptyMessage | safeHtml\" class=\"w-full h-full\"></div>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"state.view.emptyMessageType === 'component'\">\r\n      <ng-template [smzInjectDataPathComponent]=\"state.view.emptyMessageComponent\" [data]=\"items\" [state]=\"state\"></ng-template>\r\n    </ng-container>\r\n  </ng-template>\r\n\r\n</p-dataView>\r\n\r\n</ng-container>\r\n</ng-container>\r\n</ng-container>" }]
        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }], propDecorators: { dataView: [{
                type: ViewChild,
                args: [DataView]
            }], templates: [{
                type: ContentChildren,
                args: [PrimeTemplate]
            }], state: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 