import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core';
import { SmzCardsView } from '../../../models/smz-cards-types';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "primeng/button";
import * as i3 from "../../../../../common/directives/server-image/server-image.directive";
import * as i4 from "../../../../smz-menu/smz-menu.component";
import * as i5 from "primeng/tooltip";
import * as i6 from "../../../../../common/stop-click-propagation/click-stop-propagation.directive";
import * as i7 from "../../../../../common/directives/ng-var/ng-var.directive";
import * as i8 from "../../../directives/button-actions.directive";
import * as i9 from "../../../directives/inject-component.directive";
import * as i10 from "../../../../../common/data-pipes/pipes/safe-html.pipe";
import * as i11 from "../../../pipes/card-content.pipe";
import * as i12 from "../../../pipes/transform-content.pipe";
export class SmzFlipCardTypeComponent {
    constructor() {
        this.isDebug = false;
        this.modes = SmzCardsView;
    }
    ngOnInit() {
    }
    flip() {
        if (this.template.back == null) {
            return;
        }
        const changes = this.template._context.flip(this.data);
        this.template.onChange(changes);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: SmzFlipCardTypeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", type: SmzFlipCardTypeComponent, selector: "smz-flip-card-type", inputs: { template: "template", data: "data", mode: "mode", isDebug: "isDebug", buttons: "buttons", menu: "menu" }, ngImport: i0, template: "<ng-container [ngSwitch]=\"mode\">\r\n\r\n<ng-container *ngSwitchCase=\"modes.GRID\">\r\n<ng-container *ngVar=\"template._context.getFlipState(data) as status\">\r\n\r\n  <div class=\"w-full h-full grid grid-nogutter items-center justify-center relative select-none\">\r\n    <div class=\"relative\" [ngStyle]=\"{ width: template.width, height: template.height}\" [ngClass]=\"template.cardStyleClass + (isDebug ? ' border border-red-500 border-solid' : '')\">\r\n      <div class=\"cmp-card w-full h-full\" [ngClass]=\"{ 'cmp-card-flipped': status === 'back', 'cursor-pointer': template.back != null }\" (click)=\"flip()\">\r\n        <div class=\"cmp-content\">\r\n          <div class=\"cmp-front\">\r\n\r\n            <ng-container *ngIf=\"status === 'front'\">\r\n\r\n            <!-- FRONT IMAGE -->\r\n              <ng-container *ngIf=\"template.front.image as frontImage\">\r\n                <ng-container *ngIf=\"frontImage | transformContent : data as image\">\r\n                  <img\r\n                    serverImage\r\n                    [path]=\"image.transform.override ? image.transform.override.dataPath : (data | cardsContent : image.dataPath).result\"\r\n                    [maximize]=\"image.maximize\"\r\n                    [openMaximized]=\"image.openMaximized\"\r\n                    [placeholder]=\"'assets/images/placeholder.jpeg'\"\r\n                    [title]=\"image.title.isVisible ? image.title.getText(data) : null\"\r\n                    [useServerPath]=\"image.useServerPath\"\r\n                    draggable=\"false\"\r\n                    [ngClass]=\"image.gridStyleClass\"\r\n                  >\r\n                </ng-container>\r\n              </ng-container>\r\n\r\n              <ng-container *ngIf=\"template.front.component as frontComponent\">\r\n                <ng-template [smzInjectDataPathComponent]=\"frontComponent.componentData\" [data]=\"data\" [state]=\"template._context\"></ng-template>\r\n              </ng-container>\r\n\r\n              <ng-container *ngIf=\"template.front.html as frontHtml\">\r\n                <div class=\"w-full h-full\" [innerHTML]=\"frontHtml | safeHtml\"></div>\r\n              </ng-container>\r\n\r\n              <ng-container *ngIf=\"template.buttonsLocation === 'front'\">\r\n                <ng-container *ngTemplateOutlet=\"buttonsTemplate; context: { $implicit: template }\"></ng-container>\r\n              </ng-container>\r\n\r\n              <ng-container *ngIf=\"template.menuLocation === 'front'\">\r\n                <ng-container *ngTemplateOutlet=\"menuTemplate; context: { $implicit: template }\"></ng-container>\r\n              </ng-container>\r\n\r\n          </ng-container>\r\n        </div>\r\n\r\n          <div class=\"cmp-back\">\r\n\r\n            <ng-container *ngIf=\"status === 'back'\">\r\n\r\n              <!-- FRONT IMAGE -->\r\n              <ng-container *ngIf=\"template.back.image as backImage\">\r\n                <ng-container *ngIf=\"backImage | transformContent : data as image\">\r\n                  <img\r\n                    serverImage\r\n                    [path]=\"image.transform.override ? image.transform.override.dataPath : (data | cardsContent : image.dataPath).result\"\r\n                    [maximize]=\"image.maximize\"\r\n                    [openMaximized]=\"image.openMaximized\"\r\n                    [placeholder]=\"'assets/images/placeholder.jpeg'\"\r\n                    [title]=\"image.title.isVisible ? image.title.getText(data) : null\"\r\n                    [useServerPath]=\"image.useServerPath\"\r\n                    draggable=\"false\"\r\n                    [ngClass]=\"image.gridStyleClass\"\r\n                  >\r\n                </ng-container>\r\n              </ng-container>\r\n\r\n              <ng-container *ngIf=\"template.back.component as backComponent\">\r\n                <ng-template [smzInjectDataPathComponent]=\"backComponent.componentData\" [data]=\"data\" [state]=\"template._context\"></ng-template>\r\n              </ng-container>\r\n\r\n              <ng-container *ngIf=\"template.back.html as backHtml\">\r\n                <div class=\"w-full h-full\" [innerHTML]=\"backHtml | safeHtml\"></div>\r\n              </ng-container>\r\n\r\n              <ng-container *ngIf=\"template.buttonsLocation === 'back'\">\r\n                <ng-container *ngTemplateOutlet=\"buttonsTemplate; context: { $implicit: template }\"></ng-container>\r\n              </ng-container>\r\n\r\n              <ng-container *ngIf=\"template.menuLocation === 'back'\">\r\n                <ng-container *ngTemplateOutlet=\"menuTemplate; context: { $implicit: template }\"></ng-container>\r\n              </ng-container>\r\n\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n</ng-container>\r\n</ng-container>\r\n\r\n<ng-container *ngSwitchCase=\"modes.LIST\"></ng-container>\r\n\r\n</ng-container>\r\n\r\n<ng-template #buttonsTemplate let-template>\r\n  <div class=\"absolute bottom-0 inset-x-0\">\r\n    <div class=\"grid grid-nogutter flex-col items-start justify-center gap-2 col\" [ngClass]=\"template.contentStyleClass\">\r\n\r\n      <!-- BUTTONS -->\r\n      <ng-container *ngIf=\"buttons.callback != null && buttons.callback(data) as buttonsData\">\r\n        <div class=\"w-full grid grid-nogutter items-center justify-center gap-1\">\r\n          <ng-container *ngFor=\"let button of buttonsData; let i = index\">\r\n            1\r\n            <button *ngIf=\"button.visible\" pButton clickStopPropagation type=\"button\" buttonAction [item]=\"button\" [data]=\"data\" [label]=\"button.label\" [icon]=\"button.icon\" [disabled]=\"button.disabled\" [pTooltip]=\"button.tooltip\" class=\"p-button-sm px-3 py-2\" [ngClass]=\"button.styleClass + ' ' + buttons.styleClass\"></button>\r\n          </ng-container>\r\n        </div>\r\n      </ng-container>\r\n\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #menuTemplate let-template>\r\n  <!-- MENU -->\r\n  <ng-container *ngIf=\"menu.callback != null && menu.callback(data) as menuItem\">\r\n    <div class=\"grid grid-nogutter items-center justify-end gap-1 col-12 absolute top-2 right-2\">\r\n      <smz-menu clickStopPropagation [items]=\"menuItem\" [data]=\"data\" [icon]=\"menu.icon\" [styleClass]=\"menu.styleClass\" [buttonClass]=\"menu.buttonClass\"></smz-menu>\r\n    </div>\r\n  </ng-container>\r\n</ng-template>", styles: ["smz-flip-card-type .cmp-card{perspective:500px}smz-flip-card-type .cmp-content{position:absolute;width:100%;height:100%;transition:transform .2s;transform-style:preserve-3d}smz-flip-card-type .cmp-card-flipped .cmp-content{transform:rotateY(180deg);transition:transform .2s}smz-flip-card-type .cmp-front,smz-flip-card-type .cmp-back{position:absolute;height:100%;width:100%;backface-visibility:hidden}smz-flip-card-type .cmp-back{transform:rotateY(180deg)}\n"], 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: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "directive", type: i3.ServerImageDirective, selector: "img[serverImage]", inputs: ["src", "path", "placeholder", "errorPlaceholder", "maximize", "openMaximized", "title", "useServerPath"] }, { kind: "component", type: i4.SmzMenuComponent, selector: "smz-menu", inputs: ["items", "callback", "data", "buttonClass", "styleClass", "icon", "behavior"] }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i6.ClickStopPropagationDirective, selector: "[clickStopPropagation]" }, { kind: "directive", type: i7.NgVar, selector: "[ngVar]", inputs: ["ngVar"] }, { kind: "directive", type: i8.ButtonActionsDirective, selector: "[buttonAction]", inputs: ["item", "data"] }, { kind: "directive", type: i9.SmzInjectDataPathComponent, selector: "[smzInjectDataPathComponent]", inputs: ["smzInjectDataPathComponent", "data", "state"] }, { kind: "pipe", type: i10.SafeHtmlPipe, name: "safeHtml" }, { kind: "pipe", type: i11.SmzCardsContentPipe, name: "cardsContent" }, { kind: "pipe", type: i12.SmzCardsTransformContentPipe, name: "transformContent" }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: SmzFlipCardTypeComponent, decorators: [{
            type: Component,
            args: [{ selector: 'smz-flip-card-type', changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, template: "<ng-container [ngSwitch]=\"mode\">\r\n\r\n<ng-container *ngSwitchCase=\"modes.GRID\">\r\n<ng-container *ngVar=\"template._context.getFlipState(data) as status\">\r\n\r\n  <div class=\"w-full h-full grid grid-nogutter items-center justify-center relative select-none\">\r\n    <div class=\"relative\" [ngStyle]=\"{ width: template.width, height: template.height}\" [ngClass]=\"template.cardStyleClass + (isDebug ? ' border border-red-500 border-solid' : '')\">\r\n      <div class=\"cmp-card w-full h-full\" [ngClass]=\"{ 'cmp-card-flipped': status === 'back', 'cursor-pointer': template.back != null }\" (click)=\"flip()\">\r\n        <div class=\"cmp-content\">\r\n          <div class=\"cmp-front\">\r\n\r\n            <ng-container *ngIf=\"status === 'front'\">\r\n\r\n            <!-- FRONT IMAGE -->\r\n              <ng-container *ngIf=\"template.front.image as frontImage\">\r\n                <ng-container *ngIf=\"frontImage | transformContent : data as image\">\r\n                  <img\r\n                    serverImage\r\n                    [path]=\"image.transform.override ? image.transform.override.dataPath : (data | cardsContent : image.dataPath).result\"\r\n                    [maximize]=\"image.maximize\"\r\n                    [openMaximized]=\"image.openMaximized\"\r\n                    [placeholder]=\"'assets/images/placeholder.jpeg'\"\r\n                    [title]=\"image.title.isVisible ? image.title.getText(data) : null\"\r\n                    [useServerPath]=\"image.useServerPath\"\r\n                    draggable=\"false\"\r\n                    [ngClass]=\"image.gridStyleClass\"\r\n                  >\r\n                </ng-container>\r\n              </ng-container>\r\n\r\n              <ng-container *ngIf=\"template.front.component as frontComponent\">\r\n                <ng-template [smzInjectDataPathComponent]=\"frontComponent.componentData\" [data]=\"data\" [state]=\"template._context\"></ng-template>\r\n              </ng-container>\r\n\r\n              <ng-container *ngIf=\"template.front.html as frontHtml\">\r\n                <div class=\"w-full h-full\" [innerHTML]=\"frontHtml | safeHtml\"></div>\r\n              </ng-container>\r\n\r\n              <ng-container *ngIf=\"template.buttonsLocation === 'front'\">\r\n                <ng-container *ngTemplateOutlet=\"buttonsTemplate; context: { $implicit: template }\"></ng-container>\r\n              </ng-container>\r\n\r\n              <ng-container *ngIf=\"template.menuLocation === 'front'\">\r\n                <ng-container *ngTemplateOutlet=\"menuTemplate; context: { $implicit: template }\"></ng-container>\r\n              </ng-container>\r\n\r\n          </ng-container>\r\n        </div>\r\n\r\n          <div class=\"cmp-back\">\r\n\r\n            <ng-container *ngIf=\"status === 'back'\">\r\n\r\n              <!-- FRONT IMAGE -->\r\n              <ng-container *ngIf=\"template.back.image as backImage\">\r\n                <ng-container *ngIf=\"backImage | transformContent : data as image\">\r\n                  <img\r\n                    serverImage\r\n                    [path]=\"image.transform.override ? image.transform.override.dataPath : (data | cardsContent : image.dataPath).result\"\r\n                    [maximize]=\"image.maximize\"\r\n                    [openMaximized]=\"image.openMaximized\"\r\n                    [placeholder]=\"'assets/images/placeholder.jpeg'\"\r\n                    [title]=\"image.title.isVisible ? image.title.getText(data) : null\"\r\n                    [useServerPath]=\"image.useServerPath\"\r\n                    draggable=\"false\"\r\n                    [ngClass]=\"image.gridStyleClass\"\r\n                  >\r\n                </ng-container>\r\n              </ng-container>\r\n\r\n              <ng-container *ngIf=\"template.back.component as backComponent\">\r\n                <ng-template [smzInjectDataPathComponent]=\"backComponent.componentData\" [data]=\"data\" [state]=\"template._context\"></ng-template>\r\n              </ng-container>\r\n\r\n              <ng-container *ngIf=\"template.back.html as backHtml\">\r\n                <div class=\"w-full h-full\" [innerHTML]=\"backHtml | safeHtml\"></div>\r\n              </ng-container>\r\n\r\n              <ng-container *ngIf=\"template.buttonsLocation === 'back'\">\r\n                <ng-container *ngTemplateOutlet=\"buttonsTemplate; context: { $implicit: template }\"></ng-container>\r\n              </ng-container>\r\n\r\n              <ng-container *ngIf=\"template.menuLocation === 'back'\">\r\n                <ng-container *ngTemplateOutlet=\"menuTemplate; context: { $implicit: template }\"></ng-container>\r\n              </ng-container>\r\n\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n</ng-container>\r\n</ng-container>\r\n\r\n<ng-container *ngSwitchCase=\"modes.LIST\"></ng-container>\r\n\r\n</ng-container>\r\n\r\n<ng-template #buttonsTemplate let-template>\r\n  <div class=\"absolute bottom-0 inset-x-0\">\r\n    <div class=\"grid grid-nogutter flex-col items-start justify-center gap-2 col\" [ngClass]=\"template.contentStyleClass\">\r\n\r\n      <!-- BUTTONS -->\r\n      <ng-container *ngIf=\"buttons.callback != null && buttons.callback(data) as buttonsData\">\r\n        <div class=\"w-full grid grid-nogutter items-center justify-center gap-1\">\r\n          <ng-container *ngFor=\"let button of buttonsData; let i = index\">\r\n            1\r\n            <button *ngIf=\"button.visible\" pButton clickStopPropagation type=\"button\" buttonAction [item]=\"button\" [data]=\"data\" [label]=\"button.label\" [icon]=\"button.icon\" [disabled]=\"button.disabled\" [pTooltip]=\"button.tooltip\" class=\"p-button-sm px-3 py-2\" [ngClass]=\"button.styleClass + ' ' + buttons.styleClass\"></button>\r\n          </ng-container>\r\n        </div>\r\n      </ng-container>\r\n\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #menuTemplate let-template>\r\n  <!-- MENU -->\r\n  <ng-container *ngIf=\"menu.callback != null && menu.callback(data) as menuItem\">\r\n    <div class=\"grid grid-nogutter items-center justify-end gap-1 col-12 absolute top-2 right-2\">\r\n      <smz-menu clickStopPropagation [items]=\"menuItem\" [data]=\"data\" [icon]=\"menu.icon\" [styleClass]=\"menu.styleClass\" [buttonClass]=\"menu.buttonClass\"></smz-menu>\r\n    </div>\r\n  </ng-container>\r\n</ng-template>", styles: ["smz-flip-card-type .cmp-card{perspective:500px}smz-flip-card-type .cmp-content{position:absolute;width:100%;height:100%;transition:transform .2s;transform-style:preserve-3d}smz-flip-card-type .cmp-card-flipped .cmp-content{transform:rotateY(180deg);transition:transform .2s}smz-flip-card-type .cmp-front,smz-flip-card-type .cmp-back{position:absolute;height:100%;width:100%;backface-visibility:hidden}smz-flip-card-type .cmp-back{transform:rotateY(180deg)}\n"] }]
        }], ctorParameters: () => [], propDecorators: { template: [{
                type: Input
            }], data: [{
                type: Input
            }], mode: [{
                type: Input
            }], isDebug: [{
                type: Input
            }], buttons: [{
                type: Input
            }], menu: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 