import { ChangeDetectionStrategy, Component, ContentChildren, Input, ViewEncapsulation } from '@angular/core';
import { PrimeTemplate } from 'primeng/api';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "primeng/api";
import * as i3 from "primeng/dropdown";
import * as i4 from "@angular/forms";
import * as i5 from "primeng/timeline";
import * as i6 from "../../../smz-cards/components/grid-item/grid-item.component";
import * as i7 from "../../../../common/data-pipes/pipes/safe-html.pipe";
export class SmzTimelineComponent {
    constructor(cdr) {
        this.cdr = cdr;
        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;
                }
            }
        });
    }
    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: SmzTimelineComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", type: SmzTimelineComponent, selector: "smz-ui-timeline", inputs: { state: "state" }, queries: [{ propertyName: "templates", predicate: PrimeTemplate }], ngImport: i0, template: "<ng-container *ngIf=\"state != null\">\r\n<ng-container *ngIf=\"state.items$ | async as items\">\r\n\r\n<div *ngIf=\"state.title.isVisible || headerTemplate != null || state.sources.length > 0\" class=\"grid grid-nogutter lg:flex-row xl:flex-row md:flex-col sm:flex-col items-center justify-between gap-2 mb-3\">\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    <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  </div>\r\n</div>\r\n\r\n<ng-container *ngIf=\"items?.length > 0; else emptyTemplate\">\r\n    <p-timeline [value]=\"items\" [align]=\"state.view.align\" [styleClass]=\"state.view.styleClass.timeline\">\r\n      <ng-template pTemplate=\"marker\" let-event>\r\n          <span [ngClass]=\"state.marker.styleClass\">\r\n              <i [ngClass]=\"state.marker.icon\"></i>\r\n          </span>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"content\" let-event>\r\n        <smz-grid-item *ngIf=\"state.template != null\" [isDebug]=\"state.isDebug\" [template]=\"state.template\" [data]=\"event\" [menu]=\"state.menu\" [buttons]=\"state.buttons\" [ngClass]=\"state.view.styleClass.event\"></smz-grid-item>\r\n      </ng-template>\r\n    </p-timeline>\r\n</ng-container>\r\n\r\n<ng-template #emptyTemplate>\r\n  <div>{{ state.locale.emptyMessage }}</div>\r\n</ng-template>\r\n\r\n</ng-container>\r\n</ng-container>", styles: ["@media screen and (max-width: 960px){smz-ui-timeline .mobile-timeline .p-timeline-event:nth-child(2n){flex-direction:row!important}smz-ui-timeline .mobile-timeline .p-timeline-event:nth-child(2n) .p-timeline-event-content{text-align:left!important}smz-ui-timeline .mobile-timeline .p-timeline-event-opposite{flex:0}}smz-ui-timeline .p-timeline-left .p-timeline-event-opposite{display:none}smz-ui-timeline .p-timeline-right .p-timeline-event-opposite{display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.Timeline, selector: "p-timeline", inputs: ["value", "style", "styleClass", "align", "layout"] }, { kind: "component", type: i6.SmzGridItemComponent, selector: "smz-grid-item", inputs: ["isDebug", "template", "buttons", "menu", "data"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i7.SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: SmzTimelineComponent, decorators: [{
            type: Component,
            args: [{ selector: 'smz-ui-timeline', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"state != null\">\r\n<ng-container *ngIf=\"state.items$ | async as items\">\r\n\r\n<div *ngIf=\"state.title.isVisible || headerTemplate != null || state.sources.length > 0\" class=\"grid grid-nogutter lg:flex-row xl:flex-row md:flex-col sm:flex-col items-center justify-between gap-2 mb-3\">\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    <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  </div>\r\n</div>\r\n\r\n<ng-container *ngIf=\"items?.length > 0; else emptyTemplate\">\r\n    <p-timeline [value]=\"items\" [align]=\"state.view.align\" [styleClass]=\"state.view.styleClass.timeline\">\r\n      <ng-template pTemplate=\"marker\" let-event>\r\n          <span [ngClass]=\"state.marker.styleClass\">\r\n              <i [ngClass]=\"state.marker.icon\"></i>\r\n          </span>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"content\" let-event>\r\n        <smz-grid-item *ngIf=\"state.template != null\" [isDebug]=\"state.isDebug\" [template]=\"state.template\" [data]=\"event\" [menu]=\"state.menu\" [buttons]=\"state.buttons\" [ngClass]=\"state.view.styleClass.event\"></smz-grid-item>\r\n      </ng-template>\r\n    </p-timeline>\r\n</ng-container>\r\n\r\n<ng-template #emptyTemplate>\r\n  <div>{{ state.locale.emptyMessage }}</div>\r\n</ng-template>\r\n\r\n</ng-container>\r\n</ng-container>", styles: ["@media screen and (max-width: 960px){smz-ui-timeline .mobile-timeline .p-timeline-event:nth-child(2n){flex-direction:row!important}smz-ui-timeline .mobile-timeline .p-timeline-event:nth-child(2n) .p-timeline-event-content{text-align:left!important}smz-ui-timeline .mobile-timeline .p-timeline-event-opposite{flex:0}}smz-ui-timeline .p-timeline-left .p-timeline-event-opposite{display:none}smz-ui-timeline .p-timeline-right .p-timeline-event-opposite{display:none}\n"] }]
        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { templates: [{
                type: ContentChildren,
                args: [PrimeTemplate]
            }], state: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 