import * as i0 from '@angular/core';
import { Component, Input, ViewChild, HostListener, EventEmitter, Output, NgModule } from '@angular/core';
import * as i2$1 from '@angular/forms';
import { FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms';
import { isNullOrUndefined } from '@seniorsistemas/angular-components/utils';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i3 from '@seniorsistemas/angular-components/checkbox-list';
import { CheckboxListModule } from '@seniorsistemas/angular-components/checkbox-list';
import * as i2 from '@ngx-translate/core';
import { TranslateModule } from '@ngx-translate/core';

class ThumbnailItemVideoComponent {
    imageUrl;
    videoUrl;
    videoPlayer;
    onMouseEnter() {
        if (this.videoPlayer?.nativeElement) {
            this.videoPlayer.nativeElement.play();
        }
    }
    onMouseLeave() {
        if (this.videoPlayer?.nativeElement) {
            this.videoPlayer.nativeElement.pause();
            this.videoPlayer.nativeElement.currentTime = 0;
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ThumbnailItemVideoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ThumbnailItemVideoComponent, selector: "s-thumbnail-item-video", inputs: { imageUrl: "imageUrl", videoUrl: "videoUrl" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, viewQueries: [{ propertyName: "videoPlayer", first: true, predicate: ["videoPlayer"], descendants: true }], ngImport: i0, template: "<div class=\"thumbnail-item-video\" [ngClass]=\"{ 'thumbnail-item-video--playable': videoUrl }\">\n    <div\n        class=\"thumbnail-image\"\n        [ngStyle]=\"{'backgroundImage': 'url(' + imageUrl + ')'}\">\n    </div>\n    <div class=\"play-overlay\">\n        <i class=\"icon fas fa-play\"></i>\n        <span class=\"label\">{{ \"platform.angular_components.watch\" | translate }}</span>\n    </div>\n    <video\n        *ngIf=\"videoUrl\"\n        #videoPlayer\n        class=\"thumbnail-video-preview\"\n        [src]=\"videoUrl\"\n        [loop]=\"true\"\n        [muted]=\"true\"\n        preload=\"none\">\n    </video>\n</div>\n", styles: [".thumbnail-item-video{cursor:pointer;height:100px;overflow:hidden;position:relative;width:100px}.thumbnail-item-video .thumbnail-image{background-repeat:no-repeat;background-size:cover;height:100%;width:100%}.thumbnail-item-video .thumbnail-video-preview{height:100%;left:0;width:100%;object-fit:cover;opacity:0;position:absolute;top:0;transition:opacity .3s ease-in-out}.thumbnail-item-video:hover .thumbnail-video-preview{opacity:1}.thumbnail-item-video .play-overlay{align-items:center;color:#fff;display:flex;flex-direction:column;gap:8px;justify-content:center;left:50%;opacity:1;position:absolute;top:50%;transform:translate(-50%,-50%);transition:opacity .3s ease-in-out;width:100%;z-index:10}.thumbnail-item-video .play-overlay .icon{color:#fff;font-size:24px}.thumbnail-item-video .play-overlay .label{overflow:hidden;padding:0 8px;text-overflow:ellipsis;width:100%}.thumbnail-item-video--playable:hover .play-overlay{opacity:0}\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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ThumbnailItemVideoComponent, decorators: [{
            type: Component,
            args: [{ selector: "s-thumbnail-item-video", template: "<div class=\"thumbnail-item-video\" [ngClass]=\"{ 'thumbnail-item-video--playable': videoUrl }\">\n    <div\n        class=\"thumbnail-image\"\n        [ngStyle]=\"{'backgroundImage': 'url(' + imageUrl + ')'}\">\n    </div>\n    <div class=\"play-overlay\">\n        <i class=\"icon fas fa-play\"></i>\n        <span class=\"label\">{{ \"platform.angular_components.watch\" | translate }}</span>\n    </div>\n    <video\n        *ngIf=\"videoUrl\"\n        #videoPlayer\n        class=\"thumbnail-video-preview\"\n        [src]=\"videoUrl\"\n        [loop]=\"true\"\n        [muted]=\"true\"\n        preload=\"none\">\n    </video>\n</div>\n", styles: [".thumbnail-item-video{cursor:pointer;height:100px;overflow:hidden;position:relative;width:100px}.thumbnail-item-video .thumbnail-image{background-repeat:no-repeat;background-size:cover;height:100%;width:100%}.thumbnail-item-video .thumbnail-video-preview{height:100%;left:0;width:100%;object-fit:cover;opacity:0;position:absolute;top:0;transition:opacity .3s ease-in-out}.thumbnail-item-video:hover .thumbnail-video-preview{opacity:1}.thumbnail-item-video .play-overlay{align-items:center;color:#fff;display:flex;flex-direction:column;gap:8px;justify-content:center;left:50%;opacity:1;position:absolute;top:50%;transform:translate(-50%,-50%);transition:opacity .3s ease-in-out;width:100%;z-index:10}.thumbnail-item-video .play-overlay .icon{color:#fff;font-size:24px}.thumbnail-item-video .play-overlay .label{overflow:hidden;padding:0 8px;text-overflow:ellipsis;width:100%}.thumbnail-item-video--playable:hover .play-overlay{opacity:0}\n"] }]
        }], propDecorators: { imageUrl: [{
                type: Input,
                args: [{ required: true }]
            }], videoUrl: [{
                type: Input,
                args: [{ required: true }]
            }], videoPlayer: [{
                type: ViewChild,
                args: ["videoPlayer"]
            }], onMouseEnter: [{
                type: HostListener,
                args: ["mouseenter"]
            }], onMouseLeave: [{
                type: HostListener,
                args: ["mouseleave"]
            }] } });

class ThumbnailItemImageComponent {
    imageUrl = '';
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ThumbnailItemImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ThumbnailItemImageComponent, selector: "s-thumbnail-item-image", inputs: { imageUrl: "imageUrl" }, ngImport: i0, template: "<div class=\"thumbnail-item-image\">\n    <div\n        *ngIf=\"imageUrl; else noImage\"\n        class=\"thumbnail-image\"\n        [ngStyle]=\"{ backgroundImage: 'url(' + imageUrl + ')' }\">\n    </div>\n\n    <ng-template #noImage>\n        <div class=\"content\">\n            <i class=\"icon fas fa-image\"></i>\n            <span class=\"label\">{{ \"platform.angular_components.view\" | translate }}</span>\n        </div>\n    </ng-template>\n</div>\n", styles: [".thumbnail-item-image{align-items:center;display:flex;height:100px;justify-content:center;width:100px}.thumbnail-item-image .thumbnail-image{background-repeat:no-repeat;background-size:cover;height:100%;width:100%}.thumbnail-item-image .content{align-items:center;color:#fff;display:flex;flex-direction:column;font-family:Open Sans,sans-serif;justify-content:center;width:100%}.thumbnail-item-image .content .icon{font-size:24px}.thumbnail-item-image .content .label{font-size:12px;overflow:hidden;padding:0 8px;text-overflow:ellipsis;width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ThumbnailItemImageComponent, decorators: [{
            type: Component,
            args: [{ selector: "s-thumbnail-item-image", template: "<div class=\"thumbnail-item-image\">\n    <div\n        *ngIf=\"imageUrl; else noImage\"\n        class=\"thumbnail-image\"\n        [ngStyle]=\"{ backgroundImage: 'url(' + imageUrl + ')' }\">\n    </div>\n\n    <ng-template #noImage>\n        <div class=\"content\">\n            <i class=\"icon fas fa-image\"></i>\n            <span class=\"label\">{{ \"platform.angular_components.view\" | translate }}</span>\n        </div>\n    </ng-template>\n</div>\n", styles: [".thumbnail-item-image{align-items:center;display:flex;height:100px;justify-content:center;width:100px}.thumbnail-item-image .thumbnail-image{background-repeat:no-repeat;background-size:cover;height:100%;width:100%}.thumbnail-item-image .content{align-items:center;color:#fff;display:flex;flex-direction:column;font-family:Open Sans,sans-serif;justify-content:center;width:100%}.thumbnail-item-image .content .icon{font-size:24px}.thumbnail-item-image .content .label{font-size:12px;overflow:hidden;padding:0 8px;text-overflow:ellipsis;width:100%}\n"] }]
        }], propDecorators: { imageUrl: [{
                type: Input,
                args: [{ required: true }]
            }] } });

class ThumbnailItemComponent {
    itemData;
    isCheckable = true;
    isChecked = false;
    combineCheckboxEvent = true;
    checked = new EventEmitter();
    opened = new EventEmitter();
    checkboxFormGroup = new FormGroup({});
    ngOnInit() {
        this._validateItemData();
        this._createFormGroup();
    }
    onClick() {
        this.opened.emit(this.itemData);
    }
    checkboxClick(event) {
        if (this.combineCheckboxEvent) {
            return;
        }
        event.stopPropagation();
    }
    _createFormGroup() {
        this.checkboxFormGroup = new FormGroup({
            checkbox: new FormControl({ checked: this.isChecked }),
        });
        this.checkboxFormGroup.get("checkbox")?.valueChanges.subscribe((value) => {
            this.checked.emit({ item: this.itemData, selected: value.checked });
        });
    }
    _validateItemData() {
        if (isNullOrUndefined(this.itemData)) {
            throw new Error("itemData is required");
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ThumbnailItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ThumbnailItemComponent, selector: "s-thumbnail-item", inputs: { itemData: "itemData", isCheckable: "isCheckable", isChecked: "isChecked", combineCheckboxEvent: "combineCheckboxEvent" }, outputs: { checked: "checked", opened: "opened" }, ngImport: i0, template: "<button\n    *ngIf=\"itemData\"\n    class=\"thumbnail-item\"\n    (click)=\"onClick()\"\n>\n    <div class=\"thumbnail-item-content\">\n        <div class=\"content\">\n            <ng-container *ngIf=\"itemData.type === 'video'\">\n                <s-thumbnail-item-video\n                    [imageUrl]=\"itemData.imageUrl ? itemData.imageUrl : ''\"\n                    [videoUrl]=\"itemData.videoUrl ? itemData.videoUrl : ''\"\n                >\n                </s-thumbnail-item-video>\n            </ng-container>\n            <ng-container *ngIf=\"itemData.type === 'image'\">\n                <s-thumbnail-item-image\n                    [imageUrl]=\"itemData.imageUrl ? itemData.imageUrl : ''\"\n                ></s-thumbnail-item-image>\n            </ng-container>\n            <ng-container *ngIf=\"itemData.type === 'audio'\">\n                <i class=\"icon fas fa-volume-down\"></i>\n                <span class=\"label\">{{ 'platform.angular_components.listen' | translate }}</span>\n            </ng-container>\n            <ng-container *ngIf=\"itemData.type === 'file'\">\n                <i class=\"icon fas fa-file-alt\"></i>\n                <span class=\"label\">{{ 'platform.angular_components.view' | translate }}</span>\n            </ng-container>\n        </div>\n        <form\n            *ngIf=\"isCheckable\"\n            [formGroup]=\"checkboxFormGroup\"\n            class=\"checkbox\"\n        >\n            <s-checkbox-list\n                [data]=\"{ label: '' }\"\n                formControlName=\"checkbox\"\n                (click)=\"checkboxClick($event)\"\n            ></s-checkbox-list>\n        </form>\n    </div>\n    <span class=\"file-name-label\">{{ itemData.fileName }}</span>\n</button>\n", styles: [".thumbnail-item{align-items:center;background:transparent;border:none;cursor:pointer;display:inline-flex;flex-direction:column;justify-content:center;overflow:hidden;width:100px}.thumbnail-item-content{align-items:center;background-image:linear-gradient(to top right,#5288b6,#00c89a);border-radius:8px;display:flex;flex-direction:column;height:100px;justify-content:center;position:relative;-webkit-user-select:none;user-select:none;width:100%;overflow:hidden}.thumbnail-item-content .checkbox{position:absolute;right:8px;top:8px}.thumbnail-item-content .content{align-items:center;color:#fff;display:flex;flex-direction:column;gap:4px;overflow:hidden;width:100%}.thumbnail-item-content .content .icon{font-size:24px}.thumbnail-item-content .content .label{font-size:12px;width:100%;padding:0 8px;overflow:hidden;text-overflow:ellipsis}.thumbnail-item:hover{transform:scale(1.05);transition:all .2s ease-in-out}.thumbnail-item .file-name-label{color:#525966;font-family:Open Sans,sans-serif;font-size:12px;overflow:hidden;text-align:center;text-overflow:ellipsis;text-wrap:nowrap;-webkit-user-select:none;user-select:none;width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.CheckboxListComponent, selector: "s-checkbox-list", inputs: ["data"] }, { kind: "component", type: ThumbnailItemVideoComponent, selector: "s-thumbnail-item-video", inputs: ["imageUrl", "videoUrl"] }, { kind: "component", type: ThumbnailItemImageComponent, selector: "s-thumbnail-item-image", inputs: ["imageUrl"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ThumbnailItemComponent, decorators: [{
            type: Component,
            args: [{ selector: "s-thumbnail-item", template: "<button\n    *ngIf=\"itemData\"\n    class=\"thumbnail-item\"\n    (click)=\"onClick()\"\n>\n    <div class=\"thumbnail-item-content\">\n        <div class=\"content\">\n            <ng-container *ngIf=\"itemData.type === 'video'\">\n                <s-thumbnail-item-video\n                    [imageUrl]=\"itemData.imageUrl ? itemData.imageUrl : ''\"\n                    [videoUrl]=\"itemData.videoUrl ? itemData.videoUrl : ''\"\n                >\n                </s-thumbnail-item-video>\n            </ng-container>\n            <ng-container *ngIf=\"itemData.type === 'image'\">\n                <s-thumbnail-item-image\n                    [imageUrl]=\"itemData.imageUrl ? itemData.imageUrl : ''\"\n                ></s-thumbnail-item-image>\n            </ng-container>\n            <ng-container *ngIf=\"itemData.type === 'audio'\">\n                <i class=\"icon fas fa-volume-down\"></i>\n                <span class=\"label\">{{ 'platform.angular_components.listen' | translate }}</span>\n            </ng-container>\n            <ng-container *ngIf=\"itemData.type === 'file'\">\n                <i class=\"icon fas fa-file-alt\"></i>\n                <span class=\"label\">{{ 'platform.angular_components.view' | translate }}</span>\n            </ng-container>\n        </div>\n        <form\n            *ngIf=\"isCheckable\"\n            [formGroup]=\"checkboxFormGroup\"\n            class=\"checkbox\"\n        >\n            <s-checkbox-list\n                [data]=\"{ label: '' }\"\n                formControlName=\"checkbox\"\n                (click)=\"checkboxClick($event)\"\n            ></s-checkbox-list>\n        </form>\n    </div>\n    <span class=\"file-name-label\">{{ itemData.fileName }}</span>\n</button>\n", styles: [".thumbnail-item{align-items:center;background:transparent;border:none;cursor:pointer;display:inline-flex;flex-direction:column;justify-content:center;overflow:hidden;width:100px}.thumbnail-item-content{align-items:center;background-image:linear-gradient(to top right,#5288b6,#00c89a);border-radius:8px;display:flex;flex-direction:column;height:100px;justify-content:center;position:relative;-webkit-user-select:none;user-select:none;width:100%;overflow:hidden}.thumbnail-item-content .checkbox{position:absolute;right:8px;top:8px}.thumbnail-item-content .content{align-items:center;color:#fff;display:flex;flex-direction:column;gap:4px;overflow:hidden;width:100%}.thumbnail-item-content .content .icon{font-size:24px}.thumbnail-item-content .content .label{font-size:12px;width:100%;padding:0 8px;overflow:hidden;text-overflow:ellipsis}.thumbnail-item:hover{transform:scale(1.05);transition:all .2s ease-in-out}.thumbnail-item .file-name-label{color:#525966;font-family:Open Sans,sans-serif;font-size:12px;overflow:hidden;text-align:center;text-overflow:ellipsis;text-wrap:nowrap;-webkit-user-select:none;user-select:none;width:100%}\n"] }]
        }], propDecorators: { itemData: [{
                type: Input
            }], isCheckable: [{
                type: Input
            }], isChecked: [{
                type: Input
            }], combineCheckboxEvent: [{
                type: Input
            }], checked: [{
                type: Output
            }], opened: [{
                type: Output
            }] } });

class ThumbnailsComponent {
    items = [];
    selectable = true;
    combineCheckboxEvent = true;
    set selection(items) {
        this._selection = [...items];
    }
    selectionChange = new EventEmitter();
    itemOpened = new EventEmitter();
    _selection = [];
    onItemOpened(item) {
        this.itemOpened.emit(item);
    }
    onItemSelected(items) {
        if (items.selected) {
            this._selection.push(items.item);
        }
        else {
            this._selection.splice(this._selection.findIndex((item) => item === items.item), 1);
        }
        this.selectionChange.emit(this._selection);
    }
    isSelected(item) {
        return this._selection.some((i) => i.id === item.id);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ThumbnailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ThumbnailsComponent, selector: "s-thumbnails", inputs: { items: "items", selectable: "selectable", combineCheckboxEvent: "combineCheckboxEvent", selection: "selection" }, outputs: { selectionChange: "selectionChange", itemOpened: "itemOpened" }, ngImport: i0, template: "<div class=\"thumbnails\">\n    @for(item of items; track $index) {\n        <s-thumbnail-item\n            [combineCheckboxEvent]=\"combineCheckboxEvent\"\n            [itemData]=\"item\"\n            [isCheckable]=\"selectable\"\n            [isChecked]=\"isSelected(item)\"\n            (checked)=\"onItemSelected($event)\"\n            (opened)=\"onItemOpened($event)\">\n        </s-thumbnail-item>\n    }\n</div>\n", styles: [".thumbnails{display:flex;flex-wrap:wrap;gap:12px}\n"], dependencies: [{ kind: "component", type: ThumbnailItemComponent, selector: "s-thumbnail-item", inputs: ["itemData", "isCheckable", "isChecked", "combineCheckboxEvent"], outputs: ["checked", "opened"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ThumbnailsComponent, decorators: [{
            type: Component,
            args: [{ selector: "s-thumbnails", template: "<div class=\"thumbnails\">\n    @for(item of items; track $index) {\n        <s-thumbnail-item\n            [combineCheckboxEvent]=\"combineCheckboxEvent\"\n            [itemData]=\"item\"\n            [isCheckable]=\"selectable\"\n            [isChecked]=\"isSelected(item)\"\n            (checked)=\"onItemSelected($event)\"\n            (opened)=\"onItemOpened($event)\">\n        </s-thumbnail-item>\n    }\n</div>\n", styles: [".thumbnails{display:flex;flex-wrap:wrap;gap:12px}\n"] }]
        }], propDecorators: { items: [{
                type: Input
            }], selectable: [{
                type: Input
            }], combineCheckboxEvent: [{
                type: Input
            }], selection: [{
                type: Input
            }], selectionChange: [{
                type: Output
            }], itemOpened: [{
                type: Output
            }] } });

class ThumbnailsModule {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ThumbnailsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: ThumbnailsModule, declarations: [ThumbnailsComponent, ThumbnailItemComponent, ThumbnailItemVideoComponent, ThumbnailItemImageComponent], imports: [CommonModule, ReactiveFormsModule, TranslateModule, CheckboxListModule], exports: [ThumbnailsComponent] });
    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ThumbnailsModule, imports: [CommonModule, ReactiveFormsModule, TranslateModule, CheckboxListModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ThumbnailsModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [CommonModule, ReactiveFormsModule, TranslateModule, CheckboxListModule],
                    declarations: [ThumbnailsComponent, ThumbnailItemComponent, ThumbnailItemVideoComponent, ThumbnailItemImageComponent],
                    exports: [ThumbnailsComponent],
                }]
        }] });

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

export { ThumbnailsComponent, ThumbnailsModule };
//# sourceMappingURL=seniorsistemas-angular-components-thumbnails.mjs.map
